@charset "UTF-8";
/* ==========================================================================
   THE ELYSION EDIT — storefront
   Mobile-first. Written in cascade layers so page rules never need !important.
   ========================================================================== */

@layer tokens, reset, type, layout, components, pages, utilities;

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    /* Brand ---------------------------------------------------------------- */
    --emerald:        #0B2B26;
    --emerald-deep:   #071D1A;
    --forest:         #163832;
    --forest-soft:    #1E4A42;
    --gold:           #D4AF37;
    --champagne:      #C5A059;
    --champagne-pale: #E7D3AC;
    --cream:          #FBF9F5;
    --alabaster:      #F4F0E8;
    --sand:           #EAE3D6;
    --charcoal:       #1A1A1A;
    --ink-60:         #55605C;
    --ink-40:         #8A938F;
    --line:           #DED6C7;
    --line-soft:      #EBE5D9;
    --crimson:        #8E1B3A;
    --sage:           #4A6B5D;

    /* Semantic ------------------------------------------------------------- */
    --bg:             var(--cream);
    --bg-alt:         var(--alabaster);
    --bg-invert:      var(--emerald);
    --text:           var(--charcoal);
    --text-muted:     var(--ink-60);
    --text-invert:    var(--cream);
    --accent:         var(--champagne);
    --accent-strong:  var(--gold);

    /* Type ----------------------------------------------------------------- */
    --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* A fifth-based scale. Fluid between 380px and 1400px so nothing needs
       a breakpoint just to resize. */
    --step--1: clamp(0.78rem, 0.75rem + 0.14vw, 0.86rem);
    --step-0:  clamp(0.94rem, 0.90rem + 0.18vw, 1.02rem);
    --step-1:  clamp(1.12rem, 1.04rem + 0.36vw, 1.36rem);
    --step-2:  clamp(1.42rem, 1.24rem + 0.80vw, 1.94rem);
    --step-3:  clamp(1.80rem, 1.44rem + 1.58vw, 2.88rem);
    --step-4:  clamp(2.24rem, 1.62rem + 2.72vw, 4.20rem);
    --step-5:  clamp(2.74rem, 1.70rem + 4.55vw, 6.00rem);

    --tracking-label: 0.18em;
    --tracking-wide:  0.08em;
    --leading-tight:  1.06;
    --leading-snug:   1.28;
    --leading-body:   1.65;

    /* Space — a 4px base, named by role rather than by size. */
    --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
    --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
    --s-9: 6rem;     --s-10: 8rem;

    --gutter: clamp(1.15rem, 4vw, 3.5rem);
    --measure: 68ch;
    --max: 88rem;

    /* Surface -------------------------------------------------------------- */
    --radius-sm: 2px;
    --radius:    3px;
    --radius-lg: 4px;   /* jewellery reads as precious; corners stay crisp */
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgb(11 43 38 / 0.05);
    --shadow:    0 6px 24px -12px rgb(11 43 38 / 0.18);
    --shadow-lg: 0 24px 64px -28px rgb(11 43 38 / 0.32);

    /* Motion --------------------------------------------------------------- */
    --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 160ms;
    --dur:      280ms;
    --dur-slow: 620ms;

    --header-h: 3.75rem;
    --z-header: 60;
    --z-drawer: 90;
    --z-modal:  110;
    --z-toast:  130;
  }

  @media (min-width: 60rem) {
    :root { --header-h: 5.25rem; }
  }
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Offset in-page anchors by the sticky header. */
    scroll-padding-top: calc(var(--header-h) + var(--s-4));
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

  /* Every image gets an intrinsic box so nothing reflows on load — this is
     what keeps CLS under 0.05 on the listing and PDP grids. */
  img, picture, video, svg { display: block; max-width: 100%; height: auto; }
  img { background: var(--bg-alt); }

  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }

  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

  :focus-visible {
    outline: 2px solid var(--champagne);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }
  :focus:not(:focus-visible) { outline: none; }

  [hidden] { display: none !important; }

  ::selection { background: var(--champagne-pale); color: var(--emerald); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
@layer type {
  .display, h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 300;
    line-height: var(--leading-tight);
    letter-spacing: -0.012em;
    /* Cormorant's default figures are old-style; lining reads better in UI. */
    font-variant-numeric: lining-nums;
  }

  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

  .display--hero  { font-size: var(--step-5); }
  .display--italic { font-style: italic; }

  /* Small-caps label: the connective tissue of the whole layout. */
  .label {
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.4;
  }
  .label--accent { color: var(--champagne); }
  .label--invert { color: var(--champagne-pale); }

  .lede {
    font-size: var(--step-1);
    line-height: var(--leading-snug);
    color: var(--text-muted);
    max-width: 46ch;
  }

  .prose { max-width: var(--measure); }
  .prose > * + * { margin-top: 1.1em; }
  .prose h2 { font-size: var(--step-2); margin-top: 1.8em; }
  .prose h3 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 600; margin-top: 1.6em; }
  .prose a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--champagne); }
  .prose a:hover { color: var(--champagne); }
  .prose ul, .prose ol { padding-left: 1.3em; }
  .prose li + li { margin-top: 0.4em; }
  .prose blockquote {
    border-left: 2px solid var(--champagne);
    padding-left: var(--s-5);
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-style: italic;
    color: var(--forest);
  }
  .prose img { border-radius: var(--radius); margin-block: var(--s-6); }
  .prose hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-7); }

  /* Tabular figures everywhere money or stock is shown, so digits don't
     jitter when a swatch changes the price. */
  .num, .price, .qty__value, td[data-num] { font-variant-numeric: tabular-nums lining-nums; }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .wrap {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .wrap--narrow { max-width: 58rem; }
  .wrap--wide   { max-width: 104rem; }

  .section { padding-block: var(--s-8); }
  .section--tight { padding-block: var(--s-6); }
  .section--loose { padding-block: var(--s-9); }
  .section--invert { background: var(--bg-invert); color: var(--text-invert); }
  .section--alt { background: var(--bg-alt); }

  @media (min-width: 60rem) {
    .section { padding-block: var(--s-9); }
    .section--loose { padding-block: var(--s-10); }
  }

  .stack > * + * { margin-top: var(--flow, var(--s-4)); }
  .stack--lg { --flow: var(--s-6); }
  .stack--sm { --flow: var(--s-2); }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap, var(--s-3));
  }
  .cluster--between { justify-content: space-between; }

  .grid { display: grid; gap: var(--gap, var(--s-5)); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4) var(--s-3);
  }
  @media (min-width: 48rem) { .grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); } }
  @media (min-width: 75rem) { .grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  .grid--3 { grid-template-columns: 1fr; }
  @media (min-width: 48rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

  /* The editorial split: image and text, never a 50/50 slab. */
  .split { display: grid; gap: var(--s-6); }
  @media (min-width: 60rem) {
    .split { grid-template-columns: 1.15fr 0.85fr; gap: var(--s-8); align-items: center; }
    .split--reverse > :first-child { order: 2; }
    .split--text-first { grid-template-columns: 0.85fr 1.15fr; }
  }

  /* Edge-to-edge on mobile, inset on desktop — used by hero and banners. */
  .bleed { margin-inline: calc(var(--gutter) * -1); }
  @media (min-width: 60rem) { .bleed { margin-inline: 0; } }

  .ratio { position: relative; overflow: hidden; background: var(--bg-alt); }
  .ratio > img, .ratio > video, .ratio > svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .ratio--portrait { aspect-ratio: 4 / 5; }
  .ratio--tall     { aspect-ratio: 3 / 4; }
  .ratio--square   { aspect-ratio: 1 / 1; }
  .ratio--wide     { aspect-ratio: 16 / 10; }
  .ratio--hero     { aspect-ratio: 4 / 5; }
  @media (min-width: 60rem) { .ratio--hero { aspect-ratio: 21 / 9; } }

  .rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
  .rule--gold { border-color: var(--champagne); }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* ---- Buttons --------------------------------------------------------- */
  .btn {
    --btn-bg: var(--emerald);
    --btn-fg: var(--cream);
    --btn-border: var(--emerald);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 3rem;            /* 48px — comfortable thumb target */
    padding: 0.85rem 1.75rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }

  /* Fill wipes up from the bottom rather than cross-fading — reads as
     deliberate rather than as a default hover. */
  .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--champagne);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--dur) var(--ease-out);
  }
  .btn:hover::after, .btn:focus-visible::after { transform: scaleY(1); }
  .btn:hover, .btn:focus-visible { color: var(--emerald); border-color: var(--champagne); }
  .btn:active { transform: translateY(1px); }

  .btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }

  .btn--ghost { --btn-bg: transparent; --btn-fg: var(--emerald); --btn-border: var(--emerald); }
  .btn--ghost:hover { color: var(--emerald); }

  .btn--gold { --btn-bg: var(--champagne); --btn-fg: var(--emerald); --btn-border: var(--champagne); }
  .btn--gold::after { background: var(--emerald); }
  .btn--gold:hover, .btn--gold:focus-visible { color: var(--cream); border-color: var(--emerald); }

  .btn--invert { --btn-bg: transparent; --btn-fg: var(--cream); --btn-border: rgb(251 249 245 / 0.45); }
  .btn--invert::after { background: var(--cream); }
  .btn--invert:hover, .btn--invert:focus-visible { color: var(--emerald); border-color: var(--cream); }

  .btn--block { width: 100%; }
  .btn--sm { min-height: 2.35rem; padding: 0.45rem 1rem; font-size: 0.72rem; }
  .btn--lg { min-height: 3.5rem; padding: 1.05rem 2.5rem; }

  /* Quiet text action — underline grows from the left. */
  .link-quiet {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: 2px;
    background-image: linear-gradient(var(--champagne), var(--champagne));
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: left bottom;
    transition: background-size var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  }
  .link-quiet:hover, .link-quiet:focus-visible { background-size: 100% 1px; color: var(--champagne); }

  /* ---- Forms ----------------------------------------------------------- */
  .field { display: block; }
  .field + .field { margin-top: var(--s-4); }

  .field__label {
    display: block;
    margin-bottom: var(--s-2);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .field__hint { margin-top: var(--s-2); font-size: var(--step--1); color: var(--ink-40); }
  .field__error { margin-top: var(--s-2); font-size: var(--step--1); color: var(--crimson); }

  .input, .select, .textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.8rem 1rem;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    /* 16px minimum stops iOS Safari zooming the viewport on focus. */
    font-size: max(16px, var(--step-0));
  }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--ink-40); }
  .input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--champagne);
    box-shadow: 0 0 0 3px rgb(197 160 89 / 0.16);
  }
  .input[aria-invalid="true"] { border-color: var(--crimson); }
  .textarea { min-height: 8rem; resize: vertical; line-height: var(--leading-body); }

  .select {
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230B2B26' stroke-width='1.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
  }

  .checkbox { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
  .checkbox input { width: 1.15rem; height: 1.15rem; margin-top: 0.22rem; accent-color: var(--emerald); flex: none; }

  /* ---- Badges & pills --------------------------------------------------- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 0.28rem 0.6rem;
    border-radius: var(--radius-sm);
    background: var(--sand);
    color: var(--forest);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .badge--sale   { background: var(--crimson); color: #fff; }
  .badge--low    { background: #8A5B00; color: #fff; }
  .badge--out    { background: var(--ink-40); color: #fff; }
  .badge--new    { background: var(--emerald); color: var(--champagne-pale); }
  .badge--ok     { background: var(--sage); color: #fff; }

  /* ---- Product card ----------------------------------------------------- */
  .card { position: relative; display: flex; flex-direction: column; }

  /* The positioning context for everything overlaying the image. Without it
     the hover controls anchor to the whole card and cover the title and
     price underneath. */
  .card__frame { position: relative; }

  .card__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--bg-alt);
  }
  .card__img {
    transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out);
  }
  .card:hover .card__img { transform: scale(1.035); }

  /* Second image cross-fades in on hover where one exists. */
  .card__img--alt { position: absolute; inset: 0; opacity: 0; }
  .card:hover .card__img--alt { opacity: 1; }

  .card__flags { position: absolute; inset-block-start: var(--s-3); inset-inline-start: var(--s-3); z-index: 2; display: grid; gap: var(--s-1); justify-items: start; pointer-events: none; }

  .card__quick {
    position: absolute;
    inset-inline: var(--s-3);
    /* Anchored inside the frame, so it rests on the bottom of the IMAGE. */
    inset-block-end: var(--s-3);
    z-index: 3;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  }
  .card:hover .card__quick, .card:focus-within .card__quick { opacity: 1; transform: none; }
  /* Touch devices have no hover, so the quick action stays visible. */
  @media (hover: none) { .card__quick { opacity: 1; transform: none; } }

  .card__body { padding-top: var(--s-4); display: grid; gap: var(--s-1); }
  .card__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; line-height: 1.2; }
  .card__title a { text-decoration: none; }
  /* Makes the whole card a click target — but underneath the hover controls,
     otherwise it swallows their clicks. */
  .card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .card__meta { font-size: var(--step--1); color: var(--ink-40); }

  .card__price { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--step-0); }
  .card__price del { color: var(--ink-40); font-size: var(--step--1); }
  .card__price ins { text-decoration: none; color: var(--crimson); }

  /* Swatch dots on the card, capped with a "+n" overflow. */
  .card__swatches { display: flex; gap: 0.3rem; margin-top: var(--s-1); }
  .card__swatch {
    width: 0.85rem; height: 0.85rem;
    border-radius: 50%;
    border: 1px solid rgb(11 43 38 / 0.18);
    background-size: cover;
  }

  /* ---- Swatch selector (PDP) -------------------------------------------- */
  .swatches { display: flex; flex-wrap: wrap; gap: var(--s-2); }

  .swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;         /* 44px — the accessible minimum */
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }
  .swatch:hover { border-color: var(--ink-40); }
  .swatch[aria-pressed="true"] {
    border-color: var(--emerald);
    box-shadow: 0 0 0 1px var(--emerald);
  }
  .swatch:active { transform: scale(0.96); }

  /* Colour and image swatches are circular chips. */
  .swatch--color, .swatch--image {
    width: 2.75rem;
    border-radius: 50%;
    padding: 3px;
    background-clip: content-box;
  }
  .swatch--color[aria-pressed="true"], .swatch--image[aria-pressed="true"] {
    box-shadow: 0 0 0 1px var(--emerald), inset 0 0 0 2px #fff;
  }
  .swatch__chip { width: 100%; height: 100%; border-radius: 50%; background-size: cover; background-position: center; }

  .swatch--text { padding-inline: 0.9rem; font-size: var(--step--1); font-weight: 500; }

  /* Sold-out values are struck through, not hidden: knowing a size exists
     but is gone is useful information. */
  .swatch[data-available="false"] { opacity: 0.4; }
  .swatch[data-available="false"]::before {
    content: "";
    position: absolute;
    inset-inline: 8%;
    inset-block-start: 50%;
    height: 1px;
    background: var(--crimson);
    transform: rotate(-16deg);
  }

  .swatch-row + .swatch-row { margin-top: var(--s-5); }
  .swatch-row__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-3); gap: var(--s-3); }
  .swatch-row__value { font-size: var(--step--1); color: var(--text); font-weight: 500; }

  /* ---- Quantity stepper -------------------------------------------------- */
  .qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
  }
  .qty__btn {
    width: 2.75rem; height: 2.75rem;
    display: grid; place-items: center;
    font-size: 1.1rem; line-height: 1;
    color: var(--forest);
    transition: background var(--dur-fast) var(--ease-out);
  }
  .qty__btn:hover { background: var(--bg-alt); }
  .qty__btn[disabled] { opacity: 0.3; cursor: not-allowed; }
  .qty__value { min-width: 2.5rem; text-align: center; font-weight: 600; }

  /* ---- Drawer (cart / filters) ------------------------------------------ */
  .drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(27rem, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--bg);
    z-index: var(--z-drawer);
    transform: translateX(100%);
    visibility: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  .drawer[data-open="true"] { transform: none; visibility: visible; transition-delay: 0s; }
  .drawer--left { inset-inline: 0 auto; transform: translateX(-100%); }

  .drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-5) var(--s-5) var(--s-4);
    border-bottom: 1px solid var(--line-soft);
  }
  .drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-5); }
  .drawer__foot {
    padding: var(--s-5);
    padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-soft);
    background: var(--bg-alt);
  }

  .scrim {
    position: fixed; inset: 0;
    background: rgb(7 29 26 / 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    z-index: calc(var(--z-drawer) - 1);
    transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  .scrim[data-open="true"] { opacity: 1; visibility: visible; transition-delay: 0s; }

  .drawer__close {
    width: 2.75rem; height: 2.75rem;
    display: grid; place-items: center;
    border-radius: 50%;
    transition: background var(--dur-fast) var(--ease-out);
  }
  .drawer__close:hover { background: var(--sand); }

  /* ---- Cart line -------------------------------------------------------- */
  .cart-line { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-4); }
  .cart-line + .cart-line { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); }
  .cart-line__media { border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); }
  .cart-line__title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.15; }
  .cart-line__title a { text-decoration: none; }
  .cart-line__variant { font-size: var(--step--1); color: var(--ink-40); }
  .cart-line__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); }

  /* ---- Free-shipping progress ------------------------------------------- */
  .progress { display: grid; gap: var(--s-2); }
  .progress__track { height: 3px; background: var(--sand); border-radius: var(--radius-pill); overflow: hidden; }
  .progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--champagne), var(--gold));
    border-radius: inherit;
    transform-origin: left;
    transition: width var(--dur-slow) var(--ease-out);
  }
  .progress__label { font-size: var(--step--1); color: var(--text-muted); }
  .progress--done .progress__bar { background: var(--sage); }

  /* ---- Toast ------------------------------------------------------------- */
  .toasts {
    position: fixed;
    inset-block-end: max(var(--s-4), env(safe-area-inset-bottom));
    inset-inline: var(--s-4);
    display: grid;
    gap: var(--s-2);
    z-index: var(--z-toast);
    pointer-events: none;
  }
  @media (min-width: 48rem) {
    .toasts { inset-inline: auto var(--s-6); inset-block-end: var(--s-6); width: min(24rem, 90vw); }
  }
  .toast {
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-4);
    background: var(--emerald);
    color: var(--cream);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: var(--step--1);
    pointer-events: auto;
    animation: toast-in var(--dur) var(--ease-out) both;
  }
  .toast--error { background: var(--crimson); }
  .toast--success { background: var(--forest); }
  .toast[data-leaving="true"] { animation: toast-out var(--dur-fast) var(--ease-in-out) both; }

  @keyframes toast-in  { from { opacity: 0; transform: translateY(12px); } }
  @keyframes toast-out { to   { opacity: 0; transform: translateY(8px); } }
}

/* ==========================================================================
   HEADER / NAV / FOOTER
   ========================================================================== */
@layer components {
  .announce {
    background: var(--emerald);
    color: var(--champagne-pale);
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    padding: 0.55rem var(--gutter);
  }

  .header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background: color-mix(in srgb, var(--cream) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
  }
  .header[data-scrolled="true"] { border-bottom-color: var(--line-soft); background: color-mix(in srgb, var(--cream) 97%, transparent); }

  .header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--s-3);
    min-height: var(--header-h);
  }

  /* Emblem + wordmark lockup. The mark is a detailed wreath: at header size
     its inner lettering is unreadable, so the name is set in type beside it. */
  .wordmark {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 0.9rem + 1.1vw, 1.7rem);
    font-weight: 300;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--emerald);
  }
  /* Shown plain. An emerald disc behind it was tried and rejected: it turns
     the olive leaves muddy and swallows the dark "The" and "Edit" entirely.
     The mark holds its own on cream as long as it is given enough size. */
  .wordmark__mark {
    flex: none;
    height: clamp(2.75rem, 1.9rem + 3vw, 4rem);
    aspect-ratio: 1;
    width: auto;
    object-fit: contain;
    transition: transform var(--t-med) var(--ease);
  }
  .wordmark:hover .wordmark__mark { transform: rotate(-4deg) scale(1.04); }
  .wordmark__text { display: block; }
  .wordmark small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.56rem;
    letter-spacing: 0.3em;
    color: var(--champagne);
    text-align: center;
    margin-top: 2px;
  }

  /* Below the tablet breakpoint the lockup competes with the icons either
     side of it, so the mark carries the brand and the type steps back. */
  @media (max-width: 30rem) {
    .wordmark { gap: var(--s-1); font-size: 0.86rem; letter-spacing: 0.1em; }
    .wordmark small { display: none; }
  }

  .footer__mark {
    display: block;
    width: clamp(7rem, 11vw, 9.5rem);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    margin-inline-start: -0.4rem; /* optical: the wreath carries its own padding */
  }

  .header__left, .header__right { display: flex; align-items: center; gap: var(--s-1); }
  .header__right { justify-self: end; }

  .icon-btn {
    position: relative;
    width: 2.75rem; height: 2.75rem;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--emerald);
    transition: background var(--dur-fast) var(--ease-out);
  }
  .icon-btn:hover { background: var(--sand); }
  .icon-btn svg { width: 1.2rem; height: 1.2rem; }

  .icon-btn__count {
    position: absolute;
    inset-block-start: 0.35rem;
    inset-inline-end: 0.3rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding-inline: 0.2rem;
    display: grid; place-items: center;
    background: var(--champagne);
    color: var(--emerald);
    border-radius: var(--radius-pill);
    font-size: 0.62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .icon-btn__count[data-count="0"] { display: none; }

  /* Desktop nav sits below the wordmark — an editorial masthead, not a
     logo-left utility bar. */
  .nav { display: none; }
  @media (min-width: 60rem) {
    .nav { display: block; border-top: 1px solid var(--line-soft); }
    .nav__list { display: flex; justify-content: center; gap: var(--s-6); }
    .nav__link {
      display: inline-block;
      padding: var(--s-3) 0;
      font-size: var(--step--1);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      text-decoration: none;
      color: var(--forest);
      position: relative;
    }
    .nav__link::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0.55rem;
      height: 1px;
      background: var(--champagne);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform var(--dur) var(--ease-out);
    }
    .nav__item:hover .nav__link::after,
    .nav__link[aria-current="page"]::after { transform: scaleX(1); }

    /* Mega panel */
    .nav__panel {
      position: absolute;
      inset-inline: 0;
      inset-block-start: 100%;
      background: var(--bg);
      border-block: 1px solid var(--line-soft);
      box-shadow: var(--shadow);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
    }
    .nav__item:hover .nav__panel, .nav__item:focus-within .nav__panel {
      opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
    }
    .nav__panel-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); padding-block: var(--s-6); }
    .nav__sublink { display: block; padding: 0.3rem 0; text-decoration: none; color: var(--text-muted); font-size: var(--step--1); }
    .nav__sublink:hover { color: var(--champagne); }
  }

  .nav-wrap { position: relative; }

  /* Mobile nav drawer */
  .mobile-nav__group + .mobile-nav__group { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); }
  .mobile-nav__link {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-3) 0;
    font-family: var(--font-display);
    font-size: var(--step-2);
    text-decoration: none;
  }
  .mobile-nav__sub { padding-left: var(--s-4); }
  .mobile-nav__sub a { display: block; padding: var(--s-2) 0; font-size: var(--step-0); color: var(--text-muted); text-decoration: none; }

  /* ---- Footer ----------------------------------------------------------- */
  .footer { background: var(--emerald); color: var(--cream); padding-block: var(--s-8) var(--s-5); }
  .footer a { color: var(--cream); text-decoration: none; opacity: 0.78; transition: opacity var(--dur-fast), color var(--dur-fast); }
  .footer a:hover { opacity: 1; color: var(--champagne); }
  .footer__grid { display: grid; gap: var(--s-6); }
  @media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-7); } }
  .footer__head { font-size: var(--step--1); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--champagne); margin-bottom: var(--s-3); }
  .footer__list li + li { margin-top: var(--s-2); }
  .footer__bottom {
    margin-top: var(--s-7);
    padding-top: var(--s-4);
    border-top: 1px solid rgb(251 249 245 / 0.14);
    display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between;
    font-size: var(--step--1);
    opacity: 0.7;
  }

  .newsletter-form { display: flex; gap: var(--s-2); flex-wrap: wrap; }
  .newsletter-form .input { flex: 1 1 12rem; background: transparent; border-color: rgb(251 249 245 / 0.3); color: var(--cream); }
  .newsletter-form .input::placeholder { color: rgb(251 249 245 / 0.5); }

  /* ---- Sticky mobile add-to-cart ---------------------------------------- */
  .sticky-buy {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: calc(var(--z-header) - 1);
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--gutter);
    padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--cream) 94%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-soft);
    transform: translateY(105%);
    transition: transform var(--dur) var(--ease-out);
  }
  .sticky-buy[data-visible="true"] { transform: none; }
  .sticky-buy__meta { flex: 1; min-width: 0; }
  .sticky-buy__name { font-family: var(--font-display); font-size: var(--step-0); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky-buy__price { font-size: var(--step--1); color: var(--text-muted); }
  .sticky-buy .btn { flex: 0 0 auto; }
  @media (min-width: 60rem) { .sticky-buy { display: none; } }
}

/* ==========================================================================
   PAGES
   ========================================================================== */
@layer pages {

  /* ---- Hero -------------------------------------------------------------- */
  .hero { position: relative; }
  .hero__slide {
    position: relative;
    display: none;
  }
  .hero__slide[data-active="true"] { display: block; }

  .hero__media { position: relative; }
  .hero__media::after {
    content: "";
    position: absolute; inset: 0;
    /* Directional scrim, so text stays legible without flattening the image. */
    background: linear-gradient(100deg, rgb(7 29 26 / 0.62) 0%, rgb(7 29 26 / 0.28) 46%, transparent 78%);
  }
  .hero__slide[data-theme="light"] .hero__media::after {
    background: linear-gradient(100deg, rgb(251 249 245 / 0.82) 0%, rgb(251 249 245 / 0.38) 50%, transparent 80%);
  }
  .hero__slide[data-align="center"] .hero__media::after {
    background: linear-gradient(180deg, rgb(7 29 26 / 0.45), rgb(7 29 26 / 0.15) 45%, rgb(7 29 26 / 0.5));
  }

  .hero__content {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    display: grid;
    align-content: center;
    padding: var(--gutter);
    padding-block-end: calc(var(--gutter) + 2.5rem);
    color: var(--cream);
  }
  @media (min-width: 60rem) {
    .hero__content { max-width: 46rem; padding-inline: clamp(3rem, 7vw, 8rem); }
    .hero__slide[data-align="center"] .hero__content { max-width: none; justify-items: center; text-align: center; }
  }
  .hero__slide[data-theme="light"] .hero__content { color: var(--emerald); }
  .hero__slide[data-theme="light"] .label { color: var(--forest); }

  .hero__heading { font-size: var(--step-5); max-width: 14ch; }
  .hero__slide[data-align="center"] .hero__heading { max-width: 18ch; }
  .hero__body { max-width: 34ch; margin-top: var(--s-3); font-size: var(--step-1); opacity: 0.9; }

  /* Entrance: staggered, and only for the active slide. */
  .hero__slide[data-active="true"] .hero__content > * {
    animation: hero-rise var(--dur-slow) var(--ease-out) both;
  }
  .hero__slide[data-active="true"] .hero__content > *:nth-child(2) { animation-delay: 90ms; }
  .hero__slide[data-active="true"] .hero__content > *:nth-child(3) { animation-delay: 170ms; }
  .hero__slide[data-active="true"] .hero__content > *:nth-child(4) { animation-delay: 250ms; }
  @keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } }

  .hero__dots {
    position: absolute;
    inset-block-end: var(--s-5);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--s-2);
    z-index: 2;
  }
  .hero__dot {
    width: 2rem; height: 2px;
    background: rgb(251 249 245 / 0.35);
    border-radius: var(--radius-pill);
    transition: background var(--dur) var(--ease-out);
  }
  .hero__dot[aria-current="true"] { background: var(--champagne); }

  /* Parallax: the media drifts at 88% of scroll speed. JS sets --py. */
  .parallax > img, .parallax > svg { transform: translate3d(0, var(--py, 0), 0) scale(1.08); will-change: transform; }

  /* ---- Section headers ---------------------------------------------------- */
  .section-head {
    display: grid;
    gap: var(--s-2);
    margin-bottom: var(--s-6);
  }
  @media (min-width: 48rem) {
    .section-head--split {
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: var(--s-5);
    }
  }
  .section-head__title { font-size: var(--step-3); }

  /* ---- USP strip --------------------------------------------------------- */
  .usp { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); }
  @media (min-width: 60rem) { .usp { grid-template-columns: repeat(4, 1fr); } }
  .usp__item { display: grid; gap: var(--s-2); }
  .usp__icon { width: 1.5rem; height: 1.5rem; color: var(--champagne); }
  .usp__title { font-size: var(--step-0); font-weight: 600; }
  .usp__body { font-size: var(--step--1); color: var(--text-muted); }

  /* ---- Lookbook grid ----------------------------------------------------- */
  .lookbook { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 60rem) {
    .lookbook { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
    /* First tile spans two columns and two rows — breaks the grid's rhythm
       on purpose so the page does not read as a uniform product wall. */
    .lookbook__item:first-child { grid-column: span 2; grid-row: span 2; }
  }
  .lookbook__item { position: relative; overflow: hidden; border-radius: var(--radius); }
  .lookbook__item .ratio { aspect-ratio: 3 / 4; }
  .lookbook__item:first-child .ratio { aspect-ratio: 3 / 4; height: 100%; }
  .lookbook__item img { transition: transform var(--dur-slow) var(--ease-out); }
  .lookbook__item:hover img { transform: scale(1.05); }
  .lookbook__caption {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: var(--s-5) var(--s-4) var(--s-4);
    background: linear-gradient(transparent, rgb(7 29 26 / 0.8));
    color: var(--cream);
  }
  .lookbook__name { font-family: var(--font-display); font-size: var(--step-1); }
  .lookbook__item a::after { content: ""; position: absolute; inset: 0; }

  /* ---- Listing ----------------------------------------------------------- */
  .listing { display: grid; gap: var(--s-6); }
  @media (min-width: 64rem) {
    .listing { grid-template-columns: 15rem 1fr; gap: var(--s-8); align-items: start; }
    .listing__rail { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
  }

  .filter-group + .filter-group { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); }
  .filter-group__title { font-size: var(--step--1); letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: var(--s-3); }
  .filter-option { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; cursor: pointer; font-size: var(--step--1); }
  .filter-option input { accent-color: var(--emerald); width: 1rem; height: 1rem; }
  .filter-option__count { margin-left: auto; color: var(--ink-40); font-variant-numeric: tabular-nums; }
  .filter-option__chip { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid rgb(11 43 38 / 0.2); background-size: cover; }

  .listing__toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding-bottom: var(--s-4);
    margin-bottom: var(--s-5);
    border-bottom: 1px solid var(--line-soft);
  }
  .listing__count { font-size: var(--step--1); color: var(--text-muted); }

  .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
  .chip {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: var(--step--1);
    background: #fff;
    text-decoration: none;
  }
  .chip:hover { border-color: var(--champagne); }
  .chip__x { font-size: 1rem; line-height: 1; color: var(--ink-40); }

  .pagination { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: var(--s-8); }
  .pagination a, .pagination span {
    min-width: 2.5rem; height: 2.5rem;
    display: grid; place-items: center;
    padding-inline: 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
  }
  .pagination a:hover { border-color: var(--champagne); }
  .pagination [aria-current="page"] { background: var(--emerald); color: var(--cream); border-color: var(--emerald); }

  /* ---- PDP ---------------------------------------------------------------- */
  .pdp { display: grid; gap: var(--s-6); }
  @media (min-width: 64rem) {
    .pdp { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--s-8); align-items: start; }
    .pdp__buy { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  }

  .gallery { display: grid; gap: var(--s-3); }
  .gallery__main { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); cursor: zoom-in; }
  .gallery__main .ratio { aspect-ratio: 4 / 5; }
  .gallery__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur) var(--ease-out); }
  .gallery__slide[data-active="true"] { opacity: 1; position: relative; }

  .gallery__thumbs { display: flex; gap: var(--s-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
  .gallery__thumbs::-webkit-scrollbar { display: none; }
  .gallery__thumb {
    flex: 0 0 4.5rem;
    scroll-snap-align: start;
    border: 1px solid transparent;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-alt);
    transition: border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
    opacity: 0.6;
  }
  .gallery__thumb[aria-current="true"] { border-color: var(--emerald); opacity: 1; }
  .gallery__thumb:hover { opacity: 1; }
  .gallery__thumb .ratio { aspect-ratio: 1 / 1; }

  @media (min-width: 64rem) {
    .gallery { grid-template-columns: 4.75rem 1fr; }
    .gallery__thumbs { flex-direction: column; overflow-x: visible; overflow-y: auto; max-height: 34rem; }
    .gallery__main { grid-column: 2; grid-row: 1; }
    .gallery__thumbs { grid-column: 1; grid-row: 1; }
  }

  /* Zoom lightbox */
  .lightbox {
    position: fixed; inset: 0;
    z-index: var(--z-modal);
    background: rgb(7 29 26 / 0.94);
    display: grid;
    place-items: center;
    padding: var(--s-4);
    opacity: 0; visibility: hidden;
    transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  .lightbox[data-open="true"] { opacity: 1; visibility: visible; transition-delay: 0s; }
  .lightbox img { max-width: min(100%, 64rem); max-height: 88vh; width: auto; border-radius: var(--radius); cursor: zoom-out; }
  .lightbox__close { position: absolute; top: var(--s-4); right: var(--s-4); color: var(--cream); width: 2.75rem; height: 2.75rem; display: grid; place-items: center; }

  .pdp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); }
  .pdp__price-now { font-family: var(--font-display); font-size: var(--step-3); }
  .pdp__price-was { color: var(--ink-40); text-decoration: line-through; font-size: var(--step-1); }
  .pdp__sku { font-size: var(--step--1); color: var(--ink-40); font-variant-numeric: tabular-nums; }

  .pdp__stock { display: flex; align-items: center; gap: var(--s-2); font-size: var(--step--1); }
  .pdp__stock::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sage); }
  .pdp__stock[data-state="low"]::before { background: #B8860B; }
  .pdp__stock[data-state="out"]::before { background: var(--crimson); }

  .accordion__item { border-bottom: 1px solid var(--line-soft); }
  .accordion__trigger {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-4) 0;
    text-align: left;
    font-size: var(--step-0);
    font-weight: 500;
  }
  .accordion__icon { flex: none; transition: transform var(--dur) var(--ease-out); }
  .accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
  .accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out); }
  .accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
  .accordion__panel > div { overflow: hidden; }
  .accordion__panel .prose { padding-bottom: var(--s-4); }

  /* ---- Checkout ---------------------------------------------------------- */
  .checkout { display: grid; gap: var(--s-6); }
  @media (min-width: 64rem) {
    .checkout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: var(--s-8); align-items: start; }
    .checkout__summary { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  }
  .summary { background: var(--bg-alt); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: var(--s-5); }
  .summary__row { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; font-size: var(--step--1); }
  .summary__row--total {
    margin-top: var(--s-3); padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    font-size: var(--step-1);
    font-family: var(--font-display);
  }

  .pay-option { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-4); cursor: pointer; background: #fff; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
  .pay-option + .pay-option { margin-top: var(--s-3); }
  .pay-option:hover { border-color: var(--ink-40); }
  .pay-option:has(input:checked) { border-color: var(--emerald); box-shadow: 0 0 0 1px var(--emerald); }
  .pay-option[data-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
  .pay-option__head { display: flex; align-items: center; gap: var(--s-3); }
  .pay-option__body { margin-top: var(--s-2); margin-left: 1.9rem; font-size: var(--step--1); color: var(--text-muted); }

  .rate-option { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; background: #fff; }
  .rate-option + .rate-option { margin-top: var(--s-2); }
  .rate-option:has(input:checked) { border-color: var(--emerald); box-shadow: 0 0 0 1px var(--emerald); }
  .rate-option__price { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

  /* ---- Order timeline ----------------------------------------------------- */
  .timeline { position: relative; padding-left: var(--s-5); }
  .timeline::before { content: ""; position: absolute; left: 0.32rem; top: 0.5rem; bottom: 0.5rem; width: 1px; background: var(--line); }
  .timeline__item { position: relative; padding-bottom: var(--s-4); }
  .timeline__item::before {
    content: ""; position: absolute; left: calc(var(--s-5) * -1 + 0.07rem); top: 0.45rem;
    width: 0.55rem; height: 0.55rem; border-radius: 50%;
    background: var(--cream); border: 1px solid var(--ink-40);
  }
  .timeline__item--done::before { background: var(--sage); border-color: var(--sage); }
  .timeline__item--current::before { background: var(--champagne); border-color: var(--champagne); box-shadow: 0 0 0 3px rgb(197 160 89 / 0.25); }
  .timeline__label { font-weight: 500; }
  .timeline__meta { font-size: var(--step--1); color: var(--ink-40); }

  /* ---- Journal ------------------------------------------------------------ */
  .post-card__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; }
  .post-card__title a { text-decoration: none; }
  .post-card__meta { font-size: var(--step--1); color: var(--ink-40); display: flex; gap: var(--s-3); flex-wrap: wrap; }

  .article__head { text-align: center; max-width: 48rem; margin-inline: auto; }
  .article__body { max-width: var(--measure); margin-inline: auto; font-size: var(--step-1); }

  /* ---- Empty / error states ---------------------------------------------- */
  .empty { text-align: center; padding-block: var(--s-8); display: grid; gap: var(--s-4); justify-items: center; }
  .empty__icon { width: 3rem; height: 3rem; color: var(--line); }

  .flash { padding: var(--s-3) var(--s-4); border-radius: var(--radius); font-size: var(--step--1); border: 1px solid; }
  .flash--success { background: color-mix(in srgb, var(--sage) 12%, var(--cream)); border-color: var(--sage); color: #2C4A3C; }
  .flash--error { background: color-mix(in srgb, var(--crimson) 8%, var(--cream)); border-color: var(--crimson); color: var(--crimson); }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .skip-link {
    position: absolute;
    top: -4rem;
    left: var(--s-4);
    z-index: var(--z-toast);
    background: var(--emerald);
    color: var(--cream);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius);
    transition: top var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus { top: var(--s-4); }

  .text-center { text-align: center; }
  .text-muted  { color: var(--text-muted); }
  .text-accent { color: var(--champagne); }
  .mt-0 { margin-top: 0; }
  .mt-4 { margin-top: var(--s-4); }
  .mt-6 { margin-top: var(--s-6); }
  .mb-4 { margin-bottom: var(--s-4); }
  .w-full { width: 100%; }
  .flex-1 { flex: 1; }
  .no-scroll { overflow: hidden; }

  @media (min-width: 64rem) { .lg\:hidden { display: none !important; } }
  @media (max-width: 63.999rem) { .lg\:only { display: none !important; } }

  /* Scroll-triggered reveal. Elements start hidden ONLY when JS is running,
     so a no-JS visitor still sees everything. */
  [data-reveal] { opacity: 1; }
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
  .js [data-reveal][data-revealed="true"] { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   WHATSAPP
   ========================================================================== */
@layer components {
  :root { --whatsapp: #25D366; --whatsapp-ink: #075E54; }

  /* The enquiry button on the PDP. Reads as WhatsApp without shouting over
     the Add-to-bag button beside it — outlined, not filled. */
  .whatsapp-btn {
    --btn-bg: transparent;
    --btn-fg: var(--whatsapp-ink);
    --btn-border: var(--whatsapp);
    gap: var(--s-2);
  }
  .whatsapp-btn::after { background: var(--whatsapp); }
  .whatsapp-btn:hover, .whatsapp-btn:focus-visible { color: #fff; border-color: var(--whatsapp); }
  .whatsapp-btn svg { flex: none; }

  .whatsapp-icon { color: var(--whatsapp-ink); }
  .whatsapp-icon:hover { background: color-mix(in srgb, var(--whatsapp) 18%, transparent); }

  /* Floating bubble. Sits above the safe-area inset, and lifts clear of the
     sticky buy bar on the PDP so the two never overlap. */
  .wa-float {
    position: fixed;
    inset-inline-end: var(--s-4);
    inset-block-end: max(var(--s-4), env(safe-area-inset-bottom));
    z-index: calc(var(--z-header) - 2);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0.85rem;
    background: var(--whatsapp);
    color: #fff;
    border-radius: var(--radius-pill);
    text-decoration: none;
    box-shadow: 0 10px 30px -10px rgb(7 94 84 / 0.55);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  }
  .wa-float:hover, .wa-float:focus-visible {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 16px 36px -12px rgb(7 94 84 / 0.6);
  }
  .wa-float__label {
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    /* Collapsed to an icon on small screens, where space is scarcer. */
    display: none;
  }
  @media (min-width: 48rem) {
    .wa-float { padding: 0.8rem 1.15rem; }
    .wa-float__label { display: inline; }
  }
  .page-product .wa-float { inset-block-end: calc(4.75rem + env(safe-area-inset-bottom)); }
  @media (min-width: 60rem) {
    .page-product .wa-float { inset-block-end: max(var(--s-5), env(safe-area-inset-bottom)); }
  }

  /* Quick enquiry on a listing card. */
  .card__wa {
    position: absolute;
    inset-block-start: var(--s-3);
    inset-inline-end: var(--s-3);
    width: 2.25rem; height: 2.25rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cream) 92%, transparent);
    color: var(--whatsapp-ink);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), background var(--dur-fast);
    z-index: 3;
  }
  .card:hover .card__wa, .card:focus-within .card__wa { opacity: 1; transform: none; }
  .card__wa:hover { background: var(--whatsapp); color: #fff; }
  @media (hover: none) { .card__wa { opacity: 1; transform: none; } }
}

/* ==========================================================================
   STOREFRONT V2
   The D2C pattern language — marquee, category circles, swipe rails, quick
   add, mobile toolbar — rendered in the house palette rather than the
   category-standard pink-and-white.
   ========================================================================== */
@layer components {

  /* ---- Scrolling marquee ------------------------------------------------- */
  .marquee {
    --marquee-duration: 34s;
    overflow: hidden;
    background: var(--emerald);
    color: var(--champagne-pale);
    padding-block: 0.6rem;
    /* Fade the ends so text enters and leaves rather than snapping. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .marquee--light { background: var(--sand); color: var(--forest); }
  .marquee--gold  { background: var(--champagne); color: var(--emerald); }

  .marquee__track {
    display: flex;
    width: max-content;
    animation: marquee var(--marquee-duration) linear infinite;
  }
  .marquee:hover .marquee__track { animation-play-state: paused; }

  .marquee__group { display: flex; align-items: center; flex: none; }
  .marquee__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding-inline: var(--s-5);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .marquee__item::after { content: "✦"; opacity: .5; font-size: .7em; }

  @keyframes marquee { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; justify-content: center; width: 100%; }
    .marquee__group:nth-child(2) { display: none; }
  }

  /* ---- Category circles --------------------------------------------------- */
  .circles {
    display: flex;
    gap: var(--s-5);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-block: var(--s-3);
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
  }
  .circles::-webkit-scrollbar { display: none; }
  @media (min-width: 60rem) {
    .circles { justify-content: center; flex-wrap: wrap; gap: var(--s-7); overflow: visible; margin-inline: 0; padding-inline: 0; }
  }

  .circle {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: grid;
    justify-items: center;
    gap: var(--s-4);
    /* Fluid so the row fills the width it is given instead of sitting as a
       cluster of small tokens in the middle of the page. */
    width: clamp(7rem, 22vw, 8rem);
    text-decoration: none;
    text-align: center;
  }
  @media (min-width: 48rem) { .circle { width: clamp(8.5rem, 15vw, 11rem); } }

  .circle__ring {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-alt);
    /* A hairline gold ring, inset so the image never touches it. */
    box-shadow: 0 0 0 1px var(--line), inset 0 0 0 4px var(--bg);
    transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  }
  .circle:hover .circle__ring,
  .circle:focus-visible .circle__ring {
    box-shadow: 0 0 0 2px var(--champagne), inset 0 0 0 4px var(--bg),
                0 14px 30px -14px rgb(11 43 38 / .4);
    transform: translateY(-5px);
  }
  .circle__ring img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
  .circle:hover .circle__ring img { transform: scale(1.08); }

  .circle__label {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: 0;
  }
  .circle__count {
    display: block;
    font-family: var(--font-body);
    font-size: 0.68rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-40);
    margin-top: 5px;
  }

  /* ---- Swipeable product rail ---------------------------------------------- */
  .rail { position: relative; }

  .rail__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(60vw, 1fr);
    gap: var(--s-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-bottom: var(--s-2);
  }
  .rail__track::-webkit-scrollbar { display: none; }
  .rail__track > * { scroll-snap-align: start; }

  @media (min-width: 40rem) { .rail__track { grid-auto-columns: minmax(16rem, 1fr); gap: var(--s-4); } }
  @media (min-width: 75rem) {
    .rail__track { grid-auto-columns: minmax(18rem, 1fr); gap: var(--s-5); padding-inline: 0; margin-inline: 0; }
  }

  .rail__nav {
    position: absolute;
    inset-block-start: 32%;
    width: 2.75rem; height: 2.75rem;
    display: none;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cream) 94%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow);
    color: var(--emerald);
    z-index: 3;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  @media (min-width: 75rem) { .rail__nav { display: grid; } }
  .rail__nav:hover { transform: scale(1.06); }
  .rail__nav[disabled] { opacity: 0; pointer-events: none; }
  .rail__nav--prev { inset-inline-start: calc(var(--s-6) * -1); }
  .rail__nav--next { inset-inline-end: calc(var(--s-6) * -1); }

  /* Progress line under the rail — a scrollbar with manners. */
  .rail__progress { height: 2px; background: var(--line-soft); border-radius: 99px; margin-top: var(--s-4); overflow: hidden; }
  .rail__progress span { display: block; height: 100%; width: 25%; background: var(--champagne); border-radius: 99px; transition: transform var(--dur-fast) linear; }
  @media (min-width: 75rem) { .rail__progress { display: none; } }

  /* ---- Card additions: wishlist, quick add, rating -------------------------- */
  .card__wish {
    position: absolute;
    inset-block-start: var(--s-3);
    inset-inline-end: var(--s-3);
    width: 2.25rem; height: 2.25rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cream) 90%, transparent);
    backdrop-filter: blur(6px);
    color: var(--forest);
    z-index: 3;
    transition: color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
  }
  .card__wish:hover { transform: scale(1.1); }
  .card__wish[aria-pressed="true"] { color: var(--crimson); }
  .card__wish[aria-pressed="true"] svg { fill: currentColor; }
  .card__wish svg { fill: none; stroke: currentColor; stroke-width: 1.5; transition: fill var(--dur-fast); }

  /* When a WhatsApp chip is also present, stack them. */
  .card__wa { inset-block-start: calc(var(--s-3) + 2.65rem); }

  .card__rating { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--ink-40); }
  .stars { display: inline-flex; gap: 1px; color: var(--champagne); }
  .stars svg { width: 0.8rem; height: 0.8rem; fill: currentColor; }
  .stars--empty svg { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .45; }

  .card__add {
    width: 100%;
    min-height: 2.6rem;
    font-size: 0.72rem;
    /* Frosted rather than solid: the piece stays visible through it. */
    background: color-mix(in srgb, var(--cream) 93%, transparent);
    backdrop-filter: blur(10px);
    color: var(--emerald);
    border-color: color-mix(in srgb, var(--emerald) 22%, transparent);
    box-shadow: 0 6px 18px -8px rgb(11 43 38 / .35);
  }
  .card__add::after { background: var(--emerald); }
  .card__add:hover, .card__add:focus-visible { color: var(--cream); border-color: var(--emerald); }

  /* ---- Countdown ------------------------------------------------------------ */
  .countdown { display: flex; align-items: center; justify-content: center; gap: var(--s-3); flex-wrap: wrap; }
  .countdown__unit {
    min-width: 3.25rem;
    padding: var(--s-2) var(--s-3);
    background: color-mix(in srgb, var(--cream) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--champagne) 45%, transparent);
    border-radius: var(--radius);
    text-align: center;
  }
  .countdown__num { display: block; font-family: var(--font-display); font-size: var(--step-2); line-height: 1; font-variant-numeric: tabular-nums; }
  .countdown__cap { display: block; font-size: 0.6rem; letter-spacing: var(--tracking-label); text-transform: uppercase; opacity: .7; margin-top: 3px; }

  /* ---- Banner grid ---------------------------------------------------------- */
  .banners { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
  @media (min-width: 48rem) { .banners { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s-4); } }

  .banner-tile { position: relative; overflow: hidden; border-radius: var(--radius); display: block; text-decoration: none; }
  .banner-tile .ratio { aspect-ratio: 4 / 3; }
  .banner-tile img { transition: transform var(--dur-slow) var(--ease-out); }
  .banner-tile:hover img { transform: scale(1.06); }
  .banner-tile__body {
    position: absolute; inset: 0;
    display: grid; align-content: end; gap: var(--s-2);
    padding: var(--s-5);
    background: linear-gradient(transparent 35%, rgb(7 29 26 / .72));
    color: var(--cream);
  }
  .banner-tile__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; }

  /* ---- Reels / Instagram grid ------------------------------------------------ */
  .reels {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 42vw;
    gap: var(--s-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
  }
  .reels::-webkit-scrollbar { display: none; }
  @media (min-width: 48rem) {
    .reels { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; gap: var(--s-4); }
  }
  .reel {
    position: relative;
    scroll-snap-align: start;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-alt);
    display: block;
    text-decoration: none;
  }
  .reel .ratio { aspect-ratio: 9 / 16; }
  .reel img { transition: transform var(--dur-slow) var(--ease-out); }
  .reel:hover img { transform: scale(1.06); }
  .reel__play {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: var(--cream);
    background: linear-gradient(transparent 55%, rgb(7 29 26 / .45));
  }
  .reel__play svg { width: 2.5rem; height: 2.5rem; filter: drop-shadow(0 2px 8px rgb(0 0 0 / .4)); }
  .reel__caption { position: absolute; inset-block-end: 0; inset-inline: 0; padding: var(--s-3); color: var(--cream); font-size: var(--step--1); }

  /* ---- Review strip ----------------------------------------------------------- */
  .reviews { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
  @media (min-width: 48rem) { .reviews { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
  .review {
    padding: var(--s-5);
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    display: grid;
    gap: var(--s-3);
  }
  .review__quote { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45; color: var(--text); }
  .review__who { font-size: var(--step--1); color: var(--ink-40); }
  .review__verified { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--sage); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }

  /* ---- Mobile bottom toolbar ----------------------------------------------------- */
  .tabbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: calc(var(--z-header) - 3);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: color-mix(in srgb, var(--cream) 96%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-soft);
    padding-bottom: env(safe-area-inset-bottom);
  }
  @media (min-width: 60rem) { .tabbar { display: none; } }

  .tabbar__item {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 0.5rem 0.25rem 0.55rem;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--ink-60);
    text-decoration: none;
    position: relative;
    transition: color var(--dur-fast);
  }
  .tabbar__item svg { width: 1.25rem; height: 1.25rem; }
  .tabbar__item[aria-current="page"] { color: var(--emerald); }
  .tabbar__item[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 30%;
    height: 2px;
    background: var(--champagne);
    border-radius: 0 0 2px 2px;
  }
  .tabbar__badge {
    position: absolute;
    inset-block-start: 0.3rem;
    inset-inline-start: 55%;
    min-width: 1rem; height: 1rem;
    padding-inline: 0.2rem;
    display: grid; place-items: center;
    background: var(--champagne);
    color: var(--emerald);
    border-radius: 99px;
    font-size: 0.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .tabbar__badge[data-count="0"] { display: none; }

  /* The tab bar occupies the thumb zone, so anything else anchored there
     has to move up. */
  @media (max-width: 59.999rem) {
    body:has(.tabbar) { padding-bottom: 3.75rem; }
    body:has(.tabbar) .wa-float { inset-block-end: calc(4.5rem + env(safe-area-inset-bottom)); }
    body:has(.tabbar).page-product .wa-float { inset-block-end: calc(8.5rem + env(safe-area-inset-bottom)); }
    body:has(.tabbar) .sticky-buy { inset-block-end: 3.75rem; padding-bottom: var(--s-3); }
    body:has(.tabbar) .toasts { inset-block-end: calc(4.25rem + env(safe-area-inset-bottom)); }
  }

  /* ---- Back to top ------------------------------------------------------------------ */
  .to-top {
    position: fixed;
    inset-inline-start: var(--s-4);
    inset-block-end: max(var(--s-4), env(safe-area-inset-bottom));
    z-index: calc(var(--z-header) - 2);
    width: 2.75rem; height: 2.75rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cream) 92%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    color: var(--emerald);
    opacity: 0; visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  .to-top[data-visible="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  @media (max-width: 59.999rem) { body:has(.tabbar) .to-top { inset-block-end: calc(4.5rem + env(safe-area-inset-bottom)); } }

  /* ---- Section heading with a rule ---------------------------------------------------- */
  .head-rule {
    display: grid;
    gap: var(--s-3);
    justify-items: center;
    text-align: center;
    margin-bottom: var(--s-7);
  }
  .head-rule__eyebrow {
    font-size: var(--step--1);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--champagne);
  }
  /* A step larger than the old value: these are the page's landmarks, and at
     step-3 they read as sub-headings rather than section openers. */
  .head-rule__title { font-size: var(--step-4); max-width: 18ch; }
  .head-rule::after { content: ""; width: 4rem; height: 1px; background: var(--champagne); }

  /* The dark bands need their eyebrow lifted off the ground. */
  .section--invert .head-rule__eyebrow { color: var(--champagne-pale); }
  .section--invert .head-rule::after { background: var(--champagne); opacity: .8; }
}

/* ==========================================================================
   MEGA MENU
   Three bands: the category's own links, two live pieces, and a visual into
   the collection. Replaces the old list-plus-arbitrary-image layout.
   ========================================================================== */
@layer components {
  @media (min-width: 60rem) {

    .nav__panel-inner { display: none; }   /* superseded by .mega */

    .mega {
      display: grid;
      grid-template-columns: minmax(13rem, 0.9fr) minmax(0, 1.5fr) minmax(14rem, 1fr);
      gap: clamp(2rem, 4vw, 4.5rem);
      padding-block: var(--s-7);
      align-items: start;
    }

    .mega__heading {
      font-size: var(--step--1);
      font-weight: 500;
      letter-spacing: var(--tracking-label);
      text-transform: uppercase;
      color: var(--champagne);
      padding-bottom: var(--s-3);
      margin-bottom: var(--s-3);
      border-bottom: 1px solid var(--line-soft);
    }

    .mega__links ul { display: grid; gap: 1px; }

    .mega__link {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--s-3);
      padding: 0.55rem 0.7rem 0.55rem 0;
      font-family: var(--font-display);
      font-size: var(--step-1);
      color: var(--forest);
      text-decoration: none;
      border-radius: var(--radius-sm);
      transition: color var(--dur-fast) var(--ease-out),
                  padding-left var(--dur) var(--ease-out),
                  background var(--dur-fast) var(--ease-out);
    }
    .mega__link:hover,
    .mega__link:focus-visible {
      color: var(--emerald);
      background: var(--bg-alt);
      /* Slides in rather than just recolouring — the whole row registers. */
      padding-left: 0.7rem;
    }
    .mega__link--all { color: var(--emerald); font-style: italic; }

    .mega__count {
      font-family: var(--font-body);
      font-size: 0.68rem;
      font-variant-numeric: tabular-nums;
      color: var(--ink-40);
    }

    /* ---- Two live pieces ------------------------------------------------- */
    .mega__product-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

    .mega-card { display: grid; gap: var(--s-3); text-decoration: none; }
    .mega-card__media { border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); }
    .mega-card__media img { transition: transform var(--dur-slow) var(--ease-out); }
    .mega-card:hover .mega-card__media img { transform: scale(1.06); }
    .mega-card__body { display: grid; gap: 2px; }
    .mega-card__name {
      font-family: var(--font-display);
      font-size: var(--step-0);
      line-height: 1.2;
      color: var(--text);
    }
    .mega-card__price { font-size: var(--step--1); color: var(--ink-40); font-variant-numeric: tabular-nums; }

    /* ---- Collection visual ------------------------------------------------ */
    .mega__feature {
      position: relative;
      display: block;
      border-radius: var(--radius);
      overflow: hidden;
      text-decoration: none;
    }
    .mega__feature .ratio { aspect-ratio: 4 / 5; }
    .mega__feature img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
    .mega__feature:hover img { transform: scale(1.05); }

    .mega__feature-body {
      position: absolute;
      inset: 0;
      display: grid;
      align-content: end;
      gap: var(--s-2);
      padding: var(--s-5);
      background: linear-gradient(transparent 40%, rgb(7 29 26 / 0.78));
      color: var(--cream);
    }
    .mega__feature-title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; }

    /* Softer entrance than the old instant swap. */
    .nav__panel {
      transform: translateY(-10px);
      transition: opacity var(--dur) var(--ease-out),
                  transform var(--dur) var(--ease-out),
                  visibility 0s linear var(--dur);
    }
    .nav__item:hover .nav__panel,
    .nav__item:focus-within .nav__panel { transform: none; }

    /* Stagger the three bands in. */
    .nav__item:hover .mega > *,
    .nav__item:focus-within .mega > * { animation: mega-rise 380ms var(--ease-out) both; }
    .nav__item:hover .mega > *:nth-child(2) { animation-delay: 60ms; }
    .nav__item:hover .mega > *:nth-child(3) { animation-delay: 110ms; }
    @keyframes mega-rise { from { opacity: 0; transform: translateY(10px); } }
    @media (prefers-reduced-motion: reduce) {
      .nav__item:hover .mega > * { animation: none; }
    }
  }
}