/* Евгения Сенченко — сайт. Цвета и шрифты — из tokens.css и fonts/fonts.css.
   Направление «ФИЗА» (выбрано 28.10.2026): гигантский Dela Gothic капсом,
   цвет крупными плашками, теги в [скобках], пунктирные подписи.
   Шрифты: Dela Gothic One — заголовки и цифры, Lobster — логотип и акцентные слова,
   Onest — текст. Cormorant — только внутри обложки гайда (повторяет настоящую обложку). */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { overflow-x: clip; }
::selection { background: var(--cherry); color: var(--butter); }
/* Ссылка «к содержимому» для клавиатуры: видна только при фокусе */
.skip { position: fixed; left: 16px; top: 12px; z-index: 300; padding: 12px 20px; border-radius: var(--r-pill); background: var(--cherry); color: var(--butter); font: 600 15px/1 var(--font-body); text-decoration: none; translate: 0 -160%; transition: translate .25s var(--ease); }
.skip:focus-visible { translate: none; outline: 2px solid var(--butter); outline-offset: 3px; }
main:focus { outline: none; }
body { background: var(--c-bg); color: var(--c-text); font: 400 17px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
ul, ol { list-style: none; }

:root {
  --container: 1320px;
  --gutter: clamp(20px, 4vw, 64px);
  --section: clamp(88px, 10vw, 152px);
  --line: color-mix(in srgb, var(--choco) 14%, transparent);
  --dash: 1.5px dashed color-mix(in srgb, var(--cherry) 55%, transparent);
  --r: 24px;        /* карточки и плашки */
  --r-lg: 40px;     /* большие цветные блоки */
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-top: var(--section); }

/* ---------- Типографика ---------- */
/* Надзаголовок в квадратных скобках, как теги у ФИЗА */
.eyebrow { font: 500 15px/1.3 var(--font-body); color: var(--c-primary); margin-bottom: 18px; }
.eyebrow::before { content: "[ "; }
.eyebrow::after { content: " ]"; }
.h2 { font: 400 clamp(38px, 4.2vw, 62px)/1 var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; color: var(--c-primary); }
/* Акцентная часть заголовка — рукописным Lobster */
.h2 em, .h3 em { display: block; width: fit-content; font: 400 .8em/1.15 var(--font-logo); text-transform: none; letter-spacing: 0; color: var(--choco); margin-top: .12em; rotate: -2deg; transform-origin: left; }
.h3 { font: 400 clamp(28px, 2.6vw, 38px)/1.05 var(--font-display); text-transform: uppercase; color: var(--c-primary); margin-bottom: 20px; }
.lead { font-size: 21px; line-height: 1.5; margin-bottom: 20px; font-weight: 500; }
p + p { margin-top: 16px; }
.muted { color: var(--c-muted); }

/* ---------- Кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 30px; border-radius: var(--r-pill); font: 600 15px/1 var(--font-body); text-decoration: none; border: 2px solid var(--c-primary); transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); white-space: nowrap; }
.btn--primary { background: var(--c-primary); color: var(--butter); }
.btn--ghost { color: var(--c-primary); }
/* Наведение: кнопку снизу заливает волна крема (у вишнёвой — сливочный, у контурной — вишнёвый),
   гребень волны покачивается. Посыпка по клику и «магнит» — в main.js. */
.btn:not(.btn--line) { position: relative; overflow: hidden; isolation: isolate; transition: color .35s var(--ease), border-color .35s, translate .25s var(--ease); }
.btn:not(.btn--line)::before {
  content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; top: -14px; bottom: -2px;
  background: var(--fill, var(--butter));
  -webkit-mask: var(--wave) 0 0 / 46px 16px repeat-x, linear-gradient(#000 0 0) 0 14px / 100% 100% no-repeat;
  mask: var(--wave) 0 0 / 46px 16px repeat-x, linear-gradient(#000 0 0) 0 14px / 100% 100% no-repeat;
  transform: translateY(105%); transition: transform .55s cubic-bezier(.3, .9, .3, 1);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 16' preserveAspectRatio='none'%3E%3Cpath d='M0 9 C8 2 15 2 23 9 S38 16 46 9 V16 H0 Z'/%3E%3C/svg%3E");
}
.btn:not(.btn--line):hover::before { transform: translateY(0); animation: waveSlide 1.2s linear infinite; }
/* Верхняя «Сделать заказ»: раз в несколько секунд пружинит, как желе, и по ней пробегает блик глазури */
.nav__order { animation: jelly 6s ease-in-out 2.5s infinite; transform-origin: 50% 100%; }
.nav__order::after { content: ""; position: absolute; z-index: 1; top: -20%; bottom: -20%; width: 34%; left: -50%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent); transform: skewX(-18deg); animation: glaze 6s ease-in-out 2.5s infinite; pointer-events: none; }
.nav__order:hover { animation-play-state: paused; }
@keyframes jelly {
  0%, 14%, 100% { transform: scale(1); }
  2% { transform: scale(1.12, .86); } 4% { transform: scale(.9, 1.1); }
  6% { transform: scale(1.06, .95); } 8% { transform: scale(.98, 1.02); } 10% { transform: scale(1.01, .99); }
}
@keyframes glaze { 0%, 12% { left: -50%; } 26%, 100% { left: 130%; } }
@keyframes waveSlide { to { -webkit-mask-position: 46px 0, 0 14px; mask-position: 46px 0, 0 14px; } }
.btn--primary:hover { color: var(--cherry); }
.btn--ghost { --fill: var(--cherry); }
.btn--ghost:hover { color: var(--butter); }
.btn:active { scale: .96; }
.btn--sm { height: 44px; padding: 0 22px; font-size: 14px; }
.btn--line { height: auto; padding: 0; border: 0; border-radius: 0; color: var(--c-primary); }
.btn--line::after { content: "↗"; transition: transform .3s var(--ease); }
.btn--line:hover::after { transform: translate(3px, -3px); }

.badge { display: inline-block; background: var(--butter); color: var(--c-primary); font: 400 12px/1 var(--font-display); text-transform: uppercase; padding: 9px 14px; border-radius: var(--r-pill); rotate: -4deg; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.chip { border: var(--dash); border-radius: var(--r-pill); padding: 8px 16px; font-size: 14px; background: var(--white); }
.stripes-blue { background: var(--stripes-blue); }

/* ---------- Шапка ---------- */
.header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--c-bg) 90%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.header.is-scrolled { border-bottom: var(--dash); }
.nav { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.wordmark { display: flex; flex-direction: column; text-decoration: none; line-height: 1; color: var(--c-primary); }
.wordmark__name { font: 400 30px/1 var(--font-logo); }
.wordmark__role { font: 600 10px/1 var(--font-body); letter-spacing: .34em; text-transform: uppercase; color: var(--choco); margin-top: 4px; padding-left: 2px; }
.nav__links { display: flex; gap: 32px; font-size: 15px; font-weight: 500; color: var(--c-primary); }
.nav__links a { text-decoration: none; position: relative; padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-primary); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav__links a:hover::after, .nav__links a.is-current::after { transform: scaleX(1); }
.nav__burger { display: none; }
@media (max-width: 1080px) {
  /* Меню прячется под «бургер» и раскрывается карточкой под шапкой */
  .nav { gap: 12px; }
  .nav__order { margin-left: auto; }
  .nav__burger { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--butter); }
  .nav__burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--cherry); transition: transform .3s var(--ease); }
  .header.is-menu .nav__burger span:first-child { transform: translateY(4px) rotate(45deg); }
  .header.is-menu .nav__burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav__links { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 8px); flex-direction: column; gap: 0; padding: 10px 24px; background: var(--white); border-radius: var(--r); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; translate: 0 -10px; transition: opacity .25s, translate .25s var(--ease), visibility .25s; }
  .nav__links a { padding: 16px 0; font: 400 20px/1 var(--font-display); text-transform: uppercase; }
  .nav__links a + a { border-top: var(--dash); }
  .nav__links a::after { display: none; }
  .header.is-menu .nav__links { opacity: 1; visibility: visible; translate: none; }
}

/* ---------- Главный экран: торт-навигация ----------
   --p: 0→1 прогресс скролла (ставит main.js, только с классом .is-live).
   Без JS / на узком экране --p = 1: торт сразу «разобран», подписи видны. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero { --p: 1; position: relative; }
.hero__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; padding-top: 32px; padding-bottom: 48px; text-align: center; }
/* ---------- Подпись: тихое рукописное имя прямо над словом ---------- */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes signIn { from { opacity: 0; transform: translateY(12px); } }
.sign { display: inline-flex; flex-direction: column; align-items: center; font: 400 clamp(26px, 2.4vw, 36px)/1 var(--font-logo); color: var(--choco); text-decoration: none; rotate: -3deg; animation: signIn .8s var(--ease) .3s both; transition: color .3s; }
.sign svg { width: 100%; height: 14px; margin-top: 2px; overflow: visible; }
.sign path { fill: none; stroke: var(--butter); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .7s var(--ease) .9s forwards; }
.sign:hover { color: var(--cherry); }
.hero__title { line-height: 1; }
.hero__word { display: inline-block; font: 400 clamp(64px, 11vw, 160px)/.9 var(--font-display); color: var(--c-primary); text-transform: uppercase; white-space: nowrap; cursor: default; letter-spacing: calc(-0.035em + var(--p) * 0.03em); animation: wordIn 1s var(--ease) both; }
@keyframes wordIn { from { opacity: 0; transform: translateY(40px) scale(.96); } }

/* Белый шоколад под курсором. Слово всегда бордовое; поверх лежат две копии слова,
   видимые только сквозь маску из «пятен глазури с подтёками» (места и размеры — main.js,
   через --glaze и --glaze-rim). ::before — тёплая кайма, ::after — глянцевая глазурь с бликом. */
.hero__title { position: relative; }
.hero__word { position: relative; --glaze-none: linear-gradient(transparent, transparent); }
.hero__word::before, .hero__word::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; paint-order: stroke fill; }
.hero__word::before {
  color: color-mix(in srgb, var(--butter) 70%, var(--white)); -webkit-text-stroke: .045em color-mix(in srgb, var(--butter) 70%, var(--white));
  -webkit-mask: var(--glaze-rim, var(--glaze-none)); mask: var(--glaze-rim, var(--glaze-none));
}
.hero__word::after {
  /* глянец: светлый блик сверху → сливочная тень книзу */
  background: linear-gradient(176deg, var(--white) 0 22%, color-mix(in srgb, var(--butter) 18%, var(--white)) 34%, var(--white) 44%, color-mix(in srgb, var(--butter) 30%, var(--white)) 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .035em var(--white);
  filter: drop-shadow(0 .03em .01em rgb(61 39 34 / .22));
  -webkit-mask: var(--glaze, var(--glaze-none)); mask: var(--glaze, var(--glaze-none));
}
.hero__intro { max-width: 400px; }
.hero__lead { font-size: 18px; line-height: 1.55; font-weight: 500; max-width: 330px; }
.hero__actions .btn { padding: 0 24px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero__scroll { font-size: 13px; color: var(--c-muted); }
.hero:not(.is-live) .hero__scroll { display: none; }

/* Сцена на десктопе: всё стоит вокруг торта, торт перед словом «КОНДИТЕР» */
.hero.is-live .hero__track { height: 210vh; }
.hero.is-live .hero__stage { position: sticky; top: 84px; height: calc(100vh - 84px); min-height: 640px; display: block; padding: 0 var(--gutter); }
.hero.is-live .sign { position: absolute; left: 50%; top: calc(23% - 64px); translate: -50% 0; z-index: 4; }
.hero.is-live .hero__title { position: absolute; left: 0; right: 0; top: 23%; z-index: 1; }
.hero.is-live .wc { position: absolute; left: 50%; bottom: 5%; translate: -50% 0; z-index: 3; }
.hero.is-live .hero__intro { position: absolute; left: var(--gutter); bottom: 44px; text-align: left; z-index: 4; }
.hero.is-live .hero__scroll { position: absolute; right: var(--gutter); bottom: 48px; opacity: calc(1 - var(--p) * 3); }

/* Торт: ярусы в полоску, крем с подтёками, вишенка, тарелка */
.wc { display: flex; flex-direction: column; align-items: center; }
.wc__layer { position: relative; z-index: 2; display: flex; justify-content: center; }
.wc__layer + .wc__layer { margin-top: -4px; }
.wc__tier { position: relative; border-radius: 26px 26px 20px 20px; box-shadow: inset 0 -14px 0 rgb(61 39 34 / .10); }
.wc__layer--3 .wc__tier { width: 236px; height: 92px; background: var(--stripes-blue); --stripe-w: 18px; }
.wc__layer--2 .wc__tier { width: 334px; height: 108px; background: var(--stripes-butter); --stripe-w: 22px; }
.wc__layer--1 .wc__tier { width: 430px; height: 124px; background: var(--stripes-cherry); --stripe-w: 26px; }
.wc__cream { position: absolute; left: -3%; top: -8px; width: 106%; height: 44px; fill: var(--white); filter: drop-shadow(0 3px 0 rgb(61 39 34 / .10)); }
.wc__layer--2 .wc__cream { fill: var(--cherry); }
.wc__layer--1 .wc__cream { fill: var(--butter); }
.wc__wow { position: absolute; left: 50%; top: 56%; translate: -50% -50%; background: var(--white); color: var(--c-primary); font: 400 28px/1 var(--font-logo); padding: 6px 18px 10px; border-radius: var(--r-pill); rotate: -6deg; box-shadow: var(--shadow-sticker); }
.wc__cherry { position: relative; z-index: 4; width: 60px; height: 60px; margin-bottom: -12px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / .6) 0 6px, transparent 8px), var(--cherry); box-shadow: inset -7px -9px 0 rgb(0 0 0 / .18); }
.wc__stem { position: absolute; left: 24px; top: -30px; width: 40px; height: 40px; color: var(--choco); }
.wc__plate { position: relative; z-index: 1; width: 540px; height: 34px; margin-top: -18px; border-radius: 50%; background: var(--white); box-shadow: inset 0 -7px 0 var(--blue), 0 18px 34px rgb(61 39 34 / .16); }
.wc__spark { position: absolute; font-style: normal; color: var(--cherry); font-size: 26px; animation: sparkIn .5s var(--ease) both, twinkle 2.6s ease-in-out infinite; }
.wc__spark:nth-of-type(1) { left: -6%; top: 30%; animation-delay: 1.3s, 1.8s; }
.wc__spark:nth-of-type(2) { right: -4%; top: 14%; color: var(--blue); font-size: 34px; animation-delay: 1.4s, 2.2s; }
.wc__spark:nth-of-type(3) { right: 2%; top: 58%; font-size: 18px; animation-delay: 1.5s, 1.6s; }
.wc__spark:nth-of-type(4) { left: 4%; top: 4%; color: var(--blue); font-size: 20px; animation-delay: 1.6s, 2.6s; }
@keyframes sparkIn { from { opacity: 0; scale: 0; } }
@keyframes twinkle { 50% { transform: scale(.6) rotate(45deg); opacity: .5; } }

/* Сборка при загрузке: ярусы падают снизу вверх, последней — вишенка */
.wc__layer, .wc__cherry { transform-origin: 50% 100%; animation: drop .8s cubic-bezier(.3, .9, .4, 1) both; }
.wc__layer--1 { animation-delay: .15s; }
.wc__layer--2 { animation-delay: .4s; }
.wc__layer--3 { animation-delay: .65s; }
.wc__cherry { animation: cherryDrop .9s cubic-bezier(.3, .9, .4, 1) .95s both; }
@keyframes drop { 0% { transform: translateY(-110vh); } 62% { transform: translateY(0) scaleY(.88) scaleX(1.04); } 80% { transform: translateY(-10px); } 100% { transform: none; } }
@keyframes cherryDrop { 0% { transform: translateY(-110vh) rotate(-90deg); } 60% { transform: translateY(0) scale(1.15, .8); } 78% { transform: translateY(-22px) rotate(8deg); } 100% { transform: none; } }

/* Разбор при скролле: ярусы расходятся и наклоняются, вишенка подлетает */
.wc__layer--3 { translate: 0 calc(var(--p) * -70px); rotate: calc(var(--p) * -5deg); }
.wc__layer--2 { translate: 0 calc(var(--p) * -34px); rotate: calc(var(--p) * 4deg); }
.wc__layer--1 { rotate: calc(var(--p) * -2deg); }
.wc__cherry { translate: 0 calc(var(--p) * -130px); rotate: calc(var(--p) * 30deg); }

/* Подписи-ссылки у ярусов */
.wc__call { position: absolute; top: 50%; display: flex; align-items: center; gap: 12px; white-space: nowrap; padding: 8px 22px 8px 8px; background: var(--white); border-radius: var(--r-pill); box-shadow: var(--shadow-md); font: 600 16px/1 var(--font-body); color: var(--choco); text-decoration: none; opacity: clamp(0, (var(--p) - .3) * 3, 1); pointer-events: none; transition: background .25s, color .25s; }
.wc__call b { display: grid; place-items: center; padding-bottom: 2px; width: 40px; height: 40px; border-radius: 50%; background: var(--cherry); color: var(--butter); font: 400 14px/1 var(--font-display); }
.wc__call::before { content: ""; position: absolute; top: 50%; width: 44px; border-top: 2px dashed var(--cherry); }
.wc__call--r { left: calc(100% + 48px); translate: calc((1 - var(--p)) * -40px) -50%; }
.wc__call--r::before { right: 100%; }
.wc__call--l { right: calc(100% + 48px); translate: calc((1 - var(--p)) * 40px) -50%; }
.wc__call--l::before { left: 100%; }
.wc__call:hover { background: var(--cherry); color: var(--butter); }
.wc__call:hover b { background: var(--butter); color: var(--cherry); }
.hero.is-open .wc__call { pointer-events: auto; }

/* Меню-таблетки под тортом — только когда сцена не «живая» (телефон, планшет, «меньше движения») */
.hero__menu { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 380px; }
.hero__menu a { display: flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; background: var(--white); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); font: 600 16px/1 var(--font-body); text-decoration: none; text-align: left; }
.hero__menu a::after { content: "→"; margin-left: auto; color: var(--cherry); }
.hero__menu b { display: grid; place-items: center; padding-bottom: 2px; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--cherry); color: var(--butter); font: 400 14px/1 var(--font-display); }
.hero.is-live .hero__menu { display: none; }
/* Не «живая» сцена: торт собран (без разбора), выноски у ярусов спрятаны */
.hero:not(.is-live) { --p: 0; }
.hero:not(.is-live) .wc__call { display: none; }
.hero:not(.is-live) .hero__title { position: relative; z-index: 1; }
.hero:not(.is-live) .wc { zoom: .78; margin-top: -84px; position: relative; z-index: 2; }
[data-parallax] { transition: transform .6s var(--ease); }

/* ---------- Бегущие ленты: две изогнутые ленточки, вишнёвая ползёт вверх ---------- */
.ticker { position: relative; z-index: 5; margin-top: -90px; overflow-x: clip; pointer-events: none; }
.hero:not(.is-live) + .ticker { margin-top: -10px; }
.ticker__svg { display: block; width: 100%; min-width: 980px; height: auto; margin-left: 50%; translate: -50% 0; overflow: visible; }
.ticker__ribbon { fill: none; stroke-width: 72; }
.ticker__ribbon--a { stroke: var(--cherry); filter: drop-shadow(0 10px 14px rgb(61 39 34 / .18)); }
.ticker__ribbon--b { stroke: var(--blue); stroke-width: 64; }
.ticker__text--a { font: 400 34px var(--font-display); text-transform: uppercase; fill: var(--butter); letter-spacing: .01em; }
.ticker__text--b { font: 400 38px var(--font-logo); fill: var(--cherry); }

/* ---------- Выделения слов ---------- */
/* Маркер «прокрашивается», кружок «рисуется» — когда слово попадает на экран (класс .is-on из main.js) */
.mark { background: linear-gradient(var(--butter), var(--butter)) no-repeat 0 88% / 0% 46%; padding: 0 .1em; margin: 0 -.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1s var(--ease) .3s; }
.mark--blue { background-image: linear-gradient(var(--blue), var(--blue)); }
.mark--white { background-image: linear-gradient(var(--white), var(--white)); }
.mark.is-on { background-size: 100% 46%; }
.squiggle { text-decoration: underline wavy var(--cherry); text-decoration-thickness: 2px; text-underline-offset: .2em; text-decoration-skip-ink: none; }
.circled { position: relative; display: inline-block; margin: 0 .38em 0 .12em; }   /* обводка шире слова — отступ, чтобы не наезжала на соседей */
.circled svg { position: absolute; left: -10%; top: -20%; width: 120%; height: 140%; overflow: visible; pointer-events: none; }
.circled path { fill: none; stroke: var(--cherry); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease) .4s; }
.circled.is-on path { stroke-dashoffset: 0; }
.sticker-word { display: inline-block; background: var(--cherry); color: var(--butter); font: 400 1.2em/1 var(--font-logo); padding: .1em .5em .22em; border-radius: var(--r-pill); rotate: -4deg; animation: wiggle 3.2s ease-in-out infinite; }
@keyframes wiggle { 50% { rotate: 3deg; } }


/* ---------- Заголовок раздела ---------- */
.sec-head { display: grid; grid-template-columns: auto 1fr minmax(260px, 360px); gap: 44px; align-items: end; padding-bottom: 44px; margin-bottom: 64px; border-bottom: var(--dash); }
.sec-head__num { font: 400 128px/.8 var(--font-display); color: transparent; -webkit-text-stroke: 2px var(--c-primary); letter-spacing: -0.04em; }
.sec-head .eyebrow { margin-bottom: 14px; }
.sec-head__text { font-size: 16px; }

/* ---------- Обо мне: голубая плашка ---------- */
/* Фото тянется на всю высоту голубой карточки с текстом */
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 3.6vw, 56px); align-items: stretch; }
.about__text { background: var(--blue); border-radius: var(--r-lg); padding: clamp(36px, 4.4vw, 68px); }
/* Фото: «шторка» открывает его при прокрутке, фото приближается из крупного плана,
   двигается с лёгким параллаксом и наклоняется за курсором (--rx/--ry из main.js) */
.about__photo { position: relative; display: flex; flex-direction: column; padding: 24px 24px 0 0; perspective: 1000px; }
.about__frame { position: relative; flex: 1; min-height: 520px; border-radius: 40px; overflow: hidden; background: var(--blue); box-shadow: var(--shadow-lg); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.about__main { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; object-position: 50% 25%; scale: 1.25; transition: scale 1.8s var(--ease) .2s; }
.about__photo.is-shown .about__main { scale: 1; }
.about__curtain { position: absolute; inset: 0; background: var(--cherry); transform-origin: 50% 0; transition: transform 1.1s cubic-bezier(.7, 0, .2, 1); }
.about__photo.is-shown .about__curtain { transform: scaleY(0); }
.about__photo:hover .about__stamp { animation-duration: 6s; }
.about__stamp { position: absolute; z-index: 3; right: -2%; top: 0; width: 30%; animation: spin 24s linear infinite; filter: drop-shadow(0 8px 14px rgb(61 39 34 / .2)); }
.about__stamp-bg { fill: var(--cherry); }
.about__stamp text { font: 600 15px var(--font-body); text-transform: uppercase; letter-spacing: .08em; fill: var(--butter); }
.about__stamp .about__stamp-heart { font-size: 46px; letter-spacing: 0; }
@keyframes spin { to { rotate: 360deg; } }
.about__text .h2 { margin-bottom: 28px; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 44px; }
/* Три карточки: у каждой свой цвет и иконка; при наведении подпрыгивают с наклоном */
/* плашки столбиком: иконка слева, заголовок и текст справа */
.values { grid-template-columns: 1fr; gap: 10px; margin-top: 36px; }
.value { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; border-radius: var(--r); padding: 16px 20px; cursor: default; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.value .value__icon { grid-row: span 2; width: 44px; height: 44px; padding: 10px; }
.value b { margin: 0 0 3px !important; }
.value--1 { background: var(--butter); }
.value--2 { background: var(--cherry); color: var(--butter); }
.value--3 { background: var(--white); }
.value b { display: block; font: 400 17px/1.05 var(--font-display); text-transform: uppercase; color: var(--c-primary); margin: 12px 0 6px; }
.value--2 b { color: var(--white); }
.value span { display: block; font-size: 14px; line-height: 1.35; }
.value__icon { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--white); fill: var(--cherry); stroke: none; overflow: visible; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.value--1 .value__icon { fill: none; stroke: var(--cherry); stroke-width: 2.4; }
.value--1 .value__icon circle { fill: var(--cherry); }
.value--2 .value__icon { background: var(--butter); }
.value--3 .value__icon { background: var(--blue); }
.value:hover { box-shadow: var(--shadow-lg); }
.value--1:hover { transform: translateY(-8px) rotate(-2.5deg); }
.value--2:hover { transform: translateY(-8px) rotate(2deg); }
.value--3:hover { transform: translateY(-8px) rotate(-1.5deg); }
.value--1:hover .value__icon { animation: blink .6s ease-in-out; }
.value--2:hover .value__icon { animation: beat .7s ease-in-out infinite; }
.value--3:hover .value__icon { transform: rotate(180deg) scale(1.2); }
@keyframes blink { 50% { transform: scale(1.15, .15); } 100% { transform: scale(1); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.25); } 50% { transform: scale(1.05); } 70% { transform: scale(1.18); } }

/* ---------- Лента десертов: изогнутая карусель (логика — в main.js) ---------- */
.reel__stage { position: relative; height: clamp(560px, 46vw, 720px); container-type: size; overflow: hidden; }
.reel__band { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); }
.reel__band.is-ready { opacity: 1; }
.reel__band.is-paused .reel__tile { animation-play-state: paused; }
.reel__tile { position: absolute; transform-style: preserve-3d; }
.reel__strip { position: absolute; top: 0; overflow: hidden; background: var(--c-bg); backface-visibility: hidden; }
.reel__strip:first-child { border-radius: 18px 0 0 18px; }
.reel__strip:last-child { border-radius: 0 18px 18px 0; }
.reel__strip img { position: absolute; top: 0; max-width: none; object-fit: cover; }
.reel__head { position: relative; z-index: 2; text-align: center; padding: 0 var(--gutter); }
.reel__head .eyebrow { margin-bottom: 12px; }
.reel__head .h2 em { margin-left: auto; margin-right: auto; }
.reel__note { position: absolute; z-index: 2; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 15px; color: var(--c-muted); padding: 0 var(--gutter); }
.reel__note::before, .reel__note::after { content: " ✦ "; color: var(--cherry); }

/* ---------- 01. Десерты на заказ: меню по вкладкам ---------- */
.menu-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: fit-content; max-width: 100%; margin: 0 auto 24px; padding: 6px; background: var(--white); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); }
.menu-tab { min-height: 44px; padding: 12px 22px; border-radius: var(--r-pill); font: 600 15px/1 var(--font-body); color: var(--choco); text-align: center; white-space: nowrap; transition: background .3s, color .3s, transform .3s var(--ease); }
.menu-tab:hover { background: color-mix(in srgb, var(--butter) 60%, var(--white)); }
.menu-tab.is-active { background: var(--cherry); color: var(--butter); }
/* GSAP (motion.js): вишнёвая «таблетка» переезжает под активную вкладку */
.menu-tabs { position: relative; }
.menu-tab { position: relative; z-index: 1; }
.tabs-pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: var(--r-pill); background: var(--cherry); pointer-events: none; }
.has-pill .menu-tab.is-active { background: transparent; }
.gsap .menu-panel.is-active, .gsap .tab-panel.is-active { animation: none; }
.menu-tab:active { transform: scale(.95); }
.menu-panel { background: var(--white); border-radius: var(--r-lg); padding: clamp(22px, 4vw, 56px); }
.menu-panel.is-active { animation: panelIn .6s var(--ease); }
.menu-sub { font: 400 clamp(24px, 2.4vw, 34px)/1.05 var(--font-display); text-transform: uppercase; color: var(--c-primary); margin: 52px 0 20px; }
.menu-sub em { font: 400 .9em/1 var(--font-logo); text-transform: none; color: var(--choco); margin-left: .15em; }
.menu-label { font: 400 15px/1 var(--font-display); text-transform: uppercase; color: var(--c-primary); margin: 26px 0 12px; }
.price-pill { display: inline-block; width: fit-content; background: var(--cherry); color: var(--butter); font: 400 20px/1 var(--font-display); padding: 11px 18px; border-radius: var(--r-pill); white-space: nowrap; }
.price-pill--big { font-size: 32px; padding: 14px 26px; }

/* Бенто S / M / L */
.sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.size-card { display: flex; flex-direction: column; border-radius: 32px; overflow: hidden; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.size-card--s { background: var(--butter); }
.size-card--m { background: var(--blue); }
.size-card--l { background: color-mix(in srgb, var(--cherry) 12%, var(--white)); }
.size-card:hover { transform: translateY(-8px) rotate(-1.2deg); box-shadow: var(--shadow-lg); }
.size-card--m:hover { transform: translateY(-8px) rotate(1deg); }
.size-card__img { position: relative; margin: 10px 10px 0; border-radius: 24px; overflow: hidden; aspect-ratio: 1.12; transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .45s var(--ease); }
.size-card__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); }
.size-card:hover .size-card__img img { scale: 1.06; }
/* Диаметр — круглая «бирка», как на карточке */
.size-card__d { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--white); border: 2px dashed var(--cherry); color: var(--cherry); font: 600 14px/1 var(--font-body); rotate: -8deg; box-shadow: var(--shadow-md); transition: rotate .5s cubic-bezier(.3, 1.6, .5, 1), scale .5s cubic-bezier(.3, 1.6, .5, 1); }
.size-card:hover .size-card__d { rotate: 12deg; scale: 1.1; }
.size-card__body { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 12px; padding: 18px 20px 22px; }
.size-card__name { grid-column: 1 / -1; font: 400 24px/1 var(--font-display); text-transform: uppercase; color: var(--c-primary); }
.size-card__name b { font-weight: 400; font-size: 1.35em; }
.size-card__meta { font-size: 15px; line-height: 1.4; }

/* «Разрез торта»: слева большой срез выбранной начинки, оформленный как разрезанный торт сбоку
   (крем с подтёками сверху, вишенка, тарелка). При смене сверху вниз проходит «нож» и открывает
   новый срез (clip-path), справа — название и состав, внизу — лента круглых фото всех начинок. */
.slicer { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 28px clamp(28px, 4vw, 60px); align-items: center; outline: none; }
.slicer:focus-visible .slicer__photo { box-shadow: 0 0 0 4px var(--butter), 0 0 0 7px var(--cherry); }
.slicer__cake { position: relative; padding-top: 44px; }
.slicer__photo { position: relative; z-index: 1; aspect-ratio: 4 / 3; border-radius: 20px 20px 26px 26px; overflow: hidden; background: var(--butter); box-shadow: var(--shadow-lg); }
.slicer__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slicer__photo .is-next { clip-path: inset(0 0 100% 0); }
.slicer.is-cutting .slicer__photo .is-next { clip-path: inset(0 0 0 0); transition: clip-path .75s cubic-bezier(.7, 0, .25, 1); }
/* Крем и вишенка сверху — торт «целиком», а фото — его разрез */
.slicer__cream { position: absolute; z-index: 2; left: -2.5%; top: 30px; width: 105%; height: 52px; fill: var(--white); filter: drop-shadow(0 4px 3px rgb(61 39 34 / .16)); }
.slicer__cherry { position: absolute; z-index: 3; left: 50%; top: 0; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / .65) 0 5px, transparent 7px), var(--cherry); box-shadow: inset -6px -7px 0 rgb(0 0 0 / .18); }
.slicer__cherry::before { content: ""; position: absolute; left: 22px; top: -20px; width: 14px; height: 24px; border-left: 3px solid var(--choco); border-radius: 14px 0 0 0; rotate: 20deg; }
.slicer.is-cutting .slicer__cherry { animation: cherryHop .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes cherryHop { 35% { translate: 0 -26px; rotate: -18deg; } 70% { translate: 0 2px; rotate: 6deg; } }
.slicer__plate { position: relative; z-index: 0; display: block; width: 112%; height: 34px; margin: -18px 0 0 -6%; border-radius: 50%; background: var(--white); box-shadow: inset 0 -7px 0 var(--blue), 0 18px 30px rgb(61 39 34 / .16); }
/* «Нож»: светлая линия разреза с ножиком на краю, едет вместе с границей нового среза */
.slicer__cut { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 3px; background: var(--white); box-shadow: 0 0 10px rgb(255 255 255 / .9); opacity: 0; pointer-events: none; }
.slicer__knife { position: absolute; right: -6px; top: -7px; width: 64px; height: 17px; fill: var(--white); filter: drop-shadow(0 2px 3px rgb(61 39 34 / .35)); }
.slicer__knife rect { fill: var(--choco); }
.slicer.is-cutting .slicer__cut { animation: knife .75s cubic-bezier(.7, 0, .25, 1); }
@keyframes knife { 0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

.slicer__count { font: 400 14px/1 var(--font-display); color: var(--c-muted); letter-spacing: .06em; }
.slicer__count b { font-weight: 400; color: var(--c-primary); font-size: 1.6em; }
.slicer__name { margin: 14px 0 0; font: 400 clamp(28px, 3vw, 46px)/1 var(--font-display); text-transform: uppercase; color: var(--c-primary); text-wrap: balance; }
.slicer__text { margin-top: 16px; max-width: 460px; font-size: 17px; line-height: 1.55; }
.slicer__info > * { transition: opacity .3s var(--ease), translate .3s var(--ease); }
.slicer.is-swap .slicer__info > *:not(.slicer__row):not(.slicer__calc) { opacity: 0; translate: 0 10px; }
.slicer__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 24px; }
.slicer__price { font-size: 22px; }
.slicer__price[hidden] { display: none; }   /* у бенто цены за кг нет */
.slicer__nav { display: flex; gap: 8px; }
.slicer__btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--butter); color: var(--cherry); font: 400 20px/1 var(--font-display); text-align: center; transition: background .25s, color .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.slicer__btn svg { width: 22px; height: 22px; display: block; }
.slicer__btn:hover { background: var(--cherry); color: var(--butter); transform: scale(1.08); }
.slicer__btn:active { transform: scale(.92); }
.slicer__calc { margin-top: 18px; }

/* Лента начинок: круглые фото-«срезы» */
/* Торты: срез — высокий «кусок торта» стоя, слои горизонтально, без тарелки */
.slicer--cakes { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); justify-content: center; gap: 28px clamp(36px, 6vw, 96px); }
.slicer--cakes .slicer__plate { display: none; }
.slicer--cakes .slicer__photo { aspect-ratio: 1 / 2; border-radius: 12px 12px 18px 18px; box-shadow: 0 34px 50px -10px rgb(61 39 34 / .32), inset 0 0 0 1px rgb(61 39 34 / .06); }
.slicer--cakes .slicer__cream { left: -5%; width: 110%; height: 48px; }
.slicer--cakes .slicer__cake::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -16px; height: 18px; border-radius: 50%; background: rgb(61 39 34 / .16); filter: blur(6px); }
.slicer__picks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 4px; margin-top: 10px; }
.slicer__pick { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100px; padding: 6px 2px; text-align: center; font: 600 12.5px/1.2 var(--font-body); color: var(--choco); border-radius: 18px; transition: color .25s; }
.slicer__pick img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 4px solid var(--white); box-shadow: var(--shadow-md); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), border-color .25s; }
.slicer__pick:hover img { transform: translateY(-5px) rotate(-8deg); }
.slicer__pick.is-picked { color: var(--c-primary); }
.slicer__pick.is-picked img { border-color: var(--cherry); transform: scale(1.1); }
.slicer__pick:focus-visible { outline: 2px solid var(--cherry); outline-offset: 2px; }

/* В стоимость входит + упаковка */
.bento-extra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; margin-top: 48px; align-items: start; }
.bento-extra .menu-sub { margin-top: 0; }
.included { background: var(--butter); border-radius: 28px; padding: 28px 30px; }
.included__note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.pack-list { display: grid; gap: 12px; }
.pack { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 16px; align-items: center; }
.pack img { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; border: 4px solid var(--butter); transition: rotate .5s cubic-bezier(.3, 1.6, .5, 1); }
.pack:hover img { rotate: 10deg; }
.pack b { display: block; font: 400 15px/1.1 var(--font-display); text-transform: uppercase; color: var(--c-primary); margin-bottom: 4px; }
.pack span { font-size: 14px; line-height: 1.4; }

/* Муссовые бенто: веер из трёх фото раскрывается при наведении */
.mousse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.mousse__fan { position: relative; height: 430px; }
.mousse__fan img { position: absolute; width: 50%; aspect-ratio: .88; object-fit: cover; border-radius: 24px; border: 8px solid var(--white); box-shadow: var(--shadow-lg); transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.mousse__fan img:nth-child(1) { left: 0; top: 40px; transform: rotate(-9deg); }
.mousse__fan img:nth-child(2) { left: 25%; top: 0; z-index: 2; transform: rotate(2deg); }
.mousse__fan img:nth-child(3) { left: 50%; top: 60px; transform: rotate(9deg); }
.mousse:hover .mousse__fan img:nth-child(1) { transform: translate(-6%, 4%) rotate(-14deg); }
.mousse:hover .mousse__fan img:nth-child(2) { transform: translateY(-4%) rotate(0deg) scale(1.05); }
.mousse:hover .mousse__fan img:nth-child(3) { transform: translate(6%, 4%) rotate(14deg); }
.mousse__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 22px 0 6px; }
.mousse__weight { padding: 12px 18px; border-radius: var(--r-pill); background: var(--c-bg); font-weight: 600; }
.flavors { display: flex; flex-wrap: wrap; gap: 8px; }
.flavors li { padding: 9px 16px; border-radius: var(--r-pill); background: var(--c-bg); border: var(--dash); font-size: 14.5px; line-height: 1.3; cursor: default; transition: background .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.flavors li:nth-child(3n+2) { background: color-mix(in srgb, var(--blue) 55%, var(--white)); }
.flavors li:hover { background: var(--butter); transform: translateY(-3px) rotate(-2deg); }

/* Торты: условия + калькулятор */
.cakes-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.rules { display: grid; gap: 10px; margin-top: 20px; }
.rules li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 14px 18px; border-radius: 18px; background: var(--c-bg); }
.rules b { font: 400 17px/1.15 var(--font-display); text-transform: uppercase; color: var(--c-primary); }
.rules span { font-size: 14px; color: var(--c-muted); }
.cakes-gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 40px 0 20px; }
.cakes-gallery img { width: 100%; aspect-ratio: .8; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-md); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.cakes-gallery img:nth-child(even) { translate: 0 22px; }
.cakes-gallery img:hover { transform: rotate(-3deg) scale(1.06); box-shadow: var(--shadow-lg); position: relative; z-index: 1; }

.calc { position: sticky; top: 110px; background: var(--cherry); color: var(--butter); border-radius: 32px; padding: 26px 26px 28px; box-shadow: var(--shadow-lg); }
.calc__title { font: 400 30px/1 var(--font-logo); color: var(--white); margin-bottom: 18px; }
.calc__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 600; }
.calc__label output { font: 400 38px/1 var(--font-display); color: var(--white); }
.calc__range { --pos: 18%; width: 100%; height: 10px; margin: 14px 0 20px; -webkit-appearance: none; appearance: none; border-radius: var(--r-pill); background: linear-gradient(to right, var(--butter) var(--pos), rgb(255 255 255 / .22) var(--pos)); cursor: pointer; }
.calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .9) 0 3px, transparent 4px), var(--butter); border: 3px solid var(--white); box-shadow: 0 4px 10px rgb(0 0 0 / .25); transition: scale .2s; }
.calc__range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--butter); border: 3px solid var(--white); box-shadow: 0 4px 10px rgb(0 0 0 / .25); }
.calc__range:active::-webkit-slider-thumb { scale: 1.2; }
.calc__range:focus-visible { outline: 2px solid var(--white); outline-offset: 6px; }
.calc__fill { margin-bottom: 18px; font-size: 15px; }
.calc__fill b { color: var(--white); }
.calc__fill span { display: block; font-size: 12px; opacity: .75; margin-top: 2px; }
.calc__result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.calc__result div { padding: 14px 16px; border-radius: 18px; background: rgb(255 255 255 / .1); }
.calc__result span { display: block; font-size: 12px; opacity: .8; margin-bottom: 6px; }
.calc__result b { display: block; font: 400 clamp(22px, 2.1vw, 30px)/1 var(--font-display); color: var(--white); white-space: nowrap; }
.calc__result b.is-bump { animation: bump .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 40% { transform: scale(1.12); color: var(--butter); } }
.calc__note { font-size: 13px; margin: 12px 0 18px; opacity: .9; }
.calc__btn { width: 100%; background: var(--butter); color: var(--cherry); border-color: var(--butter); --fill: var(--white); }
.calc__btn:hover { color: var(--cherry); }

/* Десерты поштучно */
.treats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.treat { display: flex; flex-direction: column; align-items: center; padding: 10px 10px 20px; border-radius: 28px; background: var(--c-bg); text-align: center; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.treat img { width: 100%; aspect-ratio: 1.1; object-fit: cover; border-radius: 20px; transition: scale .8s var(--ease); }
.treat:hover { transform: translateY(-8px) rotate(-1.5deg); box-shadow: var(--shadow-lg); }
.treat:nth-child(even):hover { transform: translateY(-8px) rotate(1.5deg); }
.treat:hover img { scale: 1.07; }
.treat__name { font: 400 19px/1.1 var(--font-display); text-transform: uppercase; color: var(--c-primary); margin: 16px 0 12px; }

.menu-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 20px; padding: 20px 26px; border: var(--dash); border-radius: 28px; }
.menu-cta p { font-size: 17px; max-width: 560px; }

/* ---------- 02. Шаблоны обёрток ---------- */
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pick__card { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; padding: 18px 28px 18px 18px; background: var(--white); border: 2px solid transparent; border-radius: 32px; transition: border-color .3s, transform .3s var(--ease); }
.pick__card:hover { transform: translateY(-3px); }
.pick__card.is-active { border-color: var(--c-primary); }
.pick__art { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; }
.pick__art--konfetka { background: var(--blue); }
/* ---------- Новогодние обёртки (анонс): вишнёвая карточка, сцена, снег ---------- */
.pick__card--ny { position: relative; overflow: hidden; isolation: isolate; background: var(--cherry); color: var(--butter); }
.pick__card--ny::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 85% 15%, rgb(255 255 255 / .16), transparent 45%), radial-gradient(circle at 10% 100%, rgb(255 255 255 / .1), transparent 40%); }
.pick__card--ny.is-active { border-color: var(--butter); box-shadow: 0 0 0 4px rgb(255 237 173 / .35), var(--shadow-lg); }
.pick__card--ny .pick__label { color: var(--butter); }
.pick__card--ny .pick__title { color: var(--white); }
.pick__card--ny .pick__meta { color: color-mix(in srgb, var(--butter) 80%, var(--white)); }
.pick__art--ny { background: var(--blue); }
.ny-art { width: 100%; height: 100%; display: block; overflow: visible; }
.ny-soon { display: inline-block; width: fit-content; margin-top: 14px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--butter); color: var(--cherry); font: 400 15px/1 var(--font-display); text-transform: uppercase; rotate: -4deg; animation: wiggle 2.6s ease-in-out infinite; box-shadow: var(--shadow-sticker); }
/* Живая сцена: ёлки покачиваются, звезда мерцает, человечек машет, конфетти парит */
.ny-tree { transform-box: fill-box; transform-origin: 50% 100%; animation: treeSway 4s ease-in-out infinite; }
.ny-tree--2 { animation-delay: -1.4s; animation-duration: 3.4s; }
.ny-star { transform-box: fill-box; transform-origin: center; animation: starTwinkle 1.8s ease-in-out infinite; }
.ny-ginger { transform-box: fill-box; transform-origin: 50% 100%; animation: gingerHop 2.8s ease-in-out infinite; }
.ny-confetti { animation: confettiFloat 5s ease-in-out infinite; }
.ny-cane { transform-box: fill-box; transform-origin: 50% 100%; }
.pick__card--ny:hover .ny-ginger { animation-duration: .9s; }
.pick__card--ny:hover .ny-cane { animation: treeSway 1s ease-in-out infinite; }
@keyframes treeSway { 50% { transform: rotate(-3deg); } }
@keyframes starTwinkle { 50% { transform: scale(1.35) rotate(18deg); opacity: .75; } }
@keyframes gingerHop { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-10px) rotate(-6deg); } 80% { transform: translateY(0) rotate(4deg); } }
@keyframes confettiFloat { 50% { transform: translateY(-6px) rotate(2deg); } }

/* Снег (снежинки создаёт main.js внутри [data-snow]) */
.snow { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; border-radius: inherit; }
.snow i { position: absolute; top: -12px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: var(--white); opacity: var(--o); filter: blur(var(--b)); animation: snowfall var(--d) linear var(--delay) infinite, snowsway calc(var(--d) / 3) ease-in-out var(--delay) infinite alternate; }
/* падает на всю высоту блока (top в % от блока), покачиваясь из стороны в сторону */
@keyframes snowfall { to { top: 104%; } }
@keyframes snowsway { to { transform: translateX(var(--dx)); } }

/* Вкладка-анонс */
.tab-panel.tab-panel--ny { position: relative; overflow: hidden; isolation: isolate; background: var(--cherry); color: var(--butter); }
.tab-panel--ny::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 80% 20%, rgb(255 255 255 / .14), transparent 50%); }
.ny-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ny-panel__eyebrow { display: inline-block; padding: 8px 16px; border-radius: var(--r-pill); background: var(--butter); color: var(--cherry); font: 400 14px/1 var(--font-display); text-transform: uppercase; rotate: -3deg; }
.ny-panel__title { margin-top: 22px; font: 400 clamp(36px, 4.4vw, 64px)/1 var(--font-display); text-transform: uppercase; color: var(--white); }
.ny-panel__title em { display: block; margin-top: .15em; font: 400 .72em/1.1 var(--font-logo); text-transform: none; color: var(--butter); rotate: -2deg; }
.ny-panel__lead { margin-top: 22px; max-width: 520px; font-size: 19px; line-height: 1.55; color: color-mix(in srgb, var(--butter) 75%, var(--white)); }
.ny-panel__art { aspect-ratio: 1; border-radius: 40px; overflow: hidden; border: 8px solid var(--white); box-shadow: var(--shadow-lg); rotate: 3deg; }
.pick__body { display: flex; flex-direction: column; }
.pick__label { font-size: 14px; color: var(--c-primary); }
.pick__label::before { content: "[ "; } .pick__label::after { content: " ]"; }
.pick__title { font: 400 26px/1.05 var(--font-display); text-transform: uppercase; color: var(--c-primary); margin: 10px 0 8px; }
.pick__meta { font-size: 14px; color: var(--c-muted); }
.pick__price { font: 400 24px/1 var(--font-display); color: var(--c-primary); margin-top: 18px; }
.pick__price.is-soon { font: 500 15px/1 var(--font-body); color: var(--c-muted); }

.tab-panel { margin-top: 20px; background: var(--white); border-radius: var(--r-lg); padding: clamp(32px, 5vw, 72px); }
.tab-panel.is-active { animation: panelIn .6s var(--ease); }
@keyframes panelIn { from { opacity: 0; translate: 0 16px; } }
.panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 36px 0; }
.facts li { background: var(--c-bg); border-radius: var(--r); padding: 18px; }
.facts b { display: block; font: 400 26px/1.1 var(--font-display); color: var(--c-primary); white-space: nowrap; margin-bottom: 6px; }
.facts span { font-size: 13px; color: var(--c-muted); }
.bonus { background: var(--butter); border-radius: var(--r); padding: 26px 30px; margin-bottom: 36px; }
.bonus .eyebrow { margin-bottom: 12px; }
.ticks li { position: relative; padding-left: 26px; font-size: 15px; }
.ticks li + li { margin-top: 8px; }
.ticks li::before { content: "✦"; position: absolute; left: 0; top: 1px; color: var(--c-primary); font-size: 12px; }
.buy { display: flex; align-items: center; gap: 28px; }
.buy__price { font: 400 44px/1 var(--font-display); letter-spacing: -0.02em; color: var(--c-primary); }
.buy__price.is-soon { font: 400 30px/1 var(--font-logo); color: var(--c-muted); letter-spacing: 0; }
.legal-note { margin-top: 16px; font-size: 13px; color: var(--c-muted); }
.legal-note a { color: var(--c-primary); text-underline-offset: 3px; }

/* Обёртка-«картошка» и веер листов */
.kartoshka { width: 72%; height: 36%; border-radius: 999px; background: radial-gradient(circle at 20% 30%, rgb(255 255 255 / .18) 0 2px, transparent 3px) 0 0 / 12px 10px, var(--choco); box-shadow: inset 0 -10px 18px rgb(0 0 0 / .25), var(--shadow-md); display: grid; place-items: center; rotate: -8deg; transition: rotate .5s var(--ease); }
.pick__card:hover .kartoshka { rotate: 0deg; }
.kartoshka__band { width: 46%; height: 100%; display: grid; place-items: center; border-left: 2px solid var(--white); border-right: 2px solid var(--white); --stripe-w: 7px; }
.kartoshka__band b { background: var(--white); color: var(--c-primary); font: 400 15px/1 var(--font-logo); padding: 4px 8px; border-radius: var(--r-pill); }
.fan { position: relative; width: 100%; height: 100%; }
.fan img { position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1357/1920; object-fit: cover; border-radius: 3px; box-shadow: var(--shadow-md); transition: rotate .5s var(--ease), translate .5s var(--ease); }
.fan img:nth-child(1) { rotate: -12deg; translate: -100% -48%; }
.fan img:nth-child(2) { z-index: 2; translate: -50% -52%; }
.fan img:nth-child(3) { rotate: 12deg; translate: 0% -48%; }
.pick__card:hover .fan img:nth-child(1) { rotate: -18deg; translate: -112% -46%; }
.pick__card:hover .fan img:nth-child(3) { rotate: 18deg; translate: 12% -46%; }

/* Как это работает: сцена */
.how { position: sticky; top: 120px; }
.demo { position: relative; aspect-ratio: 1; width: 100%; background: var(--stripes-thin); border-radius: var(--r); overflow: hidden; container-type: inline-size; }
/* Иллюстрация: все предметы — группы внутри одного SVG, двигаются по этапам data-stage */
.scene { display: block; width: 100%; height: 100%; overflow: visible; }
.scene * { transform-box: fill-box; }
.sc-table { fill: var(--white); opacity: .9; }
.sc-paper-in { fill: var(--white); stroke: var(--choco); stroke-opacity: .12; }
.sc-body { fill: var(--cherry); filter: drop-shadow(0 8px 10px rgb(61 39 34 / .2)); }
.sc-body-top { fill: var(--white); opacity: .12; }
.sc-slot { fill: var(--choco); }
.sc-btn { fill: var(--butter); }
.sc-led { fill: var(--blue); }
.sc-paper { fill: var(--white); filter: drop-shadow(0 4px 6px rgb(61 39 34 / .14)); }
.sc-hole { fill: var(--c-bg); stroke: var(--cherry); stroke-opacity: .35; stroke-dasharray: 4 4; opacity: 0; transition: opacity .4s; }
.sc-tpl-text { font: 400 13px var(--font-logo); fill: var(--cherry); }
.sc-plate { fill: var(--white); filter: drop-shadow(0 4px 6px rgb(61 39 34 / .12)); }
.sc-cut { fill: none; stroke: var(--cherry); stroke-width: 2; stroke-dasharray: 6 5; opacity: 0; transition: opacity .3s; }
.sc-blade { stroke: var(--choco); stroke-width: 3.5; stroke-linecap: round; }
.sc-ring { fill: none; stroke: var(--cherry); stroke-width: 3.5; }
.sc-wow rect { fill: var(--cherry); filter: drop-shadow(0 6px 8px rgb(61 39 34 / .25)); }
.sc-wow text { font: 400 44px var(--font-logo); fill: var(--butter); }
.sc-sparks text { font-size: 22px; fill: var(--cherry); }
.sc-sparks text:nth-child(even) { fill: var(--blue); font-size: 28px; }

/* Переходы между этапами */
.sc-printer, .sc-sheet, .sc-cake, .sc-piece, .sc-wow, .sc-scissors { transition: transform .9s var(--ease), opacity .6s var(--ease); }
.sc-cake { opacity: 0; transform: translateY(24px); }
.sc-scissors { opacity: 0; }
.sc-wow { opacity: 0; transform: scale(.2) rotate(-14deg); transform-origin: center; }
.sc-sparks text { opacity: 0; transform: scale(0); transform-origin: center; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; }

/* 1 — печать: лист выезжает из щели, лампочка мигает */
.demo[data-stage="1"] .sc-sheet, .demo[data-stage="1"] .sc-piece { animation: printOut 2s cubic-bezier(.4, 0, .3, 1) both; }
.demo[data-stage="1"] .sc-led { animation: led .4s steps(2) infinite; }
@keyframes printOut { from { transform: translateY(-192px); } }
@keyframes led { 50% { fill: var(--butter); } }
/* 2 — вырезаем: принтер уезжает, по пунктиру ходят ножницы */
.demo:not([data-stage="1"]) .sc-printer { transform: translateY(-150px); opacity: 0; }
.demo[data-stage="2"] .sc-cut { opacity: 1; animation: ants .6s linear infinite; }
.demo[data-stage="2"] .sc-scissors { opacity: 1; animation: snip 2.4s linear infinite; }
.demo[data-stage="2"] .sc-scissors-in .sc-blade { animation: chop .3s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.demo[data-stage="2"] .sc-scissors-in .sc-blade--2 { animation-name: chop2; }
@keyframes chop2 { to { transform: rotate(-14deg); } }
/* ножницы вращаются вокруг своего шарнира (точка 0,0 рисунка) */
.sc-scissors { transform-box: view-box; transform-origin: 0 0; }
@keyframes ants { to { stroke-dashoffset: -22; } }
@keyframes snip {
  0%, 100% { transform: translate(132px, 111px) rotate(90deg); }
  25% { transform: translate(202px, 111px) rotate(90deg); }
  26% { transform: translate(202px, 111px) rotate(180deg); }
  50% { transform: translate(202px, 201px) rotate(180deg); }
  51% { transform: translate(202px, 201px) rotate(270deg); }
  75% { transform: translate(132px, 201px) rotate(270deg); }
  76% { transform: translate(132px, 201px) rotate(360deg); }
}
@keyframes chop { to { transform: rotate(14deg); } }
/* 3 — заворачиваем: лист уходит, обёртка перелетает на «картошку» и садится поясом */
.demo[data-stage="3"] .sc-hole, .demo[data-stage="4"] .sc-hole { opacity: 1; }
.demo[data-stage="3"] .sc-sheet, .demo[data-stage="4"] .sc-sheet { opacity: 0; transform: translateY(40px) rotate(-4deg); }
.demo[data-stage="3"] .sc-cake, .demo[data-stage="4"] .sc-cake { opacity: 1; transform: none; }
.sc-piece { transform-origin: 0 0; }
.demo[data-stage="3"] .sc-piece, .demo[data-stage="4"] .sc-piece { transform: translate(35px, 122px) scale(.93, .95); transition-delay: .25s; }
/* 4 — удивляем: пирожное подпрыгивает, «Вау!» и искры */
.demo[data-stage="4"] .sc-cake, .demo[data-stage="4"] .sc-piece { animation: hop .8s cubic-bezier(.3, 0, .3, 1) .2s; }
.demo[data-stage="4"] .sc-wow { opacity: 1; transform: rotate(-6deg); transition: transform .6s cubic-bezier(.3, 1.6, .5, 1) .35s, opacity .3s .35s; }
.demo[data-stage="4"] .sc-sparks text { opacity: 1; transform: scale(1); }
.demo[data-stage="4"] .sc-sparks text:nth-child(2) { transition-delay: .1s; }
.demo[data-stage="4"] .sc-sparks text:nth-child(3) { transition-delay: .2s; }
.demo[data-stage="4"] .sc-sparks text:nth-child(4) { transition-delay: .15s; }
.demo[data-stage="4"] .sc-sparks text:nth-child(5) { transition-delay: .25s; }
@keyframes hop { 35% { translate: 0 -34px; } 60% { translate: 0 0; } 75% { translate: 0 -8px; } 100% { translate: 0 0; } }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.step { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; border-radius: var(--r); border: var(--dash); transition: background .3s, border-color .3s, color .3s; }
.step__num { font: 400 20px/1 var(--font-display); color: var(--c-primary); }
.step__title { font-size: 14px; font-weight: 600; }
.step.is-active { background: var(--c-primary); border: 1.5px solid var(--c-primary); color: var(--butter); }
.step.is-active .step__num { color: var(--butter); }

/* Листы обёрток */

/* ---------- 03. Гайд — в стиле настоящей обложки (поэтому здесь Cormorant) ---------- */
.cover { position: relative; min-height: 720px; background: var(--white); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-md); }
.cover__block { position: absolute; background: var(--butter); }
.cover__block--top { right: 0; top: 0; width: 18%; height: 56%; }
.cover__block--bottom { right: 6%; bottom: 0; width: 8%; height: 20%; }
.cover__photo { position: absolute; right: 6%; top: 0; height: 100%; width: 42%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.08); -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 92%); mask-image: linear-gradient(to bottom, #000 60%, transparent 92%); }
.cover__col { position: relative; z-index: 2; min-height: 720px; width: 56%; padding: 56px 40px 48px 56px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.cover__kicker { padding: 8px 14px; border-radius: var(--r-pill); background: var(--c-bg); border: var(--dash); font: 600 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--choco); }
.cover__hand { margin: 28px 0 6px; font: 400 32px/1 var(--font-logo); color: var(--c-primary); rotate: -4deg; transform-origin: left; }
.cover__hand::after { content: ""; display: block; height: 7px; margin-top: 4px; background: var(--butter); border-radius: 8px; rotate: -2deg; }
.cover__title { font: 700 clamp(44px, 4.4vw, 66px)/.98 var(--font-serif); text-transform: uppercase; letter-spacing: -0.01em; text-wrap: balance; }
.cover__title mark { display: inline-block; margin-top: 6px; background: var(--butter); color: var(--choco); padding: 0 12px; }
.cover__sub { font-size: 18px; line-height: 1.5; margin-top: 20px; max-width: 460px; }
.buy--cover { margin-top: 28px; }
.buy--cover .buy__price { font-size: 30px; }
.cover__note { max-width: 46ch; margin-top: 16px; font-size: 12.5px; line-height: 1.45; color: var(--c-muted); }
.cover__note a { color: inherit; text-underline-offset: 2px; }
.cover__edition { margin-top: 10px; font-size: 12px; color: var(--c-muted); }

/* ---------- 03. Раскрытие обложки при скролле ----------
   Работает только с классом .is-live (его ставит main.js).
   --e: 0→1 рост рамки, --c: 0→1 проявление обложки.
   Вся сцена — вишнёвое поле, слова жёлтым и голубым. */
.xp__bg, .xp__portrait, .xp__title { display: none; }
.xp.is-live { padding-top: clamp(64px, 8vw, 120px); --e: 0; --c: 0; --hdr: 85px;
  --fw: min(1200px, 92vw); --fh: min(740px, calc(100vh - var(--hdr) - 48px)); }
.xp.is-live .xp__track { height: 320vh; }
.xp.is-live .xp__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.xp.is-live .xp__static { display: contents; }
.xp.is-live .sec-head { display: none; }
.xp.is-live .xp__bg { display: block; position: absolute; inset: 0; background: var(--cherry); }
.xp.is-live .xp__frame {
  position: absolute; left: 50%; top: calc(50% + var(--hdr) / 2); translate: -50% -50%;
  width: calc(300px + var(--e) * (var(--fw) - 300px));
  height: calc(400px + var(--e) * (var(--fh) - 400px));
  --rr: calc(126px * (1 - var(--e)) + 24px);
  border-radius: var(--rr) var(--rr) 24px 24px; overflow: hidden;
  background: var(--white); box-shadow: var(--shadow-lg);
  outline: calc(10px * (1 - var(--e))) solid var(--white);
}
.xp.is-live .cover { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: var(--fw); height: var(--fh); min-height: 0; box-shadow: none; opacity: 1; }
.xp.is-live .cover__col { min-height: 100%; padding: clamp(28px, 5vh, 52px) 40px clamp(24px, 4vh, 44px) 56px; opacity: var(--c); }
.xp.is-live .cover:not(.is-open) .cover__col { pointer-events: none; }
.xp.is-live .xp__portrait {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.08);
  opacity: calc(1 - var(--c));
}
.xp.is-live .xp__title {
  display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none;
  position: absolute; left: 0; right: 0; top: calc(50% + var(--hdr) / 2); translate: 0 -50%;
  text-align: center; opacity: calc(1 - var(--e) * 1.3);
}
.xp__word { font: 400 clamp(56px, 8vw, 128px)/.95 var(--font-display); text-transform: uppercase; color: var(--butter); letter-spacing: -0.03em; }
.xp__word em { font: 400 1.05em/1 var(--font-logo); text-transform: none; color: var(--blue); letter-spacing: 0; }
.xp__word--l { translate: calc(var(--e) * -55vw) 0; }
.xp__word--r { translate: calc(var(--e) * 55vw) 0; }
.xp__meta { font: 500 15px/1 var(--font-body); color: var(--butter); }
.xp__meta--l { translate: calc(var(--e) * -70vw) 0; margin-bottom: 18px; }
.xp__meta--r { translate: calc(var(--e) * 70vw) 0; margin-top: 18px; }

/* ---------- Цитата: жёлтая плашка (после вишнёвой сцены гайда) ---------- */
.manifesto__grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(40px, 6vw, 96px); align-items: center; background: var(--butter); border-radius: var(--r-lg); padding: clamp(36px, 5vw, 72px); }
.manifesto__photo { rotate: 2deg; }
.manifesto__photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 25%; border-radius: var(--r); border: 10px solid var(--white); box-shadow: var(--shadow-lg); }
.manifesto__quote p { font: 400 clamp(30px, 3.2vw, 48px)/1.05 var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; color: var(--cherry); }
.manifesto__quote em { display: block; font: 400 clamp(36px, 3.8vw, 58px)/1.1 var(--font-logo); text-transform: none; letter-spacing: 0; color: var(--choco); rotate: -2deg; }
.manifesto__quote cite { display: block; margin-top: 36px; font: 500 15px/1 var(--font-body); font-style: normal; }
.manifesto__quote cite::before { content: "[ "; } .manifesto__quote cite::after { content: " ]"; }

/* ---------- Вопросы ---------- */
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(48px, 8vw, 128px); align-items: start; }
.accordion { border-top: var(--dash); }
.accordion details { border-bottom: var(--dash); }
.accordion summary { list-style: none; cursor: pointer; padding: 26px 0; font: 600 21px/1.3 var(--font-body); display: flex; justify-content: space-between; gap: 24px; align-items: center; transition: color .3s; }
.accordion summary:hover { color: var(--c-primary); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(var(--c-primary), var(--c-primary)) center / 13px 3px no-repeat, linear-gradient(var(--c-primary), var(--c-primary)) center / 3px 13px no-repeat; background-color: var(--butter); transition: rotate .4s var(--ease), background-color .3s; }   /* плюс нарисован полосками — всегда ровно по центру */
.accordion details[open] summary::after { rotate: 45deg; background-color: var(--blue); }
.accordion details p { padding: 0 64px 26px 0; color: var(--c-muted); }
.accordion a { color: var(--c-primary); }

/* ---------- Финал: жёлтые полоски ---------- */
.final__box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(40px, 6vw, 88px) clamp(20px, 5vw, 72px); background: var(--stripes-butter); border-radius: var(--r-lg); }
.final__box .eyebrow, .final__box .h2 { background: var(--white); width: fit-content; padding: 4px 14px; }
.final__box .h2 { padding: 18px 28px; border-radius: var(--r); }
.final__text { max-width: 44ch; margin-top: 20px; padding: 18px 22px; background: var(--white); border-radius: var(--r); font-size: 17px; line-height: 1.55; }
main:has(.final) + .footer { margin-top: 120px; }
.final__actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.final__actions .btn--ghost { background: var(--white); }

/* Карточка заказа — как бумажный чек из кондитерской: белая, с «отрывным» зубчатым краем сверху */
.order { position: relative; background: var(--white); border-radius: 0 0 32px 32px; padding: 30px clamp(20px, 3vw, 34px) 26px; box-shadow: var(--shadow-lg); rotate: 1deg; margin-top: 14px; }
.order::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; background: radial-gradient(circle at 10px 0, transparent 9px, var(--white) 10px) 0 0 / 20px 14px repeat-x; }
.order__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: var(--dash); }
.order__title { font: 400 clamp(30px, 3vw, 38px)/1 var(--font-logo); color: var(--c-primary); rotate: -2deg; }
.order__stamp { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--butter); color: var(--cherry); rotate: 12deg; }
.order__stamp svg { width: 34px; height: 34px; }
.order__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.order__field { margin-bottom: 16px; }
.order__field > label { display: block; margin-bottom: 7px; font: 400 13px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--c-primary); }
.order input[type="text"], .order input[type="tel"], .order input[type="date"], .order input[type="number"] {
  width: 100%; height: 52px; padding: 0 18px; border: 2px solid transparent; border-radius: 16px; background: var(--c-surface-2);
  font: 500 17px/1 var(--font-body); color: var(--choco); transition: border-color .2s, background .2s; }
.order input::placeholder { color: var(--c-muted); opacity: .75; }
.order input:hover { border-color: color-mix(in srgb, var(--cherry) 25%, transparent); }
.order input:focus { outline: none; border-color: var(--cherry); background: var(--white); }
.order input[type="date"] { appearance: none; -webkit-appearance: none; }
.order input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
.order__field.is-bad input { border-color: var(--cherry); background: color-mix(in srgb, var(--cherry) 6%, var(--white)); }
.order__err { margin-top: 6px; font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--cherry); }
.order__err:empty { display: none; }
.order__hint { margin-top: 6px; font-size: 13.5px; color: var(--c-muted); }

.order__stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px; height: 52px; padding: 4px; border-radius: 16px; background: var(--c-surface-2); }
.order .order__stepper input { min-width: 0; height: 44px; padding: 0; text-align: center; background: transparent; font: 400 20px/1 var(--font-display); color: var(--cherry); -moz-appearance: textfield; }
.order__stepper input::-webkit-inner-spin-button, .order__stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.order__step { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; background: var(--white); color: var(--cherry); font: 700 24px/1 var(--font-body); text-align: center; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), background .2s; }
.order__step:hover { background: var(--butter); }
.order__step:active { transform: scale(.9); }

.order__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.order__chips button { min-height: 36px; padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px dashed color-mix(in srgb, var(--cherry) 40%, transparent); font: 600 13.5px/1 var(--font-body); color: var(--cherry); transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.order__chips button:hover { background: var(--butter); border-style: solid; }
.order__chips button.is-on { background: var(--cherry); color: var(--butter); border: 1.5px solid var(--cherry); }
.order__chips button:active { transform: scale(.94); }

.order__agree { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; margin-top: 6px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.order__agree input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; cursor: pointer; }
.order__box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--cherry); background: var(--white); display: grid; place-items: center; transition: background .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.order__box::after { content: ""; width: 12px; height: 7px; border: solid var(--butter); border-width: 0 0 3px 3px; rotate: -45deg; translate: 0 -2px; scale: 0; transition: scale .25s cubic-bezier(.3, 1.6, .5, 1); }
.order__agree input:checked + .order__box { background: var(--cherry); transform: rotate(-6deg); }
.order__agree input:checked + .order__box::after { scale: 1; }
.order__agree input:focus-visible + .order__box { outline: 2px solid var(--cherry); outline-offset: 3px; }
.order__agree.is-bad .order__box { background: color-mix(in srgb, var(--cherry) 10%, var(--white)); }
.order__agree a { color: var(--cherry); text-underline-offset: 3px; }

.order__send { display: grid; gap: 10px; margin-top: 20px; }
.order__send .btn { width: 100%; }
.order__send .btn--ghost { background: var(--white); border: 2px solid var(--cherry); }
.order__note { margin-top: 12px; font-size: 13px; line-height: 1.4; color: var(--c-muted); text-align: center; }

/* ---------- Как сделать заказ: самовывоз, доставка, «Важно» ---------- */
.how__head { text-align: center; margin-bottom: clamp(32px, 4vw, 52px); }
.how__head .h2 em { margin-left: auto; margin-right: auto; }
.how__ways { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.way { display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-lg); }
.way--pickup { background: var(--blue); }
.way--delivery { background: var(--butter); }
.way__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.way__title { font: 400 clamp(28px, 2.6vw, 38px)/1 var(--font-display); text-transform: uppercase; color: var(--c-primary); }
.way__badge { padding: 9px 16px; border-radius: var(--r-pill); background: var(--cherry); color: var(--butter); font: 600 14px/1 var(--font-body); white-space: nowrap; }
.way__map { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: color-mix(in srgb, var(--blue) 55%, var(--choco) 8%); color: inherit; text-decoration: none; isolation: isolate; }
.way__map svg { display: block; width: 100%; height: auto; aspect-ratio: 400 / 180; }
.way__pin { transition: translate .45s cubic-bezier(.3, 1.6, .5, 1); }
.way__map:hover .way__pin { translate: 0 -8px; }
.way__addr { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 18px; background: var(--white); box-shadow: var(--shadow-md); font: 400 clamp(17px, 1.6vw, 21px)/1.1 var(--font-display); text-transform: uppercase; color: var(--c-primary); }
.way__addr small { font: 600 13px/1 var(--font-body); text-transform: none; color: var(--choco); }
.way__addr i { font: 600 13px/1.2 var(--font-body); font-style: normal; text-transform: none; color: var(--choco); text-decoration: underline; text-underline-offset: 3px; }
.way__tip, .way__lead { font-size: 16px; line-height: 1.55; }
.way__tip { padding: 16px 18px; border-radius: 18px; background: var(--white); }
.way__tip b, .way__lead b { color: var(--c-primary); }
.way__list { list-style: none; display: grid; gap: 10px; }
.way__list li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--white); font-size: 16px; line-height: 1.4; }
.way__list li::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--cherry) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23ffedad' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.way__list b { color: var(--c-primary); }
.way__warn { margin-top: auto; padding: 16px 18px; border-radius: 18px; border: var(--dash); background: color-mix(in srgb, var(--white) 60%, transparent); font-size: 15px; line-height: 1.5; font-weight: 500; }

.how__important { display: grid; grid-template-columns: auto 1fr; gap: 16px clamp(24px, 4vw, 56px); align-items: center; margin-top: 20px; padding: clamp(22px, 3vw, 34px) clamp(22px, 4vw, 48px); border-radius: var(--r-lg); background: var(--cherry); color: var(--butter); }
.how__important-title { font: 400 clamp(40px, 4vw, 58px)/1 var(--font-logo); color: var(--white); rotate: -4deg; }
.how__important ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.how__important li { padding: 16px 18px; border-radius: 18px; background: color-mix(in srgb, var(--white) 12%, transparent); font-size: 16px; line-height: 1.45; }
.how__important b { display: block; margin-bottom: 4px; font: 400 15px/1.2 var(--font-display); text-transform: uppercase; color: var(--white); }

.how__shelf { display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%; margin: 20px auto 0; padding: 14px 22px 14px 14px; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-sm); font-size: 16px; line-height: 1.4; }
.how__shelf::before { content: "72ч"; flex-shrink: 0; display: grid; place-items: center; padding-bottom: 2px; width: 52px; height: 52px; border-radius: 50%; background: var(--butter); color: var(--cherry); font: 400 15px/1 var(--font-display); }
.how__shelf b { color: var(--c-primary); }

/* Карточка заказа: блок «Именинник» (появляется, если повод — день рождения) */
.order__bday { position: relative; margin: 14px 0 18px; padding: 30px 16px 4px; border-radius: 20px; border: var(--dash); background: color-mix(in srgb, var(--blue) 35%, var(--white)); }
.order__bday[hidden] { display: none; }
.order__bday-title { position: absolute; top: -14px; left: 14px; padding: 2px 12px 4px; border-radius: var(--r-pill); background: var(--cherry); color: var(--butter); font: 400 18px/1.2 var(--font-logo); rotate: -2deg; }
.order__bday input[type="text"], .order__bday input[type="date"] { background: var(--white); }

/* Карточка заказа: способ получения — две «галочки» */
.order__get { border: 0; padding: 0; min-width: 0; }
.order__get legend { display: block; margin-bottom: 7px; padding: 0; font: 400 13px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--c-primary); }
.order__ways { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.order__way { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; min-height: 60px; padding: 10px 14px; border: 2px solid transparent; border-radius: 16px; background: var(--c-surface-2); cursor: pointer; transition: border-color .2s, background .2s; }
.order__way:hover { border-color: color-mix(in srgb, var(--cherry) 25%, transparent); }
.order__way input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.order__way b { display: block; font: 600 15px/1.2 var(--font-body); color: var(--choco); }
.order__way small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--c-muted); }
.order__way:has(input:checked) { border-color: var(--cherry); background: var(--white); }
.order__way input:checked + .order__box { background: var(--cherry); transform: rotate(-6deg); }
.order__way input:checked + .order__box::after { scale: 1; }
.order__way input:focus-visible + .order__box { outline: 2px solid var(--cherry); outline-offset: 3px; }
.order__get.is-bad .order__way { border-color: color-mix(in srgb, var(--cherry) 45%, transparent); }

/* Соцсети: круглые «печенья» с иконкой; подпись видна на широком экране */
.socials { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.soc { --soc-ink: var(--white); display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 6px; border-radius: var(--r-pill); background: var(--white); color: var(--cherry); font: 600 14px/1 var(--font-body); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background .25s, color .25s; }
.soc svg { width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: var(--cherry); color: var(--butter); --soc-ink: var(--cherry); transition: rotate .4s cubic-bezier(.3, 1.6, .5, 1); }
.soc--max svg path:first-child { fill: var(--butter); }
.soc:hover { transform: translateY(-3px) rotate(-2deg); background: var(--butter); }
.soc:hover svg { rotate: -12deg; }
.final__or { margin-top: 22px; font: 400 24px/1.15 var(--font-logo); color: var(--c-primary); background: var(--white); width: fit-content; padding: 6px 14px 8px; border-radius: 16px; }
.final__intro .socials { margin-top: 12px; }
.socials--footer .soc { background: color-mix(in srgb, var(--white) 12%, transparent); color: var(--butter); box-shadow: none; }
.socials--footer .soc svg { background: var(--butter); color: var(--cherry); }
.socials--footer .soc:hover { background: var(--butter); color: var(--cherry); }

@media (max-width: 1000px) {
  .how__ways { grid-template-columns: 1fr; }
  .how__important { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .how__important ul { grid-template-columns: 1fr; }
  .how__shelf { border-radius: 24px; align-items: flex-start; }
  .way { border-radius: 28px; }
  .way__addr { left: 10px; bottom: 10px; padding: 10px 12px; }
  .way__map svg { aspect-ratio: 400 / 230; }
  .order__ways { grid-template-columns: 1fr; }
  .socials { gap: 6px; }
  .soc { padding: 0 14px 0 5px; height: 46px; }
}

/* ---------- Футер ---------- */
.footer { margin-top: var(--section); background: var(--c-primary); color: var(--butter); padding-top: 56px; overflow: hidden; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 32px; font-size: 15px; font-weight: 500; }
.footer__links a { text-decoration: none; }
.footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; opacity: .85; }
.footer__legal a { text-underline-offset: 3px; }
.footer__meta { flex-basis: 100%; font-size: 12px; opacity: .8; }
.meta-note { width: fit-content; max-width: 46ch; margin-top: 8px; padding: 6px 12px; border-radius: 12px; background: var(--white); font-size: 12px; line-height: 1.4; color: var(--c-muted); }
.soc sup { font-size: .7em; margin-left: 1px; }
/* Большое имя внизу — целиком, с запасом под хвостики букв (раньше обрезалось краем страницы) */
.footer__word { font: 400 11vw/1.25 var(--font-logo); text-align: center; white-space: nowrap; margin-top: 24px; padding-bottom: .12em; }
.footer--doc { padding-bottom: 48px; }
.footer__brand { font: 400 30px/1 var(--font-logo); text-decoration: none; }

/* ---------- Прелоадер: торт собирается, потом экран растворяется ----------
   Виден только с JS (класс .js на <html>). Пока он виден, анимации главного экрана стоят на паузе,
   чтобы большой торт собирался уже на глазах. */
.preloader { display: none; }
.js .preloader { position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--c-bg); transition: opacity .6s var(--ease), visibility .6s; }
.js.is-loaded .preloader { opacity: 0; visibility: hidden; }
.js:not(.is-loaded) .hero *, .js:not(.is-loaded) .hero *::before, .js:not(.is-loaded) .hero *::after { animation-play-state: paused !important; }
.pl-cake { display: flex; flex-direction: column; align-items: center; zoom: 1.5; }
.pl-tier { display: block; height: 16px; border-radius: 7px 7px 5px 5px; animation: plDrop .55s cubic-bezier(.3, .9, .4, 1) both; box-shadow: inset 0 3px 0 rgb(255 255 255 / .55); }
.pl-tier--1 { width: 72px; background: var(--stripes-cherry); --stripe-w: 6px; animation-delay: .1s; }
.pl-tier--2 { width: 56px; background: var(--stripes-butter); --stripe-w: 5px; animation-delay: .35s; }
.pl-tier--3 { width: 40px; background: var(--stripes-blue); --stripe-w: 4px; animation-delay: .6s; }
.pl-cherry { width: 14px; height: 14px; border-radius: 50%; background: var(--cherry); margin-bottom: -2px; animation: plCherry .6s cubic-bezier(.3, .9, .4, 1) .85s both, plBob 1.2s ease-in-out 1.6s infinite; }
.pl-plate { display: block; width: 92px; height: 6px; margin-top: 2px; border-radius: 50%; background: var(--white); box-shadow: 0 4px 10px rgb(61 39 34 / .14); }
.pl-name { font: 400 22px/1 var(--font-logo); color: var(--cherry); animation: signIn .6s var(--ease) .5s both; }
@keyframes plDrop { 0% { opacity: 0; transform: translateY(-60px); } 60% { opacity: 1; transform: translateY(0) scaleY(.8); } 80% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes plCherry { 0% { opacity: 0; transform: translateY(-70px); } 60% { opacity: 1; transform: translateY(0) scale(1.2, .8); } 100% { transform: none; } }
@keyframes plBob { 50% { translate: 0 -5px; } }

/* ---------- Полоска прогресса прокрутки (под шапкой) ---------- */
.progress { position: fixed; z-index: 60; left: 0; top: 0; height: 4px; width: 100%; background: var(--cherry); transform-origin: 0 50%; transform: scaleX(0); border-radius: 0 4px 4px 0; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .progress { animation: progress linear both; animation-timeline: scroll(root); }
  @keyframes progress { to { transform: scaleX(1); } }
}

/* ---------- Большое имя в подвале: буквы подпрыгивают под курсором ---------- */
.footer__word span { display: inline-block; transition: transform .5s cubic-bezier(.3, 1.8, .5, 1), color .3s; }
.footer__word span:hover { transform: translateY(-14%) rotate(-6deg) scale(1.08); color: var(--white); transition-duration: .2s; }

/* ---------- Вопросы: ответ выезжает плавно ---------- */
.accordion details[open] p { animation: faqIn .45s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-8px); } }


/* ---------- Посыпка, разлетающаяся по клику на кнопку ---------- */
.sprinkle { position: fixed; z-index: 120; width: 4px; height: 12px; border-radius: 4px; pointer-events: none; }

/* ---------- Вишенка-курсор (только мышь): догоняет курсор, над кнопками и ссылками становится кольцом ---------- */
.cursor-cherry { position: fixed; z-index: 110; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .7) 0 2px, transparent 3px), var(--cherry); transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background-color .3s, opacity .3s; opacity: 0; }
.cursor-cherry::before { content: ""; position: absolute; left: 7px; top: -7px; width: 7px; height: 9px; border-left: 2px solid var(--choco); border-radius: 8px 0 0 0; transform: rotate(18deg); transition: opacity .2s; }
.cursor-cherry.is-on { opacity: 1; }
.cursor-cherry.is-link { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgb(142 24 37 / .12); box-shadow: inset 0 0 0 2px var(--cherry); }
.cursor-cherry.is-link::before { opacity: 0; }
.cursor-cherry.is-down { width: 10px; height: 10px; margin: -5px 0 0 -5px; }

/* ---------- Тост ---------- */
.toast { position: fixed; left: 50%; bottom: 88px; z-index: 100; translate: -50% 300px; visibility: hidden; background: var(--choco); color: var(--butter); padding: 16px 24px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg); font-size: 15px; transition: translate .4s var(--ease); max-width: calc(100vw - 32px); text-align: center; }
.toast.is-on { translate: -50% 0; visibility: visible; }

/* ---------- Появление при скролле ---------- */
.js .reveal { opacity: 0; translate: 0 32px; transition: opacity .8s var(--ease), translate .8s var(--ease); }
.js .reveal.is-in { opacity: 1; translate: none; }

/* Анимации, привязанные к прокрутке (где браузер умеет; в остальных — просто статично) */
@supports (animation-timeline: view()) {
  .sec-head__num { animation: numFill linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
  @keyframes numFill { to { color: var(--cherry); } }
  .manifesto__photo { animation: tiltIn linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .about__main { animation: aboutParallax linear both; animation-timeline: view(); }
  @keyframes aboutParallax { from { translate: 0 -5%; } to { translate: 0 5%; } }
  @keyframes tiltIn { from { transform: rotate(-14deg) scale(.82); } }
  .size-card, .pick__card { animation: cardIn linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  .size-card:nth-child(2), .pick__card:nth-child(2) { animation-name: cardIn2; }
  @keyframes cardIn { from { transform: translateY(90px) rotate(-5deg); } }
  @keyframes cardIn2 { from { transform: translateY(140px) rotate(4deg); } }
  /* Ленты «заползают» вверх по мере прокрутки */
  .ticker__svg { animation: ribbonCrawl linear both; animation-timeline: view(); animation-range: entry 0% exit 60%; }
  @keyframes ribbonCrawl { from { transform: translateY(70px) rotate(2deg); } to { transform: translateY(-50px) rotate(-1.5deg); } }
}

/* ---------- Документы (оферта, политика) ---------- */
.doc { max-width: 860px; padding-top: 72px; padding-bottom: 96px; }
.doc__title { font: 400 clamp(38px, 4.4vw, 60px)/1.02 var(--font-display); text-transform: uppercase; color: var(--c-primary); }
.doc__subtitle { font-size: 20px; color: var(--c-muted); margin: 12px 0 48px; }
.doc h2 { font: 400 24px/1.2 var(--font-display); text-transform: uppercase; color: var(--c-primary); margin: 56px 0 16px; padding-top: 24px; border-top: var(--dash); scroll-margin-top: 100px; }
.doc p { font-size: 16px; line-height: 1.7; }
.doc p + p { margin-top: 12px; }
.doc a:not(.btn) { color: var(--c-primary); text-underline-offset: 3px; }
.doc__toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; padding: 24px; background: var(--white); border-radius: var(--r); }
.doc__toc a { font-size: 13px; text-decoration: none; padding: 6px 12px; border-radius: var(--r-pill); border: var(--dash); }
.doc__toc a:hover { background: var(--butter); }
.doc__list { margin: 12px 0; display: grid; gap: 8px; }
.doc__list li { position: relative; padding-left: 22px; line-height: 1.6; }
.doc__list li::before { content: "✦"; position: absolute; left: 0; top: 2px; color: var(--c-primary); font-size: 12px; }
.doc__requisites { display: grid; grid-template-columns: max-content 1fr; gap: 12px 40px; background: var(--white); border-radius: var(--r); padding: 32px; }
.doc__requisites dt { color: var(--c-muted); font-size: 14px; }
.doc__requisites dd { font-weight: 600; }
.doc__back { margin-top: 56px; }
.fill { background: var(--butter); color: var(--cherry); border: 1px dashed var(--cherry); border-radius: 6px; padding: 0 6px; font-weight: 600; white-space: nowrap; }

/* ---------- Узкие экраны (базово; мобильную версию доведём отдельно) ---------- */
@media (max-width: 1000px) {
  .final__box { grid-template-columns: 1fr; }
  .final .order { max-width: 560px; width: 100%; justify-self: center; }
  .about__grid, .panel__grid, .manifesto__grid, .faq__grid, .pick { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .about__photo, .manifesto__photo { width: 100%; max-width: 340px; margin: 0 auto; }
  .about__frame { flex: none; min-height: 0; aspect-ratio: 4/5; }
  .ny-panel { grid-template-columns: 1fr; }
  .ny-panel__art { max-width: 320px; width: 100%; margin: 0 auto; }
  /* Меню десертов на планшете */
  .sizes { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .size-card { display: grid; grid-template-columns: 44% 1fr; align-items: center; }
  .size-card__img { margin: 10px; aspect-ratio: 1; }
  .size-card__body { grid-template-columns: 1fr; padding: 14px 18px 14px 4px; }
  .slicer { grid-template-columns: 1fr; }
  .slicer__cake { max-width: 560px; width: 100%; margin: 0 auto; }
  .slicer--cakes .slicer__cake { max-width: 260px; }
  .cakes-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cakes-gallery img:nth-child(n+4) { display: none; }
  .bento-extra, .mousse, .cakes-top { grid-template-columns: 1fr; }
  .calc { position: static; }
  .mousse__fan { height: 340px; max-width: 460px; width: 100%; margin: 0 auto; }
  .treats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-head { grid-template-columns: 1fr; gap: 16px; }
  .sec-head__num { font-size: 80px; }
  .how { position: static; }
  .cover { min-height: 0; }
  .cover__block { display: none; }
  /* Фото обложки — сверху баннером, растворяется в белом */
  .cover__photo { position: relative; right: auto; width: 100%; height: 340px; }
  .cover { border-radius: 32px; }

  /* Раскрытие гайда на планшете и телефоне: обложка во всю ширину экрана,
     фото сверху, под ним заголовок, текст и кнопка — всё помещается в один экран */
  .xp.is-live { --fw: calc(100vw - 28px); --fh: min(700px, calc(100svh - var(--hdr) - 28px)); }
  .xp.is-live .xp__track { height: 280vh; }
  .xp.is-live .cover { display: flex; flex-direction: column; border-radius: 28px; }
  .xp.is-live .cover__photo { flex: none; height: 40%; }
  .xp.is-live .cover__col { flex: 1; width: auto; min-height: 0; padding: 18px 20px 20px; gap: 0; justify-content: flex-start; }
  .xp.is-live .cover__kicker { display: none; }
  .xp.is-live .cover__hand { margin-top: 0; font-size: 24px; }
  .xp.is-live .cover__title { font-size: clamp(30px, 8.6vw, 44px); }
  .xp.is-live .cover__sub { font-size: 15px; margin-top: 12px; }
  .xp.is-live .buy--cover { margin-top: 16px; gap: 12px; }
  .xp.is-live .buy--cover .buy__price { font-size: 24px; }
  .xp.is-live .cover__edition { margin-top: 12px; }
  .xp.is-live .xp__frame { border-radius: var(--rr) var(--rr) 28px 28px; }
  .xp__word { font-size: clamp(34px, 9.4vw, 72px); }
  .xp__meta { font-size: 13px; }
  .cover__col { width: auto; min-height: 0; padding: 40px 28px; }
}

/* Невысокие телефоны: фото обложки ниже, мелкая строка «редакция» прячется */
@media (max-width: 1000px) and (max-height: 720px) {
  .xp.is-live .cover__photo { height: 32%; }
  .xp.is-live .cover__edition { display: none; }
}

/* ---------- Телефон ---------- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .nav { height: 68px; }
  .wordmark__name { font-size: 24px; white-space: nowrap; }
  .nav__order { height: 40px; padding: 0 16px; font-size: 13px; }
}
@media (max-width: 420px) {
  /* На узком телефоне в шапке только логотип и меню — кнопок заказа на экране и так много */
  .nav__order { display: none; }
  .nav__burger { margin-left: auto; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 80px; }

  .hero__stage { gap: 20px; padding-top: 20px; }
  .hero__word { font-size: 12.4vw; }
  .hero:not(.is-live) .wc { zoom: .6; margin-top: -24px; }
  .hero__intro { text-align: center; }
  .hero__lead { margin: 0 auto; font-size: 17px; }
  .hero__actions { justify-content: center; }
  .hero__actions .btn { flex: 1 1 auto; }

  .reel__stage { height: 540px; }
  .ticker { margin-top: -30px; }
  .ticker__svg { min-width: 760px; }

  .h2 { font-size: clamp(30px, 8.6vw, 38px); }
  .lead { font-size: 18px; }
  .sec-head { margin-bottom: 36px; padding-bottom: 28px; }
  .sec-head__num { font-size: 64px; -webkit-text-stroke-width: 1.5px; }
  .sec-head__text { font-size: 15px; }

  .manifesto__grid { padding: 22px 20px 32px; border-radius: 32px; gap: 32px; }
  .about__grid { gap: 28px; }
  .about__text { padding: 30px 22px; border-radius: 32px; }
  .manifesto__photo { max-width: 260px; }
  .about__photo { max-width: 320px; }

  .pick__card { grid-template-columns: 96px 1fr; gap: 16px; padding: 12px 16px 12px 12px; border-radius: 26px; }
  .pick__art { border-radius: 18px; }
  .pick__title { font-size: 19px; margin: 6px 0 4px; }
  .pick__meta { font-size: 13px; }
  .pick__price { margin-top: 10px; font-size: 20px; }
  .tab-panel { padding: 28px 20px; border-radius: 32px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts li:last-child { grid-column: span 2; }
  .facts b { font-size: 22px; }
  .bonus { padding: 22px 20px; }
  .buy { flex-wrap: wrap; gap: 16px; }
  .buy .btn { flex: 1 1 100%; }
  .buy__price { font-size: 38px; }
  .steps { grid-template-columns: repeat(2, 1fr); }

  .cover__title { font-size: 40px; }
  .cover__sub { font-size: 17px; }
  .cover__col { padding: 28px 20px; }

  .manifesto__quote p { font-size: 28px; }
  .manifesto__quote em { font-size: 34px; }

  .accordion summary { font-size: 17px; padding: 20px 0; }
  .accordion details p { padding-right: 0; }

  .final__box { padding: 36px 14px 28px; border-radius: 32px; }
  .final__box .h2 { padding: 14px 18px; }
  .final__actions .btn { flex: 1 1 100%; }
  .order { rotate: 0deg; padding: 24px 18px 22px; }
  .order__row { grid-template-columns: 1fr; gap: 0; }

  .footer__links { gap: 0 24px; }
  .footer__links a { display: inline-block; padding-block: 10px; }   /* палец попадает: 44px по высоте */
  .footer__word { font-size: 12.6vw; }

  /* Меню десертов на телефоне: вкладки листаются вбок, всё в одну колонку */
  .menu-tabs { flex-wrap: nowrap; justify-content: flex-start; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .menu-tabs::-webkit-scrollbar { display: none; }
  .menu-tab { padding: 11px 16px; font-size: 14px; }
  .menu-panel { padding: 16px 14px 22px; border-radius: 30px; }
  .menu-sub { margin-top: 36px; }
  .size-card { grid-template-columns: 42% 1fr; border-radius: 26px; }
  .size-card__d { width: 42px; height: 42px; font-size: 10.5px; top: 5px; right: 5px; border-width: 1.5px; }
  .size-card__name { font-size: 20px; }
  .size-card__meta { font-size: 14px; }
  .price-pill { font-size: 17px; padding: 9px 14px; }
  .price-pill--big { font-size: 26px; }
  .slicer { gap: 18px; }
  .slicer__cake { padding-top: 36px; }
  .slicer__cream { top: 24px; height: 40px; }
  .slicer__cherry { width: 38px; height: 38px; margin-left: -19px; }
  .slicer__cherry::before { left: 18px; }
  .slicer__name { font-size: 26px; margin-top: 10px; }
  .slicer__text { font-size: 15px; margin-top: 10px; }
  .slicer__row { margin-top: 16px; }
  .slicer__btn { width: 46px; height: 46px; }
  .slicer__calc { width: 100%; }
  .slicer--cakes .slicer__cake { max-width: 200px; }
  /* галерея тортов листается пальцем */
  .cakes-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 28px -14px 8px; padding: 0 14px 14px; scrollbar-width: none; }
  .cakes-gallery::-webkit-scrollbar { display: none; }
  .cakes-gallery img { flex: 0 0 62%; width: 62%; min-width: 0; scroll-snap-align: center; translate: none !important; display: block !important; }
  /* лента начинок листается пальцем */
  .slicer__picks { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -14px; padding: 4px 14px 10px; scrollbar-width: none; }
  .slicer__picks::-webkit-scrollbar { display: none; }
  .slicer__pick { flex: 0 0 auto; width: 88px; scroll-snap-align: center; font-size: 11.5px; }
  .slicer__pick img { width: 70px; height: 70px; border-width: 3px; }
  .included { padding: 22px 20px; }
  .mousse__fan { height: 260px; }
  .mousse__fan img { border-width: 6px; }
  .rules li { grid-template-columns: 1fr; }
  .calc { padding: 22px 18px 22px; border-radius: 26px; }
  .treats { gap: 10px; }
  .treat { padding: 8px 8px 16px; border-radius: 22px; }
  .treat__name { font-size: 15px; margin: 12px 0 10px; }
  .menu-cta { padding: 18px; }
  .menu-cta .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .snow { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; translate: none; }
}