/* ==========================================================================
   ASSCW Catalogue Frontend
   Navigation catalogue 3 niveaux — sous-catégories + produits simultanés
   Palette : #384759 #3270A6 #F2911B #BFAC95 #F2E4D8
   ========================================================================== */

/* ---- Reset local ---- */
.asscw-catalogue *,
.asscw-catalogue *::before,
.asscw-catalogue *::after {
	box-sizing: border-box;
}

/* Neutraliser les overrides de largeur/display injectés par Hello Elementor
   (et thèmes similaires) sur les éléments <button> */
.asscw-catalogue button {
	width: auto !important;
	display: inline-flex !important;
}

/* Neutraliser bordures/fonds injectés par le thème sur les boutons/cards */
.asscw-catalogue .asscw-catalogue__card {
	border: 1px solid #3270A6 !important;
	border-radius: 10px !important;
	background: #fff !important;
	box-shadow: none !important;
	overflow: hidden !important;
	padding: 0 !important;
}
.asscw-catalogue .asscw-catalogue__card:hover,
.asscw-catalogue .asscw-catalogue__card:focus-visible {
	box-shadow: 0 4px 16px rgba(50,112,166,0.15) !important;
	outline: none !important;
	transform: translateY(-3px);
}

/* ---- Conteneur principal ---- */
.asscw-catalogue {
	width: 100%;
	font-family: inherit;
	color: #384759;
	min-height: 60vh;
	padding: 24px 20px !important;
	box-sizing: border-box !important;
}

/* =========================================================================
   CHIPS DE FILTRES ACTIFS + DROPDOWN AUTOCOMPLETE
   ========================================================================= */

.asscw-catalogue__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 0 0 0;
	margin-top: 4px;
}

.asscw-catalogue__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px 4px 12px;
	border-radius: 16px;
	font-size: 13px;
	color: #384759;
	border: 1px solid;
	transition: box-shadow 0.12s;
}
.asscw-catalogue__chip:hover {
	box-shadow: 0 2px 6px rgba(50,71,89,0.10);
}

.asscw-catalogue__chip--cat  { background: #F2E4D8; border-color: #BFAC95; }
.asscw-catalogue__chip--attr { background: #e8eff5; border-color: #b8d0e3; }
.asscw-catalogue__chip--any  { background: #e6efe8; border-color: #9bbfa5; }

.asscw-catalogue__chip-label {
	font-weight: 500;
}

.asscw-catalogue__chip-remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: none !important;
	background: transparent !important;
	color: #8a8a8a;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	padding: 0 !important;
	border-radius: 50%;
	transition: background 0.12s, color 0.12s;
}
.asscw-catalogue__chip-remove:hover {
	background: #fff !important;
	color: #b04040;
}

.asscw-catalogue__suggest-dropdown {
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 280px;
	max-width: min(520px, calc(100vw - 40px));
	width: max-content;
	background: #fff;
	border: 1px solid #BFAC95;
	border-top: none;
	border-radius: 0 0 8px 8px;
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 30;
	box-shadow: 0 6px 16px rgba(0,0,0,0.10);
	margin-top: 0;
}

.asscw-catalogue__suggest-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	font-size: 14px;
	border-bottom: 1px solid #F2E4D8;
	transition: background 0.10s;
	white-space: nowrap;
}
.asscw-catalogue__suggest-item:last-child { border-bottom: none; }
.asscw-catalogue__suggest-item:hover,
.asscw-catalogue__suggest-item.is-active {
	background: #F2E4D8;
}

.asscw-catalogue__suggest-kind {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: 3px;
	color: #fff;
	flex-shrink: 0;
}
.asscw-catalogue__suggest-kind--cat  { background: #BFAC95; }
.asscw-catalogue__suggest-kind--attr { background: #3270A6; }
.asscw-catalogue__suggest-kind--any  { background: #5a8f6b; }

.asscw-catalogue__suggest-label {
	color: #384759;
	overflow: hidden;
	text-overflow: ellipsis;
}

.asscw-catalogue__suggest-empty {
	padding: 14px;
	text-align: center;
	font-size: 13px;
	color: #8a8a8a;
	font-style: italic;
}

/* =========================================================================
   BREADCRUMB
   ========================================================================= */

.asscw-catalogue__breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
	padding-left: 8px;
	color: #384759;
}

.asscw-catalogue__bc-item {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 14px;
	color: #3270A6;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	line-height: 1;
}

/* Catégorie active (dernier élément) — grande et visible */
.asscw-catalogue__bc-item:last-child,
.asscw-catalogue__bc-item:not([data-path-index]):not(.asscw-catalogue__bc-home) {
	color: #384759;
	text-decoration: none;
	cursor: default;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.3px;
	line-height: 1.1;
}

.asscw-catalogue__bc-separator {
	color: #BFAC95;
	user-select: none;
	font-size: 18px;
	align-self: flex-end;
	padding-bottom: 4px;
}

/* =========================================================================
   TOGGLE D'AFFICHAGE (Grille / Liste) — Phase 3
   ========================================================================= */

.asscw-catalogue__view-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.asscw-catalogue__view-toggle-label {
	font-size: 13px;
	color: #6b7885;
	margin-right: 2px;
	font-weight: 500;
}

.asscw-catalogue__view-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
	background: #fff;
	border: 1px solid #BFAC95;
	color: #6b7885;
	cursor: pointer;
	transition: all 0.15s;
	border-radius: 4px;
	line-height: 1;
}

.asscw-catalogue__view-toggle-btn:hover {
	background: #F2E4D8;
	color: #384759;
}

.asscw-catalogue__view-toggle-btn.is-active {
	background: #3270A6;
	border-color: #3270A6;
	color: #fff;
}

.asscw-catalogue__view-toggle-btn.is-active:hover {
	background: #285a85;
	border-color: #285a85;
}

.asscw-catalogue__view-toggle-btn svg {
	display: block;
	flex-shrink: 0;
}

.asscw-catalogue__view-toggle-txt {
	white-space: nowrap;
}

@media (max-width: 600px) {
	.asscw-catalogue__view-toggle-label,
	.asscw-catalogue__view-toggle-txt {
		display: none;
	}
	.asscw-catalogue__view-toggle-btn {
		padding: 6px 8px;
	}
}

/* =========================================================================
   VUE RACINE
   ========================================================================= */

.asscw-catalogue__root-view {
	animation: asscw-slide-in 0.18s ease-out;
}

/* =========================================================================
   VUE CATÉGORIE
   ========================================================================= */

.asscw-catalogue__cat-view {
	animation: asscw-slide-in 0.18s ease-out;
}

@keyframes asscw-slide-in {
	from { opacity: 0; transform: translateX(10px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* =========================================================================
   ZONE SOUS-CATÉGORIES
   ========================================================================= */

.asscw-catalogue__subcats-zone {
	margin-bottom: 32px;
}

/* -- Mode cards (≤ threshold) -- */
/* Meme regle que la grille racine : colonnes fixes, hauteurs egales. */
.asscw-catalogue__subcats.asscw-catalogue__subcats--cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, 180px);
	justify-content: center;
	align-items: stretch;
	gap: 20px;
}

.asscw-catalogue__subcats--cards .asscw-catalogue__card {
	width: 100%;
	height: 100%;
}

/* -- Mode liste compacte (> threshold) -- */
.asscw-catalogue__subcats.asscw-catalogue__subcats--list {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid #BFAC95;
	border-radius: 8px;
	overflow: hidden;
}

.asscw-catalogue__subcat-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 11px 16px;
	background: #fff;
	border: none;
	border-bottom: 1px solid #F2E4D8;
	font: inherit;
	font-size: 14px;
	color: #384759;
	cursor: pointer;
	text-align: left;
	transition: background 0.12s, color 0.12s;
}

.asscw-catalogue__subcat-item:last-child {
	border-bottom: none;
}

.asscw-catalogue__subcat-item:hover,
.asscw-catalogue__subcat-item:focus-visible {
	background: #F2E4D8;
	color: #3270A6;
	outline: none;
}

.asscw-catalogue__subcat-item-name {
	flex: 1;
}

.asscw-catalogue__subcat-item-arrow {
	color: #BFAC95;
	font-size: 16px;
	margin-left: 8px;
	transition: color 0.12s;
}

.asscw-catalogue__subcat-item:hover .asscw-catalogue__subcat-item-arrow {
	color: #3270A6;
}

/* =========================================================================
   SÉPARATEUR SOUS-CATS / PRODUITS
   ========================================================================= */

.asscw-catalogue__products-zone {
	/* Un filet discret sépare les deux zones quand les deux sont visibles */
}

#asscw-subcats-zone + .asscw-catalogue__products-zone {
	padding-top: 28px;
	border-top: 1px solid #F2E4D8;
	margin-top: 4px;
}

/* =========================================================================
   GRILLE CATÉGORIES (racine niv 1)
   ========================================================================= */

/* Grille de categories : colonnes de largeur FIXE et lignes de hauteur egale.
   En flex, chaque carte se dimensionnait sur son propre contenu -- un libelle
   sur deux lignes, une description plus longue, et les cartes d'une meme
   rangee ne finissaient pas a la meme hauteur. La grille impose la regularite
   sans dependre de ce que contient chaque carte. */
.asscw-catalogue__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, 220px);
	justify-content: center;
	align-items: stretch;
	gap: 20px;
}

.asscw-catalogue__grid .asscw-catalogue__card {
	width: 100% !important;
	height: 100%;
}

/* =========================================================================
   CARD CATÉGORIE
   ========================================================================= */

.asscw-catalogue__card {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	background: none;
	border: none;
	border-radius: 0;
	overflow: visible;
	cursor: pointer;
	text-align: center;
	padding: 0;
	transition: transform 0.15s, box-shadow 0.15s;
	position: relative;
	font: inherit;
	color: inherit;
	width: 220px;
}

.asscw-catalogue__card:hover,
.asscw-catalogue__card:focus-visible {
	transform: translateY(-3px);
	outline: none;
}

.asscw-catalogue__card-img {
	width: 100%;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	padding: 12px;
	box-sizing: border-box;
}

/* Dans la zone sous-cats : même taille que le niv 1 */
.asscw-catalogue__subcats--cards .asscw-catalogue__card-img {
	height: 150px;
	overflow: hidden;
}

.asscw-catalogue__subcats--cards .asscw-catalogue__card-img img {
	max-height: 130px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.asscw-catalogue__card-img img {
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	display: block;
	transition: transform 0.2s;
}

.asscw-catalogue__card:hover .asscw-catalogue__card-img img {
	transform: scale(1.06);
}

.asscw-catalogue__card-body {
	padding: 10px 10px 14px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	/* Absorbe la hauteur restante quand la carte est etiree a la hauteur de sa
	   rangee : sans cela le fond s'arreterait sous le texte et les cartes
	   paraitraient de nouveau inegales malgre la grille. */
	flex: 1 1 auto;
	justify-content: flex-start;
}

/* L'image garde une hauteur fixe : c'est elle qui aligne les titres entre
   cartes voisines. */
.asscw-catalogue__card-img {
	flex: 0 0 auto;
}

/* Vignettes de categorie : le texte n'est JAMAIS tronque.
   Un nom de categorie coupe en plein milieu ("Confitures - Sirops - Pâtes…")
   ne renseigne plus sur rien. La carte grandit, et la grille aligne toute la
   rangee sur la plus haute : la regularite est obtenue par la mise en page,
   pas en coupant le contenu. Regles posees en !important parce qu'un theme
   (Hello Elementor et consorts) impose volontiers nowrap ou une troncature
   sur le contenu des <button>. */
.asscw-catalogue__card-name,
.asscw-catalogue__card-desc {
	display: block !important;
	width: 100%;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	-webkit-line-clamp: none !important;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

.asscw-catalogue__card-name {
	font-size: 14px;
	font-weight: 500;
	color: #384759;
	line-height: 1.3;
	text-align: center;
}

.asscw-catalogue__card-desc {
	font-size: 13px;
	color: #6b7885;
	line-height: 1.45;
	text-align: center;
}

.asscw-catalogue__card-arrow {
	display: none;
}

/* =========================================================================
   GRILLE PRODUITS (niveaux 1 et 2 — cards)
   ========================================================================= */

.asscw-catalogue__products-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.asscw-catalogue__product-card {
	width: 220px;
	flex-shrink: 0;
}

/* ---- Card produit ---- */
.asscw-catalogue__product-card {
	background: #fff;
	border: 1px solid #BFAC95;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s, border-color 0.15s;
	width: 220px;
	flex-shrink: 0;
}

.asscw-catalogue__product-card:hover {
	box-shadow: 0 4px 16px rgba(50, 112, 166, 0.10);
	border-color: #3270A6;
}

.asscw-catalogue__product-img {
	width: 100%;
	padding: 10px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
}

.asscw-catalogue__product-img img {
	width: 100%;
	height: auto;
	max-height: 160px;
	object-fit: contain;
	display: block;
}

/* Mention "image non contractuelle" sous l'image (italique gris) ;
   affichee conditionnellement par le JS selon le mode configure. */
.asscw-catalogue__product-img-disclaimer {
	display: block;
	font-size: 11px;
	font-style: italic;
	color: #9aa3ad;
	text-align: center;
	padding: 0 10px 6px;
	line-height: 1.3;
	background: #fff;
}

.asscw-catalogue__product-body {
	padding: 12px 14px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	text-align: center;
}

.asscw-catalogue__product-name {
	font-size: 14px;
	font-weight: 600;
	color: #384759;
	line-height: 1.3;
	/* Empeche le debordement horizontal : titre limite a 2 lignes max
	   avec ellipsis si plus long. Wrap au mot quand possible, sinon au
	   caractere via overflow-wrap. */
	width: 100%;
	overflow-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.asscw-catalogue__product-sku {
	font-size: 11px;
	color: #9aa3ad;
	font-family: monospace;
}

.asscw-catalogue__product-desc {
	font-size: 12px;
	color: #6b7885;
	line-height: 1.4;
	flex: 1;
}

.asscw-catalogue__product-price {
	font-size: 15px;
	font-weight: 700;
	color: #384759;
	margin-top: 4px;
}

.asscw-catalogue__product-price--hidden {
	font-size: 12px;
	color: #BFAC95;
	font-style: italic;
	font-weight: normal;
}

.asscw-catalogue__product-price-note {
	font-size: 11px;
	font-style: italic;
	color: #384759;
	opacity: .85;
	margin-top: 2px;
	line-height: 1.35;
	font-weight: normal;
}

/* Unite de vente accolee au prix (ex. "/Kg", "/Piece"). */
.asscw-catalogue__product-price-unit,
.asscw-catalogue__row-price-unit {
	font-size: .85em;
	font-weight: 600;
	color: #384759;
	opacity: .75;
	margin-left: 1px;
}

/* Pied de vignette : les actions et la disponibilite s'empilent, centrees.
   Cote a cote, "Voir le produit" et "Commander" se serraient l'un contre
   l'autre des que la vignette etait etroite, et la mention de stock passait
   a la ligne toute seule -- alignement different d'une vignette a l'autre. */
.asscw-catalogue__product-footer {
	padding: 0 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Largeur commune pour que la pile soit reguliere. Specificite volontairement
   plus forte que la neutralisation `.asscw-catalogue button { width:auto }`
   posee en tete de feuille pour les themes. */
.asscw-catalogue .asscw-catalogue__product-footer > * {
	width: 100% !important;
	max-width: 220px;
	text-align: center;
	justify-content: center;
}

.asscw-catalogue__product-link {
	display: inline-block;
	padding: 7px 14px;
	background: #3270A6 !important;
	color: #fff !important;
	border-radius: 5px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none !important;
	transition: background 0.15s;
}

.asscw-catalogue__product-link:hover {
	background: #255a8e !important;
	color: #fff !important;
	text-decoration: none !important;
}

/* Bouton "Commander" sur la vignette (action principale, plein).
   Quand il est present, "Voir le produit" passe en secondaire (contour). */
.asscw-catalogue__product-order {
	display: inline-block;
	padding: 7px 14px;
	background: #3270A6;
	color: #fff;
	border: 1px solid #3270A6;
	border-radius: 5px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}

.asscw-catalogue__product-order:hover {
	background: #255a8e;
}

.asscw-catalogue__product-order:disabled {
	opacity: 0.7;
	cursor: default;
}

.asscw-catalogue__product-footer:has(.asscw-catalogue__product-order) .asscw-catalogue__product-link {
	background: #fff !important;
	color: #3270A6 !important;
	border: 1px solid #3270A6;
}

.asscw-catalogue__product-footer:has(.asscw-catalogue__product-order) .asscw-catalogue__product-link:hover {
	background: #eef4fa !important;
	color: #255a8e !important;
}

.asscw-catalogue__product-badge {
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 4px;
	background: #F2E4D8;
	color: #384759;
}

.asscw-catalogue__product-badge--out {
	background: #fef0f0;
	color: #c62828;
}

/* =========================================================================
   LISTE PRODUITS (niveau 3 — liste simple)
   ========================================================================= */

.asscw-catalogue__products-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid #BFAC95;
	border-radius: 8px;
	overflow: hidden;
}

.asscw-catalogue__product-row {
	display: grid;
	grid-template-columns: 48px 1fr auto auto auto;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	background: #fff;
	border-bottom: 1px solid #F2E4D8;
	text-decoration: none;
	color: #384759;
	font-size: 14px;
	transition: background 0.12s;
}

.asscw-catalogue__product-row:last-child {
	border-bottom: none;
}

.asscw-catalogue__product-row:hover {
	background: #F2E4D8;
	color: #3270A6;
	text-decoration: none;
}

/* Mini-vignette en debut de ligne (48x48) : repere visuel sans casser la
   densite verticale de la liste L3. Source = ASSCW_Image_Resolver (image
   propre -> image generique categorie ASS -> placeholder beige). */
.asscw-catalogue__row-thumb {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 4px;
	overflow: hidden;
	background: #FAFAFA;
	border: 1px solid #F2E4D8;
	flex-shrink: 0;
}

.asscw-catalogue__row-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.asscw-catalogue__row-thumb--empty {
	background: #F2E4D8;
}

/* Mode "rows seul" (sans image) : applique au conteneur quand
   axyss_catalogue_l3_layout = 'rows'. Masque la vignette et adapte le grid
   pour recuperer la place. Pour B2B haute frequence (ASS), maximise la
   densite verticale. */
.asscw-catalogue__products-list.asscw-catalogue__products--rows-only .asscw-catalogue__product-row {
	grid-template-columns: 1fr auto auto auto;
	padding: 11px 16px;
}
.asscw-catalogue__products-list.asscw-catalogue__products--rows-only .asscw-catalogue__row-thumb {
	display: none;
}

.asscw-catalogue__row-name {
	font-weight: 500;
	flex: 1;
}

.asscw-catalogue__row-sku {
	font-size: 11px;
	font-family: monospace;
	color: #9aa3ad;
	white-space: nowrap;
}

.asscw-catalogue__row-price {
	font-size: 14px;
	font-weight: 700;
	color: #384759;
	white-space: nowrap;
}

.asscw-catalogue__row-price--hidden {
	font-size: 12px;
	color: #BFAC95;
	font-style: italic;
	font-weight: normal;
}

.asscw-catalogue__row-price-note {
	display: inline-block;
	font-size: 11px;
	font-style: italic;
	color: #384759;
	opacity: .85;
	font-weight: normal;
	margin-left: 8px;
	line-height: 1.35;
}

/* =========================================================================
   LOADING / EMPTY
   ========================================================================= */

.asscw-catalogue__loading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 32px 0;
	color: #6b7885;
	font-size: 15px;
}

.asscw-catalogue__spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid #BFAC95;
	border-top-color: #3270A6;
	border-radius: 50%;
	animation: asscw-spin 0.7s linear infinite;
	flex-shrink: 0;
}

@keyframes asscw-spin {
	to { transform: rotate(360deg); }
}

.asscw-catalogue__empty {
	padding: 32px 0;
	color: #9aa3ad;
	font-style: italic;
}

/* =========================================================================
   CTA CONNEXION (visiteurs)
   ========================================================================= */

.asscw-catalogue__login-cta {
	margin-top: 24px;
	padding: 16px 20px;
	background: #F2E4D8;
	border-left: 3px solid #F2911B;
	border-radius: 0 6px 6px 0;
	font-size: 14px;
	color: #384759;
}

.asscw-catalogue__login-cta a {
	color: #3270A6;
	font-weight: 600;
	text-decoration: underline;
}

/* =========================================================================
   PAGINATION
   ========================================================================= */

.asscw-catalogue__pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 28px;
	flex-wrap: wrap;
}

.asscw-catalogue__page-btn {
	padding: 7px 14px;
	border: 1px solid #BFAC95;
	border-radius: 5px;
	background: #fff;
	color: #384759;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	font: inherit;
}

.asscw-catalogue__page-btn:hover {
	background: #F2E4D8;
	border-color: #3270A6;
}

.asscw-catalogue__page-btn--active {
	background: #3270A6;
	border-color: #3270A6;
	color: #fff;
	cursor: default;
}

/* =========================================================================
   RECHERCHE + FILTRES
   ========================================================================= */

.asscw-catalogue__search-bar {
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Ligne 1 : champ recherche + dropdown filtre rapide */
.asscw-catalogue__search-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.asscw-catalogue__search-field-wrap {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 0;            /* prend l'espace disponible */
	min-width: 0;           /* évite le débordement */
	max-width: calc(50% - 6px); /* 50% de la ligne moins le gap */
}

.asscw-catalogue__search-input {
	width: 100%;
	padding: 10px 40px 10px 14px;
	border: 1px solid #BFAC95;
	border-radius: 6px;
	font-size: 14px;
	color: #384759;
	background: #fff;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	appearance: none;
	-webkit-appearance: none;
}

.asscw-catalogue__search-input:focus {
	border-color: #3270A6;
	box-shadow: 0 0 0 2px rgba(50, 112, 166, 0.15);
}

.asscw-catalogue__search-input::-webkit-search-cancel-button {
	display: none;
}

.asscw-catalogue__search-spinner {
	position: absolute;
	right: 36px;
	width: 16px;
	height: 16px;
	border: 2px solid #BFAC95;
	border-top-color: #3270A6;
	border-radius: 50%;
	animation: asscw-spin 0.7s linear infinite;
	flex-shrink: 0;
}

.asscw-catalogue__search-clear {
	position: absolute;
	right: 10px;
	background: none;
	border: none;
	font-size: 18px;
	color: #BFAC95;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: color 0.12s;
}

.asscw-catalogue__search-clear:hover {
	color: #384759;
}

/* Dropdown filtre rapide — calé à droite, sur la même ligne */
.asscw-catalogue__quick-filter {
	margin-left: auto;
	padding: 9px 32px 9px 12px;
	border: 1px solid #BFAC95;
	border-radius: 6px;
	font-size: 14px;
	color: #384759;
	background: #fff;
	cursor: pointer;
	min-width: 180px;
	max-width: 240px;
	outline: none;
}

.asscw-catalogue__quick-filter:focus {
	border-color: #3270A6;
	box-shadow: 0 0 0 2px rgba(50, 112, 166, 0.15);
}

/* Ligne 2 : checkbox scope + bouton filtres avancés */
.asscw-catalogue__search-row--meta {
	justify-content: space-between;
}

.asscw-catalogue__search-scope {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #6b7885;
	cursor: pointer;
	user-select: none;
}

.asscw-catalogue__search-scope input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
}

/* Bouton "Filtres avancés" */
.asscw-catalogue__advanced-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	background: #fff;
	border: 1px solid #BFAC95;
	border-radius: 6px;
	font-size: 13px;
	color: #384759;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
}

.asscw-catalogue__advanced-toggle:hover {
	background: #F2E4D8;
	border-color: #3270A6;
}

.asscw-catalogue__advanced-toggle--open .asscw-catalogue__advanced-icon {
	transform: rotate(180deg);
}

.asscw-catalogue__advanced-icon {
	font-size: 10px;
	color: #6b7885;
	transition: transform 0.18s;
	display: inline-block;
}

.asscw-catalogue__advanced-badge {
	display: inline-block;
	background: #3270A6;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 1px 7px;
	border-radius: 10px;
	margin-left: 4px;
}

/* Panneau filtres avancés */
.asscw-catalogue__advanced-panel {
	background: #F2E4D8;
	border: 1px solid #BFAC95;
	border-radius: 8px;
	padding: 18px 20px;
}

.asscw-catalogue__advanced-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.asscw-catalogue__adv-block {
	background: #fff;
	border-radius: 6px;
	padding: 12px 14px;
	border: 1px solid #BFAC95;
}

.asscw-catalogue__adv-label {
	font-size: 13px;
	font-weight: 600;
	color: #384759;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid #F2E4D8;
}

.asscw-catalogue__adv-values {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 180px;
	overflow-y: auto;
	padding-right: 4px;
}

.asscw-catalogue__adv-value {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #384759;
	cursor: pointer;
	padding: 2px 0;
	user-select: none;
}

.asscw-catalogue__adv-value input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
	flex-shrink: 0;
}

.asscw-catalogue__adv-value:hover {
	color: #3270A6;
}

.asscw-catalogue__adv-loading {
	font-size: 12px;
	color: #aaa;
	font-style: italic;
}

.asscw-catalogue__advanced-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #BFAC95;
}

.asscw-catalogue__advanced-reset,
.asscw-catalogue__advanced-apply {
	padding: 7px 16px;
	border-radius: 5px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	border: 1px solid;
	transition: background 0.12s, color 0.12s;
}

.asscw-catalogue__advanced-reset {
	background: #fff;
	border-color: #BFAC95;
	color: #384759;
}

.asscw-catalogue__advanced-reset:hover {
	background: #F2E4D8;
}

.asscw-catalogue__advanced-apply {
	background: #3270A6;
	border-color: #3270A6;
	color: #fff;
}

.asscw-catalogue__advanced-apply:hover {
	background: #255a8e;
	border-color: #255a8e;
}

/* Compteur de résultats */
.asscw-catalogue__search-count {
	font-size: 14px;
	color: #6b7885;
	margin-bottom: 8px;
}

.asscw-catalogue__active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

.asscw-catalogue__filter-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	background: #F2E4D8;
	border: 1px solid #BFAC95;
	border-radius: 20px;
	font-size: 12px;
	color: #384759;
	font-weight: 500;
}

.asscw-catalogue__search-empty {
	padding: 32px 0;
	color: #9aa3ad;
	font-style: italic;
	text-align: center;
}

/* Mobile : passer en pleine largeur */
@media (max-width: 768px) {
	.asscw-catalogue__search-field-wrap {
		flex: 1 1 100%;
		max-width: 100%;
	}
	.asscw-catalogue__quick-filter {
		margin-left: 0;
		flex: 1 1 100%;
		max-width: 100%;
	}
	.asscw-catalogue__search-row--meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 767px) {
	/* La largeur des cartes est portee par la COLONNE depuis le passage en
	   grille : la fixer sur la carte elle-meme ne suffirait plus (la carte
	   remplit sa colonne), on redimensionne donc les colonnes. */
	.asscw-catalogue__grid {
		grid-template-columns: repeat(auto-fit, 140px);
		gap: 12px;
	}
	.asscw-catalogue__card-img {
		height: 110px;
	}
	.asscw-catalogue__subcats.asscw-catalogue__subcats--cards {
		grid-template-columns: repeat(auto-fit, 120px);
	}
	.asscw-catalogue__subcats--cards .asscw-catalogue__card-img {
		height: 90px;
	}

	.asscw-catalogue__products-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.asscw-catalogue__product-row {
		grid-template-columns: 40px 1fr auto;
		grid-template-rows: auto auto;
		gap: 10px;
	}
	.asscw-catalogue__row-thumb {
		width: 40px;
		height: 40px;
		grid-row: 1 / span 2;
	}
	.asscw-catalogue__row-name {
		grid-column: 2;
	}
	.asscw-catalogue__row-price {
		grid-column: 3;
		grid-row: 1;
	}
	.asscw-catalogue__row-sku {
		display: none;
	}

	.asscw-catalogue__card-name {
		font-size: 13px;
	}
	/* Sur 140px de large, la description editoriale n'est pas lisible : elle
	   est masquee, pas coupee -- le nom, lui, reste toujours entier. */
	.asscw-catalogue__card-desc {
		display: none !important;
	}
	.asscw-catalogue__card-arrow {
		display: none;
	}
}

@media (max-width: 400px) {
	.asscw-catalogue__products-grid {
		grid-template-columns: 1fr;
	}
}

/* Mention TVAC / HTVA apres un prix (discrete). */
.asscw-tax-label {
	font-size: 0.72em;
	font-weight: 600;
	color: #7a8699;
	margin-left: 3px;
	white-space: nowrap;
}

/* =========================================================================
   Colonne de filtres (facettes)
   -------------------------------------------------------------------------
   Colonne fixe a gauche sur grand ecran, bloc repliable au-dessus des
   produits sur mobile. Les compteurs viennent du serveur : ils portent sur
   le resultat courant, jamais sur le catalogue entier.
   ========================================================================= */

.asscw-catalogue__body {
	display: flex;
	align-items: flex-start;
	gap: 28px;
}

.asscw-catalogue__content {
	flex: 1 1 auto;
	min-width: 0; /* sans ca, une grille de produits large deborde le flex */
}

.asscw-catalogue__facets {
	flex: 0 0 250px;
	width: 250px;
	border: 1px solid #e0e3e8;
	border-radius: 10px;
	padding: 18px 16px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.asscw-catalogue__facets-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 2px solid #F2E4D8;
}

.asscw-catalogue__facets-title {
	font-size: 15px;
	font-weight: 700;
	color: #384759;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.asscw-catalogue__facets-clear {
	background: none;
	border: 0;
	color: #3270A6;
	font-size: 12px;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
}

.asscw-facet {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eef0f3;
}

.asscw-facet:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.asscw-facet__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	color: #384759;
	cursor: pointer;
	text-align: left;
}

.asscw-facet__chevron {
	font-size: 14px;
	color: #9aa3ad;
	transition: transform .15s;
}

.asscw-facet__title[aria-expanded="false"] .asscw-facet__chevron {
	transform: rotate(-90deg);
}

.asscw-facet__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 280px;
	overflow-y: auto;
}

.asscw-facet__item label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #4a5666;
	cursor: pointer;
	line-height: 1.35;
}

.asscw-facet__item input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0;
	accent-color: #3270A6;
}

.asscw-facet__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.asscw-facet__count {
	flex: 0 0 auto;
	font-size: 11px;
	color: #9aa3ad;
	background: #f4f5f7;
	border-radius: 9px;
	padding: 1px 7px;
}

.asscw-catalogue__page-gap {
	padding: 0 6px;
	color: #9aa3ad;
}

@media (max-width: 900px) {
	.asscw-catalogue__body {
		flex-direction: column;
		gap: 18px;
	}
	.asscw-catalogue__facets {
		flex: 1 1 auto;
		width: 100%;
	}
	.asscw-facet__list {
		max-height: 200px;
	}
}

/* Valeurs d'axes sur la vignette produit (contenance, pays, appellation...).
   Discretes : elles renseignent, elles ne concurrencent pas le nom ni le prix. */
.asscw-catalogue__product-axes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 2px 0;
}

.asscw-catalogue__product-axis {
	font-size: 11px;
	line-height: 1.4;
	color: #5a6b80;
	background: #F2E4D8;
	border-radius: 9px;
	padding: 1px 8px;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* En affichage par lignes, elles se rangent apres le code article. */
.asscw-catalogue__product-row .asscw-catalogue__product-axes {
	justify-content: flex-start;
	margin: 0;
}

/* Facette a plage continue (prix) : deux <input type="range"> superposes sur
   une piste commune. Les elements natifs restent en place pour l'accessibilite
   (clavier, lecteur d'ecran) ; seule leur apparence est neutralisee, et les
   poignees sont rendues cliquables au-dessus d'une piste qui, elle, ne l'est
   pas -- sinon le second curseur intercepterait tous les clics du premier. */
.asscw-facet__range {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 4px;
}

.asscw-facet__range-values {
	font-size: 13px;
	font-weight: 600;
	color: #384759;
	text-align: center;
}

.asscw-facet__range-track {
	position: relative;
	height: 28px;
}

.asscw-facet__range-track::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 12px;
	height: 4px;
	border-radius: 2px;
	background: #e3e7ec;
}

.asscw-facet__range-fill {
	position: absolute;
	top: 12px;
	height: 4px;
	border-radius: 2px;
	background: #3270A6;
}

.asscw-facet__range-track input[type="range"] {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 28px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none; /* la piste laisse passer, seules les poignees captent */
}

.asscw-facet__range-track input[type="range"]:focus {
	outline: none;
}

.asscw-facet__range-track input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #3270A6;
	box-shadow: 0 1px 4px rgba(56,71,89,.35);
	cursor: pointer;
}

.asscw-facet__range-track input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #3270A6;
	box-shadow: 0 1px 4px rgba(56,71,89,.35);
	cursor: pointer;
}

.asscw-facet__range-track input[type="range"]::-moz-range-track {
	background: none;
	border: 0;
}

.asscw-facet__range-track input[type="range"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(50,112,166,.35);
}

/* =========================================================================
   Vignette produit : quantite a cote du bouton, et prix alignes
   -------------------------------------------------------------------------
   L'alignement des prix ne s'obtient pas en deplacant le prix, mais en
   neutralisant les trois hauteurs variables qui le precedent : le nom (une
   ou deux lignes), les caracteristiques (zero a deux lignes), et la mention
   de disponibilite en pied. Le prix est ensuite pousse en bas du corps.
   ========================================================================= */

/* Deux lignes reservees au nom, qu'il en occupe une ou deux. */
.asscw-catalogue__product-name {
	min-height: 2.6em; /* 2 lignes a line-height 1.3 */
}

/* Le prix absorbe l'espace restant : il se cale donc en bas du corps de
   carte, a la meme hauteur d'une vignette a l'autre. */
.asscw-catalogue__product-price {
	margin-top: auto;
}

/* Emplacement de la mention de disponibilite, occupe ou non. */
.asscw-catalogue__badge-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 22px;
}

/* Quantite + bouton sur une meme ligne. */
.asscw-catalogue__order-row {
	display: flex !important;
	align-items: stretch;
	gap: 8px;
	width: 100%;
	max-width: 220px;
}

/* Champ de quantite : le spinner NATIF du navigateur est conserve, avec sa
   convention -- fleches revelees au survol. La largeur doit donc laisser la
   place a ces fleches, sinon elles rognent le chiffre. */
.asscw-catalogue__order-qty {
	flex: 0 0 68px;
	width: 68px;
	padding: 7px 4px 7px 8px;
	border: 1px solid #BFAC95;
	border-radius: 5px;
	font-size: 13px;
	font-weight: 600;
	color: #384759;
	text-align: center;
	background: #fff;
}

.asscw-catalogue__order-qty:focus {
	outline: none;
	border-color: #3270A6;
	box-shadow: 0 0 0 3px rgba(50,112,166,.13);
}

/* Le bouton prend le reste de la ligne. La specificite doit depasser la
   regle `.asscw-catalogue__product-footer > *` posee plus haut. */
.asscw-catalogue .asscw-catalogue__order-row .asscw-catalogue__product-order {
	flex: 1 1 auto;
	width: auto !important;
	max-width: none;
}

/* « Voir plus » d'un critere de filtre. Discret : c'est une commande
   d'affichage, pas une valeur a cocher -- elle ne doit pas se confondre avec
   les lignes au-dessus. */
.asscw-facet__moreitem { list-style: none; margin-top: 4px; }
.asscw-facet__more {
    background: none;
    border: 0;
    padding: 2px 0;
    color: #3270A6;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
.asscw-facet__more:hover { color: #285a85; }