/* ============================================================================
   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-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; }

/* ══ 🔴 LINK DENTRO IL TESTO — DEVONO VEDERSI (14/07) ══════════════════════════════════
   Il reset qui sopra (color:inherit + niente sottolineatura) serve a navbar, card e bottoni,
   dove il link È l'oggetto. Ma si applicava ANCHE ai link dentro i paragrafi: stesso colore
   del testo, nessuna sottolineatura → **invisibili**. Marco li cercava a schermo e non li
   trovava ("hai messo dei link o dei tasti???"). Un link interno che nessuno vede non viene
   cliccato: per Google resta un segnale, per la sposa non esiste.
   Erano 6, tutti ciechi — compresi i due incroci scarpe↔accessori che c'erano da giorni.

   Oro SCURO (#76633b), non l'oro normale: 5,8:1 su bianco e 4,7:1 su greige → sta sopra il
   4,5 che WCAG chiede al testo piccolo (l'oro #85714d si fermerebbe a 4,2 sul greige).
   La sottolineatura NON è decorazione: è il secondo segnale, quello che rende il link
   riconoscibile anche a chi non distingue i colori (WCAG 1.4.1).
   Sul fondo scuro l'oro scuro sparirebbe → lì si usa l'oro chiaro. */
.lead a,
.hub-body p a,
.brand-block p a,
.brand-head__text p a {
  color: var(--oro-scuro);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .2s var(--ease);
}
.lead a:hover,
.hub-body p a:hover,
.brand-block p a:hover,
.brand-head__text p a:hover { color: var(--oro); text-decoration-thickness: 2px; }
.bg-scuro .lead a,
.cta-final .lead a { color: var(--oro-chiaro); }

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); }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.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);
  margin-bottom: var(--s-2);
}
.bg-greige .eyebrow, .bg-grigio .eyebrow { color: var(--oro-scuro); } /* contrasto AA su fondi non bianchi */
.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); }

/* Nelle card indirizzo l'anchor e' descrittivo e quindi lungo ("Come arrivare in Piazza
   Vittorio 12"): con letter-spacing .16em in maiuscolo arriva a ~314px in una card che ne
   ha ~332 utili → andava a capo per una manciata di pixel (segnalato da Marco, 14/07).
   Lo spazio si riduce SOLO qui: .link-arrow e' usata in 12 pagine e toglierlo ovunque
   cambierebbe tutti i link del sito. L'anchor resta descrittivo: e' una regola di progetto,
   non si accorcia in "Apri mappa". */
.find-card .link-arrow { letter-spacing: .05em; }
.find-card__social { margin-top: .55rem; }  /* il richiamo Instagram sta SOTTO il link mappa, non accanto */

/* ============================================================================
   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%); }
/* FULL-WIDTH (Marco 03/08): 9 voci sui monitor grandi. FLEX e non grid 1fr-auto-1fr: quella
   centrava sullo SCHERMO, ma il logo (292px) sfonda la sua colonna e il menu finiva incollato
   a sinistra. Col margin-inline:auto il menu si centra NELLO SPAZIO FRA logo e tasto Prenota
   — che è esattamente ciò che deve sembrare. */
.nav-inner { width:100%; max-width: none; margin-inline:auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--s-3); }
/* ⚠️ il figlio flex è il PANNELLO (.nav__panel), non il menu: i margini auto vanno su di lui.
   (Prima erano su .nav__menu, che sta DENTRO il pannello → nessun effetto: barra impacchettata
   a sinistra e Prenota staccato dal bordo. Visto da Marco a schermo, 03/08.) */
.nav__panel { margin-inline: auto; }
.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 */
/* gap ridotto da 2.1rem a 1.6rem (14/07): il contenitore della navbar e' capped a 1280px
   meno i margini = 1184px UTILI, e quello spazio NON cresce mai, nemmeno su monitor grandi.
   Con l'etichetta lunga servivano ~1168px → restavano 16px di margine: troppo pochi.
   Stringendo il gap si recuperano ~40px e il menu respira. */
.nav__menu { justify-self: center; display: flex; align-items: center; gap: clamp(.85rem,1.1vw,1.5rem); list-style:none; margin:0; padding:0; }  /* gap ricalibrato per 9 voci (1.6vw cresceva col viewport) */
.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; display: flex; align-items: center; gap: .35rem; }
.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; }

/* NAVBAR A 9 VOCI — rev. 03/08 (decisione Marco, per Love Again + Ispirazioni del cliente).
   1) La barra e' FULL-WIDTH (il vincolo storico "allineata al contenuto 1280" e' superato
      dalla sua scelta): sui monitor grandi le 9 voci respirano senza toccare la tipografia.
   2) Il gap del menu e' ricalibrato (1.6vw cresceva col viewport e si mangiava il guadagno).
   3) SOGLIA HAMBURGER 1240 → 1440 (misurata: le 9 voci richiedono ~1420px reali).
      Nella fascia 1241-1439 (laptop piccoli): hamburger MA il tasto Prenota resta in barra
      (la .mbar mobile esiste solo sotto i 1240 — senza questa regola la fascia resterebbe
      senza Prenota fisso). Sotto i 1240: tutto come prima (mbar compresa). */
@media (max-width: 1440px) {
  .nav-inner { display:grid; grid-template-columns: auto 1fr auto; }  /* display:grid esplicito: la base ora è flex */
  .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; }
}
/* sotto i 1240 (dove c'è la .mbar col suo Prenota) il tasto in barra si spegne come prima */
@media (max-width: 1240px) {
  .nav__cta { display:none; }
}

/* ============================================================================
   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 video { width:100%; height:100%; object-fit:cover; } /* video negli split (es. sartoria in home): riempie il riquadro come le foto */
.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)
   ---------------------------------------------------------------------------------------
   CORREZIONE CLIENTE 14/07 — "in HP la scritta Esclusiva non e' visibile".
   La causa non era una regola che la nascondeva: la parola non e' mai stata tagliata ne'
   coperta. Erano due cose insieme:
     1. top:-.30em la faceva cadere a cavallo del bordo ALTO della foto, cioe' in buona
        parte sul fondo beige della sezione;
     2. il text-shadow BIANCO le metteva un alone chiaro attorno, su un fondo gia' chiaro.
   Aggravante: --greige e' stato unificato a #f4f1ea, PIU' CHIARO del beige originale
   (#ede7dd) → l'oro su quel fondo scende a 4,17:1 e uno script sottile come il Parisienne
   sparisce. La gemella "Alternativi" sta su fondo BIANCO (4,70:1) e infatti si vede: e'
   per questo che il cliente si lamenta solo di "Esclusiva".
   Fix: la si ALZA (Marco) cosi' stacca netta sul beige invece di confondersi col bordo,
   e l'alone bianco diventa un'ombra scura leggera, che la stampa sul chiaro invece di
   spegnerla. */
.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:-.48em; left:-.10em; pointer-events:none;
  text-shadow: 0 1px 2px rgba(28,26,23,.18); }
.script-overlay--right { left:auto; right:-.10em; }
/* --long: due parole ("Abiti Esclusivi"/"Abiti Alternativi", cliente 03/08) — coi clamp
   originali (~15 caratteri × larghezza glifo) la scritta sfonderebbe la colonna. */
.script-overlay--long { font-size: clamp(2.1rem, 4.6vw, 3.8rem); top:-.44em; white-space: nowrap; }
/* ── MOBILE: LA PAROLA SCRITTA È IL SEGNALE, NON UN ORNAMENTO (Marco, 14/07) ──────────
   Su desktop "Esclusiva"/"Alternativi" hanno la colonna di testo accanto a sostenerle. Su
   mobile no: la foto è a piena larghezza e la parola è l'unica cosa che dice "qui comincia
   un capitolo". Quindi cresce (49 → 56px su un telefono da 375) e si alza ancora un po'
   (-.42 → -.52em), così stacca netta sopra il bordo della foto invece di appoggiarcisi.
   L'unità è em: alzandosi in proporzione al corpo, il rapporto parola/foto resta identico
   su ogni telefono. Non c'è rischio di taglio: .media-wrap non ha overflow:hidden (ce l'ha
   .media-frame, che è un fratello, non il contenitore della parola). */
@media (max-width:860px){
  .script-overlay { font-size: clamp(3.2rem, 15vw, 4.2rem); top:-.52em; }
  /* due parole su telefono: ~15 caratteri devono stare in ~390px → corpo più piccolo */
  .script-overlay--long { font-size: clamp(1.9rem, 9vw, 2.4rem); top:-.5em; }
}

/* Conseguenza diretta: su mobile la foto del blocco Couture è il PRIMO elemento della
   sezione (lo <div class="split__media"> viene prima nel sorgente), quindi "Esclusiva",
   salendo, va a sbattere sotto l'hero. Le si dà il respiro che ora le serve: la sezione
   parte più bassa. Solo qui e solo su mobile — le altre sezioni non hanno l'hero sopra. */
@media (max-width:860px){ #couture { padding-top: 5.5rem; } }   /* era 3.5rem */

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

/* 🐛 BUG MARGINI SU MOBILE — trovato da Marco il 14/07.
   6 sezioni (atelier#sogno, accessori#intro, scarpe#intro, sumisura#intro + 1, prenota#scegli)
   hanno il .section-head appeso DIRETTAMENTE alla <section>, senza il .container di mezzo.
   Ed e' il .container a dare i margini laterali (padding-inline: var(--gutter)).
   Su desktop non si vedeva: max-width 56ch e' piu' stretto dello schermo, quindi il blocco
   restava centrato. Su MOBILE 56ch e' PIU' LARGO del telefono → il testo andava da bordo a
   bordo, mentre tutto il resto della pagina (foto, bande) aveva i suoi margini.
   Il selettore FIGLIO DIRETTO (>) colpisce solo i casi rotti: dove il .section-head sta
   dentro un .container non si applica, quindi nessun rischio di doppio margine. */
.section > .section-head { padding-inline: var(--gutter); }

/* 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; }
.juliet-price { font-size: 1.05rem; color: var(--oro-scuro); margin-top: .6rem; }

/* Tulle: blocco secondario, visivamente più piccolo (~28%) */
.tulle-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s-2); max-width: 560px; margin-top: var(--s-4); }
.tulle-grid .model { aspect-ratio: 3/4; overflow:hidden; background:var(--grigio); }
.tulle-grid .model img { width:100%; height:100%; object-fit:cover; }
@media (max-width: 600px){ .tulle-grid { grid-template-columns: repeat(2,1fr); max-width: 360px; } }

/* 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); }

/* Bottone in coda al testo di uno split: deve respirare (segnalato da Marco, 14/07 —
   nel capitolo Tulle dell'atelier era appiccicato all'ultimo paragrafo).
   NB: nelle altre pagine lo spazio era messo con stili INLINE (home, scarpe, accessori:
   style="margin-top:..."), ripetuti a mano. Gli inline vincono su questa regola, quindi
   quelle pagine NON cambiano: qui si copre solo il caso senza inline. Prima o poi quegli
   stili andrebbero tolti e sostituiti da questa regola sola. */
.split__body > .btn { margin-top: var(--s-4); }
@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; }
}

/* .tulle-aside RIMOSSA il 14/07: era il richiamo "Tulle Sposa" appeso in fondo al blocco
   sartoria. Il cliente ha chiesto che Tulle diventi un CAPITOLO A SE' (sezione bg-grigio in
   pages/atelier.php, fra Sartoria e Scarpe) → queste 3 regole non le usava piu' nessuno. */

/* 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); }
/* Riga con il link alla sartoria (MEMO cliente). NON e' un terzo bottone: tre CTA affiancate
   si annullano a vicenda. Il link e' oro-chiaro sul fondo scuro → 5.20:1, oltre il 4.5
   richiesto per il testo piccolo. Sottolineato: su fondo scuro il solo colore non basta a
   far capire che e' cliccabile. */
.cta-banner__sub { margin: .55rem 0 0; font-size: .92rem; line-height: 1.5; color: rgba(233,228,220,.85); }
.cta-banner__sub a { color: var(--oro-chiaro); text-decoration: underline; text-underline-offset: 3px; }
.cta-banner__sub a:hover { color: #fff; }
.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); }
.footer__grid { display:grid; grid-template-columns: 1.3fr 1fr 1.5fr; gap: clamp(2rem,5vw,4rem); 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); }
/* social: riga d'invito ("Segui Idea Sposa Couture su:") + link con ICONA (cliente 03/08, niente follower) */
.footer__social { display:flex; flex-direction:column; gap:.5rem; margin-top: var(--s-3); }
.footer__soc-t { font-size:.8rem; color:var(--testo); margin:0 0 .1rem; }
.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-name { color: var(--testo); }
.footer__place p { margin-bottom:.15rem; line-height:1.55; }
.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); }
.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); }
@media (max-width: 820px){ .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .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:flex-end; }

.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); }

/* ══ BARRA AZIONI MOBILE (.mbar) — Marco, 14/07 ═══════════════════════════════════
   "Un menu footer tipo app, ma molto discreto: Prenota + WhatsApp, via il torna su."
   Nasce dalla correzione del cliente: sotto 1240px il Prenota della navbar e'
   display:none e l'auto-hide della barra la porta via allo scroll → spariva del tutto.

   La discrezione sta in DUE scelte, non nella dimensione:
     · fondo bianco + un filetto sopra, niente ombra e niente colore pieno;
     · UN SOLO elemento oro (il Prenota, che deve convertire). WhatsApp resta presente ma
       silenzioso. Due bottoni colorati farebbero la barra di un'app di food delivery.

   z-index 95: sotto la navbar (100) e sotto il lightbox (200), sopra il contenuto.
   env(safe-area-inset-bottom): senza, su iPhone il bottone finisce sotto la barra home.
   Il fade sul footer lo gestisce main.js (IntersectionObserver).
   ⚠️ Su mobile SOSTITUISCE i .floaters: due WhatsApp nella stessa schermata sarebbero un
      errore. Sopra i 1240px la barra non esiste e i floaters tornano quelli di prima. */
.mbar { display: none; }

@media (max-width: 1240px) {
  .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);
  }
  .mbar--solo { justify-content: center; }   /* pagine prenota: resta solo WhatsApp */

  /* fade sul footer: la barra si toglie di mezzo invece di coprirlo */
  .mbar.is-gone { opacity: 0; transform: translateY(100%); pointer-events: none; }

  /* WhatsApp: presente, non urlato */
  .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; }

  /* Prenota: l'unico elemento oro. Squadrato come tutti i bottoni del sito. */
  .mbar__cta {
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; padding: 0 1.4rem;
    background: var(--oro); color: #fff; border-radius: var(--radius);
    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 e la barra coprirebbe
     l'ultima riga del footer. Questo spazio in fondo al footer lo impedisce comunque. */
  .footer { padding-bottom: calc(var(--s-4) + 60px); }
}

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

/* 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; }
/* ── CERCA nel catalogo (client-side, iniettato da main.js solo su .catalog ≥ 8 abiti) ── */
/* barra su una riga: conteggio a sinistra + campo a destra (su mobile va a capo) */
.catalog-bar { display:flex; align-items:center; justify-content:space-between; gap:.8rem 1.5rem;
  flex-wrap:wrap; margin-bottom: clamp(1.4rem, 3.5vw, 2.2rem); }
.catalog-bar .catalog-count { margin:0; }
.catalog-bar .catalog-search { margin:0; flex:0 0 auto; }
.catalog-bar > :only-child { margin-left: auto; }  /* senza riga conteggio (numero non pubblico) il Cerca resta a destra */
.catalog-search { margin: 0 0 clamp(1.4rem, 3.5vw, 2.2rem); }
.catalog-search__lab { display: flex; align-items: center; gap: .55rem; width: 100%; max-width: 380px;
  background: #fff; border: 1px solid rgba(34,34,34,.16); padding: .68rem .85rem;
  transition: border-color .25s var(--ease); }
.catalog-search__lab:focus-within { border-color: var(--oro); }
.catalog-search__ico { width: 17px; height: 17px; flex: 0 0 auto; fill: none;
  stroke: var(--oro); stroke-width: 2; stroke-linecap: round; }
.catalog-search__in { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--sans); font-size: .98rem; color: var(--testo); }
.catalog-search__in::placeholder { color: #9a938a; }
.catalog-nores { text-align: center; font-family: var(--sans); color: var(--testo-soft, #7a746c);
  margin: clamp(2rem,5vw,3rem) 0; }

/* ══ CERCA — box sulle landing hub (scoped) + modale + risultati ══ */
/* box "cerca" sulle landing hub (finto input che apre la modale) */
.hub-search { display:flex; align-items:center; gap:.6rem; width:100%; max-width:440px; margin-top: var(--s-4);
  background:#fff; border:1px solid rgba(34,34,34,.16); padding:.8rem 1rem; cursor:text; text-align:left;
  transition:border-color .25s var(--ease); }
.hub-search:hover { border-color: var(--oro); }
/* barra hub (conteggio catalogo sx + box dx), sul bianco sopra le cover: stacca dalla griglia */
.hub-bar { margin: 0 0 clamp(1.4rem, 3.5vw, 2.2rem); }
.hub-bar .hub-search { margin-top: 0; }
.hub-search__ico { width:18px; height:18px; flex:0 0 auto; fill:none; stroke:var(--oro); stroke-width:2; stroke-linecap:round; }
.hub-search__ph { font-family:var(--sans); font-size:1rem; color:#6a6459; } /* AA su bianco (~5:1): è l'UNICA etichetta del box, non un placeholder */

/* modale */
.search-modal { position:fixed; inset:0; z-index:300; }
.search-modal[hidden] { display:none; }
.search-modal__backdrop { position:absolute; inset:0; background:rgba(28,26,23,.55); }
.search-modal__panel { position:relative; max-width:640px; margin:8vh auto 0; background:#fff; max-height:84vh;
  display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,.28); animation: sm-in .22s var(--ease); }
@keyframes sm-in { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
.search-modal__bar { display:flex; align-items:center; gap:.7rem; padding:1rem 1.1rem; border-bottom:1px solid rgba(34,34,34,.1); }
.search-modal__ico { width:20px; height:20px; flex:0 0 auto; fill:none; stroke:var(--oro); stroke-width:2; stroke-linecap:round; }
.search-modal__in { flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent;
  font-family:var(--sans); font-size:1.1rem; color:var(--testo); }
.search-modal__in::placeholder { color:#9a938a; }
.search-modal__in:focus-visible { outline:2px solid var(--oro); outline-offset:3px; } /* focus visibile per chi torna al campo da tastiera (WCAG 2.4.7) */
/* conteggio risultati annunciato SOLO agli screen reader (non riletti tutti i nomi a ogni tasto) */
.search-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.search-modal__close { flex:0 0 auto; width:32px; height:32px; background:none; border:0; cursor:pointer;
  font-size:1.05rem; color:var(--testo-soft,#6b655c); }
.search-modal__results { overflow-y:auto; padding:.4rem 0; }
.search-modal__hint { font-family:var(--sans); color:var(--testo-soft,#6b655c); text-align:center; padding:2rem 1rem; margin:0; }

/* singolo risultato */
.search-hit { display:flex; align-items:center; gap:.9rem; padding:.55rem 1.1rem; color:var(--testo); text-decoration:none; }
.search-hit:hover, .search-hit:focus { background:var(--grigio); }
.search-hit__thumb { flex:0 0 auto; width:46px; height:60px; background:var(--grigio); overflow:hidden; }
.search-hit__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.search-hit__meta { display:flex; flex-direction:column; min-width:0; }
.search-hit__name { font-family:var(--serif); font-size:1.02rem; line-height:1.2; }
.search-hit__cat { font-family:var(--sans); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--oro-scuro); margin-top:.15rem; }

body.search-open { overflow:hidden; }

/* ══ CONSIGLI & ISPIRAZIONI (blog interno hub, 03/08) ══
   Card in stile blog TULLE (richiesta Marco): TITOLO SULLA FOTO col velo che sfuma,
   abstract + link sotto, bordo leggero. Il velo è pieno in basso e trasparente a metà
   foto → il titolo si stacca su qualunque fotogramma. */
.posts { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); }
@media (max-width: 960px){ .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .posts { grid-template-columns: 1fr; } }
.post-card { display:flex; flex-direction:column; background:#fff; border:1px solid rgba(34,34,34,.08); }
.post-card__media { position:relative; display:block; aspect-ratio: 3/4; overflow:hidden; background: var(--grigio); }
.post-card__media img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .7s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__media::after { content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(to top, rgba(28,26,23,.92) 0%, rgba(28,26,23,.70) 30%, rgba(28,26,23,0) 64%); }
.post-card__title { position:absolute; z-index:2; left:0; right:0; bottom:0; margin:0; padding: var(--s-3);
  font-family: var(--serif); font-weight:500; font-size:1.05rem; line-height:1.32; letter-spacing:.02em;
  color:#fff; text-transform:none; }
.post-card__body { display:flex; flex-direction:column; flex:1; padding: var(--s-3); }
.post-card__body p { color: var(--testo-soft, #6b655c); font-size:.92rem; line-height:1.6; margin:0 0 var(--s-3); }
.post-card .link-arrow { margin-top:auto; align-self:flex-start; text-transform:none; letter-spacing:0; font-size:.88rem; font-weight:600; }
/* articolo: colonna stretta da lettura — stile allineato al blog Tulle (Marco 03/08):
   H1 SENZA tracking extra (il .04em che c'era non esiste su Tulle), riga meta con ICONE
   e più aria, primo paragrafo = sommario più grande. */
.art__col { max-width: 720px; }
.art__head h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: .5rem 0 .9rem; }
.art__meta { display:flex; flex-wrap:wrap; align-items:center; gap: .4rem clamp(1rem, 2vw, 1.6rem);
  font-family: var(--sans); font-size: .84rem; color: var(--testo-soft, #6b655c); margin-bottom: var(--s-4); }
.art__meta > span { display:inline-flex; align-items:center; gap: .42rem; }
.art__ico { width:14px; height:14px; flex:none; opacity:.7; }
.art__cover { margin: 0 0 var(--s-4); }
.art__cover img { width: 100%; display: block; }
/* NIENTE "sommario" (primo paragrafo grande) qui, a differenza di Tulle — deciso con Marco
   03/08: i testi del cliente aprono a frammenti (frase-esca con due punti, poi citazione)
   e la regola automatica ingrandiva mezzi periodi. Corpo tutto uguale. */
.art__body h2 { font-size: clamp(1.1rem, 1.9vw, 1.35rem); letter-spacing: .04em; margin: var(--s-4) 0 var(--s-2); }
.art__body p { margin-bottom: var(--s-2); line-height: 1.7; }
.art__cta { margin-top: var(--s-5); }

/* ══ LOVE AGAIN (landing seconde nozze, 03/08) ══ */
/* il marchio del percorso sull'hero: serif maiuscolo grande (NON è l'H1 — quello, SEO, sta sotto) */
.lovea-mark { font-family: var(--serif); font-weight: 500; color: #fff; text-transform: uppercase;
  letter-spacing: .08em; font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.05; margin-bottom: var(--s-3); }
/* H1 nella sezione sotto l'hero: stesso registro dei titoli di sezione, corpo da H1 */
.lovea-h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: .04em; margin-bottom: var(--s-3); }
/* foto grande emozionale a tutta larghezza (placeholder finché non arriva quella del cliente) */
.lovea-photo { overflow: hidden; }
.lovea-photo img { display: block; width: 100%; height: clamp(320px, 62vh, 560px); object-fit: cover; object-position: center 30%; }
/* Sezione Love Again in home: il manifesto vive su 3 righe piene (i br-desk); il cap 62ch le spezzerebbe */
.lovea-band .lead { max-width: none; }

@media (max-width:1240px){
  .search-modal__panel { margin:0; max-width:none; height:100%; max-height:100vh; }
}
/* 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; }

/* Placeholder per le collezioni SENZA foto (es. Andrea Sedici): riquadro neutro con
   un'icona, invece di un buco vuoto. Scelta di Marco (14/07): niente foto finta, si vede
   che la collezione sta arrivando. Eredita l'aspect-ratio 3/4 da .hub-card__media. */
.hub-card__ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: var(--grigio);
  color: rgba(34,34,34,.28);
  border: 1px dashed rgba(34,34,34,.14);
}
.hub-card__ph svg { width: 34%; max-width: 64px; height: auto; }
.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); }
/* riga secondaria del titolo card (es. "Collezione Sole" sotto "Tulle Sposa") */
.hub-card__name-sub { display: block; font-family: var(--sans); font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--testo-soft, #6b655c); margin-top: .3rem; }
/* hub a layout 'split' (1-2 collezioni, es. Tulle): blocco editoriale al posto della griglia.
   max-width 960: colonne più strette → la foto (altezza 420-620px) torna VERTICALE ~3:4 (Marco 29/07) */
.hub-split { max-width: 960px; margin-inline: auto; }
.hub-split + .hub-split { margin-top: var(--s-7); }
.hub-split .actions { margin-top: var(--s-4); }
.hub-split h2 .hub-card__name-sub { font-size: .95rem; margin-top: .45rem; }
.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; }
/* Il modulo e' un OGGETTO a se': staccato dal testo che lo introduce e delimitato da una
   cornice sottile oro (Marco, 14/07). Prima aveva solo margin-top: 1rem e si confondeva col
   paragrafo sopra — non si capiva dove finiva il discorso e dove iniziava la compilazione.
   Radius 0, come tutto il sito.
   Bordo 3px (Marco, 14/07): a 1px l'oro al 42% era un'ipotesi, non un confine — su mobile,
   dove il modulo occupa tutto lo schermo, spariva del tutto. A 3px il riquadro si vede e si
   capisce cosa c'è dentro. Il colore NON si scurisce: a tripla larghezza l'oro al 42% pesa
   già abbastanza, alzarlo lo farebbe diventare una scatola. */
.pren-form {
  margin-top: var(--s-5);
  border: 3px solid rgba(133,113,77,.42);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.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; }

/* ── DATA DELLE NOZZE: 3 tendine (giorno facoltativo · mese · anno) ─────────────────
   Correzione cliente 14/07: il campo era di testo e dal telefono non apriva nessun
   calendario. I <select> aprono il selettore nativo su ogni dispositivo, e il giorno
   resta facoltativo perche' la data puo' essere ancora indicativa.
   Stile identico agli altri campi (bordo, radius 0, focus oro): non e' un elemento nuovo. */
.data-nozze { display:grid; grid-template-columns: .8fr 1.3fr 1fr; gap:.5rem; }
.data-nozze select {
  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 .6rem;
  transition:border-color .2s var(--ease); }
.data-nozze select:focus { outline:none; border-color:var(--oro); box-shadow:0 0 0 2px rgba(133,113,77,.14); }
.field--err .data-nozze select { border-color:#b3403a; }
.field__hint { display:block; margin-top:.4rem; color:var(--testo-soft); font-size:.82rem; }
@media (max-width:420px){ .data-nozze { grid-template-columns: 1fr 1fr; } .data-nozze select:first-child { grid-column: 1 / -1; } }
.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); }
/* ══ MOBILE: PRIMA IL FORM, POI LE INFORMAZIONI (Marco, 14/07) ═══════════════════════
   Il problema: nel DOM l'<aside> viene prima del form (su desktop e' la colonna sinistra).
   Collassando a una colonna finiva TUTTO sopra — collezione, indirizzo, l'elenco degli
   orari giorno per giorno, telefoni, email, mappa — e il primo campo del modulo restava
   lontanissimo. Su una pagina che si raggiunge cliccando "Prenota", cioe' con l'intenzione
   gia' dichiarata.

   Perche' l'inversione e non un accordion o un tasto "vai al form":
     · l'accordion nasconde e basta — il form resta comunque sotto;
     · un tasto-ancora ammette che l'ordine e' sbagliato, e costa un tap in piu'.
   L'ordine giusto e' semplicemente: form davanti, informazioni dietro.

   L'UNICA informazione che resta in alto e' la SEDE (.pren-sede-m, stampata dentro
   .pren-main e visibile solo qui): l'indirizzo e' cio' che ti fa decidere se compilare.
   Orari, telefoni e mappa si consultano DOPO — o se preferisci chiamare invece di scrivere.

   `order` funziona sui figli del grid: nessuna modifica al markup, nessun rischio. */
@media (max-width: 900px){
  .pren-layout { grid-template-columns:1fr; gap: var(--s-4); }
  .pren-aside { position: static; order: 2; }
  .pren-main  { order: 1; }
}

/* Riga "dove" in cima al form: solo mobile (su desktop l'aside e' gia' li' accanto). */
.pren-sede-m { display: none; }
@media (max-width: 900px){
  .pren-sede-m {
    display: flex; align-items: flex-start; gap: .6rem;
    /* staccato dal form: prima ci si appoggiava sopra e sembravano un blocco solo.
       Cornice sottile oro come quella del modulo → i due riquadri si leggono come
       due oggetti distinti della stessa famiglia. */
    margin-block: var(--s-4) var(--s-5);
    padding: .9rem 1.05rem;
    background: var(--grigio);
    border: 1px solid rgba(133,113,77,.42);
    border-radius: var(--radius);
    font-size: .92rem; line-height: 1.5; color: var(--testo);
  }
  .pren-sede-m svg { width: 18px; height: 18px; flex: none; margin-top: .15rem; color: var(--oro-scuro); }
  .pren-sede-m strong { font-weight: 600; }
}