/* =============================================================
   Night Dunes — WordPress / WooCommerce bridge
   -------------------------------------------------------------
   style.css is the design, merged from references/design/*.html
   and never hand-edited. This file is everything the design had
   no reason to draw, because a static page does not have it:

     · form controls where the design used plain text nodes
     · WooCommerce notices, pagination, checkout, account forms
     · the accessibility affordances a live site needs

   Rule for this file: derive from the design's tokens, never
   invent a colour, a family, or a scale. If something here
   starts overriding a design rule, the design changed — fix it
   in Claude Design and re-merge, not here.
   ============================================================= */

/* Bridge-only asset. The design draws its line icons inline in the
   header SVGs; a password reveal has no design equivalent, so this
   matches their weight and 24-box and is used as a mask, which keeps
   the colour coming from the palette rather than a bundled image. */
:root {
  --nd-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M2 12s3.6-6.6 10-6.6S22 12 22 12s-3.6 6.6-10 6.6S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.7'/%3E%3C/svg%3E");
}

/* --- Accessibility ------------------------------------------ */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.nd-skip-link:focus {
  position: fixed !important; top: 12px; left: 12px; z-index: 999;
  width: auto; height: auto; margin: 0; padding: 14px 22px;
  clip: auto; clip-path: none;
  background: var(--nd-sand); color: var(--nd-indigo);
  font-family: var(--nd-font-body); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase;
}
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 1px solid var(--nd-gold);
  outline-offset: 3px;
}

/* --- Quantity fields ----------------------------------------
   The design shows the count as a <div>. Live, it has to be an
   input so the number survives without JavaScript. These rules
   only undo the browser's default chrome; size, colour and
   tracking still come from .nd-qty__value / .nd-line__count in
   the design stylesheet.                                        */
.nd-qty__value,
.nd-line__count {
  -moz-appearance: textfield;
  appearance: textfield;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-weight: 300;
}
.nd-qty__value::-webkit-outer-spin-button,
.nd-qty__value::-webkit-inner-spin-button,
.nd-line__count::-webkit-outer-spin-button,
.nd-line__count::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* Remove is a link here (it carries a nonce), not a button. */
.nd-line__remove { text-decoration: none; display: inline-block; }

/* Checkout is a link here, so it needs the button's centring. */
.nd-summary__cta { text-align: center; }

/* --- Express payment buttons on the bag -----------------------
   Apple Pay, Google Pay and PayPal print on the
   woocommerce_proceed_to_checkout hook, which cart.php fires
   inside .nd-summary__express, below the design's own CTA. The
   design has no wallets to draw, so nothing here overrides it —
   these rules only give the gateways' own markup a width, an
   order and some air, and stop each plugin's default margins
   from stacking up.                                             */
.nd-summary__express { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.nd-summary__express:empty { display: none; }
.nd-summary__express > *,
.nd-summary__express .wc-proceed-to-checkout { margin: 0; padding: 0; width: 100%; }

/* Wallet buttons come in at whatever height their SDK picks. Capping
   them keeps one from towering over the CTA it sits under.       */
.nd-summary__express iframe,
.nd-summary__express .paypal-buttons { max-height: 46px; }

/* Wallet button height is deliberately not set here. Each button is
   drawn inside its gateway's own iframe, so a max-height from this
   side crops the button rather than resizing it — a clipped Google
   Pay is worse than a tall one. Height is a setting in each gateway
   (PayPal under its button styling, Stripe under express checkout);
   setting both to the same number is what makes them match.      */

/* Shown only when JavaScript is unavailable; nd-shop.js hides it. */
.nd-cart__update {
  margin-top: 28px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--nd-font-body); font-size: 11px; font-weight: 300;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--nd-ivory-45);
}
.nd-cart__update:hover { color: var(--nd-gold); }
.nd-cart__update[hidden] { display: none; }

/* --- Safety net against .woocommerce img { height: auto } ----
   functions.php dequeues woocommerce-layout.css, which is the
   real fix. This is here in case a plugin or a future setting
   puts those styles back: that sheet's `.woocommerce img`
   selector is (0,1,1) and silently outranks the design's
   single-class media rules at (0,1,0). Prefixing with .nd-page
   takes them to (0,2,0) and settles it without !important.
   Values are not restated — every one reads the design's own
   declaration or token, so re-exporting still governs.         */
/* The wordmark's own height is set in the "One wordmark size"
   block below, at this same .nd-page specificity, so it keeps
   the protection this block exists to give. */
.nd-page .nd-hero__media,
.nd-page .nd-pagehero__media,
.nd-page .nd-arhead__media,
.nd-page .nd-achero__media,
.nd-page .nd-ritual-closing__media,
.nd-page .nd-dunes__photo { height: 100%; }

/* --- Clickable cards -----------------------------------------
   The design draws cards, not links. .nd-product__hit and its
   siblings cover the card so the whole tile is the target,
   without adding a wrapper that would change the design's
   nesting or its flex/grid behaviour.                           */
.nd-product,
.nd-article-card,
.nd-readnext-card { position: relative; }
.nd-product__hit {
  position: absolute; inset: 0;
  border: 0; background: none;
}

/* Header icon for the page you are on. */
.nd-cart-count {
  position: absolute; top: -6px; right: -9px;
  min-width: 15px; height: 15px; padding: 0 4px;
  display: none; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--nd-gold); color: var(--nd-indigo);
  font-family: var(--nd-font-body); font-size: 9px; font-weight: 500;
  letter-spacing: 0; line-height: 1;
}
.nd-cart-count.is-filled { display: flex; }
.nd-utility__link { position: relative; }

/* No orders yet — the design has no empty state for this list. */
.nd-acorders__empty {
  padding: 34px 0 0;
  font-family: var(--nd-font-body); font-size: 14px; font-weight: 300;
  letter-spacing: 0.04em; color: var(--nd-ivory-55);
}

/* --- Notices ------------------------------------------------- */
.woocommerce-notices-wrapper:empty { display: none; }

/* WooCommerce prints its notices before the bag draws its own
   masthead, so on any page carrying one — "X has been added to your
   cart" — the notice became the first thing in the document and sat
   underneath the fixed header, half hidden. It takes the header
   clearance instead, and the masthead below it gives its own up, so
   the page starts in the right place whether a notice is there or
   not.                                                            */
.woocommerce > .woocommerce-notices-wrapper:not(:empty):first-child {
  margin-top: var(--nd-header-offset);
}
.woocommerce > .woocommerce-notices-wrapper:not(:empty):first-child + .nd-cart-head {
  margin-top: 0;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  max-width: var(--nd-page-max-footer);
  margin: 40px auto 0;
  padding: 20px 24px;
  border: var(--nd-border-width) solid rgba(176,138,78,0.55);
  background: var(--nd-indigo-lift);
  list-style: none;
  font-family: var(--nd-font-body); font-size: 13px; font-weight: 300;
  line-height: 1.8; letter-spacing: 0.04em;
  color: var(--nd-ivory-85);
}
.woocommerce-error { border-color: rgba(244,236,223,0.45); }
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a { color: var(--nd-sand); text-decoration: underline; text-underline-offset: 3px; }
/* Notice and its action on one line. These were floated right, which
   took the button out of flow — so it sat hard against the right edge
   instead of aligning with the text, and the notice collapsed to
   nothing behind it, letting the last panel on the account page run
   into the footer.                                                  */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button { flex: 0 0 auto; margin: 0; }

/* WooCommerce offers to email a verification link so guest orders can
   be attached to the account. On a store with no order history it is
   an errand handed to someone who only came to look at an empty list.
   Matched on the link it carries rather than its wording.           */
.woocommerce-info:has(a[href*="wc_send_verification"]) { display: none; }

/* --- WooCommerce buttons that aren't ours --------------------
   Checkout, account and order screens print .button. Give them
   the design's own button treatment rather than a theme reset.  */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit {
  display: inline-block;
  padding: var(--nd-button-padding);
  border: var(--nd-border-width) solid var(--nd-border-button);
  border-radius: var(--nd-radius);
  font-family: var(--nd-font-body);
  font-size: var(--nd-button-size);
  font-weight: var(--nd-button-weight);
  line-height: var(--nd-button-line);
  letter-spacing: var(--nd-button-tracking);
  text-transform: uppercase;
  color: var(--nd-indigo);
  background-color: var(--nd-sand);
  cursor: pointer;
  transition: background var(--nd-duration-hover) var(--nd-ease-hover);
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover { background-color: var(--nd-gold); color: var(--nd-indigo); }

/* --- Account & checkout forms --------------------------------
   Reuse the contact form's field treatment so every input on the
   site looks like the same input.                               */
.woocommerce form .form-row,
.woocommerce-address-fields .form-row,
.woocommerce-EditAccountForm .form-row {
  display: flex; flex-direction: column; gap: 14px; margin: 0 0 26px;
}
/* A checkbox and its label belong on one line, not stacked. The
   column above is right for a label over a field; it is wrong for
   "save my payment information", where it put the box on one row and
   the sentence on the next.                                       */
.woocommerce form .form-row.woocommerce-SavedPaymentMethods-save,
.woocommerce form .form-row.create-account,
.woocommerce form .form-row.woocommerce-validated:has(> input[type="checkbox"]) {
  flex-direction: row; align-items: center; gap: 10px;
}
.woocommerce form label,
.woocommerce-EditAccountForm legend {
  font-family: var(--nd-font-body);
  font-size: var(--nd-eyebrow-size-sm); letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--nd-gold);
}
.woocommerce form .required { color: var(--nd-sand); text-decoration: none; }
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="password"],
.woocommerce form input[type="number"],
.woocommerce form input[type="search"],
.woocommerce form select,
.woocommerce form textarea,
.select2-container .select2-selection--single {
  width: 100%;
  background: transparent;
  border: var(--nd-border-width) solid rgba(244,236,223,0.3);
  border-radius: var(--nd-radius);
  font-family: var(--nd-font-body); font-size: 14px; font-weight: 300;
  letter-spacing: 0.04em; color: var(--nd-ivory);
  outline: none;
  transition: border-color var(--nd-duration-hover) var(--nd-ease-hover);
}
.woocommerce form input,
.woocommerce form select,
.select2-container .select2-selection--single { height: 54px; padding: 0 20px; }
.woocommerce form textarea { padding: 20px; line-height: 1.85; min-height: 140px; }
.woocommerce form input:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus { border-color: var(--nd-gold); }
.woocommerce form option { color: #111; }

/* Wrappers for the screens with no design of their own. */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-checkout .woocommerce,
.woocommerce-order-received .woocommerce,
.woocommerce-edit-address .woocommerce,
.woocommerce-view-order .woocommerce,
.woocommerce-lost-password .woocommerce {
  max-width: var(--nd-page-max-footer);
  margin: 0 auto;
  padding: 70px var(--nd-gutter) 140px;
  font-family: var(--nd-font-body); font-size: 14px; font-weight: 300;
  line-height: 1.9; color: var(--nd-ivory-80);
}
.woocommerce-account .woocommerce-MyAccount-navigation { display: none; } /* .nd-actabs replaces it */

/* The dashboard's own sections (.nd-acgrid, .nd-acorders) carry the
   design's full-bleed measure and padding, so the wrapper stands
   aside there and does the work on every other endpoint.          */
.woocommerce-account.woocommerce-dashboard .woocommerce-MyAccount-content {
  max-width: none; margin: 0; padding: 0;
}

/* --- Account area banding ------------------------------------
   Owner's direction, matching the Claude Design comp: the tabs and
   the three detail cards sit on Midnight Indigo, and the orders
   block drops back to Obsidian beneath them.

   Worth knowing for the next re-merge — the exported account.html
   puts BOTH on Obsidian (.nd-page is --nd-ink and .nd-acorders sets
   --nd-ink again), so the comp and the export disagree and this
   follows the comp. It lives here rather than in style.css so that
   re-exporting the design cannot quietly undo it.

   The orders block is pushed out to the viewport edge so the two
   read as full-width bands at any width, rather than the ink
   stopping at its 1400px measure with indigo either side.        */
.woocommerce-account .nd-page { background-color: var(--nd-indigo); }
.woocommerce-account .nd-acorders {
  box-shadow: 0 0 0 100vmax var(--nd-ink);
  clip-path: inset(0 -100vmax);
}

/* A form is not a page. Address and account-details fields ran the
   full 1400px measure, which puts a postcode box a metre wide on a
   desktop; this is a reading width for a column of fields.        */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields,
.woocommerce-account form.edit-account { max-width: 560px; }

/* Password reveal. WooCommerce styles this in woocommerce-general.css,
   which this theme dequeues — so it arrived as a bare 15x5 grey block
   under each password field. Redrawn as a quiet eye in the design's
   own line-icon idiom, using the element as a mask so the colour
   comes from the palette rather than from a bundled image.        */
.woocommerce form .password-input { position: relative; display: block; }
.woocommerce form .password-input input { padding-right: 54px; }
.woocommerce form .show-password-input {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0; border: 0;
  background-color: var(--nd-ivory-55);
  cursor: pointer;
  -webkit-mask: var(--nd-eye) no-repeat center / 20px 20px;
  mask: var(--nd-eye) no-repeat center / 20px 20px;
  transition: background-color var(--nd-duration-hover) var(--nd-ease-hover);
}
.woocommerce form .show-password-input:hover,
.woocommerce form .show-password-input.display-password { background-color: var(--nd-gold); }
/* :not([class*="nd-"]) matters here. Restoring the MyAccount-content
   wrapper brought the dashboard's own <h2 class="nd-accard__title">
   inside this selector, and at (0,1,1) it outranked the design's
   (0,1,0) — turning the gold card titles ivory and resizing them.
   This dresses WooCommerce's unclassed headings only.            */
.woocommerce-MyAccount-content h2:not([class*="nd-"]),
.woocommerce-checkout h3,
.woocommerce-order h2:not([class*="nd-"]) {
  font-family: var(--nd-font-display); font-weight: 400;
  font-size: 26px; letter-spacing: 0.02em; color: var(--nd-ivory);
  margin: 54px 0 22px;
}

/* Tables WooCommerce prints (orders, order details, totals). */
.woocommerce table.shop_table,
.woocommerce table.woocommerce-orders-table,
.woocommerce table.woocommerce-table--order-details {
  width: 100%; border-collapse: collapse; margin: 26px 0 44px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 18px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid rgba(244,236,223,0.14);
  font-size: 13px; font-weight: 300; letter-spacing: 0.04em;
}
.woocommerce table.shop_table th {
  font-size: var(--nd-eyebrow-size-sm); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--nd-gold); font-weight: 400;
}
.woocommerce table.shop_table td.product-total,
.woocommerce table.shop_table .amount { color: var(--nd-sand); white-space: nowrap; }

/* Payment box on checkout. */
/* Scoped by class, not by id alone. Both payment panels carry one —
   .woocommerce-checkout-payment on checkout, .woocommerce-Payment on
   add-payment-method — and the account dashboard's Payment CARD also
   has id="payment". Matching on the bare id put the checkout panel's
   inset box and border around that card. */
#payment:is(.woocommerce-checkout-payment, .woocommerce-Payment) {
  background: var(--nd-indigo-lift);
  border: var(--nd-border-width) solid rgba(244,236,223,0.14);
  padding: 34px;
}
#payment:is(.woocommerce-checkout-payment, .woocommerce-Payment) ul.payment_methods { list-style: none; margin: 0 0 22px; padding: 0; }
#payment:is(.woocommerce-checkout-payment, .woocommerce-Payment) ul.payment_methods li { margin: 0 0 14px; }
#payment:is(.woocommerce-checkout-payment, .woocommerce-Payment) div.payment_box {
  background: rgba(244,236,223,0.05); padding: 18px; margin-top: 10px;
  font-size: 13px; line-height: 1.8;
}
#payment:is(.woocommerce-checkout-payment, .woocommerce-Payment) .place-order { margin: 0; }
/* Capped and centred rather than run edge to edge: across a 1200px
   payment panel a full-width button reads as a banner, not something
   to press. The cap is close to the bag's own CTA width, so the two
   pages end on the same shape.                                    */
#payment:is(.woocommerce-checkout-payment, .woocommerce-Payment) #place_order {
  display: block;
  width: 100%; max-width: 420px;
  margin: 0 auto; padding: 17px 0;
}

/* --- Classic checkout ----------------------------------------
   The design never drew a checkout page, so this screen is
   dressed entirely by the field, button and table rules above.
   Four things needed narrowing down once it went live.         */

/* Radios and checkboxes are inputs too, and the rule above gives
   every input a 54px box with 20px of side padding — which turned
   each payment-method radio and the "ship to a different address"
   checkbox into a full-width bar with a dot lost inside it.
   Beyond undoing that, they are drawn here rather than left to the
   platform: the browser's own control is a white disc with a grey
   ring, which on this background reads as a bright dot belonging
   to nothing else on the page. accent-color only reaches the
   checked state, so the whole control is rebuilt from the design's
   hairline-and-gold vocabulary.                                   */
.woocommerce form input[type="radio"],
.woocommerce form input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  /* Pinned on every axis. These sit inside .form-row, which is a
     column flex container, so the cross axis is horizontal and a
     stretching item grows sideways — which is how Klarna's "save my
     payment information" box rendered as a full-width gold bar with
     its label stranded underneath. width alone did not always settle
     it; align-self and max-width remove the possibility.          */
  width: 16px; height: 16px;
  min-width: 16px; max-width: 16px;
  flex: 0 0 16px; align-self: flex-start;
  padding: 0; margin: 0 10px 0 0;
  background: transparent;
  border: var(--nd-border-width) solid rgba(244,236,223,0.45);
  cursor: pointer;
  display: inline-block; vertical-align: middle;
  transition: border-color var(--nd-duration-hover) var(--nd-ease-hover);
}
.woocommerce form input[type="radio"] { border-radius: 50%; }
.woocommerce form input[type="radio"]:hover,
.woocommerce form input[type="checkbox"]:hover { border-color: var(--nd-gold); }
.woocommerce form input[type="radio"]:checked {
  border-color: var(--nd-gold);
  background: radial-gradient(circle at center, var(--nd-gold) 0 3.5px, transparent 4px);
}
.woocommerce form input[type="checkbox"]:checked {
  border-color: var(--nd-gold); background: var(--nd-gold);
}
.woocommerce form input[type="checkbox"]:checked::after {
  content: ""; display: block; width: 3.5px; height: 7px;
  margin: 1px auto 0;
  border: solid var(--nd-indigo); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* Payment-method and shipping-method names are content, not field
   labels. At the eyebrow's 10px/0.26em gold they read as a caption
   for something else. Only the labels inside those two lists
   change; the address fields keep theirs.                        */
#payment:is(.woocommerce-checkout-payment, .woocommerce-Payment) ul.payment_methods label,
#shipping_method label {
  font-size: 13.5px; font-weight: 300; letter-spacing: 0.04em;
  text-transform: none; color: var(--nd-ivory-85);
}
#payment:is(.woocommerce-checkout-payment, .woocommerce-Payment) ul.payment_methods img {
  max-height: 24px; width: auto; margin-left: 8px; vertical-align: middle;
}

/* ...except the generic card glyph, which ships as a white chip and
   becomes the brightest thing in the payment list, while saying
   nothing the label beside it doesn't. Klarna and Affirm keep their
   marks: those are brands a customer scans for.                  */
#payment:is(.woocommerce-checkout-payment, .woocommerce-Payment) .stripe-cards-icon { display: none; }
#shipping_method { list-style: none; margin: 0; padding: 0; }
#shipping_method li { margin: 0 0 8px; }
#shipping_method .amount { color: var(--nd-sand); }

/* Stripe writes a hidden probe input into the payment box, puts the
   theme's own field classes on it, and reads back the computed
   styles to dress its card iframe. It is position:absolute with no
   positioned ancestor, so the width:100% above resolved against the
   viewport and pushed the document 182px wider than the screen — a
   horizontal scrollbar across the whole checkout. Giving the payment
   box a positioning context contains it, and leaves the styles
   Stripe is reading exactly as they were.                        */
#payment:is(.woocommerce-checkout-payment, .woocommerce-Payment) div.payment_box { position: relative; }

/* Filling the checkout's fields with the design's own inset-panel
   colour. This began as an attempt to make Stripe's card panel dark
   — see the probe rule below for how that turned out — but it earns
   its place regardless: a solid field reads better than a
   transparent one on a form this long.                           */
.woocommerce-checkout form input[type="text"],
.woocommerce-checkout form input[type="email"],
.woocommerce-checkout form input[type="tel"],
.woocommerce-checkout form input[type="password"],
.woocommerce-checkout form select,
.woocommerce-checkout form textarea,
.woocommerce-checkout .select2-container .select2-selection--single {
  background-color: var(--nd-indigo-lift);
}

/* Stripe copies this hidden probe's colour and border into its card
   field, so the probe is how the theme talks to it.

   The white panel that survived several releases was never really a
   colour problem: it was Stripe's Optimized Checkout Suite, whose
   hosted accordion draws its own white container no matter what the
   probe says. Turning OCS off in the gateway settings removed the
   container outright, and the card field is now a plain element
   sitting inside this theme's own dark input — so the probe goes
   back to reporting ivory on indigo, which is what it should have
   said all along for a field of ours.

   Reverse both together if OCS is ever turned back on: dark text on
   Stripe's white is the only legible pairing there.              */
#wc-stripe-hidden-style-input {
  color: var(--nd-ivory);
  background-color: var(--nd-indigo-lift);
  border-color: rgba(244,236,223,0.3);
}

/* The frame customers saw around the card fields was the browser's
   own: Chrome paints 2px groove on an unstyled fieldset, and the
   Stripe card form is wrapped in one. On this background that reads
   as a white rectangle nobody drew.                              */
#payment:is(.woocommerce-checkout-payment, .woocommerce-Payment) fieldset {
  border: 0; margin: 0; padding: 0; min-width: 0;
}

/* Stripe's own per-field wrappers, brought onto the design's
   hairline so the card row matches the address fields above it. */
#payment:is(.woocommerce-checkout-payment, .woocommerce-Payment) .wc-stripe-elements-field,
#payment:is(.woocommerce-checkout-payment, .woocommerce-Payment) .wc-card-elements-field {
  background-color: var(--nd-indigo-lift);
  border: var(--nd-border-width) solid rgba(244,236,223,0.3);
  border-radius: var(--nd-radius);
  padding: 0 14px;
}

/* --- select2, the address selects ----------------------------
   WooCommerce swaps Country and Province for select2, which
   brings its own white dropdown, white search box and a selected
   value so faint it was barely there. None of it is in an iframe,
   so all of it can be brought over to the design.               */
.select2-container--default .select2-selection--single {
  height: 54px;
  background: var(--nd-indigo-lift);
  border: var(--nd-border-width) solid rgba(244,236,223,0.3);
  border-radius: var(--nd-radius);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--nd-ivory); line-height: 52px; padding-left: 20px;
  font-family: var(--nd-font-body); font-size: 14px; font-weight: 300;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: rgba(244,236,223,0.45); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 52px; right: 12px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--nd-sand) transparent transparent; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--nd-sand); }
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--nd-gold); }

.select2-dropdown,
.select2-container--default .select2-dropdown--below,
.select2-container--default .select2-dropdown--above {
  background: var(--nd-indigo-lift);
  border: var(--nd-border-width) solid rgba(176,138,78,0.5);
  border-radius: var(--nd-radius);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: transparent; color: var(--nd-ivory);
  border: var(--nd-border-width) solid rgba(244,236,223,0.3);
  border-radius: var(--nd-radius);
  padding: 10px 12px;
  font-family: var(--nd-font-body); font-size: 14px; font-weight: 300;
}
.select2-container--default .select2-results__option {
  background: transparent; color: var(--nd-ivory-85);
  padding: 11px 16px;
  font-family: var(--nd-font-body); font-size: 14px; font-weight: 300;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--nd-gold); color: var(--nd-indigo);
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background: rgba(176,138,78,0.22); color: var(--nd-ivory);
}

/* --- PayPal's own blocks on the checkout ----------------------
   The gateway prints its smart buttons as a sibling of #payment
   rather than inside it, so they landed outside the payment panel
   running its full width. They cannot be moved from CSS, but they
   can be made to continue the panel — and only once PayPal has
   actually drawn something into them, which is what :has() is
   doing here. Without :has() support nothing is drawn and nothing
   breaks.                                                        */
.woocommerce-checkout .ppc-button-wrapper { padding: 0; }
.woocommerce-checkout .ppc-button-wrapper:has(.paypal-buttons) {
  background: var(--nd-indigo-lift);
  border: var(--nd-border-width) solid rgba(244,236,223,0.14);
  border-top: 0;
  margin-top: -1px;
  padding: 4px 34px 30px;
}
/* Full-bleed wallet buttons across a 1288px panel look like a
   banner, not a payment option. Their height comes from the
   gateway's own setting; this is only about width.              */
.woocommerce-checkout .ppc-button-wrapper .paypal-buttons { max-width: 420px; }

/* Pay Later messaging is an iframe whose text colour PayPal sets,
   not us — on this background it rendered as near-black on
   near-black, and the pale panel it needed to be legible was a
   light rectangle in a dark design. Hidden until it can be set to
   white in the gateway's own Pay Later styling settings.
   !important is load-bearing here and nowhere else in this file:
   PayPal writes style="display: block" onto the element itself,
   and an inline style outranks any selector without it.         */
.ppcp-messages,
.nd-summary__express [data-pp-message] { display: none !important; }

/* --- One wordmark size ---------------------------------------
   The design shrinks the wordmark from 60px to 38px as the header
   condenses on scroll. Held at the single regular size instead, so
   nothing about the mark changes as the page moves. Both values
   still come from the design's own tokens: the condensed one at
   desktop and the resting one below 900px are both 38px, so this
   is the design's regular size, held everywhere.

   Every selector is prefixed .nd-page for two reasons: the
   condensed rule in the design is .nd-header.is-condensed
   .nd-wordmark__img at (0,3,0) and has to be outranked, and the
   WooCommerce safety net above needs the same reach it always had.
   Without the prefix this block sits at (0,1,0) and loses to both. */
.nd-page .nd-wordmark__img,
.nd-page .nd-header.is-condensed .nd-wordmark__img {
  height: var(--nd-wordmark-height-condensed);
  transition: none;
}
@media (max-width: 900px) {
  .nd-page .nd-wordmark__img,
  .nd-page .nd-header.is-condensed .nd-wordmark__img { height: var(--nd-wordmark-height); }
}

/* --- Express wallets stay on the bag --------------------------
   Apple Pay, Google Pay and Link print above the checkout form,
   where three saturated brand buttons and an "— OR —" rule are
   the loudest thing on a page whose job is quiet form-filling —
   and where the shopper has already chosen to fill the form. The
   same buttons remain on the bag, which is where the fast path
   belongs. Remove this block to bring them back.

   !important for the same reason as the Pay Later block above:
   Stripe writes style="display: block" onto both the button
   container and the "— OR —" rule, and an inline style outranks
   any selector without it.                                      */
.woocommerce-checkout .wc-stripe-express-checkout-element,
.woocommerce-checkout #wc-stripe-express-checkout-element,
.woocommerce-checkout .wc-stripe-express-checkout-wrapper,
.woocommerce-checkout #wc-stripe-express-checkout-button-separator,
.woocommerce-checkout .wc-stripe-express-checkout--separator { display: none !important; }

/* --- Coupon field on the bag ---------------------------------
   Markup in woocommerce/cart/cart.php. Sits between the free
   shipping line and the checkout CTA, deliberately quieter than
   both: this is for the few who have a code, not a prompt to go
   looking for one.                                             */
.nd-summary__coupon { margin: 26px 0 22px; }
.nd-summary__coupon-label {
  display: block; margin-bottom: 12px;
  font-family: var(--nd-font-body);
  font-size: var(--nd-eyebrow-size-sm); letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--nd-gold);
}
/* stretch, so the button always matches the field's height rather
   than being told a number of its own. The field takes its 54px from
   the .woocommerce form input rule further up, which outranks
   anything set here by class alone — hard-coding 46px on both is
   what left the button short of the box beside it. */
.nd-summary__coupon-row { display: flex; gap: 10px; align-items: stretch; }
.nd-summary__coupon-field {
  flex: 1 1 auto; min-width: 0; padding: 0 14px;
  background: transparent;
  border: var(--nd-border-width) solid rgba(244,236,223,0.3);
  border-radius: var(--nd-radius);
  font-family: var(--nd-font-body); font-size: 13px; font-weight: 300;
  letter-spacing: 0.04em; color: var(--nd-ivory);
  outline: none;
}
.nd-summary__coupon-field::placeholder { color: rgba(244,236,223,0.32); }
.nd-summary__coupon-field:focus { border-color: var(--nd-gold); }
/* Same fill as the checkout CTA below it, so the two read as one
   family rather than a ghost button next to a solid one. inline-flex
   centres the label vertically — as a plain block button the
   uppercase text sat high, because line-height alone cannot centre
   text in a box taller than its own line. No height: the row
   stretches it to whatever the field is.                          */
.nd-summary__coupon-apply {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; padding: 0 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--nd-sand);
  border: var(--nd-border-width) solid var(--nd-border-button);
  border-radius: var(--nd-radius);
  font-family: var(--nd-font-body); font-size: 10px; line-height: 1;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--nd-indigo); cursor: pointer;
  transition: background var(--nd-duration-hover) var(--nd-ease-hover);
}
.nd-summary__coupon-apply:hover { background-color: var(--nd-gold); color: var(--nd-indigo); }

/* --- Sign out on a phone -------------------------------------
   The design hides .nd-actabs__signout below 700px, where the tab
   row starts scrolling sideways and there is no room for it on the
   right. That leaves a phone with no way to sign out at all — the
   drawer carries Account, but nothing carries this. Rather than
   force it back into a row with no space, the whole row scrolls as
   one and Sign out travels along at the end of it.              */
@media (max-width: 700px) {
  .nd-actabs__signout { display: block; }
  .nd-actabs__inner {
    overflow-x: auto; gap: 26px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nd-actabs__inner::-webkit-scrollbar { display: none; }
  .nd-actabs__nav { overflow: visible; }
  .nd-actabs__link,
  .nd-actabs__signout { flex: 0 0 auto; }
}

/* --- Sign out on the same line as the tabs --------------------
   .nd-actabs__inner centres its two children, and the nav is the
   taller of the two: .nd-actabs__link--current carries a 1px
   underline and 4px of padding beneath it, so the nav box runs
   about 5px deeper than the sign-out link. The nav's text sits at
   the TOP of that taller box, while the sign-out link, having
   neither, is centred against it and lands 2.4px low. Reserving
   the same padding and the same border - the border transparent -
   puts both text tops back on one line, at every width.        */
.nd-actabs__signout {
  padding-bottom: 4px;
  border-bottom: var(--nd-border-width) solid transparent;
}

/* --- The login screen ----------------------------------------
   Signed out, WooCommerce prints the login form straight into
   .woocommerce with no .woocommerce-MyAccount-content around it —
   that wrapper only exists once you are signed in. So none of the
   account measure or padding above reached it: the fields ran the
   full width of the window and the form began underneath the fixed
   header.                                                        */
.woocommerce-account .woocommerce:has(.woocommerce-form-login),
.woocommerce-account .woocommerce:has(.woocommerce-form-register) {
  max-width: var(--nd-page-max-footer);
  margin: 0 auto;
  padding: calc(var(--nd-header-offset) + 60px) var(--nd-gutter) 140px;
}

/* Sign in and Create account side by side, divided by the footer's
   own hairline, stacking below 900px. WooCommerce's .u-columns is a
   float grid by default; this is the same two columns as a grid.  */
.woocommerce-account .u-columns.col2-set {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--nd-column-gap);
  max-width: 940px; margin: 0 auto;
}
.woocommerce-account .u-columns .u-column2 {
  border-left: var(--nd-border-width) solid var(--nd-rule-gold);
  padding-left: var(--nd-column-gap);
}
.woocommerce-account .u-columns h2 {
  font-family: var(--nd-font-display); font-weight: 400;
  font-size: 26px; letter-spacing: 0.02em;
  color: var(--nd-ivory); margin: 0 0 26px;
}
.woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-form-register .woocommerce-form-register__submit { width: 100%; }
.woocommerce-form-login .woocommerce-form-login__rememberme { margin: 6px 0 22px; }
.woocommerce-form-login .lost_password { margin-top: 18px; font-size: 13px; }
.woocommerce-account .u-columns .woocommerce-privacy-policy-text p {
  font-size: 12.5px; line-height: 1.8; color: var(--nd-ivory-55);
}
@media (max-width: 900px) {
  .woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr; gap: 48px; }
  .woocommerce-account .u-columns .u-column2 {
    border-left: 0; padding-left: 0;
    border-top: var(--nd-border-width) solid var(--nd-rule-gold); padding-top: 48px;
  }
}

/* A figure the author kept inline (see nd_prose_split): it sits in
   the reading column at the text's own measure instead of taking the
   full-bleed band. Diagrams read better at the size of the paragraph
   that explains them.                                              */
.nd-prose figure.nd-figure--inline { margin: 40px auto; max-width: 100%; }
.nd-prose figure.nd-figure--inline img { width: 100%; height: auto; }

/* --- reCAPTCHA -----------------------------------------------
   The v3 badge is a fixed white-and-blue chip in the bottom-right
   corner of the bag and every account screen, and it sits over the
   design rather than in it. Google permits hiding it on condition
   the attribution it carries appears in the flow instead — that is
   .nd-recaptcha-note, printed from functions.php. Hiding the badge
   without that line breaks Google's terms, so the two travel
   together. visibility rather than display, which is what Google's
   own guidance uses: the widget still runs, it just is not drawn. */
.grecaptcha-badge { visibility: hidden; }

.nd-recaptcha-note {
  max-width: var(--nd-page-max-footer);
  margin: 0 auto;
  padding: 0 var(--nd-gutter) 40px;
  font-family: var(--nd-font-body);
  font-size: var(--nd-legal-size); font-weight: 300;
  line-height: var(--nd-legal-line);
  color: var(--nd-ivory-45);
  text-align: center;
}
.nd-recaptcha-note a { color: var(--nd-sand-80); text-decoration: underline; text-underline-offset: 3px; }
.nd-recaptcha-note a:hover { color: var(--nd-gold); }

/* --- Elementor pages -----------------------------------------
   A page built in Elementor is treated as a layout page by
   singular.php, so its sections print straight into #nd-main. The
   site header is fixed, so without this the first section would
   start underneath it — the same thing that once put the checkout
   form behind the nav. Remove the margin on a page whose first
   section is meant to run under the header.                     */
#nd-main > .elementor { margin-top: var(--nd-header-offset); }

/* --- Pagination ---------------------------------------------- */
.nd-pagination,
.woocommerce-pagination {
  max-width: var(--nd-page-max); margin: 0 auto;
  padding: 0 var(--nd-gutter) 140px;
  display: flex; justify-content: center; gap: 26px;
}
.nd-pagination .page-numbers,
.woocommerce-pagination .page-numbers {
  list-style: none; display: flex; gap: 26px; padding: 0; margin: 0;
  font-family: var(--nd-font-body); font-size: 12px; font-weight: 300;
  letter-spacing: 0.18em; color: var(--nd-ivory-45);
}
.nd-pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:hover { color: var(--nd-gold); }
.nd-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current { color: var(--nd-sand); }

/* --- Editor output inside the legal column -------------------
   The design's .nd-legal styles h2 / p / a / table. These are
   the block-editor extras it never had to account for.          */
.nd-legal ul,
.nd-legal ol { margin: 0 0 22px; padding-left: 22px; }
.nd-legal li { margin: 0 0 10px; }
.nd-legal img { max-width: 100%; height: auto; }
.nd-legal blockquote {
  margin: 30px 0; padding-left: 24px;
  border-left: 1px solid rgba(176,138,78,0.6);
  color: var(--nd-ivory-72);
}
.nd-prose ul,
.nd-prose ol { margin: 0 0 26px; padding-left: 24px; }
.nd-prose li { margin: 0 0 12px; }
.nd-prose img,
.nd-prose figure img { max-width: 100%; height: auto; }
.nd-prose figure { margin: 40px 0; }
.nd-prose figcaption {
  margin-top: 14px; font-size: 12px; font-weight: 300;
  letter-spacing: 0.06em; color: var(--nd-ivory-55);
}

/* --- Search results ------------------------------------------ */
.nd-searchbar {
  max-width: 760px; margin: 0 auto; padding: 0 var(--nd-gutter) 20px;
  display: flex; gap: 16px;
}
.nd-searchbar input[type="search"] {
  flex: 1; height: 54px; padding: 0 20px;
  background: transparent; border: var(--nd-border-width) solid rgba(244,236,223,0.3);
  border-radius: var(--nd-radius);
  font-family: var(--nd-font-body); font-size: 14px; font-weight: 300;
  letter-spacing: 0.04em; color: var(--nd-ivory); outline: none;
}
.nd-searchbar input[type="search"]:focus { border-color: var(--nd-gold); }

@media (max-width: 700px) {
  /* Every other heading on a phone-width page in this design is
     centred — the bag's title, the journal head, the statement
     band. "Your order" was the one left ranging left.            */
  .woocommerce-checkout #order_review_heading { text-align: center; }

  .woocommerce-account .woocommerce-MyAccount-content,
  .woocommerce-checkout .woocommerce,
  .woocommerce-order-received .woocommerce,
  .woocommerce-edit-address .woocommerce,
  .woocommerce-view-order .woocommerce,
  .woocommerce-lost-password .woocommerce { padding: 50px var(--nd-gutter) 96px; }
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td { padding: 14px 8px; }
}

/* --- Aspect-ratio media boxes missing overflow:hidden -----------
   Across the design, every box that pairs `aspect-ratio` with a
   cover-fit photo also sets `overflow:hidden` (and `min-width:0`
   inside a flex/grid item): .nd-figure__media, .nd-line__media,
   .nd-article-card__media, .nd-readnext-card__media and .nd-shot
   all do. Three siblings of theirs don't: .nd-product__media,
   .nd-split__media and .nd-journal-card__media. Without it, a flex
   item's automatic minimum size lets a photo's own intrinsic ratio
   grow the box past the aspect-ratio it was given whenever that
   photo is taller than the box wants — visible as journal cards (or
   product tiles) rendering at different heights depending on which
   photo happens to be under each one. Bringing these three in line
   with every other instance of the same pattern in the design.     */
.nd-product__media,
.nd-split__media,
.nd-journal-card__media { overflow: hidden; min-width: 0; }

/* --- Mobile header: drop search, true-center the wordmark --------
   The design's ≤900px header balances the wordmark between two
   flex:1 sides purely by even space distribution, so it only reads
   as centred when both sides carry the same amount of content. With
   three utility icons (search + account + cart) against one menu
   button, the heavier side pulls the available space and the
   wordmark sits visibly off-centre. Dropping search (the catalogue
   is a handful of products; it doesn't need its own icon) helps but
   doesn't guarantee centring at every width, so the wordmark is
   pinned to the true centre of the bar directly, which holds
   regardless of how the two sides' content compares.               */
@media (max-width: 900px) {
  .nd-utility__link[aria-label="Search"] { display: none; }
  .nd-header__inner { position: relative; }
  .nd-wordmark {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
  .nd-menu-toggle { margin-left: -14px; }
}

/* --- Mobile drawer: search link removed from the header icons, so
   it's dropped here too rather than left as the only way to reach
   it on a phone -- there was never a search entry in the drawer's
   three links, so nothing else here changes.                       */

/* --- Mobile hero: keep the centred treatment ----------------------
   The design centres the hero eyebrow/title/button on every size
   down to 700px, where one rule switches it to left-aligned, edge-
   to-edge. Centred reads calmer at phone width for this site and
   matches every other centred moment in the design (statement band,
   collection note, journal head on desktop) -- so the ≤700px switch
   is undone rather than carried through to 520/390.                */
@media (max-width: 700px) {
  .nd-hero__content { align-items: center; text-align: center; }
}