/* =====================================================================
   LA BARRA DEI FILTRI: MARCA E ORDINAMENTO

   Prima i filtri erano una lista di caselle in una colonna a sinistra,
   con bordi grigi squadrati e maiuscoletto: un aspetto che non c'entrava
   niente col resto del sito, che e' arancione, pieno e con angoli
   morbidi.

   Qui la colonna dei filtri diventa una barra orizzontale sopra i
   prodotti: un pulsante "Marca" che apre un pannello con la ricerca e le
   caselle da spuntare, e accanto l'ordinamento. Non si tocca nessun
   template di impaginazione: nella pagina la colonna sinistra viene
   PRIMA del contenuto, quindi basta darle tutta la larghezza perche' si
   sistemi da se' sopra la griglia.

   L'arancione non e' inventato: e' quello dei pulsanti del tema.
   ===================================================================== */

:root {
    --sd-arancio: #ff9900;
    --sd-arancio-scuro: #e88a00;
    --sd-bordo: #dcdcdc;
    --sd-testo: #333;
    --sd-tenue: #777;
}

/* --- la colonna dei filtri diventa una fascia in cima --------------- */

body.page-category #left-column,
body.page-search #left-column,
body.page-manufacturer #left-column,
body.page-supplier #left-column {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-right: 15px;
    padding-left: 15px;
}

body.page-category #content-wrapper,
body.page-search #content-wrapper,
body.page-manufacturer #content-wrapper,
body.page-supplier #content-wrapper {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

/*
  IL CONTENITORE DEI FILTRI SI VEDE SEMPRE.

  Sul telefono il tema lo nasconde con la classe `hidden-sm-down` e lo
  apriva un pulsante: adesso non c'e' piu' niente da aprire.

  ⚠️ QUI DENTRO C'ERA `display: block !important`, ed e' costato mezz'ora:
  essendo !important vinceva sul `display: flex` scritto piu' sotto, e
  Marca e ordinamento restavano incolonnati invece di stare in riga. Il
  valore giusto e' flex - la riga della barra - e l'!important serve solo
  a battere il `display: none` del tema.
*/
#search_filters_wrapper.hidden-sm-down {
    display: flex !important;
}

/*
  VIA IL PULSANTE "OK".

  Era la pulsantiera del vecchio pannello a scomparsa: si sceglievano i
  filtri dentro un cassetto e si confermava con OK. Il cassetto non c'e'
  piu', quindi quel pulsante arancione non conferma niente. Restava li'
  perche' il tema lo stampa insieme al contenitore, che noi teniamo
  sempre visibile.
*/
#search_filter_controls {
    display: none !important;
}

/* =====================================================================
   MARCA E ORDINAMENTO IN RIGA

   Sul computer una riga sola: il pulsante "Marca" a sinistra,
   l'ordinamento spinto a destra. Sul telefono uno sotto l'altro, tutti e
   due a tutta larghezza.

   ⚠️ I DUE PEZZI NASCONO LONTANI. Il filtro lo stampa ps_facetedsearch
   nella colonna sinistra, l'ordinamento sta nella barra sopra i
   prodotti, dentro il contenuto: in pagina sono due rami diversi, e con
   il solo CSS non si mettono in riga. Il contenitore comune e'
   #search_filters_wrapper, che ha il pregio di NON essere sostituito
   dagli aggiornamenti in AJAX; il menu dell'ordinamento ce lo porta
   sdspeedypack.js, e lo rifa' dopo ogni aggiornamento.
   ===================================================================== */

/*
  I selettori sono lunghi per forza: il tema scrive le sue regole su
  questi stessi elementi con tre id in fila
  (#category #left-column #search_filters_wrapper), e una classe non le
  batte. Qui si pareggia il conto invece di alzare tutto a !important.
*/
#left-column #search_filters_wrapper,
#category #left-column #search_filters_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: auto;
    margin: 0 0 16px;
    padding: 0;
}

/* I due pezzi si stringono sul loro contenuto: senza, il tema li fa
   larghi quanto la pagina e vanno a capo uno per riga. */
#left-column #search_filters.sd-filtri,
#category #left-column #search_filters.sd-filtri {
    flex: 0 0 auto;
    width: auto;
}

#left-column #search_filters_wrapper > .sd-ordinamento {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
}

/*
  IL GRUPPO DEI FILTRI NON E' PIU' UN RIQUADRO: e' solo il contenitore
  dei pulsanti che aprono.

  ⚠️ Il bordo va tolto con l'ID, non con la classe. Il tema disegna
  `#search_filters` come una scheda bianca squadrata, e nelle categorie
  ci aggiunge un filo grigio in cima con tre id in fila. Scritto
  `.sd-filtri { border: 0 }` non succedeva niente: attorno alla pastiglia
  "Marca" restava un rettangolo, che e' esattamente la cosa che il
  negoziante ha visto.
*/
.sd-filtri {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#search_filters.sd-filtri,
#left-column #search_filters.sd-filtri,
#category #left-column #search_filters.sd-filtri {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/* --- il pulsante che apre ------------------------------------------ */

.sd-dd {
    position: relative;
}

.sd-dd-pulsante {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 10px 18px;
    border: 1px solid var(--sd-bordo);
    border-radius: 999px;
    background: #fff;
    color: var(--sd-testo);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.sd-dd-pulsante:hover {
    border-color: #c8ccd0;
}

.sd-dd-testo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Quante marche sono scelte: chiuso il pannello, e' l'unico modo per
   saperlo senza riaprirlo. */
.sd-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--sd-arancio);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sd-dd-piena {
    border-color: var(--sd-arancio);
    background: #fff7ea;
    font-weight: 600;
}

/* La freccia sono due bordi girati: nessuna immagine da scaricare. */
.sd-dd-freccia {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.7px solid #9aa0a6;
    border-bottom: 1.7px solid #9aa0a6;
    transform: rotate(45deg);
    transition: transform .15s, margin-top .15s;
}

.sd-dd-aperto .sd-dd-pulsante {
    border-color: var(--sd-arancio);
    background: #fff7ea;
}

.sd-dd-aperto .sd-dd-freccia {
    margin-top: 3px;
    transform: rotate(-135deg);
}

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

.sd-dd-pannello {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 50;
    width: min(520px, 88vw);
    padding: 14px;
    border: 1px solid var(--sd-bordo);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(31, 35, 40, .15);
}

.sd-dd-aperto .sd-dd-pannello {
    display: block;
}

.sd-cerca-campo {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--sd-bordo);
    border-radius: 9px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0A6' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") no-repeat 11px center/15px;
    color: var(--sd-testo);
    font-size: 13.5px;
}

.sd-cerca-campo:focus {
    border-color: var(--sd-arancio);
    box-shadow: 0 0 0 3px rgba(255, 153, 0, .15);
    outline: 0;
}

/*
  DUE COLONNE SUL COMPUTER. Le marche sono spesso una cinquantina: su una
  colonna sola il pannello diventa un pozzo da scorrere. Con `columns`
  non si tocca la struttura - le righe restano quelle - e sul telefono si
  torna a una colonna.
*/
.sd-lista {
    max-height: 296px;
    margin-top: 10px;
    overflow: auto;
    columns: 2;
    column-gap: 10px;
    scrollbar-width: thin;
}

.sd-riga {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 9px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color .12s;
    break-inside: avoid;
}

.sd-riga:hover {
    background: #f7f8f9;
}

/* La casella disegnata a mano: quella del sistema non si puo' colorare,
   e in mezzo a un pannello bianco si vedeva solo lei. */
.sd-riga input[type="checkbox"] {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1.5px solid #c8ccd0;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}

.sd-riga input[type="checkbox"]:checked {
    border-color: var(--sd-arancio);
    background: var(--sd-arancio);
}

.sd-riga input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4.5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.sd-nome {
    flex: 1;
    line-height: 1.3;
}

.sd-num {
    color: #9aa0a6;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.sd-nessuna {
    display: none;
    margin: 0;
    padding: 16px 9px;
    color: #9aa0a6;
    font-size: 13px;
}

.sd-lista-vuota .sd-nessuna {
    display: block;
}

.sd-dd-piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sd-bordo);
}

.sd-azzera {
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--sd-tenue);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.sd-azzera:hover {
    color: var(--sd-testo);
}

.sd-applica {
    padding: 10px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--sd-arancio);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.sd-applica:hover {
    background: var(--sd-arancio-scuro);
}

/* --- l'ordinamento -------------------------------------------------- */

.sd-ordinamento {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;   /* spinto a destra, in fondo alla riga */
    font-size: 13.5px;
    color: var(--sd-tenue);
}

.sd-ordina-per {
    margin: 0;
    font-weight: 400;
    white-space: nowrap;
}

/*
  UN <select> VERO, non un finto menu fatto di div. La tendina del tema
  prendeva la larghezza dal contenitore e le frasi lunghe uscivano dal
  riquadro; sul telefono finiva mezza fuori schermo. Questo lo apre il
  sistema operativo, a tutta larghezza, con la voce scelta evidenziata -
  e non si puo' tagliare per costruzione.
*/
.sd-select {
    padding: 10px 34px 10px 15px;
    border: 1px solid var(--sd-bordo);
    border-radius: 999px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0A6' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center/14px;
    color: var(--sd-testo);
    font-size: 13.5px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.sd-select:hover {
    border-color: #c8ccd0;
}

.sd-select:focus {
    border-color: var(--sd-arancio);
    outline: 0;
}

/* Il finto menu del tema non serve piu': lo sostituisce il select. */
.products-sort-order.dropdown {
    display: none;
}

/* --- le marche scelte ----------------------------------------------- */

.sd-scelte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
}

.sd-scelte.hide {
    display: none;
}

.sd-scelta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px 6px 14px;
    border: 1px solid #f3d9a6;
    border-radius: 999px;
    background: #fff4e0;
    color: #8a5b00;
    font-size: 12.5px;
    font-weight: 500;
}

.sd-scelta-x {
    color: #b98520;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
}

.sd-scelta-x:hover,
.sd-scelta-x:focus {
    color: #7a4c00;
    text-decoration: none;
}

.sd-azzera-tutto {
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--sd-tenue);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.sd-azzera-tutto:hover {
    color: var(--sd-testo);
}

/* --- la barra sopra i prodotti -------------------------------------- */

.sd-barra-prodotti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
}

.sd-conteggio {
    color: var(--sd-tenue);
    font-size: 13px;
}

/* =====================================================================
   L'ATTESA MENTRE SI APPLICA UN FILTRO

   ps_facetedsearch stende un velo bianco su TUTTO lo schermo con una
   rotellina in mezzo, e lo toglie appena la risposta arriva: su mezzo
   secondo e' un lampo in faccia. Lo si toglie di mezzo.

   Al suo posto, SOLO SE la risposta tarda piu' di mezzo secondo,
   l'elenco sbiadisce appena. Quasi sempre non si vede niente, ed e' il
   punto: sbiadire e rischiarare in due decimi sarebbe un altro lampo.
   Il mezzo secondo lo conta sdspeedypack.js.
   ===================================================================== */

.faceted-overlay {
    display: none !important;
}

body.sd-filtri-in-corso #js-product-list {
    opacity: .55;
    transition: opacity .12s ease-out;
}

/* =====================================================================
   TELEFONO — in fondo di proposito: due regole con lo stesso peso, e
   vince l'ultima scritta.
   ===================================================================== */

@media (max-width: 767px) {

    /*
      IL CONTENITORE SBORDAVA DI 15 PIXEL PER PARTE. Il tema gli mette
      margini negativi sul telefono: servivano al vecchio cassetto dei
      filtri, che doveva arrivare ai bordi dello schermo. Serve
      !important perche' la loro regola ha tre id in fila.
    */
    #left-column #search_filters_wrapper {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Uno sotto l'altro, tutti e due a tutta larghezza. Anche qui i
       selettori vanno pesati come quelli del computer, altrimenti resta
       il "si stringe sul contenuto" scritto sopra. */
    #left-column #search_filters.sd-filtri,
    #category #left-column #search_filters.sd-filtri,
    .sd-dd,
    .sd-dd-pulsante {
        flex: 1 1 100%;
        width: 100%;
    }

    #left-column #search_filters_wrapper > .sd-ordinamento {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
    }

    .sd-select {
        flex: 1;
        min-width: 0;
    }

    /* Il pannello si apre largo quanto il pulsante. */
    .sd-dd-pannello {
        width: 100%;
    }

    /* Una colonna sola: due, su 345 pixel, sono nomi tagliati a meta'. */
    .sd-lista {
        columns: 1;
        max-height: 50vh;
    }
}


/* =====================================================================
   NIENTE FILTRO MARCA SU "ADESIVI CON NOME"

   In quella categoria i prodotti non appartengono a una marca di
   biciclette: sono kit di adesivi con nome e cognome. L'elenco che
   usciva - Cannondale 2, Scott 9, Trek 1 - non aiuta a scegliere,
   confonde e basta. Chiesto dal negoziante, solo per quella sezione.

   La categoria si riconosce dalla classe che PrestaShop mette sul
   body (category-id-19), non dall'indirizzo: cosi' vale anche se un
   domani cambia il nome nell'indirizzo.

   Resta "Ordina per": e' l'altra meta' della barra e li' serve.
   ===================================================================== */

body.category-id-19 .sd-filtri .sd-dd {
    display: none !important;
}