/* Кнопка категории — тёмная «таблетка» с круглым бегунком слева.
   Макеты: mobile 5196:56011 (390), tablet 5192:52234 (834), desktop 5192:48175 (2560).
   Обводка — горизонтальный градиент #2e3235 → #303538 → #33383b (border-box),
   заливка #2d2d2d (padding-box). Бегунок (::before) и иконка на нём — поверх левого края.
   Брейкпоинты: 0 / 600 / 1280 (десктоп с 1280, в отличие от header.css). */
.category-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--cat-btn-h);
    padding: 0 var(--cat-btn-pad-r) 0 calc(var(--cat-btn-knob) + var(--cat-btn-gap));
    border-style: solid;
    border-width: var(--cat-btn-bw-y) var(--cat-btn-bw-x);
    border-color: transparent;
    border-radius: 999px;
    background:
            linear-gradient(#2d2d2d, #2d2d2d) padding-box,
            linear-gradient(90deg, #2e3235 0%, #303538 76.7%, #33383b 100%) border-box;
    font-family: inherit;
    font-size: var(--cat-btn-fs);
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    cursor: pointer;
}

/* Бегунок: круг, выступающий за левый край таблетки */
.category-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--cat-btn-bw-x));
    width: var(--cat-btn-knob);
    height: var(--cat-btn-knob);
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #4a4f53 0%, #2b2e31 70%, #1f2224 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Иконка красится currentColor через mask — сам файл остаётся SVG-ассетом.
   Центрируется по бегунку. */
.category-btn__icon {
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--cat-btn-bw-x) + (var(--cat-btn-knob) - var(--cat-btn-icon)) / 2);
    display: block;
    width: var(--cat-btn-icon);
    height: var(--cat-btn-icon);
    transform: translateY(-50%);
    background-color: #b8b8b8;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.category-btn--1 .category-btn__icon {
    mask-image: url("../img/category/category_1.svg");
    -webkit-mask-image: url("../img/category/category_1.svg");
}

.category-btn--2 .category-btn__icon {
    mask-image: url("../img/category/category_2.svg");
    -webkit-mask-image: url("../img/category/category_2.svg");
}

.category-btn--3 .category-btn__icon {
    mask-image: url("../img/category/category_3.svg");
    -webkit-mask-image: url("../img/category/category_3.svg");
}

.category-btn--4 .category-btn__icon {
    mask-image: url("../img/category/category_4.svg");
    -webkit-mask-image: url("../img/category/category_4.svg");
}

.category-btn--5 .category-btn__icon {
    mask-image: url("../img/category/category_5.svg");
    -webkit-mask-image: url("../img/category/category_5.svg");
}

.category-btn--6 .category-btn__icon {
    mask-image: url("../img/category/category_6.svg");
    -webkit-mask-image: url("../img/category/category_6.svg");
}

.category-btn__label {
    flex: none;
    text-align: center;
    white-space: nowrap;
}

/* ховер/активная (макет 5189:46560): пилюля и бегунок не меняются, иконка становится жёлтой */
.category-btn:hover .category-btn__icon,
.category-btn--active .category-btn__icon {
    background-color: #FFA500;
}

/* mobile (реф. 390): пилюля 110×23.3, бегунок 32.6, текст 8px, обводка 1.5 / 2.4 */
@media (min-width: 0px) {
    :root {
        --cat-btn-h: clamp(20px, 5.97vw, 36px);
        --cat-btn-knob: clamp(28px, 8.36vw, 50px);
        --cat-btn-icon: clamp(16px, 4.6vw, 28px);
        --cat-btn-fs: clamp(8px, 2.05vw, 12px);
        --cat-btn-pad-r: clamp(4px, 1.5vw, 10px);
        --cat-btn-gap: clamp(2px, 0.8vw, 6px);
        --cat-btn-bw-x: 2.4px;
        --cat-btn-bw-y: 1.5px;
    }
}

/* tablet (реф. 834): пилюля 165×42.2, бегунок 41.4, текст 11px, обводка 2.7 / 3.6 */
@media (min-width: 600px) {
    :root {
        --cat-btn-h: clamp(30px, 5.03vw, 43px);
        --cat-btn-knob: clamp(30px, 4.96vw, 43px);
        --cat-btn-icon: clamp(20px, 3.3vw, 28px);
        --cat-btn-fs: clamp(11px, 1.32vw, 14px);
        --cat-btn-pad-r: clamp(6px, 1.2vw, 12px);
        --cat-btn-gap: clamp(4px, 0.8vw, 8px);
        --cat-btn-bw-x: 3.6px;
        --cat-btn-bw-y: 2.7px;
    }
}

/* desktop (реф. 2560): пилюля 244.7×62.5, бегунок 61, иконка 45, обводка 4 / 5.3 */
@media (min-width: 1280px) {
    :root {
        --cat-btn-h: clamp(38px, 2.44vw, 63px);
        --cat-btn-knob: clamp(36px, 2.38vw, 61px);
        --cat-btn-icon: clamp(26px, 1.76vw, 45px);
        --cat-btn-fs: clamp(12px, calc(0.31vw + 8px), 16px);
        --cat-btn-pad-r: clamp(8px, 0.6vw, 16px);
        --cat-btn-gap: clamp(6px, 0.5vw, 12px);
        --cat-btn-bw-x: clamp(3px, 0.21vw, 5.3px);
        --cat-btn-bw-y: clamp(2.5px, 0.16vw, 4px);
    }
}