/* ==========================================================================
   HappyTime — Design System V2
   Direction: clean modern ecommerce + HappyTime warmth.
   One sans-serif system (Plus Jakarta Sans + Anek Bangla), one accent,
   hairlines instead of panels, tight vertical rhythm, product-led imagery.
   Mobile-first. No frameworks. No build step.
   ========================================================================== */

@import url("../fonts/fonts.css");

/* --- 1 · Tokens ---------------------------------------------------------- */
:root {
  /* Ground — warm-neutral greige, deliberately close to paper, never cream-yellow */
  --bg:        #FBF7F2;
  --surface:   #FFFFFF;
  --wash:      #F6F1EC;   /* image plates, section bands */
  --wash-2:    #F0EFF7;

  /* Ink */
  --ink:       #202126;
  --ink-2:     #3A3B42;
  --muted:     #6B6765;
  --faint:     #6B6765;

  /* Lines — hairlines do the structural work that cards used to do */
  --line:      #E8E1DC;
  --line-2:    #DCD4CE;

  /* Brand — HappyTime orange, as a three-step ramp of ONE hue.
     --brand      #F5868B  fills only, and only ever with --ink on top (8.6:1)
     --brand-mid  #D95F67  icons, underlines, decorative marks (3.5:1 — AA non-text)
     --accent     #B34A50  anything that is text: links, labels (5.4:1 on bg, 5.0:1 on --wash)
     Orange never carries white text anywhere: #F5868B on white is 2.4:1 and fails. */
  --brand:       #F5868B;
  --brand-hov:   #E96F76;
  --brand-mid:   #D95F67;
  --accent:      #B34A50;
  --accent-deep: #8E393E;
  /* value-saving accent: deep sage. 6.4:1 on --surface, 6.0:1 on --wash.
     Deliberately quiet — HappyTime never uses loud sale red. */
  --good:      #4F6F52;
  --good-soft: #E8F1E8;
  --good-line: #D3E2D3;
  --accent-soft: #FBE9E6;
  --accent-line: #F4D9D6;

  /* Type */
  --font: "Jakarta", "AnekBn", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(1.95rem, 1.15rem + 2.5vw, 3.4rem);
  --fs-h2:      clamp(1.5rem, 1.2rem + 1.25vw, 2.1rem);
  --fs-h3:      clamp(1.02rem, .99rem + .16vw, 1.1rem);
  --fs-lead:    clamp(1rem, .965rem + .18vw, 1.1rem);
  --fs-base:    1rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;
  --fs-micro:   .75rem;

  /* Rhythm — tighter and more intentional than V1 */
  --gutter: 1.25rem;
  --maxw:   1240px;
  --sec:    clamp(2.85rem, 2.1rem + 2.6vw, 4.4rem);

  /* Radii — restrained. Nothing is a pill except the cart badge. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;

  --ease: cubic-bezier(.2, .6, .3, 1);
  --header-h: 60px;
}

@media (min-width: 900px) { :root { --gutter: 2.25rem; --header-h: 72px; } }

/* --- 2 · Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
/* a component's own display: grid/flex otherwise beats the UA rule for [hidden] */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.22; letter-spacing: -.005em; }
p, figure, figcaption, dl, dd, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a  { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }
b, strong { font-weight: 700; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }

::selection { background: var(--brand); color: var(--ink); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500; transition: top .16s var(--ease);
}
.skip-link:focus { top: 12px; }

/* Numerals in prices and specs stay Latin and tabular so columns line up. */
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* --- 3 · Dev bar (delete before launch) ---------------------------------- */
.devbar {
  background: #211E24; color: #CFC8D2;
  font-size: var(--fs-micro); letter-spacing: .01em;
}
.devbar__inner { display: flex; gap: .55rem; align-items: baseline; padding-block: .5rem; flex-wrap: wrap; }
.devbar b { color: #fff; }

/* --- 4 · Announcement bar ------------------------------------------------ */
.announce {
  background: var(--ink); color: #EDEAF0;
  font-size: var(--fs-micro); font-weight: 500;
}
.announce__inner {
  display: flex; justify-content: center; align-items: center; gap: .85rem;
  padding-block: .55rem; text-align: center;
}
.announce b { color: #fff; }
.announce__sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.announce__wide { display: none; }
@media (min-width: 640px) { .announce__wide { display: inline; } }

/* --- 5 · Header ---------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(252, 251, 250, .88);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 1rem;
}

.logo {
  display: inline-flex; align-items: baseline; gap: .28rem;
  font-size: 1.28rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink);
  margin-right: auto;
}
.logo__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); transform: translateY(-1px); }
@media (min-width: 900px)  { .logo { font-size: 1.42rem; } }
@media (min-width: 1180px) { .logo { margin-right: 2.25rem; } }

.nav { display: none; }
@media (min-width: 1180px) {
  .nav { display: flex; align-items: center; gap: 1.55rem; margin-right: auto; }
  .nav__link, .nav__trigger {
    font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2);
    padding-block: .35rem; position: relative; white-space: nowrap;
    transition: color .16s var(--ease);
  }
  .nav__link::after, .nav__trigger::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
    background: var(--brand-mid); transform: scaleX(0); transform-origin: left;
    transition: transform .22s var(--ease);
  }
  .nav__trigger::after { right: 17px; }
  .nav__link:hover, .nav__trigger:hover { color: var(--ink); }
  .nav__link:hover::after, .nav__trigger:hover::after { transform: scaleX(1); }
  .nav__link[aria-current="page"] { color: var(--ink); font-weight: 700; }
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }
}

.hicons { display: flex; align-items: center; gap: .15rem; }
.iconbtn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-sm); color: var(--ink-2); position: relative;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.iconbtn:hover { background: var(--wash); color: var(--ink); }
.burger { order: -1; margin-left: -8px; }
@media (min-width: 1180px) { .burger { display: none; } }

.cart__badge {
  position: absolute; top: 4px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}

/* Search drawer */
.searchbar {
  display: grid; grid-template-rows: 0fr;
  border-bottom: 1px solid transparent;
  transition: grid-template-rows .26s var(--ease), border-color .26s var(--ease);
  background: var(--surface);
}
.searchbar.is-open { grid-template-rows: 1fr; border-bottom-color: var(--line); }
.searchbar__clip { overflow: hidden; }
.searchbar__form { display: flex; gap: .5rem; align-items: center; padding-block: .85rem; }
.searchbar input {
  flex: 1; min-width: 0; height: 44px; padding: 0 .95rem;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); font-size: var(--fs-sm);
}
.searchbar input::placeholder { color: var(--faint); }
.searchbar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 120;
  background: var(--surface);
  display: flex; flex-direction: column;
  /* seven-item submenus can exceed a short viewport — the panel must scroll itself */
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; }
.menu[hidden] { display: none; }
.menu__top { position: sticky; top: 0; z-index: 2; flex: none; height: var(--header-h);
  display: flex; align-items: center; background: var(--surface); border-bottom: 1px solid var(--line); }
.menu__body { display: flex; flex-direction: column; flex: 1 0 auto; }
[data-close-x] { margin-left: auto; margin-right: -8px; }
.menu__nav { padding: .5rem 0; }
.menu__foot { margin-top: auto; padding-block: 1.5rem; border-top: 1px solid var(--line); }
.menu__nav { padding-bottom: .5rem; }
.menu__foot p { font-size: var(--fs-xs); color: var(--muted); }

/* --- 6 · Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 48px; padding: 0 1.35rem;
  border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: -.005em;
  white-space: nowrap; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: var(--ink); }
.btn--primary:hover { background: var(--brand-hov); }
.btn--outline { border-color: var(--line-2); color: var(--ink); background: var(--surface); }
.btn--outline:hover { border-color: var(--ink); }
.btn--ghost { color: var(--ink); }
.btn--ghost:hover { background: var(--wash); }
.btn--sm { height: 40px; padding: 0 .95rem; font-size: var(--fs-xs); }
.btn--full { width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; }

.tlink {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--fs-sm); font-weight: 700; color: var(--accent);
  border-bottom: 1.5px solid transparent; transition: border-color .16s var(--ease);
}
.tlink:hover { border-bottom-color: var(--accent); }
.tlink svg { transition: transform .18s var(--ease); }
.tlink:hover svg { transform: translateX(3px); }

/* --- 7 · Section scaffolding --------------------------------------------- */
.section { padding-block: var(--sec); }
.section--band { background: var(--wash); }
.section--tight { padding-block: calc(var(--sec) * .62); }
.section + .section:not(.section--band):not(.section--flush) { border-top: 1px solid var(--line); }

.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.75rem; }
.shead__text { max-width: 58ch; }
.shead h2 { font-size: var(--fs-h2); }
.shead p { margin-top: .5rem; font-size: var(--fs-sm); color: var(--muted); }
.shead__link { display: none; }
@media (min-width: 720px) {
  .shead { margin-bottom: 2.25rem; }
  .shead__link { display: inline-flex; flex: none; padding-bottom: .2rem; }
}

/* --- 8 · Hero ------------------------------------------------------------
   Mobile: stacked, padded. Desktop: copy on the container grid, product image
   bleeding to the viewport edge so the picture — not the chrome — carries the page. */
.hero { padding-top: 2rem; }
.hero__grid { display: grid; gap: 1.5rem; }
.hero__copy { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.hero__title { font-size: var(--fs-display); line-height: 1.13; letter-spacing: -.02em; }
.hero__title em { font-style: normal; color: var(--accent); }
.hero__lead {
  margin-top: 1rem; max-width: 40ch;
  font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }
.hero__cta .btn { flex: 1 1 auto; min-width: 150px; }

.hero__media { position: relative; padding-inline: var(--gutter); }
.hero__media img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  border-radius: var(--r-md); background: var(--wash);
}

@media (min-width: 1024px) {
  .hero { padding-top: 0; }
  .hero__grid { grid-template-columns: 1fr 45vw; gap: 0; align-items: center; }
  .hero__copy {
    margin-inline: 0; padding-block: clamp(3.5rem, 1.5rem + 5vw, 6rem);
    padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
    padding-right: clamp(2rem, 4vw, 4rem);
  }
  .hero__media { padding-inline: 0; }
  .hero__media img { aspect-ratio: 5 / 4; border-radius: var(--r-md) 0 0 var(--r-md); }
  .ph { left: 1rem; top: 1rem; }
}
@media (min-width: 1280px) { .hero__grid { grid-template-columns: 1fr 47vw; } }
@media (min-width: 1600px) { .hero__grid { grid-template-columns: 1fr 760px; } }

/* Hero trust bar — the structural line that closes the hero */
.hbar {
  display: grid; gap: 0; margin-top: 1.9rem;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
.hbar li {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 0; font-size: var(--fs-sm); color: var(--muted);
}
.hbar li + li { border-top: 1px solid var(--line); }
.hbar svg { flex: none; color: var(--brand-mid); }
.hbar b { color: var(--ink); font-weight: 700; }
@media (min-width: 820px) {
  .hbar { grid-template-columns: repeat(3, 1fr); margin-top: 2.75rem; }
  .hbar li { padding: 1.15rem 0; }
  .hbar li + li { border-top: 0; border-left: 1px solid var(--line); padding-left: 1.75rem; }
}

/* Placeholder marker — sits on the art, never pretends to be product info */
.ph {
  position: absolute; left: .6rem; top: .6rem; z-index: 2;
  padding: .2rem .5rem; border-radius: var(--r-xs);
  background: rgba(23, 22, 26, .74); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  pointer-events: none;
}

/* --- 9 · Category tiles -------------------------------------------------- */
.cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.cats > li:first-child { grid-column: span 2; }
@media (min-width: 760px) {
  .cats { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .cats > li:first-child { grid-column: auto; }
}

.cat { display: block; }
.cat__media { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--wash); }
.cat__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .5s var(--ease); }
.cats > li:first-child .cat__media img { aspect-ratio: 16 / 10; }
@media (min-width: 760px) { .cats > li:first-child .cat__media img { aspect-ratio: 4 / 5; } }
.cat:hover .cat__media img { transform: scale(1.035); }

.cat__label {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem .75rem;
  padding-top: .85rem;
}
.cat__label h3 { grid-column: 1; font-size: var(--fs-h3); letter-spacing: -.012em; }
.cat__label p { grid-column: 1; font-size: var(--fs-micro); color: var(--muted); }
.cat__arrow {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  color: var(--accent); font-size: 1rem; line-height: 1;
  transition: transform .18s var(--ease);
}
.cat:hover .cat__arrow { transform: translateX(3px); }

/* --- 10 · Product grid --------------------------------------------------- */
.grid-p { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem .7rem; }
@media (min-width: 620px) { .grid-p { gap: 2rem 1.25rem; } }
@media (min-width: 980px) { .grid-p { grid-template-columns: repeat(4, 1fr); } }

.card { position: relative; display: flex; flex-direction: column; height: 100%; }
.card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__media {
  position: relative; overflow: hidden;
  border-radius: var(--r-sm); background: var(--wash);
}
.card__media img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .5s var(--ease);
}
.card:hover .card__media img { transform: scale(1.035); }

.card__add {
  position: absolute; right: .5rem; bottom: .5rem; z-index: 3;
  height: 34px; padding: 0 .7rem; border-radius: var(--r-xs);
  background: rgba(255,255,255,.94); color: var(--ink);
  font-size: var(--fs-micro); font-weight: 700;
  display: inline-flex; align-items: center; gap: .3rem;
  box-shadow: 0 1px 3px rgba(23,22,26,.14);
  transition: background .15s var(--ease), color .15s var(--ease), opacity .18s var(--ease), transform .18s var(--ease);
}
.card__add:hover { background: var(--brand); color: var(--ink); }
.card__add[disabled] { background: var(--brand); color: var(--ink); opacity: 1; }
@media (min-width: 1024px) and (hover: hover) {
  .card__add { opacity: 0; transform: translateY(4px); }
  .card:hover .card__add, .card__add:focus-visible { opacity: 1; transform: none; }
}

.card__body { padding-top: .8rem; display: flex; flex-direction: column; flex: 1; }
.card__name { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.012em; }
.card__note { margin-top: .18rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.card__price { margin-top: .5rem; font-size: 1rem; font-weight: 700; }
.card__price .cur { font-weight: 500; color: var(--muted); margin-right: 1px; }

/* --- 11 · Inside the books ----------------------------------------------- */
.strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 66%;
  gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scrollbar-width: none; -ms-overflow-style: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip > * { scroll-snap-align: start; }
@media (min-width: 720px) {
  .strip { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; gap: 1rem;
           overflow: visible; margin-inline: 0; padding-inline: 0; }
}
.shot { position: relative; }
.shot img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-sm); background: var(--surface);
}
.shot figcaption { margin-top: .55rem; font-size: var(--fs-xs); color: var(--muted); }

.specs {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin-top: 2rem; border-top: 1px solid var(--line-2);
}
@media (min-width: 760px) { .specs { grid-template-columns: repeat(4, 1fr); } }
.specs li { padding: 1.05rem 0; border-bottom: 1px solid var(--line); }
.specs li:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 1.1rem; }
@media (min-width: 760px) {
  .specs li:nth-child(2n) { border-left: 0; padding-left: 0; }
  .specs li:not(:first-child) { border-left: 1px solid var(--line); padding-left: 1.35rem; }
}
.specs__k { display: block; font-size: var(--fs-micro); color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.specs__v { display: block; margin-top: .22rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; }

.note {
  display: flex; gap: .7rem; margin-top: 1.5rem;
  font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6;
}
.note svg { flex: none; color: var(--brand-mid); margin-top: .2rem; }
.note b { color: var(--ink); }

/* --- 12 · Pack guidance -------------------------------------------------- */
.packs { display: grid; }
.packs > li + li { border-top: 1px solid var(--line); }
@media (min-width: 620px) {
  .packs { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem; }
  .packs > li + li { border-top: 0; }
}
@media (min-width: 1000px) { .packs { grid-template-columns: repeat(4, 1fr); } }

.pack { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 1rem; padding: 1rem 0; }
.pack__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pack__media { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.pack__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .5s var(--ease); }
.pack__media .ph { left: .3rem; top: .3rem; padding: .12rem .3rem; font-size: 8px; letter-spacing: .05em; }
@media (min-width: 620px) { .pack__media .ph { left: .6rem; top: .6rem; padding: .2rem .5rem; font-size: 10px; letter-spacing: .08em; } }
.pack:hover .pack__media img { transform: scale(1.035); }
.pack__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
@media (min-width: 620px) {
  .pack { grid-template-columns: 1fr; gap: 0; padding: 0; height: 100%; }
  .pack__body { padding-top: .85rem; }
}
.pack__for { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }
.pack__name { margin-top: .3rem; font-size: var(--fs-h3); }
.pack__desc { margin-top: .3rem; margin-bottom: .8rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }
.pack__foot {
  margin-top: auto; padding-top: .7rem;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.pack__price { font-size: 1rem; font-weight: 700; }
.pack__price .cur { font-weight: 500; color: var(--muted); margin-right: 1px; }
.pack__go { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: .3rem; }
.pack__go svg { transition: transform .18s var(--ease); }
.pack:hover .pack__go svg { transform: translateX(3px); }
@media (min-width: 620px) { .pack__foot { border-top: 1px solid var(--line); } }

/* --- 13 · Accessory list ------------------------------------------------- */
.acc { border-top: 1px solid var(--line-2); }
.section--tight .shead { margin-bottom: 1.25rem; }
.section--tight .shead h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); }
.acc li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.acc li span:first-child { color: var(--ink-2); }
.acc li b { font-weight: 700; white-space: nowrap; }
@media (min-width: 760px) { .acc { columns: 2; column-gap: 3rem; } .acc li { break-inside: avoid; } }

/* --- 14 · Trust + FAQ ---------------------------------------------------- */
.tf { display: grid; gap: 2.5rem; }
@media (min-width: 940px) { .tf { grid-template-columns: .84fr 1.16fr; gap: 4rem; } .tf > div { display: flex; flex-direction: column; } }

.tf__h { font-size: var(--fs-h2); }
.trust { display: grid; gap: 1.35rem; margin-top: 1.6rem; }
@media (min-width: 940px) { .trust { flex: 1; align-content: space-between; gap: 1.5rem; } }
.trust__item { display: flex; gap: .85rem; }
.trust__item svg { flex: none; color: var(--brand-mid); margin-top: .15rem; }
.trust__item h3 { font-size: var(--fs-h3); }
.trust__item p { margin-top: .2rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }

.faq { border-top: 1px solid var(--line-2); margin-top: 1.6rem; }
.faq__more { margin-top: 1.4rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 0; cursor: pointer; list-style: none;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: -.005em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px; margin-top: .45rem;
  border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted);
  transform: rotate(45deg); transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details[open] summary { color: var(--accent); }
.faq__a { padding-bottom: 1.15rem; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.7; max-width: 62ch; }

/* --- 15 · Final CTA ------------------------------------------------------ */
.final { background: var(--ink); color: #fff; }
.final__inner { padding-block: clamp(3rem, 2.2rem + 3vw, 4.75rem); text-align: center; }
.final h2 { font-size: var(--fs-h2); letter-spacing: -.018em; }
.final p { margin: .7rem auto 0; max-width: 44ch; font-size: var(--fs-sm); color: rgba(255,255,255,.7); }
.final__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; margin-top: 1.75rem; }
.final .btn--outline { background: transparent; border-color: rgba(255,255,255,.32); color: #fff; }
.final .btn--outline:hover { border-color: #fff; background: rgba(255,255,255,.07); }
.final__fine { margin-top: 1.25rem; font-size: var(--fs-xs); color: rgba(255,255,255,.5); }

/* --- 16 · Footer --------------------------------------------------------- */
.footer { background: var(--bg); border-top: 1px solid var(--line); }
.footer__top { padding-block: clamp(2.5rem, 2rem + 2vw, 3.75rem); display: grid; gap: 2.25rem; }
@media (min-width: 820px)  { .footer__top { grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem 2.5rem; } }
@media (min-width: 1060px) { .footer__top { grid-template-columns: 1.7fr 1fr 1fr 1fr; } }
.footer__about p { margin-top: .75rem; max-width: 40ch; font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; }
.fcol h3 { font-size: var(--fs-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.fcol ul { margin-top: .9rem; display: grid; gap: .6rem; }
.fcol a { font-size: var(--fs-sm); color: var(--ink-2); }
.fcol a:hover { color: var(--accent); }
.footer__bar {
  border-top: 1px solid var(--line); padding-block: 1.1rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: space-between;
  font-size: var(--fs-micro); color: var(--faint);
}

/* --- 17 · Reveal --------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   V2.1 additions — Explore nav, Try HappyTime band, Free page, coloring demo
   Same tokens, same radii, same spacing philosophy. Nothing above is changed.
   ========================================================================== */

/* --- 18 · Desktop dropdown navigation ------------------------------------
   Hover-to-open with tolerance, click to pin, Esc/outside-click to close.
   Everything is driven from the same markup the keyboard uses — no hover-only paths. */
.nav__drop { position: relative; }

.nav__trigger { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.nav__chev { transition: transform .2s var(--ease); }
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__trigger[aria-expanded="true"] { color: var(--ink); }
.nav__trigger[aria-expanded="true"]::after { transform: scaleX(1); }

/* the page you are on, inside a dropdown */
.nav__drop--current .nav__trigger { color: var(--ink); font-weight: 700; }
.nav__drop--current .nav__trigger::after { transform: scaleX(1); }

/* Shop first, Explore second — one hairline, no extra emphasis */
@media (min-width: 1180px) {
  .nav__drop--explore { margin-left: .35rem; padding-left: 1.55rem; border-left: 1px solid var(--line); }
}

.nav__panel {
  position: absolute; top: calc(100% + 13px); left: -14px; z-index: 60;
  min-width: 232px; padding: .45rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 14px 34px -16px rgba(23, 22, 26, .22);
}
.nav__panel[hidden] { display: none; }
/* invisible bridge across the gap, so the pointer can travel into the panel */
.nav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

.nav__panel ul { display: grid; }
.nav__panel a {
  display: block; padding: .58rem .75rem; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); white-space: nowrap;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.nav__panel a::after { content: none; }
.nav__panel a:hover { background: var(--accent-soft); color: var(--accent); }
.nav__panel a[aria-current="page"] { color: var(--accent); font-weight: 700; }

.nav__panel-lead a { font-weight: 700; color: var(--ink); }
.nav__panel-lead { margin-bottom: .35rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); }

/* --- 18b · Mobile accordion navigation ----------------------------------- */
.macc__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0; border-bottom: 1px solid var(--line);
  font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em;
}
.macc__link svg { color: var(--faint); }
.macc__link[aria-current="page"] { color: var(--accent); }

.macc__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 0; border-bottom: 1px solid var(--line);
  font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; text-align: left;
}
.macc__trigger[aria-expanded="true"] { color: var(--accent); border-bottom-color: transparent; }
.macc--current > .macc__trigger { color: var(--accent); }

/* a plus that becomes a minus — state is shape, not colour */
.macc__pm { position: relative; flex: none; width: 18px; height: 18px; }
.macc__pm::before, .macc__pm::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.macc__pm::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.macc__pm::after  { width: 2px; height: 16px; transform: translate(-50%, -50%); }
.macc__trigger[aria-expanded="true"] .macc__pm::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.macc__panel[hidden] { display: none; }
.macc__panel ul { display: grid; padding-bottom: .5rem; }
.macc__panel a {
  display: block; padding: .78rem 0 .78rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem; font-weight: 500; color: var(--ink-2);
}
.macc__panel li:last-child a { border-bottom: 1px solid var(--line-2); }
.macc__panel a[aria-current="page"] { color: var(--accent); font-weight: 700; }

/* --- 19 · Try HappyTime band (homepage) ---------------------------------- */
.try { display: grid; gap: .8rem; }
@media (min-width: 760px) { .try { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }

.trycard {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color .18s var(--ease);
}
.trycard:hover { border-color: var(--brand-mid); }
.trycard__art {
  position: relative; display: block; background: var(--wash);
  border-bottom: 1px solid var(--line);
}
.trycard__art svg { display: block; width: 100%; height: auto; }
.trycard__body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.trycard__body h3 { font-size: var(--fs-h3); letter-spacing: -.012em; }
.trycard__body p { margin-top: .3rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.trycard__body .btn { margin-top: 1.05rem; align-self: flex-start; }
.trycard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
@media (min-width: 760px) { .trycard__body { padding: 1.35rem 1.4rem 1.5rem; } }

/* --- 20 · Page hero (Free / Try / About) --------------------------------- */
.phero { padding-block: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem) 0; }
.phero__crumb { font-size: var(--fs-xs); color: var(--muted); }
.phero__crumb a { color: var(--accent); }
.phero__crumb a:hover { text-decoration: underline; }
.phero h1 {
  margin-top: .7rem; max-width: 20ch;
  font-size: clamp(1.85rem, 1.2rem + 2.1vw, 3rem); line-height: 1.15; letter-spacing: -.02em;
}
.phero h1 em { font-style: normal; color: var(--accent); }
.phero__lead { margin-top: .9rem; max-width: 56ch; font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.6; }

/* --- 21 · Free printable sheet ------------------------------------------- */
.sheetgrid { display: grid; gap: 1.75rem; }
@media (min-width: 900px) { .sheetgrid { grid-template-columns: minmax(0, 1fr) 330px; gap: 3rem; align-items: start; } }

.sheet {
  position: relative; background: #fff;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  box-shadow: 0 10px 30px -18px rgba(23, 22, 26, .35);
  overflow: hidden;
}
.sheet svg, .sheet img { display: block; width: 100%; height: auto; }
.sheet__tag {
  position: absolute; left: .7rem; top: .7rem; z-index: 2;
  padding: .22rem .55rem; border-radius: var(--r-xs);
  background: rgba(23, 22, 26, .78); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}

.sheetside { display: flex; flex-direction: column; gap: 1.15rem; }
.sheetside h2 { font-size: var(--fs-h3); }
.sheetside p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.65; }
.sheetside .btn { width: 100%; }
.sheet__acts { display: grid; gap: .55rem; }
@media (min-width: 480px) and (max-width: 899px) { .sheet__acts { grid-template-columns: 1fr 1fr; } }

.howto { border-top: 1px solid var(--line-2); }
.howto li {
  display: flex; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55;
}
.howto b {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: var(--fs-micro); font-weight: 700;
}

/* --- 22 · Coloring demo --------------------------------------------------
   DOM order is designs → canvas → tools, which is also the mobile reading order.
   The canvas is a single tab stop (roving tabindex in coloring.js), so keyboard
   users reach the palette right after it rather than through 25 shapes. */
.cx { display: grid; gap: 1.1rem; }
@media (min-width: 900px) {
  .cx {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: auto 1fr;
    grid-template-areas: "stage side" "stage tools";
    gap: .9rem 2.5rem; align-items: start;
  }
  .cx__stage { grid-area: stage; }
  .cx__dgroup { grid-area: side; }
  .cx__tools { grid-area: tools; }
}

.cx__designs { display: flex; gap: .5rem; }
.cx__designs button {
  flex: 1 1 0; min-width: 0; padding: .45rem;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); transition: border-color .16s var(--ease), background .16s var(--ease);
}
.cx__designs button svg { display: block; width: 100%; height: auto; color: var(--ink); }
.cx__designs button span {
  display: block; margin-top: .3rem; font-size: var(--fs-micro); font-weight: 700; color: var(--muted);
}
.cx__designs button:hover { border-color: var(--brand-mid); }
.cx__designs button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.cx__designs button[aria-pressed="true"] span { color: var(--accent); }

.cx__stage {
  position: relative; max-width: 720px; background: #fff;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: .6rem; touch-action: manipulation;
}
.cx__art { display: none; }
.cx__art.is-active { display: block; }
.cx__art svg { display: block; width: 100%; height: auto; }
.cx__art .z {
  fill: #FFFFFF; stroke: #2B2A2E; stroke-width: 2.4;
  stroke-linejoin: round; cursor: pointer;
  transition: fill .12s linear;
}
.cx__art .z:hover { stroke-width: 3.6; }
.cx__art .z:focus-visible { outline: none; stroke: var(--accent); stroke-width: 6; }
.cx__art .ln { fill: none; stroke: #2B2A2E; stroke-width: 2.4; stroke-linecap: round; pointer-events: none; }

.cx__label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cx__group + .cx__group { margin-top: 1.15rem; }
.cx__group > .cx__label { display: block; margin-bottom: .55rem; }

.sw { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
@media (min-width: 900px) { .sw { grid-template-columns: repeat(4, 1fr); gap: .55rem; } }
.sw button {
  position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 58px; min-height: 44px;
  border-radius: 50%; border: 1.5px solid rgba(23, 22, 26, .16);
  transition: transform .14s var(--ease);
}
.sw button:hover { transform: scale(1.08); }
.sw button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
/* selected state is never colour alone — a tick rides on top of the swatch */
.sw button[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 50%; top: 47%;
  width: 32%; height: 17%; transform: translate(-50%, -50%) rotate(-45deg);
  border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
}
.sw button.sw--erase { background: #fff; }
.sw button.sw--erase::before {
  content: ""; position: absolute; inset: 20%;
  border-left: 1.5px solid var(--line-2); transform: rotate(45deg);
}

.cx__acts { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.cx__hint { margin-top: .85rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }
.cx__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- 23 · Prose (About) --------------------------------------------------- */
.prose { max-width: 66ch; }
.prose h2 { margin-top: 2.25rem; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: .85rem; font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.75; }
.prose p.lede { font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem); color: var(--ink); }

.aboutgrid { display: grid; gap: 2.5rem; }
@media (min-width: 940px) { .aboutgrid { grid-template-columns: minmax(0, 1fr) 340px; gap: 4rem; align-items: start; } }
.aboutside { display: grid; gap: 1rem; }
.aboutside .sheet { box-shadow: none; }
@media (min-width: 940px) { .aboutside .specs { grid-template-columns: repeat(2, 1fr); } .aboutside .specs li:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 1.1rem; } .aboutside .specs li:nth-child(2n+1) { border-left: 0; padding-left: 0; } }

/* --- 24 · Print ----------------------------------------------------------- */
@media print {
  body { background: #fff; }
  .devbar, .announce, .header, .menu, .footer, .final,
  .phero, .sheetside, .howto, .noprint { display: none !important; }
  .section, .wrap { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .section + .section { border-top: 0 !important; }
  .sheetgrid { display: block !important; }
  .sheet { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
  .sheet__tag { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  @page { margin: 10mm; }
}

/* --- 25 · Small spacing utilities (used sparingly, never as a layout system) */
.u-mt0   { margin-top: 0 !important; }
.u-mt-xs { margin-top: .5rem; }
.u-mt    { margin-top: 1.5rem; }
.u-mt-lg { margin-top: 2rem; }
.u-mb-xs { display: block; margin-bottom: .7rem; }
.tlink--inline { font-size: inherit; }

/* ==========================================================================
   V2.3 — conversion funnel: landing page, OTO 1, checkout, confirmation.
   Same tokens, same type scale, same radii, same rhythm as everything above.
   Nothing here is a separate "sales funnel theme".
   ========================================================================== */

/* --- 26 · Funnel header --------------------------------------------------- */
@media (min-width: 1180px) {
  .header--funnel .nav { gap: 1.75rem; }
  .header--funnel .logo { margin-right: 2.25rem; }
}

/* --- 27 · Landing hero ---------------------------------------------------- */
.pdp-hero { padding-block: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem) 0; }
.pdp-hero__grid { display: grid; gap: 1.75rem; }
/* the thumbnail rail is a horizontal scroller; without min-width:0 its
   min-content width would stretch the whole grid column past the viewport */
.pdp-hero__grid > * { min-width: 0; }
@media (min-width: 960px) {
  .pdp-hero__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 3rem; align-items: start; }
  .pdp-hero { padding-block: clamp(2rem, 1.4rem + 2vw, 3.25rem) 0; }
}
@media (min-width: 1180px) { .pdp-hero__grid { gap: 4rem; } }

/* gallery */
.gal__stage { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--wash); }
.gal__slide { display: none; position: relative; }
.gal__slide.is-active { display: block; }
.gal__slide img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.gal__cap { margin-top: .6rem; font-size: var(--fs-xs); color: var(--muted); }
.gal__thumbs {
  min-width: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 68px; gap: .5rem;
  margin-top: .7rem; overflow-x: auto; scrollbar-width: none;
}
.gal__thumbs::-webkit-scrollbar { display: none; }
@media (min-width: 560px) { .gal__thumbs { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); grid-auto-columns: auto; overflow: visible; } }
.gal__thumb {
  border-radius: var(--r-sm); overflow: hidden; background: var(--wash);
  border: 1.5px solid transparent; transition: border-color .16s var(--ease);
}
.gal__thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.gal__thumb:hover { border-color: var(--line-2); }
.gal__thumb.is-active { border-color: var(--accent); }

/* buy box */
.buy__kicker { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }
.buy__name { margin-top: .25rem; font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.4rem); letter-spacing: -.02em; }
.buy__lead { margin-top: .65rem; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; max-width: 42ch; }
.buy__price { margin-top: 1.1rem; font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.buy__price .cur { font-size: 1.25rem; font-weight: 500; color: var(--muted); margin-right: 2px; }

.buy__inc { margin-top: 1.15rem; display: grid; gap: .7rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.buy__inc li { display: flex; gap: .65rem; font-size: var(--fs-sm); }
.buy__tick { flex: none; color: var(--brand-mid); margin-top: .1rem; }
.buy__inc b { font-weight: 700; }
.buy__inc em { display: block; margin-top: .1rem; font-style: normal; font-size: var(--fs-xs); color: var(--muted); }

.buy__qty { display: flex; align-items: center; gap: .9rem; margin-top: 1.3rem; }
.buy__qty .cx__label { margin: 0; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.qty__b {
  width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 1.15rem; font-weight: 700; color: var(--ink-2);
}
.qty__b:hover { background: var(--wash); color: var(--ink); }
.qty__i {
  width: 48px; height: 44px; border: 0; border-inline: 1px solid var(--line-2);
  text-align: center; font-weight: 700; background: transparent; color: var(--ink);
  -moz-appearance: textfield; appearance: textfield;
}
.qty__i::-webkit-outer-spin-button, .qty__i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__i:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.buy__cta { margin-top: 1.1rem; height: 54px; font-size: 1rem; }
.buy__meta { margin-top: 1.15rem; display: grid; gap: .6rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.buy__meta li { display: flex; gap: .65rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }
.buy__meta svg { flex: none; color: var(--brand-mid); margin-top: .1rem; }
.buy__meta b { color: var(--ink); }

/* --- 28 · Contents / reassurance ------------------------------------------ */
.incs { display: grid; gap: .8rem; }
@media (min-width: 720px) { .incs { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
.inc {
  display: flex; gap: .9rem; padding: 1.15rem 1.2rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.inc__n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: var(--fs-micro); font-weight: 700;
}
.inc h3 { font-size: var(--fs-h3); }
.inc p { margin-top: .22rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }

.pdp-two { display: grid; gap: 2rem; }
@media (min-width: 860px) { .pdp-two { grid-template-columns: minmax(0, 1fr) 300px; gap: 3.5rem; align-items: start; } }
.pdp-lead { margin-top: .85rem; font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.7; max-width: 58ch; }
.pdp-why { margin-top: 1.4rem; display: grid; gap: .75rem; }
.pdp-why--grid { margin-top: 0; gap: .9rem 2rem; }
@media (min-width: 720px) { .pdp-why--grid { grid-template-columns: repeat(2, 1fr); } }
.pdp-why li { display: flex; gap: .65rem; font-size: var(--fs-sm); color: var(--ink-2); }
.pdp-why svg { flex: none; color: var(--brand-mid); margin-top: .15rem; }
.pdp-shot { position: relative; }
.pdp-shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-md); background: var(--wash); }

/* --- 29 · Price table ----------------------------------------------------- */
.paytable { border-top: 1px solid var(--line-2); max-width: 620px; }
.paytable li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm);
}
.paytable li:first-child { font-weight: 700; }
.paytable li:first-child b { font-size: 1.1rem; }
.paytable span { color: var(--ink-2); }
.paytable li:first-child span { color: var(--ink); }
.paytable__note span { font-size: var(--fs-xs); color: var(--muted); }
.pdp-faq .faq { border-top: 1px solid var(--line-2); margin-top: 0; max-width: 760px; }

/* --- 30 · Sticky purchase bar --------------------------------------------- */
.stickybuy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(252, 251, 250, .96);
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid var(--line-2);
  transform: translateY(102%); transition: transform .26s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.stickybuy.is-in { transform: none; }
.stickybuy[hidden] { display: none; }
.stickybuy__inner { display: flex; align-items: center; gap: 1rem; padding-block: .6rem; }
.stickybuy__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.stickybuy__txt b { font-size: var(--fs-sm); font-weight: 700; }
.stickybuy__txt span { font-size: var(--fs-sm); font-weight: 700; color: var(--accent); }
.stickybuy .btn { margin-left: auto; flex: none; height: 44px; padding-inline: 1.4rem; }
@media (min-width: 960px) { .stickybuy { display: none; } }
/* keep the bar from covering the last thing on the page */
body:has(.stickybuy.is-in) .final { padding-bottom: 4.5rem; }

/* --- 31 · OTO 1 ----------------------------------------------------------- */
.oto { position: fixed; inset: 0; z-index: 140; display: flex; align-items: flex-end; justify-content: center; }
.oto[hidden] { display: none; }
.oto__scrim { position: absolute; inset: 0; background: rgba(23, 22, 26, .5); opacity: 0; transition: opacity .24s var(--ease); }
.oto.is-in .oto__scrim { opacity: 1; }
.oto__card {
  position: relative; width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--r-md) var(--r-md) 0 0;
  padding: 1.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  transform: translateY(14px); opacity: 0;
  transition: transform .26s var(--ease), opacity .24s var(--ease);
}
.oto.is-in .oto__card { transform: none; opacity: 1; }
@media (min-width: 640px) {
  .oto { align-items: center; }
  .oto__card { border-radius: var(--r-md); padding: 1.9rem 2rem; margin: 1.25rem; }
}
.oto__x { position: absolute; right: .5rem; top: .5rem; }
.oto__added {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-xs); font-weight: 700; color: #2F6B4F;
}
.oto__h { margin-top: .5rem; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.65rem); letter-spacing: -.018em; }
.oto__sub { margin-top: .35rem; font-size: var(--fs-sm); color: var(--muted); }

.oto__opts { display: grid; gap: .7rem; margin-top: 1.15rem; }
@media (min-width: 540px) { .oto__opts { grid-template-columns: 1fr 1fr; } }
.oto__opt { padding: 1rem 1.05rem; border: 1px solid var(--line-2); border-radius: var(--r-md); }
.oto__opt.is-upgrade { border-color: var(--brand-mid); background: var(--accent-soft); }
.oto__tag { font-size: var(--fs-micro); font-weight: 700; color: var(--muted); }
.oto__opt.is-upgrade .oto__tag { color: var(--accent); }
.oto__opt h3 { margin-top: .2rem; font-size: var(--fs-h3); }
.oto__price { margin-top: .35rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.oto__lines { margin-top: .6rem; display: grid; gap: .3rem; }
.oto__lines li { position: relative; padding-left: .95rem; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }
.oto__lines li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-mid); }

.oto__delta { margin-top: .9rem; font-size: var(--fs-xs); color: var(--muted); }
.oto__acts { display: grid; gap: .55rem; margin-top: 1.1rem; }

/* --- 32 · Checkout -------------------------------------------------------- */
.co { display: grid; gap: 2rem; }
.co > * { min-width: 0; }
@media (min-width: 900px) {
  .co { grid-template-columns: minmax(0, 1fr) 380px; gap: 3rem; align-items: start; }
  .co__sum { position: sticky; top: calc(var(--header-h) + 20px); }
}
.co__h { font-size: var(--fs-h3); }
.co__form { display: grid; gap: 1.15rem; max-width: 620px; }
.co__form .co__h { margin-bottom: -.15rem; }

.field { display: grid; gap: .4rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > label, .field > legend { font-size: var(--fs-sm); font-weight: 700; padding: 0; }
.field > label span, .field > legend span { color: var(--accent); }
.field__opt { font-weight: 400; color: var(--muted); }
.field input[type="text"], .field input[type="tel"], .field textarea {
  width: 100%; padding: .8rem .9rem; font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.field input { min-height: 48px; }
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field__hint { font-size: var(--fs-xs); color: var(--muted); }
.field__err { font-size: var(--fs-xs); font-weight: 700; color: #A32219; }
.field.is-bad input, .field.is-bad textarea { border-color: #A32219; }

.area { display: grid; gap: .55rem; }
@media (min-width: 480px) { .area { grid-template-columns: 1fr 1fr; } }
.area__opt { position: relative; display: block; cursor: pointer; }
.area__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.area__body {
  display: block; padding: .85rem 1rem; min-height: 62px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.area__body b { display: block; font-size: var(--fs-sm); }
.area__body em { display: block; margin-top: .1rem; font-style: normal; font-size: var(--fs-xs); color: var(--muted); }
.area__opt input:checked + .area__body { border-color: var(--accent); background: var(--accent-soft); }
.area__opt input:checked + .area__body em { color: var(--accent); }
.area__opt input:focus-visible + .area__body { outline: 2px solid var(--accent); outline-offset: 2px; }

.co__sum {
  padding: 1.25rem; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
}
@media (min-width: 900px) { .co__sum { padding: 1.5rem; } }
.co__items { margin-top: .9rem; border-top: 1px solid var(--line); }
.co__items li { display: flex; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.co__items .ci__body { flex: 1; min-width: 0; }
.co__items .ci__name { font-size: var(--fs-sm); font-weight: 700; }
.co__items .ci__sub { margin-top: .12rem; font-size: var(--fs-xs); color: var(--muted); }
.co__items .ci__price { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.ci__rm { margin-top: .3rem; font-size: var(--fs-micro); color: var(--muted); text-decoration: underline; }
.ci__rm:hover { color: #A32219; }

.bump { margin-top: .9rem; }
.bump__row {
  display: flex; gap: .7rem; padding: .85rem .9rem; cursor: pointer;
  border: 1.5px dashed var(--line-2); border-radius: var(--r-sm);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.bump__row:hover { border-color: var(--brand-mid); }
.bump input { flex: none; width: 20px; height: 20px; margin-top: .1rem; accent-color: var(--accent); }
.bump input:checked ~ .bump__body { color: var(--ink); }
.bump:has(input:checked) .bump__row { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.bump__body { flex: 1; min-width: 0; }
.bump__top { display: flex; justify-content: space-between; gap: .7rem; font-size: var(--fs-sm); }
.bump__body em { display: block; margin-top: .15rem; font-style: normal; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }

.co__totals { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line-2); display: grid; gap: .5rem; }
.co__totals li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); }
.co__totals span { color: var(--muted); }
.co__grand { margin-top: .35rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.co__grand span { color: var(--ink); font-weight: 700; }
.co__grand b { font-size: 1.2rem; }
.co__cod { display: flex; gap: .55rem; margin-block: 1rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }
.co__cod svg { flex: none; color: var(--brand-mid); margin-top: .1rem; }
.co__sum .btn { margin-top: .2rem; height: 52px; }
.co__fine { margin-top: .7rem; font-size: var(--fs-micro); color: var(--muted); line-height: 1.55; }
.co-empty { max-width: 46ch; }
@media (max-width: 899px) { .co__sum .btn, .co__fine { display: none; } }

/* --- 33 · Confirmation ---------------------------------------------------- */
.conf { max-width: 620px; }
.conf__mark {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.conf__h { margin-top: 1rem; font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.2rem); letter-spacing: -.02em; }
.conf__lead { margin-top: .7rem; font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.65; }
.conf__card {
  margin-top: 1.75rem; padding: 1.25rem;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
}
.conf__who { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); display: grid; gap: .35rem; }
.conf__who li { display: flex; gap: .6rem; font-size: var(--fs-xs); color: var(--muted); }
.conf__who b { color: var(--ink-2); font-weight: 500; }
.conf__next { margin-top: 1.75rem; display: grid; gap: .8rem; }
.conf__next li { display: flex; gap: .8rem; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.conf__next b {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--wash-2); color: var(--ink-2);
  display: grid; place-items: center; font-size: var(--fs-micro); font-weight: 700;
}
.conf .hero__cta { margin-top: 2rem; }

/* ==========================================================================
   34 · Floating side entry points — Free Coloring Page / Try Coloring
   Wide desktop: slim vertical tabs on the viewport edges.
   Below 1280px: a compact stack bottom-right (side tabs would sit on the
   content once the container stops having spare margin).
   Never rendered on cart / checkout / confirmation.
   ========================================================================== */
.sidectas { }

.sidecta {
  z-index: 70;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .005em;
  transition: transform .18s var(--ease), background .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.sidecta__ico { display: flex; flex: none; }
.sidecta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* the OTO 1 dialog owns the screen while it is open */
body.is-oto-open .sidectas { opacity: 0; pointer-events: none; }
.sidectas { transition: opacity .2s var(--ease), transform .2s var(--ease); }

/* ---------- wide desktop: edge tabs ---------- */
@media (min-width: 1280px) {
  .sidecta__short { display: none; }
  .sidecta {
    position: fixed; top: 48%;
    flex-direction: column; gap: .55rem;
    padding: 1.05rem .62rem;
  }
  .sidecta__lbl { writing-mode: vertical-rl; }

  /* left — the funnel entry, so it carries the brand fill (ink on orange, 8.6:1) */
  .sidecta--free {
    left: 0; transform: translateY(-50%);
    background: var(--brand); color: var(--ink);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    box-shadow: 0 6px 20px -10px rgba(23, 22, 26, .45);
  }
  .sidecta--free .sidecta__lbl { transform: rotate(180deg); }   /* reads bottom-to-top */
  .sidecta--free:hover { transform: translateY(-50%) translateX(3px); background: var(--brand-hov); }

  /* right — secondary, quieter */
  .sidecta--try {
    right: 0; transform: translateY(-50%);
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-2); border-right: 0;
    border-radius: var(--r-md) 0 0 var(--r-md);
    box-shadow: 0 6px 20px -12px rgba(23, 22, 26, .3);
  }
  .sidecta--try .sidecta__ico { color: var(--accent); }
  .sidecta--try:hover { transform: translateY(-50%) translateX(-3px); border-color: var(--brand-mid); }
}

/* ---------- tablet and mobile: compact stack, bottom-right ---------- */
@media (max-width: 1279px) {
  .sidecta__lbl { display: none; }
  .sidectas {
    position: fixed; z-index: 70;
    right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
  }
  .sidecta {
    gap: .45rem; height: 40px; padding: 0 .9rem;
    border-radius: 999px;
    box-shadow: 0 5px 16px -6px rgba(23, 22, 26, .32);
  }
  .sidecta--free { background: var(--brand); color: var(--ink); }
  .sidecta--free:active { background: var(--brand-hov); }
  .sidecta--try {
    background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
  }
  .sidecta--try .sidecta__ico { color: var(--accent); }

  /* sit above the product page's sticky purchase bar rather than under it */
  body:has(.stickybuy.is-in) .sidectas { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  /* step aside while the reader scrolls down */
  .sidectas.is-away { opacity: 0; transform: translateY(10px); pointer-events: none; }
  /* pages whose own bottom-right corner is interactive keep the edge tabs only */
  .sidectas--edge-only { display: none; }
  /* the full-screen mobile menu owns the screen while it is open */
  body:has(.menu.is-open) .sidectas { opacity: 0; pointer-events: none; }
}

/* --- 35 · Real order submission: error state, reference, honeypot ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.co__err {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-top: .9rem; padding: .8rem .9rem;
  background: #FDF1F0; border: 1px solid #E8C4C0; border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: #8C1D14; line-height: 1.55;
}
.co__err svg { flex: none; margin-top: .1rem; }

.conf__ref {
  display: inline-flex; align-items: baseline; gap: .6rem;
  margin-top: 1.1rem; padding: .55rem .9rem;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-sm);
}
.conf__ref span { font-size: var(--fs-xs); color: var(--muted); }
.conf__ref b {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .04em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}

.btn[disabled] { cursor: progress; }

/* ==========================================================================
   36 · Starter Combo CRO blocks
   Four small additions built from the existing V2.4 tokens — no new colours,
   no new type sizes, no new spacing scale. Each one exists to answer a
   question the visitor is already asking at that point on the page.
   ========================================================================== */

/* --- hero: one compact reassurance line directly under the primary CTA ---- */
.buy__assure {
  display: flex; gap: .55rem; align-items: flex-start;
  margin-top: .9rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.55;
}
.buy__assure svg { flex: none; color: var(--brand-mid); margin-top: .1rem; }
.buy__assure b { font-weight: 700; color: var(--ink-2); }

/* --- self-identification strip: "this is for me", in three lines ---------- */
.forwho { background: var(--accent-soft); border-block: 1px solid var(--accent-line); }
.forwho__inner {
  padding-block: 1.35rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem 2rem;
}
.forwho__h { font-size: var(--fs-sm); font-weight: 700; color: var(--accent); }
.forwho__list { display: grid; gap: .5rem; flex: 1 1 22rem; min-width: 0; }
.forwho__list li { display: flex; gap: .55rem; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.forwho__list svg { flex: none; color: var(--brand-mid); margin-top: .18rem; }
@media (min-width: 900px) {
  .forwho__list { grid-template-columns: repeat(3, 1fr); gap: .5rem 1.6rem; }
}

/* --- mid-page CTA: a quiet band, not a banner ----------------------------- */
.midcta { background: var(--wash); border-block: 1px solid var(--line); }
.midcta__inner {
  padding-block: clamp(1.6rem, 1.2rem + 1.2vw, 2.35rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.1rem 2rem;
}
.midcta__text { flex: 1 1 20rem; min-width: 0; }
.midcta__text h2 { font-size: var(--fs-h3); letter-spacing: -.01em; }
.midcta__text p { margin-top: .3rem; font-size: var(--fs-sm); color: var(--ink-2); max-width: 40ch; }
.midcta__act { flex: none; }
.midcta__fine { margin-top: .55rem; font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 620px) {
  .midcta__act { width: 100%; }
  .midcta__act .btn { width: 100%; }
  .midcta__fine { text-align: center; }
}

/* --- why-this-start: three decision-focused ideas -------------------------- */
.whygrid { display: grid; gap: 1.1rem 2rem; }
.whygrid li { padding-top: .9rem; border-top: 2px solid var(--accent-line); }
.whygrid h3 { font-size: var(--fs-h3); letter-spacing: -.008em; }
.whygrid p { margin-top: .35rem; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }
@media (min-width: 760px) { .whygrid { grid-template-columns: repeat(3, 1fr); } }

/* --- what happens after ordering ------------------------------------------ */
.steps3 { display: grid; gap: .85rem 2rem; }
.steps3 li { display: flex; gap: .8rem; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.steps3 b {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
  display: grid; place-items: center; font-size: var(--fs-micro); font-weight: 700;
}
@media (min-width: 760px) { .steps3 { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   37 · Combos collection page
   Built from the existing V2.4 tokens and button system. Four components:
   self-selection chips, detail cards, a side-by-side comparison that becomes
   stacked cards on mobile, and a plain "if you… then…" decision list.
   ========================================================================== */

/* --- main combo cards ----------------------------------------------------- */
.ccards { display: grid; gap: 1.5rem 1.25rem; }
@media (min-width: 620px) { .ccards { grid-template-columns: repeat(2, 1fr); } }
/* three across, so six combos read as two calm rows rather than one cramped one */
@media (min-width: 980px) { .ccards { grid-template-columns: repeat(3, 1fr); } }

.ccard {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.ccard__media { position: relative; background: var(--wash); }
.ccard__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (min-width: 620px) { .ccard__media img { aspect-ratio: 1 / 1; } }
.ccard__media .ph { left: .5rem; top: .5rem; }
.ccard__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1rem 1.1rem; }
.ccard__for { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); line-height: 1.4; }
.ccard__name { margin-top: .35rem; font-size: var(--fs-h3); }

.ccard__inc {
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line);
  display: grid; gap: .5rem;
}
.ccard__inc li { display: flex; gap: .5rem; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }
.ccard__inc svg { flex: none; color: var(--brand-mid); margin-top: .12rem; }
.ccard__inc em { display: block; margin-top: .1rem; font-style: normal; color: var(--muted); }
/* auto pushes every card's button to the same baseline, whatever the contents */
.ccard__inc { margin-bottom: 1.1rem; }
.ccard__cta { margin-top: auto; }
/* keep the four combo names on one line together when the "who" line wraps */
@media (min-width: 620px) { .ccard__for { min-height: 2.8em; } }

/* --- comparison: four columns on desktop, four stacked cards on mobile ---- */
.cmp { display: grid; gap: 1rem; }
@media (min-width: 760px) { .cmp { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cmp { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.cmp__col {
  display: flex; flex-direction: column;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
/* price and name sit together on a tinted head so the four are compared first
   on the two things that decide it: what it costs and what it is called */
/* name, then the value block beneath it — identical shape whether or not the
   column has a saving to show, so the six columns stay level */
.cmp__top { padding-bottom: .75rem; border-bottom: 2px solid var(--accent-line); }
.cmp__top .val { margin-top: .35rem; }
.cmp__top .val__now { font-size: 1.25rem; }
.cmp__name { font-size: var(--fs-h3); }

.cmp__rows { margin-top: .85rem; display: grid; gap: .1rem; }
.cmp__rows > div {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: .5rem 1rem;
  align-items: baseline; padding: .45rem 0; border-bottom: 1px solid var(--line);
}
.cmp__rows > div:last-child { border-bottom: 0; }
.cmp__rows dt { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cmp__rows dd { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }
.cmp__rows .cmp__big { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.cmp__rows { margin-bottom: 1rem; }
.cmp__go { margin-top: auto; }

/* comfortable thumb targets for the two text-link CTAs on this page */


/* --- card detail panel, shown in place while a product page is missing ----- */
.ccard__more { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.ccard__inc--more { margin-top: 0; padding-top: 0; border-top: 0; }
.ccard__soon {
  display: flex; gap: .5rem; align-items: flex-start; margin-top: .8rem;
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.5;
}
.ccard__soon svg { flex: none; color: var(--brand-mid); margin-top: .12rem; }

/* --- 20-second chooser ---------------------------------------------------- */
.chooser__box {
  padding: 1.4rem 1.25rem; border: 1px solid var(--accent-line);
  border-radius: var(--r-md); background: var(--accent-soft); max-width: 780px;
}
.chooser__q { font-size: var(--fs-lead); font-weight: 700; letter-spacing: -.01em; }
.chooser__q:focus-visible { outline: 2px solid var(--brand-mid); outline-offset: 4px; border-radius: 4px; }
.chooser__opts { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.chooser__opt { background: var(--surface); }
@media (max-width: 560px) { .chooser__opts { display: grid; } .chooser__opt { width: 100%; } }

.recs { margin-top: 1rem; display: grid; gap: .7rem; }
@media (min-width: 700px) { .recs { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.rec {
  display: flex; flex-direction: column;
  padding: .95rem 1rem 1.05rem; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.rec__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
.rec__head b { font-size: var(--fs-sm); font-weight: 700; }
.rec__price { font-size: var(--fs-sm); font-weight: 700; color: var(--accent); white-space: nowrap; }
.rec__why { margin-top: .3rem; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }
.rec__cta { margin-top: .85rem; align-self: flex-start; }

.chooser__reset {
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--accent-line);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
}
.chooser__reset .tlink { background: none; border-width: 0 0 1px; cursor: pointer; padding: .35rem 0; }

/* FAQ sharing a band with the delivery table */
.faq--after { margin-top: 2rem; }

/* screen-reader-only heading */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ccard__spec { display: grid; gap: .45rem; }
.ccard__spec > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .5rem .8rem; align-items: baseline; }
.ccard__spec dt { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ccard__spec dd { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }

/* Family Combo's one-line positioning, under the name */
.ccard__tag { margin-top: .75rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; font-style: normal; }
.ccard__tag + .ccard__cta, .ccard__tag ~ .ccard__cta { margin-top: 1.1rem; }

/* ==========================================================================
   38 · Combo value block  (tools/value.py → .val)
   Rendered only from confirmed catalogue prices. When any component price is
   unknown the block collapses to the combo price alone — see tools/value.py.
   Hierarchy: the combo price is the loudest number on the card; the standalone
   total is small, struck and muted; the saving is a quiet sage line.
   ========================================================================== */
.val { margin-top: .3rem; display: grid; gap: .2rem; }

.val__was {
  display: flex; align-items: baseline; gap: .4rem;
  font-size: var(--fs-xs); color: var(--muted);
}
.val__was s { text-decoration-thickness: 1px; text-underline-offset: 2px; }

.val__now { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.val__now .cur { font-size: 1rem; font-weight: 500; color: var(--muted); margin-right: 2px; }

.val__save {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem;
  font-size: var(--fs-xs); color: var(--good);
}
.val__save b { font-weight: 700; }
.val__pct {
  padding: .08rem .4rem; border-radius: 4px;
  background: var(--good-soft); border: 1px solid var(--good-line);
  font-size: var(--fs-micro); font-weight: 700;
}

/* ==========================================================================
   39 · Relax Combo landing page
   Two additions, both built from existing tokens: the "how it compares"
   two-column block, and the saving repeated in the dark closing CTA.
   ========================================================================== */
.vs { display: grid; gap: 1rem; }
@media (min-width: 720px) { .vs { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

.vs__col {
  display: flex; flex-direction: column;
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
/* the page you are already on — quietly marked, never labelled "best" */
.vs__col.is-current { border-color: var(--brand-mid); background: var(--accent-soft); }
.vs__name { font-size: var(--fs-h3); }
.vs__price { margin-top: .25rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.vs__price .cur { font-size: 1rem; font-weight: 500; color: var(--muted); margin-right: 2px; }
.vs__inc {
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line);
  display: grid; gap: .35rem;
}
.vs__col.is-current .vs__inc { border-top-color: var(--accent-line); }
.vs__inc li { font-size: var(--fs-sm); color: var(--ink-2); }
.vs__for { margin-top: .8rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.vs__go { margin-top: 1rem; align-self: flex-start; padding-block: .5rem; }
.vs__here {
  margin-top: 1rem; padding-block: .5rem;
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent);
}

/* saving restated on the dark final CTA — light on dark, still not loud */
.final__val {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .3rem .5rem;
  margin: .9rem auto 0; font-size: var(--fs-xs); color: rgba(255,255,255,.62);
}
.final__val s { text-decoration-thickness: 1px; }
.final__val b { color: #A8D8BC; font-weight: 700; }
.final__val-sep { opacity: .45; }

/* ==========================================================================
   40 · Direct order channels — WhatsApp / Messenger
   Secondary on purpose: the website's own COD checkout stays the loudest
   button in the buy box. These are outline buttons on the HappyTime surface,
   with only the icon carrying the channel's own colour — recognisable without
   dropping two loud brand colours into a calm page.
   ========================================================================== */
.chans { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.chans__lead { font-size: var(--fs-xs); color: var(--muted); }

.chans__list { margin-top: .55rem; display: grid; gap: .5rem; }
@media (min-width: 420px) { .chans__list { grid-template-columns: 1fr 1fr; } }

.chan {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: .5rem .9rem;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-size: var(--fs-sm); font-weight: 700; text-align: center;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.chan span { line-height: 1.2; }
.chan svg { flex: none; }
.chan--whatsapp svg { color: #1FA855; }
.chan--messenger svg { color: #0866FF; }
.chan:hover { background: var(--wash); border-color: var(--ink-3); }
.chan:focus-visible { outline: 2px solid var(--brand-mid); outline-offset: 2px; }

/* ==========================================================================
   41 · Family Combo — adult book chooser
   Radio cards. The chosen one is marked with the brand orange border already
   used elsewhere; nothing here is playful or child-styled, because the page
   still belongs to the adult brand.
   ========================================================================== */
.choose { border: 0; padding: 0; margin: 0; }
.choose__list { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .choose__list { grid-template-columns: repeat(4, 1fr); } }

.pick2 { display: block; cursor: pointer; height: 100%; }
/* clipped rather than zero-sized, so the radio keeps a real focus target
   and stays reachable by assistive tech and testing tools */
.pick2 input { position: absolute; width: 1px; height: 1px; margin: -1px;
               overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pick2__body {
  display: flex; flex-direction: column; gap: .55rem; height: 100%;
  padding: .55rem .55rem .7rem;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.pick2:hover .pick2__body { border-color: var(--ink-3); }
.pick2 input:checked + .pick2__body {
  border-color: var(--brand); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--brand);
}
.pick2 input:focus-visible + .pick2__body { outline: 2px solid var(--brand-mid); outline-offset: 2px; }
.pick2__media { position: relative; border-radius: 4px; overflow: hidden; background: var(--wash); }
.pick2__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.pick2__media .ph { left: .25rem; top: .25rem; padding: .1rem .28rem; font-size: 8px; letter-spacing: .04em; }
.pick2__name { font-size: var(--fs-xs); font-weight: 700; line-height: 1.35; }

.choose.is-bad .pick2__body { border-color: #C9564A; }
.choose__err {
  display: flex; gap: .5rem; align-items: flex-start; margin-top: .75rem;
  font-size: var(--fs-xs); color: #8C1D14; line-height: 1.5;
}
.choose__err svg { flex: none; margin-top: .1rem; }
.choose__note {
  display: flex; gap: .5rem; align-items: flex-start; margin-top: .8rem;
  font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5;
}
.choose__note svg { flex: none; color: var(--good); margin-top: .1rem; }
.choose__note b { font-weight: 700; color: var(--ink); }

/* --- Gift Combo: the three order-clarity notes ---------------------------- */
.giftnote { display: grid; gap: 1rem; }
@media (min-width: 760px) { .giftnote { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.giftnote li { padding-top: .9rem; border-top: 2px solid var(--accent-line); }
.giftnote h3 { font-size: var(--fs-h3); letter-spacing: -.008em; }
.giftnote p { margin-top: .35rem; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }

/* ==========================================================================
   42 · All Books Combo — the collection tiles
   Cover and title only. No theme or mood copy is invented, so each tile says
   exactly what is confirmed: which book it is.
   ========================================================================== */
.tiles { display: grid; gap: .9rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } }

.tile { display: flex; flex-direction: column; gap: .6rem; }
.tile__media { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.tile__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.tile__media .ph { left: .35rem; top: .35rem; padding: .12rem .34rem; font-size: 9px; letter-spacing: .05em; }
.tile__name { font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; }

.tiles__spec {
  display: flex; gap: .5rem; align-items: flex-start; margin-top: 1.1rem;
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.55;
}
.tiles__spec svg { flex: none; color: var(--brand-mid); margin-top: .1rem; }

/* the kids book sits apart — a different product for a different reader */
.tiles__sub {
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
}
.tiles--kids { margin-top: .9rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .tiles--kids { grid-template-columns: repeat(4, 1fr); } }

/* one quiet beginner line under the combo cards — not a section of its own */
.cardsnote {
  display: flex; gap: .55rem; align-items: flex-start; margin-top: 1.5rem;
  font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; max-width: 62ch;
}
.cardsnote svg { flex: none; color: var(--brand-mid); margin-top: .18rem; }

/* comfortable thumb targets on the collection's two card CTAs (collection-only
   classes, so no other page's buttons change) */
.ccard__cta, .cmp__go { min-height: 44px; }

/* ==========================================================================
   43 · Coloring Books collection
   Four small additions. Everything else reuses the combo collection's own
   components — cards, tiles, chooser, accordion, final CTA.
   ========================================================================== */
/* four book cards read better a touch narrower than the six combo cards */
@media (min-width: 700px) { .ccards--books { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ccards--books { grid-template-columns: repeat(4, 1fr); } }
.ccards--books .ccard__name { margin-top: 0; }

/* mood tiles link into the book below rather than to a page that does not exist */
.moodlink { display: flex; flex-direction: column; gap: .55rem; height: 100%; color: inherit; }
.moodlink .tile__media { transition: border-color .16s var(--ease); }
.moodlink__why { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.moodlink:hover .tile__name { color: var(--accent); }
.moodlink:focus-visible { outline: 2px solid var(--brand-mid); outline-offset: 3px; border-radius: var(--r-sm); }

/* book-only bundle prices */
.bundles { display: grid; gap: .7rem; grid-template-columns: repeat(3, 1fr); }
.bundle {
  display: flex; flex-direction: column; gap: .2rem; align-items: center;
  padding: 1rem .6rem 1.1rem; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.bundle__n { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.bundle__n span { font-weight: 500; }
.bundle__p { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.bundle__p .cur { font-size: .95rem; font-weight: 500; color: var(--muted); margin-right: 2px; }

/* kids book — one calm row, brighter ground but the same type and spacing */
.kidsrow {
  display: grid; gap: 1.25rem; align-items: center;
  padding: 1.25rem; border-radius: var(--r-md);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
@media (min-width: 720px) { .kidsrow { grid-template-columns: 220px 1fr; gap: 2rem; padding: 1.5rem; } }
.kidsrow__media { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.kidsrow__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.kidsrow__body p { margin-top: .5rem; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; max-width: 52ch; }
.kidsrow__price { margin-top: .7rem; font-size: 1.3rem; font-weight: 700; }
.kidsrow__price .cur { font-size: .95rem; font-weight: 500; color: var(--muted); margin-right: 2px; }
.kidsrow__cta { margin-top: .9rem; }
.kidsrow .ccard__more { border-top-color: var(--accent-line); }

/* quiet cross-navigation to the combos */
.crossnav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
}
.crossnav h2 { font-size: var(--fs-h3); }
.crossnav p { margin-top: .3rem; font-size: var(--fs-sm); color: var(--ink-2); }

/* ==========================================================================
   44 · Adult Book product page
   Three small additions. Everything else on the page is the existing PDP —
   same hero, gallery, buy box, bands, mid CTA, FAQ, final CTA and sticky bar.
   ========================================================================== */
/* related books: three tiles, not the four the collection lays out */
@media (min-width: 760px) { .tiles--3 { grid-template-columns: repeat(3, 1fr); } }

/* a related book carries its price, so the row answers "how much" in place */
.moodlink__price { margin-top: auto; padding-top: .2rem; font-size: var(--fs-sm); font-weight: 700; }

/* quiet text link under the bundle prices */
.bundlecta { margin-top: 1.1rem; }

/* ==========================================================================
   45 · Coloring Books collection — V2 refinement
   The page's own components: the orientation row, the Look-Inside comparison,
   the bundle panels and the trust strip. Cards, chooser, accordion, kids row
   and final CTA are the existing components, unchanged.
   ========================================================================== */
.phero--tight { padding-bottom: 1.25rem; }

/* --- orientation row: label + cover, nothing else ------------------------- */
.moodrow { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 360px) { .moodrow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .moodrow { grid-template-columns: repeat(4, 1fr); gap: .9rem; } }
.moodchip {
  display: flex; align-items: center; gap: .7rem; height: 100%;
  padding: .5rem .75rem .5rem .5rem; color: inherit;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  transition: border-color .16s var(--ease);
}
.moodchip:hover { border-color: var(--accent-line); }
.moodchip:focus-visible { outline: 2px solid var(--brand-mid); outline-offset: 2px; }
.moodchip { min-width: 0; }
.moodchip__txt { min-width: 0; overflow-wrap: anywhere; }
.moodchip__media { position: relative; flex: none; width: 46px; border-radius: var(--r-sm); overflow: hidden; }
.moodchip__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.moodchip__media .ph { display: none; }
.moodchip__cat { display: block; font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; }
.moodchip__name { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: .1rem; }

/* --- card: category kicker and the quiet second action -------------------- */
.ccards--books .ccard__for { font-size: var(--fs-micro); }
.ccard__second { margin-top: .25rem; text-align: center; font-size: var(--fs-xs); }
.ccard__second .tlink { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .5rem; }

/* --- Look Inside: four books, their pages side by side -------------------- */
.looks { display: grid; gap: 1.6rem 1.1rem; grid-template-columns: 1fr; }
/* two per row at most: a "look inside" comparison is worthless if the pages are
   too small to see. Four abreast made each page about 90px wide. */
@media (min-width: 620px) { .looks { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.2rem; } }
.look { display: flex; flex-direction: column; gap: .7rem; }
.look__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.look__name { font-size: var(--fs-h3); letter-spacing: -.015em; }
.look__cat { font-size: var(--fs-xs); color: var(--muted); }
.look__pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.look__page { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.look__page img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.look__page .ph { left: .3rem; top: .3rem; padding: .08rem .28rem; font-size: 8px; letter-spacing: .03em; opacity: .85; }
.look__go { margin-top: auto; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }

/* --- finder: the four-book answer and its footnote ------------------------ */
@media (min-width: 760px) { .recs--four { grid-template-columns: repeat(2, 1fr); } }
.chooser__note {
  display: flex; gap: .55rem; align-items: flex-start; margin-top: 1.1rem;
  font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55;
}
.chooser__note svg { flex: none; color: var(--brand-mid); margin-top: .2rem; }

/* --- bundles: a price with a real next step ------------------------------- */
/* the actionable variant only — the book product page keeps the plain 3-up row */
.bundles--act { grid-template-columns: 1fr; align-items: start; }
@media (min-width: 640px) { .bundles--act { grid-template-columns: repeat(3, 1fr); } }
.bundles--act .bundle { min-width: 0; text-align: left; align-items: stretch; padding: 1rem .9rem 1.1rem; }
.bundles--act .bundle__n, .bundles--act .bundle__p { text-align: center; }
.bundle__cta { margin-top: .85rem; }
.bundle__cta, .look__go { min-height: 44px; }
.bpanel { margin-top: .85rem; }
.bpanel__lead { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.bpanel__titles { margin-top: .5rem; display: grid; gap: .22rem; }
.bpanel__titles li { font-size: var(--fs-xs); color: var(--ink-2); }
.bpanel__titles li::before { content: "· "; color: var(--muted); }
.bpanel__save {
  margin-top: .7rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .45rem;
  font-size: var(--fs-xs); color: var(--muted);
}
.bpanel__save s { color: var(--muted); }
.bpanel__save b { color: var(--good); font-size: var(--fs-sm); }
.bpanel__how {
  display: flex; gap: .5rem; align-items: flex-start; margin-top: .7rem;
  font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.55;
}
.bpanel__how svg { flex: none; color: var(--brand-mid); margin-top: .15rem; }

/* --- one compact trust strip, so delivery is stated once ------------------ */
.trustrow {
  display: grid; gap: .5rem; margin-bottom: 2rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) { .trustrow { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.trustrow li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); }
.trustrow svg { flex: none; color: var(--brand-mid); margin-top: .18rem; }

/* book cards: the description varies in length, so pin the action to the bottom
   (the generic rule at .ccard__tag ~ .ccard__cta outranks the shared one) */
.ccards--books .ccard__tag { margin-bottom: 1.1rem; }
.ccards--books .ccard__tag ~ .ccard__cta { margin-top: auto; }

/* the book page's closing block offers a second, quieter way out */
.final__alt { color: #fff; opacity: .8; }
.final__alt:hover { opacity: 1; }

/* ==========================================================================
   46 · Adult Book purchase block
   Order Now stays the only loud button; the second action is an outline button
   at the same width, so the hierarchy reads at a glance without a new style.
   ========================================================================== */
.buy__cta2 { margin-top: .55rem; }
.buy__added {
  display: flex; gap: .5rem; align-items: flex-start; margin-top: .6rem;
  font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5;
}
.buy__added svg { flex: none; color: var(--good); margin-top: .15rem; }

/* the support variant sits under the COD line and reads as help, not as a sell.
   Scoped, so the combo pages' channel block keeps the styling it was given. */
.chans--help .chans__lead { font-weight: 700; color: var(--ink-2); }
/* help variant: a touch smaller, so "WhatsApp-এ কথা বলুন" stays on one line in
   the narrow buy column at 1024 */
.chans--help .chan { font-size: var(--fs-xs); }

/* the mid-page and closing CTAs carry the same two actions as the buy box, in
   the same order and with the same difference in weight */
.midcta__act { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
.midcta__act .btn { width: 100%; }
.ctapair__alt { align-self: center; }
@media (min-width: 621px) { .ctapair__alt { align-self: stretch; } }
.final__added { justify-content: center; margin-top: 1rem; color: rgba(255,255,255,.75); }
.final__added svg { color: #fff; }
.final__nav { margin-top: .9rem; }

/* ==========================================================================
   47 · Dispatch origin
   The origin rides along with the COD / delivery line. On a narrow screen the
   line would otherwise become three cramped rows, so the origin drops to its
   own line and its separator disappears with it.
   ========================================================================== */
.assure__from { white-space: nowrap; }
@media (max-width: 560px) {
  .assure__from { display: block; margin-top: .15rem; white-space: normal; }
  .assure__sep { display: none; }
}

/* ==========================================================================
   48 · Coloring tool / marker PDP
   Three components of its own — the shade grid, the facts table and the
   four-up set comparison. Everything else on the page is the existing PDP.
   ========================================================================== */
/* --- the shades ----------------------------------------------------------- */
.swatches { display: grid; gap: .5rem; grid-template-columns: repeat(5, 1fr); }
@media (min-width: 520px) { .swatches { grid-template-columns: repeat(7, 1fr); gap: .7rem; } }
.swatch {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
}
/* no colour is confirmed yet, so a slot reads as a slot and not as a shade */
.swatch--empty {
  background: var(--wash); border-style: dashed;
  display: flex; align-items: center; justify-content: center;
}
.swatch__n { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }

/* --- confirmed product facts, in the price-table shape -------------------- */
.facts li b { font-weight: 700; }

/* --- four sets side by side ---------------------------------------------- */
@media (min-width: 720px) { .vs--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .vs--4 { grid-template-columns: repeat(4, 1fr); } }
.vs--4 .vs__col { min-width: 0; }
.vs__note {
  margin-top: 1rem; padding-block: .5rem;
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.5;
}
.vs--4 .vs__go, .vs--4 .vs__here, .vs--4 .vs__note { margin-top: auto; }

/* ==========================================================================
   49 · Accessories collection
   One new component: a plain row of product links used where cards would
   overstate a small cross-sell.
   ========================================================================== */
.linkrow { display: grid; gap: .1rem; }
@media (min-width: 700px) { .linkrow { grid-template-columns: repeat(2, 1fr); gap: .1rem 2rem; } }
.linkrow li { border-bottom: 1px solid var(--line); }
.linkrow .tlink {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  min-height: 52px; width: 100%; font-size: var(--fs-sm);
}
.linkrow .tlink svg { margin-left: auto; flex: none; }
/* a lone hero button should not stretch the full width of a desktop page */
@media (min-width: 560px) { .hero__cta--one .btn { flex: 0 1 auto; } }
/* two categories read better as halves than as two quarters */
@media (min-width: 900px) { .moodrow--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .moodrow--3 { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   50 · All Products
   Category chips and a plain category card. No sidebar, no sort, no badges —
   the grid itself is the existing collection card.
   ========================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: 0 .95rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  font-size: var(--fs-sm); font-weight: 700;
  transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.chip:hover { border-color: var(--ink-3); }
.chip:focus-visible { outline: 2px solid var(--brand-mid); outline-offset: 2px; }
.chip.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.chip__n { font-weight: 500; color: var(--muted); font-size: var(--fs-xs); }
.chip.is-on .chip__n { color: var(--accent); }
.chips__none { margin-top: 1rem; font-size: var(--fs-sm); color: var(--muted); }

/* the four category cards carry no image — text and one action */
.ccard--cat { background: var(--wash); }
.ccard--cat .ccard__body { padding-block: 1.35rem 1.4rem; }
.ccard--cat .ccard__tag { margin-bottom: 1.1rem; }
.ccard--cat .ccard__cta { margin-top: auto; }

/* ==========================================================================
   51 · Cart page
   Review and adjust, then leave. Same card language as the rest of the site;
   the checkout form keeps its own layout, untouched.
   ========================================================================== */
.cart { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .cart { grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem; } }

.cartlist { display: grid; gap: .9rem; }
.cartrow {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: .9rem;
  align-items: start; padding: .9rem; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface);
}
@media (min-width: 560px) { .cartrow { grid-template-columns: 104px minmax(0, 1fr) auto; gap: 1.1rem; } }
.cartrow__media { border-radius: var(--r-sm); overflow: hidden; background: var(--wash); }
.cartrow__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.cartrow__name { font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; }
.cartrow__name a { color: inherit; }
.cartrow__name a:hover { color: var(--accent); }
.cartrow__opt { margin-top: .2rem; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.cartrow__opt--warn { color: var(--accent); font-weight: 700; }
.cartrow__unit { margin-top: .35rem; font-size: var(--fs-xs); color: var(--muted); }
.cartrow__qty { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .7rem; }
.cartrow__qty .qty { min-width: 0; }
.cartrow__qty .qty__i { min-width: 2.2rem; text-align: center; line-height: 40px; }
.cartrow__rm { font-size: var(--fs-xs); min-height: 44px; display: inline-flex; align-items: center; }
.cartrow__line { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }

.cart__sum {
  padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--wash);
}
@media (min-width: 900px) { .cart__sum { position: sticky; top: 1.25rem; } }
.cart__later { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); text-align: right; }
.cart__rates { margin-top: .6rem; font-size: var(--fs-xs); color: var(--ink-2); }
.cart__go { margin-top: 1.1rem; }
.cart__more { display: block; margin-top: .75rem; text-align: center; font-size: var(--fs-sm); min-height: 44px; }
.cart__err {
  display: flex; gap: .55rem; align-items: flex-start; margin-bottom: 1rem;
  padding: .8rem .9rem; border-radius: var(--r-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55;
}
.cart__err svg { flex: none; color: var(--brand-mid); margin-top: .2rem; }

.cart-empty { padding-block: 1rem 2rem; max-width: 52ch; }
.cart-empty__h { font-size: var(--fs-h2); letter-spacing: -.015em; }
.cart-sug { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.cart-sug__h { font-size: var(--fs-h3); margin-bottom: .9rem; }

/* ==========================================================================
   52 · Contact page
   No new components. The contact methods are the existing collection card
   (.ccard) holding the existing channel button (.chan); the hours strip, the
   help list, the delivery block and the quick links are .trustrow,
   .forwho__list, .note and .linkrow exactly as every other page uses them.
   Only the grid width and the card's copy line are new, because a contact card
   carries no image and two cards should not sit in a three-column grid.
   ========================================================================== */
@media (min-width: 980px) { .ccards--contact { grid-template-columns: repeat(2, 1fr); } }
.ccards--contact .ccard__body { padding: 1.15rem 1.15rem 1.25rem; }
.ccard__copy { margin-top: .4rem; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }
/* the action sits on the same baseline in both cards whatever the copy length */
.ccards--contact .ccard__cta { margin-top: 1.1rem; }
.ccards--contact .ccard__cta .chan,
.ccards--contact .ccard__cta .btn { width: 100%; }

/* ---- bundle chooser ------------------------------------------------------
   She picks her own books for the 2 and 3 book bundles. The selected state
   reuses the aria-pressed pattern the design already uses elsewhere, so this
   adds a layout and nothing new to look at. */
.pickbox { margin-top: .85rem; }
.pickbox__lead { font-size: var(--fs-xs); color: var(--ink-2); margin: 0 0 .5rem; }
.pickbox__count { display: block; color: var(--accent); font-weight: 600; }
.pickbox__opts { display: grid; gap: .4rem; margin-bottom: .7rem; }
@media (min-width: 480px) {
  .pickbox__opts { grid-template-columns: 1fr 1fr; }
}
.pickbox__opt { width: 100%; text-align: center; }
/* .btn--outline sets its own background and border, so the selected state
   needs one more class to win. Without it the press does nothing visible. */
.pickbox__opts .pickbox__opt[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}

/* The bundle tiles on a product page now end in a real next step. */
.bundle__go { margin-top: .55rem; }

/* A tile has to be allowed to shrink to its column. Without this the widest
   unbreakable word inside a card sets a floor and the whole row pushes the
   page sideways on a phone. The price itself still never breaks. */
.tile, .bundle { min-width: 0; }
.tile .btn, .bundle__go { white-space: normal; }
.tile .btn .num, .bundle__go .num { white-space: nowrap; }

/* ---------- combo book chooser -----------------------------------------
   A combo that needs a choice cannot be ordered until she has made it.
   The waiting button is deliberately neutral - a calm, solid, readable
   surface - rather than the primary orange at .55 opacity, which reads as
   broken rather than as "not yet". */
.choose__count {
  margin: .35rem 0 0;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.choose.is-bad .choose__count { color: #C9564A; }

/* Options she cannot take because the combo is already full. Still fully
   legible - every title stays readable, it simply stops responding. */
.pick2 input:disabled { cursor: not-allowed; }
.pick2 input:disabled + .pick2__body {
  opacity: 1;
  background: var(--wash);
  border-color: var(--line-2);
  color: var(--muted);
}
.pick2 input:disabled + .pick2__body .pick2__name { color: var(--muted); }
.pick2 input:disabled + .pick2__body .pick2__media { filter: grayscale(1); opacity: .55; }

/* The chosen ones stay obvious even beside the unavailable ones. */
.pick2 input:checked + .pick2__body { box-shadow: inset 0 0 0 2px var(--brand-mid); }

/* The waiting CTA: full opacity, neutral ground, real text contrast. */
.btn.is-waiting,
.btn.is-waiting[disabled] {
  opacity: 1;
  background: var(--wash-2);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  box-shadow: none;
  cursor: not-allowed;
}
.btn.is-waiting:hover { background: var(--wash-2); }

/* Mobile: comfortable tap targets, and the grid never pushes the page wide. */
@media (max-width: 560px) {
  .choose__list { gap: .6rem; }
  .pick2__body { min-height: 56px; }
}

/* --- Book chooser, inside the buy column --------------------------------
   She must see the books before the button that needs them, so the chooser
   sits between the contents list and the quantity row. The column is never
   four tiles wide, so the list stays two across at every width. */
.choosebox { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.choosebox__head { margin-bottom: .75rem; }
.choosebox__t { margin: 0; font-size: var(--fs-lead); line-height: 1.25; }
.choosebox__hint { margin: .2rem 0 0; font-size: var(--fs-xs); color: var(--muted); }
.choosebox .choose__count { margin-top: .45rem; }
.choosebox .choose__list { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
.choosebox .pick2__name { font-size: var(--fs-xs); }
.choosebox .choose__err,
.choosebox .choose__note { margin-top: .65rem; }

/* ---------------------------------------------- colour a real book page ---
   Regions come from the artist's own line art, so they carry no stroke of
   their own - the black lines are drawn above them by .lnf. */
.cx__art--real { display: block; background: #FFFFFF; border-radius: var(--radius); overflow: hidden; }
.cx__art--real svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.cx__art--real .pg  { fill: #FFFFFF; }
.cx__art--real .zr  { fill: #FFFFFF; stroke: none; cursor: pointer; transition: fill .12s linear; }
.cx__art--real .zr:hover { fill-opacity: .82; }
.cx__art--real .zr:focus-visible { outline: none; stroke: var(--accent); stroke-width: 14; }
.cx__art--real .lnf { fill: #2B2A2E; stroke: none; pointer-events: none; }

.cxstatus { margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.cxhead { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.cxhead__t { margin: 0; font-size: 20px; }
.cxhead__b { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.cxhead__buy { margin-left: auto; }

.cxlayout { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cxlayout { grid-template-columns: minmax(0,1fr) 240px; align-items: start; } }

.cxtools__lbl { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.cxsw__wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cxsw { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; border: 2px solid rgba(0,0,0,.14);
        cursor: pointer; padding: 0; }
.cxsw[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; }
.cxsw--erase { border-style: dashed; }
.cxbtns { display: flex; flex-direction: column; gap: 8px; }
.btn--full { width: 100%; }

.cxpages { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px;
           grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.cxp { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.cxp__img { background: #fff; }
.cxp__img img { display: block; width: 100%; height: auto; }
.cxp__body { padding: 10px 12px 12px; }
.cxp__title { margin: 0; font-weight: 600; font-size: 15px; }
.cxp__book { margin: 2px 0 10px; color: var(--muted); font-size: 13px; }
.cxp__cta { display: flex; flex-direction: column; gap: 6px; }
.cxp--off { opacity: .72; }

/* ============================================================
   PROFESSIONAL UI LOOK PASS  (staging visual system, 2026-08-31)
   Additive only. Palette lives in :root above; this block sets the
   shared button / card / section / type rhythm on top of it.
   ============================================================ */
:root{
  --r-btn: 14px;            /* soft rounded, deliberately not a capsule */
  --r-card: 18px;           /* owner spec: 16-20px */
  --r-pill: 999px;
  --blush: var(--accent-soft);
  --lav:   var(--wash-2);
  --shadow-card: 0 1px 2px rgba(32,33,38,.04), 0 8px 22px -16px rgba(32,33,38,.14);
  --shadow-card-h: 0 2px 4px rgba(32,33,38,.05), 0 14px 30px -18px rgba(32,33,38,.20);
  --pad-card: 1.15rem;
}

/* ---- Type hierarchy: confident, calm, higher contrast ---- */
h1,.hero__title,.phero h1{ letter-spacing:-.021em; line-height:1.1; color:var(--ink); }
h2,.shead h2{ letter-spacing:-.014em; line-height:1.18; color:var(--ink); }
h3,.card__name,.ccard__name{ letter-spacing:-.008em; line-height:1.3; font-weight:650; color:var(--ink); }
.hero__lead,.phero__lead,.shead p{ color:var(--ink-2); }
.card__note,.ccard__copy,.cardsnote,small{ color:var(--muted); }
.shead{ margin-bottom:1.15rem; }
.shead h2 + p{ margin-top:.45rem; max-width:56ch; }

/* ---- ONE button system ---- */
.btn{
  height:48px; padding:0 1.5rem; border-radius:var(--r-btn);
  font-weight:700; letter-spacing:-.004em;
  transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), box-shadow .18s var(--ease),
             transform .12s var(--ease);
}
.btn--primary{ background:var(--brand); color:#FFFFFF; border-color:transparent;
               box-shadow:0 6px 16px -10px rgba(233,111,118,.75); }
.btn--primary:hover{ background:var(--brand-hov); color:#FFFFFF; }
.btn--primary:active{ transform:translateY(1px); }
.btn--outline{ background:var(--surface); border-color:var(--line); color:var(--ink); }
.btn--outline:hover{ background:var(--blush); border-color:var(--accent-line); color:var(--ink); }
.btn--ghost{ color:var(--ink); border-radius:var(--r-btn); }
.btn--ghost:hover{ background:var(--blush); }
.btn--sm{ height:40px; padding:0 1.05rem; border-radius:12px; }
.btn:focus-visible{ outline:2px solid var(--brand-hov); outline-offset:2px; }

/* ---- ONE card system ---- */
.card,.ccard,.cxp{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:box-shadow .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.card:hover,.ccard:hover,.cxp:hover{
  box-shadow:var(--shadow-card-h); border-color:var(--accent-line); transform:translateY(-2px);
}
.card__body,.ccard__body{ padding:var(--pad-card) var(--pad-card) 1.2rem; }
.ccard__media,.card__media{ background:var(--wash); }
.ccard__for{ color:var(--accent); letter-spacing:.06em; }
.ccard__more,.ccard__cta{ margin-top:auto; }

/* ---- Section rhythm: cream -> white -> soft band -> white -> lavender ---- */
.section{ padding-block:var(--sec); }
.section--band{ background:var(--wash); }
main > .section--band ~ .section--band{ background:var(--lav); }
.section--tight{ padding-block:calc(var(--sec) * .62); }
.section--soft{ background:var(--blush); }
.final{ background:var(--blush); }

/* ---- Savings / success: calm muted green ---- */
.val__save,.badge--good,.is-good{
  background:var(--good-soft); color:var(--good);
  border:1px solid var(--good-line); border-radius:var(--r-pill);
  padding:.18rem .6rem; font-weight:700;
}

/* ---- Links & small accents ---- */
.tlink{ color:var(--accent); font-weight:650; }
.tlink:hover{ color:var(--accent-deep); border-bottom-color:currentColor; }

/* ---- Header / nav polish ---- */
.nav a[aria-current],.nav a.is-active{ color:var(--accent); }
.nav a[aria-current]::after,.nav a.is-active::after{
  content:""; display:block; height:2px; border-radius:2px;
  background:var(--brand); margin-top:4px;
}
.cart__badge{ background:var(--brand); color:#FFFFFF; }

/* ---- Mobile: keep it premium at 390 / 360 ---- */
@media (max-width:430px){
  :root{ --pad-card:1rem; --r-card:16px; }
  .btn{ height:46px; padding:0 1.15rem; }
  .btn--full{ width:100%; }
  h1,.hero__title,.phero h1{ line-height:1.14; }
  .shead{ margin-bottom:.9rem; }
  .section{ padding-block:calc(var(--sec) * .78); }
  .section--tight{ padding-block:calc(var(--sec) * .52); }
}

/* --- UI LOOK PASS · fix 1: final CTA band recolored to blush --- */
.final{ background:var(--blush); color:var(--ink); }
.final h2{ color:var(--ink); }
.final p{ color:var(--ink-2); }
.final__fine{ color:var(--muted); }
.final__alt{ color:var(--ink-2); opacity:1; }
.final__alt:hover{ color:var(--brand-mid); opacity:1; }
.final__added{ color:var(--ink-2); }
.final__added svg{ color:var(--good); }
.final__val{ color:var(--ink-2); }
.final__val b{ color:var(--good); }
.final__val s{ color:var(--muted); }
.final .btn--outline{ background:var(--surface); border-color:var(--line); color:var(--ink); }
.final .btn--outline:hover{ background:var(--surface); border-color:var(--accent-line); color:var(--ink); }
.cart__badge{ background:var(--accent); color:#FFFFFF; }

/* --- UI LOOK PASS · fix 2: primary CTA contrast correction ---
   #F5868B stays the soft coral brand accent (labels, selected states,
   active tabs, icons, small highlights). Filled primary CTA buttons
   use the deeper coral so white text is readable. */
:root{ --cta:#BE5158; --cta-hov:#A9444C; }
.btn--primary{ background:var(--cta); color:#FFFFFF; border-color:transparent; }
.btn--primary:hover{ background:var(--cta-hov); color:#FFFFFF; }
.btn--primary:active{ background:var(--cta-hov); color:#FFFFFF; }
.final .btn--primary{ background:var(--cta); color:#FFFFFF; }
.final .btn--primary:hover{ background:var(--cta-hov); color:#FFFFFF; }

/* ============================================================
   HOMEPAGE V2 BRAND EXPERIENCE (staging pass)
   ============================================================ */
/* --- trust strip --- */
.section--strip{ padding-block:1.05rem; background:var(--surface); border-block:1px solid var(--line); }
.tstrip{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem 1rem; }
.tstrip__item{ display:flex; align-items:center; gap:.55rem; font-size:var(--fs-sm); color:var(--ink-2); }
.tstrip__item svg{ color:var(--brand-mid); flex:none; }
.tstrip__item b{ color:var(--ink); font-weight:700; }
@media (min-width:760px){
  .tstrip{ grid-template-columns:repeat(4,1fr); }
  .tstrip__item{ justify-content:center; }
}

/* --- mood / need cards --- */
.mood{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
@media (min-width:700px){ .mood{ grid-template-columns:repeat(2,1fr); gap:1.1rem; } }
.mood__card{ position:relative; display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:1.15rem 3rem 1.15rem 1.15rem; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow-card); transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
.mood__card:hover{ transform:translateY(-2px); border-color:var(--accent-line); box-shadow:var(--shadow-card-h); }
.mood__icon{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:var(--blush); color:var(--brand-mid); margin-bottom:.7rem; }
.mood__card h3{ margin:0 0 .25rem; font-size:var(--fs-base); font-weight:700; letter-spacing:-.01em; }
.mood__card p{ margin:0; font-size:var(--fs-sm); color:var(--muted); }
.mood__go{ position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:var(--brand-mid);
  transition:transform .18s var(--ease); }
.mood__card:hover .mood__go{ transform:translateY(-50%) translateX(3px); }

/* --- real pages --- */
.rp{ display:grid; gap:1.7rem; }
@media (min-width:980px){ .rp{ grid-template-columns:repeat(2,1fr); gap:1.5rem 2.2rem; } }
.rp__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.6rem; }
.rp__head h3{ margin:0; font-size:var(--fs-base); font-weight:700; letter-spacing:-.01em; }
.rp__head .tlink{ font-size:var(--fs-sm); white-space:nowrap; }
.rp__pages{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.rp__pages a{ display:block; text-decoration:none; color:var(--muted); }
.rp__pages img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; transition:transform .18s var(--ease), border-color .18s var(--ease); }
.rp__pages a:hover img{ transform:scale(1.02); border-color:var(--accent-line); }
.rp__cap{ display:block; margin-top:.35rem; font-size:var(--fs-xs); text-align:center; }

/* --- moments gallery --- */
.moments__track{ list-style:none; margin:0; padding:.2rem .2rem .6rem; display:grid; grid-auto-flow:column;
  grid-auto-columns:72%; gap:.9rem; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
@media (min-width:640px){ .moments__track{ grid-auto-columns:44%; } }
@media (min-width:900px){
  .moments__track{ grid-auto-flow:row; grid-auto-columns:unset; grid-template-columns:repeat(4,1fr);
    overflow:visible; padding:0; }
}
.moments__tile{ scroll-snap-align:start; aspect-ratio:3/4; border-radius:var(--r-card); overflow:hidden; }
.moments__tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.moments__tile--empty{ display:grid; place-items:center; background:var(--blush);
  border:1px dashed var(--accent-line); color:var(--brand-mid); font-size:var(--fs-sm); font-weight:600; }
.moments__track:focus-visible{ outline:2px solid var(--brand-hov); outline-offset:3px; border-radius:10px; }

/* --- reviews shell (hidden until genuine data exists) --- */
.revs{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
@media (min-width:900px){ .revs{ grid-template-columns:repeat(3,1fr); } }
.rev{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--pad-card); }
.rev__text{ margin:0 0 .7rem; font-size:var(--fs-sm); color:var(--ink-2); }
.rev__meta{ margin:0; font-size:var(--fs-xs); color:var(--muted); display:flex; gap:.6rem; }
.rev__name{ font-weight:700; color:var(--ink); }

/* --- try section: three experiences --- */
@media (min-width:980px){ .try{ grid-template-columns:repeat(3,1fr); } }
.trycard__art svg{ color:var(--brand-mid); }

/* --- motion restraint --- */
@media (prefers-reduced-motion: reduce){
  .mood__card, .mood__go, .rp__pages img{ transition:none; }
  .mood__card:hover{ transform:none; }
  .rp__pages a:hover img{ transform:none; }
}

/* --- V2 polish: alternate later bands back to the neutral wash, keep the
       inline try-card icon at icon scale --- */
main > .section--band ~ .section--band ~ .section--band{ background:var(--wash); }
.trycard__art > svg{ width:64px; height:64px; }

/* ============================================================
   HOMEPAGE V3 PREMIUM POLISH (staging pass)
   ============================================================ */
/* --- editorial kickers + section head rhythm --- */
.kick, .hero__kicker{ margin:0 0 .5rem; font-size:var(--fs-micro); font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--brand-mid); }
.hero__kicker{ margin-bottom:.85rem; }
.shead{ margin-bottom:1.5rem; }
.shead__text p{ max-width:56ch; }

/* --- hero: calmer, more editorial --- */
.hero__title{ letter-spacing:-.025em; }
.hero__lead{ max-width:50ch; }
.hero__cta{ margin-top:1.6rem; }
.hero .btn--primary{ height:52px; padding:0 1.9rem;
  box-shadow:0 12px 24px -14px rgba(190,81,88,.55); }
.hero__media img{ border-radius:22px 0 0 22px; box-shadow:0 22px 44px -30px rgba(32,33,38,.38); }
@media (max-width:759px){ .hero__media img{ border-radius:18px; } }

/* --- categories: storefront-quality shell --- */
.cat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; box-shadow:var(--shadow-card);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.cat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card-h); border-color:var(--accent-line); }
.cat__media{ border-radius:0; }
.cat__label{ padding:.95rem 1.1rem 1.1rem; }
.cat__label h3{ letter-spacing:-.015em; }
.cat__arrow{ color:var(--brand-mid); }

/* --- favorites: curated picks, premium card rhythm --- */
.grid-p{ gap:1.2rem; }
.card__media{ background:var(--bg); }
.card__media img{ transition:transform .35s var(--ease); }
.card:hover .card__media img{ transform:scale(1.02); }
.card__body{ padding:1rem 1.1rem 1.15rem; display:grid; gap:.3rem; }
.card__note{ font-size:var(--fs-xs); color:var(--muted); }
.card__price{ font-size:1.06rem; margin-top:.45rem; padding-top:.55rem;
  border-top:1px dashed var(--line); }

/* --- mood: signature decision helper --- */
.mood__card{ background:linear-gradient(150deg, var(--surface) 55%, var(--blush) 165%);
  padding:1.35rem 3.4rem 1.35rem 1.35rem; }
.mood__icon{ width:46px; height:46px; border-radius:50%; background:var(--surface);
  border:1px solid var(--accent-line); color:var(--cta);
  box-shadow:0 5px 12px -7px rgba(190,81,88,.4); margin-bottom:.85rem; }
.mood__card h3{ font-size:1.03rem; }
.mood__go{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--blush); color:var(--cta); }
.mood__card:hover .mood__go{ background:var(--cta); color:#FFFFFF; }

/* --- real pages: one refined card per book --- */
.rp{ gap:1.2rem; }
.rp__group{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:1.1rem 1.15rem 1.25rem; box-shadow:var(--shadow-card); }
.rp__head{ margin-bottom:.8rem; }
.rp__head h3{ display:flex; align-items:center; gap:.5rem; }
.rp__head h3::before{ content:""; width:8px; height:8px; border-radius:50%;
  background:var(--brand); flex:none; }
.rp__pages img{ border-radius:10px; background:var(--bg); }
.rp__pages a:hover img{ transform:translateY(-2px); box-shadow:var(--shadow-card); border-color:var(--accent-line); }

/* --- inside the books: framed shots, spec chips, soft note --- */
[aria-labelledby="inside-t"] .shot{ background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:.55rem .55rem .3rem; box-shadow:var(--shadow-card); }
[aria-labelledby="inside-t"] .shot img{ border-radius:11px; }
[aria-labelledby="inside-t"] .shot figcaption{ text-align:center; padding:.5rem .2rem .4rem; margin-top:0; }
[aria-labelledby="inside-t"] .specs{ display:flex; flex-wrap:wrap; gap:.55rem; padding:0; list-style:none; }
[aria-labelledby="inside-t"] .specs li{ display:inline-flex; align-items:baseline; gap:.4rem;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:.42rem .9rem; font-size:var(--fs-sm); }
[aria-labelledby="inside-t"] .note{ background:var(--blush); border:1px solid var(--accent-line);
  border-radius:14px; padding:.9rem 1.05rem; }

/* --- why + faq: authority cards, polished accordion --- */
[aria-labelledby="faq-t"] .trust{ gap:1rem; }
[aria-labelledby="faq-t"] .trust__item{ background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:1rem 1.05rem; box-shadow:var(--shadow-card); }
[aria-labelledby="faq-t"] .trust__item svg{ color:var(--cta); }
.faq{ border-top:0; }
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:.15rem 1.05rem; margin-bottom:.6rem; transition:border-color .18s var(--ease); }
.faq details:hover, .faq details[open]{ border-color:var(--accent-line); }

/* --- moments: soft, intentional empty state --- */
.moments__tile--empty{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem; border:1px solid var(--accent-line);
  background:linear-gradient(165deg, #FDF3F0, var(--blush)); }
.moments__tile--empty::before{ content:"\2740"; font-size:1.55rem; color:var(--brand); opacity:.6; }
.moments__tile--empty span{ font-size:var(--fs-xs); color:var(--brand-mid); font-weight:600; letter-spacing:.05em; }

/* --- try: three clear, friendly experiences --- */
.trycard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; box-shadow:var(--shadow-card);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.trycard:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card-h); border-color:var(--accent-line); }
.trycard__art{ display:grid; place-items:center; min-height:128px; padding:1.1rem;
  background:linear-gradient(165deg, #FFF8F5, var(--blush)); }
.trycard__art > svg{ width:76px; height:76px; }
.trycard__body{ padding:1.05rem 1.15rem 1.25rem; }
.trycard__link{ margin-top:.8rem; }

/* --- final band: memorable calm close --- */
.final{ position:relative; overflow:hidden; }
.final::before{ content:""; position:absolute; left:-80px; top:-80px; width:240px; height:240px;
  border-radius:50%; background:radial-gradient(circle, rgba(245,134,139,.20), transparent 70%); }
.final::after{ content:""; position:absolute; right:-90px; bottom:-90px; width:280px; height:280px;
  border-radius:50%; background:radial-gradient(circle, rgba(240,239,247,.9), transparent 72%); }
.final__inner{ position:relative; z-index:1; }
.final h2{ letter-spacing:-.022em; }
.final__cta .btn--primary{ height:52px; padding:0 1.9rem;
  box-shadow:0 12px 24px -14px rgba(190,81,88,.5); }

/* --- V3 mobile + motion restraint --- */
@media (max-width:430px){
  .shead{ margin-bottom:1.1rem; }
  .mood__card{ padding:1.1rem 3rem 1.1rem 1.1rem; }
  .rp__group{ padding:.9rem .9rem 1rem; }
  .trycard__art{ min-height:104px; }
  .trycard__art > svg{ width:64px; height:64px; }
}
@media (prefers-reduced-motion: reduce){
  .cat, .cat__media img, .card__media img, .trycard, .faq details{ transition:none; }
  .cat:hover, .trycard:hover{ transform:none; }
  .cat:hover .cat__media img, .card:hover .card__media img{ transform:none; }
}

/* ============================================================
   DELIVERY METHOD SELECTOR (lead forms: free pages + try happytime)
   ============================================================ */
.dsel{ border:0; padding:0; margin:0 0 1.15rem; }
.dsel__q{ display:block; padding:0; margin:0 0 .55rem; font-size:var(--fs-sm);
  font-weight:700; color:var(--ink); }
.dsel__opts{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; }
.dsel__opt{ position:relative; display:block; cursor:pointer; }
.dsel__opt > input{ position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:pointer; }
.dsel__body{ display:flex; align-items:center; gap:.5rem; min-height:52px;
  padding:.7rem .85rem; border:1.5px solid var(--line); border-radius:14px;
  background:var(--surface); color:var(--ink); font-weight:600; font-size:var(--fs-sm);
  transition:border-color .16s var(--ease), background .16s var(--ease); }
.dsel__ico{ font-size:1.05rem; line-height:1; flex:none; }
.dsel__t{ flex:1 1 auto; }
.dsel__tick{ flex:none; width:20px; height:20px; border-radius:50%; display:grid;
  place-items:center; font-size:.72rem; line-height:1; color:transparent;
  border:1.5px solid var(--line-2); background:var(--surface); }
.dsel__opt > input:hover + .dsel__body{ border-color:var(--accent-line); }
.dsel__opt > input:checked + .dsel__body{ border-color:var(--cta); background:var(--blush); }
.dsel__opt > input:checked + .dsel__body .dsel__tick{ background:var(--cta);
  border-color:var(--cta); color:#FFFFFF; }
.dsel__opt > input:focus-visible + .dsel__body{ outline:2px solid var(--cta); outline-offset:2px; }
.field__hint{ margin:.15rem 0 .35rem; font-size:var(--fs-xs); color:var(--muted); }
@media (max-width:359px){ .dsel__opts{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .dsel__body{ transition:none; } }

/* ================= COLOR INSPIRATION V1 ================= */
.insp__trigger{ margin-top:.15rem; }
.insp__backdrop{ position:fixed; inset:0; background:rgba(32,33,38,.38); opacity:0; pointer-events:none;
  transition:opacity .22s ease; z-index:70; }
.insp.is-open .insp__backdrop{ opacity:1; pointer-events:auto; }
.insp__panel{ position:fixed; z-index:71; background:#FFFFFF; display:flex; flex-direction:column;
  visibility:hidden; box-shadow:0 12px 40px rgba(32,33,38,.18); }
.insp.is-open .insp__panel{ visibility:visible; }
@media (min-width:760px){
  .insp__panel{ top:0; right:0; height:100%; width:min(420px,42vw); border-left:1px solid var(--line,#E8E1DC);
    transform:translateX(100%); transition:transform .26s cubic-bezier(.22,.61,.36,1), visibility .26s; }
  .insp.is-open .insp__panel{ transform:none; }
  .insp__grab{ display:none; }
}
@media (max-width:759px){
  .insp__panel{ left:0; right:0; bottom:0; max-height:88vh; border-radius:20px 20px 0 0;
    border-top:1px solid var(--line,#E8E1DC);
    transform:translateY(100%); transition:transform .26s cubic-bezier(.22,.61,.36,1), visibility .26s; }
  .insp.is-open .insp__panel{ transform:none; }
  .insp__grab{ width:42px; height:4px; border-radius:99px; background:var(--line,#E8E1DC); margin:10px auto 0; }
}
.insp__head{ padding:.9rem 1.1rem .55rem; }
.insp__t{ margin:0 0 .3rem; font-size:1.06rem; line-height:1.35; color:var(--ink,#202126); }
.insp__sub{ margin:0; font-size:.9rem; line-height:1.55; color:var(--muted,#6B6765); }
.insp__body{ padding:.5rem 1.1rem 1rem; overflow:auto; flex:1 1 auto; -webkit-overflow-scrolling:touch; }
.insp__figure{ margin:0; border:1px solid var(--line,#E8E1DC); border-radius:16px; overflow:hidden;
  background:var(--cream,#FBF7F2); }
.insp__img{ display:block; width:100%; height:auto; }
.insp__foot{ padding:0 1.1rem 1.1rem; }
.insp__panel:focus{ outline:none; }
.insp__panel:focus-visible{ outline:2px solid var(--cta,#BE5158); outline-offset:-2px; }
@media (prefers-reduced-motion:reduce){
  .insp__panel, .insp__backdrop{ transition:none; }
}