/*
 * Catalogo ETOS Retail — /shop/ e gli archivi di categoria prodotto.
 * Classi sul body: etos-shop (comune) + etos-catalog.
 *
 * Variabili, marchio, occhiello e pulsante stanno in comune.css, caricato
 * prima di questo.
 *
 * Il catalogo ha un compito solo: far scegliere fra tre piani e mostrare i due
 * servizi che ci si aggiungono. Quindi non e' una griglia di prodotti tutti
 * uguali: i piani sono tre colonne piene, i servizi due schede piu' basse e
 * senza pulsante pieno, perche' da soli non si comprano.
 *
 * La pagina /prezzi/ resta il confronto commerciale, con i prezzi mensili come
 * ancora. Qui i prezzi sono quelli veri, annuali, e ogni scheda porta al suo
 * configuratore: per questo il catalogo non ripete la fascia arancione della
 * pagina prezzi, sarebbe la stessa pagina due volte.
 *
 * Ritmo verticale, stessa scala della scheda prodotto:
 *   0.4 dentro un elemento · 0.9 etichetta · 1.75 tra blocchi · 3.5 tra sezioni
 */

/* L'intestazione del tema e' sovrapposta al contenuto: senza questo margine il
   titolo del catalogo ci finisce sotto (stessa ragione della scheda prodotto).
   6rem e non 4: /shop/ ha sopra di se' una fascia vuota di 60 px che gli
   archivi di categoria non hanno, e con 4rem li' il titolo finiva sotto il
   menu. La misura buona e' quella che basta anche senza fascia. */
.etos-catalog .woocommerce-container {
	padding-top: 6rem;
	padding-bottom: 4rem;
}

/* ---------------------------------------------------------- intestazione */

/* Il filetto corre per tutta la pagina — separa l'intestazione dalla griglia,
   che e' larga uguale — mentre il testo si ferma alla misura leggibile. */
.etos-catalog .woocommerce-products-header {
	margin: 0 0 3.5rem;
	padding: 0 0 2.5rem;
	border-bottom: 1px solid var(--etos-rule);
}

.etos-catalog .etos-catalog__title {
	max-width: 46rem;
	margin: 0 0 1.75rem;
	color: var(--etos-ink);
	font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

/* La riga di presentazione e' il contenuto della pagina Negozio, stampato da
   WooCommerce: Avada lo racchiude in .post-content. */
.etos-catalog .woocommerce-products-header .post-content {
	max-width: 60ch;
	color: var(--etos-muted);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.etos-catalog .woocommerce-products-header .post-content p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------- griglia */

/* Avada dispone le card a float con larghezze in percentuale e le allinea con
   un clearfix. Qui la griglia e' in sei colonne: un piano ne occupa due (tre
   per riga), un servizio tre (due per riga). Cosi' le due famiglie si leggono
   come due righe diverse senza dover spezzare l'elenco in due liste — che il
   template di WooCommerce non consente, essendo un <ul> solo. */
.etos-catalog ul.products {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.etos-catalog ul.products::before,
.etos-catalog ul.products::after {
	content: none;
}

/* Solo cio' che Avada imposta per disporre a float: la spaziatura interna e'
   della scheda, e sta nella regola sotto. Azzerare anche il padding qui
   significava vincere per specificita' su .etos-card e incollare il testo al
   bordo: due regole sullo stesso pezzo di scatola, quella piu' lunga vince. */
.etos-catalog ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	clear: none;
}

.etos-catalog .etos-card--plan {
	grid-column: span 2;
}

.etos-catalog .etos-card--service {
	grid-column: span 3;
}

/* ----------------------------------------------------------------- scheda */

/* Selettore lungo quanto quello che azzera il <li> di Avada: la scatola della
   scheda si decide qui e in un posto solo. */
.etos-catalog ul.products li.etos-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 2.25rem;
	border: 1px solid var(--etos-rule);
	border-radius: var(--etos-radius);
	background: var(--awb-color1);
	text-align: left;
}

/* Un servizio non e' un piano: sta su una superficie invece che sul fondo
   pagina, cosi' la seconda riga si legge come un'altra cosa senza bisogno di un
   titolo di sezione — che dentro l'unico <ul> dei prodotti non ci starebbe. */
.etos-catalog ul.products li.etos-card--service {
	background: var(--etos-surface);
}

/* Il marchio e' l'unica immagine della scheda e fa da intestazione: piu' piccolo
   che sulla scheda prodotto, dove apre la pagina. */
.etos-catalog .etos-card .etos-mark {
	width: 11rem;
	margin-bottom: 1.75rem;
}

/* L'occhiello dice due cose — cadenza e risparmio — in una colonna larga un
   terzo di pagina: con il corpo della scheda prodotto andava a capo spezzando
   "RISPARMI 100 €". Un punto in meno e un filo di spaziatura in meno lo tengono
   su una riga sola. */
.etos-catalog .etos-card .etos-eyebrow {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
}

.etos-catalog .etos-card__title {
	margin: 0 0 0.9rem;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.etos-catalog .etos-card__title a {
	color: var(--etos-ink);
	text-decoration: none;
}

.etos-catalog .etos-card__title a:hover,
.etos-catalog .etos-card__title a:focus-visible {
	color: var(--etos-action);
}

/* Il prezzo e' il dato che si confronta fra una scheda e l'altra: sta sulla
   stessa riga di base in tutte e tre, e l'importo pieno barrato lo precede in
   piccolo invece di stargli accanto — accanto rubava larghezza al numero. */
.etos-catalog .etos-card__price {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5rem;
	align-items: baseline;
	margin: 0 0 1.75rem;
	color: var(--etos-ink);
	font-size: 1.875rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums slashed-zero;
}

.etos-catalog .etos-card__price del {
	order: -1;
	flex-basis: 100%;
	margin-bottom: 0.4rem;
	color: var(--etos-muted);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0;
	text-decoration-thickness: 1px;
}

/* Avada colora di azzurro gli importi (color5, il colore dei collegamenti):
   qui il prezzo e' testo, non un collegamento. Il barrato resta attenuato: la
   regola sotto e' piu' specifica e vince su questa. */
.etos-catalog .etos-card__price .woocommerce-Price-amount,
.etos-catalog .etos-card__price ins {
	background: none;
	color: var(--etos-ink);
	text-decoration: none;
}

.etos-catalog .etos-card__price del .woocommerce-Price-amount {
	color: var(--etos-muted);
}

/* "/anno" e "IVA esclusa" sono note, non prezzo: restano leggibili ma non
   competono con l'importo. */
.etos-catalog .etos-card__price .subscription-details,
.etos-catalog .etos-card__price small {
	color: var(--etos-muted);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0;
}

/* WooCommerce stampa il suffisso IVA prima della cadenza; si legge al
   contrario — prima di che periodo e' il prezzo, poi come e' tassato. */
.etos-catalog .etos-card__price .woocommerce-price-suffix {
	order: 1;
}

.etos-catalog .etos-card__excerpt {
	margin: 0 0 1.75rem;
	color: var(--etos-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.etos-catalog .etos-card__excerpt p:last-child {
	margin-bottom: 0;
}

/* I pulsanti si allineano in fondo alle tre schede anche quando le descrizioni
   sono di altezza diversa: la scheda e' una colonna flessibile e questo margine
   mangia lo spazio che avanza. */
.etos-catalog .etos-card__action {
	margin-top: auto;
}

/* Sul piano il pulsante e' pieno e a tutta larghezza: da qui si va a comprare,
   ed e' l'azione principale della pagina. Sul servizio resta di contorno, che
   e' il peso giusto per qualcosa che si aggiunge a un piano. */
.etos-catalog .etos-card--plan .etos-card__action {
	align-self: stretch;
	padding: 0.9rem 1.1rem;
	background: var(--etos-action);
	color: var(--awb-color1);
	text-align: center;
}

.etos-catalog .etos-card--plan .etos-card__action:hover,
.etos-catalog .etos-card--plan .etos-card__action:focus-visible {
	background: var(--etos-ink);
	border-color: var(--etos-ink);
	color: var(--awb-color1);
}

/* ------------------------------------------------------------- confronto */

/* Chiude la griglia ed e' larga quanto lei: un rimando in fondo, allineato ai
   bordi delle schede, con l'azione a destra dove finisce la lettura. */
.etos-catalog .etos-help {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	align-items: center;
	justify-content: space-between;
	margin: 1.75rem 0 0;
	padding: 2.25rem;
	border: 1px solid var(--etos-rule);
	border-radius: var(--etos-radius);
}

.etos-catalog .etos-help__title {
	margin: 0 0 0.4rem;
	color: var(--etos-ink);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

.etos-catalog .etos-help__note {
	max-width: 52ch;
	margin: 0;
	color: var(--etos-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.etos-catalog .etos-help__link {
	flex-shrink: 0;
	padding: 0.9rem 1.5rem;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
	/* Due piani per riga e un servizio a tutta larghezza: sotto i mille pixel
	   tre colonne lasciano al prezzo meno spazio del suo stesso corpo. */
	.etos-catalog ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}

	.etos-catalog .etos-card--plan,
	.etos-catalog .etos-card--service {
		grid-column: span 1;
	}
}

@media (max-width: 640px) {
	.etos-catalog ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	.etos-catalog ul.products li.etos-card {
		padding: 1.75rem;
	}

	.etos-catalog .woocommerce-products-header {
		margin-bottom: 2.5rem;
		padding-bottom: 1.75rem;
	}

	/* In colonna il pulsante non ha piu' una destra dove stare: va sotto il
	   testo, largo quanto il blocco. Serve la direzione a colonna: con la riga
	   che va a capo, align-self allarga in verticale, non in orizzontale. */
	.etos-catalog .etos-help {
		flex-direction: column;
		align-items: stretch;
		gap: 1.5rem;
		padding: 1.75rem;
	}

	.etos-catalog .etos-help__link {
		text-align: center;
	}
}