/* ==========================================================================
   Components — the reusable blocks. Each maps 1:1 to a Shopify/Shopline
   section or snippet; see README.md for the mapping table.
   ========================================================================== */

/* --- Brand mark ----------------------------------------------------------
   The logo file is a stacked lockup (bulb over wordmark). `.brand__mark`
   crops the bulb out of it with background-position so the header can use a
   horizontal lockup without a second asset. Crop box measured off the source
   PNG: x 402–792, y 0–534 of 1200×692.
   ------------------------------------------------------------------------ */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  flex-shrink: 0;
  position: relative;
  /* --glow is written by ui.js from the pointer's distance to the mark;
     --mark-brightness is how the lockup sits on its background. */
  --glow: 0;
  --mark-brightness: 1;
}
.brand:hover { color: inherit; }

.brand__mark {
  width: 38px;
  aspect-ratio: 390 / 534;
  background: url('../assets/img/logo-lamps-and-plants.png') no-repeat 49.6% 0 / 307.7% auto;
  flex-shrink: 0;
  position: relative;
  filter: brightness(var(--mark-brightness));
  transition: width var(--t-control), filter var(--t-control);
}

/* Light exposure — the background behind the bulb warms as the pointer
   approaches. Homepage only: it is scoped to the overlay header, where the
   lockup sits on the dark hero and a warm bloom reads as light. On the linen
   header of every other page there is nothing for light to fall on, so the
   effect would just tint the paper — and it is suppressed there, including
   when the overlay header itself turns linen behind an open megamenu.

   Both layers sit at z-index -1, behind the artwork: the light falls on the
   background around the logo and never on the logo itself, so the mark's
   pixels are identical lit or unlit.

   Blur rather than gradient stops. Stacked stops on a flat ground produce
   visible contour rings that no amount of tuning removes; blur has no bands.

   Painted from the --flare-* palette, the same one the hero's lens flare
   uses, so the logo and the flare read as one light source. */
.site-header--overlay .brand__mark::before,
.site-header--overlay .brand__mark::after {
  content: '';
  position: absolute;
  left: 50%; top: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  opacity: var(--glow);
  transition: opacity 480ms cubic-bezier(.22, 1, .36, 1),
              transform 480ms cubic-bezier(.22, 1, .36, 1);
}

/* The bloom — wide enough to wash most of the header's height. */
.site-header--overlay .brand__mark::before {
  width: 1400%;
  background: radial-gradient(circle,
    rgba(var(--flare-warm), .16) 0%,
    rgba(var(--flare-amber), .07) 38%,
    rgba(var(--flare-amber), 0) 60%);
  filter: blur(46px);
  transform: translate(-50%, -50%) scale(calc(.78 + var(--glow) * .22));
}

/* The core — warmer and lighter, since light near its source reads closer to
   white than to amber. Keeps the bloom anchored to the bulb. */
.site-header--overlay .brand__mark::after {
  width: 520%;
  background: radial-gradient(circle,
    rgba(var(--flare-core), .30) 0%,
    rgba(var(--flare-warm), .11) 44%,
    rgba(var(--flare-amber), 0) 72%);
  filter: blur(22px);
  transform: translate(-50%, -50%) scale(calc(.86 + var(--glow) * .14));
}

/* Megamenu open — the header has turned linen, so the light goes out. */
.site-header--overlay.is-menu-open .brand__mark::before,
.site-header--overlay.is-menu-open .brand__mark::after { opacity: 0; }

/* Two words, stacked by default (the horizontal lockup) and set on one line
   in the centred lockup — flex rather than a <br> so both arrangements come
   from the same markup. */
.brand__word {
  display: flex;
  flex-direction: column;
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: .2em;
  line-height: 1.25;
  white-space: nowrap;
}

/* Stacked lockup — the header's centred variant: mark over a single-line
   wordmark. padding-left cancels the trailing letter-space so the word
   optically centres under the mark. */
.brand--stacked { flex-direction: column; gap: 9px; }
.brand--stacked .brand__mark { width: 50px; }
.brand--stacked .brand__word {
  flex-direction: row;
  gap: .34em;
  font-size: 13px;
  letter-spacing: .3em;
  line-height: 1;
  padding-left: .3em;
}

/* Never below 38px mark height, and never on photography without a plate.
   The mark is NOT recoloured or brightened for dark grounds — it renders in
   its true brand colours everywhere. (The prototype used brightness(1.75)
   here, which turned the olive sides yellow-green and the terracotta base
   yellow.) On the hero the scrim behind it, and the glow, do the separating. */
.brand--light { --mark-brightness: 1; }


/* --- Announcement marquee ------------------------------------------------ */

.marquee {
  background: #E8E3D9;
  color: var(--c-ink-mid);
  height: 44px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  border-top: 1px solid var(--c-line);
}
.marquee__track { display: flex; flex-shrink: 0; animation: lp-marquee 40s linear infinite; }
.marquee__group { display: flex; gap: 60px; padding-right: 60px; font-size: 13.5px; letter-spacing: .02em; }
.marquee__group em { font-style: normal; color: var(--c-clay-deep); }
.marquee:hover .marquee__track { animation-play-state: paused; }


/* --- Header --------------------------------------------------------------
   Two variants. Default: sticky, linen, blurred, hairline bottom.
   `.site-header--overlay`: transparent, sits inside a dark hero (home, LP).
   ------------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(250, 247, 241, .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-line);
}

/* Three tracks, the middle one auto — the logo sits on the page's centre line
   whatever the nav and utilities weigh. */
.site-header__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Padding, not just min-height, so the lockup never touches the viewport
     edge — it reads as clear space around the mark rather than a tight bar. */
  padding-block: 22px;
  min-height: 104px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-6);
}

.site-header__left  { justify-self: start; display: flex; align-items: center; min-width: 0; }
.site-header__brand { justify-self: center; }
.site-header__right { justify-self: end; display: flex; align-items: center; gap: 6px; }
/* the nav block keeps its own spacing from the icon cluster */
.site-header__right .site-nav { margin-right: 14px; }

.site-nav { display: flex; gap: 28px; }
/* static, not relative — the panel spans the full header, not this item */
.site-nav__item { position: static; }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  color: inherit;
  transition: border-color var(--t-control), color var(--t-control);
}
.site-nav__link:hover,
.site-nav__link[aria-expanded="true"],
.site-nav__link[aria-current="page"] { border-bottom-color: currentColor; color: inherit; }

.site-nav__chev { width: 9px; height: 6px; flex-shrink: 0; transition: transform var(--t-control); }
.site-nav__link[aria-expanded="true"] .site-nav__chev { transform: rotate(180deg); }


.site-header--overlay {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  background: none;
  backdrop-filter: none;
  border-bottom: 0;
  color: var(--c-paper);
  transition: background var(--t-control), color var(--t-control), border-color var(--t-control);
}
/* More air again over the hero, where there is no bar edge to sit against. */
.site-header--overlay .site-header__inner { min-height: 120px; padding-block: 34px 24px; }
.site-header--overlay .site-nav { text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }

/* When a megamenu opens over the hero the header solidifies, so the panel
   reads as one plate rather than floating on the photography. */
.site-header--overlay.is-menu-open {
  background: rgba(250, 247, 241, .97);
  backdrop-filter: blur(14px);
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
}
.site-header--overlay.is-menu-open .site-nav { text-shadow: none; }
.site-header--overlay.is-menu-open .brand--light { --mark-brightness: 1; }

/* --- Icon buttons --------------------------------------------------------
   Search, account and cart. Icons rather than words so the utilities take a
   third of the room and the centred lockup keeps its air. The accessible
   name lives on aria-label — the SVGs are decorative.
   ------------------------------------------------------------------------ */

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 0;
  background: none;
  border-radius: 50%;
  color: inherit;
  flex-shrink: 0;
  transition: background var(--t-control), color var(--t-control);
}
.icon-btn:hover { background: rgba(28, 33, 24, .07); color: var(--c-canopy); }
.icon-btn svg { width: 21px; height: 21px; display: block; }

.icon-btn__count {
  position: absolute;
  top: 1px; right: 0;
  min-width: 17px; height: 17px;
  padding-inline: 4px;
  border-radius: var(--r-pill);
  background: var(--c-spectrum);
  color: var(--c-ink);
  font-size: 10.5px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--c-linen);
}

/* On the hero the icons sit on photography, so they get a glass plate on
   hover and the badge rings itself in the dark rather than the linen. */
.site-header--overlay .icon-btn:hover { background: rgba(255, 253, 248, .18); color: var(--c-paper); }
.site-header--overlay .icon-btn__count { border-color: rgba(15, 18, 13, .55); }
.site-header--overlay.is-menu-open .icon-btn:hover { background: rgba(28, 33, 24, .07); color: var(--c-canopy); }
.site-header--overlay.is-menu-open .icon-btn__count { border-color: var(--c-linen); }

/* --- Megamenu ------------------------------------------------------------
   One full-bleed panel per nav item, absolutely positioned against the
   header so it spans the viewport rather than the trigger. Hidden with
   visibility (not display) so it can transition, and so it stays out of the
   tab order while closed.
   ------------------------------------------------------------------------ */

.megamenu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--c-linen);
  color: var(--c-ink);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 24px 46px rgba(28, 33, 24, .10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--t-control), transform var(--t-control), visibility var(--t-control);
}
.megamenu.is-open { opacity: 1; visibility: visible; transform: none; }

.megamenu__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 44px var(--gutter) 46px;
  display: grid;
  gap: 52px;
}
.megamenu--shop      .megamenu__inner { grid-template-columns: repeat(3, minmax(0, .82fr)) 1.5fr; }
.megamenu--product   .megamenu__inner { grid-template-columns: .9fr .75fr 1fr; align-items: start; }
.megamenu--simple    .megamenu__inner { grid-template-columns: 1fr; gap: 28px; }

.megamenu__col { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.megamenu__col .label { margin-bottom: 3px; }

.megamenu__link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15.5px;
  color: var(--c-ink-soft);
}
.megamenu__link:hover { color: var(--c-canopy); }
.megamenu__link em { font-style: normal; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--c-stone); }
.megamenu__link:hover em { color: var(--c-clay); }

/* Featured product pair inside the Shop panel */
.megamenu__feature { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.megamenu__card { display: flex; flex-direction: column; gap: 10px; }
.megamenu__card-media { border-radius: 12px; overflow: hidden; background: var(--c-sand); aspect-ratio: 4 / 3; }
.megamenu__card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.megamenu__card:hover .megamenu__card-media img { transform: scale(1.05); }
.megamenu__card-name { font-family: var(--f-display); font-size: 21px; letter-spacing: -.015em; color: var(--c-ink); }
.megamenu__card-meta { font-size: 13.5px; color: var(--c-ink-quiet); }

/* Product flyout */
.megamenu__hero-media { border-radius: 12px; overflow: hidden; background: var(--c-sand); aspect-ratio: 4 / 3; }
.megamenu__hero-media img { width: 100%; height: 100%; object-fit: cover; }
.megamenu__spec {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 14px; color: var(--c-ink-soft);
  border-bottom: 1px dashed var(--c-line);
  padding-bottom: 11px;
}
.megamenu__spec strong { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--c-ink); }

/* Accessory tiles */
.megamenu__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.megamenu__tile { display: flex; flex-direction: column; gap: 10px; }
.megamenu__tile-media { border-radius: 10px; overflow: hidden; background: var(--c-sand); aspect-ratio: 1; }
.megamenu__tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.megamenu__tile:hover .megamenu__tile-media img { transform: scale(1.05); }
.megamenu__tile-name { font-weight: 600; font-size: 15px; color: var(--c-ink); }
.megamenu__tile-price { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--c-stone); }

/* Promo strip along the bottom of every panel */
.megamenu__foot { border-top: 1px solid var(--c-line); background: var(--c-sand); }
.megamenu__foot-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 15px var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-6); flex-wrap: wrap;
  font-size: 13.5px; color: var(--c-ink-quiet);
}
.megamenu__foot-inner ul { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.megamenu__foot-inner li::before { content: '✓'; color: var(--c-moss); margin-right: 7px; }

/* Burger — hidden until the nav can no longer fit */
.burger { display: none; }


/* --- Mobile drawer nav --------------------------------------------------- */

.mobile-nav { position: fixed; inset: 0; z-index: var(--z-drawer); display: none; }
.mobile-nav.is-open { display: block; }
.mobile-nav__scrim {
  position: absolute; inset: 0;
  background: rgba(28, 33, 24, .44);
  backdrop-filter: blur(3px);
  animation: lp-in .3s ease-out;
}
.mobile-nav__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(360px, 86vw);
  background: var(--c-linen);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-2);
  box-shadow: var(--e-overlay);
  animation: lp-slide-in var(--t-drawer);
  overflow-y: auto;
}
.mobile-nav__link {
  font-family: var(--f-display);
  font-size: 26px;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-line);
}
.mobile-nav__sub { font-size: 15px; color: var(--c-ink-quiet); padding: 10px 0; }

/* Collapsible groups — the megamenu's content, folded. Native <details>,
   so it needs no JS and stays keyboard-operable. */
.mobile-nav__group { border-bottom: 1px solid var(--c-line); }
.mobile-nav__group > summary {
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-display); font-size: 26px;
  padding: var(--sp-3) 0;
}
.mobile-nav__group > summary::-webkit-details-marker { display: none; }
.mobile-nav__group > summary::after { content: '+'; color: var(--c-stone); font-size: 22px; }
.mobile-nav__group[open] > summary::after { content: '−'; }
.mobile-nav__group-links { display: flex; flex-direction: column; gap: 11px; padding: 2px 0 18px; }
.mobile-nav__group-links a { font-size: 15.5px; color: var(--c-ink-soft); display: flex; gap: 10px; align-items: baseline; }
.mobile-nav__group-links a:hover { color: var(--c-canopy); }
.mobile-nav__group-links em { font-style: normal; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--c-stone); }
.mobile-nav__utils { display: flex; gap: 22px; padding-top: var(--sp-6); font-size: 15px; }


/* --- Buttons -------------------------------------------------------------
   Pill radius 999px · 48–54px tall · 2px lift on hover · never a drop shadow.
   ------------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 17px 30px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--c-canopy);
  color: var(--c-cream);
  white-space: nowrap;
  transition: background var(--t-control), color var(--t-control),
              border-color var(--t-control), transform var(--t-control);
}
.btn:hover { background: var(--c-canopy-deep); color: var(--c-cream); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--c-canopy); border-color: var(--c-canopy); }
.btn--ghost:hover { background: var(--c-canopy); color: var(--c-cream); }

.btn--quiet { background: transparent; color: var(--c-canopy); border-color: var(--c-line-strong); }
.btn--quiet:hover { background: var(--c-canopy); color: var(--c-cream); border-color: var(--c-canopy); }

.btn--spectrum { background: var(--c-spectrum); color: var(--c-ink); font-weight: 700; }
.btn--spectrum:hover { background: var(--c-spectrum); color: var(--c-ink); }

.btn--paper { background: var(--c-paper); color: var(--c-ink); font-weight: 700; }
.btn--paper:hover { background: var(--c-paper); color: var(--c-ink); box-shadow: 0 12px 34px rgba(0, 0, 0, .32); }

.btn--glass {
  background: rgba(255, 253, 248, .12);
  backdrop-filter: blur(8px);
  color: var(--c-paper);
  border-color: rgba(255, 253, 248, .42);
}
.btn--glass:hover { background: rgba(255, 253, 248, .22); color: var(--c-paper); }

.btn--on-dark { background: transparent; color: var(--c-cream); border-color: rgba(246, 242, 233, .4); }
.btn--on-dark:hover { background: rgba(246, 242, 233, .1); color: var(--c-cream); }

.btn--lg { padding: 19px 40px; font-size: 17px; }
.btn--sm { padding: 11px 18px; font-size: 14px; }
.btn--block { width: 100%; }

.btn[disabled], .btn.is-disabled {
  background: transparent; color: var(--c-stone);
  border-color: var(--c-line); cursor: not-allowed; transform: none;
}

/* Text link with the brand's underline treatment */
.link-underline {
  font-size: 15px; font-weight: 600;
  border-bottom: 1px solid var(--c-line-strong);
  padding-bottom: 3px;
}
.link-underline--spectrum { color: var(--c-spectrum); border-bottom-color: rgba(232, 163, 61, .4); }
.link-underline--spectrum:hover { color: var(--c-spectrum); }


/* --- Badges & pills ------------------------------------------------------ */

.badge {
  display: inline-flex; align-items: center;
  font-family: var(--f-label); font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--c-sand);
  color: var(--c-ink-quiet);
  white-space: nowrap;
}
.badge--canopy   { background: var(--c-canopy);   color: var(--c-cream); }
.badge--clay     { background: var(--c-clay);     color: var(--c-linen); }
.badge--halo     { background: var(--c-halo);     color: var(--c-clay-deep); }
.badge--moss     { background: var(--c-moss);     color: var(--c-cream); }
.badge--spectrum { background: var(--c-spectrum); color: var(--c-ink); }
.badge--outline  { background: transparent; border: 1px solid var(--c-line); color: var(--c-ink-quiet); }

.eyebrow-pill {
  display: inline-block;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 9px 20px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-ink-mid);
}

.stars { color: var(--c-spectrum); letter-spacing: 2px; line-height: 1; }


/* --- Trust strip --------------------------------------------------------- */

.trust-strip { background: var(--c-sand); border-bottom: 1px solid var(--c-line); }
.trust-strip__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 22px var(--gutter);
  display: flex; justify-content: space-between; gap: var(--sp-6);
  flex-wrap: wrap; font-size: 14px; color: var(--c-ink-soft);
}
.trust-strip__item { display: flex; align-items: center; gap: 9px; }
.trust-strip__item::before { content: '✓'; color: var(--c-moss); }


/* --- Cards --------------------------------------------------------------- */

.card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
}
.card--sand { background: var(--c-sand); border-color: transparent; }
.card--canopy { background: var(--c-canopy); color: var(--c-cream); border-color: var(--c-canopy); }
.card--lift { transition: transform var(--t-control), box-shadow var(--t-control); }
.card--lift:hover { transform: translateY(-5px); box-shadow: var(--e-overlay); }


/* --- Product card -------------------------------------------------------- */

.product-card { display: flex; flex-direction: column; gap: 12px; }

.product-card__media {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-sand);
  aspect-ratio: 4 / 5;
}
.product-card__media--square { aspect-ratio: 1; }
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.product-card__media:hover img { transform: scale(1.05); }
.product-card__media .badge { position: absolute; top: 14px; left: 14px; }

.product-card__cat { font-family: var(--f-label); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-stone); }
.product-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.product-card__name { font-family: var(--f-display); font-size: 24px; letter-spacing: -.015em; color: var(--c-ink); }
.product-card__name:hover { color: var(--c-canopy); }
.product-card__price { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 15px; }
.product-card__price s { color: var(--c-stone); margin-right: 6px; }
.product-card__blurb { font-size: 14.5px; color: var(--c-ink-quiet); line-height: 1.55; }
.product-card .btn { margin-top: auto; }

/* Compact variant — cross-sell rails, drawer, checkout summary */
.product-card--compact .product-card__name { font-family: var(--f-ui); font-size: 16px; font-weight: 600; }
.product-card--compact .product-card__price { font-size: 14px; }


/* --- Forms --------------------------------------------------------------- */

.input {
  font-family: var(--f-ui);
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  border-radius: 8px;
  font-size: 15px;
  color: var(--c-ink);
  outline: none;
  transition: border-color var(--t-control), box-shadow var(--t-control);
}
.input::placeholder { color: var(--c-stone); }
.input:focus { border-color: var(--c-spectrum); box-shadow: 0 0 0 3px rgba(232, 163, 61, .22); }
.input--pill { border-radius: var(--r-pill); padding: 17px 20px; }
.input--mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; background: var(--c-linen); }

.input--on-dark {
  border-color: rgba(246, 242, 233, .3);
  background: rgba(246, 242, 233, .07);
  color: var(--c-cream);
}
.input--on-dark::placeholder { color: rgba(246, 242, 233, .5); }
.input--on-dark:focus { border-color: var(--c-spectrum); box-shadow: none; }

.select {
  font-family: var(--f-ui);
  padding: 11px 16px;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  border-radius: var(--r-pill);
  font-size: 14px;
  outline: none;
}

.form-note { font-size: 14px; min-height: 20px; }
.form-note--ok  { color: var(--c-moss); }
.form-note--err { color: var(--c-clay); }
.band--canopy .form-note--ok  { color: #8FBF95; }
.band--canopy .form-note--err { color: #E39A7B; }


/* --- Quantity stepper ---------------------------------------------------- */

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-paper);
}
.stepper button {
  border: none; background: none;
  padding: 14px 18px;
  font-size: 17px; line-height: 1;
  color: var(--c-canopy);
}
.stepper button:hover { color: var(--c-canopy-deep); }
.stepper__value { font-weight: 600; font-size: 15px; min-width: 20px; text-align: center; }

.stepper--sm button { padding: 7px 13px; font-size: 15px; }
.stepper--sm .stepper__value { font-size: 14px; min-width: 16px; }

.stepper--lg { border-color: var(--c-line-strong); background: var(--c-linen); }
.stepper--lg button { padding: 16px 22px; font-size: 20px; }
.stepper--lg .stepper__value { font-family: var(--f-display); font-size: 30px; min-width: 34px; }


/* --- Swatches & option tiles --------------------------------------------- */

.swatches { display: flex; gap: 11px; }
.swatch {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(28, 33, 24, .12);
  transition: transform var(--t-control), border-color var(--t-control);
}
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] { border-color: var(--c-ink); }

.option-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.option-tile {
  text-align: center;
  padding: 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-paper);
  font-size: 14.5px; font-weight: 600;
  transition: border-color var(--t-control);
}
.option-tile span { display: block; font-weight: 400; font-size: 13px; color: var(--c-stone); padding-top: 3px; }
.option-tile[aria-pressed="true"] { border-color: var(--c-canopy); }


/* --- Accordion ----------------------------------------------------------- */

.accordion { border-top: 1px solid var(--c-line); }
.accordion__item { border-bottom: 1px solid var(--c-line); }
.accordion__trigger {
  width: 100%;
  background: none; border: 0;
  padding: 20px 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6);
  text-align: left;
  font-size: 16.5px; font-weight: 600;
  color: inherit;
}
.accordion__trigger::after { content: '+'; color: var(--c-stone); font-size: 19px; flex-shrink: 0; }
.accordion__trigger[aria-expanded="true"]::after { content: '−'; }
.accordion__panel {
  padding-bottom: 22px;
  font-size: 15.5px; line-height: 1.72;
  color: var(--c-ink-soft);
  max-width: 60ch;
  animation: lp-in .3s ease-out;
}
.accordion__panel[hidden] { display: none; }

/* Editorial scale — FAQ page */
.accordion--display .accordion__trigger { font-family: var(--f-display); font-size: clamp(20px, 2.2vw, 26px); font-weight: 400; letter-spacing: -.015em; padding: 26px 0; }
.accordion--display .accordion__trigger::after { font-size: 22px; }
.accordion--display .accordion__panel { font-size: 17px; padding-bottom: 28px; }


/* --- Progress bars ------------------------------------------------------- */

.meter { height: 7px; background: #DDD4C4; border-radius: var(--r-pill); overflow: hidden; }
.meter__fill { height: 100%; background: var(--c-moss); border-radius: var(--r-pill); transition: width .45s cubic-bezier(.16, 1, .3, 1); }
.meter--line { background: var(--c-line); }
.meter--spectrum .meter__fill { background: var(--c-spectrum); }
.meter--thick { height: 9px; }
.meter--on-dark { background: rgba(246, 242, 233, .18); height: 4px; }
.meter--on-dark .meter__fill { background: var(--c-spectrum); }


/* --- Cart drawer --------------------------------------------------------- */

.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); display: none; }
.drawer.is-open { display: block; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(28, 33, 24, .44);
  backdrop-filter: blur(3px);
  animation: lp-in .3s ease-out;
  border: 0; padding: 0; width: 100%;
}
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 452px; max-width: 94vw;
  background: var(--c-linen);
  display: flex; flex-direction: column;
  box-shadow: -24px 0 60px rgba(28, 33, 24, .22);
  animation: lp-slide-in var(--t-drawer);
}
.drawer__head {
  padding: 24px 28px;
  border-bottom: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer__title { font-family: var(--f-display); font-size: 25px; }
.drawer__title span { color: var(--c-stone); font-size: 18px; }
.drawer__close { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--c-stone); padding: 4px 8px; }
.drawer__close:hover { color: var(--c-ink); }
.drawer__ship { padding: 18px 28px; background: var(--c-sand); border-bottom: 1px solid var(--c-line); }
.drawer__ship p { font-size: 13.5px; color: var(--c-ink-soft); margin-bottom: 9px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 28px; }
.drawer__foot { padding: 22px 28px; border-top: 1px solid var(--c-line); background: var(--c-paper); }

.summary-row { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--c-ink-quiet); margin-bottom: 7px; }
.summary-row span:last-child { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.summary-row--discount { color: var(--c-clay); }
.summary-row--total {
  align-items: baseline;
  padding-top: 9px; margin-bottom: 16px;
  border-top: 1px solid var(--c-line);
  color: var(--c-ink);
}
.summary-row--total span:first-child { font-weight: 600; font-size: 16px; }
.summary-row--total span:last-child { font-family: var(--f-display); font-size: 29px; }
.drawer__fine { text-align: center; margin-top: 11px; font-size: 13px; color: var(--c-stone); }


/* --- Cart line ----------------------------------------------------------- */

.cart-line { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--c-line); }
.cart-line__img { width: 80px; height: 88px; object-fit: cover; border-radius: 8px; background: var(--c-sand); flex-shrink: 0; }
.cart-line__body { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cart-line__top { display: flex; justify-content: space-between; gap: 10px; }
.cart-line__name { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.cart-line__total { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 14px; }
.cart-line__variant { font-size: 13.5px; color: var(--c-stone); }
.cart-line__note { font-size: 13.5px; color: var(--c-moss); }
.cart-line__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5, 20px); margin-top: auto; padding-top: 6px; }
.cart-line__remove { background: none; border: 0; font-size: 13px; color: var(--c-stone); border-bottom: 1px solid #DDD4C4; padding: 0; }
.cart-line__remove:hover { color: var(--c-clay); }

/* Roomier on the full cart page */
.cart-line--page { gap: 24px; padding: 26px 0; }
.cart-line--page .cart-line__img { width: 130px; height: 150px; border-radius: var(--r-md); }
.cart-line--page .cart-line__name { font-family: var(--f-display); font-weight: 400; font-size: 26px; }
.cart-line--page .cart-line__total { font-size: 16px; }
.cart-line--page .cart-line__variant { font-size: 14.5px; }


/* --- Upsell rail (in drawer) --------------------------------------------- */

.upsell-rail { padding: 24px 0 8px; }
.upsell-rail__list { display: flex; flex-direction: column; gap: 10px; }
.upsell {
  display: flex; align-items: center; gap: 13px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 11px;
  background: var(--c-paper);
  transition: border-color var(--t-control);
}
.upsell:hover { border-color: var(--c-line-strong); }
.upsell img { width: 50px; height: 50px; object-fit: cover; border-radius: 7px; background: var(--c-sand); }
.upsell__body { flex: 1; min-width: 0; }
.upsell__name { font-weight: 600; font-size: 14px; }
.upsell__price { font-size: 13px; color: var(--c-stone); }


/* --- Empty state --------------------------------------------------------- */

.empty {
  border: 1px dashed var(--c-line-strong);
  border-radius: 14px;
  padding: clamp(40px, 6vw, 72px);
  text-align: center;
}
.empty__title { font-family: var(--f-display); font-size: 26px; font-style: italic; color: var(--c-stone); margin-bottom: 10px; }
.empty p { font-size: 15px; color: var(--c-ink-quiet); margin-bottom: 24px; }


/* --- Modals -------------------------------------------------------------- */

.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--sp-6); }
.modal.is-open { display: flex; }
.modal__scrim { position: absolute; inset: 0; background: rgba(28, 33, 24, .5); backdrop-filter: blur(4px); border: 0; width: 100%; }
.modal__dialog {
  position: relative;
  background: var(--c-linen);
  border-radius: var(--r-lg);
  max-width: 560px; width: 100%;
  overflow: hidden;
  box-shadow: var(--e-modal);
  animation: lp-in .35s cubic-bezier(.16, 1, .3, 1);
}
.modal__head {
  background: var(--c-canopy); color: var(--c-cream);
  padding: 22px 30px;
  display: flex; justify-content: space-between; align-items: center;
}
.modal__body { padding: 34px 30px; }
.modal__close { background: none; border: 0; font-size: 20px; line-height: 1; color: inherit; }

.modal--exit .modal__dialog {
  max-width: 620px;
  background: var(--c-canopy); color: var(--c-cream);
  display: grid; grid-template-columns: 1fr 1fr;
}
.modal--exit img { width: 100%; height: 100%; object-fit: cover; }
.modal--exit .modal__body { padding: 38px 32px; position: relative; }
.modal--exit .modal__close { position: absolute; top: 14px; right: 18px; color: var(--c-cream-60); }

.offer-item {
  display: flex; gap: 16px; align-items: center;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 16px;
  background: var(--c-paper);
  margin-bottom: 24px;
}
.offer-item img { width: 70px; height: 70px; object-fit: contain; background: var(--c-sand); border-radius: 8px; }
.offer-item__price { padding-top: 6px; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 14px; }
.offer-item__price strong { color: var(--c-clay); font-weight: 500; }
.offer-item__price s { color: var(--c-stone); }


/* --- Toast --------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%; bottom: 96px;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  background: var(--c-ink); color: var(--c-cream);
  padding: 13px 24px;
  border-radius: var(--r-pill);
  font-size: 14.5px; font-weight: 500;
  box-shadow: 0 14px 40px rgba(28, 33, 24, .3);
  display: none;
  align-items: center; gap: 10px;
}
.toast.is-open { display: flex; animation: lp-in .3s ease-out; }
.toast::before { content: '●'; color: var(--c-spectrum); }


/* --- Sticky add-to-cart bar ---------------------------------------------- */

.sticky-atc {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  background: rgba(28, 33, 24, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-cream-16);
  transform: translateY(110%);
  transition: transform var(--t-drawer);
}
.sticky-atc.is-visible { transform: none; }
.sticky-atc__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
  color: var(--c-cream);
}
.sticky-atc__product { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sticky-atc__product img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--c-sand); }
.sticky-atc__name { font-weight: 600; font-size: 15px; }
.sticky-atc__sub { font-size: 13px; color: rgba(246, 242, 233, .55); }
.sticky-atc__right { display: flex; align-items: center; gap: 18px; }
.sticky-atc__timer { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--c-spectrum); letter-spacing: .12em; }
.sticky-atc__price { font-family: var(--f-display); font-size: 26px; }


/* --- Footer -------------------------------------------------------------- */

.site-footer { background: var(--c-ink); color: var(--c-cream); padding: 82px 0 34px; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--sp-12);
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(246, 242, 233, .14);
}
.site-footer__blurb { font-size: 15.5px; line-height: 1.7; color: rgba(246, 242, 233, .58); max-width: 320px; }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__col .label { color: var(--c-spectrum); margin-bottom: 6px; }
.site-footer__col a { font-size: 15px; color: rgba(246, 242, 233, .66); }
.site-footer__col a:hover { color: var(--c-cream); }
.site-footer__policies {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  padding-top: 26px;
  font-size: 13.5px;
}
.site-footer__policies a { color: var(--c-cream-60); }
.site-footer__policies a:hover { color: var(--c-cream); }

.site-footer__legal {
  padding-top: 18px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4);
  font-size: 13.5px; color: var(--c-cream-42);
}
.site-footer__legal a {
  color: var(--c-cream-60);
  border-bottom: 1px solid rgba(246, 242, 233, .22);
  padding-bottom: 1px;
}
.site-footer__legal a:hover { color: var(--c-cream); border-bottom-color: var(--c-spectrum); }
.site-footer .brand { margin-bottom: 18px; }
.site-footer .brand__mark { width: 42px; }
.site-footer .brand__word { font-size: 21px; }


/* --- Responsive ---------------------------------------------------------- */

/* The centred lockup needs more room than the old left-aligned one, so the
   burger arrives earlier. Below this the megamenu is never built. */
@media (max-width: 1180px) {
  .site-nav { display: none; }
  .megamenu { display: none; }
  .burger { display: block; }
  /* Two tracks now: logo left, utilities right. */
  .site-header__inner { grid-template-columns: auto 1fr; min-height: 84px; padding-block: 16px; }
  .site-header--overlay .site-header__inner { min-height: 92px; padding-block: 22px 18px; }
  .site-header__brand { justify-self: start; grid-column: 1; }
  .site-header__right { grid-column: 2; }
  .site-header__left { display: none; }
  .brand--stacked { flex-direction: row; gap: 11px; }
  .brand--stacked .brand__word {
    flex-direction: column; gap: 0;
    font-size: 14px; letter-spacing: .2em; line-height: 1.25; padding-left: 0;
  }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}

@media (max-width: 700px) {
  .marquee__group { gap: 34px; padding-right: 34px; font-size: 12.5px; }
  .brand__word, .brand--stacked .brand__word { font-size: 12.5px; }
  .brand__mark, .brand--stacked .brand__mark { width: 36px; }
  .site-header__right { gap: 4px; }
  .site-footer { padding-top: 56px; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .modal--exit .modal__dialog { grid-template-columns: 1fr; }
  .modal--exit img { display: none; }
  .sticky-atc__product { display: none; }
  .sticky-atc__inner { justify-content: center; }
  .sticky-atc__timer { display: none; }
  .toast { bottom: 120px; width: max-content; max-width: 90vw; }
  .cart-line--page .cart-line__img { width: 92px; height: 106px; }
  .cart-line--page .cart-line__name { font-size: 21px; }
  .option-tiles { gap: 8px; }
}