/* @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: 1350px;
	--sw-container-padding: 24px;
	--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; }
/* Garde-fou transversal (suite au bug v3 : icône SVG sans width/height
   affichée à sa taille intrinsèque, ~1417px, recouvrant le bas de
   l'écran). Taille par défaut raisonnable pour TOUT SVG du thème qui
   n'aurait pas encore de règle dédiée — chaque icône existante a déjà
   sa propre règle plus spécifique (30-header.css, 31-mobile-nav-critical.css,
   50-product-card.css, 80-footer.css), qui continue de s'appliquer
   normalement (spécificité de classe > spécificité de balise). Ce
   filet ne change donc rien à l'existant ; il évite seulement qu'un
   futur SVG ajouté sans CSS dédié ne reproduise ce bug. Placé dans le
   CSS critique (chargé immédiatement) pour fermer aussi la fenêtre de
   FOUC qui a causé le bug v3 dans le cas d'un futur oubli similaire. */
svg { width: 1em; height: 1em; }
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; }
}

/* Réserve l'espace de la barre de navigation mobile fixe (Phase 3, voir
   80-footer.css + template-parts/shopini/mobile-bottom-nav.php) pour
   qu'elle ne recouvre jamais le bas du contenu ou du footer. */
@media (max-width: 720px) {
	body.shopini-has-mobile-bottom-nav { padding-bottom: 56px; }
}

/* 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 {
	width: min( calc( 100% - ( var( --sw-container-padding ) * 2 ) ), var( --sw-container ) );
	margin-inline: auto;
}
@media (max-width: 1024px) {
	:root { --sw-container-padding: 20px; }
}
@media (max-width: 767px) {
	:root { --sw-container-padding: 16px; }
}

/* Utilitaire plein écran — même technique "full-bleed" réutilisée par
   plusieurs sections (rails produits, Explorer par catégorie, Catégories
   populaires, Nos marques) pour que tous les blocs de contenu occupent
   la même largeur réelle sur toute la page, sans espace vide ni bord
   qui casse l'alignement visuel d'une section à l'autre. */
.shopini-fullwidth {
	/* 80% plafonné (pas 100vw edge-to-edge) : garde du blanc visible des
	   deux côtés pour le confort visuel sur desktop — y compris sur très
	   grand écran, où 80vw seul deviendrait démesuré (d'où le plafond à
	   1600px). Constaté en test : ce plafond dégrade l'affichage mobile
	   (marges relativement énormes sur un petit écran) — voir la media
	   query ci-dessous qui repasse à 100vw sous 720px, uniquement le
	   desktop est concerné par la limite. */
	width: min(80vw, 1600px);
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	padding-inline: var(--sw-space-24);
}
@media (max-width: 720px) {
	.shopini-fullwidth { width: 100vw; padding-inline: var(--sw-space-16); }
}
/* Mode "Pleine largeur (100%, bord à bord)" : celui qu'on avait
   remplacé par le plafond 80% (Personnaliser > Produits de la page
   d'accueil > "Largeur des sections") — remis en 4e option distincte
   plutôt que comme comportement par défaut, pour que les deux
   coexistent. Vrai 100vw sans plafond, desktop uniquement (mobile déjà
   à 100vw dans tous les modes, voir media query ci-dessus). */
body.shopini-sections-edge .shopini-fullwidth,
body.shopini-sections-edge .shopini-category-explorer__grid-wrap,
body.shopini-sections-edge .shopini-category-rail__scroller {
	width: 100vw;
}
/* Bascule "Largeur contenue" (Personnaliser > Produits de la page
   d'accueil > "Largeur des sections") : neutralise le plein écran pour
   revenir à une mise en page centrée classique, comme le reste du site.
   Couvre les 3 classes qui implémentent le plein écran dans le thème :
   .shopini-fullwidth (utilitaire partagé, Catégories populaires/Nos
   marques), .shopini-category-explorer__grid-wrap et
   .shopini-category-rail__scroller (implémentations dédiées, même
   technique). */
body.shopini-sections-contained .shopini-fullwidth,
body.shopini-sections-contained .shopini-category-explorer__grid-wrap,
body.shopini-sections-contained .shopini-category-rail__scroller {
	width: 100%;
	max-width: var(--sw-container);
	position: static;
	left: auto;
	transform: none;
	margin-inline: auto;
	padding-inline: 20px;
}
/* Mode "Large" : plus large que le contenu (1200px) mais plafonné avant
   d'atteindre 100% du viewport — garde le principe plein écran (centré,
   qui déborde du conteneur normal) mais avec une largeur maximale
   raisonnable plutôt que edge-to-edge. */
body.shopini-sections-wide .shopini-fullwidth,
body.shopini-sections-wide .shopini-category-explorer__grid-wrap,
body.shopini-sections-wide .shopini-category-rail__scroller {
	width: min(100vw, 1350px);
}
/* Le carrousel des rails a besoin de garder son overflow-x (défilement)
   même en mode contenu — seule la largeur/le débordement plein écran
   est neutralisé, pas le comportement carrousel lui-même. */
body.shopini-sections-contained .shopini-category-rail__scroller {
	overflow-x: auto;
}

/* @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. */
/* Bug corrigé (constaté en test) : currentColor s'adaptait mal sur un
   <button> natif dans certains contextes (fond clair), donnant un texte
   blanc illisible sur fond clair. Couleur explicite pour garantir la
   lisibilité partout ; currentColor reste utilisé pour la bordure
   uniquement (adapté au fond clair/sombre sans variante séparée). */
.shopini-btn--secondary {
	background: transparent;
	border-color: currentColor;
	color: var(--sw-ink);
}
.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; }

/* Sélecteur de catégorie — même hauteur/bordure que le champ de
   recherche, accolé à gauche de celui-ci (façon Amazon), le tout
   toujours dans le même groupe visuel avant le bouton submit. */
.shopini-search-panel__category {
	flex: 0 0 auto;
	max-width: 160px;
	height: var(--sw-control-lg);
	padding-inline: var(--sw-space-12);
	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-muted);
	font-size: var(--sw-font-size-sm);
}
.shopini-search-panel__category + .shopini-search-panel__input {
	border-radius: 0;
	border-inline-start: var(--sw-border-width) solid var(--sw-border);
}

/* Lien "Devenir vendeur" — texte simple, pas un bouton plein (le
   panier/compte restent les actions principales du header). */
.shopini-header__become-vendor {
	flex: 0 0 auto;
	white-space: nowrap;
	color: var(--sw-ink);
	font-size: var(--sw-font-size-sm);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.shopini-header__become-vendor:hover { color: var(--sw-brand-ink); }

/* =========================================================
   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);
}
/* Bug corrigé (constaté en test) : sans display:flex ici, le bouton
   "Catégories ▾" (élément de bloc) se retrouvait sur sa propre ligne,
   au-dessus du menu wp_nav_menu (SHOP | Espace Vendeur | Vendez avec
   nous) au lieu d'être aligné avec lui sur la même ligne — façon
   deuxième barre du header Amazon. */
.shopini-nav {
	display: flex;
	align-items: center;
	gap: var(--sw-space-24);
}
.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. Le sélecteur de
	   catégorie disparaît (pas de perte fonctionnelle : le champ
	   soumet toujours "toutes les catégories" par défaut, un <select>
	   masqué en CSS reste soumis avec le formulaire) — sur un écran
	   étroit, la barre de recherche elle-même a besoin de toute la
	   largeur disponible pour un catalogue de 37k produits. */
	.shopini-search-panel { padding-bottom: 4px; }
	.shopini-search-panel__form { max-width: none; }
	.shopini-search-panel__category { display: none; }
	.shopini-search-panel__category + .shopini-search-panel__input { border-radius: var(--sw-radius-sm) 0 0 var(--sw-radius-sm); border-inline-start: var(--sw-border-width) solid var(--sw-border); }

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

	/* "Devenir vendeur" reste un lien texte desktop uniquement — à côté
	   d'icônes compactes en mobile, un texte casserait l'alignement.
	   Accessible autrement en mobile via le menu principal/footer. */
	.shopini-header__become-vendor { display: none; }

	/* 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 */
/* =========================================================
   Barre de navigation mobile fixe (Phase 3) — Accueil, Catégories,
   Panier, Compte. Mobile uniquement ; jamais affichée en mode
   distraction-free (voir footer.php, qui ne l'inclut pas dans cette
   branche).

   MARQUÉ CRITIQUE (chargé immédiatement, pas en CSS différé) : c'est
   un élément de chrome toujours visible à l'écran (position: fixed),
   exactement comme le header (voir 30-header.css, également
   critique) — pas du contenu de bas de page ordinaire. Le CSS
   "principal" (main.*.css) est volontairement chargé en différé pour
   la performance (voir Shopini_Performance::make_main_css_non_blocking()),
   ce qui crée une brève fenêtre sans style à l'affichage initial. Sans
   passage en critique, cette fenêtre laissait apparaître la nav sans
   son display:none par défaut ni la taille contrainte des icônes SVG
   — bug constaté en test (icônes énormes, nav visible sur desktop),
   corrigé en déplaçant ces règles ici.
   ========================================================= */
.shopini-mobile-bottom-nav {
	display: none;
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: var(--sw-z-raised);
	background: var(--sw-surface);
	border-top: var(--sw-border-width) solid var(--sw-border);
	box-shadow: 0 -4px 16px rgba(22, 21, 28, .06);
}
@media (max-width: 720px) {
	.shopini-mobile-bottom-nav { display: flex; }
}
.shopini-mobile-bottom-nav__item {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding-block: var(--sw-space-8);
	color: var(--sw-muted);
	font-size: 11px;
	text-align: center;
}
.shopini-mobile-bottom-nav__item.is-current { color: var(--sw-brand-ink); }
.shopini-mobile-bottom-nav__item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shopini-mobile-bottom-nav__badge {
	position: absolute;
	top: 2px;
	left: 50%;
	transform: translateX(6px);
	min-width: 15px;
	height: 15px;
	padding-inline: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--sw-brand);
	color: var(--sw-on-brand);
	font-size: 9px;
	line-height: 1;
}

/* @critical */
/* =========================================================
   Hero (page d'accueil) — carrousel (Personnaliser > Hero >
   "Nombre de bannières", 1/3/5). En mode 1 bannière (défaut), .shopini-hero
   ne contient qu'un seul .shopini-hero__slide toujours actif — visuellement
   identique à l'ancien Hero non-carrousel, aucune régression.
   ========================================================= */
.shopini-hero {
	position: relative;
	overflow: hidden;
	color: var(--sw-ink);
	/* Bug corrigé (constaté en test) : le plafond "76vh" rendait la
	   moitié supérieure de la plage du curseur (480-900px) totalement
	   inopérante sur beaucoup d'écrans desktop réels (76vh d'un
	   viewport de 855px = 649,8px, plus petit que la moindre valeur du
	   curseur au-delà de 650px) — bouger le curseur au-dessus de ce
	   seuil ne changeait jamais rien à l'affichage. La plage 480-900px
	   du curseur est déjà un garde-fou raisonnable en soi, pas besoin
	   d'un second plafond qui vient la neutraliser. Le plafond reste en
	   revanche sur mobile ci-dessous, où les écrans sont réellement
	   plus courts et où cette protection garde son utilité. */
	min-height: var(--sw-hero-height, 760px);
}
.shopini-hero__slide {
	position: absolute;
	inset: 0;
	background-color: var(--sw-ink);
	background-size: cover;
	background-position: center;
	text-align: left;
	display: grid;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease;
	z-index: 0;
}
.shopini-hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
/* 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.
   Intensité réglable (Personnaliser > Hero > "Intensité du voile") au
   lieu d'un voile fixe : à 0%, disparaît complètement (à utiliser en
   connaissance de cause si la photo est déjà sombre, comme sur la
   bannière de référence Shopini fournie). */
.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%);
	opacity: var(--sw-hero-overlay-intensity, 1);
	pointer-events: none;
}
.shopini-hero__inner { position: relative; z-index: 1; 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); }

/* Flèches précédent/suivant — visibles uniquement en mode carrousel
   (plusieurs bannières configurées), jamais en mode bannière unique. */
.shopini-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: none;
	background: rgba(255, 255, 255, .85);
	color: var(--sw-ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.shopini-hero__arrow:hover { background: #fff; }
.shopini-hero__arrow--prev { left: var(--sw-space-24); }
.shopini-hero__arrow--next { right: var(--sw-space-24); }

.shopini-hero__dots {
	position: absolute;
	bottom: var(--sw-space-24);
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: var(--sw-space-8);
}
.shopini-hero__dot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	border: none;
	background: rgba(255, 255, 255, .5);
	cursor: pointer;
	padding: 0;
}
.shopini-hero__dot.is-active { background: #fff; width: 22px; border-radius: 999px; }

.shopini-hero__stats { position: absolute; z-index: 2; inset-inline: 0; bottom: 0; }

@media (min-width: 721px) and (max-width: 1024px) {
	.shopini-hero { min-height: var(--sw-hero-height-tablet, 560px); }
}
@media (max-width: 720px) {
	.shopini-hero { min-height: var(--sw-hero-height-mobile, 480px); }
	.shopini-hero__slide { 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); }
	.shopini-hero__arrow { width: 36px; height: 36px; font-size: 1.2rem; }
	.shopini-hero__title { font-size: clamp(1.85rem, 8vw, 2.65rem); }
	.shopini-hero__subtitle { font-size: 1rem; margin-bottom: var(--sw-space-24); }
}

/* Chevauchement façon Amazon (référence fournie) : la section qui suit
   le Hero remonte pour recouvrir légèrement le bas de la bannière,
   plutôt qu'un simple empilement bord à bord. Cible ".shopini-hero + *"
   (le sélecteur adjacent) plutôt qu'une classe de section précise :
   fonctionne quelle que soit la section placée juste après le Hero
   dans Personnaliser > Ordre des sections de l'accueil. */
/* !important justifié ici : le rôle de cette règle est précisément
   d'annuler la marge naturelle de la section qui suit (chacune a la
   sienne, ex. .shopini-category-explorer { margin-block: 48px }) — sans
   ça, à spécificité égale, la règle de la section elle-même l'emportait
   silencieusement selon l'ordre de chargement des fichiers CSS (bug
   constaté en test : le chevauchement ne s'affichait pas du tout). */
.shopini-hero + * {
	position: relative;
	z-index: 2;
	margin-top: -140px !important;
}
@media (max-width: 720px) {
	.shopini-hero + * { margin-top: -70px !important; }
}

/* =========================================================
   Shopini Swift — Sections marketplace de l'accueil (Phase 2)
   Bannières secondaires, Ventes Flash, rails de recommandations,
   Boutiques officielles. Toutes ces sections partagent le même
   rythme vertical que les sections existantes (shopini-container +
   shopini-section-heading, voir 20-base.css / composants existants).
   ========================================================= */

/* ---------- Bannières secondaires ---------- */
.shopini-secondary-banners { margin-block: var(--sw-space-32); }
.shopini-secondary-banners__grid {
	display: grid;
	gap: var(--sw-space-16);
	grid-template-columns: repeat(3, 1fr);
}
.shopini-secondary-banners__grid--1 { grid-template-columns: 1fr; }
.shopini-secondary-banners__grid--2 { grid-template-columns: repeat(2, 1fr); }
.shopini-secondary-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var(--sw-secondary-banner-height, 160px);
	border-radius: var(--sw-radius-lg);
	overflow: hidden;
	background: var(--sw-brand-soft);
	color: var(--sw-ink);
}
.shopini-secondary-banner__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.shopini-secondary-banner__title {
	position: relative;
	z-index: var(--sw-z-raised);
	padding: var(--sw-space-16);
	font-family: var(--sw-font-display);
	font-weight: var(--sw-font-weight-bold);
	font-size: var(--sw-font-size-lg);
	color: var(--sw-on-brand);
	text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
@media (max-width: 720px) {
	.shopini-secondary-banners__grid,
	.shopini-secondary-banners__grid--2,
	.shopini-secondary-banners__grid--3 { grid-template-columns: 1fr; }
	/* Bug corrigé (repéré en relecture) : aucune réduction de hauteur
	   spécifique au mobile n'existait — jusqu'à 320px par bannière,
	   empilées en une seule colonne, ça pouvait représenter près d'1000px
	   de défilement rien que pour 3 bannières secondaires avant
	   d'atteindre le contenu réel. */
	.shopini-secondary-banner { min-height: min(var(--sw-secondary-banner-height, 160px), 140px); }
}

/* ---------- Ventes Flash ---------- */
.shopini-flash-sales {
	margin-block: var(--sw-space-48);
	padding: var(--sw-space-24);
	border-radius: var(--sw-radius-lg);
	background: linear-gradient(135deg, var(--sw-brand-ink), var(--sw-brand));
}
.shopini-flash-sales__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sw-space-16);
}
.shopini-flash-sales .shopini-section-heading__eyebrow {
	color: var(--sw-overlay-surface-strong);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
}
.shopini-flash-sales .shopini-section-title { color: var(--sw-on-brand); font-size: 1.6rem; }
/* Compte à rebours : chiffres XL sur fond sombre, façon Jumia — pas
   la version discrète utilisée sur la fiche produit (voir
   .shopini-product-opportunity de base, ici volontairement surchargée
   dans ce contexte précis). */
.shopini-flash-sales .shopini-product-opportunity {
	display: flex;
	align-items: center;
	gap: var(--sw-space-16);
	background: transparent;
	padding: 0;
}
.shopini-flash-sales .shopini-product-opportunity__copy {
	/* Masqué visuellement seulement (pas display:none) : ce bloc porte
	   l'id référencé par aria-labelledby sur la section countdown — le
	   retirer de l'arbre d'accessibilité casserait son nom accessible
	   pour les lecteurs d'écran. Le titre de section visible suffit
	   visuellement, donc pas de doublon affiché. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}
.shopini-flash-sales .shopini-product-opportunity__timer { gap: var(--sw-space-8); }
.shopini-flash-sales .shopini-product-opportunity__timer > span {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 52px;
	padding: var(--sw-space-8);
	border-radius: var(--sw-radius-sm);
	background: var(--sw-overlay-strong);
}
.shopini-flash-sales .shopini-product-opportunity__timer b { color: var(--sw-on-brand); font-size: 1.5rem; font-family: var(--sw-font-display); }
.shopini-flash-sales .shopini-product-opportunity__timer small { color: var(--sw-overlay-surface-medium); font-size: 10px; text-transform: uppercase; }
.shopini-flash-sales .shopini-product-opportunity__timer i { color: var(--sw-overlay-surface-medium); }
/* Cartes produit sur fond sombre : surface blanche conservée pour ne
   pas casser la lisibilité prix/titre (voir 50-product-card.css). */
.shopini-flash-sales ul.products { margin-top: var(--sw-space-24); }

/* ---------- Ventes Flash : défilement horizontal façon Amazon plutôt
   qu'une grille figée. Préfixe .woocommerce nécessaire pour égaler/dépasser
   la spécificité de la règle de grille de base (50-product-card.css) —
   sans lui, cette règle perdait silencieusement (même spécificité, mais
   chargée avant dans l'ordre de concaténation des fichiers), et les
   produits s'empilaient sur plusieurs lignes au lieu de défiler (bug
   constaté en test). .shopini-recommendation-rail utilise désormais les
   classes .shopini-category-rail (voir recommendation-rail.php), qui ont
   déjà ce correctif — plus besoin de le dupliquer ici. ---------- */
.woocommerce .shopini-flash-sales ul.products {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: var(--sw-product-card-gap, 16px);
	padding-bottom: var(--sw-space-8); /* Respire au-dessus de la scrollbar native. */
	scrollbar-width: thin;
}
.woocommerce .shopini-flash-sales ul.products::-webkit-scrollbar { height: 6px; }
.woocommerce .shopini-flash-sales ul.products::-webkit-scrollbar-thumb { background: var(--sw-border); border-radius: 999px; }
.woocommerce .shopini-flash-sales ul.products li.product {
	scroll-snap-align: start;
	flex: 0 0 auto;
	width: 220px !important; /* Prime sur le width:100% !important de la grille standard (50-product-card.css). */
}
@media (max-width: 720px) {
	.woocommerce .shopini-flash-sales ul.products li.product { width: 160px !important; }
	.shopini-flash-sales { padding: var(--sw-space-16); }
	.shopini-flash-sales .shopini-product-opportunity__timer > span { min-width: 44px; }
	.shopini-flash-sales .shopini-product-opportunity__timer b { font-size: 1.2rem; }
}

/* ---------- Rails de recommandations (Meilleures ventes, Populaire) ---------- */
.shopini-recommendation-rail { margin-block: var(--sw-space-48); }

/* ---------- Explorer par catégorie (grille dense façon Amazon) ---------- */
.shopini-category-explorer { margin-block: var(--sw-space-48); }
.shopini-category-explorer__title { margin-bottom: var(--sw-space-24); }
/* Plein écran (demande explicite, cohérent avec les rails produits et
   "Nos marques" ci-dessous) : même technique full-bleed que
   .shopini-category-rail__scroller, sans le défilement horizontal —
   ici c'est une vraie grille statique, pas un carrousel. */
.shopini-category-explorer__grid-wrap {
	width: min(80vw, 1600px);
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	padding-inline: var(--sw-space-24);
}
@media (max-width: 720px) {
	.shopini-category-explorer__grid-wrap { width: 100vw; padding-inline: var(--sw-space-16); }
}
.shopini-category-explorer__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--sw-space-16);
}
.shopini-category-explorer__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.shopini-category-explorer__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.shopini-category-explorer__card--extra { display: none; }
.shopini-category-explorer__grid.is-revealed .shopini-category-explorer__card--extra { display: block; }
.shopini-category-explorer__reveal-wrap { text-align: center; margin-top: var(--sw-space-24); }
.shopini-category-explorer__card {
	padding: var(--sw-space-16);
	border: var(--sw-border-width) solid var(--sw-border);
	border-radius: var(--sw-radius);
	background: var(--sw-surface);
}
.shopini-category-explorer__name {
	margin: 0 0 var(--sw-space-12);
	font-weight: var(--sw-font-weight-bold);
	font-size: var(--sw-font-size-md);
	color: var(--sw-ink);
}
.shopini-category-explorer__tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sw-space-4);
}
.shopini-category-explorer__tile {
	display: block;
	aspect-ratio: 1;
	border-radius: var(--sw-radius-sm);
	overflow: hidden;
	background: var(--sw-bg);
}
.shopini-category-explorer__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.shopini-category-explorer__tile-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--sw-border), var(--sw-bg));
}
.shopini-category-explorer__more {
	display: inline-block;
	margin-top: var(--sw-space-12);
	color: var(--sw-brand-ink);
	font-size: var(--sw-font-size-sm);
	font-weight: 600;
}
.shopini-category-explorer__more:hover { text-decoration: underline; }
@media (max-width: 1024px) {
	.shopini-category-explorer__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.shopini-category-explorer__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Boutiques officielles ---------- */
.shopini-official-stores { margin-block: var(--sw-space-48); }
.shopini-official-stores__grid {
	display: grid;
	gap: var(--sw-space-16);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.shopini-official-store {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sw-space-8);
	padding: var(--sw-space-24) var(--sw-space-16);
	border: var(--sw-border-width) solid var(--sw-border);
	border-radius: var(--sw-radius);
	background: var(--sw-surface);
	text-align: center;
	transition: box-shadow var(--sw-duration-normal) var(--sw-ease-standard), transform var(--sw-duration-normal) var(--sw-ease-standard);
}
.shopini-official-store:hover { box-shadow: var(--sw-shadow); transform: translateY(-4px); }
.shopini-official-store__avatar {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--sw-brand-soft);
	color: var(--sw-brand-ink);
	font-family: var(--sw-font-display);
	font-weight: var(--sw-font-weight-bold);
	font-size: 1.2rem;
}
.shopini-official-store__name {
	font-weight: 600;
	color: var(--sw-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}
.shopini-official-store__meta {
	display: flex;
	align-items: center;
	gap: var(--sw-space-8);
	font-size: var(--sw-font-size-sm);
	color: var(--sw-muted);
}
.shopini-official-store__rating { color: var(--sw-opportunity); font-weight: 600; }

/* =========================================================
   Rails "une ligne par catégorie" (accueil) — plein écran,
   toujours une seule ligne qui défile (jamais de retour à la
   ligne, même avec 12 produits sélectionnés). Voir
   template-parts/shopini/category-rail.php.
   ========================================================= */
.shopini-category-rail { margin-block: var(--sw-space-48); }
.shopini-category-rail__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sw-space-16);
	margin-bottom: var(--sw-space-16);
}
.shopini-category-rail__more {
	flex: 0 0 auto;
	font-size: var(--sw-font-size-sm);
	font-weight: 600;
	color: var(--sw-brand-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Plein écran : déborde volontairement de .shopini-container (technique
   "full-bleed" standard) — le contenu s'étend d'un bord à l'autre du
   viewport, quel que soit l'endroit où ce template est appelé. */
.shopini-category-rail__scroller {
	width: min(80vw, 1600px);
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	padding-inline: var(--sw-space-24);
}
.shopini-category-rail__scroller .woocommerce ul.products,
.shopini-category-rail__scroller ul.products {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: var(--sw-product-card-gap, 16px);
	padding-bottom: var(--sw-space-8);
	scrollbar-width: thin;
}
/* 6 cartes visibles sur desktop, quel que soit le nombre réellement
   sélectionné (défilement pour voir les suivantes). */
.shopini-category-rail__scroller .woocommerce ul.products li.product,
.shopini-category-rail__scroller ul.products li.product {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - (5 * var(--sw-space-16))) / 6) !important;
	width: auto !important;
}
@media (max-width: 720px) {
	.shopini-category-rail__scroller { width: 100vw; padding-inline: var(--sw-space-16); }
	/* Nombre de produits visibles réglable (décimal) dans Personnaliser
	   > Produits de la page d'accueil > "Produits visibles sur mobile" —
	   2.5 par défaut : le début de la carte suivante reste visible pour
	   signaler qu'on peut faire glisser, plutôt qu'un nombre entier qui
	   masquerait complètement cet indice visuel. */
	.shopini-category-rail__scroller .woocommerce ul.products li.product,
	.shopini-category-rail__scroller ul.products li.product {
		flex: 0 0 calc((100% / var(--sw-rail-mobile-visible, 2.5)) - var(--sw-space-16)) !important;
	}
}

/* =========================================================
   Grilles produits & articles
   ========================================================= */
.shopini-main { padding-block: var(--sw-space-96); }
/* Bug corrigé (constaté en test, vide de ~190px entre "Explorer par
   catégorie" et les rails produits) : ce padding-top de 96px avait du
   sens quand <main> démarrait juste après le Hero. Sur l'accueil,
   plusieurs sections (bannières, catégories, Explorer par catégorie)
   s'affichent maintenant AVANT <main> et apportent déjà leur propre
   respiration verticale (margin-block: 48px chacune) — le padding-top
   de <main> s'additionnait par-dessus au lieu de s'y substituer. Retiré
   uniquement sur l'accueil (body.home) : les autres pages (boutique,
   catégorie...) où <main> reste le tout premier élément gardent leur
   padding-top normal. */
body.home .shopini-main { padding-block-start: 0; }

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

/* =========================================================
   Badges "Produit externe" / "Vérifié" — coin haut-DROIT de la
   vignette (le badge promo .onsale reste seul maître du coin
   haut-gauche, voir règle ci-dessus : jamais les deux ensemble au
   même endroit). Couleurs volontairement différentes de --sw-brand
   pour ne jamais être confondus avec une promo ou un badge marque.
   ========================================================= */
.woocommerce ul.products li.product .shopini-product-badge {
	position: absolute;
	top: var(--sw-space-12);
	right: var(--sw-space-12);
	z-index: var(--sw-z-raised);
	padding: var(--sw-space-4) var(--sw-space-12);
	border-radius: 999px;
	font-size: var(--sw-font-size-sm);
	line-height: 1.5;
	font-weight: 600;
}
.woocommerce ul.products li.product .shopini-product-badge--external {
	background: var(--sw-ink);
	color: var(--sw-on-brand);
}
.woocommerce ul.products li.product .shopini-product-badge--verified {
	background: var(--sw-success-ink);
	color: var(--sw-on-brand);
}

/* =========================================================
   Vendeur (nom + note) — juste sous le titre, avant le prix.
   Reste dans le flux normal (pas d'absolute) : le prix garde son
   "margin-top: auto" qui le plaque en bas de la carte quel que soit
   le nombre de lignes au-dessus.
   ========================================================= */
.woocommerce ul.products li.product .shopini-product-card__vendor {
	display: flex;
	align-items: center;
	gap: var(--sw-space-8);
	padding: var(--sw-space-4) var(--sw-space-16) 0;
	font-size: var(--sw-font-size-sm);
	color: var(--sw-muted);
}
.woocommerce ul.products li.product .shopini-product-card__vendor-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.woocommerce ul.products li.product .shopini-product-card__vendor-rating {
	flex: 0 0 auto;
	color: var(--sw-opportunity);
	font-weight: 600;
}
.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); }

/* =========================================================
   Bloc vendeur — fiche produit (Phase 4). Même niveau visuel que
   le prix (police lisible, pas une petite mention grise) : placé
   juste sous le titre, avant .shopini-product-header__meta.
   ========================================================= */
.shopini-product-header__vendor-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sw-space-12);
}
.shopini-product-header__vendor {
	display: inline-flex;
	align-items: center;
	gap: var(--sw-space-8);
	flex-wrap: wrap;
	font-size: var(--sw-font-size-md);
	color: var(--sw-ink);
}
.shopini-product-header__vendor strong { color: var(--sw-brand-ink); }
.shopini-product-header__vendor-rating { color: var(--sw-opportunity); font-weight: 600; }
.shopini-product-header__badge { align-self: start; }

/* Badge externe/vérifié réutilisé ici hors contexte .onsale (voir
   50-product-card.css pour la version vignette de boucle). */
.shopini-product-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--sw-space-4) var(--sw-space-12);
	border-radius: 999px;
	font-size: var(--sw-font-size-sm);
	font-weight: 600;
}
.shopini-product-badge--external { background: var(--sw-ink); color: var(--sw-on-brand); }
.shopini-product-badge--verified { background: var(--sw-success-ink); color: var(--sw-on-brand); }
.shopini-product-header__vendor-badge { font-size: 11px; padding: 2px var(--sw-space-8); }

/* Badge "Boutique Officielle" — activé manuellement par vendeur (voir
   core/vendor-admin.php), affiché tout en haut de la fiche produit,
   avant la galerie (bleu, façon référence Amazon/Jumia — voir capture
   fournie). */
.shopini-official-badge {
	display: inline-block;
	margin-bottom: var(--sw-space-12);
	padding: var(--sw-space-4) var(--sw-space-12);
	border-radius: var(--sw-radius-sm);
	background: #2563eb;
	color: #fff;
	font-size: var(--sw-font-size-sm);
	font-weight: 600;
}

/* =========================================================
   Encadré produit externe — juste avant le bouton d'action
   (Phase 4). Volontairement visible, pas une petite mention.
   ========================================================= */
.shopini-external-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--sw-space-12);
	padding: var(--sw-space-16);
	margin-block: var(--sw-space-16);
	border: var(--sw-border-width) solid var(--sw-border);
	border-radius: var(--sw-radius);
	background: var(--sw-bg);
}
.shopini-external-notice__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--sw-brand-soft);
	color: var(--sw-brand-ink);
	font-weight: 700;
}
.shopini-external-notice p { margin: 0; color: var(--sw-muted); font-size: var(--sw-font-size-sm); }

/* =========================================================
   Note panier multivendeur (Phase 4) — purement informative.
   ========================================================= */
.shopini-cart-vendor-note {
	padding: var(--sw-space-12) var(--sw-space-16);
	margin-bottom: var(--sw-space-16);
	border: var(--sw-border-width) solid var(--sw-border);
	border-radius: var(--sw-radius-sm);
	background: var(--sw-brand-soft);
	color: var(--sw-brand-ink);
	font-size: var(--sw-font-size-sm);
}

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

/* =========================================================
   Sidebar de filtres — pages catalogue UNIQUEMENT (boutique,
   catégorie, étiquette, recherche produit ; jamais l'accueil ni la
   fiche produit). Voir core/facets.php et
   Shopini_Compat_Woocommerce::wrapper_start().
   ========================================================= */

/* Mise en page à 2 colonnes sur desktop. */
.shopini-catalog-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--sw-space-32);
	align-items: start;
}
.shopini-catalog-layout__content { min-width: 0; } /* Empêche la grille produits de faire déborder la colonne. */

.shopini-facets-mobile-trigger,
.shopini-facets-sidebar__close,
.shopini-facets-overlay { display: none; }

.shopini-facets-sidebar {
	position: sticky;
	top: calc(76px + var(--sw-space-16)); /* Sous le header sticky. */
	max-height: calc(100vh - 76px - var(--sw-space-32));
	overflow-y: auto;
	padding: var(--sw-space-16);
	border: var(--sw-border-width) solid var(--sw-border);
	border-radius: var(--sw-radius);
	background: var(--sw-surface);
}
.shopini-facets-sidebar__header { display: none; } /* Visible uniquement dans le tiroir mobile. */

.shopini-facets__group {
	padding-block: var(--sw-space-16);
	border-bottom: var(--sw-border-width) solid var(--sw-border);
}
.shopini-facets__group:first-child { padding-top: 0; }
.shopini-facets__group:last-of-type { border-bottom: none; }
.shopini-facets__title {
	margin: 0 0 var(--sw-space-12);
	font-size: var(--sw-font-size-md);
	font-weight: var(--sw-font-weight-bold);
	color: var(--sw-ink);
}

/* Navigation par sous-catégories : simples liens. */
.shopini-facets__category-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sw-space-8); }
.shopini-facets__category-list a {
	display: flex;
	justify-content: space-between;
	gap: var(--sw-space-8);
	color: var(--sw-ink);
	font-size: var(--sw-font-size-sm);
}
.shopini-facets__category-list a:hover { color: var(--sw-brand-ink); }

/* Cases à cocher (marque, vendeur) et boutons radio (note) — liste
   défilante au-delà de 6 éléments, comme les captures de référence. */
.shopini-facets__search {
	width: 100%;
	height: var(--sw-control-lg);
	padding-inline: var(--sw-space-12);
	margin-bottom: var(--sw-space-8);
	border: var(--sw-border-width) solid var(--sw-border);
	border-radius: var(--sw-radius-pill, 999px);
}
.shopini-facets__checklist,
.shopini-facets__radiolist {
	display: flex;
	flex-direction: column;
	gap: var(--sw-space-8);
	max-height: 210px;
	overflow-y: auto;
}
.shopini-facets__checkbox,
.shopini-facets__radio {
	display: flex;
	align-items: center;
	gap: var(--sw-space-8);
	font-size: var(--sw-font-size-sm);
	color: var(--sw-ink);
	cursor: pointer;
}
.shopini-facets__checkbox span:first-of-type,
.shopini-facets__radio span:first-of-type { flex: 1; }
.shopini-facets__count { color: var(--sw-muted); font-size: var(--sw-font-size-sm); }

/* Double curseur de prix : deux <input type="range"> superposés sur la
   même piste, chacun ne peut agir que sur sa poignée grâce à
   pointer-events ciblé + une zone de saisie tactile large uniquement
   sur le thumb (voir ::-webkit-slider-thumb / ::-moz-range-thumb). */
.shopini-facets__price-slider {
	position: relative;
	height: 32px;
	margin-bottom: var(--sw-space-8);
}
.shopini-facets__price-track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 4px;
	transform: translateY(-50%);
	background: var(--sw-border);
	border-radius: 999px;
}
.shopini-facets__price-track-fill {
	position: absolute;
	height: 100%;
	background: var(--sw-brand);
	border-radius: 999px;
}
.shopini-facets__price-range {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	margin: 0;
	background: transparent;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.shopini-facets__price-range::-webkit-slider-thumb {
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--sw-brand);
	border: 2px solid var(--sw-on-brand);
	box-shadow: var(--sw-shadow);
	cursor: pointer;
}
.shopini-facets__price-range::-moz-range-thumb {
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--sw-brand);
	border: 2px solid var(--sw-on-brand);
	box-shadow: var(--sw-shadow);
	cursor: pointer;
}
.shopini-facets__price-inputs {
	display: flex;
	align-items: center;
	gap: var(--sw-space-8);
}
.shopini-facets__price-inputs label { flex: 1; }
.shopini-facets__price-inputs input {
	width: 100%;
	height: var(--sw-control-lg);
	padding-inline: var(--sw-space-8);
	border: var(--sw-border-width) solid var(--sw-border);
	border-radius: var(--sw-radius-sm);
}

.shopini-facets__submit { width: 100%; margin-top: var(--sw-space-16); }
.shopini-facets__reset {
	display: block;
	text-align: center;
	margin-top: var(--sw-space-8);
	color: var(--sw-muted);
	font-size: var(--sw-font-size-sm);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =========================================================
   Tiroir mobile — sous 1024px, la sidebar quitte le flux normal et
   devient un panneau plein écran qui glisse depuis la gauche, ouvert
   via le bouton "Filtres" (toujours visible, lui, contrairement à la
   sidebar qui reste cachée par défaut).
   ========================================================= */
@media (max-width: 1024px) {
	.shopini-catalog-layout { display: block; }
	.shopini-facets-mobile-trigger {
		display: inline-flex;
		align-items: center;
		gap: var(--sw-space-8);
		margin-bottom: var(--sw-space-16);
	}
	.shopini-facets-sidebar {
		position: fixed;
		inset-block: 0;
		left: 0;
		width: min(320px, 85vw);
		max-height: none;
		z-index: 100;
		border-radius: 0;
		transform: translateX(-100%);
		transition: transform var(--sw-duration-normal) var(--sw-ease-standard);
	}
	.shopini-facets-sidebar.is-open { transform: translateX(0); }
	.shopini-facets-sidebar__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: var(--sw-font-weight-bold);
		padding-bottom: var(--sw-space-16);
		margin-bottom: var(--sw-space-8);
		border-bottom: var(--sw-border-width) solid var(--sw-border);
	}
	.shopini-facets-sidebar__close {
		width: 32px;
		height: 32px;
		font-size: 20px;
		line-height: 1;
		background: none;
		border: none;
		cursor: pointer;
	}
	.shopini-facets-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99;
		background: rgba(22, 21, 28, .4);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--sw-duration-normal) var(--sw-ease-standard);
	}
	.shopini-facets-overlay.is-open { opacity: 1; pointer-events: auto; }
}

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

/* =========================================================
   CTA vendeur (Phase 3) — bandeau plein largeur juste avant le
   footer institutionnel, jamais affiché sans URL renseignée (voir
   template-parts/shopini/footer-vendor-cta.php).
   ========================================================= */
.shopini-footer-vendor-cta { background: var(--sw-ink); color: var(--sw-on-brand); }
.shopini-footer-vendor-cta__inner {
	padding-block: var(--sw-space-32);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sw-space-16);
}
.shopini-footer-vendor-cta__title { display: block; font-size: var(--sw-font-size-lg); }
.shopini-footer-vendor-cta__text { margin: var(--sw-space-4) 0 0; color: var(--sw-overlay-surface-medium); }

/* =========================================================
   Garanties (Phase 3) — juste sous le footer institutionnel.
   ========================================================= */
.shopini-footer-guarantees { border-top: var(--sw-border-width) solid var(--sw-border); background: var(--sw-bg); }
.shopini-footer-guarantees__inner {
	padding-block: var(--sw-space-16);
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--sw-space-24);
}
.shopini-footer-guarantees__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sw-space-8);
	color: var(--sw-muted);
	font-size: var(--sw-font-size-sm);
}

/* Barre de navigation mobile fixe (Phase 3) : voir
   31-mobile-nav-critical.css. Déplacée hors de ce fichier — c'est un
   élément de chrome toujours visible à l'écran (position fixed), pas
   du contenu de pied de page classique en bas de flux ; elle doit
   donc charger avec le CSS critique comme le header, sans quoi elle
   s'affiche brièvement sans ses règles de mise en page (display:none
   par défaut, taille des icônes) le temps que le CSS différé arrive —
   un vrai bug constaté en test, corrigé ici. */

/* =========================================================
   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;
}
/* Mode carrousel ("Nos marques") : hérite volontairement des mêmes
   variables que les rails produits (--sw-product-card-gap réglable dans
   Personnaliser > Apparence des cartes produit, --sw-rail-mobile-visible
   dans Personnaliser > Produits de la page d'accueil) — un seul réglage
   contrôle l'écart/la densité mobile sur tous les carrousels du thème,
   produits ou marques, pas un réglage séparé à dupliquer. Demande
   explicite : plus de plafond de colonnes, tout défile. */
.shopini-featured-categories__grid--carousel {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: var(--sw-product-card-gap, 16px);
	padding-bottom: var(--sw-space-8);
}
.shopini-featured-categories__grid--carousel .shopini-category-card {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - (5 * var(--sw-product-card-gap, 16px))) / 6);
}
@media (max-width: 720px) {
	.shopini-featured-categories__grid--carousel .shopini-category-card {
		flex: 0 0 calc((100% / var(--sw-rail-mobile-visible, 2.5)) - var(--sw-product-card-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-text::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 (min-width: 601px) and (max-width: 1024px) {
	.shopini-promo-banner { min-height: var(--sw-promo-banner-height-tablet, 240px); }
}
@media (max-width: 600px) {
	.shopini-promo-banner {
		margin-block: var(--sw-space-32);
		border-radius: 0;
		min-height: var(--sw-promo-banner-height-mobile, 200px);
	}
	.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; }
}