/* SMA Search — default allineati allo stile del sito (Manrope, #1B1B1B, #7A7A7A).
   Ogni selettore è scopato sotto .sma-search (0,2,0) per non perdere contro le
   regole generate da Elementor negli header (es. .elementor-element-xxxx a:hover,
   che è 0,2,1). Niente !important: i controlli di stile del widget devono
   comunque poter vincere (il CSS per-post di Elementor è stampato dopo questo
   foglio, quindi a parità di specificità vince lui). */
.sma-search { position: relative; display: inline-block; }
.sma-search--inline { display: block; width: 100%; }

/* pulsanti */
.sma-search .sma-search__toggle,
.sma-search .sma-search__submit,
.sma-search .sma-search__close {
	background: none; border: 0; padding: 0; cursor: pointer;
	color: currentColor; line-height: 1; display: inline-flex;
	align-items: center; justify-content: center;
}
/* Sfondo trasparente in OGNI stato, non solo a riposo: senza queste regole
   tema, Elementor o user-agent possono dipingere il pulsante al passaggio o al
   focus. Restano a (0,3,0), quindi i controlli "Sfondo" della sezione Icona
   (che arrivano a (0,4,0) normale e (0,5,0) hover) continuano a vincere. */
.sma-search .sma-search__toggle:hover,
.sma-search .sma-search__toggle:focus,
.sma-search .sma-search__toggle:focus-visible,
.sma-search .sma-search__toggle:active,
.sma-search .sma-search__submit:hover,
.sma-search .sma-search__submit:focus,
.sma-search .sma-search__submit:focus-visible,
.sma-search .sma-search__submit:active,
.sma-search .sma-search__close:hover,
.sma-search .sma-search__close:focus,
.sma-search .sma-search__close:focus-visible,
.sma-search .sma-search__close:active {
	background: transparent;
	box-shadow: none;
}

/* Tolta anche l'eventuale ombra di focus del tema, la traccia per chi naviga
   da tastiera va garantita esplicitamente: currentColor la rende visibile sia
   su header chiari sia su header scuri. :focus-visible non scatta col mouse. */
.sma-search .sma-search__toggle:focus-visible,
.sma-search .sma-search__submit:focus-visible,
.sma-search .sma-search__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.sma-search .sma-search__toggle i, .sma-search .sma-search__toggle svg,
.sma-search .sma-search__submit i, .sma-search .sma-search__submit svg {
	font-size: 20px; width: 1em; height: 1em; fill: currentColor;
}

/* ---------------------------------------------------------------------------
   Pannello ancorato alla lente (modalità popup).
   Non è un overlay: nessun oscuramento, nessun blocco dello scorrimento.
   position:absolute rispetto a .sma-search (che è position:relative), quindi:
     - resta incollato alla lente anche mentre si scorre, senza JS;
     - è immune al transform degli antenati, che invece dirotterebbe un
       position:fixed facendolo collassare dentro la barra dell'header.
   Il JS corregge solo lo sbordamento, tramite --sma-shift e .is-above, così
   l'ancoraggio dichiarato in CSS (e i futuri controlli Elementor) resta sovrano.
   --------------------------------------------------------------------------- */
.sma-search--popup .sma-search__panel {
	position: absolute;
	top: calc(100% + var(--sma-gap, 10px));
	right: 0; /* allineato al bordo destro della lente: si estende verso sinistra */
	transform: translateX(var(--sma-shift, 0px));
	z-index: 9999;
	box-sizing: border-box;
	width: 380px;
	max-width: calc(100vw - 24px);
	/* --sma-max-h è lo spazio realmente disponibile sopra/sotto la lente,
	   misurato dal JS: senza, un pannello alto uscirebbe dalla finestra.
	   Con l'altezza limitata, l'eccesso diventa scorrevole (overflow-y). */
	max-height: min(70vh, 520px, var(--sma-max-h, 100vh));
	max-height: min(70dvh, 520px, var(--sma-max-h, 100dvh));
	overflow-y: auto;
	display: flex; flex-direction: column;
	text-align: left;
	padding: 10px;
	background: #fff;
	border: 1px solid #E5E5E5;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.sma-search--popup .sma-search__panel[hidden] { display: none; }
/* se sotto non c'è spazio, si apre sopra la lente */
.sma-search--popup .sma-search__panel.is-above {
	top: auto;
	bottom: calc(100% + var(--sma-gap, 10px));
}
.sma-search--popup .sma-search__close {
	align-self: flex-end;
	font-size: 22px; color: #7A7A7A; padding: 0 2px 4px;
}

/* pannello inline: contenitore statico, ancora per il dropdown */
.sma-search--inline .sma-search__panel { position: relative; }

/* form */
.sma-search .sma-search__form {
	display: flex; align-items: center; gap: 8px;
	background: #fff; border: 1px solid #E5E5E5; border-radius: 999px;
	padding: 12px 20px; width: 100%; max-width: 800px;
}
.sma-search--inline .sma-search__form { max-width: none; }
.sma-search .sma-search__input {
	flex: 1; border: 0; outline: 0; background: transparent;
	font-family: var(--e-global-typography-text-font-family, "Manrope", sans-serif);
	font-size: 16px; /* 16px = niente zoom automatico su iOS: non scendere sotto */
	font-weight: 400; color: #1B1B1B; padding: 6px 0; min-width: 0;
}
.sma-search .sma-search__input::placeholder { color: #7A7A7A; opacity: 1; }
.sma-search .sma-search__submit { color: #1B1B1B; }

/* risultati */
.sma-search .sma-search__results {
	width: 100%; max-width: 800px; margin-top: 10px;
	background: #fff; border-radius: 12px;
	overflow-x: hidden; overflow-y: auto;
	max-height: min(60vh, 420px);
	box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.sma-search--inline .sma-search__results {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 999;
	max-width: none; /* largo quanto il campo */
}
/* dentro il pannello ancorato il contenitore di scorrimento è uno solo (il
   pannello), e la scheda bianca pure: qui i risultati sono un semplice elenco */
.sma-search--popup .sma-search__results {
	max-width: none; margin-top: 8px;
	max-height: none; overflow: visible;
	background: transparent; border-radius: 8px; box-shadow: none;
}
.sma-search .sma-search__results[hidden] { display: none; }

.sma-search .sma-search__item {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 16px; text-decoration: none; color: #1B1B1B;
	border-bottom: 1px solid #F2F2F2;
}
.sma-search .sma-search__item:last-child { border-bottom: 0; }
.sma-search .sma-search__item:hover,
.sma-search .sma-search__item.is-active { background: #F7F7F7; }
.sma-search .sma-search__thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.sma-search .sma-search__texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sma-search .sma-search__name {
	font-family: var(--e-global-typography-text-font-family, "Manrope", sans-serif);
	font-size: 15px; font-weight: 400; color: #1B1B1B;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sma-search .sma-search__price { font-size: 14px; color: #7A7A7A; }
.sma-search .sma-search__empty {
	padding: 16px; color: #7A7A7A;
	font-family: var(--e-global-typography-text-font-family, "Manrope", sans-serif);
}
.sma-search .sma-search__all {
	display: block; padding: 12px 16px; text-align: center;
	font-family: var(--e-global-typography-text-font-family, "Manrope", sans-serif);
	font-size: 14px; font-weight: 600;
	color: #1B1B1B; text-decoration: none; background: #F7F7F7;
}
.sma-search .sma-search__all:hover,
.sma-search .sma-search__all.is-active { background: #EFEFEF; }

/* live region per screen reader */
.sma-search .sma-search__status {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; white-space: nowrap;
	clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* sorgente delle stringhe traducibili: mai visibile */
.sma-search .sma-search__i18n { display: none; }

/* schermi stretti: il pannello prende tutta la larghezza meno un margine,
   restando ancorato alla lente (mai a tutto schermo) */
@media (max-width: 599px) {
	.sma-search--popup .sma-search__panel { width: calc(100vw - 24px); }
	.sma-search .sma-search__form { padding: 8px 14px; }
}