.owl-carousel .owl-item img{
    width: 75% !important;
}

.grelated_products > div.owl-theme.owl-carousel.owl_slider.products.owl-loaded.owl-drag > div.owl-stage-outer > div > div > article{
    width: 200px !important;
}

.grelated_products > div.owl-theme.owl-carousel.owl_slider.products.owl-loaded.owl-drag > div.owl-stage-outer > div > div{
    margin-top: 16px !important;
}

.grelated_products > div.owl-theme.owl-carousel.owl_slider.products.owl-loaded.owl-drag > div.owl-stage-outer > div > div > article > div.thumbnail-container > div > div.product-manufacturer-name{
    font-size: 13px;
    justify-content: center;
    width: auto;
    display: flex;
}
.grelated_products > h2,
.grelated_products > .h2{
    margin: 22px auto auto auto;
    color: #e71e62;
    line-height: normal;
    padding: 0;
    border: none;
    background: 0 0;
    text-align: center;
    font-size: 20px;
}












#main > section.grelated_products{
    margin-top: 40px;
    margin-bottom: 60px;
}

.grelated_products {
    height: 350px;
    overflow: hidden;
}

/* Masquer le slider jusqu'à ce qu'il soit complètement chargé */
.grelated_products .owl-carousel:not(.owl-loaded) {
    opacity: 0;
    visibility: hidden;
}

/* Afficher le slider une fois qu'il est chargé */
.grelated_products .owl-carousel.owl-loaded {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-in-out;
}

.grelated_products .owl-theme .owl-nav [class*="owl-"]::before,
.grelated_products .owl-theme .owl-nav [class*="owl-"]::after {
    content: none !important;
    background: none !important;
}

/* Rendre le bouton transparent pour laisser voir votre SVG */
.grelated_products .owl-theme .owl-nav [class*="owl-"] {
    background: transparent !important;
    border: none !important;
    color: inherit !important; /* Évite de rendre votre SVG transparent */
    outline: none !important;
}

.grelated_products .owl-carousel {
    position: relative;
    padding: 0 75px; /* Create space on sides for the arrows */
}

.grelated_products .item.product-miniature .thumbnail-container {
    position: relative;
    overflow: hidden; /* This prevents the discount label from overflowing */
}

@media (max-width: 1023px) {
  .grelated_products .products .product-miniature {
        width: 9.8em;
    }
}

.grelated_products #nexttitle{
    display: none;
}

/* Position the discount percentage/amount in the top-right corner of the image */
.grelated_products .discount-percentage,
.grelated_products .discount-amount,
.grelated_products .product-discount-label {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #f72d6a;
    color: #fff;
    font-weight: 500;
    padding: 5px 8px;
    text-transform: uppercase;
    border-radius: 3px;
    z-index: 2; /* Ensures it appears above the image */
    font-size: 0.75rem;
}

/* Fix the duplicate discount elements in the HTML */
.grelated_products .item.product-miniature > .discount-percentage,
.grelated_products .item.product-miniature > .discount-amount {
    /* Hide the first discount element that's directly under article and not positioned correctly */
    display: none;
}

.grelated_products .owl-prev {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.grelated_products .owl-next {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}


.grelated_products .item.product-miniature {
    position: relative;
    border: 1px solid #ebebeb;
    background: #fff;
    border-radius: 10px;
    margin: 10px 5px;
    text-align: center;
    padding: 15px;
    box-sizing: border-box;
}

/* Discount label in the top-right corner */
.grelated_products .product-discount-label {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #f72d6a; /* couleur souhaitée */
    color: #fff;
    font-weight: 700;
    padding: 5px 8px;
    text-transform: uppercase;
    border-bottom-left-radius: 5px;
}

/* Product title */
.grelated_products .product-description .product-title {
    font-size: 1rem;
    margin: 10px 0 5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Price area */
.grelated_products .product-price-and-shipping {
    margin-bottom: 0;
}

/* Old (regular) price crossed out */
.grelated_products .product-price-and-shipping .regular-price {
    color: #999;
    text-decoration: line-through;
    margin-right: 5px;
    font-size: 0.875rem;
}

/* Current price in accent (ici rose) */
.grelated_products .product-price-and-shipping .price {
    color: #e71e62;
    font-weight: 700;
    font-size: 1rem;
}

/* Brand name */
.grelated_products .product-brand-name {
    margin-top: 5px;
    font-size: 0.875rem;
    color: #333;
    text-transform: uppercase;
}

/* Nouveau conteneur flex pour aligner prix et bouton */
.grelated_products .price-and-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

/* Bouton "Add to cart" avec effet hover fluide */
.grelated_products .btn.btn-black.add-to-cart {
    background-color: #333;
    color: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.grelated_products .btn.btn-black.add-to-cart:hover {
    background-color: #e71e62;
}



.grelated_products .owl-item {
    width: auto !important;
}

.grelated_products .owl-dots  {
    display: none;
}



/* Clear floats */
.grelated_products .clear {
    clear: both;
}

/* Basic styling for owl carousel items */
.grelated_products.g_style_ps8 .owl_slider .owl-item {
    overflow: hidden;
}

/* Responsive breakpoints */
@media only screen and (max-width: 575px) {
  .grelated_products .item.product-miniature {
        margin: 10px auto;
        width: 90%;
    }
}

/* 1) Assurez-vous que le conteneur parent du slider est en position: relative */
.grelated_products .owl-carousel,
.grelated_products .owl-theme,
.grelated_products .owl-stage-outer {
    position: relative;
}

/* 2) Positionnement des flèches sur les côtés, verticalement centrées */
.grelated_products .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 2; /* Pour que les flèches passent au-dessus des slides */
    display: flex;
    justify-content: space-between;
}

/* 3) Ajustez la disposition ou l’apparence des boutons suivant vos besoins */
.grelated_products .owl-prev,
.grelated_products .owl-next {
    cursor: pointer;
    /* Vos styles de flèche ou icône ici (taille, marge, etc.) */
}

/* Exemple pour décaler légèrement les flèches vers l’intérieur */
.grelated_products .owl-prev {
    margin-left: 10px;
}
.grelated_products .owl-next {
    margin-right: 10px;
}


@media only screen and (max-width: 1024px) {
    /* Masquer les flèches et les SVG statiques */
    .grelated_products .owl-nav,
    .grelated_products .owl-prev,
    .grelated_products .owl-next,
    .grelated_products .related-products-prev,
    .grelated_products .related-products-next,
    .grelated_products #prevtitle,
    .grelated_products #nexttitle {
        display: none !important;
    }

    /* Retirer les padding et forcer la largeur à 100% */
    .grelated_products .owl-carousel,
    .grelated_products .owl-stage-outer {
        padding: 0 !important;
        margin: 0 auto !important;
        width: 100% !important;
    }
    .grelated_products .owl-item {
        margin-right: 9px !important;
    }
}

.grelated_products #prevtitle > svg{
    display: none !important;
}


.grelated_products .product-price-and-shipping {
    flex-direction: row !important;
}

section.product__annex .grelated_products .products {
  display: block;
}

section.product__annex .grelated_products .owl-carousel .owl-stage {
  height: 305px;
  overflow: hidden;
}

@media (min-width: 1920px) {
    section.product__annex .grelated_products {
        height: 350px;
        overflow: hidden;
    }
}