/*
 * Le schede della griglia offerte — la striscia in fondo.
 *
 * ## Il difetto, e perché non era una questione di gusto
 *
 * Sotto il pulsante ogni scheda dice tre cose: la categoria, il negozio e
 * quanto manca alla scadenza. Rehub le dispone con i **float**:
 *
 *     .cat_store_for_grid  float: left     categoria + negozio
 *     .date_for_grid       float: right    «3 giorni alla scadenza»
 *
 * Un float a destra si prende lo spazio che gli serve e lascia a quello a
 * sinistra quello che avanza. Su una colonna larga 270 px avanzava poco, e la
 * categoria usciva tagliata: «FOTOCAMERE E …», «GRANDI ELETTR…», «PICCOLI
 * ELETTR…». Chi legge vede che manca qualcosa e non sa cosa — che è peggio di
 * non scriverla affatto.
 *
 * Qui i due blocchi diventano una riga sola governata da `flex`, dove la
 * scadenza dichiara di non volersi restringere e la categoria prende tutto il
 * resto. Si tronca solo quando è davvero troppo lunga, non perché qualcun
 * altro si è servito per primo.
 *
 * ## Le stesse regole del foglio della pagina offerta
 *
 * Solo ASCII fuori dai commenti: LiteSpeed unisce i fogli e li serve senza
 * dichiarare la codifica, quindi un carattere non inglese dentro un `content:`
 * arriva spezzato nei suoi byte. Le icone sono SVG scritti qui dentro.
 *
 * Gli `!important` ci sono solo dove si deve disfare qualcosa che ce l'ha
 * già — i float di Rehub e il CSS delle Theme Options.
 */

/*
 * ## La stessa tavolozza della pagina prodotto, non una seconda
 *
 * I nomi e i valori sono copiati da `offerta.css` carattere per carattere. Non
 * e' pigrizia: una griglia che porta a una pagina e la pagina che ne arriva
 * devono sembrare lo stesso sito, e due grigi «quasi uguali» a quattro
 * centimetri di distanza si notano piu' di due grigi diversi.
 *
 * Sono due file perche' si caricano su pagine diverse — la griglia non
 * compare sulla singola offerta e viceversa — e un unico foglio farebbe
 * scaricare a ognuna il doppio di quello che usa.
 */
.offer_grid,
.meta_for_grid {
	--on1-accento: #e8710a;
	--on1-inchiostro: #0f172a;
	--on1-inchiostro-lieve: #475569;
	--on1-tenue: #94a3b8;
	--on1-bordo: #e7e5df;
	--on1-fondo: #ffffff;
	--on1-fondo-lieve: #faf9f7;
	--on1-verde: #059669;
	--on1-verde-lieve: #ecfdf5;
}

/* ── La striscia in fondo ───────────────────────────────────────────────── */

.meta_for_grid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
	padding-top: 9px;
	border-top: 1px solid var(--on1-bordo);
	/* Rehub chiude i float con un `clearfix`: da flex non serve più, e il
	   pseudo-elemento lascerebbe una riga vuota alta zero che sposta tutto. */
	overflow: visible;
}

.meta_for_grid::before,
.meta_for_grid::after {
	content: none !important;
}

/*
 * Categoria e negozio: prendono lo spazio che avanza, e si accorciano solo
 * quando non ce n'è davvero. `min-width: 0` non è pignoleria — senza, un
 * elemento flex non scende sotto la larghezza del suo contenuto e il
 * troncamento non parte mai: sarebbe la scadenza a essere spinta fuori.
 */
.meta_for_grid .cat_store_for_grid {
	float: none !important;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 7px;
	margin: 0 !important;
	font-style: normal !important;
	line-height: 1.35;
}

.meta_for_grid .cat_store_for_grid > * {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* La categoria: piccola e in maiuscoletto, perché dice dove si trova il
   prodotto e non che cos'e'. Il titolo sopra dice gia' che cos'e'. */
.meta_for_grid .cat_store_for_grid .tag_post_cat_meta,
.meta_for_grid .cat_store_for_grid .cat_post_meta_item {
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--on1-tenue) !important;
}

/* Il negozio: e' un nome proprio, e si legge come tale. */
.meta_for_grid .cat_store_for_grid .tag_post_store_meta,
.meta_for_grid .cat_store_for_grid .store_post_meta_item {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--on1-inchiostro-lieve) !important;
}

.meta_for_grid .cat_store_for_grid a {
	color: inherit !important;
	text-decoration: none !important;
}

.meta_for_grid .cat_store_for_grid a:hover {
	text-decoration: underline !important;
}

/*
 * La scadenza: una pastiglia che non si restringe.
 *
 * `flex: 0 0 auto` e' la riga che risolve il difetto: dichiara che questo
 * blocco tiene la sua misura, e quindi l'altro sa quanta ne resta. Con i float
 * quella conversazione non avveniva.
 */
.meta_for_grid .date_for_grid {
	float: none !important;
	flex: 0 0 auto;
	margin: 0 !important;
}

.meta_for_grid .date_for_grid .date_ago {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px 3px 8px;
	border: 1px solid var(--on1-bordo);
	border-radius: 100px;
	background: var(--on1-fondo-lieve);
	font-size: 11px !important;
	font-weight: 600;
	color: var(--on1-tenue) !important;
	white-space: nowrap;
}

/* L'orologio del tema e' un carattere di un font: si sostituisce con un
   disegno, per la stessa ragione delle stelle sulla pagina prodotto. */
.meta_for_grid .date_for_grid .date_ago .rhicon {
	display: none !important;
}

.meta_for_grid .date_for_grid .date_ago::before {
	content: "";
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── La pastiglia verde sopra la striscia ──────────────────────────────── */

/*
 * `verifymeta` e' il campo `rehub_offer_verify_label`. Fino al 16 settembre
 * 2026 su 164 schede diceva «Minimo storico» sotto un nastro che diceva gia'
 * «Minimo storico», e su 335 era vuota. Adesso porta le condizioni vere o le
 * stelle di Amazon — vedi `scripts/etichette_card.py`.
 */
.offer_grid .verifymeta {
	/* La stessa ricetta delle targhette della pagina prodotto: tonda, bordo
	   sottile, fondo chiarissimo. Cambia solo la misura, perche' qui la
	   colonna e' larga un terzo. */
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	margin: 0 0 4px !important;
	padding: 3px 10px;
	border-radius: 100px;
	border: 1px solid #a7f3d0;
	background: var(--on1-verde-lieve);
	font-size: 11px !important;
	font-weight: 700 !important;
	color: var(--on1-verde) !important;
	line-height: 1.4;
}

/*
 * ## Una pastiglia sola, e non due colori
 *
 * Sulla pagina prodotto le condizioni sono verdi e il voto e' arancione,
 * perche' sono due cose diverse. Qui dentro ci finiscono tutte e due — le
 * condizioni e le stelle — e distinguerle richiederebbe di leggere il testo
 * dell'etichetta, che il CSS non sa fare.
 *
 * Il markup lo compone Rehub e non noi, quindi non possiamo metterci una
 * classe. Resta un colore solo: verde, che su tutte e due vuol dire «questa e'
 * una buona notizia» e non dice niente di falso.
 *
 * Il giorno in cui servisse, la strada e' un filtro lato PHP sul contenuto
 * della griglia — non una regola CSS che finge di sapere.
 */

.offer_grid .verifymeta .rhicon {
	font-size: 11px !important;
}

@media (max-width: 480px) {
	.meta_for_grid {
		gap: 8px;
	}

	.meta_for_grid .date_for_grid .date_ago {
		font-size: 10.5px !important;
		padding: 3px 8px 3px 7px;
	}

	/* Sotto i 480 px la categoria cede il posto: il negozio e la scadenza sono
	   quello che serve a decidere se toccare la scheda, e la categoria e'
	   scritta nel filtro da cui si e' arrivati. */
	.meta_for_grid .cat_store_for_grid .tag_post_cat_meta,
	.meta_for_grid .cat_store_for_grid .cat_post_meta_item {
		display: none !important;
	}
}


/* ══════════════════════════════════════════════════════════════════════════
 *  LA SCHEDA, E LA FOTO DENTRO
 *
 *  Qui la griglia si allinea alle schede della pagina prodotto. Non e' una
 *  questione di gusto: chi clicca su una scheda arriva su una pagina, e le due
 *  devono sembrare lo stesso sito.
 *
 *  Cosa divergeva, misurato sul CSS servito:
 *
 *      griglia   bordo 2px #e8ecf1 (azzurrino), hover #c7d2fe (indaco)
 *      pagina    bordo 1px #e7e5df (grigio caldo), accento #e8710a
 *
 *  Due grigi di temperatura diversa a un clic di distanza si notano.
 *
 *  Gli `!important` servono: le regole da disfare stanno nel CSS delle Theme
 *  Options e ce l'hanno.
 * ══════════════════════════════════════════════════════════════════════════ */

.offer_grid.col_item {
	border: 1px solid #e7e5df !important;
	border-radius: 14px !important;
	background: #fff !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.offer_grid.col_item:hover {
	/* L'arancio del sito al posto dell'indaco, e un'ombra piu' bassa: la
	   scheda si solleva di poco, non salta. */
	border-color: #e8710a !important;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08) !important;
}

/*
 * ## La foto piu' grande
 *
 * Era a `max-width: 90%`, cioe' con un margine del 5% per parte dentro una
 * cornice che ha gia' la sua imbottitura. Su una colonna da 270 px sono
 * ventisette pixel di vuoto intorno a un prodotto che e' la ragione per cui si
 * guarda la scheda.
 *
 * A tutta larghezza, e piu' alta: la cornice resta la stessa, il prodotto la
 * riempie. `contain` e non `cover`, come sulla pagina prodotto — tagliare i
 * bordi per riempire vuol dire tagliare il prodotto.
 */
.offer_grid figure.mb15 img,
.offer_grid_com.offer_act_enabled figure.mb15 img {
	max-width: 100% !important;
	max-height: 215px !important;
	object-fit: contain !important;
}

/* Il bollo dello sconto: tondo come le pastiglie della pagina prodotto,
   invece che un rettangolo con gli angoli appena smussati. */
.offer_grid .grid_onsale {
	border-radius: 100px !important;
	padding: 4px 10px !important;
	letter-spacing: 0.2px;
}

@media (max-width: 600px) {
	.offer_grid_com.mobile_grid figure.mb15 img {
		/* Da telefono il tema fissa 100 px: su una scheda larga mezzo schermo
		   il prodotto diventa un francobollo. */
		height: 130px !important;
	}
}