/*
Theme Name:   Elena Chiappini Shop
Theme URI:    https://elenachiappini.it/shop/
Description:  Child theme di Hello Elementor per lo shop di Elena Chiappini Art. Riprende il linguaggio visivo del sito principale: Cormorant Garamond + Jost, palette inchiostro/bordeaux, impaginazione editoriale.
Author:       Elena Chiappini Art
Author URI:   https://elenachiappini.it/
Template:     hello-elementor
Version:      1.0.0
Text Domain:  elenachiappini-shop
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Tags:         e-commerce, custom-colors, custom-logo, custom-menu, translation-ready
*/

/* ==========================================================================
   1. TOKEN — gli stessi valori del sito principale elenachiappini.it
   ========================================================================== */

:root {
	/* Colori */
	--ec-inchiostro:     #2a2522;
	--ec-rosso:          #7c1220;
	--ec-rosso-chiaro:   #9c2231;
	--ec-grigio:         #8a8078;
	--ec-grigio-chiaro:  #a49b91;
	--ec-testo:          #5f574f;
	--ec-linea:          #e2ded8;
	--ec-linea-tenue:    #efece8;
	--ec-crema:          #faf8f5;
	--ec-bianco:         #ffffff;

	/* Tipografia */
	--ec-serif:  'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
	--ec-sans:   'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* Micro-etichette maiuscole: la cifra ricorrente del brand */
	--ec-micro-size:     11px;
	--ec-micro-tracking: .22em;

	/* Ritmo */
	--ec-gutter:     28px;
	--ec-larghezza:  1180px;
	--ec-stretta:    760px;

	/* Dettagli */
	--ec-raggio:     2px;
	--ec-transizione: .25s ease;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--ec-bianco);
	color: var(--ec-testo);
	font-family: var(--ec-sans);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.75;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--ec-rosso);
	text-decoration: none;
	transition: color var(--ec-transizione);
}

a:hover,
a:focus {
	color: var(--ec-inchiostro);
}

:focus-visible {
	outline: 2px solid var(--ec-rosso);
	outline-offset: 3px;
}

img {
	max-width: 100%;
	height: auto;
}

hr {
	border: 0;
	border-top: 1px solid var(--ec-linea);
	margin: 48px 0;
}

::selection {
	background: var(--ec-rosso);
	color: #fff;
}

/* --- Titoli ------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
	font-family: var(--ec-serif);
	font-weight: 300;
	color: var(--ec-inchiostro);
	line-height: 1.15;
	letter-spacing: .01em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.05; }
h2 { font-size: clamp(27px, 3.6vw, 42px); }
h3 { font-size: clamp(21px, 2.4vw, 28px); font-weight: 400; }
h4 { font-size: 20px; font-weight: 400; }
h5 { font-size: 17px; font-weight: 500; }

h6 {
	font-family: var(--ec-sans);
	font-size: var(--ec-micro-size);
	font-weight: 400;
	letter-spacing: var(--ec-micro-tracking);
	text-transform: uppercase;
	color: var(--ec-grigio);
}

/* Il corsivo rosso nei titoli: stessa firma della home */
h1 em, h2 em, h3 em,
.ec-accento {
	font-style: italic;
	color: var(--ec-rosso);
}

p { margin: 0 0 1.4em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

blockquote {
	margin: 40px 0;
	padding-left: 28px;
	border-left: 1px solid var(--ec-rosso);
	font-family: var(--ec-serif);
	font-size: 22px;
	font-style: italic;
	line-height: 1.5;
	color: var(--ec-inchiostro);
}

/* ==========================================================================
   3. UTILITÀ DI BRAND
   ========================================================================== */

/* Micro-etichetta maiuscola spaziata */
.ec-micro {
	font-family: var(--ec-sans);
	font-size: var(--ec-micro-size);
	font-weight: 400;
	letter-spacing: var(--ec-micro-tracking);
	text-transform: uppercase;
	color: var(--ec-grigio);
	line-height: 1.6;
}

/* Il fregio: tratto — rombo — tratto. Ripreso dalla home. */
.ec-fregio {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	color: #b3a89d;
}

.ec-fregio__tratto {
	display: block;
	width: 54px;
	height: 1px;
	background: currentColor;
}

.ec-fregio__rombo {
	width: 5px;
	height: 5px;
	background: var(--ec-rosso);
	transform: rotate(45deg);
	flex: none;
}

.ec-fregio--largo .ec-fregio__tratto { width: min(220px, 22vw); }

/* Contenitori */
.ec-contenitore {
	width: 100%;
	max-width: var(--ec-larghezza);
	margin-inline: auto;
	padding-inline: var(--ec-gutter);
}

.ec-contenitore--stretto { max-width: var(--ec-stretta); }

/* Animazione d'ingresso, identica alla home */
@keyframes ecFadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@keyframes ecPulse {
	0%, 100% { opacity: .35; }
	50%      { opacity: 1; }
}

.ec-anima { animation: ecFadeUp .9s ease both; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   4. BOTTONI E CAMPI — la grammatica dei form della home
   ========================================================================== */

.ec-bottone,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link {
	display: inline-block;
	padding: 15px 26px;
	font-family: var(--ec-sans);
	font-size: var(--ec-micro-size);
	font-weight: 400;
	letter-spacing: var(--ec-micro-tracking);
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	background: var(--ec-inchiostro);
	border: 1px solid var(--ec-inchiostro);
	border-radius: var(--ec-raggio);
	cursor: pointer;
	transition: background var(--ec-transizione), border-color var(--ec-transizione), color var(--ec-transizione);
}

.ec-bottone:hover,
button:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
.wp-block-button__link:hover {
	background: var(--ec-rosso);
	border-color: var(--ec-rosso);
	color: #fff;
}

button:disabled,
input[type="submit"]:disabled,
.ec-bottone:disabled {
	opacity: .55;
	cursor: default;
}

/* Variante in punteggiatura leggera */
.ec-bottone--vuoto {
	background: transparent;
	color: var(--ec-inchiostro);
	border-color: var(--ec-linea);
}

.ec-bottone--vuoto:hover {
	background: transparent;
	color: var(--ec-rosso);
	border-color: var(--ec-rosso);
}

/* Link testuale maiuscolo con filo sotto */
.ec-link-micro {
	font-size: var(--ec-micro-size);
	letter-spacing: var(--ec-micro-tracking);
	text-transform: uppercase;
	color: var(--ec-inchiostro);
	border-bottom: 1px solid var(--ec-linea);
	padding-bottom: 3px;
	transition: color var(--ec-transizione), border-color var(--ec-transizione);
}

.ec-link-micro:hover {
	color: var(--ec-rosso);
	border-bottom-color: var(--ec-rosso);
}

/* Campi */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select,
.select2-container .select2-selection--single {
	width: 100%;
	padding: 14px 18px;
	font-family: var(--ec-sans);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--ec-inchiostro);
	background: #fff;
	border: 1px solid var(--ec-linea);
	border-radius: var(--ec-raggio);
	outline: none;
	transition: border-color var(--ec-transizione);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

textarea { min-height: 140px; resize: vertical; }

input:focus,
textarea:focus,
select:focus {
	border-color: var(--ec-rosso);
}

::placeholder { color: var(--ec-grigio-chiaro); opacity: 1; }

label {
	display: block;
	margin-bottom: 7px;
	font-size: var(--ec-micro-size);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ec-grigio);
}

/* Select con freccia disegnata */
select {
	background-image: linear-gradient(45deg, transparent 50%, var(--ec-grigio) 50%),
	                  linear-gradient(135deg, var(--ec-grigio) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 42px;
}

/* ==========================================================================
   5. TESTATA
   ========================================================================== */

.ec-testata {
	position: relative;
	/* Sopra la lente della galleria WooCommerce, che sta a 99 nel contesto
	   radice: con un valore più basso il sottomenù le finirebbe sotto.
	   Resta comunque sotto il lightbox PhotoSwipe (999999). */
	z-index: 200;
	background: #fff;
	border-bottom: 1px solid var(--ec-linea-tenue);
}

/* Testata fissa.
   Diventa fissa solo quando il JavaScript ha misurato la sua altezza e
   l'ha data al segnaposto qui sotto: senza quella misura la pagina finirebbe
   sotto la testata. Se lo script non parte, resta in flusso come sempre.

   `fixed` e non `sticky` di proposito: mentre scorri la testata si
   restringe, e un elemento sticky che cambia altezza fa saltare tutta la
   pagina di altrettanti pixel. Con `fixed` il posto lo tiene il segnaposto,
   che non cambia mai. */
.ec-testata-fissa .ec-testata {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

.ec-testata__spazio {
	height: var(--ec-testata-altezza, 0px);
}

/* La barra di amministrazione di WordPress sta sopra a tutto. */
.ec-testata-fissa .admin-bar .ec-testata { top: 32px; }

@media (max-width: 782px) {
	.ec-testata-fissa .admin-bar .ec-testata { top: 46px; }
}

/* Gli ancoraggi interni devono fermarsi sotto la testata, non dietro. */
.ec-testata-fissa {
	scroll-padding-top: calc(var(--ec-testata-compatta, 0px) + 16px);
}

/* Compatta: dopo qualche pixel di scorrimento la barra micro si chiude e il
   marchio scende. Il menù resta, che è quello che serve mentre si legge. */
.ec-testata--compatta {
	box-shadow: 0 8px 28px rgba(42, 37, 34, .07);
}

.ec-testata__barra {
	max-height: 60px;
	overflow: hidden;
	transition: max-height .28s ease, opacity .22s ease, border-color .28s ease;
}

.ec-testata--compatta .ec-testata__barra {
	max-height: 0;
	opacity: 0;
	border-bottom-color: transparent;
}

.ec-testata__principale { transition: padding .28s ease; }
.ec-testata--compatta .ec-testata__principale { padding-block: 10px; }

.ec-marchio img { transition: max-height .28s ease; }
.ec-testata--compatta .ec-marchio img { max-height: 54px; }

/* Mentre si misura, niente transizioni e niente pannelli aperti: altrimenti
   si leggerebbe un'altezza a metà strada, o gonfiata dal menù. */
.ec-testata--misura,
.ec-testata--misura * { transition: none !important; }
.ec-testata--misura .ec-nav-mobile,
.ec-testata--misura .ec-ricerca { display: none !important; }

/* Col menù mobile aperto la testata fissa non può crescere oltre lo schermo:
   la lista scorre da sola dentro il suo spazio. */
.ec-testata-fissa .ec-nav-mobile.attiva {
	max-height: calc(100vh - 150px);
	max-height: calc(100dvh - 150px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
	.ec-testata__barra,
	.ec-testata__principale,
	.ec-marchio img { transition: none; }
}

/* Barra micro superiore */
.ec-testata__barra {
	border-bottom: 1px solid var(--ec-linea-tenue);
}

.ec-testata__barra-int {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 38px;
	font-size: var(--ec-micro-size);
	letter-spacing: var(--ec-micro-tracking);
	text-transform: uppercase;
	color: var(--ec-grigio);
}

.ec-testata__stato {
	display: flex;
	align-items: center;
	gap: 9px;
}

.ec-pallino {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ec-rosso);
	animation: ecPulse 2.6s ease-in-out infinite;
	flex: none;
}

/* Fascia principale: marchio al centro, strumenti ai lati */
.ec-testata__principale {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	padding-block: 26px;
}

.ec-testata__lato {
	display: flex;
	align-items: center;
	gap: 22px;
}

.ec-testata__lato--destra { justify-content: flex-end; }

.ec-marchio {
	text-align: center;
	min-width: 0;
}

.ec-marchio a,
.ec-marchio .custom-logo-link { display: inline-block; color: inherit; }

/* Vale anche per il logo impostato da Personalizza → Identità del sito. */
.ec-marchio .custom-logo,
.ec-fondo__marchio .custom-logo { width: auto; height: auto; }

.ec-marchio img {
	display: block;
	/* Vedi la nota su .ec-fondo__marchio img: servono entrambi. */
	width: auto;
	height: auto;
	/* Mai più larga della propria colonna: altrimenti finisce sotto le icone. */
	max-width: min(460px, 100%);
	max-height: 120px;
	margin-inline: auto;
}

.ec-marchio__titolo {
	font-family: var(--ec-serif);
	font-size: clamp(24px, 3.4vw, 38px);
	font-weight: 300;
	line-height: 1.1;
	color: var(--ec-inchiostro);
	margin: 0;
}

.ec-marchio__sottotitolo {
	margin: 6px 0 0;
	font-size: 10px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--ec-grigio-chiaro);
}

/* Navigazione */
.ec-nav ul {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-nav a {
	font-size: var(--ec-micro-size);
	letter-spacing: var(--ec-micro-tracking);
	text-transform: uppercase;
	color: var(--ec-inchiostro);
	white-space: nowrap;
}

.ec-nav a:hover { color: var(--ec-rosso); }

.ec-nav .current-menu-item > a,
.ec-nav .current_page_item > a {
	color: var(--ec-rosso);
}

/* Menù orizzontale sotto il marchio */
.ec-nav--principale {
	border-top: 1px solid var(--ec-linea-tenue);
	padding-block: 15px;
}

.ec-nav--principale ul { justify-content: center; flex-wrap: wrap; gap: 34px; }

/* Fra 992 e 1199px dieci voci a 34px di distanza non stanno su una riga, e
   una testata fissa alta il doppio è un prezzo da non pagare: si stringe. */
@media (max-width: 1199px) {
	.ec-nav--principale ul { gap: 20px; }
}

/* Sottomenù */
.ec-nav li { position: relative; }

.ec-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	display: block;
	min-width: 210px;
	padding: 14px 0;
	margin-top: 14px;
	background: #fff;
	border: 1px solid var(--ec-linea);
	border-radius: var(--ec-raggio);
	box-shadow: 0 14px 40px rgba(42, 37, 34, .09);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ec-transizione), transform var(--ec-transizione), visibility var(--ec-transizione);
	z-index: 30;
}

.ec-nav li:hover > .sub-menu,
.ec-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.ec-nav .sub-menu li { display: block; }
.ec-nav .sub-menu a { display: block; padding: 8px 22px; }

/* Strumenti: ricerca, account, carrello */
.ec-strumenti {
	display: flex;
	align-items: center;
	gap: 20px;
}

.ec-strumento {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--ec-micro-size);
	letter-spacing: var(--ec-micro-tracking);
	text-transform: uppercase;
	color: var(--ec-inchiostro);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.ec-strumento:hover { color: var(--ec-rosso); background: none; }

.ec-strumento svg {
	width: 17px;
	height: 17px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.1;
	flex: none;
}

.ec-strumento__conteggio {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 5px;
	font-size: 9px;
	letter-spacing: .04em;
	color: #fff;
	background: var(--ec-rosso);
	border-radius: 9px;
}

.ec-strumento__etichetta { display: inline; }

/* Pannello di ricerca a scomparsa */
.ec-ricerca {
	display: none;
	border-top: 1px solid var(--ec-linea-tenue);
	padding-block: 22px;
}

.ec-ricerca.attiva { display: block; animation: ecFadeUp .35s ease both; }

.ec-ricerca form {
	display: flex;
	gap: 10px;
	max-width: 560px;
	margin-inline: auto;
}

.ec-ricerca input[type="search"] { flex: 1 1 auto; }
.ec-ricerca button { flex: none; }

/* Interruttore mobile */
.ec-toggle {
	display: none;
	width: 34px;
	height: 34px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--ec-inchiostro);
	cursor: pointer;
}

.ec-toggle:hover { background: none; color: var(--ec-rosso); }

.ec-toggle span,
.ec-toggle span::before,
.ec-toggle span::after {
	display: block;
	width: 22px;
	height: 1px;
	background: currentColor;
	transition: transform var(--ec-transizione), opacity var(--ec-transizione);
}

.ec-toggle span { margin-inline: auto; position: relative; }
.ec-toggle span::before,
.ec-toggle span::after { content: ''; position: absolute; left: 0; }
.ec-toggle span::before { top: -7px; }
.ec-toggle span::after  { top: 7px; }

.ec-toggle[aria-expanded="true"] span { background: transparent; }
.ec-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.ec-toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* Menù mobile */
.ec-nav-mobile {
	display: none;
	border-top: 1px solid var(--ec-linea-tenue);
	padding: 8px 0 22px;
}

.ec-nav-mobile.attiva { display: block; animation: ecFadeUp .35s ease both; }

.ec-nav-mobile ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ec-nav-mobile li { border-bottom: 1px solid var(--ec-linea-tenue); }
.ec-nav-mobile li:last-child { border-bottom: 0; }

.ec-nav-mobile a {
	display: block;
	padding: 14px 4px;
	font-size: 12px;
	letter-spacing: var(--ec-micro-tracking);
	text-transform: uppercase;
	color: var(--ec-inchiostro);
}

.ec-nav-mobile a:hover { color: var(--ec-rosso); }
.ec-nav-mobile .sub-menu { padding-left: 20px; }
.ec-nav-mobile .sub-menu a { font-size: 11px; color: var(--ec-testo); }

@media (max-width: 991px) {
	/* Il marchio sta nella colonna centrale, fra il pulsante del menù e le
	   icone: a schermo stretto è la larghezza a limitarlo, non l'altezza.
	   Stringendo i distanziamenti la colonna guadagna spazio e il logo cresce
	   davvero; `max-width: 100%` lo fa poi rimpicciolire da solo sui telefoni
	   più stretti, senza mai toccare le icone. */
	.ec-testata__principale {
		grid-template-columns: auto 1fr auto;
		gap: 12px;
		padding-block: 16px;
	}
	.ec-testata__lato { gap: 12px; }
	.ec-nav--principale,
	.ec-testata__lato .ec-nav { display: none; }
	.ec-toggle { display: block; }
	.ec-marchio img { max-height: 78px; }
	.ec-testata--compatta .ec-marchio img { max-height: 44px; }
	.ec-testata--compatta .ec-testata__principale { padding-block: 8px; }
	.ec-strumento__etichetta { display: none; }
	.ec-strumenti { gap: 14px; }
}

@media (max-width: 600px) {
	.ec-testata__barra-int { justify-content: center; }
	.ec-testata__barra-int > :not(.ec-testata__stato) { display: none; }
}

/* ==========================================================================
   6. CORPO PAGINA
   ========================================================================== */

.site-main,
.ec-corpo {
	padding-block: clamp(40px, 6vw, 78px);
}

/* Intestazione di pagina/archivio, centrata come la home */
.ec-intestazione {
	text-align: center;
	max-width: var(--ec-stretta);
	margin: 0 auto clamp(36px, 5vw, 62px);
	animation: ecFadeUp .9s ease both;
}

.ec-intestazione .ec-fregio { margin-bottom: 20px; }

.ec-intestazione__titolo {
	margin: 0 0 16px;
	font-size: clamp(32px, 4.6vw, 54px);
}

.ec-intestazione__testo {
	margin: 0 auto;
	max-width: 520px;
	color: var(--ec-testo);
}

.ec-intestazione__occhiello {
	display: block;
	margin-bottom: 14px;
	font-size: var(--ec-micro-size);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--ec-grigio);
}

/* ==========================================================================
   7. PIÈ DI PAGINA — ricalca il fondo della home
   ========================================================================== */

.ec-fondo {
	border-top: 1px solid var(--ec-linea-tenue);
	padding-block: clamp(46px, 6vw, 72px);
	background: #fff;
}

.ec-fondo__int {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	text-align: center;
}

.ec-fondo__marchio img {
	/* `width`/`height` vanno azzerati: gli attributi dell'<img> valgono come
	   presentational hint, e i due max-* li ritaglierebbero separatamente
	   deformando il logo. */
	width: auto;
	height: auto;
	max-width: 260px;
	max-height: 70px;
}

/* Il menù informazioni è una lista piatta: una riga che va a capo legge
   meglio di una colonna alta cinque voci. */
.ec-fondo__colonne {
	width: 100%;
	max-width: 900px;
	text-align: center;
	margin-block: 6px;
}

.ec-fondo__titolo {
	margin: 0 0 14px;
	font-family: var(--ec-sans);
	font-size: var(--ec-micro-size);
	font-weight: 400;
	letter-spacing: var(--ec-micro-tracking);
	text-transform: uppercase;
	color: var(--ec-inchiostro);
}

.ec-fondo__colonne ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
}

.ec-fondo__colonne a {
	font-size: var(--ec-micro-size);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ec-testo);
	white-space: nowrap;
}

.ec-fondo__colonne a:hover { color: var(--ec-rosso); }

.ec-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--ec-micro-size);
	letter-spacing: var(--ec-micro-tracking);
	text-transform: uppercase;
}

.ec-social a { color: var(--ec-testo); }
.ec-social a:hover { color: var(--ec-rosso); }

.ec-fondo__nota {
	margin: 0;
	max-width: 520px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--ec-grigio);
}

.ec-copyright {
	margin: 0;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ec-grigio-chiaro);
}

.ec-fondo__legale {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ec-fondo__legale a { color: var(--ec-grigio-chiaro); }
.ec-fondo__legale a:hover { color: var(--ec-rosso); }

/* ==========================================================================
   8. ACCESSIBILITÀ
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px; left: 12px;
	z-index: 999;
	width: auto; height: auto;
	clip: auto;
	padding: 12px 20px;
	background: var(--ec-inchiostro);
	color: #fff;
	font-size: var(--ec-micro-size);
	letter-spacing: var(--ec-micro-tracking);
	text-transform: uppercase;
}

/* ==========================================================================
   9. ALLINEAMENTO CON ELEMENTOR
   Il kit di Elementor non applica font o colori a body e titoli: definisce
   soltanto le variabili globali che i suoi widget consumano. Qui le
   rimappiamo sui valori del brand, così qualsiasi widget costruito in
   Elementor nasce già coerente. `body[class*=]` ha specificità superiore a
   `.elementor-kit-N`, quindi vince senza toccare la cascata dei componenti.
   (Meglio comunque allineare anche Elementor → Impostazioni sito.)
   ========================================================================== */

body[class*="elementor-kit-"] {
	--e-global-color-primary:   #2a2522;
	--e-global-color-secondary: #7c1220;
	--e-global-color-text:      #5f574f;
	--e-global-color-accent:    #7c1220;

	--e-global-typography-primary-font-family:   'Cormorant Garamond';
	--e-global-typography-primary-font-weight:   300;
	--e-global-typography-secondary-font-family: 'Cormorant Garamond';
	--e-global-typography-secondary-font-weight: 400;
	--e-global-typography-text-font-family:      'Jost';
	--e-global-typography-text-font-weight:      300;
	--e-global-typography-accent-font-family:    'Jost';
	--e-global-typography-accent-font-weight:    400;
}

/* Larghezza dei contenuti Elementor allineata al resto del tema. */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con { --container-max-width: var(--ec-larghezza); }
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--ec-larghezza); }

/* ==========================================================================
   10. PAGINE EDITORIALI (Chi sono, informative)
   Hello Elementor non vincola la larghezza del contenuto: lo facciamo qui.
   Le pagine costruite con Elementor restano escluse, perché lì la larghezza
   la decide il costruttore.
   ========================================================================== */

/* Il telaio del sito ha una misura sola, ovunque: 1180px.
   Hello Elementor scala `.site-main` con una scaletta (500 / 600 / 800 /
   1140px a seconda della finestra), che faceva ballare il bordo del
   contenuto passando da una pagina all'altra. Qui la sostituiamo.
   Le misure di lettura più strette restano sui blocchi di testo, non sul
   telaio: vedi `.ec-informativa`, `.ec-pagina-richiamata`, `.ec-commissioni`. */
/* Il selettore del tema padre è `body:not([class*=elementor-page-]) .site-main`,
   che vale (0,2,1): un semplice `body .site-main` gli resterebbe sotto e la
   misura cambierebbe fra pagine Elementor (1180) e archivi (1140). Da qui
   `html body[class]`, che vale (0,2,2) e vince senza dipendere dall'ordine
   di caricamento dei fogli. */
html body[class] .site-main {
	width: 100%;
	max-width: var(--ec-larghezza);
	margin-inline: auto;
	padding-inline: var(--ec-gutter);
}

/* Il titolo di pagina riempie il contenitore e si centra da sé: il tema padre
   gli dà un max-width proprio, che lo faceva sedere fuori asse. */
html body[class] .page-header .entry-title {
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
}

/* Titolo della pagina, centrato come le intestazioni d'archivio.
   Vale anche per le pagine costruite con Elementor: il titolo lo stampa
   il tema, non il costruttore. */
.page-header {
	text-align: center;
	margin-bottom: clamp(18px, 3vw, 30px);
}

.page-header .entry-title {
	margin: 0;
	font-family: var(--ec-serif);
	font-weight: 300;
	font-size: clamp(32px, 4.6vw, 54px);
	line-height: 1.05;
	color: var(--ec-inchiostro);
}

/* Epigrafe in apertura. */
.page-content .wp-block-quote,
.entry-content .wp-block-quote {
	max-width: 520px;
	margin-inline: auto;
	padding: 0;
	border: 0;
	text-align: center;
	font-family: var(--ec-serif);
	font-size: clamp(21px, 2.6vw, 28px);
	font-style: italic;
	font-weight: 300;
	line-height: 1.45;
	color: var(--ec-inchiostro);
}

.page-content .wp-block-quote p,
.entry-content .wp-block-quote p { margin: 0; }

/* Colonne: foto e testo. */
.wp-block-columns { gap: clamp(26px, 4vw, 52px); align-items: flex-start; }

.wp-block-image img {
	border-radius: var(--ec-raggio);
	background: var(--ec-crema);
}

.wp-block-image figcaption {
	margin-top: 10px;
	font-size: var(--ec-micro-size);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ec-grigio-chiaro);
	text-align: center;
}

/* Congedo finale. */
.ec-congedo {
	margin-top: clamp(28px, 4vw, 44px);
	font-family: var(--ec-serif);
	font-size: 22px;
	font-style: italic;
	color: var(--ec-rosso);
}

/* Il fregio dentro il contenuto non deve ereditare i margini dei paragrafi. */
.page-content .ec-fregio,
.entry-content .ec-fregio { margin-inline: auto; }

@media (max-width: 781px) {
	.wp-block-columns .wp-block-column { flex-basis: 100% !important; }
	.wp-block-columns .wp-block-column:first-child { max-width: 420px; margin-inline: auto; }
}

/* ==========================================================================
   11. MODULO COMMISSIONI
   ========================================================================== */

.ec-commissioni { max-width: 720px; margin-inline: auto; }

.ec-commissioni__griglia {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
}

.ec-campo--piena { grid-column: 1 / -1; }

.ec-campo label {
	display: block;
	margin-bottom: 7px;
	font-size: var(--ec-micro-size);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ec-grigio);
}

.ec-campo__obbligatorio { color: var(--ec-rosso); margin-left: 2px; }

.ec-campo__nota {
	margin: 7px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ec-grigio-chiaro);
}

/* Il campo esca: invisibile, fuori dal flusso, non raggiungibile. */
.ec-esca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Consenso */
.ec-consenso { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--ec-linea-tenue); }

.ec-consenso__riga {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	font-family: var(--ec-sans);
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ec-testo);
	cursor: pointer;
}

.ec-consenso__riga input[type="checkbox"] {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	accent-color: var(--ec-rosso);
}

.ec-commissioni__azioni {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 30px;
}

.ec-commissioni__azioni button { min-width: 260px; padding-block: 17px; }

/* Esiti */
.ec-commissioni__esito {
	margin-bottom: 30px;
	padding: 22px 26px;
	border: 1px solid var(--ec-linea);
	border-left: 2px solid var(--ec-rosso);
	border-radius: var(--ec-raggio);
	background: var(--ec-crema);
	font-size: 14px;
}

.ec-commissioni__esito ul { margin: 0; padding-left: 20px; }
.ec-commissioni__esito li { margin-bottom: 5px; }
.ec-commissioni__esito li:last-child { margin-bottom: 0; }

.ec-commissioni__esito--ok {
	text-align: center;
	border-left-color: var(--ec-linea);
	padding: 40px 30px;
}

.ec-commissioni__esito--ok h2 {
	margin: 18px 0 10px;
	font-size: clamp(24px, 3vw, 32px);
}

.ec-commissioni__esito--ok p { margin: 0; color: var(--ec-testo); }

@media (max-width: 600px) {
	.ec-commissioni__griglia { grid-template-columns: minmax(0, 1fr); }
	.ec-commissioni__azioni button { width: 100%; min-width: 0; }
}

/* ==========================================================================
   12. ALLINEAMENTI A BLOCCHI
   Hello Elementor dà a `.alignwide` un `margin-inline: -80px`, pensato per un
   contenitore con 80px di padding laterale. Il nostro ne ha 28, e siccome i
   blocchi hanno larghezza fissa al 100% il margine destro non allarga nulla:
   l'unico effetto è spostare tutto di 80px a sinistra. È così che il carrello
   e la cassa (che WooCommerce marca `alignwide`) finivano scentrati.
   Qui `alignwide` torna a significare «largo quanto il contenitore, centrato».
   ========================================================================== */

.alignwide,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	margin-inline: auto;
	max-width: 100%;
}

.alignfull {
	margin-inline: auto;
	max-width: 100%;
}

/* ==========================================================================
   13. SEGNAPOSTI DA COMPLETARE
   I testi standard delle pagine informative contengono punti che dipendono
   da dati reali (partita IVA, corriere, costi, tempi). Sono marcati così
   perché si vedano a colpo d'occhio e non finiscano online per distrazione.
   ========================================================================== */

.ec-dacompletare {
	background: #fdf1f2;
	color: var(--ec-rosso);
	padding: 2px 7px;
	border: 1px dashed rgba(124, 18, 32, .35);
	border-radius: var(--ec-raggio);
	font-family: var(--ec-sans);
	font-size: .92em;
	font-style: normal;
	text-decoration: none;
}

/* ==========================================================================
   14. PAGINE INFORMATIVE COSTRUITE CON ELEMENTOR
   Sulle pagine Elementor la larghezza la decide il costruttore, e per un
   testo lungo 1180px sono troppi: le righe diventano illeggibili. Il
   contenitore di queste pagine porta la classe `ec-pagina-informativa`,
   che si vede e si modifica anche dalla scheda Avanzate di Elementor.
   ========================================================================== */

.ec-pagina-informativa {
	max-width: 820px;
	margin-inline: auto;
}

.ec-pagina-informativa .elementor-widget-heading + .elementor-widget-text-editor {
	margin-top: -4px;
}

.ec-pagina-informativa .elementor-widget-heading .elementor-heading-title {
	margin-top: 14px;
	font-size: clamp(23px, 2.8vw, 30px);
}

.ec-pagina-informativa ul,
.ec-pagina-informativa ol {
	margin: 0 0 1.4em;
	padding-left: 20px;
}

.ec-pagina-informativa li { margin-bottom: 8px; }

/* Larghezza di lettura sulle pagine informative (vedi functions.php, sez. 10). */
.ec-informativa .e-con > .e-con-inner,
.ec-informativa .ec-pagina-informativa {
	max-width: 820px;
	margin-inline: auto;
}

.ec-informativa .elementor-widget-heading .elementor-heading-title {
	margin-top: 14px;
	font-size: clamp(23px, 2.8vw, 30px);
}

.ec-informativa .elementor-widget-text-editor ul,
.ec-informativa .elementor-widget-text-editor ol {
	margin: 0 0 1.4em;
	padding-left: 20px;
}

.ec-informativa .elementor-widget-text-editor li { margin-bottom: 8px; }

/* ==========================================================================
   15. VETRINA
   ========================================================================== */

/* --- Striscia a tutta larghezza -----------------------------------------
   Esce dal contenitore con i margini negativi invece che con width:100vw,
   che sui browser con barra di scorrimento visibile causerebbe overflow. */

.ec-striscia {
	margin-inline: calc(50% - 50vw);
	padding-block: clamp(56px, 8vw, 96px);
	padding-inline: var(--ec-gutter);
	background: var(--ec-inchiostro);
	color: #fff;
}

.ec-striscia__int {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
}

.ec-striscia__titolo {
	margin: 0;
	font-family: var(--ec-serif);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 300;
	line-height: 1.1;
	color: #fff;
}

.ec-striscia__testo {
	margin: 0;
	font-size: 15px;
	line-height: 1.75;
	color: rgba(255, 255, 255, .78);
}

.ec-striscia__bottone {
	margin-top: 8px;
	background: transparent;
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
}

.ec-striscia__bottone:hover {
	background: var(--ec-rosso);
	border-color: var(--ec-rosso);
	color: #fff;
}

/* Il fregio su fondo scuro. */
.ec-fregio--chiaro { color: rgba(255, 255, 255, .35); }
.ec-fregio--chiaro .ec-fregio__rombo { background: var(--ec-rosso); }

/* --- Contenuto richiamato da un'altra pagina --- */

.ec-pagina-richiamata > *:first-child { margin-top: 0; }
.ec-pagina-richiamata > *:last-child { margin-bottom: 0; }

/* --- Vetrina: il titolo della pagina non serve --- */

body.home .page-header,
body.home .entry-title:first-child { display: none; }

body.home .site-main { padding-top: clamp(28px, 4vw, 48px); }

/* Il contenuto richiamato da un'altra pagina va tenuto alla stessa misura di
   lettura che ha sulla pagina d'origine: nel contenitore della vetrina, largo
   1180px, le righe diventerebbero interminabili. */
.ec-pagina-richiamata {
	max-width: 860px;
	margin-inline: auto;
}

/* Le colonne del contenuto richiamato.
   Su questa pagina WordPress non accoda `wp-block-library` (la vetrina è una
   pagina Elementor e nel suo contenuto non vede blocchi), quindi le poche
   regole che servono le riscriviamo qui — è anche più leggero che caricare
   l'intero foglio dei blocchi per due colonne. */
.ec-pagina-richiamata .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.ec-pagina-richiamata .wp-block-column {
	flex-grow: 1;
	flex-basis: 0;
	min-width: 0;
}

/* Una colonna con larghezza propria non deve espandersi oltre. */
.ec-pagina-richiamata .wp-block-column[style*="flex-basis"] { flex-grow: 0; }

.ec-pagina-richiamata .wp-block-image { margin: 0 0 1.4em; }
.ec-pagina-richiamata .wp-block-image img { display: block; width: 100%; height: auto; }

@media (max-width: 781px) {
	.ec-pagina-richiamata .wp-block-column { flex-basis: 100% !important; }
	.ec-pagina-richiamata .wp-block-column:first-child {
		max-width: 420px;
		margin-inline: auto;
	}
}

/* Casella di riserva del reCAPTCHA, quando il punteggio invisibile non basta. */
.ec-recaptcha-riserva {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}

.ec-recaptcha-riserva .ec-campo__nota { margin: 0; text-align: center; }
.ec-recaptcha-v2 { display: inline-block; }

/* ==========================================================================
   16. CONSENSO AI COOKIE
   ========================================================================== */

.ec-consenso {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	background: var(--ec-crema);
	border-top: 1px solid var(--ec-linea);
	box-shadow: 0 -10px 34px rgba(42, 37, 34, .07);
	transform: translateY(100%);
	transition: transform .32s ease;
}

.ec-consenso--visibile { transform: translateY(0); }

.ec-consenso__int {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px 34px;
	width: 100%;
	max-width: var(--ec-larghezza);
	margin-inline: auto;
	padding: 22px var(--ec-gutter);
}

.ec-consenso__testo { flex: 1 1 460px; min-width: 0; }

.ec-consenso__titolo {
	margin: 0 0 6px;
	font-family: var(--ec-sans);
	font-size: var(--ec-micro-size);
	font-weight: 400;
	letter-spacing: var(--ec-micro-tracking);
	text-transform: uppercase;
	color: var(--ec-grigio);
}

.ec-consenso__testo p:last-child {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ec-testo);
}

.ec-consenso__testo a {
	color: var(--ec-rosso);
	border-bottom: 1px solid var(--ec-linea);
	padding-bottom: 1px;
}

.ec-consenso__testo a:hover { border-bottom-color: var(--ec-rosso); }

.ec-consenso__scelte {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.ec-consenso__scelte .ec-bottone { padding: 13px 22px; white-space: nowrap; }

/* Collegamento nel piè di pagina per tornare sulla scelta. */
.ec-fondo__preferenze { margin: 0; }

.ec-fondo__preferenze a {
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ec-grigio-chiaro);
}

.ec-fondo__preferenze a:hover { color: var(--ec-rosso); }

@media (max-width: 700px) {
	.ec-consenso__int { padding-block: 18px; gap: 14px; }
	.ec-consenso__scelte { width: 100%; }
	.ec-consenso__scelte .ec-bottone { flex: 1 1 0; padding-inline: 12px; }
	.ec-consenso__testo p:last-child { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.ec-consenso { transition: none; }
}