/*
 * Quello che il negozio ETOS Retail ha in comune: le variabili, il marchio,
 * l'occhiello, il pulsante di scelta e il rimando al confronto.
 *
 * Lo caricano tutte le pagine del plugin (scheda prodotto e catalogo), prima
 * del foglio della singola pagina: cosi' il marchio si ritaglia in un posto
 * solo e le due pagine non possono divergere.
 *
 * Nessun colore e nessun font scritti a mano: --awb-colorN e --awb-typographyN
 * arrivano dalla palette e dai set tipografici globali di Avada. Cambiando la
 * palette in Opzioni Tema cambiano anche queste pagine.
 *
 *   color1 sfondo · color2 superficie · color3 azione · color4 incluso
 *   color5 collegamenti · color6 testo attenuato · color8 inchiostro
 */

.etos-shop {
	--etos-ink: var(--awb-color8);
	--etos-muted: var(--awb-color6);
	--etos-surface: var(--awb-color2);
	--etos-action: var(--awb-color3);
	--etos-yes: var(--awb-color4);

	/* Filetti: una tinta sola, dichiarata due volte per i browser senza color-mix. */
	--etos-rule: #e4e5e7;
	--etos-rule: color-mix(in srgb, var(--awb-color6) 16%, transparent);

	--etos-col: 46rem;
	--etos-radius: 12px;
}

/* ---------------------------------------------------------------- marchio */

/* Le immagini caricate sono logotipi disegnati su una tela quadrata bianca di
   1000 px: il segno sta sempre nella fascia y 432-618 e non arriva mai fuori da
   x 192-806 (misurate tutte e cinque, 30/07/2026). Mostrate intere sarebbero
   per quattro quinti spazio vuoto, e a quel punto il logo e' illeggibile.
   Questo riquadro ne mostra il rettangolo 180-820 x 420-630, con un margine di
   sicurezza attorno al segno: la tela viene ingrandita (1000/640 = 156,25%) e
   spostata (180/640 = 28,125% in orizzontale; 420 su un riquadro alto 210 =
   200% in verticale, perche' le percentuali di top guardano l'altezza).
   Il ritaglio serve finche' le immagini hanno questi margini: con dei logotipi
   gia' rifilati basterebbe una larghezza. Con una fotografia va rifatto. */
.etos-shop .etos-mark {
	display: block;
	position: relative;
	width: 15rem;
	max-width: 100%;
	aspect-ratio: 640 / 210;
	margin: 0 0 1.75rem;
	overflow: hidden;
}

.etos-shop .etos-mark img {
	position: absolute;
	top: -200%;
	left: -28.125%;
	width: 156.25%;
	max-width: none;
	height: auto;
	/* WooCommerce e Avada arrotondano e ombreggiano le immagini prodotto:
	   su un logotipo si vedrebbe l'angolo della tela, non il segno. */
	border-radius: 0;
	box-shadow: none;
	/* La tela e' bianca piena, non trasparente: su una superficie appena tinta
	   — le schede dei servizi nel catalogo — si vedrebbe il suo rettangolo.
	   Moltiplicando, il bianco lascia passare il fondo e il segno resta. Vale
	   finche' il fondo e' chiaro, come tutta la palette. */
	mix-blend-mode: multiply;
}

/* -------------------------------------------------------------- occhiello */

.etos-shop .etos-eyebrow {
	margin: 0 0 0.9rem;
	color: var(--etos-action);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- azioni */

/* Scegliere un piano non e' ancora comprarlo: il pulsante pieno arancio resta
   all'acquisto, sulla scheda del piano. Qui l'arancio c'e' ma solo di contorno
   — stessa famiglia, peso minore — e si riempie al passaggio del mouse. */
.etos-shop .etos-choose {
	display: inline-block;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--etos-action);
	border-radius: 4px;
	color: var(--etos-action);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.etos-shop .etos-choose:hover,
.etos-shop .etos-choose:focus-visible {
	background: var(--etos-action);
	border-color: var(--etos-action);
	color: var(--awb-color1);
	text-decoration: none;
}

/* Il rimando al confronto: era l'unica cosa azzurra della scheda — azzurro e'
   il colore dei collegamenti di Avada, ma qui il colore delle azioni e'
   --etos-action. */
.etos-shop .etos-compare a {
	color: var(--etos-action);
	font-weight: 600;
}

.etos-shop .etos-compare a::after {
	content: " \2192";
}