.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);
    color: var(--green);
    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);
}