/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */


#top-line {
		color:#fff !important;
		background-color: #1d1d1d;
}

header.hidden-sm-down > div:nth-child(4) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2)::after {
		content: " ";
  		position: absolute;
 		width: 100px;
  		background: url("/img/cms/home/afnor_cert_black_80.png");
  		background-repeat: no-repeat;
		top: 15px;
    	bottom: 15px;
    	right: 15px;
    	background-size: contain;
		background-position-x:right;
}


@media (min-width: 768px) {
  	header.hidden-sm-down > div:nth-child(4) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
    	float: left;
    	width: 22%;
  	}
	
}


@media (max-width: 768px) {
	#StickySlider {
		position:relative;

	}
	
	.c-slide-container::after {
		content: " ";
  		position: absolute;
		height: 90px;
 		width: 90px;
  		background: url(/img/cms/home/afnor_cert_white_80.png);
  		background-repeat: no-repeat;
  		top:15px;
  		right:30px;
  		background-size: contain;
	}
}

.sbock-toggle { display: flex; gap: 8px; margin-top: 6px; }
@media (max-width: 543px) { .sbock-toggle { flex-direction: column; } }
.sbock-opt {
	flex: 1; display: flex; align-items: center; gap: 12px;
	padding: 12px 14px; border: 2px solid #d4d4d4; border-radius: 8px;
	text-decoration: none !important; color: #555; background: #fafafa;
	transition: border-color .15s, background .15s, color .15s;
}
.sbock-opt:hover { border-color: #444; color: #333; }
.sbock-opt.is-active { border-color: #1a1a1a; background: #1a1a1a; color: #fff; }
.sbock-grid {
	display: grid; grid-template-columns: repeat(3, 14px);
	grid-template-rows: repeat(2, 14px); gap: 2px; flex-shrink: 0;
}
.sbock-cell {
	display: flex; align-items: center; justify-content: center;
	font-size: 7px; font-weight: 800; border-radius: 2px;
	background: rgba(0,0,0,.1); line-height: 1;
}
.sbock-opt.is-active .sbock-cell { background: rgba(255,255,255,.2); }
.sbock-label { display: block; font-size: 12px; font-weight: 700; line-height: 1.3; }
.product-lot-label::after { content: '·'; margin: 0 5px; opacity: .4; font-weight: 400; }
.sbock-diff { font-weight: 400; opacity: .7; }
.sbock-sub { display: block; font-size: 10px; opacity: .65; margin-top: 2px; line-height: 1.2; }

/* #product-redirection : ce qui suit ne s'applique JAMAIS au design d'origine à 2 blocs.

   - pos-1/pos-2 (1re ligne, 2 colonnes) : alternance droite/gauche, design d'origine sinon inchangé.
   - "3e item" (pos-3 = Luxe quand les 3 tire-bouchons sont visibles, ET/OU .product-redirection-item-square
     = sous-verres) : toujours seul sur sa ligne, centré à 50%. Mêmes règles pour les deux, SEULE la largeur
     de l'image diffère (format carré du sous-verre vs format étroit/haut des autres visuels) :
       - desktop : image, trait horizontal, texte (bouton Découvrir aligné à droite, sous le texte)
       - mobile  : trait horizontal, texte, image (ordre inversé) */

@media (min-width: 768px) {
	#product-redirection .product-redirection-list {
		margin-top: -30px !important;
	}
}

#product-redirection .product-redirection-list.has-three-items .pos-1 {
	flex-direction: row-reverse;
}
#product-redirection .product-redirection-list.has-three-items .pos-1 .product-redirection-item-content {
	align-items: flex-start;
}
#product-redirection .product-redirection-list.has-three-items .pos-2 {
	flex-direction: row;
}
#product-redirection .product-redirection-list.has-three-items .pos-2 .product-redirection-item-content {
	align-items: flex-end;
}

/* "3e item" : mobile = trait, texte, image (image après le contenu) */
#product-redirection .product-redirection-list.has-three-items .pos-3,
#product-redirection .product-redirection-item-square {
	flex-direction: row-reverse;
}
/* Image carrée du sous-verre : centrée verticalement (sa hauteur ne remplit pas la ligne comme les autres) */
#product-redirection .product-redirection-item-square {
	align-items: center;
	margin-top: 75px;
}
#product-redirection .product-redirection-list.has-three-items .pos-3 .product-redirection-item-content,
#product-redirection .product-redirection-item-square .product-redirection-item-content {
	align-items: flex-start;
}

/* Seul sur sa ligne, donc plus jamais de trait vertical (pensé pour un voisin) ;
   le trait horizontal doit lui rester AVANT le texte comme le style "non-.right" d'origine */
#product-redirection .product-redirection-list.has-three-items .pos-3 .product-redirection-item-content h3.right {
	text-align: left;
	padding-right: 0;
	padding-left: 70px;
}
#product-redirection .product-redirection-list.has-three-items .pos-3 .product-redirection-item-content h3.right:before {
	left: 0;
	right: auto;
}
#product-redirection .product-redirection-list.has-three-items .pos-3 .product-redirection-item-content h3.right:after {
	display: none;
}
@media (max-width: 768px) {
	.product-redirection-item-square > div:first-child {
		width: 85% !important;
	}
}
@media (min-width: 768px) {
	/* "3e item" : desktop = image, trait, texte (image avant le contenu), centré à 50% de la grille */
	#product-redirection .product-redirection-list.has-three-items .pos-3,
	#product-redirection .product-redirection-list .product-redirection-item-square {
		grid-column: 1 / -1;
		margin: 50px auto 0;
		flex-direction: row;
	}
	#product-redirection .product-redirection-list.has-three-items .pos-3 .product-redirection-item-content,
	#product-redirection .product-redirection-item-square .product-redirection-item-content {
		align-items: flex-end;
	}
	/* Son image doit retrouver la même largeur réelle en pixels que pos-1/pos-2 : 32% de sa propre boîte
	   (déjà 2x plus large qu'une colonne) serait 2x trop grand */
	#product-redirection .product-redirection-list.has-three-items .pos-3 > div:first-child {
		width: 29%;
	}
}
@media (min-width: 992px) {
	#product-redirection .product-redirection-list.has-three-items .pos-3 .product-redirection-item-content h3.right {
		padding-left: 130px;
	}
	#product-redirection .product-redirection-list.has-three-items .pos-3 > div:first-child {
		width: 26%;
	}
}
.thumbnail-container .no-translation {
	-webkit-transform: translate(0%) !important;
	transform: translate(0%) !important;
}