/**
 * 09 - Fiche produit
 * ==========================================================================
 * Habille le gabarit `woocommerce/content-single-product.php` du child theme :
 * grille, galerie « Aperçu du livre », bloc d'achat, repères, réassurance,
 * fiche technique, FAQ, barre d'achat mobile.
 *
 * Chargée APRÈS 08-tunnel : dernière de la cascade.
 * Comme toute la skin « La Veillée », les règles sont scopées
 * body:not(.ug-veillee) pour ne jamais toucher la homepage autonome.
 *
 * Note de cascade : 07-veillee.css contient une section « correctifs QA » qui
 * neutralisait à coups de !important le <style> inline du gabarit Madara
 * (carte blanche + entête marron). Ce gabarit n'est plus utilisé — mais les
 * règles !important, elles, restent. Les sélecteurs ci-dessous ajoutent
 * .single-product pour reprendre la main proprement, plutôt que d'aller
 * charcuter 07-veillee dont dépendent le panier et le checkout.
 *
 * @package Ultimes_Griots_Child
 * @version 2.0.0
 */

/* ==========================================================================
   0. TOKENS LOCAUX
   ========================================================================== */

body:not(.ug-veillee).single-product {
    /* Carte légèrement décollée du fond nuit : les blocs se lisent comme des
       objets posés, pas comme des zones fondues dans la page. */
    --ugp-carte: #1b1648;
    --ugp-bord: rgba(242, 178, 62, 0.22);
    --ugp-bord-fort: rgba(242, 178, 62, 0.5);

    /* Texte secondaire : 0,78 et 0,62 d'opacité, pas 0,5. À 0,5 sur fond indigo
       on tombe sous 4,5:1 — c'était le point faible de la version précédente. */
    --ugp-texte-2: rgba(246, 236, 217, 0.78);
    --ugp-texte-3: rgba(246, 236, 217, 0.62);

    --ugp-rayon: 18px;
}

/* ==========================================================================
   1. STRUCTURE DE LA PAGE
   ========================================================================== */

/* Plus de « carte blanche » héritée : le produit vit directement sur la nuit. */
body:not(.ug-veillee).single-product div.product[id^="product-"] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg) var(--spacing-3xl);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ugv-creme);
    font-family: var(--font-body) !important;
}

body:not(.ug-veillee).single-product .ug-produit__grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    padding-top: var(--spacing-xl);
}

/* min-width: 0 obligatoire sur les deux colonnes.
   Par défaut un élément de grille a `min-width: auto` : la piste ne peut pas
   descendre sous la largeur min-content de son contenu. Or le bandeau de
   feuilletage est une rangée flex de 6 vignettes ≈ 490 px. Sans cette ligne, en
   375 px de large, la piste gonflait à 484 px, la colonne d'achat suivait, et
   `.wrap` (overflow-x: hidden, thème parent) tronquait silencieusement la
   droite de la couverture. Symptôme trompeur : `scrollWidth` restait à 375,
   donc aucun scroll horizontal ne trahissait le débordement. */
body:not(.ug-veillee).single-product .ug-produit__visuel,
body:not(.ug-veillee).single-product .ug-produit__achat,
body:not(.ug-veillee).single-product .ug-galerie,
body:not(.ug-veillee).single-product .ug-galerie__apercu {
    min-width: 0;
    max-width: 100%;
}

@media (min-width: 900px) {
    body:not(.ug-veillee).single-product .ug-produit__grille {
        grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
        gap: var(--spacing-3xl);
        align-items: start;
    }

    /* C'est la colonne visuelle qui colle, pas la colonne d'achat : elle est la
       plus courte des deux, donc la seule dont on soit sûr qu'elle tienne dans
       la hauteur d'écran. Une colonne sticky plus haute que le viewport se
       bloque en haut et donne l'impression d'un bug. */
    body:not(.ug-veillee).single-product .ug-produit__visuel {
        position: sticky;
        top: 5.5rem;
    }
}

/* Badge promo : au-dessus de l'image, jamais derrière. */
body:not(.ug-veillee).single-product .ug-produit__visuel {
    position: relative;
    z-index: 2;
}

body:not(.ug-veillee).single-product span.onsale {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    z-index: 3;
    margin: 0 !important;
}

/* ==========================================================================
   2. GALERIE — IMAGE PRINCIPALE
   ========================================================================== */

body:not(.ug-veillee).single-product .ug-galerie__scene {
    margin: 0;
    padding: 0;
}

body:not(.ug-veillee).single-product .ug-galerie__lien {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--ugp-bord);
    border-radius: var(--ugp-rayon);
    /* Fond crème sourd : les pages de BD sont claires ; bord à bord sur du noir
       elles semblent flotter. Un cadre légèrement lumineux les « pose ». */
    background: linear-gradient(160deg, rgba(246, 236, 217, 0.07), rgba(11, 10, 26, 0.35));
    line-height: 0;
    cursor: zoom-in;
}

body:not(.ug-veillee).single-product .ug-galerie__lien:focus-visible {
    outline: 3px solid var(--ugv-or);
    outline-offset: 3px;
}

body:not(.ug-veillee).single-product .ug-galerie__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 62vh;
    object-fit: contain;
    /* On écrase les arrondis/ombres génériques posés sur toute image de galerie
       par 07-veillee : le cadre s'en charge désormais. */
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform var(--transition-normal);
}

@media (min-width: 900px) {
    body:not(.ug-veillee).single-product .ug-galerie__image {
        max-height: 58vh;
        min-height: 380px;
    }
}

body:not(.ug-veillee).single-product .ug-galerie__lien:hover .ug-galerie__image {
    transform: scale(1.02);
}

/* Pastille « Agrandir » : visible en permanence, car il n'y a pas de survol
   sur écran tactile — l'affordance de zoom doit rester lisible sans souris. */
body:not(.ug-veillee).single-product .ug-galerie__loupe {
    position: absolute;
    right: var(--spacing-md);
    bottom: var(--spacing-md);
    z-index: 2;
    padding: 0.45em 1em;
    border: 1px solid var(--ugp-bord-fort);
    border-radius: var(--radius-full);
    background: rgba(11, 10, 26, 0.82);
    color: var(--ugv-or-pale);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.4;
    backdrop-filter: blur(4px);
}

/* ==========================================================================
   3. GALERIE — BANDEAU « APERÇU DU LIVRE »
   ========================================================================== */

body:not(.ug-veillee).single-product .ug-galerie__apercu {
    margin-top: var(--spacing-lg);
}

body:not(.ug-veillee).single-product .ug-galerie__legende {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-sm);
}

body:not(.ug-veillee).single-product .ug-galerie__legende strong {
    color: var(--ugv-creme);
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 400;
    letter-spacing: 0.01em;
}

body:not(.ug-veillee).single-product .ug-galerie__legende span {
    color: var(--ugp-texte-3);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
}

body:not(.ug-veillee).single-product .ug-galerie__bandeau {
    display: flex;
    gap: var(--spacing-sm);
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0 0 var(--spacing-sm);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--ugp-bord-fort) transparent;
}

body:not(.ug-veillee).single-product .ug-galerie__bandeau::-webkit-scrollbar {
    height: 6px;
}

body:not(.ug-veillee).single-product .ug-galerie__bandeau::-webkit-scrollbar-thumb {
    border-radius: var(--radius-full);
    background: var(--ugp-bord-fort);
}

body:not(.ug-veillee).single-product .ug-galerie__page {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
}

body:not(.ug-veillee).single-product .ug-galerie__page::before,
body:not(.ug-veillee).single-product .ug-galerie__page::marker {
    content: none;
}

body:not(.ug-veillee).single-product .ug-galerie__vignette {
    display: block;
    width: 74px;
    height: 74px;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 12px;
    background: rgba(246, 236, 217, 0.06);
    line-height: 0;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

@media (min-width: 900px) {
    body:not(.ug-veillee).single-product .ug-galerie__vignette {
        width: 86px;
        height: 86px;
    }
}

body:not(.ug-veillee).single-product .ug-galerie__vignette img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* Les vignettes non actives sont volontairement en retrait : l'œil doit
       comprendre d'un coup laquelle est affichée en grand. */
    opacity: 0.62;
    transition: opacity var(--transition-fast);
}

body:not(.ug-veillee).single-product .ug-galerie__vignette:hover img,
body:not(.ug-veillee).single-product .ug-galerie__vignette:focus-visible img,
body:not(.ug-veillee).single-product .ug-galerie__vignette.is-active img {
    opacity: 1;
}

body:not(.ug-veillee).single-product .ug-galerie__vignette:hover {
    border-color: var(--ugp-bord-fort);
    transform: translateY(-2px);
}

body:not(.ug-veillee).single-product .ug-galerie__vignette.is-active {
    border-color: var(--ugv-or);
}

body:not(.ug-veillee).single-product .ug-galerie__vignette:focus-visible {
    outline: 3px solid var(--ugv-or);
    outline-offset: 2px;
}

/* ==========================================================================
   4. VISIONNEUSE PLEIN ÉCRAN
   ========================================================================== */

body:not(.ug-veillee) dialog.ug-lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(6, 5, 16, 0.96);
    color: var(--ugv-creme);
    overscroll-behavior: contain;
}

body:not(.ug-veillee) dialog.ug-lightbox::backdrop {
    background: rgba(6, 5, 16, 0.9);
}

body:not(.ug-veillee) .ug-lightbox__cadre {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 4.5rem 1rem;
}

body:not(.ug-veillee) .ug-lightbox__image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

body:not(.ug-veillee) .ug-lightbox__fermer,
body:not(.ug-veillee) .ug-lightbox__nav {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 48px : cible tactile confortable, au-dessus du minimum de 44px. */
    width: 48px;
    height: 48px;
    padding: 0 !important;
    border: 1px solid var(--ugp-bord-fort, rgba(242, 178, 62, 0.5));
    border-radius: var(--radius-full) !important;
    background: rgba(23, 19, 64, 0.92) !important;
    color: var(--ugv-creme) !important;
    font-family: var(--font-body);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

body:not(.ug-veillee) .ug-lightbox__fermer:hover,
body:not(.ug-veillee) .ug-lightbox__nav:hover {
    background: var(--ugv-or) !important;
    color: var(--ug-neutral-black) !important;
    box-shadow: none;
}

body:not(.ug-veillee) .ug-lightbox__fermer:focus-visible,
body:not(.ug-veillee) .ug-lightbox__nav:focus-visible {
    outline: 3px solid var(--ugv-or);
    outline-offset: 3px;
}

body:not(.ug-veillee) .ug-lightbox__fermer {
    top: 1rem;
    right: 1rem;
    font-size: 1.15rem;
}

/* Les deux flèches sont centrées verticalement : leur translate doit survivre
   au :hover, sinon elles sautent d'une demi-hauteur au survol. */
body:not(.ug-veillee) .ug-lightbox__nav--prec,
body:not(.ug-veillee) .ug-lightbox__nav--suiv,
body:not(.ug-veillee) .ug-lightbox__nav--prec:hover,
body:not(.ug-veillee) .ug-lightbox__nav--suiv:hover {
    top: 50%;
    transform: translateY(-50%);
}

body:not(.ug-veillee) .ug-lightbox__nav--prec {
    left: 0.75rem;
}

body:not(.ug-veillee) .ug-lightbox__nav--suiv {
    right: 0.75rem;
}

body:not(.ug-veillee) .ug-lightbox__compteur {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0.4em 1.1em;
    border: 1px solid var(--ugp-bord, rgba(242, 178, 62, 0.22));
    border-radius: var(--radius-full);
    background: rgba(23, 19, 64, 0.92);
    color: var(--ugp-texte-2, rgba(246, 236, 217, 0.78));
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   5. COLONNE D'ACHAT
   ========================================================================== */

body:not(.ug-veillee).single-product .ug-produit__achat {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0;
}

/* --- Catégories ---------------------------------------------------------- */

body:not(.ug-veillee).single-product .ug-produit__categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-md);
}

body:not(.ug-veillee).single-product .ug-produit__categorie {
    padding: 0.3em 0.9em;
    border: 1px solid var(--ugp-bord);
    border-radius: var(--radius-full);
    background: rgba(242, 178, 62, 0.1);
    color: var(--ugv-or-pale) !important;
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color var(--transition-fast);
}

body:not(.ug-veillee).single-product .ug-produit__categorie:hover,
body:not(.ug-veillee).single-product .ug-produit__categorie:focus-visible {
    background: rgba(242, 178, 62, 0.24);
    color: var(--ugv-creme) !important;
}

/* --- Titre --------------------------------------------------------------- */

body:not(.ug-veillee).single-product h1.ug-produit__titre {
    margin: 0 0 var(--spacing-md);
    color: var(--ugv-creme) !important;
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.7rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.005em;
    text-transform: none;
}

/* --- Prix ---------------------------------------------------------------- */

body:not(.ug-veillee).single-product div.product p.price,
body:not(.ug-veillee).single-product div.product span.price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 var(--spacing-md) !important;
    color: var(--ugv-or) !important;
    font-family: var(--font-body);
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem) !important;
    font-weight: 800 !important;
    line-height: 1.2;
}

body:not(.ug-veillee).single-product div.product p.price del {
    color: var(--ugp-texte-3) !important;
    font-size: 0.62em;
    font-weight: 600;
}

body:not(.ug-veillee).single-product div.product p.price ins {
    background: transparent;
    text-decoration: none;
}

/* --- Résumé -------------------------------------------------------------- */

body:not(.ug-veillee).single-product .woocommerce-product-details__short-description {
    margin: 0 0 var(--spacing-lg);
    color: var(--ugv-creme) !important;
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
}

body:not(.ug-veillee).single-product .woocommerce-product-details__short-description p:last-child {
    margin-bottom: 0;
}

/* --- Disponibilité ------------------------------------------------------- */

body:not(.ug-veillee).single-product div.product p.stock {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin: 0 0 var(--spacing-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

body:not(.ug-veillee).single-product div.product p.stock.in-stock {
    color: #7fd48f !important;
}

body:not(.ug-veillee).single-product div.product p.stock.out-of-stock {
    color: var(--ugv-braise) !important;
}

body:not(.ug-veillee).single-product div.product p.stock::before {
    content: "";
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: currentColor;
}

/* --- Formulaire d'achat -------------------------------------------------- */

body:not(.ug-veillee).single-product div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--spacing-md);
    margin: 0 0 var(--spacing-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--ugp-bord-fort);
    border-radius: var(--ugp-rayon);
    background: var(--ugp-carte);
}

body:not(.ug-veillee).single-product div.product form.cart .quantity {
    flex: 0 0 auto;
    margin: 0 !important;
}

body:not(.ug-veillee).single-product div.product form.cart .quantity-text {
    margin: 0 0 0.35rem;
}

body:not(.ug-veillee).single-product div.product form.cart .quantity-text p {
    margin: 0;
    color: var(--ugp-texte-3);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body:not(.ug-veillee).single-product div.product form.cart .quantity-select {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1.5px solid var(--ugp-bord);
    border-radius: var(--radius-full);
    background: rgba(246, 236, 217, 0.05);
}

body:not(.ug-veillee).single-product div.product form.cart .quantity input.minus,
body:not(.ug-veillee).single-product div.product form.cart .quantity input.plus {
    width: 44px;
    min-height: 48px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ugv-or) !important;
    font-family: var(--font-body);
    font-size: 1.25rem !important;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

body:not(.ug-veillee).single-product div.product form.cart .quantity input.minus:hover,
body:not(.ug-veillee).single-product div.product form.cart .quantity input.plus:hover {
    background: rgba(242, 178, 62, 0.16) !important;
    box-shadow: none;
    transform: none;
}

body:not(.ug-veillee).single-product div.product form.cart .quantity input.qty {
    width: 52px;
    min-height: 48px;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid var(--ugp-bord) !important;
    border-right: 1px solid var(--ugp-bord) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ugv-creme) !important;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
}

body:not(.ug-veillee).single-product div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
body:not(.ug-veillee).single-product div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body:not(.ug-veillee).single-product div.product form.cart .quantity input:focus-visible {
    outline: 2px solid var(--ugv-or);
    outline-offset: -2px;
}

body:not(.ug-veillee).single-product div.product form.cart .single_add_to_cart_button {
    flex: 1 1 14rem;
    min-height: 48px;
    /* Aligné sur le bas du sélecteur de quantité, qui porte un libellé au-dessus
       de lui : sans ça, les deux contrôles flottent à des hauteurs différentes. */
    align-self: flex-end;
    padding: 0.95rem 1.6rem !important;
    font-size: var(--font-size-lg) !important;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

body:not(.ug-veillee).single-product div.product form.cart .single_add_to_cart_button:focus-visible {
    outline: 3px solid var(--ugv-creme);
    outline-offset: 3px;
}

/* ==========================================================================
   6. REPÈRES SOUS LE TITRE
   ========================================================================== */

body:not(.ug-veillee) .ug-produit-reperes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    list-style: none;
    margin: 0 0 var(--spacing-md);
    padding: 0;
}

body:not(.ug-veillee) .ug-produit-reperes li {
    margin: 0;
    padding: 0.35em 0.9em;
    border: 1px solid var(--ugv-border-strong);
    border-radius: var(--radius-full);
    background: rgba(242, 178, 62, 0.1);
    color: var(--ugv-or-pale);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

body:not(.ug-veillee) .ug-produit-reperes li::before,
body:not(.ug-veillee) .ug-produit-reperes li::marker {
    content: none;
}

/* ==========================================================================
   7. RÉASSURANCE (sous le bouton panier)
   ========================================================================== */

body:not(.ug-veillee) .ug-produit-reassurance {
    margin: 0 0 var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--ugv-border);
    border-radius: var(--ugp-rayon, var(--radius-lg));
    background: rgba(246, 236, 217, 0.04);
}

body:not(.ug-veillee) .ug-produit-reassurance__item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
}

body:not(.ug-veillee) .ug-produit-reassurance__item + .ug-produit-reassurance__item {
    border-top: 1px solid rgba(246, 236, 217, 0.1);
}

body:not(.ug-veillee) .ug-produit-reassurance__icone {
    flex: 0 0 auto;
    width: 2.1em;
    height: 2.1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(242, 178, 62, 0.16);
    color: var(--ugv-or);
    font-size: var(--font-size-base);
    line-height: 1;
}

body:not(.ug-veillee) .ug-produit-reassurance__corps {
    flex: 1 1 auto;
    color: var(--ugp-texte-2, rgba(246, 236, 217, 0.78));
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

body:not(.ug-veillee) .ug-produit-reassurance__corps strong {
    display: block;
    color: var(--ugv-creme);
    font-size: var(--font-size-base);
    font-weight: 700;
}

body:not(.ug-veillee) .ug-produit-reassurance__corps a {
    color: var(--ugv-or);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

body:not(.ug-veillee) .ug-produit-reassurance__corps a:hover,
body:not(.ug-veillee) .ug-produit-reassurance__corps a:focus-visible {
    color: var(--ugv-or-pale);
}

/* --- Méta WooCommerce (catégories / étiquettes), en pied de colonne ------- */

body:not(.ug-veillee).single-product .product_meta {
    margin: 0;
    padding: var(--spacing-md) 0 0;
    border: 0 !important;
    border-top: 1px solid rgba(246, 236, 217, 0.1) !important;
    border-radius: 0;
    background: transparent !important;
    color: var(--ugp-texte-3) !important;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
}

body:not(.ug-veillee).single-product .product_meta a {
    color: var(--ugp-texte-2);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

body:not(.ug-veillee).single-product .product_meta a:hover,
body:not(.ug-veillee).single-product .product_meta a:focus-visible {
    color: var(--ugv-or);
}

/* ==========================================================================
   8. FICHE TECHNIQUE
   ========================================================================== */

body:not(.ug-veillee) .ug-produit-fiche {
    margin: var(--spacing-2xl) 0;
    padding: var(--spacing-xl);
    border: 1px solid var(--ugv-border);
    border-radius: var(--ugp-rayon, var(--radius-lg));
    background: var(--ugp-carte, var(--ugv-surface-solid));
}

body:not(.ug-veillee) .ug-produit-fiche__titre,
body:not(.ug-veillee) .ug-produit-faq__titre {
    margin: 0 0 var(--spacing-lg);
    color: var(--ugv-creme);
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-display-weight-bold);
    line-height: var(--line-height-tight);
}

body:not(.ug-veillee) .ug-produit-fiche__titre::after,
body:not(.ug-veillee) .ug-produit-faq__titre::after {
    content: "";
    display: block;
    width: 3.2rem;
    height: 2px;
    margin-top: var(--spacing-sm);
    background: var(--ugv-grad-feu);
}

body:not(.ug-veillee) .ug-produit-fiche__liste {
    margin: 0;
}

body:not(.ug-veillee) .ug-produit-fiche__ligne {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
}

body:not(.ug-veillee) .ug-produit-fiche__ligne + .ug-produit-fiche__ligne {
    border-top: 1px solid rgba(246, 236, 217, 0.1);
}

body:not(.ug-veillee) .ug-produit-fiche__ligne dt {
    margin: 0;
    /* Remonté de creme-50 à texte-3 : à 0,5 d'opacité, ces libellés en petites
       capitales passaient sous le seuil de contraste AA. */
    color: var(--ugp-texte-3, rgba(246, 236, 217, 0.62));
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body:not(.ug-veillee) .ug-produit-fiche__ligne dd {
    margin: 0;
    color: var(--ugv-creme);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

/* ==========================================================================
   9. FAQ
   ========================================================================== */

body:not(.ug-veillee) .ug-produit-faq {
    margin: var(--spacing-2xl) 0;
}

body:not(.ug-veillee) .ug-produit-faq__item {
    border: 1px solid var(--ugv-border);
    border-radius: var(--radius-lg);
    background: var(--ugp-carte, var(--ugv-surface-solid));
    margin-bottom: var(--spacing-sm);
    transition: border-color var(--transition-fast);
}

body:not(.ug-veillee) .ug-produit-faq__item[open],
body:not(.ug-veillee) .ug-produit-faq__item:hover {
    border-color: var(--ugp-bord-fort, var(--ugv-border-strong));
}

body:not(.ug-veillee) .ug-produit-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    color: var(--ugv-creme);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: var(--line-height-normal);
    list-style: none;
}

/* Chevron maison : le marqueur natif est illisible sur fond nuit. */
body:not(.ug-veillee) .ug-produit-faq__item summary::-webkit-details-marker {
    display: none;
}

body:not(.ug-veillee) .ug-produit-faq__item summary::after {
    content: "+";
    flex: 0 0 auto;
    color: var(--ugv-or);
    font-size: var(--font-size-xl);
    font-weight: 400;
    line-height: 1;
    transition: transform var(--transition-fast);
}

body:not(.ug-veillee) .ug-produit-faq__item[open] summary::after {
    content: "−";
}

body:not(.ug-veillee) .ug-produit-faq__item summary:hover {
    color: var(--ugv-or-pale);
}

/* Le focus doit rester visible : la skin masque beaucoup de contours par défaut. */
body:not(.ug-veillee) .ug-produit-faq__item summary:focus-visible {
    outline: 2px solid var(--ugv-or);
    outline-offset: 2px;
}

body:not(.ug-veillee) .ug-produit-faq__reponse {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    color: var(--ugp-texte-2, rgba(246, 236, 217, 0.78));
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

body:not(.ug-veillee) .ug-produit-faq__reponse p {
    margin: 0;
}

/* ==========================================================================
   10. ONGLETS & PRODUITS LIÉS
   ========================================================================== */

body:not(.ug-veillee).single-product .woocommerce-tabs {
    margin: var(--spacing-2xl) 0 0;
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--ugv-border);
}

/* Le gabarit Madara embarquait son propre JS d'onglets (avec .wc-tab.active).
   Il a disparu avec lui : c'est désormais wc-single-product.js de WooCommerce
   qui pilote les onglets, en posant des styles INLINE via show()/hide().
   D'où ce défaut CSS : tout est masqué sauf le premier panneau, ce qui évite
   de voir « Description » et « Avis » empilés le temps que le script arrive —
   et laisse quand même la description lisible si le script ne charge jamais.
   Les styles inline de WooCommerce gagnent ensuite sur cette règle. */
body:not(.ug-veillee).single-product .woocommerce-tabs .wc-tab {
    display: none;
}

body:not(.ug-veillee).single-product .woocommerce-tabs .wc-tab:first-of-type {
    display: block;
}

body:not(.ug-veillee).single-product .woocommerce-Tabs-panel {
    padding: var(--spacing-lg) 0 0;
    color: var(--ugv-creme) !important;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

body:not(.ug-veillee).single-product .woocommerce-Tabs-panel h2 {
    font-size: var(--font-size-2xl);
}

body:not(.ug-veillee).single-product section.related.products,
body:not(.ug-veillee).single-product section.up-sells {
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--ugv-border);
}

body:not(.ug-veillee).single-product section.related.products > h2,
body:not(.ug-veillee).single-product section.up-sells > h2 {
    margin-bottom: var(--spacing-lg);
    color: var(--ugv-creme);
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: 400;
}

/* ==========================================================================
   11. BARRE D'ACHAT MOBILE
   ========================================================================== */

body:not(.ug-veillee) .ug-produit-barre {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky, 1020);
    display: none;
    align-items: center;
    gap: var(--spacing-md);
    padding: 0.7rem var(--spacing-md);
    /* Safe area : sans ça, la barre passe sous la barre gestuelle iOS. */
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ugp-bord-fort, var(--ugv-border-strong));
    background: rgba(17, 14, 48, 0.97);
    backdrop-filter: blur(10px);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
    transform: translateY(110%);
    /* visibility et pas seulement transform : une barre hors écran ne doit pas
       rester dans l'ordre de tabulation. */
    visibility: hidden;
    transition: transform var(--transition-normal), visibility var(--transition-normal);
}

@media (max-width: 899px) {
    body:not(.ug-veillee).single-product .ug-produit-barre {
        display: flex;
    }
}

body:not(.ug-veillee) .ug-produit-barre.is-visible {
    transform: translateY(0);
    visibility: visible;
}

body:not(.ug-veillee) .ug-produit-barre__infos {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

body:not(.ug-veillee) .ug-produit-barre__titre {
    overflow: hidden;
    color: var(--ugp-texte-2, rgba(246, 236, 217, 0.78));
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.ug-veillee) .ug-produit-barre__prix,
body:not(.ug-veillee) .ug-produit-barre__prix .amount {
    color: var(--ugv-or) !important;
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    font-weight: 800;
    line-height: 1.2;
}

body:not(.ug-veillee) .ug-produit-barre__prix del {
    display: none;
}

body:not(.ug-veillee) .ug-produit-barre__bouton {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0.7rem 1.4rem !important;
    border: 0;
    border-radius: var(--radius-full) !important;
    background: var(--ugv-grad-feu) !important;
    color: var(--ug-neutral-black) !important;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
}

body:not(.ug-veillee) .ug-produit-barre__bouton:focus-visible {
    outline: 3px solid var(--ugv-creme);
    outline-offset: 2px;
}

/* ==========================================================================
   12. MOBILE
   ========================================================================== */

@media (max-width: 899px) {
    body:not(.ug-veillee).single-product div.product[id^="product-"] {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
        /* Place pour la barre d'achat : sans ça elle masque la fin des avis. */
        padding-bottom: 6.5rem;
    }

    body:not(.ug-veillee).single-product .ug-galerie__image {
        max-height: 56vh;
    }

    body:not(.ug-veillee).single-product div.product form.cart {
        padding: var(--spacing-md);
    }

    body:not(.ug-veillee).single-product div.product form.cart .single_add_to_cart_button {
        flex: 1 1 100%;
    }
}

@media (max-width: 640px) {
    body:not(.ug-veillee) .ug-produit-fiche,
    body:not(.ug-veillee) .ug-produit-reassurance {
        padding: var(--spacing-md);
    }

    /* Une seule colonne : deux colonnes écrasent le libellé sous 640px. */
    body:not(.ug-veillee) .ug-produit-fiche__ligne {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }

    body:not(.ug-veillee) .ug-produit-fiche__titre,
    body:not(.ug-veillee) .ug-produit-faq__titre {
        font-size: var(--font-size-xl);
    }

    body:not(.ug-veillee) .ug-lightbox__cadre {
        padding: 4rem 0.5rem;
    }

    body:not(.ug-veillee) .ug-lightbox__nav--prec {
        left: 0.4rem;
    }

    body:not(.ug-veillee) .ug-lightbox__nav--suiv {
        right: 0.4rem;
    }
}

/* ==========================================================================
   13. PRÉFÉRENCE DE MOUVEMENT RÉDUIT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    body:not(.ug-veillee) .ug-produit-faq__item summary::after,
    body:not(.ug-veillee).single-product .ug-galerie__image,
    body:not(.ug-veillee).single-product .ug-galerie__vignette,
    body:not(.ug-veillee) .ug-produit-barre {
        transition: none;
    }

    body:not(.ug-veillee).single-product .ug-galerie__lien:hover .ug-galerie__image,
    body:not(.ug-veillee).single-product .ug-galerie__vignette:hover {
        transform: none;
    }
}