/* ===== TIPOGRAFIA PER SCHERMI STRETTI =====
   Telefono e tablet in verticale (fino a 900px). Misure di testo e bersagli del
   dito: nessuna regola qui dentro tocca il desktop.
   Va caricato per ULTIMO nella testata: le stesse regole vivono duplicate nei
   base-*.css e nei <style> delle pagine, e a parità di specificità vince l'ultimo.
   Così non serve nessun !important.

   Criterio: si alza ciò che porta un dato o si deve leggere davvero; restano
   piccole le etichette maiuscole decorative, che sarebbero sgraziate ingrandite. */
@media(max-width:900px){

  /* schede prodotto (home e catalogo) */
  .card .tag{font-size:11.5px}    /* la sigla del modello è un dato, non un fregio */
  .card .go{font-size:12px}
  .card .badge{font-size:10.5px}

  /* piede di pagina */
  .fbrand p{font-size:12.5px}
  .fcol h4{font-size:11px;letter-spacing:.12em}   /* era 9,5px: il testo più piccolo del sito */
  .flegal{font-size:12px}
  .fmeta{font-size:12px;letter-spacing:.02em}     /* partita IVA, REA, Privacy, Cookie */

  /* briciole delle pagine progetto: il link era alto 14px, troppo poco per il dito.
     Portato alla stessa misura delle briciole delle altre pagine (~36px). */
  .pd-crumb a{display:inline-block;padding:11px 0}

  /* link con freccia ("Browse the range"): era alto 28px, ora 44 senza spostare
     il testo — il riquadro cresce sopra e sotto, la scritta resta dov'e' */
  .btn-ghost{min-height:44px;align-items:center}
}

/* ===== SCHERMI BASSI: la x del menu si teneva il bersaglio di "Home" =====
   Il cassetto centra il contenuto in verticale (justify-content:center) mentre la
   x sta fuori dal flusso (position:absolute, fondo a 60px). Piu' la colonna cresce,
   piu' la prima voce sale, finche' passa sotto la x che resta ferma in alto a
   destra: a 320x568 e a 360x640 il tocco sull'estremita' destra di "Home" chiudeva
   il menu invece di portare alla home.
   Qui, e solo quando lo schermo e' basso, si ancora il contenuto in alto e gli si
   riserva la fascia della x (60px di fondo + 20 di stacco). Se la colonna non ci
   sta, scorre: nav.drawer ha gia' overflow-y:auto in pill-live.css, ripetuto qui
   perche' questa regola regga anche da sola.
   Il centraggio resta su tutto il resto (schermi da 701px in su).
   NB: va bene che stia in questo foglio perche' e' caricato per ultimo nella
   testata, dopo il blocco .drawer inline e dopo pill-live.css, e vince a parita'
   di specificita' senza !important. */
@media(max-width:900px) and (max-height:700px){
  .drawer{justify-content:flex-start;padding-top:80px;overflow-y:auto}
}