/* A local responsive sentinel prevents a parent's scroll mode being inherited. */
.webbo-hscroll-host { --webbo-horizontal-scroll:off; }
.webbo-hscroll-active { min-inline-size:0; max-inline-size:100%; }
.webbo-hscroll-track {
    overflow-x:auto !important;
    overscroll-behavior-x:contain;
    scroll-behavior:auto;
    scrollbar-width:thin;
    max-inline-size:100%;
    min-inline-size:0;
}
.webbo-hscroll-widget > .webbo-hscroll-track,
.webbo-hscroll-widget.webbo-hscroll-track { white-space:nowrap; }
.webbo-hscroll-container > .webbo-hscroll-track,
.webbo-hscroll-container.webbo-hscroll-track {
    display:flex;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    --container-widget-width:initial;
    --container-widget-flex-grow:0;
}
.webbo-hscroll-container > .webbo-hscroll-track > .elementor-element,
.webbo-hscroll-container.webbo-hscroll-track > .elementor-element { flex-shrink:0 !important; }
.webbo-hscroll-widget .webbo-breadcrumbs,
.webbo-hscroll-widget .elementor-icon-list-items {
    display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
}
.webbo-hscroll-widget .webbo-breadcrumbs__item { white-space:nowrap; }
.webbo-hscroll-widget .webbo-breadcrumbs > *,
.webbo-hscroll-widget .elementor-icon-list-items > * { flex-shrink:0 !important; }
.webbo-hscroll-widget .elementor-nav-menu,
.webbo-hscroll-widget .elementor-tabs-wrapper,
.webbo-hscroll-widget .e-n-tabs-heading { flex-wrap:nowrap !important; }
.webbo-hscroll-hide-bar { scrollbar-width:none; }
.webbo-hscroll-hide-bar::-webkit-scrollbar { display:none; }
.webbo-hscroll-track:focus-visible { outline:2px solid currentColor; outline-offset:-2px; }

/* Optional, content-aware edge fade. CSS masks fade the rendered content itself,
   so there are no overlays to intercept clicks, and no white/solid background. */
.webbo-hscroll-fade {
    --webbo-hscroll-left-alpha:1;
    --webbo-hscroll-right-alpha:1;
    --webbo-hscroll-effective-width:min(var(--webbo-hscroll-fade-width, 30px), 50%);
    -webkit-mask-image:linear-gradient(to right,
        rgba(0,0,0,var(--webbo-hscroll-left-alpha)) 0%,
        #000 var(--webbo-hscroll-effective-width),
        #000 calc(100% - var(--webbo-hscroll-effective-width)),
        rgba(0,0,0,var(--webbo-hscroll-right-alpha)) 100%);
    mask-image:linear-gradient(to right,
        rgba(0,0,0,var(--webbo-hscroll-left-alpha)) 0%,
        #000 var(--webbo-hscroll-effective-width),
        #000 calc(100% - var(--webbo-hscroll-effective-width)),
        rgba(0,0,0,var(--webbo-hscroll-right-alpha)) 100%);
}
.webbo-hscroll-fade.webbo-hscroll-fade-left {
    --webbo-hscroll-left-alpha:var(--webbo-hscroll-fade-alpha, 0);
}
.webbo-hscroll-fade.webbo-hscroll-fade-right {
    --webbo-hscroll-right-alpha:var(--webbo-hscroll-fade-alpha, 0);
}

/* Opt-in Shopee-style scroll progress, outside the overflow clipping track. */
.webbo-hscroll-indicator{display:var(--webbo-hscroll-ind-display,flex);justify-content:var(--webbo-hscroll-ind-align,center);width:100%;max-width:100%;position:absolute;left:0;top:calc(100% + var(--webbo-hscroll-ind-gap,10px));pointer-events:none;box-sizing:border-box;min-width:0;z-index:2}
.webbo-hscroll-indicator[hidden]{display:none!important}
.webbo-hscroll-indicator__track{height:var(--webbo-hscroll-ind-height,6px);width:var(--webbo-hscroll-ind-width,72px);max-width:100%;border-radius:99px;background:var(--webbo-hscroll-ind-track-color,#dedede);overflow:hidden}
.webbo-hscroll-indicator__thumb{height:100%;width:var(--webbo-hscroll-ind-thumb-width,33%);background:var(--webbo-hscroll-ind-color,#ee4d2d);border-radius:inherit;will-change:transform}

/* A direct scroll root needs a sibling marker outside its overflow clipping.
   JS sets only the host's bottom coordinate; the responsive Gap remains CSS-owned
   so dragging the slider updates the marker instantly inside Elementor. */
.webbo-hscroll-indicator--sibling{max-width:none;top:0;margin-top:var(--webbo-hscroll-ind-gap,10px)}
/* 2.33.2: normal-flow marker (block / column-flex parent): follows the scroller and takes its own space, so it never sits on the next section. */
.webbo-hscroll-indicator--flow{position:relative;top:auto;margin-top:calc(var(--webbo-hscroll-ind-gap,10px) - var(--webbo-hscroll-row-gap,0px));align-self:flex-start;flex:none}

/* 2.39.1: Extend to screen edges. The track is stretched to the screen edges by frontend.js.
   Where the browser shows a classic scrollbar, it is replaced by this one at the original width. */
.webbo-hscroll-bar-replaced{scrollbar-width:none!important}
.webbo-hscroll-bar-replaced::-webkit-scrollbar{display:none}
.webbo-hscroll-bar{position:absolute;display:flex;align-items:stretch;z-index:2;box-sizing:border-box;touch-action:none;user-select:none;-webkit-user-select:none;background:var(--webbo-hscroll-bar-track,#f1f1f1)}
.webbo-hscroll-bar[hidden]{display:none!important}
.webbo-hscroll-bar__track{position:relative;flex:1 1 auto;min-width:0}
.webbo-hscroll-bar__thumb{position:absolute;left:0;top:2px;bottom:2px;border-radius:99px;background:var(--webbo-hscroll-bar-thumb,#8a8a8a);will-change:transform}
.webbo-hscroll-bar__thumb:hover,.webbo-hscroll-bar--dragging .webbo-hscroll-bar__thumb{background:var(--webbo-hscroll-bar-thumb-active,#6a6a6a)}
.webbo-hscroll-bar__button{flex:none;width:var(--webbo-hscroll-bar-button,11px);position:relative;cursor:default}
.webbo-hscroll-bar__button::after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-block:3px solid transparent;transform:translate(-50%,-50%)}
.webbo-hscroll-bar__button--prev::after{border-right:4px solid var(--webbo-hscroll-bar-arrow,#5a5a5a)}
.webbo-hscroll-bar__button--next::after{border-left:4px solid var(--webbo-hscroll-bar-arrow,#5a5a5a)}