/* =========================================
   SINGLE PRODUCT – RESET LAYOUT WOOCOMMERCE
   ========================================= */

/* On neutralise le layout par défaut de WooCommerce
   (floats + width:48% sur images & summary) */
.single-product-layout .woocommerce-product-gallery,
.single-product-layout .summary {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Marges globales de la fiche produit */
.single-product-layout {
    margin-top: 2.5rem;
}

/* =========================================
   LAYOUT PRINCIPAL – IMAGE GAUCHE / TEXTE DROITE
   ========================================= */

.tt-product-layout {
    display: flex;
    align-items: stretch;
    /* important : les 2 colonnes ont la même hauteur */
    gap: 3rem;
}

.tt-product-media {
    flex: 1.1;
    /* colonne image un peu plus large */
}

.tt-product-summary {
    flex: 1;
    display: flex;
    /* pour que le panel remplisse toute la hauteur */
}

/* =========================================
   GALERIE – IMAGE PRINCIPALE + MINIATURES
   ========================================= */

/* Conteneur de la grande image : arrondi + clipping du zoom */
.tt-product-media .woocommerce-product-gallery__image,
.tt-product-media .woocommerce-product-gallery__image a {
    display: block;
    border-radius: 0.8rem;
    overflow: hidden;
    /* le zoom reste dans le cadre arrondi */
}

/* L'image remplit le conteneur arrondi */
.tt-product-media .woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Galerie Woo sans fond ni padding supplémentaire */
.tt-product-media .woocommerce-product-gallery {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

/* Espace sous l'image principale, avant les miniatures */
.tt-product-media .woocommerce-product-gallery__wrapper {
    margin-bottom: 1.3rem !important;
}

/* Rangée de miniatures */
.tt-product-media .flex-control-thumbs {
    display: flex !important;
    gap: 0.9rem !important;
    /* espacement entre vignettes très visible */
    margin: 0.5rem 0 0 !important;
    /* décollé de la grande image */
    padding: 0 !important;
    list-style: none;
}

/* Structure des vignettes */
.tt-product-media .flex-control-thumbs li {
    float: none !important;
    width: auto !important;
}

/* Miniatures arrondies avec bordure neutre par défaut */
.tt-product-media .flex-control-thumbs img {
    display: block;
    border-radius: 0.6rem;
    margin: 0 !important;
    border: 2px solid transparent;
}

/* Miniature active : contour rouge comme la maquette */
.tt-product-media .flex-control-thumbs img.flex-active {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px rgba(var(--accent-color-rgb), 0.35);
}

/* =========================================
   RÉSUMÉ PRODUIT (COLONNE DROITE)
   ========================================= */

.product-summary-panel {
    background: transparent;
    border: none;
    padding: 0.3rem 0 0;
    flex: 1;
    display: flex;
    /* pour que .summary prenne toute la hauteur */
}

/* *** NOUVEAU : layout vertical du bloc résumé *** */
.product-summary-panel .summary.entry-summary {
    display: flex;
    flex-direction: column;
    justify-content: start;
    /* étire les éléments sur toute la hauteur */
    /* espacement vertical régulier */
    width: 100%;
}

/* Titre produit */
.product-summary-panel .product_title,
.product-summary-panel .entry-title {
    padding: 0 !important;
    margin: 0 0 0.5rem 0;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: .03em;
}

/* Badges sous le titre (Nouveau, Pro, Stock limité) */
.tt-product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.tt-product-badge {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: rgba(var(--accent-color-rgb), 0.2);
    border: 1px solid rgba(var(--accent-color-rgb), 0.9);
    color: #fff;
}

/* variantes de badge selon le tag */
.tt-product-badge--nouveau {
    background: rgba(34, 197, 94, 0.18);
    border-color: #22c55e;
}

.tt-product-badge--pro {
    background: rgba(59, 130, 246, 0.18);
    border-color: #3b82f6;
}

.tt-product-badge--stock-limite,
.tt-product-badge--stock-limité {
    background: rgba(248, 113, 113, 0.18);
    border-color: #f87171;
}

/* Prix */
.product-summary-panel .price {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 2.4rem !important;
    /* plus gros, proche de la maquette */
    font-weight: 800;
    color: var(--accent-color) !important;
}


/* Description courte + puces */
.product-summary-panel .woocommerce-product-details__short-description {
    font-size: 0.9rem;
    color: #9ca3af;
    margin-bottom: 0;
    /* géré par le gap flex */
}

.product-summary-panel .woocommerce-product-details__short-description ul {
    padding-left: 0;
    list-style: none;
}

.product-summary-panel .woocommerce-product-details__short-description li {
    position: relative;
    padding-left: 1.3rem;
    margin-bottom: 0.4rem;
}

.product-summary-panel .woocommerce-product-details__short-description li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent-color);
}

/* =========================================
   QUANTITÉ + BOUTONS (- / +)
   ========================================= */

/* *** ajustement : plus d'air entre short description et le bloc quantité/bouton *** */
.product-summary-panel form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 1.2rem;
    /* espace vertical entre la ligne quantité et les boutons */
}

/* Label "Quantité" à gauche du pill */
.product-summary-panel .tt-qty-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: #e5e7eb;
    white-space: nowrap;
    margin-right: 0.5rem;
    flex: 0 0 auto;
}

/* Container de quantité façon "pill" */
.product-summary-panel .quantity {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #4b5563;
    background-color: #111111;
    overflow: hidden;
}

/* Input nombre */
.product-summary-panel .quantity .qty {
    width: 2.5rem;
    padding: 0.4rem 0.5rem;
    background: transparent;
    border: none;
    text-align: center;
    color: #e5e7eb;
    font-size: 0.9rem;
}

/* suppression des flèches par défaut sur input[type=number] */
.product-summary-panel .quantity .qty::-webkit-outer-spin-button,
.product-summary-panel .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.product-summary-panel .quantity .qty[type=number] {
    -moz-appearance: textfield;
}

/* Boutons - / + (suivant le plugin ou le thème) */
.product-summary-panel .quantity .minus,
.product-summary-panel .quantity .plus,
.product-summary-panel .quantity .qty_button {
    width: 2.3rem;
    height: 100%;
    border: none;
    background: transparent;
    color: #e5e7eb;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.product-summary-panel .quantity .minus:hover,
.product-summary-panel .quantity .plus:hover,
.product-summary-panel .quantity .qty_button:hover {
    background-color: #1f2933;
}

/* =========================================
   BOUTON "AJOUTER AU PANIER"
   ========================================= */

/* Style maquette – pill rouge, largeur 100% */
.single-product div.product form.cart button.single_add_to_cart_button.button {
    width: 100% !important;
    border-radius: 10px !important;
    padding: 1rem 1.8rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55) !important;
    text-align: center;
}

.single-product div.product form.cart button.single_add_to_cart_button.button:hover {
    background-color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

/* Bouton "Demander un devis" juste sous le add-to-cart */
.tt-quote-button {
    display: block !important;
    width: 100%;
    margin-top: 0.6rem;
    background: transparent !important;
    border-radius: 999px !important;
    border: 1px solid var(--accent-color) !important;
    color: var(--accent-color) !important;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: .08em;
    font-weight: 600;
    padding: 0.55rem 1.3rem !important;
}

.tt-quote-button:hover {
    background: rgba(var(--accent-color-rgb), 0.15) !important;
}

/* =========================================
   MÉTA PRODUIT (catégories, tags)
   ========================================= */

.product-summary-panel .product_meta {
    /*margin-top: 0.75rem;*/
    font-size: 0.8rem;
    color: #9ca3af;
}

.product-summary-panel .product_meta a {
    color: var(--accent-color);
}

/* =========================================
   TABS (Description détaillée, Fiche technique…)
   ========================================= */

.woocommerce-tabs.wc-tabs-wrapper {
    margin-top: 3rem;
    padding: 2rem;
    border-radius: 1.5rem;
    background-color: rgba(15, 15, 15, 0.9);
    border: 1px solid rgba(55, 65, 81, 0.6);
}

/* =========================================
   FIX PAYPAL / RECAPTCHA ESPACE VIDE
   ========================================= */

/* Neutraliser le conteneur reCAPTCHA PayPal dans le panel produit */
.product-summary-panel #ppcp-recaptcha-v2-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* Et s'il est vraiment vide, on le cache carrément */
.product-summary-panel #ppcp-recaptcha-v2-container:empty {
    display: none !important;
}

/* =========================================
   Badge PROMO – fiche produit
   ========================================= */

.single-product span.onsale {
    background-color: var(--accent-color) !important;
    color: #ffffff !important;
    border-radius: 999px;
}

/* =========================================
   PRODUITS SIMILAIRES (Related Products)
   ========================================= */

.single-product section.related.products {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.single-product section.related.products>h2 {
    margin-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: 600;
}


/* =========================================
   RESPONSIVE – TABLETTE & MOBILE
   ========================================= */

@media (max-width: 991.98px) {

    /* La page produit plus haut sur mobile */
    .single-product-layout {
        margin-top: 1.5rem;
    }


    .tt-product-layout {
        flex-direction: column;
        gap: 1.75rem;
    }

    .tt-product-media {
        flex: 0 0 auto;
    }


    .tt-product-media .woocommerce-product-gallery__image,
    .tt-product-media .woocommerce-product-gallery__image a {
        border-radius: 1rem;
    }

    .tt-product-media .woocommerce-product-gallery__wrapper {
        margin-bottom: 1.1rem !important;
    }

    .tt-product-media .flex-control-thumbs {
        gap: 0.75rem !important;
        margin-top: 0.5rem !important;
    }

    /* Panel de droite : contenu plus compact */
    .product-summary-panel {
        padding: 0 1.25rem 0;
        display: block;
    }

    .product-summary-panel .summary.entry-summary {
        display: block;
    }

    .product-summary-panel .product_title {
        font-size: 1.4rem;
        margin-bottom: 0.75rem;
    }

    .tt-product-badges {
        margin-bottom: 0.6rem;
    }

    .product-summary-panel .price {
        font-size: 2.1rem !important;
        margin-bottom: 0.8rem;
    }

    .product-summary-panel .woocommerce-product-details__short-description {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 1.2rem;
    }

    /* QUANTITÉ + BOUTON sur mobile :
       - ligne "Quantité  [- 1 +]" bien lisible
       - bouton sous la ligne, avec de l'espace comme sur la maquette
    */
    .product-summary-panel form.cart {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.75rem;
        /* espace entre label et pill */
        row-gap: 0.9rem;
        /* espace entre la ligne quantité et le bouton */
        margin-top: 1.3rem;
        margin-bottom: 1.6rem;
    }

    .product-summary-panel .tt-qty-label {
        font-size: 1rem;
        margin-top: 0.21rem;
    }

    .product-summary-panel .quantity {
        flex: 0 0 auto;
    }


    .single-product div.product form.cart button.single_add_to_cart_button.button {
        margin-top: 0.5rem !important;
    }

    /* Tabs (Description / Fiche technique) façon “cartes” */
    .woocommerce-tabs.wc-tabs-wrapper {
        margin-top: 2rem;
        padding: 1.25rem 1.25rem 1.5rem;
        border-radius: 1.2rem;
    }
}

/* Très petit écran (genre < 576px) : on ajuste un peu l’alignement */
@media (max-width: 575.98px) {

    .tt-product-layout {
        gap: 1.5rem;
    }

    .product-summary-panel form.cart {
        align-items: flex-start;
    }

    .product-summary-panel .quantity {
        margin-left: 0;
    }
}

/* =========================================
   Hide Stripe Link/Payment Request Buttons on Product Pages
   ========================================= */

/* HIDE ALL STRIPE/LINK BUTTONS ON PRODUCT PAGE */
.single-product .wc-stripe-payment-request-button-wrapper,
.single-product #wc-stripe-payment-request-button,
.single-product .stripe-payment-request-button,
.single-product .wc-stripe-payment-request-button-separator,
.single-product .p-HeightObserverProvider,
.single-product .p-ExpressCheckoutElement,
.single-product [class*="ExpressCheckout"],
.single-product #payment-request-button {
    display: none !important;
}

/* =========================================
   SINGLE PRODUCT AJAX ENHANCEMENTS
   ========================================= */

/* Hide standard "View Cart" button in success messages 
   because we auto-open the mini-cart instead */
.woocommerce-message .button.wc-forward,
.woocommerce-info .button.wc-forward,
.woocommerce-error .button.wc-forward {
    display: none !important;
}

/* Ensure the success message is cleaner (optional) */
.woocommerce-message {
    border-top-color: var(--accent-color);
}

/* =========================================
   LIGHT MODE OVERRIDES (Single Product)
   ========================================= */

/* Main Layout & Review Tabs */
[data-theme="light"] .woocommerce-tabs.wc-tabs-wrapper {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .woocommerce-tabs h2,
[data-theme="light"] .woocommerce-tabs h3,
[data-theme="light"] .woocommerce-tabs .comment-reply-title {
    color: #111827 !important;
}

[data-theme="light"] .woocommerce-tabs .comment-text p,
[data-theme="light"] #tab-description p,
[data-theme="light"] .woocommerce-product-details__short-description {
    color: #4b5563 !important;
}

[data-theme="light"] .woocommerce-tabs ul.tabs li a {
    color: #6b7280 !important;
}

[data-theme="light"] .woocommerce-tabs ul.tabs li.active a {
    color: #111827 !important;
}

/* Review Form Inputs */
[data-theme="light"] .comment-form input,
[data-theme="light"] .comment-form textarea {
    background-color: #f9fafb !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

/* Quantity Selector & Labels */
[data-theme="light"] .product-summary-panel .quantity {
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
}

[data-theme="light"] .product-summary-panel .quantity .qty {
    color: #111827 !important;
}

[data-theme="light"] .product-summary-panel .quantity button {
    color: #4b5563 !important;
}

[data-theme="light"] .product-summary-panel .quantity button:hover {
    background-color: #e5e7eb !important;
    color: #111827 !important;
}

[data-theme="light"] .product-summary-panel .tt-qty-label {
    color: #374151 !important;
}

/* Title & Price */
[data-theme="light"] .product-summary-panel .product_title,
[data-theme="light"] .product-summary-panel .entry-title {
    color: #111827 !important;
}

/* Badges (Outline style on light) */
[data-theme="light"] .tt-product-badge {
    background: transparent !important;
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
    font-weight: 700;
}

/* Star Rating Visibility - Brand Equivalence */
[data-theme="light"] .star-rating,
[data-theme="light"] .star-rating::before {
    color: rgba(230, 57, 70, 0.3) !important;
    /* Faded brand red for empty stars */
}

[data-theme="light"] .star-rating span::before {
    color: var(--accent-color) !important;
    /* Brand Red for filled stars */
}

/* Form Review Stars */
[data-theme="light"] .comment-form-rating .stars a {
    color: rgba(230, 57, 70, 0.3) !important;
}

[data-theme="light"] .comment-form-rating .stars:hover a::before,
[data-theme="light"] .comment-form-rating .stars a:hover::before,
[data-theme="light"] .comment-form-rating .stars.selected a.active::before,
[data-theme="light"] .comment-form-rating .stars.selected a.active~a::before,
[data-theme="light"] .comment-form-rating .stars.selected a:not(.active)::before {
    color: var(--accent-color) !important;
}

/* Review Form Labels & Headings */
[data-theme="light"] .comment-form label {
    color: #374151 !important;
    /* Dark Gray for labels */
    font-weight: 600;
}

[data-theme="light"] #review_form #reply-title {
    color: #111827 !important;
    /* Dark for 'Add a review' title */
}

[data-theme="light"] .comment-notes {
    color: #6b7280 !important;
    /* Medium gray for notes */
}

/* Related Products - Light Mode */
[data-theme="light"] .single-product section.related.products {
    border-top-color: #e5e7eb;
}