/*
 * LOVE-PIANO — базовые токены, типографика, шапка и подвал.
 *
 * Источник — 20 макетов LOVE-PIANO/design/*.dc.html (см. README.md там же).
 * :root ниже — те же 13 переменных, что в блоке :root каждого макета
 * (проверено посимвольно на всех 20 файлах).
 *
 * ВАЖНО про респонсив. В макетах адаптив местами цеплялся за подстроку
 * в атрибуте style, например [style*="gap: 28px"] — сработало это
 * только в прототипе (см. README задачи), потому что пробелы в такой
 * строке — след нормализации инлайн-стиля React'ом при сериализации;
 * в исходной статической разметке, которую отдаёт этот движок, их нет,
 * и такие селекторы молча ничего не находят. Здесь адаптив только на
 * классах. Полный список того, что было заменено — в отчёте
 * .superpowers/sdd/verstka-karkas-report.md.
 */

:root {
  --coral: #de191a;
  --coral-d: #b81214;
  --coral-wash: #fbe8e8;
  --ink: #1d1d1f;
  --muted: #6b6b73;
  --faint: #9a9aa2;
  --line: #e6e1d7;
  --bg: #ffffff;
  --soft: #f4f1ea;
  --soft2: #ebe6dc;
  --green: #2fa15c;
  --green-wash: #e8f5ee;
  --gold: #f5a623;
}

/* ===== Шрифт Manrope — самохостинг =====
 *
 * Раньше шрифт тянулся с fonts.googleapis.com/fonts.gstatic.com (см. git-
 * историю Assets::fontLink()). Для российского сайта внешняя зависимость
 * от Google нежелательна — решение владельца. Файлы лежат локально в
 * public/assets/fonts/ (woff2, статические инстансы официального
 * переменного Manrope[wght].ttf из репозитория google/fonts, лицензия
 * SIL Open Font License — см. public/assets/fonts/OFL.txt). В каждом
 * файле есть кириллица (проверено по cmap при сборке).
 *
 * Путь ../fonts/... — относительно этого файла (public/assets/css/
 * styles.css), см. public/assets/fonts/.
 */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-400.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/manrope-500.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-600.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-700.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/manrope-800.woff2") format("woff2");
}

/* ===== Сброс и базовая типографика ===== */

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

/* Атрибут hidden обязан скрывать элемент даже при классе с display (напр.
   .btn{display:inline-flex} иначе перебивает [hidden] по специфичности —
   ломало скрытие кнопок мастера квиза). */
[hidden] { display: none !important; }

/* Скрытые панели мега-меню (absolute, visibility:hidden) у правых пунктов
   вылезают на ~10px за вьюпорт и создают горизонтальный скролл страницы.
   clip (не hidden!) режет заэкранный хвост, не превращая html в
   скролл-контейнер — выпадашки и sticky-шапка работают как раньше. */
html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* Страховка для full-bleed секций (см. .quiz-band): их разворот на всю
     ширину вьюпорта на системах с классической полосой прокрутки может
     дать лишние пиксели по горизонтали. clip (а не hidden) обрезает их,
     не создавая контейнер прокрутки и не ломая position:sticky у шапки. */
  overflow-x: clip;
}

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

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--coral); }

button { font-family: inherit; }

.wrap { max-width: 1340px; margin: 0 auto; padding: 0 40px; }

.eb {
  font: 700 11px/1 "Manrope", sans-serif;
  text-transform: uppercase;
  letter-spacing: .09em;
}

/* ===== Общие компоненты ===== */

.btn {
  border: 0;
  border-radius: 12px;
  /* Базовый padding — страховка: в макетах у каждой кнопки размер задан
     inline, при переносе в шаблоны он легко теряется (кнопка схлопывалась
     в таблетку меньше собственного текста). Контекстные правила и
     inline-стили перекрывают. */
  padding: 13px 26px;
  font: 700 15px "Manrope", sans-serif;
  cursor: pointer;
  transition: background .18s, transform .18s, box-shadow .18s, border-color .18s, color .18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-coral { background: var(--coral); color: #fff; box-shadow: 0 6px 18px rgba(222, 25, 26, .24); }
/* color в hover задан явно: кнопки часто <a>, и глобальный a:hover красил
   текст в коралловый — на коралловой кнопке надпись почти исчезала. */
.btn-coral:hover { background: var(--coral-d); transform: translateY(-1px); color: #fff; }
.btn-out { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.btn-out:hover { border-color: var(--ink); color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }

/* Таблетка-телефон в CTA-полосах. Phone::link() умеет передать только
   класс (не inline-style, как в макетах) — мокапные размеры вынесены в
   классы: -sm — hero/внутренние полосы (Услуги/Гарантия/Доставка,
   15-16px/26-28px, f15-16 → усреднено), без суффикса — финальные полосы
   «Остались вопросы…» (16px/30px, f19 одинаково во всех макетах). */
.cta-phone { padding: 16px 30px; font-size: 19px; }
.cta-phone-sm { padding: 15px 28px; font-size: 16px; }

.icobtn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--soft);
  color: var(--ink);
  cursor: pointer;
  transition: background .18s, color .18s;
}
.icobtn:hover { background: var(--coral-wash); color: var(--coral); }
/* Счётчик на иконке шапки (избранное/сравнение/корзина) */
.icobtn { position: relative; }
.icobtn-count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  padding: 0 5px; box-sizing: border-box; border-radius: 999px;
  background: var(--coral); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 18px; text-align: center; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.icobtn-count[hidden] { display: none; }
.icobtn.is-bump { animation: icobump .32s ease; }
@keyframes icobump { 0%, 100% { transform: none; } 40% { transform: scale(1.25); } }
/* Точка, «улетающая» от кнопки к иконке при добавлении */
.lp-fly {
  position: fixed; z-index: 2000; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--coral); pointer-events: none;
  box-shadow: 0 2px 10px rgba(222, 25, 26, .5);
  transition: transform .6s cubic-bezier(.5, -.2, .3, 1.2), opacity .6s ease;
}
@media (prefers-reduced-motion: reduce) { .lp-fly { display: none; } .icobtn.is-bump { animation: none; } }

.lpnav a { color: var(--ink); font-weight: 600; }
.lpnav a:hover { color: var(--coral); }
.lpnav-top { display: flex; gap: 22px; margin-left: auto; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.lpnav-foot { display: grid; grid-template-columns: repeat(3, auto); gap: 10px 40px; font-size: 14px; }
.lpnav-foot a { color: rgba(255, 255, 255, .8); }

.cityp { position: relative; display: inline-flex; }
.cityp-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
}
.cityp-trigger:hover { color: var(--coral); }
.cityp-trigger[aria-expanded="true"] { color: var(--coral); }
/* Выпадашка выбора города в шапке; поля ввода/списка переиспользуют
   .pdcity-input/.pdcity-list из карточки. Координаты (fixed по триггеру)
   выставляет city-select.js — CSS задаёт только вид панели.
   z-index ВЫШЕ .hdr-main (100): триггер в топбаре, а панель раскрывается
   поверх липкой части шапки — с меньшим z она рисовалась ПОД ней (у окон
   пониже шириной из панели торчали только нижние пункты). Ниже видео-
   модалки (400) и прочих оверлеев (1000+). */
.cityp-dropdown {
  position: fixed; z-index: 300;
  width: 240px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 14px 34px rgba(29, 29, 31, .16); padding: 8px;
}
.cityp-dropdown[hidden] { display: none; }

/* ===== Хлебные крошки ===== */

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #b3b0a8;
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
}
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs a { display: inline-flex; align-items: center; gap: 5px; color: #b3b0a8; }
.crumbs a:hover { color: var(--coral); }
.crumbs .crumbs-sep { color: #d9d5cc; }
.crumbs .crumbs-current { color: var(--muted); font-weight: 500; }

/* ===== Контейнер основного контента ===== */

.page-main { padding-top: 14px; padding-bottom: 56px; min-height: 320px; }

.page-title {
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -.02em;
  margin: 0;
}

/* ===== Шапка ===== */

.lp-header { position: relative; }

.topbar-outer { border-bottom: 1px solid var(--line); font-size: 12.5px; }
.topbar {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.topbar-slogan { color: var(--muted); }

.hdr-main {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  /* Выше любых поднятых блоков контента (например, .pddelivery z-20 с
     выпадашкой города): иначе открытое мега-меню каталога уходит ПОД них.
     Ниже модалок (1000+) и мобильного меню (5000). */
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
}
.hdrmid {
  padding-top: 18px;
  padding-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
}

.mburger {
  display: none;
  width: 48px;
  height: 52px;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
  flex: none;
}

.mlogo { flex: none; }
.mlogo-full { height: 36px; width: auto; }
.mlogo-mark { display: none; height: 30px; width: auto; }

/* Как в макете (design/Главная.dc.html: .searchwrap style="flex:1;min-width:0"):
   поиск растягивается на всё свободное место ряда, прижимая телефон и
   кнопку «Заказать звонок» к правому краю. max-width здесь ломал это —
   оставлял мёртвое место справа, и кнопка не доходила до края. */
.searchwrap { flex: 1 1 auto; min-width: 0; display: flex; gap: 10px; align-items: center; }
.searchbox { flex: 1; min-width: 0; position: relative; }
.searchbox input {
  width: 100%;
  height: 54px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 0 50px 0 22px;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  outline: none;
}
.searchgo { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; padding: 8px; border: none; background: none; cursor: pointer; color: inherit; }
.searchgo svg { display: block; }

.micons { display: none; align-items: center; gap: 4px; flex: none; }

.mphone {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--coral);
  align-items: center;
  justify-content: center;
  flex: none;
}

.deskphone { flex: none; text-align: right; }
.deskphone a { font-weight: 800; font-size: 23px; letter-spacing: -.01em; white-space: nowrap; }
.deskphone-sub { font-size: 12px; color: var(--muted); }
.deskphone-hours { font-size: 12px; color: var(--faint); }

.deskcall { flex: none; padding: 17px 28px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; border-radius: 14px; white-space: nowrap; }

.catrow { border-top: 1px solid var(--line); }
.catrow-inner { display: flex; align-items: stretch; }
/* Ряд категорий как в макете (catalog-nav.js): один ряд без переноса,
   при нехватке ширины — горизонтальная прокрутка без видимой полосы
   (в макете overflow-x:auto), а не flex-wrap на вторую строку. Между
   пунктами — вертикальный разделитель border-right (кроме последнего),
   пункты вплотную (без gap), padding/размер шрифта — из макета. */
.catnav { flex: 1; min-width: 0; display: flex; align-items: stretch; overflow-x: auto; overflow-y: visible; scrollbar-width: none; }
.catnav::-webkit-scrollbar { display: none; }
.catnav-item { position: relative; display: flex; align-items: stretch; }
.catnav-link { display: block; padding: 16px 24px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.catnav-item:not(:last-child) .catnav-link { border-right: 1px solid var(--line); }
.catnav-link:hover { color: var(--coral); }

/* Мега-меню каталога — панель с брендами/подкатегориями выпадает под
   разделом при наведении. Только на широком десктопе (≥1180px): там ряд
   разделов помещается без горизонтального скролла, поэтому catnav можно
   сделать overflow:visible и панель не обрезается. Ниже catnav скроллится,
   панель скрыта (навигация — клик по разделу); на мобиле — drawer. */
.catmega { display: none; }
@media (min-width: 1180px) {
  .catnav { overflow: visible; }
  .catmega {
    display: block;
    position: absolute; top: 100%; left: 0; z-index: 60;
    background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--coral);
    border-radius: 0 0 14px 14px; box-shadow: 0 22px 44px rgba(29, 29, 31, .16);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .catnav-item:hover > .catmega,
  .catnav-item:focus-within > .catmega { opacity: 1; visibility: visible; transform: translateY(0); }
  /* Правые разделы — панель прижата вправо, чтобы не уезжала за экран. */
  .catnav-item:nth-last-child(-n+2) > .catmega { left: auto; right: 0; }
  /* 3 колонки: бренды (всегда) | серии | превью. Серии и превью — только с JS
     (класс .catmega--js от catalog-menu.js); без JS видна колонка брендов. */
  .catmega-inner { display: flex; align-items: stretch; min-height: 300px; }
  .catmega-col { flex: none; padding: 14px 0; }
  .catmega-brands { width: 300px; }
  .catmega-series-col { display: none; width: 244px; border-left: 1px solid var(--line); }
  .catmega-detail { display: none; width: 300px; border-left: 1px solid var(--line); padding: 22px 24px; }
  .catmega--js .catmega-series-col,
  .catmega--js .catmega-detail { display: block; }
  .catmega-head { font-weight: 700; font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); padding: 0 22px 12px; }
  .catmega-all { display: block; padding: 9px 22px; font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; }
  .catmega-all:hover { color: var(--coral); }
  /* Без nowrap: длинные категории аксессуаров («Стойки для цифровых
     пианино и синтезаторов») переносятся, а не вылезают за панель. */
  .catmega-brand-link { display: block; padding: 9px 22px; font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.35; }
  .catmega-brand-link:hover,
  .catmega-brand-link.is-active { color: var(--coral); background: #faf4f4; }
  .catmega-brand-link--series { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .catmega-chev { width: 15px; height: 15px; flex: none; color: var(--faint); }
  .catmega-brand-link.is-active .catmega-chev { color: var(--coral); }
  .catmega-series-link { display: block; padding: 8px 22px; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .catmega-series-link:hover,
  .catmega-series-link.is-active { color: var(--coral); }
  .catmega-series-all { font-weight: 700; color: var(--ink); }
  /* Превью серии (3-я колонка) — фото представительного инструмента, название,
     диапазон цен и краткое описание (наполняет catalog-menu.js). */
  .catmega-detail-photo { width: 100%; height: 190px; border-radius: 12px; overflow: hidden; background: #f4efe6; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; }
  /* 112% + contain: у товарных фото широкие белые поля — лёгкое увеличение
     заполняет бежевый квадрат инструментом, не обрезая его. */
  .catmega-detail-photo img { width: 112%; height: 112%; flex: none; object-fit: contain; mix-blend-mode: multiply; }
  .catmega-detail-name { font-weight: 800; font-size: 18px; line-height: 1.2; color: var(--ink); margin-bottom: 6px; }
  .catmega-detail-price { font-weight: 700; font-size: 14px; color: var(--coral); margin-bottom: 10px; }
  .catmega-detail-desc { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
}
.catrow-icons { display: flex; align-items: center; gap: 4px; padding-left: 14px; flex: none; }
.icodiv { width: 1px; height: 22px; background: var(--line); }

/* ===== Мобильная шапка: чекбокс-drawer ===== */
/* Открытие/закрытие — чистый CSS (input[type=checkbox] + label), без
   единой строчки JS. Это сознательное решение вслед за приёмом из
   исходного mobile-nav.js — там он уже применялся для самого drawer'а;
   здесь распространён и на смену состояния логотипа/поиска, чтобы
   вообще не тащить скрипт ради шапки. */

.mnav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.mnav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 17, .5);
  z-index: 4990;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s;
}
.mnav-toggle:checked ~ .mnav-scrim { opacity: 1; pointer-events: auto; }

.mdrawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 84%;
  max-width: 344px;
  background: #fff;
  z-index: 5000;
  transform: translateX(-100%);
  transition: transform .28s ease;
  overflow-y: auto;
  padding: 22px;
  border-right: 1px solid var(--line);
  visibility: hidden;
}
.mnav-toggle:checked ~ .mdrawer { transform: translateX(0); visibility: visible; }

.mdrawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.mdrawer-head img { height: 30px; width: auto; }
.mdrawer-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.mdrawer-label { color: var(--faint); margin-bottom: 10px; }
.mdrawer-label + .mdrawer-links { margin-bottom: 0; }
.mdrawer-links { display: flex; flex-direction: column; }
.mdlink { padding: 11px 0; font-size: 15.5px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.mdlink:hover { color: var(--coral); }

/* Аккордеон каталога в мобильном меню: раздел → бренды → серии.
   Нативные <details>/<summary>, без JS. Каждый уровень чуть мельче
   и с отступом; шеврон крутится на 180° при раскрытии. */
.mdacc { border-bottom: 1px solid var(--line); }
.mdacc > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.mdacc > summary::-webkit-details-marker { display: none; }
.mdacc > summary.mdlink { border-bottom: 0; }
.mdacc-chev { flex: none; width: 16px; height: 16px; color: var(--faint); transition: transform .2s ease; }
.mdacc[open] > summary > .mdacc-chev { transform: rotate(180deg); }
.mdacc-body { padding-left: 12px; padding-bottom: 6px; }
.mdsub { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; font-size: 14.5px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); }
.mdsub:last-child { border-bottom: 0; }
.mdsub:hover { color: var(--coral); }
.mdsub-all { color: var(--coral); font-weight: 700; }
.mdacc--lvl2 { border-bottom: 1px solid var(--line); }
.mdacc--lvl2:last-child { border-bottom: 0; }
.mdacc--lvl2 > summary.mdsub { border-bottom: 0; }
.mdacc-body--lvl2 { padding-left: 12px; padding-bottom: 4px; }
.mdser { display: block; padding: 8px 0; font-size: 13.5px; color: var(--muted); border-bottom: 1px solid var(--line); }
.mdser:last-child { border-bottom: 0; }
.mdser:hover { color: var(--coral); }
.mdser-all { color: var(--coral); font-weight: 600; }
.mdrawer-foot { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.mdrawer-foot .js-phone { display: inline-block; font-weight: 800; font-size: 22px; color: var(--ink); }
.mdrawer-foot .mdrawer-hours { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.mdrawer-foot .btn { width: 100%; padding: 14px; }

/* ===== Подвал ===== */

.lp-footer { background: var(--ink); color: rgba(255, 255, 255, .7); }
.lp-footer .wrap { padding-top: 44px; padding-bottom: 32px; }
.footrow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.foot-brand img { height: 30px; width: auto; margin-bottom: 12px; filter: brightness(0) invert(1); }
.foot-brand-tag { font-size: 13px; max-width: 260px; }
.foottel { text-align: right; margin-left: auto; }
.foottel .js-phone { font-weight: 800; font-size: 20px; color: #fff; }
.foottel-hours { font-size: 12.5px; margin: 4px 0 10px; }
.foottel-vk { font-size: 13px; color: var(--coral); font-weight: 600; }
.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 18px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .45);
  line-height: 1.7;
}
.foot-legal { display: block; margin-top: 4px; }
.foot-legal a { color: rgba(255, 255, 255, .55); text-decoration: underline; }
.foot-legal a:hover { color: #fff; }

/* ===== Листинг каталога (эталон для 6 каталожных страниц) ===== */
/* Источник — LOVE-PIANO/design/Каталог.dc.html, блоки TOOLBAR, PRODUCT GRID
   и PAGINATION. Сортировка и «показывать по N» — серверные (?sort/?show),
   переключатель плитка/список — клиентский. Сайдбар фильтров (бренд/цена)
   и квиз — следующий инкремент. */

.section-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-top: 14px; }
.section-count { font-size: 15px; color: var(--faint); font-weight: 600; }

/* --- Панель каталога (TOOLBAR макета): сортировка + показ + вид. --- */
.catalog-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; padding: 14px 18px; background: var(--soft); border-radius: 14px; margin: 20px 0 22px; }
.catbar-sort { display: flex; align-items: center; gap: 16px; min-width: 0; overflow-x: auto; scrollbar-width: none; flex: 1; }
.catbar-sort::-webkit-scrollbar { display: none; }
.sortlink { white-space: nowrap; font-size: 14px; color: var(--muted); text-decoration: none; cursor: pointer; }
.sortlink:hover { color: var(--ink); }
.sortlink.is-active { color: var(--ink); font-weight: 700; }
.catbar-right { display: flex; align-items: center; gap: 12px; flex: none; }
.catbar-show-label { font-size: 13px; color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.catbar-show { font-size: 14px; }
.catbar-divider { width: 1px; height: 20px; background: var(--line); }
.catview-btn { width: 38px; height: 38px; background: #fff; border: 1.5px solid var(--line); border-radius: 10px; display: grid; place-items: center; color: var(--muted); cursor: pointer; padding: 0; }
.catview-btn svg { width: 17px; height: 17px; }
.catview-btn.is-active { border-color: var(--coral); color: var(--coral); }

.prodgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
/* В сетке с сайдбаром отступ от тулбара даёт сам .catgrid — свой margin
   сетки карточек обнуляем, иначе карточки начинались на 22px НИЖЕ
   сайдбара и колонки казались невыровненными. */
.catgrid .prodgrid { margin-top: 0; }

/* Вид «список»: одна колонка, карточка горизонтальная (фото слева, инфо
   справа). Клиентское улучшение — класс .is-list вешает catalog-view.js. */
.prodgrid.is-list { grid-template-columns: 1fr; gap: 12px; }
.prodgrid.is-list .pcard { display: grid; grid-template-columns: 240px 1fr; align-items: stretch; }
.prodgrid.is-list .pstage { aspect-ratio: auto; height: 100%; min-height: 190px; }
.prodgrid.is-list .pinfo { padding: 20px 22px; }
.prodgrid.is-list .pricewrap { margin-top: 14px; }
/* В списочном виде карточка горизонтальная — бейдж наличия остаётся в
   естественном потоке сразу после названия, вниз не прижимаем. */
.prodgrid.is-list .pavail { margin-top: 0; }
@media (max-width: 700px) {
  .prodgrid.is-list .pcard { grid-template-columns: 130px 1fr; }
  .prodgrid.is-list .pstage { min-height: 140px; }
}
@media (max-width: 640px) {
  .catalog-toolbar { gap: 10px; padding: 12px 14px; }
  .catbar-show-label { display: none; }
}
@media (max-width: 480px) {
  /* На узких экранах числа «показать» уступают место сортировке и виду. */
  .catbar-show { display: none; }
}

/* --- Раскладка «сайдбар фильтров + сетка» (BODY: FILTERS + GRID макета). */
.catgrid { display: grid; grid-template-columns: 290px 1fr; gap: 28px; align-items: start; margin-top: 22px; }
.catgrid-nofilters { grid-template-columns: 1fr; }
.catgrid-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
/* Мобильный тумблер фильтра — на десктопе скрыт (фильтр всегда открыт). */
.filter-mtoggle { display: none; }
.filter-mtoggle-lbl { display: inline-flex; align-items: center; gap: 9px; }
.filter-mtoggle svg { width: 18px; height: 18px; }
.filter-mtoggle-chev { transition: transform .2s; color: var(--faint); }
.catgrid-side.is-filters-open .filter-mtoggle-chev { transform: rotate(180deg); }

/* Мини-карточка подбора (QUIZ MINI-CARD). */
.filterquiz { display: block; background: linear-gradient(150deg, #de191a, #f0533f); border-radius: 16px; padding: 18px 20px; color: #fff; text-decoration: none; }
.filterquiz:hover { color: #fff; }
.filterquiz-eb { display: block; color: #fff; opacity: .85; margin-bottom: 7px; }
.filterquiz-title { display: block; font-weight: 800; font-size: 18px; line-height: 1.2; margin-bottom: 6px; }
.filterquiz-sub { display: block; font-size: 12.5px; opacity: .85; margin-bottom: 14px; }
.filterquiz-btn { display: inline-flex; align-items: center; gap: 7px; background: #fff; color: var(--coral-d); font-weight: 700; font-size: 13.5px; padding: 10px 16px; border-radius: 10px; }

/* Карточка фильтров. */
.filtercard { border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.filtercard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.filtercard-title { font-weight: 800; font-size: 18px; }
.filter-reset { font-size: 12.5px; color: var(--coral); font-weight: 700; text-decoration: none; }
.filter-reset:hover { color: var(--coral-d); }
.filtergroup { padding: 18px 0; border-bottom: 1px solid var(--line); }
.filtergroup:first-of-type { padding-top: 0; }
.filtergroup-title { display: block; color: var(--faint); margin-bottom: 10px; }
.filtergroup-toggles { border-bottom: 0; padding-bottom: 4px; }

/* Чекбоксы фильтров (fcheck / fbox). Реальный input скрыт, вид рисует .fbox. */
.fcheck { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; font-size: 14px; }
.fcheck input { position: absolute; opacity: 0; width: 0; height: 0; }
.fbox { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line); flex: none; display: grid; place-items: center; transition: background .15s, border-color .15s; }
.fcheck input:checked + .fbox { background: var(--coral); border-color: var(--coral); }
.fcheck input:checked + .fbox::after { content: ""; width: 6px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.fcheck input:focus-visible + .fbox { outline: 2px solid var(--coral); outline-offset: 2px; }
.fcheck-name { color: var(--ink); font-weight: 600; }
.fcheck-count { margin-left: auto; color: var(--faint); font-size: 13px; }

/* «Показать ещё» — нативное раскрытие остальных брендов (<details>) */
.filter-more { margin-top: 2px; }
.filter-more-toggle { list-style: none; cursor: pointer; padding: 7px 0; font-size: 13.5px; font-weight: 700; color: var(--coral); user-select: none; }
.filter-more-toggle::-webkit-details-marker { display: none; }
.filter-more-toggle:hover { color: var(--coral-d); }
.filter-more-hide { display: none; }
.filter-more[open] .filter-more-show { display: none; }
.filter-more[open] .filter-more-hide { display: inline; }

/* Цена: числовые поля + двойной ползунок. */
.filterprice-inputs { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.filterprice-field { flex: 1; display: flex; align-items: center; gap: 6px; height: 40px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 12px; }
.filterprice-field > span { color: var(--faint); font-size: 13px; }
.filterprice-input { border: 0; outline: 0; width: 100%; min-width: 0; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: none; }
.filterprice-input::-webkit-outer-spin-button, .filterprice-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.filterprice-input { -moz-appearance: textfield; }
.filterprice-dash { color: var(--faint); }
.filterprice-slider { position: relative; height: 24px; margin: 4px 2px 2px; }
.filterprice-track { position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 4px; background: var(--soft2); }
.filterprice-fill { position: absolute; top: 10px; height: 4px; border-radius: 4px; background: var(--coral); }
.filterprice-range { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 24px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
/* Ползунки 24px — тач-цель по рекомендации a11y (была 18px, Lighthouse
   target-size); визуально почти те же, зато пальцем попадать проще. */
.filterprice-range::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--coral); cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.filterprice-range::-moz-range-thumb { pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--coral); cursor: pointer; }
.filterprice-range::-webkit-slider-runnable-track { background: none; border: 0; }
.filterprice-range::-moz-range-track { background: none; border: 0; }

.filter-submit { width: 100%; padding: 14px; margin-top: 16px; transition: opacity .15s; }
/* Пока живой счётчик дозапрашивает число — лёгкое затемнение кнопки. */
.filter-submit.is-counting { opacity: .72; }

@media (max-width: 900px) {
  .catgrid { grid-template-columns: 1fr; }
  .catgrid-side { position: static; }
  /* Фильтр свёрнут по умолчанию — сразу виден каталог; раскрывается кнопкой
     «Фильтры». Если фильтр уже применён, сайдбар открыт сразу (is-filters-open
     ставит section.php). */
  .filter-mtoggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 14px 18px; border: 1.5px solid var(--line);
    border-radius: 14px; background: #fff; font: inherit; font-weight: 700;
    font-size: 15px; color: var(--ink); cursor: pointer;
  }
  .catgrid-side .filterquiz,
  .catgrid-side .filtercard { display: none; }
  .catgrid-side.is-filters-open .filterquiz { display: block; }
  .catgrid-side.is-filters-open .filtercard { display: block; }
}

/* ===== Подбор инструмента (квиз, design/Подбор.dc.html) ===== */
.quiz { padding: 12px 0 44px; }
.quiz-form { max-width: 820px; margin: 0 auto; }

/* Интро */
.quiz-intro { text-align: center; }
.quiz-intro-ico { display: inline-block; color: var(--coral); margin-bottom: 20px; }
.quiz-intro-ico svg { width: 66px; height: auto; display: block; }
.quiz-intro-title { font-weight: 800; font-size: 40px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 16px; }
.quiz-intro-sub { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 auto 28px; max-width: 520px; }
.quiz-intro-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.quiz-intro-actions .btn { padding: 16px 32px; font-size: 16px; }
.quiz-intro-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 640px; margin: 0 auto; }
.quiz-stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.quiz-stat b { display: block; font-weight: 800; font-size: 24px; }
.quiz-stat span { font-size: 12.5px; color: var(--muted); }

/* Шаги-вопросы. Без JS видны все сразу (обычная форма); мастер (is-enhanced)
   показывает по одному через атрибут hidden (управляет quiz.js). */
.quiz-step { border: 1px solid var(--line); border-radius: 22px; padding: 36px 40px; box-shadow: 0 8px 40px rgba(29, 29, 31, .06); margin: 0 0 16px; }
.quiz.is-enhanced .quiz-step { margin: 0; }
.quiz-step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.quiz-step-label { color: var(--coral); }
.quiz-step-name { font-size: 13px; color: var(--faint); }
.quiz-progress { height: 7px; border-radius: 6px; background: var(--soft2); overflow: hidden; margin-bottom: 24px; }
.quiz-progress-fill { display: block; height: 100%; background: var(--coral); border-radius: 6px; }
.quiz-q-title { font-weight: 800; font-size: 28px; letter-spacing: -.01em; margin: 0 0 6px; padding: 0; }
.quiz-q-sub { font-size: 14.5px; color: var(--muted); margin: 0 0 24px; }
.quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qopt { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font-size: 15px; font-weight: 600; transition: border-color .15s, background .15s, transform .15s; }
.qopt:hover { border-color: var(--coral); background: var(--coral-wash); transform: translateY(-2px); }
.qopt:has(input:checked) { border-color: var(--coral); background: var(--coral-wash); }
.qopt input { position: absolute; opacity: 0; width: 0; height: 0; }
.qopt-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); flex: none; transition: border-color .15s, border-width .15s; }
.qopt-sw { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(0, 0, 0, .2); flex: none; }
.qopt input:checked + .qopt-dot { border-color: var(--coral); border-width: 6px; }
.qopt input:focus-visible + .qopt-dot, .qopt input:focus-visible + .qopt-sw { outline: 2px solid var(--coral); outline-offset: 3px; }
.quiz-prev { margin-top: 24px; padding: 12px 22px; }
.quiz-submit { margin-top: 16px; padding: 15px 30px; }

/* Результат */
.quiz-result-head { text-align: center; max-width: 600px; margin: 0 auto 30px; }
.quiz-result-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; margin: 0 auto 18px; }
.quiz-result-ico svg { width: 32px; height: 32px; }
.quiz-result-title { font-weight: 800; font-size: 30px; letter-spacing: -.01em; margin: 0 0 8px; }
.quiz-result-sub { font-size: 15px; color: var(--muted); margin: 0; }
/* Пометка «добавили близкие модели: …» — честное объяснение ослабленного
   фильтра (иначе «выбрал коричневый — выдало белый» читается как поломка). */
.quiz-result-relaxed { max-width: 560px; margin: 12px auto 0; padding: 10px 16px; border-radius: 12px; background: var(--soft); font-size: 13.5px; color: var(--ink); }
.quiz-empty { text-align: center; color: var(--muted); font-size: 15px; }
.quiz-result-actions { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.quiz-result-actions .btn { padding: 15px 28px; }
.quiz-compare-ico { display: inline-flex; margin-right: 8px; vertical-align: -3px; }
.quiz-compare-ico svg { width: 18px; height: 18px; }

/* Таблица сравнения — тумблер «Сравнить по характеристикам» в результате */
.quiz-compare-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
.quiz-compare-title { font-weight: 800; font-size: 28px; letter-spacing: -.01em; margin: 0; }
.quiz-compare-sub { font-size: 14px; color: var(--muted); margin: 4px 0 0; }
.quiz-compare-tablewrap { border: 1px solid var(--line); border-radius: 18px; overflow-x: auto; background: #fff; }
.quiz-compare-table { width: 100%; min-width: 580px; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
/* fixed: колонки моделей строго равные (при auto таблица делила ширину по
   длине текстов, и фото в «короткой» колонке было заметно мельче соседних). */
.quiz-compare-table th { text-align: left; padding: 16px 20px; background: var(--soft); vertical-align: top; }
.quiz-compare-table th.quiz-compare-corner { width: 168px; }
.quiz-compare-table th + th { border-left: 1px solid var(--line); }
/* Шапка колонки — миниатюра + бренд/название, как в макете (design/
   Подбор.dc.html): фото инструмента 40×40 в белом квадрате, справа текст. */
/* Шапка колонки — крупное фото СВЕРХУ на белой плашке единой высоты (все
   инструменты на одной линии независимо от длины названия — замечание
   владельца 20.08; раньше был thumb 40x40 сбоку и фото «плясали»), бренд
   и имя под ним. Белая фотозона на кремовой шапке — тот же приём, что у
   плиток каталога на главной (.home-cats .cattile). */
.quiz-compare-colhead { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.quiz-compare-thumb { width: 100%; height: 190px; border-radius: 12px; background: #fff; border: 1px solid var(--line); overflow: hidden; display: block; padding: 8px; }
/* НЕ grid: у грида с place-items авто-строка тянется по контенту, и
   height:100% у img считался бы от строки (размер самого фото), а не от
   плашки — фото вылезало и резалось overflow-ом. С display:block процент
   берётся от плашки, contain сам центрирует инструмент. БЕЗ зума
   (был scale 1.22 против пустых полей исходников): фото товаров
   кадрированы по-разному, и у плотных кадров зум срезал ножки/крышку —
   замечание владельца 20.08 «не все фото помещается». */
.quiz-compare-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.quiz-compare-colhead-txt { min-width: 0; }
.quiz-compare-brand { display: block; font-size: 11px; color: var(--coral); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.quiz-compare-name { display: block; font-weight: 700; font-size: 14.5px; margin-top: 2px; }
.quiz-compare-table td { padding: 14px 20px; font-weight: 700; border-top: 1px solid var(--line); }
.quiz-compare-table td + td { border-left: 1px solid var(--line); }
.quiz-compare-label { color: var(--muted); font-weight: 600; }
.quiz-compare-cta td { padding: 16px 20px; }
.quiz-compare-cta .btn { display: block; width: 100%; padding: 11px 18px; }

/* Модальное окно подбора (quiz-modal.js): открывается на главной/каталоге/карточке */
.quizmodal-lock { overflow: hidden; }
.quizmodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; }
.quizmodal[hidden] { display: none; }
.quizmodal-backdrop { position: fixed; inset: 0; background: rgba(29, 29, 31, .55); }
.quizmodal-dialog { position: relative; z-index: 1; width: 100%; max-width: 900px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; background: var(--bg); border-radius: 22px; box-shadow: 0 30px 80px rgba(29, 29, 31, .35); }
.quizmodal-x { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.quizmodal-x svg { width: 20px; height: 20px; }
.quizmodal-x:hover { background: var(--soft); }
.quizmodal-body { overflow: auto; padding: 34px 30px 38px; }
.quizmodal-body .quiz { padding: 4px 0 0; }
.quizmodal-loading { text-align: center; padding: 64px 0; color: var(--muted); font-size: 15px; }

@media (max-width: 640px) {
  .quiz-intro-title { font-size: 28px; }
  .quiz-q-title { font-size: 22px; }
  .quiz-step { padding: 24px 20px; }
  .quiz-opts { grid-template-columns: 1fr; }
  .quiz-intro-stats { grid-template-columns: 1fr 1fr; }
  .quiz-compare-title { font-size: 22px; }
  .quiz-compare-thumb { height: 130px; }
  .quizmodal { padding: 0; }
  .quizmodal-dialog { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; }
  .quizmodal-body { padding: 24px 16px 30px; }
}

.pcard {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.pcard:hover { box-shadow: 0 12px 34px rgba(29, 29, 31, .11); transform: translateY(-3px); }
.pcard:hover .pbuy { background: var(--coral); color: #fff; border-color: var(--coral); }

.cardacts { position: absolute; top: 14px; right: 14px; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
.cardacts .icobtn { width: 34px; height: 34px; background: rgba(255, 255, 255, .9); border: 1px solid var(--line); padding: 0; font: inherit; cursor: pointer; }
/* Товар уже в списке — коралловая заливка с белой иконкой (макет:
   .favbtn[data-fav=true]). Состояние ставит store.js (syncCardActs). */
.cardacts .icobtn.is-on { background: var(--coral); border-color: var(--coral); color: #fff; }
.cardacts .icobtn:hover { border-color: var(--coral); color: var(--coral); }
.cardacts .icobtn.is-on:hover { color: #fff; }

.pstage {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.15;
  /* Белый фон (а не бежевый градиент): фото инструментов на белом фоне
     сливаются с ним без видимых полей по краям. Инструмент показываем
     ЦЕЛИКОМ (object-fit contain), «пустое» место вокруг — белое, незаметное. */
  background: #fff;
}
.pstage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* В покое фото во весь контейнер (contain-размер), при наведении —
     лёгкий зум 1.05 (просьба владельца: «1 и 1,05»). Зум срезает ~2.5%
     фото с каждого края — это меньше собственного белого поля фото,
     поэтому инструмент за рамку карточки не выходит. */
  transform: scale(1);
  transition: transform .35s cubic-bezier(.2, .6, .2, 1);
}
.pcard:hover .pstage img { transform: scale(1.05); }
.pstage-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: 12.5px; font-weight: 600; }

/* Мини-галерея карточки листинга (макет Каталог.dc.html): стрелки, счётчик
   и точки поверх фото, видимы только при наведении на карточку. Листает
   catalog-view.js по data-card-gallery; карточка с одним кадром этих
   элементов не имеет вовсе (см. partials/product-card.php). */
.galnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .9); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); cursor: pointer; }
.galnav-prev { left: 10px; }
.galnav-next { right: 10px; }
.galnav:hover { border-color: var(--coral); color: var(--coral); }
.galcount { position: absolute; bottom: 12px; left: 14px; z-index: 4; background: rgba(29, 29, 31, .72); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.galdots { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 4; display: flex; justify-content: center; gap: 6px; }
.gal-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(29, 29, 31, .2); transition: all .2s; }
.gal-dot.is-active { background: var(--coral); width: 16px; border-radius: 3px; }
.pstage .galnav, .pstage .galdots, .pstage .galcount { opacity: 0; transition: opacity .2s; }
.pcard:hover .galnav, .pcard:hover .galdots, .pcard:hover .galcount { opacity: 1; }

/* Страница поиска (/poisk/) */
.search-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.search-count { font-size: 14px; color: var(--muted); }
.search-empty { font-size: 15px; color: var(--muted); max-width: 560px; line-height: 1.6; }
.search-empty a { color: var(--coral); font-weight: 600; }
.search-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* Страницы списков клиента (Избранное/Сравнение/Корзина) */
.storepage-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.storepage-count { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.storepage-loading { padding: 44px 0; text-align: center; color: var(--muted); font-size: 15px; }
.storepage-empty { text-align: center; padding: 30px 0 10px; }
.storepage-empty p { font-size: 15px; color: var(--muted); max-width: 540px; margin: 0 auto 20px; line-height: 1.6; }
.storepage-empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.storepage-note { color: var(--muted); font-size: 15px; }
.storepage .pcard { position: relative; }
.storepage-remove {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .92); color: var(--muted);
  display: grid; place-items: center; cursor: pointer; transition: color .15s, border-color .15s;
}
.storepage-remove svg { width: 15px; height: 15px; }
.storepage-remove:hover { color: var(--coral); border-color: var(--coral); }

/* --- Таблица сравнения (/sravnenie/, design/Сравнение.dc.html) --- */
.cmp-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cmp-diff { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; user-select: none; }
/* «Только различия» — pill-свитч, как в макете (Сравнение.dc.html,
   .toggle/.sw): нативный чекбокс визуально скрыт, состояние рисует
   соседний .cmp-switch через :checked +. */
.cmp-diff input { position: absolute; opacity: 0; width: 0; height: 0; }
.cmp-switch { position: relative; width: 38px; height: 22px; border-radius: 22px; background: var(--soft2); transition: background .2s; flex: none; }
.cmp-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .2s; }
.cmp-diff input:checked + .cmp-switch { background: var(--coral); }
.cmp-diff input:checked + .cmp-switch::after { left: 19px; }
.cmp-diff input:focus-visible + .cmp-switch { outline: 2px solid var(--coral); outline-offset: 2px; }

.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 16px; }
/* table-layout: fixed — колонки товаров РАВНОЙ ширины (auto растягивал
   колонку с самым длинным текстом, таблица выглядела кособокой). */
.cmp-table { border-collapse: collapse; width: 100%; min-width: 520px; table-layout: fixed; }
.cmp-table .cmp-corner { width: 148px; }
.cmp-table th, .cmp-table td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
/* Первый столбец (метки атрибутов) липкий при горизонтальной прокрутке. */
.cmp-corner, .cmp-rowlabel { position: sticky; left: 0; z-index: 1; background: var(--soft); color: var(--muted); font-weight: 600; min-width: 128px; }
.cmp-col { min-width: 190px; background: #fff; position: relative; }
/* Верхний ряд шапки колонки: бейдж товара + крестик справа (макет). */
.cmp-col-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; min-height: 26px; }
.cmp-col-badge { background: var(--coral); color: #fff; padding: 4px 9px; border-radius: 7px; }
.cmp-remove { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: color .15s, border-color .15s; flex: none; }
.cmp-remove svg { width: 13px; height: 13px; }
.cmp-remove:hover { color: var(--coral); border-color: var(--coral); }
.cmp-col-media { display: flex; align-items: center; justify-content: center; height: 200px; background: #fff; border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
/* 108% + contain: лёгкий зум съедает белые поля товарных фото —
   инструмент в колонке заметно крупнее (как фото серий в мега-меню). */
.cmp-col-media img { width: 108%; height: 108%; flex: none; object-fit: contain; display: block; }
.cmp-col-brand { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--coral); }
/* Фиксированные три строки под название: цена и кнопка «Подробнее» у всех
   колонок на ОДНОЙ высоте, даже если название в 1 или 3 строки. */
.cmp-col-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 53px; font-weight: 700; font-size: 13.5px; line-height: 1.3; margin: 3px 0 6px; color: var(--ink); }
.cmp-col-price { display: block; font-weight: 800; font-size: 16px; }
/* Полноширинная коралловая «Подробнее» под ценой (макет). */
.cmp-col-btn { width: 100%; padding: 10px 16px; font-size: 13.5px; margin-top: 6px; }
.cmp.is-diff-only tr[data-same="1"] { display: none; }
/* Подсветка различающихся ячеек — как в макете (design/Сравнение.dc.html):
   мягкий зелёно-голубой фон на значениях, которыми модели отличаются.
   Класс cmp-hl, НЕ cmp-diff: cmp-diff — тумблер «Только различия» с
   inline-flex, который превращал td в flex и схлопывал колонки. */
.cmp-table td.cmp-hl { background: #e6f0ef; }

/* «Коротко: что выбрать?» — вердикт из реальных данных сравнения */
.cmp-verdict { margin-top: 28px; }
.cmp-verdict-title { font-weight: 800; font-size: 22px; letter-spacing: -.01em; margin: 0 0 16px; }
.cmp-verdict-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cmp-verdict-card { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; background: #fff; }
.cmp-verdict-name { font-weight: 800; font-size: 15.5px; color: var(--ink); }
.cmp-verdict-name:hover { color: var(--coral); }
.cmp-verdict-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cmp-verdict-points li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.cmp-verdict-points li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--coral); font-weight: 800; }
.cmp-verdict-expert { margin: 2px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); font-style: italic; }
.cmp-verdict-eb { display: block; font-style: normal; color: var(--coral); margin-bottom: 5px; }

/* Под таблицей — две outline-кнопки рядом (макет). */
.cmp-foot { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
.cmp-foot-btn { padding: 14px 26px; }

/* --- Корзина (/cart/, design/Корзина.dc.html) --- */
.cart { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.cart-list { display: flex; flex-direction: column; gap: 14px; }
.cart-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto auto auto; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: #fff; }
.cart-row-media { display: block; width: 92px; height: 78px; border-radius: 10px; overflow: hidden; background: #fff; flex: none; }
.cart-row-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cart-row-info { min-width: 0; }
.cart-row-brand { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--coral); }
.cart-row-name { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.3; margin: 3px 0 6px; color: var(--ink); }
.cart-row-avail { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; }
.cart-row-avail svg { width: 13px; height: 13px; }
.cart-row-avail.is-in { color: var(--green, #1c9d5a); }
.cart-row-avail.is-out { color: var(--muted); }
.cart-row-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cart-qty-btn { width: 34px; height: 34px; border: 0; background: #fff; color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; transition: background .15s; }
.cart-qty-btn:hover { background: var(--soft); color: var(--coral); }
/* Количество — input (можно набрать с клавиатуры): без рамки и родных
   крутилок, ширина фиксированная, чтобы степпер не гулял. */
.cart-qty-val { width: 38px; border: 0; background: none; padding: 0; text-align: center; font: 700 14px "Manrope", sans-serif; font-variant-numeric: tabular-nums; color: var(--ink); appearance: textfield; -moz-appearance: textfield; }
.cart-qty-val::-webkit-inner-spin-button, .cart-qty-val::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cart-qty-val:focus { outline: none; background: var(--soft); border-radius: 6px; }
.cart-row-sum { font-weight: 800; font-size: 16px; white-space: nowrap; text-align: right; min-width: 92px; }
.cart-row-remove { width: 34px; height: 34px; border: 0; background: none; color: var(--faint); display: grid; place-items: center; cursor: pointer; border-radius: 8px; transition: color .15s, background .15s; }
.cart-row-remove svg { width: 18px; height: 18px; }
.cart-row-remove:hover { color: var(--coral); background: var(--soft); }

.cart-side { position: sticky; top: 90px; }
.cart-summary { border: 1px solid var(--line); border-radius: 18px; padding: 24px; background: var(--soft); }
.cart-summary-title { font-weight: 800; font-size: 19px; margin: 0 0 16px; }
.cart-sum-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--muted); padding: 7px 0; }
.cart-sum-line b { color: var(--ink); font-weight: 700; }
.cart-sum-free { color: var(--green, #1c9d5a) !important; }
.cart-sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 800; font-size: 18px; padding: 14px 0; margin-top: 6px; border-top: 1px solid var(--line); }
.cart-sum-discount { color: var(--coral) !important; }
.cart-sum-monthly { font-size: 12.5px; color: var(--muted); margin: 2px 0 4px; }
.cart-sum-monthly b { color: var(--ink); font-weight: 700; }
/* Приписка под «Итого» при платной доставке ТК (наполняет cart-checkout.js). */
.cart-sum-dlv-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin: -4px 0 6px; }

/* Плашка «Товар удалён — Вернуть» (store-pages.js, 6 секунд). */
.cart-undo { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 14px; background: var(--ink); color: #fff; border-radius: 12px; padding: 12px 18px; font-size: 13.5px; font-weight: 600; box-shadow: 0 14px 34px rgba(29, 29, 31, .35); white-space: nowrap; }
.cart-undo-btn { border: 0; background: none; color: #ff9c9c; font: 700 13.5px "Manrope", sans-serif; cursor: pointer; padding: 0; }
.cart-undo-btn:hover { color: #fff; }

/* Строка товара: цвет-образец рядом с наличием (макет). */
.cart-row-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.cart-row-color { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.cart-row-color-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); }

.cart-form { margin-top: 16px; gap: 10px; }
.cart-form .lp-fld { background: #fff; }

/* Шаги оформления (cart-checkout.js): номер-кружок, у выполненного шага —
   галочка. Ранняя заявка — зелёный бейдж, расчёт доставки — мягкий бокс. */
.cart-step { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 6px; border-top: 1px solid var(--line); }
.cart-step:first-of-type { border-top: 0; padding-top: 4px; }
.cart-step-head { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14.5px; }
.cart-step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--coral-wash); color: var(--coral); display: grid; place-items: center; font-size: 12.5px; font-weight: 800; flex: none; }
.cart-step.is-done .cart-step-num { background: #e7f5ec; color: #1e7d45; }
.cart-step.is-done .cart-step-num::before { content: '✓'; }
.cart-step.is-done .cart-step-num { font-size: 0; }
.cart-step.is-done .cart-step-num::before { font-size: 13px; }
.cart-quick-ok { background: #e7f5ec; color: #1e6b3d; border-radius: 10px; padding: 10px 13px; font-size: 13px; font-weight: 600; line-height: 1.45; }
.cart-dlv-est { background: var(--soft); border-radius: 10px; padding: 11px 13px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.cart-dlv-est b { color: var(--ink); }
.cart-dlv-note { display: block; margin-top: 5px; font-size: 12px; color: var(--faint); }
/* Облачные теги раздела каталога: готовые выборки одним кликом.
   ОДНА строка с горизонтальным листанием (решение владельца) — перенос
   на 2-3 ряда съедал место над листингом. Скроллбар спрятан, листается
   свайпом/колесом. */
.cattags { display: flex; flex-wrap: nowrap; gap: 8px; margin: 16px 0 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.cattags::-webkit-scrollbar { display: none; }
.cattag { display: inline-flex; align-items: center; flex: none; white-space: nowrap; padding: 8px 15px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink); transition: border-color .15s, color .15s, background .15s; }
.cattag:hover { border-color: var(--coral); color: var(--coral); }

/* Подсказки поиска в шапке: товары с фото и ценой */
.search-sug { position: absolute; z-index: 120; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(29, 29, 31, .16); overflow: hidden; }
.search-sug-item { display: flex; align-items: center; gap: 12px; padding: 9px 14px; }
.search-sug-item:hover { background: var(--coral-wash); }
.search-sug-img { width: 44px; height: 44px; border-radius: 9px; background: var(--soft); flex: none; display: grid; place-items: center; overflow: hidden; }
.search-sug-img img { max-width: 90%; max-height: 90%; object-fit: contain; }
.search-sug-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-sug-name { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-sug-price { font-size: 13px; font-weight: 800; color: var(--coral); }
.search-sug-all { display: block; padding: 11px 14px; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--coral); border-top: 1px solid var(--line); }

/* Подсказки адреса (DaData) и чекбоксы доп. услуг */
.cart-sug { position: relative; display: block; }
.cart-sug .lp-fld { width: 100%; box-sizing: border-box; }
.cart-sug-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(29, 29, 31, .12); overflow: hidden; }
.cart-sug-item { padding: 10px 13px; font-size: 13.5px; cursor: pointer; }
.cart-sug-item:hover { background: var(--coral-wash); color: var(--coral); }
.cart-done { background: #e7f5ec; border-radius: 14px; padding: 22px; margin-top: 16px; }
.cart-done-title { font-weight: 800; font-size: 18px; color: #1e6b3d; margin-bottom: 6px; }
.cart-done-text { font-size: 14px; color: var(--muted); line-height: 1.55; }
/* Секции формы «1. Контакты / 2. Адрес / 3. Оплата» + ряды и оплата (макет). */
.cart-form-sect { font-weight: 800; font-size: 14.5px; margin: 12px 0 2px; }
.cart-form-sect:first-of-type { margin-top: 4px; }
.cart-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cart-pay-opts { display: flex; flex-direction: column; gap: 8px; }
.cart-pay-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 600; }
.cart-pay-opt input { accent-color: var(--coral); width: 18px; height: 18px; }
.cart-pay-opt:has(input:checked) { border-color: var(--coral); }
.cart-submit { align-self: stretch; margin-top: 2px; }
.cart-form .lp-form-consent { font-size: 11px; }

/* Доверительные пункты под формой. */
.cart-trust { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.cart-trust-item { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.cart-trust-item svg { width: 16px; height: 16px; color: var(--green, #1c9d5a); flex: none; }

@media (max-width: 900px) {
  .cart { grid-template-columns: 1fr; }
  .cart-side { position: static; }
}
@media (max-width: 560px) {
  .cart-row { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "media info remove" "media qty sum"; gap: 10px 12px; }
  .cart-row-media { grid-area: media; width: 64px; height: 56px; }
  .cart-row-info { grid-area: info; }
  .cart-row-qty { grid-area: qty; }
  .cart-row-sum { grid-area: sum; text-align: right; }
  .cart-row-remove { grid-area: remove; justify-self: end; }
}

.pbadge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  color: #fff;
  padding: 5px 10px;
  border-radius: 8px;
  max-width: 170px;
  line-height: 1.25;
}

.pinfo { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.pbody { display: flex; flex-direction: column; flex: 1; }
.pbrand { font-size: 11.5px; color: var(--coral); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.pname { font-weight: 700; font-size: 14.5px; line-height: 1.3; margin: 4px 0 12px; display: block; }

.pspecs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.pspecs b { color: var(--ink); }
.pcolors { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pcolor-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); flex: none; }

/* margin-top:auto прижимает бейдж к низу .pbody (flex-колонки) — он всегда
   сидит прямо над ценой, на одной высоте во всех карточках ряда, независимо
   от длины названия (иначе при названии в 1 строку бейдж «всплывал»). */
.pavail { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; margin-top: auto; margin-bottom: 12px; }
.pavail-in { color: var(--green); }
.pavail-out { color: var(--faint); }

.pricewrap { margin-top: auto; }
.pprice-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.pprice { font-weight: 800; font-size: 20px; }
.pprice-old { font-size: 13px; color: var(--faint); text-decoration: line-through; }
.pbuy { width: 100%; padding: 12px; }
/* Карусель главной: цена и «Купить» в одну строку (референс владельца
   24.07) — карточка ниже, ряд компактнее. Microdata-див между ними
   пустой (одни meta) и на флекс-раскладку не влияет. */
.rowscroll .pricewrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rowscroll .pprice-row { margin-bottom: 0; }
.rowscroll .pbuy { width: auto; flex: none; padding: 10px 18px; }

/* ===== Пагинация ===== */

.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; flex-wrap: wrap; }
.pgbtn {
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: #fff;
  transition: all .15s;
}
.pgbtn:hover { border-color: var(--coral); color: var(--coral); }
.pgbtn[data-active="true"] { background: var(--coral) !important; border-color: var(--coral) !important; color: #fff !important; }
.pgbtn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.pagination-ellipsis { color: var(--faint); padding: 0 4px; }
.pagination-summary { text-align: center; font-size: 12.5px; color: var(--faint); margin-top: 12px; }

/* ===== SEO-текст раздела ===== */

.section-seo { margin-top: 40px; background: var(--soft); border-radius: 18px; padding: 30px 34px; }
.section-seo h2 { font-weight: 800; font-size: 20px; margin: 0 0 12px; }
.section-seo p { font-size: 14.5px; line-height: 1.75; color: var(--muted); margin: 0 0 14px; max-width: 900px; }
.section-seo p:last-child { margin-bottom: 0; }

.section-empty { margin-top: 22px; padding: 40px; text-align: center; color: var(--muted); background: var(--soft); border-radius: 16px; }

/* Хаб /katalog/: популярные — сетка 4 колонки (макет Каталог обзор.dc.html;
   базовый .prodgrid трёхколоночный, мобильные брейкпоинты ниже общие). */
.hub-popular-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) {
  .hub-popular-grid { grid-template-columns: repeat(2, 1fr); }
}

/* «Показать ещё N моделей» между сеткой и пагинацией (макет
   Каталог.dc.html, блок load more). Это ссылка на следующую страницу —
   работает без JS; catalog-view.js дозагружает карточки на месте. */
.loadmore-wrap { display: flex; justify-content: center; margin-top: 28px; }
.loadmore-btn { padding: 14px 32px; }
.loadmore-btn.is-loading { opacity: .55; pointer-events: none; }

@media (max-width: 820px) {
  .prodgrid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ===== Карточка товара (детальная страница) ===== */
/* Источник — LOVE-PIANO/design/Карточка товара.dc.html, экраны GALLERY+BUY,
   DESCRIPTION, SPECS. Комплекты/аксессуары/отзывы/видео/квиз-бэнд —
   вне границ этого этапа (см. отчёт задачи), классов под них здесь нет. */

.pdetail { padding-top: 4px; }

.pdtop { display: grid; grid-template-columns: 1.05fr 0.92fr 0.78fr; gap: 28px; align-items: start; margin-bottom: 48px; }

/* Правая колонка карточки товара — доставка/оплата/гарантия/возврат/дерево,
   как в макете (design/Карточка товара.dc.html, COL 3). */
.pdaside { display: flex; flex-direction: column; gap: 10px; }
.pdcard { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.pdcard-head { display: flex; align-items: center; gap: 10px; padding: 12px 15px; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--line); }
.pdaside-ico { flex: none; display: inline-flex; color: var(--coral); }
.pdaside-ico svg { width: 20px; height: 20px; display: block; }
.pdaside-ico-lg svg { width: 24px; height: 24px; }
.pdaside-city { color: var(--coral); }
.pdcard-body { padding: 11px 15px; }
.pdcard-delivery { font-size: 13px; color: var(--muted); line-height: 1.75; }
.pdcard-delivery b { color: var(--ink); }
.pdpay-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pdpay-pill { background: var(--soft); border-radius: 8px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; }
.pdtrust { display: grid; gap: 10px; }
.pdtrust-item { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; }
.pdtrust-item > div > b { font-size: 14px; display: block; }
.pdtrust-item > div > span { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }

/* Инструкция PDF / Видео-обзор под галереей (design/Карточка товара.dc.html). */
.pdgallery-col { min-width: 0; }
.pdmedia { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.pdmedia-link { display: inline-flex; align-items: center; gap: 8px; background: var(--soft); border-radius: 10px; padding: 9px 14px; font-size: 13px; color: var(--ink); font-weight: 600; }
.pdmedia-link:hover { background: var(--soft2); }
.pdmedia-ico { display: inline-flex; color: var(--coral); }
.pdmedia-ico svg { width: 18px; height: 18px; display: block; }

/* Выбор города доставки — выпадающий поиск по базе городов (city-select.js).
   Без JS остаётся город по умолчанию и его условия (кнопка-триггер не
   раскрывается, но текст города и данные видны). */
/* overflow:visible поверх .pdcard { overflow:hidden }: иначе выпадающий
   список города обрезается краем карточки и уходит ПОД соседние блоки
   (Оплата и ниже). z-index поднимает карточку над соседями на время,
   пока дропдаун открыт (сама карточка непрозрачная — не мешает всегда). */
.pddelivery { position: relative; overflow: visible; z-index: 20; }
.pdcity-trigger { display: inline-flex; align-items: center; gap: 3px; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 700; color: var(--coral); cursor: pointer; }
.pdcity-chev { display: inline-flex; }
.pdcity-chev svg { width: 12px; height: 12px; display: block; transition: transform .15s; }
.pdcity-trigger[aria-expanded="true"] .pdcity-chev svg { transform: rotate(180deg); }
.pdcity-dropdown { position: absolute; z-index: 30; left: 12px; right: 12px; top: 46px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(29, 29, 31, .12); padding: 8px; }
.pdcity-dropdown[hidden] { display: none; }
.pdcity-input { width: 100%; box-sizing: border-box; height: 38px; border: 1.5px solid var(--line); border-radius: 9px; padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--ink); outline: none; }
.pdcity-input:focus { border-color: var(--coral); }
.pdcity-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.pdcity-opt-item { padding: 8px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.pdcity-opt-item.is-active, .pdcity-opt-item:hover { background: var(--soft); color: var(--coral); }
.pdcity-empty { padding: 8px 10px; font-size: 13px; color: var(--faint); }

/* Плашка подбора на карточке (QUIZ BAND макета): тёмная скруглённая. */
.pdquiz { background: var(--ink); border-radius: 20px; padding: 28px 32px; display: flex; align-items: center; gap: 24px; color: #fff; margin-top: 28px; }
.pdquiz-ico { width: 56px; height: 56px; border-radius: 16px; background: rgba(222, 25, 26, .18); display: grid; place-items: center; flex: none; color: var(--coral); }
.pdquiz-ico svg { width: 28px; height: 28px; }
.pdquiz-text { flex: 1; min-width: 0; }
.pdquiz-eb { display: block; color: #f4a0a2; }
.pdquiz-title { font-weight: 800; font-size: 22px; margin: 6px 0 3px; }
.pdquiz-sub { font-size: 14px; color: rgba(255, 255, 255, .68); }
.pdquiz-btn { flex: none; padding: 16px 26px; white-space: nowrap; }

/* Большой CTA подбора (BIG QUIZ CTA макета): кремовый на всю ширину вьюпорта
   (break-out из .page-main, как .quiz-band на главной), контент — в .wrap. */
.pdcta { background: var(--soft); margin-top: 56px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.pdcta-inner { padding-top: 48px; padding-bottom: 48px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.pdcta-text { flex: 1; min-width: 300px; }
.pdcta-eb { color: var(--coral); display: inline-flex; align-items: center; gap: 6px; }
.pdcta-eb-ico { display: inline-flex; }
.pdcta-eb-ico svg { width: 13px; height: 13px; display: block; }
.pdcta-title { font-weight: 800; font-size: 30px; letter-spacing: -.01em; margin: 8px 0; }
.pdcta-sub { font-size: 15px; color: var(--muted); margin: 0; max-width: 520px; }
.pdcta-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; flex: none; }
.pdcta-actions .btn { padding: 15px 28px; }
@media (max-width: 640px) {
  .pdquiz { flex-direction: column; align-items: flex-start; padding: 22px; }
  .pdquiz-btn { width: 100%; }
  .pdcta-title { font-size: 24px; }
}

/* --- Галерея: переключение кадров без единой строчки JS — тот же
   приём radio+:checked~, что уже держит мобильное меню шапки
   (см. .mnav-toggle выше). Радио скрыты визуально, но не из DOM —
   остаются в таб-порядке для клавиатурной навигации. */
.pdgallery-radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.pdgallery-stage {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--soft);
}
.pdgallery-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.pdgallery-ph { display: grid; place-items: center; color: var(--faint); font-size: 13px; font-weight: 600; text-align: center; padding: 20px; }

/* Интерактив галереи — добавляет pdgallery-lightbox.js (прогрессивное
   улучшение). Стрелки ‹ › на главном фото листают, не открывая; клик по
   фото открывает лайтбокс. */
.pdgallery-stage--zoomable { cursor: zoom-in; }
.pdgal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .9); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(29, 29, 31, .15); z-index: 3;
  opacity: 0; transition: opacity .18s, background .18s;
}
.pdgallery-stage:hover .pdgal-arrow { opacity: 1; }
.pdgal-arrow:hover { background: #fff; }
.pdgal-arrow svg { width: 20px; height: 20px; }
.pdgal-arrow-prev { left: 12px; }
.pdgal-arrow-next { right: 12px; }
@media (hover: none) { .pdgal-arrow { opacity: 1; } }

/* Лайтбокс фото товара — фуллскрин-оверлей, строит pdgallery-lightbox.js. */
.pdlightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 20, 22, .92); display: none; align-items: center; justify-content: center; padding: 40px 16px; }
.pdlightbox.is-open { display: flex; }
.pdlightbox-figure { max-width: 92vw; max-height: 88vh; display: flex; }
.pdlightbox-img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 8px; }
.pdlightbox-close { position: absolute; top: 18px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.pdlightbox-close:hover { background: rgba(255, 255, 255, .22); }
.pdlightbox-close svg { width: 22px; height: 22px; }
.pdlightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.pdlightbox-arrow:hover { background: rgba(255, 255, 255, .22); }
.pdlightbox-arrow svg { width: 26px; height: 26px; }
.pdlightbox-arrow-prev { left: 16px; }
.pdlightbox-arrow-next { right: 16px; }
.pdlightbox-counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .03em; }
@media (max-width: 600px) {
  .pdlightbox-arrow { width: 42px; height: 42px; }
  .pdlightbox-arrow-prev { left: 8px; }
  .pdlightbox-arrow-next { right: 8px; }
}

/* Миниатюры — одна строка с горизонтальным скроллом (как просил владелец:
   не занимают вертикаль, листаются влево-вправо). Квадрат фикс-ширины,
   тонкий скроллбар. */
.pdgallery-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.pdgallery-thumbs::-webkit-scrollbar { height: 6px; }
.pdgallery-thumbs::-webkit-scrollbar-thumb { background: var(--soft2); border-radius: 6px; }
.pdgallery-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  aspect-ratio: 1;
  border-radius: 11px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  cursor: pointer;
  display: block;
  transition: border-color .18s;
}
.pdgallery-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pdgallery-radio:nth-of-type(1):checked ~ .pdgallery-stage img:nth-of-type(1),
.pdgallery-radio:nth-of-type(2):checked ~ .pdgallery-stage img:nth-of-type(2),
.pdgallery-radio:nth-of-type(3):checked ~ .pdgallery-stage img:nth-of-type(3),
.pdgallery-radio:nth-of-type(4):checked ~ .pdgallery-stage img:nth-of-type(4),
.pdgallery-radio:nth-of-type(5):checked ~ .pdgallery-stage img:nth-of-type(5),
.pdgallery-radio:nth-of-type(6):checked ~ .pdgallery-stage img:nth-of-type(6),
.pdgallery-radio:nth-of-type(7):checked ~ .pdgallery-stage img:nth-of-type(7),
.pdgallery-radio:nth-of-type(8):checked ~ .pdgallery-stage img:nth-of-type(8),
.pdgallery-radio:nth-of-type(9):checked ~ .pdgallery-stage img:nth-of-type(9),
.pdgallery-radio:nth-of-type(10):checked ~ .pdgallery-stage img:nth-of-type(10) {
  display: block;
}

.pdgallery-radio:nth-of-type(1):checked ~ .pdgallery-thumbs .pdgallery-thumb:nth-of-type(1),
.pdgallery-radio:nth-of-type(2):checked ~ .pdgallery-thumbs .pdgallery-thumb:nth-of-type(2),
.pdgallery-radio:nth-of-type(3):checked ~ .pdgallery-thumbs .pdgallery-thumb:nth-of-type(3),
.pdgallery-radio:nth-of-type(4):checked ~ .pdgallery-thumbs .pdgallery-thumb:nth-of-type(4),
.pdgallery-radio:nth-of-type(5):checked ~ .pdgallery-thumbs .pdgallery-thumb:nth-of-type(5),
.pdgallery-radio:nth-of-type(6):checked ~ .pdgallery-thumbs .pdgallery-thumb:nth-of-type(6),
.pdgallery-radio:nth-of-type(7):checked ~ .pdgallery-thumbs .pdgallery-thumb:nth-of-type(7),
.pdgallery-radio:nth-of-type(8):checked ~ .pdgallery-thumbs .pdgallery-thumb:nth-of-type(8),
.pdgallery-radio:nth-of-type(9):checked ~ .pdgallery-thumbs .pdgallery-thumb:nth-of-type(9),
.pdgallery-radio:nth-of-type(10):checked ~ .pdgallery-thumbs .pdgallery-thumb:nth-of-type(10) {
  border-color: var(--ink);
  border-width: 2px;
}

/* --- Блок покупки (название, наличие, цена, цвета, кнопки) --- */
.pdtitle { font-weight: 800; font-size: 28px; line-height: 1.25; letter-spacing: -.01em; margin: 4px 0 14px; }
/* H1 и рейтинг над сеткой (макет: titlerow 30px + ratingrow до .s1grid). */
.pdtitle-top { font-size: 30px; line-height: 1.2; margin: 0 0 6px; }
.pdmeta-row-top { margin-bottom: 20px; }
.pdmeta-row-top .pdmeta-actions { margin-left: auto; }

.pdprice-row { margin: 14px 0 4px; }
.pdprice { font-size: 32px; }

.pdbadge {
  display: inline-block;
  margin: 10px 0 18px;
  background: var(--coral-wash);
  color: var(--coral-d);
  font: 700 11px/1 "Manrope", sans-serif;
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 6px 11px;
  border-radius: 8px;
}

/* Блок «Цвета» — как на боевом сайте: слева метка и подпись текущего цвета
   («Цвета  WH - белый»), справа по краю — круглые свотчи-переключатели.
   Сверху разделитель, отделяющий от цены/плашки. */
.pdcolors-block { display: flex; align-items: center; gap: 14px; margin: 18px 0; padding-top: 18px; border-top: 1px solid var(--line); }
.pdcolors-label { font-weight: 800; color: var(--ink); }
.pdcolors-current { color: var(--muted); font-size: 15px; }
.pdcolors { display: flex; gap: 10px; margin-left: auto; flex: none; }
/* Свотч круглый: текущий — коралловое кольцо с зазором (is-current, без
   ссылки), варианты — свотчи-ссылки с лёгким подъёмом при наведении. */
.pdcolor-sw { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; display: block; cursor: pointer; transition: box-shadow .18s, transform .18s; text-decoration: none; }
.pdcolor-sw:hover { transform: translateY(-1px); }
.pdcolor-sw.is-current { border-color: transparent; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--coral); cursor: default; }

.pdactions { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; }
.pdactions .btn { width: 100%; }
.pdbuy-btn { padding: 17px; font-size: 16px; }
.pdactions-row { display: flex; flex-direction: column; gap: 10px; }
.pdcart-btn, .pdcall-btn { padding: 14px; font-size: 15px; }
.pdactions-links { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.pdaction-link { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pdaction-link:hover { color: var(--coral); }

.pdshortspecs { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pdshortspec-row {
  display: flex;
  justify-content: space-between;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.pdshortspec-row:last-child { border-bottom: 0; }
.pdshortspec-row span { color: var(--muted); }

/* --- Описание, характеристики --- */
.pdsection { margin-top: 44px; }
.pdsection-title { font-weight: 800; font-size: 24px; letter-spacing: -.01em; margin: 0 0 16px; }
/* Лид-абзац описания — как в макете (design/Карточка товара.dc.html):
   15px, обычный вес, приглушённый цвет. Раньше был тёмный (ink) полужирный
   (600) — читался «тяжёлым/чужим шрифтом» на фоне остального текста. */
.pdlead { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0 0 14px; max-width: 820px; }
.pddesc-p { font-size: 14.5px; line-height: 1.75; color: var(--muted); margin: 0 0 14px; max-width: 820px; }
.pddesc-p:last-child { margin-bottom: 0; }

/* Рич-описание (DETAIL_TEXT): в админке это таблица .snippet-product-detail
   с рядами «картинка + текст». Inline-стили Битрикса (Times New Roman,
   центрирование) санитайзер RichText уже срезал — раскладываем ряды в
   блоки картинка+текст, как в макете (design/Карточка товара.dc.html,
   .descrow). Картинка слева, у чётных рядов — справа (чередование). */
.pddesc-rich { margin-top: 6px; }

/* «Мнение эксперта Love-Piano» в карточке — мягкая плашка с коралловым акцентом */
.pdexpert { background: var(--soft); border-left: 3px solid var(--coral); border-radius: 0 16px 16px 0; padding: 24px 28px; }
.pdexpert .pdsection-title { font-size: 20px; margin-bottom: 12px; }
.pdexpert-text p { margin: 0 0 10px; line-height: 1.6; }
.pdexpert-text p:last-child { margin-bottom: 0; }
.pddesc-rich .snippet-product-detail { width: 100%; border-collapse: collapse; }
.pddesc-rich .snippet-product-detail tbody { display: flex; flex-direction: column; gap: 18px; }
.pddesc-rich .snippet-product-detail tr { display: grid; grid-template-columns: 360px 1fr; align-items: stretch; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
/* Лёгкая подсветка при наведении — как у карточек рич-контента в макете
   (.acccard:hover{box-shadow:0 8px 28px rgba(29,29,31,.1)}). */
.pddesc-rich .snippet-product-detail tr:hover { box-shadow: 0 8px 28px rgba(29, 29, 31, .1); border-color: var(--soft2); }
.pddesc-rich .snippet-product-detail td { padding: 0; }
/* Фото ЗАПОЛНЯЕТ свой контейнер (object-fit:cover, во всю высоту ряда),
   без бежевого фона-мата по краям — как в макете. Раньше фон var(--soft)
   был виден вокруг незаполняющей картинки и выглядел бежевой рамкой. */
.pddesc-rich .snippet-product-detail td:first-child { overflow: hidden; }
.pddesc-rich .snippet-product-detail td:first-child img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; display: block; }
.pddesc-rich .snippet-product-detail td:last-child { padding: 26px 30px; display: flex; flex-direction: column; justify-content: center; }
.pddesc-rich .snippet-product-detail b { font-weight: 800; color: var(--ink); }
/* Заголовок ряда — точно как h3 макета: 19px/800/ink. В DETAIL_TEXT он был
   <b><p>…</p></b>, но HTML-парсер выносит блочный <p> из инлайнового <b>
   (b становится пустым), поэтому целимся в ПЕРВЫЙ <p> текстовой ячейки — им
   и оказывается заголовок. Перекрываем общее правило .span (14px muted). */
.pddesc-rich .snippet-product-detail td:last-child > p:first-of-type,
.pddesc-rich .snippet-product-detail td:last-child > p:first-of-type span {
  font-weight: 800; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink);
}
.pddesc-rich .snippet-product-detail td:last-child > p:first-of-type { margin: 0 0 10px; }
.pddesc-rich .snippet-product-detail p,
.pddesc-rich .snippet-product-detail span,
.pddesc-rich .snippet-product-detail li { font-size: 14px; line-height: 1.7; color: var(--muted); }
.pddesc-rich .snippet-product-detail p { margin: 0 0 8px; }
.pddesc-rich .snippet-product-detail ul { margin: 6px 0; padding-left: 20px; }
/* чётные ряды — картинка справа (как чередование в макете) */
.pddesc-rich .snippet-product-detail tr:nth-child(even) { grid-template-columns: 1fr 360px; }
.pddesc-rich .snippet-product-detail tr:nth-child(even) td:first-child { order: 2; }
@media (max-width: 720px) {
  .pddesc-rich .snippet-product-detail tr,
  .pddesc-rich .snippet-product-detail tr:nth-child(even) { grid-template-columns: 1fr; }
  .pddesc-rich .snippet-product-detail tr:nth-child(even) td:first-child { order: 0; }
  .pddesc-rich .snippet-product-detail td:last-child { padding: 18px 20px; }
}

/* Характеристики — CSS-мультиколонки, а не grid: группы разной высоты
   раньше в grid (1fr 1fr) оставляли рваные пробелы под короткими («каша»).
   columns пакует группы по колонкам плотно, break-inside:avoid не рвёт
   группу между колонок. */
.pdspecs-grid { columns: 2; column-gap: 48px; }
.pdspecs-group { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin-bottom: 30px; }
.pdspecs-group:last-child { margin-bottom: 0; }
.pdspecs-group-title { color: var(--coral); margin-bottom: 10px; display: block; }
.pdspecs-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.pdspecs-row span { color: var(--muted); }
.pdspecs-row b { text-align: right; }

/* Блок «Послушайте, как звучит» — аудио-примеры (нативный <audio controls>),
   карточки с подписью тембра и плеером. */
/* Видео-обзор (макет Карточка товара.dc.html, блок VIDEO): сетка превью
   16:9 с коралловой Play-кнопкой. Элемент без YouTube-кода (--bare) —
   текстовая ссылка без превью. */
/* Лента видео с горизонтальным листанием (замечание владельца: роликов
   бывает много) — плитки меньше, скролл со снапом, как у команды/похожих. */
.pdvideo-grid { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.pdvideo-item { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--soft); display: block; flex: none; width: 360px; scroll-snap-align: start; }
@media (max-width: 560px) { .pdvideo-item { width: 82vw; } }
.pdvideo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdvideo-shade { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .15); transition: background .2s; }
.pdvideo-item:hover .pdvideo-shade { background: rgba(0, 0, 0, .28); }
.pdvideo-play { width: 54px; height: 54px; border-radius: 50%; background: var(--coral); display: grid; place-items: center; }
.pdvideo-item--bare { aspect-ratio: auto; padding: 16px 20px; font-weight: 700; color: var(--coral); }
/* Превью — теперь <button> (ролик открывается в модалке, не по ссылке). */
button.pdvideo-item { border: 0; padding: 0; cursor: pointer; font: inherit; }
/* Кнопка-«Видео-обзор» выглядит ровно как ссылка-пилюля .pdmedia-link:
   гасим только браузерные дефолты button, не трогая фон/паддинги класса. */
button.pdmedia-link { border: 0; cursor: pointer; font-family: inherit; }
/* Модальный просмотр видео (video-modal.js) */
.vmodal { position: fixed; inset: 0; z-index: 400; background: rgba(15, 15, 17, .82); display: grid; place-items: center; padding: 24px; }
.vmodal-box { position: relative; width: min(1060px, 100%); }
.vmodal-frame { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.vmodal-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.vmodal-close { position: absolute; right: 0; top: -44px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.vmodal-close:hover { background: var(--coral); }
.vmodal-note { margin-top: 12px; text-align: center; font-size: 13.5px; color: rgba(255, 255, 255, .75); }
.vmodal-note a { color: #fff; text-decoration: underline; }
.vmodal-note a:hover { color: var(--coral); }
@media (max-width: 560px) { .vmodal { padding: 12px; } .vmodal-close { top: -42px; } }
@media (max-width: 640px) {
  .pdvideo-grid { grid-template-columns: 1fr; }
}

.pdaudio-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pdaudio-item { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.pdaudio-name { font-weight: 700; font-size: 14.5px; }
.pdaudio-player { width: 100%; height: 40px; }

/* «Похожие модели, которые также смотрят» — горизонтальный ряд карточек с
   прокруткой (co-view). Карточки — обычные .pcard фикс-ширины. */
.pdsimilar { margin-top: 44px; }
/* align-items: stretch (по умолчанию) тянет .pdsimilar-card до высоты самой
   высокой карточки ряда; .pcard внутри занимает всю высоту (height:100%), а
   цена с кнопкой прижаты к низу (.pricewrap margin-top:auto) — так контейнеры
   одного размера и кнопки «Купить» выровнены, даже если название в 1 строку. */
.pdsimilar-row { display: flex; align-items: stretch; gap: 18px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding: 4px 0 10px; -webkit-overflow-scrolling: touch; }
.pdsimilar-card { flex: 0 0 260px; scroll-snap-align: start; display: flex; }
.pdsimilar-card > .pcard { width: 100%; height: 100%; }
/* Отдельного масштаба больше нет: базовые .pstage-правила (1 → 1.05 на
   hover, см. .pstage img) применяются и здесь — просьба владельца:
   фото крупное, зум лёгкий, инструмент не заходит за рамку карточки. */
.pdsimilar-row::-webkit-scrollbar { height: 6px; }
.pdsimilar-row::-webkit-scrollbar-thumb { background: var(--soft2); border-radius: 6px; }
@media (max-width: 640px) { .pdsimilar-card { flex-basis: 220px; } }

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

@media (max-width: 640px) {
  .pdtitle { font-size: 23px; }
  .pdprice { font-size: 26px; }
  .pdspecs-grid { columns: 1; }
  .pdgallery-thumb { width: 66px; }
  .pdactions { flex-direction: column; align-items: stretch; }
}

/* --- Звёзды рейтинга (общий хелпер View\Stars): золотые заполненные и
   контурные пустые; размер задаёт контекст (у H1, в сводке, в карточке). */
.pdstars { display: inline-flex; gap: 2px; color: var(--gold); line-height: 0; }
.pdstars svg { width: 14px; height: 14px; display: block; }

/* Рейтинг под заголовком карточки (ratingrow макета): рейтинг слева,
   «Сравнить»/«В избранное» справа — ВСЕГДА в одну строку, без переноса на
   вторую, при любой ширине и любом состоянии кнопок.

   Почему кнопки — всегда иконки (подпись скрыта визуально, но доступна
   скринридеру и в tooltip): колонка покупки узкая (~400px даже на десктопе),
   а в активном состоянии подписи ЕЩЁ длиннее («Сравнить»→«В сравнении»,
   «В избранное»→«В избранном»). Рейтинг + две подписанные кнопки в эту
   ширину не помещаются и строка ломалась на две. Иконки (≈2×20px) занимают
   ~56px — рейтинг + иконки укладываются с большим запасом при любом раскладе.
   Состояние (в списке/нет) видно по цвету и заливке иконки. Рейтинг тоже без
   переноса (nowrap) — звёзды и «4,9 · N отзывов» держим в одну строку. */
.pdmeta-row { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; margin-bottom: 18px; }
.pdrating { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.pdrating .pdstars { flex: none; }
.pdrating .pdstars svg { width: 16px; height: 16px; }
.pdrating-text { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pdrating-text a { color: var(--muted); text-decoration: underline; }
.pdmeta-actions { display: inline-flex; gap: 16px; margin-left: auto; flex: none; }
.pdmeta-btn { display: inline-flex; align-items: center; gap: 6px; padding: 2px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; white-space: nowrap; color: var(--muted); transition: color .15s; }
.pdmeta-btn:hover { color: var(--coral); }
.pdmeta-btn-ico { display: inline-flex; }
.pdmeta-btn-ico svg { width: 20px; height: 20px; }
.pdmeta-btn.is-on { color: var(--coral); }
.pdmeta-btn-fav.is-on .pdmeta-btn-ico svg { fill: var(--coral); stroke: var(--coral); }
/* Подпись «Сравнить»/«В избранное» видна рядом с иконкой (как в макете,
   pactions → palabel); product-actions.js обновляет её текст по состоянию. */
.pdmeta-btn-label { display: inline; }
/* На узком мобильном подписи не влезают рядом с ценой/рейтингом — прячем,
   оставляя иконки (доступное имя сохраняется в title/aria кнопки). */
@media (max-width: 520px) {
  .pdmeta-btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* --- Секция «Отзывы» карточки товара (REVIEWS макета). */
.pdreviews-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.pdreviews-head .pdsection-title { margin: 0; }
.pdreviews-count { color: var(--faint); font-weight: 800; }
.pdreview-add { padding: 11px 18px; white-space: nowrap; flex: none; }

.pdrevgrid { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }

/* Сводка рейтинга слева. */
.pdrev-summary { border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.pdrev-scorerow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pdrev-score { font-weight: 800; font-size: 44px; letter-spacing: -.02em; line-height: 1; }
.pdrev-scoremeta .pdstars svg { width: 15px; height: 15px; }
.pdrev-scorenote { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.pdrev-bars { display: flex; flex-direction: column; gap: 9px; }
.pdrev-bar { display: grid; grid-template-columns: 84px 1fr 32px; gap: 10px; align-items: center; font-size: 12.5px; }
.pdrev-bar-name { color: var(--muted); }
.pdrev-bar-track { height: 7px; border-radius: 5px; background: var(--soft2); position: relative; overflow: hidden; }
.pdrev-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--coral); border-radius: 5px; }
.pdrev-bar-val { text-align: right; }

/* Список отзывов справа. По умолчанию видны первые два, остальные
   раскрываются кнопкой «Читать дальше» — чистый CSS (чекбокс + :checked ~),
   без JS. Действует и на десктопе, и на мобиле. */
.pdrev-list { display: flex; flex-direction: column; gap: 14px; }
.pdrev-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.pdrev-list .pdrevcard:nth-of-type(n+3) { display: none; }
.pdrev-toggle:checked ~ .pdrevcard:nth-of-type(n+3) { display: block; }
.pdrev-toggle:checked ~ .pdrev-more { display: none; }
.pdrev-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 1.5px solid var(--line); border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color .18s; }
.pdrev-more:hover { border-color: var(--ink); }
.pdrev-more::after { content: "↓"; font-weight: 800; }
.pdrevcard { border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.pdrevcard-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.pdrevcard-author { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pdrev-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--coral-wash); color: var(--coral-d); display: grid; place-items: center; font-weight: 800; flex: none; }
.pdrev-name { font-size: 14.5px; display: block; }
.pdrev-meta { font-size: 12px; color: var(--faint); }
.pdrevcard-head .pdstars { flex: none; }
.pdrev-text { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; }

@media (max-width: 820px) {
  .pdrevgrid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 560px) {
  .pdreviews-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pdrevcard-head { flex-wrap: wrap; }
}

/* --- Секция «Комплекты» карточки товара (BUNDLES макета). */
.pdbundles-sub { font-size: 14px; color: var(--muted); margin: -8px 0 22px; max-width: 720px; }
.pdbundle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.pdbundle { border: 1px solid var(--line); border-radius: 18px; padding: 20px; position: relative; display: flex; flex-direction: column; }
.pdbundle-choice { border: 1.5px solid var(--coral); }
.pdbundle-choice-badge { position: absolute; top: -10px; left: 20px; background: var(--coral); color: #fff; padding: 5px 11px; border-radius: 8px; }
.pdbundle-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.pdbundle-title { font-size: 15px; }
.pdbundle-gift { background: var(--coral-wash); color: var(--coral-d); padding: 5px 10px; border-radius: 8px; white-space: nowrap; }
.pdbundle-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pdbundle-plus { text-align: center; color: var(--faint); line-height: 1; }
.pdbundle-item { display: flex; gap: 14px; align-items: center; }
/* Фото позиций комплекта укрупнены до 84px (в макете были 52px) по просьбе
   владельца — так предметы читаются лучше и блок смотрится гармоничнее. */
.pdbundle-pic { width: 84px; height: 84px; border-radius: 12px; background: var(--soft); flex: none; overflow: hidden; display: block; }
.pdbundle-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdbundle-item-info { font-size: 13px; min-width: 0; }
.pdbundle-item-type { color: var(--muted); }
.pdbundle-item-name { display: block; }
.pdbundle-item-price { margin-top: 1px; }
.pdbundle-item-mainprice { color: var(--muted); }
.pdbundle-free { color: var(--green); font-weight: 700; }
.pdbundle-item-old { color: var(--faint); text-decoration: line-through; margin-left: 6px; }
.pdbundle-foot { border-top: 1px solid var(--line); padding-top: 14px; margin-top: auto; }
.pdbundle-save { font-size: 12.5px; color: var(--green); font-weight: 700; margin-bottom: 2px; }
.pdbundle-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.pdbundle-price { font-size: 20px; }
.pdbundle-old { font-size: 13px; color: var(--faint); text-decoration: line-through; }
.pdbundle-btn { width: 100%; padding: 12px; }

@media (max-width: 900px) {
  .pdbundle-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pdbundle-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   RESPONSIVE
   Ниже — то же поведение, что в общем "RESPONSIVE"-блоке всех
   20 макетов, но на классах вместо [style*="..."]. Три правила
   ниже раньше цеплялись за инлайн-стиль элементов, у которых уже
   БЫЛ подходящий класс (.hdrmid/.topbar/.searchbox) — здесь это
   просто исправлено, никакой новый класс не понадобился.
   ========================================================= */

@media (max-width: 1200px) {
  .foottel { text-align: left; margin-left: 0; }
}

@media (max-width: 1080px) {
  /* Только горизонталь: шорткат padding: 0 24px обнулял бы и вертикальные
     отступы .page-main (main.wrap page-main — правило ниже по файлу
     перекрывало padding-bottom: 56px, и контент прилипал к подвалу). */
  .wrap { padding-left: 24px; padding-right: 24px; }
  .footrow { gap: 24px; }
}

@media (min-width: 821px) {
  .hdrmid { flex-wrap: nowrap; }
}

/* Узкий десктоп: как в макете — дескриптор (слоган слева) уходит, а
   инфо-меню топбара (Доставка/Гарантия/…) и город остаются в ОДНУ строку.
   Раньше при этой ширине слоган+меню не помещались и вся полоса ломалась
   на две строки. Диапазон 821–960: ниже 821 включается мобильная шапка. */
@media (min-width: 821px) and (max-width: 960px) {
  .topbar-slogan { display: none; }
}

@media (max-width: 820px) {
  .topbar { flex-wrap: nowrap; gap: 8px; padding-top: 6px; padding-bottom: 6px; min-height: 40px; }
  .topbar-slogan { display: none; }
  .lpnav-top { display: none; }
  /* overflow:hidden убран — он обрезал выпадашку выбора города. Эллипсис
     длинного названия — на самом тексте триггера (не на контейнере). */
  .cityp { margin-left: 0; margin-right: auto; font-size: 14px; min-width: 0; }
  .cityp-trigger { max-width: 48vw; }
  .cityp-trigger [data-city-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Позицию выпадашки города на любой ширине считает city-select.js по
     координатам триггера (fixed + clamp к краям окна) — отдельное мобильное
     CSS-правило не нужно. */

  .mburger { display: grid; }
  .hdrmid { gap: 12px; padding-top: 9px; padding-bottom: 9px; }
  .searchwrap { max-width: none; }
  .micons { display: flex; }
  /* Обе кнопки полосы одной высоты 36px (были 40 и 32 — заметно разные). */
  .mphone { display: inline-flex; width: 36px; height: 36px; }
  .deskphone { display: none; }
  .deskcall { display: inline-flex; align-items: center; height: 36px; padding: 0 15px; font-size: 12px; background: #fff; color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
  /* На мобильном кнопка белая — при наведении НЕ заливаем красным (как в
     макете), только подсвечиваем коралловой рамкой/текстом. */
  .deskcall:hover { background: #fff; color: var(--coral); border-color: var(--coral); box-shadow: none; }
  .catrow { display: none; }

  /* Визуальный перенос кнопки звонка и телефона в верхнюю полосу
     (topbar), без единой строчки JS. В оригинале это делал скрипт
     mobile-nav.js — физически перемещал .deskcall/.mphone из средней
     строки шапки (.hdrmid) в .topbar на этой ширине и возвращал
     обратно на широких экранах (см. design/mobile-nav.js). Здесь DOM
     не трогаем, только координаты: у .deskcall/.mphone в этом медиа-
     диапазоне ближайший ПОЗИЦИОНИРОВАННЫЙ предок — не .lp-header
     (у него position:relative, но он не ближайший по дереву), а
     .hdr-main — он position:sticky, а sticky тоже создаёт containing
     block для потомков. Полоса topbar-outer здесь 41px (min-height:40px
     у .topbar + 1px border-bottom), обе кнопки — 36px (см. выше):
     top:-39px центрирует их в полосе (по 2px сверху и снизу). Если
     высота .topbar или кнопок изменится — пересчитать вместе. */
  .deskcall,
  .mphone {
    position: absolute;
    top: -39px;
    right: 24px;
  }
  .deskcall { right: 72px; }
}

@media (max-width: 600px) {
  .mlogo-full { display: none; }
  .mlogo-mark { display: block; }
}

@media (max-width: 560px) {
  /* Как и на 820: только горизонталь, вертикаль .page-main не гасим. */
  .wrap { padding-left: 15px; padding-right: 15px; }
  .searchbox input { display: none; }
  .searchbox { flex: none; width: 44px; min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
  .searchbox svg { position: static; transform: none; width: 22px; height: 22px; stroke: var(--ink); }
  .searchgo { position: static; transform: none; width: 44px; height: 44px; padding: 0; }
  .page-title { font-size: 25px; }

  /* Порядок нижнего мобильного ряда 1:1 с макетом: бургер · иконка-поиск ·
     лого-сердце ПО ЦЕНТРУ · избранное/сравнение/корзина. Иконки поиска и
     корзины лежат в .searchwrap — на этой ширине раскрываем её (display:
     contents), чтобы её дети встали прямыми флекс-элементами шапки и их
     можно было упорядочить относительно лого; логотип с margin:0 auto
     центрируется в свободном пространстве (как в макете). */
  .searchwrap { display: contents; }
  .mburger { order: 0; }
  .searchbox { order: 1; }
  .mlogo { order: 2; margin: 0 auto; }
  .micons { order: 3; }

  /* Кнопка «Заказать звонок» остаётся в верхней полосе (как в макете —
     Москва · Заказать звонок · телефон), а не прячется. Телефон у правого
     края (15px), кнопка — слева от него. */
  .mphone { right: 15px; }
  .deskcall { right: 71px; }
}

@media (max-width: 400px) {
  .cityp { font-size: 13px; }
}

@media (max-width: 720px) {
  .footrow { flex-wrap: wrap; gap: 24px 32px; }
  .footrow > .foot-brand { flex-basis: 100%; }
  .foottel { text-align: left; margin-left: 0; }
}

/* ===== Страница 404 ===== */
/* Источник — LOVE-PIANO/design/404.html (Bundled Page, см. отчёт задачи). */

.err404 { padding-top: 26px; }

.err404-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }

.err404-eb { color: var(--coral); display: block; margin-bottom: 18px; }
.err404-title { font-weight: 800; font-size: 32px; line-height: 1.14; letter-spacing: -.02em; margin: 0 0 16px; }
.err404-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 28px; max-width: 480px; }

.err404-search { position: relative; max-width: 460px; margin-bottom: 22px; }
.err404-search-input {
  width: 100%;
  height: 56px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 0 54px 0 20px;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  outline: none;
}
.err404-search-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--coral);
  display: grid;
  place-items: center;
  cursor: pointer;
  border: none;
  padding: 0;
}

.err404-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.err404-visual {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(135deg, #1d1d1f, #2c2224 60%, #3a1c1d);
  min-height: 360px;
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  padding: 24px;
}
.err404-code {
  font-weight: 800;
  font-size: 150px;
  line-height: .9;
  letter-spacing: -.04em;
  background: linear-gradient(180deg, #fff, #ff8a7a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.err404-keys { margin: 18px auto 0; width: 200px; animation: err404float 4s ease-in-out infinite; }
.err404-hint { font-size: 13.5px; color: rgba(255, 255, 255, .6); margin-top: 16px; }

@keyframes err404float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-12px) rotate(-3deg); }
}

.err404-links { margin-top: 44px; }
.err404-links-title { font-weight: 800; font-size: 18px; margin-bottom: 16px; }
.err404-links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.qlink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.qlink:hover { box-shadow: 0 12px 28px rgba(29, 29, 31, .1); transform: translateY(-2px); border-color: var(--coral-wash); }
.qlink-ico { width: 42px; height: 42px; border-radius: 11px; background: var(--coral-wash); display: grid; place-items: center; flex: none; color: var(--coral); }
.qlink-title { display: block; font-weight: 700; font-size: 15px; }
.qlink-text { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

@media (max-width: 820px) {
  .err404-grid { grid-template-columns: 1fr; text-align: center; }
  .err404-lead { margin-left: auto; margin-right: auto; }
  .err404-actions { justify-content: center; }
  .err404-code { font-size: 110px; }
}

@media (max-width: 560px) {
  .err404-links-grid { grid-template-columns: 1fr; }
  .err404-code { font-size: 82px; }
  .err404-title { font-size: 24px; }
}

/* ===== Новости (список + детальная) ===== */
/* Источник — LOVE-PIANO/design/Новости.html (Bundled Page, экраны LIST
   VIEW/ARTICLE VIEW, см. отчёт задачи). Рубрик-бейджей карточек здесь
   нет — данных под них в базе не существует (см. templates/pages/news-list.php). */

.news-hero { padding-top: 14px; max-width: 720px; }
.news-lead { font-size: 16px; color: var(--muted); margin: 10px 0 0; }

.news-card {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .2s, transform .2s;
  margin-top: 26px;
}
.news-card:hover { box-shadow: 0 14px 34px rgba(29, 29, 31, .12); transform: translateY(-3px); }
.news-card--featured { flex-direction: row; }
.news-card:not(.news-card--featured) { flex-direction: column; margin-top: 0; }

.news-card-media { position: relative; background: var(--soft); flex: none; display: block; overflow: hidden; }
.news-card--featured .news-card-media { width: 44%; min-height: 280px; }
.news-card:not(.news-card--featured) .news-card-media { aspect-ratio: 16 / 9; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; }
.news-card--featured .news-card-media img { position: absolute; inset: 0; }
.news-card-ph { display: grid; place-items: center; height: 100%; min-height: 140px; color: var(--faint); font-size: 12.5px; font-weight: 600; text-align: center; padding: 16px; }

.news-card-body { display: flex; flex-direction: column; padding: 26px; flex: 1; }
.news-card:not(.news-card--featured) .news-card-body { padding: 18px; }
.news-card-date { font-size: 12.5px; color: var(--faint); font-weight: 600; margin-bottom: 8px; }
.news-card-title { font-weight: 800; font-size: 20px; line-height: 1.25; margin-bottom: 10px; color: var(--ink); display: block; }
.news-card:not(.news-card--featured) .news-card-title { font-size: 16px; }
.news-card-excerpt { font-size: 14px; line-height: 1.6; color: var(--muted); margin-bottom: 14px; display: block; }
/* Нижняя строка сеточной карточки: дата слева, «Читать →» справа (макет). */
.news-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.news-card-foot .news-card-date { margin-bottom: 0; }
.news-card-foot .news-card-more { margin-top: 0; }
.news-card-more { margin-top: auto; font-weight: 700; font-size: 13px; color: var(--coral); }

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }

@media (max-width: 900px) {
  .news-card--featured { flex-direction: column; }
  .news-card--featured .news-card-media { width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
}

@media (max-width: 820px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* --- Детальная страница новости --- */

.news-article { max-width: 760px; margin: 0 auto; padding-top: 14px; }
.news-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 18px; }
.news-back:hover { color: var(--coral); }
.news-article-date { color: var(--coral); display: block; margin-bottom: 14px; }
.news-article-title { font-weight: 800; font-size: 34px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 22px; }
.news-article-media { border-radius: 18px; overflow: hidden; margin-bottom: 28px; background: var(--soft); }
/* Картинка-финал (две разные картинки у новости — см. news-detail.php):
   стоит после текста, отступ сверху вместо снизу. */
.news-article-media--end { margin-top: 28px; margin-bottom: 0; }
.news-article-media img { width: 100%; height: auto; display: block; }
.news-article-body p { font-size: 16px; line-height: 1.75; color: #33333a; margin: 0 0 18px; }
.news-article-body p:last-child { margin-bottom: 0; }

.news-cta {
  background: var(--coral-wash);
  border-radius: 16px;
  padding: 24px;
  margin: 34px 0 0;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.news-cta-text { flex: 1; min-width: 240px; }
.news-cta-title { font-weight: 800; font-size: 18px; margin-bottom: 4px; }
.news-cta-sub { font-size: 14px; color: var(--muted); }
/* Кнопка-телефон в полосе: в макетах размер задан inline (~15px 28px,
   f16). Полосы blog/svc/promo дублируют news 1:1 (см. докблоки ниже),
   поэтому правило общее на все четыре. */
.news-cta .btn, .blog-cta .btn, .svc-cta .btn, .promo-cta .btn { padding: 15px 28px; font-size: 16px; }

@media (max-width: 640px) {
  .news-article-title { font-size: 26px; }
}

/* ===== Блог (список + детальная) ===== */
/* Источник — LOVE-PIANO/design/Блог.dc.html (LIST VIEW/ARTICLE VIEW,
   см. отчёт задачи). Правила намеренно дублируют .news-* один в один —
   оба раздела верстаются по одному и тому же визуальному языку "постов",
   но это РАЗНЫЕ инфоблоки с разными шаблонами (см. докблок
   BlogRepository), поэтому и классы разные, а не общие. Рубрик-бейджей
   карточек здесь нет — данных под них в базе не существует (см.
   templates/pages/blog-list.php). */

.blog-hero { padding-top: 14px; max-width: 720px; }
.blog-lead { font-size: 16px; color: var(--muted); margin: 10px 0 0; }

.blog-card {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .2s, transform .2s;
  margin-top: 26px;
}
.blog-card:hover { box-shadow: 0 14px 34px rgba(29, 29, 31, .12); transform: translateY(-3px); }
.blog-card--featured { flex-direction: row; }
.blog-card:not(.blog-card--featured) { flex-direction: column; margin-top: 0; }

.blog-card-media { position: relative; background: var(--soft); flex: none; display: block; overflow: hidden; }
.blog-card--featured .blog-card-media { width: 44%; min-height: 280px; }
.blog-card:not(.blog-card--featured) .blog-card-media { aspect-ratio: 16 / 9; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card--featured .blog-card-media img { position: absolute; inset: 0; }
.blog-card-ph { display: grid; place-items: center; height: 100%; min-height: 140px; color: var(--faint); font-size: 12.5px; font-weight: 600; text-align: center; padding: 16px; }

.blog-card-body { display: flex; flex-direction: column; padding: 26px; flex: 1; }
.blog-card:not(.blog-card--featured) .blog-card-body { padding: 18px; }
.blog-card-date { font-size: 12.5px; color: var(--faint); font-weight: 600; margin-bottom: 8px; }
.blog-card-title { font-weight: 800; font-size: 20px; line-height: 1.25; margin-bottom: 10px; color: var(--ink); display: block; }
.blog-card:not(.blog-card--featured) .blog-card-title { font-size: 16px; }
.blog-card-excerpt { font-size: 14px; line-height: 1.6; color: var(--muted); margin-bottom: 14px; display: block; }
.blog-card-more { margin-top: auto; font-weight: 700; font-size: 13px; color: var(--coral); }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }

@media (max-width: 900px) {
  .blog-card--featured { flex-direction: column; }
  .blog-card--featured .blog-card-media { width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
}

@media (max-width: 820px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* --- Детальная страница статьи блога --- */

.blog-article { max-width: 760px; margin: 0 auto; padding-top: 14px; }
.blog-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 18px; }
.blog-back:hover { color: var(--coral); }
.blog-article-date { color: var(--coral); display: block; margin-bottom: 14px; }
.blog-article-title { font-weight: 800; font-size: 34px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 22px; }
.blog-article-media { border-radius: 18px; overflow: hidden; margin-bottom: 28px; background: var(--soft); }
.blog-article-media img { width: 100%; height: auto; display: block; }
.blog-article-body p { font-size: 16px; line-height: 1.75; color: #33333a; margin: 0 0 18px; }
.blog-article-body p:last-child { margin-bottom: 0; }

/* Богатая вёрстка статьи (ArticleHtml): заголовки, списки, таблицы,
   картинки и ссылки из битриксового контента. */
.blog-article-rich h2 { font-size: 26px; font-weight: 800; line-height: 1.25; margin: 34px 0 14px; color: var(--ink); }
.blog-article-rich h3 { font-size: 21px; font-weight: 700; line-height: 1.3; margin: 28px 0 12px; color: var(--ink); }
.blog-article-rich h4, .blog-article-rich h5, .blog-article-rich h6 { font-size: 17px; font-weight: 700; margin: 22px 0 10px; color: var(--ink); }
.blog-article-rich p:empty { display: none; }
.blog-article-rich ul, .blog-article-rich ol { margin: 0 0 18px; padding-left: 24px; }
.blog-article-rich li { font-size: 16px; line-height: 1.7; color: #33333a; margin: 0 0 8px; }
.blog-article-rich a { color: var(--coral, #e2231a); text-decoration: underline; text-underline-offset: 2px; }
.blog-article-rich a:hover { text-decoration: none; }
/* max-height: продуктовые фото из каталога квадратные и на всю ширину
   колонки занимали бы целый экран — ограничиваем высоту, пропорции
   сохраняет width:auto (решение владельца 31.07: «фото занимают очень
   много места»). */
.blog-article-rich img { display: block; max-width: 100%; width: auto; height: auto; max-height: 440px; margin: 22px auto; border-radius: 14px; }
.blog-article-rich blockquote { margin: 22px 0; padding: 14px 20px; border-left: 3px solid var(--coral, #e2231a); background: #faf7f2; border-radius: 0 12px 12px 0; }
.blog-article-rich figure { margin: 26px auto; text-align: center; }
.blog-article-rich figure img { margin: 0 auto 10px; }
.blog-article-rich figcaption { font-size: 13px; color: var(--muted); }
.blog-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.blog-article-rich table { display: block; overflow-x: auto; border-collapse: collapse; margin: 22px 0; max-width: 100%; }
.blog-article-rich th, .blog-article-rich td { border: 1px solid #e6e0d6; padding: 10px 14px; font-size: 15px; line-height: 1.5; text-align: left; vertical-align: top; }
.blog-article-rich th { background: #faf7f2; font-weight: 700; }

/* Авторский блок Артёма — в конце каждой статьи блога. */
.blog-author { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 34px; padding: 22px 24px; background: #faf7f2; border: 1px solid #eee7db; border-radius: 18px; }
.blog-author-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.blog-author-text { flex: 1; min-width: 240px; }
.blog-author-name { font-weight: 800; font-size: 18px; }
.blog-author-role { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--coral, #e2231a); margin: 2px 0 6px; }
.blog-author-note { font-size: 14px; line-height: 1.55; color: var(--muted); }
.blog-author-btn { padding: 15px 28px; font-size: 15px; white-space: nowrap; }

.blog-cta {
  background: var(--coral-wash);
  border-radius: 16px;
  padding: 24px;
  margin: 34px 0 0;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.blog-cta-text { flex: 1; min-width: 240px; }
.blog-cta-title { font-weight: 800; font-size: 18px; margin-bottom: 4px; }
.blog-cta-sub { font-size: 14px; color: var(--muted); }

@media (max-width: 640px) {
  .blog-article-title { font-size: 26px; }
}

/* ===== Услуги (список + детальная) ===== */
/* Источник — LOVE-PIANO/design/Услуги.dc.html. Заголовок и вводный
   абзац перенесены из макета дословно (см. templates/pages/service-list.php);
   сетка карточек в макете была icon+цена по придуманным данным без
   реальных фото — здесь вместо неё тот же визуальный приём "картинка +
   заголовок + выжимка", что и у .news-card/.blog-card выше (см. докблок
   partials/service-card.php), классы свои — это отдельный инфоблок. */

.svc-hero { padding-top: 14px; max-width: 760px; }
.svc-lead { font-size: 16px; color: var(--muted); margin: 10px 0 0; }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }

.svc-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .2s, transform .2s;
}
.svc-card:hover { box-shadow: 0 14px 34px rgba(29, 29, 31, .12); transform: translateY(-3px); }

.svc-card-media { position: relative; background: var(--soft); aspect-ratio: 16 / 9; display: block; overflow: hidden; }
.svc-card-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-card-ph { display: grid; place-items: center; height: 100%; min-height: 140px; color: var(--faint); font-size: 12.5px; font-weight: 600; text-align: center; padding: 16px; }

.svc-card-body { display: flex; flex-direction: column; padding: 22px; flex: 1; }
.svc-card-title { font-weight: 800; font-size: 18px; line-height: 1.25; margin-bottom: 10px; color: var(--ink); display: block; }
.svc-card-excerpt { font-size: 14px; line-height: 1.6; color: var(--muted); margin-bottom: 14px; display: block; }
.svc-card-more { margin-top: auto; font-weight: 700; font-size: 13px; color: var(--coral); }

@media (max-width: 820px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* --- Утилиты секций контентных страниц (перенос макетов: услуги, акции,
       доставка, гарантия, о нас). Адаптив на классах, а не на инлайн-гриде
       макета (который в движке не респонсивится). --- */
.psection { padding-top: 52px; }
.psection-h { font-weight: 800; font-size: 28px; letter-spacing: -.01em; margin: 0 0 24px; }
.pgrid { display: grid; gap: 18px; }
.pgrid-2 { grid-template-columns: repeat(2, 1fr); }
.pgrid-3 { grid-template-columns: repeat(3, 1fr); }
.pgrid-4 { grid-template-columns: repeat(4, 1fr); }
.pgrid-split { grid-template-columns: 1.3fr 1fr; align-items: center; }
@media (max-width: 860px) {
  .pgrid-3, .pgrid-4 { grid-template-columns: 1fr 1fr; }
  .pgrid-split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pgrid-2, .pgrid-3, .pgrid-4 { grid-template-columns: 1fr; }
}
/* Тёмная плашка «персональный специалист» и т.п. */
.pband-dark { background: var(--ink); border-radius: 22px; padding: 40px 44px; color: #fff; }
.pband-soft { background: var(--coral-wash); border-radius: 22px; padding: 38px 44px; }
.pcard-b { border: 1px solid var(--line); border-radius: 18px; padding: 26px; background: #fff; }
.pstep { position: relative; }
.pstep-n { position: absolute; top: -14px; left: 24px; width: 32px; height: 32px; border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
@media (max-width: 700px) {
  .pband-dark, .pband-soft { padding: 30px 22px; }
}

/* --- Детальная страница услуги --- */

.svc-article { max-width: 760px; margin: 0 auto; padding-top: 14px; }
.svc-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 18px; }
.svc-back:hover { color: var(--coral); }
.svc-article-title { font-weight: 800; font-size: 34px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 22px; }
.svc-article-media { border-radius: 18px; overflow: hidden; margin-bottom: 28px; background: var(--soft); }
.svc-article-media img { width: 100%; height: auto; display: block; }
.svc-article-body p { font-size: 16px; line-height: 1.75; color: #33333a; margin: 0 0 18px; }
.svc-article-body p:last-child { margin-bottom: 0; }

.svc-cta {
  background: var(--coral-wash);
  border-radius: 16px;
  padding: 24px;
  margin: 34px 0 0;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.svc-cta-text { flex: 1; min-width: 240px; }
.svc-cta-title { font-weight: 800; font-size: 18px; margin-bottom: 4px; }
.svc-cta-sub { font-size: 14px; color: var(--muted); }

@media (max-width: 640px) {
  .svc-article-title { font-size: 26px; }
}

/* ===== Акции (список + детальная) ===== */
/* Источник — LOVE-PIANO/design/Акции.dc.html. Заголовок и вводный абзац
   перенесены из макета дословно (см. templates/pages/promo-list.php).
   НЕ перенесены из макета: фильтр-чипы по рубрикам (в базе нет
   соответствующего свойства, тот же принцип, что и у бейджей рубрик
   блога/новостей), крупный баннер "акция месяца" (не поле базы) и
   таймер/срок "до {дата}" на карточке (границы задачи исключают
   таймер обратного отсчёта, см. докблок promo-list.php). Карточка —
   тот же приём "картинка + заголовок + выжимка", что и у .svc-card
   выше, вместо декоративного цветного градиента макета. */

.promo-hero { padding-top: 14px; max-width: 760px; }
.promo-lead { font-size: 16px; color: var(--muted); margin: 10px 0 0; }

.promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }

.promo-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .2s, transform .2s;
}
.promo-card:hover { box-shadow: 0 14px 34px rgba(29, 29, 31, .12); transform: translateY(-3px); }

/* Фото карточек готовятся ровно 16:9 (PromoCatalog cardImage) и заполняют
   зону целиком; товарные — на белом, поэтому фон медиа-зоны белый, а от
   тела карточки её отделяет фирменная линия. contain — чтобы чужое фото
   иной пропорции (напр. битриксовый баннер с текстом) не обрезалось. */
.promo-card-media { position: relative; background: #fff; border-bottom: 1px solid var(--line); aspect-ratio: 16 / 9; display: block; overflow: hidden; }
.promo-card-media img { width: 100%; height: 100%; object-fit: contain; }
/* Текстовая карточка (без фото): коралловая полоса сверху вместо медиа-зоны. */
.promo-card--text { border-top: 3px solid var(--coral); }

/* ===== «Богатая» детальная страница акции (PromoCatalog, 30.07) ===== */
.prm-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 28px; align-items: center; margin-bottom: 26px; }
.prm-hero-media { border-radius: 18px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); }
.prm-hero-media img { width: 100%; height: 100%; max-height: 320px; object-fit: cover; display: block; }
.prm-lead { font-size: 16.5px; line-height: 1.6; color: var(--muted); margin: 12px 0 0; }
/* Число колонок фактов задаёт шаблон классом по количеству карточек:
   3 факта — три колонки, 4 — четыре (на планшете 2×2) — карточка-«сирота»
   на второй строке не появляется (замечание владельца). */
.prm-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0; }
.prm-facts--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .prm-facts--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .prm-facts, .prm-facts--4 { grid-template-columns: 1fr; } }
.prm-fact { background: var(--coral-wash); border-radius: 16px; padding: 20px 22px; }
.prm-fact-num { display: block; font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: var(--coral-d); }
.prm-fact-label { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 6px; }
.prm-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.prm-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: 14px; color: var(--ink); }
.prm-chip svg { display: block; flex: none; }
.prm-steps { display: grid; gap: 12px; margin: 22px 0; }
.prm-step { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.prm-step-num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--coral); color: #fff; font-weight: 800; font-size: 15px; display: grid; place-items: center; }
.prm-step-title { display: block; font-weight: 800; font-size: 15.5px; line-height: 1.3; }
.prm-step-text { display: block; font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 4px; }
.prm-photo { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); margin: 22px 0; }
.prm-photo img { width: 100%; max-height: 380px; object-fit: cover; display: block; }
.prm-ctarow { margin: 26px 0 8px; }
.prm-ctabtn { display: inline-block; }
@media (max-width: 760px) { .prm-hero { grid-template-columns: 1fr; } .prm-hero-media img { max-height: 220px; } }

.promo-card-body { display: flex; flex-direction: column; padding: 22px; flex: 1; }
.promo-card-tag { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); margin-bottom: 8px; }
.promo-card-title { font-weight: 800; font-size: 18px; line-height: 1.22; margin-bottom: 10px; color: var(--ink); display: block; }
.promo-card-excerpt { font-size: 14px; line-height: 1.6; color: var(--muted); margin-bottom: 14px; display: block; }
.promo-card-more { margin-top: auto; font-weight: 700; font-size: 13px; color: var(--coral); }

@media (max-width: 820px) {
  .promo-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* --- Детальная страница акции --- */

.promo-article { max-width: 760px; margin: 0 auto; padding-top: 14px; }
.promo-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 18px; }
.promo-back:hover { color: var(--coral); }
.promo-article-title { font-weight: 800; font-size: 34px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 22px; }
.promo-article-media { border-radius: 18px; overflow: hidden; margin-bottom: 28px; background: var(--soft); }
.promo-article-media img { width: 100%; height: auto; display: block; }
.promo-article-body p { font-size: 16px; line-height: 1.75; color: #33333a; margin: 0 0 18px; }
.promo-article-body p:last-child { margin-bottom: 0; }

.promo-cta {
  background: var(--coral-wash);
  border-radius: 16px;
  padding: 24px;
  margin: 34px 0 0;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.promo-cta-text { flex: 1; min-width: 240px; }
.promo-cta-title { font-weight: 800; font-size: 18px; margin-bottom: 4px; }
.promo-cta-sub { font-size: 14px; color: var(--muted); }

@media (max-width: 640px) {
  .promo-article-title { font-size: 26px; }
}

/* ===== Главная ===== */
/* Источник — LOVE-PIANO/design/Главная.dc.html. Адаптив только на
   классах (см. решение №2 в docs/superpowers/specs/2026-07-20-lovepiano-vitrina-verstka-design.md) —
   в макете те же переходы цеплялись за подстроку в style=, здесь
   переписаны на явные классы .home-*. */

.home-section { padding-top: 52px; }
.home-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.home-section-title { font-weight: 800; font-size: 27px; letter-spacing: -.01em; margin: 0 0 20px; }
.home-section-head .home-section-title { margin-bottom: 0; }
.home-section-more { font-size: 14px; font-weight: 700; color: var(--coral); white-space: nowrap; }

/* Акции — визуальные карточки с реальным баннером (previewImage):
   фото-обложка сверху с коралловой плашкой «Акция», под ней заголовок,
   выжимка и стрелка. Заменили прежние плоские бежевые боксы без фото —
   выглядели шаблонно (просьба владельца переосмыслить блок). */
/* Акции — текстовый блок после «Авторизованный дилер» (решение владельца:
   без картинок, только аккуратный текст на коралловой подложке). */
/* ===== Акции и выгода (handoff design_handoff_home_blocks, 30.07) ===== */
.promo2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.promo2-eb { color: var(--coral); display: block; margin-bottom: 8px; }
.promo2-nav { display: flex; align-items: center; gap: 14px; }
.bnav-group { display: flex; gap: 8px; }
.bnav { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; font-size: 15px; font-weight: 700; font-family: inherit; padding: 0; transition: background .15s, border-color .15s, opacity .15s; }
.bnav:hover { background: var(--soft); border-color: var(--coral); color: var(--coral); }
.bnav-dim { opacity: .4; }
.promogrid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
/* Фича — по дизайн-референсу design/promo-card-cp300.html: красные акценты
   по диагонали (бейдж → плашка скидки → свечение), левая колонка — три
   группы со space-between, белая кнопка коралловеет на hover карточки. */
.promofeature { position: relative; overflow: hidden; border-radius: 22px; background: #151517; color: #fff; padding: 30px 34px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr); gap: 28px; align-items: stretch; min-height: 300px; isolation: isolate; }
/* Фикс цвета на hover: глобальный a:hover красит текст в coral (тот же
   случай, что у промо-карточек героя выше). */
a.promofeature:hover { color: #fff; }
.promofeature-glow { position: absolute; right: -90px; top: -90px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(222, 25, 26, .62), rgba(222, 25, 26, 0) 68%); z-index: 0; }
.promofeature-body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.promofeature-group { display: block; }
.promofeature-badge { display: inline-block; background: var(--coral); color: #fff; padding: 6px 12px; border-radius: 8px; margin-bottom: 16px; }
.promofeature-name { display: block; font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -.025em; }
.promofeature-sub { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .55); margin-top: 6px; }
/* Живой статус наличия — отдельной строкой под подписью (правка владельца
   25.08), зелёным с галочкой — тот же язык, что .pavail в карточках. */
.promofeature-avail { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--green, #2fae5f); }
.promofeature-pricerow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.promofeature-price { font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -.03em; }
.promofeature-oldprice { font-weight: 600; font-size: 18px; color: rgba(255, 255, 255, .4); text-decoration: line-through; }
.promofeature-disc { font-size: 13px; font-weight: 800; background: var(--coral); color: #fff; padding: 6px 10px; border-radius: 8px; letter-spacing: .02em; }
.promofeature-rule { display: block; height: 1px; background: rgba(255, 255, 255, .12); margin: 20px 0 16px; }
.promofeature-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.promo-chip { font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, .1); padding: 7px 12px; border-radius: 999px; }
.promo-chip--gift { display: inline-flex; align-items: center; gap: 7px; }
.promo-chip--gift svg { display: block; opacity: .85; }
.promofeature-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #151517; font-weight: 800; font-size: 15px; padding: 14px 24px; border-radius: 12px; transition: background .18s, color .18s, transform .18s; }
.promofeature:hover .promofeature-btn { background: var(--coral); color: #fff; transform: translateY(-1px); }
.promophoto { position: relative; z-index: 1; min-height: 180px; border-radius: 16px; overflow: hidden; background: #fff; }
.promophoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #fff; }
.promorows { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; }
.promorow { position: relative; border: 1px solid var(--line); border-radius: 18px; background: var(--soft); padding: 16px 20px; display: flex; align-items: center; gap: 16px; color: var(--ink); transition: border-color .18s, background .18s, transform .18s; }
.promorow:hover { background: #fff; border-color: var(--line); box-shadow: 0 12px 30px rgba(29, 29, 31, .10); transform: translateY(-2px); color: var(--ink); }
.promorow-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--coral); }
.promorow-body { flex: 1; min-width: 0; }
.promorow-title { display: block; font-weight: 800; font-size: 17px; line-height: 1.2; }
.promorow-text { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.promorow-arr { flex: none; font-size: 20px; color: var(--coral); font-weight: 700; }
/* Трек — скролл-контейнер: он обрезает всё, что выходит за края, поэтому
   подъём карточки на hover (translateY(-2px)) и её тень должны помещаться
   ВНУТРИ трека. Даём внутренние запасы сверху/снизу/по бокам и компенсируем
   их отрицательными маргинами — внешняя раскладка не меняется. */
.btrack { display: flex; gap: 14px; overflow-x: auto; margin: 10px -6px -26px; padding: 6px 6px 34px; scrollbar-width: none; }
.btrack::-webkit-scrollbar { display: none; }
/* flex-grow: когда карточек мало и они помещаются, ряд растягивается до
   правого края блока (замечание владельца); при переполнении basis 300px
   держит ширину и трек честно скроллится. */
.minibanner { flex: 1 0 300px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); padding: 16px 18px; color: var(--ink); transition: background .18s, border-color .18s, transform .18s; }
.minibanner:hover { background: #fff; border-color: var(--line); box-shadow: 0 12px 30px rgba(29, 29, 31, .10); transform: translateY(-2px); color: var(--ink); }
.minibanner-body { flex: 1; min-width: 0; }
.minibanner-tag { display: block; color: var(--coral-d); margin-bottom: 7px; }
.minibanner-title { display: block; font-weight: 800; font-size: 15.5px; line-height: 1.25; }
.minibanner-text { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.minibanner-photo { flex: none; width: 92px; height: 80px; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.minibanner-photo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.bdots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.bdot { height: 7px; width: 7px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: var(--line); transition: width .2s, background .2s; }
.bdot.is-active { width: 22px; background: var(--coral); }
@media (max-width: 980px) { .promogrid { grid-template-columns: 1fr; } .promofeature { grid-template-columns: 1fr; } .promophoto { max-height: 220px; aspect-ratio: 16/9; } }

/* ===== /promo-lab/ — лаборатория вариантов фичи (скрытая страница) ===== */
.plab { display: grid; gap: 34px; }
.plab-head { max-width: 760px; }
.plab-eb { color: var(--coral); display: block; margin-bottom: 8px; }
.plab-title { font-weight: 800; font-size: 26px; letter-spacing: -.01em; margin: 0 0 10px; }
.plab-note { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.plab-label { font-weight: 700; font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.plab-card { max-width: 900px; }
/* Сцена с вырезанным пианино: без белой панели — инструмент живёт прямо
   на тёмной карточке. */
.plab-stage { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 240px; }
.plab-piano { width: 100%; max-width: 360px; height: auto; }
/* Сцены-генерации (V3/V4): панель-картинка со скруглением. */
.plab-scene { width: 100%; height: 100%; max-height: 320px; object-fit: cover; border-radius: 16px; }

/* — Вариант 1: парение — */
.plab-v1-piano { animation: plab-float 5.5s ease-in-out infinite; }
.plab-v1-shadow { position: absolute; left: 50%; bottom: 8%; width: 62%; height: 26px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%); animation: plab-shadow 5.5s ease-in-out infinite; }
.plab-v1-glow { animation: plab-glow 7s ease-in-out infinite; }
@keyframes plab-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes plab-shadow { 0%, 100% { opacity: .8; transform: translateX(-50%) scaleX(1); } 50% { opacity: .45; transform: translateX(-50%) scaleX(.82); } }
@keyframes plab-glow { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* — Вариант 2: параллакс за курсором + блик — */
.plab-v2 { perspective: 900px; }
.plab-v2-wrap { position: relative; display: block; width: 100%; max-width: 380px; transition: transform .25s ease-out; transform-style: preserve-3d; will-change: transform; }
.plab-v2-shine { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: url('../img/promo/cp300-cutout.webp'); mask-image: url('../img/promo/cp300-cutout.webp'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.plab-v2-shine::after { content: ''; position: absolute; top: -30%; bottom: -30%; left: -60%; width: 40%; background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); transform: skewX(-18deg); animation: plab-shine 4.6s ease-in-out infinite; }
@keyframes plab-shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.plab-disc { transform-origin: center; }
.plab-v2 .plab-disc { animation: plab-pulse 2.4s ease-in-out infinite; }
@keyframes plab-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* — Вариант 3: сцена с прожектором, отражением и искрами — */
.plab-v3 { overflow: hidden; }
.plab-v3-sparks { position: absolute; inset: 0; pointer-events: none; }
.plab-v3-sparks i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: 0; animation: plab-spark 3.8s ease-in-out infinite; }
.plab-v3-sparks i:nth-child(1) { left: 12%; top: 24%; animation-delay: 0s; }
.plab-v3-sparks i:nth-child(2) { left: 84%; top: 18%; animation-delay: .9s; }
.plab-v3-sparks i:nth-child(3) { left: 22%; top: 68%; animation-delay: 1.7s; width: 3px; height: 3px; }
.plab-v3-sparks i:nth-child(4) { left: 70%; top: 76%; animation-delay: 2.4s; }
.plab-v3-sparks i:nth-child(5) { left: 50%; top: 10%; animation-delay: 3.1s; width: 3px; height: 3px; }
@keyframes plab-spark { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .9; transform: scale(1.25); } }

@media (max-width: 760px) { .plab-stage { min-height: 190px; } .plab-piano, .plab-v2-wrap { max-width: 260px; } }
@media (prefers-reduced-motion: reduce) {
  .plab-v1-piano, .plab-v1-shadow, .plab-v1-glow, .plab-v2-shine::after,
  .plab-v2 .plab-disc, .plab-v3-sparks i { animation: none; }
  .plab-v2-wrap { transition: none; }
}

/* ===== Блог + Новости — двухколонник (тот же handoff) ===== */
.nbgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.nbcol { display: flex; flex-direction: column; }
.nbhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.nbtitle { font-weight: 800; font-size: 24px; letter-spacing: -.01em; margin: 0; }
.nblist { flex: 1; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; }
.postrow { display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 14px 16px; color: var(--ink); transition: background .18s, border-color .18s; }
.postrow:hover { background: var(--soft); border-color: var(--line); box-shadow: 0 10px 26px rgba(29, 29, 31, .08); color: var(--ink); }
.postrow-news { padding: 16px 18px; }
.postrow-thumb { flex: none; width: 110px; height: 82px; border-radius: 12px; overflow: hidden; background: var(--soft2, var(--soft)); border: 1px solid var(--line); }
.postrow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.postrow-body { flex: 1; min-width: 0; }
.postrow-meta { display: block; font-size: 12px; color: var(--faint); margin-bottom: 6px; }
.postrow-title { display: block; font-weight: 800; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.postrow-text { display: block; font-size: 12.5px; line-height: 1.5; color: var(--muted); margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.postrow-arr { flex: none; font-size: 18px; color: var(--coral); font-weight: 700; }
@media (max-width: 900px) { .nbgrid { grid-template-columns: 1fr; gap: 36px; } }

/* --- Герой --- */
/* Герой — единая сетка из четырёх соседей (герой/промо/доверие/каталог):
   мобильный handoff home_mobile (16.08) переставляет каталог сразу после
   героя через order, а это возможно только внутри одного grid-контейнера.
   На десктопе визуально всё как раньше: герой 1.5fr + промо 1fr в первой
   строке, доверие и каталог — на всю ширину. */
.home-hero { padding-top: 22px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }
.home-trust, .home-herocat { grid-column: 1 / -1; }
/* 32px + gap 20px = прежние 52px отступа секции каталога (.home-section). */
.home-herocat { margin-top: 32px; }

.home-hero-main {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(135deg, #1d1d1f, #2c2224 60%, #3a1c1d);
  color: #fff;
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 400px;
}
.home-hero-mark { position: absolute; right: -40px; bottom: -50px; opacity: .14; }
.home-hero-inner { position: relative; z-index: 1; max-width: 560px; }
.home-hero-eb { display: block; color: #ff8a7a; margin-bottom: 16px; }
.home-hero-title { font-weight: 800; font-size: 46px; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 18px; }
.home-hero-lead { font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); margin: 0 0 28px; max-width: 480px; }
.home-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.home-hero-cta { padding: 16px 26px; font-size: 15.5px; }
/* Коралловая кнопка героя: тот же характер hover, что у соседней ghost-
   кнопки «Смотреть каталог» — белая вуаль 14% поверх фона, текст белый,
   без прыжка (общий .btn-coral:hover темнит до бордового и поднимает —
   на тёмном герое это смотрелось чужеродно). */
.home-hero-cta:hover { background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) var(--coral); transform: none; color: #fff; }
.home-hero-cta-out { padding: 16px 26px; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); transition: background .18s, border-color .18s, color .18s; }
/* Ghost-кнопка на тёмном герое: hover — лёгкая белая заливка и яркая рамка,
   текст остаётся белым (общий .btn-out:hover красил рамку в тёмное, а текст
   в коралловый — на тёмном фоне смотрелось слабо и не в стиле). */
.home-hero-cta-out:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); color: #fff; }

.home-promo { display: flex; flex-direction: column; gap: 20px; }
.home-promo-card {
  flex: 1;
  border-radius: 22px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  min-height: 150px;
}
.home-promo-card--coral { background: linear-gradient(150deg, #de191a, #f0533f); color: #fff; }
.home-promo-card--soft { background: var(--soft); border: 1px solid var(--line); }
/* Обе промо-карточки — ссылки: глобальный a:hover красит их текст в coral,
   на коралловом градиенте это красное-на-красном (текст пропадает). Цвет на
   hover фиксируем, отклик наведения — подъём карточки с тенью. */
.home-promo-card { transition: transform .18s, box-shadow .18s; }
a.home-promo-card:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(29, 29, 31, .14); }
a.home-promo-card--coral:hover { color: #fff; }
.home-promo-tag { display: inline-block; opacity: .85; margin-bottom: 8px; }
.home-promo-tag--coral { color: var(--coral); opacity: 1; }
.home-promo-title { font-weight: 800; font-size: 22px; line-height: 1.15; position: relative; z-index: 1; }
.home-promo-text { font-size: 13.5px; opacity: .85; margin-top: 6px; max-width: 230px; position: relative; z-index: 1; }
.home-promo-card--soft .home-promo-text { opacity: 1; color: var(--muted); }
.home-promo-more { font-weight: 700; font-size: 14px; position: relative; z-index: 1; }
.home-promo-more--coral { color: var(--coral); }
.home-promo-deco { position: absolute; right: -20px; bottom: -20px; opacity: .16; }
.home-promo-deco--soft { right: -14px; bottom: -14px; opacity: .1; }

/* margin-top не нужен: вертикальный ритм в сетке героя даёт gap 20px. */
.home-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.home-trust-item { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; }
.home-trust-title { font-weight: 800; font-size: 15px; }
.home-trust-sub { font-size: 12px; color: var(--muted); }

/* --- Категории --- */
.home-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

/* Плитка категории — кремовая карточка как в макете (design/Главная.dc.html
   .cattile): flex-колонка со space-between даёт иконку сверху, имя/счётчик
   снизу; align-self:flex-end у иконки прижимает её к правому краю. */
.cattile { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: var(--soft); color: var(--ink); text-decoration: none; transition: box-shadow .2s, transform .2s; display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; }
.cattile:hover { box-shadow: 0 12px 30px rgba(29, 29, 31, .1); transform: translateY(-3px); }
.cattile-icon { align-self: flex-end; display: block; }
/* Фото категории (PICTURE раздела с боевого сайта) вместо иконки: во всю
   ширину плитки, contain — инструмент целиком; multiply гасит белый фон
   JPEG-фото на бежевом фоне плитки (var(--soft)), без него был бы белый
   прямоугольник. Файлы нормализованы на общий холст 720x760, где ширина
   КЛАВИАТУРЫ у всех инструментов одинакова (просьба владельца: ровнять
   по длине клавиатуры) — поэтому одинаковый бокс даёт правильные
   относительные размеры без per-картиночных стилей. */
.cattile-pic { display: block; width: 100%; height: 190px; margin-bottom: 12px; }
.cattile-pic img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cattile-name { display: block; font-weight: 700; font-size: 15px; line-height: 1.25; }
.cattile-count { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
/* Двухтонные плитки категорий — главная И хаб /katalog/: белая фотозона +
   кремовый подвал-подпись (.cattile-cap — обёртка в home.php и
   catalog-hub.php). Чёрный инструмент на белом контрастнее, чем на креме, —
   замечание владельца 20.08 («блок тусклый, ниже забирает внимание»).
   Общий шов — класс home-cats на обоих контейнерах (у хаба: «home-cats
   hub-cats»), поэтому правила не дублируются; масштаб хаба задают
   оверрайды .hub-cats ниже по файлу.
   Тень покоя отделяет белую карточку от белой страницы; радиус подвала
   срезает существующий overflow:hidden самой плитки. */
.home-cats .cattile { padding: 0; background: #fff; box-shadow: 0 1px 2px rgba(29, 29, 31, .04), 0 10px 26px rgba(29, 29, 31, .06); }
.home-cats .cattile:hover { box-shadow: 0 16px 36px rgba(29, 29, 31, .13); }
.home-cats .cattile-pic { height: 212px; padding: 18px 18px 8px; margin-bottom: 0; }
.home-cats .cattile-pic img { transition: transform .25s ease; }
.home-cats .cattile:hover .cattile-pic img { transform: scale(1.05); }
.home-cats .cattile:hover .cattile-name { color: var(--coral); }
/* Плитка-откат без фото (иконка) — вернуть иконке воздух, съеденный
   padding:0 у самой плитки. */
.home-cats .cattile-icon { margin: 20px 20px 0; }
.cattile-cap { display: block; background: var(--soft); border-top: 1px solid var(--line); padding: 13px 18px 15px; }
@media (prefers-reduced-motion: reduce) {
  .home-cats .cattile-pic img { transition: none; }
  .home-cats .cattile:hover .cattile-pic img { transform: none; }
}

/* --- Витрина каталога (хаб /katalog/) --- */
/* Блок стоит ПОСЛЕ двухтонных правил .home-cats: контейнер хаба несёт оба
   класса (home-cats hub-cats), двухтонность и hover приходят от общих
   правил, здесь — только масштаб хаба. И по-прежнему ДО адаптивных правил
   .home-cats ниже по файлу: на десктопе 6 категорий витрины идут по 3 в
   ряд (2 ряда), а на планшете/мобильном отрабатывают те же брейкпоинты
   .home-cats (3/2/1 колонки). */
.hub-head { padding-top: 6px; }
.hub-intro { max-width: 760px; font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 12px 0 0; text-wrap: pretty; }
.hub-cats { grid-template-columns: repeat(3, 1fr); margin-top: 28px; gap: 20px; }
/* Крупная плитка хаба: подпись по центру (text-align наследуется в
   .cattile-cap); space-between базовой .cattile прижимает подвал к низу,
   а возможный зазор между фотозоной и подвалом бел на белом — невидим. */
.hub-cats .cattile { text-align: center; min-height: 0; }
/* Фото крупнее: у исходников большие внутренние поля, поэтому картинка
   рисуется на 122% зоны (лишнее поле срезается overflow) — тот же приём,
   что у превью серий в мега-меню (.catmega-detail-photo). Высота 200px —
   масштаб хаба (три плитки в ряд против пяти на главной, где 212px). */
.hub-cats .cattile-pic { display: flex; align-items: center; justify-content: center; height: 200px; margin-bottom: 0; overflow: hidden; }
.hub-cats .cattile-pic img { width: 122%; height: 122%; max-width: none; object-fit: contain; }
.hub-cats .cattile-name { font-size: 16.5px; }
.hub-cats .cattile-count { margin-top: 4px; font-size: 13px; }
.hub-popular { margin-top: 52px; }

/* --- Товары: витринная лента (тот же .pcard, что и в листинге) --- */
.rowscroll { display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 6px; }
.rowscroll::-webkit-scrollbar { display: none; }
.rowscroll .pcard { flex: none; width: 290px; }
/* 300px вместо четверти ряда (было ~320px и карточки под 700px высотой —
   спорили по масштабу с компактными плитками категорий выше, замечание
   владельца). Заодно видно «4,5 карточки» — край пятой намекает, что
   лента листается. */

/* --- Полоса квиза (декоративная, без функциональности — вне границ) --- */
/* Тёмный баннер подбора — на всю ширину вьюпорта (как в макете: внешний
   #podbor с background:var(--ink) во всю ширину, .wrap внутри). Контент
   главной лежит в <main class="wrap"> (max-width 1340), поэтому баннер
   «разворачивается» из контейнера отрицательными боковыми margin до края
   окна; сам контент баннера остаётся в .wrap (класс на внутреннем блоке).
   overflow-x:clip на body (см. ниже) страхует от горизонтальной прокрутки
   на системах с классической полосой прокрутки и не ломает sticky-шапку. */
.quiz-band { background: var(--ink); margin-top: 60px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.quiz-band-inner { padding-top: 44px; padding-bottom: 44px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; color: #fff; }
.quiz-band-note { width: 64px; height: 58px; flex: none; display: block; }
.quiz-band-text { flex: 1; min-width: 280px; }
.quiz-band-eb { display: block; color: #ff8a7a; }
.quiz-band-title { font-weight: 800; font-size: 25px; margin: 8px 0 4px; }
.quiz-band-sub { font-size: 14.5px; color: rgba(255, 255, 255, .68); }
.quiz-band-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.quiz-band-actions .btn { padding: 16px 28px; font-size: 16px; }
/* Телефон на тёмной полосе — прозрачная таблетка с белой рамкой (макет
   Главная.dc.html: background:transparent + border rgba(255,255,255,.3)),
   а не белая btn-out: белая заливка на тёмном выбивалась из макета.
   Hover btn-out (рамка var(--ink)) на тёмном невидим — переопределён. */
.quiz-band-actions .quiz-band-phone { padding: 13px 28px; font-size: 15px; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.quiz-band-actions .quiz-band-phone:hover { border-color: rgba(255, 255, 255, .65); color: #fff; }
.quiz-band-phone { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }

/* --- Преимущества --- */
.home-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 30px; }
.advcard { display: flex; gap: 14px; align-items: flex-start; }
.advcard-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--coral-wash); display: grid; place-items: center; flex: none; color: var(--coral); }
.advcard-title { font-weight: 700; font-size: 15.5px; margin-bottom: 4px; }
.advcard-text { font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* --- Команда (статичный контент, без фото — см. докблок home.php) --- */
.home-team { background: var(--soft); border-radius: 22px; padding: 36px; }
.home-team-lead { max-width: 760px; margin-bottom: 26px; }
.home-team-eb { display: block; color: var(--coral); margin-bottom: 10px; }
.home-team-title { font-weight: 800; font-size: 25px; letter-spacing: -.01em; margin: 0 0 10px; }
.home-team-text { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; }
.home-team-strip { display: flex; gap: 22px; overflow-x: auto; padding: 4px 2px 14px; scroll-behavior: smooth; }
.teamcard { flex: none; width: 100px; text-align: center; }
.teamph {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto 10px;
  background: var(--soft2);
  display: grid;
  place-items: center;
  color: var(--faint);
  font-weight: 800;
  font-size: 26px;
}
/* Реальное фото в карточке команды — тот же круг, что и у инициала. */
.teamph-img { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 10px; object-fit: cover; display: block; }
.teamcard-name { font-weight: 700; font-size: 13.5px; }
.teamcard-role { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* --- Блог: две карточки в ряд (переиспользует .blog-card из блока
   "Блог", см. выше) --- */
/* Блог на главной — компактный дайджест: три статьи в ряд, без выжимки
   (только фото + дата + заголовок + «Читать →»), чтобы блок не занимал
   пол-экрана. Полная выжимка остаётся на самой странице блога. */
/* .home-blog-row удалён 30.07 — блог на главной стал строками .postrow
   в двухколоннике .nbgrid (handoff design_handoff_home_blocks). */

/* --- Сертификаты / дилерство --- */
.dealercard {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px 34px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}
.dealercard-eb { display: block; color: var(--coral); margin-bottom: 10px; }
.dealercard-title { font-weight: 800; font-size: 23px; letter-spacing: -.01em; margin: 0 0 10px; }
.dealercard-text { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; }
.dealercard-more { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--coral); }
.dealercard-note { margin: 14px 0 0; font-size: 12.5px; color: var(--faint); }
.certstrip { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 6px; }
/* Карточка сертификата — реальный скан 281×393 (портрет), открывается по
   клику в новой вкладке. Лёгкий подъём на hover, как у прочих карточек. */
.certcard {
  flex: none;
  width: 132px;
  aspect-ratio: 281 / 393;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--soft);
  display: block;
  transition: box-shadow .18s, transform .18s;
}
.certcard:hover { box-shadow: 0 10px 26px rgba(29, 29, 31, .14); transform: translateY(-3px); }
.certcard img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- CTA в конце страницы --- */
/* Нейтральный бежевый, НЕ coral-wash: блок идёт сразу после коралловых
   «Акций», два коралловых пятна подряд перегружали низ главной
   (замечание владельца). Чередование: дилер (белый) → акции (коралл) →
   CTA (бежевый). */
.home-final-cta { background: var(--soft); border-radius: 22px; padding: 36px 40px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.home-final-cta-text { flex: 1; min-width: 280px; }
.home-final-cta-title { font-weight: 800; font-size: 25px; letter-spacing: -.01em; margin: 0 0 8px; color: var(--ink); }
.home-final-cta-sub { font-size: 15px; color: var(--muted); margin: 0; }
.home-final-cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.home-final-cta-phone { padding: 16px 30px; font-size: 19px; }
/* Кнопка «Заказать звонок» под телефоном — .btn базово БЕЗ padding (его
   задаёт каждое использование, как в макете инлайном), поэтому без своего
   правила <button> сплющивался до браузерного дефолта (1px 6px). Padding
   как в макете (13px 30px); ширина равна кнопке-телефону за счёт
   align-items:stretch у .home-final-cta-actions. */
.home-final-cta-actions .btn-out { padding: 13px 30px; }

@media (max-width: 1080px) {
  .home-cats { grid-template-columns: repeat(3, 1fr); }
  .rowscroll .pcard { width: 260px; }
}

@media (max-width: 820px) {
  /* Один столбик; каталог — сразу после героя (handoff home_mobile):
     промо-карточки и полоса доверия уезжают под каталог. */
  .home-hero { grid-template-columns: 1fr; }
  .home-hero-main { order: 1; }
  .home-herocat { order: 2; margin-top: 12px; }
  .home-promo { order: 3; margin-top: 12px; }
  .home-trust { order: 4; grid-template-columns: repeat(2, 1fr); }
  .home-cats { grid-template-columns: repeat(2, 1fr); }
  .home-adv-grid { grid-template-columns: repeat(2, 1fr); }
  .dealercard { grid-template-columns: 1fr; gap: 24px; }
  .rowscroll .pcard { width: 240px; }
}

@media (max-width: 560px) {
  /* Компактный первый экран (handoff home_mobile): сжатый герой, кнопки
     на всю ширину, промо-карточки и полоса доверия — горизонтальные
     свайп-ленты. min-width:0 у лент обязателен: это grid-дети, без него
     содержимое шире колонки распёрло бы трек и дало бы страничный
     горизонтальный скролл. */
  .home-hero-main { padding: 30px 22px; min-height: 320px; }
  .home-hero-title { font-size: 30px; margin-bottom: 14px; }
  .home-hero-lead { font-size: 15px; margin-bottom: 22px; }
  .home-hero-actions { flex-direction: column; }
  .home-hero-actions .btn { width: 100%; justify-content: center; padding: 15px 20px; font-size: 15px; }
  .home-promo { min-width: 0; flex-direction: row; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .home-promo::-webkit-scrollbar { display: none; }
  .home-promo-card { flex: 0 0 82vw; min-width: 82vw; max-width: 320px; padding: 22px; min-height: 170px; }
  .home-promo-text { max-width: none; }
  .home-trust { min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .home-trust::-webkit-scrollbar { display: none; }
  .home-trust-item { flex: none; padding: 10px 14px; border-radius: 999px; gap: 8px; }
  .home-trust-item svg { width: 18px; height: 18px; flex: none; }
  .home-trust-title { font-size: 13px; white-space: nowrap; }
  /* Вторые строки чипов («официальная», «на 6 месяцев»…) на телефоне
     скрыты — так задумано handoff'ом: остаются смысловые заголовки. */
  .home-trust-sub { display: none; }
  .home-cats { grid-template-columns: 1fr; }
  .home-adv-grid { grid-template-columns: 1fr; }
  .home-team { padding: 24px; }
  .rowscroll .pcard { width: 72vw; max-width: 280px; }
}

/* ===== Отзывы ===== */
/* Источник — LOVE-PIANO/design/Отзывы.dc.html. Без блока агрегированного
   рейтинга и без фильтр-чипов из макета — см. докблок
   templates/pages/review-list.php: в базе нет ни оценки отзыва, ни тем
   более среднего балла магазина, показывать выдуманные числа нельзя. */

.rev-hero { padding-top: 14px; max-width: 860px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rev-hero-main { min-width: 0; }
.rev-count { display: inline-block; margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.rev-hero-cta { flex: none; padding: 12px 22px; margin-top: 4px; }

.rev-list { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; max-width: 760px; }

.rev-card { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: #fff; }

.rev-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.rev-card-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--coral-wash);
  color: var(--coral-d);
  display: grid;
  place-items: center;
  font-weight: 800;
}
.rev-card-who { min-width: 0; }
.rev-card-name { font-weight: 700; font-size: 14.5px; }
.rev-card-meta { font-size: 12px; color: var(--faint); margin-top: 2px; }

.rev-card-instrument { font-size: 12px; color: var(--coral); font-weight: 700; margin-bottom: 8px; }

.rev-card-text p { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0 0 10px; }
.rev-card-text p:last-child { margin-bottom: 0; }

.rev-card-media { margin-top: 14px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--soft); }
.rev-card-media img { width: 100%; height: auto; display: block; }

/* --- Форма «Оставьте свой отзыв» --- */
/* Поля/кнопка — общий блок .lp-form/.lp-fld (см. секцию форм). Здесь —
   карточка-обёртка и двухколоночная раскладка как в макете. */
.rev-write { max-width: 860px; margin: 44px 0 8px; scroll-margin-top: 90px; background: var(--soft); border-radius: 22px; padding: 40px 44px; }
.rev-write-title { font-weight: 800; font-size: 26px; letter-spacing: -.01em; margin: 0 0 6px; }
.rev-write-sub { font-size: 14.5px; color: var(--muted); margin: 0 0 24px; }

/* .lp-form.rev-form — двойной класс поднимает специфичность над базовым
   .lp-form { display:flex }, объявленным в файле ниже: иначе flex-колонка
   перебивала бы grid и поля вставали в один столбец вместо двух. */
.lp-form.rev-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rev-form .lp-fld { background: #fff; }
.rev-rating-row, .rev-fld-text, .rev-form-foot { grid-column: 1 / -1; }

.rev-rating-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rev-rating-label { font-size: 14px; color: var(--muted); font-weight: 600; }
.rev-stars { display: inline-flex; gap: 4px; }
.rev-star { padding: 0; border: 0; background: none; cursor: pointer; color: #d7d7dc; line-height: 0; border-radius: 6px; transition: color .12s ease, transform .12s ease; }
.rev-star svg { width: 26px; height: 26px; display: block; }
.rev-star.is-on { color: var(--gold); }
/* Наведение на ряд — заливаем до звезды под курсором (последующие гасим). */
.rev-stars:hover .rev-star { color: var(--gold); }
.rev-stars .rev-star:hover ~ .rev-star { color: #d7d7dc; }
.rev-star:hover { transform: scale(1.1); }
.rev-star:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

.rev-form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 2px; }
.rev-form-foot .lp-form-consent { font-size: 11.5px; }
.rev-form-foot .lp-form-submit { align-self: auto; margin-top: 0; padding: 15px 30px; }

@media (max-width: 560px) {
  .rev-card { padding: 18px; }
  .rev-write { padding: 28px 22px; border-radius: 18px; }
  .rev-write-title { font-size: 22px; }
  .rev-form { grid-template-columns: 1fr; }
  .rev-hero-cta { width: 100%; }
}

/* ===== Статические страницы (о компании, доставка, гарантия, контакты) ===== */
/* Источник — LOVE-PIANO/design/{О нас,Доставка и оплата,Гарантия,Контакты}.dc.html.
   Контент этих четырёх страниц не в базе (см. докблоки соответствующих
   templates/pages/*.php) — придуманные в макетах цифры/блоки без
   реального подтверждения (счётчик "70+ сервисных центров", список
   "что входит в гарантию", блок "посадим дерево", переключатель
   города) сюда не перенесены, см. те же докблоки. .static-page —
   общая колонка для доставки/гарантии/контактов (текстовые страницы
   без широкой сетки); у "о компании" своя ширина — там полноширинная
   сетка команды. */

.static-page { max-width: 880px; margin: 0 auto; padding-top: 14px; }

/* --- О компании --- */

.about-page { padding-top: 14px; }

.about-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 18px; }
.about-stat { min-width: 160px; }
.about-stat b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--coral); }
.about-stat span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 4px; max-width: 220px; }

.about-intro { max-width: 760px; margin-top: 22px; }
.about-intro p { font-size: 16px; line-height: 1.75; color: #33333a; margin: 0 0 14px; }
.about-intro p:last-child { margin-bottom: 0; }

.about-blocks { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; }
.about-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
}
.about-block:nth-child(even) { direction: rtl; }
.about-block:nth-child(even) > * { direction: ltr; }
.about-block-media { border-radius: 16px; overflow: hidden; background: var(--soft); aspect-ratio: 4 / 3; }
.about-block-media img { width: 100%; height: 100%; object-fit: cover; }
.about-block-title { font-weight: 800; font-size: 22px; letter-spacing: -.01em; margin: 0 0 12px; }
.about-block-body p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0 0 12px; }
.about-block-body p:last-child { margin-bottom: 0; }

.about-team { margin-top: 52px; }
.about-team-title { font-weight: 800; font-size: 26px; letter-spacing: -.01em; margin: 0 0 8px; }
.about-team-descr { font-size: 15px; color: var(--muted); max-width: 760px; margin: 0 0 24px; line-height: 1.65; }
.about-team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.about-team-card { border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.about-team-photo { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; background: var(--soft2); margin-bottom: 12px; }
.about-team-name { font-weight: 700; font-size: 14.5px; }
.about-team-position { font-size: 12px; color: var(--muted); margin-top: 2px; }
.about-team-bio { margin-top: 10px; }
.about-team-bio summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--coral); list-style: none; }
.about-team-bio summary::-webkit-details-marker { display: none; }
.about-team-bio p { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 8px 0 0; }

.about-cta {
  margin-top: 52px;
  background: var(--ink);
  border-radius: 22px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  color: #fff;
}
.about-cta-text { flex: 1; min-width: 260px; }
.about-cta-title { font-weight: 800; font-size: 22px; margin-bottom: 6px; }
.about-cta-sub { font-size: 14px; color: rgba(255, 255, 255, .72); }

@media (max-width: 900px) {
  .about-team-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .about-block { grid-template-columns: 1fr; }
  .about-block:nth-child(even) { direction: ltr; }
}

@media (max-width: 560px) {
  .about-team-grid { grid-template-columns: repeat(2, 1fr); }
  .about-stats { gap: 20px; }
}

/* --- Доставка --- */

.dlv-block-title { font-weight: 800; font-size: 19px; margin: 0 0 12px; }

.dlv-courier { margin-top: 18px; }
.dlv-courier p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0 0 10px; }
.dlv-courier p:last-child { margin-bottom: 0; }

.dlv-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.dlv-price { border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.dlv-price b { display: block; font-weight: 800; font-size: 17px; }
.dlv-price-free { color: var(--green); }
.dlv-price p { font-size: 13px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }

.dlv-pickup { margin-top: 28px; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }
.dlv-pickup-free { color: var(--green); font-weight: 700; font-size: 15px; }
.dlv-pickup-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.dlv-pickup-row:first-of-type { border-top: none; }
.dlv-pickup-label { color: var(--muted); }
.dlv-pickup-value { line-height: 1.6; }
.dlv-pickup-value a { font-weight: 700; }

.dlv-important { margin-top: 16px; background: var(--coral-wash); border-radius: 14px; padding: 16px 20px; font-size: 14px; line-height: 1.6; color: var(--coral-d); }
.dlv-important b { color: var(--ink); }

.dlv-methods { margin-top: 32px; }
.dlv-methods-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.dlv-method { border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-size: 13.5px; font-weight: 600; background: var(--soft); }

.dlv-more { margin-top: 28px; border: 1px solid var(--line); border-radius: 14px; padding: 4px 22px; }
.dlv-more summary { cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 15px; list-style: none; }
.dlv-more summary::-webkit-details-marker { display: none; }
.dlv-more p, .dlv-more ul { font-size: 14px; line-height: 1.65; color: var(--muted); }
.dlv-more ul { padding-left: 20px; }
.dlv-more[open] { padding-bottom: 18px; }

.dlv-benefits { margin-top: 32px; }
.dlv-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.dlv-benefit { border: 1px solid var(--line); border-radius: 12px; padding: 16px; font-size: 13.5px; font-weight: 600; text-align: center; }

@media (max-width: 820px) {
  .dlv-prices { grid-template-columns: 1fr 1fr; }
  .dlv-benefits-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .dlv-prices { grid-template-columns: 1fr; }
  .dlv-pickup-row { grid-template-columns: 1fr; gap: 4px; }
  .dlv-benefits-grid { grid-template-columns: 1fr; }
}

/* --- Гарантия --- */

.wrt-block-title { font-weight: 800; font-size: 22px; letter-spacing: -.01em; margin: 40px 0 16px; }

.wrt-info { margin-top: 20px; }
.wrt-info-head { font-size: 15px; }
.wrt-info-note { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; font-weight: 400; }
.wrt-info p { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 8px 0 0; }
.wrt-info ul { margin: 8px 0 0; padding-left: 20px; font-size: 14.5px; color: var(--muted); line-height: 1.7; }

.wrt-important { margin-top: 14px; background: var(--coral-wash); border-radius: 14px; padding: 16px 20px; font-size: 13.5px; line-height: 1.65; color: var(--coral-d); }
.wrt-important b { color: var(--ink); }

.wrt-return-section { margin-bottom: 22px; }
.wrt-return-section h3 { font-weight: 800; font-size: 17px; margin: 0 0 10px; }
.wrt-return-group-title { font-weight: 700; font-size: 14.5px; margin: 14px 0 6px; }
.wrt-return-case { margin: 8px 0 8px 4px; }
.wrt-return-case-label { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.wrt-return-case p { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0 0 4px; }

.wrt-steps { display: grid; grid-template-columns: 90px 1fr; gap: 10px 16px; margin-top: 8px; }
.wrt-steps dt { font-weight: 800; color: var(--coral); font-size: 13.5px; }
.wrt-steps dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

.wrt-contacts { margin-top: 28px; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }

/* --- Форма заявки (общая: «Напишите нам», отзыв) --- */
/* Поля и кнопка одинаковы на всех формах слоя заявок; раскладку задаёт
   страница-обёртка (.cnt-form / .rev-form). Состояния успех/ошибка рисует
   lead-forms.js — см. .lp-form-msg. */

.lp-form { display: flex; flex-direction: column; gap: 12px; }
.lp-fld {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lp-fld::placeholder { color: var(--muted); }
.lp-fld:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 107, 90, .14); }
.lp-fld-area { resize: vertical; min-height: 96px; line-height: 1.55; }
.lp-form-submit { align-self: flex-start; margin-top: 4px; }
.lp-form-consent { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0; }
.lp-form-consent a { color: var(--coral); }
/* Сообщение о результате (успех/ошибка) — вставляет lead-forms.js */
.lp-form-msg { font-size: 14px; font-weight: 600; border-radius: 12px; padding: 12px 15px; margin: 0; }
.lp-form-msg.is-ok { color: #1c7a4a; background: #e9f7ef; }
.lp-form-msg.is-err { color: #b4362c; background: #fbecea; }

/* --- Контакты --- */

.cnt-intro { max-width: 720px; font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 12px 0 0; }

.cnt-writeus-title { font-weight: 800; font-size: 26px; letter-spacing: -.01em; margin: 0 0 10px; }
.cnt-writeus-sub { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0 0 22px; max-width: 440px; }
.cnt-form { max-width: 440px; }

.cnt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.cnt-card { border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
/* Иконка карточки — коралловая плашка 46x46 (макет Контакты.dc.html). */
.cnt-card-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--coral-wash); display: grid; place-items: center; color: var(--coral); margin-bottom: 14px; }
.cnt-card-label { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.cnt-card-value { display: block; font-weight: 800; font-size: 19px; }
.cnt-card-value_static { font-size: 16px; }
.cnt-card-note { display: block; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.cnt-card-link { color: var(--coral); font-weight: 700; }

/* «Пункты выдачи» — карточка с переключателем городов (макет PICKUP+MAP) */
.cnt-pickup { margin-top: 44px; }
.cnt-pickup-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.cnt-pickup-title { font-weight: 800; font-size: 26px; letter-spacing: -.01em; margin: 0; }
.cnt-pickup-tabs { display: flex; gap: 8px; margin-left: auto; }
.cnt-tab { padding: 9px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font: 600 13.5px 'Manrope', sans-serif; color: var(--ink); cursor: pointer; transition: all .15s; }
.cnt-tab:hover { border-color: var(--coral); color: var(--coral); }
.cnt-tab[data-on="true"] { background: var(--coral); border-color: var(--coral); color: #fff; }
.cnt-point { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.cnt-point-info { padding: 30px 32px; }
.cnt-point-eb { display: block; color: var(--coral); margin-bottom: 10px; }
.cnt-point-title { font-weight: 800; font-size: 22px; margin: 0 0 16px; }
.cnt-point-rows { display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.cnt-prow { display: flex; gap: 10px; line-height: 1.55; }
.cnt-prow svg { flex: none; margin-top: 2px; }
.cnt-prow-addr { font-style: normal; }
.cnt-point-btn { padding: 13px 22px; margin-top: 22px; }
.cnt-point-map { min-height: 340px; background: var(--soft); }
.cnt-point-iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }

/* «Напишите нам» + «Реквизиты» — две колонки (макет FORM) */
.cnt-write { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; margin-top: 52px; }
.cnt-requisites { background: var(--soft); border-radius: 18px; padding: 28px 30px; }
.cnt-requisites-title { font-weight: 800; font-size: 19px; margin: 0; }

/* Юридические страницы (политика конфиденциальности): узкая колонка,
   спокойная типографика для длинного нормативного текста. */
.legal-page { max-width: 860px; }
.legal-page p { font-size: 14.5px; line-height: 1.7; color: var(--ink); margin: 0 0 12px; }
.legal-h2 { font-weight: 800; font-size: 19px; letter-spacing: -.01em; margin: 30px 0 12px; }

/* Отзывы покупателей на главной (макет: revscroll/revcard, без звёзд) */
.home-revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.revcard { border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; background: #fff; display: flex; flex-direction: column; }
.revcard-text { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0 0 16px; }
.revcard-author { margin-top: auto; display: flex; align-items: center; gap: 11px; }
.revcard-ava { width: 38px; height: 38px; border-radius: 50%; background: var(--coral-wash); color: var(--coral-d); display: grid; place-items: center; font-weight: 800; flex: none; }
.revcard-name { display: block; font-weight: 700; font-size: 13.5px; }
.revcard-meta { display: block; font-size: 12px; color: var(--faint); margin-top: 1px; }
@media (max-width: 820px) { .home-revs { grid-template-columns: 1fr; } }
.cnt-requisites-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.cnt-requisites-pdf { font-size: 13px; font-weight: 700; color: var(--coral); }
.cnt-requisites-list { display: grid; grid-template-columns: 170px 1fr; gap: 4px 14px; }
.cnt-requisites-list dt { font-size: 13.5px; color: var(--muted); padding: 10px 0; border-top: 1px solid var(--line); }
.cnt-requisites-list dd { font-size: 13.5px; font-weight: 600; margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.cnt-requisites-list dt:first-of-type, .cnt-requisites-list dd:first-of-type { border-top: none; }

@media (max-width: 900px) {
  .cnt-cards { grid-template-columns: 1fr; }
  .cnt-locations { grid-template-columns: 1fr 1fr; }
  .cnt-write { grid-template-columns: 1fr; }
  .cnt-point { grid-template-columns: 1fr; }
  .cnt-point-map, .cnt-point-iframe { min-height: 260px; }
  .cnt-pickup-tabs { margin-left: 0; }
}

@media (max-width: 560px) {
  .cnt-locations { grid-template-columns: 1fr; }
  .cnt-requisites-list { grid-template-columns: 1fr; }
  .cnt-requisites-list dd { padding-top: 0; border-top: none; }
}

/* ===== Модальные лид-формы [data-lpform] (partials/lead-modals.php) =====
   Порт мокапного design/lp-modals.js: оверлей на весь экран, белая
   карточка по центру, крупные поля, коралловая кнопка-пилюля. Открытие/
   закрытие — js/lead-modals.js, отправка — общий lead-forms.js. */
.lpm-overlay { position: fixed; inset: 0; z-index: 5000; background: rgba(120, 120, 120, .55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow: auto; }
.lpm-overlay[hidden] { display: none; }
.lpm-card { position: relative; width: 100%; max-width: 720px; background: #fff; border-radius: 8px; padding: 52px 56px 48px; box-shadow: 0 40px 120px rgba(0, 0, 0, .35); }
.lpm-close { position: absolute; top: 20px; right: 22px; width: 34px; height: 34px; border: 0; background: transparent; color: var(--faint); cursor: pointer; display: grid; place-items: center; }
.lpm-close:hover { color: var(--ink); }
.lpm-title { text-align: center; font-weight: 800; font-size: 26px; letter-spacing: -.01em; margin: 0 0 30px; }
.lpm-fields { display: flex; flex-direction: column; gap: 16px; }
.lpm-form .lp-fld { height: 58px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 20px; font-size: 16px; font-weight: 500; background: #fff; }
.lpm-form .lp-fld:focus { border-color: var(--coral); outline: none; }
.lpm-submit { width: 100%; max-width: 400px; margin: 28px auto 0; height: 64px; border-radius: 999px; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; display: block; }
.lpm-form .lp-form-consent { text-align: center; margin-top: 18px; font-size: 13px; color: var(--faint); }
.lpm-info { background: var(--soft); border-radius: 12px; padding: 24px 26px; margin-top: 24px; }
.lpm-info p { font-size: 14.5px; margin: 0 0 18px; line-height: 1.55; }
.lpm-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-size: 14px; line-height: 1.5; }
.lpm-info-grid b { display: block; color: var(--coral); font-size: 16px; margin-bottom: 6px; }
@media (max-width: 640px) {
  .lpm-card { padding: 40px 22px 34px; }
  .lpm-info-grid { grid-template-columns: 1fr; }
}

/* Полоса «Оставьте телефон — оформим за вас» над корзиной (мотив макета
   Корзина.dc.html, дотянут: иконка-трубка, мягкое свечение, аккуратные
   переносы). Ряды по ширинам: широкий экран — иконка+текст слева, форма
   справа; до 900px форма уходит на свою строку (телефон тянется, кнопка
   своей ширины); до 560px телефон и кнопка в столбик на всю ширину. */
.cart-phoneband { position: relative; overflow: hidden; background: var(--ink); border-radius: 20px; padding: 24px 28px; display: flex; align-items: center; gap: 16px 18px; flex-wrap: wrap; color: #fff; margin-bottom: 24px; }
/* Декор: коралловое свечение в правом верхнем углу и едва заметное белое
   слева снизу — карточка перестаёт быть глухой чёрной плитой. Чистый CSS,
   на клики не влияет (pointer-events: none). */
.cart-phoneband::before { content: ''; position: absolute; top: -120px; right: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(222, 25, 26, .30), transparent 72%); pointer-events: none; }
.cart-phoneband::after { content: ''; position: absolute; bottom: -140px; left: -60px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .07), transparent 72%); pointer-events: none; }
.cart-phoneband-ico { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(222, 25, 26, .38); }
.cart-phoneband-ico svg { width: 24px; height: 24px; }
.cart-phoneband-text { position: relative; flex: 1 1 260px; min-width: 240px; }
.cart-phoneband-title { font-weight: 800; font-size: 18px; letter-spacing: -.01em; line-height: 1.25; }
.cart-phoneband-sub { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .72); margin-top: 4px; max-width: 560px; }
/* flex-direction: row обязателен — форма носит общий класс .lp-form, а он
   колоночный (flex-direction: column); без явного row телефон и кнопка
   всегда стояли столбиком, даже на широком экране. */
.cart-phoneband-form { position: relative; display: flex; flex-direction: row; gap: 10px; flex: none; flex-wrap: nowrap; margin-left: auto; }
.cart-phoneband-input { width: 225px; height: 52px; border: 0; border-radius: 12px; padding: 0 18px; font: 500 15px "Manrope", sans-serif; color: var(--ink); background: #fff; box-sizing: border-box; }
.cart-phoneband-input::placeholder { color: var(--muted); }
.cart-phoneband-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(222, 25, 26, .45); }
.cart-phoneband-btn { padding: 0 24px; height: 52px; white-space: nowrap; }
@media (max-width: 900px) {
  /* Форма — своей строкой: телефон тянется, кнопка остаётся своей ширины.
     Раньше форма переносилась целиком с телефоном фиксированных 210px —
     кнопка падала ниже во всю ширину, ряд разваливался. */
  .cart-phoneband-form { flex: 1 1 100%; margin-left: 0; }
  .cart-phoneband-input { flex: 1; width: auto; min-width: 0; }
}
@media (max-width: 560px) {
  .cart-phoneband { padding: 20px; border-radius: 16px; }
  .cart-phoneband-ico { width: 46px; height: 46px; }
  .cart-phoneband-ico svg { width: 21px; height: 21px; }
  /* Узкий экран: min-width 240px ронял текст под иконку (осиротевшая
     трубка на своей строке) — даём тексту сжиматься рядом с иконкой. */
  .cart-phoneband-text { min-width: 0; flex-basis: 200px; }
  .cart-phoneband-title { font-size: 16.5px; }
  .cart-phoneband-form { flex-wrap: wrap; }
  .cart-phoneband-input { flex: 1 1 100%; }
  .cart-phoneband-btn { width: 100%; }
}

/* ===== /v2/ — временный конверсионный дубль главной (сравнение) ===== */
.v2-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px 40px; align-items: center; background: var(--soft); border-radius: 22px; padding: 46px 48px 38px; margin-top: 8px; }
.v2-hero-eb { display: block; color: var(--coral); margin-bottom: 14px; }
.v2-hero-title { font-weight: 800; font-size: 40px; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 14px; }
.v2-hero-sub { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 24px; max-width: 520px; }
.v2-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.v2-hero-cta { padding: 15px 26px; }
.v2-hero-ctas .btn-out { padding: 15px 26px; }
.v2-hero-photo { align-self: stretch; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.v2-hero-photo img { max-height: 320px; object-fit: contain; mix-blend-mode: multiply; }
.v2-hero-usps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; border-top: 1px solid var(--line); padding-top: 24px; }
.v2-usp { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; }
.v2-usp-ico { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--coral-wash); color: var(--coral); display: grid; place-items: center; }
.v2-usp b { display: block; font-size: 13.5px; }
.v2-usp-sub { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.v2-numbers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 26px; }
.v2-number { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; text-align: center; }
.v2-number b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.v2-number span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35; }

.v2-goals { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.v2-goal { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: var(--soft); color: var(--ink); transition: box-shadow .2s, transform .2s; }
.v2-goal:hover { color: var(--ink); box-shadow: 0 12px 30px rgba(29, 29, 31, .1); transform: translateY(-3px); }
.v2-goal-pic { display: flex; align-items: center; justify-content: center; height: 110px; margin-bottom: 12px; overflow: hidden; }
.v2-goal-pic img { width: 118%; height: 118%; max-width: none; object-fit: contain; mix-blend-mode: multiply; }
.v2-goal-name { font-weight: 700; font-size: 14px; line-height: 1.3; }
.v2-goal-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }

.v2-badge { font: 700 11px 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--green); background: var(--green-wash); border-radius: 999px; padding: 6px 12px; }
.v2-hit { position: relative; flex: none; width: 290px; }
.v2-hit .pcard { width: 100%; }
.v2-hit-rating { position: absolute; right: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; font-weight: 800; font-size: 12.5px; color: var(--ink); }
.v2-hit-rating svg { color: var(--gold); }

.v2-why { margin-top: 44px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--ink); color: #fff; display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: center; padding: 38px max(calc(50vw - 650px), 40px); }
.v2-why-title { font-weight: 800; font-size: 22px; line-height: 1.3; letter-spacing: -.01em; margin: 0; }
.v2-why-items { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.v2-why-item { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .85); }
.v2-why-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: #fff; margin-bottom: 10px; }

.v2-brands-title { margin-bottom: 18px; }
.v2-brands { display: flex; gap: 14px 34px; flex-wrap: wrap; align-items: center; }
.v2-brand { font-weight: 800; font-size: 21px; letter-spacing: .12em; color: var(--faint); }
.v2-brand--cert { color: var(--ink); }
.v2-brands-note { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
.v2-brands-note a { color: var(--coral); font-weight: 600; }

.v2-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.v2-step { border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.v2-step-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--coral); color: #fff; font-weight: 800; margin-bottom: 12px; }
.v2-step b { display: block; font-size: 14.5px; margin-bottom: 6px; }
.v2-step-sub { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.v2-final { margin-top: 44px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 30px; align-items: center; background: var(--coral-wash); border-radius: 22px; padding: 38px 44px; }
.v2-final-title { font-weight: 800; font-size: 25px; letter-spacing: -.01em; margin: 0 0 8px; color: var(--coral-d); }
.v2-final-sub { font-size: 14.5px; color: var(--muted); margin: 0 0 18px; }
.v2-final-btn { padding: 14px 26px; }
.v2-final-contacts { text-align: right; }
.v2-final-phone { display: block; font-weight: 800; font-size: 24px; letter-spacing: -.01em; color: var(--ink); }
.v2-final-note { display: block; font-size: 12.5px; color: var(--muted); margin: 4px 0 10px; }
.v2-final-mail { font-weight: 700; color: var(--coral); }

@media (max-width: 1080px) {
  .v2-numbers { grid-template-columns: repeat(3, 1fr); }
  .v2-goals { grid-template-columns: repeat(3, 1fr); }
  .v2-hero-usps { grid-template-columns: repeat(2, 1fr); }
  .v2-why { grid-template-columns: 1fr; }
  .v2-why-items { grid-template-columns: repeat(3, 1fr); }
  .v2-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .v2-hero { grid-template-columns: 1fr; padding: 30px 24px; }
  .v2-hero-photo { display: none; }
  .v2-hero-title { font-size: 29px; }
  .v2-final { grid-template-columns: 1fr; }
  .v2-final-contacts { text-align: left; }
}
@media (max-width: 560px) {
  .v2-numbers { grid-template-columns: repeat(2, 1fr); }
  .v2-goals { grid-template-columns: 1fr 1fr; }
  .v2-hero-usps { grid-template-columns: 1fr; }
  .v2-why-items { grid-template-columns: 1fr 1fr; }
  .v2-steps { grid-template-columns: 1fr; }
}