/**
 * L'intestazione del sito, quella FISSA.
 *
 * In grecale stava scritta dentro `_header.php`, fra <style> e 
  /* La coda del nome: «Shop». Stessa altezza dell'insegna e stesso carattere —
     è la stessa scritta, non un'etichetta appiccicata sopra. Cambia solo il
     colore: oro, perché dice in quale stanza sei. */
  .ln-coda{ color:#ffd98a; margin-left:.3em; }
</style>: da noi
 * la regola `style-src 'self'` la butterebbe via. Il contenuto e' il suo.
 */

  /* Il conto sull'icona delle maschere: è un pezzo dell'intestazione e lo stile
     sta qui, perché questo è un partial e non ha una testa dove mettere i fogli. */
  /* NIENTE position QUI: .ln-profile è già `absolute` in land.css — pinnata a
     destra — e mettendole `relative` l'ho fatta cadere nel flusso, spostandola.
     Un elemento assoluto fa già da riferimento per quello che ha dentro, quindi
     al conto basta così. */
  .ln-conta{
    /* IL BOX NON È L'ICONA. .ln-profile è alta quanto tutta l'intestazione
       (top:safe-area → bottom:0) e larga 46: mettendo il conto a top:-4 lo
       attaccavo all'angolo di QUELLA scatola, cioè sopra l'header, lontano
       dalla maschera. L'icona sta al CENTRO della scatola, quindi il conto si
       aggancia al centro e da lì sale. */
    position:absolute; top:calc(50% - 15px); right:3px; min-width:17px; height:17px;
    padding:0 4px; border-radius:999px; background:#d8322c; color:#fff;
    font-family:'Oswald',system-ui,sans-serif; font-size:10px; font-weight:600;
    line-height:17px; text-align:center;
  }

  /* ═══ IL CARRELLO, ACCANTO ALLE MASCHERE ═══════════════════════════════════
     `.ln-profile` è pinnata a destra a 46px di larghezza: il cesto si mette
     accanto, alla sua sinistra, con la stessa altezza e lo stesso gesto. Il
     numero è il pallino rosso delle notifiche — lo stesso, non uno che gli
     somiglia — e sotto, piccolo, quanto fa. */
  .ln-cesto{ position:absolute; right:calc(.5rem + 46px); top:var(--sat, env(safe-area-inset-top));
    bottom:0; min-width:52px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:1px;
    color:#ffd98a; text-decoration:none; }
  .ln-cesto[hidden]{ display:none; }
  .ln-cesto:active{ transform:scale(.92); }
  .ln-cesto i{ font-size:1.05rem; }

  /* Il tondo dell'icona: è lui il riferimento del pallino. */
  .ln-cesto-ico{ position:relative; display:block; line-height:1; }

  /* Il totale sotto l'icona: piccolo, ma c'è — «quanto sto spendendo» è la
     domanda che si fa scorrendo, e senza si apre il carrello per saperlo. */
  .ln-cesto-tot{ font-size:9px; font-weight:700; line-height:1;
    font-family:'Oswald',system-ui,sans-serif; color:#ffe9bd; }

  /* Il pallino, appeso all'angolo dell'icona. */
  .ln-cesto-n{ position:absolute; top:-7px; right:-9px; }

  /* La coda del nome: «Shop». Stessa altezza dell'insegna e stesso carattere —
     è la stessa scritta, non un'etichetta appiccicata sopra. Cambia solo il
     colore: oro, perché dice in quale stanza sei. */
  .ln-coda{ color:#ffd98a; margin-left:.3em; }
</style>
