/* Азалия — главная. Язык снят замерами с Woodmart Plants (refs/woodmart/MEASURE.md),
   набор — Onest. Радиусы 0, тени не используем, разрядки нет. */
:root {
  --bg: #f3f4ef; /* Astragreen: образец Павлона 10.10 (было #f6f4f5) */
  /* Палитра «одна олива» (Павлон 10.10 выбрал из трёх, ?pal=2): один оттенок в трёх яркостях; слива осталась только в логотипе */
  --olive: #3f4f17; /* глубокая олива — верхняя полоса, линии, цены, выбор (было слива #514554); имя токена от Азалии */
  --olive-h: #334012;
  --green: #5f7a1c; /* олива — кнопки, Sale, «Все», кольцо, аватар, счётчики; белый 4.9 */
  --green-h: #4f6716; /* наведение — ступенью темнее */
  --band: var(--green); /* полоса «Цветы, растения и всё…» */
  --btn: var(--green);
  --hot: #fe5926; --hot-h: #e8481a; /* молнии «Скидка» на фото и сердечко на карточке — цвет из образца Павлона 11.10 */
  --btn-h: var(--green-h);
  --btn-ink: var(--white);
  --accent: #e3ebc0; /* бледная олива — метки «Поставка»; только заливкой под тёмный текст */
  --accent-ink: #3f4f17;
  --title: #242424;
  --ink: #333;
  --text: #777;
  --muted: #767676;
  --soft: #666; /* пункты фильтров, как у Hyper: на фоне #f6f3ed контраст 5.2 */
  --hair: rgba(0, 0, 0, .105);
  --form-bg: rgba(60, 64, 40, .08); /* поля: в тон фона #f3f4ef (было сливовое, Павлон 10.10 — «не подходит к фону») */
  --card-bg: #e8e9e4; /* на ступень темнее фона, в его тоне (было #ebe7ec под сливу) */
  --cat-bg: #e9eae5; /* на ступень темнее фона, в его тоне (было #ece8ed) */
  --white: #fff;

  --font: "Onest", system-ui, sans-serif;
  --pad: 1.5625rem; /* поле до края окна: 25px на 1440, растёт с шириной; контейнер не ограничен — сайт во всю ширину */
  --gap: 1.875rem;
  --rule: 2px solid var(--olive);

  --sp-40: 2.5rem;   /* шкала вертикальных отступов демо: 40 / 60 / 70 / 90 / 100 */
  --sp-90: 5.625rem;
  --sp-100: 6.25rem;
  --hdr-h: 5.625rem;
  --top-h: 2.5rem;
  --cats-h: 12.875rem; /* лента кружков в первом экране: 40 зазор + 2 линия + 24 + 116 ряд + 24 = 206 */
}

*, *::before, *::after { box-sizing: border-box; }
/* Фул-респонсив = сайт во всю ширину окна, но шрифты и отступы НЕ растут: корень 16px везде,
   rem = пиксели демо (Павлон 08.10: «не надо шрифты и отступы увеличивать»). */
html { -webkit-text-size-adjust: 100%; font-size: 16px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 500 1rem/1.6 var(--font);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* фокус: при касании и щелчке без обводки браузера (синяя у Safari — цвета нет на сайте), с клавиатуры — олива; без серой вспышки iOS (из Азалии 9e5abc4, 12.10) */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
a, button, summary, label, [role="button"] { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.visually-hidden { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: 100%; padding-inline: var(--pad); }
.rule { border: 0; border-top: var(--rule); margin: 0; }

/* Кнопки: олива, прямые углы, 13/500 — как в демо */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.625rem; padding: 0 1.25rem; background: var(--btn); color: var(--btn-ink);
  font: 500 0.8125rem/1.2 var(--font); white-space: nowrap; transition: background-color .25s;
}
.btn--sm { height: 2.25rem; padding: 0 1.8125rem; }

/* ---------- Плашка над шапкой ---------- */
.topbar {
  min-height: var(--top-h); display: flex; align-items: center; justify-content: center;
  padding: 0 var(--pad); background: var(--olive); color: var(--white);
  font: 500 1rem/1.4 var(--font); text-align: center;
}
.topbar a { text-decoration: underline; text-underline-offset: 0.1875rem; }

/* ---------- Шапка ---------- */
/* Шапка как у Woodmart: стоит в потоке (держит своё место, страница не прыгает), а после ~200px прокрутки
   сверху выезжает узкая копия строки — у них 60, у нас 56 (Павлон 08.10: «чуть уже»). Линию-оливу
   меняем на тонкую серую: теней не используем. */
.header { position: relative; z-index: 50; height: var(--hdr-h); background: var(--bg); }
.header.is-stuck .header__row {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--hdr-stuck, 3.5rem);
  background: var(--bg); border-bottom: 1px solid var(--hair); animation: hdr-in .3s ease-out;
}
.header.is-stuck .header__row::after { display: none; }
.header.is-stuck .header__logo img { width: 9.5rem; }
@keyframes hdr-in { from { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { .header.is-stuck .header__row { animation: none; } }
/* Телефон, планшет, любой экран без мыши — шапка просто липнет (sticky). Проверено Павлоном на iPhone 16 (12.10, тестовая
   страница ios-test): position: fixed в Safari с плавающей адресной строкой оставляет просвет над шапкой («прыгает»), sticky —
   держится. Выезд Woodmart (fixed + анимация) — только мышь на широком экране; main.js там не ставит is-stuck.
   Высота липкой шапки = обычная (--hdr-h), на неё встаёт строка фильтров каталога (.ctool) */
@media (max-width: 960px), (hover: none) {
  .header { position: sticky; top: 0; }
  .header, .ctool { --hdr-stuck: var(--hdr-h); }
}
/* Встроенный браузер Телеграма на iPhone (класс ставит скрипт в <head>): sticky не спасает — их браузер показывает
   уехавшую выше окна страницу под своей панелью (баг Telegram-iOS #2347). Обход GMX (gmx-interface #2865, проверено Павлоном
   12.10): документ не прокручивается, прокручивается body; шапка — sticky внутри body. JS прокрутки — через AZ.scroller() */
html.tg-ios { height: 100%; overflow: hidden; }
html.tg-ios body { position: fixed; inset: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.header__row {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: var(--hdr-h);
}
.header__row::after { /* линия по ширине контейнера, а не окна */
  content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 0; border-bottom: var(--rule);
}
.header__nav { display: flex; gap: 1.25rem; }
.header__nav a, .header__phone { color: var(--ink); padding: 0.3125rem 0; transition: color .25s; }
.header__logo { position: absolute; left: 50%; transform: translateX(-50%); }
.header__logo img { width: 11.25rem; height: auto; } /* новый знак 370×90: 180×43.7, как старый по высоте */
.header__tools { display: flex; align-items: center; gap: 1.25rem; }
.header__phone { font-weight: 500; } /* как пункты меню: при 600 казался крупнее (Павлон 08.10) */
.header__icon { position: relative; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--ink); transition: color .25s; }
.header__icon + .header__icon { margin-left: -1rem; } /* значки плотнее: между рисунками 24 (было 40, Павлон 08.10) */
.header__geo { display: inline-flex; gap: 0.3125rem; padding: 0.3125rem 0; color: var(--ink); font: 500 1rem/1.6 var(--font); /* как пункты меню: 16, вес 500 (Павлон 08.10) */ white-space: nowrap; }
.header__geo span, .drawer__geo span { color: var(--text); font-weight: 400; }
.header__geo b, .drawer__geo b { font-weight: 500; border-bottom: 1px dashed currentColor; transition: color .25s; }
@media (max-width: 1439px) { .header__geo span { display: none; } } /* без слова «Регион:» — иначе на 1260–1366 инструменты наезжают на лого (замер −37) */
@media (max-width: 1023px) { .header__geo { display: none; } } /* планшет и телефон: регион — в меню (на 768 наезжал на лого на 77) */
.header__cart span, .tabbar__cart span {
  position: absolute; top: 0.125rem; right: 0; min-width: 1rem; height: 1rem; padding: 0 0.25rem;
  border-radius: 0.5rem; background: var(--green); color: var(--white);
  font: 600 0.625rem/1rem var(--font); text-align: center;
}
.header__burger { display: none; width: 2.5rem; height: 2.5rem; place-items: center; color: var(--ink); }
/* Пункты не влезли между краем и логотипом (меряет скрипт) — уходят в бургер */
.header.is-compact .header__nav { display: none; }
.header.is-compact .header__burger { display: grid; }

/* ---------- Мега-меню «Каталог» (main.js). Панель — как «Shop» у Woodmart (refs/woodmart §3.13): во всю ширину под шапкой,
   белая, без тени, поле сверху 30; появление 0.4s cubic-bezier(.19,1,.22,1) из прозрачности и снизу на 15.
   Внутри у нас не плитки, а четыре колонки отделов с видами (у Woodmart каталог мелкий, у нас 26 подразделов в декоре) ---------- */
.mega {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40; padding: 1.875rem 0 2.5rem; background: var(--bg); /* цвет сайта: белая панель Павлону не понравилась (09.10) */
  opacity: 0; visibility: hidden; transform: translateY(15px);
  transition: opacity .4s cubic-bezier(.19, 1, .22, 1), visibility .4s cubic-bezier(.19, 1, .22, 1), transform .4s cubic-bezier(.19, 1, .22, 1);
}
.mega[hidden] { display: none; }
.header.is-stuck .mega { top: calc(100% + 1px); } /* у прилипшей строки линия — рамка снаружи, не перекрывать её */
.mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega::after { content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 0; border-bottom: var(--rule); } /* низ — та же олива 2px, что под шапкой: панель цвета страницы иначе с ней сливается */
.mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega__col { padding: 0 2.5rem; }
.mega__col:first-child { padding-left: 0; }
.mega__col + .mega__col { border-left: 1px solid var(--olive); } /* тонкие разделители между отделами (Павлон 09.10) — тоньше линий сайта (2px) */
.mega__head { display: flex; flex-direction: column; gap: 0.125rem; margin-bottom: 0.75rem; color: var(--title); font: 500 1.40625rem/1.875rem var(--font); transition: color .25s; } /* 22.5 = 18 + 25% (Павлон 09.10) */
.mega__head span { color: var(--muted); font: 400 0.875rem/1.25rem var(--font); }
.mega__list { margin: 0; padding: 0; list-style: none; }
.mega__list a { display: block; width: fit-content; padding: 0.25rem 0; color: var(--soft); font: 500 0.9375rem/1.5rem var(--font);
  background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1px; background-origin: content-box; /* линия выезжает слева, как у пунктов фильтров (.opt__text) — Павлон 11.10 */
  transition: background-size .5s cubic-bezier(.3, 1, .3, 1), color .5s cubic-bezier(.3, 1, .3, 1); }
.mega__all { display: inline-block; margin-top: 0.5rem; color: var(--title); font: 500 0.875rem/1.5rem var(--font); text-decoration: underline; text-underline-offset: 0.1875rem; transition: color .25s; }
.header__nav a.is-on { color: var(--olive); }
/* Два отдела (Astragreen, Павлон 10.10): пополам, у каждого фото 4:5 слева и все виды в две колонки; фото — баннеры главной */
.mega__grid--few { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* три отдела (20.10): колонка в треть, фото уже — виды остаются в две колонки */
.mega__dep { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 1.875rem; align-items: start; padding: 0 2.5rem; }
.mega__dep:first-child { padding-left: 0; }
.mega__dep + .mega__dep { border-left: 1px solid var(--olive); }
.mega__pic { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--card-bg); }
.mega__pic--col { aspect-ratio: 16 / 9; margin-bottom: 1rem; } /* фото родительской категории в колонке, когда отделов больше двух */
.mega__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.19, 1, .22, 1); }
.mega__list--cols { columns: 2; column-gap: 1.875rem; }
.mega__list--cols li { break-inside: avoid; }
.mega__grid--few .mega__all { margin-top: 0.75rem; }
@media (hover: hover) { .mega__dep:hover .mega__pic img { transform: scale(1.04); } }
.mega__grid--three .mega__dep { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.25rem; padding: 0 1.875rem; }
.mega__grid--three .mega__dep:first-child { padding-left: 0; }
.mega__grid--three .mega__list--cols { column-gap: 1.25rem; }
.mega__dep:not(:has(.mega__pic)) { grid-template-columns: minmax(0, 1fr); } /* у родителя CRM нет фото — текст на всю колонку, а не в полосе под фото (в три колонки «Цветы в горшках» переносились) */
@media (max-width: 1599px) { .mega__dep { grid-template-columns: 10rem minmax(0, 1fr); gap: 1.5rem; } .mega__list--cols { column-gap: 1.25rem; } } /* на 1366 при фото 200 переносились «Хризантема одноголовая», «Расходные материалы» (колонка 154) */
@media (hover: hover) { .mega__head:hover, .mega__all:hover { color: var(--olive); } .mega__list a:hover { background-position: left bottom; background-size: 100% 1px; color: var(--title); } }
@media (prefers-reduced-motion: reduce) { .mega { transition: none; } }

/* ---------- Панель «Каталог» на телефоне (нижняя панель → отделы, вид — по раскрытию) ---------- */
.drawer__title { margin: 0; color: var(--title); font: 500 1.5rem/1.2 var(--font); }
.catm { border-bottom: 1px solid var(--hair); }
.catm__head { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 0; color: var(--title); font: 500 1.125rem/1.5rem var(--font); cursor: pointer; list-style: none; }
.catm__head::-webkit-details-marker { display: none; }
.catm__n { margin-right: auto; color: var(--muted); font: 400 0.875rem/1.5rem var(--font); }
.catm__plus { flex: none; }
.catm__v { transform-origin: center; transition: transform .5s cubic-bezier(.3, 1, .3, 1); }
.catm[open] .catm__v { transform: rotate(270deg); }
.catm__list { display: flex; flex-direction: column; padding-bottom: 0.75rem; }
.catm__list a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; color: var(--ink); font: 500 1rem/1.5rem var(--font); }
.catm__list a span { flex: none; color: var(--muted); font-weight: 400; }
.catm__list .catm__all { color: var(--olive); font-weight: 600; }

/* ---------- Меню в бургере ---------- */
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer[hidden] { display: none; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .3s; }
.drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(21.25rem, 86vw); overflow-y: auto;
  display: flex; flex-direction: column; gap: 1.5rem; padding: 4.5rem 1.5625rem 2rem;
  background: var(--bg); transform: translateX(-100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__close { position: absolute; top: 0.75rem; right: 0.75rem; display: grid; place-items: center; width: 3rem; height: 3rem; color: var(--ink); }
.drawer__group { display: flex; flex-direction: column; }
.drawer__group a { padding: 0.625rem 0; color: var(--ink); font: 500 1.25rem/1.4 var(--font); transition: color .25s; }
.drawer__group--cats a { font-size: 1.125rem; }
.drawer__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.drawer__phone { color: var(--ink); font: 600 1.125rem/1.4 var(--font); }
.drawer__geo { display: inline-flex; gap: 0.3125rem; color: var(--ink); font: 500 1rem/1.4 var(--font); }

/* ---------- Окно города. Образец — 7flowers (замер на 1440): панель справа 70%, поля 33/36/33/93,
   заголовок 16/24 прописными, быстрый выбор 16 жирным, буквы 18/35, 4 колонки, группы через 38, затемнение .25, выезд .8s ---------- */
.geo { position: fixed; inset: 0; z-index: 110; }
.geo[hidden] { display: none; }
.geo__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .25); opacity: 0; transition: opacity .5s; }
.geo__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 30rem); overflow-y: auto; /* три города — узкая панель с одним списком, а не четыре колонки с буквами (Павлон 11.10) */ overscroll-behavior: contain;
  display: flex; flex-direction: column; /* строка с телефоном — по низу панели (Павлон 08.10) */
  padding: 3.9375rem 2.25rem 2.0625rem 5.8125rem; background: var(--card-bg); /* цвет карточек (Павлон 08.10) */ color: var(--ink);
  transform: translateX(100%); transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.geo.is-open .geo__backdrop { opacity: 1; }
.geo.is-open .geo__panel { transform: none; }
.geo__close { position: absolute; top: 2.25rem; right: 3.1875rem; display: inline-flex; align-items: center; gap: 0.375rem; color: var(--ink); font: 400 1rem/1.5 var(--font); }
.geo__title { max-width: 30rem; font: 500 1rem/1.5 var(--font); text-transform: uppercase; color: var(--title); }
.geo__list { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.geo__list li { border-top: 1px solid var(--hair); }
.geo__list li:last-child { border-bottom: 1px solid var(--hair); }
.geo__list button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.125rem 0; font: 500 1.375rem/1.5 var(--font); color: var(--ink); text-align: left; }
.geo__list button::after { content: ''; flex: none; width: 0.4375rem; height: 0.875rem; margin-right: 0.25rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); opacity: 0; } /* галочка у выбранного города */
.geo__list button[aria-pressed="true"]::after { opacity: 1; }
.geo__list--long button { padding-block: 0.5625rem; font-size: 1.125rem; } /* городов больше шести (14 у Astragreen): строки плотнее — список почти целиком на экране ноутбука, остальное прокручивается в панели */
.geo button[aria-pressed="true"] { font-weight: 600; color: var(--olive); }
.geo__foot { margin-top: auto; padding-top: 1.5rem; } /* самовывоз и «города нет» — по низу панели */
.geo__pickup { margin-bottom: 0.375rem; font: 400 1rem/1.5 var(--font); /* 16 на десктопе, как избранные города (Павлон 08.10: «покрупнее»), телефон 15 */ color: var(--ink); }
.geo__other { font: 400 1rem/1.5 var(--font); color: var(--text); }
.geo__other a { color: var(--ink); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .geo__panel, .geo__backdrop { transition: none; } }
@media (max-width: 767px) {
  .geo__panel { padding: 4.5rem var(--pad) 2rem; }
  .geo__close { top: 1.25rem; right: var(--pad); }
  .geo__list { margin-top: 1.75rem; }
  .geo__list button { font-size: 1.25rem; }
  .geo__list--long button { font-size: 1.0625rem; }
  /* под городами линия, отступ и четыре строки: адрес и «города нет» — каждый в две (Павлон 08.10) */
  .geo__foot { border-top: 1px solid var(--hair); padding-top: 1.5rem; }
  .geo__comma { display: none; }
  .geo__pickup, .geo__other { font-size: 0.9375rem; }
  .geo__ln { display: block; }
}
@media (prefers-reduced-motion: reduce) { .drawer__panel, .drawer__backdrop { transition: none; } }
/* Высота липкой шапки не меняется при прокрутке: иначе страница прыгает на разницу. */

/* ---------- Первый экран ---------- */
.hero { display: grid; grid-template-columns: max(25.625rem, 28.47vw) 1fr; /* 410 на 1440 и растёт с окном (547 на 1920), как до фиксации корня: пункты остаются 36px, а черта уходит вправо — баннер на широком экране не вытягивается (Павлон 08.10). У демо 355 */ --hero-h: max(24rem, calc(100svh - var(--top-h) - var(--hdr-h) - var(--cats-h))); height: var(--hero-h); padding-top: var(--sp-40); } /* первый экран целиком: плашка + шапка + баннер = высота окна (Павлон 08.10) */
/* Колонка слева: сверху две строки о компании (вровень с верхом баннера), снизу разделы (вровень с низом). */
.hero__side {
  display: flex; flex-direction: column; justify-content: space-between;
  border-right: var(--rule); padding-right: 0.9375rem; margin-right: 2.5rem;
}
.hero__lead { margin-top: -0.375rem; } /* верх прописных первой строки = верх баннера (поле строки 6px) */
.hero__lead p { font: 500 1rem/1.6 var(--font); color: var(--ink); } /* три строки одним начертанием (Павлон 08.10) */
/* Шаг разделов: 66 (было 74.6 как у демо, Павлон 08.10 «немного уменьши»), но на низких экранах ужимается, чтобы текст сверху и пять пунктов
   влезли в высоту баннера: (баннер − текст 77 − зазор 24 + 25) / 5 − поля 10.
   Низ колонки уходит вниз на половину интерлиньяжа + выносной элемент, тогда базовая линия
   «Упаковки» совпадает с низом баннера при любом шаге (при 64.6 это 25.3px). */
.hero__cats {
  --lh: min(3.5rem, calc((var(--hero-h) - var(--sp-40) - 6.3rem + 1.58rem) / 5 - 0.625rem));
  display: flex; flex-direction: column; margin-bottom: calc(0.4375rem - var(--lh) / 2);
}
.hero__cats a {
  display: flex; align-items: center; gap: 0.4375rem; padding: 0.3125rem 0;
  color: var(--ink); font: 500 2.25rem/var(--lh) var(--font); transition: color .25s; /* 36px Onest = 38px Clash по высоте прописных (0.71 против 0.67) */
}
.hero__cats svg { flex: none; }
.hero__slider { position: relative; overflow: hidden; height: 100%; }
.hero__track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.4, 0, .2, 1); touch-action: pan-y; } /* горизонталь — слайдеру, вертикаль — странице */
.hero__track.dragging { transition: none; user-select: none; }
.hero__slide { position: relative; flex: 0 0 100%; height: 100%; background: #3a313c; }
.hero__slide img, .hero__video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; } /* +1px: дробная координата не даёт щели, как в баннерах */
.hero__slide::after { /* подложка под текст, чтобы белый читался на любом кадре */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 80%);
}
.hero__slide figcaption {
  position: absolute; z-index: 1; left: 3.2344rem; bottom: 2.1875rem; width: 32.5rem; max-width: calc(100% - 4.375rem);
  color: rgba(255, 255, 255, .8);
}
.hero__slide h1, .hero__title { color: var(--white); font: 500 2.25rem/1.15 var(--font); margin-bottom: 0.75rem; }
.hero__slide p:not(.hero__title) { margin-bottom: 1.375rem; }
/* Переключатель как у Hyper: тонкие стрелки 24, точки 10×10, активная — полоска 50×10, внутри которой
   белая заливка растёт за время показа слайда (у них 7 с, у нас 8). Стоит справа внизу: по центру
   он наезжал бы на текст слайда. */
.hero__nav { position: absolute; z-index: 2; right: 2.1875rem; bottom: 2.1875rem; display: flex; align-items: center; gap: 0.1875rem; color: var(--white); }
.hero__arrow { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--white); }
.hero__dots { display: flex; align-items: center; padding: 0 0.375rem; }
.hero__dots button { display: grid; place-items: center; height: 1.5rem; padding: 0 0.375rem; } /* зона нажатия 24 в высоту, рисунок 10 */
.hero__dots button::before { content: ""; position: relative; width: 0.625rem; height: 0.625rem; border-radius: 0.625rem; background: rgba(255, 255, 255, .4); transition: width .3s, background-color .3s; overflow: hidden; }
.hero__dots button[aria-selected="true"]::before { width: 3.125rem; background: rgba(255, 255, 255, .2) linear-gradient(var(--white), var(--white)) no-repeat 0 0 / var(--p, 0%) 100%; }
.hero__dots button.is-run::before { animation: hero-progress var(--slide-ms, 8000ms) linear forwards; }
@keyframes hero-progress { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .hero__dots button.is-run::before { animation: none; background-size: 100% 100%; } }

/* ---------- Лента разделов кружками (замер Hyper: кружок 80, подпись 15/24, зазор 12, шаг 150) ---------- */
.cats { padding-top: var(--sp-40); } /* под баннером столько же, сколько над ним (40) */
.cats__row { position: relative; padding: 1.5rem 0; }
.cats__track { display: grid; grid-auto-flow: column; grid-auto-columns: 8.125rem; gap: 1.25rem; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; scroll-snap-align: start; color: var(--ink); }
.cat__img { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; overflow: hidden; background: var(--cat-bg); } /* пустые кружки: картинки подберёт Павлон */
.cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } /* фото Павлона во весь кадр */
.cat--sale .cat__img { background: var(--btn); color: var(--btn-ink); font: 600 1.375rem/1 var(--font); } /* цвет розы из логотипа */
.cat__title { display: inline-flex; align-items: center; gap: 0.25rem; font: 500 0.9375rem/1.5rem var(--font); white-space: nowrap; transition: color .25s; }
/* Отделы (декор, шары…): подразделы 1С длинные — до 299px при кружке 130 (замер 08.10, 18 наездов из 26). Переносим по словам в ширину кружка */
.catalog .cat__title { display: block; max-width: 100%; white-space: normal; text-align: center; text-wrap: balance; line-height: 1.25rem; } /* Astragreen: и у срезки — их рубрики длинные («Хризантема одноголовая»). 20 вместо 24: в 2–3 строки при 24 подпись разваливалась (Павлон 09.10) */
.cats__arrow { position: absolute; z-index: 1; top: calc(1.5rem + 2.5rem - 1.25rem); }
.cats__arrow--prev { left: -0.625rem; }
.cats__arrow--next { right: -0.625rem; }
.cats__arrow:disabled { visibility: hidden; }

/* ---------- Секции ---------- */
.promo + .container .rule { margin-top: var(--sp-40); }

/* ---------- Два баннера с фоновым видео под первым экраном ---------- */
.promo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.promo__item { position: relative; aspect-ratio: 680 / 420; overflow: hidden; background: #3a313c; }
/* Видео на 1px шире баннера с каждой стороны: при дробной координате (33.33 на 1920) слой видео
   округляется отдельно, и в щель просвечивала тёмная подложка — чёрная линия справа. */
.promo__video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; }
.promo__item::after { /* затемнение слева снизу: у первого ролика справа яркое окно */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(20deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,0) 75%);
}
.promo__body { position: absolute; z-index: 1; left: 2.5rem; right: 2.5rem; bottom: 2.1875rem; display: flex; flex-direction: column; align-items: flex-start; color: rgba(255, 255, 255, .85); }
.promo__title { max-width: 30rem; color: var(--white); font: 500 2.25rem/1.15 var(--font); margin-bottom: 0.75rem; }
.promo__note { font: 500 1rem/1.6 var(--font); }
.promo__link { margin-top: 0.875rem; padding-bottom: 0.25rem; color: var(--white); font: 600 1.25rem/1.4 var(--font); border-bottom: 2px solid rgba(255, 255, 255, .5); transition: border-color .25s; }
.section { margin-top: var(--sp-90); }
.section--banners { margin-top: var(--sp-90); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.875rem; }
.section__title { color: var(--title); font: 500 1.75rem/1.2 var(--font); }
.section__sub { margin-top: 0.25rem; }
.arrows { display: flex; gap: 0.625rem; }
.arrow {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--white); color: var(--ink); transition: color .25s, opacity .25s;
}
.arrow:disabled { opacity: .35; cursor: default; }

/* Лента «Популярные»: во всю ширину окна, 5 в кадре, промежуток 30 */
.rail {
  display: grid; grid-auto-flow: column; gap: var(--gap);
  grid-auto-columns: calc((100% - 4 * var(--gap) - 2 * var(--pad)) / 5);
  padding-inline: var(--pad);
}
/* Ленты со свайпом по механике celebrity.oxboxdigital.ru (перенесена из «Дверей Голливуда»):
   рамка .slider режет, дорожка .js-rail едет трансформом; за пальцем 1:1, за краями ×0.5,
   инерция скорость×400 мс, доводка до карточки 1100 мс cubic-bezier(.5,1,.89,1), стрелки 500 мс. */
.slider { overflow: hidden; touch-action: pan-y; }
.js-rail { will-change: transform; }
.slider.is-draggable, .slider.is-draggable .js-rail { cursor: grab; user-select: none; } /* иначе захват мышью начинает выделять подписи */
.js-rail.dragging { cursor: grabbing; user-select: none; }
.js-rail.dragging a { pointer-events: none; }

/* ---------- Карточка товара ---------- */
.card { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; } /* текст по левому краю, как у Hyper */
/* Обёртка фото режет всё, что выезжает: сердечко появляется из картинки, а не из-за её края (Павлон 08.10) */
.card__media { position: relative; width: 100%; overflow: hidden; margin-bottom: 0.55rem; }
.card__img { position: relative; display: block; width: 100%; aspect-ratio: 7 / 8; overflow: hidden; background: var(--white); }
.card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 2s cubic-bezier(0, 0, .44, 1.18); } /* фото во весь блок пропорционально, без белых полей (Сергей 19.10, демо) */
.card__fav {
  position: absolute; top: 0.625rem; right: 0.625rem; display: grid; place-items: center;
  width: 3.125rem; height: 2.8125rem; background: var(--bg); color: var(--ink); /* не в избранном — контур цветом текста на подложке цвета фона (Павлон 14.10: */
  --heart-fill: none; --heart-stroke: 1.6;                                    /* «не нажатые выглядят как уже нажатые»), как в приложении; в избранном — ниже */
  opacity: 0; visibility: hidden; transform: translateX(1.25rem);
  transition: opacity .3s, visibility .3s, transform .3s, color .25s;
}
.card__head { width: 100%; min-height: 4.55rem; } /* место под 2 строки названия + подпись: подпись идёт сразу за названием, а цена в ряду на одной линии */
.card__title { color: var(--ink); font: 500 1rem/1.4rem var(--font); margin-bottom: 0.25rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; } /* длинное слово (артикул, код в названии 1С) не распирает карточку: на 320 было +14.5px (08.10) */
.card__meta { color: var(--muted); font: 500 0.875rem/1.25rem var(--font); margin-bottom: 0.25rem; } /* место под подпись держится и пустым — цены в ряду на одной линии */
.card__price { color: var(--olive); font: 600 1rem/1.4rem var(--font); margin: 0.3rem 0 0.55rem; }
.card__price--guest { color: var(--muted); font-weight: 500; }
.card__old { margin-left: 0.375rem; color: #bbb; font: 400 0.9rem/1.4rem var(--font); } /* как у демо: 14.4/400 #bbb, зачёркнуто */
.card .btn--sm { margin-top: auto; }
.card__buy { margin-top: auto; height: 2.25rem; }
.qty { display: inline-flex; height: 2.25rem; }
.qty button, .qty output { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; background: var(--form-bg); color: var(--ink); font: 600 0.875rem/1 var(--font); }
.qty output { width: 3rem; margin: 0 0.125rem; }
.qty__unit { align-self: center; margin-left: 0.625rem; color: var(--muted); font-size: 0.8125rem; }

/* Метки на фото (замер Woodmart: 12/600/14.4, поля 5×10, отступ 7, друг под другом). Без обводки (Павлон 08.10). */
.card__labels { position: absolute; top: 0.4375rem; left: 0.4375rem; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3125rem; }
.card__label { padding: 0.3125rem 0.625rem; background: var(--white); color: var(--title); font: 600 0.75rem/0.9rem var(--font); white-space: nowrap; }
.card__label--sup { background: var(--accent); color: var(--accent-ink); } /* Astragreen: товар в пути — «Поставка дд.мм», предзаказ */

/* Бегущая строка на фото товара (замер Hyper «Selling Fast»): белая полоска 38, отступ 10 от краёв, скругление 6,
   значок 14 + 8 + слово 12px, круг ~10 с. Молния — цвет розы из логотипа. Тонкая обводка: иначе белая полоска
   теряется на белом фоне предметки. */
.promo-strip {
  position: absolute; left: 0.625rem; right: 0.625rem; bottom: 0.625rem; height: 2.375rem; z-index: 1;
  display: flex; align-items: center; overflow: hidden;
  background: var(--white); border: 1px solid rgba(0, 0, 0, .08); border-radius: 0.375rem;
}
.promo-strip__track { display: flex; width: max-content; animation: promo-run 10s linear infinite; }
.promo-strip__group { display: flex; }
.promo-strip__item { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem; color: var(--ink); font: 600 0.75rem/1.25rem var(--font); white-space: nowrap; }
.promo-strip__item svg { flex: none; color: var(--hot); } /* молнии — оранжевые (Павлон 11.10; до этого цвет кнопок) */
@keyframes promo-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .promo-strip__track { animation: none; } }

/* Управление лентой как у Hyper: полоса 2px (заливка растёт с прокруткой) и кнопки 48 с тонкой обводкой */
.rail-ctrl { display: flex; align-items: center; gap: 1.75rem; margin-top: 1.875rem; }
.rail-ctrl__bar { position: relative; flex: 1; height: 2px; background: rgba(0, 0, 0, .1); }
.rail-ctrl__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--fill, 25%); background: var(--ink); transition: width .2s; }
.rail-ctrl__btns { display: flex; gap: 0.75rem; }
.rail-ctrl__btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--btn); color: var(--btn-ink); transition: background-color .25s, opacity .25s; } /* 40, олива, без обводки (Павлон 08.10); у Hyper 48 белые с обводкой */
.rail-ctrl__btn:disabled { opacity: .35; cursor: default; }
.rail-ctrl--m { display: none; } /* полоса под баннерами — только на телефоне, где они листаются */
.band__dla-m { display: none; }

/* ---------- Баннеры направлений ---------- */
.banners { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.banner { position: relative; display: block; aspect-ratio: 443 / 480; /* ниже на 1/5, чем у демо (600): Павлон 08.10 — «слишком вытянуты» */ overflow: hidden; background: var(--white); }
.banner img { width: 100%; height: 100%; object-fit: cover; transition: transform 2s cubic-bezier(0, 0, .44, 1.18); }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,0) 55%); }
.banner__body { position: absolute; z-index: 1; left: 1.875rem; right: 1.875rem; bottom: 1.875rem; display: flex; flex-direction: column; align-items: flex-start; color: var(--white); }
.banner__note { color: rgba(255, 255, 255, .7); font: 500 1rem/1.625rem var(--font); }
.banner__title { font: 500 2.25rem/1.15 var(--font); margin-bottom: 0.875rem; }
.banner__link { font: 500 0.8125rem/0.975rem var(--font); padding-bottom: 0.25rem; border-bottom: 2px solid rgba(255, 255, 255, .5); }

/* ---------- Оливковая полоса ---------- */
.band { margin-top: var(--sp-100); background: var(--band); padding: 5rem 0 17.5rem; }
.band__line { display: block; } /* две строки по схеме Павлона 08.10; на узком экране каждая переносится сама */
.band__title { color: var(--white); font: 500 4.25rem/1.1 var(--font); }
.band__title :is(img, video) { display: inline-block; width: 8.125rem; height: 3.25rem; object-fit: cover; border-radius: 1.625rem; vertical-align: -0.375rem; background: var(--white); }

/* ---------- О компании: заезжает на полосу ---------- */
.about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* два равных блока 3:2 (Павлон 08.10: квадраты, затем ниже на 1/3); у демо 561/798 по 475 */ gap: var(--gap); margin-top: -12.5rem; position: relative; }
.about__card { aspect-ratio: 3 / 2; } /* квадрат минус 1/3 по высоте (Павлон 08.10) */
.about__card { display: flex; flex-direction: column; align-items: flex-start; background: var(--card-bg); padding: 2.5rem; }
.about__quote { color: var(--olive); margin-bottom: 1.25rem; }
.about__text { color: var(--title); font: 500 2.125rem/1.2 var(--font); margin-bottom: 0.75rem; }
.about__desc { margin-bottom: 1.875rem; color: var(--text); font: 500 1rem/1.6 var(--font); } /* текст Павлона, обычным размером; на всю ширину карточки — без max-width (правило Павлона) */
.about__card .rule { width: 100%; margin-top: auto; margin-bottom: 1.5rem; } /* линия, название, адрес и кнопка прижаты к низу, свободное место — над линией (Павлон 08.10) */
.about__name { color: var(--title); font: 500 1.25rem/1.625rem var(--font); }
.about__role { margin-bottom: 1.5rem; }
.about__card .btn { margin-top: 0; }
.about__photo { position: relative; background: var(--white); } /* высота = высоте карточки (ряд сетки тянет): на планшете текст вытягивает карточку выше 3:2, фото идёт следом */
.about__photo img, .about__video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; } /* +1px: без щели на дробной координате */

/* ---------- Сетка из 4 ---------- */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }

/* ---------- Подвал ---------- */
.footer { margin-top: var(--sp-90); padding-bottom: 0; }
.footer__main { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: var(--gap); padding: 3.125rem 0; }
.footer__sub { border-right: var(--rule); padding-right: 2.5rem; }
.footer__sub img { width: 11.25rem; height: auto; margin-bottom: 1.25rem; }
.footer__slogan { color: var(--title); font: 500 1.5rem/1.25 var(--font); margin-bottom: 1.25rem; }
.footer__form { display: flex; gap: 0; margin-bottom: 0.75rem; }
.footer__form input {
  flex: 1; min-width: 0; height: 2.625rem; padding: 0 0.9375rem; border: 0; border-radius: 0;
  background: var(--form-bg); color: var(--ink); font: 500 0.875rem var(--font); outline: none;
}
.footer__form input::placeholder { color: var(--muted); }
.footer__form input:focus-visible { box-shadow: inset 0 0 0 2px var(--olive); }
.footer__note { color: var(--muted); font-size: 0.875rem; line-height: 1.375rem; }
.footer__agree { display: flex; gap: 0.5rem; align-items: flex-start; margin-bottom: 0.75rem; color: var(--muted); font-size: 0.875rem; line-height: 1.375rem; cursor: pointer; }
.footer__agree input { flex: none; margin: 0.25rem 0 0; accent-color: var(--olive); }
.footer__agree a { color: inherit; text-decoration: underline; }
.footer__agree.is-bad, .footer__note.is-bad { color: #d9432b; }
.footer__head { color: var(--title); font: 500 1.25rem/1.875rem var(--font); margin-bottom: 0.75rem; }
.footer__col a { display: block; color: var(--ink); padding: 0.1875rem 0; transition: color .25s; }
.footer__bottom { display: flex; align-items: center; gap: 1.25rem 2.5rem; padding: 1.875rem 0; color: var(--muted); }
.footer__bottom a { color: var(--muted); transition: color .25s; }
.footer__dev { margin-left: auto; } /* наша подпись — справа */
.footer__hours { margin-top: 0.75rem; color: var(--muted); font-size: 0.875rem; line-height: 1.6; } /* мельче (Павлон 08.10) */
.footer__sub { display: flex; flex-direction: column; align-items: flex-start; }
.footer__social { display: flex; gap: 0.625rem; margin-top: auto; padding-top: 1.25rem; } /* на десктопе прижаты к низу вертикальной черты */
.footer__social--m { display: none; }
.footer__social .social { display: grid; place-items: center; padding: 0; color: var(--white); } /* в колонке «Отделы» правило ссылок колонки перебивало цвет и центровку */
.social { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--olive); color: var(--white); transition: background-color .25s; } /* 40 как у демо, заливка оливой (Павлон 08.10) */

/* ---------- Каталог ---------- */
/* Раскладка: крошки и заголовок → виды кружками → строка инструментов → черта → слева фильтры за оливковой чертой
   (как разделы в первом экране главной), справа сетка 4 колонки. Числа сетки и кнопки «ещё» — по замерам Woodmart (refs/woodmart/MEASURE.md §3.4–3.6). */
.catalog { padding-top: var(--sp-40); } /* 40 от черты шапки, как тулбар у Woodmart */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--muted); font: 500 0.9375rem/1.5 var(--font); }
.crumbs a { color: var(--muted); transition: color .25s; }
.crumbs [aria-current] { color: var(--ink); }
.crumbs__tail { display: contents; } /* хвост крошек меняет скрипт: обёртка не должна ломать промежутки */
.catalog__title { margin-top: 1.25rem; color: var(--title); font: 500 2.25rem/1.2 var(--font); } /* 36 — как пункты разделов на главной */
.catalog__note { margin-top: 0.5rem; color: var(--muted, #6b6b6b); font-size: 1rem; }
.cats--catalog { padding-top: 0.5rem; }
.cats--catalog .cats__track { padding-block: 0.375rem; }
.cats--catalog .cats__row { padding-bottom: 0.375rem; } /* от подписей до строки фильтров 20 (Павлон 08.10) */ /* кольцо выбранного вида выходит за кружок на 5px — лента его резала */
.cat__all { display: grid; place-items: center; width: 100%; height: 100%; background: var(--btn); color: var(--btn-ink); } /* цвет кнопок, значок белый (Павлон 10.10) */
.cat .cat__img { transition: box-shadow .25s; }
.cat.is-on .cat__img { box-shadow: 0 0 0 0.1875rem var(--bg), 0 0 0 0.3125rem var(--btn); } /* выбранный вид — кольцо цветом кнопок (Павлон 10.10) */
.cat.is-on .cat__title { color: var(--olive); font-weight: 600; }

/* Строка инструментов липнет к верху под узкой шапкой (Павлон 08.10); оливковая черта — её низ, едет вместе с ней */
.ctool { position: sticky; z-index: 40; top: var(--hdr-stuck, 3.5rem); display: flex; align-items: center; gap: 0.75rem 1.25rem; min-height: 3.5rem; padding: 0.5rem 0 0.75rem; background: var(--bg); border-bottom: var(--rule); }
.catalog__body { scroll-margin-top: 7.5rem; } /* «Показать N позиций» прокручивает к сетке — не под липкие шапку и строку */
.ctool__filters { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.5rem; padding: 0 1rem; background: var(--form-bg); /* = #e8e6db на фоне, как поле подписки и «− N +» (Павлон 08.10) */ color: var(--ink); font: 600 0.875rem/1 var(--font); }
.ctool__badge { display: grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3125rem; border-radius: 1rem; background: var(--green); color: var(--white); font: 600 0.75rem/1 var(--font); }
.ctool__badge[hidden] { display: none; }
.ctool__chips:empty { display: none; } /* пустой не берёт себе зазор строки: от ленты рубрик до сортировки столько же, сколько от «Фильтров» (Павлон 13.10) */
/* Рубрики словами в липкой строке (Павлон 13.10, образец food.oxboxdigital.ru; catalog.js kindsBar): место занято всегда —
   строка не растёт при прокрутке, лента проявляется, когда кружки ушли под строку. Плашки — высотой и шрифтом «Фильтров», углы прямые */
.ctool__kinds { position: relative; flex: 1 1 0; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.ctool.has-kinds .ctool__kinds { opacity: 1; visibility: visible; }
.ctool__track { display: flex; gap: 0.25rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; user-select: none; }
.ctool__track::-webkit-scrollbar { display: none; }
.ctool__kinds.is-r .ctool__track { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); mask: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); }
.ctool__kinds.is-l .ctool__track { -webkit-mask: linear-gradient(90deg, transparent, #000 3rem); mask: linear-gradient(90deg, transparent, #000 3rem); }
.ctool__kinds.is-l.is-r .ctool__track { -webkit-mask: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
.ctool__kind { flex: none; display: flex; align-items: center; height: 2.5rem; padding: 0 0.875rem; color: var(--ink); font: 500 0.875rem/1 var(--font); white-space: nowrap; transition: color .25s, background-color .25s; }
.ctool__kind.is-on { background: var(--green); color: var(--white); } /* у Astragreen заливка выбора — --green, не олива */
.ctool__track.dragging { cursor: grabbing; }
.ctool__track.dragging a { pointer-events: none; }
.ctool__arr { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 2rem; height: 2rem; margin-top: -1rem; background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--hair); }
.ctool__arr--l { left: 0; }
.ctool__arr--l svg { transform: rotate(180deg); }
.ctool__arr--r { right: 0; }
.ctool__arr[hidden] { display: none; }
@media (hover: hover) { .ctool__kind:not(.is-on):hover, .ctool__arr:hover { color: var(--olive); } }
.ctool__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; height: 2rem; padding: 0 0.75rem; background: var(--white); color: var(--ink); font: 500 0.8125rem/1 var(--font); transition: color .25s; }
.chip--reset { background: none; padding: 0 0.25rem; color: var(--muted); text-decoration: underline; text-underline-offset: 0.1875rem; }
.ctool__right { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.sort { position: relative; }
.sort__btn { display: inline-flex; align-items: center; gap: 0.375rem; height: 2.5rem; color: var(--ink); font: 500 0.9375rem/1 var(--font); }
.sort__label { color: var(--muted); }
.sort__btn svg { transform: rotate(90deg); transition: transform .25s; }
.sort__btn[aria-expanded="true"] svg { transform: rotate(-90deg); }
.sort__list { position: absolute; z-index: 30; top: calc(100% + 0.375rem); right: 0; min-width: 13.75rem; padding: 0.5rem 0; background: var(--white); box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, .1); }
.sort__list button { display: block; width: 100%; padding: 0.625rem 1.125rem; color: var(--ink); font: 500 0.9375rem/1.4 var(--font); text-align: left; }
.sort__list [aria-checked="true"] { color: var(--olive); font-weight: 600; }
.sort__list button:focus-visible { background: var(--form-bg); outline: none; }
.view { display: flex; gap: 0.25rem; }
.fsort { display: none; } /* сортировка в панели фильтров — только на телефоне */
.view__btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: #bbb; transition: color .25s; } /* #BBB, как у переключателя вида Woodmart */
.view__btn.is-on { color: var(--ink); }

.catalog__body { display: grid; grid-template-columns: 18.75rem minmax(0, 1fr); column-gap: 2.5rem; }
.catalog__body.is-collapsed { grid-template-columns: minmax(0, 1fr); } /* кнопка «Фильтры» прячет колонку, сетка во всю ширину — сразу, как у Hyper */
.catalog__body.is-collapsed .filters { display: none; }
/* Вид без единой группы (у «Розы Голландия», «Каллы» по одному товару — выбирать нечего): колонку и кнопку «Фильтры» не показываем,
   пустой выбор — дефект. На телефоне кнопка остаётся: в её панели сортировка */
@media (min-width: 768px) {
  .catalog__body:has(.js-groups:empty) { grid-template-columns: minmax(0, 1fr); }
  .catalog__body:has(.js-groups:empty) .filters, .catalog:has(.js-groups:empty) .ctool__filters { display: none; }
}
.filters { border-right: var(--rule); padding: var(--sp-40) 1.875rem 0 0; } /* черта на всю высоту ряда — как колонка разделов на главной */
.filters__top, .filters__foot, .filters__backdrop { display: none; }
/* Колонка едет за прокруткой и стоит под липкой строкой (Павлон 08.10: каталог длинный, фильтры уезжали); выше окна — своя прокрутка.
   --ctool-h меряет скрипт: строка растёт, когда снятых выборов много */
.filters__groups { position: sticky; top: calc(var(--hdr-stuck, 3.5rem) + var(--ctool-h, 3.875rem) + 1.5rem); max-height: calc(100vh - var(--hdr-stuck, 3.5rem) - var(--ctool-h, 3.875rem) - 3rem); overflow-y: auto; overscroll-behavior: contain; margin-right: -0.75rem; padding-right: 0.75rem; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .2) transparent; }
/* Группы — раскрывашки как у Hyper (замер 08.10, rem у них = 10px): заголовок 15/24 500, поля 24, тонкая линия снизу,
   «+» 20 справа — при раскрытии вертикальная черта поворачивается на 270° (500 мс cubic-bezier(.3,1,.3,1)) и остаётся «−». */
.fgroup { border-bottom: 1px solid var(--hair); min-width: 0; }
.fgroup:last-child { border-bottom: 0; }
.fgroup__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; color: var(--title); font: 500 0.9375rem/1.5rem var(--font); cursor: pointer; list-style: none; user-select: none; }
.fgroup:first-child .fgroup__head { padding-top: 0; }
.fgroup__head::-webkit-details-marker { display: none; }
.fgroup__plus { flex: none; }
.fgroup__v { transform-origin: center; transition: transform .5s cubic-bezier(.3, 1, .3, 1); }
.fgroup[open] .fgroup__v { transform: rotate(270deg); }
.fgroup__body { display: grid; gap: 0.75rem; margin-top: -0.75rem; padding-bottom: 1.5rem; } /* пункты через 12 */
.fgroup:last-child .fgroup__body { padding-bottom: 0; }
/* Пункт: квадрат 20 + подпись 15/24 #666 + счётчик простым числом справа; при наведении подчёркивание 1px выезжает слева за 0.5 с */
.opt { display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; color: var(--soft); font: 500 0.9375rem/1.5rem var(--font); text-align: left; }
.opt[hidden] { display: none; }
.opt:has(.swatch-ring) { align-items: center; } /* цвет — подпись всегда в строку, кружок 28 по центру, как было */
.opt__name { display: flex; align-items: center; gap: 0.375rem; flex: 1; min-width: 0; }
.opt__text { background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1px; transition: background-size .5s cubic-bezier(.3, 1, .3, 1), color .5s cubic-bezier(.3, 1, .3, 1); }
.opt__n { flex: none; color: rgba(0, 0, 0, .4); } /* счётчик тише подписи: #666 спорил с названиями (Павлон 08.10) */
.check { flex: none; position: relative; width: 1.25rem; height: 1.25rem; border: 1px solid rgba(0, 0, 0, .6); border-radius: 2px; background: var(--white); transition: background-color .3s, border-color .3s; }
.opt .check { margin-top: 0.125rem; } /* по первой строке подписи (24 − 20) / 2: длинные разделы отделов идут в 2 строки (Павлон 09.10) */
.check::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.375rem; height: 0.75rem; border: solid var(--white); border-width: 0 2px 2px 0; transform: translate(-50%, -63%) rotate(43deg); } /* галочка всегда есть — белая на белом, видна на заливке */
.opt.is-on .check { background: var(--title); border-color: var(--title); }
.opt.is-on .opt__text { color: var(--title); }
.opt:focus-visible { outline: none; }
.opt:focus-visible .check { box-shadow: 0 0 0 3px rgba(23, 23, 23, .1); border-color: var(--title); }
.swatch { display: inline-block; flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); vertical-align: -0.0625rem; }
.card__meta .swatch { margin-right: 0.3125rem; }
/* Цвет в фильтре — кружок как у Woodmart (стиль 3, замер refs/woodmart/src), но 28 вместо их 25 (Павлон 08.10: «чуть крупнее»), рамка 1px --hair, отступ 2; наведён и выбран — рамка #767676 */
.swatch-ring { flex: none; display: block; width: 1.75rem; height: 1.75rem; padding: 2px; border: 1px solid var(--hair); border-radius: 50%; transition: border-color .25s; }
.swatch-ring .swatch { display: block; width: 100%; height: 100%; }
.opt.is-on .swatch-ring { border-color: var(--muted); }
.opt:focus-visible .swatch-ring { box-shadow: 0 0 0 3px rgba(23, 23, 23, .1); border-color: var(--title); }
.fgroup__more { justify-self: start; color: var(--title); font: 500 0.875rem/1.5rem var(--font); text-decoration: underline; text-underline-offset: 0.1875rem; }

.catalog__main { padding-top: var(--sp-40); min-width: 0; }
.catalog__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem var(--gap); }
.catalog .card__meta { margin-bottom: 0; }
/* Цены и кнопки в ряду на одной линии при любой длине подписей: карточка делит строки сетки с соседями (subgrid) */
.catalog__grid:not(.is-list) { grid-auto-rows: auto auto auto; row-gap: 0; } /* зазор между рядами — низом карточки: иначе он лёг бы и между фото, подписью и ценой */
.catalog__grid:not(.is-list) .card__foot { padding-bottom: 2.5rem; }
.catalog__grid:not(.is-list) .card { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-items: start; }
.catalog .card__head { min-height: 0; padding-bottom: 0.25rem; }
.card__foot { width: 100%; margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; }
.catalog__grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.is-list .card { flex-direction: row; align-items: center; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--hair); }
.is-list .card:first-child { padding-top: 0; }
.is-list .card__media { flex: none; width: 5.5rem; margin: 0; }
.is-list .card__fav { display: none; }
.is-list .card__head { flex: 1; min-width: 0; min-height: 0; }
.is-list .card__title { -webkit-line-clamp: 1; }
.is-list .card__foot { flex: none; width: auto; margin: 0; flex-direction: row; align-items: center; gap: 1.5rem; }
.is-list .card__price { margin: 0; }
.card__sup { display: none; color: var(--olive); } /* Astragreen: поставка строкой — только в виде списком, где плашка не влезает в миниатюру 88 */
.is-list .card__sup { display: block; }
.is-list .card__label--sup { display: none; }
.cab .card__label--sup, .cab .card__sup { display: none; } /* в кабинете дату поставки задаёт вкладка «Товары в пути» — демо-дата каталога ей противоречила */
.catalog__more { margin-top: 3.125rem; text-align: center; }
.catalog__shown { margin-bottom: 0.75rem; color: var(--muted); font: 500 0.875rem/1.4 var(--font); }
.more { height: 2.625rem; padding: 0 1.875rem; border: 2px solid var(--hair); color: var(--ink); font: 600 0.875rem/1 var(--font); transition: border-color .25s, color .25s; } /* «Load more» у Woodmart: рамка 2px α0.105 */
.more[hidden] { display: none; }

/* ---------- Нижняя панель телефона ---------- */
.tabbar { display: none; }

/* ---------- Наведение: только где есть мышь, на касании ховер залипает ---------- */
@media (hover: hover) {
  .btn:hover { background: var(--btn-h); }
  .header__nav a:hover, .header__phone:hover, .header__icon:hover, .header__geo:hover b, .drawer__geo:hover b, .geo__list button:hover, .geo__close:hover, .geo__other a:hover,
  .hero__cats a:hover, .footer__col a:hover, .footer__bottom a:hover, .arrow:not(:disabled):hover, .card__title a:hover { color: var(--olive); }
  .card:hover .card__img img, .banner:hover img { transform: scale(1.07); }
  .card:hover .card__fav { opacity: 1; visibility: visible; transform: none; }
  .promo__link:hover { border-color: var(--white); }
  .cat:hover .cat__title { color: var(--olive); }
  .rail-ctrl__btn:not(:disabled):hover { background: var(--btn-h); }
  .social:hover { background: var(--olive-h); }
  .drawer__group a:hover, .drawer__phone:hover { color: var(--olive); }
  .cat:hover .cat__img img { transform: scale(1.06); }
  .hero__arrow:hover { opacity: .7; }
  .card__fav:hover { color: var(--hot-h); }
}
.card__fav:focus-visible { opacity: 1; visibility: visible; transform: none; }

/* ---------- Планшет ---------- */
/* 1024–1259: прячем телефон в шапке, лента по 4 */
@media (max-width: 1259px) {
  .header__phone { display: none; }
  .rail { grid-auto-columns: calc((100% - 3 * var(--gap) - 2 * var(--pad)) / 4); }
}
@media (max-width: 1023px) {
  .header__nav { display: none; }
  .header__burger { display: grid; }
  .hero { grid-template-columns: 1fr; }
  .hero__side { display: none; }
  .rail { grid-auto-columns: calc((100% - 2 * var(--gap) - 2 * var(--pad)) / 3); }
  .banners { grid-template-columns: repeat(3, 1fr); gap: 0.9375rem; }
  .banner__title { font-size: 1.625rem; }
  .about { grid-template-columns: 1fr; gap: 0; } /* фото над карточкой вплотную, как одно целое (Павлон 08.10) */
  .about__photo { order: -1; }
  .about__card { aspect-ratio: auto; } /* в одну колонку карточка по тексту, фото 3:2 */
  .about__photo { aspect-ratio: 3 / 2; }
  .promo__title { font-size: 1.75rem; }
  .promo__body { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; }
  .promo__item { aspect-ratio: 4 / 3; } /* на 768 два столбца по 344: в 680/420 текст не влезал (-5px) */
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__sub { grid-column: 1 / -1; border-right: 0; padding-right: 0; padding-bottom: 2.5rem; border-bottom: var(--rule); margin-bottom: 1.875rem; } /* под подпиской отступ, черта, отступ — потом пункты (Павлон 08.10) */
}

/* ---------- Телефон (по замерам демо на 375) ---------- */
@media (max-width: 767px) {
  :root { --cats-h: 10.375rem; /* 40 + 2 + 16 + 92 + 16 */ --pad: 0.9375rem; --hdr-h: 3.75rem; --top-h: 3.25rem; --gap: 0.625rem; --sp-90: 2.5rem; --sp-100: 3.125rem; }
  body { padding-bottom: 3.4375rem; }
  .topbar { font-size: 0.8125rem; line-height: 1.35; } /* 13 вместо 16, две строки в плашке 52 (Павлон 08.10) */
  .header__tools { gap: 0; }
  .header__tools .header__icon:not(.header__cart) { display: none; } /* кабинет на телефоне — в нижней панели */
  .header__logo img { width: 8.5rem; }
  .header, .ctool { --hdr-stuck: var(--hdr-h); } /* шапка на телефоне липнет целиком (60) — см. «Телефон, планшет…» у шапки */
  .header.is-stuck .header__logo img { width: 7.5rem; }
  .header__icon, .header__burger { width: 3rem; height: 3rem; }
  .hero { height: max(24rem, calc(100svh - var(--top-h) - var(--hdr-h) - var(--cats-h) - 55px)); } /* 55 — нижняя панель */
  .hero__slide figcaption { left: 1.25rem; right: 1.25rem; bottom: 1.5rem; width: auto; max-width: none; }
  .hero__slide h1, .hero__title { font-size: 1.5rem; }
  .hero__nav { display: none; } /* на телефоне слайды листают пальцем, стрелок и точек нет (Павлон 08.10) */
  .cats__row { padding: 1rem 0; }
  .cats .slider { margin-inline: calc(-1 * var(--pad)); }
  .cats__track { grid-auto-columns: 5.5rem; gap: 0.5rem; padding-inline: var(--pad); }
  .cat { gap: 0.5rem; }
  .cat__img { width: 4rem; height: 4rem; }
  .cat--sale .cat__img { font-size: 1.125rem; }
  .cat__title { font-size: 0.8125rem; line-height: 1.25rem; }
  .catalog .cat__title { line-height: 1rem; } /* подпись отдела в 2–3 строки: при кегле 13 межстрочный 20 разваливал её (Павлон 09.10) */
  .cats__arrow { display: none; }
  .section__title { font-size: 1.25rem; }
  .arrows { display: none; }
  .rail-ctrl { margin-top: 1.25rem; }
  .rail-ctrl__btns { display: none; } /* на телефоне листают пальцем, полоса показывает где ты */
  .rail-ctrl--m { display: flex; }
  .rail { grid-auto-columns: calc((100% - var(--gap)) / 2); padding-inline: 0; }
  .section--popular .slider { margin-inline: var(--pad); } /* ровно 2 карточки в поле экрана, без торчащих краёв соседних */
  .card__title, .card__price { font-size: 0.9rem; line-height: 1.26rem; }
  .card__head { min-height: 5.02rem; } /* 2 строки названия 20.16 + подпись в 2 строки 18 + отступы */
  .card__old { font-size: 0.81rem; }
  .card__label { padding: 0.3125rem 0.5rem; font-size: 0.625rem; line-height: 0.75rem; } /* как у демо на 375: 10/600 */
  .card__meta { font-size: 0.7813rem; line-height: 1.125rem; }
  .card__fav { opacity: 1; visibility: visible; transform: none; width: 1.875rem; height: 1.875rem; border-radius: 50%; top: 0.5rem; right: 0.5rem; } /* 30 и значок 15, 8px от угла — как в приложении (Павлон 14.10: «сердечко меньше», «кружок поменьше») */
  .card__fav::before { content: ""; position: absolute; inset: -0.5rem; } /* зона касания добрана невидимо до 46 */
  .card__fav svg { width: 0.9375rem; height: 0.9375rem; transform: translateY(1px); } /* центр масс сердца выше рамки — опускаем, чтобы стояло по центру кружка на глаз */
  .btn--sm { padding: 0 0.875rem; }
  /* на узкой карточке кнопка во всю ширину и переносится: «Стать контрагентом» шире карточки 125px на 320 */
  .card .btn--sm, .card__buy, .card__buy .btn--sm { width: 100%; }
  .card .btn--sm { height: auto; min-height: 2.25rem; padding: 0.5rem 0.375rem; white-space: normal; line-height: 1.25; text-align: center; }
  .qty button { width: 2.25rem; }
  .qty output { width: 2.25rem; }
  .qty__unit { display: none; }
  .banners { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 100%; } /* по одному в поле экрана, соседний не торчит */
  .promo { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; margin-top: 0.625rem; }
  .promo__item { aspect-ratio: 345 / 260; }
  .promo__title { font-size: 1.375rem; margin-bottom: 0.5rem; }
  .promo__body { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; }
  .promo__link { font-size: 1.125rem; padding-block: 0.625rem 0.25rem; margin-top: 0.25rem; }
  .band { padding: 2.5rem 0 15.625rem; }
  .band__title { font-size: 2rem; }
  .band__title :is(img, video) { width: 5rem; height: 2rem; vertical-align: -0.25rem; }
  .about__card { padding: 1.5625rem; min-height: 0; }
  .about__text { font-size: 1.375rem; }
  .about__photo { min-height: 0; }
  .section--exotic .section__head { align-items: flex-start; flex-direction: column; }
  .footer__main { grid-template-columns: minmax(0, 1fr); padding: 2.5rem 0; }
  .footer__slogan { font-size: 1.25rem; }
  .footer__form { align-self: stretch; } /* ширина по содержимому (335) на 320 вылезала на 45px — тянем на колонку */
  .footer__col a { padding: 0.4375rem 0; } /* шаг 40 вместо 50 (Павлон 08.10) */
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding-bottom: 1.25rem; }
  .footer__dev { margin-left: 0; }
  .social { width: 3rem; height: 3rem; } /* палец: 48 */
  .footer__sub .footer__social { display: none; }
  .footer__social--m { display: flex; margin-top: 1rem; padding-top: 0; }
  .band__dla-d { display: none; }
  .band__dla-m { display: inline; }
  .tabbar {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; height: 3.4375rem;
    display: grid; grid-template-columns: repeat(4, 1fr); padding: 0.3125rem 0;
    background: var(--white); border-top: 1px solid var(--hair);
  }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; color: var(--ink); font: 600 0.6875rem/0.6875rem var(--font); }
  .tabbar__cart span { top: -0.125rem; right: calc(50% - 1.25rem); }
}

/* ---------- Каталог: наведение и узкие экраны ---------- */
@media (hover: hover) {
  .crumbs a:hover, .chip:hover, .sort__btn:hover, .view__btn:hover, .fgroup__more:hover, .cat:hover .cat__title { color: var(--olive); }
  .sort__list button:hover { background: var(--form-bg); }
  .opt:hover .opt__text { background-position: left bottom; background-size: 100% 1px; color: var(--title); }
  .opt:hover .check { border-color: var(--title); }
  .opt:hover .swatch-ring { border-color: var(--muted); }
  .more:hover { border-color: var(--olive); color: var(--olive); }
}
@media (max-width: 1259px) {
  .catalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  /* фильтры уходят в выезжающую панель слева, как бургер */
  .catalog__body { grid-template-columns: minmax(0, 1fr); }
  .filters {
    position: fixed; z-index: 110; top: 0; bottom: 0; left: 0; width: min(22rem, 90vw); display: flex; flex-direction: column;
    padding: 0; border-right: 0; background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-100%); visibility: hidden; transition: transform .3s, visibility 0s .3s;
  }
  .filters-open .filters { transform: none; visibility: visible; transition: transform .3s; }
  .catalog__body.is-collapsed .filters { display: flex; } /* свёрнутость колонки — только для широкого экрана, панели она не мешает */
  .filters__top { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.75rem 0.75rem var(--pad); }
  .filters__top .drawer__close { position: static; }
  .filters__title { color: var(--title); font: 500 1.375rem/1 var(--font); }
  .filters__groups { position: static; max-height: none; overflow: visible; margin-right: 0; flex: 1; padding: 0.5rem var(--pad) 0; }
  .fgroup__body { gap: 0; margin-top: -0.625rem; }
  .opt { min-height: 2.75rem; } /* палец: 44 */
  .filters__foot { position: sticky; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.9375rem var(--pad) calc(0.9375rem + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--hair); }
  .filters__apply { width: 100%; height: 3rem; }
  .filters__reset { height: 2.5rem; color: var(--muted); font: 500 0.875rem/1 var(--font); text-decoration: underline; text-underline-offset: 0.1875rem; }
  .filters__reset[hidden] { display: none; }
  .filters__backdrop { display: block; position: fixed; z-index: 105; inset: 0; background: rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .filters-open .filters__backdrop { opacity: 1; pointer-events: auto; }
  .catalog__main { padding-top: 1.875rem; }
}
@media (max-width: 767px) {
  .catalog { padding-top: 1.25rem; }
  .crumbs { font-size: 0.8125rem; }
  .catalog__title { margin-top: 0.75rem; font-size: 1.5rem; }
  .ctool { flex-wrap: wrap; gap: 0.625rem; }
  .ctool__chips { order: 3; flex-basis: 100%; }
  .ctool__chips:empty { display: none; }
  .ctool.has-kinds .ctool__filters { gap: 0; padding: 0 0.625rem; font-size: 0; } /* лента видна — «Фильтры» одним значком, места рубрикам ~220 px */
  .ctool__arr { display: none; } /* на телефоне листают пальцем */
  .ctool__right { gap: 0.25rem; }
  .sort--bar { display: none; } /* на телефоне сортировка уходит в панель фильтров, как у Hyper (Павлон 08.10) */
  .fsort { display: flex; align-items: center; gap: 0.75rem; margin: 0 var(--pad); padding-bottom: 1rem; border-bottom: 1px solid var(--hair); }
  .fsort__label { flex: none; color: var(--title); font: 500 0.9375rem/1.5rem var(--font); }
  .fsort__field { position: relative; flex: 1; min-width: 0; }
  .fsort__btn { justify-content: space-between; width: 100%; height: 2.75rem; padding: 0 1rem; background: var(--form-bg); font-size: 0.9375rem; } /* поле как подписка в подвале */
  .fsort__list { left: 0; right: 0; min-width: 0; }
  .filters__groups { padding-top: 1.5rem; }
  .catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.875rem var(--gap); }
  .catalog__grid:not(.is-list) .card__foot { padding-bottom: 1.875rem; }
  .is-list .card { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0; /* настольный gap 1.5rem протекал в строки сетки: 32 px пустоты под подписью */ align-items: start; }
  .is-list .card__media { grid-row: 1 / 3; width: 4.5rem; }
  .is-list .card__foot { flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.5rem; }
  .is-list .card__foot .btn--sm { width: auto; }
  .catalog__more { margin-top: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { .filters, .filters__backdrop { transition: none; } }

/* ---------- Страница товара (Woodmart, refs/woodmart/MEASURE.md §3.8) ---------- */
.pd-wait main { visibility: hidden; } /* пока едут данные товара из адреса — не мелькать товаром по умолчанию */
/* Скелетон цены у вошедшего (pd-cwait, Павлон 08.10): сервер нарисовал гостевой вид, клиентский дорисует product.js.
   Гостевые строки прозрачны и держат место; плашки — по клиентской раскладке (замер 08.10): цена 34, «Пачка… · В наличии» 26
   через 8 (её места у гостя нет — добавляет ::after), счётчик с кнопкой 42 и итог 26 — ровно там, где у гостя кнопка и «Войти» */
@keyframes pd-sk { 50% { opacity: .45; } }
.pd-cwait .pd__price, .pd-cwait .pd__buy { --sk: var(--card-bg); position: relative; color: transparent; }
.pd-cwait .pd__price { line-height: 2.125rem; padding-bottom: 0.375rem; } /* низ строки «Пачка…» — отступом: margin плашки схлопывался с абзацем (62 вместо 68) */
.pd-cwait .pd__price::before, .pd-cwait .pd__price::after, .pd-cwait .pd__buy::before, .pd-cwait .pd__buy::after {
  content: ''; display: block; border-radius: 0.375rem; background: var(--sk); animation: pd-sk 1.6s ease-in-out infinite;
}
.pd-cwait .pd__price::before { position: absolute; top: 0.1875rem; left: 0; width: 8.5rem; height: 1.75rem; }
.pd-cwait .pd__price::after { width: 16rem; max-width: 100%; height: 0.875rem; margin-top: 0.875rem; } /* 8 + (26 − 14) / 2 */
.pd-cwait .pd__buy > * { visibility: hidden; } /* гостевая «Стать контрагентом» не мелькает и не ловит фокус */
.pd-cwait .pd__buy::before { position: absolute; left: 0; right: 0; bottom: 2.375rem; height: 2.625rem; }
.pd-cwait .pd__buy::after { position: absolute; left: 0; bottom: 0.375rem; width: 13rem; height: 0.875rem; }
@media (prefers-reduced-motion: reduce) { .pd-cwait :is(.pd__price, .pd__buy)::before, .pd-cwait :is(.pd__price, .pd__buy)::after { animation: none; } }
.pd { padding-top: var(--sp-40); }
/* крошки и товар — по центру: шире суммы колонок (фото 800 + 40 + товар 640) поля слева и справа равны; шапка и подвал во всю ширину (Павлон 08.10) */
.pd > .container { max-width: calc(50rem + 2.5rem + 40rem + 2 * var(--pad)); margin-inline: auto; }
/* Фото слева, справа инфо: у донора 798 / 552 при зазоре 40. Шире 800 фото не растёт — у донора
   оно 798 на любом широком экране (контейнер 1420), а у кадров из 1С больше 1000 px не бывает */
.pd__top { display: grid; grid-template-columns: minmax(0, min(57.4%, 50rem)) minmax(0, 1fr); gap: 2.5rem; align-items: start; margin-top: 1.25rem; }
.pd__photo { position: relative; display: grid; place-items: center; aspect-ratio: 7 / 8; overflow: hidden; background: var(--white); }
.pd__photo img { width: 100%; height: 100%; object-fit: contain; } /* кадр целиком, поля — белые, как фон фото 1С (Павлон 09.10) */
.pd__photo img.is-near { object-fit: cover; } /* пропорции почти как у рамки (<10%) — во всю рамку: без тонких полос по краям (product.js) */
.pd__photo img.is-small { object-fit: contain; } /* мелкий кадр: целиком и не крупнее 1,5 своих размеров (предел ставит product.js) */
.pd__photo .card__labels { top: 0.625rem; left: auto; right: 0.625rem; } /* у донора метка справа сверху */
.pd__info { max-width: 40rem; }
.pd__title { color: var(--title); font: 500 2.125rem/1.2 var(--font); } /* 34/40.8 */
.pd__sku { margin-top: 0.6875rem; color: var(--muted); font: 500 1rem/1.6 var(--font); } /* на месте отзывов донора, 11 под названием */
.pd__price { margin-top: 2.5rem; color: var(--olive); font: 500 1.375rem/1.4 var(--font); } /* у донора цена 28; здесь фраза, а не число — 22 */
.pd__buy { margin-top: 2.125rem; padding-top: 2.1875rem; border-top: var(--rule); } /* черта 2px олива, до формы 35 */
.pd__btn { width: 100%; font-size: 1rem; } /* «В корзину» донора: 16/500, высота 42 */
.pd__login { margin-top: 0.75rem; color: var(--muted); font: 500 1rem/1.6 var(--font); }
.pd__login a { color: var(--ink); transition: color .25s; }
.pd__extra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 2.0625rem; }
.pd__fav { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); font: 500 1rem/1.6 var(--font); transition: color .25s; }
.pd__share { display: flex; align-items: center; gap: 0.75rem; color: var(--ink); font: 500 1rem/1.6 var(--font); }
.pd__share a { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--ink); transition: color .25s; }
.pd__none { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 2.5rem 0 1.25rem; }
/* Раскрывашки под формой — по образцу Павлона (08.10): заголовок 22/600 и «+» справа; под открытым тёмная линия,
   под закрытыми тонкая; «+» → «−» как у групп фильтров (вертикаль 270°, 500 мс) */
.pd__acc { margin-top: 2.5rem; } /* и справа под формой, и слева под фото — 40 */
.acc__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--hair); color: var(--title); cursor: pointer; list-style: none; user-select: none; transition: border-color .25s; }
.acc__head::-webkit-details-marker { display: none; }
.acc:first-child .acc__head { padding-top: 0; }
.acc[open] .acc__head { border-color: var(--title); }
.acc__title { font: 600 1.375rem/1.4 var(--font); }
.acc__plus { flex: none; }
.acc__v { transform-origin: center; transition: transform .5s cubic-bezier(.3, 1, .3, 1); }
.acc[open] .acc__v { transform: rotate(270deg); }
.acc__body { padding: 1.75rem 0 2.5rem; font: 500 1rem/1.6 var(--font); }
.acc__body p + p { margin-top: 0.5rem; }
.acc__body a { color: var(--ink); transition: color .25s; }
.acc__more { display: inline-block; margin-top: 0.75rem; text-decoration: underline; text-underline-offset: 0.1875rem; }
/* Характеристики — таблица через строку на полосе (у образца #ececec на белом; у нас --cat-bg на ступень темнее фона), строка 48 */
.pd__specs { margin: 0; }
.pd__specs div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: center; min-height: 3rem; padding: 0.6875rem 1rem; }
.pd__specs div:nth-child(odd) { background: var(--cat-bg); }
.pd__specs dt { color: var(--title); }
.pd__specs dd { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--text); }
/* «Вам может понравиться»: карточки как в каталоге, цены и кнопки на одной линии (subgrid в ленте) */
/* «Вам может понравиться» — в колонке товара под характеристиками, по 2 карточки лентой со свайпом (Павлон 08.10) */
.pd__rel { margin-top: 0.5rem; min-width: 0; } /* над ней уже 40 — нижнее поле открытых «Характеристик» */
.pd__rel-title { margin-bottom: 1.25rem; color: var(--title); font: 600 1.375rem/1.4 var(--font); } /* как заголовки раскрывашек */
.pd__rel .rail { grid-auto-columns: calc((100% - var(--gap)) / 2); padding-inline: 0; grid-template-rows: repeat(3, auto); row-gap: 0; }
.pd__rel .card { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-items: start; }
.pd__rel .card__meta { margin-bottom: 0; }
.pd__rel .card__head { min-height: 0; padding-bottom: 0.25rem; }
@media (hover: hover) {
  .pd__login a:hover, .pd__fav:hover, .pd__share a:hover, .acc__body a:hover, .acc__head:hover { color: var(--olive); }
}
@media (max-width: 1023px) {
  .pd__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); }
  .pd__title { font-size: 1.75rem; }
}
@media (max-width: 767px) {
  .pd { padding-top: 1.25rem; }
  .pd .crumbs__tail > :nth-last-child(-n+2) { display: none; } /* как у донора: на телефоне крошки без названия товара */
  /* телефон: фото → товар → условия → похожие; колонки раскрываются, порядок задаёт order */
  .pd__top { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 0.75rem; }
  .pd__gallery, .pd__info { display: contents; }
  .pd__media { order: 1; }
  .pd__main { order: 2; margin-top: 1.5rem; }
  .pd__terms { order: 3; }
  .pd__rel { order: 4; }
  .pd__title { font-size: 1.5rem; }
  .pd__price { margin-top: 1.5rem; font-size: 1.125rem; }
  .pd__buy { margin-top: 1.75rem; padding-top: 1.75rem; }
  .pd__acc { margin-top: 1.75rem; }
  .acc__title { font-size: 1.125rem; }
  .acc__body { padding: 1.25rem 0 1.75rem; }
  .pd__specs div { padding-inline: 0.75rem; }
}

/* ---------- ВРЕМЕННО: демо-вход клиента (main.js, AZ) ---------- */
.is-client { color: var(--olive) !important; } /* значок кабинета: вошёл */
.acct { position: fixed; z-index: 130; width: 15rem; padding: 1.25rem; background: var(--white); border: 1px solid var(--hair); }
.acct[hidden] { display: none; }
.acct__name { margin-bottom: 1rem; color: var(--title); font: 600 1rem/1.6 var(--font); overflow-wrap: anywhere; } /* без почты: имя, отступ как у подписи в вёрстке (1rem), кнопка */
/* вошёл: вместо человечка — кружок с инициалами «Имя Фамилия» (Павлон 08.10); в шапке 28, в нижней панели 22 */
.hava { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--green); color: #fff; font: 600 0.6875rem/1 var(--font); letter-spacing: 0.02em; transition: background .25s; }
.is-client:hover .hava, .is-client[aria-expanded="true"] .hava { background: var(--green-h); }
.tabbar .hava { width: 1.375rem; height: 1.375rem; font-size: 0.5625rem; }
.acct__note { margin: 0.125rem 0 1rem; color: var(--muted); font: 500 0.875rem/1.5 var(--font); }
.acct__cab { width: 100%; }
.acct__out { display: block; width: 100%; margin-top: 0.75rem; padding: 0; border: 0; background: none; color: var(--muted); font: 500 0.875rem/1.5 var(--font); cursor: pointer; }
.acct__out:hover { color: var(--title); }
.card__per { color: var(--muted); font-weight: 500; font-size: 0.875rem; }
/* Товар у клиента: цена 28 олива (как у Woodmart), рядом «за шт.»; ниже пачка и остаток; количество 80×42 + «В корзину» */
.pd__price--client { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.5rem; }
.pd__amount { font: 500 1.75rem/1.2 var(--font); }
.pd__per { color: var(--muted); font: 500 1rem/1.6 var(--font); }
.pd__old { color: #bbb; font: 400 1.25rem/1.2 var(--font); }
.pd__note { margin-top: 0.5rem; color: var(--muted); font: 500 1rem/1.6 var(--font); }
.pd__form { display: flex; gap: 0.625rem; }
.pd__form .pd__btn { flex: 1; width: auto; min-width: 0; }
.pd__qty { flex: none; display: flex; height: 2.625rem; background: var(--form-bg); }
.pd__qty button { display: grid; place-items: center; width: 2.75rem; color: var(--ink); transition: color .25s, opacity .25s; } /* 44 и знак 16 линией: было 28 и текстовый «−» — тесно (Павлон 08.10) */
.pd__qty button:disabled { opacity: .35; cursor: default; }
.pd__qty output { display: grid; place-items: center; min-width: 2.5rem; color: var(--ink); font: 600 1rem/1 var(--font); }
.pd__total { margin-top: 0.75rem; color: var(--muted); font: 500 1rem/1.6 var(--font); }
.pd__total b { color: var(--ink); font-weight: 600; }
@media (hover: hover) { .pd__qty button:not(:disabled):hover { color: var(--olive); } }
/* «Поторопитесь, осталось N пачек»: текст олива 600, число жирнее; полоса как у Woodmart — подложка 10% чёрного,
   заполнение олива в косую полоску, без скруглений (радиусы на сайте 0). Числа — из их woo-opt-free-progress-bar.css (refs/woodmart/src/css) */
.pd__low { margin-bottom: 1.5rem; }
.pd__low-text { color: var(--olive); font: 500 1rem/1.6 var(--font); }
.pd__low-text b { font-weight: 700; }
.pd__low-bar { height: 0.625rem; margin-top: 0.625rem; background: rgba(0, 0, 0, .1); } /* --wd-progress-height 10, сверху 10 */
.pd__low-bar span { display: block; height: 100%; background-color: var(--green); background-image: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-size: 15px 15px; }

/* ---------- Боковая корзина (Woodmart §3.10): 340 справа, белая, выезд .5s cubic-bezier(.19,1,.22,1) ---------- */
.cside { position: fixed; inset: 0; z-index: 120; }
.cside[hidden] { display: none; }
.cside__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .3s; } /* как у меню */
.cside__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(21.25rem, 100vw); display: flex; flex-direction: column; background: var(--white); transform: translateX(100%); transition: transform .5s cubic-bezier(.19, 1, .22, 1); }
.cside.is-open .cside__backdrop { opacity: 1; }
.cside.is-open .cside__panel { transform: none; }
.cside__head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0.9375rem; border-bottom: 1px solid var(--hair); } /* 70 */
.cside__title { color: var(--title); font: 500 1.3rem/1.4 var(--font); } /* 20.8 */
.cside__close { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--olive); font: 500 1rem/1 var(--font); }
.cside__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cside__list { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.cside__item { position: relative; display: flex; gap: 0.9375rem; padding: 0.9375rem; border-bottom: 1px solid var(--hair); }
.cside__img { flex: none; width: 4.0625rem; } /* 65×74, 7:8 */
.cside__img img { width: 100%; aspect-ratio: 7 / 8; object-fit: cover; background: var(--white); }
.cside__info { flex: 1; min-width: 0; padding-right: 1.25rem; }
.cside__name { display: block; color: var(--ink); font: 500 1rem/1.4 var(--font); transition: color .25s; }
.cside__qty { margin-top: 0.5rem; color: #bbb; font: 500 0.9rem/1.4 var(--font); } /* 14.4 */
.cside__qty b { color: var(--olive); font-weight: 600; }
.cside__remove { position: absolute; top: 0.8125rem; right: 0.625rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; color: var(--ink); transition: color .25s; }
.cside__foot { flex: none; padding-bottom: 0.9375rem; }
.cside__total { display: flex; justify-content: space-between; align-items: baseline; padding: 0.9375rem; border-top: 1px solid var(--hair); color: var(--title); font: 600 1.3rem/1.4 var(--font); }
.cside__total b { color: var(--olive); font-weight: 600; }
.cside__ship { padding: 0.9375rem; border-top: 1px solid var(--hair); }
.cside__btns { display: grid; gap: 0.625rem; padding: 0 0.9375rem; }
.cside__btns .btn { width: 100%; }
.cside__view { background: var(--title); color: var(--white); } /* тёмная — белый текст явно: .btn с 10.10 лаймовая с тёмным текстом */ /* «View cart» у донора — #242424 */
.cside__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 1.5rem 0.9375rem; color: var(--text); font: 500 1rem/1.6 var(--font); }
/* Полоса до бесплатной доставки — как «Поторопитесь»: woo-opt-free-progress-bar.css WoodMart, 10 px, полоски 135° шаг 15 */
.ship__text { color: var(--text); font: 500 1rem/1.6 var(--font); }
.ship__text b { color: var(--olive); font-weight: 600; }
.ship__bar { height: 0.625rem; margin-top: 0.625rem; background: rgba(0, 0, 0, .1); }
.ship__bar span { display: block; height: 100%; background-color: var(--green); background-image: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-size: 15px 15px; transition: width .4s; }
@media (hover: hover) {
  .cside__close:hover, .cside__name:hover, .cside__remove:hover { color: var(--olive-h); }
  .cside__view:hover { background: #000; }
}
@media (prefers-reduced-motion: reduce) { .cside__panel, .cside__backdrop { transition: none; } }

/* ---------- Страница корзины (Woodmart §3.11) — ширина и центр как у товара (.pd > .container) ---------- */
.cartp { padding-top: 1.25rem; } /* шаги 20 под чертой шапки */
.steps ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.875rem; margin: 0; padding: 0; list-style: none; }
.steps li { color: var(--title); font: 500 1.375rem/1.6 var(--font); } /* 22/35.2 */
.steps li:not(.is-on):not(.steps__arrow) { opacity: .7; }
.steps li a { color: inherit; }
.steps .is-on a { text-decoration: underline 2px var(--olive); text-underline-offset: 0.35em; }
.steps__arrow { display: flex; opacity: .7; }
.cartp__grid { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); align-items: start; margin-top: 2.5rem; } /* 904 / 487 у донора */
.cartp__grid[hidden], .cartp__empty[hidden] { display: none; }
.cartp__main { min-width: 0; }
.ctable { width: 100%; border-collapse: collapse; border-bottom: 1px solid var(--hair); }
.ctable__head { height: 2.9375rem; padding: 0; color: var(--title); font: 500 1.1875rem/1.4 var(--font); text-align: left; vertical-align: top; } /* 19/500, ряд 47 */
.ctable td { padding: 1.3125rem 0; border-top: 1px solid var(--hair); vertical-align: top; } /* сверху 21 */
.ctable__img { width: 5rem; } /* колонка 80: фото 64 + 16 */
.ctable__img img { width: 4rem; aspect-ratio: 7 / 8; object-fit: cover; background: var(--white); } /* 64×73 */
.ctable__name { color: var(--ink); font: 500 1rem/1.4 var(--font); transition: color .25s; }
.ctable__price { margin-top: 0.4375rem; color: var(--olive); font: 600 1rem/1.4 var(--font); }
.ctable__price span { color: var(--muted); font-weight: 500; font-size: 0.875rem; }
.ctable__meta { margin-top: 0.5rem; color: var(--text); font: 500 1rem/1.4 var(--font); }
.ctable__qty { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.pd__qty--sm { height: 2.25rem; } /* у донора 80×32; у нас 36 — как просил на товаре, «тесно» */
.pd__qty--sm button { width: 2.25rem; }
.pd__qty--sm output { min-width: 2rem; font-size: 0.9375rem; }
.ctable__rm { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--muted); transition: color .25s; }
.ctable__sum { text-align: right; white-space: nowrap; }
td.ctable__sum b { display: block; color: var(--olive); font: 600 1rem/1.4 var(--font); }
td.ctable__sum span { display: block; margin-top: 0.25rem; color: var(--muted); font: 500 0.8125rem/1.4 var(--font); }
.cartp__rel { margin-top: 2.5rem; }
.cartp__rel .pd__rel-title { font: 500 1.1875rem/1.4 var(--font); } /* «You might also like» 19/500 */
.cartp__rel .rail { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); }
.ctot { padding-left: 1.875rem; } /* поле 30, содержимое 457 */
.ctot__title { height: 2.9375rem; border-bottom: 1px solid var(--hair); color: var(--title); font: 500 1.1875rem/1.4 var(--font); }
.ctot__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--hair); }
.ctot__title + .ctot__row { border-top: 0; }
.ctot__label { color: var(--title); font: 500 1rem/1.4 var(--font); }
.ctot__val { color: var(--text); font: 500 1rem/1.4 var(--font); text-align: right; }
.ctot__note { display: block; margin-top: 0.25rem; color: var(--text); font: 500 0.8125rem/1.4 var(--font); }
.ctot__city { color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 0.1875rem; }
.ctot__grand { align-items: baseline; padding: 1.125rem 0; color: var(--title); font: 500 1.375rem/1.4 var(--font); } /* «Estimated total» 22/500 */
.ctot__grand b { color: var(--olive); font-weight: 600; }
.ctot__ship { padding-top: 1rem; border-top: 1px solid var(--hair); }
.ctot__btn { width: 100%; margin-top: 1rem; }
.cartp__empty { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 5rem 0 2.5rem; color: var(--text); text-align: center; }
.cartp__empty svg { color: var(--hair); margin-bottom: 0.5rem; }
.cartp__empty-title { color: var(--title); font: 500 1.75rem/1.2 var(--font); }
.cartp__empty .btn { margin-top: 0.75rem; }
.cartp__nojs { margin-top: 2.5rem; }
@media (hover: hover) { .ctable__name:hover, .ctable__rm:hover, .ctot__city:hover, .steps li a:hover { color: var(--olive); } }
@media (max-width: 1023px) {
  .cartp__grid { grid-template-columns: minmax(0, 1fr); }
  /* узко: товары → итог с «Оформить заказ» → похожие (лента не должна стоять между списком и кнопкой) */
  .cartp__main { display: contents; }
  .ctable { order: 1; }
  .ctot { order: 2; padding: 2.5rem 0 0; }
  .cartp__rel { order: 3; }
}
@media (max-width: 767px) {
  .steps li { font-size: 1rem; }
  .steps ol { gap: 0 0.5rem; }
  .steps__arrow svg { width: 0.875rem; }
  .cartp__grid { margin-top: 1.5rem; }
  .ctable__img { width: 4.5rem; }
  .cartp__rel .rail { grid-auto-columns: calc((100% - var(--gap)) / 2); }
}

/* ---------- Оформление заказа (Woodmart §3.12): короткая шапка, форма 904 + липкий итог 487 ---------- */
.ohead__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; max-width: calc(50rem + 2.5rem + 40rem + 2 * var(--pad)); margin-inline: auto; padding: 2.5rem var(--pad) 0; } /* лого в 40 от верха, шаги справа */
.ohead .header__logo { position: static; transform: none; display: block; } /* в общей шапке лого по центру абсолютно, здесь — слева в потоке */
.chk { padding: 5rem 0 var(--sp-100); } /* у донора форма с y 157; подвала нет — снизу 100, иначе текст под кнопкой прижат к краю экрана (Павлон 08.10) */
.chk__grid { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); align-items: start; }
.chk__grid[hidden], .chk__msg[hidden], .chk__sec[hidden] { display: none; }
.chk__form { min-width: 0; }
.chk__sec + .chk__sec { margin-top: 2.5rem; }
.chk__h { margin-bottom: 1rem; color: var(--title); font: 500 1.375rem/1.4 var(--font); } /* 22/30.8, до поля 16 */
.chk__note { margin: -0.25rem 0 1rem; color: var(--text); font: 500 1rem/1.4 var(--font); }
.chk__note b { color: var(--ink); font-weight: 600; }
.chk__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.chk__row + .ofield, .ofield + .chk__row, .chk__row + .chk__row { margin-top: 0.75rem; } /* между полями 12 */
/* Поле: высота 50, подложка олива 9%, без рамки; подпись внутри, при вводе уезжает вверх на 11 и мельчает до 12.3 */
.ofield { position: relative; display: block; }
.ofield input, .ofield textarea { display: block; width: 100%; height: 3.125rem; padding: 1rem 0.5625rem; border: 0; border-radius: 0; background: var(--form-bg); color: var(--title); font: 500 0.9375rem/1.125rem var(--font); outline: none; transition: box-shadow .2s, padding .2s; }
.ofield textarea { height: auto; min-height: 6.25rem; resize: none; } /* без серого уголка браузера — значок не в цветах сайта */
.ofield > :is(input, textarea) + span { position: absolute; left: 0.5625rem; top: 0.875rem; color: var(--text); font: 500 0.9375rem/1.375rem var(--font); pointer-events: none; transform-origin: left top; transition: transform .2s, color .2s; }
.ofield input:focus, .ofield input:not(:placeholder-shown), .ofield textarea:focus, .ofield textarea:not(:placeholder-shown) { padding-top: 1.5rem; padding-bottom: 0.5rem; }
.ofield input:focus + span, .ofield input:not(:placeholder-shown) + span, .ofield textarea:focus + span, .ofield textarea:not(:placeholder-shown) + span { transform: translateY(-0.6875rem) scale(.82); }
.ofield input:focus, .ofield textarea:focus { box-shadow: inset 0 -2px 0 var(--green); }
/* автозаполнение: подпись вверх (значение браузер прячет до первого действия — :placeholder-shown врёт), голубая заливка браузера — в цвет поля */
.ofield input:-webkit-autofill { padding-top: 1.5rem; padding-bottom: 0.5rem; -webkit-box-shadow: inset 0 0 0 100px var(--form-bg); -webkit-text-fill-color: var(--title); transition: background-color 9999s, padding .2s; }
.ofield input:-webkit-autofill:focus { -webkit-box-shadow: inset 0 -2px 0 var(--green), inset 0 0 0 100px var(--form-bg); }
.ofield input:-webkit-autofill + span { transform: translateY(-0.6875rem) scale(.82); }
.ofield.is-bad input { box-shadow: inset 0 -2px 0 #d9432b; }
.ofield.is-bad > :is(input, textarea) + span { color: #d63d22; }
.ofield--city { display: flex; align-items: center; gap: 0.75rem; min-height: 3.125rem; padding: 0 0.5625rem; background: var(--form-bg); }
.ofield__cap { color: var(--text); font: 500 0.9375rem/1.4 var(--font); }
.ofield--city b { flex: 1; color: var(--title); font: 500 0.9375rem/1.4 var(--font); }
.ofield__act { color: var(--ink); font: 500 0.9375rem/1.4 var(--font); text-decoration: underline; text-underline-offset: 0.1875rem; transition: color .25s; }
/* Варианты «Получение» и «Оплата» — строками по образцу food.oxboxdigital.ru/checkout (Павлон 10.10): значок слева, название с подписью,
   кружок справа; выбранная — обводка 2px сливой. Радиусов у плашек нет — язык сайта (у образца 16). */
.copts { display: flex; flex-direction: column; gap: 0.5rem; }
.copt { position: relative; display: block; cursor: pointer; }
.copt input { position: absolute; opacity: 0; pointer-events: none; }
.copt__b { display: flex; align-items: center; gap: 0.875rem; min-height: 4rem; padding: 0.625rem 1.125rem 0.625rem 1rem; background: var(--form-bg); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .15s; }
.copt__i { flex: none; color: var(--text); transition: color .15s; }
.copt__t { flex: 1; min-width: 0; color: var(--title); font: 500 1rem/1.375rem var(--font); }
.copt__t small { display: block; margin-top: 0.125rem; color: var(--text); font: 500 0.8125rem/1.125rem var(--font); }
.copt__p { color: var(--text); font: 500 1rem/1.4 var(--font); white-space: nowrap; }
.copt__r { flex: none; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border: 2px solid var(--text); border-radius: 50%; transition: border-color .15s; }
.copt input:checked + .copt__b { box-shadow: inset 0 0 0 2px var(--green); }
.copt input:checked + .copt__b .copt__i { color: var(--olive); }
.copt input:checked + .copt__b .copt__r { border-color: var(--green); }
.copt input:checked + .copt__b .copt__r::after { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--green); }
.copt input:focus-visible + .copt__b { outline: 2px solid var(--title); outline-offset: 2px; }
/* День и время — выпадающее поле по образцу food (Павлон 10.10): подпись и значение — как поле «Город»; панель — как список сортировки каталога
   (белая, тень 0 10 30, на 6 ниже поля); сверху 7 дней вкладками, ниже 3 промежутка. Выбранное — слива, как остальной выбор на сайте. */
.tpick { position: relative; }
.tsel { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 3.125rem; padding: 0 0.875rem 0 0.5625rem; background: var(--form-bg); color: var(--title); font: 500 0.9375rem/1.4 var(--font); text-align: left; cursor: pointer; transition: box-shadow .15s; }
.tsel__cap { color: var(--text); white-space: nowrap; }
.tsel__v { flex: 1; min-width: 0; overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.tsel svg { flex: none; color: var(--text); transition: transform .2s; }
.tsel[aria-expanded="true"], .tsel:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--green); }
.tsel[aria-expanded="true"] svg { transform: rotate(180deg); }
.tpop { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 0.375rem); padding: 0.5rem; background: var(--white); box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, .1); }
.tpop[hidden] { display: none; }
.tdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.375rem; margin-bottom: 0.375rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--hair); }
.tdays label, .tlist label { position: relative; }
.tdays input, .tlist input { position: absolute; opacity: 0; pointer-events: none; }
.tdays span { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 3.25rem; background: var(--form-bg); color: var(--title); font: 600 0.9375rem/1.125rem var(--font); cursor: pointer; transition: background-color .15s, color .15s; }
.tdays small { color: var(--text); font: 400 0.75rem/1.125rem var(--font); }
.tdays input:checked + span { background: var(--green); color: var(--white); }
.tdays input:checked + span small { color: rgba(255, 255, 255, .75); }
.tlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; }
.tlist span { display: flex; align-items: center; justify-content: center; height: 2.75rem; color: var(--title); font: 500 0.9375rem/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .15s, color .15s; }
.tlist input:checked + span { background: var(--green); color: var(--white); }
.tdays input:focus-visible + span, .tlist input:focus-visible + span { outline: 2px solid var(--title); outline-offset: -2px; }
@media (hover: hover) { .tdays label:hover input:not(:checked) + span, .tlist label:hover input:not(:checked) + span { background: var(--card-bg); } }
@media (max-width: 767px) {
  .tdays { display: flex; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } /* 7 дней в 375 не влезают — лентой */
  .tdays::-webkit-scrollbar { display: none; }
  .tdays label { flex: 0 0 4.5rem; }
  .tsel { padding-block: 0.5rem; }
  .tsel__v { white-space: normal; } /* на 320 самая длинная подпись не влезала на 21 px — переносом, а не многоточием */
  .tsel__cap { display: none; } /* на 375 «Дата и время» обрезала значение на 39 px; над полем заголовок «Когда доставить», читалке подпись остаётся (aria-labelledby) */
}
@media (prefers-reduced-motion: reduce) { .copt__b, .tsel svg, .tdays span, .tlist span { transition: none; } }
.chk__btn { width: 100%; height: 3rem; margin-top: 2.5rem; font-size: 0.875rem; } /* «Place order» 904×48, 14px */
.chk__legal { margin-top: 0.75rem; color: var(--text); font: 500 0.875rem/1.5 var(--font); }
.chk__pre { margin: 2.5rem 0 0; padding: 0.75rem 1rem; background: var(--card-bg); color: var(--ink); font: 500 0.875rem/1.5 var(--font); }   /* «предзаказ отменить нельзя» над кнопкой: берёт её отступ 2.5rem, */
.chk__pre:not([hidden]) + .chk__btn { margin-top: 0.75rem; }                                                                                /* а кнопка — вплотную под ним (Павлон 14.10) */
.chk__legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.1875rem; }
/* Итог — липкая рамка 1px, поля 16 */
.osum { position: sticky; top: 4.6875rem; padding-left: 1.875rem; }
.osum__box { padding: 1rem; border: 1px solid var(--hair); }
.osum__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.osum__title { color: var(--title); font: 500 1.375rem/1.4 var(--font); }
.osum__edit { color: var(--ink); font: 500 0.875rem/1.4 var(--font); text-decoration: underline; text-underline-offset: 0.1875rem; transition: color .25s; }
.osum__list { margin: 1.125rem 0 0; padding: 0; list-style: none; }
.osum__item { display: flex; gap: 1.5rem; }
.osum__item + .osum__item { margin-top: 1rem; }
.osum__img { position: relative; flex: none; width: 3rem; } /* 48×55 */
.osum__img img { width: 100%; aspect-ratio: 48 / 55; object-fit: cover; background: var(--white); }
.osum__n { position: absolute; top: -0.375rem; right: -0.375rem; display: grid; place-items: center; min-width: 0.9375rem; height: 0.9375rem; padding: 0 0.1875rem; border-radius: 1rem; background: var(--green); color: var(--white); font: 500 0.5625rem/1 var(--font); } /* кружок 15, 9px */
.osum__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.osum__name { color: var(--ink); font: 500 1rem/1.4 var(--font); }
.osum__price { color: var(--olive); font: 600 1rem/1.4 var(--font); }
.osum__price small { color: var(--muted); font-weight: 500; font-size: 0.8125rem; }
.osum__meta { color: var(--text); font: 500 0.8125rem/1.4 var(--font); }
.osum__meta b { color: var(--ink); font-weight: 500; }
.osum__sum { color: var(--olive); font: 600 1rem/1.4 var(--font); white-space: nowrap; }
.osum__rows { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.osum__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; color: var(--text); font: 500 1rem/1.4 var(--font); }
.osum__row + .osum__row { margin-top: 0.75rem; }
.osum__row span:first-child { color: var(--title); }
.osum__row small { display: block; color: var(--text); font-size: 0.8125rem; }
.osum__row span:last-child { text-align: right; }
.osum__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--hair); color: var(--title); font: 500 1.375rem/1.4 var(--font); }
.osum__total b { color: var(--olive); font-weight: 600; }
.chk__msg { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; max-width: 40rem; margin: 2.5rem auto 5rem; color: var(--text); text-align: center; font: 500 1rem/1.6 var(--font); }
.chk__msg > svg { color: var(--olive); margin-bottom: 0.5rem; }
.chk__msg-title { color: var(--title); font: 500 1.75rem/1.2 var(--font); }
.chk__msg b { color: var(--ink); }
.chk__msg .btn { margin-top: 0.75rem; }
.chk__msg-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; }
.chk__btn-alt { background: var(--title); color: var(--white); } /* тёмная — белый текст явно (см. .cside__view) */
@media (hover: hover) { .chk__btn-alt:hover { background: #000; } }
@media (hover: hover) { .ofield__act:hover, .osum__edit:hover, .chk__legal a:hover { color: var(--olive); } }
@media (max-width: 1023px) {
  .chk { padding-top: 2.5rem; padding-bottom: 5rem; }
  .chk__grid { grid-template-columns: minmax(0, 1fr); }
  .osum { position: static; order: -1; padding: 0 0 2.5rem; } /* узко: сперва что заказываешь, потом форма */
}
@media (max-width: 767px) {
  .ohead__in { padding-top: 1.25rem; }
  .chk { padding-top: 1.5rem; padding-bottom: 3.75rem; }
  .chk__row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Текстовые страницы «О компании», «Доставка» (laravel/resources/views/pages/*.blade.php).
   Раскладка — Woodmart Plants «About us», замер 09.10 (refs/woodmart/MEASURE.md §3.14):
   1440 — фраза 68/78 (у образца шириной 886 под короткую фразу; наша длиннее — во всю ширину, 2 строки), видео 1180:475 через 30, колонки 580 и 680 с зазором 130, заголовок 48/58,
   цифры: подпись 28/38 и число 48/58, шаг 130; между секциями 70, дальше 90. 375 — 32/42, 28/38, цифры 20/30 и 28/38. */
.tp { padding-top: var(--sp-40); padding-bottom: var(--sp-100); }
.tp__slogan { max-width: 86rem; margin-top: var(--sp-40); color: var(--title); font: 500 4.25rem/1.147 var(--font); }
.tp__slogan--md { font-size: 3rem; line-height: 1.208; }
.tp__media { position: relative; overflow: hidden; aspect-ratio: 1180 / 475; margin-top: 1.875rem; background: var(--card-bg); }
.tp__media video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; }
.tp__split { display: grid; grid-template-columns: minmax(0, 580fr) minmax(0, 680fr); column-gap: 8.125rem; align-items: start; margin-top: 4.375rem; }
.tp__split + .tp__split, .tp__block + .tp__split, .tp__split + .tp__block { margin-top: var(--sp-90); }
.tp__block { margin-top: var(--sp-90); }
.tp [id] { scroll-margin-top: 5rem; } /* переход по якорю (меню «Контакты» → #kontakty): заголовок не под липкой шапкой 56/52 */
.tp__h2 { color: var(--title); font: 500 3rem/1.208 var(--font); }
.tp__h3 { color: var(--title); font: 500 1.75rem/1.357 var(--font); }
.tp__text { margin-top: 0.625rem; color: var(--text); font: 500 1rem/1.6 var(--font); }
.tp__text p + p { margin-top: 1.25rem; }
.tp__text a { color: var(--ink); transition: color .25s; }
.tp__contacts p + p { margin-top: 0.5rem; }
.tp__col > .btn { margin-top: 1.875rem; }
.tp__facts { margin: 0; }
.tp__fact { display: flex; align-items: center; justify-content: space-between; gap: 1.875rem; min-height: 8.125rem; border-top: 1px solid var(--hair); }
.tp__fact:last-child { border-bottom: 1px solid var(--hair); }
.tp__fact dt { color: var(--title); font: 500 1.75rem/1.357 var(--font); }
.tp__fact dd { margin: 0; color: var(--olive); font: 500 3rem/1.208 var(--font); white-space: nowrap; }
.tp__note { color: var(--muted); font: 500 1rem/1.6 var(--font); }
.tp__note--after { margin-top: 1.875rem; color: var(--ink); }
.tp__deps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: 1.25rem 0 0; padding: 0; list-style: none; }
.tp__dep { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.875rem; background: var(--card-bg); }
.tp__dep-name { color: var(--muted); font: 500 1rem/1.6 var(--font); }
.tp__dep-tel { color: var(--title); font: 500 1.75rem/1.357 var(--font); white-space: nowrap; transition: color .25s; }
.tp__table { width: 100%; margin-top: 1.875rem; border-collapse: collapse; font: 500 1rem/1.6 var(--font); }
.tp__table tr { border-top: 1px solid var(--hair); }
.tp__table tr:last-child { border-bottom: 1px solid var(--hair); }
.tp__fact dt::first-letter { text-transform: uppercase; } /* подписи цифр — с большой буквы, и введённые в CRM тоже (Павлон 20.10) */
/* Города доставки без графика — сеткой в колонки с линиями, как строки таблицы (Павлон 20.10) */
.tp__cities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); margin: 1.875rem 0 0; padding: 0; list-style: none; color: var(--ink); font: 500 1.375rem/1.5 var(--font); /* 22, как строки окна выбора города */ }
.tp__cities li { padding: 1.125rem 0; border-bottom: 1px solid var(--hair); }
.tp__cities li:nth-child(-n + 4) { border-top: 1px solid var(--hair); }
.cab__pages { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.pd__desc { margin-top: 1.875rem; font: 400 1rem/1.6 var(--font); }
.tp__table th { width: 40%; padding: 1rem 1.875rem 1rem 0; color: var(--ink); font-weight: 500; text-align: left; vertical-align: top; }
.tp__table td { padding: 1rem 0; color: var(--text); }
.tp__card { padding: 2.5rem; background: var(--card-bg); }
.tp__card .tp__text { margin-top: 1rem; }
.tp__split:has(> .tp__card) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
@media (hover: hover) { .tp__text a:hover, .tp__dep-tel:hover { color: var(--olive); } }
@media (max-width: 1259px) {
  .tp__split { column-gap: 3.75rem; }
  .tp__dep-tel { font-size: 1.375rem; }
}
@media (max-width: 1023px) {
  .tp__slogan { font-size: 3rem; }
  .tp__slogan--md { font-size: 2.25rem; }
  .tp__split, .tp__split:has(> .tp__card) { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-40); }
  .tp__cities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tp__cities li:nth-child(n) { border-top: 0; }
  .tp__cities li:nth-child(-n + 3) { border-top: 1px solid var(--hair); }
}
@media (max-width: 767px) {
  .tp { padding-top: 1.5rem; padding-bottom: 3.75rem; }
  .tp__slogan { margin-top: 1.5rem; font-size: 2rem; line-height: 1.3125; }
  .tp__slogan--md { font-size: 1.5rem; line-height: 1.417; }
  .tp__split { margin-top: var(--sp-40); }
  .tp__split + .tp__split, .tp__block + .tp__split, .tp__split + .tp__block, .tp__block { margin-top: 3.75rem; }
  .tp__h2 { font-size: 1.75rem; line-height: 1.357; }
  .tp__h3 { font-size: 1.25rem; line-height: 1.5; }
  .tp__fact { min-height: 0; padding-block: 1.25rem; }
  .tp__fact dt { font-size: 1.25rem; line-height: 1.5; }
  .tp__fact dd { font-size: 1.75rem; line-height: 1.357; }
  .tp__deps { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .tp__dep { padding: 1.25rem; }
  .tp__table th, .tp__table td { display: block; width: auto; padding: 0; }
  .tp__table th { padding-top: 0.875rem; }
  .tp__cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp__cities { font-size: 1.0625rem; } /* 17: «Набережные Челны» в половину ширины 375 */
  .tp__cities li { padding-block: 0.875rem; }
  .tp__cities li:nth-child(n) { border-top: 0; }
  .tp__cities li:nth-child(-n + 2) { border-top: 1px solid var(--hair); }
  .tp__table td { padding-bottom: 0.875rem; }
  /* Строка только с городом (без графика) — отступ снизу у самого th */
  .tp__table th:last-child { padding-bottom: 0.875rem; }
  .tp__card { padding: 1.5625rem; }
}

/* Плашка рубрики: прописные у Onest сидят выше центра строки (замер рендера 09.10: сверху 7, снизу 9) — поле 2px сверху
   и строка на 2px короче опускают текст на 1px при той же высоте 25.6. */
/* ---- Новости (Павлон 09.10): лента главной (3 в кадре, всего 7), сетка /novosti, статья /novosti/{slug}.
   Детали — Woodmart «Blog» (замер 09.10): фото 3:2 (320×213), белый квадрат даты 53×53 в 15 от угла, рубрика 12.8/600
   капсом белым на оливе (поля 0 10, высота 25.6); заголовок 22/30.8 — их заголовок секции товара. */
.rail--news { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); } /* ровно 3 в кадре, 1440: 443 — как баннеры; % сетки — от ширины БЕЗ полей, поля не вычитать */
/* Заглушка вместо фото: роза логотипа серым и бледно — «фото ещё нет», а не цветное пятно */
.news__ph { position: relative; display: block; width: 100%; height: 100%; background: var(--card-bg); }
.news__ph::after { content: ""; position: absolute; inset: 0; background: url(../img/favicon-astragreen.png) center / 3.5rem no-repeat; filter: grayscale(1); opacity: .22; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 1.875rem; }
.post__tag { padding: 2px 0.625rem 0; background: var(--olive); color: var(--white); font: 600 0.8rem/calc(1.6rem - 2px) var(--font); text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 1023px) {
  .rail--news { grid-auto-columns: calc((100% - var(--gap)) / 2); }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .rail--news { grid-auto-columns: 85%; padding-inline: var(--pad); } /* одна в кадре вровень с заголовком (поле 15, как «Популярные»), край следующей виден — листается */
  .news-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

/* ---- Статья новости /novosti/{slug}: по центру, как пост Woodmart (замер 09.10) — рубрика, H1 и дата по центру,
   фото 3:2 шириной 1035 (у них 1035×690), текст колонкой 760: абзацы 16/25.6 через 20, подзаголовки 22/30.8,
   цитата — карточка #e7e5d9 с кавычками 32 (как «О компании» на главной). H1 — 36, как заголовки наших страниц (у них 28). */
.post { margin-top: var(--sp-40); }
.post__head { display: flex; flex-direction: column; align-items: center; max-width: 55.375rem; margin-inline: auto; text-align: center; }
.post__title { margin-top: 1rem; color: var(--title); font: 500 2.25rem/1.2 var(--font); }
.post__meta { margin-top: 0.75rem; color: var(--muted); font: 500 1rem/1.6 var(--font); }
.post__media { position: relative; max-width: 64.6875rem; aspect-ratio: 3 / 2; overflow: hidden; margin: 2.5rem auto 0; background: var(--card-bg); }
.post__media img, .post__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post__body { max-width: 47.5rem; margin: 3.125rem auto 0; color: var(--text); font: 500 1rem/1.6 var(--font); }
.post__body > * + * { margin-top: 1.25rem; }
.post__lead { color: var(--title); font-size: 1.25rem; line-height: 1.6; }
.post__body h2 { margin-top: 2.5rem; color: var(--title); font: 500 1.375rem/1.4 var(--font); }
.post__body h2 + * { margin-top: 0.75rem; }
.post__body ul, .post__body ol { padding-left: 1.25rem; }
.post__body li + li { margin-top: 0.5rem; }
.post__body li::marker { color: var(--olive); }
.post__body a { color: var(--olive); text-decoration: underline; text-underline-offset: 3px; }
.post__body strong, .post__body b { color: var(--ink); font-weight: 600; }
.post__body blockquote { position: relative; margin: 2.5rem 0; padding: 2.5rem 2.5rem 2.5rem 6rem; background: var(--card-bg); }
.post__body blockquote::before { content: ""; position: absolute; left: 2.5rem; top: 2.5rem; width: 2rem; height: 2rem; background: var(--olive); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Cpath d=%27M4 26V16C4 9.4 7.6 5.6 13 5v4.4c-3 .8-4.4 3-4.6 6.6H13v10Zm15 0V16c0-6.6 3.6-10.4 9-11v4.4c-3 .8-4.4 3-4.6 6.6H28v10Z%27/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Cpath d=%27M4 26V16C4 9.4 7.6 5.6 13 5v4.4c-3 .8-4.4 3-4.6 6.6H13v10Zm15 0V16c0-6.6 3.6-10.4 9-11v4.4c-3 .8-4.4 3-4.6 6.6H28v10Z%27/%3E%3C/svg%3E") center / contain no-repeat; }
.post__body blockquote p { color: var(--title); font: 500 1.75rem/1.357 var(--font); }
@media (max-width: 767px) {
  .post__title { font-size: 1.5rem; line-height: 1.3; }
  .post__media { margin-top: 1.5rem; }
  .post__body { margin-top: 1.875rem; }
  .post__lead { font-size: 1.125rem; }
  .post__body blockquote { padding: 4.25rem 1.5625rem 1.5625rem; }
  .post__body blockquote::before { left: 1.5625rem; top: 1.5625rem; }
  .post__body blockquote p { font-size: 1.25rem; line-height: 1.5; }
}
/* Заголовок «Новости» с оливковой чертой снизу — как «Our articles» у Woodmart (замер 09.10, 1440 и 375 одинаково):
   заголовок → 30 → черта 2px во всю ширину контейнера → 40 → карточки. Черта — между полями контейнера (рамка ушла бы в край окна) */
.section--news .section__head { position: relative; padding-bottom: 1.875rem; margin-bottom: 2.5rem; }
.section--news .section__head::after { content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: 2px; background: var(--olive); }

/* ---- Карточка новости — залитый блок (Павлон 09.10, по примеру «Блог, Люди, События»): сверху дата и рубрика,
   ниже картинка/видео (если есть), внизу заголовок без анонса. Пример 594 шир. — у нас 443: поле 30, картинка 1.63:1 через 28,
   высота по пропорции примера 594:622 (у всех одна — заголовок прижат книзу). Вся карточка — ссылка (растянутый заголовок).
   Углы прямые, как все блоки сайта (у примера скругление 20). */
.news { position: relative; display: flex; flex-direction: column; min-width: 0; width: 100%; /* у элемента сетки с пропорцией ширина иначе считается от высоты: на 320 текст вытягивал карточку на +32 */ aspect-ratio: 594 / 622; align-self: stretch; /* с пропорцией сетка не растягивает сама — высоты в ряду разъезжались */ padding: 1.875rem; background: var(--card-bg); transition: background-color .25s; }
.news[hidden] { display: none; }
.news__top { display: flex; align-items: baseline; gap: 2rem; color: var(--ink); font: 500 0.875rem/1.4 var(--font); font-variant-numeric: tabular-nums; }
.news__tag { font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .04em; }
.news__img { position: relative; aspect-ratio: 530 / 326; overflow: hidden; margin-top: 1.75rem; background: var(--bg); }
.news__img img, .news__img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* без приближения при наведении: видео под ним дрожало (Павлон 20.10) */
.news__title { margin-top: auto; padding-top: 1.5rem; color: var(--title); font: 500 1.5rem/1.333 var(--font); }
.news__title a { color: inherit; transition: color .25s; }
.news__title a::after { content: ""; position: absolute; inset: 0; } /* вся карточка — ссылка */
@media (hover: hover) { .news:hover .news__title a { color: var(--olive); } }
.news-tab:focus-visible, .news__title a:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
/* Заголовок ленты — переключатель рубрик: выбранное слово тёмное, прочие серые (у примера крупно; у нас 48 — шкала tp__h2) */
.news-head { color: var(--title); font: 500 3rem/1.2 var(--font); }
.news-head > span { color: var(--muted); } /* запятые между рубриками */
.news-tab { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; transition: color .25s; }
.news-tab[aria-pressed="true"] { color: var(--title); cursor: default; }
@media (hover: hover) { .news-tab[aria-pressed="false"]:hover { color: var(--olive); } }
@media (max-width: 767px) {
  .news { padding: 1.25rem; }
  .news__img { margin-top: 1.25rem; }
  .news__title { padding-top: 1.25rem; font-size: 1.25rem; line-height: 1.4; }
  .news-head { font-size: 1.75rem; line-height: 1.3; }
  .news-head .news-tab:first-child { display: block; } /* «Все новости»: «Новости» первой строкой, рубрики второй (Павлон 09.10) */
  .news-head .news-tab:first-child + span { display: none; }
}

/* Листалка под статьёй (Павлон 09.10, вместо «Других новостей»): колонкой текста 760, черта сверху; слева предыдущая (старее),
   справа следующая (новее), под ними кнопка «Все новости» на всю ширину. Подпись 14 серым, заголовок соседа 18 — до 2 строк */
.post__pager { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: start; gap: 1.875rem; max-width: 47.5rem; margin: 3.125rem auto 0; padding-top: 1.875rem; border-top: 1px solid var(--hair); }
.post__pg { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; color: var(--title); }
.post__pg--next { text-align: right; align-items: flex-end; }
.post__pg-dir { color: var(--muted); font: 500 0.875rem/1.4 var(--font); }
.post__pg-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 500 1.125rem/1.4 var(--font); transition: color .25s; }
.post__pg-sep { align-self: stretch; background: var(--hair); } /* вертикальная черта ровно посередине, по 30 с каждой стороны (Павлон 09.10); у крайних новостей сосед один — черты нет */
.post__pg-sep[hidden] { display: block; visibility: hidden; }
/* от кнопки до черты подвала — 95 вместо 190 (Павлон 09.10): нижнее поле страницы 0, отступ подвала 95 */
main.tp:has(.post__pager) { padding-bottom: 0; }
body:has(.post__pager) .footer { margin-top: 5.9375rem; }
.post__pg-all { grid-column: 1 / -1; width: 100%; justify-content: center; } /* «Все новости» — кнопка сайта на всю ширину колонки, под соседями (Павлон 09.10) */
.news-head--page { margin-top: 1.25rem; }
@media (hover: hover) { .post__pg:hover .post__pg-t { color: var(--olive); } }
@media (max-width: 767px) {
  .post__pager { column-gap: 1.25rem; row-gap: 1.25rem; margin-top: 2.5rem; }
  .post__pg-t { display: block; font-size: 1rem; -webkit-line-clamp: unset; } /* колонки узкие — заголовок целиком, без обрезки на 2-й строке */
}

/* ---------- Поиск (Astragreen 09.10): панель сверху, как у их сайта, и страница /poisk ---------- */
.srch { position: fixed; inset: 0; z-index: 105; } /* выше нижней панели телефона и шапки, как меню (100) */
.srch__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .25s; }
.srch__panel { position: relative; max-height: 100%; overflow-y: auto; background: var(--bg); border-bottom: 2px solid var(--olive); transform: translateY(-1rem); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.srch.is-open .srch__backdrop { opacity: 1; }
.srch.is-open .srch__panel { transform: none; opacity: 1; }
.srch__form { display: flex; align-items: center; gap: 0.875rem; min-height: 5.625rem; border-bottom: 1px solid var(--hair); color: var(--title); }
.srch__input { flex: 1; min-width: 0; height: 3rem; padding: 0; border: 0; background: none; color: var(--title); font: 400 1.375rem/1.2 var(--font); outline: none; }
.srch__input::placeholder { color: var(--muted); }
.srch__close { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border: 0; background: none; color: var(--title); cursor: pointer; }
.srch__res { padding: 1.5rem 0 2rem; }
.srch__note { margin: 0 0 0.75rem; color: var(--muted); font: 400 0.875rem/1.4 var(--font); }
.srch__chips, .poisk__kinds { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.srch__chips .chip, .poisk__kinds .chip { height: 2.5rem; padding: 0 1rem; background: var(--form-bg); font-size: 0.9375rem; }
.srch__chips .chip:hover, .poisk__kinds .chip:hover { color: var(--olive); }
.srch__empty { margin: 0 0 1.25rem; color: var(--ink); font: 400 1rem/1.5 var(--font); }
.srch__empty a { color: var(--olive); white-space: nowrap; }
.srch__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); margin: 0; padding: 0; list-style: none; }
.srch__item { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 1rem; align-items: center; padding: 0.625rem 0; border-bottom: 1px solid var(--hair); color: var(--title); }
.srch__item img { grid-row: 1 / 3; width: 3.5rem; height: 3.5rem; object-fit: cover; background: var(--white); }
.srch__t { align-self: end; overflow: hidden; font: 500 0.9375rem/1.35 var(--font); white-space: nowrap; text-overflow: ellipsis; }
.srch__m { align-self: start; color: var(--muted); font: 400 0.8125rem/1.35 var(--font); }
.srch__p { grid-column: 3; grid-row: 1 / 3; color: var(--title); font: 500 0.9375rem/1 var(--font); white-space: nowrap; }
.srch__p--guest { color: var(--muted); font-weight: 400; font-size: 0.8125rem; }
.srch__item:hover .srch__t { color: var(--olive); }
.srch__all { display: inline-block; margin-top: 1.25rem; color: var(--olive); font: 500 1rem/1.4 var(--font); text-decoration: underline; text-underline-offset: 0.25rem; }
.srch__form--page { min-height: 4rem; margin: 1.5rem 0; padding: 0 0 0 1rem; background: var(--white); border: 0; }
.srch__form--page .srch__input { font-size: 1.125rem; }
.srch__form--page .btn { align-self: stretch; height: auto; }
.poisk__count { margin: 0 0 2rem; color: var(--muted); font: 400 0.9375rem/1.5 var(--font); }
.poisk__empty { margin: 0 0 1.5rem; }
.poisk__empty-title { margin: 0 0 0.5rem; color: var(--title); font: 500 1.5rem/1.3 var(--font); }
.poisk__empty a { color: var(--olive); }
.poisk { padding-bottom: var(--sp-100); }
@media (max-width: 1023px) {
  .srch__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .header__tools .header__icon.js-search-open { display: grid; } /* на телефоне значок поиска остаётся в шапке рядом с корзиной */
  .srch__form { min-height: 3.75rem; gap: 0.625rem; }
  .srch__input { font-size: 1rem; } /* 16 — меньше iOS увеличивает страницу при фокусе */
  .srch__res { padding: 1rem 0 1.5rem; }
  .srch__item { grid-template-columns: 3rem minmax(0, 1fr); column-gap: 0.75rem; }
  .srch__item img { width: 3rem; height: 3rem; }
  .srch__p { grid-column: 2; grid-row: auto; margin-top: 0.25rem; font-size: 0.875rem; }
  .srch__t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .srch__form--page { padding-left: 0.75rem; }
  .srch__form--page .btn { padding-inline: 1rem; }
  .poisk__empty-title { font-size: 1.25rem; }
}

/* ---------- Корзина и оформление (Astragreen 09.10): скидка контрагента, минимальная сумма, бронь — как у их корзины ---------- */
.btn--line { background: none; color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.btn--line:hover { background: var(--form-bg); }
.btn.is-off, .btn:disabled { background: var(--hair); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.ctot__val--disc { color: var(--olive); }
.ctot__min { margin: 1rem 0 0; padding: 0.75rem 1rem; background: var(--form-bg); color: var(--ink); font: 400 0.875rem/1.45 var(--font); }
.ctot__min b { color: var(--title); white-space: nowrap; }
.ctot__hint { margin: 0.625rem 0 0; color: var(--muted); font: 400 0.8125rem/1.45 var(--font); }
.cartp__done { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; max-width: 36rem; margin: 0 auto; padding: 4rem 0 3rem; color: var(--text); text-align: center; }
.cartp__done svg { color: var(--olive); }
.cartp__done-title { margin: 0.5rem 0 0; color: var(--title); font: 500 1.75rem/1.3 var(--font); }
.cartp__done p { margin: 0; font: 400 1rem/1.5 var(--font); }
.cartp__left { color: var(--text); font: 400 0.9375rem/1.5 var(--font); } /* отсчёт брони (Павлон 10.10: 30 минут) */
.cartp__left b { color: var(--title); font-weight: 600; font-variant-numeric: tabular-nums; }
.cartp__left.is-low b { color: #d63d22; } /* меньше 5 минут — цвет ошибки форм */
.cartp__done-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1rem; }
.osum__row--disc span:last-child { color: var(--olive); }
.osum__min { margin: 0.75rem 0 0; padding: 0.75rem 1rem; background: var(--form-bg); color: var(--ink); font: 400 0.875rem/1.45 var(--font); }
.osum__min a { color: var(--olive); text-decoration: underline; }

/* ---------- Избранное (11.10) ---------- */
.card__fav[aria-pressed="true"] { opacity: 1; visibility: visible; transform: none; background: var(--hot); color: var(--white); --heart-fill: currentColor; --heart-stroke: 0; } /* поставленное сердечко не прячется и меняется цветами */
@media (hover: hover) { .card__fav[aria-pressed="true"]:hover { background: var(--hot-h); color: var(--white); } }
.pd__fav.is-on { color: var(--hot); }
.header__fav, .tabbar__fav { position: relative; }
.fav-count { position: absolute; top: 0.125rem; right: 0; min-width: 1rem; height: 1rem; padding: 0 0.25rem; border-radius: 0.5rem; background: var(--hot); color: var(--white); font: 600 0.625rem/1rem var(--font); text-align: center; }
@media (max-width: 767px) { .tabbar__fav .fav-count { top: -0.125rem; right: calc(50% - 1.25rem); } }
.izb__top { display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 2.5rem; } /* под заголовком — как зазор между рядами карточек (Павлон 11.10) */
@media (max-width: 767px) { .izb__top { margin-bottom: 1.5rem; } }
.izb__count { color: var(--muted); font: 500 1rem/1.5 var(--font); }
.izb__empty { max-width: 34rem; margin: 2rem 0 0; color: var(--text); font: 400 1.0625rem/1.6 var(--font); }
.izb__empty .chip { margin: 0.5rem 0.5rem 0 0; }

/* ---------- Корзина по отгрузкам (Павлон 11.10): «Со склада» / «Поставка дд.мм» — блоки в боковой корзине, на странице корзины и в «Ваш заказ».
   Шапка отгрузки — .sgrp: слева метка (поставка — та же лаймовая плашка, что на карточке), справа сумма или пояснение */
.sgrp { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.sgrp__tag { padding: 0.3125rem 0.625rem; background: var(--white); color: var(--title); font: 600 0.75rem/0.9rem var(--font); white-space: nowrap; } /* как .card__label — белая плашка рядом с лаймовой «Поставка» */
.sgrp__sum { color: var(--olive); font: 600 0.9375rem/1.4 var(--font); }
.sgrp__note { color: var(--muted); font: 400 0.8125rem/1.4 var(--font); text-align: right; }
.sgrp__line { display: flex; justify-content: space-between; gap: 1rem; color: var(--title); font: 500 1rem/1.4 var(--font); }
.sgrp__line b { color: var(--olive); font-weight: 600; }
.sgrp__min { margin: 0.625rem 0 0; color: var(--ink); font: 400 0.875rem/1.45 var(--font); }
.sgrp__min b { color: var(--title); white-space: nowrap; }
.cside__ul { margin: 0; padding: 0; list-style: none; }
.cside__grp { padding: 0.75rem 0.9375rem; background: var(--form-bg); border-bottom: 1px solid var(--hair); }
.cside__note { padding: 0 0.9375rem 0.9375rem; color: var(--text); font: 400 0.875rem/1.45 var(--font); }
.ctable__grp td { padding: 1rem 0 0.75rem; }
.ctable__gsum td { padding: 1rem 0 1.5rem; }
.ctable__grp + .ctable__row td { border-top: 0; }
.osum__grp { margin-top: 1.125rem; padding: 0.5rem 0.75rem; background: var(--form-bg); }
.osum__grp + .osum__list { margin-top: 0.875rem; }
.osum__gsum { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px dashed var(--hair); color: var(--title); font: 500 0.9375rem/1.4 var(--font); }
.osum__gsum b { color: var(--olive); font-weight: 600; }
.osum__note { margin: 0.625rem 0 0; color: var(--muted); font: 400 0.8125rem/1.45 var(--font); }
.chk__wcap { margin: 0 0 0.5rem; color: var(--title); font: 500 0.9375rem/1.4 var(--font); }
.chk__sups { display: grid; gap: 0.625rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.chk__sups li { display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem; padding: 0.875rem 1rem; background: var(--form-bg); color: var(--text); font: 400 0.9375rem/1.45 var(--font); }
.chk__sups b { color: var(--title); font-weight: 600; }
.chk__orders { display: grid; gap: 0.375rem; margin: 0.75rem 0; padding: 0; list-style: none; color: var(--text); font: 400 1rem/1.5 var(--font); }
.chk__orders b { color: var(--title); }
.osum__min b { font-weight: 600; white-space: nowrap; }
.cside__note b { color: var(--title); font-weight: 600; white-space: nowrap; }

/* Новостей в CRM нет — строка на всю ширину сетки */
.news-empty { grid-column: 1 / -1; }

/* Пустой отдел: надпись на всю ширину сетки каталога */
.catalog__none { grid-column: 1 / -1; padding: 48px 0; text-align: center; color: var(--muted, #6b6b6b); }