/**
 * Vitrine de categories / produits — shortcodes [axyss_categories],
 * [axyss_attributes], [axyss_products].
 *
 * Palette Axyss : #384759 / #3270A6 / #F2911B / #BFAC95 / #F2E4D8.
 *
 * DEUX CONTRAINTES DICTENT CE FICHIER :
 *
 * 1. La vitrine vit dans un conteneur INCONNU. Elle est posee dans un
 *    constructeur de page (Elementor) : sa largeur reelle n'a aucun rapport
 *    avec celle de l'ecran. Une colonne de 365 px sur un ecran de 1400 px est
 *    un cas normal. Des media queries (qui mesurent l'ECRAN) y produisaient
 *    4 colonnes de 74 px, un mot par ligne. La grille se regle donc sur sa
 *    propre largeur, par une formule auto-fit -- et non par @container, qui
 *    aurait impose container-type: inline-size et son effondrement a zero
 *    (cf. le commentaire de .asscw-showcase__grid).
 *
 * 2. Le theme du site est INCONNU lui aussi, et il stylera nos liens. La carte
 *    etant un <a>, on monte la specificite (.asscw-showcase a.asscw-showcase__card)
 *    pour reprendre la main sur la couleur, sinon le lien s'affiche dans la
 *    couleur de lien du theme.
 */

.asscw-showcase {
	--asscw-showcase-cols: 3;
	--asscw-showcase-gap: 1.25rem;
	/* Plancher de largeur d'une vignette : en dessous, un libelle produit se
	   casse en un mot par ligne. */
	--asscw-showcase-min: 200px;
	display: block;
	width: 100%;
	margin: 2rem 0;
}

/**
 * Le widget Elementor doit occuper TOUTE la largeur de sa colonne, sans que
 * l'utilisateur ait a activer Avance > Taille > Grossir. Elementor recent pose
 * ses conteneurs en flex : un widget y est un element flex qui, par defaut, se
 * dimensionne a son contenu (flex: 0 1 auto). La grille auto-fit voyait alors
 * une largeur indefinie et retombait a une seule colonne. On force donc la
 * pleine largeur sur l'enveloppe du widget (nom = get_name() du widget).
 */
.elementor-widget-asscw-showcase {
	width: 100%;
}

.asscw-showcase__title {
	margin: 0 0 1.25rem;
	color: #384759;
	font-size: 1.5rem;
	line-height: 1.3;
}

/**
 * La grille se regle sur SA PROPRE largeur, sans requete de conteneur.
 *
 * Chaque piste vaut au moins :
 *   - la largeur qu'elle aurait avec le nombre de colonnes demande, ce qui
 *     donne EXACTEMENT ce nombre quand la place suffit ;
 *   - sinon le plancher de 200px, et auto-fit en place alors autant que
 *     possible -- une seule dans une colonne etroite.
 *
 * min(..., 100%) evite le debordement quand le bloc est plus etroit que le
 * plancher lui-meme.
 *
 * On n'utilise volontairement PAS container-type: inline-size : la
 * containment de taille dimensionne l'element comme s'il etait vide, et le
 * fait s'effondrer a zero dans un parent qui s'ajuste a son contenu.
 */
.asscw-showcase__grid {
	display: grid;
	gap: var(--asscw-showcase-gap);
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			min(
				max(
					var(--asscw-showcase-min),
					calc(
						(100% - (var(--asscw-showcase-cols) - 1) * var(--asscw-showcase-gap))
						/ var(--asscw-showcase-cols)
						- 0.5px
					)
				),
				100%
			),
			1fr
		)
	);
}

/* ── Carte ─────────────────────────────────────────────────────────────────
   Alignee sur la carte produit du catalogue Axyss (asscw-catalogue.css) :
   bordure sable, survol bleu, image sur fond blanc en 'contain'. */

.asscw-showcase a.asscw-showcase__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #BFAC95;
	border-radius: 8px;
	background: #fff;
	color: #384759;
	text-decoration: none;
	transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.asscw-showcase a.asscw-showcase__card:hover,
.asscw-showcase a.asscw-showcase__card:focus,
.asscw-showcase a.asscw-showcase__card:focus-visible {
	border-color: #3270A6;
	box-shadow: 0 4px 16px rgba(50, 112, 166, .10);
	transform: translateY(-2px);
	color: #384759;
	text-decoration: none;
}

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

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

.asscw-showcase__card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .35rem;
	padding: .9rem 1rem 1.1rem;
}

.asscw-showcase .asscw-showcase__card-name {
	color: #384759;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.35;
}

.asscw-showcase .asscw-showcase__card-desc {
	color: #6b7785;
	font-size: .875rem;
	line-height: 1.4;
}

.asscw-showcase__card-arrow {
	position: absolute;
	right: .85rem;
	bottom: .85rem;
	color: #3270A6;
	font-size: 1.05rem;
	opacity: 0;
	transition: opacity .15s ease, transform .15s ease;
}

.asscw-showcase a.asscw-showcase__card:hover .asscw-showcase__card-arrow,
.asscw-showcase a.asscw-showcase__card:focus-visible .asscw-showcase__card-arrow {
	opacity: 1;
	transform: translateX(3px);
}

/* ── Variante categorie sans image ─────────────────────────────────────────
   Un aplat beige vide n'est pas une illustration : quand la categorie n'a pas
   d'image, on n'affiche pas de cadre du tout (le rendu PHP omet le bloc), et
   la carte se resume a sa typographie, sur un fond sable discret. */

.asscw-showcase a.asscw-showcase__card:not(:has(.asscw-showcase__card-img)) {
	background: #F2E4D8;
}

.asscw-showcase a.asscw-showcase__card:not(:has(.asscw-showcase__card-img)) .asscw-showcase__card-body {
	padding: 1.35rem 1rem 1.5rem;
}

/* ── Variante produit ──────────────────────────────────────────────────── */

.asscw-showcase .asscw-showcase__card-price {
	margin-top: auto;
	padding-top: .35rem;
	color: #384759;
	font-weight: 600;
}

.asscw-showcase .asscw-showcase__card-price del {
	margin-right: .35rem;
	color: #9aa4b0;
	font-weight: 400;
}

.asscw-showcase .asscw-showcase__card-price-hidden {
	color: #6b7785;
	font-style: italic;
	font-weight: 400;
}

/* ── Bouton d'appel a l'action ─────────────────────────────────────────────
   <span> et non <button> : la vignette ENTIERE est deja un lien vers la fiche
   produit ; ce bouton n'est qu'une affordance, il ne declenche rien de son
   cote. Un element interactif imbrique dans un <a> serait invalide. */

.asscw-showcase .asscw-showcase__card-btn {
	align-self: var(--asscw-showcase-btn-align, flex-start);
	margin-top: .75rem;
	padding: .5rem 1rem;
	border-radius: 6px;
	background: #3270A6;
	color: #fff;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	transition: background .15s ease;
}

.asscw-showcase a.asscw-showcase__card:hover .asscw-showcase__card-btn,
.asscw-showcase a.asscw-showcase__card:focus-visible .asscw-showcase__card-btn {
	background: #285a86;
}

/* La fleche de survol ferait doublon avec un bouton explicite. */
.asscw-showcase .asscw-showcase__card-btn ~ .asscw-showcase__card-arrow,
.asscw-showcase__card-body:has(.asscw-showcase__card-btn) + .asscw-showcase__card-arrow {
	display: none;
}

/* ── Bouton "Commander" fonctionnel ────────────────────────────────────────
   Quand le visiteur peut commander, la vignette rend un VRAI bouton, place
   HORS du lien (un <button> dans un <a> serait invalide) : la carte et le
   bouton deviennent alors deux enfants d'une cellule, qui prend la place de la
   carte dans la grille. La carte s'etire pour que tous les boutons d'une
   rangee restent alignes. */

.asscw-showcase__cell {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.asscw-showcase__cell > a.asscw-showcase__card {
	flex: 1;
}

.asscw-showcase .asscw-showcase__order {
	display: block;
	width: 100%;
	padding: .6rem 1rem;
	border: 0;
	border-radius: 6px;
	background: #3270A6;
	color: #fff;
	font-family: inherit;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
}

.asscw-showcase .asscw-showcase__order:hover,
.asscw-showcase .asscw-showcase__order:focus-visible {
	background: #285a86;
	color: #fff;
}

.asscw-showcase .asscw-showcase__order[disabled] {
	opacity: .7;
	cursor: default;
}

/* Les deux boutons coexistent (cellule) : hierarchie identique au catalogue
   Axyss -- "Commander" reste l'action primaire (aplat bleu), "Voir le produit"
   passe en secondaire (contour bleu sur fond blanc). */
.asscw-showcase__cell .asscw-showcase__card-btn {
	background: #fff;
	color: #3270A6;
	border: 1px solid #3270A6;
}

.asscw-showcase__cell a.asscw-showcase__card:hover .asscw-showcase__card-btn,
.asscw-showcase__cell a.asscw-showcase__card:focus-visible .asscw-showcase__card-btn {
	background: #eef4fa;
	color: #255a8e;
}

/* ── Alignement (pilote par le widget Elementor) ───────────────────────── */

.asscw-showcase__card-body {
	text-align: var(--asscw-showcase-align, left);
	align-items: var(--asscw-showcase-align-items, stretch);
}

.asscw-showcase__grid {
	justify-content: var(--asscw-showcase-justify, stretch);
}