/*
 * Archives du catalogue (page boutique et catégories de produits) — Ceyssat Ma Bougie.
 * Chargée UNIQUEMENT sur ces pages (inc/boutique.php), après main-<version>.css dont elle
 * reprend les jetons (--cmb-*). Source canonique : boutique.css ; artefact servi :
 * boutique-<version>.css (copie exacte, jamais modifiée une fois servie).
 *
 * La carte produit de l'accueil (Home 3) et des produits liés de la fiche n'est pas touchée :
 * ces règles ne sont jamais chargées ailleurs.
 *
 * 0.2.0 (thème 0.12.6) — passe de finition : prix en poids regular (le nom reste le premier repère),
 * pagination à la taille du texte courant, cibles de 44 px pour le fil d'Ariane, accroche sans mot isolé.
 *
 * Sommaire
 * 1. En-tête (boutique, catégories)
 * 2. Navigation par univers : pastilles
 * 3. Grille et carte produit
 * 4. État « Épuisé pour le moment »
 * 5. Pagination
 * 6. Invitation au Studio
 */

/* ==========================================================================
   1. En-tête
   ========================================================================== */

.woocommerce .woocommerce-products-header {
	margin-bottom: var(--cmb-space-l);
}

.cmb-shop-header__title {
	margin-bottom: var(--cmb-space-2xs);
}

/* Accroche : boutique (engagements de l'accueil) et catégorie (texte de l'univers). */
.cmb-shop-header__lead {
	max-width: 46ch;
	margin: 0 0 var(--cmb-space-m);
	font-size: var(--cmb-text-base);
	line-height: var(--cmb-leading-normal);
	text-wrap: pretty;
}

/* Fil d'Ariane des catégories : zone cliquable de 44 px de haut, texte à la même place
   (la marge négative annule le remplissage dans la mise en page). */
.woocommerce .woocommerce-breadcrumb a {
	display: inline-block;
	padding-block: calc((var(--cmb-tap-target) - 1lh) / 2);
	margin-block: calc((var(--cmb-tap-target) - 1lh) / -2);
}

@media (min-width: 64em) {
	.woocommerce .woocommerce-products-header {
		margin-bottom: var(--cmb-space-xl);
	}

	.cmb-shop-header__lead {
		margin-bottom: var(--cmb-space-l);
		font-size: var(--cmb-text-lg);
	}
}

/* ==========================================================================
   2. Navigation par univers : pastilles
   Toutes visibles à toutes les largeurs (retour à la ligne, aucun défilement caché) ;
   univers courant en charbon (aria-current, pas seulement la couleur).
   ========================================================================== */

.cmb-universe-nav {
	margin-inline: 0;
	box-shadow: none;
}

.cmb-universe-nav__list {
	flex-wrap: wrap;
	gap: var(--cmb-space-2xs);
	margin: 0;
	padding: 0;
	overflow: visible;
}

.cmb-universe-nav__link {
	gap: var(--cmb-space-2xs);
	padding-inline: var(--cmb-space-s);
	background: var(--cmb-color-surface);
	color: var(--cmb-color-text);
	letter-spacing: normal;
	border: 1px solid var(--cmb-color-border);
	border-radius: var(--cmb-radius-pill);
	transition: background-color var(--cmb-duration-fast) var(--cmb-ease), border-color var(--cmb-duration-fast) var(--cmb-ease), color var(--cmb-duration-fast) var(--cmb-ease);
}

.cmb-universe-nav__link:hover {
	background: var(--cmb-color-linen);
	color: var(--cmb-color-text);
	border-color: var(--cmb-color-border-strong);
}

.cmb-universe-nav__link[aria-current="page"] {
	background: var(--cmb-color-charcoal);
	color: var(--cmb-color-white);
	border-color: var(--cmb-color-charcoal);
}

/* Plus de conteneur défilant : contour de focus à l'extérieur, comme les boutons. */
.cmb-universe-nav__link:focus-visible {
	outline-offset: 2px;
}

/* Vignette d'univers (même image que l'accueil) : à partir de la tablette seulement.
   Masquée et différée sur mobile : elle n'y est pas téléchargée. */
.cmb-universe-nav__thumb {
	display: none;
}

@media (min-width: 48em) {
	.cmb-universe-nav__list {
		gap: var(--cmb-space-xs);
	}

	.cmb-universe-nav__link:has(.cmb-universe-nav__thumb) {
		padding-inline-start: 0.375rem;
	}

	.cmb-universe-nav__thumb {
		display: block;
		flex: none;
		width: 2rem;
		height: 2rem;
		margin: 0;
		object-fit: cover;
		background: var(--cmb-color-linen);
		border-radius: 50%;
	}
}

/* ==========================================================================
   3. Grille et carte produit
   ========================================================================== */

@media (min-width: 64em) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		gap: var(--cmb-space-xl) var(--cmb-space-m);
	}
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin-top: var(--cmb-space-s);
}

/* Prix : taille du texte courant, chiffres alignés ; lisible d'un coup d'œil, en poids regular
   pour que le nom du parfum reste le premier repère de la carte. */
.woocommerce ul.products li.product .price {
	font-size: var(--cmb-text-base);
	font-weight: var(--cmb-weight-regular);
	line-height: var(--cmb-leading-snug);
}

/* ==========================================================================
   4. État « Épuisé pour le moment »
   Pastille calme sous le prix : le produit reste visible avec sa photo et son prix (aucun
   voile), le texte porte l'information. Jamais de quantité restante.
   ========================================================================== */

.cmb-product-card__stock {
	display: inline-flex;
	align-items: flex-start;
	max-width: 100%;
	margin-top: var(--cmb-space-2xs);
	padding: 0.25rem 0.625rem;
	background: var(--cmb-color-linen);
	color: var(--cmb-color-stone);
	font-weight: var(--cmb-weight-medium);
	border-radius: var(--cmb-radius-m);
}

/* Point aligné sur la première ligne quand la mention passe sur deux lignes (cartes étroites). */
.cmb-product-card__stock::before {
	margin-top: 0.45em;
}

/* ==========================================================================
   5. Pagination
   ========================================================================== */

.woocommerce nav.woocommerce-pagination {
	margin-top: var(--cmb-space-2xl);
}

/* Chiffres à la taille du texte courant : lisibles sous une grille de 4 colonnes comme en 390 px. */
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers {
	font-size: var(--cmb-text-base);
}

/* ==========================================================================
   6. Invitation au Studio (inc/boutique.php, même visibilité que Home 4)
   ========================================================================== */

.cmb-catalog-invite {
	display: grid;
	gap: var(--cmb-space-m);
	margin-top: var(--cmb-space-2xl);
	padding: var(--cmb-space-l) var(--cmb-space-m);
	background: var(--cmb-color-surface);
	border: 1px solid var(--cmb-color-border);
	border-radius: var(--cmb-radius-l);
}

.cmb-catalog-invite__title {
	margin-bottom: var(--cmb-space-2xs);
	font-size: var(--cmb-text-2xl);
}

.cmb-catalog-invite__lead {
	max-width: 52ch;
	margin: 0;
	color: var(--cmb-color-text-muted);
	text-wrap: pretty;
}

.cmb-catalog-invite__cta {
	justify-self: start;
}

@media (min-width: 48em) {
	.cmb-catalog-invite {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--cmb-space-l);
		padding: var(--cmb-space-xl);
	}
}