/* src/styles/v2.css
 *
 * Custom design classes for V2 (index PASTA V2.html).
 * Sticker cut-out border, cartoon-buttons, hard drop-shadows, marquee,
 * preloader, FAQ accordion, booking form.
 *
 * Tailwind v4 utilities (nuances tipo `bg-[var(--brand-yellow)]`) sono
 * servite via @import "tailwindcss" + @theme tokens in tokens.css.
 */

/* =========================
   FONT-FAMILY (V2 markup usa .font-display class per Anton uppercase hero).
   In Vite/Tailwind v4 `font-display` esiste MA noi la definiamo esplicitamente
   così .font-display funziona sia con @theme che senza. ========================= */
.font-display {
  font-family: "Anton", "Impact", sans-serif;
  letter-spacing: 0.01em;
}

/* Hero h1 — stesso font dei titoli giganti dello slider (es. CARBONARA):
   Mouse Memoirs, con fallback Anton. Utente: "cambia il font nell'hero
   Gira/Salta/Sforna e Balla con quello di CARBONARA dello slider".
   letter-spacing identico allo slider (0.01em): l'utente ha bocciato il
   tracking largo (0.16em) che allargava troppo le parole. */
.font-slider-hero {
  font-family: "Mouse Memoirs", "Anton", sans-serif;
  letter-spacing: 0.01em;
  /* Bold test (09/2026): Mouse Memoirs ha solo peso 400 → 700 è faux-bold.
     Se sgrana le lettere, rimuovere questa riga. */
  font-weight: 700;
}

/* =========================
   SKIP LINK (accessible keyboard shortcut) ========================= */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--brand-brown);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 700;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  outline: 3px solid var(--brand-yellow);
}

/* =========================
   CARTOON BORDER — base + large variants.
   Pattern: bordo solido scuro + offset shadow duro (no blur).
   Look "fumetto/sticker" caratteristico del brand. ========================= */
.cb {
  border: 3px solid var(--brand-brown);
  border-radius: 0.75rem;
  box-shadow: 4px 4px 0 0 var(--brand-brown);
}
.cb-lg {
  border: 4px solid var(--brand-brown);
  border-radius: 1.25rem;
  box-shadow: 6px 6px 0 0 var(--brand-brown);
}

/* =========================
   STICKER — pillola ruotata leggermente con bordo tagliato.
   Usata per tag "FRESH BOX · I PIÙ ORDINATI" etc. ========================= */
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 2.5px solid var(--brand-brown);
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 0 var(--brand-brown);
  user-select: none;
}

/* =========================
   BUTTON-CARTOON — pillola con bordo cartoon + press feedback.
   Pattern comune per CTA principale/secondarie. ========================= */
.btn-cartoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 3px solid var(--brand-brown);
  box-shadow: 5px 5px 0 0 var(--brand-brown);
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease;
  user-select: none;
}
.btn-cartoon:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 0 var(--brand-brown);
}
.btn-cartoon:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--brand-brown);
  transition-duration: 60ms;
}
.btn-cartoon:focus-visible {
  outline: 3px solid var(--brand-brown);
  outline-offset: 3px;
}

/* Testo bianco su fill giallo: contrasto basso (~1.6:1) → text-shadow
   brown hard 1px (stile sticker del design system, no blur). */
.txt-on-yellow {
  text-shadow: 1px 1px 0 var(--brand-brown);
}

/* Variante scura: per bottoni con fill brand-brown. Bordo+ombra brown su
   fill brown = zero profondità percepita → si usa dark-warm (#2b1505)
   che stacca sia sul fill sia sul bg giallo hero. */
.btn-cartoon--dark {
  border-color: var(--dark-warm);
  box-shadow: 5px 5px 0 0 var(--dark-warm);
}
.btn-cartoon--dark:hover { box-shadow: 7px 7px 0 0 var(--dark-warm); }
.btn-cartoon--dark:active { box-shadow: 2px 2px 0 0 var(--dark-warm); }
.btn-cartoon--dark:focus-visible { outline-color: var(--dark-warm); }

/* =========================
   SHADOW HARD — drop-shadow no-blur ========================= */
.shadow-hard {
  box-shadow: 5px 5px 0 0 var(--brand-brown);
}
.shadow-hard-lg {
  box-shadow: 8px 8px 0 0 var(--brand-brown);
}

/* =========================
   TEXT OUTLINE — fake cross-browser outline via 8 text-shadows.
   Pattern: 4 corner shadows + 4 cardinal shadows → uniforme stroke apparent.
   Alternativa "-webkit-text-stroke" esclusa: supportata SOLO in WebKit/Chromium
   (Firefox/Safari iOS=no). text-shadow è 100% cross-browser, identico look.
   --paper (= brand cream/ivory) = "white" del design system; contrappone bene
   sia fill scuri (brand-brown #953E0F, brand-bronze #BF7115) sia fill medi.
   Width 3px matched al .cb border. Round 1 (dark-warm, replaced) → round 2
   (paper, current). Round 3 (cravburgers-style thick 5/8/13px responsive)
   sperimentato ma respinto: troppo dominante sulle lettere. ========================= */
.text-outline-cream {
  text-shadow:
    -3px -3px 0 var(--paper),
     3px -3px 0 var(--paper),
    -3px  3px 0 var(--paper),
     3px  3px 0 var(--paper),
     0   -3px 0 var(--paper),
     0    3px 0 var(--paper),
    -3px  0   0 var(--paper),
     3px  0   0 var(--paper);
}

/* =========================
   KEYFRAMES — float / wobble / pulse-glow / marquee ========================= */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.floaty {
  animation: floaty 4.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes wobble {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
.wobble {
  animation: wobble 3s ease-in-out infinite;
  transform-origin: center;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow:
      5px 5px 0 0 var(--brand-brown),
      0 0 0 0 rgba(249, 182, 22, 0.6);
  }
  50% {
    box-shadow:
      5px 5px 0 0 var(--brand-brown),
      0 0 0 14px rgba(249, 182, 22, 0);
  }
}
.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Variante glow per fill brown su bg giallo: anello brown (visibile),
   ombra dark-warm coerente con .btn-cartoon--dark. */
@keyframes pulse-glow-dark {
  0%, 100% {
    box-shadow:
      5px 5px 0 0 var(--dark-warm),
      0 0 0 0 rgba(149, 62, 15, 0.55);
  }
  50% {
    box-shadow:
      5px 5px 0 0 var(--dark-warm),
      0 0 0 14px rgba(149, 62, 15, 0);
  }
}
.pulse-glow-dark {
  animation: pulse-glow-dark 2s ease-in-out infinite;
}


/* =========================
   HERO VIDEO MIRROR (legacy) ========================= */
.hero-video-mirror {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.25));
  border-radius: 1.25rem;
}

/* =========================
   NAV ADAPTIVE — bianco di default, nero quando sopra sfondo chiaro.
   Base: mix-blend-mode:difference (white → black automatico su bg chiaro).
   JS aggiunge .nav--on-light per forzare nero puro su giallo/crema
   dove difference darebbe tinta bluastra. ========================= */
.nav-adaptive {
  color: #fff;
  mix-blend-mode: difference;
  transition: color 0.15s ease;
}
.nav-adaptive .nav-link {
  color: inherit;
}
.nav-adaptive .nav-link::after {
  background: currentColor;
}
#nav.nav--on-light .nav-adaptive {
  mix-blend-mode: normal;
  color: #111;
}
#nav.nav--on-light .nav-adaptive .nav-link::after {
  background: #111;
}

/* =========================
   NAV LINK — underline animation on hover ========================= */
.nav-link {
  position: relative;
  color: inherit;
  text-decoration: none;
  padding: 0.4rem 0;
  transition: color 0.18s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 3px;
  background: var(--brand-brown);
  transition: width 0.22s ease, left 0.22s ease;
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
  width: 100%;
  left: 0;
}
.nav-link:focus-visible {
  outline: 2px solid var(--brand-brown);
  outline-offset: 4px;
  border-radius: 4px;
}
.mobile-link {
  display: block;
  text-decoration: none;
  border-bottom: 2px dashed var(--brand-brown);
  transition: background 0.15s ease;
}
.mobile-link:hover,
.mobile-link:focus-visible {
  background: rgba(43, 21, 5, 0.08);
  outline: none;
}

/* Staggered reveal + premium hover for mobile menu links */
.mobile-menu .mobile-link {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.2s ease,
    background 0.15s ease;
}

.mobile-menu.is-open .mobile-link {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu.is-open .mobile-link:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.is-open .mobile-link:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu.is-open .mobile-link:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.is-open .mobile-link:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu.is-open .mobile-link:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu.is-open .mobile-link:nth-child(6) { transition-delay: 0.3s; }
.mobile-menu.is-open .mobile-link:nth-child(7) { transition-delay: 0.35s; }

.mobile-menu .mobile-link:hover,
.mobile-menu .mobile-link:focus-visible {
  transform: translateX(10px);
  color: var(--brand-yellow);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu .mobile-link {
    opacity: 1;
    transform: none;
    transition: color 0.2s ease, background 0.15s ease;
  }
  .mobile-menu.is-open .mobile-link {
    transition-delay: 0s !important;
  }
}

/* =========================
   MOBILE BURGER MENU — cravburgers.shop pattern.
   Menu absolute top-full dropdown, no flow push del nav (logo+CTA+burger
   restano in posizione, sempre cliccabili). Burger 3-span morph a X quando
   .is-open. Logica toggle in src/script.ts initBurgerMenu. ========================= */
.mobile-menu {
  position: fixed;
  transform-origin: top right;
  transform: scale(0.3);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0s linear 0.5s;
}
.mobile-menu.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0s linear 0s;
}

/* =========================
   SAFE AREA — home indicator iPhone / notch devices.
   Usa il token --sp-md esistente (tokens.css) + env() per non
   introdurre valori fissi indipendenti dal design token system. */
#hero {
  padding-bottom: calc(var(--sp-md) + env(safe-area-inset-bottom));
}
.mobile-menu {
  padding-bottom: calc(var(--sp-md) + env(safe-area-inset-bottom));
}

.burger {
  position: relative;
  /* Size + frame gestiti da .cb (3px brown border + 0.75rem radius) +
     p-2 (8px padding) del markup. position:relative necessario perché le
     3 line interne sono absolute e si ancorano al button. */
}
.burger-line {
  position: absolute;
  left: 50%;
  width: 1.5rem;       /* 24px */
  height: 2.5px;
  background: currentColor;
  border-radius: 1px;
  transform: translateX(-50%);
  transition:
    top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease;
}
.burger-line--top    { top: 30%; }
.burger-line--middle { top: 50%; transform: translate(-50%, -50%); }
.burger-line--bottom { top: 70%; }

.burger.is-open .burger-line--top {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.burger.is-open .burger-line--middle {
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0);
}
.burger.is-open .burger-line--bottom {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* =========================
   PRELOADER + SPINNER ========================= */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--brand-yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.spinner-pasta {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 6px solid var(--brand-brown);
  border-top-color: transparent;
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.preloader-text {
  font-family: "Anton", "Impact", sans-serif;
  color: var(--brand-brown);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1rem;
}

/* =========================
   TOAST (booking/add-to-cart/CTA feedback) ========================= */
#toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%, 150%);
  z-index: 100;
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease;
  pointer-events: none;
}
#toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* =========================
   DISH CARD (fresh-box + menu) ========================= */
.dish-card {
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease;
}
.dish-card:hover {
  transform: translateY(-6px) rotate(-1deg);
}

/* =========================
   FRESH BOX — horizontal pin/scroll ========================= */
.fresh-pin {
  height: 32rem;
  padding-block: 2rem;
}
.fresh-track {
  display: flex;
  gap: 1.5rem;
  height: 100%;
  align-items: center;
  will-change: transform;
}

/* =========================
   REVIEW CARD ========================= */
.review-card {
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease;
}
.review-card:hover {
  transform: translateY(-4px) rotate(0.5deg);
}

/* =========================
   MENU GRID + FILTER BUTTONS ========================= */
.menu-item {
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.22s ease,
    box-shadow 0.22s ease;
}
.menu-item:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 0 0 var(--brand-brown);
}
.filter-btn {
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}
.filter-btn:hover {
  transform: translateY(-2px);
}
.filter-btn.is-active {
  background: var(--brand-yellow);
  color: var(--dark-warm);
}

/* =========================
   MENU — TAB PANELS (Primi / Secondi / Dolci) ========================= */
.menu-panel[hidden] {
  display: none;
}

/* Banner stile pennellata: strip scura leggermente ruotata — ricalca i
   banner marroni del menu reale (foto di riferimento). */
.menu-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.15rem 0 0.35rem;
  padding: 0.5rem 1rem;
  background: var(--brand-brown);
  color: var(--paper);
  border-radius: 0.65rem;
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: rotate(-0.6deg);
  box-shadow: 3px 3px 0 0 var(--brand-brown-deep);
}
.menu-banner--lg {
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  transform: rotate(-1deg);
  box-shadow: 4px 4px 0 0 var(--brand-brown-deep);
}
.menu-banner-note {
  opacity: 0.8;
  font-weight: 600;
  white-space: nowrap;
}

/* Liste voci: riga nome + puntini + prezzo (leader tratteggiato) */
.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0;
  font-weight: 600;
  color: var(--dark-warm);
  border-bottom: 1px dashed rgba(149, 62, 15, 0.4);
}
.menu-dots {
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 3px dotted rgba(149, 62, 15, 0.35);
  transform: translateY(-4px);
}
.menu-price {
  font-weight: 800;
  color: var(--brand-brown);
  white-space: nowrap;
}
.menu-chips {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.menu-chips li {
  background: var(--brand-bronze);
  color: var(--paper);
  border: 2px solid var(--brand-brown);
  border-radius: 999px;
  padding: 0.28rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.menu-callout {
  margin-top: 1.1rem;
  display: inline-block;
  background: var(--brand-bronze);
  color: var(--paper);
  border: 3px solid var(--brand-brown);
  border-radius: 0.8rem;
  box-shadow: 4px 4px 0 0 var(--brand-brown);
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transform: rotate(-1deg);
}
.menu-callout b {
  color: var(--brand-yellow);
}

/* Slot vuoti (Secondi / Dolci): placeholder tratteggiati "In arrivo" */
.slot-empty {
  min-height: 230px;
  border-radius: 1.5rem;
  border: 3px dashed rgba(249, 182, 22, 0.35);
  background: rgba(250, 246, 238, 0.05);
  display: grid;
  place-items: center;
  color: var(--paper);
  opacity: 0.75;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* =========================
   MENU — pannelli su sfondo brand-brown (Antipasti/Secondi/Dolci,
   stile foto 2: banner gialli su fondo marrone, icone gluten-free). ========== */
/* Centratura: .menu-list azzera margin (margin: 0) e vince su mx-auto
   di Tailwind nell'ordine di cascade → regola dedicata a specificità +. */
.menu-panel .menu-list.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.menu-note {
  margin: 0.9rem auto 0;
  text-align: center;
  color: var(--dark-warm);
  opacity: 0.7;
  font-size: 0.85rem;
  font-weight: 500;
}
.gf-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  color: var(--brand-brown);
  opacity: 0.85;
}

/* =========================
   FAQ ACCORDION ========================= */
.faq-item {
  background: var(--paper);
  border: 3px solid var(--brand-brown);
  border-radius: 1rem;
  box-shadow: 5px 5px 0 0 var(--brand-brown);
  overflow: hidden;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.faq-item[open] {
  box-shadow: 7px 7px 0 0 var(--brand-brown);
  transform: translate(-2px, -2px);
}
.faq-question {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.5rem;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--dark-warm);
}
.faq-question::-webkit-details-marker {
  display: none;
}
.faq-question::after {
  content: '↓';
  font-size: 1.3rem;
  color: var(--brand-brown);
  transition: transform 0.22s ease;
  display: inline-block;
}
.faq-item[open] .faq-question::after {
  transform: rotate(-180deg);
}
.faq-answer {
  padding: 0 1.5rem 1.25rem;
  color: var(--dark-warm);
  line-height: 1.6;
}
.allergen-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.allergen-tag {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  background: var(--brand-yellow);
  border: 2px solid var(--brand-brown);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}

/* =========================
   SMOOTH SCROLL + ROOT RESET.
   Lenis gestirà il delta/lerp; ci interessa solo che scrollbar sia nascosta
   (estetica) e scroll-behavior sia smooth per fallback (senza Lenis) e per
   hash-anchor. ========================= */
html {
  scroll-behavior: smooth;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* Nascondi scrollbar nativa (Lenis ha la sua rail visibile/no via CSS) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: var(--brand-brown);
  border-radius: 4px;
}
* { scrollbar-width: thin; scrollbar-color: var(--brand-brown) var(--paper); }

/* =========================
   ACCESSIBILITY ========================= */
@media (prefers-reduced-motion: reduce) {
  .floaty, .wobble, .pulse-glow, .pulse-glow-dark, .spinner-pasta {
    animation: none !important;
  }
  html { scroll-behavior: auto; }
}

/* === MOBILE / TABLET RESPONSIVE PASS =====================================
   Scoped below the desktop rules so the approved desktop composition stays
   unchanged. Decorative layers remain present but are viewport-contained. */
html.site-root,
html.site-root body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
svg,
canvas {
  max-width: 100%;
}

@media (max-width: 1023px) {
  #nav > div { padding-inline: clamp(1rem, 4vw, 1.5rem); }
  #hero { min-height: auto; padding-top: clamp(6rem, 18vw, 8rem); padding-inline: 0; }
  #hero > .relative.z-10 { padding-inline: clamp(1rem, 5vw, 2rem); }
  #hero .grid { grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 5vw, 2.5rem); }
  #hero h1 { font-size: clamp(3rem, 13vw, 5rem); line-height: 0.88; overflow-wrap: anywhere; }
  #hero .hero-sub { max-width: 34rem; margin-inline: auto; font-size: clamp(1rem, 3.8vw, 1.25rem); line-height: 1.45; }
  #hero .btn-cartoon { min-height: 2.75rem; max-width: 100%; }
  #desktop-video-slot, #mobile-video-slot { width: min(100%, 30rem); }
  #hero video { max-height: min(72vw, 26rem); object-fit: contain; }

  #best-sellers .hero { min-height: clamp(38rem, 125vw, 52rem); height: auto; }
  #best-sellers .content-anim { left: clamp(1rem, 5vw, 2rem); right: clamp(1rem, 5vw, 2rem); bottom: clamp(5rem, 14vw, 8rem); max-width: none; }
  #best-sellers .content-anim h2 { font-size: clamp(2rem, 9vw, 3rem); }
  #best-sellers .content-anim p { max-width: 30rem; font-size: clamp(0.875rem, 3vw, 1rem); }
  #best-sellers .slide-nav { right: 1rem; bottom: 1.25rem; gap: 0.75rem; }
  #best-sellers .arrow-btn { width: 2.75rem; height: 2.75rem; }

  .mantra-stage { width: 100%; max-width: 100%; overflow: hidden; }
  .mantra-stage .mantra-word { max-width: calc(45vw - 1rem); overflow: hidden; text-overflow: ellipsis; }
  .mantra-stage .mantra-scooter { max-width: none; }

  #review-hit {
    inset: 0;
    pointer-events: auto;
    touch-action: pan-y;
  }
  #recensioni .review-card { touch-action: pan-y; }
  .faq-question { min-height: 2.75rem; padding: 1rem; gap: 1rem; font-size: clamp(0.95rem, 3.6vw, 1.05rem); }
  .faq-answer { padding-inline: 1rem; }
}

@media (max-width: 767px) {
  #hero .flex.flex-wrap { flex-direction: column; align-items: stretch; }
  #hero .flex.flex-wrap .btn-cartoon { width: 100%; }
  #mobileMenu { left: 1rem; right: 1rem; top: 5.5rem; padding: 1.25rem; }
  .mobile-menu .mobile-link { min-height: 2.75rem; display: flex; align-items: center; padding-block: 0.4rem; font-size: clamp(1.65rem, 8vw, 2.25rem); }
  #best-sellers .title-anim, #best-sellers .norma-stage .norma-title, #best-sellers .lasagna-stage .lasagna-title { max-width: 100vw; overflow: hidden; }
  #best-sellers .brand { left: 1rem; top: 1.25rem; }
  #best-sellers .cta--nav { font-size: 0.8rem; }
  #best-sellers .slide-nav { left: 1rem; right: 1rem; justify-content: space-between; }
  #best-sellers .slide-nav .btn-cartoon { min-height: 44px; padding: 0.7rem 1rem; font-size: 0.8rem; }
  #best-sellers .slide-nav .arrow-btn { width: 44px; height: 44px; flex-basis: 44px; }
  #best-sellers .indicators { bottom: 5.25rem; }
  .bs-scroll-track { padding-inline: 1rem; overscroll-behavior-x: contain; }
  .bs-card { width: min(82vw, 19rem); height: auto; min-height: 27rem; }
  .bs-card-image { height: clamp(15rem, 62vw, 18rem); }
  .bs-card-body { padding: 1rem; }
  #menu .grid, #trovarci .grid, #recensioni .grid, #faq .grid, footer .grid { grid-template-columns: minmax(0, 1fr) !important; }
  #trovarci .grid > * { min-width: 0; }
  #trovarci img { width: 100%; height: auto; object-fit: cover; }
  .menu-item, .dish-card { min-width: 0; }
  .menu-row { gap: 0.4rem; }
  .menu-dots { min-width: 0.75rem; }
  .menu-banner-note { white-space: normal; }
  #toast { width: min(calc(100% - 2rem), 24rem); }
}

/* === BEST SELLERS STATE-DRIVEN CAROUSEL === */
/* ===== BEST SELLERS — horizontal scroll carousel (React OfferCarousel style) ===== */

.bs-scroll-wrapper {
  position: relative;
  width: 100%;
  padding: 1rem 0 1.5rem;
}

.bs-scroll-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 1rem max(1rem, calc((100vw - 1400px) / 2)) 2rem;
  scrollbar-width: none; /* Firefox */
}
.bs-scroll-track::-webkit-scrollbar { display: none; }

.bs-card {
  flex: 0 0 auto;
  width: 300px;
  height: 440px;
  display: flex;
  flex-direction: column;
  background-color: var(--brand-yellow);
  border-radius: 1rem; /* rounded-2xl */
  overflow: hidden;
  box-shadow: 6px 6px 0 0 rgba(43, 21, 5, 0.2);
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 300ms ease;
  will-change: transform;
}
.bs-card:hover,
.bs-card:focus-visible {
  transform: translateY(-8px);
  box-shadow: 8px 12px 0 0 rgba(43, 21, 5, 0.25);
}
.bs-card:focus-visible {
  outline: 3px solid var(--brand-brown);
  outline-offset: 4px;
}

.bs-card-image {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--brand-yellow);
}
.bs-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 500ms ease;
}
.bs-card:hover .bs-card-image img,
.bs-card:focus-visible .bs-card-image img {
  transform: scale(1.08);
}

.bs-card-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background-color: var(--brand-brown);
  color: var(--paper);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 2px 2px 0 0 rgba(43, 21, 5, 0.2);
}

.bs-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  color: var(--dark-warm);
}

.bs-card-category {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.25rem 0.625rem;
  margin-bottom: 0.5rem;
  border-radius: 9999px;
  background-color: var(--brand-brown);
  color: var(--paper);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bs-card-body h3 {
  font-size: 1.25rem;
  line-height: 1.1;
  margin-bottom: 0.5rem;
  color: var(--brand-brown);
}

.bs-card-body p {
  flex: 1 1 auto;
  font-size: 0.85rem;
  line-height: 1.45;
  opacity: 0.85;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bs-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(43, 21, 5, 0.12);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand-brown);
}
.bs-card-footer svg {
  transition: transform 300ms ease;
}
.bs-card:hover .bs-card-footer svg,
.bs-card:focus-visible .bs-card-footer svg {
  transform: translateX(4px);
}

/* === Bottom nav: arrows + dots === */
.bs-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  padding-bottom: 1.5rem;
  z-index: 30;
  pointer-events: auto;
}

.bs-arrow {
  width: 2.75rem; /* 44px touch target minimum */
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--paper);
  color: var(--brand-brown);
  border: 2px solid var(--brand-brown);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: transform 220ms ease, background-color 220ms ease, opacity 220ms ease;
}
.bs-arrow:hover:not(:disabled),
.bs-arrow:focus-visible:not(:disabled) {
  transform: scale(1.1);
  background-color: var(--brand-yellow);
}
.bs-arrow:focus-visible { outline: 2px solid var(--brand-brown); outline-offset: 4px; }
.bs-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.bs-arrow svg { display: block; }

.bs-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.bs-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  background-color: var(--brand-yellow);
  color: var(--dark-warm);
  border: 2px solid var(--brand-brown);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 220ms ease, background-color 220ms ease;
}
.bs-cta:hover,
.bs-cta:focus-visible {
  transform: scale(1.05);
  background-color: var(--paper);
}
.bs-cta:focus-visible {
  outline: 2px solid var(--brand-brown);
  outline-offset: 4px;
}

.bs-dots {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.bs-dot {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--brand-brown);
  background-color: var(--paper);
  border-radius: 9999px;
  cursor: pointer;
  padding: 0;
  transition: background-color 220ms ease, width 220ms ease, transform 220ms ease;
}
.bs-dot:hover { transform: scale(1.15); }
.bs-dot:focus-visible { outline: 2px solid var(--brand-brown); outline-offset: 4px; }
.bs-dot[aria-selected="true"] {
  background-color: var(--brand-brown);
  width: 2.5rem;
}
.bs-dot.bs-dot-active { background-color: var(--brand-brown); }

/* === prefers-reduced-motion: instant rotation, no transitions === */
@media (prefers-reduced-motion: reduce) {
  .bs-card,
  .bs-card-image img,
  .bs-arrow,
  .bs-dot { transition: none !important; }
}

/* === MOBILE (≤1023px): keep horizontal scroll, slightly smaller cards === */
@media (max-width: 1023px) {
  .bs-scroll-track {
    padding: 1rem 1.5rem 2rem;
    gap: 1rem;
  }
  .bs-card {
    width: min(75vw, 280px);
    height: min(105vw, 420px);
  }
  .bs-card-image {
    height: 64%;
  }
  .bs-card-body h3 {
    font-size: 1.1rem;
  }
  .bs-card-body p {
    font-size: 0.8rem;
  }
  .bs-nav {
    padding-bottom: 1rem;
  }
}

/* Story: titolo in Anton (decisione sessione: un solo font display per
   tutti i titoli). Colonna testo allargata (lg:col-span-7, ~700px):
   "MANTECATA AD ARTE." entra su una riga, dimensione vicina al 72px originale. */
#story h2 {
  font-size: clamp(2rem, 4.2vw, 4.25rem);
}
#story h2 span {
  white-space: nowrap;
}

/* ============================================================
   STICKER PEEL (logo che si stacca/attacca allo scroll)
   Scoped sotto .pa-sticker — versione statica dello StickerPeel
   della sezione #story. Il peel ({ --sticker-peelback-current })
   è guidato da JS in src/script.ts allo scroll della pagina.
   Basato sul for della referenza (React Bits <StickerPeel/>).
   ============================================================ */
.pa-sticker {
  --sticker-rotate: -7deg;
  --sticker-p: 10px;
  --sticker-peelback-active: 45%;
  --sticker-peelback-current: 0%;
  --sticker-width: 116px;
  --sticker-shadow-opacity: 0.6;
  --sticker-lighting-constant: 0.12;
  --peel-direction: 0deg;
  --sticker-start: calc(-1 * var(--sticker-p));
  --sticker-end: calc(100% + var(--sticker-p));

  position: absolute;
  top: -30px;
  right: -14px;
  z-index: 30;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.pa-sticker * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.pa-sticker .sticker-container {
  position: relative;
  transform: rotate(var(--peel-direction));
  transform-origin: center;
}
.pa-sticker .sticker-main,
.pa-sticker .flap {
  will-change: clip-path;
}
.pa-sticker .sticker-main {
  clip-path: polygon(
    var(--sticker-start) var(--sticker-peelback-current),
    var(--sticker-end) var(--sticker-peelback-current),
    var(--sticker-end) var(--sticker-end),
    var(--sticker-start) var(--sticker-end)
  );
  transition: clip-path 0.4s ease-out;
  filter: url(#dropShadow-sp);
}
.pa-sticker .sticker-lighting {
  filter: url(#pointLight-sp);
}
.pa-sticker .flap {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: calc(
    -100% - 2 * var(--sticker-p) + 2 * var(--sticker-peelback-current) - 1px
  );
  clip-path: polygon(
    var(--sticker-start) var(--sticker-start),
    var(--sticker-end) var(--sticker-start),
    var(--sticker-end) var(--sticker-peelback-current),
    var(--sticker-start) var(--sticker-peelback-current)
  );
  transform: scaleY(-1);
  transition:
    clip-path 0.4s ease-out,
    top 0.4s ease-out;
}
.pa-sticker .flap-lighting {
  filter: url(#pointLightFlipped-sp);
}
.pa-sticker .flap-image {
  transform: rotate(var(--sticker-rotate));
  filter: url(#expandAndFill-sp);
}
.pa-sticker .sticker-image,
.pa-sticker .flap-image {
  width: var(--sticker-width, 116px);
  height: auto;
  display: block;
}
/* Il flap applica rotate(-peel-direction) ma qui peel-direction=0 quindi i contenuti
   restano ruotati --sticker-rotate come il main. */
.pa-sticker .sticker-main > *,
.pa-sticker .flap > * {
  transform: rotate(var(--sticker-rotate));
}
@media (prefers-reduced-motion: reduce) {
  .pa-sticker .sticker-main,
  .pa-sticker .flap {
    transition: none;
  }
}

/* =========================
   DIVISORI CURVI — tecnica Crave Burger (onda che sovrasta la sezione)
   L'onda sta in CIMA alla sezione nuova (top: 0), col fill = colore della
   sezione PRECEDENTE: il colore della sezione sopra invade dall'alto
   attraverso la curva. Il path riempie SOPRA la curva (L1536,0 L0,0 Z);
   sotto la curva (trasparente) si vede il bg della sezione attuale.
   SVG inline nel markup (niente creazione JS → zero ritardo di render,
   niente sezioni tranciate durante lo scroll). La timeline GSAP
   (1s/2s/1.8s + yoyo) anima solo le creste, senza deformare l'altezza.
   ========================= */
.crav-wave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  line-height: 0;
  overflow-x: clip;
  overflow-y: visible;
  pointer-events: none;
}
.crav-wave svg {
  display: block;
  width: 100%;
  height: 170px;
}
@media (max-width: 767px) {
  .crav-wave svg {
    height: clamp(64px, 14vw, 110px);
  }
}

/* Variante per l'onda in FONDO alla sezione slider: il colore della
   sezione sotto invade dal basso attraverso la curva. z-index alto
   così resta sopra lo sfondo ma non copre dots/nav (più in alto). */
.crav-wave--bottom {
  top: auto;
  bottom: 0;
  z-index: 10;
}
/* La riga finale dell'SVG dell'onda bottom può lasciare 1px trasparente
   (sub-pixel) dal quale traspare il video/contenuto sotto → linea chiara.
   Abbasso l'onda di 2px: copre l'ultima riga e invade (di proposito) la
   sezione successiva. */
.crav-wave--bottom {
  bottom: -2px;
}
/* Barra solida gialla sulle ultime righe dell'on-the-go: elimina definitivamente
   la linea bianca di giuntura (antialias dell'onda sul video frazionale 160vh). */
#on-the-go::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--brand-yellow);
  z-index: 11;
}


/* Dentro lo slider (hero → slider) l'onda sta SOTTO il contenuto (.hero
   ha z-index 1 e viene dopo nel DOM → vince sullo stesso z-index). */
#best-sellers .crav-wave {
  z-index: 1;
}

/* =========================
   MANTRA STAGE — delivery 标题 A/B sfalsato + connettore tratteggiato
   stile Crave (portato dal bench v11, geometria % = fluida).
   ========================= */
.mantra-stage {
  position: relative;
  margin: 22px 0 0;
  height: clamp(220px, 26vw, 320px);
}
.mantra-stage .mantra-pin {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: var(--paper);
  border: 3.5px solid var(--brand-brown);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
  z-index: 2;
}
.mantra-stage .mantra-seg {
  position: absolute;
  opacity: 0.6;
}
.mantra-stage .mantra-h {
  border-top: 3px dashed var(--brand-brown);
}
.mantra-stage .mantra-v {
  border-left: 3px dashed var(--brand-brown);
}
.mantra-stage .mantra-word {
  position: absolute;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: "Anton", "Impact", sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3.2vw, 2.9rem);
  letter-spacing: 0.02em;
  line-height: 1;
  z-index: 3;
  opacity: 0.62;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Arrivo dello scooter: la parola si "illumina" (+30% di leggibilità):
   alone caldo crema + scala maggiore, per far risaltare il testo attivo. */
.mantra-stage .mantra-word.is-active {
  opacity: 1;
  transform: translateY(-50%) scale(1.07);
  text-shadow:
    0 0 20px rgba(255, 246, 214, 0.55),
    0 0 42px rgba(255, 246, 214, 0.3);
  transition: opacity 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}
/* Percorso SVG scroll-driven (sostituisce i segmenti div) */
.mantra-stage .mantra-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}
.mantra-stage .mantra-path path {
  stroke: var(--brand-brown);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 9 13;
  opacity: 0.62;
}
/* Ovali decorative attorno alle parole (statiche, dietro al testo) */
.mantra-stage .mantra-loop {
  fill: none;
  stroke: var(--brand-brown);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 9 13;
  opacity: 0.45;
}
/* Scooter che cavalca il path (posizionato via JS con getPointAtLength) */
/* Scooter che cavalca il path (icona PNG approvata; posizionato via JS,
   flip orizzontale quando la tangente punta a sinistra) */
.mantra-stage .mantra-scooter {
  position: absolute;
  left: 0;
  top: 0;
  width: 62px;
  height: 62px;
  z-index: 4;
  will-change: transform;
  transform: translate(-100px, -100px);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.12));
  pointer-events: none;
}
.mantra-stage .mantra-scooter img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}
.mantra-stage .mantra-pin {
  transition: background 0.3s ease, transform 0.3s ease;
}
.mantra-stage .mantra-pin.is-active {
  background: var(--brand-bronze);
  transform: scale(1.22);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.15),
    0 0 14px rgba(191, 113, 21, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .mantra-stage .mantra-word,
  .mantra-stage .mantra-word.is-active {
    opacity: 1;
    transform: translateY(-50%);
  }
}
/* Pin (snodi) */
.mantra-p1 { left: 3%;  top: 24%; }
.mantra-p2 { left: 55%; top: 38%; }
.mantra-p3 { left: 3%;  top: 62%; }
.mantra-p4 { left: 55%; top: 80%; }
/* Parole (colonna A scura / colonna B marrone, B sfalsata +14%) */
.mantra-w1 { left: calc(3% + 26px);  top: 24%; color: var(--dark-warm); }
.mantra-w2 { left: calc(55% + 26px); top: 38%; color: var(--brand-brown); }
.mantra-w3 { left: calc(3% + 26px);  top: 62%; color: var(--dark-warm); }
.mantra-w4 { left: calc(55% + 26px); top: 80%; color: var(--brand-brown); }
/* Segmenti tratteggiati (percorso a serpente P1→P2→P3→P4) — LEGACY,
   sostituiti dal path SVG unico; regole mantenute per il bench. */
.mantra-s1 { left: 3%;  top: 24%; width: 52%; }
.mantra-s2 { left: 55%; top: 24%; height: 14%; }
.mantra-s3 { left: 3%;  top: 62%; width: 52%; }
.mantra-s4 { left: 3%;  top: 62%; height: 18%; }
.mantra-s5 { left: 3%;  top: 80%; width: 52%; }
/* Mobile: colonna destra a 48% + font ridotto (no overflow a 320px) */
@media (max-width: 600px) {
  .mantra-stage { height: clamp(200px, 58vw, 240px); }
  .mantra-stage .mantra-word { font-size: clamp(1.6rem, 6.5vw, 2rem); }
  .mantra-stage .mantra-scooter { width: 40px; height: 40px; }
  .mantra-p2, .mantra-p4, .mantra-s2 { left: 48%; }
  .mantra-s1, .mantra-s3, .mantra-s5 { width: 45%; }
  .mantra-w2, .mantra-w4 { left: calc(48% + 24px); }
  .mantra-w1, .mantra-w3 { left: calc(3% + 24px); }
}
/* L'onda in FONDO alla sezione slider sta sopra lo sfondo (nessun
   contenuto lì sotto: dots/nav sono più in alto dentro .hero). */
#best-sellers .crav-wave--bottom {
  z-index: 10;
}

/* Il contenuto delle sezioni con onda parte SOTTO l'onda: padding-top
   extra. #best-sellers escluso: il suo .hero è 100vh centrato e l'onda
   sta in cima senza spingere il contenuto. */
section:has(.crav-wave):not(#best-sellers) {
  padding-top: calc(3rem + 170px) !important;
}
@media (max-width: 767px) {
  section:has(.crav-wave):not(#best-sellers) {
    padding-top: calc(2.5rem + 110px) !important;
  }
}

/* Trovarci → footer: stesso colore, niente onda, ma la card immagine non
   deve finire tranciata sul bordo del footer → padding-bottom extra. */
#trovarci {
  padding-bottom: 7rem !important;
}

/* =========================
   REVIEW SCROLL-STACK — le 3 card (dimensioni originali della griglia
   md:grid-cols-3) partono impilate al centro e cadono una alla volta.
   .rs-active (JS, solo ≥768px + no reduced-motion): stage = containing
   block con altezza = riga originale; le card sono assolute nelle stesse
   colonne della griglia (stessa width = stessa altezza, zero deformazione).
   Mobile / no-JS / reduced-motion: griglia statica (default). ========= */
#review-stack.rs-active {
  display: block;
  position: relative;
}
#review-stack.rs-active .review-card {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  height: 100%;
  width: calc((100% - 48px) / 3);
  will-change: transform;
}
#review-stack.rs-active .review-card[data-col="1"] {
  left: calc((100% - 48px) / 3 + 24px);
}
#review-stack.rs-active .review-card[data-col="2"] {
  left: calc(2 * (100% - 48px) / 3 + 48px);
}

/* =========================
   RECENSIONI — sfondo brand-brown (#953E0F, stesso della Tecnica).
   I bordi .cb-lg marroni si perdono sul marrone: ombra cartoon gialla
   per tenere lo sticker look. Dimensioni, rounding e layout NON cambiano. ========== */
#recensioni .review-card.cb-lg {
  box-shadow: 6px 6px 0 0 var(--brand-yellow);
}
#recensioni .review-card.cb-lg:hover {
  transform: translateY(-2px);
  box-shadow: 8px 8px 0 0 var(--brand-yellow);
}

/* =========================
   REVIEW CYCLE — hit-area invisibile estesa (~+20% attorno alle card).
   #review-hit è trasparente e sta SOPRA le card (z 5 > z 1-3 di GSAP) così
   hover e wheel arrivano sempre a lei (le card non sono cliccabili).
   Gli eventi li ascolta solo JS (≥768px, no reduced-motion). ========== */
#review-cycle {
  position: relative;
}
#review-hit {
  position: absolute;
  inset: -56px -72px;
  z-index: 5;
  background: transparent;
  border: 0;
  pointer-events: auto;
  touch-action: pan-y;
}
/* Mini-recensioni (solo voto/prezzo): chip pill */
.rd-chip {
  display: inline-flex;
  align-items: center;
  border: 2px solid rgba(149, 62, 15, 0.18);
  background: rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand-brown);
  letter-spacing: 0.02em;
}

/* === Sistema bottoni a 3 taglie (fix: scala unica, 09/2026) ===
   btn-sm 14px · btn-md 16px · btn-lg 18px. Le utility Tailwind di
   padding/size sono state rimosse dal markup: qui l'unica fonte. */
.btn-cartoon.btn-sm { font-size: 0.875rem; padding: 0.625rem 1.25rem; }
.btn-cartoon.btn-md { font-size: 1rem; padding: 0.875rem 1.5rem; }
.btn-cartoon.btn-lg { font-size: 1.125rem; padding: 1rem 2rem; }