/* ═══════════════════════════════════════════════════════════════════════════
   Nouram — the house style
   ═══════════════════════════════════════════════════════════════════════════

   Loaded after components.css and before pages.css. Everything here is shared
   by more than one page: the reveal, the section frame, the eyebrow-title-lead
   triplet every section opens with, the buttons, the rules.

   Why it exists. Each page had grown its own version of the same three
   elements — `home-block__intro`, `cx-form__head`, `pp-hero`, `about-intro`
   — with slightly different sizes, colours and spacing. Nothing was wrong with
   any one of them; together they meant the site had no voice. A house style is
   what makes six pages read as one shop.

   The prefix is `lx-`. Existing page classes are untouched except where a
   token change lifts them for free.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ Reveal ═══════════════════════════════════════════════════════════════
   The motion contract for the entire site. See utils/reveal.js for when it
   fires; this is only what it looks like.

   Opacity and transform, nothing else — both are handed to the compositor, so
   a phone scrolling past twenty of these pays for none of them. No blur, no
   filter, no box-shadow: those re-rasterise on the main thread every frame and
   are the reason ambient decoration used to make this site feel heavy.

   The rise is 18px. Enough to be read as arrival; small enough that a shopper
   scrolling fast never sees content chasing her down the page. */
[data-reveal] {
  transition:
    opacity 720ms var(--ease-out),
    transform 720ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* Only becomes invisible once the observer is confirmed alive — the class goes
   on the page root from JS. A page with broken JS stays a readable shop. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}

.reveal-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ═══ Frame ════════════════════════════════════════════════════════════════ */

/* The measure everything is held to. `--gutter` is fluid, so the margin on a
   360px phone is a real margin and not the same 16px a 1440px screen gets. */
.lx-wrap {
  width: min(100% - (var(--gutter) * 2), var(--container-max));
  margin-inline: auto;
}

/* Running prose. A line of Arabic past ~70 characters is a line the eye loses
   its place in, and this page has several thousand words of policy on it. */
.lx-narrow {
  width: min(100% - (var(--gutter) * 2), var(--container-narrow));
  margin-inline: auto;
}

.lx-section {
  padding-block: var(--section-y);
}

.lx-section--tight {
  padding-block: var(--section-y-tight);
}

/* A page built of `.lx-section`s needs no gap of its own; the sections carry
   their own air. This is the replacement for `.page-stack`'s fixed gap. */
.lx-page {
  display: flow-root;
}

/* ═══ The section opening ══════════════════════════════════════════════════
   Eyebrow, title, lead — in that order, on every page. Consistency in how a
   section introduces itself is most of what makes a site feel designed rather
   than assembled. */

.lx-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: clamp(2rem, 6.5vw, 3.5rem);
}

.lx-head--center {
  align-items: center;
  text-align: center;
}

/* ── Eyebrow ───────────────────────────────────────────────────────────────
   Small, gold, widely tracked, with a hairline trailing off it. The tracking
   is the whole effect: at 0.26em the three or four words stop being a label
   and start being an inscription.

   The rule is an ::after so that in this RTL page it lands to the *left* of
   the words — trailing them the way a reader leaves them, not blocking the
   way in. */
.lx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-gold);
}

.lx-eyebrow::after {
  content: "";
  width: clamp(1.5rem, 6vw, 2.75rem);
  height: 1px;
  flex: none;
  background: linear-gradient(to left, var(--color-gold), transparent);
}

.lx-head--center .lx-eyebrow::before {
  content: "";
  width: clamp(1.5rem, 6vw, 2.75rem);
  height: 1px;
  flex: none;
  background: linear-gradient(to right, var(--color-gold), transparent);
}

/* ── Titles ──────────────────────────────────────────────────────────────── */
.lx-title {
  margin: 0;
  font-family: var(--font-heading);
  word-spacing: 0.08em;
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: var(--track-display);
  color: var(--color-ink);
  text-wrap: balance;
}

/* Arabic sets taller than Latin: the ascenders reach further and the diacritics
   sit above them again, so a display line-height that would be generous for a
   Latin headline clips here. 1.22 is the floor at which two stacked lines of
   Reem Kufi stop touching. */
.lx-display {
  margin: 0;
  font-family: var(--font-heading);
  word-spacing: 0.08em;
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: var(--track-display);
  color: var(--color-ink);
  text-wrap: balance;
}

.lx-h3 {
  margin: 0;
  font-family: var(--font-heading);
  word-spacing: 0.06em;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-ink);
}

.lx-lead {
  margin: 0;
  max-width: 56ch;
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.85;
  color: var(--color-warm-gray);
}

.lx-body {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.95;
  color: rgba(236, 233, 226, 0.72);
}

/* ═══ Rules and ornament ═══════════════════════════════════════════════════ */

/* A gold hairline that draws itself out from the reading edge as its section
   arrives. Transform only, so it costs a scroll nothing. */
/* Rests drawn. A page whose JS never ran, or a browser with reduced motion,
   shows the finished line rather than an empty gap — the collapsed state is
   only ever entered by the reveal system, below. */
.lx-rule {
  display: block;
  width: min(220px, 42vw);
  height: 1px;
  background: linear-gradient(to left, var(--color-gold), transparent);
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 1000ms var(--ease-out) 160ms;
}

.reveal-ready [data-reveal]:not(.is-in) .lx-rule {
  transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
  .lx-rule {
    transition: none;
  }
}

/* A full-width seam between two sections. Brightest in the middle, gone at
   both edges, so it never collides with the page's own margin. */
.lx-seam {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--gold-edge), transparent);
}

/* Centred diamond — the one piece of pure ornament on the site, used to close
   an editorial passage. */
.lx-diamond {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  color: var(--color-gold);
}

.lx-diamond::before,
.lx-diamond::after {
  content: "";
  height: 1px;
  width: clamp(2.5rem, 14vw, 6rem);
  background: linear-gradient(90deg, transparent, var(--gold-edge));
}

.lx-diamond::after {
  background: linear-gradient(90deg, var(--gold-edge), transparent);
}

.lx-diamond__mark {
  width: 6px;
  height: 6px;
  flex: none;
  transform: rotate(45deg);
  background: var(--color-gold);
}

/* ═══ Surfaces ═════════════════════════════════════════════════════════════
   On a black page a card cannot be lifted with shadow — black on black is
   nothing. Depth comes from the hairline first, a barely-there surface tint
   second, and the shadow only to anchor it. */
.lx-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  transition:
    border-color var(--transition-medium),
    transform var(--transition-medium);
}

@media (hover: hover) {
  .lx-card:hover {
    border-color: var(--gold-edge);
    transform: translateY(-3px);
  }
}

/* ═══ Media ════════════════════════════════════════════════════════════════ */

/* Photographs are the most expensive thing on the page and the only thing the
   shopper came for. The frame crops; the image never distorts. */
.lx-figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--color-bg-elevated);
  isolation: isolate;
}

.lx-figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1200ms var(--ease-out);
}

@media (hover: hover) {
  a:hover > .lx-figure > img,
  .lx-figure:hover > img {
    transform: scale(1.045);
  }
}

/* A wash that keeps white type legible over any photograph, however bright.
   Two stops, weighted to the bottom where the caption sits. */
.lx-figure__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(6, 6, 7, 0.88) 0%,
    rgba(6, 6, 7, 0.45) 38%,
    rgba(6, 6, 7, 0.08) 72%,
    transparent 100%
  );
}

/* ═══ Buttons ══════════════════════════════════════════════════════════════
   Refinements on top of components.css. The base there is sound; what it
   lacked was confidence — a 50px pill with a bright white sweep reads as an
   app control, not as the way into a shop. */

.btn {
  min-height: 54px;
  padding: 0 2.25rem;
  font-weight: 600;
  letter-spacing: 0.015em;
}

/* The hover sweep was rgba(255,255,255,0.28): a white flash across gold, which
   is the exact gesture a discount banner makes. Halved and slowed, it reads as
   light moving over metal instead. */
.btn::after {
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.14) 50%,
    transparent 62%
  );
  transition: transform 620ms var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
}

/* Struck metal rather than a flat fill: dark at both edges, bright through the
   middle. It is the difference between "gold-coloured" and "gold". */
.btn--gold {
  background: linear-gradient(140deg, #a8823f 0%, #d9bd83 44%, #efe0bb 54%, #bf9a52 100%);
  color: #17130c;
  box-shadow: 0 8px 26px rgba(201, 169, 97, 0.22);
}

.btn--gold:hover {
  background: linear-gradient(140deg, #bd9550 0%, #e6cf9c 44%, #f7ecd0 54%, #cfab63 100%);
  box-shadow: var(--shadow-gold);
}

/* The quiet button. Most pages need a second action that must not compete with
   the first, and an outline in gold hairline is how a luxury house writes one. */
.btn--line {
  background: transparent;
  border-color: var(--gold-edge);
  color: var(--color-gold-soft);
  box-shadow: none;
}

.btn--line:hover {
  border-color: var(--color-gold);
  background: var(--gold-wash);
  color: var(--color-ink);
}

/* ═══ Text link ════════════════════════════════════════════════════════════
   An underline that draws from the reading edge on hover. The ::before is a
   transparent pad that brings the tap target to 44px without moving the
   underline away from the text — the reason this is not simply padding. */
.lx-link {
  position: relative;
  display: inline-block;
  padding-block: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-gold-soft);
  transition: color var(--transition-fast);
}

.lx-link::before {
  content: "";
  position: absolute;
  inset: -0.55rem -0.5rem;
}

.lx-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.1rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.36);
  transform-origin: right center;
  transition: transform 480ms var(--ease-out);
}

.lx-link:hover {
  color: var(--color-ink);
}

.lx-link:hover::after {
  transform: scaleX(1);
}

/* ═══ Chips and labels ═════════════════════════════════════════════════════ */

.lx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--gold-hairline);
  border-radius: 999px;
  background: var(--gold-wash);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-gold-soft);
}

/* A number set as an ornament — the "01 / 02 / 03" that runs down editorial
   step lists. Outlined, not filled: it must sit behind the words it counts. */
.lx-numeral {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  font-weight: 500;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-edge);
  letter-spacing: 0.02em;
}

/* ═══ Legacy lifts ═════════════════════════════════════════════════════════
   Classes the older pages already use, brought onto the new scale so About,
   FAQ, Terms and the rest inherit the redesign without being rewritten line
   by line. */

.kicker {
  display: inline-block;
  color: var(--color-gold);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

.section-title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: var(--track-display);
  color: var(--color-ink);
}

.muted {
  color: var(--color-warm-gray);
}

/* ═══ Utility ══════════════════════════════════════════════════════════════ */

/* Isolates a Latin run inside an Arabic sentence so the bidi algorithm stops
   moving its punctuation around. Used for prices, sizes, phone numbers. */
.lx-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

.lx-hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lx-hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* A horizontal rail on a phone, a grid on a desktop. Used by the collection
   rows. `scroll-snap` keeps a card from being left half off the screen, which
   on a touch device is the difference between a rail and a mess. */
.lx-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 74vw);
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  /* Cancels the wrapper's own margin so the rail bleeds to both screen edges,
     which is what tells a thumb there is more to the right. */
  margin-inline: calc(var(--gutter) * -1);
  padding-block: 0.35rem;
  scrollbar-width: none;
}

.lx-rail::-webkit-scrollbar {
  display: none;
}

.lx-rail > * {
  scroll-snap-align: start;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Header
   ═══════════════════════════════════════════════════════════════════════════
   One row. The wordmark in the middle, the way in on the reading edge, the
   three things a shopper reaches for on the other side.

   The numbers that matter, at 375px:
     announcement strip   37px  (collapses on scroll)
     row                  60px
                        = 97px of permanent chrome, against 224px before.
   ═══════════════════════════════════════════════════════════════════════════ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 11, 0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  box-shadow: none;
}

/* Once the page has moved at all, the bar commits to being a bar: solid, with
   an edge under it. Colour only — no size change, so nothing reflows. */
.site-header.is-scrolled {
  background: rgba(9, 9, 10, 0.97);
  border-bottom-color: var(--gold-hairline);
}

/* Out of the way while she reads, back the instant she scrolls up.
 *
 * This replaced a version that animated the announcement strip's `max-height`
 * to zero. That shortened the header, which is in the document flow, which
 * shortened the page — so every line below it slid up 37px while a finger was
 * mid-scroll, and slid back down on the way up. Scrolling stopped tracking the
 * touch, which is exactly what "not scrolling clearly" is.
 *
 * A transform cannot do that. The header keeps its full 98px of flow space
 * whether it is on screen or not, so nothing under it ever moves, and the
 * slide is composited without the main thread being involved. It also returns
 * the whole bar rather than just the strip.
 *
 * `will-change` is deliberately absent: this element already has a
 * `backdrop-filter` on desktop and promoting it permanently costs more than
 * the one transition it would smooth. */
.site-header {
  transform: translateY(0);
  transition:
    transform 420ms var(--ease-out),
    border-color 320ms var(--ease-out),
    background 320ms var(--ease-out);
}

/* Up by the announcement strip and the wordmark row only — `--tuck` is
   measured in initHeaderTuck. The navigation band is what is left against the
   top of the screen. The `-100%` fallback covers the one frame before the
   custom property is set. */
.site-header.is-tucked {
  transform: translateY(calc(var(--tuck, 100%) * -1));
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

/* ── The row ─────────────────────────────────────────────────────────────── */
.site-header__row {
  display: grid;
  /* The wordmark is centred against the *row*, not against whatever space the
     actions leave over.
     A three-column grid cannot do this once one side is occupied and the other
     is empty: `1fr` floors at its content size, so the actions column grew past
     its share and pushed the middle column 4px off centre. Taking the mark out
     of flow and centring it on the row is exact whatever sits beside it, and it
     is what this header did before the hamburger existed. */
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  min-height: 60px;
}

.site-header .brand-mark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  gap: 0;
}

.brand-mark__logo {
  width: auto;
  height: 38px;
  /* The original export is a square canvas with the mark floating in the
     middle of it; logo-mark.webp is that canvas trimmed to the ink, so the
     height above is the height of the wordmark rather than of its padding. */
  filter: none;
}

.brand-mark__logo--lg {
  height: 58px;
}

.site-header .header-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* ── Icon buttons ────────────────────────────────────────────────────────
   These were 32px. Every published touch-target guideline puts the floor at
   44px, and on the cart button in particular a miss costs a sale. */
.chip-icon {
  min-width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-gold-soft);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.chip-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chip-icon:hover {
  color: var(--color-ink);
  background: var(--gold-wash);
  border-color: transparent;
}

.chip-icon:active {
  background: rgba(201, 169, 97, 0.14);
}

.cart-btn {
  position: relative;
}

/* An empty cart has no badge.
 *
 * components.css declares `display: inline-flex` on this element, and any
 * `display` in a stylesheet outranks the user agent's `[hidden] {display:none}`
 * — so the gold pill was painted over the bag on every page whether or not
 * anything was in the cart, and `el.hidden = count === 0` in cartDrawer.js did
 * nothing at all. */
.header-cart-badge[hidden] {
  display: none;
}

/* The badge has to read at a glance and never cover the bag it counts. */
.header-cart-badge {
  position: absolute;
  top: 4px;
  /* Both physical sides, explicitly. components.css pins this to `right`, and
     adding an `inset-inline-start` on top of that left the element with a left
     *and* a right offset — which is not a position, it is a width, and the
     badge stretched to 42px across the bag it was meant to sit beside. */
  right: 2px;
  left: auto;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border-radius: 999px;
  background: var(--color-gold);
  color: #17130c;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  direction: ltr;
}

/* ── Desktop nav ─────────────────────────────────────────────────────────
   Words, not pills. A row of bordered capsules is a toolbar; a row of words
   with a gold rule under the live one is a masthead. */
.nav-menu {
  display: none;
}

.nav-menu__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(236, 233, 226, 0.74);
  cursor: pointer;
  transition: color var(--transition-medium);
}

.nav-menu__link::after {
  content: "";
  position: absolute;
  right: 0.9rem;
  left: 0.9rem;
  bottom: 0.35rem;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 420ms var(--ease-out);
}

.nav-menu__link:hover,
.nav-menu__link:focus-visible,
.nav-menu__link[aria-current="page"] {
  color: var(--color-ink);
  background: none;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.nav-menu__link:hover::after,
.nav-menu__link:focus-visible::after,
.nav-menu__link[aria-current="page"]::after {
  transform: scaleX(1);
}

@media (min-width: 900px) {
  .site-header__row {
    display: flex;
    justify-content: space-between;
    min-height: 76px;
  }

  /* Back in the flow on a desktop, where the mark leads the masthead and the
     nav and actions follow it. */
  .site-header .brand-mark {
    position: static;
    left: auto;
    transform: none;
  }

  .site-header .nav-menu {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .brand-mark__logo {
    height: 50px;
  }
}

/* ── Mega panel ──────────────────────────────────────────────────────────── */
.mega-panel {
  border-top: 1px solid var(--gold-hairline);
  background: linear-gradient(180deg, rgba(12, 12, 14, 0.99), rgba(16, 16, 19, 0.99));
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.mega-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  transition: border-color var(--transition-medium), background var(--transition-medium);
}

.mega-card:hover {
  border-color: var(--gold-edge);
  background: var(--gold-wash);
}

.mega-card__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-ink);
}

.mega-card__note {
  font-size: 0.8rem;
  color: var(--color-warm-gray);
}

/* The slide-out drawer and its `.mm-*` styles lived here.
 *
 * It is gone with the hamburger that opened it. The dock at the foot of the
 * screen now carries the four main destinations, and the footer already
 * carried every secondary route the drawer held — story, contact, questions,
 * tracking, privacy, terms — so nothing became unreachable.
 */

/* ═══ Search overlay ═══════════════════════════════════════════════════════ */

.search-overlay__panel {
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #161618, #101012);
  padding: clamp(1.5rem, 6vw, 2.5rem);
}

.search-overlay__panel h2 {
  margin: 0.75rem 0 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-ink);
}

.search-overlay__note {
  margin: 0.5rem 0 0;
  font-size: var(--fs-sm);
  color: var(--color-warm-gray);
}

.search-overlay__form {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
}

@media (max-width: 560px) {
  .search-overlay__form {
    grid-template-columns: 1fr;
  }
}

/* ═══ Footer ═══════════════════════════════════════════════════════════════ */

.site-footer {
  margin-top: 0;
  border-top: 1px solid var(--line);
  background: #060607;
}

/* ═══ The masthead strip ═══════════════════════════════════════════════════
   The four destinations, inlaid into the header as its second line.

   It is not a floating pill and not a bordered box. It is a band seated into
   the header between two hairlines, with the four names divided by fine gold
   rules — the way a plate is engraved into sections rather than the way an app
   draws a tab bar. The live one is marked by a gold rule across the top of its
   column and gold ink, which is the same "you are here" mark the desktop nav,
   the collection tabs and the shop chips all use.

   What makes it worth its height: it survives the tuck. Scrolling down hides
   the announcement strip and the wordmark row and leaves this band against the
   top of the screen, so on a phone the whole site is two taps away at every
   point of every page — 48px of permanent chrome instead of the 224px the
   original header cost.
   ═══════════════════════════════════════════════════════════════════════════ */

.masthead {
  position: relative;
  border-top: 1px solid var(--line);
  /* The seam that reads as an inlay: gold, brightest at the middle, gone at
     both ends so it never collides with the screen edge. */
  background-image: linear-gradient(90deg, transparent, var(--gold-hairline) 22%, var(--gold-hairline) 78%, transparent);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
}

.masthead__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.masthead__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  /* 52px of band; the target is the whole column, which at a quarter of a
     375px screen is 86 × 52 — past the 44px floor in both axes. */
  min-height: 52px;
  padding: 0.45rem 0.25rem;
  color: rgba(200, 192, 182, 0.74);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-medium);
}

/* The divisions. A hairline between each pair, inset from the band's edges so
   it reads as an engraved division rather than as a table cell border. */
.masthead__link + .masthead__link::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line), transparent);
}

/* The live marker: a gold rule across the top of the column. Transform only,
   so moving between destinations never re-lays out the row. */
.masthead__link::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 22%;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transition: transform 420ms var(--ease-out);
}

.masthead__link[aria-current="page"] {
  color: var(--color-gold-soft);
}

.masthead__link[aria-current="page"]::before {
  transform: scaleX(1);
}

.masthead__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  transition: transform var(--transition-fast);
}

.masthead__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  /* Fine. 1.8 at this size is an app icon; 1.3 is a drawn one. */
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.masthead__label {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

.masthead__link:active .masthead__icon {
  transform: scale(0.9);
}

/* The badge is `.header-cart-badge`, so cartDrawer.js updates this copy and
   the one on the bag from the same query — no extra wiring. */
.masthead__icon .header-cart-badge {
  top: -6px;
  inset-inline-start: -9px;
  right: auto;
  left: auto;
}

/* A desktop has the nav in the row itself, so the band would say it twice. */
@media (min-width: 900px) {
  .masthead {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .masthead__link,
  .masthead__link::before,
  .masthead__icon {
    transition: none;
  }
}