/* ============ ТОКЕНЫ ============ */
/* Красная шапка, белый сайт, синий подвал. Красный — действие: шапка и кнопки.
   Синий — тихий слой: подвал с контактами. Один набор радиусов на всё:
   блоки 24, поля и миниатюры 14, кнопки и переключатели — пилюля */
:root{
  --white:#FFFFFF;
  --ink:#15171C;
  --red:#C8102E;
  --red-deep:#9E0C24;
  --blue:#0B3184;
  --surface:#F2F3F5;
  --surface-2:#E7E9ED;
  --line:rgba(21,23,28,.12);
  --line-2:rgba(21,23,28,.24);

  --o2:.74;            /* второй уровень текста */
  --o3:.66;            /* третий — не ниже, иначе контраст меньше 4.5:1 */

  --r:24px;
  --r-s:14px;
  --pill:999px;

  --ease:cubic-bezier(.22,1,.36,1);

  --fd:'Oswald','Arial Narrow',sans-serif;
  --fb:'Golos Text',Arial,sans-serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --pad:clamp(16px,4vw,56px);
  --max:1440px;
  --head:76px;
  --sec:clamp(72px,9vw,136px);
}

/* Цвета кожи — сняты с образцов на обложках Озона, с поправкой на студийный свет */
[data-c="black"]{ --c:#1F1E1D; }
[data-c="white"]{ --c:#EEECE8; }
[data-c="grey"]{  --c:#868180; }
[data-c="red"]{   --c:#BF3A44; }
[data-c="blue"]{  --c:#3F77BE; }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--white); color:var(--ink);
  font-family:var(--fb); font-weight:400;
  font-size:clamp(18px,16px + .3vw,20px); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body.is-locked{ overflow:hidden; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; }
svg{ display:block; }
img{ max-width:100%; display:block; }
b,strong{ font-weight:400; }
[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid var(--red); outline-offset:3px; border-radius:var(--r-s); }

h1,h2,h3{ font-family:var(--fd); font-weight:400; hyphens:none; text-wrap:balance; }
h1{ font-size:clamp(3rem,1.6rem + 5.4vw,7.4rem); line-height:.92; letter-spacing:-.02em; }
h2{ font-size:clamp(2.5rem,1.5rem + 3.6vw,5rem); line-height:.95; letter-spacing:-.018em; }
h3{ font-size:clamp(1.55rem,1.2rem + .9vw,2.1rem); line-height:1.08; letter-spacing:-.01em; }
p,li{ text-wrap:pretty; }
/* Короткие блоки в 2—4 строки — с выровненными строками, без хвостов (BRK-03) */
.lead,.note,.tile p,.step p,.qa summary,.duo li,.citem__meta,.radio__sub{ text-wrap:balance; }
.lead{ font-size:clamp(1.2rem,1.05rem + .45vw,1.5rem); line-height:1.5; max-width:46ch; opacity:var(--o2); }
.note{ font-size:16px; line-height:1.45; opacity:var(--o3); }
.nw{ white-space:nowrap; }

.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ============ КНОПКИ ============ */
/* Два типа: сплошная пилюля и прозрачная с тонкой линией. Ховер — заливка слева направо */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:62px; padding:0 34px; border-radius:var(--pill);
  background:var(--red); color:var(--white);
  font-size:20px; line-height:1.2; text-align:center; flex:none;
}
.btn__fill{
  position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:scaleX(0); transform-origin:left;
  transition:transform 500ms var(--ease);
}
.btn:hover .btn__fill{ transform:scaleX(1); }
.btn__label{ transition:color 320ms var(--ease); }
.btn__arrow{ width:22px; height:22px; flex:none; transition:transform 520ms var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(5px); }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-2); }
.btn--ghost:hover .btn__label{ color:var(--white); }
.btn--ghost:hover .btn__arrow{ color:var(--white); }
.btn--light{ background:var(--white); color:var(--red); }
.btn--light .btn__fill{ background:var(--ink); }
.btn--light:hover .btn__label,.btn--light:hover .btn__arrow{ color:var(--white); }
.btn--wide{ width:100%; }
.btn[disabled]{ opacity:.4; pointer-events:none; }

/* ============ ШАПКА ============ */
.head{
  position:sticky; top:0; z-index:40;
  background:var(--red); color:var(--white);
}
.head__in{
  display:flex; align-items:center; gap:var(--s4);
  height:var(--head); max-width:var(--max); margin:0 auto; padding:0 var(--pad);
}
/* Логотип — символ #logo в начале каждой страницы, рисуется цветом текста.
   Треугольник берёт --logo-accent, по умолчанию тот же цвет: на красной шапке логотип целиком белый */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.logo{ margin-right:auto; }
.logo svg{ width:211.8px; height:40px; }
.head__nav{ display:flex; gap:var(--s4); font-size:19px; }
.head__nav a{ position:relative; padding:10px 0; }
.head__nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:4px; height:2px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform 420ms var(--ease);
}
.head__nav a:hover::after,.head__nav a.is-here::after{ transform:scaleX(1); }
.head__cart{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  height:48px; padding:0 20px 0 16px; border-radius:var(--pill);
  background:var(--white); color:var(--ink); font-size:18px;
  transition:transform 420ms var(--ease);
}
.head__cart:hover{ transform:translateY(-2px); }
.head__cart svg{ width:24px; height:24px; color:var(--red); }
.head__count{
  min-width:26px; height:26px; padding:0 7px; border-radius:var(--pill);
  background:var(--red); color:var(--white); font-size:15px; line-height:26px; text-align:center;
}
.head__burger{ display:none; width:48px; height:48px; border-radius:var(--pill); position:relative; }
.head__burger span{
  position:absolute; left:13px; right:13px; height:2px; background:var(--white); border-radius:2px;
  transition:transform 420ms var(--ease), top 420ms var(--ease);
}
.head__burger span:nth-child(1){ top:19px; }
.head__burger span:nth-child(2){ top:27px; }
.head__burger.is-x span:nth-child(1){ top:23px; transform:rotate(45deg); }
.head__burger.is-x span:nth-child(2){ top:23px; transform:rotate(-45deg); }

/* ============ МОБИЛЬНОЕ МЕНЮ ============ */
.mnav{
  position:fixed; inset:0; z-index:60; background:var(--red); color:var(--white);
  display:flex; flex-direction:column; padding:0 var(--pad) var(--s4);
  opacity:0; visibility:hidden; transition:opacity 420ms var(--ease), visibility 0s 420ms;
}
.mnav.is-open{ opacity:1; visibility:visible; transition:opacity 420ms var(--ease); }
.mnav__head{ display:flex; align-items:center; justify-content:space-between; height:var(--head); }
.mnav__list{ display:flex; flex-direction:column; gap:var(--s1); margin-top:var(--s5); }
.mnav__list a{ font-family:var(--fd); font-size:44px; line-height:1.15; letter-spacing:-.01em; }
.mnav__foot{ margin-top:auto; display:flex; flex-direction:column; gap:6px; }
.mnav__phone{ font-family:var(--fd); font-size:30px; }
.mnav .note{ opacity:.82; }
.x-btn{
  display:grid; place-items:center; width:48px; height:48px; border-radius:var(--pill);
  transition:background 320ms var(--ease);
}
.x-btn svg{ width:26px; height:26px; }
.x-btn:hover{ background:rgba(255,255,255,.14); }

/* ============ ВХОД БЛОКОВ ============ */
/* Прячем только когда скрипт работает (класс js ставится в <head>): без JS текст виден сразу.
   Первый экран главной — исключение, у него свой вход на CSS-анимации, ниже */
.js .rise{ opacity:0; transform:translateY(28px); filter:blur(14px); }
.js .is-in .rise,.js .rise.is-in{
  opacity:1; transform:none; filter:blur(0);
  transition:opacity 900ms var(--ease) var(--d,0ms), transform 900ms var(--ease) var(--d,0ms), filter 900ms var(--ease) var(--d,0ms);
}

/* ============ ГЛАВНАЯ: ПЕРВЫЙ ЭКРАН ============ */
/* Схема A: фото на весь экран, белый текст на тёмном небе — в левом верхнем углу кадра, там тихая зона (IMG-05).
   Фото выше окна: передний план срезан, неба больше, и текст целиком на нём. Затемнения нет, только тень у букв.
   Фото стоит на месте, а белый лист с остальной главной наезжает на него при прокрутке (HERO-03) */
.hero{ position:relative; height:calc(150svh - var(--head)); background:#0A1446; color:var(--white); }
.hero__media{ position:sticky; top:var(--head); height:calc(100svh - var(--head)); overflow:hidden; }
.hero__media img{
  position:absolute; left:0; top:0; width:100%; height:125%;
  object-fit:cover; object-position:50% 0;
  transform-origin:60% 45%; animation:heroZoom 1800ms var(--ease) both;
}
@keyframes heroZoom{ from{ transform:scale(1.05); } }
/* Вход первого экрана не ждёт script.js: анимация стартует с первой отрисовкой. Скрипт грузится медленно
   или не загрузился вовсе — заголовок, подзаголовок и кнопка всё равно появляются. Шаг 140 мс */
.js .hero .rise{ opacity:1; transform:none; filter:none; animation:heroRise 900ms var(--ease) 120ms both; }
.js .hero .rise:nth-child(2){ animation-delay:260ms; }
.js .hero .rise:nth-child(3){ animation-delay:400ms; }
@keyframes heroRise{ from{ opacity:0; transform:translateY(28px); filter:blur(14px); } }
/* Чем ниже окно, тем сильнее увеличено фото: небо растёт вместе с текстом и не даёт ему сползти на освещённый снег */
@media (max-height:860px){ .hero__media img{ height:132%; } }
@media (max-height:760px){ .hero__media img{ height:140%; } }
.hero__text{
  position:absolute; left:0; right:0; top:0; height:calc(100svh - var(--head));
  padding:clamp(36px,7vh,88px) var(--pad) 0 max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  text-shadow:0 1px 2px rgba(0,6,30,.3), 0 10px 40px rgba(0,6,30,.5);
}
/* Заголовок зависит и от высоты окна: на низком ноутбуке текст не сползает с неба на снег */
.hero h1{ font-size:clamp(3rem,min(1.2rem + 4.6vw,9.5svh),6.8rem); margin-bottom:var(--s3); }
.hero__lead{ max-width:44ch; margin-bottom:var(--s4); color:rgba(255,255,255,.9); opacity:1; }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); }
.hero__cta .note{ white-space:nowrap; color:rgba(255,255,255,.86); opacity:1; }
.hero .btn{ text-shadow:none; }
.sheet{ position:relative; z-index:2; margin-top:-50svh; background:var(--white); border-radius:var(--r) var(--r) 0 0; }
.sheet > .sec:last-child{ padding-bottom:0; }

/* ============ СЕКЦИИ ============ */
.sec{ padding-top:var(--sec); padding-bottom:var(--sec); }
.sec + .sec{ padding-top:0; }
.sec__head{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--s3) var(--s5);
  align-items:end; margin-bottom:var(--s6);
}
.sec__head .lead{ justify-self:start; }

/* Сравнение: универсальный против пошива по лекалам */
.duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2); }
.duo__col{ border-radius:var(--r); padding:clamp(28px,3.6vw,56px); background:var(--surface); }
.duo__col--good{ background:var(--ink); color:var(--white); }
.duo__tag{ font-size:18px; opacity:var(--o2); margin-bottom:var(--s1); }
.duo__col h3{ margin-bottom:var(--s4); }
.ticks{ list-style:none; display:flex; flex-direction:column; gap:var(--s2); }
.ticks li{ display:grid; grid-template-columns:28px 1fr; gap:var(--s2); align-items:start; }
.ticks svg{ width:28px; height:28px; margin-top:1px; }
.duo__col--bad .ticks svg{ opacity:.5; }
.duo__col--good .ticks svg{ color:#FF6B7D; }

/* Две прострочки */
.stitches{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:var(--s5); align-items:start; }
.stitches__text h2{ margin-bottom:var(--s3); }
.stitches__text .lead{ margin-bottom:var(--s3); }
.stitches__tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2); }
.tile{ border-radius:var(--r); background:var(--surface); padding:var(--s2) var(--s2) var(--s3); }
.tile__pic{ aspect-ratio:1; border-radius:var(--r-s); overflow:hidden; margin-bottom:var(--s3); }
.tile__pic img{ width:100%; height:100%; object-fit:cover; }
.tile h3{ padding:0 var(--s1); margin-bottom:var(--s1); }
.tile p{ padding:0 var(--s1); }
/* Цвета на главной — подписанная легенда, не кнопки: крупных планов каждого цвета пока нет */
.tile .swatches{ padding:0 var(--s1); margin-top:var(--s2); }
.swatches{ list-style:none; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:16px; line-height:1.4; }
.swatches li{ display:inline-flex; align-items:center; gap:8px; }
.swatches .dot{ width:16px; height:16px; flex:none; }
.dots{ display:flex; flex-wrap:wrap; gap:10px; }
.dot{
  width:30px; height:30px; border-radius:var(--pill); background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
}

/* Как проходит заказ */
.steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4); }
.step{ border-top:1.5px solid var(--ink); padding-top:var(--s3); }
.step__num{ font-family:var(--fd); font-size:clamp(3rem,2rem + 2.4vw,4.6rem); line-height:1; color:var(--red); margin-bottom:var(--s3); }
.step h3{ margin-bottom:var(--s2); }
.step p{ opacity:var(--o2); }

/* Переход в каталог */
.band{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s4);
  border-radius:var(--r); background:var(--surface); padding:clamp(32px,5vw,80px);
}
.band h2{ margin-bottom:var(--s2); }

/* ============ ПОДВАЛ ============ */
.foot{
  background:var(--blue); color:var(--white);
  border-radius:var(--r) var(--r) 0 0;
}
main{ padding-bottom:var(--sec); }
main > .sec:last-child{ padding-bottom:0; }
.foot__in{ max-width:var(--max); margin:0 auto; padding:clamp(56px,7vw,96px) var(--pad) var(--s4); }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:var(--s5) var(--s4); }
.foot__logo{ margin-bottom:var(--s3); }
.foot__logo svg{ width:233px; height:44px; }
.foot__about{ max-width:30ch; opacity:.82; }
.foot__ttl{ font-size:16px; opacity:.72; margin-bottom:var(--s2); }
.foot__list{ list-style:none; display:flex; flex-direction:column; gap:0; }
.foot__list li{ padding:5px 0; }
.foot__list a{ display:inline-block; padding:5px 0; }
.foot__list a{ background:linear-gradient(currentColor,currentColor) 0 100% / 0 1.5px no-repeat; transition:background-size 420ms var(--ease); }
.foot__list a:hover{ background-size:100% 1.5px; }
.foot__phone{ font-family:var(--fd); font-size:28px; line-height:1.1; }
.foot__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2) var(--s4);
  margin-top:var(--s6); padding-top:var(--s3); border-top:1px solid rgba(255,255,255,.22);
  font-size:16px; opacity:.82;
}
.foot__docs{ display:flex; flex-wrap:wrap; gap:0 var(--s3); }
.foot__docs a{ padding:10px 0; }

/* ============ ВНУТРЕННИЕ СТРАНИЦЫ ============ */
.page-top{ padding-top:var(--s5); padding-bottom:var(--s5); }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:16px; margin-bottom:var(--s4); }
.crumbs a{ opacity:var(--o2); transition:opacity 320ms; padding:10px 0; }
.crumbs a:hover{ opacity:1; }
.crumbs span{ opacity:.4; }
.crumbs [aria-current]{ opacity:var(--o3); }
.page-top h1{ font-size:clamp(3rem,1.8rem + 4vw,6rem); margin-bottom:var(--s3); }

/* ============ КАТАЛОГ ============ */
/* Фильтр только по машине: марка → модель → год. Прострочку и цвет выбирают в карточке */
.finder{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:var(--s2); align-items:end;
  border-radius:var(--r); background:var(--surface); padding:var(--s3);
}
.sel{ display:flex; flex-direction:column; gap:8px; }
.sel__ttl{ font-size:16px; opacity:var(--o2); padding-left:4px; }
.sel__box{ position:relative; }
.sel select{
  -webkit-appearance:none; appearance:none; width:100%; height:62px; padding:0 52px 0 20px;
  border:1.5px solid transparent; border-radius:var(--r-s); background:var(--white);
  font-size:19px; cursor:pointer; transition:border-color 320ms var(--ease);
}
.sel select:hover{ border-color:var(--line-2); }
.sel select:disabled{ opacity:.5; cursor:default; }
.sel.is-set select{ border-color:var(--ink); }
.sel__box svg{ position:absolute; right:18px; top:50%; width:22px; height:22px; margin-top:-11px; pointer-events:none; }
.finder__reset{ min-height:62px; }

/* ============ СВОИ СПИСКИ ============ */
/* Кнопка — как поле, список — белая плашка поверх страницы. Без скрипта остаётся системный select */
.ui-sel{
  display:flex; align-items:center; width:100%; min-height:62px; padding:12px 52px 12px 20px;
  border:1.5px solid transparent; border-radius:var(--r-s); background:var(--white);
  font-size:19px; text-align:left; cursor:pointer; transition:border-color 320ms var(--ease);
}
.ui-sel__val{ line-height:1.3; }
.ui-sel:hover{ border-color:var(--line-2); }
.ui-sel:disabled{ opacity:.5; cursor:default; border-color:transparent; }
.sel.is-set .ui-sel,.sel__box.is-open .ui-sel{ border-color:var(--ink); }
.sel__box svg{ transition:transform 420ms var(--ease); }
.sel__box.is-open svg{ transform:rotate(180deg); }
.ui-sel__list{
  position:fixed; z-index:50; overflow-y:auto; overscroll-behavior:contain;
  list-style:none; padding:6px; border-radius:var(--r-s); background:var(--white);
  box-shadow:0 0 0 1px var(--line), 0 20px 48px -16px rgba(21,23,28,.32);
  animation:ui-sel-in 260ms var(--ease);
}
.ui-sel__list.is-up{ animation-name:ui-sel-up; }
@keyframes ui-sel-in{ from{ opacity:0; transform:translateY(-6px); } }
@keyframes ui-sel-up{ from{ opacity:0; transform:translateY(6px); } }
.ui-sel__list li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:48px; padding:10px 16px; border-radius:var(--r-s); font-size:18px; line-height:1.3; cursor:pointer;
}
.ui-sel__list li.is-active{ background:var(--surface); }
.ui-sel__list li svg{ flex:none; width:20px; height:20px; color:var(--red); }
.found{ margin:var(--s4) 0 var(--s3); font-size:18px; opacity:var(--o2); }

.grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3) var(--s2); }
.card{ display:flex; flex-direction:column; border-radius:var(--r); background:var(--surface); padding-bottom:var(--s3); transition:transform 620ms var(--ease), background 420ms var(--ease); }
.card:hover{ transform:translateY(-6px); background:var(--surface-2); }
.card__media{ position:relative; aspect-ratio:1; overflow:hidden; border-radius:var(--r) var(--r) 0 0; margin-bottom:var(--s1); }
.card__media .pic{ transition:transform 800ms var(--ease); }
.card:hover .card__media .pic{ transform:scale(1.04); }
.card__body{ display:flex; flex-direction:column; flex:1; padding:0 var(--s3); }
.card__name{ font-size:clamp(1.4rem,1.1rem + .8vw,1.9rem); margin-bottom:6px; }
.card__years{ font-size:17px; opacity:var(--o3); }
.card__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); margin-top:auto; padding-top:var(--s3); }
.card__price{ font-family:var(--fd); font-size:clamp(1.5rem,1.2rem + .7vw,2rem); line-height:1; }
.card__go{
  display:grid; place-items:center; width:48px; height:48px; border-radius:var(--pill); flex:none;
  background:var(--red); color:var(--white); transition:transform 520ms var(--ease);
}
.card__go svg{ width:22px; height:22px; }
.card:hover .card__go{ transform:translateX(4px); }
.empty{ grid-column:1/-1; border-radius:var(--r); background:var(--surface); padding:var(--s6) var(--s4); display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3); }
.empty p{ font-size:22px; }

/* ============ ФОТО ТОВАРА ============ */
/* cut — свой рендер без фона: целиком, с тенью под креслом.
   scene — снимок салона с фоном: на всё окно. shot — фото с Озона 3:4: целиком, с подписями.
   Окно под фото всегда с заданным размером, картинка ложится в него абсолютно */
.pic{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.pic--cut{
  inset:7%; width:86%; height:86%; object-fit:contain;
  filter:drop-shadow(0 18px 16px rgba(21,23,28,.16)) drop-shadow(0 3px 4px rgba(21,23,28,.12));
}
.pic--scene{ object-fit:cover; }
.pic--shot{ object-fit:contain; }
.pic--none{ inset:26%; width:48%; height:48%; opacity:.16; }

/* ============ ТОВАР ============ */
.prod{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:start; padding-bottom:var(--sec); }
.prod__gallery{ position:sticky; top:calc(var(--head) + 24px); }
.stage{ position:relative; aspect-ratio:1; border-radius:var(--r); background:var(--surface); overflow:hidden; }
.stage .pic{ animation:picIn 700ms var(--ease); }
@keyframes picIn{ from{ opacity:0; transform:scale(.985); } to{ opacity:1; transform:none; } }
.thumbs{ display:flex; gap:10px; margin-top:12px; overflow-x:auto; scrollbar-width:none; padding:3px; }
.thumbs::-webkit-scrollbar{ display:none; }
.thumb{
  position:relative; flex:none; width:84px; height:84px; border-radius:var(--r-s); background:var(--surface); overflow:hidden;
  transition:box-shadow 320ms var(--ease);
}
.thumb .pic--cut{ inset:10%; width:80%; height:80%; filter:none; }
.thumb.is-on{ box-shadow:0 0 0 2px var(--red); }

.prod__info h1{ font-size:clamp(2.6rem,1.6rem + 3vw,4.6rem); line-height:.96; margin-bottom:var(--s2); }
.prod__years{ font-size:19px; opacity:var(--o2); margin-bottom:var(--s4); }
.prod__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; padding-bottom:var(--s4); border-bottom:1px solid var(--line); margin-bottom:var(--s4); }
.prod__price b{ font-family:var(--fd); font-size:clamp(2.6rem,2rem + 1.8vw,3.8rem); line-height:1; }

.opt{ margin-bottom:var(--s4); }
.opt__ttl{ font-size:18px; margin-bottom:12px; }
.opt__ttl span{ opacity:var(--o2); }
.pills{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{
  display:inline-flex; align-items:center; gap:10px;
  min-height:52px; padding:0 22px; border-radius:var(--pill);
  background:var(--surface); font-size:18px; line-height:1.2;
  box-shadow:inset 0 0 0 2px transparent;
  transition:background 320ms var(--ease), box-shadow 320ms var(--ease), opacity 320ms;
}
.pill:hover{ background:var(--surface-2); }
.pill.is-on{ background:var(--white); box-shadow:inset 0 0 0 2px var(--ink); }
.pill.is-off{ opacity:.45; }
.pill .dot{ width:26px; height:26px; margin-left:-8px; }

.emb{ border-radius:var(--r); background:var(--surface); padding:var(--s3); margin-bottom:var(--s4); }
.check{ display:grid; grid-template-columns:30px 1fr auto; gap:var(--s2); align-items:center; cursor:pointer; font-size:18px; }
.check input{ position:absolute; opacity:0; pointer-events:none; }
.check__box{
  width:30px; height:30px; border-radius:8px; background:var(--white); box-shadow:inset 0 0 0 1.5px var(--line-2);
  display:grid; place-items:center; transition:background 320ms var(--ease), box-shadow 320ms var(--ease);
}
.check__box svg{ width:20px; height:20px; color:var(--white); opacity:0; transition:opacity 320ms; }
.check input:checked + .check__box{ background:var(--red); box-shadow:none; }
.check input:checked + .check__box svg{ opacity:1; }
.check input:focus-visible + .check__box{ outline:3px solid var(--red); outline-offset:3px; }
.check__price{ font-family:var(--fd); font-size:22px; }
.emb__more{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 520ms var(--ease); }
.emb.is-open .emb__more{ grid-template-rows:1fr; }
.emb__more > div{ overflow:hidden; }
.emb__more .grid2{ padding-top:var(--s3); }

.buy{ display:flex; gap:12px; align-items:stretch; margin-bottom:var(--s2); }
.qty{ display:flex; align-items:center; border-radius:var(--pill); background:var(--surface); flex:none; }
.qty button{ width:56px; height:62px; display:grid; place-items:center; border-radius:var(--pill); transition:background 320ms; }
.qty button:hover{ background:var(--surface-2); }
.qty button svg{ width:22px; height:22px; }
.qty span{ min-width:28px; text-align:center; font-size:20px; }
.buy .btn{ flex:1; }

.more{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s2); padding-bottom:0; }
.more__box{ border-radius:var(--r); background:var(--surface); padding:clamp(28px,3.6vw,56px); }
.more__box h2{ font-size:clamp(2rem,1.4rem + 1.8vw,3.2rem); margin-bottom:var(--s4); }
.specs{ list-style:none; }
.specs li{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:var(--s2); padding:14px 0; border-top:1px solid var(--line); }
.specs li:last-child{ border-bottom:1px solid var(--line); }
.specs span{ opacity:var(--o2); }
.desc p{ max-width:58ch; }
.desc p + p{ margin-top:var(--s2); }

/* ============ КОРЗИНА ============ */
.drawer{ position:fixed; inset:0; z-index:70; visibility:hidden; transition:visibility 0s 620ms; }
.drawer.is-open{ visibility:visible; transition:none; }
.drawer__veil{ position:absolute; inset:0; background:rgba(21,23,28,.4); opacity:0; transition:opacity 520ms var(--ease); }
.drawer.is-open .drawer__veil{ opacity:1; }
.drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(520px,100%);
  display:flex; flex-direction:column; background:var(--white); border-radius:var(--r) 0 0 var(--r);
  transform:translateX(100%); transition:transform 620ms var(--ease);
}
.drawer.is-open .drawer__panel{ transform:none; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:var(--s3) var(--s3) var(--s2) var(--s4); }
.drawer__head h2{ font-size:40px; }
.drawer__head .x-btn:hover{ background:var(--surface); }
.drawer__body{ flex:1; overflow-y:auto; padding:0 var(--s4); }
.drawer__empty{ font-size:20px; opacity:var(--o2); padding:var(--s4) 0; }
.drawer__foot{ padding:var(--s3) var(--s4) var(--s4); border-top:1px solid var(--line); }
.drawer__sum{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--s3); font-size:19px; }
.drawer__sum b{ font-family:var(--fd); font-size:34px; }
.citem{ display:grid; grid-template-columns:96px 1fr; gap:var(--s2); padding:var(--s3) 0; border-bottom:1px solid var(--line); }
.citem__pic{ position:relative; width:96px; height:96px; border-radius:var(--r-s); background:var(--surface); overflow:hidden; }
.citem__pic .pic--cut{ inset:9%; width:82%; height:82%; filter:none; }
.citem__name{ font-size:20px; line-height:1.3; margin-bottom:4px; }
.citem__meta{ font-size:16px; line-height:1.45; opacity:var(--o2); }
.citem__row{ display:flex; justify-content:space-between; align-items:center; gap:var(--s2); margin-top:10px; }
.citem__price{ font-family:var(--fd); font-size:24px; }
.citem__del{ font-size:16px; padding:10px 0; opacity:var(--o2); text-decoration:underline; text-underline-offset:4px; }
.citem__del:hover{ opacity:1; color:var(--red); }
.citem--gone .citem__meta{ color:var(--red); opacity:1; }

/* ============ ОФОРМЛЕНИЕ ============ */
.checkout{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:var(--s3); align-items:start; }
.checkout__main{ display:flex; flex-direction:column; gap:var(--s2); }
.fset{ border-radius:var(--r); background:var(--surface); padding:clamp(24px,3.4vw,48px); border:0; }
.fset__head{ display:flex; align-items:baseline; gap:var(--s2); margin-bottom:var(--s4); }
.fset__num{ font-family:var(--fd); font-size:28px; color:var(--red); }
.fset h2{ font-size:clamp(2rem,1.5rem + 1.4vw,3rem); }
.grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2); }
.grid2--full{ grid-template-columns:minmax(0,1fr); }
.mt{ margin-top:var(--s2); }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:16px; opacity:var(--o2); padding-left:4px; }
.field input,.field textarea,.field select{
  width:100%; height:62px; padding:0 20px; border-radius:var(--r-s); border:1.5px solid transparent;
  background:var(--white); font-size:19px; transition:border-color 320ms var(--ease);
}
.field select{ -webkit-appearance:none; appearance:none; padding-right:52px; cursor:pointer; }
.field select:hover{ border-color:var(--line-2); }
.field textarea{ height:128px; padding:16px 20px; resize:vertical; line-height:1.5; }
.field input:hover,.field textarea:hover{ border-color:var(--line-2); }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--ink); }
.field.is-bad input{ border-color:var(--red); }
.field__err{ font-size:16px; color:var(--red); padding-left:4px; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(21,23,28,.42); }

.radio{
  display:grid; grid-template-columns:30px 1fr auto; gap:var(--s2); align-items:center;
  min-height:76px; padding:var(--s2) var(--s3); border-radius:var(--r-s); background:var(--white); cursor:pointer;
  box-shadow:inset 0 0 0 1.5px transparent; transition:box-shadow 320ms var(--ease);
}
.radio:hover{ box-shadow:inset 0 0 0 1.5px var(--line-2); }
.radio:has(input:checked){ box-shadow:inset 0 0 0 2px var(--ink); }
.radio input{ position:absolute; opacity:0; pointer-events:none; }
.radio__mark{ width:28px; height:28px; border-radius:var(--pill); box-shadow:inset 0 0 0 1.5px var(--line-2); display:grid; place-items:center; transition:box-shadow 320ms var(--ease); }
.radio__mark::after{ content:''; width:14px; height:14px; border-radius:var(--pill); background:var(--red); transform:scale(0); transition:transform 420ms var(--ease); }
.radio input:checked + .radio__mark{ box-shadow:inset 0 0 0 2px var(--red); }
.radio input:checked + .radio__mark::after{ transform:scale(1); }
.radio input:focus-visible + .radio__mark{ outline:3px solid var(--red); outline-offset:3px; }
.radio__ttl{ display:block; font-size:19px; line-height:1.3; }
.radio__sub{ display:block; font-size:16px; opacity:var(--o3); line-height:1.4; }
.radio__cost{ font-family:var(--fd); font-size:22px; white-space:nowrap; }
/* Оплата одна — не выбор, а карточка с условием */
.pay-one{ border-radius:var(--r-s); background:var(--white); padding:var(--s2) var(--s3); }
.pay-one .radio__sub{ margin-top:2px; }

.sum{ position:sticky; top:calc(var(--head) + 24px); border-radius:var(--r); background:var(--surface); padding:clamp(24px,3vw,40px); }
.sum h2{ font-size:clamp(2rem,1.5rem + 1.2vw,2.8rem); margin-bottom:var(--s3); }
.sum__row{ display:flex; justify-content:space-between; gap:var(--s2); padding:14px 0; border-top:1px solid var(--line); font-size:17px; }
.sum__row b{ font-family:var(--fd); font-size:22px; white-space:nowrap; }
.sum__item{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; }
.sum__pic{ position:relative; width:64px; height:64px; border-radius:12px; background:var(--white); overflow:hidden; }
.sum__pic .pic--cut{ inset:9%; width:82%; height:82%; filter:none; }
.sum__total{ display:flex; justify-content:space-between; align-items:baseline; padding:var(--s3) 0; border-top:1.5px solid var(--ink); font-size:20px; }
.sum__total b{ font-family:var(--fd); font-size:40px; }
.sum .btn{ margin-bottom:var(--s2); }
.sum__err{ border-radius:var(--r-s); background:var(--white); padding:var(--s2); margin-bottom:var(--s2); font-size:17px; line-height:1.45; color:var(--red); }
.trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.consent{ font-size:17px; line-height:1.4; margin-bottom:var(--s2); }
.consent a{ text-decoration:underline; text-underline-offset:3px; }

.done{ border-radius:var(--r); background:var(--surface); padding:clamp(32px,6vw,96px); }
.done h1{ font-size:clamp(3rem,2rem + 4vw,6rem); margin-bottom:var(--s3); }
.done p{ font-size:clamp(1.2rem,1.05rem + .45vw,1.5rem); max-width:44ch; margin-bottom:var(--s5); opacity:var(--o2); }

/* ============ ДОКУМЕНТЫ ============ */
/* Оферта, политика, согласие, доставка: узкая колонка текста, реквизиты продавца — плашкой сверху */
.page-top .doc-title{ font-size:clamp(2.5rem,1.6rem + 3.2vw,4.8rem); }
.doc{ max-width:68ch; padding-bottom:var(--sec); }
.doc h2{ font-size:clamp(1.55rem,1.2rem + .9vw,2.1rem); line-height:1.08; margin:var(--s5) 0 var(--s2); }
.doc p,.doc ul,.doc ol{ margin-bottom:var(--s2); }
.doc ul{ padding-left:1.2em; }
.doc ol{ padding-left:1.5em; }
.doc li{ margin-bottom:6px; }
.doc a{ text-decoration:underline; text-underline-offset:3px; }
.doc__seller{ border-radius:var(--r); background:var(--surface); padding:var(--s3); margin-bottom:var(--s4); }
.doc__seller p{ margin:0; }
/* Образец заявления на странице возврата — та же плашка, строки с небольшим шагом */
.doc__box{ border-radius:var(--r); background:var(--surface); padding:var(--s3); margin-bottom:var(--s2); }
.doc__box p{ margin-bottom:8px; }
.doc__box p:last-child{ margin-bottom:0; }
.doc__box b{ font-family:var(--fd); font-size:1.15em; }
.doc__dlv b{ font-family:var(--fd); font-size:1.15em; }

/* ============ ВОПРОСЫ И ОТЗЫВЫ ============ */
/* faq.html: раскрывашки колонкой шириной с текст документа — как были на главной, ниже отзывы карточками */
.faq__list{ display:flex; flex-direction:column; gap:12px; max-width:68ch; }
.qa{ border-radius:var(--r); background:var(--surface); transition:background 320ms var(--ease); }
.qa[open]{ background:var(--surface-2); }
.qa summary{
  list-style:none; cursor:pointer; display:grid; grid-template-columns:1fr 40px; gap:var(--s2); align-items:center;
  padding:22px 22px 22px 28px; font-size:clamp(1.15rem,1.05rem + .3vw,1.35rem); line-height:1.35;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa__sign{ position:relative; width:40px; height:40px; border-radius:var(--pill); background:var(--white); }
.qa__sign::before,.qa__sign::after{
  content:''; position:absolute; left:12px; right:12px; top:19px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform 420ms var(--ease);
}
.qa__sign::after{ transform:rotate(90deg); }
.qa[open] .qa__sign::after{ transform:rotate(0); }
.qa p a{ text-decoration:underline; text-underline-offset:3px; }
.qa p{ padding:0 28px 26px; max-width:62ch; opacity:var(--o2); }
/* Отзывы спрятаны (hidden), пока их нет: пустой раздел хуже, чем никакого. Шаблон карточки — в faq.html */
.reviews{ margin-top:var(--sec); }
.reviews h2{ margin-bottom:var(--s5); }
.reviews__list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s2); }
.review{
  display:flex; flex-direction:column; gap:var(--s3);
  border-radius:var(--r); background:var(--surface); padding:clamp(24px,2.6vw,40px);
}
.review__stars{ display:flex; gap:4px; color:var(--red); }
.review__stars svg{ width:24px; height:24px; }
.review__stars .is-off{ color:var(--line-2); }
.review__text{ font-size:clamp(1.15rem,1.05rem + .3vw,1.35rem); line-height:1.45; }
.review__by{ margin-top:auto; font-family:var(--fd); font-size:1.35rem; line-height:1.2; }
.review__by span{ display:block; margin-top:6px; font-family:var(--fb); font-size:16px; line-height:1.45; opacity:var(--o3); }

/* ============ 404 ============ */
.miss{ padding-bottom:var(--sec); }
.miss__acts{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }

/* ============ ТЕХРАБОТЫ ============ */
/* Заглушку покупатель видит вместо любой страницы. Полосу сверху — только владелец, вошедший в админку */
.miss__contact{ margin-top:var(--s3); font-size:clamp(1.2rem,1.05rem + .45vw,1.5rem); line-height:1.5; }
.miss__contact a{ text-decoration:underline; text-underline-offset:4px; white-space:nowrap; }
.maint-bar{ background:var(--ink); color:var(--white); font-size:16px; line-height:1.45; padding:12px var(--pad); text-align:center; text-wrap:balance; }
.maint-bar a{ text-decoration:underline; text-underline-offset:3px; }

/* ============ ПЛАНШЕТ ============ */
@media (max-width:1180px){
  .head__nav{ gap:var(--s3); font-size:18px; }
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stitches{ grid-template-columns:minmax(0,1fr); }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .finder{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .finder__reset{ grid-column:1/-1; justify-self:start; }
}
@media (max-width:980px){
  :root{ --head:64px; }
  .logo svg{ width:169.4px; height:32px; }
  .head__nav{ display:none; }
  .head__burger{ display:block; }
  .head__cart{ height:44px; padding:0 14px 0 12px; }
  .head__cart-label{ display:none; }
  .head__in{ gap:var(--s1); }

  .hero__media img{ height:132%; object-position:61% 0; }
  .hero__media picture{ display:contents; }
  .hero__text{ padding-top:var(--s4); }
  .hero h1{ margin-bottom:var(--s2); }
  .hero__lead{ margin-bottom:var(--s3); }

  .sec__head{ grid-template-columns:minmax(0,1fr); margin-bottom:var(--s5); }
  .duo{ grid-template-columns:minmax(0,1fr); }
  .reviews__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .prod{ grid-template-columns:minmax(0,1fr); }
  .prod__gallery{ position:static; }
  .more{ grid-template-columns:minmax(0,1fr); }
  .checkout{ grid-template-columns:minmax(0,1fr); }
  .sum{ position:static; }
}

/* ============ ТЕЛЕФОН ============ */
@media (max-width:640px){
  .hero__cta .btn{ width:100%; }
  .hero__cta .note{ white-space:normal; }
  .stitches__tiles{ gap:10px; }
  .tile{ padding:10px 10px var(--s2); }
  .tile h3{ font-size:1.45rem; padding:0 4px; }
  .tile p{ font-size:16px; line-height:1.45; padding:0 4px; }
  .tile .swatches{ padding:0 4px; gap:4px 12px; font-size:15px; }
  .tile .dot{ width:22px; height:22px; }
  .steps{ grid-template-columns:minmax(0,1fr); gap:var(--s4); }
  .qa summary{ padding:18px 16px 18px 20px; }
  .qa p{ padding:0 20px 22px; }
  .reviews__list{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .review{ padding:var(--s3) 20px; }
  .band .btn{ width:100%; }
  .foot__grid{ grid-template-columns:minmax(0,1fr); gap:var(--s4); }
  .foot__bottom{ margin-top:var(--s5); }

  .finder{ grid-template-columns:minmax(0,1fr); padding:var(--s2); gap:12px; }
  .finder__reset{ width:100%; }
  .grid{ gap:12px 10px; }
  .card{ padding-bottom:var(--s2); }
  .card__media{ margin-bottom:4px; }
  .card__body{ padding:0 12px; }
  .card__name{ font-size:1.25rem; }
  .card__years{ font-size:15px; }
  .card__foot{ padding-top:12px; }
  .card__price{ font-size:1.3rem; }
  .card__go{ width:40px; height:40px; }
  .card__go svg{ width:18px; height:18px; }

  .thumb{ width:68px; height:68px; }
  .more__box{ padding:24px 20px; }
  .specs li{ grid-template-columns:minmax(0,1fr); gap:2px; padding:12px 0; }
  .specs span{ font-size:16px; }
  .buy{ flex-direction:column; }
  .qty{ justify-content:space-between; }
  .grid2{ grid-template-columns:minmax(0,1fr); }
  .radio{ grid-template-columns:28px minmax(0,1fr); padding:14px 16px; gap:4px 14px; }
  .radio__cost{ grid-column:2; font-size:20px; }
  .fset{ padding:22px 16px; }
  .radio__ttl{ font-size:18px; }
  .pay-one{ padding:14px 16px; }
  .drawer__panel{ border-radius:0; }
  .drawer__head{ padding:var(--s2) var(--s2) var(--s2) var(--pad); }
  .drawer__body{ padding:0 var(--pad); }
  .drawer__foot{ padding:var(--s2) var(--pad) var(--s3); }
}

/* Телефон вертикально: отдельный кадр из оригинала, уже обрезанный по небу и машине — без увеличения */
@media (max-width:640px) and (orientation:portrait){
  .hero__media img{ height:100%; object-position:50% 0; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:1ms !important; transition-duration:1ms !important; transition-delay:0ms !important; scroll-behavior:auto !important; }
  .js .rise{ opacity:1; transform:none; filter:none; }
  .js .hero .rise,.hero__media img{ animation:none; }
}