/**
 * KINGSEVEN 2026 — Boutique, catégories, recherche
 */

/* ==================================================================
 * En-tête de page
 * ================================================================== */
.ks-shop-header {
	margin-bottom: var(--ks-space-8);
	max-width: 60ch;
}

.ks-shop-header__title {
	margin-bottom: var(--ks-space-3);
	font-size: var(--ks-text-2xl);
}

.ks-shop-header__desc {
	font-size: var(--ks-text-sm);
	color: var(--ks-text-muted);
}

/* --- Filtres actifs --------------------------------------------- */
.ks-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ks-space-2);
	margin: var(--ks-space-5) 0 0;
	padding: 0;
	list-style: none;
}

.ks-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ks-space-2);
	padding: 6px var(--ks-space-3);
	border: 1px solid var(--ks-border);
	border-radius: var(--ks-radius-pill);
	background: var(--ks-gray-100);
	font-size: var(--ks-text-xs);
	font-weight: var(--ks-weight-medium);
}

.ks-chip:hover {
	border-color: var(--ks-black);
	background: var(--ks-white);
}

.ks-chip svg {
	width: 13px;
	height: 13px;
}

/* ==================================================================
 * Barre d'outils
 * ================================================================== */
.ks-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ks-space-4);
	padding-bottom: var(--ks-space-5);
	margin-bottom: var(--ks-space-8);
	border-bottom: 1px solid var(--ks-border);
}

.ks-shop-toolbar__count,
.woocommerce-result-count {
	margin: 0;
	font-size: var(--ks-text-sm);
	color: var(--ks-text-muted);
}

.ks-shop-toolbar__actions {
	display: flex;
	align-items: center;
	gap: var(--ks-space-3);
}

.ks-shop-toolbar__badge {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 5px;
	border-radius: var(--ks-radius-pill);
	background: var(--ks-black);
	color: var(--ks-white);
	font-size: 11px;
	font-weight: var(--ks-weight-bold);
}

/* Le menu de tri de WooCommerce reprend l'habillage des champs du thème. */
.woocommerce-ordering select {
	min-height: 40px;
	padding-block: var(--ks-space-2);
	font-size: var(--ks-text-sm);
	border-radius: var(--ks-radius-sm);
}

.woocommerce-ordering {
	margin: 0;
}

/* ==================================================================
 * Tiroir de filtres
 * ================================================================== */
.ks-facet {
	margin: 0 0 var(--ks-space-8);
	padding: 0;
	border: 0;
}

.ks-facet__legend {
	padding: 0;
	margin-bottom: var(--ks-space-3);
	font-size: var(--ks-text-xs);
	font-weight: var(--ks-weight-bold);
	letter-spacing: var(--ks-tracking-wide);
	text-transform: uppercase;
	color: var(--ks-black);
}

.ks-facet__list {
	display: grid;
	gap: var(--ks-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ks-facet__option {
	display: flex;
	align-items: center;
	gap: var(--ks-space-3);
	padding: var(--ks-space-2);
	border-radius: var(--ks-radius-sm);
	font-size: var(--ks-text-sm);
	/* 40 px : cible tactile confortable dans un tiroir parcouru au pouce. */
	min-height: 40px;
}

.ks-facet__option:hover {
	background: var(--ks-gray-100);
}

/* La case est décorative : l'état réel est porté par aria-current sur le
   lien, ce qu'un lecteur d'écran annonce. */
.ks-facet__box {
	display: grid;
	place-items: center;
	flex: none;
	width: 20px;
	height: 20px;
	border: 1px solid var(--ks-border);
	border-radius: 3px;
	background: var(--ks-white);
}

.ks-facet__option.is-active .ks-facet__box {
	background: var(--ks-black);
	border-color: var(--ks-black);
	color: var(--ks-white);
}

.ks-facet__name {
	flex: 1 1 auto;
	min-width: 0;
}

.ks-facet__option.is-active .ks-facet__name {
	font-weight: var(--ks-weight-semibold);
}

.ks-facet__count {
	flex: none;
	font-size: var(--ks-text-xs);
	color: var(--ks-text-muted);
}

.ks-facet__price {
	display: flex;
	align-items: center;
	gap: var(--ks-space-2);
}

.ks-facet__price input {
	min-width: 0;
	min-height: 42px;
	padding-inline: var(--ks-space-3);
}

/* ==================================================================
 * Grille de résultats
 * ================================================================== */
.woocommerce-pagination {
	margin-top: var(--ks-space-12);
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ks-space-2);
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-pagination li {
	border: 0;
}

.woocommerce-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding-inline: var(--ks-space-2);
	border: 1px solid var(--ks-border);
	border-radius: var(--ks-radius-sm);
	font-size: var(--ks-text-sm);
	background: var(--ks-white);
}

.woocommerce-pagination .page-numbers:hover {
	border-color: var(--ks-black);
}

.woocommerce-pagination .page-numbers.current {
	background: var(--ks-black);
	border-color: var(--ks-black);
	color: var(--ks-white);
	font-weight: var(--ks-weight-semibold);
}

.woocommerce-pagination .page-numbers.dots {
	border-color: transparent;
}

/* ==================================================================
 * Résultats de recherche
 * ================================================================== */
.ks-search-summary {
	margin-bottom: var(--ks-space-8);
}

.ks-search-summary__term {
	font-weight: var(--ks-weight-semibold);
	color: var(--ks-black);
}

@media (max-width: 767px) {
	.ks-shop-toolbar {
		gap: var(--ks-space-3);
	}

	.ks-shop-toolbar__count {
		width: 100%;
		order: 2;
	}

	.ks-shop-toolbar__actions {
		width: 100%;
		justify-content: space-between;
	}

	.woocommerce-ordering select {
		max-width: 60vw;
	}
}