/**
 * Site95 — horizontal scroll cue (left/right arrows) for tool switchers.
 * JS wraps .tool-first-switch / .calc-switcher in .s95-hscroll
 */
.s95-hscroll {
    position: relative;
    display: block;
    max-width: 100%;
    min-width: 0;
}

.s95-hscroll-scroller {
    max-width: 100%;
}

.s95-hscroll-btn {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.96);
    color: #334155;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.s95-hscroll-btn:hover,
.s95-hscroll-btn:focus-visible {
    background: #eef2ff;
    border-color: #818cf8;
    color: #4338ca;
    outline: none;
}

.s95-hscroll-btn:active {
    transform: translateY(-50%) scale(0.96);
}

.s95-hscroll-prev {
    left: 0.1rem;
}

.s95-hscroll-next {
    right: 0.1rem;
}

/* Soft fade behind arrows so chips don't collide with the button */
.s95-hscroll-overflow.s95-hscroll-can-left::before,
.s95-hscroll-overflow.s95-hscroll-can-right::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0.35rem;
    width: 2.4rem;
    z-index: 2;
    pointer-events: none;
}

.s95-hscroll-overflow.s95-hscroll-can-left::before {
    left: 0;
    background: linear-gradient(to right, #f8fafc 35%, transparent);
}

.s95-hscroll-overflow.s95-hscroll-can-right::after {
    right: 0;
    background: linear-gradient(to left, #f8fafc 35%, transparent);
}

/* Homepage hero (red) category tabs */
.hero-cat-picker .s95-hscroll-overflow.s95-hscroll-can-left::before {
    background: linear-gradient(to right, #991b1b 40%, transparent);
}
.hero-cat-picker .s95-hscroll-overflow.s95-hscroll-can-right::after {
    background: linear-gradient(to left, #991b1b 40%, transparent);
}
.hero-cat-picker .s95-hscroll-btn {
    background: rgba(127, 29, 29, 0.95);
    border-color: #fecaca;
    color: #fff;
}
.hero-cat-picker .s95-hscroll-btn:hover,
.hero-cat-picker .s95-hscroll-btn:focus-visible {
    background: #7f1d1d;
    color: #fff;
    border-color: #fff;
}

/* Dark instrument widgets (violin / guitar / piano / xylo) */
.violin-widget .s95-hscroll-btn,
.guitar-widget .s95-hscroll-btn,
.piano-widget .s95-hscroll-btn,
.xylo-widget .s95-hscroll-btn {
    background: rgba(28, 25, 23, 0.94);
    border-color: rgba(251, 191, 36, 0.45);
    color: #fde68a;
}
.violin-widget .s95-hscroll-btn:hover,
.violin-widget .s95-hscroll-btn:focus-visible,
.guitar-widget .s95-hscroll-btn:hover,
.guitar-widget .s95-hscroll-btn:focus-visible,
.piano-widget .s95-hscroll-btn:hover,
.piano-widget .s95-hscroll-btn:focus-visible,
.xylo-widget .s95-hscroll-btn:hover,
.xylo-widget .s95-hscroll-btn:focus-visible {
    background: #44403c;
    color: #fff;
    border-color: #fbbf24;
}
.violin-widget .s95-hscroll-overflow.s95-hscroll-can-left::before,
.guitar-widget .s95-hscroll-overflow.s95-hscroll-can-left::before,
.piano-widget .s95-hscroll-overflow.s95-hscroll-can-left::before,
.xylo-widget .s95-hscroll-overflow.s95-hscroll-can-left::before {
    background: linear-gradient(to right, #1c1917 40%, transparent);
}
.violin-widget .s95-hscroll-overflow.s95-hscroll-can-right::after,
.guitar-widget .s95-hscroll-overflow.s95-hscroll-can-right::after,
.piano-widget .s95-hscroll-overflow.s95-hscroll-can-right::after,
.xylo-widget .s95-hscroll-overflow.s95-hscroll-can-right::after {
    background: linear-gradient(to left, #1c1917 40%, transparent);
}

@media (max-width: 899px) {
    .s95-hscroll-overflow.s95-hscroll-can-left .s95-hscroll-prev,
    .s95-hscroll-overflow.s95-hscroll-can-right .s95-hscroll-next {
        display: inline-flex;
    }

    .s95-hscroll-overflow .s95-hscroll-scroller {
        scroll-padding-inline: 2.25rem;
    }

    /* Extra inset so first/last chips clear the arrows */
    .s95-hscroll-overflow.s95-hscroll-can-left .s95-hscroll-scroller {
        mask-image: none;
        -webkit-mask-image: none;
    }
}

@media (min-width: 900px) {
    .s95-hscroll-btn,
    .s95-hscroll-overflow.s95-hscroll-can-left::before,
    .s95-hscroll-overflow.s95-hscroll-can-right::after {
        display: none !important;
    }
}