/*
 * Hi Afrika — Carrousel produits de la boutique
 * ---------------------------------------------------------------------------
 * Sélecteurs préfixés .ha-shop-carousel* — n'entrent PAS en conflit avec le
 * carrousel hero (.ha-hero-slider*), avec le style WooCommerce ni avec la
 * bannière (.ha-shop-banner*).
 *
 * L'ensemble utilise les mêmes couleurs de marque que le reste du thème
 * (dégradé #E8A33D → #C4651A) et est compatible dark-mode via .dark ou
 * data-theme (déjà géré par le thème).
 */

/* ==========================================================================
   Wrapper
   ========================================================================== */
div.ha-shop-carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: block;
    outline: none;
}

div.ha-shop-carousel:focus-visible {
    box-shadow: 0 0 0 3px rgba(232, 163, 61, .5);
    border-radius: 22px;
}

/* ==========================================================================
   Fenêtre visible (masque le débordement)
   ========================================================================== */
div.ha-shop-carousel__window {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 66.6667%;         /* ratio 3:2 par défaut (mode « à côté du titre ») */
    overflow: hidden;
    border-radius: 22px;
    background: #1a0e04;
    box-shadow:
        0 28px 65px rgba(0, 0, 0, .28),
        0 6px 16px rgba(0, 0, 0, .10);
}

/* ==========================================================================
   MODE PLEINE LARGEUR — le carrousel occupe (presque) toute la fenêtre.
   Activé quand la bannière porte la classe .ha-shop-banner--carousel :
   voir woocommerce/archive-product.php.
   ========================================================================== */

/* La <section> devient un conteneur relatif pleine largeur, sans le layout
   à deux colonnes de la bannière classique. */
section.ha-shop-banner.ha-shop-banner--carousel {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0 0 32px 0;
    display: block;
    background: transparent;
}

/* Le carrousel remplit le viewport en largeur ; hauteur cinématique. */
section.ha-shop-banner--carousel div.ha-shop-carousel {
    width: 100%;
    display: block;
}

/* Fenêtre : hauteur fluide, plus large que haute — quasi plein écran.
   min = ~500 px pour ne pas être écrasé, max = ~740 px sur très grands
   écrans. Utilise dvh sur les navigateurs modernes. */
section.ha-shop-banner--carousel div.ha-shop-carousel__window {
    height: clamp(420px, 72vh, 740px);
    height: clamp(420px, 72dvh, 740px);
    padding-top: 0;                 /* on n'utilise plus le padding-trick */
    border-radius: 0;               /* bord à bord */
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

/* Overlay titre + texte, positionné dans le carrousel, au-dessus des slides,
   avec un dégradé subtil qui préserve la lisibilité de la photo. */
.ha-shop-banner__overlay {
    position: absolute;
    inset: 0;
    z-index: 20;                    /* au-dessus des slides, sous les flèches (z=30) */
    display: flex;
    align-items: flex-end;          /* titre en bas à gauche */
    pointer-events: none;           /* la photo/le lien restent cliquables */
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 45%,
        rgba(0, 0, 0, .18) 70%,
        rgba(0, 0, 0, .45) 100%
    );
    padding-bottom: 96px;           /* laisse la place aux dots */
}

.ha-shop-banner__overlay .ha-container {
    width: 100%;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

.ha-shop-banner__title {
    font-family: 'Fraunces', 'Georgia', serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    color: #fff;
    text-transform: uppercase;
}

.ha-shop-banner__overlay .ornament-kente {
    display: inline-block;
    margin-bottom: 14px;
}

.ha-shop-banner__text {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.5;
    max-width: 640px;
    color: rgba(255, 255, 255, .96);
    margin: 0;
}

/* En mode pleine largeur, la légende des slides (nom + prix + CTA) reste
   utile mais on la déplace en bas à DROITE pour ne pas se marcher dessus
   avec le titre à gauche. On l'aligne aussi à la grille du .ha-container. */
section.ha-shop-banner--carousel figcaption.ha-shop-carousel__caption {
    left: auto;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: min(48%, 520px);
    padding: 24px 5vw 96px 40px;
    text-align: right;
    align-items: flex-end;
    background: linear-gradient(
        to left,
        rgba(0, 0, 0, .55) 0%,
        rgba(0, 0, 0, .35) 55%,
        rgba(0, 0, 0, 0)  100%
    );
}

section.ha-shop-banner--carousel .ha-shop-carousel__title {
    max-width: 100%;
    text-align: right;
}

/* Flèches un peu plus grandes en mode pleine largeur. */
section.ha-shop-banner--carousel button.ha-shop-carousel__arrow {
    width: 54px;
    height: 78px;
}
section.ha-shop-banner--carousel button.ha-shop-carousel__arrow--prev { left: 20px; }
section.ha-shop-banner--carousel button.ha-shop-carousel__arrow--next { right: 20px; }

/* Dots plus visibles */
section.ha-shop-banner--carousel div.ha-shop-carousel__dots {
    bottom: 28px;
}

/* ==========================================================================
   Track (rail horizontal)
   ========================================================================== */
div.ha-shop-carousel__track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: grab;
    transition: transform .7s cubic-bezier(.65, 0, .35, 1);
    will-change: transform;
}

div.ha-shop-carousel__track.is-dragging {
    cursor: grabbing;
    transition: none;
}

/* ==========================================================================
   Slide (1 par vue, plein écran de la fenêtre)
   ========================================================================== */
figure.ha-shop-carousel__slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: block;
}

.ha-shop-carousel__link {
    position: absolute;
    inset: 0;
    display: block;
    color: #fff;
    text-decoration: none;
}

.ha-shop-carousel__link:hover,
.ha-shop-carousel__link:focus {
    color: #fff;
    text-decoration: none;
    outline: none;
}

.ha-shop-carousel__img-wrap {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    background: #1a0e04;
}

.ha-shop-carousel__img-wrap img,
img.ha-shop-carousel__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0;
    padding: 0;
    border: none;
    transform: scale(1);
    transition: transform 9s cubic-bezier(.4, 0, .6, 1);
}

figure.ha-shop-carousel__slide.is-active .ha-shop-carousel__img-wrap img,
figure.ha-shop-carousel__slide.is-active img.ha-shop-carousel__img {
    transform: scale(1.06);
}

/* ==========================================================================
   Légende (nom du produit, prix, CTA) sur dégradé sombre bas
   ========================================================================== */
figcaption.ha-shop-carousel__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 24px 60px;      /* laisse la place aux dots */
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #fff;
    text-align: left;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, .78) 0%,
        rgba(0, 0, 0, .55) 40%,
        rgba(0, 0, 0, .15) 80%,
        rgba(0, 0, 0, 0)  100%
    );
    pointer-events: none;         /* le <a> englobant reste cliquable */
}

.ha-shop-carousel__title {
    font-family: 'Fraunces', 'Georgia', serif;
    font-weight: 600;
    font-size: clamp(1.15rem, 2.2vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    max-width: 80%;
}

.ha-shop-carousel__price {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(.95rem, 1.5vw, 1.15rem);
    color: #FFD79A;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.ha-shop-carousel__price del {
    opacity: .6;
    margin-right: .5em;
    font-weight: 400;
}

.ha-shop-carousel__price ins {
    background: none;
    text-decoration: none;
    color: #FFD79A;
    font-weight: 700;
}

.ha-shop-carousel__cta {
    display: inline-block;
    margin-top: 4px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: .9rem;
    letter-spacing: .02em;
    opacity: .95;
    transition: transform .3s ease, opacity .3s ease;
}

.ha-shop-carousel__link:hover .ha-shop-carousel__cta,
.ha-shop-carousel__link:focus .ha-shop-carousel__cta {
    transform: translateX(4px);
    opacity: 1;
}

/* ==========================================================================
   Flèches
   ========================================================================== */
button.ha-shop-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 46px;
    height: 68px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 5px;
    background: rgba(255, 255, 255, .88);
    color: #1a1a1a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

button.ha-shop-carousel__arrow:hover,
button.ha-shop-carousel__arrow:focus-visible {
    background: #fff;
    color: #C4651A;
    outline: none;
}

button.ha-shop-carousel__arrow--prev { left: 12px; }
button.ha-shop-carousel__arrow--next { right: 12px; }

button.ha-shop-carousel__arrow svg {
    width: 22px;
    height: 22px;
    pointer-events: none;
}

/* ==========================================================================
   Dots
   ========================================================================== */
div.ha-shop-carousel__dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: rgba(0, 0, 0, .42);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 999px;
}

button.ha-shop-carousel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    flex-shrink: 0;
    transition:
        width .4s cubic-bezier(.4, 0, .2, 1),
        background .4s ease;
}

button.ha-shop-carousel__dot:hover,
button.ha-shop-carousel__dot:focus-visible {
    background: rgba(255, 255, 255, .75);
    outline: none;
}

button.ha-shop-carousel__dot.is-active {
    width: 26px;
    border-radius: 999px;
    background: linear-gradient(90deg, #E8A33D 0%, #C4651A 100%);
}

/* ==========================================================================
   Le carrousel prend la place de l'image dans la bannière : on masque
   l'ancien <img> côté « media » quand le carrousel est présent.
   ========================================================================== */
.ha-shop-banner .ha-shop-banner-media:has(.ha-shop-carousel) > img {
    display: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablette : ratio légèrement plus haut (mode « à côté du titre ») */
@media (max-width: 1024px) {
    div.ha-shop-carousel__window {
        padding-top: 75%;
        border-radius: 20px;
    }
    figcaption.ha-shop-carousel__caption {
        padding: 18px 20px 56px;
    }

    /* Pleine largeur : ratio plus généreux (16:9-ish) */
    section.ha-shop-banner--carousel div.ha-shop-carousel__window {
        height: clamp(380px, 62vh, 620px);
        height: clamp(380px, 62dvh, 620px);
    }
    .ha-shop-banner__overlay {
        padding-bottom: 84px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    div.ha-shop-carousel__window {
        padding-top: 100%;        /* carré (mode « à côté du titre ») */
        border-radius: 16px;
    }

    figcaption.ha-shop-carousel__caption {
        padding: 16px 18px 54px;
    }

    button.ha-shop-carousel__arrow {
        width: 38px;
        height: 52px;
    }
    button.ha-shop-carousel__arrow svg {
        width: 18px;
        height: 18px;
    }

    /* Pleine largeur : hauteur adaptée mobile */
    section.ha-shop-banner--carousel div.ha-shop-carousel__window {
        height: clamp(360px, 78vh, 640px);
        height: clamp(360px, 78dvh, 640px);
    }
    section.ha-shop-banner--carousel .ha-shop-banner__title {
        font-size: clamp(1.8rem, 8vw, 2.6rem);
    }
    /* Sur mobile on masque la légende produit (pas assez de place à côté du titre) */
    section.ha-shop-banner--carousel figcaption.ha-shop-carousel__caption {
        display: none;
    }
    .ha-shop-banner__overlay {
        padding-bottom: 76px;
    }
    section.ha-shop-banner--carousel button.ha-shop-carousel__arrow {
        width: 42px;
        height: 58px;
    }
    section.ha-shop-banner--carousel button.ha-shop-carousel__arrow--prev { left: 10px; }
    section.ha-shop-banner--carousel button.ha-shop-carousel__arrow--next { right: 10px; }
}

@media (max-width: 480px) {
    button.ha-shop-carousel__arrow--prev { left: 6px; }
    button.ha-shop-carousel__arrow--next { right: 6px; }
    div.ha-shop-carousel__dots      { bottom: 12px; }

    .ha-shop-carousel__title {
        max-width: 92%;
    }

    section.ha-shop-banner--carousel div.ha-shop-carousel__window {
        height: clamp(340px, 72vh, 560px);
        height: clamp(340px, 72dvh, 560px);
    }
    section.ha-shop-banner--carousel div.ha-shop-carousel__dots {
        bottom: 18px;
    }
}

/* ==========================================================================
   Mode sombre (le thème utilise .dark et/ou [data-theme="dark"])
   ========================================================================== */
.dark div.ha-shop-carousel__window,
[data-theme="dark"] div.ha-shop-carousel__window {
    box-shadow:
        0 28px 65px rgba(0, 0, 0, .55),
        0 6px 16px rgba(0, 0, 0, .25);
}

.dark button.ha-shop-carousel__arrow,
[data-theme="dark"] button.ha-shop-carousel__arrow {
    background: rgba(30, 22, 14, .88);
    color: #FFD79A;
}
.dark button.ha-shop-carousel__arrow:hover,
[data-theme="dark"] button.ha-shop-carousel__arrow:hover {
    background: #1e160e;
    color: #E8A33D;
}

/* ==========================================================================
   Réduction des animations
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    div.ha-shop-carousel__track {
        transition: none;
    }
    figure.ha-shop-carousel__slide.is-active .ha-shop-carousel__img-wrap img,
    figure.ha-shop-carousel__slide.is-active img.ha-shop-carousel__img {
        transform: scale(1);
        transition: none;
    }
    .ha-shop-carousel__cta {
        transition: none;
    }
}