/*
Theme Name:   WoodMart Child — PC Components Store
Theme URI:    https://xtemos.com/products/woodmart/
Description:  Дочерняя тема WoodMart. Палитра снята с демо Hardware. Все правки шаблонов и стилей живут здесь, чтобы переживать обновление родительской темы.
Author:       ecomm
Template:     woodmart
Version:      1.67.0
Text Domain:  woodmart-child
*/

/* Стили родительской темы подключаются из functions.php, а не через @import —
   @import блокирует параллельную загрузку и заметно тормозит первый рендер. */

/* ============================================================
   ПАЛИТРА
   Снята с демо WoodMart Hardware (woodmart.xtemos.com/demo-hardware),
   значения взяты из CSS-переменных темы, а не подобраны на глаз.
   Демо-контент НЕ импортировался: он создаёт свои товары, категории
   и атрибуты и затёр бы наш каталог.
   ============================================================ */

:root {
  /* Акценты */
  --wd-primary-color: #595ee0;       /* фиолетовый: кнопки, ссылки, активные состояния */
  --wd-alternative-color: #fbbc34;   /* янтарный: скидки, рейтинги, бейджи */

  /* Светлая основа.
     Витрина была тёмной до 2026-09-26; решение отменено человеком,
     см. docs/superpowers/specs/2026-09-26-light-theme-design.md.
     Товар лежит на СЕРОЙ подложке, а не на белой: снимки вырезаны
     с прозрачным фоном, и белый корпус на белой карточке теряет
     контур — у одной Lian Li таких 64. */
  --ecomm-bg-deep: #efeef4;          /* полосы: верхняя, подвал */
  --ecomm-bg: #ffffff;               /* страница */
  --ecomm-bg-raised: #f5f4f8;        /* карточки, панели, слоты конфигуратора */
  --ecomm-border: #e9e8ef;

  /* Текст на тёмном: название раздела на баннере лежит на
     фотоподложке под тёмной вуалью. Значение совпадает с --ecomm-bg,
     но смысл другой: то — фон страницы, это — цвет букв. */
  --ecomm-text-on-dark: #ffffff;

  /* Текст на светлом */
  --wd-title-color: #16151a;
  --wd-text-color: #4a4753;
  --wd-link-color: #16151a;
  --wd-link-color-hover: #595ee0;
  --ecomm-text-muted: #6b6875;       /* характеристики, ID, счётчики */

  /* Затемнение под модалкой: почти чёрное выключало бы страницу целиком */
  --ecomm-scrim: rgba(20, 18, 40, 0.45);

  /* Статусы совместимости.
     Перекрашены, а не перенесены: прежний #ffd7d7 на белом исчезает.
     Светлый статус на светлом — это отсутствие статуса. */
  --ecomm-status-bad: #b3261e;
  --ecomm-status-warn: #8a5a00;
  --ecomm-status-ok: #1e7a48;

  /* Типографика демо */
  --wd-title-font: "Montserrat", Arial, Helvetica, sans-serif;
  --wd-title-font-weight: 600;
  --wd-text-font: "Lato", Arial, Helvetica, sans-serif;
  --wd-text-font-weight: 400;
  --wd-text-font-size: 14px;

  /* Собственные величины оформления */
  --ecomm-accent: #595ee0;
  --ecomm-accent-soft: rgba(89, 94, 224, 0.16);
  /* Акцент как ЦВЕТ ТЕКСТА на серых подложках: сам акцент на #efeef4
     даёт 4.44 при пороге 4.5 — замерено на кнопке «Show N more» в
     колонке фильтра. Для заливок и рамок остаётся --ecomm-accent. */
  --ecomm-accent-ink: #4a4ec9;
  /* Плашки рядов главной: те же три цвета палитры, разбавленные до
     бледности. Новых красок в магазине не появляется. */
  --ecomm-tint-accent: #eef0fb;      /* от --ecomm-accent */
  --ecomm-tint-ok: #eaf5ee;          /* от --ecomm-status-ok */
  --ecomm-tint-warn: #f7f0e4;        /* от --ecomm-status-warn */
  --ecomm-tint-ink-accent: rgba(89, 94, 224, 0.20);
  --ecomm-tint-ink-ok: rgba(30, 122, 72, 0.18);
  --ecomm-tint-ink-warn: rgba(138, 90, 0, 0.16);
  --ecomm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ecomm-radius: 14px;
}

/* ============================================================
   ШАПКА И ПОДВАЛ НА СВЕТЛОМ

   Тема WoodMart рисует их сама; мы задаём только полосы и границу.
   Граница под шапкой обязательна: без тёмной полосы светлая шапка
   при прокрутке сливается с содержимым, и меню «плывёт» над товарами.
   ============================================================ */

.whb-top-bar,
.wd-header-nav .whb-top-bar {
  background-color: var(--ecomm-bg-deep);
  color: var(--ecomm-text-muted);
}

.whb-header,
.whb-main-header {
  background-color: var(--ecomm-bg);
  border-bottom: 1px solid var(--ecomm-border);
}

.wd-footer {
  background-color: var(--ecomm-bg-deep);
  border-top: 1px solid var(--ecomm-border);
}

/* Текст подвала — НАШЕЙ переменной и с классом схемы в селекторе.
   Тема внутри .color-scheme-dark переопределяет всю свою серую шкалу
   литералами, --wd-text-color там #767676: на полосе подвала это
   контраст 3.94 при пороге 4.5, видно на строке копирайта. Правило
   .color-scheme-dark { color: var(--wd-text-color) } живёт в
   parts/base.css, который грузится ПОСЛЕ дочерней темы, поэтому одной
   .wd-footer не хватает — нужен тот же класс, что и у темы.

   Класс на подвале появляется из опции footer-style = 'dark', её
   ставит scripts/51-theme-light.php. */
.wd-footer.color-scheme-dark {
  color: var(--ecomm-text-muted);
}

/* ============================================================
   ЧИТАЕМОСТЬ ХАРАКТЕРИСТИК

   Главная причина, по которой магазин комплектующих отличается от
   магазина футболок: таблица характеристик. У материнской платы из
   Icecat их под сотню, и штатная плоская таблица WooCommerce на такой
   глубине нечитаема — сплошная простыня.

   Здесь не «красиво», а функционально: зебра для попадания глазом
   в строку, моноширинный шрифт для значений, чтобы 342 мм и 304 мм
   сравнивались по ширине.
   ============================================================ */

.woocommerce-product-attributes.shop_attributes {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-product-attributes.shop_attributes tr:nth-child(odd) {
  background-color: var(--ecomm-bg-raised);
}

.woocommerce-product-attributes.shop_attributes th {
  width: 38%;
  padding: 10px 14px;
  font-weight: 500;
  color: var(--ecomm-text-muted);
  text-align: left;
  vertical-align: top;
}

.woocommerce-product-attributes.shop_attributes td {
  padding: 10px 14px;
  color: var(--wd-title-color);
  /* Моноширинный: числовые характеристики выравниваются по разрядам,
     и «342 mm» против «304 mm» читается сравнением, а не чтением. */
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
}

.woocommerce-product-attributes.shop_attributes td p {
  margin: 0;
}

/* ============================================================
   ТОВАР БЕЗ ПОДЛОЖКИ

   Снимки поставщика — студийные, на белом. Раньше здесь лежала
   светлая подложка со скруглением: белый фон не прятали, а делали
   намеренным, «как на предметном столе». Довод против выреза был
   такой: «вырезание фона алгоритмом даёт рваные края на кулерах
   и радиаторах».

   ПРОВЕРЕНО И НЕ ПОДТВЕРДИЛОСЬ. Связная заливка от краёв кадра
   (scripts/elko-cutout.php) снимает фон у 716 товаров из 732, и
   у кулера целы и рёбра радиатора, и пружины, и лопасти. Рваные
   края даёт глобальная замена белого, а не заливка от краёв.

   Поэтому подложки больше нет: товар лежит прямо на странице.
   Шестнадцать необработанных снимков — те, где товар занимает
   весь кадр и фона нет вовсе; подложка им и не нужна.
   ============================================================ */

.wd-product .product-image-link,
.wd-product .wd-product-grid-slider {
  background: transparent;
}

.wd-product .product-image-link img {
  mix-blend-mode: normal;
  transition: transform 0.5s var(--ecomm-ease);
}

.wd-product:hover .product-image-link img {
  transform: scale(1.05);
}

/* Товары без изображения — нормальное состояние на этапе наполнения,
   а не поломка. Заглушка должна это показывать спокойно: на подложку
   её не кладём, иначе пустота получит ту же рамку, что и товар. */
.wd-product .product-image-link:has(img[src*="woocommerce-placeholder"]),
.wc-block-grid__product-image:has(img[src*="woocommerce-placeholder"]) {
  background: var(--ecomm-bg-raised);
}

.wd-product .product-image-link img[src*="woocommerce-placeholder"],
.wc-block-grid__product-image img[src*="woocommerce-placeholder"] {
  opacity: 0.25;
  filter: grayscale(1);
}

/* Количество в мини-корзине: тема красит его своим #bbb — на белой
   подложке панели это контраст 1.92. Видно на телефоне, где панель
   раскрыта в потоке страницы. */
.widget_shopping_cart .cart-info span.quantity,
.woocommerce-mini-cart-item .cart-info span.quantity {
  color: var(--ecomm-text-muted);
}

/* Счётчик товаров в навигации по категориям: тот же #a5a5a5 темы, но
   на полосе заголовка — контраст 2.14. Разметка темы, цвет наш. */
.wd-page-title .nav-link-count,
.wd-page-title .category-nav-link .nav-link-count {
  color: var(--ecomm-text-muted);
}

/* Категория в карточке товара: тема красит её своим #a5a5a5 — на белой
   странице это контраст 2.46 при пороге 4.5. Строка мелкая и
   служебная, поэтому берём приглушённый цвет палитры, а не основной. */
.wd-product .wd-product-cats,
.wd-product .wd-product-cats a {
  color: var(--ecomm-text-muted);
}

/* ============================================================
   ГЛАВНАЯ

   Тема рисует блок заголовка страницы на всех страницах. На главной
   он дублирует герой — выводит «Silicache» прямо над тем же именем
   в шапке. Прячем только на главной: на остальных страницах он нужен
   для навигации.
   ============================================================ */

body.home .wd-page-title {
  display: none;
}

/* Шаблона «во всю ширину» у темы нет: контент всегда лежит в .container
   с ограниченной шириной. Секции главной выходят за него отрицательными
   полями, а клип по горизонтали гасит полосу прокрутки, которая иначе
   появляется от 100vw (100vw считает ширину ВМЕСТЕ со скроллбаром).

   overflow-x: clip, а не hidden: hidden создаёт контекст прокрутки
   и ломает position: sticky у шапки. clip — не создаёт. */
body.home .wd-page-content {
  overflow-x: clip;
}

body.home .wd-content-layout {
  padding-top: 0;
}

.ecomm-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ОДНА ширина на весь сайт.

   До этого краёв было четыре: шапка начиналась на 38, ряды главной
   на 90, конфигуратор на 50, каталог и подвал на 154 — замерено при окне
   1500. Человек попросил выровнять всё по рядам главной, они и задают
   правило: 1400 по центру с полями, то есть содержимое от 90 до 1410.

   Главная не в списке: её секции растянуты на всё окно
   (.ecomm-bleed), а поля им даёт дорожка .ecomm-inner внутри них — ширина
   самого main там ничего не решает. */
:root {
  --ecomm-page-max: 1400px;
  --ecomm-page-pad: clamp(16px, 4vw, 40px);
}

.wd-page-title > .container,
body:not(.home) main.wd-content-layout {
  max-width: var(--ecomm-page-max);
  margin-inline: auto;
  padding-inline: var(--ecomm-page-pad);
}

/* Ширина шапки. У растянутой шапки тема даёт контейнеру
   width: clamp(var(--wd-container-w), 95%, 100%) — при окне 1500 это
   95%, то есть 1425, и подменой одной переменной поля не сойдутся.
   Пишем ширину прямо, селектором на класс длиннее теминого. */
@media (min-width: 1025px) {
  .whb-header.whb-full-width .whb-row > .container,
  .whb-header.whb-full-width + .whb-clone .whb-row > .container {
    width: var(--ecomm-page-max);
    max-width: 100%;
  }
}

.whb-header .whb-row > .container {
  padding-inline: var(--ecomm-page-pad);
}

/* Подвал оставался в темином контейнере 1222 — на фоне рядов
   главной он был уже их на 64 точки с каждой стороны. */
.wd-footer > .container,
.wd-footer .wd-copyrights > .container {
  max-width: var(--ecomm-page-max);
  padding-inline: var(--ecomm-page-pad);
}

/* Внутренние контейнеры (вкладки товара, блок «related») стоят
   внутри уже выровненного main и второй раз сужали страницу
   до теминых 1222. Занимают родителя целиком. */
main.wd-content-layout .container {
  max-width: 100%;
  padding-inline: 0;
}

/* Внутренняя дорожка секций главной — та самая ширина, по
   которой выровнен остальной сайт. */
.ecomm-inner {
  max-width: var(--ecomm-page-max);
  margin: 0 auto;
  padding: 0 var(--ecomm-page-pad);
}

/* Крайние колонки шапки не вылезают за поля контейнера.

   Тема раздвигает колонки отрицательными полями (−10 у крайних) и
   добавляет 10 внутри логотипа — приём для внутренних промежутков,
   но по краям он утаскивает содержимое за границу: логотип уходил
   на 78 при поле 90, а значки — на 1433 при 1410. */
.whb-row > .container > .whb-flex-row {
  margin-inline: 0;
}

.whb-row .whb-column.whb-col-left {
  margin-left: 0;
}

.whb-row .whb-column.whb-col-right {
  margin-right: 0;
}

.whb-row .site-logo {
  padding-inline: 0;
}

/* Колонка со строкой каталога своих полей не добавляет: иначе кнопка
   встанет правее логотипа, который лежит строкой выше. */
.whb-column .sc-bar-host {
  padding-inline: 0;
}

/* ------------------------------------------------------------
   Заголовки секций

   Приём взят с демо: тонкая серая строка в обычном регистре над
   жирным заголовком в верхнем. Она задаёт интонацию, а заголовок
   называет содержимое.
   ------------------------------------------------------------ */

.ecomm-eyebrow {
  margin: 0 0 6px;
  font-family: var(--wd-title-font);
  font-weight: 300;
  font-size: clamp(15px, 1.6vw, 19px);
  letter-spacing: 0.04em;
  color: var(--ecomm-text-muted);
}

.ecomm-eyebrow--accent {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ecomm-accent);
}

.ecomm-section__title {
  margin: 0;
  font-family: var(--wd-title-font);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 38px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--wd-title-color);
}

.ecomm-section__lead {
  max-width: 62ch;
  margin: 14px auto 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ecomm-text-muted);
}

.ecomm-section__head {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 46px);
}

.ecomm-section {
  padding: clamp(56px, 8vw, 104px) 0;
}

/* ------------------------------------------------------------
   Герой

   Атмосфера собрана градиентами, а не фотографией. Так сделано не
   от бедности: фотографий демо в пакете темы нет вообще — там 640
   растровых файлов, и все до одного иконки интерфейса и превью
   макетов. Съёмка демо лежит на сервере xtemos и в покупку не входит.

   Свечение даёт глубину, сетка — технический характер, виньетка
   собирает взгляд к центру.
   ------------------------------------------------------------ */

.ecomm-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 76vh, 760px);
  padding: clamp(60px, 9vw, 110px) 0;
  overflow: hidden;
  background:
    radial-gradient(58% 62% at 50% -6%, rgba(89, 94, 224, 0.30), transparent 68%),
    radial-gradient(42% 54% at 88% 92%, rgba(89, 94, 224, 0.16), transparent 70%),
    radial-gradient(38% 50% at 8% 88%, rgba(120, 80, 220, 0.12), transparent 72%),
    linear-gradient(180deg, var(--ecomm-bg-deep) 0%, #f7f6fa 58%, var(--ecomm-bg) 100%);
}

/* Технический растр. Маска гасит его к краям, иначе сетка спорит
   с текстом и выглядит как артефакт сжатия. */
.ecomm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(20, 18, 40, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 18, 40, 0.05) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(70% 62% at 50% 42%, #000 22%, transparent 78%);
  mask-image: radial-gradient(70% 62% at 50% 42%, #000 22%, transparent 78%);
  pointer-events: none;
}

/* Виньетки больше нет. Она собирала взгляд к центру, пока заголовок
   стоял по центру; с двумя колонками центр оказался в промежутке
   между ними, а затемнение по краям мутило светлый фон вокруг
   снимка. */

/* Две колонки: слово слева, снимок справа.

   Текст нигде не ложится на фотографию — поэтому контраст по WCAG
   не зависит от того, какой снимок выбран. Вариант «фото во всю
   ширину с текстом поверх» отвергнут именно из-за этого, и ещё
   потому, что тёмный первый экран выпадает из светлой витрины. */
.ecomm-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  width: 100%;
  max-width: var(--ecomm-page-max);
  margin: 0 auto;
  padding: 0 var(--ecomm-page-pad);
  text-align: left;
}

/* Снимок первого экрана. Рамка своих полей не добавляет: снимок
   встаёт вровень с правым краем рядов главной. */
.ecomm-hero__shot {
  margin: 0;
}

.ecomm-hero__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--ecomm-border);
}

/* Подпись автора. Лицензия Unsplash её не требует, но автор просит
   в описании снимка; происхождение записано в data/hero-photo.json.
   Печатаем ПОД рамкой, а не поверх снимка: на фотографии контраст
   зависел бы от того, что окажется в этом углу кадра. */
.ecomm-hero__credit {
  margin: 8px 2px 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: right;
  color: var(--ecomm-text-muted);
}

.ecomm-hero__title {
  margin: 0 0 20px;
  font-family: var(--wd-title-font);
  line-height: 1.04;
}

/* Две строки одного кегля, но разного веса: тонкая называет предмет,
   жирная — утверждение. Тот же приём, что в демо («Build Your» /
   «NEW PC»). */
.ecomm-hero__thin,
.ecomm-hero__bold {
  display: block;
  font-size: clamp(30px, 5.6vw, 68px);
}

.ecomm-hero__thin {
  font-weight: 200;
  letter-spacing: 0.015em;
  color: var(--wd-title-color);
}

.ecomm-hero__bold {
  font-weight: 800;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--wd-title-color);
}

.ecomm-hero__lead {
  max-width: 52ch;
  margin: 0 0 34px;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--ecomm-text-muted);
}

.ecomm-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-start;
}

/* Показатели под кнопкой. Числа берутся из базы при сборке страницы,
   а не проставляются руками: цифра, которая разошлась с каталогом,
   на витрине «за проверенные характеристики» стоит дороже, чем
   отсутствие этой строки. */
.ecomm-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 4vw, 52px);
  justify-content: flex-start;
  margin: clamp(30px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.ecomm-hero__facts li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ecomm-hero__facts b {
  font-family: var(--wd-title-font);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1;
  color: var(--wd-title-color);
}

.ecomm-hero__facts span {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ecomm-text-muted);
}

/* ------------------------------------------------------------
   Кнопки
   ------------------------------------------------------------ */

.ecomm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--wd-title-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.3s var(--ecomm-ease),
    box-shadow 0.3s var(--ecomm-ease),
    background-color 0.3s var(--ecomm-ease),
    border-color 0.3s var(--ecomm-ease);
}

.ecomm-btn--primary {
  background: var(--ecomm-accent);
  color: #fff;
  box-shadow: 0 8px 26px rgba(89, 94, 224, 0.32);
}

.ecomm-btn--primary:hover,
.ecomm-btn--primary:focus-visible {
  color: var(--wd-title-color);
  background: #6a6fe8;
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(89, 94, 224, 0.46);
}

.ecomm-btn--ghost {
  color: var(--wd-title-color);
  background: var(--ecomm-bg-raised);
  border-color: var(--ecomm-border);
}

.ecomm-btn--ghost:hover,
.ecomm-btn--ghost:focus-visible {
  color: var(--wd-title-color);
  border-color: var(--ecomm-border);
  background: var(--ecomm-bg-raised);
  transform: translateY(-2px);
}

/* Стрелка уезжает вправо на наведении — дешёвый по стоимости и
   заметный по эффекту отклик. */
.ecomm-btn__arrow {
  transition: transform 0.3s var(--ecomm-ease);
}

.ecomm-btn:hover .ecomm-btn__arrow {
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   Ряды главной: бренды и категории

   Раскладка снята с чужой витрины один в один и пересчитана в долях,
   чтобы не зависеть от ширины ЕГО окна: карточка 1.9:1, поле 6.3%
   ширины, зазор 8% ширины карточки, мини-плитка 64 px, стрелка 44 px.
   Цвета, шрифты и скругления — наши.
   ------------------------------------------------------------ */

.ecomm-rows-section {
  background: linear-gradient(180deg, var(--ecomm-bg-deep) 0%, var(--ecomm-bg) 40%, var(--ecomm-bg) 100%);
}

.ecomm-section__head--row {
  margin-bottom: 18px;
}

.ecomm-rows-section .ecomm-reveal + .ecomm-section__head--row {
  margin-top: 54px;
}

.ecomm-row {
  position: relative;
}

/* Три карточки в ряд, зазор — доля карточки, как на образце. */
.ecomm-row__track {
  --ecomm-row-gap: 2.4%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--ecomm-row-gap) * 2) / 3);
  gap: var(--ecomm-row-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
  overscroll-behavior-x: contain;
}

.ecomm-row__track::-webkit-scrollbar {
  display: none;
}

/* Карточка — ссылка целиком: на образце кликается вся плашка. */
.ecomm-row__card {
  position: relative;
  display: block;
  aspect-ratio: 1.9 / 1;
  padding: 6.3%;
  border-radius: var(--ecomm-radius);
  background-color: var(--ecomm-tint-accent);
  color: var(--ecomm-tint-ink-accent);
  overflow: hidden;
  scroll-snap-align: start;
  text-decoration: none;
  transition: transform 0.4s var(--ecomm-ease), box-shadow 0.4s var(--ecomm-ease);
}

.ecomm-row__card--tint2 {
  background-color: var(--ecomm-tint-ok);
  color: var(--ecomm-tint-ink-ok);
}

.ecomm-row__card--tint3 {
  background-color: var(--ecomm-tint-warn);
  color: var(--ecomm-tint-ink-warn);
}

.ecomm-row__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(20, 18, 40, 0.10);
}

/* Мазок. Рисунок один на все карточки, различает их поворот. */
.ecomm-row__brush {
  position: absolute;
  inset: 0 0 0 38%;
  color: currentColor;
  opacity: 0.55;
  pointer-events: none;
}

.ecomm-row__brush svg {
  width: 100%;
  height: 100%;
  transform: rotate(-8deg) scale(1.15);
}

.ecomm-row__card--tint2 .ecomm-row__brush svg {
  transform: rotate(6deg) scaleX(-1.1) scaleY(1.05);
}

.ecomm-row__card--tint3 .ecomm-row__brush svg {
  transform: rotate(-16deg) scale(1.25);
}

/* Текст поверх мазка и снимка. */
.ecomm-row__eyebrow,
.ecomm-row__title,
.ecomm-row__count,
.ecomm-row__tiles,
.ecomm-row__foot {
  position: relative;
  z-index: 2;
}

.ecomm-row__eyebrow {
  display: block;
  font-size: 15px;
  line-height: 20px;
  color: var(--ecomm-text-muted);
}

.ecomm-row__title {
  display: block;
  margin-top: 6px;
  font-family: var(--wd-title-font);
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  color: var(--wd-title-color);
}

/* Нижний ряд: название и счётчик прижаты к низу, как на образце. */
.ecomm-row__foot {
  position: absolute;
  left: 6.3%;
  right: 6.3%;
  bottom: 6.3%;
}

.ecomm-row__count {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--ecomm-text-muted);
}

/* Мини-плитки: три товара и счётчик остатка. */
.ecomm-row__tiles {
  position: absolute;
  left: 6.3%;
  bottom: 6.3%;
  display: flex;
  gap: 1.4%;
  width: 47%;
}

/* Плитка — доля карточки, а не 64 px: у образца карточка 590, у нас
   419, и абсолютные 64 px заняли бы две трети ширины вместо половины.
   Тексту же доли не годятся — 15 px превратились бы в 10. */
.ecomm-row__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  aspect-ratio: 1;
  padding: 5%;
  border-radius: 9px;
  background: var(--ecomm-bg);
  box-shadow: 0 1px 2px rgba(20, 18, 40, 0.06);
}

.ecomm-row__tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ecomm-row__tile--more {
  font-size: 14px;
  font-weight: 600;
  color: var(--wd-title-color);
}

/* Снимок товара справа. Единственное место витрины, где картинку
   режет край: в каталоге и на карточке товара поле вокруг товара мы,
   наоборот, бережём. */
/* Снимок ЦЕЛИКОМ ВНУТРИ карточки, у правого края.
   Раньше блок был шире и выше карточки (right: -9%, высота 148%), и
   карточка срезала лишнее. По вертикали это съедали поля холста —
   товар занимает 84% квадрата, — а вправо уходило 38 px при поле 20,
   то есть 18 px самого товара: у корпуса Montech срезан бок, у
   радиатора Arctic половина рёбер. Замерено на карточке 419×220.

   Ширина 46% выбрана не на глаз: снимок квадратный, поэтому object-fit
   делает из него квадрат со стороной 193 px, его левый край встаёт на
   227 px, а мини-плитки бренда кончаются на 223. Шире — и товар полез
   бы на плитки. */
.ecomm-row__hero {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 46%;
  height: calc(100% - 24px);
  transform: translateY(-50%);
  pointer-events: none;
}

.ecomm-row__hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s var(--ecomm-ease);
}

.ecomm-row__card:hover .ecomm-row__hero img {
  transform: scale(1.04);
}

/* Карточка готового компьютера: тот же холст 1.9:1, но текста в ней
   больше — название, цена и пять характеристик. Поэтому снимок уже,
   а строки мельче; иначе «Gigabyte GeForce RTX 5050 8GB GDDR6» не
   помещается в колонку и рвётся пополам. */
/* Пропорция у этого ряда своя: 1.9:1 рассчитана на две строки
   текста, а здесь их семь — надпись, название, цена и пять
   характеристик. Замер на нашей ширине: содержимому нужно 255 px
   при карточке 419, то есть 1.64:1. Ставим 1.55:1 с запасом. */
.ecomm-row--desktops .ecomm-row__card {
  aspect-ratio: 1.55 / 1;
}

/* У готовых компьютеров слева не подпись, а пять строк характеристик:
   они кончаются на 224 px (ширина списка 54%), и общие 46% оставляли
   между текстом и машиной 4 px — читалось как столкновение. 43% дают
   15 px. Замерено на карточке 419×270. */
.ecomm-row--desktops .ecomm-row__hero {
  width: 43%;
}

.ecomm-row--desktops .ecomm-row__title {
  margin-top: 2px;
  font-size: 19px;
  line-height: 24px;
}

.ecomm-row__price {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ecomm-accent-ink);
}

.ecomm-row__specs {
  position: relative;
  z-index: 2;
  width: 54%;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  line-height: 17px;
  color: var(--wd-text-color);
}

.ecomm-row__specs li {
  padding-left: 15px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Галочка рисуется рамкой, а не символом: шрифтовая галка у разных
   начертаний то съезжает по базовой линии, то отличается шириной. */
.ecomm-row__specs li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 5px;
  width: 7px;
  height: 4px;
  border-left: 1.5px solid var(--ecomm-accent-ink);
  border-bottom: 1.5px solid var(--ecomm-accent-ink);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------
   Страница готового компьютера
   ------------------------------------------------------------ */

/* Подпись «Posted by … On …» тема рисует всем записям. Готовый ПК —
   не заметка в блоге: ни автора, ни даты публикации у него нет. */
.single-silicache_desktop .wd-post-author,
.single-silicache_desktop .wd-post-date,
.single-silicache_desktop .wd-entry-meta {
  display: none;
}

.sc-desktop {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 36px;
  align-items: start;
}

.sc-desktop__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ecomm-radius);
  background: var(--ecomm-bg-raised);
}

/* Начинка на снимке заводская, не наша. Строка стоит прямо под
   кадром, а не в сноске внизу: увидеть её надо там же, где кадр. */
.sc-desktop__note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--ecomm-text-muted);
}

.sc-desktop__price {
  margin: 0;
  font-family: var(--wd-title-font);
  font-size: 30px;
  font-weight: 600;
  line-height: 36px;
  color: var(--wd-title-color);
}

.sc-desktop__lead {
  margin: 8px 0 20px;
  font-size: 14px;
  line-height: 21px;
  color: var(--wd-text-color);
}

.sc-desktop__parts {
  width: 100%;
  margin: 0 0 22px;
  border-collapse: collapse;
  font-size: 13px;
}

.sc-desktop__parts th,
.sc-desktop__parts td {
  padding: 9px 10px 9px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ecomm-border);
}

.sc-desktop__parts th {
  width: 24%;
  font-weight: 500;
  color: var(--ecomm-text-muted);
}

.sc-desktop__parts a {
  color: var(--wd-title-color);
  text-decoration: none;
  border-bottom: 1px solid var(--ecomm-border);
}

.sc-desktop__parts a:hover {
  color: var(--ecomm-accent-ink);
  border-bottom-color: var(--ecomm-accent-ink);
}

.sc-desktop__cost {
  width: 22%;
  text-align: right;
  white-space: nowrap;
  padding-right: 0;
  color: var(--wd-title-color);
}

.sc-desktop__buy {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sc-desktop__gone {
  padding: 22px;
  border-radius: var(--ecomm-radius);
  background: var(--ecomm-bg-raised);
  color: var(--wd-text-color);
}

@media (max-width: 900px) {
  .sc-desktop { grid-template-columns: 1fr; gap: 22px; }
}

/* Стрелки. В разметке есть всегда, показываются при живом JS:
   кнопка, которая ничего не делает, — обман. */
.ecomm-row .ecomm-row__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid var(--ecomm-border);
  border-radius: 50%;
  background: var(--ecomm-bg);
  box-shadow: 0 4px 14px rgba(20, 18, 40, 0.10);
  color: var(--wd-title-color);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.sc-js .ecomm-row .ecomm-row__arrow {
  display: block;
}

.ecomm-row .ecomm-row__arrow[hidden],
.sc-js .ecomm-row .ecomm-row__arrow[hidden] {
  display: none;
}

.ecomm-row .ecomm-row__arrow--prev { left: -22px; }
.ecomm-row .ecomm-row__arrow--next { right: -22px; }

.ecomm-row .ecomm-row__arrow:hover {
  border-color: var(--ecomm-accent);
  color: var(--ecomm-accent-ink);
}

/* ------------------------------------------------------------
   ТАБЛИЧНЫЙ ВИД ВЫДАЧИ

   Столбец на характеристику, порядок по любому числовому. Так
   устроена выдача PCPartPicker: карточка отвечает «что это»,
   таблица — «чем они отличаются».
   ------------------------------------------------------------ */

/* Горизонтальная прокрутка у таблицы, а не у страницы: столбцов
   бывает шесть, и на телефоне они не помещаются никак. */
.sc-table-wrap {
  overflow-x: auto;
  margin: 0 0 24px;
  border: 1px solid var(--ecomm-border);
  border-radius: var(--ecomm-radius);
  background: var(--ecomm-bg);
}

.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.sc-table th,
.sc-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--ecomm-border);
  white-space: nowrap;
}

.sc-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ecomm-bg-raised);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ecomm-text-muted);
}

.sc-table tbody tr:last-child th,
.sc-table tbody tr:last-child td {
  border-bottom: 0;
}

.sc-table tbody tr:hover th,
.sc-table tbody tr:hover td {
  background: var(--ecomm-bg-raised);
}

/* Название — единственный столбец, которому можно переноситься:
   иначе таблица уезжает вправо на ширину самого длинного имени. */
.sc-table__name {
  min-width: 260px;
  max-width: 360px;
  font-weight: 400;
  white-space: normal;
}

.sc-table__name a {
  color: var(--wd-title-color);
}

.sc-table__img {
  float: left;
  width: 40px;
  height: 40px;
  margin-right: 12px;
  object-fit: contain;
}

.sc-table .sc-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
}

.sc-table .sc-table__sort:hover {
  color: var(--ecomm-accent-ink, var(--wd-title-color));
}

.sc-table__mark {
  font-size: 11px;
}

.sc-table__price {
  font-weight: 600;
  color: var(--wd-title-color);
}

/* Ссылка на страницу производителя рядом с характеристикой.
   Витрина обещает числа от производителя — ссылка делает обещание
   проверяемым. Домен, а не весь адрес: ссылка на ARK длиной в сто
   символов разорвала бы таблицу. */
.sc-spec-source {
  margin-left: 8px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--ecomm-text-muted);
}

.sc-spec-source:hover {
  color: var(--wd-title-color);
}

/* Оговорка о способе измерения рядом с числом.
   В колонке теплового пакета лежат числа от разных производителей,
   и у Arctic это её собственный PI, а не заявленный TDP. Знак
   вопроса, а не сноска: сносок в таблице характеристик было бы по
   одной на четверть строк. */
.sc-spec-note {
  margin-left: 6px;
  padding: 0 5px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ecomm-text-muted);
  border: 1px solid currentColor;
  border-radius: 50%;
  cursor: help;
  text-decoration: none;
}

/* ------------------------------------------------------------
   БЫСТРЫЕ КНОПКИ ЧИСЛОВОГО ФАСЕТА

   Стоят НАД ползунком: ползунком «32 ГБ» никто искать не станет,
   а одно нажатие «from 32» делает это сразу. Ползунок остаётся —
   им задают промежуток, которого нет среди кнопок.
   ------------------------------------------------------------ */

.sc-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}

.sc-steps .sc-steps__btn {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 10px;
  background: var(--ecomm-bg-raised);
  border: 1px solid var(--ecomm-border);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--wd-text-color);
  white-space: nowrap;
}

.sc-steps .sc-steps__btn:hover {
  border-color: rgba(89, 94, 224, 0.45);
  color: var(--wd-title-color);
}

.sc-steps .sc-steps__btn.is-current {
  background: var(--ecomm-accent);
  border-color: var(--ecomm-accent);
  color: var(--ecomm-text-on-dark);
}

/* Число рядом с порогом — сколько останется. Считается по текущему
   отбору без этой же группы, как и счётчики у значений таксономии. */
.sc-steps__count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* ------------------------------------------------------------
   СРАВНЕНИЕ ОТМЕЧЕННЫХ ТОВАРОВ
   ------------------------------------------------------------ */

.sc-table__pick {
  width: 40px;
  text-align: center;
}

.sc-table .sc-table__compare {
  margin: 0 0 24px;
  padding: 11px 22px;
  min-width: 0;
  min-height: 0;
  background: var(--ecomm-accent);
  border: 0;
  border-radius: var(--ecomm-radius);
  color: var(--ecomm-text-on-dark);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.sc-table .sc-table__compare:hover {
  background: #4a4ec9;
}

.sc-compare {
  margin: 0 0 32px;
}

.sc-compare__back {
  display: inline-block;
  margin: 0 0 18px;
  font-size: 14px;
}

.sc-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--ecomm-bg);
  border: 1px solid var(--ecomm-border);
  border-radius: var(--ecomm-radius);
}

.sc-compare__table th,
.sc-compare__table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ecomm-border);
}

.sc-compare__product {
  width: 24%;
  font-weight: 400;
}

.sc-compare__img {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 0 8px;
  object-fit: contain;
}

.sc-compare__price {
  display: block;
  margin-top: 6px;
  font-weight: 700;
  color: var(--wd-title-color);
}

/* Совпавшие строки приглушены: покупатель пришёл смотреть разницу,
   и она не должна тонуть среди одинаковых значений. */
.sc-compare__row.is-same th,
.sc-compare__row.is-same td {
  color: var(--ecomm-text-muted);
}

.sc-compare__row:not(.is-same) td {
  font-weight: 600;
  color: var(--wd-title-color);
}

.sc-compare__empty {
  font-size: 15px;
  color: var(--ecomm-text-muted);
}

/* ------------------------------------------------------------
   ГАЛОЧКА «FITS MY BUILD»

   Стоит над фасетами, потому что сужает выдачу сильнее любого из
   них. Обычное поле формы: без JS работает через «Apply».
   ------------------------------------------------------------ */

.sc-fits {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 11px 14px;
  background: var(--ecomm-tint-accent, rgba(89, 94, 224, 0.08));
  border: 1px solid rgba(89, 94, 224, 0.28);
  border-radius: var(--ecomm-radius);
  cursor: pointer;
}

.sc-fits__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--wd-title-color);
}

/* Число — сколько останется, если включить. Считается по тем же
   ограничениям, что применятся: подпись, расходящаяся с выдачей,
   здесь дороже отсутствия подписи. */
.sc-fits__count {
  flex: 0 0 auto;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ecomm-text-muted);
}

/* ------------------------------------------------------------
   БАННЕР СО СМЕНОЙ СЛАЙДОВ

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

   Механика снята с nzxt.com/?bt=0 (2026-09-30): пять слайдов,
   перекрёстное затухание. Скорость наша — 6 с вместо их 11 985 мс.
   ------------------------------------------------------------ */

.ecomm-trust {
  background:
    radial-gradient(52% 70% at 50% 0%, rgba(89, 94, 224, 0.13), transparent 70%),
    var(--ecomm-bg-deep);
  border-top: 1px solid var(--ecomm-border);
  border-bottom: 1px solid var(--ecomm-border);
}

/* Панель. Фирменный градиент остаётся запасным фоном: слайд без файла
   подложки садится на него, а не чернеет пустотой. */
.ecomm-showcase {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(120deg, #4a4fc9 0%, var(--ecomm-accent) 52%, #6f6be6 100%);
}

.ecomm-showcase__slides {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Слайды лежат друг на друге в одной ячейке сетки: так высота панели
   задаётся самым высоким, и при смене ничего не подпрыгивает.
   height: 100% — чтобы более низкие тянулись на всю ячейку, иначе
   внизу светилась полоска запасного градиента.

   Вуаль над фотографией не украшение: белое название лежит на кадре,
   и без неё контраст зависел бы от того, что окажется в этом углу.
   Снизу она плотнее — там название. */
.ecomm-showcase__slide {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  align-items: flex-end;
  min-height: clamp(260px, 30vw, 440px);
  height: 100%;
  padding: clamp(28px, 4vw, 56px) clamp(56px, 6vw, 96px);
  background-image:
    linear-gradient(180deg,
      rgba(18, 16, 46, 0.30) 0%,
      rgba(18, 16, 46, 0.48) 46%,
      rgba(18, 16, 46, 0.82) 100%),
    var(--shot-lg, none);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s var(--ecomm-ease);
  pointer-events: none;
}

.ecomm-showcase__slide.is-current {
  opacity: 1;
  pointer-events: auto;
}

.ecomm-showcase__copy {
  position: relative;
  max-width: 100%;
}

/* Название раздела. Тот же шрифт и та же прописная, что у заголовков
   секций главной: баннер — часть страницы, а не вставка. */
.ecomm-showcase__name {
  margin: 0;
  font-family: var(--wd-title-font);
  font-size: clamp(26px, 3.6vw, 50px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.ecomm-showcase .ecomm-showcase__link {
  color: var(--ecomm-text-on-dark);
  text-decoration: none;
}

/* Подчёркивание появляется по наведению и по фокусу с клавиатуры:
   ссылка без подчёркивания и без цвета, отличного от текста, иначе
   неотличима от заголовка. */
.ecomm-showcase .ecomm-showcase__link:hover,
.ecomm-showcase .ecomm-showcase__link:focus-visible {
  color: var(--ecomm-text-on-dark);
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Стрелки. Скруглением и весом повторяют стрелки рядов главной —
   на одной странице два разных круга выглядели бы недоделкой.

   Селектор через родителя ОБЯЗАТЕЛЬНО. У темы есть правило
   на :is(.btn, .button, button, [type="button"]) весом в один класс, а
   её parts/base.css грузится ПОСЛЕ дочерней темы — при равном весе
   выигрывает она. Одноклассовое правило здесь уже проиграло:
   стрелки и точки вышли серыми квадратами 40×42 внизу панели. */
.ecomm-showcase .ecomm-showcase__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  /* Тема держит у кнопок min-height: 42px, и высота 40 без этого
     не применялась: круг выходил овалом 40×42. */
  min-width: 0;
  min-height: 0;
  padding: 0;
  transform: translateY(-50%);
  background: var(--ecomm-bg);
  border: 0;
  border-radius: 50%;
  color: var(--wd-title-color);
  cursor: pointer;
  transition: background-color 0.3s var(--ecomm-ease);
}

.ecomm-showcase .ecomm-showcase__arrow:hover {
  background: var(--ecomm-bg-raised);
}

.ecomm-showcase .ecomm-showcase__arrow svg {
  width: 20px;
  height: 20px;
}

.ecomm-showcase .ecomm-showcase__arrow--prev { left: clamp(10px, 1.4vw, 20px); right: auto; }
.ecomm-showcase .ecomm-showcase__arrow--next { right: clamp(10px, 1.4vw, 20px); left: auto; }

.ecomm-showcase__dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  z-index: 2;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.ecomm-showcase .ecomm-showcase__dot {
  width: 8px;
  height: 8px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.45);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s var(--ecomm-ease), width 0.3s var(--ecomm-ease);
}

.ecomm-showcase .ecomm-showcase__dot.is-current {
  width: 22px;
  background: var(--ecomm-bg);
  border-radius: 999px;
}

/* ------------------------------------------------------------
   Сетка товаров на главной
   ------------------------------------------------------------ */

.ecomm-products {
  background: linear-gradient(180deg, var(--ecomm-bg) 0%, var(--ecomm-bg-deep) 100%);
}

.ecomm-products .products {
  margin-bottom: 0;
}

.ecomm-products__more {
  margin-top: clamp(32px, 4vw, 52px);
  text-align: center;
}

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

   Собирается колонками виджетов в 62-footer.php. Тема отдаёт их
   светлой схемой на тёмном фоне, но без собственных отступов
   и иерархии — заголовок колонки визуально не отличается от ссылок.
   ------------------------------------------------------------ */

.wd-footer .ecomm-foot-title {
  margin: 0 0 16px;
  font-family: var(--wd-title-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wd-title-color);
}

.wd-footer .ecomm-foot-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wd-footer .ecomm-foot-list li {
  margin-bottom: 9px;
}

.wd-footer .ecomm-foot-list a {
  font-size: 14px;
  color: var(--ecomm-text-muted);
  text-decoration: none;
  transition: color 0.25s var(--ecomm-ease), padding-left 0.25s var(--ecomm-ease);
}

.wd-footer .ecomm-foot-list a:hover {
  padding-left: 5px;
  color: var(--wd-title-color);
}

.wd-footer .ecomm-foot-brand img {
  width: 200px;
  height: auto;
  margin-bottom: 16px;
}

.wd-footer .ecomm-foot-brand p,
.wd-footer .ecomm-foot-note {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ecomm-text-muted);
}

.wd-footer .ecomm-foot-note a {
  color: var(--wd-title-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wd-footer .ecomm-foot-note a:hover {
  color: var(--wd-title-color);
}

/* ============================================================
   ФИЛЬТР КАТАЛОГА

   Колонка слева на десктопе, шторка по кнопке на мобильном.
   Разметку рисует mu-plugin silicache-filter; здесь только вид.
   ============================================================ */

/* Колонка фильтров СПРАВА — как на снимке, который принёс человек.
   Размещение задано явно, а не порядком в разметке: в разметке
   колонка идёт первой (её печатает тот же хук, что и выдачу), и
   автоматическая раскладка поставила бы её в первый столбец. */
.sc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.sc-layout__main { grid-column: 1; grid-row: 1; }
.sc-layout__side { grid-column: 2; grid-row: 1; }

.sc-layout.is-loading .sc-layout__main {
  opacity: 0.45;
  transition: opacity 0.2s var(--ecomm-ease);
}

.sc-filter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ecomm-border);
}

.sc-filter__title {
  font-family: var(--wd-title-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wd-title-color);
}

.sc-filter__clear {
  font-size: 12.5px;
  color: var(--ecomm-text-muted);
}

.sc-filter__clear:hover {
  color: var(--ecomm-accent);
}

.sc-facet {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.sc-facet__label {
  display: block;
  padding: 0;
  margin-bottom: 10px;
  font-family: var(--wd-title-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ecomm-text-muted);
}

.sc-cats {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Колонка фильтров ужата по просьбе человека: восемь категорий,
   цена и марки занимали 617 px и вытесняли выдачу вниз. Строка
   категории была 41 px — из них текста 20. Уменьшены отступы и
   кегль, размеры тапа при этом остались выше 30 px. */
.sc-cats li {
  margin: 0;
}

.sc-cats a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  line-height: 20px;
  font-size: 13px;
  color: var(--wd-title-color);
  text-decoration: none;
  transition: color 0.25s var(--ecomm-ease), padding-left 0.25s var(--ecomm-ease);
}

.sc-cats a:hover {
  padding-left: 5px;
  color: var(--wd-title-color);
}

.sc-facet__value {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  color: var(--wd-title-color);
  cursor: pointer;
}

.sc-facet__value:hover {
  color: var(--wd-title-color);
}

.sc-facet__name {
  flex: 1 1 auto;
}

.sc-facet__count {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--ecomm-text-muted);
}

/* Значение без товаров под текущими условиями остаётся на месте —
   так видно, что оно вообще бывает, — но не притворяется доступным. */
.sc-facet__value--empty {
  opacity: 0.38;
  cursor: default;
}

/* Длинная группа: первые пять значений на виду, остальные по кнопке.
   Сворачивается только при живом JS — класс sc-js ставится в <head>
   до первой отрисовки. Без скрипта кнопку нажать нечем, и список
   остаётся полным, а сама кнопка не показывается. */
.sc-js .sc-facet--tax:not(.sc-facet--open) .sc-facet__value--extra {
  display: none;
}

/* Кнопка из двух классов: у темы своё правило для button той же
   специфичности, с высотой 42 и заглавными, и base.css грузится
   после дочерней таблицы. */
.sc-facet .sc-facet__more {
  display: none;
  min-height: 0;
  margin: 4px 0 0;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ecomm-accent-ink);
  background: none;
  border: 0;
  cursor: pointer;
}

.sc-js .sc-facet .sc-facet__more {
  display: inline-block;
}

.sc-facet .sc-facet__more:hover {
  color: var(--wd-title-color);
}

.sc-facet__more-hide,
.sc-facet--open .sc-facet__more-show {
  display: none;
}

.sc-facet--open .sc-facet__more-hide {
  display: inline;
}

.sc-range {
  position: relative;
  height: 26px;
}

.sc-range__slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.sc-range__slider::-webkit-slider-runnable-track {
  height: 4px;
  margin-top: 11px;
  background: var(--ecomm-bg-raised);
  border-radius: 2px;
}

.sc-range__slider::-moz-range-track {
  height: 4px;
  background: var(--ecomm-bg-raised);
  border-radius: 2px;
}

/* Ползунки лежат друг на друге: события принимают только бегунки,
   иначе верхний ползунок перехватывал бы клики по нижнему. */
.sc-range__slider::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--ecomm-accent);
  border: 2px solid var(--ecomm-bg);
  cursor: pointer;
}

.sc-range__slider::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ecomm-accent);
  border: 2px solid var(--ecomm-bg);
  cursor: pointer;
}

.sc-range__inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* С родителем: тема задаёт полям жёсткую height: 42px и обнуляет
   отступы, а её parts/base.css грузится после дочерней темы. Наше
   одиночное .sc-range__field проигрывало по порядку при равном весе.
   Родитель именно __inputs: поля лежат РЯДОМ с .sc-range, а не внутри. */
.sc-range__inputs .sc-range__field {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 9px;
  font-size: 12.5px;
  color: var(--wd-title-color);
  background: var(--ecomm-bg-raised);
  border: 1px solid var(--ecomm-border);
  border-radius: 4px;
}

.sc-range__field:focus {
  border-color: var(--ecomm-accent);
  outline: none;
}

.sc-range__dash {
  color: var(--ecomm-text-muted);
}

.sc-results__count {
  margin-bottom: 16px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ecomm-text-muted);
}

.sc-results__empty {
  margin: 40px 0 10px;
  font-family: var(--wd-title-font);
  font-size: 18px;
  color: var(--wd-title-color);
}

/* Товары, отсеянные за отсутствие данных. Не ошибка и не пустота —
   честный пробел, который магазин показывает вместо догадки. */
.sc-hidden {
  margin-top: 28px;
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--ecomm-text-muted);
  background: var(--ecomm-bg-raised);
  border-left: 2px solid var(--ecomm-accent);
}

.sc-hidden summary {
  cursor: pointer;
}

.sc-hidden__list {
  margin: 10px 0 0;
  padding-left: 18px;
}

/* Кнопка шторки не нужна на десктопе: колонка и так на виду.
 *
 * Селектор нарочно из двух классов. У WoodMart в base.css лежит
 * :is(.btn, .button, button, [type="submit"], [type="button"])
 * с display: inline-flex. Специфичность :is() берётся по самому
 * весомому аргументу — это .btn, то есть (0,1,0), ровно как
 * у одиночного класса. При равной специфичности побеждает тот,
 * кто подключён позже, а base.css темы грузится ПОСЛЕ дочерней
 * таблицы. Одного класса здесь не хватает.
 */
.sc-layout .sc-filter__toggle {
  display: none;
}

/* По той же причине: атрибут hidden прячет элемент правилом UA-стилей,
 * а оно слабее любого авторского display. Без этой строки кнопка Apply,
 * которую скрывает скрипт, оставалась бы видимой на десктопе. */
.sc-layout [hidden] {
  display: none;
}

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

  /* В шторке колонка ужимается обратно не полностью: 28 px на строку
     хороши для мыши, но пальцем в такую строку целятся мимо. Ширина
     у ссылки полная, поэтому хватает вернуть отступы. */
  .sc-cats a,
  .sc-facet__value {
    padding: 7px 0;
  }

  .sc-facet-box__head {
    padding: 12px 0;
  }

  /* Закреплённые строка и столбец нужны только широкому экрану. На
     узком колонка одна, выдача занимала (1,1), и кнопка шторки —
     она идёт в разметке первой — выдавливалась в следующую строку,
     то есть ПОД выдачу. */
  .sc-layout__main,
  .sc-layout__side {
    grid-column: auto;
    grid-row: auto;
  }

  .sc-layout .sc-filter__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 12px 22px;
    font-family: var(--wd-title-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wd-title-color);
    background: var(--ecomm-bg-raised);
    border: 1px solid var(--ecomm-border);
    border-radius: 4px;
  }

  .sc-layout__side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 400;
    width: min(88vw, 340px);
    padding: 22px 20px 80px;
    overflow-y: auto;
    background: var(--ecomm-bg-deep);
    border-right: 1px solid var(--ecomm-border);
    transform: translateX(-100%);
    transition: transform 0.35s var(--ecomm-ease);
  }

  /* Кнопка шторки — в обычном потоке над выдачей, снаружи панели.
     Прежний трюк (fixed и left: 100% под transform панели) ставил её
     прямоугольник под шапку сайта, и нажатие попадало в шапку. */
  .sc-layout > .sc-filter__toggle {
    justify-self: start;
  }

  .sc-layout--open .sc-layout__side {
    transform: none;
  }

  .sc-layout--open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 399;
    background: rgba(0, 0, 0, 0.6);
  }

  /* На шторке кнопка Apply возвращается: она же закрывает панель. */
  .sc-layout--open .sc-filter__apply:not([hidden]) {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ecomm-accent);
    border: 0;
    border-radius: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-layout__side,
  .sc-cats a,
  .sc-layout.is-loading .sc-layout__main {
    transition: none;
  }
}

/* ============================================================
   ПАНЕЛЬ СБОРКИ

   Живёт над фильтрами в колонке каталога и на странице /build/.
   Разметку рисует mu-plugin; здесь только вид.
   ============================================================ */

.sc-build {
  margin-bottom: 24px;
  padding: 16px 18px;
  background: var(--ecomm-bg-raised);
  border: 1px solid var(--ecomm-border);
  border-radius: var(--ecomm-radius);
}

.sc-build__title {
  font-family: var(--wd-title-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wd-title-color);
}

.sc-build__empty,
.sc-build__unpriced,
.sc-build__dropped {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ecomm-text-muted);
}

/* Выбывший товар — янтарным: это не ошибка, но и не рядовая строка. */
.sc-build__dropped {
  color: var(--ecomm-status-warn);
}

.sc-build__slots,
.sc-build__items {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.sc-build__slot {
  padding: 7px 0;
  border-bottom: 1px solid var(--ecomm-border);
}

.sc-build__slot-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ecomm-text-muted);
}

/* Пустой слот — приглашение, а не пустота: покупатель должен
   видеть, чего ещё не хватает. */
.sc-build__slot-none {
  font-size: 13px;
  color: var(--ecomm-text-muted);
}

.sc-build__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}

.sc-build__name {
  flex: 1 1 auto;
  font-size: 13.5px;
  color: var(--wd-title-color);
  text-decoration: none;
}

.sc-build__name:hover {
  color: var(--wd-title-color);
}

.sc-build__qty,
.sc-build__price {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--ecomm-text-muted);
}

.sc-build .sc-build__remove {
  padding: 0 4px;
  font-size: 15px;
  line-height: 1;
  color: var(--ecomm-text-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.sc-build .sc-build__remove:hover {
  color: var(--ecomm-status-warn);
}

.sc-build__total {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ecomm-border);
  font-size: 14px;
  color: var(--wd-title-color);
}

.sc-build .sc-build__cart,
.sc-build .sc-build__open {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  font-family: var(--wd-title-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
  transition: background-color 0.25s var(--ecomm-ease), color 0.25s var(--ecomm-ease);
}

.sc-build .sc-build__cart {
  color: #fff;
  background: var(--ecomm-accent);
}

.sc-build .sc-build__cart:hover {
  background: #6a6fe8;
}

.sc-build .sc-build__open {
  color: var(--wd-title-color);
  background: var(--ecomm-bg-raised);
  text-decoration: none;
}

.sc-build .sc-build__open:hover {
  color: var(--wd-title-color);
}

/* Кнопка на карточке товара. Селектор из двух частей: у WoodMart
   в base.css есть :is(.btn, .button, button, …) с той же
   специфичностью (0,1,0), и подключается он ПОСЛЕ дочерней темы. */
.entry-summary .sc-build-add,
.product .sc-build-add {
  display: inline-flex;
  align-items: center;
  margin: 12px 0;
  padding: 13px 26px;
  font-family: var(--wd-title-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wd-title-color);
  background: var(--ecomm-bg-raised);
  border: 1px solid var(--ecomm-border);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.25s var(--ecomm-ease), background-color 0.25s var(--ecomm-ease);
}

.entry-summary .sc-build-add:hover,
.product .sc-build-add:hover {
  border-color: var(--ecomm-accent);
  background: rgba(89, 94, 224, 0.16);
}

.entry-summary .sc-build-add--in,
.product .sc-build-add--in {
  opacity: 0.55;
  cursor: default;
}

/* ============================================================
   КОНФИГУРАТОР — ГЕОМЕТРИЯ f10

   Размеры, отступы и сетка сняты с конфигуратора f10.eu вычисленными
   стилями (2026-09-17, спека подпроекта 8). Цвета и шрифты — наши.
   ============================================================ */

/* Баннер заголовка темы — у f10 его нет, заголовок стоит в самой странице. */
body.sc-build-page .wd-page-title {
  display: none;
}

/* Шапка и слоты ужаты по просьбе человека: одиннадцать слотов по
   105 px уводили половину сборки под сгиб. Отступы были сняты с f10
   (16 / 24 / 16 / 32 и высота 89), но у них слотов меньше. */
.sc-cfg__page-title {
  margin: 0;
  padding: 16px 0;
  font-family: var(--wd-title-font);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  color: var(--wd-title-color);
  border-bottom: 1px solid var(--ecomm-border);
}

/* Левый столбец ужимается: с общей шириной сайта (1320 внутри
   полей) ему достаётся 840 вместо снятых с f10 920. Правый столбец
   со сводкой жёсткий — в нём цена и кнопки. */
.sc-cfg__grid {
  display: grid;
  grid-template-columns: minmax(0, 920px) 440px;
  gap: 40px;
  align-items: start;
}

.sc-cfg__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}

.sc-cfg__title {
  margin: 0;
  font-family: var(--wd-title-font);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  color: var(--wd-title-color);
}

.sc-cfg__hint {
  margin: -4px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--ecomm-text-muted);
}

/* Кнопка, а не ссылка — и тема красит её как кнопку: высота 42,
   заглавные, вес 600. У f10 это строка текста со значком. */
.sc-cfg .sc-cfg__clear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ecomm-text-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.sc-cfg .sc-cfg__clear:hover {
  color: var(--wd-title-color);
}

.sc-cfg__slots {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-cfg__slot + .sc-cfg__slot,
.sc-cfg__card + .sc-cfg__card {
  margin-top: 8px;
}

/* ---- Карточка слота: рамка 1, скругление 4 */
.sc-cfg .sc-cfg__card {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 11px 20px 11px 24px;
  color: var(--wd-title-color);
  border: 1px solid var(--ecomm-border);
  border-radius: 4px;
}

.sc-cfg .sc-cfg__card--filled {
  min-height: 92px;
}

.sc-cfg .sc-cfg__card--empty {
  min-height: 62px;
  transition: border-color 0.2s var(--ecomm-ease);
}

.sc-cfg .sc-cfg__card--empty:hover {
  border-color: var(--ecomm-border);
}

.sc-cfg__who {
  display: flex;
  flex: 0 0 231px;
  flex-direction: column;
  min-width: 0;
}

/* Место под строку статуса держится и без статуса: карточки не прыгают. */
.sc-cfg__status {
  min-height: 24px;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 24px;
  color: var(--ecomm-text-muted);
}

.sc-cfg__status--bad {
  color: var(--ecomm-status-bad);
}

.sc-cfg__status--warn {
  color: var(--ecomm-status-warn);
}

.sc-cfg__label {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 20px;
  color: var(--wd-title-color);
}

.sc-cfg__required {
  color: var(--ecomm-status-warn);
}

.sc-cfg__thumb {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
}

.sc-cfg__thumb img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Высота строки задана самому блоку: имя в нём строчное (рядом с ним
   встаёт «×2»), и без этого строку растягивала бы унаследованная высота
   строки темы — 25.6 px вместо замеренных у f10 20, карточка выходила
   120 px вместо 116. */
.sc-cfg__info {
  flex: 0 1 294px;
  min-width: 0;
  margin-left: 23px;
  font-size: 14px;
  line-height: 20px;
}

.sc-cfg__id {
  display: block;
  font-size: 12px;
  line-height: 24px;
  color: var(--ecomm-text-muted);
}

/* Имя в карточке — ровно одна строка: высота карточки f10 (116)
   сложена из полей, ID, имени и двух строк характеристик. Имена
   товаров длиннее прежних «производитель + MPN», и без обрезки
   карточка растёт. Полное имя показывает подсказка title. */
.sc-cfg .sc-cfg__name {
  display: block;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  color: var(--wd-title-color);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sc-cfg__qty {
  font-size: 12px;
  color: var(--ecomm-text-muted);
}

/* Две строки характеристик с обрезкой, как у f10.
   Межстрочное характеристик на f10 не замерено (спека, раздел 2), и
   повторно снять его не удалось. 17 px выведено из замеренного: карточка
   116 = поля 32 + рамка 2 + ID 24 + имя 20 + отступ 4 + две строки по 17. */
.sc-cfg__specs {
  display: -webkit-box;
  overflow: hidden;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--ecomm-text-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sc-cfg__price {
  flex: 0 0 100px;
  margin: 0 4px;
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
  text-align: right;
  white-space: nowrap;
  color: var(--wd-title-color);
}

.sc-price__cents {
  font-size: 0.6em;
  line-height: 0;
  vertical-align: 0.6em;
}

.sc-cfg__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin-left: auto;
}

/* Квадраты 40 × 40, рамка 1, скругление 2. Селектор из двух частей:
   у темы своё правило для button той же специфичности. */
.sc-cfg .sc-cfg__replace,
.sc-cfg .sc-cfg__remove,
.sc-cfg .sc-cfg__action-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--ecomm-text-muted);
  background: none;
  border: 1px solid var(--ecomm-border);
  border-radius: 2px;
  cursor: pointer;
}

.sc-cfg .sc-cfg__action-gap {
  visibility: hidden;
}

.sc-cfg .sc-cfg__replace:hover,
.sc-cfg .sc-cfg__remove:hover {
  color: var(--wd-title-color);
  border-color: var(--ecomm-border);
}

.sc-cfg__card--empty .sc-cfg__label {
  flex: 0 0 200px;
}

.sc-cfg__count {
  margin-left: 24px;
  font-size: 14px;
  line-height: 22px;
  color: var(--ecomm-text-muted);
}

.sc-cfg__add {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  font-size: 14px;
  line-height: 22px;
  color: var(--ecomm-text-muted);
}

.sc-cfg__add-icon {
  font-size: 18px;
  color: var(--wd-title-color);
}

.sc-cfg .sc-cfg__card--empty:hover .sc-cfg__add {
  color: var(--wd-title-color);
}

/* ---- Колонка итога: 440, рамка 1, скругление 4, поля 32 → внутри 374 */
.sc-cfg__aside {
  min-width: 0;
}

.sc-cfg__panel {
  box-sizing: border-box;
  padding: 32px;
  border: 1px solid var(--ecomm-border);
  border-radius: 4px;
}

.sc-cfg__sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sc-cfg__total {
  font-size: 24px;
  font-weight: 500;
  line-height: 40px;
  color: var(--wd-title-color);
}

.sc-cfg__guarantee {
  font-size: 14px;
  line-height: 24px;
  color: var(--ecomm-text-muted);
}

.sc-cfg__budget {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 22px;
  color: var(--ecomm-text-muted);
}

.sc-cfg__budget--over {
  color: var(--ecomm-status-warn);
}

.sc-cfg .sc-cfg__budget-clear {
  min-height: 0;
  margin-left: auto;
  padding: 0 4px;
  font-size: 16px;
  line-height: 1;
  color: var(--ecomm-text-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

.sc-cfg__budget-pick {
  margin: 8px 0 0;
}

.sc-cfg__budget-pick > summary {
  font-size: 13px;
  line-height: 22px;
  color: var(--ecomm-accent);
  list-style: none;
  cursor: pointer;
}

.sc-cfg__budget-pick > summary::-webkit-details-marker {
  display: none;
}

.sc-cfg__budget-pick[open] .sc-build__bands {
  margin-top: 10px;
}

.sc-cfg__issues:empty {
  display: none;
}

.sc-build__missing {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ecomm-status-warn);
}

/* Кнопки покупки: высота 36, скругление 2, 14 px, отступ 16.
   min-height снят: тема задаёт кнопкам var(--btn-height, 42px), и без
   этого высота 36 молча становилась 42. */
.sc-cfg .sc-cfg__buy {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  min-height: 0;
  margin: 16px 0 0;
  padding: 7px 22px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 2px;
  cursor: pointer;
}

.sc-cfg .sc-cfg__buy--primary {
  color: #fff;
  background: var(--ecomm-accent);
  border: 0;
}

.sc-cfg .sc-cfg__buy--outline {
  padding: 6px 24px;
  color: var(--wd-title-color);
  background: transparent;
  border: 1px solid var(--ecomm-border);
}

.sc-cfg .sc-cfg__buy:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sc-cfg .sc-cfg__buy--primary:not(:disabled):hover {
  filter: brightness(1.12);
}

.sc-cfg .sc-cfg__buy--outline:not(:disabled):hover {
  border-color: var(--ecomm-border);
}

/* ---- Узкий экран. Мобильную вёрстку f10 снять не удалось (спека,
   раздел 9) — это наша раскладка, а не копия. */
@media (max-width: 1024px) {
  .sc-cfg__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-cfg__head {
    flex-wrap: wrap;
  }

  .sc-cfg .sc-cfg__card--filled {
    display: grid;
    grid-template-areas:
      "who   who  actions"
      "thumb info price";
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px 12px;
    min-height: 0;
    padding: 16px;
  }

  .sc-cfg__who     { grid-area: who; }
  .sc-cfg__actions { grid-area: actions; margin-left: 0; }
  .sc-cfg__thumb   { grid-area: thumb; }
  .sc-cfg__info    { grid-area: info; margin-left: 0; }

  .sc-cfg__price {
    grid-area: price;
    margin: 0;
  }

  .sc-cfg .sc-cfg__card--empty {
    min-height: 0;
    padding: 16px;
  }

  .sc-cfg__card--empty .sc-cfg__label {
    flex: 0 1 auto;
  }

  .sc-cfg__count {
    margin-left: 12px;
  }
}

/* Страница выбора детали */
.sc-slot__back {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--ecomm-text-muted);
}

.sc-slot__back:hover {
  color: var(--wd-title-color);
}

.sc-slot__title {
  margin: 0 0 8px;
  font-family: var(--wd-title-font);
  font-size: clamp(22px, 3vw, 32px);
  color: var(--wd-title-color);
}

/* ============================================================
   МОДАЛКА ВЫБОРА ДЕТАЛИ

   Лежит поверх конфигуратора, а не заменяет его: закрыв её,
   человек оказывается там же, откуда открыл, и видит пересчитанные
   числа по слотам.
   ============================================================ */

body.sc-modal-open {
  overflow: hidden;
}

.sc-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(8px, 3vh, 40px) clamp(8px, 3vw, 32px);
}

.sc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.sc-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1240px, 100%);
  max-height: 100%;
  overflow: hidden;
  background: var(--ecomm-bg-raised);
  border-radius: var(--ecomm-radius);
}

.sc-modal__head {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ecomm-border);
}

.sc-modal__title {
  margin: 0;
  font-family: var(--wd-title-font);
  font-size: clamp(18px, 2.4vw, 24px);
  color: var(--wd-title-color);
}

.sc-modal__count {
  font-size: 14px;
  color: var(--ecomm-text-muted);
}

/* Селектор из двух частей: у темы своё правило для button той же
   специфичности, а base.css грузится после дочерней таблицы. */
.sc-modal .sc-modal__close {
  margin-left: auto;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--ecomm-text-muted);
  background: none;
  border: 0;
  cursor: pointer;
}

/* Окно формы уже окна выбора детали: в нём четыре поля, а не каталог. */
.sc-modal__panel--narrow {
  max-width: 520px;
}

.sc-consult__intro {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ecomm-text-muted);
}

.sc-consult__label {
  display: block;
  margin: 16px 0 6px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ecomm-text-muted);
}

.sc-consult__input,
.sc-consult__textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ecomm-border);
  border-radius: 8px;
  background: var(--ecomm-bg-raised);
  color: var(--wd-title-color);
  font-size: 14px;
  line-height: 20px;
}

.sc-consult__textarea {
  resize: vertical;
}

.sc-consult__consent {
  display: flex;
  gap: 10px;
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--ecomm-text-muted);
}

.sc-consult__error {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--ecomm-status-bad);
}

.sc-consult__submit {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  border: 0;
  border-radius: 8px;
  background: var(--sc-accent, #6b5bd6);
  color: var(--wd-title-color);
  font-size: 14px;
  cursor: pointer;
}

.sc-consult__sent {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--wd-title-color);
}

/* Ловушка для ботов: человек её не видит и табом в неё не попадает. */
.sc-consult__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sc-modal .sc-modal__close:hover {
  color: var(--wd-title-color);
}

/* Прокручивается ТЕЛО, а не вся модалка: шапка со счётчиком и
   закрытием остаётся на виду на длинной выдаче. */
.sc-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 22px 24px;
}

/* ------------------------------------------------------------
   Пилюли ограничений

   Крестика нет: ограничение выведено из сборки и снимается только
   сменой детали, которая его породила.
   ------------------------------------------------------------ */

.sc-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.sc-pills__lead {
  font-size: 13px;
  color: var(--ecomm-text-muted);
}

.sc-pill {
  padding: 5px 11px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--wd-title-color);
  background: var(--ecomm-accent-soft);
  border: 1px solid var(--ecomm-accent);
  border-radius: 999px;
}

.sc-pill__label {
  color: var(--ecomm-text-muted);
}

/* Карточки подтипа: ярлык поверх фасета, а не разбиение. */
.sc-subtypes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.sc-subtype {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--wd-title-color);
  background: var(--ecomm-bg-raised);
  border: 1px solid var(--ecomm-border);
  border-radius: 8px;
  transition: border-color 0.2s var(--ecomm-ease), background-color 0.2s var(--ecomm-ease);
}

.sc-subtype:hover {
  color: var(--wd-title-color);
  border-color: var(--ecomm-border);
}

.sc-subtype--on {
  color: var(--wd-title-color);
  background: var(--ecomm-accent-soft);
  border-color: var(--ecomm-accent);
}

/* Поиск и порядок */
.sc-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.sc-toolbar .sc-toolbar__search,
.sc-toolbar .sc-toolbar__sort {
  height: 40px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--wd-title-color);
  background: var(--ecomm-bg-raised);
  border: 1px solid var(--ecomm-border);
  border-radius: 8px;
}

/* Ширины заданы явно: тема ставит select width: 100%, и при flex-basis
   auto он забирал всю строку, а поиску оставались 26 px отступов. */
.sc-toolbar .sc-toolbar__search {
  flex: 1 1 240px;
  width: auto;
  min-width: 0;
}

.sc-toolbar .sc-toolbar__sort {
  flex: 0 0 auto;
  width: auto;
  max-width: 45%;
}

.sc-toolbar .sc-toolbar__search:focus,
.sc-toolbar .sc-toolbar__sort:focus {
  border-color: var(--ecomm-accent);
  outline: none;
}

/* Значение фасета, запрещённое сборкой: видно с числом, не нажимается.
   Закреплённое — отмечено и тоже не нажимается, но читается как выбор,
   а не как пропажа. */
.sc-facet__value--blocked {
  opacity: 0.35;
  cursor: not-allowed;
}

.sc-facet__value--locked {
  cursor: default;
}

.sc-facet__value--locked .sc-facet__name::after {
  content: " \2014 your build";
  font-size: 11px;
  color: var(--ecomm-text-muted);
}

/* ------------------------------------------------------------
   Строка товара

   Второй серверный шаблон рядом с сеткой каталога. В строке видно
   имя, характеристики и цену сразу — в плитке характеристики
   не помещались вовсе.
   ------------------------------------------------------------ */

.sc-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--ecomm-border);
}

.sc-row__image img {
  display: block;
  width: 100%;
  height: auto;
}

.sc-row__id {
  display: block;
  font-size: 11px;
  color: var(--ecomm-text-muted);
}

.sc-row__name {
  display: block;
  font-size: 14px;
  color: var(--wd-title-color);
}

/* Характеристики обрезаются двумя строками: у некоторых товаров
   их полсотни, и строка иначе растёт на пол-экрана. */
.sc-row__specs {
  display: -webkit-box;
  overflow: hidden;
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ecomm-text-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sc-row__buy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 140px;
  text-align: right;
}

.sc-row__price {
  font-size: 16px;
  font-weight: 600;
  color: var(--wd-title-color);
}

.sc-row__stock {
  font-size: 11px;
  color: var(--ecomm-text-muted);
}

@media (max-width: 600px) {
  .sc-row {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .sc-row__buy {
    grid-column: 2;
    align-items: flex-start;
    min-width: 0;
    text-align: left;
  }
}

/* Страницы выдачи. Кнопки, а не ссылки: переход идёт обновлением
   блока, как и фильтры. Селектор из двух частей — у темы есть своё
   правило для button той же специфичности, а base.css грузится
   после дочерней таблицы. */
.sc-results .sc-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 22px 0 0;
}

.sc-results .sc-pages__page {
  min-width: 38px;
  padding: 8px 10px;
  font-family: var(--wd-text-font);
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--wd-title-color);
  background: var(--ecomm-bg-raised);
  border: 1px solid var(--ecomm-border);
  border-radius: 8px;
  cursor: pointer;
}

.sc-results .sc-pages__page:hover {
  color: var(--wd-title-color);
  border-color: var(--ecomm-accent);
}

.sc-results .sc-pages__page--current {
  color: var(--wd-title-color);
  background: var(--ecomm-accent-soft);
  border-color: var(--ecomm-accent);
}

.sc-pages__gap {
  padding: 0 2px;
  color: var(--ecomm-text-muted);
}

/* Выбор бюджета на пустой сборке. Кнопки, а не ссылки: выбор меняет
   состояние сессии, а не адрес страницы.

   Селектор из двух классов по той же причине, что и у кнопки корзины:
   base.css темы грузится ПОСЛЕ дочерней и имеет правило для button
   с той же специфичностью. */
:is(.sc-build, .sc-cfg__panel) .sc-build__bands {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

:is(.sc-build, .sc-cfg__panel) .sc-build__band {
  display: block;
  width: 100%;
  padding: 11px 13px;
  text-align: left;
  /* Тема переводит все кнопки в верхний регистр и разряжает буквы.
     Для подписи суммы это ещё сносно, а подсказка капсом нечитаема,
     поэтому гасим оба правила здесь, а не боремся с ними ниже. */
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--wd-text-font);
  background: var(--ecomm-bg-raised);
  border: 1px solid var(--ecomm-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s var(--ecomm-ease), background 0.2s var(--ecomm-ease);
}

:is(.sc-build, .sc-cfg__panel) .sc-build__band:hover {
  background: var(--ecomm-bg-raised);
  border-color: var(--ecomm-accent);
}

.sc-build__band-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--wd-title-color);
}

.sc-build__band-hint {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ecomm-text-muted);
}

/* Бюджет — цель, поэтому строка спокойная. Перерасход называется,
   но покупку не блокирует: блокируют только нарушения совместимости. */
.sc-build__budget {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ecomm-text-muted);
}

.sc-build__budget--over {
  color: var(--ecomm-status-warn);
}

/* Снять бюджет. Неброско: это выход из выбора, а не действие,
   к которому подталкивают. */
.sc-build .sc-build__budget-clear {
  padding: 0;
  margin-top: 4px;
  font-family: var(--wd-text-font);
  font-size: 12px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ecomm-text-muted);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

.sc-build .sc-build__budget-clear:hover {
  color: var(--wd-title-color);
}

/* Нарушение — красным, непроверяемое — янтарным. Разные цвета
   потому, что это разные утверждения: «не подойдёт» и «не знаем». */
.sc-build__violation {
  margin: 10px 0 0;
  padding: 9px 11px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ecomm-status-bad);
  background: rgba(190, 60, 60, 0.16);
  border-left: 2px solid var(--ecomm-status-bad);
}

/* Метка и чекбокс — из двух классов, по той же причине, что и
   кнопка корзины выше: WoodMart стилизует поля форм и метки
   селекторами той же специфичности, а base.css темы грузится
   ПОСЛЕ дочерней таблицы. Одного класса не хватит. */
:is(.sc-build, .sc-cfg__panel) .sc-build__unverified {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 10px 0 0;
  padding: 9px 11px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--wd-title-color);
  background: rgba(251, 188, 52, 0.12);
  border-left: 2px solid var(--ecomm-status-warn);
  cursor: pointer;
}

:is(.sc-build, .sc-cfg__panel) .sc-build__unverified input {
  flex: 0 0 auto;
  margin-top: 3px;
}

/* Неприменимое — тише непроверяемого и без полосы сбоку: это не
   предупреждение, а объяснение прочерка. Жёлтая полоса рядом с
   жёлтой полосой непроверяемого читалась бы как второе
   предупреждение, которого здесь нет. */
:is(.sc-build, .sc-cfg__panel) .sc-build__na {
  margin: 10px 0 0;
  padding: 0 11px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--wd-text-color);
  opacity: 0.75;
}

/* ------------------------------------------------------------
   Появление при прокрутке

   Класс ecomm-reveal ставится разметкой, а is-visible — скриптом
   через IntersectionObserver. Начальное состояние задаётся только
   при наличии класса js-reveal на <html>: без JS секции обязаны
   остаться видимыми, иначе главная превращается в пустой экран.
   ------------------------------------------------------------ */

.js-reveal .ecomm-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s var(--ecomm-ease),
    transform 0.7s var(--ecomm-ease);
}

.js-reveal .ecomm-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Лесенка внутри сетки: плитки проявляются одна за другой. */
.js-reveal .ecomm-reveal.is-visible > * {
  animation: ecomm-rise 0.6s var(--ecomm-ease) backwards;
}

.js-reveal .ecomm-reveal.is-visible > *:nth-child(1) { animation-delay: 0.04s; }
.js-reveal .ecomm-reveal.is-visible > *:nth-child(2) { animation-delay: 0.10s; }
.js-reveal .ecomm-reveal.is-visible > *:nth-child(3) { animation-delay: 0.16s; }
.js-reveal .ecomm-reveal.is-visible > *:nth-child(4) { animation-delay: 0.22s; }
.js-reveal .ecomm-reveal.is-visible > *:nth-child(5) { animation-delay: 0.28s; }
.js-reveal .ecomm-reveal.is-visible > *:nth-child(6) { animation-delay: 0.34s; }
.js-reveal .ecomm-reveal.is-visible > *:nth-child(7) { animation-delay: 0.40s; }
.js-reveal .ecomm-reveal.is-visible > *:nth-child(8) { animation-delay: 0.46s; }

@keyframes ecomm-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   Адаптив
   ------------------------------------------------------------ */

@media (max-width: 1024px) {
  .ecomm-row__track { grid-auto-columns: calc((100% - var(--ecomm-row-gap)) / 2); }
}

/* На узком экране бейджи уходят ПОД снимок, а не по углам панели.
   По углам они наезжали на товар: при ширине 375 три таблетки
   закрывали корпус целиком, и от картинки оставался фон. */
@media (max-width: 900px) {
  .ecomm-showcase .ecomm-showcase__arrow {
    width: 34px;
    height: 34px;
  }

  .ecomm-showcase .ecomm-showcase__arrow svg {
    width: 17px;
    height: 17px;
  }

  /* Узкий файл подложки: на телефоне 1600 px тратятся впустую.
     Вуаль плотнее: панель ниже, и название занимает большую
     долю кадра. */
  .ecomm-showcase__slide {
    min-height: clamp(200px, 52vw, 300px);
    padding: 24px clamp(44px, 12vw, 64px) 40px;
    background-image:
      linear-gradient(180deg,
        rgba(18, 16, 46, 0.34) 0%,
        rgba(18, 16, 46, 0.58) 48%,
        rgba(18, 16, 46, 0.86) 100%),
      var(--shot-sm, none);
  }
}

/* Первый экран складывается в одну колонку. Снимок уходит под кнопки,
   а не над заголовком: заголовок и кнопка важнее иллюстрации, и на
   телефоне первым должно читаться слово. */
@media (max-width: 900px) {
  .ecomm-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 6vw, 40px);
  }

  .ecomm-hero__shot {
    max-width: 560px;
  }

  .ecomm-hero__credit {
    text-align: left;
  }
}

@media (max-width: 680px) {
  .ecomm-row__track { grid-auto-columns: 86%; }
  .ecomm-row__tile { width: 54px; height: 54px; }

  /* Карточка на телефоне 295×155, и общие 46% оставляли между
     мини-плитками и товаром 1 px. Оба селектора перечислены вместе:
     у правила ряда готовых ПК вес больше, и одного узкого правила
     оно бы не заметило. Замерено при окне 375 px. */
  .ecomm-row__hero,
  .ecomm-row--desktops .ecomm-row__hero { width: 40%; }
  .ecomm-hero { min-height: 0; }
  .ecomm-hero__facts { gap: 26px 34px; }
  .ecomm-btn { padding: 14px 24px; }
  .ecomm-hero__cta .ecomm-btn { flex: 1 1 auto; justify-content: center; }
}

/* ------------------------------------------------------------
   Уважение к системной настройке движения

   prefers-reduced-motion ставят не из вкуса: это настройка для людей
   с вестибулярными нарушениями, у которых параллакс и разъезжающиеся
   блоки вызывают тошноту и головокружение. Гасим анимацию, оставляя
   изменение цвета — оно безопасно и сохраняет отклик интерфейса.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .js-reveal .ecomm-reveal,
  .js-reveal .ecomm-reveal.is-visible > * {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  /* Автосмена слайдов при этой настройке не запускается вовсе
     (showcase.js), а затухание гасим здесь: ручное переключение
     стрелкой должно быть мгновенным, а не плавным. */
  .ecomm-showcase__slide {
    transition: none;
  }

  .ecomm-row__card,
  .ecomm-btn,
  .ecomm-row__hero img,
  .wd-product .product-image-link img {
    transition-property: background-color, border-color, color, box-shadow;
  }

  .ecomm-row__card:hover,
  .ecomm-btn:hover {
    transform: none;
  }

  .ecomm-row__card:hover .ecomm-row__hero img,
  .wd-product:hover .product-image-link img {
    transform: none;
  }
}

/* ============================================================
   ПАНЕЛЬ КАТАЛОГА В ШАПКЕ

   Раскладка снята с f10 при окне 1500 px: кнопка 146×41, зазор 30,
   поле поиска 41 в высоту, рамка 1 px, радиус 3.25 px, панель во всю
   ширину контейнера с левым столбцом 229 px и строкой 29 px.

   Размеры шрифтов НАШИ. У f10 базовый 11.4 px; опускаться до
   нечитаемого ради буквального совпадения мы уже отказывались — на
   карточках товаров и на рядах главной. Отсюда же min-height вместо
   height у строки рельса: наш шрифт в 29 px не всегда укладывается.

   Кнопка у f10 красная, у нас — акцент палитры. Белый на #595ee0
   даёт 5.65 при пороге 4.5.
   ============================================================ */

.sc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Колонка конструктора ужимается по содержимому; строке нужна вся
   ширина между логотипом и значками. */
.whb-column .sc-bar-host {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
}

/* Промежуток задан полем кнопки, а не gap: gap считается между всеми
   детьми, в том числе схлопнутым знаком нулевой ширины, и сдвигал
   кнопку на 30 px правее логотипа, который лежит строкой выше. */
.sc-bar {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

.sc-bar__button {
  margin-right: 30px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 146px;
  height: 41px;
  padding: 0 18px;
  border-radius: 4px 4px 0 0;
  background: var(--ecomm-accent);
  color: #fff;
  font-family: var(--wd-title-font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  transition: background-color 0.18s ease;
}

.sc-bar__button:hover,
.sc-bar__button:focus-visible {
  background: #4a4ec9;
  color: #fff;
}

/* При открытой панели кнопка смыкается с ней, как у f10. */
.sc-bar__button[aria-expanded="true"] {
  background: #4a4ec9;
}

.sc-bar__burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 14px;
  height: 10px;
}

.sc-bar__burger i {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.sc-bar__search {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  height: 41px;
  max-width: 682px;
}

.sc-bar__search input[type="search"] {
  width: 100%;
  height: 41px;
  margin: 0;
  padding: 0 46px 0 16px;
  border: 1px solid var(--ecomm-border);
  border-radius: 4px;
  background: var(--ecomm-bg);
  color: var(--wd-title-color);
  font-size: 14px;
  line-height: 39px;
}

.sc-bar__search input[type="search"]::placeholder {
  color: var(--ecomm-text-muted);
  opacity: 1;
}

.sc-bar__search input[type="search"]:focus {
  border-color: var(--ecomm-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--ecomm-accent-soft);
}

/* Кнопки внутри строки и панели перечислены С РОДИТЕЛЕМ намеренно.
   Тема объявляет :is(.btn, .button, button, [type="submit"], [type="button"]),
   а специфичность :is() равна самому весомому доводу внутри — одному
   классу. С нашим одиночным классом выходит ничья, и решает порядок
   листов: parts/base.css грузится ПОСЛЕ дочерней темы и забирает
   position, padding и радиус себе. Тот же случай, что со стрелками
   рядов главной. */
.sc-bar .sc-bar__submit {
  position: absolute;
  top: 1px;
  right: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 39px;
  padding: 0;
  border: 0;
  border-radius: 0 3px 3px 0;
  background: transparent;
  color: var(--ecomm-text-muted);
  cursor: pointer;
}

.sc-bar .sc-bar__submit:hover,
.sc-bar .sc-bar__submit:focus-visible {
  color: var(--ecomm-accent-ink);
  background: transparent;
}

/* ------------------------------------------------------------
   Сама панель.

   position: fixed, а левый край и ширину ставит скрипт по контейнеру
   шапки: строка липкая, и панель, посчитанная один раз в разметке,
   разъезжалась бы с ней при прокрутке.
   ------------------------------------------------------------ */

.sc-panel {
  position: fixed;
  z-index: 399;                     /* ниже модалки темы (400), выше страницы */
  display: block;
  background: var(--ecomm-bg);
  border: 1px solid var(--ecomm-border);
  border-radius: 0 4px 4px 4px;
  box-shadow: 0 18px 44px rgba(20, 18, 40, 0.14);
  overflow: hidden;
}

/* Проявление за 0.2 с — ровно переход f10 (transform .2s, opacity .2s;
   transform у них при этом остаётся none, то есть выезда нет).

   Класс, а не атрибут hidden: hidden не анимируется. visibility
   убирает панель из обхода табом так же, как hidden, и в отличие от
   display: none умеет переходить. */
.sc-panel {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s var(--ecomm-ease), visibility 0s;
}

.sc-panel.is-closed {
  opacity: 0;
  visibility: hidden;
  /* Задержка на visibility: иначе она выключается сразу и гасит
     проявление на обратном ходу. */
  transition: opacity 0.2s var(--ecomm-ease), visibility 0s linear 0.2s;
}

/* Сброс темы объявляет section блочным, и штатное [hidden] браузера
   перебивается. Без этой строки открытая панель показывает все
   десять правых частей разом. */
.sc-panel__pane[hidden] {
  display: none;
}

.sc-panel__inner {
  display: grid;
  grid-template-columns: 229px minmax(0, 1fr);
  min-height: 420px;
  max-height: calc(100vh - 180px);
}

/* Левый столбец */
.sc-panel__rail {
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--ecomm-bg-raised);
  border-right: 1px solid var(--ecomm-border);
  overflow-y: auto;
}

.sc-panel__rail li {
  margin: 0;
}

.sc-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 29px;
  padding: 5px 16px;
  color: var(--wd-title-color);
  font-size: 13px;
  line-height: 1.3;
}

.sc-panel__row:hover,
.sc-panel__row:focus-visible,
.sc-panel__row.is-current {
  background: var(--ecomm-bg);
  color: var(--ecomm-accent-ink);
  outline: none;
}

.sc-panel__row.is-current {
  box-shadow: inset 2px 0 0 var(--ecomm-accent);
}

.sc-panel__row-count {
  flex: 0 0 auto;
  color: var(--ecomm-text-muted);
  font-size: 11px;
}

.sc-panel__row:hover .sc-panel__row-count,
.sc-panel__row.is-current .sc-panel__row-count {
  color: var(--ecomm-accent-ink);
}

/* Правая часть */
.sc-panel__right {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 24px 24px;
  overflow-y: auto;
}

.sc-panel__banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  /* Справа больше: там крестик панели. */
  padding: 12px 44px 12px 18px;
  border-radius: 4px;
  background: var(--ecomm-tint-accent);
  color: var(--ecomm-accent-ink);
}

.sc-panel__banner:hover {
  background: var(--ecomm-accent-soft);
  color: var(--ecomm-accent-ink);
}

.sc-panel__banner-title {
  font-family: var(--wd-title-font);
  font-weight: 600;
  font-size: 14px;
}

.sc-panel__banner-text {
  flex: 1 1 auto;
  color: var(--wd-text-color);
  font-size: 13px;
}

.sc-panel__banner-go {
  font-size: 16px;
}

.sc-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ecomm-border);
}

.sc-panel__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}

.sc-panel__all {
  flex: 0 0 auto;
  color: var(--ecomm-accent-ink);
  font-size: 13px;
}

.sc-panel__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 28px;
}

/* У видеокарт колонок две: своей таксономии, кроме марки, у них нет. */
.sc-panel__col-title {
  margin: 0 0 8px;
  color: var(--ecomm-text-muted);
  font-family: var(--wd-text-font);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sc-panel__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-panel__links li {
  margin: 0;
}

.sc-panel__links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  color: var(--wd-title-color);
  font-size: 13.5px;
  line-height: 1.35;
}

.sc-panel__links a:hover,
.sc-panel__links a:focus-visible {
  color: var(--ecomm-accent-ink);
  outline: none;
}

.sc-panel__count,
.sc-panel__note {
  flex: 0 0 auto;
  color: var(--ecomm-text-muted);
  font-size: 11px;
}

/* Кнопки внутри строки и панели перечислены С РОДИТЕЛЕМ намеренно.
   Тема объявляет :is(.btn, .button, button, [type="submit"], [type="button"]),
   а специфичность :is() равна самому весомому доводу внутри — одному
   классу. С нашим одиночным классом выходит ничья, и решает порядок
   листов: parts/base.css грузится ПОСЛЕ дочерней темы и забирает
   position, padding и радиус себе. Тот же случай, что со стрелками
   рядов главной. */
.sc-panel .sc-panel__close {
  position: absolute;
  top: 10px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ecomm-text-muted);
  cursor: pointer;
}

.sc-panel .sc-panel__close:hover,
.sc-panel .sc-panel__close:focus-visible {
  background: var(--ecomm-bg-raised);
  color: var(--wd-title-color);
}

/* Затемнение страницы под открытой панелью.

   Слои заданы здесь один раз: затемнение 396, прибитая шапка 397,
   панель 399. Затемнение НИЖЕ шапки намеренно — выше оно гасило бы
   кнопку «Catalog» и перехватывало нажатие по ней, и закрыть панель
   той же кнопкой стало бы нельзя. */
body.sc-panel-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 396;
  background: var(--ecomm-scrim);
}

/* ------------------------------------------------------------
   Прилипающая шапка.

   Строка каталога остаётся наверху, верхняя полоса со ссылками
   уезжает со страницей — как у f10, где уезжает их первый ряд.
   ------------------------------------------------------------ */

/* Метку ставит скрипт перед строкой; по ней наблюдатель понимает,
   что строка прилипла. Своего вида у метки нет. */
.sc-stick-mark {
  height: 1px;
  margin: 0;
  pointer-events: none;
}

/* Прибивается ВСЯ шапка, а не одна строка.

   Строке прилипать некуда: её родитель .whb-main-header — absolute
   высотой 147 px, и sticky внутри него держится ровно эти 147 px,
   после чего уезжает вместе с ним.

   Поэтому sticky вешается на сам <header>, а верхняя полоса
   утягивается за верхний край отрицательным top: наверху остаётся
   только строка с каталогом — как у f10, где уезжает их первый ряд.
   Высота полосы замерена (41 px) и вынесена в переменную: на другом
   наборе ссылок она изменится, и подбирать её заново придётся здесь. */
@media (min-width: 1025px) {
  .whb-header {
    --sc-topbar: 41px;
    position: sticky;
    top: calc(-1 * var(--sc-topbar));
    z-index: 397;
  }

  .whb-row.whb-general-header.is-stuck {
    box-shadow: 0 4px 18px rgba(20, 18, 40, 0.07);
  }
}

/* Знак разворачивается ИЗ НУЛЕВОЙ ШИРИНЫ, как у f10: там переход
   width/margin/height 0.3s на самом SVG. Логотип не двигается —
   строка раздвигается, и кнопка уезжает вправо. */
.sc-bar__mark {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 0;
  margin-right: 0;
  overflow: hidden;
  opacity: 0;
  transition: width 0.3s var(--ecomm-ease), margin 0.3s var(--ecomm-ease),
              opacity 0.3s var(--ecomm-ease);
}

.sc-bar__mark svg {
  width: 40px;
  height: auto;
  flex: 0 0 40px;
}

.is-stuck .sc-bar__mark {
  width: 40px;
  margin-right: 16px;
  opacity: 1;
}

/* Узкий рабочий стол: столбец уже, колонок две. */
@media (max-width: 1200px) {
  .sc-panel__inner {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .sc-panel__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sc-bar {
    gap: 18px;
  }
}

/* ============================================================
   КАРТОЧКА КАТАЛОГА

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

   Цена прижата к низу через margin-top: auto. Без этого карточки
   ряда разъезжались бы по высоте: у материнских плат семь строк
   описания, у процессоров три — и цены стояли бы лесенкой.
   ============================================================ */

.sc-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--ecomm-border);
  border-radius: 4px;
  background: var(--ecomm-bg);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sc-card:hover {
  border-color: var(--ecomm-accent-soft);
  box-shadow: 0 6px 20px rgba(20, 18, 40, 0.08);
}

.sc-card__link {
  display: flex;
  flex-direction: column;
  color: inherit;
}

.sc-card__link:hover {
  color: inherit;
}

.sc-card__shot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  margin-bottom: 12px;
}

.sc-card__shot img {
  max-width: 100%;
  max-height: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Заглушка вместо снимка: наш знак, а не серая дыра. */
.sc-card__mark {
  display: block;
  width: 56px;
  opacity: 0.28;
}

.sc-card__mark svg {
  width: 100%;
  height: auto;
}

.sc-card__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Строка марки одной высоты и с логотипом, и с названием: иначе
   карточки ряда разъезжались бы на пару пикселей. Логотип Icecat —
   75×75 с белым полем, после обрезки полей знак занимает полоску
   вроде 46×10, и показываем мы его один к одному: растянутый знак
   в 75 пикселей был бы мыльным. */
.sc-card__brand {
  display: flex;
  align-items: center;
  height: 20px;
  margin-bottom: 4px;
}

.sc-card__brand img {
  max-height: 18px;
  max-width: 110px;
  width: auto;
  object-fit: contain;
}

.sc-card__brand--text {
  color: var(--ecomm-accent-ink);
  font-family: var(--wd-title-font);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.sc-card__sku {
  color: var(--ecomm-text-muted);
  font-size: 12px;
  line-height: 16px;
}

.sc-card__name {
  color: var(--wd-title-color);
  font-family: var(--wd-title-font);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 18px;
}

.sc-card__link:hover .sc-card__name {
  color: var(--ecomm-accent-ink);
}

.sc-card__specs {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--wd-text-color);
  font-size: 12px;
  line-height: 19px;
}

.sc-card__specs li {
  display: flex;
  gap: 5px;
  margin: 0;
}

/* Тире перед строкой — как на снимке. Знак декоративный, поэтому
   рисуется стилем: в разметке ему делать нечего. */
.sc-card__specs li::before {
  content: "–";
  flex: 0 0 auto;
  color: var(--ecomm-text-muted);
}

.sc-card__spec-label::after {
  content: ":";
}

.sc-card__spec-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* margin-top: auto прижимает цену к низу карточки. Без этого у
   процессоров (три строки описания) и у плат (семь) цены стояли бы
   на разной высоте, и ряд читался бы лесенкой. */
.sc-card__price {
  margin: auto 0 0;
  padding-top: 14px;
  text-align: right;
  color: var(--wd-title-color);
  font-family: var(--wd-title-font);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.1;
}

/* Цену WooCommerce заворачивает в свои теги — снимаем их оформление. */
.sc-card__price .woocommerce-Price-amount,
.sc-card__price bdi,
.sc-card__price ins {
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.sc-card__price del {
  margin-right: 8px;
  color: var(--ecomm-text-muted);
  font-size: 14px;
}

/* Три плотности сетки, как на снимке. */
.sc-cards--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sc-cards--compact .sc-card__shot { height: 120px; }
.sc-cards--compact .sc-card__shot img { max-height: 120px; }
.sc-cards--compact .sc-card__price { font-size: 18px; }

.sc-cards--list { grid-template-columns: minmax(0, 1fr); }

/* Три колонки по трём детям карточки: ссылка (снимок и название),
   список характеристик, цена. Первая версия давала ссылке 160 px на
   снимок И название разом — название сжималось в столбик по слову. */
.sc-cards--list .sc-card {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr) 150px;
  gap: 24px;
  align-items: center;
}

.sc-cards--list .sc-card__link {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.sc-cards--list .sc-card__shot {
  flex: 0 0 96px;
  height: 96px;
  margin-bottom: 0;
}

.sc-cards--list .sc-card__shot img { max-height: 96px; }
.sc-cards--list .sc-card__head { flex: 1 1 auto; min-width: 0; }
.sc-cards--list .sc-card__specs { margin-top: 0; }

.sc-cards--list .sc-card__price {
  margin: 0;
  padding: 0;
  text-align: right;
}

@media (max-width: 1200px) {
  .sc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-cards--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .sc-cards,
  .sc-cards--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-cards--list .sc-card { grid-template-columns: minmax(0, 1fr); }
  .sc-cards--list .sc-card__price { text-align: left; }
}

@media (max-width: 560px) {
  .sc-cards,
  .sc-cards--compact { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   Панель над выдачей: плотность, порядок, размер страницы, страницы.

   Кнопки перечислены С РОДИТЕЛЕМ: тема объявляет
   :is(.btn, .button, button, …) весом в один класс, а parts/base.css
   грузится после дочерней темы и при ничьей забирает оформление себе.
   ------------------------------------------------------------ */

.sc-bar2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 16px;
}

.sc-view {
  display: inline-flex;
  gap: 4px;
}

.sc-view .sc-view__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--ecomm-border);
  cursor: pointer;
}

.sc-view .sc-view__btn:hover {
  background: var(--ecomm-bg-raised);
  color: var(--ecomm-text-muted);
}

.sc-view .sc-view__btn.is-current {
  color: var(--wd-title-color);
  background: var(--ecomm-bg-raised);
  border-color: var(--ecomm-border);
}

/* Ширина явно: тема растягивает select на всю строку, и панель
   разваливалась на три ряда вместо одного. */
.sc-bar2 .sc-bar2__sort {
  width: auto;
  min-width: 170px;
  height: 30px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--ecomm-border);
  border-radius: 3px;
  background-color: var(--ecomm-bg);
  color: var(--wd-title-color);
  font-size: 12.5px;
}

.sc-per {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sc-per__label {
  margin-right: 4px;
  color: var(--ecomm-text-muted);
  font-size: 12.5px;
}

.sc-per .sc-per__btn {
  min-width: 30px;
  height: 26px;
  padding: 0 6px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--ecomm-text-muted);
  font-size: 12.5px;
  cursor: pointer;
}

.sc-per .sc-per__btn:hover {
  background: var(--ecomm-bg-raised);
  color: var(--wd-title-color);
}

/* Текущий размер страницы — белым по акценту: 5.12 при пороге 4.5. */
.sc-per .sc-per__btn.is-current {
  background: var(--ecomm-accent);
  color: #fff;
}

.sc-bar2 .sc-pages {
  margin-left: auto;
}

/* ------------------------------------------------------------
   Сворачивающиеся группы фасетов.

   details/summary, а не кнопка со скриптом: без JS кнопка ничего не
   раскроет, и половина фильтра окажется недоступной.
   ------------------------------------------------------------ */

.sc-facet-box {
  border-bottom: 1px solid var(--ecomm-border);
}

.sc-facet-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  color: var(--wd-title-color);
  font-family: var(--wd-title-font);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.sc-facet-box__head::-webkit-details-marker { display: none; }

.sc-facet-box__head::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--ecomm-text-muted);
  border-bottom: 1.6px solid var(--ecomm-text-muted);
  transform: rotate(-45deg);
  transition: transform 0.18s var(--ecomm-ease);
}

.sc-facet-box[open] > .sc-facet-box__head::after {
  transform: rotate(45deg);
}

.sc-facet-box__head:hover,
.sc-facet-box__head:focus-visible {
  color: var(--ecomm-accent-ink);
}

/* Отступ у группы теперь задаёт обёртка. */
.sc-facet-box .sc-facet {
  margin: 0;
  padding: 0 0 12px;
  border: 0;
}

/* ============================================================
   РЯД КАТЕГОРИЙ ПОД ЗАГОЛОВКОМ КАТАЛОГА

   Раскладка снята со снимка конкурента: тонкий линейный значок
   сверху, подпись под ним, плитки в строку по центру.

   Стоит на месте блока темы, который перечислял верхний уровень
   каталога со счётчиками. Сам блок гашён опцией, а не этими
   стилями: спрятанная разметка всё равно уехала бы к посетителю.
   ============================================================ */

/* Обёртка заголовка у темы — flex в одну строку (стрелка «назад»,
   заголовок). Ряд встал бы третьим столбцом справа от заголовка и
   сжал бы его в две строки. Разрешаем перенос — ряд уходит под
   заголовок, как на снимке. */
.wd-page-title .wd-title-wrapp {
  flex-wrap: wrap;
  justify-content: center;
  /* Обёртка у темы шире своего контейнера, когда содержимое не
     влезает: на телефоне она раздувалась до 668 px внутри 375 и
     уносила ряд за левый край. */
  min-width: 0;
  max-width: 100%;
}

.sc-strip {
  flex: 1 1 100%;
  width: 100%;
  /* min-width: 0 обязателен. Без него flex-элемент не ужимается ниже
     своего содержимого: ряд из восьми плиток раздувал обёртку
     заголовка до 668 px внутри экрана в 375, первая плитка уезжала
     за левый край и достать её было нечем — прокручивать оказалось
     нечего, переполнялась вся страница. */
  min-width: 0;
  max-width: 100%;
  margin: 18px 0 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.sc-strip::-webkit-scrollbar { display: none; }

.sc-strip__list {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: min-content;
}

.sc-strip__list li { margin: 0; }

.sc-strip__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 104px;
  padding: 12px 6px;
  border-radius: 4px;
  color: var(--wd-title-color);
  text-align: center;
  line-height: 1.25;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.sc-strip__tile:hover,
.sc-strip__tile:focus-visible {
  color: var(--ecomm-accent-ink);
  background: var(--ecomm-bg);
  outline: none;
}

.sc-strip__tile.is-current {
  color: var(--ecomm-accent-ink);
  background: var(--ecomm-bg);
}

/* Значок наследует цвет плитки: отдельного набора на наведение
   и на текущую не нужно.

   42 px — полтора прежних 28. Линия при этом ужата с 1.5 до 1.25:
   поле у значка 24, и при показе в 42 px прежняя линия давала
   2.6 px на экране вместо 1.75 — начертание переставало быть
   тонким. 1.25 возвращает те же 2.2. */
.sc-strip__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  stroke-width: 1.25;
}

.sc-strip__label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* На узком экране ряд не сжимается в кашу, а прокручивается:
   восемь подписей в 375 px не помещаются никак. */
@media (max-width: 680px) {
  .sc-strip__list { justify-content: flex-start; }
  .sc-strip { margin-top: 12px; }
  .sc-strip__tile { width: 90px; padding: 10px 4px; }
  .sc-strip__icon { width: 36px; height: 36px; }
  .sc-strip__label { font-size: 11px; }
}