/* ==========================================================================
   VITZIO - Foglio di stile condiviso
   Tema scuro/oro coerente con l'identita del locale (logo "VITZ'O").
   ========================================================================== */

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

:root {
  --black: #0a0a0a;
  --dark: #111111;
  --card: #181818;
  --gold: #c9a96e;
  --gold-light: #e8cc9a;
  --ember: #f2900a;
  --ember-light: #ffab3d;
  --cream: #f5f0e8;
  --white: #ffffff;
  --gray: #888888;
  --border: rgba(201,169,110,0.2);
  --wa: #25D366;
  --ease: cubic-bezier(.16,.84,.32,1);
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body {
  background: var(--black);
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  position: relative;
}

/* film grain, site-wide texture so the dark palette reads tactile, not a flat template fill */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }
a { color: inherit; }

/* custom cursor - desktop precise-pointer devices only */
@media (pointer: fine) {
  body.has-cursor { cursor: none; }
  body.has-cursor a, body.has-cursor button { cursor: none; }
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
    border-radius: 50%; transform: translate(-50%, -50%);
    mix-blend-mode: difference;
  }
  .cursor-dot { width: 6px; height: 6px; background: var(--cream); transition: opacity .2s; }
  .cursor-ring { width: 34px; height: 34px; border: 1px solid var(--cream); transition: width .25s var(--ease), height .25s var(--ease), opacity .2s, border-color .25s; }
  .cursor-ring.hover { width: 56px; height: 56px; border-color: var(--ember); }
}

/* clip-path word reveal, used on headlines instead of a generic fade */
/* line-height generoso sul singolo "word": i titoli hanno un line-height molto stretto (per
   l'impaginazione a più righe), che altrimenti farebbe tagliare via il box overflow:hidden
   i discendenti delle lettere (g, p, y...) insieme all'animazione di comparsa */
.split-reveal .word { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.2; }
.split-reveal .word span { display: inline-block; transform: translateY(115%); transition: transform .7s var(--ease); }
.split-reveal.in .word span { transform: translateY(0); }

.container { max-width: 1400px; margin: 0 auto; padding: 0 48px; }

/* NAV */
nav#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  padding: 22px 48px;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(10,10,10,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background .4s, padding .4s, border-color .4s;
}
nav#navbar.scrolled { background: rgba(10,10,10,.97); backdrop-filter: blur(14px); padding: 14px 48px; border-color: var(--border); }
.nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo-badge { display: inline-flex; align-items: center; flex-shrink: 0; }
/* flex-shrink/max-width: con la navbar affollata (~1024px) il logo veniva compresso in larghezza e deformato */
.logo-badge img { height: 68px; width: auto; max-width: none; flex-shrink: 0; display: block; transition: height .4s; }
nav#navbar.scrolled .logo-badge img { height: 54px; }
.nav-right { display: flex; align-items: center; gap: 22px; }

/* social diretti in navbar */
.nav-social { display: flex; gap: 8px; }
.nav-social a {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; transition: border-color .2s;
}
.nav-social a:hover { border-color: var(--ember); }
.nav-social svg { width: 14px; height: 14px; fill: var(--cream); stroke: none; transition: fill .2s; }
.nav-social a:hover svg { fill: var(--ember); }

/* Menu orizzontale in navbar — solo desktop (sopra il breakpoint responsive
   sotto). Niente hamburger li': le 8 voci stanno tutte in riga. */
.nav-menu-inline {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px);
  list-style: none; margin: 0; padding: 0;
}
.nav-menu-link {
  font-family: 'Inter', sans-serif; font-size: 13px; letter-spacing: .5px;
  color: var(--cream); text-decoration: none; white-space: nowrap;
  transition: color .2s;
}
.nav-menu-link:hover, .nav-menu-link.active { color: var(--ember); }

/* CTA "Prenota Ora" — in navbar prima dei social su desktop, dentro
   l'overlay su responsive (vedi .nav-overlay-cta sotto). Variante compatta
   di .btn-outline. */
.nav-cta {
  border: 1px solid rgba(245,240,232,.4); color: var(--cream);
  padding: 10px 22px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 500; font-family: 'Inter', sans-serif; white-space: nowrap;
  text-decoration: none; display: inline-block; transition: border-color .2s, color .2s, transform .2s;
}
.nav-cta:hover { border-color: var(--ember); color: var(--ember); transform: translateY(-2px); }

/* Hamburger — nascosto di default, compare solo sotto il breakpoint
   responsive (media query in fondo a questo blocco). Icona fissa (nessuna
   animazione a X): l'apertura/chiusura è gestita dalla classe .open
   sull'overlay, stesso bottone fa da toggle in entrambi i versi. */
.nav-menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 0;
}
.nav-menu-btn-icon { position: relative; width: 24px; height: 14px; flex-shrink: 0; }
.nav-menu-btn-icon span {
  position: absolute; left: 0; width: 100%; height: 1px; background: var(--cream);
  transition: transform .35s var(--ease), top .35s var(--ease), background-color .2s;
}
.nav-menu-btn-icon span:first-child { top: 0; }
.nav-menu-btn-icon span:last-child { top: 100%; }
.nav-menu-btn[aria-expanded="true"] .nav-menu-btn-icon span:first-child { top: 50%; transform: rotate(45deg); }
.nav-menu-btn[aria-expanded="true"] .nav-menu-btn-icon span:last-child { top: 50%; transform: rotate(-45deg); }
.nav-menu-btn:hover .nav-menu-btn-icon span { background-color: var(--ember); }

/* Overlay fullscreen — solo responsive. Versione semplificata rispetto al
   vecchio menu desktop (niente anteprima immagine all'hover: non ha senso
   su touch), stessi principi di leggibilità: altezza legata al viewport
   (100dvh), entrata a cascata dei link. */
.nav-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  width: 100vw; height: 100vh; height: 100dvh;
  background: rgba(8,8,8,.98); backdrop-filter: blur(20px);
  overflow-y: auto; overscroll-behavior: contain;
}
.nav-overlay.open { display: flex; }
.nav-overlay-inner {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 32px; min-height: 0; padding: clamp(84px, 12vh, 140px) 32px clamp(20px, 3vh, 40px);
}
.nav-overlay-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
.nav-overlay-link {
  display: block; padding: 10px 4px; text-decoration: none; color: var(--cream);
  font-family: 'Montserrat', sans-serif; font-size: clamp(22px, 6vw, 34px); font-weight: 500;
  opacity: 0; transform: translateY(16px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), color .25s;
}
.nav-overlay.open .nav-overlay-link { opacity: 1; transform: translateY(0); }
.nav-overlay-links li:nth-child(1) .nav-overlay-link { transition-delay: .05s; }
.nav-overlay-links li:nth-child(2) .nav-overlay-link { transition-delay: .1s; }
.nav-overlay-links li:nth-child(3) .nav-overlay-link { transition-delay: .15s; }
.nav-overlay-links li:nth-child(4) .nav-overlay-link { transition-delay: .2s; }
.nav-overlay-links li:nth-child(5) .nav-overlay-link { transition-delay: .25s; }
.nav-overlay-links li:nth-child(6) .nav-overlay-link { transition-delay: .3s; }
.nav-overlay-links li:nth-child(7) .nav-overlay-link { transition-delay: .35s; }
.nav-overlay-links li:nth-child(8) .nav-overlay-link { transition-delay: .4s; }
.nav-overlay-link:hover, .nav-overlay-link.active { color: var(--ember); }
.nav-overlay-cta { opacity: 0; transform: translateY(16px); transition: opacity .4s var(--ease) .45s, transform .4s var(--ease) .45s; }
.nav-overlay.open .nav-overlay-cta { opacity: 1; transform: translateY(0); }
.nav-overlay-social { display: flex; gap: 10px; opacity: 0; transition: opacity .4s var(--ease) .5s; }
.nav-overlay.open .nav-overlay-social { opacity: 1; }
.nav-overlay-social a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; text-decoration: none; transition: border-color .2s;
}
.nav-overlay-social a:hover { border-color: var(--ember); }
.nav-overlay-social svg { width: 16px; height: 16px; fill: var(--cream); stroke: none; transition: fill .2s; }
.nav-overlay-social a:hover svg { fill: var(--ember); }

/* Breakpoint responsive: qui, e SOLO qui, l'hamburger è la soluzione
   corretta (confermato dal cliente) — menu orizzontale + CTA inline
   nascosti, hamburger + overlay fullscreen al loro posto. */
@media (max-width: 900px) {
  .nav-menu-inline { display: none; }
  .nav-right > .nav-cta { display: none; }
  .nav-social { display: none; }
  .nav-menu-btn { display: flex; }
}
/* Fascia intermedia (tablet landscape / laptop piccoli): le 8 voci + CTA + social non stanno in riga e uscivano
   dallo schermo. Si compatta la barra (social nascosti, spaziature e carattere ridotti) senza spostare il
   breakpoint dell'hamburger confermato dal cliente. */
@media (min-width: 901px) and (max-width: 1280px) {
  .nav-menu-inline { gap: clamp(10px, 1.5vw, 18px); }
  .nav-menu-link { font-size: 12px; letter-spacing: .2px; }
  .nav-cta { padding: 9px 14px; letter-spacing: 1.4px; }
}
@media (min-width: 901px) and (max-width: 1240px) { .nav-social { display: none; } }
@media (min-width: 901px) and (max-width: 960px) { .nav-right > .nav-cta { display: none; } }

/* WHATSAPP FLOTTANTE - sempre presente, in ogni pagina */
.wa-float {
  position: fixed; right: 26px; bottom: 26px; z-index: 150;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
  text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s;
}
.wa-float::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--wa);
  z-index: -1; animation: waPulse 2.6s ease-out infinite;
}
@keyframes waPulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.9); opacity: 0; } }
.wa-float svg { width: 28px; height: 28px; fill: white; }
.wa-float:hover { transform: scale(1.08); box-shadow: 0 10px 28px rgba(37,211,102,.5); }
@media (max-width: 600px) {
  .wa-float { right: 18px; bottom: 18px; width: 52px; height: 52px; }
  .wa-float svg { width: 25px; height: 25px; }
}

/* elementi di testata riusati nella colonna laterale del dossier */
.breadcrumb { font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.breadcrumb a { color: var(--gray); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }
.page-title {
  font-family: 'Montserrat', sans-serif; font-size: clamp(38px, 4vw, 60px);
  letter-spacing: -.02em; line-height: .98; color: var(--white); font-weight: 600; margin-bottom: 20px;
}
.page-title em { font-style: italic; color: var(--gold); }
.page-sub { font-size: 15.5px; color: rgba(245,240,232,.68); line-height: 1.8; }

/* HERO home - asymmetric, bottom-left composition instead of the generic centered template hero */
#hero {
  height: 100vh; min-height: 640px; position: relative; display: flex; align-items: flex-end; overflow: hidden;
  /* Bug reale: il testo dell'hero (.hero-content) sta visivamente sopra
     l'immagine (z-index più alto, vedi sotto) - se il trascinamento del
     comparatore partiva anche di poco fuori dal pomello, il browser avviava
     la selezione nativa del testo sotto al cursore invece di muovere il
     divisore. L'hero è decorativo/di apertura pagina, non serve selezionare
     il suo testo. */
  user-select: none; -webkit-user-select: none;
  /* Touch: il drag orizzontale arriva a JS (Pointer Events), lo scroll verticale della pagina resta libero.
     Senza questo il browser prendeva il gesto come pan e mandava pointercancel: il divisore si muoveva solo
     trascinando il pomello. */
  touch-action: pan-y;
}
/* Mobile: 100vh include la barra indirizzi e l'hero finiva sotto la piega */
@supports (height: 100svh) { #hero { height: 100svh; } }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); animation: slowzoom 22s ease-in-out infinite alternate; }
@keyframes slowzoom { from { transform: scale(1.05); } to { transform: scale(1.14); } }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(10,10,10,.25) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.97) 100%); }

/* Hero a comparazione (widget-hero.php) - due immagini divise da un cursore
   trascinabile invece di un singolo sfondo fisso, su richiesta del cliente
   (stile "prima/dopo" ma senza le etichette testuali). L'immagine di
   sinistra (--a) è ritagliata con clip-path in base alla variabile CSS
   --hc-pos (aggiornata da JS, vedi assets/js/main.js), quella di destra (--b)
   resta sempre a tutto schermo sotto di essa. */
/* NIENT'ALTRO che position/inset qui - niente z-index: un z-index diverso da
   auto creerebbe un nuovo stacking context che "intrappola" il divisore
   (.hero-compare-divider, z-index:2) al suo interno, impedendogli di finire
   sopra .hero-overlay (z-index:1) e bloccando così sia il trascinamento sia
   il click sulle frecce - bug reale riscontrato: il cursore restava visibile
   (semitrasparente attraverso il gradiente) ma non intercettava più alcun
   evento del puntatore. */
.hero-compare { position: absolute; inset: 0; cursor: ew-resize; touch-action: pan-y; }
.hero-compare-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-compare-img--a { clip-path: inset(0 calc(100% - var(--hc-pos)) 0 0); }
.hero-compare-divider {
  position: absolute; top: 0; bottom: 0; left: var(--hc-pos); z-index: 2;
  transform: translateX(-50%); display: flex; align-items: center; justify-content: center;
  touch-action: pan-y; cursor: ew-resize;
  user-select: none; -webkit-user-select: none;
}
/* Durante il trascinamento (classe aggiunta via JS su <body>, vedi
   assets/js/main.js) il movimento rapido del puntatore sopra il testo
   dell'hero avviava la selezione nativa del browser invece di spostare solo
   il divisore - bug reale, risolto disabilitando la selezione su tutto il
   documento per la durata del drag, non solo sul divisore stesso. */
body.hero-compare-dragging { user-select: none; -webkit-user-select: none; }
.hero-compare-divider::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: rgba(255,255,255,.55); transform: translateX(-50%);
}
.hero-compare-handle {
  position: relative; width: 54px; height: 54px; border-radius: 50%; background: var(--ember);
  display: flex; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  user-select: none; -webkit-user-select: none;
}
.hero-compare-arrow {
  background: none; border: none; padding: 8px; margin: 0; color: var(--black);
  font-size: 13px; line-height: 1; cursor: pointer;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.hero-compare-arrow:hover { color: var(--white); }
.hero-compare-arrow, .hero-compare-handle, .hero-compare-divider { -webkit-tap-highlight-color: transparent; }
/* Schermi piccoli: l'hero cresce col contenuto invece di tagliarlo (il titolo finiva sotto la navbar) */
@media (max-width: 900px) {
  #hero { height: auto; min-height: 100vh; padding-top: 140px; box-sizing: border-box; }
  @supports (height: 100svh) { #hero { min-height: 100svh; } }
}
/* Il testo dell'hero sta sopra il divisore: non deve intercettare i tocchi destinati al pomello e alle frecce. */
.hero-content { pointer-events: none; }
.hero-content a, .hero-content button { pointer-events: auto; }
@media (max-width: 640px) {
  .hero-compare-handle { width: 52px; height: 52px; }
  .hero-compare-arrow { font-size: 12px; padding: 12px 8px; }
}
.hero-index {
  position: absolute; right: 40px; top: 0; bottom: 120px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl;
  font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 6px; text-transform: uppercase; color: var(--ember);
}
.hero-index::before { content: ''; display: block; width: 1px; height: 60px; background: var(--ember); margin-bottom: 20px; opacity: .6; }
.hero-content { position: relative; z-index: 2; max-width: 940px; padding: 0 64px 80px; }
.hero-label { font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; display: block; }
.hero-title { font-family: 'Montserrat', sans-serif; font-size: clamp(28px, 4.6vw, 68px); letter-spacing: -.02em; line-height: 1.05; color: var(--white); font-weight: 600; margin-bottom: 22px; }
.hero-title em { font-style: italic; color: var(--gold); font-weight: 400; }
.hero-sub { font-size: 17px; font-weight: 300; color: rgba(245,240,232,.8); max-width: 520px; margin: 0 0 40px; line-height: 1.65; }
.hero-sub p { margin: 0; }
.hero-sub p + p { margin-top: 10px; }
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-height: 780px) {
  .hero-title { font-size: clamp(24px, 4vw, 46px); margin-bottom: 14px; }
  .hero-content { padding-bottom: 56px; }
  .hero-label { margin-bottom: 12px; }
  .hero-sub { margin-bottom: 32px; }
}
.btn-primary {
  background: var(--ember); color: var(--black); padding: 16px 36px;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
  text-decoration: none; transition: background .2s, transform .2s; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; display: inline-block;
}
.btn-primary:hover { background: var(--ember-light); transform: translateY(-2px); }
.btn-outline {
  border: 1px solid rgba(245,240,232,.4); color: var(--cream); padding: 16px 36px;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500;
  text-decoration: none; transition: border-color .2s, transform .2s, color .2s; display: inline-block;
}
.btn-outline:hover { border-color: var(--ember); color: var(--ember); transform: translateY(-2px); }
.btn-wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--wa); color: white; padding: 14px 28px;
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
  text-decoration: none; transition: background .2s;
}
.btn-wa:hover { background: #1ebe5d; }
.btn-wa svg { width: 16px; height: 16px; fill: white; }
.btn-small { padding: 10px 20px; font-size: 11px; }

/* MARQUEE */
.marquee-wrap { background: var(--ember); padding: 14px 0; overflow: hidden; border-top: 1px solid var(--ember); border-bottom: 1px solid var(--ember); }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee-track span { font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--black); font-weight: 600; padding: 0 32px; white-space: nowrap; }
.marquee-dot { color: var(--black); opacity: .4; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* SECTION BASE */
section { padding: 110px 48px; }
.section-label { font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; display: block; }
.section-title { font-family: 'Montserrat', sans-serif; font-size: clamp(34px, 5.4vw, 78px); letter-spacing: -.02em; line-height: .98; color: var(--white); font-weight: 600; margin-bottom: 22px; }
.section-title em { font-style: italic; color: var(--gold); }
.section-sub { font-size: 16px; font-weight: 300; color: rgba(245,240,232,.62); line-height: 1.8; max-width: 640px; }
.section-header { max-width: 1400px; margin: 0 auto 64px; padding: 0 48px; }
.section-header.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.text-link { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; white-space: nowrap; }
.alt-bg { background: var(--dark); }

.philosophy-chip { border: 1px solid var(--border); padding: 10px 20px; font-family: 'Montserrat', sans-serif; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }

/* SHOP - catalogo con indice categorie sempre visibile a sinistra + griglia a destra: la
   convenzione e-commerce resta (obbligatoria per l'usabilità), ma l'indice è tipografico -
   nomi in Montserrat, filetti sottili - coerente col linguaggio editoriale del resto del sito. */
.shop-layout { max-width: 1500px; margin: 0 auto; padding: 150px 48px 110px; display: grid; grid-template-columns: 300px 1fr; gap: 70px; align-items: start; }
.shop-index { position: sticky; top: 110px; padding-right: 8px; }
.shop-index-title { font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.shop-index-all {
  display: block; padding: 13px 0; margin-bottom: 4px; font-family: 'Montserrat', sans-serif; font-size: 16px;
  font-weight: 500; color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--border); transition: color .2s;
}
.shop-index-all:hover, .shop-index-all.active { color: var(--ember); }
.shop-index-tree { display: flex; flex-direction: column; margin-bottom: 30px; }
.shop-index-group { border-top: 1px solid var(--border); }
/* Bug reale: .shop-index-all (sopra, "Tutti i prodotti") ha gia' un suo
   border-bottom - sul primo gruppo questo border-top gli si affiancava
   subito dopo, due righe da 1px vicinissime che sembravano una riga sola
   doppia/spessa. */
.shop-index-group:first-child { border-top: none; }
.shop-index-group:last-child { border-bottom: 1px solid var(--border); }
.shop-index-cat {
  display: flex; align-items: center; gap: 14px; padding: 14px 0; text-decoration: none;
}
.shop-index-cat-img { width: 52px; height: 52px; object-fit: cover; flex-shrink: 0; filter: brightness(.8) saturate(1.05); transition: filter .2s; }
.shop-index-cat:hover .shop-index-cat-img, .shop-index-cat.active .shop-index-cat-img { filter: brightness(1.05) saturate(1.1); }
.shop-index-cat-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shop-index-cat-name { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 500; color: var(--cream); transition: color .2s; }
.shop-index-cat:hover .shop-index-cat-name, .shop-index-cat.active .shop-index-cat-name { color: var(--ember); }
.shop-index-count { font-family: 'Inter', sans-serif; font-size: 10.5px; color: var(--gray); }
.shop-index-sub { display: flex; flex-direction: column; padding: 0 0 15px 66px; }
.shop-index-sub a {
  font-size: 13px; color: var(--gray); text-decoration: none; padding: 6px 0 6px 15px;
  border-left: 1px solid var(--border); transition: color .2s, border-color .2s;
}
.shop-index-sub a:hover, .shop-index-sub a.active { color: var(--ember); border-left-color: var(--ember); }
.shop-index-note { padding-top: 26px; border-top: 1px solid var(--border); font-size: 13px; color: var(--gray); line-height: 1.75; }
.shop-index-note .btn-outline { margin-top: 16px; width: 100%; text-align: center; }

.shop-meta-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 10px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.shop-meta-count { font-family: 'Montserrat', sans-serif; font-style: italic; font-size: 15px; color: var(--gray); }
.shop-sort {
  background: var(--black); border: 1px solid var(--border); color: var(--cream);
  padding: 10px 14px; font-size: 12px; font-family: 'Inter', sans-serif; letter-spacing: .3px;
  cursor: pointer; outline: none; transition: border-color .2s;
}
.shop-sort:focus, .shop-sort:hover { border-color: var(--ember); }
/* le opzioni del <select> nativo non ereditano lo sfondo scuro in tutti i browser: senza questa
   regola il menu a tendina appare bianco con testo appena leggibile */
.shop-sort option { background: var(--black); color: var(--cream); }

.shop-pagination { display: flex; gap: 22px; justify-content: center; align-items: center; margin: 60px 0 8px; }
.shop-pagination a {
  font-family: 'Montserrat', sans-serif; font-size: 17px; color: var(--gray);
  text-decoration: none; transition: color .2s;
}
.shop-pagination a:hover { color: var(--cream); }
.shop-pagination a.active { color: var(--ember); font-style: italic; }
.shop-pagination a.pg-arrow { font-size: 20px; color: var(--gold); }
.shop-pagination a.disabled { opacity: .25; pointer-events: none; }

@media (max-width: 1000px) {
  .shop-layout { grid-template-columns: 1fr; padding-top: 130px; }
  .shop-index { position: static; border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 10px; }
}

/* CARD GRID GENERICO */
.card-grid { max-width: 1400px; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* PRODOTTI - "vetrina": due colonne di scatti grandi, prezzo come un vero cartellino ruotato
   sull'angolo della foto (come in una vetrina di pasticceria), nome enorme in Montserrat sotto.
   Sostituisce del tutto la card da shop generico a tre colonne. */
.vetrina-grid { max-width: 1400px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px 48px; }
.vetrina-card { text-decoration: none; display: block; }
.vetrina-card-img-wrap { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--card); }
.vetrina-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s; filter: brightness(.92); }
.vetrina-card:hover .vetrina-card-img { transform: scale(1.05); filter: brightness(.76); }
.vetrina-price-tag {
  position: absolute; top: 20px; right: 20px; z-index: 2; transform: rotate(-3deg);
  background: var(--ember); color: var(--black); font-family: 'Montserrat', sans-serif; font-weight: 600;
  padding: 9px 16px; font-size: 13.5px; line-height: 1.2; box-shadow: 0 6px 16px rgba(0,0,0,.4);
  transition: transform .25s var(--ease);
}
.vetrina-card:hover .vetrina-price-tag { transform: rotate(0deg) scale(1.04); }
.vetrina-card-body { padding: 22px 4px 0; }
.vetrina-num { display: block; font-family: 'Montserrat', sans-serif; font-style: italic; font-size: 12px; color: var(--ember); margin-bottom: 8px; }
.vetrina-card-body h3 { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: clamp(21px, 2.1vw, 27px); color: var(--white); line-height: 1.15; margin-bottom: 10px; transition: color .2s; }
.vetrina-card:hover .vetrina-card-body h3 { color: var(--ember); }
.vetrina-card-body p { font-size: 14px; color: var(--gray); line-height: 1.7; max-width: 420px; }
@media (max-width: 900px) {
  .vetrina-grid { grid-template-columns: 1fr; gap: 46px; }
}

/* prodotti correlati - card compatta, per la fascia in fondo alla scheda prodotto */
.prod-card { text-decoration: none; display: block; }
.prod-card-img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--card); transition: transform .5s var(--ease); }
.prod-card:hover .prod-card-img { transform: scale(1.025); }
.prod-card-body { padding: 16px 2px 0; }
.prod-card-body h3 { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 17px; color: var(--cream); margin-bottom: 6px; line-height: 1.3; transition: color .2s; }
.prod-card:hover .prod-card-body h3 { color: var(--ember); }
.prod-card-body .prod-price { font-size: 13.5px; color: var(--gold); font-weight: 500; }
.badge-soon { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--black); background: var(--ember); padding: 4px 10px; margin-bottom: 10px; }
.badge-out { display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray); border: 1px solid var(--border); padding: 4px 10px; margin-bottom: 10px; }

/* subnav */
.subnav { max-width: 1400px; margin: 0 auto 40px; padding: 0 48px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12px; letter-spacing: 1px; color: var(--gray); }
.subnav a { color: var(--gold); text-decoration: none; }
.subnav a:hover { text-decoration: underline; }
.subnav .sep { color: var(--border); }

/* tabs eventi */
.tabs { display: flex; gap: 8px; margin-bottom: 44px; }
.tab-btn { background: none; border: 1px solid var(--border); color: var(--gray); padding: 10px 22px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; font-family: 'Inter', sans-serif; transition: .2s; white-space: nowrap; }
.tab-btn.active, .tab-btn:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 420px) {
  .tab-btn { padding: 10px 14px; font-size: 10px; letter-spacing: 1px; }
}

/* EVENTI - "agenda": lista unica, senza foto, dove la data è l'unico elemento grafico -
   numeri scultorei in Montserrat, tanto nero intorno. Il primo evento (il prossimo) è semplicemente
   più grande, non un componente a parte: un solo sistema tipografico, nessun collage di widget. */
.agenda { max-width: 1160px; margin: 0 auto; }
.agenda-row {
  display: flex; align-items: center; gap: 40px; padding: 40px 4px; border-top: 1px solid var(--border);
  text-decoration: none; color: inherit; transition: padding-left .35s var(--ease);
}
.agenda .agenda-row:last-child { border-bottom: 1px solid var(--border); }
.agenda-row:hover { padding-left: 18px; }
.agenda-date { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 54px; color: var(--gold); line-height: .82; flex-shrink: 0; width: 104px; transition: color .25s; }
.agenda-row:hover .agenda-date { color: var(--ember); }
.agenda-date small { display: block; font-family: 'Montserrat', sans-serif; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); font-weight: 500; margin-top: 10px; }
.agenda-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.agenda-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ember); }
.agenda-title { font-family: 'Montserrat', sans-serif; font-size: clamp(21px, 2.4vw, 30px); color: var(--white); font-weight: 500; line-height: 1.2; }
.agenda-meta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.agenda-time { font-size: 13px; color: var(--gray); }
.agenda-tag { font-family: 'Montserrat', sans-serif; font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray); border: 1px solid var(--border); padding: 5px 12px; }
.agenda-row.passato { opacity: .42; }
.agenda-row.passato:hover { opacity: .75; }

/* il primo elemento (prossimo evento) prende più spazio tipografico, non un componente diverso */
.agenda-row.featured { padding: 56px 4px 60px; }
.agenda-row.featured .agenda-date { font-size: 104px; width: 190px; line-height: .8; }
.agenda-row.featured .agenda-title { font-size: clamp(30px, 4.2vw, 50px); }

@media (max-width: 700px) {
  .agenda-row { gap: 22px; padding: 30px 0; }
  .agenda-date { font-size: 38px; width: 68px; }
  .agenda-row.featured { padding: 40px 0 44px; }
  .agenda-row.featured .agenda-date { font-size: 62px; width: 100px; }
}

/* EVENTI - dettaglio evento: editoriale, con la fotografia riservata a questo momento */
.event-detail { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
/* Bug reale corretto: .event-detail-img era a piena larghezza sopra il
   contenuto con aspect-ratio 21/9 + object-fit:cover - su locandine verticali
   o con testo fitto ai bordi tagliava sempre una parte dell'immagine. Ora
   locandina a sinistra / testo a destra (grid 1fr 1fr), object-fit:contain
   così la locandina si vede SEMPRE per intero, qualunque proporzione abbia. */
.event-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.event-detail-media { background: var(--card); border-radius: 4px; }
.event-detail-img { width: 100%; height: auto; max-height: 760px; object-fit: contain; display: block; margin: 0 auto; }
.event-detail-content { display: flex; flex-direction: column; }
.event-detail-head { display: flex; flex-direction: column; gap: 24px; border-bottom: 1px solid var(--border); padding-bottom: 28px; margin-bottom: 28px; }
.event-detail-head h1 { font-family: 'Montserrat', sans-serif; font-size: clamp(30px, 4vw, 52px); color: var(--white); font-weight: 600; line-height: 1.08; }
.event-detail-meta { display: flex; gap: 36px; flex-wrap: wrap; }
.event-detail-meta div strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); margin-bottom: 6px; }
.event-detail-meta div span { font-family: 'Montserrat', sans-serif; font-size: 18px; color: var(--gold); }
.event-detail-body { max-width: none; }
.event-detail-body p { font-size: 16px; line-height: 1.95; color: rgba(245,240,232,.72); margin-bottom: 30px; white-space: pre-line; }
.event-detail-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .event-detail-grid { grid-template-columns: 1fr; gap: 32px; }
  .event-detail-img { max-height: 520px; }
}
@media (max-width: 700px) {
  .event-detail-meta { gap: 24px; }
}

/* PRODOTTO - la foto arriva a piena larghezza, come una vera vetrina, poi le informazioni
   in un blocco centrato sotto: composizione opposta alla vecchia scheda "app" a due colonne. */
.product-hero { position: relative; width: 100%; height: 64vh; min-height: 440px; max-height: 660px; overflow: hidden; margin-bottom: 56px; }
.product-hero img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.86); }
.product-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.5) 0%, transparent 30%); pointer-events: none; }
.product-hero-thumbs { position: absolute; right: 24px; bottom: 24px; z-index: 2; display: flex; gap: 8px; }
.product-hero-thumbs img { width: 58px; height: 58px; object-fit: cover; cursor: pointer; opacity: .55; border: 2px solid transparent; transition: opacity .2s, border-color .2s; }
.product-hero-thumbs img:hover, .product-hero-thumbs img.active { opacity: 1; border-color: var(--ember); }

.product-info-block { max-width: 720px; margin: 0 auto; padding: 0 48px; text-align: center; }
.product-info-block .section-label { display: block; }
.product-info-block h1 { font-family: 'Montserrat', sans-serif; font-size: clamp(32px, 4.6vw, 58px); color: var(--white); font-weight: 600; margin: 16px 0 20px; line-height: 1.08; }
.product-detail-price { font-family: 'Montserrat', sans-serif; font-size: 26px; color: var(--gold); font-weight: 600; margin-bottom: 30px; }
.product-info-block .desc { font-size: 16px; color: rgba(245,240,232,.72); line-height: 1.95; margin: 0 auto 34px; max-width: 600px; white-space: pre-line; }
/* Bug reale: il selettore era "p.desc" (solo il fallback senza the_content()),
   ma single-prodotto.php usa <div class="desc"> quando il prodotto ha una
   descrizione completa (caso più comune) — quel margin-bottom non si
   applicava mai al div, lasciando il pulsante "Richiedi informazioni"
   attaccato al testo. Selettore su .desc (qualunque tag) invece di p.desc. */
.related-title { font-family: 'Montserrat', sans-serif; font-style: italic; font-size: 20px; color: var(--white); margin: 100px 0 30px; text-align: center; }
@media (max-width: 700px) {
  .product-hero { height: 48vh; min-height: 320px; margin-bottom: 40px; }
  .product-hero-thumbs img { width: 46px; height: 46px; }
}

/* GALLERY */
.lightbox { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(5,5,5,.96); align-items: center; justify-content: center; padding: 40px; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 84vh; object-fit: contain; }
.lightbox-close { position: absolute; top: 24px; right: 32px; font-size: 30px; color: var(--cream); background: none; border: none; cursor: pointer; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--cream); font-size: 34px; cursor: pointer; padding: 12px; opacity: .7; }
.lightbox-nav:hover { opacity: 1; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

/* NEWSLETTER */
#newsletter { position: relative; padding: 130px 48px; text-align: center; background-size: cover; background-position: center; }
#newsletter::before { content: ''; position: absolute; inset: 0; background: rgba(10,10,10,.88); }
.newsletter-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.newsletter-inner .section-title { margin-bottom: 16px; }
.newsletter-inner p { color: rgba(245,240,232,.6); font-size: 16px; line-height: 1.8; margin-bottom: 44px; }
.newsletter-form { display: flex; flex-direction: column; gap: 16px; max-width: 460px; margin: 0 auto; }
.newsletter-form input { background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--cream); padding: 16px 24px; font-size: 14px; font-family: 'Inter', sans-serif; outline: none; transition: border-color .2s; }
.newsletter-form input::placeholder { color: var(--gray); }
.newsletter-form input:focus { border-color: var(--gold); }
.newsletter-form .btn-primary { width: 100%; }
.newsletter-privacy { max-width: 460px; margin: 16px auto 0; font-size: 13px; line-height: 1.6; color: rgba(245,240,232,.75); text-align: center; }
.newsletter-privacy a { color: var(--gold-light); text-decoration: underline; }

/* CONTATTI */
.social-row { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.social-btn { border: 1px solid var(--border); padding: 12px 22px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--cream); text-decoration: none; transition: border-color .2s, color .2s; }
.social-btn:hover { border-color: var(--gold); color: var(--gold); }

/* QUOTE */
.quote-strip { text-align: center; }
.quote-text { font-family: 'Montserrat', sans-serif; font-size: clamp(30px, 5.2vw, 68px); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--white); line-height: 1.18; max-width: 960px; margin: 0 auto; }
.quote-text span { color: var(--gold); }

/* FOOTER */
footer { background: var(--dark); position: relative; overflow: hidden; padding-top: 90px; }

/* wordmark gigante in trasparenza - firma finale della pagina, non un elenco di link anonimo */
.footer-brandmark { text-align: center; padding: 0 24px; margin-bottom: 40px; user-select: none; }
.footer-brandmark span {
  font-family: 'Montserrat', sans-serif; font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(70px, 15vw, 220px); line-height: .82; display: inline-block;
  color: transparent; -webkit-text-stroke: 1px rgba(201,169,110,.3);
}
.footer-brandmark .dot { color: var(--ember); -webkit-text-stroke: 0; }

.footer-grid {
  max-width: 1400px; margin: 0 auto; padding: 0 48px 56px;
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 40px;
  border-top: 1px solid var(--border); padding-top: 56px;
}
.footer-col h4, .footer-col .footer-heading { font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.footer-logo { text-decoration: none; display: inline-block; margin-bottom: 18px; }
.footer-logo .logo-badge img { height: 34px; }
.footer-col p, .footer-col a { font-size: 13.5px; color: var(--gray); line-height: 2.1; text-decoration: none; display: block; transition: color .2s; }
.footer-col a:hover { color: var(--ember); }
.footer-social { display: flex; gap: 10px; margin-top: 4px; }
.footer-social a {
  width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  transition: border-color .2s, background .2s;
}
.footer-social a:hover { border-color: var(--ember); background: rgba(242,144,10,.1); }
.footer-social svg { width: 15px; height: 15px; fill: var(--cream); stroke: none; transition: fill .2s; }
.footer-social a:hover svg { fill: var(--ember); }

.footer-bottom {
  max-width: 1400px; margin: 0 auto; padding: 22px 48px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
}
.footer-company { max-width: 1400px; margin: 0 auto; padding: 18px 48px 0; font-size: 13px; line-height: 1.6; color: rgba(245,240,232,.7); border-top: 1px solid var(--border); }
.footer-company a { color: inherit; }
.footer-copy { font-size: 12px; color: rgba(136,136,136,.55); }
.footer-copy a { color: inherit; }
.footer-legal { font-size: 12px; color: rgba(136,136,136,.55); display: flex; gap: 6px; }
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: var(--ember); }

/* Credits link */
.credits_link { color: #38B5E6 !important; font-weight: 700; }
.credits_link:hover { color: #fff !important; }
.credits_link::before {
  content: "";
  vertical-align: middle;
  width: 16px;
  height: 16px;
  display: inline-block;
  margin: 0 4px;
  background: url(https://www.clion.it/favicon-96x96.png) center/contain no-repeat;
  transition: transform 450ms ease;
}
.credits_link:hover::before { transform: rotateZ(360deg); }
.back-top {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
  text-decoration: none; background: none; border: none; cursor: pointer; font-family: 'Inter', sans-serif;
  display: inline-flex; align-items: center; gap: 8px; transition: color .2s, gap .25s;
}
.back-top:hover { color: var(--ember); gap: 12px; }

@media (max-width: 900px) {
  footer { padding-top: 70px; }
  .footer-grid { grid-template-columns: 1fr 1fr; padding-top: 44px; padding-bottom: 40px; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* EMPTY STATE */
.empty-state { max-width: 1400px; margin: 0 auto; padding: 0 48px; text-align: center; color: var(--gray); font-size: 15px; padding-top: 20px; padding-bottom: 60px; }

/* UTILS */
.mt-lg { margin-top: 64px; }
.center { text-align: center; }
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s, transform .8s; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* utility di spaziatura/layout: sostituiscono gli style="" statici rimasti in markup */
.mt-6 { margin-top: 6px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-36 { margin-bottom: 36px; }
.pt-0 { padding-top: 0; }
/* Pagina Eventi: l'header testuale e' stato rimosso (update_eventi_hero), quindi il calendario parte subito sotto l'header fisso del sito: serve lo stesso spazio di .simple-header. */
#eventi-app.pt-0 { padding-top: 150px; }
@media (max-width: 768px) { #eventi-app.pt-0 { padding-top: 120px; } }
.pt-20 { padding-top: 20px; }
.pt-150 { padding-top: 150px; }
.pb-0 { padding-bottom: 0; }
.p-0 { padding: 0; }
.m-0 { margin: 0; }
.no-constrain { max-width: none; }
.inline-block { display: inline-block; }
.center-block { margin-left: auto; margin-right: auto; }
.justify-center { justify-content: center; }

/* immagini di sfondo ricorrenti (hero, momenti, newsletter, recensioni): prima erano
   style="background-image:url(...)" inline, ora classi riusabili */
.bg-bancone-01 { background-image: url('../img/bancone-01.jpg'); }
.bg-sala-02 { background-image: url('../img/sala-02.jpg'); }
.bg-terrazza-01 { background-image: url('../img/terrazza-01.jpg'); }
.bg-terrazza-02 { background-image: url('../img/terrazza-02.jpg'); }
.bg-cornetti-01 { background-image: url('../img/cornetti-01.jpg'); }
.bg-gin-01 { background-image: url('../img/gin-01.jpg'); }
.bg-vini-01 { background-image: url('../img/vini-01.jpg'); }
.bg-dolci-01 { background-image: url('../img/dolci-01.jpg'); }

/* ==========================================================================
   HOME - componenti esclusivi della homepage ricostruita
   (namespaced: non toccano le altre pagine, che restano sui pattern standard)
   ========================================================================== */

.hero-scroll-cue {
  position: absolute; left: 48px; bottom: 40px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: rgba(245,240,232,.55);
}
.hero-scroll-cue::before {
  content: ''; width: 1px; height: 34px; background: rgba(245,240,232,.4);
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue { 0%,100% { transform: scaleY(1); opacity: .4; } 50% { transform: scaleY(.4); opacity: 1; } }

/* STATEMENT - manifesto tipografico a piena larghezza, sostituisce lo split image/testo */
.statement { padding: 150px 48px 130px; }
.statement-inner { max-width: 1180px; margin: 0 auto; }
.statement-text {
  font-family: 'Montserrat', sans-serif; font-size: clamp(30px, 4.8vw, 66px);
  line-height: 1.12; letter-spacing: -.015em; font-weight: 440; color: var(--white);
  margin-bottom: 40px;
}
.statement-text em { font-style: italic; color: var(--gold); }

/* BREAK PHOTO - foto a piena larghezza con testo che sfonda il bordo, non una card centrata */
.break-photo { position: relative; height: 84vh; min-height: 540px; max-height: 780px; overflow: hidden; }
.break-photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(1.05); transform: scale(1.02); }
.break-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.95) 0%, rgba(10,10,10,.2) 48%, rgba(10,10,10,.5) 100%);
}
.break-photo-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 48px 64px; max-width: 760px; }
.break-photo-title {
  font-family: 'Montserrat', sans-serif; font-size: clamp(34px, 6.2vw, 84px);
  letter-spacing: -.02em; line-height: 1; color: var(--white); font-weight: 600; margin-bottom: 20px;
}
.break-photo-title .accent-gold { font-style: normal; color: var(--gold); }
.break-photo-text { font-size: 16px; color: rgba(245,240,232,.7); line-height: 1.8; max-width: 520px; margin-bottom: 28px; }
.break-photo-chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* MOMENTI - vetrina a scorrimento con indice live */
.momenti-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; max-width: 1400px; margin: 0 auto 40px; padding: 0 48px; flex-wrap: wrap; }

/* MOMENTI - ventaglio di pannelli che si espande in puro CSS all'hover (zero JS, zero scroll) */
.momenti-fan { max-width: 1400px; margin: 0 auto; padding: 0 48px; display: flex; gap: 4px; height: 62vh; min-height: 420px; max-height: 620px; }
.momenti-panel {
  position: relative; flex: 1 1 0%; min-width: 0; overflow: hidden;
  background-size: cover; background-position: center;
  text-decoration: none; color: inherit; display: block;
  transition: flex-grow .65s var(--ease);
}
.momenti-panel:hover, .momenti-panel:focus-visible { flex-grow: 4.2; }
.momenti-panel::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.24) 55%, rgba(0,0,0,.08) 100%);
  transition: background .5s;
}
.momenti-panel::after { content: ''; position: absolute; inset: 0; background: rgba(8,8,8,.25); transition: background .5s; }
.momenti-panel:hover::after, .momenti-panel:focus-visible::after { background: rgba(8,8,8,0); }
.momenti-panel-num { position: absolute; top: 22px; left: 22px; z-index: 2; font-size: 11px; letter-spacing: 2px; color: var(--ember); }
.momenti-panel-name-v {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2; text-align: center;
  writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto; width: 20px;
  font-family: 'Montserrat', sans-serif; font-size: 18px; color: var(--cream); white-space: nowrap;
  transition: opacity .3s;
}
.momenti-panel:hover .momenti-panel-name-v, .momenti-panel:focus-visible .momenti-panel-name-v { opacity: 0; }
.momenti-panel-expand {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px;
  opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .35s;
}
.momenti-panel:hover .momenti-panel-expand, .momenti-panel:focus-visible .momenti-panel-expand { opacity: 1; transform: translateY(0); transition-delay: .12s; }
.momenti-panel-expand h3 { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: clamp(22px, 2vw, 30px); color: var(--white); margin-bottom: 10px; white-space: nowrap; }
.momenti-panel-expand p { font-size: 13.5px; color: rgba(245,240,232,.75); line-height: 1.6; max-width: 240px; margin-bottom: 16px; }
.momenti-panel-expand .cta { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ember); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

@media (max-width: 900px) {
  .momenti-fan { flex-direction: column; height: auto; max-height: none; }
  .momenti-panel { flex: none !important; aspect-ratio: 16/10; }
  .momenti-panel-name-v { display: none; }
  .momenti-panel-expand { opacity: 1 !important; transform: none !important; }
  .momenti-panel::after { background: rgba(8,8,8,.15) !important; }
}

/* EVENTI - indice editoriale a righe con anteprima immagine che segue il cursore */
.eventi-index { max-width: 1400px; margin: 0 auto; padding: 0 48px; }
.eventi-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 30px 4px; border-top: 1px solid var(--border);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: padding-left .35s var(--ease), border-color .3s;
}
.eventi-index a.eventi-row:last-child { border-bottom: 1px solid var(--border); }
.eventi-row:hover, .eventi-row:focus-visible { padding-left: 18px; border-color: var(--ember); }
.eventi-row-left { display: flex; align-items: baseline; gap: 22px; min-width: 0; }
.eventi-row-num { font-size: 12px; color: var(--gray); flex-shrink: 0; }
.eventi-row-date { font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ember); flex-shrink: 0; min-width: 76px; }
.eventi-row-title { font-family: 'Montserrat', sans-serif; font-size: clamp(20px, 2.6vw, 32px); color: var(--white); font-weight: 500; line-height: 1.15; min-width: 0; }
.eventi-row-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.eventi-row-tag { font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); border: 1px solid var(--border); padding: 5px 12px; white-space: nowrap; }
.eventi-row-arrow { font-size: 20px; color: var(--gold); transition: transform .3s var(--ease); }
.eventi-row:hover .eventi-row-arrow { transform: translateX(6px); color: var(--ember); }
.eventi-row.passato { opacity: .5; }
.eventi-row.passato:hover { opacity: .8; }

.eventi-preview-figure {
  position: fixed; top: 0; left: 0; z-index: 60; width: 260px; height: 170px;
  pointer-events: none; opacity: 0; overflow: hidden; transition: opacity .25s;
  filter: brightness(.9);
}
.eventi-preview-figure.active { opacity: 1; }
.eventi-preview-figure img { width: 100%; height: 100%; object-fit: cover; }

/* BANNER PROMOZIONALE (es. annuncio panettoni in Home, widget-panettoni-banner.php)
   - full-width, foto di sfondo + overlay scuro per leggibilità testo, stesso
   principio di .hero-bg/.hero-overlay (widget-hero.php) ma più basso: è un
   banner stagionale, non l'hero principale della pagina. */
.promo-banner { position: relative; min-height: 420px; display: flex; align-items: center; overflow: hidden; }
.promo-banner-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.promo-banner-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.25) 100%); }
.promo-banner-content { position: relative; z-index: 2; max-width: 620px; padding: 64px 48px; }
.promo-banner-title { font-family: 'Montserrat', sans-serif; font-size: clamp(36px, 5.4vw, 72px); font-weight: 600; color: var(--white); line-height: 1.08; margin-bottom: 16px; }
.promo-banner-title em { font-style: italic; color: var(--gold); font-weight: 400; }
.promo-banner-text { font-size: 16px; color: rgba(245,240,232,.78); line-height: 1.7; margin-bottom: 26px; max-width: 480px; }
.promo-banner-text p { margin: 0; }
@media (max-width: 900px) {
  .promo-banner { min-height: 360px; }
  .promo-banner-content { padding: 44px 24px; max-width: 100%; }
  .promo-banner-overlay { background: linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,.88) 70%); }
}

/* PRODOTTI - stage cinematico: una foto grande alla volta, crossfade automatico, barre stile "stories" */
.prodotti-stage { position: relative; max-width: 1400px; margin: 0 auto; padding: 0 48px; height: 78vh; min-height: 540px; max-height: 700px; }
.prodotti-stage-frame { position: relative; height: 100%; overflow: hidden; }
.prodotti-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.1s var(--ease); text-decoration: none; display: block;
}
.prodotti-slide.active { opacity: 1; z-index: 1; }
.prodotti-stage-frame::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.1) 42%, rgba(0,0,0,.4) 100%);
}
.prodotti-stage-overlay { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 44px 40px; pointer-events: none; }
.prodotti-stage-overlay > * { pointer-events: auto; }
.prodotti-stage-index { font-size: 11px; letter-spacing: 3px; color: var(--ember); display: block; margin-bottom: 16px; }
.prodotti-stage-name { font-family: 'Montserrat', sans-serif; font-size: clamp(28px, 4.4vw, 54px); font-weight: 500; color: var(--white); line-height: 1.05; max-width: 720px; margin-bottom: 24px; }
.prodotti-stage-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.prodotti-stage-bars { display: flex; gap: 6px; flex: 1; min-width: 220px; max-width: 640px; }
.prodotti-stage-bar { flex: 1; height: 3px; background: rgba(255,255,255,.22); border: none; padding: 0; cursor: pointer; position: relative; overflow: hidden; }
.prodotti-stage-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--ember); }
.prodotti-stage-bar.done span { width: 100%; background: rgba(255,255,255,.55); }
.prodotti-stage-bar.active span { animation: stageFill linear forwards paused; animation-duration: var(--stage-dur, 5000ms); }
/* La barra #1 nasce già "active" nel markup lato server (prima slide visibile
   da subito): senza questo "paused" di default la sua animazione partirebbe
   al page-load invece che quando l'utente scrolla fino allo stage. main.js
   aggiunge .stage-started allo #prodottiStage tramite IntersectionObserver
   solo quando la sezione entra nel viewport, sbloccandola qui. */
#prodottiStage.stage-started .prodotti-stage-bar.active span { animation-play-state: running; }
@keyframes stageFill { from { width: 0%; } to { width: 100%; } }
.prodotti-stage-arrows { display: flex; gap: 10px; flex-shrink: 0; }
.prodotti-stage-arrow {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(245,240,232,.35);
  background: rgba(10,10,10,.3); color: var(--cream); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: border-color .2s, color .2s;
}
.prodotti-stage-arrow:hover { border-color: var(--ember); color: var(--ember); }
.prodotti-stage-arrow svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .prodotti-stage { height: 66vh; padding: 0 24px; }
  .prodotti-stage-overlay { padding: 0 22px 28px; }
  .prodotti-stage-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .prodotti-stage-bars { max-width: 100%; }
}

/* GALLERIA - mosaico asimmetrico invece della griglia uniforme */
.galleria-mosaic { max-width: 1400px; margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 240px); gap: 4px; }
.galleria-mosaic .g-item:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.galleria-mosaic .g-item:nth-child(2) { grid-column: 4 / 6; grid-row: 1 / 2; }
.galleria-mosaic .g-item:nth-child(3) { grid-column: 6 / 7; grid-row: 1 / 2; }
.galleria-mosaic .g-item:nth-child(4) { grid-column: 4 / 5; grid-row: 2 / 3; }
.galleria-mosaic .g-item:nth-child(5) { grid-column: 5 / 7; grid-row: 2 / 3; }
.g-item { position: relative; overflow: hidden; display: block; }
/* Bug reale corretto, isolato con un test diretto nel DOM (browser headless):
   assegnare width:100%/height:100% via JS inline risolve subito il problema
   (altezza esatta, 484px) - lo stesso width:100%/height:100% nel foglio di
   stile esterno NO, restava 650*576/1024=365.625px (le proporzioni native
   del file, 1024x576, derivate dagli attributi width/height su <img>, usate
   per il sizing al posto dei valori dichiarati). L'unica differenza tra i
   due è la priorità nella cascata - !important replica qui l'effetto dello
   style inline per garantire che width/height dichiarati vincano sempre
   sull'algoritmo "intrinsic ratio" del browser per questo elemento replaced
   posizionato assolutamente. */
.g-item img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .6s var(--ease), filter .4s; filter: brightness(.88); }
.g-item:hover img { transform: scale(1.06); filter: brightness(.7); }

/* RECENSIONI - CTA verso Google, foto a piena larghezza con contenuto centrato */
#review { position: relative; padding: 150px 48px; text-align: center; overflow: hidden; }
.review-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.4) saturate(1.05); }
.review-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(10,10,10,.72), rgba(10,10,10,.92)); }
.review-content { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; }
.review-stars { display: flex; justify-content: center; gap: 7px; margin-bottom: 26px; }
.review-stars svg { width: 18px; height: 18px; fill: var(--gold); }
.review-text { font-size: 16px; color: rgba(245,240,232,.68); line-height: 1.8; max-width: 460px; margin: 20px auto 38px; }
.review-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--white); color: var(--black); text-decoration: none;
  padding: 16px 30px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  border-radius: 3px; transition: transform .2s, background .2s;
}
.review-btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.review-btn:hover { background: var(--cream); transform: translateY(-2px); }

@media (max-width: 900px) {
  #review { padding: 100px 24px; }
}

/* HEADER MINIMALE - masthead testuale (breadcrumb + titolo) comune alle pagine interne, senza
   la foto a piena larghezza ripetuta identica ovunque. */
.simple-header { max-width: 900px; margin: 0 auto; padding: 150px 48px 60px; }
.simple-header .page-title { font-size: clamp(34px, 4.6vw, 56px); }
/* Immagine opzionale (vedi widget-page-hero.php, hero_image) */
.simple-header-img { width: 100%; margin: 40px 0 0; }
.simple-header-img img { width: 100%; height: auto; max-height: 480px; object-fit: cover; border-radius: 4px; display: block; }

/* accento raro per il nome del brand - vince sulle regole em generiche perché dichiarata dopo, a parità di specificità */
em.brand { font-style: italic; color: var(--ember); font-weight: 500; }

/* ==========================================================================
   PAGINE INTERNE - seconda generazione, componenti dedicati e non condivisi
   con la homepage (Chi Siamo, Servizi, Eventi, Galleria, Contatti)
   ========================================================================== */

/* CHI SIAMO - racconto a due colonne con immagine "incollata" allo scroll (sticky)
   che cambia inquadratura in base al blocco di testo attivo, invece di un'unica
   hero fissa o di schermate a scroll-snap. */
.sticky-story { max-width: 1600px; margin: 0 auto; padding: 40px 48px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.sticky-story-visual { position: sticky; top: 96px; height: calc(100vh - 150px); overflow: hidden; align-self: start; }
.ssv-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s var(--ease); filter: brightness(.8) saturate(1.02); }
.ssv-img.active { opacity: 1; }
.sticky-story-visual::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 -120px 100px -40px rgba(10,10,10,.7); pointer-events: none; }
.sticky-story-track { display: flex; flex-direction: column; }
.story-block { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; padding: 54px 0; border-top: 1px solid var(--border); }
.story-block:first-child { border-top: none; padding-top: 10px; }
.story-block-mobile-img { display: none; }
.story-block h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(28px, 3.2vw, 44px); color: var(--white); font-weight: 600; line-height: 1.12; margin: 16px 0 20px; }
.story-block h2 em { font-style: italic; color: var(--gold); }
.story-block p { font-size: 16px; color: rgba(245,240,232,.68); line-height: 1.9; max-width: 500px; }
@media (max-width: 900px) {
  .sticky-story { grid-template-columns: 1fr; gap: 0; padding: 0 24px; }
  .sticky-story-visual { display: none; }
  .story-block { min-height: auto; padding: 44px 0; }
  .story-block:first-child { padding-top: 44px; }
  .story-block-mobile-img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 24px; filter: brightness(.85); }
}

/* CHI SIAMO - fascia manifesto: citazione grande su fondo carta, non piena larghezza fotografica */
.manifesto-band { padding: 140px 48px; text-align: center; background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.manifesto-band blockquote { font-family: 'Montserrat', sans-serif; font-style: italic; font-weight: 400; font-size: clamp(26px, 4.4vw, 56px); line-height: 1.28; max-width: 920px; margin: 0 auto; color: var(--cream); }
.manifesto-band blockquote em { color: var(--gold); font-style: italic; }
.manifesto-band cite { display: block; margin-top: 28px; font-style: normal; font-family: 'Montserrat', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); }

/* CHI SIAMO - numeri chiave come un registro editoriale: fondo pieno, separatori a filo,
   nessun riempimento traslucido (niente più "celle" su fondo oro sporco). */
.stat-ledger { max-width: 1400px; margin: 0 auto; padding: 130px 48px; display: flex; }
.stat-ledger-item { flex: 1; padding: 0 44px; border-left: 1px solid var(--border); }
.stat-ledger-item:first-child { border-left: none; padding-left: 0; }
.sl-index { display: block; font-family: 'Montserrat', sans-serif; font-style: italic; font-size: 13px; color: var(--ember); letter-spacing: 1px; margin-bottom: 22px; }
.sl-num { display: block; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: clamp(38px, 4.4vw, 68px); letter-spacing: -.02em; color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums; }
.sl-label { display: block; font-family: 'Montserrat', sans-serif; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gray); margin-top: 18px; }
@media (max-width: 700px) {
  .stat-ledger { flex-direction: column; padding: 90px 24px; gap: 40px; }
  .stat-ledger-item { border-left: none; border-top: 1px solid var(--border); padding: 32px 0 0; }
  .stat-ledger-item:first-child { border-top: none; padding-top: 0; }
}

/* SERVIZI - menu editoriale stile rivista stampata: blocchi foto/testo a piena colonna alternati,
   didascalie in stile "N. - didascalia" sotto le immagini, ampio spazio bianco (nero) tra i blocchi.
   Niente meccanismi interattivi (tab/accordion/modali): la cura sta nella tipografia e nel ritmo. */
.menu-editorial { max-width: 1280px; margin: 0 auto; padding: 20px 48px 0; }
.menu-block { display: grid; grid-template-columns: 1fr 1fr; gap: 86px; align-items: center; padding: 86px 0; border-top: 1px solid var(--border); }
.menu-editorial .menu-block:first-child { border-top: none; padding-top: 30px; }
.menu-block.reverse .menu-block-figure { order: 2; }
.menu-block-figure { display: flex; flex-direction: column; }
/* height:auto e' indispensabile qui, non solo estetico: render_image()/
   theme_render_image_field() stampano sempre gli attributi HTML width/height
   nativi del file (prevenzione layout shift) - senza un height:auto esplicito
   in CSS, il browser tratta l'altezza come già "definita" da quell'attributo
   e ignora aspect-ratio per quella dimensione (bug reale, verificato con un
   browser headless: aspect-ratio risultava "3/2" nei computed styles, ma
   l'altezza renderizzata restava comunque quella nativa del file, es. 1024px
   invece di larghezza*2/3). */
.menu-block-img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; filter: brightness(.94) saturate(1.03); }
.menu-block-index { display: block; font-family: 'Montserrat', sans-serif; font-style: italic; font-size: 15px; color: var(--ember); margin-bottom: 20px; }
.menu-block-time { display: block; font-family: 'Montserrat', sans-serif; font-size: 11.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.menu-block-name { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: clamp(32px, 3.8vw, 56px); letter-spacing: -.015em; line-height: 1.02; color: var(--white); margin-bottom: 24px; }
.menu-block-body p { font-size: 16px; color: rgba(245,240,232,.72); line-height: 1.95; max-width: 460px; margin-bottom: 26px; }
.menu-block-cta {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
  text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 3px; transition: color .2s, border-color .2s;
}
.menu-block-cta:hover { color: var(--ember); border-color: var(--ember); }

/* Variante compatta (single-evento.php, blocchi Brunch sotto .event-detail):
   i valori di .menu-block sopra sono pensati per una sezione autonoma a piena
   pagina (Home) - qui, in coda a una scheda evento già densa di contenuto,
   86px di padding per blocco + immagini verticali (4/5, alcune foto reali
   sono scattate ritratto) rendevano la pagina eccessivamente lunga. Forzato
   un formato orizzontale (3/2) con object-fit:cover. Scoped così da non
   toccare .menu-editorial altrove (es. Home). */
.menu-editorial--compact .menu-block { gap: 48px; padding: 44px 0; }
.menu-editorial--compact .menu-block:first-child { padding-top: 20px; }
.menu-editorial--compact .menu-block-img { aspect-ratio: 3/2; object-position: center center; }
/* Posizione del soggetto diversa per ogni foto (verificato aprendo i singoli
   scatti, non un valore unico a caso): object-position selezionato via
   attributo alt, che theme_render_image_field() valorizza sempre con il
   titolo del blocco (unico per foto) - niente markup in più da aggiungere.
   - Dirty Club: il panino è nella metà INFERIORE dello scatto, sopra c'è solo
     la cucina sullo sfondo - "center top" avrebbe mostrato soprattutto quella.
   - Caffetteria e dolcezze: tazzina e crostatina occupano la metà inferiore,
     sopra c'è mezza foto di parete vuota - stesso motivo del Dirty Club, qui
     ancora più marcato (quasi il 50% della foto è muro).
   - Omelette: il piatto riempie quasi tutta l'inquadratura, leggermente più
     denso in alto (rucola) - una posizione leggermente sopra il centro.
   - Croissant salati/Pasticceria: già orizzontali (2048x1365 = 3/2 esatto),
     "center center" di default va bene, nessuna regola dedicata necessaria. */
.menu-editorial--compact .menu-block-img[alt="Dirty Club"] { object-position: center 85%; }
.menu-editorial--compact .menu-block-img[alt="Caffetteria e dolcezze"] { object-position: center 90%; }
.menu-editorial--compact .menu-block-img[alt="Omelette"] { object-position: center 35%; }
.menu-editorial--compact .menu-block-name { font-size: clamp(26px, 3vw, 40px); margin-bottom: 16px; }
.menu-editorial--compact .menu-block-body p { margin-bottom: 18px; }
@media (max-width: 900px) {
  .menu-editorial--compact .menu-block { gap: 24px; padding: 32px 0; }
}

@media (max-width: 900px) {
  .menu-editorial { padding: 20px 24px 0; }
  .menu-block { grid-template-columns: 1fr; gap: 30px; padding: 60px 0; }
  .menu-block.reverse .menu-block-figure { order: 0; }
}

/* GALLERIA - "catalogo": sequenza di tavole in stile catalogo d'arte, non una griglia o un
   rullino. Immagini grandi (singole o in dittico), didascalie numerate sotto ogni scatto,
   tanto spazio bianco (nero) tra una tavola e l'altra. */
.gallery-catalog { max-width: 1360px; margin: 0 auto; padding: 30px 48px 0; }
.plate { margin-bottom: 130px; }
.gallery-catalog .plate:last-child { margin-bottom: 0; }

.plate-single img { width: 100%; max-height: 84vh; object-fit: cover; cursor: zoom-in; filter: brightness(.94); transition: filter .4s; }
.plate-single img:hover { filter: brightness(.8); }

.plate-diptych { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; align-items: end; }
.plate-diptych.reverse { grid-template-columns: 1fr 1.3fr; }
.plate-diptych.reverse .plate-item:first-child { order: 2; }
.plate-item img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; filter: brightness(.94); transition: filter .4s; }
.plate-item img:hover { filter: brightness(.8); }
.plate-item.tall { aspect-ratio: 3/4; }
.plate-item.wide { aspect-ratio: 4/3; align-self: start; }

@media (max-width: 900px) {
  .gallery-catalog { padding: 20px 24px 0; }
  .plate { margin-bottom: 80px; }
  .plate-diptych, .plate-diptych.reverse { grid-template-columns: 1fr; gap: 34px; }
  .plate-diptych.reverse .plate-item:first-child { order: 0; }
  .plate-single img { max-height: 62vh; }
}

/* CONTATTI - schermo diviso persistente: mappa agganciata a sinistra, informazioni che scorrono
   a destra. Non più sezioni impilate (mappa sopra o sotto), ma una colonna fissa mentre l'altra
   si legge - il titolo stesso vive dentro la colonna testo, senza un header separato sopra. */
.contact-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.contact-split-map { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.contact-split-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(60%) contrast(1.1) brightness(.66); }
.map-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 32px; text-align: center; background: #151515; color: var(--cream); font-size: 16px; line-height: 1.6; }
.map-placeholder a { color: var(--gold-light); text-decoration: underline; }
.contact-split-map::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,10,10,.25) 0%, transparent 18%); pointer-events: none; }
.contact-split-info { padding: 150px 64px 100px; display: flex; flex-direction: column; justify-content: center; }
.contact-split-info .page-title { margin-bottom: 18px; }

.reach-list { display: flex; flex-direction: column; margin-top: 48px; }
.reach-item { display: flex; align-items: center; gap: 20px; padding: 22px 0; border-top: 1px solid var(--border); }
.reach-list .reach-item:last-child { border-bottom: 1px solid var(--border); }
.reach-icon { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.reach-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.6; }
.reach-text { display: flex; flex-direction: column; gap: 4px; }
.reach-text strong { font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); font-weight: 500; }
.reach-text a, .reach-text span { font-family: 'Montserrat', sans-serif; font-size: 18px; color: var(--cream); text-decoration: none; transition: color .2s; }
.reach-text a:hover { color: var(--ember); }

/* LAVORA CON NOI — elenco ruoli come registro editoriale (righe con filetti, coerente col
   resto del sito) + form di candidatura con campi a sottolineatura e una zona di caricamento
   CV in stile "dropzone", non un box con bordo pieno da modulo generico. */
.roles-list { max-width: 900px; margin: 0 auto; }
.roles-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 26px 4px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.roles-list .roles-row:last-child { border-bottom: 1px solid var(--border); }
.roles-name { font-family: 'Montserrat', sans-serif; font-size: clamp(19px, 2.2vw, 25px); color: var(--white); font-weight: 500; }
.roles-meta { display: flex; align-items: center; gap: 16px; }
.roles-type { font-family: 'Montserrat', sans-serif; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); border: 1px solid var(--border); padding: 5px 12px; }

.apply-form { max-width: 720px; margin: 0 auto; }
.form-row { margin-bottom: 30px; }
.form-row.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form-label { display: block; font-family: 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); margin-bottom: 10px; }
.form-input, .form-select, .form-textarea {
  width: 100%; background: none; border: none; border-bottom: 1px solid var(--border); color: var(--cream);
  font-family: 'Inter', sans-serif; font-size: 15px; padding: 10px 2px; outline: none; transition: border-color .2s;
}
.form-select { cursor: pointer; }
.form-select option { background: var(--black); color: var(--cream); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--ember); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--gray); }
.form-textarea { resize: vertical; min-height: 100px; font-family: 'Inter', sans-serif; }

.cv-drop {
  display: block; border: 1px dashed var(--border); padding: 44px 24px; text-align: center; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.cv-drop:hover, .cv-drop.dragover { border-color: var(--ember); background: rgba(242,144,10,.04); }
.cv-drop input[type="file"] { display: none; }
.cv-drop-icon { width: 42px; height: 42px; margin: 0 auto 16px; border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cv-drop-icon svg { width: 18px; height: 18px; stroke: var(--gold); fill: none; stroke-width: 1.6; }
.cv-drop-text { font-size: 14px; color: var(--cream); margin-bottom: 6px; }
.cv-drop-text b { color: var(--gold); font-weight: 500; }
.cv-drop-hint { font-size: 12px; color: var(--gray); }

.cv-file { display: none; margin-top: 16px; padding: 14px 18px; border: 1px solid var(--border); align-items: center; justify-content: space-between; gap: 12px; }
.cv-file.active { display: flex; }
.cv-file-name { font-size: 13.5px; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-file-size { font-size: 11px; color: var(--gray); flex-shrink: 0; margin-left: auto; }
.cv-file-remove { background: none; border: none; color: var(--gray); cursor: pointer; font-size: 16px; flex-shrink: 0; transition: color .2s; line-height: 1; }
.cv-file-remove:hover { color: var(--ember); }

.form-checkbox-row { display: flex; align-items: flex-start; gap: 12px; }
.form-checkbox-row input { margin-top: 3px; accent-color: var(--ember); flex-shrink: 0; }
.form-checkbox-row label { font-size: 13px; color: var(--gray); line-height: 1.6; }
.form-note { font-size: 12.5px; color: var(--gray); line-height: 1.7; margin-top: 14px; }
.form-status { font-size: 13px; color: var(--gold); margin-top: 18px; display: none; }
.form-status.active { display: block; }

@media (max-width: 700px) {
  .form-row.cols-2 { grid-template-columns: 1fr; gap: 30px; }
  .cv-drop { padding: 32px 18px; }
  .roles-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 900px) {
  .contact-split { grid-template-columns: 1fr; min-height: auto; }
  .contact-split-map { position: static; height: 46vh; min-height: 320px; }
  .contact-split-info { padding: 70px 24px 60px; }
}

@media (max-width: 1150px) {
  .galleria-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .galleria-mosaic .g-item:nth-child(1) { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16/9; }
  .galleria-mosaic .g-item:nth-child(2),
  .galleria-mosaic .g-item:nth-child(3),
  .galleria-mosaic .g-item:nth-child(4),
  .galleria-mosaic .g-item:nth-child(5) { grid-column: span 1; grid-row: auto; aspect-ratio: 1; }
}
@media (max-width: 900px) {
  .break-photo-overlay { padding: 0 24px 28px; max-width: 100%; }
  .break-photo { height: auto; padding-bottom: 24px; }
  .eventi-row { flex-wrap: wrap; }
  .eventi-preview-figure { display: none; }
  .hero-scroll-cue { display: none; }
}

/* RESPONSIVE */
@media (max-width: 1150px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  section { padding: 76px 24px; }
  .container, .section-header, .card-grid { padding-left: 24px; padding-right: 24px; }
  nav#navbar { padding: 18px 22px; }
  nav#navbar.scrolled { padding: 13px 22px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-content { padding: 0 24px 64px; }
  .hero-index { display: none; }
}
@media (max-width: 600px) {
  .hero-title { font-size: 34px; }
  .card-grid { grid-template-columns: 1fr; }
  #newsletter { padding: 80px 22px; }
  .section-header.split { flex-direction: column; align-items: flex-start; }
}

/* Testi WYSIWYG: il controllo Elementor restituisce gia' un <p>, quindi il contenitore e' un <div> (un <p> dentro un <p> e' HTML invalido e perdeva classe/margini). */
.break-photo-text p, .page-sub p, .review-text p, .quote-text p, .section-sub p { margin: 0; font: inherit; color: inherit; line-height: inherit; }
.break-photo-text p + p, .page-sub p + p, .review-text p + p, .quote-text p + p, .section-sub p + p { margin-top: 10px; }

/* Carosello opzionale nei blocchi Menu Editorial (widget-menu-editorial*.php, render_block_figure()). Le slide sono sovrapposte e si alternano in dissolvenza. */
.menu-carousel { position: relative; width: 100%; overflow: hidden; }
.menu-carousel-track { position: relative; width: 100%; aspect-ratio: 4/5; }
.menu-editorial--compact .menu-carousel-track { aspect-ratio: 3/2; }
.menu-carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.menu-carousel-slide.active { opacity: 1; pointer-events: auto; }
.menu-carousel-slide .menu-block-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.menu-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border: 1px solid rgba(245,240,232,.35); background: rgba(10,10,10,.45); color: var(--cream); font-size: 16px; cursor: pointer; transition: background .2s, border-color .2s; }
.menu-carousel-btn:hover { background: rgba(10,10,10,.75); border-color: var(--gold); }
.menu-carousel-btn--prev { left: 12px; }
.menu-carousel-btn--next { right: 12px; }
.menu-carousel-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.menu-carousel-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 1px solid rgba(245,240,232,.7); background: transparent; cursor: pointer; transition: background .2s; }
.menu-carousel-dot.active { background: var(--gold); border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .menu-carousel-slide { transition: none; } }

/* Touch: paginazione catalogo con aree di tocco da 44px; micro-etichette dell'agenda a 11px (erano 9.5-10.5px) */
@media (max-width: 900px) {
  .shop-pagination { gap: 6px; flex-wrap: wrap; }
  .shop-pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .agenda-tag, .agenda-eyebrow, .agenda-date small { font-size: 11px; }
}

/* Mobile/tablet: un solo margine laterale (24px).
   Prima `section` (24px) + i blocchi interni (.section-header, .momenti-*, .eventi-index, .galleria-mosaic, .prodotti-stage,
   con 24/48px propri) si sommavano: contenuti a 48-72px dal bordo, colonne strette e testi tagliati.
   Le fasce a tutta larghezza (hero, foto break, banner) non devono avere il padding della section. */
@media (max-width: 900px) {
  section .section-header,
  section .momenti-head,
  section .momenti-fan,
  section .eventi-index,
  section .galleria-mosaic,
  section .prodotti-stage { padding-left: 0; padding-right: 0; }
  #hero, .break-photo, .promo-banner { padding-left: 0; padding-right: 0; }
  .break-photo { padding-bottom: 0; }
  .statement { padding: 96px 24px 84px; }
  .section-header { margin-bottom: 40px; }
  .eventi-row { gap: 12px 16px; padding-left: 0; padding-right: 0; }
  .eventi-row:hover, .eventi-row:focus-visible { padding-left: 4px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .eventi-row { flex-wrap: nowrap; }
}
@media (max-width: 600px) {
  .momenti-panel { aspect-ratio: 4/3; }
  .momenti-panel-expand { padding: 22px; }
  .eventi-row-left { gap: 6px 14px; flex-wrap: wrap; }
  .eventi-row-date { min-width: 0; }
  .eventi-row-title { flex-basis: 100%; }
}
@media (max-width: 900px) {
  .eventi-row-num { min-width: 24px; }
}

/* Mosaico galleria su mobile/tablet: righe con altezza esplicita invece di aspect-ratio sugli item.
   Con aspect-ratio il contenitore Elementor (flex column) misurava il widget ~210px piu' basso del reale
   e la sezione successiva (quote-strip) saliva sopra la galleria. */
@media (max-width: 900px) {
  .galleria-mosaic { grid-auto-rows: calc((100vw - 52px) / 2); }
  .galleria-mosaic .g-item:nth-child(n) { aspect-ratio: auto; }
}
/* Pannelli "momenti": stessa causa del mosaico (aspect-ratio nel flex column di Elementor) -> altezza esplicita */
@media (max-width: 900px) {
  .momenti-panel { aspect-ratio: auto; height: calc((100vw - 48px) * .625); }
}
@media (max-width: 600px) {
  .momenti-panel { height: calc((100vw - 48px) * .75); }
}

/* BLOCCO C - leggibilita testi e foto non scurite (richiesta cliente, nov 2026) */
:root { --gray: #b8b8b8; }

/* Foto: via i filtri che le scurivano rispetto agli originali */
.vetrina-card-img, .vetrina-card:hover .vetrina-card-img,
.product-hero img, .break-photo img, .shop-index-cat-img,
.menu-block-img, .plate-single img, .plate-single img:hover,
.plate-item img, .plate-item img:hover, .g-item:hover img,
.ssv-img, .story-block-mobile-img, .review-bg { filter: none; }
.contact-split-map iframe { filter: none; }
.momenti-panel::after, .momenti-panel:hover::after, .momenti-panel:focus-visible::after { background: transparent; }
.momenti-panel::before { background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 45%); }
.hero-overlay { background: linear-gradient(to bottom, rgba(10,10,10,0) 0%, rgba(10,10,10,.25) 60%, rgba(10,10,10,.97) 100%); }
.break-photo::after { background: linear-gradient(to top, rgba(10,10,10,.85) 0%, rgba(10,10,10,0) 45%); }
#newsletter::before { background: rgba(10,10,10,.6); }
.product-hero::after { background: none; }

/* Testi: etichette piccole piu grandi e chiare, footer non piu quasi invisibile */
.section-label, .hero-label, .breadcrumb, .shop-index-title, .footer-col .footer-heading { font-size: 13px; color: var(--gold-light); }
.form-label, .reach-text strong, .event-detail-meta div strong, .sl-label, .roles-type, .eventi-row-tag, .agenda-tag, .shop-index-count, .cv-file-size, .eventi-row-num { font-size: 12.5px; }
.badge-soon, .badge-out { font-size: 11.5px; }
.text-link, .social-btn, .tab-btn, .btn-small, .nav-cta, .momenti-panel-expand .cta, .menu-block-time { font-size: 13px; }
.menu-block { scroll-margin-top: 90px; }
.menu-block-service { display: block; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-light); margin-bottom: 14px; line-height: 1.4; }
.footer-copy, .footer-legal { font-size: 13px; color: rgba(245,240,232,.7); }
.footer-col p, .footer-col a { font-size: 14.5px; }
.hero-index, .hero-scroll-cue, .prodotti-stage-index, .back-top, .philosophy-chip, .btn-primary, .btn-outline { font-size: 13px; }
@media (max-width: 768px) {
  .section-label, .hero-label, .breadcrumb { letter-spacing: 3px; }
  .tab-btn { font-size: 12.5px; }
}