/* ==========================================================================
   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:        #FCFBFA;
  --surface:   #FFFFFF;
  --wash:      #F5F1EA;   /* image plates, section bands */
  --wash-2:    #EDE7DD;

  /* Ink */
  --ink:       #17161A;
  --ink-2:     #45424A;
  --muted:     #6D6974;
  --faint:     #6F6B79;

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

  /* Brand — HappyTime orange, as a three-step ramp of ONE hue.
     --brand      #F78937  fills only, and only ever with --ink on top (8.6:1)
     --brand-mid  #D9660F  icons, underlines, decorative marks (3.5:1 — AA non-text)
     --accent     #A94D0C  anything that is text: links, labels (5.4:1 on bg, 5.0:1 on --wash)
     Orange never carries white text anywhere: #F78937 on white is 2.4:1 and fails. */
  --brand:       #F78937;
  --brand-hov:   #EC7A22;
  --brand-mid:   #D9660F;
  --accent:      #A94D0C;
  --accent-deep: #883C08;
  /* value-saving accent: deep sage. 6.4:1 on --surface, 6.0:1 on --wash.
     Deliberately quiet — HappyTime never uses loud sale red. */
  --good:      #3D6B4F;
  --good-soft: #EAF1EC;
  --good-line: #CFE0D4;
  --accent-soft: #FEF4EA;
  --accent-line: #F6DCC4;

  /* 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); } }

/* ==========================================================================
   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%; }