/* ============================================================
   CBD Connection — 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:        #C9A961;
	--accent-2:      #b89548;
	/* 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: linear-gradient(135deg, #e2cb97 4%, #a88659 100%);
	/* Aligné sur les vars du site (main.css) pour que le fond du checkout
	   matche exactement celui du reste du site. */
	--cco-bg:        #100d0a; /* = var(--bg-0) du site */
	--cco-bg-2:      #14120f; /* = var(--bg-2) du site */
	--cco-card:      #181614; /* = var(--bg-1) du site */
	--cco-input-bg:  #181614; /* = var(--bg-1) */
	--cco-line:      #2a2620;
	--cco-line-2:    #333;
	--cco-text:      #ffffff;
	--cco-text-mute: #a0a0a0;
	--cco-text-dim:  #888;
	--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:      52px;
	--cco-button-h:     56px;
	--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: linear-gradient(135deg, #e2cb97 4%, #a88659 100%);
	border-bottom: 1px solid rgba(0,0,0,0.18);
	color: #1a1208;
	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, #1a1a1a);
	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 {
	max-height: 110px !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: 90px !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; }
}

/* ===== 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: 40px 24px 40px;
	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é et appliquer le dégradé. */
.cbdco-checkout__aside-title,
#order_review_heading.cbdco-checkout__aside-title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 10px 0 22px !important;
	padding: 0 !important;
	border: 0 !important;
	background: var(--cco-gold-grad) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	font-family: 'Inter', sans-serif !important;
}
#order_review_heading.cbdco-checkout__aside-title::after { display: none !important; content: none !important; }

/* ===== Mobile ===== */
@media (max-width: 1024px) {
	.cbdco-checkout__layout {
		grid-template-columns: 1fr;
		padding: 0;
		row-gap: 0;
	}
	.cbdco-checkout__main {
		padding: 18px;
		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: 16px 18px;
	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: #fff;
	font-size: 14px;
	font-weight: 500;
}
.cbdco-checkout__mobile-summary-toggle svg,
.cbdco-checkout__mobile-summary-label,
.cbdco-checkout__mobile-summary-chevron { color: #fff; stroke: #fff; }
.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: 18px;
	font-weight: 700;
	color: #fff;
}
.cbdco-checkout__mobile-summary-content {
	padding: 0 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.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 22px;
	user-select: none;
}
.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: #fff;
	stroke: #fff;
	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 22px 14px;
}
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). */
[data-cbdco-steps="on"] .cbdco-step .cbdco-checkout__section-title {
	display: none;
}
.cbdco-checkout__section-hint {
	font-size: 12px;
	color: var(--cco-text);
}
.cbdco-checkout__login-link {
	color: var(--accent);
	font-size: 14px;
	text-decoration: none;
}
.cbdco-checkout__login-link:hover { opacity: 0.85; }

/* ===== 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;
}
.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(201,169,97,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(201,169,97,0.15) !important;
}

/* Dropdown ouvert (rendu en root <body>) — thème dark complet */
.select2-container--default .select2-dropdown,
.select2-dropdown {
	background: var(--cco-card, #141414) !important;
	border: 1px solid var(--cco-line, #2a2a2a) !important;
	color: #ffffff !important;
}
.select2-container--default .select2-results,
.select2-results { color: #ffffff !important; }
.select2-container--default .select2-results__option,
.select2-results__option {
	color: #ffffff !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(201,169,97,0.12) !important;
	color: var(--accent, #C9A961) !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(201,169,97,0.18) !important;
	color: var(--accent, #C9A961) !important;
}
/* Champ recherche en haut du dropdown */
.select2-container--default .select2-search--dropdown,
.select2-search--dropdown {
	background: var(--cco-card, #141414) !important;
	padding: 8px;
}
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-search--dropdown .select2-search__field {
	background: var(--cco-input-bg, #1a1a1a) !important;
	border: 1px solid var(--cco-line, #2a2a2a) !important;
	color: #ffffff !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: 15px;
	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 #1a1208;
	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(201,169,97,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;
}
.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: #fff;
	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: #fff;
		background: transparent;
		border: 0;
		border-radius: 0;
		font-weight: 400;
		box-sizing: border-box;
	}
	/* Bouton "Choisir un point relais" sur mobile : aligné sur la même
	   colonne que le texte "Votre point relais :" + le label (52px depuis
	   bord gauche, radio 16+18 + gap interne = ~52). */
	body.woocommerce-checkout .cbdco-shipping__option .laposteproexp-select-parcel,
	.cbdco-shipping__option .laposteproexp-select-parcel {
		display: inline-flex !important;
		width: auto !important;
		max-width: max-content !important;
		min-width: 0 !important;
		margin: 4px 0 4px 52px !important;
		padding: 10px 16px !important;
		font-size: 12.5px !important;
		text-align: left !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;
	}
}
.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(201,169,97,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-pay-brand {
	display: inline-flex;
	width: 36px;
	height: 24px;
	border-radius: 3px;
	overflow: hidden;
	background: var(--cco-input-bg);
	border: 1px solid var(--cco-line);
	flex: 0 0 auto;
	line-height: 0;
	font-size: 0;
}
.cbdco-pay-brand svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* 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 #1a1208;
	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(201, 169, 97, 0.06);
	border: 1px solid #2a2a2a;
	border-radius: var(--cco-radius);
	padding: 14px 16px !important;
	margin-top: 3px;
	margin-bottom: 20px;
}
.cbdco-checkout__terms-label--strong {
	font-size: 14px !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 — apparence d'un lien doré */
.cbdco-checkout__terms-trigger {
	background: var(--cco-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
	text-decoration: none;
}
.cbdco-checkout__terms-trigger:hover { filter: brightness(1.1); }
.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(216,183,104,.05) 0%, transparent 40%),
		radial-gradient(circle at 100% 100%, rgba(160,124,44,.04) 0%, transparent 40%),
		linear-gradient(180deg, #ffffff 0%, #fffdf6 100%) !important;
	color: #1a1a1a !important;
	border: 1px solid rgba(216,183,104,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(255,255,255,.8) !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:
		radial-gradient(circle at 20% 50%, rgba(216,183,104,.25) 0%, transparent 50%),
		radial-gradient(circle at 80% 30%, rgba(160,124,44,.2) 0%, transparent 50%),
		linear-gradient(135deg, #0f0d08 0%, #2d2618 50%, #1a1308 100%) !important;
	background-size: 200% 200%, 200% 200%, 100% 100% !important;
	animation: cbdco-cart-head-shift 12s ease-in-out infinite;
	color: #fff !important;
	padding: 18px 22px !important;
	border-bottom: 1px solid rgba(216,183,104,.18) !important;
	position: relative;
	overflow: hidden;
}
.cbdco-terms-modal .sp-eta-modal__head::before,
.cbdco-terms-modal .sp-eta-modal__head::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(circle, rgba(216,183,104,.55) 1px, transparent 1.5px);
	background-size: 38px 38px;
	opacity: .3;
	animation: cbdco-cart-head-stars 8s linear infinite;
}
.cbdco-terms-modal .sp-eta-modal__head::after {
	background-size: 22px 22px;
	opacity: .12;
	animation-duration: 14s;
	animation-direction: reverse;
}
.cbdco-terms-modal .sp-eta-modal__head > * { position: relative; z-index: 1; }
.cbdco-terms-modal .sp-eta-modal__head h3 {
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: #faf3df !important;
	color: #faf3df !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(255,255,255,.08) !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,.12) !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: #fff !important; color: #fff !important; }
.cbdco-terms-modal .sp-eta-modal__close:hover {
	background: rgba(216,183,104,.2) !important;
	border-color: rgba(216,183,104,.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: #1a1208 !important;
	-webkit-text-fill-color: #1a1208 !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: #b8852b !important;
	-webkit-text-fill-color: #b8852b !important;
	text-decoration: underline;
}
.cbdco-terms-modal__body strong {
	color: #1a1208 !important;
	-webkit-text-fill-color: #1a1208 !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 h3 {
		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: 14px 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: #2a2a2a !important;
	background: rgba(201, 169, 97, 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: rgb(20 20 20) !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: #1a1208 !important;
	border: 1px solid transparent !important;
	border-radius: var(--cco-radius) !important;
	padding: 0 24px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !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(201,169,97,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(201,169,97,0.45);
}
.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: 56px 1fr auto;
	gap: 12px;
	align-items: center;
}
/* Divider entre items réguliers et cadeaux offerts */
.cbdco-review__gifts-divider {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 0 4px;
	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(216,183,104,0.32), transparent);
}
.cbdco-review__gifts-divider span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(216,183,104,0.85);
	white-space: nowrap;
}
.cbdco-review__thumb {
	position: relative;
	width: 60px;
	height: 60px;
}
.cbdco-review__thumb-img,
.cbdco-review__thumb img {
	width: 60px !important;
	height: 60px !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: -6px;
	right: -6px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: var(--cco-text-mute);
	color: #0a0a0a;
	font-size: 12px;
	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;
}

/* 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, #c9a961);
}
.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, #9b9586);
	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.06em;
	text-transform: uppercase;
	cursor: pointer;
	min-height: 0;
	color: var(--cco-gold, #c9a961);
	background: transparent;
	transition: color .15s ease, background .15s ease, transform .15s ease;
}
.cbdco-review__coupon-submit:hover {
	background: rgba(216,183,104,.15);
}
.cbdco-review__coupon-submit:disabled { opacity: 0.6; cursor: wait; }
.cbdco-review__coupon-notice-mount { margin: 0; }
.cbdco-review__coupon-notice {
	margin: 8px 0 10px;
	font-size: 12.5px;
	line-height: 1.4;
	border-radius: var(--cco-radius);
	padding: 9px 12px;
	display: flex;
	align-items: flex-start;
	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: 1px;
}
.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: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
	margin: -2px -2px 0 0;
	opacity: .6;
	transition: opacity .15s ease;
}
.cbdco-review__coupon-notice-close:hover { opacity: 1; }
.cbdco-review__coupon-notice.is-success {
	background: rgba(201,169,97,0.10);
	color: var(--accent);
	border: 1px solid rgba(201,169,97,0.35);
}
.cbdco-review__coupon-notice.is-success .cbdco-review__coupon-notice-icon {
	background: var(--accent); color: #1a1208;
}
.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: #1a1208;
}
.cbdco-review__coupon-notice.is-info {
	background: rgba(255,255,255,0.04);
	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: #1a1208;
}

/* Totaux */
.cbdco-review__totals {
	margin: -4px 0 0;
	padding: 10px 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; }
.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;
}
.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(201,169,97,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: -16px 0 18px;
	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: linear-gradient(135deg, #e2cb97 4%, #a88659 100%);
	border-bottom: 1px solid rgba(0,0,0,0.18);
	color: #1a1208;
	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: #1a1208;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 32px rgba(201,169,97,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: #fff !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: #fff !important;
	-webkit-text-fill-color: #fff;
}
.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: #1a1208;
	box-shadow: 0 4px 14px rgba(201,169,97,0.25);
}
.cbdco-thankyou__btn--primary:hover {
	color: #000;
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(201,169,97,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(201,169,97,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;
	border-top: 1px solid var(--cco-line);
	padding: 0;
	margin-top: 0;
}
/* 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(201, 169, 97, 0.06);
	border: 1px solid rgba(201, 169, 97, 0.22);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 12.5px;
	color: var(--cco-text-mute, #c8c1b0);
	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, #c8c1b0);
	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, #f5f1e8);
	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. */
.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-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.4px !important;
	text-transform: uppercase !important;
	background: transparent !important;
	color: var(--accent, #c9a36b) !important;
	border: 1px solid rgba(201, 169, 97, 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: #1a1208 !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,
.cbdco-shipping__option .laposteproexp-select-parcel {
	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: uppercase !important;
	background: var(--btn-bg, linear-gradient(135deg, #e2cb97 4%, #a88659 100%)) !important;
	color: var(--btn-fg, #1a1208) !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,
.cbdco-shipping__option .laposteproexp-select-parcel:hover {
	transform: translateY(-1px);
	background: var(--btn-bg-hover, linear-gradient(135deg, #ecd5a0 4%, #b8945f 100%)) !important;
	color: var(--btn-fg, #1a1208) !important;
	text-decoration: none !important;
}
.cbdco-shipping__option .laposteproexp-select-parcel {
	margin-top: 10px;
	padding: 10px 18px !important;
	font-size: 12px !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, #d4a84b) !important;
	text-decoration: none !important;
}
#laposteproexp-map a:hover {
	color: var(--gold-soft, #e2cb97) !important;
	text-decoration: underline !important;
}

/* ============================================================
   Cagnotte (wc-loyalty-cashback) — bloc dédié dans le résumé droit.
   ------------------------------------------------------------
   Layout :
   ┌────────────────────────────────────┐
   │ 💰 MA CAGNOTTE          1,60 €  ▢  │  ← header : icône + label + solde + toggle
   ├────────────────────────────────────┤
   │ Note : déduit du total hors port  │  ← note discrète
   └────────────────────────────────────┘
   ============================================================ */
.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;
	background: linear-gradient(135deg, rgba(201, 169, 97, 0.08), rgba(201, 169, 97, 0.02)) !important;
	border: 1px solid rgba(201, 169, 97, 0.22) !important;
	border-radius: 10px !important;
	padding: 14px 16px !important;
	margin: 12px 0 !important;
	color: var(--cco-text, #f5f1e8) !important;
	box-shadow: none !important;
}
/* Header en flex : icône + titre à gauche, montant collé à droite. */
.wc-loyalty-cashback-toggle .cashback-toggle-header {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
}
.wc-loyalty-cashback-toggle .cashback-toggle-header::before {
	content: "" !important;
	flex: 0 0 auto !important;
	width: 18px !important;
	height: 18px !important;
	background: var(--cco-gold-grad) !important;
	-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 12V7H5a2 2 0 0 1 0-4h14v4'/><path d='M3 5v14a2 2 0 0 0 2 2h16v-5'/><path d='M18 12a2 2 0 0 0 0 4h4v-4Z'/></svg>") no-repeat center / contain !important;
	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 12V7H5a2 2 0 0 1 0-4h14v4'/><path d='M3 5v14a2 2 0 0 0 2 2h16v-5'/><path d='M18 12a2 2 0 0 0 0 4h4v-4Z'/></svg>") no-repeat center / contain !important;
}
.wc-loyalty-cashback-toggle .cashback-toggle-title {
	flex: 1 1 auto !important;
}
.wc-loyalty-cashback-toggle .cashback-balance-info {
	margin-left: auto !important;
	flex: 0 0 auto !important;
}
.wc-loyalty-cashback-toggle .cashback-toggle-title {
	margin: 0 !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.6px !important;
	text-transform: uppercase !important;
	color: var(--cco-text, #f5f1e8) !important;
	background: none !important;
	-webkit-text-fill-color: var(--cco-text, #f5f1e8) !important;
}
.wc-loyalty-cashback-toggle .cashback-balance-info {
	display: inline-flex !important;
	align-items: baseline !important;
	gap: 0 !important;
	color: var(--cco-text, #f5f1e8) !important;
	font-size: 15px !important;
	margin: 0 12px 0 0 !important;
	/* Battre le fond blanc + bordure bleue du plugin (loyalty-frontend.css:636) */
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.wc-loyalty-cashback-toggle .balance-label {
	display: none !important; /* "Solde disponible :" inutile, le contexte suffit */
}
/* Montant solde : couleur or unie sur tous les wrappers (wc_price() rend
   span > bdi > span — `background-clip: text` se propage mal entre eux et
   produit un pavé doré opaque sur certains navigateurs). */
.wc-loyalty-cashback-toggle .balance-amount,
.wc-loyalty-cashback-toggle .balance-amount * {
	font-weight: 700 !important;
	font-size: 16px !important;
	background: transparent !important;
	color: var(--gold, #c9a36b) !important;
	-webkit-text-fill-color: var(--gold, #c9a36b) !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
}
/* Le toggle prend la 4e colonne */
.wc-loyalty-cashback-toggle .cashback-toggle-control {
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
}
.wc-loyalty-cashback-toggle .cashback-toggle-switch {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0 !important;
	cursor: pointer !important;
	user-select: none !important;
	margin: 0 !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(255,255,255,0.10) !important;
	border: 1px solid rgba(201, 169, 97, 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: #f5f1e8 !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: #1a1208 !important;
}
.wc-loyalty-cashback-toggle .cashback-toggle-input:focus-visible + .toggle-slider {
	outline: 2px solid var(--gold, #c9a36b) !important;
	outline-offset: 2px !important;
}
.wc-loyalty-cashback-toggle .toggle-label {
	display: none !important; /* texte du toggle redondant avec le titre du bloc */
}
/* Bloc "Montant à utiliser" quand toggle ON — petite ligne sous le header */
.wc-loyalty-cashback-toggle .cashback-applied-info {
	margin: 10px 0 0 !important;
	padding: 8px 10px !important;
	background: rgba(201, 169, 97, 0.10) !important;
	border: 1px solid rgba(201, 169, 97, 0.25) !important;
	border-radius: 8px !important;
}
.wc-loyalty-cashback-toggle .applied-amount {
	margin: 0 !important;
	font-size: 12.5px !important;
	color: var(--cco-text, #f5f1e8) !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	gap: 8px !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;
	color: var(--gold, #c9a36b) !important;
	-webkit-text-fill-color: var(--gold, #c9a36b) !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
}
/* Note de bas de bloc — discrète */
.wc-loyalty-cashback-toggle .cashback-note {
	margin: 10px 0 0 !important;
	padding-top: 10px !important;
	border-top: 1px dashed rgba(201, 169, 97, 0.18) !important;
	font-size: 11.5px !important;
	color: var(--cco-text-mute, #c8c1b0) !important;
	line-height: 1.45 !important;
	font-style: normal !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;
	}
}