/* ==========================================================================
   Homistyle — themed horizontal scroll indicator
   Replaces the thin/invisible native scrollbar on every horizontal strip
   (colour swatches, Bed Size, Headboard Height, Mattress, category pills,
   anything with data-hscroll). Works on iPhone + Android too, where the
   native bar is hidden. Driven by public/js/scroll-indicator.js
   ========================================================================== */

.hs-scroller{
    scrollbar-width:none !important;           /* Firefox */
    -ms-overflow-style:none;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
}
.hs-scroller::-webkit-scrollbar{ display:none !important; height:0 !important; }

/* Soft fade on the side that still has more items */
.hs-scroller.hs-can-right:not(.hs-can-left){
    -webkit-mask-image:linear-gradient(to right, #000 82%, transparent 100%);
            mask-image:linear-gradient(to right, #000 82%, transparent 100%);
}
.hs-scroller.hs-can-left:not(.hs-can-right){
    -webkit-mask-image:linear-gradient(to left, #000 82%, transparent 100%);
            mask-image:linear-gradient(to left, #000 82%, transparent 100%);
}
.hs-scroller.hs-can-left.hs-can-right{
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 10%, #000 88%, transparent 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 10%, #000 88%, transparent 100%);
}

/* Control row under the strip: [ ===track=== ]  ‹  › */
.hs-bar{
    display:flex; align-items:center; gap:10px;
    margin-top:10px; user-select:none; -webkit-user-select:none;
}
.hs-bar[hidden]{ display:none !important; }

.hs-track{
    position:relative; flex:1; height:6px; border-radius:999px;
    background:var(--line, #e6ddd0); cursor:pointer; touch-action:none;
    box-shadow:inset 0 1px 1px rgba(43,29,20,.06);
}
/* bigger invisible hit-area so it's easy to grab with a finger */
.hs-track::before{ content:""; position:absolute; left:0; right:0; top:-9px; bottom:-9px; }

.hs-thumb{
    position:absolute; top:0; left:0; height:100%; min-width:28px; border-radius:999px;
    background:linear-gradient(90deg, var(--brand, #8a5a34), var(--accent, #c99a4a));
    box-shadow:0 1px 3px rgba(138,90,52,.35);
    transition:height .15s, top .15s, box-shadow .15s;
    will-change:transform;
}
.hs-track:hover .hs-thumb,
.hs-bar.is-dragging .hs-thumb{ height:10px; top:-2px; box-shadow:0 2px 6px rgba(138,90,52,.45); }

.hs-arrow{
    flex:0 0 auto; width:30px; height:30px; border-radius:50%;
    border:1px solid var(--brand, #8a5a34); background:#fff; color:var(--brand, #8a5a34);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:11px; cursor:pointer; padding:0;
    transition:background .15s, color .15s, opacity .15s;
}
.hs-arrow:hover:not(:disabled){ background:var(--brand, #8a5a34); color:#fff; }
.hs-arrow:disabled{ opacity:.3; cursor:default; }
.hs-arrow:focus-visible{ outline:2px solid var(--brand, #8a5a34); outline-offset:2px; }


/* Mobile: thicker bar, "Swipe" hint, arrows hidden (fingers swipe) */
@media (max-width:760px){
    .hs-bar{ margin-top:8px; gap:8px; }
    .hs-track{ height:5px; }
    .hs-arrow{ display:none; }
    .hs-hint{
        flex:0 0 auto; font-size:11px; font-weight:700; color:var(--brand, #8a5a34);
        display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
        animation:hsHint 1.4s ease-in-out infinite;
    }
    .hs-bar.is-touched .hs-hint{ display:none; }
}
@media (min-width:761px){ .hs-hint{ display:none; } }

@keyframes hsHint{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(4px); } }

@media (prefers-reduced-motion:reduce){
    .hs-scroller{ scroll-behavior:auto; }
    .hs-hint{ animation:none; }
}

/* Cart / checkout option line (.opts): tiny text row — keep the native bar
   but make it thin and in the theme colour instead of adding a control. */
.opts{ scrollbar-width:thin; scrollbar-color:var(--brand, #8a5a34) transparent; }
.opts::-webkit-scrollbar{ height:4px; }
.opts::-webkit-scrollbar-thumb{ background:var(--brand, #8a5a34); border-radius:99px; }
.opts::-webkit-scrollbar-track{ background:var(--line, #e6ddd0); border-radius:99px; }