/* Creative Fabula — theme tokens.
   These map 1:1 to Shopify theme settings (config/settings_schema.json → colors / typography). */
:root {
  /* from the Creative Fabula logo */
  --navy: #173B5E;        /* logo outline — primary */
  --navy-deep: #0F2A45;
  --sun: #FFC93C;         /* star — CTA */
  --sun-deep: #F5B400;
  --sky: #2F8FDB;         /* paper plane */
  --sky-soft: #E6F3FD;
  --berry: #EC3A64;       /* C */
  --tang: #F37B36;        /* r */
  --leaf: #7CC242;        /* a */
  --grape: #6E3896;       /* v */
  --cream: #FFF8EC;
  --white: #FFFFFF;
  --ink: #1E2B38;
  --mute: #5D6B78;
  --line: rgba(23, 59, 94, .12);
  /* legacy aliases used by components */
  --slate: var(--navy); --slate-deep: var(--navy-deep); --ochre: var(--sun); --ochre-deep: var(--sky);
  --linen: var(--white); --birch: var(--cream); --oat: #F1E6D2; --sage: var(--leaf); --fjord: var(--sky); --lingon: var(--berry);

  --f-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --f-body: "Nunito", system-ui, -apple-system, sans-serif;
  --f-logo: "Fredoka", sans-serif;

  --r-sm: 12px; --r-md: 18px; --r-lg: 28px;
  --shadow: 0 2px 4px rgba(23,59,94,.06), 0 16px 36px -14px rgba(23,59,94,.28);
  --page: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--linen); color: var(--ink);
  font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ochre-deep); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 .5em; font-variation-settings: "SOFT" 50, "opsz" 96; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.25rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.35rem; font-variation-settings: "SOFT" 50, "opsz" 24; }
p { margin: 0 0 1em; }
.eyebrow { font: 600 .74rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ochre-deep); margin-bottom: 1.1rem; display: inline-block; }
.lede { font-size: 1.12rem; color: var(--mute); max-width: 34em; }
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--birch { background: var(--birch); }
.section--slate { background: var(--slate); color: var(--linen); }
.section--slate .lede { color: rgba(246,241,231,.75); }
.section--slate .eyebrow { color: var(--ochre); }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 1rem 1.7rem; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: .98rem; text-decoration: none; transition: transform .15s ease, background .2s ease, box-shadow .2s ease; }
.btn--primary { background: var(--slate); color: var(--linen); }
.btn--primary:hover { background: var(--slate-deep); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn--ochre { background: var(--ochre); color: var(--slate-deep); }
.btn--ochre:hover { background: #E89C4D; transform: translateY(-1px); }
.btn--ghost { border-color: var(--line); background: transparent; color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* Announcement + header */
.announce { background: var(--slate-deep); color: rgba(246,241,231,.86); font-size: .8rem; letter-spacing: .04em; text-align: center; padding: .6rem var(--gutter); }
.announce b { color: var(--ochre); font-weight: 600; }
.header { position: sticky; top: 0; z-index: 50; background: var(--slate); color: var(--linen); }
.header__inner { display: flex; align-items: center; gap: 2rem; height: 72px; }
.logo { font-family: var(--f-logo); color: var(--ochre); font-size: 1.7rem; text-decoration: none; letter-spacing: .005em; white-space: nowrap; }
.nav { display: flex; gap: 1.8rem; margin-right: auto; }
.nav a { text-decoration: none; font-size: .92rem; color: rgba(246,241,231,.82); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--linen); }
.header__tools { display: flex; align-items: center; gap: .6rem; }
.lang { display: inline-flex; border: 1px solid rgba(246,241,231,.25); border-radius: 999px; padding: 3px; }
.lang button { background: none; border: 0; color: rgba(246,241,231,.7); font-size: .76rem; font-weight: 700; letter-spacing: .08em; padding: .35rem .7rem; border-radius: 999px; }
.lang button[aria-pressed="true"] { background: var(--linen); color: var(--slate); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--linen); background: none; border: 0; position: relative; }
.icon-btn:hover { background: rgba(255,255,255,.08); }
.cart-count { position: absolute; top: 4px; right: 2px; background: var(--ochre); color: var(--slate-deep); font-size: .65rem; font-weight: 800; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; }
.menu-btn { display: none; }
@media (max-width: 860px) {
  .nav { display: none; position: absolute; top: 72px; left: 0; right: 0; background: var(--slate); flex-direction: column; gap: 0; padding: .5rem var(--gutter) 1.25rem; }
  .nav.open { display: flex; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .menu-btn { display: grid; }
  .header__inner { gap: .75rem; justify-content: space-between; }
  .logo { font-size: 1.4rem; margin-right: auto; }
}

/* Hero */
.hero { padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 110px); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.hero h1 em { font-style: italic; color: var(--ochre-deep); font-variation-settings: "SOFT" 100, "opsz" 96; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin: 2rem 0 2.2rem; }
.hero__note { font-size: .86rem; color: var(--mute); display: flex; align-items: center; gap: .5rem; }
.hero__note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }
.trust { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .86rem; color: var(--mute); padding-top: 1.6rem; border-top: 1px solid var(--line); }
.trust span::before { content: "✓"; color: var(--sage); font-weight: 800; margin-right: .45rem; }
.hero__art { position: relative; display: grid; place-items: center; min-height: 420px; }
.hero__art .disc { position: absolute; width: 88%; aspect-ratio: 1; border-radius: 50%; background: var(--birch); }
.hero__art .book { width: min(78%, 400px); }
.hero__badge { position: absolute; right: -2%; bottom: 2%; background: var(--white); border-radius: var(--r-md); padding: .9rem 1.1rem; box-shadow: var(--shadow); font-size: .82rem; line-height: 1.35; display: flex; gap: .7rem; align-items: center; }
.hero__badge .ph { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--oat), var(--fjord)); flex: none; }
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; } .hero__art { min-height: 340px; order: -1; } }

/* Book mockup — cloth-bound cover with arched illustration window */
.book { position: relative; aspect-ratio: 1; perspective: 1400px; container-type: inline-size; }
.book__cover { position: absolute; inset: 0; border-radius: 4px 10px 10px 4px; background: var(--cloth, var(--oat)); box-shadow: inset 6px 0 0 rgba(0,0,0,.06), inset 9px 0 6px -4px rgba(0,0,0,.12), 0 30px 50px -24px rgba(31,42,48,.55), 0 4px 10px rgba(31,42,48,.12); transform: rotateY(-14deg) rotateX(2deg); transform-origin: left center; display: flex; flex-direction: column; align-items: center; padding: 8% 10% 7%; overflow: hidden; }
.book__cover::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 5px); pointer-events: none; }
.book__name { font: 700 3.2cqw/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--slate); opacity: .8; }
.book__title { font-family: var(--f-display); font-size: 7.6cqw; line-height: 1.06; max-width: 92%; text-align: center; color: var(--slate-deep); margin: .45em 0 .7em; font-variation-settings: "SOFT" 100, "opsz" 48; }
.book__window { width: 62%; aspect-ratio: .9; flex: none; border-radius: 999px 999px 10px 10px; overflow: hidden; box-shadow: 0 0 0 4px rgba(255,253,249,.55); }
.book__window svg, .book__window img { width: 100%; height: 100%; object-fit: cover; }
.book__brand { font-family: var(--f-logo); font-size: 3.2cqw; color: var(--slate); opacity: .65; margin-top: .7em; letter-spacing: .04em; }
.book--flat .book__cover { transform: none; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); margin-top: 3rem; counter-reset: step; }
.step { padding: 2rem; background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--line); }
.step::before { counter-increment: step; content: "0" counter(step); font: 400 2.4rem/1 var(--f-display); color: var(--ochre); display: block; margin-bottom: 1.2rem; }
.step p { color: var(--mute); margin: 0; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* Book cards */
.grid-books { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 28px); margin-top: 3rem; }
.card { display: flex; flex-direction: column; text-decoration: none; background: var(--white); border-radius: var(--r-lg); padding: 1.1rem 1.1rem 1.4rem; border: 1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card__art { background: var(--birch); border-radius: var(--r-md); padding: 18% 12% 10%; margin-bottom: 1.1rem; position: relative; }
.card__tag { position: absolute; top: .8rem; left: .8rem; background: var(--slate); color: var(--linen); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .6rem; border-radius: 999px; }
.card__tag--season { background: var(--lingon); }
.card h3 { margin-bottom: .35rem; }
.card__meta { font-size: .82rem; color: var(--mute); margin-bottom: 1rem; }
.card__go { margin-top: auto; font-weight: 600; font-size: .9rem; color: var(--ochre-deep); }
.card__go::after { content: " →"; }
@media (max-width: 1000px) { .grid-books { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grid-books { grid-template-columns: 1fr; } }

/* Collection rows (all books) */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.chip { border: 1px solid var(--line); background: transparent; padding: .55rem 1rem; border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--slate); border-color: var(--slate); color: var(--linen); }
.rows { margin-top: 2.5rem; display: grid; gap: clamp(16px, 2vw, 24px); }
.row { display: grid; grid-template-columns: 260px 1fr auto; gap: clamp(20px, 3vw, 44px); align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(16px, 2vw, 24px); }
.row__art { background: var(--birch); border-radius: var(--r-md); padding: 10%; }
.row h3 { font-size: 1.6rem; margin-bottom: .4rem; }
.pills { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .9rem; }
.pill { font-size: .74rem; font-weight: 600; padding: .3rem .65rem; border-radius: 999px; background: var(--birch); color: var(--slate); }
.pill--age { background: var(--slate); color: var(--linen); }
.row p { color: var(--mute); margin-bottom: .6rem; max-width: 46em; }
.row q { font-family: var(--f-display); font-style: italic; color: var(--ochre-deep); font-size: 1.02rem; }
.row__cta { display: flex; flex-direction: column; gap: .6rem; min-width: 200px; }
@media (max-width: 900px) { .row { grid-template-columns: 140px 1fr; } .row__cta { grid-column: 1 / -1; flex-direction: row; } .row__cta .btn { flex: 1; } }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } .row__art { max-width: 220px; } }

/* Values */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 3rem; }
.value h3 { color: var(--linen); }
.value p { color: rgba(246,241,231,.72); margin: 0; }
.value svg { width: 36px; height: 36px; margin-bottom: 1.2rem; color: var(--ochre); }
@media (max-width: 760px) { .values { grid-template-columns: 1fr; } }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); margin-top: 3rem; }
.review { background: var(--white); border-radius: var(--r-lg); padding: 2rem; border: 1px solid var(--line); position: relative; }
.review__stars { color: var(--ochre); letter-spacing: .15em; margin-bottom: 1rem; }
.review blockquote { margin: 0 0 1.4rem; font-family: var(--f-display); font-size: 1.18rem; line-height: 1.4; font-variation-settings: "SOFT" 100, "opsz" 24; }
.review cite { font-style: normal; font-size: .85rem; color: var(--mute); }
.placeholder-flag { position: absolute; top: 1rem; right: 1rem; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--lingon); border: 1px dashed currentColor; padding: .2rem .45rem; border-radius: 4px; }
@media (max-width: 860px) { .reviews { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 760px; margin: 2.5rem auto 0; }
.faq details { border-bottom: 1px solid var(--line); padding: 1.3rem 0; }
.faq summary { cursor: pointer; list-style: none; font-family: var(--f-display); font-size: 1.22rem; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-body); color: var(--ochre-deep); font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--mute); margin: .9rem 0 0; }

/* Newsletter */
.newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.newsletter form { display: flex; gap: .6rem; }
.input, .select { width: 100%; padding: .95rem 1.1rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--white); font: inherit; color: var(--ink); }
.input:focus, .select:focus { outline: 2px solid var(--ochre); outline-offset: 0; border-color: transparent; }
.section--slate .input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: var(--linen); }
.section--slate .input::placeholder { color: rgba(246,241,231,.5); }
@media (max-width: 760px) { .newsletter { grid-template-columns: 1fr; } .newsletter form { flex-direction: column; } }

/* Footer */
.footer { background: var(--slate-deep); color: rgba(246,241,231,.7); padding: 72px 0 36px; font-size: .9rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.footer h4 { color: var(--linen); font: 600 .74rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 1.1rem; }
.footer a { display: block; text-decoration: none; padding: .25rem 0; }
.footer a:hover { color: var(--linen); }
.footer__base { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .8rem; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

/* Product page */
.pdp { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 72px); padding: clamp(32px, 5vw, 64px) 0; }
.pdp__gallery { display: grid; gap: 12px; align-self: start; align-content: start; } /* natural height: no gap under the picture */
@media (min-width: 901px) { .pdp__gallery { position: sticky; top: 100px; } }
.pdp__main { background: var(--birch); border-radius: var(--r-lg); padding: 12%; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pdp__thumbs button { border: 2px solid transparent; padding: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--birch); aspect-ratio: 1; }
.pdp__thumbs button[aria-current="true"] { border-color: var(--slate); }
.pdp__thumbs svg { width: 100%; height: 100%; }
.pdp__info { position: sticky; top: 96px; align-self: start; }
.price { font-family: var(--f-display); font-size: 1.7rem; margin: 1rem 0 1.4rem; }
.price small { font-family: var(--f-body); font-size: .85rem; color: var(--mute); margin-left: .4rem; }
.formats { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1.4rem; }
.format { position: relative; }
.format input { position: absolute; opacity: 0; }
.format label { display: block; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem 1.1rem; cursor: pointer; background: var(--white); }
.format label b { display: block; font-size: .95rem; }
.format label span { font-size: .82rem; color: var(--mute); }
.format input:checked + label { border-color: var(--slate); box-shadow: inset 0 0 0 1px var(--slate); }
.format input:focus-visible + label { outline: 2px solid var(--ochre-deep); outline-offset: 2px; }
.ticks { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .55rem; font-size: .9rem; color: var(--mute); }
.ticks li::before { content: "✓"; color: var(--sage); font-weight: 800; margin-right: .6rem; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } .pdp__info { position: static; } }

/* Wizard */
.wizard { max-width: 640px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) 0 96px; }
.wizard__book { display: flex; gap: 1rem; align-items: center; margin-bottom: 2rem; }
.wizard__book .book { width: 72px; flex: none; }
.wizard__book small { color: var(--mute); display: block; font-size: .82rem; }
.progress { display: flex; gap: .4rem; margin-bottom: 2.2rem; }
.progress span { flex: 1; height: 4px; border-radius: 4px; background: var(--oat); }
.progress span.on { background: var(--slate); }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 4vw, 40px); }
.field { margin-bottom: 1.3rem; }
.field > label, .field > .label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .45rem; }
.field .hint { font-size: .8rem; color: var(--mute); margin-top: .35rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { display: block; text-align: center; padding: .85rem .5rem; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; font-weight: 600; font-size: .9rem; background: var(--white); }
.seg input:checked + label { background: var(--slate); border-color: var(--slate); color: var(--linen); }
.seg input:focus-visible + label { outline: 2px solid var(--ochre-deep); outline-offset: 2px; }
.check { display: flex; gap: .75rem; align-items: flex-start; font-size: .86rem; color: var(--mute); line-height: 1.5; }
.check input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--slate); flex: none; }
.error { color: var(--lingon); font-size: .82rem; margin-top: .35rem; display: none; }
.has-error .error { display: block; }
.has-error .input, .has-error .select { border-color: var(--lingon); }
.actions { display: flex; gap: .8rem; margin-top: 1.8rem; }
.actions .btn--primary { flex: 1; }
.drop { border: 1.5px dashed var(--oat); border-radius: var(--r-lg); padding: 2.2rem 1.2rem; text-align: center; background: var(--linen); cursor: pointer; transition: border-color .2s, background .2s; }
.drop:hover, .drop.drag { border-color: var(--slate); background: var(--birch); }
.drop img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; box-shadow: 0 0 0 6px var(--white), var(--shadow); }
.photo-tips { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: 1.2rem; }
.photo-tips div { text-align: center; font-size: .74rem; color: var(--mute); }
.photo-tips i { display: block; width: min(100%, 64px); margin: 0 auto .4rem; aspect-ratio: 1; border-radius: 50%; background: var(--birch); position: relative; }
.photo-tips i::after { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .7rem; font-weight: 800; color: #fff; }
.photo-tips .ok i::after { content: "✓"; background: var(--sage); }
.photo-tips .no i::after { content: "✕"; background: var(--lingon); }
.privacy-note { display: flex; gap: .7rem; font-size: .82rem; color: var(--mute); margin-top: 1.2rem; padding: .9rem 1rem; background: var(--linen); border-radius: var(--r-sm); }
.discount-box { border: 1px dashed var(--ochre); background: #FBF3E7; border-radius: var(--r-md); padding: 1rem 1.1rem; margin: 1.2rem 0; }
.generating { text-align: center; padding: 3rem 1rem; }
.generating .book { width: 180px; margin: 0 auto 2rem; animation: float 3s ease-in-out infinite; }
.gen-steps { list-style: none; padding: 0; margin: 1.6rem auto 0; max-width: 320px; text-align: left; display: grid; gap: .55rem; font-size: .9rem; color: var(--mute); }
.gen-steps li.done { color: var(--ink); }
.gen-steps li.done::before { content: "✓ "; color: var(--sage); font-weight: 800; }
.gen-steps li:not(.done)::before { content: "○ "; }
@keyframes float { 50% { transform: translateY(-8px); } }

/* Preview reader */
.reader { display: grid; grid-template-columns: 1fr 360px; gap: clamp(24px, 4vw, 56px); padding: clamp(28px, 4vw, 56px) 0 96px; }
.stage { position: relative; }
.page { position: relative; aspect-ratio: 1; background: var(--white); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); }
.page__art { position: absolute; inset: 0; }
.page__art svg, .page__art img { width: 100%; height: 100%; object-fit: cover; }
.page__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 22% 10% 7%; text-align: center; font-family: var(--f-display); font-size: clamp(1rem, 2.1vw, 1.45rem); line-height: 1.4; background: linear-gradient(to bottom, rgba(246,241,231,0), var(--linen) 45%); font-variation-settings: "SOFT" 100, "opsz" 24; }
.page--cover { background: var(--cloth); display: grid; place-items: center; }
.page--cover .book { width: 100%; }
.page--locked .page__art { filter: blur(14px) saturate(.7); transform: scale(1.1); }
.page__lock { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .6rem; background: rgba(246,241,231,.55); padding: 2rem; }
.page__lock svg { width: 44px; height: 44px; margin: 0 auto; color: var(--slate); }
.page__lock b { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; }
.page__lock span { color: var(--mute); font-size: .9rem; }
.page__loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--birch); color: var(--mute); font-size: .9rem; }
.page__loading::before { content: ""; width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--oat); border-top-color: var(--slate); animation: spin 1s linear infinite; position: absolute; top: calc(50% - 46px); }
@keyframes spin { to { transform: rotate(360deg); } }
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 1.2rem; }
.pager button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); font-size: 1.2rem; }
.pager button:disabled { opacity: .35; }
.pager__dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pager__dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: var(--oat); }
.pager__dots button[aria-current="true"] { background: var(--slate); }
.pager__dots button.locked { background: transparent; box-shadow: inset 0 0 0 1.5px var(--oat); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 1.6rem; }
.thumbs button { padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; aspect-ratio: 1; background: var(--birch); position: relative; }
.thumbs button[aria-current="true"] { border-color: var(--slate); }
.thumbs button svg, .thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button.locked > *:first-child { filter: blur(4px); opacity: .6; }
.thumbs button.locked::after { content: "🔒"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .9rem; }
.side { position: sticky; top: 96px; align-self: start; }
.side .panel { padding: 1.8rem; }
.mode-flag { display: inline-flex; gap: .4rem; align-items: center; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .35rem .6rem; border-radius: 999px; background: var(--birch); color: var(--slate); margin-bottom: 1rem; }
.link-btn { background: none; border: 0; padding: 0; color: var(--ochre-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120%); background: var(--slate); color: var(--linen); padding: .9rem 1.3rem; border-radius: 999px; font-size: .9rem; transition: transform .3s ease; z-index: 100; box-shadow: var(--shadow); }
.toast.show { transform: translateX(-50%) translateY(0); }
@media (max-width: 960px) { .reader { grid-template-columns: 1fr; } .side { position: static; } }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ===== Playful theme layer (Imagitime-style, Creative Fabula colours) ===== */
body { font-size: 17px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.01em; font-variation-settings: normal; color: var(--navy); }
.section--slate h2, .section--slate h3 { color: var(--white); }
.eyebrow { color: var(--sky); font-weight: 800; }
.lede { color: var(--mute); }

.announce { background: var(--sun); color: var(--navy); font-weight: 700; }
.announce b { color: var(--berry); }
.header { background: var(--white); color: var(--navy); box-shadow: 0 1px 0 var(--line); }
.header__inner { height: 84px; }
.logo { display: block; color: inherit; }
.logo img { height: 58px; width: auto; }
.nav a { color: var(--navy); font-weight: 700; font-size: .95rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--sky); }
.lang { border-color: var(--line); }
.lang button { color: var(--mute); }
.lang button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.icon-btn { color: var(--navy); }
.icon-btn:hover { background: var(--sky-soft); }
.cart-count { background: var(--berry); color: #fff; }
@media (max-width: 860px) { .nav { background: var(--white); top: 84px; box-shadow: var(--shadow); } .nav a { border-color: var(--line); } .logo img { height: 46px; } }

.btn { font-weight: 800; border-radius: 999px; padding: 1.05rem 1.9rem; font-size: 1.02rem; }
.btn--primary { background: var(--sun); color: var(--navy); box-shadow: 0 4px 0 var(--sun-deep); }
.btn--primary:hover { background: #FFD25A; transform: translateY(-2px); box-shadow: 0 6px 0 var(--sun-deep); }
.btn--ochre { background: var(--sun); color: var(--navy); }
.btn--ghost { border: 2px solid var(--navy); color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }

/* Hero: sky with dashed flight path, like the logo */
.hero { background: linear-gradient(180deg, #3D9BE3 0%, #2F8FDB 60%, #2A84CC 100%); color: #fff; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle at 8% 22%, rgba(255,255,255,.18) 0 60px, transparent 61px),
  radial-gradient(circle at 92% 80%, rgba(255,255,255,.12) 0 90px, transparent 91px); pointer-events: none; }
.hero .wrap { position: relative; }
.hero h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.9rem); }
.hero h1 em { font-style: normal; color: var(--sun); font-variation-settings: normal; }
.hero .eyebrow { color: var(--sun); }
.hero .lede { color: rgba(255,255,255,.9); }
.hero__note { color: #fff; font-weight: 700; }
.hero__note::before { background: var(--sun); }
.trust { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.92); }
.trust span::before { color: var(--sun); }
.stars-row { display: inline-flex; gap: .5rem; align-items: center; font-weight: 800; margin-bottom: 1rem; color: #fff; }
.stars-row b { color: var(--sun); letter-spacing: .1em; }
.hero__art .disc { background: rgba(255,255,255,.14); }
.hero__badge { color: var(--ink); }
.hero__badge .ph { background-size: cover; background-position: center; border: 3px solid var(--sun); width: 56px; height: 56px; }
.flight { position: absolute; pointer-events: none; }
.time-badge { position: absolute; left: 2%; top: 4%; width: 92px; height: 92px; border-radius: 50%; background: var(--berry); color: #fff; display: grid; place-content: center; text-align: center; font: 600 .78rem/1.05 var(--f-display); transform: rotate(-10deg); box-shadow: var(--shadow); border: 3px solid #fff; }
.time-badge b { font-size: 1.5rem; display: block; }

/* Book mockup with full-bleed illustrated cover */
.book__cover { padding: 0; border-radius: 4px 12px 12px 4px; background: var(--cloth, var(--sky)); }
.book__cover::after { background: linear-gradient(90deg, rgba(0,0,0,.18) 0, rgba(255,255,255,.18) 2.5%, transparent 5%); }
.book__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.book__img svg { width: 100%; height: 100%; }
.book__txt { position: relative; z-index: 1; text-align: center; padding: 8% 6% 0; width: 100%; }
.book__name { font: 600 5.6cqw/1 var(--f-display); letter-spacing: .04em; color: #fff; opacity: 1; text-shadow: 0 2px 0 rgba(23,59,94,.55), 0 0 12px rgba(23,59,94,.35); text-transform: uppercase; }
.book__title { font: 600 10.5cqw/1.02 var(--f-display); color: #fff; margin: .15em auto 0; text-shadow: 0 3px 0 rgba(23,59,94,.6), 0 0 18px rgba(23,59,94,.35); max-width: 94%; }
.book__brand { position: absolute; z-index: 1; left: 4%; bottom: 3%; margin: 0; width: 22%; opacity: 1; }
.book__brand img { width: 100%; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.book__window { display: none; }

/* Cards & rows */
.card, .row, .step, .review, .panel { border: 0; box-shadow: var(--shadow); }
.card__art, .row__art, .pdp__main { background: var(--sky-soft); }
.card__tag { background: var(--berry); }
.card__go { color: var(--sky); font-weight: 800; }
.card .btn { margin-top: auto; }
.pill { background: var(--cream); color: var(--navy); font-weight: 700; }
.pill--age { background: var(--navy); color: #fff; }
.row q { font-family: var(--f-body); font-weight: 700; color: var(--grape); font-style: italic; }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); }
.step::before { color: var(--sun-deep); font-family: var(--f-display); font-weight: 600; }
.steps .step:nth-child(1)::before { color: var(--berry); }
.steps .step:nth-child(2)::before { color: var(--leaf); }
.steps .step:nth-child(3)::before { color: var(--sky); }
.section--birch { background: var(--cream); }
.section--slate { background: var(--navy); }
.section--slate .eyebrow { color: var(--sun); }
.value svg { color: var(--sun); }
.review__stars { color: var(--sun-deep); }
.review blockquote { font-family: var(--f-body); font-weight: 700; font-size: 1.08rem; color: var(--ink); }
.faq summary { font-family: var(--f-display); font-weight: 600; color: var(--navy); }
.faq summary::after { color: var(--sky); }
.footer { background: var(--navy-deep); }
.footer .logo img { height: 70px; }
.price { font-family: var(--f-display); font-weight: 600; color: var(--navy); }
.format input:checked + label { border-color: var(--sky); box-shadow: inset 0 0 0 2px var(--sky); }
.seg input:checked + label { background: var(--navy); border-color: var(--navy); }
.progress span.on { background: var(--sky); }
.drop { border-color: #BFD9EF; background: var(--sky-soft); }
.drop:hover, .drop.drag { border-color: var(--sky); background: #D8ECFB; }
.discount-box { border-color: var(--sun-deep); background: #FFF6D9; }
.mode-flag { background: var(--sky-soft); color: var(--navy); }
.link-btn { color: var(--sky); }
.page__text { font-family: var(--f-body); font-weight: 700; color: var(--ink); background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 45%); }
.page--cover { background: var(--sky-soft); }
.page__lock { background: rgba(255,255,255,.55); }
.page__lock b { font-family: var(--f-display); font-weight: 600; color: var(--navy); }
.page__art img { transition: none; }
.photo-bubble { position: absolute; top: 5%; right: 5%; width: 22%; aspect-ratio: 1; border-radius: 50%; background-size: cover; background-position: center; border: 4px solid #fff; box-shadow: 0 0 0 4px var(--sun), var(--shadow); }
.photo-bubble.left { right: auto; left: 5%; }
.thumbs .photo-bubble { border-width: 2px; box-shadow: 0 0 0 2px var(--sun); }
.card__meta .card__tag { position: static; display: inline-block; vertical-align: middle; font-size: .62rem; padding: .25rem .55rem; }
.card__art { padding: 10%; }
.logo img { height: 64px; }
.book__cover .book__txt::before { content: ""; position: absolute; left: -10%; right: -10%; top: -20%; height: 150%; background: radial-gradient(ellipse at 50% 30%, rgba(23,59,94,.38), rgba(23,59,94,0) 70%); z-index: -1; }

/* story text highlights (match the printed page) */
.page__text .hl { font-family: var(--f-display); font-weight: 600; }
.card__tag--soon { background: var(--navy); }

/* Hero: big cover with a real inside page fanned out behind it */
@media (min-width: 861px) { .hero__grid { grid-template-columns: .92fr 1.08fr; } .hero__art { min-height: 600px; } }
.hero__art .disc { width: 100%; }
.hero__bookwrap { position: relative; z-index: 2; width: min(100%, 560px); transform: translateX(-4%); }
.hero__page { position: absolute; z-index: 1; width: min(70%, 400px); aspect-ratio: 1; object-fit: cover; right: -6%; top: 6%; border-radius: 10px; transform: rotate(7deg); box-shadow: 0 30px 50px -24px rgba(23,59,94,.55), 0 4px 10px rgba(23,59,94,.15); border: 6px solid #fff; }
.hero__art .time-badge { z-index: 3; left: 0; top: 2%; }
.hero__art .hero__badge { z-index: 3; right: 0; bottom: 0; }
.hero__badge .ph { width: 64px; height: 64px; }
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { min-height: 0; padding: 4% 0 14%; order: -1; }
  .hero__bookwrap { width: min(82%, 440px); transform: none; margin: 0 auto 0 4%; }
  .hero__page { width: 50%; right: 0; top: 0; }
  .hero__art .time-badge { width: 68px; height: 68px; font-size: .62rem; left: auto; right: 2%; top: auto; bottom: 30%; }
  .hero__art .time-badge b { font-size: 1.1rem; }
  .hero__art .hero__badge { right: 2%; bottom: -2%; font-size: .74rem; padding: .6rem .8rem; }
  .hero__badge .ph { width: 44px; height: 44px; }
}

/* Product page: real pages from the sample book */
.pdp__main--pages { padding: 0; background: none; }
.pdp__page { margin: 0; }
.pdp__page img { width: 100%; aspect-ratio: 1; display: block; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.pdp__page figcaption { text-align: center; font-size: .82rem; color: var(--mute); margin-top: .6rem; }
.pdp__thumbs--pages { grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 12px; }
.pdp__thumbs--pages button { aspect-ratio: 1; }
.pdp__thumbs--pages img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inside { padding: 0 0 clamp(40px, 6vw, 80px); }
.inside__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 2rem; margin-bottom: 1rem; }
.inside__head h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.inside__head p { margin: 0; color: var(--mute); }
.inside__strip { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(150px, 22vw, 220px); gap: 14px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x proximity; }
.inside__strip figure { margin: 0; scroll-snap-align: start; }
.inside__strip img { width: 100%; aspect-ratio: 1; display: block; border-radius: 10px; box-shadow: 0 6px 18px -8px rgba(23,59,94,.35); }
.inside__strip figcaption { font-size: .78rem; color: var(--mute); text-align: center; margin-top: .4rem; }
.inside__list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .5rem 1.5rem; }
.inside__list li { display: flex; gap: .7rem; align-items: baseline; }
.inside__list b { font-family: var(--f-display); color: var(--sky); min-width: 3.2em; }

/* Light motion: transform/opacity only (GPU-cheap), off for reduced-motion users */
.floaties { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.floaties i { position: absolute; display: block; will-change: transform; animation: drift 9s ease-in-out infinite; }
.floaties svg { width: 100%; height: 100%; display: block; }
.floaties .f1 { width: 120px; left: 4%; top: 10%; fill: rgba(255,255,255,.22); animation-duration: 14s; }
.floaties .f2 { width: 22px; left: 46%; top: 12%; fill: var(--sun); animation-delay: -2s; }
.floaties .f3 { width: 18px; left: 40%; bottom: 14%; fill: #FF8FB1; animation-delay: -5s; animation-duration: 11s; }
.floaties .f4 { width: 30px; right: 6%; top: 8%; fill: rgba(255,255,255,.85); animation: glide 12s ease-in-out infinite; }
.floaties .f5 { width: 14px; right: 30%; bottom: 8%; fill: #fff; animation-delay: -7s; }
.floaties .f6 { width: 90px; right: 2%; bottom: 22%; fill: rgba(255,255,255,.16); animation-duration: 16s; animation-delay: -4s; }
.hero .wrap { z-index: 1; }
@keyframes drift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(8px, -12px, 0) rotate(6deg); } }
@keyframes glide { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg); } 50% { transform: translate3d(-18px, 10px, 0) rotate(4deg); } }
@keyframes bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } }
@keyframes bobTilt { 0%, 100% { transform: rotate(7deg) translate3d(0, 0, 0); } 50% { transform: rotate(5deg) translate3d(0, -8px, 0); } }
@keyframes wobble { 0%, 100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(-4deg) scale(1.05); } }
.hero__bookwrap .book { animation: bob 6s ease-in-out infinite; will-change: transform; }
.hero__page { animation: bobTilt 7s ease-in-out infinite; animation-delay: -2s; will-change: transform; }
.hero__art .time-badge { animation: wobble 4s ease-in-out infinite; }
.hero__art .hero__badge { animation: bob 8s ease-in-out infinite; animation-delay: -3s; }
.btn--primary { transition: transform .15s ease, box-shadow .15s ease; }
.btn--primary:active { transform: scale(.97); }
@media (max-width: 860px) {
  .floaties .f1 { width: 80px; } .floaties .f6 { width: 60px; bottom: 50%; } .floaties .f2 { left: 70%; top: 4%; }
  .hero h1 { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .hero__cta .btn { width: 100%; text-align: center; }
  .hero__cta { gap: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .floaties i, .hero__bookwrap .book, .hero__page, .hero__art .time-badge, .hero__art .hero__badge { animation: none !important; }
}
/* Phones: two compact book cards per row */
@media (max-width: 520px) {
  .grid-books { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 1.6rem; }
  .grid-books .card { padding: .6rem .6rem .8rem; border-radius: 16px; }
  .grid-books .card__art { padding: 6%; border-radius: 12px; }
  .grid-books .card h3 { font-size: 1rem; line-height: 1.15; }
  .grid-books .card__meta { font-size: .72rem; margin-bottom: .6rem; }
  .grid-books .card .btn { padding: .6rem .5rem; font-size: .8rem; min-height: 0; }
}

/* Product page: bonus pages and why it's different */
.bonus, .why { padding: 0 0 clamp(36px, 5vw, 64px); }
.bonus__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 22px); }
.bonus__grid figure { margin: 0; background: #fff; border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.bonus__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.bonus__grid figcaption { padding: .7rem .85rem .9rem; display: grid; gap: .15rem; }
.bonus__grid b { font-family: var(--f-display); font-weight: 600; color: var(--navy); font-size: 1rem; }
.bonus__grid span { font-size: .84rem; color: var(--mute); line-height: 1.35; }
.why h2 { margin-bottom: 1.1rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
.why__item b { display: block; font-family: var(--f-display); font-weight: 600; color: var(--navy); font-size: 1.05rem; margin: .5rem 0 .25rem; }
.why__item p { margin: 0; font-size: .9rem; color: var(--ink); line-height: 1.45; }
.why__dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 18%, transparent); }
.why__vs { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin-top: 1.6rem; }
.why__vs div { border-radius: 16px; padding: 1rem 1.2rem; background: var(--cream); display: grid; gap: .2rem; }
.why__vs span { font-size: .8rem; color: var(--mute); }
.why__vs b { font-family: var(--f-display); font-weight: 600; color: var(--mute); font-size: 1.05rem; }
.why__vs .us { background: var(--navy); }
.why__vs .us span { color: rgba(255,255,255,.75); }
.why__vs .us b { color: var(--sun); }
@media (max-width: 860px) {
  .bonus__grid { grid-template-columns: repeat(2, 1fr); }
  .why__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .bonus__grid figcaption { padding: .55rem .65rem .7rem; }
  .bonus__grid b { font-size: .9rem; } .bonus__grid span { font-size: .76rem; }
  .why__grid { grid-template-columns: 1fr; gap: 14px; }
  .why__item { display: grid; grid-template-columns: 14px 1fr; column-gap: .8rem; }
  .why__item b { margin: -.15rem 0 .2rem; } .why__item p { grid-column: 2; }
  .why__vs { grid-template-columns: 1fr; }
}

/* Benefit pills (product page, under the main button) */
.perks { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.perks li { display: flex; align-items: center; gap: .5rem; background: #fff; border: 1.5px solid color-mix(in srgb, var(--c) 35%, transparent); border-radius: 12px; padding: .55rem .7rem; font-weight: 700; font-size: .84rem; color: var(--navy); line-height: 1.2; }
.perks li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
/* Comparison table */
.cmp__h { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 2rem 0 .8rem; }
.cmp { overflow-x: auto; }
.cmp table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; font-size: .95rem; }
.cmp th, .cmp td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line, #EEF1F4); vertical-align: middle; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp thead th { font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--navy); background: var(--cream); }
.cmp thead th.us { background: var(--navy); color: var(--sun); }
.cmp tbody th { font-weight: 700; color: var(--ink); width: 40%; }
.cmp td { color: var(--mute); }
.cmp td.us { color: var(--navy); font-weight: 700; background: color-mix(in srgb, var(--sky) 7%, #fff); }
.cmp .tick { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--leaf, #2BA36B); color: #fff; font-size: .75rem; margin-right: .5rem; vertical-align: -5px; }
.cmp__note { font-size: .78rem; color: var(--mute); margin: .6rem .2rem 0; }
@media (max-width: 520px) {
  .perks li { font-size: .78rem; padding: .5rem .55rem; }
  .cmp table { font-size: .82rem; }
  .cmp th, .cmp td { padding: .65rem .6rem; }
  .cmp tbody th { width: 38%; }
  .cmp .tick { display: none; }
}

/* Homepage: more than a story */
.more { background: linear-gradient(180deg, #fff 0%, var(--cream) 100%); }
.more__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; margin: 2rem 0 0; }
.more__grid figure { margin: 0; text-align: center; }
.more__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 12px; box-shadow: 0 8px 20px -10px rgba(23,59,94,.35); transition: transform .25s ease; }
.more__grid figure:hover img { transform: translateY(-4px) rotate(-1deg); }
.more__grid figcaption { font-family: var(--f-display); font-weight: 600; font-size: .8rem; color: var(--navy); margin-top: .5rem; line-height: 1.2; }
.more__cmp { max-width: 860px; margin: 2.4rem auto 0; }
.more__cmp .cmp__h { text-align: center; }
@media (max-width: 1000px) { .more__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .more__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.pdp .hero__note { color: var(--mute); font-weight: 700; }

/* Preview: progress while the child's art is painted */
.gen-progress { max-width: 560px; margin: 2.5rem auto; text-align: center; padding: 2.4rem 1.6rem; }
.gen-progress h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 1rem 0 .4rem; }
.gen-progress p { color: var(--mute); margin: 0 auto 1.4rem; max-width: 420px; }
.gen-progress__photo { display: block; width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; background: var(--birch) center / cover; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--sun, #f6c344); animation: float 3s ease-in-out infinite; }
.bar { height: 12px; border-radius: 99px; background: var(--oat); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--slate), #4fa3e0); transition: width .9s ease; }
.bar--slim { height: 6px; margin-top: .4rem; }
.bar__pct { display: block; margin-top: .5rem; font-size: .9rem; }
.bar__note { font-size: .8rem; color: var(--mute); margin: .35rem 0 .2rem; }
.gen-list { list-style: none; padding: 0; margin: 1.4rem auto 0; max-width: 320px; display: grid; gap: .5rem; text-align: left; font-size: .9rem; }
.gen-list li { display: flex; justify-content: space-between; color: var(--mute); }
.gen-list li em { font-style: normal; font-size: .8rem; }
.gen-list li.done { color: var(--ink); }
.gen-list li.done em { color: var(--sage); font-weight: 800; }
.gen-list li.now { color: var(--ink); font-weight: 700; }
.gen-list li.now em { color: var(--slate); }
.art-wait { position: absolute; inset: 0; display: block; background: linear-gradient(110deg, var(--birch) 30%, var(--oat) 50%, var(--birch) 70%) 0 0 / 300% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .art-wait, .gen-progress__photo { animation: none; } }

/* Preview cover: the uploaded photo beside the illustrated cover, for comparison (web only, never printed) */
.page--cover { position: relative; }
.compare { position: absolute; right: 4%; bottom: 4%; margin: 0; width: clamp(68px, 18%, 130px); display: grid; justify-items: center; gap: .3rem; z-index: 2; }
.compare span { width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--birch) center 30% / cover; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--sun, #f6c344), 0 6px 18px rgba(0,0,0,.25); }
.compare figcaption { white-space: nowrap; background: #fff; color: var(--ink); font-size: .72rem; font-weight: 800; padding: .15rem .6rem; border-radius: 99px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* Progress screen: one tile per picture, each fades in from soft focus as it is painted */
.gen-progress { max-width: 760px; }
.gen-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin: 1.6rem 0 0; }
.gen-tile { position: relative; margin: 0; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--birch); }
.gen-tile--cover { grid-column: span 2; grid-row: span 2; }
.gen-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(18px) saturate(.6); transform: scale(1.06); transition: opacity 1.4s ease, filter 2.2s ease, transform 2.2s ease; }
.gen-tile.in img { opacity: 1; filter: none; transform: none; }
.gen-tile figcaption { position: absolute; left: .5rem; bottom: .5rem; background: rgba(255,255,255,.92); color: var(--ink); font-size: .7rem; font-weight: 700; padding: .12rem .5rem; border-radius: 99px; }
.gen-tile.in figcaption { opacity: 0; transition: opacity .6s 1.4s; }
.gen-tile--failed { opacity: .45; }
.gen-progress__go { margin-top: 1.4rem; }
.gen-progress .gen-list { display: none; }
@media (max-width: 560px) { .gen-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .gen-tile img { transition: opacity .3s; filter: none; transform: none; } }

/* Preview: template activity pages after the story */
.thumbs__h { grid-column: 1 / -1; margin: 1rem 0 .1rem; font-size: 1.05rem; }
.thumbs__h small { display: block; font-family: var(--f-body, inherit); font-weight: 400; font-size: .8rem; color: var(--mute); margin-top: .15rem; }
.page--extra { background: #fff; }
.page--extra .page__art img { object-fit: contain; }
.page__tag { position: absolute; top: .7rem; left: .7rem; background: rgba(255,255,255,.92); color: var(--ink); font-size: .72rem; font-weight: 800; padding: .2rem .65rem; border-radius: 99px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }

/* Shop covers: the child's real photo in the bottom-left corner, just outside the book, with an arrow to their illustrated self */
.orig { position: absolute; left: -6%; bottom: -6%; width: 30%; z-index: 4; pointer-events: none; }
.orig__ph { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--birch) center 28% / cover; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--sun), 0 8px 18px rgba(0,0,0,.28); }
.orig__tag { position: absolute; left: 50%; bottom: -9%; transform: translateX(-50%); white-space: nowrap; background: #fff; color: var(--ink); font: 800 clamp(.55rem, 2.6cqw, .78rem)/1 var(--f-body, inherit); padding: .3em .7em; border-radius: 99px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.orig__arrow { position: absolute; left: 68%; top: -38%; width: 72%; color: #fff; transform: rotate(-28deg); filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.book--orig .book__brand { left: auto; right: 4%; }
/* Homepage hero: a boy's book and a girl's book take turns */
.hero__slides { position: relative; width: 100%; display: grid; place-items: center; }
.hero__slide { display: grid; place-items: center; width: 100%; position: relative; }
.hero__slide { transition: opacity .9s ease, transform .9s ease; }
.hero__slide:not(.on) { position: absolute; inset: 0; opacity: 0; transform: rotate(3deg) scale(.96); pointer-events: none; }
.hero__slide.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } }

/* Product page: real photo on the sample cover (bottom left, just above the logo printed on the cover) */
.pdp__img { position: relative; container-type: inline-size; }
.orig--pdp { left: 3%; bottom: 17%; width: 22%; }

/* Digital copy: a quieter third choice under the printed formats */
.format--digital { grid-column: 1 / -1; }
.format--digital label { padding-top: .7rem; padding-bottom: .7rem; }

/* Trust: privacy note, Christmas order-by, free redo, print details */
.privacy-note { font-size: .82rem; color: var(--mute); background: var(--birch); border-radius: 12px; padding: .6rem .8rem; margin: .7rem 0 0; }
.announce--xmas { background: #1f6f4a; color: #fff; }
.xmas-note { text-align: center; font-weight: 700; color: #1f6f4a; background: #e8f5ee; border-radius: 12px; padding: .55rem .8rem; margin: .7rem 0 0; font-size: .9rem; }
.redo-note { font-size: .82rem; color: var(--mute); text-align: center; margin: .6rem 0 0; }
.specs { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.specs h3 { font-size: 1rem; margin: 0 0 .6rem; }
.specs dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; font-size: .86rem; }
.specs dt { color: var(--mute); }
.specs dd { margin: 0; color: var(--ink); }

/* product page: the free-preview note sits right under the button */
.pdp__free { justify-content: center; margin: .7rem 0 1.2rem; }
/* loading screen: "email me the preview instead" */
.wait-email { margin: 1.6rem auto 0; max-width: 420px; padding: 1.4rem 1.2rem; border: 1px solid var(--line, #d9d9d9); border-radius: 12px; text-align: center; }
.wait-email h2 { font-size: clamp(1.25rem, 3.5vw, 1.6rem); margin: 0 0 1rem; }
.wait-email__done { display: none; margin: 0; font-weight: 700; color: var(--ink, #12304a); }
.wait-email[data-done] h2, .wait-email[data-done] .btn { display: none; }
.wait-email[data-done] .wait-email__done { display: block; }
.gen-progress__go:not([hidden]) ~ .wait-email { display: none; }
.wait-email[data-done] .wait-email__form { display: none; }
.wait-email__form { text-align: left; }

/* "Save preview & show price" form (pop-up on the preview, inline while painting) */
.save-form h2 { font-size: clamp(1.3rem, 3.6vw, 1.7rem); line-height: 1.25; margin: 0 1.6rem 1.2rem 0; }
.save-form .field { margin-bottom: 1.1rem; }
.save-form label { font-weight: 800; display: block; margin-bottom: .25rem; }
.save-form label i { color: #d33; font-style: normal; }
.save-form small { display: block; color: var(--mute); font-size: .8rem; margin-bottom: .4rem; }
.save-form__opt { border: 0; padding: 0; margin: .2rem 0 1.2rem; }
.save-form__opt legend { font-weight: 800; margin-bottom: .5rem; line-height: 1.4; }
.save-form__opt label { font-weight: 400; display: flex; gap: .55rem; align-items: center; margin: .35rem 0; cursor: pointer; }
.save-dlg { border: 0; border-radius: 16px; padding: 1.8rem 1.6rem 1.6rem; width: min(520px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.25); position: relative; }
.save-dlg::backdrop { background: rgba(10, 30, 50, .45); }
.save-dlg__x { position: absolute; top: .7rem; right: .9rem; border: 0; background: none; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--mute); }

/* buy page */
.order { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 560px); gap: 2.6rem; justify-content: center; padding: 2rem 0 3.5rem; }
.order__cover > img { width: 100%; border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.18); position: sticky; top: 100px; }
/* the order page shows the finished cover with the book's title (same drawing as the preview page) */
.order__cover > .book { position: sticky; top: 100px; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.18); }
.order h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0 0 .3rem; }
.order__sub { color: var(--mute); margin: 0 0 1.8rem; }
.buy-cards { display: grid; gap: 1rem; margin-bottom: 1rem; }
.buy-card { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; text-align: left; font: inherit; color: var(--navy); background: #fff; border: 2px solid var(--navy); border-radius: 12px; padding: 1rem 1.2rem; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; }
.buy-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }
.buy-card--pop { background: var(--sun); border-color: var(--sun); margin-top: .9rem; }
.buy-card__pop { position: absolute; top: -.85rem; left: 1rem; background: var(--navy); color: #fff; font-size: .78rem; font-weight: 800; padding: .25rem .6rem; border-radius: 6px; }
.buy-card__name b { display: block; font-size: 1.15rem; }
.buy-card__name small { font-size: .84rem; opacity: .8; }
.buy-card__price { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: .2rem .6rem; text-align: right; }
.buy-card__price > b { font-size: 1.3rem; }
.buy-card__price s { opacity: .65; font-size: .92rem; }
.buy-card__off { background: rgba(0,0,0,.1); font-size: .74rem; font-weight: 800; padding: .15rem .45rem; border-radius: 5px; }
.buy-card__go { flex-basis: 100%; font-weight: 800; }
.order__cmp { margin: .4rem 0 1.4rem; }
.order__cmp summary { cursor: pointer; text-decoration: underline; color: var(--sky); font-weight: 700; }
.order__cmp p { margin: .6rem 0 0; color: var(--ink); }
.order__facts { background: #F4EFE7; border-radius: 12px; padding: .4rem 1.1rem; margin: 0 0 1.4rem; }
.order__facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.order__facts div:last-child { border-bottom: 0; }
.order__facts dd { margin: 0; font-weight: 800; text-align: right; }
.order__back { display: inline-block; margin-top: 1.2rem; font-weight: 800; color: var(--navy); }
@media (max-width: 760px) {
  .order { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 1rem; }
  .order__cover { width: 100%; max-width: 220px; margin: 0 auto; } /* the drawn cover has no width of its own: without this it shrinks to nothing on phones */
  .order__cover > img, .order__cover > .book { position: static; }
}

/* "Can't wait?" pop-up while painting */
.wait-pop h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); margin: 0 1.6rem .4rem 0; }
.wait-pop > p { color: var(--mute); margin: 0 0 1.2rem; }
.wait-pop__stay { display: block; margin: .9rem auto 0; color: var(--mute); }
.wait-pop__done { font-size: 1.1rem; padding: 1rem 1.5rem 0 0; }
.save-dlg[data-done] .wait-pop { display: none; }
.save-dlg[data-done] .wait-pop__done { display: block; }

.order__more { grid-column: 1 / -1; max-width: 940px; margin: 1rem auto 0; width: 100%; }
.order__more .perks { margin-bottom: 2rem; }
.order__more .ticks { margin-top: 1.6rem; }

/* product page buy box: title, ages, story, one big free-preview button (no price until after the preview) */
.pdp__title { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 .5rem; }
.pdp__ages { font-weight: 700; margin: 0 0 1rem; color: var(--navy); }
.pdp__blurb { font-size: 1.08rem; line-height: 1.6; margin: 0 0 1.6rem; color: var(--ink); }
.pdp__cta { font-size: 1.2rem; padding: 1.15rem 2.6rem; min-width: min(100%, 340px); }
.pdp .pdp__free { justify-content: flex-start; margin: .8rem 0 1.4rem; }
.pdp__more { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--navy); margin-bottom: 1.6rem; transition: box-shadow .2s ease; }
.pdp__more:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.pdp__more-covers { display: flex; }
.pdp__more-covers img { width: 46px; height: 46px; object-fit: cover; border-radius: 7px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); margin-left: -12px; }
.pdp__more-covers img:first-child { margin-left: 0; }
.pdp__more b { flex: 1; font-size: 1.05rem; }
.pdp__more > span:last-child { font-size: 1.6rem; line-height: 1; }

/* "Don't have time to wait?" sits right under the progress bar */
.gen-progress .wait-email { margin: 1.2rem auto 1.6rem; padding: 1rem 1.2rem; }
.gen-progress .wait-email h2 { font-size: 1.15rem; margin-bottom: .7rem; }

/* preview page: just the book, with the order button under it */
.reader { grid-template-columns: minmax(0, min(640px, 72vh)); justify-content: center; padding-top: 1.4rem; }
.reader__cta { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin: 1.4rem 0 1.6rem; text-align: center; }
.reader__cta .btn { min-width: min(100%, 320px); font-size: 1.1rem; }
.reader__links { font-size: .88rem; color: var(--mute); margin: 0; }
.gen-progress__go:not([hidden]) { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

.order__why { margin: 2.6rem 0 1rem; }
.order__end { text-align: center; margin: 2.6rem 0 1rem; padding: 2rem 1rem; background: #F4EFE7; border-radius: 16px; }
.order__end h2 { margin: 0 0 1.2rem; }
.order__end-btns { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
/* order page on phones: wide pieces (page strip, comparison table) scroll inside, never widen the page */
.order > * { min-width: 0; }
@media (max-width: 760px) { .order { grid-template-columns: minmax(0, 1fr); } .order__why .cmp, .order__why table { display: block; overflow-x: auto; } }

/* home page: photos of the books at home */
.home-photos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; margin-top: 2rem; }
.home-photos figure { flex: 0 1 calc((100% - 3.2rem) / 3); }
.home-photos figure { margin: 0; }
.home-photos img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; box-shadow: 0 12px 34px rgba(28, 53, 87, .14); display: block; }
.home-photos figcaption { margin-top: .7rem; font-weight: 700; color: var(--navy); font-size: .95rem; }
/* phones: one swipeable row instead of five tall photos stacked */
@media (max-width: 760px) {
  .home-photos { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; margin: 1.6rem -16px 0; padding: 0 16px 10px; -webkit-overflow-scrolling: touch; }
  .home-photos figure { flex: 0 0 78%; scroll-snap-align: center; }
}

/* reviews (real ones on the live site; examples only on test addresses) */
.rev-summary { margin: .4rem 0 0; color: var(--navy); font-size: 1.05rem; }
.rev-stars { color: #F5A623; letter-spacing: 2px; }
.rev-stars .off { color: #D9DEE4; }
.rev-example-note { display: inline-block; margin: .8rem 0 0; padding: .3rem .8rem; border: 1px dashed #E2483D; border-radius: 8px; color: #E2483D; font-size: .8rem; font-weight: 700; }
.rev-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 34px rgba(28, 53, 87, .12); text-align: left; display: flex; flex-direction: column; }
.rev-card img { border-radius: 0 !important; box-shadow: none !important; aspect-ratio: 4 / 3 !important; }
.rev-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.rev-card blockquote { margin: 0; font-weight: 700; color: var(--navy); line-height: 1.45; font-size: .98rem; }
.rev-card cite { font-style: normal; font-size: .85rem; color: var(--mute); margin-top: auto; }
.rev-card cite span { display: block; font-size: .8rem; color: var(--sky); font-weight: 700; margin-top: .15rem; }

.rev-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2rem; text-align: left; }
.rev-quote { margin: 0; background: #fff; border-radius: 16px; padding: 1.2rem 1.3rem; box-shadow: 0 8px 26px rgba(28, 53, 87, .09); display: flex; flex-direction: column; gap: .7rem; }
.rev-quote blockquote { margin: 0; color: var(--navy); font-weight: 700; line-height: 1.5; font-size: .98rem; }
.rev-quote cite { font-style: normal; margin-top: auto; font-size: .88rem; color: var(--navy); }
.rev-quote cite span { display: block; color: var(--mute); font-size: .78rem; font-weight: 600; margin-top: .1rem; }
@media (max-width: 900px) { .rev-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rev-quotes { grid-template-columns: 1fr; } }

/* ---- basket panel (Shopify cart; app.js renderCart) ---- */
.cart-open { overflow: hidden; }
.cart-drawer { position: fixed; inset: 0; z-index: 200; }
.cart-drawer__bg { position: absolute; inset: 0; background: rgba(15, 42, 69, .45); opacity: 0; transition: opacity .25s ease; }
.cart-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: #fff; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease; box-shadow: -12px 0 40px rgba(15, 42, 69, .18); }
.cart-drawer.open .cart-drawer__bg { opacity: 1; }
.cart-drawer.open .cart-drawer__panel { transform: none; }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid #F1E6D2; }
.cart-drawer__head h2 { margin: 0; font-size: 1.35rem; }
.cart-drawer__x { background: none; border: 0; font-size: 1.9rem; line-height: 1; cursor: pointer; color: #173B5E; padding: 0 .25rem; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: .5rem 1.25rem; }
.cart-line { display: grid; grid-template-columns: 72px 1fr auto; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid #F1E6D2; align-items: start; }
.cart-line img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; background: #FFF8EC; }
.cart-line__info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cart-line__info b { font-size: .98rem; color: #173B5E; }
.cart-line__info small { color: #5D6B78; font-size: .82rem; }
.cart-line__price { font-weight: 800; color: #173B5E; white-space: nowrap; }
.cart-line__qty { display: flex; align-items: center; gap: .45rem; margin-top: .45rem; }
.cart-line__qty button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #D9CDB8; background: #fff; cursor: pointer; font-size: 1rem; line-height: 1; color: #173B5E; }
.cart-line__qty span { min-width: 1.2rem; text-align: center; font-weight: 700; }
.cart-line__qty .cart-line__rm { width: auto; height: auto; border: 0; border-radius: 0; background: none; text-decoration: underline; font-size: .8rem; color: #5D6B78; margin-left: .4rem; }
.cart-drawer__empty { text-align: center; padding: 3rem 0; color: #5D6B78; }
.cart-drawer__foot { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid #F1E6D2; background: #FFF8EC; }
.cart-drawer__foot:empty { display: none; }
.cart-drawer__sum { display: flex; justify-content: space-between; font-size: 1.1rem; color: #173B5E; margin-bottom: .35rem; }
.cart-drawer__off { color: #2BA36B; font-weight: 700; font-size: .88rem; margin: .2rem 0; }
.cart-drawer__note { color: #5D6B78; font-size: .82rem; margin: .2rem 0 .8rem; }
.cart-drawer__more { display: block; margin: .7rem auto 0; }

/* preview: small "Sample" badge on each painted picture (public/js/preview.js) */
.page__art, .page--cover, #thumbs button > div { position: relative; }
.sample-badge { position: absolute; top: 10px; left: 10px; z-index: 3; background: rgba(23, 59, 94, .82); color: #fff; font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; pointer-events: none; }
#thumbs .sample-badge { top: 5px; left: 5px; font-size: .55rem; padding: 2px 6px; }
.sample-note { grid-column: 1 / -1; color: var(--mute); font-size: .9rem; margin: .4rem 0 .8rem; text-align: center; }

/* no page jumping (CLS): the header, footer and page bodies are drawn by script after the first paint, so their space is
   kept free until then (the styles are inside the page, so the first paint comes before the scripts) */
#site-header:empty { display: block; min-height: 144px; }
@media (min-width: 600px) { #site-header:empty { min-height: 124px; } }
#pdp:empty { display: block; min-height: 2300px; }
@media (min-width: 900px) { #pdp:empty { min-height: 1520px; } }
#order:empty, #reader:empty, #allbooks:empty, #ost:empty { display: block; min-height: 100vh; }
.pdp--shell { min-height: 2300px; }
@media (min-width: 900px) { .pdp--shell { min-height: 1520px; } }
/* book pages: the same "Sample" badge on the three sample pictures and their thumbnails */
.pdp__img, .pdp__thumbs button { position: relative; }
.pdp__thumbs .sample-badge { top: 4px; left: 4px; font-size: .5rem; padding: 2px 5px; }

/* book pages: last gallery square, "30 pages in total" */
.pdp__total { aspect-ratio: 1; border-radius: 22px; background: linear-gradient(160deg, #FFF3CC, #FFE7A8); display: grid; place-content: center; text-align: center; padding: 8%; color: var(--navy, #173B5E); }
.pdp__total b { display: block; font-family: var(--f-display, inherit); font-size: clamp(3.5rem, 12vw, 6rem); line-height: 1; }
.pdp__total span { display: block; font-weight: 800; font-size: 1.3rem; margin: .3rem 0 .8rem; }
.pdp__total small { display: block; font-size: .95rem; color: #3E4C5E; max-width: 22em; margin: 0 auto; }
.pdp__thumbs .pdp__total { border-radius: 10px; padding: 0; }
.pdp__thumbs .pdp__total b { font-size: 1.4rem; }
.pdp__thumbs .pdp__total span, .pdp__thumbs .pdp__total small { display: none; }
/* home hero: keep the picture area at its final size from the first paint (the slideshow and book are drawn by script) */
.hero__art { min-height: 600px; }
@media (max-width: 860px) { .hero__art { min-height: 356px; width: 100%; } }
/* basket: discount code box and applied codes */
.cart-code { display: flex; gap: .5rem; margin-bottom: .6rem; }
.cart-code input { flex: 1; min-width: 0; border: 1px solid #D9CDB8; border-radius: 999px; padding: .55rem .9rem; font: inherit; text-transform: uppercase; background: #fff; }
.cart-code .btn { padding: .5rem 1rem; }
.cart-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.cart-chip { display: inline-flex; align-items: center; gap: .3rem; background: #E3F5EC; color: #1C6B47; font-weight: 800; font-size: .8rem; padding: 3px 4px 3px 10px; border-radius: 999px; }
.cart-chip--bad { background: #FDE7EC; color: #A3123A; text-decoration: line-through; }
.cart-chip button { border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: inherit; padding: 0 4px; }
.cart-drawer__sum--disc { color: #2BA36B; font-size: .95rem; }

/* preview page after payment: the order instead of "Order now" */
.ordered { display: grid; gap: .8rem; justify-items: center; text-align: center; padding: 1.2rem 1rem; background: #F1FAF4; border-radius: 18px; }
.ordered__h { margin: 0; font-weight: 800; font-size: 1.15rem; color: #1E7A4C; }
.ordered__h small { color: var(--mute, #6B7785); font-weight: 600; margin-left: .3rem; }
.ordered__wait { margin: 0; max-width: 34em; color: #3E4C5E; line-height: 1.5; }
.ordered__wait .spinner { display: inline-block; width: 14px; height: 14px; margin-right: .5rem; vertical-align: -2px; border: 2px solid #CFE7D8; border-top-color: #1E7A4C; border-radius: 50%; animation: spin 1s linear infinite; }

/* preview: shown while the painted pictures download, so nothing half-loaded is ever on screen */
.pv-loading { display: grid; justify-items: center; gap: 1rem; padding: 4rem 1rem; text-align: center; color: #3E4C5E; font-weight: 700; }
.pv-loading .spinner { width: 34px; height: 34px; border: 3px solid #E8E2D6; border-top-color: #173B5E; border-radius: 50%; animation: spin 1s linear infinite; }

/* "Order without a preview" under the create form; highlighted when today's free previews are used up */
.order-direct { margin-top: 1rem; text-align: center; font-size: .95rem; color: var(--muted, #5b6b7d); }
.order-direct .link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 800; color: var(--navy, #1C3557); text-decoration: underline; cursor: pointer; }
.order-direct--hi { background: #FFF3CC; border-radius: 12px; padding: .8rem 1rem; }
.order__note { margin: .4rem 0 0; font-size: .95rem; color: var(--muted, #5b6b7d); }

/* one-page preview: the painting progress above the book (stays at 100% when done) */
.build { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: 1rem 1.2rem; }
.build .gen-progress__photo { width: 64px; height: 64px; flex: none; }
.build__main { flex: 1; min-width: 0; }
.build h1 { font-size: 1.25rem; margin: 0 0 .5rem; }
.build .bar { margin: 0; }
.build .bar__pct { display: block; font-size: .85rem; margin-top: .3rem; }
.build__email { margin: .4rem 0 0; font-size: .92rem; color: var(--muted, #5b6b7d); }
.build__email:empty { display: none; }
.page--painting .page__art { aspect-ratio: 1; }
.page__painting { text-align: center; color: var(--muted, #5b6b7d); margin: .6rem 0 0; font-weight: 700; }