/* Laminam store — витрина. Премиальный минимализм: графит, камень, бронза. */
:root {
  --ink: #17181a;
  --graphite: #23252a;
  --stone-100: #f6f4f1;
  --stone-200: #ece8e2;
  --stone-300: #d8d2c8;
  --sand: #faf9f7;
  --bronze: #a8926b;
  --bronze-dark: #8a774f;
  --line: #e2ddd5;
  --muted: #6f6a63;
  --ok: #2f7d4f;
  --low: #b8862b;
  --out: #b23b3b;
  --shadow: 0 12px 40px rgba(20,18,15,.10);
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Появление блоков при скролле (мягкий подъём + проявление, со стаггером). Класс reveal-on ставит JS. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .reveal { opacity: 0; transform: translateY(28px);
    transition: opacity .75s var(--ease), transform .75s var(--ease); }
  .reveal-on .reveal.is-visible { opacity: 1; transform: none; }
}
body {
  margin: 0; font-family: var(--font-sans); color: var(--ink);
  background: var(--sand); line-height: 1.55; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* House-стандарт: контент — центрированный контейнер (--wrap), листинги — full-width. */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.wrap--wide { max-width: none; padding: 0 40px; }   /* каталог/листинги — во всю ширину */
@media (max-width: 720px) { .wrap--wide { padding: 0 20px; } }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: .01em; margin: 0; }
.h-eyebrow { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .22em;
  font-size: 12px; color: var(--bronze-dark); font-weight: 600; }

/* Header */
/* Шапка зафиксирована на всех экранах (fixed); #header резервирует её высоту */
#header { height: 73px; }
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(250,249,247,.95);
  backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid var(--line); }
.header__row { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { font-family: var(--font-display); font-size: 26px; letter-spacing: .28em;
  text-transform: uppercase; font-weight: 600; }
.brand small { display: block; font-family: var(--font-sans); font-size: 9px;
  letter-spacing: .3em; color: var(--muted); margin-top: -2px; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; font-weight: 500; }
.nav a { padding: 6px 0; border-bottom: 1px solid transparent; transition: .2s; }
.nav a:hover { border-color: var(--bronze); }
.header__actions { display: flex; gap: 12px; align-items: center; }
/* Поиск в шапке — только ≤1080 (на десктопе шапке и так нужно 1054px, лишняя иконка её сломает) */
/* Поиск виден на всех ширинах. Раньше он был только на узких экранах, и на десктопе
   искать можно было лишь со страницы каталога — с главной, карточки товара или
   техраздела способа не было вовсе. Места в шапке хватает: при 1280px из 1200
   занято 1032, иконка добавляет 29. */
.search-link { display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--ink);
  font-size: 20px; line-height: 1; padding: 4px; }
.search-link:hover { color: var(--bronze-dark); }

/* Выезжающая строка поиска: шапка остаётся на месте, страница видна под панелью.
   Внешний блок — клиппер (overflow:hidden) от top:73px, поэтому закрытая панель никогда
   не рисуется выше шапки (на главной шапка прозрачная — иначе просвечивала бы). */
.search-ov { position: fixed; top: 73px; left: 0; right: 0; z-index: 45;
  overflow: hidden; pointer-events: none; }
/* Клики ловит только панель: хвост растворения должен пропускать нажатия на подложку,
   иначе в его полосе перестаёт работать закрытие по клику мимо */
.search-ov.is-open .search-ov__slide { pointer-events: auto; }

/* ПАНЕЛЬ = стекло + хвост растворения В ОДНОМ элементе.
   Раньше это были два блока со своими backdrop-filter, и на их стыке всегда оставалась
   чёткая линия: фильтр размывает только то, что за его собственной коробкой, и по краю
   обрывает выборку — два соседних размытия не сходятся никогда. Плюс тень и плоская
   заливка обрывались там же. Теперь слой размытия один, накрывает панель целиком вместе
   с хвостом, а гаснет только маской — граничить нечему. */
.search-ov__slide { position: relative;
  /* --tail — длина растворения, --tail-out — сколько из неё уходит НИЖЕ содержимого.
     Две величины, а не одна: чтобы поднять линию размытия выше, зона должна заезжать
     на низ панели, а не удлиняться вниз. Разница (40 − 22 = 18px) — та часть, что
     накрывает нижнее поле панели, поэтому текст подсказки не остаётся без подложки. */
  --tail: 16px;
  --tail-out: 9px;
  padding-bottom: var(--tail-out);
  background: none; box-shadow: none;
  transform: translateY(calc(-100% - 60px)); transition: transform .3s var(--ease); }
.search-ov.is-open .search-ov__slide { transform: none; }
/* Содержимое — над стеклом */
.search-ov__slide > .wrap, .search-ov__list { position: relative; z-index: 1; }

.search-ov__blur { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.search-ov__blur i { position: absolute; inset: 0; display: block; }
/* Радиус спадает ступенями, каждая гаснет в своей точке хвоста — так размытие уходит
   постепенно, а не обрывается. Маска непрозрачна по всей панели и начинает таять
   ровно на границе хвоста. */
.search-ov__blur i:nth-child(1) { backdrop-filter: blur(16px) saturate(1.28);
  -webkit-backdrop-filter: blur(16px) saturate(1.28);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tail)), transparent calc(100% - var(--tail) * .68));
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tail)), transparent calc(100% - var(--tail) * .68)); }
.search-ov__blur i:nth-child(2) { backdrop-filter: blur(9px) saturate(1.15);
  -webkit-backdrop-filter: blur(9px) saturate(1.15);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tail)), transparent calc(100% - var(--tail) * .38));
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tail)), transparent calc(100% - var(--tail) * .38)); }
.search-ov__blur i:nth-child(3) { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tail)), transparent calc(100% - var(--tail) * .12));
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tail)), transparent calc(100% - var(--tail) * .12)); }
.search-ov__blur i:nth-child(4) { backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tail)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tail)), transparent 100%); }
/* Тон стекла — тем же градиентом: сплошной по панели, тающий по хвосту.
   Отдельным слоем поверх размытия, чтобы плотность и радиус гасли независимо. */
.search-ov__blur::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(252,251,249,.90) 0%,
    rgba(252,251,249,.90) calc(100% - var(--tail)),
    rgba(252,251,249,.50) calc(100% - var(--tail) * .45),
    rgba(252,251,249,0) 100%); }

/* Затемнение страницы, но не шапки (.header выше подложки). Слабое: под стеклом
   размывается именно оно, и при плотном затемнении полоса становилась серым пятном. */
.search-back { position: fixed; inset: 0; z-index: 44; background: rgba(20,18,15,.10);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); }
.search-back.is-open { opacity: 1; visibility: visible; }
.search-ov__bar { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
/* font-size 16px обязателен: при меньшем iOS Safari зумит страницу на фокусе поля */
.search-ov__input { flex: 1; min-width: 0; height: 44px; font-family: var(--font-sans); font-size: 16px;
  padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.search-ov__input:focus { outline: none; border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(168,146,107,.22); }
.search-ov__cancel { flex: 0 0 auto; background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 15px; color: var(--muted); padding: 8px 2px; }
.search-ov__cancel:hover { color: var(--ink); }
.search-ov__chips { display: flex; gap: 8px; padding-bottom: 10px; }
.schip { background: #fff; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--muted);
  padding: 7px 14px; transition: .2s var(--ease); }
.schip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Список прокручивается внутри панели, снизу остаётся видна страница — это не отдельный экран */
.search-ov__list { max-height: min(54vh, 440px); overflow: auto; -webkit-overflow-scrolling: touch;
  padding: 0 40px 12px; }
@media (max-width: 720px) { .search-ov__list { padding: 0 20px 12px; } }
.search-ov__hint { color: var(--muted); font-size: 14px; padding: 8px 2px 18px; line-height: 1.5; }
.search-ov__all { display: block; text-align: center; padding: 16px; margin-top: 6px;
  font-size: 14px; font-weight: 600; color: var(--bronze-dark); text-decoration: none; }

/* Строка результата: картинка · название · наличие+цена */
.sres { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.sres:active { background: var(--stone-100); }
/* Быстрое добавление из результатов поиска — круглая иконка-корзина, как на плитке. */
.sres__add { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center;
  justify-content: center; color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease); }
.sres__add:hover { border-color: var(--bronze); background: var(--sand); }
.sres__add:active { transform: scale(.92); }
.sres__add:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(168,146,107,.30); }
.sres__add.is-busy { opacity: .45; pointer-events: none; }
.sres__add .ico { width: 18px; height: 18px; }
.sres__img { width: 52px; height: 52px; border-radius: 4px; overflow: hidden; background: var(--stone-200); }
.sres__img img { width: 100%; height: 100%; object-fit: cover; }
.sres__main { min-width: 0; }
.sres__coll { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze-dark); }
.sres__name { font-family: var(--font-display); font-size: 18px; line-height: 1.2; }
.sres__meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sres__right { text-align: right; white-space: nowrap; }
.sres__stock { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.sres__stock::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sres__stock--ok { color: var(--ok); }
.sres__stock--low { color: var(--low); }
.sres__stock--out { color: var(--muted); }
.sres__price { font-size: 13px; font-weight: 700; margin-top: 3px; }

.cart-link { position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; text-decoration: none; padding: 4px; color: var(--ink); }
.cart-link:hover { color: var(--bronze-dark); }
.cart-badge { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--bronze); color: #fff; border-radius: 999px; font-family: var(--font-sans); font-size: 11px;
  font-weight: 700; display: none; align-items: center; justify-content: center; }

/* Бургер и мобильное меню (появляются на ≤760) */
.burger { display: none; flex-direction: column; gap: 5px; width: 28px; background: none; border: none;
  cursor: pointer; padding: 4px; }
.burger span { height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: .3s; }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; position: fixed; top: 72px; left: 0; right: 0; z-index: 60; background: var(--sand);
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 12px 24px 22px; flex-direction: column; }
.mobile-menu.is-open { display: flex; }
.mobile-menu a { padding: 15px 2px; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 14px; justify-content: center; }

/* Cart page */
.cart { display: grid; grid-template-columns: 1fr 340px; gap: 32px; padding: 32px 0 80px; align-items: start; }
.cart__lines { display: flex; flex-direction: column; gap: 12px; }
.citem { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; align-items: center;
  border: 1px solid var(--line); border-radius: 6px; padding: 12px; background: #fff; }
.citem__img { width: 88px; height: 88px; border-radius: 4px; overflow: hidden; background: var(--stone-200); }
.citem__img img { width: 100%; height: 100%; object-fit: cover; }
/* Строка тары (упаковки) — авто, без управления количеством */
.citem--tara { background: var(--stone-100); border-style: dashed; }
.citem__img--tara { display: flex; align-items: center; justify-content: center; font-size: 34px;
  background: #fff; }
.citem__name { font-family: var(--font-display); font-size: 19px; }
.citem__meta { font-size: 13px; color: var(--muted); margin: 2px 0 8px; }
.citem__qty { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.citem__qty input { width: 92px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 3px; font-family: var(--font-sans); }
.qty-toggle { display: inline-flex; height: 36px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.qty-toggle button { display: flex; align-items: center; justify-content: center; border: none; background: #fff;
  padding: 0 16px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted);
  transition: background .2s var(--ease), color .2s var(--ease); }
.qty-toggle button:hover { color: var(--ink); }
.qty-toggle button.is-active { background: var(--ink); color: #fff; }
.citem__right { text-align: right; }
.citem__price { font-weight: 700; font-size: 18px; }
.citem__unit { font-size: 12px; color: var(--muted); }
.citem__rm { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; margin-top: 8px; }
.citem__rm:hover { color: var(--out); }
/* На телефоне три колонки в строке не помещаются: цена/удалить переезжают
   под описание отдельной строкой, картинку поджимаем. */
@media (max-width: 560px) {
  .citem { grid-template-columns: 72px 1fr; gap: 12px; align-items: start; }
  .citem__img { width: 72px; height: 72px; }
  .citem__right { grid-column: 2; text-align: left; display: flex; align-items: baseline; gap: 10px;
    border-top: 1px solid var(--line); padding-top: 10px; }
  .citem__rm { margin: 0 0 0 auto; }
}
.summary { position: sticky; top: 96px; border: 1px solid var(--line); border-radius: 6px; padding: 22px; background: #fff; }
.summary h3 { font-size: 22px; margin-bottom: 14px; }
.summary__row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 15px; border-bottom: 1px solid var(--line); }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 4px; }
.summary__total b { font-size: 26px; }
.cart-empty { text-align: center; padding: 80px 20px; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px; letter-spacing: .02em; border-radius: 4px;
  padding: 12px 22px; border: 1px solid var(--ink); background: var(--ink); color: #fff;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease),
              box-shadow .25s var(--ease), transform .14s var(--ease); }
.btn:hover { background: var(--graphite); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(168,146,107,.30); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--stone-300); }
.btn--ghost:hover { background: transparent; border-color: var(--ink); }
.btn--bronze { background: var(--bronze); border-color: var(--bronze); }
.btn--bronze:hover { background: var(--bronze-dark); border-color: var(--bronze-dark); }
.btn--sm { padding: 8px 15px; font-size: 13px; }
.btn--lg { padding: 15px 32px; font-size: 15px; }

/* Hero */
/* Прозрачная шапка поверх hero (главная); при скролле закрепляется и становится непрозрачной */
.header--overlay { position: fixed; top: 0; left: 0; right: 0; background: transparent;
  border-bottom-color: transparent; backdrop-filter: none; box-shadow: none;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.header--overlay .brand, .header--overlay .brand small, .header--overlay .nav a,
.header--overlay .cart-link { color: #fff; }
.header--overlay .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.header--overlay .burger span { background: #fff; }
.header--overlay.is-scrolled { background: rgba(250,249,247,.94);
  backdrop-filter: saturate(1.2) blur(10px); border-bottom-color: var(--line);
  box-shadow: 0 2px 18px rgba(20,18,15,.07); }
.header--overlay.is-scrolled .brand, .header--overlay.is-scrolled .nav a,
.header--overlay.is-scrolled .cart-link { color: var(--ink); }
.header--overlay.is-scrolled .brand small { color: var(--muted); }
.header--overlay.is-scrolled .btn--ghost { color: var(--ink); border-color: var(--ink); }
.header--overlay.is-scrolled .burger span { background: var(--ink); }

/* Hero-слайдер во всю высоту экрана (шапка накладывается сверху, фон hero виден под меню) */
.hero { position: relative; height: 100vh; min-height: 520px;
  color: #fff; overflow: hidden; background: var(--graphite); }
.hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity 1.2s var(--ease), visibility 1.2s var(--ease);
  display: flex; align-items: flex-end; pointer-events: none; }
.hero__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; }
/* Ken Burns: плавный медленный зум через transition (без «дёрганья» рестарта анимации) */
.hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
  transform: scale(1.08); transition: transform 8s linear; will-change: transform; }
.hero__slide.is-active .hero__bg { transform: scale(1); }
.hero__slide::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.62) 100%); }
.hero__slide > .wrap { position: relative; z-index: 2; width: 100%; }
/* Появление текста активного слайда (staggered) */
.hero__inner .h-eyebrow, .hero__inner h1, .hero__inner p, .hero__cta {
  opacity: 0; transform: translateY(26px); }
.hero__slide.is-active .h-eyebrow { animation: heroUp .9s .20s var(--ease) forwards; }
.hero__slide.is-active h1        { animation: heroUp 1s .34s var(--ease) forwards; }
.hero__slide.is-active p         { animation: heroUp 1s .48s var(--ease) forwards; }
.hero__slide.is-active .hero__cta{ animation: heroUp 1s .60s var(--ease) forwards; }
@keyframes heroUp { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .hero__bg { transition: none; transform: scale(1); }
  .hero__inner .h-eyebrow, .hero__inner h1, .hero__inner p, .hero__cta { opacity: 1; transform: none; animation: none; }
}
.hero__inner { max-width: 640px; padding: 0 0 66px; }
.hero h1 { font-size: clamp(38px, 5.4vw, 74px); line-height: 1.03; margin: 16px 0 18px; }
.hero p { font-size: 18px; color: rgba(255,255,255,.85); max-width: 540px; }
.hero__cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero__dots { position: absolute; bottom: 22px; left: 0; right: 0; z-index: 3;
  display: flex; gap: 8px; justify-content: center; }
.hero__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.5);
  border: none; padding: 0; cursor: pointer; transition: .3s; }
.hero__dot.is-active { background: #fff; width: 26px; border-radius: 5px; }

/* Sections — только вертикальные отступы, чтобы не затирать боковые поля .wrap */
.section { padding-top: 88px; padding-bottom: 88px; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 40px; }
.section__head h2 { font-size: clamp(28px, 3.4vw, 44px); }
.section__head p { color: var(--muted); max-width: 460px; margin: 8px 0 0; }

/* Блок «Коллекции» — второй экран, помещается по высоте целиком.
   ВНИМАНИЕ: секция сама .wrap — padding только longhand, иначе сокращённая запись
   обнулит боковые поля .wrap и текст прилипнет к краю экрана на телефоне. */
#collections { height: calc(100vh - 73px); min-height: 560px; padding-top: 30px; padding-bottom: 30px;
  display: flex; flex-direction: column; justify-content: center; scroll-margin-top: 73px; }
#collections .section__head { margin-bottom: 22px; }
#collections #collections-grid { flex: 1; min-height: 0; }
#collections .coll-card { aspect-ratio: auto; height: 100%; }
/* Блок «Применение» — во всю высоту экрана: крупные образные плитки 2×2 */
#applications { height: calc(100vh - 73px); min-height: 620px; padding-top: 30px; padding-bottom: 30px;
  display: flex; flex-direction: column; justify-content: center; scroll-margin-top: 73px; }
#applications .section__head { margin-bottom: 22px; }
.apps-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr; gap: 14px; }
.app-tile { position: relative; overflow: hidden; border-radius: 4px; display: flex; align-items: flex-end;
  min-height: 0; background: var(--stone-300); box-shadow: 0 6px 18px rgba(20,18,15,.06); }
.app-tile__bg { position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform .7s var(--ease); }
.app-tile:hover .app-tile__bg { transform: scale(1.06); }
.app-tile__scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,14,12,.04) 35%, rgba(15,14,12,.74) 100%); }
.app-tile__body { position: relative; z-index: 2; color: #fff; padding: 26px 30px; }
.app-tile__title { font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 34px); color: #fff;
  margin: 0 0 6px; line-height: 1.05; }
.app-tile__desc { font-size: 14px; color: rgba(255,255,255,.85); margin: 0 0 12px; max-width: 360px; line-height: 1.5; }
.app-tile__link { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: 2px; transition: .2s; }
.app-tile:hover .app-tile__link { color: var(--bronze); border-color: var(--bronze); }
/* Блок «Популярное со склада» — в один экран: 4 карточки в ряд, заполняют высоту */
#featured { height: calc(100vh - 73px); min-height: 600px; padding-top: 30px; padding-bottom: 30px;
  display: flex; flex-direction: column; justify-content: center; scroll-margin-top: 73px; }
#featured .section__head { margin-bottom: 22px; }
#featured #featured-grid { flex: 1; min-height: 0; grid-auto-rows: 1fr; }
#featured .p-card { height: 100%; }
#featured .p-card__img { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
#featured .p-card__body { flex: 0 0 auto; }   /* тянется только фото, подпись — по контенту */
@media (max-width: 960px) {   /* ниже 960 сетка становится 2-колоночной — возвращаем обычную высоту */
  #featured { height: auto; min-height: 0; padding-top: 80px; padding-bottom: 80px; display: block; }
  #featured #featured-grid { grid-auto-rows: auto; }
  #featured .p-card { height: auto; }
  #featured .p-card__img { flex: 0 0 auto; aspect-ratio: 40/53; }
}
@media (max-width: 760px) {
  .hero { height: auto; min-height: 100vh; }
  #collections { height: auto; min-height: 0; padding-top: 56px; padding-bottom: 56px; display: block; }
  #collections .coll-card { aspect-ratio: 3/4; height: auto; }
  #applications { height: auto; min-height: 0; padding-top: 56px; padding-bottom: 56px; display: block; }
  .apps-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .app-tile { aspect-ratio: 16/10; }
  /* Заголовок секции и кнопка рядом не помещаются — кнопку на свою строку,
     иначе её текст ломается в столбик («Весь / каталог / →»). */
  .section__head { flex-direction: column; align-items: flex-start; gap: 14px;
    margin-bottom: 24px; }
  .section__head .btn { white-space: nowrap; }
}

/* Collections grid */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Резиновая сетка: сама подбирает число колонок под ширину экрана */
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.coll-card { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: 3px;
  background: var(--stone-300); }
.coll-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.coll-card:hover img { transform: scale(1.06); }
.coll-card__body { position: absolute; inset: auto 0 0 0; padding: 22px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.7)); color: #fff; }
.coll-card__body h3 { font-size: 26px; }
/* Лид-подзаголовок коллекции — 1–2 строки, чтобы длинный текст не ломал плитку */
.coll-card__lead { margin: 5px 0 3px; font-size: 13.5px; line-height: 1.35; color: rgba(255,255,255,.92);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.coll-card__body span { font-size: 13px; opacity: .85; }

/* Текстуры — вертикальные панели на высоту экрана (как #collections/#applications:
   height = 100vh − шапка + scroll-margin, чтобы блок ровно вставал при переходе из меню) */
#textures { height: calc(100vh - 73px); min-height: 600px; padding: 30px 0;
  display: flex; flex-direction: column; scroll-margin-top: 73px; }
#textures .wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#textures .section__head { margin-bottom: 22px; }
.tex-grid { display: flex; gap: 10px; flex: 1; min-height: 0; }
.tex-card { position: relative; flex: 1 1 0; min-width: 0; border-radius: 4px; overflow: hidden; display: block;
  background: var(--stone-200); box-shadow: 0 6px 18px rgba(20,18,15,.06); transition: flex-grow .55s var(--ease); }
.tex-card:hover { flex-grow: 2.2; }
.tex-card__img { position: absolute; inset: 0; }
.tex-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tex-card:hover .tex-card__img img { transform: scale(1.06); }
.tex-card__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; color: #fff; white-space: nowrap;
  font-family: var(--font-display); font-size: clamp(18px, 1.5vw, 26px); padding: 16px 18px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.7)); }
@media (max-width: 1080px) {
  #textures { height: auto; min-height: 0; padding: 64px 0; display: block; }
  #textures .wrap { display: block; }
  .tex-grid { flex-wrap: wrap; flex: none; min-height: 0; height: auto; }
  .tex-card { flex: 1 1 30%; aspect-ratio: 3/4; }
  .tex-card:hover { flex-grow: 1; }
}
@media (max-width: 640px) { .tex-card { flex-basis: 44%; } }

/* Effects chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1px solid var(--line); background: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500; cursor: pointer; transition: .2s; }
.chip:hover, .chip.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }

/* Product card */
.p-card { background: #fff; border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
  display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; }
.p-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
/* Фото крупнее, косая линия ниже; нижний блок компактнее — общая высота карточки та же */
.p-card__img { aspect-ratio: 40/53; flex: 0 0 auto; background: var(--stone-200); position: relative; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 94%); }
.p-card__img > img, .p-card__img > div { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-card__img img { object-fit: cover; }
/* Бейдж наличия — «матовая» пилюля со статус-точкой */
.p-badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 11px 5px 9px; border-radius: 999px; color: var(--ink);
  background: rgba(255,255,255,.78); -webkit-backdrop-filter: saturate(1.3) blur(7px);
  backdrop-filter: saturate(1.3) blur(7px); border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 3px 10px rgba(20,18,15,.14); }
.p-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: currentColor; }
.p-badge--ok  { color: var(--ok); }
.p-badge--low { color: var(--low); }
.p-badge--out { color: var(--out); }
.p-badge--ok::before  { box-shadow: 0 0 0 3px rgba(47,125,79,.20); }
.p-badge--low::before { box-shadow: 0 0 0 3px rgba(184,134,43,.20); }
.p-badge--out::before { box-shadow: 0 0 0 3px rgba(178,59,59,.20); }
/* Текст подтянут вверх под косой срез фото (в область скоса) */
.p-card__body { padding: 10px 16px 12px; margin-top: -12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.p-card__coll { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--bronze-dark); font-weight: 600; }
.p-card__name { font-family: var(--font-display); font-size: 20px; line-height: 1.15; }
.p-card__meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.p-card__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; }
.p-card__prices { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
/* Быстрое добавление в корзину прямо из листинга */
.p-card__add { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: #fff; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease); }
.p-card__add:hover { border-color: var(--bronze); background: var(--sand); }
.p-card__add:active { transform: scale(.92); }
.p-card__add:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(168,146,107,.30); }
.p-card__add.is-busy { opacity: .45; pointer-events: none; }
.price { font-size: 19px; font-weight: 700; }
.price small { font-size: 12px; color: var(--muted); font-weight: 500; }
.price--whole { color: var(--bronze-dark); }
.price-hint { font-size: 12px; color: var(--muted); }

/* Catalog layout */
.catalog { display: grid; grid-template-columns: 264px 1fr; gap: 32px; padding: 4px 0 88px; }
.filters { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px);
  overflow: auto; padding-right: 6px; }
.filter-group { border-top: 1px solid var(--line); padding: 18px 0; }
.filter-group:first-child { border-top: none; }
.filter-group h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin-bottom: 12px; font-family: var(--font-sans); font-weight: 700; }
.filter-opt { display: flex; align-items: center; gap: 9px; font-size: 14px; padding: 5px 0; cursor: pointer; }
.filter-opt input { accent-color: var(--bronze); }
.filter-opt .cnt { margin-left: auto; color: var(--muted); font-size: 12px; }
.catalog__head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.catalog__head:empty, .catalog__head:has(> #dealer-hint:only-child:empty) { margin: 0; }
/* .filters__head — первый потомок панели, поэтому :first-child до групп не достаёт.
   Правило работает и на десктопе (там head скрыт, но в DOM остаётся). */
.filters .filters__head + .filter-group { border-top: none; padding-top: 2px; }
.catalog__count { color: var(--muted); font-size: 14px; }
.catalog__tools { margin-left: auto; display: flex; gap: 10px; align-items: center; }
/* Шторка фильтров — только на узких экранах (house-стандарт) */
.filters-toggle { display: none; }
.filters-toggle__n:not(:empty) { display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; margin-left: 8px; padding: 0 5px; border-radius: 999px;
  background: var(--bronze); color: #fff; font-size: 11px; font-weight: 700; }
.filters__head { display: none; align-items: center; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.filters__head h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  font-family: var(--font-sans); font-weight: 700; }
.filters__close { background: none; border: none; cursor: pointer; font-size: 22px; line-height: 1;
  color: var(--muted); padding: 6px; margin: -6px; }
.filters__close:hover { color: var(--ink); }
/* visibility, а не только opacity: иначе прозрачный бэкдроп ловил бы клики закрытым */
.filters-back { display: none; position: fixed; inset: 0; z-index: 59; background: rgba(20,18,15,.45);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); }
.filters-back.is-open { opacity: 1; visibility: visible; }
select, .search-box input { font-family: var(--font-sans); font-size: 14px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 2px; background: #fff; }
.search-box { position: relative; }
.search-box input { width: 320px; padding-left: 36px; }
.suggest { position: absolute; top: 44px; left: 0; right: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 3px; box-shadow: var(--shadow); z-index: 30; overflow: hidden; display: none; }
.suggest.show { display: block; }
.suggest a { display: flex; gap: 10px; padding: 10px 12px; align-items: center; }
.suggest a:hover { background: var(--stone-100); }
.suggest img { width: 40px; height: 40px; object-fit: cover; border-radius: 2px; }
.suggest__txt { flex: 1 1 auto; min-width: 0; }
/* Иконка-корзина в подсказке — прижата вправо. */
.suggest__add { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center;
  justify-content: center; color: var(--ink); transition: border-color .2s var(--ease), background .2s var(--ease); }
.suggest__add:hover { border-color: var(--bronze); background: var(--sand); }
.suggest__add .ico { width: 17px; height: 17px; }

/* Banner / dealer CTA */
.banner { background: var(--graphite); color: #fff; border-radius: 4px; padding: 56px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.banner h2 { font-size: 40px; color: #fff; }
.banner p { color: rgba(255,255,255,.75); margin-top: 12px; }

/* Footer */
.footer { background: var(--ink); color: rgba(255,255,255,.68); padding: 60px 0 30px; margin-top: 40px; }
.footer a { color: inherit; text-decoration: none; }
.footer__grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.15fr 1.3fr; gap: 32px 40px; }
.footer h4 { color: #fff; font-family: var(--font-sans); font-size: 12px; text-transform: uppercase;
  letter-spacing: .14em; margin-bottom: 14px; }
.footer__col a { display: block; padding: 5px 0; font-size: 14px; color: rgba(255,255,255,.68);
  transition: color .15s var(--ease); }
.footer__col a:hover { color: #fff; }
/* Бренд-колонка */
.footer__brand .brand { font-size: 22px; }
.footer__tag { margin-top: 14px; color: var(--bronze); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.footer__desc { margin-top: 8px; max-width: 320px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.58); }
.footer__cta { display: inline-flex; margin-top: 18px; }
/* Контакты */
.footer__col a.footer__phone { font-size: 17px; font-weight: 700; color: #fff; }
.footer__line { display: block; padding: 5px 0; font-size: 14px; color: rgba(255,255,255,.68); }
.footer__hours { color: rgba(255,255,255,.5); font-size: 13px; }
.footer__col a.footer__soft { color: var(--bronze); font-size: 13.5px; line-height: 1.5; }
.footer__msgs { display: flex; gap: 10px; margin-top: 12px; }
.footer__col a.footer__msg { display: inline-flex; padding: 6px 14px; border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; font-size: 13px; color: rgba(255,255,255,.85); }
.footer__col a.footer__msg:hover { border-color: var(--bronze); color: #fff; background: rgba(255,255,255,.05); }
/* Нижняя строка */
.footer__bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer__legal { display: flex; flex-direction: column; gap: 3px; }
.footer__note { color: rgba(255,255,255,.45); font-size: 12px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.footer__links a { color: rgba(255,255,255,.55); font-size: 12px; transition: color .15s var(--ease); }
.footer__links a:hover { color: #fff; text-decoration: underline; }
.footer__up { color: rgba(255,255,255,.6); font-size: 13px; white-space: nowrap; transition: color .15s var(--ease); }
.footer__up:hover { color: #fff; }
/* Адаптив: бренд во всю строку, ссылки — в 4 → 2 → 1 колонку */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: repeat(4, 1fr); }
  .footer__brand { grid-column: 1 / -1; margin-bottom: 8px; }
  .footer__desc { max-width: 520px; }
}
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 24px; }
}
@media (max-width: 440px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Modal */
.modal-back { position: fixed; inset: 0; background: rgba(20,18,15,.55); z-index: 100;
  display: none; align-items: center; justify-content: center; padding: 24px; }
.modal-back.show { display: flex; }
.modal { background: #fff; border-radius: 4px; max-width: 920px; width: 100%; max-height: 90vh;
  overflow: auto; }
/* Компактный выбор варианта при быстром добавлении из листинга */
.modal--pick { max-width: 460px; padding: 22px; }
.pick__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pick__title { font-family: var(--font-display); font-size: 26px; line-height: 1.1; margin-top: 2px; }
.pick__close { background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1;
  color: var(--muted); padding: 6px; margin: -6px; }
.pick__close:hover { color: var(--ink); }
.pick__hint { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.pick__all { display: block; text-align: center; padding: 12px; font-size: 14px; font-weight: 600;
  color: var(--bronze-dark); text-decoration: none; }
/* Модалка уже каталога — на телефоне поджимаем поля, иначе «1200×3000 см · 3+ мм» переносится */
@media (max-width: 560px) {
  .modal--pick { padding: 16px; }
  .modal--pick .vrow { padding: 12px; gap: 6px 10px; }
  .modal--pick .vrow__title { font-size: 14px; }
  .pick__title { font-size: 23px; }
}
/* Строки выбора — те же .vrow, что и на карточке товара, но кнопки: сбрасываем стили браузера */
.vlist button.vrow { width: 100%; font: inherit; color: inherit; text-align: left;
  background: none; border-left: none; border-right: none; border-bottom: none; }
/* Подтверждение добавления */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; display: flex; align-items: center; gap: 16px;
  max-width: calc(100vw - 32px); background: var(--ink); color: #fff; border-radius: 999px;
  padding: 12px 20px; font-size: 14px; box-shadow: 0 14px 34px rgba(20,18,15,.28);
  opacity: 0; visibility: hidden; transform: translate(-50%, 16px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s var(--ease); }
.toast.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast a { flex: 0 0 auto; color: var(--bronze); font-weight: 700; text-decoration: none; }
.toast a:hover { color: #fff; }
.modal__grid { display: grid; grid-template-columns: 1fr 1fr; }
.modal__img { background: var(--stone-200); aspect-ratio: 1; }
.modal__body { padding: 32px; }
.spec { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 14px; margin: 18px 0; }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; font-weight: 600; }
.tones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tone { font-size: 12px; border: 1px solid var(--line); border-radius: 2px; padding: 4px 8px; }

/* Auth forms */
.auth-wrap { max-width: 420px; margin: 60px auto; background: #fff; border: 1px solid var(--line);
  border-radius: 4px; padding: 36px; box-shadow: var(--shadow); }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input, .field textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: 2px; font-family: var(--font-sans); font-size: 14px; }
.tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.tabs button { flex: 1; padding: 10px; border: 1px solid var(--line); background: #fff;
  cursor: pointer; font-weight: 600; border-radius: 2px; }
.tabs button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.note { font-size: 13px; color: var(--muted); }

/* Product detail page (PDP) */
/* minmax(0,1fr), а не 1fr: у grid-колонки min-width по умолчанию auto, и длинная
   строка количества («100000 плит · 300000 м²») раздвигала правую колонку, отбирая
   ширину у фотографии вместо того, чтобы переполниться и включить подгонку. */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px;
  padding: 16px 0 80px; align-items: start; }
.breadcrumb { font-size: 13px; color: var(--muted); }
.breadcrumb a:hover { color: var(--ink); }
/* Крошки — закреплённая полоса под шапкой: липнет к ней и остаётся на месте при скролле */
.pdp-crumbbar { position: sticky; top: 73px; z-index: 40; background: var(--sand);
  border-bottom: 1px solid var(--line); padding: 11px 0; }
.pdp-crumbbar .breadcrumb { padding: 0; line-height: 1.1; }
/* top совпадает с естественной позицией фото → фиксируется сразу, без начального проскролла */
.pdp__gallery { position: sticky; top: 126px; align-self: start; z-index: 1; }
/* Ширина кнопки = ширина фото: фото ограничено max-height 74vh при соотношении 4/5 → ширина = 59.2vh */
.pdp__spec { display: block; width: min(100%, calc(74vh * 4 / 5)); margin-top: 12px; text-align: center; }
.pdp__main { aspect-ratio: 4/5; max-height: 74vh; background: var(--stone-200); border-radius: 4px;
  overflow: hidden; position: relative; cursor: zoom-in; }
.pdp__main img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.pdp__main.zoom img { transform: scale(1.8); cursor: zoom-out; }
.pdp__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.pdp__thumb { width: 76px; height: 92px; border-radius: 3px; overflow: hidden; border: 1px solid var(--line);
  cursor: pointer; }
.pdp__thumb.is-active { border-color: var(--bronze); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; margin: 0; }
/* Артикул — на одном уровне с курсом евро справа: те же отступ и кегль */
/* Артикул — нижний ряд сетки заголовка, вровень с курсом евро справа */
.pdp__code { font-size: 12px; color: var(--muted); font-family: ui-monospace, monospace;
  font-weight: 600; }
/* Название + цена в одной строке; цена прижата к правому краю блока */
.pdp__title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; column-gap: 20px; row-gap: 4px; margin: 8px 0 6px; }
.pdp__title-row h1 { margin: 0; min-width: 0; }
.pdp__fx-slot:empty { display: none; }
.pdp__fx-slot { justify-self: end; text-align: right; }
.pdp__price-row { display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; flex: 0 0 auto; text-align: right; }
.pdp__price { font-size: 30px; font-weight: 700; line-height: 1.05; white-space: nowrap; }
.pdp__price small { font-size: 13px; color: var(--muted); font-weight: 500; }
.pdp__price--whole { color: var(--bronze-dark); }
.pdp__price--rrc { font-size: 18px; color: var(--muted); font-weight: 600; }
#pdp-spec { margin-top: 8px; }

/* Калькулятор */
/* Основной ввод количества — акцентный блок */
.pdp__qty { border: 1px solid var(--line); border-radius: 10px; padding: 20px; margin: 18px 0 14px;
  background: #fff; box-shadow: 0 6px 24px rgba(20,18,15,.05); }
/* Количество — всё в одну строку: подпись · переключатель · ввод · единица · конвертация */
/* Строка количества всегда в одну строку: перенос запрещён, тесноту разбирает
   fitQtyLine() — она навешивает fit-1…fit-3 по мере нехватки места. Ширина зависит
   от введённого числа, поэтому шаг подбирается в рантайме, а не медиазапросом.
   overflow скрыт: на последнем шаге строка масштабируется и её натуральная ширина
   больше блока — без этого страница получила бы горизонтальный скролл. */
.pdp__qty { overflow: hidden; }
.pdp__qty-line { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  transform-origin: left center; }
/* Элементы не сжимаются: иначе flex молча ужимает поле и «пилюлю» ниже их содержимого,
   текст вылезает за границы, а scrollWidth остаётся равным ширине блока — и подгонка
   не видит переполнения. С flex-shrink:0 нехватка места становится измеримой. */
.pdp__qty-line > * { flex: 0 0 auto; }
.lbl-short { display: none; }
/* 1. Короткая подпись */
.pdp__qty-line.fit-1 .lbl-full { display: none; }
.pdp__qty-line.fit-1 .lbl-short { display: inline; }
/* 2. Поджатые поле, подсказка и переключатель. Высоту 36px не трогаем — тап-таргет. */
.pdp__qty-line.fit-2 { gap: 8px; }
.pdp__qty-line.fit-2 .qty__input { width: 84px; padding: 0 10px; font-size: 17px; }
.pdp__qty-line.fit-2 .qty__conv { padding: 5px 9px; font-size: 12.5px; gap: 4px; }
.pdp__qty-line.fit-2 .qty-toggle button { padding: 0 10px; font-size: 12.5px; }
/* 3. Предельная компактность: вдобавок к размерам сокращаются слова —
   «плит» → «шт», «Штуки» → «шт». Это освобождает ~60px и на телефоне снимает
   необходимость масштабировать строку, то есть сохраняет высоту тап-таргетов. */
.w-short { display: none; }
.pdp__qty-line.fit-3 .w-full { display: none; }
.pdp__qty-line.fit-3 .w-short { display: inline; }
.pdp__qty-line.fit-3 { gap: 6px; }
.pdp__qty-line.fit-3 .qty__input { width: 68px; padding: 0 8px; font-size: 16px; }
.pdp__qty-line.fit-3 .qty__conv { padding: 4px 7px; font-size: 11.5px; gap: 3px; }
.pdp__qty-line.fit-3 .qty-toggle button { padding: 0 8px; font-size: 11.5px; }
.pdp__qty-label { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 600; }
/* Строка характеристик варианта — над блоком количества, наличие прижато вправо */
.pdp__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; font-size: 13px; color: var(--muted);
  border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 16px; }
.pdp__meta-t { font-weight: 500; }
.pdp__meta .stock-note { margin: 0; font-size: 13px; white-space: nowrap; }
/* Подсказка-конвертация — деликатная «пилюля» с акцентными числами; мягкая смена при переключении шт↔м² */
.qty__conv { display: inline-flex; align-items: center; gap: 5px;
  background: var(--stone-100); border-radius: 999px; padding: 5px 12px; white-space: nowrap;
  font-size: 13px; color: var(--muted); font-weight: 500; }
.qty__conv:empty { display: none; }
.qty__conv-sign { color: var(--bronze-dark); font-weight: 700; }
.qty__conv b { color: var(--ink); font-weight: 700; }
.qty__conv.is-anim { animation: convFlip .32s var(--ease); }
@keyframes convFlip { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.qty__input { width: 116px; height: 36px; font-size: 18px; font-weight: 700; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 6px; font-family: var(--font-sans); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.qty__input:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(168,146,107,.16); }
.qty__unit { font-size: 15px; color: var(--muted); }
/* Итого — строка-итог: подпись слева, сумма справа, с тонким разделителем сверху */
.qty__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); padding-top: 14px; margin-top: 16px; }
.qty__total-label { font-family: var(--font-sans); font-size: 13px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.qty__total-val b { font-size: 26px; color: var(--bronze-dark); }
.qty__total-val small { font-size: 13px; color: var(--muted); }
.pdp__qty-cta { display: flex; gap: 10px; margin-top: 16px; align-items: stretch; }
.pdp__qty-cta .btn { padding: 8px 20px; }
.pdp__qty-cta .btn--bronze { flex: 1; }
.qty-add__label { font-size: 15px; font-weight: 600; }
.calc { border: 1px solid var(--line); border-radius: 6px; padding: 20px; margin: 22px 0; background: #fff; }
/* Калькулятор площади — вспомогательный: светлая врезка без рамки/тени (специфичность выше .calc) */
.calc.calc--helper { background: var(--stone-100); border: none; box-shadow: none;
  padding: 16px 18px; margin: 10px 0 16px; }
.calc--helper h4 { color: var(--muted); }
.calc--helper .calc__stat { background: #fff; padding: 10px 12px; }
.calc--helper .calc__stat b { font-size: 17px; }
.calc h4 { font-family: var(--font-sans); font-size: 13px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 14px; }
.calc__row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.calc__row .btn { height: 42px; flex: 0 0 auto; }   /* «Подставить в заказ» вровень с полями */
.calc__field { flex: 1; min-width: 120px; }
.calc__field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.calc__field input, .calc__field select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 6px; font-family: var(--font-sans); font-size: 15px; transition: border-color .2s var(--ease); }
.calc__field input:focus, .calc__field select:focus { outline: none; border-color: var(--bronze); }
.calc__out { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.calc__stat { background: var(--stone-100); border-radius: 6px; padding: 12px 14px; }
.calc__stat b { font-size: 20px; display: block; }
.calc__stat span { font-size: 12px; color: var(--muted); }
.calc__total { margin-top: 12px; font-size: 15px; }
.calc__total b { font-size: 22px; color: var(--bronze-dark); }
.stock-note { margin-top: 10px; font-size: 14px; font-weight: 600; }
.stock-note--ok { color: var(--ok); }
.stock-note--low { color: var(--low); }
.stock-note--out { color: var(--muted); font-weight: 500; }

/* На десктопе первый экран карточки товара помещается в высоту вьюпорта:
   фото — на всю высоту, правая колонка со списком вариантов скроллится внутри. */
/* Переключатель режимов вариантов */
/* Шапка блока вариантов: слева назначение, справа переключатель вида.
   Раньше две кнопки висели сами по себе — было неясно, что это выбор режима. */
.vhead { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 22px 0 12px; }
.vhead__t { font-family: var(--font-display); font-size: 19px; line-height: 1; }
.vhead__n { font-size: 12px; color: var(--muted); }
/* Свойства группы в шапке блока вариантов — тише заголовка, отдельной строкой под ним */
.vhead__meta { display: block; margin-top: 5px; font-family: var(--font-sans); font-size: 12px;
  font-weight: 500; color: var(--muted); letter-spacing: .02em; }

/* Сегментированный переключатель: светлая «пилюля» скользит под активным пунктом.
   Мягче прежней чёрной заливки и понятнее — видно, что варианта два. */
.vseg { position: relative; display: inline-flex; gap: 2px; padding: 3px;
  background: var(--stone-100); border: 1px solid var(--line); border-radius: 999px; }
.vseg__pill { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 999px;
  background: #fff; box-shadow: 0 1px 3px rgba(20,18,16,.13);
  transition: transform .26s var(--ease), width .26s var(--ease); }
.vseg__b { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; cursor: pointer; padding: 7px 15px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--muted);
  white-space: nowrap; transition: color .2s var(--ease); }
.vseg__b:hover { color: var(--ink); }
.vseg__b.is-on { color: var(--ink); }
.vseg__b:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(168,146,107,.30); }
/* Счётчик вариантов: подсказывает, что откроется во втором режиме */
.vseg__n { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: var(--sand); color: var(--bronze-dark); }
.vseg__b.is-on .vseg__n { background: var(--bronze); color: #fff; }
@media (max-width: 640px) {
  .vhead { gap: 10px; }
  .vhead__t { font-size: 17px; }
  /* Тап-таргет не ниже 40px (house standard): на телефоне это основной способ
     переключения, и промах по 32-пиксельной кнопке раздражает больше всего. */
  .vseg__b { min-height: 40px; padding: 8px 14px; font-size: 12.5px; }
}

/* Селектор вариантов (чипы по осям) */
.vsel { margin: 12px 0 6px; }
.vsel__group { margin-bottom: 18px; }
.vsel__label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  font-weight: 700; margin-bottom: 9px; display: flex; justify-content: space-between; }
.vsel__label span { color: var(--ink); font-weight: 600; text-transform: none; letter-spacing: 0; }
.vchips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Чипы размера/толщины — той же высоты, что и переключатель «Параметры/Все варианты» (13px · 8×16) */
.vchip { border: 1px solid var(--line); background: #fff; padding: 8px 16px; border-radius: 6px; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink); transition: .2s var(--ease); }
.vchip:hover { border-color: var(--ink); background: var(--stone-100); }
.vchip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Комбинация недоступна при текущем выборе — приглушаем (клик переключит связанный параметр) */
.vchip--na { opacity: .4; border-style: dashed; }
.vchip--na:hover { opacity: .7; border-color: var(--line); background: #fff; }

/* Список вариантов */
.vlist { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 18px 0; }
.vrow { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 14px 16px; border-top: 1px solid var(--line); cursor: pointer; transition: background .15s; }
.vrow:first-child { border-top: none; }
.vrow:hover { background: var(--stone-100); }
.vrow.is-active { background: var(--sand); box-shadow: inset 3px 0 0 var(--bronze); }
.vrow__spec { display: flex; flex-direction: column; gap: 3px; }
.vrow__title { font-weight: 600; font-size: 15px; }
.vrow__sub { font-size: 12px; color: var(--muted); }
.vrow__tag { display: inline-block; font-size: 11px; font-weight: 600; background: var(--stone-200);
  color: var(--bronze-dark); border-radius: 3px; padding: 2px 7px; margin-left: 6px; }
/* На телефоне три колонки сжимают спецификацию до переносов — бейдж наличия
   уводим на вторую строку под цену. */
@media (max-width: 560px) {
  .vrow { grid-template-columns: 1fr auto; gap: 8px 12px; align-items: start; }
  .vrow__price { white-space: nowrap; }
  .vrow__stock { grid-column: 2; grid-row: 2; justify-self: end; }
}
.vrow__price { text-align: right; font-weight: 700; font-size: 16px; white-space: nowrap; }
.vrow__price small { display: block; font-size: 11px; color: var(--bronze-dark); font-weight: 600; }
.vrow__stock { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; white-space: nowrap; }
.vrow__stock--ok { background: #e8f3ec; color: var(--ok); }
.vrow__stock--low { background: #fbf1dc; color: var(--low); }
.vrow__stock--out { background: #f6e4e4; color: var(--out); }

.pdp__cta { display: flex; gap: 12px; margin: 4px 0 18px; flex-wrap: wrap; }
.pdp__cta:empty { margin: 0; }   /* без кнопок (гость) — не оставляем пустой отступ */
.tabs-nav { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin: 28px 0 18px; }
.tabs-nav button { background: none; border: none; padding: 12px 0; font-family: var(--font-sans); font-size: 15px;
  font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs-nav button.is-active { color: var(--ink); border-color: var(--bronze); }
.tab-body { font-size: 15px; line-height: 1.7; }

/* House-стандарт: шапка обязана влезать в ширину устройства.
   Полной шапке нужно ~1054px (лого 174 + меню 512 + корзина 30 + кнопки 174 + gap/поля).
   Ниже — меню и «Войти»/«Стать дилером» уходят в бургер (шапка fixed, поэтому
   переполнение не давало скролла, а молча обрезало кнопки). */
/* Порог бургера — 1240px, по ширине контейнера. Замер: полной шапке нужно 1224px
   (лого 174 + меню 512 + четыре иконки + кнопки 174 + промежутки 28×6), а с поиском
   и того больше. При прежних 1080 меню с кнопками просто уезжало за край экрана —
   и это НЕ видно по горизонтальному скроллу: шапка фиксированная, она молча
   обрезается, а не растягивает страницу. */
@media (max-width: 1240px) {
  .nav { display: none; }
  .burger { display: flex; }
  .header__actions { display: none; }
  /* .nav скрыт — его margin-left:auto больше не работает, прижимаем правую группу
     (поиск+корзина+бургер) к краю за первый видимый элемент группы */
  .search-link { margin-left: auto; }
}
@media (max-width: 760px) {
  .header__row { gap: 14px; }
  .brand { font-size: 20px; letter-spacing: .18em; }
  .brand small { font-size: 8px; letter-spacing: .2em; }
}
@media (max-width: 400px) {
  .brand { font-size: 17px; letter-spacing: .1em; }
  .brand small { display: none; }
}
@media (max-width: 720px) {
  .catalog__head { flex-wrap: wrap; }
  .catalog__tools { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .search-box { flex: 1 1 100%; }
  .search-box input { width: 100%; }
  .catalog__tools select { flex: 1; }
}
@media (max-width: 960px) {
  /* minmax(0,1fr) и в одну колонку: иначе длинная строка количества растягивает
     колонку шире экрана, а мобильный браузер в ответ отзумливает всю страницу
     (innerWidth 629 вместо 375) — горизонтального скролла при этом не появляется. */
  .pdp { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pdp__gallery { position: static; }
  .calc__out { grid-template-columns: 1fr 1fr; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .catalog { grid-template-columns: 1fr; }
  /* Фильтры в потоке заняли бы ~2000px над товарами — уводим в шторку справа. */
  .filters { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
    width: min(88vw, 340px); max-height: none; overflow: auto;
    background: #fff; padding: 20px 22px 32px;
    transform: translateX(100%); transition: transform .32s var(--ease);
    box-shadow: -10px 0 40px rgba(20,18,15,.18); }
  .filters.is-open { transform: none; }
  .filters__head { display: flex; }
  .filters-toggle { display: inline-flex; }
  .filters-back { display: block; }
  .banner, .modal__grid { grid-template-columns: 1fr; }
  .search-box input { width: 100%; }
  /* На узком экране чипы эффектов и поиск в одной строке дерутся за ширину и
     сжимают поле поиска до нечитаемого. Уводим эффекты на свою строку под шапкой
     каталога (заголовок + поиск остаются сверху). */
  .catalog__head { flex-wrap: wrap; }
  .cat-effects { order: 5; flex: 1 1 100%; margin-top: 4px; }
  /* Корзина: 1fr + фикс. 340px не влезают — колонка «Итого» уезжала за экран
     и растягивала страницу (гориз. скролл). Складываем в одну колонку. */
  .cart { grid-template-columns: 1fr; gap: 24px; }
  .summary { position: static; }
}

/* Страница эффекта/фактуры (как laminamrus /effects/...) */
.eff-hero { position: relative; min-height: min(40vh, 360px); display: flex; align-items: flex-end;
  overflow: hidden; background: var(--graphite); }
.eff-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.05); }
/* Затемнение снизу и по бокам — под светлый текст слева (заголовок) и справа (описание) */
.eff-hero__scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,14,12,.14) 0%, rgba(15,14,12,.72) 100%),
              linear-gradient(90deg, rgba(15,14,12,.34) 0%, transparent 32%, transparent 68%, rgba(15,14,12,.34) 100%); }
/* Баннер: заголовок слева, описание справа */
.eff-hero__inner { position: relative; z-index: 2; color: #fff; width: 100%; padding-top: 28px; padding-bottom: 34px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; text-align: left; }
.eff-hero__main { min-width: 0; }
.eff-hero__crumb { color: rgba(255,255,255,.75); margin-bottom: 14px; }
.eff-hero__crumb a { color: rgba(255,255,255,.75); }
.eff-hero__crumb a:hover { color: #fff; }
.eff-hero__title { font-size: clamp(40px, 6vw, 74px); line-height: 1; color: #fff; margin: 6px 0 10px; }
.eff-hero__count { font-size: 16px; color: rgba(255,255,255,.85); letter-spacing: .02em; margin-bottom: 22px; }
.eff-hero__desc { flex: 0 1 460px; text-align: right; font-size: 17px; line-height: 1.6;
  color: rgba(255,255,255,.9); margin: 0 0 6px; }
@media (max-width: 760px) {
  .eff-hero__inner { flex-direction: column; align-items: stretch; gap: 18px; }
  .eff-hero__desc { flex-basis: auto; text-align: left; }
}
.eff-cta { background: var(--stone-100); padding: 80px 0; text-align: center; }
.eff-cta h2 { font-size: clamp(28px, 3.4vw, 44px); }

/* ---------------------------------------------------------------------------
   Страница технической информации (/tech.html)
   Данные — по техдокументации Laminam; таблицы скроллятся внутри себя,
   чтобы на телефоне не расширять страницу (house-стандарт: нулевой гориз. скролл).
   --------------------------------------------------------------------------- */
/* Секция сама .wrap — padding только longhand, иначе сокращённая запись
   обнулит боковые поля .wrap и текст прилипнет к краю экрана. */
.tech-head { padding-top: 40px; padding-bottom: 8px; }
.tech-title { font-size: clamp(34px, 5vw, 60px); line-height: 1.02; margin: 8px 0 14px; }
.tech-lead { color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 640px; }
.tech-note { margin-top: 12px; font-size: 13px; }

/* Ключевые цифры */
/* Полоса ключевых цифр идёт сразу за героем и входит с ним в первый экран,
   поэтому у неё нет min-height: 100svh, в отличие от остальных секций. */
.tech-facts-sec { padding-top: 30px; padding-bottom: 34px; }
.tech-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tfact { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; background: #fff; }
.tfact__n { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1;
  color: var(--bronze-dark); }
.tfact__l { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  font-weight: 700; margin: 8px 0 10px; }
.tfact__d { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* Таблицы */
.tech-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tech-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.tech-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700; padding: 0 14px 10px 0; border-bottom: 1px solid var(--line); }
.tech-table td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tech-table tr:hover td { background: var(--sand); }
.tech-table__m { color: var(--muted); font-size: 13px; }
.tech-table__v { font-weight: 700; white-space: nowrap; }
.fmt-chip { display: inline-block; background: var(--stone-100); border-radius: 3px;
  padding: 3px 8px; margin: 0 4px 4px 0; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tech-flag { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--low); }

/* Поверхности */
.surf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.surf { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.surf:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
/* Макро-снимок фактуры + подпись блеска */
.surf__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone-200); }
.surf__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.surf:hover .surf__img img { transform: scale(1.05); }
.surf__gloss { position: absolute; bottom: 10px; left: 10px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: #fff; padding: 4px 9px; border-radius: 999px;
  background: rgba(20,18,15,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.surf__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* Карточки без снимка (DNA, Ki No Bi) — с бронзовой полосой слева, чтобы не выглядели «пустыми» */
.surf--noimg .surf__body { border-left: 3px solid var(--bronze); }
.surf__name { font-family: var(--font-display); font-size: 21px; line-height: 1; display: flex;
  align-items: baseline; gap: 8px; flex-wrap: wrap; }
.surf__name small { font-family: var(--font-sans); font-size: 12px; color: var(--muted); font-weight: 600; }
/* Схема профиля рельефа в разрезе */
.surf__scheme { background: var(--sand); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 8px; line-height: 0; }
.surf__scheme svg { display: block; }
.surf__desc { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; flex: 1; }
.surf__meta { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted);
  padding-top: 8px; border-top: 1px solid var(--line); }
.surf__meta b { color: var(--ink); font-weight: 600; }

/* Уход */
.care-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.care { border: 1px solid var(--line); border-radius: 10px; padding: 22px; background: #fff; }
.care h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  margin-bottom: 12px; }
.care ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.care li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5; }
.care li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.care--ok h4 { color: var(--ok); }
.care--ok li::before { content: '✓'; color: var(--ok); }
.care--no h4 { color: var(--out); }
.care--no li::before { content: '✕'; color: var(--out); }

/* Документы */
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.doc { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; background: #fff;
  text-decoration: none; color: inherit; font-size: 14px; font-weight: 600;
  transition: border-color .2s var(--ease), background .2s var(--ease); }
.doc:hover { border-color: var(--bronze); background: var(--sand); }
.doc__arr { color: var(--bronze-dark); flex: 0 0 auto; }

@media (max-width: 960px) {
  .tech-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tech-facts, .care-grid { grid-template-columns: 1fr; }
  .tech-head { padding-top: 28px; }
}
/* Ссылка на техданные под кнопкой спецификации (ширина — как у фото/кнопки) */
.pdp__techlink { display: block; width: min(100%, calc(74vh * 4 / 5)); text-align: center;
  padding: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--bronze-dark); }
.pdp__techlink:hover { color: var(--ink); }
/* Блок «Описание» декора на карточке товара */
.pdp-desc { max-width: 860px; margin: 28px 0 8px; }
.pdp-desc__title { font-family: var(--font-display); font-size: 28px; line-height: 1.15; margin: 0 0 16px; }
.pdp-desc__body p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; color: var(--ink-soft, #3a352e); }
.pdp-desc__body p:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .pdp-desc__title { font-size: 24px; } .pdp-desc__body p { font-size: 15px; } }
/* Сертификаты (перенесены с сайта производителя — не уводим клиента) */
.cert-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cert-h { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  font-weight: 700; margin-bottom: 12px; font-family: var(--font-sans); }
.cert-list { display: flex; flex-direction: column; gap: 8px; }
.cert { display: grid; grid-template-columns: 116px 1fr; gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.cert b { font-weight: 700; }
.cert span { color: var(--muted); font-size: 13px; }
/* Документация — карточки без внешних ссылок */
.doc--static { display: block; cursor: default; }
.doc--static:hover { border-color: var(--line); background: #fff; }
.doc__d { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--muted); }
@media (max-width: 760px) { .cert-cols { grid-template-columns: 1fr; gap: 20px; }
  .cert { grid-template-columns: 100px 1fr; } }

/* --- twO by Laminam: тёмная полоса на главной --- */
.two { position: relative; overflow: hidden; background: var(--graphite); color: #fff;
  padding-top: 88px; padding-bottom: 88px; }
.two__bg { position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.04); }
.two__scrim { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(15,14,12,.92) 0%, rgba(15,14,12,.78) 52%, rgba(15,14,12,.42) 100%); }
.two__inner { position: relative; z-index: 2; }
.two__main { max-width: 720px; }
.two__title { font-size: clamp(56px, 8vw, 108px); line-height: .9; color: #fff; margin: 10px 0 0;
  letter-spacing: -.02em; }
.two__title span { display: block; font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--bronze); margin-top: 10px; }
.two__lead { color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.65; margin: 22px 0 30px;
  max-width: 620px; }
.two__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.two__fact { border-top: 1px solid rgba(255,255,255,.22); padding-top: 14px; }
.two__fact b { display: block; font-family: var(--font-display); font-size: 30px; line-height: 1; color: #fff; }
.two__fact span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--bronze); font-weight: 700; margin: 6px 0 8px; }
.two__fact p { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.6); }
.two__cols { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 24px;
  font-size: 13px; color: rgba(255,255,255,.6); }
.two__cols a { border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 5px 13px;
  color: #fff; font-weight: 600; transition: .2s var(--ease); }
.two__cols a:hover { background: #fff; color: var(--ink); border-color: #fff; }
.two__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.two__btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.two__btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
@media (max-width: 960px) { .two__facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .two { padding-top: 56px; padding-bottom: 56px; }
  .two__scrim { background: linear-gradient(180deg, rgba(15,14,12,.86) 0%, rgba(15,14,12,.92) 100%); }
}
/* Документация: файлы у нас, скачивание в один клик */
.docgrp { margin-bottom: 28px; }
.docgrp__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.docgrp__head h4 { font-family: var(--font-display); font-size: 21px; }
.docgrp__head span { font-size: 13px; color: var(--muted); }
.doc__ico { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--bronze-dark); background: var(--stone-100); border-radius: 3px; padding: 5px 7px; }
.doc__body { min-width: 0; flex: 1; }
.doc__body b { display: block; }
.bim { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; background: #fff; }
.bim p { font-size: 14px; color: var(--muted); max-width: 620px; margin: 0; }
@media (max-width: 640px) { .doc { flex-wrap: wrap; } }
/* Вес заказа в корзине: брутто крупно, разбивка нетто/тара — мелко */
.wblock { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 14px 0 4px;
  background: var(--stone-100); }
.wblock__head { display: flex; align-items: baseline; gap: 8px; }
.wblock__head span:first-child { flex: 1; font-size: 13px; color: var(--muted); }
.wblock__head b { font-size: 20px; font-weight: 700; }
.wblock__gross { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.wblock__split { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.wblock__split span { color: var(--muted); }
.wblock__split b { text-align: right; font-weight: 600; }
.wblock__warn { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  color: var(--low); line-height: 1.45; }
/* Курс под ценой — только у позиций, которые в прайсе в евро */
.pdp__fx { font-size: 12px; font-weight: 600; color: var(--bronze-dark); }
.pdp__fx span { font-weight: 400; color: var(--muted); }
/* Непрайсовый вариант в списке «Все варианты» */
.vrow--offprice { background: repeating-linear-gradient(135deg, transparent, transparent 8px, rgba(184,134,43,.04) 8px, rgba(184,134,43,.04) 16px); }
.vrow__tag--off { background: #fbf1dc; color: #8a6d1f; }
.vrow__onreq { font-size: 13px; font-weight: 700; color: var(--bronze-dark); white-space: nowrap; }
/* Цена «по запросу» в шапке карточки */
.pdp__price--onreq { font-size: 22px; font-weight: 700; color: var(--bronze-dark); }
/* Блок заявки для непрайсового варианта */
.pdp__offprice { border-color: var(--bronze); }
.offprice__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.offprice__tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #8a6d1f; background: #fbf1dc; padding: 4px 10px; border-radius: 999px; }
.offprice__text { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0 0 16px; }
.pdp__offprice .btn { width: 100%; }

/* --- Избранное и сравнение --- */
/* Кнопки действий на карточке товара */
/* Избранное и сравнение — поверх снимка, в правом верхнем углу.
   Тот же приём, что на карточках каталога, поэтому пользователь ищет их там же. */
.pdp-acts { position: absolute; top: 14px; right: 14px; z-index: 2;
  display: flex; gap: 8px; }
.pdp-act { display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  font-size: 17px; line-height: 1; color: var(--muted);
  background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter: saturate(1.4) blur(9px); backdrop-filter: saturate(1.4) blur(9px);
  box-shadow: 0 2px 10px rgba(20,18,16,.12);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.pdp-act:hover { color: var(--bronze-dark); border-color: var(--bronze); background: #fff; }
.pdp-act:active { transform: scale(.94); }
.pdp-act:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(168,146,107,.35); }
.pdp-act.is-on { background: var(--bronze); border-color: var(--bronze); color: #fff; }
/* При увеличении снимка кнопки мешают рассматривать плиту */
.pdp__main.zoom .pdp-acts { opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
@media (max-width: 640px) {
  .pdp-acts { top: 10px; right: 10px; gap: 6px; }
  .pdp-act { width: 40px; height: 40px; font-size: 16px; }
}

/* Кнопки поверх карточки в избранном */
.fav-card__rm, .fav-card__cmp { position: absolute; z-index: 2; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; font-size: 14px; line-height: 1; color: var(--muted);
  display: flex; align-items: center; justify-content: center; transition: .2s var(--ease); }
.fav-card__rm { top: 10px; right: 10px; }
.fav-card__cmp { top: 10px; left: 10px; }
.fav-card__rm:hover { color: var(--out); border-color: var(--out); }
.fav-card__cmp:hover { color: var(--bronze-dark); border-color: var(--bronze); }
.fav-card__cmp.is-on { background: var(--bronze); border-color: var(--bronze); color: #fff; }

/* Пустое состояние */
.empty-state { text-align: center; padding: 60px 20px 80px; color: var(--muted); }
.empty-state p { max-width: 460px; margin: 0 auto 22px; line-height: 1.6; }

/* Таблица сравнения */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.cmp-table th, .cmp-table td { padding: 12px 14px; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top; }
.cmp-table th { background: #fff; }
.cmp-table__lead { width: 150px; color: var(--muted); font-size: 13px; font-weight: 600;
  background: var(--stone-100); white-space: nowrap; }
/* Строки с различиями — то, ради чего открывают сравнение */
.cmp-table tr.is-diff td:not(.cmp-table__lead) { background: var(--sand); font-weight: 600; }
.cmp-col { position: relative; width: 180px; }
.cmp-col__img { display: block; aspect-ratio: 4/3; border-radius: 6px; overflow: hidden;
  background: var(--stone-200); margin-bottom: 8px; }
.cmp-col__img img, .cmp-col__img > div { width: 100%; height: 100%; object-fit: cover; }
.cmp-col__name { display: block; font-family: var(--font-display); font-size: 18px; line-height: 1.15;
  color: var(--ink); }
.cmp-col__rm { position: absolute; top: 6px; right: 6px; z-index: 2; width: 26px; height: 26px;
  border-radius: 50%; border: none; background: rgba(255,255,255,.9); cursor: pointer;
  color: var(--muted); font-size: 12px; }
.cmp-col__rm:hover { color: var(--out); }
.cmp-col__fav { margin-top: 6px; background: none; border: none; cursor: pointer; padding: 0;
  font-size: 17px; color: var(--muted); }
.cmp-col__fav.is-on { color: var(--bronze-dark); }
@media (max-width: 640px) { .cmp-col { width: 140px; } .cmp-table__lead { width: 110px; } }

/* Избранное и сравнение на карточке листинга — там, где раньше был бейдж наличия.
   Специфичность `.p-card__img > .p-card__acts` обязательна: правило `.p-card__img > div`
   выше растягивает любой div на всю картинку, и блок кнопок перекрыл бы изображение. */
.p-card__img > .p-card__acts { position: absolute; inset: 12px 12px auto auto;
  width: auto; height: auto; display: flex; gap: 8px; z-index: 2; }
.p-card__act { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1px solid rgba(255,255,255,.65); background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(1.3) blur(7px); backdrop-filter: saturate(1.3) blur(7px);
  font-size: 15px; line-height: 1; color: var(--muted);
  display: flex; align-items: center; justify-content: center; transition: .2s var(--ease); }
/* Карточка — ссылка, поэтому кнопки проявляются на наведении, но на тач-экранах
   :hover не срабатывает, и там они видны всегда (см. медиазапрос ниже). */
.p-card__act:hover { color: var(--bronze-dark); border-color: var(--bronze); background: #fff; }
.p-card__act:active { transform: scale(.92); }
.p-card__act:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(168,146,107,.30); }
.p-card__act.is-on { background: var(--bronze); border-color: var(--bronze); color: #fff; }
/* Тап-таргет на узких экранах — не меньше 40px (house standard) */
@media (max-width: 720px) {
  .p-card__act { width: 40px; height: 40px; font-size: 17px; }
}
@media (hover: hover) {
  .p-card__acts { opacity: 0; transition: opacity .2s var(--ease); }
  .p-card:hover .p-card__acts, .p-card__acts:focus-within { opacity: 1; }
  /* Отмеченное показываем всегда — иначе не видно, что декор уже в избранном */
  .p-card__acts:has(.is-on) { opacity: 1; }
}

/* Переход из фактуры в каталог с фильтром + счётчик артикулов.
   .surf__body уже flex-column выше — здесь только новые элементы. */
.surf__count { margin-left: auto; align-self: center; font-size: 12px; font-weight: 600; line-height: 1;
  padding: 4px 9px; border-radius: 999px; color: var(--bronze-dark);
  background: var(--sand); border: 1px solid var(--line); }
/* Ссылка прижата к низу карточки, чтобы в сетке они читались одной линией */
.surf__link { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center;
  gap: 7px; font-size: 13px; font-weight: 600; color: var(--bronze-dark);
  text-decoration: none; transition: gap .2s var(--ease); }
.surf__link:hover { gap: 11px; }
.surf__arr { transition: transform .2s var(--ease); }
.surf__link:hover .surf__arr { transform: translateX(2px); }
.surf__link--off { color: var(--muted); font-weight: 400; cursor: default; }

/* Артикул в строке выбора варианта: моноширинный, чтобы коды читались столбиком */
.vrow__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; letter-spacing: .02em; color: var(--ink); opacity: .75; }
/* В модалке быстрого добавления цена стоит последней — у правого края строки.
   На карточке товара порядок прежний, поэтому правило ограничено .vlist. */
.vlist .vrow { grid-template-columns: 1fr auto auto; }
.vlist .vrow__price { justify-self: end; }
@media (max-width: 560px) {
  /* Три колонки в узкой модалке не помещаются: спец на всю ширину, под ней наличие и цена */
  .vlist .vrow { grid-template-columns: 1fr auto; }
  .vlist .vrow__spec { grid-column: 1 / -1; }
  .vlist .vrow__stock { justify-self: start; }
}

/* ============================================================
   Техническая страница: герой, липкое подменю, экранные блоки
   ============================================================ */

/* Герой ниже, чем на главной: страница справочная, разделы должны быть видны сразу */
/* Высота считается так, чтобы герой, подменю и полоса ключевых цифр уложились
   в один экран: 52svh + ~50px меню + ~300px цифры ≈ 100svh на типовом ноутбуке. */
.tech-hero { position: relative; min-height: 52svh; display: flex; align-items: flex-end;
  padding: 104px 0 34px; overflow: hidden; }
.tech-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.04); }
/* Затемнение снизу вверх: текст читается, а верх кадра остаётся открытым */
.tech-hero::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,16,.30) 0%, rgba(20,18,16,.58) 55%, rgba(20,18,16,.78) 100%); }
.tech-hero__inner { position: relative; z-index: 2; color: #fff; }
.tech-hero__inner .h-eyebrow { color: #d8c3a3; }
.tech-hero .tech-title { color: #fff; margin: 8px 0 10px; font-size: clamp(30px, 4vw, 48px); }
.tech-hero .tech-lead { color: rgba(255,255,255,.86); max-width: 620px; font-size: 15.5px; }

/* Быстрые ссылки в герое — дублируют подменю: до него ещё надо доскроллить */
.tech-hero__jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tech-hero__chip { display: inline-block; padding: 8px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 600; text-decoration: none; color: #fff;
  border: 1px solid rgba(255,255,255,.38); background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: .2s var(--ease); }
.tech-hero__chip:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.7); }

/* Подменю липнет ровно под шапкой (её высота 73px) */
.tech-nav { position: sticky; top: 73px; z-index: 30;
  background: rgba(250,249,247,.94); -webkit-backdrop-filter: saturate(1.4) blur(9px);
  backdrop-filter: saturate(1.4) blur(9px); border-bottom: 1px solid var(--line); }
.tech-nav__inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; }
.tech-nav__inner::-webkit-scrollbar { display: none; }
.tech-nav__link { flex: 0 0 auto; padding: 15px 14px; font-size: 13.5px; font-weight: 600;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color .2s var(--ease); }
.tech-nav__link:hover { color: var(--ink); }
.tech-nav__link.is-active { color: var(--bronze-dark); border-bottom-color: var(--bronze); }

/* Блок в размер экрана. min-height, а не height: таблица ISO и сетка из 16 фактур
   выше экрана, и жёсткая высота обрезала бы их. Короткие секции центрируются,
   длинные растут вниз — визуальный ритм сохраняется, контент не теряется. */
/* ВАЖНО: только padding-top/bottom. Секции несут класс .wrap с боковыми полями
   (32px, на телефоне 20px), и краткая запись padding обнулила бы их — текст прижался
   бы вплотную к краю экрана. Эта ошибка здесь уже случалась. */
.tech-sec { min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-top: 72px; padding-bottom: 72px; scroll-margin-top: 122px; }
/* Чередование фона отделяет блоки друг от друга без линеек */
.tech-sec--alt { background: var(--stone-100); }
/* Секции с фоновым кадром: картинка приглушена, текст остаётся основным */
.tech-sec--photo { position: relative; background-size: cover; background-position: center;
  background-attachment: fixed; }
.tech-sec--photo::before { content: ''; position: absolute; inset: 0;
  background: rgba(250,249,247,.93); }
.tech-sec--photo > * { position: relative; z-index: 1; }

@media (max-width: 1080px) {
  .tech-nav { top: 73px; }
  .tech-sec { min-height: auto; padding-top: 56px; padding-bottom: 56px; scroll-margin-top: 118px; }
  /* fixed-фон на мобильных даёт рывки при прокрутке и жрёт батарею */
  .tech-sec--photo { background-attachment: scroll; }
}
@media (max-width: 900px) {
  /* На планшете и телефоне четыре цифры в ряд не читаются — 2×2, и первый экран
     перестаёт быть требованием: важнее, чтобы текст не сжимался. */
  .tech-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tech-hero { min-height: 46svh; padding: 92px 0 26px; }
  .tech-facts-sec { padding-top: 22px; padding-bottom: 26px; }
  .tech-nav__link { padding: 13px 11px; font-size: 13px; }
  .tech-sec { padding-top: 44px; padding-bottom: 44px; }
}

/* Подбор средства по загрязнению */
.stain { margin: 0 0 30px; }
.stain__q { font-weight: 600; font-size: 15px; margin-bottom: 12px; }
.stain__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stain__chip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 14px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink); background: #fff; border: 1px solid var(--line);
  transition: .18s var(--ease); }
.stain__chip:hover { border-color: var(--bronze); color: var(--bronze-dark); }
.stain__chip.is-on { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.stain__icon { font-size: 15px; line-height: 1; }

/* Ответ появляется под кнопками; левая цветная грань кодирует тип средства */
.stain__out:not(:empty) { margin-top: 18px; }
.stain__card { background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 20px 22px; border-left: 3px solid var(--bronze); }
.stain__card--alkaline  { border-left-color: #6f8fb8; }
.stain__card--degreaser { border-left-color: #c8a24a; }
.stain__card--acid      { border-left-color: #a8746f; }
.stain__card--solvent   { border-left-color: #7f9b7f; }
.stain__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.stain__badge { font-family: var(--font-display); font-size: 20px; }
.stain__for { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stain__hint { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.stain__row { font-size: 14px; padding: 10px 12px; background: var(--stone-100);
  border-radius: 5px; margin-bottom: 14px; }
.stain__steps { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.stain__steps li { margin-bottom: 5px; }
.stain__rinse { margin: 14px 0 0; font-size: 13px; color: var(--bronze-dark); font-weight: 600; }
.stain__src { margin-top: 12px; font-size: 12px; }
@media (max-width: 640px) {
  .stain__chip { padding: 8px 12px; font-size: 13px; }
  .stain__card { padding: 16px; }
}

/* Низкие экраны ноутбуков (13–14" часто 1440×700–800): при той же ширине высоты меньше,
   и первый экран перестаёт вмещать герой с цифрами. Ужимаем по высоте, а не по ширине —
   ширина здесь ни при чём. */
@media (min-width: 901px) and (max-height: 800px) {
  .tech-hero { min-height: 42svh; padding: 90px 0 24px; }
  .tech-hero .tech-title { font-size: clamp(26px, 3vw, 38px); margin: 6px 0 8px; }
  .tech-hero .tech-lead { font-size: 14.5px; }
  .tech-hero__jump { margin-top: 14px; }
  .tech-hero__chip { padding: 6px 12px; font-size: 12.5px; }
  .tech-facts-sec { padding-top: 18px; padding-bottom: 22px; }
  .tfact { padding: 13px 15px; }
  .tfact__d { font-size: 12px; line-height: 1.4; }
  .tech-nav__link { padding: 12px 13px; }
}

/* Категории отделок: фильтр над сеткой */
.surf-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.surf-tab { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink); background: #fff; border: 1px solid var(--line); transition: .18s var(--ease); }
.surf-tab:hover { border-color: var(--bronze); color: var(--bronze-dark); }
.surf-tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.surf-tab__n { font-size: 11px; font-weight: 700; opacity: .55; }
.surf-tab.is-on .surf-tab__n { opacity: .8; }
/* Пояснение к выбранной категории — появляется под фильтром */
.surf-hint { margin: 0 0 18px; max-width: 640px; }
/* Отделки без позиций в каталоге приглушены: они существуют у производителя,
   но в нашем ассортименте их нет — вводить ими в заблуждение не нужно */
.surf:has(.surf__link--off) { opacity: .72; }
.surf:has(.surf__link--off):hover { opacity: 1; }

/* Круглое превью фактуры. Показывается там, где поверхность названа словом:
   в переключателе поверхностей и в списке вариантов. */
/* Внутри — SVG с линией профиля, поэтому нужен светлый фон, а не картинка */
.fin-ava { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%; overflow: hidden; vertical-align: middle;
  margin-right: 8px; background: var(--stone-100); border: 1px solid var(--line); }
.fin-ava svg { display: block; width: 100%; height: 100%; }
.fin-ava--xs { width: 15px; height: 15px; margin-right: 6px; }
/* Чип с картинкой: выравниваем содержимое и поджимаем левый отступ под кружок */
.vchip:has(.fin-ava) { display: inline-flex; align-items: center; padding-left: 7px; }
.vrow__sub:has(.fin-ava) { display: flex; align-items: center; }

/* Крупный аватар фактуры в строке варианта — отдельная колонка, по центру высоты строки */
.fin-ava--row { width: 44px; height: 44px; margin-right: 0; align-self: center; }
.vlist .vrow:has(.fin-ava--row) { grid-template-columns: auto 1fr auto auto; }
@media (max-width: 560px) {
  .fin-ava--row { width: 38px; height: 38px; }
  /* В узкой раскладке спецификация занимает всю ширину, аватар остаётся слева от неё */
  .vlist .vrow:has(.fin-ava--row) { grid-template-columns: auto 1fr; }
  .vlist .vrow:has(.fin-ava--row) .vrow__spec { grid-column: 2 / -1; }
}

/* Фактура поверх снимка плиты */
.pdp__main { position: relative; }
.pdp__fin { position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: flex; align-items: center; gap: 10px; padding: 7px 15px 7px 7px;
  border-radius: 999px; background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(1.4) blur(9px); backdrop-filter: saturate(1.4) blur(9px);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 3px 14px rgba(20,18,16,.13); }
.fin-ava--big { width: 46px; height: 46px; margin-right: 0; }
.pdp__fin-l { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
/* При увеличении снимка подпись мешает разглядывать плиту */
.pdp__main.zoom .pdp__fin { opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
@media (max-width: 640px) {
  .pdp__fin { left: 10px; bottom: 10px; padding: 6px 12px 6px 6px; gap: 8px; }
  .fin-ava--big { width: 38px; height: 38px; }
  .pdp__fin-l { font-size: 12px; }
}

/* Подложка кружка по блеску: матовые фактуры — тёплый камень, зеркальные — холодный
   светлый градиент. Без этого гладкие фактуры (плоский профиль) выглядели одинаково. */
.fin-ava--g1 { background: #e7e3dd; }
.fin-ava--g2 { background: linear-gradient(160deg, #efece7, #e3dfd8); }
.fin-ava--g3 { background: linear-gradient(160deg, #f4f2ee, #e6e2db); }
.fin-ava--g4 { background: linear-gradient(155deg, #fbfaf8 12%, #e4e6e6 88%); }
.fin-ava--g5 { background: linear-gradient(150deg, #ffffff 8%, #dfe4e8 55%, #eef1f2 100%); }

/* Тап-таргеты техстраницы на телефоне: house standard требует ≥40px по нажимаемой
   области. Мерил на 375px — быстрые ссылки в герое, вкладки поверхностей, кнопки
   подбора средства и ссылка в каталог не дотягивали (34–39px). */
@media (max-width: 640px) {
  .tech-hero__chip { min-height: 40px; display: inline-flex; align-items: center; padding: 0 15px; }
  .surf-tab { min-height: 40px; }
  .stain__chip { min-height: 40px; }
  /* Ссылка в каталог — во всю ширину карточки, промахнуться сложно */
  .surf__link { min-height: 40px; padding-top: 12px; }
}

/* Остатки по складам — служебный блок на карточке товара (видят только сотрудники).
   Оформлен иначе, чем клиентские блоки: рамка-пунктир и метка, чтобы менеджер
   в разговоре с клиентом не спутал служебные цифры с тем, что видит покупатель. */
.whblock { border: 1px dashed var(--line); border-radius: 8px; padding: 12px 14px;
  margin: 0 0 16px; background: var(--sand); }
.whblock__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-bottom: 10px; }
.whblock__badge { font-size: 10px; font-weight: 600; letter-spacing: .04em;
  text-transform: none; padding: 2px 8px; border-radius: 999px;
  background: var(--bronze); color: #fff; }
.wh { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid var(--line); }
.wh:first-of-type { border-top: none; }
.wh__n { flex: 1 1 auto; font-size: 14px; font-weight: 600; }
.wh__n small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.wh__q { flex: 0 0 auto; font-size: 15px; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums; }
.wh__q small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
/* Партии: их бывает много, поэтому мелко и в перенос */
.wh__p { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 11px; color: var(--muted); }
.wh--empty { color: var(--muted); font-size: 13px; }
.wh--factory { border-top: 1px solid var(--line); margin-top: 4px; color: var(--muted); }
.wh--factory .wh__q { font-weight: 600; }

/* Заказы в личном кабинете */
.acc-h { font-family: var(--font-display); font-size: 24px; margin: 38px 0 14px; }
.acc-scroll { overflow-x: auto; }
.acc-orders { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.acc-orders th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600; padding: 0 12px 8px 0; border-bottom: 1px solid var(--line); }
.acc-orders td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.acc-sum { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.acc-inwork { margin-left: 6px; font-size: 12px; color: var(--bronze-dark); font-weight: 600; }
/* Состав заказа — раскрывается под строкой */
.acc-items__in { padding: 4px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.acc-item { display: flex; align-items: baseline; gap: 14px; font-size: 13px; }
.acc-item__n { flex: 1 1 auto; font-weight: 600; }
.acc-item__n small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.acc-item__q, .acc-item__p { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.acc-item__p { font-weight: 700; min-width: 92px; text-align: right; }
@media (max-width: 640px) {
  .acc-h { font-size: 21px; margin-top: 30px; }
  .acc-item { flex-wrap: wrap; gap: 6px 12px; }
  .acc-item__p { min-width: 0; }
}

/* Линейные иконки вместо эмодзи. Наследуют цвет через currentColor, поэтому
   подсветка, активные состояния и тёмные подложки работают без отдельных правил.
   Размер задаётся em — иконка следует за шрифтом кнопки, в которой стоит. */
.ico { display: inline-flex; align-items: center; justify-content: center;
  width: 1.35em; height: 1.35em; flex: 0 0 auto; }
.ico svg { width: 100%; height: 100%; display: block; }
/* В шапке иконки крупнее текста — там они самостоятельные элементы, а не подписи */
.cart-link .ico, .search-link .ico { width: 21px; height: 21px; }
/* Кнопка быстрого добавления в каталоге: иконка по центру круга */
.p-card__add .ico { width: 19px; height: 19px; }

/* Панель «оформляю за клиента» — видна только сотруднику. Намеренно заметная:
   перепутать, за кого оформляешь, дороже, чем лишний акцент в интерфейсе. */
.acting { border: 1px solid var(--bronze); border-radius: 8px; padding: 14px 16px;
  margin-bottom: 18px; background: #fffdf7; }
.acting__head { font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--bronze-dark); font-weight: 700; margin-bottom: 10px; }
.acting__inp { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 6px; font-size: 14px; }
.acting__list { margin-top: 8px; max-height: 240px; overflow-y: auto; }
.acting__row { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 9px 10px; border: none; border-radius: 6px; background: none; cursor: pointer; }
.acting__row:hover { background: var(--sand); }
.acting__row-n { font-weight: 600; font-size: 14px; }
.acting__row-m { font-size: 12px; color: var(--muted); }
.acting__empty { font-size: 13px; color: var(--muted); padding: 8px 2px; }
.acting__new { background: none; border: none; padding: 0; cursor: pointer;
  color: var(--bronze-dark); font-weight: 600; font-size: 13px; }
.acting__on { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acting__tag { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  background: var(--bronze); color: #fff; padding: 3px 8px; border-radius: 4px; font-weight: 700; }
.acting__meta { font-size: 12px; color: var(--muted); }
.acting__x { margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 16px; min-width: 40px; min-height: 40px; }
.acting__x:hover { color: var(--ink); }
.acting__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acting__f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.acting__f input, .acting__f select { height: 36px; padding: 0 10px; border: 1px solid var(--line);
  border-radius: 6px; font-size: 14px; color: var(--ink); }
.acting__btns { display: flex; gap: 8px; margin-top: 12px; }
.acting__err { color: var(--out); font-size: 13px; margin-top: 8px; }
@media (max-width: 640px) { .acting__grid { grid-template-columns: 1fr; } }

/* Кабинет: роль подписью над именем, условия дилера — отдельной плашкой */
.acc-role { font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--bronze-dark); font-weight: 700; margin-bottom: 4px; }
.acc-cond { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-top: 14px;
  background: #fff; font-size: 13px; color: var(--muted); }
.acc-cond b { font-size: 20px; color: var(--bronze-dark); }
.acc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; margin-top: 20px; }
.acc-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  transition: border-color .2s var(--ease), transform .2s var(--ease); }
.acc-tile:hover { border-color: var(--bronze); transform: translateY(-2px); }
.acc-tile b { font-size: 16px; }
.acc-tile span { font-size: 13px; color: var(--muted); }

/* Смена пароля в кабинете — свёрнута, чтобы не мешать основному содержимому */
.acc-pass { margin-top: 22px; border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 16px; background: #fff; }
.acc-pass summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.acc-pass__body { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; max-width: 340px; }

/* Эффекты — строкой чипов между заголовком «Каталог» и поиском (в потоке .catalog__head).
   Занимают свободное место посередине, на узком экране прокручиваются вбок, а не
   переносятся: перенос на три ряда съедает пол-экрана до первого товара. */
.cat-effects { flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; overflow-x: auto;
  /* Чипы по центру доступной полосы; safe — чтобы при переполнении строка не
     срезалась слева, а прокручивалась с начала. */
  justify-content: safe center;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cat-effects::-webkit-scrollbar { display: none; }
.ef-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; cursor: pointer; font-family: var(--font-sans); font-size: 14px;
  font-weight: 600; color: var(--muted); transition: .2s var(--ease); }
.ef-chip:hover { border-color: var(--bronze); color: var(--ink); }
.ef-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.ef-chip__n { font-size: 12px; font-weight: 500; opacity: .65; }

/* --- Карточка коллекции: картинка-ссылка + две кнопки --- */
.coll-card__link { display: block; }
.coll-card__acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
/* «В каталог» (btn--ghost) лежит поверх фото коллекции на тёмном градиенте, а базовый
   btn--ghost — тёмный текст на светлой рамке, и на фото он сливался. Делаем контурную
   кнопку светлой, как в overlay-шапке, с лёгкой подложкой для контраста на светлых фото. */
.coll-card__acts .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6);
  background: rgba(0,0,0,.22); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.coll-card__acts .btn--ghost:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }
.coll-card__acts .btn { flex: 1 1 auto; text-align: center; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center; }

/* --- Страница коллекции --- */
.chero { position: relative; min-height: clamp(320px, 46vh, 460px); display: flex;
  align-items: flex-end; overflow: hidden; }
.chero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Вуаль снизу вверх: текст лежит внизу, и затемнять весь снимок незачем — материал
   должен остаться виден, ради него сюда и пришли. */
.chero__veil { position: absolute; inset: 0; background: linear-gradient(to top,
  rgba(20,18,15,.78) 0%, rgba(20,18,15,.45) 42%, rgba(20,18,15,.05) 100%); }
.chero__body { position: relative; padding: 48px 0 40px; color: #fff; }
.chero__crumb { font-size: 13px; color: rgba(255,255,255,.75); margin-bottom: 10px; }
.chero__crumb a { color: rgba(255,255,255,.9); text-decoration: underline; }
.chero h1 { font-family: var(--font-display); font-size: clamp(34px, 6vw, 56px);
  line-height: 1.05; margin: 0 0 10px; }
.chero__lead { font-size: clamp(15px, 2vw, 18px); line-height: 1.55; max-width: 46ch;
  color: rgba(255,255,255,.88); margin: 0 0 22px; }
.chero__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.btn--light { color: #fff; border-color: rgba(255,255,255,.55); }
.btn--light:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.cfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin: 34px 0 8px; }
.cfact { border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: #fff; }
.cfact b { display: block; font-family: var(--font-display); font-size: 30px;
  color: var(--bronze-dark); line-height: 1; }
.cfact span { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.cfact small { display: block; font-size: 12px; color: var(--muted); margin-top: 8px;
  line-height: 1.5; }

.ctext { max-width: 68ch; margin: 28px 0 10px; font-size: 16px; line-height: 1.7; }
.ctext h3 { font-family: var(--font-display); font-size: 24px; margin: 26px 0 10px; }
.ctext p { margin: 0 0 14px; }
.csec { font-family: var(--font-display); font-size: 28px; margin: 40px 0 18px;
  padding-top: 22px; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .chero__body { padding: 32px 0 28px; } }

/* Ошибка поля: подпись под ним, а не всплывающая подсказка — та исчезает раньше,
   чем человек успевает прочитать, и на телефоне перекрывает клавиатуру */
.field__err { font-size: 12px; color: var(--out); margin-top: 4px; min-height: 0; }
.field__err:empty { display: none; }
input.is-bad, .acting__f input.is-bad { border-color: var(--out); }
input.is-bad:focus { box-shadow: 0 0 0 3px rgba(176,58,58,.14); }

/* Готовая ссылка на КП после формирования (в корзине) */
.kp-linkbox { display: flex; gap: 8px; margin-top: 14px; max-width: 480px; }
.kp-linkbox__in { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 7px; font-size: 13px; font-family: ui-monospace, monospace; color: var(--muted); background: #fff; }

/* Кнопка-иконка «в КП» на карточке товара (только сотруднику). Квадратная, по высоте
   рядом с «В корзину»; галочка проступает поверх иконки на миг после добавления. */
.qty-kp { flex: 0 0 auto; width: 48px; padding: 0; position: relative; }
.qty-kp .ico { display: inline-flex; }
.qty-kp .ico svg { width: 20px; height: 20px; }
.qty-kp__done { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: var(--bronze); color: #fff; border-radius: inherit;
  opacity: 0; transition: opacity .15s var(--ease); font-weight: 700; }
.qty-kp.is-done .qty-kp__done { opacity: 1; }

/* Черновик КП на странице корзины (сотруднику) */
.kp-draft { margin-bottom: 22px; }
.kp-draft__card { border: 1px solid var(--bronze); border-radius: 10px; padding: 18px 20px;
  background: #fffdf8; }
.kp-draft__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kp-draft__head .ico svg { width: 20px; height: 20px; }
.kp-draft__head b { font-size: 16px; }
.kp-draft__n { font-size: 13px; color: var(--muted); }
.kp-draft__clear { margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 13px; }
.kp-draft__clear:hover { color: var(--ink); }
.kp-draft__rows { margin: 12px 0; }
.kp-draft__row { display: flex; align-items: center; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--line); }
.kp-draft__nm { font-weight: 600; font-size: 14px; }
.kp-draft__sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kp-draft__pr { margin-left: auto; font-weight: 600; white-space: nowrap; }
.kp-draft__rm { background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 15px; min-width: 32px; min-height: 32px; }
.kp-draft__rm:hover { color: var(--out); }
.kp-draft__total { display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 10px; border-top: 2px solid var(--ink); margin-top: 8px; }
.kp-draft__total b { font-size: 20px; color: var(--bronze-dark); }
.kp-draft__note { width: 100%; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 7px; font: inherit; font-size: 14px; resize: vertical; }

/* --- Заголовок раздела фильтра с кнопками (снять выбор / свернуть) --- */
.filter-group__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fg-acts { display: flex; gap: 4px; flex: 0 0 auto; }
/* Чуть заметнее: тонкая рамка + подложка, чтобы иконки читались как кнопки, а не терялись. */
.fg-btn { width: 26px; height: 26px; border: 1px solid var(--line); background: #fff; cursor: pointer;
  color: var(--ink); border-radius: 6px; font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; transition: .15s var(--ease); }
.fg-btn:hover { background: var(--stone-100); border-color: var(--bronze); color: var(--ink); }
.fg-btn--clear:hover { border-color: #c05b5b; color: #c05b5b; }
.fg-btn--toggle { transition: transform .2s var(--ease), background .15s; }
.filter-group.is-collapsed .fg-btn--toggle { transform: rotate(-90deg); }
/* Свёрнутый раздел — прячем опции, заголовок остаётся */
.filter-group.is-collapsed .filter-group__body { display: none; }

/* --- Юридические страницы (политика, оферта, cookie) --- */
.legal { max-width: 820px; margin: 0 auto; padding: 32px 0 64px; }
.legal h1 { font-family: var(--font-display); font-size: clamp(28px,3.4vw,40px); line-height: 1.1; margin: 0 0 8px; }
.legal__date { color: var(--muted); font-size: 13px; margin-bottom: 28px; }
.legal h2 { font-family: var(--font-display); font-size: 23px; margin: 32px 0 10px; }
.legal h3 { font-size: 16px; margin: 20px 0 6px; }
.legal p, .legal li { font-size: 15px; line-height: 1.72; color: var(--ink-soft, #3a352e); }
.legal ul, .legal ol { padding-left: 22px; margin: 8px 0 12px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--bronze-dark); text-decoration: underline; }
.legal__req { background: var(--sand); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; font-size: 14px; line-height: 1.7; margin: 18px 0; }
@media (max-width: 640px) { .legal h1 { font-size: 26px; } .legal h2 { font-size: 20px; } }

/* Cookie-баннер (согласие на нижней кромке экрана) */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--ink);
  color: rgba(255,255,255,.9); padding: 14px 20px; display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; justify-content: center; box-shadow: 0 -8px 30px rgba(20,18,15,.22); }
.cookie-bar p { margin: 0; font-size: 13.5px; line-height: 1.5; max-width: 720px; }
.cookie-bar a { color: var(--bronze); text-decoration: underline; }
.cookie-bar__btn { flex: 0 0 auto; padding: 9px 22px; border-radius: 6px; border: 0; cursor: pointer;
  background: var(--bronze); color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 14px; }
.cookie-bar__btn:hover { background: var(--bronze-dark); }

/* Чекбокс согласия на обработку ПДн в формах */
.consent { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0; font-size: 12.5px;
  line-height: 1.45; color: var(--muted); }
.consent input { margin-top: 2px; flex: 0 0 auto; }
.consent a { color: var(--bronze-dark); text-decoration: underline; }