/**
 * Panneau "Ajout au panier", affiché comme contenu du même objet que le
 * bouton engrenage (voir includes/core/frontend.php, assets/css/core.css) :
 * ce fichier ne définit plus que le contenu interne, pas de position ni
 * d'habillage propre.
 */

/* Sans ce reset, "width: 100%" + "padding" sur un bouton/texte du panneau
   (ex. .sticky-add-to-cart, .sticky-out-of-stock) additionne le padding à
   la largeur au lieu de l'inclure dedans, et déborde du panneau. */
.sticky-variation-bar,
.sticky-variation-bar *,
.sticky-variation-bar *::before,
.sticky-variation-bar *::after {
    box-sizing: border-box;
}

/* Le panneau est désormais un simple bloc de contenu affiché à l'intérieur
   du slot partagé #eh-fab-detail (voir includes/core/frontend.php et
   assets/css/core.css) : position, taille et habillage (fond flouté, ombre,
   bordure) sont portés par #eh-fab lui-même, qui EST l'objet visuel unique. */
.sticky-variation-bar {
    width: 100%;

    /* max-height (pas height:100%) : #eh-fab grandit selon son propre contenu
       (height: auto), donc un pourcentage ici ne se résoudrait jamais et la
       zone de défilement plus bas ne saurait jamais quand s'activer. */
    max-height: calc(100vh - 140px);
    min-height: 0;

    /* display: flex est posé par assets/css/core.css (sélecteur par id, plus
       spécifique) : ne pas le redéclarer ici, au risque d'entrer en conflit
       d'ordre de cascade avec la règle qui masque ce panneau par défaut. */
    flex-direction: column;
}

@media (max-width: 1440px) {
    .sticky-variation-bar {
        max-height: calc(100vh - 120px);
    }
}

@media (max-width: 480px) {
    .sticky-variation-bar {
        max-height: calc(100vh - 110px);
    }
}

.sticky-panel-close {
    position: absolute;
    top: 8px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 0;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #333;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    flex-shrink: 0;
}

.sticky-panel-close:hover {
    background: rgba(0, 0, 0, 0.12);
}

/* Seule cette zone défile si le contenu dépasse : la croix, elle, reste
   toujours en place et cliquable dans son intégralité. */
.sticky-panel-scroll {
    flex: 1;
    min-height: 0;

    /* Les deux axes doivent être fixés ensemble : sans overflow-x explicite,
       certains navigateurs activent aussi une barre horizontale dès que le
       contenu déborde d'un pixel, même avec le retour à la ligne des boutons. */
    overflow: hidden auto;

    /* Marge droite plus large que les autres côtés : laisse de la place à la
       barre de défilement, pour qu'elle n'arrive pas juste sous la croix de
       fermeture (position: absolute, hors de cette zone qui défile). */
    padding: 20px 20px 16px 16px;
}

/* ========================================
   Grille (pas de flex imbriqué) : seule façon de placer les MÊMES éléments
   (image, nom, sélecteur de variation, bouton) à deux endroits différents
   selon la largeur d'écran, sans dupliquer le contenu ni le JS qui le
   remplit.

   Desktop/tablette : image à gauche (60px), nom + pastille de couleur +
   liste déroulante de teinte empilés à droite dans la MÊME colonne (le
   panneau panier a sa propre largeur, assets/css/core.css
   [data-detail="sticky-cart"]). 60px plutôt que 72px : pour un produit
   simple (un seul nom, sans variations à côté), une image plus haute que le
   texte laissait un blanc disproportionné.

   Mobile (<=480px, media query plus bas) : le sélecteur de variation
   redescend en pleine largeur, entre la rangée image+nom et le bouton
   d'ajout — la colonne y est trop étroite pour l'accueillir sans qu'il ne
   retombe en colonne faute de place.
   ======================================== */
.sticky-variation-content {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-template-areas:
        "image name"
        "image variations"
        "cart cart";
    gap: 8px 14px;
    opacity: 0;
    will-change: opacity, transform;
}

.sticky-product-image {
    grid-area: image;
    width: 60px;
    height: 60px;
}

.sticky-product-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 0;
}

.sticky-product-info {
    grid-area: name;

    /* Centré (pas "start") : pour un produit simple, sans variations pour
       occuper la colonne, un nom centré à côté de l'image évite qu'il ne
       reste collé en haut avec du vide visible en dessous. */
    align-self: center;

    /* min-width: 0 : sans lui, cette cellule de grille refuserait de se
       réduire sous la largeur naturelle du nom du produit, et pourrait
       déborder du panneau. */
    min-width: 0;
}

.sticky-product-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--eh-color-ink);
    font-family: inherit;
}

.sticky-variation-options {
    grid-area: variations;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Conteneur de la pastille de couleur + liste déroulante de variation (voir
   assets/js/sticky-cart.js, syncVariations). !important sur les propriétés
   de mise en page : le thème/WooCommerce applique parfois ses propres
   règles génériques à ce type de conteneur (display:block...) avec une
   spécificité ou un ordre de chargement qui prend le pas sur les nôtres —
   même raison que le !important déjà posé sur les cases à cocher,
   assets/css/cookie-consent.css. */
.sticky-variation-buttons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Produit simple (sans variations, voir syncSimpleProduct, assets/js/sticky-cart.js
   qui retire complètement .sticky-variation-options du DOM) : la zone
   "variations" de la grille disparaît entièrement, pas seulement son
   contenu — sinon la ligne et le row-gap qui l'entourent laissaient un
   blanc entre le nom et le bouton, même sans rien à y afficher. Spécificité
   plus élevée que les règles ci-dessus (et la media query mobile plus bas) :
   gagne sur les deux, pas besoin de la répéter par point de rupture. */
.sticky-variation-bar.simple-product .sticky-variation-content {
    grid-template-areas:
        "image name"
        "cart cart";
}

/* Le sélecteur de variation redescend en pleine largeur, entre la rangée
   image+nom et le bouton d'ajout : la colonne à droite de l'image est ici
   trop étroite pour l'accueillir sans qu'il ne retombe en colonne faute de
   place (voir grid-template-areas plus haut pour la disposition
   desktop/tablette). Cette règle doit rester déclarée APRÈS la règle de
   base .sticky-variation-content ci-dessus : à spécificité égale, c'est
   l'ordre dans le fichier qui décide, pas la media query elle-même. */
@media (max-width: 480px) {
    .sticky-variation-content {
        grid-template-areas:
            "image name"
            "variations variations"
            "cart cart";
    }

    .sticky-variation-options {
        align-self: start;
    }
}

/* Sélecteur de teinte personnalisé (voir assets/js/sticky-cart.js,
   syncVariations) : un déclencheur (pastille + nom + chevron) qui déplie une
   liste de teintes juste en dessous, chacune avec sa propre pastille de
   couleur — impossible avec un <select> natif, dont les navigateurs ignorent
   le style des <option>. flex: 1 1 auto sur le déclencheur : occupe toute la
   largeur disponible dans .sticky-variation-buttons (voir plus haut). */
.sticky-shade-picker {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}

/* Cadre neutre fixe, volontairement PAS teinté à la couleur de la teinte
   choisie (contrairement à l'option sélectionnée dans la liste ouverte,
   plus bas) : la couleur ne doit apparaître que dans la liste dépliée, pas
   sur le déclencheur à l'état fermé. */
.sticky-shade-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid rgba(var(--eh-color-ink-rgb), 0.18);
    background: var(--eh-color-surface);
    color: var(--eh-color-ink);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border-radius: 0;
}

/* Pastille de couleur de la teinte affichée (déclencheur) ou listée (menu
   déplié ci-dessous), lue depuis les vignettes WCBoost Variation Swatches de
   la fiche produit (voir getSwatchColor, assets/js/sticky-cart.js). Carrée
   avec un simple filet 1px (pas un rond) : reprend le traitement des
   vignettes WCBoost elles-mêmes (box-shadow/border 1px, aucun border-radius),
   pour que la pastille se lise comme un prolongement du même composant.
   Teintée d'accent (rose de marque) plutôt que d'encre neutre : lien visuel
   avec le reste de l'identité de marque. Taille fixe, ne rétrécit jamais. */
.sticky-shade-trigger-swatch,
.sticky-shade-option-swatch {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 0;
    border: 1px solid rgba(var(--eh-color-accent-rgb), 0.45);
}

/* Aucune couleur trouvée pour la teinte (vignette WCBoost absente ou non
   reconnue) : pastille vide plutôt qu'un carré de couleur trompeur, filet
   neutre (encre) plutôt qu'accent puisqu'il n'y a pas de couleur à
   accompagner. */
.sticky-shade-swatch--empty {
    background: transparent !important;
    border-color: rgba(var(--eh-color-ink-rgb), 0.2);
    border-style: dashed;
}

.sticky-shade-trigger-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron qui se retourne à l'ouverture (voir aria-expanded posé par
   setShadePickerOpen, assets/js/sticky-cart.js) : seul signal nécessaire, pas
   besoin d'animer autre chose sur le déclencheur lui-même. */
.sticky-shade-trigger-arrow {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.sticky-shade-trigger[aria-expanded="true"] .sticky-shade-trigger-arrow {
    transform: rotate(180deg);
}

/* Volet EN LIGNE (pas en survol flottant) : .sticky-panel-scroll, le
   conteneur qui défile déjà tout le panneau, a overflow:hidden sur son axe
   horizontal — un menu positionné en absolute risquerait d'y être rogné. En
   flux normal, il repousse simplement le bouton d'ajout en dessous, sans
   aucun risque de rognage ni de calcul de position.

   Fermé par défaut (max-height:0 + opacity:0 + overflow:hidden), PAS
   l'attribut "hidden" (voir assets/js/sticky-cart.js) : permet une
   transition douce à l'ouverture, pilotée par la classe
   .sticky-shade-picker--open. Grille de 2 colonnes de "puces" teinte
   (pastille + nom), plutôt qu'une liste verticale plate : plus visuel et
   plus compact pour jusqu'à 10 teintes, et fait écho à la présentation en
   grille des vraies vignettes WCBoost sur la fiche produit. */
.sticky-shade-listbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;

    /* TOUT ce qui pourrait laisser un résidu visible à l'état fermé est à 0
       ici (pas seulement max-height) et transitionné vers sa valeur réelle à
       l'ouverture : un simple max-height:0 avec un border-width non nul
       aurait pu, selon la file d'attente CSS.- laisser 1 à 3px de bordure
       perceptibles. Défensif plutôt que de se fier uniquement au
       recouvrement par max-height + overflow:hidden. */
    margin: 0;
    padding: 0;
    list-style: none;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    background: var(--eh-color-surface);
    max-height: 0;
    opacity: 0;
    overflow: hidden auto;
    pointer-events: none;
    transition: max-height 0.25s ease, opacity 0.2s ease, border-color 0.2s ease,
                border-width 0.25s ease, margin-top 0.25s ease, padding 0.25s ease;
}

.sticky-shade-picker--open .sticky-shade-listbox {
    margin-top: 6px;
    padding: 6px;
    border-width: 1.5px;
    border-color: rgba(var(--eh-color-ink-rgb), 0.18);

    /* Assez pour ~5 lignes de 2 colonnes ; au-delà, le reste défile dans ce
       volet plutôt que d'allonger démesurément tout le panneau panier. */
    max-height: 280px;
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .sticky-shade-listbox {
        transition: none;
    }
}

.sticky-shade-option {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid rgba(var(--eh-color-ink-rgb), 0.12);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sticky-shade-option:hover,
.sticky-shade-option:focus {
    background: rgba(var(--eh-color-ink-rgb), 0.05);
    outline: none;
}

/* Repli seulement : assets/js/sticky-cart.js (updateShadeTrigger) teinte
   directement fond/bordure avec la VRAIE couleur de la teinte choisie (style
   inline, prioritaire), pour que la puce sélectionnée s'accorde à la couleur
   réelle plutôt qu'à un accent de marque générique. Cette règle ne s'applique
   que si aucune couleur n'a été trouvée (vignette WCBoost absente/non
   reconnue) — fond + bordure teintés d'accent plutôt qu'un cadre neutre. */
.sticky-shade-option--selected {
    background: rgba(var(--eh-color-accent-rgb), 0.12);
    border-color: rgba(var(--eh-color-accent-rgb), 0.5);
}

.sticky-shade-option-label {
    min-width: 0;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-shade-trigger:focus-visible,
.sticky-shade-option:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

/* Zone bouton d'ajout + message de rupture : dernière zone de la grille,
   toujours en pleine largeur (voir grid-template-areas plus haut). */
.sticky-availability {
    grid-area: cart;
}

/* Calqué sur le vrai bouton "Ajouter au panier" du thème Beleco (mesuré en
   direct sur la fiche produit) : fond noir, texte crème, AUCUN
   border-radius, bordure 1px, padding généreux (~17px/28px sur le vrai
   bouton, en pleine largeur de page — ici un peu resserré pour le panneau
   plus étroit de la sticky bar), texte en graisse normale (400, pas 600) et
   à peine plus grand que 12px avec un soupçon d'espacement — le vrai bouton
   n'a rien d'un bouton "gras" générique de plugin. */
.sticky-add-to-cart {
    font-family: inherit;
    width: 100%;
    padding: 16px 20px;
    background: var(--eh-color-ink);
    color: var(--eh-color-surface);
    border: 1px solid var(--eh-color-ink);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.sticky-add-to-cart:hover:not(:disabled) {
    background: var(--eh-color-surface);
    color: var(--eh-color-ink);
    box-shadow: 0 8px 18px rgba(var(--eh-color-ink-rgb), 0.2);
}

.sticky-add-to-cart:disabled {
    background: var(--eh-color-ink);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Remplace le bouton (masqué) quand le produit/la variation est en rupture.
   Fond/texte teintés d'encre (comme le reste du panneau), pas un gris
   neutre #eee/#666 propre à cet état. */
.sticky-out-of-stock {
    width: 100%;
    padding: 16px 20px;
    background: rgba(var(--eh-color-ink-rgb), 0.06);
    color: var(--eh-color-ink-soft);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

/* État de chargement du bouton */
.sticky-add-to-cart.loading {
    background: var(--eh-color-ink);
    cursor: wait;
    pointer-events: none;
}

.sticky-add-to-cart .loading-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sticky-add-to-cart .loading-text::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid var(--eh-color-surface);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Confirmation brève après un ajout réussi : seul signal explicite si le
   mini-panier n'est pas dans le champ de vision de l'utilisateur. */
.sticky-add-to-cart.added {
    background: #2f6b45;
    cursor: default;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Pas de couleur propre ici : .sticky-price est imbriqué DANS
   .sticky-add-to-cart (voir le template HTML, createStickyBar,
   assets/js/sticky-cart.js), donc hérite naturellement sa couleur — crème
   au repos, encre au survol (voir .sticky-add-to-cart:hover ci-dessus) —
   exactement comme le reste du texte du bouton, sur demande explicite (pas
   de mise en avant séparée du prix). */
.sticky-price {
    font-weight: 600;
}

/* ========================================
   PRODUITS SIMPLES (sans variations)
   ======================================== */
.sticky-variation-bar.simple-product .sticky-variation-options {
    display: none !important;
}

/* Léger fondu du contenu à l'apparition (le grandissement de l'objet
   partagé lui-même est géré par #eh-fab, assets/css/core.css). */
.sticky-variation-bar.visible .sticky-variation-content {
    animation: contentFade 0.3s ease-out 0.08s both;
}

@keyframes contentFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sticky-variation-bar.visible .sticky-variation-content {
        animation: none;
    }
}

/* Focus clavier visible, cohérent avec les panneaux cookies/accessibilité. */
.sticky-panel-close:focus-visible,
.sticky-add-to-cart:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}