/* ============================================================
   MACELLERIA POLLERIA — FOGLIO DI STILE
   Ordine: base · testo · tasti · barra · copertina · sezioni ·
           prenotazione · piede · adattamenti
   ============================================================ */

/* ---------- 1. BASE ------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--c-pietra);
  color: var(--c-osso);
  font-family: var(--f-testo);
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* La grana sta sopra tutto e non intercetta niente: è pellicola,
   non interfaccia. Senza di lei i neri sembrano plastica. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grana);
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: var(--z-avviso);
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--c-ottone);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

.contenitore {
  width: 100%;
  max-width: var(--larghezza);
  margin-inline: auto;
  padding-inline: var(--bordo-x);
}

.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-avviso);
  background: var(--c-ottone);
  color: var(--c-pietra);
  padding: var(--s-2) var(--s-4);
  font-weight: 600;
}
.salta:focus { left: var(--s-2); top: var(--s-2); }

/* ---------- 2. TESTO ------------------------------------------------ */

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: var(--lh-titolo);
  letter-spacing: var(--ls-display);
  margin: 0;
  text-wrap: balance;
}
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--c-ottone);
}

p { margin: 0 0 var(--s-3); max-width: var(--leggibile); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; }

.occhiello {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font-family: var(--f-testo);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--ls-occhiello);
  text-transform: uppercase;
  color: var(--c-ottone);
}
.occhiello--piccolo { font-size: 11px; margin-bottom: var(--s-1); }
.occhiello__pallino {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-ottone);
  box-shadow: 0 0 0 4px var(--c-ottone-10);
}

.stelle {
  color: var(--c-ottone);
  letter-spacing: 0.14em;
  font-size: 0.92em;
}

.testata { margin-bottom: var(--s-6); max-width: 780px; }
.testata--centro { margin-inline: auto; text-align: center; }
.testata--centro p { margin-inline: auto; }
.testata__titolo { font-size: var(--t-display); margin-bottom: var(--s-3); }
.testata__testo { color: var(--c-cenere); font-size: var(--t-guida); }

/* ---------- 3. TASTI ------------------------------------------------ */

.tasto {
  --alt: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--alt);
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-pieno);
  background: none;
  font-size: var(--t-piccolo);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: center;
  transition:
    background var(--d-corta) var(--e-morbida),
    border-color var(--d-corta) var(--e-morbida),
    color var(--d-corta) var(--e-morbida),
    transform var(--d-corta) var(--e-morbida),
    box-shadow var(--d-media) var(--e-morbida);
}
.tasto svg { width: 18px; height: 18px; flex: none; }
.tasto:active { transform: translateY(1px); }

.tasto--pieno {
  background: var(--g-ottone);
  color: #17110A;
  box-shadow: 0 1px 0 var(--c-ottone-lux) inset, 0 10px 30px -12px rgba(200,163,90,.5);
}
.tasto--pieno:hover {
  box-shadow: 0 1px 0 var(--c-ottone-lux) inset, 0 14px 40px -10px rgba(200,163,90,.7);
  filter: brightness(1.06);
}

.tasto--contorno {
  border-color: var(--c-osso-22);
  color: var(--c-osso);
}
.tasto--contorno:hover {
  border-color: var(--c-ottone);
  color: var(--c-ottone-lux);
  background: var(--c-ottone-04);
}

.tasto--fantasma { color: var(--c-cenere); padding-inline: var(--s-3); }
.tasto--fantasma:hover { color: var(--c-osso); background: var(--c-osso-06); }

.tasto--verde {
  background: linear-gradient(135deg, #1FA855, #12703A);
  color: #F2FFF6;
  box-shadow: 0 10px 30px -12px rgba(31,168,85,.6);
}
.tasto--verde:hover { filter: brightness(1.08); }

.tasto--grande { --alt: 56px; font-size: var(--t-corpo); padding-inline: var(--s-5); }
.tasto--piccolo { --alt: 38px; font-size: var(--t-micro); padding-inline: var(--s-3); }
.tasto--pieno-larghezza { width: 100%; }

.tasto[disabled] { opacity: .45; cursor: not-allowed; }
.tasto[disabled]:active { transform: none; }

/* ---------- 4. BARRA ------------------------------------------------ */

.barra {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  transition: background var(--d-media) var(--e-morbida),
              backdrop-filter var(--d-media) var(--e-morbida);
}
.barra--ancorata {
  background: var(--c-pietra-88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.barra__interno {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  max-width: var(--larghezza);
  margin-inline: auto;
  padding: var(--s-3) var(--bordo-x);
}
.barra__filo {
  height: 1px;
  background: var(--g-filo);
  opacity: 0;
  transition: opacity var(--d-media) var(--e-morbida);
}
.barra--ancorata .barra__filo { opacity: 1; }

.marchio { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.marchio__segno { width: 30px; height: 30px; color: var(--c-ottone); }
.marchio__testo { display: flex; flex-direction: column; line-height: 1.05; }
.marchio__nome {
  font-family: var(--f-display);
  font-size: 17px;
  letter-spacing: 0.01em;
}
.marchio__luogo {
  font-size: 10px;
  letter-spacing: var(--ls-occhiello);
  text-transform: uppercase;
  color: var(--c-cenere);
}

.menu {
  display: flex;
  gap: var(--s-4);
  margin-inline: auto;
  font-size: var(--t-piccolo);
  color: var(--c-cenere);
}
.menu a { position: relative; padding-block: 4px; transition: color var(--d-corta); }
.menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--c-ottone);
  transition: right var(--d-media) var(--e-entrata);
}
.menu a:hover { color: var(--c-osso); }
.menu a:hover::after { right: 0; }

.barra__azioni { display: flex; align-items: center; gap: var(--s-2); flex: none; }
.tasto--tel svg { width: 16px; height: 16px; }

/* ---------- 5. COPERTINA -------------------------------------------- */

.copertina {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--s-8) + 40px) 0 var(--s-7);
  overflow: hidden;
  isolation: isolate;
}

.copertina__scena {
  position: absolute;
  inset: -12% 0 -12%;
  z-index: -1;
  will-change: transform;
}
.copertina__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La foto entra da sola: 1,6 s di zoom lentissimo, una volta sola. */
  animation: respiro 2200ms var(--e-entrata) both;
}
@keyframes respiro {
  from { transform: scale(1.08); opacity: 0; filter: blur(8px); }
  to   { transform: scale(1);    opacity: 1; filter: blur(0); }
}
.copertina__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--c-pietra) 2%, rgba(11,9,8,.72) 34%, rgba(11,9,8,.18) 66%, rgba(11,9,8,.55) 100%),
    radial-gradient(120% 80% at 12% 92%, rgba(110,22,32,.34), transparent 62%);
}
.copertina__grana {
  position: absolute;
  inset: 0;
  background-image: var(--marmo);
  opacity: .18;
  mix-blend-mode: soft-light;
}

.copertina__corpo {
  position: relative;
  width: 100%;
  max-width: var(--larghezza);
  margin-inline: auto;
  padding-inline: var(--bordo-x);
}

.copertina__titolo {
  font-size: var(--t-mega);
  line-height: var(--lh-stretto);
  margin: 0 0 var(--s-4);
  max-width: 15ch;
  text-shadow: 0 12px 60px rgba(11,9,8,.75);
}

.copertina__testo {
  color: var(--c-osso);
  font-size: var(--t-guida);
  max-width: 46ch;
  margin-bottom: var(--s-5);
  text-shadow: 0 2px 24px rgba(11,9,8,.9);
}

.copertina__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.copertina__prove {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding: var(--s-3) 0 0;
  list-style: none;
  border-top: 1px solid var(--c-osso-12);
  font-size: var(--t-piccolo);
  color: var(--c-cenere);
}
.copertina__prove strong { color: var(--c-osso); }
.copertina__prove li { display: flex; align-items: center; gap: 6px; }

.copertina__scendi {
  position: absolute;
  left: 50%;
  bottom: var(--s-3);
  transform: translateX(-50%);
}
.copertina__scendi-linea {
  display: block;
  width: 1px;
  height: 54px;
  background: linear-gradient(var(--c-ottone-55), transparent);
  transform-origin: top;
  animation: cala 2.4s var(--e-morbida) infinite;
}
@keyframes cala {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(54px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .copertina__foto { animation: none; }
  .copertina__scendi-linea { animation: none; }
}

/* ---------- 6. RIVELAZIONI ------------------------------------------ */

.rivela {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--d-rivela) var(--e-entrata) var(--ritardo, 0ms),
    transform var(--d-rivela) var(--e-entrata) var(--ritardo, 0ms);
}
.rivela.dentro { opacity: 1; transform: none; }

/* Le parole dei titoli salgono da sotto una riga invisibile:
   il testo si scopre, non compare. */
.parola {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.parola > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(110%) rotate(2deg);
  opacity: 0;
  transition:
    transform 900ms var(--e-entrata) var(--ritardo, 0ms),
    opacity 700ms var(--e-entrata) var(--ritardo, 0ms);
}
.dentro .parola > i,
.parola.dentro > i { transform: none; opacity: 1; }

/* Senza JavaScript la pagina resta leggibile: niente resta invisibile. */
.senza-js .rivela { opacity: 1; transform: none; }
.senza-js .parola > i { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rivela { transform: none; }
  .parola > i { transform: none; }
}

/* ---------- 7. FASCIA ----------------------------------------------- */

.fascia {
  padding: var(--s-7) 0;
  background: var(--c-ardesia);
  border-block: 1px solid var(--c-venatura);
}
.fascia__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s-5);
}
.fascia__voce h2 {
  font-size: var(--t-sotto);
  margin: var(--s-2) 0 var(--s-2);
}
.fascia__voce p { color: var(--c-cenere); font-size: var(--t-piccolo); }
.fascia__numero {
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: var(--ls-occhiello);
  color: var(--c-ottone);
  display: block;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-ottone-18);
  width: 2.6em;
}

/* ---------- 8. IL BANCO --------------------------------------------- */

.banco { padding: var(--sezione-y) 0; }

.griglia-banco {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

.scheda {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-marmo);
  border: 1px solid var(--c-venatura);
  border-radius: var(--r-3);
  overflow: hidden;
  transform: perspective(1000px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg))
             translateY(var(--su, 0px));
  transform-style: preserve-3d;
  transition: transform var(--d-media) var(--e-morbida),
              border-color var(--d-media) var(--e-morbida),
              box-shadow var(--d-media) var(--e-morbida);
}
.scheda:hover {
  --su: -4px;
  border-color: var(--c-ottone-32);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
}
.scheda--scelta { border-color: var(--c-ottone); }

.scheda__vetro {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-ardesia);
}
.scheda__vetro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Il pezzo si muove dentro la cornice mentre il mouse passa:
     è la foto che gira sul piatto, non la scheda che balla. */
  transform: scale(1.08) translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 600ms var(--e-morbida), filter var(--d-media);
  filter: saturate(1.02) contrast(1.04);
}
.scheda:hover .scheda__vetro img { transform: scale(1.14) translate3d(var(--mx, 0px), var(--my, 0px), 0); }

.scheda__vetro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--c-marmo) 1%, rgba(23,20,18,.55) 26%, transparent 62%);
}
/* Il riflesso che segue il puntatore: una banda d'ottone quasi invisibile. */
.scheda__luce {
  position: absolute;
  inset: 0;
  background: radial-gradient(240px circle at var(--lx, 50%) var(--ly, 50%),
              var(--c-ottone-18), transparent 70%);
  opacity: 0;
  transition: opacity var(--d-media) var(--e-morbida);
  pointer-events: none;
}
.scheda:hover .scheda__luce { opacity: 1; }

.scheda__bollo {
  position: absolute;
  top: var(--s-2); left: var(--s-2);
  z-index: 2;
  padding: 5px var(--s-2);
  border-radius: var(--r-pieno);
  background: var(--c-pietra-88);
  border: 1px solid var(--c-ottone-32);
  color: var(--c-ottone-lux);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.scheda__corpo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3) var(--s-3);
  margin-top: -34px;
}
.scheda__nome {
  font-family: var(--f-display);
  font-size: 23px;
  line-height: 1.12;
}
.scheda__desc {
  color: var(--c-cenere);
  font-size: var(--t-micro);
  line-height: 1.5;
  margin: 0;
  min-height: 2.9em;
}
.scheda__prezzo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--f-display);
  font-size: 21px;
  color: var(--c-ottone);
}
.scheda__prezzo span {
  font-family: var(--f-testo);
  font-size: var(--t-micro);
  color: var(--c-cenere);
}

/* Il comando quantità: un solo blocco, due stati. */
.quanti {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-venatura);
}
.quanti__tasto {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-osso-12);
  border-radius: var(--r-pieno);
  background: none;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  color: var(--c-osso);
  transition: border-color var(--d-corta), background var(--d-corta), color var(--d-corta);
}
.quanti__tasto:hover { border-color: var(--c-ottone); color: var(--c-ottone-lux); background: var(--c-ottone-04); }
.quanti__valore {
  flex: 1;
  text-align: center;
  font-size: var(--t-piccolo);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.quanti__aggiungi {
  flex: 1;
  min-height: 38px;
  border-radius: var(--r-pieno);
  border: 1px solid var(--c-ottone-32);
  background: var(--c-ottone-04);
  color: var(--c-ottone-lux);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--d-corta), color var(--d-corta);
}
.quanti__aggiungi:hover { background: var(--g-ottone); color: #17110A; border-color: transparent; }

/* Listino di seconda fila */
.listino {
  border: 1px solid var(--c-venatura);
  border-radius: var(--r-3);
  padding: var(--s-5);
  background: var(--c-ardesia);
}
.listino__titolo {
  font-size: var(--t-sotto);
  margin-bottom: var(--s-3);
}
.listino__voci {
  list-style: none;
  margin: 0 0 var(--s-3);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2px var(--s-5);
}
.listino__voce {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-bottom: 1px dashed var(--c-venatura);
}
.listino__voce b { font-family: var(--f-display); font-weight: 400; font-size: 17px; }
.listino__punti {
  flex: 1;
  height: 1px;
  border-bottom: 1px dotted var(--c-cenere-cupa);
  opacity: .5;
}
.listino__prezzo { color: var(--c-ottone); font-size: var(--t-piccolo); font-weight: 600; white-space: nowrap; }
.listino__piu {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--c-osso-12);
  background: none;
  color: var(--c-osso);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  transition: border-color var(--d-corta), background var(--d-corta), color var(--d-corta), transform var(--d-corta);
}
.listino__piu:hover { border-color: var(--c-ottone); background: var(--c-ottone-10); color: var(--c-ottone-lux); transform: rotate(90deg); }
.listino__nota { color: var(--c-cenere); font-size: var(--t-micro); margin: 0; }
.listino__nota a { color: var(--c-ottone); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 9. POLLO ALLO SPIEDO ------------------------------------ */

.spiedo {
  position: relative;
  padding: var(--sezione-y) 0;
  overflow: hidden;
  isolation: isolate;
  border-block: 1px solid var(--c-venatura);
}
.spiedo__sfondo {
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 22% 45%, rgba(142,27,36,.30), transparent 68%),
    radial-gradient(55% 50% at 82% 62%, rgba(200,163,90,.14), transparent 70%),
    var(--c-ardesia);
  will-change: transform;
}
.spiedo__griglia {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(var(--s-5), 6vw, var(--s-7));
  align-items: center;
}
.spiedo__foto {
  position: relative;
  margin: 0;
  border-radius: var(--r-4);
  overflow: hidden;
  border: 1px solid var(--c-ottone-18);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--d-media) var(--e-morbida);
  box-shadow: 0 50px 90px -50px rgba(0,0,0,1);
}
.spiedo__foto img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transform: scale(1.06) translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 700ms var(--e-morbida);
}
.spiedo__bollo {
  position: absolute;
  right: var(--s-3); bottom: var(--s-3);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  background: var(--c-pietra-88);
  border: 1px solid var(--c-ottone-32);
  backdrop-filter: blur(8px);
}
.spiedo__bollo span { font-size: 10px; letter-spacing: var(--ls-occhiello); text-transform: uppercase; color: var(--c-cenere); }
.spiedo__bollo strong { font-family: var(--f-display); font-weight: 400; font-size: 19px; color: var(--c-ottone); }

.spiedo__titolo { font-size: var(--t-display); margin-bottom: var(--s-3); }
.spiedo__testo p { color: var(--c-cenere); font-size: var(--t-guida); }
.spiedo__punti {
  list-style: none;
  margin: var(--s-4) 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
.spiedo__punti li {
  display: flex;
  gap: var(--s-2);
  font-size: var(--t-piccolo);
  color: var(--c-osso);
}
.spiedo__punti span { color: var(--c-ottone); flex: none; }
.spiedo__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.spiedo__prezzo { font-size: var(--t-piccolo); color: var(--c-cenere); }
.spiedo__prezzo strong { font-family: var(--f-display); font-weight: 400; font-size: 25px; color: var(--c-ottone); margin-right: 4px; }

/* ---------- 10. LA BOTTEGA ------------------------------------------ */

.bottega { padding: var(--sezione-y) 0 0; }
.bottega__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(var(--s-5), 6vw, var(--s-7));
  align-items: center;
  padding-bottom: var(--sezione-y);
}
.bottega__testo p { color: var(--c-cenere); font-size: var(--t-guida); }
.bottega__foto {
  margin: 0;
  border-radius: var(--r-4);
  overflow: hidden;
  border: 1px solid var(--c-venatura);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--d-media) var(--e-morbida);
}
.bottega__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1.06) translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 700ms var(--e-morbida);
}

.bottega__numeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-4);
  margin: var(--s-5) 0 0;
}
.bottega__numeri dt {
  font-size: 11px;
  letter-spacing: var(--ls-occhiello);
  text-transform: uppercase;
  color: var(--c-cenere);
  margin-bottom: 4px;
}
.bottega__numeri dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: 40px;
  line-height: 1;
  color: var(--c-osso);
  font-variant-numeric: tabular-nums;
}
.bottega__numeri .stelle { font-size: 20px; }

/* Il nastro dei tagli: scorre piano, si ferma se il sistema lo chiede. */
.nastro {
  border-block: 1px solid var(--c-venatura);
  overflow: hidden;
  padding: var(--s-3) 0;
  background: var(--c-ardesia);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.nastro__pista {
  display: flex;
  gap: var(--s-4);
  width: max-content;
  animation: scorri 38s linear infinite;
  font-family: var(--f-display);
  font-size: clamp(20px, 2.4vw, 32px);
  color: var(--c-cenere-cupa);
  white-space: nowrap;
}
.nastro__pista span:nth-child(even) { color: var(--c-ottone); }
@keyframes scorri { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .nastro__pista { animation: none; }
}

/* ---------- 11. RECENSIONI ------------------------------------------ */

.voci { padding: var(--sezione-y) 0; }
.voci .testata__titolo em { font-size: 1.35em; }
.voci__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
}
.voce {
  margin: 0;
  padding: var(--s-5);
  background: var(--c-marmo);
  border: 1px solid var(--c-venatura);
  border-radius: var(--r-3);
  position: relative;
  transition: border-color var(--d-media), transform var(--d-media) var(--e-morbida);
}
.voce:hover { border-color: var(--c-ottone-32); transform: translateY(-3px); }
.voce > p:nth-child(2) {
  font-family: var(--f-display);
  font-size: 19px;
  line-height: 1.5;
  color: var(--c-osso);
  margin: var(--s-2) 0 var(--s-4);
}
.voce footer { display: flex; align-items: baseline; gap: var(--s-2); }
.voce cite { font-style: normal; font-weight: 600; font-size: var(--t-piccolo); }
.voce footer span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-cenere-cupa); }
.voci__link { text-align: center; margin-top: var(--s-5); font-size: var(--t-piccolo); }
.voci__link a { color: var(--c-ottone); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 12. DOVE SIAMO ------------------------------------------ */

.dove {
  padding: var(--sezione-y) 0;
  background: var(--c-ardesia);
  border-top: 1px solid var(--c-venatura);
}
.dove__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(var(--s-5), 6vw, var(--s-7));
  align-items: center;
}
.dove__foto {
  margin: 0;
  border-radius: var(--r-4);
  overflow: hidden;
  border: 1px solid var(--c-venatura);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--d-media) var(--e-morbida);
}
.dove__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1.05) translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 700ms var(--e-morbida);
}

.dati { margin: var(--s-5) 0; display: grid; gap: var(--s-3); }
.dati > div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-venatura);
}
.dati dt {
  font-size: 11px;
  letter-spacing: var(--ls-occhiello);
  text-transform: uppercase;
  color: var(--c-cenere);
  padding-top: 3px;
}
.dati dd { margin: 0; font-size: var(--t-piccolo); }
.dati dd a { color: var(--c-ottone); text-decoration: underline; text-underline-offset: 3px; }
.dati__riga { display: flex; justify-content: space-between; gap: var(--s-3); padding: 2px 0; }
.dati__riga b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- 13. PIÈ DI PAGINA --------------------------------------- */

.piede {
  padding: var(--s-6) 0 calc(var(--s-4) + var(--h-carrello));
  border-top: 1px solid var(--c-venatura);
  background: var(--c-pietra);
}
.piede__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-5);
  padding-bottom: var(--s-5);
}
.piede__marchio .marchio__nome { font-size: 21px; display: block; margin-bottom: var(--s-2); }
.piede p { color: var(--c-cenere); font-size: var(--t-micro); margin: 0 0 6px; }
.piede a { color: var(--c-ottone); }
.piede__menu { display: grid; gap: 6px; align-content: start; font-size: var(--t-piccolo); }
.piede__menu a { color: var(--c-cenere); }
.piede__menu a:hover { color: var(--c-osso); }
.piede__coda {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-venatura);
  font-size: var(--t-micro);
  color: var(--c-cenere-cupa);
}

/* ---------- 14. BARRA DEL CARRELLO ---------------------------------- */

.carrello {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-carrello);
  background: var(--c-pietra-96);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--c-ottone-18);
  transform: translateY(100%);
  transition: transform var(--d-media) var(--e-entrata);
  padding-bottom: env(safe-area-inset-bottom);
}
.carrello--su { transform: none; }
.carrello__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  max-width: var(--larghezza);
  margin-inline: auto;
  min-height: var(--h-carrello);
  padding: var(--s-2) var(--bordo-x);
}
.carrello__conto { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.carrello__conto strong { font-size: var(--t-piccolo); }
.carrello__conto span {
  font-family: var(--f-display);
  font-size: 21px;
  color: var(--c-ottone);
  font-variant-numeric: tabular-nums;
}
.carrello__tasti { display: flex; align-items: center; gap: var(--s-2); flex: none; }

/* ---------- 15. PANNELLO DI PRENOTAZIONE ---------------------------- */

.velo {
  position: fixed;
  inset: 0;
  z-index: var(--z-modale);
  background: rgba(6,5,4,.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--d-media) var(--e-morbida);
}
.velo--visibile { opacity: 1; }

.pannello {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-modale) + 1);
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--c-ardesia);
  border-left: 1px solid var(--c-ottone-18);
  box-shadow: -40px 0 80px -40px rgba(0,0,0,1);
  transform: translateX(100%);
  transition: transform 420ms var(--e-entrata);
}
.pannello--aperto { transform: none; }

.pannello__testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--c-venatura);
  flex: none;
}
.pannello__testa h2 { font-size: 26px; max-width: 15ch; }
.pannello__chiudi {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-osso-12);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: border-color var(--d-corta), background var(--d-corta), transform var(--d-corta);
}
.pannello__chiudi svg { width: 18px; height: 18px; }
.pannello__chiudi:hover { border-color: var(--c-ottone); background: var(--c-ottone-10); transform: rotate(90deg); }

.pannello__corpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-4);
  display: grid;
  gap: var(--s-5);
}

.passo__titolo {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-testo);
  font-size: var(--t-piccolo);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-cenere);
  margin-bottom: var(--s-3);
}
.passo__numero {
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--c-ottone-32);
  color: var(--c-ottone);
  font-size: 12px;
  font-family: var(--f-display);
}

/* Le righe dell'ordine */
.ordine { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.ordine__riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  border: 1px solid var(--c-venatura);
  border-radius: var(--r-2);
  background: var(--c-marmo);
  animation: entra-riga 340ms var(--e-entrata) both;
}
@keyframes entra-riga {
  from { opacity: 0; transform: translateY(-6px); }
}
.ordine__nome { font-size: var(--t-piccolo); font-weight: 600; }
.ordine__dettaglio { font-size: var(--t-micro); color: var(--c-cenere); }
.ordine__comandi { display: flex; align-items: center; gap: 4px; }
.ordine__comandi button {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--c-osso-12);
  background: none;
  cursor: pointer;
  line-height: 1;
  transition: border-color var(--d-corta), color var(--d-corta);
}
.ordine__comandi button:hover { border-color: var(--c-ottone); color: var(--c-ottone-lux); }
.ordine__comandi .ordine__via:hover { border-color: var(--c-ruggine); color: var(--c-ruggine); }
.ordine__qta {
  min-width: 62px;
  text-align: center;
  font-size: var(--t-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ordine__vuoto { font-size: var(--t-piccolo); color: var(--c-cenere); margin-bottom: var(--s-2); }
.ordine__scorciatoie { display: flex; flex-wrap: wrap; gap: var(--s-1); }

.ordine__totale {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-venatura);
  font-size: var(--t-piccolo);
  color: var(--c-cenere);
}
.ordine__totale strong {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 27px;
  color: var(--c-ottone);
  font-variant-numeric: tabular-nums;
}
.ordine__nota { font-size: var(--t-micro); color: var(--c-cenere-cupa); margin-top: 4px; }

/* Giorni e fasce orarie */
.scelte { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.scelte--ore { margin-top: var(--s-2); }
.pastiglia {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 46px;
  padding: 6px var(--s-3);
  border: 1px solid var(--c-osso-12);
  border-radius: var(--r-2);
  background: none;
  cursor: pointer;
  font-size: var(--t-piccolo);
  transition: border-color var(--d-corta), background var(--d-corta), color var(--d-corta);
}
.pastiglia small {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cenere);
}
.pastiglia:hover:not([disabled]) { border-color: var(--c-ottone-55); background: var(--c-ottone-04); }
.pastiglia[aria-pressed="true"] {
  border-color: transparent;
  background: var(--g-ottone);
  color: #17110A;
}
.pastiglia[aria-pressed="true"] small { color: rgba(23,17,10,.72); }
.pastiglia[disabled] { opacity: .3; cursor: not-allowed; text-decoration: line-through; }

.avviso {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-ottone-32);
  border-radius: var(--r-2);
  background: var(--c-ottone-04);
  color: var(--c-ottone-lux);
  font-size: var(--t-micro);
}
.avviso svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* Campi */
.campi { display: grid; gap: var(--s-3); }
.campo { display: grid; gap: 6px; }
.campo__et {
  font-size: 11px;
  letter-spacing: var(--ls-occhiello);
  text-transform: uppercase;
  color: var(--c-cenere);
}
.campo__et i { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--c-cenere-cupa); }
.campo input, .campo textarea {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-osso-12);
  border-radius: var(--r-2);
  background: var(--c-pietra);
  color: var(--c-osso);
  font: inherit;
  font-size: var(--t-piccolo);
  transition: border-color var(--d-corta), background var(--d-corta);
}
.campo textarea { resize: vertical; min-height: 78px; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--c-cenere-cupa); }
.campo input:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--c-ottone);
  background: var(--c-ardesia);
}
.campo--errato input, .campo--errato textarea { border-color: var(--c-ruggine); }
.campo__errore { font-size: var(--t-micro); color: var(--c-ruggine); min-height: 0; }

.dopo {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: 6px;
  font-size: var(--t-micro);
  color: var(--c-cenere);
}
.dopo li::marker { color: var(--c-ottone); }

.pannello__piede {
  flex: none;
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-venatura);
  background: var(--c-pietra);
}
.pannello__alternativa {
  margin: var(--s-2) 0 0;
  text-align: center;
  font-size: var(--t-micro);
  color: var(--c-cenere);
}
.pannello__alternativa a { color: var(--c-ottone); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 16. BRINDISI (conferme al volo) ------------------------- */

.brindisi {
  position: fixed;
  left: 50%;
  bottom: calc(var(--h-carrello) + var(--s-3));
  z-index: var(--z-avviso);
  transform: translate(-50%, 16px);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pieno);
  background: var(--c-osso);
  color: var(--c-pietra);
  font-size: var(--t-micro);
  font-weight: 600;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-media) var(--e-morbida), transform var(--d-media) var(--e-entrata);
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.brindisi--visibile { opacity: 1; transform: translate(-50%, 0); }

/* Quando il pannello è aperto la pagina dietro non scorre. */
body.bloccata { overflow: hidden; }

/* ---------- 17. ADATTAMENTI ----------------------------------------- */

@media (max-width: 1040px) {
  .menu { display: none; }
  .barra__azioni { margin-left: auto; }
}

@media (max-width: 880px) {
  .spiedo__griglia,
  .bottega__griglia,
  .dove__griglia { grid-template-columns: 1fr; }
  .spiedo__foto { max-width: 460px; }
  .bottega__foto, .dove__foto { order: -1; }
  .copertina { min-height: 92svh; }
}

@media (max-width: 620px) {
  .tasto--tel span { display: none; }
  .tasto--tel { padding-inline: var(--s-2); }
  .copertina__titolo { max-width: 100%; }
  .griglia-banco { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-2); }
  .scheda__nome { font-size: 20px; }
  .listino { padding: var(--s-4) var(--s-3); }
  .dati > div { grid-template-columns: 1fr; gap: 4px; }
  .carrello__conto span { font-size: 18px; }
  .pannello { border-left: none; }
  .pannello__testa h2 { font-size: 22px; }
}

/* Sul touch il tilt non esiste: non c'è un puntatore da seguire.
   Meglio niente movimento che un movimento che parte a caso. */
@media (hover: none) {
  .scheda:hover { --su: 0px; }
  .scheda__vetro img,
  .spiedo__foto img,
  .bottega__foto img,
  .dove__foto img { transform: scale(1.04); }
}

@media print {
  .barra, .carrello, .pannello, .velo, .copertina__scendi { display: none !important; }
  body { background: #fff; color: #000; }
}