/* FS Ricerca — il velo nero a tutto schermo. Vedi fs-ricerca.php. */

.fs-cerca{
  --fc-fondo:#0f0f0f; --fc-fondo2:#1a1a1a; --fc-linea:#2e2e2e; --fc-linea2:#4a4a4a;
  --fc-testo:#f1f1f1; --fc-tenue:#9a9a9a; --fc-spento:#555;
  position:fixed; inset:0; z-index:2147483000;
  background:var(--fc-fondo); color:var(--fc-testo);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  font-family:"Inter Tight","Inter",sans-serif;
  opacity:0; transition:opacity .35s ease;
}
.fs-cerca[hidden]{display:none}
.fs-cerca.is-aperta{opacity:1}
body.admin-bar .fs-cerca{top:32px}
body.admin-bar .fs-cerca__chiudi{top:44px}
@media (max-width:782px){ body.admin-bar .fs-cerca{top:46px} body.admin-bar .fs-cerca__chiudi{top:52px} }
html.fs-cerca-aperta, html.fs-cerca-aperta body{overflow:hidden!important}

.fs-cerca *{box-sizing:border-box}
.fs-cerca button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
.fs-cerca svg{display:block; fill:currentColor}

/* fissa all'angolo, fuori dal flusso: da flottante+sticky spostava il
   contenuto sotto di se' (24/09) */
.fs-cerca__chiudi{position:fixed; top:12px; right:24px; width:56px; height:56px; margin:0;
  display:flex!important; align-items:center; justify-content:center; z-index:3; border-radius:50%;
  transition:background .2s}
.fs-cerca__chiudi:hover{background:var(--fc-fondo2)}
.fs-cerca__chiudi svg{width:28px; height:28px}

.fs-cerca__dentro{max-width:1640px; margin:0 auto; padding:48px 4vw 80px;
  transform:translateY(12px); transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.fs-cerca.is-aperta .fs-cerca__dentro{transform:none}

.fs-cerca__titolo{font-family:"Playfair Display",serif; font-weight:400; font-size:clamp(28px,3.2vw,44px);
  line-height:1.15; text-align:center; margin:0 0 28px; color:var(--fc-testo); letter-spacing:0}

/* ---------- campo ---------- */
.fs-cerca__campo{position:relative; max-width:780px; margin:0 auto}
.fs-cerca__campo input{width:100%; height:62px; padding:0 96px 0 24px; margin:0;
  background:var(--fc-fondo2); color:var(--fc-testo); border:1px solid var(--fc-linea); border-radius:4px;
  font:inherit; font-size:17px; outline:none; transition:border-color .2s; -webkit-appearance:none; appearance:none}
.fs-cerca__campo input::placeholder{color:var(--fc-tenue); opacity:1}
.fs-cerca__campo input:focus{border-color:var(--fc-linea2)}
.fs-cerca__campo input::-webkit-search-cancel-button{display:none}
.fs-cerca__lente{position:absolute; right:20px; top:50%; width:26px; height:26px; transform:translateY(-50%); pointer-events:none}
.fs-cerca__svuota{position:absolute; right:56px; top:50%; transform:translateY(-50%); width:32px; height:32px;
  display:flex!important; align-items:center; justify-content:center; color:var(--fc-tenue); border-radius:50%}
.fs-cerca__svuota[hidden]{display:none!important}
.fs-cerca__svuota:hover{color:var(--fc-testo); background:#262626}
.fs-cerca__svuota svg{width:18px; height:18px}

/* ---------- filtri ---------- */
.fs-cerca__filtri{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:22px auto 0; max-width:980px}
.fs-cerca__filtro{position:relative}
.fs-cerca__chip{display:inline-flex!important; align-items:center; gap:8px; height:40px; padding:0 12px 0 18px!important;
  border:1px solid var(--fc-linea)!important; border-radius:40px; font-size:14px; letter-spacing:.02em;
  transition:border-color .2s, background .2s; white-space:nowrap}
.fs-cerca__chip:hover, .fs-cerca__filtro.is-aperto .fs-cerca__chip{border-color:var(--fc-linea2)!important; background:var(--fc-fondo2)}
.fs-cerca__chip.ha-scelte{border-color:var(--fc-testo)!important}
.fs-cerca__chip b{font-weight:500; background:var(--fc-testo); color:var(--fc-fondo); border-radius:20px; min-width:20px; height:20px;
  font-size:12px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px}
.fs-cerca__chip b[hidden]{display:none}
.fs-cerca__chip svg{width:18px; height:18px; transition:transform .2s}
.fs-cerca__filtro.is-aperto .fs-cerca__chip svg{transform:rotate(180deg)}

.fs-cerca__tendina{position:absolute; top:calc(100% + 8px); left:0; z-index:5; min-width:320px; max-height:min(440px,60vh); overflow-y:auto;
  background:var(--fc-fondo2); border:1px solid var(--fc-linea); border-radius:8px; padding:8px; box-shadow:0 20px 50px rgba(0,0,0,.5)}
.fs-cerca__tendina[hidden]{display:none!important}
.fs-cerca__voce{display:flex!important; width:100%; align-items:center; gap:12px; padding:10px 12px!important; border-radius:6px;
  font-size:15px; text-align:left; line-height:1.3}
.fs-cerca__voce:hover{background:#262626}
.fs-cerca__voce i{flex:0 0 18px; width:18px; height:18px; border:1px solid var(--fc-linea2); border-radius:3px; position:relative}
.fs-cerca__voce[aria-checked="true"] i{background:var(--fc-testo); border-color:var(--fc-testo)}
.fs-cerca__voce[aria-checked="true"] i::after{content:""; position:absolute; left:5px; top:1px; width:5px; height:10px;
  border:solid var(--fc-fondo); border-width:0 2px 2px 0; transform:rotate(45deg)}
.fs-cerca__voce span{flex:1}
.fs-cerca__voce small{color:var(--fc-tenue); font-size:13px}
.fs-cerca__voce:disabled{color:var(--fc-spento); cursor:default}
.fs-cerca__voce:disabled:hover{background:none}
.fs-cerca__voce:disabled i{border-color:#333}
.fs-cerca__voce:disabled small{color:var(--fc-spento)}

.fs-cerca__attivi{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:16px auto 0; max-width:980px}
.fs-cerca__attivi[hidden]{display:none}
.fs-cerca__pillola{display:inline-flex!important; align-items:center; gap:6px; height:32px; padding:0 8px 0 14px!important;
  background:var(--fc-testo)!important; color:var(--fc-fondo)!important; border-radius:32px; font-size:13px}
.fs-cerca__pillola svg{width:16px; height:16px}
.fs-cerca__azzera{font-size:13px; text-decoration:underline; text-underline-offset:3px; color:var(--fc-tenue)!important; padding:0 8px!important}
.fs-cerca__azzera:hover{color:var(--fc-testo)!important}

/* ---------- risultati ---------- */
.fs-cerca__corpo{margin-top:48px; min-height:40vh}
.fs-cerca__attesa, .fs-cerca__vuoto{text-align:center; color:var(--fc-tenue); font-size:16px; margin:40px 0}
.fs-cerca__vuoto button{display:inline-block; margin-top:16px; padding:12px 22px!important; border:1px solid var(--fc-linea2)!important;
  color:var(--fc-testo)!important; font-size:13px; letter-spacing:.12em; text-transform:uppercase}
.fs-cerca__testa{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 20px}
.fs-cerca__testa h3{font-family:inherit; font-size:21px; font-weight:500; margin:0; color:var(--fc-testo);
  display:flex; align-items:center; gap:10px; letter-spacing:0}
.fs-cerca__testa h3 svg{width:22px; height:22px; color:#e0445a}
.fs-cerca__testa span{color:var(--fc-tenue); font-size:14px}

.fs-cerca__griglia{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:36px 24px}
@media (max-width:1280px){ .fs-cerca__griglia{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:1024px){ .fs-cerca__griglia{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:767px){ .fs-cerca__griglia{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 12px} }

.fs-cerca__card{min-width:0; animation:fsCercaEntra .45s ease both}
@keyframes fsCercaEntra{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.fs-cerca__foto{display:block; aspect-ratio:3/4; overflow:hidden; background:var(--fc-fondo2); border-radius:2px}
.fs-cerca__foto img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1), opacity .4s}
/* solo con un mouse vero: sul telefono il :hover resta incollato dopo il tocco */
@media (hover:hover){ .fs-cerca__card:hover .fs-cerca__foto img{transform:scale(1.035)} }
.fs-cerca__meta{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-top:14px}
.fs-cerca__meta div{min-width:0}
.fs-cerca__marca{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fc-tenue); margin-bottom:5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fs-cerca__nome{display:block; font-size:16px; line-height:1.3; color:var(--fc-testo)!important; text-decoration:none!important}
.fs-cerca__nome:hover{text-decoration:underline!important; text-underline-offset:3px}

/* il bottone preferiti e' quello del tema (js/wishlist.js lo aggancia per classe) */
.fs-cerca .pe-wishlist-btn{flex:0 0 auto; width:28px; height:28px; color:var(--fc-testo); cursor:pointer; background:none!important; padding:0!important; border:0!important}
.fs-cerca .pe-wishlist-btn svg{width:24px; height:24px; fill:currentColor}
.fs-cerca .pe-wishlist-btn .wishlist--added--icon{display:none}
.fs-cerca .pe-wishlist-btn.in--wishlist .wishlist--added--icon{display:block}
.fs-cerca .pe-wishlist-btn.in--wishlist .wishlist--add--icon{display:none}
.fs-cerca .pe-wishlist-btn.loading{opacity:.4}

.fs-cerca__altri{display:block!important; margin:48px auto 0; padding:15px 30px!important; border:1px solid var(--fc-linea2)!important;
  font-size:13px!important; letter-spacing:.14em; text-transform:uppercase; transition:background .2s, color .2s}
.fs-cerca__altri:hover{background:var(--fc-testo)!important; color:var(--fc-fondo)!important}
@media (hover:none){ .fs-cerca__altri:hover{background:none!important; color:var(--fc-testo)!important} }

/* bottone «Mostra N abiti» in fondo al foglio dei filtri: solo telefono */
.fs-cerca__vedi{display:none!important}

/* ---------- telefono ---------- */
@media (max-width:767px){
  .fs-cerca__chiudi{width:48px; height:48px; top:6px; right:6px}
  .fs-cerca__dentro{padding:52px 16px 60px}
  .fs-cerca__titolo{margin-bottom:20px}
  .fs-cerca__campo input{height:54px; font-size:16px; padding-left:18px}
  /* i filtri scorrono di lato invece di andare su tre righe */
  .fs-cerca__filtri{flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; margin:16px -16px 0; padding:0 16px 4px;
    scrollbar-width:none}
  .fs-cerca__filtri::-webkit-scrollbar{display:none}
  .fs-cerca__filtro{position:static}
  /* la tendina diventa un foglio dal basso */
  .fs-cerca__tendina{position:fixed; left:0; right:0; bottom:0; top:auto; min-width:0; max-height:70vh;
    border-radius:16px 16px 0 0; padding:12px 12px calc(12px + env(safe-area-inset-bottom)); box-shadow:0 -20px 60px rgba(0,0,0,.6); z-index:6}
  /* velino sotto il foglio (ricerca.js lo mostra all'apertura) */
  .fs-cerca__velino{position:fixed; inset:0; z-index:5; background:rgba(0,0,0,.6)}
  .fs-cerca__velino[hidden]{display:none}
  .fs-cerca__tendina::before{content:attr(data-titolo); display:block; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--fc-tenue); padding:6px 12px 10px}
  .fs-cerca__vedi{display:block!important; position:sticky; bottom:0; width:100%; margin-top:8px; height:50px;
    background:var(--fc-testo)!important; color:var(--fc-fondo)!important; border-radius:6px; font-size:15px!important; font-weight:500}
  .fs-cerca__corpo{margin-top:32px}
  .fs-cerca__testa h3{font-size:18px}
  .fs-cerca__nome{font-size:14px}
  .fs-cerca__marca{font-size:10px}
}

@media (prefers-reduced-motion:reduce){
  .fs-cerca, .fs-cerca__dentro, .fs-cerca__card, .fs-cerca__foto img{transition:none!important; animation:none!important}
}

/* tastiera: il tema toglie il contorno a tutto, qui serve vedere dove si e' */
.fs-cerca :focus-visible{outline:2px solid var(--fc-testo)!important; outline-offset:3px!important}
.fs-cerca__campo input:focus-visible{outline:none!important; border-color:var(--fc-testo)}
.fs-cerca__foto:focus-visible{outline-offset:-2px!important}