/* ================================================
   Nunshen - Listing Produit JetEngine
   Centralisé via MU-plugin | Cyloé v1.0.0
   Préfixe de test : .listing-produit-v2
   ================================================ */


/* -----------------------------------------------
   1. STRUCTURE DE LA CARTE
   ----------------------------------------------- */

.listing-produit-v2 {
    position: relative;
    height: 740px;
}

/* Le conteneur interne principal occupe toute la hauteur */
.listing-produit-v2 > .e-con-inner,
.listing-produit-v2 .bloc-texte,
.listing-produit-v2 .bloc-texte .e-con-inner {
    height: 100%;
}


/* -----------------------------------------------
   2. IMAGES — SWAP AU SURVOL
   Le conteneur <a> qui entoure les deux images
   doit être le repère de positionnement.
   ----------------------------------------------- */

/* Le <a> qui contient les deux images */
.listing-produit-v2 .bloc-texte .e-con-inner > a {
    position: relative;
    overflow: hidden;
    display: block;
}

.listing-produit-v2 .premiere-image {
    opacity: 1;
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 1;
}

.listing-produit-v2 .second-image {
    opacity: 0;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2;
    transition: opacity 0.3s ease;
}

/* Les images à l'intérieur des widgets JetEngine */
.listing-produit-v2 .premiere-image .jet-listing-dynamic-image,
.listing-produit-v2 .second-image .jet-listing-dynamic-image {
    line-height: 0;
}

.listing-produit-v2 .premiere-image img,
.listing-produit-v2 .second-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.listing-produit-v2:hover .premiere-image {
    opacity: 0;
}

.listing-produit-v2:hover .second-image {
    opacity: 1;
}


/* -----------------------------------------------
   3. BLOC TEXTE — SWAP DESCRIPTION / PANIER
   
   Architecture :
   - .e-con-inner est le flex container réel (e-con-boxed)
   - .description en position:absolute → hors du flux,
     ne modifie pas la hauteur du parent
   - .conteneur-panier dans le flux, visibility:hidden
     → occupe la place en permanence (pas de rebond)
   - Pour les produits simples : .prix-listing s'affiche
     au survol (widget conditionné simple uniquement)
   - Pour les produits variables : le prix est dans
     .conteneur-panier (woocommerce-variation-price)
   ----------------------------------------------- */

/* Repère de positionnement pour la description absolue */
.listing-produit-v2 .bloc-texte,
.listing-produit-v2 .bloc-texte .e-con-inner {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
}

/* Description et conteneur-panier se partagent l'espace vertical */
.listing-produit-v2 .description,
.listing-produit-v2 .conteneur-panier {
    flex: 1 !important;
}

/* Description : dans le flux, visible par défaut */
.listing-produit-v2 .description {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: 2;
    background-color: #F4F0EC;
    padding: 0;

}

/* Réduire l'espace entre le séparateur et la description */
.listing-produit-v2 .elementor-widget-divider {
    margin-bottom: 4px !important;
    padding-bottom: 0 !important;
}

.listing-produit-v2 .description.elementor-widget {
    margin-top: 20px !important;
    padding-top: 0 !important;
}

/* Prix produit simple : masqué par défaut */
.listing-produit-v2 .prix-listing {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    margin: 0 !important;
    padding: 0 !important;
}

/* Conteneur panier : dans le flux, masqué par défaut, contenu centré verticalement */
/* visibility:hidden conserve l'espace → pas de rebond */
.listing-produit-v2 .conteneur-panier {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 !important;
}

/* Au survol : masquer la description */
.listing-produit-v2:hover .description {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Au survol : afficher le prix (produits simples) */
.listing-produit-v2:hover .prix-listing {
    opacity: 1;
    visibility: visible;
}

/* Au survol : afficher le panier */
.listing-produit-v2:hover .conteneur-panier {
    opacity: 1;
    visibility: visible;
}


/* -----------------------------------------------
   4. SWATCHES DE VARIATIONS — LISTING
   ----------------------------------------------- */

/* Masquer le label et le span woo-selected */
.listing-produit-v2 .variations th,
.listing-produit-v2 .variations th label,
.listing-produit-v2 .variations th .woo-selected-variation-item-name,
.listing-produit-v2 .woo-variation-swatches .variations th {
    display: none !important;
}

/* Fond uniforme sur le tableau et ses cellules */
.listing-produit-v2 table.variations,
.listing-produit-v2 table.variations tr,
.listing-produit-v2 .variations td,
.listing-produit-v2 .variations .value,
.listing-produit-v2 .variations tbody tr > td,
.listing-produit-v2 .variations tbody tr:hover > td,
.listing-produit-v2 td.value.woo-variation-items-wrapper {
    background-color: #F4F0EC !important;
    border: none !important;
}

/* Fond transparent sur le wrapper, les items et la zone prix/panier */
.listing-produit-v2 .variable-items-wrapper,
.listing-produit-v2 .variable-item,
.listing-produit-v2 .variable-item-contents,
.listing-produit-v2 li.variable-item {
    background-color: transparent !important;
    background: transparent !important;
}

/* Fond transparent zone prix + boutons */
.listing-produit-v2 .single_variation_wrap,
.listing-produit-v2 .woocommerce-variation,
.listing-produit-v2 .woocommerce-variation-add-to-cart,
.listing-produit-v2 .variations_button {
    background-color: transparent !important;
    background: transparent !important;
}

.listing-produit-v2 .reset_variations,
.listing-produit-v2 .reset_variations a,
.listing-produit-v2 .rd-selection-alert {
    display: none !important;
}

.listing-produit-v2 .woo-variation-items-wrapper {
    padding: 0 !important;
}

/* Swatches — taille listing */
.listing-produit-v2 .variable-items-wrapper .variable-item.image-variable-item {
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    min-height: 74px !important;
    margin: 2px !important;
}

/* Swatches centrés avec gap fixe */
.listing-produit-v2 .variable-items-wrapper {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Espace au-dessus des swatches (entre séparateur et variations) */
.listing-produit-v2 form.cart .variations {
    margin-top: 8px !important;
    margin-bottom: 24px !important;
}


/* -----------------------------------------------
   5. BOUTONS QUANTITE ET PANIER — LISTING
   ----------------------------------------------- */

.listing-produit-v2 button.minus,
.listing-produit-v2 button.plus {
    margin: 0 !important;
    border: none !important;
    background-color: #ECEAE8 !important;
    color: #000 !important;
    padding: 5px;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
}

.listing-produit-v2 input[type=number] {
    margin: 0 !important;
    border: none !important;
    background-color: #F7F5F1 !important;
    padding: 5px !important;
    color: #000 !important;
    font-size: 0.8rem !important;
}

.listing-produit-v2 .quantity input.qty {
    -moz-appearance: textfield;
    appearance: textfield;
}

.listing-produit-v2 .quantity input.qty::-webkit-inner-spin-button,
.listing-produit-v2 .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.listing-produit-v2 button.button.alt.disabled,
.listing-produit-v2 button.wc-variation-selection-needed,
.listing-produit-v2 .variations_button.woocommerce-variation-add-to-cart-disabled button.wc-variation-is-unavailable {
    background-color: #fff !important;
    color: #fff;
}


/* -----------------------------------------------
   6. SWATCHES — GLOBAL (fiche produit + autres)
   ----------------------------------------------- */

.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected,
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.variable-item.image-variable-item {
    width: 74px !important;
    height: 74px !important;
    margin: 2px !important;
}

.woocommerce-variation-description {
    display: none;
}

td.value.woo-variation-items-wrapper {
    border: none;
}

.reset_variations {
    display: none;
}

.woo-variation-items-wrapper {
    padding: 0 !important;
}


/* -----------------------------------------------
   7. PRIX — GLOBAL (fiche produit)
   ----------------------------------------------- */

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
    color: #000;
    font-size: 20px;
    float: left !important;
    font-family: "CORE SANS", Sans-serif;
    font-weight: 400;
}

.woocommerce-variation-price {
    float: left !important;
}


/* -----------------------------------------------
   8. BOUTONS +/- — GLOBAL (fiche produit)
   ----------------------------------------------- */

button.minus,
button.plus {
    margin: 0 !important;
    border: none !important;
    background-color: #ECEAE8 !important;
    color: #000 !important;
    padding: 5px;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
}

.woocommerce .quantity input.qty {
    -moz-appearance: textfield;
    appearance: textfield;
}

.woocommerce .quantity input.qty::-webkit-inner-spin-button,
.woocommerce .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}