@charset "utf-8";
/* БРОНЗАСВЕТ — ОБЩИЙ СЛОЙ ТЕМЫ
   ==========================================================================
   Только то, что верно для ЛЮБОЙ страницы магазина. Блоки главной —
   в theme-bronzasvet.css, он подключён только к шаблону 15.

   Порядок: header.css → ЭТОТ ФАЙЛ → (на главной) theme-bronzasvet.css
   header.css не правим никогда: откат перекраски = снять один <link>.
   Версию ?v=N бампать сразу во всех шаблонах, где он подключён.
   ========================================================================== */

/* Знак в шапке. В разметке чанка это картинка 640×159, и без этих
   трёх правил она выводится в натуральную величину и разносит шапку.
   Чанк шапки общий для всего сайта — значит, и правила должны быть общими. */
.header__logo-img {
  display: block;
  height: 42px;
  width: auto;
}
@media (max-width: 900px) { .header__logo-img { height: 34px; } }
@media (max-width: 480px) { .header__logo-img { height: 28px; } }

/* ==== Палитра, шрифты, фон страницы ==== */
:root {
  /* Латунь. Два тона: тёмный для текста (иначе не проходит AA на камне),
     светлый — только для линий, рамок и волны, где контраст не требуется. */
  /* #8A6626 давал 4.41 на камне — чуть ниже AA. Затемнено до 4.5+. */
  --gold:             #7F5C1E;   /* текст, ссылки, активные состояния */
  --gold-hover:       #664815;
  --gold-decor:       #B58A3A;   /* линии, рамки, волна */
  --gold-dim:         rgba(181, 138, 58, 0.30);
  --gold-faint:       rgba(181, 138, 58, 0.10);
  --divider:          rgba(181, 138, 58, 0.26);

  /* Патина — редкий дополнительный, не фон */
  --accent2:          #7B806E;
  --accent2-dim:      rgba(123, 128, 110, 0.20);

  --bg:               #F1EBDD;   /* камень — основной фон */
  --card:             #E5DDCC;   /* светлый камень — чередующийся блок */
  /* Шапка и подвал: тёплый тёмно-бронзовый, а не патина. Патина зелёная
     и на странице оказалась единственной холодной нотой — спорила с охристым
     героем. Тёплый тёмный связывает шапку с комнатой на фотографии. */
  --header-bg:        #2B241C;
  --header-bg-blur:   rgba(43, 36, 28, 0.93);

  --text:             #3A332A;
  --text-primary:     rgba(58, 51, 42, 0.96);
  --text-secondary:   rgba(58, 51, 42, 0.86);
  --text-muted:       rgba(58, 51, 42, 0.82);
  --text-faint:       rgba(58, 51, 42, 0.70);

  --border:           rgba(58, 51, 42, 0.18);

  /* Шрифтовая пара магазина. От студии досталась Playfair + Onest — она
     всеядная и сейчас стоит на каждом втором сайте.
     Prata — дидон: очень высокий контраст штриха, волосяные линии против
     жирных основных. Типографский эквивалент полированной латуни с резким
     бликом. Кириллица родная, начертание одно (400) — для коротких
     заголовков этого достаточно, а для длинных дидон и не годится.
     Golos Text — современный русский гротеск, рядом с дидоном звучит
     тихо и не спорит с ним. */
  --font-head:        'Prata', 'Playfair', Georgia, serif;
  --font-body:        'Golos Text', 'Onest', system-ui, sans-serif;

  /* Нижний ряд шапки выше студийного: там появились подписи под иконками,
     и волна стала глубже — иначе вырез срезал бы текст. */
  --header-bot-h:     96px;
}

body { background: var(--bg); color: var(--text); }

/* ==== Шапка и плашка cookie ==== */
/* ── Шапка ──────────────────────────────────────────────────
   Поле Вороного снимается: оно про генеративную геометрию и
   остаётся за студией. Шапка — плотная патина, волновой клип
   и золотая кромка сохраняются (это личный почерк мастера,
   он идёт через все его сайты). */

.header::before {
  /* Шапка прозрачная: сквозь неё проступает комната, и шапка перестаёт
     быть отдельной плашкой поверх страницы. Размытие обязательно — без
     него сквозь шапку читаются детали кадра и текст меню наезжает на них.
     Плотность 0.72 — предел, ниже светлый потолок пробивает и меню
     теряет контраст (проверено измерением, не на глаз). */
  background: rgba(43, 36, 28, 0.72);
  backdrop-filter: blur(18px) saturate(1.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
}
/* При прокрутке шапка тоже остаётся прозрачной — по просьбе мастера.
   Чуть плотнее исходной: под ней проходят светлые блоки страницы, и на
   них меню иначе теряется. Размытие усилено по той же причине. */
.header--scrolled::before {
  background: rgba(43, 36, 28, 0.80);
  backdrop-filter: blur(22px) saturate(1.06);
  -webkit-backdrop-filter: blur(22px) saturate(1.06);
}

.header__edge-line { stroke: var(--gold-decor); opacity: 0.55; }
.wave-glow { stroke: #d9b978; }

/* Шапка тёмная, страница светлая — внутри шапки текст должен
   остаться светлым, иначе он уйдёт в патину. */
.header,
.header__panel {
  --text:           #F2EFEA;
  --text-primary:   rgba(242, 239, 234, 0.97);
  --text-secondary: rgba(242, 239, 234, 0.84);
  --text-muted:     rgba(242, 239, 234, 0.86);
  --text-faint:     rgba(242, 239, 234, 0.74);
  --gold:           #C9A961;
  --gold-hover:     #ddc48d;
  --border:         rgba(242, 239, 234, 0.18);
  --card:           #3A3126;
  color: #F2EFEA;
}

.header__panel-inner { background: #2B241C; }

/* Плашка cookie стоит на патине (--header-bg), а страница светлая —
   ей нужен свой светлый текст, иначе она сливается. */
.cookie-banner {
  --text:           #F2EFEA;
  --text-secondary: rgba(242, 239, 234, 0.84);
  --gold:           #C9A961;
  --divider:        rgba(242, 239, 234, 0.14);
  color: #F2EFEA;
}
.cookie-banner__text,
.cookie-banner__text a { color: #F2EFEA; }

/* ==== Общие блоки и подвал ==== */
/* ── Основные блоки ─────────────────────────────────────────
   Чередование сохраняется, но обоими тонами камня, а не
   «светлый против тёмного». Разница мягче и для каталога это
   правильнее: фон не спорит с фотографиями товара. */

.cat-menu,
.about {
  background:
    radial-gradient(circle at 85% 20%, rgba(181, 138, 58, 0.07), transparent 42%),
    var(--bg);
}

.collections,
.directions,
.portfolio {
  background:
    radial-gradient(circle at top left, rgba(181, 138, 58, 0.07), transparent 42%),
    var(--card);
}

/* Блоки, переопределявшие токены под тёмный фон, теперь на светлом —
   их локальные значения приводим к теме, иначе останется старый тауп. */
.collections,
.directions,
.portfolio {
  --gold:           #8A6626;
  --gold-hover:     #6E4F1B;
  --divider:        rgba(181, 138, 58, 0.26);
  --accent2:        #7B806E;
  --card:           #DCD2BF;
  --text:           #3A332A;
  --text-primary:   rgba(58, 51, 42, 0.96);
  --text-secondary: rgba(58, 51, 42, 0.86);
  --text-muted:     rgba(58, 51, 42, 0.82);
  --text-faint:     rgba(58, 51, 42, 0.70);
  --border:         rgba(58, 51, 42, 0.18);
}

/* У формы заявки в header.css свой набор токенов со студийной латунью #C9A961.
   Из-за него кнопка «Отправить заявку» давала контраст 1.5 — надпись почти
   не читалась. Блок общий, так что чинится сразу на всех страницах. */
.request-form {
  background: var(--card);
  --gold:       #7F5C1E;
  --gold-hover: #5F4415;
  --gold-dim:   rgba(127, 92, 30, 0.3);
  --gold-faint: rgba(127, 92, 30, 0.09);
  --divider:    rgba(127, 92, 30, 0.24);
}

/* ── Подвал ─────────────────────────────────────────────────
   Единственный по-настоящему тёмный блок на странице: патина.
   Держит низ страницы и повторяет шапку. */

.footer {
  background: var(--header-bg);
  --text:           #F2EFEA;
  --text-primary:   rgba(242, 239, 234, 0.96);
  --text-secondary: rgba(242, 239, 234, 0.84);
  --text-muted:     rgba(242, 239, 234, 0.84);
  --text-faint:     rgba(242, 239, 234, 0.72);
  --gold:           #C9A961;
  --gold-hover:     #ddc48d;
  --card:           #3A3126;
  --border:         rgba(242, 239, 234, 0.16);
  color: #F2EFEA;
}

/* `color` наследуется вычисленным значением и НЕ перерешает var(--text)
   у потомков — элементы без собственного color останутся тёмными на
   патине. Поэтому им цвет задаётся явно. Та же ловушка была на студии. */
.footer .section-title,
.footer h2, .footer h3, .footer h4,
.footer p, .footer a, .footer li, .footer span {
  color: inherit;
}
.footer a:hover { color: var(--gold-hover); }

/* ==== Волна и меню категорий в шапке ==== */
/* ── Волна ──────────────────────────────────────────────────
   Заливки волн — DOM-соседи секций, а не потомки, поэтому
   секционные токены им не видны. Цвет задаётся корневым
   var(--bg) / var(--card) или литералом. */

.wave-fill__line { stroke: var(--gold-decor); opacity: 0.5; }


/* ── Меню категорий ─────────────────────────────────────────
   У студии иконки стояли без подписей: там их четыре штуки и
   значение понятно из контекста. В магазине это навигация по
   каталогу — покупатель должен читать «Бра», а не угадывать
   силуэт. Подпись возвращается под иконку. */

.product-menu__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  /* Снизу больше, чем сверху: под подписями проходит волна, и без запаса
     иконки с текстом упираются в самый край шапки. */
  padding: 0.2rem 0.9rem 0.9rem;
}

.product-menu__label {
  position: static;
  width: auto; height: auto;
  margin: 0; padding: 0;
  overflow: visible;
  clip-path: none;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--text-muted);
  transition: color 0.25s var(--ease);
}
.product-menu__item:hover .product-menu__label { color: var(--gold-hover); }

@media (max-width: 1100px) {
  .product-menu__label { font-size: 0.72rem; }
  .product-menu__item  { padding-inline: 0.55rem; }
}
@media (max-width: 900px) {
  /* Ниже 900 подписи снова прячутся — в строку они уже не помещаются,
     а доступное имя ссылки остаётся в title. */
  .product-menu__label { display: none; }
}

/* Знак вращался при наведении — приём из студийной темы, для магазина
   классики он суетливый. Оставляем только мягкое свечение. */
.header__logo:hover .header__logo-icon { transform: none; }


/* ── Выпадающая панель ──────────────────────────────────────
   Три правки против наследия студийной темы. */

.header__panel {
  /* 1. Поле Вороного снимается: оно про генеративную геометрию, и в
        раскрытом меню магазина эти линии читались чужими. */
  background: var(--header-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* 2. Панель заезжает под шапку. Пока её верх стоял ровно по низу
        шапки, в вырезе волны оставалась светлая щель во всю ширину. */
  top: calc(var(--header-total-h) - 26px);
}

/* 3. Содержимому возвращается отступ, который съела подвижка вверх. */
.header__panel .header__panel-inner { padding-top: 26px; }

/* 4. Панель заехала под шапку и накрыла собой подписи иконок: она лежит
      внутри шапки и с z-index 190 всплывала над её нижним рядом. Опускаем
      панель под содержимое шапки, а рядам поднимаем слой. */
.header__panel { z-index: 1; }
.header__top,
.header__bottom { position: relative; z-index: 5; }


/* ── Карточки коллекций в раскрытом меню ────────────────────
   Плитка была 4:3, горизонтальная, а снимки вертикальные — люстру
   обрезало сверху и снизу, оставалась середина впритык. Плитка
   разворачивается вертикально под формат кадра: тогда вещь входит
   целиком и обрезка идёт только по бокам, где всё равно стена.

   Ширина при этом ограничена: на всю колонку вертикальные карточки
   вырастали на пол-экрана и раскрытое меню перекрывало страницу.
   Ряд собирается по центру из карточек фиксированной ширины. */

@media (min-width: 901px) {
.header__panel--tiles .header__panel-inner {
  grid-template-columns: repeat(4, minmax(0, 148px));
  justify-content: center;
  gap: 1.4rem;
  /* Снизу больше: под подписями проходит волновой срез панели, и без
     запаса текст упирался в него и почти не читался. */
  padding-block: 1.6rem 4.2rem;
}
.header__panel--tiles .hpanel__thumb {
  aspect-ratio: 3 / 4;
  background: #241E17;
}
.header__panel--tiles .hpanel__name {
  margin-top: 0.85rem;
  font-size: 0.88rem;
  line-height: 1.35;
}
}   /* /min-width: 901px — в мобильной шторке плитки раскладывает сама тема */


/* Prata существует только в одном начертании: где вёрстка просила 300 или
   500, браузер синтезировал бы псевдо-жирный и псевдо-светлый и портил
   рисунок. Поэтому вес фиксируем. Контраст у дидона высокий, поэтому
   межбуквенное чуть раскрываем — иначе на мелких кеглях слипается. */
.hero .hero-title,
.section-title,
.collection-name,
.hpanel__name,
.header__logo-text {
  font-weight: 400;
  letter-spacing: 0.005em;
}
.hero .hero-title { letter-spacing: -0.005em; line-height: 1.14; }


/* ==== Знак и единый регистр ==== */
/* ── Логотип ────────────────────────────────────────────────
   Было: кольцо с расходящимися лучами плюс название вразрядку
   заглавными. Знак читался как солнышко — самый ходовой клипарт,
   про люстры не говорящий ничего. Разрядка в кириллице на мелком
   кегле даёт вид сельской вывески; ту же разрядку мы по той же
   причине убирали из подзаголовков.

   Стало: знак — подвеска (нить, колечко, гранёная капля), два штриха
   о том, что вещь висит и что она хрустальная. Название — строчными,
   крупнее, без разрядки: спокойный набор читается дороже кричащего. */

.header__logo-icon { width: 42px; height: 42px; filter: none; }
.header__logo:hover .header__logo-icon { filter: none; }

/* Название НЕ дидоном. Prata — шрифт с очень высоким контрастом штриха:
   в крупном заголовке это красиво, а в логотипе мелким кеглем волосяные
   места разваливаются и слово выглядит хлипко. Знаку имени нужен ровный
   штрих, поэтому берём гротеск — заодно логотип перестаёт повторять
   заголовки, а это и правильно: он должен звучать отдельно. */
.header__logo-text {
  font-family: var(--font-body);
  font-size: 1.38rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #F2EFEA;
  line-height: 1;
}
.header__logo { gap: 0.6rem; align-items: center; }
.header__logo:hover .header__logo-text { color: var(--gold-hover); }

@media (max-width: 900px) {
  .header__logo-text { font-size: 1.14rem; }
  .header__logo-icon { width: 34px; height: 34px; }
}


/* ── Единый регистр по всему сайту ──────────────────────────
   В теме половина надписей набрана заглавными вразрядку, половина
   обычным регистром — шапка получалась разноголосой: логотип и подписи
   иконок говорят, меню кричит.

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

   Заглавные остаются там, где это одно-два слова-указателя и читать
   их не нужно — например, у кнопок. */

.header__nav-link,
.product-menu__label,
.hpanel__row-title,
.section-desc,
.hslide__eyebrow,
.cat-row__title,
.collection-tagline,
.stat-label,
.footer-nav a,
.footer-col__title {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Размер подрастает: заглавные визуально крупнее строчных при том же
   кегле, и после перевода в строчные надписи «сдуваются». */
.header__nav-link { font-size: 0.97rem; }
.hpanel__row-title { font-size: 1rem; }
.section-desc { font-size: 1.02rem; line-height: 1.7; }



/* ==== Выделение текста ==== */
/* ── Выделение текста ───────────────────────────────────────
   Было: полупрозрачное золото, а цвет букв брался из --text. В тёмных
   блоках этот токен не переопределён и остаётся тёмным с общей
   страницы — выделенный текст становился тёмным на тёмном.
   Та же ловушка, что была с заголовками: цвет наследуется вычисленным
   значением и не перерешается по месту.

   Теперь выделение самодостаточно: плотная латунь и тёмные буквы.
   Латунь достаточно светлая, чтобы тёмный текст читался, а сама она
   перекрывает любой фон — и светлый, и тёмный. */
::selection {
  background: #C9A961;
  color: #241E17;
  text-shadow: none;
}
::-moz-selection {
  background: #C9A961;
  color: #241E17;
  text-shadow: none;
}

/* ==== Старые волновые стыки ==== */
/* ── Старые волновые стыки низа страницы ─────────────────
   Пять стыков ниже «Тишины» достались от студийной тёмной темы.
   Две беды:

   1. Заливка под кривой задана жёстким цветом в разметке чанков и
      в трёх случаях не совпадает с блоком, который идёт ниже, — между
      волной и блоком остаётся светлая полоса ничьего тона. Хуже
      всего перед подвалом: там светлая заливка стояла над тёмным
      подвалом. Цвет в разметке — презентационный атрибут, CSS его
      перебивает — правим тут, чанки не трогаем: они общие с
      остальными одиннадцатью шаблонами, которые ещё на тёмной теме.

   2. Золотая кромка была скрыта целиком, и волна читалась как
      случайный перепад тона, а не как линия. Возвращаем её ровно такой
      же, как на стыках верхних блоков. Свечение (.wave-glow) остаётся
      выключенным — оно для тёмного фона.

   :not([class*="--"]) отбирает только старые стыки без модификатора:
   пересобранные верхние рисуют кромку своим вторым путём. */
.wave-fill:not([class*="--"]) .wave-fill__line {
  display: block;
  stroke: #C99E4C;
  stroke-width: 5;
  opacity: 1;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.wave-fill:has(+ .request-form) path[fill] { fill: #D8D2CA; }
.wave-fill:has(+ .footer)       path[fill] { fill: #2B241C; }

/* У «Направлений» в фоне лежала латунная растяжка из левого верхнего
   угла. Она начинается ровно по краю секции, а волновой стык лежит
   выше — поэтому под золотой кривой проступала вторая, прямая черта.
   Семь процентов тёплого в углу не стоят лишней линии на стыке. */
.about      { background: var(--bg); }

/* Декоративные ветви лежат внутри секций и начинаются ровно по их
   верхней кромке, а волновой стык проходит выше. Получалась вторая,
   прямая граница под золотой кривой. Растушёвываем верх. */
.section-branches {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 220px);
  mask-image: linear-gradient(180deg, transparent 0, #000 220px);
}

/* Фон «Тишины» ──────────────────────────────────────
   Снимок мастера IMG_8260 — панорамный крупный план рожков с
   ониксом, 4752×1552. Полоса на широком экране почти такой же
   пропорции, поэтому кадр входит почти целиком. Для сайта уменьшен
   до 2000 px (band-onyx.jpg) — оригинал на месте, не тронут.

   Вуаль светлая, но не чисто белая: белым полоса выбивалась бы из
   тёплой страницы. Справа она плотнее — там лежит цитата, и ей
   нужен спокойный фон; слева прозрачнее, там только водяной знак. */
.luxury-band {
  background:
    linear-gradient(95deg,
      rgba(238, 232, 219, 0.66) 0%,
      rgba(238, 232, 219, 0.74) 46%,
      rgba(238, 232, 219, 0.86) 100%),
    url("../images/band-onyx.jpg?v=1") center / cover no-repeat,
    var(--card);
}

@media (max-width: 900px) {
  /* На узком экране cover режет панораму до случайного фрагмента
     и сильно его увеличивает. Вуаль плотнее: весь текст блока там
     лежит по центру, поверх самой гущи кадра. */
  .luxury-band {
    background:
      linear-gradient(rgba(238, 232, 219, 0.82), rgba(238, 232, 219, 0.82)),
      url("../images/band-onyx.jpg?v=1") center / cover no-repeat,
      var(--card);
  }
}

/* Фото должно уходить ПОД волну, а не начинаться после неё.
   Стык рисуется svg высотой 110 px, подвешенным над нулевой строкой
   блока, то есть поверх низа «Реставрации». Раньше низ кривой
   заливался плоским тоном — именно эта полоса шла между золотой
   кромкой и началом снимка. Теперь заливка ушла наверх кривой, а
   полоса подтянута на ту же высоту вверх: фото заходит под волну,
   и вырез открывает его, а не подложку. Отступ сверху компенсирует
   подъём, иначе содержимое полосы уехало бы под кривую. */
/* Снизу столько же: цитата опустилась, когда мы развели её со словом,
   и последнюю строку срезала нижняя волна. */
.luxury-band { margin-top: -110px; padding-top: calc(6rem + 110px); padding-bottom: calc(6rem + 110px); }

@media (max-width: 900px) {
  /* На узком экране стык урезан до 34 px — подъём тот же. */
  .luxury-band { margin-top: -34px; padding-top: calc(6rem + 34px); padding-bottom: calc(6rem + 34px); }
}

/* Линия в полосе стояла по центру блока (top: 50%) и проходила ровно
   по слову «Тишина», перечёркивая его. Место ей — в зазоре между
   словом и цитатой. Зазора не было вовсе (низ слова 325, верх
   цитаты 326) — сначала разводим их.

   Высота слова не прибита гвоздями: кегль у него clamp от ширины
   экрана. Поэтому всё считается от той же формулы, а не от числа в
   пикселях: иначе на промежуточных ширинах линия снова наедет на
   буквы. Множитель 1.35 — измеренная высота строки Праты. 32px —
   смещение самой кривой внутри своего svg (y=32 из 60). */


/* ==== Логотип в подвале и подпись ==== */
/* ── Логотип ─────────────────────────────────────────
   Готовый знак мастера (logo_BS.png) вместо сборки «капля + набранное
   слово». Надпись в оригинале тёмно-коричневая, а шапка тёмная — на ней
   она не читалась бы. Поэтому рядом лежит logo_BS-light.png: буквы
   перекрашены в молочный, пламя сохранило свою латунную растяжку.
   Разделял по геометрии (слово до x=567, знак после 580), а не по цвету:
   самые тёмные места пламени по тону совпадают с буквами. И обрезал
   по заметной непрозрачности, а не по alpha > 0: по краям файла висели
   пиксели с alpha 1–4, и обычный трим оставлял 32 px пустоты слева. */
/* Правила знака переехали в theme-bronzasvet-base.css — они нужны всем страницам. *//* Тот же знак в подвале вместо набранного слова. */
/* колонка выровнена по правому краю, а картинка — блок: text-align её не двигает */
.footer-logo-img { display: block; height: 46px; width: auto; margin-left: auto; }
/* на телефоне колонка слева — знак встаёт по той же кромке, что и подпись */
@media (max-width: 900px) { .footer-logo-img { height: 36px; margin-left: 0; } }

/* Водяной знак в блоке заявки был набран как BRASS — пять латинских
   букв. «Бронзасвет» вдвое длиннее, и прежний кегль выводил слово
   за края экрана. Убавляем и страхуемся от горизонтальной прокрутки. */
.cta-bg-text {
  font-size: clamp(3.5rem, 11vw, 11rem);
  white-space: nowrap;
  max-width: 100%;
}

/* Подпись под знаком в подвале.
   Было: вплотную к логотипу (зазор ноль), тем же молочным в полную силу
   и с разрядкой — две надписи одной громкости друг на друге, и непонятно,
   что главное. Стало: воздух под знаком, тише по тону, и правый край
   подписи совпадает с правым краем логотипа и всей колонки.

   Отрицательный правый отступ размером в разрядку — обязательный: браузер
   ставит разрядку и после последней буквы, и без компенсации строка
   недотягивает до края на эти три пикселя — ровно то, что глаз ловит. */
.footer-tagline {
  margin-top: 0.7rem;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  color: rgba(242, 239, 234, 0.52);
  text-align: right;
  margin-right: -0.3em;
}

@media (max-width: 900px) {
  .footer-tagline { text-align: left; margin-right: 0; }
}

/* ==== Категория: первый экран (шаблон 6) ====
   heroconcept.css рисовал этот экран под тёмный фон: заголовок и
   описание там светлые. На камне они пропали почти полностью.
   Сам файл не трогаем — перекрываем здесь. */
.lux-hero__title      { color: var(--text); }
.lux-hero__desc       { color: rgba(58, 51, 42, 0.8); }
.lux-hero__meta-value { color: #332C22; }
.lux-hero__meta-label { color: rgba(58, 51, 42, 0.52); }
.lux-hero__eyebrow    { color: var(--gold); }
.lux-hero__eyebrow-line { background: var(--gold-decor); }
.cat-hero__label      { color: rgba(58, 51, 42, 0.28); }

/* Теневой заголовок позади первого экрана убран.

   Он достался от студийной темы и был почти не виден на светлом.
   Когда проявили — стало видно, что это ТО ЖЕ СЛОВО, что и заголовок
   рядом, и тем же шрифтом: повтор, а не приём. Плюс половину контура
   закрывает фотография.

   На главной похожая «Тишина» остаётся — там это отдельное слово,
   которого больше нигде нет.

   Вернуть: убрать display: none и поставить
   -webkit-text-stroke: 0.8px rgba(122, 92, 44, 0.42); color: rgba(122, 92, 44, 0.05); */
.lux-hero__ghost { display: none; }

/* ==== Сетка товаров и кнопки ====
   Найдено обмером контраста, а не на глаз: всё ниже на светлом фоне
   давало 1.0–1.2 при норме 4.5 — то есть читалось как пустое место. */
.pg__card-name { color: var(--text); }
.spec-label    { color: var(--text-faint); }
.spec-value    { color: var(--text-secondary); }

/* Счётчик ламп лежит поверх снимка, а снимки разные — цветом его
   не спасти. Подкладываем плашку. */
.pg__series-thumb-count {
  color: #F2EFEA;
  background: rgba(36, 30, 23, 0.62);
  padding: 0.12rem 0.4rem;
  border-radius: 2px;
}

/* Кнопки были белым по полупрозрачному белому — на тёмном это стекло,
   на светлом просто невидимка. */
.btn-glass {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-color: color-mix(in srgb, var(--text) 24%, transparent);
}
.btn-glass:hover { background: color-mix(in srgb, var(--text) 11%, transparent); }

.btn-outline-large { color: var(--gold); border-color: var(--gold-decor); }
.btn-outline-large:hover { color: #5F4415; border-color: var(--gold); }

/* Водяной знак в блоке заявки — тот же, что на главной. */
.cta-bg-text {
  color: rgba(122, 92, 44, 0.08);
  font-size: clamp(3.5rem, 11vw, 11rem);
  white-space: nowrap;
  max-width: 100%;
}

/* Кнопка формы и ссылка на серию брали цвет из более весомых правил,
   поэтому адресуем их точнее. */
.request-form__submit.btn-outline-large {
  color: var(--gold);
  border-color: var(--gold-decor);
}
.request-form__submit.btn-outline-large:hover {
  color: #5F4415;
  border-color: var(--gold);
}

.pg__series-caption,
.pg__series-caption span,
.pg__series-caption-arrow { color: var(--gold); }
.pg__series-block:hover .pg__series-caption,
.pg__series-block:hover .pg__series-caption span,
.pg__series-block:hover .pg__series-caption-arrow { color: #5F4415; }

/* ==== Витрина товаров — тёмная ====
   Решение мастера, и оно верно по сути: хрусталь и стекло читаются
   бликами и тёмными преломлениями. На камне светлые подвески
   растворяются в фоне, на тёмном — выходят все грани.

   Токены переопределяются внутри секции, как у подвала. Всё, что выше
   написано на токенах, перевернётся само — ради этого и переводил
   подписи с жёстких цветов на переменные. */
.catalog-section {
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='15'%3E%3Cpath d='M0 7.5 q15 -4.4 30 0 t30 0 t30 0 t30 0' fill='none' stroke='%23ffffff' stroke-width='0.9' stroke-opacity='0.055'/%3E%3C/svg%3E") repeat,
    #241E17;
  /* Витрина заходит ПОД волну на всю её высоту.
     Раньше стык заливал низ кривой сплошным #241E17, а у самой секции
     поверх того же цвета лежит волновая фактура — получалась плоская
     полоса в 110 px под волной, и содержимое начиналось только под ней.
     Теперь заливка ушла наверх кривой, а секция поднята под неё:
     фактура идёт сквозь вырез, и пустота съедена. */
  margin-top: -110px;
  padding: calc(110px + clamp(1.4rem, 3vw, 3rem)) 0 clamp(4rem, 7vw, 7rem);

  --text:           #F2EFEA;
  --text-primary:   rgba(242, 239, 234, 0.96);
  --text-secondary: rgba(242, 239, 234, 0.84);
  --text-muted:     rgba(242, 239, 234, 0.78);
  --text-faint:     rgba(242, 239, 234, 0.62);
  --gold:           #C9A961;
  --gold-hover:     #ddc48d;
  --gold-decor:     #C99E4C;
  --border:         rgba(242, 239, 234, 0.16);
  color: var(--text);
}

/* Витрина изделий серии на карточке товара — та же тёмная комната:
   карточки нарисованы под неё, а стояли на светлом, где хрусталь
   сливается с фоном. Подъём под волну и токены общие с каталогом. */
.related-section {
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='15'%3E%3Cpath d='M0 7.5 q15 -4.4 30 0 t30 0 t30 0 t30 0' fill='none' stroke='%23ffffff' stroke-width='0.9' stroke-opacity='0.055'/%3E%3C/svg%3E") repeat,
    #241E17;
  margin-top: -110px;
  padding: calc(110px + clamp(1.4rem, 3vw, 3rem)) 0 clamp(4rem, 7vw, 7rem);

  --text:           #F2EFEA;
  --text-primary:   rgba(242, 239, 234, 0.96);
  --text-secondary: rgba(242, 239, 234, 0.84);
  --text-muted:     rgba(242, 239, 234, 0.78);
  --text-faint:     rgba(242, 239, 234, 0.62);
  --gold:           #C9A961;
  --gold-hover:     #ddc48d;
  --gold-decor:     #C99E4C;
  --border:         rgba(242, 239, 234, 0.16);
  color: var(--text);
}
/* Вложенный контейнер в контейнере давал двойные поля. */
.related-section .container .container { padding: 0; max-width: none; }

/* Счётчик ламп: на тёмном плашка больше не нужна. */
.related-section .pg__series-thumb-count,
.catalog-section .pg__series-thumb-count {
  background: rgba(20, 16, 12, 0.55);
}

/* ==== Лента серий и плитки коллекций ====
   Кружки серий стояли на светлой плашке с тёмной вуалью сверху —
   выходил серый тауп мимо палитры, а сами люстры терялись так же,
   как в большой сетке. Та же логика, что и с витриной: фон тёмный,
   вуаль снята — хрусталь читается. */
/* Снимки — вырезки с прозрачным фоном, пропорции 1056×1320 (4:5).
   Их впихивало в квадрат 166×166 «по заполнению»: верх и низ срезало,
   а потом круг съедал углы — у части люстр оставалась середина без
   чаши и без подвесок, а Barna превращалась в обрезок цепи.
   Вписываем целиком и даём поля, чтобы силуэт не касался кромки круга. */
.series-strip__media { background: #241E17; }
.series-strip__media img {
  object-fit: contain;
  padding: 16px 14px 18px;
}
.series-strip__overlay { background: transparent; }
.series-strip__name    { color: var(--text); }

/* Стрелки прокрутки были серыми пилюлями ни из какой палитры. */
.series-strip__nav {
  background: var(--card);
  border: 1px solid rgba(127, 92, 30, 0.35);
  color: var(--gold);
}
.series-strip__nav:hover { background: var(--gold-decor); border-color: var(--gold-decor); color: #FFF8EA; }

/* Стрелки внутри тёмной витрины остаются тёмными — там фон другой. */
.catalog-section .pg__series-nav {
  background: rgba(20, 16, 12, 0.45);
  border-color: rgba(201, 168, 76, 0.3);
}

/* Вуаль на плитках коллекций считалась от тёмной темы — снимки
   интерьеров и так тёмные, 40% сверху гасили их в пятно. */
.col-strip .collection-overlay { background: rgba(0, 0, 0, 0.18); }

/* Пустая категория. Из девяти страниц этого шаблона товары есть только на
   четырёх; остальные показывали тёмный провал в 300 px без единого слова.
   :empty здесь не годится — внутри остаются переводы строк от шаблона,
   поэтому проверяем отсутствие дочерних элементов. */
.pg:not(:has(*)) {
  display: block;
  min-height: 0;
  padding: clamp(1rem, 3vw, 2rem) 0;
}
.pg:not(:has(*))::after {
  content: 'В этой категории модели ещё не выложены. Посмотрите серии ниже — их десять.';
  display: block;
  text-align: center;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 34ch;
  margin: 0 auto;
}

/* ==== Ритм карточек в сетке ====
   Две беды, которые мастер увидел как «пустота» и «перепады»:

   1. Высота строки сетки равна самой высокой карточке. Карточки тянулись
      на всю её высоту, а нижняя черта уезжала вниз — между текстом и
      чертой зияла дыра внутри карточки. У серийных карточек есть
      кнопка и лента миниатюр (+151 px), у одиночных нет ничего.
      align-self: start — карточка заканчивается там, где кончается её
      собственное содержимое. Пустое место остаётся, но теперь оно
      СНАРУЖИ карточки и читается как воздух между рядами.

   2. Название занимало то одну строку, то две — и всё, что ниже, съезжало
      на 22 px. Оттого кнопки и ленты миниатюр стояли ступеньками.
      Резервируем под название две строки всегда. */
/* Ключ ко всему: у карточки в catalog.css стоит height: 100%. Пока он стоит,
   никакой align-self не поможет: карточка всё равно тянется на всю строку.
   На это я потратил три захода, пока не сравнил height: max-content (628)
   с фактической высотой (798). Стоило мерить сразу. */
.pg > .pg__card { height: auto; align-self: start; }

.pg__card-name {
  min-height: calc(2 * 1.3em);
  display: flex;
  align-items: flex-start;
}

/* Главный виновник дыры: нижняя черта была прибита к низу через
   margin-top: auto. У карточки без ленты миниатюр этот auto раздувался
   до 169 px — ровно тот провал между подписью материала и чертой.
   Теперь черта идёт сразу за содержимым. */
.pg__card-foot { margin-top: clamp(1.2rem, 2.2vw, 1.8rem); }

/* Иконки типов светильника есть далеко не у каждой модели, а стояли они в
   потоке текста — и сдвигали всё, что ниже, на 62 px только у тех карточек,
   где они есть. Переносим их на нижний край фотографии — решение мастера.
   Вне потока они не занимают высоты вообще, и перепад исчезает совсем.
   Точка отсчёта — тело карточки (у него position: relative), поэтому
   bottom: 100% выводит ровно на низ снимка независимо от его высоты. */
.pg__card-icons {
  position: absolute;
  right: 0.4rem;
  /* Точка отсчёта — верх тела карточки, а между ним и низом фотографии
     есть зазор в 1.8rem (margin-bottom у .pg__card-media). Без этой поправки
     иконки свешивались ниже снимка на 18 px — измерено. */
  bottom: calc(100% + 1.8rem + 12px);
  display: flex;
  gap: 0.45rem;
  margin: 0;
  z-index: 2;
}
.pg__card-icons:empty,
.pg__card-icons:not(:has(*)) { display: none; }

/* Кнопка «Смотреть серию» — ПОСЛЕ миниатюр, не над ними.
   Сначала покупатель видит, что ещё есть в серии, и только потом ему
   предлагают туда перейти. Блок был display: block — переводим в колонку,
   чтобы работал order и не пришлось трогать разметку чанка. */
.pg__series-block {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.pg__series-slider  { order: 1; }
.pg__series-caption { order: 2; margin-bottom: 0; align-self: flex-start; }

/* Миниатюры серии.
   Было: светлая плашка (снимки с прозрачным фоном, и она просвечивала),
   а внутри картинка 84×64 с object-fit: cover при исходнике 1056×1320.
   Горизонтальное окно под вертикальный кадр: верх и низ срезало, оставалась
   полоска из середины люстры. К тому же картинка была шире самой
   плашки (84 против 72) и вылезала за её края.

   Стало: плашка тёмная — как сама витрина, но на тон светлее, чтобы
   читалась как клавиша; окно равно плашке, кадр вписан целиком. */
.pg__series-thumb {
  background: #332A20;
  overflow: hidden;
  width: 86px;
  height: 106px;
  border: 1px solid rgba(242, 239, 234, 0.1);
}
.pg__series-thumb-img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
.pg__series-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px 4px 12px;
}
.pg__series-thumb:hover { border-color: rgba(201, 169, 97, 0.5); }

/* Счётчик ламп был соседом картинки и отнимал у неё четверть высоты.
   Кладём его поверх — снимку достаётся вся плашка. */
.pg__series-thumb { position: relative; }
.pg__series-thumb-img { position: absolute; inset: 0; }
.pg__series-thumb-count {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 2;
}

/* Подпись над лентой серии — тихая, это пояснение, а не заголовок. */
.pg__series-label {
  order: 0;
  display: block;
  font-size: 0.8rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--text-faint);
  margin-bottom: -0.2rem;
}

/* Подпись перед иконками типов. Лежит в той же строке и вместе с ними
   вынесена из потока — высоту карточки не меняет. Плашка под текстом
   обязательна: строка лежит на снимке, а снимки разные. */
.pg__card-icons { align-items: center; }
.pg__card-icons .pg__card-icons-label {
  /* catalog.css красит ЛЮБОЙ span в этой строке в золотой кружок 36×36 —
     селектор там весомее одиночного класса, поэтому подпись сжимало
     до размера иконки. Адресуем точнее и гасим кружок явно. */
  display: inline-flex;
  width: auto;
  height: auto;
  flex: 0 0 auto;
  border: 0;
  border-radius: 2px;
  background: rgba(20, 16, 12, 0.62);
  padding: 0.24rem 0.5rem;
  margin-right: 0.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(242, 239, 234, 0.85);
  transform: none;
}

/* Цена и диаметр серии. Строка есть у каждой карточки — данные
   заполнены у всех двадцати пяти товаров, так что резервировать
   место под пустоту не нужно. Цена — латунью и крупнее: это то,
   ради чего строку и читают. Размер тише — это уточнение. */
.pg__card-range {
  /* Цена и габариты разнесены по строкам: в одну строку это четыре
     числа подряд, глазу не за что зацепиться. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  /* Цена теперь стоит между названием и материалами — ей нужен воздух
     с обеих сторон, иначе читается как часть строки материалов. */
  margin: 0.55rem 0 0.95rem;
  /* Общее правило единого регистра поднимало строку в капитель:
     выходило «ОТ 28 000 ₽ · Ø 40–45 СМ». Цена — не надпись-ярлык. */
  text-transform: none;
}
/* Голое число рядом с материалами читается как ещё одна характеристика.
   Подпись набрана как «Материалы» — карточка говорит одним голосом. */
.pg__card-price-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* В окне быстрого просмотра подпись «Цена» уже стоит отдельной строкой —
   второй такой же под ней не нужно. */
.qv__price .pg__card-price-label { display: none; }

.pg__card-price-val {
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.2;
  color: var(--gold);
  white-space: nowrap;
}
.pg__card-from {
  font-family: inherit;
  font-size: 0.8em;
  color: var(--text-faint);
}
.pg__card-dia {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.86rem;
  line-height: 1.2;
  color: var(--text-secondary);
  white-space: nowrap;
}
.pg__card-range > .pg__card-range-dot { display: none; }
.pg__card-range-dot { color: var(--text-faint); }

/* ==== Подбор в каталоге ====
   На странице две сетки: родная (серии) и отфильтрованная (товары).
   Категории устроены по-разному и каждая рисует себя сама, поэтому
   родный вызов не трогаем и просто прячем, когда есть результат подбора. */
#pg-filtered:not(:has(*)) { display: none; }
#pg-filtered:has(*) ~ #pg-grid { display: none; }

.pg__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(1.5rem, 4vw, 3rem) 0;
  text-align: center;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Панель подбора */
/* Две колонки: подбор слева, товар справа. Панель липнет к верху:
   список длинный, и бегать за фильтрами вверх неудобно. */
.catalog-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(1.8rem, 3.5vw, 3.2rem);
  align-items: start;
}
.catalog-aside { position: sticky; top: calc(var(--header-total-h) + 1.2rem); }

/* В колонке места меньше — сетка товаров переходит на две колонки. */
/* Каталог распускаем на всю ширину. Общая колонка сайта — 1280 px:
   для текста это верно, для витрины с боковой панелью тесно. На 1920
   по 320 px пустоты с каждой стороны, а товар сбивался в кучу по центру.
   Потолок всё же ставим: на сверхшироких бесконечный ряд читать невозможно. */
@media (min-width: 1101px) {
  .catalog-section > .container {
    max-width: min(1760px, 100%);
    padding-inline: clamp(2rem, 3.4vw, 4rem);
  }
  .catalog-layout { grid-template-columns: 260px minmax(0, 1fr); }
}

.catalog-results .pg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1250px) {
  .catalog-results .pg,
  .catalog-results #pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Четырёх в ряд не делаем даже на широком: карточка становится узкой,
   люстра мелкой, а рассмотреть вещь — единственное, зачем сюда пришли.
   Ширина контейнера при этом остаётся большой — растёт сам товар. */

@media (max-width: 1100px) {
  .catalog-layout { grid-template-columns: minmax(0, 1fr); }
  .catalog-aside { position: static; }
}

.cfilter {
  margin: 0;
  padding: 0;
}
.cfilter__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
}
.cfilter__title {
  font-family: var(--font-head);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--text);
}
.cfilter__count { font-size: 0.86rem; color: var(--text-faint); }
.cfilter__reset {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
/* В боковой колонке подпись стоит НАД пунктами, а не слева:
   250 px на два столбца не делятся. */
.cfilter__group {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(242, 239, 234, 0.07);
}
.cfilter__group:last-child { border-bottom: 0; }
.cfilter__label { display: block; margin-bottom: 0.55rem; }
.cfilter__label {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cfilter__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cfilter__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.38rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.86rem;
  line-height: 1.2;
  color: var(--text-secondary);
  text-decoration: none;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.cfilter__chip:hover { border-color: var(--gold-decor); color: var(--text); }
.cfilter__chip--on {
  background: var(--gold-decor);
  border-color: var(--gold-decor);
  color: #241E17;
}
.cfilter__chip--off { opacity: 0.32; pointer-events: none; }
.cfilter__n { font-size: 0.76rem; opacity: 0.6; }
.cfilter__chip--on .cfilter__n { opacity: 0.75; }

/* Карточка конкретной модели */
.pg__card--single .pg__card-name a { color: inherit; text-decoration: none; }
.pg__card--single .pg__card-name a:hover { color: var(--gold); }
.pg__card-art {
  position: absolute;
  right: 0.6rem;
  top: 0.6rem;
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  background: rgba(20, 16, 12, 0.55);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}
.pg__card-facts {
  margin: 0.45rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.86rem;
  color: var(--text-secondary);
}

/* ==== Каталог на телефоне ====
   Корень всех бед был один: сетка стояла в две колонки на любой ширине.
   На 375 это давало карточки по 147 px: название в четыре строки,
   материалы наезжают на цену, лента миниатюр шириной 67 px и стрелки
   поверх неё. Одна колонка — и всё встаёт на место. */
@media (max-width: 760px) {
  .catalog-results .pg,
  .catalog-results #pg-grid,
  #pg-grid,
  #pg-filtered { grid-template-columns: minmax(0, 1fr) !important; }

  /* Подпись и значение растаскивались по краям и на узком сталкивались. */
  .pg__card-spec {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.6rem;
  }

  /* Лента моделей: стрелки на телефоне бесполезны — они полупрозрачные
     и лежат поверх самих картинок. Пальцем ленту листают напрямую,
     нужно лишь показать, что листать есть куда: край уходит в туман. */
  .pg__series-nav { display: none; }
  .pg__series-slider { padding: 0; }
  .pg__series-thumbs {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 1.5rem;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.2rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 2.2rem), transparent);
  }
  .pg__series-thumbs::-webkit-scrollbar { display: none; }
  .pg__series-thumb { scroll-snap-align: start; flex: 0 0 auto; }
}

/* Кнопка «Ещё фильтры» — только на телефоне. Классы вешает скрипт,
   поэтому без него группы просто остаются на виду. */
.cfilter--collapsible:not(.cfilter--more-open) .cfilter__group--extra { display: none; }

.cfilter__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.72rem 1rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  font: inherit;
  font-size: 0.86rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.cfilter__more:hover { border-color: var(--gold-decor); color: var(--text); }
.cfilter__more[hidden] { display: none; }

/* Плюс, превращающийся в минус. Стрелка читалась бы как «перейти»,
   а здесь никуда не уходят — раскрывают на месте. */
.cfilter__more-sign {
  position: relative;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}
.cfilter__more-sign::before,
.cfilter__more-sign::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.cfilter__more-sign::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; }
.cfilter__more-sign::after  { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; }
.cfilter--more-open .cfilter__more-sign::after { transform: scaleY(0); opacity: 0; }

/* Сжатие панели на телефоне.
   Главная экономия — подпись группы встаёт В ОДИН ряд с пунктами,
   а не отдельной строкой: четыре группы — четыре сэкономленные строки.
   Остальное — более плотные пункты и узкие зазоры. */
@media (max-width: 760px) {
  .cfilter__head {
    margin-bottom: 0.7rem;
    padding-bottom: 0.6rem;
  }
  .cfilter__title { font-size: 1.05rem; }

  .cfilter__group {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 0.42rem 0;
    border-bottom: 0;
  }
  .cfilter__label {
    margin: 0;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    line-height: 1.2;
  }
  .cfilter__chips { gap: 0.3rem; }
  .cfilter__chip {
    padding: 0.26rem 0.56rem;
    font-size: 0.8rem;
    gap: 0.3rem;
  }
  .cfilter__n { font-size: 0.7rem; }

  /* Пункты-тупики на телефоне просто убираем: места мало,
     а пользы от погасшего названия никакой. */
  .cfilter__chip--off { display: none; }

  .cfilter__more {
    margin-top: 0.5rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.82rem;
  }
}

@media (max-width: 760px) {
  /* На узком экране кривая в 110 px слишком глубокая — укорачиваем,
     и подъём секции меняем ровно на столько же. */
  .wave-fill--to-grid,
  .wave-fill--from-grid { height: 0; }
  .wave-fill--to-grid svg,
  .wave-fill--from-grid svg { height: 46px; }
  .catalog-section {
    margin-top: -46px;
    padding-top: calc(46px + 1.1rem);
  }
}

/* Шторка меню на телефоне занимает правые 280 px, и слева от неё
   продолжали торчать иконки категорий из второй строки шапки — обрезки
   люстры и бра рядом с раскрытым меню. Прячем строку целиком: всё,
   куда они ведут, есть в самой шторке.

   Состояние «открыто» живёт на самом меню, а прятать надо соседний
   блок уровнем выше, поэтому спрашиваем у шапки через :has. */
@media (max-width: 900px) {
  .header:has(.header__main-nav.is-open) .header__bottom {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
}

/* ==== Низ любой страницы на телефоне ====
   Эти правила уже были написаны — но в накладке главной, которая
   подключена только к шаблону 15. На категориях отступы так и оставались
   десктопными, 128 px сверху — пятая часть экрана пустоты под волной.
   Общее правило обязано лежать в общем слое — та же грабля, что с логотипом. */
@media (max-width: 900px) {
  /* Старые волны свисают на 110 px вверх и съедают низ предыдущего
     блока. Укорачиваем их вместе с отступами, иначе кривая наедет на текст. */
  .wave-fill:not([class*="--"]) svg { height: 46px; }

  .about        { padding-top: 3.5rem; padding-bottom: 4rem; }
  .cta          { padding-top: 3.5rem; padding-bottom: 4rem; }
  .request-form { padding-top: 3rem;   padding-bottom: 3.5rem; }
}

/* Плашка cookie на телефоне занимала 234 px — треть экрана, и при
   раскрытом меню съедала его нижние пункты. Текст сокращён
   (цели названы, ссылка на политику на месте), а на узком экране
   кнопка встаёт в один ряд с текстом, а не под ним. */
@media (max-width: 760px) {
  /* В header.css ниже 640 px кнопка уходит под текст и тянется на всю
     ширину — это и давало треть экрана. Ставим рядом. */
  .cookie-banner__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
  }
  .cookie-banner__accept { width: auto; }
  .cookie-banner__text {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.4;
  }
  .cookie-banner__accept {
    flex: 0 0 auto;
    padding: 0.5rem 0.9rem;
    font-size: 0.7rem;
  }
}

/* ==== Избранное на карточке ====
   Сердечко было прозрачным и проявлялось только при наведении —
   поэтому казалось, что оно исчезло. На телефоне наведения нет
   вовсе, то есть там оно было недоступно в принципе.

   Делаем видимым всегда, но тихим: приглушённым, без смещения.
   При наведении и в активном состоянии — в полную силу. */
.pg__card-wish {
  opacity: 0.72;
  transform: none;
}
.pg__card:hover .pg__card-wish,
.pg__card-wish:hover,
.pg__card-wish:focus-visible { opacity: 1; }

@media (hover: none) {
  /* На сенсорном экране сердечко — единственный способ отложить
     модель, прятать его нельзя совсем. */
  .pg__card-wish { opacity: 1; }
}

/* «Подробнее» поверх снимка тоже появляется только при наведении.
   На сенсорном экране оно бесполезно и только мешает смотреть
   на вещь — сама картинка и так ссылка. */
@media (hover: none) {
  .pg__card-overlay { display: none; }
}

/* ==== Быстрый просмотр ==== */
/* Глаз стоит под сердечком и повторяет его вид до пикселя: две кнопки
   в одном углу должны читаться как пара, а не как случайное соседство. */
.pg__card-quick {
  position: absolute;
  top: calc(1rem + 38px + 0.4rem);
  right: 1rem;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(15, 15, 15, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  opacity: 0.72;
  z-index: 3;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.pg__card:hover .pg__card-quick,
.pg__card-quick:hover,
.pg__card-quick:focus-visible { opacity: 1; }
.pg__card-quick:hover {
  color: #d4af37;
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.4);
}
@media (hover: none) { .pg__card-quick { opacity: 1; } }

/* Артикул стоял 
   в том же углу, что и сердечко, и они накладывались друг на друга —
   проверено обмером. Уводим его вниз слева, где пусто. */
.pg__card-art {
  top: auto;
  left: auto;
  bottom: 0.6rem;
  right: 0.6rem;
}

/* Главное: у .pg__card-media есть ::after во всю площадь — притемнение
   снимка. Он лежит ПОВЕРХ ссылки и съедает все нажатия: ссылка на
   картинке была, но кликнуть по ней было нельзя. Именно поэтому
   разметка выглядела исправной, а на деле не работало. */
.pg__card-media::after { pointer-events: none; }
.pg__card-overlay { pointer-events: none; }
.pg__card-img-link { position: relative; z-index: 1; display: block; }
.pg__card-wish,
.pg__card-quick { z-index: 3; }

.qv[hidden] { display: none; }
.qv {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.8rem, 3vw, 2rem);
}
.qv__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 12, 8, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.qv__window {
  position: relative;
  display: grid;
  /* Окно крупнее: сюда идут рассмотреть люстру, а не читать о ней,
     поэтому снимку отдана большая доля ширины. */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.8rem);
  width: min(1280px, 100%);
  max-height: 92vh;
  overflow: auto;
  padding: clamp(1.2rem, 3vw, 2.2rem);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='15'%3E%3Cpath d='M0 7.5 q15 -4.4 30 0 t30 0 t30 0 t30 0' fill='none' stroke='%23ffffff' stroke-width='0.9' stroke-opacity='0.055'/%3E%3C/svg%3E") repeat,
    #241E17;
  border: 1px solid rgba(201, 158, 76, 0.28);
  border-radius: 4px;

  /* Окно всегда тёмное, даже когда его открыли со светлой страницы:
     тот же довод, что и у витрины — хрусталь читается на тёмном. */
  --text:           #F2EFEA;
  --text-secondary: rgba(242, 239, 234, 0.84);
  --text-faint:     rgba(242, 239, 234, 0.62);
  --gold:           #C9A961;
  --border:         rgba(242, 239, 234, 0.16);
  color: var(--text);
}
.qv__media {
  display: flex;
  align-items: center;
  justify-content: center;
}
.qv__media img {
  display: block;
  width: 100%;
  height: auto;
  /* Не даём высокой люстре вытянуть окно за пределы экрана. */
  max-height: 78vh;
  object-fit: contain;
}
.qv__body { display: flex; flex-direction: column; gap: 0.2rem; }
.qv__body .pg__card-name { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.qv__body .pg__series-slider { margin-top: 0.4rem; }
.qv__go { margin-top: 0.9rem; }

.qv__close {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  width: 34px;
  height: 34px;
  background: none;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-faint);
  cursor: pointer;
}
.qv__close:hover { color: var(--gold); }

body.qv-open { overflow: hidden; }

@media (max-width: 760px) {
  .qv__window { grid-template-columns: minmax(0, 1fr); }
}

/* Кнопки на снимке крупнее и с золотой кромкой: чёрный кружок на тёмном
   снимке почти не читался — его приходилось искать. Кромка тонкая,
   не обводка: она должна обозначить кнопку, а не перетянуть внимание
   на себя с самой люстры. */
.pg__card-wish,
.pg__card-quick {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(201, 169, 97, 0.55);
  background: rgba(15, 12, 9, 0.62);
  color: rgba(242, 239, 234, 0.9);
}
.pg__card-wish svg,
.pg__card-quick svg { width: 17px; height: 17px; }

.pg__card-quick { top: calc(1rem + 44px + 0.45rem); }

.pg__card-wish:hover,
.pg__card-quick:hover {
  color: #F3E2B4;
  background: rgba(201, 169, 97, 0.2);
  border-color: var(--gold-decor, #C99E4C);
}

/* Действия в окне быстрого просмотра. Сердечко тут стоит в ряду с кнопкой,
   а не в углу снимка, поэтому гасим ему абсолютное положение. */
.qv__actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
}
.qv__actions .pg__card-wish {
  position: static;
  opacity: 1;
  flex: 0 0 auto;
}
.qv__buy { margin: 0; }
.qv__buy-btn {
  padding: 0.85rem 1.6rem;
  background: var(--gold-decor, #C99E4C);
  color: #241E17;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease;
}
.qv__buy-btn:hover { background: #E0B863; }

/* Диапазон по серии — под лентой моделей, тихой строкой:
   он про весь выбор, а не про открытую вещь. */
.qv__range {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  color: var(--text-faint);
}

/* Стрелки ленты внутри окна должны быть видны всегда:
   клон приходит с disabled от исходной карточки, где места было меньше. */
.qv .pg__series-nav { display: flex; }
.qv .pg__series-nav[disabled] { opacity: 0.35; }

/* Витрина поднята на высоту волны, чтобы её фактура шла сквозь вырез.
   Значит, первый экран обязан отдать столько же внизу, иначе его
   содержимое проваливается в тёмный блок. У героя нижнего отступа не было
   вовсе, и снимок заходил в витрину на 90 px — измерено. */
.lux-hero { padding-bottom: 110px; }

@media (max-width: 760px) {
  /* На телефоне волна короче — и подъём, и отступ совпадают с ним. */
  .lux-hero { padding-bottom: 46px; }
}

/* Шапка окна: серия и артикул в одной строке. Оба в карточке стояли
   поверх снимка, здесь же это обычный текст — гасим абсолютное положение. */
.qv__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.2rem;
}
.qv__head .pg__card-tag,
.qv__head .pg__card-art {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

/* Цена с подписью. */
/* Цена стоит той же строкой, что и остальные характеристики, только
   значение крупнее и латунью: ряд читается как единый список,
   но главное в нём видно сразу. */
.qv__price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0.9rem 0 0.2rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(242, 239, 234, 0.1);
}
.qv__price .pg__card-price-val { font-size: clamp(1.35rem, 2vw, 1.75rem); }

/* Материалы и остальные характеристики — один список, а не два блока.
   Рисунок строк одинаковый, значит и разрыва между ними быть не должно. */
.qv .pg__card-material { margin: 0; }
.qv .pg__card-spec { margin-bottom: 0.45rem; }
.qv .spec-label { white-space: nowrap; }

/* Две ссылки подряд: к модели и к серии — разводим их по весу:
   главная тут модель, серия — вторичное действие. */
.qv__go--model { margin-top: 0.9rem; }
.qv__go--model + .qv__go { margin-top: 0.35rem; opacity: 0.75; }
.qv__go--model + .qv__go:hover { opacity: 1; }


/* ==== Текст о серии ====
   Последний светлый блок перед подвалом. Читают его подряд, а не
   сканируют, поэтому строка узкая и колонка одна: ширина контейнера
   здесь во вред. Заголовок не крупнее витринных — это подпись к
   тексту, а не новый раздел страницы. */
.series-about {
  /* Сверху почти без отступа: над текстом уже лежит нижнее поле ленты
     серий, и два отступа подряд давали 182 px пустоты. Снизу воздух
     нужен — дальше волна и подвал. */
  padding: clamp(0.75rem, 1.6vw, 1.4rem) 0 clamp(3.5rem, 7vw, 6rem);
  background: var(--bg);
}
/* Лента серий перед текстом тоже ужимается: её нижнее поле рассчитано
   на соседство с подвалом, а не с продолжением того же светлого блока. */
.series-strip:has(+ .series-about) { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.series-about__inner { max-width: 62ch; }
.series-about__title {
  margin: 0 0 1.2rem;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  color: var(--text);
}
.series-about__text {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-secondary);
}
.series-about__text p { margin: 0 0 1rem; }
.series-about__text p:last-child { margin-bottom: 0; }

/* Строка с предложением сделать на заказ — не кнопка: она уводила бы
   из серии сильнее, чем сами карточки. Тонкая линия сверху отделяет
   её от текста, ссылка подчёркнута латунью. */
.series-about__note {
  margin: 1.6rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.series-about__note a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--gold) 45%, transparent);
  text-underline-offset: 0.22em;
}
.series-about__note a:hover { text-decoration-color: var(--gold); }

/* ==== Карточка товара ====
   H1 был названием серии — одинаковым у всех изделий линейки, и для
   поиска, и для читателя это пустая строка. Теперь в нём название
   модели, а оно длинное: 48 px капителью занимали четыре строки и
   кричали громче цены. Спускаем до уровня заголовков разделов и
   снимаем капитель — в длинной строке она нечитаема. */
.product-info-title {
  text-transform: none;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0;
  margin-bottom: 0.9rem;
}

/* Размер выводился двумя соседними span без разделителя:
   «Диаметр — 55 см Высота — 50 см». */
.product-specs dd span + span::before {
  content: "·";
  margin: 0 0.5rem;
  color: var(--text-faint);
}

/* Подпись «Цена» была светлой (её рисовали для тёмной витрины) и на
   светлой карточке товара читалась как пустое место. */
.product-detail .product-price-label { color: var(--text-faint); }

/* Витрина изделий серии заходит под волну на 110 px, значит столько же
   обязан отдать блок над ней — иначе конец описания и кнопка
   «Читать полностью» уезжают под тёмный край. Та же зависимость, что
   у первого экрана на категориях и сериях. */
.product-detail { padding-bottom: 110px; }

/* ==== Снимок товара — на той же коричневой стене ====
   Мастер: «фотки не идеальные, а коричневый фон хорошо смотрится».
   Под снимком лежала размытая затемнённая копия его же — у светлых
   кадров она давала грязно-бежевое пятно и подчёркивала неровный
   вырез. Ставим ту же стену, что в витрине, снимок вписываем целиком
   с полями: контур перестаёт упираться в кромку. */
.product-gallery-main {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='15'%3E%3Cpath d='M0 7.5 q15 -4.4 30 0 t30 0 t30 0 t30 0' fill='none' stroke='%23ffffff' stroke-width='0.9' stroke-opacity='0.055'/%3E%3C/svg%3E") repeat,
    #241E17;
}
.product-gallery-bg { display: none; }
.product-gallery-img {
  object-fit: contain;
  /* Поля маленькие: снимки сняты с запасом вокруг люстры, и большой
     отступ поверх этого запаса уменьшал её до миниатюры. */
  padding: clamp(0.5rem, 1.2vw, 1rem);
}
/* Наезд на 3% при наведении обрезал подвески — на contain увеличение
   работает от центра и упирается в кромку. */
.product-gallery-main:hover .product-gallery-img { transform: scale(1.02); }

/* Миниатюры — та же стена, иначе рядом с тёмным снимком они светятся
   белыми квадратами. */
.product-gallery-thumb {
  background: #241E17;
  border-color: rgba(201, 169, 97, 0.32);
}
.product-gallery-thumb img {
  object-fit: contain;
  padding: 5px;
}

/* ==== Увеличение снимка ====
   Та же коричневая стена, что в витрине: на ней вырез снимка не видно,
   а хрусталь читается. Окно во весь экран — смотреть деталь, а не
   рассматривать рамку. */
/* display:flex перебивал атрибут hidden из браузерной таблицы: скрипт
   окно закрывал, а на экране оно оставалось. Так же, как со стрелками
   листания — та же грабля в том же окне. */
.zoom[hidden] { display: none !important; }

.zoom {
  position: fixed;
  inset: 0;
  /* Выше всего, что есть на сайте: бургер и плашка cookie стоят на
     10000, свой курсор — на 99999. С прежними 300 они перехватывали
     нажатие на крестик. */
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='15'%3E%3Cpath d='M0 7.5 q15 -4.4 30 0 t30 0 t30 0 t30 0' fill='none' stroke='%23ffffff' stroke-width='0.9' stroke-opacity='0.055'/%3E%3C/svg%3E") repeat,
    #17120C;
}
/* display:flex у кнопок перебивал атрибут hidden — при единственном
   снимке стрелки всё равно висели по краям. */
.zoom__nav[hidden] { display: none; }
.zoom__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.zoom__close,
.zoom__nav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(201, 169, 97, 0.55);
  border-radius: 50%;
  background: rgba(20, 16, 12, 0.6);
  color: #C9A961;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.zoom__close:hover,
.zoom__nav:hover { background: #C99E4C; border-color: #C99E4C; color: #17120C; }
.zoom__close { top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); font-size: 1.7rem; }
.zoom__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.zoom__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }

/* На телефоне стрелки лежат поверх кадра и мешают: листают пальцем
   по миниатюрам, а здесь смотрят одну вещь. */
@media (max-width: 720px) {
  .zoom__nav { width: 40px; height: 40px; }
}

/* У сайта свой курсор (cursor:none), поэтому zoom-in не увидеть —
   нужен видимый знак, что снимок открывается крупно. */
.product-gallery-main::after {
  content: "";
  position: absolute;
  right: clamp(0.75rem, 1.6vw, 1.25rem);
  bottom: clamp(0.75rem, 1.6vw, 1.25rem);
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(201, 169, 97, 0.55);
  border-radius: 50%;
  background: rgba(20, 16, 12, 0.55)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A961' stroke-width='1.3'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M15.8 15.8 L21 21M11 8.4v5.2M8.4 11h5.2' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 22px 22px no-repeat;
  pointer-events: none;
  transition: background-color 0.25s, border-color 0.25s;
}
.product-gallery-main:hover::after {
  background-color: rgba(201, 158, 76, 0.22);
  border-color: #C9A961;
}

/* ==== Курсор в окне увеличения ====
   На сайте свой курсор: `html.has-custom-cursor * { cursor: none !important }`
   плюс две точки на z-index 99999. Окно лежит выше них, поэтому под ним
   свой курсор не виден, а системный погашен тем самым !important —
   выходит, что мышью целиться не во что, и крестик «не работает».
   На время окна возвращаем настоящий курсор и гасим свой. */
html.zoom-open .cursor-dot,
html.zoom-open .cursor-ring { display: none !important; }

html.zoom-open.has-custom-cursor .zoom,
html.zoom-open.has-custom-cursor .zoom * { cursor: default !important; }

html.zoom-open.has-custom-cursor .zoom__close,
html.zoom-open.has-custom-cursor .zoom__nav { cursor: pointer !important; }

html.zoom-open.has-custom-cursor .zoom__img { cursor: zoom-out !important; }

/* Вводный абзац карточки написан для тёмной темы: при наведении на
   правую колонку он уходил в белый (rgba(255,255,255,.9)) и на светлом
   фоне исчезал. Базовый цвет ниже по файлу уже переопределён темой,
   а состояние наведения — нет. */
.product-info:hover .product-info-intro {
  color: var(--text-secondary);
  border-left-color: rgba(127, 92, 30, 0.38);
}

/* Под сеткой в каталоге лежит пагинация, и для неё у .pg оставлено
   112 px снизу. В витрине изделий серии пагинации нет — вместе с
   полем секции набегала пустая полоса почти в 200 px. */
.related-section .pg { margin-bottom: 0; }

/* ==== Корзина ====
   Заголовок был набран Golos Text вразрядку капителью — единственный
   такой на сайте. Ставим тот же Prata, что у заголовков разделов. */
.cart-title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
/* Название товара в строке — тоже не капитель: длинное имя капителью
   занимало три строки и спорило с заголовком страницы. */
.cart-table .cart-title a {
  font-family: var(--font-head);
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.cart-table .cart-title a:hover { color: var(--gold-decor); }

/* Снимок в строке — на той же коричневой стене, что в витрине:
   вырезы у фотографий неровные, на светлом это видно. */
.cart-img img {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='15'%3E%3Cpath d='M0 7.5 q15 -4.4 30 0 t30 0 t30 0 t30 0' fill='none' stroke='%23ffffff' stroke-width='0.9' stroke-opacity='0.055'/%3E%3C/svg%3E") repeat,
    #241E17;
  border: 1px solid rgba(127, 92, 30, 0.25);
  object-fit: contain;
  padding: 4px;
}

/* Между хлебными крошками и корзиной не было воздуха вовсе. */
.cart-page { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem); }

/* Галочка согласия была системной синей — единственное синее пятно
   на всём сайте, да ещё в самом ответственном месте. */
.personal_link .form-check-input,
.checkout-page input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-right: 0.5rem;
  border: 1px solid rgba(127, 92, 30, 0.45);
  border-radius: 2px;
  background: var(--bg);
  cursor: pointer;
  vertical-align: -3px;
  transition: background 0.2s, border-color 0.2s;
}
.personal_link .form-check-input:checked,
.checkout-page input[type="checkbox"]:checked {
  border-color: var(--gold-decor);
  background: var(--gold-decor)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFF8EA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E")
    center / 13px 13px no-repeat;
}
.personal_link .form-check-input:focus-visible,
.checkout-page input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold-decor);
  outline-offset: 2px;
}
.personal_link .form-check-label { color: var(--text-secondary); }
.personal_link .form-check-label a { color: var(--gold-decor); }

/* ==== Оформление заказа ====
   Страница формы, а не витрина: светлый фон, тёмный текст. */
.order-section {
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 5rem);
  color: var(--text);
}
.checkout-title {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.checkout-subtitle { color: var(--text-secondary); max-width: 58ch; }

/* ==== Состав заказа рядом с формой ====
   Форма и сводка — две колонки на десктопе, друг под другом на
   телефоне. Сводка липкая: форма длинная, а итог нужен перед глазами. */
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.order-summary {
  position: sticky;
  top: calc(var(--header-total-h, 130px) + 1.5rem);
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
  border: 1px solid var(--border);
  background: var(--card);
}
.order-summary__title {
  margin: 0 0 1.1rem;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--text);
}
.order-summary__list { margin: 0; padding: 0; list-style: none; }
.order-summary__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem 0;
  border-top: 1px solid var(--border);
}
.order-summary__pic {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(127, 92, 30, 0.22);
  background: #241E17;
}
.order-summary__pic img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.order-summary__name {
  display: block;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--text-secondary);
}
.order-summary__count { font-size: 0.78rem; color: var(--text-faint); }
.order-summary__sum {
  font-family: var(--font-head);
  font-size: 0.98rem;
  color: var(--text);
  white-space: nowrap;
}
.order-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.order-summary__total-val {
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-decor);
}
.order-summary__note {
  margin: 0.8rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-faint);
}
@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: minmax(0, 1fr); }
  /* На телефоне сводка идёт ПЕРЕД формой: сначала человек видит,
     что покупает, и только потом заполняет поля. */
  .order-summary { position: static; order: -1; }
  .checkout-form { order: 0; }
}

/* Страница оформления сама отступала на высоту шапки (наследие вёрстки
   без хлебных крошек) — вместе с полем секции набегало 250 px пустоты
   до заголовка. */
.checkout-page { padding: 0 0 clamp(1rem, 2vw, 2rem); }
.checkout-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* ==== Пустое избранное ====
   Было «ничего нет здесь» строчными посреди тёмной страницы.
   Пустой экран — приглашение к действию, а не сообщение об ошибке. */
/* Блок лежит на странице всегда, прячется при наличии карточек:
   ветка &else= у [[if]] молчала, и на пустом избранном не было
   вообще ничего. */
#pg-grid:has(.pg__card) ~ #fav-empty { display: none; }

.fav-empty {
  max-width: 46ch;
  padding: clamp(1.5rem, 4vw, 3rem) 0;
}
.fav-empty__title {
  margin: 0 0 0.6rem;
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--text);
}
.fav-empty__text {
  margin: 0 0 1.4rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.fav-empty__link {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  transition: background 0.25s, color 0.25s;
}
.fav-empty__link:hover { background: var(--gold); color: #17120C; }

/* ==== Список коллекций ====
   Первый экран отдаёт высоту волны вниз: витрина заходит под кривую,
   и без этого последние строки описания уезжали под тёмный край. */
.inner-hero { padding-bottom: 110px; }

/* Счётчик моделей на плитке — вместо пустой строки от цены,
   которой у коллекции нет. */
.catalog-card-count {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ==== Список статей блога ====
   Был голый список ссылок в обёртке юридических страниц. Статья —
   это обещание чтения: заголовок и подводка, по которой видно,
   стоит ли открывать. */
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 2.2vw, 1.8rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.blog-card {
  border: 1px solid var(--border);
  background: var(--card);
  transition: border-color 0.3s, transform 0.3s;
}
.blog-card:hover { border-color: rgba(127, 92, 30, 0.45); transform: translateY(-2px); }
.blog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  color: inherit;
  text-decoration: none;
}
.blog-card__title {
  margin: 0 0 0.6rem;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.25;
  color: var(--text);
}
.blog-card__lead {
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
/* «Читать» прижато к низу: карточки в ряду разной длины, а строка
   действия должна стоять на одной линии. */
.blog-card__more {
  margin-top: auto;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-decor);
}
.blog-card:hover .blog-card__more { color: var(--gold); }

/* Заголовок статьи набирался тем же кеглем, что слово «Контакты»:
   длинное название занимало пять строк во весь экран. Статью читают,
   а не разглядывают вывеску. */
.section-title--article {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15;
  max-width: 22ch;
}

/* Выход из статьи обратно в блог: раньше её конец был тупиком. */
.article-back {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}
.article-back a {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-decor);
}
.article-back a:hover { color: var(--gold); }

/* Заголовок первого экрана на страницах «о производстве» начинался
   с 4rem (64 px) даже на телефоне: слово «ИНДИВИДУАЛЬНОЕ» шире экрана
   и распирало блок до 458 px при экране 390 — правый край уходил под
   обрезку родителя. Нижняя граница опущена, длинные слова переносятся. */
.about-hero-title {
  font-size: clamp(2.1rem, 8.5vw, 8rem);
  overflow-wrap: anywhere;
}

/* ==== Первый экран страниц о производстве ====
   Блок тёмный (фотография мастерской), а текст брал цвет светлой
   темы — тёмно-коричневый по тёмной фотографии. Объявляем здесь
   собственные светлые токены, как в витрине, и усиливаем вуаль:
   снимки живые, местами почти белые. */
.about-hero {
  --text:           #F2EFEA;
  --text-primary:   rgba(242, 239, 234, 0.96);
  --text-secondary: rgba(242, 239, 234, 0.88);
  --text-muted:     rgba(242, 239, 234, 0.82);
  --text-faint:     rgba(242, 239, 234, 0.66);
  --gold:           #D9B877;
  color: var(--text);
  /* Шапка на этих страницах лежит поверх снимка: без отступа
     заголовок начинался на 14 px ниже её края. */
  padding-top: calc(var(--header-total-h, 154px) + clamp(1.5rem, 4vw, 3rem));
}
.about-hero-title { color: var(--text); }
.about-hero-lead  { color: var(--text-secondary); }
.about-hero .section-tag { color: var(--gold); }

/* Вуаль поверх фотографии: без неё светлые участки снимка съедают
   буквы целиком. Кладём отдельным слоем под текстом. */
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(20, 16, 12, 0.72) 0%,
      rgba(20, 16, 12, 0.55) 45%,
      rgba(20, 16, 12, 0.78) 100%);
  pointer-events: none;
}

/* ==== Статус «открыто/закрыто» в подвале ====
   Раньше текст был вписан насмерть — «Сейчас открыто» стояло и в
   три часа ночи. Теперь его считает businessStatus, а закрытому
   состоянию нужен свой вид: пульсирующая точка «открыто» ночью
   выглядела бы нелепо, если бы просто сменился текст под ней. */
.footer-status.is-closed { color: var(--text-faint) !important; }
.footer-status.is-closed .status-dot { background: var(--text-faint); animation: none; }

/* ── Подбор: положение панели и «Все изделия» — 2026-09-30 ──────────
   Шапка при прокрутке вниз уезжает (.header--hidden), а панель держала
   отступ под неё — висела с пустотой ~150 px сверху. Теперь поднимается
   следом. На невысоких экранах панель выше окна — даём ей свою прокрутку,
   иначе вес и серия недосягаемы до конца страницы. */
@media (min-width: 1101px) {
  .catalog-aside {
    top: calc(var(--header-total-h) + 0.8rem);
    max-height: calc(100vh - var(--header-total-h) - 1.6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 6px;          /* чтобы свечение пункта не обрезалось краем прокрутки */
    margin: -6px;
    transition: top 0.35s ease, max-height 0.35s ease;
  }
  body:has(.header--hidden) .catalog-aside {
    top: 1rem;
    max-height: calc(100vh - 2rem);
  }
}

/* «Все изделия» мягко пульсирует, пока не нажата. Ссылка ненажатого
   пункта ведёт на ?all=1 — по этому и узнаём, без правки разметки. */
.cfilter__chip[href*="all=1"]:not(.cfilter__chip--on) {
  animation: cfilterAllPulse 2.8s ease-in-out infinite;
}
.cfilter__chip[href*="all=1"]:not(.cfilter__chip--on):hover { animation: none; }
@keyframes cfilterAllPulse {
  0%, 100% { border-color: var(--border);     box-shadow: 0 0 0 0 rgba(201, 169, 97, 0); }
  50%      { border-color: var(--gold-decor); box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.16); color: var(--text); }
}
@media (prefers-reduced-motion: reduce) {
  .cfilter__chip[href*="all=1"] { animation: none; }
}

/* ── Разделы каталога: узкая шапка вместо макрофото — 2026-09-30 ────
   Человек нажал «Люстры» — первым экраном должны быть люстры.
   Подводка раздела переехала вниз, первой строкой SEO-блока. */
.cat-head {
  background: var(--bg);
  padding: 0.4rem 0 1.4rem;
}
.cat-head__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.15;
  color: var(--text-primary);
}
.cat-head__meta {
  margin: 0.6rem 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
/* Витрина заходит под волну на всю её высоту (110 px, на телефоне 46 px) —
   шапке нужен запас снизу, иначе волна накрывает заголовок. */
.cat-head { padding-bottom: calc(110px + 0.6rem); }
@media (max-width: 760px) {
  .cat-head { padding: 0.2rem 0 calc(46px + 0.8rem); }
}

/* ── Подбор: своя полоса прокрутки — волна — 2026-09-30 ─────────────
   Системный белый ползунок выбивался из тёмной витрины. Прячем его,
   рисуем тонкую дорожку и золотую волну-ползунок (скрипт в catalogFilterPanel
   ставит её по прокрутке). Колесо и тачпад работают как прежде. */
@media (min-width: 1101px) {
  .catalog-aside { scrollbar-width: none; }
  .catalog-aside::-webkit-scrollbar { display: none; }
}
.cf-rail {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  pointer-events: none;
  z-index: 1;
}
.cf-rail[hidden] { display: none; }
.cf-rail::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 1px;
  background: rgba(201, 158, 76, 0.14);
}
.cf-rail__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='24'%3E%3Cpath d='M5 0 Q9.5 6 5 12 T5 24' fill='none' stroke='%23C99E4C' stroke-width='1.3'/%3E%3C/svg%3E") repeat-y 0 0 / 10px 24px;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  animation: cfRailFlow 1.8s linear infinite;
  transition: transform 0.12s linear;
}
@keyframes cfRailFlow { to { background-position: 0 24px; } }
@media (prefers-reduced-motion: reduce) {
  .cf-rail__thumb { animation: none; transition: none; }
}
@media (max-width: 1100px) {
  .cf-rail { display: none; }
}