/* ============================================================================
   THEME BASE — il "DNA" condiviso dai 3 satelliti
   ----------------------------------------------------------------------------
   Derivato dal theme.css dell'hub (COPIA: l'originale non è stato toccato).
   Contiene la geometria, i componenti e la scala tipografica del design system.

   ⚠️ NON modificare i token qui per un singolo sito:
      ogni satellite sovrascrive le variabili nel SUO `theme-site.css`,
      che il sync concatena qui sotto → produce il `theme.css` finale (1 solo file).

   Leve di personalità concesse ai satelliti (vedi PROGETTO-SATELLITI.md):
     --greige / --scuro  → il colore delle bande        (Tulle: nero · Juliet: #e8dcd2)
     --script            → il corsivo decorativo        (Tulle: OFF · Juliet: ON)
     l'oro #85714d resta l'UNICO accento di sistema su tutti e 3.
   ========================================================================== */

/* ============================================================================
   Idea Sposa Couture — theme.css
   Design system: palette ufficiale, Playfair Display + Lato + Parisienne, spaziature coerenti.
   ========================================================================== */

/* --- FONT self-hosted (WOFF2 locali, niente Google Fonts → no render-blocking + GDPR).
   Playfair = variabile (400–900) roman+corsivo; Lato 300/400/700; Parisienne 400. Subset latin. --- */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/playfair.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('/fonts/playfair-italic.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/lato-300.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lato-400.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/lato-700.woff2') format('woff2'); }
@font-face { font-family: 'Parisienne'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/parisienne.woff2') format('woff2'); }

:root {
  /* Palette ufficiale */
  --oro:        #85714d;
  --oro-scuro:  #76633b;
  /* Oro per il TESTO PICCOLO (occhielli, 12px → WCAG AA vuole 4.5:1).
     Verificato: l'oro #85714d fa 4.37 su avorio e 3.49 su greige → NON passa.
     Nemmeno --oro-scuro basta su greige (4.31). Questo passa ovunque (min 4.96).
     I TITOLI restano #85714d: sono testo grande, soglia 3.0 → passano. */
  --oro-testo:  #6a5a3d;
  /* Oro per il TESTO PICCOLO (occhielli, 12px). L'oro #85714d fa 4.37 su avorio e
     3.49 su greige: sotto il 4.5 richiesto da WCAG AA per il corpo. Questo passa
     ovunque (min 4.96). I TITOLI restano #85714d: sono testo grande, soglia 3.0. */
  --oro-testo:  #6a5a3d;
  --oro-chiaro: #a08a5f;
  --grigio:     #f4f1ea;   /* unico tono caldo del sito (beige chiaro) */
  --greige:     #f4f1ea;   /* UNIFICATO al chiaro (era #ede7dd) — un solo beige su tutto il sito */
  --testo:      #222222;   /* titoli scuri */
  --testo-soft: #535049;   /* testo secondario neutro-caldo (leggermente più scuro per leggibilità) */
  --bianco:     #ffffff;
  --scuro:      #1c1a17;   /* footer */

  /* Tipografia */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --script: "Parisienne", "Snell Roundhand", "Brush Script MT", cursive; /* parole decorative sovrapposte */

  /* Scala tipografica (clamp = fluida) */
  --fs-hero:  clamp(2.6rem, 6vw, 4.6rem);
  --fs-h2:    clamp(2rem, 3.6vw, 3rem);
  --fs-h3:    clamp(1.35rem, 2.2vw, 1.8rem);
  --fs-body:  1rem;            /* 16px base; nei testi lunghi 1.0625 */
  --fs-small: 0.875rem;
  --lh-body:  1.7;
  --lh-head:  1.15;

  /* Spaziature coerenti (scala 4px) */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4rem;   --s-7: 6rem;    --s-8: 8rem;

  --maxw: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 0; /* spigoli vivi come l'originale (bottoni/card squadrati) */
  --nav-h: 84px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: #4d4a45; /* corpo grigio neutro-caldo, morbido (non nero, non "fango") */
  background: var(--bianco);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: var(--lh-head); color: var(--testo); }
h2 { text-transform: uppercase; letter-spacing: .06em; } /* titoli di sezione maiuscoli (scuri; oro solo negli occhielli) */

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
/* 🔴 LA NAVBAR FISSA NON OCCUPA SPAZIO — e sulle pagine interne non gliene faceva nessuno.
   `.nav` è position:fixed → esce dal flusso. Sulle pagine con hero ci pensa .hero__inner
   (padding: var(--nav-h)); sulle pagine SENZA hero il primo elemento partiva da y=0, cioè
   SOTTO la barra. Il breadcrumb era quindi invisibile su TUTTE le pagine interne, da sempre:
   è alto una riga e ci spariva sotto tutto intero, quindi sembrava che non ci fosse un
   problema. Si è visto solo sulla pagina articolo, dove il titolo lungo lo manda a tre righe
   e l'ultima sbuca fuori dalla barra (Marco, 16/07). C'era nel sorgente, non sullo schermo.
   La classe .has-solid-nav la mette già header.php su <body> — mancava solo chi la usasse. */
body.has-solid-nav { padding-top: var(--nav-h); }

.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* ══ APERTURA DELLE PAGINE INTERNE — occhiello → H1 → sommario ═══════════════════════
   Le pagine interne aprono tutte allo stesso modo, quindi è UNA classe, non valori
   sparsi pagina per pagina (domani vale su Scarpe senza riscriverla).
   Correggeva due difetti visti insieme (Marco, 16/07):
     · con .section nudo prendevano 7rem sopra e sotto: sotto una navbar da 84px diventa
       un buco, non respiro → qui ~68px, che è aria voluta;
     · l'H1 restava SENZA margine — il reset è `* { margin: 0 }` e nessuna regola lo
       rimetteva fuori da .section-head → il sommario finiva incollato al titolo.
   `.section.page-intro` (0,2,0) batte `.section` (0,1,0) SEMPRE: non dipende dall'ordine
   in cui sync.sh concatena base+site nel theme.css generato. */
/* Il padding SOPRA vale un terzo di quello sotto, e non è una svista: sopra c'è già il
   breadcrumb a occupare quello spazio, e il breadcrumb PARLA DELL'ARTICOLO — sta con lui,
   non con la navbar. Tenerli vicini dice a colpo d'occhio che sono la stessa cosa.
   Sotto invece lo spazio serve tutto: separa il sommario dalla sezione seguente, dove non
   c'è nient'altro a farlo. (Marco, 16/07: «avvicina ancora un poco il blocco».) */
.section.page-intro { padding-block: clamp(.9rem, 1.8vw, 1.4rem) clamp(2.4rem, 4.5vw, 3.75rem); }
.page-intro h1 { margin-bottom: var(--s-4); }
.bg-grigio { background: var(--grigio); }
.bg-greige   { background: var(--greige); }
.bg-scuro  { background: var(--scuro); color: #e9e4dc; }
/* Beige unificato: se due bande calde si toccano, un filetto sottile le separa (auto, ovunque). */
.bg-greige + .bg-greige, .bg-greige + .bg-grigio,
.bg-grigio + .bg-greige, .bg-grigio + .bg-grigio { border-top: 1px solid rgba(133,113,77,.16); }

.eyebrow {
  font-family: var(--sans); font-size: .75rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--oro-testo);
  margin-bottom: var(--s-2);
}
/* L'occhiello è testo PICCOLO (12px): soglia WCAG 4.5:1, non 3.0. Con --oro (#85714d)
   falliva su avorio (4.37) e su greige (3.49); anche --oro-scuro cede sul greige (4.31).
   --oro-testo (#6a5a3d) passa su tutti e tre i fondi → un solo colore, ovunque. */
.bg-greige .eyebrow, .bg-grigio .eyebrow { color: var(--oro-testo); }
.eyebrow::after { content:""; display:block; width:42px; height:1px; background: currentColor; opacity:.55; margin-top:.7rem; } /* hairline couture */
.center .eyebrow::after { margin-inline:auto; }
.split__body h2 { margin-bottom: var(--s-3); } /* respiro titolo→testo */

/* Skip-link (accessibilità) */
.skip-link { position:absolute; left:-9999px; top:0; z-index:200; background:var(--oro); color:#fff; padding:.6rem 1rem; border-radius:0 0 var(--radius) 0; }
.skip-link:focus { left:0; }
.lead { font-size: 1.0625rem; line-height: 1.78; color: var(--testo-soft); max-width: 62ch; }
.lead + .lead { margin-top: .9rem; } /* stacco tra paragrafi */
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* Accento decorativo in corsivo (richiamo editoriale dell'originale: "Esclusivi"/"Comfort") */
.accent-script {
  display:block; font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--oro-chiaro); font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1;
  margin-bottom: .2rem;
}
.bg-greige .accent-script { color: var(--oro); }

/* ---------- Bottoni ---------- */
.btn {
  display: inline-block; font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .9rem 1.9rem; border: 1px solid var(--oro); border-radius: var(--radius);
  background: var(--oro); color: #fff; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: var(--oro-scuro); border-color: var(--oro-scuro); }
.btn--outline { background: transparent; color: var(--oro-scuro); }
.btn--outline:hover { background: var(--oro); color: #fff; border-color: var(--oro); }
.btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--light:hover { background: #fff; color: var(--testo); border-color:#fff; }

/* azioni: bottone + link secondario con freccia (gerarchia couture, oro con parsimonia) */
.actions { display:flex; align-items:center; gap: clamp(1.1rem, 3vw, 2rem); flex-wrap:wrap; }
.link-arrow { font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color: var(--oro-scuro); display:inline-flex; align-items:center; gap:.45rem; }
.link-arrow::after { content:"→"; transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--oro); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ============================================================================
   NAVBAR — sticky, trasparente sull'hero → solida allo scroll
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease), transform .35s var(--ease);
}
/* auto-hide (mobile): scroll giù oltre soglia → su; scroll su → riappare. La classe la mette main.js */
.nav--hidden { transform: translateY(-100%); }
.nav-inner { width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3); }
.nav__logo { justify-self: start; }
.nav__logo img { height: 22px; width: auto; transition: opacity .3s; }
.nav__logo .logo--dark { display: none; }
.nav__panel { display:flex; align-items:center; }
.nav__panel-logo, .nav__panel-social { display:none; } /* visibili solo nel menu mobile */
.nav__menu { justify-self: center; display: flex; align-items: center; gap: clamp(1rem,2vw,2.1rem); list-style:none; margin:0; padding:0; }
.nav__menu > li > a {
  font-size: .88rem; font-weight: 500; letter-spacing: .05em; color: #fff;
  padding-block: .5rem; position: relative; transition: color .25s; white-space: nowrap;
}
.nav__menu > li > a::after {
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background: currentColor; transition: width .3s var(--ease);
}
.nav__menu > li > a:hover::after { width: 100%; }
.nav__cta { justify-self: end; }
.nav__cta .btn { padding: .7rem 1.4rem; }
.nav__menu-cta { display: none; } /* "Prenota" nel menu: solo su mobile (su desktop c'è il bottone) */

/* Dropdown Collezioni */
.has-sub { position: relative; }
.has-sub__ind { display:none; } /* indicatore +/− visibile solo nel menu mobile */
.submenu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  background: #fff; min-width: 230px; padding: .5rem; border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0,0,0,.14); opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
/* ponte invisibile sul gap menu↔submenu: l'hover non si interrompe muovendo il mouse */
.submenu::before { content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.has-sub:hover .submenu, .has-sub:focus-within .submenu { opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.submenu a { display:block; padding:.6rem .8rem; font-size:.85rem; color:var(--testo); border-radius:3px; transition: background .2s,color .2s; }
.submenu a:hover { background: var(--greige); color: var(--oro-scuro); }

/* Stato SOLIDO (scroll) e pagine senza hero */
.nav.is-solid, .nav--solid {
  background: rgba(255,255,255,.97); box-shadow: 0 1px 0 rgba(0,0,0,.06); height: 70px;
  backdrop-filter: saturate(1.1) blur(6px);
}
.nav.is-solid .nav__menu > li > a, .nav--solid .nav__menu > li > a { color: var(--testo); }
.nav.is-solid .logo--light, .nav--solid .logo--light { display: none; }
.nav.is-solid .logo--dark,  .nav--solid .logo--dark  { display: block; }

/* Hamburger + menu mobile */
.nav__toggle { display:none; justify-self:end; background:none; border:0; width:42px; height:42px; cursor:pointer; position:relative; z-index:2; }
.nav__toggle span { display:block; width:24px; height:2px; background:#fff; margin:5px auto; transition: .3s var(--ease); }
.nav.is-solid .nav__toggle span, .nav--solid .nav__toggle span,
body.menu-open .nav__toggle span { background: var(--testo); } /* menu mobile aperto su sfondo bianco */
/* hamburger → X quando il menu è aperto (resta cliccabile sopra l'overlay) */
body.menu-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* menu aperto: niente backdrop-filter sulla navbar — altrimenti la barra diventa il
   containing-block del pannello fixed e lo clippa alla sua altezza (bug "banda" dopo lo scroll) */
body.menu-open .nav, body.menu-open .nav.is-solid, body.menu-open .nav--solid { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Pagine interne senza hero: la navbar è fixed → offset del contenuto */
body.has-solid-nav main { padding-top: 70px; }

@media (max-width: 1150px) {
  .nav-inner { grid-template-columns: auto 1fr auto; }
  .nav__cta { display:none; }
  .nav__toggle { display:block; }
  /* pannello overlay a tutto schermo: logo (alto) · link (centro) · social (basso) */
  .nav__panel {
    position: fixed; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    background: #fff;                       /* fondo PIENO: niente bleed-through */
    transform: translateX(100%);
    transition: transform .4s var(--ease), visibility .4s;
    visibility: hidden; /* non focusabile quando chiuso */
    overflow-y: auto; gap: 0;
    padding: calc(var(--nav-h) + var(--s-1)) var(--gutter) var(--s-4);
  }
  .nav__panel.open { transform: none; visibility: visible; }

  .nav__panel-logo { display:block; margin-bottom: var(--s-3); } /* ~24px di stacco dal primo tasto */
  .nav__panel-logo img { height: 16px; width:auto; }   /* logo più piccolo */

  /* link ancorati in alto (vicini al logo); voci a tutta larghezza → centrate uniformi */
  .nav__menu { flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: var(--s-1); flex: 1 1 auto; width:100%; }
  .nav__menu > li { text-align:center; }
  .nav__menu > li > a { display:inline-block; color: var(--testo) !important; font-size: 1.15rem; padding-block:.55rem; } /* inline-block: altezza UNIFORME + area di tap */
  .nav__menu > li > a::after { display:none; } /* niente underline (resta "appiccicata" dopo il tap) */

  /* Collezioni: fisarmonica CHIUSA di default (si apre al tap, via JS .has-sub.open) */
  .has-sub__ind { display:inline; margin-left:.35rem; } /* +/− inline accanto a "Collezioni" (stessa altezza degli altri) */
  .has-sub__ind::before { content:"+"; color:var(--oro-scuro); font-weight:400; font-size:1.1em; line-height:1; }
  .has-sub.open .has-sub__ind::before { content:"\2013"; }   /* – */
  .submenu {
    position: static; transform:none; box-shadow:none; min-width:0; width:100%; text-align:center; background:transparent;
    list-style:none; margin:0; padding:0;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition: max-height .3s var(--ease), opacity .25s var(--ease), padding .3s var(--ease);
  }
  /* su mobile il sottomenu NON si apre/sposta su hover o focus (sticky-hover del touch) */
  .has-sub:hover .submenu, .has-sub:focus-within .submenu { transform:none; max-height:0; opacity:0; visibility:hidden; padding-top:0; }
  /* apertura SOLO via .open (dichiarata DOPO → vince a pari specificità) */
  .has-sub.open .submenu { transform:none; max-height: 12rem; opacity:1; visibility:visible; padding-top:.4rem; }
  .submenu li { text-align:center; }
  .submenu a { display:block; text-align:center; padding:.35rem 0; color: var(--oro-scuro); font-size:.95rem; }

  /* Prenota appuntamento: effetto tasto (outline oro) */
  .nav__menu-cta { display:block; margin-top: var(--s-3); }
  .nav__menu > li.nav__menu-cta > a {
    display:inline-block; border:1px solid var(--oro); padding:.7rem 1.8rem;
    color: var(--oro-scuro) !important; font-size:.92rem; letter-spacing:.12em;
    text-transform:uppercase; transition: background .25s var(--ease), color .25s var(--ease);
  }
  .nav__menu > li.nav__menu-cta > a:hover { background: var(--oro); color:#fff !important; }

  .nav__panel-social { display:flex; gap: var(--s-4); justify-content:center; padding-top: var(--s-2); }
  .nav__panel-social a { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color: var(--oro-scuro); }

  body.menu-open { overflow: hidden; }
}

/* ============================================================================
   HERO
   ========================================================================== */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; color:#fff; text-align:center; overflow:hidden; }
.hero__media { position:absolute; inset:0; z-index:0; } /* will-change impostato via JS solo se il parallax è attivo */
.hero__media img, .hero__media video { width:100%; height:100%; object-fit: cover; }
.hero::after { content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.12) 40%, rgba(0,0,0,.45)); }
.hero__inner { position: relative; z-index:2; padding: var(--nav-h) var(--gutter) var(--s-6); max-width: 60rem; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 2.6rem); color:#fff; font-weight:500; text-transform:uppercase; letter-spacing:.01em; line-height:1.22; }
.hero p { margin-top: var(--s-3); font-size: 1.05rem; color: rgba(255,255,255,.92); max-width: 46ch; margin-inline:auto; }
.hero__cta { margin-top: var(--s-4); display:flex; gap: var(--s-2); justify-content:center; flex-wrap:wrap; }

/* a capo solo su mobile (es. slogan Prenota) */
.br-mobile { display:none; }
/* a capo solo su DESKTOP (su mobile il testo va a capo da solo) */
.br-desk { display:inline; }

/* Tweak mobile (telefono): tasti hero a LARGHEZZA UGUALE (stack) + logo un filo più piccolo */
@media (max-width: 600px) {
  .hero__cta { flex-direction: column; align-items: center; }
  .hero__cta .btn { width: 100%; max-width: 20rem; text-align: center; padding-inline: 1.5rem; } /* uguali ma più corti */
  .nav__logo img { height: 19px; }   /* logo un pochino più piccolo */
  .br-mobile { display: inline; }     /* attiva l'a capo dello slogan */
  .br-desk { display: none; }         /* disattiva gli a capo desktop → wrap naturale su mobile */
  #recensioni .reviews-title { font-size: clamp(1.4rem, 6.5vw, 2rem); white-space: nowrap; } /* mobile: UNA riga, dimensione equilibrata (ID per vincere sulla regola base) */
}

/* ============================================================================
   Sezioni / griglie
   ========================================================================== */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:stretch; }
.split__body { align-self: center; } /* testo centrato verticalmente rispetto alla foto */
.split--reverse .split__media { order: 2; }
@media (max-width: 860px){ .split { grid-template-columns: 1fr; } .split--reverse .split__media{ order:0; } .media-frame { aspect-ratio: 4/5; min-height: 0 !important; } }
/* La foto riempie l'altezza del testo (niente più foto che "torreggia" sul testo breve) */
.media-frame { height: 100%; min-height: 420px; max-height: 620px; background: var(--grigio); overflow:hidden; }
.media-frame img { width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.media-frame:hover img { transform: scale(1.04); }            /* zoom morbido all'hover (desktop) */
.media-frame img[data-lightbox] { cursor: zoom-in; }

/* Parola in script calligrafico sovrapposta a cavallo della foto (device dell'originale) */
.media-wrap { position: relative; }
.script-overlay { position:absolute; z-index:3; font-family:var(--script); font-weight:400; color:var(--oro);
  line-height:.8; font-size:clamp(2.8rem, 6.5vw, 5.5rem); top:-.30em; left:-.10em; pointer-events:none;
  text-shadow: 0 2px 18px rgba(255,255,255,.5); }
.script-overlay--right { left:auto; right:-.10em; }
@media (max-width:860px){ .script-overlay { font-size: clamp(2.6rem, 13vw, 3.6rem); } }

.section-head { max-width: 56ch; }
.section-head.center { margin-inline:auto; }
.section-head h1, .section-head h2 { margin-bottom: var(--s-3); }

/* Griglia modelli Couture (grande) */
.models { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--s-2); margin-top: var(--s-5); }
.models .model { aspect-ratio: 3/4; overflow:hidden; background:var(--grigio); }
.models .model img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.models .model:hover img { transform: scale(1.04); }
@media (max-width: 760px){ .models { grid-template-columns: repeat(2,1fr); } }
.models--square .model { aspect-ratio: 1/1; }   /* foto prodotto (scarpe/accessori) meglio quadrate */
.loadmore { text-align: center; }

/* ===== PORTFOLIO Real Bride / Shooting (masonry + filtro) ===== */
.rb-filter { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin: var(--s-4) auto var(--s-5); }
.rb-filter button { font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:.55rem 1.15rem; border:1px solid rgba(133,113,77,.42); background:transparent; color:var(--testo); cursor:pointer; transition: all .25s var(--ease); }
.rb-filter button:hover { border-color:var(--oro); color:var(--oro-scuro); }
.rb-filter button.is-active { background:var(--oro-scuro); border-color:var(--oro-scuro); color:#fff; }
.rb-grid { column-count:4; column-gap:var(--s-2); }
@media(max-width:1000px){ .rb-grid { column-count:3; } }
@media(max-width:640px){ .rb-grid { column-count:2; } }
.rb-tile { break-inside:avoid; margin-bottom:var(--s-2); position:relative; display:block; overflow:hidden; background:var(--grigio); }
.rb-tile img { width:100%; display:block; transition:transform .7s var(--ease); }
.rb-tile:hover img { transform:scale(1.06); }
.rb-tile__cap { position:absolute; inset:0; display:flex; align-items:flex-end; padding:.9rem 1rem; background:linear-gradient(transparent 55%, rgba(20,18,15,.62)); }
.rb-tile__t { color:#fff; font-family:var(--serif); font-size:1.02rem; line-height:1.2; text-shadow:0 1px 8px rgba(0,0,0,.35); }
.rb-tile__badge { position:absolute; top:.7rem; left:.7rem; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; background:rgba(255,255,255,.92); color:var(--oro-scuro); padding:.28rem .55rem; }
.rb-tile__badge--shooting { background:rgba(28,26,23,.82); color:#fff; }
.rb-tile[hidden]{ display:none; }
/* Galleria del singolo project */
.pj-gallery { column-count:3; column-gap:var(--s-2); margin-top:var(--s-4); }
@media(max-width:900px){ .pj-gallery { column-count:2; } }
@media(max-width:520px){ .pj-gallery { column-count:1; } }
.pj-gallery img { width:100%; display:block; margin-bottom:var(--s-2); break-inside:avoid; cursor:zoom-in; }
/* Crediti */
.credits { margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid rgba(133,113,77,.28); }
.credits__t { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--oro-scuro); margin-bottom:.5rem; }
.credits__list { font-size:.9rem; color:var(--testo-soft); line-height:1.9; }
.credits__list span { display:inline-block; margin-right:1rem; white-space:nowrap; }

/* ===== DICONO DI NOI (muro recensioni) ===== */
.reviews-head .stars { color:var(--oro); letter-spacing:.18em; font-size:1.15rem; display:block; margin:.6rem 0 .3rem; }
.reviews-head .verified { font-size:.78rem; letter-spacing:.08em; color:var(--testo-soft); }
.reviews-masonry { column-count:2; column-gap:var(--s-3); margin-top:var(--s-5); }
@media(max-width:640px){ .reviews-masonry { column-count:1; } }
.review-card, .review-photo { break-inside:avoid; margin-bottom:var(--s-3); }
.review-card { background:#fff; border:1px solid rgba(34,34,34,.1); padding:clamp(1.3rem,3vw,1.9rem); }
.review-card__stars { color:var(--oro); letter-spacing:.1em; font-size:.82rem; margin-bottom:.7rem; }
.review-card p { color:var(--testo); line-height:1.65; margin:0; }
.review-card cite { display:block; margin-top:1rem; font-style:normal; font-weight:600; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--oro-scuro); }
.review-card cite::before { content:"— "; }
.review-photo { overflow:hidden; }
.review-photo img { width:100%; display:block; }

/* Testo editoriale sotto la gallery negli hub collezioni (leggibile, non muro) */
.hub-body { max-width: 68ch; margin-inline: auto; }
.hub-body p { color: var(--testo-soft); line-height: 1.75; margin-bottom: var(--s-2); }
.hub-body p:last-child { margin-bottom: 0; }

/* ── INFORMATIVE (privacy / cookie), 06/08 ──────────────────────────────────────
   Un testo legale è fatto di molti capitoli corti: senza una regola dedicata gli H2
   ereditano la misura dei titoli editoriali e ogni sezione sembra l'inizio di una
   pagina nuova. Qui servono titoletti CALMI e un'aria che separi i capitoli più di
   quanto separi i paragrafi — è l'unica cosa che rende scorribile un documento così.
   ⚠️ `.legal-body h2` e non `.legal-body > h2`: il testo arriva da un require e i
   paragrafi non sono sempre figli diretti. */
.legal-body h2 {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  letter-spacing: .02em;
  color: var(--testo);
  margin-top: var(--s-4);
  margin-bottom: var(--s-2);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body strong { color: var(--testo); font-weight: 600; }
/* i link nel testo DEVONO vedersi: stessa regola dei corpi editoriali (lezione 14/07) */
.legal-body a { color: var(--oro-scuro); text-decoration: underline; text-underline-offset: 3px; }
.legal-date {
  margin-top: var(--s-4);
  padding-top: var(--s-2);
  border-top: 1px solid rgba(34,34,34,.12);
  font-size: .9rem;
  color: var(--testo-soft);
}

/* ⚠️ RIMOSSI (Fase 0, 14/07): .juliet-price · .tulle-grid · .tulle-aside.
   Erano residui arrivati insieme al tema dell'hub e NESSUN satellite li usava
   (verificato). Uno era una trappola vera: `.tulle-grid` avrebbe applicato regole
   dell'hub — griglia a 3 colonne, max 560px — a un ipotetico blocco omonimo del sito
   TULLE che sta per nascere, e nessuno avrebbe capito da dove arrivavano.
   Il tema base contiene solo ciò che serve a TUTTI: quello di un sito solo sta
   in {sito}/theme-site.css. */

/* Percorso (4 step) */
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--s-3); margin-top: var(--s-5); counter-reset: step; }
.step { padding-top: var(--s-3); border-top: 2px solid var(--oro); }
.step::before { counter-increment: step; content: "0" counter(step); font-family:var(--serif); font-size:1.5rem; color:var(--oro); display:block; margin-bottom:var(--s-1); }
.step h3 { font-size:1.1rem; margin-bottom:.25rem; }
.step p { font-size: var(--fs-small); color: var(--testo-soft); }
@media (max-width: 760px){ .steps { grid-template-columns: repeat(2,1fr); } }
.steps--3 { grid-template-columns: repeat(3,1fr); }   /* percorso a 3 fasi (es. su misura) */
@media (max-width: 760px){ .steps--3 { grid-template-columns: 1fr; } }

/* Cards Scarpe/Accessori */
.cards { display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-4); }
.card { position:relative; aspect-ratio: 16/10; overflow:hidden; display:grid; place-items:center; color:#fff; text-align:center; }
.card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition: transform .6s var(--ease); }
.card:hover img { transform: scale(1.04); }
.card::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,.32); z-index:1; }
.card > div { position:relative; z-index:2; }
.card h3 { color:#fff; font-size: clamp(1.55rem, 2.6vw, 2.1rem); }
.card .btn { margin-top: var(--s-3); }
/* card con etichetta-CTA lunga ("Scopri la collezione di…", cliente 03/08):
   corpo ridotto + aria ai lati — il testo non deve mai toccare i bordi (Marco). */
.cards--cta .card > div { padding-inline: clamp(1.2rem, 5vw, 2.5rem); }
.cards--cta .card h3 { font-size: clamp(1.1rem, 1.7vw, 1.45rem); letter-spacing: .04em; line-height: 1.35; }
@media (max-width: 680px){ .cards { grid-template-columns: 1fr; } }

/* Recensioni — slogan in SCRIPT + 3 card orizzontali con ombra leggerissima.
   Fondo bianco, niente cornice. Spigoli vivi (radius 0). Stacca dalle FAQ
   su 3 assi: tipografia (script), layout (orizzontale) e profondità (ombra). */

/* Sezione più vicina al blocco sovrastante (top ridotto) */
#recensioni { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Slogan in script (Parisienne) — registro diverso dai titoli maiuscoli */
.reviews-head { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.reviews-title {
  font-family: var(--script); font-weight: 400;
  text-transform: none; letter-spacing: 0;
  font-size: clamp(2.2rem, 5vw, 2.5rem); line-height: 1.08;
  color: var(--oro);
}

/* 3 card in riga (orizzontale); su mobile diventano 1 colonna */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 0;
  align-items: stretch;
}

/* Card: bianca, spigoli vivi, ombra leggerissima (niente cornice) */
.review {
  margin: 0;
  text-align: left;
  background: #fff;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  box-shadow: 0 12px 28px -12px rgba(28,26,23,.18);   /* leggera, accentata sotto */
  display: flex; flex-direction: column; gap: var(--s-3);
}

/* Citazione in Playfair tondo (leggibile) */
.review blockquote {
  margin: 0;
  font-family: var(--serif); font-style: normal; font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6;
  color: var(--testo);
}

/* Autore in fondo alla card (allineato anche con citazioni di lunghezza diversa) */
.review figcaption { margin-top: auto; }
.review .who {
  font-family: var(--sans); font-style: normal;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro-scuro);
}
.review .who::before { content: "\2014\00a0"; color: var(--oro); }  /* em dash + spazio insecabile */

/* Mobile: card impilate */
@media (max-width: 820px) {
  .reviews { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* Dove trovarci */
.sedi { display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-4); }
.sede h3 { font-size:1.25rem; } .sede p { color:var(--testo-soft); } .sede a { color:var(--oro); border-bottom:1px solid currentColor; }
@media (max-width: 680px){ .sedi { grid-template-columns: 1fr; } }

/* CTA finale */
.cta-final { text-align:center; padding-block: clamp(5.5rem, 15vw, 8.5rem); } /* più alto: stacca dal resto */
.cta-final h2 { color:#fff; } .cta-final p { color: rgba(255,255,255,.8); margin: var(--s-2) auto var(--s-4); max-width:44ch; }

/* Page-hero editoriale (Atelier + future pagine): immagine a tutta larghezza + overlay + testo centrato */
.page-hero { position: relative; min-height: clamp(58vh, 70vh, 78vh); display: grid; place-items: center;
  text-align: center; color: #fff; padding: clamp(4rem, 10vh, 7rem) clamp(1rem, 5vw, 2rem); overflow: hidden; }
.page-hero > img, .page-hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(24,22,19,.42), rgba(24,22,19,.6)); }
.page-hero__inner { position: relative; z-index: 2; max-width: 900px; }
.page-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.16; }
.page-hero__sub { color: rgba(255,255,255,.92); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.6; margin: var(--s-3) auto 0; max-width: 760px; }
.page-hero .hero__scroll { z-index: 2; }

/* Carousel orizzontale (es. showroom atelier) — scroll/swipe, fail-safe senza JS */
.carousel { display: flex; gap: clamp(.75rem, 2vw, 1.25rem); overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.carousel::-webkit-scrollbar { display: none; }   /* niente barra durante lo scroll */
.carousel__item { flex: 0 0 auto; width: clamp(210px, 26vw, 290px); aspect-ratio: 3/4; overflow: hidden;
  background: var(--grigio); scroll-snap-align: start; }
.carousel__item img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .6s var(--ease); }
.carousel__item:hover img { transform: scale(1.04); }
.carousel-wrap { position: relative; }
.carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: #fff; color: var(--testo); font-size: 1.6rem; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: opacity .2s var(--ease), background .2s var(--ease); }
.carousel__nav:hover { background: var(--greige); }
.carousel__prev { left: .4rem; } .carousel__next { right: .4rem; }
.carousel__nav[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 700px){ .carousel__nav { display: none; } }   /* su mobile: swipe */

/* Split "bilanciato": la foto segue l'altezza del testo (non torreggia) — usato sulle pagine editoriali */
.split--balanced .media-frame { position: relative; height: 100%; min-height: clamp(460px, 50vh, 580px); max-height: none; }  /* foto affiancata un po' più alta del testo (~100px+) */
.split--balanced .media-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
@media (max-width: 860px){ .split--balanced .media-frame { aspect-ratio: 3/4; height: auto; min-height: 0; } }

/* "Dove trovarci" — PROVA fascia foto SCURA + titolo bianco + box bianchi */
.find-band .eyebrow { color: var(--oro-chiaro); }
.find-band h2 { color: #fff; }
.find-cards { display: flex; gap: clamp(1rem, 3vw, 2rem); justify-content: center; flex-wrap: wrap; margin: clamp(1.6rem,4vw,2.5rem) auto clamp(1rem,2vw,1.4rem); }
.find-card { background: #fff; padding: clamp(1.5rem, 3vw, 2.25rem); flex: 1 1 300px; max-width: 380px; box-shadow: 0 16px 40px rgba(0,0,0,.28); text-align: center; }
.find-card h3 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: .55rem; }
.find-card p { color: var(--testo-soft); line-height: 1.5; margin: 0 0 .35rem; }
.find-card__hours { font-size: .9rem; color: var(--oro-scuro); font-weight: 600; margin: 0 0 .35rem; }
.find-card__note { font-size: .86rem; line-height: 1.5; margin-bottom: 1.1rem; }  /* dettaglio leggero, non invadente */
.find-phones { color: rgba(255,255,255,.9); }
.find-phones a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.6); }
@media (max-width: 600px){ .find-band { padding-top: clamp(3.75rem, 12vw, 5.5rem); } }   /* più spazio in alto (riempito dalla foto, non bianco) */

/* Parallax leggero: le fasce widescreen con foto di sfondo restano "fisse" allo scroll → dinamicità.
   Solo desktop (iOS non gestisce bene fixed) e disattivata con prefers-reduced-motion. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .find-band, .cta-final, .prenota { background-attachment: fixed; }
}

/* ══ BREADCRUMB — siti a più pagine (Fase 0, 14/07) ═══════════════════════════════
   Discreto: è un'indicazione, non un elemento di design. Sta sotto la navbar, prima
   dell'H1. La voce corrente NON è un link (non si linka a sé stessa) e porta
   aria-current="page": è ciò che dice "sei qui" a chi naviga con lo screen reader.
   Su una landing non compare mai: il componente esce subito se $crumbs è vuoto. */
/* ══ BREADCRUMB — un sussurro, non un elemento d'arredo (Marco 16/07) ═══════════════
   Il fondino pieno provato prima era sbagliato: una fascia a tutta larghezza sotto la
   navbar legge come una SECONDA barra di navigazione, e questo è un elemento che deve
   solo dire "sei qui" e dare la strada del ritorno. Niente fondo, niente filetto: testo
   piccolo e tenue, appoggiato al contenuto che descrive.
   ⚠️ NIENTE ORO a riposo, per due motivi che vanno insieme: (1) il breadcrumb sta
      esattamente SOPRA l'occhiello, che è già oro maiuscolo → due righe dorate impilate
      e l'occhiello smette di annunciare la sezione; (2) la regola del progetto è "oro
      solo negli occhielli, con parsimonia" — un accento usato ovunque non è più un
      accento. L'oro torna sull'HOVER: dice "sono cliccabile" nel momento in cui te lo
      chiedi, e a riposo tace.
   padding-block sotto = 0: lo spazio verso il titolo lo dà .page-intro/.art, uno solo dei
   due deve decidere quella distanza (altrimenti si sommano e non si capisce chi comanda).
   ⚠️ COLORE MISURATO, non scelto a occhio. Il "tenue" che avevo messo (opacità .6) faceva
      3.10:1 contro i 4.5:1 che il testo piccolo richiede: a 11px non si leggeva. E il colore
      è SOLIDO, non un rgba: l'alpha cambia rapporto col fondo sotto, e questa barra un
      domani può capitare su una banda beige. #6b6863 tiene su entrambi (5.55 su bianco,
      4.92 sul beige). La discrezione la fanno il CORPO e il silenzio dell'oro, non lo
      sbiadire il testo finché non si legge più. */
.crumbs { padding-block: var(--s-2) 0; font-size: .72rem; color: #6b6863; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "›"; margin-right: .5rem; color: rgba(34,34,34,.22); }
/* I link ereditano il colore tenue: a riposo la riga è UNA cosa sola, non tre link e una
   scritta. L'oro (e la sottolineatura) arrivano solo quando ci passi sopra. */
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--oro-scuro); text-decoration: underline; text-underline-offset: 3px; }
/* ── LA PAGINA CORRENTE: si TRONCA, ma solo a schermo (Marco 16/07) ─────────────────
   Il titolo di un articolo può essere lunghissimo e mandava il breadcrumb a tre righe:
   una riga di servizio che pesa come un paragrafo, e per giunta ripete parola per parola
   l'H1 che sta due centimetri sotto. Basta un cenno.
   🔴 IL TAGLIO È SOLO VISIVO — text-overflow, non substr() in PHP. Nell'HTML il titolo
      resta INTERO, ed è quello che conta: è il `name` dentro lo schema BreadcrumbList che
      Google usa per costruire "tullesposatorino.it › Guida › Sposa alternativa…" nei
      risultati, ed è quello che legge uno screen reader. Tagliarlo nei dati per una ragione
      di impaginazione significherebbe consegnare a Google un titolo mozzato.
   Un filo più scura delle altre voci: è l'unica che non è un link, e basta pochissimo per
   distinguerla — se la scurisco troppo diventa lei il titolo della pagina. */
.crumbs [aria-current="page"] {
  color: #56534e;
  display: inline-block; vertical-align: bottom;   /* serve per far agire max-width */
  max-width: 38ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 760px) { .crumbs [aria-current="page"] { max-width: 16ch; } }

/* La voce di menu della pagina in cui ci si trova. Sottolineatura oro: il colore da solo
   non basterebbe (WCAG 1.4.1), e comunque la classe la mette il router, non il markup. */
.nav__menu .is-current > a { color: var(--oro); box-shadow: inset 0 -1px 0 currentColor; }

/* CTA banner scuro compatto (pagine brand/collezione) — orizzontale, basso, contrastato */
.cta-banner { background: var(--scuro); color:#e9e4dc; padding-block: clamp(1.9rem, 3.6vw, 2.6rem); }
.cta-banner__inner { display:flex; align-items:center; justify-content:space-between; gap: clamp(1.4rem, 4vw, 3rem); flex-wrap:wrap; }
.cta-banner .eyebrow { color: var(--oro-chiaro); margin-bottom:.5rem; }
.cta-banner h2 { color:#fff; margin:0; font-size: clamp(1.35rem, 2.5vw, 1.85rem); }
.cta-banner__actions { flex-shrink:0; }
.cta-banner .link-arrow--light { color: rgba(255,255,255,.78); }
.cta-banner .link-arrow--light:hover { color:#fff; }
@media (max-width: 720px){
  .cta-banner__inner { flex-direction:column; align-items:center; text-align:center; }
  .cta-banner .eyebrow::after { margin-inline:auto; }
  .cta-banner__actions { justify-content:center; width:100%; }
  .cta-banner__name { display:block; } /* nome collezione a capo su mobile */
}

/* PRENOTA — fascia fotografica con 2 scelte macro (abito / scarpe) */
.prenota { color:#fff; }
.prenota .eyebrow { color: var(--oro-chiaro); }
.prenota h2 { color:#fff; text-shadow: 0 1px 16px rgba(0,0,0,.45); }
.prenota .lead { color: rgba(255,255,255,.9); text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.prenota .eyebrow { text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.prenota-choices { display:flex; gap: var(--s-3); justify-content:center; flex-wrap:wrap; margin: var(--s-5) auto var(--s-3); }
.choice { display:block; min-width:300px; padding:1.8rem 2rem; text-align:center;
  border:1px solid rgba(255,255,255,.28); background: rgba(22,20,17,.46); backdrop-filter: blur(3px);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.choice:hover { background: rgba(22,20,17,.68); border-color:#fff; transform: translateY(-3px); }
.choice__t { display:block; font-family:var(--serif); font-size:1.5rem; color:#fff; }
.choice__sub { display:block; margin-top:.35rem; font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: #d8c6a0; }
.choice .go { display:inline-block; margin-top:1rem; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; }
.choice .go::after { content:" →"; transition: transform .25s var(--ease); display:inline-block; }
.choice:hover .go::after { transform: translateX(4px); }
.prenota-phones { font-size:.9rem; color: rgba(255,255,255,.78); margin-top: var(--s-3); }
.prenota-phones a { color:#fff; border-bottom:1px solid rgba(255,255,255,.4); }
@media (max-width:560px){ .choice { min-width:0; width:100%; } }

/* FAQ accordion (riusabile). Senza JS le risposte restano visibili (.faq--ready la aggiunge il JS) */
.faq { max-width: 820px; margin: var(--s-5) auto 0; }
.faq__item { border-bottom: 1px solid rgba(34,34,34,.14); }
.faq__q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  background:none; border:0; padding:1.25rem 0; cursor:pointer; text-align:left;
  font-family: var(--serif); font-size: 1.1rem; color: var(--testo); transition: color .2s; }
.faq__q:hover { color: var(--oro-scuro); }
.faq__ico { position:relative; flex:0 0 16px; width:16px; height:16px; }
.faq__ico::before, .faq__ico::after { content:""; position:absolute; top:50%; left:0; width:16px; height:2px; margin-top:-1px; background: var(--oro); transition: transform .3s var(--ease); }
.faq__ico::after { transform: rotate(90deg); }
.faq__item.open .faq__ico::after { transform: rotate(0); }
.faq__a { overflow:hidden; transition: max-height .35s var(--ease); }
.faq__a p { padding-bottom: 1.25rem; color: var(--testo-soft); max-width: 72ch; }
.faq--ready .faq__a { max-height: 0; }

/* ============================================================================
   FOOTER
   ========================================================================== */
.footer { background: #fff; color: var(--testo); padding-block: var(--s-6) var(--s-4); font-size:.9rem; border-top: 1px solid rgba(34,34,34,.12); }
/* 3 zone: identità | ATELIER | SPAZIO ESPOSITIVO  (rev. 17/07)
   Prima erano 2 — e le due sedi stavano IMPILATE nella stessa colonna: una torre di dieci
   righe accanto a un francobollo (logo da 18px, una frase, i social). Sbilanciato 3 a 1.
   Le avevo impilate per non farle sembrare due atelier; poi ognuna ha preso un NOME e un
   RUOLO, e la difesa è passata alle PAROLE. A quel punto la colonna era un prezzo pagato
   per niente. La gerarchia che chiede il cliente («prima Idea Sposa Couture», brief §12)
   qui è l'ORDINE DI LETTURA: atelier a sinistra.
   Le colonne NON sono uguali: quella dell'atelier è la più larga — ha più cose e vale di più. */
/* ⚠️ auto-fit e NON "1fr 1.15fr 1.05fr": le colonne sono 3 su Tulle e Scarpe (identità +
   atelier + spazio) ma 2 su JULIET, che lo Spazio Tulle non lo nomina proprio
   (SITE_MOSTRA_SPAZIO). Con le colonne contate a mano, su Juliet ne restava una VUOTA a
   destra e il footer sembrava monco — e nessuno se ne accorge finché non lo guarda.
   Così la griglia conta da sola quante gliene arrivano. */
.footer__grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(1.6rem,3.5vw,3.2rem); align-items:start; }
.footer__logo { height: 18px; width:auto; }   /* logo PICCOLO */
.footer__tag { max-width: 32ch; color: var(--testo-soft); margin-top: var(--s-2); }
/* la riga-firma «Parte dell'esperienza…» sta SUBITO sotto il marchio e il resto STACCATO (cliente 03/08) */
.footer__tag--firma { margin-top: var(--s-2); }
.footer__tag--firma + .footer__tag { margin-top: var(--s-3); }
.footer__social { display:flex; flex-direction:column; gap:.5rem; margin-top: var(--s-3); }
.footer__social a { display:inline-flex; align-items:center; gap:.5rem; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--oro-scuro); }
.footer__soc-i { width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.footer h3 { color: var(--oro-scuro); font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-bottom: var(--s-2); }
.footer nav.footer__col a { display:block; padding:.2rem 0; color: var(--testo); }
.footer p { color: var(--testo-soft); margin-bottom:.4rem; line-height:1.6; }
.footer__contacts strong { color: var(--testo); font-weight:600; }
.footer__note { font-size:.8rem; color: var(--testo-soft); }
.footer__place { margin-bottom: var(--s-3); }
.footer__place p { margin-bottom:.15rem; line-height:1.55; }

/* ── IL NOME DELLA SEDE — in SERIF (Marco 17/07) ─────────────────────────────────
   🔴 Prima era `.footer__place-name { color: var(--testo) }` — cioè "evidenziato" con
      esattamente il colore che `.footer` dà già a tutto: **non faceva niente**. Il nome
      pesava come l'indirizzo, l'indirizzo come il telefono, e il footer era un muro di
      dieci righe tutte uguali («sembrano tutte uguali» — ed era vero).
   Il serif è il segnale giusto: su tutto il sito è la voce dei TITOLI, il bastone quella
   dei DATI. Un nome di luogo in serif si stacca senza aggiungere colore — e senza
   competere con l'oro dell'occhiello che gli sta sopra, che è l'altro livello.
   Tre livelli, non uno: occhiello oro (la sezione) → nome serif (il luogo) → dati sans.

   ⚠️ `p.footer__place-name` e NON `.footer__place-name`: qui sopra c'è
   `.footer__place p { margin-bottom:.15rem; line-height:1.55 }`, che vale (0,1,1) — una
   classe PIÙ un elemento. La sola classe vale (0,1,0) e **perde**, per specificità, non
   per ordine: il font passava ma margine e interlinea del nome venivano spenti in
   silenzio. Con `p.` la regola vale (0,2,1) e vince sempre, ovunque finisca nel theme.css
   generato dal sync. (Stesso motivo di `p.footer__role` qui sotto: sbagliato due volte
   nello stesso file, nello stesso giorno.) */
.footer__place p.footer__place-name {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--testo);
  margin-bottom: .2rem;
}

/* ── LA RIGA CHE DICE A COSA SERVE LA SEDE ────────────────────────────────────────
   È la frase che impedisce a una sposa di presentarsi a Piazza Vittorio per provare
   l'abito. Quindi: più piccola del resto, ma **leggibile** — non un dettaglio da saltare.
   `p.footer__role` = specificità (0,2,1): batte `.footer__place p` (0,2,0) sempre, senza
   dipendere dall'ordine nel theme.css generato dal sync.
   Un filo d'aria sotto: la stacca dai telefoni, che sono un'altra cosa. */
.footer__place p.footer__role {
  color: var(--testo-soft);
  font-size: .84rem;
  margin: .25rem 0 0;
  max-width: 46ch;
}

/* ── L'ARIA VA FRA I GRUPPI, NON FRA LE RIGHE ────────────────────────────────────
   È l'altra metà del "sembrano tutte uguali": con .15rem uguale ovunque, dieci righe
   diventano un blocco unico e l'occhio non trova nessuna struttura. Ma non servono dieci
   spazi — ne serve UNO, nel punto in cui cambia l'argomento:
     nome + indirizzo + ruolo  = «chi sono e dove»
     telefoni + orari + mappa + email = «come mi raggiungi»
   Sono due cose diverse e devono sembrare due cose diverse. Lo spazio è informazione. */
.footer__lines { margin-top: var(--s-2); }

/* (Qui c'era `.footer__place--secondaria`, il filetto che separava le due sedi impilate.
   Rimossa il 17/07 col passaggio a due colonne: la classe non esiste più nel markup e una
   regola CSS senza il suo HTML è peso morto che il prossimo che legge crede attivo.) */
.footer__hours-line { font-size:.85rem; color: var(--testo-soft); margin-top:.1rem; }
.footer__hours-line span { color: var(--oro-scuro); font-weight:600; }
.footer a { color: var(--testo); transition: color .2s; } .footer a:hover { color: var(--oro-scuro); }

/* Righe di contatto con icona moderna (indirizzo/telefono/email) — Marco 20/07.
   Flex allineato in cima: se il testo va a capo resta incolonnato sotto sé stesso, non
   sotto l'icona. L'icona è oro (stesso oro degli occhielli del footer). */
.footer__ci { display: flex; align-items: flex-start; gap: .5rem; }
.footer__ci > span, .footer__ci > a { min-width: 0; }   /* il testo può andare a capo nel flex */
.footer__ico {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin-top: .28em;                 /* allineamento ottico: icona centrata sulla 1ª riga (Marco 20/07) */
  color: var(--oro-scuro);
}
/* Il link ecosistema DENTRO la frase in prosa (footer__tag: «Parte dell'esperienza Idea
   Sposa Couture») dev'essere riconoscibile come link — color:var(--testo) lo rendeva
   identico al testo intorno (stessa lezione di link-nel-testo-devono-vedersi). Oro scuro +
   sottolineatura. NON tocca i link "standalone" del footer (contatti, Privacy, Agenzia
   Comunica), che sono già isolati e riconoscibili per posizione. Audit 20/07. */
.footer__tag a { color: var(--oro-scuro); text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom { margin-top: var(--s-5); padding-top: var(--s-3); border-top:1px solid rgba(34,34,34,.12); display:flex; justify-content:space-between; gap:var(--s-2); flex-wrap:wrap; font-size:.78rem; color:var(--testo-soft); }
/* Sotto i 900px le tre colonne non ci stanno: l'identità passa a tutta larghezza e le DUE
   SEDI restano affiancate — è il confronto che serve, e sono la parte utile del footer.
   Sotto i 560 si impilano, e l'ordine (atelier → spazio) è già quello giusto nel markup:
   la gerarchia del cliente regge anche da telefono senza una riga di CSS in più. */
@media (max-width: 900px){
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px){ .footer__grid { grid-template-columns: 1fr; } }

/* ============================================================================
   Micro-interazioni (fade-in allo scroll)
   ========================================================================== */
/* Nascondi SOLO quando main.js attiva le animazioni (html.anim-on aggiunta dal JS).
   Senza JS, JS in errore o reduced-motion → la classe non c'è → contenuto SEMPRE visibile. */
html.anim-on [data-animate] { opacity:0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.anim-on [data-animate].in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================================
   UX: scroll cue hero · stagger · floating (WhatsApp + torna su) · lightbox
   ========================================================================== */

/* 2) Indicatore "scorri" nell'hero (linea che "cola" verso il basso) */
.hero__scroll { position:absolute; left:50%; bottom: clamp(1rem,3.5vh,2.2rem); transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; }
.hero__scroll i { display:block; width:1px; height:38px; background: rgba(255,255,255,.45); position:relative; overflow:hidden; }
.hero__scroll i::after { content:""; position:absolute; inset:0; background:#fff; transform:translateY(-100%); animation: heroCue 2s var(--ease) infinite; }
@keyframes heroCue { 0%{ transform:translateY(-100%) } 55%{ transform:translateY(100%) } 100%{ transform:translateY(100%) } }

/* 8) Stagger: i figli di un gruppo entrano in sequenza (.in lo aggiunge main.js) */
html.anim-on [data-stagger] > * { transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.anim-on [data-stagger]:not(.in) > * { opacity:0; transform: translateY(16px); }
[data-stagger].in > * { opacity:1; transform:none; }
[data-stagger].in > *:nth-child(2){ transition-delay:.08s }
[data-stagger].in > *:nth-child(3){ transition-delay:.16s }
[data-stagger].in > *:nth-child(4){ transition-delay:.24s }
[data-stagger].in > *:nth-child(5){ transition-delay:.32s }
[data-stagger].in > *:nth-child(6){ transition-delay:.40s }

/* 4)+5) Pulsanti flottanti: WhatsApp (sempre) + Torna su (allo scroll) */
.floaters { position: fixed; right: clamp(.9rem,2.5vw,1.4rem); bottom: clamp(.9rem,2.5vw,1.4rem); z-index:90;
  display:flex; flex-direction:column; gap:.6rem; align-items:center; }
.fab { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; cursor:pointer; border:0;
  box-shadow:0 10px 26px rgba(28,26,23,.22); transition: transform .25s var(--ease), background .25s var(--ease), opacity .25s, visibility .25s; }
.fab svg { width:25px; height:25px; display:block; }
.fab--wa { background: var(--oro-scuro); color:#fff; }   /* oro-scuro: contrasto AA dell'icona bianca */
.fab--wa:hover { background: var(--oro-scuro); transform: translateY(-2px); }
.fab--top { background:#fff; color:var(--testo); border:1px solid rgba(34,34,34,.15); opacity:0; visibility:hidden; transform:translateY(10px); }
.fab--top.show { opacity:1; visibility:visible; transform:none; }
.fab--top:hover { background: var(--greige); }

/* 9) Lightbox immagini (riusabile: img[data-lightbox]) */
body.lb-open { overflow:hidden; }
/* lightbox come GALLERIA (quick-view): COLONNA verticale → nome(sopra) · foto · tasto, niente accavallamenti */
.lightbox { position:fixed; inset:0; z-index:200; background: rgba(20,18,15,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: clamp(.7rem,2vh,1.2rem);
  padding: clamp(3.2rem,7vh,4.5rem) clamp(1rem,4vw,3rem) clamp(1.2rem,4vh,2rem);
  opacity:0; visibility:hidden; transition: opacity .3s var(--ease); }
.lightbox.open { opacity:1; visibility:visible; }
.lightbox__close { position:absolute; top: clamp(.6rem,3vw,1.4rem); right: clamp(.6rem,3vw,1.4rem);
  width:46px; height:46px; border:0; background:none; color:#fff; font-size:2rem; line-height:1; cursor:pointer; z-index:2; }
.lightbox__cap { color:rgba(255,255,255,.9); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; text-align:center; margin:0; flex-shrink:0; }
.lightbox__stage { display:flex; align-items:center; justify-content:center; width:100%; max-width:min(92vw,720px); flex:1 1 auto; min-height:0; }
.lightbox__stage img { max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 24px 70px rgba(0,0,0,.5); }
.lightbox__nav { position:absolute; top:50%; transform:translateY(-50%); background:none; border:0; color:#fff;
  font-size:2.6rem; line-height:1; cursor:pointer; padding:.4rem .8rem; opacity:.75; transition:opacity .2s; }
.lightbox__nav:hover { opacity:1; }
.lightbox__prev { left: clamp(.2rem,2vw,1.5rem); }
.lightbox__next { right: clamp(.2rem,2vw,1.5rem); }
.lightbox__nav[hidden] { display:none; }
.lightbox__cta { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; flex-shrink:0; }
.lightbox__cta .btn { display:inline-flex; align-items:center; white-space:nowrap; } /* icona + testo su una riga */

@media (prefers-reduced-motion: reduce) {
  .hero__scroll i::after { animation:none; }
  .hero__media { transform:none !important; }   /* niente parallax */
  .media-frame img, .models .model img, .card img { transition:none; }
  .media-frame:hover img, .models .model:hover img, .card:hover img { transform:none; } /* niente zoom */
}
/* hero scroll cue: nascondi se poco spazio verticale (es. telefono in landscape) */
@media (max-height: 560px) { .hero__scroll { display:none; } }

/* ============================================================================
   PAGINE INTERNE — page-head · breadcrumb · catalogo · paginazione · prodotto · 404
   ========================================================================== */
.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.page-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); text-transform: uppercase; letter-spacing:.04em; }
.page-head .lead { max-width: 62ch; }

.breadcrumb { font-size:.78rem; letter-spacing:.03em; color: var(--testo-soft); margin-bottom: var(--s-3); }
.breadcrumb a { color: var(--oro-scuro); }
.breadcrumb a:hover { color: var(--oro); }
.breadcrumb span { margin-inline:.4rem; opacity:.55; }

/* Catalogo (griglia prodotti) */
.catalog { display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.2vw, 1.75rem); }
.catalog__item { display:block; color: var(--testo); }
/* aspect 2:3 = ratio nativo della maggioranza (800×1200): le 2:3 entrano perfette,
   le 3:4 si rifilano solo ai lati (modella centrata) → mai testa/orlo tagliati */
.catalog__media { display:block; aspect-ratio: 2/3; overflow:hidden; background: var(--grigio); }
.catalog__media img { width:100%; height:100%; object-fit:cover; }
/* fronte/retro: la 2ª foto compare all'hover (desktop) */
.catalog__img { position:absolute; inset:0; transition: opacity .5s var(--ease); }
.catalog__img--back { opacity:0; }
.catalog__item:hover .catalog__img--back { opacity:1; }
.catalog__title { display:block; margin-top: var(--s-2); font-family: var(--serif); font-size: 1.05rem; line-height:1.3; }
@media (max-width: 900px){ .catalog { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 620px){ .catalog { grid-template-columns: repeat(2,1fr); gap: var(--s-2); } }

/* Paginazione (legacy) + Carica altri */
.pager { display:flex; align-items:center; justify-content:space-between; gap: var(--s-3); margin-top: var(--s-6); }
.pager__info { font-size:.85rem; color: var(--testo-soft); letter-spacing:.05em; }
.loadmore { text-align:center; margin-top: var(--s-5); }

/* Scheda prodotto */
.product-grid { display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items:start; }
.product-gallery .media-frame { min-height:0; max-height:none; height:auto; }
.product-gallery__main { aspect-ratio: 2/3; }
.product-gallery__grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-2); }
.product-gallery__grid .media-frame { aspect-ratio: 2/3; }
.product-info { position: sticky; top: calc(var(--nav-h) + var(--s-3)); }
.product-info h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-top: var(--s-1); }
.product-price { font-family: var(--serif); color: var(--oro-scuro); font-size: 1.15rem; margin: var(--s-2) 0 0; }
.product-cta { display:flex; gap: var(--s-2); flex-wrap:wrap; margin: var(--s-4) 0; }
.product-tags { font-size:.85rem; color: var(--testo-soft); display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-top: var(--s-3); }
.product-tags a { color: var(--oro-scuro); border-bottom:1px solid currentColor; }
.product-note { font-size:.82rem; color: var(--testo-soft); margin-top: var(--s-4); }
.product-note a { color: var(--oro-scuro); }
@media (max-width: 860px){
  .product-grid { grid-template-columns: 1fr; }
  .product-info { position: static; }
}

/* 404 */
.error-page { min-height: 60vh; display:grid; place-items:center; }

/* Pagina BRAND/COLLEZIONE — banda intestazione (fondino, 2 colonne) + galleria */
.brand-head { padding-block: clamp(1.75rem, 4vw, 3rem); }   /* banda più bassa */
.brand-head .breadcrumb { margin-bottom: var(--s-3); }
.brand-head__grid { display:grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(1.75rem,5vw,4rem); align-items:start; }
/* Titolo su 3 righe — uniforme: tutto maiuscolo, stessa dimensione, colore oro */
.brand-title { margin:0; line-height:1.14; }
.brand-title__pre, .brand-title__name, .brand-title__post { display:block;
  font-family:var(--serif); font-weight:500; text-transform:uppercase; letter-spacing:.04em;
  color: var(--oro); font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
/* testo SEO: corpo compatto (più piccolo, meno interlinea) */
.brand-head__text p { color: var(--testo-soft); font-size: .95rem; line-height: 1.6; margin-bottom: var(--s-2); text-wrap: pretty; }
.brand-head__text p:last-child { margin-bottom:0; }
@media (max-width: 820px){ .brand-head__grid { grid-template-columns: 1fr; gap: var(--s-3); align-items:start; } }
/* riga conteggio (incipit) in sans-serif — piccola, scura, "125 abiti" in bold */
.catalog-count { font-family: var(--sans); font-weight:400; color: var(--testo); margin-bottom: clamp(1.5rem,4vw,2.5rem);
  font-size: clamp(.9rem, 1.4vw, 1.05rem); }
.catalog-count strong { color: var(--testo); font-weight:700; }
/* sottotitolo in banda (sopra l'intro) */
.brand-head__text .brand-head__sub { font-family: var(--serif); color: var(--oro-scuro); font-weight: 600; font-size: 1.1rem; line-height: 1.3; margin-bottom: var(--s-3); text-wrap: balance; }
/* contenuti SEO sotto la gallery — 2 colonne: foto cover (sx, si adatta all'altezza del testo) + testi compatti (dx) */
.brand-content .split { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: stretch; gap: clamp(1.5rem,4vw,3.5rem); }
.brand-content .media-frame { position: relative; height: 100%; min-height: 0; max-height: none; }  /* niente vincoli "home" → il riquadro segue l'altezza dei testi */
.brand-content .media-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }  /* riempie il riquadro = altezza del blocco testo (non impone la propria altezza); nel crop tiene il volto */
.brand-content .brand-block + .brand-block { margin-top: var(--s-4); }
.brand-content .brand-block h2 { font-size: clamp(1.05rem,1.8vw,1.35rem); letter-spacing:.04em; margin-bottom: var(--s-1); }
.brand-content .brand-block p { color: var(--testo-soft); line-height: 1.6; margin: 0; }
.brand-content .brand-block ul { list-style: none; margin: .35em 0 0; padding: 0; }
.brand-content .brand-block li { position: relative; padding-left: 1.4em; margin-bottom: .3em; color: var(--testo-soft); line-height: 1.5; }
.brand-content .brand-block li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 1px; background: var(--oro); }
.brand-content .brand-block .is-placeholder { opacity: .55; }  /* "testo in arrivo" — segnaposto evidente */
@media (max-width: 860px){
  .brand-content .split { grid-template-columns: 1fr; }
  .brand-content .media-frame { aspect-ratio: 3/4; }   /* su mobile la foto torna a un riquadro proprio */
}

/* HUB collezioni — intestazione 2 colonne (riusa .brand-head) + griglia blocchi (cover + nome + riga SEO) */
.hub-head .brand-head__title h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; text-transform: uppercase; letter-spacing: .04em; }
.hub-head__tagline { font-family: var(--serif); font-style: italic; color: var(--testo); margin-top: var(--s-2); }
.hub-head h1 .h1-byline { display:block; text-transform:none; }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
/* hub con pochi blocchi (es. Tulle = solo Sole): centra invece di lasciare vuoto a destra */
.hub-grid--few { display: flex; flex-wrap: wrap; justify-content: center; }
.hub-grid--few .hub-card { width: min(340px, 100%); }
.hub-card { display: block; color: var(--testo); }
.hub-card__media { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--grigio); }
/* blocco "Prossimamente" (brand in arrivo, non cliccabile) */
.hub-card--soon { cursor: default; }
.hub-card--soon .hub-card__media img { filter: grayscale(.18); opacity: .92; }
.hub-card--soon .hub-card__name { color: var(--testo); }
.hub-card__badge { position: absolute; top: .6rem; left: .6rem; background: #fff; color: var(--testo);
  font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; padding: .3rem .6rem; }
.hub-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .7s var(--ease); }
.hub-card:hover .hub-card__media img { transform: scale(1.05); }
.hub-card__name { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.4rem); margin-top: var(--s-2); transition: color .25s var(--ease); }
.hub-card:hover .hub-card__name { color: var(--oro); }
.hub-card__seo { color: var(--testo-soft); font-size: .9rem; line-height: 1.5; margin-top: .35rem; }
.hub-mini-band { padding-block: clamp(1.8rem, 3.5vw, 2.75rem); }  /* box compatto, meno alto */
.hub-mini { max-width: 820px; margin-inline: auto; text-align: center; }
.hub-mini p { font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.55; color: var(--testo); margin: 0; }
@media (max-width: 900px){ .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .hub-grid { grid-template-columns: 1fr; } }
/* badge "New" sulle card catalogo */
.catalog__media { position: relative; }
.catalog__badge { position:absolute; top:.6rem; right:.6rem; z-index:2; background:#fff; color:var(--testo);
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; padding:.28rem .55rem; }

/* ===================== PRENOTA — chooser + form ===================== */
/* chooser: 4 percorsi — card orizzontali (testo a sx dominante, foto verticale a dx) */
.pren-choices { display:grid; grid-template-columns:repeat(2,1fr); gap: clamp(1.5rem,3.2vw,2.6rem); margin-top: clamp(1.6rem,3.5vw,2.75rem); }
.pren-card { display:flex; flex-direction:row; min-height: clamp(228px, 24vw, 266px); background:#fff; color:var(--testo); overflow:hidden;
  border:1px solid rgba(34,34,34,.10); transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); }
.pren-card:hover { transform: translateY(-4px); border-color: rgba(133,113,77,.5); box-shadow: 0 20px 44px -26px rgba(0,0,0,.45); }
/* testo = colonna principale (~60%), centrata verticalmente */
.pren-card__body { display:flex; flex-direction:column; justify-content:center; gap:.55rem; flex:1 1 60%; padding: clamp(1.5rem,3vw,2.1rem); }
.pren-card__tag { font-family:var(--sans); font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--oro); }
.pren-card__t { font-family:var(--serif); font-size: clamp(1.25rem,2.3vw,1.55rem); line-height:1.15; }
.pren-card__sub { color:var(--testo-soft); font-size:.95rem; line-height:1.55; }
.pren-card__go { font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--oro-scuro); margin-top:.5rem; }
/* foto = colonna verticale a dx, piena altezza → i ritratti non vengono tagliati */
.pren-card__media { flex:0 0 40%; overflow:hidden; background:var(--grigio); }
.pren-card__media img { width:100%; height:100%; object-fit:cover; object-position:center top; transition: transform .8s var(--ease); }
.pren-card:hover .pren-card__media img { transform: scale(1.05); }
.pren-phones { margin-top: clamp(2.2rem,4.5vw,3.25rem); color:var(--testo-soft); font-size:.95rem; line-height:1.85; }
.pren-phones span { display:block; }
.pren-phones a { color:var(--oro-scuro); text-decoration:none; font-weight:600; }
.pren-phones a:hover { text-decoration:underline; }
/* tablet: una colonna, card orizzontale a tutta larghezza (più respiro per la foto verticale) */
@media (max-width:900px){ .pren-choices { grid-template-columns:1fr; } }
/* mobile: card impilata, foto sopra (a tutta larghezza, alta per il ritratto) */
@media (max-width:560px){
  .pren-card { flex-direction:column; min-height:0; }
  .pren-card__body { order:2; }
  .pren-card__media { order:1; flex:none; height: clamp(230px,64vw,320px); }
}

/* form */
.container--form { max-width: 780px; }
.pren-form { margin-top: var(--s-2); }
.pren-form__grid { display:grid; grid-template-columns:1fr 1fr; gap: clamp(1rem,2.4vw,1.5rem); }
@media (max-width:640px){ .pren-form__grid { grid-template-columns:1fr; } }
.field { margin-bottom: clamp(1.1rem,2.4vw,1.6rem); border:0; padding:0; min-width:0; }
.field > label:not(.opt), .field legend { display:block; font-family:var(--sans); font-size:.82rem; font-weight:700;
  letter-spacing:.02em; color:var(--testo); margin-bottom:.5rem; }
.field legend small { display:inline; font-weight:400; text-transform:none; letter-spacing:0; color:var(--testo-soft); }
.req { color:var(--oro); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field textarea {
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--testo); background:#fff;
  border:1px solid rgba(34,34,34,.22); border-radius:0; padding:.75rem .85rem; transition:border-color .2s var(--ease); }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--oro); box-shadow:0 0 0 2px rgba(133,113,77,.14); }
.field textarea { resize:vertical; min-height:110px; }
.opts { display:flex; flex-direction:column; gap:.55rem; }
.opts--grid { display:grid; grid-template-columns:1fr 1fr; gap:.55rem .9rem; }
@media (max-width:640px){ .opts--grid { grid-template-columns:1fr; } }
.opt { display:flex; align-items:flex-start; gap:.55rem; font-family:var(--sans); font-size:.95rem; line-height:1.45; color:var(--testo-soft); cursor:pointer; }
.opt input { margin-top:.18rem; accent-color: var(--oro); flex:none; }
.opt span { flex:1; }
.field--privacy { margin-top:.4rem; }
.opt--privacy { font-size:.9rem; }
.opt--privacy a { color:var(--oro-scuro); }
.field--err input, .field--err textarea, .field--err .opts { border-color:#b3403a; }
.field__err { display:block; margin-top:.4rem; color:#b3403a; font-size:.82rem; }
.form-alert { border:1px solid #b3403a; background:#fbeeed; color:#8f2f2a; padding:.9rem 1.1rem; margin-bottom: var(--s-3); font-size:.92rem; }
.pren-form__note { color:var(--testo-soft); font-size:.85rem; }
.actions.center { justify-content:center; }
/* honeypot: fuori dallo schermo, invisibile ai bot-friendly ma non ai bot */
.hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* thank-you */
.thankyou h1 { margin-bottom: var(--s-3); }
.thankyou .actions { margin-top: var(--s-4); }

/* form a 2 colonne: aside (collezione in evidenza + sede + orari) · modulo */
.pren-layout { display:grid; grid-template-columns: 288px 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:start; margin-top: var(--s-3); }
.pren-aside { background: var(--grigio); padding: clamp(1.5rem,2.6vw,2rem); position: sticky; top: calc(var(--nav-h) + 1rem); }
.pren-aside .eyebrow { margin-bottom: var(--s-2); }
.pren-collezione { display:flex; flex-direction:column; gap:.3rem; padding-bottom: var(--s-3); margin-bottom: var(--s-3); border-bottom:1px solid rgba(133,113,77,.35); }
.pren-collezione__label { font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--oro-scuro); }
.pren-collezione__name { font-family:var(--serif); font-size: clamp(1.5rem,3vw,1.9rem); line-height:1.12; color:var(--testo); }
.pren-aside__sub { color:var(--testo-soft); font-size:.92rem; line-height:1.55; margin-bottom: var(--s-3); }
.pren-info { display:flex; flex-direction:column; gap: var(--s-2); margin-bottom: var(--s-3); }
.pren-info__row dt { font-family:var(--sans); font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--oro-scuro); margin-bottom:.2rem; }
.pren-info__row dd { margin:0; font-size:.94rem; line-height:1.5; color:var(--testo); }
.pren-info__note { display:block; margin-top:.35rem; color:var(--testo-soft); font-size:.84rem; }
.pren-orari { list-style:none; margin:0; padding:0; }
.pren-orari li { padding:.22rem 0; }
.pren-orari__g { display:block; font-size:.78rem; color:var(--testo-soft); }
.pren-orari__o { display:block; color:var(--testo); }
.pren-orari__o.is-closed { color:var(--testo-soft); font-style:italic; }
.pren-info__row a { color:var(--oro-scuro); text-decoration:none; }
.pren-info__row a:hover { text-decoration:underline; }
.pren-main__title { font-size: clamp(1.8rem,4vw,2.6rem); margin-bottom: var(--s-3); }
.pren-main .lead { margin-bottom: var(--s-4); }
@media (max-width: 900px){
  .pren-layout { grid-template-columns:1fr; gap: var(--s-4); }
  .pren-aside { position: static; }
}

/* ============================================================================
   COMPONENTI DEI SATELLITI (aggiunti al DNA dell'hub)
   ========================================================================== */

/* HERO a 3 foto — il cliente chiede "hero 3 foto" su TUTTI e 3 i satelliti.
   Trittico editoriale: foto in alto, testo sotto (leggibile, niente testo su foto). */
.hero-tri { padding-top: var(--nav-h); }
.hero-tri__pics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.hero-tri__pic { margin: 0; overflow: hidden; aspect-ratio: 3 / 4; }
.hero-tri__pic img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.hero-tri__txt { padding-top: var(--s-6); padding-bottom: var(--s-5); max-width: 42rem; }
.hero-tri__txt h1 { margin: .4rem 0 var(--s-2); }
.hero-tri__txt .lead { margin-bottom: var(--s-4); }

/* Su mobile: 3 foto affiancate diventano illeggibili → la prima grande, le altre due sotto */
@media (max-width: 700px) {
  .hero-tri__pics { grid-template-columns: 1fr 1fr; }
  .hero-tri__pic:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
}

/* Blocco NAP (indirizzo/telefoni/mappa) — pulito, una info per riga */
.nap { list-style: none; padding: 0; margin: var(--s-3) 0; }
.nap li { padding: .35rem 0; border-bottom: 1px solid rgba(34,34,34,.08); }
.nap li:last-child { border-bottom: 0; }

/* Utility */
.mt { margin-top: var(--s-3); }
.container.narrow { max-width: 46rem; }

/* ── FATTI CHIAVE: le info base SUBITO, senza dover leggere (prezzo · dove · come) ── */
.facts {
  list-style: none; padding: 0;
  margin: var(--s-4) auto var(--s-4);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; max-width: 46rem;
  border-top: 1px solid rgba(34,34,34,.12);
  border-bottom: 1px solid rgba(34,34,34,.12);
}
.facts li {
  padding: var(--s-3) var(--s-2);
  text-align: center;
  border-right: 1px solid rgba(34,34,34,.10);
}
.facts li:last-child { border-right: 0; }
.facts strong {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: 1.05rem; color: var(--testo); letter-spacing: .01em;
}
.facts span {
  display: block; margin-top: .3rem;
  font-size: .82rem; color: var(--testo-soft); line-height: 1.5;
}
@media (max-width: 700px) {
  .facts { grid-template-columns: 1fr; }
  .facts li { border-right: 0; border-bottom: 1px solid rgba(34,34,34,.10); }
  .facts li:last-child { border-bottom: 0; }
}

/* ── SPLIT "intro": foto a sx + testo a dx, PROPORZIONATO (la foto non torreggia) ── */
.split--intro { align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.split--intro .split__media { margin: 0; }
.split--intro .split__media img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
}
@media (max-width: 860px) { .split--intro { grid-template-columns: 1fr; } }

/* ── DUO: due colonne di TESTO (quando il copy è breve, riempie senza foto giganti) ── */
.duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: var(--s-5);
  max-width: 60rem; margin-inline: auto;
}
.duo__col h3 {
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: var(--s-2);            /* stacco titolo → testo */
  padding-bottom: var(--s-1);
  border-bottom: 1px solid rgba(133,113,77,.28);   /* filetto oro leggero */
}
.duo__col p { margin-bottom: .9rem; }
.duo__col p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }

/* ── FIND-CARD: più aria, gerarchia chiara, link non schiacciato ── */
.find-card h3 { margin-bottom: var(--s-2); }
.find-card__addr  { margin-bottom: var(--s-2); line-height: 1.6; }
.find-card__hours { margin-bottom: var(--s-2); }
.find-card__note  { margin-bottom: var(--s-2); }
.find-card__tel   { margin-bottom: var(--s-3); }
.find-card .link-arrow { display: inline-block; margin-top: var(--s-1); white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   HERO SPLIT — testo a sinistra, foto verticale a destra che ESCE dal bordo.
   (Le foto dell'atelier sono tutte verticali: un hero "a tutta larghezza" le
   taglierebbe. Questo schema le usa per come sono e dà comunque asimmetria.)
   ══════════════════════════════════════════════════════════════════════════ */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: min(88vh, 820px);
  padding-left: var(--gutter);
  max-width: calc(var(--maxw) + var(--gutter));
  margin-inline: auto;
}
.hero-split__txt { max-width: 32rem; padding-block: var(--s-6); }
.hero-split__txt h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.08;
  margin: var(--s-2) 0 var(--s-3);
}
.hero-split__txt .lead { margin-bottom: var(--s-4); }

/* la foto sfonda il bordo destro: è quello che dà il respiro cinematografico */
.hero-split__pic { margin: 0; height: 100%; min-height: min(88vh, 820px); position: relative; }
.hero-split__pic img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
}
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; min-height: 0; padding-inline: var(--gutter); gap: var(--s-4); }
  .hero-split__txt { padding-block: var(--s-5) var(--s-3); max-width: none; }
  .hero-split__pic { min-height: 0; aspect-ratio: 4/5; }
  .hero-split__pic img { position: static; }
}

/* ── Le altre 2 foto, SFALSATE (non allineate: una scende) ──────────────── */
.duo-pics {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}
.duo-pics figure { margin: 0; }
.duo-pics figure img { width: 100%; height: auto; display: block; aspect-ratio: 4/5; object-fit: cover; }
.duo-pics figure:last-child { margin-top: clamp(2rem, 6vw, 5rem); }   /* lo sfalsamento */
@media (max-width: 700px) {
  .duo-pics { grid-template-columns: 1fr; }
  .duo-pics figure:last-child { margin-top: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   STATEMENT — lo slogan GRANDE tra le sezioni.
   Poche parole, molto grandi, tantissima aria: la tipografia diventa contenuto.
   (È il device delle referenze: Fitzgerald, Royal Park.)
   ══════════════════════════════════════════════════════════════════════════ */
.statement {
  text-align: center;
  padding-block: clamp(4rem, 12vw, 9rem);
}
.statement__t {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 1.16;
  letter-spacing: -.005em;
  color: var(--testo);
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
/* la parola chiave in corsivo: il mix maiuscolo/corsivo delle referenze */
.statement__t em { font-style: italic; color: var(--oro); }
.statement__sub {
  margin-top: var(--s-3);
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--testo-soft);
  max-width: 44ch; margin-inline: auto;
}

/* Statement con NUMERO grande (il prezzo: è il fatto che conta) */
.statement__num {
  font-family: var(--serif);
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 1;
  color: var(--oro);
  display: block;
  margin-bottom: var(--s-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   TITOLI GRANDI — l'impatto tipografico SENZA inventare una parola.
   Si prendono i titoli che il cliente ha già scritto e si rendono grandi.
   La parola chiave in <em> va in corsivo oro (device di Northline/Fitzgerald).
   ══════════════════════════════════════════════════════════════════════════ */
.h2--big {
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.14;
  letter-spacing: -.005em;
  text-transform: none;          /* i titoli grandi NON vanno in maiuscolo: perdono grazia */
  text-wrap: balance;
}
.h2--big em { font-style: italic; color: var(--oro); font-weight: 400; }

/* ── ASSE DI LETTURA A SINISTRA ────────────────────────────────────────────
   Il centrato continuo è la causa MECCANICA del "sembra a blocchi": ogni
   sezione riparte da capo e non c'è una linea che guida l'occhio. */
.container.narrow-left {
  max-width: 46rem;
  margin-inline: 0;               /* niente auto: resta ancorato a sinistra */
  text-align: left;
}
.lead--big { font-size: 1.2rem; line-height: 1.7; }

/* Split invertito: TESTO a sinistra, foto a destra */

/* ── FAQ AFFIANCATA A UNA FOTO — rompe lo schema del centrato ─────────────
   L'accordion sta a sinistra, allineato a sinistra (si legge come un elenco,
   non come uno slogan); la foto a destra segue la sua altezza. */
.faq-wrap .faq   { margin: var(--s-4) 0 0; max-width: none; text-align: left; }
.faq-wrap .faq__q { justify-content: space-between; text-align: left; }
/* la foto non resta "a mezz'aria": si allunga quanto l'accordion */
.faq-wrap + .split__media     { align-self: stretch; }
.faq-wrap + .split__media img { height: 100%; aspect-ratio: auto;
                                min-height: clamp(420px, 46vh, 560px);
                                object-position: center 20%; }
@media (max-width: 860px) { .faq-wrap + .split__media img { min-height: 0; aspect-ratio: 4 / 5; } }
/* La domanda è un <h3> (serve alla gerarchia), ma NON deve sembrarlo: eredita tutto
   dal summary. Senza questo reset prenderebbe il serif dei titoli. */
.faq__h { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none;
          margin: 0; display: inline; }
.faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .7rem; }
.faq__q::-webkit-details-marker { display: none; }   /* via il triangolino di default */

/* la freccia: chevron oro che ruota all'apertura */
.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: .48rem; height: .48rem;
  border-right: 2px solid var(--oro);
  border-bottom: 2px solid var(--oro);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translateY(-2px); }
.faq-wrap .faq__a p { margin-inline: 0; max-width: 46ch; }

/* ── FOOTER: logo GRANDE, testi ridistribuiti ───────────────────────────── */
.footer__grid { align-items: start; }
.footer__logo { height: auto; width: auto; max-width: 150px; margin-bottom: var(--s-3); }   /* ridotto da 190 (Marco, 14/07) */
.footer__brand .footer__tag { max-width: 34ch; }
.statement .btn { margin-top: var(--s-4); }
.statement__sub { margin-top: var(--s-2); font-size: 1.05rem; }

/* ── Immagini ingrandibili: devono SEMBRARE cliccabili e reggere la tastiera ──
   Erano <img> nude: nessun cursore, nessun focus, e il gestore keydown del
   lightbox non poteva scattare perché un <img> non è focusabile. */
img[data-lightbox] { cursor: zoom-in; }
img[data-lightbox]:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

/* ══ BARRA AZIONI MOBILE (.mbar) — portata dall'hub il 14/07 ═══════════════════════
   🔴 Su JULIET non era un miglioramento, era un BUG GRAVE: sotto i 1150px .nav__cta e'
      display:none, e una landing senza menu non stampa nemmeno l'hamburger → da telefono
      il tasto Prenota NON ESISTEVA. Su un sito che serve solo a portare appuntamenti.

   Discrezione: fondo bianco, filetto sopra, niente ombra, niente colore pieno.
   UN SOLO elemento oro: il Prenota. WhatsApp resta presente ma silenzioso.
   z-index 95: sotto la navbar (100) e il lightbox (200).
   env(safe-area-inset-bottom): senza, su iPhone il bottone finisce sotto la barra home. */
.mbar { display: none; }

@media (max-width: 1150px) {
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    height: calc(60px + env(safe-area-inset-bottom));
    padding: 0 var(--gutter) env(safe-area-inset-bottom);
    background: #fff;
    border-top: 1px solid rgba(34,34,34,.10);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  /* fade sul footer: la barra si toglie di mezzo invece di coprirlo (main.js) */
  .mbar.is-gone { opacity: 0; transform: translateY(100%); pointer-events: none; }

  .mbar__wa {
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--testo); font-family: var(--sans); font-size: .82rem; font-weight: 600;
    letter-spacing: .04em;
  }
  .mbar__wa svg { width: 22px; height: 22px; color: var(--oro-scuro); flex: none; }

  .mbar__cta {
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; padding: 0 1.4rem;
    background: var(--oro); color: #fff; border-radius: 0;
    font-family: var(--sans); font-size: .74rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  }
  .mbar__cta:hover { background: var(--oro-scuro); }

  /* la barra prende il posto dei FAB: niente doppioni */
  .floaters { display: none; }

  /* rete di sicurezza: se il JS non parte il fade non avviene → questo spazio impedisce
     comunque alla barra di coprire l'ultima riga del footer */
  .footer { padding-bottom: calc(var(--s-4) + 60px); }
}

@media (prefers-reduced-motion: reduce) { .mbar { transition: none; } }

/* ===== OVERRIDE DEL SITO (juliet) — le sole leve di personalità ===== */
/* ============================================================================
   JULIET — «l'accessibile»                                            rev. 3
   ----------------------------------------------------------------------------
   · fondo caldo su tutta la landing, FOOTER bianco
   · TITOLI = stesso stile dell'hub: MAIUSCOLO SERIF (Playfair) + letter-spacing,
     INTERLINEA 1.0 (compatta: gli a capo sono voluti, riga per riga).
     La parola chiave in ORO (la sola licenza: è la personalità di Juliet).
   · NESSUNA barra sull'hero: il logo entra nella composizione.
     La barra scende quando l'hero è quasi passato → BIANCA, come sull'hub,
     con logo SCURO e tasto ORO (era il bug: logo bianco su fondo bianco).
   ========================================================================== */

:root {
  --avorio: #faf6f1;      /* fondo caldo di tutta la pagina */
  --greige: #e8dcd2;      /* il beige di Juliet, per le bande */
  --grigio: #f3ece5;
  --fs-body: 1.0625rem;
}

/* ── FONDO CALDO SU TUTTA LA LANDING · FOOTER BIANCO ─────────────────────── */
body { background: var(--avorio); }
.section { background: transparent; }
.footer { background: #fff; border-top: 1px solid rgba(34,34,34,.08); }

/* ══ LA BARRA CHE NON C'È, E POI SCENDE ═══════════════════════════════════
   Sull'hero è FUORI SCHERMO: l'apertura è pulita. main.js mette .is-solid
   quando l'hero è quasi passato → la barra scende.
   Da lì in poi eredita lo stile dell'hub: fondo bianco, logo scuro. */
.nav {
  transform: translateY(-105%);
  visibility: hidden;          /* fuori schermo ma ancora focusabile: il Tab ci finiva sopra */
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transition: transform .45s var(--ease);
}
.nav.is-solid {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}
/* niente menu su una landing → logo a sinistra, CTA a destra */
.nav-inner { grid-template-columns: 1fr auto; }
.nav__cta  { justify-self: end; }
.nav__logo img { height: 40px; width: auto; }

/* ══ MOBILE: LA BARRA IN ALTO NON C'È (Marco, 14/07) ════════════════════════════════
   Scrollando ci si ritrovava DUE elementi fissi: la navbar in alto e la barra azioni in
   basso. Troppo — e soprattutto quella in alto, su Juliet, non fa NIENTE: e' una landing
   senza menu, quindi contiene solo il logo. Sotto i 1150px il .nav__cta e' display:none
   (regola del tema), quindi nemmeno il Prenota. 84px di schermo (il 12% di un telefono)
   occupati da decorazione. E il marchio e' gia' dichiarato: il logo e' grande, in cima
   all'hero, appena apri.

   Perche' NON la strada opposta (Prenota in navbar + via la barra sotto): la navbar si
   nasconde da sola scrollando in giu' (auto-hide, main.js) → il Prenota sparirebbe proprio
   mentre la sposa legge. E' esattamente il difetto di cui si e' lamentato il cliente
   sull'hub. Per evitarlo andrebbe spento l'auto-hide, e allora la barra mangerebbe spazio
   SEMPRE. La barra in basso invece non si nasconde mai: le azioni restano, e sparisce solo
   sul footer, dove non servono piu'.

   ⚠️ Regola SOLO DI JULIET, non nel _core: Scarpe e Tulle avranno un MENU, e li' la barra
      in alto serve davvero. */
@media (max-width: 1150px) {
  .nav { display: none; }
}

/* l'hero parte dal bordo alto: non c'è nessuna barra da compensare */
main { padding-top: 0 !important; }

/* ── IL LOGO DENTRO L'HERO ────────────────────────────────────────────────
   Sotto vuole ARIA: il marchio deve respirare prima dell'occhiello. */
.hero-logo {
  display: block;
  height: auto; width: auto;
  max-width: 210px;
  margin-bottom: 56px;                 /* ≥ 50px, come chiesto */
}
/* ══ MOBILE: L'APERTURA DIVENTA UN FRONTESPIZIO (Marco, 14/07) ══════════════════
   Tre scelte, e la ragione di ognuna.

   1. LOGO PIÙ GRANDE (150 → 190px). Su Juliet la navbar NON c'è sull'hero: scende solo
      dopo lo scroll. Il logo e' quindi l'UNICA cosa che dice di chi e' questo sito.
      Tenerlo piccolo era uno spreco del suo unico segnale di marca.

   2. BLOCCO CENTRATO. Allineato a sinistra, su una colonna stretta, lasciava una fascia
      vuota a destra e la composizione sembrava incompiuta. Centrato, l'H1 con i suoi
      quattro a capo scritti a mano diventa un monumento — ed e' esattamente cio' che deve
      essere: la dichiarazione d'apertura. In piu' l'intro e «Gli abiti» su mobile sono GIA'
      centrati → la pagina acquista un ritmo: centrato = affermazione, sinistra = spiegazione.
      (NON si e' messa la foto per prima: senza navbar, la sposa vedrebbe un abito senza
       sapere dove e' finita. Su un sito che vende un prezzo, l'amo e' la frase, non la foto.) */
@media (max-width: 900px) {
  .hero-logo { max-width: 190px; margin-bottom: 36px; margin-inline: auto; }

  .hero-split__txt { text-align: center; }
  .hero-split__txt .eyebrow::after { margin-inline: auto; }   /* il filetto segue il testo */
  .hero-split__txt .lead { margin-inline: auto; }             /* il .lead ha max-width: va centrato */
  .hero-split__txt .actions { justify-content: center; }
}

/* ══ TITOLI — MAIUSCOLO SERIF (come Idea Sposa) + INTERLINEA 1.0 ══════════
   L'interlinea stretta è il motivo per cui gli a capo sono scritti a mano:
   le righe devono formare un blocco compatto, non una scala.

   3. TITOLI PIÙ GRANDI SU MOBILE (Marco, 14/07) — e non era un'impressione, era un bug
      di misura: nel clamp(min, PREFERITO, max) il valore preferito e' in `vw`, e a 375px
      un 3vw vale appena 11px — molto SOTTO il minimo. Quindi su mobile vinceva SEMPRE il
      minimo: i titoli erano bloccati al valore piu' piccolo previsto.
      Si alza il PAVIMENTO (il primo numero): cresce solo dove il minimo comanda, cioe'
      sotto i ~950px. Sul desktop vince il massimo e non cambia NULLA. */
.hero-split__txt h1 {
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 500;
  font-size: clamp(2.15rem, 3.6vw, 2.9rem);   /* mobile: 30 → 34px */
  line-height: 1;
  margin: 0 0 var(--s-3);
}
.h2--big {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 500;
  font-size: clamp(1.95rem, 3vw, 2.3rem);     /* mobile: 24 → 28 → 31px — i titoli identificano la sezione */
  line-height: 1;
}
.statement__t {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 500;
  font-size: clamp(1.95rem, 3.2vw, 2.4rem);   /* stesso pavimento degli altri titoli: mobile 31px */
  line-height: 1;
  max-width: none;              /* gli a capo li decidiamo noi: niente wrap automatico */
  text-wrap: initial;
}
/* ── I TITOLI SONO ORO ────────────────────────────────────────────────────
   È la firma cromatica di Juliet (scelta di Marco, 13/07): i titoli serif
   maiuscoli sono tutti in oro, non solo la parola chiave.
   Contrasto verificato: 4.37 su avorio, 3.49 su greige, 4.70 su bianco →
   oltre il 3.0 richiesto da WCAG AA per il testo grande. Sul testo di CORPO
   l'oro NON si usa (lì servirebbe 4.5 e non ce la farebbe). */
.hero-split__txt h1,
.h2--big,
.statement__t { color: var(--oro); }

/* con il titolo già tutto oro, l'<em> non deve più "accendersi": segue il titolo.
   (In maiuscolo il corsivo non regge: via anche quello.) */
h1 em, .h2--big em, .statement__t em {
  font-style: normal;
  color: inherit;
  font-weight: 500;
}

/* ── TITOLO "DI TESTO" — sezione «Gli abiti» ──────────────────────────────
   Qui l'occhiello e il suo filetto restano, ma sotto NON si cambia carattere:
   tutto bastone (Lato), come il paragrafo dell'intro. Il tag resta <h2> (serve
   alla gerarchia SEO): a cambiare è solo la resa — grassetto nello stesso font
   del corpo, esattamente come le parole in bold dell'intro. */
/* Marco (14/07): «siccome qui abbiamo eliminato il titolo, riporta tutto allo stesso stile
   del testo "Se stai cercando…"». Giusto: un grassetto che finge di essere un titolo e' un
   ibrido — o e' un titolo o e' testo. Qui e' TESTO, quindi prende ESATTAMENTE lo stile di
   .lead--big (stesso font, stesso corpo, stessa interlinea, stesso peso, stesso colore).
   Il tag resta <h2> per la gerarchia SEO: cambia solo la resa, non la struttura. */
/* Marco (14/07): «questo slogan lo metti in uppercase sia mobile che desktop».
   Il maiuscolo va accompagnato o si legge male: senza tracking le lettere si toccano
   (in maiuscolo le forme sono tutte alte e larghe uguali), e con l'interlinea da testo
   corrente — pensata per le lettere che scendono sotto la riga, qui inesistenti — le righe
   sembrano staccate. Quindi: +.05em di spaziatura e interlinea 1.5. Resta bastone (Lato),
   resta corpo 1.2rem: NON diventa un titolo serif, cambia solo la cassa. */
.h2--testo {
  font-family: var(--sans);
  font-weight: 400;             /* come .lead: niente grassetto */
  font-size: 1.2rem;            /* = .lead--big */
  line-height: 1.5;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--testo-soft);     /* = .lead: stesso colore, non piu' scuro */
  max-width: 62ch;
  margin-inline: auto;
}
.h2--testo em,
.h2--testo strong { font-style: normal; font-weight: 700; color: var(--testo); }  /* solo le parole chiave in bold, come nell'intro */
.section-head .h2--testo { margin-bottom: var(--s-2); }                  /* attaccato al paragrafo che segue */

/* ── RESPIRO: titoli mai appiccicati al testo ────────────────────────────── */
.section-head h1,
.section-head h2 { margin-bottom: var(--s-3); }
.section-head .eyebrow { margin-bottom: var(--s-2); }
.hero-split__txt .eyebrow { margin-bottom: var(--s-2); }

/* ── FOTO DELL'HERO: staccata dal bordo alto ─────────────────────────────── */
.hero-split__pic { margin-top: var(--s-5); }
@media (max-width: 900px) { .hero-split__pic { margin-top: 0; } }

/* ── Niente filetti/righe leggere ────────────────────────────────────────── */
.duo__col h3 { border-bottom: 0; padding-bottom: 0; }

/* ══ SOLO MOBILE: in «Cos'è Juliet» il testo va PRIMA della foto ══════════
   Su desktop le due colonne si alternano da sole (foto sx / foto dx). Impilate su
   mobile, però, «Cos'è Juliet» e «Dove provare» avrebbero entrambe la foto sopra e
   il testo sotto: lo stesso schema due volte di fila. Invertendo l'ordine qui, i
   due blocchi si distinguono. (Il breakpoint è 860px, lo stesso di .split--intro:
   se cambia lì deve cambiare anche qui.) */
@media (max-width: 860px) {
  .split--txt-first-mobile .split__txt   { order: 1; }
  .split--txt-first-mobile .split__media { order: 2; }
}

/* le azioni dell'hero allineate a sinistra */
.hero-split__txt .actions { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* ══ MOBILE: UN SOLO RITMO VERTICALE (Marco, 14/07) ═════════════════════════════════
   Il problema non era estetico, era strutturale: su un telefono da 375px c'erano QUATTRO
   valori diversi a governare gli spazi, ereditati da decisioni prese in momenti diversi.
       fra due sezioni ............ 112 px   (56 di padding × 2)
       attorno ai blocchi di testo .. 72 px   (56 + 16)
       fra intro e foto ............. 56 px
       fra testo e foto (split) ..... 32 px
   Quattro numeri non fanno un ritmo: fanno rumore. Ecco perché "non tornava" a occhio.

   Qui si torna a UNA SOLA UNITÀ: 40px.
       · fra due BLOCCHI (testo↔foto, intro↔foto, aria dei blocchi di testo) → 40 px
       · fra due SEZIONI → 80 px, e non perché lo decidiamo: sono i due padding che si
         incontrano. Il doppio nasce da solo, ed è giusto — è il segnale che cambia capitolo.
   Un'unità, raddoppiata solo dove serve. Il desktop non si tocca. */
@media (max-width: 700px) {
  .section { padding-block: 2.5rem; }                       /* 40px per lato → 80 fra sezioni */
  .container.narrow.center { padding-block: 0; }            /* era il 4° valore: via */
  .split--intro { gap: 2.5rem; }                            /* testo ↔ foto: 32 → 40 */
  .section > .container + .container { margin-top: 2.5rem; } /* intro ↔ le 2 foto: 56 → 40 */
  /* .section--slogan resta a padding 0: è ciò che fa avere a «Gli abiti» la STESSA aria
     dell'intro (40px sopra e sotto), invece del doppio di una sezione. */

  /* ── ECCEZIONE: LA CTA FINALE (Marco, 14/07) ────────────────────────────────────
     Effetto collaterale della riga qui sopra: `.section { padding-block: 2.5rem }` sta
     DOPO `.cta-final` nel theme.css generato e ha la stessa specificità → gli portava via
     l'aria che si era scelto (5.5rem = 88px) e lo schiacciava a 40. Su un blocco a fondo
     scuro, con la foto dietro, quel margine non è decorazione: è ciò che separa il testo dal
     bordo dell'immagine. Senza, il titolo sembra appiccicato al taglio della foto.
     Qui NON è un blocco come gli altri, è la chiusura: gli si dà un'unità e mezza (60px per
     lato). `.section.cta-final` = due classi → vince per specificità, non per ordine: non si
     rompe se un domani qualcuno sposta le regole. */
  .section.cta-final { padding-block: 3.75rem; }   /* 40 → 60px per lato */
}

/* ══ GLI SLOGAN DI TRANSIZIONE ════════════════════════════════════════════
   Sono i blocchi di testo che fanno da respiro fra una sezione e l'altra:
   l'intro «Se stai cercando…» e «Gli abiti».

   1) BOX PIÙ LARGO → il testo cade su 3 righe invece di spezzarsi in 4-5.
      58rem ≈ 930px: il cap di 62ch su .lead qui va tolto, altrimenti
      strozzerebbe il paragrafo prima che arrivi al bordo del box. */
.container.narrow { max-width: 58rem; }
.container.narrow .lead,
.container.narrow .h2--testo { max-width: 100%; }

/*  2) ARIA SOPRA E SOTTO, SIMMETRICA. Il padding va sul blocco di testo, così
      cresce identico da entrambi i lati e il testo respira davvero. */
.container.narrow.center { padding-block: clamp(1rem, 3vw, 2.5rem); }

/*  3) …e lo stacco verso le foto sotto pareggia il padding della sezione sopra
      (era 4.5rem contro 7rem: sotto sembrava schiacciato). */
.section > .container + .container { margin-top: clamp(3.5rem, 8vw, 7rem); }

/*  4) «Gli abiti» è una sezione A SÉ, incastrata fra altre due: il suo padding si
      SOMMAVA a quello dei vicini (7rem + 7rem = una voragine). L'intro invece sta
      dentro la stessa sezione delle foto e il padding lo paga una volta sola.
      Azzerando il padding qui, l'aria la danno i vicini → stesso identico respiro
      dell'intro (≈ 7rem del vicino + 2.5rem del blocco, sopra e sotto). */
.section--slogan { padding-block: 0; }

/* ══ NAP — una riga per informazione, separate dall'aria (non da filetti) ══ */
.nap--righe { display: grid; gap: var(--s-3); margin: var(--s-4) 0; }
.nap--righe li { padding: 0; border-bottom: 0; line-height: 1.65; }

/* ══ IL PONTE ALL'HUB — un BANNER, non una banda ══════════════════════════
   La banda bianca a tutta larghezza spezzava la pagina in due. La sezione
   resta quindi sul fondo avorio come tutte le altre, e il bianco diventa un
   BOX dentro: si legge come un richiamo, non come un cambio di capitolo. */
.statement--tight {
  background: transparent;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
/* Il box a 2 colonne: FOTO a filo | TESTO.
   padding: 0 sul box → la foto tocca davvero i bordi (sopra, sotto, di lato).
   Il padding si sposta sulla colonna di testo. Niente radius, niente ombra. */
.banner {
  background: #fff;
  padding: 0;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: stretch;
}

/* la foto riempie la sua colonna e SEGUE l'altezza del testo, sempre */
.banner__media {
  margin: 0;
  position: relative;
  min-height: clamp(420px, 40vw, 560px);
}
.banner__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 12%;   /* tiene il viso: il taglio è quasi quadrato */
}

/* la colonna di testo: qui torna il padding, e il contenuto è centrato in verticale */
.banner__body {
  padding: clamp(2.75rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* ⚠️ In un flex column i figli si STIRANO a tutta larghezza: il tasto diventava
   un blocco da ~600px. Deve restare un bottone, largo quanto il suo testo. */
.banner__body .btn { align-self: center; }

/* Il logo IN TESTA, centrato: firma il blocco e apre l'asse verticale.
   Tutto il resto (titolo, sottotitolo, tasto) resta su quello stesso asse. */
.banner__logo {
  display: block;
  width: clamp(120px, 12vw, 155px);
  height: auto;
  margin: 0 auto var(--s-4);
}

/* il titolo vive in una colonna più stretta di prima: va rimpicciolito,
   altrimenti "TUTTE LE COLLEZIONI ATTUALI" sfonda la colonna. */
/* (Tolto l'override che rimpiccioliva il titolo del banner: era un residuo di quando il
   banner era a 2 colonne e la colonna di testo era stretta. Ora il banner e' centrato a
   piena larghezza → vale la misura normale, piu' grande.) */

/* ══ 🔴 BUG RIPARATO (14/07) — I <br> DEI TITOLI NON SI SPENGONO ═══════════════════
   Qui c'era, su mobile:  .h2--big br, .statement__t br { display: none; }
   Sembrava innocuo. Non lo e': un <br> nascosto NON lascia uno spazio al suo posto.
   "Una selezione<br>dedicata" diventa "Una selezionedeDicata" — parole incollate.
   Marco l'ha visto a schermo su cinque titoli ("Dove provaregli abiti",
   "Stai cercando il tuo abito da sposaa un prezzo…").

   La paura che mi aveva portato a spegnerli — a capo scritti a mano + ritorno a capo
   automatico che si sommano — era infondata: su una colonna stretta quella somma
   produce proprio la forma a scala che serve, ed e' quella che Marco vuole.

   ⚠️ REGOLA PERMANENTE: nel markup, uno SPAZIO PRIMA di ogni <br>. Cosi' il giorno in
      cui un <br> viene spento (vedi .br-desk nel tema base) le parole restano separate.
      Costo: zero — a fine riga lo spazio non si vede. */

/* ── MOBILE: TITOLI PIÙ GRANDI (Marco, 14/07) ──────────────────────────────────────
   28 → 31px. Si alza il PAVIMENTO del clamp: su un telefono il valore in `vw` e' molto
   sotto il minimo, quindi comanda sempre il minimo. Sul desktop vince il massimo → non
   cambia nulla. Verificata la parola piu' lunga a 320px (il telefono piu' stretto):
   "ACCESSIBILE?" ≈ 233px su 280 disponibili → non sfonda. L'H1 resta a 34px: le sue
   righe scritte a mano ci stanno appena, ingrandirlo le spezzerebbe. */

/* mobile: la foto va sopra e il testo sotto */
@media (max-width: 860px) {
  .banner { grid-template-columns: 1fr; }
  .banner__media { min-height: 0; aspect-ratio: 4 / 5; }
  .banner__media img { position: static; }
}
.statement--tight .statement__sub { margin-top: var(--s-2); }
.statement--tight .btn { margin-top: var(--s-3); }

/* ══ CTA FINALE — foto in parallax, velo scuro, testo TUTTO BIANCO ════════
   Il parallax (background-attachment: fixed) arriva dal tema base, solo su
   desktop e solo se l'utente non ha chiesto "meno animazioni".
   Sulla foto l'oro non tiene: qui anche la parola chiave è bianca. */
.cta-final--foto {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cta-final--foto .eyebrow,
.cta-final--foto .h2--big,
.cta-final--foto .h2--big em,
.cta-final--foto .lead,
.cta-final--foto .lead strong { color: #fff; }
.cta-final--foto .eyebrow { opacity: .85; }