/* DA C book page. Né de la maquette validée (v2/produit.src.html + produit-c.html, gen_theme.py), mais modifié ici depuis : ce fichier est la source. Ne pas régénérer. */
/* World: négatoscope. Cool film-room ground, lit tables for the books, X-ray cyan for the lens, Why? red for the single action. */
@property --r { syntax: "<length>"; inherits: true; initial-value: 0px; }

.dac-product {
  --ground: #E9EDF0;
  --panel: #FBFCFD;
  --ink: #10161C;
  --ink-2: #46525E;
  --line: #CDD5DB;
  --accent: #D3261D;
  --accent-ink: #FFFFFF;
  --lens: #1A93AF;
  --lens-soft: rgba(26,147,175,.13);
  --shadow: 16 28 40;
  --font: "Readex Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  color-scheme: light;
}

html[data-theme="dark"] body.dac .dac-product {
  --ground: #0D1217; --panel: #18212A; --ink: #E6ECF1; --ink-2: #A3AFBA; --line: #2A3641;
  --accent: #FF4B3E; --accent-ink: #160605; --lens: #5BD3EC; --lens-soft: rgba(91,211,236,.16); --shadow: 0 0 0; color-scheme: dark; }

.dac-product * { box-sizing: border-box; }

.dac-product button { color: inherit; font-family: inherit; }

.dac-product { scrollbar-color: var(--line) var(--ground); }

.dac-product { background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.7; }

.dac-product ::selection { background: var(--lens); color: var(--panel); }

.dac-product a { color: inherit; text-underline-offset: .28em; text-decoration-thickness: 1px; }

.dac-product :focus-visible { outline: 2px solid var(--lens); outline-offset: 3px; border-radius: 6px; }

.dac-product h1, .dac-product h2, .dac-product h3 { text-wrap: balance; margin: 0; font-weight: 700; letter-spacing: -0.01em; }

.dac-product p { margin: 0; }

.dac-product .wrap { max-width: 1240px; margin-inline: auto; padding-inline: 20px; }

.dac-product .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* nav */
html[data-theme="dark"] body.dac .dac-product .nav img.logo-light { display: none; }

html[data-theme="dark"] body.dac .dac-product .nav img.logo-dark { display: block; }
/* footer *//* the one action */
.dac-product .buy { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; border: 0; cursor: pointer; background: var(--accent); color: var(--accent-ink); font: 600 18px/1 var(--font); padding: 18px 28px; border-radius: 999px; box-shadow: 0 14px 26px -12px rgb(var(--shadow) / .45); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; white-space: nowrap; }

.dac-product .buy:hover { transform: translateY(-2px); box-shadow: 0 20px 30px -12px rgb(var(--shadow) / .5); }

.dac-product .buy:active { transform: scale(.98); }

.dac-product .ghost { display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1 var(--font); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 12px 18px; cursor: pointer; text-decoration: none; transition: background-color .2s, border-color .2s; }

.dac-product .ghost:hover { background: var(--panel); border-color: var(--ink-2); }

.dac-product .chip { font: 500 15px/1 var(--font); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }

.dac-product .chip:hover { border-color: var(--ink-2); }

.dac-product .chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }

.dac-product .price { display: flex; gap: 12px; align-items: baseline; font-variant-numeric: tabular-nums; }

.dac-product .price b { font-size: 26px; }

.dac-product .price s { color: var(--ink-2); font-size: 16px; }
/* viewer: one spread with scan reveal + magnifier */
.dac-product .film { position: relative; background: var(--panel); border-radius: 22px; padding: 16px; box-shadow: 0 30px 60px -30px rgb(var(--shadow) / .4), inset 0 0 0 1px var(--line); }

.dac-product .spread { position: relative; aspect-ratio: 2466 / 1666; border-radius: 6px; overflow: hidden; cursor: zoom-in; background: var(--ground); }

.dac-product .spread img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.dac-product .spread img.incoming { clip-path: inset(0 0 100% 0); }

.dac-product .spread.scanning img.incoming { animation: dac-p-reveal .8s cubic-bezier(.65,0,.35,1) forwards; }

.dac-product .scanbar { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--lens); box-shadow: 0 6px 18px 2px var(--lens-soft); opacity: 0; pointer-events: none; }

.dac-product .spread.scanning .scanbar { animation: dac-p-bar .8s cubic-bezier(.65,0,.35,1) forwards; }

@keyframes dac-p-reveal { to { clip-path: inset(0 0 0 0); } }

@keyframes dac-p-bar { 0% { opacity: 1; top: 0; } 92% { opacity: 1; } 100% { opacity: 0; top: 100%; } }

.dac-product .mag { position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 2px solid var(--lens); box-shadow: 0 18px 36px -8px rgb(var(--shadow) / .5); background-repeat: no-repeat; pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s cubic-bezier(.16,1,.3,1); }

.dac-product .spread:hover .mag.live { opacity: 1; transform: scale(1); }

@media (hover: none) {
.dac-product .mag { display: none; }
 }

@media (prefers-reduced-motion: reduce) {
.dac-product .scan, .dac-product .spread.scanning img.incoming, .dac-product .spread.scanning .scanbar { animation: none; }

.dac-product .book, .dac-product .cover, .dac-product .gutter, .dac-product .mag, .dac-product .buy, .dac-product .ghost { transition: none; }

}
/* Layout: the X-ray book on the lit table + a sticky buy box; then "this book in your child's programme": lesson list + spread viewer. */
.dac-product { --cw: clamp(220px, 21vw, 300px); }

.dac-product .crumbs { font-size: 14px; color: var(--ink-2); padding-block: 4px 18px; }

.dac-product .prod { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: start; }

.dac-product .visual { display: flex; flex-direction: column; gap: 16px; }

.dac-product .table { position: relative; width: calc(var(--cw) * 2 + 64px); max-width: 100%; background: var(--panel); border-radius: 28px; padding: 36px 32px; box-shadow: 0 30px 60px -28px rgb(var(--shadow) / .35), inset 0 0 0 1px var(--line); overflow: clip; display: flex; justify-content: center; }

.dac-product .stage { position: relative; flex: none; width: calc(var(--cw) * 2); height: calc(var(--cw) * 1.351); perspective: 2200px; direction: ltr; }

.dac-product .book { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateX(25%); transition: transform 1.1s cubic-bezier(.22,.9,.2,1); }

.dac-product .is-open .book { transform: translateX(0) scale(var(--open-scale, 1)); }

.dac-product .page { position: absolute; top: 0; width: 50%; height: 100%; object-fit: cover; display: block; }

.dac-product .page-l { left: 0; border-radius: 4px 0 0 4px; box-shadow: 0 22px 40px -18px rgb(var(--shadow) / .5); }

.dac-product .gutter { position: absolute; top: 0; left: calc(50% - 18px); width: 36px; height: 100%; background: linear-gradient(90deg, transparent, rgb(0 0 0 / .14) 50%, transparent); pointer-events: none; opacity: 0; transition: opacity .6s .5s; }

.dac-product .is-open .gutter { opacity: 1; }
/* interior pages are wider than a cover (0.78-0.85 vs 0.74): once open, show them whole, against the gutter */
.dac-product .is-open .page-l, .dac-product .is-open .back img { object-fit: contain; }
.dac-product .is-open .page-l { object-position: right center; box-shadow: none; filter: drop-shadow(0 18px 22px rgb(var(--shadow) / .35)); }
.dac-product .is-open .back img { object-position: left center; }
.dac-product .is-open .back { background: transparent; }

.dac-product .cover { --r: 0px; position: absolute; top: 0; left: 0; width: 50%; height: 100%; transform-origin: right center; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.22,.9,.2,1), --r .45s cubic-bezier(.16,1,.3,1); cursor: zoom-in; }

.dac-product .cover.lens-on { --r: clamp(66px, 7.6vw, 104px); }

.dac-product .is-open .cover { transform: rotateY(-180deg); cursor: pointer; }

.dac-product .is-open .cover.lens-on { --r: 0px; }

.dac-product .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border-radius: 4px; }

.dac-product .face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dac-product .front { box-shadow: 0 26px 46px -18px rgb(var(--shadow) / .55); }

.dac-product .back { transform: rotateY(180deg); border-radius: 0 4px 4px 0; }

.dac-product .xray, .dac-product .scan { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 40%), #000 calc(var(--r) - 1.5px), transparent var(--r));
          mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 40%), #000 calc(var(--r) - 1.5px), transparent var(--r)); }

.dac-product .scan { background: repeating-linear-gradient(0deg, transparent 0 3px, var(--lens-soft) 3px 4px); background-size: 100% 8px; animation: dac-p-drift 2.4s linear infinite; mix-blend-mode: multiply; }

@keyframes dac-p-drift { to { background-position: 0 8px; } }

.dac-product .rim { position: absolute; left: 0; top: 0; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; translate: calc(var(--px, 0px) - var(--r)) calc(var(--py, 0px) - var(--r)); border: 2px solid var(--lens); box-shadow: 0 14px 30px -6px rgb(var(--shadow) / .45), inset 0 0 0 6px rgb(255 255 255 / .18); pointer-events: none; }

.dac-product .is-open .rim { opacity: 0; }

.dac-product .rim::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--lens); opacity: .35; }

.dac-product .vis-row { display: flex; gap: 12px 18px; align-items: center; flex-wrap: wrap; justify-content: space-between; }

.dac-product .hint { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }

.dac-product .buybox { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 20px); display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 32rem; padding-top: 8px; }

.dac-product .buybox h1 { font-size: clamp(36px, 4vw, 56px); line-height: 1.12; }

.dac-product .buybox .short { font-size: 18px; color: var(--ink-2); }

.dac-product .facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 15px; color: var(--ink-2); }

.dac-product .facts span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--line); margin-inline-end: 16px; translate: 0 -3px; }

.dac-product .yrs { display: flex; flex-direction: column; gap: 10px; padding-block: 16px; border-block: 1px solid var(--line); }

.dac-product .yrs p { font-size: 15px; color: var(--ink-2); }

.dac-product .yrs div { display: flex; flex-wrap: wrap; gap: 6px; }

.dac-product .yrs a { font: 600 15px/1 var(--font); text-decoration: none; padding: 9px 12px; border-radius: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font-variant-numeric: tabular-nums; }

.dac-product .yrs a:hover { box-shadow: inset 0 0 0 1px var(--ink-2); }

.dac-product .buyrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.dac-product .save { font-size: 14px; font-weight: 700; color: var(--dac-coral-text); }
.dac-product .reassure { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.dac-product .reassure li { display: flex; gap: 10px; align-items: flex-start; }
.dac-product .reassure svg { flex: none; margin-top: 2px; color: var(--ink); }
.dac-product .reassure .more { padding-inline-start: 28px; }
.dac-product .reassure .dac-link { font-size: 14px; padding: 2px 0; }

.dac-product .durous { padding-block: 88px 24px; }

.dac-product .durous-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; max-width: 46rem; }

.dac-product .durous h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.15; }

.dac-product .durous-head p { color: var(--ink-2); font-size: 18px; }

.dac-product .filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }

.dac-product .lab { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 36px; align-items: start; }

.dac-product .lessons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.dac-product .lessons button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; transition: background-color .2s, box-shadow .2s; }

.dac-product .lessons button:hover { background: var(--panel); }

.dac-product .lessons button:focus-visible { outline: 2px solid var(--lens); }

.dac-product .lessons li.active button { background: var(--panel); box-shadow: inset 0 0 0 1px var(--ink-2), 0 10px 20px -16px rgb(var(--shadow) / .5); }

.dac-product .lessons li[hidden] { display: none; }

.dac-product .lessons img { width: 64px; aspect-ratio: 2466 / 1666; object-fit: cover; border-radius: 4px; display: block; }

.dac-product .lessons b { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; }

.dac-product .lessons small { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
/* the lesson title leads; the programme axis sits small above it */
.dac-product .lessons small.ax { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 2px; }

.dac-product .sup { color: var(--lens); }

.dac-product .viewer { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 20px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.dac-product .caption { display: flex; flex-direction: column; gap: 8px; padding-inline: 4px; }

.dac-product .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 15px; color: var(--ink-2); }

.dac-product .pill { font-size: 13px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--lens-soft); color: var(--ink); }

.dac-product .caption h3 { font-size: 24px; line-height: 1.3; }

.dac-product .caption p { color: var(--ink-2); max-width: 60ch; }

.dac-product .more { padding-block: 72px 8px; }

.dac-product .more h2 { font-size: clamp(24px, 2.8vw, 34px); margin-bottom: 22px; }

.dac-product .more-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.dac-product .more-row a { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }

.dac-product .more-row img { width: 100%; aspect-ratio: 724 / 1024; object-fit: cover; border-radius: 4px; box-shadow: 0 16px 26px -14px rgb(var(--shadow) / .5); transition: transform .45s cubic-bezier(.16,1,.3,1); display: block; }

.dac-product .more-row a:hover img { transform: translateY(-6px); }

.dac-product .more-row small { color: var(--ink-2); font-size: 14px; }

.dac-product .mbar { display: none; }

@media (max-width: 1060px) {
.dac-product .prod { grid-template-columns: minmax(0, 1fr); gap: 28px; }

.dac-product .visual { align-items: center; }

.dac-product .buybox { position: static; max-width: none; }

.dac-product .lab { grid-template-columns: minmax(0, 1fr); }

.dac-product { --cw: clamp(200px, 36vw, 300px); }

}

@media (max-width: 640px) {
.dac-product { --cw: min(66vw, 280px); }

.dac-product .table { width: 100%; padding: 24px 0; border-radius: 22px; }

.dac-product .visual { align-items: stretch; }

.dac-product .buyrow .buy { display: none; }

.dac-product .viewer { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); /* under the fixed header */ z-index: 2; background: var(--ground); margin-inline: -20px; padding: 10px 20px 8px; box-shadow: 0 12px 16px -14px rgb(var(--shadow) / .35); order: -1; }

.dac-product .film { padding: 8px; border-radius: 14px; }

.dac-product .caption h3 { font-size: 18px; }

.dac-product .caption p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; }

.dac-product .more-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dac-product .mbar { display: flex; position: fixed; inset: auto 0 0; z-index: 5; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--panel); box-shadow: 0 -10px 24px -14px rgb(var(--shadow) / .45), inset 0 1px 0 var(--line); }

.dac-product .mbar .buy { padding: 15px 22px; font-size: 17px; }

.dac-product .mbar .price { flex-direction: column; gap: 0; white-space: nowrap; }

.dac-product .mbar .price b { font-size: 21px; line-height: 1.2; }

.dac-product .mbar .price s { font-size: 13px; }

.dac-product footer { padding-bottom: 110px; }

}
/* DA C "Doux" skin for the book page: sky ground, white rounded cards with tinted depth, coral for the one
   action and for choices, Noto Kufi Arabic. The X-ray lens keeps its cyan: it is the tool, not the brand. */
@property --wash { syntax: "<color>"; inherits: true; initial-value: #dd8a3a; }

.dac-product {
  --ground: #EDF2F8; --panel: #FFFFFF; --card: #FFFFFF; --ink: #16213A; --ink-2: #54607A; --line: #D9E1EC; --soft: #E3EAF3;
  --accent: #FF6A4D; --accent-ink: #2B0C05; --coral: #FF6A4D; --coral-ink: #2B0C05; --shadow: 22 33 58;
  --font: "Noto Kufi Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
}

html[data-theme="dark"] body.dac .dac-product { --ground: #0F1524; --panel: #182136; --card: #182136; --ink: #E9EEF7; --ink-2: #9EAAC2; --line: #263250; --soft: #1E2944; --accent: #FF7A60; --coral: #FF7A60; --shadow: 0 0 0; }

.dac-product { scroll-behavior: smooth; scrollbar-color: color-mix(in srgb, var(--ink-2) 45%, transparent) var(--ground); caret-color: var(--coral); }

.dac-product { font-size: 16px; line-height: 1.75; }

.dac-product ::selection { background: var(--coral); color: var(--coral-ink); }

.dac-product :focus-visible { outline: 2.5px solid var(--coral); outline-offset: 3px; border-radius: 10px; }

.dac-product h1, .dac-product h2, .dac-product h3 { font-weight: 800; }

.dac-product p, .dac-product blockquote { text-wrap: pretty; }

.dac-product .wrap { max-width: 1260px; padding-inline: 22px; }
/* nav: the same floating pill as the home page */
.dac-product .crumbs { padding-block: 10px 22px; }
/* the lit table becomes the home hero card, washed with the book's own colour */
.dac-product .table { border-radius: 40px; box-shadow: 0 40px 80px -50px rgb(var(--shadow) / .55); transition: --wash 1s cubic-bezier(.4,0,.2,1);
  background: radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--wash) 22%, transparent), transparent 62%), radial-gradient(60% 80% at 0% 0%, color-mix(in srgb, var(--wash) 10%, transparent), transparent 70%), var(--card); }

.dac-product .buybox h1 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.3; letter-spacing: -0.01em; }

.dac-product .buybox .short { font-size: 17px; line-height: 1.85; }

.dac-product .yrs { border: 0; padding: 18px; border-radius: 26px; background: var(--card); box-shadow: 0 18px 34px -28px rgb(var(--shadow) / .55); }

.dac-product .yrs a { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border-radius: 15px; background: var(--soft); box-shadow: none; font: 700 18px/1 var(--font); transition: background-color .2s, color .2s, transform .3s cubic-bezier(.16,1,.3,1); }

.dac-product .yrs a:hover { background: var(--coral); color: var(--coral-ink); box-shadow: none; transform: translateY(-2px); }

.dac-product .buy { background: var(--coral); color: var(--coral-ink); font-weight: 700; box-shadow: 0 16px 26px -14px rgb(255 106 77 / .7); }

.dac-product .buy:hover { box-shadow: 0 22px 30px -14px rgb(255 106 77 / .75); }

.dac-product .ghost { background: var(--card); border: 0; font-weight: 600; box-shadow: 0 10px 24px -18px rgb(var(--shadow) / .55); }

.dac-product .ghost:hover { background: var(--card); transform: translateY(-2px); }

.dac-product .ghost:active { transform: scale(.97); }

.dac-product .chip { border: 1.5px solid var(--line); font-weight: 500; }

.dac-product .chip[aria-pressed="true"] { background: var(--card); color: var(--ink); border-color: var(--ink); }

.dac-product .price b { font-size: 28px; font-weight: 800; }
/* the book's guide (js/dac-product.js, cast) explains the book and the lens in a comic balloon; he stands left of it */
.dac-product .sayer { display: flex; align-items: flex-end; gap: 0; }

.dac-product .sayer .kid { order: 2; height: 150px; width: auto; flex: none; margin-inline-start: 2px; transform-origin: 50% 100%; filter: drop-shadow(0 10px 8px rgb(0 0 0 / .18)); }

.dac-product .sayer .kid.hop { animation: dac-p-kid-hop .7s cubic-bezier(.34,1.56,.64,1); }

@keyframes dac-p-kid-hop { 40% { transform: translateY(-12px) rotate(3deg); } }

.dac-product .bub { position: relative; order: 1; margin-bottom: 52px; background: #fff; color: #16213A; border: 3px solid #16213A; border-radius: 34px 28px 36px 30px / 30px 36px 28px 34px; padding: 12px 18px; font-size: 15px; font-weight: 600; animation: dac-p-bub-pop .6s cubic-bezier(.34,1.56,.64,1) .5s both; transform-origin: 0% 80%; }

.dac-product .bub svg.tl { position: absolute; left: -38px; bottom: 6px; width: 44px; height: 38px; transform: scaleX(-1); overflow: visible; }

.dac-product .bub svg.tl path { fill: #fff; stroke: #16213A; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }

.dac-product .bub .ico { display: none; }

@keyframes dac-p-bub-pop { 0% { opacity: 0; transform: scale(.4) rotate(-5deg); } 60% { opacity: 1; } 100% { transform: none; } }

.dac-product .vis-row { align-items: flex-end; }

/* both balloons keep their size: two lines kept for the guide, three for the reader; only the words change */
.dac-product .sayer .bub { width: 300px; min-height: calc(2 * 1.6em + 24px + 6px); display: flex; align-items: center; line-height: 1.6; margin-inline-end: 36px; }

.dac-product .sayer .bub span, .dac-product .rsay span { display: block; width: 100%; text-align: center; text-wrap: balance; }

.dac-product .vis-row .ghost { margin-bottom: 52px; }
/* lessons + viewer: soft cards, the active lesson ringed in coral */
.dac-product .durous h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.3; }

.dac-product .lessons { gap: 6px; }

.dac-product .lessons button { border-radius: 20px; padding: 10px 12px; transition: background-color .2s, box-shadow .2s, transform .3s cubic-bezier(.16,1,.3,1); }

.dac-product .lessons button:hover { background: var(--card); }

.dac-product .lessons li.active button { background: var(--card); box-shadow: inset 0 0 0 2px var(--coral), 0 16px 30px -22px rgb(var(--shadow) / .55); }

.dac-product .lessons img { border-radius: 10px; }

.dac-product .lessons button:focus-visible { outline: 2.5px solid var(--coral); }

.dac-product .sup { color: #C2462E; font-weight: 600; }

.dac-product .viewer { position: sticky; }

/* the reader: the book's second character looks over the viewer's top edge and comments the lesson picked */
.dac-product .rcast { position: absolute; bottom: 100%; inset-inline-end: 28px; display: flex; align-items: flex-end; gap: 36px; pointer-events: none; z-index: 1; }

.dac-product .rcast .rsay { margin: 0 0 74px; width: 232px; min-height: calc(3 * 1.55em + 24px + 6px); display: flex; align-items: center; font-size: 14px; line-height: 1.55; animation: none; opacity: 0; transition: opacity .3s .5s; }

.dac-product .rcast.in .rsay { opacity: 1; }

.dac-product .rcast .rbox { order: 2; position: relative; width: 160px; height: 140px; overflow: hidden; transform-origin: 50% 100%; }

.dac-product .rcast .rbox.hop { animation: dac-p-kid-hop .7s cubic-bezier(.34,1.56,.64,1); }

.dac-product .rcast .rwho { position: absolute; bottom: 0; inset-inline-end: 0; height: 150px; width: auto; transform: translateY(102%); transition: transform .8s cubic-bezier(.34,1.56,.64,1); filter: drop-shadow(0 8px 8px rgb(0 0 0 / .16)); }

.dac-product .rcast.in .rwho { transform: translateY(var(--sink, 12%)); }

.dac-product .film { border-radius: 32px; padding: 14px; background: var(--card); box-shadow: 0 34px 60px -36px rgb(var(--shadow) / .6); }

.dac-product .spread { border-radius: 20px; }

.dac-product .pill { background: color-mix(in srgb, var(--coral) 18%, var(--card)); font-weight: 600; }

.dac-product .caption h3 { font-size: 22px; line-height: 1.5; }
/* more books: the home shelf cards, tinted with each cover */
.dac-product .more h2 { font-size: clamp(26px, 2.8vw, 38px); }

.dac-product .more-row { gap: 16px; }

.dac-product .more-row a { background: color-mix(in srgb, var(--c, #888) 14%, var(--card)); border-radius: 26px; padding: 16px 16px 14px; transition: transform .45s cubic-bezier(.16,1,.3,1); }

.dac-product .more-row a:hover { transform: translateY(-5px); }

.dac-product .more-row a:hover img { transform: none; }

.dac-product .more-row img { border-radius: 10px; }

.dac-product .more-row span { font-weight: 700; text-align: center; }

.dac-product .more-row small { text-align: center; }

@media (max-width: 640px) {
.dac-product .wrap { padding-inline: 16px; }

.dac-product .nav { height: 68px; }

.dac-product .table { border-radius: 30px; }

.dac-product .sayer .kid { height: 112px; }

.dac-product .sayer .bub { width: auto; flex: 1 1 0; max-width: 250px; margin-inline-end: 28px; }

.dac-product .bub { font-size: 14px; margin-bottom: 40px; padding: 10px 14px; }

.dac-product .bub svg.tl { width: 34px; height: 30px; left: -30px; }

.dac-product .vis-row .ghost { margin-bottom: 40px; }

.dac-product .viewer { margin-inline: -16px; padding-inline: 16px; background: var(--ground); }

.dac-product .rcast { display: none; }

.dac-product .film { border-radius: 22px; padding: 8px; }

.dac-product .spread { border-radius: 14px; }

.dac-product .more-row a { padding: 10px 10px 8px; border-radius: 18px; }

.dac-product .mbar { background: var(--card); border-radius: 26px 26px 0 0; box-shadow: 0 -14px 30px -16px rgb(var(--shadow) / .5); }

}

@media (prefers-reduced-motion: reduce) {
.dac-product { scroll-behavior: auto; }

.dac-product .bub, .dac-product .sayer .kid.hop, .dac-product .rcast .rbox.hop { animation: none; }

.dac-product .rcast .rwho, .dac-product .rcast .rsay { transition: none; }

.dac-product .table { transition: none; }
 }


/* fixed theme header: sticky blocks start below it */
.dac-product .buybox, .dac-product .viewer { top: 104px; }
.dac-product { padding-top: 8px; }
@media (max-width: 640px) { .dac-product .viewer { top: 82px; } }
body.dac.has-mbar .wt-launch { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 641px) { body.dac.has-mbar .wt-launch { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }

/* phone: the pinned spread stays a glance, not a wall (the list keeps most of the screen) */
@media (max-width: 640px) {
  .dac-product .viewer .spread img { max-height: 26vh; width: 100%; object-fit: contain; }
  .dac-product .viewer #c-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.dac.has-mbar .wt-launch { right: auto; left: 16px; }
}
/* prices: one reading order everywhere (amount then currency, isolated from the Arabic around it) */
.dac-product .woocommerce-Price-amount { direction: rtl; unicode-bidi: isolate; }