/* ==========================================================
   CONTENEUR PRINCIPAL
   ========================================================== */

/* Conteneur WooCommerce du produit */
.single-product div.product {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    column-gap: 48px;
    row-gap: 30px;
    width: 100%;
    margin: 0 auto;
    align-items: start;
    box-sizing: border-box;
}

/* Évite les débordements de contenu */
.single-product div.product > * {
    min-width: 0;
}

/* ==========================================================
   DESCRIPTION ET PRODUITS SIMILAIRES
   ========================================================== */

/* La galerie reste dans la première colonne */
.single-product div.product > .woocommerce-product-gallery {
    grid-column: 1;
}

/* Le résumé reste dans la deuxième colonne */
.single-product div.product > .summary {
    grid-column: 2;
}

/* La description complète passe sous les deux colonnes */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .woocommerce-product-details__short-description,
.single-product div.product > .related,
.single-product div.product > .upsells {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

/* Les onglets de description prennent toute la largeur */
.single-product div.product .woocommerce-tabs {
    clear: both;
    margin-top: 24px;
}

/* Les produits similaires apparaissent en dessous */
.single-product div.product .related,
.single-product div.product .upsells {
    clear: both;
    margin-top: 30px;
}

/* La grille des produits similaires reste responsive */
.single-product div.product .related ul.products,
.single-product div.product .upsells ul.products {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}

/* container de note étoile d'un produit */
.woocommerce ul.products li.product .star-rating {
    font-size: .857em;
    display: flex;
    width: 100%;
}
/* note réél étoile */
.woocommerce .star-rating span::before {
    content: "SSSSS";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -1%);
}
/* calc container note étoile */
.woocommerce .star-rating::before {
    content: "sssss";
    color: #cfc8d8;
    float: left;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}


/* ==========================================================
   COLONNE GAUCHE : GALERIE PRODUIT
   ========================================================== */

/*
 * .woocommerce-product-gallery
 * Contient l'image principale et les éventuelles miniatures.
 */

.single-product div.product .woocommerce-product-gallery {
    position: relative;
    float: none !important;
    width: 100% !important;
    max-width: none;
    margin: 0 !important;
}

/* Image principale */
.single-product .woocommerce-product-gallery
.woocommerce-product-gallery__wrapper {
    min-height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.single-product .woocommerce-product-gallery
.woocommerce-product-gallery__image {
    overflow: hidden;
    border: 1px solid #888888;
    border-radius: 9px;
    background: #ffffff;
}

.single-product .woocommerce-product-gallery
.woocommerce-product-gallery__image a {
    display: block;
}

.single-product .woocommerce-product-gallery
.woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: 430px;
    margin: 0;
    padding: 12px;
    object-fit: contain;
    object-position: center;
}

/* Zoom léger au survol */
.single-product .woocommerce-product-gallery
.woocommerce-product-gallery__image img {
    transition: transform 0.3s ease;
}

.single-product .woocommerce-product-gallery
.woocommerce-product-gallery__image:hover img {
    transform: scale(1.02);
}

/* ==========================================================
   COLONNE DROITE : INFORMATIONS PRODUIT
   ========================================================== */

/*
 * .summary
 * Contient le titre, le prix, la description,
 * les variations et le formulaire d'achat.
 */

.single-product div.product .summary {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0;
}

/* Titre principal */
.single-product .product .product_title {
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(26px, 2.5vw, 30px);
    font-weight: 700;
    line-height: 1.2;
}

/* Description courte WooCommerce */
.single-product .summary .woocommerce-product-details__short-description {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
}

.single-product .summary
.woocommerce-product-details__short-description p {
    margin: 0 0 8px;
}

/* ==========================================================
   PRIX
   .summary > .price
   ========================================================== */

.single-product .summary > .price,
.single-product .summary p.price {
    display: block;
    margin: 0 0 15px;
    color: #5B977A!important;
    font-size: 26px!important;
    font-weight: 700;
    line-height: 1.2;
}

.single-product .summary .price del {
    color: #888888;
    font-size: 0.75em;
    font-weight: 400;
}

.single-product .summary .price ins {
    color: #5B977A;
    text-decoration: none;
}

/* ==========================================================
   QUANTITÉ ET BOUTON D'ACHAT
   ========================================================== */

/* Formulaire d'ajout au panier */
.single-product .summary form.cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 26px;
}

/* Contrôle de quantité */
.single-product .summary form.cart .quantity {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin: 0 !important;
    border: 1px solid #777777;
    border-radius: 5px;
    overflow: hidden;
}

/* Bouton Ajouter au panier */
.single-product .summary form.cart .single_add_to_cart_button {
    margin-left: 5px;
    border-radius: 7px;
    font-family: inherit;
    font-weight: 700;
    padding: 14px 13px;
}

/* ==========================================================
   PRIX VARIATION dynamique
   ========================================================== */
.woocommerce div.product form.cart .reset_variations {
    display: none!important;
}

/* ==========================================================
   BOUCHON : apparence radio
   ========================================================== */
/* Masquer visuellement les menus WooCommerce */
.variations_form .variations select {
    display: none!important;
}

/* Conteneur des boutons */
.variation-custom-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom:0;
}

/* Boutons de variation */
.variation-custom-option {
    border: 1px solid #d9d9d0;
    background: #fff;
    color: #333;
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    text-align: center;
    min-width: 100px;
    transition: all 0.2s ease;
}

/* Volume : prix sous le libellé */
.variation-custom-option .option-price {
    display: block;
    margin-top: 0;
    font-size: 14px;
    font-weight: 600;
    color: #5B977A;
}

/* Option sélectionnée */
.variation-custom-option.is-selected {
    background: #5B977A;
    border-color: #5B977A;
    color: #fff;
}

.variation-custom-option.is-selected .option-price {
    color: #fff;
}

/* Option indisponible */
.variation-custom-option:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Titres des attributs */
.variations th.label {
    display: block;
    text-align: left;
    padding-bottom: 8px;
}

.variations td.value {
    display: block;
    padding: 0;
}

/* Retirer le style de carte uniquement pour Bouchon */
.variations tr:has(select[name="attribute_pa_bouchon"])
.variation-custom-options {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 0 18px;
}

.variations tr:has(select[name="attribute_pa_bouchon"])
.variation-custom-option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 3px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #333;
    text-align: left;
    margin-right: 20px;
}

/* Cercle du radio */
.variations tr:has(select[name="attribute_pa_bouchon"])
.variation-custom-option::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1.5px solid #5B977A;
    border-radius: 50%;
    background: white;
    box-sizing: border-box;
}

/* Radio sélectionné */
.variations tr:has(select[name="attribute_pa_bouchon"])
.variation-custom-option.is-selected::before {
    border: 5px solid #5B977A;
}

/* Pas de prix à côté du bouchon */
.variations tr:has(select[name="attribute_pa_bouchon"])
.option-price {
    display: none !important;
}

/* ==========================================================
   QUANTITÉ : bouton + et - 
   ========================================================== */
.quantity {
    display: inline-flex !important;
    align-items: center;
    gap: 0;
    border: 1px solid #d9d9d0;
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
    vertical-align: middle;
}

.quantity .qty-button {
    width: 38px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #fff;
    color: #333;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}

.quantity .qty-button:hover {
    background: #f3f4ee;
    color: #5B977A;
}

.quantity input.qty {
    width: 42px !important;
    min-width: 42px;
    height: 42px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

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

/* ==========================================================
   prix unitaire variable
   ========================================================== */
.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: #5B977A;
    font-size: 22px;
    font-weight: bold;
}


/* ==========================================
   ONGLETS DE LA FICHE PRODUIT WOOCOMMERCE
   ========================================== */

/* Conteneur général des onglets */
.single-product .woocommerce-tabs {
    margin-top: 35px;
    border-top: 1px solid #e8e8e4;
}

/* Liste des onglets */
.single-product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 26px;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #d8d8d3;
    background: transparent;
}

/* Supprimer les styles natifs des éléments */
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
    content: none !important;
}

/* Chaque onglet */
.single-product .woocommerce-tabs ul.tabs li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Texte des onglets */
.single-product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 0 8px !important;
    color: #111 !important;
    font-size: 20px;
    font-weight: 400 !important;
    line-height: 1.4;
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

/* Onglet actif */
.single-product .woocommerce-tabs ul.tabs li.active a {
    color: #71804b !important;
    border-bottom-color: #71804b;
    font-weight: 500 !important;
}

/* Survol */
.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: #71804b !important;
}

/* ==========================================
   CONTENU DES ONGLETS
   ========================================== */

/* Zone de contenu */
.single-product .woocommerce-tabs .panel {
    margin: 0 !important;
    padding: 10px 18px 20px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Titre du contenu, ex. « Description » */
.single-product .woocommerce-tabs .panel > h2 {
    margin: 0 0 10px !important;
    color: #111;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.4;
}

/* Paragraphes */
.single-product .woocommerce-tabs .panel p {
    margin: 0 0 8px;
    color: #171717;
    line-height: 1.5;
}

/* Table des informations complémentaires */
.single-product .woocommerce-tabs .shop_attributes {
    border-collapse: collapse;
    border: 0;
    font-size: 13px;
}

.single-product .woocommerce-tabs .shop_attributes th,
.single-product .woocommerce-tabs .shop_attributes td {
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid #e8e8e4;
    background: transparent;
    text-align: left;
}

/* Formulaire et avis clients */
.single-product .woocommerce-tabs #reviews,
.single-product .woocommerce-tabs #review_form_wrapper {
    font-size: 13px;
}

.single-product .woocommerce-tabs #reviews h2,
.single-product .woocommerce-tabs #review_form_wrapper h3 {
    font-size: 21px;
    font-weight: 400;
}



@media (min-width: 992px) and (max-width: 1199.98px) {
    #container-section-nav {
        font-size: 13px;
    }
    .single-product div.product {
        margin-top: 30px;
    }
}

/* ==========================================================
   RESPONSIVE — TABLETTES
   ========================================================== */

@media (max-width: 991.98px) {
    .single-product div.product .related ul.products,
    .single-product div.product .upsells ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .single-product div.product {
        column-gap: 28px;
        padding: 20px;
    }

    .single-product .woocommerce-product-gallery
    .woocommerce-product-gallery__image img {
        height: 360px;
    }

    .single-product .product .product_title {
        font-size: 26px;
    }

    /* La grille des produits similaires reste responsive */
    .single-product div.product .related ul.products,
    .single-product div.product .upsells ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .single-product div.product > .woocommerce-product-gallery {
        grid-column: 1 / -1;
    }

    /* container btn +/- & ajout panier */
    .single_variation_wrap {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* btn ajout panier */
    .single-product .summary form.cart .single_add_to_cart_button {
        padding: 11px 13px;
    }

    /* Image principale */
    .single-product .woocommerce-product-gallery
    .woocommerce-product-gallery__wrapper {
        min-height: 0;
    }

    /* cible le container du prix variable */
    .single_variation_wrap .woocommerce-variation {
        align-items: center;
        display: flex;
        margin-right: 10px;
    }

    /* tableau d'option d'achat */
    .woocommerce div.product form.cart .variations {
        margin-bottom: 1em;
        border: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .woocommerce div.product div.summary {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* ==========================================================
   RESPONSIVE — MOBILES
   ========================================================== */

@media (max-width: 640px) {
    .single-product div.product > .woocommerce-product-gallery,
    .single-product div.product > .summary,
    .single-product div.product > .woocommerce-tabs,
    .single-product div.product > .woocommerce-product-details__short-description,
    .single-product div.product > .related,
    .single-product div.product > .upsells {
        grid-column: 1 / -1;
    }
    .single-product div.product .related ul.products,
    .single-product div.product .upsells ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .single-product div.product {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;

        padding: 16px;
    }

    .single-product div.product .woocommerce-product-gallery {
        width: 100% !important;
    }

    .single-product .woocommerce-product-gallery
    .woocommerce-product-gallery__image img {
        height: min(90vw, 400px);
        padding: 10px;
    }

    .single-product .product .product_title {
        font-size: 27px;
    }

    .single-product .summary
    .woocommerce-product-details__short-description {
        margin-bottom: 22px;
    }

    .single-product .summary form.cart {
        gap: 10px;
    }

    .single-product .summary form.cart
    .single_add_to_cart_button {
        flex: 1;
        padding: 0 12px;
    }
    .single-product .woocommerce-tabs ul.tabs {
        gap: 16px;
    }

    .single-product .woocommerce-tabs ul.tabs li a {
        padding-top: 10px !important;
        font-size: 12px;
    }

    .single-product .woocommerce-tabs .panel {
        padding: 12px 0 18px !important;
    }

    .single-product .woocommerce-tabs .panel > h2 {
        font-size: 19px;
    }

}

/* ==========================================================
   ACCESSIBILITÉ — ANIMATIONS RÉDUITES
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .single-product *,
    .single-product *::before,
    .single-product *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}