/* Cosmod Lightweight Products — grille + filtres + cœur wishlist */

.cosmod-lp-title-wrap {
	text-align: center;
	margin: 0 0 32px;
}

#cosmod-lp-wrap a.cosmod-lp-title,
#cosmod-lp-wrap span.cosmod-lp-title,
.cosmod-lp-products a.cosmod-lp-title,
.cosmod-lp-products span.cosmod-lp-title {
	font-family: Georgia, "Times New Roman", serif !important;
	font-size: 26px !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #222 !important;
	text-decoration: none !important;
	border-bottom: none !important;
	display: inline-block !important;
}

#cosmod-lp-wrap a.cosmod-lp-title:hover,
#cosmod-lp-wrap a.cosmod-lp-title:visited,
#cosmod-lp-wrap a.cosmod-lp-title:focus {
	color: #222 !important;
	text-decoration: none !important;
}

.cosmod-lp-title-line {
	width: 350px;
	max-width: 60%;
	height: 1px;
	background: #ccc;
	margin: 16px auto 0;
}

/*
 * Category/shop listing pages ([cosmod_shop], id="cosmod-lp-wrap"): the
 * section heading ("VISAGE", "MAQUILLAGE"…) sits left-aligned and a bit
 * smaller than the default 26px, instead of the centered hero-style title.
 * Scoped to #cosmod-lp-wrap only, so the homepage rails and the "Produits
 * similaires" carousel keep their own (centered) title style.
 */
#cosmod-lp-wrap .cosmod-lp-title-wrap {
	text-align: left;
	/* Shrink to the title's own width, so the underline below (width:100%)
	   matches the text exactly instead of a fixed 350px line. */
	display: inline-block;
}
#cosmod-lp-wrap a.cosmod-lp-title,
#cosmod-lp-wrap span.cosmod-lp-title {
	font-size: 19px !important;
}
#cosmod-lp-wrap .cosmod-lp-title-line {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: auto;
}

.cosmod-lp-layout {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
	min-width: 0;
}

.cosmod-lp-sidebar {
	flex: 0 0 260px;
	padding: 22px 18px 24px;
	background: #fff;
	border: 1px solid rgba(17, 17, 17, 0.08);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(17, 17, 17, 0.04);
}

.cosmod-lp-main {
	flex: 1;
	min-width: 0;
	max-width: 100%;
	overflow-x: clip;
}

@media (max-width: 782px) {
	.cosmod-lp-layout {
		flex-direction: column;
		/* Desktop's 40px side-gap (sidebar ↔ grid) becomes a big empty
		   strip once the layout stacks into a column on mobile, pushing
		   the category title far below the filter bar. Remove it here so
		   the title sits right under the filters. */
		gap: 0;
	}
	.cosmod-lp-sidebar {
		flex: 0 0 auto;
		width: 100%;
		padding: 14px 12px 8px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}
	/* Boutique / category pages: the filter+sort bar was inset 12px on
	   each side, so its left edge didn't line up with the category title
	   below it (or the product grid). Flush with both, left and right. */
	.cosmod-lp-sidebar--topbar {
		padding-left: 0;
		padding-right: 0;
	}
}

.cosmod-lp-grid {
	display: grid;
	grid-template-columns: repeat(var(--cosmod-lp-cols, 4), 1fr);
	gap: 24px;
	margin: 0 0 32px;
	position: relative;
	min-height: 80px;
	transition: opacity 0.2s;
}

/* Client request : 5 produits par rangée sur desktop PARTOUT où la grille
 * [cosmod_products] est utilisée (boutique, catégories, marques…), comme
 * sur la rangée de la page d'accueil qui lui sert de référence — au lieu
 * du nombre de colonnes habituellement fixé par page via l'attribut
 * "columns" du shortcode (--cosmod-lp-cols, souvent 3 ou 4 selon la
 * page). Cette règle vient APRÈS la règle de base ci-dessus et fixe la
 * valeur directement (sans var()), donc elle l'emporte sur la variable
 * inline --cosmod-lp-cols quelle que soit sa valeur, uniquement à partir
 * de 1025px (au-delà des paliers tablette/mobile ci-dessous, qui restent
 * inchangés à 3 puis 2 colonnes). */
@media (min-width: 1025px) {
	.cosmod-lp-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

.cosmod-lp-grid.cosmod-lp-loading {
	opacity: 0.4;
	pointer-events: none;
}

@media (max-width: 1024px) {
	.cosmod-lp-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.cosmod-lp-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

/* Accueil rail — infinite loop (clone + transform), ~4 full cards visible */
.cosmod-lp-rail {
	position: relative;
	margin: 0 0 8px;
	padding: 0 52px;
}

.cosmod-lp-rail__scroller {
	overflow: hidden;
	scroll-snap-type: none;
	scroll-behavior: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 0 12px;
}

.cosmod-lp-rail__scroller.is-animating {
	pointer-events: none;
}

.cosmod-lp-rail__scroller::-webkit-scrollbar {
	display: none;
}

.cosmod-lp-rail__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	gap: 0;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}

.cosmod-lp-grid--rail {
	display: flex;
	flex-wrap: nowrap;
	grid-template-columns: none;
	gap: 20px;
	margin: 0;
	min-height: 0;
	width: max-content;
}

.cosmod-lp-grid--rail .cosmod-lp-card {
	flex: 0 0 auto;
	min-width: 0;
	scroll-snap-align: none;
	/* Width set by JS so an integer count fills the scroller */
}

.cosmod-lp-rail__btn {
	position: absolute;
	top: 96px;
	z-index: 6;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid #d4d2cd;
	background: #fff;
	color: #111;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
	padding: 0;
	box-shadow: 0 2px 10px rgba(17, 17, 17, 0.06);
}

.cosmod-lp-rail__btn--prev {
	left: 0;
}

.cosmod-lp-rail__btn--next {
	right: 0;
}

.cosmod-lp-rail__btn:hover:not(:disabled) {
	background: #f3f2ef;
	border-color: #111;
	transform: scale(1.04);
}

.cosmod-lp-rail__btn:disabled {
	opacity: 0.28;
	cursor: default;
}

.cosmod-lp-rail--loop .cosmod-lp-rail__btn:disabled {
	opacity: 1;
	cursor: pointer;
}

/* Related products rail under category shop */
.cosmod-lp-related {
	width: 100%;
	max-width: 1400px;
	margin: 40px auto 8px;
	padding: 8px 0 0;
	box-sizing: border-box;
}

.cosmod-lp-related .cosmod-lp-title-wrap {
	margin-bottom: 18px;
}

.cosmod-lp-related .cosmod-lp-rail {
	margin-bottom: 0;
}

.cosmod-lp-products--rail .cosmod-lp-viewall-wrap {
	margin-top: 12px;
}

@media (max-width: 1024px) {
	.cosmod-lp-rail__btn {
		top: 88px;
	}
}

@media (max-width: 640px) {
	.cosmod-lp-rail {
		padding: 0;
	}

	.cosmod-lp-rail__btn {
		display: flex !important;
		align-items: center;
		justify-content: center;
		top: 40%;
		transform: translateY(-50%);
		width: 28px;
		height: 28px;
		border: none;
		background: transparent;
		box-shadow: none;
		color: #111;
		font-size: 1.6rem;
		text-shadow: 0 1px 3px rgba(255, 255, 255, 0.6);
	}

	.cosmod-lp-rail__btn:hover:not(:disabled) {
		background: transparent;
		transform: translateY(-50%) scale(1.08);
	}

	.cosmod-lp-rail__btn:disabled {
		opacity: 0.35;
	}

	.cosmod-lp-rail__scroller {
		overflow: hidden;
		/* pan-y (not none): lets the browser handle vertical page scrolling
		 * natively over this carousel, while horizontal drag still goes to
		 * the JS pointer handlers below. touch-action:none blocked BOTH
		 * directions, so swiping up/down on a product card here did nothing
		 * — the page wouldn't scroll at all. */
		touch-action: pan-y;
		cursor: grab;
		user-select: none;
		-webkit-user-select: none;
	}

	.cosmod-lp-rail__scroller.is-dragging {
		cursor: grabbing;
	}

	.cosmod-lp-rail.is-peek .cosmod-lp-grid--rail .cosmod-lp-card {
		min-width: 0 !important;
		max-width: none !important;
	}
}

#cosmod-lp-wrap .cosmod-lp-card,
.cosmod-lp-card {
	display: flex;
	flex-direction: column;
	text-align: center;
	position: relative;
	margin: 0;
	/* .cosmod-lp-card is itself a CSS Grid item inside .cosmod-lp-grid
	 * (display:grid). A grid item's default min-width is "auto", meaning
	 * it refuses to shrink below the width of its own content — so once
	 * .cosmod-lp-name got white-space:nowrap, the long single-line text
	 * forced the WHOLE CARD wider than its grid column, spilling over
	 * into the next column instead of being clipped. min-width:0 lets
	 * the card shrink to the column's real width so the name's own
	 * overflow:hidden/ellipsis (see .cosmod-lp-name below) can actually
	 * kick in. */
	min-width: 0;
}

.cosmod-lp-img-wrap {
	position: relative;
	width: 100%;
	max-width: 220px;
	margin: 0 auto 12px;
	aspect-ratio: 1 / 1;
	overflow: visible;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	/* .cosmod-lp-img-wrap is itself a flex item of .cosmod-lp-card
	 * (flex-direction:column), and a flex item's default min-height is
	 * "auto" — its content's own min size. For a PORTRAIT product photo
	 * (taller than wide), that content-based minimum can be taller than
	 * this box's own aspect-ratio:1/1 would allow, so the square box grew
	 * to fit that one photo instead of staying square — the card with
	 * that photo ended up visibly taller than the others in the same row.
	 * min-height:0 removes that automatic minimum, so aspect-ratio always
	 * wins and every card's image box (and so every card) is the same
	 * height regardless of a photo's own proportions. */
	min-height: 0;
}

.cosmod-lp-img-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none !important;
	border-bottom: none !important;
}

.cosmod-lp-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

#cosmod-lp-wrap a.cosmod-lp-name,
#cosmod-lp-wrap a.cosmod-lp-price {
	text-decoration: none !important;
	border-bottom: none !important;
	color: inherit !important;
}

/* Promo / Cadeaux badge on product image */
.cosmod-lp-badge {
	position: absolute;
	left: 8px;
	bottom: 8px;
	z-index: 4;
	display: inline-block;
	padding: 4px 8px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	color: #fff;
	background: #c45b8a;
	pointer-events: none;
}

.cosmod-lp-badge--promo {
	background: #d94f8c;
}

.cosmod-lp-badge--cadeaux {
	background: #a13a6f;
}

/* Wishlist bar — CTA + heart, top-right of image */
.cosmod-lp-wish-bar {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	max-width: calc(100% - 16px);
	pointer-events: none;
}

.cosmod-lp-wish-bar > * {
	pointer-events: auto;
}

a.cosmod-lp-wish-cta,
.cosmod-lp-wish-cta {
	display: none;
	align-items: center;
	justify-content: center;
	max-width: min(200px, 68vw);
	min-height: 36px;
	padding: 8px 16px;
	border: 0 !important;
	border-radius: 999px;
	background: #000 !important;
	background-color: #000 !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
	animation: cosmod-lp-cta-in 0.22s ease;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.cosmod-lp-wish-cta[hidden] {
	display: none !important;
}

.cosmod-lp-wish-bar.is-cta-open a.cosmod-lp-wish-cta,
.cosmod-lp-wish-bar.is-cta-open .cosmod-lp-wish-cta,
a.cosmod-lp-wish-cta.is-visible,
.cosmod-lp-wish-cta.is-visible {
	display: inline-flex;
	background: #000 !important;
	background-color: #000 !important;
	color: #fff !important;
}

a.cosmod-lp-wish-cta:hover,
a.cosmod-lp-wish-cta:focus,
a.cosmod-lp-wish-cta:visited,
.cosmod-lp-wish-cta:hover,
.cosmod-lp-wish-cta:focus,
.cosmod-lp-wish-cta:visited {
	background: #111 !important;
	background-color: #111 !important;
	color: #fff !important;
	opacity: 0.92;
	text-decoration: none !important;
}

@keyframes cosmod-lp-cta-in {
	from {
		opacity: 0;
		transform: translateX(6px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.cosmod-lp-wish-slot {
	line-height: 0;
	position: relative;
}

.cosmod-lp-wish-slot .cosmod-lp-wish {
	position: static;
	top: auto;
	right: auto;
}

.cosmod-lp-wish {
	position: relative;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	color: #111;
	transition: transform 0.15s, background 0.15s, color 0.15s;
	text-decoration: none !important;
}

.cosmod-lp-wish:hover {
	transform: scale(1.06);
	background: transparent;
	color: #000;
}

.cosmod-lp-wish.is-active,
.cosmod-lp-wish[aria-pressed="true"] {
	color: #000 !important;
}

.cosmod-lp-wish svg {
	width: 18px;
	height: 18px;
	display: block;
	pointer-events: none;
}

.cosmod-lp-wish.is-active svg path,
.cosmod-lp-wish[aria-pressed="true"] svg path {
	fill: #000 !important;
	stroke: #000 !important;
}

/* YITH / TI wishlist wrappers inside bar */
.cosmod-lp-wish-bar .yith-wcwl-add-to-wishlist,
.cosmod-lp-wish-bar .tinv-wraper {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	margin: 0 !important;
}

#cosmod-lp-wrap .cosmod-lp-name,
.cosmod-lp-products .cosmod-lp-name,
.cosmod-lp-card .cosmod-lp-name {
	display: block;
	font-size: 14px;
	line-height: 1.4;
	color: #111 !important;
	margin-bottom: 6px;
	text-decoration: none !important;
	border-bottom: none !important;
	/* Nom du produit : la cliente a testé la troncature en UNE seule ligne
	 * (avec "…") et l'a trouvée trop agressive — elle veut voir le texte
	 * complet quand il tient, tout en gardant des cartes de même hauteur
	 * dans une rangée ("показать весь текст, но чтобы держать в данном
	 * кубике" = montrer tout le texte, mais le garder dans la même
	 * "case"). Solution : autoriser jusqu'à 2 lignes (au lieu d'une
	 * seule), et réserver TOUJOURS la hauteur de 2 lignes via min-height
	 * — même un nom qui tient sur 1 ligne laisse donc le même espace
	 * qu'un nom sur 2 lignes, ce qui aligne les cartes d'une rangée.
	 * Un nom encore plus long qu'2 lignes est coupé avec "…" à la fin de
	 * la 2e ligne (-webkit-line-clamp: 2).
	 * Le sélecteur ".cosmod-lp-card .cosmod-lp-name" est ajouté en plus
	 * des deux autres : .cosmod-lp-card est le SEUL parent garanti par
	 * render.php pour CE lien, quel que soit le shortcode qui affiche la
	 * grille (boutique, catégorie, marque, "Encore plus à découvrir",
	 * "Produits similaires", etc.) — certaines de ces sections n'ont ni
	 * #cosmod-lp-wrap ni .cosmod-lp-products autour d'elles, donc la
	 * règle ne s'appliquait pas partout avant cet ajout.
	 * min-width:0 est indispensable ici : .cosmod-lp-name est un enfant
	 * flex de .cosmod-lp-card (display:flex), et par défaut un enfant
	 * flex refuse de rétrécir sous la largeur de son contenu — sans ça,
	 * un mot très long pouvait forcer le lien (et la carte) à déborder. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	min-width: 0;
	min-height: 2.8em; /* 2 × line-height (1.4em) : hauteur réservée même pour un nom court sur 1 seule ligne */
}

#cosmod-lp-wrap .cosmod-lp-price,
.cosmod-lp-products .cosmod-lp-price {
	font-size: 15px;
	font-weight: 600;
	color: #111 !important;
	text-decoration: none !important;
	border-bottom: none !important;
}

#cosmod-lp-wrap .cosmod-lp-price del {
	opacity: 0.5;
	font-weight: 400;
	margin-right: 6px;
}

.cosmod-lp-viewall-wrap {
	text-align: center;
	margin: 28px 0 8px;
}

a.cosmod-lp-viewall,
.cosmod-lp-viewall {
	display: inline-block;
	background: #111;
	color: #fff;
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 42px;
	border-radius: 999px;
	border: 1.5px solid #111;
	transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

a.cosmod-lp-viewall:hover,
.cosmod-lp-viewall:hover {
	background: #fff;
	color: #111;
	transform: translateY(-1px);
}

.cosmod-lp-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 40px 0;
	color: #888;
	font-size: 14px;
}

.cosmod-lp-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 32px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 14px;
}

.cosmod-lp-pagination a {
	color: #333;
	text-decoration: none !important;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.2s, color 0.2s;
}

.cosmod-lp-pagination a:hover {
	background: #f0f0f0;
}

.cosmod-lp-pagination a.cosmod-lp-page-active {
	background: #111 !important;
	color: #fff !important;
}

.cosmod-lp-pagination a.cosmod-lp-page-next {
	width: auto;
	padding: 0 14px;
	border-radius: 16px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 12px;
}

.cosmod-lp-page-dots {
	color: #999;
	padding: 0 2px;
}

/* Filtres — Cosmod refined */
.cosmod-lf-block {
	margin-bottom: 26px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.cosmod-lf-block:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}

.cosmod-lf-title {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-size: 15px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #111;
	margin: 0 0 14px;
	font-weight: 700;
}

.cosmod-lf-list {
	list-style: none;
	margin: 0;
	padding: 0 4px 0 0;
	max-height: 210px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #cfcbc4 transparent;
}

.cosmod-lf-list::-webkit-scrollbar {
	width: 4px;
}

.cosmod-lf-list::-webkit-scrollbar-thumb {
	background: #cfcbc4;
	border-radius: 4px;
}

.cosmod-lf-list li {
	margin: 0;
}

.cosmod-lf-list label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 4px;
	border-radius: 6px;
	font-family: "DM Sans", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #2a2a2a;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.cosmod-lf-list label:hover {
	background: rgba(17, 17, 17, 0.04);
	color: #111;
}

.cosmod-lf-list input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	flex: 0 0 18px;
	border: 1.5px solid #bdb8b0;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	position: relative;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.cosmod-lf-list input[type="checkbox"]:hover {
	border-color: #111;
}

.cosmod-lf-list input[type="checkbox"]:checked {
	background: #111;
	border-color: #111;
}

.cosmod-lf-list input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1.5px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

.cosmod-lf-search-field {
	position: relative;
}

.cosmod-lf-search input,
.cosmod-lf-search-field input {
	width: 100%;
	padding: 12px 14px 12px 40px;
	border: 0;
	border-radius: 999px;
	font-family: "DM Sans", Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: #111;
	background: #f1efe9;
	box-sizing: border-box;
	outline: none;
	transition: box-shadow 0.15s ease, background 0.15s ease;
}

.cosmod-lf-search input::placeholder,
.cosmod-lf-search-field input::placeholder {
	color: #8a857c;
}

.cosmod-lf-search input:focus,
.cosmod-lf-search-field input:focus {
	background: #fff;
	box-shadow: 0 0 0 1.5px #111;
}

.cosmod-lf-search-field::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border: 1.6px solid #6f6a62;
	border-radius: 50%;
	box-sizing: border-box;
	pointer-events: none;
	z-index: 1;
}

.cosmod-lf-search-field::after {
	content: "";
	position: absolute;
	left: 26px;
	top: 50%;
	width: 6px;
	height: 1.6px;
	margin-top: 4px;
	background: #6f6a62;
	transform: rotate(45deg);
	pointer-events: none;
	z-index: 1;
}

/* Prix filter — Notino-style inputs + thick black dual range */
.cosmod-lf-block[data-cosmod-filter-block="prix"] .cosmod-lf-block-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.cosmod-lf-block[data-cosmod-filter-block="prix"] .cosmod-lf-title {
	font-family: "DM Sans", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	margin: 0;
	line-height: 1.2;
}

.cosmod-lf-block[data-cosmod-filter-block="prix"] .cosmod-lf-block-header::after {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin: 4px 2px 0 0;
	border-left: 1.5px solid #111;
	border-bottom: 1.5px solid #111;
	transform: rotate(135deg);
	opacity: 0.85;
}

.cosmod-lf-price-wrap {
	padding: 0;
}

.cosmod-lf-price-inputs {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
}

.cosmod-lf-price-field {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid #d0d0d0;
	border-radius: 2px;
	background: #fff;
	box-sizing: border-box;
	cursor: text;
}

.cosmod-lf-price-field:focus-within {
	border-color: #111;
}

.cosmod-lf-price-currency {
	flex: 0 0 auto;
	font-family: "DM Sans", Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #111;
	line-height: 1;
}

.cosmod-lf-price-field input[type="number"] {
	flex: 0 1 auto;
	width: 3.2em;
	min-width: 0;
	max-width: 5em;
	border: 0;
	outline: none;
	background: transparent;
	font-family: "DM Sans", Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #111;
	line-height: 1.2;
	padding: 12px 0;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.cosmod-lf-price-field input[type="number"]::-webkit-outer-spin-button,
.cosmod-lf-price-field input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cosmod-lf-price-sep {
	flex: 0 0 auto;
	font-family: "DM Sans", Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #111;
	line-height: 1;
}

.cosmod-lf-price-slider {
	position: relative;
	height: 32px;
	margin: 0 2px 2px;
}

.cosmod-lf-slider-track {
	position: absolute;
	left: 0;
	right: 0;
	top: 13px;
	height: 6px;
	background: #e8e8e8;
	border-radius: 999px;
}

.cosmod-lf-slider-range {
	position: absolute;
	top: 13px;
	height: 6px;
	background: #111;
	border-radius: 999px;
	z-index: 1;
}

.cosmod-lf-price-slider input[type="range"] {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	height: 32px;
	margin: 0;
	background: transparent;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.cosmod-lf-price-slider input[type="range"]:focus {
	outline: none;
}

.cosmod-lf-price-slider input[type="range"]::-webkit-slider-thumb {
	pointer-events: all;
	-webkit-appearance: none;
	appearance: none;
	width: 28px;
	height: 28px;
	margin-top: -11px;
	border-radius: 50%;
	background: #111;
	cursor: pointer;
	position: relative;
	z-index: 3;
	border: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.16);
}

.cosmod-lf-price-slider input[type="range"]::-moz-range-thumb {
	pointer-events: all;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #111;
	cursor: pointer;
	border: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.16);
	z-index: 3;
}

.cosmod-lf-price-slider input[type="range"]::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	height: 6px;
	background: transparent;
	border: 0;
}

.cosmod-lf-price-slider input[type="range"]::-moz-range-track {
	height: 6px;
	background: transparent;
	border: 0;
}

.cosmod-lf-price-slider input[type="range"]::-moz-range-progress {
	background: transparent;
	height: 6px;
}

.cosmod-lf-price-values {
	display: none;
}

.cosmod-lf-reset {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	margin: 10px 0 0;
	padding: 12px 22px;
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #111;
	background: transparent;
	border: 1.5px solid #111;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.cosmod-lf-reset:hover {
	background: #111;
	color: #fff;
	box-shadow: 0 8px 20px rgba(17, 17, 17, 0.18);
	transform: translateY(-1px);
}

.cosmod-lf-apply {
	display: none;
}

.cosmod-lf-mobile-bar {
	display: none;
}

/* The "Tri" <select> box itself can be styled freely (black bg on
 * desktop, white on mobile), but browsers render its dropdown OPTION
 * LIST using each <option>'s own background/color, which otherwise
 * inherits the box's style and can read white-on-near-black. Force a
 * normal white/black list regardless of the box's own colors. */
.cosmod-lf-sort option {
	background-color: #fff;
	color: #111;
}

/* "Sticky" filter row — driven by JS (cosmod-lp.js), not CSS
 * position:sticky. Some pages wrap their content in containers (sliders,
 * carousels, etc.) that silently break position:sticky, so the bar's
 * fixed/unfixed state and exact top/left/width are computed on scroll
 * instead. .cosmod-lf-mobile-bar-placeholder keeps the page's height
 * (and everything below) from jumping when the bar switches to fixed. */
.cosmod-lf-mobile-bar--fixed {
	position: fixed !important;
	z-index: 40;
	background: #fff;
}

.cosmod-lf-mobile-bar-placeholder {
	display: none;
}

.cosmod-lf-overlay {
	display: none;
}

.cosmod-lf-block-close {
	display: none;
}

body.cosmod-lf-modal-open {
	overflow: hidden;
}

/* ————————————————————————————————————————————————————————————
   Active filter chips — Boutique only (.cosmod-lp-sidebar--topbar,
   see is_shop() in includes/shortcodes.php: the chips container itself
   is only output server-side on that page). One removable chip per
   currently checked brand/sexe/category, plus a price chip when the
   range isn't at its default, plus a "Tout réinitialiser" chip. Built
   and kept in sync client-side by renderActiveChips() in cosmod-lp.js.
   Shown above the pill row on both mobile and desktop. ———————————— */
.cosmod-lp-sidebar--topbar .cosmod-lf-active-chips {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
}

.cosmod-lp-sidebar--topbar .cosmod-lf-active-chips.has-chips {
	display: flex;
}

.cosmod-lp-sidebar--topbar .cosmod-lf-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px 7px 14px;
	background: #f2f1ee;
	border: none;
	border-radius: 999px;
	font-family: "DM Sans", Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #232323;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.cosmod-lp-sidebar--topbar .cosmod-lf-chip:hover {
	background: #e6e4de;
}

.cosmod-lp-sidebar--topbar .cosmod-lf-chip-x {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #111;
	color: #fff;
	font-size: 11px;
	line-height: 1;
}

.cosmod-lp-sidebar--topbar .cosmod-lf-chip--reset {
	background: transparent;
	border: 1.5px solid #111;
	padding: 6.5px 10px 6.5px 14px;
}

.cosmod-lp-sidebar--topbar .cosmod-lf-chip--reset:hover {
	background: #111;
	color: #fff;
}

@media (max-width: 782px) {
	.cosmod-lf-mobile-bar {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		padding: 10px 2px 16px;
		margin: 0 0 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.cosmod-lf-mobile-bar::-webkit-scrollbar {
		display: none;
	}

	.cosmod-lf-pill {
		flex: 0 0 auto;
		padding: 11px 18px;
		background: #111;
		border: none;
		border-radius: 999px;
		font-family: "DM Sans", Helvetica, Arial, sans-serif;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #fff;
		cursor: pointer;
		white-space: nowrap;
	}

	/* "Tri" (sort) — Boutique only, same pill base as Marques/Sexe/etc.,
	 * but a native <select> so it needs its own arrow (the pill's ::after
	 * arrow trick doesn't render reliably on a <select> across browsers)
	 * and no text-transform (option labels like "Du - au + cher" read
	 * oddly in all caps). */
	.cosmod-lf-sort {
		flex: 0 0 auto;
		min-width: 150px;
		text-transform: none;
		text-align: left;
		-webkit-appearance: none;
		appearance: none;
		background-color: #111;
		border: 1.5px solid #111;
		border-radius: 0;
		color: #fff;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 14px center;
		padding-right: 32px;
	}

	.cosmod-lp-sidebar > .cosmod-lf-block {
		display: none;
	}

	.cosmod-lp-sidebar > .cosmod-lf-block.cosmod-lf-block-open {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		max-height: 82vh;
		background: #fff;
		z-index: 100000;
		padding: 28px 24px calc(28px + env(safe-area-inset-bottom, 0px));
		margin: 0;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
	}

	.cosmod-lf-block-open .cosmod-lf-title {
		margin-bottom: 0;
	}

	.cosmod-lf-block-open .cosmod-lf-list {
		max-height: none;
		overflow-y: auto;
	}

	.cosmod-lf-block-header {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-bottom: 22px;
	}

	.cosmod-lf-block[data-cosmod-filter-block="prix"] .cosmod-lf-block-header::after {
		display: none;
	}

	.cosmod-lf-block-header .cosmod-lf-title {
		flex: 1;
		text-align: center;
		margin-bottom: 0;
	}

	.cosmod-lf-block[data-cosmod-filter-block="prix"] .cosmod-lf-title {
		font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
		font-size: 18px;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	.cosmod-lf-block-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 0;
		width: 32px;
		height: 32px;
		border: none;
		background: #f2f1ee;
		border-radius: 50%;
		font-size: 20px;
		line-height: 1;
		color: #111;
		cursor: pointer;
	}

	.cosmod-lf-block-open .cosmod-lf-apply {
		display: block;
		width: 100%;
		margin-top: 20px;
		padding: 14px 0;
		background: #111;
		color: #fff;
		border: none;
		border-radius: 100px;
		font-family: Georgia, "Times New Roman", serif;
		font-size: 13px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		cursor: pointer;
		flex-shrink: 0;
	}

	.cosmod-lf-overlay.active {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 99999;
	}

	.cosmod-lp-sidebar > .cosmod-lf-reset {
		display: none;
	}
}

/* ————————————————————————————————————————————————————————————
   Mobile "Filtrage de la liste" — Boutique only. Replaces the old row of
   4 pills (each opening its own full-screen sheet) with ONE "Filtrer"
   button that opens a single panel listing every group as an accordion
   (tap a row to expand its checkboxes right there). cosmod-lp.js MOVES
   the real .cosmod-lf-block elements (marques/sexe/categories/prix —
   the exact same checkboxes the desktop dropdown uses, nothing
   duplicated) into [data-cosmod-all-panel-body] on mobile, and moves
   them back to being direct children of the sidebar when the viewport
   is wide enough for the desktop dropdown again. A fresh
   .cosmod-lf-row-open class tracks which accordion row is expanded here
   — it's independent of .cosmod-lf-block-open (which still drives the
   desktop dropdown and would otherwise also show the old per-block
   "Valider" button and full-screen sheet styling here).
   ———————————————————————————————————————————————————————————— */
@media (max-width: 782px) {
	.cosmod-lp-sidebar--topbar .cosmod-lf-mobile-bar [data-cosmod-open-filter] {
		display: none;
	}

	.cosmod-lp-sidebar--topbar .cosmod-lf-sort {
		flex: 0 0 110px;
		min-width: 0;
		max-width: 110px;
		padding-right: 26px;
		background-position: right 10px center;
		font-size: 13px;
	}

	.cosmod-lf-open-all {
		flex: 1 1 auto;
		padding: 11px 34px 11px 18px;
		background-color: #111;
		/* Same little chevron as the "Tri" dropdown next to it, so this
		   button reads as opening something too, not just plain text. */
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 14px center;
		border: 1.5px solid #111;
		border-radius: 0;
		font-family: "DM Sans", Helvetica, Arial, sans-serif;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #fff;
		cursor: pointer;
		white-space: nowrap;
	}

	/* Once the bar sticks to the top of the screen, drop its normal
	 * top/bottom breathing room (10px / 16px) — that spacing made sense
	 * inline with the page, but as a fixed bar it just left an ugly white
	 * strip above and below the black buttons. */
	.cosmod-lp-sidebar--topbar .cosmod-lf-mobile-bar--fixed {
		padding-top: 0;
		padding-bottom: 0;
	}

	.cosmod-lf-all-overlay {
		display: none;
	}

	.cosmod-lf-all-overlay.active {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 99999;
	}

	.cosmod-lf-all-panel {
		display: none;
	}

	.cosmod-lf-all-panel.cosmod-lf-all-panel-open {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset: 0;
		background: #fff;
		z-index: 100000;
	}

	.cosmod-lf-all-panel__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 0 0 auto;
		padding: 24px 24px 18px;
		border-bottom: 1px solid rgba(17, 17, 17, 0.08);
	}

	.cosmod-lf-all-panel__header .cosmod-lf-title {
		margin: 0;
	}

	/* Bigger × with no circle background — the small grey-circle close
	 * button (.cosmod-lf-block-close base style, used by the old per-pill
	 * sheets) reads too small/faint at the top of this full panel. */
	.cosmod-lf-all-panel__header .cosmod-lf-block-close {
		position: static;
		width: auto;
		height: auto;
		background: none;
		border-radius: 0;
		font-size: 32px;
		line-height: 1;
		color: #111;
	}

	.cosmod-lf-all-panel__body {
		flex: 1 1 auto;
		overflow-y: auto;
		padding: 4px 24px;
	}

	.cosmod-lf-all-panel__footer {
		display: flex;
		gap: 12px;
		flex: 0 0 auto;
		padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid rgba(17, 17, 17, 0.08);
	}

	.cosmod-lf-all-panel__fermer,
	.cosmod-lf-all-panel__effacer {
		flex: 1 1 0;
		padding: 14px 0;
		border-radius: 100px;
		font-family: Georgia, "Times New Roman", serif;
		font-size: 13px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.cosmod-lf-all-panel__fermer {
		background: #111;
		color: #fff;
		border: none;
	}

	.cosmod-lf-all-panel__effacer {
		background: #fff;
		color: #111;
		border: 1.5px solid #111;
	}

	/* Each moved .cosmod-lf-block becomes an accordion row: always
	 * visible (unlike the old "display:none until opened" full sheet),
	 * header always shown, list/price only shown once expanded. */
	.cosmod-lf-all-panel__body .cosmod-lf-block {
		margin: 0;
		padding: 0;
		border-bottom: 1px solid rgba(17, 17, 17, 0.08);
	}

	.cosmod-lf-all-panel__body .cosmod-lf-block:last-of-type {
		border-bottom: none;
	}

	/* Fix: tapping the row only worked if you hit the arrow (or the exact
	 * text line) precisely. The 18px of breathing room above/below the row
	 * used to be padding on .cosmod-lf-block (the OUTER wrapper), while the
	 * tap handler in cosmod-lp.js listens for clicks on .cosmod-lf-block-header
	 * specifically (e.target.closest(".cosmod-lf-block-header")) — so that
	 * padding LOOKED like part of the row but wasn't actually clickable.
	 * Moving the same 18px here, onto the header itself, makes the whole
	 * visual row (title + arrow + the space around them) register the tap,
	 * with no change to spacing or row height. */
	.cosmod-lf-all-panel__body .cosmod-lf-block-header,
	.cosmod-lf-all-panel__body .cosmod-lf-block[data-cosmod-filter-block] .cosmod-lf-block-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0;
		padding: 18px 0;
		cursor: pointer;
	}

	/* Once expanded, the gap under the title is provided by the list's own
	 * margin-top below (16px) instead, exactly like before this fix. */
	.cosmod-lf-all-panel__body .cosmod-lf-block.cosmod-lf-row-open .cosmod-lf-block-header {
		padding-bottom: 0;
	}

	.cosmod-lf-all-panel__body .cosmod-lf-block-close {
		display: none;
	}

	.cosmod-lf-all-panel__body .cosmod-lf-block-header .cosmod-lf-title,
	.cosmod-lf-all-panel__body .cosmod-lf-block[data-cosmod-filter-block] .cosmod-lf-title {
		flex: 1 1 auto;
		text-align: left;
		margin: 0;
	}

	.cosmod-lf-all-panel__body .cosmod-lf-block-header::after,
	.cosmod-lf-all-panel__body .cosmod-lf-block[data-cosmod-filter-block] .cosmod-lf-block-header::after {
		content: "";
		display: block;
		flex: 0 0 auto;
		width: 7px;
		height: 7px;
		margin: 0;
		border-left: 1.5px solid #111;
		border-bottom: 1.5px solid #111;
		transform: rotate(-45deg);
		transition: transform 0.15s ease;
	}

	.cosmod-lf-all-panel__body .cosmod-lf-block.cosmod-lf-row-open .cosmod-lf-block-header::after {
		transform: rotate(135deg);
	}

	.cosmod-lf-all-panel__body .cosmod-lf-list,
	.cosmod-lf-all-panel__body .cosmod-lf-price-wrap {
		display: none;
		margin-top: 16px;
		/* Restores the 18px gap before the divider line that used to come
		 * from .cosmod-lf-block's own padding-bottom, now that it's 0. */
		padding-bottom: 18px;
	}

	.cosmod-lf-all-panel__body .cosmod-lf-block.cosmod-lf-row-open .cosmod-lf-list,
	.cosmod-lf-all-panel__body .cosmod-lf-block.cosmod-lf-row-open .cosmod-lf-price-wrap {
		display: block;
	}

	.cosmod-lf-all-panel__body .cosmod-lf-list {
		max-height: none;
	}

	.cosmod-lf-all-panel__body .cosmod-lf-apply {
		display: none;
	}
}

/* ————————————————————————————————————————————————————————————
   Desktop (>782px), Boutique page ONLY (the sidebar there renders with
   the extra .cosmod-lp-sidebar--topbar class — see cosmod_lp_shortcode_
   filters() / is_shop() in includes/shortcodes.php): filters become a
   horizontal dropdown bar across the top of the page, instead of the
   fixed-width left sidebar. Every other page keeps the classic sidebar
   untouched, since it never gets the --topbar class. Reuses the same
   pill / block-open markup and JS as mobile — only the layout and
   pill/dropdown styling differ here. The JS pill click handler
   positions the opened block right under the clicked pill.
   ———————————————————————————————————————————————————————————— */
@media (min-width: 783px) {
	.cosmod-lp-layout:has(.cosmod-lp-sidebar--topbar) {
		flex-direction: column;
	}

	.cosmod-lp-sidebar--topbar {
		flex: 0 0 auto;
		width: 100%;
		padding: 0 0 28px;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	/* Layout modeled on the client's reference (april-beauty.be/fr/shop):
	 * rectangular bordered boxes (not rounded pills), roughly equal width,
	 * wrapping if the container is too narrow to fit them on one line. */
	.cosmod-lp-sidebar--topbar .cosmod-lf-mobile-bar {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 14px;
		overflow: visible;
		padding: 14px 0;
		margin: 0;
	}

	.cosmod-lp-sidebar--topbar .cosmod-lf-pill {
		flex: 1 1 0;
		min-width: 190px;
		max-width: 280px;
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 13px 18px;
		background: #111;
		border: 1px solid #111;
		border-radius: 4px;
		font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
		font-size: 19px;
		font-weight: 600;
		letter-spacing: 0;
		text-transform: none;
		color: #fff;
		cursor: pointer;
		white-space: nowrap;
		transition: border-color 0.15s ease;
	}

	.cosmod-lp-sidebar--topbar .cosmod-lf-pill:hover {
		border-color: #fff;
	}

	.cosmod-lp-sidebar--topbar .cosmod-lf-pill::after {
		content: "";
		flex: 0 0 auto;
		width: 7px;
		height: 7px;
		margin-top: -4px;
		border-left: 1.5px solid #fff;
		border-bottom: 1.5px solid #fff;
		transform: rotate(-45deg);
		transition: transform 0.15s ease;
	}

	.cosmod-lp-sidebar--topbar .cosmod-lf-pill.cosmod-lf-pill-active::after {
		transform: rotate(135deg);
		margin-top: 4px;
	}

	/* "Tri" (sort) — a native <select>, so it's fixed-width (not flex:1 1 0
	 * like the filter pills) and gets its own arrow instead of the pill's
	 * ::after trick, which doesn't render reliably on a <select>. Black
	 * background / white text+arrow (client wanted it to stand out from
	 * the white Marques/Sexe/Catégories/Prix pills), and a bit bigger. */
	.cosmod-lp-sidebar--topbar .cosmod-lf-sort {
		flex: 0 0 auto;
		min-width: 220px;
		max-width: 270px;
		-webkit-appearance: none;
		appearance: none;
		background-color: #111;
		color: #fff;
		border-color: #111;
		font-size: 20px;
		padding: 14px 44px 14px 18px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 16px center;
	}

	.cosmod-lp-sidebar--topbar .cosmod-lf-sort:hover {
		border-color: #111;
	}

	.cosmod-lp-sidebar--topbar .cosmod-lf-sort::after {
		content: none;
	}

	/* Search field: floated right, on the SAME row as "Réinitialiser"
	 * (which floats left) below the pills — see the clearfix + reset
	 * rule further down. Bigger than before, per client request. */
	.cosmod-lp-sidebar--topbar .cosmod-lf-search {
		display: block;
		float: right;
		clear: none;
		margin: 18px 0 0;
		padding: 0;
		border: 0;
		width: 320px;
	}

	.cosmod-lp-sidebar--topbar .cosmod-lf-search input {
		padding: 15px 18px 15px 44px;
		font-size: 14px;
	}

	/* Clearfix: the sidebar's own height must account for the floated
	 * search field + reset link below the pills, or the product grid
	 * underneath would overlap them. */
	.cosmod-lp-sidebar--topbar::after {
		content: "";
		display: table;
		clear: both;
	}

	.cosmod-lp-sidebar--topbar > .cosmod-lf-block:not(.cosmod-lf-search) {
		display: none;
	}

	.cosmod-lp-sidebar--topbar > .cosmod-lf-block.cosmod-lf-block-open {
		display: flex;
		flex-direction: column;
		position: fixed; /* top/left are set by JS, right under the clicked pill */
		z-index: 10000;
		width: 300px;
		max-width: calc(100vw - 32px);
		max-height: 70vh;
		background: #fff;
		border: 1px solid rgba(17, 17, 17, 0.1);
		border-radius: 14px;
		box-shadow: 0 18px 46px rgba(17, 17, 17, 0.16);
		padding: 20px 20px 18px;
		margin: 0;
	}

	.cosmod-lp-sidebar--topbar .cosmod-lf-block-open .cosmod-lf-list {
		max-height: 46vh;
		overflow-y: auto;
	}

	.cosmod-lp-sidebar--topbar .cosmod-lf-block-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 14px;
	}

	.cosmod-lp-sidebar--topbar .cosmod-lf-block[data-cosmod-filter-block="prix"] .cosmod-lf-block-header::after {
		display: none;
	}

	.cosmod-lp-sidebar--topbar .cosmod-lf-block-close {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 26px;
		height: 26px;
		border: none;
		background: #f2f1ee;
		border-radius: 50%;
		font-size: 16px;
		line-height: 1;
		color: #111;
		cursor: pointer;
	}

	.cosmod-lp-sidebar--topbar .cosmod-lf-block-open .cosmod-lf-apply {
		display: block;
		width: 100%;
		margin-top: 16px;
		padding: 12px 0;
		background: #111;
		color: #fff;
		border: none;
		border-radius: 100px;
		font-family: Georgia, "Times New Roman", serif;
		font-size: 12px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		cursor: pointer;
	}

	/* The classic "Réinitialiser" text link is redundant here — the
	 * "Tout réinitialiser" active-filter chip (above the pills) does the
	 * same job on Boutique, so the old link is hidden on this page only.
	 * (On every other page's classic sidebar it's still shown — see the
	 * base, non-topbar .cosmod-lf-reset rule above.) */
	.cosmod-lp-sidebar--topbar > .cosmod-lf-reset {
		display: none;
	}

	/* No dark backdrop for the desktop dropdown — it closes on an outside
	 * click, the × button, Appliquer, or on scroll (see cosmod-lp.js). */
	.cosmod-lp-sidebar--topbar .cosmod-lf-overlay {
		display: none !important;
	}

	/* The mobile-only "Filtrer" button + "Filtrage de la liste" accordion
	 * panel (see the mobile-only block further below) never show on
	 * desktop — the 4 pills + per-pill dropdown above are what desktop
	 * uses instead. */
	.cosmod-lp-sidebar--topbar .cosmod-lf-open-all,
	.cosmod-lp-sidebar--topbar .cosmod-lf-all-panel,
	.cosmod-lp-sidebar--topbar .cosmod-lf-all-overlay {
		display: none !important;
	}
}

/* Category circles (accueil) */
.cosmod-categories {
	margin: 28px 0 48px;
	padding: 8px 0 4px;
}

.cosmod-categories__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 28px 36px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cosmod-categories__entry {
	margin: 0;
	padding: 0;
}

.cosmod-categories__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 128px;
	text-decoration: none !important;
	color: #111 !important;
	border: 0 !important;
}

.cosmod-categories__image {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: #f3f2ef;
	border: 1px solid rgba(17, 17, 17, 0.08);
	box-shadow: 0 8px 22px rgba(17, 17, 17, 0.08);
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.cosmod-categories__label {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.25;
	color: #222;
	transition: color 0.2s ease;
}

.cosmod-categories__link:hover .cosmod-categories__image,
.cosmod-categories__link:focus-visible .cosmod-categories__image {
	transform: translateY(-4px) scale(1.04);
	border-color: #111;
	box-shadow: 0 14px 28px rgba(17, 17, 17, 0.16);
}

.cosmod-categories__link:hover .cosmod-categories__label,
.cosmod-categories__link:focus-visible .cosmod-categories__label {
	color: #111;
}

@media (max-width: 782px) {
	.cosmod-categories__list {
		gap: 20px 18px;
	}

	.cosmod-categories__link {
		width: 92px;
		gap: 10px;
	}

	.cosmod-categories__image {
		width: 78px;
		height: 78px;
	}

	.cosmod-categories__label {
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cosmod-categories__image {
		transition: none;
	}
}

/* —— Mobile: center product rail titles —— */
@media (max-width: 640px) {
  .cosmod-lp-title-wrap {
    text-align: center !important;
  }
  .cosmod-lp-title-line {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .cosmod-lp-eyebrow,
  .cosmod-lp-title,
  a.cosmod-lp-title {
    text-align: center !important;
    display: block;
  }
}

/* Quick add-to-cart (top-left of product image) */
.cosmod-lp-cartbtn{position:absolute;top:8px;left:8px;z-index:5;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(0,0,0,.12);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;color:#111;text-decoration:none!important;transition:transform .15s,background .15s,color .15s}
.cosmod-lp-cartbtn:hover{transform:scale(1.06);background:#fff}
.cosmod-lp-cartbtn svg{width:18px;height:18px;display:block;pointer-events:none}
.cosmod-lp-cartbtn.is-loading{opacity:.5;pointer-events:none}
.cosmod-lp-cartbtn.is-added{background:#111;color:#fff}
.cosmod-lp-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:99999;background:#111;color:#fff;padding:12px 22px;border-radius:100px;font:500 13px/1.2 "DM Sans",Arial,sans-serif;letter-spacing:.02em;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.cosmod-lp-toast.show{opacity:1;transform:translate(-50%,0)}

.cosmod-lp-cartbtn.is-in-cart{background:#111;color:#fff}

/* —— AI-generated themed category hero photo (Cosmod AI Catégories) —— */
.cosmod-lp-cat-banner{position:relative;width:100%;overflow:hidden;border-radius:14px;margin:0 0 24px;height:220px;background:#f0f0f1}
.cosmod-lp-cat-banner img{width:100%;height:100%;object-fit:cover;display:block}
.cosmod-lp-cat-banner__overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:18px 24px;box-sizing:border-box;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.5) 100%);pointer-events:none}
.cosmod-lp-cat-banner__title{margin:0;color:#fff;font:700 20px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.05em;text-transform:uppercase;text-shadow:0 1px 5px rgba(0,0,0,.45)}

@media (min-width:600px){
	.cosmod-lp-cat-banner{height:300px}
	.cosmod-lp-cat-banner__title{font-size:26px}
}
@media (min-width:1000px){
	.cosmod-lp-cat-banner{height:380px}
}
@media (max-width:600px){
	.cosmod-lp-cat-banner{border-radius:10px}
	.cosmod-lp-cat-banner__overlay{padding:14px 16px}
}

@media (min-width: 783px) {
  .cosmod-lp-sidebar--topbar
  .cosmod-lf-mobile-bar > .cosmod-lf-pill {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 0 !important;
    box-sizing: border-box;
  }
}