.ss-woo-layout-toggle {
	display: inline-flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.ss-woo-toggle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	background: #fff;
	color: #666;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ss-woo-toggle-btn:hover {
	border-color: #999;
	color: #333;
}

.ss-woo-toggle-btn.is-active {
	background: #333;
	border-color: #333;
	color: #fff;
}

.ss-woo-short-description {
	display: none;
}

/*
 * En vue grille (et partout hors `.ss-woo-list-view`), ce conteneur est neutralisé
 * avec `display: contents` : il disparaît de l'arbre de rendu et le titre qu'il
 * contient se comporte comme s'il était un enfant direct de `<a>`, exactement comme
 * avant l'ajout de la description (aucun impact sur le CSS existant du module Shop
 * Divi ou d'un thème). Seule la vue liste (plus bas) lui donne une vraie boîte.
 */
.ss-woo-list-title-wrap {
	display: contents;
}

.ss-woo-list-cart {
	display: none;
}

/*
 * Système de vue liste désactivé sous 981px : le module Shop Divi n'a de toute
 * façon plus assez de largeur pour 3 colonnes (image/texte/prix) en dessous de ce
 * seuil (tablette portrait et mobile), donc on rebascule automatiquement sur
 * l'affichage en grille natif — plus simple et plus robuste que d'essayer
 * d'adapter la mise en page en colonnes à un écran étroit. Le bouton de bascule
 * grille/liste est masqué avec le même seuil (juste en dessous), puisqu'il n'y a
 * plus rien à choisir. Le cookie/la classe `ss-woo-list-view` restent intacts :
 * si l'utilisateur ragrandit la fenêtre au-dessus de 981px, son choix réapparaît
 * sans qu'il ait besoin de re-cliquer.
 */
@media (max-width: 980px) {
	.ss-woo-layout-toggle {
		display: none !important;
	}
}

@media (min-width: 981px) {

	/* --- Vue liste --- */

	.products.ss-woo-list-view {
		display: flex !important;
		flex-direction: column;
		gap: 1rem;
	}

	.products.ss-woo-list-view li.product {
		display: flex !important;
		flex-direction: row;
		align-items: center;
		gap: 1.5rem;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin: 0 !important;
		padding: 1rem !important;
		text-align: left !important;
		border: 1px solid #eee;
		border-radius: 4px;
	}

	/*
	 * flex-wrap volontairement absent ici (nowrap, la valeur par défaut) : la ligne
	 * image/titre-description/prix ne doit JAMAIS passer à la ligne, quelle que soit la
	 * longueur de la description — c'est au wrapper flex-column (.ss-woo-list-title-wrap,
	 * min-width:0) d'absorber une description sur 2 lignes ou plus EN HAUTEUR, dans sa
	 * propre colonne. Un `flex-wrap: wrap` ici faisait basculer toute la ligne en dessous
	 * de l'image dès que la description dépassait une ligne (bug identifié le 2026-07-15).
	 *
	 * :not(.button) sur le sélecteur générique de secours : le bouton "Ajouter au
	 * panier" par défaut de WooCommerce est, lui aussi, un <a> enfant direct de
	 * li.product — sans cette exclusion, il récupérait ce display:flex !important et
	 * la règle qui le masque plus bas (display:none, sans !important) perdait
	 * systématiquement le duel d'importance.
	 */
	.products.ss-woo-list-view li.product > a.woocommerce-LoopProduct-link,
	.products.ss-woo-list-view li.product > a:not(.button) {
		display: flex !important;
		flex-direction: row;
		align-items: center;
		gap: 1.5rem;
		flex: 1 1 auto;
		min-width: 0;
		text-align: left;
	}

	/*
	 * !important nécessaire : la règle par défaut de WooCommerce
	 * (.woocommerce ul.products li.product a img { width:100%; height:auto })
	 * a le même nombre de classes que la nôtre mais plus d'éléments dans le
	 * sélecteur, donc elle gagne le duel de spécificité et l'image explose
	 * à la largeur du conteneur flex si on ne force pas la taille ici.
	 */
	.products.ss-woo-list-view li.product img {
		width: 160px !important;
		height: 160px !important;
		max-width: 160px !important;
		object-fit: contain !important;
		flex: 0 0 160px !important;
	}

	/*
	 * Le wrapper titre+description devient un vrai conteneur flex-column en vue liste
	 * (il est neutralisé en `display: contents` partout ailleurs, voir plus haut) :
	 * c'est lui qui prend la place du titre comme élément flexible de la ligne, le
	 * titre et la description s'empilent naturellement dedans (flux normal, sans
	 * grille ni calcul de hauteur de ligne à coordonner avec l'image).
	 */
	.products.ss-woo-list-view li.product .ss-woo-list-title-wrap {
		display: flex !important;
		flex-direction: column;
		flex: 1 1 auto;
		min-width: 0;
	}

	.products.ss-woo-list-view li.product .woocommerce-loop-product__title {
		margin: 0 !important;
		font-size: 1rem;
	}

	.products.ss-woo-list-view li.product .ss-woo-short-description {
		display: block;
		margin: 0.25rem 0 0;
		font-size: 0.875rem;
		line-height: 1.4;
		color: #666;
	}

	/*
	 * margin-left: calc(15px - 1.5rem) : la ligne a un `gap: 1.5rem` uniforme entre
	 * tous ses enfants (image ↔ titre-description, et titre-description ↔ prix). Un
	 * margin s'ajoute PAR-DESSUS ce gap plutôt que de le remplacer, donc pour obtenir
	 * exactement 15px net entre la colonne titre-description et le prix, on retire
	 * d'abord le gap déjà réservé (1.5rem) avant d'ajouter les 15px demandés.
	 * .ss-woo-list-title-wrap (flex: 1 1 auto) occupe tout l'espace restant de toute
	 * façon, donc le prix se retrouve naturellement collé à droite de la ligne, plus
	 * besoin de `margin-left: auto` pour ça.
	 */
	.products.ss-woo-list-view li.product .price {
		align-self: flex-start;
		display: inline-block;
		white-space: nowrap;
		margin-left: calc(15px - 1.5rem) !important;
		background-color: #000 !important;
		color: #fff !important;
		padding: 5px 10px !important;
		border-radius: 3px !important;
		flex: 0 0 auto;
		order: 3;
	}

	.products.ss-woo-list-view li.product .onsale {
		position: static !important;
		order: -1;
		margin: 0 !important;
		flex: 0 0 auto;
	}

	/*
	 * Bouton "Ajouter au panier" par défaut de WooCommerce (rendu par
	 * woocommerce_after_shop_loop_item, priorité 10) : c'est un <a class="button ...">
	 * enfant direct de li.product, dans toutes les configurations (simple, variable,
	 * groupé...). On le masque en vue liste pour ne pas l'avoir en double avec
	 * .ss-woo-list-cart (désormais dans .ss-woo-list-title-wrap, voir PHP), qui le
	 * remplace.
	 */
	.products.ss-woo-list-view li.product > a.button {
		display: none !important;
	}

	/*
	 * Aucune marge/décalage à calculer : le widget est maintenant un vrai enfant de
	 * .ss-woo-list-title-wrap (voir PHP), donc naturellement dans la même colonne
	 * que le titre/la description, sans avoir besoin de simuler l'alignement.
	 */
	.products.ss-woo-list-view li.product .ss-woo-list-cart {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.75rem;
		margin-top: 0.25rem;
	}

	.products.ss-woo-list-view li.product .ss-woo-list-cart .quantity {
		margin: 0;
	}

	/*
	 * flex-basis: 100% + son ordre naturel (dernier élément du DOM dans ce widget) le
	 * fait passer sur sa propre ligne, sous la quantité/le bouton — même technique
	 * fiable que celle utilisée ailleurs dans ce fichier pour un élément qui doit
	 * occuper toute la largeur disponible sans perturber le reste de la ligne.
	 */
	.products.ss-woo-list-view li.product .ss-woo-list-cart-message {
		flex-basis: 100%;
		min-height: 1.2em;
		font-size: 0.8125rem;
		color: #2e7d32;
	}
}

.acoplw-badge-icon {
	width: 120px !important;
}