/* pdd-wl : Ma sélection. Charte Parfumerie de Dubaï, noir, or, crème.
   Contrastes : le doré #9f8f49 sur fond clair ne tient pas le ratio pour du
   texte, tout libellé doré sur clair passe donc en #7d7038. */

.pdd-wl {
	--pdd-gold: #9f8f49;
	--pdd-gold-text: #7d7038;
	--pdd-gold-light: #c4ae62;
	--pdd-ink: #111111;
	--pdd-cream: #faf7f0;
	--pdd-line: #e6dfcd;
	font-family: Montserrat, sans-serif;
	color: var(--pdd-ink);
}

/* Cœur */
.pdd-wl-heart {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	margin: 0;
	line-height: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #e0d8c2;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: #9f8f49;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.pdd-wl-heart:hover,
.pdd-wl-heart:focus-visible {
	border-color: #9f8f49;
}

.pdd-wl-heart.is-in svg {
	fill: currentColor;
}

/* Les positions doivent être identiques au CSS critique du head, sinon le
   cœur bouge de quelques pixels au chargement de cette feuille. */
.pdd-wl-heart--loop,
.pdd-wl-heart--single,
.pdd-wl-heart--card {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
}

.woocommerce ul.products li.product,
.product-small .box-image,
.box .box-image,
.pdd-wl__media {
	position: relative;
}

/* Bouton texte de la fiche */
.pdd-wl-save {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin-left: 10px;
	padding: 14px 22px;
	border: 1px solid #9f8f49;
	background: #ffffff;
	color: #7d7038;
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	cursor: pointer;
}

.pdd-wl-save.is-in svg {
	fill: currentColor;
}

/* Compteur du header. La largeur est réservée pour ne produire aucun
   décalage de mise en page quand le JS remplit la valeur. */
.pdd-wl-counter {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	color: #c4ae62;
	text-decoration: none;
}

.pdd-wl-counter__badge {
	position: absolute;
	top: -2px;
	right: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: #9f8f49;
	color: #000000;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

.pdd-wl-counter__badge[hidden] {
	display: none;
}

/* Page */
.pdd-wl__head {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-end;
	margin-bottom: 28px;
}

.pdd-wl__headline {
	flex: 1 1 340px;
	border-left: 2px solid var(--pdd-gold);
	padding-left: 18px;
}

.pdd-wl__intro {
	margin: 0;
	max-width: 620px;
	color: #5f5a4f;
	font-size: 14px;
	line-height: 1.6;
}

.pdd-wl__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 262px;
}

.pdd-wl__form {
	margin: 0;
}

.pdd-wl__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 14px 18px;
	border: none;
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.pdd-wl__btn--gold {
	background: var(--pdd-gold);
	color: #000000;
	font-weight: 600;
}

.pdd-wl__btn--dark {
	background: var(--pdd-ink);
	color: #f2eddf;
}

.pdd-wl__btn--outline {
	background: transparent;
	border: 1px solid #1a1a1a;
	color: #1a1a1a;
}

.pdd-wl__btn--outline-gold {
	background: transparent;
	border: 1px solid var(--pdd-gold);
	color: var(--pdd-gold-light);
}

.pdd-wl__btn--small {
	width: auto;
	min-height: 44px;
	padding: 12px 18px;
	border: 1px solid #1a1a1a;
	background: transparent;
	color: #1a1a1a;
	font-size: 12px;
}

/* Focus visible partout, jamais outline: none */
.pdd-wl button:focus-visible,
.pdd-wl a:focus-visible,
.pdd-wl input:focus-visible,
.pdd-wl-heart:focus-visible,
.pdd-wl-save:focus-visible,
.pdd-wl-counter:focus-visible {
	outline: 2px solid var(--pdd-gold);
	outline-offset: 2px;
}

.pdd-wl__share-box {
	margin-bottom: 26px;
	padding: 18px 20px;
	border: 1px solid var(--pdd-line);
	background: #ffffff;
}

.pdd-wl__share-intro {
	margin: 0 0 12px;
	color: #6b6557;
	font-size: 12.5px;
	line-height: 1.6;
}

.pdd-wl__share-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pdd-wl__share-input {
	flex: 1 1 260px;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--pdd-line);
	background: #fbf9f3;
	font-family: Montserrat, sans-serif;
	font-size: 12.5px;
	color: #4a453b;
}

.pdd-wl__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.pdd-wl__card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--pdd-line);
	background: #ffffff;
}

.pdd-wl__media {
	position: relative;
	background: #f3efe4;
}

.pdd-wl__media img {
	display: block;
	width: 100%;
	height: auto;
}

.pdd-wl__remove {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid #e0d8c2;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: #6b6558;
	cursor: pointer;
}

.pdd-wl__flag {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 6px 10px;
	background: var(--pdd-ink);
	color: #e3cf86;
	font-size: 10.5px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
}

.pdd-wl__flag--out {
	background: #4a453b;
	color: #f0ece2;
}

.pdd-wl__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 9px;
	padding: 18px;
}

.pdd-wl__brand {
	margin: 0;
	color: var(--pdd-gold-text);
	font-size: 10.5px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.pdd-wl__name {
	margin: 0;
	font-family: "Cormorant Garamond", serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.2;
}

.pdd-wl__name a {
	color: #141414;
	text-decoration: none;
}

.pdd-wl__price {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
}

.pdd-wl__quote {
	margin: 0;
	border-left: 2px solid var(--pdd-gold);
	padding-left: 11px;
	font-size: 12.5px;
	font-style: italic;
	line-height: 1.5;
}

.pdd-wl__stock {
	margin: 0;
	font-size: 11.5px;
	color: #8b846f;
}

.pdd-wl__note {
	margin-top: 4px;
	border-top: 1px dashed var(--pdd-line);
	padding-top: 11px;
}

.pdd-wl__note label {
	display: block;
	margin-bottom: 6px;
	color: #6b6557;
	font-size: 10.5px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
}

.pdd-wl__note input {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 9px 10px;
	border: 1px solid var(--pdd-line);
	background: #fbf9f3;
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	color: #4a453b;
}

.pdd-wl__body .pdd-wl__btn {
	margin-top: auto;
}

.pdd-wl__empty {
	margin-bottom: 30px;
	border-left: 2px solid var(--pdd-gold);
	padding-left: 18px;
}

.pdd-wl__empty-title {
	margin: 0 0 8px;
	font-family: "Cormorant Garamond", serif;
	font-size: 34px;
	font-weight: 500;
}

.pdd-wl__empty-text {
	margin: 0;
	color: #5f5a4f;
	font-size: 14px;
}

/* Vue partagée */
.pdd-wl-share {
	--pdd-gold: #9f8f49;
	--pdd-gold-light: #c4ae62;
	max-width: 1040px;
	margin: 0 auto;
	padding: 50px 20px 70px;
	font-family: Montserrat, sans-serif;
}

.pdd-wl-share__head {
	max-width: 720px;
	margin: 0 auto 34px;
	text-align: center;
}

.pdd-wl-share__eyebrow {
	margin: 0 0 12px;
	color: #7d7038;
	font-size: 11px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
}

.pdd-wl-share__title {
	margin: 0;
	font-family: "Cormorant Garamond", serif;
	font-size: 44px;
	font-weight: 500;
	line-height: 1.15;
}

.pdd-wl-share__intro {
	margin: 14px 0 0;
	color: #5f5a4f;
	font-size: 14px;
	line-height: 1.7;
}

.pdd-wl__grid--share {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pdd-wl-share__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	margin-top: 28px;
	padding: 22px 26px;
	background: #111111;
	color: #f4efe2;
}

.pdd-wl-share__total {
	display: flex;
	gap: 12px;
	align-items: baseline;
	margin: 0;
	font-size: 14px;
}

.pdd-wl-share__total strong {
	font-size: 24px;
}

.pdd-wl-share__footer form {
	margin: 0;
}

.pdd-wl-share__footer .pdd-wl__btn {
	width: auto;
	padding: 16px 26px;
}

/* Toast : jamais une modale, jamais une redirection. */
.pdd-wl-toast {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 9999;
	display: none;
	gap: 16px;
	align-items: center;
	max-width: 520px;
	padding: 16px 22px;
	border-left: 3px solid #9f8f49;
	background: #111111;
	color: #f4efe2;
	font-family: Montserrat, sans-serif;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
}

.pdd-wl-toast.is-visible {
	display: flex;
}

.pdd-wl-toast__text {
	flex: 1 1 auto;
}

.pdd-wl-toast__line {
	margin: 0;
	font-size: 13.5px;
}

.pdd-wl-toast__sub {
	margin: 2px 0 0;
	color: #a29b8c;
	font-size: 12px;
}

.pdd-wl-toast__action {
	flex: 0 0 auto;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 0 6px;
	border: none;
	background: transparent;
	color: #c4ae62;
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-decoration: underline;
	white-space: nowrap;
	cursor: pointer;
}

@media (max-width: 1024px) {
	.pdd-wl__grid,
	.pdd-wl__grid--share {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.pdd-wl__grid,
	.pdd-wl__grid--share {
		grid-template-columns: minmax(0, 1fr);
	}

	.pdd-wl__actions {
		width: 100%;
	}

	.pdd-wl-toast {
		left: 12px;
		right: 12px;
		bottom: 12px;
		max-width: none;
	}

	.pdd-wl-save {
		margin-left: 0;
		margin-top: 10px;
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pdd-wl-heart {
		transition: none;
	}
}

/* ---- v1.0.1 : en-tête de page, bandeau simulateur, réassurances ---- */

.pdd-wl__head {
	align-items: flex-start;
	gap: 40px;
	margin-bottom: 34px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--pdd-line);
}

.pdd-wl__headline {
	border-left-width: 2px;
}

.pdd-wl__eyebrow {
	margin: 0 0 10px;
	color: var(--pdd-gold-text);
	font-size: 11px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
}

.pdd-wl__title {
	margin: 0;
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(34px, 4vw, 50px);
	font-weight: 500;
	line-height: 1.05;
	color: var(--pdd-ink);
}

.pdd-wl__count {
	margin: 10px 0 0;
	color: var(--pdd-gold-text);
	font-size: 13px;
	letter-spacing: 0.6px;
}

.pdd-wl__intro {
	margin-top: 10px;
}

.pdd-wl__promo {
	margin: 2px 0 0;
	color: #6b6557;
	font-size: 11.5px;
	line-height: 1.5;
	text-align: center;
}

.pdd-wl__btn svg {
	margin-right: 9px;
}

.pdd-wl__headline--empty {
	margin-bottom: 34px;
	padding-bottom: 0;
	border-bottom: none;
}

/* Bandeau simulateur */
.pdd-wl__band {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	align-items: center;
	margin-top: 34px;
	padding: 24px 28px;
	background: var(--pdd-ink);
	color: #f4efe2;
}

.pdd-wl__band-icon {
	flex: 0 0 auto;
	color: var(--pdd-gold-light);
}

.pdd-wl__band-text {
	flex: 1 1 320px;
}

.pdd-wl__band-title {
	margin: 0;
	font-family: "Cormorant Garamond", serif;
	font-size: 23px;
}

.pdd-wl__band-sub {
	margin: 4px 0 0;
	color: #a9a294;
	font-size: 12.5px;
	line-height: 1.5;
}

.pdd-wl__band .pdd-wl__btn {
	width: auto;
	padding: 14px 24px;
}

/* Réassurances */
.pdd-wl__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.pdd-wl__trust li {
	padding: 9px 14px;
	border: 1px solid #ded6c0;
	color: #6b6557;
	font-size: 11.5px;
	letter-spacing: 0.6px;
}

/* Le visuel ne doit pas être un second lien vers la même fiche pour le clavier */
.pdd-wl__media-link {
	display: block;
}

.pdd-wl__flag--drop {
	background: #2f4a33;
	color: #d6e9d8;
}

@media (max-width: 860px) {
	.pdd-wl__head {
		flex-direction: column;
		align-items: stretch;
	}

	.pdd-wl__actions {
		width: 100%;
	}

	.pdd-wl__band {
		flex-direction: column;
		align-items: flex-start;
	}

	.pdd-wl__band .pdd-wl__btn {
		width: 100%;
	}
}

/* ---- v1.0.5 : couleurs explicites ----
   Flatsome applique une couleur aux paragraphes. Une règle du thème sur `p`
   l'emporte toujours sur une couleur simplement héritée du conteneur : chaque
   élément de texte doit donc porter sa propre couleur, sinon les lignes
   claires sur fond noir passent en gris et deviennent illisibles. */

.pdd-wl .pdd-wl__band-title,
.pdd-wl-toast .pdd-wl-toast__line {
	color: #f7f3e8;
}

.pdd-wl .pdd-wl__band-sub {
	color: #b8b1a1;
}

.pdd-wl-toast .pdd-wl-toast__sub {
	color: #b8b1a1;
}

.pdd-wl .pdd-wl__price,
.pdd-wl .pdd-wl__empty-title {
	color: #141414;
}

.pdd-wl .pdd-wl__quote {
	color: #4a453b;
}

.pdd-wl .pdd-wl__trust li {
	color: #5f5a4f;
}

.pdd-wl .pdd-wl__flag {
	color: #e8d69a;
}

.pdd-wl .pdd-wl__flag--out {
	color: #f0ece2;
}

.pdd-wl-share .pdd-wl-share__title {
	color: #141414;
}

.pdd-wl-share .pdd-wl-share__footer,
.pdd-wl-share .pdd-wl-share__total,
.pdd-wl-share .pdd-wl-share__total strong {
	color: #f7f3e8;
}

.pdd-wl-share .pdd-wl__card--dark .pdd-wl__name a,
.pdd-wl-share .pdd-wl__card--dark .pdd-wl__price {
	color: #f4efe2;
}

/* Lisibilité du bandeau et du toast */
.pdd-wl .pdd-wl__band-title {
	font-size: 25px;
	line-height: 1.25;
}

.pdd-wl .pdd-wl__band-sub {
	font-size: 13.5px;
}

.pdd-wl-toast .pdd-wl-toast__line {
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
}

.pdd-wl-toast .pdd-wl-toast__sub {
	font-size: 12.5px;
}

.pdd-wl-toast {
	border-left-width: 4px;
	padding: 18px 24px;
}

/* H2 de section : rétablit la hiérarchie H1 puis H2 puis H3, le thème
   ajoutant déjà des H3 dans le pied de page. */
.pdd-wl .pdd-wl__section {
	margin: 0 0 20px;
	padding-left: 14px;
	border-left: 2px solid var(--pdd-gold);
	color: #141414;
	font-family: "Cormorant Garamond", serif;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;
}

.pdd-wl-share .pdd-wl__section {
	margin-bottom: 24px;
	text-align: center;
	border-left: none;
	padding-left: 0;
}

/* Compteur dans l'en-tête */
.pdd-wl-counter__label {
	font-size: 14px;
	letter-spacing: 0.4px;
	white-space: nowrap;
}

.nav-sidebar li.pdd-wl-slot-mobile .pdd-wl-counter {
	width: auto;
	height: auto;
	padding: 10px 0;
	justify-content: flex-start;
	gap: 10px;
	color: inherit;
}

.nav-sidebar li.pdd-wl-slot-mobile .pdd-wl-counter__badge {
	position: static;
	margin-left: 4px;
}

.header-nav-main li.pdd-wl-slot .pdd-wl-counter:hover {
	color: #e0cd91;
}

/* Compteur : la couleur et la pastille doivent battre les règles du thème
   sur les liens de l'en-tête, sinon l'icône reste grise et la pastille
   déborde sur le panier. */
.header-nav .pdd-wl-counter,
.header-nav-main li.pdd-wl-slot .pdd-wl-counter {
	color: #9f8f49;
}

.header-nav-main li.pdd-wl-slot .pdd-wl-counter:hover {
	color: #7d7038;
}

.pdd-wl-counter__badge {
	top: 0;
	right: 0;
	min-width: 19px;
	height: 19px;
}

/* Le thème colore les span de l'en-tête : le trait du SVG est forcé. */
.pdd-wl-counter,
.pdd-wl-counter .pdd-wl-counter__icon,
.header-nav li.pdd-wl-slot .pdd-wl-counter,
.header-nav li.pdd-wl-slot .pdd-wl-counter__icon {
	color: #9f8f49;
}

.pdd-wl-counter svg,
.pdd-wl-counter svg path,
.header-nav li.pdd-wl-slot .pdd-wl-counter svg path {
	stroke: #9f8f49;
	fill: none;
}

.header-nav li.pdd-wl-slot .pdd-wl-counter:hover svg path {
	stroke: #7d7038;
}

.pdd-wl-counter__badge {
	top: 5px;
	right: 4px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	font-size: 10.5px;
	font-weight: 700;
}

/* ---- v1.0.11 : réassurance lisible, espaces resserrés, toast dégagé ---- */

/* Réassurance : un bandeau clair et compact plutôt que trois étiquettes
   perdues dans le blanc. Sur mobile, une ligne par argument, sans puce. */
.pdd-wl .pdd-wl__trust {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 14px 0 0;
	padding: 0;
	border: 1px solid var(--pdd-line);
	background: #fbf9f3;
	list-style: none;
}

.pdd-wl .pdd-wl__trust li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 0;
	padding: 15px 16px;
	border: none;
	border-right: 1px solid var(--pdd-line);
	color: #4a453b;
	font-size: 12.5px;
	line-height: 1.35;
	letter-spacing: 0.2px;
	text-align: center;
}

.pdd-wl .pdd-wl__trust li:last-child {
	border-right: none;
}

.pdd-wl .pdd-wl__trust li::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: #9f8f49;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 16.3 4.9 12l-1.4 1.4 5.7 5.7L20.5 7.8 19.1 6.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 16.3 4.9 12l-1.4 1.4 5.7 5.7L20.5 7.8 19.1 6.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Espaces resserrés */
.pdd-wl .pdd-wl__head {
	gap: 28px;
	margin-bottom: 24px;
	padding-bottom: 20px;
}

.pdd-wl .pdd-wl__section {
	margin-bottom: 16px;
}

.pdd-wl .pdd-wl__band {
	gap: 18px;
	margin-top: 26px;
	padding: 20px 24px;
}

.pdd-wl .pdd-wl__intro {
	margin-top: 8px;
}

@media (max-width: 860px) {
	.pdd-wl .pdd-wl__trust {
		grid-template-columns: minmax(0, 1fr);
	}

	.pdd-wl .pdd-wl__trust li {
		justify-content: flex-start;
		padding: 13px 16px;
		border-right: none;
		border-bottom: 1px solid var(--pdd-line);
		text-align: left;
	}

	.pdd-wl .pdd-wl__trust li:last-child {
		border-bottom: none;
	}

	.pdd-wl .pdd-wl__head {
		gap: 18px;
		margin-bottom: 20px;
		padding-bottom: 16px;
	}

	.pdd-wl .pdd-wl__band {
		margin-top: 20px;
		padding: 18px 18px 20px;
	}
}

/* Le badge de consentement Iubenda est ancré en bas à droite : sur mobile le
   toast remonte au-dessus pour ne pas se chevaucher avec lui. */
@media (max-width: 860px) {
	.pdd-wl-toast {
		left: 12px;
		right: 12px;
		bottom: 88px;
	}
}

@media (min-width: 861px) {
	.pdd-wl-toast {
		max-width: min(520px, calc(100vw - 140px));
	}
}

/* En direction colonne, flex-basis s'applique à la hauteur : sans cette
   remise à zéro, le bloc de texte réserve 320 px de haut et creuse un vide
   au milieu du bandeau sur mobile. */
@media (max-width: 860px) {
	.pdd-wl .pdd-wl__band-text {
		flex: 0 0 auto;
		width: 100%;
	}

	.pdd-wl .pdd-wl__band {
		gap: 14px;
	}

	.pdd-wl .pdd-wl__band-title {
		font-size: 22px;
	}
}

/* Alignement de l'icône du compteur sur les autres icônes de l'en-tête :
   même taille optique que le panier, et interligne neutralisé sur le span
   porteur, sinon le SVG remonte de 2 px par rapport au centre du lien. */
.pdd-wl-counter__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	font-size: 0;
}

.pdd-wl-counter svg {
	display: block;
}

.header-nav li.pdd-wl-slot .pdd-wl-counter svg {
	width: 26px;
	height: 26px;
}

/* ---- v1.0.14 : carré doré du menu, espaces vides, code promo ---- */

/* Le menu mobile du site dessine une pastille dorée en `a::before`, masquée
   ensuite par une icône propre à chaque identifiant d'élément de menu. Notre
   entrée n'a pas d'identifiant connu de cette feuille : sans masque, la
   pastille reste un carré plein. Nous la neutralisons, l'icône est déjà
   dans le lien. */
.nav-sidebar li.pdd-wl-slot-mobile > a::before,
.nav-sidebar li.pdd-wl-slot-mobile > a::after {
	content: none;
	display: none;
}

/* En direction colonne, flex-basis s'applique à la hauteur : sans cette
   remise à zéro, l'en-tête réserve 340 px et creuse un vide avant les
   boutons. Même cause que le bandeau du simulateur. */
@media (max-width: 860px) {
	.pdd-wl .pdd-wl__headline {
		flex: 0 0 auto;
		width: 100%;
	}

	.pdd-wl .pdd-wl__actions {
		flex: 0 0 auto;
	}
}

/* Code promo : un encart lisible plutôt qu'une ligne grise discrète. */
.pdd-wl .pdd-wl__promo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 4px 0 0;
	padding: 11px 14px;
	border: 1px dashed var(--pdd-gold);
	background: #fbf7ea;
	text-align: center;
}

.pdd-wl .pdd-wl__promo-code {
	padding: 5px 10px;
	background: var(--pdd-gold);
	color: #111111;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1.6px;
}

.pdd-wl .pdd-wl__promo-text {
	color: #4a453b;
	font-size: 12.5px;
	line-height: 1.4;
}

/* Le gabarit ajoute 60 px sous le contenu : resserré sur cette page, où la
   réassurance est le dernier bloc. */
body.pdd-wl-page .content-area.page-wrapper {
	padding-bottom: 10px;
}

body.pdd-wl-page .large-12.col,
body.pdd-wl-page .row-main > .col {
	padding-bottom: 10px;
}

/* La feuille d'icônes du menu est chargée dans le CSS personnalisé du thème,
   donc après celle de l'extension, et l'emporte à spécificité égale. La
   neutralisation du carré doré doit donc être forcée, uniquement sur notre
   entrée de menu. */
.nav-sidebar li.pdd-wl-slot-mobile > a::before,
.nav-sidebar li.pdd-wl-slot-mobile > a::after {
	content: none !important;
	display: none !important;
	background: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
}

/* ---- v1.0.16 : les deux actions sur une seule ligne ---- */

.pdd-wl .pdd-wl__actions {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	width: 420px;
}

.pdd-wl .pdd-wl__actions > .pdd-wl__btn,
.pdd-wl .pdd-wl__form {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.pdd-wl .pdd-wl__actions .pdd-wl__btn {
	height: 100%;
	padding: 13px 12px;
	font-size: 12px;
	letter-spacing: 0.8px;
	line-height: 1.25;
	text-align: center;
}

.pdd-wl .pdd-wl__actions .pdd-wl__btn svg {
	margin-right: 7px;
	flex: 0 0 auto;
}

/* Le code promo garde sa propre ligne, sous les deux boutons. */
.pdd-wl .pdd-wl__promo {
	flex: 1 1 100%;
	margin-top: 0;
}

@media (max-width: 860px) {
	.pdd-wl .pdd-wl__actions {
		width: 100%;
	}

	.pdd-wl .pdd-wl__actions .pdd-wl__btn {
		padding: 13px 8px;
		font-size: 11px;
		letter-spacing: 0.4px;
	}
}

@media (max-width: 380px) {
	.pdd-wl .pdd-wl__actions .pdd-wl__btn svg {
		display: none;
	}
}

/* Espacement du compteur dans l'en-tête : les valeurs doivent rester
   identiques à celles du CSS critique, sinon l'icône se déplace au
   chargement de cette feuille. Somme largeur + marges = 0, donc aucun
   décalage à l'insertion. */
.header-nav-main li.cart-item {
	margin-left: 37px;
}

.header-nav-main li.pdd-wl-slot {
	margin-left: -12px;
	margin-right: -34px;
}

/* Les deux actions doivent faire exactement la même hauteur et la même
   largeur. Le second bouton est enveloppé dans un formulaire : sans en faire
   lui-même un conteneur flex, son bouton ne s'étire pas et les deux blocs
   finissent à 54 et 67 px. Texte centré dans les deux cas. */
.pdd-wl .pdd-wl__actions {
	display: flex;
	align-items: stretch;
}

.pdd-wl .pdd-wl__actions > .pdd-wl__btn,
.pdd-wl .pdd-wl__form {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	margin: 0;
	align-self: stretch;
}

.pdd-wl .pdd-wl__form {
	display: flex;
}

.pdd-wl .pdd-wl__actions .pdd-wl__btn {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	min-height: 56px;
	text-align: center;
}

/* ---- v1.0.21 : réglages finaux ---- */

/* Espacement du compteur : 10 px de chaque côté, somme des marges toujours
   égale à moins la largeur, donc aucun décalage à l'insertion. */
.header-nav-main li.pdd-wl-slot {
	margin-left: -9px;
	margin-right: -37px;
}

/* Le `width: 100%` de la charte s'appliquait aussi au bouton qui est lui-même
   un élément flex, ce qui l'empêchait de partager la largeur avec le
   formulaire voisin : les deux actions passaient à la ligne. Seul le bouton
   situé DANS le formulaire prend toute la largeur de celui-ci. */
.pdd-wl .pdd-wl__actions > .pdd-wl__btn[data-pdd-wl-share],
.pdd-wl .pdd-wl__actions > .pdd-wl__form {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	align-self: stretch;
}

.pdd-wl .pdd-wl__actions > .pdd-wl__form > .pdd-wl__btn {
	width: 100%;
}

.pdd-wl .pdd-wl__actions .pdd-wl__btn {
	min-height: 58px;
}

/* ---- v1.0.22 : deux produits par ligne sur mobile ---- */

/* Une colonne unique obligeait à faire défiler longuement dès que la
   sélection s'étoffe. Deux par ligne jusqu'aux très petits écrans. */
@media (max-width: 640px) {
	.pdd-wl .pdd-wl__grid,
	.pdd-wl .pdd-wl__grid--share {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.pdd-wl .pdd-wl__body {
		gap: 7px;
		padding: 12px;
	}

	.pdd-wl .pdd-wl__name {
		font-size: 17px;
	}

	.pdd-wl .pdd-wl__price {
		font-size: 16px;
	}

	.pdd-wl .pdd-wl__brand {
		font-size: 9.5px;
		letter-spacing: 1.4px;
	}

	.pdd-wl .pdd-wl__note label {
		font-size: 9.5px;
		letter-spacing: 1px;
	}

	.pdd-wl .pdd-wl__note input {
		font-size: 11.5px;
		padding: 8px;
	}

	.pdd-wl .pdd-wl__body .pdd-wl__btn {
		min-height: 46px;
		padding: 11px 6px;
		font-size: 10.5px;
		letter-spacing: 0.4px;
	}

	.pdd-wl .pdd-wl__flag {
		left: 6px;
		bottom: 6px;
		padding: 5px 7px;
		font-size: 9px;
		letter-spacing: 0.6px;
	}

	.pdd-wl .pdd-wl__remove {
		top: 6px;
		right: 6px;
		width: 34px;
		height: 34px;
	}
}

/* ---- v1.0.24 : deux actions strictement identiques ---- */

/* flex-basis:0 avec flex-grow laissait 217 px contre 193. Une base explicite
   à la moitié moins la moitié de l'espacement, sans croissance, garantit
   deux blocs rigoureusement égaux. */
.pdd-wl .pdd-wl__actions > .pdd-wl__btn[data-pdd-wl-share],
.pdd-wl .pdd-wl__actions > .pdd-wl__form {
	flex: 0 0 calc(50% - 5px);
	width: calc(50% - 5px);
	max-width: calc(50% - 5px);
	min-width: 0;
	margin: 0;
	align-self: stretch;
	box-sizing: border-box;
}

/* Le formulaire est un conteneur flex pour que son bouton occupe toute sa
   hauteur, sinon il reste à 58 px dans un bloc de 70. */
.pdd-wl .pdd-wl__actions > .pdd-wl__form {
	display: flex;
	align-items: stretch;
}

.pdd-wl .pdd-wl__actions > .pdd-wl__form > .pdd-wl__btn {
	flex: 1 1 auto;
	width: 100%;
	height: auto;
	min-height: 0;
	align-self: stretch;
	box-sizing: border-box;
}

.pdd-wl .pdd-wl__actions > .pdd-wl__btn[data-pdd-wl-share] {
	min-height: 0;
}

/* ---- v1.0.25 : marge de bouton héritée du thème ---- */

/* Le thème applique `margin: 0 12px 12px 0` à tous les boutons. C'est cette
   marge qui rognait 12 px en largeur et en hauteur sur le bouton interne du
   formulaire, et qui décalait le bas des cartes. */
.pdd-wl .pdd-wl__btn,
.pdd-wl .pdd-wl__actions .pdd-wl__btn,
.pdd-wl .pdd-wl__actions > .pdd-wl__form > .pdd-wl__btn,
.pdd-wl .pdd-wl__card .pdd-wl__btn,
.pdd-wl-share .pdd-wl__btn {
	margin: 0;
}

.pdd-wl .pdd-wl__actions > .pdd-wl__form > .pdd-wl__btn {
	width: 100%;
	height: 100%;
}

/* ---- v1.0.26 : survol des boutons, icône de connexion, second bloc ---- */

/* Le thème inverse les couleurs au survol et produisait du noir sur noir sur
   le bouton d'ajout au panier. Les états de survol et de focus sont donc
   posés explicitement pour chaque variante. */
.pdd-wl .pdd-wl__btn--dark:hover,
.pdd-wl .pdd-wl__btn--dark:focus-visible,
.pdd-wl-share .pdd-wl__btn--dark:hover {
	background: #2f2f2f;
	color: #ffffff;
	border-color: #2f2f2f;
}

.pdd-wl .pdd-wl__btn--gold:hover,
.pdd-wl .pdd-wl__btn--gold:focus-visible {
	background: #8b7c3f;
	color: #000000;
}

.pdd-wl .pdd-wl__btn--outline:hover,
.pdd-wl .pdd-wl__btn--outline:focus-visible {
	background: #111111;
	color: #f2eddf;
	border-color: #111111;
}

.pdd-wl .pdd-wl__btn--outline-gold:hover,
.pdd-wl-share .pdd-wl__btn--outline-gold:hover {
	background: #9f8f49;
	color: #000000;
}

.pdd-wl .pdd-wl__btn--small:hover {
	background: #111111;
	color: #f2eddf;
}

/* Les libellés ne doivent jamais hériter d'une couleur au survol. */
.pdd-wl .pdd-wl__btn:hover,
.pdd-wl .pdd-wl__btn:hover *,
.pdd-wl-share .pdd-wl__btn:hover,
.pdd-wl-share .pdd-wl__btn:hover * {
	text-decoration: none;
}

/* Icône du menu mobile pour « Se connecter » : le thème y pose une pastille
   dorée sans masque, donc un carré plein. On lui donne l'icône de compte,
   dans le même style que les autres entrées du menu. */
.nav-sidebar li.account-item > a::before {
	content: "" !important;
	display: inline-block !important;
	flex: 0 0 auto;
	width: 24px !important;
	height: 24px !important;
	margin-right: 10px !important;
	background-color: #9f8f49 !important;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12.2a4.6 4.6 0 1 0 0-9.2 4.6 4.6 0 0 0 0 9.2zm0 2c-4.5 0-8.2 2.5-8.2 5.5V21h16.4v-1.3c0-3-3.7-5.5-8.2-5.5z'/%3E%3C/svg%3E") center / contain no-repeat !important;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12.2a4.6 4.6 0 1 0 0-9.2 4.6 4.6 0 0 0 0 9.2zm0 2c-4.5 0-8.2 2.5-8.2 5.5V21h16.4v-1.3c0-3-3.7-5.5-8.2-5.5z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Respiration entre les deux blocs de l'état vide. */
.pdd-wl .pdd-wl__section--spaced {
	margin-top: 34px;
}

/* ---- v1.0.29 : la croix de retrait devenait invisible ---- */

/* Le bouton était blanc sur une vignette produit blanche, bordure crème et
   croix #6b6558 en 12 px : sur mobile, plus rien ne se distinguait. Pastille
   noire pleine, croix blanche épaissie, et stroke forcé sur le tracé parce
   que Flatsome applique une couleur aux svg placés dans un button. */
.pdd-wl .pdd-wl__remove {
	width: 38px;
	height: 38px;
	border: 0;
	background: #000000;
	color: #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.pdd-wl .pdd-wl__remove svg {
	width: 15px;
	height: 15px;
	stroke: #ffffff !important;
	stroke-width: 2.6;
}

.pdd-wl .pdd-wl__remove:hover,
.pdd-wl .pdd-wl__remove:focus-visible {
	background: #9f8f49;
}

.pdd-wl .pdd-wl__remove:hover svg,
.pdd-wl .pdd-wl__remove:focus-visible svg {
	stroke: #000000 !important;
}

@media (max-width: 767px) {
	.pdd-wl .pdd-wl__remove {
		top: 8px;
		right: 8px;
		width: 36px;
		height: 36px;
	}
}

/* ---- v1.0.30 : la croix est dessinée en CSS, plus en SVG ---- */

/* La pastille noire s'affichait bien mais la croix restait invisible : le
   tracé du svg dépend de règles du thème sur les svg placés dans un button,
   et forcer stroke sur l'élément svg ne suffisait pas. La croix est donc
   dessinée avec deux pseudo-éléments, qui ne dépendent d'aucune règle de
   Flatsome. Pastille or plutôt que noire : visible sur une vignette claire,
   et accordée à la charte. */
.pdd-wl .pdd-wl__remove {
	position: absolute;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #9f8f49;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.pdd-wl .pdd-wl__remove svg {
	display: none;
}

.pdd-wl .pdd-wl__remove::before,
.pdd-wl .pdd-wl__remove::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	margin: -1px 0 0 -8px;
	background: #000000;
	border-radius: 2px;
}

.pdd-wl .pdd-wl__remove::before {
	transform: rotate(45deg);
}

.pdd-wl .pdd-wl__remove::after {
	transform: rotate(-45deg);
}

.pdd-wl .pdd-wl__remove:hover,
.pdd-wl .pdd-wl__remove:focus-visible {
	background: #000000;
}

.pdd-wl .pdd-wl__remove:hover::before,
.pdd-wl .pdd-wl__remove:hover::after,
.pdd-wl .pdd-wl__remove:focus-visible::before,
.pdd-wl .pdd-wl__remove:focus-visible::after {
	background: #ffffff;
}

/* ---- v1.0.32 : carte masquee apres retrait ----
   Les cartes sont en grille : [hidden] seul ne suffit pas a les retirer. */
.pdd-wl .pdd-wl__card[hidden] {
	display: none !important;
}