/* =========================================================
   MetalChef · страницы. «Nu» = N px макета (1440 / 375).
   ========================================================= */

.dark { background: var(--dark); color: var(--milk); }
body:not([data-page="home"]) .hdr { background: var(--dark); border-bottom-color: #1E2021; }

/* ---------- Шапка секции ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(40 * var(--u)); padding-bottom: calc(40 * var(--u)); border-bottom: 1px solid var(--ink); }
.sec-head--dark { border-bottom-color: var(--line-d); }
.sec-head__l { display: grid; gap: calc(18 * var(--u)); }
.sec-head__lead { width: calc(326 * var(--u)); flex-shrink: 0; font-size: var(--t-body); line-height: 1.47; color: #2B2D2F; }
.sec-head--dark .sec-head__lead { color: var(--mute-d); }
@media (max-width: 1023px) {
  .sec-head { flex-direction: column; align-items: flex-start; gap: calc(20 * var(--u)); padding-bottom: calc(28 * var(--u)); }
  .sec-head__lead { width: auto; max-width: 520px; }
}

/* =========================================================
   ГЛАВНАЯ
   ========================================================= */

/* ---------- Первый экран ---------- */
.hero { position: relative; height: max(calc(640 * var(--u)), min(100svh, calc(1000 * var(--u)))); overflow: clip; padding: 0 var(--m); display: flex; flex-direction: column; isolation: isolate; }
.hero__media { position: absolute; left: calc(-40 * var(--u)); top: calc(130 * var(--u)); width: calc(1560 * var(--u)); height: calc(878 * var(--u)); z-index: -2; will-change: transform; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; }
.steam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(13 13 13) calc(120 * var(--u)), rgb(13 13 13 / 0) calc(340 * var(--u))),
    linear-gradient(0deg, rgb(13 13 13 / .95) 0, rgb(13 13 13 / 0) calc(260 * var(--u))),
    linear-gradient(90deg, rgb(13 13 13 / .85) 0%, rgb(13 13 13 / .35) 45%, rgb(13 13 13 / 0) 70%); }
.hero__title { position: relative; padding-top: calc(var(--hdr) + calc(40 * var(--u))); }
.hero__line { display: block; }
.hero__data { margin-top: auto; padding-bottom: calc(36 * var(--u)); display: grid; grid-template-columns: repeat(4, var(--col)); align-items: end; }
.hero__cell { display: grid; gap: calc(6 * var(--u)); }
.hero__cell + .hero__cell, .hero__cta { padding-left: calc(14 * var(--u)); }
.hero__cell dt { color: var(--mute-d2); font-size: var(--t-mono); letter-spacing: .08em; }
.hero__cell dd { color: var(--milk); }
.hero__cta { display: grid; gap: calc(14 * var(--u)); justify-items: start; }
.hero__cta .mono { color: var(--mute-d2); letter-spacing: .08em; }
.hero__cta .btn { width: calc(326 * var(--u)); }
@media (max-width: 1023px) {
  .hero { height: max(calc(600 * var(--u)), 100svh); }
  .hero__media { left: 0; top: 18%; width: 100%; height: 82%; }
  .hero__media img { object-position: 64% 50%; }
  .hero__shade { background:
    linear-gradient(180deg, rgb(13 13 13) 18%, rgb(13 13 13 / 0) 34%),
    linear-gradient(0deg, rgb(13 13 13 / .96) 0, rgb(13 13 13 / .6) 30%, rgb(13 13 13 / 0) 50%); }
  .hero__title { padding-top: calc(var(--hdr) + calc(24 * var(--u))); }
  .hero__data { grid-template-columns: 1fr 1fr; gap: calc(18 * var(--u)) calc(12 * var(--u)); align-items: start; padding-bottom: calc(calc(20 * var(--u)) + env(safe-area-inset-bottom)); }
  .hero__cell + .hero__cell, .hero__cta { padding-left: 0; }
  .hero__cell:nth-child(3) { display: none; }
  .hero__cta { grid-column: 1 / -1; gap: calc(10 * var(--u)); }
  .hero__cta .btn { width: 100%; }
}

/* ---------- Комплекты ---------- */
.sets-sec { background: var(--sets); color: var(--ink); padding: var(--sec) var(--m); }
/* линии над и под полкой — от края до края окна, текст шапки на полях */
.sets-sec .sec-head { border-bottom: 0; }
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 calc(-1 * var(--m)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.shelf--two { grid-template-columns: repeat(2, 1fr); }
.set { display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(32 * var(--u)); border-right: 1px solid var(--ink); }
.set:first-child { padding-left: var(--m); }
.set:last-child { padding-right: var(--m); border-right: 0; }
.set__top { display: flex; justify-content: space-between; align-items: baseline; gap: calc(12 * var(--u)); }
.set__top .mono { color: var(--mute-l); }
.set--out .set__top { flex-direction: column; align-items: flex-start; gap: calc(6 * var(--u)); }  /* длинная плашка «Нет в наличии, ожидается …» — отдельной строкой */
.set__top .mono { white-space: nowrap; }
.set--out .set__top .status { white-space: normal; }
.set__img { display: block; }
.set__frame { display: block; height: calc(290 * var(--u)); background: #111; overflow: clip; transition: transform .7s var(--e-hover); }
.set__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--e-hover); }
.set__name { display: flex; justify-content: space-between; align-items: baseline; gap: calc(8 * var(--u)); }
.set__title { font: 600 calc(16 * var(--u))/1.25 var(--f); letter-spacing: .06em; text-transform: uppercase; }
.set__title a::after { content: ""; position: absolute; inset: 0; }
.set { position: relative; }
.set__price { font-size: calc(16 * var(--u)); letter-spacing: .02em; }
.set .btn { margin-top: auto; position: relative; z-index: 1; }
.set__top, .spec-rows { position: relative; z-index: 1; pointer-events: none; }
.spec-rows { display: flex; flex-direction: column; flex-grow: 1; }
.spec-row { display: flex; justify-content: space-between; gap: calc(12 * var(--u)); padding: calc(9 * var(--u)) 0; border-top: 1px solid var(--line-l); }
.spec-row--total { border-bottom: 1px solid var(--line-l); }
.spec-row dt { color: var(--ink); font-size: var(--t-mono); white-space: nowrap; flex-shrink: 0; }
.spec-row dd { text-align: right; }
@media (hover: hover) {
  .set:hover .set__frame { transform: scale(.965); }
  .set:hover .set__frame img { transform: scale(1.08); }
}
.set:focus-within .set__frame { transform: scale(.965); }
.shelf__count { display: none; }
@media (max-width: 1023px) {
  /* карточки прозрачные на фоне секции, между ними — линии (как на десктопе) */
  .shelf, .shelf--two { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(84%, 380px); gap: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--m)); padding: 0; scroll-padding: 0;
    scrollbar-width: none; overscroll-behavior-x: none; }
  .shelf::-webkit-scrollbar { display: none; }
  .set, .set:first-child, .set:last-child { scroll-snap-align: start; border: 0; border-right: 1px solid var(--ink); padding: calc(16 * var(--u)) var(--m) calc(20 * var(--u)); gap: calc(18 * var(--u)); background: none; }
  .set:last-child { border-right: 0; }
  .set__frame { height: auto; aspect-ratio: 1280 / 820; }
  .shelf__count { display: block; margin-top: calc(16 * var(--u)); color: var(--mute-l); }
}

/* ---------- Главный приём: прорези пресса ---------- */
.slots { position: relative; --gap: .12; --sh: .075; --swl: .56; --sws: .3; }
.slots__stage { position: relative; height: 100svh; min-height: calc(560 * var(--u)); overflow: clip; background: var(--dark); }
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) and (hover: hover) { .js .slots { height: 300svh; } .js .slots__stage { position: sticky; top: 0; } }
/* телефон: без закрепления (на iOS панель браузера дёргает высоту), прорези раскрываются сами при появлении */
@media (max-width: 1023px), (hover: none) { .slots__stage { height: 88svh; min-height: calc(520 * var(--u)); } }
.is-reduced .slots { height: auto !important; }
.is-reduced .slots__stage { position: relative !important; }
.slots__img { position: absolute; inset: 0; }
.slots__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform: scale(var(--zoom, 1)); will-change: transform; }
.slots__plate { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.slots__fill { fill: url(#mc-plate) var(--dark); }
.slots__plate:not([viewBox]) .slots__fill { display: none; }
.slots__edge { display: none; }
.slots__intro { position: absolute; inset: 0; pointer-events: none; opacity: var(--intro, 0); }
.slots__label { position: absolute; left: var(--m); top: calc(var(--hdr) + calc(32 * var(--u))); color: var(--mute-d2); }
.slots__big { position: absolute; left: var(--m); right: var(--m); text-align: center; font: 900 calc(72 * var(--u))/.95 var(--f); letter-spacing: -.02em; text-transform: uppercase; color: var(--milk); }
.slots__big--t { bottom: calc(50% + var(--gap) * 100% + var(--sh) * 50% + calc(32 * var(--u))); transform: translateY(calc(var(--lift, 0) * calc(-60 * var(--u)))); }
.slots__big--b { top: calc(50% + var(--gap) * 100% + var(--sh) * 50% + calc(32 * var(--u))); transform: translateY(calc(var(--lift, 0) * calc(60 * var(--u)))); }
.slots__final { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(200 * var(--u)) var(--m) calc(56 * var(--u)); display: grid; grid-template-columns: 1fr var(--col); align-items: end; gap: calc(40 * var(--u));
  background: linear-gradient(0deg, rgb(13 13 13 / .9), rgb(13 13 13 / .55) 55%, rgb(13 13 13 / 0)); }
.js .slots__final { opacity: var(--fin, 0); }
.is-reduced .slots__final { opacity: 1; }
.slots__title { font-size: calc(120 * var(--u)); }
.slots__l { display: block; clip-path: inset(-15% -5% -5% -5%); }
.slots__l > span { display: block; transform: translateY(calc((1 - var(--fin, 1)) * 105%)); }
.slots__l + .slots__l > span { transform: translateY(calc((1 - var(--fin2, var(--fin, 1))) * 105%)); }
.slots__lead { color: #D4D6D7; font-size: var(--t-body); line-height: 1.47; padding-bottom: calc(12 * var(--u)); }
@media (max-width: 1023px) {
  .slots { --gap: .1; --sh: .055; --swl: .84; --sws: .46; }
  .js .slots { height: auto; }
  .slots__big { font-size: calc(30 * var(--u)); }
  .slots__final { grid-template-columns: 1fr; gap: calc(16 * var(--u)); padding: calc(160 * var(--u)) var(--m) calc(calc(32 * var(--u)) + env(safe-area-inset-bottom)); }
  .slots__title { font-size: calc(46 * var(--u)); }
  .slots__img img { object-position: 50% 60%; }
}

/* ---------- Корочка по всей поверхности: кинолента ---------- */
.crust { padding: var(--sec) 0 var(--sec) var(--m); overflow: clip; }
.crust__head { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(40 * var(--u)); padding: 0 var(--m) calc(50 * var(--u)) 0; }
.crust__head .h2 > span { display: block; }
.crust__lead { width: calc(326 * var(--u)); flex-shrink: 0; font-size: var(--t-body); line-height: 1.47; }
.film { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16 * var(--u)); align-items: start; padding-right: var(--m); }
.film__item { min-width: 0; }
.film__item--2 { margin-top: calc(80 * var(--u)); }
.film__img { display: block; aspect-ratio: 4 / 5; background: #151515; overflow: clip; }
.film__img img { width: 100%; height: 100%; object-fit: cover; }
.film__cap { display: flex; justify-content: space-between; align-items: baseline; gap: calc(16 * var(--u)); padding-top: calc(16 * var(--u)); }
.film__cap .ui { color: var(--milk); }
.film__cap .mono { color: var(--mute-d2); }
.film__item--3 .film__cap { justify-content: flex-start; gap: calc(24 * var(--u)); }
.film__wide { margin: calc(96 * var(--u)) var(--m) 0 0; }
.film__wide .film__img { aspect-ratio: 1360 / 620; }
.film__wide .film__img img { object-position: 50% 52%; }
@media (max-width: 1023px) {
  .crust { padding: var(--sec) var(--m); }
  .crust__head { flex-direction: column; align-items: flex-start; gap: calc(16 * var(--u)); padding: 0 0 calc(24 * var(--u)); }
  .crust__lead { display: none; }
  .film { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); width: auto; }
  .film__item { width: auto; }
  .film__item--1 { grid-column: 1 / -1; }
  .film__item--2 { margin-top: 0; }
  .film__item--1 .film__img { aspect-ratio: 343 / 437; }
  .film__item--2 .film__img, .film__item--3 .film__img { aspect-ratio: 3 / 4; }
  .film__cap, .film__wide { display: none; }
}

/* ---------- Как это работает ---------- */
.how { padding: var(--sec) var(--m); display: grid; gap: calc(24 * var(--u)); }
.how__stage { position: relative; width: calc(1360 * var(--u)); height: calc(600 * var(--u)); }
.how__img { position: absolute; left: calc(180 * var(--u)); top: calc(10 * var(--u)); width: calc(1000 * var(--u)); height: calc(563 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 86%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 86%, transparent); mask-composite: intersect; }
.how__img img { width: 100%; height: 100%; object-fit: cover; }
.how__lines { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.how__ln polyline { fill: none; stroke: var(--milk); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.how__dots circle { fill: var(--milk); transform-box: fill-box; transform-origin: center; }
.js .how:not(.is-in) .how__ln polyline { stroke-dashoffset: 1; }
.js .how:not(.is-in) .how__dots circle { transform: scale(0); }
.js .how:not(.is-in) .how__item { opacity: 0; transform: translateY(calc(16 * var(--u))); }
.how__ln polyline { transition: stroke-dashoffset 1100ms var(--e-long) calc(900ms + var(--i, 0) * 140ms); }
.how__dots circle { transition: transform 600ms var(--e-press) calc(700ms + var(--i, 0) * 140ms); }
.how__item { transition: opacity 700ms var(--e-enter) calc(1100ms + var(--i, 0) * 140ms), transform 700ms var(--e-enter) calc(1100ms + var(--i, 0) * 140ms); }
.how__marks { display: none; }
.how__item { position: absolute; width: calc(262 * var(--u)); display: grid; gap: calc(6 * var(--u)); }
.how__item .mono { color: var(--mute-d2); }
.how__item h3 { font: 600 calc(19 * var(--u))/1.26 var(--f); }
.how__item p { color: var(--mute-d); font-size: var(--t-small); line-height: 1.47; }
.how__item--1 { left: 0; top: calc(132 * var(--u)); } .how__item--2 { left: 0; top: calc(270 * var(--u)); } .how__item--3 { left: 0; top: calc(398 * var(--u)); }
.how__item--4 { left: calc(1098 * var(--u)); top: calc(232 * var(--u)); } .how__item--5 { left: calc(1098 * var(--u)); top: calc(362 * var(--u)); }
@media (max-width: 1023px) {
  .how__stage { width: auto; height: auto; margin-top: calc(8 * var(--u)); }
  .how__img { position: relative; left: auto; top: auto; width: calc(100% + 2 * var(--m)); height: auto; aspect-ratio: 1000 / 563; margin: 0 calc(-1 * var(--m)); }
  .how__lines { display: none; }
  .how__marks { display: block; position: absolute; left: calc(-1 * var(--m)); top: 0; width: calc(100% + 2 * var(--m)); max-width: none; aspect-ratio: 1000 / 563; pointer-events: none; }
  .how__marks circle { fill: rgb(13 13 13 / .55); stroke: var(--milk); stroke-width: 2; }
  .how__marks text { fill: var(--milk); font: 400 26px var(--f-mono); text-anchor: middle; }
  .how__list { display: grid; gap: calc(22 * var(--u)); margin-top: calc(28 * var(--u)); }
  .how__item { position: relative; left: auto !important; top: auto !important; width: auto; grid-template-columns: calc(30 * var(--u)) 1fr; gap: calc(4 * var(--u)) calc(12 * var(--u)); }
  .how__item .mono { grid-row: span 2; padding-top: calc(4 * var(--u)); }
  .how__item h3 { font-size: calc(17 * var(--u)); }
}

/* ---------- Доставка ---------- */
.deliv { background: var(--light); padding: var(--sec) var(--m); display: grid; gap: calc(56 * var(--u)); }
.deliv__grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: calc(28 * var(--u)); }
.deliv__col { border-top: 2px solid var(--ink); padding: calc(24 * var(--u)) 0 0; display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.deliv__col .muted { color: #55585A; font-size: var(--t-body); line-height: 1.53; }
.deliv__note { font: 600 var(--t-small)/1.47 var(--f); }
@media (max-width: 1023px) {
  .deliv { gap: calc(32 * var(--u)); }
  .deliv__grid { grid-template-columns: 1fr; gap: calc(32 * var(--u)); }
  .deliv__col { padding-right: 0; gap: calc(12 * var(--u)); }
}
@media (min-width: 600px) and (max-width: 1023px) { .deliv__grid { grid-template-columns: 1fr 1fr; gap: calc(32 * var(--u)) calc(20 * var(--u)); } }

/* ---------- Вопросы ---------- */
.faq { background: var(--light); padding: 0 var(--m) var(--sec); display: grid; grid-template-columns: calc(680 * var(--u)) calc(680 * var(--u)); align-items: start; }
.faq__l { display: grid; gap: calc(20 * var(--u)); padding-right: calc(28 * var(--u)); }
.faq__l .muted { color: #55585A; }
.faq__tg { color: var(--ink); background-size: 100% 1px; }
.faq__item { border-top: 1px solid var(--line-soft); }
.faq__item:last-child { border-bottom: 1px solid var(--line-soft); }
.faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: calc(24 * var(--u)); padding: calc(28 * var(--u)) 0; cursor: pointer; font: 600 calc(21 * var(--u))/1.24 var(--f); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { position: relative; width: calc(16 * var(--u)); height: calc(16 * var(--u)); flex-shrink: 0; }
.faq__item summary i::before, .faq__item summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .5s var(--e-hover); }
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: rotate(0); }
.faq__a { overflow: hidden; }
.faq__a p { color: #55585A; font-size: var(--t-body); line-height: 1.53; max-width: calc(620 * var(--u)); padding-bottom: calc(28 * var(--u)); }
@media (hover: hover) { .faq__item summary:hover { color: #3A3C3E; } }
@media (max-width: 1023px) {
  .faq { grid-template-columns: 1fr; gap: calc(28 * var(--u)); }
  .faq__l { padding-right: 0; }
  .faq__item summary { font-size: calc(17 * var(--u)); padding: calc(20 * var(--u)) 0; }
  .faq__a p { padding-bottom: calc(20 * var(--u)); }
}

/* ---------- Телеграм ---------- */
.tg { padding: var(--sec) var(--m); display: flex; justify-content: space-between; align-items: flex-end; gap: calc(40 * var(--u)); }
.tg__text { display: grid; gap: calc(28 * var(--u)); }
.tg .h2 { width: calc(900 * var(--u)); }
.tg p { width: calc(560 * var(--u)); font-size: var(--t-lead); line-height: 1.55; }
.tg__btn { min-height: calc(60 * var(--u)); padding: 0 calc(28 * var(--u)); gap: calc(24 * var(--u)); flex-shrink: 0; }
@media (max-width: 1023px) {
  .tg { flex-direction: column; align-items: stretch; gap: calc(32 * var(--u)); }
  .tg .h2, .tg p { width: auto; }
}

/* =========================================================
   КАРТОЧКА КОМПЛЕКТА
   ========================================================= */
.pdp-main { padding-top: var(--hdr); }
.pdp { display: grid; grid-template-columns: calc(760 * var(--u)) calc(560 * var(--u)); gap: calc(40 * var(--u)); padding: calc(40 * var(--u)) var(--m) var(--sec); align-items: start; }
.gal__track { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); }
.gal__item { background: #0E0E0E; overflow: clip; grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.gal__item--0 { aspect-ratio: 1280 / 733; }
.gal__item--2, .gal__item--3 { grid-column: auto; aspect-ratio: 4 / 5; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; }
.gal__count { display: none; }
.pdp__sticky { position: sticky; top: calc(var(--hdr) + calc(32 * var(--u))); display: grid; gap: calc(20 * var(--u)); }
.crumbs { color: var(--mute-l); letter-spacing: .08em; }
.crumbs a { color: var(--mute-l); }
@media (hover: hover) { .crumbs a:hover { color: var(--ink); } }
.crumbs [aria-current] { color: var(--ink); }
.pdp__top { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(12 * var(--u)); padding-top: calc(16 * var(--u)); border-top: 1px solid var(--ink); }
.pdp__top .mono { white-space: nowrap; }
.pdp__top .status { white-space: normal; }  /* не влезает рядом с кодом — переносится под него, влево */
.pdp__title { font-size: calc(56 * var(--u)); line-height: 1; }
.pdp > * { min-width: 0; }
.pdp__lead { color: #2B2D2F; font-size: var(--t-body); line-height: 1.5; }
.pdp__price { font-size: calc(32 * var(--u)); letter-spacing: 0; }
.pdp__note { color: var(--mute-l); font-size: var(--t-small); }
.pdp__facts { display: grid; border-top: 1px solid var(--line-l); }
.pdp__facts li { display: grid; grid-template-columns: calc(110 * var(--u)) 1fr; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) 0; border-bottom: 1px solid var(--line-l); font-size: var(--t-small); }
.buybar { display: none; }
@media (max-width: 1023px) {
  .pdp { grid-template-columns: 1fr; gap: calc(24 * var(--u)); padding-top: 0; }
  .gal { position: relative; margin: 0 calc(-1 * var(--m)); }
  .gal__track { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: none; }
  .gal__track::-webkit-scrollbar { display: none; }
  .gal__item, .gal__item--0, .gal__item--2, .gal__item--3 { flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: start; }
  .gal__item--0 img { object-fit: contain; }
  .gal__count { display: block; position: absolute; right: var(--m); bottom: calc(14 * var(--u)); padding: 6px 10px; background: rgb(13 13 13 / .7); color: var(--milk); }
  .pdp__title { font-size: calc(36 * var(--u)); }
  .pdp__top { padding-top: calc(14 * var(--u)); }
  .buybar { display: flex; position: fixed; z-index: 700; left: 0; right: 0; bottom: 0; gap: calc(12 * var(--u)); align-items: center; justify-content: space-between;
    padding: calc(10 * var(--u)) var(--m) calc(calc(10 * var(--u)) + env(safe-area-inset-bottom)); background: var(--light); border-top: 1px solid var(--ink);
    transform: translateY(105%); transition: transform .6s var(--e-enter); }
  .buybar.is-on { transform: none; }
  .buybar__info { display: grid; gap: 2px; min-width: 0; }
  .buybar__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buybar .btn { flex-shrink: 0; min-width: 52%; }
  body.has-bar .ftr { padding-bottom: calc(calc(48 * var(--u)) + calc(76 * var(--u))); }
}

/* «Что готовить» в карточке: тарелки сверху в кругах */
.cook-sec { padding: var(--sec) var(--m); display: grid; gap: calc(64 * var(--u)); }
.cook__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(40 * var(--u)) calc(24 * var(--u)); }
.cook { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cook__img { display: block; width: 100%; max-width: calc(310 * var(--u)); aspect-ratio: 1; border-radius: 50%; overflow: clip; background: #151515; }
.cook__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--e-hover); }
.cook__name { margin-top: calc(28 * var(--u)); color: var(--milk); }
.cook__w { margin-top: calc(12 * var(--u)); color: var(--mute-d2); }
@media (hover: hover) { .cook:hover .cook__img img { transform: scale(1.05); } }
@media (max-width: 1023px) {
  .cook-sec { gap: calc(24 * var(--u)); }
  .cook-sec .sec-head { border-bottom: 0; padding-bottom: 0; }
  .cook-sec .sec-head__lead { display: none; }
  .cook__grid { grid-template-columns: 1fr 1fr; gap: calc(32 * var(--u)) calc(16 * var(--u)); }
  .cook__name { margin-top: calc(18 * var(--u)); }
  .cook__w { margin-top: calc(8 * var(--u)); }
}

/* Характеристики */
.specs { background: var(--light); padding: var(--sec) var(--m); display: grid; grid-template-columns: calc(680 * var(--u)) calc(680 * var(--u)); align-items: start; }
.specs .h2 { font-size: calc(64 * var(--u)); }
.specs__table > div { display: grid; grid-template-columns: calc(220 * var(--u)) 1fr; gap: calc(20 * var(--u)); padding: calc(16 * var(--u)) 0; border-top: 1px solid var(--line-soft); }
.specs__table > div:last-child { border-bottom: 1px solid var(--line-soft); }
.specs__table dt { color: var(--mute-l); font-size: var(--t-small); padding-top: 2px; }
.specs__table dd { font-size: var(--t-body); }
@media (max-width: 1023px) {
  .specs { grid-template-columns: minmax(0, 1fr); gap: calc(28 * var(--u)); }
  .specs .h2 { font-size: calc(34 * var(--u)) !important; }
  .specs__table > div { grid-template-columns: 1fr; gap: calc(4 * var(--u)); padding: calc(14 * var(--u)) 0; }
}

/* =========================================================
   ОФОРМЛЕНИЕ, БРОНЬ, ДОКУМЕНТЫ
   ========================================================= */
.co, .bk, .legal { padding: calc(var(--hdr) + calc(40 * var(--u))) var(--m) var(--sec); background: var(--light); }
.co__head { display: grid; gap: calc(20 * var(--u)); padding-bottom: calc(32 * var(--u)); border-bottom: 1px solid var(--ink); }
.co__grid { display: grid; grid-template-columns: calc(760 * var(--u)) calc(560 * var(--u)); gap: calc(40 * var(--u)); margin-top: calc(40 * var(--u)); align-items: start; }
.co__empty { display: grid; gap: calc(16 * var(--u)); justify-items: start; padding: calc(64 * var(--u)) 0; }
.co__step { border: 0; margin: 0; padding: 0 0 calc(48 * var(--u)); min-width: 0; display: grid; gap: calc(20 * var(--u)); }
.co__step + .co__step { padding-top: calc(40 * var(--u)); border-top: 1px solid var(--line-soft); }
.co__legend { float: left; width: 100%; display: flex; align-items: baseline; gap: calc(14 * var(--u)); font: 600 calc(24 * var(--u))/1.25 var(--f); padding: 0; margin-bottom: calc(4 * var(--u)); }
.co__legend .mono { color: var(--mute-l); }
.co__legend + * { clear: both; }
.co__fields { display: grid; gap: calc(16 * var(--u)); }
.co__fields--3 { grid-template-columns: repeat(3, 1fr); }
.co__fields--4 { grid-template-columns: repeat(4, 1fr); }
.methods { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); }
.method { position: relative; display: grid; grid-template-columns: 1fr auto; gap: calc(6 * var(--u)) calc(16 * var(--u)); align-content: start; padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)) calc(54 * var(--u)); border: 1px solid var(--line-l); cursor: pointer; transition: border-color .25s, box-shadow .25s, background-color .25s; }
.method input { position: absolute; left: calc(20 * var(--u)); top: calc(19 * var(--u)); appearance: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.method input:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.method input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.method:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #FAFAF9; }
@media (hover: hover) { .method:hover { border-color: #8E9092; } }
.method__name { font: 600 calc(16 * var(--u))/1.3 var(--f); }
.method__price { font-size: calc(16 * var(--u)); text-align: right; }
.method__eta { grid-column: 1; color: var(--mute-l); }
.co__method-err { display: none; }
.co__method-err.is-on, [data-pvz-err].is-on { display: block; }
[data-pvz-err] { display: none; }
.pvz { display: grid; gap: calc(12 * var(--u)); }
.pvz__list { border: 1px solid var(--line-l); max-height: calc(340 * var(--u)); overflow-y: auto; overscroll-behavior: contain; }
.pvz-item { display: grid; grid-template-columns: 22px 1fr auto; gap: calc(4 * var(--u)) calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-bottom: 1px solid var(--line-soft); cursor: pointer; align-items: start; }
.pvz-item:last-child { border-bottom: 0; }
.pvz-item input { appearance: none; width: 18px; height: 18px; margin: 2px 0 0; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; }
.pvz-item input:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.pvz-item:has(input:checked) { background: var(--sets); }
.pvz-item__addr { font-size: var(--t-body); }
.pvz-item__meta { grid-column: 2; color: var(--mute-l); font-size: var(--t-ui); }
.pvz-item__tag { color: var(--mute-l); }
.pvz__empty { padding: calc(16 * var(--u)); color: var(--mute-l); }
.courier { display: grid; gap: calc(16 * var(--u)); }
.co__side { position: relative; height: 100%; }
.co__card { position: sticky; top: calc(var(--hdr) + calc(24 * var(--u))); border: 1px solid var(--ink); padding: calc(28 * var(--u)); display: grid; gap: calc(20 * var(--u)); }
.co__card-title { color: var(--mute-l); }
.co__items { display: grid; }
.co-item { display: grid; grid-template-columns: calc(64 * var(--u)) 1fr auto; gap: calc(14 * var(--u)); padding: calc(12 * var(--u)) 0; border-bottom: 1px solid var(--line-soft); align-items: center; }
.co-item:first-child { padding-top: 0; }
.co-item img { width: calc(64 * var(--u)); aspect-ratio: 1; object-fit: cover; background: #111; }
.co-item__name { font: 600 calc(14 * var(--u))/1.3 var(--f); letter-spacing: .06em; text-transform: uppercase; }
.co-item__meta { color: var(--mute-l); font-size: var(--t-ui); }
.co-item__price { font: 400 calc(15 * var(--u))/1 var(--f-mono); white-space: nowrap; }
.co__sum { display: grid; gap: calc(10 * var(--u)); }
.co__sum > div { display: flex; justify-content: space-between; gap: calc(12 * var(--u)); font-size: var(--t-small); }
.co__sum dt { color: var(--mute-l); }
.co__total { border-top: 1px solid var(--ink); padding-top: calc(14 * var(--u)); margin-top: calc(4 * var(--u)); align-items: baseline; }
.co__total dt { color: var(--ink) !important; font: 600 calc(18 * var(--u))/1 var(--f); }
.co__total dd { font-size: calc(24 * var(--u)); }
.co__consents { display: grid; gap: calc(14 * var(--u)); }
.co__pay .mono { font-size: calc(15 * var(--u)); letter-spacing: 0; }
.co__hint { font-size: var(--t-ui); }
.paying { position: fixed; inset: 0; z-index: 990; background: rgb(13 13 13 / .92); color: var(--milk); display: grid; place-items: center; }
.paying__box { display: grid; gap: calc(18 * var(--u)); justify-items: center; }
.paying__bar { width: calc(220 * var(--u)); height: 2px; background: var(--line-d); overflow: hidden; }
.paying__bar i { display: block; height: 100%; background: var(--milk); animation: paying 1.4s var(--e-enter) forwards; transform-origin: 0 0; }
@keyframes paying { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 1023px) {
  .co__grid { grid-template-columns: 1fr; gap: calc(8 * var(--u)); margin-top: calc(28 * var(--u)); }
  .co__fields--3 { grid-template-columns: 1fr; }
  .co__fields--4 { grid-template-columns: 1fr 1fr; }
  .methods { grid-template-columns: 1fr; }
  .co__card { position: static; padding: calc(20 * var(--u)) calc(16 * var(--u)); }
  .co__legend { font-size: calc(20 * var(--u)); }
  .co__step { padding-bottom: calc(36 * var(--u)); }
  .co__step + .co__step { padding-top: calc(32 * var(--u)); }
}

/* Бронь */
.bk__grid { display: grid; grid-template-columns: calc(560 * var(--u)) 1fr; gap: calc(40 * var(--u)) calc(140 * var(--u)); margin-top: calc(40 * var(--u)); align-items: start; }
.bk__set { display: grid; gap: calc(20 * var(--u)); }
.bk__img { aspect-ratio: 1280 / 733; background: #0E0E0E; overflow: clip; }
.bk__img img { width: 100%; height: 100%; object-fit: cover; }
.bk__meta { display: grid; gap: calc(10 * var(--u)); }
.bk__name { font: 900 calc(40 * var(--u))/1 var(--f); letter-spacing: -.02em; text-transform: uppercase; }
.bk__steps { display: grid; border-top: 1px solid var(--line-l); }
.bk__steps li { display: grid; grid-template-columns: calc(36 * var(--u)) 1fr; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) 0; border-bottom: 1px solid var(--line-l); font-size: var(--t-small); }
.bk__steps .mono { color: var(--mute-l); padding-top: 2px; }
.bk__form { display: grid; gap: calc(20 * var(--u)); max-width: calc(560 * var(--u)); }
@media (max-width: 1023px) {
  .bk__grid { grid-template-columns: 1fr; gap: calc(32 * var(--u)); margin-top: calc(24 * var(--u)); }
  .bk__img { margin: 0 calc(-1 * var(--m)); }
  .bk__name { font-size: calc(32 * var(--u)); }
}

/* Документы */
.legal__grid { display: grid; grid-template-columns: var(--col) calc(680 * var(--u)); gap: calc(40 * var(--u)) calc(340 * var(--u)); margin-top: calc(40 * var(--u)); align-items: start; }
.legal__nav { position: sticky; top: calc(var(--hdr) + calc(24 * var(--u))); display: grid; gap: calc(10 * var(--u)); }
.legal__nav a { color: var(--mute-l); font-size: var(--t-small); }
@media (hover: hover) { .legal__nav a:hover { color: var(--ink); } }
.legal__docs { display: grid; gap: calc(40 * var(--u)); }
.legal__docs section { display: grid; gap: calc(12 * var(--u)); scroll-margin-top: calc(var(--hdr) + calc(24 * var(--u))); }
.legal__docs p { color: #55585A; }
.legal__stub { color: var(--warn); }
.legal__draft { display: block; padding: calc(16 * var(--u)) calc(20 * var(--u)); background: #FFF6EE; border-left: 2px solid var(--warn); color: var(--ink) !important; font-size: var(--t-small); }
.legal__draft .mono { display: block; margin-bottom: calc(6 * var(--u)); color: var(--warn); letter-spacing: .08em; }
.legal__ol { display: grid; gap: calc(10 * var(--u)); padding-left: 1.4em; list-style: decimal; color: #55585A; }
.legal__ol li::marker { font: 400 var(--t-mono) var(--f-mono); color: var(--mute-l); }
.ph { background: #FBEBDD; color: inherit; padding: 0 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
@media (max-width: 1023px) { .legal__grid { grid-template-columns: 1fr; } .legal__nav { position: static; } }

/* =========================================================
   ГАЙД ПО ЗАПУСКУ (для владельцев магазина)
   ========================================================= */
.gd { padding: calc(var(--hdr) + calc(40 * var(--u))) var(--m) var(--sec); background: var(--light); }
.gd__head { gap: calc(16 * var(--u)); }
.gd__title { font-size: calc(72 * var(--u)); }
.gd__sub { color: var(--mute-l); }
.gd__intro { display: grid; gap: calc(20 * var(--u)); max-width: calc(800 * var(--u)); margin: calc(40 * var(--u)) 0 0 calc(var(--col) + calc(40 * var(--u))); font-size: var(--t-lead); line-height: 1.55; }
.gd__progress { display: flex; align-items: center; gap: calc(16 * var(--u)); color: var(--mute-l); letter-spacing: .08em; }
.gd__progress i { flex: 1; max-width: calc(240 * var(--u)); height: 2px; background: var(--line-soft); }
.gd__progress b { display: block; height: 100%; background: var(--ink); transform-origin: 0 0; transform: scaleX(0); transition: transform .6s var(--e-enter); }
.gd__grid { display: grid; grid-template-columns: var(--col) minmax(0, calc(800 * var(--u))); gap: calc(40 * var(--u)); margin-top: calc(56 * var(--u)); align-items: start; }
.gd__nav { position: sticky; top: calc(var(--hdr) + calc(24 * var(--u))); display: grid; border-top: 1px solid var(--ink); }
.gd__nav a { display: grid; grid-template-columns: calc(32 * var(--u)) 1fr; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-small); color: var(--mute-l); transition: color .3s; }
.gd__nav a .mono { padding-top: 2px; }
.gd__nav a.is-on, .gd__nav a:hover { color: var(--ink); }
.gd__reset { justify-self: start; margin-top: calc(16 * var(--u)); color: var(--mute-l); font-size: var(--t-ui); }
.gd__body { display: grid; gap: calc(72 * var(--u)); }
.gd-sec { display: grid; gap: calc(20 * var(--u)); scroll-margin-top: calc(var(--hdr) + calc(24 * var(--u))); }
.gd-sec > p { font-size: var(--t-body); line-height: 1.55; color: #2B2D2F; }
.gd-sec__head { display: grid; gap: calc(10 * var(--u)); padding-top: calc(16 * var(--u)); border-top: 2px solid var(--ink); }
.gd-sec__n { color: var(--mute-l); letter-spacing: .08em; }
.gd-sec__title { font: 900 calc(48 * var(--u))/1 var(--f); letter-spacing: -.02em; text-transform: uppercase; }
.gd-list { display: grid; }
.gd-list li { border-bottom: 1px solid var(--line-soft); }
.gd-list li:first-child { border-top: 1px solid var(--line-soft); }
.gd-check { display: grid; grid-template-columns: 24px 1fr; gap: calc(16 * var(--u)); align-items: start; padding: calc(16 * var(--u)) 0; cursor: pointer; font-size: var(--t-body); line-height: 1.5; }
.gd-check input { appearance: none; width: 22px; height: 22px; margin: 2px 0 0; border: 1.5px solid var(--ink); background: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color .2s; }
.gd-check input:checked { background: var(--ink); }
.gd-check input:checked::after { content: ""; width: 11px; height: 6px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.gd-check input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gd-check span { transition: color .3s; }
.is-done .gd-check span { color: var(--mute-l); }
.gd-tag { display: table; margin-bottom: calc(4 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u)); font-style: normal; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; background: var(--ink); color: #fff; }
.gd-tag--skip { background: transparent; color: var(--mute-l); border: 1px solid currentColor; }
.gd-tag--wip { background: var(--sets); color: var(--ink); }
@media (hover: hover) { .gd-check:hover input:not(:checked) { background: var(--sets); } }
.gd-note { display: grid; gap: calc(6 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); background: var(--sets); font-size: var(--t-small) !important; line-height: 1.5; }
.gd-note .mono { color: var(--mute-l); letter-spacing: .08em; }
.gd__intro .gd-note { font-size: var(--t-small); }
.gd-table { overflow-x: auto; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.gd-table table { width: 100%; border-collapse: collapse; font-size: var(--t-small); line-height: 1.4; min-width: 640px; }
.gd-table th, .gd-table td { text-align: left; vertical-align: top; padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)) 0; border-bottom: 1px solid var(--line-soft); }
.gd-table thead th { font: 600 var(--t-ui)/1.23 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--mute-l); border-bottom-color: var(--ink); }
.gd-table tbody th { font-weight: 600; white-space: nowrap; }
.gd-table tbody tr:last-child > * { border-bottom: 0; }
.gd-table td.mono { font-size: var(--t-mono); white-space: nowrap; }
.gd-ol { display: grid; counter-reset: gd; border-top: 1px solid var(--line-soft); }
.gd-ol li { counter-increment: gd; display: grid; grid-template-columns: calc(32 * var(--u)) 1fr; gap: calc(16 * var(--u)); padding: calc(14 * var(--u)) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-body); }
.gd-ol li::before { content: counter(gd, decimal-leading-zero); font: 400 var(--t-mono)/1.9 var(--f-mono); color: var(--mute-l); }
@media (max-width: 1023px) {
  .gd__title { font-size: calc(40 * var(--u)); }
  .gd__intro { margin: calc(28 * var(--u)) 0 0; font-size: var(--t-body); }
  .gd__grid { grid-template-columns: minmax(0, 1fr); gap: calc(32 * var(--u)); margin-top: calc(36 * var(--u)); }
  .gd__nav { position: static; }
  .gd__body { gap: calc(56 * var(--u)); }
  .gd-sec__title { font-size: calc(30 * var(--u)); }
  .gd-check { gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) 0; }
  /* таблица сервисов на телефоне — карточками */
  .gd-table table { min-width: 0; }
  .gd-table thead { display: none; }
  .gd-table tbody, .gd-table tr, .gd-table th, .gd-table td { display: block; }
  .gd-table tr { padding: calc(14 * var(--u)) 0; border-bottom: 1px solid var(--line-soft); display: grid; gap: calc(6 * var(--u)); }
  .gd-table tbody tr:last-child { border-bottom: 0; }
  .gd-table th, .gd-table td, .gd-table tbody tr:last-child > * { padding: 0; border: 0; }
  .gd-table tbody th { font-size: var(--t-body); }
  .gd-table td { display: grid; grid-template-columns: calc(120 * var(--u)) 1fr; gap: calc(12 * var(--u)); }
  .gd-table td::before { content: attr(data-label); font: 600 var(--t-mono)/1.4 var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--mute-l); }
  .gd-table td.mono { white-space: normal; }
}

/* =========================================================
   ДЕМО-ОПЛАТА (тестовый режим): нейтральная «банковская» форма, не в стиле магазина
   ========================================================= */
.pay-page { background: #EEF0F3; color: #1A1C1F; }
.pay { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 32px 16px; font-family: var(--f); }
.pay__test { padding: 7px 12px; border-radius: 999px; background: #FFF1E0; color: #A3460F; box-shadow: inset 0 0 0 1px #F3C9A2; letter-spacing: .08em; font-size: 11px; text-align: center; }
.pay__card { position: relative; width: min(440px, 100%); background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 1px 2px rgb(16 24 40 / .06), 0 12px 32px rgb(16 24 40 / .08); display: grid; gap: 20px; overflow: hidden; }
.pay__top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #5B6270; }
.pay__secure { display: inline-flex; align-items: center; gap: 6px; color: #1F7A4D; font-weight: 600; }
.pay__gw { font-weight: 600; letter-spacing: .02em; }
.pay__order { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid #ECEEF1; border-bottom: 1px solid #ECEEF1; font-size: 14px; }
.pay__order div { display: flex; justify-content: space-between; gap: 12px; }
.pay__order dt { color: #6B7280; }
.pay__order dd { font-weight: 600; }
.pay__sum { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: #6B7280; }
.pay__sum b { font-size: 28px; font-weight: 700; color: #111317; letter-spacing: -.01em; }
.pay__tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: #F1F3F5; border-radius: 10px; }
.pay__tab { min-height: 40px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #5B6270; transition: background-color .2s, color .2s; }
.pay__tab[aria-selected="true"] { background: #fff; color: #111317; box-shadow: 0 1px 2px rgb(16 24 40 / .1); }
.pay__pane { display: grid; gap: 14px; }
.pay__field { display: grid; gap: 6px; font-size: 13px; color: #5B6270; }
.pay__field input { min-height: 48px; padding: 0 14px; border: 1px solid #D5D9DF; border-radius: 10px; background: #fff; font: 500 17px/1 var(--f-mono); color: #111317; letter-spacing: .04em; width: 100%; }
.pay__field input:focus { outline: none; border-color: #2F6FEB; box-shadow: 0 0 0 3px rgb(47 111 235 / .18); }
.pay__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pay__btn { min-height: 52px; border-radius: 10px; background: #2F6FEB; color: #fff; font-size: 16px; font-weight: 600; transition: background-color .2s; }
.pay__btn:hover { background: #2259C8; }
.pay__fail { min-height: 44px; border-radius: 10px; color: #B42318; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1px #F2C7C2; }
.pay__fail:hover { background: #FEF3F2; }
.pay__qr { width: 200px; justify-self: center; padding: 10px; border: 1px solid #E5E7EB; border-radius: 12px; }
.pay__qr svg { width: 100%; height: auto; }
.pay__hint { text-align: center; font-size: 14px; color: #5B6270; line-height: 1.45; }
.pay__wait { position: absolute; inset: 0; background: rgb(255 255 255 / .94); display: grid; place-content: center; justify-items: center; gap: 14px; font-size: 15px; font-weight: 600; }
.pay__wait i { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #D5D9DF; border-top-color: #2F6FEB; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pay__back { font-size: 14px; color: #5B6270; }
.pay__back:hover { color: #111317; }
@media (max-width: 480px) { .pay__card { padding: 20px; border-radius: 14px; } }

/* Плашка тестового режима на оформлении и брони */
.testbar { margin: calc(-40 * var(--u)) calc(-1 * var(--m)) calc(32 * var(--u)); padding: calc(9 * var(--u)) var(--m); background: #FFF1E0; color: #A3460F; border-bottom: 1px solid #F3C9A2; letter-spacing: .08em; }
@media (max-width: 1023px) { .testbar { margin-bottom: calc(24 * var(--u)); } }
.order-only [data-testbar-order] { display: none; } /* боевой режим: плашка скрыта до первой отрисовки, без прыжка */

/* =========================================================
   РЕЗУЛЬТАТ: заказ принят / бронь принята / оплата не прошла
   ========================================================= */
.res { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
.res__media { position: relative; overflow: clip; }
.res__img, .res__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.res__img img { object-fit: cover; }
.res__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(13 13 13 / 0) 60%, rgb(13 13 13 / .9)); }
.res__body { padding: calc(var(--hdr) + calc(80 * var(--u))) var(--m) calc(80 * var(--u)) calc(60 * var(--u)); display: flex; flex-direction: column; justify-content: center; gap: calc(28 * var(--u)); }
.res__body > div[data-variant] { display: grid; gap: calc(28 * var(--u)); }
.res__body > div[data-variant][hidden] { display: none; }
.res__title { font-size: calc(96 * var(--u)); }
.res__title > span { display: block; }
.res__num { color: var(--milk); margin-left: 8px; }
.res__lead { font-size: var(--t-lead); line-height: 1.55; color: #D4D6D7; max-width: calc(560 * var(--u)); }
.res__sum { display: grid; border-top: 1px solid var(--line-d); max-width: calc(560 * var(--u)); }
.res__sum:empty { display: none; }
.res__sum > div { display: flex; justify-content: space-between; gap: calc(16 * var(--u)); padding: calc(12 * var(--u)) 0; border-bottom: 1px solid var(--line-d); font-size: var(--t-small); }
.res__sum dt { color: var(--mute-d); }
.res__sum dd { text-align: right; }
.res__btns { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.res__warn { color: #E2662F; }
.res__tips { display: grid; border-top: 1px solid var(--line-d); max-width: calc(560 * var(--u)); }
.res__tips li { display: grid; grid-template-columns: calc(36 * var(--u)) 1fr; padding: calc(12 * var(--u)) 0; border-bottom: 1px solid var(--line-d); font-size: var(--t-small); }
.res__tips .mono { color: var(--mute-d2); padding-top: 2px; }
.page-result .ftr { border-top-color: var(--line-d); }

/* «Оплата не прошла»: всё по центру, грустный пресс падает и прижимается */
.fail { min-height: 100svh; padding: calc(var(--hdr) + calc(56 * var(--u))) var(--m) calc(80 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.fail__press { width: calc(400 * var(--u)); margin-bottom: calc(36 * var(--u)); }
.sad { width: 100%; height: auto; overflow: visible; }
.sad__body, .sad__shadow { transform-box: view-box; transform-origin: 50% 93%; animation: sad-drop 1100ms var(--e-enter) 150ms both; }
.sad__shadow { animation-name: sad-shadow; }
.sad .eye { transform-box: fill-box; transform-origin: 50% 50%; animation: sad-blink 260ms ease-in-out 1500ms 1 both; }
.sad .mouth { transform-box: fill-box; transform-origin: 50% 0%; animation: sad-droop 900ms var(--e-enter) 1900ms both; }
@keyframes sad-drop {
  0% { transform: translateY(-150px); opacity: 0; }
  20% { opacity: 1; }
  52% { transform: translateY(0) scale(1.03, .94); }
  68% { transform: translateY(-14px) scale(.99, 1.02); }
  84% { transform: translateY(0) scale(1.01, .985); }
  100% { transform: none; }
}
@keyframes sad-shadow { 0% { opacity: 0; transform: scale(.7); } 52% { opacity: .6; transform: scale(1.02, 1); } 100% { opacity: .6; transform: none; } }
@keyframes sad-blink { 0%, 100% { transform: none; } 50% { transform: scaleY(.08); } }
@keyframes sad-droop { from { transform: none; } to { transform: translateY(5px) scaleX(.94) scaleY(1.12); } }
.fail__code { color: #E2662F; letter-spacing: .08em; }
.fail__title { margin-top: calc(20 * var(--u)); font-size: calc(96 * var(--u)); }
.fail__lead { margin-top: calc(24 * var(--u)); max-width: calc(560 * var(--u)); color: var(--mute-d); font-size: var(--t-lead); line-height: 1.5; }
.fail__btns { display: flex; gap: calc(12 * var(--u)); margin-top: calc(40 * var(--u)); }
.fail__btns .btn { width: calc(300 * var(--u)); }
.fail__btns .btn--line-d { box-shadow: inset 0 0 0 1px var(--milk); width: calc(260 * var(--u)); }
.fail__help { margin-top: calc(32 * var(--u)); color: var(--mute-d2); font-size: var(--t-ui); }
.fail__help a { color: var(--mute-d); }
@media (max-width: 1023px) {
  .fail { padding: calc(var(--hdr) + calc(32 * var(--u))) var(--m) calc(56 * var(--u)); justify-content: flex-start; }
  .fail__press { width: min(calc(300 * var(--u)), 82%); margin-bottom: calc(24 * var(--u)); }
  .fail__title { font-size: calc(52 * var(--u)); margin-top: calc(14 * var(--u)); }
  .fail__lead { font-size: var(--t-body); margin-top: calc(16 * var(--u)); }
  .fail__btns { flex-direction: column; width: 100%; gap: calc(8 * var(--u)); margin-top: calc(28 * var(--u)); }
  .fail__btns .btn, .fail__btns .btn--line-d { width: 100%; }
  .fail__help { margin-top: calc(24 * var(--u)); }
}
@media (max-width: 1023px) {
  .res { grid-template-columns: 1fr; }
  .res__media { height: 44svh; margin-top: var(--hdr); }
  .res__img::after { background: linear-gradient(180deg, rgb(13 13 13 / 0) 50%, rgb(13 13 13 / .95)); }
  .res__body { padding: calc(8 * var(--u)) var(--m) calc(56 * var(--u)); justify-content: flex-start; gap: calc(22 * var(--u)); }
  .res__title { font-size: calc(48 * var(--u)); }
  .res__btns .btn { flex: 1 1 100%; }
}

/* ---------- Личный кабинет ---------- */
.acc__tabs { display: flex; gap: calc(32 * var(--u)); margin-top: calc(32 * var(--u)); border-bottom: 1px solid var(--line-l); }
.acc__tab { font: 600 var(--t-ui)/1.23 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--mute-l); padding: calc(14 * var(--u)) 0; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.acc__tab.is-on { color: var(--ink); border-bottom-color: var(--ink); }
.acc__why { display: grid; border-top: 1px solid var(--line-l); align-self: start; }
.acc__why li { display: grid; grid-template-columns: calc(36 * var(--u)) 1fr; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) 0; border-bottom: 1px solid var(--line-l); font-size: var(--t-small); }
.acc__why .mono { color: var(--mute-l); padding-top: 2px; }
.acc__msg { display: none; } .acc__msg.is-on { display: block; }
.acc__forgot, .acc__out { justify-self: start; font-size: var(--t-small); text-decoration: underline; text-underline-offset: 3px; }
.acc__note { font-size: var(--t-small); }
.acc__orders { display: grid; gap: calc(20 * var(--u)); align-content: start; }
.acc__list { display: grid; border-top: 1px solid var(--line-l); }
.acc__order { display: flex; justify-content: space-between; gap: calc(16 * var(--u)); padding: calc(16 * var(--u)) 0; border-bottom: 1px solid var(--line-l); font-size: var(--t-small); }
.acc__order p + p { margin-top: calc(4 * var(--u)); }
.acc__order-r { display: grid; gap: calc(6 * var(--u)); justify-items: end; text-align: right; }
.acc .bk__grid { grid-template-columns: calc(560 * var(--u)) 1fr; }
.acc__user .bk__grid { grid-template-columns: 1fr calc(560 * var(--u)); }
@media (max-width: 1023px) { .acc .bk__grid, .acc__user .bk__grid { grid-template-columns: 1fr; } .hdr__acc { display: none; } }