/**
 * SIIRA Santé — Vitrine produits de la page d'accueil.
 *
 * Cartes en verre dépoli, plus grandes que celles de la boutique, dans le
 * carrousel du plugin. Tout est portée par la classe « siira-showcase »
 * posée sur la section Elementor : la boutique et les produits liés gardent
 * leurs cartes compactes, faites pour la comparaison.
 *
 * Le fond teinté de la section n'est pas décoratif : sans lui, le flou de
 * `backdrop-filter` n'a rien à flouter et l'effet de verre disparaît.
 *
 * @package SIIRA_Sante
 */

/* =========================================================================
   Le champ teinté
   ====================================================================== */

.siira-showcase {
	background-color: var(--siira-cream);
	background-image:
		radial-gradient(58% 48% at 14% 12%, rgba(95, 147, 80, 0.16), transparent 62%),
		radial-gradient(52% 44% at 88% 78%, rgba(201, 162, 74, 0.18), transparent 60%),
		linear-gradient(168deg, var(--siira-cream) 0%, var(--siira-cream-200) 55%, var(--siira-cream) 100%);
}

/* Les flèches débordent du conteneur : sans cela elles seraient rognées. */
.siira-showcase .siira-carousel {
	overflow: visible;
}

/* =========================================================================
   Largeur des diapositives

   2,4 cartes visibles au lieu de 3 : chaque carte gagne environ 40 % de
   largeur, et celle qui dépasse annonce la suite mieux qu'une flèche.
   ====================================================================== */

.siira-showcase .siira-carousel--ready ul.products > li.product {
	flex: 0 0 calc((100% - var(--siira-gutter) * 2) / 2.4);
}

/* Sans JavaScript, la grille reste lisible en trois colonnes. */
.siira-showcase ul.products {
	gap: var(--siira-gutter);
}

/* =========================================================================
   La carte en verre dépoli
   ====================================================================== */

.siira-showcase ul.products li.product {
	padding: 18px 18px 22px;
	background-color: rgba(255, 255, 255, 0.58);
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 20px;
	box-shadow: 0 12px 34px rgba(22, 41, 74, 0.1);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
	overflow: visible;
}

/* Navigateurs sans flou : on remonte l'opacité pour garder le contraste.
   La carte perd la matière, jamais l'information. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.siira-showcase ul.products li.product {
		background-color: rgba(255, 255, 255, 0.92);
	}
}

.siira-showcase ul.products li.product:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 52px rgba(22, 41, 74, 0.16);
}

/* Le visuel repose sur son propre pavé clair, arrondi. */
.siira-showcase ul.products li.product img {
	padding: 18px;
	margin-bottom: 0;
	border-radius: 14px;
	background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(247, 244, 239, 0.6));
}

/* =========================================================================
   Contenu : plus grand, plus dépouillé
   ====================================================================== */

/* La marque disparaît : le nom du produit suffit sur une gamme de cinq. */
.siira-showcase .siira-card__brand {
	display: none;
}

.siira-showcase ul.products li.product .woocommerce-loop-product__title,
.siira-showcase ul.products li.product h2 {
	padding: 20px 6px 0;
	font-family: var(--siira-font-display);
	font-size: 1.3125rem;
	font-weight: var(--siira-fw-semibold);
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: var(--siira-heading);
}

/* La ligne d'usages n'apparaît que dans la vitrine : sur les cartes
   compactes de la boutique, elle surchargerait. */
.siira ul.products li.product .siira-card__usages {
	display: none;
}

.siira-showcase ul.products li.product .siira-card__usages {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0;
	padding: 0 6px;
	list-style: none;
}

.siira-showcase ul.products li.product .siira-card__usages li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 11px 4px 9px;
	background-color: rgba(255, 255, 255, 0.7);
	border: 1px solid var(--siira-border);
	border-radius: var(--siira-radius-pill);
	font-family: var(--siira-font-body);
	font-size: var(--siira-fs-tiny);
	font-weight: var(--siira-fw-medium);
	line-height: 1.3;
	color: var(--siira-navy);
}

.siira-showcase ul.products li.product .siira-card__usages li::before {
	content: '';
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--siira-leaf);
}

.siira-showcase .siira-card__subtitle {
	padding: 10px 6px 0;
	font-size: var(--siira-fs-small);
	line-height: 1.55;
}

.siira-showcase ul.products li.product .siira-rating {
	padding: 10px 6px 0;
}

/* =========================================================================
   Pied de carte
   ====================================================================== */

.siira-showcase .siira-card__footer {
	align-items: center;
	padding: 18px 6px 0;
}

.siira-showcase ul.products li.product .price {
	font-family: var(--siira-font-display);
	font-size: 1.375rem;
	font-weight: var(--siira-fw-semibold);
	color: var(--siira-navy);
	font-variant-numeric: tabular-nums;
}

.siira-showcase ul.products li.product .button {
	padding: 11px 20px;
	border-radius: var(--siira-radius-pill);
	font-size: var(--siira-fs-small);
	font-weight: var(--siira-fw-semibold);
}

/* Les pastilles « Promo » et « Nouveau » suivent le rayon de la carte. */
.siira-showcase ul.products li.product .onsale,
.siira-showcase ul.products li.product .siira-badge--new,
.siira-showcase ul.products li.product .siira-badge--rank {
	top: 32px;
	left: 32px;
}

/* =========================================================================
   Adaptations
   ====================================================================== */

@media (max-width: 1024px) {
	.siira-showcase .siira-carousel--ready ul.products > li.product {
		flex-basis: calc((100% - var(--siira-gutter)) / 1.6);
	}
}

@media (max-width: 767px) {
	.siira-showcase .siira-carousel--ready ul.products > li.product {
		flex-basis: 82%;
	}

	.siira-showcase ul.products li.product {
		padding: 14px 14px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.siira-showcase ul.products li.product:hover {
		transform: none;
	}
}