/* ==========================================================================
   🎯 PRODOTTI-FILTRI.CSS — Stili per i filtri prodotti
   ========================================================================== */

.riga-titolo-filtri {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.filtri-prodotti {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  font-family: system-ui, sans-serif;
}

.filtri-prodotti .filtro {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 140px;
}

.filtri-prodotti label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filtri-prodotti select,
.filtri-prodotti input[type="number"] {
  padding: 0.6rem 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.95rem;
  background: white;
  color: #111;
  transition: border-color 0.2s ease;
  font-family: inherit;
}

.filtri-prodotti select:focus,
.filtri-prodotti input:focus {
  border-color: #dc4a2a;
  outline: none;
}

.filtri-prodotti button {
  background-color: #dc4a2a;
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 0.65rem 1.2rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.filtri-prodotti button:hover {
  background-color: #b93e26;
}

@media (max-width: 768px) {
  .riga-titolo-filtri {
    flex-direction: column;
    align-items: flex-start;
  }
  .filtri-prodotti {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
}
/* =========================================
   CATEGORIA FIGLIA — polish filtri
   ========================================= */

.filtri-prodotti select,
.filtri-prodotti input[type="number"]{
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  background: #fff;
  color: #111;
  font-size: 16px;
  line-height: 1;
  box-shadow: none;
  outline: none;
}

.filtri-prodotti select:focus,
.filtri-prodotti input[type="number"]:focus{
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

/* reset nero */
.filtri-prodotti input[type="reset"],
.filtri-prodotti .reset,
.filtri-prodotti .reset-filters{
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.filtri-prodotti input[type="reset"]:hover,
.filtri-prodotti .reset:hover,
.filtri-prodotti .reset-filters:hover{
  background: #222;
  border-color: #222;
}
/* Spazio tra filtri e griglia prodotti */
.filtri-prodotti {
  margin-bottom: 36px;
}

/* sicurezza nel caso il layout cambi */
#risultati-prodotti {
  margin-top: 36px;
}
/* Nasconde le label dei filtri ma mantiene accessibilità */
.filtri-prodotti label{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}





/* =========================================================
   FILTRI PRODOTTI — stile Vetrineshop pulito
   ========================================================= */

.filtri-prodotti{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-end;
  margin-bottom:32px;
}

/* blocchi singoli */
.filtri-prodotti .filtro{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* SELECT stile vetrina */
.filtri-prodotti select{
  height:44px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  font-size:15px;
  min-width:180px;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease;
}

/* focus */
.filtri-prodotti select:focus{
  outline:none;
  border-color:#111;
  box-shadow:0 0 0 3px rgba(0,0,0,.08);
}

/* prezzo */
.prezzo-range{
  display:flex;
  gap:8px;
}

.prezzo-range input{
  width:110px;
  height:44px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  font-size:15px;
}

/* RESET nero */
#reset-filtri{
  height:44px;
  padding:0 16px;
  background:#111;
  color:#fff;
  border:none;
  border-radius:10px;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:opacity .2s ease;
}

#reset-filtri:hover{
  opacity:.8;
}
.filtri-prodotti .filtro-marchio,
.filtri-prodotti .filtro-negozio{
  min-width: 220px;
}

.filtri-prodotti select{
  width: 220px;
}

.filtro-pulsanti{
  min-width: 90px;
}



/* =========================================================
   FILTRI PRODOTTI — MOBILE FINAL OVERRIDE
   Marchio + Negozio su una riga
   Slider prezzo pieno sotto
   Reset outline
   ========================================================= */

@media (max-width: 768px){

  .filtri-prodotti{
    display:grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
    align-items:end !important;
    width:100% !important;
    margin-bottom:20px !important;
  }

  .filtri-prodotti .filtro{
    min-width:0 !important;
    width:100% !important;
  }

  .filtri-prodotti .filtro-marchio{
    grid-column:1 !important;
  }

  .filtri-prodotti .filtro-negozio{
    grid-column:2 !important;
  }

  /* slider prezzo occupa tutta la riga */
.filtri-prodotti .filtro-prezzo{
  grid-column:1 / -1 !important;
  width:100% !important;
}

.filtri-prodotti .filtro-prezzo .vs-price-slider{
  width:100% !important;
  max-width:none !important;
}

.filtri-prodotti .filtro-prezzo .vs-price-slider-values{
  width:100%;
  justify-content:space-between;
}

  .filtri-prodotti .filtro-pulsanti{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    justify-content:flex-end !important;
  }

  .filtri-prodotti select{
    width:100% !important;
    min-width:0 !important;
  }

  .filtri-prodotti .filtro-prezzo .vs-price-slider{
  width:100% !important;
  max-width:none !important;
}


  .filtri-prodotti .filtro-prezzo .vs-price-slider-values{
    justify-content:flex-start !important;
  }

  #reset-filtri{
    background:#fff !important;
    color:#111 !important;
    border:1px solid #111 !important;
    min-width:120px !important;
  }

  #reset-filtri:hover{
    background:#111 !important;
    color:#fff !important;
    opacity:1 !important;
  }
}

#reset-filtri{
  display:none;
}

#reset-filtri.is-visible{
  display:inline-flex;
}
/* =========================================================
   RESET FILTRI — allineamento definitivo
   ========================================================= */

#reset-filtri{
  display: none;
}

#reset-filtri.is-visible{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.filtro-pulsanti{
  display:flex;
  align-items:center;
}

#reset-filtri{
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;

  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;

  border-radius: 12px !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px){
  #reset-filtri{
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    font-size: .9rem !important;
  }
}

/* =========================================================
   SLIDER PREZZO — rifinitura mobile finale
   full width + handle un po' più grandi
   ========================================================= */

@media (max-width: 768px){

  .filtri-prodotti .filtro-prezzo.filtro-prezzo-slider{
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .filtri-prodotti .filtro-prezzo.filtro-prezzo-slider .vs-price-slider{
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
  }

  .filtri-prodotti .filtro-prezzo.filtro-prezzo-slider .vs-price-slider-values{
    width: 100% !important;
    justify-content: space-between !important;
  }

  .filtri-prodotti .filtro-prezzo.filtro-prezzo-slider .noUi-horizontal .noUi-handle{
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    right: -8px !important;
    top: -6px !important;
  }
}
/* =========================================================
   SLIDER PREZZO — mobile raffinato (spazio per le maniglie)
   ========================================================= */

@media (max-width: 768px){

  .filtri-prodotti .filtro-prezzo.filtro-prezzo-slider{
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  /* contenitore slider con margine tecnico */
  .filtri-prodotti .filtro-prezzo.filtro-prezzo-slider .vs-price-slider{
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  /* valori prezzo */
  .filtri-prodotti .filtro-prezzo.filtro-prezzo-slider .vs-price-slider-values{
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    justify-content: space-between !important;
  }

  /* maniglie più grandi e comode */
  .filtri-prodotti .filtro-prezzo.filtro-prezzo-slider .noUi-horizontal .noUi-handle{
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;

    right: -9px !important;
    top: -7px !important;

    border-radius: 50% !important;
  }

}

/* =========================================================
   FILTRI PRODOTTI — rifinitura tipografica editoriale
   migliora leggibilità senza alterare layout
   ========================================================= */

/* Titolo categoria nella pagina */
.pagina-tax-categoria .titolo-vetrina{
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Select filtri */
.filtri-prodotti select{
  letter-spacing: 0.01em;
}

/* Valori prezzo slider */
.vs-price-slider-values{
  letter-spacing: 0.015em;
  font-weight: 500;
}

/* Reset button */
#reset-filtri{
  letter-spacing: 0.02em;
}

/* micro miglioramento leggibilità su mobile */
@media (max-width: 768px){

  .pagina-tax-categoria .titolo-vetrina{
    letter-spacing: -0.01em;
  }

  .vs-price-slider-values{
    font-size: 0.95rem;
  }

}