/* ============================================================
   Betek — интернет-магазин. CSS на токенах Betek Design System.
   ============================================================ */

:root{
  /* Нейтральная база */
  /* Чёрный — чистый; светлый фон — Pale Ivory #F3F0E7 */
  --ink-900:#000000; --ink-800:#141414; --ink-700:#2c2c2c;
  --ink-600:#444444; --ink-500:#5d5d5d; --ink-400:#808080;
  --ink-300:#9c9c9c; --ink-200:#c4c2bd;
  --stone-50:#f3f0e7; --stone-100:#eae7dc; --stone-200:#e0dcd0;
  --paper:#fffdf7;
  --line:#d9d4c8; --line-strong:#c6c0b2;
  /* --grey-cool — подложка фото товара. Pale Ivory в обеих темах;
     светлой она обязана быть всегда: packshot колеруется multiply. */
  --grey-bucket:#c9cdce; --grey-cool:#f3f0e7;

  /* Спектр «Be Your Color» */
  --hue-yellow:#ffc20e; --hue-amber:#f6911e; --hue-orange:#f26a1b;
  --hue-red:#e12b27; --hue-magenta:#c0297e; --hue-violet:#6e2c8b;
  --hue-indigo:#2e3a8c; --hue-blue:#1e72c8; --hue-teal:#009a93;
  --hue-green:#4ca82e; --hue-lime:#afc81e;

  /* Корпоративный цвет — Slate #535366 (был синий) */
  --slate-950:#26262f; --slate-900:#3a3a48; --slate-800:#535366;
  --slate-600:#6a6a80; --slate-400:#9a9aad; --slate-100:#e7e7ed;
  /* Акценты */
  --orange-600:#e15a12; --orange-500:#f26a1b; --orange-100:#fdecdf;
  --red-600:#c01a20; --red-500:#d81f26; --red-100:#fbe2e3;
  --success-500:#4ca82e; --success-100:#e8f5e0;
  --warning-500:#f6911e; --warning-100:#fdeed8;

  /* Семантика */
  --color-primary:var(--slate-800); --color-primary-hover:var(--slate-900);
  --color-primary-tint:var(--slate-100); --color-link:var(--slate-800);
  --color-accent:var(--orange-500); --color-accent-hover:var(--orange-600);
  --color-sale:var(--red-500);
  --text-strong:var(--ink-900); --text-body:var(--ink-700);
  --text-muted:var(--ink-500); --text-faint:var(--ink-300);
  --text-on-dark:#ffffff; --text-on-primary:#ffffff;
  --surface-page:var(--stone-50); --surface-card:var(--paper);
  --surface-well:var(--stone-100); --surface-ink:var(--ink-900);
  --surface-primary:var(--slate-800);
  --border-subtle:var(--line); --border-strong:var(--line-strong);
  --border-focus:var(--slate-600);
  --overlay-scrim:rgba(20,20,20,.55);

  /* Типографика */
  --font-display:'Montserrat','Manrope',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --fw-extra:800; --fw-black:900;
  --fs-display-xl:3.75rem; --fs-display-lg:2.75rem;
  --fs-h1:2.25rem; --fs-h2:1.75rem; --fs-h3:1.375rem; --fs-h4:1.125rem;
  --fs-body-lg:1.125rem; --fs-body:1rem; --fs-sm:.875rem; --fs-xs:.75rem;
  --lh-tight:1.04; --lh-snug:1.18; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-tighter:-.03em; --ls-tight:-.015em; --ls-wide:.04em; --ls-eyebrow:.14em;

  /* Геометрия */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px;
  --radius-xl:26px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(20,20,20,.06);
  --shadow-sm:0 2px 6px rgba(20,20,20,.07);
  --shadow-md:0 6px 18px rgba(20,20,20,.09);
  --shadow-lg:0 16px 40px rgba(20,20,20,.12);
  --shadow-xl:0 28px 70px rgba(20,20,20,.16);
  --shadow-focus:0 0 0 4px var(--slate-100);
  --shadow-card-hover:0 18px 44px rgba(20,20,20,.14);

  /* Движение — сильные кривые (по emil-design-eng: встроенные слишком слабые) */
  --ease-out:cubic-bezier(.23,1,.32,1);        /* вход/выход — начинает быстро, чувствуется отзывчивым */
  --ease-in-out:cubic-bezier(.77,0,.175,1);    /* движение по экрану — плавный разгон/торможение */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:360ms;

  /* Сетка */
  --container:1240px; --container-wide:1440px; --container-prose:720px;
  /* Полоса «сайт в разработке» под шапкой. Высота фиксированная: под неё
     зарезервировано место до отрисовки шапки (см. #header:empty). */
  --devbar-h:32px;
  --gutter:clamp(1rem,4vw,3rem);
  --header-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-normal);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:var(--color-link);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);line-height:var(--lh-snug);margin:0 0 .5em}
h1{font-size:var(--fs-h1);font-weight:var(--fw-extra);letter-spacing:var(--ls-tight)}
h2{font-size:var(--fs-h2);font-weight:var(--fw-extra);letter-spacing:var(--ls-tight)}
h3{font-size:var(--fs-h3);font-weight:var(--fw-extra)}
h4{font-size:var(--fs-h4);font-weight:var(--fw-bold)}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

.eyebrow{
  font-family:var(--font-display);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-accent);
  margin-bottom:10px;
}
.muted{color:var(--text-muted)}
.mono{font-family:var(--font-mono)}

/* Радужная линия — фирменный мотив */
.rainbow{
  height:6px;border-radius:var(--radius-pill);border:0;
  background:linear-gradient(90deg,var(--hue-yellow),var(--hue-orange),var(--hue-red),var(--hue-magenta),var(--hue-violet),var(--hue-indigo),var(--hue-teal),var(--hue-green),var(--hue-lime));
}

/* ---------------- Шапка ---------------- */
.header{
  position:sticky;top:0;z-index:100;height:var(--header-h);
  background:var(--paper);isolation:isolate;
  /* Единая высота поиска и кнопок справа. 26px — это высота коробки слова
     BETEK (шрифт 26px): тёмные плашки встают вровень с логотипом. Сами буквы
     занимают 19px, но поле с текстом такой высоты быть не может — внутри
     строка 14-го кегля, ей нужно 17px плюс рамка. */
  --hdr-btn:26px;
  /* нижнюю границу заменяет переливающаяся радужная линия + свечение (см. .header::after/::before) */
}
/* 3 зоны: слева логотип (и бургер на мобильном), в середине меню, справа действия.
   z-index:2 — контент поверх радужного свечения. */
.header .container{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px}
.header-left{display:flex;align-items:center;gap:12px;justify-self:start;min-width:0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;justify-self:start}
.logo:hover{text-decoration:none}
.logo-word{
  font-family:var(--font-display);font-weight:var(--fw-black);font-size:26px;
  letter-spacing:.06em;color:var(--ink-900);text-shadow:0 1px 3px rgba(255,255,255,.7);
}
.logo-dots{display:grid;grid-template-columns:repeat(4,7px);gap:2px}
.logo-dots span{width:7px;height:7px;border-radius:2px}
.nav{display:flex;gap:22px;justify-self:start;margin-left:10px}
.nav a{
  font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--text-strong);
  padding:6px 2px;border-bottom:2px solid transparent;
  text-shadow:0 1px 3px rgba(255,255,255,.85);   /* светлый ореол — читается поверх радужного свечения */
  transition:color var(--dur-fast) var(--ease-out);
}
.nav .nav-home,.nav .nav-lang{display:none}   /* на десктопе домой ведёт логотип, а язык — кружок справа */
.nav a:hover{color:var(--color-primary);text-decoration:none}
.nav a.active{color:var(--color-primary);border-bottom-color:var(--color-accent)}
/* Без min-width:0 — намеренно. С ним блок сжимался ýже своего содержимого, а
   justify-self:end растил его влево: телефон наезжал на «О бренде» на ширинах
   примерно 1400–1650. Ужиматься должно поле поиска — оно для того и заведено
   гибким (minmax(150px,320px) в сетке шапки), а номер и кнопки резать нечем. */
.header-right{justify-self:end;display:flex;align-items:center;gap:10px}
.header-phone{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-strong);font-weight:var(--fw-bold);white-space:nowrap;text-shadow:0 1px 3px rgba(255,255,255,.85)}
/* Переключатель языка — тот же круг, что у темы и корзины */
.lang-switch{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:var(--hdr-btn);height:var(--hdr-btn);border-radius:var(--radius-pill);
  background:var(--surface-well);border:1px solid var(--border-subtle);
  font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:11px;
  color:var(--text-strong);text-decoration:none;letter-spacing:.02em;
  transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.lang-switch:hover{border-color:var(--border-strong);text-decoration:none}
.lang-switch:active{transform:scale(.94)}
.cart-btn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:6px;
  /* Поле внутри = зазору между кнопками (10px). Иначе перед корзиной пусто
     на зазор плюс поле, и ряд читается неровным, хотя расстояния равны. */
  height:var(--hdr-btn);padding:0 10px;
  background:var(--surface-well);border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);
  font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--text-strong);
  transition:all var(--dur-fast) var(--ease-out);text-decoration:none;
}
.cart-btn:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);text-decoration:none}
.cart-count{
  min-width:18px;height:18px;padding:0 4px;border-radius:var(--radius-pill);
  background:var(--color-accent);color:#fff;font-family:var(--font-mono);
  font-size:11px;font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;
}
.cart-count:empty,.cart-count[data-n="0"]{display:none}
.burger{display:none;background:none;border:0;padding:8px}
.burger svg{width:24px;height:24px;stroke:var(--ink-900)}

/* ---------------- Кнопки ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--fs-sm);
  border-radius:var(--radius-md);padding:13px 24px;border:1px solid transparent;
  transition:all var(--dur-fast) var(--ease-out);text-decoration:none;line-height:1;
}
.btn:hover{text-decoration:none}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.btn-primary{background:var(--color-primary);color:var(--text-on-primary)}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-accent{background:var(--color-accent);color:#fff}
.btn-accent:hover{background:var(--color-accent-hover)}
.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text-strong)}
.btn-ghost:hover{border-color:var(--ink-500);background:var(--paper)}
.btn-light{background:#fff;color:var(--ink-900)}
.btn-light:hover{background:var(--stone-100)}
.btn-lg{padding:16px 30px;font-size:var(--fs-body)}
.btn-sm{padding:9px 16px;font-size:var(--fs-xs)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn-block{width:100%}

/* ---------------- Бейджи и теги ---------------- */
.badge{
  display:inline-flex;align-items:center;border-radius:var(--radius-pill);
  padding:4px 11px;font-size:var(--fs-xs);font-weight:var(--fw-bold);
  font-family:var(--font-display);letter-spacing:var(--ls-wide);text-transform:uppercase;
}
.badge-hit{background:var(--orange-100);color:var(--orange-600)}
.badge-new{background:var(--slate-100);color:var(--slate-800)}
.badge-sale{background:var(--red-100);color:var(--red-600)}
.badge-eco{background:var(--success-100);color:var(--success-500)}
.tag{
  display:inline-flex;align-items:center;border-radius:var(--radius-pill);
  padding:6px 14px;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  background:var(--surface-well);border:1px solid var(--border-subtle);color:var(--text-body);
  transition:all var(--dur-fast) var(--ease-out);text-decoration:none;cursor:pointer;
}
.tag:hover{border-color:var(--border-strong);text-decoration:none;color:var(--text-strong)}
.tag.active{background:var(--ink-900);border-color:var(--ink-900);color:#fff}

/* ---------------- Герой ---------------- */
/* Блок текста центрируется по вертикали в чёрном поле: колонка с justify-content:center.
   Радужная полоса — последний элемент колонки, поэтому свободное место делится
   над текстом и под ним одинаково, а полоса остаётся кромкой секции. */
/* Фон героя точно совпадает с фоном иллюстрации: он зашит в сам файл (белый
   на светлой теме, чёрный на тёмной), и любой другой оттенок секции дал бы
   видимый шов по краю картинки. */
.hero{
  /* Ровно тот цвет, что залит фоном в самом ролике (см. colorkey при сборке
     hero-light.mp4). В исходнике фон пульсировал: в начале цикла был на пять
     уровней светлее, чем в середине, — светлый прямоугольник то появлялся, то
     пропадал. Теперь он постоянный, и достаточно совпасть с ним один раз.
     Значение на единицу выше залитого в файл (#f0e8f3): видео проходит через
     своё преобразование, и на экране получается ровно этот цвет. Сверено
     замером пикселя в браузере, а не по файлу. */
  --hero-bg:#f1e9f4;
  --hero-ink:var(--ink-900); --hero-dim:var(--text-body);
  --hero-veil:20,20,20;                /* плашка и рамка — «чернилами» по светлому */
  /* Размеры героя. Объявлены здесь, в начале файла: мобильный блок ниже
     переопределяет поля, и при равной силе побеждает то правило, что стоит
     позже. Держать значения по умолчанию ниже мобильных нельзя. */
  --hero-art-w:56vw; --hero-pad-t:76px; --hero-pad-b:82px;
  /* Насколько контейнер сам отстоит от края экрана. Без этой поправки текст
     отступал от картинки на всю её ширину и терял лишние 100px на 1440. */
  --hero-side:max(0px, calc((100vw - var(--container)) / 2));
  background:var(--hero-bg);color:var(--hero-dim);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
}
:root[data-theme="dark"] .hero{
  --hero-bg:#000;
  --hero-ink:#fff; --hero-dim:rgba(255,255,255,.72);
  --hero-veil:255,255,255;
}
/* Снизу на 6px больше — ровно на толщину радужной кромки, чтобы текст стоял
   по центру чёрного поля, а не по центру секции вместе с полосой. */
/* width:100% обязателен: как элемент колоночного флекса контейнер иначе
   сжимается по содержимому и margin:0 auto уводит текст к середине экрана. */
.hero .container{position:relative;z-index:2;width:100%}
/* Стабильная высота на десктопе: у фото справа появляется запас, а тексту есть
   в чём центрироваться. На мобильном высота остаётся по содержимому. */
@media(min-width:901px){ .hero{min-height:clamp(460px,52vh,560px)} }
.hero h1{
  color:var(--hero-ink);font-size:clamp(2.4rem,5.4vw,var(--fs-display-xl));
  font-weight:var(--fw-black);line-height:var(--lh-tight);letter-spacing:var(--ls-tighter);
  max-width:640px;margin:0 0 20px;
}
.hero h1 em{font-style:normal;color:var(--hue-orange)}
.hero p{color:var(--hero-dim);font-size:var(--fs-body-lg);max-width:520px;margin:0 0 30px}
/* Надзаголовок — часть заголовка, а не отдельная строка: прижат к нему вплотную.
   3px вместо 10px, потому что у 60px-заголовка сверху ~11px пустого поля строки. */
/* Жёлтый читается только на чёрном; на светлом фоне берём фиолетовый —
   он же основной цвет иллюстрации с лавандой. */
.hero-eyebrow{color:var(--hue-violet);margin-bottom:3px}
:root[data-theme="dark"] .hero-eyebrow{color:var(--hue-yellow)}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(var(--hero-veil),.08);border:1px solid rgba(var(--hero-veil),.22);
  border-radius:var(--radius-pill);padding:7px 16px 7px 14px;margin-bottom:28px;
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-xs);
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--hero-ink);
}
.hero-badge::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--hue-green);box-shadow:0 0 0 4px rgba(76,168,46,.28);
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-strokes{
  position:absolute;right:-40px;top:0;bottom:0;width:46%;min-width:340px;
  display:flex;align-items:stretch;gap:0;transform:skewX(-14deg);opacity:.92;z-index:1;
}
.hero-strokes span{flex:1}
/* Полоса — кромка секции, а не элемент потока: иначе при центровке часть
   свободного места уходила под неё и текст оказывался ниже середины. */
.hero .rainbow{position:absolute;left:0;right:0;bottom:0;z-index:3}

/* ---------------- Секции ---------------- */
.section{padding:64px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px}
.section-head h2{margin:0}
.section-link{font-weight:var(--fw-bold);font-size:var(--fs-sm);white-space:nowrap}

/* Преимущества */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.benefit{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:24px;
}
.benefit .dot{width:12px;height:12px;border-radius:50%;margin-bottom:14px}
.benefit h4{margin:0 0 6px}
.benefit p{margin:0;font-size:var(--fs-sm);color:var(--text-muted)}

/* Категории */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat-card{
  position:relative;display:block;background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:22px;overflow:hidden;text-decoration:none;color:var(--text-body);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);text-decoration:none}
.cat-card .swatch{height:64px;border-radius:var(--radius-md);margin-bottom:16px}
.cat-card .cat-photo{height:150px;border-radius:var(--radius-md);overflow:hidden;margin-bottom:16px;background:var(--surface-well)}
.cat-card .cat-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease-out)}
.cat-card:hover .cat-photo img{transform:scale(1.05)}
.cat-card h4{margin:0 0 4px}
.cat-card span{font-size:var(--fs-xs);color:var(--text-faint);font-family:var(--font-mono)}

/* ---------------- Карточка товара ---------------- */
.grid-products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pcard{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.pcard-img{
  background:var(--grey-cool);padding:22px;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/.92;overflow:hidden;
}
.pcard-img svg,.pcard-img img{height:100%;width:auto;transition:transform var(--dur-slow) var(--ease-out)}
.pcard:hover .pcard-img svg,.pcard:hover .pcard-img img{transform:scale(1.06)}
/* packshot на белом фоне: multiply «растворяет» белый в фоне подложки */
.packshot{mix-blend-mode:multiply;object-fit:contain}
.pcard-badges{position:absolute;top:14px;left:14px;display:flex;gap:6px;z-index:2}
.pcard-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;gap:8px}
.pcard-cat{font-size:var(--fs-xs);color:var(--text-faint);font-family:var(--font-mono)}
.pcard h4{margin:0;font-size:var(--fs-body)}
.pcard h4 a{color:var(--text-strong)}
.pcard h4 a:hover{color:var(--color-primary);text-decoration:none}
.pcard-desc{font-size:var(--fs-xs);color:var(--text-muted);margin:0;flex:1}
.pcard-rating{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-muted)}
.pcard-rating .stars{color:var(--hue-amber);letter-spacing:2px;font-size:13px}
/* Цена и точки оттенков. Точки всегда занимают отдельную строку: в колонке
   каталога они отнимали у цены половину ширины, и «from 10,290 RUB» ломалось
   на три строки — карточки перестали выстраиваться в один ряд.
   min-height держит одинаковую высоту у товаров без колеровки, где точек нет. */
/* align-content:flex-start обязателен: при центрировании одиночная строка цены
   у товаров без колеровки опускалась на 8px и выпадала из общего ряда. */
.pcard-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:4px;min-height:42px;align-content:flex-start}
.price{font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:1.05rem;color:var(--text-strong);white-space:nowrap}
.price small{font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--text-faint)}
.pcard-hues{display:flex;gap:4px;flex:0 0 100%}
.pcard-hues i{width:10px;height:10px;border-radius:50%}

/* ---------------- Renxmatik-блок ---------------- */
.renx{
  background:var(--surface-primary);border-radius:var(--radius-xl);
  color:#fff;padding:52px;display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center;
  overflow:hidden;position:relative;
}
.renx h2{color:#fff;margin:0 0 14px}
.renx p{color:rgba(255,255,255,.75);margin:0 0 26px}
.renx .eyebrow{color:var(--hue-yellow)}
.renx-dots{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.renx-dots i{aspect-ratio:1;border-radius:50%;box-shadow:var(--shadow-md)}

/* ---------------- Шоурум ---------------- */
.showroom{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.showroom-card{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:34px;display:flex;flex-direction:column;gap:14px;
}
.showroom-card .addr{font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--text-strong)}
.showroom-map{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-subtle);min-height:320px}
.showroom-map iframe{width:100%;height:100%;min-height:320px;border:0}
.info-row{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-sm)}
.info-row .dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none}

/* ---------------- Каталог ---------------- */
.catalog-layout{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start}
.filters{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:22px;position:sticky;top:calc(var(--header-h) + 20px);
}
.filters-toggle{display:none}   /* нужна только на телефоне */
.filters h4{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-wide);margin:0 0 12px}
.filters .group{padding:16px 0;border-top:1px solid var(--border-subtle)}
.filters .group:first-child{border-top:0;padding-top:0}
.check{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:var(--fs-sm);cursor:pointer;color:var(--text-body)}
.check input{
  appearance:none;width:18px;height:18px;border:1.5px solid var(--border-strong);
  border-radius:var(--radius-xs);cursor:pointer;flex:none;margin:0;position:relative;
  transition:all var(--dur-fast) var(--ease-out);background:var(--surface-card);
}
.check input:checked{background:var(--color-primary);border-color:var(--color-primary)}
.check input:checked::after{
  content:"";position:absolute;inset:2px 4px 5px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg);
}
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.catalog-count{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-muted)}
.select{
  font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-strong);
  background:var(--paper);border:1px solid var(--border-strong);border-radius:var(--radius-md);
  padding:10px 14px;cursor:pointer;
}
.select:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-color:var(--border-focus)}

/* ---------------- Страница товара ---------------- */
.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text-faint);padding:22px 0 0;font-family:var(--font-mono)}
.breadcrumb a{color:var(--text-muted)}
.product-layout{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:28px 0 20px;align-items:start}
.product-gallery{
  background:var(--grey-cool);border-radius:var(--radius-xl);padding:44px;
  display:flex;align-items:center;justify-content:center;position:sticky;top:calc(var(--header-h) + 20px);
}
.product-gallery svg,.product-gallery img{max-height:420px;width:auto;transition:transform var(--dur-slow) var(--ease-out)}
.product-gallery:hover svg,.product-gallery:hover img{transform:scale(1.05)}
.product-info h1{font-size:var(--fs-h2);margin:8px 0 6px}
.product-sub{color:var(--text-muted);margin:0 0 18px}
.opt-label{
  font-family:var(--font-display);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-muted);margin:22px 0 10px;
}
.opt-label b{color:var(--text-strong)}

/* Строка «Цвет» с выкрасом справа. Кружок-образец мелкий и в ряду из
   тринадцати штук не читается — квадрат показывает выбранный оттенок крупно,
   рядом название и код для колеровки. */
/* Подпись и выкрас идут одной строкой слева, по одной линии с кружками
   оттенков ниже. Разгонять их по краям нельзя: между ними повисало пустое
   поле в полэкрана, и выкрас читался как отдельный, ни к чему не относящийся
   блок в правом верхнем углу. */
.color-head{
  display:flex;align-items:center;justify-content:flex-start;
  gap:18px;flex-wrap:wrap;margin:22px 0 10px;
}
.color-head .opt-label{margin:0}
.color-chip{display:flex;align-items:center;gap:14px;min-width:0}
/* Выкрас крупный: по нему выбирают цвет, а на маленьком квадрате оттенок
   не читается — глаз оценивает цвет тем точнее, чем больше пятно. */
.color-chip i{
  flex:0 0 auto;width:120px;height:120px;border-radius:var(--radius-md);
  border:1px solid var(--border-strong);box-shadow:var(--shadow-sm);
}
.color-chip-t{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.color-chip-t b{font-size:var(--fs-body);color:var(--text-strong)}
.color-chip-t .mono{font-size:var(--fs-sm);margin-top:2px}

.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatch-btn{
  width:38px;height:38px;border-radius:50%;border:2.5px solid transparent;padding:2px;
  background:transparent;transition:all var(--dur-fast) var(--ease-out);
}
.swatch-btn i{display:block;width:100%;height:100%;border-radius:50%;border:1px solid rgba(20,20,20,.12)}
.swatch-btn:hover{transform:scale(1.1)}
.swatch-btn.active{border-color:var(--ink-900)}
/* значок «+» — ссылка на подбор цвета (веер Renxmatik) */
a.swatch-btn{display:block;text-decoration:none}
.swatch-more i{
  display:flex;align-items:center;justify-content:center;border:0;
  background:conic-gradient(#ffc20e,#f26a1b,#e12b27,#c0297e,#6e2c8b,#2e3a8c,#1e72c8,#009a93,#4ca82e,#afc81e,#ffc20e);
  color:#fff;font-weight:var(--fw-bold);font-size:17px;line-height:1;
  text-shadow:0 1px 2px rgba(20,20,20,.35);
}
.sizes{display:flex;gap:10px;flex-wrap:wrap}
.size-btn{
  border:1.5px solid var(--border-strong);background:var(--paper);border-radius:var(--radius-md);
  padding:11px 18px;font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--text-strong);
  font-family:var(--font-mono);transition:all var(--dur-fast) var(--ease-out);
}
.size-btn:hover{border-color:var(--ink-500)}
.size-btn.active{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.buy-row{display:flex;align-items:center;gap:14px;margin:26px 0 10px;flex-wrap:wrap}
.buy-price{font-family:var(--font-mono);font-size:2rem;font-weight:var(--fw-bold);color:var(--text-strong)}
.qty{
  display:inline-flex;align-items:center;border:1.5px solid var(--border-strong);
  border-radius:var(--radius-md);overflow:hidden;background:var(--paper);
}
.qty button{width:40px;height:46px;border:0;background:none;font-size:18px;font-weight:var(--fw-bold);color:var(--text-strong)}
.qty button:hover{background:var(--surface-well)}
.qty output{width:44px;text-align:center;font-family:var(--font-mono);font-weight:var(--fw-bold)}
.stock{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--success-500);font-weight:var(--fw-semibold)}
.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--success-500)}

.spec-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.spec-table td{padding:11px 0;border-bottom:1px solid var(--border-subtle);vertical-align:top}
.spec-table td:first-child{color:var(--text-muted);width:46%}
.spec-table td:last-child{font-family:var(--font-mono);color:var(--text-strong)}
.tabs{display:flex;gap:8px;border-bottom:1px solid var(--border-subtle);margin-bottom:22px}
.tab{
  background:none;border:0;padding:12px 18px;font-weight:var(--fw-bold);font-size:var(--fs-sm);
  color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tab.active{color:var(--text-strong);border-bottom-color:var(--color-accent)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ---------------- Подбор цвета ---------------- */
.color-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.palette{display:grid;grid-template-columns:repeat(11,1fr);gap:6px}
.palette button{
  aspect-ratio:1/1.6;border:0;border-radius:var(--radius-xs);padding:0;
  transition:transform var(--dur-fast) var(--ease-out);
}
.palette button:hover{transform:scale(1.12);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);position:relative;z-index:2}
.palette button.active{outline:2px solid var(--ink-900);outline-offset:2px;border-radius:var(--radius-sm);position:relative;z-index:2}
.room-preview{border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border-subtle);background:#fff}
.color-meta{
  display:flex;align-items:center;gap:16px;background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:18px 22px;margin-top:18px;
}
.color-meta .chip{width:52px;height:52px;border-radius:var(--radius-md);border:1px solid rgba(20,20,20,.1);flex:none}
.color-meta .code{font-family:var(--font-mono);font-weight:var(--fw-bold);color:var(--text-strong)}
.color-meta .name{font-size:var(--fs-sm);color:var(--text-muted)}

/* ---------------- Корзина ---------------- */
.cart-layout{display:grid;grid-template-columns:1fr 380px;gap:34px;align-items:start}
.cart-list{display:flex;flex-direction:column;gap:14px}
.cart-item{
  display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:center;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:16px 20px;
}
.cart-item .thumb{background:var(--grey-cool);border-radius:var(--radius-md);padding:10px;display:flex;justify-content:center}
.cart-item .thumb svg,.cart-item .thumb img{height:70px;width:auto}
.cart-item h4{margin:0 0 4px;font-size:var(--fs-body)}
.cart-item .meta{font-size:var(--fs-xs);color:var(--text-muted);font-family:var(--font-mono)}
.cart-item .right{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.cart-item .remove{background:none;border:0;color:var(--text-faint);font-size:var(--fs-xs);padding:0}
.cart-item .remove:hover{color:var(--color-sale)}
.summary{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:26px;position:sticky;top:calc(var(--header-h) + 20px);
}
.summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:var(--fs-sm)}
.summary-row.total{
  border-top:1px solid var(--border-subtle);margin-top:10px;padding-top:16px;
  font-size:var(--fs-h4);font-weight:var(--fw-bold);color:var(--text-strong);
}
.summary-row .price{font-size:inherit}
.free-ship{margin:14px 0 6px;font-size:var(--fs-xs);color:var(--text-muted)}
.free-ship-bar{height:6px;border-radius:var(--radius-pill);background:var(--surface-well);overflow:hidden;margin-top:6px}
.free-ship-bar i{display:block;height:100%;background:var(--success-500);border-radius:var(--radius-pill);transition:width var(--dur-slow) var(--ease-out)}
.empty-state{text-align:center;padding:70px 20px;color:var(--text-muted)}

/* ---------------- Формы ---------------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-strong);margin-bottom:6px;letter-spacing:var(--ls-wide);text-transform:uppercase;font-family:var(--font-display)}
.input,textarea.input{
  width:100%;font:inherit;font-size:var(--fs-sm);color:var(--text-strong);
  background:var(--paper);border:1.5px solid var(--border-strong);border-radius:var(--radius-md);
  padding:12px 14px;transition:all var(--dur-fast) var(--ease-out);
}
.input:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--shadow-focus)}
.radio-row{display:flex;gap:10px;flex-wrap:wrap}
.radio-pill{position:relative}
.radio-pill input{position:absolute;opacity:0;inset:0;cursor:pointer}
.radio-pill span{
  display:inline-block;padding:10px 18px;border:1.5px solid var(--border-strong);
  border-radius:var(--radius-pill);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  transition:all var(--dur-fast) var(--ease-out);
}
.radio-pill input:checked + span{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.form-note{font-size:var(--fs-xs);color:var(--text-faint)}
.alert{
  border-radius:var(--radius-md);padding:14px 18px;font-size:var(--fs-sm);margin:14px 0;
}
.alert-success{background:var(--success-100);color:#2d6b18}
.alert-danger{background:var(--red-100);color:var(--red-600)}

/* ---------------- Тост ---------------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);
  background:var(--ink-900);color:#fff;border-radius:var(--radius-md);
  padding:14px 22px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;z-index:300;
  transition:all var(--dur-base) var(--ease-out);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------------- Подвал ---------------- */
.footer{background:var(--surface-ink);color:rgba(255,255,255,.72);margin-top:70px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px;padding:56px 0 40px}
.footer h4{color:#fff;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:var(--ls-wide);margin:0 0 16px}
.footer a{color:rgba(255,255,255,.72);display:block;padding:4px 0;font-size:var(--fs-sm)}
.footer a:hover{color:#fff;text-decoration:none}
.footer p{font-size:var(--fs-sm);margin:0 0 8px}
.footer .logo-word{color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding:20px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:var(--fs-xs);color:rgba(255,255,255,.45);font-family:var(--font-mono);
}
/* Ссылка на политику стоит в одном ряду с копирайтом: строка нижняя,
   а .footer a — блочные, поэтому здесь возвращаем строчное поведение. */
.footer-bottom a{display:inline;padding:0;font-size:inherit;color:rgba(255,255,255,.45)}

/* ---------------- Уведомление о cookie ----------------
   Слева внизу, чтобы не спорить с кнопкой Адама справа. Не перекрывает
   контент и не двигает вёрстку: появляется поверх, один раз. */
.cookie-note{
  position:fixed;left:20px;bottom:20px;z-index:130;max-width:420px;
  display:flex;align-items:center;gap:16px;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:16px 18px;
  opacity:0;transform:translateY(12px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.cookie-note.is-in{opacity:1;transform:none}
.cookie-note p{margin:0;font-size:var(--fs-xs);line-height:var(--lh-normal);color:var(--text-muted)}
.cookie-note .btn{flex:none}
@media(prefers-reduced-motion:reduce){
  .cookie-note{transition:none}
}
@media(max-width:720px){
  .cookie-note{left:12px;right:12px;bottom:12px;max-width:none;flex-wrap:wrap}
  .cookie-note .btn{width:100%}
  /* Кнопка Адама живёт в том же углу — поднимаем её над плашкой */
  .has-cookie .adam{bottom:calc(20px + var(--cookie-h,0px))}
}

/* Согласие на обработку данных в форме заказа. От фильтрового .check
   отличается только тем, что текст здесь длинный и переносится: галочка
   должна стоять у первой строки, а не по центру абзаца. */
.check-consent{align-items:flex-start;font-size:var(--fs-xs);line-height:var(--lh-normal);margin:4px 0 14px}
.check-consent input{margin-top:1px}
.check-consent a{text-decoration:underline}

/* ---------------- Полоса «сайт в разработке» ----------------
   Под шапкой, скроллится вместе со страницей: прилипшая полоса весь визит
   отнимала бы место у первого экрана. Строго одна строка при любой ширине:
   высота полосы входит в резерв места под шапкой (см. #header:empty), и от
   переноса на вторую строку резерв разъехался бы со сдвигом вёрстки. */
.devbar{
  height:var(--devbar-h);
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--warning-100);color:#7a4a05;
  font-family:var(--font-mono);font-size:var(--fs-xs);
  letter-spacing:var(--ls-wide);white-space:nowrap;
  padding:0 var(--gutter);overflow:hidden;
}
:root[data-theme="dark"] .devbar{background:rgba(246,145,30,.16);color:#f6b45e}
@media(max-width:700px){ .devbar{letter-spacing:0} }

/* ---------------- Страничный заголовок ---------------- */
.page-head{padding:44px 0 10px}
.page-head p{max-width:640px;color:var(--text-muted)}

/* ---------------- Вдохновение: карточки статей ----------------
   Сетка та же, что у товаров, но в три колонки: у статьи есть заголовок
   и подводка, в четырёх колонках они превращаются в столбик из двух слов. */
.inspire-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-bottom:20px}
.icard{
  display:flex;flex-direction:column;background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.icard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.icard-img{display:block;aspect-ratio:5/3;background:var(--surface-well);overflow:hidden}
.icard-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease-out)}
.icard:hover .icard-img img{transform:scale(1.05)}
.icard-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.icard-meta{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-faint);
}
.icard-tag{
  background:var(--surface-well);color:var(--text-muted);
  border-radius:var(--radius-pill);padding:3px 10px;letter-spacing:var(--ls-wide);
}
.icard h3{margin:0;font-size:var(--fs-h4);line-height:var(--lh-snug)}
.icard h3 a{color:var(--text-strong)}
.icard h3 a:hover{text-decoration:none;color:var(--color-link)}
.icard p{margin:0;font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-normal)}

/* ---------------- Вдохновение: сама статья ---------------- */
.article{display:block;padding-top:8px}
.article-head{max-width:var(--container-prose);padding:18px 0 22px}
.article-meta{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
  font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-faint);
}
.article-head h1{margin:0 0 12px}
.article-lead{font-size:var(--fs-body-lg);line-height:var(--lh-normal);color:var(--text-muted);margin:0}
.article-cover{
  display:block;width:100%;max-height:440px;object-fit:cover;
  border-radius:var(--radius-lg);background:var(--surface-well);
}
.article-body{max-width:var(--container-prose);padding:34px 0 10px}
.article-body h2{font-size:var(--fs-h3);margin:34px 0 12px}
.article-body h2:first-child{margin-top:0}
.article-body p,.article-body li{font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--text-body)}
.article-body p{margin:0 0 14px}
.article-body ul{margin:0 0 16px;padding-left:22px}
.article-body li{margin-bottom:8px}
.article-body a{text-decoration:underline}

/* ---------------- Правовые документы ----------------
   Длинный текст в одну колонку: ширина строки ограничена, иначе глаз
   теряет начало следующей строки. Нумерация разделов — сквозная, счётчиком,
   чтобы вставка пункта не заставляла перенумеровывать всё руками. */
.legal{max-width:var(--container-prose);padding-bottom:60px;counter-reset:legal-sec}
.legal h2{
  counter-increment:legal-sec;font-size:var(--fs-h3);margin:38px 0 14px;
}
.legal h2::before{content:counter(legal-sec) ". ";color:var(--text-faint)}
.legal p,.legal li{font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:var(--text-body)}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:20px}
.legal li{margin-bottom:6px}
.legal a{text-decoration:underline}
.legal .legal-meta{
  font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-faint);
  border-top:1px solid var(--border-subtle);margin-top:36px;padding-top:16px;
}
.legal dl{margin:0 0 12px}
.legal dt{font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--text-strong);margin-top:10px}
.legal dd{margin:2px 0 0;font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:var(--text-body)}

/* ---------------- Адаптив ---------------- */
@media(max-width:1080px){
  .benefits,.cats,.grid-products{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .renx{grid-template-columns:1fr;padding:36px}
}
@media(max-width:900px){
  .nav{
    display:none;position:fixed;top:var(--header-h);left:0;right:0;
    /* justify-self:start с десктопной сетки сжимал бы панель по содержимому,
       несмотря на left:0/right:0 — так работает выравнивание абсолютных блоков */
    justify-self:stretch;
    background:var(--paper);border-bottom:1px solid var(--border-subtle);
    flex-direction:column;gap:0;padding:10px var(--gutter) 18px;margin:0;box-shadow:var(--shadow-md);
  }
  .nav.open{display:flex}
  /* Меню здесь position:fixed, то есть выпадает из потока сетки. Третья колонка
     остаётся пустой, и .header-right встаёт в конец ВТОРОЙ — не доезжая до края
     на ширину зазора. Оставляем две колонки: бургер и блок значков. */
  .header .container{grid-template-columns:auto minmax(0,1fr)}
  .nav a{padding:12px 0;border-bottom:1px solid var(--border-subtle);font-size:var(--fs-body)}
  .nav .nav-home{display:block}   /* в выпадающем меню логотипа не видно — нужен явный пункт */
  .burger{display:block}
  .header-phone{display:none}
  .header .container{gap:12px}
  .catalog-layout,.product-layout,.cart-layout,.color-layout,.showroom{grid-template-columns:1fr}
  .filters,.product-gallery,.summary{position:static}
  /* Фильтры по кнопке: развёрнутая панель отодвигала товары за пределы экрана */
  .filters{padding:0}
  .filters-toggle{
    display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
    padding:14px 18px;background:none;border:0;cursor:pointer;
    font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-sm);
    text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--text-strong);
  }
  .filters-toggle::after{
    content:"";width:9px;height:9px;flex:none;margin-left:auto;
    border:solid var(--text-muted);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px);
    transition:transform var(--dur-fast) var(--ease-out);
  }
  .filters.is-open .filters-toggle::after{transform:rotate(-135deg) translate(-2px,-2px)}
  .filters-count:not(:empty){
    display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
    border-radius:var(--radius-pill);background:var(--color-accent);color:#fff;
    font-family:var(--font-mono);font-size:12px;
  }
  .filters-body{display:none;padding:0 18px 18px}
  .filters.is-open .filters-body{display:block}
  .grid-products,.inspire-grid{grid-template-columns:repeat(2,1fr)}
  .benefits,.cats{grid-template-columns:repeat(2,1fr)}
  .hero-strokes{display:none}
  .palette{grid-template-columns:repeat(8,1fr)}
}
@media(max-width:560px){
  /* Корзина сжимается до иконки — правая зона узкая, логотип остаётся по центру.
     Квадрат ровно как у переключателя темы, счётчик уходит в угол значком,
     иначе цифра растягивала бы кнопку и пара снова была бы разной ширины. */
  .cart-label{display:none}
  .cart-btn{width:var(--hdr-btn);height:var(--hdr-btn);padding:0;gap:0}
  /* Кнопка всего 22px — счётчик должен быть заметно меньше её, иначе
     цифра перекрывает саму корзину и выглядит как отдельный элемент. */
  .cart-count{
    position:absolute;top:-5px;right:-5px;
    min-width:14px;height:14px;padding:0 3px;font-size:9px;
    border:1.5px solid var(--paper);
  }
  .grid-products{grid-template-columns:1fr 1fr;gap:12px}
  /* Статьи на телефоне — в одну колонку: заголовок и подводка длиннее,
     чем название товара, и в две колонки они не читаются. */
  .inspire-grid{grid-template-columns:1fr;gap:14px}
  .article-cover{max-height:240px}
  .benefits,.cats{grid-template-columns:1fr}
  .pcard-body{padding:12px 14px 14px}
  .cart-item{grid-template-columns:72px 1fr;grid-template-rows:auto auto}
  .cart-item .right{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .footer-grid{grid-template-columns:1fr}
  .renx-dots{grid-template-columns:repeat(4,1fr)}

  /* ===== Компактный режим телефона =====
     Десктопные отступы на 375px растягивали страницу почти на 17 экранов.
     Ужимаем поля и плотность, размеры шрифтов не трогаем, кроме заголовка героя. */
  :root{--header-h:60px}

  /* Герой. Поля задаём переменными: правило с ними стоит ниже по файлу и при
     одинаковой силе перебило бы обычный padding здесь. */
  .hero{--hero-pad-t:34px; --hero-pad-b:40px}   /* 40 + 6 радужной кромки */
  .hero h1{font-size:2rem;margin-bottom:14px}
  .hero p{font-size:var(--fs-body);margin-bottom:22px}
  .hero-badge{margin-bottom:18px;padding:6px 12px 6px 10px;font-size:11px}
  .hero-actions{gap:10px}
  .hero .btn-lg{padding:13px 22px;font-size:var(--fs-sm)}

  /* Секции */
  .section{padding:34px 0}
  .section-head{margin-bottom:18px}
  .page-head{padding:26px 0 8px}

  /* Плитки: две колонки вместо одной — вдвое короче по высоте */
  .cats{grid-template-columns:repeat(2,1fr);gap:12px}
  .cat-card{padding:12px}
  .cat-card .cat-photo{height:104px;margin-bottom:10px}
  .cat-card .swatch{height:44px;margin-bottom:10px}
  .benefits{grid-template-columns:1fr;gap:12px}   /* текста много — оставляем одну колонку */
  .benefit{padding:16px 18px}
  .benefit .dot{margin-bottom:10px}

  /* Карточка товара на телефоне. Разделение цены и точек по строкам задано
     в общих правилах .pcard-foot — здесь только размеры. */
  .pcard-img{padding:14px}
  .pcard-badges{top:10px;left:10px}
  .price{font-size:.95rem}
  .pcard-rating{gap:4px}
  .pcard-rating .stars{font-size:11px;letter-spacing:1px}

  /* Блоки-полотна */
  .renx{padding:24px;gap:22px}
  .showroom{gap:14px}
  .showroom-card{padding:20px;gap:10px}
  .showroom-map,.showroom-map iframe{min-height:220px}

  /* Подвал */
  .footer{margin-top:44px}
  .footer-grid{padding:32px 0 22px;gap:22px}
  .footer h4{margin-bottom:10px}
  .footer-bottom{padding:14px 0}
}

/* ---------------- Прелоадер: знак Betek + цветная полоса ---------------- */
.preloader{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:var(--paper);
  transition:opacity .45s var(--ease-out),visibility .45s var(--ease-out);
}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.pre-logo{width:88px;animation:preRise .55s var(--ease-out) both}
.pre-logo svg{width:100%;height:auto;display:block}
@keyframes preRise{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.pre-bar{
  position:relative;width:min(260px,58vw);height:6px;
  border-radius:var(--radius-pill);background:var(--grey-cool);overflow:hidden;
}
.pre-bar i{
  position:absolute;top:0;bottom:0;left:0;width:0;border-radius:var(--radius-pill);
  /* спектр «Be Your Color»: цвета закреплены на дорожке и проявляются по мере загрузки */
  background:linear-gradient(90deg,
    var(--hue-yellow),var(--hue-orange),var(--hue-red),var(--hue-magenta),
    var(--hue-violet),var(--hue-indigo),var(--hue-blue),var(--hue-teal),var(--hue-green));
  background-size:min(260px,58vw) 100%;background-repeat:no-repeat;
  transition:width .3s var(--ease-out);
}
.pre-cap{
  font-family:var(--font-mono);font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-faint);
}
/* Повторные переходы внутри сессии: только тонкая полоса сверху, без заставки */
.preloader.is-slim{
  background:transparent;justify-content:flex-start;gap:0;pointer-events:none;
  bottom:auto;height:3px;
}
.preloader.is-slim .pre-logo,.preloader.is-slim .pre-cap{display:none}
.preloader.is-slim .pre-bar{width:100%;height:3px;border-radius:0;background:transparent}
.preloader.is-slim .pre-bar i{border-radius:0;background-size:100% 100%}
@media(prefers-reduced-motion:reduce){
  .pre-logo{animation:none}
  .pre-bar i{transition:none}
}

/* ============================================================
   Широкие мониторы. Контент расширяется по мере роста экрана,
   каталог добавляет колонки, базовый кегль слегка растёт —
   чтобы сайт не «висел узкой полосой» на 1920/2560/4K.
   ============================================================ */
@media(min-width:1600px){
  :root{ --container:1440px; }
  /* Иллюстрации героя — больше места: контейнер здесь шире на 200px, и текст
     переживает такой отъём. Предел — 62vw: на 64vw колонка сжимается до 400px,
     и тогда плашка переносится на две строки, а кнопки встают друг под друга. */
  .hero{ --hero-art-w:62vw; }
  .catalog-layout .grid-products{ grid-template-columns:repeat(5,1fr); }
  .cat-card .cat-photo{ height:168px; }
}
@media(min-width:1920px){
  :root{ --container:1680px; font-size:17px; }
}
@media(min-width:2560px){
  :root{ --container:2040px; font-size:18.5px; }
  .catalog-layout .grid-products{ grid-template-columns:repeat(6,1fr); }
  .cat-card .cat-photo{ height:190px; }
}
@media(min-width:3200px){
  :root{ --container:2320px; font-size:20px; }
}

/* ============================================================
   Анимации (по emil-design-eng / animation-vocabulary).
   Только transform+opacity (GPU), сильные кривые, короткие тайминги,
   уважение к prefers-reduced-motion и touch-устройствам.
   ============================================================ */

/* --- Появление при прокрутке (маркетинговые блоки: предотвращаем «рывок») --- */
.reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
}
.reveal.is-in{opacity:1;transform:none}
/* Группы со стаггером: дети выезжают по очереди (--rd задаётся из JS) */
.reveal-group > *{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
  transition-delay:var(--rd,0ms);
}
.reveal-group.is-in > *{opacity:1;transform:none}

/* --- Отклик на нажатие: элемент «слышит» палец/курсор --- */
.btn,.cart-btn,.size-btn,.swatch-btn,.burger,.qty,.chip,.check{
  transition:transform var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.btn:active,.cart-btn:active,.size-btn:active,.swatch-btn:active,
.burger:active,.qty:active,.add-btn:active{transform:scale(.97)}
.cat-card:active,.pcard:active{transform:scale(.985)}

/* --- Ховер-подъёмы только для мыши: на тач-экранах не «залипают» --- */
@media(hover:none){
  .cat-card:hover,.pcard:hover,.btn:hover,.swatch-btn:hover,
  .size-btn:hover,.cart-btn:hover{transform:none}
}

/* --- Шапка: лёгкая тень появляется при прокрутке (ощущение глубины) --- */
.header{transition:box-shadow var(--dur-base) var(--ease-out)}
.header.scrolled{box-shadow:0 6px 20px rgba(20,20,20,.06)}

/* --- Доступность: убираем движение, оставляем мягкое проявление --- */
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-group > *{transition:opacity .3s ease;transform:none}
  .btn:active,.cart-btn:active,.size-btn:active,.swatch-btn:active,
  .burger:active,.qty:active,.add-btn:active,.cat-card:active,.pcard:active{transform:none}
}

/* --- Радужные края шапки + мягкое свечение по всему хедеру --- */
:root{
  /* повтор жёлтого в конце — для бесшовной петли */
  --rainbow-line:linear-gradient(90deg,
    var(--hue-yellow),var(--hue-amber),var(--hue-orange),var(--hue-red),var(--hue-magenta),
    var(--hue-violet),var(--hue-indigo),var(--hue-blue),var(--hue-teal),var(--hue-green),var(--hue-lime),
    var(--hue-yellow));
}
.header::before,.header::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* два слоя: линия сверху (y=0) и снизу (y=100%) */
  background-image:var(--rainbow-line),var(--rainbow-line);
  background-repeat:repeat-x,repeat-x;
  background-position:0 0,0 100%;
  animation:header-hue 8s linear infinite;   /* постоянное движение → linear */
}
/* мощное свечение: широкие размытые полосы + рост насыщенности —
   заливают весь хедер цветом; яркость мягко «дышит» */
.header::before{
  background-size:200% 54px,200% 54px;        /* высокие полосы почти во всю шапку */
  filter:blur(16px) saturate(1.7);           /* цвета сочнее */
  opacity:.7;z-index:1;                       /* над белым фоном, под контентом */
  animation:header-hue 8s linear infinite,    /* поток цвета */
            glow-breathe 5s ease-in-out infinite; /* пульсация яркости */
}
/* чёткие тонкие линии по краям (поверх контента) */
.header::after{
  background-size:200% 3px,200% 3px;z-index:3;
}
@keyframes header-hue{ to{ background-position:-200% 0,-200% 100% } }
@keyframes glow-breathe{ 0%,100%{opacity:.5} 50%{opacity:.9} }

/* Уважение к prefers-reduced-motion: цвет и свечение остаются, но замирают */
@media(prefers-reduced-motion:reduce){
  .header::before,.header::after{animation:none}
  .header::before{opacity:.72}
}

/* --- След от «краски» за курсором (canvas, только мышь) --- */
.paint-trail{
  position:fixed;inset:0;pointer-events:none;z-index:95;   /* над контентом, под шапкой(100) и заставкой */
}

/* --- Радужное «переливание» фона товара + заметное свечение при наведении (только мышь) --- */
@media(hover:hover) and (pointer:fine){
  .pcard-img{position:relative}
  .pcard-img::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
    background:var(--rainbow-line);background-size:200% 100%;
    mix-blend-mode:overlay;                 /* цветной блик поверх, товар остаётся виден */
    transition:opacity var(--dur-base) var(--ease-out);
  }
  .pcard:hover .pcard-img::after{
    opacity:.85;                            /* ярче — блик хорошо заметен */
    animation:header-hue 5s linear infinite; /* переиспользуем поток спектра */
  }
  /* заметное радужное свечение вокруг карточки (drop-shadow не режется overflow:hidden) */
  .pcard{transition:transform var(--dur-base) var(--ease-out),
                    box-shadow var(--dur-base) var(--ease-out),
                    filter var(--dur-base) var(--ease-out)}
  .pcard:hover{
    filter:
      drop-shadow(0 0 10px rgba(30,114,200,.55))    /* синий */
      drop-shadow(0 0 20px rgba(192,41,126,.5))     /* маджента */
      drop-shadow(0 0 30px rgba(0,154,147,.45));    /* бирюза */
  }
}
@media(prefers-reduced-motion:reduce){
  .pcard:hover .pcard-img::after{animation:none}  /* без движения — статичный блик */
}

/* --- Радужная краска СТЕКАЕТ из-под логотипа BETEK (анимация) --- */
.logo-word-wrap{position:relative;display:inline-flex;line-height:1}
.logo-drips{
  position:absolute;left:0;right:0;top:100%;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:0 4px;pointer-events:none;
}
.logo-drips i{
  position:relative;display:block;width:4px;height:var(--h,8px);
  border-radius:0 0 4px 4px;
  animation:logo-run 3.4s var(--ease-in-out) infinite;
  animation-delay:var(--d,0s);
}
/* капля набухает на кончике потёка и стекает вниз */
.logo-drips i::after{
  content:"";position:absolute;left:50%;top:100%;
  width:6px;height:6px;border-radius:50%;background:inherit;
  transform:translate(-50%,0) scale(.5);opacity:0;
  animation:logo-drop 3.4s var(--ease-in-out) infinite;
  animation-delay:var(--d,0s);
}
/* каждому потёку — свой цвет спектра, высота и фаза */
.logo-drips i:nth-child(1){--h:8px; --d:-.2s;  background:var(--hue-yellow)}
.logo-drips i:nth-child(2){--h:13px;--d:-1.4s; background:var(--hue-orange)}
.logo-drips i:nth-child(3){--h:7px; --d:-.8s;  background:var(--hue-red)}
.logo-drips i:nth-child(4){--h:15px;--d:-2.3s; background:var(--hue-magenta)}
.logo-drips i:nth-child(5){--h:9px; --d:-.5s;  background:var(--hue-violet)}
.logo-drips i:nth-child(6){--h:12px;--d:-1.9s; background:var(--hue-blue)}
.logo-drips i:nth-child(7){--h:8px; --d:-1.1s; background:var(--hue-green)}
/* потёк растёт и опадает */
@keyframes logo-run{ 0%,100%{height:calc(var(--h) * .5)} 55%{height:var(--h)} }
/* капля срывается и стекает */
@keyframes logo-drop{
  0%,50%{ transform:translate(-50%,0) scale(.5);  opacity:0 }
  62%   { transform:translate(-50%,1px) scale(1);  opacity:.95 }
  100%  { transform:translate(-50%,15px) scale(.35); opacity:0 }
}
@media(prefers-reduced-motion:reduce){
  .logo-drips i,.logo-drips i::after{animation:none}
  .logo-drips i::after{opacity:0}
}

/* ============================================================
   Тёмная («чёрная») тема — включается через data-theme="dark".
   Переопределяем только семантические токены: базовая шкала и
   фирменный спектр остаются прежними.
   ============================================================ */
:root[data-theme="dark"]{
  color-scheme:dark;                 /* нативные чекбоксы/селекты/скроллбар — тёмные */
  /* тёмная схема — чистый чёрный; поверхности «поднимаются» серым,
     иначе на чёрном не видно границ карточек. Текст — Pale Ivory. */
  --surface-page:#000000;
  --surface-card:#141414;
  --surface-well:#1f1f1f;
  --paper:#141414;                   /* шапка и «бумажные» поверхности */
  --surface-ink:#000000;             /* герой/подвал */
  --text-strong:#f3f0e7;
  --text-body:#d6d1c9;
  --text-muted:#a9a29e;
  --text-faint:#837c78;
  --border-subtle:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.17);
  /* Фон фото товара — Pale Ivory (не белый): packshot колеруется multiply,
     поэтому подложка обязана оставаться светлой, иначе фото почернеет. */
  --grey-cool:#f3f0e7;
  --shadow-sm:0 2px 6px rgba(0,0,0,.5);
  --shadow-md:0 6px 18px rgba(0,0,0,.55);
  --shadow-card-hover:0 18px 44px rgba(0,0,0,.6);
}
/* Логотип: тёмный текст знака → светлый на тёмной шапке */
:root[data-theme="dark"] .logo-word{color:var(--text-strong)}
/* Цвета плашки героя теперь идут от --hero-veil/--hero-ink, отдельное
   правило для тёмной темы не нужно. */

/* --- Переключатель темы в шапке --- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--hdr-btn);height:var(--hdr-btn);border-radius:var(--radius-pill);
  background:var(--surface-well);border:1px solid var(--border-subtle);
  color:var(--text-strong);cursor:pointer;flex:none;
  transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover{border-color:var(--border-strong)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle svg{width:14px;height:14px;display:block}
.theme-toggle .ic-moon{display:none}
.theme-toggle .ic-sun{display:block}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:block}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:none}
/* плавная смена темы */
body,.header,.pcard,.benefit,.cat-card,.showroom-card,.filters,.cart-btn{
  transition:background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
@media(prefers-reduced-motion:reduce){
  body,.header,.pcard,.benefit,.cat-card,.showroom-card,.filters,.cart-btn{transition:none}
}

/* Тёмная тема: текст шапки заметнее поверх яркого радужного свечения */
:root[data-theme="dark"] .nav a,
:root[data-theme="dark"] .header-phone{
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.7);   /* тёмная подложка — читается на любом цвете */
}
:root[data-theme="dark"] .nav a{font-weight:var(--fw-bold)}
:root[data-theme="dark"] .nav a:hover{color:#fff}
:root[data-theme="dark"] .nav a.active{color:#fff;border-bottom-color:var(--hue-yellow)}
:root[data-theme="dark"] .logo-word{text-shadow:0 1px 4px rgba(0,0,0,.6)}

/* Узкие экраны: в шапке помещаются бургер + логотип по центру + тема + корзина.
   Уменьшаем знак и прячем цветные точки, иначе логотип упирается в кнопки. */
@media(max-width:620px){
  .logo-word{font-size:20px;letter-spacing:.04em}
  .logo-dots{display:none}
  .logo{gap:6px}
  .header-right{gap:6px}
  /* Значки уменьшены вдвое: кружки 44→22, пиктограммы и штрихи бургера 24→12.
     Область нажатия при этом расширена на 4px вокруг (см. ::after ниже) —
     по самому кружку в 22px попасть пальцем было бы трудно. */
  .header{--hdr-btn:28px}
  .theme-toggle svg,.cart-btn svg{width:15px;height:15px}
  .burger{padding:12px}
  .burger svg{width:15px;height:15px}
  .lang-switch{font-size:11px;letter-spacing:0}
  /* Зазор 6px и расширение на 2px: зоны нажатия соседних кнопок всё ещё
     не перекрываются (между ними остаётся 2px), иначе палец попадал бы
     не туда. Сами кнопки выросли до 28px, поэтому запас можно было ужать. */
  .theme-toggle,.lang-switch{position:relative}
  .theme-toggle::after,.lang-switch::after,.cart-btn::after{
    content:"";position:absolute;inset:-2px;border-radius:inherit;
  }
}
@media(max-width:380px){
  .logo-word{font-size:18px}
  .header .container{gap:8px}
}

/* Slate #535366 хорош как фон кнопок, но как ТЕКСТ на чёрном он слишком тёмный.
   В тёмной теме для текстовых ролей берём осветлённый оттенок того же Slate. */
:root[data-theme="dark"]{ --color-link:#b6b6cc; }
:root[data-theme="dark"] .nav a:hover,
:root[data-theme="dark"] .pcard h4 a:hover{ color:#c3c3d6 }

/* Иллюстрация справа от текста. Ширину держим переменной: на неё же отступает
   текст (см. .hero .container ниже), иначе заголовок ложится прямо на буквы
   надписи — раньше это прятал тёмный градиент, теперь прятать нечем.

   По вертикали рамка совпадает с текстовым блоком: те же поля, что у
   контейнера. Поэтому надпись стоит ровно от плашки «официальный
   представитель» до кнопок, а не висит меньшим пятном посередине. Работает
   потому, что файлы обрезаны по самой надписи — полей внутри картинки нет. */
.hero-art{
  position:absolute;top:0;bottom:0;
  right:0;width:var(--hero-art-w);min-width:380px;
  /* z-index намеренно не задан. Любое значение создало бы контекст наложения,
     и ролик смешивался бы с пустотой внутри этого блока, а не с фоном секции —
     белый прямоугольник оставался бы на месте. Текст и так выше: у .container
     свой z-index:2. */
  pointer-events:none;
  /* Обрезки здесь нет намеренно. Рамка совпадает с текстовым блоком, а ролик
     мы увеличиваем (см. video.hero-pic) — по её краю срезало крылья бабочкам,
     которые вылетают выше надписи. Границей служит сам герой: у него
     overflow:hidden, и запаса там на его поля, 76px сверху и 82 снизу. */
  overflow:visible;
}
.hero .container{padding-top:var(--hero-pad-t);padding-bottom:var(--hero-pad-b)}
@media(min-width:901px){
  .hero .container{
    padding-right:max(var(--gutter),
      calc(var(--hero-art-w) - var(--hero-side) + var(--gutter)));
  }
  .hero-art{top:var(--hero-pad-t);bottom:var(--hero-pad-b)}
}
/* Правый край надписи — на линии плиток каталога, а не у края экрана.
   На широком мониторе контейнер перестаёт расти, а надпись задана в vw: она
   уезжала за содержимое и висела правее всего сайта.

   Отступ считаем от половины самого героя, а не через --hero-side: тот выражен
   в 100vw, а 100vw включает полосу прокрутки — надпись вставала левее плиток
   на половину её ширины. Ширину уменьшаем на тот же отступ, чтобы левый край
   рамки остался на месте и резерв под текст выше считался как раньше.

   Только от 1800: там контейнер уже упёрся в свои 1680 и снаружи появляется
   свободное поле. Ниже надпись и без того почти касается заголовка — её ширину
   задаёт высота блока, а не рамка, — и сдвиг влево наезжал на текст. */
@media(min-width:1800px){
  /* Выше 1800 контейнер уже не растёт, а рисунок задан в vw. Из-за этого
     на широком мониторе он уезжал правее всего содержимого сайта и заодно
     отбирал ширину у текста: резерв под него тоже считался от vw.

     Привязываем первый экран к контейнеру, а не к экрану: ширина рисунка —
     доля контейнера, правый край — на линии плиток каталога. От 1800 и выше
     геометрия героя перестаёт зависеть от ширины монитора, поэтому и высота
     блока, и ширина надписи, и зазор до текста везде одинаковые. */
  .hero{ --hero-art-w:calc(var(--container) * 0.62); }
  .hero-art{
    /* Считаем от половины самого героя, а не через --hero-side: тот выражен
       в 100vw, а 100vw включает полосу прокрутки — надпись вставала левее
       плиток на половину её ширины. */
    right:max(var(--gutter), calc(50% - var(--container) / 2 + var(--gutter)));
  }
  /* Текст заканчивается ровно на левом краю рамки рисунка. Сама надпись
     начинается заметно правее: она вписана в рамку по высоте и прижата
     к правому краю. */
  .hero .container{ padding-right:calc(var(--hero-art-w) + var(--gutter)); }
}
/* Два ролика лежат стопкой, виден тот, что подходит теме. Переключаем
   прозрачностью, а не display: так смена темы не дёргает раскладку.

   contain, а не cover: в кадре надпись целиком, и обрезка съедала бы буквы.
   Прижимаем вправо — свободное место слева уходит под текст. Пустота там не
   видна: фон ролика и фон секции одного цвета. */
.hero-pic{
  position:absolute;inset:0;
  width:100%;height:100%;display:block;
  object-fit:contain;object-position:right center;
}
/* Ролики оставлены целиком, как есть: 16:9, и вокруг надписи в кадре широкие
   поля — надпись занимает 79% высоты. Без поправки она была бы на четверть
   мельче прежней. Увеличиваем сам кадр на 1/0.79, поля уходят за края и
   пропадают: они того же цвета, что фон секции. Точка отсчёта — правый край,
   чтобы надпись осталась прижатой к нему. */
video.hero-pic{transform:scale(1.26);transform-origin:right center}

/* Фон ролика растворяем режимом наложения, а не подбором цвета.

   Подбор не работал: браузер приводит цвет у видео и у CSS по-разному (видео
   идёт через своё преобразование, ещё и с поправкой на профиль монитора), и
   даже при совпадающих числах на экране оставался заметный прямоугольник.

   В файлах фон теперь чисто белый и чисто чёрный. multiply умножает на
   подложку: белое даёт ровно подложку, каким бы цветом она ни была. screen
   работает зеркально: чёрное не меняет подложку. Совпадать по числам больше
   не нужно — стык пропадает сам, на любом мониторе.

   Буквам это почти ничего не стоит: на светлой теме они темнеют на те же 3%,
   на сколько фон страницы отличается от белого. */
.hero-pic-light{mix-blend-mode:multiply}
.hero-pic-dark{mix-blend-mode:screen}
.hero-pic-dark{opacity:0}
:root[data-theme="dark"] .hero-pic-dark{opacity:1}
:root[data-theme="dark"] .hero-pic-light{opacity:0}
/* Затемнения слева больше нет. Оно требовалось, пока в кадре была фотография
   с собственным фоном: без него текст читался поверх картинки. У иллюстрации
   фон совпадает с фоном секции, стыка не видно, а градиент только гасил
   первые буквы надписи. */
/* На телефоне картинка сбоку не помещается — прячем, как и прежде */
@media(max-width:900px){ .hero-art{display:none} }

/* --- Кнопка «Подобрать цвет»: светящаяся радужная обводка по контуру --- */
:root{
  --spectrum:linear-gradient(90deg,
    var(--hue-yellow),var(--hue-amber),var(--hue-orange),var(--hue-red),var(--hue-magenta),
    var(--hue-violet),var(--hue-indigo),var(--hue-blue),var(--hue-teal),var(--hue-green),var(--hue-lime),
    var(--hue-yellow));   /* повтор жёлтого в конце — шов петли не виден */
}
.btn-rainbow{
  position:relative;color:var(--ink-900);
  border:2px solid transparent;
  /* заливка идёт по padding-box, спектр — по border-box: получается градиентный контур */
  background:linear-gradient(#fff,#fff) padding-box, var(--spectrum) border-box;
  background-size:auto, 200% 100%;
  animation:btn-ring 5s linear infinite;
}
/* Свечение: тот же контур, но размытый — повторяет форму кнопки */
.btn-rainbow::before{
  content:"";position:absolute;inset:-6px;z-index:-1;pointer-events:none;
  border-radius:inherit;
  background:var(--spectrum);
  background-size:200% 100%;
  filter:blur(13px) saturate(1.8);
  animation:btn-hue 5s linear infinite, btn-glow 3.5s ease-in-out infinite;
}
.btn-rainbow:hover{animation-duration:2.5s}
.btn-rainbow:hover::before{animation-duration:2.5s,3.5s;filter:blur(14px) saturate(1.7)}
@keyframes btn-ring{ to{ background-position:0 0, -200% 0 } }
@keyframes btn-hue{ to{ background-position:-200% 0 } }
@keyframes btn-glow{ 0%,100%{opacity:.75} 50%{opacity:1} }
@media(prefers-reduced-motion:reduce){
  .btn-rainbow,.btn-rainbow::before{animation:none}
}

/* --- Весь текст героя по одной левой линии ---
   Плашка выравнивается по своему левому краю, как заголовок, абзац и кнопки.
   Раньше она была сдвинута влево на величину внутреннего отступа, чтобы на линию
   попадал её ТЕКСТ, — но тогда сама плашка торчала за общий край блока.
   Плашка — объект с фоном и рамкой, и глаз выстраивает ряд по её краю. */
.hero-badge{margin-left:0}
@media(max-width:900px){
  .hero-badge{padding-left:12px;gap:7px}   /* точка ближе к краю — на узком экране плашка почти во всю ширину */
}

/* --- Палитра фоном в шапке раздела (например, «Подбор цвета») --- */
.page-head.has-art{position:relative;isolation:isolate}
.page-head.has-art > *:not(.head-art){position:relative;z-index:2}
.head-art{
  position:absolute;top:0;right:0;bottom:0;width:56%;min-width:340px;
  z-index:1;pointer-events:none;overflow:hidden;border-radius:var(--radius-lg);
}
.head-art img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 62%}
/* растворяем левый край, чтобы текст читался поверх */
.head-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--surface-page) 0%,
             color-mix(in srgb,var(--surface-page) 70%,transparent) 22%,
             transparent 60%);
}
@media(max-width:900px){ .head-art{display:none} }

/* На мобильном логотип — по центру: слева бургер, справа тема+корзина.
   Знак лежит внутри левой зоны, поэтому центрируем его абсолютно
   (сеткой нельзя — это не отдельная колонка). */
/* Только знак в шапке: без .header это правило ловило и логотип в подвале —
   он вырывался из потока и ложился поверх текста «Официальный представитель». */
@media(max-width:900px){
  .header .logo{position:absolute;left:50%;transform:translateX(-50%)}
}

/* Вариант шапки раздела с вырезанным объектом (фон снят) —
   вписывается целиком, без обрезки и без затемняющего градиента. */
.head-art--cut{width:46%;min-width:280px;border-radius:0}
/* Шапка с высоким кадром: у линейки вёдер широкий формат, и по высоте шапки
   заголовка ей достаётся полоска в 230 px — этикетки на вёдрах не разобрать.
   Задаём высоту кадру, текст выравниваем по центру. */
.page-head.head-tall{min-height:320px;display:flex;flex-direction:column;justify-content:center}
/* Кадр шире обычного: он вписывается по ширине, и каждый лишний процент
   идёт в высоту. Абзац при этом подрезаем — иначе строки уедут под картинку. */
.head-tall .head-art--cut{width:52%}
.head-tall p{max-width:560px}
@media(max-width:900px){ .page-head.head-tall{min-height:0;display:block} }
.head-art--cut picture{display:block;width:100%;height:100%}
.head-art--cut img{width:100%;height:100%;object-fit:contain;object-position:right center}
.head-art--cut::after{display:none}
/* Ролик в шапке «О бренде». Классы те же, что на главной, поэтому сюда
   доезжает и увеличение кадра — а здесь оно лишнее: у блока есть обрезка по
   краям, и увеличенный кадр упирался бы в неё. Кадр вписываем целиком. */
.head-art video.hero-pic{transform:none}
/* Плашка под ролик не нужна: фон кадра растворяется в фоне страницы режимом
   наложения (см. .hero-pic-light / .hero-pic-dark). Обрезку снимаем, чтобы не
   резать бабочек, а z-index убираем — с ним ролик смешивался бы с пустотой
   внутри блока вместо фона страницы. Текст выше и без того: у соседей по
   .page-head.has-art задан z-index:2.

   Ищем по классу .hero-pic, а не по тегу video: на сайте для ОАЭ на первом
   экране стоит картинка, и по тегу правила бы не сработали — вокруг надписи
   вернулась бы плашка, а вместе с ней белый прямоугольник. */
.head-art:has(.hero-pic){background:none;overflow:visible;z-index:auto}
/* И на самой шапке снимаем isolation: она отсекала наложение так же, как это
   делал z-index у блока, и белый прямоугольник оставался. */
.page-head.has-art:has(.head-art .hero-pic){isolation:auto}

/* «Подбор цвета»: левая и правая колонки на одной линии.
   Колонки-обёртки убираем из потока (display:contents), а их шапки и тела
   раскладываем по общим рядам сетки — тогда высота шапок выравнивается
   автоматически, независимо от того, в сколько строк встали фильтры. */
@media(min-width:901px){
  .color-layout{grid-template-rows:auto 1fr}
  .color-layout > div{display:contents}
  .color-layout > div:nth-child(1) > .col-head{grid-column:1;grid-row:1}
  .color-layout > div:nth-child(1) > .col-body{grid-column:1;grid-row:2}
  .color-layout > div:nth-child(2) > .col-head{grid-column:2;grid-row:1}
  .color-layout > div:nth-child(2) > .col-body{grid-column:2;grid-row:2}
  /* шапки прижимаем к низу ряда — поиск и переключатель встают на одну линию */
  .color-layout .col-head{display:flex;flex-direction:column;justify-content:flex-end}
}

/* ============================================================
   Адам — ИИ-консультант. Плавающая кнопка и панель чата.
   Панель — фиксированный слой поверх страницы; на телефоне
   разворачивается почти на весь экран, иначе в ней не почитать.
   ============================================================ */
.adam{position:fixed;right:20px;bottom:20px;z-index:120;font-family:var(--font-body)}

.adam-fab{
  display:inline-flex;align-items:center;gap:10px;
  height:52px;padding:0 20px 0 16px;border:0;border-radius:var(--radius-pill);
  background:var(--ink-900);color:#fff;cursor:pointer;
  box-shadow:var(--shadow-lg);
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-sm);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
/* Фото в цветном кольце: сам портрет чёрно-белый, спектр по краю связывает
   его с фирменным мотивом. Кольцо — padding, а не бордер: так оно не режет фото. */
.adam-fab-face{
  display:inline-flex;width:30px;height:30px;flex:none;padding:2px;
  border-radius:50%;background:var(--spectrum);background-size:200% 100%;
  animation:adam-hue 6s linear infinite;
}
@keyframes adam-hue{ to{ background-position:-200% 0 } }

/* Цветной блик по надписи: раз в 5 секунд по буквам пробегает радуга, всё
   остальное время они просто белые.

   Как сделано: заливаем текст градиентом, где почти всё белое и лишь узкая
   спектральная полоса, и обрезаем заливку по буквам (background-clip:text).
   Двигаем градиент — полоса проходит по надписи ровно один раз за цикл.

   Почему 800%, а не привычные 200%: полоса занимает долю картинки, и чем
   картинка шире, тем короче пробег. На 200% радуга ползла по буквам почти
   половину цикла и читалась как «текст всегда цветной», на 800% проход длится
   около секунды из пяти — это уже блик.

   Смещение −114.2857% = ровно одна ширина картинки (100 × 8/7): при другом
   значении на стыке цикла был бы скачок.

   Без background-clip:text прозрачные буквы просто исчезли бы, поэтому вся
   затея — внутри @supports. */
.adam-fab-text{white-space:nowrap}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .adam-fab-text{
    background-image:linear-gradient(100deg,
      #fff 0%, #fff 44%,
      var(--hue-yellow) 46.5%, var(--hue-orange) 48%, var(--hue-red) 49.5%,
      var(--hue-magenta) 51%, var(--hue-blue) 52.5%, var(--hue-teal) 54%,
      var(--hue-green) 55.5%, #fff 58%, #fff 100%);
    background-size:800% 100%;background-repeat:repeat;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    animation:adam-shine 5s linear infinite;
  }
}
@keyframes adam-shine{ to{ background-position:-114.2857% 0 } }
.adam-fab-face img,.adam-avatar img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
}
@media(hover:hover){ .adam-fab:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)} }
.adam-fab:active{transform:scale(.97)}
.adam.is-open .adam-fab{opacity:0;pointer-events:none;transform:scale(.9)}

.adam-panel{
  position:absolute;right:0;bottom:0;width:min(390px,calc(100vw - 40px));
  max-height:min(620px,calc(100vh - 90px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);
  animation:adam-in .22s var(--ease-out) both;
}
/* Обязательно: display:flex выше перебивает атрибут hidden,
   и панель висела бы открытой сразу после загрузки страницы. */
.adam-panel[hidden]{display:none}
@keyframes adam-in{ from{opacity:0;transform:translateY(12px) scale(.98)} }

.adam-head{
  display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;
  border-bottom:1px solid var(--border-subtle);background:var(--surface-well);
}
.adam-avatar{
  width:34px;height:34px;flex:none;border-radius:50%;padding:2px;display:flex;
  background:var(--spectrum);background-size:200% 100%;animation:adam-hue 6s linear infinite;
}
.adam-who{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex:1}
.adam-who b{font-family:var(--font-display);font-size:var(--fs-sm);color:var(--text-strong)}
.adam-who small{font-size:var(--fs-xs);color:var(--text-muted)}
.adam-clear,.adam-x{
  width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:none;color:var(--text-muted);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
@media(hover:hover){ .adam-clear:hover,.adam-x:hover{background:var(--surface-card);color:var(--text-strong)} }

.adam-log{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px}
.adam-msg{max-width:88%;font-size:var(--fs-sm);line-height:var(--lh-normal);border-radius:var(--radius-md)}
.adam-msg p{margin:0 0 8px}
.adam-msg p:last-child{margin:0}
.adam-msg ul{margin:6px 0;padding-left:18px}
.adam-msg li{margin:3px 0}
.adam-bot{align-self:flex-start;background:var(--surface-well);color:var(--text-body);padding:11px 13px}
.adam-me{align-self:flex-end;background:var(--color-primary);color:#fff;padding:10px 13px}
.adam-me a,.adam-bot a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.adam-bot a{color:var(--color-link);font-weight:var(--fw-semibold)}
.adam-msg.is-err{background:var(--red-100);color:var(--red-600)}

/* образец оттенка прямо в реплике — код проще узнать по цвету, чем по буквам */
.adam-swatch{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-weight:var(--fw-bold)}
.adam-swatch i{
  width:15px;height:15px;border-radius:4px;flex:none;
  box-shadow:0 0 0 1px rgba(128,128,128,.45) inset;   /* светлый образец не пропадает на белом */
}
.adam-swatch .mono{font-family:var(--font-mono);font-weight:var(--fw-regular);font-size:11px;color:var(--text-muted)}
.adam-pin{
  display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  padding:7px 12px;border-radius:var(--radius-pill);
  background:var(--surface-card);border:1px solid var(--border-strong);
  font-weight:var(--fw-bold);text-decoration:none !important;
}

.adam-dots{display:inline-flex;gap:4px;align-items:center;height:16px}
.adam-dots i{width:6px;height:6px;border-radius:50%;background:var(--text-faint);animation:adam-dot 1.1s ease-in-out infinite}
.adam-dots i:nth-child(2){animation-delay:.16s}
.adam-dots i:nth-child(3){animation-delay:.32s}
@keyframes adam-dot{ 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }

.adam-starters{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
/* Предупреждение об ИИ занимает всю строку под подсказками */
.adam-note{flex-basis:100%;margin:2px 0 0;font-size:11px;line-height:1.45;color:var(--text-faint)}
.adam-starters[hidden]{display:none}
.adam-starters button{
  padding:8px 12px;border-radius:var(--radius-pill);cursor:pointer;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  color:var(--text-body);font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
@media(hover:hover){ .adam-starters button:hover{border-color:var(--color-primary);color:var(--text-strong)} }

.adam-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--border-subtle)}
.adam-input{
  /* min-width:0 обязателен. У textarea своя «естественная» ширина — 20 символов
     по умолчанию, и flex-элемент не сжимается меньше неё. Строка становилась
     шире панели и выдавливала кнопку отправки за край экрана. */
  flex:1;min-width:0;resize:none;font:inherit;font-size:var(--fs-sm);line-height:1.4;
  padding:11px 13px;border-radius:var(--radius-md);
  background:var(--surface-well);border:1px solid var(--border-subtle);color:var(--text-strong);
  max-height:120px;
}
.adam-input:focus{outline:none;border-color:var(--border-focus)}
.adam-send{
  width:40px;height:40px;flex:none;border:0;border-radius:var(--radius-md);cursor:pointer;
  background:var(--color-accent);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
@media(hover:hover){ .adam-send:hover{background:var(--color-accent-hover)} }
.adam-send:active{transform:scale(.94)}

@media(max-width:560px){
  .adam{right:12px;bottom:12px;left:12px}
  .adam-fab{width:100%;justify-content:center}
  .adam-panel{
    position:fixed;inset:auto 8px 8px 8px;width:auto;
    max-height:min(78vh, calc(100vh - 80px));
  }
  .adam-msg{max-width:92%}
}
@media(prefers-reduced-motion:reduce){
  .adam-panel{animation:none}
  .adam-fab-face,.adam-avatar{animation:none}
  /* Блик по надписи гасим вместе с остальным движением и возвращаем буквам
     обычный цвет — иначе они остались бы прозрачными. */
  .adam-fab-text{
    animation:none;background-image:none;
    color:#fff;-webkit-text-fill-color:#fff;
  }
  .adam-dots i{animation:none}
}

/* ==================================================================
   Поиск в шапке: по каталогу и по цвету
   ================================================================== */

/* Четвёртая колонка под поиск. Раньше зон было три (лого — меню — действия),
   теперь между лого и меню встаёт поле: оно шире всего нужно на десктопе,
   а разделы каталога занимают остаток. */
@media(min-width:901px){
  /* Разделам — max-content: список из пяти пунктов не переносится и не
     наезжает на кнопки справа. Ужимается поле поиска, оно это переживает. */
  /* Нижняя граница поля — 120px, а не 150: в узкой полосе перед мобильной
     вёрсткой (901–930px) пяти пунктов меню и кнопок не хватало места, и блок
     значков вылезал на поле страницы. Пусть лучше сожмётся поиск. */
  .header .container{grid-template-columns:auto minmax(120px,320px) max-content auto;gap:16px}
  .nav{margin-left:0;gap:18px}
  .nav .nav-extra{display:none}   /* на десктопе эти разделы живут в подвале */
}
/* Телефон уступает место поиску. Порог подняли с 1400 до 1500: на 1440 —
   самой ходовой ширине ноутбука — номер оставлял полю поиска 183px, в него
   не помещалась даже подсказка. Номер есть в подвале и в контактах, поле
   поиска дублировать негде. */
@media(min-width:901px) and (max-width:1500px){
  .header-phone{display:none}
}
@media(min-width:901px) and (max-width:1400px){
  .nav{gap:14px}
  .nav a{font-size:var(--fs-xs)}
}

.hsearch{position:relative;display:flex;align-items:center;min-width:0}
.hsearch-ic{
  position:absolute;left:11px;width:14px;height:14px;pointer-events:none;
  color:var(--text-muted);
}
.hsearch input{
  /* Одна высота с корзиной и кружками справа — её задаёт --hdr-btn в .header.
     Фиксированное значение разъезжалось с ними при любой правке шапки. */
  width:100%;height:var(--hdr-btn);padding:0 12px 0 30px;
  font:inherit;font-size:var(--fs-sm);color:var(--text-strong);
  background:var(--surface-well);border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);outline:none;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.hsearch input::placeholder{color:var(--text-muted)}
.hsearch input:focus{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.hsearch input::-webkit-search-cancel-button{-webkit-appearance:none}

.hsearch-panel{
  display:none;position:absolute;top:calc(100% + 10px);left:0;
  width:min(520px,86vw);max-height:min(70vh,560px);overflow:auto;
  background:var(--paper);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  padding:10px;z-index:120;
}
.hsearch-panel.open{display:block}
.hs-sec + .hs-sec{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-subtle)}
.hs-cap{
  font-family:var(--font-display);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-muted);margin:2px 4px 8px;
}
.hs-note{color:var(--text-muted);font-size:var(--fs-sm);padding:8px 4px}
.hs-prod{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--radius-md);text-decoration:none}
.hs-prod:hover{background:var(--surface-well);text-decoration:none}
/* Подложка обязана быть светлой: фото товара накладывается режимом multiply
   и на тёмном фоне превращается в чёрный квадрат (см. .packshot). */
.hs-prod-ic{
  flex:0 0 auto;width:40px;height:40px;display:block;overflow:hidden;
  border-radius:var(--radius-sm);background:var(--grey-cool);padding:3px;
}
.hs-prod-ic img,.hs-prod-ic svg{width:100%;height:100%;object-fit:contain;display:block}
.hs-prod b{display:block;font-size:var(--fs-sm);color:var(--text-strong)}
.hs-prod i{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--text-muted)}

/* Палитра результатов: квадраты без зазоров читаются как выкраска веера */
.hs-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px;padding:0 4px 4px}
.hs-swatches .sw{
  aspect-ratio:1;width:100%;border:1px solid rgba(20,20,20,.14);
  border-radius:var(--radius-xs);cursor:pointer;padding:0;
  transition:transform var(--dur-fast) var(--ease-out);
}
.hs-swatches .sw:hover{transform:scale(1.12);z-index:2;box-shadow:var(--shadow-sm)}

/* ---------- Окно выбора краски под оттенок ---------- */

.cpick{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(10,10,12,.55);padding:16px;
}
.cpick-card{
  position:relative;width:min(680px,100%);max-height:88vh;overflow:auto;
  background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:22px 24px 24px;
}
.cpick-x{
  position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;background:transparent;
  font-size:24px;line-height:1;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-pill);
}
.cpick-x:hover{background:var(--surface-well);color:var(--text-strong)}
.cpick-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.cpick-sw{
  flex:0 0 auto;width:64px;height:64px;border-radius:var(--radius-md);
  border:1px solid var(--border-strong);box-shadow:var(--shadow-sm);
}
.cpick-head b{display:block;font-family:var(--font-display);font-size:var(--fs-body-lg);color:var(--text-strong)}
.cpick-head i{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--text-muted);margin-top:2px}
.cpick-title{
  font-family:var(--font-display);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-muted);
}
.cpick-hint{color:var(--text-muted);font-size:var(--fs-sm);margin:6px 0 12px}
.cpick-rooms{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.cpick-room{
  padding:8px 14px;border-radius:var(--radius-pill);cursor:pointer;
  border:1px solid var(--border-subtle);background:var(--surface-well);
  font:inherit;font-size:var(--fs-sm);color:var(--text-strong);
}
.cpick-room:hover{border-color:var(--border-strong)}
/* Выбранная кнопка — как остальные «таблетки» на сайте: белый текст.
   var(--paper) здесь нельзя: в тёмной теме это #141414, надпись пропадала. */
.cpick-room.on{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.cpick-item{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--border-subtle)}
.cpick-ic{
  position:relative;flex:0 0 auto;width:54px;height:54px;display:block;overflow:hidden;
  border-radius:var(--radius-sm);background:var(--grey-cool);padding:3px;
}
/* Полоса выбранного оттенка: фото у красок общее, и без неё непонятно,
   в какой цвет колеруется именно эта банка. */
.cpick-ic i{
  position:absolute;left:0;right:0;bottom:0;height:11px;
  box-shadow:0 -1px 0 rgba(20,20,20,.15) inset;
}
.cpick-ic img,.cpick-ic svg{width:100%;height:100%;object-fit:contain;display:block}
.cpick-txt{flex:1 1 auto;min-width:0}
.cpick-txt b{display:block;font-size:var(--fs-sm);color:var(--text-strong)}
.cpick-txt i{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--text-muted)}
.cpick-go{flex:0 0 auto;padding:9px 18px;font-size:var(--fs-sm)}

/* ---------- Телефон: шапка одной строкой, без поиска ----------
   Поле поиска занимало отдельную строку во всю ширину — это была четверть
   высоты шапки на каждом экране. Убрали: на телефоне товар ищут через
   каталог, а разделы уже есть в меню. Разметку поля скрипт по-прежнему
   создаёт, прячем стилями — так десктоп не трогаем. */
@media(max-width:900px){
  /* min-height, а не auto: без него шапка выходила на 57px, а место под неё
     резервируется по --header-h (60px) — те самые 3px сдвига при загрузке. */
  .header{height:auto;min-height:var(--header-h)}
  .header .container{
    grid-template-columns:auto minmax(0,1fr);
    row-gap:0;padding-top:8px;padding-bottom:10px;
  }
  .hsearch{display:none}
  /* меню выпадает от низа шапки — считаем от неё саму */
  .nav{top:100%;position:absolute}
  .cpick-card{padding:18px 16px 20px}
  .cpick-sw{width:52px;height:52px}
}

/* «Показать ещё N» — действие, а не подпись: раньше выглядело кликабельным,
   но кнопкой не было. */
.hs-more{
  display:block;width:calc(100% - 8px);margin:8px 4px 2px;padding:9px 12px;
  font:inherit;font-size:var(--fs-sm);color:var(--text-strong);cursor:pointer;
  background:var(--surface-well);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
}
.hs-more:hover{border-color:var(--border-strong)}

/* ==================================================================
   Шапка как стекло (liquid glass)

   Смысл материала: шапка перестаёт быть непрозрачной полосой, которая
   «съедает» верх экрана, и становится слоем, под которым видно страницу.
   Контент проходит под ней размытым — видно, что там что-то есть, но читать
   он не мешает.

   Три вещи, без которых это выглядит грязно, а не стеклянно:
   1. saturate — за размытием цвета вянут, насыщенность возвращает им жизнь;
   2. светлая грань сверху (inset-тень) — так материал ловит свет по кромке;
   3. при прокрутке стекло «густеет»: под ним появился контент, и подложку
      надо уплотнить, иначе текст шапки начинает конкурировать с картинками.
   ================================================================== */

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header{
    background:color-mix(in srgb, var(--paper) 58%, transparent);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    backdrop-filter:blur(20px) saturate(180%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
    transition:background var(--dur-base) var(--ease-out),
               box-shadow var(--dur-base) var(--ease-out);
  }
  /* Прокрутили — под стеклом контент, добавляем плотности и тень отрыва */
  .header.scrolled{
    background:color-mix(in srgb, var(--paper) 74%, transparent);
    -webkit-backdrop-filter:blur(26px) saturate(190%);
    backdrop-filter:blur(26px) saturate(190%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 8px 24px rgba(20,20,20,.08);
  }
  /* На тёмной теме блик по кромке слабее: на чёрном белая линия в полсилы
     уже читается как подсветка, в полную — как посторонняя рамка. */
  :root[data-theme="dark"] .header{ box-shadow:inset 0 1px 0 rgba(255,255,255,.10) }
  :root[data-theme="dark"] .header.scrolled{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 10px 28px rgba(0,0,0,.5);
  }

  /* Выпадающее меню на телефоне — продолжение той же шапки, иначе стеклянная
     полоса переходила бы в глухую панель. */
  @media(max-width:900px){
    .nav{
      background:color-mix(in srgb, var(--paper) 88%, transparent);
      -webkit-backdrop-filter:blur(22px) saturate(180%);
      backdrop-filter:blur(22px) saturate(180%);
    }
  }
}

/* Системная настройка «меньше прозрачности» — возвращаем глухой фон.
   Blur здесь не косметика: для части людей текст поверх движущегося
   размытия читается заметно хуже. */
@media(prefers-reduced-transparency:reduce){
  .header,.header.scrolled,.nav{
    background:var(--paper);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}
/* Повышенный контраст — то же самое плюс явная граница */
@media(prefers-contrast:more){
  .header,.header.scrolled{
    background:var(--paper);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-bottom:1px solid var(--border-strong);
  }
}

/* Шапка рисуется скриптом внутрь <div id="header">, и эта обёртка ровно по
   высоте шапки. position:sticky липнет в пределах РОДИТЕЛЯ — а запаса хода
   в 72 px нет, поэтому шапка честно уезжала вверх вместе со страницей.
   display:contents убирает обёртку из потока: шапка становится прямым
   ребёнком body и липнет к окну, как задумано. */
#header{display:contents}

/* ---------------- «Почему Betek» в каталоге ---------------- */
.cat-why{
  background:var(--surface-well);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:26px 28px;margin:0 0 26px;
}
.cat-why h2{margin:0 0 10px;font-size:var(--fs-h4,1.25rem)}
.cat-why-lead{margin:0 0 20px;color:var(--text-body);max-width:78ch}
.cat-why-points{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 26px}
.cat-why-points > div{display:flex;flex-direction:column;gap:5px}
.cat-why-points b{color:var(--text-strong);font-size:var(--fs-sm)}
.cat-why-points span{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.5}
@media(max-width:900px){
  .cat-why{padding:18px 16px;margin-bottom:18px}
  .cat-why-points{grid-template-columns:1fr;gap:14px}
}

/* Видео на первом экране убрано: вместо ролика с валиками — иллюстрация
   BETEK RUSSIA в двух вариантах фона (см. .hero-pic выше). Вместе с ним ушли
   hero-video.js и 1,8 МБ mp4. */

/* Место под шапку до того, как её отрисует скрипт.

   Без этого браузер на медленном соединении успевает нарисовать страницу
   с пустым <div id="header">, а потом скрипт вставляет шапку — и весь экран
   прыгает вниз на её высоту. Именно это давало Cumulative Layout Shift около
   1.0 при норме 0.1: сдвиг во весь видимый экран.

   :empty перестаёт совпадать, как только шапка вставлена, и обёртка снова
   становится display:contents — иначе сломалось бы прилипание.

   Высоту берём из --header-h, а не числом: иначе при правке высоты шапки
   резерв молча разъедется с фактом и сдвиг вернётся. То же и с полосой
   «сайт в разработке»: она рисуется тем же скриптом, и её высота входит
   в резерв — иначе содержимое прыгало бы на 32 px. */
#header:empty{display:block;height:calc(var(--header-h) + var(--devbar-h))}
/* На телефоне поиска в шапке нет, второй строки тоже — резерв равен
   высоте шапки, как и на десктопе. */

/* Место под плитки категорий, пока их не отрисовал скрипт.

   На телефоне сетка начинается на 541-й точке при высоте экрана 823 — то есть
   попадает в первый экран. Пока она пустая, следующая секция стоит выше и
   видна; когда плитки появляются, всё видимое уезжает вниз на её высоту.
   Это давало оставшиеся 0.3 сдвига после того, как починили шапку.

   Высоты сняты замером: 4 ряда по две колонки на телефоне, 3 ряда по три
   на планшете, 2 ряда по четыре на десктопе. Резерв взят чуть меньше
   фактического: недобрать пару десятков точек безопаснее, чем перебрать. */
#cats:empty{min-height:560px}
@media(max-width:1080px){ #cats:empty{min-height:815px} }
@media(max-width:900px){  #cats:empty{min-height:860px} }

/* ==================================================================
   Поля ввода на телефоне: 16 px, иначе Safari увеличивает страницу

   iOS ставит курсор в поле и, если шрифт в нём мельче 16 px, сам
   приближает страницу — «чтобы было удобно печатать». Масштаб уезжает,
   вёрстка выглядит съехавшей, и вернуть её приходится щипком вручную.

   Лечится размером шрифта, а не запретом масштабирования. Прописать
   user-scalable=no было бы проще, но тогда страницу не сможет увеличить
   никто и никогда — включая тех, кому это нужно, чтобы прочитать текст.
   ================================================================== */
@media(max-width:900px){
  .input, textarea.input, .select, .adam-input, .hsearch input,
  input[type="text"], input[type="tel"], input[type="email"],
  input[type="number"], input[type="search"], textarea{
    font-size:16px;
  }
  /* На 16 px строка в поле выше — компенсируем отступами,
     чтобы поля не выросли в высоту. */
  .input, textarea.input{padding:10px 13px}
  .adam-input{padding:9px 12px}
  /* Поле поиска — самое узкое место: строка 16px занимает около 19px, и в
     26px оно помещается впритык. Высота задана выше, здесь её не трогаем —
     раньше тут стояло 40px и оно перебивало правку вёрстки. */
}

/* ==================================================================
   Телефон: порядок блоков главной

   На большом экране сначала показываем разделы каталога, потом товары —
   там всё видно сразу. На телефоне между «Будь своим цветом» и первым
   товаром оказывалось два экрана прокрутки: плитки категорий и четыре
   текстовых блока. Поэтому на узких экранах товары идут сразу за первым
   экраном, а категории и тексты уходят под них.

   Порядок меняется только показом: в разметке всё осталось на своих
   местах, поисковые роботы читают страницу в исходной последовательности.
   ================================================================== */
@media(max-width:900px){
  body{display:flex;flex-direction:column}
  body > *{order:5}          /* всё, чему порядок не задан, идёт серединой */
  .hero{order:1}
  #sec-hits{order:2}
  #sec-cats{order:3}
  #sec-benefits{order:4}
  #footer{order:9}

  /* Отступы съехали вместе с блоками: у товаров сверху их не было,
     потому что раньше выше стояла другая секция. */
  #sec-hits{padding-top:34px}
  #sec-cats{padding-top:0}
}

/* ---------------- Фасовка в карточке товара ---------------- */
/* Выбор прямо в сетке: без него цена «от» относилась к мелкой банке,
   а в корзину уходила крупная. Отмеченная фасовка задаёт и цену, и то,
   что кладётся по кнопке. */
/* Строго в один ряд. Перенос на вторую строку рвал карточку по высоте и
   выглядел как две разные группы кнопок. Если фасовок много и они не влезают
   (у некоторых товаров их четыре, с подписями вроде «0,85 кг») — ряд
   прокручивается вбок, а не переносится. */
.pcard-sizes{
  display:flex;flex-wrap:nowrap;gap:5px;margin-top:2px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  /* полоса прокрутки внутри карточки только мешает — прячем, жест остаётся */
}
.pcard-sizes::-webkit-scrollbar{display:none}
.pcard-size{
  padding:5px 9px;border-radius:var(--radius-sm);cursor:pointer;
  font:inherit;font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1;
  color:var(--text-muted);background:var(--surface-well);
  border:1px solid var(--border-subtle);white-space:nowrap;
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
@media(hover:hover){ .pcard-size:hover{border-color:var(--border-strong);color:var(--text-strong)} }
.pcard-size.on{
  background:var(--ink-900);border-color:var(--ink-900);color:#fff;font-weight:var(--fw-bold);
}
.pcard-size:active{transform:scale(.96)}
@media(max-width:620px){
  /* Две колонки — на ряд остаётся около 137 px. Ужимаем чипы так, чтобы три
     штуки укладывались без прокрутки: это подавляющее большинство товаров. */
  .pcard-size{padding:6px 6px;font-size:10.5px;letter-spacing:-.02em}
  .pcard-sizes{gap:4px}
}


/* ================= Только сайт ОАЭ (tools/regions/ae.css) ================= */
/* Betek UAE — стили, которые нужны только эмиратскому сайту.

   Файл дописывается в конец assets/css/betek.css при сборке (tools/build-ae.py),
   отдельным запросом не грузится. Всё, что верно для обоих сайтов, живёт
   в общем betek.css — сюда попадает только то, что российскому сайту не нужно
   или для него неверно. */

/* ---------- Поиск на первом экране ----------

   Поле переехало из шапки под кнопки героя и занимает ровно их ширину —
   от левого края «в каталог» до правого края «подобрать цвет».

   Как получается эта ширина. Ряд кнопок переведён с флекса на сетку из двух
   колонок по содержимому, а поле растянуто на обе (grid-column:1/-1). Тогда
   его ширина — это ровно ширина двух кнопок плюс зазор между ними.

   Через флекс не вышло: там ряд приходилось ужимать по содержимому
   (width:max-content), и в эту ширину попадал ещё один зазор — перед пустым
   элементом поля. Поле получалось на 14 px шире кнопок, ровно на gap.

   Размеры задаём ОБЁРТКЕ #hero-search, а не форме: элементом сетки является
   она, форму в неё кладёт betek.js. Правила на .hsearch--hero не работали —
   форма внутри обёртки нулевой ширины сжималась в кружок. */
.hero-actions{
  display:grid;grid-template-columns:max-content max-content;
  justify-content:start;gap:16px 14px;
}
#hero-search{grid-column:1 / -1}
.hsearch--hero{width:100%}
.hsearch--hero input{
  height:46px;padding:0 16px 0 40px;
  font-size:var(--fs-body);
  /* На первом экране поле лежит на тёмной заливке, а не на поверхности шапки:
     фон берём чуть плотнее, иначе оно теряется. */
  background:rgba(var(--hero-veil),.06);
  border-color:rgba(var(--hero-veil),.20);
  color:var(--hero-ink);
}
.hsearch--hero input::placeholder{color:var(--hero-dim)}
.hsearch--hero input:focus{border-color:rgba(var(--hero-veil),.42)}
.hsearch--hero .hsearch-ic{left:15px;width:16px;height:16px;color:var(--hero-dim)}
/* Подсказки раскрываются вниз по ширине самого поля, а не по 520px из шапки. */
.hsearch--hero .hsearch-panel{width:100%;min-width:280px}

/* Шапка без поиска: колонка поля исчезает, её место забирают разделы. */
@media(min-width:901px){
  .header--nosearch .container{grid-template-columns:auto max-content auto}
}
/* На телефоне поиск в шапке скрыт совсем (общий CSS), а на первом экране —
   виден: это единственное место, где им можно воспользоваться с телефона. */
@media(max-width:900px){
  .hsearch--hero{display:flex}   /* общий CSS прячет .hsearch на телефоне */
  /* Две колонки по содержимому на узком экране не помещаются — кнопки
     встают друг под друга во всю ширину, поле под ними. */
  .hero-actions{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Переключатель языков с флагами ----------

   На российском сайте переключатель — круглая кнопка с буквами EN. Здесь
   языков три, и одними буквами ряд из двух кнопок читается хуже: глаз ищет
   флаг быстрее, чем разбирает «RU» и «AR». Поэтому кнопка становится
   вытянутой: флаг плюс код.

   Правила лежат в эмиратском файле, а не в общем: у российского сайта
   переключатель остаётся прежним. Включает их REGION.flags — от него же
   зависит и разметка (класс has-flag). */
.lang-switch.has-flag{
  width:auto;                      /* было width = высоте: кружок под две буквы */
  gap:6px;padding:0 9px 0 7px;
  font-size:10px;letter-spacing:.04em;
}
/* Текущий язык. Он не ссылка, поэтому и выглядит иначе: подсвечен и не
   реагирует на наведение. Без него из трёх флажков не понять, какой включён. */
.lang-switch.is-current{
  background:var(--surface-card);border-color:var(--color-accent);
  color:var(--text-strong);cursor:default;
}
.lang-switch.is-current:active{transform:none}
.lang-flag{
  width:16px;height:11px;flex:none;border-radius:2px;
  /* Тонкая рамка нужна белым полосам: без неё российский и британский флаг
     сливаются со светлой темой верхним краем. */
  box-shadow:0 0 0 1px rgba(0,0,0,.18);
}
:root[data-theme="dark"] .lang-flag{box-shadow:0 0 0 1px rgba(255,255,255,.22)}

/* Пункт языка в выпадающем меню. display НЕ трогаем: в общем CSS он скрыт
   (.nav .nav-home,.nav .nav-lang{display:none}) и на телефоне не возвращается —
   язык там переключают той же кнопкой в шапке. Первая версия этого правила
   ставила display:flex и вытаскивала подписи «Русский» и «العربية» прямо
   в десктопное меню, рядом с флажками-кнопками. */
.nav .nav-lang{align-items:center;gap:8px}
.nav .nav-lang .lang-flag{width:18px;height:13px;vertical-align:-2px}

/* На узком экране три пилюли с кодами не помещаются рядом с корзиной и
   темой — оставляем только флажки, они и так узнаваемы. */
@media(max-width:1100px){
  .lang-switch.has-flag{padding:0 7px;gap:0}
  .lang-switch.has-flag span{display:none}
}
/* Телефон. Здесь было правило, прятавшее второй неактивный флаг, — и с ним
   арабская версия на телефоне становилась НЕДОСТУПНОЙ: в шапке её флага нет,
   а пункт меню скрыт общим CSS. Показываем все три и освобождаем под них
   место.

   Логотип возвращается в поток. В общем CSS он до 900 px стоит по центру
   абсолютно (слева бургер, справа тема и корзина) — но там справа две
   кнопки, а здесь ещё три флага. Центрированный знак ложился прямо под них:
   на 375 px перекрытие было 37 px. Рядом с бургером он помещается на всех
   размерах, включая 320 px, — там между ним и кнопками остаётся 21 px.

   Пилюли и зазоры ужаты до 4 px: этого хватает, чтобы ряд не переносился
   на вторую строку на самых узких экранах. Зона нажатия при этом не
   страдает — общий CSS расширяет её на 2 px вокруг каждой кнопки. */
@media(max-width:560px){
  .header .logo{position:static;transform:none}
  .lang-switch.has-flag{padding:0 4px}
  .header-right{gap:4px}
}

/* ---------- Первый экран: правый край надписи ----------

   Надпись BETEK UAE прибита к правому краю ЭКРАНА, а плитки каталога — к краю
   контейнера. На широком мониторе это заметно: надпись уезжает правее всего
   остального содержимого. В общем CSS привязка к контейнеру включается только
   с 1800 px; здесь опускаем порог до 1200 — на эмиратском сайте первый экран
   с картинкой, а не с роликом, и запаса по ширине у него больше.

   Три правила работают только вместе: ширина рисунка от контейнера, правый
   край на линии плиток, и резерв под рисунок в отступе текста. Поменять одно
   из них — и надпись наедет на заголовок. */
@media(min-width:1200px){
  .hero{ --hero-art-w:calc(var(--container) * 0.62); }
  .hero-art{
    /* Считаем от половины самого героя, а не через --hero-side: тот выражен
       в 100vw, а 100vw включает полосу прокрутки — надпись вставала левее
       плиток ровно на её половину. */
    right:max(var(--gutter), calc(50% - var(--container) / 2 + var(--gutter)));
  }
  .hero .container{ padding-right:calc(var(--hero-art-w) + var(--gutter)); }
}
/* Зеркальная привязка для арабской версии лежит в rtl.css: тот файл
   дописывается позже, и правило отсюда он бы всё равно перебил. */

/* ---------- Мелкий текст в тёмной теме ----------

   На российском сайте эти два тона лежат на ровной чёрной странице. Здесь под
   ними фон-пустыня, и запаса не осталось: самый тихий тон (#837c78 на карточке
   #141414) давал 4,49:1 при норме 4,5 для обычного текста — то есть не
   дотягивал ещё до всякого фона. Поднимаем оба на шаг: иерархия «заголовок —
   текст — подпись» сохраняется, а подписи вроде «11 products» и вторые строки
   в карточках перестают тонуть.

   Правка только для ОАЭ: на живом российском сайте те же значения менять
   без спроса нельзя, хотя и там они на границе. */
:root[data-theme="dark"]{
  --text-muted:#b8b1ab;   /* было #a9a29e */
  --text-faint:#9a938d;   /* было #837c78 — 4,49:1, ниже нормы */
}

/* ---------- Карта шоурума в тёмной теме ----------

   Google отдаёт карту в единственном светлом оформлении: у встраивания через
   maps?q=…&output=embed нет ни параметра стиля, ни доступа к styled maps —
   тёмная схема есть только в JS-API с ключом и биллингом. Ради одной карты
   на сайте это лишний узел, который ещё и падает при исчерпании квоты.

   Поэтому переворачиваем цвета фильтром. hue-rotate возвращает синий воде и
   зелёный паркам: без него после invert вода становится оранжевой. invert
   неполный (0.92), иначе белый фон карты уходит в чистый чёрный и подписи
   на нём режут глаз; saturate приглушает кислотность, brightness возвращает
   яркость, потерянную на неполном инвертировании.

   Значения подобраны по экрану, а не по формуле: карта — растр, считать
   в ней нечего. */
:root[data-theme="dark"] .showroom-map iframe{
  filter:invert(0.92) hue-rotate(180deg) saturate(0.85) brightness(1.05);
}

/* Betek UAE — фон страницы с пустыней.

   Отдельный файл, а не часть ae.css, намеренно: правила ссылаются на
   assets/img/desert.jpg, и без самого снимка их подключать нельзя — браузер
   получил бы 404 на каждой странице. Сборка (tools/build-ae.py) дописывает
   этот файл только тогда, когда tools/regions/img/desert.jpg на месте.
   Снимок готовит tools/make-ae-bg.py. */

/* ---------- Фон страницы: пустыня ----------

   Слой лежит под всем сайтом и прибит к окну (fixed): при прокрутке фон
   стоит на месте, и текстура не «едет» под карточками.

   Цвет страницы переезжает на html, а body делаем прозрачным: иначе заливка
   body закрыла бы слой. Порядок отрисовки такой — фон html, потом ::before
   с пустыней, потом содержимое; z-index:-1 нужен именно для этого.

   Снимков два, по одному на тему: ночной бархан для тёмной, тот же бархан
   днём — для светлой. Одним кадром не обойтись. Тёмный на светлой странице
   выглядит грязным пятном, дневной на чёрной — засвечивает её.

   Прозрачность у каждого своя, и числа не совпадают именно потому, что
   снимки разные. Ночной сам почти чёрный (средняя светлота 9 из 255):
   привычные для фонов 5–10 % не оставили бы от него ничего, держим 38 %.
   Дневной яркий (124 из 255), и на светлой странице ему хватает 13 % —
   выше кадр перебивает лаванду первого экрана и начинает выглядеть
   фотографией, а не подложкой.

   Карточки, шапка и подвал непрозрачны и слой перекрывают: пустыня видна
   в промежутках между блоками. Так и задумано — это подложка, а не картинка. */
html{background:var(--surface-page)}
body{background:transparent}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("../img/desert-light.jpg") center center / cover no-repeat;
  opacity:.13;
}
:root[data-theme="dark"] body::before{
  background-image:url("../img/desert.jpg");
  opacity:.38;
}

/* Первый экран заливает себя сам (--hero-bg), и слой под ним не виден.
   Повторяем пустыню внутри героя тем же fixed-слоем: он попадает в те же
   координаты окна, поэтому стык с фоном страницы не заметен.
   z-index не задаём — иллюстрация с надписью стоит в разметке ниже и
   перекрывает пустыню сама, а текст и радужная кромка подняты своими z-index. */
.hero::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:url("../img/desert-light.jpg") center center / cover no-repeat;
  opacity:.13;
}
:root[data-theme="dark"] .hero::before{
  background-image:url("../img/desert.jpg");
  opacity:.38;
}