/* ═══════════════════════════════════════════════════════════════════════════
   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
   ═══════════════════════════════════════════════════════════════════════════

   Two tiers on a desktop, one on a phone.

   A house sets its name across the top and its departments beneath it,
   separated by a rule. One row trying to do both jobs — mark on the left,
   links in the middle, icons on the right — is the arrangement every web
   template ships with, and it is the single thing that made this header read
   as software rather than as a shopfront.

   ── What it costs ────────────────────────────────────────────────────────
   The bar tucks away on `transform`, which never reflows: the header keeps
   its flow space whether it is showing or not, so nothing below it moves a
   pixel and the browser composites the slide without waking the main thread.
   No blur anywhere — the scrolled state is a near-opaque colour, which on a
   6-inch screen is indistinguishable from frosted glass and free.           */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 11, 0.92);
  transition: transform 320ms var(--ease-out), background 240ms linear,
              border-color 240ms linear;
  border-bottom: 1px solid transparent;
}

/* Solid the moment the page has moved, so the wordmark never sits on a
   photograph. Colour only — no size change, so nothing reflows. */
.site-header.is-scrolled {
  background: rgba(10, 10, 11, 0.985);
  border-bottom-color: var(--line);
}

/* Slid out by its own measured height, set in `initHeaderTuck`. */
.site-header.is-tucked {
  transform: translate3d(0, calc(var(--tuck, 120px) * -1), 0);
}

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: background 240ms linear; }
  .site-header.is-tucked { transform: none; }
}

/* ── Tier one: the mark ──────────────────────────────────────────────────
   Three tracks. The wordmark is in the middle one and stays there whatever
   is beside it — `1fr auto 1fr` rather than `space-between`, which centres
   the mark only while both sides weigh the same. They do not: one menu
   button against three tools pushed it about 40px off centre, which on a
   symmetrical mark reads as cheap without being easy to name. */
.hd-crown {
  display: grid;
  /* `minmax(0, 1fr)`, not a bare `1fr`.
     A bare `1fr` is `minmax(auto, 1fr)`: a track that refuses to go below
     its own content. The menu button on one side is about 110px of icon and
     word while the cart on the other is 44px, so the wider track grew past
     its share and carried the wordmark about 30px off centre — which on a
     symmetrical mark is exactly the kind of wrongness that reads as sloppy
     without being nameable. Allowed to shrink, the two tracks stay equal
     and the middle one is the middle. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  /* 56 on a phone. See the note on the announcement band: the chrome above
     the product was costing a fifth of the screen. */
  min-height: 56px;
  padding-block: 0.4rem;
}

.hd-crown__side {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.hd-crown__side--end { justify-content: flex-end; }


/* ── The wordmark ────────────────────────────────────────────────────────
   Given room and nothing to compete with. The tap target is padded out to
   the full row height while the drawn mark keeps its own size, so the
   clickable box clears 44px without the logo growing to meet it. */
.hd-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}

.brand-mark__logo {
  display: block;
  width: auto;
  height: 30px;
  /* Declared both ways so the row cannot change height when the file lands. */
  aspect-ratio: 336 / 244;
  object-fit: contain;
}

/* ── The icons ───────────────────────────────────────────────────────────
   Drawn, not boxed. A row of bordered circles is a toolbar; a row of thin
   marks on the ground is a house. 44px of target either way. */
.hd-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-charcoal);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-fast), transform 140ms var(--ease-soft);
}

.hd-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  /* 1.3, not 2. The weight of the line is most of what separates a drawn
     mark from an interface glyph. */
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hd-icon:active { transform: scale(0.94); }

.hd-icon:focus-visible {
  outline: 1px solid var(--gold-halo);
  outline-offset: 2px;
}

/* Search and the wishlist live in the menu on a phone. The row keeps the
   wordmark and the one control that closes a sale, which is why the drawer
   carries them as words instead.

   After `.hd-icon`, not before it: same specificity, so whichever is written
   last wins, and written first this rule was silently overruled by the base
   `display: inline-grid` two rules below it. */
.hd-icon--desk { display: none; }

/* ── The way in ──────────────────────────────────────────────────────────
   Two rules and a word. Three rules is the software hamburger; two with the
   lower one short reads as a mark, and the word beside it removes the guess
   entirely — which matters more on a phone than the four pixels it costs. */
.hd-menu {
  gap: 0.5rem;
  padding-inline: 0.35rem 0.6rem;
  grid-auto-flow: column;
}

.hd-menu__word {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--color-charcoal);
}

/* ── The cart count ─────────────────────────────────────────────────────
   Gold on the bag, small enough to be a mark rather than a notification. */
.header-cart-badge[hidden] { display: none; }

.header-cart-badge {
  position: absolute;
  inset-inline-end: 2px;
  top: 4px;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding-inline: 3px;
  border-radius: 999px;
  background: var(--color-gold-soft);
  color: #17140d;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ── Tier two: the navigation ───────────────────────────────────────────
   Desktop only. Words on a rule, with the underline drawn on a pseudo-
   element and scaled in — a transform, so moving between routes never
   re-lays the row out. */
.hd-nav { display: none; }

.hd-nav__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3.4vw, 3.25rem);
  min-height: 46px;
}

.hd-nav__link {
  position: relative;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--color-warm-gray);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.hd-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0.15rem;
  height: 1px;
  background: var(--color-gold-soft);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 280ms var(--ease-out);
}

.hd-nav__link[aria-current="page"] { color: var(--color-ink); }
.hd-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.hd-nav__trigger[aria-expanded="true"] { color: var(--color-ink); }
.hd-nav__trigger[aria-expanded="true"]::after { transform: scaleX(1); }

.hd-nav__link:focus-visible {
  outline: 1px solid var(--gold-halo);
  outline-offset: 3px;
}

/* ── The collections panel ─────────────────────────────────────────────── */
/* It hangs below the header rather than growing it.

   It used to open by animating `max-height` from zero, and because the panel
   is the header's last child, growing it grew the header — which is in the
   document flow, so the entire page slid down 300px while the panel opened
   and slid back when it closed. That is the one kind of layout shift a
   shopper always notices, because it happens under a cursor that is already
   moving toward something.

   Positioned against the header (sticky counts as positioned), it is out of
   flow entirely: nothing below it moves, and the reveal is a transform and
   an opacity rather than a reflow per frame. */
.mega-panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #0c0c0e;
  max-height: 70svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  pointer-events: none;
  transition: opacity 220ms linear, transform 300ms var(--ease-out);
}

.mega-panel.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.mega-panel__content { padding-block: clamp(1.75rem, 4vw, 2.75rem); }

.mega-panel__head { margin-bottom: 1.5rem; }

.mega-panel__title {
  margin: 0.6rem 0 0;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 400;
  color: var(--color-ink);
}

.mega-panel__label { color: var(--color-gold-soft); }

.mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.mega-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.15rem 1rem;
  background: #0c0c0e;
  text-decoration: none;
  transition: background var(--transition-fast);
}

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

.mega-card__note {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-warm-gray);
}

.mega-panel__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  margin-top: 1.5rem;
}

.mega-panel__inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-top: 0.6rem;
}

.mega-inline-link {
  font-size: 0.82rem;
  color: var(--color-charcoal);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

.nav-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  color: var(--color-warm-gray);
  margin: 0;
}

/* ═══ THE MENU ══════════════════════════════════════════════════════════
   A full-screen sheet, not a side drawer.

   A panel covering 84% of the width over a dimmed page is a pattern from
   applications with a lot of navigation and nowhere to put it. This shop has
   four destinations and a handful of collections; given the whole screen
   they can be set as words large enough to read as a statement, which is
   what a house does with its own menu.                                     */

.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
}

.nav-sheet.is-open { display: block; }

.ns {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  /* Settled state is VISIBLE. The entrance is played over the top, so a
     browser that drops the animation shows a menu rather than nothing. */
  transform: translate3d(0, -12px, 0);
  opacity: 0;
  transition: transform 340ms var(--ease-out), opacity 240ms linear;
}

.nav-sheet.is-open .ns {
  transform: none;
  opacity: 1;
}

.ns__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  min-height: 64px;
  padding: 0.55rem var(--gutter);
  padding-top: calc(0.55rem + env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
}

.ns__house {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  color: var(--color-gold-soft);
}

/* The one scrolling region. `contain` stops the scroll handing off to the
   page underneath at the end of the list — which is how a drawer ends up
   closing over a page that has silently moved. */
.ns__scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem var(--gutter) 1.5rem;
}

/* ── The four ────────────────────────────────────────────────────────── */
.ns__primary {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Staggered in, 40ms apart. Short enough that the fourth word is not still
   on its way when the thumb has already moved. */
.ns__scroll > * ,
.ns__primary li {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

.nav-sheet.is-open .ns__scroll > *,
.nav-sheet.is-open .ns__primary li {
  animation: ns-rise 420ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

@keyframes ns-rise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

.ns__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.ns__word {
  position: relative;
  font-family: var(--font-heading);
  font-size: clamp(1.55rem, 7vw, 2.1rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-ink);
}

/* The rule under the current word. Transform only, so moving between routes
   never re-lays the sheet out. */
.ns__word::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -0.15rem;
  height: 1px;
  background: var(--color-gold-soft);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 300ms var(--ease-out);
}

.ns__link[aria-current="page"] .ns__word::after { transform: scaleX(1); }

/* The numeral is a plate number, not a second piece of information. */
.ns__idx {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(var(--gold-rgb), 0.5);
  font-variant-numeric: tabular-nums;
}

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

/* ── The collections ────────────────────────────────────────────────── */
.ns__block { margin-top: 1.75rem; }

.ns__label {
  margin: 0 0 0.85rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--color-gold-soft);
}

.ns__cats {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.ns__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: 0.65rem 0.15rem;
  background: var(--color-bg);
  text-decoration: none;
}

.ns__cat-name {
  font-size: 0.95rem;
  color: var(--color-charcoal);
}

.ns__cat-count {
  font-size: 0.72rem;
  color: var(--color-warm-gray);
  font-variant-numeric: tabular-nums;
}

.ns__cat--all .ns__cat-name { color: var(--color-gold-soft); }

/* ── The rest ───────────────────────────────────────────────────────── */
.ns__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* "بحث" is three letters wide. At 44px tall and 27 wide it cleared the
   height floor and missed the width one, which in a row of wrapped links is
   where a thumb lands on the wrong word. The padding widens the target
   without moving the type. */
.ns__quiet {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--color-charcoal);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
}

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

.ns__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* 44px of target, even for the quietest link in the sheet. These two were
   22px tall — the smallest tap on the site, in a full-screen menu where
   there is more room than anywhere else. */
.ns__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.75rem;
  color: var(--color-warm-gray);
  text-decoration: none;
}

/* ── The way out that also sells ─────────────────────────────────────────
   Pinned to the foot, where a thumb already is. A menu whose only exit is a
   cross in the far corner asks for the hand to be rearranged. */
.ns__cta {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 58px;
  padding-bottom: env(safe-area-inset-bottom);
  background: linear-gradient(180deg, #f0e2c4 0%, var(--color-gold-soft) 46%, #d3b98c 100%);
  color: #17140d;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 140ms var(--ease-soft);
}

.ns__cta svg { width: 16px; height: 16px; }
.ns__cta:active { transform: scale(0.99); }

/* ═══ MORE ROOM ═════════════════════════════════════════════════════════ */

/* ── Tablet: the wordmark grows, the tools separate ──────────────────── */
@media (min-width: 700px) {
  .hd-crown { min-height: 76px; }
  .brand-mark__logo { height: 36px; }
  .hd-crown__side { gap: 0.4rem; }
  .ns__word { font-size: 2.2rem; }
  .ns__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Desktop: the second tier arrives and the menu button retires ─────── */
@media (min-width: 1000px) {
  .hd-crown { min-height: 88px; }
  .brand-mark__logo { height: 44px; }

  .hd-menu { display: none; }
  .hd-icon--desk { display: inline-grid; }
  .hd-nav { display: block; border-top: 1px solid var(--line); }
}

/* ── Large: more air, a larger mark ──────────────────────────────────── */
@media (min-width: 1440px) {
  .hd-crown { min-height: 100px; }
  .brand-mark__logo { height: 50px; }
  .hd-nav__link { font-size: 0.8rem; letter-spacing: 0.24em; }
}

@media (hover: hover) {
  .hd-icon:hover { color: var(--color-gold-soft); }
  .hd-mark:hover { opacity: 0.88; }
  .hd-nav__link:hover { color: var(--color-ink); }
  .hd-nav__link:hover::after { transform: scaleX(1); }
  .mega-card:hover { background: #131315; }
  .mega-inline-link:hover { color: var(--color-gold-soft); }
  .ns__quiet:hover { color: var(--color-gold-soft); }
  .ns__cat:hover .ns__cat-name { color: var(--color-ink); }
  .ns__legal a:hover { color: var(--color-charcoal); }
  .ns__cta:hover { background: linear-gradient(180deg, #f7ecd6 0%, #ecdcb8 46%, #dcc59a 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .ns,
  .hd-icon,
  .hd-nav__link,
  .hd-nav__link::after,
  .ns__word::after,
  .mega-panel { transition: none; }

  .mega-panel { transform: none; }

  .nav-sheet.is-open .ns__scroll > *,
  .nav-sheet.is-open .ns__primary li {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .ns__scroll > *,
  .ns__primary li { opacity: 1; transform: none; }
}

/* The phone floor: this navigation is the first Arabic a shopper reads. */
@media (hover: none) and (pointer: coarse) {
  .hd-menu__word,
  .ns__cat-count,
  .ns__house,
  .ns__label,
  .ns__idx,
  .nav-label,
  .ns__legal a { font-size: 0.75rem; }
}

/* ═══ 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;
}