@charset "UTF-8";
/* catalog.css — 2026-04-08
Mobile-first каталог товаров.
Принцип: товары — главный элемент, интерфейс — минимален.
ВАЖНО: @charset обязан быть ПЕРВОЙ байтовой последовательностью файла (до комментариев).
Nginx отдаёт text/css БЕЗ charset=utf-8 (charset_types не включает text/css по дефолту),
браузер интерпретирует CSS как Windows-1252 → UTF-8 символы типа '›' ломаются в '›'.
Системный фикс — добавить в nginx: charset_types text/css application/javascript; */
@layer pages {
/* ── Reset & Base ──────────────────────────────────────────────────────────── */
/* box-sizing, body, a, ul, button reset → common.css */
/* UX-3.6: скрытие scrollbar убрано — в длинном каталоге scrollbar = ориентир позиции.
Тонкий macOS-стиль scrollbar определён в common.css (scrollbar-width: thin). */
/* ── Header, Breadcrumb — все стили в common.css ─────────────────────────── */
/* ── CLS fix: view mode из localStorage до загрузки catalog.js ───────────── */
/* ВАЖНО: inline-скрипт ставит data-catalog-view на , CSS применяет layout сразу */
html[data-catalog-view="list"] .c-grid,
html[data-catalog-view="legacy_price"] .c-grid {
grid-template-columns: 1fr;
gap: 0;
/* MOB-1: padding горизонтальный убран — отступы на самих карточках (.pc).
Edge-to-edge строки: border-bottom идёт от края до края (iOS/Material паттерн). */
padding: 0 0 16px;
}
/* ── Active Filter Chips ──────────────────────────────────────────────────── */
.c-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 12px 8px;
}
.c-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
background: var(--accent);
color: #fff;
border-radius: 99px;
text-decoration: none;
transition: background .15s;
}
/* UX-4.1: :visited костыли удалены — :where(a):visited в common.css имеет spec (0,0,1),
любой класс с color побеждает без дополнительных :visited селекторов */
.c-chip:hover {
background: var(--accent-dark);
}
.c-chip--reset {
background: none;
color: var(--text-muted);
border: 1px solid var(--border);
}
.c-chip--reset:hover {
background: var(--bg);
color: var(--text);
}
/* ── Производительность (CPU filter) ─────────────────────────────────────── */
/* ВАЖНО: margin-bottom:12px был inline в шаблоне — вынесено сюда */
.c-perf__scenarios {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 12px;
}
.c-perf__pill {
display: inline-block;
padding: 5px 10px;
border-radius: 99px;
font-size: 12px;
color: var(--text);
/* M-7: #444 → var(--text) */
background: var(--bg);
/* M-7: #f0f0f5 → var(--bg) */
transition: background .15s, color .15s;
}
.c-perf__pill:hover {
background: var(--border);
}
/* M-7: #e4e4ec → var(--border) */
.c-perf__pill--active {
background: var(--accent);
color: #fff;
}
/* UX-4.1: :visited удалён */
.c-perf__pill--active:hover {
background: var(--accent-dark);
}
.c-perf__details {
margin-top: 6px;
}
.c-perf__more {
font-size: 12px;
color: var(--accent);
cursor: pointer;
list-style: none;
padding: 2px 0;
}
.c-perf__more::-webkit-details-marker {
display: none;
}
.c-perf__more::before {
content: '▸ ';
}
.c-perf__details[open]>.c-perf__more::before {
content: '▾ ';
}
.c-perf__refine {
padding: 6px 0;
}
/* ВАЖНО: margin-bottom вынесено из inline-стилей шаблона */
.c-perf__row {
display: flex;
gap: 4px;
margin-bottom: 8px;
}
.c-perf__row:last-child {
margin-bottom: 12px;
}
.c-perf__toggle {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 5px 8px;
border-radius: 8px;
font-size: 12px;
color: var(--text);
/* M-7 */
background: var(--bg);
/* M-7 */
border: 1px solid transparent;
/* E-10: Фикс антипаттерна transition:all — вызывал transition на width/height/padding при resize */
transition: background .15s, color .15s, border-color .15s;
}
.c-perf__toggle:hover {
border-color: var(--accent);
}
.c-perf__toggle--active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
/* UX-4.1: :visited удалён */
/* Ядра/частота: дискретные кнопки-ссылки вместо слайдеров */
.c-perf__sublabel {
display: block;
font-size: 11px;
color: var(--text-muted);
margin: 8px 0 3px;
}
.c-perf__btn-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 10px;
}
.c-perf__btn {
padding: 5px 10px;
border-radius: 8px;
font-size: 12px;
color: var(--text);
background: var(--bg);
border: 1px solid var(--border);
transition: background .15s, color .15s, border-color .15s;
}
.c-perf__btn:hover {
border-color: var(--accent);
}
.c-perf__btn--active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.c-perf__btn--active:hover {
background: var(--accent-dark);
border-color: var(--accent-dark);
}
/* ВАЖНО: стили .c-sidebar__pills / .c-pill выпилены вместе с bucket-логикой
storage_total — теперь объём идёт обычным multi-фасетом (.c-sort-opt). */
/* ── Price Range Form ────────────────────────────────────────────────────── */
.c-price-range {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 16px;
}
.c-price-range input {
flex: 1;
min-width: 0;
padding: 6px 10px;
font-size: 13px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--card);
/* M-7: #fff → var(--card) */
color: var(--text);
outline: none;
}
.c-price-range input:focus {
border-color: var(--accent);
}
.c-price-range span {
color: var(--text-muted);
font-size: 13px;
}
.c-price-range button {
padding: 6px 14px;
font-size: 13px;
font-weight: 600;
background: var(--accent);
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background .15s;
}
.c-price-range button:hover {
background: var(--accent-dark);
}
/* ── Layout: sidebar + main ───────────────────────────────────────────────── */
.c-layout {
display: block;
max-width: var(--container-wide);
/* H-1: 1440px → переменная */
margin: 0 auto;
}
/* Sidebar скрыт на мобиле */
.c-sidebar {
display: none;
}
.c-main {
padding: 0 0 80px;
}
/* 80px = высота bottom-nav */
/* ── Section Title ─────────────────────────────────────────────────────────── */
.c-main__title {
font-size: 20px;
font-weight: 700;
padding: 10px 12px 0;
}
/* MOB-3: на мобиле h1 скрыт — название раздела уже в хедере (MOB-2).
Элемент остаётся в DOM для SEO ( нужен поисковикам).
На десктопе (≥768px) показывается как обычно — хедер там без title. */
@media (max-width: 767px) {
.c-main__title {
/* ВАЖНО: НЕ display:none — поисковики могут игнорировать скрытый h1.
clip-rect — визуально скрыт, но в DOM и accessible tree. */
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
/* ── Toolbar ───────────────────────────────────────────────────────────────── */
.c-toolbar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 10px 12px 6px;
}
/* UX-AUDIT CAT-3.1: счётчик 13px + semi-bold.
Пользователь глазами ищет "сколько тут товаров" — 12px muted слишком тихий */
.c-toolbar__count {
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
/* M-7 */
white-space: nowrap;
}
.c-toolbar__controls {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
.c-sort select {
font-size: 13px;
padding: 5px 8px;
border: 1px solid var(--border);
/* M-7: #ddd → var(--border) */
border-radius: 8px;
background: var(--card);
/* M-7: #fff → var(--card) */
color: var(--text);
/* M-7: #333 → var(--text) */
appearance: auto;
}
/* MOB-3: фильтр-кнопка с accent-тинтом — выделяется как primary action.
Пользователь глазами ищет "как фильтровать" — нейтральная кнопка теряется в toolbar. */
.c-filter-btn {
display: flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 500;
padding: 6px 12px;
border: 1px solid rgba(var(--accent-rgb), .2);
border-radius: 8px;
background: rgba(var(--accent-rgb), .08);
color: var(--accent);
transition: background .15s, border-color .15s;
}
.c-filter-btn:hover {
background: rgba(var(--accent-rgb), .14);
border-color: rgba(var(--accent-rgb), .3);
}
.c-filter-btn .material-symbols-rounded {
font-size: 18px;
/* MOB-3: иконка наследует color от .c-filter-btn (var(--accent)) — отдельный color не нужен */
}
/* ── Sort Arrows (↑↓ цена) ────────────────────────────────────────────────── */
.c-sort-arrows {
display: flex;
gap: 2px;
background: var(--bg);
/* M-7: #f0f0f5 → var(--bg) */
border-radius: 8px;
padding: 2px;
}
/* ── View Mode Switcher ───────────────────────────────────────────────────── */
.c-view-modes {
display: flex;
gap: 2px;
background: var(--bg);
/* M-7: #f0f0f5 → var(--bg) */
border-radius: 8px;
padding: 2px;
}
.c-view-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
/* UX-6.2: 32→44px WCAG 2.2 min touch target */
height: 44px;
/* UX-6.2: 28→44px */
border-radius: 6px;
color: var(--text-muted);
/* M-7: #999 → var(--text-muted) */
transition: background .15s, color .15s;
}
.c-view-btn:hover {
color: var(--text);
}
/* M-7: #555 → var(--text) */
.c-view-btn--active {
background: var(--card);
/* M-7: #fff → var(--card) */
color: var(--accent);
box-shadow: 0 1px 3px rgba(var(--accent-rgb), .2);
}
.c-view-btn .material-symbols-rounded {
font-size: 18px;
}
/* ── Product Grid ──────────────────────────────────────────────────────────── */
/* H-3: auto-fill вместо фиксированных колонок — адаптируется к любому viewport.
minmax(200px, 1fr): на 390px → 1 колонка, на 600px → 2-3, на 960px → 4, на 1440px → 6.
ВАЖНО: media query переопределения grid-template-columns для .c-grid убраны ниже
(кроме .c-grid--list и .c-grid--legacy-price которые остаются 1fr). */
/* AJAX-фильтры: приглушение сетки на время загрузки */
.c-grid--loading {
opacity: .35;
pointer-events: none;
transition: opacity .15s ease-out;
}
.c-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
gap: 10px;
padding: 4px 10px 16px;
}
/* ВАЖНО: принудительно 2 колонки на маленьких телефонах (≤479px).
На 360px auto-fill minmax(180px) даёт 1 колонку — слишком мало.
Режимы list/legacy_price переопределяют обратно в 1fr ниже по коду. */
@media (max-width: 479px) {
.c-grid {
/* MOB-1: minmax(0,1fr) вместо 1fr — разрешаем колонкам сжиматься до 0.
1fr = minmax(auto,1fr) — auto запрещает сжатие меньше контента → overflow.
minmax(0,1fr) — колонки делят пространство поровну БЕЗ минимума. */
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* MOB-1: grid items (
) — min-width:0 запрещает раздувание шире 1fr.
По умолчанию grid item имеет min-width:auto → длинный контент распирает ячейку.
ВАЖНО: .pc уже имеет min-width:0 (строка 431), но -обёртка — нет. */
.c-grid>li {
min-width: 0;
}
/* ── Product Card (pc) ─────────────────────────────────────────────────────── */
.pc {
display: flex;
flex-direction: column;
/* ВАЖНО: достаточно тёмный серый — иначе multiply не даёт видимого эффекта.
Белый(255)×#e4e4e9(228)=228/255≈0.89 → заметно серый вместо белого.
ВАЖНО: var(--card-muted)=#e4e4e9d6 — специально для blend-mode эффекта карточки. */
background: var(--card-muted);
/* M-7 */
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
transition: transform .18s, box-shadow .18s;
position: relative;
/* для ::before shimmer — покрывает зону фото */
min-height: -webkit-fill-available;
/* ВАЖНО: min-width:0 — дочерний элемент grid не распирает карточку за 1fr.
Без этого длинное слово/изображение в pc__name может выйти за край экрана. */
min-width: 0;
}
.pc:active {
transform: scale(0.98);
}
/* 1.1 Hover: translateY — Stripe-стиль "приподнимания", только для устройств с мышью */
@media (hover: hover) {
.pc:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}
/* Карточки без фото: + лёгкий accent-tint на hover.
ВАЖНО: для фото-карточек tint не нужен (фото само даёт фокус). Здесь — компенсация
"мертвого" вида серой заглушки. Ладдер тот же что в pricelist (.10), но через :has()
применяем только к nophoto/broken. */
.pc:has(.pc__img--nophoto):hover,
.pc:has(.pc__img--broken):hover {
background: rgba(var(--accent-rgb), .10);
}
}
/* Shimmer: ::before покрывает зону фото пока img грузится.
ВАЖНО: shimmer на отдельном псевдо-элементе, НЕ на background самого img —
иначе прогрессивная загрузка фото «сползает» поверх волны сверху вниз.
img стартует с opacity:0, по .loaded плавно проявляется (transition). */
.pc::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
aspect-ratio: 4 / 5;
background: linear-gradient(90deg, var(--border) 25%, var(--card) 50%, var(--border) 75%);
background-size: 200% 100%;
animation: shimmer 1.4s infinite;
pointer-events: none;
}
/* Картинка: aspect-ratio 4:5, multiply blend.
ВАЖНО: background на img НЕ задаём — браузер видит сквозь img фон карточки (.pc).
mix-blend-mode:multiply: белый(255) × серый(228) = серый → белый фон фото сливается с карточкой. */
.pc__img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: contain;
mix-blend-mode: var(--blend-img);
/* ВАЖНО: normal в dark mode — multiply×тёмный фон = чернота */
}
/* Фото скрыто пока грузится → fade-in через opacity при .loaded */
img.pc__img {
position: relative;
/* поверх ::before shimmer */
opacity: 0;
transition: opacity .35s ease;
}
/* Когда картинка загружена — плавно проявляем */
img.pc__img.loaded,
img.pc__img[data-loaded] {
opacity: 1;
}
/* ВАЖНО: ::before shimmer убираем при .loaded — иначе mix-blend-mode:multiply
делает белые области фото прозрачными и волна просвечивает сквозь них.
display:none мгновенно, img fade-in идёт уже поверх чистого фона карточки. */
.pc:has(img.loaded)::before,
.pc:has(.pc__img--nophoto)::before,
.pc:has(.pc__img--broken)::before {
display: none;
}
/* ВАЖНО: color:transparent скрывает alt-текст и иконку битой картинки.
Без этого браузер рендерит alt внутрь img-контейнера на весь 4:3 блок. */
.pc__img {
color: transparent;
}
/* Заглушка: нет фото в БД или битая ссылка (JS добавляет --broken через onerror) */
.pc__img--nophoto,
.pc__img--broken {
display: flex;
align-items: center;
justify-content: center;
background: var(--border);
/* M-7: #e4e4e9 → var(--border) */
color: var(--text-muted);
/* M-7: #bbb → var(--text-muted) */
}
.pc__img--nophoto .material-symbols-rounded,
.pc__img--broken .material-symbols-rounded {
font-size: 40px;
}
/* Инфо-блок: бренд → название → цена (WB/Ozon/DNS паттерн — цена внизу) */
/* UX-AUDIT CAT-1.1: бренд = trust signal, увеличиваем до 12px.
11px нечитаем на ретине. letter-spacing 0.3 менее крикливый чем 0.5 */
.pc__brand {
display: block;
font-size: 12px;
color: var(--text-muted);
/* M-7: #bbb → var(--text-muted) */
padding: 8px 10px 2px;
text-transform: uppercase;
letter-spacing: 0.3px;
font-weight: 600;
}
/* UX-AUDIT CAT-1.3: padding-bottom 10px (было 20px) — меньше "воздуха" между
названием и ценой. 20px создавало ощущение разрыва. Цена должна "прилипать" к названию */
.pc__name {
flex: 1;
/* прижимает цену к низу карточки */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 13px;
/* UX-1.6: 12→13px — 12px нечитаемо на 27" */
color: var(--text);
/* M-7: #333 → var(--text) */
padding: 3px 10px 10px;
line-height: 1.45;
}
/* UX-AUDIT CAT-1.2: цена = #1 элемент сканирования (F-паттерн).
18px выделяет цену на фоне названия (13px). Amazon/Ozon используют 18-20px в grid */
/* UX-AUDIT BUG-5: white-space:nowrap — пробел в "42 426" является точкой переноса.
Без nowrap при 18px bold цена рвётся на несколько строк в карточке ~191px */
.pc__price {
display: block;
font-size: 18px;
font-weight: 700;
padding: 0 10px 10px;
color: var(--price-color);
/* UX-1.1: var(--text)→var(--price-color) — цена = самый сканируемый элемент (F-паттерн) */
letter-spacing: -0.3px;
white-space: nowrap;
}
/* Grid: цена + корзина в одну строку внизу карточки */
.pc__bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px 10px;
gap: 6px;
}
/* FIX BUG-1: min-width:0 + flex-shrink:1 — цена сжимается, кнопка не обрезается.
На 180px карточке "от 20 238 сом" при 18px ≈ 103px + 76px кнопка = 179px > 160px (usable).
font-size:15px даёт ~87px → 87+6+76=169px — почти впритык, min-width:0 добивает остаток.
overflow:hidden — на случай совсем длинной цены (без ellipsis, цифры не обрываются). */
.pc__bottom .pc__price {
padding: 0;
min-width: 0;
flex-shrink: 1;
font-size: 15px;
overflow: hidden;
}
/* Qty-контрол внутри grid-карточки — та же ширина что cart-btn */
/* FIX BUG-1: flex-shrink:0 — контрол фиксированный, цена сжимается (не кнопка).
ВАЖНО: без этого при flex-shrink:1 на обоих элементах кнопка тоже сжимается → нечитаемо. */
.pc__bottom .pc__qty-ctrl {
height: 30px;
width: 76px;
flex-shrink: 0;
}
.pc__bottom .pc__qty-btn {
width: 26px;
height: 30px;
}
/* FIX BUG-1: cart-btn тоже не сжимается — фиксированная зона нажатия */
.pc__bottom .pc__cart-btn {
flex-shrink: 0;
}
.pc__price small {
font-size: 11px;
font-weight: 400;
color: var(--text-muted);
/* M-7: #888 → var(--text-muted) */
}
.pc__price--rq {
font-size: 12px;
font-weight: 500;
color: var(--text-muted);
/* M-7: #aaa → var(--text-muted) */
}
/* Доллары скрыты в grid/list (видны только в legacy_price) */
.pc__price-dol {
display: none;
}
/* Кнопка корзины — фиксированная ширина = qty-ctrl, круг по центру */
.pc__cart-btn {
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 30px;
background: none;
border: none;
padding: 0;
flex-shrink: 0;
cursor: pointer;
position: relative;
/* UX-6.2: для ::before tap area */
}
/* UX-6.2: расширяем tap-zone до 44px без визуального изменения.
ВАЖНО: только на мобиле (hover:none) — на десктопе кнопка расширена текстом */
@media (hover: none) {
.pc__cart-btn::before {
content: '';
position: absolute;
inset: -7px;
/* 30px + 14px = 44px */
}
}
/* Фикс: grid + place-items точнее центрирует font-icon в круге (vs flex + 3 свойства) */
/* AUDIT-SECT-1: overflow:hidden клипирует глиф; line-height:1 убирает зазор render-box;
14px/30px = 46.7% — оптимальный breathing room для иконки в круге */
.pc__cart-btn .material-symbols-rounded {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
line-height: 1;
background: var(--accent);
color: var(--on-color);
font-size: 14px;
transition: transform .15s, background .3s;
}
.pc__cart-btn:active .material-symbols-rounded {
transform: scale(.85);
}
/* 1.2 Hover на кнопке корзины — accent-dark + scale */
@media (hover: hover) {
.pc__cart-btn:hover .material-symbols-rounded {
background: var(--accent-dark);
transform: scale(1.1);
}
}
/* УНИФИКАЦИЯ: текст «В корзину» убран — иконка shopping_cart универсально понятна.
Причина: pill-кнопка (~120px) давила на 5-значные цены в карточках ~190px.
Теперь везде единый 30px круг в 76px контейнере (= ширина qty-ctrl, без layout shift). */
/* UX-AUDIT CAT-8.1: 200ms вместо 300ms — быстрее = воспринимается как мгновенное.
translateY(4px) вместо 8px — меньше дёрганья при скролле */
@keyframes pc-fadein {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: none;
}
}
.pc--appear {
animation: pc-fadein .2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* ── View Mode: LIST (строки с фото) ─────────────────────────────────────── */
/* UX-AUDIT BUG-2: заголовок таблицы для list view */
.c-grid--list-header {
display: none;
/* по умолчанию скрыт (grid mode) */
}
.c-grid--list {
grid-template-columns: 1fr;
gap: 0;
/* MOB-1: edge-to-edge — паддинги перенесены на .pc */
padding: 0 0 16px;
}
/* UX-AUDIT CAT-6.2: одна строка на мобиле после удаления бренда.
Компактнее = больше товаров видно без прокрутки */
.c-grid--list .pc {
display: grid;
grid-template-columns: 56px 1fr auto;
grid-template-rows: auto;
align-items: center;
border-radius: 0;
/* MOB-1: edge-to-edge — без скруглений, border на всю ширину */
box-shadow: none;
background: transparent;
border-bottom: 1px solid var(--border);
padding: 8px 12px;
/* MOB-1: 12px = отступ контента от края (было 10+10=20 через grid+card) */
column-gap: 10px;
}
.c-grid--list .pc__img {
grid-row: 1;
grid-column: 1;
width: 56px;
height: 56px;
aspect-ratio: 1;
border-radius: 8px;
mix-blend-mode: var(--blend-img);
/* dark mode fix */
object-fit: contain;
}
/* List mode: shimmer ::before в ту же grid-ячейку что и img (overlap) */
.c-grid--list .pc::before {
position: static;
grid-row: 1;
grid-column: 1;
width: 56px;
height: 56px;
aspect-ratio: 1;
border-radius: 8px;
}
.c-grid--list .pc__img--nophoto,
.c-grid--list .pc__img--broken {
width: 56px;
height: 56px;
}
.c-grid--list .pc__img--nophoto .material-symbols-rounded,
.c-grid--list .pc__img--broken .material-symbols-rounded {
font-size: 24px;
}
/* Бренд под фото */
/* UX-AUDIT CAT-6.1: бренд 9px нечитаем и занимает row.
Скрываем на мобиле — бренд виден в названии или на карточке товара */
.c-grid--list .pc__brand {
display: none;
}
/* Название — справа от фото, ТОЛЬКО колонка 2 */
/* FIX BUG-2: grid-column: 2 (было: 2 / -1).
ВАЖНО: 2 / -1 = span до конца (колонки 2 И 3) → перекрывало pc__bottom (col 3, row 1).
overflow:hidden — текст не вытекает визуально за границу колонки 2 (1fr). */
.c-grid--list .pc__name {
grid-row: 1;
grid-column: 2;
padding: 0;
font-size: 13px;
-webkit-line-clamp: unset;
display: block;
white-space: normal;
overflow: hidden;
align-self: center;
}
/* UX-AUDIT CAT-6.2: bottom в одной строке с названием */
.c-grid--list .pc__bottom {
grid-row: 1;
grid-column: 3;
justify-self: end;
padding: 0;
}
.c-grid--list .pc__bottom .pc__price {
font-size: 14px;
font-weight: 700;
}
.c-grid--list .pc__bottom .pc__qty-ctrl {
height: 28px;
width: 76px;
}
.c-grid--list .pc__bottom .pc__qty-btn {
width: 24px;
height: 28px;
}
.c-grid--list .pc__bottom .pc__cart-btn {
height: 40px;
}
.c-grid--list .pc__bottom .pc__cart-btn .material-symbols-rounded {
width: 28px;
height: 28px;
font-size: 15px;
}
/* ── Skeleton: SSR-плейсхолдеры пока JS грузит /api/pricelist ──
* ВАЖНО: ту же высоту что .c-grid--legacy-price .pc (edge-to-edge, 13-14px текст),
* чтобы при подмене на реальные данные не было layout shift / jump. */
.c-skeleton {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.c-skeleton__line {
height: 14px;
background: var(--border);
border-radius: 4px;
animation: c-skeleton-pulse 1.4s ease-in-out infinite;
}
.c-skeleton__line--name { width: 70%; }
.c-skeleton__line--price { width: 70px; height: 16px; }
@keyframes c-skeleton-pulse {
0%, 100% { opacity: .5; }
50% { opacity: .9; }
}
/* ── View Mode: LEGACY_PRICE (таблица без фото, данные из link_pricelist) ─── */
.c-grid--legacy-price {
grid-template-columns: 1fr;
gap: 0;
/* MOB-1: edge-to-edge — паддинги перенесены на .pc */
padding: 0 0 16px;
}
.c-grid--legacy-price .pc {
display: grid;
grid-template-columns: auto auto 1fr;
grid-template-rows: auto auto;
align-items: center;
column-gap: 8px;
row-gap: 4px;
border-radius: 0;
/* MOB-1: edge-to-edge */
box-shadow: none;
background: transparent;
border-bottom: 1px solid var(--border);
padding: 8px 12px;
/* MOB-1: 12px = отступ контента от края */
}
/* Legacy_price: нет фото → shimmer ::before не нужен */
.c-grid--legacy-price .pc::before {
display: none;
}
/* Скрываем фото и бренд */
.c-grid--legacy-price .pc__img,
.c-grid--legacy-price .pc__brand {
display: none;
}
/* Строка 1: название на всю ширину */
/* ВАЖНО: в режиме legacy_price название НЕ обрезаем (откат BUG-4 clamp:2).
Прайс-данные содержат конфигурации/артикулы — обрезка скрывала полезное.
overflow-wrap:anywhere — страховка от длинных артикулов без пробелов (не ломают grid). */
.c-grid--legacy-price .pc__name {
grid-column: 1 / -1;
grid-row: 1;
padding: 0;
font-size: 13px;
line-height: 1.4;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Строка 2: цена сом | цена $ | кнопка (справа) */
.c-grid--legacy-price .pc__price {
grid-row: 2;
grid-column: 1;
padding: 0;
white-space: nowrap;
font-size: 14px;
font-weight: 700;
}
.c-grid--legacy-price .pc__price-dol {
grid-row: 2;
grid-column: 2;
display: block;
font-size: 12px;
color: var(--text-muted);
white-space: nowrap;
padding: 0;
}
/* UX-AUDIT FIX-4: Mobile legacy_price — фиксируем 3-ю колонку для cart/qty */
.c-grid--legacy-price .pc__cart-btn,
.c-grid--legacy-price .pc__qty-ctrl {
grid-row: 2;
grid-column: 3;
justify-self: end;
width: 76px;
/* фиксированная ширина = без пляски */
}
/* Legacy_price: cart-btn и qty-ctrl высота 28px */
.c-grid--legacy-price .pc__cart-btn {
height: 28px;
display: flex;
justify-content: center;
}
.c-grid--legacy-price .pc__cart-btn .material-symbols-rounded {
width: 28px;
height: 28px;
font-size: 15px;
}
/* ── Affordance: disclosure indicator для кликабельных строк legacy_price ── */
/* Товары с desc_id → , без → . Шеврон + фон = "есть карточка". */
/* Лёгкий постоянный accent-фон ДЛЯ ВСЕХ строк прайса — и кликабельных (a), и нет (span).
Transition: bg .3s ease-out (плавный fade) + transform/shadow .15s (для lift на a:hover ниже). */
.c-grid--legacy-price .pc {
background: rgba(var(--accent-rgb), .03);
transition: background .3s ease-out, transform .15s ease-out, box-shadow .15s ease-out;
}
/* CSS-шеврон: absolute, вертикально по центру строки.
right:4px сидит внутри padding(12px) строки — не залезает на контент */
.c-grid--legacy-price a.pc::after {
content: '';
position: absolute;
right: 14px;
top: 50%;
width: 6px;
height: 6px;
border-right: 1.5px solid var(--text-muted);
border-top: 1.5px solid var(--text-muted);
transform: translateY(-50%) rotate(45deg);
opacity: .4;
transition: opacity .18s, border-color .18s;
}
/* Подавляем базовый .pc:hover (translateY -4px) и :active scale для ВСЕХ .pc в прайсе.
Кастомный hover (см. ниже) переопределяет только для a.pc — span остаётся плоским. */
.c-grid--legacy-price .pc:hover,
.c-grid--legacy-price .pc:active {
transform: none;
box-shadow: none;
}
/* Tap feedback */
.c-grid--legacy-price a.pc:active {
background: rgba(var(--accent-rgb), .10);
}
/* Desktop hover: для кликабельных — фон + lift -1px + лёгкая тень + accent шеврон.
Для span (некликабельный) — только фон-tint без lift (нет affordance клика).
ВАЖНО: hover только на (hover:hover) — на тач-устройствах :hover триггерит тап и строка зависает. */
@media (hover: hover) {
.c-grid--legacy-price a.pc:hover {
background: rgba(var(--accent-rgb), .10);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.c-grid--legacy-price a.pc:hover::after {
opacity: .8;
border-color: var(--accent);
}
.c-grid--legacy-price span.pc:hover {
background: rgba(var(--accent-rgb), .07);
}
}
/* Fade out корзинки при добавлении */
.pc__cart-btn--out {
pointer-events: none;
}
.pc__cart-btn--out .material-symbols-rounded {
animation: fade-out .25s ease forwards;
}
@keyframes fade-out {
to {
opacity: 0;
transform: scale(.5);
}
}
/* Qty-контрол inline (legacy_price) */
.pc__qty-ctrl {
display: flex;
align-items: center;
gap: 0;
flex-shrink: 0;
width: 76px;
border-radius: 99px;
background: var(--success);
overflow: hidden;
animation: qty-appear .3s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes qty-appear {
0% {
transform: scale(.5);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.pc__qty-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
background: transparent;
color: #fff;
font-size: 14px;
font-weight: 700;
font-family: system-ui, sans-serif;
line-height: 1;
cursor: pointer;
transition: background .15s;
padding: 0;
}
.pc__qty-btn:hover {
background: rgba(255, 255, 255, .15);
}
.pc__qty-btn:active {
background: rgba(255, 255, 255, .25);
}
.pc__qty-val {
min-width: 20px;
text-align: center;
font-size: 12px;
font-weight: 700;
color: #fff;
}
/* ── Sections Grid (catalog index) ─────────────────────────────────────────── */
.c-sections {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 10px;
max-width: var(--container-wide);
/* H-1: 1440px → переменная */
margin: 0 auto;
padding-bottom: 90px;
}
.c-sect-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 88px;
background: var(--card);
/* M-7: #fff → var(--card) */
border-radius: 12px;
padding: 14px 12px;
text-align: center;
transition: transform .18s, box-shadow .18s;
}
.c-sect-card:active {
transform: scale(0.97);
}
@media (hover: hover) {
.c-sect-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
}
}
/* UX-AUDIT CAT-5.2: иконки 32px — визуально "дышат" в карточке 100px.
28px терялись, особенно с 13px текстом рядом */
.c-sect-card__icon {
font-size: 32px;
color: var(--accent);
display: block;
}
.c-sect-card__title {
font-size: 13px;
font-weight: 600;
color: var(--text);
/* M-7: #222 → var(--text) */
line-height: 1.3;
}
/* ── Pagination ───────────────────────────────────────────────────────────── */
.c-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 16px 10px;
flex-wrap: wrap;
}
/* ВАЖНО: фиксированный размер — одинаковый во всех режимах (grid/list/legacy_price) */
.c-pager__btn {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 8px;
border-radius: 8px;
font-size: 14px;
color: var(--text);
/* M-7: #444 → var(--text) */
background: var(--card);
/* M-7: #fff → var(--card) */
border: 1px solid var(--border);
/* M-7: #e0e0e8 → var(--border) */
transition: background .15s;
}
/* AUDIT-3.5: 44px touch target на мобиле — Apple HIG / WCAG 2.2 */
@media (max-width: 768px) {
.c-pager__btn {
min-width: 44px;
height: 44px;
}
}
.c-pager__btn:hover {
background: var(--bg);
/* M-7: #f0f0f5 → var(--bg) */
}
/* UX-4.1: :visited удалён — :where(a):visited в common.css имеет spec (0,0,1) */
.c-pager__btn--active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
font-weight: 600;
}
.c-pager__gap {
font-size: 14px;
color: var(--text-muted);
/* M-7: #aaa → var(--text-muted) */
padding: 0 4px;
}
/* ── Filter Drawer (mobile) ──────────────────────────────────────────────── */
.c-filter-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .4);
z-index: var(--z-filter-overlay);
}
.c-filter-overlay.open {
display: block;
}
.c-filter-drawer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--card);
/* M-7: #fff → var(--card) */
border-radius: 16px 16px 0 0;
z-index: var(--z-filter-drawer);
transform: translateY(100%);
transition: transform .25s cubic-bezier(.4, 0, .2, 1);
max-height: 80vh;
overflow-y: auto;
}
.c-filter-drawer.open {
transform: translateY(0);
}
.c-filter-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
font-size: 16px;
font-weight: 600;
border-bottom: 1px solid var(--border);
/* M-7: #f0f0f5 → var(--border) */
}
.c-filter-drawer__head button {
font-size: 18px;
color: var(--text-muted);
/* M-7: #888 → var(--text-muted) */
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.c-filter-drawer__head button:hover {
background: var(--bg);
/* M-7: #f5f5fa → var(--bg) */
}
/* Заголовок дровера — ссылка на /s/ */
.c-filter-drawer__title-link {
color: inherit;
text-decoration: none;
}
.c-filter-drawer__title-link:hover {
color: var(--accent);
/* M-7: #4387fd → var(--accent) */
}
/* Заголовок секции внутри дровера */
.c-filter-drawer__label {
font-size: 15px;
font-weight: 600;
margin: 0 0 10px;
}
/* Сортировка в дровере фильтров */
.c-sort-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
/* ВАЖНО: единый pill-стиль с .c-pill (один visual language для всех фасетов).
Outline accent → full accent (active). Outline явно отличает пилы (action)
от заголовков раздела summary (text-цвет). */
.c-sort-opt {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 34px;
padding: 0 12px;
border: 1px solid rgba(var(--accent-rgb), .25);
border-radius: 999px;
background: var(--bg);
color: var(--accent);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
transition: background .15s, color .15s, border-color .15s;
}
.c-sort-opt small {
color: rgba(var(--accent-rgb), .55);
font-weight: 400;
}
/* UX-4.2: .c-sort-opt[hidden] удалён — глобальный [hidden]{display:none!important} в common.css */
.c-sort-opt:not(.c-sort-opt--active):hover {
border-color: var(--accent);
background: rgba(var(--accent-rgb), .06);
}
/* UX-4.1: :visited удалён — :where(a):visited в common.css имеет spec (0,0,1) */
.c-sort-opt--active {
background: var(--accent);
border-color: var(--accent);
color: var(--on-color);
}
.c-sort-opt--active small {
color: rgba(var(--on-color-rgb), .7);
}
/* "Ещё N" кнопка в фильтрах — тот же pill-силуэт, но dashed border = «expand more» */
.c-sort-opt--more {
color: var(--accent);
background: none;
border-style: dashed;
}
.c-sort-opt--more:hover {
border-color: var(--accent);
color: var(--accent);
}
/* ВАЖНО: padding-bottom учитывает bottom-nav (56px) чтобы контент не прятался */
.c-filter-drawer__body {
padding: 16px 20px 72px;
}
/* ── Empty state ──────────────────────────────────────────────────────────── */
/* ВАЖНО: grid-column: 1 / -1 — растягивает на все колонки сетки (2, 3, 4, 5) */
.c-empty {
grid-column: 1 / -1;
display: grid;
justify-items: center;
gap: 10px;
padding: 48px 20px 72px;
text-align: center;
list-style: none;
}
.c-empty__icon {
font-size: 40px;
color: var(--text-muted);
}
.c-empty__title {
font-size: 20px;
line-height: 1.2;
font-weight: 700;
}
.c-empty__text {
max-width: 320px;
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
}
.c-empty__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 8px;
}
.c-empty__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 16px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--card);
color: var(--text);
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.c-empty__btn--primary {
max-width: 230px;
background: var(--accent);
border-color: var(--accent);
color: var(--on-color);
}
/* Full-width вариант: переносится на новую строку (flex-basis:100% + margin-top для воздуха).
Используется для primary-CTA в empty-state — выделяется снизу как «итоговое решение». */
.c-empty__btn--full {
flex-basis: 100%;
margin-top: 8px;
}
/* bottom-nav, nav-item, nav-label → common.css */
/* .ctree стили → перенесены в common.css (дерево используется в drawer на всех страницах) */
/* UX-3.4: @keyframes shimmer перенесён в common.css.
ВАЖНО: удалён из catalog.css — используем единый keyframe из common.css */
/* ── Tablet: gap / padding уточнение ─────────────────────────────────────── */
/* H-3: grid-template-columns убран — auto-fill справляется сам.
Оставляем только gap/padding для улучшения плотности на планшете. */
@media (min-width: 600px) {
.c-grid {
gap: 12px;
padding: 4px 12px 16px;
}
.c-sections {
grid-template-columns: repeat(3, 1fr);
}
.c-sect-card {
min-height: 90px;
}
}
/* ── Desktop: sidebar + 4-5 columns ──────────────────────────────────────── */
@media (min-width: 960px) {
/* UX-1.6: 14px на десктопе — на 27" 13px ещё мелковат */
.pc__name {
font-size: 14px;
}
.c-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 0;
padding: 0 16px;
}
/* Крошки вынесены в _header.php, вне c-layout */
.c-main {
padding-bottom: 32px;
}
/* На ПК фильтры в sidebar — кнопка «Фильтры» в toolbar не нужна */
.c-filter-btn {
display: none;
}
/* Сайдбар: без sticky — расширяем страницу вместо внутреннего скролла.
ВАЖНО: фильтры всегда видны полностью, не прячутся за viewport. */
.c-sidebar {
display: block;
padding: 16px 16px 32px 0;
border-right: 1px solid var(--border);
align-self: start;
}
/* Стрелка разделов: на ПК без круга/тени, просто фиолетовая когда развёрнуто */
.c-sidebar .ctree__tog {
width: 24px;
height: 24px;
background: none;
box-shadow: none;
}
.c-sidebar .ctree__tog:hover {
background: none;
color: var(--accent);
}
.c-sidebar .ctree__item--has-ch.open>.ctree__row>.ctree__tog {
background: none;
box-shadow: none;
color: var(--accent);
}
/* Фикс: контейнер фильтров в сайдбаре (catalog.php:124) */
.c-sidebar__filters {
margin-top: 4px;
transition: opacity .15s ease;
}
/* Sidebar filter groups — аккордеоны */
.c-sidebar__group {
border-bottom: 1px solid var(--border);
padding: 10px 0;
/* UX-A:3.2 — было: 8px 0, больше воздуха между группами */
}
.c-sidebar__group summary {
font-size: 14px;
/* UX-A:3.2 — было: 13px, заголовки фильтров крупнее */
font-weight: 600;
color: var(--text);
cursor: pointer;
padding: 6px 0;
/* UX-A:3.2 — было: 4px 0 */
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.c-sidebar__group summary::after {
content: '›';
font-size: 14px;
color: var(--text-muted);
transition: transform .2s;
}
.c-sidebar__group[open] summary::after {
transform: rotate(90deg);
color: var(--accent);
}
.c-sidebar__group summary::-webkit-details-marker {
display: none;
}
/* Разделы: анимация collapse/expand (JS управляет max-height) */
#sections-group .ctree {
transition: max-height .3s ease-out, opacity .2s ease;
}
/* Свёрнутые разделы: accent-подсветка summary = визуальный hint "разверни меня" */
#sections-group:not([open]) summary {
color: var(--accent);
}
#sections-group summary {
transition: color .2s;
}
.c-sidebar__opts {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 6px 0 2px;
}
/* [4.1] Фикс: 11px → 13px → 14px, e-commerce стандарт 2026: min 14px, min 8px padding (UX-A:3.1). */
.c-sidebar__opts .c-sort-opt {
font-size: 14px;
padding: 8px 14px;
min-height: auto;
}
.c-sidebar__opts .c-sort-opt--more {
font-size: 14px;
padding: 8px 14px;
color: var(--accent);
background: none;
border: 1px dashed var(--border);
}
.c-sidebar .c-price-range {
padding: 6px 0 2px;
}
.c-sidebar .c-price-range input {
font-size: 13px;
padding: 6px 10px;
}
/* UX-A:3.3 — было: 12px/4px/8px, выглядит как disabled */
.c-sidebar__title {
font-size: 13px;
/* UX-A:3.4 — было: 12px */
font-weight: 600;
color: var(--text-muted);
/* M-7: #aaa → var(--text-muted) */
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 10px;
/* UX-A:3.4 — было: 8px */
}
/* Каталог индекс */
.c-sections {
grid-template-columns: repeat(5, 1fr);
padding: 16px;
}
/* UX-AUDIT CAT-5.1: карточки категорий крупнее на десктопе.
88px слишком мелкие на 27" мониторе */
.c-sect-card {
min-height: 100px;
}
/* UX-AUDIT CAT-2.2: gap 12px — 16px слишком разреженно на десктопе.
Пользователь хочет видеть больше товаров "за экран" */
.c-grid {
gap: 12px;
padding: 8px 16px 24px;
}
/* UX-AUDIT BUG-2: заголовок list-таблицы на десктопе.
ВАЖНО: показываем только в list-режиме (fix flash при F5 в legacy_price — раньше
JS скрывал инлайн-стилем после DOMContentLoaded, CSS в media успевал показать).
Атрибут data-catalog-view ставится inline-скриптом в до рендера. */
html[data-catalog-view="list"] .c-grid--list-header {
display: grid;
grid-template-columns: 48px 1fr auto;
column-gap: 12px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--border);
}
/* List: на десктопе — одна строка: фото | название | цена + корзина */
.c-grid--list .pc {
grid-template-columns: 48px 1fr auto;
grid-template-rows: auto;
column-gap: 12px;
padding: 6px 10px;
align-items: center;
}
.c-grid--list .pc__img {
grid-row: 1;
grid-column: 1;
width: 48px;
height: 48px;
}
.c-grid--list .pc__brand {
display: none;
}
/* UX-AUDIT BUG-2: убираем nowrap — пусть название переносится в 2 строки.
ellipsis обрезал полезную информацию (конфигурации, цвета) */
.c-grid--list .pc__name {
grid-row: 1;
grid-column: 2;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.c-grid--list .pc__bottom {
grid-row: 1;
grid-column: 3;
justify-self: end;
}
/* УНИФИКАЦИЯ: list view — 30px круг (мобильный override ставит 28px, возвращаем к базе) */
/* AUDIT-SECT-1: font-size 14px совпадает с базовым кругом 30px */
.c-grid--list .pc__bottom .pc__cart-btn .material-symbols-rounded {
width: 30px;
height: 30px;
font-size: 14px;
}
/* Legacy_price: на десктопе — одна строка */
/* UX-AUDIT FIX-4: Фиксированная ширина 4-й колонки (корзина/qty).
76px = ширина pc__qty-ctrl. pc__cart-btn (28px) центрируется через justify-self.
Результат: правый край таблицы НЕ "пляшет" при добавлении в корзину. */
.c-grid--legacy-price .pc {
grid-template-columns: 1fr auto auto 76px;
grid-template-rows: auto;
padding: 6px 10px;
}
/* ВАЖНО: десктоп legacy_price — название показываем ПОЛНОСТЬЮ (без ellipsis).
Прайс содержит артикулы/конфигурации, обрезка скрывала полезное.
min-width:0 + overflow-wrap:anywhere — длинные артикулы без пробелов
переносятся, не растягивая 1fr-колонку и не ломая правые auto/76px колонки. */
.c-grid--legacy-price .pc__name {
grid-column: 1;
grid-row: 1;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
min-width: 0;
}
.c-grid--legacy-price .pc__price {
grid-column: 2;
grid-row: 1;
width: 110px;
text-align: right;
font-size: 13px;
}
.c-grid--legacy-price .pc__price small {
display: inline;
}
.c-grid--legacy-price .pc__price-dol {
grid-column: 3;
grid-row: 1;
width: 52px;
text-align: right;
}
.c-grid--legacy-price .pc__cart-btn,
.c-grid--legacy-price .pc__qty-ctrl {
grid-column: 4;
grid-row: 1;
}
/* УНИФИКАЦИЯ: legacy_price — 30px круг (мобильный override ставит 28px, возвращаем к базе).
Кнопка 76px (= база) в колонке 76px → круг центрирован flexbox-ом родителя */
/* AUDIT-SECT-1: font-size 14px совпадает с базовым кругом 30px */
.c-grid--legacy-price .pc__cart-btn {
height: 30px;
}
.c-grid--legacy-price .pc__cart-btn .material-symbols-rounded {
width: 30px;
height: 30px;
font-size: 14px;
}
/* List/legacy_price на десктопе — 1 колонка перебивает repeat(4) */
.c-grid--list,
.c-grid--legacy-price {
grid-template-columns: 1fr;
gap: 0;
}
/* UX-A:10.2 — grid-хедер вынесен в common.css (.c-header--sidebar-layout).
ВАЖНО: не хардкодить .c-header в page-specific CSS — переставленный load order сломает header */
/* E-15: Удалён дублирующий .pc:hover — оставался залипшим на iPad (>960px, тач).
ВАЖНО: каноничный hover уже есть в @media (hover: hover) на строке ~301. */
/* Фильтры: inline-панель вместо fullscreen-drawer */
.c-filter-drawer--filters {
position: static;
transform: none;
max-height: 0;
overflow: hidden;
border-radius: var(--radius);
margin: 0 16px;
background: var(--bg);
border: 1px solid var(--border);
opacity: 0;
transition: max-height .25s ease, opacity .2s ease, margin .2s ease;
}
.c-filter-drawer--filters.open {
transform: none;
max-height: 400px;
opacity: 1;
margin: 8px 16px 4px;
}
/* Шапка дровера не нужна на десктопе — кнопка ✕ есть в toolbar */
.c-filter-drawer--filters .c-filter-drawer__head {
display: none;
}
/* Сортировка горизонтально */
.c-filter-drawer--filters .c-sort-options {
flex-direction: row;
flex-wrap: wrap;
}
/* Overlay не нужен на десктопе для фильтров */
/* bottom-nav hide → common.css */
}
/* ── Wide: секции 6 колонок ──────────────────────────────────────────────── */
/* H-3: .c-grid колонки убраны — auto-fill сам даст 5-6 при minmax(180px). */
@media (min-width: 1200px) {
.c-sections {
grid-template-columns: repeat(6, 1fr);
}
}
/* Фикс P2-2.2: Удалена дублирующая декларация .c-grid--list и .c-grid--legacy-price для 1200px.
Она уже задана в @media (min-width: 960px) выше (строка ~1111).
1200px ≥ 960px → правило из 960px уже применяется. Дубликат удалён. */
/* Chat FAB, more-sheet, more-overlay → common.css */
/* ── Catalog Index SEO Copy ────────────────────────────────────────────────── */
/* Обёртка для H1 + лида на индексе каталога — единый контейнер с .c-sections.
ВАЖНО: до фикса H1 и p растягивались на всю ширину viewport и прилипали к левому краю. */
.c-index-head {
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 10px;
}
.c-index-head h1 {
margin: 16px 0 8px;
}
.c-index-seo {
margin: 0 0 16px;
padding: 0 4px;
color: var(--text-muted);
font-size: 14px;
line-height: 1.6;
}
/* ── FAQ: каждый — самостоятельная карточка-аккордеон без внешней коробки.
* [open] подсвечивает border accent-цветом, шеврон +/− анимирован.
* ВАЖНО: блок ВНЕ .c-layout — нужны свои max-width + margin auto, иначе во всю ширину окна. */
.c-faq {
max-width: var(--container-wide);
margin: 32px auto 16px;
padding: 0 12px;
}
.c-faq h2 {
margin: 0 0 12px;
font-size: 18px;
font-weight: 600;
color: var(--text);
}
.c-faq details {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
transition: border-color .15s;
}
.c-faq details + details {
margin-top: 8px;
}
.c-faq details[open] {
border-color: var(--accent);
}
.c-faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
cursor: pointer;
font-weight: 600;
font-size: 15px;
color: var(--text);
list-style: none;
user-select: none;
}
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq summary::after {
content: '+';
flex-shrink: 0;
font-weight: 400;
font-size: 22px;
line-height: 1;
color: var(--text-muted);
transition: color .2s, transform .2s;
}
.c-faq details[open] summary::after {
content: '−';
color: var(--accent);
}
.c-faq p {
margin: 0;
padding: 0 16px 16px;
line-height: 1.6;
font-size: 14px;
color: var(--text-muted);
}
/* ── Brand SEO: footer-style чипы-теги (тот же паттерн, что .home-seo-tags на главной).
* Анкор сохранён длинный («Ноутбуки Lenovo») для SEO — чипы адаптируются.
* ВАЖНО: блок ВНЕ .c-layout — нужны свои max-width + margin auto. */
.c-brands-seo {
max-width: var(--container-wide);
margin: 32px auto 16px;
padding: 0 12px;
}
.c-brands-seo h2 {
margin: 0 0 12px;
font-size: 18px;
font-weight: 600;
color: var(--text);
}
.c-brands-seo-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.c-brands-seo-tags a {
display: inline-block;
padding: 6px 14px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
color: var(--text);
font-size: 13px;
text-decoration: none;
transition: color .15s, border-color .15s, background .15s;
}
.c-brands-seo-tags a:hover {
border-color: var(--accent);
color: var(--accent);
background: rgba(var(--accent-rgb), .04);
}
}
/* @layer pages - catalog.css */