/* Styles pour personnaliser la section "Vous aimerez peut-être aussi…" 
   afin qu'elle ressemble visuellement à "Produits similaires"
   avec alignement à gauche, responsive, et sans sélecteur d'attributs */

/* Changement du titre "Vous aimerez peut-être aussi…" pour correspondre au style "Produits similaires" */
.single-product .related.products h2,
.single-product .cross-sells h2,
.single-product .upsells h2 {
    font-weight   : 600 !important;
    text-transform: uppercase !important;
    line-height   : 1 !important;
    border        : none !important;
    font-size     : 20px !important;
    padding-right : 5% !important;
    margin-bottom : 10px !important;
    padding-bottom: 10px !important;
    text-align    : left !important;
}

/* Ajout de la ligne rouge sous le titre comme dans "Produits similaires" */
.single-product .related.products h2:after,
.single-product .cross-sells h2:after,
.single-product .upsells h2:after {
    display      : block;
    content      : '';
    background   : #a2192d;
    width        : 32px;
    height       : 2px;
    margin-top   : 12px;
    margin-left  : 2px;
    margin-bottom: 20px;
}

/* Container principal pour les produits - alignement à gauche et responsive */
.single-product .related.products,
.single-product .cross-sells,
.single-product .upsells {
    text-align   : left;
    margin-bottom: 40px;
}

.single-product .related.products .products,
.single-product .cross-sells .products,
.single-product .upsells .products {
    margin-right   : -3px;
    margin-left    : -3px;
    display        : flex;
    flex-wrap      : wrap;
    justify-content: flex-start;
}

/* Styles pour chaque produit individuel - responsive de 1 à 5 produits */
.single-product .related.products li.product,
.single-product .cross-sells li.product,
.single-product .upsells li.product {
    margin-bottom: 30px;
    padding      : 0 3px;
    box-sizing   : border-box;
}

/* Configuration responsive pour 1 à 5 produits par ligne */
/* 5 produits par ligne sur grands écrans */
@media (min-width: 1200px) {

    .single-product .related.products li.product,
    .single-product .cross-sells li.product,
    .single-product .upsells li.product {
        width: 20%;
        /* 5 produits par ligne */
        flex : 0 0 20%;
    }
}

/* 4 produits par ligne sur écrans moyens */
@media (min-width: 992px) and (max-width: 1199px) {

    .single-product .related.products li.product,
    .single-product .cross-sells li.product,
    .single-product .upsells li.product {
        width: 25%;
        /* 4 produits par ligne */
        flex : 0 0 25%;
    }
}

/* 3 produits par ligne sur tablettes */
@media (min-width: 768px) and (max-width: 991px) {

    .single-product .related.products li.product,
    .single-product .cross-sells li.product,
    .single-product .upsells li.product {
        width: 33.333%;
        /* 3 produits par ligne */
        flex : 0 0 33.333%;
    }
}

/* 2 produits par ligne sur petites tablettes */
@media (min-width: 576px) and (max-width: 767px) {

    .single-product .related.products li.product,
    .single-product .cross-sells li.product,
    .single-product .upsells li.product {
        width: 50%;
        /* 2 produits par ligne */
        flex : 0 0 50%;
    }
}

/* 1 produit par ligne sur mobiles */
@media (max-width: 575px) {

    .single-product .related.products li.product,
    .single-product .cross-sells li.product,
    .single-product .upsells li.product {
        width: 100%;
        /* 1 produit par ligne */
        flex : 0 0 100%;
    }
}

/* Masquer les sélecteurs d'attributs SEULEMENT dans les sections produits similaires/cross-sells 
   Laisser les variation swatches visibles dans la fiche produit principale */
.single-product .related.products .variation-selector,
.single-product .cross-sells .variation-selector,
.single-product .upsells .variation-selector,
.single-product .related .swatch-align-right,
.single-product .cross-sells .swatch-align-right,
.single-product .upsells .swatch-align-right,
.single-product .related .variations_form,
.single-product .cross-sells .variations_form,
.single-product .upsells .variations_form {
    display: none!important;
    visibility: hidden!important;
}

/* Permettre l'affichage des variation swatches dans la fiche produit principale */
.single-product .cart .variations_form,
.single-product .cart .tawcvs-swatches,
.single-product .cart .variation-selector {
    display: block!important;
    visibility: visible!important;
}

.single-product .cart .tawcvs-swatches {
    display: inline-flex!important;
}

/* Styles pour les titres des produits */
.single-product .related.products .woocommerce-loop-product__title,
.single-product .cross-sells .woocommerce-loop-product__title,
.single-product .upsells .woocommerce-loop-product__title {
    font-size: 16px !important;
    margin   : 0 !important;
}

.single-product .related.products .woocommerce-loop-product__title:after,
.single-product .cross-sells .woocommerce-loop-product__title:after,
.single-product .upsells .woocommerce-loop-product__title:after {
    display: none !important;
}

/* Styles pour les images des produits - hauteur fixe à 275px */
.single-product .related.products li.product a img,
.single-product .cross-sells li.product a img,
.single-product .upsells li.product a img {
    padding-bottom : 0;
    width          : 100%;
    height         : 275px;
    object-fit     : cover;
    object-position: center;
}

/* Container des images avec hauteur fixe */
.single-product .related.products .tm-product-image-box,
.single-product .cross-sells .tm-product-image-box,
.single-product .upsells .tm-product-image-box {
    height  : 275px;
    overflow: hidden;
    position: relative;
}

/* Masquer complètement les prix */
.single-product .related.products .amount,
.single-product .cross-sells .amount,
.single-product .upsells .amount,
.single-product .related .price,
.single-product .cross-sells .price,
.single-product .upsells .price {
    display   : none !important;
    visibility: hidden !important;
}

/* Styles pour le contenu des produits */
.single-product .related .tm-product-content,
.single-product .cross-sells .tm-product-content,
.single-product .upsells .tm-product-content {
    width  : 100% !important;
    padding: 10px 5px;
}

/* Ajustements pour l'image box */
.single-product .related .tm-product-image-box:before,
.single-product .cross-sells .tm-product-image-box:before,
.single-product .upsells .tm-product-image-box:before {
    height: 84%;
}

/* Masquer les boutons d'ajout au panier dans les produits similaires si souhaité */
.single-product .related .tm-shop-icon,
.single-product .cross-sells .tm-shop-icon,
.single-product .upsells .tm-shop-icon {
    display: none !important;
}

/* Assurer que les colonnes Bootstrap ne surchargent pas le flexbox */
.single-product .related.products li.product.col-xs-12,
.single-product .cross-sells li.product.col-xs-12,
.single-product .upsells li.product.col-xs-12 {
    position: relative;
}

/* Correction pour les classes bootstrap existantes */
.single-product .related.products li.product[class*="col-"],
.single-product .cross-sells li.product[class*="col-"],
.single-product .upsells li.product[class*="col-"] {
    padding-left : 3px;
    padding-right: 3px;
}

/* Alignement général à gauche pour tout le contenu */
.single-product .related.products,
.single-product .cross-sells,
.single-product .upsells {
    text-align: left;
}

.single-product .related.products .products,
.single-product .cross-sells .products,
.single-product .upsells .products {
    justify-content: flex-start;
    align-items    : stretch;
}

/* Égalisation de la hauteur des produits */
.single-product .related.products li.product .tm-product-box,
.single-product .cross-sells li.product .tm-product-box,
.single-product .upsells li.product .tm-product-box {
    height        : 100%;
    display       : flex;
    flex-direction: column;
}

.single-product .related.products li.product .tm-product-content,
.single-product .cross-sells li.product .tm-product-content,
.single-product .upsells li.product .tm-product-content {
    flex-grow      : 1;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
}

/* ========================================
   STYLES POUR L'ENCART ACCESSOIRES ET PIÈCES DÉTACHÉES
   Utilise les produits "vente croisée" avec le même style que "Produits similaires"
   ======================================== */

/* Titre de la section accessoires */
.bloc-accesoires-product h2 {
    font-weight   : 600 !important;
    text-transform: uppercase !important;
    line-height   : 1 !important;
    border        : none !important;
    font-size     : 20px !important;
    padding-right : 5% !important;
    margin-bottom : 10px !important;
    padding-bottom: 10px !important;
    text-align    : left !important;
}

/* Ligne rouge sous le titre accessoires */
.bloc-accesoires-product h2:after {
    display      : block;
    content      : '';
    background   : #a2192d;
    width        : 32px;
    height       : 2px;
    margin-top   : 12px;
    margin-left  : 2px;
    margin-bottom: 20px;
}

/* Container principal pour la section accessoires */
.bloc-accesoires-product {
    text-align   : left;
    margin-bottom: 40px;
}

/* Liste des produits accessoires - même style que produits similaires */
.bloc-accesoires-product .products {
    margin-right   : -3px;
    margin-left    : -3px;
    display        : flex;
    flex-wrap      : wrap;
    justify-content: flex-start;
    list-style     : none;
    padding        : 0;
}

/* Styles pour chaque produit accessoire - responsive de 1 à 5 produits */
.bloc-accesoires-product li.product {
    margin-bottom: 30px;
    padding      : 0 3px;
    box-sizing   : border-box;
    list-style   : none;
}

/* Configuration responsive pour accessoires - 5 produits par ligne sur grands écrans */
@media (min-width: 1200px) {
    .bloc-accesoires-product li.product {
        width: 20%;
        /* 5 produits par ligne */
        flex : 0 0 20%;
    }
}

/* 4 produits par ligne sur écrans moyens */
@media (min-width: 992px) and (max-width: 1199px) {
    .bloc-accesoires-product li.product {
        width: 25%;
        /* 4 produits par ligne */
        flex : 0 0 25%;
    }
}

/* 3 produits par ligne sur tablettes */
@media (min-width: 768px) and (max-width: 991px) {
    .bloc-accesoires-product li.product {
        width: 33.333%;
        /* 3 produits par ligne */
        flex : 0 0 33.333%;
    }
}

/* 2 produits par ligne sur petites tablettes */
@media (min-width: 576px) and (max-width: 767px) {
    .bloc-accesoires-product li.product {
        width: 50%;
        /* 2 produits par ligne */
        flex : 0 0 50%;
    }
}

/* 1 produit par ligne sur mobiles */
@media (max-width: 575px) {
    .bloc-accesoires-product li.product {
        width: 100%;
        /* 1 produit par ligne */
        flex : 0 0 100%;
    }
}

/* Styles pour les images des accessoires - hauteur fixe à 275px */
.bloc-accesoires-product li.product img {
    padding-bottom : 0;
    width          : 100%;
    height         : 275px;
    object-fit     : cover;
    object-position: center;
}

/* Container des images accessoires avec hauteur fixe */
.bloc-accesoires-product li.product>div {
    height        : 100%;
    display       : flex;
    flex-direction: column;
    border        : 1px solid #eee;
    border-radius : 4px;
    overflow      : hidden;
    background    : #fff;
    transition    : all 0.3s ease;
}

.bloc-accesoires-product li.product>div:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform : translateY(-2px);
}

/* Container pour l'image avec hauteur fixe */
.bloc-accesoires-product li.product>div>a:first-child {
    display : block;
    height  : 275px;
    overflow: hidden;
    position: relative;
}

/* Styles pour les titres des accessoires */
.bloc-accesoires-product li.product h3 {
    font-size  : 16px !important;
    margin     : 10px !important;
    line-height: 1.3;
    font-weight: 600;
    color      : #1d1d1b;
}

.bloc-accesoires-product li.product h3:hover {
    color: #a2192d;
}

/* Container pour le contenu texte des accessoires */
.bloc-accesoires-product li.product>div>a:last-of-type {
    flex-grow      : 1;
    display        : flex;
    align-items    : flex-start;
    padding        : 0;
    text-decoration: none;
}

/* Masquer les prix des accessoires */
.bloc-accesoires-product .price {
    display   : none !important;
    visibility: hidden !important;
}

/* Style pour le lien vers le produit */
.bloc-accesoires-product li.product a {
    text-decoration: none;
    color          : inherit;
}

.bloc-accesoires-product li.product a:hover {
    text-decoration: none;
}

/* Ajustements pour l'affichage uniforme */
.bloc-accesoires-product li.product {
    position: relative;
}

/* Égalisation de la hauteur des produits accessoires */
.bloc-accesoires-product .products {
    align-items: stretch;
}