/* ============================================================================
   elenco.css — solo l'elenco delle calzolerie. Si carica dopo base.css
   ============================================================================ */

.prova{position:fixed;right:16px;bottom:16px;z-index:60;background:var(--ink);border-radius:100px;padding:.4rem;display:flex;gap:.3rem;box-shadow:0 10px 30px rgba(18,20,58,.3)}
.prova button{border:none;background:transparent;color:#9AA0C0;font:500 .82rem var(--testo);padding:.5rem 1rem;border-radius:100px;cursor:pointer}
.prova button.attivo{background:#fff;color:var(--ink)}
.testata img{height:44px}
.capo p{color:#A9AECD;margin-top:.8rem;max-width:34rem}
.numeri{display:flex;gap:2rem;margin-top:1.6rem;flex-wrap:wrap}
.numeri b{font-family:var(--display);font-size:1.5rem;display:block;line-height:1.1}
.numeri span{font-size:.82rem;color:#9AA0C0}
/* ricerca */
.ricerca{background:var(--nebbia);border-bottom:1px solid var(--filo);padding:1.6rem 0;position:sticky;top:74px;z-index:20}
.campi{display:flex;gap:.7rem;flex-wrap:wrap}
.campo{flex:1;min-width:180px;display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--filo);border-radius:100px;padding:0 1.1rem;height:48px}
.campo input,.campo select{border:none;outline:none;background:transparent;font:1rem var(--testo);color:var(--ink);width:100%}
.campo svg{flex:none;opacity:.45}
.regioni{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.regioni span:not(.posizione),.regioni a.zona{font-size:.82rem;padding:.35rem .85rem;border-radius:100px;border:1px solid var(--filo);background:#fff;color:var(--grigio);cursor:pointer;transition:border-color .15s,color .15s}
.regioni a.zona:hover{border-color:var(--verde);color:var(--ink)}
.regioni span.attiva:not(.posizione),.regioni a.zona.attiva{background:var(--ink);color:#fff;border-color:var(--ink)}
.regioni .posizione{margin-left:auto;font-size:.82rem;color:var(--grigio);display:flex;align-items:center;gap:.35rem}
.regioni .posizione a{color:var(--ink);border-bottom:1px solid var(--verde);cursor:pointer}
@media(max-width:640px){.regioni .posizione{margin-left:0;width:100%;margin-top:.3rem}}
/* elenco */
.elenco{padding:2.4rem 0 4rem}
.conteggio{font-size:.9rem;color:var(--grigio);margin-bottom:1.4rem}
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.2rem}
.bottega{cursor:pointer;border:1px solid var(--filo);border-radius:var(--r);padding:1.4rem;display:flex;flex-direction:column;gap:.6rem;transition:box-shadow .18s,transform .18s}
.bottega:hover{transform:translateY(-2px);box-shadow:0 14px 34px -16px rgba(18,20,58,.25)}
.riga1{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.bottega .dove{font-size:.94rem;color:var(--grigio)}
.bottega .citta{font-weight:500;color:var(--ink)}
.contatti{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem;align-items:center}
.contatti a{font-size:.86rem;border:1px solid var(--filo);border-radius:100px;padding:.35rem .85rem;color:var(--grigio)}
.contatti a.primo{border-color:var(--verde);color:#007337}
/* l'azione principale della scheda breve: staccata dalle altre e a destra */
.contatti a.scheda-vai{margin-left:auto;background:var(--ink);border-color:var(--ink);color:#fff;
  font-weight:500;padding:.45rem 1.05rem;transition:background .15s}
.contatti a.scheda-vai:hover{background:var(--ink-2)}
@media(max-width:700px){.contatti a.scheda-vai{margin-left:0;width:100%;text-align:center}}
/* certificazioni nella scheda breve: sotto i contatti */
/* intestazione della scheda breve: nome a sinistra, tessera a destra */
.bottega .testa{display:flex;align-items:flex-start;gap:.8rem}
.bottega .testa h2{font-family:var(--display);font-weight:600;font-size:1.12rem;
  letter-spacing:-.02em;line-height:1.25;margin:0;min-width:0}
.bottega .numero{margin-left:auto;flex:none;font-size:.74rem;color:var(--grigio);
  background:var(--nebbia);border-radius:100px;padding:.22rem .6rem;white-space:nowrap}

.cert-riga{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;padding-top:.7rem;border-top:1px solid var(--filo)}
.cert-riga .stelle{display:flex;gap:.2rem;flex:none}
.cert-riga .stelle svg{display:block}
.cert-riga .quante{font-size:.8rem;color:var(--grigio);white-space:nowrap}
.info{flex:none;margin-left:auto;width:26px;height:26px;border-radius:50%;border:none;
  background:var(--verde);color:#fff;font:600 .82rem/1 var(--display);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.info:hover,.info:focus-visible{background:#00913F}
.info[aria-expanded="true"]{background:var(--ink)}
.cert-legenda{display:none;margin-top:.6rem;padding:.8rem .9rem;background:var(--nebbia);border-radius:10px;font-size:.85rem}
.cert-legenda.aperta{display:block}
.cert-legenda .cert-voce{display:flex;align-items:center;gap:.55rem;padding:.35rem 0;
  border-top:1px solid var(--filo)}
.cert-legenda .cert-voce:first-child{border-top:none;padding-top:0}
.cert-legenda .cert-voce.no{color:#9AA0C0}
.cert-legenda svg{flex:none}
.cert-piede{margin-top:.6rem;padding-top:.55rem;border-top:1px solid var(--filo);
  font-size:.78rem;color:var(--grigio);line-height:1.5}
@media (prefers-reduced-motion:reduce){.info{transition:none}}
/* scheda */
.scheda{padding:2.6rem 0 4rem}
.sk-griglia{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:3rem;align-items:start}
@media(max-width:900px){.sk-griglia{grid-template-columns:1fr;gap:2rem}}
dl{margin:0}
dt{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grigio);margin-top:1rem}
dt:first-child{margin-top:0}
dd{margin:.15rem 0 0}
.mappa{aspect-ratio:4/3;border-radius:var(--r);background:var(--nebbia-2);border:1px solid var(--filo);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--grigio);gap:.5rem;text-align:center;padding:1.4rem}
.mappa small{font-size:.8rem;max-width:22rem}
.nascosto{display:none}
.pagine{display:flex;gap:.4rem;justify-content:center;margin-top:2.4rem;flex-wrap:wrap}
.pagine a,.pagine span{display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--filo);background:#fff;color:var(--grigio);font:500 .9rem var(--testo);
  min-width:42px;height:42px;border-radius:100px;padding:0 .4rem;transition:border-color .15s,color .15s}
.pagine a:hover{border-color:var(--verde);color:var(--ink)}
.pagine .qui{background:var(--ink);color:#fff;border-color:var(--ink)}
.pagine .freccia{padding:0 1.1rem}
.pagine .spento{opacity:.35}
#mappa,#mappa-elenco{border-radius:var(--r);border:1px solid var(--filo);z-index:1}
#mappa{aspect-ratio:4/3}
#mappa-elenco{height:340px;margin-bottom:1.6rem}

/* segnaposto che ne raccoglie piu' d'uno: stesso punto, piu' botteghe */
.segno-gruppo{background:transparent;border:none}
.segno-gruppo span{display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--verde);color:#fff;
  font:600 .9rem/1 var(--display);border:2.5px solid #fff;
  box-shadow:0 2px 8px rgba(18,20,58,.35)}
.leaflet-popup-content ul.molte{margin:.6rem 0 0;padding-left:1.1rem;max-height:210px;overflow:auto}
.leaflet-popup-content ul.molte li+li{margin-top:.5rem}
.leaflet-popup-content ul.molte small{color:var(--grigio)}

/* stessa larghezza dei blocchi sotto: niente aspect-ratio, che insieme
   all'altezza fissa costringeva anche la larghezza */
.mappa-chiusa.elenco{width:100%;height:340px;margin-bottom:1.6rem}

/* ===== telefono =========================================================== */

@media(max-width:420px){
  .bottega h2{font-size:1.05rem}
  .contatti a{font-size:.82rem;padding:.35rem .7rem}
}

/* --- l'elenco delle certificazioni, dietro la (i) --- */
.stella-piena{fill:var(--oro);stroke:var(--oro)}
.stella-vuota{fill:none;stroke:var(--ink);opacity:.42}
.cert-legenda{display:none;margin-top:.6rem;padding:.8rem .9rem;background:var(--nebbia);
  border-radius:10px;font-size:.85rem}
.cert-legenda .cert-voce{display:flex;align-items:center;gap:.55rem;padding:.35rem 0;
  border-top:1px solid var(--filo)}
.cert-legenda .cert-voce:first-child{border-top:none;padding-top:0}
.cert-legenda .cert-voce.no{color:#9AA0C0}
.cert-legenda svg{flex:none}
.cert-piede{margin-top:.6rem;padding-top:.55rem;border-top:1px solid var(--filo);
  font-size:.78rem;color:var(--grigio);line-height:1.5}

/* ===== telefono: la pagina dell'elenco ==================================
   La testata occupava tutto lo schermo e la prima bottega arrivava solo
   dopo aver scorso: qui si stringe, senza togliere niente. */

/* ==========================================================================
   TELEFONO
   Un blocco solo: due blocchi sovrapposti si contraddicevano.

   Attenzione a «flex» sui campi. In riga governa la larghezza e l'altezza
   resta quella scritta; in colonna governa l'ALTEZZA e vince sull'altezza
   dichiarata, schiacciando i campi a una riga di testo. Per questo qui i
   campi sono «flex: 0 0 auto»: la loro altezza la decide l'altezza, non il
   flex.
   ========================================================================== */
@media (max-width: 700px) {
  .capo { padding: 1.4rem 0 1.6rem; }
  .capo h1 { font-size: 1.75rem; line-height: 1.12; }
  .capo p { font-size: .95rem; margin-top: .6rem; }
  .occhiello { font-size: .68rem; }
  .numeri { gap: 1rem; margin-top: 1rem; flex-wrap: nowrap; }
  .numeri b { font-size: 1.25rem; }
  .numeri span { font-size: .72rem; line-height: 1.25; display: block; }

  .ricerca { padding: .9rem 0 1rem; }
  .campi { flex-direction: column; gap: .55rem; }
  .campo { flex: 0 0 auto; width: 100%; min-width: 0; max-width: none !important;
           height: 42px; padding: 0 .9rem; gap: .5rem; }
  .campi .bottone { flex: 0 0 auto; width: 100%; height: 42px; padding: 0 1.4rem; }
  .campo input, .campo select { font-size: .92rem; line-height: 1; }

  .regioni { gap: .4rem; margin-top: .7rem; }
  .regioni .posizione { border: none; background: transparent; padding: 0;
                        margin-top: .5rem; font-size: .84rem; }

  .conteggio { font-size: .84rem; margin-bottom: 1rem; }
  .griglia { grid-template-columns: 1fr; gap: .9rem; }
  .bottega { padding: 1.1rem 1.2rem; }
  .bottega h2 { font-size: 1.08rem; }
  .contatti a.scheda-vai { margin-left: 0; width: 100%; text-align: center; }
  .cert-riga { flex-wrap: wrap; row-gap: .4rem; }
  .cert-riga .quante { font-size: .78rem; }

  .mappa-chiusa.elenco { height: 250px; margin-bottom: 1.2rem; }
  #mappa-elenco { height: 280px; }
  .elenco { padding: 1.6rem 0 2.6rem; }
  .pagine { gap: .3rem; flex-wrap: wrap; }
}

/* la (i) della ricerca (base.css): il riquadro si apre sotto la barra */
.campi{position:relative}
.campi .cerca-aiuto{align-self:center}
/* sul telefono i campi vanno in colonna: la (i) sta sulla riga del pulsante,
   a destra, e il riquadro si apre sotto, largo quanto la barra */
@media(max-width:640px){
  .campi .bottone{width:calc(100% - 44px - .55rem)}
  .campi .cerca-aiuto{position:absolute;right:0;bottom:0}
  .campi .cerca-aiuto-testo{left:auto;right:0;width:calc(100vw - 36px)}
}