/*
 * 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 reste la courbe par défaut (compat : déjà utilisée telle
	   quelle un peu partout) ; les deux suivantes couvrent les cas où
	   l'entrée et la sortie d'un même panneau doivent se distinguer
	   (ouverture qui "arrive" en décélérant, fermeture qui "part" en
	   accélérant) — absentes jusqu'ici, à utiliser plutôt que --uku-ease
	   quand ce détail compte (drawer/modal/popup open vs close). */
	--uku-ease: cubic-bezier(0.33, 1, 0.68, 1);
	--uku-ease-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
	--uku-ease-accelerate: cubic-bezier(0.4, 0, 1, 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;

	/* Icônes (uku_icon(), inc/icons.php) : --uku-icon-stroke existait déjà et
	   reste à 1.6 (ne pas changer — recolorerait toutes les icônes déjà en
	   prod) ; les tailles ci-dessous manquaient, chaque site les fixait en
	   dur par endroit plutôt que de piocher dans une échelle commune. */
	--uku-icon-size-xs: 14px;
	--uku-icon-size-sm: 16px;
	--uku-icon-size-md: 20px;
	--uku-icon-size-lg: 24px;
	--uku-icon-size-xl: 32px;
	--uku-icon-stroke: 1.6;

	/* Élévation boutons/cartes — 4 paliers, du plus discret au plus marqué.
	   Jusqu'ici aucun bouton du thème ne portait d'ombre (retour utilisateur :
	   "manque de boutons avec ombres") ; --uku-shadow-xs sert aussi de anneau
	   de focus clavier cohérent (--uku-shadow-focus), à la place des outline
	   ad hoc dispersés par composant. */
	--uku-shadow-xs: 0 1px 2px rgba(14, 14, 16, 0.06);
	--uku-shadow-sm: 0 1px 3px rgba(14, 14, 16, 0.10), 0 1px 2px rgba(14, 14, 16, 0.06);
	--uku-shadow-md: 0 4px 10px rgba(14, 14, 16, 0.12), 0 2px 4px rgba(14, 14, 16, 0.08);
	--uku-shadow-lg: 0 10px 24px rgba(14, 14, 16, 0.16), 0 4px 8px rgba(14, 14, 16, 0.08);
	--uku-shadow-focus: 0 0 0 2px var(--uku-color-bg, #fff), 0 0 0 4px var(--uku-color-ink);

	/* Spinner générique (.uku-spinner ci-dessous) : le checkout a déjà le
	   sien (--co-*/uku-co-spin, propre à sa palette locale) — celui-ci sert
	   partout ailleurs (boutons en chargement, PDP, admin) sans dépendre
	   d'un composant particulier. */
	--uku-spinner-size: 20px;
	--uku-spinner-track: rgba(14, 14, 16, 0.12);
	--uku-spinner-color: currentColor;
	--uku-spinner-thickness: 2px;
	--uku-spinner-duration: 0.7s;
}

/* ===== Spinner générique ===== */
.uku-spinner {
	display: inline-block;
	width: var(--uku-spinner-size);
	height: var(--uku-spinner-size);
	border-radius: 50%;
	border: var(--uku-spinner-thickness) solid var(--uku-spinner-track);
	border-top-color: var(--uku-spinner-color);
	animation: uku-spin var(--uku-spinner-duration) linear infinite;
	flex-shrink: 0;
}
.uku-spinner--xs { --uku-spinner-size: var(--uku-icon-size-xs); }
.uku-spinner--sm { --uku-spinner-size: var(--uku-icon-size-sm); }
.uku-spinner--lg { --uku-spinner-size: var(--uku-icon-size-xl); --uku-spinner-thickness: 2.5px; }
@keyframes uku-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.uku-spinner { animation-duration: 1.4s; }
}

/* ===== Fondu générique pour les images injectées en JS (recherche,
   favoris, cross-sell) ===== */
/* Ces listes sont construites par fetch() + innerHTML/createElement, pas de
   rendu serveur initial — contrairement aux grilles produit/hero (déjà
   équipées du squelette .uku-img-skeleton), leurs images apparaissaient
   d'un coup sec dès le chargement réseau terminé. Fondu simple plutôt qu'un
   squelette complet : miniatures trop petites pour qu'un shimmer apporte
   quoi que ce soit, juste éviter le "pop" brutal. */
.uku-fade-img { opacity: 0; transition: opacity 0.25s var(--uku-ease, ease); }
.uku-fade-img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.uku-fade-img { transition: none; opacity: 1; }
}

/* ===== COMPOSANTS PARTAGÉS (.uku-ui-btn / .uku-ui-card) =====
   Langage visuel générique, utilisable sur N'IMPORTE QUEL template (pas
   propre au checkout comme .uku-co-cta) — entièrement piloté depuis
   l'admin (Design → Composants) : style de bouton/carte via une classe
   sur <body> (inc/module-toggles.php, "classic"/"flat" = aucune règle
   dédiée ci-dessous, c'est le rendu de base), interrupteurs ombres/
   animations + préréglage de vitesse via les variables --uku-shadow-*/
   --uku-dur-*/--uku-ease déjà déclarées plus haut (inc/brand-tokens.php
   les réécrit selon ces réglages — rien à refaire ici, ces composants les
   consomment telles quelles). Inspiré de l'artefact "Signal & Surface"
   (boutons à états, cartes qui se soulèvent), traduit dans les tokens de
   ce projet plutôt que recopié tel quel.
   Préfixe "ui-" déliberé : .uku-btn (sans "ui") existe déjà depuis
   longtemps (templates PHP + contenu Elementor — fond plein --uku-color-
   primary, uppercase, modificateur .uku-btn--outline) et reste INCHANGÉ ;
   un nom identique aurait fait gagner ses règles sur celles-ci par simple
   ordre d'apparition dans le fichier (même spécificité 0-1-0). */
.uku-ui-btn {
	appearance: none; border: 1px solid transparent; cursor: pointer; font-family: inherit;
	font-weight: 600; font-size: calc(14px * var(--uku-ui-scale, 1)); border-radius: 4px;
	padding: 11px 22px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	transition: transform var(--uku-dur-fast) var(--uku-ease), box-shadow var(--uku-dur-fast) var(--uku-ease),
		background-color var(--uku-dur) var(--uku-ease), color var(--uku-dur) var(--uku-ease), border-color var(--uku-dur) var(--uku-ease);
}
.uku-ui-btn:focus-visible { outline: 2px solid var(--uku-color-accent); outline-offset: 2px; }
.uku-ui-btn:active:not(:disabled) { transform: scale(0.97); }
.uku-ui-btn:disabled { cursor: not-allowed; opacity: 0.45; box-shadow: none !important; transform: none !important; }

.uku-ui-btn-primary { background: var(--uku-color-accent); color: var(--uku-color-text-on-dark); box-shadow: var(--uku-shadow-sm); }
.uku-ui-btn-primary:hover:not(:disabled) { box-shadow: var(--uku-shadow-md); transform: translateY(-1px); filter: brightness(1.08); }
.uku-ui-btn-secondary { background: var(--uku-color-bg); color: var(--uku-color-text-on-light); border-color: rgba(0, 0, 0, 0.14); }
.uku-ui-btn-secondary:hover:not(:disabled) { border-color: rgba(0, 0, 0, 0.3); box-shadow: var(--uku-shadow-sm); transform: translateY(-1px); }
.uku-ui-btn-ghost { background: transparent; color: var(--uku-color-text-on-light); }
.uku-ui-btn-ghost:hover:not(:disabled) { background: rgba(0, 0, 0, 0.05); }
.uku-ui-btn-destructive { background: transparent; color: #c8372f; border-color: rgba(200, 55, 47, 0.3); }
.uku-ui-btn-destructive:hover:not(:disabled) { background: rgba(200, 55, 47, 0.08); }

/* États chargement/succès (JS : toggle is-loading puis is-success, jamais les
   deux à la fois) — même logique que .btn-primary.is-loading/.is-success de
   l'artefact de référence, réutilise le spinner générique (.uku-spinner). */
.uku-ui-btn.is-loading .uku-ui-btn-label { opacity: 0.75; }
.uku-ui-btn.is-success { background: #2e7d4f; color: #fff; }

/* Style "rounded" (Composants → Style de bouton) : coins doux au lieu de nets. */
body.uku-ui-btn-rounded .uku-ui-btn { border-radius: 10px; }
/* Style "pill" : entièrement arrondi. */
body.uku-ui-btn-pill .uku-ui-btn { border-radius: 999px; }
/* Style "outline" : même le PRIMARY part en contour plutôt qu'en plein — pour
   un site qui ne veut jamais de CTA "plaqué". */
body.uku-ui-btn-outline .uku-ui-btn-primary { background: transparent; color: var(--uku-color-accent); border-color: var(--uku-color-accent); box-shadow: none; }
body.uku-ui-btn-outline .uku-ui-btn-primary:hover:not(:disabled) { background: var(--uku-color-accent); color: var(--uku-color-text-on-dark); filter: none; }

.uku-ui-card {
	background: var(--uku-color-bg); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px;
	overflow: hidden; display: flex; flex-direction: column;
	transition: transform var(--uku-dur) var(--uku-ease), box-shadow var(--uku-dur) var(--uku-ease), border-color var(--uku-dur) var(--uku-ease);
}
/* Style "elevated" (Composants → Style de carte) : ombre + soulèvement au survol. */
body.uku-ui-card-elevated .uku-ui-card { box-shadow: var(--uku-shadow-sm); }
body.uku-ui-card-elevated .uku-ui-card:hover { transform: translateY(-6px); box-shadow: var(--uku-shadow-md); border-color: transparent; }
/* Style "outlined" : bordure marquée plutôt qu'un filet discret. */
body.uku-ui-card-outlined .uku-ui-card { border-width: 1.5px; border-color: rgba(0, 0, 0, 0.22); }

@media (prefers-reduced-motion: reduce) {
	.uku-ui-btn, .uku-ui-card { transition-duration: 0.001ms !important; }
	.uku-ui-btn:active:not(:disabled) { transform: none; }
}

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

body {
	font-family: var(--uku-font-body);
	font-size: var(--uku-type-body-size, 15px);
	color: var(--uku-color-text-on-light, var(--uku-color-primary));
	background: var(--uku-color-bg);
	margin: 0;
	-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: calc(12px * var(--uku-ui-scale, 1));
	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);
	/* Jusqu'ici aucune transition : le survol basculait la couleur sans
	   fondu et un clic n'avait aucun retour visuel (ni pression, ni
	   relâchement) — seul composant bouton du site dans ce cas, alors que
	   le reste de la charte utilise des transitions partout ailleurs. */
	transition: background-color 0.2s var(--uku-ease), color 0.2s var(--uku-ease), transform 0.12s var(--uku-ease-accelerate), border-color 0.2s var(--uku-ease);
}

.uku-btn:active {
	transform: scale(0.97);
}

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

.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: calc(12px * var(--uku-ui-scale, 1));
	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: calc(10px * var(--uku-ui-scale, 1));
		letter-spacing: 0.4em;
		text-transform: uppercase;
		color: var(--uku-color-muted, #888);
		z-index: 50;
		pointer-events: none;
	}
}

/* ===== SQUELETTE DE CHARGEMENT IMAGE (partagé par tout le site) =====
   Un seul mécanisme pour toute image lazy du thème (carte produit, hero,
   galerie PDP…) : poser la classe "uku-img-skeleton" sur le CONTENEUR qui a
   déjà sa taille réservée (aspect-ratio ou dimensions fixes), et
   onload/onerror="this.closest('.uku-img-skeleton').classList.add('is-loaded')"
   sur chaque <img> à l'intérieur — voir uku_img_skeleton_events() (theme/
   inc/image-skeleton.php). En attributs HTML plutôt que via interactions.js :
   une grille de filtres remplace son contenu par innerHTML à chaque clic
   (fetchGrid(), interactions.js) et un addEventListener posé une fois au
   chargement de la page ne verrait jamais ces cartes-là. onload/onerror
   fonctionnent eux quelle que soit la façon dont l'image entre dans le DOM —
   déjà le pattern du thème pour les feuilles de style différées
   (functions.php, onload="this.media='all'"), juste réappliqué ici. */
.uku-img-skeleton {
	position: relative;
	overflow: hidden;
	background-color: #f2f2f2;
}
.uku-img-skeleton::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 100%);
	background-size: 200% 100%;
	animation: uku-skeleton-shimmer 1.6s ease-in-out infinite;
	pointer-events: none;
}
/* ::before (pas le fond du conteneur) : une image à zones transparentes
   (PNG/SVG) laisserait sinon voir un fond plat, moins fini qu'un fondu net. */
.uku-img-skeleton.is-loaded::before { display: none; }
/* img:first-of-type seulement — jamais une 2ᵉ image empilée dans le même
   conteneur (ex. .uku-pcard__img-hover, le crossfade au survol de la carte
   produit) : celle-ci gère déjà sa propre opacité par défaut/au survol,
   qu'un fondu-en-entrée générique casserait en la rendant visible dès que
   la 1ʳᵉ image charge. */
.uku-img-skeleton img:first-of-type {
	opacity: 0;
	transition: opacity .45s var(--uku-ease, ease);
}
.uku-img-skeleton.is-loaded img:first-of-type { opacity: 1; }

@keyframes uku-skeleton-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.uku-img-skeleton::before { animation: none; }
	.uku-img-skeleton img:first-of-type { transition: none; }
}

/* ===== Squelette de GRILLE (section filtrable, changement de
   collection/filtre) =====
   Jusqu'ici un simple opacity:0.45 sur la grille existante pendant le
   chargement (voir .uku-cfg [data-role="grid"].is-loading) — un skeleton
   de cartes vides est perçu comme plus rapide qu'un indicateur de
   chargement à durée identique (retour UX constaté, pas juste esthétique),
   là où l'ancien dimming se contentait d'estomper du contenu déjà périmé.
   Généré en JS (fetchGrid(), interactions.js) au nombre de cartes
   réellement affichées, remplacé par le vrai HTML dès la réponse. */
.uku-pcard-skeleton { pointer-events: none; }
.uku-pcard-skeleton .uku-pcard-skeleton__media {
	aspect-ratio: 4 / 5;
	border-radius: 8px;
	margin-bottom: 10px;
}
.uku-pcard-skeleton .uku-pcard-skeleton__line {
	height: 11px;
	border-radius: 2px;
	margin-bottom: 6px;
}
.uku-pcard-skeleton .uku-pcard-skeleton__line--name { width: 70%; }
.uku-pcard-skeleton .uku-pcard-skeleton__line--price { width: 40%; }
.uku-pcard-skeleton .uku-pcard-skeleton__media,
.uku-pcard-skeleton .uku-pcard-skeleton__line {
	position: relative;
	overflow: hidden;
	background-color: #f2f2f2;
}
.uku-pcard-skeleton .uku-pcard-skeleton__media::before,
.uku-pcard-skeleton .uku-pcard-skeleton__line::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 100%);
	background-size: 200% 100%;
	animation: uku-skeleton-shimmer 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.uku-pcard-skeleton .uku-pcard-skeleton__media::before,
	.uku-pcard-skeleton .uku-pcard-skeleton__line::before { animation: 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));
}

/* ---- Bande utilitaire (devise + langue), tout en haut de page ----
   Même noir que le header (--uku-header-bg / --uku-color-primary, celui-là
   même que .uku-header--dark utilise) — jamais un hex séparé, sans quoi la
   moindre personnalisation de couleur de marque fait réapparaître une
   couture visible entre les deux bandes. */
.uku-utility-bar { background: var(--uku-header-bg, var(--uku-color-primary, #120e0a)); color: #fff; }

/* Padding horizontal identique à .uku-header__inner (16px mobile / 40px
   desktop, cf. plus bas) — sans ça FR/EN et les icônes du header juste en
   dessous ne partagent pas le même bord droit, écart mesuré de 16px en
   direct qui saute aux yeux vu que les deux bandes sont fondues en un seul
   bloc continu. Toujours garder ces deux règles synchronisées. */
.uku-utility-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--uku-space-md, 16px);
	padding: 6px 16px;
}

@media (min-width: 1024px) {
	.uku-utility-bar__inner { padding: 6px 40px; }
}

/* Bouton texte de base, partagé par la devise et la langue — une seule
   famille visuelle pour toute la bande plutôt qu'un <select> natif d'un
   côté et des boutons custom de l'autre. */
.uku-utility-bar__trigger,
.uku-utility-bar__lang-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.65);
	font-size: calc(11px * var(--uku-ui-scale, 1));
	font-weight: 500;
	letter-spacing: 0.06em;
	cursor: pointer;
	padding: 3px 4px;
	transition: color 0.15s var(--uku-ease, ease), opacity 0.1s;
}
.uku-utility-bar__trigger:hover,
.uku-utility-bar__lang-btn:hover { color: rgba(255, 255, 255, 0.92); }
.uku-utility-bar__trigger:active,
.uku-utility-bar__lang-btn:active { opacity: 0.6; }
.uku-utility-bar__lang-btn.is-active { color: #fff; font-weight: 600; }
.uku-utility-bar__lang-sep { color: rgba(255, 255, 255, 0.3); font-size: calc(11px * var(--uku-ui-scale, 1)); }
.uku-utility-bar__flag { font-size: calc(12px * var(--uku-ui-scale, 1)); line-height: 1; }

/* ---- Liens personnalisés (Design → Header & Footer → "Bande utilitaire") :
   zone centrale, entre devise et langue — même famille visuelle que les
   deux (texte clair, discret), flex:1 pour occuper l'espace restant et
   centrer ses propres liens plutôt que de les coller à un bord. ---- */
.uku-utility-bar__links { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; gap: var(--uku-space-md, 16px); min-width: 0; }
.uku-utility-bar__link {
	display: inline-flex; align-items: center; gap: 6px;
	color: rgba(255, 255, 255, 0.65); font-size: calc(11px * var(--uku-ui-scale, 1));
	font-weight: 500; letter-spacing: 0.04em; text-decoration: none;
	white-space: nowrap;
}
a.uku-utility-bar__link:hover { color: rgba(255, 255, 255, 0.92); }
.uku-utility-bar__link-icon { width: 16px; height: 16px; flex: 0 0 auto; display: block; }

/* ---- Devise : bouton + mini-menu, même mécanique/gabarit que le
   dropdown d'indicatif téléphonique du checkout (.uku-co-dial-dd) ---- */
.uku-utility-bar__currency { position: relative; }
.uku-utility-bar__trigger svg { width: 8px; height: 8px; stroke: rgba(255, 255, 255, 0.5); transition: transform 0.15s; }
.uku-utility-bar__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.uku-utility-bar__menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 84px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
	padding: 5px;
	/* Le header juste en dessous est sticky avec z-index:100 (.uku-header--
	   sticky) — sans passer au-dessus, ce menu s'ouvre visuellement "sous"
	   le header dès qu'il chevauche sa zone, constaté en direct. */
	z-index: 150;
}
.uku-utility-bar__menu-item {
	display: block;
	width: 100%;
	background: none;
	border: none;
	border-radius: 5px;
	padding: 7px 9px;
	font-size: calc(12px * var(--uku-ui-scale, 1));
	color: var(--uku-color-text-on-light, #1a1a1a);
	text-align: left;
	cursor: pointer;
}
.uku-utility-bar__menu-item:hover { background: rgba(0, 0, 0, 0.05); }
.uku-utility-bar__menu-item.is-active { font-weight: 600; }

.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: var(--uku-announcement-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: calc(13px * var(--uku-ui-scale, 1));
	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;
}

/* Modes "Aucune"/"Fondu"/"Clignotement" (Barre d'annonce → Animation) : tous
   les messages empilés dans la MÊME cellule de grille (grid-area partagée) —
   le conteneur se dimensionne automatiquement sur le plus large d'entre eux
   sans position:absolute à calculer à la main, et un seul est opaque
   (.is-active) à la fois. interactions.js fait tourner .is-active pour
   "Fondu"/"Clignotement" ; "Aucune" ne rend qu'un seul message, rien à faire
   tourner. */
.uku-announcement-bar__items {
	display: grid;
}

/* Scopé à .uku-announcement-bar__items : en mode Défilement, .uku-announcement-bar__item
   est réutilisé tel quel dans .uku-announcement-bar__track-seq (voir plus bas),
   où TOUS les messages doivent rester visibles en permanence — sans ce
   scopage, la règle opacity:0 ci-dessous les aurait aussi touchés là. */
.uku-announcement-bar__items .uku-announcement-bar__item {
	grid-area: 1 / 1;
	opacity: 0;
	pointer-events: none;
}

.uku-announcement-bar__items .uku-announcement-bar__item.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* Défilement (le "bandeau Meya") : deux copies identiques de la séquence
   posées côte à côte, translateX(-50%) en boucle infinie — un bouclage
   parfaitement invisible puisque les deux copies sont rigoureusement
   identiques et de même largeur. */
.uku-announcement-bar__track {
	flex: 1;
	min-width: 0;
	display: flex;
	overflow: hidden;
}

/* Élément réellement animé (translateX) — largeur = son propre contenu (les
   2 copies ci-dessous mises côte à côte), jamais celle de .track (étirée par
   flex:1 pour remplir la ligne). flex:0 0 auto l'empêche d'être étiré à son
   tour en tant qu'enfant flex de .track. */
.uku-announcement-bar__track-inner {
	display: flex;
	flex: 0 0 auto;
}

.uku-announcement-bar__track-seq {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	gap: var(--uku-space-sm);
}

.uku-announcement-bar__sep {
	opacity: 0.6;
}

@media (prefers-reduced-motion: no-preference) {
	.uku-announcement-bar--fade .uku-announcement-bar__item {
		transition: opacity 0.6s ease;
	}

	.uku-announcement-bar--blink .uku-announcement-bar__item.is-active {
		animation: uku-announce-blink var(--uku-announcement-speed, 1.6s) ease-in-out infinite;
	}

	.uku-announcement-bar--marquee .uku-announcement-bar__track-inner {
		animation: uku-announce-marquee var(--uku-announcement-speed, 24s) linear infinite;
	}

	/* Pause au survol — le temps de lire, comme le Carrousel hero. */
	.uku-announcement-bar--marquee:hover .uku-announcement-bar__track-inner {
		animation-play-state: paused;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Pas de boucle : seule la copie "réelle" (non dupliquée) reste visible,
	   statique — jamais les deux copies identiques l'une sous l'autre. */
	.uku-announcement-bar__track-seq[aria-hidden] {
		display: none;
	}
}

@keyframes uku-announce-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes uku-announce-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.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: calc(17px * var(--uku-ui-scale, 1));
	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: calc(20px * var(--uku-ui-scale, 1));
		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: calc(12px * var(--uku-ui-scale, 1));
	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: calc(12px * var(--uku-ui-scale, 1));
	letter-spacing: 0.04em;
}

.uku-header__currency-select {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: inherit;
	font-size: calc(11px * var(--uku-ui-scale, 1));
	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; }

/* Ancré sur le centre de l'icône (24px), pas sur les bords du bouton :
   la zone tactile varie (46px sur mobile), l'icône non — le badge chevauche
   toujours le coin haut-droit du panier. */
.uku-header__cart-count {
	position: absolute;
	top: calc(50% - 19px);
	left: calc(50% + 3px);
	right: auto;
	background: var(--uku-color-accent);
	color: var(--uku-color-primary);
	font-size: calc(10px * var(--uku-ui-scale, 1));
	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: calc(15px * var(--uku-ui-scale, 1));
	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: calc(12px * var(--uku-ui-scale, 1));
	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: calc(13px * var(--uku-ui-scale, 1));
	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: calc(12px * var(--uku-ui-scale, 1));
	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: calc(13px * var(--uku-ui-scale, 1));
	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 =====
   Refonte 2026-09-16/17 (brief : "trop générique... premium, léger, épuré,
   mobile first, structure accordéon luxe"). Fond identique au header
   (--uku-color-primary, même noir) — jetons locaux --f-* redéfinis sur
   .uku-footer plutôt que dupliqués dans chaque règle, même pattern que
   .uku-checkout-modal/.uku-order-confirm (--co-*) : tout ce qui lit déjà
   var(--f-ink)/var(--f-muted)/var(--f-hair) hérite automatiquement des
   valeurs adaptées au fond sombre. Polices Fraunces/Instrument Sans
   propres à ce composant (enqueue séparé, functions.php) — pas les
   polices de marque (--uku-font-heading/body), volontairement.
   CSS écrit MOBILE FIRST : les règles de base décrivent l'écran étroit ;
   @media (min-width:860px) plus bas n'ajoute que des enrichissements,
   jamais l'inverse — la version mobile n'est pas un desktop rétréci. */
.uku-footer {
	--f-ink: #f6f3ea;
	--f-muted: rgba(246, 243, 234, .5);
	--f-hair: rgba(246, 243, 234, .14);
	--f-gold: #c9a870; /* --uku-color-accent, valeur brute/claire pour fond sombre (pas la variante encre pensée pour fond clair) */
	margin-top: 64px;
	background: var(--uku-color-primary);
	color: var(--f-ink);
	font-family: 'Instrument Sans', var(--uku-font-body), sans-serif;
}
.uku-footer--dark { background: var(--uku-color-primary); }

/* ---- Variante "editorial" (modules.footer.layout) — polices de marque,
   pas celles du footer par défaut. ---- */
.uku-footer--editorial {
	--fe-white: #f5f0ea;
	--fe-muted: #888;
	--fe-border: rgba(255, 255, 255, 0.08);
	--fe-border2: rgba(255, 255, 255, 0.14);
	margin-top: 0;
	background: #0a0a0a;
	color: var(--fe-white);
	font-family: var(--uku-font-body), sans-serif;
}
.uku-fe__nl { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--fe-border); }
.uku-fe__nl-left,
.uku-fe__nl-right { padding: 44px 20px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.uku-fe__nl-left { border-bottom: 1px solid var(--fe-border); }
.uku-fe__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--uku-color-accent);
}
.uku-fe__eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; flex-shrink: 0; }
.uku-fe__nl-title {
	margin: 0;
	font-family: var(--uku-font-heading);
	font-size: clamp(28px, 3.5vw, 46px);
	font-weight: 500;
	line-height: 1.15;
	color: var(--fe-white);
}
.uku-fe__nl-title em { font-style: italic; font-weight: 600; color: var(--uku-color-accent); }
.uku-fe__nl-text { margin: 0; max-width: 300px; font-size: 12px; font-weight: 300; line-height: 1.75; color: var(--fe-muted); }
.uku-footer--editorial .uku-fe__form { flex-direction: column; align-items: stretch; gap: 10px; max-width: none; margin: 0; padding: 0; border: 0; }
.uku-fe__input-wrap { position: relative; }
.uku-fe__input-wrap svg {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	fill: none;
	stroke: var(--fe-muted);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}
.uku-footer--editorial .uku-fe__input {
	width: 100%;
	height: 48px;
	padding: 0 16px 0 42px;
	font-size: 16px;
	color: var(--fe-white);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--fe-border2);
	border-radius: 4px;
	outline: none;
}
.uku-footer--editorial .uku-fe__input::placeholder { color: var(--fe-muted); }
.uku-footer--editorial .uku-fe__input:focus { border-color: var(--uku-color-accent); background: rgba(224, 159, 61, 0.06); }
.uku-fe__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 20px;
	border: 1.5px solid var(--uku-color-accent);
	border-radius: 4px;
	background: var(--uku-color-accent);
	color: #0a0a0a;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 0.18s;
}
.uku-fe__btn:hover { opacity: 0.88; }
.uku-fe__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.uku-fe__note { font-size: 10px; line-height: 1.5; color: var(--fe-muted); }
.uku-footer--editorial .uku-footer__newsletter-feedback:not([hidden]) { margin: 0; font-size: 12px; text-align: left; color: var(--uku-color-accent); }

.uku-fe__body { display: grid; grid-template-columns: 1fr; }
.uku-fe__body > div { padding: 44px 20px; border-bottom: 1px solid var(--fe-border); }
.uku-fe__body > div:last-child { border-bottom: 0; }
.uku-fe__logo {
	display: block;
	margin-bottom: 6px;
	font-family: var(--uku-font-heading);
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--fe-white);
	text-decoration: none;
}
.uku-fe__location { display: block; margin-bottom: 28px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fe-muted); }
.uku-fe__tagline { margin: 0 0 32px; font-size: 13px; font-weight: 300; line-height: 1.85; color: rgba(245, 240, 234, 0.5); }
.uku-fe__socials { display: flex; gap: 4px; margin: 0 0 0 -10px; padding: 0; list-style: none; }
.uku-fe__social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: rgba(245, 240, 234, 0.55);
	transition: background 0.18s, color 0.18s;
}
.uku-fe__social:hover { background: rgba(255, 255, 255, 0.06); color: var(--fe-white); }
.uku-fe__social svg { width: 17px; height: 17px; }
.uku-fe__col-head { display: block; margin-bottom: 24px; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fe-muted); }
.uku-fe__contact ul { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
.uku-fe__contact li { display: flex; align-items: center; gap: 14px; }
.uku-fe__ci {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--fe-border2);
}
.uku-fe__ci svg { width: 14px; height: 14px; fill: none; stroke: var(--uku-color-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.uku-fe__clabel { display: block; font-size: 9px; font-weight: 500; letter-spacing: 0.16em; line-height: 1.3; text-transform: uppercase; color: var(--fe-muted); }
.uku-fe__cval { display: block; font-size: 13px; line-height: 1.5; color: rgba(245, 240, 234, 0.75); text-decoration: none; transition: color 0.18s; }
a.uku-fe__cval:hover { color: var(--fe-white); }

.uku-fe__bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 20px;
	border-top: 1px solid var(--fe-border);
}
.uku-fe__copy { margin: 0; font-size: 11px; font-weight: 300; line-height: 1.5; color: var(--fe-muted); }
.uku-fe__copy strong { font-family: var(--uku-font-heading); font-size: 13px; font-style: italic; font-weight: 500; color: rgba(245, 240, 234, 0.65); }
.uku-fe__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.uku-fe__legal li { display: flex; align-items: center; gap: 6px; }
.uku-fe__legal li + li::before { content: ''; width: 1px; height: 10px; background: var(--fe-border2); }
.uku-fe__legal a { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fe-muted); text-decoration: none; transition: color 0.18s; }
.uku-fe__legal a:hover { color: var(--fe-white); }

@media (min-width: 961px) {
	.uku-fe__nl { grid-template-columns: 1fr 1fr; }
	.uku-fe__nl-left { border-bottom: 0; border-right: 1px solid var(--fe-border); }
	.uku-fe__nl-left,
	.uku-fe__nl-right,
	.uku-fe__body > div { padding: 52px clamp(20px, 5%, 56px); }
	.uku-fe__body { grid-template-columns: 1.7fr 1fr; }
	.uku-fe__body > div { border-bottom: 0; border-right: 1px solid var(--fe-border); }
	.uku-fe__body > div:last-child { border-right: 0; }
	.uku-fe__tagline { max-width: 300px; }
	.uku-fe__bottom { flex-direction: row; align-items: center; justify-content: space-between; padding: 18px clamp(20px, 5%, 56px); }
}

/* -- identité : logo + nom côte à côte, ratio du header réel (--uku-logo-
   max-height:40px pour un nom à 17-19px, soit ×~2,3) mis à l'échelle du
   footer (44px/19px, même ratio) plutôt qu'une taille arbitraire. -- */
.uku-footer__top { max-width: 1120px; margin: 0 auto; padding: 64px 24px 40px; text-align: center; }
.uku-footer__id-row { display: inline-flex; align-items: center; gap: 14px; margin: 0 auto; }
/* Sélecteur qualifié par .uku-footer (pas juste .uku-footer__logo) —
   nécessaire pour battre .woocommerce img/.woocommerce-page img
   (woocommerce-layout.css, height:auto + max-width:100%, spécificité
   0-1-1 > 0-1-0 d'un sélecteur à une seule classe) qui gagnait sinon sur
   toute page portant la classe body woocommerce/woocommerce-page —
   boutique, fiche produit, panier, compte… mais jamais l'accueil (page
   Elementor classique, sans ces classes) : logo du footer à sa taille
   naturelle (300x300, ~100px) au lieu de 44px partout sauf l'accueil. */
.uku-footer .uku-footer__logo { height: 44px; width: auto; display: block; opacity: .97; }
.uku-footer__brand {
	font-family: 'Instrument Sans', var(--uku-font-body), sans-serif;
	font-size: calc(19px * var(--uku-ui-scale, 1)); font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; margin: 0;
}
.uku-footer__tagline { display: none; }

.uku-footer__hr { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.uku-footer__hr::after { content: ''; display: block; height: 1px; background: var(--f-hair); }

/* -- newsletter : une ligne courte, pas un titre-évènement -- */
.uku-footer__newsletter { max-width: 1120px; margin: 0 auto; padding: 36px 24px; text-align: center; }
.uku-footer__nl-eyebrow { font-size: calc(10px * var(--uku-ui-scale, 1)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--f-gold); margin: 0 0 10px; }
.uku-footer__nl-title {
	font-family: 'Fraunces', var(--uku-font-heading), serif; font-style: italic; font-weight: 400; font-optical-sizing: auto;
	font-size: calc(19px * var(--uku-ui-scale, 1)); line-height: 1.4; margin: 0 auto 22px; max-width: 26ch; color: var(--f-ink); opacity: .92;
}
.uku-footer__newsletter-form { display: flex; align-items: center; gap: 10px; max-width: 340px; margin: 0 auto; border-bottom: 1px solid var(--f-hair); padding-bottom: 11px; }
.uku-footer__newsletter-input { flex: 1; min-width: 0; border: none; background: none; padding: 0; font: inherit; font-size: calc(14px * var(--uku-ui-scale, 1)); color: var(--f-ink); text-align: left; }
.uku-footer__newsletter-input::placeholder { color: var(--f-muted); }
.uku-footer__newsletter-btn {
	appearance: none; border: 1px solid var(--f-gold); background: none; cursor: pointer; padding: 0;
	width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	transition: background-color .2s, border-color .2s;
}
.uku-footer__newsletter-btn:hover { background: var(--f-gold); }
.uku-footer__newsletter-btn:hover svg { stroke: var(--uku-color-primary); }
.uku-footer__newsletter-btn svg { width: 11px; height: 11px; stroke: var(--f-gold); stroke-width: 1.4; fill: none; transition: stroke .2s; }
.uku-footer__newsletter-feedback:not([hidden]) { font-size: calc(11.5px * var(--uku-ui-scale, 1)); color: var(--f-muted); margin: 10px 0 0; text-align: center; }

/* -- Contact/Informations en accordéon sur mobile (le repli, pas
   l'empilement, distingue un pied de page Ssense/Totême/COS d'un pied de
   page WordPress générique) — ouverts à plat automatiquement dès 860px
   (@media plus bas), sans JS supplémentaire à cette largeur. -- */
.uku-footer__acc-list { max-width: 1120px; margin: 0 auto; }
.uku-footer__acc { border-top: 1px solid var(--f-hair); }
.uku-footer__acc:last-child { border-bottom: 1px solid var(--f-hair); }
.uku-footer__acc-head {
	width: 100%; display: flex; align-items: center; justify-content: space-between;
	appearance: none; border: none; background: none; cursor: pointer; font: inherit;
	padding: 18px 24px; font-size: calc(11px * var(--uku-ui-scale, 1)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--f-ink);
}
.uku-footer__acc-chev { width: 9px; height: 9px; stroke: var(--f-muted); stroke-width: 1.6; fill: none; transition: transform .3s cubic-bezier(.16,1,.3,1); flex-shrink: 0; }
.uku-footer__acc.is-open .uku-footer__acc-chev { transform: rotate(180deg); }
.uku-footer__acc-body { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.16,1,.3,1); }
.uku-footer__acc.is-open .uku-footer__acc-body { max-height: 260px; }
.uku-footer__acc-body-inner { display: flex; flex-direction: column; gap: 4px; padding: 0 24px 20px; }
.uku-footer__acc a,
.uku-footer__acc span.uku-footer__acc-plain,
.uku-footer__acc-menu { list-style: none; margin: 0; padding: 0; }
.uku-footer__acc-menu li { margin: 0; padding: 0; }
.uku-footer__acc a,
.uku-footer__acc span.uku-footer__acc-plain,
.uku-footer__acc-menu a { font-size: calc(13px * var(--uku-ui-scale, 1)); color: var(--f-muted); text-decoration: none; line-height: 2; display: block; }
.uku-footer__acc a:hover,
.uku-footer__acc-menu a:hover { color: var(--f-ink); }

.uku-footer__social { display: flex; align-items: center; justify-content: center; gap: 16px; max-width: 1120px; margin: 0 auto; padding: 0 24px 20px; }
.uku-footer__social-link { display: flex; color: var(--f-muted); transition: color .18s ease; }
.uku-footer__social-link:hover, .uku-footer__social-link:focus-visible { color: var(--f-gold); }

.uku-footer__legal { max-width: 1120px; margin: 0 auto; padding: 28px 24px; text-align: center; }
.uku-footer__legal p { margin: 0; font-size: calc(10.5px * var(--uku-ui-scale, 1)); letter-spacing: 0.02em; color: var(--f-muted); }

@media (min-width: 860px) {
	.uku-footer__top { padding: 80px 24px 0; text-align: left; }
	.uku-footer__tagline { display: block; font-size: calc(12px * var(--uku-ui-scale, 1)); color: var(--f-muted); margin: 6px 0 0; }

	.uku-footer__newsletter { text-align: right; padding: 28px 24px 56px; }
	.uku-footer__nl-eyebrow { text-align: right; }
	.uku-footer__nl-title { margin: 0 0 20px auto; text-align: right; font-size: calc(21px * var(--uku-ui-scale, 1)); }
	.uku-footer__newsletter-form { margin: 0 0 0 auto; }

	.uku-footer__acc-list { display: flex; gap: 72px; border-top: 1px solid var(--f-hair); padding: 32px 24px; }
	.uku-footer__acc { border: none; flex: 0 0 auto; }
	.uku-footer__acc:last-child { border: none; }
	.uku-footer__acc-head { width: auto; padding: 0 0 12px; pointer-events: none; }
	.uku-footer__acc-chev { display: none; }
	.uku-footer__acc-body { max-height: none !important; overflow: visible; }
	.uku-footer__acc-body-inner { padding: 0; }

	.uku-footer__legal { display: flex; align-items: center; justify-content: space-between; text-align: left; border-top: 1px solid var(--f-hair); padding: 18px 24px; }
}

/* ===== 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: calc(13px * var(--uku-ui-scale, 1));
	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);
}

/* Variante erreur (brief 2026-09-15) : taille/mesures non choisies avant
   "Ajouter au panier" — l'ancien message inline (.uku-pdp__size-error,
   .uku-quickview__size-error) restait positionné près du sélecteur de
   taille, invisible si le client avait déjà scrollé ailleurs sur la page ou
   sur un petit écran mobile. Centrée plutôt qu'en bas comme le toast de
   succès : position:fixed identique (donc déjà indépendante du scroll),
   mais un ancrage au centre évite toute confusion avec le toast "Ajouté au
   panier" et se voit immédiatement quel que soit l'endroit de la page où le
   client se trouvait au moment du clic. */
.uku-toast--error {
	bottom: auto;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.96);
	background: #a4322e;
	border-left: none;
	text-align: center;
	box-shadow: 0 20px 48px rgba(14, 13, 10, 0.28);
}
.uku-toast--error.is-visible {
	transform: translate(-50%, -50%) scale(1);
}

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

.uku-hero { overflow: hidden; }

/* Typographie fluide du hero — pilotée par l'onglet admin "Typographie"
   (rôles h1/body/eyebrow, voir inc/brand-tokens.php::uku_fluid_clamp()) :
   base rem mélangée au terme vw, jamais du vw pur (piège d'accessibilité
   zoom texte). Même système que toutes les autres sections, pas une formule
   propre au hero — changer la taille des H1 dans l'admin change aussi ce titre. */
.uku-hero__eyebrow {
	font-size: var(--uku-type-eyebrow-size, 0.75rem);
	font-weight: var(--uku-type-eyebrow-weight, 500);
	letter-spacing: var(--uku-type-eyebrow-tracking, 0.2em);
	color: var(--uku-color-accent, #c9a870);
	margin: 0 0 12px;
}

/* --uku-hero-title-size/--uku-hero-title-font : réglage "Taille de titre"/
   "Police du titre" de Hero → Texte & animation (modules.hero.text, voir
   uku_render_hero_html()), opt-in et partagé par les 9 types de hero hors
   Image de fond — absents tant que l'admin ne les a pas activés, repli sur
   le rôle H1 global comme avant. */
.uku-hero__title {
	font-family: var(--uku-hero-title-font, var(--uku-font-heading));
	font-size: var(--uku-hero-title-size, var(--uku-type-h1-size, clamp(1.75rem, 1.1rem, 4.5rem)));
	font-weight: var(--uku-type-h1-weight, 500);
	letter-spacing: var(--uku-type-h1-tracking, 0);
	margin: 0 0 16px;
	line-height: 1.1;
	text-wrap: balance;
}

.uku-hero__subtitle {
	font-size: var(--uku-type-body-size, 1rem);
	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: calc(12px * var(--uku-ui-scale, 1));
	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);
}

/* Boutons d'une diapositive de carrousel : inline-flex pour suivre le
   text-align de la diapositive (gauche/centre/droite). */
.uku-hero__ctas {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 12px;
}

.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; }
}

/* Hauteur pilotée par les mêmes variables que le hero "Image de fond" et le
   Carrousel (Hero → Texte & animation → "Plein cadre", voir plus bas) — texte
   et voile réutilisent tels quels .uku-hero__bg/__scrim/__overlay. */
.uku-hero--fullscreen-video {
	position: relative;
	height: var(--uku-hero-h-mobile, 60vh);
	display: flex;
	overflow: hidden;
	background: var(--uku-color-primary);
}

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

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

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

.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; }

/* Le Fronton — hauteur volontairement quasi fixe (Guide Hero Sections §02) :
   pas de clamp() sur la hauteur ni de lecture de modules.hero.layout.height_*,
   contrairement aux autres types. Titre nettement plus petit que les autres
   heros — ce n'est pas une accroche de page d'accueil. */
.uku-hero--minimal-band {
	padding: 32px 24px;
	text-align: center;
	border-bottom: 1px solid var(--uku-color-border, #e8e3dc);
}
.uku-hero--minimal-band .uku-hero__title { font-size: var(--uku-hero-title-size, clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem)); margin-bottom: 8px; }
.uku-hero--minimal-band .uku-hero__subtitle { margin-bottom: 0; }
.uku-hero--minimal-band .uku-hero__breadcrumb { margin-top: 10px; font-size: calc(12px * var(--uku-ui-scale, 1)); color: var(--uku-color-muted, #888); }
.uku-hero--minimal-band .uku-hero__breadcrumb p { margin: 0; }
.uku-hero--minimal-band .uku-hero__breadcrumb a { color: inherit; text-decoration: none; }
.uku-hero--minimal-band .uku-hero__breadcrumb a:hover { text-decoration: underline; }

/* La Vitrine — même structure que Le Diptyque (split-image), le mockup est
   cadré et légèrement incliné plutôt que posé à plat (Guide Hero Sections §02) :
   met en scène un produit/capture plutôt qu'une simple photo d'ambiance. */
.uku-hero--product-showcase { display: flex; flex-direction: column; }
.uku-hero--product-showcase .uku-hero__content { padding: 40px 24px; }
.uku-hero--product-showcase .uku-hero__showcase-frame {
	transform: rotate(-3deg);
	box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	overflow: hidden;
	margin: 24px;
}
.uku-hero--product-showcase .uku-hero__showcase-frame img { width: 100%; height: auto; display: block; }
@media (min-width: 768px) {
	.uku-hero--product-showcase { flex-direction: row; align-items: center; }
	.uku-hero--product-showcase .uku-hero__content { flex: 1; padding: 40px 60px; }
	.uku-hero--product-showcase .uku-hero__media { flex: 1; }
	.uku-hero--product-showcase .uku-hero__showcase-frame { margin: 24px 60px 24px 0; }
}

/* Le Guichet — champ de capture unique + CTA (Guide Hero Sections §02) :
   cible tactile >= 44px pour l'input et le bouton (guide, accessibilité). */
.uku-hero--search-form { display: flex; flex-direction: column; padding: 56px 24px; text-align: center; }
.uku-hero--search-form .uku-hero__content { max-width: 480px; margin: 0 auto; width: 100%; }
.uku-hero__search { display: flex; gap: 8px; margin-top: 8px; }
.uku-hero__search-field {
	flex: 1; height: 48px; padding: 0 16px;
	border: 1px solid var(--uku-color-border, #ddd); border-radius: 4px;
	font-size: calc(15px * var(--uku-ui-scale, 1)); /* >= 16px évité de justesse : cf. patch iOS existant sur les champs checkout — ok ici, champ non soumis au zoom auto (type=search) */
}
.uku-hero__search-submit {
	width: 48px; height: 48px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--uku-color-primary); color: var(--uku-color-text-on-dark, #fff);
	border: none; border-radius: 4px; cursor: pointer;
}
.uku-hero__search-submit:hover { opacity: 0.85; }

/* La Scène — formes décoratives en CSS pur (aucun asset requis), masquées
   sous 768px pour garder le focus sur le texte (guide §02, type 7/9). */
.uku-hero--illustration { position: relative; overflow: hidden; padding: 56px 24px; text-align: center; }
.uku-hero--illustration .uku-hero__content { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; }
.uku-hero--illustration .uku-hero__media { position: relative; z-index: 1; margin-top: 24px; }
.uku-hero--illustration .uku-hero__media img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.uku-hero__scene { position: absolute; inset: 0; z-index: 0; }
.uku-hero__blob { position: absolute; border-radius: 50%; background: var(--uku-color-accent, #c9a870); opacity: 0.12; }
.uku-hero__blob--1 { width: 46vw; height: 46vw; max-width: 420px; max-height: 420px; top: -10%; left: -10%; }
.uku-hero__blob--2 { width: 30vw; height: 30vw; max-width: 280px; max-height: 280px; bottom: -8%; right: -6%; background: var(--uku-color-primary); }
.uku-hero__blob--3 { width: 16vw; height: 16vw; max-width: 140px; max-height: 140px; top: 55%; left: 8%; background: transparent; border: 2px solid var(--uku-color-accent, #c9a870); opacity: 0.25; }
@media (max-width: 767px) { .uku-hero__scene { display: none; } }

/* La Mosaïque — grille bento de modules.hero.slides, 3 à 6 blocs de tailles
   variées (guide §02, type 8/9) ; le premier bloc est le plus grand. */
.uku-hero--bento { padding: 40px 24px; }
.uku-hero--bento .uku-hero__bento-text { max-width: 560px; margin: 0 auto 24px; text-align: center; }
.uku-hero__bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 1100px; margin: 0 auto; }
.uku-hero__bento-tile { position: relative; display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 1; }
.uku-hero__bento-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uku-hero__bento-tile-label {
	position: absolute; left: 10px; bottom: 10px; z-index: 1;
	font-size: calc(11px * var(--uku-ui-scale, 1)); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
	color: #fff; background: rgba(0, 0, 0, 0.55); padding: 4px 10px; border-radius: 4px;
}
.uku-hero__bento-grid--count-3 .uku-hero__bento-tile:first-child,
.uku-hero__bento-grid--count-5 .uku-hero__bento-tile:first-child,
.uku-hero__bento-grid--count-6 .uku-hero__bento-tile:first-child {
	grid-column: span 2; aspect-ratio: 2 / 1;
}
@media (min-width: 640px) {
	.uku-hero__bento-grid { grid-template-columns: repeat(4, 1fr); }
	.uku-hero__bento-grid--count-3 .uku-hero__bento-tile:first-child,
	.uku-hero__bento-grid--count-5 .uku-hero__bento-tile:first-child,
	.uku-hero__bento-grid--count-6 .uku-hero__bento-tile:first-child {
		grid-column: span 2; grid-row: span 2; aspect-ratio: 1;
	}
}

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

/* Hauteur/point focal pilotés par les mêmes variables que le hero "Image de
   fond" (Hero → Disposition, voir plus bas) — un carrousel est, visuellement,
   un hero "Image de fond" dont l'image change dans le temps. */
.uku-hero--carousel {
	position: relative;
	height: var(--uku-hero-h-mobile, 60vh);
	overflow: hidden;
}

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

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

.uku-hero__track { position: relative; height: 100%; 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; height: 100%; display: flex; opacity: 0; transition-property: opacity; transition-timing-function: ease; }
.uku-hero__slide.is-active { opacity: 1; position: relative; }

/* 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%;
}

/* Superposées au bas de l'image (comme les flèches) plutôt qu'en flux : la
   section a désormais une hauteur fixe (Hero → Disposition), des puces en
   flux normal après .uku-hero__track déborderaient de cette hauteur. */
.uku-hero__dots { position: absolute; left: 0; right: 0; bottom: 0; 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; }

/* Couleur du titre par écran (Hero → Texte & animation, + override par
   diapositive pour le Carrousel) — CHAQUE palier ne lit QUE sa propre
   variable et retombe DIRECTEMENT sur le blanc par défaut, jamais sur la
   variable d'un autre écran. Piège trouvé en testant (pas en relisant le
   code) : un premier jet "mobile-first" en cascade (tablette replie sur
   mobile, desktop replie sur tablette) faisait déborder une couleur réglée
   "mobile uniquement" jusque sur l'affichage tablette/desktop — une valeur
   nommée "-mobile" n'est pas une "valeur de base", c'est une valeur PROPRE
   à cet écran précis, qui ne doit jamais s'appliquer ailleurs. */
.uku-hero__overlay .uku-hero__title,
.uku-hero__overlay .uku-hero__eyebrow,
.uku-hero__overlay .uku-hero__subtitle { color: var(--uku-hero-title-color-mobile, #fff); }

@media (min-width: 768px) {
	.uku-hero__overlay .uku-hero__title,
	.uku-hero__overlay .uku-hero__eyebrow,
	.uku-hero__overlay .uku-hero__subtitle { color: var(--uku-hero-title-color-tablet, #fff); }
}

@media (min-width: 1024px) {
	.uku-hero__overlay .uku-hero__title,
	.uku-hero__overlay .uku-hero__eyebrow,
	.uku-hero__overlay .uku-hero__subtitle { color: var(--uku-hero-title-color-desktop, #fff); }
}

/* Taille du titre par écran, PAR DIAPOSITIVE (Carrousel uniquement — les
   autres types continuent de lire uniquement --uku-hero-title-size, le
   clamp fluide global posé sur .uku-hero__title plus haut). Plus spécifique
   que cette règle générique (.uku-hero__overlay .uku-hero__title l'emporte
   sur .uku-hero__title à spécificité égale sinon), donc sans danger pour
   les 8 autres types qui n'émettent jamais ces variables. Même principe
   d'indépendance par écran que la couleur ci-dessus : repli direct sur le
   clamp fluide global, jamais sur la variable d'un autre écran. */
@media (min-width: 768px) {
	.uku-hero__overlay .uku-hero__title { font-size: var(--uku-hero-title-size-tablet, var(--uku-hero-title-size, var(--uku-type-h1-size, clamp(1.75rem, 1.1rem, 4.5rem)))); }
}

@media (min-width: 1024px) {
	.uku-hero__overlay .uku-hero__title { font-size: var(--uku-hero-title-size-desktop, var(--uku-hero-title-size, var(--uku-type-h1-size, clamp(1.75rem, 1.1rem, 4.5rem)))); }
}

@media (max-width: 767px) {
	.uku-hero__overlay .uku-hero__title { font-size: var(--uku-hero-title-size-mobile, var(--uku-hero-title-size, var(--uku-type-h1-size, clamp(1.75rem, 1.1rem, 4.5rem)))); }
}

.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; }
}

/* ===== HERO — Texte & animation, partagés par les 9 types hors Image de
   fond (Hero → Texte & animation, modules.hero.text) =====
   Alignement/côté/animation n'émettent une classe sur <section> QUE si
   l'admin a fait un choix explicite ("Par défaut" ne touche à rien) — voir
   uku_render_hero_html(). Mêmes sélecteurs/spécificité que les règles par
   type ci-dessus : placées après elles dans ce fichier, l'ordre de source
   les fait gagner en cas d'égalité. */

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

/* Côté du texte — ne concerne que les 2 types à deux colonnes (Image
   scindée, Produit en vitrine) ; inerte pour les 7 autres, aucun sélecteur
   ne les cible. */
@media (min-width: 768px) {
	.uku-hero--text-side-right.uku-hero--split-image,
	.uku-hero--text-side-right.uku-hero--product-showcase { flex-direction: row-reverse; }
}

/* Animation d'entrée — jamais sous prefers-reduced-motion:reduce (la requête
   ne matche que "no-preference", donc rien n'est déclaré du tout si
   l'utilisateur a demandé moins de mouvement). */
@media (prefers-reduced-motion: no-preference) {
	.uku-hero--anim-fade .uku-hero__content,
	.uku-hero--anim-fade .uku-hero__overlay-inner { animation: uku-hero-anim-fade 0.7s ease both; }
	.uku-hero--anim-slide-up .uku-hero__content,
	.uku-hero--anim-slide-up .uku-hero__overlay-inner { animation: uku-hero-anim-slide-up 0.7s ease both; }
	.uku-hero--anim-slide-left .uku-hero__content,
	.uku-hero--anim-slide-left .uku-hero__overlay-inner { animation: uku-hero-anim-slide-left 0.7s ease both; }
	.uku-hero--anim-slide-right .uku-hero__content,
	.uku-hero--anim-slide-right .uku-hero__overlay-inner { animation: uku-hero-anim-slide-right 0.7s ease both; }

	/* Animation PAR DIAPOSITIVE (Carrousel uniquement, Hero → Diapositives) —
	   posée en attribut plutôt qu'en classe sur .uku-hero__overlay-inner :
	   interactions.js relance cette même animation à chaque changement de
	   diapositive (une animation CSS ne se rejoue pas seule quand son élément
	   redevient visible, seulement à son insertion/premier rendu). */
	.uku-hero__overlay-inner[data-slide-anim="fade"] { animation: uku-hero-anim-fade 0.7s ease both; }
	.uku-hero__overlay-inner[data-slide-anim="slide_up"] { animation: uku-hero-anim-slide-up 0.7s ease both; }
	.uku-hero__overlay-inner[data-slide-anim="slide_left"] { animation: uku-hero-anim-slide-left 0.7s ease both; }
	.uku-hero__overlay-inner[data-slide-anim="slide_right"] { animation: uku-hero-anim-slide-right 0.7s ease both; }
}

@keyframes uku-hero-anim-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes uku-hero-anim-slide-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes uku-hero-anim-slide-left { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: translateX(0); } }
@keyframes uku-hero-anim-slide-right { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: translateX(0); } }

/* ===== 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: calc(12px * var(--uku-ui-scale, 1));
	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: calc(13px * var(--uku-ui-scale, 1));
	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;
}

.uku-catalog__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.uku-catalog__breadcrumb {
	font-size: calc(12px * var(--uku-ui-scale, 1));
	color: var(--uku-color-muted, #888);
	margin-bottom: 8px;
}
.uku-catalog__breadcrumb a { color: inherit; }

.uku-catalog__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 20px;
	font-size: calc(12.5px * var(--uku-ui-scale, 1));
	color: var(--uku-color-muted, #777);
}

.uku-catalog__sort select {
	border: 1px solid rgba(128, 128, 128, 0.3);
	background: transparent;
	padding: 6px 10px;
	font-size: inherit;
	color: inherit;
}

.uku-catalog__promo-banner {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 8px 0;
}

.uku-catalog__promo-banner img {
	width: 100%;
	height: auto;
	display: block;
}

.uku-catalog__promo-banner-title {
	position: absolute;
	left: 24px;
	bottom: 24px;
	color: #fff;
	font-family: var(--uku-font-heading);
	font-size: calc(20px * var(--uku-ui-scale, 1));
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.uku-catalog__pagination {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

/* 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: calc(13px * var(--uku-ui-scale, 1));
}
.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: calc(12.5px * var(--uku-ui-scale, 1)); 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); }
/* Règle :hover/:focus dédiée obligatoire : sans elle, le filet de sécurité
   anti-rose (classe+pseudo-classe 0-1-1 contre une simple classe 0-1-0,
   cf. commentaire plus haut dans ce fichier) gagne au survol et rend le
   fond/texte de la pilule transparents. */
.uku-cfg__trigger:hover,
.uku-cfg__trigger:focus { color: var(--cfg-paper); background: var(--cfg-ink); border-color: var(--cfg-ink); }
.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:hover,
.uku-cfg__tag-trigger:focus { background: var(--cfg-paper); border-color: #d6d6d6; }
.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: calc(13px * var(--uku-ui-scale, 1)); 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: calc(13.5px * var(--uku-ui-scale, 1)); 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: calc(11px * var(--uku-ui-scale, 1)); 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: calc(12.5px * var(--uku-ui-scale, 1)); 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: calc(17px * var(--uku-ui-scale, 1)); 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: calc(12.5px * var(--uku-ui-scale, 1)); 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: calc(12.5px * var(--uku-ui-scale, 1)); 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: calc(11.5px * var(--uku-ui-scale, 1)); 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: calc(12px * var(--uku-ui-scale, 1)); 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). */

/* Changer de collection/rubrique peut renvoyer beaucoup moins de produits
   que ce qui est affiché : fetchGrid() (interactions.js) verrouille alors
   la hauteur de la grille (min-height posé en JS avant l'appel AJAX) et lui
   ajoute .is-loading — sans quoi la grille s'effondrait instantanément à sa
   nouvelle hauteur dès le remplacement du HTML, sans aucun signal visuel
   entre-temps (le bouton "Voir plus" ne concerne que sa propre action, pas
   un changement de collection) : mesuré en direct, jusqu'à 170px de saut,
   la page "remontait" d'un coup sous les pieds de l'utilisateur. */
.uku-cfg [data-role="grid"] { transition: opacity .15s var(--cfg-ease-out); }
/* opacity retiré ici (contrairement à avant) : le contenu sous .is-loading
   est désormais un squelette de cartes fraîchement posé (fetchGrid(),
   interactions.js), pas l'ancienne grille qu'il fallait estomper — l'assombrir
   rendrait le squelette terne sans raison. pointer-events reste nécessaire
   (pas de clic sur des cartes fantômes pendant le chargement). */
.uku-cfg [data-role="grid"].is-loading { pointer-events: none; }

/* ---- "Voir plus" ---- */
.uku-cfg__more-wrap { display: flex; justify-content: center; margin-top: 22px; }
.uku-cfg__more-btn {
	font-size: calc(12px * var(--uku-ui-scale, 1)); 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; }

/* ---- facettes réelles (Prix/Couleur/Taille/Note) : même corps HTML pour le
   panneau ancré desktop et la feuille mobile (category-filter-facets.php),
   jetons --cfg-* déjà déclarés ci-dessus, aucun nouveau à ajouter. ---- */
.uku-cfg__facets-body { padding: 6px 16px 18px; display: flex; flex-direction: column; gap: 22px; }
.uku-cfg__facet-section + .uku-cfg__facet-section { padding-top: 18px; border-top: 1px solid var(--cfg-line-soft); }
.uku-cfg__facet-title {
	font-size: calc(11px * var(--uku-ui-scale, 1)); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--cfg-ink-faint); margin: 0 0 12px;
}

.uku-cfg__price-row { display: flex; align-items: center; gap: 8px; }
.uku-cfg__price-input {
	width: 100%; min-width: 0; border: 1px solid var(--cfg-line); border-radius: 8px;
	padding: 10px 12px; font-size: calc(13.5px * var(--uku-ui-scale, 1)); color: var(--cfg-ink);
	background: var(--cfg-paper); font-family: inherit;
}
.uku-cfg__price-input:focus-visible { outline: 2px solid var(--cfg-clay); outline-offset: 1px; }
.uku-cfg__price-sep { color: var(--cfg-ink-faint); flex: 0 0 auto; }
.uku-cfg__price-apply {
	margin-top: 10px; width: 100%;
	font-size: calc(12px * var(--uku-ui-scale, 1)); 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: 10px 0; cursor: pointer; min-height: 40px; font-family: inherit;
	transition: background-color .15s var(--cfg-ease-out), color .15s var(--cfg-ease-out);
}
.uku-cfg__price-apply:hover { background: var(--cfg-ink); color: var(--cfg-paper); }
.uku-cfg__price-apply:focus-visible { outline: 2px solid var(--cfg-clay); outline-offset: 2px; }

/* Pastilles rondes (réglage "Affichage de la facette Couleur" = Pastilles) :
   anneau de sélection plutôt qu'une coche colorée à contraster contre un
   fond de pastille inconnu à l'avance (blanc, noir, pastel...) — la coche
   svg reste posée en repli visuel via mix-blend-mode, jamais la seule
   indication d'état actif. */
.uku-cfg__swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }
.uku-cfg__color-swatch {
	position: relative; width: 32px; height: 32px; border-radius: 50%;
	border: 1.5px solid var(--cfg-line); background-color: var(--cfg-cream-2);
	cursor: pointer; padding: 0; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
}
.uku-cfg__color-swatch.is-active { box-shadow: 0 0 0 2px var(--cfg-paper), 0 0 0 4px var(--cfg-ink); }
.uku-cfg__color-swatch:focus-visible { outline: 2px solid var(--cfg-clay); outline-offset: 3px; }
.uku-cfg__color-check { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.4; mix-blend-mode: difference; opacity: 0; pointer-events: none; }
.uku-cfg__color-swatch.is-active .uku-cfg__color-check { opacity: 1; }

/* Réglage "Liste à cocher" : carré (multi-sélection) plutôt que le rond des
   rubriques (.uku-cfg__tag-box, sélection unique) — même composant visuel,
   juste la forme qui distingue les deux sémantiques au premier coup d'œil. */
.uku-cfg__checklist { display: flex; flex-direction: column; gap: 2px; }
.uku-cfg__check-row {
	display: flex; align-items: center; gap: 10px; width: 100%;
	background: transparent; border: none; border-radius: 8px; padding: 10px;
	cursor: pointer; text-align: left; font-family: inherit;
	font-size: calc(13px * var(--uku-ui-scale, 1)); color: var(--cfg-ink);
}
.uku-cfg__check-row:hover { background: var(--cfg-cream-2); }
.uku-cfg__check-row .uku-cfg__tag-box { border-radius: 4px; }
.uku-cfg__check-row.is-active .uku-cfg__tag-box { background: var(--cfg-ink); border-color: var(--cfg-ink); }
.uku-cfg__check-row.is-active .uku-cfg__tag-radio-dot { opacity: 1; border-radius: 2px; inset: 4px; }

.uku-cfg__size-row { display: flex; flex-wrap: wrap; gap: 8px; }
.uku-cfg__size-chip {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 40px; padding: 0 12px;
	font-size: calc(12.5px * var(--uku-ui-scale, 1)); font-weight: 600; color: var(--cfg-ink);
	background: var(--cfg-paper); border: 1px solid var(--cfg-line); border-radius: 8px;
	cursor: pointer; font-family: inherit;
}
.uku-cfg__size-chip.is-active { background: var(--cfg-ink); border-color: var(--cfg-ink); color: var(--cfg-paper); }
.uku-cfg__size-chip:focus-visible { outline: 2px solid var(--cfg-clay); outline-offset: 2px; }

.uku-cfg__rating-list { display: flex; flex-direction: column; gap: 2px; }
.uku-cfg__rating-row {
	display: flex; align-items: center; gap: 10px; width: 100%;
	background: transparent; border: none; border-radius: 8px; padding: 10px;
	cursor: pointer; text-align: left; font-family: inherit;
}
.uku-cfg__rating-row:hover, .uku-cfg__rating-row.is-active { background: var(--cfg-cream-2); }
.uku-cfg__rating-stars { color: var(--cfg-clay); font-size: 14px; letter-spacing: 1px; flex: 0 0 auto; }
.uku-cfg__rating-label { font-size: calc(12.5px * var(--uku-ui-scale, 1)); color: var(--cfg-ink-soft); }

/* Panneau plus étroit (formulaire empilé) que le panneau Collections
   (liste multi-colonnes) — règle placée après .uku-cfg__panel { width } pour
   gagner à spécificité égale (même nombre de classes, l'ordre source
   tranche). */
@media (min-width: 768px) {
	.uku-cfg__panel--facets { width: 320px; }
	.uku-cfg__panel--facets .uku-cfg__facets-body { padding: 16px; }
}

/* ===== Présentations FilterRegistry (hors "Panneau ancré", déjà ci-dessus)
   — chaque bloc ne change QUE l'habillage/positionnement, jamais le contrat
   data-role ni le JS ([data-uku-cfg], interactions.js), identiques aux 6
   types. "anchored_panel" n'a pas de bloc ici : c'est déjà le comportement
   par défaut décrit plus haut. ===== */

/* ---- Barre sticky : la barre large reste collée sous le header ---- */
@media (min-width: 768px) {
	.uku-cfg--sticky-bar .uku-cfg__bar--wide {
		position: sticky;
		top: var(--uku-header-h-desktop, 70px);
		z-index: 30;
		background: var(--cfg-paper);
		padding: 10px 16px;
		transition: box-shadow .2s var(--cfg-ease-out);
	}
	.uku-cfg--sticky-bar .uku-cfg__bar--wide.is-stuck {
		box-shadow: 0 8px 20px rgba(18, 14, 10, 0.12);
	}
}

/* ---- Barre intégrée : fondue dans la page jusqu'à ce qu'on la dépasse ---- */
@media (min-width: 768px) {
	.uku-cfg--inline-sticky .uku-cfg__bar--wide {
		position: sticky;
		top: var(--uku-header-h-desktop, 70px);
		z-index: 30;
		background: transparent;
		padding: 0;
		transition: background-color .2s var(--cfg-ease-out), box-shadow .2s var(--cfg-ease-out), padding .2s var(--cfg-ease-out);
	}
	.uku-cfg--inline-sticky .uku-cfg__bar--wide.is-stuck {
		background: var(--cfg-paper);
		box-shadow: 0 8px 20px rgba(18, 14, 10, 0.12);
		padding: 10px 16px;
	}
}

/* ---- Prise de contrôle plein écran, Tiroir latéral, Overlay transparent :
   les 3 réutilisent la feuille mobile (.uku-cfg__sheet/-scrim, déjà cachée
   ≥768px par défaut quelques règles plus haut) à TOUTES les largeurs, et
   masquent la barre large au profit des déclencheurs mobiles (data-role
   "collections-trigger"/"tags-trigger"/"facets-trigger", déjà branchés sur
   openSheet() — voir interactions.js, aucune ligne de JS à ajouter). Chaque
   sélecteur a 2 classes (.uku-cfg--{type} + l'élément) contre 1 pour la
   règle "display:none" qu'il faut contrer : il gagne à spécificité égale
   sans avoir besoin d'!important. ---- */
@media (min-width: 768px) {
	.uku-cfg--fullscreen-takeover .uku-cfg__bar--wide,
	.uku-cfg--side-drawer .uku-cfg__bar--wide,
	.uku-cfg--live-overlay .uku-cfg__bar--wide { display: none; }

	.uku-cfg--fullscreen-takeover .uku-cfg__bar--mobile,
	.uku-cfg--side-drawer .uku-cfg__bar--mobile,
	.uku-cfg--live-overlay .uku-cfg__bar--mobile { display: flex; gap: 8px; }

	.uku-cfg--fullscreen-takeover .uku-cfg__sheet-scrim,
	.uku-cfg--side-drawer .uku-cfg__sheet-scrim,
	.uku-cfg--live-overlay .uku-cfg__sheet-scrim { display: block; }

	.uku-cfg--fullscreen-takeover .uku-cfg__sheet,
	.uku-cfg--side-drawer .uku-cfg__sheet,
	.uku-cfg--live-overlay .uku-cfg__sheet { display: flex; }
}

/* Plein écran : la feuille, déjà "plein écran" sur mobile par nature (82vh,
   coins arrondis en haut seulement), devient réellement plein cadre. */
.uku-cfg--fullscreen-takeover .uku-cfg__sheet {
	left: 0; right: 0; top: 0; bottom: 0; max-height: 100vh; border-radius: 0;
}

/* Tiroir latéral : glisse depuis la droite plutôt que depuis le bas — même
   famille visuelle que .uku-offcanvas/.uku-cart-drawer (header.php). */
.uku-cfg--side-drawer .uku-cfg__sheet {
	left: auto; right: 0; top: 0; bottom: 0; width: min(420px, 92vw);
	max-height: 100vh; border-radius: 0;
	transform: translateX(100%);
}
.uku-cfg--side-drawer .uku-cfg__sheet.is-open { transform: translateX(0); }

/* Overlay transparent : ancré en haut, voile clair + flou plutôt qu'un
   panneau opaque plein cadre — la grille reste visible et se met à jour en
   direct dessous pendant qu'on coche des facettes. */
.uku-cfg--live-overlay .uku-cfg__sheet {
	left: 0; right: 0; top: 0; bottom: auto; max-height: 70vh; width: 100%;
	border-radius: 0 0 20px 20px;
	background: rgba(255, 253, 248, 0.85);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transform: translateY(-100%);
}
.uku-cfg--live-overlay .uku-cfg__sheet.is-open { transform: translateY(0); }
.uku-cfg--live-overlay .uku-cfg__sheet-scrim { background: rgba(18, 14, 10, 0.15); }

@media (prefers-reduced-motion: reduce) {
	.uku-cfg--side-drawer .uku-cfg__sheet,
	.uku-cfg--live-overlay .uku-cfg__sheet { transition: none; }
}

/* ---- Classique (collections + rubriques) : reproduit le pattern réel de
   meyaboutique.com, mesuré en direct desktop ET mobile (pas juste desktop) :
   2 colonnes côte à côte à TOUTES les largeurs — jamais de barre mobile
   compacte à icônes comme les 6 autres présentations. Seul le PANNEAU change
   de forme selon l'écran : feuille sombre plein-largeur depuis le bas en
   mobile/tablette étroite, petit panneau sombre ancré sous le bouton à partir
   de 768px (même seuil que .uku-cfg__sheet des 6 autres présentations,
   cf. règle "@media (min-width: 768px) { .uku-cfg__sheet, ... }" plus haut) —
   même déclencheur/JS dans les deux cas, uniquement du CSS. ---- */
.uku-cfg-classic__bar {
	display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start;
}
.uku-cfg-classic__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.uku-cfg-classic__heading {
	margin: 0; font-family: var(--uku-font-heading); font-weight: 400;
	font-size: 16px; line-height: 1.2; letter-spacing: 0.01em; text-transform: uppercase; color: var(--cfg-ink);
}
.uku-cfg-classic__dropdown { position: relative; width: 100%; min-width: 0; }
.uku-cfg-classic__trigger {
	justify-content: space-between; width: 100%; min-width: 0;
	border-radius: 4px; text-transform: none; letter-spacing: normal;
}
.uku-cfg-classic__trigger span[data-role] {
	flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
}

/* Feuille sombre plein-largeur depuis le bas — habillage par défaut
   (mobile/tablette étroite), neutralisé par la règle desktop plus bas. */
.uku-cfg-classic__panel {
	display: none;
	position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto;
	max-height: 75vh;
	background: var(--cfg-ink); border: none; border-radius: 20px 20px 0 0;
	box-shadow: 0 -16px 36px rgba(18, 14, 10, 0.28);
	z-index: 1351; overflow: hidden; flex-direction: column;
	transform: translateY(100%);
	transition: transform .32s var(--cfg-ease-out);
}
.uku-cfg-classic__panel.is-shown { display: flex; }
.uku-cfg-classic__dropdown.is-open .uku-cfg-classic__panel.is-shown { transform: translateY(0); }
.uku-cfg-classic__handle {
	flex: 0 0 auto; width: 36px; height: 4px; border-radius: 999px;
	background: rgba(255, 253, 248, 0.3); margin: 10px auto 2px;
}
.uku-cfg-classic__panel-head {
	flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px; border-bottom: 1px solid rgba(255, 253, 248, 0.14);
	font-family: var(--uku-font-heading); font-size: 15px; color: var(--cfg-paper);
}
.uku-cfg-classic__close {
	all: unset; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
	color: var(--cfg-paper); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 50%; flex: 0 0 auto;
}
.uku-cfg-classic__close:hover { background: rgba(255, 253, 248, 0.14); }
.uku-cfg-classic__panel .uku-cfg__panel-list,
.uku-cfg-classic__list { flex: 1 1 auto; overflow-y: auto; padding: 6px; columns: 1; max-height: none; }
.uku-cfg-classic__panel .uku-cfg__panel-row,
.uku-cfg-classic__row { color: var(--cfg-paper); font-size: calc(14px * var(--uku-ui-scale, 1)); }
.uku-cfg-classic__panel .uku-cfg__panel-row:hover,
.uku-cfg-classic__row:hover { background: rgba(255, 253, 248, 0.08); }
.uku-cfg-classic__panel .uku-cfg__row-count { display: none; }
.uku-cfg-classic__panel .uku-cfg__row-check,
.uku-cfg-classic__row .uku-cfg__row-check { stroke: var(--cfg-paper); }
.uku-cfg-classic__row {
	display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px;
	background: transparent; border: none; border-radius: 8px;
	padding: 12px 10px; cursor: pointer; text-align: left; font-family: inherit;
}
.uku-cfg-classic__row .uku-cfg__row-check { width: 13px; height: 13px; opacity: 0; flex: 0 0 auto; }
.uku-cfg-classic__row.is-selected .uku-cfg__row-check { opacity: 1; }

/* Voile derrière la feuille (mobile/tablette étroite uniquement, neutralisé
   au-delà de 768px ci-dessous) — visible dès qu'un panneau est ouvert, sans
   aucun JS : :has() lit l'état déjà posé par interactions.js (.is-open),
   jamais de classe supplémentaire à faire gérer par le JS partagé. */
.uku-cfg--classic-dropdowns:has(.uku-cfg-classic__dropdown.is-open) [data-role="scrim"] {
	opacity: 1; pointer-events: auto;
}

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

@media (min-width: 768px) {
	.uku-cfg-classic__bar { gap: 16px; }
	.uku-cfg-classic__col { gap: 14px; }
	.uku-cfg-classic__heading { font-size: 28px; }
	.uku-cfg--classic-dropdowns:has(.uku-cfg-classic__dropdown.is-open) [data-role="scrim"] {
		opacity: 0; pointer-events: none;
	}
	.uku-cfg-classic__handle { display: none; }
	.uku-cfg-classic__panel {
		position: absolute; left: 0; top: calc(100% + 10px); right: auto; bottom: auto; width: 280px;
		max-height: 320px; border-radius: 10px;
		box-shadow: 0 16px 36px rgba(18, 14, 10, 0.28);
		transform: translateY(-6px); opacity: 0;
		transition: opacity .18s var(--cfg-ease-out), transform .18s var(--cfg-ease-out);
	}
	.uku-cfg-classic__panel.is-shown { opacity: 1; transform: translateY(0); }
	.uku-cfg-classic__panel .uku-cfg__panel-list,
	.uku-cfg-classic__list { max-height: 320px; }
}

/* ===== 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: calc(11px * var(--uku-ui-scale, 1));
	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: calc(11px * var(--uku-ui-scale, 1));
	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; }

	/* Retour/favoris/partage (.uku-pdp__gallery-float) sont en position:
	   absolute ancrés en haut de .uku-pdp__gallery (top:16px), pas de la
	   photo elle-même — sans effet tant que rien d'autre n'occupe ce
	   conteneur au-dessus de la photo. Or .uku-pdp__collection (libellé
	   collection, ex. "SET S'ALL") s'affiche en desktop et pousse la photo
	   vers le bas en flux normal : la barre flottante restait ancrée en
	   haut du conteneur et se retrouvait donc au-dessus de la photo
	   (chevauchant le libellé) au lieu de flotter dessus — repéré en
	   direct sur set-sall-vert (icônes ~11px hors du cadre de la photo).
	   :has() cible uniquement les produits où le libellé est bien rendu
	   (il est optionnel). Décalage = 16px voulus depuis le bord de la
	   photo + 16.5px (line-height du libellé) + 10px (sa margin-bottom),
	   mesurés en direct = 42.5px. Mobile non concerné : le libellé y est
	   masqué (cf. règle .uku-pdp__collection{display:none} en dessous de
	   768px), la barre flottante y est donc déjà correctement ancrée au
	   bord de la photo sans ce correctif. */
	.uku-pdp__gallery:has(.uku-pdp__collection) .uku-pdp__gallery-float {
		top: 42.5px;
	}

	/* .uku-pdp__add-row (ligne quantité + "Ajouter au panier") hérite de
	   justify-content:center — pensé pour la barre mobile fixe pleine
	   largeur (cf. @media max-width:767px ci-dessous), où centrer le
	   groupe a du sens. En desktop cette règle reste appliquée telle
	   quelle faute de override : la ligne garde la largeur de toute la
	   colonne d'infos mais centre son contenu dedans, alors que tout le
	   reste de la colonne (taille, description...) est aligné à gauche —
	   décalage visible repéré en direct sur set-sall-vert (bouton
	   "Ajouter au panier" ~52px plus à droite que "Taille standard" juste
	   au-dessus). Le bouton garde sa largeur propre (max-width:320px) : ce
	   correctif ne fait que réaligner le groupe à gauche, comme le reste
	   de la colonne. */
	.uku-pdp__add-row { justify-content: flex-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: calc(13px * var(--uku-ui-scale, 1));
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.uku-pdp__stickybar-price {
	font-size: calc(13px * var(--uku-ui-scale, 1));
	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: calc(11.5px * var(--uku-ui-scale, 1));
	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: calc(11px * var(--uku-ui-scale, 1));
}

/* --- 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: calc(12px * var(--uku-ui-scale, 1));
	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: calc(12px * var(--uku-ui-scale, 1));
	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: calc(26px * var(--uku-ui-scale, 1));
	letter-spacing: 0.04em;
	margin: 0 0 8px;
}

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

.uku-pdp__desc-short { font-size: calc(14px * var(--uku-ui-scale, 1)); 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: calc(14px * var(--uku-ui-scale, 1)); 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: calc(14px * var(--uku-ui-scale, 1)); 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: calc(12.5px * var(--uku-ui-scale, 1));
	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: calc(12px * var(--uku-ui-scale, 1));
	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: calc(13px * var(--uku-ui-scale, 1));
	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;
}

/* minmax(0, 1fr) plutôt que 1fr seul : sans le "0", une piste de grille ne
   descend jamais sous le min-content de son contenu — ici le mini-formulaire
   champ + badge d'unité forçait chaque colonne à s'élargir bien au-delà de
   380px/2, débordant largement l'écran sur mobile ("grid blowout"). */
.uku-pdp__measure-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; max-width: 380px; }

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

.uku-pdp__measure-row { display: flex; align-items: stretch; gap: 8px; }

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

/* --- Badge d'unité ("cm"/"in") accolé à un champ de mesure — voir
   buildUnitBadge() dans interactions.js. Unité choisie une fois dans
   Modules → Mesures sur-mesure, jamais tapée dans chaque libellé de champ.
   Pas de hauteur fixée : align-items:stretch sur la ligne parente l'aligne
   automatiquement sur la hauteur du champ, quel que soit le contexte. --- */
.uku-unit-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	padding: 0 8px;
	font-size: calc(12px * var(--uku-ui-scale, 1));
	color: var(--uku-color-muted, #888);
	background: rgba(128, 128, 128, 0.08);
	border: 1.5px solid rgba(128, 128, 128, 0.3);
	border-radius: 8px;
	white-space: nowrap;
}

/* --- Hauteur facultative, à l'intérieur du panneau "Taille standard" —
   libellé au-dessus (pas à côté), comme sur la référence. --- */
.uku-pdp__hauteur-standard { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 14px 0; }
.uku-pdp__hauteur-standard label { font-size: calc(11px * var(--uku-ui-scale, 1)); letter-spacing: 0.04em; text-transform: uppercase; color: var(--uku-color-muted, #888); }

/* --- Case "hauteur" en mètres (1 | M | 57 → 1,57 m) — voir
   buildHauteurMetresInput() dans interactions.js. Partagée entre la fiche
   produit (.uku-pdp__hauteur-standard) et le Quick View
   (.uku-quickview__hauteur-standard) : un seul jeu de règles. Les deux cases
   latérales sont estompées (valeur secondaire) et "M" au centre — le seul
   élément fixe, jamais éditable — reçoit le fond mis en avant, exactement
   comme la référence. --- */
.uku-hauteur-box {
	display: flex;
	align-items: stretch;
	width: fit-content;
	height: 42px;
	border: 1.5px solid rgba(128, 128, 128, 0.3);
	border-radius: 8px;
	overflow: hidden;
}
.uku-hauteur-box input {
	/* padding: 0 impératif : le reset global du thème parent (Hello Elementor,
	   reset.css) met "0.5rem 1rem" sur tout input[type=number] — sur une case
	   de 44px ça ne laissait que ~12px de large pour le texte, assez pour
	   qu'un seul chiffre reste lisible/tapable (ex. "92" devenait illisible). */
	width: 44px;
	padding: 0;
	border: none;
	text-align: center;
	font-size: calc(14px * var(--uku-ui-scale, 1));
	background: var(--uku-color-bg, #fff);
	color: var(--uku-color-muted, #888);
	-moz-appearance: textfield;
}
.uku-hauteur-box input::-webkit-outer-spin-button,
.uku-hauteur-box input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.uku-hauteur-box input:focus { color: var(--uku-color-text-on-light, #1a1a1a); outline: none; }
.uku-hauteur-box__unit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	font-size: calc(13px * var(--uku-ui-scale, 1));
	font-weight: 700;
	color: var(--uku-color-text-on-light, #1a1a1a);
	background: rgba(128, 128, 128, 0.1);
	border-left: 1px solid rgba(128, 128, 128, 0.3);
	border-right: 1px solid rgba(128, 128, 128, 0.3);
}

/* --- 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: calc(12.5px * var(--uku-ui-scale, 1));
	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: calc(16px * var(--uku-ui-scale, 1));
	color: var(--uku-color-text-on-light, #1a1a1a);
	cursor: pointer;
}

.uku-pdp__qty-value {
	min-width: 22px;
	text-align: center;
	font-size: calc(14px * var(--uku-ui-scale, 1));
	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: calc(13px * var(--uku-ui-scale, 1));
	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);
}

/* Pendant l'appel réseau : opacity:0.5 (déjà sur :disabled) ne suffisait
   pas à distinguer "en cours" de "simplement désactivé" — spinner générique
   ajouté à côté du libellé, retiré dès la réponse (succès ou échec). */
.uku-pdp__add-btn.is-loading .uku-spinner { margin-left: 8px; }

.uku-pdp__meta { font-size: calc(13px * var(--uku-ui-scale, 1)); 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: calc(13.5px * var(--uku-ui-scale, 1));
	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: calc(13.5px * var(--uku-ui-scale, 1));
	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; }

/* ===== Fiche produit — mise en page "classic" (pdp.layout) : photo
   encadrée, achat dans le flux (jamais de barre fixe), raccourci checkout,
   onglets et produits liés en grille sous les deux colonnes. ===== */
.uku-pdp--classic .uku-pdp__gallery-main {
	margin: 0;
	border-radius: 10px;
	aspect-ratio: 4/5;
	background: var(--uku-color-bg-warm, #f5f2ee);
}
.uku-pdp--classic .uku-pdp__gallery-frame img { object-fit: cover; }
.uku-pdp--classic .uku-pdp__gallery-zoom,
.uku-pdp--classic .uku-pdp__gallery-counter { display: none; }
.uku-pdp--classic .uku-pdp__gallery-arrow {
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--uku-color-primary, #111);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.uku-pdp--classic .uku-pdp__gallery-arrow:hover { background: #fff; }

.uku-pdp--classic .uku-pdp__collection--info {
	display: block;
	margin: 24px 0 10px;
	font-size: calc(10px * var(--uku-ui-scale, 1));
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--uku-color-accent, #e09f3d);
}
.uku-pdp--classic .uku-pdp__title-row { margin: 0; }
.uku-pdp--classic .uku-pdp__title {
	font-size: clamp(28px, 4vw, 36px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0.01em;
	margin: 0 0 10px;
}
.uku-pdp--classic .uku-pdp__price { font-size: calc(16px * var(--uku-ui-scale, 1)); font-weight: 600; }
.uku-pdp--classic .uku-pdp__divider { margin: 20px 0; }
.uku-pdp--classic .uku-pdp__desc-short { font-size: calc(13px * var(--uku-ui-scale, 1)); color: #555; margin-bottom: 20px; }

.uku-pdp--classic .uku-pdp__size-tabs {
	max-width: none;
	gap: 0;
	padding: 0;
	background: none;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	overflow: hidden;
}
.uku-pdp--classic .uku-pdp__size-tab {
	height: auto;
	padding: 9px 0;
	border-radius: 0;
	font-size: calc(11px * var(--uku-ui-scale, 1));
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--uku-color-muted, #888);
}
.uku-pdp--classic .uku-pdp__size-tab.is-active {
	background: var(--uku-color-primary, #111);
	color: #fff;
	box-shadow: none;
}
.uku-pdp--classic .uku-pdp__size-pill {
	min-width: 0;
	height: 36px;
	padding: 0 14px;
	border: 1px solid #e8e3dc;
	border-radius: 3px;
	background: #fff;
	font-size: calc(12px * var(--uku-ui-scale, 1));
}

/* La hauteur n'existe qu'en "Sur mesure" dans cette mise en page. */
.uku-pdp--classic .uku-pdp__hauteur-standard { display: none !important; }

.uku-pdp--classic .uku-pdp__add-row {
	position: static;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0 14px;
	margin: 20px 0 0;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}
.uku-pdp--classic .uku-pdp__qty-label {
	font-size: calc(10px * var(--uku-ui-scale, 1));
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uku-color-muted, #888);
}
.uku-pdp--classic .uku-pdp__qty { height: 36px; border-width: 1px; border-color: #e8e3dc; border-radius: 3px; margin-bottom: 18px; }
.uku-pdp--classic .uku-pdp__qty-btn { width: 30px; }
.uku-pdp--classic .uku-pdp__qty-value { min-width: 44px; height: 100%; display: flex; align-items: center; justify-content: center; border-inline: 1px solid #e8e3dc; }
.uku-pdp--classic .uku-pdp__add-btn {
	flex-basis: 100%;
	max-width: none;
	height: auto;
	padding: 14px 20px;
	border-radius: 4px;
	font-size: calc(12px * var(--uku-ui-scale, 1));
	letter-spacing: 0.12em;
	margin-bottom: 10px;
}
.uku-pdp__checkout-btn {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 20px;
	border: 1.5px solid #e8e3dc;
	border-radius: 4px;
	color: var(--uku-color-text-on-light, #111);
	font-size: calc(11px * var(--uku-ui-scale, 1));
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--uku-dur, 0.2s) var(--uku-ease, ease);
}
.uku-pdp__checkout-btn:hover { background: #ede8e2; }

.uku-pdp--classic .uku-pdp__trust { gap: 10px; }
.uku-pdp--classic .uku-pdp__trust-item { align-items: center; gap: 10px; color: #444; }
.uku-pdp--classic .uku-pdp__trust-item strong { font-weight: 400; }
.uku-pdp--classic .uku-pdp__trust-item svg { margin-top: 0; }

@media (max-width: 767px) {
	.uku-pdp--classic .uku-pdp__info { padding-bottom: 0; }
}

.uku-pdp-tabs { max-width: 1200px; margin: 0 auto; padding: 48px 16px; }
.uku-pdp-tabs__nav { display: flex; border-bottom: 1px solid #e8e3dc; margin-bottom: 24px; }
.uku-pdp-tabs__btn {
	padding: 14px 20px;
	margin-bottom: -1px;
	border: none;
	border-bottom: 2px solid transparent;
	background: none;
	font-size: calc(11px * var(--uku-ui-scale, 1));
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uku-color-muted, #888);
	cursor: pointer;
	transition: color 0.15s, border-color 0.15s;
}
.uku-pdp-tabs__btn.is-active { color: var(--uku-color-text-on-light, #111); border-bottom-color: currentColor; }
.uku-pdp-tabs__panel { font-size: calc(13px * var(--uku-ui-scale, 1)); line-height: 1.8; color: #444; }
.uku-pdp-tabs__table { width: 100%; border-collapse: collapse; }
.uku-pdp-tabs__table th,
.uku-pdp-tabs__table td { padding: 10px 0; border-bottom: 1px solid #e8e3dc; text-align: left; vertical-align: top; }
.uku-pdp-tabs__table th { width: 40%; font-weight: 500; color: var(--uku-color-muted, #888); }
.uku-pdp-tabs__empty { color: var(--uku-color-muted, #888); }
.uku-pdp-tabs__guide { max-width: 100%; height: auto; margin-top: 16px; cursor: zoom-in; }

@media (min-width: 768px) {
	.uku-pdp-tabs { padding: 48px 40px; }
}

.uku-pdp-related { background: #f5f2ee; padding: 56px 16px; text-align: center; }
.uku-pdp-related__title {
	font-family: var(--uku-font-heading);
	font-size: clamp(20px, 2.5vw, 28px);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0;
}
.uku-pdp-related__orn { display: block; width: 28px; height: 1px; margin: 12px auto 40px; background: var(--uku-color-accent, #e09f3d); opacity: 0.5; }
.uku-pdp-related > :not(h2):not(span) { max-width: 1080px; margin: 0 auto; text-align: left; }

/* ===== 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__hauteur-standard label { color: #a39c8f; }
.uku-pdp--dark .uku-unit-badge { background: rgba(245, 241, 234, 0.06); border-color: #3a3428; color: #a39c8f; }
.uku-pdp--dark .uku-hauteur-box { border-color: #3a3428; }
.uku-pdp--dark .uku-hauteur-box input { background: #1a1611; color: #a39c8f; }
.uku-pdp--dark .uku-hauteur-box input:focus { color: #f5f1ea; }
.uku-pdp--dark .uku-hauteur-box__unit { background: rgba(245, 241, 234, 0.08); color: #f5f1ea; border-color: #3a3428; }

.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: calc(20px * var(--uku-ui-scale, 1));
	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); }

/* Présentation "pop-up centrée" (cart.type = modal) — même structure/JS que
   le tiroir (voir cart-modal.php), seule la position/transition change :
   fenêtre centrée au lieu d'un panneau collé au bord droit. */
.uku-cart-drawer--modal {
	top: 50%;
	right: auto;
	left: 50%;
	width: 420px;
	max-width: 92vw;
	height: auto;
	max-height: 86vh;
	border-radius: 8px;
	transform: translate(-50%, -50%) scale(0.96);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
}

.uku-cart-drawer--modal.is-open {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
	pointer-events: auto;
}

.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: calc(16px * var(--uku-ui-scale, 1));
	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: calc(13px * var(--uku-ui-scale, 1)); letter-spacing: 0.03em; margin: 0 0 4px; }
.uku-cart-drawer__item-variation { font-size: calc(11.5px * var(--uku-ui-scale, 1)); 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: calc(13px * var(--uku-ui-scale, 1)); margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.uku-cart-drawer__item-qty { font-size: calc(12px * var(--uku-ui-scale, 1)); 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__cross-sell { border-top: 1px solid rgba(0, 0, 0, 0.08); padding: 16px 24px; flex-shrink: 0; }
.uku-cross-sell__group + .uku-cross-sell__group { margin-top: 16px; }
.uku-cross-sell__label { font-size: calc(11px * var(--uku-ui-scale, 1)); text-transform: uppercase; letter-spacing: 0.12em; color: var(--uku-color-muted, #777); margin: 0 0 10px; }
.uku-cross-sell__items { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.uku-cross-sell__item { flex: 0 0 96px; text-decoration: none; color: inherit; }
.uku-cross-sell__item img { width: 96px; height: 128px; object-fit: cover; display: block; margin-bottom: 6px; }
.uku-cross-sell__item-name { display: block; font-size: calc(11.5px * var(--uku-ui-scale, 1)); line-height: 1.3; }
.uku-cross-sell__item-price { display: block; font-size: calc(11.5px * var(--uku-ui-scale, 1)); font-variant-numeric: tabular-nums; color: var(--uku-color-muted, #777); margin-top: 2px; }

.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: calc(15px * var(--uku-ui-scale, 1)); 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: calc(13px * var(--uku-ui-scale, 1)); 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,
.uku-cart-drawer__continue {
	display: block; width: 100%; text-align: center; background: none; border: none; cursor: pointer;
	margin-top: 12px; padding: 6px; font-size: calc(11px * var(--uku-ui-scale, 1)); 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,
.uku-cart-drawer__continue:hover { color: var(--uku-color-primary); }

.uku-cart-drawer__total {
	display: flex;
	justify-content: space-between;
	font-size: calc(15px * var(--uku-ui-scale, 1));
	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: calc(12px * var(--uku-ui-scale, 1));
	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 ===== */

/* Wrapper neutre : la stratégie rendue à l'intérieur gère déjà sa propre
   largeur/son propre padding (one_page via .uku-checkout-page, cf. plus bas)
   — un max-width ici écrasait le panneau 2 colonnes à 640px, bien trop
   étroit (libellés qui retombent à la ligne, onglets tronqués). */
.uku-page-checkout { display: block; }

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

.uku-checkout-step {
	font-size: calc(12px * var(--uku-ui-scale, 1));
	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="express"] { text-align: center; }
.uku-checkout-express__greeting { font-size: calc(18px * var(--uku-ui-scale, 1)); 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;
	/* Sans ceci, le padding global des <button> (8px 16px) décentre l'icône
	   dès qu'un site donne une taille fixe au bouton (rond de 40px). */
	display: grid;
	place-items: center;
	padding: 0;
	line-height: 0;
}
.uku-quickview__close svg { display: block; flex: none; }

.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: calc(11px * var(--uku-ui-scale, 1));
	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: calc(14px * var(--uku-ui-scale, 1));
	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: calc(12px * var(--uku-ui-scale, 1)); color: var(--uku-color-muted, #777); }

.uku-quickview__measure-row { display: flex; align-items: stretch; gap: 8px; }

.uku-quickview__measurements input {
	flex: 1;
	width: auto;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	font-size: calc(14px * var(--uku-ui-scale, 1));
}

.uku-quickview__size-error {
	margin: 8px 0 0;
	font-size: calc(12.5px * var(--uku-ui-scale, 1));
	line-height: 1.4;
	color: #b3453a;
}

.uku-quickview__title {
	font-family: var(--uku-font-heading);
	font-size: calc(22px * var(--uku-ui-scale, 1));
	margin: 16px 0 8px;
}

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

.uku-quickview__price { font-size: calc(16px * var(--uku-ui-scale, 1)); 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: calc(12px * var(--uku-ui-scale, 1));
	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: calc(11.5px * var(--uku-ui-scale, 1));
	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: calc(11.5px * var(--uku-ui-scale, 1));
	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: calc(12px * var(--uku-ui-scale, 1));
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-top: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.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: calc(17px * var(--uku-ui-scale, 1));
	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: calc(14px * var(--uku-ui-scale, 1));
	margin: 0 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.uku-wishlist__item-price { font-size: calc(13px * var(--uku-ui-scale, 1)); 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: calc(20px * var(--uku-ui-scale, 1));
	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: calc(18px * var(--uku-ui-scale, 1));
	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: calc(11px * var(--uku-ui-scale, 1));
	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: calc(13px * var(--uku-ui-scale, 1));
	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: calc(11px * var(--uku-ui-scale, 1));
	color: var(--uku-color-accent);
	margin: 0 0 8px;
}

.uku-collection-hero__title {
	font-family: var(--uku-font-heading);
	font-size: calc(28px * var(--uku-ui-scale, 1));
	margin: 0 0 8px;
}

.uku-collection-hero__subtitle {
	font-size: calc(14px * var(--uku-ui-scale, 1));
	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: calc(40px * var(--uku-ui-scale, 1)); }
}

/* 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: calc(22px * var(--uku-ui-scale, 1));
	background: transparent;
	color: var(--uku-color-primary);
}

@media (min-width: 768px) {
	.uku-search__inner { padding-top: 110px; }
	.uku-search__input { font-size: calc(32px * var(--uku-ui-scale, 1)); }
}

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

.uku-search__trending-label {
	font-size: calc(11px * var(--uku-ui-scale, 1));
	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: calc(12px * var(--uku-ui-scale, 1));
	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: calc(15px * var(--uku-ui-scale, 1));
}

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

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

.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: calc(24px * var(--uku-ui-scale, 1));
	margin: 0 0 12px;
}

.uku-popup__content { font-size: calc(14px * var(--uku-ui-scale, 1)); 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: calc(14px * var(--uku-ui-scale, 1));
	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: calc(13px * var(--uku-ui-scale, 1)); margin: 0; }
.uku-restock__feedback,
.uku-popup__feedback { font-size: calc(13px * var(--uku-ui-scale, 1)); 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: calc(13px * var(--uku-ui-scale, 1)); white-space: nowrap; }
.uku-compare-bar__open { padding: 8px 18px; font-size: calc(11px * var(--uku-ui-scale, 1)); }
.uku-compare-bar__clear {
	background: none;
	border: none;
	color: inherit;
	font-size: calc(18px * var(--uku-ui-scale, 1));
	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: calc(22px * var(--uku-ui-scale, 1));
	margin: 0 0 16px;
}

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

.uku-compare__table {
	border-collapse: collapse;
	width: 100%;
	font-size: calc(13px * var(--uku-ui-scale, 1));
}

.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: calc(16px * var(--uku-ui-scale, 1));
	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: calc(12px * var(--uku-ui-scale, 1));
	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: calc(12.5px * var(--uku-ui-scale, 1)); 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: calc(11px * var(--uku-ui-scale, 1));
	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: calc(16px * var(--uku-ui-scale, 1));
	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: calc(15px * var(--uku-ui-scale, 1)); margin: 8px 0 4px; }
.uku-trust-bar__text { font-size: calc(12.5px * var(--uku-ui-scale, 1)); 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: calc(14px * var(--uku-ui-scale, 1));
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.uku-sticky-atc__price { font-size: calc(12px * var(--uku-ui-scale, 1)); margin: 0; color: var(--uku-color-muted, #888); }
.uku-sticky-atc__btn { padding: 12px 20px; font-size: calc(11px * var(--uku-ui-scale, 1)); 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);
	}

	/* Ancre du méga-menu — sauf en-tête collant, qui en sert déjà (sticky = bloc conteneur) : sans cette exception l'en-tête n'était jamais collant sur ordinateur. */
	.uku-header:not(.uku-header--sticky) { 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: calc(11px * var(--uku-ui-scale, 1));
		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: calc(15px * var(--uku-ui-scale, 1));
	}

	.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: calc(12.5px * var(--uku-ui-scale, 1)) !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: calc(15px * var(--uku-ui-scale, 1));
	}

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

/* --- Quick View v2 : swatches, rareté, upsells --- */
.uku-quickview__scarcity {
	font-size: calc(12.5px * var(--uku-ui-scale, 1));
	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: calc(12.5px * var(--uku-ui-scale, 1));
	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: calc(13px * var(--uku-ui-scale, 1));
	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) — libellé
   au-dessus, case "M" partagée avec la fiche produit (.uku-hauteur-box,
   cf. plus haut). --- */
.uku-quickview__hauteur-standard {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin: 0 0 14px;
	font-size: calc(13px * var(--uku-ui-scale, 1));
}

.uku-quickview__hauteur-standard label { font-size: calc(11px * var(--uku-ui-scale, 1)); letter-spacing: 0.04em; text-transform: uppercase; }

/* --- 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: calc(13px * var(--uku-ui-scale, 1));
	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: calc(16px * var(--uku-ui-scale, 1));
}

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

.uku-quickview__description {
	margin-top: 10px;
	font-size: calc(13px * var(--uku-ui-scale, 1));
	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: calc(12.5px * var(--uku-ui-scale, 1));
	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: calc(12.5px * var(--uku-ui-scale, 1));
	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: calc(11px * var(--uku-ui-scale, 1));
	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: calc(11.5px * var(--uku-ui-scale, 1));
	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: calc(11px * var(--uku-ui-scale, 1));
	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: calc(22px * var(--uku-ui-scale, 1));
	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: calc(12px * var(--uku-ui-scale, 1));
	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: calc(17px * var(--uku-ui-scale, 1));
		text-transform: uppercase;
		letter-spacing: 0.22em;
	}
}

@media (min-width: 1024px) {
	.uku-header__logo-name { font-size: calc(19px * var(--uku-ui-scale, 1)); }
}

/* ═══════════════ 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;
}

/* Contenu riche d'une colonne Footer Builder admin (brand.json →
   footer_builder.columns[].content, wp_kses_post) — rendu directement dans
   .uku-footer__acc-body-inner depuis la refonte 2026-09-16/17 (plus de
   .uku-footer__col-content intermédiaire). p/a ne s'appliquent que si
   l'admin a tapé du HTML riche ; sans effet sur les liens Contact/
   Informations par défaut (déjà stylés directement). */
.uku-footer__acc-body-inner p { margin: 0 0 8px; }
.uku-footer__acc-body-inner p:last-child { margin-bottom: 0; }

/* ═══════════════ 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: calc(56px * var(--uku-ui-scale, 1)); }
	.uku-collection-hero__subtitle { font-size: calc(16px * var(--uku-ui-scale, 1)); }
	.uku-collection-hero--image .uku-collection-hero__content { padding: 140px var(--uku-space-3xl); }

	.uku-catalog__title { font-size: calc(44px * var(--uku-ui-scale, 1)); }

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

	.uku-pdp__recent h2 { font-size: calc(28px * var(--uku-ui-scale, 1)); }

	.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: calc(22px * var(--uku-ui-scale, 1));
	}

	.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: calc(18px * var(--uku-ui-scale, 1));
	letter-spacing: 0.32em;
}

@media (min-width: 1024px) {
	.uku-header--tpl-centered-editorial .uku-header__logo--centered { font-size: calc(22px * var(--uku-ui-scale, 1)); }
}

.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: calc(14px * var(--uku-ui-scale, 1));
}

@media (min-width: 1024px) {
	.uku-header--tpl-sticky-compact.is-shrunk .uku-header__logo {
		font-size: calc(16px * var(--uku-ui-scale, 1));
	}
}

/* ---------- hide-reveal (La Marée) : masqué au scroll bas, réapparaît au scroll haut ---------- */
.uku-header--tpl-hide-reveal {
	transition: transform var(--uku-dur, 0.3s) var(--uku-ease), box-shadow var(--uku-dur, 0.3s) var(--uku-ease);
}
.uku-header--tpl-hide-reveal.is-hidden {
	transform: translateY(-100%);
}

/* ---- Style "split-band" (Double bande) ---- */
.uku-header--tpl-split-band ~ .uku-offcanvas { background: #111; }
.uku-header--tpl-split-band ~ .uku-offcanvas .uku-offcanvas__nav li { border-bottom-color: rgba(255, 255, 255, 0.06); }
.uku-header--tpl-split-band ~ .uku-offcanvas .uku-offcanvas__nav a {
	padding: 16px 24px;
	font-family: var(--uku-font-heading);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: none;
	border-left: 0;
	transition: opacity 0.18s;
}
.uku-header--tpl-split-band ~ .uku-offcanvas .uku-offcanvas__nav a::after { display: none; }
.uku-header--tpl-split-band ~ .uku-offcanvas .uku-offcanvas__nav a:hover { background: none; opacity: 0.55; }
.uku-header--tpl-split-band ~ .uku-offcanvas .uku-offcanvas__nav .current-menu-item > a { padding-left: 24px; font-weight: 500; }
.uku-header--tpl-split-band {
	transition: transform var(--uku-dur, 0.25s) var(--uku-ease), box-shadow var(--uku-dur, 0.25s) var(--uku-ease);
}
.uku-header--tpl-split-band.is-hidden { transform: translateY(-100%); }
.uku-header--tpl-split-band.is-scrolled { box-shadow: 0 4px 32px rgba(0, 0, 0, 0.5); }

.uku-header--tpl-split-band .uku-header__band--main {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.uku-header--tpl-split-band .uku-header__inner {
	display: flex;
	justify-content: center;
	min-height: 56px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(16px, 3vw, 32px);
}
.uku-header--tpl-split-band .uku-header__logo {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--uku-header-text, #f5f0ea);
	transition: opacity 0.2s;
}
.uku-header--tpl-split-band .uku-header__logo:hover { opacity: 0.75; }
.uku-header__logo-dot { color: var(--uku-color-accent); }

.uku-header--tpl-split-band .uku-header__icons--desktop { display: none; }

.uku-header--tpl-split-band .uku-header__band--sub {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 50px;
	padding: 0 14px;
	background: var(--uku-color-bg, #fffff0);
	color: var(--uku-color-text-on-light, #111);
	border-bottom: 1px solid #e8e3de;
}
.uku-header--tpl-split-band .uku-header__band--sub .uku-header__burger { display: flex; padding: 10px; margin-left: -10px; }
.uku-header--tpl-split-band .uku-header__icons--mobile { gap: 4px; }
.uku-header--tpl-split-band .uku-header__icons--mobile > * { width: 46px; height: 46px; align-items: center; justify-content: center; }
.uku-header--tpl-split-band .uku-header__icons--mobile svg { width: 24px; height: 24px; }

@media (min-width: 481px) {
	.uku-header--tpl-split-band .uku-header__inner { min-height: 64px; }
	.uku-header--tpl-split-band .uku-header__band--sub { min-height: 54px; }
}

@media (min-width: 1024px) {
	.uku-header--tpl-split-band .uku-header__inner {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		min-height: 64px;
		padding: 0 clamp(16px, 3vw, 32px);
	}
	.uku-header--tpl-split-band .uku-header__band--sub { display: none; }
	.uku-header--tpl-split-band .uku-header__nav { flex: 1; display: flex; justify-content: center; }
	.uku-header--tpl-split-band .uku-header__nav ul { gap: 0; }
	.uku-header--tpl-split-band .uku-header__nav a {
		position: relative;
		display: block;
		padding: 8px 14px;
		border: 0;
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.08em;
		color: #fff;
	}
	.uku-header--tpl-split-band .uku-header__nav a::after {
		content: '';
		position: absolute;
		left: 14px;
		right: 14px;
		bottom: 3px;
		height: 1px;
		background: var(--uku-color-accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.25s ease;
	}
	.uku-header--tpl-split-band .uku-header__nav a:hover::after,
	.uku-header--tpl-split-band .uku-header__nav .current-menu-item > a::after,
	.uku-header--tpl-split-band .uku-header__nav .current_page_item > a::after { transform: scaleX(1); }
	.uku-header--tpl-split-band .uku-header__nav .current-menu-item > a,
	.uku-header--tpl-split-band .uku-header__nav .current_page_item > a,
	.uku-header--tpl-split-band .uku-header__nav a:hover { color: #fff; }
	.uku-header--tpl-split-band .uku-header__icons--desktop { display: flex; gap: 4px; color: #f5f0ea; }
	.uku-header--tpl-split-band .uku-header__icons--desktop > * {
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: background 0.18s;
	}
	.uku-header--tpl-split-band .uku-header__icons--desktop > *:hover { background: rgba(255, 255, 255, 0.08); color: inherit; }
	.uku-header--tpl-split-band .uku-header__icons--desktop svg { width: 22px; height: 22px; }
}

/* ---------- dropdown-simple (Le Ponton) : sous-menu léger, sans colonnes ---------- */
.uku-header--tpl-dropdown-simple .uku-header__nav .menu-item-has-children {
	position: relative;
}
.uku-header--tpl-dropdown-simple .uku-header__nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	flex-direction: column;
	gap: 0;
	min-width: 190px;
	padding: 8px 0;
	margin-top: 14px; /* espace cliquable entre le lien parent et le panneau, sans trou de survol mort grâce au ::before ci-dessous */
	background: var(--uku-color-bg, #fff);
	border: 1px solid var(--uku-color-border, #e8e3dc);
	border-radius: 6px;
	box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--uku-dur, 0.2s) var(--uku-ease), transform var(--uku-dur, 0.2s) var(--uku-ease), visibility 0s linear var(--uku-dur, 0.2s);
	z-index: 20;
}
/* Comble l'espace entre le lien et le panneau : sans ça, la souris "sort" du
   :hover en traversant la marge de 14px et le panneau se referme avant d'y
   arriver. */
.uku-header--tpl-dropdown-simple .uku-header__nav .menu-item-has-children::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 14px;
}
.uku-header--tpl-dropdown-simple .uku-header__nav .menu-item-has-children:hover .sub-menu,
.uku-header--tpl-dropdown-simple .uku-header__nav .menu-item-has-children:focus-within .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}
.uku-header--tpl-dropdown-simple .uku-header__nav .sub-menu a {
	display: block;
	padding: 9px 18px;
	white-space: nowrap;
	border-bottom: none;
}
.uku-header--tpl-dropdown-simple .uku-header__nav .sub-menu a:hover {
	background: var(--uku-color-bg-warm, #f7f5f0);
}
@media (prefers-reduced-motion: reduce) {
	.uku-header--tpl-dropdown-simple .uku-header__nav .sub-menu { transition: none; }
}

/* ---------- bottom-nav (La Quille) : barre d'onglets fixe, mobile uniquement ---------- */
/* Icônes du header masquées sur mobile pour ce style précis : la barre du bas
   reprend les mêmes actions (recherche/favoris/panier), les doubler serait
   redondant. Réapparaissent dès 768px, où la barre du bas elle-même se cache. */
.uku-header--tpl-bottom-nav .uku-header__icons {
	display: none;
}
@media (min-width: 768px) {
	.uku-header--tpl-bottom-nav .uku-header__icons {
		display: flex;
	}
}

.uku-bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	background: var(--uku-color-bg, #fff);
	border-top: 1px solid var(--uku-color-border, #e8e3dc);
	/* Zone sûre iOS (barre gestuelle du bas) — sans ça, la barre colle sous
	   l'indicateur home et devient difficile à toucher sur iPhone récent. */
	padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 768px) {
	.uku-bottom-nav { display: none; }
}
.uku-bottom-nav__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 9px 4px 7px;
	background: none;
	border: none;
	color: var(--uku-color-muted, #777);
	text-decoration: none;
	cursor: pointer;
	/* Cible tactile >= 44px de haut (guide Hero/Layouts, accessibilité) même
	   si le padding visuel semble plus petit — min-height fait l'appoint. */
	min-height: 48px;
}
.uku-bottom-nav__item span {
	font-size: calc(10px * var(--uku-ui-scale, 1));
	font-weight: 500;
	letter-spacing: 0.02em;
}
.uku-bottom-nav__item svg {
	stroke: currentColor;
}
.uku-bottom-nav__item.is-active {
	color: var(--uku-color-primary, #111);
}
.uku-bottom-nav__icon-wrap {
	position: relative;
	display: flex;
}
.uku-bottom-nav__badge {
	position: absolute;
	top: -4px;
	right: -8px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border-radius: 999px;
	background: var(--uku-color-accent, #c9a870);
	color: #fff;
	font-size: calc(9px * var(--uku-ui-scale, 1));
	font-weight: 700;
	line-height: 15px;
	text-align: center;
}
.uku-bottom-nav__badge[data-count="0"] {
	display: none;
}
/* Laisse la place à la barre pour que le pied de page ne soit jamais masqué
   derrière elle sur mobile. */
@media (max-width: 767px) {
	body:has(.uku-header--tpl-bottom-nav) {
		padding-bottom: calc(54px + env(safe-area-inset-bottom, 0));
	}
}

/* ---------- 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: calc(12px * var(--uku-ui-scale, 1));
	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: calc(12px * var(--uku-ui-scale, 1));
	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: calc(14px * var(--uku-ui-scale, 1));
	color: inherit;
}

.uku-header--tpl-search-forward .uku-header__search-submit {
	border: none;
	background: none;
	color: var(--uku-color-accent);
	font-size: calc(12px * var(--uku-ui-scale, 1));
	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: calc(11px * var(--uku-ui-scale, 1));
	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: calc(12.5px * var(--uku-ui-scale, 1));
	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: calc(12px * var(--uku-ui-scale, 1));
	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: calc(12.5px * var(--uku-ui-scale, 1)); 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: calc(11px * var(--uku-ui-scale, 1)); 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: calc(11px * var(--uku-ui-scale, 1)); 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: calc(28px * var(--uku-ui-scale, 1)); line-height: 1.2; letter-spacing: -0.015em; margin: 8px 0 28px; color: var(--co-ink); }

/* Mode "une page" (checkout.js, renderOnePage()) : les 3 sections
   (Contact/Livraison/Paiement) empilées avec un simple filet entre elles —
   .uku-co-step-title porte déjà assez d'espace au-dessus pour respirer,
   pas besoin d'un padding supplémentaire ici. */
.uku-co-section + .uku-co-section { border-top: 1px solid var(--co-line); margin-top: 8px; }

.uku-co-foot { flex-shrink: 0; padding: 16px 44px 30px; }
/* Valeur de repli littérale sur --co-ink (bug signalé 2026-09-15 : "le bouton
   perd son fond, seul le texte reste visible", constaté en usage réel mobile,
   jamais reproduit ici en test direct malgré mobile+desktop+les 3 étapes).
   .uku-co-cta vit sous .uku-co-form-pane, qui passe en display:contents en
   dessous de 780px (cf. règle plus bas, "le récap en haut surcharge la
   page") — un display:contents cassait l'héritage des custom properties
   dans certaines versions de WebKit/Safari mobile (le --co-ink défini sur
   .uku-checkout-modal ne remontait alors plus jusqu'ici), rendant
   "background: var(--co-ink)" invalide et donc transparent : bouton
   cliquable, texte visible, fond disparu — exactement le symptôme décrit.
   Le fallback coûte rien et protège même si la cause exacte diffère. */
.uku-co-cta {
	width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--co-ink, #0e0e10); color: #fff; border: none; border-radius: 4px;
	padding: 16px; font-size: calc(11.5px * var(--uku-ui-scale, 1)); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
	cursor: pointer; min-height: 50px; box-shadow: var(--uku-shadow-sm);
	transition: opacity var(--uku-dur-fast) var(--co-ease-out), transform var(--uku-dur-fast) var(--co-ease-out), box-shadow var(--uku-dur-fast) var(--co-ease-out), background-color var(--uku-dur-fast) var(--co-ease-out), color var(--uku-dur-fast) var(--co-ease-out), border-color var(--uku-dur-fast) var(--co-ease-out);
	font-family: inherit;
}
.uku-co-cta:hover { opacity: 0.82; box-shadow: var(--uku-shadow-md); }
/* :active seul (pas de :hover tactile) — sans lui, un tap sur mobile ne donne
   strictement aucun retour visuel avant la navigation suivante. Ombre réduite
   en plus de l'opacité/scale existants : le bouton doit se lire comme
   physiquement enfoncé, pas juste assombri. */
.uku-co-cta:active:not(:disabled) { opacity: 0.82; transform: scale(0.98); box-shadow: var(--uku-shadow-xs); }
.uku-co-cta:disabled { opacity: 0.32; cursor: not-allowed; box-shadow: none; }
.uku-co-cta--ghost { background: transparent; color: var(--co-ink); border: 1px solid var(--co-line); }

/* Rejoint le langage visuel global (Design → Composants → Style de bouton) :
   .uku-co-cta garde sa propre identité de couleur (--co-ink, pas --uku-color-
   accent — le checkout a toujours eu son propre jeton de marque dédié, cf.
   plus haut) mais hérite de la FORME choisie, pour que "Pilule" ou "Contour"
   s'applique vraiment À TOUT LE SITE, checkout inclus, pas seulement aux
   nouveaux .uku-ui-btn. "classic" (par défaut) ne change rien ci-dessous. */
body.uku-ui-btn-rounded .uku-co-cta { border-radius: 10px; }
body.uku-ui-btn-pill .uku-co-cta { border-radius: 999px; }
body.uku-ui-btn-outline .uku-co-cta:not(:disabled) { background: transparent; color: var(--co-ink); border: 1px solid var(--co-ink); box-shadow: none; }
body.uku-ui-btn-outline .uku-co-cta:not(:disabled):hover { background: var(--co-ink); color: #fff; box-shadow: none; opacity: 1; }

/* ---------- 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: calc(12.5px * var(--uku-ui-scale, 1)); font-weight: 500; color: var(--co-ink); }
.uku-co-sum-meta { font-size: calc(11px * var(--uku-ui-scale, 1)); color: var(--co-ink-faint); margin-top: 3px; }
.uku-co-sum-price { font-size: calc(12px * var(--uku-ui-scale, 1)); font-variant-numeric: tabular-nums; color: var(--co-ink); flex-shrink: 0; }
.uku-co-sum-item-remove {
	flex-shrink: 0; align-self: flex-start; margin-top: 2px; padding: 4px; border: none; background: none;
	cursor: pointer; color: var(--co-ink-faint);
}
.uku-co-sum-item-remove:hover { color: var(--co-ink); }
.uku-co-sum-item-remove:disabled { opacity: 0.4; cursor: default; }

.uku-co-sum-loading { display: flex; align-items: center; gap: 8px; font-size: calc(12.5px * var(--uku-ui-scale, 1)); color: var(--co-ink-faint); padding: 10px 2px; }
.uku-co-sum-loading::before { content: ''; width: 12px; height: 12px; flex-shrink: 0; border: 1.5px solid var(--co-line); border-top-color: var(--co-ink-faint); border-radius: 50%; animation: uku-co-spin .7s linear infinite; }

.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: calc(12.5px * var(--uku-ui-scale, 1)); 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: calc(11px * var(--uku-ui-scale, 1)); color: var(--co-ink-faint); }
.uku-co-sum-total span:last-child { font-family: var(--uku-font-heading); font-size: calc(24px * var(--uku-ui-scale, 1)); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.uku-co-sum-eta { font-size: calc(11.5px * var(--uku-ui-scale, 1)); 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: calc(11px * var(--uku-ui-scale, 1)); color: var(--co-ink-faint); }
	.uku-co-summary-toggle-val { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--uku-ui-scale, 1)); 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; }
}

/* ===== CHECKOUT EN PAGE DÉDIÉE (.uku-checkout-page) =====
   Pendant "page" de .uku-checkout-modal ci-dessus (one_page, cf. page-
   checkout.php / OnePageStrategy / template-parts/checkout-page.php) : tous
   les composants .uku-co-* (stepper, champs, boutons, récap) sont déjà
   génériques et se réutilisent tels quels — seuls les jetons --co-* et
   l'habillage de la coquille (plus de overlay/dialog flottant, un panneau
   dans le flux normal de la page) sont redéfinis ici, jetons dupliqués
   plutôt que partagés : même pattern que .uku-order-confirm, les deux
   coquilles ne s'imbriquent jamais, pas besoin d'indirection. */
.uku-checkout-page {
	--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);

	display: flex; justify-content: center;
	padding: var(--uku-space-3xl) var(--uku-space-md);
	background: var(--co-line-soft);
	font-family: var(--uku-font-body);
}
.uku-checkout-page * { box-sizing: border-box; }
.uku-checkout-page button:focus-visible { outline: 2px solid var(--co-ink); outline-offset: 2px; border-radius: 2px; }

.uku-checkout-page__panel {
	position: relative; width: 100%; max-width: 980px; min-height: 600px;
	background: var(--co-bg); border-radius: 18px; overflow: hidden;
	display: flex; color: var(--co-ink);
	box-shadow: 0 30px 90px rgba(14, 13, 10, 0.1);
}

.uku-checkout-page.is-busy .uku-co-form-head,
.uku-checkout-page.is-busy .uku-co-body { pointer-events: none; opacity: 0.5; transition: opacity .2s var(--co-ease-out); }
.uku-checkout-page.is-busy .uku-co-back { pointer-events: none; opacity: 0.3; }

.uku-checkout-page input:-webkit-autofill,
.uku-checkout-page 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;
}

@media (max-width: 780px) {
	.uku-checkout-page { padding: 0; }
	.uku-checkout-page__panel { max-width: 100%; min-height: 100dvh; border-radius: 0; flex-direction: column; box-shadow: none; }
	/* Même réordonnancement que .uku-checkout-modal en mobile (cf. ci-dessus) :
	   le récap flotte juste au-dessus du bouton CTA, jamais en tête de page. */
	.uku-checkout-page .uku-co-form-pane, .uku-checkout-page .uku-co-summary-pane { display: contents; }
	.uku-checkout-page .uku-co-form-head { order: 1; padding: 26px 24px 0; }
	.uku-checkout-page .uku-co-body { order: 2; padding: 16px 24px 12px; }
	.uku-checkout-page .uku-co-summary-toggle { order: 3; }
	.uku-checkout-page .uku-co-summary-inner { order: 4; }
	.uku-checkout-page .uku-co-foot { order: 5; padding: 14px 24px 24px; }
}

/* ===== STYLES DE CHECKOUT (CheckoutStyleRegistry, admin Checkout → Style) =====
   Chaque style n'est qu'une classe modificatrice sur la coquille déjà en
   place (.uku-checkout-page--{id} / .uku-checkout-modal--{id}) : même DOM,
   mêmes ids #uku-co-*, mêmes fonctions checkout.js — seul l'agencement
   visuel change. "classic" (valeur par défaut) ne porte aucune règle ici,
   c'est le comportement déjà décrit plus haut. Les styles "accordion" (une
   page ET multi-étapes) ont en plus un comportement JS (IS_ACCORDION,
   checkout.js) — tout le reste ci-dessous est purement visuel, aucune
   différence de validation/soumission entre styles.

   — Une page — */

/* Éditorial : plus de panneau latéral, une seule colonne centrée, le récap
   devient une barre repliable juste au-dessus du bouton (même mécanique de
   réordonnancement display:contents/order que le mobile par défaut
   ci-dessus, appliquée ici à TOUTES les largeurs). */
.uku-checkout-page--editorial .uku-checkout-page__panel { flex-direction: column; max-width: 640px; box-shadow: none; background: transparent; }
.uku-checkout-page--editorial .uku-co-form-pane,
.uku-checkout-page--editorial .uku-co-summary-pane { display: contents; }
.uku-checkout-page--editorial .uku-co-form-head { order: 1; padding: 0 0 4px; }
.uku-checkout-page--editorial .uku-co-body { order: 2; padding: 16px 0; }
.uku-checkout-page--editorial .uku-co-summary-toggle {
	order: 3; display: flex; align-items: center; justify-content: space-between; width: 100%;
	padding: 14px 0; background: none; border: none; border-top: 1px solid var(--co-line); border-bottom: 1px solid var(--co-line);
	cursor: pointer; text-align: left; font-family: inherit; margin-bottom: 16px;
}
.uku-checkout-page--editorial .uku-co-summary-inner { order: 4; display: none; padding: 4px 0 16px; }
.uku-checkout-page--editorial .uku-co-summary-inner.is-expanded { display: block; }
.uku-checkout-page--editorial .uku-co-foot { order: 5; padding: 0; }

/* Panneau latéral collant : le récap reste visible au scroll (plus de
   repli/dépli), les champs se resserrent sur une ligne de lecture confortable
   au lieu d'occuper tout le pane à 58%. */
.uku-checkout-page--sticky_sidebar .uku-checkout-page__panel { overflow: visible; min-height: 0; align-items: flex-start; }
.uku-checkout-page--sticky_sidebar .uku-co-summary-pane { position: sticky; top: var(--uku-space-lg); align-self: flex-start; max-height: calc(100dvh - var(--uku-space-4xl)); overflow-y: auto; border-radius: 0 18px 18px 0; }
.uku-checkout-page--sticky_sidebar .uku-co-summary-toggle { display: none; }
.uku-checkout-page--sticky_sidebar .uku-co-summary-inner { display: block !important; }
.uku-checkout-page--sticky_sidebar .uku-co-form-head,
.uku-checkout-page--sticky_sidebar .uku-co-body,
.uku-checkout-page--sticky_sidebar .uku-co-foot { max-width: 460px; margin-inline: auto; width: 100%; }

/* Cartes groupées : chaque section (Contact/Livraison/Paiement) devient sa
   propre carte avec ombre (--uku-shadow-sm) au lieu d'un simple filet entre
   sections empilées. */
.uku-checkout-page--cards .uku-co-section {
	background: var(--co-bg); border-radius: 12px; box-shadow: var(--uku-shadow-sm);
	padding: 24px 28px; margin-bottom: var(--uku-space-md);
}
.uku-checkout-page--cards .uku-co-section + .uku-co-section { border-top: none; margin-top: 0; padding-top: 24px; }

/* — Multi-étapes (pop-up) — */

/* Minimal : stepper réduit à une ligne fine + points (libellés masqués),
   colonne de formulaire centrée — registre éditorial plutôt que l'étiquette
   de progression actuelle. */
.uku-checkout-modal--minimal_dots .uku-co-stepper { gap: 6px; justify-content: center; max-width: 160px; margin: 0 auto; }
.uku-checkout-modal--minimal_dots .uku-co-sp { position: relative; }
.uku-checkout-modal--minimal_dots .uku-co-sp-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.uku-checkout-modal--minimal_dots .uku-co-sp::before {
	content: ''; display: block; width: 6px; height: 6px; border-radius: 50%;
	background: var(--co-line); transition: background-color .2s var(--co-ease-out);
}
.uku-checkout-modal--minimal_dots .uku-co-sp.is-active::before,
.uku-checkout-modal--minimal_dots .uku-co-sp.is-done::before { background: var(--co-ink); }
.uku-checkout-modal--minimal_dots .uku-co-sp-line { max-width: 28px; }
.uku-checkout-modal--minimal_dots .uku-co-body { max-width: 420px; margin-inline: auto; width: 100%; }
.uku-checkout-modal--minimal_dots .uku-co-foot { max-width: 420px; margin-inline: auto; width: 100%; }

/* Deux colonnes : le récap devient un vrai rail visuel (teinté, jamais
   anecdotique) plutôt qu'une colonne de texte dense. */
.uku-checkout-modal--two_col .uku-co-summary-pane { flex-basis: 360px; background: var(--co-line-soft); }
.uku-checkout-modal--two_col .uku-co-sum-img { width: 56px; height: 72px; border-radius: 6px; }
.uku-checkout-modal--two_col .uku-co-summary-inner { padding: 44px 36px 20px; }

/* — Accordéon (checkout.js, IS_ACCORDION) — commun aux deux coquilles
   (.uku-checkout-modal--accordion ET .uku-checkout-page--accordion) : même
   DOM généré par renderAccordion(), seuls --co-* diffèrent déjà selon la
   coquille ambiante (hérités, rien à redéfinir ici). */
.uku-co-acc-section { padding: var(--uku-space-md) 0; border-bottom: 1px solid var(--co-line); }
.uku-co-acc-section:first-child { padding-top: 0; }
.uku-co-acc-section:last-child { border-bottom: none; }
.uku-co-acc-head { display: flex; align-items: center; gap: 12px; }
.uku-co-acc-num {
	flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-size: calc(11.5px * var(--uku-ui-scale, 1)); font-weight: 600; color: var(--co-ink-faint); border: 1px solid var(--co-line);
	transition: background-color .2s var(--co-ease-out), color .2s var(--co-ease-out), border-color .2s var(--co-ease-out);
}
.uku-co-acc-num svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.is-active .uku-co-acc-num { color: var(--co-ink); border-color: var(--co-ink); }
.is-done .uku-co-acc-num { background: var(--co-ink); border-color: var(--co-ink); }
.uku-co-acc-title { font-family: var(--uku-font-heading); font-size: calc(16px * var(--uku-ui-scale, 1)); color: var(--co-ink); }
.is-pending .uku-co-acc-title { color: var(--co-ink-faint); }
.uku-co-acc-summary { flex: 1; min-width: 0; font-size: calc(12.5px * var(--uku-ui-scale, 1)); color: var(--co-ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uku-co-acc-edit { flex-shrink: 0; background: none; border: none; cursor: pointer; font-size: calc(11px * var(--uku-ui-scale, 1)); font-weight: 500; color: var(--co-ink-faint); text-decoration: underline; text-underline-offset: 2px; font-family: inherit; }
.uku-co-acc-edit:hover { color: var(--co-ink); }
.uku-co-acc-body { padding: var(--uku-space-md) 0 0 38px; }
.uku-co-acc-foot { padding: var(--uku-space-sm) 0 0 38px; }
.uku-co-acc-foot .uku-co-cta { width: auto; min-width: 220px; }

/* ============ 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: calc(12px * var(--uku-ui-scale, 1)); 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: calc(10px * var(--uku-ui-scale, 1)); letter-spacing: 0.04em; color: var(--co-ink-faint); margin-bottom: 8px; }
.uku-co-inp {
	width: 100%; padding: 8px 0 10px; font-size: calc(15.5px * var(--uku-ui-scale, 1)); 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: calc(11px * var(--uku-ui-scale, 1)); 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: calc(15px * var(--uku-ui-scale, 1)); 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: calc(15.5px * var(--uku-ui-scale, 1)); 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: calc(13px * var(--uku-ui-scale, 1)); 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: calc(13px * var(--uku-ui-scale, 1)); 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: calc(12px * var(--uku-ui-scale, 1)); }

.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: calc(12.5px * var(--uku-ui-scale, 1)); color: var(--co-ink-soft); line-height: 1.5; }
.uku-co-chk-sub { display: block; font-size: calc(11px * var(--uku-ui-scale, 1)); color: var(--co-ink-faint); margin-top: 2px; }

/* ============ rows (delivery, payment) — quiet, no fill, checkmark-led ============ */
.uku-co-glabel { font-size: calc(10.5px * var(--uku-ui-scale, 1)); 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; }
/* Titre "Moyens de paiement acceptés" seul — centré (retour 2026-09-15,
   "vu la disposition des logos, on devrait centrer le titre") puisque les
   tuiles en dessous sont elles-mêmes centrées (.uku-co-pay-methods,
   justify-content: center), un libellé resté à gauche aurait détonné ; et
   respire davantage avant les logos (16px au lieu des 6px génériques de
   .uku-co-glabel, pensés pour une liste qui suit immédiatement, pas des
   icônes qui ont besoin d'air). Marge du haut 48px (28px de base +20px,
   "faire descendre la section de 20px") pour la détacher un peu plus du
   bloc Livraison au-dessus. Les autres usages de .uku-co-glabel ("Votre
   commande") restent alignés à gauche, inchangés. */
.uku-co-glabel--payment { text-align: center; margin-top: 48px; margin-bottom: 16px; }

/* 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: calc(12.5px * var(--uku-ui-scale, 1)); 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: calc(14.5px * var(--uku-ui-scale, 1)); 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: calc(11.5px * var(--uku-ui-scale, 1)); 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: calc(13px * var(--uku-ui-scale, 1)); 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: calc(11px * var(--uku-ui-scale, 1)); 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: calc(15.5px * var(--uku-ui-scale, 1)); outline: none; font-family: inherit; }
.uku-co-search-wrap input:focus { border-color: var(--co-ink); }

.uku-co-suggest { position: relative; }
/* Dans le flux (pas en absolu) : .uku-co-body coupe tout débordement (overflow hidden/auto), une liste absolue y était masquée sous le bouton — recherche de ville internationale inutilisable. */
.uku-co-suggest-list { position: static; margin-top: 4px; 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: calc(13.5px * var(--uku-ui-scale, 1)); font-family: inherit; }
.uku-co-suggest-item:hover { background: var(--co-line-soft); }
.uku-co-suggest-flag { font-size: calc(15px * var(--uku-ui-scale, 1)); line-height: 1; flex-shrink: 0; }
.uku-co-suggest-country { margin-left: auto; color: var(--co-ink-faint); font-size: calc(12px * var(--uku-ui-scale, 1)); }
.uku-co-suggest-loading, .uku-co-suggest-empty { padding: 12px 10px; font-size: calc(12.5px * var(--uku-ui-scale, 1)); 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: calc(20px * var(--uku-ui-scale, 1)); line-height: 1; flex-shrink: 0; }
.uku-co-city-card-name { font-size: calc(14px * var(--uku-ui-scale, 1)); font-weight: 500; }
.uku-co-city-card-sub { font-size: calc(11.5px * var(--uku-ui-scale, 1)); color: var(--co-ink-faint); margin-top: 2px; }
.uku-co-city-card-edit { margin-left: auto; font-size: calc(11px * var(--uku-ui-scale, 1)); 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: calc(11px * var(--uku-ui-scale, 1)); 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: calc(12.5px * var(--uku-ui-scale, 1)); 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: calc(12.5px * var(--uku-ui-scale, 1)); 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: calc(13px * var(--uku-ui-scale, 1)); font-weight: 500; color: var(--co-ink); }
.uku-co-pay-item-meta { font-size: calc(11.5px * var(--uku-ui-scale, 1)); color: var(--co-ink-faint); margin-top: 3px; }
.uku-co-pay-item-price { font-size: calc(12.5px * var(--uku-ui-scale, 1)); font-variant-numeric: tabular-nums; color: var(--co-ink); flex-shrink: 0; align-self: center; }

/* ---------- Paiement : logos informatifs, non cliquables ----------
   Reproduction de la maquette de référence (brief 2026-09-15) : 5 tuiles
   mobile money en ligne (wrap si l'espace manque), puis la carte bancaire
   isolée en dessous, chaque logo étant déjà carré/coloré (voir les fichiers
   sources dans assets/images/payment/) — aucun cadre supplémentaire autour
   des tuiles mobile money, contrairement à l'ancien .uku-co-pay-chip.
   Icônes réduites et libellés allégés (retour 2026-09-15, "trop grands par
   rapport au reste de la page... aligner d'une manière plus soft") — 30px
   au lieu de 52px, gris atténué au lieu du texte quasi-noir des autres
   libellés du récap, plus proche en poids visuel de .uku-trust-bar
   (icônes 26px) que de la vignette produit du récap juste au-dessus. */
.uku-co-pay-methods { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
.uku-co-pay-method { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 46px; }
.uku-co-pay-method img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.uku-co-pay-method span {
	font-size: calc(8px * var(--uku-ui-scale, 1)); font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
	color: var(--co-ink-faint); text-align: center; line-height: 1.3;
}
.uku-co-pay-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ---- Dispositions de l'étape Paiement (modules.payment.tiles_layout) ----
   inset / sheet / segmented / express, grammaire iOS (HIG) : liste groupée
   en encart, coche à droite, cibles ≥ 44px, une seule action principale.
   "grid" garde les tuiles plus bas. */
.uku-co-pm { margin-bottom: 8px; }
.uku-co-pm button,
.uku-co-pm-sheet button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; white-space: normal; -webkit-tap-highlight-color: transparent; }
.uku-co-pm button:focus-visible,
.uku-co-pm-sheet button:focus-visible { outline: 2px solid var(--co-gold); outline-offset: -2px; }

.uku-co-pm-group { background: var(--uku-color-bg-elevated, #fff); border: 1px solid var(--co-line-soft); border-radius: 14px; overflow: hidden; }
.uku-co-pm-row { position: relative; width: 100%; min-height: 60px; display: flex; align-items: center; gap: 14px; padding: 12px 16px; transition: background-color 0.15s; }
.uku-co-pm-row + .uku-co-pm-row::before { content: ''; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--co-line-soft); }
.uku-co-pm-row:hover { background: rgba(128, 128, 128, 0.04); }
.uku-co-pm-row:active { background: rgba(128, 128, 128, 0.09); }
.uku-co-pm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.uku-co-pm-t { font-size: calc(15.5px * var(--uku-ui-scale, 1)); line-height: 1.25; letter-spacing: -0.01em; color: var(--co-ink); }
.uku-co-pm-st { font-size: calc(12.5px * var(--uku-ui-scale, 1)); line-height: 1.35; color: var(--co-ink-faint); }
.uku-co-pm-check { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--co-gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.6); transition: opacity 0.15s, transform 0.2s var(--co-ease-out); }
.uku-co-pm-row[aria-checked="true"] .uku-co-pm-check { opacity: 1; transform: scale(1); }
.uku-co-pm-row[aria-checked="true"] .uku-co-pm-t { font-weight: 600; }
.uku-co-pm-chev { width: 8px; height: 13px; flex-shrink: 0; fill: none; stroke: var(--co-ink-faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.uku-co-pm-ic { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
.uku-co-pm-ic--text { display: grid; place-items: center; background: #0a3d8f; color: #fff; font-size: 14px; font-weight: 700; }
.uku-co-pm-stack { display: flex; flex-shrink: 0; width: 34px; height: 34px; align-items: center; }
.uku-co-pm-stack img { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 2px var(--uku-color-bg-elevated, #fff); }
.uku-co-pm-stack img + img { margin-left: -9px; }
.uku-co-pm-stack img:nth-child(n + 3) { display: none; }

.uku-co-pm-hint { margin: 10px 4px 0; font-size: calc(12.5px * var(--uku-ui-scale, 1)); line-height: 1.45; color: var(--co-ink-faint); min-height: 1.45em; }
.uku-co-pm-label { margin: 22px 4px 8px; font-size: calc(12px * var(--uku-ui-scale, 1)); letter-spacing: 0.04em; text-transform: uppercase; color: var(--co-ink-faint); }

/* sheet : une ligne "Payer avec … Modifier ›" qui ouvre une feuille */
.uku-co-pm-row--summary [data-pay-summary-icon] { display: flex; }
.uku-co-pm-change { font-size: calc(14px * var(--uku-ui-scale, 1)); color: var(--co-gold); }
.uku-co-pm-dim { position: absolute; inset: 0; z-index: 40; background: rgba(14, 13, 10, 0.32); opacity: 0; transition: opacity 0.28s; }
.uku-co-pm-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 85%; overflow-y: auto; padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--co-bg); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(14, 13, 10, 0.16); transform: translateY(104%); transition: transform 0.34s var(--co-ease-out); }
.uku-co-pm-sheet-open > .uku-co-pm-dim { opacity: 1; }
.uku-co-pm-sheet-open > .uku-co-pm-sheet { transform: translateY(0); }
.uku-co-pm-grabber { display: block; width: 36px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: var(--co-line); }
.uku-co-pm-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 14px; }
.uku-co-pm-sheet-head p { margin: 0; font-size: calc(17px * var(--uku-ui-scale, 1)); font-weight: 600; color: var(--co-ink); }
.uku-co-pm-sheet-head button { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(128, 128, 128, 0.12); }
.uku-co-pm-sheet-head svg { width: 16px; height: 16px; fill: none; stroke: var(--co-ink-soft, #555); stroke-width: 2; stroke-linecap: round; }
@media (min-width: 781px) {
	.uku-co-pm-sheet { left: auto; width: min(440px, 100%); border-radius: 18px 0 0 0; }
}
/* Checkout en page dédiée : pas de panneau, la feuille couvre l'écran. */
body > .uku-co-pm-dim,
body > .uku-co-pm-sheet { position: fixed; }

/* segmented : contrôle segmenté iOS */
.uku-co-pm-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; margin-bottom: 16px; border-radius: 10px; background: rgba(128, 128, 128, 0.12); }
.uku-co-pm-seg-thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / var(--seg-count, 3)); border-radius: 8px; background: var(--uku-color-bg-elevated, #fff); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04); transform: translateX(calc(var(--seg-index, 0) * 100%)); transition: transform 0.28s var(--co-ease-out); }
.uku-co-pm .uku-co-pm-seg button { position: relative; z-index: 1; height: 34px; border-radius: 8px; font-size: calc(13px * var(--uku-ui-scale, 1)); font-weight: 500; text-align: center; color: var(--co-ink); }
.uku-co-pm .uku-co-pm-seg button[aria-selected="true"] { font-weight: 600; }
.uku-co-pm-note { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--co-line-soft); border-radius: 14px; background: var(--uku-color-bg-elevated, #fff); }
.uku-co-pm-note p { margin: 0; font-size: calc(13px * var(--uku-ui-scale, 1)); line-height: 1.5; color: var(--co-ink-faint); }
.uku-co-pm-note strong { display: block; margin-bottom: 2px; font-size: calc(15px * var(--uku-ui-scale, 1)); font-weight: 600; color: var(--co-ink); }

/* express : moyen dominant en bouton de paiement direct (façon Apple Pay) */
.uku-co-pm .uku-co-pm-wallet { width: 100%; height: 54px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 14px; background: #000; color: #fff; font-size: calc(17px * var(--uku-ui-scale, 1)); font-weight: 600; letter-spacing: -0.01em; text-align: center; transition: transform 0.15s, opacity 0.15s; }
.uku-co-pm .uku-co-pm-wallet:active { transform: scale(0.98); }
.uku-co-pm-wallet .uku-co-pm-ic { width: 26px; height: 26px; border-radius: 7px; box-shadow: none; }
.uku-co-pm-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 18px 0 0; font-size: calc(13px * var(--uku-ui-scale, 1)); color: var(--co-ink-faint); }
.uku-co-pm-or::before,
.uku-co-pm-or::after { content: ''; height: 1px; background: var(--co-line-soft); }

@media (prefers-reduced-motion: reduce) {
	.uku-co-pm-check, .uku-co-pm-dim, .uku-co-pm-sheet, .uku-co-pm-seg-thumb, .uku-co-pm-row { transition: none; }
}

/* Tuiles cliquables (paySelectable) : le choix décide du prestataire payé. */
.uku-co-pay-method.is-selectable,
.uku-co-pay-card.is-selectable {
	width: auto;
	min-width: 58px;
	padding: 8px 6px;
	border: 1.5px solid transparent;
	border-radius: 10px;
	background: none;
	cursor: pointer;
	font: inherit;
	transition: border-color 0.15s, background-color 0.15s;
}
.uku-co-pay-card.is-selectable { margin: 8px auto 0; padding: 8px 14px; }
.uku-co-pay-method.is-selectable:hover,
.uku-co-pay-card.is-selectable:hover { background: rgba(128, 128, 128, 0.06); }
.uku-co-pay-method.is-on,
.uku-co-pay-card.is-on { border-color: var(--co-ink, #111); }
.uku-co-pay-method.is-on span,
.uku-co-pay-card.is-on span { color: var(--co-ink, #111); }
.uku-co-pay-card img { height: 24px; width: auto; object-fit: contain; }
.uku-co-pay-card span {
	font-size: calc(8px * var(--uku-ui-scale, 1)); font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--co-ink-faint);
}

/* PayPal activé en plus de Bictorys : bascule entre les deux prestataires
   (voir checkout.js — paymentMethodsHTML()/bindPaymentToggle()). Onglets
   soulignés identiques à .uku-co-tabs, juste recentrés et resserrés pour
   s'intégrer sous le libellé "Moyens de paiement acceptés" déjà centré. */
.uku-co-pay-tabs { justify-content: center; gap: 20px; margin-bottom: 20px; }
.uku-co-pay-panel[hidden] { display: none; }
.uku-co-pay-paypal-only {
	display: flex; align-items: center; justify-content: center;
	height: 46px; font-size: calc(13px * var(--uku-ui-scale, 1)); font-weight: 600; letter-spacing: 0.02em;
	color: var(--co-ink); border: 1px solid var(--co-line); border-radius: 8px;
}

/* ============ 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: calc(23px * var(--uku-ui-scale, 1)); margin: 4px 0 0; color: var(--co-ink); }
.uku-co-ok-num { font-size: calc(11.5px * var(--uku-ui-scale, 1)); 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: calc(12.5px * var(--uku-ui-scale, 1)); 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: calc(15px * var(--uku-ui-scale, 1));
	margin: 0 auto var(--uku-space-lg); max-width: 40ch;
}
.uku-order-confirm__ref { font-size: calc(13px * var(--uku-ui-scale, 1)); 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: calc(14px * var(--uku-ui-scale, 1)); color: var(--co-ink); line-height: 1.35; }
.uku-order-confirm__item-qty { font-size: calc(12.5px * var(--uku-ui-scale, 1)); color: var(--co-ink-faint); }
.uku-order-confirm__item-price { flex-shrink: 0; font-size: calc(13.5px * var(--uku-ui-scale, 1)); 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: calc(13px * var(--uku-ui-scale, 1)); }
.uku-order-confirm__item--muted .uku-order-confirm__item-price { color: var(--co-ink-faint); font-size: calc(12.5px * var(--uku-ui-scale, 1)); }
.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: calc(17px * var(--uku-ui-scale, 1)); color: var(--co-ink);
}

.uku-order-confirm .uku-btn { min-width: 220px; }
.uku-phone-capture { margin: var(--uku-space-lg) 0; padding: var(--uku-space-md); background: var(--co-surface-soft, rgba(0,0,0,0.03)); text-align: left; }
.uku-phone-capture__label { display: block; font-size: calc(13px * var(--uku-ui-scale, 1)); color: var(--co-ink-soft); margin-bottom: 8px; }
.uku-phone-capture__row { display: flex; gap: 8px; }
.uku-phone-capture__row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--co-line); font-size: calc(14px * var(--uku-ui-scale, 1)); }
.uku-phone-capture__status { margin: 8px 0 0; font-size: calc(13px * var(--uku-ui-scale, 1)); color: var(--co-ink); }
.uku-order-confirm__help { margin: var(--uku-space-lg) 0 0; font-size: calc(13px * var(--uku-ui-scale, 1)); }
.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.
   .woocommerce-customer-details (adresses de facturation/livraison) manquait
   ici : seule .woocommerce-order-details était masquée, alors que le même
   shim de compat WooCommerce Blocks (hook woocommerce_thankyou) réinjecte
   les DEUX blocs en siblings de .uku-order-confirm__card — d'où la page
   "Billing address / Shipping address" bruts, sans aucun style, à côté de la
   carte de confirmation correctement stylée (bug critique confirmé par
   capture d'écran, 2026-09-15). .woocommerce-columns/.col2-set ajoutés en
   plus par prudence : classes du layout 2 colonnes interne à ce bloc, au cas
   où une version de WooCommerce les rendrait hors de .woocommerce-customer-
   details. */
body.uku-order-received .page-header { display: none; }
body.uku-order-received .woocommerce-order-details,
body.uku-order-received .woocommerce-customer-details,
body.uku-order-received .woocommerce-columns,
body.uku-order-received .col2-set { 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: calc(12.5px * var(--uku-ui-scale, 1)); 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: calc(12px * var(--uku-ui-scale, 1)); 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: calc(15px * var(--uku-ui-scale, 1)); 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: calc(12.5px * var(--uku-ui-scale, 1)); }
.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: calc(12.5px * var(--uku-ui-scale, 1)); 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: calc(12.5px * var(--uku-ui-scale, 1)); 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: calc(12px * var(--uku-ui-scale, 1)); 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: calc(13.5px * var(--uku-ui-scale, 1)); }
.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: calc(12px * var(--uku-ui-scale, 1)); color: var(--uku-color-muted, #777); margin-bottom: 6px; }

/* ============================================================
   Mon compte : auth, navigation, formulaires, commandes — porté
   depuis Thiane (uku-commerce-theme, commits 0bc4df0 + c45d225)
   ============================================================ */
/* ============ 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; }
.woocommerce-MyAccount-content fieldset { border: none; padding: 0; margin: 24px 0 0; }
.woocommerce-MyAccount-content fieldset legend { font-size: 13px; font-weight: 600; color: var(--uku-color-text-on-light, #1a1a1a); padding: 0; margin: 0 0 16px; }

/* ============ conteneur "Mon compte" (woocommerce/myaccount/my-account.php) ============ */
.uku-account { max-width: 960px; margin: 0 auto; padding: var(--uku-space-2xl, 48px) var(--uku-space-lg, 24px) var(--uku-space-4xl, 96px); }

/* ============ tableau de bord (woocommerce/myaccount/dashboard.php) ============ */
.uku-account__greeting { font-size: 15px; color: var(--uku-color-text-on-light, #1a1a1a); margin: 0 0 28px; }
.uku-account__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 32px; }
.uku-account__card {
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 20px;
	border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; text-decoration: none; color: inherit;
	transition: border-color var(--uku-dur-fast, 200ms) var(--uku-ease), box-shadow var(--uku-dur-fast, 200ms) var(--uku-ease);
}
.uku-account__card:hover { border-color: var(--uku-color-primary); box-shadow: 0 4px 16px rgba(18, 14, 10, 0.08); }
.uku-account__card-icon { color: var(--uku-color-primary); }
.uku-account__card-title { font-size: 14px; font-weight: 600; color: var(--uku-color-text-on-light, #1a1a1a); }
.uku-account__card-text { font-size: 12.5px; line-height: 1.5; color: var(--uku-color-muted, #777); }
.uku-account__logout { font-size: 12.5px; color: var(--uku-color-muted, #777); text-decoration: underline; text-underline-offset: 2px; }
.uku-account__logout:hover { color: var(--uku-color-text-on-light, #1a1a1a); }

@media (max-width: 767px) {
	.uku-account__cards { grid-template-columns: 1fr; }
}

/* ============ mot de passe oublié / réinitialisation
   (woocommerce/myaccount/form-lost-password.php, lost-password-confirmation.php,
   form-reset-password.php) — même famille .uku-auth que connexion/inscription,
   avec un peu de "chrome" de carte en plus puisque ces écrans n'ont pas, eux,
   la carte blanche propre à la page Elementor "connexion". ============ */
.uku-auth--standalone {
	padding: 32px 28px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px;
	background: var(--uku-color-bg, #fff);
}
.uku-auth__lead { font-size: 13px; line-height: 1.6; color: var(--uku-color-muted, #777); margin: 0 0 24px; }
.uku-auth__back { display: inline-block; margin-top: 20px; font-size: 12.5px; color: var(--uku-color-muted, #777); text-decoration: none; }
.uku-auth__back:hover { color: var(--uku-color-text-on-light, #1a1a1a); }

/* ============ notices WooCommerce (messages/erreurs/infos) — par défaut
   l'apparence brute wp-admin (vert/rouge saturés, bordure arrondie générique)
   détonnait sur tous les écrans "Mon compte" et checkout natif. ============ */
.woocommerce-message, .woocommerce-error, .woocommerce-info,
.woocommerce-NoticeGroup .woocommerce-message, .woocommerce-NoticeGroup .woocommerce-error, .woocommerce-NoticeGroup .woocommerce-info {
	list-style: none; margin: 0 0 24px; padding: 14px 16px; border-radius: 4px; font-size: 13px; line-height: 1.5;
	background: var(--uku-color-bg-warm, #f3ede2); color: var(--uku-color-text-on-light, #1a1a1a); border-left: 3px solid var(--uku-color-primary);
}
.woocommerce-error { border-left-color: #b3261e; }
.woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button {
	float: none; display: inline-block; margin-top: 10px; padding: 10px 20px; font-size: 11px;
}
.woocommerce-error li { list-style: none; }

/* ============ boutons compacts (listes de commandes, pagination) ============ */
.uku-btn--sm { padding: 9px 18px; font-size: 10.5px; letter-spacing: 0.1em; }

/* ============ pastille de statut de commande — couleur par statut, mêmes
   7 statuts que uku_order_status_label() (theme-bridge.php). ============ */
.uku-order-status {
	display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 10.5px;
	font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
	background: var(--uku-color-bg-warm, #f3ede2); color: var(--uku-color-text-on-light, #1a1a1a);
}
.uku-order-status--completed { background: #e3f1e6; color: #1e6b36; }
.uku-order-status--processing { background: #e4edf7; color: #1d4e89; }
.uku-order-status--on-hold, .uku-order-status--pending { background: #f7eede; color: #8a5a17; }
.uku-order-status--cancelled, .uku-order-status--failed { background: #f8e4e2; color: #a3291e; }
.uku-order-status--refunded { background: #ece7f3; color: #5b4696; }

/* ============ commandes — liste (woocommerce/myaccount/orders.php) ============ */
.uku-orders { display: flex; flex-direction: column; gap: 12px; }
.uku-order-card { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; padding: 18px 20px; }
.uku-order-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.uku-order-card__number { display: block; font-size: 13.5px; font-weight: 600; color: var(--uku-color-text-on-light, #1a1a1a); text-decoration: none; }
.uku-order-card__number:hover { text-decoration: underline; }
.uku-order-card__date { display: block; font-size: 11.5px; color: var(--uku-color-muted, #777); margin-top: 3px; }
.uku-order-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.06); }
.uku-order-card__total { font-size: 12.5px; color: var(--uku-color-text-on-light, #1a1a1a); }
.uku-order-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.uku-orders__pagination { margin-top: 20px; display: flex; gap: 10px; }
.uku-account__empty { text-align: center; padding: 48px 24px; border: 1px dashed rgba(0, 0, 0, 0.15); border-radius: 6px; }
.uku-account__empty p { font-size: 13px; color: var(--uku-color-muted, #777); margin: 0 0 20px; }

/* ============ commande — détail (woocommerce/myaccount/view-order.php) ============ */
.uku-order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 32px; }
.uku-order-head__number { font-size: 19px; font-weight: 600; margin: 0; color: var(--uku-color-text-on-light, #1a1a1a); }
.uku-order-head__date { display: block; font-size: 12.5px; color: var(--uku-color-muted, #777); margin-top: 6px; }
.uku-order-section { margin-bottom: 40px; }
.uku-order-section__title { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 16px; color: var(--uku-color-text-on-light, #1a1a1a); }

.uku-order-notes { list-style: none; margin: 0 0 40px; padding: 0; }
.uku-order-notes__item { padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); font-size: 12.5px; }
.uku-order-notes__meta { font-size: 11px; color: var(--uku-color-muted, #777); margin: 0 0 4px; }
.uku-order-notes__text p { margin: 0; }

.uku-order-items { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.uku-order-item { display: flex; align-items: flex-start; gap: 14px; }
.uku-order-item__thumb { flex-shrink: 0; width: 56px; height: 56px; border-radius: 4px; overflow: hidden; background: var(--uku-color-bg-warm, #f3ede2); }
.uku-order-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uku-order-item__body { flex: 1; min-width: 0; }
.uku-order-item__name { margin: 0 0 4px; font-size: 13px; }
.uku-order-item__name a { color: var(--uku-color-text-on-light, #1a1a1a); text-decoration: none; }
.uku-order-item__name a:hover { text-decoration: underline; }
.uku-order-item__meta { list-style: none; margin: 0 0 4px; padding: 0; font-size: 11.5px; line-height: 1.6; color: var(--uku-color-muted, #777); }
.wc-item-meta-label { font-weight: 500; }
.uku-order-item__qty { margin: 0; font-size: 11.5px; color: var(--uku-color-muted, #777); }
.uku-order-item__total { flex-shrink: 0; font-size: 13px; color: var(--uku-color-text-on-light, #1a1a1a); }
.uku-order-item__note { margin: 8px 0 0 70px; font-size: 12px; color: var(--uku-color-muted, #777); }

.uku-order-totals { border-top: 1px solid rgba(0, 0, 0, 0.1); padding-top: 12px; margin-bottom: 8px; }
.uku-order-totals__row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.uku-order-totals__row:last-child { font-weight: 700; font-size: 14px; border-top: 1px solid rgba(0, 0, 0, 0.1); margin-top: 4px; padding-top: 12px; }
.uku-order-note { font-size: 12.5px; color: var(--uku-color-muted, #777); margin: 16px 0; }
.uku-order-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

@media (max-width: 767px) {
	.uku-order-item__note { margin-left: 0; }
}

/* ============ adresses (woocommerce/myaccount/my-address.php,
   form-edit-address.php) ============ */
.woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.woocommerce-Address {
	padding: 20px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px;
}
.woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.woocommerce-Address-title h2 { font-size: 13px; font-weight: 600; margin: 0; }
.woocommerce-Address-title a.edit { font-size: 11.5px; color: var(--uku-color-muted, #777); text-decoration: underline; text-underline-offset: 2px; }
.woocommerce-Address address { font-style: normal; font-size: 13px; line-height: 1.6; color: var(--uku-color-muted, #777); }

@media (max-width: 767px) {
	.woocommerce-Addresses { grid-template-columns: 1fr; }
}

/* ============ formulaires "Mes informations" / "Modifier l'adresse" —
   réutilisent les classes .uku-auth__field/__input déjà construites pour
   connexion/inscription (mêmes champs, même famille visuelle). ============ */
.uku-account__lead { font-size: 12.5px; color: var(--uku-color-muted, #777); margin: 0 0 24px; }
.uku-account-form { max-width: 520px; }
.uku-account-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.uku-account-form__password { border: none; padding: 28px 0 0; margin: 28px 0 0; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.uku-account-form__password legend { font-size: 13px; font-weight: 600; padding: 0; margin: 0 0 6px; color: var(--uku-color-text-on-light, #1a1a1a); }

@media (max-width: 575px) {
	.uku-account-form__row { grid-template-columns: 1fr; }
}

/* [uku_featured] — Produits mis en avant (Design → Accueil). */
.uku-featured { max-width: 1280px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) clamp(16px, 3vw, 40px); }
.uku-featured__head { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.uku-featured__eyebrow { margin: 0 0 10px; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--uku-color-accent); }
.uku-featured__title { margin: 0; font-family: var(--uku-font-heading); font-weight: 500; font-size: clamp(30px, 4.5vw, 48px); line-height: 1.08; }
.uku-featured__foot { margin-top: clamp(28px, 4vw, 48px); text-align: center; }
.uku-featured__cta { display: inline-block; padding: 15px 36px; border: 1px solid var(--uku-color-primary); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--uku-color-primary); text-decoration: none; transition: background .2s, color .2s; }
.uku-featured__cta:hover { background: var(--uku-color-primary); color: var(--uku-color-text-on-dark, #fff); }
/* Filtres de [uku_featured] : titres « Toutes les collections / rubriques »
   gardés, compteur de pièces masqué. */
.uku-featured .uku-cfg__count { display: none; }
.uku-featured .uku-cfg { padding-left: 0; padding-right: 0; padding-top: 0; }
.uku-featured .uku-cfg__active { display: none; }

/* ===== QUICK VIEW — mobile : bouton d'ajout sur une bande pleine largeur =====
   Le bouton (déjà sticky en bas du panneau) occupe toute la largeur sur le
   fond du panneau : il ne chevauche plus « Taille standard / Sur-mesure »
   pendant le défilement. Fenêtre centrée conservée (accès description,
   guide des tailles…). */
@media (max-width: 767.98px) {
	.uku-quickview .uku-quickview__add-btn {
		bottom: -24px;
		margin: 16px -24px 0;
		width: calc(100% + 48px);
		padding: 18px;
		border-radius: 0;
		box-shadow: 0 -10px 20px -6px rgba(0, 0, 0, 0.12);
	}
}

/* ===== Panier — tiroir mobile (bottom sheet) =====
   Sous 768px, le tiroir latéral comme la pop-up centrée (cart.type
   drawer/modal) montent du bas de l'écran, même grammaire que le Quick
   View : coins hauts arrondis, poignée, glisser vers le bas pour fermer. */
@media (max-width: 767.98px) {
	.uku-cart-drawer,
	.uku-cart-drawer--modal {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: none;
		height: auto;
		max-height: 88vh;
		max-height: 88dvh;
		border-radius: 22px 22px 0 0;
		opacity: 1;
		transform: translateY(105%);
		transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
		box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.uku-cart-drawer.is-open,
	.uku-cart-drawer--modal.is-open { transform: translateY(var(--uku-sheet-drag, 0px)); }
	.uku-cart-drawer.is-dragging { transition: none; }
	.uku-cart-drawer::before {
		content: "";
		display: block;
		flex: none;
		width: 40px;
		height: 4px;
		margin: 10px auto 0;
		border-radius: 4px;
		background: currentColor;
		opacity: 0.22;
	}
	.uku-cart-drawer__header { padding: 12px 20px 14px; }
}

/* ===== Mesures sur-mesure : grille 2 colonnes (Quick View + fiche) ===== */
.uku-quickview__measurements:not([hidden]),
.uku-pdp__measure-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 12px;
}
.uku-quickview__measurements > p { margin: 0; min-width: 0; }
.uku-quickview__measurements label,
.uku-pdp__measure-field label {
	font-size: calc(11px * var(--uku-ui-scale, 1));
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uku-color-muted, #777);
}
.uku-quickview__measure-row input,
.uku-pdp__measure-row input { min-width: 0; width: 100%; }
.uku-quickview__hauteur-standard[hidden],
.uku-quickview__size-pills[hidden] { display: none !important; }

/* ===== Footer éditorial : colonnes de liens (menu uku-footer) + paiement ===== */
.uku-fe__cols { display: grid; gap: 0; }
.uku-fe__col { border-bottom: 1px solid var(--fe-border); }
.uku-fe__col:last-child { border-bottom: 0; }
.uku-fe__col summary { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 16px 0; list-style: none; cursor: pointer; }
.uku-fe__col summary::-webkit-details-marker { display: none; }
.uku-fe__col summary::after { content: ""; width: 7px; height: 7px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s; }
.uku-fe__col[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.uku-fe__col ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0 0 18px; list-style: none; }
.uku-fe__col a { font-size: 13px; color: rgba(245, 240, 234, 0.78); text-decoration: none; transition: color 0.18s; }
.uku-fe__col a:hover { color: var(--fe-white); }
@media (min-width: 900px) {
	.uku-fe__cols { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 32px; }
	.uku-fe__col { border: 0; }
	.uku-fe__col summary { pointer-events: none; padding: 0 0 20px; }
	.uku-fe__col summary::after { display: none; }
}
.uku-fe__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 24px 20px; border-top: 1px solid var(--fe-border); }
.uku-fe__pay-label { font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fe-muted); }
.uku-fe__pay ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.uku-fe__pay li { padding: 6px 11px; border: 1px solid var(--fe-border2); border-radius: 999px; font-size: 11px; font-weight: 500; color: rgba(245, 240, 234, 0.82); white-space: nowrap; }

/* ===== Barre d'onglets mobile (modules.header.mobile_tabbar) — façon Instagram =====
   Pilule flottante en verre sombre, icônes seules, onglet actif posé sur
   une pastille claire. Au défilement vers le bas, la pilule se rétrécit
   (plus étroite, plus basse, icônes plus petites) ; elle reprend sa
   taille au défilement vers le haut (interactions.js : .is-compact).
   Masquée dès 768px. */
.uku-tabbar { display: none; }
@media (max-width: 767.98px) {
	.uku-tabbar {
		position: fixed;
		left: 50%;
		bottom: calc(14px + env(safe-area-inset-bottom, 0px));
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 28px);
		max-width: 440px;
		height: 64px;
		padding: 6px;
		border-radius: 999px;
		background: rgba(22, 21, 20, 0.72);
		backdrop-filter: blur(22px) saturate(1.8);
		-webkit-backdrop-filter: blur(22px) saturate(1.8);
		border: 0.5px solid rgba(255, 255, 255, 0.14);
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
		transform: translateX(-50%);
		transition: width 0.42s cubic-bezier(0.2, 0.9, 0.25, 1), height 0.42s cubic-bezier(0.2, 0.9, 0.25, 1), bottom 0.42s cubic-bezier(0.2, 0.9, 0.25, 1), transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s;
	}
	.uku-tabbar__item {
		position: relative;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: none;
		color: #fff;
		font: inherit;
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background 0.25s, transform 0.15s;
	}
	/* Libellés : lus par les lecteurs d'écran, jamais affichés (comme Instagram). */
	.uku-tabbar__item > span:not(.uku-tabbar__icon) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.uku-tabbar__item svg { width: 26px; height: 26px; stroke-width: 1.7; transition: width 0.42s, height 0.42s; }
	.uku-tabbar__item.is-active { background: rgba(255, 255, 255, 0.16); }
	.uku-tabbar__item.is-active svg { stroke-width: 2.1; }
	.uku-tabbar__item:active { transform: scale(0.88); }
	.uku-tabbar__icon { position: relative; display: flex; }
	/* Compteur panier : point rouge comme les notifications Instagram,
	   avec le nombre (lisible) dedans. */
	.uku-tabbar__badge {
		position: absolute;
		top: -3px;
		right: -7px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 999px;
		background: #ff3040 !important;
		color: #fff !important;
		font-size: 9px;
		font-weight: 700;
		line-height: 16px;
		text-align: center;
		box-shadow: 0 0 0 2px rgba(22, 21, 20, 0.9);
	}
	.uku-tabbar__badge[data-count="0"] { display: none; }
	/* Rétrécie (défilement vers le bas). */
	.uku-tabbar.is-compact { width: min(calc(100% - 96px), 300px); height: 52px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(22, 21, 20, 0.62); }
	.uku-tabbar.is-compact .uku-tabbar__item svg { width: 22px; height: 22px; }
	body:has(.uku-tabbar) { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
	body:has(.uku-tabbar) .uku-whatsapp { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
	body.uku-no-scroll .uku-tabbar { transform: translate(-50%, 150%); }
}

/* En-tête collant : sous la barre d'administration WordPress quand elle
   est affichée (connecté), sinon il se cale dessous et disparaît. */
@media (min-width: 783px) {
	.admin-bar .uku-header--sticky { top: 32px; }
}
/* WhatsApp intégré à la barre d'onglets : pas de second bouton flottant. */
@media (max-width: 767.98px) {
	body:has(.uku-tabbar__item--whatsapp) .uku-whatsapp { display: none !important; }
}
/* Logo WhatsApp officiel : même taille que les icônes au trait (son
   contour de bulle occupe la même zone que les autres pictogrammes). */
@media (max-width: 767.98px) {
	.uku-tabbar__item svg.uku-tabbar__wa { width: 26px; height: 26px; stroke: none; }
	.uku-tabbar.is-compact .uku-tabbar__item svg.uku-tabbar__wa { width: 22px; height: 22px; }
}

/* Menu mobile : devise + langue groupées en bas (préférences). */
.uku-offcanvas__footer { flex-wrap: wrap; }
.uku-offcanvas__prefs { display: flex; align-items: center; gap: 18px; }
.uku-offcanvas__lang { display: flex; align-items: center; gap: 6px; }
.uku-offcanvas__lang .uku-utility-bar__lang-btn { padding: 6px 2px; background: none; border: 0; color: inherit; opacity: .55; font-size: 12px; font-weight: 500; letter-spacing: .12em; cursor: pointer; }
.uku-offcanvas__lang .uku-utility-bar__lang-btn.is-active { opacity: 1; font-weight: 600; }
.uku-offcanvas__lang .uku-utility-bar__lang-sep { opacity: .3; }

/* =====================================================================
 * Footer éditorial épuré (template-parts/footer-editorial.php).
 * Newsletter en tête, colonnes de liens, marque + réseaux, barre basse.
 * Couleurs par variables : sombre par défaut ; un site peut les
 * redéfinir (fond clair qui prolonge la page, ex. Meya).
 * ===================================================================== */
.uku-footer--editorial {
	--fe-bg: #0a0a0a;
	--fe-ink: #f5f0ea;
	--fe-soft: color-mix(in srgb, var(--fe-ink) 72%, transparent);
	--fe-muted: color-mix(in srgb, var(--fe-ink) 50%, transparent);
	--fe-line: color-mix(in srgb, var(--fe-ink) 14%, transparent);
	--fe-pad: clamp(20px, 4vw, 56px);
	margin-top: 0;
	padding: 0;
	background: var(--fe-bg);
	color: var(--fe-ink);
	border-top: 1px solid var(--fe-line);
}
.uku-footer--editorial .uku-fe__wrap { max-width: 1320px; margin: 0 auto; padding: clamp(40px, 5vw, 72px) var(--fe-pad) clamp(24px, 3vw, 36px); }
.uku-footer--editorial .uku-fe__nl,
.uku-footer--editorial .uku-fe__cols,
.uku-footer--editorial .uku-fe__brand { margin: 0; padding: 0; border: 0; background: none; border-radius: 0; }
.uku-footer--editorial .uku-fe__col-head { display: block; margin: 0; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--fe-muted); }

/* Newsletter */
.uku-footer--editorial .uku-fe__nl { display: grid; gap: 22px; padding-bottom: clamp(32px, 4vw, 52px); }
.uku-footer--editorial .uku-fe__nl-title { margin: 12px 0 0; font-family: var(--uku-font-heading); font-size: clamp(30px, 3.6vw, 46px); font-weight: 400; line-height: 1.05; letter-spacing: -.01em; color: var(--fe-ink); }
.uku-footer--editorial .uku-fe__nl-title em { font-style: italic; font-weight: 400; color: inherit; }
.uku-footer--editorial .uku-fe__form { display: flex; flex-direction: row; align-items: center; gap: 12px; max-width: none; margin: 0; padding: 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--fe-ink) 35%, transparent); transition: border-color .25s; }
.uku-footer--editorial .uku-fe__form:focus-within { border-color: var(--fe-ink); }
.uku-footer--editorial .uku-fe__input { flex: 1; min-width: 0; height: 54px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 16px; color: var(--fe-ink); }
.uku-footer--editorial .uku-fe__input::placeholder { color: var(--fe-muted); }
.uku-footer--editorial .uku-fe__input:focus { background: none; outline: none; border: 0; }
.uku-footer--editorial .uku-fe__btn { display: inline-flex; align-items: center; gap: 10px; flex: none; width: auto; height: 54px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--fe-ink); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.uku-footer--editorial .uku-fe__col ul li { line-height: 1.4; }
.uku-footer--editorial .uku-fe__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .25s; }
.uku-footer--editorial .uku-fe__btn:hover svg { transform: translateX(4px); }
.uku-footer--editorial .uku-fe__note { display: block; margin-top: 10px; font-size: 11.5px; color: var(--fe-muted); }

/* Colonnes : accordéons sur mobile */
.uku-footer--editorial .uku-fe__cols { display: block; border-top: 1px solid var(--fe-line); }
.uku-footer--editorial .uku-fe__col { border-bottom: 1px solid var(--fe-line); }
.uku-footer--editorial .uku-fe__col summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; color: var(--fe-ink); }
.uku-footer--editorial .uku-fe__col ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0 0 20px; list-style: none; }
.uku-footer--editorial .uku-fe__col a,
.uku-footer--editorial .uku-fe__col span { font-size: 14px; color: var(--fe-soft); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .2s, background-size .35s ease; padding-bottom: 2px; }
.uku-footer--editorial .uku-fe__col a:hover { color: var(--fe-ink); background-size: 100% 1px; }

/* Marque */
.uku-footer--editorial .uku-fe__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: clamp(24px, 3vw, 36px); }
.uku-footer--editorial .uku-fe__logo { margin: 0; font-size: 20px; color: var(--fe-ink); text-decoration: none; }
.uku-footer--editorial .uku-fe__tagline { flex: 1 1 260px; max-width: 420px; margin: 0; font-size: 13px; line-height: 1.6; color: var(--fe-muted); }
.uku-footer--editorial .uku-fe__socials { display: flex; gap: 8px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.uku-footer--editorial .uku-fe__social { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--fe-line); border-radius: 50%; background: none; color: var(--fe-ink); transition: background .2s, color .2s, border-color .2s; }
.uku-footer--editorial .uku-fe__social:hover { background: var(--fe-ink); border-color: var(--fe-ink); color: var(--fe-bg); }
.uku-footer--editorial .uku-fe__social svg { width: 15px; height: 15px; }

/* Barre basse */
.uku-footer--editorial .uku-fe__bottom { display: flex; flex-direction: column; gap: 8px; max-width: 1320px; margin: 0 auto; padding: 18px var(--fe-pad) calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--fe-line); }
.uku-footer--editorial .uku-fe__copy,
.uku-footer--editorial .uku-fe__pay { margin: 0; padding: 0; border: 0; font-size: 11.5px; line-height: 1.6; color: var(--fe-muted); }
.uku-footer--editorial .uku-fe__copy strong { color: inherit; font: inherit; }
.uku-footer--editorial .uku-fe__legal li + li::before { background: var(--fe-line); }
.uku-footer--editorial .uku-fe__legal a { font-size: 11px; letter-spacing: .06em; color: var(--fe-muted); }
.uku-footer--editorial .uku-fe__legal a:hover { color: var(--fe-ink); }

@media (max-width: 767px) {
	.uku-footer--editorial .uku-fe__btn span { display: none; }
	.uku-footer--editorial .uku-fe__socials { margin-left: 0; }
}
@media (min-width: 900px) {
	.uku-footer--editorial .uku-fe__nl { grid-template-columns: 1.2fr 1fr; align-items: end; gap: clamp(40px, 6vw, 96px); }
	.uku-footer--editorial .uku-fe__cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 32px; padding: clamp(28px, 3vw, 40px) 0; border-bottom: 1px solid var(--fe-line); }
	.uku-footer--editorial .uku-fe__col { border: 0; }
	.uku-footer--editorial .uku-fe__col summary { padding: 0 0 20px; color: var(--fe-muted); }
	.uku-footer--editorial .uku-fe__col ul { padding: 0; }
	.uku-footer--editorial .uku-fe__bottom { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
	.uku-footer--editorial .uku-fe__pay { flex: 1; text-align: center; }
}


/* =====================================================================
 * Boutons icône (fermer, retirer) : remis à zéro. Le padding global des
 * <button> (8px 16px) décentrait l'icône dès qu'un bouton a une taille
 * fixe (X de l'aperçu rapide, sélecteur de vue de la boutique…).
 * ===================================================================== */
.uku-offcanvas__close,
.uku-cart-drawer__close,
.uku-cart-drawer__item-remove,
.uku-checkout-modal__close,
.uku-wishlist__close,
.uku-wishlist__item-remove,
.uku-search__close,
.uku-popup__close,
.uku-compare__close,
.uku-compare__remove,
.uku-lightbox__close,
.uku-quickview__close {
	display: inline-grid;
	place-items: center;
	padding: 0 !important;
	line-height: 0;
	min-height: 0;
}
.uku-offcanvas__close svg, .uku-cart-drawer__close svg, .uku-cart-drawer__item-remove svg,
.uku-checkout-modal__close svg, .uku-wishlist__close svg, .uku-wishlist__item-remove svg,
.uku-search__close svg, .uku-popup__close svg, .uku-compare__close svg, .uku-compare__remove svg,
.uku-lightbox__close svg, .uku-quickview__close svg { display: block; flex: none; }

/* =====================================================================
 * Confirmation de commande (woocommerce/checkout/thankyou.php), même
 * langage que le checkout raffiné : « Merci, prénom ! », suivi en 4 étapes
 * (déduites du statut réel), encadré Contact / Livraison / Paiement,
 * récapitulatif à vignettes.
 * Le tableau « détails de commande » que WooCommerce réinjecte via le hook
 * woocommerce_thankyou est rendu par nos gabarits order/ (.uku-order-section
 * depuis la refonte Mon compte) : l'ancien masquage
 * (.woocommerce-order-details) ne le visait plus — la commande s'affichait
 * deux fois, avec des libellés anglais.
 * ===================================================================== */
body.uku-order-received .uku-order-confirm > .uku-order-section { display: none; }
.uku-order-confirm {
	--co-ink: #111110;
	--co-ink-soft: #4a4740;
	--co-ink-faint: #8a8476;
	--co-bg: #ffffff;
	--co-panel: #f6f5f1;
	--co-line: #e6e2d8;
	--co-radius: 12px;
	display: flex; justify-content: center; align-items: flex-start;
	padding: clamp(32px, 6vw, 80px) 16px clamp(48px, 8vw, 96px);
	background: var(--co-panel);
}
.uku-order-confirm__card { max-width: 620px; padding: clamp(28px, 5vw, 52px); border-radius: 20px; background: var(--co-bg); box-shadow: 0 1px 2px rgba(17,17,16,.04), 0 18px 50px rgba(17,17,16,.06); text-align: left; }
.uku-order-confirm__head { text-align: center; }
.uku-order-confirm__mark { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--co-ink); color: var(--co-bg); display: grid; place-items: center; }
.uku-order-confirm__ref { margin: 0 0 8px; font-size: 13px; letter-spacing: .04em; color: var(--co-ink-faint); }
.uku-order-confirm__title { margin: 0 0 12px; font-family: var(--uku-font-heading); font-size: clamp(30px, 4vw, 40px); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; text-transform: none; color: var(--co-ink); }
.uku-order-confirm__text { max-width: 460px; margin: 0 auto; font-size: 15px; line-height: 1.6; color: var(--co-ink-soft); }

/* Suivi */
.uku-order-confirm__steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 32px 0 28px; padding: 0; list-style: none; counter-reset: none; }
.uku-order-confirm__steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.uku-order-confirm__steps li + li::before { content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: var(--co-line); }
.uku-order-confirm__steps li.is-done + li::before,
.uku-order-confirm__steps li.is-done + li.is-current::before { background: var(--co-ink); }
.uku-order-confirm__step-dot { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--co-bg); border: 2px solid var(--co-line); }
.uku-order-confirm__steps li.is-done .uku-order-confirm__step-dot { background: var(--co-ink); border-color: var(--co-ink); }
.uku-order-confirm__steps li.is-current .uku-order-confirm__step-dot { border-color: var(--co-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--co-ink) 12%, transparent); }
.uku-order-confirm__step-lbl { font-size: 12.5px; color: var(--co-ink-faint); }
.uku-order-confirm__steps li.is-done .uku-order-confirm__step-lbl,
.uku-order-confirm__steps li.is-current .uku-order-confirm__step-lbl { color: var(--co-ink); font-weight: 500; }

/* Encadré Contact / Livraison / Paiement */
.uku-order-confirm__info { margin: 0 0 28px; border: 1px solid var(--co-line); border-radius: var(--co-radius); }
.uku-order-confirm__info > div { display: flex; gap: 14px; padding: 14px 18px; }
.uku-order-confirm__info > div + div { border-top: 1px solid var(--co-line); }
.uku-order-confirm__info dt { flex: 0 0 84px; margin: 0; font-size: 13px; color: var(--co-ink-faint); }
.uku-order-confirm__info dd { flex: 1; min-width: 0; margin: 0; font-size: 14.5px; color: var(--co-ink); overflow-wrap: anywhere; }
.uku-order-confirm__info dd small { display: block; margin-top: 2px; font-size: 13px; color: var(--co-ink-faint); }

/* Récapitulatif */
.uku-order-confirm__recap { margin: 0 0 28px; border: 0; }
.uku-order-confirm__label { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--co-ink-soft); }
.uku-order-confirm__item { gap: 16px; padding: 0 0 16px; border: 0; }
.uku-order-confirm__item-img { position: relative; width: 64px; height: 80px; border-radius: 10px; overflow: visible; background: none; }
.uku-order-confirm__item-img img { border-radius: 10px; border: 1px solid var(--co-line); }
.uku-order-confirm__item-qtyb { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--co-ink-soft); color: #fff; font-size: 11.5px; font-weight: 600; }
.uku-order-confirm__item-name { font-size: 14.5px; font-weight: 500; }
.uku-order-confirm__item-qty { font-size: 13px; }
.uku-order-confirm__item-price { font-size: 14.5px; font-weight: 500; }
.uku-order-confirm__rows { padding-top: 12px; border-top: 1px solid var(--co-line); }
.uku-order-confirm__rows > div { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; color: var(--co-ink-soft); }
.uku-order-confirm__rows > div span:last-child { color: var(--co-ink); font-variant-numeric: tabular-nums; }
.uku-order-confirm__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--co-line); }
.uku-order-confirm__total span:first-child { font-size: 15px; font-weight: 600; color: var(--co-ink); }
.uku-order-confirm__total span:last-child { font-family: var(--uku-font-heading); font-size: 28px; color: var(--co-ink); }

/* Actions */
.uku-order-confirm .uku-order-confirm__cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; border-radius: var(--co-radius); }
.uku-order-confirm__help { text-align: center; }

@media (max-width: 560px) {
	.uku-order-confirm__card { padding: 28px 20px; border-radius: 16px; }
	.uku-order-confirm__step-lbl { font-size: 11.5px; }
	.uku-order-confirm__info > div { flex-direction: column; gap: 2px; }
	.uku-order-confirm__info dt { flex: none; }
}

/* =====================================================================
 * Checkout — langage visuel du checkout Meya en production (référence
 * validée par le client) : fond de feuille + champs et cartes blancs,
 * en-tête « ‹ · points d'étape · × », contrôles segmentés à option active
 * pleine, libellés en petites capitales, zones en cartes à radio à droite,
 * étape « Récapitulatif & paiement » avec bandeau Total sombre et moyens
 * de paiement en cartes (grille d'opérateurs), bouton anthracite.
 * Jetons --co-* : un site redéfinit le fond, l'accent des étapes, etc.
 * ===================================================================== */
.uku-checkout-modal,
.uku-checkout-page {
	--co-bg: #ffffff;
	--co-card: #ffffff;
	--co-ink: #141414;
	--co-ink-soft: #55524b;
	--co-ink-faint: #8c877c;
	--co-line: #e6e2d8;
	--co-field-line: #2b2b2b;
	--co-cta: #1d1d1f;
	--co-cta-off: #5f5f5a;
	--co-step-done: #c99a4a;
	--co-soft: #f4f1ea;
	--co-radius: 12px;
}
.uku-checkout-modal__panel { background: var(--co-bg); }

/* ---- En-tête : ‹  · · ● ÉTAPE ·  × ---- */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-form-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 76px; padding: 18px 76px !important; border-bottom: 1px solid var(--co-line); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-stepper { gap: 8px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sp { display: flex; align-items: center; gap: 8px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sp-num { width: 8px; height: 8px; border-radius: 50%; background: #cfcbc2; font-size: 0; overflow: hidden; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sp.is-done .uku-co-sp-num { background: var(--co-step-done); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sp.is-active .uku-co-sp-num { background: var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sp-lbl { display: none; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sp.is-active .uku-co-sp-lbl { display: inline; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sp-line { flex: 0 0 18px; min-width: 18px; height: 1px; background: #d6d2c9; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sp-line::after { display: none; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-back { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; padding: 0 !important; font-size: 0; color: var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-back svg { width: 20px; height: 20px; stroke-width: 2; }
.uku-checkout-modal .uku-checkout-modal__close { top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%; background: #e7e4dd; color: var(--co-ink); }
.uku-checkout-modal .uku-checkout-modal__close svg { width: 18px; height: 18px; stroke-width: 1.8; }

/* ---- Contenu ---- */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-body { padding: 28px 32px 20px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-step-title { margin: 0 0 22px; font-family: var(--uku-font-heading); font-size: 30px; font-weight: 400; line-height: 1.15; letter-spacing: .01em; color: var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-lbl,
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-glabel { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--co-ink-faint); text-align: left; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-glabel { margin: 22px 0 12px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-field { margin-bottom: 18px; }

/* Champs : blancs, bordure nette */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-inp,
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-search-wrap input,
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-phone-row { height: 54px; padding: 0 16px; border: 1px solid var(--co-field-line); border-radius: 6px; background: var(--co-card); font-size: 16px; color: var(--co-ink); box-shadow: none; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-inp:focus,
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-search-wrap input:focus,
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-phone-row:focus-within { border-color: var(--co-ink); box-shadow: 0 0 0 1px var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-inp::placeholder,
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-phone-inp::placeholder { color: #b9b5ac; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-phone-row { display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-dial-trigger { display: flex; align-items: center; gap: 8px; height: auto; padding: 0 16px 0 18px; border-right: 1px solid var(--co-field-line); font-size: 16px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-phone-row:focus-within .uku-co-dial-trigger { border-right-color: var(--co-step-done); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-phone-inp { flex: 1; min-width: 0; padding: 0 16px; border: 0; background: none; outline: none; font-size: 16px; font-family: inherit; color: var(--co-ink); }

/* Contrôles segmentés : option active pleine */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-tabs,
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-scope-tabs { display: flex; gap: 0; margin: 0 0 22px; padding: 0; border: 1px solid var(--co-line); border-radius: 8px; background: var(--co-card); overflow: hidden; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-tab,
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-scope-tab { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 12px; border: 0; border-radius: 6px; background: none; font-size: 15px; font-weight: 500; color: var(--co-ink-faint); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-tab::after,
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-scope-tab::after,
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-scope-tab svg { display: none; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-tab.is-on,
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-scope-tab.is-active { background: var(--co-cta); color: #fff; }

/* Case « Se souvenir de moi » */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-chk { gap: 14px; padding-bottom: 6px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-chk-box { width: 30px; height: 30px; flex: none; border: 1px solid var(--co-line); border-radius: 6px; background: var(--co-card); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-chk-txt { font-size: 16px; color: var(--co-ink-soft); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-chk-sub { font-size: 14px; line-height: 1.45; color: var(--co-ink-faint); }

/* Zones de livraison : cartes blanches, radio à droite */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 22px 20px 22px 24px; border: 1.5px solid var(--co-line); border-radius: var(--co-radius); background: var(--co-card); text-align: left; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row::before { display: none; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row::after { content: ""; order: 3; flex: none; width: 22px; height: 22px; border: 1.5px solid #cfcbc2; border-radius: 50%; background: var(--co-card); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row.is-on { border-color: var(--co-ink); box-shadow: 0 2px 10px rgba(20,20,20,.06); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row.is-on::after { border: 6px solid var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row-info { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row-name { font-size: 17px; font-weight: 600; color: var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row-areas { font-size: 14px; font-style: italic; color: var(--co-ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row-sub { font-size: 13px; color: var(--co-ink-faint); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row-price { order: 2; font-size: 17px; font-weight: 600; color: var(--co-ink-soft); white-space: nowrap; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row-check { display: none; }

/* Étape « Récapitulatif & paiement » */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pay-items { margin: 0; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pay-item { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--co-line); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pay-item:first-child { padding-top: 0; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pay-item-img { width: 70px; height: 88px; border-radius: 6px; object-fit: cover; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pay-item-info { flex: 1; min-width: 0; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pay-item-name { font-size: 16px; color: var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pay-item-meta { margin-top: 6px; font-size: 14px; color: var(--co-ink-faint); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pay-item-price { font-size: 16px; font-weight: 600; color: var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pay-rows { padding: 18px 0; border-bottom: 1px solid var(--co-line); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pay-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 4px 0; font-size: 16px; color: var(--co-ink-faint); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pay-row small { display: block; margin-top: 6px; font-size: 14px; color: var(--co-ink-faint); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pay-row.is-strong { font-size: 18px; color: var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pay-row.is-strong span:last-child { font-weight: 700; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-recap { margin: 20px 0; padding: 6px 18px; border: 0; border-radius: 10px; background: var(--co-soft); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-recap-line { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border: 0 !important; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-recap-k { flex: 1; font-size: 15px; color: var(--co-ink-faint); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-recap-v { flex: 0 1 auto; text-align: right; font-size: 15px; color: var(--co-ink); overflow-wrap: anywhere; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-recap-edit { flex: none; font-size: 13px; color: var(--co-ink-faint); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-total-band { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; padding: 26px 28px; border-radius: 10px; background: var(--co-ink); color: #fff; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-total-band span:first-child { font-size: 22px; font-weight: 700; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-total-band span:last-child { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-glabel--payment { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--co-line); }

/* Moyens de paiement : cartes à radio */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm,
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-group { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-group { display: flex; flex-direction: column; gap: 14px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-row { display: flex; align-items: center; gap: 18px; min-height: 0; padding: 22px 20px; border: 1.5px solid var(--co-line); border-radius: var(--co-radius); background: var(--co-card); text-align: left; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-row + .uku-co-pm-row::before { display: none; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-row[aria-checked="true"] { border: 2px solid var(--co-ink); background: #f7f5f1; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-row.has-ops { align-items: flex-start; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-row > img.uku-co-pm-ic { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-ic--glyph { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: transparent; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-row:not(.has-ops) .uku-co-pm-ic--glyph { width: 52px; height: 48px; background: var(--co-soft); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-ic--glyph svg { width: 22px; height: 22px; fill: none; stroke: var(--co-ink-soft); stroke-width: 1.6; stroke-linecap: round; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-t { font-size: 18px; font-weight: 600; color: var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-st { font-size: 15px; color: var(--co-ink-faint); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 12px 8px; margin: 14px 0 0 -58px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-op { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--co-ink-soft); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-op img { width: 44px; height: 44px; border-radius: 8px; object-fit: contain; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-cards { display: flex; gap: 10px; margin-top: 4px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-cards img { height: 30px; width: auto; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-radio { flex: none; align-self: center; width: 26px; height: 26px; border: 1.5px solid #cfcbc2; border-radius: 50%; background: var(--co-card); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-row[aria-checked="true"] .uku-co-pm-radio { border: 7px solid var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-check { display: none; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-hint { margin-top: 12px; font-size: 14px; color: var(--co-ink-faint); }

/* Bouton : anthracite, arrondi, en minuscules */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-foot { padding: 16px 32px calc(22px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--co-line); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-cta { min-height: 62px; border-radius: 12px !important; background: var(--co-cta); color: #fff; font-size: 18px; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none; box-shadow: none; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-cta:disabled { background: var(--co-cta-off); color: #fff; opacity: 1; }

/* ---- Récapitulatif latéral (ordinateur) ---- */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sum-item { gap: 14px; align-items: center; padding-bottom: 16px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sum-img { width: 56px; height: 70px; border-radius: 6px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sum-name { font-size: 15px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sum-meta { font-size: 13px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sum-price { font-size: 15px; font-weight: 600; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sum-row { font-size: 15px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sum-total span:first-child { font-size: 16px; font-weight: 600; color: var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sum-total span:last-child { font-family: inherit; font-size: 22px; font-weight: 700; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sum-item-remove { padding: 4px !important; }

@media (min-width: 781px) {
	.uku-checkout-modal__panel { max-width: 1000px; height: min(760px, 92dvh); border-radius: 20px; }
	.uku-checkout-modal .uku-co-form-pane { order: 1; }
	.uku-checkout-modal .uku-co-summary-pane { order: 2; flex: 0 0 360px; border-left: 1px solid var(--co-line); background: var(--co-soft); }
	.uku-checkout-modal .uku-co-summary-inner { padding: 96px 32px 24px; }
	.uku-checkout-modal .uku-checkout-modal__close { z-index: 40; }
	.uku-checkout-modal .uku-co-form-head { padding-right: 32px !important; }
	/* Le récapitulatif est déjà visible à droite : pas de répétition. */
	.uku-checkout-modal .uku-co-pay-items,
	.uku-checkout-modal .uku-co-pay-rows { display: none; }
	.uku-checkout-modal .uku-co-recap { margin-top: 0; }
}
@media (max-width: 780px) {
	.uku-checkout-modal__panel { border-radius: 26px 26px 0 0; }
	.uku-checkout-modal__panel::before { content: ""; position: absolute; top: 10px; left: 50%; z-index: 41; width: 56px; height: 5px; border-radius: 3px; background: #d4d0c7; transform: translateX(-50%); }
	.uku-checkout-modal .uku-co-form-head { padding-top: 26px !important; padding-bottom: 18px !important; }
	.uku-checkout-modal .uku-checkout-modal__close { top: 26px; right: 18px; }
	.uku-checkout-modal .uku-co-body { padding: 26px 22px 16px; }
	.uku-checkout-modal .uku-co-foot { padding: 14px 22px calc(18px + env(safe-area-inset-bottom, 0px)); }
	:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-summary-toggle { background: var(--co-soft); }
	:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-summary-inner { background: var(--co-soft); }
	/* L'étape Paiement contient déjà tout le récapitulatif. */
	.uku-checkout-modal.is-step-3 .uku-co-summary-toggle,
	.uku-checkout-modal.is-step-3 .uku-co-summary-inner { display: none; }
}
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sp-num svg { display: none; }
@media (max-width: 780px) {
	.uku-checkout-modal .uku-co-back { top: calc(50% + 4px); left: 12px; }
}
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-cards img { height: 40px; }
/* Récapitulatif : nom sur toute la largeur, prix dessous (la colonne de
   360px ne laisse pas la place à nom + prix + retirer côte à côte). */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sum-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "thumb info rm" "thumb price rm"; column-gap: 14px; row-gap: 4px; align-items: start; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sum-thumb { grid-area: thumb; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sum-info { grid-area: info; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sum-price { grid-area: price; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sum-item-remove { grid-area: rm; align-self: start; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sum-qty { background: var(--co-ink-soft); }

/* ---- Étape Panier : « Complétez votre look » (rangées par rubrique,
   défilement horizontal, ajout en un clic) ---- */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-look { margin-top: 26px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-look-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-look-sub { margin: 0 0 22px; font-size: 15px; color: var(--co-ink-faint); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-look-group { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--co-ink-faint); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-look-group::after { content: ""; flex: 1; height: 1px; background: var(--co-line); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-look-rail { display: flex; gap: 14px; margin: 0 -32px 28px; padding: 2px 32px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-look-rail::-webkit-scrollbar { display: none; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-look-card { flex: 0 0 168px; display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-radius: 12px; background: var(--co-card); box-shadow: 0 4px 16px rgba(20,20,20,.06); overflow: hidden; scroll-snap-align: start; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-look-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-look-name { padding: 6px 14px 0; font-size: 15px; color: var(--co-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-look-price { padding: 0 14px; font-size: 15px; font-weight: 600; color: var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-look-add { margin: 6px 14px 0; height: 46px; padding: 0 !important; border: 1.5px solid var(--co-line); border-radius: 8px; background: var(--co-card); font: inherit; font-size: 14px; font-weight: 500; color: var(--co-ink); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-look-add:hover { border-color: var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-look-add.is-loading { opacity: .5; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-look-add.is-added { border-color: var(--co-ink); background: var(--co-ink); color: #fff; }
@media (max-width: 780px) {
	.uku-checkout-modal .uku-co-look-rail { margin: 0 -22px 26px; padding: 2px 22px 10px; }
	.uku-checkout-modal .uku-co-look-card { flex-basis: 150px; }
	/* L'étape Panier montre déjà tout le panier. */
	.uku-checkout-modal.is-step-0 .uku-co-summary-toggle,
	.uku-checkout-modal.is-step-0 .uku-co-summary-inner { display: none; }
}
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-back[hidden] { display: none !important; }

/* =====================================================================
 * Checkout — passe de conformité et de finition (audit mesuré) :
 * - contraste WCAG AA : texte secondaire #6b665c (≈ 5:1 sur crème, avant
 *   3,2–3,6:1), textes indicatifs ≈ 3,5:1 (avant 2,05:1) ;
 * - échelle typographique réduite à 6 tailles : 12 / 14 / 16 / 18 / 24 / 30 ;
 * - zones tactiles ≥ 44px (retour, « Modifier ») ;
 * - cartes plus compactes, ombres douces, icônes au trait fin (masques
 *   CSS, couleur héritée) ;
 * - ordinateur : bouton sous les champs, récapitulatif titré.
 * ===================================================================== */
.uku-checkout-modal,
.uku-checkout-page {
	--co-ink-faint: #6b665c;
	--co-placeholder: #8f8a80;
	--co-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 2px 8px rgba(20, 20, 20, .04);
	--co-shadow-on: 0 2px 4px rgba(20, 20, 20, .06), 0 8px 20px rgba(20, 20, 20, .08);
	--ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 10c0 5.5-7 11-7 11s-7-5.5-7-11a7 7 0 0 1 14 0z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
	--ico-plane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E");
	--ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E");
	--ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
	--ico-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.4 3.8 5.6 3.8 9s-1.3 6.6-3.8 9c-2.5-2.4-3.8-5.6-3.8-9S9.5 5.4 12 3z'/%3E%3C/svg%3E");
	--ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c1.4-3.6 4.3-5.5 7.5-5.5s6.1 1.9 7.5 5.5'/%3E%3C/svg%3E");
	--ico-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 20.5z'/%3E%3Cpath d='M9 10V6.5a3 3 0 0 1 6 0V10'/%3E%3C/svg%3E");
}

/* ---- 1. Contraste ---- */
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-inp, .uku-co-phone-inp, .uku-co-search-wrap input)::placeholder { color: var(--co-placeholder); opacity: 1; }
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-tab, .uku-co-scope-tab):not(.is-on):not(.is-active) { color: var(--co-ink-soft); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-recap-edit { color: var(--co-ink); }

/* ---- 2. Échelle typographique : 12 / 14 / 16 / 18 / 24 / 30 ---- */
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-lbl, .uku-co-glabel, .uku-co-look-group, .uku-co-sp.is-active .uku-co-sp-lbl) { font-size: 12px; }
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-row-areas, .uku-co-row-sub, .uku-co-pay-item-meta, .uku-co-pay-row small, .uku-co-chk-sub, .uku-co-pm-st, .uku-co-pm-hint, .uku-co-recap-edit, .uku-co-sum-meta, .uku-co-pm-op, .uku-co-summary-toggle-lbl, .uku-co-recap-k, .uku-co-look-sub) { font-size: 14px; }
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-tab, .uku-co-scope-tab, .uku-co-row-name, .uku-co-row-price, .uku-co-pay-item-name, .uku-co-pay-item-price, .uku-co-pay-row, .uku-co-recap-v, .uku-co-chk-txt, .uku-co-pm-t, .uku-co-look-name, .uku-co-look-price, .uku-co-cta, .uku-co-sum-name, .uku-co-sum-price, .uku-co-sum-row) { font-size: 16px; }
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-pay-row.is-strong, .uku-co-look-title, .uku-co-summary-toggle-val) { font-size: 18px; }
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-total-band span, .uku-co-sum-total span:last-child, .uku-co-sum-title) { font-size: 24px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-step-title { font-size: 30px; }

/* ---- 3. Zones tactiles ---- */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-back { width: 44px; height: 44px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-recap-edit { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 2px !important; }

/* ---- 4. Cartes compactes + ombres douces ---- */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row { gap: 14px; margin-bottom: 10px; padding: 14px 16px; border-width: 1px; box-shadow: var(--co-shadow); transition: border-color .15s, box-shadow .2s; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row:hover { box-shadow: var(--co-shadow-on); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row.is-on { box-shadow: inset 0 0 0 1px var(--co-ink), var(--co-shadow-on); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row-info { gap: 2px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row-name { font-weight: 600; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row-price { font-weight: 600; color: var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row::after { width: 20px; height: 20px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row.is-on::after { border-width: 6px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-row { gap: 14px; padding: 14px 16px; border-width: 1px; box-shadow: var(--co-shadow); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-row[aria-checked="true"] { border: 1px solid var(--co-ink); box-shadow: inset 0 0 0 1px var(--co-ink), var(--co-shadow-on); background: var(--co-card); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-row > img.uku-co-pm-ic { width: 44px; height: 44px; border-radius: 10px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-row:not(.has-ops) .uku-co-pm-ic--glyph { width: 44px; height: 44px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-ops { margin-left: -58px; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-op img { width: 38px; height: 38px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-radio { width: 20px; height: 20px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-row[aria-checked="true"] .uku-co-pm-radio { border-width: 6px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm-group { gap: 10px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-total-band { padding: 18px 20px; border-radius: 12px; box-shadow: var(--co-shadow-on); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-total-band span:first-child { font-size: 18px; font-weight: 600; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-recap { padding: 4px 16px; }
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-tabs, .uku-co-scope-tabs) { padding: 4px; gap: 4px; border-radius: 12px; background: var(--co-soft); border: 0; }
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-tab, .uku-co-scope-tab) { min-height: 44px; border-radius: 9px; gap: 8px; }
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-tab.is-on, .uku-co-scope-tab.is-active) { box-shadow: 0 1px 3px rgba(20, 20, 20, .18); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-inp,
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-search-wrap input,
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-phone-row { height: 52px; border-color: var(--co-line-strong, #d6d0c2); border-radius: 10px; box-shadow: var(--co-shadow); }
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-dial-trigger) { border-right-color: var(--co-line); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-look-card { box-shadow: var(--co-shadow); border: 1px solid var(--co-line); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-cta { min-height: 56px; box-shadow: 0 2px 6px rgba(20, 20, 20, .14), 0 8px 18px rgba(20, 20, 20, .10); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-cta:disabled { box-shadow: none; }

/* ---- 5. Icônes au trait fin ---- */
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-tab, .uku-co-row[data-method]:not([data-method="intl"]), .uku-co-row[data-carrier], .uku-co-recap-line, .uku-co-summary-toggle-lbl)::before {
	content: ""; flex: none; display: inline-block; background: currentColor;
	-webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-tab::before { width: 17px; height: 17px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-tab[data-t="phone"] { --ico: var(--ico-phone); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-tab[data-t="email"] { --ico: var(--ico-mail); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-tab:not([data-t])::before { display: none; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-scope-tab svg { display: block; width: 17px; height: 17px; }
/* Zones et transporteurs : pastille ronde avec pictogramme. */
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-row[data-method]:not([data-method="intl"]), .uku-co-row[data-carrier])::before {
	width: 40px; height: 40px; border-radius: 50%; color: var(--co-ink-soft);
	-webkit-mask: none; mask: none;
	background: var(--co-soft) var(--ico-bgimg) center / 18px no-repeat;
}
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row[data-method]:not([data-method="intl"]) { --ico-bgimg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4740' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 10c0 5.5-7 11-7 11s-7-5.5-7-11a7 7 0 0 1 14 0z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row[data-carrier] { --ico-bgimg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4740' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E"); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row.is-on::before { background-color: #ece7da; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-recap-line { align-items: center; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-recap-line::before { width: 16px; height: 16px; color: var(--co-ink-faint); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-recap-line:nth-child(1) { --ico: var(--ico-user); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-recap-line:nth-child(2) { --ico: var(--ico-pin); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-summary-toggle-lbl { display: inline-flex; align-items: center; gap: 8px; --ico: var(--ico-bag); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-summary-toggle-lbl::before { width: 17px; height: 17px; }

/* ---- 6. Ordinateur : bouton sous les champs, récapitulatif titré ---- */
.uku-co-sum-title { display: none; }
@media (min-width: 781px) {
	.uku-checkout-modal .uku-co-body { flex: 0 1 auto; }
	.uku-checkout-modal .uku-co-foot { border-top: 0; padding-top: 4px; }
	.uku-checkout-modal .uku-co-sum-title { display: block; flex: none; margin: 0; padding: 78px 32px 18px; font-family: var(--uku-font-heading); font-weight: 400; color: var(--co-ink); }
	.uku-checkout-modal .uku-co-summary-inner { padding-top: 0 !important; }
	.uku-checkout-modal .uku-co-sum-item-remove { width: 28px; height: 28px; }
	:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sum-name { font-size: 14px; }
}
@media (max-width: 780px) {
	:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-row[data-method]:not([data-method="intl"]), .uku-co-row[data-carrier])::before { width: 32px; height: 32px; background-size: 16px; }
	:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row { gap: 12px; padding: 12px 14px; }
}
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row-areas { white-space: normal; overflow: visible; line-height: 1.35; }
/* Cartes de zone compactes : quartiers sur une ligne (tronqués), comme en
   production ; numéro de contact jamais coupé. */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row-areas { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-recap-line:nth-child(1) .uku-co-recap-v { white-space: nowrap; }
@media (max-width: 780px) {
	:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-recap-k { flex: 0 0 auto; }
	:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-recap-v { flex: 1 1 auto; }
}

/* =====================================================================
 * Checkout en 5 temps (Panier · Contact · Livraison · Récapitulatif ·
 * Paiement) — plus d'air, mouvement (Apple HIG) :
 * - grille de 8px : 32px entre blocs, 16px dans un bloc ;
 * - récapitulatif en blocs titrés (Articles, Coordonnées, Livraison) avec
 *   « Modifier » sur chaque bloc, totaux puis bandeau Total ;
 * - paiement : montant dû en tête, moyens de paiement, bouton « Payer N » ;
 * - transitions d'étape directionnelles 280ms, courbe ressort douce ;
 *   sélection et pression animées 150–200ms ; prefers-reduced-motion.
 * ===================================================================== */
:is(.uku-checkout-modal, .uku-checkout-page) {
	--co-ease: cubic-bezier(.22, 1, .36, 1);
	--co-spring: cubic-bezier(.34, 1.36, .64, 1);
}
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-step-title { margin-bottom: 28px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-field { margin-bottom: 24px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-glabel { margin: 32px 0 12px; }

/* ---- Récapitulatif : blocs titrés ---- */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block { margin: 0 0 16px; padding: 16px 20px; border: 1px solid var(--co-line); border-radius: 16px; background: var(--co-card); box-shadow: var(--co-shadow); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; margin: 0 0 8px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block-head > span { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--co-ink-faint); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block .uku-co-recap-edit { margin: -8px -2px; font-size: 14px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block-line { position: relative; margin: 0; padding-left: 30px; font-size: 16px; line-height: 1.45; color: var(--co-ink); overflow-wrap: anywhere; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block-line small { display: block; margin-top: 2px; font-size: 14px; color: var(--co-ink-faint); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block-line::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background: var(--co-ink-faint); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block-line--user { --ico: var(--ico-user); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block-line--pin { --ico: var(--ico-pin); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block .uku-co-pay-item { padding: 12px 0; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block .uku-co-pay-item:first-child { padding-top: 4px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block .uku-co-pay-item:last-child { border-bottom: 0; padding-bottom: 0; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block .uku-co-pay-item-img { width: 56px; height: 70px; border-radius: 8px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-review-totals { margin-top: 24px; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-review-totals .uku-co-pay-row { padding: 6px 4px; color: var(--co-ink-soft); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-review-totals .uku-co-pay-row span:last-child { color: var(--co-ink); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-review-totals .uku-co-total-band { margin-top: 12px; }

/* ---- Paiement : montant dû ---- */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-amount-due { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 8px; padding: 24px 20px; border-radius: 16px; background: var(--co-soft); text-align: center; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-amount-due span { font-size: 14px; color: var(--co-ink-faint); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-amount-due strong { font-size: 30px; font-weight: 600; letter-spacing: -.01em; color: var(--co-ink); font-variant-numeric: tabular-nums; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-amount-due small { font-size: 14px; color: var(--co-ink-faint); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-glabel--payment { border-top: 0; padding-top: 0; margin-top: 32px; }

/* Ordinateur : les articles sont déjà dans la colonne de droite. */
@media (min-width: 781px) {
	.uku-checkout-modal .uku-co-block--items { display: none; }
}
/* Mobile : barre « Récapitulatif » inutile aux étapes Récapitulatif et
   Paiement (montant déjà affiché). */
@media (max-width: 780px) {
	.uku-checkout-modal:is(.is-step-3, .is-step-4) .uku-co-summary-toggle,
	.uku-checkout-modal:is(.is-step-3, .is-step-4) .uku-co-summary-inner { display: none; }
}

/* ---- Mouvement ---- */
@keyframes uku-co-in-fwd { from { opacity: 0; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes uku-co-in-back { from { opacity: 0; transform: translate3d(-24px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes uku-co-fade-up { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-body.uku-co-anim-fwd { animation: uku-co-in-fwd .28s var(--co-ease) both; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-body.uku-co-anim-back { animation: uku-co-in-back .28s var(--co-ease) both; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-foot:is(.uku-co-anim-fwd, .uku-co-anim-back) { animation: uku-co-fade-up .28s var(--co-ease) both; }
/* Sélection : la pastille radio se remplit en douceur, la carte s'élève. */
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-row, .uku-co-pm-row) { transition: border-color .18s var(--co-ease), box-shadow .2s var(--co-ease), transform .15s var(--co-ease), background-color .18s; }
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-row, .uku-co-pm-row):active { transform: scale(.985); }
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-row::after, .uku-co-pm-radio) { transition: border-width .2s var(--co-spring), border-color .18s; }
:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-tab, .uku-co-scope-tab) { transition: background-color .2s var(--co-ease), color .2s, box-shadow .2s; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-cta { transition: transform .15s var(--co-ease), box-shadow .2s var(--co-ease), background-color .2s; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-cta:active:not(:disabled) { transform: scale(.98); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sp-num { transition: background-color .3s var(--co-ease), transform .3s var(--co-spring); }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sp.is-active .uku-co-sp-num { transform: scale(1.25); }
.uku-checkout-modal__panel { transition: transform .45s var(--co-spring, cubic-bezier(.34,1.36,.64,1)), opacity .3s ease; }
@media (prefers-reduced-motion: reduce) {
	:is(.uku-checkout-modal, .uku-checkout-page) :is(.uku-co-body, .uku-co-foot) { animation: none !important; }
	:is(.uku-checkout-modal, .uku-checkout-page) * { transition-duration: .01ms !important; }
}
/* 5 étapes : barre resserrée sur mobile (ne touche plus ‹ ni ×). */
@media (max-width: 780px) {
	:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-stepper { gap: 5px; }
	:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sp { gap: 6px; }
	:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sp-line { flex-basis: 8px; min-width: 8px; }
	:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-sp.is-active .uku-co-sp-lbl { letter-spacing: .06em; }
}
/* Articles du récapitulatif : nom sur toute la largeur, prix dessous. */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block .uku-co-pay-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "img info" "img price"; column-gap: 16px; row-gap: 4px; align-items: start; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block .uku-co-pay-item-img { grid-area: img; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block .uku-co-pay-item-info { grid-area: info; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-block .uku-co-pay-item-price { grid-area: price; }
/* Ordinateur : totaux et montant déjà dans la colonne « Votre commande »
   — pas de doublon dans la colonne de gauche. */
@media (min-width: 781px) {
	.uku-checkout-modal :is(.uku-co-review-totals, .uku-co-amount-due) { display: none; }
	.uku-checkout-modal .uku-co-glabel--payment { margin-top: 0; }
}
.uku-co-field-hint { margin: 6px 0 0; font-size: calc(11.5px * var(--uku-ui-scale, 1)); color: var(--co-ink-faint); }

/* Recherche de ville : champ en boîte (52px) — loupe centrée, texte jamais dessous. */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-search-wrap svg { top: 50%; right: 16px; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; }
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-search-wrap input { padding-right: 46px !important; }
/* Transporteurs : logo (image si fournie, sinon pastille aux couleurs du transporteur). */
.uku-co-carrier { display: inline-flex; align-items: center; gap: 10px; }
.uku-co-carrier-logo { flex: none; display: inline-grid; place-items: center; min-width: 52px; height: 28px; padding: 0 10px; border-radius: 6px; font: 800 12px/1 "Inter", system-ui, sans-serif; letter-spacing: .04em; }
.uku-co-carrier-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.uku-co-carrier-logo--img { width: 40px; min-width: 40px; height: 40px; padding: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--co-line); background: #fff; }
.uku-co-carrier { font-weight: 600; }
.uku-co-carrier-logo--dhl { background: #FFCC00; color: #D40511; font-style: italic; font-size: 14px; }
.uku-co-carrier-logo--luggz { background: #121110; color: #fff; }

:is(.uku-checkout-modal, .uku-checkout-page) .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Transporteur avec logo : le logo remplace l'icône générique (avion). */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-row[data-carrier]:has(.uku-co-carrier-logo)::before { display: none; }

/* Écrans tactiles : sur iPhone/Android, :hover reste « collé » après un
   appui — les boutons pleins dont le survol est transparent perdaient leur
   fond (bouton blanc sur blanc). Le survol n'existe que là où il y a une
   souris ; au toucher, le bouton garde son état normal. */
@media (hover: none) {
	.uku-btn:hover,
	.uku-hero__cta:hover,
	.woocommerce-MyAccount-content .button:hover,
	.woocommerce-MyAccount-content input[type="submit"]:hover {
		background: var(--uku-color-primary);
		color: var(--uku-color-text-on-dark, #fff);
		border-color: var(--uku-color-primary);
	}
	.uku-hero__cta--secondary:hover { background: transparent; color: inherit; }
}

/* Fiche produit « classique » (bloc d'achat dans le flux) sur mobile : la
   mini-barre d'achat reste disponible en défilant — posée au-dessus de la
   barre d'onglets flottante (sinon cachée dessous), même forme arrondie. */
@media (max-width: 767.98px) {
	body:has(.uku-pdp--classic) .uku-sticky-atc {
		display: flex !important;
		left: 14px;
		right: 14px;
		bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		padding: 8px 8px 8px 14px;
		border: 1px solid rgba(18, 17, 16, 0.08);
		border-radius: 16px;
		transform: translateY(calc(100% + 40px));
	}
	body:has(.uku-pdp--classic):has(.uku-tabbar) .uku-sticky-atc { bottom: calc(14px + 64px + 10px + env(safe-area-inset-bottom, 0px)); }
	body:has(.uku-pdp--classic) .uku-sticky-atc.is-visible { transform: none; }
	body:has(.uku-pdp--classic) .uku-sticky-atc__btn { padding: 12px 16px; border-radius: 999px; }
	body.uku-no-scroll .uku-sticky-atc { transform: translateY(calc(100% + 140px)) !important; }
}

/* =====================================================================
 * Moyens de paiement — disposition « inset » : une ligne par moyen,
 * radio à gauche, logos à droite, explication dépliée sur le choix.
 * ===================================================================== */
:is(.uku-checkout-modal, .uku-checkout-page) .uku-co-pm--inset .uku-co-pm-group { display: grid; gap: 10px; }
.uku-co-pm2 { display: block; width: 100%; padding: 0; text-align: left; font: inherit; color: inherit; background: #fff !important; border: 1px solid #d9d4c9; border-radius: 12px; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; -webkit-appearance: none; appearance: none; }
.uku-co-pm2:hover { border-color: #b9b4aa; }
.uku-co-pm2.is-on { border-color: var(--co-ink, #121110); box-shadow: 0 0 0 1px var(--co-ink, #121110); }
.uku-co-pm2:focus-visible { outline: 2px solid var(--co-ink, #121110); outline-offset: 2px; }
.uku-co-pm2-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; min-height: 64px; }
.uku-co-pm2-radio { flex: none; width: 20px; height: 20px; border: 1.5px solid #b9b4aa; border-radius: 50%; display: grid; place-items: center; transition: border-color .2s; }
.uku-co-pm2-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--co-ink, #121110); transform: scale(0); transition: transform .2s; }
.uku-co-pm2.is-on .uku-co-pm2-radio { border-color: var(--co-ink, #121110); }
.uku-co-pm2.is-on .uku-co-pm2-radio::after { transform: scale(1); }
.uku-co-pm2-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.uku-co-pm2-t { font-size: calc(15px * var(--uku-ui-scale, 1)); font-weight: 600; color: var(--co-ink, #121110); }
.uku-co-pm2-st { font-size: calc(12.5px * var(--uku-ui-scale, 1)); color: var(--co-ink-faint, #6b665c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uku-co-pm2-logos { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.uku-co-pm2-logos svg { display: block; width: 40px; height: 27px; }
.uku-co-pm2-logos img { display: block; width: 30px; height: 30px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid #ece8e0; padding: 2px; }
.uku-co-pm2-logos--ops { gap: 0; }
.uku-co-pm2-logos--ops img { width: 32px; height: 32px; margin-left: -6px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.uku-co-pm2-logos--ops img:first-child { margin-left: 0; }
.uku-co-pm2-more { margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--co-ink-faint, #6b665c); }
.uku-co-pm2-logos .uku-co-pm2-solo { width: 40px; height: 40px; border-radius: 10px; padding: 0; border: 0; }
.uku-co-pm2-body { display: none; padding: 0 16px 14px 48px; font-size: calc(12.5px * var(--uku-ui-scale, 1)); line-height: 1.5; color: var(--co-ink-faint, #6b665c); }
.uku-co-pm2.is-on .uku-co-pm2-body { display: block; }
.uku-co-pm2-trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; font-size: calc(12px * var(--uku-ui-scale, 1)); color: var(--co-ink-faint, #6b665c); text-align: center; }
.uku-co-pm2-trust svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
@media (max-width: 380px) {
	.uku-co-pm2-head { gap: 10px; padding: 12px; }
	.uku-co-pm2-logos svg { width: 34px; height: 23px; }
	.uku-co-pm2-logos--ops img { width: 26px; height: 26px; }
	.uku-co-pm2-body { padding-left: 42px; }
}
/* Priorité sur la remise à zéro « .uku-co-pm button » (fond/bordure ôtés). */
.uku-co-pm .uku-co-pm2 { background: #fff !important; border: 1px solid #d9d4c9 !important; border-radius: 12px !important; }
.uku-co-pm .uku-co-pm2:hover { border-color: #b9b4aa !important; }
.uku-co-pm .uku-co-pm2.is-on { border-color: var(--co-ink, #121110) !important; box-shadow: 0 0 0 1px var(--co-ink, #121110) !important; }

/* Montant à régler : bascule FCFA / EUR / USD (affichage indicatif). */
.uku-co-cur { display: inline-flex; gap: 2px; margin-top: 10px; padding: 3px; border-radius: 999px; background: rgba(18, 17, 16, 0.06); }
.uku-co-cur button { min-width: 52px; padding: 6px 12px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; font: 600 calc(11.5px * var(--uku-ui-scale, 1)) / 1 "Inter", system-ui, sans-serif; letter-spacing: .04em; color: var(--co-ink-faint, #6b665c) !important; cursor: pointer; transition: background .2s, color .2s; }
.uku-co-cur button[aria-pressed="true"] { background: #fff !important; color: var(--co-ink, #121110) !important; box-shadow: 0 1px 3px rgba(18, 17, 16, 0.12); }
.uku-co-amount-due .uku-co-cur-note { display: block; margin-top: 8px; font-size: calc(11.5px * var(--uku-ui-scale, 1)); color: var(--co-ink-faint, #6b665c); }
.uku-co-amount-due .uku-co-cur-note[hidden] { display: none; }