/* Intestazione compatta allo scorrimento — Disibeint
   Caricato SOLO dai template di staging (html_ai/personalizzazione/tpl/navigation).
   Per portarlo in produzione: copiare i due file in html/personalizzazione/tpl/files/
   e aggiungere <link> e <script> negli stessi 5 layout di html/.

   Prima: barra blu 80px + barra bianca 109px che scorrevano via del tutto.
   Ora: l'intestazione resta visibile e oltre i 130px di scorrimento si comprime
   a circa la metà; buscador e selettore di referencia si riducono a icona e si
   riaprono al clic. Solo da 880px in su: sotto resta il menu mobile esistente.

   NOTA: le proprietà di layout si scrivono in forma ESTESA (padding-top e
   padding-bottom, non padding). Con la forma abbreviata in transizione il valore
   calcolato resta bloccato e la compressione non avviene. */

@media (min-width: 880px) {

  /* position:sticky non è utilizzabile: i contenitori che avvolgono <header>
     sono alti quanto l'header stesso, quindi non c'è corsa entro cui agganciarsi.
     Si passa a position:fixed alla compressione, con un distanziatore (creato da
     hdr-compact.js) che ne compensa l'uscita dal flusso ed evita il salto. */
  header {
    display: flow-root;   /* le due barre sono in float: senza questo header ha altezza 0 */
    background: #fff;
    transition: box-shadow .2s ease;
  }

  header #top_grey,
  header #cont_top {
    transition: padding-top .2s ease, padding-bottom .2s ease;
  }

  header #logo img {
    transition: height .2s ease;
  }

  header #cerca_form,
  header #top_select {
    transition: width .2s ease;
  }

  /* Il JS storico del sito (scrollorientation) mette display:none inline sul
     logo bianco quando si scorre e non lo ripristina: con l'intestazione
     sempre visibile il difetto salterebbe all'occhio. */
  header #logo_black { display: block !important; }

  header.hdr-min {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 900;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .16);
  }

  .hdr-spacer { display: none; }

  /* --- compressione delle due barre ---
     Il CSS storico del sito impone questi valori con !important, quindi qui
     serve la stessa forza per poterli ridurre. */
  header.hdr-min #top_grey {
    height: 52px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-sizing: border-box !important;
  }

  header.hdr-min #cont_top {
    height: 56px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-sizing: border-box !important;
  }

  header.hdr-min #logo img { height: 34px !important; width: auto !important; }

  /* Il buscador è annidato in un div#cerca con margin-top:3px, che lo faceva
     scendere di 3px rispetto a logo, selettore, lingua, login e carrello.
     Si azzera qui: il float non va toccato, altrimenti l'elemento salta a sinistra. */
  header.hdr-min #cerca,
  header.hdr-min #cerca_cont_form { margin-top: 0 !important; padding-top: 0 !important; }
  header.hdr-min #logo_payoff { display: none; }
  header.hdr-min #top_menu { margin-top: 3px; }

  /* Allineamento verticale della barra blu compressa.
     I blocchi sono in float e ciascuno ha margini verticali propri, ereditati
     dal layout originale: aggiustarli uno a uno è fragile. Si impone invece la
     stessa altezza a tutti e si centra il contenuto dentro quell'altezza, così
     l'allineamento è garantito a prescindere dai valori di partenza.
     I float restano intatti: la disposizione orizzontale non cambia. */
  header.hdr-min #logo_black,
  header.hdr-min #top_contact_after,
  header.hdr-min #cerca_form,
  header.hdr-min #top_select,
  header.hdr-min #flag_top,
  header.hdr-min #top_login,
  header.hdr-min #top_cart {
    height: 36px !important;
    display: flex !important;      /* senza !important il CSS del sito lo riporta
                                      a block su #logo_black e #top_contact_after,
                                      e il contenuto resta appoggiato in alto */
    align-items: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Gli spazi bianchi del markup fra un blocco e l'altro generano righe di testo
     anonime dentro la barra, che spingono tutti i blocchi 12px più in basso: i
     blocchi finiscono per sporgere sotto la fascia blu e si vede una riga bianca.
     Azzerando qui il font si eliminano quelle righe; la dimensione si ripristina
     sui blocchi veri. */
  /* I blocchi partono 12px sotto il bordo interno della barra: la causa sono le
     righe anonime generate dagli spazi bianchi del markup. Azzerare il font su
     #top_grey/.wrap elimina lo scarto ma scompagina i blocchi, quindi qui si
     compensa allargando la fascia blu fino a contenerli: niente riga bianca. */
  header.hdr-min #top_grey { height: 56px !important; }

  /* Le immagini NON vanno messe a display:block: nel carrello l'icona e il
     contatore "(0)" stanno sulla stessa riga e si spezzerebbero. */
  header.hdr-min #top_grey img,
  header.hdr-min #top_grey input[type="image"] {
    vertical-align: middle;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* I contenitori interni hanno margini propri (5px su lingua e login, -3px
     sull'etichetta LOGIN) che scentrano il contenuto dentro il blocco. */
  header.hdr-min #linguaAttiva,
  header.hdr-min #login,
  header.hdr-min #cart,
  header.hdr-min #lab_login,
  header.hdr-min #lingueSelect_active {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  header.hdr-min #cart a,
  header.hdr-min #linguaAttiva { display: flex; align-items: center; gap: 5px; }

  header.hdr-min #logo_black img { display: block; height: 24px; width: auto; }
  header.hdr-min #top_contact_after { line-height: 1.25; font-size: 12px; }

  /* --- buscador: resta la lente, il campo si riapre al clic --- */
  header.hdr-min #cerca_form { width: 36px; overflow: hidden; }
  header.hdr-min #cerca_form #input_dacercare { display: none; }

  /* La lente è un input[type=image] con fondo grigio: da compressa va resa
     identica all'icona del selettore, altrimenti le due sembrano scollegate. */
  header.hdr-min #cerca_form input[type="image"] {
    box-sizing: border-box;
    width: 36px;
    height: 33px;
    padding: 7px;
    background: #fff;
    border: 1px solid #b9c2cb;
    border-radius: 2px;
  }
  header.hdr-min #cerca_form.hdr-open input[type="image"] {
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    border: 0;
  }
  header.hdr-min #cerca_form.hdr-open { width: 250px; }
  header.hdr-min #cerca_form.hdr-open #input_dacercare { display: inline-block; }

  /* --- selettore di referencia: diventa un'icona --- */
  header #top_select { position: relative; }

  header #top_select .hdr-ico {
    display: none;
    position: absolute;
    right: 0;
    /* con top:0 l'icona resta ancorata in alto e cade 1,5px sopra le altre:
       va centrata rispetto all'altezza del blocco */
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 33px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    background: #fff;
    border: 1px solid #b9c2cb;
    border-radius: 2px;
    color: #336799;
    font-size: 15px;
    line-height: 1;
  }

  header #top_select .hdr-ico:hover { background: #eef3f7; }

  header #top_select .hdr-ico:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  header.hdr-min #top_select { width: 36px; overflow: hidden; }
  header.hdr-min #top_select #listlinkprod { visibility: hidden; }
  header.hdr-min #top_select .hdr-ico { display: flex; }

  header.hdr-min #top_select.hdr-open { width: 204px; overflow: visible; }
  header.hdr-min #top_select.hdr-open #listlinkprod { visibility: visible; }
  header.hdr-min #top_select.hdr-open .hdr-ico { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  header, header * { transition: none !important; }
}

/* ---- menu laterale apri/chiudi (solo desktop: sul telefono c'e' il menu mobile) ---- */
@media (min-width: 880px) {
  #sidenav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    padding: 5px 10px;
    border: 1px solid #B0B0B0;
    background: #fff;
    color: #336799;
    font-size: 12px;
    cursor: pointer;
    border-radius: 2px;
  }
  #sidenav-toggle:hover { background: #F8F8F8; }
  #sidenav-toggle:focus-visible { outline: 2px solid #336799; outline-offset: 2px; }

  /* linguetta per riaprire quando il menu e' chiuso */
  #sidenav-riapri {
    display: none;
    position: fixed;
    left: 0;
    top: 40%;
    z-index: 800;
    writing-mode: vertical-rl;
    padding: 12px 6px;
    border: 1px solid #B0B0B0;
    border-left: 0;
    border-radius: 0 4px 4px 0;
    background: #fff;
    color: #336799;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 2px 0 8px rgba(0,0,0,.08);
  }
  #sidenav-riapri:hover { background: #F8F8F8; }

  body.side-off #cellasx { display: none; }
  body.side-off #testo2 { width: 100% !important; margin-left: 0 !important; }
  body.side-off #sidenav-riapri { display: block; }
}

/* ---- lista prodotti in categoria: link alla pagina prodotto ---- */
a.ver-prod-btn {
  float: right;
  background: #336799;
  color: #fff !important;
  padding: 5px 12px;
  border-radius: 2px;
  font-size: 12px;
  text-decoration: none !important;
  margin: 0 0 0 10px;
  line-height: 1.5;
}
a.ver-prod-btn:hover { background: #28527a; }
/* card piu' ordinata, tocco leggero */
.product.pcotainer { border: 1px solid #E6E6E6; border-radius: 3px; }

/* ---- card categoria: titolo e introduzione marketing sopra il codice ---- */
.mkt-card { padding: 2px 0 4px; }
.mkt-card-title { font-size: 17px; font-weight: bold; color: #336799; margin: 4px 0 2px; }
.mkt-card-intro { font-size: 13px; color: #4d4d4d; line-height: 1.5; margin: 0 0 6px; max-width: 780px; }
.mkt-card-title:empty, .mkt-card-intro:empty { display: none; }
#conf-embed .mkt-card { display: none; }