/**
 * CSS d'optimisation pour éviter le layout shift et améliorer les performances de chargement
 * de la page produit
 */

/* Préchargement - Cacher les éléments pendant l'initialisation JS */
.div_produit_custom:not([data-initialized="true"]) {
    visibility: hidden;
}

/* Une fois initialisé, afficher avec une transition douce */
.div_produit_custom[data-initialized="true"] {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* Optimisation pour éviter les recalculs de layout */
.div_produit_custom .price {
    contain: layout style;
}

.div_produit_custom .entry-summary {
    contain: layout;
}

/* Améliorer les performances des galeries d'images */
.hehocom-gallery__main-display img,
.hehocom-gallery__main-display video {
    will-change: transform;
}

/* Optimisation des animations et transitions */
.hehocom-gallery__thumbnail {
    contain: layout style paint;
}

/* Préchargement de l'espace pour les éléments qui peuvent être ajoutés dynamiquement */
.delivery-info-container {
    min-height: 200px;
}

/* Optimisation du rendu des prix */
.price .woocommerce-Price-amount {
    font-feature-settings: "tnum"; /* tabular numbers pour éviter les shifts */
}

/* Prix personnalisé HeHoCom */
.hehocom-custom-price-display {
    display: block !important;
    font-weight: bold;
    font-size: inherit;
    color: inherit;
}

.hehocom-custom-price-display .woocommerce-Price-amount {
    font-feature-settings: "tnum";
    display: inline;
}

/* Cacher les prix WooCommerce originaux quand le prix personnalisé est présent */
.hehocom-custom-price-display ~ .product-price,
.hehocom-custom-price-display ~ .price {
    display: none !important;
}

/* Notre prix personnalisé doit être visible et bien stylé */
#hehocom-custom-price {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin: 10px 0 !important;
}

/* Le container doit aussi être visible */
.woocommerce-variation-price {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Échelle de prix simplifiée */
.hehocom-price-scale {
    font-size: 14px;
    color: #666;
}

.price-scale-simple {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #939393;
    font-family: var(--police-montserrat-bold);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.min-price, .max-price {
    color: var(--couleur-5) !important;
    font-size: 16px;
    font-weight: 700;
}

.price-separator {
    color: #999;
}