/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
/* Sezioni categoria nella pagina del marchio ([hi_marchio_prodotti]). */
.hi-marchio-products__category + .hi-marchio-products__category {
	margin-top: 3rem;
}

/* Blu dei titoli categoria come sul sito precedente (#0072ce, blu del logo Geass). */
.hi-marchio-products__category-name {
	margin-bottom: 0.5rem;
	color: #0072ce;
}

.hi-marchio-products__category-name a {
	color: inherit;
}

.hi-marchio-products__category-name a:hover {
	color: var(--color-content-link-hover, inherit);
}

.hi-marchio-products__category-description {
	margin-bottom: 1.5rem;
	opacity: 0.8;
}

/* Fallback senza Impreza: griglia semplice di card. */
.hi-marchio-products__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
}

.hi-marchio-products__product-image img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Card prodotto (Grid Layout "Layout prodotto" 3180274) nelle griglie del marchio.
 *
 * Obiettivo: foto, titoli e prezzi alla stessa altezza in ogni riga (niente pulsante, come in prod).
 * - la card e' una colonna flessibile alta quanto la riga della griglia (Impreza mette
 *   gia' height: 100% su .w-grid-item-h);
 * - area immagine ad altezza fissa, foto "contenuta" e centrata;
 * - titolo al massimo su 3 righe con spazio riservato per 3 righe;
 * - prezzo / "Preventivo su richiesta" in fondo con margin-top: auto.
 * Misure in px: il rem di Impreza e' fluido.
 */
.hi-marchio-products .w-grid-item-h {
	display: flex;
	flex-direction: column;
}

.hi-marchio-products .hi-card-immagine-box {
	height: 200px;
	align-items: center;
	justify-content: center;
}

.hi-marchio-products .hi-card-immagine-box .hi-card-immagine {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin-bottom: 0;
}

.hi-marchio-products .hi-card-immagine a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.hi-marchio-products .hi-card-immagine img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 200px;
	object-fit: contain;
}

.hi-marchio-products .hi-card-titolo {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	min-height: calc(3 * 1.3em);
}

/* Prezzo o "Preventivo su richiesta" (uno solo dei due e' visibile) in fondo alla card. */
.hi-marchio-products .hi-card-prezzo {
	margin-top: auto;
}