/* ==========================================================================
   Page sections — blocks that belong to one template rather than the
   global component set. Grouped by page, in build order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HOME
   -------------------------------------------------------------------------- */

/* hero-split-parallax */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: #161A13;
  /* Inline padding lines the copy up with the page column (.wrap) on wide
     screens; it used to sit a gutter from the screen edge, far left of the
     logo and every section below. */
  padding: 160px max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))) 84px;
  color: var(--c-paper);
}
.hero__media {
  position: absolute;
  inset: -13% 0;
  height: 126%;
  will-change: transform;
}
.hero__media img,
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The still only shows when the video cannot: reduced motion, or a browser
   that plays neither source. Both layers are stacked, video on top. */
.hero__still { position: absolute; inset: 0; }
.hero__video { position: relative; z-index: 1; }

/* An image hero keeps the slow Ken Burns push; the film supplies its own. */
.hero__media > img:only-child { animation: lp-kenburns 26s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(15, 18, 13, .62) 0%,
    rgba(15, 18, 13, .18) 34%,
    rgba(15, 18, 13, .28) 62%,
    rgba(15, 18, 13, .78) 100%);
}
/* --- Parallax --------------------------------------------------------------
   A layer marked [data-parallax] is taller than its frame; ui.js slides it
   within that slack. The overscan here *is* the strength of the effect —
   more slack, more travel — and because the JS derives its range from the
   rendered sizes, the layer can never slide far enough to show its edge.
   -------------------------------------------------------------------------- */

.parallax-frame { position: relative; overflow: hidden; }
.parallax-frame > [data-parallax] {
  position: absolute;
  inset: -12% 0;
  height: 124%;
  width: 100%;
  will-change: transform;
}
.parallax-frame > [data-parallax] img,
.parallax-frame > [data-parallax] video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Full-bleed band: an image that holds still while the copy scrolls over it. */
.parallax-band {
  position: relative;
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-cream);
  isolation: isolate;
}
.parallax-band__media {
  position: absolute;
  inset: -16% 0;
  height: 132%;
  width: 100%;
  will-change: transform;
  z-index: 0;
}
.parallax-band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.parallax-band__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(15, 18, 13, .74) 0%,
    rgba(15, 18, 13, .52) 45%,
    rgba(15, 18, 13, .78) 100%);
}
.parallax-band__inner { position: relative; z-index: 2; }
.parallax-band .label { color: var(--c-spectrum); }

/* A quiet full-width quote over photography — the band's usual payload. */
.band-quote {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.18;
  letter-spacing: -.025em;
  max-width: 20ch;
}
.band-quote em { font-style: italic; color: var(--c-spectrum); }

/* --- Hero lens flare -----------------------------------------------------
   --fx/--fy are the light's position inside the hero (written by ui.js, and
   eased toward the cursor a frame at a time so it carries some weight);
   --cx/--cy are the pivot: the logo mark, because in this brand the lockup is
   the light source. Every piece places itself with transform
   only, so the whole thing stays on the compositor.
   ------------------------------------------------------------------------ */
.hero__flare {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms cubic-bezier(.22, 1, .36, 1);
  /* screen blending is what stops it looking like pasted-on white shapes */
  mix-blend-mode: screen;
  --fx: 50%; --fy: 40%;
  --cx: 50%; --cy: 50%;
}
.hero__flare.is-lit { opacity: 1; }

.hero__flare > * {
  position: absolute;
  left: 0; top: 0;
  border-radius: 50%;
  will-change: transform;
}

/* The ghosts — reflections between lens elements, strung along the axis. */
.hero__flare-ghost {
  width: var(--d);
  height: var(--d);
  background: radial-gradient(circle,
    rgba(var(--c), var(--a)) 0%,
    rgba(var(--c), calc(var(--a) * .55)) 55%,
    rgba(var(--c), 0) 72%);
  filter: blur(1px);
  transform: translate(
    calc(var(--cx) + (var(--fx) - var(--cx)) * var(--t) - 50%),
    calc(var(--cy) + (var(--fy) - var(--cy)) * var(--t) - 50%));
}

/* The iris ring around the source. */
.hero__flare-halo {
  width: 460px; height: 460px;
  background: radial-gradient(circle,
    rgba(var(--flare-warm), 0) 52%,
    rgba(var(--flare-warm), .055) 61%,
    rgba(var(--flare-amber), .035) 66%,
    rgba(var(--flare-warm), 0) 74%);
  transform: translate(calc(var(--fx) - 50%), calc(var(--fy) - 50%));
}

/* The anamorphic streak — horizontal, and the widest thing on screen. */
.hero__flare-streak {
  width: 1100px; height: 3px;
  border-radius: 0;
  background: linear-gradient(90deg,
    rgba(var(--flare-warm), 0) 0%,
    rgba(var(--flare-warm), .16) 34%,
    rgba(var(--flare-core), .5) 50%,
    rgba(var(--flare-warm), .16) 66%,
    rgba(var(--flare-warm), 0) 100%);
  filter: blur(2.5px);
  transform: translate(calc(var(--fx) - 50%), calc(var(--fy) - 50%));
}

/* The source itself. */
.hero__flare-core {
  width: 200px; height: 200px;
  background: radial-gradient(circle,
    rgba(var(--flare-core), .5) 0%,
    rgba(var(--flare-warm), .18) 22%,
    rgba(var(--flare-amber), .06) 44%,
    rgba(var(--flare-amber), 0) 70%);
  filter: blur(4px);
  transform: translate(calc(var(--fx) - 50%), calc(var(--fy) - 50%));
}

/* An optical effect is exactly the kind of motion to drop on request — and
   there is no cursor to track on touch, so it is not built there either. */
@media (prefers-reduced-motion: reduce) { .hero__flare { display: none; } }
@media (hover: none) { .hero__flare { display: none; } }

.hero__inner { position: relative; z-index: 10; max-width: 760px; display: flex; flex-direction: column; gap: 20px; }
.hero__title { font-size: var(--t-display-xl); font-weight: 400; line-height: 1; letter-spacing: -.028em; text-shadow: 0 2px 40px rgba(0, 0, 0, .45); }
.hero__sub { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: rgba(255, 253, 248, .88); max-width: 460px; text-shadow: 0 1px 20px rgba(0, 0, 0, .5); }
/* Two buttons, always the same width: side by side, sized to the wider
   one, and stacked at full width on a phone (review #11). The down-sell is
   the glass button, the same pairing as the final CTA. .btn-pair is the
   same rule for any other pair (the Grow Shade section). */
.hero__cta, .final-cta__actions, .btn-pair {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 12px; justify-self: start; align-self: start;
}
@media (max-width: 700px) {
  .hero__cta, .final-cta__actions, .btn-pair { display: grid; grid-auto-flow: row; justify-self: stretch; align-self: stretch; }
}
.hero__cta { margin-top: 12px; }
.hero__scroll {
  display: flex; align-items: center; gap: 14px; margin-top: 26px;
  font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255, 253, 248, .62);
}
.hero__scroll::before { content: ''; width: 46px; height: 1px; background: rgba(255, 253, 248, .5); }

/* proof-bars — "not all lights are equal".
   Only the figure gets the figure treatment; the row's name is body copy.
   (It used to be `.proof__row span`, which caught the name too and left the
   first row — marked up with <strong> — inconsistent with the other two.) */
.proof { display: flex; flex-direction: column; gap: 16px; max-width: 440px; }
.proof__row { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: 13.5px; margin-bottom: 7px; }
.proof__row strong { font-weight: 600; }
.proof__row b { font-weight: 400; }
.proof__row .proof__value {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-stone);
  white-space: nowrap;
}

/* --- Light toggle --------------------------------------------------------
   Two frames of the same corner stacked and cross-faded, with a warm pool of
   light on top. The pool is what actually reads as "the lamp is on" — a
   straight cross-fade between two photographs looks like a photo swap, not
   like a light coming up.
   ------------------------------------------------------------------------ */

.lamp-demo { display: flex; flex-direction: column; gap: 20px; }

.lamp-demo__stage {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-ink);
  aspect-ratio: 4 / 5;
  isolation: isolate;
}
.lamp-demo__shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.lamp-demo__shot--on {
  z-index: 1;
  opacity: 1;
  transition: opacity 900ms cubic-bezier(.22, 1, .36, 1);
}
.lamp-demo.is-off .lamp-demo__shot--on { opacity: 0; }

/* The pool sits over the lit frame, centred on the shade. */
.lamp-demo__pool {
  position: absolute;
  z-index: 2;
  left: 46%; top: 26%;
  width: 92%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgba(var(--flare-core), .30) 0%,
    rgba(var(--flare-warm), .16) 26%,
    rgba(var(--flare-amber), .07) 48%,
    rgba(var(--flare-amber), 0) 70%);
  filter: blur(18px);
  opacity: 1;
  transition: opacity 900ms cubic-bezier(.22, 1, .36, 1);
}
.lamp-demo.is-off .lamp-demo__pool { opacity: 0; }
/* The shade sits higher and further left in the finish shot. */
.lamp-demo__pool--high { left: 30%; top: 18%; width: 76%; }

/* The switch itself — a real button, so it is focusable and announces state. */
.lamp-switch {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 6px 2px;
  color: inherit;
  text-align: left;
}
.lamp-switch__track {
  position: relative;
  width: 58px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--c-spectrum);
  flex-shrink: 0;
  transition: background var(--t-control);
}
.lamp-switch__knob {
  position: absolute;
  top: 4px; left: 4px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-paper);
  box-shadow: 0 1px 3px rgba(28, 33, 24, .28);
  transition: transform var(--t-control);
}
.lamp-switch[aria-pressed="true"] .lamp-switch__knob { transform: translateX(26px); }
.lamp-switch[aria-pressed="false"] .lamp-switch__track { background: var(--c-line-strong); }

/* While the lamp demonstrates itself, draw the eye to the control that did
   it — otherwise the room just changes and nobody knows why. */
.lamp-demo.is-demoing .lamp-switch__track {
  box-shadow: 0 0 0 0 rgba(232, 163, 61, .55);
  animation: lp-switch-pulse 1.5s ease-out 2;
}
@keyframes lp-switch-pulse {
  from { box-shadow: 0 0 0 0 rgba(232, 163, 61, .5); }
  to   { box-shadow: 0 0 0 14px rgba(232, 163, 61, 0); }
}

.lamp-switch__label { display: flex; flex-direction: column; gap: 2px; }
.lamp-switch__state { font-size: 15.5px; font-weight: 600; }
.lamp-switch__hint { font-size: 13.5px; color: var(--c-ink-quiet); }

/* No cross-fade for reduced motion — it still switches, just instantly. */
@media (prefers-reduced-motion: reduce) {
  .lamp-demo__shot--on, .lamp-demo__pool { transition: none; }
}

/* image-triptych — staggered on desktop, flat on mobile */
.triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.triptych__item { display: flex; flex-direction: column; gap: 20px; }
.triptych__item:nth-child(2) { padding-top: 38px; }
.triptych__media { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--c-canopy-deep); }
/* --focus: the figure's "Crop position" setting. The frame is a tall portrait,
   so a landscape photo keeps under half its width; centred, that cut the lamp
   out of the second photo (review #2, 30 Sep). */
.triptych__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50%) 50%; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.triptych__item:hover .triptych__media img { transform: scale(1.05); }
.triptych__caption { font-family: var(--f-display); font-size: 26px; line-height: 1.25; }
.triptych__caption em { font-style: italic; color: var(--c-spectrum); }

/* variant-selector-height — one frame, three positions (review #6).
   The new shot fades in over the old one, which stays fully opaque beneath
   it, so the room never dims mid-change and only the arm appears to move.
   `--at` (0 → 1) drives the gauge's knob and fill. */
.height-show {
  --at: 0;
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 420px);
  justify-content: center; align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.height-show__stage {
  position: relative;
  aspect-ratio: 1122 / 1402;
  border-radius: 14px;
  overflow: hidden;
  background: var(--c-sand);
  touch-action: pan-y;               /* horizontal swipes come to us */
  user-select: none; -webkit-user-select: none;
}
.height-show__shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  -webkit-user-drag: none;
}
.height-show__shot.is-prev   { opacity: 1; z-index: 1; }
.height-show__shot.is-active { opacity: 1; z-index: 2; transition: opacity 1s cubic-bezier(.22, 1, .36, 1); }

.height-show__panel { display: flex; flex-direction: column; gap: 30px; }
.height-show__count { color: var(--c-stone); }
.height-show__name {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: clamp(34px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -.015em;
}
.height-show__for { margin-top: 12px; font-size: 17px; color: var(--c-ink-quiet); }
.height-show__text.is-swapping { animation: lp-in .5s cubic-bezier(.22, 1, .36, 1); }

/* The gauge: one stop per position, spaced evenly because 30 / 105 / 180
   are. The track runs between the stops' centres. */
.height-show__rail {
  --stop: 64px;
  position: relative;
  display: flex; justify-content: space-between;
}
.height-show__rail::before,
.height-show__fill {
  content: '';
  position: absolute; top: 8px; left: calc(var(--stop) / 2);
  height: 2px; border-radius: 2px;
}
.height-show__rail::before { right: calc(var(--stop) / 2); background: var(--c-line-strong); }
.height-show__fill {
  width: calc((100% - var(--stop)) * var(--at));
  background: var(--c-spectrum);
  transition: width .9s cubic-bezier(.22, 1, .36, 1);
}
.height-show__knob {
  position: absolute; top: 0; z-index: 1;
  left: calc(var(--stop) / 2 - 9px + (100% - var(--stop)) * var(--at));
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c-spectrum);
  box-shadow: 0 0 0 6px rgba(232, 163, 61, .2);
  pointer-events: none;
  transition: left .9s cubic-bezier(.22, 1, .36, 1);
}
.height-show__stop {
  position: relative;
  width: var(--stop);
  padding: 30px 0 4px;
  background: none; border: 0;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 14px;
  color: var(--c-stone);
  transition: color var(--t-control);
}
.height-show__stop::before {
  content: '';
  position: absolute; top: 2px; left: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  transform: translateX(-50%);
  background: var(--c-linen);
  border: 2px solid var(--c-line-strong);
}
.height-show__stop:hover { color: var(--c-ink); }
.height-show__stop[aria-pressed="true"] { color: var(--c-ink); font-weight: 600; }

.height-show__controls { display: flex; gap: 10px; }
.height-show__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  background: none; color: var(--c-ink);
  transition: background var(--t-control), border-color var(--t-control);
}
.height-show__btn:hover { background: var(--c-sand); border-color: var(--c-canopy); }
.height-show__btn svg { width: 20px; height: 20px; }
.height-show__btn--play { margin-left: auto; border-color: transparent; }
.height-show__icon-play,
.height-show.is-paused .height-show__icon-pause { display: none; }
.height-show.is-paused .height-show__icon-play { display: block; }

@media (prefers-reduced-motion: reduce) {
  .height-show__shot.is-active, .height-show__fill, .height-show__knob { transition: none; }
  .height-show__text.is-swapping { animation: none; }
}

/* v1's quantity-break tiers and founder countdown pill stood here. Brief B
   holds one price with no time limit, so both are gone. */

/* two-column split — media one side, copy the other */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.split--wide-right { grid-template-columns: .9fr 1.1fr; }
.split--wide-left  { grid-template-columns: 1.15fr .85fr; }
.split__media { border-radius: 14px; overflow: hidden; background: var(--c-sand); }
.split__media--pad { padding: 36px; display: flex; align-items: center; justify-content: center; }

/* review-cards on dark */
.review-card {
  background: rgba(246, 242, 233, .055);
  border: 1px solid rgba(246, 242, 233, .12);
  border-radius: 12px;
  padding: 30px;
  display: flex; flex-direction: column; gap: 16px;
  transition: background var(--t-control);
}
.review-card:hover { background: rgba(246, 242, 233, .09); }
.review-card__quote { font-family: var(--f-display); font-size: 22px; line-height: 1.42; letter-spacing: -.01em; }
.review-card__who { margin-top: auto; padding-top: 12px; font-size: 14px; color: rgba(246, 242, 233, .55); }

/* final-cta — "TRANSFORM YOUR HOME INTO A LIVING, GREEN SPACE".
   This is v1's waitlist panel with the email capture taken out and the
   deck's closing CTA put in: same canopy panel, same cursor-following glow,
   which was the part worth keeping. */
.final-cta {
  background: var(--c-canopy);
  border-radius: 18px;
  padding: clamp(36px, 5vw, 74px);
  display: grid; grid-template-columns: 1fr .9fr; gap: 60px; align-items: center;
  position: relative; overflow: hidden;
  color: var(--c-cream);
}
.final-cta__glow {
  position: absolute; bottom: -300px; left: -140px;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 163, 61, .34) 0%, rgba(232, 163, 61, 0) 66%);
  animation: lp-glow 7s ease-in-out infinite;
  pointer-events: none;
  /* --gx/--gy are written by ui.js so the light tracks the cursor across the
     panel. They offset from the resting position above, so with no JS the
     glow simply stays where the CSS put it. */
  transform: translate(var(--gx, 0px), var(--gy, 0px));
  transition: transform var(--glow-move);
}
/* Lift the real content above the glow — but never restyle the glow itself,
   which must stay out of flow or it becomes a 640px grid item. */
.final-cta > :not(.final-cta__glow) { position: relative; }

/* Following the cursor is quick; drifting home is not. On pointerleave the
   panel gets data-glow-resting and the same transform takes five times as
   long on an ease-in-out — the light settles back rather than snapping. */
[data-glow] { --glow-move: 550ms cubic-bezier(.22, 1, .36, 1); }
[data-glow-follow][data-glow-resting] [data-glow] { --glow-move: 2800ms cubic-bezier(.4, 0, .2, 1); }

/* lifestyle-mosaic */
.mosaic { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; height: 520px; }
.mosaic > div { border-radius: 14px; overflow: hidden; background: var(--c-sand); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.mosaic > div:hover img { transform: scale(1.05); }

/* Kenny teaser on the homepage */
.pendant-teaser { position: relative; overflow: hidden; border-radius: 18px; background: var(--c-sand); }
.pendant-teaser__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.pendant-teaser__copy { padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.pendant-teaser__media img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; }
.pendant-teaser__media.strip { min-height: 340px; }

/* --- Scroll strip ---------------------------------------------------------
   Slides the visitor can swipe, scroll with a trackpad, or step with the
   arrows. Native scroll-snap does the moving; ui.js only wires the arrows
   and greys out the one at an end. Two layouts:
     .strip--fill  full-width slides filling the parent, arrows bottom-right
                   over the photo (Grow Shade teaser, review #7)
     .strip--row   a row of cards starting on the content edge and running
                   off the right of the screen (plant gallery, review #8) */
.strip { position: relative; }
.strip__track {
  display: flex;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.strip__track::-webkit-scrollbar { display: none; }
.strip__track:focus-visible { outline: 2px solid var(--c-spectrum); outline-offset: -4px; }
.strip__slide { flex: none; scroll-snap-align: start; }
.strip__nav { display: flex; gap: 8px; }
.strip.is-static .strip__nav { display: none; }

.strip--fill .strip__track { position: absolute; inset: 0; }
.strip--fill .strip__slide { flex-basis: 100%; }
.strip--fill .strip__nav { position: absolute; right: 18px; bottom: 18px; }

/* The padding lines the first card up with .wrap's content edge, and the
   snap padding keeps it there as the row moves. On a screen wider than the
   page (--maxw) the margin holds the row to the page's own width: it used
   to run on to the screen's right edge, which on a wide monitor left the row
   pushed to the right of everything else on the page (review #3, 30 Sep). */
.strip--row .strip__track {
  gap: 20px;
  margin-inline: max(0px, calc((100% - var(--maxw)) / 2));
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}
.strip--row .strip__slide { width: clamp(260px, 27vw, 380px); }
/* Past --maxw the row no longer ends at the screen's edge, so the cards fade
   out over the gutter instead of stopping at a hard line in mid-page. */
@media (min-width: 1441px) {
  .strip--row .strip__track {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }
}
/* On a phone the arrows would wrap to a line of their own under the
   heading; the peeking card already says "swipe". */
@media (max-width: 700px) {
  .strip--row .strip__nav { display: none; }
}
.strip__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 0;
  color: var(--c-ink);
  background: rgba(250, 247, 241, .82);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 6px 18px -8px rgba(28, 33, 24, .35);
  transition: background var(--t-control), opacity var(--t-control), transform var(--t-control);
}
.strip__btn:hover { background: var(--c-paper); transform: scale(1.06); }
.strip__btn svg { width: 20px; height: 20px; }
.strip__btn:disabled { opacity: .45; cursor: default; transform: none; }
/* Outlined, for arrows that sit on the page rather than over a photo. */
.strip__btn--line {
  width: 48px; height: 48px;
  background: none; box-shadow: none;
  border: 1px solid var(--c-line-strong);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.strip__btn--line:hover { background: var(--c-sand); border-color: var(--c-canopy); transform: none; }

/* Plant gallery cards */
.plant-card { margin: 0; }
.plant-card__media { aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--c-sand); }
.plant-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.plant-card:hover .plant-card__media img { transform: scale(1.04); }
.plant-card__caption { margin-top: 16px; font-family: var(--f-display); font-size: 21px; line-height: 1.25; }


/* --------------------------------------------------------------------------
   COLLECTION / ACCESSORIES
   -------------------------------------------------------------------------- */

.breadcrumb { font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-stone); margin-bottom: 22px; }
.breadcrumb a { color: inherit; }
.breadcrumb a:hover { color: var(--c-ink); }

.collection-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 46px; }
.collection-head__tools { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }

.filter-chips { display: flex; gap: 9px; margin-bottom: 38px; flex-wrap: wrap; }
.chip {
  font-size: 14px; font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong);
  background: transparent;
  color: var(--c-ink-soft);
  transition: background var(--t-control), color var(--t-control), border-color var(--t-control);
}
.chip:hover { border-color: var(--c-canopy); }
.chip[aria-pressed="true"] { background: var(--c-canopy); color: var(--c-cream); border-color: var(--c-canopy); }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.product-grid--4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }

.cta-panel {
  background: var(--c-sand);
  border-radius: var(--r-lg);
  padding: clamp(32px, 4vw, 56px);
  display: flex; justify-content: space-between; align-items: center;
  gap: 40px; flex-wrap: wrap;
}
.cta-panel h2, .cta-panel h3 { margin-bottom: 10px; }

/* Accessories — "what each one is for" rows */
.detail-rows { display: flex; flex-direction: column; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; }
.detail-row {
  display: grid; grid-template-columns: 180px 1fr;
  gap: 34px; align-items: center;
  background: var(--c-linen); padding: 34px;
}
.detail-row__img { border-radius: 12px; background: var(--c-sand); aspect-ratio: 1; object-fit: cover; width: 100%; }
.detail-row__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: 8px; }
.detail-row__head h3 { font-family: var(--f-display); font-size: 28px; }
.detail-row p { color: var(--c-ink-soft); line-height: 1.7; margin-bottom: 16px; }


/* --------------------------------------------------------------------------
   PRODUCT (Anthos + Grow Shade share this template)
   -------------------------------------------------------------------------- */

.pdp { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.pdp__gallery { position: sticky; top: 132px;   /* clears the sticky header */ }
.pdp__stage { border-radius: var(--r-lg); overflow: hidden; background: var(--c-sand); aspect-ratio: 4 / 3.4; margin-bottom: 14px; }
.pdp__stage img { width: 100%; height: 100%; object-fit: cover; }
/* Anthos's photos are portrait (4:5); a landscape stage cut the lamp head
   and the pot off (review #18). The cap keeps the sticky gallery, thumbs
   included, inside a laptop-height window. */
.pdp[data-product="anthos"] .pdp__stage { aspect-ratio: 4 / 5; max-width: calc((100svh - 280px) * 4 / 5); margin-inline: auto; }
.pdp[data-product="anthos"] .pdp__thumbs { justify-content: center; }
.pdp__stage img[data-fit="contain"] { object-fit: contain; }
.pdp__thumbs { display: flex; gap: 12px; flex-wrap: wrap; }
.pdp__thumb {
  width: 88px; height: 88px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid var(--c-line);
  background: var(--c-sand);
  padding: 0;
  transition: border-color var(--t-control);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb[aria-pressed="true"] { border-color: var(--c-canopy); }

.pdp__info { display: flex; flex-direction: column; gap: 22px; }
.pdp__price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pdp__price-now { font-family: var(--f-display); font-size: 44px; line-height: 1; }
/* No compare-at price and no urgency note in v2 — one price, no time limit. */
.pdp__price-note { font-size: 14.5px; color: var(--c-ink-quiet); }

/* checkbox-upsell — "Add a Smart Timer to automate your light (£9.99)",
   directly under Add to Cart. Brief B's one PDP add-on. */
.checkbox-upsell {
  display: flex; align-items: center; gap: 13px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 15px;
  cursor: pointer;
  transition: border-color var(--t-control);
}
.checkbox-upsell:hover { border-color: var(--c-line-strong); }
.checkbox-upsell:has(input:checked) { border-color: var(--c-canopy); }
.checkbox-upsell input { width: 18px; height: 18px; accent-color: var(--c-canopy); flex-shrink: 0; }
.checkbox-upsell img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; background: var(--c-sand); }
.checkbox-upsell__text { flex: 1; min-width: 0; }
.checkbox-upsell__price { font-variant-numeric: tabular-nums; font-weight: 600; }

.option-head {
  display: flex; justify-content: space-between;
  font-family: var(--f-label); font-weight: 600; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-stone); margin-bottom: 12px;
}
.option-head strong { color: var(--c-ink); font-weight: 400; }

/* Wraps only when the stepper and the button can't share a line (a 320px
   phone); the button then takes the full width beneath the stepper. */
.atc-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-top: 6px; }
.atc-row .btn { white-space: nowrap; }
.atc-row .btn { flex: 1; padding-block: 17px; font-size: 16px; }

.pdp__assurances { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--c-ink-quiet); }

/* Specifications accordion: label and value, one spec per row. */
.spec-list { margin: 0; line-height: 1.5; }
.spec-list > div {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px;
  padding-block: 11px;
  border-top: 1px solid var(--c-line);
}
.spec-list > div:first-child { border-top: 0; padding-top: 2px; }
.spec-list dt { color: var(--c-stone); }
.spec-list dd { margin: 0; color: var(--c-ink); }

/* stat-band */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.stat { border-top: 1px solid rgba(246, 242, 233, .2); padding-top: 20px; }
.stat__value { font-family: var(--f-display); font-size: clamp(34px, 3.4vw, 46px); line-height: 1; }
.stat__label { font-size: 15px; color: var(--c-cream-60); padding-top: 8px; line-height: 1.55; }
.stat-band--3 { grid-template-columns: repeat(3, 1fr); }
.stat-band--light .stat { border-top-color: var(--c-line); }
.stat-band--light .stat__value { color: var(--c-canopy); }
.stat-band--light .stat__label { color: var(--c-ink-soft); }

/* "Which lamp" — Anthos vs Kenny */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.versus__card { display: flex; flex-direction: column; gap: 14px; }
.versus__card img { border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-sand); width: 100%; }
.versus__list { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--c-ink-soft); }
.versus__list li { list-style: none; display: flex; gap: 10px; }
.versus__list li::before { content: '✓'; color: var(--c-moss); }
.versus__list { margin: 0; padding: 0; }


/* --------------------------------------------------------------------------
   BRIEF B SECTIONS
   The selling structure from LaunchBoom's copy deck. v1's bundle builder
   stood here; Brief B does not recommend a bundles page yet, so the builder,
   its add-on tiles and its discount summary panel are gone.

   These blocks carry the argument, so they are deliberately quieter than the
   hero work above them: hairlines, generous space, one figure per idea. The
   restraint is Brief A's; the content is Brief B's.
   -------------------------------------------------------------------------- */

/* promo-bar — the messages above the header (sections/promo-bar, public/theme/js/promo-bar.js).
   One block per message; the section picks the motion and the tone. The bar is always one line
   tall, so switching messages never moves the page. */
.promo-bar {
  --promo-bg: var(--c-canopy);
  --promo-fg: var(--c-cream);
  --promo-h: 38px;
  display: block;
  position: relative;
  z-index: calc(var(--z-header) + 1);
  height: var(--promo-h);
  overflow: hidden;
  background: var(--promo-bg);
  color: var(--promo-fg);
  font-family: var(--f-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.promo-bar--ink      { --promo-bg: var(--c-ink);      --promo-fg: var(--c-cream); }
.promo-bar--spectrum { --promo-bg: var(--c-spectrum); --promo-fg: var(--c-ink); }
.promo-bar--halo     { --promo-bg: var(--c-halo);     --promo-fg: var(--c-clay-deep); }
.promo-bar--sand     { --promo-bg: var(--c-sand);     --promo-fg: var(--c-ink); }
.promo-bar--text-sentence { font-size: 13px; letter-spacing: .01em; text-transform: none; font-weight: 500; }

.promo-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
a.promo-bar__item:hover .promo-bar__text,
a.promo-bar__item:focus-visible .promo-bar__text { text-decoration: underline; text-underline-offset: 3px; }
.promo-bar__icon { display: inline-flex; }
.promo-bar__icon svg { display: block; }
.promo-bar__cta { text-decoration: underline; text-underline-offset: 3px; opacity: .85; }

/* One at a time: static, slide, fade, vertical */
.promo-bar__viewport { position: relative; display: flex; align-items: center; height: 100%; padding-inline: var(--gutter); }
.promo-bar__slides { position: relative; flex: 1 1 auto; height: 100%; min-width: 0; }
.promo-bar__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  visibility: hidden;
}
.promo-bar__slide.is-active { visibility: visible; }
.promo-bar__slide .promo-bar__item { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.promo-bar__arrow {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 50%;
  opacity: .75;
  cursor: pointer;
}
.promo-bar__arrow:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }

.promo-bar--fade .promo-bar__slide { opacity: 0; transition: opacity .6s ease, visibility 0s linear .6s; }
.promo-bar--fade .promo-bar__slide.is-active { opacity: 1; transition: opacity .6s ease .1s, visibility 0s; }

.promo-bar--slide .promo-bar__slide { transform: translateX(100%); transition: transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .6s; }
.promo-bar--slide .promo-bar__slide.is-leaving { transform: translateX(-100%); }
.promo-bar--slide .promo-bar__slide.is-active { transform: none; transition: transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.promo-bar--slide.is-back .promo-bar__slide { transform: translateX(-100%); }
.promo-bar--slide.is-back .promo-bar__slide.is-leaving { transform: translateX(100%); }
.promo-bar--slide.is-back .promo-bar__slide.is-active { transform: none; }

.promo-bar--vertical .promo-bar__slide { transform: translateY(100%); opacity: 0; transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .5s ease, visibility 0s linear .5s; }
.promo-bar--vertical .promo-bar__slide.is-leaving { transform: translateY(-100%); }
.promo-bar--vertical .promo-bar__slide.is-active { transform: none; opacity: 1; transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .5s ease, visibility 0s; }
.promo-bar--vertical.is-back .promo-bar__slide { transform: translateY(-100%); }
.promo-bar--vertical.is-back .promo-bar__slide.is-leaving { transform: translateY(100%); }
.promo-bar--vertical.is-back .promo-bar__slide.is-active { transform: none; }

/* Continuous scroll: two identical groups, the track moves by one group's width. */
.promo-bar__marquee { height: 100%; display: flex; align-items: center; overflow: hidden; }
.promo-bar__track { display: flex; flex-shrink: 0; animation: promo-marquee var(--promo-duration, 30s) linear infinite; }
.promo-bar__group { display: flex; flex-shrink: 0; align-items: center; justify-content: space-around; gap: 28px; padding-right: 28px; min-width: 100vw; } /* at least a screen wide: short messages never leave a gap in the loop */
.promo-bar__sep { opacity: .6; }
.promo-bar--hover-pause:hover .promo-bar__track,
.promo-bar__marquee:focus-within .promo-bar__track { animation-play-state: paused; }
@keyframes promo-marquee { to { transform: translateX(-50%); } }

@media (max-width: 700px) {
  .promo-bar { --promo-h: 36px; font-size: 10px; letter-spacing: .14em; }
  .promo-bar--text-sentence { font-size: 12px; letter-spacing: 0; }
  .promo-bar__viewport { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-bar__slide { transition: none !important; }
  .promo-bar__track { animation: none; }
  .promo-bar__marquee { justify-content: center; }
  .promo-bar__group[aria-hidden="true"] { display: none; }
}
/* The overlay header is absolutely positioned, so on a hero page it would
   otherwise sit at the top of the document and cover the bar. Making its
   mount point the containing block drops it to just below, with no magic
   number to keep in sync. Only on overlay pages: giving the sticky header
   a short relative parent would stop it sticking. */
body[data-header="overlay"] [data-shell="header"] { position: relative; }

/* trust-bar — the deck's four items. Replaces v1's five-item trust strip,
   two of which (delivery over £150, 90-day guarantee) are no longer true. */
.trust-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.trust-bar__item {
  padding: 22px 20px;
  text-align: center;
  font-family: var(--f-label); font-weight: 600;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-ink-soft);
}
.trust-bar__item + .trust-bar__item { border-left: 1px solid var(--c-line); }
.trust-bar__br { display: none; }   /* shown in the 2 × 2 layout below */
.trust-bar--on-dark { border-color: var(--c-cream-16); }
.trust-bar--on-dark .trust-bar__item { color: var(--c-cream-72); }
.trust-bar--on-dark .trust-bar__item + .trust-bar__item { border-left-color: var(--c-cream-16); }

/* thematic — the one-line promise, centred, with room around it. */
.thematic { max-width: var(--maxw-prose); margin-inline: auto; text-align: center; }
.thematic p { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.65; color: var(--c-ink-soft); margin-top: 22px; }

/* key-features — WHY ANTHOS, three of them. */
.key-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.5vw, 54px); }
.key-feature { border-top: 1px solid var(--c-line); padding-top: 22px; }
.key-feature__title {
  font-family: var(--f-label); font-weight: 600;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-canopy); margin-bottom: 14px;
}
.key-feature__body { font-size: 16px; line-height: 1.68; color: var(--c-ink-soft); }

/* fb-block — feature/benefit. Media and copy swap sides down the page. */
.fb-block {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4.5vw, 76px);
  align-items: center;
}
.fb-block--flip .fb-block__media { order: 2; }
/* The frame takes each photo's own shape. A fixed 4:3 cropped the portrait
   and square photos these blocks carry (reviews #14–#16). */
.fb-block__media { border-radius: var(--r-lg); overflow: hidden; background: var(--c-sand); }
.fb-block__media img { width: 100%; height: auto; }
.fb-block__body { display: flex; flex-direction: column; gap: 18px; }
.fb-block__body p { font-size: 16.5px; line-height: 1.7; color: var(--c-ink-soft); }

/* proof-ks — the Kickstarter result. The strongest credibility asset in the
   deck, and absent from v1 entirely. */
.proof-ks {
  background: var(--c-canopy); color: var(--c-cream);
  border-radius: 18px;
  padding: clamp(34px, 4.5vw, 66px);
  display: grid; grid-template-columns: .8fr 1.2fr;
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.proof-ks__figure { font-family: var(--f-display); font-size: clamp(64px, 8vw, 116px); line-height: .92; letter-spacing: -.03em; }
.proof-ks__figure-label {
  font-family: var(--f-label); font-weight: 600;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-spectrum); margin-top: 14px;
}
.proof-ks__body { display: flex; flex-direction: column; gap: 20px; }
.proof-ks__body p { font-size: 17px; line-height: 1.65; color: var(--c-cream-72); }
.proof-ks__stats { display: flex; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
.proof-ks__stat { display: flex; flex-direction: column; gap: 5px; }
.proof-ks__stat b { font-family: var(--f-display); font-size: 28px; font-weight: 400; }
.proof-ks__stat span { font-size: 14px; color: var(--c-cream-60); }

/* upsell-panel — "GROW MORE, IN EVERY ROOM". Same shape as the homepage
   pendant teaser, so the two read as one family. */
.upsell-panel {
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: 18px; overflow: hidden;
  background: var(--c-sand);
  align-items: stretch;
}
.upsell-panel__copy { padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.upsell-panel__copy p { font-size: 16.5px; line-height: 1.7; color: var(--c-ink-soft); }
.upsell-panel__media img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }

/* reviews-empty — the honest pre-fulfilment state. Brief B holds reviews
   back until they are collected, and this is what stands in the slot. */
.reviews-empty {
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-lg);
  padding: clamp(32px, 4vw, 56px);
  text-align: center;
  max-width: 620px; margin-inline: auto;
}
.reviews-empty__title { font-family: var(--f-display); font-weight: 300; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; }
.reviews-empty__body { font-size: 16px; line-height: 1.7; color: var(--c-ink-soft); margin-top: 14px; }
.band--ink .reviews-empty { border-color: var(--c-cream-16); }
.band--ink .reviews-empty__body { color: var(--c-cream-72); }
/* With the review app in the section, its reviews fill the slot and the note would contradict them. */
.reviews-section .wrap > [id^="shopline-block-"] ~ .reviews-empty { display: none; }

/* The Product Review app inside the review section (Leo, 20 Oct: "not visible"). The app draws
   outline-only cards with black text, which disappear on the dark band. Its colours run through
   --plugin-product-comment-color_text(_secondary): ink inside the cards, cream for the header on
   the band. The rest re-skins the app's classes as sand cards with amber stars. The app's CSS loads
   after ours with long selectors and inline colours, hence the !important. */
.reviews-section .plugin-product-comment-collections {
  --plugin-product-comment-color_text: var(--c-ink);
  --plugin-product-comment-color_text_secondary: var(--c-ink-quiet);
  font-family: var(--f-ui);
}
.reviews-section.band--ink .plugin-product-comment-pageCollections-summary,
.reviews-section.band--ink .plugin-product-comment-collections-mobile-write-btn,
.reviews-section.band--ink .isv-web-pagination {
  --plugin-product-comment-color_text: var(--c-cream);
  --plugin-product-comment-color_text_secondary: var(--c-cream-72);
  --isv-web-color_text: 246, 242, 233;
}
.reviews-section .plugin-product-comment-pageCollections-summary { margin-bottom: 28px; }
.reviews-section .custom-star-color { color: var(--c-spectrum) !important; }
.reviews-section .plugin-product-comment-progress { background-color: var(--c-spectrum) !important; }
.reviews-section .plugin-product-comment-commentSynthesize {
  font-family: var(--f-display);
  font-size: clamp(40px, 4vw, 52px) !important;
  font-weight: 300;
  line-height: 1;
}
.reviews-section .plugin-product-comment-select-entry { border-radius: var(--r-pill) !important; }
.reviews-section.band--ink .plugin-product-comment-select-entry { border-color: var(--c-cream-42) !important; }
.reviews-section.band--ink .plugin-product-comment-select-entry:hover { background-color: var(--c-cream-16) !important; }

/* Cards. The app lays them out as four columns and "Show More" stacks the next reviews into the
   same columns, so the gap goes on the columns too. Every card holds room for two title lines and
   four lines of review, so all cards come out the same height and the columns line up as rows. */
.reviews-section .plugin-product-comment-water-col { gap: 20px !important; }
.reviews-section .plugin-product-comment-water-col-item { display: flex; flex-direction: column; gap: 20px; }
.reviews-section .plugin-product-comment-waterCommentWrap {
  display: flex; flex-direction: column;
  margin: 0 !important;
  padding: 24px 24px 18px;
  border-radius: 20px;
  background: var(--c-sand) !important;
  color: var(--c-ink);
}
.reviews-section .plugin-product-comment-waterCommentWrap:focus-visible { outline: 2px solid var(--c-spectrum) !important; outline-offset: 3px !important; border-radius: 20px !important; }
.reviews-section .plugin-product-comment-waterCommentWrap .plugin-product-comment-rate {
  position: static !important; transform: none !important;
  align-self: flex-start;
  margin: 0 0 14px; padding: 0 !important;
  background: none !important; box-shadow: none !important;
}
.reviews-section .plugin-product-comment-waterCommentWrap .plugin-product-comment-infoWrap,
.reviews-section .plugin-product-comment-waterCommentWrap .plugin-product-comment-info {
  flex: 1;
  display: flex; flex-direction: column;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important;
}
.reviews-section .plugin-product-comment-userInfo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.reviews-section .plugin-product-comment-userInfo .plugin-product-comment-nicknameskuAttributes,
.reviews-section .plugin-product-comment-userInfo .plugin-product-comment-date { margin: 0 !important; font-size: 13px !important; }
.reviews-section .plugin-product-comment-WaterCommentWrapTitle {
  min-height: 2.4em;
  margin-top: 10px !important;
  font-family: var(--f-display);
  font-size: 22px !important; font-weight: 400 !important; line-height: 1.2 !important;
  -webkit-line-clamp: 2 !important;
  color: var(--c-ink);
}
.reviews-section .plugin-product-comment-waterCommentWrap .plugin-product-comment-content-info { margin-top: 10px !important; }
.reviews-section .plugin-product-comment-content-info .plugin-product-comment-content {
  font-size: 15px !important; line-height: 1.6 !important;
  -webkit-line-clamp: 4 !important;
  color: var(--c-ink-soft);
}
.reviews-section .plugin-product-comment-waterCommentWrap .plugin-product-comment-content { min-height: 6.4em; }

/* Phones: the app swaps the columns for a single list with page numbers. Same sand cards. */
.reviews-section .plugin-product-comment-pageCollections-mobile-list-single [role="list"] { display: grid; gap: 12px; }
.reviews-section .plugin-product-comment-pageCollections-mobile-list-single [role="listitem"] { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.reviews-section .plugin-product-comment-mobile-CommentWrap {
  margin: 0 !important; padding: 18px 18px 14px !important;
  border: 0 !important; border-radius: 16px;
  background: var(--c-sand) !important;
  color: var(--c-ink);
}
.reviews-section .plugin-product-comment-mobile-CommentWrap .plugin-product-comment-date,
.reviews-section .plugin-product-comment-mobile-CommentWrap .plugin-product-comment-nicknameskuAttributes { font-size: 13px !important; }
.reviews-section .plugin-product-comment-comment__title {
  margin-top: 8px !important;
  font-family: var(--f-display);
  font-size: 20px !important; font-weight: 400 !important; line-height: 1.2 !important;
  color: var(--c-ink);
}
.reviews-section .qualified {
  margin-right: 6px !important; padding: 3px 8px 3px 5px !important;
  background: var(--c-canopy) !important; color: var(--c-cream) !important;
}
.reviews-section .plugin-product-comment-waterCommentWrap .plugin-product-comment-CommentAndHelpfulBtns-box { margin-top: auto !important; padding-top: 16px; }
.reviews-section .plugin-product-comment-waterCommentWrap .plugin-product-comment-bgContainer { margin-top: 26px !important; }
.reviews-section .plugin-product-comment-waterCommentWrap .plugin-product-comment-bgContainer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -13px;
  border-top: 1px solid rgba(28, 33, 24, .12);
}
.reviews-section .plugin-product-comment-product-card { padding: 0 !important; }
.reviews-section .plugin-product-comment-product-card:hover { background-color: transparent !important; }
.reviews-section .plugin-product-comment-product-card-pic img { border-radius: 8px !important; }
.reviews-section .plugin-product-comment-product-card-name { font-size: 13px !important; opacity: 1 !important; color: var(--c-ink-quiet) !important; }

/* "Show More": the site's outline pill, cream on the band. */
.reviews-section .plugin-product-comment-loadMoreContainer { display: flex; justify-content: center; margin-top: 36px; }
.reviews-section .plugin-product-comment-loadMoreContainer .isv-web-btn {
  min-height: 50px; padding: 0 30px !important; align-items: center;
  border: 1px solid var(--c-line-strong) !important; border-radius: var(--r-pill) !important;
  background: transparent !important; box-shadow: none !important;
  font-family: var(--f-ui) !important; font-size: 15px !important; font-weight: 600 !important;
  color: var(--c-ink) !important;
  transition: background-color var(--t-control);
}
.reviews-section .plugin-product-comment-loadMoreContainer .isv-web-btn::after { display: none !important; }
.reviews-section .plugin-product-comment-loadMoreContainer .isv-web-btn:hover { background-color: var(--c-sand) !important; }
.reviews-section.band--ink .plugin-product-comment-loadMoreContainer .isv-web-btn { color: var(--c-cream) !important; border-color: var(--c-cream-42) !important; }
.reviews-section.band--ink .plugin-product-comment-loadMoreContainer .isv-web-btn:hover { background-color: var(--c-cream-16) !important; }
.reviews-section .plugin-product-comment-loadMoreContainer .isv-web-btn:focus-visible { outline: 2px solid var(--c-spectrum); outline-offset: 3px; }


/* --------------------------------------------------------------------------
   QUIZ
   -------------------------------------------------------------------------- */

.quiz {
  min-height: 74vh;
  display: flex; align-items: center; justify-content: center;
  padding: 80px var(--gutter);
  background: var(--c-canopy);
  color: var(--c-cream);
}
.quiz__inner { max-width: 720px; width: 100%; }
.quiz__meta { display: flex; justify-content: space-between; font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-spectrum); margin-bottom: 12px; }
.quiz__question { margin: 0 0 36px; }
.quiz__options { display: flex; flex-direction: column; gap: 12px; }
.quiz__option {
  border: 1px solid rgba(246, 242, 233, .28);
  border-radius: 12px;
  padding: 22px 26px;
  font-size: 18px;
  background: none;
  color: inherit;
  text-align: left;
  transition: background var(--t-control), border-color var(--t-control), transform var(--t-control);
}
.quiz__option:hover { background: rgba(246, 242, 233, .09); border-color: var(--c-spectrum); transform: translateX(5px); }
.quiz__result { text-align: center; animation: lp-in .5s cubic-bezier(.16, 1, .3, 1); }
.quiz__result-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.quiz__restart { background: none; border: 0; color: rgba(246, 242, 233, .55); font-size: 15px; text-decoration: underline; padding: 16px 12px; }


/* --------------------------------------------------------------------------
   CART / CHECKOUT
   -------------------------------------------------------------------------- */

.cart-layout { display: grid; grid-template-columns: 1.5fr .8fr; gap: 52px; align-items: start; }
.checkout-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: start; }

.order-summary {
  position: sticky; top: 132px;   /* clears the sticky header */
  background: var(--c-sand);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex; flex-direction: column; gap: 4px;
}
.order-summary .summary-row { color: var(--c-ink-soft); font-size: 15px; }
.order-summary .summary-row--total span:last-child { font-family: var(--f-display); font-size: 36px; }
.order-summary hr { border: 0; height: 1px; background: #DDD4C4; margin: 8px 0; width: 100%; }
.order-summary__fine { font-size: 13px; color: var(--c-ink-quiet); text-align: center; line-height: 1.6; margin-top: 4px; }

.checkout-steps { display: flex; gap: 14px; align-items: center; font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-stone); margin-bottom: 38px; flex-wrap: wrap; }
.checkout-steps .is-done { color: var(--c-canopy); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-grid .input--wide { grid-column: span 2; }

.ship-option {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 18px 22px;
  background: var(--c-paper);
  width: 100%; text-align: left; gap: var(--sp-4);
  transition: border-color var(--t-control);
}
.ship-option[aria-pressed="true"] { border-color: var(--c-canopy); }
/* One delivery method, so it states rather than selects. */
.ship-option--static { border-color: var(--c-canopy); cursor: default; }
.ship-option--static .ship-option__price { font-weight: 600; color: var(--c-canopy); }
.ship-option__name { display: block; font-weight: 600; font-size: 15.5px; }
.ship-option__when { display: block; font-size: 14px; color: var(--c-stone); padding-top: 3px; }
.ship-option__price { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 15px; }

.mini-line { display: flex; gap: 14px; align-items: center; }
.mini-line img { width: 56px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--c-linen); }
.mini-line__body { flex: 1; min-width: 0; }
.mini-line__name { font-weight: 600; font-size: 14.5px; }
.mini-line__meta { font-size: 13px; color: var(--c-stone); }
.mini-line__price { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 14px; }


/* --------------------------------------------------------------------------
   COMPARISON TABLE
   -------------------------------------------------------------------------- */

.spec-table { border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden; }
.spec-table__scroll { overflow-x: auto; }
.spec-table table { width: 100%; border-collapse: collapse; min-width: 720px; }
.spec-table thead th {
  background: var(--c-canopy); color: var(--c-cream);
  padding: 24px 20px;
  text-align: left; font-size: 15.5px; font-weight: 600;
  color: var(--c-cream-72);
}
.spec-table thead th:first-child {
  font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-cream-60); padding-inline: 26px;
  width: 28%;
}
.spec-table thead th.is-hero {
  font-family: var(--f-display); font-size: 22px; font-weight: 400;
  color: var(--c-cream);
  background-color: var(--c-canopy);
  background-image: linear-gradient(rgba(232, 163, 61, .16), rgba(232, 163, 61, .16));
}
.spec-table tbody tr { border-top: 1px solid var(--c-line); background: var(--c-linen); transition: background var(--t-control); }
.spec-table tbody tr:hover { background: #F3EFE6; }
.spec-table td { padding: 20px; font-size: 15.5px; color: var(--c-ink-quiet); }
.spec-table td:first-child { padding-inline: 26px; font-weight: 600; color: var(--c-ink); }
.spec-table td.is-hero { background: var(--col-wash, rgba(232, 163, 61, .09)); font-weight: 600; color: var(--col-ink, var(--c-canopy)); }

/* --- Matrix variant ------------------------------------------------------
   The light-type comparison. Centred columns, ticks and crosses drawn in
   CSS, and a row header column that carries the question.
   ------------------------------------------------------------------------ */
.spec-table--matrix table { min-width: 780px; }
.spec-table--matrix thead th { text-align: center; vertical-align: bottom; }
.spec-table--matrix thead th:first-child { width: 30%; }
.spec-table--matrix thead th:not(:first-child) { width: calc(70% / var(--cols, 4)); }
/* One face and size for every light's heading. LaunchBoom found the mix
   (serif for the client's lamps, sans for the rest) read as misaligned
   (22 Sep); the client's lamps are marked by their column colour instead,
   and a brighter label. */
.spec-table--matrix thead th:not(:first-child) {
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.15;
}
.spec-table--matrix thead th.is-hero,
.spec-table--matrix thead th.is-cherry { color: var(--col-on, var(--c-cream)); }
.spec-table--matrix thead th.is-hero {
  background: var(--col, linear-gradient(rgba(232, 163, 61, .2), rgba(232, 163, 61, .2)) var(--c-canopy));
}
/* Grow Shade is the client's lamp too: its column wears the lamp's cherry
   the way Anthos's wears the amber of its light. */
.spec-table--matrix thead th.is-cherry { background-color: var(--col, var(--c-cherry)); }
.spec-table td.is-cherry { background: var(--col-wash, var(--c-cherry-wash)); font-weight: 600; color: var(--col-ink, var(--c-cherry)); }
.is-cherry .spec-tbc { color: var(--col-ink, var(--c-cherry)); opacity: .7; }
/* A highlighted column can be given any colour in the editor (section settings,
   "Column N highlight colour"; review #1, 30 Sep). The section sets --col-N for
   each colour picked; a column with none has no --col, so every var() above
   falls back to the highlight's own colour. The heading takes the colour and
   the answers a pale wash of it; the heading's text turns dark on a light pick
   and the answers' text is held dark enough to read on the wash. */
.spec-matrix tr > :nth-child(2), .spec-accordion__list > :nth-child(1), .spec-cards__track > :nth-child(1) { --col: var(--col-1); }
.spec-matrix tr > :nth-child(3), .spec-accordion__list > :nth-child(2), .spec-cards__track > :nth-child(2) { --col: var(--col-2); }
.spec-matrix tr > :nth-child(4), .spec-accordion__list > :nth-child(3), .spec-cards__track > :nth-child(3) { --col: var(--col-3); }
.spec-matrix tr > :nth-child(5), .spec-accordion__list > :nth-child(4), .spec-cards__track > :nth-child(4) { --col: var(--col-4); }
.spec-matrix tr > :nth-child(6), .spec-accordion__list > :nth-child(5), .spec-cards__track > :nth-child(5) { --col: var(--col-5); }
.spec-matrix tr > *, .spec-accordion__list > *, .spec-cards__track > * {
  --col-ink: var(--col);
  --col-wash: color-mix(in srgb, var(--col) 10%, var(--c-linen));
}
@supports (color: oklch(from red min(l, .4) c h)) {
  .spec-matrix tr > *, .spec-accordion__list > *, .spec-cards__track > * {
    --col-on: oklch(from var(--col) clamp(.22, (.7 - l) * 100, .96) .012 95);
    --col-ink: oklch(from var(--col) min(l, .4) c h);
    --col-wash: oklch(from var(--col) .93 min(c, .02) h);
  }
}
.spec-table--matrix tbody th {
  text-align: left;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--c-ink);
  padding: 18px 26px;
}
.spec-table--matrix .spec-table__note {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--c-stone);
  padding-top: 3px;
}
.spec-table--matrix .spec-table__cell {
  text-align: center;
  padding: 18px 16px;
  font-size: 15px;
  line-height: 1.45;
}

/* Below the table's 780px it used to scroll sideways, which on a phone hid
   three of the four lights at any one time (review #4). Instead each row's
   question takes a line of its own and the four answers sit in columns under
   it, so the whole comparison fits the screen. The light names pin to the
   top while you read down; `clip` rather than `hidden` keeps the rounded
   corners without making the box a scroller, which would stop the pin. */
@media (max-width: 860px) {
  .spec-table--matrix { overflow: clip; }
  .spec-table--matrix .spec-table__scroll { overflow: visible; }
  .spec-table--matrix table,
  .spec-table--matrix thead,
  .spec-table--matrix tbody { display: block; min-width: 0; }
  .spec-table--matrix tr { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
  .spec-table--matrix tbody tr { padding-bottom: 8px; }
  .spec-table--matrix thead { position: sticky; top: 0; z-index: 1; }
  /* The desktop column widths are percentages, which inside a grid cell
     would shrink each heading to a sliver of its column. */
  .spec-table--matrix thead th,
  .spec-table--matrix thead th:not(:first-child) { width: auto; padding: 12px 4px; font-size: 16px; }
  .spec-table--matrix thead th:first-child { display: none; }
  /* Tighter rows (LaunchBoom, 22 Sep: "the spacing on the entire table can
     be much tighter to work on mobile"). */
  .spec-table--matrix tbody th { grid-column: 1 / -1; padding: 12px 14px 4px; font-size: 14.5px; }
  .spec-table--matrix .spec-table__cell { padding: 6px 4px; font-size: 13px; line-height: 1.35; }
  /* Anthos's answer sits in a soft chip rather than a flush block, which
     read as a broken column once the question moved onto its own line. */
  .spec-table--matrix .spec-table__cell.is-hero,
  .spec-table--matrix .spec-table__cell.is-cherry { margin-inline: 6px; border-radius: 10px; }
}

/* Five lights across a phone leaves ~70px a column; the headings step down
   so "Fluorescent" still fits on one line. */
@media (max-width: 480px) {
  .spec-table--matrix thead th:not(:first-child) { padding-inline: 2px; font-size: 14px; }
}

/* --- Dropdown variant (phones) -------------------------------------------
   LP.config.compareDropdownsOnMobile. One question per row; the closed row
   shows Anthos's answer, opening it lists every light. Rides on the shared
   .accordion behaviour in ui.js. Rows kept tight so the closed list stays
   under a screen (LaunchBoom, 22 Sep). */
.spec-accordion { display: none; }

@media (max-width: 700px) {
  .spec-matrix--dropdowns .spec-table { display: none; }
  .spec-matrix--dropdowns .spec-accordion { display: block; }
}

/* The "Anthos" label sits over the answers, clear of the trigger's +. */
.spec-accordion__head {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 0 calc(var(--sp-3) + 12px) 12px 0;
  font-family: var(--f-label); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-stone);
}
.spec-accordion__head span:last-child { color: var(--c-canopy); }

.spec-accordion .accordion__trigger {
  justify-content: flex-start; gap: var(--sp-3);
  padding-block: 12px;
  font-size: 15px;
}
.spec-accordion__q { flex: 1; min-width: 0; }
.spec-accordion__q .spec-table__note { display: block; padding-top: 2px; font-size: 13px; font-weight: 400; color: var(--c-stone); }
.spec-accordion__hero { max-width: 45%; text-align: right; font-size: 14px; font-weight: 600; color: var(--c-canopy); }
.spec-accordion__hero .mark { display: block; }

.spec-accordion .accordion__panel { max-width: none; padding-bottom: 12px; }
.spec-accordion__list { margin: 0; display: grid; gap: 2px; font-size: 14.5px; line-height: 1.4; }
.spec-accordion__list > div {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 8px 12px;
  border-radius: 10px;
}
.spec-accordion__list > div.is-hero { background: var(--col-wash, rgba(232, 163, 61, .12)); }
.spec-accordion__list > div.is-cherry { background: var(--col-wash, var(--c-cherry-wash)); }
.spec-accordion__list .is-cherry dt { color: var(--c-ink); font-weight: 600; }
.spec-accordion__list .is-cherry dd { color: var(--col-ink, var(--c-cherry)); font-weight: 600; }
.spec-accordion__list dt { flex: none; color: var(--c-ink-quiet); }
.spec-accordion__list .is-hero dt { color: var(--c-ink); font-weight: 600; }
.spec-accordion__list dd { margin: 0; text-align: right; color: var(--c-ink-quiet); }
.spec-accordion__list .is-hero dd { color: var(--col-ink, var(--c-canopy)); font-weight: 600; }

/* --- Card variant (phones) -----------------------------------------------
   Leo, 20 Oct ("option C"): one card per light, swiped sideways, each card
   listing every question with that light's answer. The next card peeks in
   at the edge so the swipe is obvious; the strip runs to the screen edges
   while each card lines up with the page gutter. Takes the place of the
   dropdowns when both are on. */
.spec-cards { display: none; }

@media (max-width: 700px) {
  .spec-matrix--cards .spec-table { display: none; }
  .spec-matrix--cards .spec-cards { display: block; }
}

.spec-cards__track {
  position: relative;
  display: flex; gap: 12px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 4px var(--gutter) 8px;
  scroll-padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.spec-cards__track::-webkit-scrollbar { display: none; }

.spec-card {
  flex: 0 0 84%;
  scroll-snap-align: start;
  border: 1px solid var(--c-line); border-radius: 14px;
  overflow: hidden;
  background: var(--c-linen);
}
.spec-card.is-hero,
.spec-card.is-cherry { border-color: transparent; }
.spec-card.is-hero { background: var(--col-wash, rgba(232, 163, 61, .09)); }
.spec-card.is-cherry { background: var(--col-wash, var(--c-cherry-wash)); }

.spec-card__head { padding: 16px 18px 14px; background: var(--c-canopy); color: var(--c-cream); }
.spec-card.is-hero .spec-card__head {
  background: var(--col, linear-gradient(rgba(232, 163, 61, .2), rgba(232, 163, 61, .2)) var(--c-canopy));
  color: var(--col-on, var(--c-cream));
}
.spec-card.is-cherry .spec-card__head { background: var(--col, var(--c-cherry)); color: var(--col-on, var(--c-cream)); }
.spec-card__tag {
  display: block;
  font-family: var(--f-label); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  opacity: .72;
}
.spec-card__name { margin: 4px 0 0; font-family: var(--f-display); font-size: 24px; font-weight: 400; line-height: 1.15; color: inherit; }

.spec-card__list { list-style: none; margin: 0; padding: 4px 18px 10px; }
.spec-card__row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--c-line);
  font-size: 14.5px; line-height: 1.4;
}
.spec-card__row:first-child { border-top: 0; }
.spec-card__q { flex: 1; min-width: 0; color: var(--c-ink); }
.spec-card__q .spec-table__note { display: block; padding-top: 2px; font-size: 13px; color: var(--c-stone); }
.spec-card__a { flex: none; max-width: 55%; text-align: right; color: var(--c-ink-quiet); }
.spec-card.is-hero .spec-card__a { color: var(--col-ink, var(--c-canopy)); font-weight: 600; }
.spec-card.is-cherry .spec-card__a { color: var(--col-ink, var(--c-cherry)); font-weight: 600; }
.spec-card__a .mark { display: block; margin-left: auto; }

/* The dots are buttons with a 24px target; the dot itself is drawn inside. */
.spec-cards__dots { display: flex; justify-content: center; gap: 2px; padding-top: 10px; }
.spec-cards__dots button {
  display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.spec-cards__dots button::before {
  content: ""; width: 8px; height: 8px; border-radius: 99px;
  background: var(--c-line-strong);
  transition: width var(--t-control), background var(--t-control);
}
.spec-cards__dots button[aria-current="true"]::before { width: 20px; background: var(--c-canopy); }
.spec-cards__dots button:focus-visible { outline: 2px solid var(--c-spectrum); outline-offset: 2px; border-radius: 99px; }
.spec-cards__hint { margin: 4px 0 0; text-align: center; font-size: 13px; color: var(--c-stone); }

@media (prefers-reduced-motion: reduce) {
  .spec-cards__dots button::before { transition: none; }
}

/* Tick and cross, drawn rather than set — a glyph would inherit the body
   font's weight and sit off the optical centre. One SVG stroke each, so the
   tick's two arms meet in a single joined corner. */
.mark { display: inline-block; width: 20px; height: 20px; vertical-align: middle; }
.mark svg {
  display: block; width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.mark--yes { color: var(--c-moss); }
.mark--no  { color: var(--c-clay); }

/* A value the client has not supplied yet (Grow Shade, until confirmed). */
.spec-tbc {
  text-decoration: none;
  font-family: var(--f-label); font-size: 11px; font-weight: 600;
  letter-spacing: .14em;
  color: var(--c-stone);
}

.tone { font-weight: 700; }
.tone--good { color: var(--c-canopy); }
.tone--mid  { color: var(--c-clay-deep); }
.tone--bad  { color: var(--c-clay); }


/* --------------------------------------------------------------------------
   REVIEWS WALL
   -------------------------------------------------------------------------- */

.rating-bars { display: flex; flex-direction: column; gap: 7px; }
.rating-bars__row { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--c-ink-quiet); }
.rating-bars__row > span:first-child { width: 26px; }
.rating-bars__row > span:last-child { width: 34px; }
.rating-bars__row .meter { flex: 1; }

.review-wall { columns: 3; column-gap: 22px; }
.review-tile {
  break-inside: avoid;
  background: var(--c-sand);
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 22px;
  display: inline-block;
  width: 100%;
}
.review-tile__title { font-family: var(--f-display); font-size: 23px; line-height: 1.3; letter-spacing: -.01em; margin: 12px 0; }
.review-tile__body { font-size: 15.5px; line-height: 1.68; color: var(--c-ink-soft); margin-bottom: 16px; }
.review-tile__who { font-size: 13.5px; color: var(--c-stone); }


/* --------------------------------------------------------------------------
   GUIDE + ARTICLE
   -------------------------------------------------------------------------- */

.article-card { display: flex; flex-direction: column; gap: 14px; }
.article-card__media { border-radius: 14px; overflow: hidden; background: var(--c-sand); aspect-ratio: 16 / 11; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.article-card:hover .article-card__media img { transform: scale(1.05); }
.article-card__meta { display: flex; gap: 12px; font-family: var(--f-label); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-stone); }
.article-card__meta span:first-child { color: var(--c-clay); }
.article-card__title { font-family: var(--f-display); font-size: 27px; line-height: 1.22; letter-spacing: -.015em; color: var(--c-ink); }

.prose { font-size: 18px; line-height: 1.78; color: var(--c-ink-mid); }
.prose p { margin: 0 0 26px; }
.prose h2 { font-family: var(--f-display); font-weight: 400; font-size: var(--t-heading); letter-spacing: -.02em; margin: 44px 0 16px; }
.prose ol, .prose ul { margin: 0 0 26px; padding-left: 22px; }
.prose li { margin-bottom: 11px; }
.prose blockquote {
  margin: 34px 0;
  padding: 26px 30px;
  background: var(--c-sand);
  border-radius: 12px;
  font-family: var(--f-display);
  font-size: 24px; line-height: 1.42; font-style: italic;
  color: var(--c-canopy);
}
.article-lede { font-family: var(--f-display); font-style: italic; font-size: 20px; line-height: 1.65; color: var(--c-ink-soft); }

.inline-cta {
  margin-top: 52px;
  padding: 34px;
  background: var(--c-canopy); color: var(--c-cream);
  border-radius: var(--r-lg);
  display: flex; justify-content: space-between; align-items: center;
  gap: 28px; flex-wrap: wrap;
}
/* line-height set here: it inherited the article's 1.8, which only showed
   once the title wrapped on a phone. */
.inline-cta__title { font-family: var(--f-display); font-size: 29px; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 10px; }
.inline-cta__sub { font-size: 15.5px; color: rgba(246, 242, 233, .66); }


/* --------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------- */

.about-hero {
  position: relative;
  min-height: 520px;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-cream);
}
/* the image now lives in .parallax-band__media; the scrim does the darkening */
.about-hero__inner { position: relative; width: 100%; padding-bottom: 74px; }

.stat-table { display: flex; flex-direction: column; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; }
.stat-table__row { background: var(--c-linen); padding: 26px; display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.stat-table__row strong { font-size: 16px; font-weight: 600; }
.stat-table__row span { font-family: var(--f-display); font-size: 30px; text-align: right; line-height: 1.15; }
/* On a phone "United Kingdom" and "528% funded" wrapped and fell back to
   the left edge while the one-line values sat right; all values now hold
   the right edge, a size down. */
@media (max-width: 700px) {
  .stat-table__row { padding: 20px; }
  .stat-table__row span { font-size: 24px; }
}


/* --------------------------------------------------------------------------
   SEARCH + ACCOUNT
   -------------------------------------------------------------------------- */

.search-input {
  font-family: var(--f-display);
  width: 100%;
  padding: 22px 28px;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  border-radius: 14px;
  font-size: clamp(22px, 3vw, 30px);
  outline: none;
  margin-bottom: 18px;
}
.search-input:focus { border-color: var(--c-spectrum); }
.suggestions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 34px; }
.suggestion {
  font-size: 13.5px;
  padding: 8px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: none;
  color: var(--c-ink-soft);
  transition: background var(--t-control);
}
.suggestion:hover { background: var(--c-sand); }

.order-card { border: 1px solid var(--c-line); border-radius: 14px; padding: 30px; background: var(--c-paper); }
/* No wrap: on a phone a long status ("Pre-order confirmed") pushed the price
   onto its own line while a short one kept it top-right, so the cards didn't
   match. The status wraps inside its column instead. */
.order-card__top { display: flex; justify-content: space-between; gap: var(--sp-6); margin-bottom: 18px; }
.order-card__top > div:first-child { min-width: 0; }
.order-card__id { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--c-stone); margin-bottom: 6px; }
.order-card__status { font-family: var(--f-display); font-size: 26px; letter-spacing: -.015em; }
.order-card__items { font-size: 15px; color: var(--c-ink-soft); padding-top: 6px; }
.order-card__total { font-family: var(--f-display); font-size: 30px; }
.order-card__stage { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--c-stone); margin-top: 9px; }


/* --------------------------------------------------------------------------
   LANDING PAGE (paid traffic)
   -------------------------------------------------------------------------- */

.lp-hero {
  background: var(--c-ink); color: var(--c-cream);
  position: relative; overflow: hidden;
  padding-block: clamp(72px, 9vw, 110px);
  text-align: center;
}
.lp-hero__media {
  position: absolute; inset: -14% 0; height: 128%; width: 100%;
  opacity: .32; will-change: transform;
}
.lp-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-hero__inner { position: relative; max-width: 900px; margin-inline: auto; padding-inline: var(--gutter); }
.lp-hero__flag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-label); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-spectrum);
  border: 1px solid rgba(232, 163, 61, .4);
  padding: 9px 18px; border-radius: var(--r-pill);
  margin-bottom: 26px;
}
.lp-hero h1 em { font-style: italic; color: var(--c-spectrum); }
.lp-proof { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; font-size: 14.5px; color: var(--c-cream-60); margin-top: 30px; }

.lp-close {
  background: var(--c-canopy); color: var(--c-cream);
  border-radius: 18px;
  padding: clamp(36px, 5vw, 60px);
  text-align: center;
  position: relative; overflow: hidden;
}
.lp-close__glow {
  position: absolute; top: -200px; left: 50%;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 163, 61, .3) 0%, rgba(232, 163, 61, 0) 66%);
  animation: lp-glow 6s ease-in-out infinite;
  pointer-events: none;
  transform: translate(calc(-50% + var(--gx, 0px)), var(--gy, 0px));
  transition: transform var(--glow-move);
}
.lp-close > :not(.lp-close__glow) { position: relative; }


/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.notfound {
  min-height: 66vh;
  display: flex; align-items: center; justify-content: center;
  padding: 96px var(--gutter);
  text-align: center;
}
.notfound__code { font-family: var(--f-display); font-weight: 300; font-size: clamp(80px, 12vw, 120px); line-height: 1; letter-spacing: -.04em; color: var(--c-canopy); margin-bottom: 12px; }
.notfound__title { font-family: var(--f-display); font-size: 32px; font-style: italic; color: var(--c-stone); margin-bottom: 14px; }


/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

/* Stacked layouts use minmax(0, 1fr), not 1fr: a bare 1fr column grows to
   its widest unbreakable child (a no-wrap button, a row of tiles), which on
   a 320px phone pushed whole pages past the screen edge. */
@media (max-width: 1100px) {
  .pdp { grid-template-columns: minmax(0, 1fr); }
  .pdp__gallery { position: static; }
  .key-features { grid-template-columns: 1fr; gap: 30px; }
  .proof-ks { grid-template-columns: 1fr; }
  .cart-layout, .checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .order-summary { position: static; }
  .product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .review-wall { columns: 2; }
  .mosaic { grid-template-columns: 1fr 1fr; height: auto; }
  .mosaic > div:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
  .mosaic > div { aspect-ratio: 4 / 3; }
}

@media (max-width: 900px) {
  .split, .split--wide-right, .split--wide-left,
  .collection-head, .final-cta, .versus, .pendant-teaser__grid,
  .fb-block, .upsell-panel { grid-template-columns: minmax(0, 1fr); }
  .final-cta { gap: 32px; }
  /* The flip only exists to alternate sides; stacked, media leads again. */
  .fb-block--flip .fb-block__media { order: 0; }
  .trust-bar { grid-template-columns: 1fr 1fr; }
  /* Every item on exactly two lines, broken where data.js marks it. */
  .trust-bar__br { display: inline; }
  .trust-bar__item { padding: 18px 10px; white-space: nowrap; line-height: 1.7; }
  .trust-bar__item:nth-child(2n) { border-left: 1px solid var(--c-line); }
  .trust-bar__item:nth-child(n+3) { border-top: 1px solid var(--c-line); }
  .trust-bar__item:nth-child(2n+1) { border-left: 0; }
  .collection-head { gap: 24px; }
  .collection-head__tools { justify-content: flex-start; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Stacked, the three images ran two screens long; a swipeable row keeps
     them to one, with the next image peeking in as the cue (review #5). */
  .triptych {
    display: flex; gap: 16px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .triptych::-webkit-scrollbar { display: none; }
  .triptych__item { flex: 0 0 min(78%, 360px); scroll-snap-align: start; }
  .triptych__item:nth-child(2) { padding-top: 0; }
  .hero { padding-top: 140px; min-height: 620px; }
  .height-show { grid-template-columns: minmax(0, 520px); gap: 32px; }
  .height-show__panel { gap: 24px; }
}

@media (max-width: 700px) {
  .product-grid, .product-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  /* Homepage "Find your Anthos": a swipe row, the same rhythm as "Grown
     under Anthos", instead of a 2-up grid leaving the third card alone. */
  .product-grid--row {
    display: flex; gap: 16px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .product-grid--row::-webkit-scrollbar { display: none; }
  .product-grid--row > * { flex: 0 0 260px; scroll-snap-align: start; }
  .product-card__name { font-size: 19px; }
  .stat-band { grid-template-columns: 1fr; gap: 20px; }
  .review-wall { columns: 1; }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .field-grid .input--wide { grid-column: span 1; }
  /* A swipe row rather than three photos stacked down the screen, sized
     like the other rows on the page (Leo, 22 Sep). */
  .mosaic {
    display: flex; gap: 16px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .mosaic::-webkit-scrollbar { display: none; }
  .mosaic > div,
  .mosaic > div:first-child { flex: 0 0 260px; aspect-ratio: 4 / 5; scroll-snap-align: start; }
  /* Five fixed 64px thumbs needed 368px and left the fifth alone on a
     second row; five equal columns always fit the gallery's width. */
  .pdp__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .pdp__thumb { width: auto; height: auto; aspect-ratio: 1; }
  /* Stacked on a phone, the band's copy runs down its lighter middle; an
     even scrim keeps the grey captions readable over the photo. */
  .parallax-band__scrim { background: rgba(15, 18, 13, .74); }
  .proof-ks__stats { gap: 20px; }
  .detail-row { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .detail-row__img { max-width: 160px; }
  .quiz { padding-inline: var(--gutter); }
  .quiz__option { padding: 18px 20px; font-size: 16px; }
}


/* --------------------------------------------------------------------------
   LEGAL PAGES
   -------------------------------------------------------------------------- */

.legal h2 { font-size: 26px; margin: 40px 0 14px; }
.legal h2:first-child { margin-top: 0; }
.legal ul { margin: 0 0 26px; padding-left: 22px; }
.legal li { margin-bottom: 10px; }
/* Placeholders and caveats read as editorial notes, not as body copy. */
.legal em { color: var(--c-clay); font-style: italic; }

.legal-note {
  background: var(--c-sand);
  border-left: 3px solid var(--c-moss);
  border-radius: var(--r-sm);
  padding: 20px 24px;
  margin-bottom: 40px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-ink-soft);
}
.legal-note strong { display: block; color: var(--c-ink); margin-bottom: 4px; }
.legal-note--review { border-left-color: var(--c-clay); }

.legal__nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid var(--c-line);
  font-size: 15px;
}