/* ===== KAYSIN scrollbar =====
   Firefox 64+ / Safari 18.2+ use the standard properties, WebKit and older
   Chromium fall back to the ::-webkit-scrollbar pseudo-elements below. */

:root {
    --k-scroll-thumb: #2b2b2b;
    --k-scroll-thumb-hover: #000000;
    --k-scroll-track: #f2f2f2;
}

/* Chromium 121+ drops every ::-webkit-scrollbar rule as soon as the standard
   properties are set, so they are handed only to engines without the
   pseudo-elements — in practice Firefox. */
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--k-scroll-thumb) var(--k-scroll-track);
    }
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* Transparent border + content-box clipping leaves an even gutter around the
   thumb, so it reads as a floating pill instead of a filled channel. */
*::-webkit-scrollbar-thumb {
    background: var(--k-scroll-thumb);
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active {
    background: var(--k-scroll-thumb-hover);
    background-clip: content-box;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Stepper arrows: Chromium and Edge draw them, Firefox and Safari never do. */
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:start:decrement,
*::-webkit-scrollbar-button:end:increment {
    display: none;
    width: 0;
    height: 0;
}

/* Dark surfaces: footer, mini-cart overlay, topbar dropdowns.
   The track is transparent everywhere, so only the thumb needs lightening. */
.bg3 ::-webkit-scrollbar-thumb,
.header-cart ::-webkit-scrollbar-thumb {
    background: #8a8a8a;
    background-clip: content-box;
}

.bg3 ::-webkit-scrollbar-thumb:hover,
.header-cart ::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
    background-clip: content-box;
}

/* Touch devices keep the native overlay bar — a styled one would sit on top
   of the content and cannot be hidden while idle. */
@media (hover: none) {
    *::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    @supports not selector(::-webkit-scrollbar) {
        html {
            scrollbar-width: auto;
        }
    }
}