/**
 * Studio Tabs, vignettes et pages catalogue.
 *
 * Le fournisseur livre des packshots detoures sur fond blanc. Poses tels quels
 * sur une section blanche, ils flottent sans limite et la grille se lit comme
 * une liste d'objets decoupes. On leur donne donc un fond sable et un angle
 * arrondi : le produit redevient un objet pose quelque part, et la grille tient.
 *
 * Deux partis pris pour ce catalogue precis :
 *
 * 1. Deux vignettes par ligne en mobile, jamais une seule. On achete une table
 *    basse en comparant des formes ; une colonne unique oblige a memoriser d'un
 *    ecran a l'autre et fait chuter la profondeur de scroll.
 * 2. Essence et dimensions sont affichees des la vignette. Ce sont les deux
 *    questions de l'acheteur, et les faire descendre en fiche multiplie les
 *    allers-retours.
 */

/**
 * Grille.
 *
 * On neutralise la grille flottante historique de WooCommerce au profit d'une
 * grille CSS : le float laisse des lignes bancales des que deux vignettes n'ont
 * pas la meme hauteur de titre, ce qui arrive en permanence ici.
 */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--st-space-md) var(--st-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	/* WooCommerce impose une largeur en pourcentage a ses vignettes flottantes,
	   depuis une feuille chargee apres celle-ci. Sans !important, chaque
	   vignette occupe 30 % d'une cellule de grille qui en fait deja un tiers. */
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	text-align: left;
}

@media (min-width: 768px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--st-space-lg) var(--st-space-md);
	}
}

/* Les modules de la page d'accueil tiennent sur une seule ligne de quatre. */
@media (min-width: 1025px) {
	.elementor-widget-woocommerce-products ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--st-space-md);
	}
}

/**
 * Vignette.
 *
 * Le visuel est contenu et non recadre : un packshot recadre coupe les pieds de
 * la table, ce qui est precisement ce qu'on regarde sur un meuble. Le fond sable
 * lui donne sa limite, et un seul angle arrondi reprend la signature du site.
 */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	margin: 0 0 14px;
	padding: 22px;
	background-color: var(--st-surface, #f6f6f6);
	border-radius: 0 0 0 var(--st-radius-md, 15px);
	transition: transform 0.35s ease, background-color 0.25s ease;
}

.woocommerce ul.products li.product:hover a img {
	transform: scale(1.03);
	background-color: #f1ede9;
}

/* Le survol ne doit pas deborder du bloc sable. */
.woocommerce ul.products li.product > a {
	display: block;
	overflow: hidden;
	border-radius: 0 0 0 var(--st-radius-md, 15px);
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.elementor-widget-woocommerce-products ul.products li.product h2.woocommerce-loop-product__title {
	padding: 0;
	margin: 0 0 4px;
	font-family: var(--st-font, "Cabin", sans-serif);
	/* Le widget Produits d'Elementor rattache le titre de vignette a la
	   typographie globale "Titres" du kit, calee a 50px pour les h2 de section.
	   Sans !important, chaque vignette herite donc d'un titre de 50px. */
	font-size: 0.9375rem !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	color: var(--st-ink, #3d1e14);
	/* Deux lignes au maximum : au-dela, les vignettes ne s'alignent plus. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s ease;
}

.woocommerce ul.products li.product:hover h2.woocommerce-loop-product__title {
	color: var(--st-accent, #a3280a);
}

/* Essence et dimensions, injectees sous le titre. */
.st-loop-specs {
	margin: 0 0 8px;
	color: var(--st-muted, #7a6a5f);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin: 0;
	color: var(--st-ink, #3d1e14);
	font-family: var(--st-font, "Cabin", sans-serif);
	font-size: 1.0625rem;
	font-weight: 500;
}

.woocommerce ul.products li.product .price del {
	color: var(--st-muted, #7a6a5f);
	font-weight: 400;
	margin-right: 6px;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--st-accent, #a3280a);
}

/**
 * Le bouton d'ajout depuis la liste est masque a dessein.
 *
 * Sur du mobilier a plusieurs centaines d'euros, personne n'ajoute au panier
 * sans avoir vu les dimensions et les photos. Le bouton en liste ne sert alors
 * qu'a alourdir la vignette et a produire des paniers abandonnes.
 */
.woocommerce ul.products li.product .button {
	display: none;
}

.woocommerce span.onsale {
	top: 10px;
	left: 10px;
	right: auto;
	min-height: 0;
	min-width: 0;
	padding: 5px 12px;
	border-radius: var(--st-radius-pill, 999px);
	background-color: var(--st-accent, #a3280a);
	color: #ffffff;
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
}

/**
 * Pages catalogue.
 */
.woocommerce .site-main,
.woocommerce-page .site-main {
	max-width: var(--st-container, 1140px);
	margin-inline: auto;
	padding-inline: var(--st-space-sm);
}

.st-archive-head {
	padding-block: var(--st-space-md) var(--st-space-sm);
}

.st-archive-head__title {
	margin: 0 0 var(--st-space-xs);
}

.st-archive-head__intro {
	max-width: 68ch;
	color: var(--st-muted, #7a6a5f);
}

.woocommerce .woocommerce-result-count {
	margin: 0;
	color: var(--st-muted, #7a6a5f);
	font-size: 0.875rem;
}

/**
 * Filtres.
 *
 * En desktop, colonne de gauche collante. En mobile, panneau plein ecran ouvert
 * par un bouton fixe : un accordeon empile en haut de page repousse les produits
 * sous la ligne de flottaison et fait croire a un catalogue vide.
 */
@media (min-width: 1025px) {
	.st-shop-layout {
		display: grid;
		grid-template-columns: 248px minmax(0, 1fr);
		gap: var(--st-space-lg);
		align-items: start;
	}

	.st-filters {
		position: sticky;
		top: var(--st-space-md);
		max-height: calc(100vh - var(--st-space-lg));
		overflow-y: auto;
	}
}

.st-filters__group + .st-filters__group {
	margin-top: var(--st-space-md);
	padding-top: var(--st-space-md);
	border-top: 1px solid var(--st-line, #e4ded9);
}

.st-filters__title {
	margin: 0 0 12px;
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--st-ink, #3d1e14);
}

.st-filters__option {
	display: flex;
	align-items: center;
	gap: 10px;
	/* 44px de haut : la cible tactile minimale, sinon le filtre est inutilisable
	   au pouce et c'est le premier point d'abandon sur mobile. */
	min-height: 44px;
	color: var(--st-ink, #3d1e14);
	font-size: 0.9375rem;
	text-decoration: none;
	cursor: pointer;
}

.st-filters__option input {
	width: 18px;
	height: 18px;
	accent-color: var(--st-accent, #a3280a);
	flex: 0 0 auto;
}

.st-filters__count {
	margin-left: auto;
	color: var(--st-muted, #7a6a5f);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

/* Puces des filtres actifs : indispensables pour que le visiteur sache pourquoi
   il ne voit que douze produits, et puisse revenir en un geste. */
.st-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-space-xs);
	margin-bottom: var(--st-space-sm);
}

.st-active-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--st-line, #e4ded9);
	border-radius: var(--st-radius-pill, 999px);
	background-color: var(--st-surface, #f6f6f6);
	color: var(--st-ink, #3d1e14);
	font-size: 0.8125rem;
	text-decoration: none;
}

.st-active-filters__chip:hover {
	border-color: var(--st-accent, #a3280a);
	color: var(--st-accent, #a3280a);
}

@media (max-width: 1024px) {
	.st-filters {
		position: fixed;
		inset: 0;
		/* Au-dessus de l'en-tete flottant : sinon le titre du panneau et sa croix
		   de fermeture passent sous la barre de navigation. */
		z-index: 9999;
		display: flex;
		flex-direction: column;
		/* La reserve en bas laisse la derniere option remonter au-dessus du
		   bouton de validation, qui reste colle sous le pouce. */
		padding: var(--st-space-sm) var(--st-space-sm) 88px;
		background-color: var(--st-bg, #ffffff);
		overflow-y: auto;
		transform: translateY(100%);
		transition: transform 0.25s ease;
	}

	.st-filters.is-open {
		transform: translateY(0);
	}

	/* Le bouton de validation reste sous le pouce, jamais en fin de liste. */
	.st-filters__apply {
		position: sticky;
		bottom: 0;
		margin-top: auto;
		padding: var(--st-space-sm) 0;
		background-color: var(--st-bg, #ffffff);
		box-shadow: 0 -16px 20px -8px var(--st-bg, #ffffff);
	}
}

/* Etat vide : on montre comment en sortir plutot que d'annoncer l'echec. */
.st-empty {
	padding: var(--st-space-lg) 0;
	text-align: center;
}

.st-empty__text {
	margin: 0 auto var(--st-space-sm);
	max-width: 46ch;
	color: var(--st-muted, #7a6a5f);
}

/**
 * Pagination.
 */
.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--st-space-xs);
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--st-radius-pill, 999px);
	color: var(--st-ink, #3d1e14);
	font-size: 0.9375rem;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background-color: var(--st-ink, #3d1e14);
	color: #ffffff;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	background-color: var(--st-surface, #f6f6f6);
	color: var(--st-ink, #3d1e14);
}

/**
 * Modules de la page d'accueil.
 *
 * Ils mettent en avant des produits photographies en situation : on les cadre
 * plein bloc, la ou les packshots detoures du catalogue restent contenus sur
 * leur fond sable.
 */
.elementor-widget-woocommerce-products ul.products li.product a img,
.elementor-widget-woocommerce-products ul.products li.product img {
	/* Les photos en situation du fournisseur sont carrees. Le cadre portrait du
	   catalogue leur coupait un cinquieme de la hauteur, et le meuble avec : on
	   passe les modules de l'accueil au carre, plus rien n'est rogne. */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	padding: 0;
}

/**
 * Page catalogue : en-tete, barre d'outils, panneau de filtres.
 *
 * Le gabarit archive-product.php du theme enfant produit ce balisage.
 */
.st-shop {
	padding-bottom: var(--st-space-lg);
}

.st-archive-head .woocommerce-breadcrumb {
	margin: 0 0 var(--st-space-sm);
	color: var(--st-muted, #7a6a5f);
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-size: 0.8125rem;
}

.st-archive-head .woocommerce-breadcrumb a {
	color: var(--st-muted, #7a6a5f);
	text-decoration: none;
}

.st-archive-head .woocommerce-breadcrumb a:hover {
	color: var(--st-accent, #a3280a);
}

.st-archive-head__intro p {
	margin: 0;
}

/* Navigation entre categories : sur un catalogue de trois familles, la laisser
   visible en haut de chaque archive evite un retour au menu a chaque essai. */
.st-cat-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--st-space-sm);
}

.st-cat-nav__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--st-line, #e4ded9);
	border-radius: var(--st-radius-pill, 999px);
	color: var(--st-ink, #3d1e14);
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-size: 0.875rem;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.st-cat-nav__item:hover {
	border-color: var(--st-ink, #3d1e14);
	color: var(--st-ink, #3d1e14);
}

.st-cat-nav__item.is-current {
	background-color: var(--st-ink, #3d1e14);
	border-color: var(--st-ink, #3d1e14);
	color: #ffffff;
}

.st-cat-nav__count {
	font-size: 0.75rem;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

/* Barre d'outils : nombre de resultats a gauche, tri et filtres a droite. */
.st-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-space-sm);
	flex-wrap: wrap;
	padding-bottom: var(--st-space-sm);
	margin-bottom: var(--st-space-sm);
	border-bottom: 1px solid var(--st-line, #e4ded9);
}

.st-toolbar__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.st-toolbar .woocommerce-ordering {
	margin: 0;
}

.st-toolbar .woocommerce-ordering select {
	height: 40px;
	padding: 0 34px 0 14px;
	border: 1px solid var(--st-line, #e4ded9);
	border-radius: var(--st-radius-pill, 999px);
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%233d1e14' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 10px;
	-webkit-appearance: none;
	appearance: none;
	color: var(--st-ink, #3d1e14);
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-size: 0.875rem;
	cursor: pointer;
}

/* Bouton d'ouverture du panneau, mobile et tablette uniquement. */
.st-filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px;
	border: 1px solid var(--st-ink, #3d1e14);
	border-radius: var(--st-radius-pill, 999px);
	background-color: transparent;
	color: var(--st-ink, #3d1e14);
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.st-filters-toggle__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--st-accent, #a3280a);
}

.st-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--st-space-sm);
	margin-bottom: var(--st-space-sm);
	border-bottom: 1px solid var(--st-line, #e4ded9);
}

.st-filters__heading {
	font-family: var(--st-font, "Cabin", sans-serif);
	font-size: 1.25rem;
	color: var(--st-ink, #3d1e14);
}

.st-filters__close {
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--st-ink, #3d1e14);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

/* Case a cocher dessinee : les options sont des liens, pour que le filtrage
   fonctionne sans JavaScript et reste partageable par URL. */
.st-filters__box {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1px solid var(--st-line, #e4ded9);
	border-radius: 4px;
	background-color: #ffffff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 11px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.st-filters__option:hover .st-filters__box {
	border-color: var(--st-ink, #3d1e14);
}

.st-filters__option.is-active .st-filters__box {
	border-color: var(--st-ink, #3d1e14);
	background-color: var(--st-ink, #3d1e14);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.2 3.2L11 1.4' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.st-filters__option.is-active .st-filters__label {
	font-weight: 600;
}

.st-filters__label {
	flex: 1 1 auto;
}

/* Budget. */
.st-price {
	display: flex;
	align-items: center;
	gap: 8px;
}

.st-price__field {
	flex: 1 1 0;
	min-width: 0;
}

.st-price__field input {
	width: 100%;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--st-line, #e4ded9);
	border-radius: 8px;
	background-color: #ffffff;
	color: var(--st-ink, #3d1e14);
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-size: 0.9375rem;
}

.st-price__sep {
	color: var(--st-muted, #7a6a5f);
}

.st-price__submit {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background-color: var(--st-ink, #3d1e14);
	color: #ffffff;
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.st-active-filters__clear {
	align-self: center;
	color: var(--st-muted, #7a6a5f);
	font-size: 0.8125rem;
	text-decoration: underline;
}

.st-active-filters__clear:hover {
	color: var(--st-accent, #a3280a);
}

/* Bouton plein, reprenant le degrade unique du site. */
.st-btn-solid {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 47px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--st-radius-pill, 999px);
	background-image: var(--st-btn);
	color: #ffffff;
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-image 0.25s ease;
}

.st-btn-solid:hover,
.st-btn-solid:focus {
	background-image: var(--st-btn-hover);
	color: #ffffff;
}

.st-empty .st-btn-solid {
	width: auto;
}

/* Variante contour, pour les actions secondaires. */
.st-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 47px;
	padding: 0 26px;
	border: 1px solid var(--st-ink, #3d1e14);
	border-radius: var(--st-radius-pill, 999px);
	background: transparent;
	color: var(--st-ink, #3d1e14);
	font-family: var(--st-font-ui, "Figtree", sans-serif);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.st-btn-outline:hover,
.st-btn-outline:focus {
	background-color: var(--st-ink, #3d1e14);
	color: #ffffff;
}

.st-shop-reassure {
	margin-top: var(--st-space-lg);
}

/* Le panneau mobile est plein ecran : on bloque le defilement derriere lui,
   sinon le catalogue file sous le panneau des le premier glissement. */
body.st-filters-open {
	overflow: hidden;
}

/* En desktop, le panneau est une colonne : ni entete, ni bouton d'ouverture,
   ni bouton de validation. Regle placee en fin de feuille pour primer sur les
   declarations d'affichage de ces trois elements. */
@media (min-width: 1025px) {
	.st-filters-toggle,
	.st-filters__head,
	.st-filters__apply {
		display: none;
	}
}