/* =========================================================
   BRUH — styles
   Шрифты: Oswald 400 (display) / Golos Text 400 (body)
           для иврита — Heebo 400 / Assistant 400
   Палитра: тёмный эспрессо / тёплый камень / золото логотипа
   Easing: cubic-bezier(.22, 1, .36, 1)

   Раскладка построена на логических свойствах
   (inset-inline, padding-inline), поэтому при dir="rtl"
   вся композиция зеркалится без отдельного набора правил.
   ========================================================= */

:root{
  --ink:          #1D1915;
  --ink-90:       rgba(29,25,21,.90);
  --ink-70:       rgba(29,25,21,.72);
  --ink-55:       rgba(29,25,21,.56);
  --ink-14:       rgba(29,25,21,.14);
  --ink-08:       rgba(29,25,21,.08);

  --paper:        #ECE8E2;
  --surface:      #F8F6F2;
  --surface-alt:  #DDD6CC;

  --light:        #F6F1E8;
  --light-70:     rgba(246,241,232,.72);
  --light-55:     rgba(246,241,232,.55);
  --light-14:     rgba(246,241,232,.14);

  --accent:       #C9A66B;
  --accent-deep:  #8C6D42;

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

  --pad:          clamp(20px, 5vw, 72px);
  --s1: 8px;  --s2: 16px;  --s3: 24px;
  --s4: 40px; --s5: 64px;  --s6: 104px; --s7: 168px;

  --font-display: 'Oswald', 'Golos Text', sans-serif;
  --font-body:    'Golos Text', system-ui, -apple-system, sans-serif;

  /* направление раскладки: 1 — LTR, −1 — RTL.
     Используется там, где логических свойств нет: transform, transform-origin */
  --dir: 1;
  --origin-start: left;
}

[dir="rtl"]{
  --dir: -1;
  --origin-start: right;
}

/* Иврит: Oswald и Golos Text не содержат ивритских глифов */
[lang="he"]{
  --font-display: 'Heebo', 'Assistant', 'Arial Hebrew', sans-serif;
  --font-body:    'Assistant', 'Heebo', 'Arial Hebrew', system-ui, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* именно clip, а не hidden: hidden делает body контейнером прокрутки
     и ломает position: sticky у всего внутри */
  overflow-x: clip;
}

/* зерно поверх всей страницы, 5% */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

.sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }

img{ display: block; max-width: 100%; }

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  hyphens: none;
  text-wrap: balance;
}

h1{
  font-size: clamp(2.2rem, 4.7vw, 4.4rem);
  line-height: .88;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
h2{
  font-size: clamp(1.8rem, 3.6vw, 3.4rem);
  line-height: .92;
  letter-spacing: -.028em;
  text-transform: uppercase;
}
h3{
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.04;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

p{ margin: 0; text-wrap: pretty; }

a{ color: inherit; text-decoration: none; }

:focus-visible{
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
}

.label{
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.8;
  text-transform: uppercase;
  letter-spacing: .19em;
  color: var(--ink-55);
  margin: 0;
}

/* --- Иврит: без капитализации и без плотного трекинга --- */
[lang="he"] h1,
[lang="he"] h2,
[lang="he"] h3,
[lang="he"] .label,
[lang="he"] .brand__word,
[lang="he"] .mm__nav a,
[lang="he"] .field label,
[lang="he"] .step__num{
  text-transform: none;
  letter-spacing: normal;
}
[lang="he"] h1{ line-height: 1.02; }
[lang="he"] h2{ line-height: 1.05; }
[lang="he"] h3{ line-height: 1.15; }

/* ============ ВХОД (MOT-01/02/03) ============ */
.rise{
  opacity: 0;
  transform: translateY(28px);
  filter: blur(14px);
}
.is-in .rise,
.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);
}

/* Аварийный показ: ставится скриптом, если переход не проигрался.
   Содержимое важнее анимации, поэтому здесь она снимается целиком. */
.reveal-all .rise{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* ============ КНОПКИ (CTA) ============ */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  isolation: isolate;
}
.btn--solid{ background: var(--ink); color: var(--light); }

.btn__fill{
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: var(--origin-start);
  transition: transform 500ms var(--ease);
  z-index: -1;
}
.btn:hover .btn__fill,
.btn:focus-visible .btn__fill{ transform: scaleX(1); }

.btn__label{ position: relative; z-index: 2; transition: color 320ms var(--ease); }
.btn__arrow{
  position: relative;
  z-index: 2;
  width: 20px; height: 20px;
  transform: scaleX(var(--dir));          /* в RTL стрелка смотрит влево */
  transition: transform 520ms var(--ease), color 320ms var(--ease);
}
.btn:hover .btn__label,
.btn:hover .btn__arrow,
.btn:focus-visible .btn__label,
.btn:focus-visible .btn__arrow{ color: var(--ink); }
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow{ transform: scaleX(var(--dir)) translateX(6px); }

.reassure{
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-55);
  max-width: 36ch;
  text-wrap: balance;
}

/* ============ ШАПКА ============ */
/* Держится наверху всё время: каталог длинный, и возвращаться
   к навигации прокруткой было бы мучением. */
.topbar{
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: clamp(16px, 2.4vw, 30px) var(--pad);
  transition: background-color 320ms var(--ease),
              padding 320ms var(--ease),
              box-shadow 320ms var(--ease);
}

/* На первом экране шапка лежит поверх героя без фона; как только
   страница тронулась — подкладываем фон, иначе текст сольётся с фото. */
.topbar.is-stuck{
  background: var(--paper);
  padding-block: clamp(10px, 1.4vw, 16px);
  box-shadow: 0 1px 0 var(--ink-08);
}
.topbar.is-stuck .brand img{ height: 24px; }

/* якоря не должны прятаться под закреплённой шапкой */
:target{ scroll-margin-top: 96px; }
#catalog, #quality, #contact, #order{ scroll-margin-top: 88px; }

.topbar__end{
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 32px);
}

.brand{ display: flex; align-items: center; gap: 12px; }
/* эмблема вытянутая (284 × 110), поэтому задаём только высоту */
.brand img{
  width: auto; height: 30px;
  transition: height 320ms var(--ease);
}
.brand__word{
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.topnav{ display: flex; gap: clamp(18px, 2.4vw, 36px); }
.topnav a{
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: var(--ink-70);
  transition: color 320ms var(--ease);
}
.topnav a::after{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 8px;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: var(--origin-start);
  transition: transform 500ms var(--ease);
}
.topnav a:hover{ color: var(--ink); }
.topnav a:hover::after{ transform: scaleX(1); }

/* --- закреплённая кнопка «Заказ»: едет вместе с шапкой по всем страницам --- */

/* --- переключатель языка --- */
.langs{
  display: flex;
  align-items: center;
  gap: 2px;
}
.lang{
  position: relative;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--ink-55);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color 320ms var(--ease);
}
.lang::after{
  content: "";
  position: absolute;
  inset-inline: 10px;
  bottom: 9px;
  height: 2px;
  background: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: var(--origin-start);
  transition: transform 500ms var(--ease);
}
.lang:hover{ color: var(--ink); }
.lang.is-active{ color: var(--ink); }
.lang.is-active::after{ transform: scaleX(1); }

/* --- смена языка: вся страница мягко растворяется в новую версию ---
   Иврит переключает ещё и dir на rtl, то есть вёрстка зеркалится —
   единый кросс-фейд снимка «до/после» прячет этот скачок вместо того,
   чтобы дёргать layout на глазах. JS оборачивает apply() в
   startViewTransition только когда это не первая загрузка страницы
   и prefers-reduced-motion не запрещает анимации (см. common.js). */
::view-transition-group(root){
  animation-duration: 420ms;
  animation-timing-function: var(--ease);
}
::view-transition-old(root){
  animation: bb-lang-out 420ms var(--ease) both;
}
::view-transition-new(root){
  animation: bb-lang-in 420ms var(--ease) both;
}
@keyframes bb-lang-out{
  to{ opacity: 0; transform: scale(.985); filter: blur(3px); }
}
@keyframes bb-lang-in{
  from{ opacity: 0; transform: scale(1.012); filter: blur(3px); }
}

/* --- переход между страницами -------------------------------------
   Тот же снимок «до/после», но без размытия: здесь кадр во весь экран,
   и фильтр по нему считается каждый кадр — именно он делал переход
   вязким. Осталось то, что композитор тянет даром: прозрачность и сдвиг.
   Страница уходит в ту сторону, откуда пришла новая, — вперёд против
   чтения, назад по чтению; в иврите знак переворачивает --dir.
   Атрибут data-nav ставит common.js на событии pagereveal. */
html[data-nav]::view-transition-group(root){
  animation-duration: 380ms;
}
html[data-nav]::view-transition-old(root){
  animation: bb-page-out 220ms var(--ease) both;
}
html[data-nav]::view-transition-new(root){
  animation: bb-page-in 380ms var(--ease) both;
}
html[data-nav="back"]::view-transition-old(root){ animation-name: bb-page-out-back; }
html[data-nav="back"]::view-transition-new(root){ animation-name: bb-page-in-back; }

@keyframes bb-page-out{
  to{ opacity: 0; transform: translateX(calc(var(--dir) * -20px)); }
}
@keyframes bb-page-in{
  from{ opacity: 0; transform: translateX(calc(var(--dir) * 28px)); }
}
@keyframes bb-page-out-back{
  to{ opacity: 0; transform: translateX(calc(var(--dir) * 20px)); }
}
@keyframes bb-page-in-back{
  from{ opacity: 0; transform: translateX(calc(var(--dir) * -28px)); }
}

/* Общий элемент двух страниц (MOT-04, одна фишка на страницу): фото
   набора и название серии не участвуют в перелистывании, а переезжают
   на новое место сами. Имена расставляет BB.morph — по клику на
   карточку и при загрузке страницы, куда этот элемент приезжает. */
::view-transition-group(product-photo),
::view-transition-group(series-title){
  animation-duration: 520ms;
  animation-timing-function: var(--ease);
}
::view-transition-old(product-photo),
::view-transition-new(product-photo){
  /* карточка и страница набора кадрируют снимок по-разному: без contain
     фотографию растягивало бы под чужую пропорцию */
  height: 100%;
  object-fit: contain;
  animation-duration: 520ms;
}

.burger{
  display: none;
  width: 48px; height: 48px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.burger span{
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform 400ms var(--ease), opacity 320ms var(--ease);
}
.burger[aria-expanded="true"] span:first-child{ transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform: translateY(-3.75px) rotate(-45deg); }

.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 19;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  /* сверху — место под шапку, снизу — под полосу Safari */
  padding: calc(88px + env(safe-area-inset-top)) var(--pad) calc(var(--s4) + env(safe-area-inset-bottom));
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu[hidden]{ display: none; }
.mm__nav{ display: flex; flex-direction: column; }
.mm__nav a{
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3.4rem);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
  padding: 10px 0;
  min-height: 44px;
  border-bottom: 1px solid var(--ink-08);
}

/* --- поиск по каталогу --- */
.mm__search{ position: relative; }
.mm__search > svg{
  position: absolute;
  inset-inline-start: 14px; top: 14px;
  width: 20px; height: 20px;
  color: var(--ink-55);
  pointer-events: none;
}
.mm__search input{
  width: 100%;
  height: 48px;
  padding-inline: 44px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ink-14);
  font: inherit;
  font-size: 16px; /* меньше 16px — iOS приближает страницу при фокусе */
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.mm__search input:focus{ outline: none; box-shadow: inset 0 0 0 1.5px var(--accent-deep); }
.mm__results{
  list-style: none;
  margin: var(--s1) 0 0;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ink-08);
}
.mm__results[hidden]{ display: none; }
.mm__hit{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
}
.mm__hit:active, .mm__hit:focus-visible{ background: var(--ink-08); }
.mm__thumb{
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
  display: grid; place-items: center;
}
.mm__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.mm__thumb img.is-logo{ width: 70%; height: auto; object-fit: contain; opacity: .5; }
.mm__hit-text{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mm__hit-text b{ font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm__hit-text small{ font-size: 12px; color: var(--ink-55); }
.mm__price{ flex: 0 0 auto; font-weight: 600; font-size: 14px; color: var(--accent-deep); }
.mm__empty{ padding: 12px; font-size: 14px; color: var(--ink-55); }

/* --- серии, факты, связь, сноски --- */
.mm__extra{ display: flex; flex-direction: column; gap: var(--s4); }
.mm__label{
  margin: 0 0 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .19em;
  color: var(--ink-55);
}
.mm__series{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--pad));
  padding-inline: var(--pad);
}
.mm__series::-webkit-scrollbar{ display: none; }
.mm__chip{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding-block: 0;
  padding-inline: 16px 8px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--ink-14);
  font-size: 14px;
  white-space: nowrap;
}
.mm__chip small{
  display: grid; place-items: center;
  min-width: 24px; height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--light);
  font-size: 11px;
  font-weight: 600;
}
.mm__chip:active{ box-shadow: inset 0 0 0 1.5px var(--accent-deep); }
.mm__facts{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ink-08);
  box-shadow: inset 0 0 0 1px var(--ink-08);
}
.mm__fact{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: var(--surface);
}
.mm__fact b{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 6vw, 1.9rem);
  line-height: 1;
  color: var(--accent-deep);
  white-space: nowrap;
}
.mm__fact span{ font-size: 13px; line-height: 1.35; color: var(--ink-70); }
.mm__contact{ display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.mm__contact .social svg{ width: 20px; height: 20px; }
.mm__notes{
  list-style: none;
  margin: 0; padding: var(--s3) 0 0;
  border-top: 1px solid var(--ink-08);
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-55);
}
.mm__notes a{ color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ============ ГЕРОЙ (Scheme A) ============ */
.hero{
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  display: flex;
}

/* ============ ВИТРИНА СЕРИЙ (карусель первого экрана) ============
   Одна серия на слайд — своя сцена, своя надпись, модель из каталога.
   27.09 по образцу заказчика: на компьютере текст слева, слайды справа,
   точки внизу по центру; на телефоне текст сверху, слайд под ним.
   Надписи серий набраны своими шрифтами, как логотипы линеек, —
   отступление от TYP-02/03 ради образа; грузятся только их буквы. */
.hero--show{
  height: 100svh;
  min-height: 620px;
  align-items: center;
  background: var(--ink);
  color: var(--light);
}
.hero--show .hero__point{ color: var(--light-70); }
.hero--show .hero__point-icon{ color: var(--accent); }
.hero--show .btn--solid{ background: var(--accent); color: var(--ink); }
.hero--show .btn__fill{ background: var(--light); }

.show{
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
}
.show__track{ position: absolute; inset: 0; }
/* сцена уходит в темноту к тексту: слева читается заголовок, справа живёт слайд */
.show::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(29,25,21,.92) 28%, rgba(29,25,21,.35) 48%, transparent 62%);
}
[dir="rtl"] .show::after{ transform: scaleX(-1); }

/* Слайды лежат стопкой; JS двигает только входящий и уходящий.
   Неактивные ждут за краем по ходу чтения (в иврите — слева). */
.slide{
  position: absolute;
  inset: 0;
  display: grid;
  /* первая колонка пустая — над ней лежит текст героя */
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  /* модель крупная, почти до краёв сцены: набор должен выглядеть большим */
  padding: clamp(76px, 10vh, 100px) clamp(8px, 1.5vw, 24px) clamp(56px, 8vh, 80px) var(--pad);
  column-gap: 0;
  transform: translateX(calc(100% * var(--dir)));
  transition: transform 900ms var(--ease);
  overflow: hidden;
  /* слайд — отдельный слой: при сдвиге браузер двигает готовую картинку,
     а не перерисовывает градиенты сцены на каждом кадре */
  will-change: transform;
  contain: layout paint;
  backface-visibility: hidden;
}
.slide.is-active{ transform: none; }
.slide.no-anim{ transition: none; }

.slide__scene{ position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.slide__scene::before,
.slide__scene::after{ content: ""; position: absolute; inset: 0; }
/* в иврите модель справа — свет и лучи сцены переезжают вместе с ней */
[dir="rtl"] .slide__scene{ transform: scaleX(-1); }

.slide__model{
  grid-column: 2;
  grid-row: 1;
  position: relative;
  margin: 0;
  height: 100%;
  min-height: 0;
  /* низ модели отдан надписи серии — она ложится поверх, как на постере */
  padding-bottom: clamp(16px, 4vh, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide__model img{
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* контактная тень: модель стоит на полу сцены, а не парит */
.slide__model::after{
  content: "";
  position: absolute;
  z-index: 0;
  left: 10%; right: 10%;
  bottom: var(--floor, 6%);
  height: 70px;
  background: radial-gradient(closest-side, rgba(0,0,0,.7), transparent 65%);
  filter: blur(18px);
  transform: scaleY(.35);
}

.slide__word{
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: center;
  position: relative;
  z-index: 2;
  margin: 0;
  line-height: .9;
  white-space: nowrap;
  font-size: clamp(3rem, 6.6vw, 7.4rem);
}
/* Подписи под слайдом нет, как на образце заказчика: весь слайд —
   ссылка на серию. Название набора остаётся в aria-label слайда. */
.slide__foot{ grid-column: 2; grid-row: 1; }
.slide__caption{ display: none; }
.slide__cta{
  position: absolute;
  inset: 0;
  z-index: 3;
  color: transparent;
  font-size: 0;
}
.slide__cta svg{ display: none; }
.slide__cta:focus-visible{ outline: 2px solid var(--accent); outline-offset: -8px; }

/* вход содержимого при каждой смене слайда: модель, надпись, подпись (MOT-01/02) */
.slide__model img,
.slide__word,
.slide__foot{
  opacity: 0;
  transition: opacity 900ms var(--ease), filter 900ms var(--ease), transform 900ms var(--ease);
}
/* Модель проявляется без размытия: blur и тень на большой картинке
   пересчитывались каждый кадр, и смена слайда дёргалась.
   Размытие входа (MOT-01) осталось у надписи и подписи. */
.slide__model img{
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.45));
  transform: translateX(calc(-6% * var(--dir))) scale(.96);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  will-change: opacity, transform;
}
.slide__word{ filter: blur(8px); transform: translateY(24px); will-change: opacity, filter, transform; }
.slide__foot{ filter: blur(8px); transform: translateY(16px); will-change: opacity, filter, transform; }
.slide.is-active .slide__model img{
  opacity: 1;
  transform: none;
  transition-delay: 250ms;
}
.slide.is-active .slide__word{ opacity: 1; filter: blur(0); transform: none; transition-delay: 420ms; }
.slide.is-active .slide__foot{ opacity: 1; filter: blur(0); transform: none; transition-delay: 560ms; }

/* ---- Technic: ночной асфальт, синий отсвет, полосы скорости ---- */
.slide--technic .slide__scene{
  background:
    radial-gradient(55% 40% at 28% 78%, rgba(40,140,255,.38), transparent 70%),
    linear-gradient(180deg, #080b12 0%, #111925 62%, #1a2331 62.3%, #0a0e15 100%);
}
.slide--technic .slide__scene::before{
  background: repeating-linear-gradient(180deg,
      transparent 0 22px, rgba(160,200,255,.06) 22px 23px, transparent 23px 57px);
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 45%, #000 80%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0%, #000 45%, #000 80%, transparent 100%);
}
.slide--technic .slide__scene::after{
  top: auto;
  bottom: 22%;
  height: 2px;
  inset-inline: -420px;
  background: repeating-linear-gradient(90deg,
      transparent 0 140px, rgba(255,255,255,.14) 140px 260px, transparent 260px 420px);
  animation: show-road 1.4s linear infinite;
  will-change: transform;
}
.slide--technic .slide__model{ --floor: 14%; }
.slide--technic .slide__word{
  font-family: 'Russo One', var(--font-display);
  font-size: clamp(3rem, 6.6vw, 7.4rem);
  letter-spacing: -.02em;
  padding-inline-end: .12em;
  background: linear-gradient(180deg, #ffffff 0%, #b8c9da 46%, #3d5068 50%, #9fb4ca 72%, #eaf1f8 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  transform: skewX(-10deg) translateY(24px);
}
.slide--technic.is-active .slide__word{ transform: skewX(-10deg); }

/* ---- Architecture: закат над городом, тонкая сетка чертежа ---- */
.slide--architecture .slide__scene{
  background:
    radial-gradient(30% 45% at 30% 72%, rgba(255,214,150,.5), transparent 70%),
    linear-gradient(180deg, #221d2b 0%, #4a3440 34%, #9a5a45 64%, #d99557 82%, #2a1f1a 82.2%, #1a1411 100%);
}
.slide--architecture .slide__scene::before{
  background:
    repeating-linear-gradient(90deg, rgba(255,240,220,.06) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(180deg, rgba(255,240,220,.06) 0 1px, transparent 1px 56px);
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 80%);
          mask: linear-gradient(180deg, #000 0%, transparent 80%);
}
.slide--architecture .slide__model{ --floor: 12%; }
.slide--architecture .slide__word{
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.8rem, 6.6vw, 7.4rem);
  letter-spacing: -.03em;
  color: #fbeedd;
}

/* ---- Marvel & DC: комиксовая синева, растр точками, жёлтые лучи ---- */
.slide--marvel .slide__scene{
  background:
    radial-gradient(45% 60% at 28% 55%, rgba(255,210,80,.26), transparent 70%),
    linear-gradient(160deg, #1b2f78 0%, #0f1c4d 55%, #081033 100%);
}
.slide--marvel .slide__scene::before{
  background: repeating-conic-gradient(from 0deg at 28% 55%,
      rgba(255,214,90,.13) 0deg 5deg, transparent 5deg 15deg);
}
.slide--marvel .slide__scene::after{
  background: radial-gradient(circle, rgba(0,0,0,.35) 1.6px, transparent 2.2px) 0 0 / 11px 11px;
  -webkit-mask: linear-gradient(115deg, transparent 30%, #000 100%);
          mask: linear-gradient(115deg, transparent 30%, #000 100%);
}
.slide--marvel .slide__model{ --floor: 1%; }
.slide--marvel .slide__word{
  font-family: 'Bangers', var(--font-display);
  font-size: clamp(2.8rem, 6vw, 6.8rem);
  letter-spacing: .01em;
  color: #ffd23f;
  -webkit-text-stroke: 2px #0b0b12;
  text-shadow: 5px 5px 0 #d7261e, 9px 9px 0 #0b0b12;
  transform: rotate(-4deg) translateY(24px);
}
.slide--marvel.is-active .slide__word{ transform: rotate(-4deg); }

/* ---- Star Wars: глубокий космос, звёзды, край планеты ---- */
.slide--starwars .slide__scene{
  background:
    radial-gradient(circle at 8% 150%, #0b0d18 0 38%, rgba(255,150,70,.5) 38.3%, rgba(255,150,70,.1) 40%, transparent 48%),
    radial-gradient(40% 50% at 70% 30%, rgba(60,120,140,.16), transparent 70%),
    #03040a;
}
.slide--starwars .slide__scene::before{
  background:
    radial-gradient(1px 1px at 10px 20px, #fff, transparent),
    radial-gradient(1px 1px at 90px 140px, rgba(255,255,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 160px 60px, #fff, transparent),
    radial-gradient(1px 1px at 220px 190px, rgba(255,255,255,.7), transparent);
  background-size: 250px 230px;
}
.slide--starwars .slide__scene::after{
  background:
    radial-gradient(1px 1px at 40px 80px, rgba(255,255,255,.9), transparent),
    radial-gradient(2px 2px at 300px 30px, #fff, transparent),
    radial-gradient(1px 1px at 190px 260px, rgba(255,255,255,.6), transparent);
  background-size: 370px 310px;
  animation: show-twinkle 4s var(--ease) infinite alternate;
}
/* корабль висит в космосе — вместо тени на полу отсвет двигателей за кормой */
.slide--starwars .slide__model::after{
  left: auto; right: -2%;
  top: 22%; bottom: auto;
  width: 22%; height: 110px;
  background: radial-gradient(closest-side, rgba(120,190,255,.5), transparent 70%);
  transform: none;
}
[dir="rtl"] .slide--starwars .slide__model::after{ right: auto; left: -2%; }
.slide--starwars .slide__word{
  font-family: 'Orbitron', var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4.4vw, 5rem);
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 2px #f2cf5b;
  text-shadow: 0 0 40px rgba(242,207,91,.25);
}

@keyframes show-road{ to{ transform: translateX(calc(-420px * var(--dir))); } }
/* фоновые анимации спрятанных слайдов не крутятся впустую */
.slide:not(.is-active) .slide__scene::before,
.slide:not(.is-active) .slide__scene::after{ animation-play-state: paused; }
@keyframes show-twinkle{ from{ opacity: .35; } to{ opacity: 1; } }

/* ---- точки-переключатели ---- */
/* Точки вместо полосок, как на образце заказчика: светлые, текущая — золотая.
   Таймер слайда живёт в невидимом <i>: JS по-прежнему ловит его animationend. */
.show__bars{
  position: absolute;
  z-index: 4;
  bottom: clamp(16px, 4vh, 36px);
  left: 50%;
  translate: -50% 0;
  display: flex;
  gap: 4px;
}
.show__bar{
  position: relative;
  width: 32px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.show__bar::before{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--light);
  transition: background-color 320ms var(--ease), scale 320ms var(--ease);
}
.show__bar:hover::before{ scale: 1.15; }
.show__bar.is-active::before{ background: var(--accent); }
.show__bar:focus-visible{ outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 50%; }
.show__bar i{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0);
}
/* Полоска — таймер слайда: заполнилась — слайд сменился (JS ловит animationend).
   Таймер должен показывать время честно, поэтому идёт равномерно —
   отступление от MOT-03, как у бегущей строки. */
.show__bar.is-active i{ animation: show-timer var(--show-time, 6500ms) linear forwards; }
/* Пауза только пока палец держит слайд и пока по карусели ходят с клавиатуры.
   Не по :hover и :focus-within: после клика по стрелке фокус оставался
   на кнопке (а на телефоне залипал :hover), и карусель вставала навсегда. */
.show:has(:focus-visible) .show__bar.is-active i,
.show.is-paused .show__bar.is-active i{ animation-play-state: paused; }
.show--static .show__bar.is-active i{ animation: none; transform: none; }
/* scaleX, а не width: ширина пересчитывала раскладку каждый кадр,
   и полоска ползла рывками */
@keyframes show-timer{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }

/* ---- текст слева: где человек оказался и что здесь купить ---- */
.hero--show .hero__content{
  align-self: center;
  width: min(41%, 620px);
  max-width: none;
  padding-block: clamp(96px, 13vh, 128px) clamp(72px, 11vh, 104px);
}
/* 27.09 по просьбе заказчика: «Аналоги» / «коллекционных наборов» —
   вторая строка не рвётся, так заголовок читается как одна мысль */
.hero--show h1{
  font-size: clamp(2.4rem, 3.6vw, 4.2rem);
  max-width: none;
}
.hero--show h1 .nowrap{ white-space: nowrap; }
/* пункты крупнее и светлее: рядом с крупным заголовком 15 px терялись */
.hero--show .hero__points{ gap: 12px; }
.hero--show .hero__point{
  max-width: none;
  font-size: clamp(17px, 1.3vw, 20px);
  color: rgba(246,241,232,.86);
}
.hero--show .hero__point-icon{ width: 20px; height: 20px; margin-top: .2em; }
.hero--show .hero__actions{ margin-top: 0; }

/* Шапка поверх тёмного героя: светлая, пока страница не тронулась
   и пока не открыто мобильное меню (оно на светлом фоне). */
.topbar--on-dark:not(.is-stuck){ color: var(--light); }
.topbar--on-dark:not(.is-stuck) .topnav a{ color: var(--light-70); }
.topbar--on-dark:not(.is-stuck) .topnav a:hover{ color: var(--light); }
.topbar--on-dark:not(.is-stuck) .topnav a::after{ background: var(--light); }
.topbar--on-dark:not(.is-stuck) .lang{ color: var(--light-55); }
.topbar--on-dark:not(.is-stuck) .lang:hover,
.topbar--on-dark:not(.is-stuck) .lang.is-active{ color: var(--light); }
.topbar--on-dark:not(.is-stuck) .lang::after{ background: var(--accent); }
.topbar--on-dark:not(.is-stuck) .burger span{ background: var(--light); }
/* меню прокручивается — шапка над ним не должна просвечивать */
body:has(.mobile-menu:not([hidden])) .topbar{ background: var(--paper); box-shadow: 0 1px 0 var(--ink-08); }
body:has(.mobile-menu:not([hidden])) .topbar--on-dark{ color: var(--ink); }
body:has(.mobile-menu:not([hidden])) .topbar--on-dark .lang{ color: var(--ink-55); }
body:has(.mobile-menu:not([hidden])) .topbar--on-dark .lang.is-active{ color: var(--ink); }
body:has(.mobile-menu:not([hidden])) .topbar--on-dark .burger span{ background: var(--ink); }

.hero__content{
  position: relative;
  z-index: 3;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  max-width: min(56ch, 48vw);
  padding-block: 0 clamp(64px, 12vh, 128px);
  padding-inline-start: var(--pad);
}
.hero__points{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.hero__point{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.5;
  text-wrap: balance;
}
.hero__point-icon{
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
}
.hero__actions{
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s1);
}

/* ============ ДЕКОР СВЕТЛЫХ СЕКЦИЙ ============
   Один слой под содержимым: тонкие золотые веера ар-деко в двух углах.
   В иврите слой отражается, веер остаётся в «конечном» углу.
   Размытых клякс здесь больше нет — заказчик забраковал их 20.09;
   файлы assets/deco/blob-*.png не используются. */
.deco{
  position: relative;
  isolation: isolate;
}
.deco::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
}
.deco::after{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260'><g fill='none' stroke='%23C9A66B' stroke-width='1'><circle cx='260' cy='0' r='70'/><circle cx='260' cy='0' r='110'/><circle cx='260' cy='0' r='150'/><circle cx='260' cy='0' r='190'/><circle cx='260' cy='0' r='230'/><line x1='191.1' y1='12.2' x2='33.5' y2='39.9'/><line x1='196.6' y1='29.6' x2='51.5' y2='97.2'/><line x1='206.4' y1='45' x2='83.8' y2='147.8'/><line x1='219.8' y1='57.3' x2='128.1' y2='188.4'/><line x1='236.1' y1='65.8' x2='181.3' y2='216.1'/><line x1='253.9' y1='69.7' x2='240' y2='229.1'/></g><circle cx='260' cy='0' r='40' fill='none' stroke='%23C9A66B' stroke-width='3'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260'><g fill='none' stroke='%23C9A66B' stroke-width='1'><circle cx='0' cy='260' r='70'/><circle cx='0' cy='260' r='110'/><circle cx='0' cy='260' r='150'/><circle cx='0' cy='260' r='190'/><circle cx='0' cy='260' r='230'/><line x1='68.9' y1='247.8' x2='226.5' y2='220.1'/><line x1='63.4' y1='230.4' x2='208.5' y2='162.8'/><line x1='53.6' y1='215' x2='176.2' y2='112.2'/><line x1='40.2' y1='202.7' x2='131.9' y2='71.6'/><line x1='23.9' y1='194.2' x2='78.7' y2='43.9'/><line x1='6.1' y1='190.3' x2='20' y2='30.9'/></g><circle cx='0' cy='260' r='40' fill='none' stroke='%23C9A66B' stroke-width='3'/></svg>");
  background-size: clamp(160px, 20vw, 300px) auto, clamp(160px, 20vw, 300px) auto;
  background-position: right top, left bottom;
}
[dir="rtl"] .deco::after{ transform: scaleX(-1); }

/* золотой разделитель с ромбом под заголовком секции */
.section-head::after,
.series-head::after,
.related h2::after{
  content: "";
  display: block;
  height: 12px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M6 .5 11.5 6 6 11.5.5 6Z' fill='%23C9A66B'/></svg>") left center / 12px 12px no-repeat,
    linear-gradient(to right, var(--accent), rgba(201,166,107,0)) 20px center / calc(100% - 20px) 1px no-repeat;
}
.section-head{ row-gap: var(--s3); }
.section-head::after{ flex-basis: 100%; }
.series-head::after{ align-self: stretch; margin-top: var(--s1); }
.related h2::after{ max-width: 360px; margin-top: var(--s3); }
[dir="rtl"] .section-head::after,
[dir="rtl"] .series-head::after,
[dir="rtl"] .related h2::after{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M6 .5 11.5 6 6 11.5.5 6Z' fill='%23C9A66B'/></svg>") right center / 12px 12px no-repeat,
    linear-gradient(to left, var(--accent), rgba(201,166,107,0)) left center / calc(100% - 20px) 1px no-repeat;
}

/* тонкая золотая рамка-паспарту внутри карточек серий */
.series-card{
  outline: 1px solid rgba(201,166,107,.42);
  outline-offset: -9px;
  transition: outline-color 500ms var(--ease), outline-offset 500ms var(--ease);
}
.series-card:hover{
  outline-color: var(--accent);
  outline-offset: -6px;
}

.section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.section-head h2{ margin-top: var(--s2); }
.section-head__note{
  max-width: 42ch;
  color: var(--ink-70);
  font-size: 15px;
  text-wrap: balance;
}

.filters{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  padding-bottom: var(--s4);
}
.chip{
  min-height: 44px;
  padding: 11px 22px;
  border: 1px solid var(--ink-14);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-70);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 320ms var(--ease),
    border-color 320ms var(--ease),
    color 320ms var(--ease);
}
.chip:hover{ border-color: var(--ink); color: var(--ink); }
.chip.is-active{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--light);
}

.grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.6vw, 24px);
}

/* Карточка витрины, как в интернет-магазине (образец заказчика 27.09):
   белая плашка со скруглением, фото сверху, под ним серия, название,
   детали и строка «цена — круглая кнопка». */
.card{
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(29,25,21,.06), 0 6px 18px rgba(29,25,21,.05);
  transition: box-shadow 420ms var(--ease), translate 420ms var(--ease);
}
.card:hover{
  translate: 0 -4px;
  box-shadow: 0 2px 4px rgba(29,25,21,.06), 0 16px 32px rgba(29,25,21,.12);
}
.card:focus-visible{ outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.card[hidden]{ display: none; }

.card__media{
  position: relative;
  aspect-ratio: 4 / 3;
  /* снимок живёт строго внутри обложки: при приближении край не вылезает */
  overflow: hidden;
  background: #fff;
}
.card__media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 60%;
  transition: transform 820ms var(--ease);
}
.card:hover .card__media img{ transform: scale(1.05); }

.card__badge{
  position: absolute;
  z-index: 1;
  top: 10px;
  inset-inline-start: 10px;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--light);
  font-size: 11px;
  line-height: 1;
  letter-spacing: .02em;
}

/* заглушка, пока у набора нет снимка: приглушённый знак магазина */
.photo-soon{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  height: 100%;
  border: 1px dashed var(--ink-14);
  border-radius: 4px;
  color: var(--ink-55);
  font-size: 13px;
  letter-spacing: .04em;
}
.card__media .photo-soon img,
.series-card__media .photo-soon img,
.photo-soon img{
  width: 38%;
  max-width: 140px;
  height: auto;
  opacity: .35;
  transform: none;
  filter: grayscale(1);
}
.photo-soon--pdp{ min-height: 320px; }

.card__body{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--ink-08);
}
.card__series{
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-55);
}
[dir="rtl"] .card__series{ direction: ltr; text-align: right; }
.card__title{
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.15;
  text-transform: uppercase;
}
/* названия наборов всегда на английском — внутри RTL читаются слева направо */
[dir="rtl"] .card__title{ direction: ltr; text-align: right; }
/* оригинальные названия бывают длиннее строки — этим кегль на ступень ниже */
.card__title--long{ font-size: clamp(14px, 1.1vw, 17px); }

.card__spec{
  font-size: 12px;
  color: var(--ink-55);
  font-variant-numeric: tabular-nums;
}
.card__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1);
  margin-top: auto;
  padding-top: var(--s1);
}
.card__price{
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* цена — всегда «символ валюты, затем число», даже в RTL */
[dir="rtl"] .card__price{ direction: ltr; }
.card__go{
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--light);
  transition: background-color 320ms var(--ease), color 320ms var(--ease);
}
.card__go svg{
  width: 16px; height: 16px;
  transform: scaleX(var(--dir));
}
.card:hover .card__go{ background: var(--accent); color: var(--ink); }

.grid__empty{
  padding-top: var(--s4);
  color: var(--ink-55);
}

/* ============ КАК МЫ ПРОВЕРЯЕМ ============ */
.quality{
  background: var(--ink);
  color: var(--light);
  padding: clamp(72px, 11vw, 168px) var(--pad);
}
.quality .label{ color: var(--accent); }
.quality__head{ max-width: 900px; margin-bottom: var(--s6); }
.quality__head h2{ margin-top: var(--s2); }

.steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s5) var(--s4);
}
.step{
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--light-14);
}
.step__num{
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.step__icon{
  width: 30px; height: 30px;
  color: var(--light-70);
}
.step__title{ font-size: clamp(19px, 1.6vw, 23px); }
.step__text{
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--light-70);
  max-width: 34ch;
  text-wrap: balance;
}

/* ============ ЗАКАЗ ============ */
.form{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
  margin-top: var(--s5);
  max-width: 720px;
}
.field{ display: flex; flex-direction: column; gap: 8px; }
.field--wide{ grid-column: 1 / -1; }
/* ловушка для ботов: прячем обрезкой, а не сдвигом за край —
   сдвиг на −9999px в иврите растягивал страницу вбок */
.field--hp{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.field label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-55);
}
.field input{
  min-height: 52px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--ink-14);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  transition: border-color 320ms var(--ease);
}
.field input::placeholder{ color: var(--ink-55); }
.field input:focus{
  outline: none;
  border-bottom-color: var(--accent-deep);
}
.field input:focus-visible{ outline: none; }

.form__foot{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s2);
}
.form__status{
  grid-column: 1 / -1;
  min-height: 22px;
  font-size: 14px;
  color: var(--ink-70);
}

/* ============ ОКНО ЗАКАЗА ============
   Нативный <dialog> через showModal(): страница под ним недоступна,
   Esc закрывает. Прокрутку страницы снимает класс is-modal на <html>. */
html.is-modal,
html.is-modal body{ overflow: hidden; }

.order-modal{
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.order-modal::backdrop{
  background: rgba(29, 25, 21, .72);
  backdrop-filter: blur(4px);
}
.order-modal[open]{ animation: modal-in 420ms var(--ease) both; }
.order-modal[open]::backdrop{ animation: fade-in 320ms var(--ease) both; }
@keyframes modal-in{
  from{ opacity: 0; transform: translateY(16px) scale(.98); filter: blur(6px); }
  to{ opacity: 1; transform: none; filter: none; }
}
@keyframes fade-in{ from{ opacity: 0; } }

.order-modal__box{
  position: relative;
  padding: clamp(24px, 5vw, 48px);
  outline: 1px solid var(--accent);
  outline-offset: -9px;
}
.order-modal__close{
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink-70);
  cursor: pointer;
  transition: color 320ms var(--ease), transform 320ms var(--ease);
}
.order-modal__close svg{ width: 22px; height: 22px; }
.order-modal__close:hover{ color: var(--ink); transform: rotate(90deg); }

.order-modal__pick{
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: var(--s3);
  align-items: center;
  margin-top: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--ink-14);
}
.order-modal__pick:has(.order-modal__media[hidden]){ grid-template-columns: 1fr; }
.order-modal__media{
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
}
.order-modal__media[hidden]{ display: none; }
.order-modal__media img{
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.order-modal__title{
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.05;
}
.order-modal__price{
  margin-top: var(--s1);
  font-family: var(--font-display);
  font-size: 24px;
}
.order-modal__form{
  grid-template-columns: 1fr;
  margin-top: var(--s4);
}
[dir="rtl"] .order-modal__form input[dir="ltr"]{ text-align: right; }

/* ============ ПОДВАЛ ============
   Светлый: после тёмного блока «Как мы проверяем» полосы идут
   чёрная — белая, и контакты не сливаются с текстом выше. */
.footer{
  background: var(--surface);
  color: var(--ink);
  border-top: 1px solid var(--ink-14);
  padding: clamp(48px, 6vw, 72px) var(--pad) var(--s4);
  display: grid;
  gap: clamp(32px, 4vw, 48px);
}

/* четыре колонки, как на образце: знак и соцсети / каталог / помощь / связь */
.footer__top{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}
.footer__brand{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
}
.footer__brand img{ width: auto; height: 40px; }
.footer__brand p{ max-width: 34ch; font-size: 14px; color: var(--ink-70); line-height: 1.55; }

.footer__col{ display: flex; flex-direction: column; align-items: flex-start; }
.footer__head{
  margin-bottom: var(--s1);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.footer__link{
  display: flex;
  align-items: center;
  min-height: 36px;
  font-size: 14px;
  color: var(--ink-70);
  transition: color 320ms var(--ease);
}
/* телефон и почта остаются LTR внутри RTL-раскладки */
[dir="rtl"] .footer__link[dir="ltr"]{ justify-content: flex-end; }
.footer__link:hover{ color: var(--accent-deep); }

/* Instagram и TikTok — круглыми кнопками под описанием */
.footer__social{ display: flex; gap: var(--s1); }
.social{
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--ink-14);
  color: var(--ink);
  transition: color 320ms var(--ease), box-shadow 320ms var(--ease), transform 320ms var(--ease);
}
.social svg{ width: 18px; height: 18px; fill: currentColor; }
.social:hover,
.social:focus-visible{ color: var(--accent-deep); box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(-2px); }
.footer__text{
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-55);
  max-width: 30ch;
  line-height: 1.55;
}

.footer__bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--ink-14);
}
.footer__legal{
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-55);
  max-width: 72ch;
}
.footer__copy{ font-size: 12px; color: var(--ink-55); }

/* Гарантия и возврат: крупная цифра срока и два коротких блока условий.
   Колонки перекликаются с сеткой подвала выше, чтобы полоса не выглядела чужой. */
.terms{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s3) var(--s4);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--ink-14);
}
.terms__big{
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}
.terms__text{
  margin-top: var(--s1);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 40ch;
}
.terms__sub{ font-size: 14px; font-weight: 600; color: var(--ink); }
.terms__sub + .terms__text{ margin-top: 6px; }
.terms__list{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 52ch;
}
.terms__list li{ position: relative; padding-inline-start: 18px; }
.terms__list li::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .72em;
  width: 8px; height: 2px;
  background: var(--accent-deep);
}
/* условия — под «Каталогом» и «Помощью», порядок возврата — под «Связью» */
.terms__lead + .terms__part{ grid-column: span 2; }
.acc-terms p + p,
.acc-terms .terms__list + p{ margin-top: 10px; }
.acc-terms .terms__list{ margin-top: 6px; }

@media (max-width: 900px){
  .terms{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms__lead{ grid-column: 1 / -1; }
  .terms__lead + .terms__part{ grid-column: auto; }
  .footer__top{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand{ grid-column: 1 / -1; }
}
@media (max-width: 480px){
  .terms{ grid-template-columns: 1fr; }
  .footer__top{ grid-template-columns: 1fr; }
}

/* ============ БЫСТРЫЙ ВЫБОР: КАТЕГОРИИ ============
   Плитка = иконка серии + название + счётчик. Иконки рисуются
   линией 1.5 px, как остальные значки сайта. */
.cats{
  background: var(--paper);
  padding: clamp(64px, 9vw, 128px) var(--pad);
}
.cats h2{ margin-top: var(--s1); }
.cats__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s4);
}

.cat{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 176px;
  padding: var(--s3);
  background: var(--surface);
  color: var(--ink);
  outline: 1px solid rgba(201,166,107,.42);
  outline-offset: -9px;
  box-shadow: 0 1px 2px rgba(29,25,21,.06), 0 8px 24px -12px rgba(29,25,21,.18);
  transition: outline-color 500ms var(--ease), outline-offset 500ms var(--ease),
              transform 500ms var(--ease), box-shadow 500ms var(--ease);
}
.cat:hover,
.cat:focus-visible{
  outline-color: var(--accent);
  outline-offset: -6px;
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(29,25,21,.06), 0 18px 36px -16px rgba(29,25,21,.28);
}

.cat__icon{
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--paper);
  transition: background-color 500ms var(--ease), color 500ms var(--ease);
}
.cat__icon svg,
.cat__arrow{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cat__icon svg{ width: 26px; height: 26px; }
.cat__icon .fill{ fill: currentColor; stroke: none; }
.cat:hover .cat__icon,
.cat:focus-visible .cat__icon{ background: var(--ink); color: var(--accent); }

.cat__arrow{
  position: absolute;
  top: var(--s3);
  inset-inline-end: var(--s3);
  width: 20px; height: 20px;
  color: var(--ink-55);
  transform: scaleX(var(--dir));
  transition: transform 500ms var(--ease), color 500ms var(--ease);
}
.cat:hover .cat__arrow,
.cat:focus-visible .cat__arrow{
  color: var(--accent-deep);
  transform: scaleX(var(--dir)) translate(3px, -3px);
}

.cat__name{
  margin-top: auto;
  padding-top: var(--s3);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
[dir="rtl"] .cat__name{ direction: ltr; }
[lang="he"] .cat__name{ letter-spacing: normal; }
.cat__count{
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-55);
}

/* последняя плитка — ко всей витрине */
.cat--all{
  background: var(--ink);
  color: var(--light);
  outline-color: rgba(201,166,107,.5);
}
.cat--all .cat__arrow{ color: var(--accent); }
.cat__kicker{
  font-size: 12px;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--accent);
}
.cat--all .cat__name{ font-size: clamp(22px, 2.2vw, 32px); }

@media (max-width: 1000px){
  .cats__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .cats__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .cat{ min-height: 148px; padding: var(--s2) 18px 18px; }
  .cat__icon{ width: 42px; height: 42px; }
  .cat__icon svg{ width: 23px; height: 23px; }
  .cat__arrow{ top: 18px; inset-inline-end: 18px; }
  .cat__name{ padding-top: var(--s2); font-size: 17px; }
}

/* =========================================================
   СТРАНИЦА СЕРИИ
   ========================================================= */
/* Светлый фон магазина: белые карточки на нём читаются отдельными плашками */
.page-series{ background: var(--paper); }

.series-head{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  padding: clamp(112px, 14vh, 148px) var(--pad) var(--s3);
}
.series-head h1{
  font-size: clamp(2rem, 4.4vw, 3.8rem);
  line-height: .92;
  letter-spacing: -.03em;
}
[dir="rtl"] .series-head h1{ direction: ltr; text-align: right; }

.series-list{
  padding: 0 var(--pad) clamp(40px, 5vw, 64px);
}

/* строка над сеткой: сколько найдено — слева, доставка — справа */
.series-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
  margin-bottom: var(--s2);
  font-size: 13px;
  color: var(--ink-70);
}
.series-bar b{ font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.series-bar__note{ display: flex; align-items: center; gap: 8px; }
.series-bar__note svg{ width: 18px; height: 18px; color: var(--accent-deep); }

/* «Показано 12 из 36», полоска и кнопка — под сеткой по центру */
.more{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: clamp(32px, 4vw, 48px);
}
.more[hidden]{ display: none; }
.more__text{
  font-size: 13px;
  color: var(--ink-55);
  font-variant-numeric: tabular-nums;
}
.more__track{
  position: relative;
  width: min(240px, 60vw);
  height: 3px;
  border-radius: 3px;
  background: var(--ink-14);
  overflow: hidden;
}
.more__track i{
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: var(--origin-start);
  transition: transform 500ms var(--ease);
}
.more__btn{
  min-height: 44px;
  padding: 0 26px;
  border: 1px solid var(--ink-14);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 320ms var(--ease), background-color 320ms var(--ease);
}
.more__btn:hover{ border-color: var(--ink); }
.more__btn[hidden]{ display: none; }

/* три плашки перед подвалом: проверка, доставка, помощь */
.trust{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
  padding: clamp(32px, 4vw, 44px) var(--pad);
  background: var(--surface);
}
.trust__item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ink-08);
}
.trust__icon{
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(201,166,107,.26);
  color: var(--accent-deep);
}
.trust__icon svg{ width: 22px; height: 22px; }
.trust__title{ font-size: 14px; font-weight: 600; color: var(--ink); }
.trust__text{ margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--ink-55); }

@media (max-width: 900px){
  .trust{ grid-template-columns: 1fr; }
}

/* =========================================================
   СТРАНИЦА НАБОРА
   ========================================================= */

/* фото перелетает из карточки каталога на страницу набора —
   продолжение того же жеста «снять с полки» */
@view-transition{ navigation: auto; }

.page-product{ background: var(--surface-alt); }

.pdp{
  display: grid;
  grid-template-columns: 52fr 48fr;
  align-items: start;
  min-height: 100svh;
}

/* --- левая половина: фотографии --- */
.pdp__media{
  position: sticky;
  top: 0;
  height: 100svh;
  /* колонка сетки не должна раздуваться под ширину ленты миниатюр */
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  /* сверху оставлено место под закреплённую шапку */
  padding: clamp(124px, 15vh, 156px) var(--pad) var(--s4);
}

.pdp__back{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  min-height: 44px;
  font-size: 13px;
  color: var(--ink-55);
  transition: color 320ms var(--ease);
}
.pdp__back-icon{
  width: 18px; height: 18px;
  transform: scaleX(var(--dir));
  transition: transform 520ms var(--ease);
}
.pdp__back:hover{ color: var(--ink); }
.pdp__back:hover .pdp__back-icon{ transform: scaleX(var(--dir)) translateX(-5px); }

/* снимок и полоса миниатюр стоят рядом: миниатюры слева,
   в иврите строка переворачивается сама */
.pdp__stage{
  flex: 1;
  min-height: 0;
  /* без этого лента миниатюр на телефоне растягивает колонку
     своей шириной и страница едет вбок */
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: var(--s2);
}

.pdp__frame{
  position: relative;          /* стрелки и счётчик кладутся поверх снимка */
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- листание снимков --- */
/* Стрелки привязаны логическими свойствами, поэтому в иврите
   меняются местами вместе со всей раскладкой. */
.pdp__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--light-70);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity 320ms var(--ease), background-color 320ms var(--ease);
}
.pdp__nav svg{ width: 22px; height: 22px; }
.pdp__nav--prev{ inset-inline-start: var(--s2); }
.pdp__nav--next{ inset-inline-end: var(--s2); }
/* в иврите стрелки нарисованы в другую сторону, чем стоят */
[dir="rtl"] .pdp__nav svg{ transform: scaleX(-1); }

/* на мышке показываем по наведению на снимок, чтобы не мешали смотреть */
.pdp__stage:hover .pdp__nav,
.pdp__nav:focus-visible{ opacity: 1; }
.pdp__nav:hover{ background: var(--light); }

/* на тач-устройствах наведения нет — держим видимыми всегда */
@media (hover: none){
  .pdp__nav{ opacity: 1; }
}

.pdp__counter{
  position: absolute;
  bottom: var(--s2);
  inset-inline-end: var(--s2);
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--light-70);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-70);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.pdp__counter[hidden],
.pdp__nav[hidden]{ display: none; }
.pdp__frame img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  view-transition-name: product-photo;
}

.pdp__thumbs{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  /* вариантов фона у картины бывает шесть — если не влезли в высоту,
     полоса прокручивается сама, страница при этом стоит на месте */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.thumb{
  width: 72px; height: 72px;
  padding: 6px;
  border: 0;
  background: var(--surface-alt);
  cursor: pointer;
  opacity: .55;
  transition: opacity 320ms var(--ease), outline-color 320ms var(--ease);
  outline: 1px solid transparent;
  outline-offset: -1px;
}
.thumb img{ width: 100%; height: 100%; object-fit: contain; }
.thumb:hover{ opacity: .85; }
.thumb.is-active{ opacity: 1; outline-color: var(--ink); }

/* --- правая половина: описание --- */
.pdp__info{
  padding: clamp(124px, 15vh, 156px) var(--pad) clamp(64px, 9vw, 120px);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-width: 62ch;
}
.pdp__info h1{
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: .92;
  letter-spacing: -.03em;
}

/* серия над названием — ссылка на всю линейку */
.pdp__series{
  position: relative;
  align-self: flex-start;
  transition: color 320ms var(--ease);
}
.pdp__series::after{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: var(--origin-start);
  transition: transform 500ms var(--ease);
}
.pdp__series:hover{ color: var(--ink); }
.pdp__series:hover::after{ transform: scaleX(1); }
/* название набора всегда английское — внутри RTL читается слева направо */
[dir="rtl"] .pdp__info h1{ direction: ltr; text-align: right; }

.pdp__buy{
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s1);
}
.pdp__price{
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.pdp__stock{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-55);
}
.pdp__dot{
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #3E9B52;
}
/* две строки наличия — одна под другой, рядом с ценой */
.pdp__avail{ display: flex; flex-direction: column; gap: 6px; }
.pdp__avail [hidden]{ display: none; }
/* под заказ: едет с фабрики — точка оранжевая, текст темнее, чтобы срок заметили */
.pdp__stock--order{ color: var(--ink-70); }
.pdp__stock--order .pdp__dot{ background: #E08A2C; }

.pdp__actions{
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin: var(--s2) 0 var(--s3);
}

/* Расцветки: плитка = маленькое фото + название + цена.
   Выбранная обведена, как активный снимок в галерее. */
.pdp__colors{ margin: 0 0 var(--s3); }
.pdp__colors[hidden]{ display: none; }
.pdp__colors-label{ font-size: 14px; color: var(--ink-55); }
.pdp__colors-label b{ font-weight: 600; color: var(--ink); }
.swatches{
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 10px;
}
.swatch{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* на узком телефоне плитки ужимаются, но все расцветки остаются в ряд */
  flex: 0 1 92px;
  min-width: 0;
  padding: 6px 6px 8px;
  border: 0;
  border-radius: 10px;
  background: var(--surface-alt);
  box-shadow: inset 0 0 0 1px var(--ink-08);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: box-shadow 320ms var(--ease), transform 320ms var(--ease);
}
.swatch:hover{ transform: translateY(-2px); }
.swatch.is-active{ box-shadow: inset 0 0 0 2px var(--ink); }
.swatch__media{ display: block; width: 100%; height: 60px; overflow: hidden; }
.swatch__media img{ width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.swatch__name{ font-size: 13px; line-height: 1.2; }
.swatch__price{ font-size: 12px; color: var(--ink-55); font-variant-numeric: tabular-nums; }

.pdp__desc{
  color: var(--ink-70);
  max-width: 56ch;
  text-wrap: pretty;
}

/* --- аккордеон: доставка / характеристики / о товаре --- */
.pdp__accordion{
  margin-top: var(--s4);
  border-top: 1px solid var(--ink-08);
}
.acc-item{ border-bottom: 1px solid var(--ink-08); }

.acc-item__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .19em;
  color: var(--ink-55);
  font-family: var(--font-body);
  transition: color 320ms var(--ease);
}
[lang="he"] .acc-item__head{ text-transform: none; letter-spacing: normal; }
.acc-item__head::-webkit-details-marker{ display: none; }
.acc-item__head::marker{ content: ""; }
.acc-item__head:hover{ color: var(--ink); }

.acc-item__chevron{
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 320ms var(--ease);
}
.acc-item__chevron svg{ width: 100%; height: 100%; }
.acc-item[open] > .acc-item__head .acc-item__chevron{ transform: rotate(180deg); }

.acc-item__body{
  padding-bottom: var(--s4);
  color: var(--ink-70);
  max-width: 56ch;
}
/* деталь без родного display:none у <details> его бы не спрятала —
   .specs задаёт свой display:grid с большей специфичностью */
.acc-item:not([open]) > .acc-item__body{ display: none; }

/* --- таблица характеристик --- */
.specs{
  margin: 0;
  display: grid;
  gap: 0;
}
.specs__row{
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: var(--s2);
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-08);
}
.specs__row:first-child{ border-top: 1px solid var(--ink-08); }
.specs__icon{ width: 20px; height: 20px; color: var(--ink-55); }
.specs__key{ font-size: 14px; color: var(--ink-55); margin: 0; }
.specs__val{
  margin: 0;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* --- отзывы --- */
.reviews{
  background: var(--paper);
  padding: clamp(64px, 9vw, 128px) var(--pad);
}
.reviews h2{ margin-bottom: var(--s5); }
.reviews__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 32px);
}
.review{
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.review__media{ aspect-ratio: 4 / 3; overflow: hidden; }
.review__media img{ width: 100%; height: 100%; object-fit: cover; }
.review__body{
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.review__rating{ color: var(--accent-deep); font-size: 14px; letter-spacing: .1em; }
.review__text{ font-size: 15px; color: var(--ink-70); }
.review__who{ font-size: 13px; color: var(--ink-55); margin-top: var(--s1); }

/* --- смотрите также --- */
.related{
  background: var(--surface-alt);
  padding: clamp(64px, 9vw, 128px) var(--pad);
}
.related h2{ margin-bottom: var(--s5); }

/* --- набор не найден --- */
.notfound{
  min-height: 70svh;
  display: flex;
  align-items: center;
  padding: clamp(88px, 14vh, 160px) var(--pad);
}
/* display:flex выше перебивал атрибут hidden — блок «не найдено»
   висел внизу каждой серии и каждого набора */
.notfound[hidden]{ display: none; }
.notfound__inner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  max-width: 48ch;
}
.notfound p{ color: var(--ink-70); }

/* список серий на странице «не найдено» — чтобы она не была тупиком */
.notfound__list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s1);
  margin-top: var(--s1);
}
.notfound__list[hidden]{ display: none; }
.notfound__series{
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--ink-14);
  font-size: 14px;
  line-height: 1.4;
  transition: border-color 320ms var(--ease), background-color 320ms var(--ease);
}
.notfound__series:hover{
  border-color: var(--accent);
  background: var(--surface);
}

/* ============ АДАПТИВ ============ */
@media (max-width: 1100px){
  .card{ grid-column: span 4; }
  .series-card,
  .series-card--wide{ grid-column: span 4; }
}

@media (max-width: 760px){
  /* на телефоне две карточки в ряд, как в магазинных приложениях */
  .card{ grid-column: span 6; }
  .series-card,
  .series-card--wide{ grid-column: span 6; }
}

@media (max-width: 900px){
  /* на телефоне фото не липнет, а листается вместе со страницей */
  .pdp{ grid-template-columns: 1fr; }
  .pdp__media{
    position: static;
    height: auto;
    padding: clamp(104px, 14vh, 124px) var(--pad) var(--s3);
  }
  /* на телефоне миниатюры уходят под снимок горизонтальной лентой */
  .pdp__stage{ flex-direction: column; }
  .pdp__frame{ order: 1; aspect-ratio: 1 / 1; }
  .pdp__thumbs{
    order: 2;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
  }
  .thumb{ flex: 0 0 auto; }
  .pdp__info{
    padding-top: var(--s4);
    max-width: none;
  }
}

@media (max-width: 900px){
  .topnav{ display: none; }
  /* На телефоне шапка закреплена и цельная: одна высота до и после
     прокрутки (без скачка), а полоса над ней под строкой Safari залита
     тем же фоном — карточки не просвечивают выше шапки. */
  .topbar,
  .topbar.is-stuck{ padding-block: 12px; }
  .topbar .brand img,
  .topbar.is-stuck .brand img{ height: 26px; }
  .topbar.is-stuck::before,
  body:has(.mobile-menu:not([hidden])) .topbar::before{
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 100%;
    height: 200px;
    background: var(--paper);
  }
  /* круглая кнопка меню, как на образце заказчика */
  .burger{
    display: flex;
    width: 44px; height: 44px;
    padding: 0 13px;
    border-radius: 50%;
    color: inherit;
    box-shadow: inset 0 0 0 1.5px currentColor;
  }

  .hero{
    height: auto;
    min-height: 100svh;
    overflow: visible;
    flex-direction: column;
    padding-top: clamp(96px, 16vh, 140px);
    padding-bottom: var(--s4);
  }
  .hero__content{
    align-self: stretch;
    max-width: none;
    padding-block: 0;
    padding-inline: var(--pad);
  }
  /* телефон: текст сверху, под ним слайд — модель, под моделью надпись серии */
  .hero--show{ height: auto; padding: 0; align-items: stretch; }
  .hero--show .hero__content{
    width: auto;
    padding-block: clamp(92px, 13vh, 116px) var(--s3);
  }
  .hero--show h1{ font-size: clamp(1.9rem, 8.4vw, 3.4rem); }
  .hero--show .hero__point{ font-size: 16px; }
  .hero--show .hero__actions{ align-items: flex-start; }
  .show{
    order: 2;
    position: relative;
    inset: auto;
    flex: 1;
    min-height: clamp(360px, 56svh, 540px);
  }
  /* сцена выплывает из тёмного фона текста, а не начинается резкой границей */
  .show::after{ background: linear-gradient(180deg, var(--ink) 0%, transparent 28%); }
  [dir="rtl"] .show::after{ transform: none; }
  .slide{
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: var(--s1) 8px 56px;
    row-gap: var(--s1);
  }
  .slide__model{ grid-column: 1; grid-row: 1; padding-bottom: 0; }
  .slide__word{ grid-column: 1; grid-row: 2; font-size: clamp(2.6rem, 13vw, 5rem); }
  .slide--technic .slide__word{ font-size: clamp(2.6rem, 13vw, 5rem); }
  .slide--architecture .slide__word{ font-size: clamp(2.4rem, 12vw, 4.6rem); }
  .slide--marvel .slide__word{ font-size: clamp(2.4rem, 11.5vw, 4.4rem); }
  .slide--starwars .slide__word{ font-size: clamp(1.9rem, 8.6vw, 3.4rem); }
  .slide__foot{ grid-column: 1; grid-row: 1 / span 2; }
  .show__bars{ bottom: 8px; }
  h1{ font-size: clamp(2.3rem, 10vw, 4rem); }
}

@media (max-width: 640px){
  .series-card,
  .series-card--wide{ grid-column: span 6; }
  .series-card__media,
  .series-card--wide .series-card__media{ aspect-ratio: 1 / 1; }

  .form{ grid-template-columns: 1fr; }
  .hero__actions{ align-items: flex-start; flex-direction: column; gap: var(--s2); }
  .reassure{ max-width: none; }

  .topbar__end{ gap: var(--s1); }
  /* все три языка остаются в шапке — эмблема и слово чуть меньше */
  .brand{ gap: 8px; }
  .brand img{ height: 24px; }
  .brand__word{ font-size: 18px; letter-spacing: .1em; }
  .lang{ padding: 8px 6px; font-size: 12px; }
  .lang::after{ inset-inline: 6px; }

  /* на телефоне подпись группы встаёт над кнопками */
  .filters__group{ grid-template-columns: 1fr; gap: var(--s1); }
  .filters__label{ line-height: 1.8; }
}

/* на узких экранах словесный логотип уступает место переключателю */
@media (max-width: 359px){
  .brand__word{ display: none; }
}

/* ============ MOT-05 ============ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  @view-transition{ navigation: none; }
  .rise{ opacity: 1; transform: none; filter: none; }
  .is-in .rise,
  .rise.is-in{ transition-delay: 0ms !important; transition-duration: 1ms !important; }
  *, *::before, *::after{
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}