/* ═══════════════════════════════════════════════════════════════════════
   TESTATA — la barra del Figma, la stessa su tutte le pagine
   ───────────────────────────────────────────────────────────────────────
   Nata sulla pagina brand (riferimento desktop 1440) e ora condivisa: una
   barra nera piena, lente + CERCA / ARCHIVIO / BRAND a sinistra, stella
   rossa + VEST ARCHIVE al centro, sacchetto + BAG, cerchio + ACCOUNT e
   hamburger a destra. Il markup e gli agganci sono quelli di sempre
   (.mast, data-open-search, data-open-cart, data-open-menu, data-cart-count;
   l'account lo scrive main.js): cambia solo la veste.

   Misure in punti Figma moltiplicati per --tk: a 1440 un punto e' un pixel.
   Sotto i 1440 si riduce; sopra NON cresce: gli elementi restano alla misura
   del Figma e la barra va da bordo a bordo, coi margini del Figma dai bordi
   dello schermo (66 e 63). --sb e' la larghezza della barra di scorrimento,
   la misura main.js.
   Va caricato DOPO editorial.css: riscrive la .mast di li' a pari specificita'.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --tk: min(1px, (100vw - var(--sb, 0px)) / 1440);
  --mast-h: 3.5rem;                                   /* altezza della barra: la usano le pagine per partire sotto */
  /* le pagine si staccano dalla testata con --nav-h (tokens.css: 72px). Dove
     la barra e' piu' alta (83 a 1440) --nav-h la segue, cosi' nessun titolo ci
     finisce sotto; dove e' piu' bassa resta 72 e le pagine non si muovono. */
  --nav-h: max(72px, var(--mast-h));
}

/* ── tutte le misure ── */
.mast {
  height: var(--mast-h); padding-block: 0; background: #000;
  box-shadow: 0 calc(12 * var(--tk)) calc(40 * var(--tk)) rgba(0,0,0,.34);
}
.mast::before { display: none; }                      /* niente velo sfumato: la barra e' piena */
.mast.is-scrolled, .mast.is-acc-open {
  background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; padding-block: 0;
}
.mast .mast__link { font-weight: 700; }
.mast .mast__link[aria-current="page"] { text-decoration: none; }
.mast__lente { width: 18px; height: 18px; flex: none; }
.mast__stella { width: 1.3em; height: 1.3em; flex: none; object-fit: contain; }
.mast__sacco { width: 17px; height: auto; flex: none; }
.mast__righe { width: 24px; height: 17px; fill: currentColor; flex: none; }

/* L'account lo scrive main.js: da ospite il cerchio vuoto + ACCOUNT, da
   loggato il cerchio con le iniziali di nome e cognome + ACCOUNT */
.mast .mast__acc__login::before {
  content: ""; flex: none; width: 1.9em; height: 1.9em; margin-right: .6em;
  border: 2px solid currentColor; border-radius: 50%;
}
.mast .mast__ava { border: 2px solid #fff; background: transparent; }
.mast .mast__ava--ini {
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: .04em; padding-left: .04em; text-indent: 0; line-height: 1;
}

/* ── dal 1024 in su: la barra del Figma, al punto ── */
@media (min-width: 1024px) {
  :root {
    --mast-h: calc(83 * var(--tk));
  }
  .mast { padding-inline: calc(66 * var(--tk)) calc(63 * var(--tk)); gap: 0; }
  .mast .mast__nav--l { gap: calc(20 * var(--tk)); }
  .mast .mast__nav--r { gap: calc(42 * var(--tk)); }
  /* nel Figma le voci sono Space Mono regolare: solo la parola centrale e' in neretto */
  .mast .mast__link {
    font-family: var(--font-mono); font-weight: 400; font-size: max(11px, calc(15 * var(--tk))); letter-spacing: .19em;
  }
  .mast .mast__lbl { margin-left: calc(9 * var(--tk)); }
  /* Allineamento: tutte le scritte (CERCA, ARCHIVIO, BRAND, BAG, ACCOUNT)
     stanno sulla stessa riga, col centro delle maiuscole a 42 punti, e i
     simboli (lente, sacchetto, cerchio, hamburger) hanno il centro su quella
     stessa riga. */
  .mast__lente { width: max(15px, calc(19.5 * var(--tk))); height: max(15px, calc(19.5 * var(--tk))); margin-left: calc(-1 * var(--tk)); translate: 0 calc(.5 * var(--tk)); }
  .mast__sacco { translate: 0 calc(1 * var(--tk)); }
  .mast__righe { translate: 0 calc(1.5 * var(--tk)); }
  /* lente e sacchetto vicini alla loro parola, la bag 3 punti piu' vicina all'account */
  .mast [data-open-search] .mast__lbl { margin-left: calc(7 * var(--tk)); }
  .mast [data-open-cart] .mast__lbl { margin-left: calc(7 * var(--tk)); translate: 0 calc(1 * var(--tk)); }
  .mast [data-open-cart] { margin-right: calc(-3 * var(--tk)); }
  .mast .mast__brand { font-size: max(15px, calc(24.3 * var(--tk))); gap: calc(7 * var(--tk)); }
  .mast .mast__word { font-weight: 700; letter-spacing: .19em; }
  /* e' la parola a stare al centro, la stella le sta appesa a sinistra:
     30 punti di lato (punte 25x24 come nell'export), centro a 580,5 · 40 */
  .mast__stella { width: calc(30 * var(--tk)); height: calc(30 * var(--tk)); margin-left: calc(-37 * var(--tk)); translate: 0 calc(-1 * var(--tk)); }
  .mast__sacco { width: max(18px, calc(23.8 * var(--tk))); }
  .mast__righe { width: max(22px, calc(26 * var(--tk))); height: max(15px, calc(18 * var(--tk))); }
  /* ACCOUNT sulla riga delle altre scritte, il cerchio centrato su quella
     riga (da ospite e da loggato), 8 punti dal cerchio, 10 in piu' prima
     dell'hamburger */
  .mast .mast__acc__login { translate: 0 calc(1 * var(--tk)); }
  .mast .mast__acc__login::before { width: calc(28 * var(--tk)); height: calc(28 * var(--tk)); margin-right: calc(8 * var(--tk)); translate: 0 calc(.5 * var(--tk)); }
  .mast .mast__ava { width: calc(28 * var(--tk)); height: calc(28 * var(--tk)); translate: 0 calc(1.5 * var(--tk)); }
  .mast .mast__ava--ini { font-size: max(9px, calc(10.5 * var(--tk))); }
  .mast .mast__acc__btn { gap: calc(8 * var(--tk)); max-width: none; }
  .mast .mast__acc__name { translate: 0 calc(1 * var(--tk)); }
  .mast .mast__nav--r .mast__burger { margin-left: calc(10 * var(--tk)); }
}

/* ── il menu dell'account parte dal fondo della barra (il bottone e' centrato
      nella barra: meta' della sua altezza + meta' della barra = il fondo) ── */
.mast .mast__acc__pop { top: calc(50% + var(--mast-h) / 2); }

/* ── telefoni in orizzontale e tablet stretti (561-720): cerchio+ACCOUNT non
      entra nella colonna destra e spingerebbe il logo fuori dal centro. Come
      le altre voci a quelle larghezze, l'account resta solo cerchio (bersaglio
      pieno da 44); dai 721 torna la scritta, anche da loggati. ── */
@media (min-width: 561px) and (max-width: 720px) {
  .mast .mast__acc__login { font-size: 0; letter-spacing: 0; min-width: 44px; justify-content: center; }
  .mast .mast__acc__login::before { width: 26px; height: 26px; margin-right: 0; }
}
@media (min-width: 721px) {
  .mast .mast__acc__name { display: inline; }
}