:root {
  color-scheme: light;
  --bg: #F3ECE2;
  --paper: #FBF7F1;
  --ink: #2F2523;
  --ink-2: #4B3F3A;
  --mute: #7A6B62;
  --bordo: #7A2E3B;
  --powder: #E6C9C1;
  --powder-bg: #EFDDD6;
  --line: #DACDBF;
  --gut: clamp(16px, 5.5vw, 80px);
  --sec: clamp(72px, 9.7vw, 140px);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Golos Text", "Helvetica Neue", Arial, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--bordo); }
a.btn:hover { color: var(--bg); background: #672632; }
a:focus-visible { outline: 2px solid var(--bordo); outline-offset: 3px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
h1, h2, h3, p { margin: 0; }
.d { font-family: "Prata", "Times New Roman", Georgia, serif; font-weight: 400; }
.page { max-width: 1440px; margin-inline: auto; background: var(--bg); overflow-x: clip; }
.pad { padding-inline: var(--gut); }
.sec { padding-top: var(--sec); }
.h2 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.05; text-wrap: balance; }
.lead { font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 460px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.eyebrow { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.todo { color: var(--mute); }

/* 02 навигация */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 26px 18px; }
.nav img { height: 42px; width: auto; }
.nav-links { display: flex; gap: clamp(20px, 2.4vw, 34px); font-size: 14px; font-weight: 500; }
.nav-links a { white-space: nowrap; }
.nav-right { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.nav-right .mail { color: var(--mute); }
.btn-line { border: 1px solid var(--ink); padding: 12px 22px; font-weight: 500; white-space: nowrap; }
.btn { display: inline-block; background: var(--bordo); color: var(--bg); padding: 19px 32px; font-size: 15px; font-weight: 500; }

/* 03 первый экран */
.hero { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; padding-top: 40px; align-items: start; }
.hero-text { display: flex; flex-direction: column; gap: 30px; padding-top: 48px; }
.hero-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bordo); font-weight: 600; }
.hero h1 { font-size: clamp(42px, 6.4vw, 92px); line-height: 1; letter-spacing: -0.015em; text-wrap: balance; }
.hero-sub { max-width: 580px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--ink-2); }
.hero-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
a.link-u, .link-u { padding: 19px 20px; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: #D9A6A0; }
.hero-media { position: relative; padding-bottom: 0; }
.hero-media img { position: relative; width: 100%; aspect-ratio: 5 / 7; object-fit: cover; object-position: center 45%; }


.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

/* 06 кому */
.stack { display: flex; flex-direction: column; gap: 44px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.who-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.who { display: flex; flex-direction: column; gap: 0; color: inherit; }
.who:hover { color: inherit; }
.who:nth-child(2) { margin-top: 56px; }
.who-media { overflow: hidden; background: var(--powder); }
.who img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.who-text { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 26px; background: var(--paper); border: 1px solid var(--line); border-top: 0; }
.who h3 { font-size: 26px; line-height: 1.1; }
.who p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* 07 наборы */
.sets { display: flex; flex-direction: column; gap: 64px; }
.colors { border: 0; padding: 0; margin: 4px 0 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.colors legend { padding: 0; margin-bottom: 14px; font-size: 14px; color: var(--mute); }
.colors legend b { font-weight: 500; color: var(--ink); }
.sw-list { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.sw { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--mute); }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw i { width: 40px; height: 40px; border-radius: 50%; background: var(--c); border: 1px solid rgba(47,37,35,0.14); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px transparent; transition: box-shadow 0.15s; }
.sw:hover i { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line); }
.sw input:checked + i { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--ink); }
.sw input:focus-visible + i { outline: 2px solid var(--bordo); outline-offset: 7px; }
.sw input:checked ~ span { color: var(--ink); font-weight: 500; }
.set-ph { width: 100%; aspect-ratio: 20 / 21; background: var(--c, var(--powder)); display: flex; align-items: flex-end; padding: clamp(16px, 2vw, 28px); }
.set-ph span { background: var(--paper); color: var(--ink-2); font-size: 14px; line-height: 1.45; padding: 12px 16px; max-width: 320px; }
.set-ph b { font-weight: 500; color: var(--ink); }
.thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.th { display: block; padding: 0; border: 0; aspect-ratio: 1 / 1; background: var(--c, var(--powder)); cursor: pointer; opacity: 0.78; transition: opacity 0.15s; }
.th:hover, .th[aria-pressed="true"] { opacity: 1; }
.th[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.th:focus-visible { outline: 2px solid var(--bordo); outline-offset: 2px; }
.set-img .th img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 22%; }
.variants .sw i { width: 60px; height: 60px; }
.variants .sw-list { gap: 14px 14px; align-items: flex-start; }
.variants .sw { width: 72px; text-align: center; line-height: 1.25; }
.th-video { display: grid; place-items: center; background: var(--ink); }
.th-video::before { content: ""; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--paper); margin-left: 3px; }
.set-video { width: 100%; aspect-ratio: 20 / 21; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; text-align: center; font-size: 15px; line-height: 1.45; }
.set-video i { width: 84px; height: 84px; border-radius: 50%; border: 1px solid rgba(251,247,241,0.55); display: grid; place-items: center; }
.set-video i::before { content: ""; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--paper); margin-left: 5px; }
.set-video span { max-width: 260px; color: rgba(251,247,241,0.8); }
@media (prefers-reduced-motion: reduce) { .sw i { transition: none; } }
.set { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.set-img { grid-column: span 6; }
.set-img img { width: 100%; aspect-ratio: 20 / 21; object-fit: cover; }
.set-text { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 18px; }
.set.flip .set-text { grid-column: 1 / span 5; grid-row: 1; }
.set.flip .set-img { grid-column: 7 / span 6; }
.set h3 { font-size: clamp(28px, 2.9vw, 42px); line-height: 1.08; text-wrap: balance; }
.set p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.price { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line); margin-top: 6px; }
.price .d { font-size: 36px; }
.minis { padding-top: 32px; border-top: 1px solid var(--line); }
.minis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mini { display: flex; gap: 20px; align-items: stretch; }
.mini img { width: 150px; height: 190px; object-fit: cover; flex: none; }
.mini div { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.mini .eyebrow { font-size: 12px; }
.mini .d { font-size: 23px; line-height: 1.15; }
.mini .p { font-size: 15px; color: var(--ink-2); }
.mini .n { font-size: 13px; color: var(--mute); }

/* набор 6: игрушки */
.set6 { display: flex; flex-direction: column; gap: 32px; }
.set6-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: end; }
.set6-text { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.set6-text h3 { font-size: clamp(28px, 2.9vw, 42px); line-height: 1.08; text-wrap: balance; }
.set6-text p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.set6-head .price { justify-self: end; margin: 0; padding-top: 0; border-top: 0; }
.price-n { font-size: 14px; color: var(--mute); }
.bundles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.bundle { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--paper); border: 1px solid var(--line); }
.bundle img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.bundle-body { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 28px); }
.bundle-name { font-size: 26px; line-height: 1.1; }
.bundle-p { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.colors-inline { margin: 2px 0; gap: 8px; }
.colors-inline + .colors-inline { margin-top: 6px; }
.colors-inline legend { margin-bottom: 8px; }
.colors-inline .sw i { width: 30px; height: 30px; }
.colors-inline .sw-list { gap: 10px 16px; }
.toy-price { font-size: 18px; font-weight: 500; margin-top: 2px; }
.bundle-body .order { margin-top: auto; padding-top: 8px; }
.toys-head { padding-top: 8px; border-top: 1px solid var(--line); margin-top: 8px; }
.toys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.toy { display: flex; flex-direction: column; gap: 12px; }
.toy-ph { aspect-ratio: 4 / 5; background: var(--c, var(--powder)); display: flex; align-items: flex-end; padding: 12px; }
.toy-ph span { background: var(--paper); color: var(--mute); font-size: 12px; padding: 6px 10px; }
.toy img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.toy-body { display: flex; flex-direction: column; gap: 4px; }
.toy-name { font-size: 17px; font-weight: 500; }
.toy-meta { font-size: 13px; color: var(--mute); }
.toy-body .order { margin-top: 8px; }
.toys .qty-in { width: 46px; }
.toys .qty-b { width: 32px; }

/* 08 упаковка, 10 кто шьёт, 12 форма: две колонки */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.split > .l6 { grid-column: span 6; }
.split > .r5 { grid-column: 8 / span 5; }
.split > .l5 { grid-column: span 5; }
.split > .r6 { grid-column: 7 / span 6; }
.col { display: flex; flex-direction: column; gap: 28px; }
.col > p { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.pack-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
#blk-08 .split { align-items: center; }
.rows { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.row { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.row span:last-child { white-space: nowrap; }
.row.kv { display: grid; grid-template-columns: minmax(90px, 180px) minmax(0, 1fr); font-size: 15px; }
.row.kv span:first-child { color: var(--mute); }
.row.kv span:last-child { white-space: normal; }

/* 09 шаги */
.step { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--ink); padding-top: 20px; }
.step .d { font-size: 44px; line-height: 1; color: var(--bordo); }
.step strong { font-size: 18px; font-weight: 600; }
.step span:last-child { font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* 10 */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: end; }
.duo img { width: 100%; object-fit: cover; }
.duo img:first-child { aspect-ratio: 302 / 560; object-position: center 30%; }
.duo img:last-child { aspect-ratio: 302 / 440; }

/* фестивали: пять вертикальных фото, одно крупное и четыре в квадрате 2 на 2.
   Высоту рядов задают мелкие плитки через aspect-ratio, крупная просто занимает
   две колонки и два ряда — и получает ту же пропорцию 4/5. */
.mk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mk { position: relative; margin: 0; overflow: hidden; background: var(--powder-bg); aspect-ratio: 4 / 5; }
.mk-big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.mk img { width: 100%; height: 100%; object-fit: cover; }
/* сетка и строка под ней — один блок: строка работает подписью к галерее и стоит
   вплотную к фотографиям, а не через общий отступ .stack. Кегль обычный, иначе
   ссылка на канал потеряется. */
.mk-block { display: flex; flex-direction: column; gap: 16px; }
.mk-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
/* ссылка стоит внутри предложения: без отбивок и с подчёркиванием ближе к строке */
.mk-foot .link-u { padding: 0; text-underline-offset: 3px; }

/* 11 вопросы */
/* три ступени вместо двух: вопрос заметно крупнее ответа, номер уменьшен —
   в прежнем размере он перекрикивал вопрос, и взгляд шёл по цифрам, а не по вопросам */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; width: 100%; max-width: 680px; margin-inline: auto; counter-reset: faq; }
#blk-11 .h2 { text-align: center; }
.q { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 10px; padding: 0; border: 0; counter-increment: faq; }
.q::before { content: counter(faq, decimal-leading-zero); grid-row: 1 / span 2; font-family: "Prata", "Times New Roman", Georgia, serif; font-size: 28px; line-height: 1; color: var(--bordo); padding-top: 4px; }
.q strong { font-size: 21px; font-weight: 600; line-height: 1.25; }
.q span { font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* 12 форма */
.contacts { display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: var(--ink-2); }
.contact { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; }
.contact i { width: 36px; height: 36px; border: 1px solid var(--ink); display: grid; place-items: center; flex: none; color: var(--ink); }
.contact svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact:hover { color: var(--bordo); }
.contact:hover i { border-color: var(--bordo); color: var(--bordo); }
.form { display: flex; flex-direction: column; gap: 14px; background: var(--paper); padding: clamp(20px, 2.5vw, 36px); border: 1px solid var(--line); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.field { border-bottom: 1px solid var(--ink); padding: 14px 0; font-size: 15px; color: var(--mute); }
.field.area { padding-bottom: 44px; }
.form-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 12px; }
.form-foot small { font-size: 12px; color: var(--mute); line-height: 1.4; }

/* заявка */
.order { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.qty { display: inline-flex; align-items: stretch; height: 52px; border: 1px solid var(--ink); }
.qty-b { width: 44px; border: 0; background: transparent; color: var(--ink); font: 400 20px/1 "Golos Text", Arial, sans-serif; cursor: pointer; }
.qty-b:hover { background: var(--powder-bg); }
.qty-in { width: 64px; border: 0; border-inline: 1px solid var(--line); background: var(--paper); text-align: center; font: 500 16px/1 "Golos Text", Arial, sans-serif; color: var(--ink); -moz-appearance: textfield; appearance: textfield; }
.qty-in::-webkit-outer-spin-button, .qty-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-in:focus-visible, .qty-b:focus-visible, .add:focus-visible, .req-x:focus-visible { outline: 2px solid var(--bordo); outline-offset: 2px; }
input.field:focus-visible, textarea.field:focus-visible { outline: none; border-bottom: 2px solid var(--bordo); padding-bottom: 13px; }
.order .btn { border: 0; cursor: pointer; padding: 0 28px; font-family: inherit; display: inline-flex; align-items: center; min-height: 52px; }
.order .btn:hover { background: #672632; }
.order .btn.done { background: var(--ink); }
.order-sm { margin-top: 6px; }
.order-sm .qty { height: 42px; }
.order-sm .btn { min-height: 42px; padding: 0 20px; font-size: 14px; }
.order-sm .qty-b { width: 36px; font-size: 18px; }
.order-sm .qty-in { width: 52px; font-size: 15px; }
.order-sm .btn-line { border: 1px solid var(--ink); background: transparent; color: var(--ink); padding: 0 16px; display: inline-flex; align-items: center; font: 500 14px/1 "Golos Text", Arial, sans-serif; cursor: pointer; }
.order-sm .btn-line:hover, .order-sm .btn-line.done { background: var(--ink); color: var(--bg); }
.req { display: flex; flex-direction: column; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.req-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.req-total { font-size: 14px; color: var(--mute); }
.req-list { display: flex; flex-direction: column; }
.req-list:empty { display: none; }
.req-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.req-row:first-child { border-top: 0; }
.req-name { display: flex; flex-direction: column; gap: 3px; font-size: 15px; min-width: 0; }
.req-name b { font-weight: 500; }
.req-name span { font-size: 13px; color: var(--mute); }
.req-row .qty { height: 40px; }
.req-row .qty-b { width: 36px; font-size: 18px; }
.req-row .qty-in { width: 52px; font-size: 15px; }
.req-x { width: 36px; height: 36px; border: 0; background: transparent; color: var(--mute); font: 400 22px/1 "Golos Text", Arial, sans-serif; cursor: pointer; }
.req-x:hover { color: var(--bordo); }
.req-empty { font-size: 14px; line-height: 1.5; color: var(--mute); }
.req-empty[hidden] { display: none; }
input.field, textarea.field { width: 100%; font: 400 15px/1.4 "Golos Text", Arial, sans-serif; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 14px 0; outline: none; }
textarea.field { resize: vertical; min-height: 88px; }
.fields .wide { grid-column: 1 / -1; }
.field.err { border-bottom-color: var(--bordo); }
.field.err::placeholder { color: var(--bordo); }
.form-err { font-size: 14px; line-height: 1.45; color: var(--bordo); }
.form-err[hidden] { display: none; }
/* панель формы светлая, поэтому цвет чернильный, а не бумажный: бордо занят ошибкой */
.form-ok { font-size: 14px; line-height: 1.45; color: var(--ink); font-weight: 500; }
.form-ok[hidden] { display: none; }
/* ловушка для ботов: поле уводим за экран, а не прячем display:none —
   так его заполняют автоматы, но не видят и не таб-обходят люди */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }
textarea.field.area { padding-bottom: 14px; }
input.field::placeholder, textarea.field::placeholder { color: var(--mute); opacity: 1; }
.tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--ink); color: var(--paper); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -8px 24px rgba(47,37,35,0.18); }
.tray-in { max-width: 1440px; margin-inline: auto; padding: 12px var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 15px; }
.tray .btn { padding: 13px 22px; background: var(--paper); color: var(--ink); font-size: 14px; }
.tray .btn:hover { background: var(--powder); color: var(--ink); }
body.has-tray .page { padding-bottom: 88px; }
.tray.tray-off { transform: translateY(110%); }
.tray { transition: transform 0.2s; }
@media (prefers-reduced-motion: reduce) { .tray { transition: none; } }

/* ритм: цветные полосы во всю ширину */
.band { padding-block: clamp(56px, 7.5vw, 112px); }
.band-powder { background: var(--powder-bg); }
/* фирменный мотив: чешуйчатый край театральной крыши на входе в полосу «Кому дарят».
   Полукруги висят от верхней кромки полосы, просветы показывают саму полосу. */
#blk-06 { position: relative; }
#blk-06::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: radial-gradient(circle at 50% 0, var(--powder) 0 21px, transparent 22px) 0 0 / 44px 22px repeat-x; }
.band-ink { background: var(--ink); color: var(--paper); }
.sec + .band, .band + .sec { margin-top: 0; }
.band-powder + .band-powder { padding-top: 0; }
#blk-07, #blk-markets { padding-bottom: var(--sec); }
.band-powder .rows { border-top-color: rgba(47,37,35,0.35); }
.band-powder .row { border-bottom-color: rgba(47,37,35,0.14); }
.hero { padding-bottom: clamp(48px, 6vw, 88px); }
.band-powder .step { background: var(--paper); border-top: 0; padding: 24px 22px 26px; }
.band-powder .who-media { background: var(--powder); }
.band-ink .h2 { color: var(--paper); }
.band-ink .col > p { color: rgba(251,247,241,0.78); }
.band-ink .contacts { color: rgba(251,247,241,0.85); }
.band-ink .contact i { border-color: rgba(251,247,241,0.45); color: var(--paper); }
.band-ink .contact:hover { color: var(--powder); }
.band-ink .contact:hover i { border-color: var(--powder); color: var(--powder); }
.band-ink .form { color: var(--ink); border: 0; }
.tg-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px 16px; align-items: start; margin-top: 12px; padding: 22px; background: rgba(251,247,241,0.07); border: 1px solid rgba(251,247,241,0.22); color: var(--paper); transition: background 0.15s, border-color 0.15s; }
.tg-card:hover { color: var(--paper); background: rgba(251,247,241,0.12); border-color: rgba(251,247,241,0.4); }
.tg-card i { width: 44px; height: 44px; display: grid; place-items: center; background: var(--powder); color: var(--ink); }
.tg-card svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tg-text { display: flex; flex-direction: column; gap: 6px; }
.tg-text b { font-size: 18px; font-weight: 600; }
.tg-text span { font-size: 15px; line-height: 1.5; color: rgba(251,247,241,0.78); }
.tg-btn { grid-column: 2; justify-self: start; padding: 12px 20px; background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 500; }
.tg-card:hover .tg-btn { background: var(--powder); }
@media (prefers-reduced-motion: reduce) { .tg-card { transition: none; } }
.sets { gap: 56px; }
.sets > .set + .set, .sets > .set + .set6, .sets > .set6 + .set { border-top: 1px solid var(--line); padding-top: 56px; }

/* 13 подвал */
.foot { margin-top: 0; background: var(--powder-bg); color: var(--ink); }
.foot-in { padding-block: clamp(48px, 6vw, 80px) 28px; display: flex; flex-direction: column; gap: 44px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: 32px 24px; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.foot-brand img { height: 46px; width: auto; }
.foot-brand p { max-width: 380px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.foot-col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.foot-col .eyebrow { margin-bottom: 6px; }
.foot-col a { align-self: flex-start; }
/* соцсети в подвале иконками: подписи «Telegram» и «Instagram» ничего не добавляют к узнаваемым значкам */
.foot-soc { display: flex; gap: 10px; margin-top: 4px; }
.foot-soc a { width: 40px; height: 40px; border: 1px solid rgba(47,37,35,0.28); display: grid; place-items: center; color: var(--ink); }
.foot-soc svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.foot-soc a:hover { border-color: var(--bordo); color: var(--bordo); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px; padding-top: 22px; border-top: 1px solid rgba(47,37,35,0.18); font-size: 13px; color: var(--mute); }
.foot-up { color: var(--ink); }


@media (max-width: 1080px) {
  .nav-links { display: none; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .minis { grid-template-columns: minmax(0, 1fr); }
  .toys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bundles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .set6-head { grid-template-columns: minmax(0, 1fr); }
  .set6-head .price { justify-self: start; }
  .bundle { grid-template-columns: minmax(0, 1fr); }
  /* height: 100% из общего правила тут обязательно снимать. В одноколоночной
     раскладке Safari разрешает эти сто процентов в высоту всей карточки, картинка
     вылезает из своего ряда и текст оказывается поверх фотографии. */
  .bundle img { min-height: 0; height: auto; align-self: start; aspect-ratio: 16 / 10; }
  .nav-right .mail { display: none; }
  .nav img { height: 34px; }
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 12px; }
  .hero-text { padding-top: 20px; gap: 22px; }
  .grid-3, .faq, .who-grid { grid-template-columns: minmax(0, 1fr); }
  .who:nth-child(2) { margin-top: 0; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  /* фестивали: листаются пальцем вбок, как карточки «Кому дарят» */
  .mk-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); padding-bottom: 4px; scrollbar-width: none; }
  .mk-grid::-webkit-scrollbar { display: none; }
  .mk { scroll-snap-align: start; }
  .mk-big { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }
  .set, .split { grid-template-columns: minmax(0, 1fr); }
  .set-img, .set-text, .set.flip .set-img, .set.flip .set-text,
  .split > .l6, .split > .r5, .split > .l5, .split > .r6 { grid-column: auto; grid-row: auto; }
  .set.flip .set-img { order: -1; }
  .sets { gap: 48px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .steps, .fields { grid-template-columns: minmax(0, 1fr); }
  .toys { grid-template-columns: minmax(0, 1fr); }
  .btn { padding: 17px 24px; }
  .order .btn { padding: 0 20px; }
  .req-row { grid-template-columns: minmax(0, 1fr) auto; }
  .req-row .req-x { grid-column: 2; grid-row: 1; }
  .req-row .qty { grid-column: 1; justify-self: start; }
  .mini img { width: 110px; height: 150px; }
}

/* гамбургер и мобильное меню */
.burger { display: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--ink); }
.burger:focus-visible, .mnav-close:focus-visible { outline: 2px solid var(--bordo); outline-offset: 2px; }
.mnav { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); overflow-y: auto; }
.mnav-top { display: flex; justify-content: space-between; align-items: center; height: 60px; }
.mnav-top img { height: 32px; width: auto; }
.mnav-close { position: relative; width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; cursor: pointer; }
.mnav-close span { position: absolute; left: 11px; top: 21px; width: 22px; height: 1.5px; background: var(--ink); }
.mnav-close span:first-child { transform: rotate(45deg); }
.mnav-close span:last-child { transform: rotate(-45deg); }
.mnav-links { display: flex; flex-direction: column; padding-block: 28px 20px; }
.mnav-links a { font-family: "Prata", "Times New Roman", Georgia, serif; font-size: 28px; line-height: 1.2; padding-block: 12px; }
.mnav-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; font-size: 15px; color: var(--ink-2); }
.mnav-foot .btn { align-self: stretch; text-align: center; padding: 15px 24px; margin-bottom: 8px; }
/* под кнопкой только иконки: на телефоне подписи «Telegram» и адрес почты занимают строку, а смысла не добавляют */
.mnav-soc { display: flex; gap: 12px; }
.mnav-soc a { width: 46px; height: 46px; border: 1px solid var(--ink); display: grid; place-items: center; color: var(--ink); }
.mnav-soc svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mnav-soc a:active { border-color: var(--bordo); color: var(--bordo); }
body.menu-open { overflow: hidden; }
.dots { display: none; }

/* ===== мобильная версия ===== */
@media (max-width: 1080px) {
  .burger { display: flex; }
}
@media (max-width: 820px) {
  /* шапка: прячется при прокрутке вниз, появляется при прокрутке вверх */
  #blk-02 { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); transition: transform 0.25s ease; }
  #blk-02.nav-hidden { transform: translateY(-110%); }
  .nav { padding-block: 10px; }
  .nav img { height: 32px; }
  .nav-right { display: none; }
  html { scroll-padding-top: 16px; }

  /* размеры: умеренно меньше */
  :root { --sec: 48px; }
  .band { padding-block: 48px; }
  .stack { gap: 28px; }
  .h2 { font-size: 26px; line-height: 1.12; }
  .hero { padding-top: 8px; padding-bottom: 40px; }
  .hero-text { padding-top: 12px; gap: 16px; }
  .hero-eyebrow { font-size: 11px; }
  .hero h1 { font-size: 34px; line-height: 1.06; }
  .hero-sub { font-size: 15px; }
  .btn { padding: 13px 22px; font-size: 15px; }
  .order .btn, .qty { min-height: 46px; height: 46px; }
  .set h3, .set6-text h3 { font-size: 22px; line-height: 1.15; }
  .set p, .set6-text p { font-size: 15px; line-height: 1.55; }
  .set-text { gap: 14px; }
  .price { padding-top: 14px; }
  .price .d { font-size: 26px; }
  .bundle-name { font-size: 20px; }
  .q::before { font-size: 24px; }
  .q strong { font-size: 18px; }
  .faq { gap: 28px; }
  .col > p { font-size: 15px; }
  .pack-img { aspect-ratio: 16 / 10; }

  /* каталог: фото ниже, листаются свайпом, точки вместо миниатюр */
  .set-img { position: relative; touch-action: pan-y; }
  .set-img img.set-photo, .set-ph, .set-video { aspect-ratio: 4 / 3; }
  .set-img .thumbs { display: none; }
  .dots { display: flex; justify-content: center; gap: 8px; padding-top: 12px; }
  .dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(47,37,35,0.22); cursor: pointer; }
  .dots button[aria-current="true"] { background: var(--ink); }
  .dots button::after { content: ""; display: block; margin: -10px; width: 28px; height: 28px; }

  /* поля ввода 16px, чтобы iPhone не увеличивал страницу при фокусе */
  input.field, textarea.field, .qty-in { font-size: 16px !important; }

  .hero-media img { aspect-ratio: 4 / 5; }
  .hero-cta { gap: 8px 20px; }
  .hero-cta .link-u { padding: 12px 0; }

  /* блок «Получить расчёт»: сначала форма, потом Telegram и контакты */
  #blk-12 .split { gap: 24px; }
  #blk-12 .l5 { display: contents; }
  #blk-12 .l5 > h2 { order: 1; }
  #blk-12 .l5 > p { order: 2; margin-top: -8px; }
  #blk-12 #request { order: 3; }
  #blk-12 .tg-card { order: 4; margin-top: 0; }
  #blk-12 .contacts { order: 5; }

  /* наборы: плотнее между карточками */
  .sets { gap: 56px; }
  .sets > .set + .set, .sets > .set + .set6, .sets > .set6 + .set { padding-top: 40px; border-top-color: rgba(47,37,35,0.28); }
  /* цена прилегает к своей карточке: без линии сверху, ближе к кнопке */
  .set-text .price { border-top: 0; padding-top: 0; margin-top: 2px; }
  .set-text .price + .order { margin-top: -6px; }

  /* шаги заказа: компактные карточки, номер слева */
  .band-powder .step { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; padding: 18px 18px 20px; }
  .band-powder .step .d { grid-row: 1 / span 2; font-size: 30px; }
  .band-powder .step strong { font-size: 17px; }
  .grid-4.steps { gap: 12px; }
}

@media (max-width: 640px) {
  /* «Кому дарят»: карточки листаются пальцем вбок */
  .who-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); padding-bottom: 4px; scrollbar-width: none; }
  .who-grid::-webkit-scrollbar { display: none; }
  .who { scroll-snap-align: start; }
  .who img { aspect-ratio: 4 / 3; }
  .who-text { padding: 16px 16px 18px; }
  .who h3 { font-size: 22px; }
  .who p { font-size: 14px; }

  /* игрушки по одной: две колонки */
  .toys { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .toy { gap: 10px; }
  .toy-ph, .toy img { aspect-ratio: 1 / 1; }
  .toy-ph { padding: 8px; }
  .toy-ph span { font-size: 11px; padding: 4px 8px; }
  .toy-name { font-size: 15px; }
  .toy-price { font-size: 16px; }
  .toy-body .order { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .toys .qty { width: 100%; }
  .toys .qty-b { width: 36px; flex: none; }
  .toys .qty-in { flex: 1; width: auto; min-width: 0; }
  .toys .add { justify-content: center; width: 100%; min-height: 40px; }

  /* комплекты */
  .bundle-body { padding: 16px; }
  .bundle-name { font-size: 22px; }

  /* нижняя плашка заявки: на узком экране счёт и кнопка держатся в одной строке,
     иначе кнопка уезжает под текст и плашка съедает треть экрана. Длинный счёт
     («12 позиций, 30 шт.») переносится внутри себя — для этого min-width: 0. */
  .tray-in { padding-block: 10px; font-size: 14px; flex-wrap: nowrap; gap: 12px; }
  #tray-text { min-width: 0; line-height: 1.3; }
  .tray .btn { padding: 11px 14px; font-size: 13px; flex: none; }
  body.has-tray .page { padding-bottom: 72px; }
}