/** Shopify CDN: Minification failed

Line 634:10 Expected identifier but found whitespace
Line 634:15 Unexpected ";"

**/
/* ============================================================
   Fablemine — theme stylesheet v1
   Palette: ink #1B1A2E · parchment #F6EFE4 · gold #C9A24A · blush #E8B4A8 · ember #B23A48
   Type: Fraunces (display) · Inter (text)
   ============================================================ */

:root {
  --ink: #1B1A2E;
  --sh: 27,26,46; /* shadow rgb */
  --fg: 246,239,228; /* light text rgb for dark surfaces */
  --glow: rgba(232,180,168,.55);
  --ink-80: color-mix(in srgb, var(--ink) 80%, transparent);
  --ink-60: color-mix(in srgb, var(--ink) 60%, transparent);
  --ink-30: color-mix(in srgb, var(--ink) 30%, transparent);
  --ink-12: color-mix(in srgb, var(--ink) 12%, transparent);
  --ink-06: color-mix(in srgb, var(--ink) 6%, transparent);
  --parchment: #F6EFE4;
  --parchment-2: #EFE5D4;
  --paper: #FBF7F0;
  --gold: #C9A24A;
  --gold-light: #E3C46E;
  --gold-dark: #B8893A;
  --gold-grad: linear-gradient(135deg, #E3C46E 0%, #C9A24A 55%, #B8893A 100%);
  --blush: #E8B4A8;
  --blush-soft: #F4D9D2;
  --ember: #B23A48;
  --ember-dark: #8C2A37;
  --sage: #7C8C6E;
  --midnight: #10203A;

  --font-display: 'Fraunces', 'Caladea', Georgia, serif;
  --font-text: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --page-width: 1180px;
  --page-margin: 20px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-1: 0 1px 2px rgba(var(--sh),.06), 0 8px 24px -12px rgba(var(--sh),.18);
  --shadow-2: 0 2px 6px rgba(var(--sh),.08), 0 30px 60px -30px rgba(var(--sh),.35);
  --ease: cubic-bezier(.2,.7,.2,1);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
body {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--gold-light); color: var(--ink); }

/* --- Layout --- */
.container { width: min(var(--page-width), calc(100% - var(--page-margin) * 2)); margin-inline: auto; }
.container--narrow { width: min(760px, calc(100% - var(--page-margin) * 2)); margin-inline: auto; }
.section { padding-block: clamp(56px, 8vw, 110px); }
.section--tight { padding-block: clamp(36px, 5vw, 64px); }
.section--ink { background: var(--ink); color: var(--parchment); }
.section--paper { background: var(--paper); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

/* --- Typography --- */
.display, h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; }
h1, .h1 { font-size: clamp(38px, 5.6vw, 68px); font-variation-settings: "opsz" 144, "SOFT" 40; }
h2, .h2 { font-size: clamp(30px, 3.8vw, 46px); font-variation-settings: "opsz" 96; }
h3, .h3 { font-size: clamp(21px, 2.2vw, 26px); }
.eyebrow { font-family: var(--font-text); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 14px; }
.section--ink .eyebrow { color: var(--gold-light); }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-80); max-width: 56ch; }
.section--ink .lede { color: rgba(var(--fg),.78); }
.italic { font-style: italic; }
.serif { font-family: var(--font-display); }
.gold-text { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); border: 0; margin: 0; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; } .mt-5 { margin-top: 64px; }
.muted { color: var(--ink-60); }
.small { font-size: 14px; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; font-weight: 600; font-size: 15px; line-height: 1;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: var(--parchment); box-shadow: 0 10px 30px -14px rgba(var(--sh),.6); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(var(--sh),.7); }
.btn--gold { background: var(--gold-grad); color: var(--ink); box-shadow: 0 10px 30px -14px rgba(184,137,58,.8); }
.btn--gold:hover { transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-30); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.section--ink .btn--ghost { color: var(--parchment); box-shadow: inset 0 0 0 1.5px rgba(var(--fg),.4); }
.section--ink .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--parchment); }
.btn--lg { padding: 19px 34px; font-size: 17px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* --- Header --- */
.announcement { background: var(--ink); color: var(--parchment); font-size: 13px; text-align: center; padding: 9px 16px; letter-spacing: .02em; }
.announcement b { color: var(--gold-light); font-weight: 600; }
.header { position: sticky; top: 0; z-index: 50; background: rgba(var(--fg),.86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--ink-06); }
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -.01em; }
.logo svg { width: 34px; height: 34px; }
.nav { display: flex; gap: 28px; font-size: 14.5px; font-weight: 500; }
.nav a { position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover::after { transform: scaleX(1); }
.header__actions { display: flex; align-items: center; gap: 14px; }
.cart-link { position: relative; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; }
.cart-link:hover { background: var(--ink-06); }
.cart-link svg { width: 22px; height: 22px; }
.cart-link .count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ember); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.menu-toggle { display: none; width: 40px; height: 40px; border-radius: 50%; }
.menu-toggle svg { width: 22px; height: 22px; }
@media (max-width: 820px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .header .btn { display: none; }
  .header[data-open="true"] .nav { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 72px; background: var(--parchment); padding: 20px var(--page-margin) 28px; border-bottom: 1px solid var(--ink-12); gap: 18px; font-size: 18px; }
}

/* --- Footer --- */
.footer { background: var(--ink); color: rgba(var(--fg),.8); padding: 64px 0 32px; font-size: 14px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.footer__grid > * { min-width: 0; }
.footer .newsletter input { min-width: 0; }
.footer h4 { font-family: var(--font-text); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer a:hover { color: var(--parchment); }
.footer .logo { color: var(--parchment); }
.footer__tagline { margin-top: 14px; max-width: 34ch; line-height: 1.6; }
.footer__bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(var(--fg),.12); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; color: rgba(var(--fg),.5); font-size: 12.5px; }
.footer .newsletter { display: flex; gap: 8px; margin-top: 10px; }
.footer .newsletter input { flex: 1; background: rgba(var(--fg),.08); border: 1px solid rgba(var(--fg),.2); color: var(--parchment); padding: 11px 14px; border-radius: 999px; }
.footer .newsletter button { background: var(--gold-grad); color: var(--ink); padding: 0 18px; border-radius: 999px; font-weight: 600; }

/* --- Book mockup (CSS 3D) --- */
.book { --w: 240px; --h: calc(var(--w) * 1.5); --d: calc(var(--w) * .05);
  width: var(--w); height: var(--h); position: relative; perspective: 1400px; }
.book__inner { position: absolute; inset: 0; transform: rotateY(-18deg) rotateX(2deg); transition: transform .8s var(--ease); transform-origin: 50% 50%; }
.book:hover .book__inner { transform: rotateY(-10deg) rotateX(1deg); }
.book__front { position: absolute; inset: 0; border-radius: 3px 10px 10px 3px; overflow: hidden;
  box-shadow: inset 7px 0 12px -8px rgba(0,0,0,.55), inset -1px 0 0 rgba(255,255,255,.25),
    calc(var(--d) * .35) 0 0 #efe6d6, calc(var(--d) * .7) 0 0 #e3d9c6, var(--d) 0 0 #d6cab3,
    calc(var(--d) * 1.1) 18px 40px -10px rgba(var(--sh),.45); }
.book__spine { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0)); z-index: 2; border-radius: 3px 0 0 3px; pointer-events: none; }
.book__pages, .book__back { display: none; }
.book--flat .book__inner, .book--flat:hover .book__inner { transform: none; }
.book--sm { --w: 150px; }
.book--lg { --w: 300px; }

/* Cover templates — fully vector; text set from JS */
.cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 8% 9%; text-align: center; font-family: var(--font-display); color: var(--parchment); overflow: hidden; }
.cover__kicker { font-family: var(--font-text); font-size: calc(var(--w) * .038); letter-spacing: .22em; text-transform: uppercase; opacity: .85; }
.cover__title { font-size: calc(var(--w) * .11); line-height: 1.05; font-weight: 500; font-variation-settings: "opsz" 144; text-wrap: balance; }
.cover__name { font-family: var(--font-text); font-size: calc(var(--w) * .042); letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.cover__name b { font-family: var(--font-display); font-style: italic; text-transform: none; letter-spacing: 0; font-size: calc(var(--w) * .07); font-weight: 500; display: block; margin-top: 2px; }
.cover__art { position: absolute; inset: 0; pointer-events: none; }
.cover__art svg { width: 100%; height: 100%; }
.cover__portrait { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; }
.cover__portrait + .cover__kicker, .cover--photo .cover__title, .cover--photo .cover__name { text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.cover--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 30%, transparent 55%, rgba(0,0,0,.65)); }
.cover--photo > :not(.cover__portrait) { position: relative; z-index: 1; }
.cover--photo .cover__portrait { position: absolute; z-index: 0; }
.cover--blush { background: radial-gradient(120% 80% at 50% 100%, #F4D9D2 0%, #F6EFE4 60%); color: var(--ink); }
.cover--blush .cover__kicker, .cover--blush .cover__name { color: var(--ember); opacity: 1; }
.cover--midnight { background: radial-gradient(110% 70% at 50% 0%, #27365A 0%, #10203A 60%); }
.cover--midnight .cover__title { color: #F3E5BD; }
.cover--thorn { background: radial-gradient(100% 70% at 50% 100%, #2A3D32 0%, #15221B 70%); }
.cover--thorn .cover__title { color: #E9D8A6; }
.cover--ember { background: radial-gradient(120% 90% at 50% 10%, #C4475A 0%, #8C2A37 70%); }
.cover--ember .cover__title { color: #FBECD2; }
.book__front .cover { border-radius: inherit; }

/* --- Hero --- */
.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 100px); }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 65%); pointer-events: none; }
.hero__copy { position: relative; z-index: 1; }
.hero h1 { margin-top: 10px; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--ember); }
.hero .lede { margin-top: 20px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; font-size: 13.5px; color: var(--ink-60); }
.hero__trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero__trust svg { width: 16px; height: 16px; color: var(--gold-dark); }
.hero__visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 440px; }
.hero__visual .book { --w: clamp(220px, 24vw, 300px); }
.name-try { position: relative; z-index: 2; margin-top: 22px; display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--ink-12); border-radius: 999px; padding: 6px 6px 6px 18px; max-width: 420px; box-shadow: var(--shadow-1); }
.name-try label { font-size: 13px; color: var(--ink-60); white-space: nowrap; }
.name-try input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--font-display); font-size: 18px; font-style: italic; color: var(--ink); outline: none; }
.name-try .btn { padding: 11px 16px; font-size: 13.5px; }
.hero__sticker { position: absolute; z-index: 2; right: 6%; top: 8%; background: var(--paper); border: 1px solid var(--ink-12); border-radius: 12px; padding: 12px 14px; font-size: 13px; box-shadow: var(--shadow-1); max-width: 210px; transform: rotate(4deg); }
.hero__sticker b { font-family: var(--font-display); font-weight: 500; font-size: 16px; display: block; }
@media (max-width: 900px) { .hero__visual { min-height: 380px; order: -1; } .hero__sticker { display: none; } }

/* --- Steps --- */
.steps { counter-reset: step; }
.step { position: relative; padding: 28px 26px 30px; background: var(--paper); border: 1px solid var(--ink-06); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--gold); font-variation-settings: "opsz" 144; }
.step h3 { margin-top: 14px; }
.step p { margin-top: 10px; color: var(--ink-80); font-size: 15px; }
.step .time { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60); }

/* --- Genres --- */
.genre { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 24px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--ink-06); box-shadow: var(--shadow-1); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.genre:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.genre .book { margin: 10px auto 6px; --w: 120px; filter: drop-shadow(0 14px 18px rgba(var(--sh),.3)); }
.genre .tropes { display: flex; flex-wrap: wrap; gap: 6px; }
.genre .tropes span { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--parchment-2); color: var(--ink-80); }
.genre .soon { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ember); background: var(--blush-soft); padding: 5px 9px; border-radius: 999px; }

/* --- Spice scale --- */
.spice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.spice div { padding: 18px; border-radius: var(--radius-sm); background: rgba(var(--fg),.06); border: 1px solid rgba(var(--fg),.12); }
.spice b { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.spice small { display: block; margin-top: 6px; color: rgba(var(--fg),.7); }
@media (max-width: 640px) { .spice { grid-template-columns: 1fr; } }

/* --- Reviews --- */
.review { padding: 26px; background: var(--paper); border-radius: var(--radius); border: 1px solid var(--ink-06); box-shadow: var(--shadow-1); }
.review .stars { color: var(--gold); letter-spacing: 2px; font-size: 14px; }
.review p { margin-top: 12px; font-family: var(--font-display); font-size: 19px; line-height: 1.35; font-variation-settings: "opsz" 48; }
.review footer { margin-top: 16px; font-size: 13.5px; color: var(--ink-60); }

/* --- FAQ --- */
.faq details { border-bottom: 1px solid var(--ink-12); padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; color: var(--gold-dark); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 0 20px; color: var(--ink-80); max-width: 64ch; }

/* --- Product page --- */
.product { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .product { grid-template-columns: 1fr; } }
.product__stage { position: sticky; top: 92px; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 40px 20px; border-radius: var(--radius); background: radial-gradient(110% 90% at 50% 0%, var(--glow), var(--parchment) 70%); }
@media (max-width: 900px) { .product__stage { position: static; } }
.product__stage .book { --w: clamp(220px, 26vw, 300px); }
.cover-picker { display: flex; gap: 10px; }
.cover-picker button { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; transition: transform .2s var(--ease); }
.cover-picker button[aria-pressed="true"] { border-color: var(--ink); transform: scale(1.1); }
.cover-picker .sw--blush { background: linear-gradient(135deg, #F4D9D2, #E8B4A8); }
.cover-picker .sw--midnight { background: linear-gradient(135deg, #27365A, #10203A); }
.cover-picker .sw--thorn { background: linear-gradient(135deg, #2A3D32, #15221B); }
.cover-picker .sw--ember { background: linear-gradient(135deg, #C4475A, #8C2A37); }
.product__info .price { font-family: var(--font-display); font-size: 28px; margin-top: 14px; }
.product__info .price small { font-family: var(--font-text); font-size: 14px; color: var(--ink-60); margin-left: 8px; }
.formats { display: grid; gap: 10px; margin-top: 22px; }
.format { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--radius-sm); border: 1.5px solid var(--ink-12); background: var(--paper); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.format:hover { border-color: var(--ink-30); }
.format[data-selected="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(201,162,74,.25); }
.format .radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink-30); display: grid; place-items: center; }
.format[data-selected="true"] .radio { border-color: var(--ink); }
.format[data-selected="true"] .radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.format b { display: block; font-weight: 600; }
.format small { color: var(--ink-60); font-size: 13px; }
.format .fprice { font-family: var(--font-display); font-size: 19px; }
.format .tag { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dark); margin-left: 8px; }
.addon { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--parchment-2); font-size: 14px; }
.addon input { margin-top: 3px; accent-color: var(--ink); }
.addon b { font-weight: 600; }
.product__info .btn { margin-top: 22px; }
.guarantees { margin-top: 22px; display: grid; gap: 10px; font-size: 14px; color: var(--ink-80); }
.guarantees div { display: flex; gap: 10px; align-items: flex-start; }
.guarantees svg { flex: none; width: 18px; height: 18px; color: var(--gold-dark); margin-top: 2px; }
.whats-inside { margin-top: 36px; display: grid; gap: 12px; }
.whats-inside li { display: flex; gap: 12px; padding: 14px 16px; background: var(--paper); border-radius: var(--radius-sm); border: 1px solid var(--ink-06); list-style: none; }
.whats-inside li::before { content: "✦"; color: var(--gold); }
.product__long { margin-top: clamp(48px, 7vw, 90px); }

/* --- Builder --- */
.builder-page { background: var(--parchment); min-height: calc(100vh - 72px); }
.builder { width: min(860px, calc(100% - var(--page-margin) * 2)); margin-inline: auto; padding: 28px 0 80px; }
.builder__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; font-size: 13px; color: var(--ink-60); }
.progress { height: 4px; background: var(--ink-12); border-radius: 2px; overflow: hidden; margin-bottom: 36px; }
.progress i { display: block; height: 100%; width: 0; background: var(--gold-grad); transition: width .5s var(--ease); }
.screen { animation: fm-in .45s var(--ease) both; }
@keyframes fm-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.screen h2 { font-size: clamp(28px, 4vw, 42px); }
.screen h2 em { font-style: italic; color: var(--ember); font-weight: 400; }
.screen .help { margin-top: 10px; color: var(--ink-60); max-width: 56ch; }
.screen .fields { margin-top: 28px; display: grid; gap: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; margin-bottom: 8px; color: var(--ink-80); }
.field label span { font-weight: 400; color: var(--ink-60); }
.field input[type="text"], .field input[type="email"], .field textarea, .field select {
  width: 100%; padding: 15px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--ink-12); background: var(--paper); color: var(--ink); font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(201,162,74,.22); }
.field input.is-invalid { border-color: var(--ember); }
.field textarea { min-height: 110px; resize: vertical; }
.field .hint { font-size: 12.5px; color: var(--ink-60); margin-top: 6px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .row-2 { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 11px 16px; border-radius: 999px; border: 1.5px solid var(--ink-12); background: var(--paper); font-size: 14.5px; transition: all .2s var(--ease); }
.chip:hover { border-color: var(--ink-30); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.card-opt { text-align: left; padding: 18px; border-radius: var(--radius); border: 1.5px solid var(--ink-12); background: var(--paper); transition: all .2s var(--ease); display: grid; gap: 6px; }
.card-opt:hover { border-color: var(--ink-30); transform: translateY(-2px); }
.card-opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(201,162,74,.25); }
.card-opt .ic { font-size: 24px; }
.card-opt b { font-family: var(--font-display); font-size: 18px; font-weight: 500; }
.card-opt small { color: var(--ink-60); font-size: 13px; line-height: 1.4; }
.card-opt .lvl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); }
.card-opt.is-fire[aria-pressed="true"] { border-color: var(--ember); box-shadow: 0 0 0 3px rgba(178,58,72,.2); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.check input { margin-top: 3px; accent-color: var(--ink); }
.builder__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 36px; }
.builder__nav .back { color: var(--ink-60); font-size: 14px; padding: 10px 0; }
.builder__nav .back:hover { color: var(--ink); }
.error-msg { margin-top: 14px; color: var(--ember); font-size: 14px; }
details.extra { border: 1.5px solid var(--ink-12); border-radius: var(--radius-sm); background: var(--paper); padding: 0 16px; }
details.extra summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
details.extra summary::after { content: "+"; color: var(--gold-dark); }
details.extra[open] summary::after { content: "–"; }
details.extra .inner { padding: 0 0 16px; }
.upload { border: 1.5px dashed var(--ink-30); border-radius: var(--radius); padding: 28px; text-align: center; background: var(--paper); cursor: pointer; }
.upload input { display: none; }
.upload img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; margin: 0 auto 12px; }
.titles { display: grid; gap: 12px; }
.title-opt { text-align: left; padding: 20px 22px; border-radius: var(--radius); border: 1.5px solid var(--ink-12); background: var(--paper); transition: all .2s var(--ease); }
.title-opt:hover { border-color: var(--ink-30); }
.title-opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(201,162,74,.25); }
.title-opt b { font-family: var(--font-display); font-size: 24px; font-weight: 500; display: block; }
.title-opt span { color: var(--ink-60); font-style: italic; font-family: var(--font-display); font-size: 16px; }
.covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.cover-opt { padding: 14px 10px 12px; border-radius: var(--radius); border: 1.5px solid var(--ink-12); background: var(--paper); display: grid; justify-items: center; gap: 10px; transition: all .2s var(--ease); }
.cover-opt .book { --w: 120px; filter: drop-shadow(0 12px 16px rgba(var(--sh),.3)); }
.cover-opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(201,162,74,.25); }
.cover-opt small { font-size: 12.5px; color: var(--ink-80); }
.preview { display: grid; gap: 22px; }
.preview__book { display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: start; padding: 22px; background: var(--paper); border-radius: var(--radius); border: 1px solid var(--ink-06); }
@media (max-width: 600px) { .preview__book { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.preview__book .book { --w: 150px; }
.preview__book h3 { font-size: 26px; }
.preview__book .tagline { font-style: italic; color: var(--ink-60); font-family: var(--font-display); }
.preview__book .blurb { margin-top: 12px; font-size: 15px; color: var(--ink-80); }
.praise { margin-top: 12px; display: grid; gap: 8px; font-size: 13.5px; font-style: italic; color: var(--ink-60); }
.praise b { font-style: normal; font-weight: 700; color: var(--ink-80); font-size: 12.5px; }
.toc { padding: 22px; background: var(--paper); border-radius: var(--radius); border: 1px solid var(--ink-06); }
.toc h4 { font-family: var(--font-display); font-size: 20px; font-weight: 500; margin-bottom: 12px; }
.toc ol { margin: 0; padding-left: 22px; display: grid; gap: 7px; font-size: 14.5px; }
.toc li b { font-weight: 600; }
.toc li span { color: var(--ink-60); }
.chapter { padding: 34px clamp(20px, 5vw, 48px); background: var(--paper); border-radius: var(--radius); border: 1px solid var(--ink-06); box-shadow: var(--shadow-1); font-family: var(--font-display); font-size: 17.5px; line-height: 1.65; max-height: 560px; overflow: auto; position: relative; }
.chapter h4 { text-align: center; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; font-family: var(--font-text); color: var(--ink-60); font-weight: 600; }
.chapter h3 { text-align: center; margin: 8px 0 26px; font-size: 28px; }
.chapter p { margin: 0 0 1em; text-indent: 1.5em; }
.chapter p:first-of-type { text-indent: 0; }
.chapter .fade { position: sticky; bottom: -34px; height: 90px; margin: -60px -48px -34px; background: linear-gradient(transparent, var(--paper) 70%); pointer-events: none; }
.chapter .locked { text-align: center; font-family: var(--font-text); font-size: 14px; color: var(--ink-60); padding: 20px 0 0; }
.loading { display: grid; justify-items: center; gap: 16px; padding: 50px 20px; text-align: center; }
.loading .quill { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--ink-12); border-top-color: var(--gold); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading p { font-family: var(--font-display); font-size: 20px; }
.loading small { color: var(--ink-60); }
.summary-line { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ink-12); font-size: 14.5px; }
.summary-line b { font-weight: 600; }
.builder .book-mini { position: fixed; right: 24px; bottom: 24px; z-index: 20; display: none; }
@media (min-width: 1100px) { .builder .book-mini { display: block; } }

/* --- Cart --- */
.cart-table { display: grid; gap: 14px; }
.cart-item { display: grid; grid-template-columns: 90px 1fr auto; gap: 18px; align-items: center; padding: 18px; background: var(--paper); border-radius: var(--radius); border: 1px solid var(--ink-06); }
@media (max-width: 600px) { .cart-item { grid-template-columns: 70px 1fr; } .cart-item .price { grid-column: 2; } }
.cart-item .book { --w: 80px; filter: drop-shadow(0 8px 10px rgba(var(--sh),.3)); }
.cart-item h3 { font-size: 20px; }
.cart-item .props { margin-top: 6px; font-size: 13px; color: var(--ink-60); display: grid; gap: 2px; }
.cart-item .remove { margin-top: 8px; font-size: 13px; color: var(--ember); }
.cart-item .price { font-family: var(--font-display); font-size: 20px; }
.cart-summary { margin-top: 24px; padding: 22px; background: var(--paper); border-radius: var(--radius); border: 1px solid var(--ink-06); }
.cart-summary .total { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 24px; }
.cart-upsell { margin-top: 18px; padding: 18px 20px; border-radius: var(--radius); background: var(--ink); color: var(--parchment); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cart-upsell b { font-family: var(--font-display); font-weight: 500; font-size: 19px; display: block; }
.cart-upsell small { color: rgba(var(--fg),.7); }
.empty { text-align: center; padding: 60px 20px; }

/* --- Generic page / rich text --- */
.rte { max-width: 68ch; }
.rte h2 { margin-top: 36px; font-size: 28px; }
.rte p { margin: 14px 0; color: var(--ink-80); }
.rte ul { padding-left: 22px; color: var(--ink-80); }

/* --- Sticky mobile CTA --- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--page-margin) calc(10px + env(safe-area-inset-bottom)); background: rgba(var(--fg),.92); backdrop-filter: blur(12px); border-top: 1px solid var(--ink-12); display: none; }
@media (max-width: 820px) { .sticky-cta { display: block; } body.has-sticky { padding-bottom: 76px; } }

/* --- Utilities --- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .book__inner { transition: none; } }

/* --- Mobile polish --- */
@media (max-width: 900px) {
  .section { padding-block: 52px; }
  .hero { padding-block: 28px 44px; }
  .hero__visual { min-height: 0; margin-bottom: 8px; }
  .hero__visual .book { --w: 200px; }
  .hero h1 { font-size: clamp(34px, 10vw, 46px); }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__trust { gap: 10px 16px; }
  .name-try { max-width: none; }
  .name-try label { display: none; }
  .btn--lg { padding: 17px 26px; font-size: 16px; }
  .grid-3, .steps { gap: 14px; }
  .step { padding: 22px 20px 24px; }
  .genre .book { --w: 110px; }
  .product__stage { padding: 28px 16px 22px; }
  .product__stage .book { --w: 190px; }
  .builder { padding-top: 18px; }
  .builder__top { font-size: 12px; }
  .progress { margin-bottom: 24px; }
  .screen h2 { font-size: clamp(27px, 8vw, 34px); }
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card-opt { padding: 14px; }
  .card-opt b { font-size: 16px; }
  .covers { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cover-opt .book { --w: 110px; }
  .chapter { padding: 26px 18px; font-size: 16.5px; max-height: 480px; }
  .chapter .fade { margin-left: -18px; margin-right: -18px; }
  .builder__nav { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--parchment) 30%); padding: 14px 0 calc(12px + env(safe-area-inset-bottom)); margin-top: 24px; z-index: 5; }
  .builder__nav .btn { padding: 16px 22px; }
  .format { grid-template-columns: auto 1fr; }
  .format .fprice { grid-column: 2; }
  .cart-item { padding: 14px; }
  .announcement { font-size: 12px; padding: 8px 12px; }
}
@media (max-width: 420px) { .cards { grid-template-columns: 1fr; } .card-opt { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; } .card-opt .ic { grid-row: 1 / 3; } }

/* ============================================================
   Art directions — switch with data-palette on <html>
   ============================================================ */
/* 1. Noir Néon — late-night BookTok: near-black, ivory type, hot-pink + lilac */
:root[data-palette="noir"] {
  --ink: #F6F1E8; --parchment: #0D0C15; --parchment-2: #1A1827; --paper: #15131F;
  --sh: 0,0,0; --fg: 13,12,21; --glow: rgba(255,79,139,.28);
  --gold: #FF4F8B; --gold-light: #FF8FB3; --gold-dark: #FF6E9E; --gold-grad: linear-gradient(135deg, #FF9BBE 0%, #FF4F8B 55%, #C9B8FF 100%);
  --blush: #C9B8FF; --blush-soft: #2A1D3A; --ember: #FF4F8B; --ember-dark: #D93672;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.7);
  --shadow-2: 0 2px 6px rgba(0,0,0,.5), 0 30px 60px -30px rgba(0,0,0,.9);
}
:root[data-palette="noir"] .section--ink { background: #F6F1E8; color: #0D0C15; }
:root[data-palette="noir"] .section--ink .eyebrow { color: #D93672; }
:root[data-palette="noir"] .section--ink .lede { color: rgba(13,12,21,.75); }
:root[data-palette="noir"] .spice div { background: rgba(13,12,21,.05); border-color: rgba(13,12,21,.14); }
:root[data-palette="noir"] .spice small { color: rgba(13,12,21,.7); }
:root[data-palette="noir"] .footer { background: #07070C; }
:root[data-palette="noir"] .cart-upsell { background: var(--gold-grad); color: #0D0C15; }
:root[data-palette="noir"] .cart-upsell small { color: rgba(13,12,21,.7); }
:root[data-palette="noir"] .hero h1 em { color: #FF8FB3; }
:root[data-palette="noir"] .screen h2 em { color: #FF8FB3; }
:root[data-palette="noir"] .hero__sticker { background: #1A1827; }
:root[data-palette="noir"] .cover--blush { color: #1B1A2E; }
:root[data-palette="noir"] ::selection { background: #FF4F8B; color: #fff; }

/* 2. Émeraude — dark academia: bottle green, cream type, brass + ember */
:root[data-palette="emerald"] {
  --ink: #F1E9D8; --parchment: #0F2A22; --parchment-2: #163A2F; --paper: #13332A;
  --sh: 0,0,0; --fg: 15,42,34; --glow: rgba(216,178,92,.22);
  --gold: #D8B25C; --gold-light: #EBCB7F; --gold-dark: #E0BC68; --gold-grad: linear-gradient(135deg, #EBCB7F 0%, #D8B25C 55%, #B98D3A 100%);
  --blush: #E2573F; --blush-soft: #2A2416; --ember: #E2573F; --ember-dark: #B8402C;
  --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 30px 60px -30px rgba(0,0,0,.85);
}
:root[data-palette="emerald"] .section--ink { background: #F1E9D8; color: #0F2A22; }
:root[data-palette="emerald"] .section--ink .eyebrow { color: #B8402C; }
:root[data-palette="emerald"] .section--ink .lede { color: rgba(15,42,34,.75); }
:root[data-palette="emerald"] .spice div { background: rgba(15,42,34,.05); border-color: rgba(15,42,34,.14); }
:root[data-palette="emerald"] .spice small { color: rgba(15,42,34,.7); }
:root[data-palette="emerald"] .footer { background: #081A14; }
:root[data-palette="emerald"] .hero h1 em, :root[data-palette="emerald"] .screen h2 em { color: #EBCB7F; }
:root[data-palette="emerald"] .hero__sticker { background: #163A2F; }
:root[data-palette="emerald"] .cover--blush { color: #1B1A2E; }

/* 3. Rouge Éditions — ivory, charcoal type, lipstick red hairlines: editorial & punchy */
:root[data-palette="rouge"] {
  --ink: #1C1A18; --parchment: #FBF6EE; --parchment-2: #F3EBDF; --paper: #FFFDF9;
  --sh: 28,26,24; --fg: 251,246,238; --glow: rgba(200,16,46,.14);
  --gold: #C8102E; --gold-light: #E35A6E; --gold-dark: #A50D26; --gold-grad: linear-gradient(135deg, #E35A6E 0%, #C8102E 60%, #8E0B20 100%);
  --blush: #F2C7CE; --blush-soft: #F9DEE2; --ember: #C8102E; --ember-dark: #8E0B20;
}
:root[data-palette="rouge"] .btn--gold { color: #fff; }
:root[data-palette="rouge"] .section--ink { background: #C8102E; color: #FBF6EE; }
:root[data-palette="rouge"] .section--ink .eyebrow { color: #FBF6EE; opacity: .8; }
:root[data-palette="rouge"] .spice div { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
:root[data-palette="rouge"] .footer { background: #1C1A18; }
:root[data-palette="rouge"] .rule { background: linear-gradient(90deg, transparent, #C8102E 20%, #C8102E 80%, transparent); }
:root[data-palette="rouge"] .step::before { color: #C8102E; }
:root[data-palette="rouge"] .cover-picker button[aria-pressed="true"] { border-color: #C8102E; }
:root[data-palette="rouge"] .review .stars { color: #C8102E; }


/* Palette switcher (preview only) */
.palette-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(20,20,28,.85); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.palette-bar button { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; color: #fff; font-size: 12.5px; font-weight: 600; }
.palette-bar button i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.palette-bar button[aria-pressed="true"] { background: rgba(255,255,255,.18); }
@media (max-width: 820px) { .palette-bar { bottom: 86px; } .palette-bar button span { display: none; } .palette-bar button { padding: 8px; } }

/* 4. Plucky cosy — cream, charcoal, romance pink CTA, butter-yellow strip; soft rounded serif + Nunito */
:root[data-palette="plucky"] {
  --font-display: 'Fraunces', Georgia, serif; --font-text: 'Nunito', 'Inter', system-ui, sans-serif;
  --ink: #2B2724; --parchment: #F8F5EA; --parchment-2: #EFEAD9; --paper: #FFFFFF;
  --sh: 43,39,36; --fg: 248,245,234; --glow: rgba(242,92,162,.16);
  --gold: #F25CA2; --gold-light: #FF8CC0; --gold-dark: #D8468A; --gold-grad: linear-gradient(135deg, #FF8CC0 0%, #F25CA2 60%, #D8468A 100%);
  --blush: #FFD9EA; --blush-soft: #FFE9F2; --ember: #E8458B; --ember-dark: #C4306F;
  --radius: 18px; --radius-sm: 12px;
}
:root[data-palette="plucky"] .display, :root[data-palette="plucky"] h1, :root[data-palette="plucky"] h2, :root[data-palette="plucky"] h3, :root[data-palette="plucky"] .cover__title, :root[data-palette="plucky"] .title-opt b, :root[data-palette="plucky"] .preview__book h3 { font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-weight: 600; }
:root[data-palette="plucky"] .announcement { background: #FBEE7A; color: #2B2724; font-weight: 600; }
:root[data-palette="plucky"] .announcement b { color: #D8468A; }
:root[data-palette="plucky"] .btn--primary { background: #F25CA2; color: #fff; box-shadow: 0 10px 30px -14px rgba(242,92,162,.9); }
:root[data-palette="plucky"] .btn--gold { background: #2B2724; color: #fff; }
:root[data-palette="plucky"] .eyebrow { color: #D8468A; }
:root[data-palette="plucky"] .section--ink { background: #2B2724; color: #F8F5EA; }
:root[data-palette="plucky"] .section--ink .eyebrow { color: #FBEE7A; }
:root[data-palette="plucky"] .step::before { color: #F25CA2; }
:root[data-palette="plucky"] .review .stars { color: #F25CA2; }
:root[data-palette="plucky"] .footer { background: #2B2724; }
:root[data-palette="plucky"] .cart-upsell { background: #FBEE7A; color: #2B2724; }
:root[data-palette="plucky"] .cart-upsell small { color: rgba(43,39,36,.7); }
:root[data-palette="plucky"] .chip[aria-pressed="true"] { background: #F25CA2; border-color: #F25CA2; color: #fff; }
:root[data-palette="plucky"] .card-opt[aria-pressed="true"], :root[data-palette="plucky"] .title-opt[aria-pressed="true"], :root[data-palette="plucky"] .cover-opt[aria-pressed="true"], :root[data-palette="plucky"] .format[data-selected="true"] { border-color: #F25CA2; box-shadow: 0 0 0 3px rgba(242,92,162,.25); }
:root[data-palette="plucky"] .format[data-selected="true"] .radio { border-color: #F25CA2; } :root[data-palette="plucky"] .format[data-selected="true"] .radio::after { background: #F25CA2; }
:root[data-palette="plucky"] .progress i { background: #F25CA2; }

/* 5. Honey — cream, warm charcoal, terracotta + butter; chunky cosy serif (Young Serif) + Nunito */
:root[data-palette="honey"] {
  --font-display: 'Young Serif', 'Fraunces', Georgia, serif; --font-text: 'Nunito', 'Inter', system-ui, sans-serif;
  --ink: #2F2A26; --parchment: #FBF4E6; --parchment-2: #F2E7D2; --paper: #FFFDF8;
  --sh: 47,42,38; --fg: 251,244,230; --glow: rgba(226,112,75,.16);
  --gold: #E2704B; --gold-light: #F2A07F; --gold-dark: #C85A38; --gold-grad: linear-gradient(135deg, #F2A07F 0%, #E2704B 60%, #C85A38 100%);
  --blush: #F5D67A; --blush-soft: #FBEBC2; --ember: #D9553A; --ember-dark: #B4432C;
  --radius: 18px; --radius-sm: 12px;
}
:root[data-palette="honey"] .display, :root[data-palette="honey"] h1, :root[data-palette="honey"] h2, :root[data-palette="honey"] h3 { font-weight: 400; letter-spacing: 0; }
:root[data-palette="honey"] h1 { font-size: clamp(34px, 5vw, 60px); }
:root[data-palette="honey"] .announcement { background: #F5D67A; color: #2F2A26; font-weight: 600; }
:root[data-palette="honey"] .announcement b { color: #C85A38; }
:root[data-palette="honey"] .btn--primary { background: #E2704B; color: #fff; box-shadow: 0 10px 30px -14px rgba(226,112,75,.9); }
:root[data-palette="honey"] .btn--gold { background: #2F2A26; color: #fff; }
:root[data-palette="honey"] .section--ink { background: #2F2A26; color: #FBF4E6; }
:root[data-palette="honey"] .section--ink .eyebrow { color: #F5D67A; }
:root[data-palette="honey"] .footer { background: #2F2A26; }
:root[data-palette="honey"] .cart-upsell { background: #F5D67A; color: #2F2A26; }
:root[data-palette="honey"] .cart-upsell small { color: rgba(47,42,38,.7); }
:root[data-palette="honey"] .chip[aria-pressed="true"] { background: #E2704B; border-color: #E2704B; color: #fff; }
:root[data-palette="honey"] .progress i { background: #E2704B; }

/* Palette switcher (preview only) */
.palette-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 60; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(20,20,28,.85); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.palette-bar button { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; color: #fff; font-size: 12.5px; font-weight: 600; }
.palette-bar button i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.palette-bar button[aria-pressed="true"] { background: rgba(255,255,255,.18); }
@media (max-width: 820px) { .palette-bar { bottom: 86px; } .palette-bar button span { display: none; } .palette-bar button { padding: 8px; } }

/* 4. Plucky cosy — cream, charcoal, romance pink CTA, butter-yellow strip; soft rounded serif + Nunito */
:root[data-palette="plucky"] {
  --font-display: 'Fraunces', Georgia, serif; --font-text: 'Nunito', 'Inter', system-ui, sans-serif;
  --ink: #2B2724; --parchment: #F8F5EA; --parchment-2: #EFEAD9; --paper: #FFFFFF;
  --sh: 43,39,36; --fg: 248,245,234; --glow: rgba(242,92,162,.16);
  --gold: #F25CA2; --gold-light: #FF8CC0; --gold-dark: #D8468A; --gold-grad: linear-gradient(135deg, #FF8CC0 0%, #F25CA2 60%, #D8468A 100%);
  --blush: #FFD9EA; --blush-soft: #FFE9F2; --ember: #E8458B; --ember-dark: #C4306F;
  --radius: 18px; --radius-sm: 12px;
}
:root[data-palette="plucky"] .display, :root[data-palette="plucky"] h1, :root[data-palette="plucky"] h2, :root[data-palette="plucky"] h3, :root[data-palette="plucky"] .cover__title, :root[data-palette="plucky"] .title-opt b, :root[data-palette="plucky"] .preview__book h3 { font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-weight: 600; }
:root[data-palette="plucky"] .announcement { background: #FBEE7A; color: #2B2724; font-weight: 600; }
:root[data-palette="plucky"] .announcement b { color: #D8468A; }
:root[data-palette="plucky"] .btn--primary { background: #F25CA2; color: #fff; box-shadow: 0 10px 30px -14px rgba(242,92,162,.9); }
:root[data-palette="plucky"] .btn--gold { background: #2B2724; color: #fff; }
:root[data-palette="plucky"] .eyebrow { color: #D8468A; }
:root[data-palette="plucky"] .section--ink { background: #2B2724; color: #F8F5EA; }
:root[data-palette="plucky"] .section--ink .eyebrow { color: #FBEE7A; }
:root[data-palette="plucky"] .step::before { color: #F25CA2; }
:root[data-palette="plucky"] .review .stars { color: #F25CA2; }
:root[data-palette="plucky"] .footer { background: #2B2724; }
:root[data-palette="plucky"] .cart-upsell { background: #FBEE7A; color: #2B2724; }
:root[data-palette="plucky"] .cart-upsell small { color: rgba(43,39,36,.7); }
:root[data-palette="plucky"] .chip[aria-pressed="true"] { background: #F25CA2; border-color: #F25CA2; color: #fff; }
:root[data-palette="plucky"] .card-opt[aria-pressed="true"], :root[data-palette="plucky"] .title-opt[aria-pressed="true"], :root[data-palette="plucky"] .cover-opt[aria-pressed="true"], :root[data-palette="plucky"] .format[data-selected="true"] { border-color: #F25CA2; box-shadow: 0 0 0 3px rgba(242,92,162,.25); }
:root[data-palette="plucky"] .format[data-selected="true"] .radio { border-color: #F25CA2; } :root[data-palette="plucky"] .format[data-selected="true"] .radio::after { background: #F25CA2; }
:root[data-palette="plucky"] .progress i { background: #F25CA2; }

/* 5. Honey — cream, warm charcoal, terracotta + butter; chunky cosy serif (Young Serif) + Nunito */
:root[data-palette="honey"] {
  --font-display: 'Young Serif', 'Fraunces', Georgia, serif; --font-text: 'Nunito', 'Inter', system-ui, sans-serif;
  --ink: #2F2A26; --parchment: #FBF4E6; --parchment-2: #F2E7D2; --paper: #FFFDF8;
  --sh: 47,42,38; --fg: 251,244,230; --glow: rgba(226,112,75,.16);
  --gold: #E2704B; --gold-light: #F2A07F; --gold-dark: #C85A38; --gold-grad: linear-gradient(135deg, #F2A07F 0%, #E2704B 60%, #C85A38 100%);
  --blush: #F5D67A; --blush-soft: #FBEBC2; --ember: #D9553A; --ember-dark: #B4432C;
  --radius: 18px; --radius-sm: 12px;
}
:root[data-palette="honey"] .display, :root[data-palette="honey"] h1, :root[data-palette="honey"] h2, :root[data-palette="honey"] h3 { font-weight: 400; letter-spacing: 0; }
:root[data-palette="honey"] h1 { font-size: clamp(34px, 5vw, 60px); }
:root[data-palette="honey"] .announcement { background: #F5D67A; color: #2F2A26; font-weight: 600; }
:root[data-palette="honey"] .announcement b { color: #C85A38; }
:root[data-palette="honey"] .btn--primary { background: #E2704B; color: #fff; box-shadow: 0 10px 30px -14px rgba(226,112,75,.9); }
:root[data-palette="honey"] .btn--gold { background: #2F2A26; color: #fff; }
:root[data-palette="honey"] .section--ink { background: #2F2A26; color: #FBF4E6; }
:root[data-palette="honey"] .section--ink .eyebrow { color: #F5D67A; }
:root[data-palette="honey"] .footer { background: #2F2A26; }
:root[data-palette="honey"] .cart-upsell { background: #F5D67A; color: #2F2A26; }
:root[data-palette="honey"] .cart-upsell small { color: rgba(47,42,38,.7); }
:root[data-palette="honey"] .chip[aria-pressed="true"] { background: #E2704B; border-color: #E2704B; color: #fff; }
:root[data-palette="honey"] .progress i { background: #E2704B; }

/* Cover wall hero (Plucky-style): a wall of books behind a copy card — vector only, no images */
.hero__wall { display: none; }
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-content: center; position: absolute; inset: -60px -8%; z-index: 0; pointer-events: none;
  transform: rotate(-4deg); opacity: .95;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.3), rgba(0,0,0,.95) 45%, rgba(0,0,0,.95)); mask-image: linear-gradient(90deg, rgba(0,0,0,.3), rgba(0,0,0,.95) 45%, rgba(0,0,0,.95)); }
.hero__wall .book { --w: 150px; filter: none; }
.hero__wall .book__front { box-shadow: 0 10px 24px -10px rgba(var(--sh), .45); }
.hero__wall .book__inner { transform: none; }
.hero__wall .book:nth-child(odd) { transform: translateY(22px); }
@media (max-width: 900px) { .hero__wall .book { --w: 96px; } }
@media (max-width: 900px) {
}

/* ============================================================
   Plucky-style layout: floating header, cover-wall hero with card, world modal, sticky CTA, builder chrome
   ============================================================ */
/* Floating header (home) */
.fheader { position: absolute; inset: 0 0 auto; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 14px var(--page-margin); }
.fheader .logo { background: var(--paper); padding: 8px 14px 8px 10px; border-radius: 999px; box-shadow: var(--shadow-1); font-size: 22px; }
.fheader .logo svg { width: 28px; height: 28px; }
.fheader__actions { display: flex; gap: 8px; }
.fbtn { position: relative; width: 46px; height: 46px; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow-1); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.fbtn svg { width: 22px; height: 22px; }
.fbtn .count { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.fmenu { display: none; position: absolute; top: 70px; right: var(--page-margin); background: var(--paper); border-radius: 18px; box-shadow: var(--shadow-2); padding: 14px 6px; min-width: 240px; flex-direction: column; }
.fmenu a { padding: 12px 18px; border-radius: 12px; font-weight: 600; }
.fmenu a:hover { background: var(--parchment-2); }
.fheader[data-open="true"] .fmenu { display: flex; }

/* Hero: full-bleed cover wall + floating card */
.hero { position: relative; overflow: hidden; min-height: 92vh; display: flex; align-items: center; padding: 90px var(--page-margin) 48px; background: var(--parchment-2); }
.hero::before { display: none; }
.hero__wall { position: absolute; inset: -80px -10%; z-index: 0; display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-content: center; transform: rotate(-5deg); pointer-events: none; }
.hero__wall .book { --w: 150px; filter: none; }
.hero__wall .book__inner { transform: none; }
.hero__wall .book__front { box-shadow: 0 14px 30px -12px rgba(var(--sh), .5); }
.hero__wall .book:nth-child(odd) { transform: translateY(26px); }
.hero__card { position: relative; z-index: 1; width: min(560px, 100%); background: var(--paper); border-radius: 26px; padding: clamp(26px, 4vw, 44px); box-shadow: 0 40px 90px -30px rgba(var(--sh), .5), 0 0 0 1px var(--ink-06); margin-left: clamp(0px, 4vw, 60px); }
.hero__card h1 { font-size: clamp(32px, 4.6vw, 52px); margin-top: 8px; }
.hero__card h1 em { color: var(--gold); font-style: italic; font-weight: 500; }
.hero__card .lede { margin-top: 14px; font-size: 17px; }
.hero__usps { list-style: none; padding: 0; margin: 20px 0 22px; display: grid; gap: 9px; font-size: 14.5px; font-weight: 600; }
.hero__usps li { display: flex; gap: 10px; align-items: flex-start; }
.hero__usps svg { flex: none; width: 18px; height: 18px; color: var(--gold-dark); margin-top: 2px; }
.hero__fine { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--ink-60); }
@media (max-width: 900px) {
  .hero { min-height: 0; align-items: flex-start; padding: 240px 14px 28px; }
  .hero__wall { inset: -30px -10% auto; height: 420px; gap: 10px; align-content: flex-start; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
  .hero__wall .book { --w: 92px; }
  .hero__card { margin-left: 0; padding: 22px 18px 20px; border-radius: 22px; }
  .hero__card h1 { font-size: 30px; }
  .hero__card .lede { font-size: 15.5px; }
}

/* USP bar */
.usp-bar { background: var(--paper); border-block: 1px solid var(--ink-06); }
.usp-bar__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 18px 0; font-size: 14px; font-weight: 600; }
.usp-bar__inner div { display: flex; align-items: center; gap: 10px; justify-content: center; text-align: left; }
.usp-bar__inner svg { flex: none; width: 22px; height: 22px; color: var(--gold-dark); }
@media (max-width: 700px) { .usp-bar__inner { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; font-size: 13.5px; } .usp-bar__inner div { justify-content: flex-start; } }

/* Books / world options */
.books { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .books { grid-template-columns: 1fr; } }
.bookcard { display: grid; gap: 10px; padding: 20px 20px 22px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--ink-06); box-shadow: var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.bookcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.bookcard h3 { font-size: 22px; }
.bookcard p { color: var(--ink-80); font-size: 14.5px; }
.bookcard__cta { font-weight: 700; color: var(--gold-dark); }
.bookcard--soon { opacity: .85; }
.bookcard__stack, .world-opt__stack { position: relative; height: 170px; border-radius: 14px; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; padding-bottom: 0; }
.bookcard__stack--blush, .world-opt__stack--blush { background: linear-gradient(135deg, #FFD9EA, #F6C9D8); }
.bookcard__stack--thorn, .world-opt__stack--thorn { background: linear-gradient(135deg, #CFE3D4, #A9C7B3); }
.bookcard__stack--ember, .world-opt__stack--ember { background: linear-gradient(135deg, #FBEE7A, #F5D67A); }
.bookcard__stack .book, .world-opt__stack .book { --w: 96px; position: absolute; bottom: -18px; filter: drop-shadow(0 10px 14px rgba(var(--sh), .35)); }
.bookcard__stack .book:nth-child(1), .world-opt__stack .book:nth-child(1) { left: 14%; transform: rotate(-8deg); }
.bookcard__stack .book:nth-child(2), .world-opt__stack .book:nth-child(2) { left: 50%; margin-left: -48px; bottom: -8px; z-index: 2; }
.bookcard__stack .book:nth-child(3), .world-opt__stack .book:nth-child(3) { right: 14%; transform: rotate(8deg); }
.bookcard__stack .book__inner, .world-opt__stack .book__inner { transform: none; }
.soon-tag { display: inline-block; vertical-align: middle; font-family: var(--font-text); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ember-dark); background: var(--blush-soft); padding: 4px 8px; border-radius: 999px; margin-left: 6px; }
.heat { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; font-size: 14px; }
.heat__label { font-weight: 700; margin-right: 4px; }
.heat__pill { padding: 8px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--ink-12); font-weight: 600; }

/* World modal */
.world-modal { position: fixed; inset: 0; z-index: 100; background: rgba(var(--sh), .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.world-modal[hidden] { display: none; }
.world-modal__panel { position: relative; width: min(760px, 100%); max-height: 94vh; overflow: auto; background: var(--parchment); border-radius: 28px 28px 0 0; padding: 36px clamp(16px, 4vw, 40px) 40px; animation: fm-up .4s var(--ease); }
@media (min-width: 700px) { .world-modal { align-items: center; padding: 20px; } .world-modal__panel { border-radius: 28px; } }
@keyframes fm-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.world-modal__close { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--paper); font-size: 26px; line-height: 1; box-shadow: var(--shadow-1); }
.world-modal h2 em { color: var(--gold); font-style: italic; font-weight: 500; }
.world-list { display: grid; gap: 12px; margin-top: 22px; }
.world-opt { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; padding: 12px; border-radius: 18px; background: var(--paper); border: 1.5px solid var(--ink-06); transition: border-color .2s, transform .2s var(--ease); }
.world-opt:hover { border-color: var(--gold); transform: translateX(3px); }
.world-opt__stack { height: 120px; border-radius: 12px; }
.world-opt__stack .book { --w: 68px; bottom: -12px; }
.world-opt__stack .book:nth-child(2) { margin-left: -34px; bottom: -6px; }
.world-opt b { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.15; }
.world-opt small { display: block; margin-top: 4px; color: var(--ink-60); font-size: 13.5px; line-height: 1.4; }
.world-opt--soon { opacity: .6; pointer-events: none; }
@media (max-width: 480px) { .world-opt { grid-template-columns: 110px 1fr; gap: 12px; } .world-opt__stack { height: 100px; } .world-opt__stack .book { --w: 56px; } .world-opt__stack .book:nth-child(2) { margin-left: -28px; } .world-opt b { font-size: 17px; } }

/* Sticky CTA (all devices once the hero card is gone) */
.sticky-cta { display: block; }
.sticky-cta[hidden] { display: none; }
@media (min-width: 821px) { .sticky-cta { left: auto; right: 24px; bottom: 24px; width: 320px; padding: 0; background: transparent; border: 0; backdrop-filter: none; } .sticky-cta .btn { box-shadow: var(--shadow-2); padding: 18px 26px; font-size: 16px; } body.has-sticky { padding-bottom: 0; } }

/* Builder chrome */
.builder-page { background: var(--parchment); min-height: 100vh; }
.btop { position: sticky; top: 0; z-index: 40; background: rgba(var(--fg), .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ink-06); }
.btop__row { width: min(860px, calc(100% - var(--page-margin) * 2)); margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; height: 64px; }
.btop__logo .logo { font-size: 20px; } .btop__logo .logo svg { width: 26px; height: 26px; }
.btop__step { text-align: center; line-height: 1.2; }
.btop__step b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 16px; }
.btop__step span { font-size: 12px; color: var(--ink-60); font-weight: 600; letter-spacing: .04em; }
.btop__close { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; color: var(--ink-60); background: var(--parchment-2); }
.btop .progress { margin: 0; height: 3px; border-radius: 0; }
.builder { padding: 28px 0 130px; }
.builder__top { display: none; }
.bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(var(--fg), .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--ink-06); padding: 12px var(--page-margin) calc(12px + env(safe-area-inset-bottom)); }
.bnav__inner { width: min(860px, 100%); margin-inline: auto; display: flex; align-items: center; gap: 10px; }
.bnav__back { width: 52px; height: 52px; flex: none; border-radius: 999px; background: var(--parchment-2); font-size: 20px; }
.bnav__skip { padding: 0 14px; color: var(--ink-60); font-weight: 600; }
.bnav__next { flex: 1; justify-content: center; }
@media (min-width: 700px) { .bnav__next { flex: none; margin-left: auto; min-width: 220px; } .btop__step b { font-size: 18px; } }
@media (max-width: 480px) { .btop__logo .logo span { display: none; } .btop__step b { font-size: 15px; } }
.builder__nav { display: none; }
.builder .book-mini { display: none !important; }

/* Page-specific chrome */
.template-index .announcement { display: none; }
.template-page-create .announcement, .template-page-create .header, .template-page-create .footer { display: none; }
.footer__about { max-width: 640px; margin-bottom: 40px; }
.footer__about h2 { color: var(--parchment); font-size: clamp(26px, 3vw, 36px); margin: 8px 0 14px; }
:root[data-palette="plucky"] .footer__about h2, .footer__about h2 { color: #F8F5EA; }
.footer__about p { line-height: 1.6; }

/* ============================================================
   6. POP — default. Pop-art / sticker look: cream, charcoal outlines, hot-pink CTA only, yellow/lilac/mint/peach accents, rounded chunky type.
   ============================================================ */
:root, :root[data-palette="pop"] {
  --font-display: 'Baloo 2', 'Nunito', system-ui, sans-serif; --font-text: 'Nunito', system-ui, -apple-system, sans-serif;
  --ink: #2A2522; --parchment: #FAF6EA; --parchment-2: #F1EAD8; --paper: #FFFFFF;
  --sh: 42,37,34; --fg: 250,246,234; --glow: rgba(255,225,90,.5);
  --pink: #FF4F9A; --yellow: #FFE15A; --lilac: #CFC2FF; --mint: #BDEBD2; --peach: #FFD2B8; --sky: #BFE2FF;
  --gold: var(--yellow); --gold-light: #FFF0A3; --gold-dark: #2A2522; --gold-grad: linear-gradient(135deg, #FFF0A3, #FFE15A);
  --blush: var(--peach); --blush-soft: #FFE9DB; --ember: #E8458B; --ember-dark: #C4306F;
  --radius: 20px; --radius-sm: 14px;
  --shadow-1: 4px 4px 0 rgba(42,37,34,1); --shadow-2: 6px 6px 0 rgba(42,37,34,1);
}
:root[data-palette="pop"] body, :root:not([data-palette]) body { font-weight: 500; }
:root[data-palette="pop"] .display, :root[data-palette="pop"] h1, :root[data-palette="pop"] h2, :root[data-palette="pop"] h3,
:root:not([data-palette]) .display, :root:not([data-palette]) h1, :root:not([data-palette]) h2, :root:not([data-palette]) h3 { font-weight: 800; letter-spacing: -.01em; line-height: 1.05; font-variation-settings: normal; }
:root[data-palette="pop"] h1 em, :root[data-palette="pop"] h2 em, :root[data-palette="pop"] .hero h1 em, :root[data-palette="pop"] .screen h2 em,
:root:not([data-palette]) h1 em, :root:not([data-palette]) h2 em, :root:not([data-palette]) .hero h1 em, :root:not([data-palette]) .screen h2 em { font-style: normal; color: inherit; background: linear-gradient(transparent 55%, var(--yellow) 55%); padding: 0 .08em; border-radius: 4px; }
:root[data-palette="pop"] .eyebrow, :root:not([data-palette]) .eyebrow { color: var(--ink); display: inline-block; background: var(--yellow); padding: 4px 10px; border-radius: 999px; font-size: 11px; letter-spacing: .14em; }
:root[data-palette="pop"] .cover__title, :root:not([data-palette]) .cover__title { font-weight: 800; font-variation-settings: normal; }
:root[data-palette="pop"] .cover__name b, :root:not([data-palette]) .cover__name b { font-style: normal; font-weight: 700; }
/* Buttons: hot pink only for the primary action, sticker outline + hard shadow */
:root[data-palette="pop"] .btn, :root:not([data-palette]) .btn { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-weight: 800; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
:root[data-palette="pop"] .btn:hover, :root:not([data-palette]) .btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
:root[data-palette="pop"] .btn:active, :root:not([data-palette]) .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
:root[data-palette="pop"] .btn--primary, :root:not([data-palette]) .btn--primary { background: var(--pink); color: #fff; }
:root[data-palette="pop"] .btn--gold, :root:not([data-palette]) .btn--gold { background: var(--yellow); color: var(--ink); }
:root[data-palette="pop"] .btn--ghost, :root:not([data-palette]) .btn--ghost { background: var(--paper); color: var(--ink); }
:root[data-palette="pop"] .section--ink .btn--ghost, :root:not([data-palette]) .section--ink .btn--ghost { background: transparent; color: var(--parchment); border-color: var(--parchment); box-shadow: 3px 3px 0 var(--parchment); }
/* Sticker cards */
:root[data-palette="pop"] .hero__card, :root[data-palette="pop"] .bookcard, :root[data-palette="pop"] .review, :root[data-palette="pop"] .world-opt, :root[data-palette="pop"] .format, :root[data-palette="pop"] .card-opt, :root[data-palette="pop"] .title-opt, :root[data-palette="pop"] .cover-opt, :root[data-palette="pop"] .cart-item, :root[data-palette="pop"] .cart-summary, :root[data-palette="pop"] .preview__book, :root[data-palette="pop"] .toc, :root[data-palette="pop"] .chapter, :root[data-palette="pop"] .product__stage, :root[data-palette="pop"] .fheader .logo, :root[data-palette="pop"] .fbtn, :root[data-palette="pop"] .fmenu, :root[data-palette="pop"] .world-modal__close, :root[data-palette="pop"] .hero__sticker,
:root:not([data-palette]) .hero__card, :root:not([data-palette]) .bookcard, :root:not([data-palette]) .review, :root:not([data-palette]) .world-opt, :root:not([data-palette]) .format, :root:not([data-palette]) .card-opt, :root:not([data-palette]) .title-opt, :root:not([data-palette]) .cover-opt, :root:not([data-palette]) .cart-item, :root:not([data-palette]) .cart-summary, :root:not([data-palette]) .preview__book, :root:not([data-palette]) .toc, :root:not([data-palette]) .chapter, :root:not([data-palette]) .product__stage, :root:not([data-palette]) .fheader .logo, :root:not([data-palette]) .fbtn, :root:not([data-palette]) .fmenu, :root:not([data-palette]) .world-modal__close, :root:not([data-palette]) .hero__sticker { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
:root[data-palette="pop"] .bookcard:hover, :root:not([data-palette]) .bookcard:hover, :root[data-palette="pop"] .genre:hover, :root:not([data-palette]) .world-opt:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
:root[data-palette="pop"] .hero__card, :root:not([data-palette]) .hero__card { box-shadow: 8px 8px 0 var(--ink); }
/* Selected states: ink, not pink (pink is the action color) */
:root[data-palette="pop"] .chip, :root:not([data-palette]) .chip { border: 2px solid var(--ink); background: var(--paper); font-weight: 700; }
:root[data-palette="pop"] .chip[aria-pressed="true"], :root:not([data-palette]) .chip[aria-pressed="true"] { background: var(--yellow); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
:root[data-palette="pop"] .card-opt[aria-pressed="true"], :root[data-palette="pop"] .title-opt[aria-pressed="true"], :root[data-palette="pop"] .cover-opt[aria-pressed="true"], :root[data-palette="pop"] .format[data-selected="true"],
:root:not([data-palette]) .card-opt[aria-pressed="true"], :root:not([data-palette]) .title-opt[aria-pressed="true"], :root:not([data-palette]) .cover-opt[aria-pressed="true"], :root:not([data-palette]) .format[data-selected="true"] { background: #FFF6C7; border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
:root[data-palette="pop"] .card-opt.is-fire[aria-pressed="true"], :root:not([data-palette]) .card-opt.is-fire[aria-pressed="true"] { background: var(--peach); }
:root[data-palette="pop"] .format[data-selected="true"] .radio, :root:not([data-palette]) .format[data-selected="true"] .radio { border-color: var(--ink); } 
:root[data-palette="pop"] .format[data-selected="true"] .radio::after, :root:not([data-palette]) .format[data-selected="true"] .radio::after { background: var(--ink); }
:root[data-palette="pop"] .progress i, :root:not([data-palette]) .progress i { background: var(--pink); }
:root[data-palette="pop"] .progress, :root:not([data-palette]) .progress { background: var(--parchment-2); }
/* Accents */
:root[data-palette="pop"] .announcement, :root:not([data-palette]) .announcement { background: var(--yellow); color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--ink); }
:root[data-palette="pop"] .announcement b, :root:not([data-palette]) .announcement b { color: var(--ink); text-decoration: underline; }
:root[data-palette="pop"] .usp-bar, :root:not([data-palette]) .usp-bar { background: var(--lilac); border-block: 2px solid var(--ink); }
:root[data-palette="pop"] .usp-bar__inner svg, :root:not([data-palette]) .usp-bar__inner svg { color: var(--ink); }
:root[data-palette="pop"] .section--ink, :root:not([data-palette]) .section--ink { background: var(--ink); color: var(--parchment); }
:root[data-palette="pop"] .section--paper, :root:not([data-palette]) .section--paper { background: var(--mint); border-block: 2px solid var(--ink); }
:root[data-palette="pop"] .review .stars, :root:not([data-palette]) .review .stars { color: var(--ink); }
:root[data-palette="pop"] .bookcard__cta, :root:not([data-palette]) .bookcard__cta { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; text-underline-offset: 3px; }
:root[data-palette="pop"] .bookcard__stack--blush, :root[data-palette="pop"] .world-opt__stack--blush, :root:not([data-palette]) .bookcard__stack--blush, :root:not([data-palette]) .world-opt__stack--blush { background: var(--peach); border: 2px solid var(--ink); }
:root[data-palette="pop"] .bookcard__stack--thorn, :root[data-palette="pop"] .world-opt__stack--thorn, :root:not([data-palette]) .bookcard__stack--thorn, :root:not([data-palette]) .world-opt__stack--thorn { background: var(--mint); border: 2px solid var(--ink); }
:root[data-palette="pop"] .bookcard__stack--ember, :root[data-palette="pop"] .world-opt__stack--ember, :root:not([data-palette]) .bookcard__stack--ember, :root:not([data-palette]) .world-opt__stack--ember { background: var(--sky); border: 2px solid var(--ink); }
:root[data-palette="pop"] .soon-tag, :root:not([data-palette]) .soon-tag { background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); }
:root[data-palette="pop"] .heat__pill, :root:not([data-palette]) .heat__pill { border: 2px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
:root[data-palette="pop"] .footer, :root:not([data-palette]) .footer { background: var(--ink); }
:root[data-palette="pop"] .footer h4, :root:not([data-palette]) .footer h4 { color: var(--yellow); }
:root[data-palette="pop"] .footer .newsletter button, :root:not([data-palette]) .footer .newsletter button { background: var(--pink); color: #fff; }
:root[data-palette="pop"] .cart-upsell, :root:not([data-palette]) .cart-upsell { background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
:root[data-palette="pop"] .cart-upsell small, :root:not([data-palette]) .cart-upsell small { color: rgba(42,37,34,.7); }
:root[data-palette="pop"] .btop, :root:not([data-palette]) .btop { border-bottom: 2px solid var(--ink); }
:root[data-palette="pop"] .bnav, :root:not([data-palette]) .bnav { border-top: 2px solid var(--ink); }
:root[data-palette="pop"] .bnav__back, :root:not([data-palette]) .bnav__back { border: 2px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
:root[data-palette="pop"] .btop__close, :root:not([data-palette]) .btop__close { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }
:root[data-palette="pop"] .field input[type="text"], :root[data-palette="pop"] .field input[type="email"], :root[data-palette="pop"] .field textarea, :root[data-palette="pop"] .name-try, :root[data-palette="pop"] .upload,
:root:not([data-palette]) .field input[type="text"], :root:not([data-palette]) .field input[type="email"], :root:not([data-palette]) .field textarea, :root:not([data-palette]) .name-try, :root:not([data-palette]) .upload { border: 2px solid var(--ink); }
:root[data-palette="pop"] .field input:focus, :root:not([data-palette]) .field input:focus, :root[data-palette="pop"] .field textarea:focus, :root:not([data-palette]) .field textarea:focus { box-shadow: 3px 3px 0 var(--ink); border-color: var(--ink); }
:root[data-palette="pop"] .hero__usps svg, :root:not([data-palette]) .hero__usps svg { color: var(--ink); background: var(--mint); border-radius: 50%; padding: 2px; width: 20px; height: 20px; }
:root[data-palette="pop"] .hero, :root:not([data-palette]) .hero { background: var(--parchment); }
:root[data-palette="pop"] .hero__wall .book__front, :root:not([data-palette]) .hero__wall .book__front { box-shadow: 3px 3px 0 rgba(42,37,34,.9); }
:root[data-palette="pop"] .world-modal__panel, :root:not([data-palette]) .world-modal__panel { border: 2px solid var(--ink); }
:root[data-palette="pop"] .logo, :root:not([data-palette]) .logo { font-weight: 800; letter-spacing: -.02em; }
:root[data-palette="pop"] .logo svg, :root:not([data-palette]) .logo svg { width: 36px; height: 36px; }
:root[data-palette="pop"] .footer .logo, :root:not([data-palette]) .footer .logo { color: var(--parchment); }

/* Cover template typography (builder + cart previews) */
.cover--font-cinzel .cover__title { font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.cover--font-pirata .cover__title { font-family: 'Pirata One', serif; font-weight: 400; font-size: calc(var(--w) * .13); }
.cover--font-oswald .cover__title { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.cover--font-baloo .cover__title { font-family: 'Baloo 2', sans-serif; font-weight: 800; }
.cover--font-pacifico .cover__title { font-family: 'Pacifico', cursive; font-weight: 400; line-height: 1.2; }
.cover--font-caveat .cover__title { font-family: 'Caveat', cursive; font-weight: 700; font-size: calc(var(--w) * .14); }
.cover--photo { color: #fff; }
.cover--photo .cover__kicker, .cover--photo .cover__name { color: #fff; opacity: 1; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.cover--photo .cover__title { text-shadow: 0 2px 12px rgba(0,0,0,.75); }
.cover--medallion .cover__portrait { top: 28%; left: 16%; width: 68%; height: 46%; border-radius: 50% / 50%; border: 3px solid #D9B85C; object-fit: cover; box-shadow: 0 0 0 5px rgba(0,0,0,.25); }
.cover--medallion::after { background: none; }
.cover--medallion { color: #F3E6B5; }
.cover-opt small b { display: block; font-size: 13px; color: var(--ink); }

/* Moving cover wall: three drifting rows (GPU transform only, paused for reduced motion) */
.hero__wall { flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: 26px; inset: -200px -25%; transform: rotate(-5deg); overflow: hidden; }
.hero__row { display: flex; width: 100%; overflow: visible; }
.hero__track { display: flex; gap: 20px; flex: none; will-change: transform; animation: wall-drift 80s linear infinite; }
.hero__row--2 .hero__track { animation-direction: reverse; animation-duration: 95s; }
.hero__row--3 .hero__track { animation-duration: 110s; }
.hero__row--2 { transform: translateX(-60px); }
.hero__row--4 .hero__track { animation-direction: reverse; animation-duration: 90s; }
.hero__row--4 { transform: translateX(-30px); }
.hero__wall .book:nth-child(odd) { transform: none; }
.hero__track .book { flex: none; }
@keyframes wall-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (max-width: 900px) { .hero__wall { gap: 14px; inset: -80px -30%; } .hero__track { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .hero__track { animation: none; } }

/* Heat row: label + three equal pills (stacks cleanly on mobile) */
.heat { display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; align-items: center; font-size: 14px; margin-top: 28px; }
.heat__label { font-weight: 800; margin: 0; }
.heat__pills { display: flex; gap: 8px; }
.heat__pill { white-space: nowrap; text-align: center; }
.heat__pill small { font-size: 11px; font-weight: 700; opacity: .7; margin-left: 2px; }
@media (max-width: 600px) {
  .heat { flex-direction: column; gap: 10px; }
  .heat__pills { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .heat__pill { padding: 10px 6px; font-size: 13.5px; }
}

/* Floating CTA: a pill with no bar behind it, soft shadow, a gentle nudge every few seconds */
.sticky-cta { background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 16px calc(14px + env(safe-area-inset-bottom)); pointer-events: none; display: flex; justify-content: center; }
.sticky-cta[hidden] { display: none; }
.sticky-cta .btn { pointer-events: auto; width: min(100%, 420px); border: 0; border-radius: 999px; padding: 17px 24px; font-size: 16px; box-shadow: 0 14px 34px -8px rgba(var(--sh), .55), 0 2px 0 rgba(0,0,0,.08); animation: cta-nudge 7s ease-in-out infinite; }
:root[data-palette="pop"] .sticky-cta .btn, :root:not([data-palette]) .sticky-cta .btn { border: 0; box-shadow: 0 14px 34px -8px rgba(var(--sh), .55); transform: none; }
@keyframes cta-nudge { 0%, 82%, 100% { transform: translateY(0) scale(1); } 86% { transform: translateY(-7px) scale(1.02); } 90% { transform: translateY(0) scale(1); } 94% { transform: translateY(-3px) scale(1.01); } }
@media (min-width: 821px) { .sticky-cta { left: auto; right: 24px; bottom: 24px; width: 340px; padding: 0; } }
@media (prefers-reduced-motion: reduce) { .sticky-cta .btn { animation: none; } }
body.has-sticky { padding-bottom: 84px; }

/* Flip books on the wall: the front flips every ~25 s to reveal the same cover with another heroine */
.book--flip .book__front { overflow: visible; transform-style: preserve-3d; animation: book-flip 26s ease-in-out infinite; animation-delay: var(--fd, 0s); }
.book--flip .book__front .cover { border-radius: 3px 10px 10px 3px; overflow: hidden; }
.book--flip .cover { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.book--flip .cover--alt { transform: rotateY(180deg); }
@keyframes book-flip { 0%, 38% { transform: rotateY(0); } 46%, 88% { transform: rotateY(180deg); } 96%, 100% { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .book--flip .book__front { animation: none; } }

/* Contact form + notices */
.contact-form .fields { display: grid; gap: 14px; }
.contact-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .contact-form .row-2 { grid-template-columns: 1fr; } }
.contact-form input, .contact-form textarea { width: 100%; font: inherit; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); }
.contact-form label { font-weight: 700; font-size: 14px; display: block; margin-bottom: 6px; }
.contact-form label span { font-weight: 500; color: var(--ink-60); }
.notice--ok { background: #D9F5E3; border: 2px solid var(--ink); border-radius: 12px; padding: 12px 14px; font-weight: 600; }

/* Language switcher (footer) */
.lang-form select { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }

/* Footer: newsletter column needs the full width on small screens */
@media (max-width: 700px) { .footer__grid > div:last-child { grid-column: 1 / -1; } .footer .newsletter input { width: 100%; } }
.lang-form { margin: 0; }