/**
 * Détails visuels des pages boutique (catalogue, catégories, fiche produit) —
 * même langage visuel que homepage.css : Playfair Display sur les titres,
 * palette Accent, cartes arrondies avec ombre, boutons pilule.
 * Chargé uniquement sur les pages boutique WooCommerce (voir functions.php).
 */

/* ── Titres de page & sections ──────────────────────────────────────────── */
.wp-block-query-title {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 900;
	color: #1f0d5c;
	font-size: clamp(32px, 4vw, 48px);
}
.wc-block-product-collection h2.wp-block-heading {
	font-family: "Playfair Display", Georgia, serif;
	color: #1f0d5c;
}
.woocommerce-breadcrumb {
	font-size: 13px;
	opacity: .65;
}
.woocommerce-breadcrumb a { color: #1f0d5c; }

/* Liste des catégories sous le titre d'archive produit — pastilles à la
   suite les unes des autres plutôt que la liste à puces par défaut du bloc
   "Catégories" (wp:categories). La catégorie courante (.current-cat, déjà
   posée par le bloc) reprend le style plein utilisé pour l'état survol. */
.hx-category-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 28px;
	/* Padding controlled from the block's own "Padding" setting in the editor
	   (currently spacing|30 all sides) — not set here, so it isn't fighting
	   that inline style. */
}
/* The block renders the count as plain text after the link, inside the same
   <li> — the whole <li> (not just the <a>) is styled as the pill so the
   count reads as part of it instead of trailing outside it. */
.hx-category-pills li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 7px 18px;
	border-radius: 32px;
	background: #fff;
	border: 1px solid rgba(31, 13, 92, 0.12);
	font-size: 13px;
	color: #1f0d5c;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.hx-category-pills a {
	font-weight: 500;
	color: inherit;
	text-decoration: none;
}
.hx-category-pills li:hover,
.hx-category-pills li.current-cat {
	background: #1f0d5c;
	border-color: #1f0d5c;
	color: #fff;
}

/* Titre produit — h2 en grille de catalogue, h1 en fiche produit. Noir fixe,
   volontairement pas la couleur du produit (--hx-product-color) : seul le
   bouton la reprend, voir plus bas. Scopé aux pages boutique (single-product,
   catalogue, catégorie) : shop.css se charge maintenant aussi sur
   panier/checkout/mon compte (pour les boutons WooCommerce, voir plus bas),
   où .wp-block-post-title est le titre de PAGE (ex. "Mon compte", blanc sur
   la bannière sombre) — sans ce scope il repassait en noir là aussi. */
.single-product .wp-block-post-title,
.single-product .wp-block-post-title a,
.post-type-archive-product .wp-block-post-title,
.post-type-archive-product .wp-block-post-title a,
.tax-product_cat .wp-block-post-title,
.tax-product_cat .wp-block-post-title a {
	font-family: "Playfair Display", Georgia, serif;
	color: #000;
	text-decoration: none;
}
.single-product h1.wp-block-post-title,
.post-type-archive-product h1.wp-block-post-title,
.tax-product_cat h1.wp-block-post-title { font-weight: 900; font-size: clamp(28px, 3vw, 40px); }

/* Prix — même choix : noir fixe, pas la couleur du produit. */
.wc-block-components-product-price .woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--manrope);
	color: #000;
	font-weight: 700;
}

/* Libellé "Durée" (sélecteur de variation WooCommerce) — même poids que le
   libellé "Date"/"Dates" du sélecteur de créneau (.hx-slot-selector-label,
   voir hx-slot-selector.css), pour que les deux labels soient visuellement
   cohérents l'un sous l'autre. */
.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
	font-weight: 600;
}

/* ── Cartes produit (catalogue + "Produits similaires") ─────────────────── */
.wc-block-product {
	background: #fff;
	border-radius: 20px;
	padding: 20px !important;
	box-shadow: 0 4px 24px rgba(31,13,92,.08);
	transition: transform .2s, box-shadow .2s;
}
.wc-block-product:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 48px rgba(31,13,92,.14);
}
.wc-block-components-product-image {
	border-radius: 14px;
	overflow: hidden;
	background: #FDF0E6;
	margin-bottom: 12px;
}

/* Boutons "Voir le produit" / "Ajouter au panier" dans les cartes et la fiche produit */
.wc-block-product .wp-block-button__link,
.wc-block-components-product-button__button {
	border-radius: 32px !important;
	background: #1f0d5c !important;
	font-weight: 600;
}
.wc-block-product .wp-block-button__link:hover,
.wc-block-components-product-button__button:hover {
	background: #F08E80 !important;
}
/* Overrides the fixed hover swap above for a colored card — darkening
   instead of switching to a fixed hue stays visible no matter which color
   was picked (including when it's already the same coral). */
.hx-product-card-color .wp-block-button__link:hover,
.hx-product-card-color .wc-block-components-product-button__button:hover {
	background: var(--hx-product-color, #1f0d5c) !important;
	filter: brightness(0.85);
}

/* Pastilles "public" / "âge" sous le titre — remplacent en HTML les
   pastilles incrustées dans les photos sources (letriangledart.com).
   Champs vides (produit sans info pertinente) : la pastille se masque
   d'elle-même via :empty, plutôt que d'avoir à conditionner le bloc. */
.hx-badge {
	display: inline-block;
	margin: 0;
	padding: 5px 14px;
	border-radius: 32px;
	font-size: 12px;
	font-weight: 600;
}
.hx-badge:empty {
	display: none;
}
.hx-badge-public {
	background: #1f0d5c;
	color: #fff;
}
.hx-badge-age {
	background: #FDF0E6;
	color: #1f0d5c;
}

/* Same two badges, overlaid on the thumbnail in the shop/category listing —
   catalog cards only, .hx-product-thumb-wrap wraps just the product image so
   the badges position against the photo itself, not the whole padded card. */
.hx-product-thumb-wrap {
	position: relative;
}
.hx-product-badges-thumb {
	position: absolute;
	inset: 10px 10px auto 10px;
	margin-top: 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 6px;
	pointer-events: none;
}
.hx-product-badges-thumb .hx-badge {
	font-size: 16px;
	padding: 6px 14px;
}

/* Buttons of a product card pick up its own "public" badge color
   (--hx-product-color, set inline on .hx-product-card-color by
   hx_inject_product_card_color() — see includes/block-bindings-product-display.php)
   instead of the fixed violet default. Falls back to that same violet when a
   product has no color set, so nothing changes for those. Title and price
   deliberately stay black (see rules above) — only buttons take the color.
   Covers the catalog "Voir le produit", the single-product "Ajouter au
   panier"/slot-picker "Choisir son créneau", and each "related products"
   card button — same wrapper class in all three templates. */
.hx-product-card-color .wp-block-button__link,
.hx-product-card-color .wc-block-components-product-button__button {
	background: var(--hx-product-color, #1f0d5c) !important;
}
.hx-product-card-color .hx-slot-open-button:not(:disabled) {
	background: var(--hx-product-color, #1f0d5c);
}
.hx-product-card-color .hx-slot-open-button:not(:disabled):hover {
	background: var(--hx-product-color, #1f0d5c);
	filter: brightness(0.9);
}
/* Disabled ("choisissez d'abord une durée") state: a washed-out version of
   the product's own color rather than the generic violet — `rgba()` can't
   mix with a var() color directly, so opacity on the solid color does the
   same "grayed out" job instead. */
.hx-product-card-color .hx-slot-open-button:disabled {
	background: var(--hx-product-color, #1f0d5c);
	opacity: 0.35;
}

/* ── Fiche produit ─────────────────────────────────────────────────────── */
.woocommerce div.product {
	margin-top: 0;
}
.woocommerce-product-gallery {
	border-radius: 20px;
	overflow: hidden;
	background: #FDF0E6;
	/* WooCommerce's classic gallery script sets this to 1 once its slider
	   finishes initializing — that script never runs on this block theme
	   (no slider needed for a single image), so the inline opacity:0 it
	   ships with in the markup never clears on its own. !important is
	   required to beat that inline style. */
	opacity: 1 !important;
}

/* Sélecteur de quantité */
.wc-block-components-quantity-selector {
	border-radius: 32px !important;
	border-color: rgba(31,13,92,.15) !important;
	overflow: hidden;
}
.wc-block-components-quantity-selector__button:hover { color: #F08E80; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus {
	box-shadow: none;
}

/* Boutons de sélection (durée, public, variation…) en pastille, dans l'esprit
   des pastilles de cours de l'accueil (.hx-cours-pill). Le composant est le
   bloc WooCommerce "Filtre : puces" réutilisé comme sélecteur de variation
   (role="radio", état porté par aria-checked — pas aria-pressed, qu'il ne
   pose jamais). */
.wc-block-product-filter-chips__item {
	border-radius: 20px !important;
	border-color: rgba(31,13,92,.15) !important;
	font-weight: 500;
	transition: background .2s, color .2s, border-color .2s;
}
.wc-block-product-filter-chips__item:hover,
.wc-block-product-filter-chips__item[aria-checked="true"] {
	background: #1f0d5c !important;
	color: #fff !important;
	border-color: #1f0d5c !important;
}
/* Sur une fiche produit colorée, trois nuances de la même couleur produit :
   coché = couleur pleine ; survolé (non coché) = éclairci (mélangé au
   blanc) ; coché + survolé = assombri (mélangé au noir), plus foncé que la
   couleur de base plutôt que la même teinte claire que le survol simple —
   d'où le sélecteur combiné ci-dessous, plus spécifique que les deux autres
   et donc prioritaire sans dépendre de l'ordre dans le fichier. */
.hx-product-card-color .wc-block-product-filter-chips__item[aria-checked="true"] {
	background: var(--hx-product-color, #1f0d5c) !important;
	border-color: var(--hx-product-color, #1f0d5c) !important;
}
.hx-product-card-color .wc-block-product-filter-chips__item:hover {
	background: color-mix(in srgb, var(--hx-product-color, #1f0d5c) 70%, white 30%) !important;
	border-color: color-mix(in srgb, var(--hx-product-color, #1f0d5c) 70%, white 30%) !important;
}
.hx-product-card-color .wc-block-product-filter-chips__item[aria-checked="true"]:hover {
	background: color-mix(in srgb, var(--hx-product-color, #1f0d5c) 80%, black 20%) !important;
	border-color: color-mix(in srgb, var(--hx-product-color, #1f0d5c) 80%, black 20%) !important;
}
/* Redefines the block's own native CSS var (set globally in style.css) to
   the same product color, so the chips component's *own* selected-state
   rule agrees with the !important override above rather than only matching
   it by coincidence. */
.hx-product-card-color {
	--wc-product-filter-chips-selected-background: var(--hx-product-color, var(--wp--preset--color--accent-2));
}

/* Onglet "Informations complémentaires" */
.woocommerce-tabs .tabs { border-bottom: 1px solid rgba(31,13,92,.1); }
.woocommerce-tabs .tabs li a {
	font-family: "Playfair Display", Georgia, serif;
	color: #1f0d5c;
	opacity: .6;
}
.woocommerce-tabs .tabs li.active a,
.woocommerce-tabs .tabs li a:hover { opacity: 1; color: #F08E80; }
.woocommerce-Tabs-panel h2 {
	font-family: "Playfair Display", Georgia, serif;
	color: #1f0d5c;
}

/* Panier / commande / mon compte : le contenu de ces 3 pages hérite du
   contentSize par défaut du thème (1000px, theme.json) via le bloc
   wp:post-content de leur modèle de page — élargi ici à la valeur wideSize
   du thème (1240px), sans toucher au réglage global qui impacterait aussi
   les pages de contenu classiques (ex. "Qui sommes-nous ?"). */
.woocommerce-account .wp-block-post-title,
.woocommerce-account main .woocommerce,
.woocommerce-cart .wp-block-post-title,
.woocommerce-cart main .woocommerce,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-checkout main .woocommerce {
	max-width: 1240px;
}

/* Mon compte : proportions de la mise en page à 2 colonnes (menu / contenu),
   desktop uniquement (voir la règle mobile juste en dessous). !important :
   le CSS natif de WooCommerce fixe déjà 30%/68% sur ces mêmes classes, avec
   la même spécificité — sans ça notre règle perd le conflit selon l'ordre de
   chargement des feuilles. */
@media (min-width: 769px) {
	.woocommerce-MyAccount-navigation {
		width: 24% !important;
	}
	.woocommerce-MyAccount-content {
		width: 74% !important;
	}
}

/* Mon compte, mobile : les deux colonnes s'empilent. WooCommerce prévoit
   nativement cette règle (woocommerce-smallscreen.css), mais notre propre
   24%/74% !important ci-dessus la gagne à toutes les tailles d'écran faute
   de media query — d'où le menu compressé à ~24% de la largeur d'un mobile
   (chaque lien retombait sur 2-3 lignes). Rendue explicite ici plutôt que de
   dépendre de la présence de cette feuille WooCommerce.

   Le menu lui-même passe d'une liste verticale (un lien par ligne) à des
   pastilles ("pills") en ligne qui reviennent à la ligne si besoin
   (flex-wrap) — plutôt qu'une seule ligne avec défilement horizontal, dont
   le contenu caché hors écran est moins évident à découvrir. Même famille
   visuelle que .hx-auth-tab un peu plus bas dans ce fichier (pilule pleine
   indigo si actif, contour indigo clair sinon). */
@media (max-width: 768px) {
	.woocommerce-MyAccount-navigation,
	.woocommerce-MyAccount-content {
		width: 100% !important;
		float: none !important;
	}

	.woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
		margin: 0 0 1.75rem;
	}

	.woocommerce-MyAccount-navigation li {
		padding: 0 !important;
		list-style: none;
	}

	.woocommerce-MyAccount-navigation li a {
		display: inline-block;
		padding: .55rem 1.1rem;
		border-radius: 999px;
		border: 1px solid color-mix(in srgb, #1f0d5c 25%, transparent);
		background: #fff;
		color: #1f0d5c;
		font-size: .85rem;
		font-weight: 600;
		text-decoration: none !important;
		white-space: nowrap;
	}

	.woocommerce-MyAccount-navigation li.is-active a {
		background: #1f0d5c;
		color: #fff;
		border-color: #1f0d5c;
	}
}

/* Mon compte, déconnecté : onglets "Se connecter" / "Créer un compte" —
   voir woocommerce/myaccount/form-login.php (override du template natif) et
   assets/js/account-auth-tabs.js pour la bascule. Même famille visuelle que
   les filtres pilule du bloc "Prochains créneaux disponibles"
   (.hx-avail-filter) : pilule pleine indigo quand actif, contour indigo clair
   sinon. */
.hx-auth-tabs {
	max-width: 420px;
	margin: 0 auto;
}

.hx-auth-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	margin: 0 0 1.75rem;
}

.hx-auth-tab {
	border: 1px solid color-mix(in srgb, #1f0d5c 25%, transparent);
	border-radius: 999px;
	padding: .7rem 1.5rem;
	font-size: .95rem;
	font-weight: 600;
	background: #fff;
	color: #1f0d5c;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.hx-auth-tab:hover {
	background: color-mix(in srgb, #1f0d5c 8%, white);
}

.hx-auth-tab.is-active {
	background: #1f0d5c;
	color: #fff;
	border-color: #1f0d5c;
}

/* Formulaires de connexion / inscription / mot de passe perdu : carte
   blanche arrondie avec ombre indigo (même famille que les cartes de
   homepage.css), liseré dégradé "Spectre complet" en tête, titre Playfair,
   champs arrondis et bouton pilule pleine largeur. Spécificité volontairement
   haute (.woocommerce form.hx-auth-card …) : le CSS natif de WooCommerce
   cible déjà `.woocommerce form.login` et `.woocommerce form .form-row
   .input-text`. */
.woocommerce form.hx-auth-card,
.woocommerce form.woocommerce-ResetPassword {
	position: relative;
	overflow: hidden;
	max-width: 440px;
	margin: 1rem auto 0;
	padding: 2.75rem 2.25rem 2rem;
	text-align: left;
	background: #fff;
	border: 1px solid rgba(31, 13, 92, .07);
	border-radius: 20px;
	box-shadow: 0 4px 24px rgba(31, 13, 92, .08);
}
.hx-auth-tabs form.hx-auth-card {
	margin-top: 0;
}
.woocommerce form.hx-auth-card::before,
.woocommerce form.woocommerce-ResetPassword::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 5px;
	background: var(--wp--preset--gradient--accent-all-spectrum, linear-gradient(135deg, #1f0d5c, #f08e80, #fdf0e6));
}

.hx-auth-intro {
	margin: 0 0 1.75rem;
	text-align: center;
}
.hx-auth-title {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 900;
	font-size: clamp(1.6rem, 3vw, 2rem);
	line-height: 1.15;
	color: #1f0d5c;
	margin: 0 0 .5rem;
}
.hx-auth-subtitle {
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
	opacity: .7;
}

.woocommerce form.hx-auth-card .form-row,
.woocommerce form.woocommerce-ResetPassword .form-row {
	padding: 0;
	margin: 0 0 1.1rem;
}
.woocommerce form.hx-auth-card .form-row label,
.woocommerce form.woocommerce-ResetPassword .form-row label {
	display: block;
	margin: 0 0 .4rem;
	font-size: .9rem;
	font-weight: 600;
	color: #1f0d5c;
}
.woocommerce form.hx-auth-card .required {
	color: var(--wp--preset--color--accent-2, #f08e80);
}
.woocommerce form.hx-auth-card .form-row input.input-text,
.woocommerce form.woocommerce-ResetPassword .form-row input.input-text {
	width: 100%;
	padding: .8rem 1rem;
	font-size: 1rem;
	background: var(--wp--preset--color--accent-4, #faf6f0);
	border: 1px solid rgba(31, 13, 92, .12);
	border-radius: 12px;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.woocommerce form.hx-auth-card .form-row input.input-text:focus,
.woocommerce form.woocommerce-ResetPassword .form-row input.input-text:focus {
	outline: none;
	background: #fff;
	border-color: #1f0d5c;
	box-shadow: 0 0 0 3px color-mix(in srgb, #1f0d5c 15%, transparent);
}
/* Œil "afficher le mot de passe" ajouté par WooCommerce dans le champ. */
.woocommerce form.hx-auth-card .password-input {
	width: 100%;
}
.woocommerce form.hx-auth-card .show-password-input {
	top: 50%;
	right: .9rem;
	transform: translateY(-50%);
	color: #1f0d5c;
	opacity: .6;
}

/* Ligne "Se souvenir de moi" + bouton : case à cocher au-dessus, bouton
   pilule pleine largeur dessous (WooCommerce les met côte à côte, bouton
   flottant à gauche). */
.woocommerce form.hx-auth-card .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.25rem;
	margin: .4rem 0 0;
}
.woocommerce form.hx-auth-card .form-row label.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-weight: 400;
	color: inherit;
	cursor: pointer;
}
.woocommerce form.hx-auth-card .woocommerce-form-login__rememberme input {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	accent-color: #1f0d5c;
}
.woocommerce form.hx-auth-card button.button,
.woocommerce form.woocommerce-ResetPassword button.button {
	float: none;
	width: 100%;
	margin: 0 !important;
	padding: .85rem 1.2rem !important;
	font-size: 1rem;
	font-weight: 500 !important;
}

.woocommerce form.hx-auth-card .lost_password {
	margin: 1.25rem 0 0;
	text-align: center;
	font-size: .9rem;
}
.woocommerce form.hx-auth-card .lost_password a {
	color: #1f0d5c;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, #1f0d5c 30%, transparent);
	text-underline-offset: 3px;
	transition: text-decoration-color .15s ease;
}
.woocommerce form.hx-auth-card .lost_password a:hover {
	text-decoration-color: currentColor;
}

@media (max-width: 480px) {
	.woocommerce form.hx-auth-card,
	.woocommerce form.woocommerce-ResetPassword {
		padding: 2.25rem 1.25rem 1.5rem;
	}
}


/* Boutons WooCommerce (panier, récapitulatif de commande, mon compte,
   fiche produit) alignés sur le style pilule des boutons du site
   (voir .wp-element-button / .wp-block-button__link dans le thème parent) —
   classique (WooCommerce core) et blocks (Cart/Checkout blocks) confondus.
   !important nécessaire : le CSS natif de WooCommerce est plus spécifique
   et/ou chargé après cette feuille. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	border-radius: 999px !important;
	background-color: var(--wp--preset--color--accent-1, #1f0d5c) !important;
	color: var(--wp--preset--color--base, #fff) !important;
	border: none !important;
	box-shadow: none !important;
	padding: .5rem 1.2rem !important;
	font-weight: 300 !important;
	text-transform: none !important;
	text-decoration: none !important;
	transition: background-color .2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover,
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-1, #1f0d5c) 85%, transparent) !important;
	color: var(--wp--preset--color--base, #fff) !important;
	text-decoration: none !important;
}
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.wc-block-components-button.is-loading,
.wc-block-components-button[aria-disabled="true"] {
	opacity: .5 !important;
	background-color: var(--wp--preset--color--accent-1, #1f0d5c) !important;
}

/* Boutons "Voir" / "Facture" de la liste des commandes (mon compte) : plus
   petits que les boutons d'action principaux (paiement, ajout au panier).
   Spécificité : `.woocommerce a.button` (règle générale plus haut) est aussi
   `(0,2,1)` — `.woocommerce-orders-table__cell-order-actions .button` seul
   ne faisait que `(0,2,0)` et perdait malgré son ordre plus tardif. En
   ciblant l'ancre (`a.button`) ici, on remonte à `(0,2,1)` et on gagne le
   conflit grâce à l'ordre des règles. */
.woocommerce-orders-table__cell-order-actions a.button {
	padding: .15rem .6rem !important;
	font-size: .85rem !important;
	margin-bottom: 0 !important;
}
.woocommerce-orders-table__cell-order-actions {
	display: flex !important;
	align-items: center;
	gap: .4rem;
}

/* ── "Mon compte" > Crédits et réservations ─────────────────────────────
   Jusqu'ici du HTML WooCommerce brut (liste à puces, tableaux natifs sans
   style) — même langage visuel que le reste de la boutique : cartes
   arrondies avec ombre pour les crédits, tableaux allégés pour les cours. */
.hx-account-credits-page h2 {
	color: #1f0d5c;
	font-size: 1.4rem;
	margin: 2.5rem 0 1rem;
}
.hx-account-credits-page h2:first-child {
	margin-top: 0;
}

/* One block of credits per participant, named once the account books for
   several people — see HX_Account_Credits::render(). */
.hx-account-credits-page .hx-participant-heading {
	color: #1f0d5c;
	font-size: 1.05rem;
	margin: 1.5rem 0 .75rem;
}

/* "Mon compte" > Mes participants — HX_Account_Participants. */
.hx-account-participants-page h2 {
	color: #1f0d5c;
	font-size: 1.4rem;
	margin: 2.5rem 0 1rem;
}
.hx-participant-cards {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.hx-participant-card {
	border-radius: 14px;
	background: #fff;
	border: 1px solid rgba(31, 13, 92, .07);
	box-shadow: 0 4px 14px rgba(31, 13, 92, .07);
	padding: .9rem 1.2rem;
}
.hx-participant-card-summary {
	display: flex;
	align-items: baseline;
	gap: .75rem;
}
.hx-participant-card-name {
	font-weight: 700;
	color: #1f0d5c;
	flex: 1;
}
.hx-participant-card-age {
	font-size: .9rem;
	opacity: .7;
}
.hx-participant-card-edit {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: .9rem;
	color: #1f0d5c;
	text-decoration: underline;
	cursor: pointer;
}
.hx-participant-form::after {
	content: "";
	display: table;
	clear: both;
}
.hx-participant-remove-form {
	margin-top: 18px;
	text-align: center;
}
.hx-participant-remove-button {
	background: none;
	border: none;
	padding: 0;
	color: #b3261e;
	text-decoration: underline;
	cursor: pointer;
}
.hx-gift-redeem-row select {
	border: 1px solid color-mix(in srgb, #1f0d5c 25%, transparent);
	border-radius: 999px;
	padding: .6rem 1rem;
	font-size: 1rem;
	background: #fff;
}

/* "J'ai un code cadeau" — sits right above the credits list, see
   HX_Account_Credits::render_gift_card_redeem_form(). */
.hx-gift-redeem {
	background: color-mix(in srgb, #1f0d5c 5%, white);
	border: 1px solid color-mix(in srgb, #1f0d5c 15%, transparent);
	border-radius: 14px;
	padding: 1rem 1.2rem;
	margin-bottom: 1.5rem;
}
.hx-gift-redeem label {
	display: block;
	font-weight: 600;
	color: #1f0d5c;
	margin-bottom: .5rem;
}
.hx-gift-redeem-row {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}
.hx-gift-redeem-row input[type="text"] {
	flex: 1 1 220px;
	min-width: 0;
	border: 1px solid color-mix(in srgb, #1f0d5c 25%, transparent);
	border-radius: 999px;
	padding: .6rem 1rem;
	font-size: 1rem;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.hx-gift-redeem-row .button {
	border-radius: 999px !important;
	background: #1f0d5c !important;
	border-color: #1f0d5c !important;
	color: #fff !important;
	padding: .6rem 1.4rem !important;
	font-weight: 600;
}
.hx-gift-redeem-row .button:hover {
	background: #150a42 !important;
}

.hx-credit-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* "Cours {Public}" / "Abonnement {Public}" grouped balances — one card per
   (family, public), two per row on desktop, one per row on mobile (see the
   grid + media query below), one row per durée inside with "X / Y à
   programmer" above a small progress bar, see
   HX_Account_Credits::render_credits(). Sits above .hx-credit-cards (the
   remaining stage/event/gift-card types, still shown as flat cards). */
.hx-credit-groups-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 0 0 1rem;
}
@media (max-width: 640px) {
	.hx-credit-groups-grid {
		grid-template-columns: 1fr;
	}
}
.hx-credit-group {
	padding: 1.2rem 1.4rem;
	border-radius: 16px;
	background: #fff;
	border: 1px solid rgba(31, 13, 92, .07);
	box-shadow: 0 4px 14px rgba(31, 13, 92, .07);
}
.hx-credit-group-title {
	color: #1f0d5c;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 1rem;
}
.hx-credit-rows {
	display: flex;
	flex-direction: column;
	gap: .9rem;
}
.hx-credit-row-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin: 0 0 .4rem;
}
.hx-credit-row-duree {
	font-weight: 700;
	font-size: .8rem;
	color: #1f0d5c;
	background: color-mix(in srgb, #1f0d5c 8%, white);
	border-radius: 999px;
	padding: .25rem .7rem;
}
.hx-credit-row-bar {
	height: 7px;
	border-radius: 999px;
	background: color-mix(in srgb, #1f0d5c 9%, white);
	overflow: hidden;
}
.hx-credit-row-bar-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #1f0d5c, #6a4fd6);
}
.hx-credit-row-stats {
	font-size: .82rem;
	color: #555;
	white-space: nowrap;
}
.hx-credit-row-stats strong {
	color: #1f0d5c;
	font-size: 1rem;
}

/* "Réserver un cours" — one named action button per (public, durée) pool
   still holding credits to schedule, see render_book_actions(). */
.hx-book-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}
.hx-book-actions .hx-reschedule-open {
	background: color-mix(in srgb, #1f0d5c 6%, white);
}

/* "Abonnements à activer" — a subscription bought without a weekly slot
   yet, see HX_Account_Credits::render_pending_subscriptions(). */
.hx-pending-subscription {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .9rem 1.1rem;
	border-radius: 14px;
	background: color-mix(in srgb, #1f0d5c 6%, white);
	margin: 0 0 .75rem;
}
.hx-credit-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .15rem;
	min-width: 160px;
	padding: 1.1rem 1.3rem;
	border-radius: 14px;
	background: color-mix(in srgb, #1f0d5c 6%, white);
	box-shadow: 0 4px 14px rgba(31, 13, 92, .08);
}
.hx-credit-card.is-empty {
	background: #f5f5f5;
	box-shadow: none;
	opacity: .6;
}
.hx-credit-card-amount {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 900;
	font-size: 2.2rem;
	line-height: 1;
	color: #1f0d5c;
}
.hx-credit-card-label {
	font-weight: 600;
}
.hx-credit-card-suffix {
	font-size: .8rem;
	color: #666;
}
.hx-credit-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .5rem;
}
.hx-credit-card-actions .hx-reschedule-open {
	background: #fff;
}

.hx-account-table {
	width: 100%;
	border-collapse: collapse;
	box-shadow: none;
	border: none;
}
.hx-account-table thead th {
	text-align: left;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #666;
	font-weight: 600;
	padding: 0 .5rem .6rem;
	border: none;
}
.hx-account-table tbody td {
	padding: .8rem .5rem;
	border: none;
	border-top: 1px solid rgba(31, 13, 92, .08);
}
.hx-account-table tbody tr:hover td {
	background: color-mix(in srgb, #1f0d5c 3%, white);
}

/* "Mes prochains cours" — a card per upcoming session instead of a plain
   table row, see HX_Account_Credits::render_upcoming(). ".hx-account-table"
   above stays as-is for "Mes cours passés", a much lighter, purely
   informational list that doesn't need the same visual weight. */
.hx-upcoming-list {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}
.hx-upcoming-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .8rem 1.1rem;
	border-radius: 14px;
	background: #fff;
	border: 1px solid rgba(31, 13, 92, .07);
	box-shadow: 0 3px 10px rgba(31, 13, 92, .05);
	transition: box-shadow .15s ease, transform .15s ease;
}
.hx-upcoming-card:hover {
	box-shadow: 0 6px 18px rgba(31, 13, 92, .1);
	transform: translateY(-1px);
}
.hx-upcoming-date {
	flex: 0 0 auto;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 11px;
	background: linear-gradient(155deg, #1f0d5c, #4b2ea8);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.1;
}
.hx-upcoming-day {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 700;
	font-size: 1.25rem;
}
.hx-upcoming-month {
	font-size: .65rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	opacity: .85;
}
.hx-upcoming-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}
.hx-upcoming-course {
	font-weight: 700;
	color: #1f0d5c;
}
.hx-upcoming-meta {
	font-size: .8rem;
	color: #777;
	text-transform: capitalize;
}
.hx-upcoming-action {
	flex: 0 0 auto;
}
.hx-upcoming-empty {
	padding: 1rem 1.2rem;
	border-radius: 14px;
	background: color-mix(in srgb, #1f0d5c 5%, white);
	color: #555;
}
@media (max-width: 520px) {
	.hx-upcoming-card {
		flex-wrap: wrap;
	}
	.hx-upcoming-action {
		flex-basis: 100%;
	}
}

/* "Mes cours passés" reuses every .hx-upcoming-* rule above (same card
   shape, hover, typography) — this modifier on the list wrapper is the
   only override, a coral date badge instead of the purple one, so past and
   upcoming read as clearly different at a glance. See
   HX_Account_Credits::render_past(). */
.hx-upcoming-list--past .hx-upcoming-date {
	background: linear-gradient(155deg, #a8432c, #d97a4d);
}

/* "Voir toutes les dates" — caps both "Mes prochains cours" and "Mes cours
   passés" at 10 cards, the rest sit in .hx-show-more-extra (native `hidden`
   attribute) until this button reveals them — see the small handler in
   hx-account-reschedule.js and HX_Account_Credits::render_capped_list(). */
.hx-show-more-extra:not([hidden]) {
	display: contents;
}
.hx-show-more-btn {
	display: block;
	margin: .9rem auto 0;
	border: 1px solid rgba(31, 13, 92, .2);
	border-radius: 999px;
	padding: .5rem 1.3rem;
	font-size: .85rem;
	font-weight: 600;
	color: #1f0d5c;
	background: #fff;
	cursor: pointer;
}
.hx-show-more-btn:hover {
	background: color-mix(in srgb, #1f0d5c 6%, white);
}

/* "Changer de créneau" (cours à l'unité et semaines d'abonnement) — opens
   the same calendar as the product page, see hx-account-reschedule.js. */
.hx-reschedule-open {
	border: 1px solid rgba(31, 13, 92, .25);
	border-radius: 999px;
	padding: .35rem .9rem;
	font-size: .85rem;
	background: #fff;
	color: #1f0d5c;
	cursor: pointer;
}
.hx-reschedule-open:hover {
	background: color-mix(in srgb, #1f0d5c 6%, white);
}

/* Fiche produit : alerte d'information sous le tarif (ex. abonnement annuel,
   voir HX_Offer_Notice::quantity_markup()). Même gabarit que
   les alertes jaune/rouge du sélecteur de créneau (hx-slot-selector.css),
   en bleu. */
.hx-offer-notice {
	margin: 8px 0 16px;
	font-size: 16px;
	padding: 10px 14px;
	border-radius: 8px;
}
.hx-offer-notice--info {
	background: #e8f1fb;
	border: 1px solid #b9d3f0;
	color: #1d4268;
}

/* Fiche produit (stages / événements) : libellé "Nombre de personnes" au-dessus
   du sélecteur de quantité — même poids que les libellés "Durée" / "Date". */
.hx-qty-label {
	font-weight: 600;
	margin: 16px 0 8px;
}

/* Fiche produit : prix principal en pastille grise (pas les prix des produits
   similaires, repérés par data-is-descendent-of-query-loop). !important sur la
   taille : la classe has-large-font-size de WordPress est elle-même !important. */
.wp-block-woocommerce-product-price[data-is-descendent-of-single-product-template="true"] .wc-block-components-product-price {
	font-size: 34px !important;
	background: #eee;
	padding: 4px 12px;
	border-radius: 6px;
	display: inline-block;
}
@media (max-width: 768px) {
	.wp-block-woocommerce-product-price[data-is-descendent-of-single-product-template="true"] .wc-block-components-product-price {
		font-size: 28px !important;
	}
}

/* Listings (boutique, catégories) : même pastille grise que la fiche produit,
   à l'échelle des cartes. Le bloc parent recentre la pastille (inline-block). */
body.woocommerce.archive .wc-block-product .wp-block-woocommerce-product-price {
	text-align: center;
}
body.woocommerce.archive .wc-block-product .wc-block-components-product-price {
	background: #eee;
	padding: 3px 10px;
	border-radius: 6px;
	display: inline-block;
}

/* Fiche produit : total affiché sous le prix quand la quantité dépasse 1
   (voir assets/js/product-total.js). */
.hx-price-total {
	margin: 8px 0 16px;
	font-weight: 600;
}

/* Fiche produit : choix du paiement en plusieurs fois (plugin Payment Plan
   Suite, bloc .ppn-payment-plans-wrapper) — carte crème claire, listes déroulantes
   et tableau d'échéances dans les couleurs du site. */
.ppn-payment-plans-wrapper {
	display: block;
	margin: 16px 0;
}
.ppn-payment-plans-wrapper .ppn-payment-plans-form {
	background: #FEF7F2; /* #FDF0E6 éclairci */
	border: 1px solid rgba(31, 13, 92, .12);
	border-radius: 12px;
	padding: 16px 18px;
}
.ppn-payment-plans-wrapper .ppn-payment-type-wrapper {
	display: block;
}
.ppn-payment-plans-wrapper label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
	color: #000;
}
.ppn-payment-plans-wrapper .ppn-payment-type-selector,
.ppn-payment-plans-wrapper .ppn-payment-selection-handle-row {
	display: block;
	width: 100%;
	margin: 0;
}
.ppn-payment-plans-wrapper select {
	width: 100%;
	max-width: 100%;
	padding: .55rem 2.6rem .55rem .9rem;
	border: 1px solid color-mix(in srgb, #1f0d5c 25%, transparent);
	border-radius: 8px;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	color: #000;
	font: inherit;
	cursor: pointer;
}
.ppn-payment-plans-wrapper select:focus {
	outline: 2px solid #F08E80;
	outline-offset: 1px;
}
.ppn-payment-plans-wrapper .ppn-payment-plans {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed rgba(31, 13, 92, .2);
}
.ppn-payment-plans-wrapper .ppn-plan-meta {
	margin-top: 12px;
}
.ppn-payment-plans-wrapper .ppn-installments-table table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
}
.ppn-payment-plans-wrapper .ppn-installments-table th {
	padding: 0 0 6px;
	border: 0;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, .6);
	text-align: left;
}
.ppn-payment-plans-wrapper .ppn-installments-table td {
	padding: 8px 0;
	border: 0;
	border-top: 1px solid rgba(31, 13, 92, .1);
	background: transparent;
	color: #000;
	text-align: left;
}
.ppn-payment-plans-wrapper .ppn-installments-table td:first-child {
	font-weight: 700;
}

/* Échéancier du paiement en plusieurs fois : le tableau porte la classe
   "shop_table_responsive" de WooCommerce, qui en mobile empile les cellules
   et préfixe chacune du titre de colonne (data-title) — ici absent, d'où un
   ":" orphelin devant chaque ligne. On garde un vrai tableau à 2 colonnes. */
@media (max-width: 768px) {
	body .ppn-installments-table table.shop_table_responsive thead { display: table-header-group; }
	body .ppn-installments-table table.shop_table_responsive tr { display: table-row; }
	body .ppn-installments-table table.shop_table_responsive tr th,
	body .ppn-installments-table table.shop_table_responsive tr td {
		display: table-cell !important;
		width: 50%;
		padding: 10px 12px;
		text-align: left !important;
		background: transparent !important;
		border: 0 !important;
		border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
	}
	body .ppn-installments-table table.shop_table_responsive tbody tr:last-child td { border-bottom: 0 !important; }
	body .ppn-installments-table table.shop_table_responsive tr td::before { content: none !important; display: none !important; }
	body .ppn-installments-table table.shop_table_responsive tr th:last-child,
	body .ppn-installments-table table.shop_table_responsive tr td:last-child { text-align: right !important; }
}

/* Tri du catalogue (« Tri par défaut ») : même esprit que les pastilles de
   catégories — contour fin violet, coins ronds, flèche personnalisée — à la
   place du select natif du navigateur. */
.wc-block-catalog-sorting select.orderby {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: #1f0d5c;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%231f0d5c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	border: 1px solid rgba(31, 13, 92, 0.12);
	border-radius: 32px;
	padding: 8px 40px 8px 18px;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.wc-block-catalog-sorting select.orderby:hover {
	border-color: rgba(31, 13, 92, 0.35);
}
.wc-block-catalog-sorting select.orderby:focus {
	outline: none;
	border-color: #1f0d5c;
	box-shadow: 0 0 0 3px rgba(31, 13, 92, 0.12);
}

/* Macaron « Promo » (produit en promotion — ex. variante 4 jours du Stage Ados) :
   une pastille discrète, de la couleur du produit (--hx-product-color, corail par défaut), en bas à gauche de la photo en liste (le haut est déjà pris
   par les pastilles public / âge), au même endroit sur la fiche produit. */
.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge,
span.onsale {
	position: absolute;
	top: auto;
	right: auto;
	bottom: 10px;
	left: 10px;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 5px 14px;
	border: 0;
	border-radius: 32px;
	background: var(--hx-product-color, #F08E80);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	z-index: 2;
}
.wc-block-components-product-sale-badge .wc-block-components-product-sale-badge__text {
	color: inherit; font: inherit; text-transform: none;
}
/* Fiche produit : WooCommerce y pose un rond de 3,2em (.woocommerce span.onsale) décalé à gauche de la photo ;
   même sélecteurs que ses règles pour reprendre la main. */
.woocommerce span.onsale,
.woocommerce .wp-block-woocommerce-product-image-gallery span.onsale {
	top: 12px;
	right: auto;
	bottom: auto;
	left: 12px;
	min-height: 0;
	min-width: 0;
	padding: 5px 14px;
	border-radius: 32px;
	background: var(--hx-product-color, #F08E80);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	z-index: 2;
}

/* Bloc prix : le prix barré (ancien tarif) un cran plus petit que le prix en cours. */
.wp-block-woocommerce-product-price del,
.wc-block-components-product-price del,
.wc-block-components-product-price__regular {
	font-size: 0.75em;
	font-weight: 400;
	opacity: 0.65;
	margin-right: 0.35em;
}

/* Pagination des listings (boutique et catégories) — mêmes pastilles que la liste
   des catégories (.hx-category-pills) : fond blanc, filet fin, bleu nuit ; la page
   courante et le survol passent en plein. Couvre le bloc pagination de la
   collection de produits (.wp-block-query-pagination) et la pagination classique
   de WooCommerce (.woocommerce-pagination). */
.post-type-archive-product .wp-block-query-pagination,
.tax-product_cat .wp-block-query-pagination {
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
}
.post-type-archive-product .wp-block-query-pagination-numbers,
.tax-product_cat .wp-block-query-pagination-numbers,
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}
.woocommerce-pagination ul.page-numbers li {
	border: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
}
.post-type-archive-product .wp-block-query-pagination .page-numbers,
.post-type-archive-product .wp-block-query-pagination-previous,
.post-type-archive-product .wp-block-query-pagination-next,
.tax-product_cat .wp-block-query-pagination .page-numbers,
.tax-product_cat .wp-block-query-pagination-previous,
.tax-product_cat .wp-block-query-pagination-next,
.woocommerce-pagination ul.page-numbers li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 16px;
	box-sizing: border-box;
	border: 1px solid rgba(31, 13, 92, 0.12);
	border-radius: 32px;
	background: #fff;
	color: #1f0d5c;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.post-type-archive-product .wp-block-query-pagination a.page-numbers:hover,
.post-type-archive-product .wp-block-query-pagination-previous:hover,
.post-type-archive-product .wp-block-query-pagination-next:hover,
.tax-product_cat .wp-block-query-pagination a.page-numbers:hover,
.tax-product_cat .wp-block-query-pagination-previous:hover,
.tax-product_cat .wp-block-query-pagination-next:hover,
.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.post-type-archive-product .wp-block-query-pagination .page-numbers.current,
.tax-product_cat .wp-block-query-pagination .page-numbers.current,
.woocommerce-pagination ul.page-numbers li .page-numbers.current {
	background: #1f0d5c;
	border-color: #1f0d5c;
	color: #fff;
}
/* Les points de suspension : pas une pastille. */
.post-type-archive-product .wp-block-query-pagination .page-numbers.dots,
.tax-product_cat .wp-block-query-pagination .page-numbers.dots,
.woocommerce-pagination ul.page-numbers li .page-numbers.dots {
	min-width: 0;
	padding: 0 4px;
	border-color: transparent;
	background: transparent;
	color: inherit;
}

/* ── Listings produits (boutique, catégories) — mobile ───────────────────
   Moins de marge de page et de padding de carte pour que les cartes
   occupent plus de largeur. La marge de page passe par les variables de
   padding global, redéfinies sur <main> seulement : le header garde son
   alignement, et les enfants alignfull suivent la nouvelle valeur. */
@media (max-width: 781px) {
	body.woocommerce.archive main.has-global-padding,
	body.woocommerce.archive header.wp-block-template-part {
		--wp--style--root--padding-left: 14px;
		--wp--style--root--padding-right: 14px;
	}
	.wc-block-product {
		padding: 12px 12px 16px !important;
		border-radius: 18px;
	}
	.wc-block-product .wc-block-components-product-image {
		border-radius: 12px;
		margin-bottom: 10px;
	}
}
/* ── Listings mobile : 2 cartes par ligne (essai) ────────────────────────
   Pour revenir à 1 colonne : supprimer ce bloc et remettre
   grid-template-columns: 1fr sous 600px. */
@media (max-width: 600px) {
	body.woocommerce.archive .wc-block-product-template__responsive {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px 10px !important;
	}
	body.woocommerce.archive .wc-block-product {
		padding: 8px 8px 12px !important;
		border-radius: 16px;
		display: flex;
	}
	/* Bouton calé en bas : cartes d'une même ligne alignées malgré les titres
	   sur 1 à 3 lignes. */
	body.woocommerce.archive .wc-block-product > .hx-product-card-color {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	body.woocommerce.archive .wc-block-product > .hx-product-card-color > .wp-block-buttons {
		margin-top: auto;
	}
	body.woocommerce.archive .wc-block-product .wc-block-components-product-image {
		border-radius: 10px;
		margin-bottom: 8px;
	}
	body.woocommerce.archive .hx-product-badges-thumb {
		inset: 6px 6px auto 6px;
		gap: 4px;
		flex-wrap: wrap;
	}
	body.woocommerce.archive .hx-product-badges-thumb .hx-badge {
		font-size: 11px;
		padding: 3px 8px;
		line-height: 1.3;
	}
	body.woocommerce.archive .wc-block-product .wp-block-post-title {
		font-size: 15px !important;
		line-height: 1.3 !important;
		margin-block: 4px 6px;
	}
	body.woocommerce.archive .wc-block-product .wc-block-components-product-price {
		font-size: 12px !important;
		padding: 3px 6px;
		margin-bottom: 10px !important;
	}
	body.woocommerce.archive .wc-block-product .wp-block-woocommerce-product-price {
		margin-top: 0;
	}
	body.woocommerce.archive .wc-block-product .wc-block-components-product-sale-badge {
		bottom: 6px;
		left: 6px;
		padding: 3px 8px;
		font-size: 11px;
	}
	body.woocommerce.archive .wc-block-product .wp-block-button {
		width: 100%;
	}
	body.woocommerce.archive .wc-block-product .wp-block-button__link {
		width: 100%;
		font-size: 13px !important;
		padding: 8px 10px !important;
	}
}

/* Mon compte — WooCommerce notices (« Personne retirée. », « Code cadeau
   activé », erreurs…) in the site's style: rounded card, soft tint, coloured
   accent on the left, round icon badge — same family as the back-office
   notices (hx-admin.css) and the hx-dialog popups. */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
	position: relative;
	display: block;
	margin: 0 0 1.5rem;
	padding: 14px 18px 14px 58px;
	border: 0;
	border-left: 4px solid #2e8b57;
	border-radius: 14px;
	background: #eef8f2;
	box-shadow: 0 4px 14px rgba(31, 13, 92, .07);
	color: #1f0d5c;
	font-size: 15px;
	line-height: 1.5;
	list-style: none;
}
body.woocommerce-account .woocommerce-info {
	border-left-color: #1f0d5c;
	background: #f5f2fb;
}
body.woocommerce-account .woocommerce-error {
	border-left-color: #c8503f;
	background: #fdeeeb;
}
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-info::before,
body.woocommerce-account .woocommerce-error::before {
	content: "✓";
	position: absolute;
	top: 50%;
	left: 16px;
	width: 28px;
	height: 28px;
	margin: 0;
	transform: translateY(-50%);
	border-radius: 50%;
	background: #2e8b57;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 28px;
	text-align: center;
}
body.woocommerce-account .woocommerce-info::before {
	content: "i";
	background: #1f0d5c;
}
body.woocommerce-account .woocommerce-error::before {
	content: "!";
	background: #c8503f;
}
body.woocommerce-account .woocommerce-error li {
	margin: 0;
	padding: 0;
}
body.woocommerce-account .woocommerce-message a:not(.button),
body.woocommerce-account .woocommerce-info a:not(.button),
body.woocommerce-account .woocommerce-error a:not(.button) {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}