/* Barber For Gentleman, Via Roma 379, Vittoria.
   DIREZIONE "BIANCO: marmo e inchiostro", v66: lo stesso contenuto, impaginato con un sistema solo.
   - TRE COLORI e basta: il marmo (fondo), l'inchiostro (testo, pulsanti, filetti), il cipria del logo (l'unico
     accento: la fascia di Prenota, i servizi scelti nel listino, la vite delle forbici, la selezione del testo).
     Il grigio del testo secondario non è un quarto colore: è l'inchiostro steso al 70% sul marmo.
   - UNA SCALA TIPOGRAFICA con rapporto 1,25 (terza maggiore) a partire dal testo, 17 px: 13,6 / 17 / 21,25 /
     26,6 / 33,2 / 41,5 / 51,9 / 64,8. Ogni scritta della pagina sta su un gradino; i titoli scivolano fra due
     gradini con la larghezza dello schermo (clamp) e ai due estremi tornano esattamente sulla scala. Il nome
     in apertura e il numero di telefono sono fuori scala per scelta: sono larghi quanto la pagina.
     Tre pesi soli: 400 il testo, 600 le voci e le frasi, 800 i titoli.
   - UNA SCALA DEGLI SPAZI su multipli di 4 px (4, 8, 12, 16, 24, 32, 48, 64, 96, 128): niente valori a occhio.
   - UNA GRIGLIA a 12 colonne per tutta la pagina, allineamenti a bandiera a sinistra; la settima colonna è
     l'asse di tutto quello che sta a destra (azioni dell'apertura, conto, orari).
   - Spigoli vivi ovunque, filetti di due spessori (2 px per aprire un blocco, 1 px per dividerlo), niente
     ombre, niente gradienti: le uniche sfumature della pagina sono quelle vere, sull'acciaio delle forbici e
     sulla superficie liquida di Prenota (js/liquido.js).
   Regole della skill "taste" (design-taste-frontend) rispettate qui: un solo tema chiaro, un solo accento,
   niente etichette maiuscole sopra i titoli, niente numeri di sezione, niente lineette né puntini come
   separatori, niente filetto sotto ogni riga, niente cartellini sopra le immagini, un solo quadratino di stato.
   Contrasti verificati (WCAG), vedi in fondo al file. */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
/* riserva con le stesse proporzioni del font vero: il testo non si sposta quando finisce di caricare */
@font-face {
  font-family: "Archivo riserva";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  size-adjust: 100.6%;
  ascent-override: 82%;
  descent-override: 21%;
  line-gap-override: 0%;
}

/* LA PALETTE viene dal salone di Via Roma e dal logo: il marmo bianco del pavimento, le poltrone di pelle nera,
   l'anello cipria del logo. Tre colori; quello che segue i tre sono loro, stesi più sottili.
   Marmo e inchiostro sono NEUTRI (v71): il caldo lo porta solo il cipria. Carta crema più nero caffè era la
   combinazione da "sito premium generato" (taste skill); così resta il nero e cuoio del salone.
   I valori sono scritti anche in PROGETTO.md: se cambiano qui, si cambiano anche lì e negli altri posti elencati. */
:root {
  --marmo: #F5F5F3;        /* il pavimento di marmo: il fondo */
  --inchiostro: #141414;   /* le poltrone di pelle nera: testo, pulsanti, filetti */
  --cipria: #DDBBA1;       /* l'anello del logo: l'unico accento */

  --inchiostro-2: rgb(20 20 20 / .7);                                  /* testo secondario (6,5:1 sul marmo) */
  --filetto: rgb(20 20 20 / .14);                                      /* il filetto sottile che divide */
  --filetto-medio: rgb(20 20 20 / .32);
  --velo: color-mix(in srgb, var(--inchiostro) 6%, var(--marmo));      /* riquadri che aspettano le foto */
  --cipria-velo: color-mix(in srgb, var(--cipria) 45%, var(--marmo));  /* il servizio scelto nel listino */
  --premuto: color-mix(in srgb, var(--inchiostro) 84%, var(--marmo));  /* il nero dei pulsanti sotto il puntatore */

  /* NON sono colori del sito: quelli del pulsante "Accedi con Google", tema scuro, dalle linee guida di Google
     (developers.google.com/identity/branding-guidelines). Il fondo è quasi l'inchiostro (#141414): il pulsante
     resta il nero pieno della pagina. Solo lì, come la G che ci sta dentro (v89). */
  --google-fondo: #131314;
  --google-bordo: #8E918F;
  --google-testo: #E3E3E3;
  --google-sopra: color-mix(in srgb, var(--google-testo) 8%, var(--google-fondo));  /* sotto il puntatore: il velo dell'8% di Material */

  /* la scala tipografica, rapporto 1,25 */
  --t-xs: .85rem;        /* 13,6: note, piè di pagina */
  --t-s: 1.0625rem;      /* 17: il testo */
  --t-m: 1.328rem;       /* 21,25: voci del listino, dati, orari */
  --t-l: 1.66rem;        /* 26,6 */
  --t-xl: 2.075rem;      /* 33,2 */
  --t-2xl: 2.594rem;     /* 41,5 */
  --t-4xl: 4.053rem;     /* 64,8 */
  /* i ruoli: fra due gradini, da 360 a 1440 px di larghezza */
  --f-titolo: clamp(var(--t-2xl), 2.107rem + 2.162vw, var(--t-4xl));   /* titoli e informazioni grandi */
  --f-frase: clamp(var(--t-l), 1.522rem + .6148vw, var(--t-xl));       /* la frase di una sezione, il numero */
  --f-sotto: clamp(var(--t-m), 1.2175rem + .4917vw, var(--t-l));       /* la frase sotto il nome */
  --lh-titolo: .92;
  --lh-frase: 1.15;
  --lh-voce: 1.25;
  --lh-testo: 1.55;
  --tr-display: -.055em;
  --tr-titolo: -.03em;
  --tr-frase: -.03em;
  --tr-voce: -.015em;

  /* la scala degli spazi, multipli di 4 px */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --sans: "Archivo", "Archivo riserva", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 90rem;
  --gutter: 1.25rem;       /* margine della pagina: 20 px sul telefono, 32 sul tablet, 48 sul computer */
  --gap: 1rem;             /* fra le colonne: 16 px, 24 da tablet in su */
  --sezione: var(--s-8);   /* aria sopra e sotto ogni sezione: 64, 96, 128 px */
  --testa-giu: var(--s-5); /* dal titolo di una sezione al suo contenuto */
  --header-h: 4rem;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.7, 0, .2, 1);
}
@media (min-width: 48rem) {
  :root { --gutter: var(--s-6); --gap: var(--s-5); --sezione: var(--s-9); --testa-giu: var(--s-6); }
}
@media (min-width: 64rem) {
  :root { --gutter: var(--s-7); --sezione: var(--s-10); --testa-giu: var(--s-7); }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* niente text-size-adjust: su Android il cursore "dimensioni testo" agisce proprio da lì */
  scroll-padding-top: calc(var(--header-h) + var(--s-5));
  background: var(--marmo);
  /* niente "tira per aggiornare": in cima alla pagina ricaricherebbe perdendo i servizi scelti */
  overscroll-behavior-y: contain;
}
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--marmo);
  color: var(--inchiostro);
  font-family: var(--sans);
  font-size: var(--t-s);
  font-weight: 400;
  line-height: var(--lh-testo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
address { font-style: normal; }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: var(--tr-titolo); line-height: var(--lh-titolo); text-wrap: balance; }
/* i titoli delle sezioni sono testatine sul filetto: il testo grande è l'informazione (indirizzo, numero), non il titolo */
h2 { font-size: var(--f-sotto); font-weight: 600; letter-spacing: var(--tr-voce); line-height: 1.2; }
.muted { color: var(--inchiostro-2); }

:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 3px; }
::selection { background: var(--cipria); color: var(--inchiostro); }

/* l'attributo hidden deve vincere sulle regole qui sotto che impostano display */
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s-4); top: -4rem; z-index: 300; padding: var(--s-3) var(--s-4); background: var(--inchiostro); color: var(--marmo); }
.skip:focus { top: var(--s-4); }

/* sui telefoni con la tacca (viewport-fit=cover) il margine non scende mai sotto il bordo sicuro */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
/* web app: i tocchi partono subito, senza l'attesa del doppio tocco per ingrandire */
a, button, label, input, summary { touch-action: manipulation; }
.icon { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }

/* ---------- Pulsanti e link ----------
   Rettangoli pieni, spigoli vivi, alti 48 px, testo a 17 px in neretto. Al passaggio il nero schiarisce appena
   (o il filetto si riempie): nessun effetto che si noti più del pulsante stesso. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3rem;
  padding: var(--s-3) var(--s-5);
  border: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: var(--t-s);
  font-weight: 600;
  letter-spacing: var(--tr-voce);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, translate .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--marmo); }
.btn-ghost { border-color: var(--inchiostro); color: var(--inchiostro); }
.btn-small { min-height: 2.5rem; padding: var(--s-2) var(--s-4); }
/* pulsante di testo: per l'azione secondaria accanto a un pulsante pieno (un solo pieno per blocco) */
.btn-testo { padding-inline: var(--s-1); border: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
/* il passaggio del puntatore solo dove c'è davvero un puntatore: col dito l'effetto restava "incollato" */
@media (hover: hover) {
  .btn-primary:hover { background: var(--premuto); border-color: var(--premuto); }
  .btn-ghost:hover { background: var(--inchiostro); color: var(--marmo); }
  .btn-testo:hover { text-decoration-thickness: 2px; }
}
.btn:active, .copia:active, .menu-toggle:active { translate: 0 1px; }
.btn-primary:active { background: var(--premuto); }
.btn-ghost:active { background: var(--inchiostro); color: var(--marmo); }
/* "Accedi con Google" (v89): il pulsante di Google come lo chiedono le sue linee guida, nel tema scuro (sul profilo
   resta l'unico pulsante pieno): fondo, filetto di 1 px e testo nei suoi colori, la G ufficiale (mai ricolorata né
   deformata: quadrata, 24 px) e fra G e testo 12 px (i suoi 10 px per un testo di 14, portati al nostro di 17).
   Il testo resta in Archivo (scelta dell'utente: un carattere solo); spigoli vivi come tutti i pulsanti. */
/* il pixel del filetto si toglie sopra e sotto: con la G da 24 px il pulsante resta alto 48, come gli altri */
.btn-google { gap: var(--s-3); padding-block: calc(var(--s-3) - 1px); border: 1px solid var(--google-bordo); background: var(--google-fondo); color: var(--google-testo); }
.btn-google img { flex: none; width: var(--s-5); height: var(--s-5); }
@media (hover: hover) {
  .btn-google:hover { background: var(--google-sopra); }
}
.btn-google:active { background: var(--google-sopra); }

/* sottolineatura: un filetto sottile che al passaggio diventa pieno (due righe disegnate, non sfumature) */
.text-link {
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--filetto-medio), var(--filetto-medio));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0 2px, 100% 1px;
  padding-bottom: .12em;
  transition: background-size .45s var(--ease);
}
@media (hover: hover) { .text-link:hover { background-size: 100% 2px, 100% 1px; } }
.text-link:active { background-size: 100% 2px, 100% 1px; }
/* lo stesso link, su un pulsante (Esci, Annulla, No): niente cornice né fondo del pulsante */
button.text-link { padding: 0 0 .12em; border: 0; background-color: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
/* col dito i link che stanno da soli arrivano a 44 px di area toccabile, il disegno non cambia */
@media (pointer: coarse) {
  .text-link, .piede a { position: relative; }
  .text-link::after, .piede a::after { content: ""; position: absolute; inset: -.75rem -.4rem; }
}


/* ---------- Stato del negozio ----------
   Un quadratino, e uno solo per schermata (nell'intestazione sul computer, in cima all'apertura sul telefono):
   pieno d'inchiostro quando è aperto, solo contorno quando è chiuso. Altrove lo stato è scritto e basta. */
.status { display: inline-flex; align-items: baseline; gap: var(--s-2); }
.status-dot { flex: none; width: .55em; height: .55em; border: 1.5px solid currentColor; translate: 0 -.05em; }
.status.is-open .status-dot { background: currentColor; }
.status a { color: inherit; }

/* ---------- Intestazione: si nasconde scendendo, torna risalendo ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: transform .45s var(--ease), border-color .3s ease, background-color .3s ease;
}
.site-header.is-scrolled, .site-header:has(.nav.is-open) { background-color: var(--marmo); }
.site-header.is-scrolled { border-bottom-color: var(--filetto); }
.site-header.is-hidden:not(:has(:focus-visible)) { transform: translateY(-100%); }
.header-inner { display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); }
.header-sinistra { display: flex; align-items: center; gap: var(--s-4); min-width: 0; margin-right: auto; }
.header-sinistra .brand { flex: none; }
/* nella 404 il nome sta da solo a sinistra, senza il contenitore dello stato */
.header-inner > .brand { margin-right: auto; }
/* il pulsante in alto è largo uguale in IT ("Prenota") e in EN ("Book"): cambiando lingua la scelta della
   lingua accanto non si sposta sotto il puntatore */
.header-cta { min-width: 6.5rem; }
.brand { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--t-s); font-weight: 800; letter-spacing: -.03em; text-decoration: none; transition: opacity .45s ease, transform .6s var(--ease); }

/* titolo della sezione corrente e stato del negozio, nella riga in alto */
.header-sinistra .header-titolo,
.header-sinistra .header-stato {
  display: none;
  align-items: center;
  min-width: 0;
  color: var(--inchiostro-2);
  font-size: var(--t-s);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .45s ease;
}
.header-sinistra .header-titolo { color: var(--inchiostro); font-weight: 800; letter-spacing: -.02em; }
.header-num { margin-right: .5em; color: var(--inchiostro-2); font-weight: 400; font-variant-numeric: tabular-nums; }
.header-stato-testo { overflow: hidden; text-overflow: ellipsis; }
.header-stato.is-open { color: var(--inchiostro); }
.header-stato .header-stato-testo { font-weight: 600; }
.header-stato-nota { font-weight: 400; color: var(--inchiostro-2); }
.site-header.show-brand .header-stato { opacity: 1; }
.site-header.ha-titolo .header-titolo { opacity: 1; }
@media (min-width: 48rem) {
  .header-sinistra .header-stato { display: inline-flex; }
}
@media (max-width: 60rem) {
  .site-header.ha-titolo .header-sinistra .header-titolo { display: block; }
  /* il posto del nome lo prende il titolo della sezione: sparisce alla vista, non ai lettori di schermo */
  .site-header.ha-titolo .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* le voci del menu: tondo; quella in cui si sta ha il filetto nero sotto */
.nav ul { display: flex; gap: var(--s-6); margin-right: var(--s-1); }
.nav a {
  display: block;
  padding-block: var(--s-2);
  white-space: nowrap;
  color: var(--inchiostro);
  font-size: var(--t-s);
  font-weight: 400;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .45s var(--ease);
}
.nav a:hover, .nav a[aria-current="true"] { background-size: 100% 2px; }
@media (min-width: 60.01rem) and (max-width: 72rem) {
  .nav ul { gap: var(--s-5); }
  .header-inner { gap: var(--s-4); }
}
/* sul computer la voce accesa la segna una barretta sola, che scivola da una voce all'altra scorrendo la pagina
   (posizione e larghezza le scrive js/main.js; senza JavaScript resta il filetto sotto la singola voce) */
@media (min-width: 60.01rem) {
  .nav ul { position: relative; }
  .nav ul::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--barra-w, 0px);
    height: 2px;
    background: var(--inchiostro);
    opacity: 0;
    transform: translateX(var(--barra-x, 0px));
    transition: transform .55s var(--ease), width .55s var(--ease), opacity .3s ease;
    pointer-events: none;
  }
  .nav ul.ha-voce::after { opacity: 1; }
  .nav ul.barra-ferma::after { transition: opacity .3s ease; }
  .nav ul.ha-voce a[aria-current="true"]:not(:hover) { background-size: 0 2px; }
}

/* "Accedi" / "Profilo" (js/accesso.js): un link come le voci del menu, accanto alla lingua, SEMPRE in alto (anche
   sul telefono: chiesto dall'utente, 2026-10-22; prima sul telefono stava solo dentro il menu). Unica eccezione la
   pagina principale fra 961 e 1152 px, col menu in riga: lì schiacciava lo stato del negozio fino a "Apert…"
   (misurato a 961 px), e resta nel piè di pagina. */
.header-accesso {
  padding-block: var(--s-2);
  white-space: nowrap;
  color: var(--inchiostro);
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .45s var(--ease);
}
@media (hover: hover) { .header-accesso:hover { background-size: 100% 2px; } }
@media (min-width: 60.01rem) and (max-width: 72rem) { .site-header:has(.nav) .header-accesso { display: none; } }
/* sul telefono, nella pagina principale, accanto ad Accedi il nome piccolo non ci stava più ("Barber For G…"): lì
   ripete il nome gigante dell'apertura, quindi sparisce alla vista (non ai lettori di schermo, come quando c'è il
   titolo della sezione); scorrendo, a sinistra c'è il titolo della sezione corrente */
@media (max-width: 48rem) {
  .site-header:has(.nav) .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Lingua ----------
   Due sigle, e sotto quella scelta una barretta d'inchiostro, la stessa delle voci del menu: in alto a destra
   l'unica cosa piena resta il pulsante Prenota (prima c'erano due blocchi neri affiancati). Nel viaggio il bordo
   davanti della barretta parte per primo e quello dietro lo segue, così si allunga e si raccoglie sulla sigla
   nuova. Col puntatore sull'altra lingua si sporge di un pelo verso di lei.
   Le animazioni partono solo dopo un cambio (classe .cambiata, messa da js/i18n.js): all'apertura della pagina
   la barretta è già al suo posto. */
.lang {
  --l: 0%;
  --r: 50%;
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 2.75rem;
  flex: none;
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .02em;
}
.lang:has([data-lang-btn="en"][aria-current="true"]) { --l: 50%; --r: 0%; }
.lang-btn {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  color: var(--inchiostro-2);
  text-decoration: none;
}
.lang-btn[aria-current="true"] { color: var(--inchiostro); }
.lang-btn:focus-visible { outline-offset: 2px; }
.lang-cursore {
  position: absolute;
  bottom: var(--s-1);
  left: calc(var(--l) + var(--s-3));
  right: calc(var(--r) + var(--s-3));
  height: 2px;
  background: var(--inchiostro);
  pointer-events: none;
}
/* col puntatore sull'altra lingua il blocco si sporge verso di lei */
@media (hover: hover) {
  .lang:has([data-lang-btn="en"][aria-current="false"]:hover) { --r: calc(50% - .4rem); }
  .lang:has([data-lang-btn="it"][aria-current="false"]:hover) { --l: calc(50% - .4rem); }
}
.lang:has([data-lang-btn="en"][aria-current="false"]:focus-visible) { --r: calc(50% - .4rem); }
.lang:has([data-lang-btn="it"][aria-current="false"]:focus-visible) { --l: calc(50% - .4rem); }
@media (prefers-reduced-motion: no-preference) {
  .lang:is(:hover, :focus-within) .lang-cursore { transition: left .3s var(--ease), right .3s var(--ease); }
  /* verso EN corre prima il bordo destro, verso IT il sinistro: la barretta si allunga e si raccoglie */
  .lang.cambiata:has([data-lang-btn="en"][aria-current="true"]) .lang-cursore { transition: right .34s var(--ease-in-out), left .34s var(--ease-in-out) .09s; }
  .lang.cambiata:has([data-lang-btn="it"][aria-current="true"]) .lang-cursore { transition: left .34s var(--ease-in-out), right .34s var(--ease-in-out) .09s; }
}

/* cambio lingua: il testo vecchio sfuma verso l'alto, il nuovo entra dal basso.
   Il nome del negozio e le forbici restano fermi; la barretta della lingua fa il suo viaggio dal vivo. */
/* col menu del telefono aperto nome e forbici non si sollevano: finirebbero sopra il menu */
:root.cambio-lingua:not(:has(.nav.is-open)) .hero-name { view-transition-name: nome-negozio; }
:root.cambio-lingua .lang { view-transition-name: scelta-lingua; }
:root.cambio-lingua::view-transition-group(scelta-lingua),
:root.cambio-lingua::view-transition-new(scelta-lingua) { animation: none; }
:root.cambio-lingua::view-transition-old(scelta-lingua) { animation: none; opacity: 0; }
:root.cambio-lingua::view-transition-old(root) { animation: lingua-esce .16s cubic-bezier(.4, 0, 1, 1) both; }
:root.cambio-lingua::view-transition-new(root) { animation: lingua-entra .34s var(--ease) .14s both; }
@keyframes lingua-esce { to { opacity: 0; transform: translateY(-4px); } }
@keyframes lingua-entra { from { opacity: 0; transform: translateY(6px); } }
/* browser senza transizioni di vista: dissolvenza sui testi tradotti */
:root.cambio-lingua-semplice [data-i18n],
:root.cambio-lingua-semplice .status-text,
:root.cambio-lingua-semplice .bill,
:root.cambio-lingua-semplice .hours td { animation: lingua-entra .5s var(--ease) both; }

/* in cima all'apertura, da 768 px in su, a sinistra c'è lo stato del negozio; il nome piccolo entra
   quando quello grande è passato sotto l'intestazione (js/main.js) */
@media (min-width: 48rem) {
  .site-header.has-masthead .brand { max-width: 22rem; overflow: hidden; transition: opacity .45s ease, transform .6s var(--ease), max-width .6s var(--ease), margin .6s var(--ease); }
  .site-header.has-masthead .brand span { white-space: nowrap; }
  .site-header.has-masthead:not(.show-brand):not(:has(.nav.is-open)) .brand:not(:focus-visible) { max-width: 0; margin-right: calc(var(--s-4) * -1); opacity: 0; }
  .header-sinistra .header-stato { opacity: 1; padding-left: var(--s-4); border-left: 1px solid var(--filetto-medio); transition: opacity .45s ease, padding .6s var(--ease), border-color .45s ease; }
  .site-header.has-masthead:not(.show-brand) .header-stato { padding-left: 0; border-left-color: transparent; }
  /* senza JavaScript lo stato resta vuoto: niente quadratino da solo nell'angolo */
  .header-stato:has(.header-stato-testo:empty) { visibility: hidden; }
}
.site-header.has-masthead:not(.is-scrolled) .brand { transition: none; }

.menu-toggle { display: none; }
.nav-scheda { display: none; }
.nav-indice { display: none; }
/* col menu aperto la pagina sotto resta ferma */
html:has(.nav.is-open) { overflow: hidden; scrollbar-gutter: stable; }
@media (max-width: 60rem) {
  /* il pulsante: aprendo si riempie d'inchiostro dal basso e "Menu" rotola via verso l'alto, "Chiudi" sale al suo
     posto; le due parole stanno nella stessa cella, così il pulsante è largo quanto la più lunga e non si muove */
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: var(--s-2) var(--s-4);
    border: 2px solid var(--inchiostro);
    border-radius: 0;
    background: linear-gradient(var(--inchiostro), var(--inchiostro)) 0 100% / 100% 0 no-repeat;
    color: var(--inchiostro);
    font-size: var(--t-s);
    font-weight: 600;
    cursor: pointer;
    transition: background-size .45s var(--ease), color .25s ease;
  }
  .menu-toggle[aria-expanded="true"] { background-size: 100% 100%; color: var(--marmo); }
  .menu-parole { display: grid; overflow: hidden; justify-items: center; }
  .menu-parola { grid-area: 1 / 1; transition: transform .45s var(--ease); }
  .menu-parola + .menu-parola { transform: translateY(110%); }
  .menu-toggle[aria-expanded="true"] .menu-parola:first-child { transform: translateY(-110%); }
  .menu-toggle[aria-expanded="true"] .menu-parola + .menu-parola { transform: none; }

  /* IL MENU A TUTTA PAGINA. Aprendo, il foglio si srotola dall'intestazione verso il basso come una tenda; il filetto
     nero si traccia da sinistra; ogni voce sale dal suo filo di base, una dopo l'altra, come il nome in apertura;
     in fondo arrivano stato, indirizzo e numero. Chiudendo il foglio si riavvolge verso l'alto tutto intero, più
     in fretta, e le voci tornano al loro posto di partenza solo quando non si vedono più. */
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    padding: var(--s-2) var(--gutter) var(--s-4);
    background: var(--marmo);
    visibility: hidden;
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
    transition: clip-path .35s var(--ease-in-out), -webkit-clip-path .35s var(--ease-in-out), visibility 0s linear .35s;
  }
  .nav.is-open {
    visibility: visible;
    -webkit-clip-path: inset(0);
            clip-path: inset(0);
    transition: clip-path .6s var(--ease), -webkit-clip-path .6s var(--ease);
  }
  .nav ul { position: relative; flex-direction: column; gap: 0; margin: 0; }
  .nav ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--inchiostro);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0s linear .35s;
  }
  .nav.is-open ul::before { transform: none; transition: transform .8s var(--ease) .1s; }
  .nav li { overflow: hidden; }
  .nav li:nth-child(1) { --i: 0; }
  .nav li:nth-child(2) { --i: 1; }
  .nav li:nth-child(3) { --i: 2; }
  .nav li:nth-child(4) { --i: 3; }
  .nav ul a { transform: translateY(105%); transition: transform 0s linear .35s; }
  .nav.is-open ul a { transform: none; transition: transform .75s var(--ease) calc(.14s + var(--i, 0) * .06s); }
  /* le voci stanno dentro una finestra che taglia: il contorno della tastiera va dentro la voce, non fuori */
  .nav ul a:focus-visible { outline-offset: -4px; }
  .nav-indice { display: block; }
  /* l'indice della pagina: voci grandi e pesanti, ben distanziate; quella in cui si sta è sottolineata */
  .nav ul a { display: block; padding: var(--s-3) 0; background: none; font-size: var(--t-2xl); font-weight: 800; letter-spacing: var(--tr-titolo); line-height: 1.05; }
  /* niente riquadro azzurro del telefono sul tocco: il segno della scelta è il filetto qui sotto */
  .nav ul a, .menu-toggle { -webkit-tap-highlight-color: transparent; }
  /* Il filetto sotto la voce si traccia da sinistra, sotto le parole (anche su due righe):
     - la sezione in cui si sta: arrivate le voci, il filetto si traccia (e a ogni apertura si ritraccia);
     - col mouse, sulla voce sotto il puntatore;
     - toccando una voce, il filetto corre sotto quella scelta mentre il menu si riavvolge, e lascia quella di prima.
     Chiuso il menu, i filetti tornano a zero quando il foglio non si vede più. */
  .nav ul a span {
    padding-bottom: .06em;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 3px no-repeat;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
    transition: background-size 0s linear .35s;
  }
  .nav.is-open ul a[aria-current="true"] span { background-size: 100% 3px; transition: background-size .6s var(--ease) calc(.5s + var(--i, 0) * .06s); }
  @media (hover: hover) {
    .nav.is-open ul a:hover span { background-size: 100% 3px; transition: background-size .35s var(--ease); }
  }
  .nav ul a.is-scelta span { background-size: 100% 3px; transition: background-size .28s var(--ease); }
  .nav:has(a.is-scelta) ul a:not(.is-scelta) span { background-size: 0 3px; transition: background-size .2s ease; }
  .nav { overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
  .nav-scheda { display: grid; gap: var(--s-2); margin-top: auto; padding-block: var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--filetto); color: var(--inchiostro-2); font-size: var(--t-s); line-height: 1.45; opacity: 0; transform: translateY(.75rem); transition: opacity 0s linear .35s, transform 0s linear .35s; }
  .nav.is-open .nav-scheda { opacity: 1; transform: none; transition: opacity .5s ease .42s, transform .75s var(--ease) .42s; }
  .nav-scheda .status { color: var(--inchiostro); font-weight: 600; }
  .nav .nav-numero { justify-self: start; padding-block: var(--s-1); background: none; color: var(--inchiostro); font-size: var(--t-xl); font-weight: 800; letter-spacing: var(--tr-frase); line-height: 1.1; font-variant-numeric: tabular-nums; }
}
@media (max-width: 60rem) and (max-height: 30rem) {
  .nav ul a { padding-block: var(--s-2); font-size: var(--t-l); }
  .nav .nav-numero { font-size: var(--t-l); }
}
/* su smartphone c'è già la barra in basso con Prenota */
@media (max-width: 48rem) { .header-cta { display: none; } }
@media (max-width: 14em) {
  .header-inner { flex-wrap: wrap; row-gap: var(--s-1); min-height: 0; padding-block: var(--s-2); }
}
@media (max-width: 30em) {
  .header-inner { gap: var(--s-3); }
  /* il nome piccolo si stringe con lo schermo invece di troncarsi: a 360 px diventava "Barber For Gentle…" */
  .brand { font-size: clamp(.8125rem, 3.9vw, 1rem); letter-spacing: -.04em; }
  .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-sinistra { flex: 1 1 auto; }
  .header-sinistra .brand { flex: 0 1 auto; min-width: 0; }
  .lang { grid-auto-columns: 2.25rem; }
  .menu-toggle { padding-inline: var(--s-3); }
}
@media (max-width: 21.5em) {
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- La griglia ----------
   12 colonne su tutta la pagina. Sotto i 704 px ogni blocco va a tutta larghezza (regole del telefono). */
.griglia,
.hero-foot,
.testa,
.board,
.bill,
.insegna-piede,
.dove,
.piede {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

/* ---------- Apertura: il manifesto ----------
   Il nome a bandiera su tre righe, "Barber", "For", "Gentleman", e a destra il ritratto del logo, posato sul filetto
   nero (v91, la bozza del barbiere; prima il nome stava su due righe e nel bianco accanto c'erano le forbici 3D).
   Sotto il filetto la riga dei dati. All'arrivo ogni riga del nome sale dal suo filo di base, una dopo l'altra. */
.hero-inner {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding-block: var(--s-7) var(--s-8);
}
.hero-top { display: none; }

/* il nome a sinistra, il ritratto a destra, in fondo allineati. 12,8cqi: "Gentleman" (5,04 em in Archivo 800 con
   questa spaziatura) prende il 64,5% della larghezza, il ritratto il 32%, in mezzo l'aria.
   Scorrendo, --lift sale da 0 a 1 (js/motion.js) e nome e ritratto escono INSIEME dal basso: una maschera sola su
   tutti e due, non un colore (v99: prima sfumava solo il nome e il ritratto restava pieno). La maschera taglia quello
   che sporge dal riquadro: --orlo allarga il riquadro (e i margini negativi lo rimettono al suo posto) quanto
   sporgono le aste in alto e la B a sinistra; sotto, quanto il ritratto scende sul filetto. */
.hero-manifesto {
  --lift: 0;
  --orlo: 2cqi;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--orlo) 0 var(--s-7) var(--orlo);
  margin: calc(var(--orlo) * -1) 0 calc(var(--s-7) * -1) calc(var(--orlo) * -1);
  -webkit-mask-image: linear-gradient(to top, transparent calc(var(--lift) * 120% - 25%), #000 calc(var(--lift) * 120%));
          mask-image: linear-gradient(to top, transparent calc(var(--lift) * 120% - 25%), #000 calc(var(--lift) * 120%));
}
.hero-name {
  margin: 0 0 0 -.055em;
  font-size: 12.8cqi;
  font-weight: 800;
  font-stretch: 100%;
  line-height: .84;
  letter-spacing: var(--tr-display);
  white-space: nowrap;
  text-wrap: nowrap;
}
/* ogni parola è una riga; il margine interno allarga il ritaglio, così le aste in alto non vengono tagliate */
.hero-word { display: block; overflow: hidden; padding: .1em .1em .05em 0; margin: -.1em -.1em -.05em 0; }
.hero-riga { display: inline-block; animation: sale-riga 1s var(--ease) .12s backwards; }
.hero-word + .hero-word .hero-riga { animation-delay: .24s; }
.hero-word + .hero-word + .hero-word .hero-riga { animation-delay: .36s; }
@keyframes sale-riga { from { transform: translateY(105%); } }
/* il ritratto scende oltre il fondo del nome di quanto il filetto ne sta sotto (il margine di .hero-foot): così ci si
   posa sopra. Mai ridisegnato né ricolorato; compare dopo il nome, come la riga sotto. */
.hero-ritratto { flex: none; width: 32cqi; height: auto; margin-bottom: calc(var(--s-7) * -1); animation: compare-dopo .6s var(--ease) .45s backwards; }

.hero-foot {
  align-items: center;
  row-gap: var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 2px solid var(--inchiostro);
  animation: compare-dopo .6s var(--ease) .55s backwards;
}
@keyframes compare-dopo { from { opacity: 0; transform: translateY(10px); } }
.lead { font-size: var(--f-sotto); font-weight: 400; line-height: 1.2; letter-spacing: var(--tr-voce); }
.hero-lead { grid-column: 1 / span 5; max-width: 26ch; }
/* le due azioni cominciano sulla settima colonna, la stessa del conto e degli orari più sotto */
.hero-azioni { grid-column: 7 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }
.hero-phone { font-size: var(--t-m); font-weight: 600; line-height: 1.2; letter-spacing: var(--tr-voce); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .hero-phone:hover { text-decoration-thickness: 2px; } }

@media (max-width: 64rem) {
  .hero-lead { grid-column: 1 / span 6; }
}

/* il punto invisibile a poco più di metà apertura: quando sale oltre lo schermo entra la barra rapida (js/main.js) */
.sentinella { position: absolute; top: 55%; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* le forbici appoggiate nel bianco accanto al nome: posizione e misura le calcola js/forbici.js (dalla v91 la pagina
   non lo carica: al loro posto c'è il ritratto; la regola resta per poterle rimettere) */
.forbici { position: absolute; z-index: 1; display: block; pointer-events: none; opacity: 0; }
:root.cambio-lingua:not(:has(.nav.is-open)) .forbici { view-transition-name: forbici; }

/* ---------- Riquadri delle foto ----------
   Aspettano le foto vere del barbiere. VUOTI sono una campitura piatta del marmo in ombra, piccola: un riquadro
   che aspetta, non un cartellone vuoto. Appena dentro .photo c'è una <img>, la campitura sparisce
   sotto la foto. La didascalia sta sempre sotto la foto, mai sopra. */
.photo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--velo);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.didascalia { display: flex; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-3); color: var(--inchiostro-2); font-size: var(--t-xs); line-height: 1.35; }
.didascalia > :first-child { color: var(--inchiostro); font-weight: 600; }

/* ---------- Sotto l'apertura: la foto del salone e la riga dei dati ----------
   Finché la foto non c'è il riquadro NON si mostra (un rettangolo grigio vuoto sembrava un errore): resta la riga
   con le tre cose che si cercano appena arrivati. Con la foto, la foto sta sopra e la riga le fa da didascalia.
   La riga è sulla griglia a 12 colonne dell'apertura: 1-5, 7-9, 10-12, la settima è l'asse del pulsante Prenota. */
.salone { padding-bottom: 0; }
.salone-foto { margin: 0 0 var(--s-5); }
.salone-foto .photo { aspect-ratio: 21 / 9; }
.salone:not(:has(.photo-salone img)) .salone-foto { display: none; }
.salone-dati {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s-5);
  margin: 0;
  padding: var(--s-4) 0 0;
  list-style: none;
  border-top: 1px solid var(--inchiostro);
  animation: compare-dopo .6s var(--ease) .7s backwards;
}
.salone-dato { display: grid; align-content: start; gap: var(--s-2); }
.salone-dato:nth-child(1) { grid-column: 1 / span 5; }
.salone-dato:nth-child(2) { grid-column: 7 / span 3; }
.salone-dato:nth-child(3) { grid-column: 10 / span 3; }
.salone-cosa { font-size: var(--t-m); font-weight: 600; line-height: var(--lh-voce); letter-spacing: var(--tr-voce); text-wrap: balance; }
.salone-dato .text-link { justify-self: start; color: var(--inchiostro-2); font-size: var(--t-xs); font-weight: 400; }

/* ---------- Sezioni ---------- */
.section { padding-block: var(--sezione); }

/* TESTA della sezione: filetto nero, sotto il titolo pesante. Il titolo sta a sinistra da solo;
   quello che serve (l'istruzione del listino) sta sotto, sulla stessa bandiera. */
.testa {
  align-items: end;
  row-gap: var(--s-4);
  margin-bottom: var(--testa-giu);
  padding-top: var(--s-4);
  border-top: 2px solid currentColor;
}
.testa h2 { grid-column: 1 / span 8; }
.testa-nota { grid-column: 1 / span 6; max-width: 46ch; }
.testa .status { grid-column: 9 / -1; justify-self: end; align-self: end; font-weight: 600; }

/* ---------- Listino ----------
   Una colonna per categoria di Setmore (oggi capelli e barba), in ognuna se ne sceglie uno; righe alte da toccare.
   Nome e prezzo sulla stessa riga allo stesso corpo, descrizione e durata sotto in grigio; il prezzo è una cifra
   tabellare in nero pieno, così le colonne dei prezzi si allineano da sole. Nessun filetto fra le righe: le
   divide lo spazio, e la riga scelta prende il cipria. */
.board { row-gap: var(--s-7); }
/* le colonne sono le categorie di Setmore (v93): di solito due; se sono di più vanno a capo a coppie */
.board > .board-col:nth-of-type(odd) { grid-column: 1 / span 6; }
.board > .board-col:nth-of-type(even) { grid-column: 7 / span 6; }
/* anche i passi della prenotazione (prenota.html) si aprono così: lo stesso modulo stampato */
.board-col legend,
.passo > legend {
  float: left;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-2);
  border-bottom: 2px solid var(--inchiostro);
  font-size: var(--t-m);
  font-weight: 800;
  line-height: var(--lh-voce);
  letter-spacing: var(--tr-voce);
}
.legend-nota { color: var(--inchiostro-2); font-size: var(--t-s); font-weight: 400; letter-spacing: 0; }

.item {
  position: relative;
  clear: both;
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr) auto;
  grid-template-areas: "mark name price" ".    desc time";
  column-gap: var(--s-4);
  row-gap: var(--s-1);
  align-items: baseline;
  /* la riga sborda nel margine quanto basta perché, scelta, il testo resti allineato al titolo */
  margin-inline: calc(var(--s-3) * -1);
  padding: var(--s-4) var(--s-3);
  cursor: pointer;
  transition: background-color .25s ease;
}
/* il servizio scelto: la riga prende il colore del logo, lo stesso della fascia di Prenota */
.item:has(input:checked) { background: var(--cipria-velo); }
@media (hover: hover) {
  .item:hover .item-mark { box-shadow: inset 0 0 0 1.5px var(--inchiostro); }
  .item:hover .item-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
}
.item:has(input:focus-visible) { outline: 2px solid var(--inchiostro); outline-offset: -2px; }
.item input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
/* una colonna già compresa nel servizio scelto (v102: il Taglio + Shampoo + Barba ha la barba, js/main.js): le sue voci
   si spengono e resta "Niente"; accanto al nome della colonna il perché, al posto di "uno a scelta" */
.board-col.is-compresa .legend-nota:not(.legend-compresa) { display: none; }
.item:has(input:disabled) { cursor: default; }
.item:has(input:disabled) :is(.item-name, .item-price, .item-desc, .item-time) { color: var(--filetto-medio); text-decoration: none; }
.item:has(input:disabled) .item-mark { border-color: var(--filetto-medio); box-shadow: none; }

/* la casella: quadrato con filetto nero pieno; scelta, si riempie e la spunta si traccia da sinistra */
.item-mark {
  grid-area: mark;
  position: relative;
  align-self: start;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: .15rem;
  border: 2px solid var(--inchiostro);
  transition: background-color .15s ease;
}
.item-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: .62rem;
  height: .34rem;
  border-left: 2.5px solid var(--marmo);
  border-bottom: 2.5px solid var(--marmo);
  transform: translate(-50%, -50%) rotate(-45deg);
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  transition: -webkit-clip-path .22s var(--ease) .05s, clip-path .22s var(--ease) .05s;
}
.item input:checked ~ .item-mark { background: var(--inchiostro); }
.item input:checked ~ .item-mark::after { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
/* Capelli è a scelta singola: stesso quadrato, ma dentro compare un quadrato pieno invece della spunta,
   come sui moduli stampati. Con la spunta su tutte e due le colonne sembrava di poter scegliere due tagli. */
.item input[type="radio"] ~ .item-mark::after {
  top: 50%;
  width: .625rem;
  height: .625rem;
  border: 0;
  background: var(--inchiostro);
  transform: translate(-50%, -50%);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  transition: -webkit-clip-path .18s var(--ease), clip-path .18s var(--ease);
}
.item input[type="radio"]:checked ~ .item-mark { background: transparent; }
.item input[type="radio"]:checked ~ .item-mark::after { -webkit-clip-path: inset(0); clip-path: inset(0); }

.item-name { grid-area: name; font-size: var(--t-m); font-weight: 600; line-height: var(--lh-voce); letter-spacing: var(--tr-voce); overflow-wrap: anywhere; }
.item-price { grid-area: price; font-size: var(--t-m); font-weight: 600; line-height: var(--lh-voce); letter-spacing: var(--tr-voce); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.item-desc { grid-area: desc; color: var(--inchiostro-2); line-height: 1.4; }
.item-time { grid-area: time; color: var(--inchiostro-2); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
@media (max-width: 22em) {
  .item { column-gap: var(--s-3); }
  .item-name, .item-desc { hyphens: auto; }
  .btn { max-width: 100%; white-space: normal; text-align: center; }
}

/* IL CONTO: filetto nero sopra, il totale al corpo dei titoli, il pulsante. Sul telefono resta fisso in basso. */
.bill {
  align-items: end;
  row-gap: var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 2px solid var(--inchiostro);
}
.bill-scelta { grid-column: 1 / span 6; display: grid; gap: var(--s-1); align-self: start; }
.bill-items { font-size: var(--t-m); font-weight: 600; line-height: var(--lh-voce); letter-spacing: var(--tr-voce); }
.bill-total { grid-column: 7 / span 3; display: grid; justify-items: start; gap: var(--s-1); white-space: nowrap; }
.bill-price { font-size: var(--t-xl); font-weight: 800; line-height: 1; letter-spacing: var(--tr-frase); font-variant-numeric: tabular-nums; }
.bill-time { color: var(--inchiostro-2); }
.bill-cta { grid-column: 10 / span 3; width: 100%; }
/* nessun servizio scelto: il pulsante si spegne; se lo si preme la richiesta si sottolinea in cipria */
.bill-cta.is-spento { background: transparent; border-color: var(--filetto-medio); color: var(--inchiostro-2); }
.bill-cta.is-spento:is(:hover, :active) { background: transparent; border-color: var(--inchiostro); color: var(--inchiostro); }
.bill.is-avviso .bill-time {
  color: var(--inchiostro);
  font-weight: 600;
  background: linear-gradient(var(--cipria), var(--cipria)) 0 100% / 100% 3px no-repeat;
  animation: sottolinea .7s var(--ease) both;
}
@keyframes sottolinea { from { background-size: 0 3px; } }
.board-avviso {
  grid-column: 1 / -1;
  justify-self: start;
  margin-bottom: calc(var(--s-4) * -1);
  padding: var(--s-1) var(--s-2);
  background: var(--cipria);
  color: var(--inchiostro);
  font-weight: 600;
  animation: compare-dopo .4s var(--ease) both;
}

@media (max-width: 64rem) {
  .bill-scelta { grid-column: 1 / -1; }
  .bill-total { grid-column: 1 / span 6; }
  .bill-cta { grid-column: 7 / -1; }
}

/* il tasto per copiare il numero (su un computer "tel:" non serve a niente) */
.copia {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 3rem;
  padding: var(--s-2);
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--t-s);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}
@media (hover: hover) { .copia:hover { text-decoration-thickness: 2px; } }
.copia .icon { width: 1rem; height: 1rem; }
.copia.is-fatto { text-decoration-thickness: 2px; }

/* ---------- Tagli ----------
   Sei foto in ordine, dal più classico al più deciso, a zig-zag sulle 12 colonne:
     [1][2][   3   ]
     [   4   ][   3   ]
     [   4   ][5][6]
   le coppie da 3 colonne, i due grandi da 6 sfalsati di una coppia. La riga di mezzo non ha foto sue: la allungano
   i due grandi quanto basta, così non resta nessun buco e si legge da 1 a 6 come sta scritto nell'HTML.
   Nessuna scritta sotto le foto (v98): fra una foto e l'altra lo stesso spazio, in orizzontale e in verticale.
   Sotto i 52rem (v101) una striscia che scorre di lato col pollice, da bordo a bordo dello schermo: una foto alla
   volta si ferma al margine della pagina e la successiva si affaccia a destra, così si capisce che continua.
   Sulle griglie a due colonne di prima le foto venivano piccole e i due grandi spezzavano il ritmo. */
.tagli {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
.taglio:nth-child(1) { grid-column: 1 / span 3; grid-row: 1; }
.taglio:nth-child(2) { grid-column: 4 / span 3; grid-row: 1; }
.taglio:nth-child(3) { grid-column: 7 / span 6; grid-row: 1 / span 2; }
.taglio:nth-child(4) { grid-column: 1 / span 6; grid-row: 2 / span 2; }
.taglio:nth-child(5) { grid-column: 7 / span 3; grid-row: 3; }
.taglio:nth-child(6) { grid-column: 10 / span 3; grid-row: 3; }
.taglio .photo { height: auto; aspect-ratio: 1; }

@media (max-width: 52rem) {
  .tagli {
    display: flex;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
  }
  .taglio:nth-child(n) { flex: 0 0 min(82%, 26rem); scroll-snap-align: start; }
}
/* col dito la barra di scorrimento non serve (la foto che si affaccia dice che continua); col mouse resta, sottile */
@media (max-width: 52rem) and (pointer: coarse) {
  .tagli { scrollbar-width: none; }
  .tagli::-webkit-scrollbar { display: none; }
}

/* ---------- Prenota: il numero sulla superficie liquida ----------
   Una fascia da bordo a bordo, alta quanto il suo contenuto più l'aria delle sezioni (piena di schermo, col numero
   in mezzo, sembrava vuota). Sotto la testatina un blocco solo: a sinistra il numero, a destra lo stato, la frase
   e WhatsApp. Dietro, la superficie liquida color cipria (js/liquido.js); finché non c'è, o se non può esserci,
   il fondo è il cipria pieno.
   Qui sopra tutto il testo è in inchiostro pieno: il fondo si muove e il grigio perderebbe contrasto. */
.booking {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cipria);
  --inchiostro-2: var(--inchiostro);
  --filetto-medio: rgb(20 20 20 / .45);
}
/* un blocco solo sotto la testatina, in una colonna: il numero, la frase, WhatsApp. A destra resta il liquido
   (Dove siamo, subito dopo, ha l'indirizzo a sinistra e gli orari a destra: due sezioni di fila uguali no) */
.booking > .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.booking .testa { grid-column: 1 / -1; }
.liquido {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.liquido.is-pronto { opacity: 1; }
/* il numero ha la misura delle informazioni grandi della pagina (come "Via Roma 379"), non quella di un'insegna:
   largo quanto la pagina gridava più del nome. È sottolineato: si tocca e chiama. */
.insegna { grid-column: 1 / span 7; }
.phone {
  display: inline-block;
  font-size: var(--f-titolo);
  font-weight: 800;
  line-height: var(--lh-titolo);
  letter-spacing: var(--tr-titolo);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: .04em;
  text-underline-offset: .14em;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) { .phone:hover { text-decoration-thickness: .08em; } }
.insegna-piede { grid-column: 1 / span 7; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); margin-top: var(--s-5); }
.insegna-testo { display: grid; gap: var(--s-2); max-width: 38ch; }
.insegna-testo .status { font-size: var(--t-m); font-weight: 600; line-height: var(--lh-voce); letter-spacing: var(--tr-voce); }
.booking-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.booking-actions .btn { flex: 0 0 auto; min-width: 16rem; }
.booking-actions .copia { flex: none; }

/* ---------- Dove siamo ----------
   Sopra, sulla griglia dell'apertura: a sinistra l'indirizzo e le indicazioni (colonne 1-5), dalla settima lo stato
   di adesso e gli orari come sul cartello della porta. Sotto, larga quanto la pagina, la mappa: si carica da sola.
   Quando arriva la foto della vetrina, la vetrina sta a sinistra (colonne 1-4) e la mappa si stringe accanto. */
.dove { row-gap: var(--s-8); align-items: start; }
.dove-info { grid-column: 1 / span 5; display: grid; gap: var(--s-6); justify-items: start; }
.orari { grid-column: 7 / -1; }

.indirizzo-grande { display: grid; gap: var(--s-3); }
.indirizzo-via { font-size: var(--f-titolo); font-weight: 800; line-height: var(--lh-titolo); letter-spacing: var(--tr-titolo); }
.indirizzo-citta { font-size: var(--t-m); font-weight: 400; letter-spacing: var(--tr-voce); }

/* gli orari: poche righe, i giorni a sinistra e le ore accanto, e le ore di oggi in nero */
.orari-stato { margin-bottom: var(--s-4); font-size: var(--t-m); font-weight: 600; letter-spacing: var(--tr-voce); line-height: var(--lh-voce); }
.hours { width: 100%; border-collapse: collapse; border-top: 2px solid var(--inchiostro); font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: var(--s-3) 0 0; font-size: var(--t-s); font-weight: 400; line-height: 1.35; text-align: left; vertical-align: baseline; }
.hours tbody tr:first-child > * { padding-top: var(--s-4); }
/* le ore cominciano sull'asse della decima colonna della pagina (la settima quando gli orari vanno a tutta larghezza) */
.hours th { width: calc(50% + var(--gap) / 2); padding-right: var(--s-4); font-weight: 600; }
.hours td { color: var(--inchiostro-2); }
.hours tr.is-today th { font-weight: 800; }
.hours tr.is-today td { color: var(--inchiostro); }
/* ogni fascia oraria resta intera: se la riga è stretta si va a capo alla virgola, non dentro "15:00-20:00" */
.fascia { white-space: nowrap; }
.hours-note { margin-top: var(--s-4); font-weight: 600; }

/* la fascia della mappa: 12 colonne come la pagina, alta un terzo della larghezza (a 5/12 occupava da sola uno schermo) */
.dove-fascia {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  column-gap: var(--gap);
  aspect-ratio: 3 / 1;
}
.dove-mappa { position: relative; grid-column: 1 / -1; grid-row: 1; overflow: hidden; background: var(--velo); }
.dove-mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(.9) brightness(1.03); }
.dove-vetrina { display: none; margin: 0; }
.dove-fascia:has(.photo-vetrina img) .dove-vetrina { display: block; grid-column: 1 / span 4; grid-row: 1; }
.dove-fascia:has(.photo-vetrina img) .dove-mappa { grid-column: 5 / -1; }

/* MOSTRA LA MAPPA (GDPR, v86): al posto della mappa, finché non la si chiede (js/main.js). Tutto il riquadro è il
   comando: al centro il cartellino nero (come i tasti pieni), sotto la nota su Google, piccola. */
.mappa-carica {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-5);
  color: var(--inchiostro);
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mappa-carica-titolo { padding: var(--s-3) var(--s-5); background: var(--inchiostro); color: var(--marmo); font-weight: 600; line-height: 1.2; }
.mappa-carica-nota { max-width: 40ch; color: var(--inchiostro-2); font-size: var(--t-xs); text-wrap: balance; }
@media (hover: hover) { .mappa-carica:hover .mappa-carica-titolo { background: var(--premuto); } }
.mappa-carica:active .mappa-carica-titolo { background: var(--premuto); }
.mappa-carica:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: -4px; }

/* ---------- Piè di pagina ----------
   Si apre col filetto da 2 px come le sezioni. Il logo a sinistra; indirizzo e contatti sull'asse della settima e
   della decima colonna, in inchiostro al corpo del testo; sotto un filetto sottile, le note legali e l'anno, piccoli. */
.site-footer { padding-block: 0 var(--s-8); font-size: var(--t-s); line-height: 1.5; }
.piede { align-items: start; row-gap: var(--s-7); }
/* il filetto è un elemento della griglia: sta dentro i margini come quelli delle sezioni (sul contenitore andava da bordo a bordo) */
.piede::before { content: ""; grid-column: 1 / -1; height: 2px; margin-bottom: calc(var(--s-6) - var(--s-7)); background: var(--inchiostro); }
.piede-marca { grid-column: 1 / span 3; display: block; width: 6rem; }
.footer-logo { width: 100%; height: auto; }
.piede-col { grid-column: 10 / span 3; }
.piede address { grid-column: 7 / span 3; }
.piede a { color: var(--inchiostro); font-weight: 600; text-decoration: none; }
@media (hover: hover) { .piede a:hover { text-decoration: underline; text-underline-offset: .2em; } }
.piede-fondo { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--filetto); color: var(--inchiostro-2); font-size: var(--t-xs); }
.piede-legale { grid-column: 1 / span 6; }
.piede-piva { display: block; margin-bottom: var(--s-1); }
.piede-anno { grid-column: 10 / span 3; }

/* ---------- Barra rapida mobile ---------- */
.quickbar { display: none; }
@media (max-width: 48rem) {
  body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
  .quickbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-2); padding: var(--s-2) max(var(--s-3), env(safe-area-inset-right)) calc(var(--s-2) + env(safe-area-inset-bottom)) max(var(--s-3), env(safe-area-inset-left)); background: var(--marmo); border-top: 2px solid var(--inchiostro); transition: transform .45s var(--ease), visibility 0s; }
  .quickbar.is-tucked { transform: translateY(100%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s linear .45s; }
  .quickbar.is-coperta { transform: translateY(100%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s linear .3s; }
  body:has(.nav.is-open) .quickbar { transform: translateY(100%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s linear .3s; }
  .quickbar a { display: grid; place-items: center; min-height: 3rem; color: var(--inchiostro); font-size: var(--t-s); font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease; }
  .quickbar .quickbar-main { background: var(--inchiostro); color: var(--marmo); }
  .quickbar a:active { background: var(--velo); }
  .quickbar .quickbar-main:active { background: var(--premuto); }
}

/* ---------- Tablet e telefono: la griglia passa a una colonna dove serve ---------- */
@media (max-width: 52rem) {
  .dove-info, .orari { grid-column: 1 / -1; }
  .dove { row-gap: var(--s-7); }
  .dove-fascia { aspect-ratio: 16 / 9; }
  .dove-fascia:has(.photo-vetrina img) .dove-vetrina { grid-column: 1 / span 5; }
  .dove-fascia:has(.photo-vetrina img) .dove-mappa { grid-column: 6 / -1; }
  .insegna, .insegna-piede { grid-column: 1 / -1; }
  .piede-marca { grid-column: 1 / span 4; }
  .piede address { grid-column: 5 / span 4; }
  .piede-col { grid-column: 9 / span 4; }
  .hero-foot > * { grid-column: 1 / -1; }
  .hero-lead { max-width: 30ch; }
}

/* ---------- Telefono ---------- */
@media (max-width: 44rem) {
  /* APERTURA: sopra il nome lo stato del negozio; il nome su tre righe (Barber / For / Gentleman:
     19,6cqi = 100 diviso "Gentleman", 5,04 em); il ritratto nel bianco a destra di "Barber" e "For", alto quanto
     quelle due righe ("Gentleman" occupa tutta la larghezza, il filetto qui non lo può avere sopra). */
  .hero-inner { padding-block: var(--s-3) var(--s-7); }
  .hero-top { display: grid; gap: var(--s-1); margin-bottom: var(--s-5); animation: compare-dopo .6s var(--ease) .45s backwards; }
  .hero-clock { color: var(--inchiostro-2); }
  .hero-clock [data-clock-wrap] { display: none; }
  .hero-top .status.is-open { color: var(--inchiostro); }
  .hero-name { font-size: 19.6cqi; line-height: .86; white-space: normal; text-wrap: wrap; }
  .hero-word + .hero-word { white-space: normal; }
  .hero-foot { row-gap: var(--s-4); margin-top: var(--s-5); }
  .hero-foot > * { grid-column: 1 / -1; }
  .hero-azioni { gap: var(--s-2) var(--s-5); }
  .hero-cta { flex: 1 1 100%; }
  .hero-phone { padding-block: var(--s-2); }
  .hero-manifesto { display: block; position: relative; }
  .hero-ritratto { position: absolute; top: var(--orlo); right: 0; width: auto; height: calc(2 * .86 * 19.6cqi); margin: 0; }

  .salone { padding-bottom: var(--s-7); }
  .salone-foto .photo { aspect-ratio: 4 / 3; }
  /* sul telefono i tre dati uno sotto l'altro, ognuno col suo filetto: si scorrono col pollice */
  .salone-dati { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: 0; }
  .salone-dato:nth-child(n) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s-1) var(--s-4); padding-block: var(--s-4); }
  .salone-dato + .salone-dato { border-top: 1px solid var(--filetto); }
  .salone-cosa { font-size: var(--t-s); }

  .testa { padding-top: var(--s-3); }
  .testa h2, .testa-nota { grid-column: 1 / -1; }
  .testa .status { grid-column: 1 / -1; justify-self: start; }

  /* LISTINO: le colonne una sotto l'altra; il conto resta fisso in basso al posto della barra rapida */
  .board { row-gap: var(--s-6); }
  .board > .board-col:nth-of-type(n) { grid-column: 1 / -1; }
  .item { column-gap: var(--s-3); }
  /* aria in fondo al modulo quanto il conto fisso: le ultime righe non restano sotto */
  .board { padding-bottom: var(--s-9); }
  .bill {
    position: sticky;
    bottom: 0;
    z-index: 5;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    row-gap: var(--s-1);
    column-gap: var(--s-4);
    margin: 0 calc(var(--gutter) * -1);
    padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
    background: var(--marmo);
    transition: opacity .2s ease, transform .3s var(--ease);
  }
  /* due righe: sopra i servizi e la durata, sotto il totale e il pulsante */
  .bill { grid-template-areas: "scelta tempo" "prezzo cta"; }
  .bill-scelta { grid-area: scelta; min-width: 0; }
  .bill-items { font-size: var(--t-xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bill-total { display: contents; }
  .bill-price { grid-area: prezzo; font-size: var(--t-xl); }
  .bill-time { grid-area: tempo; justify-self: end; font-size: var(--t-xs); white-space: nowrap; }
  .bill-cta { grid-area: cta; width: auto; padding-inline: var(--s-4); }
  .bill.is-waiting { opacity: 0; transform: translateY(1rem); pointer-events: none; }

  /* PRENOTA: numero a tutta larghezza, pulsanti uno sotto l'altro */
  .booking-actions .btn { flex: 1 1 100%; min-width: 0; }
  .copia-numero { display: none; }                   /* sul telefono il numero si tocca e chiama */

  /* DOVE SIAMO: la mappa e la vetrina una sotto l'altra */
  .dove-fascia { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--gap); aspect-ratio: auto; }
  .dove-mappa, .dove-fascia:has(.photo-vetrina img) .dove-mappa { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 3; }
  .dove-fascia:has(.photo-vetrina img) .dove-vetrina { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 5; }
  /* il giorno su una riga sola, le ore accanto: se non ci stanno, la seconda fascia va sotto la prima */
  .hours th { width: auto; white-space: nowrap; }

  .site-footer { padding-block: 0 var(--s-7); }
  .piede-marca { grid-column: 1 / -1; width: 4.5rem; }
  .piede address { grid-column: 1 / span 6; }
  .piede-col { grid-column: 7 / span 6; }
  .piede-legale, .piede-anno { grid-column: 1 / -1; }
}
/* schermi strettissimi (o carattere molto grande): anche il nome dei giorni può andare a capo */
@media (max-width: 22em) {
  .hours th { white-space: normal; }
}
@media (max-width: 21em) {
  .bill { grid-template-columns: minmax(0, 1fr); grid-template-areas: "scelta" "tempo" "prezzo" "cta"; gap: var(--s-1); }
  .bill-time { justify-self: start; }
  .bill-cta { width: 100%; }
}

/* ---------- La prenotazione (prenota.html) ----------
   Un foglio solo, come il listino: a sinistra (colonne 1-7) i passi uno sotto l'altro, ognuno aperto dal filetto
   come le colonne del listino; a destra, dalla nona colonna, il riepilogo, fermo mentre si scorre, come il conto.
   Un passo compare quando il precedente è fatto. Le scelte hanno i segni del listino: il barbiere è una riga con la
   casella (cipria quando è scelta), il giorno e l'ora diventano un quadrato d'inchiostro, come un tasto premuto.
   Sul telefono una colonna sola: il riepilogo in cima, poi i passi. */
.prenotazione { padding-block: var(--s-6) var(--sezione); }
.prenotazione .testa h1 { grid-column: 1 / -1; font-size: var(--f-sotto); font-weight: 600; letter-spacing: var(--tr-voce); line-height: 1.2; }
.pren { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.passi, .pren > .pren-stato { grid-column: 1 / span 7; grid-row: 1; }
.passi { display: grid; gap: var(--s-8); }

/* il riepilogo: la testa come le legende del listino, i servizi col prezzo, il totale e la durata del conto */
.riepilogo { grid-column: 9 / -1; grid-row: 1; position: sticky; top: calc(var(--header-h) + var(--s-5)); display: grid; gap: var(--s-4); }
.riepilogo h2 { padding-bottom: var(--s-3); border-bottom: 2px solid var(--inchiostro); font-size: var(--t-m); font-weight: 800; line-height: var(--lh-voce); letter-spacing: var(--tr-voce); }
.riepilogo-servizi { display: grid; gap: var(--s-2); }
.riepilogo-servizi li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); font-size: var(--t-m); font-weight: 600; line-height: var(--lh-voce); letter-spacing: var(--tr-voce); }
.riepilogo-prezzo { font-variant-numeric: tabular-nums; white-space: nowrap; }
.riepilogo-totale { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--filetto); }
.riepilogo-scelte { display: grid; gap: var(--s-2); margin: 0; }
.riepilogo-scelte:not(:has(> div:not([hidden]))) { display: none; }
.riepilogo-scelte > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.riepilogo-scelte dt { color: var(--inchiostro-2); }
.riepilogo-scelte dd { margin: 0; font-weight: 600; }
.riepilogo-cambia { justify-self: start; color: var(--inchiostro-2); font-size: var(--t-xs); font-weight: 400; }

/* la settimana: il mese e le due frecce, sotto sette colonne coi giorni */
.settimana { clear: both; display: flex; align-items: center; gap: var(--s-2); padding-bottom: var(--s-3); }
.settimana-mese { margin-right: auto; font-size: var(--t-m); font-weight: 600; line-height: var(--lh-voce); letter-spacing: var(--tr-voce); }
.freccia {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid var(--inchiostro);
  border-radius: 0;
  background: transparent;
  color: var(--inchiostro);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.freccia[aria-disabled="true"] { border-color: var(--filetto-medio); color: var(--inchiostro-2); cursor: default; }
@media (hover: hover) { .freccia:not([aria-disabled="true"]):hover { background: var(--inchiostro); color: var(--marmo); } }
.freccia:not([aria-disabled="true"]):active { translate: 0 1px; }

.giorni, .orari-liberi { margin: 0; }
.giorni-fila { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-1); }
.giorno, .ora { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.giorno input, .ora input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.giorno { display: grid; justify-items: center; align-content: center; gap: var(--s-1); min-height: 4.5rem; padding-block: var(--s-2); }
.giorno-nome { color: var(--inchiostro-2); font-size: var(--t-xs); line-height: 1.2; }
.giorno-numero { font-size: var(--t-l); font-weight: 800; line-height: 1; letter-spacing: var(--tr-voce); font-variant-numeric: tabular-nums; }
.giorno:has(input:checked) { background: var(--inchiostro); color: var(--marmo); }
.giorno:has(input:checked) .giorno-nome { color: inherit; }
/* un giorno senza orari liberi (chiuso, pieno, in ferie): grigio e barrato, non solo più chiaro */
.giorno:has(input:disabled) { color: var(--inchiostro-2); cursor: default; }
.giorno:has(input:disabled) .giorno-numero { font-weight: 400; text-decoration: line-through; text-decoration-thickness: 1px; }
@media (hover: hover) { .giorno:has(input:enabled:not(:checked)):hover { background: var(--velo); } }
.giorno:has(input:focus-visible), .ora:has(input:focus-visible) { outline: 2px solid var(--inchiostro); outline-offset: 2px; }

/* le ore: la mattina e il pomeriggio, ogni ora un tasto */
.orari-liberi { padding-top: var(--s-5); }
.turno + .turno { margin-top: var(--s-5); }
.turno-nome { margin-bottom: var(--s-2); color: var(--inchiostro-2); }
.turno-ore, .orari-lista:has(> .segnaposto) { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: var(--s-2); }
.ora { display: grid; place-items: center; min-height: 3rem; border: 1px solid var(--inchiostro-2); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .ora:hover { border-color: var(--inchiostro); } }
.ora:has(input:checked) { border-color: var(--inchiostro); background: var(--inchiostro); color: var(--marmo); }
.orari-vuoti { color: var(--inchiostro-2); }

/* mentre le risposte arrivano: riquadri della stessa forma, fermi (niente luccichio che gira) */
.segnaposto { display: block; background: var(--velo); cursor: default; pointer-events: none; }
.segnaposto-riga { height: 3.5rem; margin-top: var(--s-2); clear: both; }
.ora.segnaposto { border-color: transparent; }

/* i dati: l'etichetta sopra, il campo, l'errore sotto, sottolineato in cipria come l'avviso del conto */
.campi { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--gap); padding-top: var(--s-2); }
.campo { display: grid; align-content: start; gap: var(--s-2); }
.campo label { font-weight: 600; }
.campo input {
  width: 100%;
  min-height: 3rem;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--inchiostro-2);
  border-radius: 0;
  background: transparent;
  color: var(--inchiostro);
  font: inherit;
  -webkit-appearance: none;
          appearance: none;
}
.campo input:focus, .campo input[aria-invalid="true"] { border-color: var(--inchiostro); }
.campo-errore {
  justify-self: start;
  padding-bottom: 2px;
  font-weight: 600;
  line-height: 1.3;
  background: linear-gradient(var(--cipria), var(--cipria)) 0 100% / 100% 3px no-repeat;
  animation: sottolinea .7s var(--ease) both;
}

/* in fondo: la frase che dice cosa si prenota, il pulsante, la nota sui dati */
.pren-fine { display: grid; justify-items: start; gap: var(--s-4); padding-top: var(--s-4); border-top: 2px solid var(--inchiostro); }
.pren-riassunto { font-size: var(--f-sotto); font-weight: 600; line-height: 1.2; letter-spacing: var(--tr-voce); text-wrap: balance; }
.pren-riassunto:empty { display: none; }
.pren-invia { min-width: 16rem; }
.pren-invia[aria-disabled="true"] { background: var(--premuto); border-color: var(--premuto); cursor: progress; }
.pren-nota { max-width: 52ch; color: var(--inchiostro-2); font-size: var(--t-xs); }
.pren-avviso {
  width: fit-content;
  max-width: 100%;
  margin-top: var(--s-4);
  padding: var(--s-1) var(--s-2);
  background: var(--cipria);
  color: var(--inchiostro);
  font-weight: 600;
  animation: compare-dopo .4s var(--ease) both;
}

/* quando online non si può (Setmore non risponde, un servizio online non c'è): la frase, il numero, WhatsApp */
.pren-stato { display: grid; justify-items: start; gap: var(--s-5); }
/* il fuoco arriva qui da script, perché i lettori di schermo leggano il messaggio: niente cornice su un blocco di testo */
.pren-stato:focus, .prenotazione h1:focus { outline: none; }
.pren-frase { max-width: 24ch; font-size: var(--f-frase); font-weight: 600; line-height: var(--lh-frase); letter-spacing: var(--tr-frase); text-wrap: balance; }

/* prenotato: il giorno e l'ora sono l'informazione grande */
.pren-fatto { display: grid; justify-items: start; gap: var(--s-4); }
.pren-fatto-quando { max-width: 15ch; font-size: var(--f-titolo); font-weight: 800; line-height: var(--lh-titolo); letter-spacing: var(--tr-titolo); text-wrap: balance; }
.pren-fatto-chi { max-width: 40ch; font-size: var(--f-sotto); line-height: 1.25; letter-spacing: var(--tr-voce); }
.pren-fatto .pren-avviso { margin-top: 0; }
.pren-fatto .btn { margin-top: var(--s-4); }

/* AGGIUNGI AL CALENDARIO: il pulsante pieno della conferma (accanto, "Torna al sito" a filo). Aperto, sotto
   compaiono le due strade, come link; la freccetta del pulsante gira. */
.pren-fatto-azioni { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-4); margin-top: var(--s-4); }
.pren-fatto .pren-fatto-azioni .btn { margin-top: 0; }
.calendario summary { list-style: none; }
.calendario summary::-webkit-details-marker { display: none; }
.calendario summary::after {
  content: "";
  width: .45em;
  height: .45em;
  margin-left: var(--s-1);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -.15em;
  transition: rotate .3s var(--ease), translate .3s var(--ease);
}
.calendario[open] summary::after { rotate: 225deg; translate: 0 .15em; }
.calendario-scelte { display: grid; gap: var(--s-3); padding-top: var(--s-4); }
.calendario[open] .calendario-scelte { animation: compare-dopo .35s var(--ease) both; }

/* SPOSTA E ANNULLA (conferma e profilo): due link sulla stessa riga. Annulla chiede prima, al loro posto: la domanda,
   "Sì, annulla" (il pulsante pieno) e "No, tienilo" a filo. */
.pren-cambia, .visita-azioni { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.annulla-conferma { display: grid; justify-items: start; gap: var(--s-3); animation: compare-dopo .35s var(--ease) both; }
.annulla-domanda { max-width: 40ch; font-weight: 600; text-wrap: balance; }
.annulla-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.pren-fatto .annulla-azioni .btn { margin-top: 0; }
.annulla-azioni .btn[aria-disabled="true"] { background: var(--premuto); border-color: var(--premuto); cursor: progress; }
.visita .pren-avviso { margin-top: 0; }

/* l'accesso con Google nel passo dei dati: una riga sopra i campi; chi è entrato vede con che nome prenota */
.pren-accesso { padding-top: var(--s-2); color: var(--inchiostro-2); }
.pren-accesso .text-link, .pren-accesso [data-come-testo] { color: var(--inchiostro); }
.pren-esci { margin-left: var(--s-2); color: var(--inchiostro); }

/* l'alternativa di sempre, sotto i passi: dove il numero è già grande (Setmore non risponde, prenotato) si toglie */
.pren-telefono { margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid var(--filetto); color: var(--inchiostro-2); }
.pren-telefono .hero-phone { color: var(--inchiostro); }
.prenotazione:has(:is([data-stato-intoppo], [data-stato-fatto]):not([hidden])) .pren-telefono { display: none; }

/* i passi entrano dal basso quando compaiono, una volta: dicono che il passo prima è fatto */
.passo:not([data-passo-persona]), .pren-fine, .pren-stato, .pren-fatto { animation: compare-dopo .5s var(--ease) both; }

@media (max-width: 52rem) {
  .riepilogo, .passi, .pren > .pren-stato { grid-column: 1 / -1; grid-row: auto; }
  .riepilogo { position: static; margin-bottom: var(--s-7); }
}
@media (max-width: 44rem) {
  .passi { gap: var(--s-7); }
  .campi { grid-template-columns: minmax(0, 1fr); }
  .pren-invia { width: 100%; min-width: 0; }
  .giorni-fila { gap: 2px; }
  .giorno-numero { font-size: var(--t-m); }
}

/* ---------- Il profilo (profilo.html) ----------
   Lo stesso foglio della prenotazione: a sinistra gli appuntamenti (il prossimo è l'informazione grande, come il
   giorno e l'ora nella conferma), a destra i dati come il riepilogo, con Esci. Fuori: la frase e i modi di entrare. */
.profilo-attesa { display: grid; gap: var(--s-4); max-width: 40rem; }
.profilo-segnaposto-grande { height: 6rem; }
.profilo-registra .campi { justify-self: stretch; max-width: 40rem; }
.profilo-email { font-weight: 600; overflow-wrap: anywhere; }
.profilo-email-valore { overflow-wrap: anywhere; }
.visite-blocco { gap: var(--s-5); }
.visite-titolo { padding-bottom: var(--s-3); border-bottom: 2px solid var(--inchiostro); font-size: var(--t-m); font-weight: 800; line-height: var(--lh-voce); letter-spacing: var(--tr-voce); }
.visita { display: grid; gap: var(--s-2); padding-bottom: var(--s-5); border-bottom: 1px solid var(--filetto); }
.visita + .visita { padding-top: var(--s-5); }
.visita-quando { max-width: 22ch; font-size: var(--f-frase); font-weight: 800; line-height: var(--lh-frase); letter-spacing: var(--tr-frase); text-wrap: balance; }
.visita:first-child .visita-quando { max-width: 15ch; font-size: var(--f-titolo); line-height: var(--lh-titolo); letter-spacing: var(--tr-titolo); }
.visita-cosa { max-width: 40ch; font-size: var(--t-m); line-height: var(--lh-voce); letter-spacing: var(--tr-voce); }
.visita-nome { color: var(--inchiostro-2); }
/* i passati: sotto, staccati come un'altra colonna del registro; righe piccole, il giorno al corpo delle voci */
.passati { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
.visite-passate .visita { gap: var(--s-1); padding-block: var(--s-3); }
.visite-passate .visita + .visita { padding-top: var(--s-3); }
.visite-passate .visita .visita-quando,
.visite-passate .visita:first-child .visita-quando { max-width: none; font-size: var(--t-m); font-weight: 600; line-height: var(--lh-voce); letter-spacing: var(--tr-voce); }
.visite-passate .visita-cosa { font-size: var(--t-s); color: var(--inchiostro-2); }
.visite-piede { display: grid; justify-items: start; gap: var(--s-4); }
.visite-passate .visita-azioni { display: none; }
.profilo-esci, .profilo-esci-tutti { justify-self: start; }
.riepilogo .profilo-esci-tutti { color: var(--inchiostro-2); font-size: var(--t-xs); }
/* i tuoi dati (GDPR): due link piccoli sotto Esci, staccati dal filetto; la domanda prima di eliminare al loro posto */
.profilo-privacy { display: grid; justify-items: start; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--filetto); }
.riepilogo .profilo-privacy .text-link { color: var(--inchiostro-2); font-size: var(--t-xs); }
.riepilogo .annulla-conferma { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--filetto); }
.riepilogo .annulla-domanda { font-size: var(--t-s); }
.profilo .pren-stato .pren-avviso { margin-top: 0; }
/* ENTRARE (v86): i modi accesi uno sotto l'altro, nella colonna della frase. Il codice via email è un modulo come i
   dati della prenotazione: l'etichetta, il campo, il pulsante; il campo del codice è stretto, le cifre larghe e
   allineate come i prezzi del listino. La passkey è un link: si usa dopo averla creata da dentro. */
.entra-email { display: grid; justify-items: start; gap: var(--s-4); width: 100%; max-width: 28rem; }
.entra-email .campo { justify-self: stretch; }
.entra-email .campo input.campo-codice { max-width: 12rem; font-size: var(--t-l); font-weight: 600; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.entra-email .pren-nota { margin-top: calc(var(--s-2) * -1); }
.entra-email .btn[aria-disabled="true"], .entra-passkey[aria-disabled="true"] { cursor: progress; }
.entra-email .btn-primary[aria-disabled="true"] { background: var(--premuto); border-color: var(--premuto); }
/* le passkey di chi è dentro: sotto Esci, staccate dal filetto come i tuoi dati; righe piccole col loro Togli */
.profilo-passkey { display: grid; justify-items: start; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--filetto); }
.profilo-passkey-titolo { font-size: var(--t-s); font-weight: 600; }
.passkey-lista { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.passkey-riga { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); font-size: var(--t-xs); }
.riepilogo .profilo-passkey .text-link { font-size: var(--t-xs); }
.riepilogo .profilo-passkey .pren-avviso { margin-top: 0; font-size: var(--t-xs); }
/* le prenotazioni di questo dispositivo, per chi non è entrato: sotto i modi di entrare, staccate come una sezione;
   il primo giorno al corpo della frase (la pagina è "Accedi": il titolo grande resterebbe sopra a tutto) */
.profilo-dispositivo { display: grid; gap: var(--s-5); max-width: 44rem; margin-top: var(--s-9); }
.profilo-dispositivo .visita:first-child .visita-quando { max-width: 22ch; font-size: var(--f-frase); line-height: var(--lh-frase); letter-spacing: var(--tr-frase); }
/* il numero del negozio non si spezza a metà ("339 / 721 4765"): va a capo intero */
.pren-fatto a[href^="tel:"], .visite-piede a[href^="tel:"] { white-space: nowrap; }
/* sul telefono, una colonna: i dati vengono dopo gli appuntamenti, staccati come una sezione */
@media (max-width: 52rem) {
  .profilo-dentro .riepilogo { margin-block: var(--s-8) 0; }
}

/* ---------- Pagina 404 ---------- */
/* ---------- La privacy (privacy.html, GDPR v86) ----------
   La testa della prenotazione; sotto un testo da leggere, in una colonna di misura comoda. Ogni parte si apre
   col filetto sottile, il titolo al corpo delle voci; gli elenchi senza pallini, staccati. */
.privacy-testo { display: grid; gap: var(--s-6); max-width: 68ch; }
.privacy-testo section { display: grid; gap: var(--s-3); }
.privacy-testo h2 { padding-top: var(--s-3); border-top: 1px solid var(--filetto); font-size: var(--t-m); font-weight: 800; line-height: var(--lh-voce); letter-spacing: var(--tr-voce); }
.privacy-elenco { display: grid; gap: var(--s-3); padding: 0; list-style: none; }
.privacy-elenco strong { font-weight: 600; }
.privacy-testo .actions { padding-top: var(--s-4); }

.notfound { padding-block: var(--s-10); }
.notfound-code { color: var(--inchiostro-2); font-weight: 600; }
.notfound h1 { max-width: 14ch; margin-block: var(--s-4) var(--s-5); font-size: var(--f-titolo); }
.notfound .lead { max-width: 34ch; margin-bottom: var(--s-6); }
.notfound .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }

/* ---------- Stampa: un foglio con listino, orari e contatti ---------- */
.solo-stampa { display: none; }
@media print {
  .site-header, .quickbar, .skip, #lavori, .lang, .forbici, .liquido, .salone, .dove-fascia,
  .btn, .hero-cta, .copia { display: none !important; }
  .hero-manifesto { -webkit-mask-image: none !important; mask-image: none !important; }
  .hero-riga, .hero-foot, .hero-top { animation: none !important; }
  html, body { background: #fff !important; color: #111 !important; }
  body { font-size: 10.5pt; line-height: 1.45; padding: 0; }
  .booking, .section-listino, .section-dove, .bill { background: transparent !important; color: #111 !important; min-height: 0 !important; }
  .phone { font-size: 30pt !important; color: #111 !important; }
  .muted, .item-desc, .item-time, .bill-items, .bill-time, .hours td, .insegna-testo { color: #555 !important; }
  a { color: #111 !important; text-decoration: none; }
  .section, .hero-inner { padding-block: .5cm; min-height: 0; }
  .insegna { padding-block: .3cm; }
  .hero-name { font-size: 30pt; line-height: 1; white-space: normal; }
  .hero-word { display: inline; overflow: visible; }
  h2 { font-size: 18pt; }
  .item { padding-block: .15cm; min-height: 0; break-inside: avoid; }
  .item-mark { border-color: #999; }
  .item input:checked ~ .item-mark { background: #111; }
  .item input[type="radio"]:checked ~ .item-mark { background: none; border-color: #111; }
  .item input[type="radio"]:checked ~ .item-mark::after { background: #111; }
  .bill { position: static; break-inside: avoid; }
  .solo-stampa { display: block; grid-column: 1 / -1; color: #555; }
  .status-dot { display: none; }
  #servizi, #dove, #prenota { break-inside: avoid; }
}

/* ---------- Contrasto elevato di Windows ----------
   Il sistema cancella sfondi e fusioni: si rimettono con i colori di sistema i segni che portano informazione. */
@media (forced-colors: active) {
  .status-dot { border-color: CanvasText; }
  .status.is-open .status-dot { background: CanvasText; }
  .item input:checked ~ .item-mark { background: Highlight; border-color: Highlight; }
  .item input:checked ~ .item-mark::after { border-color: Canvas; }
  .item input[type="radio"]:checked ~ .item-mark { background: Canvas; }
  .item input[type="radio"]:checked ~ .item-mark::after { background: Highlight; forced-color-adjust: none; }
  .item:has(input:disabled) :is(.item-name, .item-price, .item-desc, .item-time) { color: GrayText; }
  .item:has(input:disabled) .item-mark { border-color: GrayText; }
  .photo, .dove-mappa { border: 1px solid CanvasText; }
  .lang-cursore { display: none; }
  .lang-btn[aria-current="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .menu-toggle { background: ButtonFace; color: ButtonText; }
  .menu-toggle[aria-expanded="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .nav ul::before, .nav ul::after { background: CanvasText; forced-color-adjust: none; }
  .nav ul a[aria-current="true"] span { text-decoration: underline 3px; text-underline-offset: .15em; }
  .liquido { display: none; }
  .giorno:has(input:checked), .ora:has(input:checked) { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .giorno:has(input:disabled) { color: GrayText; }
  .ora, .campo input { border-color: CanvasText; }
}

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.lenis) { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .site-header.is-hidden { transform: none; }
}

/* Contrasti (rapporti WCAG, minimo 4,5:1 per il testo, 3:1 per i segni):
   inchiostro      #141414  su marmo #F5F5F3 16,9   su cipria #DDBBA1 10,3   sul servizio scelto #EADBCE 13,6
   inchiostro 70%           su marmo  6,5           sul servizio scelto 5,9   sul velo #E7E7E6 6,2
   marmo           #F5F5F3  sull'inchiostro 16,9 (testo dei pulsanti neri), sul nero premuto #383838 10,7
   la superficie liquida di Prenota va dal cipria schiarito (#E4CCBA, cipria + 30% marmo) verso il marmo, e le
   pieghe scendono al massimo al 10% d'inchiostro (#CFBAA9): l'inchiostro sopra resta fra 9,9 e 16,9.
   Lì tutto il testo è in inchiostro pieno.
   cipria come segno sul marmo 1,6: per questo non porta mai da solo un'informazione (la riga scelta ha anche
   la casella piena, l'avviso ha anche il testo in nero). */