/* Migros Home Manager — sezione "Prodotti in offerta" [mhm_offerte_prodotti]
   Stile analogo a [mhm_consiglio] (stessi colori/dimensioni), con
   l'immagine sopra la card invece che a fianco e un campo descrizione in
   più. Nessuno sfondo qui: colore di sfondo e decorazioni (es. il
   triangolo in testata) restano gestiti nel visual builder attorno allo
   shortcode, come per il Consiglio della settimana. */

.mhm-op-heading {
	font-size: 28px;
	font-weight: 800;
	color: #fff;
	text-align: center;
	margin: 0 0 32px;
}

.mhm-op-grid {
	display: grid;
	gap: 60px;
	margin: 0 0 20px;
}
.mhm-op-cols-1 {
	grid-template-columns: 1fr;
}
.mhm-op-cols-2 {
	grid-template-columns: repeat(2, 1fr);
}
.mhm-op-cols-3 {
	grid-template-columns: repeat(3, 1fr);
}
.mhm-op-cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

.mhm-op-card {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.mhm-op-image {
	margin: 0 0 16px;
}
/* Immagine mostrata per intero, mai tagliata: nessun background-image e
   nessun object-fit:cover, solo width:100% + height:auto (stesso approccio
   già usato dagli altri shortcode del plugin). */
.mhm-op-image img {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.mhm-op-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.mhm-op-tags {
	display: flex;
	flex-direction: column;
	/* stretch (non center): la pill e il badge devono avere la stessa
	   larghezza, quella del più largo dei due (vedi sotto). */
	align-items: stretch;
	margin: 0 0 12px;
}
.mhm-op-pill {
	display: block;
	box-sizing: border-box;
	background: #000;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	text-align: left;
	padding: 5px 14px;
}
/* Riga "confezione" vuota: stampata comunque (vedi shortcode) per
   riservare lo spazio, ma resa invisibile — così il badge sconto resta
   sempre alla stessa altezza su tutte le card, con o senza confezione. */
.mhm-op-pill-empty {
	visibility: hidden;
}
.mhm-op-badge {
	display: block;
	box-sizing: border-box;
	background: #ff6600;
	color: #fff;
	font-weight: 800;
	font-size: 35px;
	line-height: 1;
	text-align: left;
	padding: 6px 14px;
}

.mhm-op-price {
	text-align: left;
	font-size: 35px;
	font-weight: 800;
	line-height: 1;
	color: #fff;
	margin: 0;
}

.mhm-op-compare {
	align-self: stretch;
	text-align: left;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	line-height: 12px;
	margin: 8px 0 14px;
}

/* Titolo, label (confronto) e descrizione: "bandiera sinistra" su tutta
   la larghezza della card (align-self:stretch + text-align:left) — utile
   soprattutto sulle righe multiple (a-capo), che altrimenti sarebbero
   ciascuna centrata rispetto alle altre invece che allineate a sinistra.
   Confezione/sconto/prezzo sono anch'essi a sinistra (vedi
   .mhm-op-content:align-items:flex-start più sopra), ma restano box
   stretti al proprio contenuto, non stirati sulla larghezza della card. */
.mhm-op-title {
	align-self: stretch;
	text-align: left;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	margin: 0 0 6px;
}

.mhm-op-desc {
	align-self: stretch;
	text-align: left;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 500;
	color: #fff;
	margin: 0;
}
/* Descrizione da editor visuale (dalla 2.12.1): ogni Invio è un
   paragrafo, mostrato come semplice a capo (nessuno spazio extra). */
.mhm-op-desc p {
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* 4 prodotti: 4 colonne desktop, 2 in tablet, 1 in mobile.
   3 prodotti: 3 colonne fino al breakpoint mobile, poi 1 (nessuna via di
   mezzo richiesta per questo caso). */
@media (max-width: 1023px) {
	.mhm-op-grid {
		gap: 30px;
	}
	.mhm-op-cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.mhm-op-heading {
		font-size: 22px;
		margin-bottom: 24px;
	}
	.mhm-op-grid {
		gap: 20px;
	}
	.mhm-op-cols-2,
	.mhm-op-cols-3,
	.mhm-op-cols-4 {
		grid-template-columns: 1fr;
	}
	.mhm-op-badge,
	.mhm-op-price {
		font-size: 28px;
	}
}

@media (max-width: 400px) {
	.mhm-op-heading {
		font-size: 19px;
		margin-bottom: 18px;
	}
	.mhm-op-badge,
	.mhm-op-price {
		font-size: 24px;
	}
}