/* ---- tokens.css ---- */
/* =========================================================
   SUDOKU TOKU — design tokens
   Desktop values follow the 1440px Figma frame and scale with
   the viewport through --u (1 design px). Mobile overrides below.
   ========================================================= */

@font-face {
  font-family: "KZ Toms";
  src: url("../assets/fonts/KZTomsHandwritten.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Neucha";
  src: url("../assets/fonts/Neucha.woff") format("woff");
  font-display: swap;
}

:root {
  /* ---- colour ---- */
  --c-bg: #FEF8ED;          /* paper, main background */
  --c-bg-alt: #FFF0D7;      /* warm band sections, clouds */
  --c-cloud: #FFF0D7;
  --c-cloud-deep: #FBE3BC;
  --c-brown: #81412E;       /* text, headings, dark surfaces */
  --c-brown-700: #6A3323;
  --c-brown-300: #B98F7E;   /* muted text */
  --c-brown-100: #EAD6C6;
  --c-coral: #F25C50;       /* accent, CTA */
  --c-coral-600: #DE4A3E;
  --c-coral-200: #F5CBC0;
  --c-ink: #1E1C18;         /* the cat */
  --c-cream: #FEF8ED;       /* text on dark */
  --c-sakura: #FF8A7B;
  --c-moss: #B2AC5B;
  --c-gold: #E7AF30;

  /* ---- type ---- */
  --f-display: "KZ Toms", "Neucha", "Comic Sans MS", cursive;
  --f-body: "Neucha", "Segoe Print", "Comic Sans MS", cursive;

  /* 1 design pixel: 1px at ≥1440, shrinks proportionally below */
  --u: min(1px, calc(100vw / 1440));

  --t-mega: calc(128 * var(--u));   /* КАК ЕМУ ПОМОЧЬ? / ЧАСТЫЕ ВОПРОСЫ */
  --t-h1: calc(97 * var(--u));      /* ИСТОРИЯ / СОЦ. СЕТИ */
  --t-h2: calc(67 * var(--u));      /* step titles, final line */
  --t-hero: calc(64 * var(--u));
  --t-card: calc(52 * var(--u));
  --t-faq: calc(48 * var(--u));
  --t-btn: calc(24 * var(--u));
  --t-lead: calc(28 * var(--u));
  --t-body: calc(24 * var(--u));
  --t-sm: calc(20 * var(--u));
  --t-xs: calc(16 * var(--u));

  --lh-display: .78;
  --lh-tight: 1;
  --lh-body: 1.15;
  --tr-display: -0.02em;
  --tr-body: -0.02em;

  /* ---- shape ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-tag: calc(28 * var(--u));
  --r-card: calc(44 * var(--u));
  --r-faq: calc(71 * var(--u));

  /* ---- space ---- */
  --gutter: calc(64 * var(--u));
  --gutter-l: calc(119 * var(--u));
  --wrap: calc(1440 * var(--u));

  /* ---- elevation ---- */
  --sh-soft: 0 10px 30px -12px rgba(129, 65, 46, .28);
  --sh-btn: 0 6px 0 0 var(--c-coral-600);
  --sh-widget: 0 18px 40px -18px rgba(129, 65, 46, .45), 0 2px 0 rgba(129, 65, 46, .08);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d-fast: .18s;
  --d-med: .35s;
}

@media (max-width: 767px) {
  :root {
    --u: 1px;
    --t-mega: 56px;
    --t-h1: 54px;
    --t-h2: 36px;
    --t-hero: 40px;
    --t-card: 34px;
    --t-faq: 28px;
    --t-btn: 20px;
    --t-lead: 20px;
    --t-body: 19px;
    --t-sm: 17px;
    --t-xs: 14px;
    --r-tag: 22px;
    --r-card: 32px;
    --r-faq: 36px;
    --gutter: 20px;
    --gutter-l: 20px;
    --wrap: 100vw;
  }
}

/* ---- base.css ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-brown);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
:focus-visible { outline: 3px solid var(--c-coral); outline-offset: 3px; border-radius: 6px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.wrap { width: var(--wrap); margin-inline: auto; position: relative; }
section { position: relative; scroll-margin-top: 20px; overflow-x: clip; }

/* ---- components.css ---- */
/* =========================================================
   Components
   ========================================================= */

/* ---- Typography ---- */
.t-display, .t-h1, .t-h2, .t-hero, .t-card, .t-faq {
  font-family: var(--f-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  color: var(--c-brown);
}
.t-display { font-size: var(--t-mega); }
.t-h1 { font-size: var(--t-h1); }
.t-h2 { font-size: var(--t-h2); }
.t-hero { font-size: var(--t-hero); }
.t-card { font-size: var(--t-card); }
.t-faq { font-size: var(--t-faq); }
.t-lead { font-size: var(--t-lead); line-height: 1; }
.t-body { font-size: var(--t-body); line-height: 1; }
.t-sm { font-size: var(--t-sm); line-height: 1.1; }
.t-accent { color: var(--c-coral); }

/* Heading with the paw mark */
.paw-title { display: flex; align-items: center; gap: calc(28 * var(--u)); }
.paw-title .paw { width: calc(40 * var(--u)); height: auto; flex: none; transition: transform .5s var(--ease-spring); }
.paw-title:hover .paw { transform: rotate(-18deg) scale(1.1); }

/* ---- Buttons ---- */
.btn {
  --bg: var(--c-coral);
  --fg: var(--c-cream);
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: calc(18 * var(--u)) calc(28 * var(--u));
  min-height: 44px;
  border-radius: var(--r-tag);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: var(--t-btn);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .45s ease;
  will-change: transform;
}
.btn:hover { transform: rotate(-1.5deg); }
.btn--tilt { transform: rotate(-2.85deg); }
.btn--tilt:hover { transform: rotate(-1deg); }
.btn--outline {
  --bg: transparent; --fg: var(--c-brown);
  box-shadow: inset 0 0 0 2px var(--c-brown);
}
.btn--md { font-size: calc(24 * var(--u)); padding: calc(18 * var(--u)) calc(26 * var(--u)); }
.btn .ico { width: 1em; height: 1em; flex: none; }

/* ---- Tags / badges ---- */
.tag {
  display: inline-block;
  padding: calc(12 * var(--u)) calc(20 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--c-brown);
  color: var(--c-cream);
  font-size: calc(25 * var(--u));
  line-height: 1;
  white-space: nowrap;
}
.tag--tilt { transform-origin: 50% -40%; animation: a-tag 4.5s ease-in-out infinite; }
@keyframes a-tag { 0%, 100% { transform: rotate(2.5deg); } 50% { transform: rotate(-1.5deg); } }
.product:nth-child(2) .tag--tilt { animation-delay: -2.2s; }
.tag .num { display: inline-block; min-width: 1.4em; text-align: center; }
.tag .num.bump { animation: bump .5s var(--ease-spring); }

.num-badge {
  display: inline-grid; place-items: center; flex: none;
  width: calc(50 * var(--u)); height: calc(50 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--c-coral);
  color: var(--c-cream);
  font-size: calc(27 * var(--u));
  line-height: 1;
}

/* ---- Side widget (desktop navigation) ---- */
.widget {
  position: fixed; z-index: 50;
  top: 20px; right: 20px;
  width: 200px;
  padding: 14px 18px 16px;
  border-radius: 26px;
  background: var(--c-bg);
  box-shadow: var(--sh-widget);
  border: 2px solid var(--c-brown-100);
  opacity: 0; visibility: hidden; transform: translateX(24px);
  transition: transform .5s var(--ease-out), opacity .4s, visibility 0s .5s;
}
.widget.is-on { opacity: 1; visibility: visible; transform: none; transition: transform .5s var(--ease-out), opacity .4s; }
.widget__label { font-size: 14px; color: var(--c-brown-300); margin-bottom: 8px; letter-spacing: 0; }
.widget__nav { display: grid; gap: 6px; overflow: hidden; transition: max-height .5s var(--ease-out), opacity .3s, margin .4s; max-height: 260px; }
.widget__link {
  display: flex; align-items: center; gap: 8px;
  font-size: 21px; line-height: 1.12;
  color: var(--c-brown-300);
  text-decoration: none;
  transition: color var(--d-fast), transform var(--d-med) var(--ease-spring);
}
.widget__link .paw { width: 0; opacity: 0; transition: width .35s var(--ease-out), opacity .3s; }
.widget__link:hover { color: var(--c-brown); transform: translateX(3px); }
.widget__link.is-active { color: var(--c-brown); }
.widget__link.is-active .paw { width: 18px; opacity: 1; }
.widget__progress { height: 6px; margin: 12px 0 12px; border-radius: 99px; background: var(--c-coral-200); overflow: hidden; }
.widget__progress span { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--c-coral); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.cart-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 14px; border-radius: 14px;
  background: var(--c-coral); color: var(--c-cream);
  font-size: 19px; line-height: 1; white-space: nowrap;
  transition: transform .45s ease;
}
.cart-btn svg { width: 18px; height: 18px; flex: none; }
.cart-btn:hover { transform: rotate(-1.5deg); }
.cart-btn.bump { animation: bump .6s var(--ease-spring); }
.cart-btn .cart-count {
  display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: var(--c-cream); color: var(--c-coral); font-size: 12px; line-height: 18px; text-align: center; margin-left: 2px;
}
.cart-btn.has-items .cart-count { display: inline-block; }

/* ---- Mobile bar + sheet ---- */
.mbar, .sheet, .sheet-backdrop { display: none; }
@media (max-width: 767px) {
  .widget { display: none; }
  .mbar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    padding: 8px 8px 8px 10px;
    border-radius: 24px;
    background: var(--c-bg);
    border: 2px solid var(--c-brown-100);
    box-shadow: var(--sh-widget);
  }
  .mbar__menu { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; min-height: 44px; }
  .mbar__menu .ill { width: 40px; height: 40px; flex: none; }
  .mbar__where { display: grid; line-height: 1.05; min-width: 0; }
  .mbar__where small { font-size: 12px; color: var(--c-brown-300); }
  .mbar__where b { font-weight: 400; font-size: 21px; color: var(--c-brown); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbar__burger { width: 22px; height: 14px; margin-left: auto; margin-right: 6px; position: relative; flex: none; }
  .mbar__burger i { position: absolute; left: 0; right: 0; height: 2.5px; border-radius: 2px; background: var(--c-brown); transition: transform .3s, top .3s, opacity .2s; }
  .mbar__burger i:nth-child(1) { top: 0; } .mbar__burger i:nth-child(2) { top: 6px; } .mbar__burger i:nth-child(3) { top: 12px; }
  .is-sheet-open .mbar__burger i:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .is-sheet-open .mbar__burger i:nth-child(2) { opacity: 0; }
  .is-sheet-open .mbar__burger i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
  .mbar .cart-btn { width: auto; height: 46px; padding: 0 14px; font-size: 18px; border-radius: 15px; }
  .mbar__progress { position: absolute; left: 18px; right: 18px; top: -2px; height: 3px; border-radius: 3px; overflow: hidden; }
  .mbar__progress span { display: block; height: 100%; background: var(--c-coral); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

  .sheet {
    display: block; position: fixed; z-index: 55; left: 12px; right: 12px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    padding: 22px 22px 18px; border-radius: 28px;
    background: var(--c-bg); border: 2px solid var(--c-brown-100); box-shadow: var(--sh-widget);
    transform: translateY(24px) scale(.96); opacity: 0; visibility: hidden;
    transition: transform .45s var(--ease-spring), opacity .25s, visibility 0s .45s;
  }
  .is-sheet-open .sheet { transform: none; opacity: 1; visibility: visible; transition: transform .45s var(--ease-spring), opacity .25s; }
  .sheet .widget__link { font-size: 32px; padding: 6px 0; }
  .sheet .widget__link .paw { width: 0; }
  .sheet .widget__link.is-active .paw { width: 24px; }
  .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 54; background: rgba(30, 28, 24, .25); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
  .is-sheet-open .sheet-backdrop { opacity: 1; visibility: visible; transition: opacity .3s; }
}

/* ---- Product card ---- */
.product { display: grid; justify-items: center; text-align: center; }
.product__media { position: relative; width: calc(500 * var(--u)); }
.product__photo {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--r-card);
  background: #6E2A20;
  transition: transform .6s var(--ease-out);
}
.product__media:hover .product__photo { transform: rotate(-1.5deg) scale(1.02); }
.product__stock { position: absolute; right: calc(-2 * var(--u)); top: calc(-68 * var(--u)); }
.product__title { margin-top: calc(36 * var(--u)); }
.product__desc { margin-top: calc(14 * var(--u)); max-width: calc(290 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.1; text-wrap: balance; }
.product__actions { display: flex; gap: calc(12 * var(--u)); margin-top: calc(20 * var(--u)); }

/* ---- Social cloud ---- */
.social { position: relative; display: inline-grid; place-items: center; width: calc(197 * var(--u)); aspect-ratio: 197 / 126; text-decoration: none; color: var(--c-bg-alt); transition: transform .45s ease; }
.social__shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.social__shape path { fill: var(--c-brown); transition: fill var(--d-fast); }
.social:hover { transform: rotate(-2deg); }
.social__body { position: relative; display: flex; align-items: center; gap: calc(8 * var(--u)); }
.social__icon { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.social__icon path { fill: currentColor; }
.social__text { display: grid; line-height: 1; text-align: left; }
.social__handle { font-size: calc(18 * var(--u)); }
.social__net { font-size: calc(13.7 * var(--u)); opacity: .9; }

/* ---- FAQ: tilted pills, click to open ---- */
.faq-item {
  --tilt: -.8deg;
  background: var(--c-brown);
  color: var(--c-cream);
  border-radius: calc(60 * var(--u));
  padding: calc(30 * var(--u)) calc(40 * var(--u));
  transform: rotate(var(--tilt));
  transition: transform .45s ease;
}
.faq-item:nth-child(3n+2) { --tilt: .7deg; }
.faq-item:nth-child(3n) { --tilt: -.4deg; }
.faq-item:hover { transform: rotate(calc(var(--tilt) * .4)); }
.faq-item__q { width: 100%; display: block; text-align: left; color: var(--c-cream); min-height: 40px; }
.faq-item__q .t-faq { color: var(--c-cream); font-size: calc(30 * var(--u)); line-height: 1; }
.faq-item__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.faq-item__a > div { overflow: hidden; }
.faq-item__a p { padding-top: calc(14 * var(--u)); font-size: var(--t-sm); line-height: 1.15; opacity: 0; transition: opacity .3s; }
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-item__a p { opacity: 1; transition: opacity .4s .12s; }
@media (max-width: 767px) {
  .faq-item__q .t-faq { font-size: 24px; }
  .faq-item { padding: 20px 26px; border-radius: 34px; }
}

/* ---- Modal ---- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; visibility: hidden; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(30, 28, 24, .4); opacity: 0; transition: opacity .3s; }
.modal__card {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto;
  padding: 36px 36px 32px; border-radius: 36px; background: var(--c-bg); box-shadow: var(--sh-widget);
  transform: translateY(30px) scale(.94) rotate(-1deg); opacity: 0;
  transition: transform .5s var(--ease-spring), opacity .25s;
}
.modal.is-open { visibility: visible; }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__card { transform: none; opacity: 1; }
.modal__close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; color: var(--c-brown); transition: background-color var(--d-fast), transform var(--d-med) var(--ease-spring); }
.modal__close:hover { background: var(--c-bg-alt); transform: rotate(90deg); }
.modal__title { font-family: var(--f-display); font-size: 44px; line-height: .8; text-transform: uppercase; margin-bottom: 16px; padding-right: 40px; }
.modal__text { font-size: 20px; line-height: 1.2; }
.modal__card--wide { width: min(760px, 100%); }
.modal__card:focus { outline: none; }
/* «О сборнике» на компьютере: слева фото, справа описание */
@media (min-width: 900px) {
  .modal__card--about { width: min(1040px, 100%); }
  .ab-layout { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 28px; align-items: start; }
  .ab-media { position: sticky; top: 0; display: flex; flex-direction: column; min-height: 360px; }
  .ab-media .sp-gallery { flex: 1; min-height: 0; }
  .ab-media .sp-track { aspect-ratio: auto; height: 100%; }
  .ab-media .sp-photo picture { display: contents; }
  .modal__card--about .co-body { padding-bottom: 17px; }
  .ab-info > .ab-block:first-child { margin-top: 0; }
  .ab-info .ab-story { grid-template-columns: 1fr 170px; }
}

/* checkout frame: header / scrolling content / coral footer */
.modal__card--co { padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: min(92vh, 900px); }
.modal__card--co [data-modal-body] { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.co { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.co-head { padding: 22px 36px 0; }
.co-head__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-right: 40px; }
.co-title { font-family: var(--f-display); font-size: 36px; line-height: .78; text-transform: uppercase; color: var(--c-brown); }
.co-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 9px; background: var(--c-coral); color: var(--c-cream); font-size: 15px; line-height: 1; white-space: nowrap; }
.co-sub { margin-top: 6px; max-width: 640px; text-wrap: pretty; font-size: 15px; line-height: 1.1; color: var(--c-brown); }
.co-body { flex: 1; min-height: 120px; overflow: auto; padding: 12px 36px 14px; overscroll-behavior: contain; }
.co-foot { position: relative; flex: none; color: var(--c-cream); margin-top: -1px; }
.co-foot__wave { height: 30px; overflow: hidden; margin-bottom: -1px; line-height: 0; }
.co-foot__strip { display: flex; width: max-content; height: 100%; animation: co-wave 80s linear infinite; }
.co-foot .co-wave { height: 100%; width: calc(30px * 627 / 67); max-width: none; flex: none; display: block; }
@keyframes co-wave { from { transform: translateX(0); } to { transform: translateX(calc(-30px * 627 / 67)); } }
.co-foot__inner { background: var(--c-coral); padding: 6px 32px 18px; display: flex; align-items: center; gap: 22px; }
.co-foot__top { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex: 1; min-width: 0; }
.co-progress { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 170px; }
.co-progress__bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(254, 248, 237, .3); overflow: hidden; }
.co-progress__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--c-cream); transform-origin: 0 50%; transform: scaleX(max(var(--p, 0), .04)); transition: transform .5s var(--ease-out); }
.co-progress__pct { font-size: 15px; min-width: 3ch; }
.co-foot__sum { text-align: right; }
.co-foot__total { font-size: 24px; line-height: 1; }
.co-foot__meta { font-size: 14px; line-height: 1.1; margin-top: 3px; opacity: .95; }
.co-foot__btns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, auto); gap: 10px; flex: none; }
.co-fbtn { min-height: 42px; padding: 0 20px; border-radius: 22px; font-size: 18px; line-height: 1; white-space: nowrap; transition: transform .45s ease; }
.co-fbtn:hover { transform: rotate(-1.5deg); }
.co-fbtn--ghost { box-shadow: inset 0 0 0 2px var(--c-cream); color: var(--c-cream); }
.co-fbtn--solid { background: var(--c-cream); color: var(--c-coral); }
.co-body .co-summary { margin-top: 4px; }
.modal__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-right: 44px; }
.modal__head .modal__title { margin: 0; padding: 0; }
.modal__cat { width: 56px; flex: none; }

/* ---- Checkout ---- */
.co-steps { list-style: none; display: flex; gap: 6px; margin: 0 0 18px; padding: 0 48px 0 0; font-size: 15px; color: var(--c-brown-300); flex-wrap: wrap; }
.co-steps li { display: flex; align-items: center; gap: 6px; }
.co-steps li:not(:last-child)::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--c-brown-100); margin-left: 4px; }
.co-steps span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--c-brown-100); color: var(--c-brown); font-size: 14px; }
.co-steps .is-current { color: var(--c-brown); }
.co-steps .is-current span { background: var(--c-coral); color: var(--c-cream); }
.co-steps .is-done span { background: var(--c-brown); color: var(--c-cream); }
.co-back { font-size: 17px; color: var(--c-brown-300); margin-bottom: 6px; min-height: 32px; transition: color .2s; }
.co-back:hover { color: var(--c-brown); }

.co-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.co-item {
  display: grid; grid-template-columns: 100px 1fr auto; gap: 16px; align-items: center;
  padding: 12px; border-radius: 22px; background: var(--c-bg-alt);
  transition: opacity .25s, transform .25s;
}
.co-item.is-removing { opacity: 0; transform: translateX(30px); }
.co-item__img { width: 100px; height: 100px; object-fit: cover; border-radius: 16px; background: #6E2A20; }
.co-item__info { display: grid; gap: 4px; min-width: 0; }
.co-item__info b { font-weight: 400; font-size: 21px; line-height: 1.05; }
.co-item__unit { font-size: 15px; color: var(--c-brown-300); }
.co-qty { display: inline-flex; align-items: center; margin-top: 6px; border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 2px var(--c-brown-100); width: max-content; }
.co-qty button { width: 38px; height: 38px; font-size: 22px; line-height: 1; color: var(--c-brown); border-radius: 12px; }
.co-qty button:disabled { opacity: .3; cursor: default; }
.co-qty button:not(:disabled):hover { background: var(--c-brown-100); }
.co-qty input { width: 38px; height: 38px; border: 0; background: none; text-align: center; font: inherit; font-size: 19px; color: var(--c-brown); -moz-appearance: textfield; }
.co-qty input::-webkit-inner-spin-button, .co-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.co-item__side { display: grid; justify-items: end; gap: 8px; align-self: stretch; align-content: space-between; }
.co-item__sum { font-size: 21px; white-space: nowrap; }
.co-item__del { font-size: 15px; color: var(--c-brown-300); text-decoration: underline; text-underline-offset: 3px; min-height: 30px; }
.co-item__del:hover { color: var(--c-coral); }
.co-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 14px; border-top: 2px dashed var(--c-brown-100); font-size: 19px; }
.co-total b { font-weight: 400; font-size: 28px; }
.co-hint { font-size: 15px; color: var(--c-brown-300); margin-top: 8px; line-height: 1.2; }
.co-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.co-empty { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 10px 0 6px; font-size: 20px; }


.co-form { display: grid; gap: 18px; }
.co-group { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.co-group legend { font-family: var(--f-display); text-transform: uppercase; font-size: 26px; line-height: .9; margin-bottom: 10px; padding: 0; }
.co-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.co-grid > .co-field:first-child { grid-column: 1 / -1; }
.co-grid > .co-field:last-child:nth-child(4) { grid-column: 1 / -1; }
.co-grid--2 > .co-field:first-child { grid-column: auto; }
.co-grid--addr { grid-template-columns: 2fr 1fr; margin-top: 4px; }
.co-grid--addr > .co-field:first-child { grid-column: auto; }
.co-field { display: grid; gap: 5px; align-content: start; }
.co-field__label { font-size: 15px; color: var(--c-brown); }
.co-field__hint { font-size: 13px; color: var(--c-brown-300); line-height: 1.15; }
.co-field__err { font-size: 13px; color: var(--c-coral-600); min-height: 0; }
.co-field:not(.is-error) .co-field__err { display: none; }
.co-form input:not([type=radio]):not([type=checkbox]), .co-form select, .co-form textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 14px;
  border: 2px solid var(--c-brown-100); background: transparent; color: var(--c-ink);
  font: inherit; font-size: 18px; letter-spacing: 0; transition: border-color .2s, box-shadow .2s;
}
.co-form textarea { resize: vertical; min-height: 64px; }
.co-form ::placeholder { color: #D5BBAA; opacity: 1; }
/* browser autofill: keep our paper background instead of grey/blue/yellow */
.co-form input:-webkit-autofill, .co-form input:-webkit-autofill:hover, .co-form input:-webkit-autofill:focus, .co-form select:-webkit-autofill {
  -webkit-text-fill-color: var(--c-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--c-bg) inset;
  box-shadow: 0 0 0 1000px var(--c-bg) inset;
  caret-color: var(--c-ink);
  transition: background-color 99999s ease 0s;
}
.co-form input:autofill { background: var(--c-bg); color: var(--c-ink); }
.co-form select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2381412E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px; }
.co-form input[list]::-webkit-calendar-picker-indicator { opacity: 0; }
.co-form input:focus, .co-form select:focus, .co-form textarea:focus { outline: none; border-color: var(--c-brown-300); box-shadow: 0 0 0 4px rgba(242, 92, 80, .15); }
.co-field.is-error input { border-color: var(--c-coral); }
.co-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.co-chip input, .co-carrier input, .co-method input { position: absolute; opacity: 0; pointer-events: none; }
.co-chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 12px; background: var(--c-bg-alt); font-size: 17px; cursor: pointer; transition: background-color .2s, color .2s; }
.co-chip input:checked + span { background: var(--c-brown); color: var(--c-cream); }
.co-chip input:focus-visible + span, .co-carrier input:focus-visible ~ .co-carrier__logo, .co-method input:focus-visible + span { outline: 3px solid var(--c-coral); outline-offset: 2px; }
.co-handle { margin-top: 8px; }

.co-carriers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-carrier {
  position: relative; display: grid; gap: 4px; padding: 14px 16px; border-radius: 18px; cursor: pointer;
  background: transparent; box-shadow: inset 0 0 0 2px var(--c-brown-100); transition: box-shadow .2s, transform .45s ease;
}
.co-carrier:has(input:checked) { box-shadow: inset 0 0 0 3px var(--c-coral); }
.co-carrier:not(.is-off):hover { transform: rotate(-1deg); }
.co-carrier.is-off { opacity: .5; cursor: not-allowed; }
.co-carrier__logo { font-size: 22px; line-height: 1; font-weight: 400; }
.co-carrier__logo--cdek { color: #1AB248; }
.co-carrier__logo--ozon { color: #005BFF; }
.co-carrier__meta { font-size: 15px; color: var(--c-brown-300); }
.co-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.co-method span { display: grid; gap: 2px; padding: 9px 14px; border-radius: 14px; background: var(--c-bg-alt); cursor: pointer; transition: background-color .2s, color .2s; }
.co-method b { font-weight: 400; font-size: 17px; }
.co-method small { font-size: 13px; opacity: .8; }
.co-method input:checked + span { background: var(--c-brown); color: var(--c-cream); }
.co-point { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.co-map { min-height: 46px; padding: 0 16px; font-size: 17px; margin-top: 24px; border-radius: 14px; }

.co-check { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.2; cursor: pointer; }
.co-check input {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 24px; height: 24px; margin: -2px 0 0; border-radius: 8px;
  border: 2px solid var(--c-brown-100); background: transparent no-repeat center / 14px 14px;
  cursor: pointer; transition: background-color .2s, border-color .2s, transform .45s ease;
}
.co-check input:hover { border-color: var(--c-brown-300); transform: rotate(-4deg); }
.co-check input:checked {
  background-color: var(--c-coral); border-color: var(--c-coral);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l2.9 2.9 6.1-6.4' fill='none' stroke='%23FEF8ED' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  animation: check-pop .35s var(--ease-spring);
}
@keyframes check-pop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
.co-check input:focus-visible { outline: 3px solid var(--c-coral); outline-offset: 2px; }
.co-field.is-error input, .co-check--agree.is-error input { border-color: var(--c-coral); }
.co-link { text-decoration: underline; text-underline-offset: 2px; color: var(--c-brown); font-size: inherit; }
.co-link:hover { color: var(--c-coral); }
.co-agree-err:empty { display: none; }
.co-agree-err { display: block; margin-top: -10px; }

.co-summary { display: grid; gap: 8px; padding: 16px 18px; border-radius: 20px; background: var(--c-bg-alt); }
.co-sum-row { display: flex; justify-content: space-between; gap: 16px; font-size: 17px; }
.co-sum-row span:last-child { white-space: nowrap; }
.co-sum-row--total { padding-top: 10px; border-top: 2px dashed var(--c-brown-100); font-size: 20px; align-items: baseline; }
.co-sum-row--total b { font-weight: 400; font-size: 30px; }
.co-pay { width: 100%; }
.co-pay-box { display: grid; gap: 16px; justify-items: center; text-align: center; font-size: 19px; }
.co-pay-box .co-summary { width: 100%; text-align: left; }
.co-pay-box .modal__cat { width: 80px; }

@media (max-width: 767px) {
  .modal { padding: 0; align-items: end; }
  .modal__card { width: 100%; max-height: 92vh; border-radius: 28px 28px 0 0; padding: 26px 18px calc(24px + env(safe-area-inset-bottom)); }
  .modal__card--co { padding: 0; max-height: 94vh; }
  .modal__close { top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 12px; background: var(--c-bg-alt); z-index: 2; }
  .modal__close:hover { transform: none; }
  .co-head { padding: 16px 18px 0; }
  .co-head__row { gap: 10px; }
  .co-title { font-size: 30px; }
  .co-badge { height: 24px; font-size: 14px; padding: 0 9px; }
  .co-sub { font-size: 14px; margin-top: 4px; }
  .co-body { padding: 10px 18px 14px; }
  .co-foot__wave { height: 24px; }
  .co-foot .co-wave { width: calc(24px * 627 / 67); }
  @keyframes co-wave { from { transform: translateX(0); } to { transform: translateX(calc(-24px * 627 / 67)); } }
  .co-foot__inner { display: grid; padding: 4px 16px calc(12px + env(safe-area-inset-bottom)); gap: 8px; }
  .co-progress { max-width: none; }
  .co-foot__btns { grid-auto-columns: 1fr; width: 100%; }
  .co-foot__top { gap: 14px; }
  .co-progress { gap: 8px; }
  .co-progress__pct { font-size: 14px; }
  .co-foot__total { font-size: 20px; }
  .co-foot__meta { font-size: 13px; }
  .co-foot__btns { gap: 8px; }
  .co-fbtn { min-height: 40px; font-size: 16px; padding: 0 10px; }
  .modal__title { font-size: 34px; }
  .co-item { grid-template-columns: 76px 1fr; gap: 12px; }
  .co-item__img { width: 76px; height: 76px; border-radius: 12px; }
  .co-item__side { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; }
  .co-item__side .co-item__sum { order: 2; }
  .co-item__info b { font-size: 19px; }
  .co-grid, .co-grid--addr, .co-carriers, .co-point { grid-template-columns: 1fr; }
  .co-map { margin-top: 0; }
}


/* ---- «О сборнике» ---- */
.sp-gallery { position: relative; border-radius: 24px; overflow: hidden; background: var(--c-bg-alt); }
.sp-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 16 / 10; outline: none; }
.sp-track::-webkit-scrollbar { display: none; }
.sp-slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; display: grid; place-items: center; overflow: hidden; }
.sp-photo { background: #6E2A20; }
.sp-photo img { width: 100%; height: 100%; object-fit: cover; }
.sp-spread { grid-template-columns: 1fr 1fr; gap: 0; padding: 22px 26px; background: #E9D2B8; }
.sp-page { position: relative; height: 100%; background: #FFFBF3; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 16px; box-shadow: inset -10px 0 14px -10px rgba(129, 65, 46, .25); border-radius: 6px 0 0 6px; }
.sp-page--r { border-radius: 0 6px 6px 0; box-shadow: inset 10px 0 14px -10px rgba(129, 65, 46, .25); text-align: center; }
.sp-grid { width: 72%; }
.sp-cross { font-size: 12px; letter-spacing: .25em; color: var(--c-brown-300); }
.sp-num { position: absolute; top: 8px; left: 12px; font-size: 11px; color: var(--c-brown-300); }
.sp-page .sp-ill { width: 78%; height: auto; }
.sp-page b { font-weight: 400; font-family: var(--f-display); text-transform: uppercase; font-size: 18px; line-height: .9; }
.sp-page p { font-size: 13px; line-height: 1.15; max-width: 200px; }
.sp-soon { position: absolute; right: 12px; bottom: 10px; padding: 4px 10px; border-radius: 8px; background: rgba(129, 65, 46, .85); color: var(--c-cream); font-size: 12px; }
.sp-arrow { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border-radius: 14px; background: rgba(254, 248, 237, .92); color: var(--c-brown); font-size: 28px; line-height: 1; display: grid; place-items: center; transition: transform .45s ease; box-shadow: var(--sh-soft); }
.sp-arrow:hover { transform: rotate(-4deg); }
.sp-arrow--prev { left: 10px; } .sp-arrow--next { right: 10px; }
.sp-dots { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; display: flex; gap: 6px; }
.sp-dots button { width: 8px; height: 8px; border-radius: 99px; background: rgba(254, 248, 237, .6); transition: width .3s, background-color .3s; }
.sp-dots button.is-on { width: 22px; background: var(--c-cream); }

.ab-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.ab-facts li { padding: 6px 12px; border-radius: 10px; box-shadow: inset 0 0 0 2px var(--c-brown-100); font-size: 15px; }
.ab-block { margin-top: 26px; }
.ab-h { font-family: var(--f-display); text-transform: uppercase; font-size: 26px; line-height: .9; margin-bottom: 12px; }
.ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ab-card { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 20px; background: var(--c-bg-alt); font-size: 15px; line-height: 1.2; }
.ab-card b { font-weight: 400; font-size: 19px; line-height: 1.05; color: var(--c-brown); }
.ab-card--wide { grid-column: 1 / -1; }
.ab-card--accent { background: var(--c-coral); color: var(--c-cream); }
.ab-card--accent b { color: var(--c-cream); }
.ab-levels { display: grid; gap: 6px; margin-top: 4px; }
.ab-level { display: grid; grid-template-columns: 80px 1fr 28px; align-items: center; gap: 10px; font-size: 15px; }
.ab-level i { height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--c-coral) calc(var(--w) * 100%), rgba(129, 65, 46, .1) 0); }
.ab-level em { font-style: normal; text-align: right; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-chips span { padding: 4px 9px; border-radius: 8px; background: var(--c-bg); font-size: 13px; }
.ab-chips:not(.ab-chips--who) span { background: var(--c-brown); color: var(--c-cream); }
.ab-chips--who span { padding: 8px 14px; border-radius: 12px; background: var(--c-bg-alt); font-size: 16px; }
.ab-story { display: grid; grid-template-columns: 1fr 240px; gap: 18px; align-items: center; padding: 18px 20px; border-radius: 22px; background: var(--c-bg-alt); }
.ab-story p { font-size: 17px; line-height: 1.2; }
.ab-story .sp-ill { width: 100%; height: auto; }
.ab-fact { padding: 18px 20px; border-radius: 22px; box-shadow: inset 0 0 0 2px var(--c-brown-100); }
.ab-fact p { font-size: 17px; line-height: 1.2; }
.ab-fact p.is-swap { animation: fact-in .45s var(--ease-out); }
@keyframes fact-in { from { opacity: 0; transform: translateY(8px); } }
.ab-fact .co-link { margin-top: 10px; font-size: 15px; }
.ab-set__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.ab-plus { font-size: 30px; color: var(--c-coral); }
.ab-stock { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.ab-stock__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-cream); animation: a-pulse 1.6s ease-in-out infinite; }
.co-fstep { display: flex; align-items: center; justify-content: space-between; min-height: 42px; border-radius: 22px; background: var(--c-cream); color: var(--c-coral); padding: 0 6px; font-size: 18px; }
.co-fstep button { width: 34px; height: 34px; border-radius: 17px; font-size: 22px; color: var(--c-coral); }
.co-fstep button:disabled { opacity: .3; }
.co-fstep b { font-weight: 400; font-size: 20px; }
@media (max-width: 767px) {
  .sp-track { aspect-ratio: 16 / 10; }
  .sp-spread { padding: 12px; }
  .sp-page { padding: 8px; gap: 4px; }
  .sp-page b { font-size: 13px; } .sp-page p { font-size: 10px; } .sp-cross { font-size: 9px; }
  .ab-grid, .ab-story, .ab-set__row { grid-template-columns: 1fr; }
  .ab-story .sp-ill { max-width: 220px; justify-self: center; }
  .ab-plus { justify-self: center; line-height: .6; }
  .ab-stock { font-size: 14px; }
  .co-fstep { min-height: 40px; font-size: 15px; }
}


/* ---- Documents ---- */
.doc { font-size: 16px; line-height: 1.35; color: var(--c-brown); letter-spacing: 0; }
.doc .doc-meta { display: none; }
.doc h3 { font-family: var(--f-display); text-transform: uppercase; font-size: 22px; line-height: .95; margin: 22px 0 8px; }
.doc h3:first-of-type { margin-top: 4px; }
.doc p { margin: 0 0 8px; }
.doc-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 6px 0 10px; font-size: 14px; line-height: 1.25; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--c-brown-100); }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 2px solid var(--c-brown-100); }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table th { font-weight: 400; background: var(--c-bg-alt); }
@media (max-width: 767px) {
  .doc { font-size: 15px; }
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table td { display: block; width: 100%; }
  .doc-table thead { display: none; }
  .doc-table td { border-bottom: 0; padding: 4px 12px; }
  .doc-table td:first-child { padding-top: 12px; font-size: 15px; }
  .doc-table tr { border-bottom: 2px solid var(--c-brown-100); padding-bottom: 8px; }
}

/* ---- Cookie banner ---- */
.cookie {
  position: fixed; z-index: 90; left: 20px; bottom: 20px; width: min(420px, calc(100% - 40px));
  display: flex; align-items: center; gap: 16px; padding: 14px 14px 14px 18px; border-radius: 22px;
  background: var(--c-bg); border: 2px solid var(--c-brown-100); box-shadow: var(--sh-widget);
  font-size: 15px; line-height: 1.2; color: var(--c-brown);
  opacity: 0; transform: translateY(20px); transition: opacity .35s, transform .45s var(--ease-out);
}
.cookie.is-on { opacity: 1; transform: none; }
.cookie .co-link { font-size: inherit; }
.cookie__ok { flex: none; font-size: 18px !important; min-height: 44px; padding: 10px 18px !important; }
@media (max-width: 767px) { .cookie { left: 12px; right: 12px; width: auto; bottom: calc(86px + env(safe-area-inset-bottom)); } }

.fm-ill .fm-pupil { transition: transform .07s linear; transform-box: view-box; }
.hero-pupil { transition: transform .07s linear; transform-box: view-box; }
.ab-story__art .ill { width: 100%; height: auto; }
.co-empty .modal__cat { width: 90px; }

/* ---- Butterfly cursor ---- */
.bfly { display: none; }
.has-bfly .bfly {
  display: block; position: fixed; left: 0; top: 0; z-index: 10000; width: 30px; pointer-events: none;
  transform-origin: 15px 17px; will-change: transform; transition: opacity .2s;
}
.has-bfly, .has-bfly * { cursor: none !important; }
.has-bfly input:not([type=checkbox]):not([type=radio]), .has-bfly textarea { cursor: text !important; }
.has-bfly select { cursor: pointer !important; }
.bfly__svg { width: 100%; height: auto; display: block; transform-origin: 30% 60%; animation: bfly-flap .32s ease-in-out infinite alternate; transition: scale .25s var(--ease-spring); }
.bfly.is-hover .bfly__svg { animation-duration: .16s; scale: 1.18; }
.bfly.is-down .bfly__svg { scale: .9; }
.bfly.is-hidden { opacity: 0; }
@keyframes bfly-flap { from { transform: scaleX(1); } to { transform: scaleX(.78) skewY(-4deg); } }
@media (prefers-reduced-motion: reduce) { .bfly__svg { animation: none; } }

/* ---- Toast ---- */
.toast {
  position: fixed; z-index: 120; left: 50%; bottom: 28px;
  padding: 14px 22px; border-radius: 20px; background: var(--c-brown); color: var(--c-cream); font-size: 20px;
  transform: translate(-50%, 140%); opacity: 0; visibility: hidden;
  transition: transform .5s var(--ease-spring), opacity .3s, visibility 0s .5s;
  box-shadow: var(--sh-widget);
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .5s var(--ease-spring), opacity .3s; }
@media (max-width: 767px) { .toast { bottom: 96px; width: calc(100% - 40px); text-align: center; } }
html:has(.modal.is-open) .toast { bottom: auto; top: 20px; transform: translate(-50%, -160%); }
html:has(.modal.is-open) .toast.is-on { transform: translate(-50%, 0); }

@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.18) rotate(-4deg); } 70% { transform: scale(.96); } 100% { transform: scale(1); } }

/* ---- animations.css ---- */
/* =========================================================
   SVG animation system
   Entrance (e-*) uses the `translate` / `scale` properties and
   opacity — they run once when .ill gets .is-in.
   Idle loops (i-*) use `transform` (or `rotate`), so both compose.
   ========================================================= */

.ill * { transform-box: view-box; transform-origin: var(--o, 50% 50%); }

/* ---------- entrance ---------- */
.ill .e-up, .ill .e-left, .ill .e-rise, .ill .e-peek, .ill .e-fade, .ill .e-pop {
  opacity: 0;
  transition:
    translate var(--et, 1s) var(--ease-out) var(--ed, 0s),
    scale .7s var(--ease-spring) var(--ed, 0s),
    opacity .7s ease var(--ed, 0s);
}
.ill .e-up { translate: 0 var(--ey, 26px); }
.ill .e-rise { translate: 0 var(--ey, 60px); }
.ill .e-peek { translate: 0 var(--ey, 60px); }
.ill .e-left { translate: var(--ex, -60px) 0; }
.ill .e-pop { scale: 0; }
.ill.is-in .e-up, .ill.is-in .e-left, .ill.is-in .e-rise, .ill.is-in .e-peek, .ill.is-in .e-fade, .ill.is-in .e-pop {
  opacity: 1; translate: 0 0; scale: 1;
}

/* text / blocks reveal */
.reveal { opacity: 0; translate: 0 28px; transition: translate .9s var(--ease-out) var(--rd, 0s), opacity .8s ease var(--rd, 0s); }
.reveal.is-in { opacity: 1; translate: 0 0; }

/* ---------- idle loops (only while visible) ---------- */
.ill:not(.is-in) * { animation-play-state: paused !important; }

.i-bob { animation: a-bob var(--bd, 4s) ease-in-out infinite; }
@keyframes a-bob { 50% { transform: translateY(var(--by, -4px)); } }

.i-breathe { animation: a-breathe var(--bd, 4s) ease-in-out infinite; }
@keyframes a-breathe { 50% { transform: scale(var(--bs, 1.03)); } }

.i-sway { animation: a-sway var(--sd, 5s) ease-in-out infinite; }
@keyframes a-sway { 0%, 100% { transform: rotate(calc(var(--sa, 2deg) * -1)); } 50% { transform: rotate(var(--sa, 2deg)); } }

.i-swingp { animation: a-swingp var(--sd, 5s) ease-in-out infinite; }
@keyframes a-swingp { 0%, 100% { rotate: calc(var(--sa, 3deg) * -1); } 50% { rotate: var(--sa, 3deg); } }

.i-tail { animation: a-tail var(--sd, 3s) ease-in-out infinite; }
@keyframes a-tail { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(calc(var(--sa, 6deg) * -1)); } 60% { transform: rotate(var(--sa, 6deg)); } }

.i-look { animation: a-look var(--ld, 4s) ease-in-out infinite; }
@keyframes a-look {
  0%, 18% { transform: translate(0, 0); }
  28%, 52% { transform: translate(var(--lx, 3px), var(--ly, 0)); }
  62%, 78% { transform: translate(calc(var(--lx, 3px) * -.6), calc(var(--ly, 0px) * -.6)); }
  88%, 100% { transform: translate(0, 0); }
}

.i-twitch { animation: a-twitch 5s ease-in-out infinite; }
@keyframes a-twitch { 0%, 70%, 100% { rotate: 0deg; } 74% { rotate: -6deg; } 78% { rotate: 4deg; } 82% { rotate: -3deg; } 86% { rotate: 0deg; } }

.i-swing { animation: a-swing 2.4s ease-in-out infinite; }
@keyframes a-swing { 0%, 100% { rotate: -10deg; } 50% { rotate: 10deg; } }

.i-pulse { animation: a-pulse 1.6s ease-in-out infinite; }
@keyframes a-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .75; } }

.i-float { animation: a-float var(--fd, 3.5s) ease-in-out infinite; }
@keyframes a-float { 50% { transform: translateY(var(--fy, -5px)); } }

.i-wiggle { animation: a-wiggle 2.2s ease-in-out infinite; }
@keyframes a-wiggle { 0%, 60%, 100% { rotate: 0deg; } 68% { rotate: -14deg; } 76% { rotate: 12deg; } 84% { rotate: -6deg; } 92% { rotate: 0deg; } }

.i-wiggle-cat { animation: a-wiggle-cat 3.2s ease-in-out infinite; }
@keyframes a-wiggle-cat { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 55% { transform: rotate(0); } }

.i-drift { animation: a-drift var(--dd, 14s) ease-in-out infinite; }
@keyframes a-drift { 50% { transform: translateX(var(--dx, 14px)); } }

.i-petal { animation: a-petal var(--pd, 6s) ease-in-out var(--pdl, 0s) infinite; transform-origin: center; transform-box: fill-box; }
@keyframes a-petal {
  0% { transform: translate(0, -10px) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  50% { transform: translate(calc(var(--px, -16px) * .6), 8px) rotate(24deg); }
  85% { opacity: 1; }
  100% { transform: translate(var(--px, -16px), 22px) rotate(-12deg); opacity: 0; }
}

.i-blink { animation: a-blink 4.6s infinite; scale: 1 0; }
@keyframes a-blink { 0%, 90%, 100% { scale: 1 0; } 94% { scale: 1 1; } }

.i-glow { animation: a-glow 3s ease-in-out infinite; }
@keyframes a-glow { 0%, 100% { opacity: .55; transform: scale(.95); } 40% { opacity: 1; transform: scale(1.05); } 60% { opacity: .8; } }

.i-glowfill { animation: a-glowfill 3s ease-in-out infinite; }
@keyframes a-glowfill { 0%, 100% { fill: #E6A74F; } 40% { fill: #FFC85C; } 60% { fill: #F2B552; } }

.i-grass { animation: a-grass var(--gd, 3.4s) ease-in-out infinite; }
@keyframes a-grass { 0%, 100% { transform: rotate(calc(var(--ga, 2deg) * -1)); } 50% { transform: rotate(var(--ga, 2deg)); } }

.i-tap { animation: a-tap var(--td, 2.4s) ease-in-out var(--tdl, 0s) infinite; }
@keyframes a-tap { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-4deg); } 80% { transform: rotate(0); } 88% { transform: rotate(-3deg); } }

.i-tilt { animation: a-tilt 6s ease-in-out infinite; }
@keyframes a-tilt { 0%, 100% { rotate: 0deg; } 30% { rotate: -3deg; } 65% { rotate: 2.5deg; } }

.i-rays { animation: a-rays 3s ease-in-out infinite; }
@keyframes a-rays { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.i-cloudline { animation: a-cloudline var(--dd, 7s) ease-in-out infinite; }
@keyframes a-cloudline { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--dx, 8px)); } }

/* decorative clouds drifting as a whole */
.cloud-drift { animation: a-cloud var(--dd, 26s) ease-in-out infinite; }
@keyframes a-cloud { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--dx, 60px), -8px); } }

/* falling sakura petals in sections */
.petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.petal { position: absolute; top: -40px; left: var(--x); width: var(--s); animation: petal-fall var(--d) linear var(--dl) infinite; }
.petal svg { display: block; width: 100%; height: auto; fill: var(--c); animation: petal-sway calc(var(--d) / 3) ease-in-out var(--dl) infinite alternate; }
@keyframes petal-fall { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: var(--o); } 88% { opacity: var(--o); } 100% { transform: translateY(var(--h, 700px)); opacity: 0; } }
@keyframes petal-sway { 0% { transform: translateX(0) rotate(var(--r0)); } 100% { transform: translateX(var(--sx)) rotate(var(--r1)); } }
.petals:not(.is-on) .petal, .petals:not(.is-on) .petal svg { animation-play-state: paused; }

/* hover reactions on illustrations */
.ill-hover { transition: transform .6s ease; }
.ill-hover:hover { transform: rotate(-1deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .i-blink { scale: 1 0; }
  html { scroll-behavior: auto; }
}

/* ---- sections.css ---- */
/* =========================================================
   Sections — desktop mirrors the 1440 Figma frame (in --u units),
   mobile (<768px) switches to a stacked, story-like flow.
   ========================================================= */

.band { background: var(--c-bg-alt); }
.ill { width: 100%; height: auto; overflow: visible; }
.abs { position: absolute; }

/* ---------- Top bar (on the first screen) ---------- */
.topbar {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0;
  height: calc(124 * var(--u));
  display: flex; align-items: center; gap: calc(36 * var(--u));
  padding: calc(12 * var(--u)) var(--gutter);
}
.topbar__word { flex: 1 0 0; display: flex; }
.topbar__word .word { width: calc(134 * var(--u)); }
.topbar__nav { display: flex; align-items: center; gap: calc(36 * var(--u)); }
.topbar__nav a { font-size: calc(16 * var(--u)); line-height: 1.6; color: #000; text-decoration: none; display: inline-block; transition: transform .45s ease; }
.topbar__nav a:hover { transform: rotate(-2deg); }
.topbar__logo { width: calc(100 * var(--u)); }
.brand__logo { width: 100%; }
.topbar__end { flex: 1 0 0; display: flex; justify-content: flex-end; }
.topbar__cart {
  display: inline-flex; align-items: center; gap: 8px; height: calc(31 * var(--u)); min-height: 31px; padding: 0 calc(10 * var(--u));
  border-radius: 8px; background: #F2584B; color: #FEF8EE; font-size: calc(16 * var(--u)); line-height: 1; text-transform: uppercase;
  transition: transform .45s ease;
}
.topbar__cart:hover { transform: rotate(-2deg); }
.topbar__cart .ico { width: calc(20 * var(--u)); height: calc(20 * var(--u)); min-width: 16px; min-height: 16px; }

/* ---------- 01 Hero ---------- */
.hero { height: max(calc(824 * var(--u)), calc(12 * var(--u) + 100vw * 812 / 1440)); overflow: hidden; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(44 * var(--u)); background: var(--c-bg-alt); z-index: 0; }
.hero__art { position: absolute; z-index: 1; top: calc(12 * var(--u)); left: 0; width: 100vw; }
.hero__wrap { height: 100%; z-index: 2; }
.hero__svg { opacity: 0; translate: 0 24px; transition: opacity 1s ease .1s, translate 1.2s var(--ease-out) .1s; }
.hero__svg.is-in, .hero__svg.was-in { opacity: 1; translate: 0 0; }
.hero__text { position: absolute; left: calc(745 * var(--u)); top: calc(330 * var(--u)); width: calc(662 * var(--u)); display: grid; justify-items: center; text-align: center; }
.hero__jp .jp { width: calc(262 * var(--u)); }
.hero__title { margin-top: 0; }
.hero__sub { margin-top: calc(28 * var(--u)); width: calc(470 * var(--u)); }
.hero__cta { margin-top: calc(38 * var(--u)); padding-inline: calc(28 * var(--u)); }

/* ---------- 02 Story ---------- */
.story__wrap { height: calc(481 * var(--u)); }
.story__text { position: absolute; left: var(--gutter-l); top: calc(118 * var(--u)); width: calc(640 * var(--u)); }
.story__p { margin-top: calc(26 * var(--u)); width: calc(585 * var(--u)); }
.story__cta { position: absolute; left: calc(382 * var(--u)); top: calc(201 * var(--u)); }
.story__art { position: absolute; left: calc(876 * var(--u)); top: calc(98 * var(--u)); width: calc(452 * var(--u)); }

/* ---------- Dividers ---------- */
.divider { position: relative; overflow: hidden; line-height: 0; background: var(--c-bg); }
.divider__svg { width: 100%; height: auto; overflow: visible; }
.divider--down .divider__svg path:not([fill="none"]) { animation: a-drift 16s ease-in-out infinite; --dx: 10px; }
.divider--up .divider__svg path:not([fill="none"]) { animation: a-drift 18s ease-in-out infinite; --dx: -10px; }

/* ---------- 03 How to help ---------- */
.help__wrap { height: calc(813 * var(--u)); }
.help__pagoda { position: absolute; left: 0; top: calc(15 * var(--u)); width: calc(238 * var(--u)); opacity: .9; pointer-events: none; }
.help__title { position: absolute; right: calc(99 * var(--u)); top: calc(78 * var(--u)); white-space: nowrap; }
.step { position: absolute; inset: 0; pointer-events: none; }
.step > * { pointer-events: auto; }
.step__art { position: absolute; }
.step--1 .step__art { left: calc(173 * var(--u)); top: calc(228 * var(--u)); width: calc(425 * var(--u)); }
.step--2 .step__art { left: calc(845 * var(--u)); top: calc(284 * var(--u)); width: calc(445 * var(--u)); }
.step__text { position: absolute; width: calc(500 * var(--u)); display: grid; justify-items: center; text-align: center; }
.step--1 .step__text { left: calc(136 * var(--u)); top: calc(548 * var(--u)); }
.step--2 .step__text { left: calc(764 * var(--u)); top: calc(658 * var(--u)); }
.step__head { display: flex; align-items: center; gap: calc(24 * var(--u)); justify-self: start; }
.step__head .t-h2 { white-space: nowrap; }
.step__p { margin-top: calc(22 * var(--u)); width: calc(490 * var(--u)); font-size: calc(25 * var(--u)); }

/* ---------- 04 Books ---------- */
.books__wrap { height: calc(840 * var(--u)); }
.books__cloud { position: absolute; z-index: 0; pointer-events: none; }
.books__cloud--l { left: calc(-100 * var(--u)); top: calc(6 * var(--u)); width: calc(446 * var(--u)); }
.books__cloud--r { right: calc(-60 * var(--u)); top: calc(40 * var(--u)); width: calc(420 * var(--u)); }
.books .product { position: absolute; top: calc(162 * var(--u)); width: calc(500 * var(--u)); }
.books .product:nth-child(1) { left: calc(189 * var(--u)); }
.books .product:nth-child(2) { left: calc(751 * var(--u)); }
.product__title { white-space: nowrap; }

/* ---------- 05 Social ---------- */
.social-sec__wrap { height: calc(530 * var(--u)); }
.social-sec__text { position: absolute; left: var(--gutter-l); top: calc(118 * var(--u)); width: calc(640 * var(--u)); }
.social-sec__p { margin-top: calc(26 * var(--u)); width: calc(590 * var(--u)); }
.social-sec__links { display: flex; gap: calc(12 * var(--u)); margin-top: calc(30 * var(--u)); margin-left: calc(-3 * var(--u)); }
.social-sec__art { position: absolute; left: calc(835 * var(--u)); top: calc(94 * var(--u)); width: calc(506 * var(--u)); }

/* ---------- 06 FAQ ---------- */
.faq { overflow: hidden; }
.faq__sakura { position: absolute; left: 0; top: 0; width: calc(548 * var(--u)); pointer-events: none; }
.faq__wrap { padding: calc(64 * var(--u)) var(--gutter) calc(80 * var(--u)); display: grid; justify-items: center; gap: calc(48 * var(--u)); }
.faq__title { text-align: center; position: relative; }
.faq__grid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(34 * var(--u)) calc(24 * var(--u)); align-items: start; position: relative; }

/* ---------- 07 The end ---------- */
.end__wrap { height: calc(630 * var(--u)); }
.end__cloud { position: absolute; pointer-events: none; width: calc(446 * var(--u)); top: calc(20 * var(--u)); }
.end__cloud--l { left: calc(-100 * var(--u)); }
.end__cloud--r { right: calc(-100 * var(--u)); top: calc(50 * var(--u)); scale: -1 1; }
.end__art { position: absolute; left: calc(430 * var(--u)); top: calc(105 * var(--u)); width: calc(582 * var(--u)); display: block; }
.end__title { position: absolute; left: 0; right: 0; top: calc(504 * var(--u)); text-align: center; }

/* ---------- Footer ---------- */
.footer { font-size: var(--t-xs); line-height: 1.1; color: var(--c-brown); }
.footer__wrap {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
  grid-template-areas: "left cat right" "legal cat note";
  column-gap: 24px; row-gap: 10px;
  padding: 24px var(--gutter) 0;
}
.footer__left { grid-area: left; display: flex; align-items: center; gap: calc(24 * var(--u)); }
.footer__word { width: calc(134 * var(--u)); }
.footer__cat { grid-area: cat; width: calc(124 * var(--u)); align-self: end; }
.footer__cat .ill { margin-bottom: -3px; }
.footer__right { grid-area: right; display: grid; justify-items: end; text-align: right; }
.footer__legal { grid-area: legal; display: flex; flex-wrap: wrap; column-gap: 18px; padding-bottom: 18px; font-size: 14px; color: var(--c-brown); align-self: start; }
.footer__legal button, .footer__legal a { display: inline-flex; align-items: center; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-brown-300); min-height: 30px; }
.footer__legal button:hover, .footer__legal a:hover { color: var(--c-coral); }
.footer__note { grid-area: note; justify-self: end; text-align: right; max-width: 360px; font-size: 11px; color: var(--c-brown); padding-bottom: 18px; align-self: start; padding-top: 6px; }

/* =========================================================
   Tablet (768–1023): keep the desktop composition but stop
   shrinking type below readable sizes
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --t-body: 17px; --t-lead: 18px; --t-sm: 15px; --t-xs: 13px; }
  .widget { transform: scale(.86); transform-origin: top right; }
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 767px) {
  body { padding-bottom: 90px; }
  .wrap { padding-inline: var(--gutter); }
  .topbar { height: 76px; padding: 10px 16px; }
  .topbar__nav a:not(.topbar__logo), .topbar__end { display: none; }
  .topbar__word { order: 2; justify-content: flex-end; }
  .topbar__word .word { width: 124px; }
  .topbar__nav { order: 1; }
  .topbar__logo { width: 56px; }

  /* hero: text first, the cat on its cloud below */
  .hero { height: auto; padding-top: 104px; display: flex; flex-direction: column-reverse; }
  .hero::after { height: 30px; }
  .hero__art { position: relative; top: 0; left: auto; width: 100%; margin-top: 8px; }
  .hero__wrap { position: static; }
  .hero__text { position: relative; left: auto; top: auto; width: 100%; }
  .hero__jp .jp { width: 200px; }
  .hero__title { margin-top: 6px; }
  .hero__sub { width: 100%; max-width: 340px; margin-top: 18px; }
  .hero__cta { margin-top: 26px; }

  .story__wrap, .help__wrap, .books__wrap, .social-sec__wrap, .end__wrap { height: auto; }
  .story__wrap { padding-top: 56px; padding-bottom: 40px; display: grid; gap: 12px; }
  .story__text, .social-sec__text { position: relative; left: auto; top: auto; width: 100%; }
  .paw-title { gap: 14px; }
  .paw-title .paw { width: 32px; }
  .story__p, .social-sec__p { width: 100%; margin-top: 18px; }
  .story__cta { position: relative; left: auto; top: auto; margin-top: 22px; }
  .story__art { position: relative; left: auto; top: auto; width: 100%; max-width: 420px; justify-self: center; margin-top: 10px; }

  .help { overflow: hidden; }
  .help__wrap { padding-top: 40px; padding-bottom: 56px; display: grid; gap: 54px; }
  .help__pagoda { width: 150px; opacity: .7; }
  .help__title { position: relative; right: auto; top: auto; white-space: normal; text-align: right; line-height: .82; padding-left: 90px; }
  .step { position: relative; inset: auto; display: grid; gap: 18px; pointer-events: auto; }
  .step__art, .step--1 .step__art, .step--2 .step__art { position: relative; left: auto; top: auto; width: 100%; max-width: 400px; justify-self: center; }
  .step__text, .step--1 .step__text, .step--2 .step__text { position: relative; left: auto; top: auto; width: 100%; }
  .step__head { gap: 12px; justify-self: center; }
  .num-badge { width: 40px; height: 40px; border-radius: 11px; font-size: 22px; }
  .step__p { width: 100%; max-width: 340px; font-size: var(--t-body); margin-top: 14px; }

  .books__wrap { padding-top: 100px; padding-bottom: 60px; display: grid; gap: 80px; }
  .books__cloud--l { width: 260px; left: -90px; top: 0; }
  .books__cloud--r { width: 240px; right: -80px; top: 40px; }
  .books .product, .books .product:nth-child(1), .books .product:nth-child(2) { position: relative; left: auto; top: auto; width: 100%; }
  .product__media { width: 100%; }
  .product__stock { top: -44px; right: -4px; font-size: 18px; }
  .product__title { margin-top: 28px; white-space: normal; }
  .product__desc { max-width: 240px; margin-top: 10px; font-size: 17px; }
  .product__actions { margin-top: 18px; }
  .product__actions .btn { font-size: 18px; padding: 13px 18px; }

  .social-sec__wrap { padding-top: 56px; padding-bottom: 30px; display: grid; gap: 20px; }
  /* соцсети на телефоне: большие облака зигзагом, медленно плывут */
  .social-sec__links { flex-direction: column; align-items: flex-start; gap: 0; margin: 22px 0 0; }
  .social { width: min(205px, 56vw); animation: social-float 6s ease-in-out infinite; }
  .social:nth-child(2) { align-self: flex-end; margin-right: 12px; margin-top: -14px; animation-delay: -2s; }
  .social:nth-child(3) { margin-left: 30px; margin-top: -14px; animation-delay: -4s; }
  .social:active { transform: scale(.96); }
  .social__body { gap: 10px; }
  .social__icon { width: 26px; height: 26px; }
  .social__handle { font-size: 18px; }
  .social__net { font-size: 14px; }
  @keyframes social-float { 0%, 100% { translate: 0 0; rotate: -1.5deg; } 50% { translate: 6px -5px; rotate: 1.5deg; } }
  @media (prefers-reduced-motion: reduce) { .social { animation: none; } }
  .social-sec__art { position: relative; left: auto; top: auto; width: 100%; max-width: 440px; justify-self: center; }

  .faq__sakura { width: 300px; opacity: .8; }
  .faq__wrap { padding: 48px 16px 56px; gap: 28px; }
  .faq__grid { grid-template-columns: 1fr; gap: 16px; }

  .end__wrap { padding-top: 40px; padding-bottom: 50px; display: grid; gap: 20px; justify-items: center; }
  .end__cloud { width: 240px; }
  .end__cloud--l { left: -90px; }
  .end__cloud--r { right: -90px; top: 60px; }
  .end__art { position: relative; left: auto; top: auto; width: 100%; max-width: 440px; }
  .end__title { position: relative; top: auto; padding: 0 10px; }

  .footer__wrap { grid-template-columns: 1fr; grid-template-areas: "left" "right" "legal" "note" "cat"; justify-items: center; text-align: center; gap: 12px; padding: 36px 20px 0; }
  .footer__legal { flex-direction: column; align-items: center; padding-bottom: 0; }
  .footer__note { justify-self: center; text-align: center; padding: 0; }
  .footer__left { flex-direction: column; gap: 6px; }
  .footer__word { width: 130px; }
  .footer__right { justify-items: center; text-align: center; }
  .footer__cat { width: 110px; margin-top: 6px; }
}