/* ============================================================
   Block: Prodotto in Evidenza
   Figma node: 1574:25482 — 1440×933px
   ============================================================ */

/* --- Layout wrapper --- */
.s4w-prodotto-evidenza {
	display: flex;
	flex-direction: row;
	min-height: 933px;
	padding-top: 96px;
	padding-bottom: 96px;
}

/* Variante immagine a destra: inverti ordine colonne */
.s4w-prodotto-evidenza--right {
	flex-direction: row-reverse;
}

/* --- Colonna immagine ambientale (≈50%) --- */
.prodotto-evidenza__media {
	flex: 0 0 50%;
	position: relative;
	overflow: hidden;
}

.prodotto-evidenza__media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* --- Colonna pannello prodotto (≈50%) --- */
/* padding: 10px, gap: 10px, flex col, center+center — da Figma 1574:25484 */
.prodotto-evidenza__panel {
	flex: 1 0 50%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px;
	gap: 10px;
}

/* --- Label "In evidenza" — Figma 1574:25495 ---
   absolute top:24px, centrata H
   Futura PT Medium 14px/20px, letter-spacing 0.04em, uppercase */
.prodotto-evidenza__label {
	position: absolute;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-primary);
	font-weight: var(--weight-medium);
	font-size: var(--paragraph-small);
	line-height: 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-main-900);
	white-space: nowrap;
}

/* --- Box contenuto prodotto — Figma 1574:25485 ---
   width: 342px, flex col, gap: 19px */
.prodotto-evidenza__inner {
	display: flex;
	flex-direction: column;
	gap: 19px;
	width: 75%;
	max-width: 400px;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

/* --- Box immagine prodotto (sfondo crema) — Figma 1574:25486 ---
   width: 342px, height: 410px, bg: #faeed9 = var(--bg-weak-100)
   bottiglia: 164.5×361px centrata, padding-top 24px */
.prodotto-evidenza__product-box {
	width: 100%;
	aspect-ratio: 1 / 1.2;
	background-color: var(--bg-weak-100);
	overflow: hidden;
}

.prodotto-evidenza__product-img-wrap {
	width: 100%;
	height: 100%;
	display: block;
}

.prodotto-evidenza__product-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	display: block;
}

/* --- Testi prodotto — Figma 1574:25490 --- */
.prodotto-evidenza__product-info {
	display: flex;
	flex-direction: column;
}

.prodotto-evidenza__product-meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Nome prodotto — Figma 1574:25492
   Merriweather Regular 22px/1.2, letter-spacing -0.02em */
h3.prodotto-evidenza__product-name,
.prodotto-evidenza__product-name {
	font-family: 'Merriweather', serif;
	font-weight: var(--weight-regular);
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--text-main-900);
	text-transform: none !important;
	margin: 0;
}

/* Denominazione — Figma 1574:25493
   Merriweather Regular 14px/1.6 */
.prodotto-evidenza__product-denomination {
	font-family: 'Merriweather', serif;
	font-weight: var(--weight-regular);
	font-size: var(--paragraph-small);
	line-height: 1.6;
	color: var(--text-main-900);
	margin: 0;
}

/* Descrizione breve — Figma 1574:25494
   Merriweather Regular 14px/1.6, max-height 77px, overflow hidden */
.prodotto-evidenza__product-desc {
	font-family: 'Merriweather', serif;
	font-weight: var(--weight-regular);
	font-size: var(--paragraph-small);
	line-height: 1.6;
	color: var(--text-main-900);
	margin: 0;
	max-height: 77px;
	overflow: hidden;
}

/* Rimuovi tag <p> aggiuntivi dalla descrizione WooCommerce */
.prodotto-evidenza__product-desc p {
	margin: 0;
}

/* ============================================================
   Responsive — tablet ≤1024px
   ============================================================ */
@media (max-width: 1024px) {
	.s4w-prodotto-evidenza {
		min-height: 700px;
		padding-top: 60px;
		padding-bottom: 60px;
	}
}

/* ============================================================
   Responsive — mobile ≤768px
   ============================================================ */
@media (max-width: 768px) {
	.s4w-prodotto-evidenza,
	.s4w-prodotto-evidenza--right {
		flex-direction: column;
		min-height: unset;
		padding-top: 0;
		padding-bottom: 0;
	}

	/* Foto sopra: aspect-ratio 721/901 come Figma */
	.prodotto-evidenza__media {
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 721 / 901;
		position: relative;
		height: auto;
	}

	/* Pannello sotto: padding 64px verticale, 10px orizzontale */
	.prodotto-evidenza__panel {
		flex: 0 0 auto;
		padding: 64px 10px;
	}

	/* Label: top 19px come Figma */
	.prodotto-evidenza__label {
		top: 19px;
	}

	/* Inner: larghezza piena con padding laterale 30px */
	.prodotto-evidenza__inner {
		width: 100%;
		max-width: 100%;
		padding: 0 20px;
	}
}