/* =============================================
   СЕТКА ТОВАРОВ
   ============================================= */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}
.products-grid > * { min-width: 0; }
/* =============================================
   КАРТОЧКА ТОВАРА
   ============================================= */
.product-card {
    background: var(--card-bg);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all .28s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 56px rgba(0,0,0,0.13);
    border-color: transparent;
}

/* ── СЛАЙДЕР ИЗОБРАЖЕНИЙ ── */
.pc-slider {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--stone-deep);
    cursor: pointer;
}

.pc-slider__link {
    display: block;
    width: 100%; height: 100%;
}

.pc-slider__img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity .3s ease, transform .6s cubic-bezier(.4,0,.2,1);
    display: block;
}
.product-card:hover .pc-slider__img { transform: scale(1.06); }

/* Плейсхолдер если нет фото */
.pc-slider__placeholder {
    display: none;
    width: 100%; height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: absolute;
    inset: 0;
}
/* Приглушаем только иконку — на подписи (реальный текст категории)
   opacity размывала контраст ниже WCAG AA (найдено Lighthouse). */
.pc-slider__placeholder svg { opacity: .6; }
.pc-slider__placeholder span {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ── БЕЙДЖИ НА ФОТО ── */
/* display:inline-flex + nowrap -- баг вёрстки, замечен владельцем 2026-09-01.
   Плашка содержит инлайн-SVG и текст, при этом абсолютно спозиционирована,
   то есть её ширина подгоняется под доступное место. На карточке шириной
   ~163px (мобильная сетка) места не хватало, и значок с текстом вставали
   В СТОЛБИК: «молния» отдельной строкой, «Берут» — под ней.
   Причина не в размере шрифта, а в отсутствии flex-контекста: у span'а
   инлайновый поток, и перенос между иконкой и словом ничем не запрещён. */
    /* 12px — нижняя граница для подписей, которые покупательница ЧИТАЕТ, а не
       просто видит (03.09.2026). Замер: на витрине 21 элемент мельче 12px, но
       почти все декоративные — подпись логотипа, эйброу секций, колонки
       подвала. Здесь другое: скидка, наличие цветов и бейджи на карточке — это
       то, по чему выбирают. Аудитория магазина — женщины 35+, и 10px на
       телефоне для них не подпись, а серое пятно.
       Декоративные подписи намеренно НЕ трогаются: они не несут информации, и
       увеличение их только съело бы место у товара. */
.pc-badge {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 20px;
    padding: 5px 11px;
    line-height: 1;
    pointer-events: none;
}
.pc-badge--sale {
    top: 12px; left: 12px;
    background: var(--primary);
    color: #fff;
    letter-spacing: .3px;
}
.pc-badge--active {
    top: 12px; right: 12px;
    background: rgba(255,255,255,.94);
    color: #1e7e34;
    backdrop-filter: blur(6px);
    font-size: 0.75rem;
}
.pc-badge--hit {
    top: 12px; right: 12px;
    background: rgba(255,255,255,.94);
    color: #7a5b07;
    backdrop-filter: blur(6px);
    font-size: 0.75rem;
}
/* Плашки-свойства (2026-09-01, mp_card_badge()). Занимают тот же правый
   верхний слот, что hit/active -- они взаимоисключающие, функция возвращает
   ровно одну. Полупрозрачная белая подложка та же: на фото модели цветная
   заливка спорила бы с одеждой, ради которой карточку и открывают. */
.pc-badge--new,
.pc-badge--size,
.pc-badge--ship {
    top: 12px; right: 12px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(6px);
    font-size: 0.75rem;
}
.pc-badge--new  { color: #4527a0; }
.pc-badge--size { color: #0d47a1; }
.pc-badge--ship { color: #00695c; }
/* 'out_of_stock' (m_0016) -- карточка теперь остаётся в каталоге вместо
   исчезновения (#multipage-oos-hard-404, High); занимает тот же слот, что
   и --sale (левый верхний угол), т.к. они взаимоисключающие (product_card.php). */
.pc-badge--oos {
    top: 12px; left: 12px;
    background: var(--dark);
    color: #fff;
}

/* Товар без остатка (см. .product-card--out-of-stock ниже) -- фото
   приглушено, чтобы визуально отличаться от покупаемых карточек той же
   сетки ещё до прочтения бейджа/цены. */
.product-card--out-of-stock .pc-slider__img,
.product-card--out-of-stock .pc-slider__placeholder {
    opacity: .55;
    filter: grayscale(.35);
}
/* Замена <button class="add-to-cart"> на некликабельный <span> той же
   формы (product_card.php) -- эти модификаторы только про то, что кнопка
   ВЫГЛЯДИТ отключённой (курсор/прозрачность), сам факт отсутствия
   интерактивности уже гарантирован тем, что это не <button>/<a> вовсе. */
.pc-overlay__cart--disabled,
.product-card__cart-btn--disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ── ПРОГРЕСС-ТОЧКИ СЛАЙДОВ ── */
.pc-dots {
    position: absolute;
    /* владелец, 2026-08-19: точки накладывались на текст "В корзину" --
       .pc-overlay__cart (40px высотой) начинается в 46px от низа .pc-slider
       (0 padding-bottom .pc-overlay + 12px padding-bottom + сама кнопка),
       а точки на 44px оказывались НАД самым верхом кнопки, задевая её на
       несколько пикселей. 58px -- явный зазор (12px) над реальной верхней
       границей кнопки, оба элемента показываются одновременно по одному и
       тому же :hover.*/
    bottom: 58px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.product-card:hover .pc-dots { opacity: 1; }
.pc-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .2s, width .25s;
}
/* Enterprise-аудит 2026-08-06, Medium #76 -- было безусловно pointer-events:all
   на .pc-dot (унаследованный от .pc-dots pointer-events:none заглушался для
   каждой точки индивидуально) -- .pc-dots целиком невидим (opacity:0) до
   .product-card:hover, но opacity:0 САМ ПО СЕБЕ не убирает кликабельность:
   элемент с pointer-events:all продолжает перехватывать клики/тапы, даже
   будучи полностью прозрачным. На touch (без реального :hover) это были
   невидимые "мины" 5×5px поверх фото карточки -- случайный тап по фото мог
   молча перепрыгнуть на другой слайд через showSlide() (main.js), без
   единой видимой подсказки, что там вообще что-то было. pointer-events
   включается ТЕПЕРЬ ровно тем же селектором, что уже включает видимость
   (opacity) -- десктопный hover-переход "навёл — увидел точки — кликнул
   нужную" не теряет ни капли функциональности (оба свойства меняются
   одновременно), а touch получает ожидаемое поведение: невидимо и
   некликабельно вместе, не порознь. Прямая навигация свайпом (main.js,
   showSlide()) не завязана на эти точки и работает независимо от pointer-events
   here. */
.product-card:hover .pc-dot { pointer-events: all; }
.pc-dot.is-active {
    background: #fff;
    width: 16px;
    border-radius: 3px;
}

/* ── ‹ › ЯВНЫЕ КНОПКИ НАВИГАЦИИ СЛАЙДЕРА ── */
/* Фаза 2, находка №8 (живой аудит) -- точки выше (.pc-dot) кликабельны
   только на .product-card:hover -- на touch-устройствах (нет надёжного
   :hover, тот же класс проблемы, что уже решён для .pc-overlay чуть ниже)
   недостижимы вовсе. Эти кнопки ДОПОЛНЯЮТ точки/свайп/автопрокрутку (main.js,
   initCardSliders()), а не заменяют -- ни один из трёх старых способов
   навигации не тронут. 44×44 -- тот же тач-safe хитбокс, что и у .pc-swatch
   (см. её докблок выше): видимый кружок 32×32 (fill) заметно меньше
   невидимой кликабельной площади вокруг него, зона касания не сужается
   визуальным размером кнопки. */
.pc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.9);
    color: var(--dark);
    cursor: pointer;
    z-index: 5;
    opacity: 0;
    /* pointer-events:none пока невидима -- тот же приём против "невидимых
       мин" поверх фото карточки, что уже применён к .pc-dot выше
       (Enterprise-аудит 2026-08-06, Medium #76, см. её докблок): opacity:0
       сама по себе НЕ убирает кликабельность, элемент продолжил бы
       перехватывать клики по .pc-slider__link под собой, будучи полностью
       прозрачным. */
    pointer-events: none;
    transition: opacity .2s, background .2s;
}
.pc-nav--prev { left: 6px; }
.pc-nav--next { right: 6px; }
.pc-nav:hover { background: #fff; }
/* :focus-visible -- клавиатурный Tab на саму кнопку делает её видимой сам
   по себе, независимо от :hover всей карточки (native <button> фокусируем
   и без этого -- Enter/Space сработали бы даже невидимой -- но невидимый
   фокус не даёт зрячему клавиатурному пользователю увидеть, где он).
   .product-card:hover -- десктопный путь, симметричный точкам/оверлею
   "В корзину" выше. */
.product-card:hover .pc-nav,
.pc-nav:focus-visible {
    opacity: 1;
    pointer-events: auto;
}
/* Touch (нет надёжного :hover, hover:none) -- кнопки видимы и кликабельны
   безусловно, не только после первого случайного/симулированного hover.
   Это и есть сам фикс находки №8: раньше единственная навигация (точки)
   была на touch физически недостижима -- теперь она не единственная. */
@media (hover: none) {
    .pc-nav {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ── СВОТЧИ ЦВЕТОВ — ряд в теле карточки (НЕ на фото) ── */
/* Редизайн 2026-08-10 (владелец, живой скриншот: "выглядит совершенно
   ужасно", раскиданы поверх фото товара, обёртка flex-wrap на 44px-хитбоксах
   разъезжалась в 2-3 строки и перекрывала модель на фото; см. дублирующий
   докблок в product_card.php). Раньше .pc-swatches была absolute-оверлеем
   на .pc-slider (иконка + фон фото) с z-index-конфликтом против
   .pc-overlay's кнопки "В корзину" -- теперь свотчи в обычном потоке
   .product-card__body, конфликта с оверлеем фото больше физически нет,
   правило ".product-card:hover .pc-swatches" (было opacity:0) удалено как
   более не нужное. Максимум 3 показанных свотча (не 5) -- см. обоснование в
   product_card.php. */
.pc-swatches {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    /* Отрицательный margin компенсирует пустой паддинг 44×44 кнопок
       (см. .pc-swatch ниже) -- ряд визуально не отъезжает от левого края
       .product-card__cat/.product-card__name над и под ним. */
    margin: 0 -10px 2px;
}
/* touch-target-size P1 (2026-08-09, сохранено при редизайне 2026-08-10) --
   .pc-swatch остаётся прозрачной кнопкой ровно 44×44 (вся площадь
   кликабельна/тач-абельна, не только видимая часть) -- видимый цветной
   кружок рисует ::after меньшего размера по центру (цвет приходит через
   --sw-color, product_card.php). 16px (было 24px на фото) -- в потоке под
   категорией/над названием кружок крупнее не нужен, это уже не единственный
   визуальный акцент на тёмном фото, а компактный ряд-индикатор рядом с
   текстом. */
.pc-swatch {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}
.pc-swatch::after {
    content: '';
    display: block;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--sw-color);
    box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.10);
    transition: box-shadow .18s;
}
.pc-swatch:hover::after,
.pc-swatch.is-active::after {
    box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3.5px var(--dark);
}
.pc-swatch-more {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    line-height: 1;
    padding-left: 2px;
}

/* ── ХОВЕР-ОВЕРЛЕЙ ── */
.pc-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0 10px 12px;
    display: flex;
    z-index: 3;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .22s, transform .22s;
}
.product-card:hover .pc-overlay {
    opacity: 1;
    transform: translateY(0);
}
.pc-overlay__cart {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: rgba(61,27,47,.88);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-body);
    backdrop-filter: blur(6px);
    transition: background .2s;
}
.pc-overlay__cart:hover { background: var(--primary); }

/* Enterprise-аудит 2026-08-06, Medium #56 -- было только max-width:768px:
   на планшете с реальным touch (iPad landscape и шире, ~1024px, hover:none)
   .pc-overlay оставался в разметке (display:flex) с opacity:0, видимым
   ТОЛЬКО по .product-card:hover -- у touch-устройств нет надёжного :hover
   (первый тап иногда его симулирует, иногда сразу переходит по ссылке,
   поведение непредсказуемо между браузерами) -- кнопка "В корзину" на фото
   могла быть невидимой/недостижимой. (hover:none) прячет тот же оверлей
   независимо от ширины экрана -- .product-card__cart-btn (всегда в потоке,
   в футере карточки рядом с ценой, без display:none нигде) остаётся
   единственным и достаточным способом добавить в корзину с этой карточки. */
@media (hover: none), (max-width: 768px) {
    .pc-overlay { display: none; }
}

/* Тело карточки */
.product-card__body {
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.product-card__cat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.product-card__name {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    font-size: 0.9375rem;
    line-height: 1.45;
    flex: 1;
}
.product-card__name:hover { color: var(--primary); text-decoration: none; }
/* P7 (2026-08-10) -- ЕДИНСТВЕННОЕ исключение вне заявленной зоны файлов
   этого юнита (base.css/catalog.css/product.css/home.css/product_card.php)
   -- .product-card__name/.product-card__body живут ИМЕННО здесь, а не в
   одном из 4 CSS-файлов зоны, и 'components' -- единственный CSS-файл,
   который грузят ВСЕ 4 страницы, рендерящие product_card.php (catalog.php/
   home.php/product.php через $page_styles, ДАЖЕ order_success.php's
   апселл "Вам может понравиться", у которого $page_styles = ['components']
   БЕЗ catalog/home/product) -- определение только в одном из зональных
   файлов оставило бы новый подзаголовок неоформленным на upsell-карточках
   order_success.php. Подзаголовок ткани товара (product_card.php, найдена
   #3) -- явный текстовый вес НИЖЕ самого названия (легче/мельче/приглушённый
   цвет), но не отдельным текстовым цветом при :hover ссылки (--text-light
   зафиксирован явно, не наследуется от .product-card__name:hover выше --
   подзаголовок остаётся ровным, "прыгает" только само название). */
.product-card__fabric {
    display: block;
    font-weight: 400;
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--text-light);
    margin-top: 2px;
}

/* Чипы размеров -- .size-btn делает реальные размеры кликабельным
   селектором прямо на карточке (#product-card-size-selector), тот же
   визуальный язык default/hover/active, что и .prd-size-btn (product.css) и
   .filter-size-btn (catalog.css), только в масштабе карточки. Владелец,
   2026-08-15: список-или-диапазон -- если размерный ряд помещается (см.
   product_card.php, порог 6), показываем ВСЕ размеры чипами; иначе один
   некликабельный диапазон-чип "min–max" (.product-card__size-chip--range,
   ниже) вместо прежнего среза-до-4 + "+N". */
/* mux-size-btn-spacing P1 (round-4 аудит) -- gap было 4px (3px на мобильном
   override ниже), тогда как сами кнопки уже 44×44 хит-зоны (см. фикс
   touch-target-size P1 2026-08-09 у button.size-btn ниже). Соседние 44px
   хит-зоны с 3-4px зазором визуально сливаются и провоцируют промах пальцем
   в соседнюю кнопку -- WCAG 2.5.8 требует зазор между таргетами, не только
   их собственный размер. gap:8px и в этом правиле, и в @media
   max-width:480px override ниже -- .product-card__sizes уже flex-wrap:wrap,
   так что на самой узкой карточке (~155px) лишние чипы просто уходят на
   следующую строку, разметка не ломается. */
/* UX-аудит 2026-08-29, находка P1-5. Раньше здесь стоял flex-wrap: wrap, и на
   карточке шириной ~163px (мобильная сетка 2 колонки) в ряд помещалось три чипа
   -- значит любой товар с 4+ размерами получал ВТОРУЮ строку. Из-за этого чипы
   занимали больше места, чем название и цена вместе, а соседние карточки в ряду
   расходились по внутренней раскладке.
   Инструкция владельца (2026-08-15) звучит так: «если размерный ряд помещается
   на карточке без переноса -- показываем каждый размер отдельным кликабельным
   чипом; если ряд длинный -- сворачиваем в диапазон». Порог 6 в product_card.php
   этого не обеспечивал: 4-6 чипов на мобильном всё равно переносились.
   Решение сохраняет правило владельца целиком -- все размеры остаются на месте
   и остаются кликабельными, -- но переносу взяться неоткуда: ряд всегда одна
   строка с горизонтальной прокруткой. */
.product-card__sizes {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    margin-bottom: 10px;

    /* Полоса прокрутки скрыта, поэтому обрезанный у края чип сам по себе
       ничего не сообщает -- покупательница решит, что размеров всего столько,
       сколько видно. Градиентная маска делает срез явным: последний чип
       уходит в прозрачность, это привычный сигнал «ряд продолжается». Маска
       безвредна и когда прокрутки нет: чипы прижаты влево, под градиент
       попадает пустое место. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
}
.product-card__sizes::-webkit-scrollbar { display: none; }
/* Чип не должен ужиматься под давлением соседей -- иначе вместо прокрутки
   получится ряд сплющенных нечитаемых чипов. */
.product-card__sizes > * { flex: 0 0 auto; }
/* Владелец, дизайн-ревью 2026-08-19: "размеры на всех карточках выглядят
   странно и хаотично". Root cause -- flex-wrap переносит по СОДЕРЖИМОМУ:
   разные товары несут разную длину подписи ("48-50" -- 5 символов, "58" --
   2), поэтому у одной карточки в строку помещается 3 чипа, у другой 4 --
   ряд каталога из соседних карточек визуально "прыгает" по числу колонок
   без всякой системы. CSS Grid с ЯВНЫМ числом колонок делает сетку чипов
   ПРЕДСКАЗУЕМОЙ везде одинаково, независимо от длины конкретных цифр --
   тот же приём, что уже отличает "table-like" раскладку от органичного
   flex-переноса. Только .size-buttons (кликабельный список размеров,
   единственный вариант, где бывает больше одной строки) -- диапазон-чип
   (.product-card__sizes--range, один-единственный элемент) не нуждается в
   колонках и остаётся на базовом flex выше. */
/* UX-аудит 2026-08-29, P1-5. Было grid-template-columns: repeat(3, 1fr) --
   ровно три колонки, поэтому товар с 4-6 размерами получал ВТОРУЮ строку, и
   ряд чипов занимал больше места, чем название и цена вместе.
   Цель прежнего правила («одинаковое число колонок на всех карточках, а не
   органичный flex-wrap») сохраняется и даже усиливается: теперь у КАЖДОЙ
   карточки ровно одна строка, сколько бы размеров ни было. Лишние уезжают в
   горизонтальную прокрутку (overflow-x у базового .product-card__sizes).
   grid-auto-flow: column -- элементы укладываются вдоль строки, а не переносятся;
   minmax(52px, max-content) держит минимальный тач-таргет и не даёт чипам
   растягиваться на пустой карточке. */
/* Указатель «ещё N» в конце ряда размеров (владелец, 02.09.2026). Ряд остаётся
   одной строкой, но теперь сообщает, что за краем есть размеры: замер живого
   каталога показал, что при вьюпорте 390px в полосу помещается ровно два чипа
   из пяти-шести, и за край уезжает всегда самый большой.

   Выглядит НЕ как чип размера намеренно: пунктирная рамка и приглушённый цвет,
   чтобы его не приняли за ещё один размер и не нажали вместо своего. Ширина по
   содержимому, а не колонка сетки — иначе он съедал бы место у настоящих
   размеров. Высота 44px — тот же порог касания, что у чипов рядом. */
.product-card__size-more {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 10px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-light);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.product-card__size-more:hover {
    border-color: var(--primary);
    color: var(--primary-h);
}
.product-card__size-more[hidden] { display: none; }

.product-card__sizes.size-buttons {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(52px, max-content);
    justify-content: start;
}
/* font-size было 0.625rem (10px) — формально проходило WCAG AA по контрасту,
   но противоречило задокументированной по всему остальному сайту практике
   увеличенных размеров под аудиторию 45+ (base.css: "Аудитория: женщины 45+,
   Plus Size, Молдова", body — намеренно 1.0625rem вместо обычных 16px).
   Чипы размера — не декоративная мелочь, а реально читаемый/нажимаемый
   контрол (button.size-btn ниже выбирает размер прямо с карточки,
   #product-card-size-selector) — 10px для этой аудитории мелко именно там,
   где мелкость мешает функции. 0.8125rem (13px) — то же значение, что уже
   использует .pc-overlay__cart чуть выше в этом файле, не новая ступень
   шкалы (Enterprise-аудит 2026-08-06, находка #37). */
.product-card__size-chip {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-light);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 7px;
    line-height: 1.4;
    letter-spacing: .3px;
    /* touch-target-size P1 (2026-08-09) -- box-sizing/inline-flex здесь на
       базовом классе (не только на .size-btn ниже), чтобы некликабельный
       "+N" (.product-card__size-more, тот же класс) визуально остался той
       же высоты, что и реальные кликабельные чипы в той же строке --
       .product-card__sizes уже flex-wrap:wrap, так что просевшая по
       высоте строка при переносе не сломает раскладку. */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
button.product-card__size-chip.size-btn {
    /* Было 27px по высоте (padding 4px 9px + line-height 1.4 * 13px +
       border) -- ниже минимума WCAG 2.5.8 Target Size (44px), тогда как
       та же логическая кнопка на полной странице товара (.prd-size-btn,
       product.css) уже корректно 44px. min-height/min-width подтягивают
       реальный тач-таргет карточки до того же стандарта -- .size-buttons
       уже flex-wrap:wrap (см. .product-card__sizes выше), поэтому если
       4 чипа + "+N" не помещаются в одну строку на узкой карточке, лишние
       просто переносятся на вторую строку, а не обрезаются/сжимаются
       ниже тач-таргета. */
    min-height: 44px;
    min-width: 44px;
    padding: 4px 9px;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
button.product-card__size-chip.size-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
button.product-card__size-chip.size-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}
/* Диапазон-чип "min–max" (владелец, 2026-08-15) -- заменяет прежний "+N",
   тот же визуальный язык "информационный, не кликабельный" (акцентный
   coral-tint фон вместо нейтрального --bg чипа-кнопки), просто под новый
   смысл: не "остаток за кадром", а весь размерный ряд одним числом. Не
   .size-btn -- не button, курсор default, не участвует в тач-таргет
   правилах ниже (button.product-card__size-chip.size-btn). */
.product-card__size-chip--range {
    color: var(--primary-h);
    border-color: rgba(184,80,42,.25);
    background: var(--primary-light);
    cursor: default;
    font-variant-numeric: tabular-nums;
}

/* UX-аудит 2026-08-29, P1-6: кнопка корзины получила подпись, поэтому в строку
   с ценой она больше не помещается (карточка ~163px на мобильном). Футер стал
   колонкой: цена сверху, CTA во всю ширину снизу. margin-top:auto сохранён --
   он прижимает футер к низу карточки, за счёт чего цены соседних карточек в
   ряду выравниваются по одной линии независимо от длины названия. */
.product-card__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: auto;
}
.product-card__price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.product-card__price-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.product-card__discount-chip {
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--primary-light);
    color: var(--primary-h);
    border-radius: 4px;
    padding: 2px 5px;
}
.product-card__badge--new { background: #27ae60; }
.product-card__cart-btn {
    width: 100%; min-height: 44px;
    gap: 8px;
    padding: 0 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .2s, transform .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* 44px -- минимальный тач-таргет; ширина во всю карточку заодно снимает
       прежнюю проблему «попасть пальцем в квадрат 40x40». */
    font-family: var(--font-body);
    line-height: 1;
}
.product-card__cart-btn:hover { background: var(--primary-h); transform: scale(1.08); }

/* На мобильном скрываем overlay, кнопка видна всегда.
   UX-аудит 2026-08-29 (P1-6): фиксированный квадрат 32×32 убран -- кнопка теперь
   с подписью и во всю ширину футера, а 32px к тому же были ниже минимального
   тач-таргета. Размер задаёт базовое правило (100% / min-height 44px). */
@media (max-width: 768px) {
    .product-card__cart-btn { font-size: 0.875rem; }
}
/* =============================================
   ЦЕНЫ
   ============================================= */
.price-new  { font-size: 1.125rem; font-weight: 700; color: var(--primary); }
.price-old  { font-size: 0.8125rem; color: var(--text-light); text-decoration: line-through; }
.price-new.big  { font-size: 1.75rem; }
.price-discount {
    background: var(--primary-light);
    color: var(--primary-h);
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
}
/* БЛОК 3.1 — дублирующийся .product-card__cat удалён (определён выше в строке ~622) */

.product-card__wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: all .25s;
    z-index: 4;
    backdrop-filter: blur(4px);
}
.product-card:hover .product-card__wishlist {
    opacity: 1;
    transform: scale(1);
}
.product-card__wishlist:hover { background: #fff; color: var(--primary); }
/* =============================================
   СВОТЧИ ЦВЕТОВ НА КАРТОЧКЕ ТОВАРА
   ============================================= */
.product-card__colors {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.product-card__color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.12);
    display: inline-block;
    cursor: default;
    transition: transform .15s, box-shadow .15s;
    flex-shrink: 0;
    position: relative;
}
.product-card__color-dot:hover {
    transform: scale(1.3);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 1;
}
.product-card__color-dot.is-print {
    background: repeating-linear-gradient(
        45deg,
        #e8a0c0 0px, #e8a0c0 4px,
        #a0b8e8 4px, #a0b8e8 8px
    ) !important;
    border-color: rgba(0,0,0,0.1);
}

.product-card__color-more {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-light);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2px 6px;
    line-height: 1.4;
}
.product-card__color-label {
    font-size: var(--fs-xs);
    color: var(--text-light);
    margin-left: 2px;
}

/* Бейдж «N цвета» поверх фото */
.product-card__colors-badge {
    position: absolute;
    bottom: 52px;
    left: 10px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(6px);
    color: var(--dark);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: .3px;
    z-index: 2;
    pointer-events: none;
    line-height: 1;
}

@media (max-width: 640px) {
    .product-card__color-dot { width: 14px; height: 14px; }
    .product-card__colors-badge { display: none; }
}

/* =============================================
   ЗАДАЧА 3 — ТИПЫ ПРИНТОВ ДЛЯ СВОТЧЕЙ
   ============================================= */

/* Карточка: dot */
.product-card__color-dot[data-print="stripes"] {
    background: repeating-linear-gradient(45deg, #e8a0c0 0 4px, #a0b8e8 4px 8px);
}
.product-card__color-dot[data-print="dots"] {
    background:
        radial-gradient(circle, #2c2c2c 28%, transparent 28%) 0 0 / 6px 6px,
        #f0f0f0;
}
.product-card__color-dot[data-print="plaid"] {
    background:
        repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(180,30,30,0.35) 3px, rgba(180,30,30,0.35) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(30,50,180,0.35) 3px, rgba(30,50,180,0.35) 4px),
        #e8e0d0;
}
.product-card__color-dot[data-print="floral"] {
    background:
        radial-gradient(circle at 30% 30%, #e8a0c0 15%, transparent 15%),
        radial-gradient(circle at 70% 60%, #c0a0e8 12%, transparent 12%),
        radial-gradient(circle at 50% 80%, #a0c8e8 10%, transparent 10%),
        #f9f0f5;
}
.product-card__color-dot[data-print="leopard"] {
    background:
        radial-gradient(ellipse 40% 30% at 28% 38%, #3d2000 0%, transparent 100%),
        radial-gradient(ellipse 35% 25% at 68% 68%, #3d2000 0%, transparent 100%),
        #c9a020;
}
.product-card__color-dot[data-print="abstract"] {
    background: conic-gradient(
        #e8a0c0 0deg 90deg,
        #a0c8e8 90deg 180deg,
        #c0e8a0 180deg 270deg,
        #e8c0a0 270deg 360deg
    );
}

/* =============================================
   БЕЙДЖ АКТИВНОСТИ НА КАРТОЧКЕ ТОВАРА
   ============================================= */
.product-card__activity-badge {
    position: absolute;
    bottom: 52px; left: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 12px;
    z-index: 3;
    line-height: 1;
}
.product-card__activity-badge--hit    { background: #fff8e1; color: #b8860b; }
.product-card__activity-badge--active { background: #e8f5e9; color: #2e7d32; }

/* =============================================
   АДАПТИВ (карточка товара / сетка)
   ============================================= */
@media (max-width: 1100px) {
    .products-grid    { grid-template-columns: repeat(3, 1fr); }
}
/* UX-аудит 2026-08-29, находка P2-5. Порог перехода на ДВЕ колонки стоял на
   900px, поэтому весь планшетный диапазон (768-900px) показывал две карточки в
   ряд шириной ~344px -- фотографии раздувались, в экран помещалось меньше
   товаров, чем на телефоне по площади. Три колонки держатся до 700px:
   при 768px это ~230px на карточку, то же, что на десктопе, а не растянутая
   вдвое. Ниже 700px две колонки остаются -- там третья уже не читается. */
@media (max-width: 700px) {
    .products-grid    { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
    .products-grid    { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* =============================================
   МОБИЛЬНЫЕ СОСТОЯНИЯ КНОПОК (карточка товара)
   ============================================= */
.product-card:active {
    transform: scale(0.985);
    transition: transform .1s ease;
}
@media (hover: none) {
    .product-card:hover { transform: none; box-shadow: var(--shadow); }
    .product-card:hover .product-card__wishlist { opacity: 0; }
}

/* ЗАДАЧА 2 — touch-таргеты (карточка товара) */
@media (max-width: 640px) {
    .product-card__name { font-size: 0.9375rem; }
    .price-new          { font-size: 1.0625rem; }
}
@media (max-width: 768px) {
    /* width/height 44×44 сняты (P1-6, 2026-08-29): кнопка во всю ширину футера,
       высоту держит min-height:44px базового правила -- тач-таргет не пострадал,
       наоборот, площадь попадания выросла. */
    /* touch-target-size P1 (2026-08-09) -- прежний override .pc-swatch
       36×36 / gap 4px УДАЛЁН отсюда: .pc-swatch теперь везде (десктоп и
       мобильный, единое правило выше) настоящая 44×44 хит-зона, отдельный
       мобильный размер не нужен -- см. комментарий у .pc-swatch/.pc-swatches
       выше (после редизайна 2026-08-10 -- flex-wrap:nowrap, максимум 3
       свотча гарантированно помещаются в одну строку даже на самой узкой
       реальной карточке). */
}
@media (max-width: 480px) {
    .product-card__body  { padding: 12px 12px 14px; }
    /* Раньше .product-card__sizes скрывался целиком на мобильном (чипы были
       чисто информационные). Теперь это единственный способ выбрать размер
       прямо с карточки без перехода на страницу товара
       (#product-card-size-selector) -- прятать его означало бы, что клиентский
       гейт "выберите размер" на мобильном требует то, что физически нельзя
       выбрать. Оставляем видимым, только чуть плотнее по отступу/шрифту. */
    /* gap было 3px здесь (ЕЩЁ теснее базовых 4px) -- сознательный компромисс
       ради "4 чипа + '+N' в одну строку на 375px-вьюпорте". mux-size-btn-
       spacing P1 (round-4 аудит) отменяет этот компромисс: 44×44 хит-зоны
       с 3px зазором визуально сливались и проваливали WCAG 2.5.8 именно
       там, где аудитория 45+ промахивается пальцем чаще всего. gap:8px, тот
       же, что и в базовом правиле выше -- на 375px это означает перенос на
       2-3 строки вместо одной, .product-card__sizes уже flex-wrap:wrap. */
    .product-card__sizes { margin-bottom: 8px; gap: 8px; }
    /* Было 0.5625rem (9px) -- ЕЩЁ мельче базового 10px (находка #37), на
       самом узком экране, для той же аудитории 45+. 0.75rem (12px) — низ
       диапазона, который просит находка (12-13px), а не полные 13px
       десктопной/планшетной версии выше -- компактный шрифт остаётся
       оправданным сам по себе (читаемость), даже когда исходная цель
       "всё в одну строку" уже не действует из-за увеличенного gap выше. */
    /* ДОПОЛНЕНО 2026-08-30 (P1-8). Комментарий выше сам отмечает, что исходная
       цель («всё в одну строку») уже не действует. После перевода ряда чипов в
       одну прокручиваемую строку (P1-5) она не действует тем более: место
       перестало быть дефицитным. Размер -- главный токен карточки для этого
       магазина, держать его на 12px для аудитории 45-65 больше нечем оправдать. */
    .product-card__size-chip { font-size: var(--fs-xs); padding: 4px 8px; }
}