/**
 * ==========================================================
 * CHACHA HOME — HOMEPAGE PRODUCT CAROUSEL v1.1.0
 * ==========================================================
 *
 * DEV-02 / Patch-02
 *
 * Progressive enhancement for the homepage New Arrivals and
 * ChaCha Seçkisi Product Collection blocks.
 *
 * Important:
 * - Product-card visuals remain owned by product-card.css.
 * - This file controls carousel layout/navigation only.
 * - Without JavaScript, the existing homepage grid remains intact.
 * - No autoplay and no cloned product cards.
 */

.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-home-carousel {
    position: relative;
    min-width: 0;
}


.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-home-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 18px;
}


.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-home-carousel__controls[hidden] {
    display: none !important;
}


.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-home-carousel__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(32, 26, 23, 0.24);
    border-radius: 50%;
    background: rgba(255, 253, 252, 0.88);
    box-shadow: none;
    color: var(--chacha-espresso, #201A17);
    cursor: pointer;
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        color 180ms ease,
        opacity 180ms ease;
}


.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-home-carousel__button svg {
    display: block;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}


@media (hover: hover) and (pointer: fine) {

    .home
    :is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
    .chacha-home-carousel__button:not(:disabled):hover {
        border-color: var(--chacha-brass, #B08D57);
        background: var(--chacha-brass, #B08D57);
        color: #FFFDFC;
    }

}


.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-home-carousel__button:focus-visible {
    outline: 2px solid var(--chacha-brass, #B08D57);
    outline-offset: 3px;
}


.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-home-carousel__button:disabled {
    opacity: 0.32;
    cursor: default;
}


/**
 * Track
 *
 * Desktop target: exactly four complete product cards.
 * The existing WooCommerce Product Collection children remain
 * untouched; only their layout changes after JS initialization.
 */
.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-home-carousel__track {
    --chacha-home-carousel-gap: 20px;
    --chacha-home-carousel-visible: 4;

    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns:
        calc(
            (
                100%
                -
                (
                    var(--chacha-home-carousel-visible)
                    - 1
                )
                * var(--chacha-home-carousel-gap)
            )
            /
            var(--chacha-home-carousel-visible)
        ) !important;

    gap: var(--chacha-home-carousel-gap) !important;

    width: 100% !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    overflow-x: auto;
    overflow-y: visible;

    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}


.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-home-carousel__track::-webkit-scrollbar {
    display: none;
}


.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-home-carousel__track:focus-visible {
    outline: 2px solid rgba(176, 141, 87, 0.55);
    outline-offset: 6px;
}


.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-home-carousel__slide {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;

    scroll-snap-align: start;
    scroll-snap-stop: normal;
}


/**
 * Tablet: three complete products.
 */
@media (max-width: 1024px) {

    .home
    :is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
    .chacha-home-carousel__track {
        --chacha-home-carousel-visible: 3;
        --chacha-home-carousel-gap: 18px;
    }

}


/**
 * Mobile: preserve ChaCha Home's existing two-card language,
 * but make it swipeable instead of a static two-column grid.
 */
@media (max-width: 767px) {

    .home
    :is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
    .chacha-home-carousel__controls {
        margin-bottom: 14px;
    }


    .home
    :is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
    .chacha-home-carousel__button {
        width: 38px;
        height: 38px;
    }


    .home
    :is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
    .chacha-home-carousel__track {
        --chacha-home-carousel-visible: 2;
        --chacha-home-carousel-gap: 14px;
    }

}


/**
 * View-all action isolation.
 *
 * Gutenberg can keep the section CTA inside the same Product
 * Collection wrapper. Shared commerce-action rules are intentionally
 * broad for real product buttons, so the section CTA must opt back
 * into the homepage editorial button language after carousel init.
 */
.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-section-actions {
    position: relative !important;
    z-index: 1;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 44px 0 0 !important;
    padding: 0 !important;
    clear: both;
    transform: none !important;
}


.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-section-actions
.wp-block-button {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-section-actions
.wp-block-button__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 24px !important;
    border: 1px solid var(--chacha-espresso, #201A17) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--chacha-espresso, #201A17) !important;
}


@media (hover: hover) and (pointer: fine) {

    .home
    :is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
    .chacha-section-actions
    .wp-block-button__link:hover {
        background: var(--chacha-espresso, #201A17) !important;
        border-color: var(--chacha-espresso, #201A17) !important;
        color: #FFFDFC !important;
    }

}


@media (max-width: 767px) {

    .home
    :is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
    .chacha-section-actions {
        margin-top: 32px !important;
    }

}


@media (prefers-reduced-motion: reduce) {

    .home
    :is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
    .chacha-home-carousel__button {
        transition: none;
    }


    .home
    :is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
    .chacha-home-carousel__track {
        scroll-behavior: auto;
    }

}


/* ==========================================================
   HOMEPAGE CAROUSEL ? DESKTOP CONTROL RHYTHM V1
   Keep navigation available without adding vertical
   height between section copy and product track.
   ========================================================== */

@media screen and (min-width: 1200px) {

    .home
    .chacha-home-carousel__controls {
        position:
            absolute;

        top:
            -42px;

        right:
            0;

        z-index:
            3;

        margin:
            0 !important;
    }

}

/**
 * ==========================================================
 * CHA-PRODUCT-CARD-POLISH-02 / CAROUSEL NAVIGATION
 * ==========================================================
 */

.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-home-carousel__controls {
    gap: 10px;
}


.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-home-carousel__button {
    width: 40px;
    height: 40px;

    border-color:
        var(
            --chacha-subtle,
            #D7CEC4
        );

    background:
        var(
            --chacha-background-light,
            #FFFDFC
        );

    color:
        var(
            --chacha-espresso,
            #201A17
        );
}


.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-home-carousel__button svg {
    width: 16px;
    height: 16px;

    stroke-width: 1.5;
}


.home
:is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
.chacha-home-carousel__button:disabled {
    opacity: 0.52;

    border-color:
        rgba(
            32,
            26,
            23,
            0.16
        );

    background:
        transparent;

    color:
        rgba(
            32,
            26,
            23,
            0.48
        );
}


@media (max-width: 767px) {

    .home
    :is(.chacha-new-arrivals, .chacha-featured).chacha-home-carousel-ready
    .chacha-home-carousel__button {
        width: 38px;
        height: 38px;
    }

}