/* Nature & Limousin — Quick View produit : icône œil + mise en page de la modale.
   Tout ce fichier est libre à modifier (couleurs, tailles, espacements,
   disposition) : le JS ne fait qu'ajouter/retirer des classes, jamais de style
   inline qui pourrait entrer en conflit. */

/* Le conteneur direct de chaque produit doit être en position relative pour que
   l'icône se positionne correctement en haut à droite. Ajustez le sélecteur si
   votre grille utilise une autre classe (vérifiez dans l'inspecteur du navigateur). */
.wc-block-product-template__product,
li.product,
.type-product {
    position: relative;
}

.nl-quickview-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #fff;
    /* box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    /* Masquée par défaut : n'apparaît qu'au survol de la carte produit (règles
     ci-dessous). pointer-events: none tant qu'elle est masquée, pour ne pas
     bloquer les clics sur l'image/le lien produit en dessous. */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s ease-in-out, background 0.55s ease-in-out, transform 0.55s ease-in-out;
}

.nl-quickview-btn:hover {
    background: #eeab00;
    transform: scale(1.05);
}

.nl-quickview-btn svg {
    width: 18px;
    height: 18px;
}

/* Couleur de l'icône (attribut stroke="#333" en dur dans le SVG posé en bloc
   HTML personnalisé dans l'éditeur de site : le SVG n'utilise pas
   stroke="currentColor", donc la propriété CSS color du bouton n'a aucune
   prise dessus. On cible directement les formes du SVG avec les couleurs de
   la palette du thème (variables --wp--preset--color--*, voir theme.json). */
.nl-quickview-btn svg path,
.nl-quickview-btn svg circle {
    stroke: var(--wp--preset--color--contrast);
}

.nl-quickview-btn:hover svg path,
.nl-quickview-btn:hover svg circle {
    stroke: var(--wp--preset--color--base);
}

/* Apparition au survol (ou au focus clavier, pour l'accessibilité) de la
   carte produit. Reprend les mêmes sélecteurs que la règle position:relative
   ci-dessus : si vous l'avez ajustée pour votre markup, ajustez celle-ci de
   la même façon. */
.wc-block-product-template__product:hover .nl-quickview-btn,
.wc-block-product-template__product:focus-within .nl-quickview-btn,
li.product:hover .nl-quickview-btn,
li.product:focus-within .nl-quickview-btn,
.type-product:hover .nl-quickview-btn,
.type-product:focus-within .nl-quickview-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Sur les appareils sans souris (tactile), il n'y a pas de survol possible :
   l'icône reste donc visible en permanence pour rester utilisable. */
@media (hover: none) {
    .nl-quickview-btn {
        opacity: 1;
        pointer-events: auto;
    }
}

/* --- Conteneur de la popup ---
   Structure attendue dans le contenu de la popup Popup Maker (voir
   INSTRUCTIONS-quickview.md) :
   <div id="nl-qv-content">
     <div class="nl-qv-spinner"></div>
     <div id="nl-qv-body">...</div>
   </div>
   #nl-qv-body est entièrement régénéré par le JS à chaque produit affiché ;
   .nl-qv-spinner n'est jamais touché par le JS, seule sa visibilité change. */

#nl-qv-content {
    position: relative;
    min-height: 80px;
    /* évite un flash de hauteur nulle pendant le chargement */
}

/* --- Roue de chargement --- */

.nl-qv-spinner {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.75);
    z-index: 10;
}

#nl-qv-content.is-loading .nl-qv-spinner {
    display: flex;
}

.nl-qv-spinner::after {
    content: "";
    width: 36px;
    height: 36px;
    border: 3px solid #ddd;
    border-top-color: #333;
    border-radius: 50%;
    animation: nl-qv-spin 0.7s linear infinite;
}

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

/* --- Confirmation d'ajout au panier (voir showAddedOverlay dans le JS) ---
   Recouvre tout le contenu de la popup, au-dessus de la roue de chargement
   (z-index supérieur), avec une coche qui se dessine puis un texte. Couleurs,
   taille, texte : librement modifiables ci-dessous. */

.nl-qv-success-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.97);
    animation: nl-qv-fade-in 0.2s ease;
}

.nl-qv-success-check {
    width: 72px;
    height: 72px;
}

.nl-qv-success-check-circle {
    stroke: #eeab00;
    stroke-width: 2;
    stroke-dasharray: 152;
    stroke-dashoffset: 152;
    animation: nl-qv-draw 0.4s ease-out forwards;
}

.nl-qv-success-check-mark {
    stroke: #eeab00;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: nl-qv-draw 0.3s ease-out 0.35s forwards;
}

.nl-qv-success-text {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: #eeab00;
}

@keyframes nl-qv-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes nl-qv-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* --- Contenu produit (généré par le JS dans #nl-qv-body) --- */

.nl-qv-grid {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.nl-qv-image {
    flex: 1 1 260px;
    max-width: 320px;
    align-self: flex-start; /* ne pas s'étirer à la hauteur du bloc infos */
}

/* Sélecteur volontairement plus spécifique que le `.img-produits img` du thème
   (classe posée aussi ici sur .nl-qv-image, pour le zoom au survol + le rognage) :
   dans l'aperçu on garde le ratio naturel de la photo produit, pas de object-fit
   cover qui la recadrerait. */
.nl-qv-grid .nl-qv-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.nl-qv-infos {
    flex: 1 1 260px;
    min-width: 0;
}

.nl-qv-title {
    margin: 0 0 0.5rem;
    font-size: 1.4rem;
}

.nl-qv-price {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.nl-qv-desc {
    margin-bottom: 1rem;
}

.nl-qv-cta {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    margin: 0.5rem 0 1rem;
    background: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font: inherit;
}

.nl-qv-cta:hover {
    background: #555;
}

/* Produits avec options : bouton non cliquable tant que la combinaison n'est
   pas complète, ou que la variante choisie est en rupture de stock. Comme le
   JS ne fait que retirer l'attribut href dans ce cas (pas de style inline),
   ce sélecteur gère uniquement l'apparence. */
.nl-qv-cta.is-disabled {
    background: #ccc;
    color: #777;
    cursor: not-allowed;
    pointer-events: none;
}

/* Pendant l'appel à l'API Store (voir performStoreApiAddToCart dans le JS) :
   évite le double-clic et donne un retour visuel immédiat. */
.nl-qv-cta.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Message inséré juste après le bouton par showCtaFeedback() : confirmation
   "Ajouté au panier" ou message d'erreur (rupture de stock, etc.). */
.nl-qv-cta-feedback {
    font-size: 0.85rem;
    margin: 0.25rem 0 0.75rem;
    color: #eeab00;
}

.nl-qv-cta-feedback.is-error {
    color: #b3261e;
}

/* --- Sélecteur de variantes (produits avec options) --- */

.nl-qv-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.nl-qv-attr-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.nl-qv-attr {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font: inherit;
    font-weight: normal;
    background: #fff;
}

/* Produit publié mais non vendable (tarif retiré, ou produit variable dont
   les variantes n'ont plus de tarif) : message à la place du bouton d'achat.
   Le lien "Voir la fiche complète" reste affiché juste en dessous. */
.nl-qv-unavailable {
    margin: 0.5rem 0 1rem;
    padding: 0.6rem 0.8rem;
    background: #f4f0e6;
    border-left: 3px solid #eeab00;
    color: #472e23;
    font-size: 0.95rem;
}

.nl-qv-link {
    display: block;
    font-size: 0.9rem;
}

.nl-qv-error {
    padding: 1rem 0;
}