/* ##########################################################
   GROUPE 00 — VARIABLES COMMUNES DES SLIDERS MARIUS
   Modifier ces valeurs pour harmoniser les sliders.
   ########################################################## */

:root {
    --marius-slider-gap: 16px;
    --marius-slider-gap-mobile: 12px;
    --marius-slider-card-radius: 5px;
    --marius-slider-arrow-size: 40px;
    --marius-slider-arrow-offset: 12px;
    --marius-slider-arrow-color: #212529;
    --marius-slider-arrow-background: #fff;
    --marius-slider-arrow-border: #ddd;
    --marius-slider-arrow-hover: #f5f5f5;
    --marius-slider-arrow-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}


/* ##########################################################
   GROUPE 01 — STYLES HISTORIQUES CONSERVÉS
   Source : css_commun.css fourni. Ordre et propriétés conservés.
   ########################################################## */









/* ==========================================================
   CAROUSEL
   ========================================================== */

body#index .zzz-home-products-block__slider {
    position: relative;

    width: 100%;
    min-width: 0;
}


/* ==========================================================
   CONTENEUR PRODUITS
   ========================================================== */

body#index .zzz-home-products-block__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;

    gap: 16px !important;

    width: 100%;
    min-width: 0;

    margin: 0 !important;
    padding: 12px 12px 1rem;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    scroll-behavior: smooth;

    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}


/* Cache scrollbar Chrome / Safari / Edge */

body#index .zzz-home-products-block__grid::-webkit-scrollbar {
    display: none;
}


/* ==========================================================
   PRODUITS - DESKTOP : 4 PRODUITS
   ========================================================== */

body#index .zzz-home-products-block__grid
> .product-miniature {
    flex:
        0 0
        calc((100% - 48px) / 4) !important;

    width:
        calc((100% - 48px) / 4) !important;

    max-width:
        calc((100% - 48px) / 4) !important;

    min-width: 0 !important;

    scroll-snap-align: start;

    border-radius: 5px 5px 0 0;
}


/* ==========================================================
   CARTE INTÉRIEURE
   ========================================================== */

body#index .zzz-home-products-block
.product-miniature__inner {
    overflow: hidden;

    border-radius: 5px;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease !important;
}


/* ==========================================================
   IMAGE - PAS DE ZOOM
   ========================================================== */

body#index .zzz-home-products-block
.product-miniature__image {
    transform: none !important;
}


/* ==========================================================
   HOVER CARTE PRODUIT
   ========================================================== */

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {

    body#index .zzz-home-products-block
    .product-miniature:hover
    .product-miniature__inner {
        transform: translateY(-3px) !important;

        border-color: #d4d9df !important;

        box-shadow:
            0 10px 25px
            rgba(0, 0, 0, .11) !important;
    }

    body#index .zzz-home-products-block
    .product-miniature:hover
    .product-miniature__image {
        transform: none !important;
    }

}


/* ==========================================================
   FLÈCHES
   MÊME STYLE QUE PRODUITS ASSOCIÉS
   ========================================================== */

body#index .zzz-home-products-block__prev,
body#index .zzz-home-products-block__next {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    margin: 0;
    padding: 0;

    color: #212529;
    background: #fff;

    border: 1px solid #ddd;
    border-radius: 50%;

    font-size: 28px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, .12);

    transition:
        background-color .2s ease,
        opacity .2s ease;
}


/* Flèche gauche */

body#index .zzz-home-products-block__prev {
    left: 12px;
}


/* Flèche droite */

body#index .zzz-home-products-block__next {
    right: 12px;
}


/* Hover flèches */

body#index .zzz-home-products-block__prev:not(:disabled):hover,
body#index .zzz-home-products-block__next:not(:disabled):hover {
    background: #f5f5f5;
}


/* Flèches désactivées */

body#index .zzz-home-products-block__prev:disabled,
body#index .zzz-home-products-block__next:disabled {
    opacity: .3;

    cursor: default;
    pointer-events: none;
}


/* ==========================================================
   TABLETTE LARGE : 3 PRODUITS
   ========================================================== */

@media (max-width: 1199.98px) {

    body#index .zzz-home-products-block__grid
    > .product-miniature {
        flex-basis:
            calc((100% - 32px) / 3) !important;

        width:
            calc((100% - 32px) / 3) !important;

        max-width:
            calc((100% - 32px) / 3) !important;
    }

}


/* ==========================================================
   PETITE TABLETTE : 2 PRODUITS
   ========================================================== */

@media (max-width: 767.98px) {

    body#index .zzz-home-products-block__grid
    > .product-miniature {
        flex-basis:
            calc((100% - 16px) / 2) !important;

        width:
            calc((100% - 16px) / 2) !important;

        max-width:
            calc((100% - 16px) / 2) !important;
    }

}


/* ==========================================================
   MOBILE
   85% = ON VOIT LE DÉBUT DU PRODUIT SUIVANT
   ========================================================== */

@media (max-width: 575.98px) {

    body#index .zzz-home-products-block__grid {
        gap: 12px !important;

        padding-left: 12px;
        padding-right: 12px;

        scroll-padding-inline: 12px;
    }

    body#index .zzz-home-products-block__grid
    > .product-miniature {
        flex:
            0 0
            85% !important;

        width: 85% !important;
        max-width: 85% !important;

        scroll-snap-align: start;
    }


    /* Mobile = navigation au doigt */

    body#index .zzz-home-products-block__prev,
    body#index .zzz-home-products-block__next {
        display: none !important;
    }

}




/* ##########################################################
   GROUPE 04 - HARMONISATION DES CARTES DU CARROUSEL
   ########################################################## */

/* ==========================================================
   MARIUS - HOME PRODUCT SLIDER
   HARMONISATION AVEC LE SLIDER ACCESSOIRES
   ========================================================== */

/* Cartes de même hauteur dans chaque carrousel */

body#index .zzz-home-products-block__grid {
    align-items: stretch !important;
}

body#index .zzz-home-products-block__grid > .product-miniature {
    align-self: stretch !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0;
}


/* La carte intérieure occupe toute la hauteur */

body#index .zzz-home-products-block__grid
> .product-miniature
> .product-miniature__inner {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    width: 100%;
}


/* Informations et commandes alignées verticalement */

body#index .zzz-home-products-block__grid .product-miniature__bottom {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

body#index .zzz-home-products-block__grid .product-miniature__infos {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0;
}

body#index .zzz-home-products-block__grid .product-miniature__prices {
    margin-top: auto !important;
}

body#index .zzz-home-products-block__grid .product-miniature__actions {
    flex-shrink: 0 !important;
}


/* Mobile : même largeur que le slider accessoires */

@media (max-width: 575px) {

    body#index .zzz-home-products-block__grid
    > .product-miniature {
        flex: 0 0 calc(100% - 42px) !important;
        width: calc(100% - 42px) !important;
        min-width: calc(100% - 42px) !important;
        max-width: calc(100% - 42px) !important;
    }

}


/* ##########################################################
   GROUPE 05 - QUANTITÉS DU CARROUSEL MOBILE
   ########################################################## */

/* ==========================================================
   MARIUS - HOME SLIDER
   QUANTITÉ IDENTIQUE AU SLIDER ACCESSOIRES
   ========================================================== */

@media (max-width: 767.98px) {

    /* Le groupe occupe toute la largeur disponible */
    body#index .zzz-home-products-block
    .product-miniature__form
    .quantity-button__group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        min-width: 0 !important;
    }


    /* Boutons moins et plus */
    body#index .zzz-home-products-block
    .quantity-button__group > .decrement,
    body#index .zzz-home-products-block
    .quantity-button__group > .increment {
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        padding: 0 !important;
    }


    /* Seul le champ central s'étire */
    body#index .zzz-home-products-block
    .quantity-button__group > .form-control {
        flex: 1 1 0 !important;
        width: 1% !important;
        min-width: 0 !important;
        max-width: none !important;
        text-align: center !important;
    }

}


/* ##########################################################
   GROUPE 06 - BORDURES DES CARTES SUR MOBILE
   ########################################################## */

/* ==========================================================
   MARIUS - BORDURE CARTES PRODUITS ACCUEIL
   IDENTIQUE AUX CARTES DE LA FICHE PRODUIT
   ========================================================== */

@media (max-width: 767.98px) {

    body#index .zzz-home-products-block__grid
    > .product-miniature
    > .product-miniature__inner {
        border: 1px solid #e6e9ed !important;
        border-radius: 5px !important;
        background: #fff !important;
        overflow: hidden !important;
    }

}


/* ##########################################################
   GROUPE 07 - BORDURES DU CARROUSEL
   ########################################################## */

/* ==========================================================
   MARIUS - HOME PRODUCTS SLIDER
   BORDURE IDENTIQUE AU SLIDER ACCESSOIRES
   ========================================================== */

body#index .zzz-home-products-block__grid {
    background: #fff !important;

    border-top: 1px solid #5f8e2f !important;
    border-right: 1px solid #ebebeb !important;
    border-bottom: 1px solid #ebebeb !important;
    border-left: 1px solid #ebebeb !important;

    border-radius: 0 0 5px 5px !important;
}


/* ##########################################################
   GROUPE 08 - TITRES ET ONGLETS DES CATÉGORIES
   ########################################################## */

/* ==========================================================
   MARIUS - HOME PRODUCTS
   TITRES IDENTIQUES AU SLIDER "VOUS AIMEREZ AUSSI"
   ========================================================== */

/* Supprimer l'espace entre le titre et le slider */
body#index .zzz-home-products-block__header {
    margin: 0 !important;
    text-align: left !important;
}


/* Onglet vert */
body#index .zzz-home-products-block__title {
    position: relative !important;
    z-index: 1;

    display: table !important;
    width: auto !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 8px 18px !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    letter-spacing: 0.15px !important;

    text-transform: uppercase !important;
    text-align: left !important;

    color: #fff !important;

    background: linear-gradient(
        to bottom,
        #6fb828 0%,
        #5f8e2f 100%
    ) !important;

    border: 1px solid #5f862f !important;
    border-bottom: 0 !important;
    border-radius: 5px 5px 0 0 !important;

    box-shadow: 0 0 4px rgba(0, 0, 0, 0.27) !important;
}


/* Liens des titres de CATEGORIEs */
body#index .zzz-home-products-block__title a,
body#index .zzz-home-products-block__title a:hover {
    color: #fff !important;
    text-decoration: none !important;
}


/* Mobile */
@media (max-width: 767.98px) {

    body#index .zzz-home-products-block__title {
        font-size: 17px !important;
        line-height: 18px !important;
        padding: 8px 18px !important;

        white-space: normal !important;
        overflow-wrap: break-word;
    }

}


/* ##########################################################
   GROUPE 11 - CADRE ET PIED DU CARROUSEL
   ########################################################## */

/* MARIUS - HOME SLIDER - CADRE COMPLET AVEC FOOTER */

/* Bordure autour des cartes ET du bouton */
body#index .zzz-home-products-block--category .zzz-home-products-block__slider {
    background: #fff !important;
    border: 1px solid #ebebeb !important;
    border-top-color: #5f8e2f !important;
    border-radius: 0 0 5px 5px !important;
}


/* Supprimer l'ancienne bordure autour des cartes uniquement */
body#index .zzz-home-products-block--category .zzz-home-products-block__grid {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}


/* Bouton à l'intérieur du cadre, en bas à droite */
body#index .zzz-home-products-block--category .zzz-home-products-block__footer {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0 15px 15px !important;
    margin: 0 !important;
}

@media (max-width: 767.98px) {
    body#index .zzz-home-products-block--category .zzz-home-products-block__footer {
        padding: 0 12px 12px !important;
    }
}




















	/* ==========================================================
	MARIUS - CENTRAGE VERTICAL FLÈCHES PRODUITS ASSOCIÉS
	========================================================== */
	
	@media (max-width: 575px) {
	
		body#product .product__accessories .marius-accessories-arrow {
			top: 50% !important;
			transform: translateY(-50%) !important;
		}
	
	}


	/* ==========================================================
	ACCESSOIRES - ACTIONS
	"Vous aimerez aussi"
	Icône panier seule sur desktop + mobile
	========================================================== */
	
	/* Cache toujours le texte */
	body#product
	.product__accessories
	.product-miniature__form
	> .product-miniature__add
	.product-miniature__add-text {
		display: none !important;
	}
	
	/* Bouton panier compact */
	body#product
	.product__accessories
	.product-miniature__form
	> .product-miniature__add {
		flex: 0 0 38px !important;
	
		width: 38px !important;
		min-width: 38px !important;
		max-width: 38px !important;
	
		height: 38px !important;
		min-height: 38px !important;
	
		padding: 0 !important;
	
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	
		overflow: hidden !important;
	}
	
	/* ==========================================================
	ACCESSOIRES - MOBILE
	========================================================== */
	
	@media (max-width: 575.98px) {
	
		/* Quantité prend tout l'espace disponible */
		body#product
		.product__accessories
		.product-miniature__form
		.quantity-button {
			flex: 1 1 auto !important;
	
			width: auto !important;
			min-width: 0 !important;
			max-width: none !important;
		}
	
		body#product
		.product__accessories
		.quantity-button__group {
			width: 100% !important;
		}
	
		/* - et + */
		body#product
		.product__accessories
		.quantity-button__group .decrement,
		body#product
		.product__accessories
		.quantity-button__group .increment {
			flex: 0 0 44px !important;
	
			width: 44px !important;
			min-width: 44px !important;
			max-width: 44px !important;
		}
	
		/* Quantité centrale */
		body#product
		.product__accessories
		.quantity-button__group .form-control {
			flex: 1 1 auto !important;
	
			width: 1% !important;
			min-width: 0 !important;
	
			text-align: center !important;
		}
	
		/* Panier légèrement plus grand au doigt sur mobile */
		body#product
		.product__accessories
		.product-miniature__form
		> .product-miniature__add {
			flex: 0 0 44px !important;
	
			width: 44px !important;
			min-width: 44px !important;
			max-width: 44px !important;
	
			height: 38px !important;
		}
	
		/* - et + : largeur fixe */
		body#product
		.product__accessories
		.quantity-button__group > .decrement,
		body#product
		.product__accessories
		.quantity-button__group > .increment {
			flex: 0 0 38px !important;
		
			width: 38px !important;
			min-width: 38px !important;
			max-width: 38px !important;
		
			padding: 0 !important;
		}
		
		/* Seul le champ quantité s'étire */
		body#product
		.product__accessories
		.quantity-button__group > .form-control {
			flex: 1 1 0 !important;
		
			width: 1% !important;
			min-width: 0 !important;
			max-width: none !important;
		
			text-align: center !important;
		}
	}
	

	
	/* ==========================================================
	MARIUS - HARMONISATION
	VOUS AIMEREZ AUSSI + DÉJÀ VUS
	========================================================== */
	
	
	/* Même espacement vertical des 2 sections */
	body#product .product__accessories,
	body#product .ps-viewedproduct {
		margin-top: 2em !important;
		margin-bottom: 2rem !important;
	}
	
	
	/* Même largeur / structure du contenu */
	body#product .product__accessories .marius-accessories-slider,
	body#product .ps-viewedproduct .module-products__list {
		width: 100% !important;
		margin: 0 !important;
		background: #fff !important;
		border-top: 1px solid #5f8e2f !important;
		border-right: 1px solid #ebebeb !important;
		border-bottom: 1px solid #ebebeb !important;
		border-left: 1px solid #ebebeb !important;
		border-radius: 0 0 5px 5px !important;
	}
	
	
	/* ==========================================================
	TITRES IDENTIQUES
	========================================================== */
	
	body#product .product__accessories .section-title,
	body#product .ps-viewedproduct .section-title {
		position: relative !important;
		z-index: 1;
	
		display: table !important;
	
		margin: 0 !important;
		padding: 8px 18px !important;
	
		font-family: "Montserrat", sans-serif !important;
		font-size: 17px !important;
		font-weight: 600 !important;
		line-height: 18px !important;
		letter-spacing: .15px;
	
		text-transform: uppercase;
		white-space: nowrap;
	
		color: #fff !important;
	
		background: linear-gradient(
			to bottom,
			#6fb828 0%,
			#5f8e2f 100%
		) !important;
	
		border: 1px solid #5f862f !important;
		border-bottom: 0 !important;
		border-radius: 5px 5px 0 0 !important;
	
		box-shadow: 0 0 4px rgba(0, 0, 0, .27);
	}
	
	body#product .product__accessories .section-title::after,
	body#product .ps-viewedproduct .section-title::after {
		content: none !important;
	}
	
	
	/* ==========================================================
	MÊME LISTE HORIZONTALE
	========================================================== */
	
	body#product
	.product__accessories
	.marius-accessories-slider
	> .products,
	
	body#product
	.ps-viewedproduct
	.module-products__list
	> .products {
		display: flex !important;
		flex-wrap: nowrap !important;
	
		gap: 16px !important;
	
		width: 100% !important;
	
		margin: 0 !important;
		padding: 12px 12px 22px !important;
	
		overflow-x: auto !important;
		overflow-y: hidden !important;
	
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 12px;
		scroll-behavior: smooth;
	
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	
		scrollbar-width: none;
	}
	
	body#product
	.product__accessories
	.marius-accessories-slider
	> .products::-webkit-scrollbar,
	
	body#product
	.ps-viewedproduct
	.module-products__list
	> .products::-webkit-scrollbar {
		display: none;
	}
	
	
	/* ==========================================================
	MÊME LARGEUR DES CARTES
	DESKTOP = 4
	========================================================== */
	
	body#product
	.product__accessories
	.marius-accessories-slider
	> .products
	> .product-miniature,
	
	body#product
	.ps-viewedproduct
	.module-products__list
	> .products
	> .product-miniature {
		flex: 0 0 calc((100% - 48px) / 4) !important;
	
		min-width: 0 !important;
	
		scroll-snap-align: start;
	
		border-radius: 5px;
	}
	
	
	/* TABLETTE = 3 */
	@media (max-width: 1199px) {
	
		body#product
		.product__accessories
		.marius-accessories-slider
		> .products
		> .product-miniature,
	
		body#product
		.ps-viewedproduct
		.module-products__list
		> .products
		> .product-miniature {
			flex-basis: calc((100% - 32px) / 3) !important;
		}
	
	}
	
	
	/* PETITE TABLETTE = 2 */
	@media (max-width: 767px) {
	
		body#product
		.product__accessories
		.marius-accessories-slider
		> .products
		> .product-miniature,
	
		body#product
		.ps-viewedproduct
		.module-products__list
		> .products
		> .product-miniature {
			flex-basis: calc((100% - 16px) / 2) !important;
		}
	
	}



/* ==========================================================
   DÉJÀ VUS + ACCESSOIRES
   Toutes les cartes = hauteur de la plus grande
   ========================================================== */

body#product
.product__accessories
.marius-accessories-slider > .products,

body#product
.ps-viewedproduct
.module-products__list > .products {
    align-items: stretch !important;
}


/* Chaque miniature s'étire sur toute la hauteur disponible */
body#product
.product__accessories
.marius-accessories-slider > .products > .product-miniature,

body#product
.ps-viewedproduct
.module-products__list > .products > .product-miniature {
    height: auto !important;
    align-self: stretch !important;
}


/* Le corps de la carte occupe toute la hauteur */
body#product
.product__accessories
.product-miniature__container,

body#product
.ps-viewedproduct
.product-miniature__container {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}


/* Les actions quantité/panier restent alignées en bas */
body#product
.product__accessories
.product-miniature__form,

body#product
.ps-viewedproduct
.product-miniature__form {
    margin-top: auto !important;
}



/* ==========================================================
   PRODUIT - DEJA VU + VOUS AIMEREZ AUSSI
   PRIX MOBILE SUR EXACTEMENT 2 LIGNES
   ========================================================== */
@media (max-width: 575.98px) {

    /* LIGNE 1 :
       5,65 €  TTC  (4,71 € HT)
    */
    body#product
    .product-miniature
    .marius-miniature-price__current {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
        gap: 0 !important;
        white-space: nowrap !important;
    }

    body#product
    .product-miniature
    .marius-miniature-price__main {
        flex: 0 0 auto !important;
        font-size: 22px !important;
        line-height: 24px !important;
    }

    body#product
    .product-miniature
    .marius-miniature-price__ttc {
        flex: 0 0 auto !important;
        display: inline !important;
        margin-left: 7px !important;
        font-size: 14px !important;
        line-height: 16px !important;
    }

    /* HT reste SUR LA MÊME LIGNE */
    body#product
    .product-miniature
    .marius-miniature-price__ht {
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        display: inline !important;
        width: auto !important;
        margin-left: 5px !important;
        position: relative !important;
        top: -4px !important;
        font-size: 9px !important;
        line-height: 10px !important;
        white-space: nowrap !important;
    }


    /* LIGNE 2 :
       au lieu de 5,95 €  (Économisez 5%)
    */
    body#product
    .product-miniature
    .marius-miniature-price__old-line {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
        gap: 0 !important;
        margin-top: 2px !important;
        font-size: 12px !important;
        line-height: 14px !important;
        white-space: nowrap !important;
    }

    body#product
    .product-miniature
    .marius-miniature-price__old {
        flex: 0 0 auto !important;
        display: inline !important;
        margin-left: 3px !important;
        text-decoration: line-through !important;
    }

    /* Économisez reste SUR LA MÊME LIGNE */
    body#product
    .product-miniature
    .marius-miniature-price__discount {
        flex: 0 0 auto !important;
        display: inline !important;
        width: auto !important;
        margin-left: 4px !important;
        font-size: 11px !important;
        line-height: 13px !important;
        white-space: nowrap !important;
    }
}


	
	/* ==========================================================
	MOBILE
	Une grande carte + aperçu de la suivante
	========================================================== */
	
	@media (max-width: 575px) {
	
		body#product
		.product__accessories
		.marius-accessories-slider
		> .products
		> .product-miniature,
	
		body#product
		.ps-viewedproduct
		.module-products__list
		> .products
		> .product-miniature {
			flex: 0 0 calc(100% - 42px) !important;
			min-width: calc(100% - 42px) !important;
		}
	
	}



/* ==========================================================
   DÉJÀ VUS - QUANTITÉ COMPACTE
   ========================================================== */

/* Le bloc quantité prend l'espace disponible */
body#product
.ps-viewedproduct
.product-miniature__form
.quantity-button {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

/* Groupe complet */
body#product
.ps-viewedproduct
.quantity-button__group {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* - et + : largeur fixe */
body#product
.ps-viewedproduct
.quantity-button__group > .decrement,
body#product
.ps-viewedproduct
.quantity-button__group > .increment {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    padding: 0 !important;
}

/* Seul le champ quantité s'étire */
body#product
.ps-viewedproduct
.quantity-button__group > .form-control {
    flex: 1 1 0 !important;
    width: 1% !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: center !important;
}

/* Panier compact */
body#product
.ps-viewedproduct
.product-miniature__form
> .product-miniature__add {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 38px !important;
    padding: 0 !important;
}

/* Pas de texte : icône uniquement */
body#product
.ps-viewedproduct
.product-miniature__add-text {
    display: none !important;
}















/* ##########################################################
   GROUPE 06 - PRODUITS ASSOCIÉS
   ########################################################## */

/* ==========================================================
   MARIUS - SLIDER PRODUITS ASSOCIÉS
   ========================================================== */


/* ==========================================================
   CONTENEUR GLOBAL
   ========================================================== */

body#product .product__accessories {
    margin: 2em 0 2rem;
}

body#product .product__accessories .module-products,
body#product .product__accessories .marius-accessories-slider {
    position: relative;
}


/* ==========================================================
   TITRE STYLE ONGLET
   ========================================================== */

body#product .product__accessories .module-products::before {
    content: "";
    position: absolute;

    top: 35px;
    left: 0;
    right: 0;

    height: 1px;

    background: #5f8e2f;

    z-index: 0;
}

body#product .product__accessories .section-title {
    position: relative;
    z-index: 1;

    display: table;

    margin: 0;
    padding: 8px 18px;

    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: .15px;

    text-transform: uppercase;
    white-space: nowrap;

    color: #fff;

    background:
        linear-gradient(
            to bottom,
            #6fb828 0%,
            #5f8e2f 100%
        );

    border: 1px solid #5f862f;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;

    box-shadow: 0 0 4px rgba(0, 0, 0, .27);
}

body#product .product__accessories .section-title::after {
    content: none !important;
}


/* ==========================================================
   CONTENU / SLIDER
   ========================================================== */

body#product .product__accessories .marius-accessories-slider {
    width: 100%;
    margin: 0;
    background: #fff;
    border-top: 1px solid #5f8e2f;
    border-right: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
    border-radius: 0 0 5px 5px;
}


/* ==========================================================
   LISTE DES PRODUITS
   ========================================================== */

body#product
.product__accessories
.marius-accessories-slider
> .products {
    display: flex !important;
    flex-wrap: nowrap !important;

    gap: 16px !important;

    width: 100%;

    margin: 0 !important;
    padding: 12px 12px 22px;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    scroll-behavior: smooth;

    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}


body#product
.product__accessories
.marius-accessories-slider
> .products::-webkit-scrollbar {
    display: none;
}


/* ==========================================================
   PRODUITS - DESKTOP : 4 PRODUITS
   ========================================================== */

body#product
.product__accessories
.marius-accessories-slider
> .products
> .product-miniature {
    flex: 0 0 calc((100% - 48px) / 4) !important;

    min-width: 0 !important;

    scroll-snap-align: start;

    border-radius: 5px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* ==========================================================
   MARIUS - BORDURE CARTES PRODUITS
   ========================================================== */

@media (max-width: 767.98px) {

    body#product .product-miniature
    > .product-miniature__inner {
        border: 1px solid #e6e9ed !important;
        border-radius: 5px !important;
        background: #fff !important;
        overflow: hidden !important;
    }

}


/* ==========================================================
   CARTE INTÉRIEURE
   ========================================================== */

body#product
.product__accessories
.product-miniature__inner {
    overflow: hidden;

    border-radius: 5px;
}


/* ==========================================================
   IMAGE - AUCUN ZOOM
   ========================================================== */

body#product
.product__accessories
.marius-accessories-slider
.product-miniature__image {
    transform: none !important;
    transition: none !important;
}


/* ==========================================================
   HOVER CARTE
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

    body#product
    .product__accessories
    .marius-accessories-slider
    > .products
    > .product-miniature:hover {
        transform: translateY(-6px);

        box-shadow:
            0 10px 22px -4px rgba(0, 0, 0, .18);
    }

}


/* ==========================================================
   FLÈCHES
   ========================================================== */

body#product .product__accessories .marius-accessories-prev,
body#product .product__accessories .marius-accessories-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    padding: 0;

    color: #212529;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;

    font-size: 28px;
    line-height: 1;
    cursor: pointer;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

body#product .product__accessories .marius-accessories-prev {
    left: 12px;
}

body#product .product__accessories .marius-accessories-next {
    right: 12px;
}

body#product .product__accessories .marius-accessories-prev:hover,
body#product .product__accessories .marius-accessories-next:hover {
    background: #f5f5f5;
}

/* Mobile : navigation au doigt, sans flèches */
@media (max-width: 575.98px) {
    body#product .product__accessories .marius-accessories-prev,
    body#product .product__accessories .marius-accessories-next {
        display: none !important;
    }
}


/* ==========================================================
   TABLETTE : 3 PRODUITS
   ========================================================== */

@media (max-width: 1199px) {

    body#product
    .product__accessories
    .marius-accessories-slider
    > .products
    > .product-miniature {
        flex-basis: calc((100% - 32px) / 3) !important;
    }

}


/* ==========================================================
   PETITE TABLETTE : 2 PRODUITS
   ========================================================== */

@media (max-width: 767px) {

    body#product
    .product__accessories
    .marius-accessories-slider
    > .products
    > .product-miniature {
        flex-basis: calc((100% - 16px) / 2) !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 575px) {

    body#product
    .product__accessories
    .marius-accessories-slider
    > .products
    > .product-miniature {
        flex-basis: 85% !important;
    }

}






/* ==========================================================
   PRODUCT - Bouton Aperçu rapide
   ========================================================== */

body#product .product-miniature__quickview-button {
	background-color: rgb(255 255 255 / 80%) !important;
    border: 0 !important;
}




/* ==========================================================
   MARIUS - PRODUCT ACCESSORIES
   ARRONDIS SUPÉRIEURS DES IMAGES
   ========================================================== */

body#product .product__accessories
.product-miniature__top,

body#product .product__accessories
.product-miniature__image-container,

body#product .product__accessories
.product-miniature__image-link,

body#product .product__accessories
.product-miniature__image {
    border-radius: 5px 5px 0 0 !important;
    overflow: hidden !important;
}

body#product .product__accessories
.product-miniature__image {
    display: block !important;
}
















/* ##########################################################
   GROUPE 07 - PRODUITS DÉJÀ VUS
   ########################################################## */

/* ==========================================================
   MARIUS - PRODUITS DÉJÀ VUS
   Même style que PRODUITS ASSOCIÉS
   ========================================================== */

/* ==========================================================
   Modules produits pleine largeur. Déjà vus.
   ========================================================== */
body#product .ps-viewedproduct > .module-products.container {
    width: 100%;
    max-width: 1440px !important;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================
   BLOC GLOBAL
   ========================================================== */

body#product .module-products__list {
    position: relative;
    width: 100%;
    margin: 0;
    background: #fff;
    border-top: 1px solid #5f8e2f;
    border-right: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
    border-radius: 0 0 5px 5px;
    box-shadow: none;
}

body#product .ps-viewedproduct {
    margin-top: 2em;
    margin-bottom: 2rem;
}


/* ==========================================================
   CONTENEUR
   ========================================================== */

body#product .ps-viewedproduct .module-products {
    position: relative;
}


/* ==========================================================
   TITRE STYLE ONGLET
   ========================================================== */

body#product .ps-viewedproduct .module-products::before {
    content: "";

    position: absolute;
    top: 35px;
    left: 0;
    right: 0;

    height: 1px;

    background: #5f8e2f;

    z-index: 0;
}


body#product .ps-viewedproduct .section-title {
    position: relative;
    z-index: 1;

    display: table;
    width: auto;

    margin: 0;
    padding: 8px 18px;

    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: .15px;

    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;

    color: #fff;

    background:
        linear-gradient(
            to bottom,
            #6fb828 0%,
            #5f8e2f 100%
        );

    border-top: 1px solid #5f862f;
    border-right: 1px solid #5f862f;
    border-left: 1px solid #5f862f;

    border-radius: 5px 5px 0 0;

    box-shadow:
        0 0 4px rgba(0, 0, 0, .27);
}


/* Aucun ancien pseudo élément */

body#product .ps-viewedproduct .section-title::after {
    content: none !important;
}


/* ==========================================================
   LISTE DES PRODUITS
   ========================================================== */

body#product .ps-viewedproduct
.module-products__list
> .products {

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 16px !important;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    scroll-padding-inline: 12px;

    scrollbar-width: none;

    margin: 0 !important;

    padding-top: 12px;
    padding-bottom: 22px;
    padding-left: 12px;
    padding-right: 12px;
}


/* Chrome / Edge / Safari */

body#product .ps-viewedproduct
.module-products__list
> .products::-webkit-scrollbar {
    display: none;
}


/* ==========================================================
   PRODUITS - DESKTOP : 4 PRODUITS
   ========================================================== */

body#product .ps-viewedproduct
.module-products__list
> .products
> .product-miniature {

    flex: 0 0 calc((100% - 48px) / 4) !important;

    width: calc((100% - 48px) / 4) !important;
    max-width: calc((100% - 48px) / 4) !important;

    min-width: 0 !important;

    scroll-snap-align: start;

    border-radius: 5px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* ==========================================================
   CARTE BLANCHE INTÉRIEURE
   ========================================================== */

body#product .ps-viewedproduct
.product-miniature__inner {
    border-radius: 5px;
    overflow: hidden;
}


/* ==========================================================
   HOVER CARTE
   ========================================================== */

@media (hover: hover) and (pointer: fine) {

    body#product .ps-viewedproduct
    .module-products__list
    > .products
    > .product-miniature:hover {

        transform: translateY(-6px);

        box-shadow:
            0 10px 22px -4px rgba(0, 0, 0, .18);
    }

}


/* ==========================================================
   TABLETTE : 3 PRODUITS
   ========================================================== */

@media (max-width: 1199px) {

    body#product .ps-viewedproduct
    .module-products__list
    > .products
    > .product-miniature {

        flex-basis: calc((100% - 32px) / 3) !important;

        width: calc((100% - 32px) / 3) !important;
        max-width: calc((100% - 32px) / 3) !important;
    }

}


/* ==========================================================
   PETITE TABLETTE : 2 PRODUITS
   ========================================================== */

@media (max-width: 767px) {

    body#product .ps-viewedproduct
    .module-products__list
    > .products
    > .product-miniature {

        flex-basis: calc((100% - 16px) / 2) !important;

        width: calc((100% - 16px) / 2) !important;
        max-width: calc((100% - 16px) / 2) !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 575px) {

    body#product .ps-viewedproduct .module-products__list {
    }


    body#product .ps-viewedproduct
    .module-products__list
    > .products
    > .product-miniature {

        flex-basis: 85% !important;

        width: 85% !important;
        max-width: 85% !important;
    }

}


/* ==========================================================
   MARIUS - PRODUITS DÉJÀ VUS
   ARRONDIS SUPÉRIEURS DES IMAGES
   ========================================================== */

body#product .ps-viewedproduct
.product-miniature__top,

body#product .ps-viewedproduct
.product-miniature__image-container,

body#product .ps-viewedproduct
.product-miniature__image-link,

body#product .ps-viewedproduct
.product-miniature__image {
    border-radius: 5px 5px 0 0 !important;
    overflow: hidden !important;
}

body#product .ps-viewedproduct
.product-miniature__image {
    display: block !important;
}




/* ##########################################################
   GROUPE 08 - GALERIE ET LIGHTBOX
   ########################################################## */

/* ==========================================================
   PRODUCT THUMBNAILS CAROUSEL - MARIUS
   ========================================================== */

body#product .product__thumbnails {
    position: relative;

    width: 100%;
    margin-top: 14px;

    padding: 0 34px;
}

body#product .product__thumbnails-list {
    display: flex;
    flex-wrap: nowrap;

    gap: 10px;

    width: 100%;
    margin: 0;
    padding: 2px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity;

    /* Empêche le swipe horizontal de se propager à la page */
    overscroll-behavior-x: contain;

    /* Défilement tactile fluide sur mobile */
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

body#product .product__thumbnails-list::-webkit-scrollbar {
    display: none;
}

body#product .product__thumbnails-item {
    flex: 0 0 calc((100% - 30px) / 4);

    width: calc((100% - 30px) / 4);
    max-width: calc((100% - 30px) / 4);

    margin: 0 !important;

    scroll-snap-align: start;
}

body#product .product__thumbnail {
    width: 100%;
}

body#product .product__thumbnail-image {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 1 / 1;
    object-fit: contain;
}





/* ==========================================================
   PRODUCT THUMBNAIL - SELECTED
   ========================================================== */

body#product .product__thumbnail {
    padding: 0;
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
}


/* Image */
body#product .product__thumbnail-image {
    display: block;

    border: 2px solid transparent !important;
    border-radius: 5px;

    outline: 0 !important;
    box-shadow: none !important;

    opacity: .45;

    transition:
        opacity .18s ease,
        border-color .18s ease;
}


/* ==========================================================
   MINIATURE SÉLECTIONNÉE
   ========================================================== */

body#product .product__thumbnail.marius-thumb-current
.product__thumbnail-image {
    opacity: 1;
    border-color: #0d6efd !important;
}


/* ==========================================================
   SURVOL
   ========================================================== */

body#product .product__thumbnail:hover
.product__thumbnail-image {
    opacity: .85;
}


/*
 * La miniature sélectionnée reste totalement visible
 * même au survol.
 */
body#product .product__thumbnail.marius-thumb-current:hover
.product__thumbnail-image {
    opacity: 1;
}






/* Flèches */

body#product .marius-thumbs-prev,
body#product .marius-thumbs-next {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    padding: 0;

    border: 1px solid #e5e7eb;
    border-radius: 50%;

    background: #fff;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;
}

body#product .marius-thumbs-prev {
    left: 0;
}

body#product .marius-thumbs-next {
    right: 0;
}

body#product .marius-thumbs-prev:disabled,
body#product .marius-thumbs-next:disabled {
    opacity: .25;
    cursor: default;
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 991px) {

    body#product .product__thumbnails-item {
        flex: 0 0 calc((100% - 30px) / 4);

        width: calc((100% - 30px) / 4);
        max-width: calc((100% - 30px) / 4);
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 575px) {

    body#product .product__thumbnails {
        padding: 0 28px;
    }

    body#product .product__thumbnails-item {
        flex: 0 0 calc((100% - 20px) / 3);

        width: calc((100% - 20px) / 3);
        max-width: calc((100% - 20px) / 3);
    }

    body#product .marius-thumbs-prev,
    body#product .marius-thumbs-next {
        width: 24px;
        height: 24px;

        font-size: 18px;
    }
}










@media (max-width: 575.98px) {


/* ##########################################################
   GROUPE 10 - MINIATURES, WISHLIST ET ACCESSOIRES
   ########################################################## */

    /* ======================================================
       PRIX MINIATURES PRODUIT
       Même disposition que les catégories
       ====================================================== */

    body#product .product__accessories .marius-miniature-prices,
    body#product .ps-viewedproduct .marius-miniature-prices {
        display: block !important;
    }

    /* Prix TTC + HT */
    body#product .product__accessories .marius-miniature-price__current,
    body#product .ps-viewedproduct .marius-miniature-price__current {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        column-gap: 4px !important;
        row-gap: 0 !important;
        width: 100% !important;
    }

    /* HT obligatoirement sous le prix TTC */
    body#product .product__accessories .marius-miniature-price__ht,
    body#product .ps-viewedproduct .marius-miniature-price__ht {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;

        position: relative;
        top: -2px;

        font-size: 9px !important;
        line-height: 11px !important;
    }

    /* "au lieu de 18,50 €" = nouvelle ligne */
    body#product .product__accessories .marius-miniature-price__old-line,
    body#product .ps-viewedproduct .marius-miniature-price__old-line {
        display: block !important;
        width: 100% !important;

        margin-top: 0 !important;

        font-size: 12px !important;
        line-height: 14px !important;
        white-space: normal !important;
    }

    /* Économisez = encore une nouvelle ligne */
    body#product .product__accessories .marius-miniature-price__discount,
    body#product .ps-viewedproduct .marius-miniature-price__discount {
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;

        font-size: 11px !important;
        line-height: 13px !important;
    }
}

/* ##########################################################
   GROUPE 02 — ADAPTATEURS COMMUNS : ESPACEMENT DES CARTES
   ########################################################## */

body#index .zzz-home-products-block__grid,
body#product .product__accessories .marius-accessories-slider > .products,
body#product .ps-viewedproduct .module-products__list > .products,
body#ybc_blog_page .marius-blog-related-products .marius-accessories-slider > .blog-product-list {
    gap: var(--marius-slider-gap) !important;
}


/* ##########################################################
   GROUPE 03 — ADAPTATEURS COMMUNS : ARRONDI DES CARTES
   ########################################################## */

body#index .zzz-home-products-block .product-miniature__inner,
body#product .product__accessories .product-miniature__inner,
body#product .ps-viewedproduct .product-miniature__inner {
    border-radius: var(--marius-slider-card-radius) !important;
}


/* ##########################################################
   GROUPE 04 — ADAPTATEURS COMMUNS : FLÈCHES
   Le blog conserve son CSS existant si une règle plus spécifique
   ou un style inline est appliqué par son module.
   ########################################################## */

body#index .zzz-home-products-block__prev,
body#index .zzz-home-products-block__next,
body#product .product__accessories .marius-accessories-prev,
body#product .product__accessories .marius-accessories-next,
body#ybc_blog_page .marius-blog-related-products .marius-accessories-prev,
body#ybc_blog_page .marius-blog-related-products .marius-accessories-next {
    width: var(--marius-slider-arrow-size);
    height: var(--marius-slider-arrow-size);
    color: var(--marius-slider-arrow-color);
    background: var(--marius-slider-arrow-background);
    border: 1px solid var(--marius-slider-arrow-border);
    border-radius: 50%;
    box-shadow: var(--marius-slider-arrow-shadow);
}

body#index .zzz-home-products-block__prev,
body#product .product__accessories .marius-accessories-prev,
body#ybc_blog_page .marius-blog-related-products .marius-accessories-prev {
    left: var(--marius-slider-arrow-offset);
}

body#index .zzz-home-products-block__next,
body#product .product__accessories .marius-accessories-next,
body#ybc_blog_page .marius-blog-related-products .marius-accessories-next {
    right: var(--marius-slider-arrow-offset);
}

body#index .zzz-home-products-block__prev:not(:disabled):hover,
body#index .zzz-home-products-block__next:not(:disabled):hover,
body#product .product__accessories .marius-accessories-prev:not(:disabled):hover,
body#product .product__accessories .marius-accessories-next:not(:disabled):hover,
body#ybc_blog_page .marius-blog-related-products .marius-accessories-prev:not(:disabled):hover,
body#ybc_blog_page .marius-blog-related-products .marius-accessories-next:not(:disabled):hover {
    background: var(--marius-slider-arrow-hover);
}


/* ##########################################################
   GROUPE 05 — RESPONSIVE : ESPACEMENT MOBILE
   ########################################################## */

@media (max-width: 767.98px) {
    body#index .zzz-home-products-block__grid,
    body#product .product__accessories .marius-accessories-slider > .products,
    body#product .ps-viewedproduct .module-products__list > .products,
    body#ybc_blog_page .marius-blog-related-products .marius-accessories-slider > .blog-product-list {
        gap: var(--marius-slider-gap-mobile) !important;
    }
}






















/* ##################################################################
   05 - PRODUITS ASSOCIES : CARROUSEL ET FICHES PRODUITS
   ################################################################## */

/* ==========================================================
   MARIUS - YBC BLOG - PRODUITS ASSOCIÉS
   STYLE HARMONISÉ AVEC LES CARTES PRODUITS
   ========================================================== */


/* ==========================================================
   SECTION ET ONGLET VERT
   ========================================================== */

body#ybc_blog_page #ybc-blog-related-products {
    position: relative;
    margin: 2em 0 2rem;
}

body#ybc_blog_page #ybc-blog-related-products::before {
    content: none !important;
}

body#ybc_blog_page #ybc-blog-related-products
.marius-blog-related-products__title {
    position: relative;
    z-index: 1;

    display: table;
    width: auto;
    margin: 0;
    padding: 8px 18px;

    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: .15px;
    text-transform: uppercase;

    color: #fff;
    background: linear-gradient(
        to bottom,
        #6fb828,
        #5f8e2f
    );

    border: 1px solid #5f862f;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, .27);
}

body#ybc_blog_page #ybc-blog-related-products
.marius-blog-related-products__title::after {
    content: none !important;
}


/* ==========================================================
   CADRE DU CARROUSEL
   ========================================================== */

body#ybc_blog_page #ybc-blog-related-products
.marius-accessories-slider {
    position: relative;
    width: 100%;
    margin: 0;

    background: #fff;
    border: 1px solid #ebebeb;
    border-top-color: #5f8e2f;
    border-radius: 0 0 5px 5px;

    overflow: hidden;
}


/* ==========================================================
   PISTE DES PRODUITS
   ========================================================== */

body#ybc_blog_page #ybc-blog-related-products
.marius-accessories-slider > .products {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;

    gap: 16px !important;

    box-sizing: border-box;
    width: 100%;
    margin: 0 !important;
    padding: 12px 12px 22px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

body#ybc_blog_page #ybc-blog-related-products
.marius-accessories-slider > .products::-webkit-scrollbar {
    display: none;
}


/* ==========================================================
   CARTES - 4 PRODUITS SUR ORDINATEUR
   ========================================================== */

body#ybc_blog_page #ybc-blog-related-products
.marius-accessories-slider > .products > .product-miniature {
    box-sizing: border-box;

    flex: 0 0 calc((100% - 48px) / 4) !important;
    min-width: 0 !important;
    max-width: none !important;

    align-self: stretch;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;
    border: 1px solid #e6e9ed !important;
    border-radius: 6px !important; /* ### marius 6px FF important ca sa am unghiurile frumoase cand folosesc bordura in jurul imaginii */

    box-shadow: none !important;
    filter: none !important;
    transform: none !important;

    scroll-snap-align: start;

    transition: border-color .2s ease !important;
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    body#ybc_blog_page #ybc-blog-related-products
    .marius-accessories-slider > .products > .product-miniature:hover {
        border-color: #cfd5dc !important;
        box-shadow: none !important;
        transform: none !important;
    }
}


/* ==========================================================
   STRUCTURE INTERNE DES CARTES
   ========================================================== */

body#ybc_blog_page #ybc-blog-related-products .product-container {
    display: flex !important;
    flex-direction: column !important;

    box-sizing: border-box;
    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;
    border: 0 !important;
    border-radius: 5px !important;
    box-shadow: none !important;

    overflow: hidden;
}


/* ==========================================================
   IMAGE - GRANDE, SANS SÉPARATION NI ZOOM
   ========================================================== */

body#ybc_blog_page #ybc-blog-related-products .left-block {
    position: relative;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
}

body#ybc_blog_page #ybc-blog-related-products .left-block::after,
body#ybc_blog_page #ybc-blog-related-products .left-block::before {
    content: none !important;
}

body#ybc_blog_page #ybc-blog-related-products .ybc_item_img {
    display: block;
    width: 100%;
    text-decoration: none !important;
    border: 0 !important;
}

body#ybc_blog_page #ybc-blog-related-products .ybc_item_img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;

    transform: none !important;
    transition: none !important;
}

body#ybc_blog_page #ybc-blog-related-products .left-block img:hover {
    transform: none !important;
}


/* ==========================================================
   INFORMATIONS PRODUIT
   ========================================================== */

body#ybc_blog_page #ybc-blog-related-products .right-block {
    display: flex !important;
    flex-direction: column !important;

    flex: 1 1 auto;
    width: 100%;

    margin: 0 !important;
    padding: 12px 14px 14px !important;

    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
}


/* ==========================================================
   TITRES BLEUS - STYLE MARIUS
   ========================================================== */

body#ybc_blog_page #ybc-blog-related-products .right-block h5 {
    margin: 0 0 8px !important;
    padding: 0 !important;

    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;

    text-align: left !important;
    text-transform: none !important;
}

body#ybc_blog_page #ybc-blog-related-products .right-block h5 a {
    color: #365cff !important;
    font: inherit !important;
    text-transform: none !important;
    text-decoration: none !important;
}

body#ybc_blog_page #ybc-blog-related-products .right-block h5 a:hover {
    color: #2445d8 !important;
    text-decoration: none !important;
}


/* ==========================================================
   PRIX - STYLE MARIUS
   ========================================================== */

body#ybc_blog_page #ybc-blog-related-products .content_price {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;

    gap: 3px 7px;

    margin: 0 0 5px !important;
    padding: 0 !important;

    text-align: left !important;
    background: transparent !important;
}

body#ybc_blog_page #ybc-blog-related-products .content_price .bp-price-label,
body#ybc_blog_page #ybc-blog-related-products .content_price .bp-price-old-label,
body#ybc_blog_page #ybc-blog-related-products .content_price .bp-percent-label,
body#ybc_blog_page #ybc-blog-related-products .content_price .bp-save {
    display: none !important;
}

body#ybc_blog_page #ybc-blog-related-products .content_price .bp-price {
    order: 1;

    margin: 0 !important;
    color: #c72d2d !important;
    background: transparent !important;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

body#ybc_blog_page #ybc-blog-related-products .content_price .bp-price-display {
    color: inherit !important;
    font-weight: inherit !important;
}

body#ybc_blog_page #ybc-blog-related-products .content_price .bp-price::after {
    content: " TTC";
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
}

body#ybc_blog_page #ybc-blog-related-products .content_price .bp-price-old {
    order: 2;

    margin: 0 !important;
    color: #858585 !important;
    background: transparent !important;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
}

body#ybc_blog_page #ybc-blog-related-products .content_price .bp-price-old-display {
    color: inherit !important;
    text-decoration: line-through;
}

body#ybc_blog_page #ybc-blog-related-products .content_price .bp-percent {
    order: 3;

    margin: 0 !important;
    padding: 0 !important;

    color: #365cff !important;
    background: transparent !important;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
}

body#ybc_blog_page #ybc-blog-related-products .content_price .bp-percent::before {
    content: "(Économisez ";
}

body#ybc_blog_page #ybc-blog-related-products .content_price .bp-percent::after {
    content: ")";
}


/* ==========================================================
   AVIS ET ÉTOILES
   ========================================================== */

body#ybc_blog_page #ybc-blog-related-products .right-block .star_content,
body#ybc_blog_page #ybc-blog-related-products .right-block .star {
    flex-shrink: 0;
}

body#ybc_blog_page #ybc-blog-related-products .right-block
a {
    text-decoration: none;
}


/* ==========================================================
   DESCRIPTION - MASQUÉE COMME LES CARTES MARIUS
   ========================================================== */

body#ybc_blog_page #ybc-blog-related-products .blog-product-desc {
    display: none !important;
}


/* ==========================================================
   FLÈCHES CIRCULAIRES
   ========================================================== */

body#ybc_blog_page #ybc-blog-related-products .marius-accessories-prev,
body#ybc_blog_page #ybc-blog-related-products .marius-accessories-next {
    position: absolute;
    top: 50%;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    padding: 0;

    color: #212529;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;

    font-size: 28px;
    line-height: 1;
    cursor: pointer;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);

    transform: translateY(-50%);
}

body#ybc_blog_page #ybc-blog-related-products .marius-accessories-prev {
    left: 12px;
}

body#ybc_blog_page #ybc-blog-related-products .marius-accessories-next {
    right: 12px;
}

body#ybc_blog_page #ybc-blog-related-products .marius-accessories-prev:hover,
body#ybc_blog_page #ybc-blog-related-products .marius-accessories-next:hover {
    background: #f5f5f5;
}


/* ==========================================================
   TABLETTE - 3 PRODUITS
   ========================================================== */

@media (max-width: 1199px) {
    body#ybc_blog_page #ybc-blog-related-products
    .marius-accessories-slider > .products > .product-miniature {
        flex-basis: calc((100% - 56px) / 3) !important;
    }
}


/* ==========================================================
   PETITE TABLETTE - 2 PRODUITS
   ========================================================== */

@media (max-width: 767px) {
    body#ybc_blog_page #ybc-blog-related-products
    .marius-accessories-slider > .products > .product-miniature {
        flex-basis: calc((100% - 40px) / 2) !important;
    }
}


/* ==========================================================
   MOBILE - 85 % AVEC APERÇU DU PRODUIT SUIVANT
   ========================================================== */

@media (max-width: 575px) {
    body#ybc_blog_page #ybc-blog-related-products
    .marius-accessories-slider > .products > .product-miniature {
        flex-basis: 85% !important;
    }

    body#ybc_blog_page #ybc-blog-related-products .marius-accessories-prev,
    body#ybc_blog_page #ybc-blog-related-products .marius-accessories-next {
        display: none !important;
    }

    body#ybc_blog_page #ybc-blog-related-products .right-block {
        padding: 12px !important;
    }
}


/* ==========================================================
   YBC BLOG - PRODUITS ASSOCIÉS
   PRIX ET ÉTOILES ALIGNÉS EN BAS
   ========================================================== */

body#ybc_blog_page #ybc-blog-related-products .right-block {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
}

/* Pousse les prix vers le bas */
body#ybc_blog_page #ybc-blog-related-products .right-block .content_price {
    margin-top: auto !important;
}

/* Garde les avis juste sous les prix */
body#ybc_blog_page #ybc-blog-related-products .right-block .content_price + * {
    margin-top: 4px !important;
}


/* ==========================================================
   MARIUS - BLOG - PRIX STYLE VOUS AIMEREZ AUSSI
   PRIORITÉ SUR YBC BLOG detail_post.css
   ========================================================== */

/* CONTENEUR PRIX */

body#ybc_blog_page #ybc-blog-related-products
.right-block .blog-product-extra.content_price {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height: auto !important;

    column-gap: 5px !important;
    row-gap: 2px !important;

    margin-top: auto !important;
    margin-right: 0 !important;
    margin-bottom: 4px !important;
    margin-left: 0 !important;

    padding: 0 !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* PRIX ACTUEL - PREMIÈRE LIGNE */

body#ybc_blog_page #ybc-blog-related-products
.right-block .content_price .bp-price {
    display: block !important;
    position: static !important;

    order: 1 !important;
    flex: 0 0 100% !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #c72d2d !important;
    background: transparent !important;

    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

body#ybc_blog_page #ybc-blog-related-products
.right-block .content_price .bp-price-display {
    color: #c72d2d !important;
    background: transparent !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

body#ybc_blog_page #ybc-blog-related-products
.right-block .content_price .bp-price-label {
    display: none !important;
}

/* TTC VISUEL */

body#ybc_blog_page #ybc-blog-related-products
.right-block .content_price .bp-price::after {
    content: " TTC" !important;
    display: inline !important;

    color: #c72d2d !important;
    font-size: 12px !important;
    font-style: italic !important;
    font-weight: 600 !important;
}

/* ANCIEN PRIX - DEUXIÈME LIGNE */

body#ybc_blog_page #ybc-blog-related-products
.right-block .content_price .bp-price-old {
    display: inline-flex !important;
    position: static !important;

    order: 2 !important;
    flex: 0 0 auto !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #858585 !important;
    background: transparent !important;

    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
}

body#ybc_blog_page #ybc-blog-related-products
.right-block .content_price .bp-price-old-label {
    display: inline !important;

    margin-right: 4px !important;

    color: #666 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

body#ybc_blog_page #ybc-blog-related-products
.right-block .content_price .bp-price-old-display {
    display: inline !important;

    color: #858585 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}

/* REMISE - APRÈS L'ANCIEN PRIX */

body#ybc_blog_page #ybc-blog-related-products
.right-block .content_price .bp-percent {
    display: inline-flex !important;
    position: static !important;

    order: 3 !important;
    flex: 0 0 auto !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #365cff !important;
    background: transparent !important;
    border: 0 !important;

    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

body#ybc_blog_page #ybc-blog-related-products
.right-block .content_price .bp-percent-label {
    display: none !important;
}

body#ybc_blog_page #ybc-blog-related-products
.right-block .content_price .bp-percent-display {
    display: inline !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #365cff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: inherit !important;
}

/* TEXTE ÉCONOMISEZ */

body#ybc_blog_page #ybc-blog-related-products
.right-block .content_price .bp-percent::before {
    content: "(Économisez " !important;
    display: inline !important;
}

body#ybc_blog_page #ybc-blog-related-products
.right-block .content_price .bp-percent::after {
    content: ")" !important;
    display: inline !important;
}

/* MASQUER LE MONTANT ÉCONOMISÉ SUPPLÉMENTAIRE */

body#ybc_blog_page #ybc-blog-related-products
.right-block .content_price .bp-save {
    display: none !important;
}

body#ybc_blog_page #ybc-blog-related-products .blog-product-list .right-block .content_price .bp-price-display {
    padding: 0 !important;
}


/* ==========================================================
   MARIUS - BLOG - PRODUITS ASSOCIÉS
   HOVER RELIEF
   ========================================================== */

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {

    body#ybc_blog_page #ybc-blog-related-products
    .marius-accessories-slider > .products > .product-miniature {
        position: relative !important;
        transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease !important;
    }

    body#ybc_blog_page #ybc-blog-related-products
    .marius-accessories-slider > .products > .product-miniature:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 10px 22px -4px rgba(0, 0, 0, .18) !important;
        border-color: #cfd5dc !important;
        z-index: 2 !important;
    }
}