/*  ======================================
    === CK CARD COLUMN SCROLLER (DIVI) ===
    ======================================

    Purpose: reuse the existing carousel controls (progress + prev/next)
    for the non-expandable product cards (ck-card-column).

    Divi setup (high-level):
    - Put your 4 product columns in a Row
    - Add class `ck-card-column-scroller` to that Row
    - Keep each Column class `ck-card-column` (already done)
    - Add a Code module under the Row with `.ck-bottom-controls` markup
*/

/* Controls visibility (avoid relying on Divi "disable on desktop/tablet/phone") */
@media (min-width: 1333px) {
    body:not(.et-fb) .ck-card-column-section .ck-bottom-controls {
        display: none !important;
    }

    /* If `.ck-bottom-controls` lives inside a Divi Code module, hide the module too
       so it doesn't leave an empty gap. Requires :has() support. */
    body:not(.et-fb) .ck-card-column-section :where(.et_pb_module, .et_pb_code):has(.ck-bottom-controls) {
        display: none !important;
    }
}

@media (max-width: 1332px) {
    body:not(.et-fb) .ck-card-column-section .ck-bottom-controls {
        display: flex !important;
    }
}

/* Start the scroller earlier (4-up looks squished around ~1200px). */
@media (max-width: 1332px) {
     body:not(.et-fb) .ck-card-column-scroller {
        padding-left: var(--ck-carousel-gutter-min) !important;
        scroll-padding-left: var(--ck-carousel-gutter-min);
    }
    /* Tokens live on the SECTION so the scroller row + bottom controls can both inherit them. */
    body:not(.et-fb) .ck-card-column-section {
        --ck-carousel-content-width: 1200px;
        --ck-carousel-gutter-min: 5vw;
        --ck-card-gap: clamp(16px, 2.5vw, 24px);
        --ck-control-size: 48px;
        --ck-card-w: clamp(260px, 78vw, 360px);
    }

    body:not(.et-fb) .ck-card-column-scroller {
        /* Full-bleed: overlap the section's side padding without changing it */
        width: 100vw !important;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw !important;
        margin-right: -50vw !important;

        display: flex !important;
        flex-wrap: nowrap !important;
        gap: var(--ck-card-gap);
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;

        /* Use the same "centered content + gutter" logic as the main carousel */
        padding-left: max(var(--ck-carousel-gutter-min), calc((100vw - var(--ck-carousel-content-width)) / 2)) !important;
        padding-right: var(--ck-carousel-gutter-min) !important;
        scroll-padding-left: max(var(--ck-carousel-gutter-min), calc((100vw - var(--ck-carousel-content-width)) / 2));
        scroll-padding-right: var(--ck-carousel-gutter-min);

        padding-bottom: 2rem !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    body:not(.et-fb) .ck-card-column-scroller::-webkit-scrollbar {
        display: none;
    }

    /* Make Divi columns behave like fixed-width cards in the scroller */
    body:not(.et-fb) .ck-card-column-scroller .ck-card-column {
        flex: 0 0 var(--ck-card-w) !important;
        width: var(--ck-card-w) !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}