.buy-btn{
    background: var(--green);
    color: white;
    font-size: 14px;
    padding: 20px;
    border-radius: 8px;
    width: 100%;
    max-width: 280px;
    display: flex;
    margin: 18px 0 0 0;
}
/* «В корзину» + «Калькулятор» в один ряд, делят ширину колонки поровну;
   при совсем узкой колонке (min-width не влезает) — переносятся. */
.tovar-cta{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    /* тянется на всю ширину колонки .tovarright (до правого края) */
}
.tovar-cta .buy-btn{
    margin-top: 0;          /* отступ ряда даёт .tovar-cta */
    max-width: none;        /* снять 280px внутри ряда — иначе перенос */
    flex: 1 1 0;
    min-width: 120px;       /* обе по ~130px в колонке 280px */
    padding: 18px 12px;     /* компактнее по горизонтали, чтобы влезли вдвоём */
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: nowrap;
}
/* Вторичная кнопка-калькулятор: контурная, в цвет дизайн-системы. */
.buy-btn--calc{
    background: #fff;
    color: var(--green);
    border: 1px solid var(--green);
    text-decoration: none;
}
.buy-btn--calc:hover{
    background: var(--green);
    color: #fff;
}
.product-categories_list{
    margin: 20px 0 0 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 1em;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 12px;              /* место под скроллбар, чтобы он не залезал на чипы */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* Firefox: скрыть скроллбар */
}
.product-categories_list::-webkit-scrollbar{ display: none; }  /* WebKit */
.product-category{
    flex: 0 0 auto;                     /* не сжимать — одна линия + скролл */
    white-space: nowrap;
    border: 1px solid var(--green);
    /* ⚠️ Текст ТЕМНЕЕ рамки, и это не оплошность (2026-08-27).
     *
     * Раньше здесь стоял `color: var(--green)` (#6DA640), а фон у чипа белый — контраст
     * 2.93:1, ниже WCAG AA и для обычного текста (4.5), и для крупного (3.0). Дефект жил
     * с самого появления компонента, но не измерялся: контраст в гейте снимается со
     * страницы подкатегории (tests/gate.sh -> subcat-contrast.js), а чипы были только на
     * карточке товара. С 2026-08-27 блок стоит и на подкатегории, то есть дефект попал
     * под замер и валил обязательный рубеж `full`.
     *
     * #4F7D2E — тот же зелёный, затемнённый до 4.88:1 на белом. Рамка намеренно осталась
     * светлой (--green): её роль декоративная, к ней требование 4.5 не применяется, и
     * узнаваемый контур бренда сохраняется.
     *
     * Согласованное исключение инструмента сюда не подходит: оно опознаётся по ФОНУ
     * (`isAccepted = r.фон === CTA_GREEN`, subcat-contrast.js:117) — «белый текст на
     * зелёном сайта». У чипа наоборот: зелёный текст на белом. Численно, кстати, ровно
     * те же 2.93 — но исключение согласовывали для кнопок, а не для ссылок-чипов.
     *
     * Откат в одну строку: вернуть `color: var(--green)` и внести чипы в список
     * согласованных исключений subcat-contrast.js с причиной. Это решение владельца. */
    color: #4F7D2E;
    padding: 1em;
    border-radius: 5px;
}
/* На ПК: горизонтальный скроллбар у списка категорий появляется при наведении */
@media (min-width: 769px) {
    .product-categories_list:hover {
        scrollbar-width: thin;                 /* Firefox */
        scrollbar-color: #9E9999 transparent;
    }
    .product-categories_list:hover::-webkit-scrollbar {
        display: block;
        height: 8px;
    }
    .product-categories_list:hover::-webkit-scrollbar-thumb {
        background: #9E9999;
        border-radius: 4px;
    }
    .product-categories_list:hover::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* Затухание краёв списка категорий при скролле (классы ставит js/scroll-fade.js).
   Фейд только там, где есть что скроллить; на первом/последнем элементе — нет. */
.product-categories_list.fade-right:not(.fade-left) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.product-categories_list.fade-left:not(.fade-right) {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px);
            mask-image: linear-gradient(to right, transparent, #000 28px);
}
.product-categories_list.fade-left.fade-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

/* Ссылка на размерный раздел категории под таблицей характеристик
   (block-tovar.php, замер 2026-10-27). Подсказка, а не кнопка: карточка уже
   несёт CTA, и вторая залитая плашка спорила бы с ней за внимание - тот же
   довод, по которому с прайса убрали вторую кнопку скачивания.

   Своих цветов не заводим: --green это переменная темы, та же, что у .buy-btn.
   Здесь намеренно НЕ var(--accent): он объявлен в :root файла price-list.css,
   на карточке его нет, а невалидный var() не падает - свойство тихо
   наследуется, и ссылка вышла бы чёрной (та же грабля уже ловилась на сайте). */
.tovar-sizes-link {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.5;
}
.tovar-sizes-link a {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 2px;
}