/* =========================================================================
   LA RICERCA NEL CATALOGO — lente in testata, buca a comparsa.
   =========================================================================

   Requisito 4.11 delle specifiche, mai disegnato dai creativi: il markup e il perche'
   stanno in `inc/ricerca.php`, la fascia in cui la barra passa a hamburger sta in
   `header.css`.

   ------------------------------------------------------------------------
   IL CAMPO NON ENTRA NELLA BARRA, E NON DEVE

   Misurato il 2026-08-24 lo spazio libero fra l'ultima voce del menu e il carrello:

       1920            190 px
       1280             19 px
       1025-1250      **negativo** — «Altri Prodotti» invade gia' la pillola «Contatti»
        430             69 px liberi fra logo e carrello

   Una buca di ricerca non ci sta a nessuna di quelle larghezze. Ci sta invece una
   **lente**, che costa ~40 px, e la buca vive in un pannello che **esiste solo quando
   e' aperto**: quando e' chiuso ha altezza zero e non occupa niente.

   Il difetto della fascia 1025-1250 non e' stato aggirato ma **risolto alla radice**,
   in `header.css`: la' sotto i 1250 px compare l'hamburger, quindi la barra estesa vive
   solo dove ci sta davvero, e la lente trova posto ovunque.
   ========================================================================= */

:root {
	/*
	 * LO SPESSORE DELLA LENTE, che e' l'unico numero da toccare se l'occhio non e'
	 * d'accordo. L'icona di Elementor e' stata scartata perche' troppo grassa accanto
	 * al carrello, che e' `cart-light`.
	 *
	 * 1,65 unita' su 28 px fanno **1,93 px reali**, e il numero non e' a occhio.
	 *
	 * L'icona account e' un PNG, quindi il suo tratto si puo' **contare**: caricata in
	 * un canvas e misurate le corse di pixel scuri, il file e' 107x123 renderizzato a
	 * 22,6, cioe' scala 0,211. Le corse piu' frequenti sono **8 px in verticale e 10 in
	 * orizzontale**, che a schermo fanno **1,69 e 2,11 px**.
	 *
	 * La lente stava a 1,63: la piu' sottile delle tre icone, come segnalato. 1,93 cade
	 * in mezzo alle due misure dell'account — e sta piu' verso l'alto di proposito,
	 * perche' un tratto **curvo** si legge otticamente piu' leggero di uno dritto dello
	 * stesso spessore.
	 *
	 * Nota di metodo: lo spessore e' in unita' del `viewBox`, quindi **cresce insieme al
	 * disegno**. Se un domani l'icona cambia misura, questo numero va ricalcolato:
	 * px reali = tratto x (misura / 24).
	 */
	--lds-cerca-tratto: 1.65;
}

/* ------------------------------------------------------- il gruppo --- */

/*
 * Lente e carrello affiancati. Il gruppo avvolge il contenuto del widget carrello
 * (vedi `inc/ricerca.php`) e **non dichiara `position`**: il pannello del minicarrello,
 * che e' posizionato in assoluto, deve continuare ad agganciarsi a quello di prima.
 */
/*
 * IL RITMO RACCONTA I GRUPPI. Fra carrello e account il disegno mette **16 px, un filo
 * da 1 px, altri 16**, cioe' **33** di distacco. Fra lente e carrello ce ne sono **6**.
 *
 * Non e' una scorciatoia per far spazio: quel filo divide le parti **operative** —
 * cercare, comprare — da quelle **consultative**, cioe' l'account. La lente sta nel
 * primo gruppo, e 6 contro 33 lo dicono senza bisogno di un segno grafico: due icone
 * quasi appaiate da una parte, uno stacco largo dall'altra.
 *
 * Il 6 e' una scelta dell'utente dopo averlo visto a 16, che a schermo risultava ancora
 * un vuoto. Vale a ogni larghezza: sul telefono e' anche il gap che restituisce spazio
 * alla barra.
 */
.lds-cerca__gruppo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/*
 * IL COLPEVOLE DELLO STACCO, misurato: il collegamento del carrello ha
 * `padding: 12px 0 12px 24px`. Quei **24 px a sinistra** si sommavano alla nostra
 * distanza, e l'inchiostro della lente finiva a 38 px dal carrello mentre carrello e
 * account ne hanno 33 con un separatore in mezzo. Da qui l'impressione — giusta — che
 * la lente fosse sciolta.
 *
 * L'imbottitura si azzera **solo dentro il nostro gruppo**, cioe' solo dove ora c'e'
 * qualcosa alla sua sinistra: cosi' la distanza la governa il `gap` di sopra, che e'
 * un numero solo e visibile.
 */
.lds-cerca__gruppo .elementor-menu-cart__toggle .elementor-button {
	padding-left: 0 !important;
}


/* -------------------------------------------------------- la lente --- */

/*
 * IL SELETTORE E' DOPPIO PER FORZA, non per abitudine: il kit di Elementor stila
 * **tutti** i `button` con `.elementor-kit-125 button`, che vale (0,1,1) e impone
 * `padding: 18px 48px`. Una classe sola perderebbe, e infatti al primo tentativo la
 * lente misurava 120x60 invece di 24x24 — misurato, non immaginato.
 *
 * L'IMBOTTITURA CON MARGINE NEGATIVO non e' un trucco fine a se stesso: allarga l'area
 * toccabile a 40x40, che e' la misura minima ragionevole su un telefono, mentre il
 * margine negativo la riporta a 24 **ai fini del layout**. Cosi' il dito ha spazio e la
 * barra non perde 16 px, che nella fascia stretta erano il problema di partenza.
 */
.lds-cerca__gruppo .lds-cerca__tasto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	margin: -8px;
	border: 0;
	background: none;
	color: #012F2B;
	cursor: pointer;
	line-height: 0;
}

/*
 * 28 e non 24: accanto al carrello, il cui inchiostro e' largo ~31 px, e all'account,
 * che e' 22,6x26, una lente da 24 si leggeva piu' piccola. A 28 il disegno occupa ~21 px
 * di inchiostro, cioe' la misura dell'account.
 */
.lds-cerca__icona {
	width: 28px;
	height: 28px;
	display: block;
}

/* La variabile vince sull'attributo dell'SVG: vedi la nota in `inc/ricerca.php`. */
.lds-cerca__icona circle,
.lds-cerca__icona line {
	stroke-width: var(--lds-cerca-tratto);
}

/*
 * AL PASSAGGIO DEL MOUSE NON SUCCEDE NIENTE, ed e' una scelta.
 *
 * Non e' quello che si vedeva: il kit di Elementor stila **tutti** i `button`, hover
 * compreso, quindi la lente prendeva fondo verde scuro e tratto rosso — un pulsante
 * pieno in mezzo a due icone nude. Non era un mio effetto: era il kit che passava.
 *
 * Qui si annulla, e non si mette niente al suo posto, perche' carrello e account
 * accanto non fanno niente: un'icona su tre che reagisce sarebbe una terza incoerenza
 * al posto della prima. Il cursore a mano dice gia' che si puo' premere.
 *
 * Il **fuoco da tastiera** invece resta visibile, e non e' una scelta di gusto: senza,
 * chi naviga col tabulatore non sa dove si trova.
 */
.lds-cerca__gruppo .lds-cerca__tasto:hover,
.lds-cerca__gruppo .lds-cerca__tasto:active,
.lds-cerca__gruppo .lds-cerca__tasto:focus {
	background: none;
	color: #012F2B;
	box-shadow: none;
}

.lds-cerca__gruppo .lds-cerca__tasto:focus-visible {
	outline: 2px solid #012F2B;
	outline-offset: 2px;
	border-radius: 4px;
}

/* ------------------------------------------------------ il pannello --- */

/*
 * A TUTTA LARGHEZZA SOTTO LA BARRA.
 *
 * Ancorato alla **testata**, che e' gia' `position: relative` — verificato. Ci arriva
 * perche' `ricerca.js` lo sposta li': nato dentro il widget carrello resterebbe
 * prigioniero della pillola verde, che e' anch'essa posizionata.
 *
 * Chiuso e' `max-height: 0` con `overflow: hidden`, quindi non occupa spazio e non e'
 * raggiungibile col tabulatore; lo `hidden` del markup viene tolto da JavaScript
 * appena il pannello e' pronto, cosi' senza JavaScript non compare un modulo che
 * nessun tasto sa aprire.
 */
.lds-cerca__pannello {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 98;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transform: translateY(-8px);
	/*
	 * FONDO TRASPARENTE, deciso guardandolo aperto sulla home: la fascia color crema
	 * tagliava la fotografia in due. Trasparente, quello che resta sono il campo bianco
	 * e il pulsante rosso che galleggiano sull'immagine — la stessa idea della pillola
	 * verde del menu, che galleggia anche lei.
	 *
	 * La leggibilita' non ci rimette perche' **gli elementi sono opachi loro**: il
	 * fondo serviva a niente, dato che nel pannello non c'e' testo nudo.
	 */
	background: transparent;
	transition: max-height .45s ease, opacity .35s ease, transform .45s ease;
}

.lds-cerca__pannello[hidden] {
	display: none;
}

.lds-cerca--aperta .lds-cerca__pannello {
	max-height: 160px;
	opacity: 1;
	transform: translateY(0);
	/* Nessuna ombra: senza fondo non c'e' piu' un piano da staccare da quello sotto. */
}

@media (prefers-reduced-motion: reduce) {

	.lds-cerca__pannello {
		transition: none;
	}
}

/*
 * LARGO QUANTO LA NAVBAR, A OGNI LARGHEZZA — e la misura non e' scritta qui.
 *
 * Con il fondo trasparente il campo galleggia, e l'unica cosa che lo tiene «in riga» e'
 * l'allineamento con la barra sopra. La prima versione lo inseguiva con dei numeri:
 * massimo 1628 px (la larghezza della testata a 1920, e del frame `NAV` in Figma) piu'
 * 24 px di imbottitura sotto quella soglia. **A 1440 la buca risultava piu' larga della
 * barra**, perche' li' la testata ha margini di 50, non di 24.
 *
 * Le due variabili qui sotto le scrive `ricerca.js`, che **chiede la misura alla barra
 * stessa** — il contenitore che ospita il logo — e la riaggiorna quando la finestra
 * cambia. Cosi' l'allineamento e' vero per costruzione anche alle larghezze che nessuno
 * ha provato, e se un domani la testata cambia margini la buca lo segue da sola.
 *
 * Il ripiego serve solo per l'istante fra il primo disegno e la prima misura: senza
 * JavaScript il pannello non e' nemmeno raggiungibile (nasce `hidden`), quindi non c'e'
 * un caso «senza script» da servire.
 */
.lds-cerca__modulo {
	display: flex;
	align-items: center;
	gap: 12px;
	width: var(--lds-cerca-larghezza, min(1628px, calc(100% - 48px)));
	margin-left: var(--lds-cerca-sinistra, auto);
	margin-right: auto;
	padding: 20px 0;
}

/* L'etichetta serve a chi naviga con lo screen reader, non all'occhio. */
.lds-cerca__etichetta {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.lds-cerca__pannello .lds-cerca__campo {
	flex: 1 1 auto;
	min-width: 0;
	height: 55px;
	padding: 0 20px;
	border: 1.5px solid #C4C5C4;
	border-radius: 100px;
	background: #FFFFFF;
	color: #012F2B;
	font-family: Archivo, sans-serif;
	font-size: 18px;
}

.lds-cerca__pannello .lds-cerca__campo::placeholder {
	color: #7E7E7E;
}

.lds-cerca__pannello .lds-cerca__campo:focus {
	outline: none;
	border-color: #012F2B;
}

/* Stesso pulsante rosso del resto del sito, stesso verde al passaggio. */
.lds-cerca__pannello .lds-cerca__invia {
	flex: 0 0 auto;
	height: 55px;
	padding: 0 32px;
	border: 0;
	border-radius: 100px;
	background: #FF3B32;
	color: #FFFFFF;
	font-family: Archivo, sans-serif;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.lds-cerca__pannello .lds-cerca__invia:hover,
.lds-cerca__pannello .lds-cerca__invia:focus-visible {
	background: #DEF39B;
	color: #012F2B;
}

@media (max-width: 767px) {

	.lds-cerca__modulo {
		padding: 16px 0;
		gap: 8px;
	}

	.lds-cerca__pannello .lds-cerca__campo {
		height: 48px;
		padding: 0 16px;
		font-size: 16px;   /* sotto i 16 iOS ingrandisce la pagina al fuoco */
	}

	.lds-cerca__pannello .lds-cerca__invia {
		height: 48px;
		padding: 0 20px;
		font-size: 16px;
	}
}

/* --------------------------------------------- nessun risultato --- */

/*
 * Aggangiato al titolo d'archivio, che su una ricerca vuota e' l'unica cosa che la
 * pagina disegna: vedi il blocco in `inc/ricerca.php`. I corpi seguono il sottotitolo
 * della 404, perche' e' la stessa situazione — una pagina che spiega un vuoto.
 */
.lds-cerca__nessuno {
	max-width: 1390px;
	margin: 32px auto 0;
	padding: 0 24px;
	color: #7E7E7E;
	font-family: Archivo, sans-serif;
	font-size: 24px;
	line-height: 1.4;
	text-align: center;
}

.lds-cerca__nessuno a {
	color: #012F2B;
	text-decoration: underline;
}

@media (max-width: 767px) {

	.lds-cerca__nessuno {
		margin-top: 24px;
		padding: 0 16px;
		font-size: 18px;
	}
}

/* ================================= il telefono, dove non c'era margine === */

/*
 * A 375 px L'HAMBURGER USCIVA DALLA PILLOLA — segnalato, e misurato: il widget del
 * menu veniva compresso a **13 px** mentre il suo tasto ne occupa 53, quindi il tasto
 * sporgeva di 19 px oltre la pillola e la pagina scorreva in orizzontale.
 *
 * La causa non e' un errore di calcolo: **quella barra non aveva margine**. Sommando
 * logo, icone e hamburger, a 375 px il contenuto arrivava esattamente al bordo; la
 * lente ha consumato lo zero che restava. Su 430 infatti non succede.
 *
 * Si recupera prima da cio' che e' nostro — niente filo, gap a 6 px a ogni larghezza —
 * e solo per il resto dall'imbottitura della pillola, che e' l'unica cosa del disegno
 * toccata qui, e solo sotto i 768 px.
 *
 * L'identificativo della pillola e' scritto a malincuore, ma il modo in cui puo'
 * rompersi e' benigno: se il template viene ricostruito la regola smette di applicarsi
 * e si torna al difetto visibile di oggi, non a un danno silenzioso.
 */
@media (max-width: 767px) {

	.elementor-location-header .elementor-element-73d9ca2 {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

/* ============================================================ il velo === */

/*
 * L'OVERLAY SCURO ALL'APERTURA, chiesto il 2026-08-24.
 *
 * Serve a due cose: dare contrasto al campo, che con il fondo trasparente galleggia
 * sulla fotografia della home, e dire che il resto della pagina e' momentaneamente da
 * parte.
 *
 * DOVE STA, ED E' CIO' CHE LO FA FUNZIONARE. La testata ha `z-index: 999`, quindi un
 * velo attaccato al `body` con uno z-index piu' basso resta **sotto** di lei: barra
 * promo, menu e pannello restano illuminati e tutto il resto si scurisce. Se il velo
 * fosse dentro la testata, o sopra, spegnerebbe anche la barra — cioe' proprio la parte
 * che deve restare leggibile.
 *
 * Per la stessa ragione la classe di apertura sta **sul `body`** e non sulla testata: il
 * velo non e' un discendente della testata, quindi con quella classe non lo
 * raggiungerebbe nessun selettore.
 *
 * `pointer-events` passa ad `auto` solo da aperto: cosi' il velo **intercetta** il clic
 * invece di lasciarlo cadere su un collegamento della pagina sotto, e il gestore che
 * gia' c'e' chiude il pannello.
 */
.lds-cerca__velo {
	position: fixed;
	inset: 0;
	z-index: 900;
	/*
	 * L'opacita' e' l'unico numero da toccare qui: alzata da 0,55 a **0,68** il
	 * 2026-08-24, perche' a 0,55 la fotografia della home restava troppo presente e
	 * il campo non staccava abbastanza. Il colore e' il verde scuro del sito, non un
	 * nero: un velo nero avrebbe spento anche la tinta della pagina.
	 */
	background: rgba(1, 47, 43, .68);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}

.lds-cerca-aperta .lds-cerca__velo {
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {

	.lds-cerca__velo {
		transition: none;
	}
}