/* Кнопка «Показать еще» (.show-more) под списком баннеров: догружает следующую партию (см. js/script.js).
   Макеты: mobile 5197:60853 (390) — 180×40, tablet 5192:53747 (834) — 210×50, desktop 5192:53740 (2560) — 245×65.
   Оформление то же, что у .category-btn: обводка — горизонтальный градиент #2e3235 → #303538 → #33383b
   (border-box), заливка #2d2d2d (padding-box). Обводка тоньше по вертикали, чем по горизонтали, как в макете.
   Брейкпоинты как в divider.css: 0 / 600 / 1280. */
.show-more[hidden] {
    display: none;
}

.show-more {
    /* отступы от списка — на самой кнопке: нет кнопки — нет и отступа */
    display: block;
    margin: var(--show-more-mt) auto 0;
    width: var(--show-more-w);
    height: var(--show-more-h);
    padding: 0;
    border-style: solid;
    border-width: var(--show-more-bw-y) var(--show-more-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(--show-more-fs);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    cursor: pointer;
    /* Слой создаётся заранее: иначе в момент нажатия браузер переносит кнопку на отдельный
       композитный слой и перерисовывает текст с другим сглаживанием — он «подпрыгивал» */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.1s ease, filter 0.15s ease;
}

.show-more:hover {
    filter: brightness(1.25);
}

/* вся кнопка, включая текст, слегка «вжимается» */
.show-more:active {
    transform: translateZ(0) scale(0.97);
    filter: brightness(0.9);
}

.show-more:focus-visible {
    outline: 3px solid #ffbc00;
    outline-offset: 3px;
}

/* mobile: 180×40, обводка 2.6 / 3.9, текст 14px, отступ сверху 19 */
@media (min-width: 0px) {
    :root {
        --show-more-w: clamp(150px, 46.15vw, 210px);
        --show-more-h: clamp(36px, 10.26vw, 50px);
        --show-more-fs: clamp(12px, 3.59vw, 16px);
        --show-more-bw-x: 3.9px;
        --show-more-bw-y: 2.6px;
        --show-more-mt: 19px;
    }
}

/* tablet: 210×50, обводка 3.24 / 4.55, текст 16px, отступ сверху 12 */
@media (min-width: 600px) {
    :root {
        --show-more-w: clamp(210px, 25.18vw, 245px);
        --show-more-h: clamp(50px, 6vw, 65px);
        --show-more-fs: 16px;
        --show-more-bw-x: 4.55px;
        --show-more-bw-y: 3.24px;
        --show-more-mt: 12px;
    }
}

/* кнопка недоступна, пока идёт запрос */
.show-more:disabled {
    filter: none;
    transform: none;
    opacity: 0.6;
    cursor: progress;
}

/* desktop: 245×65, обводка 4.2 / 5.3, текст 16px, отступ сверху 24 */
@media (min-width: 1280px) {
    :root {
        --show-more-w: 245px;
        --show-more-h: 65px;
        --show-more-bw-x: 5.3px;
        --show-more-bw-y: 4.2px;
        --show-more-mt: 24px;
    }
}