/* @critical */
/* =========================================================
   Polices auto-hébergées (Cairo — latin + arabe)
   Remplace l'appel à fonts.googleapis.com : plus de résolution
   DNS/TLS tierce sur le chemin critique, et le fichier est mis
   en cache avec le reste du thème (même politique de cache que
   main.css). woff2 uniquement : couverture > 98% des navigateurs
   en usage réel, pas de payload woff dupliqué.
   ========================================================= */

@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../../fonts/cairo-latin-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../../fonts/cairo-latin-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../../fonts/cairo-latin-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../../fonts/cairo-arabic-400.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDCF, U+FDF0-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../../fonts/cairo-arabic-600.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDCF, U+FDF0-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
	font-family: 'Cairo';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../../fonts/cairo-arabic-700.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDCF, U+FDF0-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* -----------------------------------------------------------
   Jost — police d'affichage (titres uniquement, jamais le corps
   de texte). Latin seulement : c'est volontaire. En contexte
   arabe/RTL, Jost ne couvre pas les glyphes arabes, donc le
   fallback de la pile de police (voir --sw-font-display dans
   10-tokens.css) bascule automatiquement sur Cairo caractère par
   caractère — aucune règle conditionnelle RTL nécessaire, le
   moteur de rendu du navigateur gère la substitution.
   Choisie pour rester cohérente avec Shopini Core Plus (admin),
   qui utilise déjà Jost dans son design system.
   ----------------------------------------------------------- */
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../../fonts/jost-latin-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../../fonts/jost-latin-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../../fonts/jost-latin-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* @critical */
/* =========================================================
   Shopini Swift — Design Tokens

   Source de vérité des fondations visuelles du thème. Les composants
   consomment exclusivement ces propriétés : couleurs, espacements,
   rayons, mouvements et niveaux d'empilement restent centralisés ici.

   Exemple : padding: var(--sw-space-12) var(--sw-space-24);
   ========================================================= */
:root {
	--sw-bg: #F7F7F5;
	--sw-surface: #FFFFFF;
	--sw-on-brand: #FFFFFF;
	--sw-ink: #16151C;
	--sw-muted: #6B6B76;
	--sw-border: #E7E6EE;
	--sw-brand: #F97316;
	--sw-brand-ink: #C2410C;
	--sw-brand-soft: #FFF2E8;
	--sw-ink-soft: #29272F;
	--sw-overlay-strong: rgba(10, 10, 12, .88);
	--sw-overlay-medium: rgba(10, 10, 12, .58);
	--sw-overlay-light: rgba(10, 10, 12, .12);
	--sw-overlay-surface-strong: rgba(255, 255, 255, .96);
	--sw-overlay-surface-medium: rgba(255, 255, 255, .72);
	--sw-overlay-surface-soft: rgba(255, 255, 255, .58);
	--sw-overlay-surface-light: rgba(255, 255, 255, .08);
	--sw-category-mode: linear-gradient(145deg, #FFF1E8, #FFD7BD);
	--sw-category-phone: linear-gradient(145deg, #EDF7FF, #C9E7FF);
	--sw-category-tech: linear-gradient(145deg, #F1EDFF, #DCD2FF);
	--sw-category-home: linear-gradient(145deg, #EDF8EB, #CFE9C8);
	--sw-category-beauty: linear-gradient(145deg, #FFF0F4, #FFD0DC);
	--sw-category-pets: linear-gradient(145deg, #FFF8DD, #F7E6A3);
	--sw-focus-shadow: rgba(22, 21, 28, .42);
	--sw-success: #16A34A;
	--sw-success-ink: #0F7A37;
	--sw-danger: #D63638;
	--sw-opportunity: #B45309;
	--sw-opportunity-soft: #FFF7ED;
	--sw-space-2: 2px;
	--sw-space-4: 4px;
	--sw-space-8: 8px;
	--sw-space-12: 12px;
	--sw-space-16: 16px;
	--sw-space-24: 24px;
	--sw-space-32: 32px;
	--sw-space-48: 48px;
	--sw-space-64: 64px;
	--sw-space-80: 80px;
	--sw-space-96: 96px;
	--sw-radius-sm: 8px;
	--sw-radius: 14px;
	--sw-radius-lg: 20px;
	--sw-radius-xl: 28px;
	--sw-shadow: 0 1px 2px rgba(22, 21, 28, .04), 0 8px 24px rgba(22, 21, 28, .06);
	--sw-shadow-lg: 0 20px 50px rgba(22, 21, 28, .12);
	--sw-border-width: 1px;
	--sw-focus-width: 2px;
	--sw-focus-ring-width: 4px;
	--sw-duration-fast: 150ms;
	--sw-duration-normal: 200ms;
	--sw-duration-spinner: 600ms;
	--sw-ease-standard: ease;
	--sw-opacity-disabled: .55;
	--sw-opacity-muted: .7;
	--sw-z-skip-link: 100;
	--sw-z-raised: 2;
	--sw-control-lg: 44px;
	--sw-announcement-height: 60px;
	--sw-header-floating-offset: 22px;
	--sw-font-size-sm: .85rem;
	--sw-font-size-md: .95rem;
	--sw-font-size-lg: 1.05rem;
	--sw-font-weight-bold: 700;
	--sw-font: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sw-font-display: 'Jost', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sw-container: 1200px;
	--sw-product-content-width: 1040px;
	--sw-product-gallery-height-min: 320px;
	--sw-product-gallery-height-fluid: 50vw;
	--sw-product-gallery-height-max: 520px;
	--sw-product-gallery-mobile-height-min: 260px;
	--sw-product-gallery-mobile-height-fluid: 78vw;
	--sw-product-gallery-mobile-height-max: 380px;
	--sw-product-gallery-thumb-size: 76px;
	--sw-product-quantity-width: 64px;
	--sw-product-quantity-min-width: 52px;
}

/* @critical */
/* =========================================================
   Reset minimal
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--sw-bg);
	color: var(--sw-ink);
	font-family: var(--sw-font);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-family: var(--sw-font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--sw-heading, var(--sw-ink)); }
button, input, select, textarea { font-family: inherit; font-size: 1rem; }

:focus-visible {
	outline: 2px solid var(--sw-brand);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Accessibilité : lien d'évitement + texte réservé aux lecteurs d'écran
   (voir Shopini_Accessibility::skip_link()). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	inset-inline-start: 8px;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 9999;
	background: var(--sw-brand);
	color: #fff;
	font-weight: 700;
	padding: 12px 18px;
	border-radius: var(--sw-radius-sm);
}

.shopini-container {
	max-width: var(--sw-container);
	margin-inline: auto;
	padding-inline: 20px;
}

/* @critical */
/* =========================================================
   COMPOSANT : Button (.shopini-btn)
   Première pièce du Design System — "Design First" : ce composant a été
   déduit des besoins réels déjà rencontrés dans le thème, pas inventé
   dans l'abstrait. Avant ce fichier, le même bouton existait sous 3
   formes divergentes (.shopini-hero__button, .shopini-quickadd,
   .shopini-qo__submit) — ce composant les remplace toutes.

   SOURCE DE VÉRITÉ UNIQUE pour tout bouton rendu par NOS PROPRES
   templates (voir template-parts/components/button.php). Les boutons
   natifs WooCommerce (ajout au panier, validation de commande) et du
   futur plugin Commande Rapide restent un marquage que nous ne
   contrôlons pas — ils sont alignés visuellement via les MÊMES tokens
   ci-dessous plutôt que dupliqués, mais ne portent pas nos classes.

   ---------------------------------------------------------------
   VARIANTES — chacune répond à un besoin réel déjà rencontré :
   - --primary   : l'action de conversion principale d'une page
                   (CTA Hero, "Ajouter au panier", "Envoyer le message",
                   "Créer une catégorie"). Une page n'a jamais qu'une
                   seule action prioritaire ; c'est elle.
   - --secondary : une action d'accompagnement à côté d'une primaire,
                   qui ne doit jamais lui faire concurrence visuelle
                   (CTA secondaire du Hero, ex. "Voir les nouveautés").
                   Utilise `currentColor` : s'adapte automatiquement au
                   fond clair ou sombre (Hero) sans variante séparée.

   Volontairement ABSENTES tant qu'aucun besoin réel ne les justifie :
   - "ghost"/"tertiary" : aucun cas d'usage rencontré à ce jour.
   - "danger"/destructif : aucune action destructive n'existe encore
     côté visiteur. À ajouter seulement quand un vrai besoin apparaît.

   TAILLES — chacune a un contexte réel déjà rencontré :
   - --lg (par défaut implicite du Hero) : la zone la plus stratégique
     du site pour la conversion, mérite un poids visuel fort.
   - (par défaut, sans classe) : formulaires, CTA d'état vide — usage
     général.
   - --sm : contextes denses (carte produit) où l'espace est compté.

   ÉTATS :
   - :hover, :active — retour visuel immédiat.
   - :focus-visible — voir plus bas : bug corrigé pendant cet audit.
   - :disabled / [aria-disabled] — jamais interactif, jamais ambigu.
   - --loading — empêche la double soumission (double commande, double
     message de contact envoyé deux fois) : un vrai problème métier,
     pas une fioriture.

   MODIFICATEURS :
   - --block : pleine largeur, formulaires mobiles.
   - __icon  : emplacement pour une icône (ex. bouton panier 🛒).
   ========================================================= */

.shopini-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sw-space-8);
	position: relative;
	appearance: none;
	background: none;
	border: var(--sw-border-width) solid transparent;
	border-radius: var(--sw-radius-sm);
	font-family: var(--sw-font);
	font-weight: var(--sw-font-weight-bold);
	font-size: var(--sw-font-size-md);
	padding: var(--sw-space-12) var(--sw-space-24);
	text-align: center;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--sw-duration-fast) var(--sw-ease-standard),
		border-color var(--sw-duration-fast) var(--sw-ease-standard),
		color var(--sw-duration-fast) var(--sw-ease-standard),
		opacity var(--sw-duration-fast) var(--sw-ease-standard),
		transform var(--sw-duration-fast) var(--sw-ease-standard);
}

/* Garde-fou d'accessibilité trouvé pendant cet audit : l'anneau de focus
   global du thème (20-base.css) utilise --sw-brand — strictement la
   même couleur que le fond d'un bouton primaire. Un utilisateur clavier
   qui tabule jusqu'au bouton primaire ne voyait donc AUCUN indicateur de
   focus visible. Corrigé avec un double anneau (blanc + halo sombre) qui
   reste visible quel que soit le fond (clair ou sombre, comme sur le Hero). */
.shopini-btn:focus-visible {
	outline: var(--sw-focus-width) solid var(--sw-on-brand);
	outline-offset: var(--sw-focus-width);
	box-shadow: 0 0 0 var(--sw-focus-ring-width) var(--sw-focus-shadow);
}

.shopini-btn--sm { padding: var(--sw-space-8) var(--sw-space-16); font-size: var(--sw-font-size-sm); }
.shopini-btn--lg { padding: var(--sw-space-16) var(--sw-space-32); font-size: var(--sw-font-size-lg); }
.shopini-btn--block { display: flex; width: 100%; }

.shopini-btn--primary {
	background: var(--sw-brand);
	border-color: var(--sw-brand);
	color: var(--sw-on-brand);
}
.shopini-btn--primary:hover { background: var(--sw-brand-ink); border-color: var(--sw-brand-ink); }
.shopini-btn:active { transform: translateY(var(--sw-space-2)); }

/* `currentColor` plutôt qu'une couleur fixe : s'adapte seul au fond clair
   (page normale, texte encre) ou sombre (Hero, texte blanc) sans avoir
   besoin d'une variante "on-dark" séparée. */
.shopini-btn--secondary {
	background: transparent;
	border-color: currentColor;
	color: currentColor;
}
.shopini-btn--secondary:hover {
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.shopini-btn:disabled,
.shopini-btn[aria-disabled="true"] {
	opacity: var(--sw-opacity-disabled);
	cursor: not-allowed;
	pointer-events: none;
}

.shopini-btn__icon { display: inline-flex; line-height: 1; }

/* --- État de chargement --- */
.shopini-btn--loading { cursor: wait; pointer-events: none; }
.shopini-btn--loading .shopini-btn__label { visibility: hidden; }
.shopini-btn--loading::after {
	content: "";
	position: absolute;
	width: var(--sw-space-16);
	height: var(--sw-space-16);
	margin: auto;
	border: var(--sw-focus-width) solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: shopini-btn-spin var(--sw-duration-spinner) linear infinite;
}
@keyframes shopini-btn-spin {
	to { transform: rotate(360deg); }
}
/* Respect explicite de prefers-reduced-motion : la règle globale de
   20-base.css réduit la durée à .01ms (ce qui ferait scintiller une
   animation infinie plutôt que l'arrêter) — ici on arrête réellement la
   rotation et on garde un anneau statique comme simple indicateur. */
@media (prefers-reduced-motion: reduce) {
	.shopini-btn--loading::after { animation: none; opacity: var(--sw-opacity-muted); }
}

/* @critical */
/* =========================================================
   Header
   Structure desktop : Logo | Recherche | Actions (grille sur
   une ligne), puis le menu principal sur une deuxième ligne
   séparée en dessous (.shopini-header__nav-row).
   Structure mobile : recherche pleine largeur en premier,
   puis Logo | Panier | Compte | Menu (même grille, réorganisée
   via grid-template-areas — voir le @media plus bas).
   ========================================================= */
.shopini-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--sw-surface);
	border-bottom: 1px solid var(--sw-border);
}
.shopini-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "logo search actions";
	align-items: center;
	gap: var(--sw-space-24);
	min-height: 76px;
}
.shopini-logo,
.custom-logo-link {
	grid-area: logo;
	display: inline-flex;
	align-items: center;
	min-width: 0;
	font-family: var(--sw-font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--sw-ink);
}
/* Garde-fou : la hauteur reste fixe quoi qu'il arrive (le header ne peut
   jamais grandir verticalement), seule la largeur est ajustable — via le
   curseur "Largeur du logo" dans Identité du site (voir Shopini_Customizer),
   borné pour ne jamais écraser la recherche. object-fit: contain empêche
   toute déformation, quel que soit le format de l'image importée. */
.shopini-logo img,
.custom-logo-link img {
	display: block;
	width: var(--sw-logo-width, 140px);
	max-width: 100%;
	height: auto;
	max-height: 180px;
	object-fit: contain;
	object-position: left center;
}

.shopini-header__actions { grid-area: actions; display: flex; align-items: center; gap: 12px; }
.shopini-account { display: grid; place-items: center; width: var(--sw-control-lg); height: var(--sw-control-lg); color: var(--sw-ink); font-size: 1.4rem; }
.shopini-header__start { display: inline-flex; align-items: center; min-height: var(--sw-control-lg); padding-inline: var(--sw-space-24); border-radius: var(--sw-radius-sm); background: var(--sw-brand); color: var(--sw-on-brand); font-weight: var(--sw-font-weight-bold); }
.shopini-header__start:hover { background: var(--sw-brand-ink); color: var(--sw-on-brand); }
.shopini-cart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	background: var(--sw-bg);
	border: 1px solid var(--sw-border);
	border-radius: 999px;
	padding: 8px 14px;
}
.shopini-cart__count { color: var(--sw-brand); }

.shopini-menu-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}
.shopini-menu-toggle span { display: block; width: 20px; height: 2px; background: var(--sw-ink); border-radius: 2px; }

.shopini-mobile-nav { display: none; border-top: 1px solid var(--sw-border); }
.shopini-mobile-nav__list { padding: 8px 20px 16px; }
.shopini-mobile-nav__list li { padding: 10px 0; border-bottom: 1px solid var(--sw-border); }

.shopini-checkout-trust {
	font-weight: 600;
	color: var(--sw-success-ink);
	font-size: .9rem;
}

/* =========================================================
   Recherche — permanente partout (desktop ET mobile), plus de
   dropdown ni de bascule JS : juste un champ de recherche
   directement après le logo, sur la ligne principale.
   ========================================================= */
.shopini-search-panel {
	grid-area: search;
	min-width: 0;
}
.shopini-search-panel__form {
	display: flex;
	align-items: center;
	width: 100%;
}
.shopini-search-panel__input {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--sw-control-lg);
	padding-inline: var(--sw-space-16);
	border: var(--sw-border-width) solid var(--sw-border);
	border-inline-end: none;
	border-radius: var(--sw-radius-sm) 0 0 var(--sw-radius-sm);
	background: var(--sw-bg);
	color: var(--sw-ink);
	font-size: 1rem;
}
.shopini-search-panel__input:focus {
	outline: none;
	border-color: var(--sw-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw-brand) 15%, transparent);
	position: relative;
	z-index: 1;
}
.shopini-search-panel__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sw-control-lg);
	height: var(--sw-control-lg);
	flex: 0 0 auto;
	border: none;
	border-radius: 0 var(--sw-radius-sm) var(--sw-radius-sm) 0;
	background: var(--sw-brand);
	color: var(--sw-on-brand);
	cursor: pointer;
}
.shopini-search-panel__submit:hover { background: var(--sw-brand-ink); }
.shopini-search-panel__submit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================
   Ligne de menu — deuxième ligne du header, sous Logo/Recherche/Actions.
   ========================================================= */
.shopini-header__nav-row {
	border-top: 1px solid var(--sw-border);
	background: var(--sw-surface);
}
.shopini-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sw-space-24);
	min-height: 48px;
}
.shopini-nav__list li {
	position: relative;
}
.shopini-nav__list li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(var(--sw-space-24) / -2);
	transform: translateY(-50%);
	width: 1px;
	height: 14px;
	background: var(--sw-border);
}
.shopini-nav__list a {
	position: relative;
	font-weight: 600;
	color: var(--sw-muted);
	padding: 8px 4px;
}
.shopini-nav__list a:hover { color: var(--sw-ink); }
.shopini-nav__list .current-menu-item > a {
	color: var(--sw-brand);
}
.shopini-nav__list .current-menu-item > a::after {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: -1px;
	height: 2px;
	background: var(--sw-brand);
	border-radius: 999px;
}
.shopini-nav__list--fallback li:last-child a {
	border: var(--sw-border-width) solid currentColor;
	border-radius: 999px;
	padding: var(--sw-space-8) var(--sw-space-16);
}

/* =========================================================
   Vue tablette et mobile
   La grille se réorganise en 2 rangées : recherche pleine
   largeur, puis Logo | Panier | Compte | Menu. La ligne de
   menu séparée disparaît (remplacée par le menu hamburger).
   ========================================================= */
@media (max-width: 860px) {
	.shopini-trustbar {
		min-height: auto;
	}

	/* Garde-fou anti-débordement : c'est ce qui poussait le logo et le
	   hamburger hors du viewport (scroll horizontal involontaire causé
	   par des éléments non maîtrisés dans la largeur disponible). */
	.shopini-header,
	.shopini-js .shopini-header--transparent,
	.shopini-js .shopini-header--transparent.is-scrolled {
		position: sticky;
		top: 0;
		inset-inline: auto;
		z-index: 999;
		width: 100%;
		max-width: 100vw;
		overflow-x: hidden;
		background: var(--sw-surface);
		border-bottom: 1px solid var(--sw-border);
		box-shadow: 0 3px 14px rgba(0, 0, 0, .08);
	}

	.shopini-header__inner,
	.shopini-js .shopini-header--transparent .shopini-header__inner,
	.shopini-js .shopini-header--transparent.is-scrolled .shopini-header__inner {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"search search"
			"logo   actions";
		gap: 6px;
		width: 100%;
		min-height: auto;
		padding: 10px 14px;
		background: var(--sw-surface);
		border: 0;
		border-radius: 0;
		box-shadow: none;
		box-sizing: border-box;
	}

	/* La ligne de menu séparée n'a pas sa place en mobile : le menu
	   principal reste accessible via le hamburger (#shopini-mobile-nav). */
	.shopini-header__nav-row {
		display: none;
	}

	/* La carte flottante (bordure/ombre/radius) n'a de sens qu'en desktop :
	   en mobile, c'est .shopini-header lui-même qui porte déjà l'ombre et
	   la bordure basse (voir plus haut) — sans ce reset, .shopini-header__card
	   ajouterait une seconde bordure/ombre en plus. */
	.shopini-header__card,
	.shopini-js .shopini-header--transparent .shopini-header__card,
	.shopini-js .shopini-header--transparent.is-scrolled .shopini-header__card {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}

	/* Logo à gauche. */
	.shopini-logo,
	.custom-logo-link,
	.shopini-js .shopini-header--transparent .shopini-logo,
	.shopini-js .shopini-header--transparent .custom-logo-link {
		display: flex;
		align-items: center;
		min-width: 0;
		max-width: none;
		padding: 0;
		background: transparent;
		color: var(--sw-ink);
	}

	.shopini-logo img,
	.custom-logo-link img {
		display: block;
		width: auto;
		max-width: min(var(--sw-mobile-logo-width, 125px), 34vw);
		height: auto;
		max-height: 44px;
		object-fit: contain;
		object-position: left center;
	}

	/* Recherche : pleine largeur, première rangée. */
	.shopini-search-panel { padding-bottom: 4px; }
	.shopini-search-panel__form { max-width: none; }

	/* Zone d'actions : panier, compte, hamburger. */
	.shopini-header__actions {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	/* Panier en première position. */
	.shopini-cart,
	.shopini-js .shopini-header--transparent .shopini-cart,
	.shopini-js .shopini-header--transparent.is-scrolled .shopini-cart {
		order: 1;
		display: inline-flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		position: relative;
		min-width: 42px;
		height: 42px;
		padding: 6px 8px;
		background: var(--sw-bg);
		border: 1px solid var(--sw-border);
		border-radius: 10px;
		color: var(--sw-ink);
		line-height: 1;
	}

	/* Pastille superposée sur l'icône plutôt qu'un chiffre inline à côté —
	   cohérent avec la maquette validée. */
	.shopini-cart__count {
		position: absolute;
		top: -4px;
		right: -4px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 17px;
		height: 17px;
		padding-inline: 4px;
		border-radius: 999px;
		background: var(--sw-brand);
		color: var(--sw-on-brand);
		font-size: 10px;
		line-height: 1;
	}

	/* Compte en deuxième position. */
	.shopini-account {
		order: 2;
		display: grid;
		place-items: center;
		flex: 0 0 42px;
		width: 42px;
		height: 42px;
		padding: 0;
		background: var(--sw-bg);
		border: 1px solid var(--sw-border);
		border-radius: 10px;
		color: var(--sw-ink);
		font-size: 1.25rem;
		line-height: 1;
	}

	/* Le CTA "Commencer" n'a pas la place en mobile : reste desktop-only. */
	.shopini-header__start { display: none; }

	/* Hamburger en troisième position. */
	.shopini-menu-toggle {
		order: 3;
		display: inline-flex;
		flex: 0 0 42px;
		width: 42px;
		height: 42px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		padding: 0;
		background: var(--sw-bg);
		border: 1px solid var(--sw-border);
		border-radius: 10px;
		cursor: pointer;
		position: relative;
		z-index: 1001;
	}

	.shopini-menu-toggle span,
	.shopini-js .shopini-header--transparent .shopini-menu-toggle span,
	.shopini-js .shopini-header--transparent.is-scrolled .shopini-menu-toggle span {
		display: block;
		width: 20px;
		height: 2px;
		flex: 0 0 2px;
		background: var(--sw-ink);
		border-radius: 999px;
	}

	/* Menu principal mobile. */
	.shopini-mobile-nav {
		display: none;
		position: relative;
		z-index: 1000;
		width: 100%;
		max-height: calc(100vh - 64px);
		overflow-y: auto;
		background: var(--sw-surface);
		border-top: 1px solid var(--sw-border);
		box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
	}

	.shopini-mobile-nav.is-open {
		display: block;
	}

	.shopini-mobile-nav__list {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin: 0;
		padding: 8px 18px 20px;
		list-style: none;
	}

	.shopini-mobile-nav__list li {
		margin: 0;
		padding: 0;
		border-bottom: 1px solid var(--sw-border);
	}

	.shopini-mobile-nav__list a {
		display: block;
		padding: 14px 2px;
		color: var(--sw-ink);
		font-weight: 600;
	}

	.shopini-mobile-nav__list a:hover,
	.shopini-mobile-nav__list a:focus-visible {
		color: var(--sw-brand-ink);
	}
}

/* Bandeau de confiance (signature du thème) */
.shopini-trustbar {
	background: var(--sw-announcement-bg, var(--sw-brand));
	color: var(--sw-announcement-text, var(--sw-on-brand));
	text-align: center;
	font-size: .85rem;
	font-weight: 600;
	min-height: var(--sw-announcement-height);
	padding: var(--sw-space-8) var(--sw-space-12);
}

/* --- Déclencheur du mega-menu Catégories --- */
.shopini-mega-menu-trigger {
	background: none;
	border: none;
	font-weight: 600;
	font-size: .95rem;
	cursor: pointer;
	padding: 8px 4px;
	color: var(--sw-ink);
}
.shopini-mega-menu-trigger[aria-expanded="true"] { color: var(--sw-brand-ink); }

/* --- Panneau du mega-menu (texte uniquement, voir categories-menu.php) --- */
.shopini-mega-menu {
	display: none;
	position: absolute;
	inset-inline: 0;
	top: 100%;
	background: var(--sw-surface);
	border-bottom: 1px solid var(--sw-border);
	box-shadow: var(--sw-shadow);
	z-index: 49;
}
.shopini-mega-menu.is-open { display: block; }
.shopini-mega-menu__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 24px;
	padding-block: 32px;
}
.shopini-mega-menu__parent {
	display: block;
	font-weight: 700;
	margin-bottom: 10px;
	color: var(--sw-ink);
}
.shopini-mega-menu__parent:hover { color: var(--sw-brand-ink); }
.shopini-mega-menu__children { display: flex; flex-direction: column; gap: 6px; }
.shopini-mega-menu__children a { color: var(--sw-muted); font-size: .9rem; }
.shopini-mega-menu__children a:hover { color: var(--sw-ink); }

/* --- Header transparent → blanc au scroll (page d'accueil avec Hero) ---
   N'a d'effet QUE si .shopini-js est présent sur <html> (voir header.php) :
   sans JavaScript, le header garde son fond blanc normal — jamais de texte
   blanc sur fond blanc en permanence si le script échoue à charger. */
#shopini-scroll-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

.shopini-js .shopini-header--transparent {
	position: absolute;
	inset-inline: 0;
	top: calc(var(--sw-announcement-height) + var(--sw-header-floating-offset));
	background: transparent;
	border-bottom-color: transparent;
	transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.shopini-js .shopini-header--transparent .shopini-header__card {
	max-width: var(--sw-container);
	margin-inline: auto;
	border: var(--sw-border-width) solid var(--sw-border);
	border-radius: var(--sw-radius-lg);
	background: var(--sw-surface);
	box-shadow: var(--sw-shadow-lg);
	overflow: hidden;
}
.shopini-js .shopini-header--transparent .shopini-header__inner {
	padding-inline: var(--sw-space-32);
}
/* La ligne de menu n'a plus besoin de son propre style de carte : elle
   hérite du fond/de la bordure/de l'ombre posés une seule fois sur
   .shopini-header__card, son parent commun avec .shopini-header__inner.
   C'est ce qui évite la ligne de séparation visible auparavant (deux
   ombres distinctes qui se chevauchaient à la jointure des deux lignes). */
.shopini-js .shopini-header--transparent .shopini-header__nav-row {
	border-top: none;
	background: transparent;
}
.shopini-js .shopini-header--transparent .shopini-nav {
	padding-inline: var(--sw-space-32);
}
.shopini-js .shopini-header--transparent .shopini-nav__list a,
.shopini-js .shopini-header--transparent .shopini-mega-menu-trigger,
.shopini-js .shopini-header--transparent .shopini-menu-toggle span {
	color: var(--sw-ink);
	transition: color .25s ease;
}
.shopini-js .shopini-header--transparent .shopini-nav__list .current-menu-item > a {
	color: var(--sw-brand);
}
/* Le logo est traité à part : un logo texte peut changer de couleur, mais
   un logo image importé par le marchand a ses propres couleurs figées
   dans le fichier — impossible de les recolorer en CSS. Un socle blanc
   translucide garantit la lisibilité dans les deux cas, sans avoir à
   savoir ce que contient l'image. */
.shopini-js .shopini-header--transparent .shopini-logo,
.shopini-js .shopini-header--transparent .custom-logo-link {
	background: transparent;
	padding: 0;
	color: var(--sw-ink);
	transition: background-color .25s ease;
}
.shopini-js .shopini-header--transparent .shopini-cart {
	background: transparent;
	border-color: transparent;
	color: var(--sw-ink);
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.shopini-js .shopini-header--transparent.is-scrolled {
	position: fixed;
	top: 0;
	background: transparent;
	border-bottom-color: var(--sw-border);
	box-shadow: var(--sw-shadow);
}
.shopini-js .shopini-header--transparent.is-scrolled .shopini-header__card { border-radius: 0 0 var(--sw-radius-lg) var(--sw-radius-lg); }

@media (max-width: 860px) {
	.shopini-trustbar { min-height: auto; }
	.shopini-js .shopini-header--transparent { top: auto; }
}
.shopini-js .shopini-header--transparent.is-scrolled .shopini-logo,
.shopini-js .shopini-header--transparent.is-scrolled .custom-logo-link {
	background: transparent;
	padding: 0;
}
.shopini-js .shopini-header--transparent.is-scrolled .shopini-mega-menu-trigger,
.shopini-js .shopini-header--transparent.is-scrolled .shopini-menu-toggle span {
	color: var(--sw-ink);
}
.shopini-js .shopini-header--transparent.is-scrolled .shopini-nav__list a { color: var(--sw-muted); }
.shopini-js .shopini-header--transparent.is-scrolled .shopini-nav__list .current-menu-item > a { color: var(--sw-brand); }
.shopini-js .shopini-header--transparent.is-scrolled .shopini-cart {
	background: var(--sw-bg);
	border-color: var(--sw-border);
	color: var(--sw-ink);
}

/* --- Barre de contact (téléphone uniquement — réseaux sociaux retirés,
   voir footer.php) --- */
.shopini-contact-bar {
	background: var(--sw-ink);
	color: rgba(255, 255, 255, .85);
	font-size: .8rem;
}
.shopini-contact-bar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 34px;
}
.shopini-contact-bar__phone { color: #fff; font-weight: 600; }
.shopini-social-links { display: flex; align-items: center; gap: var(--sw-space-12); }
.shopini-social-links a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: inherit; }
.shopini-social-links a:hover { color: var(--sw-brand); }
.shopini-social-links svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) {
	.shopini-contact-bar__inner { justify-content: center; }
}

/* Très petits écrans : réduire légèrement les contrôles sans les masquer. */
@media (max-width: 380px) {
	.shopini-header__inner,
	.shopini-js .shopini-header--transparent .shopini-header__inner,
	.shopini-js .shopini-header--transparent.is-scrolled .shopini-header__inner {
		gap: 4px;
		padding-inline: 10px;
	}

	.shopini-logo img,
	.custom-logo-link img {
		max-width: min(var(--sw-mobile-logo-width, 105px), 29vw);
		max-height: 40px;
	}

	.shopini-cart,
	.shopini-account,
	.shopini-menu-toggle {
		width: 39px;
		min-width: 39px;
		height: 39px;
		flex-basis: 39px;
	}
}

/* @critical */
/* =========================================================
   Hero (page d'accueil)
   ========================================================= */
.shopini-hero {
	background-color: var(--sw-ink);
	background-size: cover;
	background-position: center;
	color: var(--sw-ink);
	text-align: left;
	position: relative;
	min-height: min(760px, 76vh);
	display: grid;
	align-items: center;
}
/* Garde-fou : quelle que soit la photo importée par le marchand (claire,
   sombre, chargée...), le texte du Hero reste lisible. Sans ce voile, un
   débutant pourrait rendre son propre titre illisible simplement en
   important la mauvaise image — ce thème ne doit jamais le permettre. */
.shopini-hero--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--sw-overlay-surface-strong) 0%, var(--sw-overlay-surface-medium) 38%, var(--sw-overlay-surface-light) 68%);
	pointer-events: none;
}
.shopini-hero__inner,
.shopini-hero__stats { position: relative; z-index: 1; }
.shopini-hero__inner { padding-block: calc(var(--sw-space-96) * 1.65) var(--sw-space-96); width: 100%; }
.shopini-hero__inner > * { max-width: 590px; }
.shopini-hero__eyebrow { display: block; margin-bottom: var(--sw-space-16); color: var(--sw-brand); font-weight: var(--sw-font-weight-bold); letter-spacing: .08em; text-transform: uppercase; }
.shopini-hero__title { font-size: clamp(2.65rem, 5vw, 4.25rem); line-height: 1.1; margin-bottom: var(--sw-space-24); text-wrap: balance; }
.shopini-hero__title span { display: block; color: var(--sw-brand); }
.shopini-hero__subtitle { font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.65; opacity: .92; margin-bottom: var(--sw-space-32); }
@media (max-width: 720px) {
	.shopini-hero { min-height: 650px; background-position: 62% center; }
	.shopini-hero--has-image::before { background: linear-gradient(90deg, var(--sw-overlay-surface-strong), var(--sw-overlay-surface-soft)); }
	.shopini-hero__inner { padding-block: var(--sw-space-80) var(--sw-space-64); }
}

/* =========================================================
   Grilles produits & articles
   ========================================================= */
.shopini-main { padding-block: var(--sw-space-96); }

.woocommerce ul.products,
.shopini-post-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sw-space-24);
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 1025px) {
	.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* WooCommerce ajoute des pseudo-éléments de clearfix pour son ancienne
   grille flottante. Dans une CSS Grid, ::before occupe sinon la première
   cellule et crée un faux emplacement vide avant le premier produit. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}
@media (max-width: 1024px) { .woocommerce ul.products, .shopini-post-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .woocommerce ul.products, .shopini-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sw-product-card-gap, 10px); } }
@media (max-width: 720px)  {
	/* Les cartes gagnent en largeur en mordant sur le padding du conteneur
	   (20px) plutôt qu'en le réduisant globalement — seule la grille
	   produits est concernée, le reste de la page (header, autres
	   sections) garde son espacement habituel. */
	.woocommerce ul.products,
	.shopini-post-grid {
		margin-inline: -12px;
	}
}
@media (max-width: 480px)  { .woocommerce ul.products, .shopini-post-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px)  { .home .woocommerce ul.products { grid-template-columns: repeat(var(--sw-home-mobile-columns, 1), minmax(0, 1fr)); } }
@media (max-width: 720px)  { .archive.woocommerce ul.products { grid-template-columns: repeat(var(--sw-shop-mobile-columns, 2), minmax(0, 1fr)); } }

.woocommerce ul.products li.product,
.shopini-post-card {
	position: relative;
	background: var(--sw-surface);
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius);
	overflow: hidden;
	transition: box-shadow var(--sw-duration-normal) var(--sw-ease-standard), transform var(--sw-duration-normal) var(--sw-ease-standard), border-color var(--sw-duration-normal) var(--sw-ease-standard);
}

/* La grille Shopini est l'unique responsable de la largeur et de
   l'espacement. Sans ce reset, WooCommerce réduit chaque carte une seconde
   fois avec sa largeur en pourcentage héritée de la mise en page flottante. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	float: none;
	width: 100% !important; /* Neutralise les largeurs .columns-* de WooCommerce. */
	min-width: 0;
	margin: 0;
}

.woocommerce ul.products li.product > .woocommerce-LoopProduct-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

@media (max-width: 720px) {
	.woocommerce ul.products li.product .button,
	.woocommerce ul.products li.product > .shopini-quick-buy,
	.woocommerce ul.products li.product > .shopini-btn--secondary {
		min-height: var(--sw-control-lg);
		padding-inline: var(--sw-space-8);
		font-size: var(--sw-font-size-sm);
		white-space: normal;
	}

	/* Cartes plus larges (gap réduit ci-dessus) : le texte gagne en place,
	   on réduit en plus le padding interne et la taille du titre pour
	   afficher un maximum de caractères avant la troncature. */
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: calc(var(--sw-product-title-size, var(--sw-font-size-lg)) * 0.82);
		padding-inline: var(--sw-space-12);
	}
	.woocommerce ul.products li.product .price {
		padding-inline: var(--sw-space-12);
		font-size: calc(var(--sw-product-price-size, var(--sw-font-size-lg)) * 0.9);
	}
}

.woocommerce ul.products li.product:hover,
.shopini-post-card:hover {
	box-shadow: var(--sw-shadow);
	transform: translateY(-6px);
	border-color: transparent;
}
.woocommerce ul.products li.product img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; margin: 0; padding: var(--sw-product-image-padding, var(--sw-space-4)); background: #fff; transition: transform var(--sw-duration-normal) var(--sw-ease-standard); }
.woocommerce ul.products li.product:hover img { transform: scale(1.035); }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.shopini-post-card__title { font-size: var(--sw-product-title-size, var(--sw-font-size-lg)); line-height: 1.35; padding: var(--sw-space-16) var(--sw-space-16) 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.woocommerce ul.products li.product .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	row-gap: 2px;
	column-gap: 6px;
	margin-top: auto;
	padding: var(--sw-space-8) var(--sw-space-16) var(--sw-space-16);
	font-weight: 700;
	color: var(--sw-ink);
	font-size: var(--sw-product-price-size, var(--sw-font-size-lg));
	direction: ltr; /* le prix garde toujours le même sens de lecture des chiffres */
	unicode-bidi: isolate;
}
/* Bug corrigé (constaté en prod) : <ins> hérite d'un soulignement par
   défaut du navigateur si rien ne le réinitialise — WooCommerce encapsule
   le prix soldé dedans. Même correctif que .shopini-product-header
   (fiche produit), appliqué ici à la vignette de la boucle. */
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-size: 1em;
	font-weight: 700;
	color: var(--sw-ink);
	white-space: nowrap;
}
.woocommerce ul.products li.product .price del {
	color: var(--sw-muted);
	font-size: .78em;
	font-weight: 500;
	white-space: nowrap;
}
/* Le composant Button (.shopini-btn--primary) fournit déjà couleur,
   rayon et graisse — ici on ne surcharge que la mise en page propre au
   contexte de la carte produit (pleine largeur, marges). */
.woocommerce ul.products li.product .button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--sw-control-lg);
	margin: 0 var(--sw-space-16) var(--sw-space-12);
	width: calc(100% - (var(--sw-space-16) * 2));
	/* Garde-fou (bug constaté en prod) : couleurs de marque posées ici
	   directement, pas uniquement via les classes .shopini-btn injectées
	   en PHP — si un plugin tiers ou un type de produit non prévu modifie
	   le HTML du lien avant notre filtre, le bouton reste sur la couleur
	   Shopini plutôt que de retomber sur le gris WooCommerce par défaut. */
	background: var(--sw-brand);
	border-color: var(--sw-brand);
	color: var(--sw-on-brand);
}
.woocommerce ul.products li.product .button:hover {
	background: var(--sw-brand-ink);
	border-color: var(--sw-brand-ink);
	color: var(--sw-on-brand);
}
.woocommerce ul.products li.product > .shopini-quick-buy,
.woocommerce ul.products li.product > .shopini-btn--secondary {
	display: flex;
	min-height: var(--sw-control-lg);
	margin: 0 var(--sw-space-16) var(--sw-space-16);
	width: calc(100% - (var(--sw-space-16) * 2));
}
.woocommerce ul.products li.product .onsale { top: var(--sw-space-12); left: var(--sw-space-12); right: auto; min-width: auto; min-height: auto; padding: var(--sw-space-4) var(--sw-space-12); border-radius: 999px; background: var(--sw-brand); color: var(--sw-on-brand); font-size: var(--sw-font-size-sm); line-height: 1.5; }
.shopini-product-action-hint {
	display: block;
	margin: 0 14px 14px;
	color: var(--sw-muted);
	line-height: 1.4;
}

/* =========================================================
   Page produit
   ========================================================= */
.single-product .shopini-main .product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sw-space-32);
	align-items: start;
	width: 100%;
	max-width: var(--sw-product-content-width);
	margin-inline: auto;
}

/* Une seule colonne commerciale : le thème réordonne les hooks natifs sans
   surcharger les templates WooCommerce. */
.single-product .shopini-main .product > .shopini-product-header,
.single-product .shopini-main .product > .woocommerce-product-gallery,
.single-product .shopini-main .product > .summary,
.single-product .shopini-main .product > .shopini-product-details,
.single-product .shopini-main .product > .shopini-product-reviews,
.single-product .shopini-main .product > .related.products {
	float: none !important;
	clear: none;
	width: 100% !important;
	max-width: none !important;
	min-width: 0;
	margin: 0;
	box-sizing: border-box;
	grid-column: 1;
}

.shopini-product-header { display: grid; gap: var(--sw-space-12); }
.shopini-product-header .product_title { margin: 0; }
.shopini-product-header__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sw-space-16); }
.shopini-product-header__meta .price,
.shopini-product-header__meta .stock,
.shopini-product-header__meta .woocommerce-product-rating { margin: 0; }
.shopini-product-header__meta .stock { color: var(--sw-success-ink); font-weight: var(--sw-font-weight-bold); }
.shopini-product-header__meta .woocommerce-product-rating { display: flex; align-items: center; gap: var(--sw-space-8); }

.woocommerce div.product .woocommerce-product-gallery {
	padding: var(--sw-space-24);
	border: var(--sw-border-width) solid var(--sw-border);
	border-radius: var(--sw-radius-xl);
	background: var(--sw-surface);
	box-shadow: var(--sw-shadow);
	overflow: hidden;
}
.woocommerce div.product .woocommerce-product-gallery img {
	width: 100%;
	border-radius: var(--sw-radius-lg);
}
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .flex-viewport {
	border-radius: var(--sw-radius-lg);
}
.woocommerce div.product .woocommerce-product-gallery__image > a {
	display: grid;
	place-items: center;
	height: clamp(var(--sw-product-gallery-height-min), var(--sw-product-gallery-height-fluid), var(--sw-product-gallery-height-max));
	overflow: hidden;
	background: var(--sw-bg);
}
.woocommerce div.product .woocommerce-product-gallery__image > a img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.woocommerce div.product .flex-control-thumbs {
	display: flex;
	gap: var(--sw-space-12);
	margin-top: var(--sw-space-16);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline proximity;
	scrollbar-width: thin;
}
.woocommerce div.product .flex-control-thumbs li {
	flex: 0 0 var(--sw-product-gallery-thumb-size);
	float: none;
	width: var(--sw-product-gallery-thumb-size);
	scroll-snap-align: start;
}
.woocommerce div.product .flex-control-thumbs img {
	aspect-ratio: 1;
	object-fit: contain;
	border: var(--sw-border-width) solid var(--sw-border);
	border-radius: var(--sw-radius-sm);
	background: var(--sw-surface);
	opacity: var(--sw-opacity-muted);
}
.woocommerce div.product .flex-control-thumbs img.flex-active {
	border-color: var(--sw-brand);
	box-shadow: 0 0 0 var(--sw-focus-width) var(--sw-brand-soft);
	opacity: 1;
}
.woocommerce div.product .summary {
	position: static;
	padding: var(--sw-space-32);
	border: var(--sw-border-width) solid var(--sw-border);
	border-radius: var(--sw-radius-xl);
	background: var(--sw-surface);
	box-shadow: var(--sw-shadow);
}
.shopini-product-header .product_title {
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	overflow-wrap: anywhere;
}
.shopini-product-header p.price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--sw-space-8);
	font-size: 1.75rem;
	color: var(--sw-brand-ink);
	font-weight: 700;
	direction: ltr;
	unicode-bidi: isolate;
}
.shopini-product-header p.price del {
	color: var(--sw-muted);
	font-size: var(--sw-font-size-md);
	font-weight: 500;
}
.shopini-product-header p.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--sw-muted);
	font-size: var(--sw-font-size-lg);
	line-height: 1.75;
}

.woocommerce div.product form.cart {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	align-items: stretch;
	gap: var(--sw-space-12);
	width: 100%;
	margin-block: var(--sw-space-24);
}
.woocommerce div.product form.cart:not(.variations_form) > .quantity {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
}
.woocommerce div.product form.cart:not(.variations_form) > .single_add_to_cart_button {
	grid-column: 2;
	grid-row: 1;
}
.woocommerce div.product form.cart .quantity { flex: 0 0 auto; }
.woocommerce div.product form.cart .qty {
	width: calc(var(--sw-control-lg) + var(--sw-space-16));
	height: 100%;
	min-height: var(--sw-control-lg);
	border: var(--sw-border-width) solid var(--sw-border);
	border-radius: var(--sw-btn-radius);
	background: var(--sw-bg);
}
/* Boutons natifs WooCommerce ("Ajouter au panier" fiche produit, "Valider
   la commande" au paiement) : ce balisage est généré par WooCommerce, pas
   par nos templates — impossible d'y appliquer .shopini-btn directement
   sans surcharger un template WooCommerce (ce qu'on évite depuis le
   début). Alignés visuellement sur les MÊMES tokens que le composant
   Button (assets/css/partials/22-button.css) plutôt que dupliqués en dur :
   seule la couleur diffère volontairement (vert succès plutôt que violet
   de marque), pour distinguer un acte d'achat des autres actions du site. */
.woocommerce div.product form.cart .button {
	background: var(--sw-brand);
	color: var(--sw-on-brand);
	border: var(--sw-border-width) solid var(--sw-brand);
	border-radius: var(--sw-btn-radius);
	padding: var(--sw-btn-padding-block-lg) var(--sw-btn-padding-inline-lg);
	font-weight: var(--sw-btn-font-weight);
	font-size: var(--sw-btn-font-size-lg);
	cursor: pointer;
	transition: background-color var(--sw-btn-duration) var(--sw-btn-ease);
}
.woocommerce div.product form.cart .button:hover { background: var(--sw-brand-ink); }

.woocommerce div.product form.cart .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-height: var(--sw-control-lg);
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}
.woocommerce div.product form.cart > .shopini-btn--secondary,
.woocommerce div.product .woocommerce-variation-add-to-cart > .shopini-btn--secondary {
	grid-column: 1 / -1;
	width: 100%;
	background: transparent;
	border-color: var(--sw-brand);
	color: var(--sw-brand-ink);
}
.woocommerce div.product form.variations_form.cart { display: block; }
.woocommerce div.product form.cart .variations { width: 100%; margin-bottom: var(--sw-space-16); }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { display: block; padding: 0 0 var(--sw-space-8); text-align: start; }
.woocommerce div.product form.cart .variations select { width: 100%; min-height: var(--sw-control-lg); border: var(--sw-border-width) solid var(--sw-border); border-radius: var(--sw-radius-sm); background: var(--sw-surface); }
.woocommerce div.product .woocommerce-variation-add-to-cart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sw-space-12); }

/* Amélioration progressive : le select reste dans le DOM et demeure la
   source de vérité WooCommerce. Il n'est masqué qu'après création réussie
   des choix Shopini par JavaScript. */
.woocommerce div.product form.cart .variations select.shopini-variation-select--enhanced {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.woocommerce div.product form.cart .variations th label,
.shopini-variation-current {
	display: inline;
}
.shopini-variation-current { font-weight: var(--sw-font-weight-bold); }
.shopini-variation-choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sw-space-8);
	padding-top: var(--sw-space-8);
}
.shopini-variation-choice {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--sw-control-lg);
	min-height: var(--sw-control-lg);
	padding: var(--sw-space-8) var(--sw-space-16);
	border: var(--sw-border-width) solid var(--sw-border);
	border-radius: var(--sw-radius-sm);
	background: var(--sw-surface);
	color: var(--sw-ink);
	font-weight: var(--sw-font-weight-bold);
	cursor: pointer;
	transition: border-color var(--sw-duration-fast) var(--sw-ease-standard), background-color var(--sw-duration-fast) var(--sw-ease-standard), color var(--sw-duration-fast) var(--sw-ease-standard), opacity var(--sw-duration-fast) var(--sw-ease-standard);
}
.shopini-variation-choice:hover { border-color: var(--sw-brand); }
.shopini-variation-choice:focus-visible { outline: var(--sw-focus-width) solid var(--sw-brand); outline-offset: var(--sw-focus-width); }
.shopini-variation-choice.is-selected {
	border-color: var(--sw-ink);
	background: var(--sw-ink);
	color: var(--sw-on-brand);
}
.shopini-variation-choice:disabled {
	opacity: var(--sw-opacity-disabled);
	cursor: not-allowed;
	text-decoration: line-through;
}
.shopini-variation-choice--swatch {
	position: relative;
	width: var(--sw-control-lg);
	min-width: var(--sw-control-lg);
	padding: var(--sw-space-4);
	border-radius: 50%;
	background: var(--shopini-swatch-color, var(--sw-surface));
	box-shadow: inset 0 0 0 var(--sw-space-4) var(--sw-surface);
}
.shopini-variation-choice--swatch.is-selected {
	border-color: var(--sw-ink);
	background: var(--shopini-swatch-color, var(--sw-surface));
	box-shadow: inset 0 0 0 var(--sw-space-4) var(--sw-surface), 0 0 0 var(--sw-focus-width) var(--sw-ink);
}
.shopini-variation-choice--swatch > span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.woocommerce div.product form.cart .quantity.shopini-quantity {
	display: inline-grid;
	grid-template-columns: var(--sw-control-lg) var(--sw-product-quantity-width) var(--sw-control-lg);
	align-items: stretch;
	width: max-content !important;
	max-width: none;
	justify-self: start;
	float: none;
}
.woocommerce div.product form.cart .quantity.shopini-quantity .qty {
	width: var(--sw-product-quantity-width);
	min-width: var(--sw-product-quantity-min-width);
	border-radius: 0;
	text-align: center;
}
.shopini-quantity__button {
	display: grid;
	place-items: center;
	min-height: var(--sw-control-lg);
	padding: 0;
	border: var(--sw-border-width) solid var(--sw-border);
	background: var(--sw-surface);
	color: var(--sw-ink);
	font-weight: var(--sw-font-weight-bold);
	cursor: pointer;
}
.shopini-quantity__button:first-child { border-radius: var(--sw-radius-sm) 0 0 var(--sw-radius-sm); border-inline-end: 0; }
.shopini-quantity__button:last-child { border-radius: 0 var(--sw-radius-sm) var(--sw-radius-sm) 0; border-inline-start: 0; }
.shopini-quantity__button:hover { color: var(--sw-brand-ink); background: var(--sw-brand-soft); }

.shopini-purchase-reassurance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sw-space-12); padding-top: var(--sw-space-16); border-top: var(--sw-border-width) solid var(--sw-border); color: var(--sw-muted); }
.shopini-purchase-reassurance span { display: flex; align-items: center; justify-content: center; gap: var(--sw-space-8); }
.shopini-purchase-reassurance svg { width: var(--sw-space-24); height: var(--sw-space-24); fill: none; stroke: var(--sw-brand); stroke-width: var(--sw-focus-width); stroke-linecap: round; stroke-linejoin: round; }

/* Opportunite promotionnelle : visible exclusivement lorsque WooCommerce
   confirme un prix en promotion (rendu conditionnel cote PHP). */
.shopini-product-opportunity {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--sw-space-16);
	margin-bottom: var(--sw-space-24);
	padding: var(--sw-space-16);
	border: var(--sw-border-width) solid var(--sw-brand);
	border-radius: var(--sw-radius-lg);
	background: var(--sw-opportunity-soft);
	color: var(--sw-ink);
}
.shopini-product-opportunity__copy { display: grid; gap: var(--sw-space-4); }
.shopini-product-opportunity__eyebrow {
	color: var(--sw-opportunity);
	font-size: var(--sw-font-size-sm);
	font-weight: var(--sw-font-weight-bold);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.shopini-product-opportunity__timer {
	display: flex;
	align-items: center;
	gap: var(--sw-space-4);
	direction: ltr;
	white-space: nowrap;
}
.shopini-product-opportunity__timer > span {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--sw-space-4);
	min-width: var(--sw-control-lg);
	padding: var(--sw-space-8) var(--sw-space-12);
	border-radius: var(--sw-radius-sm);
	background: var(--sw-ink);
	color: var(--sw-on-brand);
}
.shopini-product-opportunity__timer b {
	font-family: var(--sw-font-display);
	font-size: var(--sw-font-size-lg);
	line-height: 1;
}
.shopini-product-opportunity__timer small {
	font-size: var(--sw-font-size-sm);
	opacity: var(--sw-opacity-muted);
}
.shopini-product-opportunity__timer i { color: var(--sw-opportunity); font-style: normal; font-weight: var(--sw-font-weight-bold); }
.shopini-product-opportunity.is-ending { border-color: var(--sw-danger); }
.shopini-product-opportunity.is-expired { display: none; }

.shopini-product-details,
.shopini-product-reviews {
	padding: var(--sw-space-32);
	border: var(--sw-border-width) solid var(--sw-border);
	border-radius: var(--sw-radius-xl);
	background: var(--sw-surface);
}
.shopini-product-details > h2,
.shopini-product-reviews .woocommerce-Reviews-title { margin-bottom: var(--sw-space-24); }
.shopini-product-details > :last-child,
.shopini-product-details .woocommerce-product-details__short-description > :last-child { margin-bottom: 0; }
.shopini-product-reviews #reviews { margin: 0; }
.woocommerce div.product .related.products { margin-top: var(--sw-space-32); }
.woocommerce div.product .related.products > h2 { margin-bottom: var(--sw-space-24); font-size: clamp(1.75rem, 3vw, 2.4rem); }
/* Correctif forcé (constaté en prod, confirmé par plusieurs captures) :
   dans cette section précise, la grille (display:grid + colonnes égales)
   et le cadrage carré des images ne s'appliquaient pas — chaque carte
   prenait la largeur de sa propre image plutôt que celle de sa cellule
   de grille. Cause exacte non identifiée à distance (pas d'accès au
   rendu réel), donc on force ici avec !important et une sélectivité
   maximale, strictement isolée à ".related.products" : aucun effet sur
   le catalogue, l'accueil, ou toute autre grille du site. */
.woocommerce div.product .related.products ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	align-items: stretch !important;
}
.woocommerce div.product .related.products ul.products li.product {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 100% !important;
	flex-shrink: 1 !important;
}
.woocommerce div.product .related.products ul.products li.product img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	object-fit: contain !important;
	flex: 0 0 auto !important;
}
.woocommerce div.product .related.products ul.products li.product .woocommerce-loop-product__title {
	flex: 0 0 auto;
}
.woocommerce div.product .related.products ul.products li.product .price {
	margin-top: auto;
}
@media (max-width: 1024px) {
	.woocommerce div.product .related.products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
	.woocommerce div.product .related.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
	.woocommerce div.product .related.products ul.products { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 860px) {
	.woocommerce div.product .summary { position: static; padding: var(--sw-space-24); }
	.woocommerce div.product .woocommerce-product-gallery { padding: var(--sw-space-16); }
	.shopini-product-header .product_title { font-size: clamp(1.8rem, 8vw, 2.5rem); }
}

@media (max-width: 600px) {
	.woocommerce div.product { gap: var(--sw-space-24); }
	.woocommerce div.product .summary,
	.shopini-product-details,
	.shopini-product-reviews { padding: var(--sw-space-16); border-radius: var(--sw-radius-lg); }
	.woocommerce div.product form.cart { display: grid; grid-template-columns: minmax(0, 1fr); }
	.woocommerce div.product form.cart:not(.variations_form) { grid-template-columns: minmax(0, 1fr); }
	.woocommerce div.product form.cart:not(.variations_form) > .quantity,
	.woocommerce div.product form.cart:not(.variations_form) > .single_add_to_cart_button {
		grid-column: 1;
		grid-row: auto;
		width: 100%;
	}
	.woocommerce div.product .woocommerce-variation-add-to-cart { grid-template-columns: minmax(0, 1fr); }
	.woocommerce div.product form.cart .quantity:not(.shopini-quantity),
	.woocommerce div.product form.cart .qty,
	.woocommerce div.product form.cart .button { width: 100%; }
	.woocommerce div.product form.cart .quantity.shopini-quantity { width: 100%; grid-template-columns: var(--sw-control-lg) minmax(0, 1fr) var(--sw-control-lg); }
	.woocommerce div.product form.cart .quantity.shopini-quantity .qty { width: 100%; }
	.shopini-purchase-reassurance { grid-template-columns: minmax(0, 1fr); }
	.shopini-product-opportunity { grid-template-columns: minmax(0, 1fr); }
	.shopini-product-opportunity__timer { justify-content: flex-start; overflow-x: auto; }
	.woocommerce div.product .woocommerce-product-gallery__image > a { height: clamp(var(--sw-product-gallery-mobile-height-min), var(--sw-product-gallery-mobile-height-fluid), var(--sw-product-gallery-mobile-height-max)); }
	.woocommerce div.product .related.products ul.products { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Formulaires WooCommerce natifs + blocs Shopini (checkout simplifié / commande rapide)
   ========================================================= */
.woocommerce form .form-row label,
.shopini-qo__field label { font-weight: 600; font-size: .9rem; color: var(--sw-muted); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.shopini-qo__field input,
.shopini-qo__field select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-sm);
	background: var(--sw-surface);
	transition: border-color .15s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.shopini-qo__field input:focus,
.shopini-qo__field select:focus {
	border-color: var(--sw-brand);
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order,
.shopini-qo__submit {
	background: var(--sw-success);
	color: #fff;
	border: none;
	border-radius: var(--sw-btn-radius);
	padding: var(--sw-btn-padding-block-lg) var(--sw-btn-padding-inline-lg);
	font-weight: var(--sw-btn-font-weight);
	font-size: var(--sw-btn-font-size-lg);
	cursor: pointer;
	transition: background-color var(--sw-btn-duration) var(--sw-btn-ease);
}
.woocommerce #payment #place_order:hover,
.shopini-qo__submit:hover { background: var(--sw-success-ink); }

/* =========================================================
   Checkout distraction-free
   ========================================================= */
body.shopini-distraction-free .shopini-main { padding-block: 24px 48px; }
body.shopini-distraction-free .woocommerce-checkout {
	max-width: 720px;
	margin-inline: auto;
}
.shopini-checkout-footer {
	text-align: center;
	color: var(--sw-muted);
	font-size: .85rem;
	padding: 24px 20px 40px;
}

/* =========================================================
   Drawers (panier / recherche)
   Réservé au lot "Cartes produit + Cart Drawer" — la structure
   HTML des drawers n'existe pas encore, donc rien à styler ici
   pour l'instant. Le fichier reste dans l'ordre de build pour
   que l'intégration future n'ait pas à toucher bin/build-assets.sh.
   ========================================================= */

/* =========================================================
   Animations (reveal on scroll, micro-interactions)
   Réservé au lot "Header + Hero premium" et suivants.
   La classe .shopini-header déjà présente dans 30-header.css
   recevra ici son état ".is-scrolled" (fond transparent -> blanc).
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
	.shopini-reveal {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity .5s ease, transform .5s ease;
	}
	.shopini-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================
   Pied de page
   ========================================================= */
.shopini-footer { border-top: 1px solid var(--sw-border); margin-top: 48px; }
.shopini-footer__inner { padding-block: 40px; display: grid; gap: 24px; }
.shopini-footer__list { display: flex; gap: 16px; flex-wrap: wrap; }
.shopini-footer__copy { color: var(--sw-muted); font-size: .85rem; margin: 0; }
.shopini-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sw-space-24); padding-top: var(--sw-space-16); border-top: var(--sw-border-width) solid var(--sw-border); }
.shopini-secure-payments { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--sw-space-8); color: var(--sw-muted); font-size: var(--sw-font-size-sm); }
.shopini-secure-payments__trust,
.shopini-secure-payments__method { display: inline-flex; align-items: center; gap: var(--sw-space-4); min-height: var(--sw-control-lg); padding-inline: var(--sw-space-12); border: var(--sw-border-width) solid var(--sw-border); border-radius: var(--sw-radius-sm); background: var(--sw-surface); }
.shopini-secure-payments svg { width: var(--sw-space-24); height: var(--sw-space-24); fill: none; stroke: currentColor; stroke-width: var(--sw-focus-width); stroke-linecap: round; stroke-linejoin: round; }
.shopini-secure-payments__trust { color: var(--sw-success-ink); }
.shopini-checkout-footer .shopini-secure-payments { justify-content: center; margin-top: var(--sw-space-12); }
@media (max-width: 720px) { .shopini-footer__bottom { align-items: flex-start; flex-direction: column; } .shopini-secure-payments { justify-content: flex-start; } }
.shopini-widget__title { font-size: 1rem; }

/* =========================================================
   Page générique
   ========================================================= */
.shopini-page__title { font-size: 2rem; }
.shopini-page__content { max-width: 760px; }
.shopini-page--elementor-full-width {
	width: 100%;
	max-width: none;
	padding-block: 0;
}
.shopini-page__content--elementor {
	width: 100%;
	max-width: none;
}
.shopini-page__media { border-radius: var(--sw-radius-lg); overflow: hidden; margin-bottom: 24px; }

/* =========================================================
   Pages prêtes à l'emploi : accueil enrichi, boutique, à propos, contact
   ========================================================= */

/* --- Hero : actions (CTA primaire + secondaire), badges, stats --- */
.shopini-hero__actions { display: flex; gap: var(--sw-space-12); justify-content: flex-start; flex-wrap: wrap; margin-bottom: var(--sw-space-32); }

.shopini-hero__badges {
	display: flex;
	gap: 18px;
	justify-content: flex-start;
	flex-wrap: wrap;
	font-size: .85rem;
	opacity: .9;
	margin: 0 0 1em;
}
.shopini-hero__badges--onboarding { color: var(--sw-ink-soft); gap: var(--sw-space-24); }

.shopini-hero__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding-block: 32px 0;
	border-top: 1px solid rgba(255, 255, 255, .15);
	margin-top: 32px;
}
@media (max-width: 720px) { .shopini-hero__stats { grid-template-columns: 1fr; gap: 16px; padding-block-start: 24px; } }

.shopini-stat-card { text-align: center; }
.shopini-stat-card__value {
	display: block;
	font-family: var(--sw-font-display);
	font-size: 1.75rem;
	font-weight: 700;
}
.shopini-stat-card__label { display: block; font-size: .85rem; opacity: .8; }

/* Sur la page À propos, les stats ne sont plus sur fond sombre (hero) :
   on repasse la valeur en couleur d'encre plutôt qu'en blanc. */
.shopini-about-stats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding-block: 40px;
}
.shopini-about-stats .shopini-stat-card__value { color: var(--sw-brand-ink); }
.shopini-about-stats .shopini-stat-card__label { color: var(--sw-muted); opacity: 1; }
@media (max-width: 720px) { .shopini-about-stats__grid { grid-template-columns: 1fr; } }

/* --- Titre de section générique (ex : "Nouveautés") --- */
.shopini-section-title { font-size: clamp(1.75rem, 3vw, 2.4rem); margin: var(--sw-space-4) 0 0; }
.shopini-section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--sw-space-24); margin-bottom: var(--sw-space-32); }
.shopini-section-heading__eyebrow { color: var(--sw-brand-ink); font-size: var(--sw-font-size-sm); font-weight: var(--sw-font-weight-bold); letter-spacing: .08em; text-transform: uppercase; }
.shopini-section-heading > p { max-width: 28rem; color: var(--sw-muted); }

/* --- Boutique : bannière d'introduction --- */
.shopini-shop-intro { padding-block: 40px; border-bottom: 1px solid var(--sw-border); margin-bottom: 32px; }
.shopini-shop-intro__title { font-size: 2rem; margin-bottom: .3em; }
.shopini-shop-intro__description { color: var(--sw-muted); max-width: 640px; }

/* --- Catégories populaires (accueil) --- */
.shopini-featured-categories { padding-block: var(--sw-space-96); }
.shopini-featured-categories__title { font-size: clamp(1.75rem, 3vw, 2.4rem); margin: var(--sw-space-4) 0 0; }
.shopini-featured-categories__grid {
	display: grid;
	/* auto-fit plutôt qu'un nombre de colonnes figé : avec 2 ou 3
	   catégories seulement (sélection manuelle ou petit catalogue), elles
	   se répartissent sur toute la largeur au lieu de se coller à gauche
	   en laissant un vide asymétrique à droite. Se redimensionne aussi
	   nativement selon la largeur d'écran, sans media queries séparées. */
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
}

.shopini-category-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius);
	overflow: hidden;
	background: var(--sw-surface);
	transition: box-shadow .2s ease, transform .2s ease;
}
.shopini-category-card:hover { box-shadow: var(--sw-shadow-lg); transform: translateY(-6px); }
.shopini-category-card__media {
	display: block;
	aspect-ratio: 4 / 5;
	background-color: var(--sw-bg);
	background-size: cover;
	background-position: center;
}
.shopini-category-card__media--placeholder {
	background-image: linear-gradient(135deg, var(--sw-border), var(--sw-bg));
}
.shopini-category-card__name { font-weight: 700; padding: 10px 12px 0; }
.shopini-category-card__count { font-size: .8rem; color: var(--sw-muted); padding: 2px 12px 12px; }
.shopini-category-card__count,
.woocommerce-loop-category__title .count { display: none; }

/* --- Avis clients --- */
.shopini-testimonials { padding-block: 48px; background: var(--sw-surface); border-block: 1px solid var(--sw-border); }
.shopini-testimonials__title { font-size: 1.5rem; margin-bottom: 20px; text-align: center; }
.shopini-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 860px) { .shopini-testimonials__grid { grid-template-columns: 1fr; } }

.shopini-testimonial-card {
	margin: 0;
	padding: 24px;
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius);
	background: var(--sw-bg);
}
.shopini-testimonial-card__stars { color: var(--sw-brand); letter-spacing: 2px; margin-bottom: 8px; }
.shopini-testimonial-card__quote { margin: 0 0 16px; font-style: italic; color: var(--sw-ink); }
.shopini-testimonial-card__author { display: flex; flex-direction: column; font-style: normal; }
.shopini-testimonial-card__name { font-weight: 700; }
.shopini-testimonial-card__role { font-size: .85rem; color: var(--sw-muted); }

/* --- À propos : valeurs + CTA --- */
.shopini-page__content--wide { max-width: 860px; }

.shopini-about-values { padding-block: 32px 8px; }
.shopini-about-values__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
@media (max-width: 1024px) { .shopini-about-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .shopini-about-values__grid { grid-template-columns: 1fr; } }

.shopini-value-card {
	text-align: center;
	padding: 24px 16px;
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius);
	background: var(--sw-surface);
}
.shopini-value-card__icon { display: block; font-size: 2rem; margin-bottom: 12px; }
.shopini-value-card__title { font-size: 1.05rem; margin-bottom: 6px; }
.shopini-value-card__text { color: var(--sw-muted); font-size: .9rem; margin: 0; }

.shopini-cta-banner { background: var(--sw-ink); color: #fff; text-align: center; }
.shopini-cta-banner__inner { padding-block: 56px; max-width: 640px; }
.shopini-cta-banner__title { font-size: 1.75rem; margin-bottom: .3em; }
.shopini-cta-banner__subtitle { opacity: .85; margin-bottom: 1.5em; }

/* --- Contact --- */
.shopini-contact-layout {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	align-items: start;
	padding-block: 24px 48px;
}
@media (max-width: 860px) { .shopini-contact-layout { grid-template-columns: 1fr; } }

.shopini-form-row { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.shopini-form-row label { font-weight: 600; font-size: .9rem; color: var(--sw-muted); }
.shopini-form-row input,
.shopini-form-row textarea {
	padding: 12px 14px;
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius-sm);
	background: var(--sw-surface);
	font-family: inherit;
	transition: border-color .15s ease;
}
.shopini-form-row input:focus,
.shopini-form-row textarea:focus { border-color: var(--sw-brand); }

.shopini-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.shopini-form-notice {
	padding: 12px 16px;
	border-radius: var(--sw-radius-sm);
	font-weight: 600;
	margin-bottom: 20px;
}
.shopini-form-notice--success { background: rgba(22, 163, 74, .1); color: var(--sw-success-ink); }
.shopini-form-notice--error { background: rgba(214, 54, 56, .1); color: var(--sw-danger); }

.shopini-contact-info {
	padding: 24px;
	border: 1px solid var(--sw-border);
	border-radius: var(--sw-radius);
	background: var(--sw-surface);
}
.shopini-contact-info__title { font-size: 1.1rem; margin-bottom: 12px; }
.shopini-contact-info__list { display: flex; flex-direction: column; gap: 10px; }
.shopini-contact-info__list a { color: var(--sw-brand-ink); font-weight: 600; }

/* --- État vide (catégories, produits, marques...) --- */
.shopini-empty-state {
	grid-column: 1 / -1;
	text-align: center;
	padding: 48px 24px;
	border: 1px dashed var(--sw-border);
	border-radius: var(--sw-radius-lg);
	background: var(--sw-surface);
}
.shopini-empty-state__icon { display: block; font-size: 2.5rem; margin-bottom: 12px; }
.shopini-empty-state__title { font-weight: 700; font-size: 1.1rem; margin: 0 0 6px; }
.shopini-empty-state__text { color: var(--sw-muted); max-width: 420px; margin: 0 auto 20px; }

/* La section Marques réutilise la grille des catégories : léger décalage
   de fond pour distinguer visuellement les deux sections en séquence. */
.shopini-featured-brands { background: var(--sw-surface); border-block: 1px solid var(--sw-border); }

/* --- Home Experience : aperçus réservés au commerçant --- */
.shopini-preview-notice {
	margin-block: var(--sw-space-16) var(--sw-space-24);
	padding: var(--sw-space-12) var(--sw-space-16);
	border: var(--sw-border-width) solid var(--sw-brand);
	border-radius: var(--sw-radius-sm);
	background: color-mix(in srgb, var(--sw-brand) 8%, var(--sw-surface));
	color: var(--sw-muted);
}
.shopini-preview-notice strong { color: var(--sw-brand-ink); margin-inline-end: var(--sw-space-8); }
.shopini-preview-card,
.shopini-product-preview {
	padding: var(--sw-space-16);
	border: var(--sw-border-width) dashed var(--sw-border);
	border-radius: var(--sw-radius);
	background: var(--sw-surface);
	color: var(--sw-muted);
}
.shopini-preview-card { position: relative; min-height: 260px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; border-style: solid; color: var(--sw-ink); transition: transform var(--sw-duration-normal) var(--sw-ease-standard), box-shadow var(--sw-duration-normal) var(--sw-ease-standard); }
.shopini-preview-card:hover { transform: translateY(-6px); box-shadow: var(--sw-shadow-lg); }
.shopini-preview-card strong { font-size: var(--sw-font-size-lg); }
.shopini-preview-card small { color: var(--sw-muted); margin-top: var(--sw-space-4); }
.shopini-preview-card__visual,
.shopini-product-preview__media {
	display: grid;
	place-items: center;
	min-height: 8rem;
	margin-bottom: var(--sw-space-12);
	border-radius: var(--sw-radius-sm);
	background: linear-gradient(135deg, var(--sw-bg), var(--sw-border));
	color: var(--sw-brand);
	font-size: 2rem;
}
.shopini-preview-card__visual { position: absolute; inset: 0; min-height: 0; margin: 0; border-radius: 0; font-size: 4.25rem; transition: transform var(--sw-duration-normal) var(--sw-ease-standard); }
.shopini-preview-card:hover .shopini-preview-card__visual { transform: scale(1.06); }
.shopini-preview-card strong,
.shopini-preview-card small { position: relative; z-index: 1; }
.shopini-preview-card--1 .shopini-preview-card__visual { background: var(--sw-category-mode); }
.shopini-preview-card--2 .shopini-preview-card__visual { background: var(--sw-category-phone); }
.shopini-preview-card--3 .shopini-preview-card__visual { background: var(--sw-category-tech); }
.shopini-preview-card--4 .shopini-preview-card__visual { background: var(--sw-category-home); }
.shopini-preview-card--5 .shopini-preview-card__visual { background: var(--sw-category-beauty); }
.shopini-preview-card--6 .shopini-preview-card__visual { background: var(--sw-category-pets); }
.shopini-preview-card::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, var(--sw-surface) 55%); }
.shopini-preview-card strong,
.shopini-preview-card small { z-index: 2; }
.shopini-product-preview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sw-space-24); }
.shopini-product-preview { display: flex; flex-direction: column; gap: var(--sw-space-4); }
.shopini-preview-action { margin-block: var(--sw-space-24) 0; text-align: center; }
.shopini-home-preview { padding-block: var(--sw-space-96); background: var(--sw-surface); }
.shopini-home-preview__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sw-space-16); }
.shopini-home-preview__benefit { padding: var(--sw-space-32); border: var(--sw-border-width) solid var(--sw-border); border-radius: var(--sw-radius-lg); background: var(--sw-bg); }
.shopini-home-preview__benefit > span { color: var(--sw-success); font-weight: var(--sw-font-weight-bold); }
.shopini-home-preview__benefit h3 { margin-top: var(--sw-space-8); }
.shopini-home-preview__benefit p { color: var(--sw-muted); }
.shopini-home-preview__banner { margin-top: var(--sw-space-64); padding: var(--sw-space-64); border-radius: var(--sw-radius-xl); background: var(--sw-ink); color: var(--sw-on-brand); }

.shopini-promo-banner { position: relative; min-height: var(--sw-promo-banner-height, 280px); margin-block: var(--sw-space-64); overflow: hidden; border-radius: var(--sw-radius-xl); background-color: var(--sw-ink); background-position: center; background-size: cover; color: var(--sw-on-brand); display: flex; align-items: center; }
.shopini-promo-banner--has-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--sw-overlay-strong), var(--sw-overlay-medium) 58%, var(--sw-overlay-light)); pointer-events: none; }
.shopini-promo-banner__inner { position: relative; z-index: 1; max-width: 38rem; padding-block: var(--sw-space-64); }
.shopini-promo-banner__eyebrow { display: block; margin-bottom: var(--sw-space-12); font-weight: var(--sw-font-weight-bold); letter-spacing: .08em; text-transform: uppercase; }
.shopini-promo-banner__title { margin-bottom: var(--sw-space-16); font-size: clamp(1.75rem, 3vw, 2.5rem); }
.shopini-promo-banner__text { margin-bottom: var(--sw-space-24); }
@media (max-width: 600px) { .shopini-promo-banner { margin-block: var(--sw-space-32); border-radius: 0; } .shopini-promo-banner__inner { padding-block: var(--sw-space-48); } }

/* --- Réassurance immédiatement sous le Hero --- */
.shopini-trust-features { position: relative; z-index: var(--sw-z-raised); margin-top: calc(var(--sw-space-32) * -1); }
.shopini-trust-features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sw-space-16); }
.shopini-trust-feature { display: flex; align-items: center; gap: var(--sw-space-16); min-height: 112px; padding: var(--sw-space-24); border: var(--sw-border-width) solid var(--sw-border); border-radius: var(--sw-radius-lg); background: var(--sw-surface); box-shadow: var(--sw-shadow); }
.shopini-trust-feature__icon { display: grid; place-items: center; flex: 0 0 var(--sw-control-lg); width: var(--sw-control-lg); height: var(--sw-control-lg); border-radius: 50%; background: var(--sw-brand-soft); color: var(--sw-brand-ink); font-weight: var(--sw-font-weight-bold); }
.shopini-trust-feature h2 { margin: 0 0 var(--sw-space-4); font-size: var(--sw-trust-feature-title-size, var(--sw-font-size-md)); }
.shopini-trust-feature p { margin: 0; color: var(--sw-muted); font-size: var(--sw-trust-feature-text-size, var(--sw-font-size-sm)); line-height: 1.45; }
/* Visibilité desktop/mobile indépendante (Personnaliser > Bandeau de
   réassurance) : 720px reste le seuil "mobile" utilisé dans le reste du
   thème (voir 50-product-card.css). */
@media (min-width: 721px) {
	.shopini-trust-features--hide-desktop { display: none; }
}
@media (max-width: 720px) {
	.shopini-trust-features--hide-mobile { display: none; }
}
@media (max-width: 860px) {
	.shopini-product-preview-grid,
	.shopini-home-preview__grid,
	.shopini-trust-features__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.home .shopini-main,
	.home .shopini-featured-categories { padding-block: var(--sw-space-32); }
	.shopini-section-heading { display: block; }
	.shopini-section-heading > p { margin-top: var(--sw-space-12); }
	.shopini-product-preview-grid,
	.shopini-home-preview__grid { grid-template-columns: 1fr; }
	.shopini-home-preview__banner { padding: var(--sw-space-24); }
	.shopini-trust-features { margin-top: calc(var(--sw-space-16) * -1); }
	.shopini-trust-features__grid { grid-template-columns: 1fr; }
}