/*
Theme Name: Etna Style
Description: Block theme su misura per Etna Style, Linguaglossa. Boutique editoriale: spazio, foto grandi, poca decorazione, un solo colore d'accento.
Version: 0.2.0
Requires at least: 6.7
Requires PHP: 8.3
Text Domain: etnastyle
*/

/* I token vivono in assets/css/tokens.css, caricati prima di questo file. */

/* ------------------------------------------------------------------ font
   Playfair Display e Inter auto-ospitati (licenza SIL OFL, sottoinsieme
   latino, file variabili): senza questi @font-face i titoli cadevano sul
   serif di sistema. Niente Google Fonts dal vivo: nessuna chiamata a terzi. */
@font-face {
	font-family: "Playfair Display";
	src: url("assets/fonts/playfair-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter-latin.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

body {
	/* Solo il colore: lo shorthand "background" azzererebbe il gradiente di
	   pagina dichiarato in assets/css/etnastyle.css. */
	background-color: var(--es-ivory);
	color: var(--es-ink);
	font-family: var(--es-font-body);
}

h1, h2, h3, h4 {
	font-family: var(--es-font-title);
	font-weight: 500;
}

/* Griglia prodotti: rapporto fisso, senza salti di layout all'hover.
   Le foto arrivano da fonti diverse e senza un rapporto unico la griglia si
   sfalda: e' un vincolo di progetto, non una preferenza. */
.woocommerce ul.products li.product img {
	aspect-ratio: var(--es-ratio-product);
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* Le taglie esaurite si mostrano, non si nascondono. */
.es-taglia--esaurita {
	text-decoration: line-through;
	color: var(--es-muted);
}

/* --------------------------------------------------------------- telefono
   Correzioni misurate a 390px con un browser vero (tests/test-mobile.sh).
   Stanno qui e non in assets/css/etnastyle.css: quel foglio e' la consegna
   del designer e resta com'e'. */

/* La colonna dei filtri: chiusa sul telefono finche' non la si apre, sempre
   aperta da 64em in su. Il valore di partenza e' qui e non nel JavaScript,
   altrimenti i filtri lampeggerebbero aperti al caricamento. */
@media (max-width: 63.99em) {
	.es-filtri { display: none; }
	.es-filtri.es-filtri--aperti { display: block; }
}

/* La galleria di WooCommerce non sa restringersi: e' un contenitore flex con
   min-width:auto, e a 390px usciva dal suo contenitore di 99px, portandosi
   dietro le miniature sopra il titolo del capo. */
.es-prodotto > *,
.es-galleria,
.es-info {
	min-width: 0;
}

.wp-block-woocommerce-product-gallery {
	min-width: 0;
	max-width: 100%;
}

.wp-block-woocommerce-product-gallery img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 63.99em) {
	/* Miniature sotto lo scatto grande, non di fianco: di fianco non ci stanno. */
	.es-prodotto .wp-block-woocommerce-product-gallery {
		flex-direction: column;
	}
	.es-prodotto .wp-block-woocommerce-product-gallery > * {
		min-width: 0;
		max-width: 100%;
	}
}

/* La striscia delle miniature scorre, ma senza barra grigia in vista: la
   miniatura mozzata sul bordo gia' dice che si puo' scorrere. */
.wp-block-woocommerce-product-gallery-thumbnails {
	scrollbar-width: none;
}
.wp-block-woocommerce-product-gallery-thumbnails::-webkit-scrollbar {
	display: none;
}

/* --------------------------------------------------- carrello e checkout
   Il blocco «carrello pieno» porta la classe es-due del design (griglia
   1fr + 22rem), ma dentro le colonne WooCommerce riapplica le sue larghezze
   65%/35%: il riepilogo finiva largo il 35% di 22rem (123px), con il bordo
   sopra gli importi. Dentro la griglia, ogni colonna occupa la sua cella. */
.es-due.wc-block-components-sidebar-layout > .wc-block-components-main,
.es-due.wc-block-components-sidebar-layout > .wc-block-components-sidebar {
	width: 100%;
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* La tabella degli articoli non sa restringersi sotto la sua larghezza
   minima, e a 390px il badge «Risparmia …» nowrap la spingeva 3px oltre lo
   schermo, tagliando il simbolo dell'euro. */
@media (max-width: 47.99em) {
	table.wc-block-cart-items .wc-block-components-sale-badge,
	table.wc-block-cart-items .wc-block-cart-item__total {
		white-space: normal;
	}
}

/* Le opzioni radio (spedizione, pagamento) hanno l'input assoluto a sinistra:
   senza spazio riservato il pallino copriva le prime lettere dell'etichetta
   («●edizione con corriere»). */
.wc-block-components-radio-control__option {
	padding-left: 3.25em;
}
.wc-block-components-radio-control__option .wc-block-components-radio-control__input {
	left: 1em;
}

/* ------------------------------------------------------- foto nei riquadri
   I riquadri .es-ph del design erano segnaposto grigi; ora ospitano foto
   vere. Il rapporto lo tiene il riquadro, il ritaglio lo fa object-fit. */
.es-ph > picture {
	position: absolute;
	inset: 0;
}
.es-ph__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* L'insegna tipografica: sostituisce la foto del punto vendita finche' il
   titolare non ne fornisce una vera. */
.es-insegna {
	display: grid;
	place-content: center;
	gap: var(--es-space-2);
	text-align: center;
	background: var(--es-ink);
	color: var(--es-ivory);
	padding: var(--es-space-4);
}
.es-insegna__nome {
	font-family: var(--es-font-title);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	letter-spacing: .04em;
}
.es-insegna__via {
	font-size: .9375rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--es-ivory);
	opacity: .75;
}

.es-marche__nota {
	color: var(--es-muted);
	max-width: 60ch;
	margin-top: var(--es-space-2);
}