/* ============================================================
   El Mundo CBD — Checkout Shopify-style (dark + gold)
   ============================================================
   Personnalisation rapide :
     - Couleur d'accent unique : --accent
     - Activer/masquer le résumé mobile : voir #cbdco-mobile-summary
     - Sticky sidebar : .cbdco-checkout__aside-inner
   Hooks utilisés (côté serveur) :
     - woocommerce_checkout_fields (réorg champs, label-as-placeholder)
     - woocommerce_checkout_order_review (rendu review-order + payment)
   ============================================================ */

:root {
	/* `--accent` pilote 32 déclarations du checkout (titre « Résumé de commande »,
	   liens, bordures actives…). Il valait #7ab87a, le vert PÂLE qui n'est
	   lisible que sur fond sombre — d'où le rendu délavé sur le fond crème.
	   On reprend le vert du site (var(--gold) de main.css). */
	--accent:        #2d4a2d;
	--accent-2:      #3a5c3a;
	/* Dégradé doré identique au site (var(--btn-bg) dans main.css). Utilisé sur
	   les textes "héro" (Total, prix, lien CGV, brand, Free…) via la pattern
	   background-clip: text. Voir mixin .cbdco-gold-text plus bas. */
	--cco-gold-grad: #2d4a2d;
	/* Aligné sur les vars du site (main.css) pour que le checkout matche
	   exactement le reste du site.
	   ATTENTION — ce bloc n'avait été converti qu'à moitié lors du passage au
	   thème clair : `--cco-text` était resté BLANC (donc invisible sur le fond
	   crème), `--cco-bg-2` quasi noir, et `--cco-gold` n'était pas définie du
	   tout : les ~38 `var(--cco-gold, #7ab87a)` du fichier retombaient sur le
	   fallback vert pâle, qui n'est lisible que sur fond sombre. */
	--cco-gold:      #2d4a2d; /* = var(--gold) du site */
	--cco-bg:        #f5f0e8; /* = var(--bg-0) du site */
	--cco-bg-2:      #ede8df; /* = var(--bg-2) du site */
	--cco-card:      #ffffff; /* = var(--bg-1) du site */
	--cco-input-bg:  #ffffff; /* = var(--bg-1) */
	--cco-line:      #d8d0c4;
	--cco-line-2:    #c6bcae; /* = var(--line-2) du site */
	--cco-text:      #1a1a1a; /* = var(--text) du site */
	--cco-text-mute: #8a8a8a;
	--cco-text-dim:  #5a5a5a;
	--cco-error:     #d77a6a;
	--cco-radius:    8px;
	--cco-radius-card: 12px;

	/* Tailles de référence — largeur alignée sur le site (--container = 1500px) */
	--cco-input-h:      46px;
	--cco-button-h:     48px;
	--cco-card-pad:     32px;
	--cco-section-gap:  16px;
	--cco-container:    1500px;
	--cco-col-main:     1fr;
	--cco-col-aside:    480px;
	--cco-col-gap:      40px;
}

/* ===== Reset thème ===== */
body.woocommerce-checkout {
	background: var(--cco-bg);
	color: var(--cco-text);
	overflow-x: hidden;
}
body.woocommerce-checkout .site-main,
body.woocommerce-checkout .page-content {
	padding: 0 !important;
}
body.woocommerce-checkout .container,
body.woocommerce-checkout .container-narrow {
	max-width: none !important;
	padding: 0 !important;
}
body.woocommerce-checkout .entry-article {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	margin: 0 !important;
}
body.woocommerce-checkout .woocommerce-notices-wrapper {
	max-width: var(--cco-container);
	margin: 0 auto;
	padding: 12px 24px 0;
}
/* Wrappers vides (cibles AJAX WC) ne doivent pas occuper d'espace */
body.woocommerce-checkout .woocommerce-notices-wrapper:empty {
	padding: 0 !important;
	margin: 0 !important;
	display: none !important;
}

/* ===== Conteneur principal =====
   Plus de `min-height: 100vh` ici : avec un display:flex + min-height plein
   viewport et une form `flex: 1`, on créait un grand vide en bas dès que le
   contenu (form + aside) était plus court que la fenêtre. Le body est déjà
   peint dans la couleur dark via `body.woocommerce-checkout`, donc retirer
   le min-height ne révèle pas de fond clair en dessous — la page se cale
   simplement à la hauteur du contenu. */
.cbdco-checkout {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--cco-text);
	display: flex;
	flex-direction: column;
	background: var(--cco-bg);
}

/* ===== Bandeau doré supérieur — strictement aligné sur la .topbar du site
   (main.css → .topbar / .topbar__inner padding 7px 24px, font-size 14px). */
.cbdco-checkout__topbar {
	background: #2d4a2d;
	border-bottom: 1px solid rgba(0,0,0,0.18);
	color: var(--btn-fg);
	text-align: center;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 7px 24px;
	line-height: 1.4;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
}
.cbdco-checkout__topbar-icon { font-size: 15px; }

@media (max-width: 768px) {
	/* Aligné sur la topbar du site (responsive.css : font 12px, padding 6px 12px, min-height 32px). */
	.cbdco-checkout__topbar { font-size: 12px; padding: 6px 12px; min-height: 32px; }
}

/* ===== Header (même style que le site : fond #1a1a1a, logo 110px) ===== */
.cbdco-checkout__header {
	border-bottom: 1px solid var(--cco-line);
	background: var(--bg-1, #ffffff);
	padding: 14px 24px 12px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cbdco-checkout__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--cco-text);
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-size: 14px;
}
.cbdco-checkout__brand-img,
.cbdco-checkout__brand img {
	/* 74 px, c'était un pavé en haut du tunnel : on redescend à 52 px. */
	max-height: 52px !important;
	width: auto !important;
	height: auto !important;
	display: block;
	object-fit: contain;
	/* Smoothing propre + GPU layer pour éviter l'aliasing/flou sur
	   les écrans haute densité (logo downscalé). */
	image-rendering: auto;
	image-rendering: high-quality;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
}
.cbdco-checkout__brand-text {
	text-transform: uppercase;
	background: var(--cco-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@media (max-width: 1024px) {
	.cbdco-checkout__header { padding: 10px 16px 8px; }
	.cbdco-checkout__brand-img,
	.cbdco-checkout__brand img { max-height: 44px !important; }
	/* Texte de marque masqué sur mobile : le logo seul suffit (comme le
	   header du site sur mobile). Évite que le logo paraisse petit à côté. */
	.cbdco-checkout__brand-text { display: none !important; }
}
@media (max-width: 480px) {
	.cbdco-checkout__header { padding: 8px 12px 6px; }
	.cbdco-checkout__brand-img,
	.cbdco-checkout__brand img { max-height: 88px !important; }
}

/* Sticky footer : sur checkout, body en flex-column pour pousser le
   .site-footer en bas du viewport quand le contenu est court. */
body.woocommerce-checkout { min-height: 100vh; display: flex; flex-direction: column; }
body.woocommerce-checkout .cbdco-checkout { flex: 1 0 auto; }
body.woocommerce-checkout .site-footer { flex-shrink: 0; margin-top: auto; }

/* ===== Layout 2 colonnes (1200px max, gap 64) ===== */
.cbdco-checkout__form { flex: 1; }
.cbdco-checkout__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--cco-col-aside));
	column-gap: var(--cco-col-gap);
	row-gap: var(--cco-section-gap);
	max-width: var(--cco-container);
	margin: 0 auto;
	width: 100%;
	padding: 20px 0 22px;
	box-sizing: border-box;
}
.cbdco-checkout__main {
	display: flex;
	flex-direction: column;
	gap: var(--cco-section-gap);
	min-width: 0;
}
.cbdco-checkout__aside {
	min-width: 0;
}
.cbdco-checkout__aside-inner {
	position: sticky;
	top: 24px;
	background: var(--cco-card);
	border: 1px solid var(--cco-line);
	border-radius: var(--cco-radius-card);
	padding: 16px 22px 18px;
}
/* Titre "Résumé de commande" : main.css force color/border/::after via
   #order_review_heading (id sélecteur) → on duplique avec ID + !important
   pour battre la spécificité. Couleur : var(--accent) (or pleine, pas dégradé). */
.cbdco-checkout__aside-title,
#order_review_heading.cbdco-checkout__aside-title {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.1;
	text-transform: math-auto;
	hyphens: auto;
	margin: 5px 0 23px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	-webkit-text-fill-color: var(--accent) !important;
	color: var(--accent) !important;
	font-family: 'Inter', sans-serif !important;
}
#order_review_heading.cbdco-checkout__aside-title::after { display: none !important; content: none !important; }
/* Mobile : toutes les h2 du checkout (résumé, steps, sections) descendues
   à 16px pour un rendu cohérent et compact. */
@media (max-width: 600px) {
	body.woocommerce-checkout h2 {
		font-size: 16px !important;
		line-height: 1.3 !important;
	}
	/* Inputs plus compacts sur mobile */
	body.woocommerce-checkout {
		--cco-input-h: 42px;
	}
}
/* Total TTC plus compact sur mobile/tablet (≤ 768px) */
@media (max-width: 768px) {
	body.woocommerce-checkout .cbdco-review__row--total dd,
	body.woocommerce-checkout .cbdco-review__row--total dd .amount,
	body.woocommerce-checkout .cbdco-review__row--total dd bdi,
	body.woocommerce-checkout .cbdco-review__row--total dd .woocommerce-Price-amount,
	body.woocommerce-checkout .cbdco-review__row--total dd span {
		font-size: 17px !important;
	}
	body.woocommerce-checkout:not(.cbdco-shipping-done) .cbdco-review__row--total dd::before {
		font-size: 17px !important;
	}
	/* Description méthode paiement (Monetico, etc.) — police plus petite */
	body.woocommerce-checkout .payment_box,
	body.woocommerce-checkout .payment_box p {
		font-size: 11.5px !important;
		line-height: 1.4 !important;
	}
}

/* ===== Mobile ===== */
@media (max-width: 1024px) {
	.cbdco-checkout__layout {
		grid-template-columns: 1fr;
		padding: 0;
		row-gap: 0;
	}
	.cbdco-checkout__main {
		padding: 18px;
		margin-bottom: -24px;
		order: 2;
		gap: 16px;
	}
	.cbdco-checkout__aside {
		order: 1;
		display: none; /* mobile : c'est l'accordéon en haut qui sert */
	}
	.cbdco-checkout__mobile-summary { display: block; }
}
@media (min-width: 1025px) {
	.cbdco-checkout__mobile-summary { display: none; }
}

/* ===== Mobile summary accordion ===== */
.cbdco-checkout__mobile-summary {
	background: var(--cco-bg-2);
	border-bottom: 1px solid var(--cco-line);
}
.cbdco-checkout__mobile-summary > summary {
	list-style: none;
	cursor: pointer;
	padding: 14px 18px 12px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--cco-text);
}
.cbdco-checkout__mobile-summary > summary::-webkit-details-marker { display: none; }
.cbdco-checkout__mobile-summary-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	font-size: 14px;
	font-weight: 500;
}
.cbdco-checkout__mobile-summary-toggle svg,
.cbdco-checkout__mobile-summary-label,
.cbdco-checkout__mobile-summary-chevron { color: var(--text); stroke: var(--text); }
.cbdco-checkout__mobile-summary-chevron { transition: transform .2s ease; }
.cbdco-checkout__mobile-summary[open] .cbdco-checkout__mobile-summary-chevron { transform: rotate(180deg); }
.cbdco-checkout__mobile-summary-total {
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
}
.cbdco-checkout__mobile-summary-content {
	padding: 0 18px 18px 24px;
	border-top: 1px solid var(--cco-line);
}

/* ===== Sections en cards ===== */
.cbdco-checkout__section {
	background: var(--cco-card);
	border: 1px solid var(--cco-line);
	border-radius: var(--cco-radius-card);
	padding: 10px 22px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
section.cbdco-checkout__section {
	margin-bottom: 18px;
}
/* Section adresse de livraison : on réduit le gap header → champs (le champ
   Pays apparaissait trop bas par rapport au titre de section). */
section.cbdco-checkout__section.woocommerce-shipping-fields,
section.cbdco-checkout__section[data-section="billing-address"] {
	gap: 4px;
	padding-top: 8px;
}
section.cbdco-checkout__section.woocommerce-shipping-fields .cbdco-billing-toggle,
section.cbdco-checkout__section[data-section="billing-address"] .cbdco-billing-toggle {
	margin-top: -21px;
}
/* Remontée du champ Pays dans le formulaire (override demandé) */
/* Le champ Pays/région était remonté de 30 px : il venait se coller sous
   Nom/Prénom, sans respirer comme les autres lignes du formulaire. */
p#billing_country_field {
	margin-top: 0 !important;
}
section.cbdco-checkout__section[data-section="contact"] {
	margin-bottom: 0;
}

/* Section "Note de commande" en <details> repliable (fermée par défaut).
   Évite l'encombrement vertical : seule la ligne titre est visible tant que
   l'utilisateur ne l'a pas ouverte. À l'ouverture, textarea compact (pas de
   resize, hauteur fixe). */
details.cbdco-checkout__section--notes {
	display: block;
	padding: 0;
	gap: 0;
}
.cbdco-checkout__notes-toggle {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 8px;
	user-select: none;
	transition: background-color .15s ease;
	border-radius: inherit;
	gap: 12px;
}
.cbdco-checkout__notes-toggle .cbdco-checkout__section-title {
	font-size: 13px;
	font-weight: 500;
}
.cbdco-checkout__notes-toggle:hover { background-color: rgba(245,240,232,0.024); }
details.cbdco-checkout__section--notes[open] .cbdco-checkout__notes-toggle {
	border-bottom: 1px solid var(--cco-line, rgba(245,240,232,0.064));
}
.cbdco-checkout__notes-toggle::-webkit-details-marker { display: none; }
.cbdco-checkout__notes-toggle::marker { display: none; content: ""; }
.cbdco-checkout__notes-chevron {
	transition: transform .2s ease;
	color: var(--text);
	stroke: var(--text);
	flex: 0 0 auto;
}
details.cbdco-checkout__section--notes[open] .cbdco-checkout__notes-chevron {
	transform: rotate(180deg);
}
details.cbdco-checkout__section--notes .cbdco-fields {
	padding: 0 0px 8px;
}
details.cbdco-checkout__section--notes textarea,
details.cbdco-checkout__section--notes .cbdco-fields textarea {
	min-height: 70px !important;
	max-height: 70px !important;
	height: 70px !important;
	resize: none !important;
}
.cbdco-checkout__section-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}
.cbdco-checkout__section-title {
	font-size: 15px;
	font-weight: 400;
	color: var(--cco-text);
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'Inter', sans-serif;
	letter-spacing: 0;
	text-transform: none;
}
/* Quand le checkout est en mode "steps" (data-cbdco-steps="on"), chaque step
   a déjà son propre <h2.cbdco-step__title> au-dessus → le H2 interne à la
   section devient un doublon. On le masque pour éviter "Mode d'expédition"
   affiché deux fois (cf. buildStep dans checkout-steps.js qui injecte
   "Mode d'expédition" comme step title).
   EXCEPTION : la section notes (<details>) a un titre UNIQUE qui n'est pas
   dupliqué ailleurs et sert de toggle visible (chevron + label) — il faut
   donc le re-montrer explicitement, sinon l'user ne voit plus rien et
   tombe sur un textarea isolé sans contexte. */
[data-cbdco-steps="on"] .cbdco-step .cbdco-checkout__section-title {
	display: none;
}
[data-cbdco-steps="on"] .cbdco-step details.cbdco-checkout__section--notes .cbdco-checkout__section-title,
[data-cbdco-steps="on"] .cbdco-step .cbdco-checkout__section--cashback .cbdco-checkout__section-title {
	display: inline;
}
.cbdco-checkout__section-hint {
	font-size: 12px;
	color: var(--cco-text);
}
.cbdco-checkout__login-link {
	display: inline-flex;
	align-items: center;
	background: transparent;
	color: var(--accent);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 10px;
	border-radius: 6px;
	text-decoration: none;
	transition: background .15s ease;
}
.cbdco-checkout__login-link:hover {
	background: rgba(122,184,122, 0.08);
	text-decoration: underline;
	opacity: 1;
}

/* ===== Champ email caché dans la section Adresse de livraison =====
   (le vrai email est rendu dans la section "Coordonnées" en haut) */
.cbdco-hidden-billing-email,
.cbdco-fields .cbdco-hidden-billing-email,
#billing_email_field.cbdco-hidden-billing-email { display: none !important; }

/* ===== Grille champs ===== */
.cbdco-fields,
.cbdco-checkout__contact-fields {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	column-gap: 12px;
	row-gap: 6px;
}
.cbdco-fields .form-row,
.cbdco-checkout__contact-fields .form-row,
.woocommerce form .cbdco-fields .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 !important;
	padding: 0;
	position: relative;
	min-width: 0;
	grid-column: span 6;
	/* Annule WC's woocommerce-layout.css : .form-row-first/last { width: 47%; float: left/right } */
	width: auto !important;
	float: none !important;
	clear: none !important;
	overflow: visible !important;
}
/* Le wrapper WC autour des inputs est un <span> inline — on le passe en block
   pour que l'input width:100% s'applique sur toute la cellule de la grille. */
.cbdco-fields .form-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}
/* Champs sur demi-largeur (Prénom/Nom, CP/Ville) — !important pour gagner
   contre n'importe quel autre style, et IDs en sécurité totale. */
.cbdco-fields .form-row.form-row-first,
.cbdco-fields .form-row.form-row-half-first,
.cbdco-fields p#billing_first_name_field,
.cbdco-fields p#shipping_first_name_field,
.cbdco-fields p#billing_postcode_field,
.cbdco-fields p#shipping_postcode_field,
.woocommerce form .cbdco-fields .form-row.form-row-first,
.woocommerce form .cbdco-fields .form-row.form-row-half-first { grid-column: span 3 !important; }
.cbdco-fields .form-row.form-row-last,
.cbdco-fields .form-row.form-row-half-last,
.cbdco-fields p#billing_last_name_field,
.cbdco-fields p#shipping_last_name_field,
.cbdco-fields p#billing_city_field,
.cbdco-fields p#shipping_city_field,
.woocommerce form .cbdco-fields .form-row.form-row-last,
.woocommerce form .cbdco-fields .form-row.form-row-half-last { grid-column: span 3 !important; }

@media (max-width: 600px) {
	.cbdco-fields .form-row,
	.cbdco-fields .form-row-first,
	.cbdco-fields .form-row-last,
	.cbdco-fields .form-row-half-first,
	.cbdco-fields .form-row-half-last { grid-column: span 6; }
}

/* ===== Inputs (force fond sombre + bordure thème) ===== */
.cbdco-fields input[type="text"],
.cbdco-fields input[type="email"],
.cbdco-fields input[type="tel"],
.cbdco-fields input[type="password"],
.cbdco-fields input[type="number"],
.cbdco-fields textarea,
.cbdco-fields select {
	width: 100% !important;
	background: var(--cco-input-bg) !important;
	background-color: var(--cco-input-bg) !important;
	border: 1px solid var(--cco-line) !important;
	border-radius: var(--cco-radius) !important;
	color: var(--cco-text) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	min-height: var(--cco-input-h);
	height: var(--cco-input-h);
	padding: 0 14px !important;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	color-scheme: dark;
}
/* Chevron SVG UNIQUEMENT pour pays + région (autres selects = Select2 prend
   le relais et ajoute son propre chevron, on doublerait sinon). */
.cbdco-fields select#billing_country,
.cbdco-fields select#shipping_country,
.cbdco-fields select#billing_state,
.cbdco-fields select#shipping_state {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 6 7 11 1'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 12px 8px !important;
	padding-right: 36px !important;
}
.cbdco-fields textarea {
	height: auto;
	min-height: 90px;
	padding: 12px 14px !important;
	resize: vertical;
}
.cbdco-fields input:focus,
.cbdco-fields textarea:focus,
.cbdco-fields select:focus {
	outline: none !important;
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px rgba(122,184,122,0.15) !important;
}
/* Autofill (Chrome) — force fond sombre */
.cbdco-fields input:-webkit-autofill,
.cbdco-fields input:-webkit-autofill:hover,
.cbdco-fields input:-webkit-autofill:focus,
.cbdco-fields textarea:-webkit-autofill,
.cbdco-fields select:-webkit-autofill {
	-webkit-text-fill-color: var(--cco-text) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--cco-input-bg) inset !important;
	box-shadow: 0 0 0 1000px var(--cco-input-bg) inset !important;
	caret-color: var(--cco-text);
	transition: background-color 9999s ease-in-out 0s;
}

/* ===== Labels classiques (au-dessus de l'input, style Shopify "no-float") ===== */
.cbdco-fields .form-row > label,
.cbdco-fields .form-row > label.screen-reader-text {
	position: static !important;
	transform: none !important;
	clip: auto !important;
	clip-path: none !important;
	height: auto !important;
	width: auto !important;
	padding: 0 !important;
	border: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	display: block !important;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--cco-text-mute);
	pointer-events: auto;
}
.cbdco-fields .form-row:focus-within > label { color: var(--accent); }
/* On masque la mention "(facultatif)" pour ne garder que l'astérisque sur les requis */
.cbdco-fields .form-row > label .optional { display: none; }
.woocommerce form .form-row .required,
.cbdco-fields .required {
	color: #d77a6a;
	font-weight: 700;
	border: 0 !important;
	text-decoration: none;
	visibility: hidden;
}

/* ===== Select natif — pas de chevron custom : select2 le remplace par le sien.
   En cas de fallback (JS désactivé), le navigateur affiche son chevron natif. */
/* Select2 (countries/states) — intégration sombre, texte centré verticalement */
.cbdco-fields .select2-container--default .select2-selection--single {
	height: var(--cco-input-h) !important;
	background: var(--cco-input-bg) !important;
	border: 1px solid var(--cco-line) !important;
	border-radius: var(--cco-radius) !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 36px 0 14px !important;
}
.cbdco-fields .select2-container--default .select2-selection__rendered {
	color: var(--cco-text) !important;
	line-height: var(--cco-input-h) !important;
	padding: 0 !important;
	font-size: 14px !important;
	display: block;
	width: 100%;
}
/* Flèche : on masque le <b> natif select2 et on dessine notre SVG en background */
.cbdco-fields .select2-container--default .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0 !important;
	right: 12px !important;
	height: var(--cco-input-h) !important;
	width: 14px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 6 7 11 1'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 12px 8px !important;
	transform: none !important;
}
.cbdco-fields .select2-container--default .select2-selection__arrow b,
.select2-container--default .select2-selection--single .select2-selection__arrow b,
.select2-container .select2-selection__arrow b {
	display: none !important;
	border: 0 !important;
	background: transparent !important;
	width: 0 !important;
	height: 0 !important;
}
.cbdco-fields .select2-container--focus .select2-selection {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px rgba(122,184,122,0.15) !important;
}

/* Dropdown ouvert (rendu en root <body>) — thème dark complet */
.select2-container--default .select2-dropdown,
.select2-dropdown {
	background: var(--cco-card, #f5f0e8) !important;
	border: 1px solid var(--cco-line, #d8d0c4) !important;
	color: var(--text) !important;
}
.select2-container--default .select2-results,
.select2-results { color: var(--text) !important; }
.select2-container--default .select2-results__option,
.select2-results__option {
	color: var(--text) !important;
	background: transparent !important;
	padding: 10px 14px;
}
/* Survol */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected="true"],
.select2-results__option--highlighted {
	background: rgba(122,184,122,0.12) !important;
	color: var(--accent, var(--green)) !important;
}
/* Option déjà sélectionnée (la valeur actuelle) — par défaut select2 met fond gris clair */
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"],
.select2-results__option[aria-selected="true"] {
	background: rgba(122,184,122,0.18) !important;
	color: var(--accent, var(--green)) !important;
}
/* Champ recherche en haut du dropdown */
.select2-container--default .select2-search--dropdown,
.select2-search--dropdown {
	background: var(--cco-card, #f5f0e8) !important;
	padding: 8px;
}
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-search--dropdown .select2-search__field {
	background: var(--cco-input-bg, #ffffff) !important;
	border: 1px solid var(--cco-line, #d8d0c4) !important;
	color: var(--text) !important;
	border-radius: var(--cco-radius, 8px);
	padding: 8px 12px;
}

/* ===== Validation inline ===== */
.cbdco-fields .woocommerce-invalid input,
.cbdco-fields .woocommerce-invalid textarea,
.cbdco-fields .woocommerce-invalid select { border-color: var(--cco-error) !important; }
.cbdco-fields .woocommerce-error,
.cbdco-fields .woocommerce-invalid + .woocommerce-error {
	color: var(--cco-error);
	font-size: 12px;
	margin-top: 4px;
	display: block;
}
/* Label rouge sur les champs invalides (override de la couleur par défaut). */
.woocommerce form .form-row.woocommerce-invalid label,
.cbdco-fields .form-row.woocommerce-invalid > label {
	color: #d0705c;
}

/* ===== Newsletter (hors grille — sa propre ligne sous l'email) ===== */
.cbdco-newsletter {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--cco-text);
	font-size: 12.5px;
	font-weight: 400;
	margin-bottom: 13px !important;
	cursor: pointer;
	margin: 8px 0 0;
	padding: 0;
	line-height: 1.4;
}
.cbdco-newsletter input[type="checkbox"] {
	margin: 0;
	flex: 0 0 auto;
}
.cbdco-newsletter__text {
	flex: 1;
}

/* ===== Checkboxes (générique) ===== */
.cbdco-checkout input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border: 1px solid var(--cco-line-2);
	background: var(--cco-input-bg);
	border-radius: 4px;
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	margin-right: 6px;
	flex: 0 0 auto;
}
.cbdco-checkout input[type="checkbox"]:checked {
	background: var(--accent);
	border-color: var(--accent);
}
.cbdco-checkout input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px; top: 1px;
	width: 5px; height: 10px;
	border: solid #f5f0e8;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Cache la vraie checkbox WC ship_to_different_address — pilotée par les radios */
#ship-to-different-address-checkbox-real,
input[name="ship_to_different_address"][hidden] {
	display: none !important;
	position: absolute !important;
	left: -9999px !important;
}

/* ===== Bloc choix facturation (radio cards) ===== */
.cbdco-billing-toggle {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--cco-line);
	border-radius: var(--cco-radius);
	overflow: hidden;
	background: var(--cco-input-bg);
}
.cbdco-radio-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	cursor: pointer;
	border-bottom: 1px solid var(--cco-line);
	transition: background .15s ease;
	margin: 0;
}
.cbdco-radio-card:last-child { border-bottom: 0; }
.cbdco-radio-card:hover { background: var(--cco-card); }
.cbdco-radio-card input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	width: 18px;
	height: 18px;
	border: 1px solid var(--cco-line-2);
	border-radius: 50%;
	background: var(--cco-card);
	display: inline-block;
	flex: 0 0 auto;
	position: relative;
}
.cbdco-radio-card input[type="radio"]:checked { border-color: var(--accent); }
.cbdco-radio-card input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	background: var(--accent);
	border-radius: 50%;
}
.cbdco-radio-card__mark { display: none; }
.cbdco-radio-card__label {
	color: var(--cco-text);
	font-size: 14px;
	flex: 1;
}
.cbdco-radio-card:has(input:checked) { background: rgba(122,184,122,0.06); }
.cbdco-checkout__billing-form { margin-top: 14px; }

/* ===== Mode d'expédition ===== */
.cbdco-checkout__shipping-methods,
.cbdco-shipping__list {
	border: 1px solid var(--cco-line);
	border-radius: var(--cco-radius);
	background: var(--cco-input-bg);
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cbdco-shipping__option {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--cco-line);
	padding: 0;
}
/* Le plugin La Poste injecte (via woocommerce_after_shipping_rate) les infos
   du relais sélectionné + le bouton "Choisir un autre". Sans CSS, les spans
   et <br> sont inline et squeezent le label de la méthode. On les force à
   passer SOUS le label via flex-basis 100%, et on neutralise les <br>. */

/* Les <br> du plugin créent des sauts de ligne parasites dans le flex container. */
.cbdco-shipping__option > br,
.cbdco-shipping__option .laposteproexp-parcel-point > br {
	display: none !important;
}

/* Les spans texte (client / nom / adresse) : chacune sur sa propre ligne sous
   le label, indentées pour s'aligner avec le contenu du label. */
.cbdco-shipping__option > [class*="laposteproexp-parcel-client-"],
.cbdco-shipping__option > [class*="laposteproexp-parcel-name-"],
.cbdco-shipping__option > [class*="laposteproexp-parcel-address-"],
.cbdco-shipping__option .laposteproexp-parcel-point > [class*="laposteproexp-parcel-client-"],
.cbdco-shipping__option .laposteproexp-parcel-point > [class*="laposteproexp-parcel-name-"],
.cbdco-shipping__option .laposteproexp-parcel-point > [class*="laposteproexp-parcel-address-"] {
	flex: 1 0 100%;
	display: block !important;
	width: 100% !important;
	margin: 0 16px 0 52px !important;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--cco-text-mute);
}
.cbdco-shipping__option > [class*="laposteproexp-parcel-client-"],
.cbdco-shipping__option .laposteproexp-parcel-point > [class*="laposteproexp-parcel-client-"] {
	margin-top: 4px !important;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--cco-text-mute);
}
.cbdco-shipping__option > [class*="laposteproexp-parcel-name-"],
.cbdco-shipping__option .laposteproexp-parcel-point > [class*="laposteproexp-parcel-name-"] {
	font-size: 13px;
	font-weight: 700;
	background: var(--cco-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.cbdco-shipping__option > [class*="laposteproexp-parcel-address-"],
.cbdco-shipping__option .laposteproexp-parcel-point > [class*="laposteproexp-parcel-address-"] {
	color: var(--cco-text);
	margin-bottom: 4px !important;
}

/* Le wrapper .laposteproexp-parcel-point : flex 100% pour passer sous le
   label, pas de margin-left (le contenu s'aligne avec le bord gauche du <li>). */
.cbdco-shipping__option > .laposteproexp-parcel-point {
	flex: 0 0 100% !important;
	margin: 4px 0 12px 0 !important;
	padding: 0 !important;
	text-align: left !important;
	width: auto !important;
	display: block !important;
}

/* Le bouton "Choisir un point relais" injecté par le plugin La Poste après
   le label. flex-basis 100% FORCE le wrap → radio+label restent sur leur
   ligne, bouton tombe en dessous. max-width:max-content + margin-right:auto
   = bouton étroit aligné à gauche sur desktop. Mobile garde sa règle full-width
   centrée dans le @media plus bas. */
.cbdco-shipping__option .laposteproexp-select-parcel {
	flex: 0 0 100%;
	width: auto;
	max-width: max-content;
	margin: 6px 0 12px 52px;
	margin-right: auto;
	align-self: flex-start;
}
/* Style écriture commun pour le bouton "Choisir un autre point relais" — uniformise
   l'apparence (font / casing / weight / fond) que ce soit dans la liste shipping
   à gauche OU dans le résumé droit (#order_review). On NE touche PAS aux
   margins/positions (gérées par contexte ailleurs). */
.laposteproexp-select-parcel {
	font-family: 'Inter', sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	color: var(--cco-text) !important;
	background: var(--cco-card);
	border: 1px solid var(--cco-line);
	border-radius: var(--cco-radius);
	padding: 8px 14px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.laposteproexp-select-parcel:hover {
	border-color: var(--accent);
	background: rgba(122,184,122, 0.06);
}

/* Lien "Enlever" du coupon dans le résumé : blanc, sans gras, sans soulignement. */
.woocommerce-remove-coupon {
	color: var(--text) !important;
	font-weight: 400 !important;
	text-decoration: none !important;
}
.woocommerce-remove-coupon:hover {
	color: var(--text) !important;
	text-decoration: none !important;
	opacity: 0.8;
}
.cbdco-shipping__option:last-child { border-bottom: 0; }
.cbdco-shipping__option input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	margin: 0 0 0 18px;
	width: 18px;
	height: 18px;
	border: 1px solid var(--cco-line-2);
	border-radius: 50%;
	background: var(--cco-card);
	flex: 0 0 auto;
	position: relative;
}
.cbdco-shipping__option input[type="radio"]:checked { border-color: var(--accent); }
.cbdco-shipping__option input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	background: var(--accent);
	border-radius: 50%;
}
.cbdco-shipping__label {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px 14px;
	padding: 14px 18px;
	cursor: pointer;
	color: var(--cco-text);
	font-size: 14px;
	line-height: 1.45;
}
.cbdco-shipping__name {
	color: var(--cco-text);
	flex: 1 1 auto;
	min-width: 0;
	word-break: break-word;
	display: block;
}
.cbdco-shipping__name br + .laposteproexp-extra-label,
.cbdco-shipping__name .laposteproexp-extra-label,
.cbdco-shipping__label > .laposteproexp-extra-label {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--text);
	font-weight: 400;
	flex: 1 0 100%;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
/* Adresse "Retrait en boutique" : visible uniquement quand l'option est
   cochée. Sinon on a une adresse affichée sous toutes les méthodes même
   non sélectionnées, ce qui prête à confusion. */
.cbdco-shipping__option:not(:has(input:checked)) .laposteproexp-extra-label {
	display: none !important;
}
.cbdco-shipping__cost {
	color: var(--cco-text);
	font-weight: 600;
	flex: 0 0 auto;
	white-space: nowrap;
}
@media (max-width: 768px) {
	/* Sur mobile : radio + label sur ligne 1 (label wrap interne pour adresse).
	   Le bouton "Choisir un point relais" (Colissimo) wrap en ligne 2 via flex-wrap. */
	.cbdco-shipping__option {
		align-items: center;
		padding: 4px 0;
		flex-wrap: wrap;
	}
	.cbdco-shipping__option input[type="radio"] {
		margin: 0 0 0 16px;
		align-self: center;
		flex: 0 0 18px;
	}
	.cbdco-shipping__label {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 4px 12px;
		padding: 14px 16px 10px;
		font-size: 14px;
	}
	.cbdco-shipping__name {
		flex: 1 1 auto;
		font-weight: 500;
		font-size: 14px;
		line-height: 1.4;
	}
	.cbdco-shipping__cost {
		flex: 0 0 auto;
		font-size: 15px;
		font-weight: 700;
	}
	/* L'extra-label (adresse retrait en boutique) passe SOUS le label parent
	   en texte plein blanc — pas de card avec fond/bordure (look uniforme desktop). */
	.cbdco-shipping__name .laposteproexp-extra-label,
	.cbdco-shipping__label > .laposteproexp-extra-label {
		flex: 1 0 100%;
		width: 100%;
		max-width: 100%;
		margin: 6px 0 0;
		display: block;
		padding: 0;
		font-size: 12.5px;
		line-height: 1.5;
		color: var(--text);
		background: transparent;
		border: 0;
		border-radius: 0;
		font-weight: 400;
		box-sizing: border-box;
	}
	/* Bouton "Choisir un point relais" sur mobile : aligné avec le début
	   du texte adresse (margin-left 16px = même indent que les spans), 5px
	   d'air au-dessus, casse normale (pas d'uppercase). On force `display:block`
	   + `margin-right:auto` pour neutraliser le `align-self/flex-end` hérité
	   du desktop qui pouvait pousser le bouton vers la droite. */
	body.woocommerce-checkout .cbdco-shipping__option .laposteproexp-select-parcel,
	.cbdco-shipping__option .laposteproexp-select-parcel {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: auto !important;
		max-width: max-content !important;
		min-width: 0 !important;
		margin: 15px 0 1px 15px !important;
		padding: 8px 14px !important;
		height: auto !important;
		min-height: 0 !important;
		line-height: 1.2 !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		letter-spacing: 0.01em !important;
		text-transform: none !important;
		text-align: left !important;
		align-self: flex-start !important;
		float: none !important;
	}
	/* Wrapper .laposteproexp-parcel-point sur mobile : margin-left 0, collé
	   à gauche comme sur desktop (le bouton lui-même a son propre 52px pour
	   s'aligner avec le texte du label). */
	.cbdco-shipping__option > .laposteproexp-parcel-point {
		margin: 4px 0 12px 0 !important;
	}
	/* Spans texte (client / nom / adresse) : sur mobile la marge desktop
	   `0 16px 0 52px` faisait déborder l'adresse hors du conteneur — on
	   réduit la marge gauche à 16px et on force le wrap des longs noms
	   (rues, codes postaux concaténés sans espace). */
	.cbdco-shipping__option > [class*="laposteproexp-parcel-client-"],
	.cbdco-shipping__option > [class*="laposteproexp-parcel-name-"],
	.cbdco-shipping__option > [class*="laposteproexp-parcel-address-"],
	.cbdco-shipping__option .laposteproexp-parcel-point > [class*="laposteproexp-parcel-client-"],
	.cbdco-shipping__option .laposteproexp-parcel-point > [class*="laposteproexp-parcel-name-"],
	.cbdco-shipping__option .laposteproexp-parcel-point > [class*="laposteproexp-parcel-address-"] {
		margin: 0 16px 0 16px !important;
		font-size: 12px;
		overflow-wrap: anywhere;
		word-break: break-word;
		max-width: calc(100% - 32px);
	}
}
.cbdco-shipping__free {
	font-weight: 600;
	background: var(--cco-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.cbdco-shipping__option:has(input:checked) { background: rgba(122,184,122,0.06); }
.cbdco-checkout__shipping-empty,
.cbdco-shipping__empty {
	padding: 14px 18px;
	color: var(--cco-text-mute);
	font-size: 13px;
	margin: 0;
}

/* ===== Paiement ===== */
/* Méta du header (à droite du titre) : hint au-dessus, logos en dessous,
   tout aligné à droite. */
.cbdco-checkout__section-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	text-align: right;
}
.cbdco-checkout__payment-brands {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	justify-content: flex-end;
}
.cbdco-checkout__payment-brands .cbdco-pay-brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	border-radius: 0;
	overflow: visible;
	background: transparent;
	border: 0;
	flex: 0 0 auto;
	line-height: 1;
	padding: 0 3px;
}
.cbdco-checkout__payment-brands .cbdco-pay-brand svg {
	height: 18px;
	width: auto;
	display: block;
	color: var(--cco-gold, #2d4a2d);
}
.cbdco-checkout__payment-brands .cbdco-pay-brand .fa-brands {
	font-size: 24px;
	line-height: 1;
	color: var(--cco-gold, #2d4a2d);
	display: inline-block;
	width: 1.6em;
	text-align: center;
}

/* Case CGV — sous le bloc paiement, hors du bloc. Style cohérent avec la case
   newsletter (idem cbdco-newsletter). */
.cbdco-checkout__terms {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 0 4px;
}
.cbdco-checkout__terms-input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0 0 !important;
	border: 1px solid var(--cco-line-2) !important;
	border-radius: 4px !important;
	background: var(--cco-input-bg) !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	transition: border-color .15s ease, background .15s ease;
}
.cbdco-checkout__terms-input:checked {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
}
.cbdco-checkout__terms-input:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #f5f0e8;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.cbdco-checkout__terms-label {
	flex: 1 1 auto;
	font-size: 13px;
	color: var(--cco-text-mute);
	line-height: 1.5;
	cursor: pointer;
	margin: 0;
}
/* Variante "majeur" : même rendu que la méthode de paiement / livraison
   sélectionnée (fond doré subtil + bordure dorée pleine). */
.cbdco-checkout__terms--age {
	background: rgba(122,184,122, 0.06);
	border: 1px solid #d8d0c4;
	border-radius: var(--cco-radius);
	padding: 16px 16px 14px 16px !important;
	margin-top: 3px;
	margin-bottom: 4px;
}
@media (max-width: 768px) {
	.cbdco-checkout__terms--age {
		padding: 18px 16px 5px 16px !important;
	}
}
.cbdco-checkout__terms-label--strong {
	font-size: 13px !important;
	font-weight: 300 !important;
	color: var(--cco-text) !important;
}
.cbdco-checkout__terms-label a {
	text-decoration: none;
	background: var(--cco-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* Bouton qui déclenche la modale CGV — lien blanc souligné (à la place du doré) */
.cbdco-checkout__terms-trigger {
	background: transparent;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: var(--text);
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.cbdco-checkout__terms-trigger:hover { color: var(--text); opacity: 0.85; }
.cbdco-checkout__terms-trigger:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* === Modale CGV — design aligné sur la modale "Trouve ton CBD" :
       head dark gradient + particules + fond carte blanc avec texte noir. === */
.cbdco-terms-modal {
	width: min(640px, calc(100vw - 24px)) !important;
	max-height: calc(100vh - 48px) !important;
	background:
		radial-gradient(circle at 0% 0%, rgba(122,184,122,.05) 0%, transparent 40%),
		radial-gradient(circle at 100% 100%, rgba(45,74,45,.04) 0%, transparent 40%),
		linear-gradient(180deg, #ffffff 0%, #e8f0e8 100%) !important;
	color: #1a1a1a !important;
	border: 1px solid rgba(122,184,122,0.2) !important;
	border-radius: 24px !important;
	box-shadow:
		0 60px 120px rgba(0,0,0,.55),
		0 16px 40px rgba(0,0,0,.2),
		inset 0 1px 0 rgba(245,240,232,0.64) !important;
}
.cbdco-terms-modal .sp-eta-modal__inner {
	max-height: calc(100vh - 48px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
/* Head — gradient sombre + particules dorées + animation */
.cbdco-terms-modal .sp-eta-modal__head {
	background: var(--bg-2) !important;
	color: var(--text) !important;
	padding: 18px 22px !important;
	border-bottom: 1px solid var(--line) !important;
	position: relative;
	overflow: hidden;
}
.cbdco-terms-modal .sp-eta-modal__head::before,
.cbdco-terms-modal .sp-eta-modal__head::after {
	content: none;
}
.cbdco-terms-modal .sp-eta-modal__head::after {
}
.cbdco-terms-modal .sp-eta-modal__head > * { position: relative; z-index: 1; }
.cbdco-terms-modal .sp-eta-modal__head .sp-eta-modal__title {
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: var(--text) !important;
	color: var(--text) !important;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.cbdco-terms-modal .sp-eta-modal__close {
	background: rgba(245,240,232,0.064) !important;
	color: var(--text) !important;
	border: 1px solid rgba(245,240,232,0.096) !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.cbdco-terms-modal .sp-eta-modal__close svg { stroke: currentColor !important; color: var(--text) !important; }
.cbdco-terms-modal .sp-eta-modal__close:hover {
	background: rgba(122,184,122,.2) !important;
	border-color: rgba(122,184,122,.4) !important;
	transform: rotate(90deg) scale(1.05);
}

/* Body — fond blanc transparent (sur fond crème modale), TEXTE NOIR */
.cbdco-terms-modal__body {
	padding: 22px 26px 26px !important;
	color: #1a1a1a !important;
	-webkit-text-fill-color: #1a1a1a !important;
	font-size: 14px;
	line-height: 1.6;
	overflow-y: auto;
	flex: 1 1 auto;
	background: transparent;
}
.cbdco-terms-modal__body * {
	color: #1a1a1a !important;
	-webkit-text-fill-color: #1a1a1a !important;
}
.cbdco-terms-modal__body p { margin: 0 0 12px; }
.cbdco-terms-modal__body p:last-child { margin-bottom: 0; }
.cbdco-terms-modal__body h1,
.cbdco-terms-modal__body h2,
.cbdco-terms-modal__body h3,
.cbdco-terms-modal__body h4 {
	margin: 18px 0 8px;
	color: var(--btn-fg) !important;
	-webkit-text-fill-color: var(--btn-fg) !important;
	font-size: 15px;
	font-weight: 700;
}
.cbdco-terms-modal__body ul,
.cbdco-terms-modal__body ol {
	margin: 0 0 12px;
	padding-left: 22px;
}
.cbdco-terms-modal__body li { margin: 0 0 4px; }
.cbdco-terms-modal__body a {
	color: var(--green) !important;
	-webkit-text-fill-color: var(--green) !important;
	text-decoration: underline;
}
.cbdco-terms-modal__body strong {
	color: var(--btn-fg) !important;
	-webkit-text-fill-color: var(--btn-fg) !important;
	font-weight: 700;
}
/* Mobile — modale plein écran style natif iOS/Android (comme la modale "Trouve ton CBD")
   On force inset: 0 + override dur des user-agent styles du <dialog>. */
@media (max-width: 600px) {
	.cbdco-terms-modal,
	.cbdco-terms-modal[open] {
		position: fixed !important;
		inset: 0 !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		min-height: 100dvh !important;
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 0 !important;
		border: none !important;
		transform: none !important;
	}
	.cbdco-terms-modal[open] {
		animation: cbdco-terms-slide-up .35s cubic-bezier(.2,.9,.3,1.1);
	}
	@keyframes cbdco-terms-slide-up {
		from { transform: translateY(100%); opacity: .8; }
		to   { transform: translateY(0); opacity: 1; }
	}
	.cbdco-terms-modal .sp-eta-modal__inner {
		max-height: 100dvh;
		height: 100dvh;
		display: flex;
		flex-direction: column;
	}
	/* Head : safe-area-inset-top + 22px fallback pour passer SOUS la barre URL Chrome/Safari mobile.
	   Évite que le titre/close soient collés au haut de l'écran. Match exact du Quiz. */
	.cbdco-terms-modal .sp-eta-modal__head {
		padding: calc(22px + env(safe-area-inset-top, 22px)) 22px 18px !important;
		gap: 14px !important;
		align-items: center !important;
		position: relative !important;
		flex: 0 0 auto !important;
		min-height: auto !important;
	}
	.cbdco-terms-modal .sp-eta-modal__head .sp-eta-modal__title {
		font-size: 15px !important;
		line-height: 1.25;
		flex: 1 1 auto;
		padding-right: 8px;
		margin: 0 !important;
	}
	.cbdco-terms-modal .sp-eta-modal__close {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		flex: 0 0 36px !important;
		border-radius: 50% !important;
	}
	.cbdco-terms-modal__body {
		padding: 18px 22px calc(28px + env(safe-area-inset-bottom)) !important;
		font-size: 14px;
		flex: 1 1 auto !important;
	}
}
.cbdco-checkout__terms-required {
	color: var(--cco-error);
	margin-left: 2px;
}
/* État erreur : si la case n'est pas cochée et le user soumet, WC ajoute une
   notice ; on peut aussi styler via :invalid (HTML5 required). */
.cbdco-checkout__terms-input:invalid:not(:focus) {
	/* discret par défaut, on ne marque pas d'erreur tant que le user n'a pas tenté */
}

/* Override des styles par défaut WC sur #payment (fond mauve, border-radius)
   et de main.css. Le #payment d'origine sert juste de conteneur logique pour
   les fragments AJAX — on l'aplatit complètement. */
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* Conteneur paiement : transparent, pas de carte englobante. Chaque méthode
   est sa propre petite carte. Plus simple, plus lisible. */
.cbdco-checkout__payment {
	border: 0;
	background: transparent;
	min-height: 0;
}
.cbdco-checkout__payment .wc_payment_methods,
#payment ul.payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* Chaque méthode = carte simple. Le LI est un flex container pour aligner le
   radio (sibling de <label>, pas dans le label) avec le nom de la méthode.
   .payment_box (description) passe à la ligne via flex-basis 100%. */
body.woocommerce-checkout .cbdco-checkout__payment li.wc_payment_method,
body.woocommerce-checkout #payment ul.payment_methods > li,
body.woocommerce-checkout #payment li.wc_payment_method {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px !important;
	border: 1px solid var(--cco-line) !important;
	border-radius: var(--cco-radius) !important;
	padding: 20px 16px 13px 16px !important;
	margin: 0 !important;
	background: var(--cco-card) !important;
	box-shadow: none !important;
	transition: border-color .15s ease, background .15s ease;
}
/* Méthode sélectionnée : juste fond doré subtil, bordure neutre. */
body.woocommerce-checkout .cbdco-checkout__payment li.wc_payment_method:has(input:checked),
body.woocommerce-checkout #payment ul.payment_methods > li:has(input:checked),
body.woocommerce-checkout #payment li.wc_payment_method:has(input:checked) {
	border-color: #d8d0c4 !important;
	background: rgba(122,184,122, 0.06) !important;
}
.cbdco-checkout__payment li.wc_payment_method > label,
#payment li.wc_payment_method > label {
	flex: 1 1 auto !important;
	cursor: pointer;
	color: var(--cco-text);
	font-size: 14px;
	font-weight: 600;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.cbdco-checkout__payment li.wc_payment_method > input[type="radio"],
#payment li.wc_payment_method > input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	margin: 0 !important;
	width: 18px;
	height: 18px;
	border: 1px solid var(--cco-line-2);
	border-radius: 50%;
	background: var(--cco-bg);
	flex: 0 0 auto;
	position: relative;
}
/* La description passe à la ligne sous le radio + nom */
.cbdco-checkout__payment li.wc_payment_method > .payment_box,
#payment li.wc_payment_method > .payment_box {
	flex-basis: 100% !important;
}
.cbdco-checkout__payment li.wc_payment_method > input[type="radio"]:checked,
#payment li.wc_payment_method > input[type="radio"]:checked { border-color: var(--accent); }
.cbdco-checkout__payment li.wc_payment_method > input[type="radio"]:checked::after,
#payment li.wc_payment_method > input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	background: var(--accent);
	border-radius: 50%;
}
/* Payment_box (description du mode de paiement, ex "Effectue le paiement…")
   — !important pour battre WC default qui force #dcd7e2 (lavande) avec
   .woocommerce-checkout #payment div.payment_box (haute spécificité). */
body.woocommerce-checkout .cbdco-checkout__payment div.payment_box,
body.woocommerce-checkout #payment div.payment_box {
	background-color: var(--cco-bg) !important;
	border: 1px solid var(--cco-line) !important;
	color: var(--cco-text) !important;
	margin: 10px 0 0 !important;
	border-radius: var(--cco-radius) !important;
	box-shadow: none !important;
}
/* Triangle pointer WC (::before sur le payment_box) — masqué */
body.woocommerce-checkout .cbdco-checkout__payment div.payment_box::before,
body.woocommerce-checkout #payment div.payment_box::before,
body.woocommerce-checkout .cbdco-checkout__payment div.payment_box::after,
body.woocommerce-checkout #payment div.payment_box::after {
	display: none !important;
	content: none !important;
}
body.woocommerce-checkout .cbdco-checkout__payment div.payment_box p,
body.woocommerce-checkout #payment div.payment_box p {
	margin: 0 !important;
	color: inherit !important;
}
/* Inputs éventuels dans payment_box */
body.woocommerce-checkout .cbdco-checkout__payment div.payment_box input.input-text,
body.woocommerce-checkout #payment div.payment_box input.input-text {
	background: var(--cco-input-bg) !important;
	border: 1px solid var(--cco-line) !important;
	color: var(--cco-text) !important;
}

/* Form-row dans #payment (terms wrapper / privacy) — padding retiré, marges
   négatives pour resserrer verticalement avec les blocs autour. */
#add_payment_method #payment div.form-row,
.woocommerce-cart #payment div.form-row,
.woocommerce-checkout #payment div.form-row,
.cbdco-checkout__payment div.form-row {
	padding: 0 !important;
	margin-bottom: -19px !important;
	margin-top: -24px !important;
}

/* Mention privacy policy — wrapper et texte sans espacement supplémentaire */
body.woocommerce-checkout .cbdco-checkout__payment .woocommerce-terms-and-conditions-wrapper,
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
	margin: 0 !important;
	padding: 0 !important;
}
body.woocommerce-checkout .cbdco-checkout__payment .woocommerce-privacy-policy-text,
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text {
	color: var(--cco-text) !important;
	font-size: 13px;
	line-height: 1.45;
	margin: 4px 0 0 !important;
	padding: 0 !important;
	margin-bottom: 18px !important;
	margin-top: 15px !important;
}
body.woocommerce-checkout .cbdco-checkout__payment .woocommerce-privacy-policy-text p,
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text p {
	margin: 0 !important;
	padding: 0 !important;
	color: inherit;
}
body.woocommerce-checkout .cbdco-checkout__payment .woocommerce-privacy-policy-link,
body.woocommerce-checkout #payment .woocommerce-privacy-policy-link {
	color: var(--accent);
	text-decoration: none;
}
.cbdco-checkout__payment img,
#payment img {
	max-height: 24px;
	width: auto;
	display: inline-block;
	vertical-align: middle;
	margin-left: 6px;
	border-radius: 3px;
}
/* Message "aucun moyen de paiement" — bordure dorée à gauche */
.cbdco-checkout__payment .woocommerce-NoticeGroup,
.cbdco-checkout__payment .woocommerce-info,
.cbdco-checkout__payment > .woocommerce-error,
#payment .woocommerce-NoticeGroup,
#payment .woocommerce-info,
#payment > .woocommerce-error {
	margin: 0;
	padding: 24px;
	color: var(--cco-text);
	background: var(--cco-input-bg);
	border-left: 3px solid var(--accent);
	border-radius: 0;
	font-size: 14px;
	list-style: none;
}

/* ===== Bouton "Commander" ===== */
.cbdco-checkout__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cbdco-checkout__place-order #place_order,
.cbdco-checkout__place-order button.button,
.cbdco-checkout__payment #place_order,
#place_order {
	width: 100% !important;
	display: block;
	background: var(--cco-gold-grad) !important;
	color: var(--btn-fg) !important;
	border: 1px solid transparent !important;
	border-radius: var(--cco-radius) !important;
	padding: 0 24px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px !important;
	text-transform: none !important;
	cursor: pointer;
	height: var(--cco-button-h);
	min-height: var(--cco-button-h);
	line-height: var(--cco-button-h);
	box-shadow: 0 8px 22px rgba(122,184,122,0.30);
	transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cbdco-checkout__place-order #place_order:hover,
#place_order:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(122,184,122,0.45);
}
/* État "désactivé" — case CGV pas cochée. Le bouton reste cliquable au sens
   technique (le handler dans checkout-shopify.js intercepte et affiche l'erreur),
   mais l'apparence dit clairement qu'il faut d'abord cocher la case. */
.cbdco-checkout__place-order #place_order.is-disabled,
#place_order.is-disabled {
	/* Le fond était du crème à 4,8 % d'opacité : invisible sur une page claire,
	   le bouton désactivé disparaissait complètement. */
	background: #e6e1d8 !important;
	border: 1px solid #d4cec2 !important;
	color: #8a8a8a !important;
	box-shadow: none !important;
	cursor: not-allowed;
	filter: grayscale(0.6);
	opacity: 0.7;
}
.cbdco-checkout__place-order #place_order.is-disabled:hover,
#place_order.is-disabled:hover {
	transform: none;
	filter: grayscale(0.6);
	box-shadow: none !important;
}

/* Note inline (ex : section Cashback) — petite ligne mute au lieu d'un h2. */
.cbdco-checkout__section-note {
	margin: 0 0 8px;
	font-size: 12.5px;
	color: var(--cco-text-mute);
	line-height: 1.5;
}

/* Mobile : le bouton "Payer par Carte Bancaire" doit être au même gabarit
   que les boutons "Continuer" — sinon il paraît énorme en bas du flow. */
@media (max-width: 760px) {
	.cbdco-checkout__place-order #place_order,
	.cbdco-checkout__place-order button.button,
	.cbdco-checkout__payment #place_order,
	#place_order {
		height: 46px !important;
		min-height: 46px !important;
		line-height: 1.2 !important;
		font-size: 13px !important;
		letter-spacing: 0.02em !important;
		text-transform: none !important;
		padding: 0 14px !important;
		white-space: normal !important;
	}
}
.cbdco-checkout__legal {
	color: var(--cco-text-mute);
	font-size: 12px;
	margin: 0;
	line-height: 1.5;
}
.cbdco-checkout__legal a {
	color: var(--accent);
	text-decoration: none;
}
.cbdco-checkout__noscript {
	color: var(--cco-error);
	font-size: 13px;
	padding: 12px 14px;
	background: rgba(215,122,106,0.08);
	border: 1px solid rgba(215,122,106,0.3);
	border-radius: var(--cco-radius);
}

/* ===== Review (col droite + accordéon mobile) ===== */
.cbdco-review {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cbdco-review__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
@media (max-width: 768px) {
	.cbdco-review__items { margin-top: 20px; }
}
.cbdco-review__item {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	gap: 12px;
	align-items: center;
}
/* Cadeaux : tout `.cbdco-review__item` qui SUIT le divider 🎁 dans le <ul>.
   Visuel encore plus compact (info secondaire). */
.cbdco-review__gifts-divider ~ .cbdco-review__item {
	grid-template-columns: 36px 1fr auto;
	gap: 10px;
}
.cbdco-review__gifts-divider ~ .cbdco-review__item .cbdco-review__thumb,
.cbdco-review__gifts-divider ~ .cbdco-review__item .cbdco-review__thumb-img,
.cbdco-review__gifts-divider ~ .cbdco-review__item .cbdco-review__thumb img {
	width: 36px !important;
	height: 36px !important;
}
.cbdco-review__gifts-divider ~ .cbdco-review__item .cbdco-review__qty-badge {
	min-width: 15px;
	height: 15px;
	padding: 0 4px;
	border-radius: 8px;
	font-size: 9.5px;
	top: -4px;
	right: -4px;
}
.cbdco-review__gifts-divider ~ .cbdco-review__item .cbdco-review__name {
	font-size: 12.5px;
}
/* Divider entre items réguliers et cadeaux offerts */
.cbdco-review__gifts-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 0 9px;
	margin: 4px 0 0;
	list-style: none;
	border: 0;
}
.cbdco-review__gifts-divider::before,
.cbdco-review__gifts-divider::after {
	content: ''; flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(122,184,122,0.32), transparent);
}
.cbdco-review__gifts-divider span {
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text);
	white-space: nowrap;
}
.cbdco-review__thumb {
	position: relative;
	width: 48px;
	height: 48px;
}
.cbdco-review__thumb-img,
.cbdco-review__thumb img {
	width: 48px !important;
	height: 48px !important;
	object-fit: cover;
	border-radius: var(--cco-radius);
	border: 1px solid var(--cco-line);
	background: var(--cco-input-bg);
	display: block;
}
.cbdco-review__qty-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--cco-gold, #2d4a2d);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px var(--cco-card);
}
.cbdco-review__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.cbdco-review__name {
	font-size: 13.5px;
	color: var(--cco-text);
	font-weight: 500;
	line-height: 1.35;
}
.cbdco-review__meta { font-size: 11.5px; color: var(--cco-text-mute); }
.cbdco-review__meta p { margin: 0; }
.cbdco-review__price {
	font-size: 13.5px;
	color: var(--cco-text);
	font-weight: 500;
	white-space: nowrap;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	min-width: 0;
}
/* Ordre vertical : badge promo → prix barré → prix actuel (aligné cart-drawer). */
.cbdco-review__discount { order: 0; margin-bottom: 3px; display: inline-block; background: #d33b3b; color: #fff; -webkit-text-fill-color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 4px; line-height: 1.2; }
.cbdco-review__price del { order: 1; background: transparent; text-decoration: line-through; color: var(--cco-text-mute); -webkit-text-fill-color: var(--cco-text-mute); font-size: 11px; font-weight: 400; line-height: 1.2; opacity: 0.9; }
.cbdco-review__price ins { order: 2; background: transparent; text-decoration: none; color: var(--cco-text); -webkit-text-fill-color: var(--cco-text); font-size: 13.5px; font-weight: 600; line-height: 1.2; }

/* Code promo — version discrète, alignée sur le drawer panier latéral */
form.cbdco-review__coupon,
.cbdco-review__coupon {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	margin: 10px 0 4px;
	align-items: stretch !important;
	width: 100%;
	padding: 2px;
	background: var(--cco-input-bg, #fff);
	border: 1px solid var(--cco-line, #e5e7eb);
	border-radius: 8px;
	position: relative;
	transition: border-color .15s ease;
}
.cbdco-review__coupon:focus-within {
	border-color: var(--cco-gold, #7ab87a);
}
.cbdco-review__coupon::before {
	content: "🎟";
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	line-height: 1;
	pointer-events: none;
	z-index: 1;
	opacity: .7;
}
.cbdco-review__coupon > .screen-reader-text { display: none !important; }
.cbdco-review__coupon-input,
input[type="text"].cbdco-review__coupon-input {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--cco-text) !important;
	padding: 8px 10px 8px 32px !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	min-height: 36px;
	box-shadow: none !important;
}
.cbdco-review__coupon-input::placeholder {
	color: var(--cco-text-mute, #80a190);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-style: italic;
}
.cbdco-review__coupon-input:focus,
.cbdco-review__coupon-input:focus-visible,
.cbdco-review__coupon-input:active {
	outline: none !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
.cbdco-review__coupon-submit {
	flex: 0 0 auto;
	white-space: nowrap;
	border: 0 !important;
	border-radius: 6px !important;
	padding: 0 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: none;
	cursor: pointer;
	min-height: 0;
	color: var(--cco-gold, var(--green));
	background: transparent;
	transition: color .15s ease, background .15s ease, transform .15s ease;
}
.cbdco-review__coupon-submit:hover {
	background: rgba(122,184,122,.15);
}
.cbdco-review__coupon-submit:disabled { opacity: 0.6; cursor: wait; }
.cbdco-review__coupon-notice-mount { margin: 0; }
.cbdco-review__coupon-notice {
	margin: 2px 0 10px;
	font-size: 12.5px;
	line-height: 1.4;
	border-radius: var(--cco-radius);
	padding: 9px 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	/* Pas d'animation : sinon elle re-joue à chaque mutation observer re-render */
}
.cbdco-review__coupon-notice-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	margin-top: 0;
}
.cbdco-review__coupon-notice-text { flex: 1 1 auto; }
.cbdco-review__coupon-notice-close {
	flex: 0 0 auto;
	background: transparent;
	border: none;
	color: inherit;
	font-size: 0 !important; /* on neutralise le glyph natif et on dessine "×" via ::before */
	line-height: 1;
	cursor: pointer;
	padding: 0 !important;
	margin: 0;
	opacity: .6;
	transition: opacity .15s ease, background .15s ease;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	min-height: 24px !important;
	max-width: 24px;
	max-height: 24px;
	border-radius: 50% !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
}
.cbdco-review__coupon-notice-close::before {
	content: "×";
	font-size: 18px;
	line-height: 1;
	font-weight: 400;
	display: block;
	transform: translateY(-1px); /* le glyph × a un baseline déporté — compense optique */
}
.cbdco-review__coupon-notice-close:hover { opacity: 1; background: rgba(245,240,232,0.064); }
.cbdco-review__coupon-notice.is-success {
	background: rgba(122,184,122,0.10);
	color: var(--accent);
	border: 1px solid rgba(122,184,122,0.35);
}
.cbdco-review__coupon-notice.is-success .cbdco-review__coupon-notice-icon {
	background: var(--accent); color: var(--btn-fg);
}
.cbdco-review__coupon-notice.is-error {
	background: rgba(215,122,106,0.10);
	color: var(--cco-error);
	border: 1px solid rgba(215,122,106,0.35);
}
.cbdco-review__coupon-notice.is-error .cbdco-review__coupon-notice-icon {
	background: var(--cco-error); color: var(--btn-fg);
}
.cbdco-review__coupon-notice.is-info {
	background: rgba(245,240,232,0.032);
	color: var(--cco-text);
	border: 1px solid var(--cco-line);
}
.cbdco-review__coupon-notice.is-info .cbdco-review__coupon-notice-icon {
	background: var(--cco-text-mute); color: var(--btn-fg);
}

/* Totaux */
.cbdco-review__totals {
	margin: -4px 0 0;
	padding: 13px 0 0;
	border-top: 1px solid var(--cco-line);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cbdco-review__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0;
	font-size: 13.5px;
}
.cbdco-review__row dt { color: var(--cco-text-mute); margin: 0; }
.cbdco-review__row dd { color: var(--cco-text); margin: 0; font-weight: 500; }
.cbdco-review__ship-later { font-size: 12.5px; font-style: italic; color: var(--cco-text-mute); }
.cbdco-review__ship-free { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #4a7a3e; }
.cbdco-review__row--shipping dd { font-weight: 500; }
/* Tant que le step "Mode d'expédition" n'est pas validé (body sans
   .cbdco-shipping-done), on masque le label/prix auto-sélectionné par WC
   et on affiche une mention "À choisir à l'étape suivante" à la place. */
body:not(.cbdco-shipping-done) .cbdco-review__row--shipping dd {
	font-size: 0 !important;
	color: transparent !important;
	line-height: 0 !important;
}
body:not(.cbdco-shipping-done) .cbdco-review__row--shipping dd::after {
	content: "À l'étape suivante";
	font-style: italic;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--cco-text-mute);
	font-weight: 400;
}
/* Total TTC tant que livraison pas validée : on swap le total WC (qui inclut
   la livraison auto-sélectionnée) par le sous-total items TTC stocké en
   data-cbdco-items-ttc (sans shipping). */
body:not(.cbdco-shipping-done) .cbdco-review__row--total dd,
body:not(.cbdco-shipping-done) .cbdco-review__row--total dd .amount,
body:not(.cbdco-shipping-done) .cbdco-review__row--total dd .woocommerce-Price-amount,
body:not(.cbdco-shipping-done) .cbdco-review__row--total dd bdi,
body:not(.cbdco-shipping-done) .cbdco-review__row--total dd span {
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
}
body:not(.cbdco-shipping-done) .cbdco-review__row--total dd::before {
	content: attr(data-cbdco-items-ttc);
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
	background: var(--cco-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.cbdco-review__row--coupon dd,
.cbdco-review__row--coupon dd .amount,
.cbdco-review__row--coupon dd bdi {
	background: var(--cco-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-weight: 600;
}
.cbdco-review__row--total {
	margin-top: 6px;
	padding-top: 10px;
	border-top: 1px solid var(--cco-line);
	align-items: baseline;
}
/* Note discrète sous le Total TTC : "Taxes de X € incluses (20%)" */
.cbdco-review__row--tax-note {
	margin-top: 2px;
	padding: 0;
	border: 0;
	justify-content: flex-end;
}
.cbdco-review__row--tax-note dd {
	margin: 0;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--cco-text-mute);
	font-style: italic;
	letter-spacing: 0.01em;
}
.cbdco-review__row--tax-note dd .amount,
.cbdco-review__row--tax-note dd bdi {
	font-weight: 500;
	color: var(--cco-text-mute);
}
.cbdco-review__row--total dt {
	color: var(--cco-text);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.cbdco-review__row--total dd {
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.01em;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	/* Dégradé doré (cohérent avec le site). Le span monétaire interne garde
	   sa couleur propre — voir .cbdco-review__total-currency. */
	background: var(--cco-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* WooCommerce wrap le montant dans .amount → on lui propage le dégradé.
   Le bdi peut être dans .amount ou directement dans dd. */
.cbdco-review__row--total dd .amount,
.cbdco-review__row--total dd bdi {
	background: inherit;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.cbdco-review__total-currency {
	font-size: 12px;
	color: var(--cco-text-mute);
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.06em;
}
.cbdco-review__tax-included {
	color: var(--cco-text-mute);
	font-size: 11.5px;
	margin: 6px 0 0;
	text-align: right;
}

/* ===== Loader AJAX ===== */
form.checkout.processing { position: relative; }
form.checkout.processing::after {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 100;
	pointer-events: none;
}
form.checkout.processing::before {
	content: "";
	position: fixed;
	left: 50%;
	top: 50%;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 3px solid rgba(122,184,122,0.2);
	border-top-color: var(--accent);
	transform: translate(-50%,-50%);
	animation: cbdco-spin .7s linear infinite;
	z-index: 101;
}
@keyframes cbdco-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Erreur inline WC native sous les champs */
#add_payment_method .checkout .checkout-inline-error-message,
.woocommerce-cart .checkout .checkout-inline-error-message,
.woocommerce-checkout .checkout .checkout-inline-error-message {
	color: var(--cco-error);
	font-size: .95em;
	margin-bottom: 0;
}

/* Erreur inline custom sous la case CGV/majeur */
.cbdco-checkout__terms-error {
	color: var(--cco-error);
	font-size: 13px;
	font-weight: 500;
	margin: -5px 0 3px;
	padding: 10px 14px;
	background: rgba(215, 122, 106, 0.08);
	border: 1px solid rgba(215, 122, 106, 0.35);
	border-radius: var(--cco-radius);
	display: none;
}
.cbdco-checkout__terms-error.is-visible {
	display: block;
}
.cbdco-checkout__terms--age.is-error {
	border-color: var(--cco-error) !important;
	background: rgba(215,122,106,0.06);
}

/* Le NoticeGroup-checkout (bandeau prepend par WC en haut de form.checkout
   après une AJAX en échec) est masqué : les erreurs de champs sont déjà
   visibles inline via .woocommerce-invalid (label rouge + bordure rouge),
   l'erreur CGV/majeur est sous la case via #cbdco-terms-error, le coupon est
   sous son champ. → Le bandeau du haut est redondant. */
.cbdco-checkout .woocommerce-NoticeGroup-checkout,
.cbdco-checkout form.checkout > .woocommerce-NoticeGroup,
form.checkout > .woocommerce-NoticeGroup-checkout {
	display: none !important;
}

/* ===== Notices WC en haut de page =====
   Stylées sobrement (les erreurs de validation form doivent rester visibles).
   Le notice du coupon est géré séparément (sous le champ via JS), pas ici. */
.cbdco-checkout .woocommerce-error,
.cbdco-checkout .woocommerce-message,
.cbdco-checkout .woocommerce-info,
.cbdco-checkout .woocommerce-NoticeGroup .woocommerce-error,
.cbdco-checkout .woocommerce-NoticeGroup .woocommerce-message,
.cbdco-checkout .woocommerce-NoticeGroup .woocommerce-info {
	background: var(--cco-card);
	border: 1px solid var(--cco-line);
	border-left: 3px solid var(--cco-error);
	color: var(--cco-text);
	font-size: 13px;
	line-height: 1.45;
	padding: 12px 14px;
	margin: 0 0 16px;
	border-radius: var(--cco-radius);
	list-style: none;
}
.cbdco-checkout .woocommerce-message,
.cbdco-checkout .woocommerce-NoticeGroup .woocommerce-message {
	border-left-color: var(--accent);
}
.cbdco-checkout .woocommerce-info,
.cbdco-checkout .woocommerce-NoticeGroup .woocommerce-info {
	border-left-color: var(--accent);
}
.cbdco-checkout .woocommerce-error li,
.cbdco-checkout .woocommerce-message li,
.cbdco-checkout .woocommerce-info li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.cbdco-checkout .woocommerce-error .button,
.cbdco-checkout .woocommerce-message .button { display: none; }

/* Wrappers vides masqués (WC en injecte plusieurs vides) */
.cbdco-checkout .woocommerce-notices-wrapper:empty,
body.woocommerce-checkout .woocommerce-notices-wrapper:empty {
	display: none !important;
}

/* ===== Page Thank you / Commande reçue ===== */
.cbdco-thankyou {
	max-width: 1500px;
	margin: 0 auto;
	padding: 35px 24px 0px;
	color: var(--cco-text);
	font-family: 'Inter', sans-serif;
}
/* Override .entry-article a { text-decoration: underline } qui cascade depuis main.css */
.entry-article .cbdco-thankyou a,
.cbdco-thankyou a { text-decoration: none !important; }

/* Bandeau d'aide doré injecté via wp_body_open : on masque la .topbar du site
   sur la page de remerciement pour éviter le double bandeau gold. */
body.woocommerce-order-received .topbar { display: none !important; }
body.woocommerce-order-received .cbdco-thankyou { margin-bottom: 40px; }
.cbdco-checkout__topbar--page {
	background: #2d4a2d;
	border-bottom: 1px solid rgba(0,0,0,0.18);
	color: var(--btn-fg);
	text-align: center;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 11px 24px;
	line-height: 1.4;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
}
@media (max-width: 768px) {
	/* Aligné sur la topbar du site sur mobile. */
	.cbdco-checkout__topbar--page { font-size: 12px; padding: 6px 12px; min-height: 32px; }
}
.cbdco-thankyou__hero {
	text-align: center;
	margin-bottom: 40px;
}
.cbdco-thankyou__hero-icon {
	width: 88px;
	height: 88px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--cco-gold-grad);
	color: var(--btn-fg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 32px rgba(122,184,122,0.30);
}
.cbdco-thankyou__eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 12px;
	background: var(--cco-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.cbdco-thankyou__title {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--cco-text);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.cbdco-thankyou__lead {
	font-size: 15px;
	color: var(--cco-text);
	line-height: 1.5;
	margin: 0;
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}
.cbdco-thankyou__lead strong { color: var(--accent); font-weight: 600; }

/* Cards récap (numéro, date, total, paiement) */
.cbdco-thankyou__overview {
	list-style: none;
	padding: 0;
	margin: 0 0 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}
.cbdco-thankyou__card {
	background: var(--cco-card);
	border: 1px solid var(--cco-line);
	border-radius: var(--cco-radius);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cbdco-thankyou__card-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cco-text-mute);
}
.cbdco-thankyou__card-value {
	font-size: 15px;
	font-weight: 600;
	color: var(--cco-text);
}
.cbdco-thankyou__card--total .cbdco-thankyou__card-value {
	font-size: 20px;
	background: var(--cco-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.cbdco-thankyou__card--total .cbdco-thankyou__card-value bdi,
.cbdco-thankyou__card--total .cbdco-thankyou__card-value .amount {
	background: inherit;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Section "Détail de la commande" : table WC native restylée */
.cbdco-thankyou__layout { display: block; }
.cbdco-thankyou__section {
	background: var(--cco-card);
	border: 1px solid var(--cco-line);
	border-radius: var(--cco-radius-card);
	padding: 24px 26px;
	margin-bottom: 18px;
}
.cbdco-thankyou__section-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 18px;
	color: var(--cco-text);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border: 0;
	padding: 0;
}
.cbdco-thankyou .woocommerce-order-details { background: transparent; padding: 0; margin: 0; }
.cbdco-thankyou .woocommerce-order-details__title { display: none; }
.cbdco-thankyou__order-table table.shop_table,
.cbdco-thankyou .woocommerce-table--order-details {
	width: 100%;
	border: 0 !important;
	border-collapse: collapse;
	background: transparent !important;
}
.cbdco-thankyou .woocommerce-table--order-details .product-name a {
	color: var(--cco-text) !important;
	text-decoration: none;
	font-weight: 500;
}
.cbdco-thankyou .woocommerce-table--order-details .product-name a:hover { color: var(--accent) !important; }
.cbdco-thankyou .woocommerce-table--order-details th,
.cbdco-thankyou .woocommerce-table--order-details td {
	padding: 12px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cco-line) !important;
	background: transparent !important;
	color: var(--cco-text) !important;
	font-size: 14px !important;
}
.cbdco-thankyou .woocommerce-table--order-details thead th {
	font-size: 11px !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--cco-text-mute) !important;
	font-weight: 600;
	padding-bottom: 10px !important;
}
.cbdco-thankyou .woocommerce-table--order-details tfoot th,
.cbdco-thankyou .woocommerce-table--order-details tfoot td {
	font-size: 14px !important;
	padding: 10px 0 !important;
}
.cbdco-thankyou .woocommerce-table--order-details tfoot tr:last-child th,
.cbdco-thankyou .woocommerce-table--order-details tfoot tr:last-child td {
	font-size: 18px !important;
	font-weight: 700;
	border-top: 1px solid var(--cco-line) !important;
	border-bottom: 0 !important;
	padding-top: 14px !important;
}
.cbdco-thankyou .woocommerce-table--order-details tfoot tr:last-child td {
	background: transparent !important;
	color: var(--text) !important;
}
.cbdco-thankyou .woocommerce-table--order-details tfoot tr:last-child td bdi,
.cbdco-thankyou .woocommerce-table--order-details tfoot tr:last-child td .amount {
	background: transparent;
	color: var(--text) !important;
	-webkit-text-fill-color: var(--text);
}
.cbdco-thankyou .woocommerce-table--order-details a {
	color: var(--accent);
	text-decoration: none;
}
.cbdco-thankyou .woocommerce-table--order-details a:hover { filter: brightness(1.1); }
.cbdco-thankyou .product-quantity { color: var(--cco-text-mute); font-weight: 500; }

/* Adresses (facturation/livraison) — colonnes side-by-side */
.cbdco-thankyou .woocommerce-customer-details {
	margin-top: 24px;
}
.cbdco-thankyou .woocommerce-customer-details h2 {
	font-size: 16px !important;
	font-weight: 700 !important;
	margin: 24px 0 12px !important;
	color: var(--cco-text) !important;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border: 0 !important;
	padding: 0 !important;
}
.cbdco-thankyou .woocommerce-customer-details h2::after { display: none !important; }
.cbdco-thankyou .woocommerce-columns--addresses {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	width: auto !important;
	float: none !important;
}
.cbdco-thankyou .woocommerce-columns--addresses::before,
.cbdco-thankyou .woocommerce-columns--addresses::after { display: none !important; }
@media (max-width: 600px) {
	.cbdco-thankyou .woocommerce-columns--addresses { grid-template-columns: 1fr; }
}
.cbdco-thankyou .woocommerce-column {
	background: var(--cco-bg-2);
	border: 1px solid var(--cco-line);
	border-radius: var(--cco-radius);
	padding: 16px 18px;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}
.cbdco-thankyou .woocommerce-column h2 {
	font-size: 12px !important;
	margin: 0 0 10px !important;
	color: var(--cco-text-mute) !important;
}
.cbdco-thankyou .woocommerce-column address {
	font-style: normal;
	font-size: 13px;
	line-height: 1.6;
	color: var(--cco-text);
}
.cbdco-thankyou .woocommerce-customer-details--phone,
.cbdco-thankyou .woocommerce-customer-details--email {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--cco-text-mute);
}

/* CTA bas de page */
.cbdco-thankyou__cta {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 32px;
	flex-wrap: wrap;
}
.cbdco-thankyou__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 26px;
	border-radius: var(--cco-radius);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
	border: 1px solid transparent;
}
.cbdco-thankyou__btn--primary {
	background: var(--cco-gold-grad);
	color: var(--btn-fg);
	box-shadow: 0 4px 14px rgba(122,184,122,0.25);
}
.cbdco-thankyou__btn--primary:hover {
	color: #000;
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(122,184,122,0.45);
	filter: none;
}
.cbdco-thankyou__btn--secondary {
	background: transparent;
	color: var(--cco-text);
	border-color: var(--cco-line-2);
}
.cbdco-thankyou__btn--secondary:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* Variante échec paiement */
.cbdco-thankyou__failed {
	text-align: center;
	background: rgba(215,122,106,0.06);
	border: 1px solid rgba(215,122,106,0.35);
	border-radius: var(--cco-radius-card);
	padding: 40px 28px;
	margin-bottom: 32px;
}
.cbdco-thankyou__failed-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: rgba(215,122,106,0.15);
	color: var(--cco-error);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cbdco-thankyou__failed-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--cco-error);
}
.cbdco-thankyou__failed-text {
	font-size: 14px;
	color: var(--cco-text);
	margin: 0 0 20px;
}
.cbdco-thankyou__failed-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ===== Responsive thankyou =====
   - <= 1024px : padding latéral réduit + cards 2 colonnes max
   - <= 600px  : passage 1 colonne, cells de table compactées, CTA pleine largeur empilée
*/
@media (max-width: 1024px) {
	.cbdco-thankyou {
		padding: 28px 20px 0;
	}
	.cbdco-thankyou__hero { margin-bottom: 28px; }
	.cbdco-thankyou__hero-icon { width: 72px; height: 72px; margin-bottom: 14px; }
	.cbdco-thankyou__overview {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
		margin-bottom: 28px;
	}
	.cbdco-thankyou__section { padding: 20px 18px; }
	.cbdco-thankyou .woocommerce-table--order-details th,
	.cbdco-thankyou .woocommerce-table--order-details td {
		font-size: 13px !important;
	}
}
@media (max-width: 600px) {
	.cbdco-thankyou {
		padding: 20px 14px 0;
	}
	.cbdco-thankyou__hero { margin-bottom: 22px; }
	.cbdco-thankyou__hero-icon { width: 64px; height: 64px; margin-bottom: 12px; box-shadow: 0 8px 22px rgba(122,184,122,0.30); }
	.cbdco-thankyou__hero-icon svg { width: 34px; height: 34px; }
	.cbdco-thankyou__eyebrow { font-size: 11px; margin-bottom: 8px; }
	.cbdco-thankyou__title { font-size: 22px; margin-bottom: 12px; }
	.cbdco-thankyou__lead { font-size: 14px; }

	/* Cards récap : 2 colonnes (Numéro / Date) puis Total full width */
	.cbdco-thankyou__overview {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		margin-bottom: 22px;
	}
	.cbdco-thankyou__card { padding: 12px 14px; }
	.cbdco-thankyou__card-label { font-size: 10px; }
	.cbdco-thankyou__card-value { font-size: 14px; }
	.cbdco-thankyou__card--total {
		grid-column: 1 / -1;
	}
	.cbdco-thankyou__card--total .cbdco-thankyou__card-value { font-size: 18px; }

	.cbdco-thankyou__section { padding: 16px 14px; margin-bottom: 14px; }
	.cbdco-thankyou__section-title { font-size: 14px; margin-bottom: 14px; }

	/* Table commande : on autorise le scroll horizontal en dernier recours
	   plutôt que d'écraser les colonnes (qty/prix illisibles). */
	.cbdco-thankyou__order-table {
		margin: 0 -14px;
		padding: 0 14px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.cbdco-thankyou .woocommerce-table--order-details th,
	.cbdco-thankyou .woocommerce-table--order-details td {
		padding: 10px 0 !important;
		font-size: 12.5px !important;
	}
	.cbdco-thankyou .woocommerce-table--order-details thead th { font-size: 10px !important; }
	.cbdco-thankyou .woocommerce-table--order-details tfoot th,
	.cbdco-thankyou .woocommerce-table--order-details tfoot td {
		font-size: 13px !important;
		padding: 8px 0 !important;
	}
	.cbdco-thankyou .woocommerce-table--order-details tfoot tr:last-child th,
	.cbdco-thankyou .woocommerce-table--order-details tfoot tr:last-child td {
		font-size: 16px !important;
		padding-top: 12px !important;
	}

	/* Adresses déjà en 1 colonne via la règle 600px existante — on tasse juste la card */
	.cbdco-thankyou .woocommerce-column { padding: 14px 16px; }

	/* CTA : empilés pleine largeur */
	.cbdco-thankyou__cta {
		flex-direction: column;
		gap: 10px;
		margin-top: 24px;
	}
	.cbdco-thankyou__btn {
		width: 100%;
		min-height: 48px;
		padding: 0 20px;
		font-size: 13px;
	}

	/* Variante échec paiement */
	.cbdco-thankyou__failed { padding: 28px 18px; }
	.cbdco-thankyou__failed-title { font-size: 19px; }
	.cbdco-thankyou__failed-actions { flex-direction: column; }
	.cbdco-thankyou__failed-actions .cbdco-thankyou__btn { width: 100%; }
}

/* Masque la liste woocommerce-order-overview native (on a notre version en cards) */
body.woocommerce-order-received .woocommerce-order-overview { display: none; }
body.woocommerce-order-received .woocommerce-thankyou-order-received { display: none; }

/* ===== Chrome du site masqué SUR LE CHECKOUT (pas sur thankyou) =====
   :not(.woocommerce-order-received) car la page de confirmation doit garder
   le header / footer / chrome normal du site. */
body.woocommerce-checkout:not(.woocommerce-order-received) .topbar,
body.woocommerce-checkout:not(.woocommerce-order-received) .site-header,
body.woocommerce-checkout:not(.woocommerce-order-received) .breadcrumb,
body.woocommerce-checkout:not(.woocommerce-order-received) .footer-cta,
body.woocommerce-checkout:not(.woocommerce-order-received) .site-footer__inner,
body.woocommerce-checkout:not(.woocommerce-order-received) .page-hero { display: none !important; }
body.woocommerce-checkout:not(.woocommerce-order-received) .site-footer {
	background: transparent;
	padding: 0;
	margin-top: 0;
	/* Ici le footer n'est plus noir mais posé sur le fond crème : on remet les
	   tokens clairs, sinon les textes du footer (blancs par défaut) disparaissent. */
	--text: #1a1a1a;
	--text-dim: #5a5a5a;
	--text-mute: #8a8a8a;
	--line: #d8d0c4;
	--line-2: #c6bcae;
	color: var(--text);
}
body.woocommerce-checkout:not(.woocommerce-order-received) .site-footer a,
body.woocommerce-checkout:not(.woocommerce-order-received) .site-footer__legal-links a {
	color: var(--text-dim) !important;
}
body.woocommerce-checkout:not(.woocommerce-order-received) .site-footer__legal-links a:hover {
	color: var(--gold) !important;
}
/* Sur mobile, la 1px du footer-checkout (et de la thankyou) colle au bloc
   et fait moche. On la retire — checkout + order-received tous deux concernés. */
@media (max-width: 768px) {
	body.woocommerce-checkout .site-footer { border-top: 0; }
}
body.woocommerce-checkout:not(.woocommerce-order-received) .site-footer__bottom {
	max-width: var(--cco-container);
	margin: 0 auto;
	padding: 18px 24px;
	color: var(--cco-text);
	font-size: 12px;
}

/* ============================================================
   Résumé droit — bloc point relais sélectionné
   ------------------------------------------------------------
   Carte autonome sous la ligne "Livraison" : pin doré, nom du
   relais en or, adresse en text-mute, bouton "Choisir un autre"
   propre — pas du flat text qui flotte sous le total.
   ============================================================ */
.cbdco-review__row--parcel-extra {
	display: block !important;
	padding: 0 !important;
	margin: 8px 0 12px !important;
}
/* Filet de sécu : si le plugin n'a injecté ni `.laposteproexp-parcel-point`
   ni nom de point, on cache la card (la garde PHP devrait déjà gérer ça,
   mais on protège côté DOM si update_order_review repose le bloc). */
.cbdco-review__row--parcel-extra:not(:has(.laposteproexp-parcel-point)),
.cbdco-review__row--parcel-extra:has(.laposteproexp-parcel-point:empty) {
	display: none !important;
}
.cbdco-review__parcel-extra {
	display: grid;
	grid-template-columns: 22px 1fr;
	column-gap: 10px;
	row-gap: 4px;
	align-items: start;
	background: rgba(122,184,122, 0.06);
	border: 1px solid rgba(122,184,122, 0.22);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 12.5px;
	color: var(--cco-text-mute, #abcdbc);
	line-height: 1.4;
	position: relative;
}
/* Pin doré en pseudo-élément (col 1) */
.cbdco-review__parcel-extra::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	background: var(--cco-gold-grad);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>") no-repeat center / contain;
}
/* Ligne "Votre point relais : NOM" */
.cbdco-review__parcel-extra .laposteproexp-parcel-client-0,
.cbdco-review__parcel-extra .laposteproexp-parcel-client-subscription {
	grid-column: 2;
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--cco-text-mute, #abcdbc);
	line-height: 1.3;
}
/* Le nom à l'intérieur : passage à la ligne, en or, plus grand */
.cbdco-review__parcel-extra .laposteproexp-parcel-name-0,
.cbdco-review__parcel-extra .laposteproexp-parcel-name-subscription {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1px;
	text-transform: none;
	background: var(--cco-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	line-height: 1.25;
}
/* Adresse */
.cbdco-review__parcel-extra .laposteproexp-parcel-address-0,
.cbdco-review__parcel-extra .laposteproexp-parcel-address-subscription,
.cbdco-review__parcel-extra small[class*="laposteproexp-parcel-address-"] {
	grid-column: 2;
	display: block;
	font-size: 12px;
	color: var(--cco-text, #e8f5e9);
	font-weight: 400;
	line-height: 1.4;
}
/* Le plugin met parfois des <br/> entre les lignes — on les neutralise pour
   garder une grille propre. */
.cbdco-review__parcel-extra > br { display: none; }

/* Bouton "Choisir un autre" — petit lien discret en bas de la carte.
   Taille d'origine (compact outline doré) — pas d'uppercase. */
.cbdco-review__parcel-extra .laposteproexp-select-parcel {
	grid-column: 1 / -1 !important;
	justify-self: start !important;
	margin: 8px 0 0 !important;
	padding: 6px 10px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	background: transparent !important;
	color: var(--accent, var(--green)) !important;
	border: 1px solid rgba(122,184,122, 0.45) !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease !important;
	text-decoration: none !important;
	box-shadow: none !important;
	width: auto !important;
}
.cbdco-review__parcel-extra .laposteproexp-select-parcel:hover {
	background: var(--cco-gold-grad) !important;
	color: var(--btn-fg) !important;
	border-color: transparent !important;
	transform: translateY(-1px);
	text-decoration: none !important;
}

/* ============================================================
   La Poste — modale "Choisir un point relais"
   ------------------------------------------------------------
   Le plugin positionne sa modale en `position:absolute` + `top`
   calculé dynamiquement (JS) à partir de `pageYOffset + offsetHeight/2`.
   Calcul foireux quand la map MapLibre n'a pas encore son layout
   au moment de l'ouverture → la modale tombe en bas de la page.
   On force un position:fixed centré qui ignore le top inline du JS.
   ============================================================ */
/* La règle s'applique aussi quand le JS du plugin n'a pas encore ajouté la
   classe show (à l'ouverture initiale) — on cible l'élément racine direct. */
#laposteproexp-map {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%) !important;
	margin: 0 !important;
	max-height: 90vh;
	overflow: auto;
	z-index: 999999 !important;
}
@media (max-width: 767px) {
	#laposteproexp-map {
		width: 95% !important;
		max-height: 95vh;
	}
}
/* Backdrop sombre derrière la modale (le plugin n'en pose pas) */
body:has(#laposteproexp-map.laposteproexp-modal-show)::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 999998;
}

/* ============================================================
   Boutons La Poste — copie exacte du `.btn-gold` global du thème
   ------------------------------------------------------------
   Voir main.css → `.btn` + `.btn-gold` : gradient `--btn-bg`,
   couleur `--btn-fg`, font-display Inter, letter-spacing .08em,
   uppercase, border-radius 6px, transition translateY au hover.
   ============================================================ */
/* Boutons "gold" du plugin La Poste — uniquement dans la modale et la step
   d'expédition. Le bouton DANS la carte parcel-extra du résumé droit est
   stylé séparément en mode "discret outline" (cf. bloc résumé plus haut). */
#laposteproexp-map .laposteproexp-parcel-point-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 12px 22px !important;
	font-family: var(--font-display, 'Inter', system-ui, sans-serif) !important;
	letter-spacing: 0 !important;
	font-size: 13px !important;
	text-decoration: none !important;
	border: none !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	line-height: 1 !important;
	text-transform: none !important;
	background: var(--btn-bg, #2d4a2d) !important;
	color: var(--btn-fg, var(--btn-fg)) !important;
	font-weight: 600 !important;
	width: auto !important;
	min-width: 0 !important;
	box-shadow: none !important;
	transition: transform .15s ease, background .15s ease !important;
}
#laposteproexp-map .laposteproexp-parcel-point-button:hover {
	background: var(--btn-bg-hover, #3a5c3a) !important;
	color: var(--btn-fg, var(--btn-fg)) !important;
	text-decoration: none !important;
}
/* Bouton "Choisir un autre point relais" dans la liste shipping (col gauche)
   — taille d'origine gold compacte, pas d'uppercase. */
.cbdco-shipping__option .laposteproexp-select-parcel {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 10px 18px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	background: var(--btn-bg, #2d4a2d) !important;
	color: var(--btn-fg, var(--btn-fg)) !important;
	border: none !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	line-height: 1 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: transform .15s ease, background .15s ease !important;
	width: auto !important;
	min-width: 0 !important;
	margin-top: 10px;
}
.cbdco-shipping__option .laposteproexp-select-parcel:hover {
	background: var(--btn-bg-hover, #3a5c3a) !important;
	color: var(--btn-fg, var(--btn-fg)) !important;
	text-decoration: none !important;
}

/* Markers map : voir version inline dans inc/woocommerce.php (wp_footer).
   On laisse vide ici : MapLibre utilise `transform: translate3d(...)` sur
   l'élément du marker pour le positionner — toute règle `transform` ici
   casserait ce positionnement (les markers se collent en (0,0)). */

/* Liens du panneau (noms de point relais cliquables) : doré */
#laposteproexp-map a,
#laposteproexp-map .laposteproexp-parcel-point-title,
#laposteproexp-map .laposteproexp-parcel-point-title a {
	color: var(--gold, var(--green)) !important;
	text-decoration: none !important;
}
#laposteproexp-map a:hover {
	color: var(--gold-soft, var(--green)) !important;
	text-decoration: underline !important;
}

/* ============================================================
   Cagnotte (wc-loyalty-cashback) — version "carte de crédit" 💳
   ------------------------------------------------------------
   Mimétique d'une vraie carte bancaire : ratio 1.586:1, fond dégradé sombre +
   reflets dorés, puce graphique en haut à gauche, solde en gros en bas (à la
   place du numéro de carte), toggle slide en bas-droite (à la place du
   "VALID THRU"). Note légale en pied = "hors frais de port".
   ============================================================ */
/* Guest (non connecté) → on cache la cagnotte : pas logique de proposer
   d'utiliser un solde qui n'existe pas. WC ajoute body.logged-in quand l'user
   est connecté (cf. body_class()). */
body:not(.logged-in) .wc-loyalty-cashback-toggle-row,
body:not(.logged-in) .wc-loyalty-cashback-toggle,
body:not(.logged-in) .cbdco-checkout__section--cashback {
	display: none !important;
}
/* Section cagnotte dans la colonne gauche : structure exactement comme
   "Mode d'expédition" (header + body) — c'est une étape à part entière. */
/* === Anti-CLS : on réserve la hauteur des zones qui se remplissent en AJAX
   (shipping methods, payment, cashback, order_review). Sinon ces conteneurs
   sont vides au paint initial → quand WC injecte le contenu via updated_checkout,
   tout shift et le CLS explose. */
#cbdco-shipping-methods {
	min-height: 140px;
	contain: layout style;
}
#cbdco-payment-mount {
	min-height: 120px;
	contain: layout style;
}
#cbdco-cashback-mount {
	min-height: 170px;
	contain: layout style;
}
.cbdco-checkout__aside #order_review {
	min-height: 320px;
}
.cbdco-checkout__main {
	min-height: 800px; /* évite le shift du footer pendant le rendu progressif */
}

.cbdco-checkout__section--cashback #cbdco-cashback-mount {
	display: flex;
	justify-content: stretch;
	flex-direction: column;
	gap: 0;
}
/* Présentation "carte premium" pleine largeur dans le flux étape :
   - margin auto désactivés (la carte squatte tout le mount, pas alignée droite)
   - max-width relevée + padding plus généreux pour aérer
   - balance et titres montés en taille
   - on rajoute un mini-bandeau "INFO" en bas via un wrapper généré par moveBlocks
     (cf. injectCashbackHint) — sinon le ::after est déjà pris par la puce. */
#cbdco-cashback-mount .wc-loyalty-cashback-toggle {
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	padding: 0px 22px 16px !important;
	border-radius: 14px !important;
	box-shadow:
		0 14px 32px -10px rgba(0, 0, 0, 0.55),
		0 4px 10px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(245,240,232,0.08),
		inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important;
}
#cbdco-cashback-mount .wc-loyalty-cashback-toggle::after {
	top: 16px !important;
	right: 22px !important;
	width: 36px !important;
	height: 26px !important;
}
#cbdco-cashback-mount .wc-loyalty-cashback-toggle .cashback-toggle-header {
	margin-top: 32px !important;
	gap: 5px !important;
}
#cbdco-cashback-mount .wc-loyalty-cashback-toggle .cashback-toggle-title {
	font-size: 11px !important;
	letter-spacing: 0.28em !important;
}
#cbdco-cashback-mount .wc-loyalty-cashback-toggle .balance-amount,
#cbdco-cashback-mount .wc-loyalty-cashback-toggle .balance-amount * {
	font-size: 30px !important;
	letter-spacing: 0.08em !important;
}
#cbdco-cashback-mount .wc-loyalty-cashback-toggle .cashback-toggle-control {
	padding-top: 14px !important;
	justify-content: space-between !important;
}
#cbdco-cashback-mount .wc-loyalty-cashback-toggle .cashback-toggle-switch {
	font-size: 11px !important;
	letter-spacing: 0.20em !important;
	gap: 10px !important;
}
#cbdco-cashback-mount .wc-loyalty-cashback-toggle .toggle-slider {
	width: 48px !important;
	height: 26px !important;
}
#cbdco-cashback-mount .wc-loyalty-cashback-toggle .toggle-slider::before {
	width: 20px !important;
	height: 20px !important;
}
#cbdco-cashback-mount .wc-loyalty-cashback-toggle .cashback-toggle-input:checked + .toggle-slider::before {
	left: 25px !important;
}
#cbdco-cashback-mount .wc-loyalty-cashback-toggle .toggle-label::after {
	font-size: 11px !important;
}
#cbdco-cashback-mount .wc-loyalty-cashback-toggle .applied-amount {
	font-size: 12px !important;
}
#cbdco-cashback-mount .wc-loyalty-cashback-toggle .cashback-note {
	font-size: 10px !important;
	margin-top: 10px !important;
}
@media (max-width: 768px) {
	#cbdco-cashback-mount {
		min-height: 150px !important;
		margin-bottom: 12px;
		margin-top: -1px;
	}
	#cbdco-cashback-mount .wc-loyalty-cashback-toggle {
		padding: 0 14px 10px !important;
		border-radius: 12px !important;
	}
	#cbdco-cashback-mount .wc-loyalty-cashback-toggle::after {
		top: 12px !important;
		right: 14px !important;
		width: 28px !important;
		height: 20px !important;
	}
	#cbdco-cashback-mount .wc-loyalty-cashback-toggle .cashback-toggle-header {
		margin-top: 22px !important;
		gap: 2px !important;
	}
	#cbdco-cashback-mount .wc-loyalty-cashback-toggle .cashback-toggle-title {
		font-size: 9.5px !important;
		letter-spacing: 0.22em !important;
	}
	#cbdco-cashback-mount .wc-loyalty-cashback-toggle .balance-amount,
	#cbdco-cashback-mount .wc-loyalty-cashback-toggle .balance-amount * {
		font-size: 22px !important;
	}
	#cbdco-cashback-mount .wc-loyalty-cashback-toggle .cashback-toggle-control {
		padding-top: 8px !important;
	}
	#cbdco-cashback-mount .wc-loyalty-cashback-toggle .toggle-slider {
		width: 40px !important;
		height: 22px !important;
	}
	#cbdco-cashback-mount .wc-loyalty-cashback-toggle .toggle-slider::before {
		width: 16px !important;
		height: 16px !important;
	}
	#cbdco-cashback-mount .wc-loyalty-cashback-toggle .cashback-toggle-input:checked + .toggle-slider::before {
		left: 21px !important;
	}
	#cbdco-cashback-mount .wc-loyalty-cashback-toggle .cashback-note {
		font-size: 9px !important;
		margin-top: 6px !important;
	}
}
.wc-loyalty-cashback-toggle-row td.wc-loyalty-cashback-toggle-cell {
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
}
.wc-loyalty-cashback-toggle {
	position: relative !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	background:
		radial-gradient(circle at 18% 88%, rgba(122,184,122,0.30) 0%, transparent 38%),
		radial-gradient(circle at 92% 18%, rgba(45,74,45,0.22) 0%, transparent 42%),
		linear-gradient(135deg, #0a140b 0%, #102a12 50%, #173b1a 100%) !important;
	border: 1px solid rgba(122,184,122,0.28) !important;
	border-radius: 12px !important;
	padding: 12px 14px 10px !important;
	margin: 12px 0 !important;
	color: var(--text) !important;
	box-shadow:
		0 6px 18px rgba(0,0,0,0.30),
		inset 0 1px 0 rgba(245,240,232,0.064),
		inset 0 -1px 0 rgba(0,0,0,0.18) !important;
	font-family: var(--font-display, 'Inter', sans-serif) !important;
	min-height: 0 !important;
	aspect-ratio: auto;
	max-width: 280px;
	/* Aligné à droite dans la cellule du tableau totals (suit le bord droit
	   de la colonne récap commande, comme une carte qu'on glisserait dans
	   son emplacement). */
	margin-left: auto !important;
	margin-right: 0 !important;
}
/* Reflet diagonal type "hologramme" — pseudo léger */
.wc-loyalty-cashback-toggle::before {
	content: "" !important;
	position: absolute !important;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(245,240,232,0.04) 48%, rgba(245,240,232,0.08) 50%, rgba(245,240,232,0.04) 52%, transparent 70%) !important;
	pointer-events: none !important;
	z-index: 0 !important;
}
/* Puce graphique en haut à gauche (gradient doré + grille de lignes) */
.wc-loyalty-cashback-toggle::after {
	content: "" !important;
	position: absolute !important;
	top: 11px !important;
	right: 14px !important;
	width: 28px !important;
	height: 20px !important;
	/* Puce de carte bancaire : doré, comme sur une vraie carte. */
	background:
		linear-gradient(135deg, #e8c66a 0%, #c9a227 45%, #f2dd9a 60%, #b8901f 100%),
		repeating-linear-gradient(0deg, rgba(0,0,0,0.20) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(90deg, rgba(0,0,0,0.20) 0 1px, transparent 1px 3px) !important;
	background-blend-mode: normal, multiply, multiply !important;
	border-radius: 3px !important;
	box-shadow:
		inset 0 0 0 1px rgba(245,240,232,0.176),
		inset 0 -1px 2px rgba(0,0,0,0.25),
		0 1px 2px rgba(0,0,0,0.4) !important;
	z-index: 1 !important;
}
/* Header : titre "CAGNOTTE" minuscule en haut + balance en gros dessous */
.wc-loyalty-cashback-toggle .cashback-toggle-header {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 3px !important;
	margin: 0 !important;
	margin-top: 24px !important; /* place pour la puce */
}
.wc-loyalty-cashback-toggle .cashback-toggle-title {
	margin: 0 !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: var(--text-dim) !important;
	background: none !important;
	-webkit-text-fill-color: var(--text-dim) !important;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3) !important;
}
.wc-loyalty-cashback-toggle .balance-label {
	display: none !important;
}
.wc-loyalty-cashback-toggle .cashback-balance-info {
	display: block !important;
	margin: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
/* Solde — chiffres "façon embossé" comme un numéro de carte */
.wc-loyalty-cashback-toggle .balance-amount,
.wc-loyalty-cashback-toggle .balance-amount * {
	font-family: 'Courier New', ui-monospace, monospace !important;
	font-weight: 700 !important;
	font-size: 20px !important;
	letter-spacing: 0.06em !important;
	background: transparent !important;
	color: var(--text) !important;
	-webkit-text-fill-color: var(--text) !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 18px rgba(122,184,122,0.12) !important;
	line-height: 1.1 !important;
}
/* Toggle slide bas-droite — équivalent du "VALID THRU" sur une vraie carte */
.wc-loyalty-cashback-toggle .cashback-toggle-control {
	position: relative !important;
	z-index: 1 !important;
	margin: auto 0 0 !important;
	padding-top: 8px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
}
.wc-loyalty-cashback-toggle .cashback-toggle-switch {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	cursor: pointer !important;
	user-select: none !important;
	margin: 0 !important;
	font-size: 9.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--text-dim) !important;
}
.wc-loyalty-cashback-toggle .cashback-toggle-input {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 1px !important;
	height: 1px !important;
}
.wc-loyalty-cashback-toggle .toggle-slider {
	position: relative !important;
	display: inline-block !important;
	width: 40px !important;
	height: 22px !important;
	background: rgba(245,240,232,0.08) !important;
	border: 1px solid rgba(122,184,122, 0.35) !important;
	border-radius: 999px !important;
	transition: background .2s ease, border-color .2s ease !important;
	flex: 0 0 auto !important;
}
.wc-loyalty-cashback-toggle .toggle-slider::before {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 3px !important;
	transform: translateY(-50%) !important;
	width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	background: #e8f5e9 !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
	transition: left .2s ease, background .2s ease !important;
}
.wc-loyalty-cashback-toggle .cashback-toggle-input:checked + .toggle-slider {
	background: var(--cco-gold-grad) !important;
	border-color: transparent !important;
}
.wc-loyalty-cashback-toggle .cashback-toggle-input:checked + .toggle-slider::before {
	left: 21px !important;
	background: #f5f0e8 !important;
}
.wc-loyalty-cashback-toggle .cashback-toggle-input:focus-visible + .toggle-slider {
	outline: 2px solid var(--gold, #6dc774) !important;
	outline-offset: 2px !important;
}
.wc-loyalty-cashback-toggle .toggle-label {
	/* Petit label "USE" à côté du switch — comme un "VALID THRU" minimaliste */
	display: inline !important;
	font-size: 9.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--text-dim) !important;
	font-family: 'Inter', sans-serif !important;
	/* On override le texte via CSS — pas idéal mais on a pas accès au PHP du plugin */
	font-size: 0 !important;
}
.wc-loyalty-cashback-toggle .toggle-label::after {
	content: "ACTIVER" !important;
	font-size: 9.5px !important;
}
/* Bloc "Montant à utiliser" quand toggle ON — bandeau or sous le solde */
.wc-loyalty-cashback-toggle .cashback-applied-info {
	position: relative !important;
	z-index: 1 !important;
	margin: 6px 0 0 !important;
	padding: 4px 8px !important;
	background: rgba(122,184,122,0.18) !important;
	border: 1px solid rgba(122,184,122,0.35) !important;
	border-radius: 6px !important;
	display: inline-block !important;
	align-self: flex-start !important;
}
.wc-loyalty-cashback-toggle .applied-amount {
	margin: 0 !important;
	font-size: 10px !important;
	color: var(--text) !important;
	letter-spacing: 0.04em !important;
	display: inline-flex !important;
	align-items: baseline !important;
	gap: 6px !important;
}
/* Montant utilisé : même remède que .balance-amount — couleur unie. */
.wc-loyalty-cashback-toggle .applied-amount .woocommerce-Price-amount,
.wc-loyalty-cashback-toggle .applied-amount bdi,
.wc-loyalty-cashback-toggle .applied-amount * {
	font-weight: 700 !important;
	background: transparent !important;
	/* Blanc : le vert d'accent était illisible sur le fond vert nuit. */
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
}
/* Note de bas de bloc — fine print bas-gauche, comme la mention légale d'une carte */
.wc-loyalty-cashback-toggle .cashback-note {
	position: relative !important;
	margin: 6px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	z-index: 1 !important;
	font-size: 8.5px !important;
	color: var(--text-dim) !important;
	line-height: 1.3 !important;
	font-style: italic !important;
	letter-spacing: 0.04em !important;
}
/* Mobile : toggle passe sous le header pour éviter le crop. */
@media (max-width: 480px) {
	.wc-loyalty-cashback-toggle .cashback-toggle-header {
		grid-template-columns: 22px 1fr auto !important;
	}
	.wc-loyalty-cashback-toggle .cashback-toggle-control {
		grid-column: 2 / -1 !important;
		margin-top: 8px !important;
		justify-content: flex-end !important;
	}
	/* Carte cagnotte mobile : compacte, alignée à droite (cohérent desktop),
	   ratio relâché, paddings réduits. */
	.wc-loyalty-cashback-toggle {
		aspect-ratio: auto !important;
		min-height: 0 !important;
		padding: 11px 13px 9px !important;
		max-width: 240px !important;
		margin-left: auto !important;
		margin-right: 0 !important;
		border-radius: 11px !important;
	}
	.wc-loyalty-cashback-toggle::after {
		width: 26px !important;
		height: 18px !important;
		top: 10px !important;
		right: 13px !important;
		border-radius: 3px !important;
	}
	.wc-loyalty-cashback-toggle .cashback-toggle-header {
		margin-top: 22px !important;
		gap: 2px !important;
	}
	.wc-loyalty-cashback-toggle .cashback-toggle-title {
		font-size: 9px !important;
		letter-spacing: 0.2em !important;
	}
	.wc-loyalty-cashback-toggle .balance-amount,
	.wc-loyalty-cashback-toggle .balance-amount * {
		font-size: 18px !important;
	}
	.wc-loyalty-cashback-toggle .cashback-toggle-control {
		padding-top: 6px !important;
	}
	.wc-loyalty-cashback-toggle .cashback-note {
		font-size: 8px !important;
		margin-top: 5px !important;
	}
	.wc-loyalty-cashback-toggle .toggle-slider {
		width: 32px !important;
		height: 18px !important;
	}
	.wc-loyalty-cashback-toggle .toggle-slider::before {
		width: 12px !important;
		height: 12px !important;
		left: 3px !important;
	}
	.wc-loyalty-cashback-toggle .cashback-toggle-input:checked + .toggle-slider::before {
		left: 17px !important;
	}
}

/* ==================================================================
   Carte cashback du checkout — textes sur le vert nuit
   ------------------------------------------------------------------
   La carte a un fond vert très sombre : tous les libellés doivent
   être clairs, sinon on lit du gris anthracite sur du vert nuit.
   ================================================================== */
.wc-loyalty-cashback-toggle,
.wc-loyalty-cashback-toggle .cashback-toggle-title,
.wc-loyalty-cashback-toggle .cashback-note,
.wc-loyalty-cashback-toggle .cashback-toggle-switch,
.wc-loyalty-cashback-toggle .balance-amount,
.wc-loyalty-cashback-toggle .balance-amount *,
.wc-loyalty-cashback-toggle .cashback-balance-info,
.wc-loyalty-cashback-toggle .cashback-balance-info * {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}
.wc-loyalty-cashback-toggle .cashback-note {
	color: rgba(255, 255, 255, 0.72) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}
/* « activer », « Montant à utiliser », le montant et tout autre libellé
   injecté dans la carte : blanc, sinon ils héritent de l'encre du checkout. */
.wc-loyalty-cashback-toggle .toggle-label,
.wc-loyalty-cashback-toggle label,
.wc-loyalty-cashback-toggle span,
.wc-loyalty-cashback-toggle small,
.wc-loyalty-cashback-toggle strong,
.wc-loyalty-cashback-toggle p,
.wc-loyalty-cashback-toggle .cashback-amount-row,
.wc-loyalty-cashback-toggle .cashback-amount-row *,
/* « Montant à utiliser : 0.50€ » — le montant est un `.amount` WooCommerce,
   qui porte sa propre couleur : il faut le viser explicitement. */
.wc-loyalty-cashback-toggle .cashback-applied-info,
.wc-loyalty-cashback-toggle .cashback-applied-info *,
.wc-loyalty-cashback-toggle .applied-amount,
.wc-loyalty-cashback-toggle .applied-amount *,
.wc-loyalty-cashback-toggle .woocommerce-Price-amount,
.wc-loyalty-cashback-toggle .woocommerce-Price-amount *,
.wc-loyalty-cashback-toggle bdi,
.wc-loyalty-cashback-toggle bdi * {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	background: none !important;
}