/*
 * Base du thème UKU — mobile-first strict.
 * Toutes les couleurs/polices viennent des custom properties générées depuis
 * brand.json (inc/brand-tokens.php). Aucune valeur de marque en dur ici,
 * sauf les neutres purement structurels (rgba noirs/blancs de bordures).
 */

* { box-sizing: border-box; }

/*
 * Bug confirmé (audit live, boutons icône de la carte produit) : une <svg>
 * dimensionnée seulement par ses attributs HTML width/height (uku_icon(),
 * pas de width/height en CSS) peut s'écraser à 0px de large dans certains
 * conteneurs flex — Chrome ne retient pas toujours l'attribut comme taille
 * automatique minimale, et flex-shrink:1 (par défaut) l'écrase alors à 0.
 * Une icône n'a jamais de raison de rétrécir : flex-shrink:0 en défense
 * globale, plutôt que corriger site par site chaque bouton icône touché.
 */
svg { flex-shrink: 0; }

/*
 * Zoom auto au focus sur mobile (Safari/Chrome) : déclenché par tout champ
 * de formulaire dont le font-size calculé est < 16px. Plusieurs champs
 * scopés (mesures sur-mesure, recherche, newsletter, checkout…) fixent un
 * font-size plus petit avec une sélectivité CSS plus forte qu'une règle
 * générique sur "input" — d'où le !important : plancher volontairement non
 * contournable, un champ n'a jamais de raison légitime de passer sous ce
 * seuil (cf. bug "le clavier zoome sur mobile").
 */
input, textarea, select { font-size: max(16px, 1em) !important; }

/*
 * Design system v3 — tokens structurels (non liés à la marque, donc définis
 * ici et pas dans brand.json) : échelle d'espacement unique, easing et durées
 * partagés par toutes les micro-interactions, points de rupture documentés.
 * Breakpoints effectifs des media queries : 768 (tablet), 1024 (desktop),
 * 1440 (wide) — les variables servent de référence pour le JS et les snippets.
 */
:root {
	--uku-space-xs: 8px;
	--uku-space-sm: 12px;
	--uku-space-md: 16px;
	--uku-space-lg: 24px;
	--uku-space-xl: 32px;
	--uku-space-2xl: 48px;
	--uku-space-3xl: 64px;
	--uku-space-4xl: 96px;
	--uku-ease: cubic-bezier(0.33, 1, 0.68, 1);
	--uku-dur-fast: 200ms;
	--uku-dur: 300ms;
	--uku-dur-slow: 450ms;
	--uku-bp-desktop: 1024px;
	--uku-bp-wide: 1440px;
	/* Noir de référence pour tout état interactif (hover/focus) qui doit
	   rester lisible sur fond clair sans dépendre de --uku-color-accent
	   (réglé en blanc sur ce site) ni du rose Elementor par défaut. Valeur
	   fixée par le client (#120e0a) — à réutiliser systématiquement plutôt
	   que d'inventer un nouveau noir à chaque correctif. */
	--uku-color-ink: #120e0a;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	font-family: var(--uku-font-body);
	color: var(--uku-color-text-on-light, var(--uku-color-primary));
	background: var(--uku-color-bg);
	margin: 0;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

.uku-no-scroll { overflow: hidden; }

/* Lightbox guide des tailles — composant générique injecté une fois par
   interactions.js, réutilisé par le Quick View et la fiche produit (tout
   <img class="uku-lightbox-trigger">). */
.uku-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: rgba(0, 0, 0, 0.85);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms var(--uku-ease, ease);
}

.uku-lightbox.is-open { opacity: 1; pointer-events: auto; }

.uku-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.uku-lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.uku-lightbox__close:hover { background: rgba(255, 255, 255, 0.22); }

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

a,
button {
	transition: color var(--uku-dur) var(--uku-ease), background-color var(--uku-dur) var(--uku-ease), border-color var(--uku-dur) var(--uku-ease), opacity var(--uku-dur) var(--uku-ease), transform var(--uku-dur) var(--uku-ease);
}

/* Garde-fou global anti-rose Elementor (#cc3366) — v2, complet.
   Root cause trouvée en direct (janvier) : hello-elementor/assets/css/reset.css
   déclare `button:hover, button:focus, [type="submit"]:hover, ... { background-
   color: #cc3366; color: #fff; }` — et `border: 1px solid #cc3366` par défaut.
   Le garde-fou précédent ne neutralisait que `color`, jamais `background-color`
   ni `border-color` : un `<button>` stylé uniquement via une classe simple
   (ex. `.uku-pdp__gallery-tapzone { background: none; }`) PERD contre
   `button:hover` au survol/tap, car un sélecteur pseudo-classe (élément +
   pseudo-classe = specificité 0-1-1) bat une simple classe (0-1-0) — c'est ce
   qui faisait apparaître un rectangle rose plein au survol/tap des zones de
   la galerie, des pastilles couleur, des pilules de taille, du menu… partout
   où un bouton n'a pas SA PROPRE règle :hover/:focus (auquel cas
   classe+pseudo-classe, 0-2-0, continue de gagner normalement — rien de
   spécifique n'est cassé par ce filet de sécurité). Cette feuille est
   TOUJOURS imprimée en dernier (priorité 100, cf. functions.php). Rien de la
   marque ne doit plus jamais retomber sur ce rose, nulle part, dans aucun état. */
a,
a:hover,
a:focus,
a:active,
button,
button:hover,
button:focus,
button:active,
[type="button"],
[type="button"]:hover,
[type="button"]:focus,
[type="button"]:active,
[type="submit"],
[type="submit"]:hover,
[type="submit"]:focus,
[type="submit"]:active {
	color: inherit;
	background-color: transparent;
	border-color: transparent;
}

::selection {
	background: var(--uku-color-accent);
	color: var(--uku-color-primary);
}

:focus-visible {
	outline: 2px solid var(--uku-color-accent);
	outline-offset: 2px;
}

/* Scrollbar fine, accent or — signature discrète des sites luxe */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--uku-color-accent); border-radius: 3px; }
* { scrollbar-width: thin; scrollbar-color: var(--uku-color-accent) transparent; }

/* ===== UTILITAIRES (réutilisables dans Elementor via classes CSS) ===== */

.uku-section-dark {
	background: var(--uku-color-primary);
	color: var(--uku-color-text-on-dark, #fff);
}

.uku-section-warm {
	background: var(--uku-color-bg-warm, #FBF8F0);
	color: var(--uku-color-text-on-light, #1a1a1a);
}

.uku-text-accent { color: var(--uku-color-accent); }

.uku-text-uppercase {
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

.uku-wordmark {
	font-family: var(--uku-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.3em;
}

/* Boutons — utilisables aussi bien dans les templates PHP que dans du HTML Elementor */
.uku-btn {
	display: inline-block;
	padding: 14px 36px;
	font-family: var(--uku-font-body);
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	border: 1px solid var(--uku-color-primary);
	background: var(--uku-color-primary);
	color: var(--uku-color-text-on-dark, #fff);
}

.uku-btn:hover {
	background: transparent;
	color: var(--uku-color-primary);
}

.uku-btn--outline {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}

.uku-btn--outline:hover {
	background: var(--uku-color-accent);
	border-color: var(--uku-color-accent);
	color: var(--uku-color-primary);
}

.uku-btn--gold {
	background: transparent;
	border-color: var(--uku-color-accent);
	color: var(--uku-color-accent);
}

.uku-btn--gold:hover {
	background: var(--uku-color-accent);
	color: var(--uku-color-primary);
}

/* Marquee — bandeau défilant infini (hero, annonces) */
.uku-marquee {
	overflow: hidden;
	white-space: nowrap;
	display: flex;
}

.uku-marquee__track {
	display: inline-block;
	white-space: nowrap;
	padding-right: 2em;
	animation: uku-marquee-scroll 25s linear infinite;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

@keyframes uku-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* Mots rotatifs du hero — chaque enfant .uku-rotating__word apparaît à tour
   de rôle (classe is-active posée par interactions.js) */
.uku-rotating {
	position: relative;
	display: block;
	min-height: 1.2em;
}

.uku-rotating__word {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateY(0.4em);
	transition: opacity 0.5s ease, transform 0.5s ease;
	will-change: opacity, transform;
}

.uku-rotating__word.is-active {
	opacity: 1;
	transform: translateY(0);
}

/* Fade-in au scroll — interactions.js pose is-visible via IntersectionObserver */
.uku-fade-in {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.uku-fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.uku-fade-in { opacity: 1; transform: none; transition: none; }
	.uku-marquee__track { animation: none; }
	html { scroll-behavior: auto; }
}

/* Texte vertical décoratif (desktop uniquement) */
.uku-vertical-text {
	display: none;
}

@media (min-width: 1280px) {
	.uku-vertical-text {
		display: block;
		position: fixed;
		right: 18px;
		top: 50%;
		transform: translateY(-50%);
		writing-mode: vertical-rl;
		font-size: 10px;
		letter-spacing: 0.4em;
		text-transform: uppercase;
		color: var(--uku-color-muted, #888);
		z-index: 50;
		pointer-events: none;
	}
}

/* ===== HEADER ===== */

.uku-header {
	background: var(--uku-header-bg, var(--uku-color-bg));
	color: var(--uku-header-text, var(--uku-color-text-on-light, #1a1a1a));
}

.uku-header--dark {
	background: var(--uku-header-bg, var(--uku-color-primary));
	color: var(--uku-header-text, var(--uku-color-text-on-dark, #fff));
}

.uku-announcement-bar {
	background: var(--uku-announcement-bg, var(--uku-color-accent, #c9a870));
	color: var(--uku-announcement-text, var(--uku-color-text-on-dark, #fff));
	overflow: hidden;
	max-height: 44px;
	transition: max-height var(--uku-dur, 0.3s) var(--uku-ease), padding var(--uku-dur, 0.3s) var(--uku-ease);
}

.uku-announcement-bar.is-dismissed {
	max-height: 0;
}

.uku-announcement-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--uku-space-sm);
	padding: var(--uku-space-xs) var(--uku-space-xl);
	font-size: 13px;
	letter-spacing: 0.02em;
	text-align: center;
}

.uku-announcement-bar__logo {
	height: 22px;
	width: auto;
	display: block;
	flex-shrink: 0;
}

.uku-announcement-bar__text {
	color: inherit;
	text-decoration: none;
}

a.uku-announcement-bar__text:hover {
	text-decoration: underline;
}

.uku-announcement-bar__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	padding: 2px;
	opacity: 0.8;
}

.uku-announcement-bar__close:hover {
	opacity: 1;
}

.uku-header--sticky {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 0.3s ease;
}

.uku-header.is-scrolled {
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.uku-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 16px;
	min-height: 62px;
}

/* Disposition par défaut ("logo_left") : logo à gauche, menu vraiment centré
   au milieu de la barre (pas juste collé au logo), icônes à droite — 3
   colonnes égales pour un centrage réel du menu, indépendant de la largeur
   du logo ou des icônes. */
@media (min-width: 1024px) {
	.uku-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		padding: 0 40px;
		min-height: 70px;
	}
}

.uku-header__logo {
	font-family: var(--uku-font-heading);
	text-decoration: none;
	color: inherit;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	white-space: nowrap;
	margin-left: var(--uku-logo-offset-x, 0px);
}

@media (min-width: 1024px) {
	.uku-header__logo {
		font-size: 20px;
		grid-column: 1;
		justify-self: start;
	}
}

.uku-header__burger {
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	display: flex;
	padding: 4px;
}

.uku-header__nav {
	display: none;
}

/* Un seul point de bascule mobile/desktop (1024px) pour le burger et le nav
   horizontal — les deux breakpoints doivent rester synchronisés, sinon les
   deux s'affichent en même temps dans la zone intermédiaire. */
@media (min-width: 1024px) {
	.uku-header__nav {
		display: block;
		grid-column: 2;
		justify-self: center;
	}
	.uku-header__icons {
		grid-column: 3;
		justify-self: end;
	}
	.uku-header__burger {
		display: none;
	}
}

.uku-header__nav ul {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
}

.uku-header__nav a {
	font-family: var(--uku-font-body);
	text-decoration: none;
	color: inherit;
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding-bottom: 6px;
	border-bottom: 1px solid transparent;
	/* Un item flex peut sinon rétrécir sous sa largeur de contenu et
	   couper le texte en deux lignes ("BEST SELLERS" → "BEST"/"SELLERS")
	   dès que le menu est un peu long — confirmé en direct sur Thiane. */
	white-space: nowrap;
}

.uku-header__nav a:hover {
	color: var(--uku-color-accent);
}

.uku-header__nav .current-menu-item > a,
.uku-header__nav .current_page_item > a {
	border-bottom-color: var(--uku-color-accent);
	color: var(--uku-color-accent);
}

.uku-header__icons {
	display: flex;
	gap: 14px;
	align-items: center;
}

@media (min-width: 1024px) {
	.uku-header__icons { gap: 20px; }
}

.uku-header__icons button,
.uku-header__icons a {
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	display: flex;
	position: relative;
	padding: 0;
}

.uku-header__icons button:hover,
.uku-header__icons a:hover {
	color: var(--uku-color-accent);
}

.uku-header__custom-icon {
	display: flex;
	align-items: center;
	gap: 6px;
}

.uku-header__custom-icon img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.uku-header__custom-icon-label {
	font-size: 12px;
	letter-spacing: 0.04em;
}

.uku-header__currency-select {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: inherit;
	font-size: 11px;
	letter-spacing: 0.08em;
	padding: 4px 6px;
	cursor: pointer;
	border-radius: 2px;
}

.uku-header:not(.uku-header--dark) .uku-header__currency-select {
	border-color: rgba(0, 0, 0, 0.2);
}

.uku-header__currency-select option {
	color: #1a1a1a;
	background: #fff;
}

.uku-header__cart-trigger { position: relative; }

.uku-header__cart-count {
	position: absolute;
	top: -7px;
	right: -9px;
	background: var(--uku-color-accent);
	color: var(--uku-color-primary);
	font-size: 10px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

@keyframes uku-bump-anim {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.4); }
	100% { transform: scale(1); }
}

.uku-bump { animation: uku-bump-anim 0.3s ease; }

/* ===== OFF-CANVAS ===== */

.uku-offcanvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 300px;
	max-width: 85vw;
	height: 100%;
	/* Réglable dans Header & Footer → Menu mobile → Couleurs ; sinon reprend
	   le fond/texte de la variante claire ou sombre comme avant. */
	background: var(--uku-offcanvas-bg, var(--uku-color-bg));
	color: var(--uku-offcanvas-text, inherit);
	z-index: 200;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.uku-offcanvas--dark {
	background: var(--uku-offcanvas-bg, var(--uku-color-primary));
	color: var(--uku-offcanvas-text, var(--uku-color-text-on-dark, #fff));
}

.uku-offcanvas.is-open { transform: translateX(0); }

.uku-offcanvas__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
	border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.uku-offcanvas__logo {
	font-family: var(--uku-font-heading);
	text-decoration: none;
	color: inherit;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.3em;
}

.uku-offcanvas__close {
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
}

.uku-offcanvas__tabs {
	display: flex;
	gap: 4px;
	padding: 0 20px;
	border-bottom: 1px solid rgba(128, 128, 128, 0.16);
}

.uku-offcanvas__tab {
	flex: 1;
	background: none;
	border: none;
	cursor: pointer;
	/* Neutralise le halo tactile par défaut du navigateur (gris ou teinté
	   selon la plateforme) qui pouvait apparaître au tap sur mobile — jamais
	   une couleur de marque, donc jamais géré par nos tokens. */
	-webkit-tap-highlight-color: transparent;
	color: inherit;
	opacity: 0.5;
	padding: 16px 8px;
	font-family: var(--uku-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.uku-offcanvas__tab:active { opacity: 0.75; }

/* Hover explicite plutôt qu'hérité : sans ça un <button> retombe sur le rose
   Elementor (#cc3366) — cf. garde-fou global plus haut, réaffirmé ici avec
   le noir de référence de la marque (--uku-color-ink) pour un contraste net
   au survol, y compris sur les variantes de panneau claires ET sombres. */
.uku-offcanvas__tab:hover { color: var(--uku-color-ink); opacity: 0.85; }

.uku-offcanvas__tab.is-active {
	opacity: 1;
	font-weight: 600;
	/* currentColor plutôt que --uku-color-accent : trouvé en direct que
	   l'accent de la marque est réglé sur #ffffff (blanc) — pensé pour un
	   fond sombre, il rendrait ce trait invisible sur le panneau clair. Le
	   texte hérite déjà la bonne couleur selon la variante (claire/sombre),
	   donc s'aligner dessus reste correct dans les deux cas. */
	border-bottom-color: currentColor;
}

.uku-offcanvas__panel { display: none; }

.uku-offcanvas__panel.is-active {
	display: block;
	animation: uku-offcanvas-panel-in 0.2s ease;
}

@keyframes uku-offcanvas-panel-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.uku-offcanvas__panel.is-active { animation: none; }
}

.uku-offcanvas__empty {
	padding: 32px 24px;
	font-size: 13px;
	opacity: 0.5;
}

/* Bas de menu (devise + compte) — poussé tout en bas du panneau quand le
   contenu est plus court que l'écran, grâce à display:flex sur .uku-offcanvas. */
.uku-offcanvas__footer {
	margin-top: auto;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-top: 1px solid rgba(128, 128, 128, 0.16);
}

.uku-offcanvas__footer .uku-header__currency-select {
	border-color: rgba(128, 128, 128, 0.35);
}

.uku-offcanvas__account {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.uku-offcanvas__account svg { width: 18px; height: 18px; }

.uku-offcanvas__nav ul {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}

.uku-offcanvas__nav li { border-bottom: 1px solid rgba(128, 128, 128, 0.1); }

.uku-offcanvas__nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 13px 20px;
	text-decoration: none;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
	font-family: var(--uku-font-body);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-left: 2px solid transparent;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Chevron de fin de ligne — pure CSS, affordance "on peut naviguer ici"
   plutôt qu'une simple ligne de texte plate. */
.uku-offcanvas__nav a::after {
	content: '';
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-style: solid;
	border-color: currentColor;
	border-width: 0 1.5px 1.5px 0;
	opacity: 0.3;
	transform: rotate(-45deg);
}

/* Idem : hover explicite pour ne pas retomber sur le rose Elementor. */
.uku-offcanvas__nav a:hover { background-color: rgba(128, 128, 128, 0.05); color: var(--uku-color-ink); }

/* Variante sombre du panneau (--uku-offcanvas--dark, fond --uku-color-primary,
   texte blanc par défaut) : le noir de référence --uku-color-ink y serait
   quasi invisible (texte noir sur fond sombre) — même piège que l'accent
   blanc trouvé plus haut sur le trait actif, inversé. On garde le blanc au
   survol dans ce contexte précis uniquement. */
.uku-offcanvas--dark .uku-offcanvas__tab:hover,
.uku-offcanvas--dark .uku-offcanvas__nav a:hover { color: #fff; }

/* Page courante : jamais la couleur seule — une graisse plus forte et une
   barre latérale, l'un ET l'autre signalent l'état. currentColor plutôt que
   --uku-color-accent : trouvé en direct que l'accent de la marque est réglé
   sur #ffffff (probablement pensé pour un fond sombre ailleurs), ce qui
   rendait "ACCUEIL" quasi invisible ici — un texte blanc sur fond blanc. */
.uku-offcanvas__nav .current-menu-item > a {
	font-weight: 600;
	border-left-color: currentColor;
	padding-left: 18px;
}

.uku-offcanvas-backdrop,
.uku-cart-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 199;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.uku-offcanvas-backdrop.is-visible,
.uku-cart-drawer-backdrop.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ===== FOOTER ===== */

.uku-footer {
	margin-top: 64px;
	background: var(--uku-color-bg);
}

.uku-footer--dark {
	background: var(--uku-color-primary);
	color: var(--uku-color-text-on-dark, #fff);
}

.uku-footer__newsletter {
	text-align: center;
	padding: 48px 24px;
	border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.uku-footer__newsletter-title {
	font-family: var(--uku-font-heading);
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin: 0 0 8px;
}

.uku-footer__newsletter-text {
	font-size: 13px;
	color: var(--uku-color-muted, #999);
	max-width: 420px;
	margin: 0 auto 20px;
	line-height: 1.6;
}

.uku-footer__newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 420px;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.uku-footer__newsletter-form { flex-direction: row; }
}

.uku-footer__newsletter-input {
	flex: 1;
	padding: 13px 16px;
	background: transparent;
	border: 1px solid rgba(128, 128, 128, 0.35);
	color: inherit;
	font-size: 13px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.uku-footer__newsletter-input:focus {
	outline: none;
	border-color: var(--uku-color-accent);
	box-shadow: 0 0 0 1px var(--uku-color-accent);
}

.uku-footer__newsletter-btn {
	padding: 13px 28px;
	background: var(--uku-color-accent);
	border: 1px solid var(--uku-color-accent);
	color: var(--uku-color-primary);
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	cursor: pointer;
}

.uku-footer__newsletter-btn:hover {
	background: transparent;
	color: var(--uku-color-accent);
}

.uku-footer__identity {
	text-align: center;
	padding: 48px 24px 8px;
}

.uku-footer__brand {
	font-family: var(--uku-font-heading);
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 0.35em;
	margin: 0 0 6px;
}

.uku-footer__location {
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--uku-color-accent);
	margin: 0 0 14px;
}

.uku-footer__tagline {
	font-size: 13px;
	color: var(--uku-color-muted, #999);
	max-width: 520px;
	margin: 0 auto;
	line-height: 1.7;
}

.uku-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 40px 24px;
	max-width: 1080px;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.uku-footer__inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
	.uku-footer__col { flex: 1; }
}

.uku-footer__heading {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--uku-color-accent);
	margin: 0 0 14px;
}

.uku-footer__contact-list,
.uku-footer__payment-methods,
.uku-footer__nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.uku-footer__contact-list li,
.uku-footer__payment-methods li {
	font-size: 13px;
	line-height: 2.2;
	color: inherit;
}

.uku-footer__contact-list a,
.uku-footer__nav a {
	font-size: 13px;
	text-decoration: none;
	color: inherit;
	line-height: 2.2;
}

.uku-footer__contact-list a:hover,
.uku-footer__nav a:hover {
	color: var(--uku-color-accent);
}

.uku-footer__legal {
	border-top: 1px solid rgba(128, 128, 128, 0.2);
	padding: 18px 24px;
	text-align: center;
}

.uku-footer__legal p {
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--uku-color-muted, #999);
	margin: 0;
}

/* ===== WIDGET WHATSAPP ===== */

.uku-whatsapp {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 180;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.uku-whatsapp:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

@media (min-width: 1024px) {
	.uku-whatsapp { right: 24px; bottom: 24px; }
}

/* ===== TOAST ===== */

.uku-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 20px);
	background: var(--uku-color-primary);
	color: var(--uku-color-text-on-dark, #fff);
	padding: 12px 24px;
	font-size: 13px;
	letter-spacing: 0.05em;
	z-index: 400;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	border-left: 2px solid var(--uku-color-accent);
	max-width: calc(100vw - 32px);
}

.uku-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ===== HERO (variantes PHP, conservées pour les archives/landings) ===== */

.uku-hero { overflow: hidden; }

.uku-hero__eyebrow {
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--uku-color-accent, #c9a870);
	margin: 0 0 12px;
}

.uku-hero__title {
	font-family: var(--uku-font-heading);
	font-size: clamp(28px, 6vw, 64px);
	margin: 0 0 16px;
	line-height: 1.1;
}

.uku-hero__subtitle {
	font-size: 15px;
	color: var(--uku-color-muted, #555);
	margin: 0 0 24px;
	letter-spacing: 0.05em;
}

.uku-hero__cta {
	display: inline-block;
	padding: 13px 32px;
	background: var(--uku-color-primary);
	color: var(--uku-color-text-on-dark, #fff);
	text-decoration: none;
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	border: 1px solid var(--uku-color-primary);
}

.uku-hero__cta:hover {
	background: transparent;
	color: var(--uku-color-primary);
}

.uku-hero picture { display: block; }

.uku-hero--split-image { display: flex; flex-direction: column; }
.uku-hero--split-image .uku-hero__content { padding: 40px 24px; }
.uku-hero--split-image .uku-hero__media img { width: 100%; height: auto; display: block; }

@media (min-width: 768px) {
	.uku-hero--split-image { flex-direction: row; align-items: center; min-height: 60vh; }
	.uku-hero--split-image .uku-hero__content { flex: 1; padding: 60px; }
	.uku-hero--split-image .uku-hero__media { flex: 1; }
	.uku-hero--split-image .uku-hero__media img { height: 100%; object-fit: cover; }
}

.uku-hero--fullscreen-video {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--uku-color-primary);
}

.uku-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.uku-hero__overlay {
	position: relative;
	z-index: 1;
	text-align: center;
	color: #fff;
	padding: 40px 24px;
}

.uku-hero__overlay .uku-hero__title { color: #fff; }
.uku-hero__overlay .uku-hero__cta { background: transparent; border-color: var(--uku-color-accent); color: var(--uku-color-accent); }
.uku-hero__overlay .uku-hero__cta:hover { background: var(--uku-color-accent); color: var(--uku-color-primary); }

.uku-hero--text-first { display: flex; flex-direction: column; }
.uku-hero--text-first .uku-hero__content { padding: 40px 24px; text-align: center; }
.uku-hero--text-first .uku-hero__media img { width: 100%; height: auto; display: block; }

@media (min-width: 768px) {
	.uku-hero--text-first .uku-hero__content { padding: 80px 60px; }
}

.uku-hero--carousel { position: relative; }
.uku-hero__track { position: relative; min-height: 50vh; overflow: hidden; }

/* Transition "fondu" (défaut) : diapositives empilées, opacité seule.
   La durée est fixée en JS (transitionDuration inline) selon le réglage
   admin — la déclaration ci-dessous ne pose que la propriété/l'easing. */
.uku-hero__slide { position: absolute; inset: 0; opacity: 0; transition-property: opacity; transition-timing-function: ease; }
.uku-hero__slide.is-active { opacity: 1; position: relative; }
.uku-hero__slide img { width: 100%; height: 50vh; object-fit: cover; display: block; }

@media (min-width: 768px) {
	.uku-hero__slide img { height: 70vh; }
}

/* Transition "glissement" : le track devient une rangée flex que le JS
   translate horizontalement (transform: translateX), plus d'empilement absolu. */
.uku-hero--carousel[data-transition="slide"] .uku-hero__track {
	display: flex;
	transition-property: transform;
	transition-timing-function: ease;
}

.uku-hero--carousel[data-transition="slide"] .uku-hero__slide {
	position: relative;
	inset: auto;
	opacity: 1;
	flex: 0 0 100%;
	min-width: 100%;
}

.uku-hero__slide-content { position: absolute; bottom: 40px; left: 24px; color: #fff; }
.uku-hero__dots { position: relative; z-index: 2; display: flex; justify-content: center; gap: 8px; padding: 16px; }

.uku-hero__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
	border: none;
	cursor: pointer;
	padding: 0;
}

.uku-hero__dot.is-active { background: var(--uku-color-accent); }

.uku-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	cursor: pointer;
	transition: background-color var(--uku-dur, 0.2s) var(--uku-ease);
}

.uku-hero__arrow:hover { background: rgba(0, 0, 0, 0.55); }
.uku-hero__arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.uku-hero__arrow--prev { left: 16px; }
.uku-hero__arrow--next { right: 16px; }

@media (min-width: 1024px) {
	.uku-hero__arrow { width: 48px; height: 48px; }
	.uku-hero__arrow--prev { left: 32px; }
	.uku-hero__arrow--next { right: 32px; }
}

/* ===== HERO — Image de fond avec superposition (moderne) ===== */

.uku-hero--image-overlay {
	position: relative;
	height: var(--uku-hero-h-mobile, 60vh);
	display: flex;
	overflow: hidden;
	background: var(--uku-color-primary);
}

@media (min-width: 768px) {
	.uku-hero--image-overlay { height: var(--uku-hero-h-tablet, 70vh); }
}

@media (min-width: 1024px) {
	.uku-hero--image-overlay { height: var(--uku-hero-h-desktop, 80vh); }
}

.uku-hero__bg { position: absolute; inset: 0; }
.uku-hero__bg picture { display: block; width: 100%; height: 100%; }
.uku-hero__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--uku-hero-focal, center);
}

.uku-hero__scrim { position: absolute; inset: 0; z-index: 1; }

.uku-hero__overlay {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	padding: 32px 24px;
}

.uku-hero__overlay-inner { max-width: 560px; }

/* Position du contenu — grille 9 points (Hero → Disposition) */
.uku-hero__overlay--pos-top-left      { align-items: flex-start; justify-content: flex-start; }
.uku-hero__overlay--pos-top-center    { align-items: flex-start; justify-content: center; }
.uku-hero__overlay--pos-top-right     { align-items: flex-start; justify-content: flex-end; }
.uku-hero__overlay--pos-center-left   { align-items: center; justify-content: flex-start; }
.uku-hero__overlay--pos-center        { align-items: center; justify-content: center; }
.uku-hero__overlay--pos-center-right  { align-items: center; justify-content: flex-end; }
.uku-hero__overlay--pos-bottom-left   { align-items: flex-end; justify-content: flex-start; }
.uku-hero__overlay--pos-bottom-center { align-items: flex-end; justify-content: center; }
.uku-hero__overlay--pos-bottom-right  { align-items: flex-end; justify-content: flex-end; }

.uku-hero__overlay--align-left .uku-hero__overlay-inner { text-align: left; }
.uku-hero__overlay--align-center .uku-hero__overlay-inner { text-align: center; }
.uku-hero__overlay--align-right .uku-hero__overlay-inner { text-align: right; }

.uku-hero__overlay .uku-hero__title,
.uku-hero__overlay .uku-hero__eyebrow,
.uku-hero__overlay .uku-hero__subtitle { color: #fff; }

.uku-hero__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.uku-hero__overlay--align-center .uku-hero__buttons { justify-content: center; }
.uku-hero__overlay--align-right .uku-hero__buttons { justify-content: flex-end; }

.uku-hero__overlay .uku-hero__cta { color: var(--uku-color-text-on-dark, #fff); }

.uku-hero__cta--secondary {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

.uku-hero__cta--secondary:hover {
	background: #fff;
	color: var(--uku-color-primary);
}

@media (min-width: 768px) {
	.uku-hero__overlay { padding: 60px; }
}

/* ===== CATALOG ===== */

.uku-catalog {
	padding: 24px 16px 48px;
	max-width: 1440px;
	margin: 0 auto;
}

@media (min-width: 1024px) {
	.uku-catalog { padding: 40px 40px 64px; }
}

.uku-catalog__header {
	text-align: center;
	margin-bottom: 24px;
}

.uku-catalog__title {
	font-family: var(--uku-font-heading);
	font-size: clamp(22px, 4vw, 34px);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin: 0;
}

.uku-catalog__filterbar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 28px;
}

@media (min-width: 768px) {
	.uku-catalog__filterbar {
		flex-direction: row;
		justify-content: center;
		gap: 16px;
	}
}

.uku-catalog__filter-select {
	padding: 12px 16px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: var(--uku-color-bg);
	color: inherit;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	min-width: 0;
}

@media (min-width: 768px) {
	.uku-catalog__filter-select { min-width: 260px; }
}

.uku-catalog__filter-select:focus {
	outline: none;
	border-color: var(--uku-color-accent);
}

/* Grid — 2 colonnes mobile, 3 tablette, 4 desktop (spec Meya) */
.uku-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (min-width: 768px) {
	.uku-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media (min-width: 1024px) {
	.uku-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

.uku-list { display: flex; flex-direction: column; gap: 16px; }
.uku-list .uku-pcard { display: flex; gap: 16px; }
.uku-list .uku-pcard__media { width: 120px; flex-shrink: 0; aspect-ratio: 3/4; }

@media (min-width: 768px) {
	.uku-list .uku-pcard__media { width: 200px; }
}

.uku-masonry { columns: 2; column-gap: 12px; }
.uku-masonry .uku-pcard { break-inside: avoid; margin-bottom: 12px; }
.uku-masonry .uku-pcard__media { aspect-ratio: auto; }

@media (min-width: 768px) {
	.uku-masonry { columns: 3; }
}

@media (min-width: 1024px) {
	.uku-masonry { columns: 4; }
}

.uku-catalog__empty {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--uku-color-muted, #999);
	padding: 48px 0;
}

.uku-catalog__other-results {
	max-width: 640px;
	margin: 48px auto 0;
	padding-top: 32px;
	border-top: 1px solid rgba(128, 128, 128, 0.16);
}

.uku-catalog__other-title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--uku-color-muted, #999);
	margin: 0 0 16px;
}

.uku-catalog__other-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.uku-catalog__other-list a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.uku-catalog__more {
	text-align: center;
	margin-top: 40px;
}

.uku-catalog__more-btn.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* Pagination WooCommerce par défaut, si affichée */
.woocommerce-pagination { text-align: center; margin-top: 32px; }
.woocommerce-pagination ul { list-style: none; display: inline-flex; gap: 8px; padding: 0; }
.woocommerce-pagination a,
.woocommerce-pagination span {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	text-decoration: none;
	color: inherit;
	font-size: 13px;
}
.woocommerce-pagination .current { background: var(--uku-color-primary); color: #fff; border-color: var(--uku-color-primary); }

/*
 * ===== SECTION CATALOGUE FILTRABLE (.uku-cfg) =====
 * Dropdown "Collections" (recherche + liste) + rubriques + grille + "Voir
 * plus" — [uku_products show_filters="yes"] / widget Elementor "Grille
 * produits UKU". Enveloppe seule variable : mobile = feuille modale +
 * rubriques cachées derrière une icône ; tablette/desktop (dès 768px) =
 * panneau ancré + rubriques en puces visibles (2 colonnes sous 1024px, 3
 * colonnes au-delà). Bascule par media query CSS, jamais par JS — même DOM,
 * un seul jeu d'écouteurs. Couleurs/rayons/durées repris tels quels du
 * modèle validé (aperçu Thiane v3) : jetons dédiés (--cfg-*), volontairement
 * indépendants de --uku-color-* pour ne jamais dériver si ces derniers
 * changent ailleurs sur le site.
 */

.uku-cfg {
	--cfg-ink: #120e0a;
	--cfg-ink-soft: #4a4436;
	--cfg-ink-faint: #8a8168;
	--cfg-cream-2: #efe7d0;
	--cfg-paper: #fffdf8;
	--cfg-clay: #ac5730;
	--cfg-clay-tint: #f2e2cf;
	--cfg-line: #ddd0ab;
	--cfg-line-soft: #e9ddbc;
	--cfg-scrim: rgba(18, 14, 10, 0.5);
	--cfg-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	padding: 24px 16px 48px;
}

@media (min-width: 1024px) {
	.uku-cfg { padding: 40px 40px 64px; }
}

/* ---- filter bar: two DOM shapes, one shown per breakpoint ---- */
.uku-cfg__bar--wide { display: none; }
.uku-cfg__bar--mobile { display: flex; gap: 8px; }
.uku-cfg__bar--mobile .uku-cfg__trigger { flex: 1; }

@media (min-width: 768px) {
	.uku-cfg__bar--mobile { display: none; }
	.uku-cfg__bar--wide { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; position: relative; }
}

/* ---- trigger pill (shared mobile/wide) ---- */
.uku-cfg__trigger {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--cfg-paper); background: var(--cfg-ink);
	border: 1px solid var(--cfg-ink); border-radius: 999px;
	padding: 13px 18px; cursor: pointer; white-space: nowrap;
	min-height: 44px; font-family: inherit;
}
.uku-cfg__trigger--inline { flex: 0 0 auto; padding: 12px 18px; }
.uku-cfg__trigger svg { width: 10px; height: 10px; stroke: var(--cfg-paper); fill: none; stroke-width: 2; flex: 0 0 auto; transition: transform .18s var(--cfg-ease-out); }
.uku-cfg__trigger:focus-visible { outline: 2px solid var(--cfg-clay); outline-offset: 3px; }
.uku-cfg__dropdown.is-open .uku-cfg__trigger svg { transform: rotate(180deg); }

/* ---- tag icon trigger (mobile only — rubriques cachées derrière l'icône) ---- */
.uku-cfg__tag-trigger {
	position: relative; flex: 0 0 auto;
	width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
	background: var(--cfg-paper); border: 1px solid #d6d6d6; border-radius: 50%; cursor: pointer;
}
.uku-cfg__tag-trigger svg { width: 16px; height: 16px; stroke: var(--cfg-ink); fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.uku-cfg__tag-trigger:focus-visible { outline: 2px solid var(--cfg-clay); outline-offset: 2px; }
.uku-cfg__tag-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--cfg-clay); display: none; }
.uku-cfg__tag-trigger.has-active .uku-cfg__tag-dot { display: block; }
.uku-cfg__tag-trigger.has-active { border-color: var(--cfg-ink); }

/* ---- panel content (search + list), reused by the mobile sheet AND the wide anchored panel ---- */
.uku-cfg__panel-search { padding: 10px; border-bottom: 1px solid var(--cfg-line-soft); }
.uku-cfg__panel-search-inner { display: flex; align-items: center; gap: 8px; background: var(--cfg-cream-2); border-radius: 999px; padding: 9px 13px; }
.uku-cfg__panel-search-inner svg { width: 13px; height: 13px; stroke: var(--cfg-ink-faint); fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.uku-cfg__panel-search-inner input { border: none; background: transparent; outline: none; font-size: 13px; color: var(--cfg-ink); width: 100%; font-family: inherit; }
.uku-cfg__panel-search-inner input::placeholder { color: var(--cfg-ink-faint); }

.uku-cfg__panel-list { padding: 6px; max-height: 300px; overflow-y: auto; }
.uku-cfg__panel-row {
	width: 100%; break-inside: avoid;
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	font-size: 13.5px; color: var(--cfg-ink); background: transparent; border: none; border-radius: 8px;
	padding: 10px; cursor: pointer; text-align: left; font-family: inherit;
}
.uku-cfg__panel-row:hover { background: var(--cfg-cream-2); }
.uku-cfg__panel-row.is-all { font-weight: 600; }
.uku-cfg__sheet .uku-cfg__panel-row.is-all { border-bottom: 1px solid var(--cfg-line-soft); border-radius: 0; margin-bottom: 4px; padding-bottom: 12px; }
/* Chiffre + coche regroupés dans un seul bloc flex-end : sans ce conteneur,
   3 enfants flex (nom, chiffre, coche) sous justify-content:space-between se
   répartissent l'espace restant entre eux — le chiffre "flotte" au lieu
   d'être collé au bord droit. */
.uku-cfg__row-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.uku-cfg__row-count { font-size: 11px; color: var(--cfg-ink-faint); font-variant-numeric: tabular-nums; }
.uku-cfg__row-check { width: 13px; height: 13px; stroke: var(--cfg-clay); fill: none; stroke-width: 2.2; opacity: 0; flex: 0 0 auto; }
.uku-cfg__panel-row.is-selected .uku-cfg__row-check { opacity: 1; }
.uku-cfg__panel-row.is-selected .uku-cfg__row-count { display: none; }
.uku-cfg__panel-empty { padding: 20px 12px; text-align: center; font-size: 12.5px; color: var(--cfg-ink-faint); display: none; }

/* ---- MOBILE: bottom sheet ---- */
.uku-cfg__sheet-scrim {
	/* 1350/1351 : au-dessus de tout le reste du site (recherche 1200, toast
	   1100, popup/comparateur 1300 — cf. échelle z-index de ce fichier), pour
	   qu'une feuille modale ouverte ne soit jamais recouverte. */
	position: fixed; inset: 0; background: var(--cfg-scrim); opacity: 0; pointer-events: none;
	transition: opacity .28s var(--cfg-ease-out); z-index: 1350;
}
.uku-cfg__sheet-scrim.is-visible { opacity: 1; pointer-events: auto; }
.uku-cfg__sheet {
	position: fixed; left: 0; right: 0; bottom: 0;
	background: var(--cfg-paper); border-radius: 20px 20px 0 0;
	box-shadow: 0 -8px 30px rgba(18, 14, 10, 0.2);
	transform: translateY(100%); transition: transform .34s var(--cfg-ease-out);
	z-index: 1351; max-height: 82vh; display: flex; flex-direction: column;
}
.uku-cfg__sheet.is-open { transform: translateY(0); }
.uku-cfg__sheet-handle { width: 36px; height: 4px; border-radius: 999px; background: var(--cfg-line); margin: 10px auto 4px; flex: 0 0 auto; }
.uku-cfg__sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 4px; flex: 0 0 auto; }
.uku-cfg__sheet-header h3 { font-family: var(--uku-font-heading, inherit); font-weight: 400; font-size: 17px; margin: 0; }
.uku-cfg__sheet-close {
	width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
	background: var(--cfg-cream-2); border: none; border-radius: 50%; cursor: pointer;
}
.uku-cfg__sheet-close svg { width: 11px; height: 11px; stroke: var(--cfg-ink); stroke-width: 2; }
.uku-cfg__sheet-body { overflow-y: auto; padding-bottom: 18px; }
.uku-cfg__tag-list { padding: 6px 16px 18px; display: flex; flex-direction: column; gap: 4px; }

@media (prefers-reduced-motion: reduce) {
	.uku-cfg__sheet, .uku-cfg__sheet-scrim, .uku-cfg__trigger svg { transition: none; }
}

@media (min-width: 768px) {
	.uku-cfg__sheet, .uku-cfg__sheet-scrim { display: none; }
}

/* ---- TABLET/DESKTOP (≥768px): anchored panel, 2 cols under 1024px / 3 cols beyond ---- */
@media (min-width: 768px) {
	.uku-cfg__dropdown { position: relative; }
	.uku-cfg__panel {
		display: none;
		position: absolute; top: calc(100% + 10px); left: 0;
		background: var(--cfg-paper); border: 1px solid var(--cfg-line); border-radius: 14px;
		box-shadow: 0 16px 36px rgba(18, 14, 10, 0.16);
		z-index: 20; overflow: hidden; width: 440px;
		opacity: 0; transform: translateY(-6px); transition: opacity .18s var(--cfg-ease-out), transform .18s var(--cfg-ease-out);
	}
	.uku-cfg__panel .uku-cfg__panel-list { columns: 2; column-gap: 4px; }
	.uku-cfg__dropdown.is-open .uku-cfg__panel { display: block; }
	.uku-cfg__dropdown.is-open .uku-cfg__panel.is-shown { opacity: 1; transform: translateY(0); }
	.uku-cfg__inline-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
}

@media (min-width: 1024px) {
	.uku-cfg__panel { width: 620px; }
	.uku-cfg__panel .uku-cfg__panel-list { columns: 3; }
}

/* ---- tag chip (shared: mobile sheet list + wide inline chips) ---- */
.uku-cfg__tag-chip {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12.5px; font-weight: 500; color: var(--cfg-ink-soft);
	background: var(--cfg-paper); border: 1px solid var(--cfg-line); border-radius: 999px;
	padding: 10px 15px; cursor: pointer; min-height: 44px; font-family: inherit;
}
/* Rond radio, pas case à cocher : une seule rubrique active à la fois
   (cocher l'une décoche l'autre), le carré à coche laissait croire à tort
   à un multi-sélection. */
.uku-cfg__tag-box { width: 14px; height: 14px; border-radius: 50%; border: 1.4px solid var(--cfg-line); position: relative; flex: 0 0 auto; }
.uku-cfg__tag-radio-dot { position: absolute; inset: 3px; border-radius: 50%; background: var(--cfg-paper); opacity: 0; transition: opacity .12s var(--cfg-ease-out); }
.uku-cfg__tag-chip.is-active { background: var(--cfg-ink); border-color: var(--cfg-ink); color: var(--cfg-paper); }
.uku-cfg__tag-chip.is-active .uku-cfg__tag-box { border-color: var(--cfg-paper); }
.uku-cfg__tag-chip.is-active .uku-cfg__tag-radio-dot { opacity: 1; }
.uku-cfg__tag-chip:focus-visible { outline: 2px solid var(--cfg-clay); outline-offset: 2px; }

/* ---- active filter chips + result count (shared) ---- */
.uku-cfg__active { display: none; align-items: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.uku-cfg__active.is-visible { display: flex; }
/* Noir/blanc plutôt que la teinte argile : lecture plus sobre pour un
   badge "filtre actif". Bouton fermer : `all: unset` avant de re-poser
   exactement ce qu'il faut — un bouton hérite sinon des styles par défaut
   du navigateur (line-height, padding d'agent utilisateur) qui déforment
   un cercle 18×18 en ovale, comme observé en live. */
.uku-cfg__active-chip {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em;
	color: var(--cfg-paper); background: var(--cfg-ink);
	border-radius: 999px; padding: 6px 7px 6px 14px;
}
.uku-cfg__active-chip button {
	all: unset;
	box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255, 253, 248, 0.16); cursor: pointer; flex: 0 0 auto;
	transition: background-color .15s var(--cfg-ease-out);
}
.uku-cfg__active-chip button:hover { background: rgba(255, 253, 248, 0.3); }
.uku-cfg__active-chip button:focus-visible { outline: 2px solid var(--cfg-paper); outline-offset: 2px; }
.uku-cfg__active-chip button svg { width: 8px; height: 8px; stroke: var(--cfg-paper); stroke-width: 2; pointer-events: none; }
.uku-cfg__clear-all { font-size: 11.5px; color: var(--cfg-ink-faint); text-decoration: underline; text-underline-offset: 2px; background: none; border: none; cursor: pointer; padding: 5px 2px; font-family: inherit; }
.uku-cfg__count { font-size: 12px; color: var(--cfg-ink-faint); margin: 16px 0 10px; font-variant-numeric: tabular-nums; }

/* grille produits : réutilise .uku-grid (déjà 2/3/4 colonnes à 768/1024px —
   identique aux seuils validés, aucune règle à dupliquer). */

/* ---- "Voir plus" ---- */
.uku-cfg__more-wrap { display: flex; justify-content: center; margin-top: 22px; }
.uku-cfg__more-btn {
	font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--cfg-ink); background: transparent; border: 1px solid var(--cfg-ink); border-radius: 999px;
	padding: 12px 30px; cursor: pointer; min-height: 44px; font-family: inherit;
	transition: background-color .15s var(--cfg-ease-out), color .15s var(--cfg-ease-out);
}
.uku-cfg__more-btn:hover { background: var(--cfg-ink); color: var(--cfg-paper); }
.uku-cfg__more-btn:focus-visible { outline: 2px solid var(--cfg-clay); outline-offset: 2px; }
.uku-cfg__more-btn.is-loading { opacity: 0.55; pointer-events: none; }

/* ===== PDP ===== */

.uku-pdp { padding: 16px 16px 0; max-width: 1200px; margin: 0 auto; }

@media (min-width: 768px) {
	.uku-pdp {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 48px;
		padding: 40px;
	}
}

/* Priorité "above the fold" mobile (iPhone standard ~390×844) : photo,
   titre/prix, pastilles, ligne paiement, sélecteur de taille, tailles
   disponibles et bouton doivent tenir sans scroller. Le bouton lui-même
   sort du flux (fixe en bas d'écran, cf. .uku-pdp__add-row plus bas) : ça
   libère l'essentiel de la marge nécessaire, le reste n'est qu'un resserrage
   des marges verticales existantes. */
@media (max-width: 767px) {
	.uku-pdp__title { margin: 0 0 4px; }
	.uku-pdp__desc-short { margin: 0 0 10px; }
	.uku-pdp__divider { margin: 14px 0; }
	.uku-pdp__size-tabs { margin-bottom: 10px; }
	.uku-pdp__size-panel { margin-bottom: 10px; }

	/* Photo collée au header : plus de libellé collection ni de marge
	   au-dessus sur mobile (demande explicite — la photo doit toucher le
	   header directement, pas de bandeau texte entre les deux). */
	.uku-pdp { padding-top: 0; }
	.uku-pdp__collection { display: none; }
}

/* minmax(0, 1fr) ci-dessus ET min-width:0 ici : sans les deux, la colonne
   galerie s'effondre à quasi rien (bug CSS Grid connu) — les frames de la
   galerie sont toutes en position:absolute (voir plus bas), donc elles ne
   contribuent plus à la largeur intrinsèque de leurs parents ; le
   min-width:auto par défaut d'un item de grille force alors la piste "1fr"
   à se réduire à son contenu en flux normal (quasi rien ici : les boutons
   flottants), pas à sa vraie part de l'espace disponible. Constaté en
   direct sur le site (galerie réduite à ~76px de large). */
.uku-pdp__gallery { min-width: 0; }

/* Photo entière, jamais recadrée (object-fit: contain sur un ratio réel, pas
   un 4:5 arbitraire qui aurait coupé le bas du vêtement — enseignement direct
   des itérations de maquette sur le Quick View). */
.uku-pdp__collection {
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--uku-color-muted, #888);
	font-weight: 600;
	margin: 0 0 10px;
}

.uku-pdp__gallery { position: relative; }

/* --- Contrôles flottants sur la photo (retour/favoris/partage) — pattern
   Zara/Net-a-Porter, repris tel quel de la maquette validée. --- */
.uku-pdp__gallery-float {
	position: absolute;
	top: 16px;
	left: 0;
	right: 0;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	padding: 0 14px;
}

.uku-pdp__gallery-float-right { display: flex; gap: 8px; }

.uku-pdp__gallery-back,
.uku-pdp__gallery-share {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.92);
	color: var(--uku-color-primary, #16120c);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	transition: transform 0.15s ease;
}

.uku-pdp__gallery-back:active,
.uku-pdp__gallery-share:active { transform: scale(0.9); }

.uku-pdp__gallery-share.is-copied { color: var(--uku-color-accent, #c9a870); }

/* Réutilise .uku-pcard__wish pour le comportement (JS délégué, état actif),
   mais l'apparence flottante prend le dessus via une sélectivité plus forte
   (2 classes) — indépendant de l'ordre des feuilles base.css/product-card.css. */
.uku-pdp__gallery-wish.uku-pcard__wish {
	position: static;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* --- Galerie "une photo à la fois" — jamais recadrée (object-fit: contain),
   compteur + points + zones de tap gauche/droite plutôt qu'une bande de
   vignettes. --- */
.uku-pdp__gallery-main {
	position: relative;
	/* --uku-color-bg (fond réel de page, cf. body) plutôt que
	   --uku-color-bg-warm : ce dernier peut être réglé sur n'importe quelle
	   couleur en Identité visuelle (constaté en direct : noir pur chez
	   Thiane) sans rapport avec le fond réel de la page — la moindre photo
	   pas exactement 3:4 (bandes de "letterbox" avec object-fit: contain)
	   dessinait alors un rectangle visible qui ne se fondait dans rien. */
	background: var(--uku-color-bg, #f5f5f5);
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 3/4;
	/* pan-y : le navigateur garde la main sur le défilement vertical, mais
	   n'interprète plus un drag horizontal qui démarre ici comme le geste
	   système "retour" (edge-swipe) — c'est ce geste qui révélait la page
	   précédente (donc potentiellement le rose Elementor de la grille
	   boutique) pendant un swipe manuel sur la galerie. */
	touch-action: pan-y;
}

.uku-pdp__gallery-frame {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 320ms var(--uku-ease, ease);
}

.uku-pdp__gallery-frame.is-active { opacity: 1; }

.uku-pdp__gallery-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Mobile : photo plein cadre, bord à bord, comme la référence Yendou — le
   "contain" (jamais recadré) laissait des bandes vides dès qu'une photo
   n'était pas exactement 3:4, perçu comme un vrai défaut d'affichage. La
   colonne .uku-pdp__gallery reste inset (icônes flottantes, libellé
   collection inchangés) : seule .uku-pdp__gallery-main déborde du padding
   de page via une marge négative pour toucher les deux bords de l'écran. */
@media (max-width: 767px) {
	.uku-pdp__gallery-main { margin: 0 -16px; border-radius: 0; }
	.uku-pdp__gallery-frame img { object-fit: cover; }
}

.uku-pdp__gallery-tapzone {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40%;
	z-index: 4;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.uku-pdp__gallery-tapzone--prev { left: 0; }
.uku-pdp__gallery-tapzone--next { right: 0; }

/* Flèches en overlay, en plus des points/zones de tap — toujours visibles
   (pas seulement au survol), pour rester utilisables sur les écrans
   tactiles où le survol n'existe pas. Au-dessus des zones de tap (z-index
   plus élevé) pour rester cliquables. */
.uku-pdp__gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: rgba(18, 14, 10, 0.42);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 160ms ease;
}

.uku-pdp__gallery-arrow:hover { background: rgba(18, 14, 10, 0.6); }
.uku-pdp__gallery-arrow--prev { left: 12px; }
.uku-pdp__gallery-arrow--next { right: 12px; }

.uku-pdp__gallery-zoom {
	position: absolute;
	bottom: 14px;
	left: 14px;
	z-index: 6; /* au-dessus des zones de tap (4) pour rester cliquable */
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: rgba(18, 14, 10, 0.42);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: zoom-in;
	transition: background 160ms ease;
}

.uku-pdp__gallery-zoom:hover { background: rgba(18, 14, 10, 0.6); }

.uku-pdp__gallery-counter {
	position: absolute;
	bottom: 14px;
	right: 14px;
	z-index: 5;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: #fff;
	background: rgba(18, 14, 10, 0.5);
	padding: 4px 10px;
	border-radius: 999px;
}

.uku-pdp__gallery-dots {
	position: absolute;
	bottom: 14px;
	left: 0;
	right: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 6px;
}

.uku-pdp__gallery-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	padding: 0;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	transition: transform 160ms ease, background 160ms ease;
}

.uku-pdp__gallery-dot.is-active { background: #fff; transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
	.uku-pdp__gallery-frame { transition: none; }
}

@media (min-width: 768px) {
	.uku-pdp__gallery--sticky_desktop { position: sticky; top: 90px; align-self: start; }
}

/* --- Mini barre collante (nom + prix), sous le header sticky du site —
   visible une fois la galerie dépassée (IntersectionObserver). --- */
.uku-pdp__stickybar {
	/* fixed, pas sticky : "sticky" reste dans le flux normal du document —
	   même invisible (opacity:0), sa boîte de ~55px restait réservée tout en
	   haut de la page, juste sous le header, avant même la photo (c'est ce
	   bandeau vide qui était visible en permanence). "fixed" la sort
	   entièrement du flux, elle ne prend de la place qu'une fois affichée. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: var(--uku-color-bg, #fff);
	border-bottom: 1px solid rgba(128, 128, 128, 0.16);
	opacity: 0;
	transform: translateY(-100%);
	pointer-events: none;
	transition: opacity 220ms var(--uku-ease, ease), transform 220ms var(--uku-ease, ease);
}

.uku-pdp__stickybar.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.uku-pdp__stickybar-back {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: none;
	background: var(--uku-color-bg-warm, #f3ede2);
	color: var(--uku-color-primary, #16120c);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
}

.uku-pdp__stickybar-title {
	flex: 1;
	font-size: 13px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.uku-pdp__stickybar-price {
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--uku-color-muted, #777);
	flex-shrink: 0;
}

/* Repositionné sous la description/les accordéons (cf. .uku-pdp__breadcrumb--footer
   plus bas) — plus jamais en haut de page, donc plus de mise en page "barre
   pleine largeur" (max-width/centrage) : il vit dans la colonne d'infos. */
.uku-pdp__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	letter-spacing: 0.02em;
	color: var(--uku-color-muted, #888);
}

.uku-pdp__breadcrumb a { color: inherit; text-decoration: none; }
.uku-pdp__breadcrumb a:hover { color: var(--uku-color-text-on-light, #1a1a1a); }
.uku-pdp__breadcrumb-sep { opacity: 0.5; }
.uku-pdp__breadcrumb-current { color: var(--uku-color-text-on-light, #1a1a1a); }

/* Position discrète en pied de colonne d'infos : plus petit encore, séparé
   par un filet fin plutôt que d'attirer l'œil comme en haut de page. */
.uku-pdp__breadcrumb--footer {
	margin-top: var(--uku-space-lg, 24px);
	padding-top: 14px;
	border-top: 1px solid rgba(128, 128, 128, 0.18);
	font-size: 11px;
}

/* --- Réassurance (Livraison/Paiement…) — ligne compacte, défilement
   horizontal sur mobile, même source de données que le checkout
   (trust_bar.items[]) mais rendu propre à la fiche produit. --- */
/* Une ligne par élément (Paiement / Livraison / Retours…) — le défilement
   horizontal testé plus tôt tronquait visuellement le texte au bord de la
   colonne (repéré en direct : "Livraison express — Da[...]" coupé). Chaque
   ligne peut se retourner à la ligne suivante si besoin (flex-wrap), jamais
   collée à une autre ni coupée. */
.uku-pdp__trust {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 var(--uku-space-md, 16px);
}

.uku-pdp__trust-item {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--uku-color-text-on-light, #333);
}

.uku-pdp__trust-item svg { margin-top: 2px; }

.uku-pdp__trust-item svg {
	width: 16px;
	height: 16px;
	color: var(--uku-color-accent, #c9a870);
	flex-shrink: 0;
}

/* --- Délai de livraison estimé, zone la plus rapide (Livraison → Sénégal —
   Thiane Express) — ligne discrète avant la description, pour rassurer sur
   le délai avant même l'ajout au panier plutôt que de le découvrir au
   checkout. Même source de données que le checkout en pop-up. --- */
.uku-pdp__delivery-estimate {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: var(--uku-color-text-on-light, #333);
	margin: 0 0 var(--uku-space-md, 16px);
}

.uku-pdp__delivery-estimate svg {
	width: 16px;
	height: 16px;
	/* Monochrome noir/encre plutôt que l'accent doré — cohérent avec la
	   règle globale "icônes trait fin monochrome noir" ; hérite du texte
	   parent (déjà #333 clair / #f5f1ea sombre) plutôt qu'un noir figé qui
	   deviendrait invisible sur le fond sombre par défaut de la fiche. */
	color: currentColor;
	flex-shrink: 0;
}

/* Titre/prix + pastilles sur la même ligne : à droite sur mobile (visibles
   sans scroll, au même niveau que le titre), sous le titre/prix et alignées
   à gauche à partir de la tablette — jamais centrées sous la photo ni
   au-dessus du titre (deux emplacements testés et écartés). */
.uku-pdp__title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 24px 0 16px;
}

@media (min-width: 768px) {
	.uku-pdp__title-row { flex-direction: column; align-items: flex-start; margin-top: 0; }
}

.uku-pdp__title-price { flex: 1; min-width: 0; }

.uku-pdp__title {
	font-family: var(--uku-font-heading);
	font-size: 26px;
	letter-spacing: 0.04em;
	margin: 0 0 8px;
}

.uku-pdp__price {
	font-size: 17px;
	margin: 0;
	font-variant-numeric: tabular-nums;
	color: var(--uku-color-text-on-light, #1a1a1a);
}

.uku-pdp__desc-short { font-size: 14px; line-height: 1.65; color: var(--uku-color-text-on-light, #333); margin: 0 0 var(--uku-space-md, 16px); }

.uku-pdp__description { font-size: 14px; line-height: 1.8; margin-bottom: 24px; }

/* Corps des accordéons Livraison/additionnels (texte admin, wpautop'd) —
   même typographie que la description, sans la marge basse (déjà gérée par
   l'accordéon parent). */
.uku-pdp__accordion-body { font-size: 14px; line-height: 1.8; }
.uku-pdp__accordion-body p:last-child { margin-bottom: 0; }

.uku-pdp__divider { border: none; border-top: 1px solid rgba(128, 128, 128, 0.16); margin: var(--uku-space-lg, 24px) 0; }

.uku-pdp__section-label {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--uku-color-text-on-light, #333);
	margin-bottom: 12px;
}

/* --- Onglets Taille standard / Sur-mesure : même pattern que les onglets
   du menu mobile déjà en place ailleurs sur le site (fond neutre, pastille
   active en relief) plutôt qu'un nouveau composant. --- */
.uku-pdp__size-tabs {
	display: flex;
	gap: 3px;
	background: var(--uku-color-bg-warm, #f3ede2);
	padding: 3px;
	border-radius: 10px;
	margin-bottom: 14px;
	max-width: 320px;
}

.uku-pdp__size-tab {
	flex: 1;
	height: 36px;
	border: none;
	background: none;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	color: #6b6558; /* #888 générique sous 4.5:1 sur le fond #f3ede2 des onglets — valeur dédiée conforme WCAG AA (~5:1) */
	cursor: pointer;
}

.uku-pdp__size-tab.is-active {
	background: var(--uku-color-bg, #fff);
	color: var(--uku-color-text-on-light, #1a1a1a);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.uku-pdp__size-panel { display: none; margin-bottom: var(--uku-space-md, 16px); }
.uku-pdp__size-panel.is-active { display: block; }

.uku-pdp__size-pills { display: flex; gap: 8px; flex-wrap: wrap; }

.uku-pdp__size-pill {
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	border-radius: 9px;
	border: 1.5px solid rgba(128, 128, 128, 0.3);
	background: transparent;
	color: var(--uku-color-text-on-light, #1a1a1a);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.uku-pdp__size-pill.is-active {
	background: var(--uku-color-primary);
	border-color: var(--uku-color-primary);
	color: var(--uku-color-text-on-dark, #fff);
}

.uku-pdp__size-pill.is-unavailable {
	color: var(--uku-color-muted, #999);
	border-color: rgba(128, 128, 128, 0.15);
	text-decoration: line-through;
	cursor: not-allowed;
}

.uku-pdp__measure-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 380px; }

.uku-pdp__measure-field label { display: block; font-size: 12px; color: var(--uku-color-muted, #888); margin-bottom: 5px; }

.uku-pdp__measure-field input {
	width: 100%;
	height: 42px;
	border: 1.5px solid rgba(128, 128, 128, 0.3);
	border-radius: 8px;
	padding: 0 12px;
	font-size: 13px;
	background: var(--uku-color-bg, #fff);
	color: var(--uku-color-text-on-light, #1a1a1a);
}

/* --- Taille/mesures obligatoires : message d'erreur inline (premier usage
   de ce type de pattern sur le site — aucun autre gabarit d'erreur formulaire
   n'existait). Rouge sourd plutôt que le rouge vif générique, cohérent avec
   la palette chaude de la marque ; jamais le rose #cc3366 banni. --- */
.uku-pdp__size-error {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: #b3453a;
}
.uku-pdp--dark .uku-pdp__size-error { color: #e08a7d; }

/* --- Bouton "Ajouter au panier" centré, juste après le choix de taille —
   plus un bouton pleine largeur en bas d'un <form>, mais l'action logique
   une fois couleur + taille décidées, per la maquette validée. --- */
.uku-pdp__add-row { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 4px 0 var(--uku-space-lg, 24px); }

.uku-pdp__qty {
	display: flex;
	align-items: center;
	height: 50px;
	border: 1.5px solid rgba(128, 128, 128, 0.3);
	border-radius: 10px;
	flex-shrink: 0; /* le bouton "Ajouter au panier" voisin absorbe le rétrécissement, pas ce bloc */
}

.uku-pdp__qty-btn {
	width: 38px;
	height: 100%;
	border: none;
	background: none;
	font-size: 16px;
	color: var(--uku-color-text-on-light, #1a1a1a);
	cursor: pointer;
}

.uku-pdp__qty-value {
	min-width: 22px;
	text-align: center;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var(--uku-color-text-on-light, #1a1a1a);
}

/* Mobile : bouton sorti du flux, fixé en bas d'écran (toujours visible, pas
   besoin de scroller) — la mini-barre .uku-sticky-atc générique fait double
   emploi dans ce cas précis et est désactivée ci-dessous pour éviter deux
   barres superposées en bas d'écran. */
@media (max-width: 767px) {
	.uku-pdp__add-row {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		margin: 0;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--uku-color-bg);
		border-top: 1px solid rgba(128, 128, 128, 0.16);
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
	}

	.uku-pdp--dark .uku-pdp__add-row {
		background: #120e0a;
		border-top-color: #2c2820;
	}

	.uku-pdp__info { padding-bottom: 82px; }

	.uku-sticky-atc { display: none !important; }
}

.uku-pdp__add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: 320px;
	height: 50px;
	border-radius: 10px;
	border: none;
	background: var(--uku-color-primary);
	color: var(--uku-color-text-on-dark, #fff);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform var(--uku-dur, 0.2s) var(--uku-ease), background-color var(--uku-dur, 0.2s) var(--uku-ease), opacity var(--uku-dur, 0.2s) var(--uku-ease);
}

.uku-pdp__add-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.uku-pdp__add-btn:active { transform: scale(0.97); }
.uku-pdp__add-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.uku-pdp__add-btn.is-added {
	background: var(--uku-color-accent, #c9a870);
	color: var(--uku-color-primary);
}

.uku-pdp__meta { font-size: 13px; color: var(--uku-color-muted, #777); }

/* --- Bloc Détails (Matière/Entretien/Coupe/Origine) — champs par produit,
   affiché seulement si au moins un est renseigné (single-product.php). --- */
.uku-pdp__details {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 20px;
	font-size: 13.5px;
	margin: 0 0 var(--uku-space-lg, 24px);
}

.uku-pdp__details dt { color: var(--uku-color-muted, #888); }
.uku-pdp__details dd { margin: 0; color: var(--uku-color-text-on-light, #1a1a1a); font-weight: 500; }

.uku-pdp__accordion { border-top: 1px solid rgba(128, 128, 128, 0.16); margin-bottom: var(--uku-space-md, 16px); }

.uku-pdp__accordion summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 0;
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
}

.uku-pdp__accordion summary::-webkit-details-marker { display: none; }

.uku-pdp__accordion summary::after {
	content: '';
	width: 7px;
	height: 7px;
	border-style: solid;
	border-color: currentColor;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
	transition: transform 200ms ease;
	flex-shrink: 0;
}

.uku-pdp__accordion[open] summary::after { transform: rotate(-135deg); }

.uku-pdp__accordion img { max-width: 100%; display: block; margin-bottom: 16px; border-radius: 4px; }

/* ===== Fond sombre de la fiche produit (Modules → Fond sombre sur la fiche
   produit, activé par défaut) — valeurs fixes fournies (pas des tokens de
   marque existants) : texte principal F5F1EA, texte secondaire A39C8F
   (jamais un gris froid), bordures 2C2820/3A3428. .uku-pdp et
   .uku-pdp__stickybar portent chacun la classe (deux racines distinctes,
   pas de relation parent-enfant entre elles). ===== */
.uku-pdp--dark { background: #120e0a; }

.uku-pdp--dark .uku-pdp__gallery-main { background: #120e0a; }

.uku-pdp--dark .uku-pdp__collection { color: #a39c8f; }
.uku-pdp--dark .uku-pdp__title { color: #f5f1ea; }
.uku-pdp--dark .uku-pdp__price { color: #f5f1ea; }
.uku-pdp--dark .uku-pdp__desc-short { color: #f5f1ea; }

.uku-pdp--dark .uku-pdp__trust-item { color: #a39c8f; }
.uku-pdp--dark .uku-pdp__trust-item strong { color: #f5f1ea; }

.uku-pdp--dark .uku-pdp__delivery-estimate { color: #f5f1ea; }

.uku-pdp--dark .uku-pdp__qty { border-color: #3a3428; }
.uku-pdp--dark .uku-pdp__qty-btn { color: #f5f1ea; }
.uku-pdp--dark .uku-pdp__qty-value { color: #f5f1ea; }

.uku-pdp--dark .uku-pdp__divider { border-top-color: #2c2820; }

.uku-pdp--dark .uku-pdp__section-label { color: #f5f1ea; }
.uku-pdp--dark .uku-pdp__description { color: #f5f1ea; }
.uku-pdp--dark .uku-pdp__accordion-body { color: #f5f1ea; }

.uku-pdp--dark .uku-pdp__size-tabs { background: #2c2820; }
.uku-pdp--dark .uku-pdp__size-tab { color: #a39c8f; }
.uku-pdp--dark .uku-pdp__size-tab.is-active { background: #3a3428; color: #f5f1ea; box-shadow: none; }
/* "Sur-mesure" inactif : blanc plutôt que le gris générique des onglets —
   demande explicite, scopée à ce seul onglet (data-panel="mesure") pour ne
   pas changer "Taille standard". */
.uku-pdp--dark .uku-pdp__size-tab[data-panel="mesure"]:not(.is-active) { color: #f5f1ea; }

.uku-pdp--dark .uku-pdp__size-pill { border-color: #3a3428; color: #f5f1ea; }
.uku-pdp--dark .uku-pdp__size-pill.is-active { background: #f5f1ea; border-color: #f5f1ea; color: #120e0a; }
.uku-pdp--dark .uku-pdp__size-pill.is-unavailable { color: #5a5348; border-color: #2c2820; }

.uku-pdp--dark .uku-pdp__measure-field label { color: #a39c8f; }
.uku-pdp--dark .uku-pdp__measure-field input { background: #1a1611; border-color: #3a3428; color: #f5f1ea; }

.uku-pdp--dark .uku-pdp__add-btn { background: #f5f1ea; color: #120e0a; }
.uku-pdp--dark .uku-pdp__add-btn.is-added { background: #f5f1ea; color: #120e0a; }
.uku-pdp--dark .uku-pdp__add-btn:disabled { opacity: 0.4; }

.uku-pdp--dark .uku-pdp__meta { color: #a39c8f; }
.uku-pdp--dark .uku-pdp__meta a { color: #a39c8f; }

.uku-pdp--dark .uku-pdp__details dt { color: #a39c8f; }
.uku-pdp--dark .uku-pdp__details dd { color: #f5f1ea; }

.uku-pdp--dark .uku-pdp__accordion { border-top-color: #2c2820; }
.uku-pdp--dark .uku-pdp__accordion summary { color: #f5f1ea; }

/* Anneau de sélection des pastilles : le token --uku-swatch-ring (souvent
   proche du noir, cf. sa valeur par défaut) deviendrait invisible sur ce
   même fond sombre — même piège que l'accent blanc sur fond blanc déjà
   rencontré ailleurs sur le site. Override explicite ici, pas de dépendance
   au token dans ce contexte précis. */
.uku-pdp--dark .uku-pdp__swatch-hit.is-active .uku-pdp__swatch::after { border-color: #f5f1ea; }

/* Même piège pour le contour de repos de la pastille : rgba(0,0,0,.08) est
   pensé pour un fond clair — une couleur produit sombre (noir, marine)
   fusionne avec le fond #120E0A et devient illisible. Contour clair et
   discret à la place, quelle que soit la couleur de la pastille. */
.uku-pdp--dark .uku-pdp__swatch { border-color: rgba(245, 241, 234, 0.35); }

/* Mini barre collante — racine séparée de .uku-pdp, mêmes tokens. */
.uku-pdp__breadcrumb.uku-pdp--dark { color: #a39c8f; }
.uku-pdp__breadcrumb.uku-pdp--dark .uku-pdp__breadcrumb-current { color: #f5f1ea; }
.uku-pdp__breadcrumb.uku-pdp--dark .uku-pdp__breadcrumb a:hover { color: #f5f1ea; }
.uku-pdp__breadcrumb--footer.uku-pdp--dark { border-top-color: rgba(245, 241, 234, 0.18); }

.uku-pdp__stickybar.uku-pdp--dark { background: #120e0a; border-bottom-color: #2c2820; }
.uku-pdp__stickybar.uku-pdp--dark .uku-pdp__stickybar-back { background: #2c2820; color: #f5f1ea; }
.uku-pdp__stickybar.uku-pdp--dark .uku-pdp__stickybar-title { color: #f5f1ea; }
.uku-pdp__stickybar.uku-pdp--dark .uku-pdp__stickybar-price { color: #a39c8f; }

.uku-pdp__cross-sell { padding: 40px 16px; max-width: 1440px; margin: 0 auto; }

.uku-pdp__cross-sell h2 {
	font-family: var(--uku-font-heading);
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin: 0 0 24px;
	text-align: center;
}

/* ===== CART DRAWER ===== */

.uku-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: 380px;
	max-width: 92vw;
	height: 100%;
	background: var(--uku-color-bg);
	z-index: 200;
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
}

.uku-cart-drawer.is-open { transform: translateX(0); }

.uku-cart-drawer__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.uku-cart-drawer__title {
	font-family: var(--uku-font-heading);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin: 0;
}

.uku-cart-drawer__close { background: none; border: none; cursor: pointer; color: inherit; }

.uku-cart-drawer__body { flex: 1; overflow-y: auto; padding: 16px 24px; }

.uku-cart-drawer__item {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	align-items: flex-start;
}

.uku-cart-drawer__item-img { width: 64px; height: 84px; object-fit: cover; flex-shrink: 0; }
.uku-cart-drawer__item-info { flex: 1; }
.uku-cart-drawer__item-name { font-size: 13px; letter-spacing: 0.03em; margin: 0 0 4px; }
.uku-cart-drawer__item-variation { font-size: 11.5px; color: var(--uku-color-muted, #777); margin: 0 0 4px; }
.uku-cart-drawer__item-variation p { margin: 0; }
.uku-cart-drawer__item-price { font-size: 13px; margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.uku-cart-drawer__item-qty { font-size: 12px; color: var(--uku-color-muted, #777); margin: 0; }
.uku-cart-drawer__item-remove { background: none; border: none; cursor: pointer; color: #999; padding: 8px; margin: -8px -8px 0 0; }
.uku-cart-drawer__item-remove:hover { color: var(--uku-color-primary); }
.uku-cart-drawer__item-remove:disabled { opacity: 0.4; cursor: default; }
.uku-cart-drawer__empty { text-align: center; color: var(--uku-color-muted, #999); padding: 48px 0; }

.uku-cart-drawer__item-stepper {
	display: inline-flex; align-items: center; gap: 2px;
	border: 1px solid rgba(0, 0, 0, 0.12); width: fit-content;
}
.uku-cart-drawer__step-btn {
	background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1;
	width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
	color: var(--uku-color-text, #111);
}
.uku-cart-drawer__step-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.04); }
.uku-cart-drawer__step-btn:disabled { opacity: 0.3; cursor: default; }
.uku-cart-drawer__step-qty { min-width: 22px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }

.uku-cart-drawer__footer { border-top: 1px solid rgba(0, 0, 0, 0.08); padding: 20px 24px; }

.uku-cart-drawer__clear {
	display: block; width: 100%; text-align: center; background: none; border: none; cursor: pointer;
	margin-top: 12px; padding: 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--uku-color-muted, #888); text-decoration: underline; text-underline-offset: 3px;
}
.uku-cart-drawer__clear:hover { color: var(--uku-color-primary); }

.uku-cart-drawer__total {
	display: flex;
	justify-content: space-between;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 16px;
	font-variant-numeric: tabular-nums;
}

.uku-cart-drawer__checkout-btn {
	display: block;
	text-align: center;
	padding: 15px;
	background: var(--uku-color-primary);
	color: var(--uku-color-text-on-dark, #fff);
	text-decoration: none;
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	border: 1px solid var(--uku-color-primary);
}

.uku-cart-drawer__checkout-btn:hover {
	background: var(--uku-color-accent);
	border-color: var(--uku-color-accent);
	color: var(--uku-color-primary);
}

/* ===== CHECKOUT ===== */

.uku-page-checkout { max-width: 640px; margin: 0 auto; padding: 24px 16px; }

.uku-checkout[data-strategy="multi_step"] .uku-checkout-steps {
	display: flex;
	gap: 16px;
	margin-bottom: 32px;
}

.uku-checkout-step {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--uku-color-muted, #999);
	padding-bottom: 8px;
	border-bottom: 2px solid transparent;
}

.uku-checkout-step.is-active {
	color: var(--uku-color-primary);
	border-bottom-color: var(--uku-color-accent);
}

.uku-checkout[data-strategy="one_page"] .uku-checkout-section {
	margin-bottom: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.uku-checkout[data-strategy="one_page"] h2 {
	font-family: var(--uku-font-heading);
	font-size: 20px;
	margin: 0 0 16px;
}

.uku-checkout[data-strategy="express"] { text-align: center; }
.uku-checkout-express__greeting { font-size: 18px; margin-bottom: 24px; }

.uku-checkout-express__payment-buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 320px;
	margin: 0 auto;
}

/* ===== QUICK VIEW ===== */

.uku-quickview {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.uku-quickview.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.25s ease;
}

.uku-quickview__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }

.uku-quickview__panel {
	position: relative;
	background: var(--uku-qv-bg, var(--uku-color-bg));
	color: var(--uku-qv-text, var(--uku-color-primary));
	width: 92vw;
	max-width: 820px;
	max-height: 85vh;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	padding: 24px;
	transform: scale(0.96);
	transition: opacity 0.2s ease, transform 0.25s ease;
}

.uku-quickview.is-open .uku-quickview__panel { transform: scale(1); }

/* Réglages → Quick View → Apparence → Transition */
.uku-quickview[data-transition="slide-up"] .uku-quickview__panel { transform: translateY(28px); }
.uku-quickview[data-transition="slide-up"].is-open .uku-quickview__panel { transform: translateY(0); }

.uku-quickview[data-transition="none"],
.uku-quickview[data-transition="none"] .uku-quickview__panel { transition: none; }

.uku-quickview__panel.is-loading { opacity: 0.5; pointer-events: none; }

@media (min-width: 768px) {
	.uku-quickview__panel { flex-direction: row; gap: 32px; }
	.uku-quickview__gallery { flex: 1; }
	.uku-quickview__info { flex: 1; }
}

/* Réglages → Quick View → Mise en page → "Centré" */
.uku-quickview__info--center { text-align: center; }
.uku-quickview__info--center .uku-quickview__variants,
.uku-quickview__info--center .uku-quickview__size-toggle,
.uku-quickview__info--center .uku-quickview__swatches,
.uku-quickview__info--center .uku-quickview__size-pills,
.uku-quickview__info--center .uku-quickview__actions { justify-content: center; align-items: center; }
.uku-quickview__info--center .uku-quickview__attr-select { margin: 0 auto; }
.uku-quickview__info--center .uku-quickview__accordion,
.uku-quickview__info--center .uku-quickview__upsells { text-align: left; }

.uku-quickview__close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	z-index: 1;
}

.uku-quickview__main-img { width: 100%; height: auto; }

/*
 * flex-wrap manquant : au-delà de ~4 vignettes (largeur mobile), la rangée
 * débordait horizontalement — et .uku-quickview__panel n'ayant pas
 * d'overflow-x explicite (juste overflow-y:auto), la spec CSS le calcule
 * alors aussi en "auto" (règle du mix visible/non-visible) : tout le
 * panneau devenait scrollable horizontalement, décalant les boutons en
 * dessous. Le wrap règle la cause, overflow-x:hidden sur le panneau
 * (ci-dessus) protège contre toute récidive du même type ailleurs.
 */
.uku-quickview__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.uku-quickview__thumb {
	width: 56px;
	height: 72px;
	flex-shrink: 0;
	border: 1px solid rgba(0, 0, 0, 0.1);
	overflow: hidden;
	cursor: pointer;
	background: none;
	padding: 0;
}

.uku-quickview__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.uku-quickview__variants { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }

.uku-quickview__attr-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--uku-color-muted, #777);
	display: block;
	margin-bottom: 4px;
}

.uku-quickview__attr-select {
	width: 100%;
	padding: 10px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	font-size: 14px;
	background: var(--uku-color-bg);
	color: inherit;
}

.uku-quickview__add-btn:disabled { background: #999; border-color: #999; cursor: not-allowed; }

.uku-quickview__measurements p { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.uku-quickview__measurements label { font-size: 12px; color: var(--uku-color-muted, #777); }

.uku-quickview__measurements input {
	padding: 8px 10px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	font-size: 14px;
}

.uku-quickview__size-error {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: #b3453a;
}

.uku-quickview__title {
	font-family: var(--uku-font-heading);
	font-size: 22px;
	margin: 16px 0 8px;
}

@media (min-width: 768px) {
	.uku-quickview__title { margin-top: 0; }
}

.uku-quickview__price { font-size: 16px; margin: 0 0 16px; font-variant-numeric: tabular-nums; }

.uku-quickview__size-toggle { display: flex; gap: 8px; margin-bottom: 12px; }

.uku-quickview__size-btn {
	flex: 1;
	padding: 10px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: none;
	/* Explicite plutôt qu'hérité : un <button> sans couleur déclarée retombe
	   sur le rose Elementor/Hello (#cc3366) sur ce thème, même après le
	   dequeue de hello-elementor-theme-style — la règle vient du CSS du kit
	   Elementor lui-même (toujours chargé pour le reste du site), pas de la
	   feuille du thème parent. */
	color: var(--uku-color-primary);
	cursor: pointer;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.uku-quickview__size-btn.is-active {
	background: var(--uku-color-primary);
	color: var(--uku-color-text-on-dark, #fff);
	border-color: var(--uku-color-primary);
}

.uku-quickview__actions {
	display: flex;
	gap: 10px;
	margin-top: 4px;
}

.uku-quickview__wish-btn,
.uku-quickview__compare-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 12px;
	background: none;
	border: 1px solid rgba(0, 0, 0, 0.15);
	color: var(--uku-color-primary);
	cursor: pointer;
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.uku-quickview__wish-btn svg,
.uku-quickview__compare-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.uku-quickview__wish-btn.is-active,
.uku-quickview__compare-btn.is-active {
	border-color: var(--uku-color-primary);
	color: var(--uku-color-primary);
}

.uku-quickview__custom-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.uku-quickview__custom-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	color: var(--uku-color-primary);
	text-decoration: none;
	font-size: 11.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.uku-quickview__custom-btn img { width: 16px; height: 16px; flex-shrink: 0; object-fit: contain; }

.uku-quickview__custom-btn:hover { border-color: var(--uku-color-primary); }

.uku-quickview__add-btn {
	width: 100%;
	padding: 15px;
	background: var(--uku-color-primary);
	color: var(--uku-color-text-on-dark, #fff);
	border: 1px solid var(--uku-color-primary);
	cursor: pointer;
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-top: 16px;
}

.uku-quickview__add-btn:hover:not(:disabled) {
	background: var(--uku-color-accent);
	border-color: var(--uku-color-accent);
	color: var(--uku-color-primary);
}

/*
 * Mobile : le bouton reste accessible en bas de l'écran pendant qu'on
 * scrolle les mesures/la description, au lieu d'être perdu plus bas dans un
 * panneau souvent plus long que l'écran — pattern standard (Zara, ASOS…).
 * position:sticky se cale sur .uku-quickview__panel, son plus proche
 * ancêtre défilant (overflow-y:auto).
 */
@media (max-width: 767.98px) {
	.uku-quickview__add-btn {
		position: sticky;
		bottom: 0;
		z-index: 2;
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
	}
}

/* ===== WISHLIST POPUP ===== */

.uku-wishlist {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: none;
	align-items: center;
	justify-content: center;
}

.uku-wishlist.is-open { display: flex; }
.uku-wishlist__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }

.uku-wishlist__panel {
	position: relative;
	background: var(--uku-color-bg);
	width: 92vw;
	max-width: 480px;
	max-height: 80vh;
	overflow-y: auto;
	padding: 24px;
}

.uku-wishlist__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.uku-wishlist__title {
	font-family: var(--uku-font-heading);
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin: 0;
}

.uku-wishlist__close { background: none; border: none; cursor: pointer; color: inherit; }
.uku-wishlist__empty { text-align: center; color: var(--uku-color-muted, #999); padding: 40px 0; }

.uku-wishlist__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.uku-wishlist__item-link {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.uku-wishlist__item-img { width: 56px; height: 72px; object-fit: cover; flex-shrink: 0; }
.uku-wishlist__item-info { min-width: 0; }

.uku-wishlist__item-name {
	font-size: 14px;
	margin: 0 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.uku-wishlist__item-price { font-size: 13px; color: var(--uku-color-muted, #555); margin: 0; font-variant-numeric: tabular-nums; }

.uku-wishlist__item-remove {
	background: none;
	border: none;
	cursor: pointer;
	color: #999;
	font-size: 20px;
	line-height: 1;
	padding: 4px 8px;
	flex-shrink: 0;
}

@keyframes uku-heart-pulse {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

.uku-pcard__wish.is-active svg,
.uku-pcard__wish.uku-pulse svg {
	animation: uku-heart-pulse 0.35s ease;
}

.uku-pcard__wish.is-active svg {
	fill: var(--uku-color-accent);
	stroke: var(--uku-color-accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   MODES D'AFFICHAGE PRODUITS (dispatcher template-parts/products-grid.php)
   Chaque mode ne diffère que par son conteneur — les cartes restent
   identiques (product-card.php). Mobile-first strict.
   ═══════════════════════════════════════════════════════════════════════ */

/* Le wrapper porte le mode + le nombre de colonnes desktop en variable CSS */
.uku-products-grid {
	--uku-grid-cols: 4;
	/* --uku-grid-bg posée en inline uniquement quand un fond par shortcode a
	   été choisi (generateur [uku_products]) — sans elle, transparent :
	   comportement identique à avant partout ailleurs (archive boutique,
	   widgets Elementor sans réglage). */
	background: var(--uku-grid-bg, transparent);
}

.uku-products-grid[style*="--uku-grid-bg"] {
	padding: var(--uku-space-lg);
	border-radius: 4px;
}

/* Grille classique : 2 colonnes mobile, N colonnes (variable) desktop */
@media (min-width: 1024px) {
	.uku-products-grid .uku-grid {
		grid-template-columns: repeat(var(--uku-grid-cols, 4), 1fr);
	}
}

/* --- Mode éditorial / bento : le 1er produit de chaque groupe de 5 occupe
   2×2. Placement pur CSS, aucune logique PHP. Mobile : grille simple. --- */
.uku-grid-editorial {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.uku-grid-editorial .uku-pcard:nth-child(5n + 1) {
	grid-column: span 2;
}

.uku-grid-editorial .uku-pcard:nth-child(5n + 1) .uku-pcard__media {
	aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
	.uku-grid-editorial {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}

	.uku-grid-editorial .uku-pcard:nth-child(5n + 1) {
		grid-column: span 2;
		grid-row: span 2;
	}

	.uku-grid-editorial .uku-pcard:nth-child(5n + 1) .uku-pcard__media {
		aspect-ratio: auto;
		height: 100%;
	}
}

/* --- Mode masonry : colonnes pilotées par la variable, ratio naturel --- */
@media (min-width: 1024px) {
	.uku-products-grid .uku-masonry {
		columns: var(--uku-grid-cols, 4);
	}
}

/* --- Mode liste dense : infos à droite, prix aligné --- */
.uku-list .uku-pcard__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* --- Mode carrousel : scroll-snap natif, flèches desktop --- */
.uku-pcarousel {
	position: relative;
}

.uku-pcarousel__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px; /* respiration pour la scrollbar fine */
}

.uku-pcarousel__track .uku-pcard {
	flex: 0 0 72%;
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	.uku-pcarousel__track .uku-pcard {
		flex-basis: calc((100% - 3 * 16px) / 3.5);
	}
	.uku-pcarousel__track { gap: 16px; }
}

@media (min-width: 1280px) {
	.uku-pcarousel__track .uku-pcard {
		flex-basis: calc((100% - 4 * 16px) / 4.5);
	}
}

.uku-pcarousel__arrow {
	display: none; /* mobile : swipe naturel, pas de flèches */
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: var(--uku-color-bg);
	color: var(--uku-color-primary);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.uku-pcarousel__arrow:hover {
	background: var(--uku-color-primary);
	color: var(--uku-color-text-on-dark, #fff);
}

@media (hover: hover) and (min-width: 768px) {
	.uku-pcarousel__arrow { display: flex; }
	.uku-pcarousel__arrow--prev { left: -8px; }
	.uku-pcarousel__arrow--next { right: -8px; }
	.uku-pcarousel__arrow[disabled] { opacity: 0.3; cursor: default; }
}

/* --- Mode lookbook : image + hotspots "+" positionnés en % --- */
.uku-lookbook {
	position: relative;
	margin: 0 0 24px;
}

.uku-lookbook__image {
	/* Plein cadre, comme la bannière de collection juste au-dessus — des
	   coins arrondis sur une photo pleine largeur cassent l'effet "bord à
	   bord" attendu d'une grande marque. */
	width: 100%;
	height: auto;
	display: block;
}

.uku-lookbook__hotspot {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: var(--uku-color-bg);
	color: var(--uku-color-primary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: uku-hotspot-pulse 2.4s ease-in-out infinite;
}

.uku-lookbook__hotspot:hover,
.uku-lookbook__hotspot:focus-visible {
	background: var(--uku-color-accent);
	animation-play-state: paused;
}

@keyframes uku-hotspot-pulse {
	0%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 255, 255, 0.5); }
	50%      { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25), 0 0 0 8px rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.uku-lookbook__hotspot { animation: none; }
}

.uku-lookbook__hotspot-tip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--uku-color-primary);
	color: var(--uku-color-text-on-dark, #fff);
	font-size: 11px;
	white-space: nowrap;
	padding: 5px 10px;
	border-radius: 3px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.uku-lookbook__hotspot:hover .uku-lookbook__hotspot-tip,
.uku-lookbook__hotspot:focus-visible .uku-lookbook__hotspot-tip {
	opacity: 1;
}

.uku-lookbook__caption {
	margin-top: 10px;
	font-size: 13px;
	color: var(--uku-color-muted, #888);
	text-align: center;
}

.uku-lookbook__grid {
	margin-top: 16px;
}

/* --- Mode quick-shop : crossfade 2ème image + swatches + ajout rapide --- */

/* 2ème image empilée sur la 1ère, invisible par défaut partout */
.uku-pcard__img-hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.35s ease;
}

/* Swatches : cachés par défaut (grille classique = carte épurée) */
.uku-pcard__swatches {
	display: none;
	gap: 6px;
	margin-top: 8px;
}

.uku-pcard__swatch {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	/* --uku-swatch-2 (optionnel, pastille composée pour un imprimé à deux
	   teintes) : dégradé qui retombe proprement sur une pastille pleine via
	   le repli imbriqué sur --uku-swatch quand la 2ᵉ couleur n'est pas
	   posée — aucune règle séparée à maintenir pour le cas simple. */
	background: linear-gradient(135deg, var(--uku-swatch, #ccc) 50%, var(--uku-swatch-2, var(--uku-swatch, #ccc)) 50%);
	cursor: pointer;
	padding: 0;
}

.uku-pcard__swatch:hover,
.uku-pcard__swatch:focus-visible {
	transform: scale(1.2);
}

/* En mode quick-shop : swatches toujours visibles (tactile inclus) */
[data-hover-mode="quick-shop"] .uku-pcard__swatches {
	display: flex;
}

/* Crossfade uniquement sur device à survol réel */
@media (hover: hover) and (min-width: 768px) {
	[data-hover-mode="quick-shop"] .uku-pcard:hover .uku-pcard__img-hover {
		opacity: 1;
	}
}

/* --- Bannière collection (shortcode / widget / archive catégorie) --- */
.uku-collection-hero {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	margin: 0 0 24px;
}

.uku-collection-hero--text {
	background: var(--uku-color-bg-warm, #FBF8F0);
}

.uku-collection-hero__image {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	object-fit: cover;
}

.uku-collection-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1));
}

.uku-collection-hero__content {
	position: relative;
	z-index: 1;
	padding: 48px 20px;
	text-align: center;
}

.uku-collection-hero--image .uku-collection-hero__content {
	color: var(--uku-color-text-on-dark, #fff);
	padding: 72px 20px;
}

.uku-collection-hero__eyebrow {
	font-size: 11px;
	color: var(--uku-color-accent);
	margin: 0 0 8px;
}

.uku-collection-hero__title {
	font-family: var(--uku-font-heading);
	font-size: 28px;
	margin: 0 0 8px;
}

.uku-collection-hero__subtitle {
	font-size: 14px;
	opacity: 0.85;
	margin: 0 0 20px;
}

@media (min-width: 768px) {
	.uku-collection-hero__content { padding: 72px 40px; }
	.uku-collection-hero--image .uku-collection-hero__content { padding: 110px 40px; }
	.uku-collection-hero__title { font-size: 40px; }
}

/* En tête d'archive de catégorie, cette bannière fait office de hero plein
   cadre (immédiatement sous le header) — les coins arrondis, adaptés à un
   usage "carte" posée dans une page (shortcode/widget, ex. accueil), n'ont
   pas leur place ici. */
.uku-archive-hero .uku-collection-hero {
	border-radius: 0;
	margin: 0 0 24px;
}

/* ═══════════════════════════════════════════════════════════════════════
   INTERACTIONS AVANCÉES v2 — recherche, popups, comparateur, mega-menu,
   sticky ATC, réassurance, barre livraison offerte. Mobile-first strict.
   ═══════════════════════════════════════════════════════════════════════ */

.uku-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- Recherche instantanée (overlay plein écran) --- */
.uku-search {
	position: fixed;
	inset: 0;
	z-index: 1200;
	background: var(--uku-color-bg);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	overflow-y: auto;
}

.uku-search.is-open {
	opacity: 1;
	visibility: visible;
}

.uku-search__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 64px 20px 40px;
}

.uku-search__close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--uku-color-primary);
	padding: 8px;
}

.uku-search__form {
	display: flex;
	align-items: center;
	gap: 12px;
	border-bottom: 2px solid var(--uku-color-primary);
	padding-bottom: 10px;
}

.uku-search__input {
	flex: 1;
	border: none;
	outline: none;
	font-family: var(--uku-font-heading);
	font-size: 22px;
	background: transparent;
	color: var(--uku-color-primary);
}

@media (min-width: 768px) {
	.uku-search__inner { padding-top: 110px; }
	.uku-search__input { font-size: 32px; }
}

.uku-search__trending {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.uku-search__trending-label {
	font-size: 11px;
	color: var(--uku-color-muted, #888);
	margin: 0 8px 0 0;
}

.uku-search__trend-chip {
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: transparent;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	cursor: pointer;
	color: var(--uku-color-text-on-light, #1a1a1a);
}

.uku-search__trend-chip:hover {
	border-color: var(--uku-color-accent);
	color: var(--uku-color-accent);
}

.uku-search__results {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.uku-search__result {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px;
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
}

.uku-search__result:hover,
.uku-search__result:focus-visible {
	background: var(--uku-color-bg-warm, #FBF8F0);
}

.uku-search__result img {
	width: 52px;
	height: 66px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.uku-search__result-name {
	display: block;
	font-family: var(--uku-font-heading);
	font-size: 15px;
}

.uku-search__result-price {
	display: block;
	font-size: 12px;
	color: var(--uku-color-muted, #888);
	font-variant-numeric: tabular-nums;
}

.uku-search__empty {
	color: var(--uku-color-muted, #888);
	font-size: 14px;
}

.uku-search__all {
	margin-top: 20px;
	display: inline-block;
}

/* --- Popup générique (4 types + custom) --- */
.uku-popup {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.uku-popup.is-open {
	visibility: visible;
	opacity: 1;
}

.uku-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.uku-popup__panel {
	position: relative;
	z-index: 1;
	background: var(--uku-color-bg);
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	border-radius: 12px 12px 0 0;
	padding: 32px 20px 28px;
}

@media (min-width: 768px) {
	.uku-popup { align-items: center; }
	.uku-popup__panel {
		max-width: 520px;
		border-radius: 10px;
		padding: 40px 36px 32px;
	}
}

.uku-popup__close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--uku-color-primary);
	padding: 6px;
}

.uku-popup__title {
	font-family: var(--uku-font-heading);
	font-size: 24px;
	margin: 0 0 12px;
}

.uku-popup__content { font-size: 14px; line-height: 1.6; }

.uku-popup__newsletter,
.uku-popup__restock,
.uku-restock__row {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

.uku-popup__newsletter input[type="email"],
.uku-popup__restock input[type="email"],
.uku-restock input[type="email"] {
	padding: 13px 14px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	font-size: 14px;
	font-family: var(--uku-font-body);
}

@media (min-width: 768px) {
	.uku-popup__newsletter,
	.uku-popup__restock,
	.uku-restock__row { flex-direction: row; }
	.uku-popup__newsletter input,
	.uku-popup__restock input,
	.uku-restock__row input { flex: 1; }
}

/* --- Formulaire retour en stock (PDP) --- */
.uku-restock {
	margin: 20px 0;
	padding: 18px;
	background: var(--uku-color-bg-warm, #FBF8F0);
	border-radius: 8px;
}

.uku-restock__label { font-size: 13px; margin: 0; }
.uku-restock__feedback,
.uku-popup__feedback { font-size: 13px; color: var(--uku-color-accent); margin: 8px 0 0; }

/* --- Comparateur : barre flottante + popup tableau --- */
.uku-compare-bar {
	position: fixed;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1100;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--uku-color-primary);
	color: var(--uku-color-text-on-dark, #fff);
	border-radius: 999px;
	padding: 8px 10px 8px 18px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.uku-compare-bar__label { font-size: 13px; white-space: nowrap; }
.uku-compare-bar__open { padding: 8px 18px; font-size: 11px; }
.uku-compare-bar__clear {
	background: none;
	border: none;
	color: inherit;
	font-size: 18px;
	cursor: pointer;
	padding: 4px 8px;
}

.uku-compare {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.uku-compare.is-open { visibility: visible; opacity: 1; }

.uku-compare__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.uku-compare__panel {
	position: relative;
	z-index: 1;
	background: var(--uku-color-bg);
	border-radius: 10px;
	width: calc(100% - 24px);
	max-width: 960px;
	max-height: 85vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 24px 20px;
}

.uku-compare__close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--uku-color-primary);
	padding: 6px;
}

.uku-compare__title {
	font-family: var(--uku-font-heading);
	font-size: 22px;
	margin: 0 0 16px;
}

.uku-compare__table-wrap { overflow: auto; }

.uku-compare__table {
	border-collapse: collapse;
	width: 100%;
	font-size: 13px;
}

.uku-compare__table th,
.uku-compare__table td {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
	min-width: 130px;
}

.uku-compare__table th { color: var(--uku-color-muted, #888); font-weight: 500; }

.uku-compare__table td a {
	text-decoration: none;
	color: inherit;
	display: block;
}

.uku-compare__table td img {
	width: 84px;
	height: 108px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	margin-bottom: 6px;
}

.uku-compare__remove {
	background: none;
	border: none;
	color: #999;
	font-size: 16px;
	cursor: pointer;
	float: right;
	padding: 2px 6px;
}

.uku-compare-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	padding: 8px 14px;
	font-size: 12px;
	cursor: pointer;
	margin: 12px 0;
	color: inherit;
}

.uku-compare-toggle.is-active {
	border-color: var(--uku-color-accent);
	color: var(--uku-color-accent);
}

/* --- Barre livraison offerte (cart drawer) --- */
.uku-freeship {
	padding: 14px 0 6px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	margin-bottom: 12px;
}

.uku-freeship__label { font-size: 12.5px; margin: 0 0 8px; }
.uku-freeship__label .amount { color: var(--uku-color-accent); font-weight: 600; }
.uku-freeship__unlocked { color: var(--uku-color-accent); font-weight: 600; }

.uku-freeship__track {
	height: 5px;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 3px;
	overflow: hidden;
}

.uku-freeship__fill {
	height: 100%;
	background: var(--uku-color-accent);
	border-radius: 3px;
	transition: width 0.4s ease;
}

/* --- Upsell du cart drawer --- */
.uku-cart-drawer__upsell {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding-top: 14px;
	margin-top: 8px;
}

.uku-cart-drawer__upsell-title {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--uku-color-muted, #888);
	margin: 0 0 10px;
}

.uku-cart-drawer__upsell-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.uku-cart-drawer__upsell-link {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

.uku-cart-drawer__upsell-info { display: flex; flex-direction: column; gap: 2px; }

.uku-cart-drawer__upsell-add {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--uku-color-primary);
	background: transparent;
	color: var(--uku-color-primary);
	font-size: 16px;
	cursor: pointer;
	flex-shrink: 0;
}

.uku-cart-drawer__upsell-add:hover {
	background: var(--uku-color-primary);
	color: var(--uku-color-text-on-dark, #fff);
}

/* --- Barre de réassurance --- */
.uku-trust-bar {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	padding: 32px 20px;
	background: var(--uku-color-bg-warm, #FBF8F0);
	border-radius: 8px;
	margin: 32px 0;
	text-align: center;
}

@media (min-width: 768px) {
	.uku-trust-bar { grid-template-columns: repeat(3, 1fr); padding: 40px; }
}

.uku-trust-bar__item svg { color: var(--uku-color-accent); }
.uku-trust-bar__title { font-family: var(--uku-font-heading); font-size: 15px; margin: 8px 0 4px; }
.uku-trust-bar__text { font-size: 12.5px; color: var(--uku-color-muted, #888); margin: 0; }

/* --- Barre d'ajout au panier sticky (PDP) --- */
.uku-sticky-atc {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--uku-color-bg);
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
	padding: 10px 16px;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.uku-sticky-atc.is-visible { transform: translateY(0); }

.uku-sticky-atc__img {
	width: 42px;
	height: 54px;
	object-fit: cover;
	border-radius: 4px;
	display: none;
}

.uku-sticky-atc__info { flex: 1; min-width: 0; }

.uku-sticky-atc__name {
	font-family: var(--uku-font-heading);
	font-size: 14px;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.uku-sticky-atc__price { font-size: 12px; margin: 0; color: var(--uku-color-muted, #888); }
.uku-sticky-atc__btn { padding: 12px 20px; font-size: 11px; white-space: nowrap; }

@media (min-width: 768px) {
	.uku-sticky-atc { padding: 12px 40px; }
	.uku-sticky-atc__img { display: block; }
}

/* --- Mega-menu desktop --- */
.uku-megamenu {
	display: none; /* mobile : off-canvas seulement */
}

@media (hover: hover) and (min-width: 1024px) {
	.uku-megamenu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--uku-color-bg);
		color: var(--uku-color-text-on-light, #1a1a1a);
		border-top: 1px solid rgba(0, 0, 0, 0.06);
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
		z-index: 900;
	}

	.uku-megamenu.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.uku-header { position: relative; }

	.uku-megamenu__inner {
		max-width: 1200px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr 260px 260px;
		gap: 40px;
		padding: 36px 40px;
	}

	.uku-megamenu__heading {
		font-size: 11px;
		color: var(--uku-color-muted, #888);
		margin: 0 0 14px;
	}

	.uku-megamenu__links ul {
		list-style: none;
		margin: 0;
		padding: 0;
		columns: 2;
	}

	.uku-megamenu__links li { break-inside: avoid; margin-bottom: 10px; }

	.uku-megamenu__links a {
		text-decoration: none;
		color: inherit;
		font-family: var(--uku-font-heading);
		font-size: 15px;
	}

	.uku-megamenu__links a:hover { color: var(--uku-color-accent); }

	.uku-megamenu__children {
		margin-top: 6px !important;
		columns: 1 !important;
		padding-left: 12px !important;
	}

	.uku-megamenu__children a {
		font-family: var(--uku-font-body) !important;
		font-size: 12.5px !important;
		color: var(--uku-color-muted, #888) !important;
	}

	.uku-megamenu__feature {
		display: block;
		text-decoration: none;
		color: inherit;
	}

	.uku-megamenu__feature img {
		width: 100%;
		aspect-ratio: 4 / 5;
		object-fit: cover;
		border-radius: 6px;
		margin-bottom: 10px;
	}

	.uku-megamenu__feature-name {
		display: block;
		font-family: var(--uku-font-heading);
		font-size: 15px;
	}

	.uku-megamenu__feature-sub {
		display: block;
		font-size: 12px;
		color: var(--uku-color-muted, #888);
	}
}

/* --- Quick View v2 : swatches, rareté, upsells --- */
.uku-quickview__scarcity {
	font-size: 12.5px;
	color: #a4322e;
	background: rgba(164, 50, 46, 0.08);
	padding: 8px 12px;
	border-radius: 4px;
	margin: 0 0 12px;
}

.uku-quickview__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uku-space-xs, 8px);
	margin: 8px 0 14px;
}

.uku-quickview__swatch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
	background: none;
	padding: 5px 12px 5px 5px;
	cursor: pointer;
	position: relative;
	transition: border-color var(--uku-dur, 0.2s) var(--uku-ease), background-color var(--uku-dur, 0.2s) var(--uku-ease);
}

.uku-quickview__swatch-dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	flex-shrink: 0;
	/* --uku-swatch-2 (optionnel, pastille composée pour un imprimé à deux
	   teintes) : dégradé qui retombe proprement sur une pastille pleine via
	   le repli imbriqué sur --uku-swatch quand la 2ᵉ couleur n'est pas
	   posée — aucune règle séparée à maintenir pour le cas simple. */
	background: linear-gradient(135deg, var(--uku-swatch, #ccc) 50%, var(--uku-swatch-2, var(--uku-swatch, #ccc)) 50%);
	border: 1px solid rgba(0, 0, 0, 0.12);
}

.uku-quickview__swatch-label {
	font-size: 12.5px;
	line-height: 1;
	white-space: nowrap;
	color: var(--uku-color-primary);
}

.uku-quickview__swatch:hover {
	border-color: var(--uku-swatch-ring, var(--uku-color-accent, #c9a870));
}

.uku-quickview__swatch.is-active {
	border-color: var(--uku-swatch-ring, var(--uku-color-accent, #c9a870));
	background: rgba(201, 168, 112, 0.08);
	box-shadow: 0 0 0 1px var(--uku-swatch-ring, var(--uku-color-accent, #c9a870));
}

/* --- PDP : pastilles couleur — mêmes briques que le Quick View
   (ukuSwatchColor, gallery_by_color), rendu en disque plein avec anneau de
   sélection. Alignement à droite du titre/prix sur mobile (.uku-pdp__title-row
   est en ligne à ce breakpoint), sous le titre/prix et alignées à gauche à
   partir de la tablette (.uku-pdp__title-row passe en colonne). */
.uku-pdp__swatches-row { display: flex; flex-shrink: 0; }
.uku-pdp__swatches { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

@media (min-width: 768px) {
	.uku-pdp__swatches-row { margin-top: 12px; }
	.uku-pdp__swatches { justify-content: flex-start; }
}

.uku-pdp__swatch-hit {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	touch-action: manipulation;
}

.uku-pdp__swatch {
	position: relative;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	/* --uku-swatch-2 (optionnel, pastille composée pour un imprimé à deux
	   teintes) : dégradé qui retombe proprement sur une pastille pleine via
	   le repli imbriqué sur --uku-swatch quand la 2ᵉ couleur n'est pas
	   posée — aucune règle séparée à maintenir pour le cas simple. */
	background: linear-gradient(135deg, var(--uku-swatch, #ccc) 50%, var(--uku-swatch-2, var(--uku-swatch, #ccc)) 50%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
	border: 1px solid rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--uku-dur, 0.2s) var(--uku-ease);
}

.uku-pdp__swatch::after {
	content: '';
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1.5px solid transparent;
	transition: border-color var(--uku-dur, 0.2s) var(--uku-ease);
}

.uku-pdp__swatch-hit.is-active .uku-pdp__swatch::after {
	border-color: var(--uku-swatch-ring, var(--uku-color-accent, #c9a870));
}

.uku-pdp__swatch-hit:active .uku-pdp__swatch { transform: scale(0.92); }

.uku-pdp__swatch svg {
	width: 11px;
	height: 11px;
	color: #fff;
	opacity: 0;
	transform: scale(0.6);
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
	transition: opacity 120ms ease, transform 120ms ease;
}

.uku-pdp__swatch-hit.is-active .uku-pdp__swatch svg { opacity: 1; transform: scale(1); }

/* --- Quick View : pilules de taille (mêmes tokens que les pastilles couleur) --- */
.uku-quickview__size-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uku-space-xs, 8px);
	margin: 8px 0 14px;
}

.uku-quickview__size-pill {
	min-width: 40px;
	padding: 8px 12px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	background: none;
	font-size: 13px;
	cursor: pointer;
	transition: border-color var(--uku-dur, 0.2s) var(--uku-ease), background-color var(--uku-dur, 0.2s) var(--uku-ease);
}

.uku-quickview__size-pill:hover {
	border-color: var(--uku-color-accent, #c9a870);
}

.uku-quickview__size-pill.is-active {
	border-color: var(--uku-color-accent, #c9a870);
	background: var(--uku-color-accent, #c9a870);
	color: var(--uku-color-text-on-dark, #fff);
}

/* Taille indisponible pour la couleur/combinaison choisie — barrée plutôt
   que masquée, pour que le client comprenne pourquoi sans avoir à cliquer. */
.uku-quickview__size-pill.is-unavailable {
	color: var(--uku-color-muted, #999);
	border-color: rgba(0, 0, 0, 0.08);
	text-decoration: line-through;
	cursor: not-allowed;
	opacity: 0.55;
}

.uku-quickview__size-pill.is-unavailable:hover { border-color: rgba(0, 0, 0, 0.08); }

/* --- Quick View : hauteur optionnelle (sous Taille standard) --- */
.uku-quickview__hauteur-standard {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 13px;
}

.uku-quickview__hauteur-standard input {
	width: 80px;
	padding: 6px 8px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
}

/* --- Quick View : accordéons Description / Guide des tailles (natif <details>) --- */
.uku-quickview__accordion {
	margin: 0 0 14px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 12px;
}

.uku-quickview__accordion summary {
	cursor: pointer;
	font-family: var(--uku-font-heading);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	list-style: none;
}

.uku-quickview__accordion summary::-webkit-details-marker {
	display: none;
}

.uku-quickview__accordion summary::after {
	content: '+';
	float: right;
	font-size: 16px;
}

.uku-quickview__accordion[open] summary::after {
	content: '−';
}

.uku-quickview__description {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--uku-color-muted, #666);
}

.uku-quickview__size-guide-img {
	margin-top: 10px;
	width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}

.uku-quickview__size-guide {
	background: none;
	border: none;
	text-decoration: underline;
	font-size: 12.5px;
	color: var(--uku-color-muted, #888);
	cursor: pointer;
	padding: 0;
	margin: 0 0 14px;
	display: block;
}

.uku-quickview__size-guide:hover { color: var(--uku-color-accent); }

.uku-quickview__permalink {
	display: block;
	text-align: center;
	font-size: 12.5px;
	color: var(--uku-color-muted, #888);
	margin-top: 12px;
}

.uku-quickview__upsells {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	margin-top: 18px;
	padding-top: 14px;
}

.uku-quickview__upsells-title {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--uku-color-muted, #888);
	margin: 0 0 10px;
}

.uku-quickview__upsells-track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 4px;
}

.uku-quickview__upsell {
	flex: 0 0 96px;
	scroll-snap-align: start;
	text-decoration: none;
	color: inherit;
}

.uku-quickview__upsell img {
	width: 96px;
	height: 122px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	margin-bottom: 6px;
}

.uku-quickview__upsell-name {
	display: block;
	font-size: 11.5px;
	line-height: 1.3;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.uku-quickview__upsell-price {
	display: block;
	font-size: 11px;
	color: var(--uku-color-muted, #888);
	font-variant-numeric: tabular-nums;
}

/* --- PDP : section récemment consultés --- */
.uku-pdp__recent {
	padding: 24px 20px 48px;
}

.uku-pdp__recent h2 {
	font-family: var(--uku-font-heading);
	font-size: 22px;
	margin-bottom: 20px;
}

@media (min-width: 768px) {
	.uku-pdp__recent { padding: 32px 40px 64px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DÉFENSE EN PROFONDEUR (règle A.9 v3) — chaque élément interactif custom
   redéclare EXPLICITEMENT bordure/outline/fond/affichage avec une
   spécificité doublée (0-2-0) : bat les styles génériques de Hello
   Elementor (button {…}, 0-0-1) ET ceux du kit Elementor
   (.elementor-kit-N button, 0-1-1), quel que soit l'ordre de chargement.
   Bug prod confirmé : bordures roses #C36 héritées — ne JAMAIS retirer
   cette section.
   ═══════════════════════════════════════════════════════════════════════ */

/* Boutons "chrome" (icônes nues) : jamais de bordure, jamais de fond */
.uku-header .uku-header__burger,
.uku-header .uku-header__search-trigger,
.uku-header .uku-header__cart-trigger,
.uku-header .uku-header__wishlist-trigger,
.uku-offcanvas .uku-offcanvas__close,
.uku-cart-drawer .uku-cart-drawer__close,
.uku-cart-drawer .uku-cart-drawer__item-remove,
.uku-quickview .uku-quickview__close,
.uku-wishlist .uku-wishlist__close,
.uku-wishlist .uku-wishlist__item-remove,
.uku-search .uku-search__close,
.uku-popup .uku-popup__close,
.uku-compare .uku-compare__close,
.uku-compare .uku-compare__remove,
.uku-compare-bar .uku-compare-bar__clear {
	background: none;
	background-color: transparent;
	border: 0;
	outline: none;
	box-shadow: none;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	color: inherit;
	font-family: inherit;
}

.uku-header .uku-header__burger { display: flex; padding: 4px; cursor: pointer; }
.uku-header .uku-header__search-trigger,
.uku-header .uku-header__wishlist-trigger { display: flex; align-items: center; cursor: pointer; }
.uku-header .uku-header__cart-trigger { display: flex; align-items: center; position: relative; cursor: pointer; }

/* Ré-assertion mobile/desktop du header à spécificité doublée : le burger
   n'existe QUE sous 1024px, le nav horizontal QUE au-dessus. */
.uku-header .uku-header__nav { display: none; }

@media (min-width: 1024px) {
	.uku-header .uku-header__burger { display: none; }
	.uku-header .uku-header__nav { display: block; }
}

/* Wishlist coeur sur carte : pastille blanche ronde, jamais de bordure kit */
.uku-pcard .uku-pcard__wish {
	background: var(--uku-color-bg);
	border: 0;
	outline: none;
	box-shadow: none;
	border-radius: 50%;
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	cursor: pointer;
}

/* Bouton d'ajout de la carte : fond primaire plein, jamais de bordure */
.uku-pcard .uku-pcard__add-btn {
	background: var(--uku-color-primary);
	color: var(--uku-color-bg);
	border: 0;
	outline: none;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	font-family: inherit;
}

.uku-pcard .uku-pcard__add-btn:disabled {
	background: #999;
	cursor: not-allowed;
}

/* Swatch carte produit : bare dot, le fond EST la couleur du produit.
   Le quick view a son propre style pilule (dot + libellé), voir plus haut. */
.uku-pcard .uku-pcard__swatch {
	/* --uku-swatch-2 (optionnel, pastille composée pour un imprimé à deux
	   teintes) : dégradé qui retombe proprement sur une pastille pleine via
	   le repli imbriqué sur --uku-swatch quand la 2ᵉ couleur n'est pas
	   posée — aucune règle séparée à maintenir pour le cas simple. */
	background: linear-gradient(135deg, var(--uku-swatch, #ccc) 50%, var(--uku-swatch-2, var(--uku-swatch, #ccc)) 50%);
	border: 1px solid rgba(0, 0, 0, 0.15);
	outline: none;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 50%;
	cursor: pointer;
}

/* Sélecteur de devise : filet discret sur le header sombre, pas le style kit */
.uku-header .uku-header__currency-select {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	outline: none;
	box-shadow: none;
	border-radius: 2px;
	color: inherit;
	font-family: inherit;
	font-size: 12px;
	padding: 4px 6px;
	cursor: pointer;
}

.uku-header--light .uku-header__currency-select {
	border-color: rgba(0, 0, 0, 0.2);
}

/* Champs de saisie custom : contour explicite, jamais hérité */
.uku-search .uku-search__input {
	border: 0;
	outline: none;
	box-shadow: none;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
}

.uku-restock input[type="email"],
.uku-popup .uku-popup__newsletter input[type="email"],
.uku-popup .uku-popup__restock input[type="email"] {
	border: 1px solid rgba(0, 0, 0, 0.2);
	outline: none;
	box-shadow: none;
	background: var(--uku-color-bg);
	appearance: none;
	-webkit-appearance: none;
}

/* Boutons plats divers : réaffirmation des styles voulus */
.uku-search .uku-search__trend-chip {
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.15);
	outline: none;
	box-shadow: none;
	border-radius: 999px;
	font-family: inherit;
	cursor: pointer;
}

.uku-pcarousel .uku-pcarousel__arrow {
	background: var(--uku-color-bg);
	border: 1px solid rgba(0, 0, 0, 0.08);
	outline: none;
	border-radius: 50%;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.uku-lookbook .uku-lookbook__hotspot {
	background: var(--uku-color-bg);
	border: 0;
	outline: none;
	border-radius: 50%;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.uku-quickview .uku-quickview__size-guide,
.uku-quickview .uku-quickview__size-btn,
.uku-catalog .uku-catalog__mode-btn {
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	box-shadow: none;
	font-family: inherit;
	cursor: pointer;
}

.uku-quickview .uku-quickview__add-btn,
.uku-sticky-atc .uku-sticky-atc__btn,
.uku-cart-drawer .uku-cart-drawer__checkout-btn {
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	font-family: inherit;
	cursor: pointer;
}

/* Logo image (identity.logo_style = image) : hauteur pilotée par brand.json.
   Le nom de la marque s'affiche à côté (pas juste l'icône seule) — repère
   "header professionnel" demandé : logo + nom, groupés, avant le menu. */
.uku-header .uku-header__logo--image {
	display: flex;
	align-items: center;
	gap: 10px;
}

.uku-header .uku-header__logo--image img {
	display: block;
	height: var(--uku-logo-max-height, 40px);
	width: auto;
	max-width: 200px;
	object-fit: contain;
}

/* Icône seule sur mobile (place limitée à côté du burger) — le nom
   n'apparaît qu'à partir de la tablette. */
.uku-header__logo-name { display: none; }

@media (min-width: 768px) {
	.uku-header__logo-name {
		display: inline;
		font-family: var(--uku-font-heading);
		font-size: 17px;
		text-transform: uppercase;
		letter-spacing: 0.22em;
	}
}

@media (min-width: 1024px) {
	.uku-header__logo-name { font-size: 19px; }
}

/* ═══════════════ Visibilité responsive (utilitaires réutilisables) ═══════════════
   Mêmes breakpoints que le Hero (767px/1023px) — header_builder.icons[].hide_*
   et footer_builder.*.hide_* consomment ces classes. */
@media (max-width: 767.98px) {
	.uku-hide-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
	.uku-hide-tablet { display: none !important; }
}
@media (min-width: 1024px) {
	.uku-hide-desktop { display: none !important; }
}

/* ═══════════════ HEADER BUILDER (v3) ═══════════════ */

/* Hauteurs pilotées par brand.json — plus aucune valeur en dur */
.uku-header .uku-header__inner {
	min-height: var(--uku-header-h-mobile, 62px);
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.uku-header .uku-header__inner {
		min-height: var(--uku-header-h-tablet, 66px);
	}
}

@media (min-width: 1024px) {
	.uku-header .uku-header__inner {
		min-height: var(--uku-header-h-desktop, 70px);
	}
}

/* Disposition logo centré : nav à gauche, logo au centre, icônes à droite —
   même grille 3 colonnes égales que la disposition par défaut, seuls nav et
   logo échangent leur colonne. */
@media (min-width: 1024px) {
	.uku-header--logo_center .uku-header__nav {
		grid-column: 1;
		justify-self: start;
	}
	.uku-header--logo_center .uku-header__logo {
		grid-column: 2;
		justify-self: center;
	}
}

/* Header transparent sur hero : fixé au-dessus du hero, fond transparent
   tant qu'on n'a pas scrollé, puis retour au fond de sa variante. */
.uku-header--transparent {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.uku-header.uku-header--transparent:not(.is-scrolled) {
	background: transparent;
	box-shadow: none;
	color: var(--uku-color-text-on-dark, #fff);
}

.uku-header__compare-trigger {
	background: none;
	border: 0;
	outline: none;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	color: inherit;
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 0;
}

.uku-footer__col-content { font-size: 13px; line-height: 1.7; }
.uku-footer__col-content p { margin: 0 0 8px; }
.uku-footer__col-content a { color: inherit; }

/* ═══════════════ RESPONSIVE TOTAL v3 — wide desktop (≥ 1440px) ═══════════════
   Typographie éditoriale qui respire, densité de grille maîtrisée. */

@media (min-width: 1440px) {
	.uku-catalog { padding: var(--uku-space-2xl) var(--uku-space-3xl) var(--uku-space-4xl); }

	.uku-products-grid .uku-grid { gap: var(--uku-space-lg); }

	.uku-collection-hero__title { font-size: 56px; }
	.uku-collection-hero__subtitle { font-size: 16px; }
	.uku-collection-hero--image .uku-collection-hero__content { padding: 140px var(--uku-space-3xl); }

	.uku-catalog__title { font-size: 44px; }

	.uku-pcarousel__track .uku-pcard {
		flex-basis: calc((100% - 5 * var(--uku-space-md)) / 5.5);
	}

	.uku-pdp__recent h2 { font-size: 28px; }

	.uku-megamenu__inner { max-width: 1360px; }
}

/* ═══════════════ CIBLES TACTILES (E.3 v3) — appareils sans survol ═══════════════
   Swatches et hotspots agrandis sur tactile : la cible réelle s'approche des
   44px recommandés sans alourdir le rendu desktop. */

@media (hover: none) {
	.uku-pcard .uku-pcard__swatch {
		width: 22px;
		height: 22px;
	}

	.uku-pcard__swatches { gap: 10px; }

	.uku-quickview .uku-quickview__swatch-dot {
		width: 26px;
		height: 26px;
	}

	.uku-lookbook .uku-lookbook__hotspot {
		width: 44px;
		height: 44px;
		font-size: 22px;
	}

	.uku-pcarousel__track { padding-bottom: 12px; }
}

/* ═══════════════ HEADER — 4 nouveaux styles (header_builder.template) ═══════════════
   "classic" (défaut) n'a AUCUNE classe ici : son CSS reste exactement celui
   ci-dessus, zéro régression. Chaque style ci-dessous n'affecte que ses
   propres éléments via .uku-header--tpl-{nom}, mobile-first, breakpoints
   768px/1024px comme le reste du fichier, mêmes tokens --uku-space-*/--uku-ease. */

/* ---------- centered-editorial : logo centré à tous les breakpoints ---------- */
.uku-header--tpl-centered-editorial .uku-header__inner--centered {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--uku-space-sm);
	padding: 0 var(--uku-space-md);
	min-height: var(--uku-header-h-mobile, 62px);
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.uku-header--tpl-centered-editorial .uku-header__inner--centered {
		min-height: var(--uku-header-h-tablet, 66px);
	}
}

@media (min-width: 1024px) {
	.uku-header--tpl-centered-editorial .uku-header__inner--centered {
		padding: 0 var(--uku-space-2xl);
		min-height: var(--uku-header-h-desktop, 70px);
	}
}

.uku-header--tpl-centered-editorial .uku-header__zone {
	display: flex;
	align-items: center;
	gap: var(--uku-space-md);
}

.uku-header--tpl-centered-editorial .uku-header__zone--start { grid-column: 1; justify-self: start; }
.uku-header--tpl-centered-editorial .uku-header__zone--end   { grid-column: 3; justify-self: end; }

.uku-header--tpl-centered-editorial .uku-header__logo--centered {
	grid-column: 2;
	justify-self: center;
	font-size: 18px;
	letter-spacing: 0.32em;
}

@media (min-width: 1024px) {
	.uku-header--tpl-centered-editorial .uku-header__logo--centered { font-size: 22px; }
}

.uku-header--tpl-centered-editorial .uku-header__nav--editorial { display: none; }

@media (min-width: 1024px) {
	.uku-header--tpl-centered-editorial .uku-header__nav--editorial {
		display: block;
	}
	.uku-header--tpl-centered-editorial .uku-header__zone--start .uku-header__burger { display: none; }
}

@media (max-width: 1023.98px) {
	.uku-header--tpl-centered-editorial .uku-header__zone--start .uku-header__burger { display: flex; }
}

/* ---------- sticky-compact : toujours sticky, se condense au scroll ---------- */
.uku-header--tpl-sticky-compact {
	transition: background-color var(--uku-dur, 0.3s) var(--uku-ease), box-shadow var(--uku-dur, 0.3s) var(--uku-ease);
}

.uku-header--tpl-sticky-compact .uku-header__inner {
	transition: min-height var(--uku-dur, 0.3s) var(--uku-ease), padding var(--uku-dur, 0.3s) var(--uku-ease);
}

.uku-header--tpl-sticky-compact .uku-header__logo {
	transition: font-size var(--uku-dur, 0.3s) var(--uku-ease);
}

.uku-header--tpl-sticky-compact.is-shrunk {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.uku-header--tpl-sticky-compact.is-shrunk .uku-header__inner {
	min-height: 48px;
}

@media (min-width: 1024px) {
	.uku-header--tpl-sticky-compact.is-shrunk .uku-header__inner {
		min-height: 54px;
	}
}

.uku-header--tpl-sticky-compact.is-shrunk .uku-header__logo {
	font-size: 14px;
}

@media (min-width: 1024px) {
	.uku-header--tpl-sticky-compact.is-shrunk .uku-header__logo {
		font-size: 16px;
	}
}

/* ---------- mega-editorial : un panneau plein-largeur par catégorie ---------- */
.uku-header--tpl-mega-editorial .uku-header__mega-nav-list {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
}

.uku-header--tpl-mega-editorial .uku-header__mega-nav-list a {
	font-family: var(--uku-font-body);
	text-decoration: none;
	color: inherit;
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding-bottom: 6px;
	border-bottom: 1px solid transparent;
}

.uku-header--tpl-mega-editorial .uku-header__mega-nav-list a:hover,
.uku-header--tpl-mega-editorial .uku-header__mega-nav-list a.is-active {
	color: var(--uku-color-accent);
	border-bottom-color: var(--uku-color-accent);
}

/* Un seul visuel par panneau (pas deux comme le mega-menu "Boutique") :
   colonne visuel plus large, mise en avant plus éditoriale. */
.uku-megamenu--editorial .uku-megamenu__inner {
	grid-template-columns: 1fr 340px;
}

.uku-megamenu__feature--single img {
	aspect-ratio: 16 / 10;
}

.uku-megamenu__all-link {
	display: inline-block;
	margin-top: var(--uku-space-md);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uku-color-accent);
	text-decoration: none;
}

.uku-megamenu__all-link:hover { text-decoration: underline; }

/* ---------- search-forward : barre de recherche toujours visible (desktop) ---------- */
.uku-header--tpl-search-forward .uku-header__inner--slim {
	min-height: 48px;
	padding: 0 var(--uku-space-md);
}

@media (min-width: 1024px) {
	.uku-header--tpl-search-forward .uku-header__inner--slim {
		min-height: 52px;
		padding: 0 var(--uku-space-2xl);
	}
}

.uku-header--tpl-search-forward .uku-header__search-row {
	display: none;
}

@media (min-width: 1024px) {
	.uku-header--tpl-search-forward .uku-header__search-row {
		display: block;
		padding: 0 var(--uku-space-2xl) var(--uku-space-md);
	}

	/* En desktop, l'icône recherche de la ligne fine est redondante avec la
	   barre toujours visible en dessous. */
	.uku-header--tpl-search-forward .uku-header__inner--slim .uku-header__search-trigger {
		display: none;
	}
}

.uku-header--tpl-search-forward .uku-header__search-form {
	display: flex;
	align-items: center;
	gap: var(--uku-space-sm);
	max-width: 640px;
	margin: 0 auto;
	padding: 10px var(--uku-space-md);
	border: 1px solid rgba(128, 128, 128, 0.3);
	border-radius: 999px;
	background: var(--uku-color-bg);
}

.uku-header--tpl-search-forward .uku-header__search-form svg {
	flex-shrink: 0;
	color: var(--uku-color-muted, #888);
}

.uku-header--tpl-search-forward .uku-header__search-input {
	flex: 1;
	border: none;
	outline: none;
	background: none;
	font-family: var(--uku-font-body);
	font-size: 14px;
	color: inherit;
}

.uku-header--tpl-search-forward .uku-header__search-submit {
	border: none;
	background: none;
	color: var(--uku-color-accent);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.uku-header--tpl-search-forward .uku-header__quick-cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--uku-space-xs);
	margin-top: var(--uku-space-sm);
}

.uku-header--tpl-search-forward .uku-header__quick-cat {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	padding: 6px 14px;
	border: 1px solid rgba(128, 128, 128, 0.25);
	border-radius: 999px;
	transition: border-color var(--uku-dur-fast, 0.15s) var(--uku-ease), color var(--uku-dur-fast, 0.15s) var(--uku-ease);
}

.uku-header--tpl-search-forward .uku-header__quick-cat:hover {
	border-color: var(--uku-color-accent);
	color: var(--uku-color-accent);
}

/* ===== BULLE DE DEVISE GÉOLOCALISÉE (Modules → Devises) =====
   Couleurs explicites plutôt que --uku-color-accent : trouvé en direct que
   l'accent peut être réglé sur blanc pur selon le site, ce qui casserait le
   bouton "Oui" ici. Positionnée à gauche pour ne jamais chevaucher le
   widget WhatsApp flottant (toujours à droite). */
.uku-geo-currency-bubble {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 250;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--uku-color-primary);
	color: var(--uku-color-text-on-dark, #fff);
	padding: 12px 14px;
	border-radius: 999px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
	font-family: var(--uku-font-body);
	font-size: 12.5px;
	max-width: calc(100vw - 32px);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.uku-geo-currency-bubble.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.uku-geo-currency-bubble { transition: opacity 0.15s linear; transform: none; }
}

.uku-geo-currency-bubble span { white-space: nowrap; }

.uku-geo-currency-bubble__confirm {
	background: #fff;
	color: var(--uku-color-primary);
	border: none;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}

.uku-geo-currency-bubble__dismiss {
	background: none;
	border: none;
	color: inherit;
	opacity: 0.7;
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	padding: 4px;
	-webkit-tap-highlight-color: transparent;
}

.uku-geo-currency-bubble__dismiss:hover { opacity: 1; }

@media (max-width: 480px) {
	.uku-geo-currency-bubble {
		left: 12px;
		right: 12px;
		max-width: none;
	}
}

/*
 * ===== CHECKOUT EN POP-UP (.uku-checkout-modal) =====
 * Contact → Livraison → Paiement, deux volets sur desktop/tablette paysage
 * (formulaire + récapitulatif toujours visible), plein écran avec
 * récapitulatif repliable sur mobile/tablette portrait (palier 780px,
 * cf. .uku-co-summary-pane ci-dessous). Couleurs/rayons/durées repris tels
 * quels du modèle validé (aperçu Thiane) : jetons dédiés (--co-*),
 * volontairement indépendants de --uku-color-* pour ne jamais dériver.
 * Polices : var(--uku-font-heading)/var(--uku-font-body) — Playfair
 * Display/Inter pour Thiane, déjà chargées par le thème (brand-tokens.php).
 */

.uku-checkout-modal {
	--co-ink: #0e0e10;
	--co-ink-soft: #55514a;
	--co-ink-faint: #a39c8a;
	--co-gold: #ab8a52;
	--co-bg: #ffffff;
	--co-line: #ece6d8;
	--co-line-soft: #f4f0e6;
	--co-err: #a8402c;
	--co-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	position: fixed; inset: 0; z-index: 1400;
	display: flex; align-items: center; justify-content: center; padding: 28px;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .3s var(--co-ease-out), visibility .3s;
	font-family: var(--uku-font-body);
}
.uku-checkout-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.uku-checkout-modal * { box-sizing: border-box; }

.uku-checkout-modal__overlay { position: absolute; inset: 0; background: rgba(14, 13, 10, 0.46); }

.uku-checkout-modal__panel {
	position: relative; width: 100%; max-width: 900px; height: min(660px, 90dvh);
	background: var(--co-bg); border-radius: 18px; overflow: hidden;
	display: flex; color: var(--co-ink);
	transform: translateY(16px) scale(.98); opacity: 0;
	transition: transform .4s var(--co-ease-out), opacity .28s var(--co-ease-out);
	box-shadow: 0 30px 90px rgba(14, 13, 10, 0.28);
}
.uku-checkout-modal.is-open .uku-checkout-modal__panel { transform: translateY(0) scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.uku-checkout-modal, .uku-checkout-modal__panel { transition: none; }
}

.uku-checkout-modal__close {
	position: absolute; top: 22px; right: 24px; z-index: 30;
	width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
	background: none; border: none; cursor: pointer; color: var(--co-ink-faint); transition: color .15s;
}
.uku-checkout-modal__close:hover { color: var(--co-ink); }
.uku-checkout-modal__close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }

/* Focus clavier : tout le contenu interactif du modal est un <button> (lignes
   de livraison, chips, toggle, résultats de recherche…) — une seule règle
   large couvre l'ensemble plutôt que de la dupliquer par sélecteur. Les
   champs texte gèrent déjà leur propre focus visuel via border-color. */
.uku-checkout-modal button:focus-visible {
	outline: 2px solid var(--co-ink); outline-offset: 2px; border-radius: 2px;
}

/* Pendant l'appel réseau de soumission : le formulaire se grise et devient
   non interactif (au lieu de ne désactiver que le bouton CTA), et fermer/
   revenir en arrière est bloqué pour ne jamais interrompre une commande en
   cours d'envoi. */
.uku-checkout-modal.is-busy .uku-co-form-head,
.uku-checkout-modal.is-busy .uku-co-body { pointer-events: none; opacity: 0.5; transition: opacity .2s var(--co-ease-out); }
.uku-checkout-modal.is-busy .uku-checkout-modal__close,
.uku-checkout-modal.is-busy .uku-co-back { pointer-events: none; opacity: 0.3; }

/* Message d'erreur — remplace les alert() natifs, qui cassaient net toute
   l'ambiance du modal (police système, blocage du thread, invisible dans le
   design). Toast discret ancré en haut du panneau formulaire. */
.uku-co-toast {
	position: absolute; top: 18px; left: 50%; z-index: 50; max-width: calc(100% - 96px);
	transform: translate(-50%, -8px); opacity: 0;
	background: var(--co-ink); color: #fff; font-size: 12.5px; line-height: 1.5;
	padding: 11px 18px; border-radius: 7px; box-shadow: 0 14px 34px rgba(14, 13, 10, 0.22);
	pointer-events: none; transition: opacity .2s var(--co-ease-out), transform .2s var(--co-ease-out);
}
.uku-co-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---------- left: form pane ---------- */
.uku-co-form-pane { flex: 1 1 58%; min-width: 0; display: flex; flex-direction: column; overflow-x: hidden; }
.uku-co-form-head { flex-shrink: 0; padding: 32px 44px 0; }

.uku-co-stepper { display: flex; align-items: center; gap: 10px; }
.uku-co-sp-lbl { font-size: 11px; font-weight: 500; color: var(--co-ink-faint); transition: color .2s var(--co-ease-out); }
.uku-co-sp.is-active .uku-co-sp-lbl { color: var(--co-ink); font-weight: 600; }
.uku-co-sp.is-done .uku-co-sp-lbl { color: var(--co-ink-soft); }
.uku-co-sp-line { flex: 1; height: 1px; background: var(--co-line); position: relative; min-width: 14px; }
.uku-co-sp-line::after { content: ''; position: absolute; inset: 0; background: var(--co-ink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--co-ease-out); }
.uku-co-sp-line.is-filled::after { transform: scaleX(1); }

.uku-co-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-size: 11px; font-weight: 500; color: var(--co-ink-faint); padding: 20px 0 0; transition: color .15s; }
.uku-co-back:hover { color: var(--co-ink); }
.uku-co-back svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
.uku-co-back[hidden] { display: none; }

/* overflow-x: hidden explicite — sans lui, un overflow-y:auto seul fait
   passer implicitement l'axe horizontal en "auto" aussi (règle CSS), ce qui
   rendait tout le corps du checkout "traînable" latéralement au moindre
   contenu dépassant d'un pixel (repéré en test mobile réel). */
.uku-co-body { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior-x: none; padding: 20px 44px 24px; }
.uku-co-body::-webkit-scrollbar { width: 4px; }
.uku-co-body::-webkit-scrollbar-thumb { background: var(--co-line); border-radius: 4px; }

.uku-co-step-title { font-family: var(--uku-font-heading); font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: -0.015em; margin: 8px 0 28px; color: var(--co-ink); }

.uku-co-foot { flex-shrink: 0; padding: 16px 44px 30px; }
.uku-co-cta {
	width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--co-ink); color: #fff; border: none; border-radius: 4px;
	padding: 16px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
	cursor: pointer; min-height: 50px; transition: opacity .15s var(--co-ease-out), transform .1s var(--co-ease-out); font-family: inherit;
}
.uku-co-cta:hover { opacity: 0.82; }
/* :active seul (pas de :hover tactile) — sans lui, un tap sur mobile ne donne
   strictement aucun retour visuel avant la navigation suivante. */
.uku-co-cta:active:not(:disabled) { opacity: 0.82; transform: scale(0.98); }
.uku-co-cta:disabled { opacity: 0.32; cursor: not-allowed; }
.uku-co-cta--ghost { background: transparent; color: var(--co-ink); border: 1px solid var(--co-line); }

/* ---------- right: summary pane ---------- */
.uku-co-summary-pane { flex: 0 0 320px; border-left: 1px solid var(--co-line); display: flex; flex-direction: column; overflow-x: hidden; }
.uku-co-summary-inner { flex: 1; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; overscroll-behavior-x: none; padding: 40px 32px 20px; }
.uku-co-sum-item { display: flex; gap: 12px; padding: 0 0 16px; }
.uku-co-sum-img { width: 44px; height: 56px; border-radius: 3px; object-fit: cover; flex-shrink: 0; background: var(--co-line-soft); }
.uku-co-sum-info { flex: 1; min-width: 0; }
.uku-co-sum-name { font-size: 12.5px; font-weight: 500; color: var(--co-ink); }
.uku-co-sum-meta { font-size: 11px; color: var(--co-ink-faint); margin-top: 3px; }
.uku-co-sum-price { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--co-ink); flex-shrink: 0; }

.uku-co-sum-divider { height: 1px; background: var(--co-line); margin: 4px 0 14px; }
.uku-co-sum-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 7px 0; }
.uku-co-sum-row span:first-child { color: var(--co-ink-faint); }
.uku-co-sum-row span:last-child { font-variant-numeric: tabular-nums; color: var(--co-ink); }
.uku-co-sum-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; margin-top: 6px; border-top: 1px solid var(--co-line); }
.uku-co-sum-total span:first-child { font-size: 11px; color: var(--co-ink-faint); }
.uku-co-sum-total span:last-child { font-family: var(--uku-font-heading); font-size: 24px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.uku-co-sum-eta { font-size: 11.5px; color: var(--co-ink-faint); margin-top: 12px; }

.uku-co-summary-toggle { display: none; }

@media (max-width: 780px) {
	.uku-checkout-modal { padding: 0; align-items: flex-end; }
	.uku-checkout-modal__panel { max-width: 100%; height: 96dvh; border-radius: 18px 18px 0 0; flex-direction: column; }

	/* Le récap complet passait AVANT le titre de l'étape (tout le pane en
	   order:-1), avec un padding-top:40px rien que pour dégager le "×" —
	   résultat : ~110px de bandeau quasi vide au-dessus de tout contenu
	   utile, avant même de voir "Contact/Livraison/Paiement" (signalé :
	   "le récap en haut surcharge la page"). On "déplie" les deux panes
	   (display:contents, sans changement de DOM ni de JS — les ids restent
	   valides) pour réordonner leurs enfants individuellement et faire
	   flotter la barre récap juste au-dessus du bouton CTA, comme sur la
	   plupart des checkouts mobile des grandes enseignes — jamais en tête
	   de page. */
	.uku-co-form-pane, .uku-co-summary-pane { display: contents; }
	/* form-head devient le tout premier élément du panneau : padding-right
	   élargi (60px, comme l'ancien clearance du récap) pour que le dernier
	   libellé du stepper ("Paiement") ne passe pas sous le "×" — vérifié en
	   direct, "Paiement" s'arrête ~6px avant le bord gauche du bouton. */
	.uku-co-form-head { order: 1; padding: 26px 60px 0 24px; }
	.uku-co-body { order: 2; padding: 16px 24px 12px; }
	.uku-co-summary-toggle { order: 3; }
	.uku-co-summary-inner { order: 4; }
	.uku-co-foot { order: 5; padding: 14px 24px 24px; }

	.uku-co-summary-toggle {
		display: flex; align-items: center; justify-content: space-between; width: 100%;
		padding: 14px 24px; background: none; border: none; border-top: 1px solid var(--co-line);
		cursor: pointer; text-align: left; font-family: inherit;
	}
	.uku-co-summary-toggle-lbl { font-size: 11px; color: var(--co-ink-faint); }
	.uku-co-summary-toggle-val { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--co-ink); }
	.uku-co-summary-toggle-val svg { width: 11px; height: 11px; stroke: var(--co-ink-faint); fill: none; stroke-width: 2; transition: transform .2s; }
	.uku-co-summary-toggle.is-expanded .uku-co-summary-toggle-val svg { transform: rotate(180deg); }
	.uku-co-summary-inner { border-top: 1px solid var(--co-line); max-height: 34vh; overflow-y: auto; padding: 4px 24px 16px; display: none; }
	.uku-co-summary-inner.is-expanded { display: block; }
}

/* ============ underline fields ============ */
.uku-co-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--co-line); margin-bottom: 24px; }
.uku-co-tab { position: relative; padding: 0 0 11px; font-size: 12px; font-weight: 500; background: none; border: none; color: var(--co-ink-faint); cursor: pointer; font-family: inherit; }
.uku-co-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--co-ink); transform: scaleX(0); transition: transform .2s var(--co-ease-out); }
.uku-co-tab.is-on { color: var(--co-ink); }
.uku-co-tab.is-on::after { transform: scaleX(1); }
.uku-co-tab:active { opacity: 0.6; }

.uku-co-field { margin-bottom: 20px; }
.uku-co-lbl { display: block; font-size: 10px; letter-spacing: 0.04em; color: var(--co-ink-faint); margin-bottom: 8px; }
.uku-co-inp {
	width: 100%; padding: 8px 0 10px; font-size: 15.5px; color: var(--co-ink);
	background: transparent; border: none; border-bottom: 1px solid var(--co-line); outline: none;
	transition: border-color .15s var(--co-ease-out); font-family: inherit;
}
.uku-co-inp:focus { border-color: var(--co-ink); }
.uku-co-inp::placeholder { color: #c9c2b0; }

/* Autofill navigateur (Chrome/Safari) : sans ce reset, l'input transparent
   en soulignement se retrouve peint en jaune/bleu opaque par le navigateur
   dès que le téléphone/nom est auto-rempli — rupture immédiate de palette.
   Le délai de transition énorme sur background-color est le contournement
   standard, webkit ne laissant pas modifier l'autofill autrement. */
.uku-checkout-modal input:-webkit-autofill,
.uku-checkout-modal input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--co-ink);
	-webkit-box-shadow: 0 0 0 1000px var(--co-bg) inset;
	box-shadow: 0 0 0 1000px var(--co-bg) inset;
	transition: background-color 9999s ease-in-out 0s;
}

/* État invalide — un seul champ concerné passe en rouge sourd avec message
   sous le champ ; jamais de rouge vif, cohérent avec la palette chaude. */
.uku-co-field.is-invalid .uku-co-inp,
.uku-co-field.is-invalid .uku-co-phone-row { border-color: var(--co-err); }
.uku-co-err-msg { display: block; font-size: 11px; color: var(--co-err); margin-top: 7px; }

.uku-co-phone-row { display: flex; align-items: flex-end; gap: 10px; border-bottom: 1px solid var(--co-line); transition: border-color .15s var(--co-ease-out); }
.uku-co-phone-row:focus-within { border-color: var(--co-ink); }
.uku-co-dial-trigger { display: flex; align-items: center; gap: 5px; padding: 8px 0 10px; border: none; background: none; cursor: pointer; font-size: 15px; color: var(--co-ink); flex-shrink: 0; white-space: nowrap; font-family: inherit; }
.uku-co-dial-trigger svg { width: 9px; height: 9px; stroke: var(--co-ink-faint); fill: none; stroke-width: 2; }
.uku-co-phone-inp { flex: 1; padding: 8px 0 10px; border: none; background: none; outline: none; font-size: 15.5px; color: var(--co-ink); min-width: 0; font-family: inherit; }

.uku-co-dial-dd { position: relative; }
.uku-co-dial-list { position: absolute; top: calc(100% + 8px); left: 0; width: 270px; max-width: calc(100vw - 88px); max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid var(--co-line); border-radius: 8px; box-shadow: 0 18px 44px rgba(14, 13, 10, 0.14); z-index: 40; padding: 6px; }
.uku-co-dial-search { width: 100%; padding: 9px 10px; margin-bottom: 4px; border: none; border-bottom: 1px solid var(--co-line); font-size: 13px; outline: none; font-family: inherit; background: none; }
.uku-co-dial-search:focus { border-color: var(--co-ink); }
.uku-co-dial-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 6px; border: none; background: none; border-radius: 5px; cursor: pointer; font-size: 13px; text-align: left; font-family: inherit; }
.uku-co-dial-item:hover { background: var(--co-line-soft); }
.uku-co-dial-item span:last-child { margin-left: auto; color: var(--co-ink-faint); font-size: 12px; }

.uku-co-chk { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; margin-top: 2px; }
.uku-co-chk input { display: none; }
.uku-co-chk-box { width: 15px; height: 15px; border: 1px solid var(--co-line); background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; transition: background-color .15s, border-color .15s; }
.uku-co-chk input:checked + .uku-co-chk-box { background: var(--co-ink); border-color: var(--co-ink); }
.uku-co-chk input:checked + .uku-co-chk-box::after { content: ''; width: 4px; height: 7px; border: 1.5px solid #fff; border-top: none; border-left: none; transform: rotate(45deg) translate(-1px,-1px); }
.uku-co-chk-txt { font-size: 12.5px; color: var(--co-ink-soft); line-height: 1.5; }
.uku-co-chk-sub { display: block; font-size: 11px; color: var(--co-ink-faint); margin-top: 2px; }

/* ============ rows (delivery, payment) — quiet, no fill, checkmark-led ============ */
.uku-co-glabel { font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--co-ink-faint); margin: 28px 0 6px; }
.uku-co-glabel:first-child { margin-top: 0; }

/* Toggle central "Livraison locale" / "Livraison internationale" — une seule
   branche affichée à la fois (cf. renderDelivery()), icônes trait fin
   monochromes noires cohérentes avec la charte (point 0 du brief). Même
   traitement en onglets soulignés que .uku-co-tabs (Téléphone/Email) —
   jamais de pastille à fond coloré, seul élément "encadré" qui aurait
   détonné dans un modal autrement tout en lignes fines et aplats blancs. */
.uku-co-scope-tabs { display: flex; border-bottom: 1px solid var(--co-line); margin: 4px 0 24px; }
.uku-co-scope-tab {
	flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
	position: relative; padding: 0 0 13px; border: none; background: none; cursor: pointer;
	font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--co-ink-faint);
	transition: color .15s var(--co-ease-out);
}
.uku-co-scope-tab svg { width: 15px; height: 15px; flex-shrink: 0; stroke: currentColor; }
.uku-co-scope-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--co-ink); transform: scaleX(0); transition: transform .2s var(--co-ease-out); }
.uku-co-scope-tab.is-active { color: var(--co-ink); font-weight: 600; }
.uku-co-scope-tab.is-active::after { transform: scaleX(1); }
.uku-co-scope-tab:active { opacity: 0.6; }

.uku-co-row {
	width: 100%; display: flex; align-items: center; gap: 14px;
	padding: 16px 2px; border-bottom: 1px solid var(--co-line-soft);
	background: none; cursor: pointer; text-align: left; font-family: inherit;
	transition: background-color .1s var(--co-ease-out);
	/* Un <button> hérite par défaut du navigateur d'un white-space proche de
	   "pre" (jamais posé nulle part ici, c'est le style natif des boutons) —
	   sans ce reset, un libellé long (ex. "LUGGZ — Livraison internationale
	   (payable à réception)") ne retourne jamais à la ligne et déborde,
	   simplement rogné en silence par l'overflow-x:hidden du corps du modal. */
	white-space: normal;
}
.uku-co-row:active { background: var(--co-line-soft); }
.uku-co-row-info { flex: 1; min-width: 0; }
.uku-co-row-name { font-size: 14.5px; color: var(--co-ink); transition: font-weight .1s; letter-spacing: -0.001em; }
.uku-co-row.is-on .uku-co-row-name { font-weight: 600; }
.uku-co-row-sub { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--co-ink-faint); margin-top: 8px; }
.uku-co-row-sub svg { width: 11px; height: 11px; stroke: var(--co-ink-faint); fill: none; stroke-width: 1.6; flex-shrink: 0; }
.uku-co-row-price { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--co-ink-soft); flex-shrink: 0; white-space: nowrap; }
.uku-co-row-check { width: 15px; height: 15px; flex-shrink: 0; opacity: 0; transition: opacity .15s var(--co-ease-out); }
.uku-co-row.is-on .uku-co-row-check { opacity: 1; }
.uku-co-row-check svg { width: 100%; height: 100%; stroke: var(--co-ink); fill: none; stroke-width: 2; stroke-linecap: round; }

.uku-co-cod-note { display: block; font-size: 11px; font-style: italic; color: var(--co-ink-faint); margin-top: 4px; }

.uku-co-search-wrap { position: relative; margin-bottom: 4px; }
.uku-co-search-wrap svg { position: absolute; right: 4px; top: 12px; width: 14px; height: 14px; stroke: var(--co-ink-faint); fill: none; stroke-width: 1.6; }
.uku-co-search-wrap input { width: 100%; padding: 8px 22px 10px 0; border: none; border-bottom: 1px solid var(--co-line); background: none; font-size: 15.5px; outline: none; font-family: inherit; }
.uku-co-search-wrap input:focus { border-color: var(--co-ink); }

.uku-co-suggest { position: relative; }
.uku-co-suggest-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: #fff; border: 1px solid var(--co-line); border-radius: 8px; box-shadow: 0 16px 40px rgba(14, 13, 10, 0.12); z-index: 30; max-height: 220px; overflow-y: auto; padding: 5px; display: none; }
.uku-co-suggest-list.is-open { display: block; }
.uku-co-suggest-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: 5px; cursor: pointer; text-align: left; font-size: 13.5px; font-family: inherit; }
.uku-co-suggest-item:hover { background: var(--co-line-soft); }
.uku-co-suggest-flag { font-size: 15px; line-height: 1; flex-shrink: 0; }
.uku-co-suggest-country { margin-left: auto; color: var(--co-ink-faint); font-size: 12px; }
.uku-co-suggest-loading, .uku-co-suggest-empty { padding: 12px 10px; font-size: 12.5px; color: var(--co-ink-faint); }

.uku-co-city-card { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--co-line); margin-bottom: 18px; }
.uku-co-city-card-flag { font-size: 20px; line-height: 1; flex-shrink: 0; }
.uku-co-city-card-name { font-size: 14px; font-weight: 500; }
.uku-co-city-card-sub { font-size: 11.5px; color: var(--co-ink-faint); margin-top: 2px; }
.uku-co-city-card-edit { margin-left: auto; font-size: 11px; color: var(--co-ink-faint); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-family: inherit; }
.uku-co-city-card-edit:hover { color: var(--co-ink); }

/* Étape Paiement : contact/livraison affichés en lecture seule pouvaient
   seulement se corriger via deux clics sur "Retour" — un lien "Modifier"
   saute directement à l'étape concernée (cf. renderPayment()). */
.uku-co-recap-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.uku-co-recap-row .uku-co-lbl { margin-bottom: 0; }
.uku-co-recap-edit { font-size: 11px; color: var(--co-ink-faint); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-family: inherit; }
.uku-co-recap-edit:hover { color: var(--co-ink); }

.uku-co-see-rates { font-size: 12.5px; color: var(--co-ink); background: none; border: 1px solid var(--co-line); border-radius: 4px; padding: 11px 14px; width: 100%; cursor: pointer; text-align: center; transition: border-color .15s; font-family: inherit; }
.uku-co-see-rates:hover { border-color: var(--co-ink); }
.uku-co-rates-loading { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--co-ink-faint); padding: 10px 2px; }
.uku-co-dot-spin { width: 12px; height: 12px; border: 1.5px solid var(--co-line); border-top-color: var(--co-ink-faint); border-radius: 50%; animation: uku-co-spin .7s linear infinite; }
@keyframes uku-co-spin { to { transform: rotate(360deg); } }

.uku-co-intl-panel { display: none; }
.uku-co-intl-panel.is-visible { display: block; }

.uku-co-pay-mark {
	width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
	overflow: hidden; border: 1px solid var(--co-line); background: #fff;
}
.uku-co-pay-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Paiement : récapitulatif produits (image + qté toujours visibles) ---------- */
.uku-co-pay-items { margin-bottom: 20px; }
.uku-co-pay-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--co-line-soft); }
.uku-co-pay-item:first-child { padding-top: 0; }
.uku-co-pay-item-img { width: 44px; height: 56px; border-radius: 3px; object-fit: cover; flex-shrink: 0; background: var(--co-line-soft); }
.uku-co-pay-item-info { flex: 1; min-width: 0; }
.uku-co-pay-item-name { font-size: 13px; font-weight: 500; color: var(--co-ink); }
.uku-co-pay-item-meta { font-size: 11.5px; color: var(--co-ink-faint); margin-top: 3px; }
.uku-co-pay-item-price { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--co-ink); flex-shrink: 0; align-self: center; }

/* ---------- Paiement : logos informatifs, non cliquables ---------- */
.uku-co-pay-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.uku-co-pay-chip {
	display: flex; align-items: center; gap: 8px; padding: 10px 14px;
	border: 1px solid var(--co-line); border-radius: 8px; font-size: 12px; color: var(--co-ink-soft);
}
.uku-co-pay-chip img { height: 20px; width: auto; object-fit: contain; }

/* ============ success ============ */
.uku-co-ok { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 10px 20px; gap: 16px; }
.uku-co-ok-mark { width: 1px; height: 40px; background: var(--co-gold); animation: uku-co-grow .5s var(--co-ease-out); }
@keyframes uku-co-grow { from { height: 0; } to { height: 40px; } }
.uku-co-ok-title { font-family: var(--uku-font-heading); font-size: 23px; margin: 4px 0 0; color: var(--co-ink); }
.uku-co-ok-num { font-size: 11.5px; color: var(--co-ink-faint); margin: 0; }
.uku-co-ok-num strong { color: var(--co-gold); font-weight: 600; }
.uku-co-ok-msg { font-size: 12.5px; color: var(--co-ink-faint); line-height: 1.7; max-width: 32ch; margin: 0; }

/* ============ confirmation de commande (woocommerce/checkout/thankyou.php) ============
   Jetons repris de .uku-checkout-modal (--co-*, valeurs dupliquées ici plutôt
   qu'une variable partagée : les deux templates ne s'imbriquent jamais, pas
   besoin d'indirection) pour une continuité visuelle avec le tunnel d'achat
   — cette page est la suite directe du checkout, pas une page éditoriale
   soumise à --uku-color-*. Pas de color-mix() (support navigateur trop
   récent pour l'audience Sénégal/mobile visée) : tons de fond dédiés
   --co-gold-tint/--co-err-tint au lieu d'une transparence calculée. */
.uku-order-confirm {
	--co-ink: #0e0e10;
	--co-ink-soft: #55514a;
	--co-ink-faint: #a39c8a;
	--co-gold: #ab8a52;
	--co-gold-tint: #f6f1e6;
	--co-err: #a8402c;
	--co-err-tint: #f8ece9;
	--co-line: #ece6d8;
	--co-line-soft: #f4f0e6;
	--co-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	justify-content: center;
	padding: var(--uku-space-3xl) var(--uku-space-md);
	background: var(--co-line-soft);
	min-height: 60vh;
}
.uku-order-confirm__card {
	width: 100%;
	max-width: 560px;
	background: #fff;
	border: 1px solid var(--co-line);
	border-radius: 20px;
	box-shadow: 0 24px 48px -28px rgba(14, 14, 16, 0.18);
	padding: var(--uku-space-3xl) var(--uku-space-xl);
	text-align: center;
	animation: uku-oc-in 0.5s var(--co-ease-out) both;
}
@media (max-width: 640px) {
	.uku-order-confirm { padding: var(--uku-space-xl) var(--uku-space-sm); }
	.uku-order-confirm__card { padding: var(--uku-space-2xl) var(--uku-space-lg); border-radius: 16px; }
}
@keyframes uku-oc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
	.uku-order-confirm__card { animation: none; }
	.uku-order-confirm__mark svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}

.uku-order-confirm__mark {
	width: 64px; height: 64px; margin: 0 auto var(--uku-space-lg);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--co-gold-tint); color: var(--co-gold);
}
.uku-order-confirm__mark--error { background: var(--co-err-tint); color: var(--co-err); }
.uku-order-confirm__mark--muted { background: var(--co-line-soft); color: var(--co-ink-faint); }
.uku-order-confirm__mark svg { width: 26px; height: 26px; }
.uku-order-confirm__mark svg path {
	stroke-dasharray: 24; stroke-dashoffset: 24;
	animation: uku-oc-draw 0.5s var(--co-ease-out) 0.2s forwards;
}
@keyframes uku-oc-draw { to { stroke-dashoffset: 0; } }

.uku-order-confirm__title {
	font-family: var(--uku-font-heading); text-transform: uppercase; letter-spacing: 0.12em;
	font-size: clamp(20px, 3.2vw, 26px); line-height: 1.25; margin: 0 0 var(--uku-space-sm); color: var(--co-ink);
}
.uku-order-confirm__text {
	color: var(--co-ink-soft); line-height: 1.6; font-size: 15px;
	margin: 0 auto var(--uku-space-lg); max-width: 40ch;
}
.uku-order-confirm__ref { font-size: 13px; color: var(--co-ink-faint); margin: 0 0 var(--uku-space-xl); letter-spacing: 0.02em; }
.uku-order-confirm__ref strong { color: var(--co-ink); font-weight: 600; }

.uku-order-confirm__recap { text-align: left; border-top: 1px solid var(--co-line); margin: 0 0 var(--uku-space-xl); }
.uku-order-confirm__item { display: flex; align-items: center; gap: var(--uku-space-sm); padding: var(--uku-space-md) 0; border-bottom: 1px solid var(--co-line); }
.uku-order-confirm__item-img { flex-shrink: 0; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--co-line-soft); }
.uku-order-confirm__item-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.uku-order-confirm__item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.uku-order-confirm__item-name { font-size: 14px; color: var(--co-ink); line-height: 1.35; }
.uku-order-confirm__item-qty { font-size: 12.5px; color: var(--co-ink-faint); }
.uku-order-confirm__item-price { flex-shrink: 0; font-size: 13.5px; color: var(--co-ink); font-variant-numeric: tabular-nums; }
.uku-order-confirm__item--muted .uku-order-confirm__item-name { color: var(--co-ink-faint); font-size: 13px; }
.uku-order-confirm__item--muted .uku-order-confirm__item-price { color: var(--co-ink-faint); font-size: 12.5px; }
.uku-order-confirm__total {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: var(--uku-space-md) 0 0; font-family: var(--uku-font-heading); font-size: 17px; color: var(--co-ink);
}

.uku-order-confirm .uku-btn { min-width: 220px; }
.uku-order-confirm__help { margin: var(--uku-space-lg) 0 0; font-size: 13px; }
.uku-order-confirm__help a { color: var(--co-ink-soft); text-decoration: none; border-bottom: 1px solid var(--co-line); padding-bottom: 1px; transition: color 0.15s var(--co-ease-out); }
.uku-order-confirm__help a:hover { color: var(--co-ink); }

/* Éléments natifs injectés malgré l'override de template (voir commentaire
   en tête de thankyou.php) : masqués en ciblé via le marqueur posé par
   uku_theme_chrome_variant()/le filtre body_class dans module-toggles.php,
   sans toucher aux hooks qui les déclenchent. */
body.uku-order-received .page-header { display: none; }
body.uku-order-received .woocommerce-order-details { display: none; }

/* ============ connexion / inscription (woocommerce/myaccount/form-login.php) ============ */
.uku-auth { max-width: 420px; margin: 0 auto; }
.uku-auth__tabs { display: flex; gap: 4px; margin: 0 0 28px; padding: 4px; background: var(--uku-color-bg-warm, #f3ede2); border-radius: 8px; }
.uku-auth__tab {
	flex: 1; padding: 11px 8px; border: none; border-radius: 6px; background: none; cursor: pointer;
	font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--uku-color-muted, #888);
}
.uku-auth__tab.is-active { background: var(--uku-color-bg, #fff); color: var(--uku-color-text-on-light, #1a1a1a); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.uku-auth__panel { display: none; }
.uku-auth__panel.is-active { display: block; }
.uku-auth__field { margin: 0 0 18px; }
.uku-auth__field label { display: block; font-size: 12px; color: var(--uku-color-muted, #777); margin-bottom: 6px; }
.uku-auth__input {
	width: 100%; padding: 13px 14px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px;
	font-size: 15px; font-family: var(--uku-font-body); background: var(--uku-color-bg, #fff); color: var(--uku-color-text-on-light, #1a1a1a);
}
.uku-auth__input:focus { outline: none; border-color: var(--uku-color-primary); }
.uku-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 24px; font-size: 12.5px; }
.uku-auth__remember { display: flex; align-items: center; gap: 8px; color: var(--uku-color-muted, #777); cursor: pointer; }
.uku-auth__checkbox { width: 16px; height: 16px; margin: 0; }
.uku-auth__lost { color: var(--uku-color-muted, #777); text-decoration: underline; text-underline-offset: 2px; }
.uku-auth__hint { font-size: 12.5px; color: var(--uku-color-muted, #777); margin: 0 0 18px; }
.uku-auth__submit { width: 100%; border: none; }

/* ============ navigation "Mon compte" (woocommerce/myaccount/navigation.php) ============ */
.uku-account-nav ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 0 32px; padding: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.uku-account-nav li { margin: 0; }
.uku-account-nav a {
	display: block; padding: 12px 16px; font-size: 12.5px; font-weight: 500; text-decoration: none;
	color: var(--uku-color-muted, #888); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.uku-account-nav li.is-active a { color: var(--uku-color-text-on-light, #1a1a1a); border-bottom-color: var(--uku-color-primary); }

/* Contenu par défaut WooCommerce (tableaux commandes, formulaires adresse) —
   pas de réécriture complète des templates, juste assez pour que ça ne
   détonne plus visuellement à côté du reste du site. */
.woocommerce-MyAccount-content { font-family: var(--uku-font-body); color: var(--uku-color-text-on-light, #1a1a1a); }
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content input[type="submit"] {
	display: inline-block; padding: 14px 36px; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
	border: 1px solid var(--uku-color-primary); background: var(--uku-color-primary); color: var(--uku-color-text-on-dark, #fff); cursor: pointer;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover { background: transparent; color: var(--uku-color-primary); }
.woocommerce-MyAccount-content table.shop_table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td { padding: 12px 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); text-align: left; }
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
	width: 100%; padding: 12px 14px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; font-family: var(--uku-font-body);
}
.woocommerce-MyAccount-content .form-row { margin: 0 0 16px; }
.woocommerce-MyAccount-content label { display: block; font-size: 12px; color: var(--uku-color-muted, #777); margin-bottom: 6px; }