/* =====================================================================
   Mush Love: product pages (/products/<handle>/)
   Gallery + lightbox + 3D viewer · info column · accordions ·
   meet the mushroom · blend list · bundle contents · related · sticky phone CTA
   ===================================================================== */

.pdp-page {
  --lightbox: radial-gradient(120% 95% at 50% 36%, #fffdf8 0%, var(--panel) 52%, var(--bg-2) 100%);
}
[data-glow="on"] .pdp-page {
  /* a dimly lit specimen case in the dark: bright enough to keep studio photos honest, never the
     brightest thing on the page (the vignette + glow rim live on .gal__stage::after) */
  --lightbox: radial-gradient(105% 85% at 50% 40%, #d6cebc 0%, #b2a993 52%, #6f6858 100%);
}

/* ------------------------------------------------------------- top area */
.pdp { padding: clamp(14px, 2vw, 26px) 0 clamp(56px, 7vw, 96px); }
.pdp__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; list-style: none; padding: 0; }
.pdp__crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pdp__crumbs [aria-current] { color: var(--ink-2); }

.pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5.2vw, 92px);
  align-items: start;
  margin-top: clamp(18px, 2.4vw, 30px);
}
.pdp__media { position: sticky; top: calc(var(--header-h) + 18px); min-width: 0; }

@media (max-width: 999px) {
  .pdp__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 40px); }
}
@media (max-width: 719px) {
  .pdp__grid { grid-template-columns: minmax(0, 1fr); }
  .pdp__media { position: relative; top: 0; max-width: 560px; width: 100%; margin-inline: auto; }
  .pdp__info { max-width: 560px; width: 100%; margin-inline: auto; }
}

/* --------------------------------------------------------------- gallery */
/* DOM order is thumbs → stage (matches the desktop thumb column); narrower, the thumbs move under the stage */
.gal { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.gal__thumbs { order: 1; }
@media (min-width: 1200px) {
  .gal { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: start; }
  .gal__thumbs { order: 0; flex-direction: column; }
}

.gal__stage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  background: var(--lightbox);
  border: 1px solid var(--line);
  box-shadow: 0 50px 90px -60px rgba(var(--shadow), .55);
  transition: border-color .6s var(--ease), box-shadow .6s var(--ease);
}
[data-glow="on"] .gal__stage {
  border-color: color-mix(in srgb, var(--glow) 22%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 10%, transparent), 0 40px 120px -50px color-mix(in srgb, var(--glow) 45%, transparent);
}
/* Glow: the photo case gets the same night treatment as the 3D case (a soft vignette and a faint
   bioluminescent rim), so switching between them reads as one lit display case */
.gal__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, .35), inset 0 0 0 1px color-mix(in srgb, var(--glow) 18%, transparent), inset 0 -40px 80px -40px color-mix(in srgb, var(--glow) 22%, transparent);
}
[data-glow="on"] .gal__stage::after { opacity: 1; }
[data-glow="on"] .gal__slide--photo img { filter: brightness(.9) saturate(.95); }

.gal__track {
  position: absolute; inset: 0;
  display: grid;
  outline: none;
}
.gal__track:focus-visible { box-shadow: inset 0 0 0 2px var(--moss); border-radius: inherit; z-index: 4; }
.gal__slide {
  grid-area: 1 / 1;
  position: relative;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .75s var(--ease), visibility 0s linear .75s;
}
.gal__slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity .75s var(--ease), visibility 0s; }
.gal__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  transition: transform 1.3s var(--ease);
  user-select: none;
  -webkit-user-drag: none;
}
.gal__slide.is-active img { transform: none; }
/* studio shots melt into the paper lightbox; non-square ones are shown whole (white point lifted a touch
   so their near-white background never leaves a visible edge) */
.gal__slide--studio { background: var(--lightbox); }
.gal__slide--studio img { mix-blend-mode: multiply; }
.gal-fit--contain img {
  object-fit: contain; padding: 6%; filter: brightness(1.035);
  /* feather the photo's own edges so a drop shadow that runs off the shot never leaves a hard line */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
  -webkit-mask-origin: content-box; mask-origin: content-box;
  -webkit-mask-clip: content-box; mask-clip: content-box;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* Supplement Facts (the back of a tincture bottle): always shown whole, a little larger than the other
   studio shots, with a stronger hover zoom so the label can be read under the pointer (the source is
   2000px, so 3.2x on a ~560px stage is still sharp) */
.gal-fit--label { --zoom: 3.2; }
.gal__slide.gal-fit--label img { padding: 3.5%; }
/* the how-to illustration: an inset card on the lightbox, clear of the counter, 3D and expand buttons */
.gal__slide--art img {
  position: absolute; left: 56px; top: 50px;
  width: calc(100% - 112px); height: calc(100% - 112px);
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 30px 60px -34px rgba(var(--shadow), .6), 0 0 0 1px rgba(0, 0, 0, .05);
}
.gal__slide--art { --zoom: 2.4; }
@container (max-width: 520px) {
  .gal__slide--art img { left: 52px; top: 46px; width: calc(100% - 104px); height: calc(100% - 104px); border-radius: 10px; }
}
@media (hover: hover) and (pointer: fine) {
  .gal:not(.is-3d) .gal__track { cursor: zoom-in; }
  .gal__slide.is-active.is-zoomed img { transform: scale(var(--zoom, 2)); transition: transform .45s var(--ease-out); }
}

/* stage chrome: counter, arrows, 3D toggle */
.gal__meta {
  position: absolute; left: 16px; bottom: 16px; z-index: 5;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.gal__count {
  display: inline-flex; gap: 4px;
  height: 34px; padding: 0 14px; align-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  font-family: var(--font-display); font-size: 14px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.gal__count b { font-weight: 500; color: var(--ink); }
.gal__arrows {
  position: absolute; inset: 50% 14px auto; z-index: 5;
  display: flex; justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.gal__arrow {
  pointer-events: auto;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); color: var(--ink);
  opacity: 0; transform: scale(.9);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.gal__arrow:hover { background: var(--moss); color: var(--moss-ink); border-color: var(--moss); }
.gal__arrow .i { width: 18px; height: 18px; }
.gal__stage:hover .gal__arrow, .gal__arrow:focus-visible { opacity: 1; transform: none; }
.gal__stage:has(.is-zoomed) .gal__arrow { opacity: 0; }
.gal.is-3d .gal__arrows, .gal.is-3d .gal__meta { opacity: 0; pointer-events: none; }
.gal.is-3d .gal__arrow { visibility: hidden; }
@media (hover: none) { .gal__arrow { opacity: 1; transform: none; } }

/* open the current photo large (lightbox) */
.gal__expand {
  position: absolute; right: 16px; top: 16px; z-index: 5;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  color: var(--ink);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.gal__expand .i { width: 17px; height: 17px; }
.gal__expand:hover { background: var(--moss); color: var(--moss-ink); border-color: var(--moss); transform: scale(1.06); }
.gal__stage:has(.is-zoomed) .gal__expand { opacity: 0; }
.gal.is-3d .gal__expand { opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s; }

.gal__toggle {
  position: absolute; right: 16px; bottom: 16px; z-index: 6;
  display: inline-grid;
  height: 40px; padding: 0 16px 0 12px;
  border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-size: 13px; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 14px 30px -14px rgba(var(--shadow), .6);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .35s var(--ease), box-shadow .3s var(--ease);
}
.gal__toggle > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; transition: opacity .3s var(--ease), transform .4s var(--ease); }
.gal__toggle .i { width: 18px; height: 18px; }
.gal__toggle-off { opacity: 0; transform: translateY(8px); }
.gal__toggle[aria-pressed="true"] .gal__toggle-on { opacity: 0; transform: translateY(-8px); }
.gal__toggle[aria-pressed="true"] .gal__toggle-off { opacity: 1; transform: none; }
.gal__toggle:hover { transform: translateY(-2px); }
.gal__toggle:hover .gal__toggle-on .i { animation: cube-nod 1.2s var(--ease) infinite; }
.gal__toggle::before { /* soft "live" pulse so the 3D option is discoverable */
  content: ""; position: absolute; inset: -4px; border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  animation: toggle-pulse 2.8s var(--ease) 1.2s 3 both;
  pointer-events: none;
}
.gal__toggle[aria-pressed="true"]::before { animation: none; opacity: 0; }
[data-glow="on"] .gal__toggle { background: var(--glow); color: #07120d; box-shadow: 0 0 30px -6px color-mix(in srgb, var(--glow) 70%, transparent); }
[data-glow="on"] .gal__toggle::before { border-color: color-mix(in srgb, var(--glow) 60%, transparent); }
@keyframes toggle-pulse { 0% { transform: scale(.96); opacity: .9; } 70%, 100% { transform: scale(1.18); opacity: 0; } }
@keyframes cube-nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg) scale(1.08); } }

/* thumbs */
.gal__thumbs { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; }
.gal__thumbs li { flex: none; }
.gal__thumb {
  position: relative;
  display: block;
  width: 76px; aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--lightbox);
  border: 1px solid var(--line);
  transition: transform .35s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.gal__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .3s var(--ease); }
.gal__thumb--studio img { mix-blend-mode: multiply; }
.gal__thumb.gal-fit--contain img { object-fit: contain; padding: 8%; filter: brightness(1.035); }
/* the Supplement Facts thumb is framed on the label itself, so it reads as "the facts" at a glance
   and never looks like a second copy of the front of the bottle */
.gal__thumb.gal-fit--label img { padding: 0; object-fit: cover; transform: scale(2.1); transform-origin: 50% 67%; }
.gal__thumb.gal-fit--label:hover img { transform: scale(2.2); }
.gal__thumb::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--moss), inset 0 0 0 4px var(--panel);
  opacity: 0; transition: opacity .3s var(--ease);
}
.gal__thumb:hover { transform: translateY(-2px); border-color: var(--line-2); }
.gal__thumb:hover img { transform: scale(1.06); }
.gal__thumb[aria-pressed="false"] img { opacity: .78; }
.gal__thumb[aria-pressed="true"]::after { opacity: 1; }
.gal__thumb:focus-visible { outline-offset: 3px; }
[data-glow="on"] .gal__thumb[aria-pressed="true"]::after { box-shadow: inset 0 0 0 2px var(--glow), inset 0 0 0 4px #0c110b; }

.gal__thumb--3d { background: var(--moss-tint); }
.gal__thumb-crop {
  position: absolute; inset: 0;
  background-image: var(--crop); background-size: var(--crop-size); background-position: var(--crop-pos); background-repeat: no-repeat;
  transition: transform .8s var(--ease);
}
.gal__thumb--3d:hover .gal__thumb-crop { transform: scale(1.08) rotate(-4deg); }
.gal__thumb-3d {
  position: absolute; left: 50%; bottom: 6px; z-index: 1;
  display: inline-flex; align-items: center; gap: 3px;
  height: 22px; padding: 0 8px 0 6px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
}
.gal__thumb-3d .i { width: 13px; height: 13px; }
[data-glow="on"] .gal__thumb-3d { background: var(--glow); color: #07120d; }

/* desktop column: five photos + the 3D thumb stay within the stage height, even at 1200px */
@media (min-width: 1200px) {
  .gal { --thumb: clamp(66px, 5.4vw, 76px); grid-template-columns: var(--thumb) minmax(0, 1fr); }
  .gal__thumbs { gap: 9px; }
  .gal__thumb { width: var(--thumb); }
}
/* under the stage: the row shares the stage width (up to 76px each), so every photo is in sight */
@media (max-width: 1199px) {
  ul.gal__thumbs { overflow-x: auto; scrollbar-width: none; padding: 4px 2px; margin: -4px -2px; }
  .gal__thumbs::-webkit-scrollbar { display: none; }
  .gal__thumbs li { flex: 0 1 76px; min-width: 52px; }
  .gal__thumb { width: 100%; }
}

/* phones: swipeable scroll-snap track (all slides side by side) */
@media (max-width: 760px) {
  .gal { gap: 12px; }
  .gal__stage { border-radius: var(--r-l); }
  .gal__track {
    display: flex;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .gal__track::-webkit-scrollbar { display: none; }
  .gal__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    opacity: 1; visibility: visible;
    transition: none;
  }
  .gal__slide img { transform: none; transition: none; }
  /* phones: the thumbnails become a row of progress dots (24px tap targets) under the swipe track.
     The photos are one swipe away and "View in 3D" lives on the stage, so the price and the Order
     button fit on the first screen */
  ul.gal__thumbs { justify-content: center; gap: 0; overflow: visible; padding: 0; margin: -4px 0 -6px; }
  .gal__thumbs li { flex: none; min-width: 0; }
  .gal__thumbs-3d { display: none; }
  .gal__thumb { width: 26px; height: 24px; aspect-ratio: auto; border: 0; border-radius: 999px; background: none; overflow: visible; }
  .gal__thumb img { display: none; }
  .gal__thumb:hover { transform: none; }
  .gal__thumb::after {
    inset: 8px 9px; opacity: 1; border-radius: 999px;
    background: var(--line-2); box-shadow: none;
    transition: inset .4s var(--ease), background-color .3s var(--ease);
  }
  .gal__thumb[aria-pressed="true"]::after { inset: 8px 3px; background: var(--ink); }
  [data-glow="on"] .gal__thumb[aria-pressed="true"]::after { background: var(--glow); box-shadow: 0 0 10px color-mix(in srgb, var(--glow) 60%, transparent); }
}

/* ---------------------------------------------------------------- viewer */
.viewer {
  --specimen-glow: var(--glow);
  position: absolute; inset: 0; z-index: 3;
  /* Day: the Atlas paper, a step darker than the page with a soft vignette, so a cream specimen
     (lion's mane) still reads clearly against it */
  background:
    radial-gradient(120% 110% at 50% 38%, transparent 55%, rgba(var(--shadow), .14) 100%),
    radial-gradient(110% 100% at 50% 34%, #f8f2e6 0%, var(--bg) 42%, #e2d7c1 100%);
  opacity: 0;
  transition: opacity .55s var(--ease), background .6s var(--ease);
}
.viewer.is-on { opacity: 1; }
[data-glow="on"] .viewer {
  background:
    radial-gradient(60% 46% at 50% 82%, color-mix(in srgb, var(--specimen-glow) 16%, transparent) 0%, transparent 70%),
    radial-gradient(110% 100% at 50% 30%, #15201a 0%, #0d130c 55%, #080c07 100%);
}
.viewer__pool {
  position: absolute; left: 50%; bottom: 13%;
  width: min(64%, 440px); height: 46px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--shadow), .26), transparent);
  transition: background .6s var(--ease), opacity .6s var(--ease);
}
[data-glow="on"] .viewer__pool { background: radial-gradient(closest-side, color-mix(in srgb, var(--specimen-glow) 38%, transparent), transparent); }
.viewer__stage {
  position: absolute; inset: 0;
  touch-action: pan-y;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  outline: none;
}
.viewer__stage.is-grabbing { cursor: grabbing; }
.viewer__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--moss); border-radius: inherit; }
[data-glow="on"] .viewer__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--glow); }
.viewer__canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }

.viewer__loader {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: 14px;
  font-size: 12.5px; color: var(--muted);
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
.viewer.is-ready .viewer__loader { opacity: 0; }
.viewer__ring {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--line-2); border-top-color: var(--moss);
  animation: viewer-spin 1s linear infinite;
}
[data-glow="on"] .viewer__ring { border-top-color: var(--glow); }
@keyframes viewer-spin { to { transform: rotate(360deg); } }

.viewer__hint {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  pointer-events: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.viewer__hint .i { width: 16px; height: 16px; animation: hint-sway 2.4s var(--ease) infinite; }
.viewer__hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .viewer__hint-touch { display: none; }
  .viewer__hint-mouse { display: inline; }
}
.viewer__hint.is-gone { opacity: 0; transform: translateY(-6px); }
@keyframes hint-sway { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(5px) rotate(8deg); } }

.viewer__toast {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  padding: 10px 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 86%, transparent); color: var(--bg);
  font-size: 13px; font-weight: 700;
  transform: translate(-50%, -50%) scale(.96);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  white-space: nowrap;
}
.viewer__toast.is-on { opacity: 1; transform: translate(-50%, -50%); }
.viewer__toast kbd { font: inherit; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--bg) 18%, transparent); }

.viewer__tools {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  display: grid; gap: 8px;
}
.viewer__btn {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border: 1px solid var(--line); color: var(--ink);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.viewer__btn:hover { border-color: var(--moss); }
.viewer__btn:active { transform: scale(.92); }
.viewer__btn .i { width: 17px; height: 17px; }

.viewer__caption {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  display: grid; gap: 2px;
  pointer-events: none;
  max-width: calc(100% - 210px);
}
.viewer__latin { font-family: var(--font-display); font-style: italic; font-size: clamp(16px, 1.5vw, 20px); color: var(--ink); line-height: 1.15; }
.viewer__note { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
[data-glow="on"] .viewer__latin { color: var(--specimen-glow); text-shadow: 0 0 20px color-mix(in srgb, var(--specimen-glow) 50%, transparent); }

/* the viewer chrome follows the stage's own width (two-column tablets have a small stage too) */
@container (max-width: 520px) {
  .viewer__hint { top: 14px; right: 14px; }
  .viewer__tools { left: 12px; top: 12px; gap: 6px; }
  .viewer__btn { width: 34px; height: 34px; }
  .viewer__caption { left: 14px; bottom: 62px; max-width: calc(100% - 28px); }
  .viewer__latin { font-size: 16px; }
  .viewer__note { display: none; }
  .gal__toggle { right: 12px; bottom: 12px; height: 38px; padding: 0 14px 0 11px; font-size: 12.5px; }
  .gal__meta { left: 12px; bottom: 12px; }
  .gal__count { height: 30px; padding: 0 12px; font-size: 13px; }
  .gal__arrows { inset-inline: 10px; }
  .gal__arrow { width: 38px; height: 38px; }
  .gal__expand { right: 12px; top: 12px; width: 38px; height: 38px; }
}

/* ----------------------------------------------------------- info column */
.pdp__info { min-width: 0; padding-top: 6px; }
.pdp__eyebrow { flex-wrap: wrap; }
.pdp__eyebrow a { text-decoration: none; }
.pdp__eyebrow a:hover { color: var(--ink); }
.pdp__badge {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px; margin-left: 4px;
  border-radius: 999px;
  background: var(--amanita); color: var(--amanita-ink);
  font-size: 10px; letter-spacing: .12em;
}
.pdp__title {
  margin-top: 18px;
  font-size: clamp(38px, 5vw, 76px);
  line-height: .95;
  letter-spacing: -.04em;
  font-weight: 380;
}
.pdp__tagline {
  margin-top: 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(20px, 1.75vw, 25px);
  line-height: 1.3;
  color: var(--ink-2);
}

.pdp__buy {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 26px; padding: 16px 0;
  border-block: 1px solid var(--line);
}
.pdp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; font-family: var(--font-display); }
.pdp__now { font-size: clamp(36px, 3.2vw, 46px); line-height: 1; letter-spacing: -.03em; }
.pdp__was { font-size: 21px; color: var(--muted); text-decoration-thickness: 1.5px; }
.pdp__save {
  align-self: center;
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 10px;
  border-radius: 999px;
  background: var(--amanita-tint); color: var(--amanita);
  font-family: var(--font-sans); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.pdp__size {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: var(--chip);
  font-size: 13.5px; font-weight: 700; color: var(--ink-2);
}
.pdp__size .i { width: 17px; height: 17px; color: var(--moss); }

.pdp__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; list-style: none; padding: 0; }
.pdp__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ink-2);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background-color .6s var(--ease);
}
.pdp__chip:hover { border-color: var(--moss); transform: translateY(-1px); }
.pdp__chip .i { width: 15px; height: 15px; color: var(--moss); }
[data-glow="on"] .pdp__chip .i { color: var(--glow); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--glow) 60%, transparent)); }
.pdp__ast { font-size: .75em; color: var(--muted); margin-left: 1px; }

.pdp__desc { margin-top: 22px; font-size: 16.5px; line-height: 1.72; color: var(--ink-2); max-width: 62ch; }
.pdp__desc p + p { margin-top: 1em; }

.pdp__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.pdp__order { flex: 3 1 260px; }
.pdp__ask { flex: 1 1 auto; }
.pdp__order .i { width: 19px; height: 19px; }
.pdp__order:hover .i { transform: translate(2px, -2px); }

.pdp__assure { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }

/* bundle upsell on single-tincture pages */
.pdp__bundle {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 38px; align-items: center; gap: 14px;
  margin-top: 22px; padding: 8px 10px 8px 8px;
  border-radius: 18px;
  background: var(--moss-tint);
  border: 1px solid color-mix(in srgb, var(--moss) 18%, transparent);
  color: inherit; text-decoration: none;
  transition: border-color .3s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease), background-color .6s var(--ease);
}
.pdp__bundle:hover { border-color: color-mix(in srgb, var(--moss) 50%, transparent); transform: translateY(-2px); box-shadow: 0 22px 40px -28px rgba(var(--shadow), .55); }
[data-glow="on"] .pdp__bundle { border-color: color-mix(in srgb, var(--glow) 22%, transparent); }
[data-glow="on"] .pdp__bundle:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 30%, transparent), 0 20px 50px -26px color-mix(in srgb, var(--glow) 45%, transparent); }
.pdp__bundle-media { display: block; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--panel); }
.pdp__bundle-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pdp__bundle:hover .pdp__bundle-media img { transform: scale(1.08); }
.pdp__bundle-text { display: grid; gap: 1px; min-width: 0; }
.pdp__bundle-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pdp__bundle-line { font-family: var(--font-display); font-size: 17.5px; line-height: 1.3; color: var(--ink); }
.pdp__bundle-line b { font-weight: 500; }
.pdp__bundle-was { color: var(--muted); font-size: .86em; white-space: nowrap; }
.pdp__bundle-go {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--panel); color: var(--ink);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .45s var(--ease);
}
.pdp__bundle-go .i { width: 17px; height: 17px; }
.pdp__bundle:hover .pdp__bundle-go { background: var(--moss); color: var(--moss-ink); transform: translateX(2px); }
.pdp__assure li { display: flex; align-items: center; gap: 12px; }
.pdp__assure .i { width: 18px; height: 18px; color: var(--moss); }

/* accordions */
.pdp__accs { margin-top: 34px; border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); }
.acc__sum {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 22px; align-items: center; gap: 14px;
  padding: 20px 2px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display); font-size: 22px; letter-spacing: -.012em; line-height: 1.2;
  border-radius: 6px;
  transition: color .3s var(--ease);
}
.acc__sum::-webkit-details-marker { display: none; }
.acc__sum::marker { content: ""; }
.acc__sum:hover { color: var(--moss); }
[data-glow="on"] .acc__sum:hover { color: var(--glow); }
.acc__icon { display: grid; place-items: center; color: var(--muted); }
.acc__icon .i { width: 19px; height: 19px; }
.acc__plus { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); }
.acc__plus::before, .acc__plus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 1.5px; border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .45s var(--ease);
}
.acc__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc[open] .acc__plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc[open] .acc__plus { border-color: var(--moss); }
.acc__body { overflow: hidden; }
.acc__inner { padding: 0 2px 24px 40px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.acc__inner > * + * { margin-top: 14px; }
.acc__list { list-style: none; padding: 0; display: grid; gap: 10px; }
.acc__list li { display: flex; gap: 10px; align-items: flex-start; }
.acc__list .i { width: 18px; height: 18px; margin-top: 3px; color: var(--moss); }
.acc__traits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.acc__traits > div { padding: 12px 14px; border-radius: var(--r-s); background: var(--chip); }
.acc__traits dt { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.acc__traits dt .i { width: 14px; height: 14px; }
.acc__traits dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 16px; line-height: 1.3; color: var(--ink); }

/* "View Supplement Facts": sits in the Ingredients row, between the title and the plus */
.pdp__acc-row { position: relative; }
.pdp__facts {
  position: absolute; right: 38px; top: 20px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 2px;
  font-size: 13px; font-weight: 800; letter-spacing: .01em; line-height: 1;
  color: var(--moss);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.pdp__facts .i { width: 16px; height: 16px; flex: none; }
.pdp__facts:hover { color: var(--ink); text-decoration-color: currentColor; }
[data-glow="on"] .pdp__facts { color: var(--glow); }
[data-glow="on"] .pdp__facts:hover { color: var(--ink); }
.pdp__acc-row .acc__title { padding-right: 190px; }

.pdp__fda { margin-top: 22px; font-size: 12px; line-height: 1.55; color: var(--muted); max-width: 62ch; }
.pdp__fda span { margin-right: 2px; }

@media (max-width: 760px) {
  /* phones: keep the price on the first screen (one-line breadcrumb, tighter rhythm) */
  .pdp__facts { right: 34px; top: 18px; height: 24px; }
  .pdp__crumbs ol { flex-wrap: nowrap; overflow: hidden; }
  .pdp__crumbs li:first-child { display: none; }
  .pdp__crumbs li:first-child + li > .i { display: none; }
  .pdp__crumbs li:last-child { flex: 1 1 auto; min-width: 0; }
  .pdp__crumbs li:last-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pdp__grid { margin-top: 12px; gap: 16px; }
  .pdp__info { padding-top: 0; }
  .pdp__title { margin-top: 8px; font-size: clamp(34px, 9.8vw, 42px); }
  .pdp__tagline { margin-top: 10px; font-size: 19px; }
  .pdp__buy { margin-top: 18px; padding: 12px 0; }
  .pdp__now { font-size: 34px; }
  .pdp__ctas { flex-direction: column; margin-top: 18px; }
  .pdp__ctas .btn { width: 100%; flex: none; }
  .acc__sum { font-size: 20px; padding: 18px 0; }
  .acc__inner { padding-left: 0; }
  .acc__traits { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  /* "Supplement Facts" alone (the full name stays for screen readers) */
  .pdp__facts-view { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .pdp__acc-row .acc__title { padding-right: 150px; }
}

/* --------------------------------------------------------- chalk marquee */
.pdp-band {
  border-block: 1px solid var(--line);
  padding: clamp(14px, 1.8vw, 22px) 0;
  background: var(--bg-2);
  transition: background-color .6s var(--ease);
  overflow: hidden;
}
.pdp-band__item {
  padding: 0 clamp(18px, 2.4vw, 34px);
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(22px, 2.6vw, 38px);
  letter-spacing: -.02em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
}
.pdp-band__sep { display: inline-grid; place-items: center; color: var(--amanita); }
.pdp-band__sep .i { width: 22px; height: 22px; }
[data-glow="on"] .pdp-band__sep { color: var(--glow); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--glow) 70%, transparent)); }

/* ---------------------------------------------------- meet the mushroom */
.meet { overflow: hidden; }
.meet__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
}
.meet__visual { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; margin-inline: auto; }
.meet__orbit { position: absolute; inset: 0; animation: orbit 70s linear infinite; }
.meet__orbit svg { width: 100%; height: 100%; overflow: visible; }
.meet__orbit text {
  font-family: var(--font-sans); font-size: 7.4px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase;
  fill: var(--muted);
}
@keyframes orbit { to { transform: rotate(360deg); } }
.meet__crop {
  position: absolute; inset: 15%; /* about 364px at most, from a 1200px close-up: always crisp */
  border-radius: 50%;
  overflow: hidden;
  background: var(--chip);
  box-shadow: 0 60px 90px -50px rgba(var(--shadow), .6);
  transform: translateY(var(--py, 0px));
  transition: box-shadow .6s var(--ease);
  will-change: transform;
}
.meet__crop img, .meet__lens-crop img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.meet__crop::after { /* soft studio vignette + hairline rim */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .16), transparent 45%), radial-gradient(circle, transparent 55%, rgba(0, 0, 0, .18) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
[data-glow="on"] .meet__crop {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--specimen-glow) 45%, transparent),
    0 0 60px -6px color-mix(in srgb, var(--specimen-glow) 55%, transparent),
    0 0 160px -20px color-mix(in srgb, var(--specimen-glow) 35%, transparent);
}
[data-glow="on"] .meet__orbit text { fill: color-mix(in srgb, var(--specimen-glow) 70%, var(--muted)); }

.meet__lens {
  position: absolute; right: -2%; bottom: 0; z-index: 1;
  display: flex; align-items: center; gap: 14px;
  width: min(330px, 78%);
  margin: 0;
  padding: 10px 18px 10px 10px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -28px rgba(var(--shadow), .55);
}
.meet__lens-crop {
  position: relative;
  flex: none; width: 72px; height: 72px; border-radius: 50%;
  overflow: hidden;
  background: var(--chip);
}
.meet__lens-crop::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.meet__lens figcaption { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.meet__lens-title { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 17px; color: var(--ink); }

.meet__name { margin-top: 18px; font-size: clamp(56px, 7.4vw, 116px); line-height: .88; letter-spacing: -.05em; font-weight: 350; }
.meet__latin { margin-top: 12px; font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 1.6vw, 22px); color: var(--muted); }
.meet__caption { margin: 26px 0 0; padding-left: 20px; border-left: 2px solid var(--accent); }
.meet__caption p { font-family: var(--font-display); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: clamp(21px, 2vw, 28px); line-height: 1.28; color: var(--ink); }
.meet__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; list-style: none; padding: 0; }
.meet__desc { margin-top: 20px; color: var(--ink-2); max-width: 58ch; }
.meet__traits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 28px; }
.meet__trait { padding: 14px 0; border-top: 1px solid var(--line); }
.meet__trait:last-child { grid-column: 1 / -1; }
.meet__trait dt { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.meet__trait dt .i { width: 16px; height: 16px; color: var(--moss); }
[data-glow="on"] .meet__trait dt .i { color: var(--specimen-glow); }
.meet__trait dd { margin: 6px 0 0; font-family: var(--font-display); font-size: 19px; line-height: 1.3; }
.meet__link { margin-top: 26px; }

@media (max-width: 999px) {
  .meet__grid { grid-template-columns: minmax(0, 1fr); }
  .meet__visual { max-width: 480px; }
}
@media (max-width: 560px) {
  .meet__visual { margin-bottom: 118px; }
  .meet__lens { left: 0; right: 0; top: calc(100% + 10px); bottom: auto; width: 100%; padding-right: 14px; }
  .meet__lens-crop { width: 60px; height: 60px; }
  .meet__traits { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------- ritual band */
.ritual { border-top: 1px solid var(--line); overflow: hidden; }
.ritual__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 6.5vw, 120px);
  align-items: center;
}
.ritual__media {
  position: relative; margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--chip);
  box-shadow: 0 60px 100px -70px rgba(var(--shadow), .7);
}
.ritual__media img {
  position: absolute; left: 0; top: -9%;
  width: 100%; height: 118%; max-width: none;
  object-fit: cover;
  transform: translateY(var(--py, 0px));
  will-change: transform;
  transition: filter .6s var(--ease);
}
.ritual__media::after { /* paper-soft inner edge */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), inset 0 -120px 120px -90px rgba(0, 0, 0, .25);
}
[data-glow="on"] .ritual__media { box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 22%, transparent), 0 40px 120px -50px color-mix(in srgb, var(--glow) 40%, transparent); }
[data-glow="on"] .ritual__media img { filter: brightness(.86) saturate(.92); }

.ritual__eyebrow { margin: 0; }
.ritual__words {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 360;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-size: clamp(30px, 3.5vw, 54px);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 22ch;
}
/* product.js splits the words and drives --p (0 → 1) with scroll: each word lights up in turn */
.ritual__words .rw { opacity: clamp(.14, calc(var(--p, 1) * var(--n, 1) - var(--i, 0)), 1); transition: opacity .3s linear; }
[data-glow="on"] .ritual__words .rw { text-shadow: 0 0 calc(clamp(0, calc(var(--p, 1) * var(--n, 1) - var(--i, 0)), 1) * 22px) color-mix(in srgb, var(--glow) 35%, transparent); }

.ritual__ing { margin-top: clamp(32px, 4vw, 48px); padding-top: 22px; border-top: 1px solid var(--line); max-width: 640px; }
.ritual__label {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.ritual__label .i { width: 15px; height: 15px; color: var(--moss); }
[data-glow="on"] .ritual__label .i { color: var(--glow); }
ul.ritual__list {
  display: flex; flex-wrap: wrap; row-gap: 4px;
  margin-top: 14px; padding: 0; list-style: none;
  font-family: var(--font-display); font-size: clamp(19px, 1.55vw, 23px); line-height: 1.4; letter-spacing: -.01em;
  color: var(--ink-2);
}
.ritual__list li:not(:last-child)::after { content: "·"; margin: 0 .5em 0 .45em; color: var(--accent); }
.ritual__org { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--muted); }
.js .ritual__list li { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 45ms + 160ms); }
.js .ritual__ing.is-in li { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .ritual__grid { grid-template-columns: minmax(0, 1fr); }
  .ritual__media { border-radius: var(--r-l); width: 100%; max-width: 460px; }
  .ritual__words { max-width: none; }
}
/* text-only variant (no strong in-use photo): the words take the stage, ingredients sit beside them */
.ritual--text .ritual__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .ritual--text .ritual__copy { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 0 clamp(40px, 6vw, 100px); align-items: end; }
  .ritual--text .ritual__eyebrow { grid-column: 1 / -1; }
  .ritual--text .ritual__words { font-size: clamp(40px, 4.6vw, 70px); max-width: 18ch; }
  .ritual--text .ritual__ing { margin-top: 0; padding: 4px 0 6px 32px; border-top: 0; border-left: 1px solid var(--line); }
  .ritual--text ul.ritual__list { flex-direction: column; }
  .ritual--text .ritual__list li:not(:last-child)::after { content: none; }
}

/* ------------------------------------------------------------ blend list */
.blend { border-top: 1px solid var(--line); }
.section-head p.blend__note { max-width: 40ch; color: var(--muted); }
/* editorial layout: the heading + note stay put (sticky) while the names run down one column */
@media (min-width: 1000px) {
  .blend__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
  .blend__grid > .section-head { display: block; position: sticky; top: calc(var(--header-h) + 48px); margin-bottom: 0; }
  .blend__grid > .section-head p.blend__note { margin-top: 22px; }
}
.blend__list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.blend__row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px; align-items: center; gap: 14px;
  padding: clamp(16px, 1.9vw, 24px) 4px;
  border-top: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.blend__num { font-size: 11.5px; font-weight: 800; letter-spacing: .2em; color: var(--muted); font-variant-numeric: tabular-nums; }
.blend__name {
  font-family: var(--font-display); font-weight: 380;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.035em;
  transition: transform .5s var(--ease), color .4s var(--ease);
}
.blend__glyph {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--chip); color: var(--ink);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .5s var(--ease);
}
.blend__glyph .i { width: 18px; height: 18px; }
/* only rows that link somewhere move on hover; plain rows are a quiet list with a bare glyph */
.blend__glyph--still { background: none; color: var(--muted); opacity: .7; }
.blend__list .blend__item:last-child .blend__row { border-bottom: 1px solid var(--line); }
a.blend__row:hover .blend__name { transform: translateX(8px); color: var(--accent); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
a.blend__row:hover .blend__glyph { background: var(--moss); color: var(--moss-ink); transform: rotate(-45deg); }
[data-glow="on"] a.blend__row:hover .blend__name { text-shadow: 0 0 24px color-mix(in srgb, var(--glow) 50%, transparent); }
[data-glow="on"] .blend__glyph--still { color: var(--glow); opacity: .55; }

/* ------------------------------------------------------ bundle contents */
.includes { border-top: 1px solid var(--line); }
.includes__value { display: grid; justify-items: end; gap: 2px; font-family: var(--font-display); font-size: 18px; color: var(--muted); }
.includes__value s { text-decoration-thickness: 1.5px; }
.includes__now { font-size: clamp(30px, 3vw, 42px); letter-spacing: -.03em; line-height: 1.1; color: var(--ink); }
.includes__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.includes__link {
  display: flex; flex-direction: column; gap: 3px; height: 100%;
  padding: 10px 10px 18px;
  border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--line);
  color: inherit; text-decoration: none;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s var(--ease), background-color .6s var(--ease);
}
.includes__link:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: 0 30px 50px -34px rgba(var(--shadow), .55); }
[data-glow="on"] .includes__link:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 30%, transparent), 0 24px 60px -30px color-mix(in srgb, var(--glow) 40%, transparent); }
.includes__media { display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--lightbox); margin-bottom: 10px; }
.includes__media img { width: 100%; height: 100%; object-fit: contain; padding: 7%; mix-blend-mode: multiply; filter: brightness(1.035); transition: transform .8s var(--ease); }
.includes__link:hover .includes__media img { transform: scale(1.07) translateY(-3px); }
.includes__num { padding-inline: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .2em; color: var(--muted); }
.includes__name { padding-inline: 6px; font-family: var(--font-display); font-size: 19px; line-height: 1.15; letter-spacing: -.01em; }
.includes__short { padding-inline: 6px; font-size: 13px; color: var(--muted); }
@media (max-width: 1080px) { .includes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .includes__value { justify-items: start; }
  .includes__grid {
    grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: 62%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    scroll-padding-inline: var(--gutter);
  }
  ul.includes__grid { padding: 6px var(--gutter) 12px; } /* beats base ul[role="list"] reset */
  .includes__grid::-webkit-scrollbar { display: none; }
  .includes__item { scroll-snap-align: start; }
}

/* --------------------------------------------------------------- related */
.related { border-top: 1px solid var(--line); }

/* ------------------------------------------------------ sticky order bar */
/* Shown whenever the main Order button is out of view (above or below) and the footer isn't:
   a full-width pill on phones/tablets, a compact floating pill on desktop. */
.pdp-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateY(calc(100% + 24px));
  transition: transform .55s var(--ease);
  pointer-events: none;
}
.pdp-bar.is-on { transform: none; }
.pdp-bar.is-on .pdp-bar__inner { pointer-events: auto; }
.pdp-bar__inner {
  display: flex; align-items: center; gap: 12px;
  max-width: 560px; margin-inline: auto;
  padding: 7px 7px 7px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  border: 1px solid var(--line);
  box-shadow: 0 22px 44px -20px rgba(var(--shadow), .5);
}
[data-glow="on"] .pdp-bar__inner { border-color: color-mix(in srgb, var(--glow) 25%, var(--line)); box-shadow: 0 0 40px -14px color-mix(in srgb, var(--glow) 45%, transparent); }
.pdp-bar__img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: contain; padding: 3px; background: var(--lightbox); }
.pdp-bar__text { flex: 1; min-width: 0; }
.pdp-bar__name { font-size: 13.5px; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-bar__price { font-family: var(--font-display); font-size: 17px; line-height: 1.15; }
.pdp-bar__price s { font-size: 13px; color: var(--muted); }
.pdp-bar__btn { flex: none; height: 44px; }
@media (max-width: 999px) {
  .pdp-page .site-footer { padding-bottom: calc(28px + 84px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 1000px) {
  .pdp-bar { padding-bottom: 22px; }
  .pdp-bar__inner { max-width: 470px; gap: 14px; padding: 7px 7px 7px 9px; }
  .pdp-bar__name { font-size: 14px; }
}

/* -------------------------------------------------------------- lightbox */
/* One gallery photo, full screen. Fitted first; zoomed (product.js sets the width) it scrolls, and with
   a mouse it follows the pointer. Fixed dark colours in Day and Glow alike, like a darkened room. */
html:has(.lb[open]) { overflow: hidden; }
.lb {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: #f1ebdd;
  overflow: hidden;
}
.lb::backdrop { background: rgba(8, 11, 7, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lb[open], .lb[open]::backdrop { animation: lb-fade .3s var(--ease) both; }
.lb[open] .lb__img { animation: lb-rise .5s var(--ease-out) both; }
@keyframes lb-fade { from { opacity: 0; } }
@keyframes lb-rise { from { opacity: 0; transform: scale(.965); } }
.lb :focus-visible { outline-color: #f1ebdd; }

.lb__scroller {
  position: absolute; inset: 0;
  display: flex;
  overflow: hidden;
  padding: 80px 24px 88px;
  overscroll-behavior: contain;
  outline: none;
}
.lb__img {
  flex: none; margin: auto; /* centred while it fits, scrollable edge to edge once it doesn't */
  width: auto; height: auto; min-width: 0; min-height: 0;
  max-width: 100%; max-height: 100%;
  border-radius: 18px;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .85);
  cursor: zoom-in;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.lb.is-zoomed .lb__scroller { overflow: auto; padding: 0; scrollbar-width: none; }
.lb.is-zoomed .lb__scroller::-webkit-scrollbar { display: none; }
.lb.is-zoomed .lb__img { max-width: none; max-height: none; border-radius: 0; box-shadow: none; cursor: zoom-out; animation: none; }

.lb__tools { position: absolute; top: 18px; right: 18px; z-index: 2; display: flex; gap: 10px; }
.lb__btn {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(18, 22, 15, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(241, 235, 221, .24);
  color: #f1ebdd;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.lb__btn:hover { background: #f1ebdd; color: #12160f; }
.lb__btn:active { transform: scale(.94); }
.lb__btn .i { width: 20px; height: 20px; }
[data-lb-zoom] .i:last-child, [data-lb-zoom][aria-pressed="true"] .i:first-child { display: none; }
[data-lb-zoom][aria-pressed="true"] .i:last-child { display: block; }

.lb__bar {
  position: absolute; left: 16px; right: 16px; bottom: 22px; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 16px;
  text-align: center;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.lb__caption { font-family: var(--font-display); font-size: 18px; line-height: 1.3; color: #f1ebdd; }
.lb__hint { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(241, 235, 221, .6); }
.lb__hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .lb__hint-touch { display: none; }
  .lb__hint-mouse { display: inline; }
}
.lb.is-zoomed .lb__bar { opacity: 0; }

@media (max-width: 760px) {
  .lb__scroller { padding: 72px 12px 84px; }
  .lb__img { border-radius: 14px; }
  .lb__tools { top: 12px; right: 12px; }
  .lb__caption { font-size: 16px; }
}

/* Split headings in Glow: base.css glows <em> with text-shadow, which the .w word wrappers
   (overflow: hidden, for the word-rise) clip into hard boxes. Glow the <em> as a whole with a
   drop-shadow filter instead: it is applied to the em's composited result (the parent of the .w
   wrappers), so the halo is never clipped, during or after the reveal. */
.pdp-page [data-split] em { transition: color .6s var(--ease), filter .6s var(--ease); }
[data-glow="on"] .pdp-page [data-split] em {
  text-shadow: none;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--glow) 55%, transparent));
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js .pdp-page [data-split] .w { overflow: visible; }
  .meet__orbit, .gal__toggle::before, .viewer__hint .i, .viewer__ring, .lb[open], .lb[open]::backdrop, .lb[open] .lb__img { animation: none !important; }
  .gal__toggle::before { display: none; }
  .meet__crop { transform: none; }
  .gal__slide img { transform: none; }
}