/*
 * Schede ETOS Retail — piani e pagina di confronto.
 *
 * Tre classi sul body, messe dal plugin:
 *   etos-shop   cio' che le due pagine hanno in comune (colonna, identita',
 *               tipografia, pulsante, "Cosa include")
 *   etos-plan   il configuratore di un singolo abbonamento e il suo scontrino
 *   etos-group  la tabella di confronto del prodotto raggruppato
 * Nulla tocca gli altri prodotti.
 *
 * Le variabili --etos-*, il marchio, l'occhiello e il pulsante di scelta stanno
 * in comune.css, che questa pagina carica prima: sono gli stessi del catalogo.
 *
 * L'area di acquisto e' una colonna sola, centrata: si legge dall'alto in basso
 * — chi sei, cosa aggiungi, quanto costa, compra — senza colonne parallele da
 * far combaciare. "Cosa include" resta a tutta larghezza sotto.
 *
 * Il ritmo verticale usa una scala sola. Non introdurre valori fuori scala:
 *   0.4  dentro un elemento · 0.9  etichetta e controllo
 *   1.75 tra due add-on     · 2.5  tra blocchi     · 5.5 tra sezioni
 */

/* Il contenitore galleria di Avada resta nel markup anche quando il plugin non
   stampa l'immagine: toglierlo evita che si porti dietro larghezza o
   spaziature. Portava pero' anche il margine che teneva il contenuto sotto
   l'intestazione, che qui e' sovrapposta: va restituito al contenitore della
   scheda, altrimenti l'occhiello finisce dietro il menu. */
.etos-shop .avada-single-product-gallery-wrapper {
	display: none;
}

.etos-shop .woocommerce-container {
	padding-top: 4rem;
}

/* ------------------------------------------------------- area di acquisto */

.etos-shop div.product .summary.entry-summary {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}

/* Avada fa flottare a sinistra .summary-container e mette form.cart in flex:
   due impostazioni pensate per la scheda con galleria accanto. Qui vanno
   annullate, altrimenti la sezione "Cosa include" risale di fianco alla colonna
   e il configuratore si dispone in riga. */
/* Stessa profondita' di selettore della regola di Avada
   (.product .entry-summary .summary-container), piu' la classe sul body: senza
   quella profondita' il float non si annulla e la colonna resta larga meta'
   pagina, schiacciata a destra. */
.etos-shop .product .entry-summary .summary-container {
	float: none;
	max-width: var(--etos-col);
	margin-inline: auto;
}

.etos-shop div.product .summary-container > form.cart {
	display: block;
	float: none;
	margin: 0;
}

.etos-shop .etos-includes,
.etos-shop .etos-compare {
	clear: both;
}

/* ------------------------------------------------------------- identita' */

.etos-shop .etos-identity {
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--etos-rule);
}

/* Il marchio e l'occhiello che apre l'identita' stanno in comune.css: sono gli
   stessi del catalogo. */

.etos-shop h1.product_title {
	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;
}

.etos-shop .etos-identity p.price {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.75rem;
	align-items: baseline;
	margin: 0 0 1.75rem;
	font-size: clamp(2.2rem, 1.7rem + 1.6vw, 3rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums slashed-zero;
}

/* Il prezzo non e' un collegamento: non deve avere il colore dei collegamenti.
   Il colore va messo sull'importo, non sul paragrafo, altrimenti la regola di
   Avada sullo span vince. */
.etos-shop .etos-identity p.price .woocommerce-Price-amount,
.etos-shop .etos-identity p.price bdi,
.etos-shop .etos-identity p.price ins {
	color: var(--etos-ink);
	background: none;
	text-decoration: none;
}

/* Il prezzo pieno barrato va sopra, su una riga sua: sulla stessa riga
   dell'importo scontato i due numeri si contendono l'attenzione. */
.etos-plan .etos-identity p.price del,
.etos-service .etos-identity p.price del {
	flex-basis: 100%;
	margin-bottom: 0.3rem;
}

.etos-shop .etos-identity p.price del,
.etos-shop .etos-identity p.price del .woocommerce-Price-amount,
.etos-shop .etos-identity p.price del bdi {
	color: var(--etos-muted);
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: 0;
	opacity: 1;
}

/* WooCommerce affianca all'importo dei testi per i lettori di schermo: vanno
   tolti dal flusso, non nascosti, altrimenti aprono buchi fra gli elementi. */
.etos-shop p.price .screen-reader-text,
.etos-shop .group_table .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* "/anno" prima di "IVA esclusa": nel markup l'ordine e' invertito, ma si legge
   come la cadenza del prezzo, non come una nota fiscale che lo precede. */
.etos-shop .etos-identity p.price .subscription-details,
.etos-shop .etos-identity p.price .woocommerce-price-suffix {
	color: var(--etos-muted);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.etos-shop .etos-identity p.price .subscription-details {
	order: 1;
}

.etos-shop .etos-identity p.price .woocommerce-price-suffix {
	order: 2;
}

.etos-shop .woocommerce-product-details__short-description {
	margin: 0;
	color: var(--etos-muted);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.etos-shop .woocommerce-product-details__short-description p {
	margin: 0;
}

/* La quota di iscrizione la stampa WooCommerce Subscriptions in un blocco suo,
   subito dopo il prezzo, a corpo pieno: pesa come il prezzo mentre e' un suo
   dettaglio. Il margine negativo recupera lo stacco che il prezzo ha sotto di se'
   e che qui va speso dopo la quota, non prima: la quota resta a 6 px dal prezzo e
   l'estratto, che non ha margine proprio, riprende i 28 px di sempre. */
.etos-shop .woocommerce-subscriptions-product-details {
	margin: -1.35rem 0 1.75rem;
}

.etos-shop .woocommerce-subscriptions-product-details p {
	margin: 0;
	color: var(--etos-muted);
	font-size: 0.9375rem;
}

/* Rumore del tema che qui non porta informazione. */
.etos-shop .avada-availability,
.etos-shop .product-border,
.etos-shop .summary .fusion-separator,
.etos-shop .product_meta {
	display: none;
}

/* --------------------------------------------------------- configuratore */

.etos-plan .wc-pao-addons-container::before {
	content: "Configura il piano";
	display: block;
	margin: 2.5rem 0 0.9rem;
	color: var(--etos-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Product Add-ons avvolge le opzioni a interruttore in un fieldset: senza
   questo azzeramento quelle righe rientrano di qualche pixel rispetto alle
   altre e la colonna non e' piu' allineata. */
.etos-plan .wc-pao-addon-container fieldset,
.etos-plan .wc-pao-addon-container legend {
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	float: none;
}

.etos-plan .wc-pao-addon-container {
	margin: 0;
	padding: 1.1rem 0;
	border-top: 1px solid var(--etos-rule);
}

.etos-plan .wc-pao-addon-container:last-of-type {
	border-bottom: 1px solid var(--etos-rule);
}

/* Ogni opzione occupa due righe, non tre: nome sopra, descrizione sotto, e il
   controllo in una colonna a destra alta quanto la riga. Impilati, i sei
   add-on erano alti oltre mille pixel e spingevano il pulsante d'acquisto
   fuori dalla seconda schermata.
   Le due forme che Product Add-ons produce vanno agganciate in punti diversi:
   il moltiplicatore ha nome, descrizione e controllo come figli diretti del
   contenitore; l'interruttore li ha dentro un <fieldset>. Griglia quindi sul
   contenitore in un caso e sul fieldset nell'altro, distinti dall'attributo
   data-fieldset che il plugin stampa sul contenitore. */
.etos-plan .wc-pao-addon-container:not([data-fieldset]),
.etos-plan .wc-pao-addon-container[data-fieldset] > .wc-pao-fieldset {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	/* La seconda riga assorbe l'altezza in eccesso del controllo. Con due righe
	   automatiche l'eccedenza di un controllo alto — il gruppo di radio della
	   memoria ne occupa tre righe — si divide fra le due, e la descrizione si
	   staccava dal nome di una quindicina di pixel. */
	grid-template-rows: auto 1fr;
	column-gap: 1.5rem;
	align-items: start;
}

.etos-plan .wc-pao-addon-name {
	grid-column: 1;
	grid-row: 1;
}

.etos-plan .wc-pao-addon-description {
	grid-column: 1;
	grid-row: 2;
}

.etos-plan .wc-pao-addon-wrap {
	grid-column: 2;
	grid-row: 1 / span 2;
	/* Centrato sul blocco nome + descrizione, non allineato in alto come loro:
	   e' quello che teneva la casella di spunta a filo del nome. */
	align-self: center;
}

.etos-plan .wc-pao-addon-name {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.6rem;
	align-items: baseline;
	margin: 0;
	color: var(--etos-ink);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.etos-plan .wc-pao-addon-description {
	max-width: 52ch;
	margin: 0.25rem 0 0;
	color: var(--etos-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.etos-plan .wc-pao-addon-description p {
	margin: 0;
}

/* Il prezzo dell'add-on: cifre tabulari, tono attenuato, non compete col totale.
   Sta accanto a cio' che prezza — dopo il nome nelle opzioni a quantita', dopo
   "Attiva" negli interruttori — e non in una colonna sua: Product Add-ons lo
   annida in due posti diversi del markup e allinearli richiederebbe
   JavaScript. Meglio un prezzo attaccato al suo soggetto che una colonna
   finta. */
.etos-plan .wc-pao-addon-price {
	color: var(--etos-muted);
	font-size: 0.9375rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums slashed-zero;
	white-space: nowrap;
}

.etos-plan .wc-pao-addon-wrap {
	margin: 0;
	padding: 0;
}

/* Un campo numerico vuoto, da solo in fondo alla riga, non dice cosa aspetta.
   Il segno di moltiplicazione lo lega al prezzo che lo precede: "(+149,00 €)
   × 2". Product Add-ons non stampa un placeholder per questo tipo di campo
   (templates/addons/input-multiplier.php), quindi l'indizio va messo qui. */
.etos-plan .wc-pao-addon-container:not([data-fieldset]) .wc-pao-addon-wrap {
	display: flex;
	gap: 0 0.4rem;
	align-items: center;
}

.etos-plan .wc-pao-addon-container:not([data-fieldset]) .wc-pao-addon-wrap::before {
	content: "\00d7";
	color: var(--etos-muted);
	font-size: 0.9375rem;
}

/* L'avviso di superamento del tetto lo appende Product Add-ons dentro il
   contenitore del controllo, che qui e' una riga flex: in linea rubava larghezza
   al nome e arrivava a filo del bordo destro. Va sotto il campo, allineato con
   lui — e il campo resta a destra solo giustificando la riga, perche' la colonna
   della griglia si allarga sul figlio piu' largo, che ora e' l'avviso. */
.etos-plan .wc-pao-addon-container:not([data-fieldset]) .wc-pao-addon-wrap {
	flex-wrap: wrap;
	justify-content: flex-end;
}

.etos-plan .wc-pao-validation-notice {
	flex-basis: 100%;
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	text-align: right;
}

/* Negli add-on a interruttore la casella e la sua etichetta sono fratelli
   dentro un div senza classe stabile: vanno messi in riga. */
.etos-plan div.product form.cart .wc-pao-addon-wrap > div {
	display: flex;
	align-items: center;
	gap: 0 0.6rem;
}

.etos-plan div.product form.cart .wc-pao-addon-wrap label {
	display: flex;
	gap: 0 0.6rem;
	align-items: baseline;
	margin: 0;
	color: var(--etos-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
}

.etos-shop input[type="checkbox"] {
	flex: none;
	width: 1.15em;
	height: 1.15em;
	margin: 0;
	accent-color: var(--etos-action);
}

/* Spunta e pallino li disegna il browser: accent-color e' l'unica leva che li
   porta sul colore del sito senza rifare i controlli da zero, e ridisegnarli
   costerebbe anche gli stati di sistema (fuoco, alto contrasto, disabilitato). */
.etos-plan .wc-pao-addon-wrap input[type="checkbox"],
.etos-plan .wc-pao-addon-wrap input[type="radio"] {
	accent-color: var(--etos-action);
}

.etos-plan input.wc-pao-addon-input-multiplier {
	width: 4.5rem;
	padding: 0.45rem 0.5rem;
	border: 1px solid var(--etos-rule);
	border-radius: 2px;
	background: var(--awb-color1);
	color: var(--etos-ink);
	font-size: 1rem;
	font-variant-numeric: tabular-nums slashed-zero;
	text-align: center;
}

.etos-plan input.wc-pao-addon-input-multiplier:focus-visible,
.etos-shop input[type="checkbox"]:focus-visible,
.etos-shop button.single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--etos-ink);
	outline-offset: 2px;
}

/* --------------------------------------------------- lo scontrino (signature) */

.etos-plan #product-addons-total:empty {
	display: none;
}

.etos-plan .product-addon-totals {
	position: relative;
	width: 100%;
	margin-top: 2.5rem;
	padding: 1.5rem 1.5rem 2.2rem;
	background: var(--etos-surface);
}

/* Bordo inferiore dentellato: semicerchi del colore della pagina che mordono il
   fondo del blocco. Se i gradienti non sono supportati resta un bordo dritto. */
.etos-plan .product-addon-totals::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 10px;
	background: radial-gradient(circle at 9px 10px, var(--awb-color1) 6px, transparent 6.5px) 0 0 / 18px 10px repeat-x;
}

.etos-plan .product-addon-totals ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.etos-plan .product-addon-totals li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0 1rem;
	align-items: baseline;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--etos-rule);
	font-size: 0.9375rem;
	line-height: 1.35;
}

.etos-plan .product-addon-totals li:first-child {
	padding-top: 0;
}

.etos-plan .product-addon-totals .wc-pao-col1 strong {
	color: var(--etos-ink);
	font-weight: 500;
}

.etos-plan .product-addon-totals .wc-pao-addon-value {
	color: var(--etos-muted);
	font-weight: 400;
	font-variant-numeric: tabular-nums slashed-zero;
}

.etos-plan .product-addon-totals .wc-pao-col2 {
	color: var(--etos-ink);
	font-variant-numeric: tabular-nums slashed-zero;
	text-align: right;
	white-space: nowrap;
}

.etos-plan .product-addon-totals .wc-pao-col2 strong {
	font-weight: 500;
}

/* La riga del totale: e' il numero per cui esiste tutta la pagina. */
.etos-plan .product-addon-totals .wc-pao-subtotal-line {
	display: block;
	margin-top: 0.4rem;
	padding: 1.1rem 0 0;
	border-top: 2px solid var(--etos-ink);
	border-bottom: 0;
}

/* Attenzione: Product Addons scrive l'etichetta e il suffisso IVA come nodi di
   testo nudi dentro lo stesso <strong> dell'importo ("Subtotale <span
   class=amount>…</span> IVA esclusa"). Non essendo elementi non si possono
   stilare separatamente: qualunque maiuscoletto sull'etichetta griderebbe anche
   "IVA ESCLUSA". Per questo l'etichetta resta in tondo minuscolo. */
.etos-plan .product-addon-totals .wc-pao-subtotal-line > .price,
.etos-plan .product-addon-totals .wc-pao-subtotal-line > strong {
	display: block;
	margin: 0;
	color: var(--etos-muted);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	text-transform: none;
}

.etos-plan .product-addon-totals .wc-pao-subtotal-line .amount {
	display: block;
	margin: 0.3rem 0 0.15rem;
	color: var(--etos-ink);
	font-size: clamp(2rem, 1.6rem + 1.3vw, 2.6rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums slashed-zero;
}

.etos-plan .product-addon-totals .wc-pao-subtotal-line .subscription-details {
	color: var(--etos-muted);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
}

.etos-plan .validation_message {
	margin-top: 1rem;
	font-size: 0.875rem;
}

/* ------------------------------------------------- confronto fra i piani */

/* La pagina del prodotto raggruppato e' l'unico posto in cui i piani stanno
   uno accanto all'altro: e' la destinazione del rimando "Confronta tutti i
   piani" e il punto da cui si cambia abbonamento. */

.etos-group .etos-identity p.price {
	margin-bottom: 1.25rem;
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--etos-muted);
}

.etos-group .etos-identity p.price .woocommerce-Price-amount {
	font-size: 1.375rem;
	font-weight: 600;
}

.etos-group .group_table {
	width: 100%;
	margin: 1.75rem 0 0;
	border: 0;
	border-collapse: collapse;
}

.etos-group .group_table td {
	padding: 1.1rem 0;
	border: 0;
	background: none;
	vertical-align: baseline;
}

/* Una riga per piano, quindi un filetto fra tutte le righe. Finche' i mensili
   erano in vendita le righe erano sei, due per piano, e il filetto cadeva solo
   prima di ogni coppia perche' si leggessero come tre gruppi invece che come sei
   voci sciolte; a coppie dispari quel raggruppamento accostava piani diversi.
   Se i mensili tornano (scripts/listino.php, colonna 'attivo') va rimesso.
   I filetti stanno sulla riga e non sulle celle: una cella della riga e' un
   contenitore flex (vedi la colonna dei prezzi) e in quello stato, con
   border-collapse, il suo bordo non viene disegnato — il filetto risultava
   troncato a meta' tabella. */
.etos-group .group_table tr {
	border-top: 1px solid var(--etos-rule);
}

.etos-group .group_table tr:last-child {
	border-bottom: 1px solid var(--etos-rule);
}

/* L'identita' chiude gia' con un filetto: un secondo filetto subito sotto
   aprirebbe una fascia vuota fra i due. */
.etos-group .group_table tr:first-child {
	border-top: 0;
}

.etos-group .group_table tr:first-child td {
	padding-top: 0;
}

/* La colonna dell'azione si stringe sul suo contenuto: 1% in una tabella a
   larghezza automatica vale "il minimo possibile", e tutto il resto va al nome
   del piano. */
.etos-group .group_table .woocommerce-grouped-product-list-item__etos_action {
	width: 1%;
	padding-left: 2rem;
	text-align: right;
	white-space: nowrap;
}

/* Il pulsante di scelta sta in comune.css: e' lo stesso del catalogo. */

/* Il cambio piano non cambia la pagina, cambia cosa succede al clic: la nota
   sta sopra la tabella perche' e' la cornice di tutte le righe. */
.etos-group .etos-switch-note {
	margin: 1.75rem 0 0;
	padding: 0.9rem 1.1rem;
	background: var(--etos-surface);
	border-left: 3px solid var(--etos-action);
	color: var(--etos-ink);
	font-size: 0.9375rem;
}

.etos-group .group_table .woocommerce-grouped-product-list-item__label label {
	margin: 0;
	font-weight: 400;
}

/* Il nome del piano e' un collegamento alla sua scheda, ma in una lista di
   acquisto sei collegamenti blu sarebbero solo rumore: resta inchiostro e si
   sottolinea al passaggio del mouse. Il blu e' riservato ai collegamenti nel
   testo corrente. */
.etos-group .group_table .woocommerce-grouped-product-list-item__label a {
	color: var(--etos-ink);
	font-size: 1.0625rem;
	font-weight: 500;
	text-decoration: none;
}

.etos-group .group_table .woocommerce-grouped-product-list-item__label a:hover,
.etos-group .group_table .woocommerce-grouped-product-list-item__label a:focus-visible {
	text-decoration: underline;
}

/* Gli importi devono cadere su una colonna sola. Alla loro destra c'e' la
   cadenza, e "/mese" e "/anno" non hanno la stessa larghezza: senza un minimo
   sfalserebbero di qualche pixel tutti i numeri della colonna. */
.etos-group .group_table .woocommerce-grouped-product-list-item__price {
	display: flex;
	gap: 0 0.5rem;
	align-items: baseline;
	justify-content: flex-end;
	white-space: nowrap;
	font-variant-numeric: tabular-nums slashed-zero;
}

.etos-group .group_table .subscription-details {
	min-width: 3.2rem;
}

.etos-group .group_table .woocommerce-grouped-product-list-item__price ins {
	color: var(--etos-ink);
	font-size: 1.0625rem;
	font-weight: 600;
	background: none;
	text-decoration: none;
}

.etos-group .group_table .woocommerce-grouped-product-list-item__price del,
.etos-group .group_table .woocommerce-grouped-product-list-item__price del .woocommerce-Price-amount {
	color: var(--etos-muted);
	font-size: 0.875rem;
	font-weight: 400;
	opacity: 1;
}

.etos-group .group_table .subscription-details {
	color: var(--etos-muted);
	font-size: 0.8125rem;
	font-weight: 400;
}

/* La nota fiscale detta una volta per tutta la tabella, sotto la colonna dei
   prezzi a cui si riferisce. */
.etos-group .etos-tax-note {
	margin: 0.9rem 0 0;
	color: var(--etos-muted);
	font-size: 0.8125rem;
	text-align: right;
}

/* --------------------------------------------------------------- acquisto */

/* Il pulsante e' largo quanto la colonna e sta subito sotto a cio' che si
   compra: si leggono come un blocco solo, il conto e il gesto che lo accetta.
   L'arancio e' il colore con cui il resto del sito segnala l'azione (vedi
   "Prova la Trial" nell'intestazione); il blu resta ai collegamenti. */
.etos-shop div.product form.cart button.single_add_to_cart_button {
	display: block;
	width: 100%;
	margin-top: 1.75rem;
	padding-block: 1rem;
	background: var(--etos-action);
	border-color: var(--etos-action);
	color: var(--awb-color1);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-align: center;
}

.etos-plan div.product form.cart button.single_add_to_cart_button {
	margin-top: 1.25rem;
}

.etos-shop div.product form.cart button.single_add_to_cart_button:hover {
	background: var(--etos-ink);
	border-color: var(--etos-ink);
	color: var(--awb-color1);
}

/* Un abbonamento si compra uno per volta: WooCommerce emette comunque il
   contenitore quantita' con dentro un solo campo nascosto. */
.etos-shop div.product.sold-individually form.cart .quantity {
	display: none;
}

.etos-shop div.product form.cart .quantity {
	float: none;
	margin: 1.75rem 0 0;
}

.etos-shop p.first-payment-date {
	margin: 0.9rem 0 0;
	color: var(--etos-muted);
	font-size: 0.875rem;
}

/* ------------------------------------------------------------ cosa include */

.etos-shop .etos-includes {
	margin-top: 5.5rem;
	padding-top: 3rem;
	border-top: 1px solid var(--etos-rule);
}

.etos-shop .etos-includes__title {
	margin: 0 0 2.5rem;
	color: var(--etos-ink);
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.etos-shop .etos-includes__content {
	display: grid;
	grid-template-columns: 13rem minmax(0, 1fr);
	gap: 0 3rem;
}

/* Introduzione e nota finale attraversano tutta la griglia. */
.etos-shop .etos-includes__content > p {
	grid-column: 1 / -1;
	max-width: 70ch;
	margin: 0 0 1.75rem;
	color: var(--etos-muted);
}

.etos-shop .etos-includes__content > p:last-child {
	margin: 2.5rem 0 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--etos-rule);
	font-size: 0.9375rem;
}

/* L'etichetta di sezione sta nella colonna di sinistra, le funzioni scorrono a
   destra: il filetto superiore condiviso lega le due colonne in un'unica riga. */
.etos-shop .etos-includes__content > h3 {
	grid-column: 1;
	margin: 0;
	padding: 1.75rem 0 2.5rem;
	border-top: 1px solid var(--etos-rule);
	color: var(--etos-muted);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.etos-shop .etos-includes__content > ul {
	grid-column: 2;
	margin: 0;
	padding: 1.75rem 0 2.5rem;
	border-top: 1px solid var(--etos-rule);
	columns: 2;
	column-gap: 3rem;
	list-style: none;
}

.etos-shop .etos-includes__content > ul > li {
	position: relative;
	margin: 0 0 0.75rem;
	padding-left: 1.6rem;
	color: var(--etos-ink);
	font-size: 0.9375rem;
	line-height: 1.45;
	break-inside: avoid;
}

.etos-shop .etos-includes__content > ul > li::before {
	content: "\2713";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--etos-yes);
	font-weight: 600;
}

.etos-plan .etos-compare {
	margin: 2.5rem 0 0;
}

/* Il rimando stava fuori dalla colonna, a filo del margine di pagina: il
   contenitore che centra la scheda e' .summary-container, e questo blocco sta
   fuori da lui. Gli serve la stessa larghezza e lo stesso centramento.
   Colore e freccia stanno in comune.css. */
.etos-plan .etos-compare {
	max-width: var(--etos-col);
	margin-inline: auto;
}

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

@media (max-width: 900px) {
	.etos-shop .etos-includes__content,
	.etos-shop .etos-includes__content > ul {
		grid-template-columns: minmax(0, 1fr);
		columns: 1;
	}

	.etos-shop .etos-includes__content > h3 {
		grid-column: 1;
		padding-bottom: 0.75rem;
	}

	.etos-shop .etos-includes__content > ul {
		grid-column: 1;
		padding-top: 0;
		border-top: 0;
	}
}

@media (max-width: 600px) {
	/* Sotto i 600px la colonna del controllo toglierebbe troppo spazio al nome:
	   il controllo torna sotto la descrizione, su una riga sua.
	   Qui si torna al flusso normale invece di ridurre la griglia a una colonna:
	   dentro un <fieldset> la <legend> non e' un elemento della griglia, quindi
	   le righe esplicite si spostano di una e il controllo finiva fra il nome e
	   la descrizione. In flusso normale comanda l'ordine del markup, che e'
	   gia' quello giusto. */
	.etos-plan .wc-pao-addon-container:not([data-fieldset]),
	.etos-plan .wc-pao-addon-container[data-fieldset] > .wc-pao-fieldset {
		display: block;
	}

	.etos-plan .wc-pao-addon-wrap {
		margin-top: 0.9rem;
	}

	.etos-plan .wc-pao-addon-name,
	.etos-plan .wc-pao-addon-wrap label {
		gap: 0.35rem 0.6rem;
	}

	/* A schermo stretto la tabella resta una tabella: e' il prezzo che manda a
	   capo. Cambiare il display di table/tbody/tr per impilare le celle mette
	   il browser in uno stato ibrido in cui il disegno e le geometrie non
	   coincidono — le righe risultano allineate a getBoundingClientRect e
	   sovrapposte a schermo. Misurato, non supposto. */
	/* Il nome cede gli ultimi pixel al prezzo: una colonna piu' stretta di
	   min-content non si puo' avere, ma un corpo piu' piccolo abbassa il
	   min-content. Il prezzo resta l'elemento piu' grande della riga, che su una
	   pagina di listino e' l'ordine giusto. */
	.etos-group .group_table .woocommerce-grouped-product-list-item__label a {
		font-size: 0.9375rem;
	}

	.etos-group .group_table .woocommerce-grouped-product-list-item__price {
		flex-wrap: wrap;
		row-gap: 0.15rem;
	}

	/* Il prezzo pieno prende una riga tutta sua: lasciato libero di andare a
	   capo, ogni riga della tabella spezzava il prezzo in un punto diverso. */
	.etos-group .group_table .woocommerce-grouped-product-list-item__price del {
		flex-basis: 100%;
		text-align: right;
	}

	/* Importo e cadenza devono restare sulla stessa riga in tutte e sei le
	   righe, altrimenti il punto di rottura dipende dalla cifra: solo
	   "1.490,00 €" mandava "/anno" a capo, e una cadenza da sola in fondo alla
	   cella sembra appartenere alla riga seguente.
	   Misurato a 390 px: la cella dei prezzi e' 128 px, l'importo piu' largo 94,
	   la cadenza 33, piu' 8 di spazio: 135, sette di troppo. Si prendono
	   stringendo spazio e corpo della cadenza e il pulsante accanto.
	   Non si prendono dando una larghezza alla cella: e' un contenitore flex,
	   quindi non e' piu' una cella di tabella e la percentuale la fa collassare
	   a 52 px invece di allargarla. */
	.etos-group .group_table .woocommerce-grouped-product-list-item__price {
		gap: 0 0.25rem;
	}

	/* La larghezza minima serviva ad allineare la colonna degli importi: con
	   sette pixel di margine toglierebbe di nuovo la cadenza dalla riga. */
	.etos-group .group_table .subscription-details {
		min-width: 0;
		font-size: 0.75rem;
	}

	/* Tre colonne in 390 px: il pulsante si stringe al minimo leggibile,
	   altrimenti quello che toglie lo paga il prezzo andando a capo. */
	.etos-group .group_table .woocommerce-grouped-product-list-item__etos_action {
		padding-left: 0.75rem;
	}

	.etos-group .etos-choose {
		padding: 0.4rem 0.6rem;
		font-size: 0.875rem;
	}
}