/* Elementor Horizontal Scroll Controls – front-end styles */

/* ── Scroll container ──────────────────────────────────────────────────── */

.ehsc-scroll {
    overflow-x: scroll;
    scroll-snap-type: x mandatory;

    & > .elementor-widget-container > .jet-listing-grid {
        & > .jet-listing-grid__items {
            display: flex !important;
            flex-wrap: nowrap;
            margin: 0 !important;
            column-gap: var(--column-gap);
            width: fit-content !important;

            & > .jet-listing-grid__item {
                padding: 0 !important;
                scroll-snap-align: start;
                box-sizing: border-box;

                /* Constant item width. --ehsc-item-width is set either by the
                   widget's own scoped <style> block or, when the Item width
                   control is left empty, by the JetEngine fallback measured in
                   JS. Fallback keywords differ because `max-width: auto` is
                   invalid. With the property unset, all four are inert. */
                flex: 0 0 var(--ehsc-item-width, auto) !important;
                width: var(--ehsc-item-width, auto) !important;
                min-width: var(--ehsc-item-width, auto) !important;
                max-width: var(--ehsc-item-width, none) !important;

                & > div {
                    height: 100%;

                    & > .elementor-element {
                        height: 100%;
                    }
                }
            }
        }
    }
}

/* ── Controls wrapper ──────────────────────────────────────────────────── */

.ehsc-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.ehsc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background-color: #ffffff;
    cursor: pointer;
    line-height: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.ehsc-btn svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: #333333;
    pointer-events: none;
}

.ehsc-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}