/**
 * Styles pour la FICHE PRODUIT uniquement (is_product()).
 * Extrait de bgs_status_line_css() dans bgs-woo-sync.php.
 */

.bgs-ref-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid #ececec;
    font-size: 0.9em;
    color: #333;
}
.bgs-ref-line__ref strong {
    font-weight: 700;
}
.bgs-ref-line__sep {
    margin: 0 6px;
    color: #ccc;
}
.bgs-ref-line__brand {
    font-weight: 700;
    color: #333;
    display: inline-flex;
    align-items: center;
}
.bgs-ref-line__brand-logo {
    height: 24px;
    width: auto;
    display: block;
}

.bgs-status-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 4px;
    font-size: 0.95em;
    color: #333;
}
.bgs-status-line__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bgs-status-line__dot--ok {
    background: #4caf50;
}
.bgs-status-line__dot--ko {
    background: #d9534f;
}
.bgs-status-line__sep {
    color: #ccc;
}
.bgs-status-line__freight {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #333;
}
.bgs-status-line__restock-note {
    margin: 0 0 10px;
    font-size: 0.9em;
    color: #d9534f;
}

/* Prix : gras, coloré, suffixe "/ pièce" atténué */
.summary .price {
    font-size: 1.6em !important;
    font-weight: 700 !important;
    color: #c0392b !important;
}
.bgs-price-unit {
    font-size: 0.55em;
    font-weight: 400;
    color: #777;
    vertical-align: baseline;
}

.summary.entry-summary{
    h1.product_title.entry-title{
        text-align: left;
    }
}

/* Fond blanc + cadre (bordure/ombre légère) autour de la galerie.
   IMPORTANT : posé UNIQUEMENT sur .woocommerce-product-gallery,
   le conteneur englobant qui n'est PAS géré par FlexSlider.
   On ne touche plus du tout à .flex-viewport, à
   .woocommerce-product-gallery__wrapper (qui est en réalité le
   RAIL COULISSANT des diapos, déplacé en JS via translate3d — PAS
   un simple conteneur, contrairement à ce qu'on avait supposé), ni
   aux slides/images elles-mêmes : FlexSlider calcule leurs largeurs
   en pixels au chargement, et toute modification de padding/largeur
   à l'intérieur de .flex-viewport désynchronise ce calcul (c'est
   exactement ce qui causait les bouts d'images voisines visibles
   sur les côtés). Le rendu par défaut de WooCommerce (image
   proportionnée, sans rognage) fonctionne très bien tout seul —
   inutile de le réécrire, un cadre autour suffit. */
/* Cadre (bordure + ombre légère) posé UNIQUEMENT sur la visionneuse
   principale (.flex-viewport), pas sur .woocommerce-product-gallery
   qui englobe aussi les miniatures juste en dessous. Bordure/ombre
   ne perturbent pas le calcul de largeur de FlexSlider (contraire-
   ment au padding, qui reste strictement interdit ici) : elles
   n'affectent que le rendu visuel, jamais les dimensions de mise en
   page. */
.woocommerce-product-gallery {
    background-color: #ffffff;
    box-sizing: border-box;
}

/* Hauteur FIXE (au lieu du calcul JS de FlexSlider par diapositive) :
   sans ça, chaque slide se redimensionne à son propre contenu et déborde
   du conteneur visible. */
.flex-viewport {
    height: 420px !important;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.woocommerce-product-gallery__image {
    height: 420px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 32px;
    box-sizing: border-box;
    background-color: var(--white-color);
}

/* Miniatures : format carré (1:1) pour toutes, quelle que soit leur
   largeur réelle dans la grille — recadrage proportionnel via
   object-fit: cover pour remplir ce carré sans déformer l'image. */
.flex-control-thumbs li img,
.woocommerce-product-gallery__wrapper ~ ol li img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #ececec;
    box-sizing: border-box;
    transition: border-color 0.15s ease, opacity 0.15s ease;
}
.flex-control-thumbs li img:hover,
.flex-control-thumbs li img.flex-active {
    border-color: #c0392b;
}

/* Badge PROMO : positionné en overlay sur l'image produit plutôt qu'affiché
   comme un bloc à part. Le badge .onsale n'est PAS imbriqué dans
   .woocommerce-product-gallery (ce sont deux éléments frères, rendus par
   le même hook à des priorités différentes) — on le positionne donc en
   absolu par rapport au conteneur .product commun aux deux, pas par
   rapport à la galerie. */
.product {
    position: relative;
}
.onsale {
    position: absolute !important;
    top: 12px;
    left: 12px;
    z-index: 10;
    margin: 0 !important;
    background: #c0392b;
    color: #fff;
    font-weight: 700;
    font-size: 0.8em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 4px;
    line-height: 1.4;
    border: none;
}
.bgs-badge-new {
    position: absolute !important;
    top: 12px;
    left: 12px;
    z-index: 10;
    margin: 0 !important;
    background: var(--brand-color);
    color: #fff;
    font-weight: 700;
    font-size: 0.8em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 4px;
    line-height: 1.4;
    border: none;
}
.product:has(.onsale) .bgs-badge-new {
    top: 54px;
}

.woocommerce-Tabs-panel.woocommerce-Tabs-panel--description.panel.entry-content.wc-tab{
    line-height:2rem;
    /*
    ul li{
        color: var(--black-color);
    }*/
    p:has(strong){
        padding-top:40px;
        border-top: solid 1px var(--liseret-color);
        margin-top:60px;
    }
    p strong{
        color: var(--black-color);
    }
}

/* Lien "Créez un compte pour voir le prix" (plugin de masquage de prix),
   fiche produit — généré dans <p class="price"><a>...</a></p>. Sans règle
   dédiée il héritait du style de lien par défaut du thème (bleu/violet,
   souligné), au lieu du style CTA attendu à la place du prix.
   Mis en avant comme sur les listings : c'est l'action à pousser. */
.summary .price a {
    display: inline-block;
    padding: 10px 20px !important;
    background: var(--brand-color) !important;
    color: #fff !important;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.5em;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    transition: opacity .15s ease;
}
.summary .price a:hover {
    opacity: .85;
}

/* Zone infos complémentaires */
.woocommerce-tabs.wc-tabs-wrapper{
    .tabs.wc-tabs{
        background-color: #fcfcfc;
        border-radius: 4px;
        li a {
            padding: 1em 0em 1em 1em!important;
            &:focus{
                overflow: visible;
                margin-left: 2px;
            }
        }
    }
}

.woocommerce-LoopProduct-link.woocommerce-loop-product__link{
    &:focus{
        overflow: visible;
        margin-left: 2px;
    }
}

.woocommerce-Price-amount.amount{
    font-weight:800;
}

@media (min-width: 768px) {
    .storefront-sticky-add-to-cart__content-price {
        opacity: 1!important;
    }
}
.storefront-sticky-add-to-cart__content-price{
    .woocommerce-Price-amount.amount,
    .woocommerce-Price-currencySymbol{
        color: #c0392b !important;
    }
}