/* micapoveste.ro — the public site. Colours and type follow the Koalo reference: navy, bright yellow, pink and a light
   blue on warm white; Rubik for headings, Manrope for text. Plain CSS, no build step. */
:root {
  /* the space between the parts of a text column (tag, heading, paragraphs, list, link): the same in every section */
  --stack: 18px;
  --navy: #243b79;
  --navy-2: #1d3166;
  --navy-3: #172854;
  --yellow: #ffdf2d;
  --pink: #ffc2fb;
  --mist: #eff2fa;
  --bg: #fdfcf8;
  --surface: #ffffff;
  --surface-2: #f5f4ef;
  --border: #e4e2dc;
  --border-2: #c9c6bd;
  --text: #243b79;
  --text-2: #575757;
  --text-3: #6b6b6b;
  --display: "Rubik", "Rubik Fallback", system-ui, -apple-system, sans-serif;
  --sans: "Manrope", "Manrope Fallback", system-ui, -apple-system, sans-serif;
  --wrap: 1240px;
  --ring: 0 0 0 3px rgba(36, 59, 121, 0.25);
  --shadow: 0 1px 2px rgba(20, 30, 60, 0.06), 0 14px 34px rgba(20, 30, 60, 0.1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: 24px; }
/* no top padding: the bar centres the logo, so the space above the logo equals the space down to the first card */
.main { display: flex; flex-direction: column; gap: clamp(64px, 7.5vw, 108px); padding-top: 0; padding-bottom: 24px; }

/* type */
.h1, .h2, .h3 { margin: 0; font-family: var(--display); font-weight: 600; color: var(--text); text-wrap: balance; }
.h1 { font-size: clamp(38px, 4.9vw, 68px); line-height: 1.04; letter-spacing: -0.02em; }
.h2 { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.14; letter-spacing: -0.01em; }
.h3 { font-size: 22px; line-height: 1.25; font-weight: 500; }
.lead { margin: 0; font-size: 19px; line-height: 1.6; color: var(--text-2); max-width: 34em; }
.sub { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 36em; }
.prose { max-width: 44em; font-size: 17px; line-height: 1.7; color: var(--text-2); }
.prose h2 { margin: 48px 0 12px; font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.15; color: var(--text); }
.prose h3 { margin: 32px 0 8px; font-family: var(--display); font-weight: 500; font-size: 22px; color: var(--text); }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--text); }
.prose a { color: var(--navy); font-weight: 600; text-underline-offset: 3px; }

/* tag, buttons */
.tag { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--mist); color: var(--navy); font-size: 14px; font-weight: 500; white-space: nowrap; }
.tag--white { background: var(--surface); }
.btn { --h: 52px; display: inline-flex; align-items: center; gap: 14px; height: var(--h); padding: 0 6px 0 24px; border: 1.5px solid transparent; border-radius: 999px; background: var(--navy); color: #fff; font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; }
.btn:hover { background: var(--navy-2); }
.btn:active { transform: scale(0.98); }
.btn__dot { display: grid; place-items: center; width: calc(var(--h) - 14px); height: calc(var(--h) - 14px); border-radius: 50%; background: #fff; color: var(--navy); transition: transform 220ms cubic-bezier(0.2, 0, 0, 1); }
.btn__dot svg { width: 18px; height: 18px; }
.btn:hover .btn__dot { transform: rotate(45deg); }
.btn--lg { --h: 58px; font-size: 17px; padding-left: 28px; }
.btn--yellow { background: var(--yellow); color: var(--navy); }
.btn--yellow:hover { background: #ffe75e; }
.btn--yellow .btn__dot { background: var(--navy); color: #fff; }
.btn--plain { --h: 48px; justify-content: center; padding: 0 22px; background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--plain:hover { background: var(--navy); color: #fff; }
.link { font-weight: 700; color: var(--navy); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }

/* header */
.bar { position: sticky; top: 0; z-index: 40; background: rgba(253, 252, 248, 0.9); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); box-shadow: 0 1px 0 transparent; transition: box-shadow 200ms ease; }
.bar.is-scrolled { box-shadow: 0 1px 0 var(--border); }
.bar__in { display: flex; align-items: center; gap: 24px; height: 76px; }
.bar__logo { flex: none; display: flex; }
.bar__logo img { width: 159px; height: 28px; }
.bar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bar__login { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 999px; color: var(--text-2); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color 140ms ease; }
.bar__login:hover { color: var(--navy); }
.bar__login-ico { display: none; width: 20px; height: 20px; }
.bar__login[aria-current="page"] { color: var(--navy); }
.bar__login[aria-current="page"]::after { transform: scaleX(1); }
.bar__login:focus-visible { box-shadow: none; outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 10px; }
.bar__toggle { display: none; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--navy); cursor: pointer; }
.bar__toggle:focus-visible { border-radius: 50%; }
.bar__toggle svg { width: 20px; height: 20px; }
.bar__toggle-close, .bar__toggle[aria-expanded="true"] .bar__toggle-open { display: none; }
.bar__toggle[aria-expanded="true"] .bar__toggle-close { display: block; }

/* main menu (components/header.html, content/menu.json): from 1024px two buttons open wide panels under the bar; below,
   the nav is a drawer and each panel a collapsible group. A panel is display: none until open, so its lazy pictures load
   only when someone opens it. */
.bar__nav { flex: 1; align-self: stretch; display: flex; justify-content: center; }
.nav { display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav__item { display: flex; align-items: center; }
/* Top items: no pill. The item turns navy and a short yellow bar grows under its label: full for the open panel and the
   current page or section, lighter on hover. Only one item shows it at a time: while a panel is open (html.mega-open) or
   the pointer is on another item, the others hide theirs. */
.nav__top { --bar-l: 12px; --bar-r: 12px; position: relative; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border: 0; border-radius: 0; background: none; color: var(--text-2); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color 140ms ease; }
.nav__top[aria-controls] { --bar-r: 28px; }
.bar__login { --bar-l: 12px; --bar-r: 12px; }
.nav__top::after, .bar__login::after { content: ""; position: absolute; left: var(--bar-l); right: var(--bar-r); bottom: 2px; height: 3px; border-radius: 3px; background: var(--yellow); opacity: 1; transform: scaleX(0); transform-origin: left center; transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), opacity 140ms ease; }
.nav__top[aria-current="page"], .nav__top.is-current, .nav__top[aria-expanded="true"] { color: var(--navy); }
.nav__top[aria-current="page"]::after, .nav__top.is-current::after, .nav__top[aria-expanded="true"]::after { transform: scaleX(1); }
@media (hover: hover) {
  .nav__top:hover, .bar__login:hover { color: var(--navy); }
  .nav__top:hover:not([aria-expanded="true"], [aria-current="page"], .is-current)::after, .bar__login:hover::after { opacity: 0.5; transform: scaleX(1); }
  .nav:has(.nav__top:hover) .nav__top:not(:hover, [aria-expanded="true"])::after { transform: scaleX(0); }
  .nav:has(.nav__top:hover) .nav__top:not(:hover, [aria-expanded="true"]) { color: var(--text-2); }
}
html.mega-open .nav__top:not([aria-expanded="true"])::after { transform: scaleX(0); }
html.mega-open .nav__top:not([aria-expanded="true"]) { color: var(--text-2); }
.nav__top:focus-visible { box-shadow: none; outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 10px; }
.nav__chev { width: 16px; height: 16px; margin-right: -4px; transition: transform 200ms ease; }
.nav__top[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__item--login { display: none; }
.mega { position: absolute; top: 100%; left: 0; right: 0; display: none; }
/* a light veil over the page while a panel is open (site.js sets html.mega-open); a click on it only closes the panel */
.bar::before { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 100vh; background: rgba(23, 40, 84, 0.14); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, visibility 0s linear 180ms; }
@media (min-width: 1024px) { html.mega-open .bar::before { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 180ms ease; } }
.nav__item.is-open > .mega { display: block; animation: mega-in 180ms cubic-bezier(0.2, 0, 0, 1); }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } }
.mega__box { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 28px; background: var(--surface); box-shadow: 0 2px 4px rgba(20, 30, 60, 0.04), 0 28px 64px rgba(20, 30, 60, 0.16); }
.mega__box--carte { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); }
.mcard { display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); overflow: hidden; border-radius: 20px; background: var(--navy); color: #fff; }
.mcard__img { width: 100%; height: 0; min-height: 100%; object-fit: cover; }
.mcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 24px 24px; }
.mcard__title { margin: 0; font-family: var(--display); font-size: 25px; font-weight: 600; line-height: 1.15; text-wrap: balance; }
.mcard__text { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.84); }
.mcard__price { margin: 4px 0 8px; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, 0.84); }
.mcard__price strong { display: block; font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--yellow); }
.mcard .btn { --h: 50px; margin-top: auto; }
.mcard .btn:focus-visible { border-radius: 999px; box-shadow: 0 0 0 3px #fff; }
.mega__side { display: flex; flex-direction: column; gap: 8px; padding: 6px 2px 2px; }
.mlinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; margin: 0; padding: 0; list-style: none; }
.mlink { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 14px; border-radius: 16px; color: var(--text); text-decoration: none; transition: background-color 140ms ease; }
.mlink[aria-current="page"] { background: var(--mist); }
@media (hover: hover) { .mlink:hover { background: var(--mist); } }
.mlink:focus-visible { border-radius: 16px; }
.mlink__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--mist); color: var(--navy); transition: background-color 140ms ease; }
.mlink[aria-current="page"] .mlink__ico { background: var(--yellow); }
@media (hover: hover) { .mlink:hover .mlink__ico { background: var(--yellow); } }
.mlink__ico svg { width: 20px; height: 20px; }
.mlink__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mlink__label { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--navy); }
.mlink__desc { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.mega__promise { display: flex; align-items: center; gap: 10px; margin: auto 0 0; padding: 12px 16px; border-radius: 14px; background: var(--surface-2); color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; }
.mega__promise:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega__promise svg { flex: none; width: 18px; height: 18px; }
.mega__box--cadouri { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 36px; padding: 26px 30px 30px; }
.mgroup { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mgroup__title { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.mthumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 4px; padding: 0; list-style: none; }
.mthumb { display: flex; flex-direction: column; gap: 2px; height: 100%; color: var(--text); text-decoration: none; }
.mthumb img { width: 100%; height: auto; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: 14px; object-fit: cover; background: var(--mist); transition: box-shadow 160ms ease; }
.mthumb:hover img, .mthumb[aria-current="page"] img { box-shadow: 0 0 0 3px var(--yellow); }
.mthumb:focus-visible { box-shadow: none; }
.mthumb:focus-visible img { box-shadow: var(--ring); }
.mthumb__label { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--navy); }
.mthumb:hover .mthumb__label { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.mthumb__desc { font-size: 13px; line-height: 1.4; color: var(--text-2); }
.mlist { display: flex; flex-direction: column; margin: 0 -10px; padding: 0; list-style: none; }
.mlist--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
.mlist a { display: block; padding: 7px 10px; border-radius: 10px; color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.35; text-decoration: none; }
.mlist a[aria-current="page"] { background: var(--mist); color: var(--navy); }
@media (hover: hover) { .mlist a:hover { background: var(--mist); color: var(--navy); } }
.mlist a:focus-visible { border-radius: 10px; }
.mhubs { display: flex; flex-direction: column; margin-top: auto; padding: 14px 18px; border-radius: 16px; background: var(--mist); }
.mhubs__title { margin: 0 0 4px; font-family: var(--display); font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--navy); }
.mhubs__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; color: var(--navy); font-size: 14px; font-weight: 700; line-height: 1.35; text-decoration: none; }
.mhubs__link:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.mhubs__link svg { flex: none; width: 16px; height: 16px; transition: transform 160ms ease; }
.mhubs__link:hover svg { transform: translateX(3px); }
/* the season's own top item (menu.json seasonal, T1024-47): Moș Crăciun's red with his hat, no badge; its words keep the red
   whatever the other items do on hover. In the bar: the hat and the words; in the drawer: the still, the words, one line. */
.nav__season { gap: 7px; }
.nav__season-text, .bar__season { color: #c1332f; }
.bar__season { display: none; align-items: center; gap: 7px; height: 42px; padding: 0 12px; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.bar__season:hover, .bar__season[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--yellow); text-underline-offset: 8px; }
.bar__season:focus-visible { box-shadow: none; outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 10px; }
.nav__season-hat { flex: none; width: 22px; height: 22px; margin-top: -3px; }
.nav__season-img, .nav__season-short, .nav__season-desc { display: none; }
.mthumb--season .mthumb__label { color: #c1332f; }
/* no JS: the panels still open on hover and keyboard focus */
@media (min-width: 1024px) { html:not(.js) .nav__item:hover > .mega, html:not(.js) .nav__item:focus-within > .mega { display: block; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .bar__in { gap: 16px; }
  .nav__top { --bar-l: 10px; --bar-r: 10px; padding: 0 10px; }
  .nav__top[aria-controls] { --bar-r: 26px; }
  .bar__login { width: 42px; padding: 0; border: 1px solid var(--border); background: var(--surface); color: var(--navy); }
  .bar__login::after { display: none; }
  .bar__login:hover { border-color: var(--navy); }
  .bar__login:focus-visible { border-radius: 50%; }
  .bar__login-ico { display: block; }
  .bar__login-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .mega__box--carte { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .mcard { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); }
  .mcard__body { padding: 22px 20px 20px; }
  .mcard__title { font-size: 23px; }
  .mega__box--cadouri { gap: 8px 24px; padding: 22px 22px 26px; }
  .bar__season { gap: 6px; padding: 0 8px; }
  .bar__season .nav__season-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .bar__season .nav__season-short { display: inline; }
}
/* the bar like a shop's (owner, 5 Oct 2026, as on the Crăciun sample): the menu on the left, the logo in the middle,
   order tracking and sign-in as icons beside the button. The logo stays centred while both sides fit; on a narrow
   screen it gives way instead of overlapping the menu. Below 1024px the usual bar with its drawer. */
@media (min-width: 1024px) {
  .bar__in { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  .bar__nav { grid-column: 1; grid-row: 1; justify-content: flex-start; margin-left: -12px; }
  .bar__logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .bar__logo img { width: 171px; height: 30px; }
  .bar__actions { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; gap: 4px; }
  .bar__login { width: 44px; padding: 0; border: 0; background: none; color: var(--text-2); }
  .bar__login:hover { color: var(--navy); }
  .bar__login:focus-visible { border-radius: 50%; }
  .bar__login::after { display: none; }
  .bar__login-ico { display: block; width: 24px; height: 24px; }
  .bar__login-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .nav__item--link, .nav__item--season { display: none; }
  .bar__season { display: inline-flex; }
  .bar__login-ico { stroke-width: 1.5; }
  .bar__track { width: auto; padding: 0 12px; }
  .bar__track::after { display: block; }
  .bar__track .bar__login-ico { display: none; }
  .bar__track .bar__login-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .bar__logo img { width: 153px; height: 27px; }
  /* with the season's link in the bar, „Urmărește comanda” becomes its icon here, like „Intră în cont” */
  .bar__track--season { width: 44px; padding: 0; }
  .bar__track--season::after { display: none; }
  .bar__track--season .bar__login-ico { display: block; }
  .bar__track--season .bar__login-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (max-width: 1023px) {
  .bar__login { display: none; }
  .bar__toggle { display: grid; }
  .bar__nav { position: absolute; top: 100%; left: 0; right: 0; display: none; height: calc(100vh - 76px); height: calc(100dvh - 76px); padding: 4px 24px 48px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--border); background: var(--bg); }
  html.menu-open .bar__nav { display: block; }
  html.menu-open, html.menu-open body { overflow: hidden; }
  .nav { flex-direction: column; gap: 0; max-width: 720px; margin: 0 auto; }
  .nav__item { display: block; border-bottom: 1px solid var(--border); }
  .nav__item--login { display: block; border-bottom: 0; }
  .nav__item--track { border-bottom: 1px solid var(--border); }
  .nav__top { justify-content: space-between; width: 100%; height: 64px; padding: 0 4px; border-radius: 0; color: var(--text); font-family: var(--display); font-size: 20px; font-weight: 500; }
  .nav__top::after { display: none; }
  .nav__top[aria-current="page"], .nav__top.is-current, .nav__top[aria-expanded="true"], html.mega-open .nav__top:not([aria-expanded="true"]), .nav:has(.nav__top:hover) .nav__top:not(:hover, [aria-expanded="true"]) { color: var(--navy); }
  .nav__top:focus-visible { outline-offset: -2px; border-radius: 12px; }
  .nav__chev { width: 22px; height: 22px; margin-right: 0; }
  .nav__season { justify-content: flex-start; gap: 14px; height: auto; min-height: 64px; padding: 10px 4px; }
  .nav__season-hat { display: none; }
  .nav__season-img { display: block; flex: none; width: 72px; height: 54px; border-radius: 10px; object-fit: cover; }
  .nav__season-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; white-space: normal; }
  .nav__season-desc { display: block; font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--text-2); }
  .mega { position: static; padding: 0 0 22px; }
  .mega .mega__in { padding-inline: 0; }
  .mega__box, .mega__box--cadouri { display: flex; flex-direction: column; gap: 18px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .mcard { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .mcard__body { gap: 8px; padding: 20px 18px; }
  .mcard__title { font-size: 21px; }
  .mcard__price { margin: 2px 0 6px; }
  .mcard__price strong { font-size: 24px; }
  .mega__side { padding: 0; }
  .mlinks { margin: 0 -8px; }
  .mlinks__dup { display: none; }
  .mlink { align-items: center; min-height: 64px; padding: 10px 8px; }
  .mthumbs { gap: 10px; }
  .mlist a { padding: 12px 10px; font-size: 16px; }
  .mhubs { margin-top: 8px; }
  .mhubs__link { min-height: 44px; font-size: 15px; }
}
@media (min-width: 641px) and (max-width: 1023px) { .mgroup .mlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; } .mcard { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
@media (max-width: 640px) {
  .bar__in { height: 64px; gap: 12px; } .bar__logo img { width: 142px; height: 25px; } .wrap { padding-inline: 16px; }
  .bar__nav { height: calc(100vh - 64px); height: calc(100dvh - 64px); padding-inline: 16px; }
  .mlinks { grid-template-columns: minmax(0, 1fr); }
  .mcard { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
  .mthumb__desc { display: none; }
  .mthumb__label { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__item.is-open > .mega { animation: none; }
  .bar::before { transition: none; }
  .nav__top, .nav__top::after, .bar__login, .bar__login::after, .nav__chev, .mlink, .mlink__ico, .mthumb img, .mhubs__link svg { transition: none; }
}

/* shared section heads and panels */
.head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack); margin-bottom: 48px; }
.head--center { align-items: center; text-align: center; }
.head--center .sub { max-width: 30em; }
.head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; }
.head--split > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack); max-width: 700px; }
.head--split .sub { max-width: 400px; font-size: 16px; }
.panel { border-radius: 28px; padding: clamp(28px, 5vw, 64px); }
.panel--mist { background: var(--mist); }
.panel--pink { background: var(--pink); }
.panel--white { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
@media (max-width: 1080px) { .head--split { flex-direction: column; align-items: flex-start; gap: var(--stack); } }
@media (max-width: 720px) { .panel { border-radius: 22px; } }

/* page hero (inner pages) */
.phero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: 32px; background: var(--mist); }
.phero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack); }
.phero .hero__subtitle { margin-top: -6px; font-size: clamp(22px, 2.3vw, 30px); }
.phero__art img { width: 100%; border-radius: 16px; }
.crumbs { margin: 0 0 4px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--text-3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: 0.6; }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
@media (max-width: 900px) { .phero { grid-template-columns: 1fr; } }

/* home hero */
.hero__card { position: relative; display: grid; grid-template-columns: 1.25fr 0.95fr; gap: 40px; align-items: center; min-height: 620px; padding: 56px 56px 56px 64px; border-radius: 32px; background: var(--mist); overflow: hidden; }
.hero__text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hero__subtitle { margin: -8px 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.3vw, 31px); line-height: 1.15; letter-spacing: -0.01em; color: var(--navy); text-wrap: balance; }
/* the homepage h1 is the searched phrase „Cărți personalizate pentru copii”: two lines beside the books, never three */
.hero .h1 { font-size: clamp(34px, 4.1vw, 56px); }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 6px; }
.hero__points { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--text-2); }
.hero__spec { margin: 2px 0 0; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-3); }
.hero__points li { display: flex; align-items: flex-start; gap: 8px; }
/* the dot sits on the first line when a point wraps */
.hero__points li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: calc(0.8em - 4px); border-radius: 50%; background: var(--navy); }
.hero__art { position: relative; height: 100%; min-height: 480px; }
.pin { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: 999px; background: var(--surface); color: var(--navy); font-size: 13px; font-weight: 700; box-shadow: 0 8px 20px rgba(20, 30, 60, 0.16); white-space: nowrap; }
.pin::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--yellow); }
/* The cover deck: two books, two styles. Positions are percentages of a box with a fixed shape, so the one behind can
   travel to the front on a plain transition, and at every width the back cover keeps its title and most of its picture
   in view: the covers overlap in one corner, not across the middle. */
.deck { min-height: 0; width: 100%; max-width: 430px; aspect-ratio: 5 / 6.3; justify-self: center; align-self: center; }
.deck__card { position: absolute; margin: 0; transition: left 700ms cubic-bezier(.2, .8, .2, 1), top 700ms cubic-bezier(.2, .8, .2, 1), width 700ms cubic-bezier(.2, .8, .2, 1), rotate 700ms cubic-bezier(.2, .8, .2, 1); }
/* the books are cut-out hardcover photos (img/carte/carte-*.webp, transparent): the shadow follows the book */
.deck__card img { display: block; width: 100%; filter: drop-shadow(0 28px 30px rgba(20, 30, 60, 0.24)); }
.deck__card.is-front { left: 0; top: 25%; width: 72%; rotate: -4deg; z-index: 2; }
.deck__card.is-back { left: 38%; top: 3%; width: 62%; rotate: 7deg; z-index: 1; cursor: pointer; }
.deck__card.is-back img { filter: drop-shadow(0 20px 24px rgba(20, 30, 60, 0.18)); }
.deck__card .pin { transition: opacity 300ms ease; }
.deck__card.is-back .pin { opacity: 0; }
.pin--arthur { left: 56%; top: 80%; }
.pin--bubi { left: -5%; top: 56%; }
.deck__switch { position: absolute; right: 0; bottom: 0; z-index: 3; display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: var(--surface); box-shadow: 0 10px 24px rgba(20, 30, 60, 0.14); }
.deck__style { border: 0; border-radius: 999px; padding: 8px 14px; background: transparent; color: var(--navy); font: 700 13px/1 var(--sans); cursor: pointer; }
.deck__style[aria-pressed="true"] { background: var(--navy); color: #fff; }
.deck__style:focus-visible { outline: none; box-shadow: var(--ring); }
@media (prefers-reduced-motion: reduce) { .deck__card, .deck__card .pin { transition: none; } }
@media (max-width: 1080px) {
  .hero__card { grid-template-columns: 1fr; padding: 48px 40px 40px; min-height: 0; }
  .hero__art { min-height: 0; }
  .deck { max-width: 460px; }
}
@media (max-width: 720px) {
  .hero__card { padding: 32px 22px 28px; border-radius: 24px; }
  .lead { font-size: 17px; }
  .deck { max-width: 340px; }
  .pin { font-size: 12px; padding: 5px 10px 5px 8px; }
  .deck__style { padding: 7px 11px; font-size: 12px; }
}

/* The styles strip: every live style sliding by on its own, across the full width of the page, faded at both ends like
   the reviews. The track holds the list twice and moves by exactly one copy (half its width plus half a gap), so the loop
   has no seam. With reduced motion it stands still and scrolls by hand. */
.stylesx { display: flex; flex-direction: column; }
.stylestrip { overflow: hidden; padding: 6px 0 14px; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.stylestrip__track { --gap: 24px; display: flex; gap: var(--gap); width: max-content; animation: stylestrip 80s linear infinite; }
.stylecard { flex: none; width: 260px; margin: 0; }
.stylecard img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.stylecard__text { display: grid; gap: 3px; padding: 14px 4px 0; }
.stylecard__text strong { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--navy); }
.stylecard__text span { font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
@keyframes stylestrip { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
/* the home page's styles: four large cards, the rest in the same grid behind „Vezi toate” */
.stylegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.stylegrid .stylecard { width: auto; }
.stylesx__more { margin-top: 28px; }
.stylesx__more > summary { display: table; margin: 0 auto; cursor: pointer; list-style: none; }
.stylesx__more > summary::-webkit-details-marker { display: none; }
.stylesx__more[open] > summary { margin-bottom: 28px; }
@media (max-width: 900px) { .stylegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 560px) {
  .stylestrip__track { --gap: 16px; animation-duration: 60s; }
  .stylecard { width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .stylestrip { overflow-x: auto; scrollbar-width: none; }
  .stylestrip__track { animation: none; padding-inline: 24px; }
  .stylestrip__track > [aria-hidden="true"] { display: none; }
}

/* Languages (home): the words on the left, an order with copies in three languages on the right. */
.langs { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.langs__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack); }
.langs .traits { grid-template-columns: 1fr; gap: 16px; }
.langs__list { margin: 2px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-3); }
.langs__order { margin: 0; justify-self: center; width: 100%; max-width: 420px; }
.order { padding: 24px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); rotate: 2deg; }
.order__top { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.order__cover { width: 84px; height: 84px; border-radius: 4px 8px 8px 4px; box-shadow: 0 10px 22px rgba(20, 30, 60, 0.18); }
.order__top strong { display: block; font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--navy); }
.order__top span { font-size: 13.5px; color: var(--text-3); }
.order__lines { margin: 0; padding: 8px 0 14px; list-style: none; }
.order__lines li { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 14px; padding: 11px 0; font-size: 16px; color: var(--text); }
.order__lines li + li { border-top: 1px dashed var(--border); }
.order__code { display: grid; place-items: center; height: 30px; border-radius: 8px; background: var(--mist); color: var(--navy); font: 700 13px/1 var(--sans); letter-spacing: 0.04em; }
.order__lines b { font-family: var(--display); font-size: 18px; line-height: 1; color: var(--navy); }
.order__total { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--yellow); color: var(--navy); font-size: 14.5px; font-weight: 700; text-align: center; }
@media (max-width: 900px) { .langs { grid-template-columns: 1fr; gap: 40px; } .order { rotate: none; } }

/* about + facts */
.about { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.about__statement { margin: 0; max-width: 34em; font-size: clamp(20px, 2.2vw, 27px); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; text-wrap: balance; }
.facts { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 24px; width: 100%; align-items: center; }
.fact { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 20px; color: var(--navy); }
.fact--yellow { background: var(--yellow); rotate: -1.5deg; }
.fact--pink { background: var(--pink); rotate: 1.5deg; }
.fact--navy { gap: 0; padding: 12px 12px 26px; background: var(--navy); color: #fff; rotate: -2.5deg; box-shadow: 0 24px 50px rgba(20, 30, 60, 0.18); }
.fact__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 35%; border-radius: 12px; }
.fact__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 0; }
.fact__n { margin: 0; font-family: var(--display); font-size: 60px; font-weight: 600; line-height: 1; }
.fact__title { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 500; line-height: 1.2; }
.fact__text { margin: 0; font-size: 15px; line-height: 1.55; opacity: 0.9; }
@media (max-width: 900px) {
  .facts { grid-template-columns: 1fr; gap: 16px; }
  .fact, .fact--navy, .fact--yellow, .fact--pink { rotate: none; }
  .fact__n { font-size: 52px; }
}

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0 0 56px; list-style: none; }
.step { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 28px; border-radius: 20px; color: var(--navy); }
.step:nth-child(1) { background: var(--mist); rotate: -2deg; }
.step:nth-child(2) { background: var(--yellow); translate: 0 32px; rotate: 1.5deg; }
.step:nth-child(3) { background: var(--pink); rotate: -1.5deg; }
.step:nth-child(4) { background: var(--navy); color: #fff; translate: 0 32px; rotate: 2deg; }
.step__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.step__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); }
.step:nth-child(1) .step__icon { background: #fff; }
.step:nth-child(4) .step__icon { background: rgba(255, 255, 255, 0.12); }
.step__icon svg { width: 24px; height: 24px; }
.step__n { font-family: var(--display); font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; opacity: 0.22; }
.step__title { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 500; line-height: 1.2; }
.step__text { margin: 0; font-size: 15px; line-height: 1.55; opacity: 0.88; }
@media (max-width: 1080px) { .steps { grid-template-columns: repeat(2, 1fr); padding-bottom: 32px; } }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; gap: 14px; padding-bottom: 0; } .step, .step:nth-child(n) { rotate: none; translate: none; } .step__top { margin-bottom: 12px; } }

/* reader: book tabs above the flip book */
.reader { display: flex; flex-direction: column; gap: 16px; }
.reader__tabs { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); max-width: 100%; overflow-x: auto; }
.reader__tab { height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.reader__tab[aria-selected="true"] { background: var(--navy); color: #fff; }
.reader__note { margin: 0; font-size: 15px; color: var(--text-2); }
.reader__words { margin-top: 14px; font-size: 15px; color: var(--text-2); }
.reader__words > summary { cursor: pointer; font-weight: 700; color: var(--navy, #243B79); }
.reader__pages { margin-top: 12px; display: grid; gap: 12px; max-width: 68ch; }
.reader__page p { margin: 0 0 4px; }

/* characters */
.chars { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.facts + .chars { margin-top: 72px; }
@media (max-width: 640px) { .facts + .chars { margin-top: 48px; } }
.chars__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack); }
.traits { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin: 14px 0 0; padding: 0; list-style: none; }
.trait { display: flex; gap: 12px; }
.trait__check { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: var(--navy); color: #fff; }
.trait__check svg { width: 14px; height: 14px; }
.trait__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.trait__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.chars__art { display: flex; flex-direction: column; gap: 16px; }
.chars__art figure { margin: 0; }
.chars__scene img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 20px; }
.chars__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chars__pics img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
@media (max-width: 1080px) { .chars { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .traits { grid-template-columns: 1fr; } }

/* plans */
.plans__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; }
.plan { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 28px; border-radius: 20px; background: var(--surface); }
.plan--main { padding: 12px; gap: 0; justify-content: flex-start; }
.plan__top { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; border-radius: 14px; background: var(--navy); color: #fff; }
.plan__badge { position: absolute; right: 20px; top: 20px; padding: 5px 12px; border-radius: 999px; background: var(--surface); color: var(--navy); font-size: 13px; font-weight: 700; }
.plan__name { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 500; }
.plan__note { margin: 0; font-size: 15px; line-height: 1.5; opacity: 0.9; max-width: 26em; }
.plan__price { margin: 8px 0 6px; font-family: var(--display); font-size: 46px; font-weight: 600; line-height: 1; }
.plan__price span { font-family: var(--sans); font-size: 16px; font-weight: 600; opacity: 0.75; }
.plan__list { display: grid; gap: 12px; margin: 0; padding: 24px 20px 16px; list-style: none; font-size: 15px; }
.plan__list li { display: flex; align-items: center; gap: 10px; }
.plan__list svg { flex: none; width: 16px; height: 16px; color: var(--navy); }
.plans__side { display: grid; gap: 20px; }
/* beside a long column of cards the featured plan keeps its own height and stays in view, instead of an empty white box */
@media (min-width: 901px) { .plan--main { align-self: start; position: sticky; top: 96px; } }
.plans__foot { margin: 18px 0 0; text-align: center; font-size: 14.5px; color: var(--text-2); }
@media (max-width: 900px) { .plans__grid { grid-template-columns: minmax(0, 1fr); } }
/* a phone: the badge above the name instead of over it, the button as wide as the card (it does not wrap) */
@media (max-width: 520px) {
  .plan--main { padding: 8px; }
  .plan__top { padding: 22px 16px; }
  .plan__badge { position: static; }
  .plan__top .btn { align-self: stretch; justify-content: space-between; padding-left: 20px; }
}
@media (max-width: 480px) { .panel { padding: 22px 16px; } }

/* cta with the watching face */
.cta { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: center; }
.cta__face { width: 100%; max-width: 360px; justify-self: center; }
.cta__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack); }
.cta__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 8px; }
@media (max-width: 1080px) { .cta { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .cta__face { max-width: 240px; } }

/* faq */
.faq { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.faq__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; position: sticky; top: 110px; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item { border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); transition: background-color 160ms ease; }
.faq__item[open] { background: var(--yellow); box-shadow: none; }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { margin: 0; font: inherit; }
.faq__plus { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: #fff; transition: transform 200ms ease; }
.faq__plus::after { transform: rotate(90deg); }
.faq__item[open] .faq__plus::after { transform: rotate(0); }
.faq__item p { margin: 0; padding: 0 22px 22px; font-size: 16px; line-height: 1.6; color: var(--text-2); max-width: 40em; }
.faq__item[open] p { color: var(--navy); }
@media (max-width: 1080px) { .faq { grid-template-columns: 1fr; } .faq__intro { position: static; } }

/* legal pages and the cookie notice */
.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
.legal__toc { position: sticky; top: 100px; padding: 20px 22px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.legal__toc-head { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--text-3); }
.legal__toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.legal__toc a { display: block; padding: 6px 10px; margin: 0 -10px; border-radius: 10px; color: var(--text-2); font-size: 15px; font-weight: 600; text-decoration: none; }
.legal__toc a:hover { color: var(--navy); background: var(--mist); }
.legal__body { min-width: 0; max-width: 46em; }
.legal__body > h2:first-of-type, .legal__date + h2 { margin-top: 8px; }
.legal__body h2, .legal__box { scroll-margin-top: 96px; }
.legal__date { font-size: 14px; color: var(--text-3); }
.legal__body code { font-size: 0.9em; padding: 1px 6px; border-radius: 6px; background: var(--mist); color: var(--text); }
.legal__box { margin: 44px 0; padding: clamp(22px, 3vw, 36px); border-radius: 24px; background: var(--mist); }
.legal__box h2 { margin-top: 0; }
.legal__box h3 { margin-top: 24px; font-size: 19px; }
.legal__box > :last-child { margin-bottom: 0; }
.legal__table { margin: 0 0 16px; overflow-x: auto; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--border); background: var(--surface); }
.legal__table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.legal__table th, .legal__table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.legal__table th { font-weight: 700; color: var(--text); background: var(--bg); }
.legal__table tr:last-child td { border-bottom: 0; }
.legal__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); }
@media (max-width: 900px) { .legal { grid-template-columns: minmax(0, 1fr); gap: 28px; } .legal__toc { position: static; } }
.foot__legal .foot__doc { color: #fff; font-weight: 600; }
.cookienote { position: fixed; left: 16px; bottom: 16px; z-index: 50; display: flex; align-items: center; gap: 14px; max-width: min(460px, calc(100vw - 32px)); padding: 12px 12px 12px 18px; border-radius: 18px; background: var(--surface); color: var(--text-2); font-size: 14px; line-height: 1.45; box-shadow: 0 12px 32px rgba(20, 30, 60, 0.16), inset 0 0 0 1px var(--border); }
.cookienote[hidden] { display: none; }
.cookienote p { margin: 0; }
.cookienote a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; }
.cookienote__ok { flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.cookienote__ok:hover { background: var(--navy-2); }
.cookienote__actions { flex: none; display: flex; gap: 8px; }
.cookienote__no { flex: none; height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }
.cookienote__no:hover { border-color: var(--navy); }
button.link { padding: 0; border: 0; background: none; font-family: inherit; font-size: inherit; cursor: pointer; }
.foot__btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .cookienote { flex-direction: column; align-items: stretch; } .cookienote__actions > * { flex: 1; } }
@media (max-width: 480px) { .cookienote { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
/* the choice with analytics: a modal over the dimmed page, a bottom sheet on a phone (cookie_notice.html) */
.cookiemodal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 30, 60, 0.45); }
.cookiemodal[hidden] { display: none; }
body:has(.cookiemodal:not([hidden])) { overflow: hidden; }
.cookiemodal .cookienote { position: static; flex-direction: column; align-items: stretch; gap: 18px; max-width: 440px; padding: 22px; font-size: 15px; outline: none; }
.cookiemodal .cookienote__actions > * { flex: 1; height: 46px; }
@media (max-width: 480px) { .cookiemodal { align-items: flex-end; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); } .cookiemodal .cookienote { max-width: none; width: 100%; } }

/* footer */
.foot { display: flex; flex-direction: column; gap: 48px; padding: clamp(28px, 5vw, 64px); border-radius: 32px; background: var(--navy); color: #fff; }
.foot__top { display: grid; grid-template-columns: 1fr 1.7fr; gap: 40px; }
.foot__brand { display: flex; flex-direction: column; gap: 26px; }
.foot__logo { width: 225px; height: 40px; }
.foot__line { margin: 0; max-width: 16em; font-family: var(--display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.15; }
.foot__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot__reach { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 17px; font-weight: 600; text-decoration: none; }
.foot__reach svg { flex: none; opacity: 0.7; }
.foot__reach:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot__col { display: flex; flex-direction: column; gap: 12px; }
.foot__head { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, 0.65); }
.foot__col a { color: #fff; text-decoration: none; }
.foot__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.foot__bottom p { margin: 0; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot__legal a { color: inherit; }
.foot__legal a:hover { color: #fff; }
@media (max-width: 900px) { .foot__top { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .foot__cols { grid-template-columns: 1fr 1fr; gap: 28px 24px; } }

/* cards grid (inner pages) */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.card--mist { background: var(--mist); box-shadow: none; }
.card--yellow { background: var(--yellow); box-shadow: none; }
.card--pink { background: var(--pink); box-shadow: none; }
.card__title { margin: 0; font-family: var(--display); font-size: 21px; font-weight: 500; }
.card__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.card--yellow .card__text, .card--pink .card__text { color: var(--navy); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

/* reveal (site.js) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms cubic-bezier(0.2, 0, 0, 1), transform 600ms cubic-bezier(0.2, 0, 0, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* flip book (flipbook.js) */
.fb { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fb__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fb__label { margin: 0; font-family: var(--display); font-weight: 500; font-size: 22px; color: var(--text); }
.fb__count { margin-left: 12px; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--text-3); }
.fb__nav { display: flex; gap: 8px; }
.fb__btn { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--navy); cursor: pointer; transition: background-color 160ms ease, opacity 160ms ease; }
.fb__btn svg { width: 20px; height: 20px; }
.fb__btn.is-next { background: var(--navy); border-color: var(--navy); color: #fff; }
.fb__btn:disabled { opacity: 0.35; cursor: default; }

/* Fullscreen. The class does the work on its own, because Safari on iOS cannot put anything but a <video> fullscreen;
   where the real API exists it runs as well, so the browser's own chrome goes too. */
.fb.is-fullscreen { position: fixed; inset: 0; z-index: 60; margin: 0; background: var(--surface);
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  gap: 10px; overflow: auto; }
/* The stage keeps the flex centring it already has. It must NOT become a grid: a grid column is sized to its item's
   content, and the book's pages are all absolutely positioned, so its content measures zero — the column collapsed to
   0 and the book's own `width: min(100%, 1040px)` then resolved against nothing. That is what left a bar floating in
   an empty white screen (owner, 20 September 2026: "fullscreen not working"). */
.fb.is-fullscreen .fb__stage { flex: 1; min-height: 0; padding: 6px; border-radius: 12px; }
/* The book is width-driven (width: min(100%, 1040px) with an aspect-ratio), which is right on a page that can grow
   downwards. Fullscreen cannot: the height is whatever the phone has left, and lying down that is short and wide, so
   the derived height overflowed and the stage's overflow:hidden clipped the pages away — a bar floating in white.
   Capping the height makes the browser recompute the width from the same aspect-ratio, so it fits either way up. */
.fb.is-fullscreen .fb__book { max-height: 100%; }
.fb.is-fullscreen .fb__hint { display: none; }
html.fb-has-fullscreen, html.fb-has-fullscreen body { overflow: hidden; }
@media (max-width: 560px) { .fb.is-fullscreen .fb__label { font-size: 13px; } }
.fb__stage { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(18px, 4vw, 48px) clamp(12px, 4vw, 56px); border-radius: 20px; background: var(--mist); overflow: hidden; touch-action: pan-y; outline: none; }
.fb__stage:focus-visible { box-shadow: var(--ring); }
/* the open book's shape: --fb-aspect is set per book by flipbook.js (2 = the square book, ~2.59 = a band one) */
.fb__book { position: relative; width: min(100%, 1040px); aspect-ratio: var(--fb-aspect, 2); perspective: 2600px; cursor: pointer; transition: transform 900ms cubic-bezier(0.45, 0, 0.2, 1); }
.fb__book.is-cover { transform: translateX(-25%); }
.fb__book.is-back { transform: translateX(25%); }
.fb__page { position: absolute; top: 0; bottom: 0; width: 50%; background-color: #fff; background-repeat: no-repeat; box-shadow: 0 1px 2px rgba(20, 30, 60, 0.08), 0 18px 40px rgba(20, 30, 60, 0.16); }
.fb__page img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.fb__page.is-left { left: 0; border-radius: 4px 0 0 4px; }
.fb__page.is-right { right: 0; border-radius: 0 4px 4px 0; }
.is-cover .fb__page.is-right { border-radius: 3px 8px 8px 3px; }
.is-back .fb__page.is-left { border-radius: 8px 3px 3px 8px; }
.fb__page.is-blank { background: transparent; box-shadow: none; }
/* an open book showing a single page (the dedication, the closing page): the other side is the white inside cover */
.fb__book:not(.is-cover):not(.is-back) .fb__page.is-blank { background: #fff; box-shadow: 0 1px 2px rgba(20, 30, 60, 0.08), 0 18px 40px rgba(20, 30, 60, 0.16); }
.fb__seam { position: absolute; top: 0; bottom: 0; left: 50%; width: 10%; transform: translateX(-50%); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.03) 32%, rgba(0, 0, 0, 0.12) 49.6%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.12) 50.4%, rgba(0, 0, 0, 0.03) 68%, transparent); z-index: 3; }
.fb__leaf { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 4; transform-style: preserve-3d; animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1); animation-fill-mode: both; }
.fb__leaf.is-next { left: 50%; transform-origin: left center; animation-name: fb-next; }
.fb__leaf.is-prev { left: 0; transform-origin: right center; animation-name: fb-prev; }
.fb__face { position: absolute; inset: 0; background-color: #fff; background-repeat: no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.fb__face.is-back { transform: rotateY(180deg); }
.fb__face.is-blank { background: #fff; }
.is-next .fb__face.is-front, .is-prev .fb__face.is-back { border-radius: 0 4px 4px 0; }
.is-next .fb__face.is-back, .is-prev .fb__face.is-front { border-radius: 4px 0 0 4px; }
.fb__shade { position: absolute; inset: 0; pointer-events: none; animation: inherit; animation-name: fb-shade; }
.is-next .is-front .fb__shade, .is-prev .is-back .fb__shade { background: linear-gradient(90deg, rgba(20, 30, 60, 0.1), transparent 45%); }
.is-next .is-back .fb__shade, .is-prev .is-front .fb__shade { background: linear-gradient(270deg, rgba(20, 30, 60, 0.1), transparent 45%); }
@keyframes fb-next { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
@keyframes fb-prev { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
@keyframes fb-shade { 0% { opacity: 0; } 50% { opacity: 0.7; } 100% { opacity: 0; } }
.fb__spots { position: absolute; inset: 0; }
.fb__spot { position: absolute; border-radius: 12px; }
.fb__tip { position: absolute; z-index: 10; pointer-events: none; transform: translate(-50%, calc(-100% - 16px)); }
.fb__tip-in { position: relative; display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 13px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 20px rgba(20, 30, 60, 0.22); transform-origin: 50% 100%; }
.fb__tip-in::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; border-radius: 2px; transform: rotate(45deg); }
.fb__tip-say { font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--yellow); letter-spacing: 0.01em; }
/* the voices: one short move when a character's label appears */
.fb__tip-in.is-playing { animation: fb-tip-pop 360ms cubic-bezier(0.34, 1.5, 0.64, 1) both; }
.fb__tip-in.is-playing[data-move="none"] { animation: fb-tip-fade 160ms ease-out both; }
.fb__tip-in.is-playing[data-move="wag"] { animation: fb-tip-pop 300ms cubic-bezier(0.34, 1.5, 0.64, 1) both, fb-tip-wag 520ms ease-in-out 120ms both; }
.fb__tip-in.is-playing[data-move="hop"] { animation: fb-tip-pop 300ms cubic-bezier(0.34, 1.5, 0.64, 1) both, fb-tip-hop 560ms ease-out 100ms both; }
.fb__tip-in.is-playing[data-move="trot"] { animation: fb-tip-pop 300ms cubic-bezier(0.34, 1.5, 0.64, 1) both, fb-tip-trot 620ms linear 80ms both; }
.fb__tip-in.is-playing[data-move="roar"] { animation: fb-tip-roar 520ms cubic-bezier(0.3, 0, 0.3, 1) both; }
.fb__tip-in.is-playing[data-move="peep"] { animation: fb-tip-pop 300ms cubic-bezier(0.34, 1.5, 0.64, 1) both, fb-tip-peep 480ms ease-out 140ms forwards; }
.fb__tip-in.is-playing[data-move="wobble"] { animation: fb-tip-pop 300ms cubic-bezier(0.34, 1.5, 0.64, 1) both, fb-tip-wobble 600ms ease-in-out 100ms both; }
.fb__tip-in.is-playing[data-move="flicker"] { animation: fb-tip-pop 300ms cubic-bezier(0.34, 1.5, 0.64, 1) both, fb-tip-flicker 700ms steps(1) 100ms both; }
@keyframes fb-tip-fade { from { opacity: 0; translate: 0 6px; } }
@keyframes fb-tip-pop { from { opacity: 0; scale: 0.7; } to { opacity: 1; scale: 1; } }
@keyframes fb-tip-wag { 0%, 100% { rotate: 0deg; } 20% { rotate: -7deg; } 40% { rotate: 6deg; } 60% { rotate: -4deg; } 80% { rotate: 2deg; } }
@keyframes fb-tip-hop { 0%, 100% { translate: 0 0; } 25% { translate: 0 -9px; } 50% { translate: 0 0; } 70% { translate: 0 -4px; } }
@keyframes fb-tip-trot { 0%, 50%, 100% { translate: 0 0; rotate: 0deg; } 25% { translate: 0 -6px; rotate: -3deg; } 75% { translate: 0 -6px; rotate: 3deg; } }
@keyframes fb-tip-roar { 0% { opacity: 0; scale: 0.6; } 35% { opacity: 1; scale: 1.14; } 45% { translate: -3px 0; } 55% { translate: 3px 0; } 65% { translate: -2px 0; } 75% { translate: 2px 0; scale: 1.04; } 100% { translate: 0 0; scale: 1; } }
@keyframes fb-tip-peep { 0%, 100% { scale: 1; } 30% { scale: 1.12; } 55% { scale: 0.96; } 75% { scale: 1.05; } }
@keyframes fb-tip-wobble { 0%, 100% { rotate: 0deg; } 15% { rotate: 4deg; } 30% { rotate: -4deg; } 45% { rotate: 3deg; } 60% { rotate: -2deg; } }
@keyframes fb-tip-flicker { 0%, 100% { opacity: 1; } 20% { opacity: 0.75; } 35% { opacity: 1; } 55% { opacity: 0.85; } }
.fb__hint { margin: 0; font-size: 14px; color: var(--text-3); }
@media (hover: hover) and (pointer: fine) { .fb__stage.is-over-spot .fb__book { cursor: help; } }
/* on a phone the closed book is half the stage wide; show the cover and the back larger, and let them shrink as the book opens */
@media (max-width: 640px) {
  .fb__label { font-size: 18px; } .fb__btn { width: 44px; height: 44px; } .fb__count { margin-left: 8px; }
  .fb__stage { padding: 40px 10px; }
  .fb__book.is-cover { transform: translateX(-36.25%) scale(1.45); }
  .fb__book.is-back { transform: translateX(36.25%) scale(1.45); }
}
/* the back cover with a call to start a book beside it (components/reader.html `end`): the book stays where it opened,
   the back cover on the left, the words and the button in the right half */
.fb.has-end .fb__book.is-back { transform: none; }
.fb__end { position: absolute; inset: 0 0 0 50%; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; padding: 0 clamp(16px, 5%, 56px); cursor: default; animation: fb-end-in 500ms ease-out both; }
.fb__end[hidden] { display: none; }
.fb__end-title { margin: 0; font-family: var(--display); font-size: clamp(17px, 2.6vw, 32px); font-weight: 600; line-height: 1.15; color: var(--navy); }
.fb__end-text { margin: 0; max-width: 30ch; font-size: clamp(14px, 1.4vw, 17px); line-height: 1.45; color: var(--text-2); }
.fb__end-again { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; cursor: pointer; }
.fb__end-price { margin: 0; font-size: clamp(14px, 1.4vw, 17px); font-weight: 600; color: var(--navy); }
.fb__end-date { margin: 0; max-width: 32ch; font-size: clamp(13px, 1.2vw, 15px); line-height: 1.4; color: var(--text-2); }
.fb__end-date[hidden] { display: none; }
/* the sample's call under the book (components/reader.html data-under): one button and the price, out of the way at the back cover */
.fb__under { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin: 18px 0 0; transition: opacity 200ms ease; }
.fb__under-price { font-size: 15px; font-weight: 600; color: var(--navy); }
.fb__under.is-away { visibility: hidden; opacity: 0; }
@keyframes fb-end-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .fb__end { animation: none; } }
@media (max-width: 640px) {
  .fb__end { gap: 10px; padding: 0 4px 0 10px; }
  .fb__end-text { display: none; }
  .fb__end .btn { --h: 40px; gap: 6px; padding-left: 12px; font-size: 13px; }
}

/* highlight: a painted yellow stroke under a word */
.hl { position: relative; z-index: 0; white-space: nowrap; }
.hl::after { content: ""; position: absolute; z-index: -1; left: -3%; right: -3%; bottom: 0.04em; height: 0.34em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15c38-8 96-11 194-7' stroke='%23ffdf2d' stroke-width='12' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }

/* the watching face (site.js) */
.face { display: block; width: 100%; height: auto; overflow: visible; }
.face__burst { fill: var(--yellow); }
.face__skin { fill: #fff; stroke: var(--navy); stroke-width: 3.2; stroke-linejoin: round; }
.face__hair { fill: var(--navy); stroke: var(--navy); stroke-width: 3.2; stroke-linejoin: round; }
.face__brow { stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.face__white { fill: #fff; stroke: var(--navy); stroke-width: 3.2; }
.face__ink { fill: var(--navy); }
.face__nose { fill: #ef6a4e; stroke: var(--navy); stroke-width: 2.6; }
.face__mouth-shape { fill: var(--navy); stroke: var(--navy); stroke-width: 3; stroke-linejoin: round; }
.face__mouth { transform-box: fill-box; transform-origin: center top; transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1); }
.face.is-happy .face__mouth { transform: scale(1.22); }
.face__eyes { transform-box: fill-box; transform-origin: center; transition: transform 80ms ease; }
.face__eyes.is-blink { transform: scaleY(0.1); }

/* home: picture beside words */
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.intro__art { margin: 0; position: relative; }
.intro__art img { width: 100%; border-radius: 24px; transform: rotate(-2deg); box-shadow: 0 24px 50px rgba(20, 30, 60, 0.12); }
.intro__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack); }
@media (max-width: 900px) { .intro { grid-template-columns: 1fr; gap: 32px; } .intro__art img { transform: none; } }
.more { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 700; text-decoration: none; }
.more::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 180ms ease; }
.more:hover { text-decoration: underline; text-underline-offset: 5px; }
.more:hover::after { transform: translateX(3px); }
.center { margin: 28px 0 0; text-align: center; }
.pin--a { left: 42%; top: 70%; }
.pin--b { left: -6%; top: 50%; }
.plan .link { align-self: flex-start; }
.plan__top .btn { margin-top: 4px; }
.intro + .facts { margin-top: 72px; }
@media (max-width: 720px) { .intro + .facts { margin-top: 40px; } }
.nowrap { white-space: nowrap; }
.foot-wrap { margin-top: clamp(64px, 7.5vw, 108px); padding-bottom: 24px; }

/* trust: reviews note and photo privacy */
.privacy { display: flex; align-items: flex-start; gap: 18px; max-width: 760px; margin: 40px auto 0; padding: 24px 28px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.privacy__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--yellow); color: var(--navy); }
.privacy__icon svg { width: 24px; height: 24px; }
.privacy__text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.privacy__title { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--navy); }
.privacy__text p { margin: 0; color: var(--text-2); line-height: 1.6; }
.privacy .more { margin-top: 4px; }
@media (max-width: 640px) { .privacy { flex-direction: column; gap: 14px; padding: 22px 20px; margin-top: 28px; } }

/* inner pages */
.h1--page { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.08; }
.phero--text { grid-template-columns: 1fr; }
.phero--text .phero__text { max-width: 860px; }
/* the 404: Mio's still beside the words, like the site's error page (src/site/error-page.ts) */
.phero--404 { grid-template-columns: 1fr auto; }
.phero__mio { width: clamp(150px, 20vw, 240px); }
@media (max-width: 900px) { .phero--404 { grid-template-columns: 1fr; } .phero__mio { order: -1; width: 140px; } }
.phero__art { margin: 0; }
.phero__art img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 20px; box-shadow: 0 24px 50px rgba(20, 30, 60, 0.12); rotate: 2deg; }
@media (max-width: 900px) { .phero__art img { rotate: none; max-height: 360px; } }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split--flip { grid-template-columns: 1.1fr 0.9fr; }
.split__art { margin: 0; }
/* Arthur and Louie beside the story (home, /despre-noi), and the Delta book's cover leaning out of its band */
.story__art { display: flex; flex-direction: column; gap: 12px; }
/* the picture carries the book's own painted edge (kit/edges.py, soft), so no card frame around it */
/* What you get (/carte-personalizata): the book on a yellow disc in the middle, three short promises on either side, each
   with a round icon like the steps'; the book above the two lists on a narrow screen, one column on a phone */
.gets__grid { display: grid; grid-template-columns: 1fr minmax(300px, 1fr) 1fr; grid-template-areas: "story art book"; gap: 40px; align-items: center; }
.gets__art { grid-area: art; position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; margin: 0; }
.gets__art::before { content: ""; position: absolute; left: 50%; top: 50%; width: 90%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--yellow); }
.gets__book { position: relative; width: 80%; rotate: -4deg; }
.gets__book img { width: 100%; filter: drop-shadow(0 28px 30px rgba(20, 30, 60, 0.24)); }
.gets__pin { rotate: 4deg; }
.gets__pin--a { left: 50%; top: 82%; }
.gets__pin--b { left: -14%; top: 57%; }
.gets__list { grid-area: story; display: flex; flex-direction: column; gap: 40px; margin: 0; padding: 0; list-style: none; }
.gets__list--book { grid-area: book; }
.gets__item { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; }
.gets__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--mist); color: var(--navy); }
.gets__icon svg { width: 22px; height: 22px; }
.gets__title { margin: 2px 0 6px; font-family: var(--display); font-size: 20px; font-weight: 500; line-height: 1.25; color: var(--navy); text-wrap: balance; }
.gets__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 1140px) {
  .gets__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "art art" "story book"; gap: 40px 32px; align-items: start; }
  .gets__art { max-width: 360px; justify-self: center; }
}
@media (max-width: 640px) {
  .gets__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "story" "book"; row-gap: 28px; }
  .gets__art { max-width: 300px; }
  .gets__list { gap: 28px; }
  .gets__item { grid-template-columns: 44px 1fr; gap: 14px; }
  .gets__icon { width: 44px; height: 44px; }
  .gets__title { font-size: 19px; }
}
/* the book in hand (/carte-personalizata): the facts beside the intro, then a gallery with the tall hands picture first */
.inhand__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; margin-bottom: 40px; }
.inhand__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack); }
.specs { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.specs__row { padding: 14px 16px; border-radius: 16px; background: var(--mist); }
.specs__row dt { font-size: 13px; font-weight: 700; color: var(--text-3); }
.specs__row dd { margin: 2px 0 0; font-weight: 700; color: var(--navy); }
.inhand__gallery { display: grid; grid-template-columns: 1.1fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.inhand__pic { margin: 0; min-height: 0; }
.inhand__pic img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.inhand__pic--tall { grid-row: span 2; }
.inhand__pic--wide { grid-column: span 2; }
.inhand__gallery .inhand__pic:not(.inhand__pic--tall) img { aspect-ratio: 4 / 3; }
.inhand__gallery .inhand__pic--wide img { aspect-ratio: 16 / 9; }
@media (max-width: 900px) {
  .inhand__head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .inhand__gallery { grid-template-columns: 1fr 1fr; }
  .inhand__pic--tall { grid-row: auto; grid-column: span 2; }
  .inhand__pic--tall img { aspect-ratio: 4 / 5; max-height: 520px; }
}
@media (max-width: 480px) { .inhand__gallery .inhand__pic--wide img { aspect-ratio: 4 / 3; } .specs { grid-template-columns: 1fr 1fr; gap: 8px; } .specs__row { padding: 10px 12px; } .inhand__gallery { gap: 10px; } .inhand__pic--tall img { max-height: 420px; } .inhand__pic img { border-radius: 14px; } }
.split__art.story__art img { aspect-ratio: 1; object-fit: contain; border-radius: 0; background: none; box-shadow: none; }
.story__art figcaption { font-size: 14px; color: var(--text-3); text-align: center; }
.delta { align-items: center; }
.delta__cover img { display: block; width: 100%; max-width: 440px; margin-inline: auto; border-radius: 20px; box-shadow: 0 24px 50px rgba(20, 30, 60, 0.16); rotate: 2deg; }
@media (max-width: 900px) { .delta__cover img { rotate: none; max-width: 340px; } }
.split__art img { width: 100%; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); }
.split__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack); }
@media (max-width: 900px) { .split, .split--flip { grid-template-columns: 1fr; gap: 32px; } .split--flip .split__art { order: -1; } }
.compare { display: grid; gap: 12px; width: 100%; margin: 8px 0 0; }
.compare__row { padding: 16px 18px; border-radius: 14px; background: var(--surface-2); }
.compare__row dt { margin-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--text-3); }
.compare__row dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.compare__row.is-ours { background: var(--yellow); }
.compare__row.is-ours dt, .compare__row.is-ours dd { color: var(--navy); }
.who { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.who__art { margin: 0; }
.who__pic { position: relative; max-width: 420px; margin-inline: auto; }
.who__pic > img:first-child { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; box-shadow: 0 24px 50px rgba(20, 30, 60, 0.16); rotate: -2deg; }
/* the book's own painted sound effects, stuck on the picture like stickers */
.who__sfx { position: absolute; pointer-events: none; height: auto; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 6px 10px rgba(20, 30, 60, 0.18)); }
.who__sfx--a { width: 60%; left: -18%; top: -9%; rotate: -9deg; }
.who__sfx--b { width: 58%; right: -16%; bottom: -8%; rotate: 7deg; }
@media (max-width: 900px) { .who { grid-template-columns: 1fr; gap: 32px; } .who__pic { max-width: 340px; } .who__pic > img:first-child { rotate: none; } .who__sfx--a { left: -8%; } .who__sfx--b { right: -6%; } }
/* What matters to us (/despre-noi): four short cards in a row, each with its mark, the same height */
.beliefs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.belief { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; border-radius: 24px; }
/* one calm card for all four: the yellow mark is the only colour */
.belief--yellow, .belief--mist, .belief--pink, .belief--white { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.belief__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 50%; background: var(--yellow); color: var(--navy); }
.belief__icon svg { width: 24px; height: 24px; }
.belief__title { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--navy); }
.belief__text { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--navy); opacity: 0.85; }
@media (max-width: 1080px) { .beliefs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .beliefs { grid-template-columns: 1fr; } }
.who__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack); }
@media (max-width: 900px) { .who { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chips li, .chips--nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--surface); color: var(--navy); font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); }
.chips li:has(a) { padding: 0; background: none; box-shadow: none; }
.chips--nav a { text-decoration: none; }
.chips--nav a:hover { background: var(--navy); color: #fff; box-shadow: none; }
.timeline { display: grid; gap: 14px; max-width: 820px; margin: 0 auto; padding: 0; list-style: none; counter-reset: none; }
.timeline__item { display: flex; gap: 20px; padding: 22px 24px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.timeline__item:nth-child(3n+1) .timeline__n { background: var(--yellow); }
.timeline__item:nth-child(3n+2) .timeline__n { background: var(--pink); }
.timeline__item:nth-child(3n) .timeline__n { background: var(--mist); }
.timeline__n { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--navy); font-family: var(--display); font-size: 20px; font-weight: 600; }
.timeline__title { margin: 6px 0 6px; font-family: var(--display); font-size: 21px; font-weight: 500; }
.timeline__item p { margin: 0; color: var(--text-2); }
.checklist { display: grid; gap: 14px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 17px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; }
.traits--one { grid-template-columns: 1fr; }
.cards--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .cards--two { grid-template-columns: 1fr; } }
.card__icon { width: 28px; height: 28px; margin-bottom: 6px; color: var(--navy); }
.book-sample__about { display: flex; flex-direction: column; gap: 10px; max-width: 440px; }
.book-sample__about .sub { max-width: none; }
.book-sample__who { margin: 0; font-size: 15px; color: var(--text-2); }

/* reviews: one card for every review (owner, 2 Oct 2026: „too many different cards”): a tall picture or video, the
   parent's words under it, who said it. A video has a play button and its length on the picture; tapping opens it with
   sound (components/review_dialog.html). The same card on the home page's track and on the /recenzii grid. */
.rv { position: relative; flex: none; width: 260px; margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 18px; border-radius: 24px; background: var(--rv-bg, var(--mist)); scroll-snap-align: start; break-inside: avoid; }
.rv:nth-child(4n+2) { --rv-bg: #fff6c7; }
.rv:nth-child(4n+3) { --rv-bg: #ffeafd; }
.rv:nth-child(4n+4) { --rv-bg: #e9f6ef; }
.rv__media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; margin: 0; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--mist); font: inherit; color: #fff; }
.rv__media.is-video { cursor: pointer; }
.rv__media.is-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(10, 16, 36, 0.55)); pointer-events: none; }
.rv__media:focus-visible { box-shadow: var(--ring); }
.rv__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 400ms ease; }
.rv__media.is-video:hover .rv__img { scale: 1.03; }
.rv__play { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--navy); box-shadow: 0 8px 24px rgba(10, 16, 36, 0.25); transition: scale 200ms ease; }
.rv__play svg { width: 22px; height: 22px; margin-left: 3px; }
.rv__media.is-video:hover .rv__play { scale: 1.08; }
.rv__len { position: absolute; z-index: 2; left: 12px; bottom: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(10, 16, 36, 0.6); font-size: 12.5px; font-weight: 700; }
.rv__mock { position: absolute; z-index: 3; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: var(--navy); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; pointer-events: none; }
.rv__stars { margin: 2px 4px -4px; font-size: 16px; letter-spacing: 2px; line-height: 1; color: #f5a400; }
.rv__stars span { color: rgba(23, 40, 84, 0.18); }
.rv__stars .on { color: #f5a400; }
.rv__quote { margin: 0; padding: 0 4px; font-size: 15px; line-height: 1.55; color: var(--navy); }
.rv__who { margin: 0; padding: 10px 4px 0; border-top: 1px solid rgba(23, 40, 84, 0.1); font-size: 13.5px; line-height: 1.4; color: var(--text-3); }
.rv__who strong { color: var(--navy); font-weight: 700; }
.rv__who span { display: block; font-style: italic; }

/* home: a track that scrolls sideways, with arrows; a little of the next card shows, so it reads as more */
.reviews__side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.reviews__nav { display: flex; gap: 8px; }
.rvx { display: flex; align-items: flex-start; gap: 24px; margin: 0 -24px; padding: 8px 24px 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; scrollbar-width: none; outline: none; }
.rvx::-webkit-scrollbar { display: none; }
.rvx:focus-visible { box-shadow: var(--ring); border-radius: 20px; }
@media (min-width: 900px) {
  .rvx { display: block; columns: 4 220px; column-gap: 20px; margin: 0; padding: 4px 0 0; overflow: visible; }
  .rvx .rv { display: flex; width: auto; margin: 0 0 20px; }
  .reviews__nav { display: none; }
}
@media (max-width: 640px) { .rvx { gap: 16px; margin: 0 -16px; padding: 8px 16px 20px; scroll-padding-inline: 16px; } .rv { width: 68vw; max-width: 260px; } }

/* /recenzii: the same cards in a grid */
.rv-board { columns: 4 230px; column-gap: 20px; }
.rv-board .rv { width: auto; margin: 0 0 20px; }
.rv-filter { margin-bottom: 36px; }
.rv-filter button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--surface); color: var(--navy); font: inherit; font-weight: 600; box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; }
.rv-filter button[aria-pressed="true"] { background: var(--navy); color: #fff; box-shadow: none; }

.rv-dialog { width: min(92vw, 420px); max-height: 94vh; padding: 0; border: 0; border-radius: 28px; background: var(--navy-3); color: #fff; overflow: hidden; }
.rv-dialog::backdrop { background: rgba(15, 23, 48, 0.78); }
.rv-dialog__stage { position: relative; }
.rv-dialog__stage video, .rv-dialog__stage img { display: block; width: 100%; max-height: 80vh; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
.rv-dialog__note { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(23, 40, 84, 0.85); font-size: 14px; font-weight: 600; }
.rv-dialog__caption { margin: 0; padding: 14px 18px 16px; font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.rv-dialog__close { position: absolute; right: 10px; top: 10px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--navy); cursor: pointer; }
.rv-dialog__close svg { width: 20px; height: 20px; }

/* the band before a holiday on the home page (components/season_band.html): close under the hero, one link */
.sband-wrap { margin-top: calc(20px - clamp(64px, 7.5vw, 108px)); }
.sband { display: flex; align-items: center; gap: 18px 24px; padding: 18px 24px; border-radius: 22px; background: var(--yellow); color: var(--navy); text-decoration: none; transition: transform 160ms ease; }
.sband:hover { transform: translateY(-1px); }
.sband__tag { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 700; white-space: nowrap; }
.sband__ico { width: 20px; height: 20px; }
.sband__body { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.sband__title { font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.3; }
.sband__text { font-size: 15px; line-height: 1.5; }
.sband__date { flex-basis: 100%; font-size: 15px; font-weight: 700; }
.sband__go { flex: none; }
.sband__date .cdown { display: flex; margin-top: 8px; }

/* the countdown to an order-by day (components/countdown.html, ticked by site.js): the days on their own in a yellow
   tile, then hours : minutes : seconds in navy tiles with a fold across the middle like a flip clock, the unit under
   each number; a changed number slides in from above (owner, 24 Oct 2026: „make the countdown nicer”, T1024-30), still
   when the visitor asks for less motion. On a night band (festive.css) the tiles turn light. */
.cdown { display: inline-flex; align-items: flex-start; gap: 5px; font-variant-numeric: tabular-nums; }
.cdown__cell { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 50px; padding: 9px 6px 7px;
  border-radius: 11px; overflow: hidden; background: linear-gradient(180deg, #2f4a94 0%, #263f82 50%, #20376f 50%, #1c3066 100%);
  color: #fff; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 14px -6px rgba(20, 34, 79, 0.55); }
.cdown__cell::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 0.5px); height: 1px; background: rgba(0, 0, 0, 0.18); pointer-events: none; }
.cdown__cell--days { margin-right: 7px; background: var(--yellow); color: var(--navy); box-shadow: inset 0 -2px 0 rgba(36, 59, 121, 0.12), 0 6px 14px -6px rgba(20, 34, 79, 0.45); }
.cdown__cell--days::after { content: none; }
.cdown__cell b { display: block; font-family: var(--display); font-size: 23px; font-weight: 600; }
.cdown__cell b.is-new { animation: cdown-in 420ms cubic-bezier(0.2, 0.75, 0.25, 1); }
@keyframes cdown-in { from { transform: translateY(-55%); opacity: 0; } }
.cdown__cell small { margin-top: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.cdown__cell--days small { color: rgba(36, 59, 121, 0.72); }
.cdown__sep { padding-top: 9px; font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--navy); opacity: 0.45; }
@media (prefers-reduced-motion: reduce) { .cdown__cell b.is-new { animation: none; } }
/* on the yellow season band the days tile is white, so it still stands apart */
.sband .cdown__cell--days { background: var(--surface); }
@media (max-width: 760px) {
  .sband { flex-direction: column; align-items: flex-start; padding: 18px 18px 20px; }
  .sband__body { flex-direction: column; gap: 4px; }
}

/* /livrare-si-garantie and the reprint promise next to a price (components/guarantee.html) */
.dlv__season, .dlv__note { max-width: 760px; margin: 24px auto 0; }
.dlv__season + .dlv__note { margin-top: 10px; }
.dlv__tip { display: flex; flex-direction: column; gap: 10px; }
.dlv__tip-title { margin: 0; font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--navy); }
.dlv__tip-text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.dlv__guarantee { display: flex; flex-direction: column; gap: 28px; }
.dlv__guarantee .head { margin: 0; }
.dlv__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.dlv__col-title { margin: 0 0 14px; font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--navy); }
.dlv__help { display: grid; gap: 10px; align-content: start; }
.dlv__help .dlv__col-title { margin: 0 0 4px; }
.dlv__steps { display: grid; gap: 12px; margin: 0; padding-left: 22px; font-size: 16px; line-height: 1.55; }
.dlv__fine { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 900px) { .dlv__cols { grid-template-columns: 1fr; gap: 28px; } }
.gpromise { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); text-align: left; }
.gpromise__ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--navy); }
.gpromise a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; }

/* ---------- a book's public link (/vezi/<token>, src/app/book-links.ts) ----------
   A link sent to someone to look at the book (owner, 18 Sept 2026: „preview should not have menu footer etc. make it
   more a link i can send to actually look at it"): on every screen the book alone, filling the window, the arrows at its
   sides; no menu, footer, call to action, cookie question (with no answer only the strictly necessary cookies are used,
   cookies.js) or page label. A phone held upright gets „Întoarce telefonul" over the book, which waits blurred behind
   it, already laid out lying down and turned a quarter (as it will be once the phone turns to the left). */
.book-link__turn { display: none; }
body:has(.book-link) .bar, body:has(.book-link) .foot-wrap, body:has(.book-link) [data-cta], body:has(.book-link) .cookienote, body:has(.book-link) .cookiemodal,
.book-link .fb__hint, .book-link .fb__label { display: none; }
body:has(.book-link) { overflow: hidden; background: var(--mist); }
.book-link { position: fixed; inset: 0; z-index: 40; max-width: none; margin: 0; padding: 0; background: var(--mist); }
.book-link > .reveal, .book-link .reader, .book-link .fb { height: 100%; opacity: 1; transform: none; }
.book-link .reader { gap: 0; }
.book-link .fb { position: relative; gap: 0; }
.book-link .fb__stage { flex: 1; height: 100%; border-radius: 0; padding: clamp(10px, 3vh, 40px) clamp(56px, 7vw, 96px); background: transparent; }
/* as big as the window lets the open book be (--fb-h: the height it lies across, 100vw when turned) */
.book-link .fb__book { width: min(100%, calc((var(--fb-h, 100svh) - 2 * clamp(10px, 3vh, 40px)) * var(--fb-aspect, 2))); }
.book-link .fb__bar { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.book-link .fb__nav { position: absolute; inset: 0; justify-content: space-between; align-items: center; padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); }
.book-link .fb__btn { pointer-events: auto; }
/* The two arrows are the whole row, one at each side of the window. Fullscreen is a corner button, taken out of the
   row: as a third flex child it made „space-between” put the next arrow in the middle of the book, over the gutter
   (owner, 21 Sept 2026: „right arrow in wrong place”). */
.book-link .fb__full { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
/* upright on a phone: the book lies across the screen, turned a quarter to the right, blurred under the hint */
@media (pointer: coarse) and (orientation: portrait) and (max-width: 560px) {
  .book-link { inset: auto; top: 0; left: 100vw; width: 100svh; height: 100vw; transform-origin: top left; transform: rotate(90deg); filter: blur(6px); pointer-events: none; }
  .book-link .fb__book { --fb-h: 100vw; }
  .book-link__turn { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 24px 32px; text-align: center; color: #fff; background: rgba(28, 40, 76, 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .book-link__phone { width: 132px; height: 132px; color: #fff; animation: book-link-turn 3.2s ease-in-out infinite; }
  .book-link__turn-title { margin: 8px 0 0; font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.15; }
  .book-link__turn-text { margin: 0; max-width: 300px; font-size: 16px; line-height: 1.5; opacity: 0.86; }
}
@keyframes book-link-turn { 0%, 18% { transform: rotate(0deg); } 52%, 86% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .book-link__phone { animation: none; transform: rotate(-90deg); } }

/* Print closed (settings.print_open, docs/plans/digital-first-launch.md §2): a printed product keeps its price with an
   „În curând” mark, and its „Anunță-mă” opens the waitlist dialog (components/waitlist_dialog.html) */
.plan__soon { display: inline-block; margin-left: 8px; padding: 4px 11px; border-radius: 999px; background: var(--yellow); color: var(--navy); font-family: var(--sans); font-size: 13px; font-style: normal; font-weight: 700; line-height: 1.3; vertical-align: middle; white-space: nowrap; }
/* „Anunță-mă” at the end of a hero's „în curând” point: the start note's link, the point's size */
.hero__soonlink { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; white-space: nowrap; }
/* under a start button while closed: what it starts and its price (components/start_note.html) */
.start-note { margin: 12px 0 0; max-width: 34em; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.start-note a { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; white-space: nowrap; }

/* story cards (components/story_card.html): the next stories on a story page, every story on a hub, a few on an occasion
   page and the newest on the home page */
.story-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.story-cards__all { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin: 32px 0 0; }
.story-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 20px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--navy); text-decoration: none; transition: box-shadow 200ms ease, transform 200ms ease; }
.story-card:hover { box-shadow: 0 18px 40px rgba(20, 30, 60, 0.12), inset 0 0 0 1px var(--border); transform: translateY(-2px); }
.story-card__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 8px; border-radius: 14px; }
.story-card__meta { padding: 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-3); }
.story-card__title { padding: 0 8px; font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.25; }
.story-card__text { padding: 0 8px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
@media (max-width: 900px) { .story-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .story-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .story-card, .story-card:hover { transition: none; transform: none; } }

/* home: the occasions as chips with their picture */
.occ__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto; padding: 0; max-width: 1040px; list-style: none; }
.occ__chips a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 18px 4px 4px; border-radius: 999px; background: var(--surface); color: var(--navy); font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 1px 2px rgba(20, 30, 60, 0.06); transition: background-color 140ms ease, color 140ms ease; }
.occ__chips img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
@media (hover: hover) { .occ__chips a:hover { background: var(--navy); color: #fff; } }
.occ { background: #fff8d6; }
.occ .center { margin-top: 28px; }
@media (max-width: 640px) { .occ__chips a { font-size: 14px; min-height: 44px; } .occ__chips img { width: 36px; height: 36px; } }

/* white and separated (owner, 5 Oct 2026: „change bg color to white. i need proper separation between sections …
   menu and content”): a white page, the menu always sitting on a hairline (not only once scrolled), and on a product
   page a hairline half-way between its sections, so each part reads as its own block */
:root { --bg: #ffffff; }
.bar { background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 0 var(--border); }
.main { --main-gap: clamp(64px, 7.5vw, 108px); gap: var(--main-gap); }
.main:has(> .pd-top) > section + section { position: relative; }
.main:has(> .pd-top) > section + section::before { content: ""; position: absolute; left: var(--wrap-pad, 24px); right: var(--wrap-pad, 24px); top: calc(var(--main-gap) / -2); height: 1px; background: var(--border); }
.pd-top { padding-top: 14px; }
@media (max-width: 600px) { .main { --wrap-pad: 16px; } }

/* every page white and separated the same way (owner, 5 Oct 2026: „make sure the other content pages adapt”):
   - a tinted hero card (.phero: inner pages, hubs, legal, 404) stands a little below the menu's hairline instead of
     touching it, about as far down as a product page's crumbs;
   - the product pages' hairline half-way between sections, now on every page; not under a tinted hero card (its edge
     already ends it, and /urmareste-comanda pulls its form up to it), nor next to the home page's full-width bands (the
     hero, the prices) or the holiday band that sits close under the hero;
   - a legal table's header row keeps a tint now that the page is as white as the table;
   - the menu's panels stand off the hairline. */
.main > .wrap:first-child > .phero { margin-top: clamp(16px, 2vw, 28px); }
.main > section + section { position: relative; }
.main > section + section::before { content: ""; position: absolute; left: var(--wrap-pad, 24px); right: var(--wrap-pad, 24px); top: calc(var(--main-gap) / -2); height: 1px; background: var(--border); }
.main > .home-band::before, .main > .home-band + section::before, .main > .sband-wrap::before,
.main > .hh + section::before, .main > section:has(> .phero) + section::before { content: none; }
.legal__table th { background: var(--mist); }
/* the menu's panels float a little under the hairline instead of sitting on it (padding, not a margin, so the pointer
   crosses the gap without closing the panel) */
@media (min-width: 1024px) { .mega { padding-top: 10px; } }
/* „Înapoi la comanda ta” (assets/js/cart.js): a slim bar fixed at the bottom for a parent with an unpaid cart, drawn
   after load, so nothing on the page moves; the page keeps room for it at the end. On a phone the product pages' sticky
   price bar (produs.css .pd-sticky, at the bottom there) steps aside while it shows: one bar at a time. */
.cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--navy); color: #fff; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px rgba(20, 30, 60, 0.14); }
.cartbar__in { display: flex; align-items: center; gap: 12px; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 10px 24px; }
.cartbar__text { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.cartbar__sum { white-space: nowrap; }
.cartbar__btn { flex: none; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--yellow); color: var(--navy); font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.cartbar__btn:hover { background: #ffe75e; }
.cartbar__close { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; opacity: 0.8; cursor: pointer; }
.cartbar__close:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.has-cartbar body { padding-bottom: 64px; }
.has-cartbar .cookienote { bottom: 80px; }
@media (max-width: 900px) { .has-cartbar .pd-sticky { display: none; } }
@media (max-width: 640px) { .cartbar__in { padding: 8px 8px 8px 16px; gap: 8px; } .cartbar__text { font-size: 14px; } }

/* the reader app's store badges (components/app_stores.html): the footer and the digital book's buy box */
.app-stores__line { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.app-stores__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.app-stores__badge { display: inline-flex; line-height: 0; border-radius: 8px; }
.app-stores__badge img { height: 40px; width: auto; }
/* Google's badge carries its own clear space: 52 px tall to look as tall as Apple's 40 */
.app-stores__badge--google img { height: 52px; margin: -6px 0; }
.app-stores--foot .app-stores__line { color: #fff; opacity: .85; }
.app-stores--buy { margin: 14px 0 4px; padding-top: 14px; border-top: 1px solid var(--border); text-align: center; }
.app-stores--buy .app-stores__line { color: var(--navy); font-size: 14px; }
.app-stores--buy .app-stores__badges { justify-content: center; }
.app-stores--povesti { margin: 4px auto 28px; text-align: center; }
.app-stores--povesti .app-stores__line { color: var(--navy); }
.app-stores--povesti .app-stores__badges { justify-content: center; }
.story__body .app-stores--povesti { margin-top: 28px; }