/* =====================================================
   LOOKBOOK ENGINE — STYLE
   Modifica le variabili in :root per cambiare l'aspetto.
   ===================================================== */

/* ╔════════════════════════════════════════════════════════════╗
   ║  ⚙️  CONFIGURAZIONE GLOBALE GAP DEL LOOKBOOK              ║
   ║                                                            ║
   ║  Modifica questi 3 valori per propagare i cambiamenti      ║
   ║  in automatico su TUTTI i blocchi del lookbook.            ║
   ║                                                            ║
   ║  --gap-inside:   gap DENTRO un blocco                      ║
   ║                  (tra le foto/card di uno stesso blocco,   ║
   ║                  tra foto e caption, tra contenitori       ║
   ║                  affiancati nella stessa pagina)           ║
   ║                                                            ║
   ║  --gap-between:  gap VERTICALE tra blocchi diversi         ║
   ║                  (es. tra il Diptych e il Triptych che     ║
   ║                  sta sotto). Vale anche per il padding     ║
   ║                  top/bottom del primo e ultimo blocco.     ║
   ║                                                            ║
   ║  --gap-page:     gap LATERALE tra blocco e bordo schermo   ║
   ║                  (margine esterno orizzontale).            ║
   ║                                                            ║
   ║  ESEMPI PRATICI:                                           ║
   ║  Tutto a 4px  → look stretto/editoriale (attuale)          ║
   ║  Tutto a 12px → look medio/respirato                       ║
   ║  Tutto a 24px → look ampio/classico                        ║
   ║                                                            ║
   ║  NOTA: la topbar, l'hero e il footer hanno il loro         ║
   ║  margine indipendente (--page-pad-x-original) che NON      ║
   ║  viene modificato da queste variabili. Mantiene respiro    ║
   ║  costante per logo e titoli.                               ║
   ╚════════════════════════════════════════════════════════════╝ */

:root {
  --gap-inside:   4px;   /* gap interno dei blocchi */
  --gap-between:  4px;   /* spacing verticale tra blocchi diversi */
  --gap-page:     4px;   /* margine laterale dei blocchi */
}

/* ╔════════════════════════════════════════════════════════════╗
   ║  🎨  DESIGN TOKENS DEL LOOKBOOK                            ║
   ║                                                            ║
   ║  Le 6 sezioni qui sotto controllano l'aspetto globale.     ║
   ║  Modifica un valore qui → si propaga su tutto il lookbook. ║
   ║                                                            ║
   ║  Sezioni:                                                  ║
   ║   1. SFONDO PAGINA → colore del lookbook intero            ║
   ║   2. TIPOGRAFIA    → font e dimensioni testi               ║
   ║   3. COLORI        → ink, surface, line                    ║
   ║   4. BOTTONE CTA   → "Visualizza N articoli"               ║
   ║   5. PALLINO "+"   → tondo che apre i popup                ║
   ║   6. POPUP         → pannello laterale prodotto/look       ║
   ║                                                            ║
   ║  NOTA: le variabili --font, --mono, --ink, --bg ecc.       ║
   ║  esistenti continuano a funzionare. Sono ora collegate     ║
   ║  alle nuove --lb-* qui sotto (sono "alias"). Cambia il     ║
   ║  valore --lb-* e cambia ovunque automaticamente.           ║
   ╚════════════════════════════════════════════════════════════╝ */

:root {

  /* ───────────────────────────────────────────────────────────
     1. SFONDO PAGINA
     ─────────────────────────────────────────────────────────── */

  /* Colore di fondo dell'INTERO lookbook (sotto tutti i blocchi).
     Esempi: #FAFAFA bianco sporco / #FFFFFF bianco / #0A0A0A nero
     Per tema scuro: ricorda di invertire anche --lb-ink. */
  --lb-page-bg:           #FAFAFA;

  /* Sfondo delle "superfici" sopra al bg: il popup laterale,
     eventuali card con sfondo distinto. Di solito bianco puro
     per stagliarsi sul --lb-page-bg leggermente grigio. */
  --lb-surface:           #FFFFFF;

  /* Sfondo dei placeholder foto (quando l'immagine sta caricando
     o quando manca). Grigio leggerissimo, neutro. */
  --lb-surface-alt:       #F1F1F1;


  /* ───────────────────────────────────────────────────────────
     2. TIPOGRAFIA
     ─────────────────────────────────────────────────────────── */

  /* Font primario: tutto il testo "normale" (nomi prodotti,
     titoli, etichette collezione). Cambialo per cambiare il
     carattere principale del lookbook (es. 'Inter', 'Playfair'). */
  --lb-font-primary:      'Manrope', system-ui, -apple-system, sans-serif;

  /* Font mono: tutti i testi tecnici (SKU, prezzo "€ 27,00",
     numerazione pagine "01/13", etichette uppercase tipo
     "DIPTYCH"). Cambialo per dare un'altra "voce" al tecnico. */
  --lb-font-mono:         'JetBrains Mono', ui-monospace, monospace;

  /* --- Font size: testi prodotto (caption sotto ogni foto) --- */

  /* "SKU A0015-1" — la riga grigia uppercase sotto la foto */
  --lb-fs-sku:            10px;

  /* "Black Rose Capo" — il nome del prodotto, principale */
  --lb-fs-name:           14px;

  /* "€ 27,00" — il prezzo in font mono sotto il nome */
  --lb-fs-price:          12px;

  /* --- Font size: testi editoriali (etichette, CTA, intestazioni) --- */

  /* "MARINES STORY", "TRIS ONE" — nomi collezione sopra le foto
     nei blocchi Curated (Diptych/Triptych Curated Dynamic) */
  --lb-fs-collection:     11px;

  /* "Visualizza 3 Articoli" — testo dentro il bottone nero in alto
     a destra dei blocchi Curated (Diptych, Triptych, Oversize) */
  --lb-fs-cta:            11px;

  /* "01 / 13" — numerazione progressiva delle pagine sopra
     ogni blocco (visibile solo se show_page_labels = true) */
  --lb-fs-page-num:       14px;

  /* "DIPTYCH", "TRIPTYCH MOSAIC" — nome tecnico del layout
     sopra la pagina (visibile solo se show_page_labels = true) */
  --lb-fs-page-label:     11px;

  /* --- Font size: hero in alto (solo se hero_style attivo) --- */

  /* "COLLECTION 2026" titolo enorme dell'hero in alto al lookbook.
     clamp() = scala automaticamente con la larghezza schermo:
       min 48px (mobile) → ideale 7vw → max 120px (desktop large) */
  --lb-fs-hero-title:     clamp(48px, 7vw, 120px);

  /* Sottotitolo dell'hero, sopra/sotto il titolo principale.
     Stessa logica clamp ma valori più piccoli. */
  --lb-fs-hero-subtitle:  clamp(14px, 1.4vw, 18px);


  /* ───────────────────────────────────────────────────────────
     3. COLORI (testo + linee divisorie)
     ─────────────────────────────────────────────────────────── */

  /* Inchiostro principale: tutti i nomi prodotto, titoli, testi
     enfatici. Per default nero quasi puro (#0A0A0A) per essere
     più morbido del nero puro (#000) ma quasi indistinguibile. */
  --lb-ink:               #0A0A0A;

  /* Inchiostro "soft": testi secondari un po' attenuati come
     i prezzi, descrizioni brevi. Grigio scuro. */
  --lb-ink-soft:          #555555;

  /* Inchiostro "mute": testi tertiari molto attenuati come SKU,
     etichette layout, numerazione pagine. Grigio chiaro. */
  --lb-ink-mute:          #999999;

  /* Linea divisoria sottile: bordi appena percepibili tra
     elementi (es. bordo bottom della topbar). 8% opacità. */
  --lb-line:              rgba(0,0,0,0.08);

  /* Linea divisoria visibile: bordi del bottone taglia nel popup,
     bordi cella foto piccola, ecc. 20% opacità. */
  --lb-line-strong:       rgba(0,0,0,0.20);


  /* ───────────────────────────────────────────────────────────
     4. BOTTONE CTA — "Visualizza N articoli"
     (Compare in Diptych/Triptych Curated Dynamic e Oversize Stack)
     ─────────────────────────────────────────────────────────── */

  /* Colore di fondo del bottone. Default = --lb-ink (nero).
     Cambialo in 'white' per bottone bianco + bordo nero, o in
     un colore brand specifico (es. '#FF3366'). */
  --lb-cta-bg:            var(--lb-ink);

  /* Colore del testo dentro al bottone. Deve contrastare con
     --lb-cta-bg. Default = 'white' (bottone nero + testo bianco). */
  --lb-cta-color:         white;

  /* Padding verticale del bottone (alto e basso del testo).
     Più alto = bottone più "grasso". Default 10px. */
  --lb-cta-padding-y:     10px;

  /* Padding orizzontale del bottone (sinistra e destra del testo).
     Più alto = bottone più largo. Default 16px. */
  --lb-cta-padding-x:     16px;

  /* Arrotondamento degli angoli del bottone.
     0 = squadrato (editoriale), 4px = leggero, 99px = pillola. */
  --lb-cta-radius:        0;

  /* Spaziatura tra le lettere del testo del bottone.
     Più alto = testo più "tirato" (effetto uppercase elegante).
     0.15em è il default, prova 0.2em o 0.25em per più editoriale. */
  --lb-cta-letter-spacing: 0.15em;

  /* Peso del font del bottone. 400=normale, 500=medium,
     600=semibold, 700=bold. Default 500. */
  --lb-cta-font-weight:   500;


  /* ───────────────────────────────────────────────────────────
     5. PALLINO "+" (apre popup singolo o look multi-prodotto)
     (Compare in Grid 3 Cols, Diptych Curated, Triptych Curated,
      Lookbook Oversize Stack)
     ─────────────────────────────────────────────────────────── */

  /* Dimensione del pallino (larghezza = altezza, è un cerchio).
     Default 44px. Sotto i 36px diventa difficile da cliccare
     su mobile (regola Apple HIG / Material). */
  --lb-plus-size:         44px;

  /* Colore di fondo del pallino. Default = --lb-ink (nero).
     Prova 'white' con border + color nero per il pallino "invertito". */
  --lb-plus-bg:           var(--lb-ink);

  /* Colore del simbolo "+" dentro al pallino. Deve contrastare
     con --lb-plus-bg. Default 'white' (pallino nero + + bianco). */
  --lb-plus-color:        white;

  /* Dimensione del simbolo "+". Più grande = + più visibile.
     Default 24px (su pallino 44px lascia spazio). */
  --lb-plus-font-size:    24px;

  /* Arrotondamento del pallino.
     50% = cerchio perfetto (default). 0 = quadrato. 8px = leggero. */
  --lb-plus-radius:       50%;


  /* ───────────────────────────────────────────────────────────
     6. POPUP (pannello laterale prodotto / look multi-prodotto)
     ─────────────────────────────────────────────────────────── */

  /* Colore di fondo del pannello popup quando si apre.
     Default = stesso del body del lookbook → effetto "fusione",
     il popup appare come estensione naturale dello sfondo invece
     che riquadro fluttuante separato. Cambialo in 'white' o altro
     se vuoi un riquadro che si stacchi visivamente. */
  --lb-popup-bg:          var(--lb-page-bg);

  /* Colore dell'overlay scuro che oscura la pagina dietro al
     popup quando è aperto. rgba(0,0,0,0.32) = nero al 32%.
     Più alto (es. 0.6) = più oscuramento, più focus sul popup. */
  --lb-popup-overlay:     rgba(0,0,0,0.32);

  /* Larghezza del popup su desktop. Su mobile diventa
     automaticamente 100% schermo. Default 520px.
     Aumenta a 640px se vuoi più spazio per le foto. */
  --lb-popup-width:       520px;

  /* Padding-bottom INTERNO del bottom sheet mobile.
     Spazio vuoto sotto il contenuto del popup (titolo, carosello,
     caption) per evitare che la barra URL Safari, la home bar iOS,
     o il banner "storecollection.online · Privata" coprano le
     caption SKU/Nome/Prezzo del carosello. Solo mobile.
     115px = copertura sicura per iPhone X+ con barra Safari attiva. */
  --lb-sheet-padding-bottom: 115px;

  /* Padding laterale (sinistro/destro) interno al bottom sheet mobile.
     Spazio tra il bordo dello schermo e le card del carosello / il titolo.
     Solo mobile. */
  --lb-sheet-padding-x: 20px;

  /* Larghezza delle card del carosello mobile (% della larghezza schermo).
     Diminuisci se titolo/SKU/prezzo della card vengono tagliati in basso
     (card più strette = foto 3/4 più bassa = più spazio per caption).
     45% = vedi 2 card + parziale (raccomandato).
     60% = card grande, vedi 1 + parziale (può tagliare caption su iPhone piccoli). */
  --lb-sheet-card-width: 45%;

  /* Arrotondamento degli angoli del popup. 0 = squadrato
     (editoriale, default). 12px = morbido. 24px = molto morbido. */
  --lb-popup-radius:      0;

  /* Padding interno del popup (spazio tra bordo popup e contenuto).
     Default 28px desktop. Più alto = più "respiro" dentro al popup. */
  --lb-popup-padding:     28px;

}

/* ═══════════════════════════════════════════════════════════════
   ALIAS RETROCOMPATIBILI — NON TOCCARE
   ═══════════════════════════════════════════════════════════════
   Le vecchie variabili --font, --mono, --bg, --ink ecc. sono
   usate in 3000+ righe di CSS legacy. Per non rompere niente,
   le manteniamo vive ma le "collegammo" alle nuove --lb-*.
   Quando modifichi le --lb-* sopra, queste ereditano in automatico.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Alias del font primario: usato da body, titoli, ecc. */
  --font:                 var(--lb-font-primary);

  /* Alias del font mono: usato per SKU, prezzi, etichette tecniche */
  --mono:                 var(--lb-font-mono);

  /* Alias dello sfondo pagina: usato dal body e dalle schermate
     di caricamento/errore */
  --bg:                   var(--lb-page-bg);

  /* Alias del bianco "surface": usato dal popup quando si apre */
  --surface:              var(--lb-surface);

  /* Alias del grigio placeholder: sfondo delle foto in caricamento */
  --surface-alt:          var(--lb-surface-alt);

  /* Alias del nero principale: usato da titoli e testi forti */
  --ink:                  var(--lb-ink);

  /* Alias del grigio scuro: usato dai prezzi e da testi secondari */
  --ink-soft:             var(--lb-ink-soft);

  /* Alias del grigio chiaro: usato da SKU, etichette mute */
  --ink-mute:             var(--lb-ink-mute);

  /* Alias della linea sottile: bordi appena percepibili */
  --line:                 var(--lb-line);

  /* Alias della linea visibile: bordi del bottone taglia, ecc. */
  --line-strong:          var(--lb-line-strong);


  /* ───────────────────────────────────────────────────────────
     Variabili legacy NON variabilizzate (raramente toccate).
     Le lascio qui per documentare cosa fanno.
     ─────────────────────────────────────────────────────────── */

  /* Ombra piccola: applicata su elementi che galleggiano lievemente
     (es. card piccole). 4px blur, 8% opacità. */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);

  /* Ombra grande: usata dal pannello popup quando è aperto.
     40px blur, 14% opacità, effetto "drawer galleggiante". */
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.14);

  /* Arrotondamento standard: applicato a piccoli elementi
     interni (es. avatars, badge). Default 4px. */
  --radius: 4px;

  /* Arrotondamento grande: applicato a card più ampie.
     Default 6px. */
  --radius-lg: 6px;

  /* Curva delle transizioni: cubic-bezier "ease-out elegant".
     0.22s di durata. Usata da hover, fade, slide. */
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

  /* Padding orizzontale dei blocchi del lookbook (.page).
     COLLEGATO a --gap-page in cima al CSS: cambia il gap laterale
     e questo segue. Topbar / Hero / Footer NON usano questa: usano
     --page-pad-x-original (più sotto) per mantenere respiro fisso. */
  --page-pad-x: var(--gap-page);

  /* Padding orizzontale di Topbar / Hero / Footer.
     clamp() = scala da 24px (mobile) a 60px (desktop). Indipendente
     dal --gap-page: mantiene logo/titolo sempre con buon respiro. */
  --page-pad-x-original: clamp(24px, 5vw, 60px);

  /* Larghezza massima del contenuto del lookbook (in pixel).
     Sopra 1600px lo sfondo continua ma il contenuto si centra. */
  --page-max: 1600px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}
a { color: inherit; }
button { font-family: inherit; }

/* =====================================================
   LOADING / ERROR STATES
   ===================================================== */

.loading-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  z-index: 200;
  transition: opacity 0.4s;
}
.loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
}
.loading-screen .spinner {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--line-strong);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.loading-screen .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.error-screen {
  padding: 80px 24px;
  text-align: center;
}
.error-screen h2 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 12px;
}
.error-screen p {
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 auto;
}

/* =====================================================
   HEADER / TOPBAR
   ───────────────────────────────────────
   RIMOSSA dalla versione integrata WordPress: il menu del sito ospitante
   è già in alto, una topbar interna sarebbe ridondante. Tutte le regole
   .topbar* sono state eliminate per evitare spazio fantasma e conflitti
   di stacking (mix-blend-mode, fixed positioning, ecc.).
   ===================================================== */

/* =====================================================
   COVER (modalità "simple")
   ===================================================== */

.cover {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 100px var(--page-pad-x-original) 60px;
}
.cover-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 24px;
}
.cover h1 {
  font-weight: 300;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.cover-sub {
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 480px;
}

/* COVER SIMPLE-2 — Contenuto allineato in alto, hero compatta.
   Stesso stile della cover normale ma senza centratura verticale e senza meta. */
.cover--simple-2 {
  min-height: auto;
  justify-content: flex-start;
  padding-top: 80px;
  padding-bottom: 60px;
}

/* =====================================================
   HERO (pinned, GSAP scroll-driven)
   ===================================================== */

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--ink);
}
.hero .stage {
  position: absolute;
  inset: 0;
}

/* Card video centrata - parte fullscreen, durante lo scroll si rimpicciolisce */
.media {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%) scale(1.05);
  transform-origin: center center;
  overflow: hidden;
  border-radius: 0;
  will-change: transform, width, height;
}
.media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.30) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.20) 0%, transparent 25%, transparent 70%, rgba(0,0,0,0.40) 100%);
  pointer-events: none;
  z-index: 2;
}
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
}

/* Side markers verticali "SS · 26" che appaiono ai lati */
.side-marker {
  position: absolute;
  z-index: 10;
  background: var(--bg);
  padding: 24px 11px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  opacity: 0;
  user-select: none;
}
.side-marker--left {
  right: calc(50% + 21vw);
  top: 42%;
  transform: translate(-24px, -50%);
}
.side-marker--right {
  left: calc(50% + 21vw);
  top: 42%;
  transform: translate(24px, -50%);
}

/* Hero title overlay - 3 elementi (eyebrow + h1 + sub) sotto la card */
.hero-title-overlay {
  position: absolute;
  bottom: 6vh;
  left: 0;
  right: 0;
  z-index: 11;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(40px);
  padding: 0 24px;
}
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.hero-title {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 16px;
}
.hero-sub {
  font-family: var(--font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 520px;
  margin: 0 auto;
}

/* Caption laterale (visibile solo nello stato iniziale dell'hero) */
.hero-caption {
  position: absolute;
  bottom: 48px;
  left: 40px;
  z-index: 12;
  color: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-caption .line {
  width: 36px;
  height: 1px;
  background: var(--bg);
  opacity: 0.6;
  margin-bottom: 4px;
}

/* Scroll cue (visibile solo nello stato iniziale dell'hero) */
.scroll-cue {
  position: absolute;
  bottom: 48px;
  right: 40px;
  z-index: 12;
  color: var(--bg);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0.85;
}
.scroll-cue::after {
  content: '';
  width: 1px;
  height: 40px;
  background: var(--bg);
  animation: scroll-pulse 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
  50%      { transform: scaleY(1); opacity: 1; }
}

/* =====================================================
   HERO DISCOVER (Variante 06: "Scopri" + freccia)
   Posizionato DENTRO la sezione hero, in basso al centro,
   sotto il titolo overlay. Appare alla fine dell'animazione GSAP.
   ===================================================== */

.hero-discover {
  position: absolute;
  bottom: 8vh;
  left: 50%;
  transform: translate(-50%, 20px);
  z-index: 12;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.hero-discover-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.hero-discover-arrow {
  width: 1px;
  height: 36px;
  background: var(--ink-mute);
  margin: 0 auto;
  position: relative;
  animation: arrow-pulse 2.4s ease-in-out infinite;
}
.hero-discover-arrow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--ink-mute);
  border-bottom: 1px solid var(--ink-mute);
  margin-bottom: -2px;
}
@keyframes arrow-pulse {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(6px); }
}

/* =====================================================
   PAGE — Layout Type 01 Centered (default)
   ===================================================== */

.page {
  padding: 0 var(--page-pad-x);
  margin: 0 auto;
}
.page:first-of-type {
  padding-top: var(--gap-between);
}
.page:last-of-type {
  padding-bottom: var(--gap-between);
}
.page-head {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-top: 40px;
  margin-bottom: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.page:first-of-type .page-head { margin-top: 0; }
.page-head .num { color: var(--ink); font-weight: 500; }

/* Toggle: quando body.hide-page-labels è attivo (config.show_page_labels = false),
   le etichette tecniche sopra ogni blocco sono nascoste tramite JS (renderPageHead
   ritorna stringa vuota). Per compensare lo spacing perso (margin-top 40px del .page-head)
   aggiungo un padding-top alle .page successive alla prima. */
body.hide-page-labels .page + .page {
  padding-top: var(--gap-between);
}
body.hide-page-labels .page-head { display: none; }
.page-photo {
  aspect-ratio: 4/5;
  max-width: 700px;
  margin: 0 auto;
  background: var(--surface-alt);
  position: relative;
  overflow: hidden;
}
.page-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-caption {
  max-width: 700px;
  margin: 16px auto 0;
}

/* CAPTION CON MINI THUMBNAIL (componente riutilizzabile)
   Usa la prima foto della gallery WooCommerce (still life del prodotto). */
.caption-with-thumb {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
}
.caption-with-thumb .thumb {
  width: 48px;
  height: 48px;
  background: var(--surface-alt);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.caption-with-thumb .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.caption-with-thumb .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.caption-with-thumb .info .sku {
  font-family: var(--mono);
  font-size: var(--lb-fs-sku);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 3px;
}
.caption-with-thumb .info .name {
  font-size: var(--lb-fs-name);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 2px;
}
.caption-with-thumb .info .price {
  font-family: var(--mono);
  font-size: var(--lb-fs-price);
  color: var(--ink-soft);
}

/* =====================================================
   PAGE — Layout Type 02 Hero Left
   ===================================================== */
.page--type-02 .page-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: end;
}
.page--type-02 .hero-photo { grid-column: 1 / span 7; position: relative; }
.page--type-02 .hero-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.page--type-02 .hero-caption-side {
  grid-column: 9 / span 4;
}
.page--type-02 .caption-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--ink-mute);
  margin-bottom: 16px;
}

/* =====================================================
   PAGE — Layout Type 03 Hero Right (specchio del 02)
   ===================================================== */
.page--type-03 .page-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: end;
}
.page--type-03 .hero-caption-side {
  grid-column: 2 / span 4;
}
.page--type-03 .hero-photo { grid-column: 6 / span 7; position: relative; }
.page--type-03 .hero-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.page--type-03 .caption-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--ink-mute);
  margin-bottom: 16px;
}

/* =====================================================
   PAGE — Layout Type 04 Diptych
   ===================================================== */
.page--type-04 .page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.page--type-04 .diptych-item .page-photo {
  aspect-ratio: 4/5;
  position: relative;
  max-width: none;
  margin: 0;
}
.page--type-04 .diptych-item .page-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page--type-04 .diptych-item .page-caption {
  margin: 8px 0 0;
  max-width: none;
}

/* =====================================================
   PAGE — Layout Type 05 Dispersed
   ===================================================== */
.page--type-05 .page-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  position: relative;
}
.page--type-05 .dispersed-row {
  display: contents; /* su desktop il wrapper è trasparente, i figli vanno nella grid 12-col */
}
.page--type-05 .dispersed-a { grid-column: 1 / span 4; grid-row: 1; }
.page--type-05 .dispersed-b { grid-column: 9 / span 4; grid-row: 2; margin-top: 80px; }
.page--type-05 .dispersed-c { grid-column: 2 / span 5; grid-row: 3; margin-top: 60px; }
.page--type-05 .dispersed-item .page-photo {
  aspect-ratio: 4/5;
  position: relative;
  max-width: none;
  margin: 0;
}
.page--type-05 .dispersed-item .page-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page--type-05 .dispersed-item .page-caption {
  margin: 8px 0 0;
  max-width: none;
}

/* =====================================================
   PAGE — Layout Type 06 Full Bleed
   ===================================================== */
.page--type-06 {
  padding-left: 0;
  padding-right: 0;
}
.page--type-06 .page-head {
  padding: 0 var(--page-pad-x);
  margin-bottom: 20px;
}
.page--type-06 .fullbleed-wrap {
  width: 100%;
  position: relative;
}
.page--type-06 .fullbleed-photo {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.page--type-06 .fullbleed-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page--type-06 .fullbleed-overlay {
  position: absolute;
  bottom: 32px;
  right: 32px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 12px 16px;
  border-radius: 4px;
  z-index: 5;
}
.page--type-06 .overlay-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
}
.page--type-06 .overlay-row .thumb {
  width: 44px;
  height: 44px;
  background: var(--surface-alt);
  border-radius: 2px;
  overflow: hidden;
}
.page--type-06 .overlay-row .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page--type-06 .overlay-row .info {
  /* min-width: 0 sulla cella info (grid track 1fr) per far scattare l'ellipsis
     del .name lungo invece di stirare la cella oltre lo schermo. */
  min-width: 0;
}
.page--type-06 .overlay-row .info .sku {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 2px;
}
.page--type-06 .overlay-row .info .name {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
  /* Tronca titoli lunghi con "..." */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page--type-06 .overlay-row .info .price {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
}

/* =====================================================
   PAGE — Layout Type 07 Grid 3 Columns (REVISIONATO)
   - Niente più hotspot bianchi sulle foto
   - Niente più mini thumbnail nella caption
   - Pallino "+" 44px in basso a destra della foto
   - Caption pulita: SKU + Nome + Prezzo allineati a sinistra
   - Click su foto o pallino "+" → apre popup prodotto singolo
   ===================================================== */
.page--type-07 .grid3-grid {
  display: grid;
  gap: var(--gap-inside);
}
.page--type-07 .grid3-grid.count-3 { grid-template-columns: repeat(3, 1fr); }
.page--type-07 .grid3-grid.count-4 { grid-template-columns: repeat(4, 1fr); }
.page--type-07 .grid3-grid.count-5 { grid-template-columns: repeat(5, 1fr); }
.page--type-07 .grid3-item {
  display: flex;
  flex-direction: column;
  /* min-width: 0 sulla cella di una grid track 1fr — altrimenti il titolo
     lungo allarga la colonna oltre 1fr. */
  min-width: 0;
}
.page--type-07 .grid3-photo {
  aspect-ratio: 3/4;
  position: relative;
  background: var(--surface-alt);
  overflow: hidden;
  cursor: pointer;
}
.page--type-07 .grid3-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.page--type-07 .grid3-photo:hover img { transform: scale(1.03); }
/* Pallino "+" sulla foto — in basso a destra, stesso stile degli altri blocchi */
.page--type-07 .grid3-plus-dot {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: var(--lb-plus-size);
  height: var(--lb-plus-size);
  border-radius: var(--lb-plus-radius);
  background: var(--lb-plus-bg);
  color: var(--lb-plus-color);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  font-size: var(--lb-plus-font-size);
  font-weight: 300;
  line-height: 1;
  padding: 0;
}
.page--type-07 .grid3-plus-dot:hover {
  background: #333;
  transform: scale(1.08);
}
/* Caption pulita: SKU + Nome + Prezzo allineati a sinistra (no thumb) */
.page--type-07 .grid3-caption {
  margin-top: var(--gap-inside);
  text-align: left;
  /* min-width: 0 per far funzionare l'ellipsis dentro flex/grid */
  min-width: 0;
}
.page--type-07 .grid3-caption .sku {
  font-family: var(--mono);
  font-size: var(--lb-fs-sku);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.page--type-07 .grid3-caption .name {
  font-size: var(--lb-fs-name);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 3px;
  /* Tronca titoli lunghi con "..." */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page--type-07 .grid3-caption .price {
  font-family: var(--mono);
  font-size: var(--lb-fs-price);
  color: var(--ink-soft);
}

/* =====================================================
   PAGE — Layout Type 08 Stacked Offset
   ===================================================== */
.page--type-08 .page-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.page--type-08 .stacked-a { grid-column: 1 / span 5; grid-row: 1; }
.page--type-08 .stacked-b { grid-column: 5 / span 5; grid-row: 2; margin-top: 60px; }
.page--type-08 .stacked-c { grid-column: 8 / span 5; grid-row: 3; margin-top: 60px; }
.page--type-08 .stacked-item .page-photo {
  aspect-ratio: 4/5;
  position: relative;
  max-width: none;
  margin: 0;
}
.page--type-08 .stacked-item .page-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page--type-08 .stacked-item .page-caption {
  margin: 8px 0 0;
  max-width: none;
}
.page--type-08 .stacked-item .caption-with-thumb {
  grid-template-columns: 40px 1fr;
  gap: 10px;
}
.page--type-08 .stacked-item .caption-with-thumb .thumb {
  width: 40px;
  height: 40px;
}
.page--type-08 .stacked-item .caption-with-thumb .info .name { font-size: 12px; }

/* =====================================================
   HOTSPOT
   ===================================================== */

.hotspot-wrap { position: absolute; z-index: 5; }
.hotspot-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
  transition: transform var(--transition);
  padding: 0;
  position: relative;
}
.hotspot-dot::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink);
}
.hotspot-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 0.5px solid rgba(255, 255, 255, 0.9);
  animation: pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}
.hotspot-dot:hover { transform: translate(-50%, -50%) scale(1.18); }

/* TOOLTIP */
.hotspot-card {
  position: absolute;
  width: 230px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 10px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 6;
  top: 24px;
  left: 50%;
  transform: translate(-50%, -8px);
}
@media (hover: hover) {
  .hotspot-wrap:hover .hotspot-card {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
}
.card-row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 10px; }
.card-thumb {
  width: 56px; height: 70px;
  border-radius: var(--radius);
  background: var(--surface-alt);
  object-fit: cover;
  flex-shrink: 0;
}
.card-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.card-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.card-price { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.card-cta {
  display: block;
  width: 100%;
  background: var(--ink);
  color: var(--surface);
  border: none;
  padding: 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background var(--transition);
}
.card-cta:hover { background: var(--ink-soft); }

/* =====================================================
   MODAL PRODOTTO
   ===================================================== */

.modal-overlay {
  position: fixed; inset: 0;
  background: var(--lb-popup-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
  z-index: 100;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-panel {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(var(--lb-popup-width), 100vw);
  background: var(--lb-popup-bg);
  border-radius: var(--lb-popup-radius);
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 101;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.modal-panel.open { transform: translateX(0); }
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
  border-bottom: 0.5px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  padding: 0;
  transition: transform var(--transition);
}
.modal-close:hover { transform: rotate(90deg); }
.modal-gallery {
  background: var(--surface-alt);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-gallery img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.3s;
}
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
  transition: background var(--transition);
  box-shadow: var(--shadow-sm);
}
.gallery-nav:hover { background: white; }
.gallery-nav.prev { left: 14px; }
.gallery-nav.next { right: 14px; }
.gallery-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.gallery-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  transition: all var(--transition);
}
.gallery-dot.active {
  background: var(--ink);
  width: 16px;
  border-radius: 3px;
}
.modal-body { padding: var(--lb-popup-padding); flex: 1; text-align: left; }
.modal-sku {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.modal-title {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 16px;
}
.modal-price {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 28px;
}
.modal-section { margin-bottom: 24px; }
.modal-section-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.size-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.size-btn {
  min-width: 48px;
  height: 44px;
  padding: 0 12px;
  border: 0.5px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  transition: all var(--transition);
  border-radius: var(--radius);
}
.size-btn:hover { background: var(--surface-alt); }
.size-btn.selected {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--surface);
}
.modal-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 0.5px solid var(--line);
}
.btn-primary, .btn-secondary {
  display: block;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: all var(--transition);
  cursor: pointer;
  border: 0.5px solid var(--line-strong);
}
.btn-primary {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn-secondary { background: var(--surface); color: var(--ink); }
.btn-secondary:hover { background: var(--surface-alt); }

/* =====================================================
   FOOTER
   ===================================================== */

.footer {
  padding: 100px var(--page-pad-x-original) 40px;
  border-top: 0.5px solid var(--line);
  text-align: center;
}
.footer-brand {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.footer-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* =====================================================
   CURATED BLOCKS — Layout editoriali con foto custom + SKU multi
   Le foto custom sono caricate da data/curated-images/
   I prodotti correlati usano gallery[0] (still life)
   ===================================================== */

/* Placeholder visibile quando l'immagine custom non è stata caricata */
.curated-image-placeholder {
  width: 100%;
  height: 100%;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
}
.curated-image-placeholder .placeholder-text {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 20px;
}
.curated-image-placeholder .placeholder-label {
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--ink-soft);
}
.curated-image-placeholder .placeholder-path {
  font-size: 10px;
  opacity: 0.7;
}

/* ========== CURATED A — HERO + PRODUCT STRIP ========== */
.page--curated-a .curated-a-grid {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 40px;
  align-items: stretch;
}
.page--curated-a .hero-photo {
  background: var(--surface-alt);
  aspect-ratio: 4/5;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.page--curated-a .hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page--curated-a .strip {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.page--curated-a .strip-products {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.page--curated-a .strip-product {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  border-bottom: 0.5px solid var(--line-strong);
  min-height: 0;
  padding: 12px 0;
  overflow: hidden;
  cursor: pointer;
}
.page--curated-a .strip-product:last-child { border-bottom: none; }
.page--curated-a .strip-product .ph {
  height: 100%;
  aspect-ratio: 4/5;
  background: var(--surface-alt);
  overflow: hidden;
  flex-shrink: 0;
}
.page--curated-a .strip-product .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page--curated-a .strip-product .info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page--curated-a .strip-product .info .sku {
  font-family: var(--mono);
  font-size: var(--lb-fs-sku);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 3px;
}
.page--curated-a .strip-product .info .name {
  font-size: var(--lb-fs-name);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page--curated-a .strip-product .info .price {
  font-family: var(--mono);
  font-size: var(--lb-fs-price);
  color: var(--ink-soft);
}

/* ========== CURATED B — ATMOSPHERE FULL BLEED + GRID ========== */
.page--curated-b {
  padding-left: 0;
  padding-right: 0;
}
.page--curated-b .page-head {
  padding: 0 var(--page-pad-x);
  margin-bottom: 20px;
}
.page--curated-b .atmosphere-photo {
  width: 100%;
  aspect-ratio: 21/9;
  background: var(--surface-alt);
  overflow: hidden;
  position: relative;
  margin-bottom: var(--gap-inside);
}
.page--curated-b .atmosphere-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page--curated-b .curated-b-products {
  display: grid;
  gap: var(--gap-inside);
  padding: 0;
}
/* Distribuzione equa basata sul numero di prodotti */
.page--curated-b .curated-b-products.count-2 { grid-template-columns: repeat(2, 1fr); }
.page--curated-b .curated-b-products.count-3 { grid-template-columns: repeat(3, 1fr); }
.page--curated-b .curated-b-products.count-4 { grid-template-columns: repeat(4, 1fr); }
.page--curated-b .curated-b-product {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  /* min-width: 0 indispensabile per fare scattare l'ellipsis del .name dentro
     una grid track 1fr — altrimenti il titolo lungo allarga la colonna. */
  min-width: 0;
}
.page--curated-b .curated-b-product .photo {
  aspect-ratio: 3/4;
  background: var(--surface-alt);
  overflow: hidden;
  margin-bottom: var(--gap-inside);
}
.page--curated-b .curated-b-product .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page--curated-b .curated-b-product .caption {
  /* min-width: 0 sulla caption per gli stessi motivi del parent */
  min-width: 0;
}
.page--curated-b .curated-b-product .caption .sku {
  font-family: var(--mono);
  font-size: var(--lb-fs-sku);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 3px;
}
.page--curated-b .curated-b-product .caption .name {
  font-size: var(--lb-fs-name);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 3px;
  /* Tronca i titoli lunghi con "..." invece di allargare la cella */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page--curated-b .curated-b-product .caption .price {
  font-family: var(--mono);
  font-size: var(--lb-fs-price);
  color: var(--ink-soft);
}

/* ========== CURATED E — GET THE LOOK ==========
   DESKTOP: layout simile al Curated A Hero Strip
     - Foto custom grande a sinistra (60% larghezza)
     - Lista verticale di anteprime a destra (40% larghezza), distribuiti equamente in altezza
     - Ogni anteprima: foto piccola + caption (nome+prezzo) + bottone Aggiungi
   MOBILE: layout simile al Curated B Atmosphere
     - Foto custom full-width sopra
     - Sotto: prodotti in linea (count-2/3/4 colonne) con foto + caption + Aggiungi sotto */

.page--curated-e .curated-e-grid {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: var(--gap-inside);
  align-items: stretch;
}
.page--curated-e .lifestyle-photo {
  aspect-ratio: 4/5;
  background: var(--surface-alt);
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.page--curated-e .lifestyle-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page--curated-e .products-side {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.page--curated-e .products-grid-2x2 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-inside);
  min-height: 0;
}
/* Ogni cella si distribuisce equamente nello spazio verticale.
   Niente border-bottom: separazione è data dal gap-inside.
   Niente padding verticale: prima/ultima cella allineate ai bordi del contenitore. */
.page--curated-e .product-cell {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  min-height: 0;
  overflow: hidden;
  cursor: pointer;
}
.page--curated-e .product-cell.empty { display: none; }

/* Foto: altezza piena della riga, larghezza da aspect-ratio */
.page--curated-e .product-cell .photo {
  height: 100%;
  aspect-ratio: 3/4;
  background: var(--surface-alt);
  overflow: hidden;
  flex-shrink: 0;
}
.page--curated-e .product-cell .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Info: SKU + Nome + Prezzo allineati a sinistra (stesso pattern degli altri Curated) */
.page--curated-e .product-cell .info {
  min-width: 0;
  text-align: left;
}
.page--curated-e .product-cell .info .sku {
  font-family: var(--mono);
  font-size: var(--lb-fs-sku);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.page--curated-e .product-cell .info .name {
  font-size: var(--lb-fs-name);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page--curated-e .product-cell .info .price {
  font-family: var(--mono);
  font-size: var(--lb-fs-price);
  color: var(--ink-soft);
}


/* ========== CURATED F — DIPTYCH ==========
   2 contenitori indipendenti affiancati (50/50)
   Ogni contenitore: 1 foto custom + 2 prodotti correlati sotto (50/50 nella sub-grid)
   Totale: 2 foto + 4 prodotti */
.page--curated-f .curated-f-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-inside);
}
.page--curated-f .block {
  display: flex;
  flex-direction: column;
}
.page--curated-f .block-photo {
  aspect-ratio: 4/5;
  background: var(--surface-alt);
  overflow: hidden;
  margin-bottom: var(--gap-inside);
  position: relative;
}
.page--curated-f .block-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page--curated-f .block-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-inside);
}
.page--curated-f .product {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  min-width: 0;
}
.page--curated-f .product .ph {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--surface-alt);
  overflow: hidden;
  margin-bottom: var(--gap-inside);
}
.page--curated-f .product .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page--curated-f .product .info {
  min-width: 0;
}
.page--curated-f .product .info .sku {
  font-family: var(--mono);
  font-size: var(--lb-fs-sku);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.page--curated-f .product .info .name {
  font-size: var(--lb-fs-name);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page--curated-f .product .info .price {
  font-family: var(--mono);
  font-size: var(--lb-fs-price);
  color: var(--ink-soft);
}


/* ========== SINGLE GRID DYNAMIC ==========
   - Griglia dinamica 3/4/5 colonne (count-N)
   - Ogni cella: foto sopra (con gallery sfogliabile) + caption sotto a sinistra
   - Default: mostra gallery[1] (indossata)
   - Hover desktop: cambia in gallery[0] (still life), appaiono frecce
   - Mobile: 2 colonne fisse, frecce sempre visibili */
.page--single-grid-dynamic .sgd-grid {
  display: grid;
  gap: var(--gap-inside);
}
.page--single-grid-dynamic .sgd-grid.count-3 { grid-template-columns: repeat(3, 1fr); }
.page--single-grid-dynamic .sgd-grid.count-4 { grid-template-columns: repeat(4, 1fr); }
.page--single-grid-dynamic .sgd-grid.count-5 { grid-template-columns: repeat(5, 1fr); }

.page--single-grid-dynamic .sgd-cell {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.page--single-grid-dynamic .sgd-photo-area {
  position: relative;
  aspect-ratio: 3/4;
  background: var(--surface-alt);
  overflow: hidden;
  margin-bottom: var(--gap-inside);
}
.page--single-grid-dynamic .sgd-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.page--single-grid-dynamic .sgd-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.page--single-grid-dynamic .sgd-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Frecce desktop: appaiono solo in hover, bianche al 60% senza sfondo.
   Stile condiviso tra Single Grid Dynamic e Curated G Feature (entrambi usano .sgd-arrow). */
.page--single-grid-dynamic .sgd-arrow,
.page--curated-g-feature .sgd-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: rgba(255,255,255,0.6);
  border: none;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition: opacity 0.25s ease, color 0.2s ease;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
  padding: 0;
}
.page--single-grid-dynamic .sgd-cell:hover .sgd-arrow,
.page--curated-g-feature .cgf-cell:hover .sgd-arrow { opacity: 1; }
.page--single-grid-dynamic .sgd-arrow:hover,
.page--curated-g-feature .sgd-arrow:hover { color: rgba(255,255,255,1); }
.page--single-grid-dynamic .sgd-arrow.prev,
.page--curated-g-feature .sgd-arrow.prev { left: 6px; }
.page--single-grid-dynamic .sgd-arrow.next,
.page--curated-g-feature .sgd-arrow.next { right: 6px; }
/* Caption sotto: SKU + Nome + Prezzo, allineata a sinistra */
.page--single-grid-dynamic .sgd-caption {
  text-align: left;
  min-width: 0;
}
.page--single-grid-dynamic .sgd-caption .sku {
  font-family: var(--mono);
  font-size: var(--lb-fs-sku);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.page--single-grid-dynamic .sgd-caption .name {
  font-size: var(--lb-fs-name);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page--single-grid-dynamic .sgd-caption .price {
  font-family: var(--mono);
  font-size: var(--lb-fs-price);
  color: var(--ink-soft);
}


/* ========== DIPTYCH CURATED DYNAMIC ==========
   - 2 card affiancate 50/50 (desktop e mobile)
   - Foto custom con sopra: bottone "Visualizza N articoli" + pallino "+"
   - Sotto la foto: solo nome collezione (mono uppercase) */
.page--diptych-curated-dynamic .dcd-diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-inside);
}
.page--diptych-curated-dynamic .dcd-card {
  display: flex;
  flex-direction: column;
}
.page--diptych-curated-dynamic .dcd-photo {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--surface-alt);
  overflow: hidden;
  margin-bottom: var(--gap-inside);
}
.page--diptych-curated-dynamic .dcd-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Riuso del placeholder Curated standard */
.page--diptych-curated-dynamic .dcd-photo .curated-image-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Bottone "Visualizza N articoli" — in alto a destra */
.page--diptych-curated-dynamic .dcd-view-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--lb-cta-bg);
  color: var(--lb-cta-color);
  padding: var(--lb-cta-padding-y) var(--lb-cta-padding-x);
  font-family: var(--mono);
  font-size: var(--lb-fs-cta);
  letter-spacing: var(--lb-cta-letter-spacing);
  text-transform: uppercase;
  font-weight: var(--lb-cta-font-weight);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.page--diptych-curated-dynamic .dcd-view-btn:hover { background: #333; }
.page--diptych-curated-dynamic .dcd-view-btn .label-short { display: none; }
.page--diptych-curated-dynamic .dcd-view-btn .label-long { display: inline; }
/* Pallino "+" — in basso a destra */
.page--diptych-curated-dynamic .dcd-plus-dot {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: var(--lb-plus-size);
  height: var(--lb-plus-size);
  border-radius: var(--lb-plus-radius);
  background: var(--lb-plus-bg);
  color: var(--lb-plus-color);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  font-size: var(--lb-plus-font-size);
  font-weight: 300;
  line-height: 1;
  padding: 0;
}
.page--diptych-curated-dynamic .dcd-plus-dot:hover {
  background: #333;
  transform: scale(1.08);
}
/* Nome collezione sotto la foto */
.page--diptych-curated-dynamic .dcd-collection-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  text-align: left;
}


/* ========== TRIPTYCH MOSAIC ==========
   3 foto editoriali con gerarchia visiva: 1 hero grande sx + 2 satelliti dx impilati
   Pallino "+" e bottone "Visualizza N articoli" solo sulla hero
   Mobile: hero full + 2 satelliti affiancati 50/50 sotto */
.page--triptych-mosaic .tm-mosaic {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: var(--gap-inside);
  align-items: stretch;
}
.page--triptych-mosaic .tm-hero {
  position: relative;
  aspect-ratio: 3/4;
  background: var(--surface-alt);
  overflow: hidden;
}
.page--triptych-mosaic .tm-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.page--triptych-mosaic .tm-hero:hover img { transform: scale(1.03); }
/* Placeholder Curated standard riposizionato */
.page--triptych-mosaic .tm-hero .curated-image-placeholder,
.page--triptych-mosaic .tm-slide .curated-image-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Side: 2 foto impilate, occupano stessa altezza della hero */
.page--triptych-mosaic .tm-side {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inside);
}
.page--triptych-mosaic .tm-slide {
  flex: 1 1 0;
  position: relative;
  background: var(--surface-alt);
  overflow: hidden;
  min-height: 0;
}
.page--triptych-mosaic .tm-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.page--triptych-mosaic .tm-slide:hover img { transform: scale(1.04); }

/* Bottone "Visualizza N articoli" sulla hero — in alto a destra */
.page--triptych-mosaic .tm-view-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--ink);
  color: white;
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.page--triptych-mosaic .tm-view-btn:hover { background: #333; }
.page--triptych-mosaic .tm-view-btn .label-short { display: none; }
.page--triptych-mosaic .tm-view-btn .label-long { display: inline; }
/* Pallino "+" sulla hero — in basso a destra */
.page--triptych-mosaic .tm-plus-dot {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  padding: 0;
}
.page--triptych-mosaic .tm-plus-dot:hover {
  background: #333;
  transform: scale(1.08);
}
/* Nome collezione sotto il mosaico */
.page--triptych-mosaic .tm-collection-name {
  margin-top: var(--gap-inside);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  text-align: left;
}


/* ========== TRIPTYCH CURATED DYNAMIC ==========
   3 card affiancate (struttura identica al Diptych Curated Dynamic ma con 3 colonne).
   Desktop: 3 colonne 33% ciascuna.
   Mobile: 2 card sopra 50/50 + 3a card (.tcd-card-full) full-width sotto. */
.page--triptych-curated-dynamic .tcd-triptych {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap-inside);
}
.page--triptych-curated-dynamic .tcd-card {
  display: flex;
  flex-direction: column;
}
.page--triptych-curated-dynamic .tcd-photo {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--surface-alt);
  overflow: hidden;
  margin-bottom: var(--gap-inside);
}
.page--triptych-curated-dynamic .tcd-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page--triptych-curated-dynamic .tcd-photo .curated-image-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Bottone "Visualizza N articoli" — in alto a destra */
.page--triptych-curated-dynamic .tcd-view-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--lb-cta-bg);
  color: var(--lb-cta-color);
  padding: var(--lb-cta-padding-y) var(--lb-cta-padding-x);
  font-family: var(--mono);
  font-size: var(--lb-fs-cta);
  letter-spacing: var(--lb-cta-letter-spacing);
  text-transform: uppercase;
  font-weight: var(--lb-cta-font-weight);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.page--triptych-curated-dynamic .tcd-view-btn:hover { background: #333; }
.page--triptych-curated-dynamic .tcd-view-btn .label-short { display: none; }
.page--triptych-curated-dynamic .tcd-view-btn .label-long { display: inline; }
/* Pallino "+" — in basso a destra */
.page--triptych-curated-dynamic .tcd-plus-dot {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: var(--lb-plus-size);
  height: var(--lb-plus-size);
  border-radius: var(--lb-plus-radius);
  background: var(--lb-plus-bg);
  color: var(--lb-plus-color);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  font-size: var(--lb-plus-font-size);
  font-weight: 300;
  line-height: 1;
  padding: 0;
}
.page--triptych-curated-dynamic .tcd-plus-dot:hover {
  background: #333;
  transform: scale(1.08);
}
/* Nome collezione sotto la foto */
.page--triptych-curated-dynamic .tcd-collection-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  text-align: left;
}


/* ========== LOOKBOOK OVERSIZE STACK ==========
   Sezione editoriale con foto edge-to-edge (sforano i margini della .page).
   Desktop: 1/2/3 foto in fila (count-1/2/3). Mobile: sempre stack verticale 1 colonna.
   Trucco edge-to-edge: margin laterale negativo che annulla il padding di .page.
   La caption sotto le foto resta DENTRO i margini standard (mantiene padding). */
.page--lookbook-oversize-stack .los {
  /* Edge-to-edge totale a prescindere dal padding di .page.
     Tecnica: 100vw + posizionamento relativo per sforare qualsiasi padding parent. */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.page--lookbook-oversize-stack .los-grid {
  display: grid;
  gap: var(--gap-inside);
}
.page--lookbook-oversize-stack .los-grid.count-1 { grid-template-columns: 1fr; }
.page--lookbook-oversize-stack .los-grid.count-2 { grid-template-columns: 1fr 1fr; }
.page--lookbook-oversize-stack .los-grid.count-3 { grid-template-columns: 1fr 1fr 1fr; }

.page--lookbook-oversize-stack .los-cell {
  position: relative;
  aspect-ratio: 3/4;
  background: var(--surface-alt);
  overflow: hidden;
}
.page--lookbook-oversize-stack .los-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.page--lookbook-oversize-stack .los-cell:hover img { transform: scale(1.02); }
/* Placeholder Curated standard riposizionato per riempire la cella */
.page--lookbook-oversize-stack .los-cell .curated-image-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Badge numerico "01 / 03" — in alto a sinistra su ogni foto */
.page--lookbook-oversize-stack .los-num {
  position: absolute;
  top: 20px;
  left: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: white;
  background: rgba(0,0,0,0.4);
  padding: 6px 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
}

/* Bottone "Visualizza N articoli" — solo sulla prima foto, in alto a destra */
.page--lookbook-oversize-stack .los-view-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--lb-cta-bg);
  color: var(--lb-cta-color);
  padding: var(--lb-cta-padding-y) var(--lb-cta-padding-x);
  font-family: var(--mono);
  font-size: var(--lb-fs-cta);
  letter-spacing: var(--lb-cta-letter-spacing);
  text-transform: uppercase;
  font-weight: var(--lb-cta-font-weight);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.page--lookbook-oversize-stack .los-view-btn:hover { background: #333; }
.page--lookbook-oversize-stack .los-view-btn .label-short { display: none; }
.page--lookbook-oversize-stack .los-view-btn .label-long { display: inline; }

/* Pallino "+" — solo sulla prima foto, in basso a destra */
.page--lookbook-oversize-stack .los-plus-dot {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: var(--lb-plus-size);
  height: var(--lb-plus-size);
  border-radius: var(--lb-plus-radius);
  background: var(--lb-plus-bg);
  color: var(--lb-plus-color);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  font-size: var(--lb-plus-font-size);
  font-weight: 300;
  line-height: 1;
  padding: 0;
}
.page--lookbook-oversize-stack .los-plus-dot:hover {
  background: #333;
  transform: scale(1.08);
}

/* Caption (nome collezione) sotto le foto: RIENTRA nei margini standard
   (re-applico il padding orizzontale che era stato annullato dal .los) */
.page--lookbook-oversize-stack .los-caption {
  margin-top: var(--gap-inside);
  padding: 0 var(--page-pad-x);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  text-align: left;
}


/* ========== LOOK MODAL — Multi-Product Popup ==========
   Riusa la stessa modal-panel/modal-overlay esistenti.
   Stato attivato con .mode-look + visibility toggle dei container interni.
   La LARGHEZZA del popup cambia in base al numero di prodotti (classe .count-N):
   - count-1 → popup stretto (1 anteprima + padding)
   - count-2+ → popup standard (2 anteprime affiancate + padding)
   Le anteprime hanno SEMPRE la stessa larghezza fissa. */
.modal-content-look { display: none; }
.modal-content-product { display: block; }
.modal-panel.mode-look .modal-content-product { display: none; }
.modal-panel.mode-look .modal-content-look { display: block; }

/* LARGHEZZA DINAMICA DEL POPUP in modalità look
   Formula: (N_colonne × 220px) + (N_colonne-1 × gap) + 2×padding(28px)
   count-1 → 220 + 56 = 276px
   count-2+ → 220×2 + 4 + 56 = 500px */
.modal-panel.mode-look {
  width: min(500px, 100vw);    /* default count-2+ */
}
.modal-panel.mode-look.count-1 {
  width: min(276px, 100vw);
}

/* ═══════════════════════════════════════════════════════════════
   RESET MODAL — neutralizza stili ereditati dal tema host (WordPress/Cavani)
   ═══════════════════════════════════════════════════════════════
   Quando il lookbook è integrato in una pagina WordPress, gli elementi
   del modal (h2, div, a, span) ereditano regole del tema (font-family,
   color, margin-top, line-height) che rompono il design del modal.
   Questo blocco forza i valori "lookbook" indipendentemente dal tema. */

.modal-panel,
.modal-panel * {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}
/* Reset h1-h6 dentro al modal: i temi WordPress applicano spesso
   margin-top, font-family serif, color diverso. */
.modal-panel h1,
.modal-panel h2,
.modal-panel h3,
.modal-panel h4,
.modal-panel h5,
.modal-panel h6 {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
/* Reset link <a>: niente colori rosa/blu del tema host */
.modal-panel a {
  color: inherit;
  text-decoration: none;
  background: transparent;
}
/* Reset button: niente sfondi/border tema */
.modal-panel button {
  font-family: inherit;
  background: transparent;
  border: none;
}
/* .modal-head: usa font mono per il testo "PRODOTTI DEL LOOK" */
.modal-panel .modal-head,
.modal-panel .modal-head-label {
  font-family: var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* Caption tipografiche mono (SKU + price) — override sul reset generico */
.modal-panel .look-product-sku,
.modal-panel .modal-sku,
.modal-panel .look-modal-subtitle {
  font-family: var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.modal-panel .look-product-price,
.modal-panel .modal-price {
  font-family: var(--mono);
}

.look-modal-title {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 8px;
}
.look-modal-subtitle {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 28px;
}

/* Griglia anteprime: 1 colonna se count-1, 2 colonne altrimenti.
   Le colonne hanno larghezza FISSA (220px) per garantire che le anteprime
   mantengano sempre la stessa dimensione, e sia il popup a stringersi/allargarsi. */
.look-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, 220px);
  gap: var(--gap-inside);
  justify-content: start;
}
.look-modal-grid.count-1 {
  grid-template-columns: 220px;
}

.look-product {
  width: 220px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  text-align: left;
}
.look-product .look-product-ph {
  aspect-ratio: 3/4;
  background: var(--surface-alt);
  overflow: hidden;
  margin-bottom: 10px;
}
.look-product .look-product-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.look-product:hover .look-product-ph img { transform: scale(1.04); }
.look-product .look-product-sku {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.look-product .look-product-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.look-product .look-product-price {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 700px) {
  /* Regole topbar mobile rimosse — vedi commento "HEADER / TOPBAR" più in alto */
  .page { padding: 0 var(--page-pad-x); }
  .page:first-of-type { padding-top: var(--gap-between); }
  .page:last-of-type { padding-bottom: var(--gap-between); }
  .page-head { font-size: 10px; margin-bottom: 20px; padding: 0; }
  .page-photo { aspect-ratio: 3/4; }
  .page-caption { padding: 0; }
  .caption-with-thumb {
    grid-template-columns: 40px 1fr;
    gap: 10px;
  }
  .caption-with-thumb .thumb {
    width: 40px;
    height: 40px;
  }
  .caption-with-thumb .info .name { font-size: 13px; }
  .footer { padding: 60px 20px 30px; }

  /* Hero mobile */
  .hero-caption {
    left: 20px;
    right: auto;
    bottom: 60px;
    font-size: 10px;
  }
  .scroll-cue {
    left: auto;
    right: 20px;
    bottom: 60px;
    font-size: 10px;
  }
  .scroll-cue::after { height: 28px; }
  .side-marker { display: none; }
  .hero-title-overlay { bottom: 20vh; padding: 0; }
  .hero-eyebrow { font-size: 10px; margin-bottom: 12px; }
  .hero-title { font-size: 32px; margin-bottom: 12px; }
  .hero-sub { font-size: 13px; }
  .hero-discover { bottom: 5vh; }
  .hero-discover-arrow { height: 28px; }

  /* ════════════════════════════════════════════════════════════
     BOTTOM SHEET MOBILE
     Trasforma il modal-panel (popup laterale desktop) in bottom
     sheet half-screen quando è in modalità .mode-look.

     NOTA: il vecchio modal mobile "card centrata sospesa" è stato
     RIMOSSO da questa versione perché non più usato — ora il modal
     ha SEMPRE la classe .mode-look quando si apre.
     ════════════════════════════════════════════════════════════ */

  /* 1. Posizionamento e dimensioni del sheet */
  .modal-panel.mode-look {
    /* Reset posizionamento desktop */
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    /* Larghezza piena */
    width: 100vw;
    max-width: 100vw;
    /* Altezza: 60% del viewport (dvh esclude barra Safari iOS) */
    height: 60vh;
    height: 60dvh;
    max-height: 60vh;
    max-height: 60dvh;
    /* Angoli arrotondati solo in alto */
    border-radius: 16px 16px 0 0;
    /* Layout interno verticale */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Animazione: parte dal bottom dello schermo */
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.2s ease,
                visibility 0s linear 0.32s;
  }
  .modal-panel.mode-look.open {
    transform: translateY(0);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.2s ease,
                visibility 0s linear 0s;
  }

  /* 2. Drag handle decorativo in alto al sheet */
  .modal-panel.mode-look::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }

  /* 3. Header (titolo + close button) NON cresce, sta in cima */
  .modal-panel.mode-look .modal-head {
    flex-shrink: 0;
  }

  /* 4. Container contenuto: cresce a riempire lo spazio */
  .modal-panel.mode-look .modal-content-look {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* 5. Body interno: padding orizzontale 20px (lo ereditano titolo, subtitle
     e carosello), padding-top 0 (titolo si appoggia all'header senza gap),
     padding-bottom controllato da --lb-sheet-padding-bottom per non finire
     sotto la safe-area iOS / barra URL Safari / banner Privata. */
  .modal-panel.mode-look .modal-content-look .modal-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 16px var(--lb-sheet-padding-x) var(--lb-sheet-padding-bottom);
    overflow: hidden;
  }

  /* 6. Titolo e sottotitolo: ereditano il padding orizzontale dal .modal-body */
  .modal-panel.mode-look .look-modal-title {
    margin-bottom: 2px;
    font-size: 16px;
  }
  .modal-panel.mode-look .look-modal-subtitle {
    margin-bottom: 14px;
  }

  /* 7. Grid → diventa CAROSELLO orizzontale scrollabile.
     Eredita il padding orizzontale dal .modal-body (le card scrollano
     dentro al contenuto già staccato 20px dai bordi). */
  .modal-panel.mode-look .look-modal-grid {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    gap: var(--gap-inside);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
    min-height: 0;
    width: auto;
  }
  .modal-panel.mode-look .look-modal-grid::-webkit-scrollbar {
    display: none;
  }

  /* 8. Ogni card del carosello: larghezza % schermo (token --lb-sheet-card-width) */
  .modal-panel.mode-look .look-product {
    flex: 0 0 var(--lb-sheet-card-width);
    width: var(--lb-sheet-card-width);
    scroll-snap-align: start;
    min-width: 0;
  }
  /* Eccezione: 1 sola card → occupa 100% (no spazio vuoto a destra) */
  .modal-panel.mode-look.count-1 .look-product {
    flex: 0 0 100%;
    width: 100%;
  }

  /* 9. Foto della card: aspect 3/4 (verticale) */
  .modal-panel.mode-look .look-product-ph {
    width: 100%;
    aspect-ratio: 3/4;
    margin-bottom: 8px;
    flex-shrink: 0;
  }

  /* MOBILE — Layout Type 02 Hero Left
     Single con caption rientrata dal bordo */
  .page--type-02 .page-grid {
    display: block;
  }
  .page--type-02 .hero-photo { width: 100%; }
  .page--type-02 .hero-photo img { aspect-ratio: 3/4; }
  .page--type-02 .hero-caption-side {
    padding: 0;
    margin-top: 12px;
  }

  /* MOBILE — Layout Type 03 Hero Right
     Caption sotto la foto, allineata a destra, rientrata 20px dal bordo */
  .page--type-03 .page-grid {
    display: flex;
    flex-direction: column;
  }
  .page--type-03 .hero-photo {
    width: 100%;
    order: 1;
  }
  .page--type-03 .hero-photo img { aspect-ratio: 3/4; }
  .page--type-03 .hero-caption-side {
    order: 2;
    padding: 0;
    margin-top: 12px;
    text-align: right;
  }
  .page--type-03 .caption-with-thumb {
    direction: rtl;
  }
  .page--type-03 .caption-with-thumb > * { direction: ltr; }
  .page--type-03 .caption-with-thumb .info { text-align: right; }

  /* MOBILE — Layout Type 04 Diptych
     Mantengo 50/50 anche su mobile */
  .page--type-04 .page-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .page--type-04 .diptych-item .page-photo { aspect-ratio: 3/4; }
  .page--type-04 .diptych-item .caption-with-thumb {
    grid-template-columns: 32px 1fr;
    gap: 8px;
  }
  .page--type-04 .diptych-item .caption-with-thumb .thumb {
    width: 32px;
    height: 32px;
  }
  .page--type-04 .diptych-item .caption-with-thumb .info .sku { font-size: 8px; }
  .page--type-04 .diptych-item .caption-with-thumb .info .name { font-size: 11px; }
  .page--type-04 .diptych-item .caption-with-thumb .info .price { font-size: 9px; }

  /* MOBILE — Layout Type 05 Dispersed
     Prodotto principale grande sopra, prodotti 2 e 3 affiancati 60/40 in flex-end.
     Foto edge-to-edge (no padding laterale), caption con padding 20px per leggibilità. */
  .page--type-05 .page-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
  }
  .page--type-05 .dispersed-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-end;
    width: 100%;
  }
  .page--type-05 .dispersed-item {
    margin: 0;
    padding: 0;
  }
  .page--type-05 .dispersed-a {
    width: 100%;
  }
  .page--type-05 .dispersed-a .page-photo {
    aspect-ratio: 4/5;
    max-width: none;
    width: 100%;
    margin: 0;
  }
  .page--type-05 .dispersed-b {
    flex: 0 0 calc(50% - 6px);
    margin: 0;
  }
  .page--type-05 .dispersed-c {
    flex: 0 0 calc(50% - 6px);
    margin: 0;
  }
  .page--type-05 .dispersed-b .page-photo,
  .page--type-05 .dispersed-c .page-photo {
    aspect-ratio: 3/4;
    max-width: none;
    width: 100%;
    margin: 0;
  }
  .page--type-05 .dispersed-item .page-caption {
    max-width: none;
    margin: 8px 0 0;
    padding: 0;
  }
  .page--type-05 .dispersed-b .caption-with-thumb,
  .page--type-05 .dispersed-c .caption-with-thumb {
    grid-template-columns: 32px 1fr;
    gap: 8px;
  }
  .page--type-05 .dispersed-b .caption-with-thumb .thumb,
  .page--type-05 .dispersed-c .caption-with-thumb .thumb {
    width: 32px;
    height: 32px;
  }
  .page--type-05 .dispersed-b .caption-with-thumb .info .name,
  .page--type-05 .dispersed-c .caption-with-thumb .info .name {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* MOBILE — Layout Type 06 Full Bleed
     Foto edge-to-edge, overlay ridotto */
  .page--type-06 .fullbleed-photo {
    aspect-ratio: 4/5;
  }
  .page--type-06 .fullbleed-overlay {
    bottom: 16px;
    right: 16px;
    padding: 8px 12px;
  }
  .page--type-06 .overlay-row {
    grid-template-columns: 32px 1fr;
    gap: 8px;
  }
  .page--type-06 .overlay-row .thumb {
    width: 32px;
    height: 32px;
  }
  .page--type-06 .overlay-row .info .sku { font-size: 8px; }
  .page--type-06 .overlay-row .info .name { font-size: 11px; }
  .page--type-06 .overlay-row .info .price { font-size: 9px; }

  /* MOBILE — Layout Type 07 Grid 3 Columns
     Carosello orizzontale con scroll-snap: ogni slide al 70% larghezza,
     swipe orizzontale per esplorare. Pallino "+" rimane sulla foto. */
  .page--type-07 .grid3-grid,
  .page--type-07 .grid3-grid.count-3,
  .page--type-07 .grid3-grid.count-4,
  .page--type-07 .grid3-grid.count-5 {
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    gap: var(--gap-inside);
    padding: 0 0 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page--type-07 .grid3-grid::-webkit-scrollbar { display: none; }
  .page--type-07 .grid3-item {
    flex: 0 0 70%;
    scroll-snap-align: start;
  }
  .page--type-07 .grid3-photo {
    aspect-ratio: 3/4;
  }
  .page--type-07 .grid3-plus-dot {
    bottom: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  .page--type-07 .grid3-caption {
    margin-top: var(--gap-inside);
  }
  .page--type-07 .grid3-caption .sku {
    font-size: 9px;
    letter-spacing: 0.12em;
  }
  .page--type-07 .grid3-caption .name {
    font-size: 12px;
  }
  .page--type-07 .grid3-caption .price {
    font-size: 10px;
  }

  /* MOBILE — Layout Type 08 Stacked Offset
     Tre prodotti traslati orizzontalmente */
  .page--type-08 .page-grid {
    display: block;
  }
  .page--type-08 .stacked-a,
  .page--type-08 .stacked-b,
  .page--type-08 .stacked-c {
    grid-column: auto;
    grid-row: auto;
    margin-top: 0;
    margin-bottom: 24px;
  }
  .page--type-08 .stacked-a { margin-right: 32%; }
  .page--type-08 .stacked-b { margin-left: 16%; margin-right: 16%; }
  .page--type-08 .stacked-c { margin-left: 32%; }
  .page--type-08 .stacked-item .page-photo { aspect-ratio: 4/5; }
  .page--type-08 .stacked-item .caption-with-thumb {
    grid-template-columns: 36px 1fr;
  }
  .page--type-08 .stacked-item .caption-with-thumb .thumb {
    width: 36px;
    height: 36px;
  }

  /* CURATED A — Mobile: stack di anteprime con stile uniforme agli altri layout
     [thumb 40x40] [SKU + Nome + Prezzo]
     Stesso stile di .caption-with-thumb usato negli altri layout */
  .page--curated-a .curated-a-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .page--curated-a .strip {
    height: auto;
  }
  .page--curated-a .strip-products {
    flex: unset;
    gap: 0;
    padding: 0;
  }
  .page--curated-a .strip-product {
    flex: unset;
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto;
    gap: 10px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 0.5px solid var(--line);
    overflow: visible;
  }
  .page--curated-a .strip-product:last-child {
    border-bottom: none;
  }
  .page--curated-a .strip-product .ph {
    width: 40px;
    height: 40px;
    aspect-ratio: 1/1;
  }
  .page--curated-a .strip-product .info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .page--curated-a .strip-product .info .sku {
    font-family: var(--mono);
    font-size: var(--lb-fs-sku);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 2px;
    display: block;
  }
  .page--curated-a .strip-product .info .name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .page--curated-a .strip-product .info .price {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-soft);
  }

  /* CURATED B — Mobile: atmosphere photo 4/5 + grid 2 colonne */
  .page--curated-b .atmosphere-photo {
    aspect-ratio: 4/5;
    margin-bottom: var(--gap-inside);
  }
  .page--curated-b .curated-b-products {
    gap: var(--gap-inside);
    padding: 0;
  }
  /* Mobile: distribuzione equa anche in linea con poche larghezze
     - 2 prodotti → 2 colonne 50/50
     - 3 prodotti → 3 colonne 33% (foto strette ma in linea, come da richiesta utente)
     - 4 prodotti → 2x2 */
  .page--curated-b .curated-b-products.count-2 { grid-template-columns: 1fr 1fr; }
  .page--curated-b .curated-b-products.count-3 { grid-template-columns: repeat(3, 1fr); gap: var(--gap-inside); }
  .page--curated-b .curated-b-products.count-4 { grid-template-columns: 1fr 1fr; }
  .page--curated-b .curated-b-product .caption .name {
    font-size: 12px;
  }
  .page--curated-b .curated-b-products.count-3 .curated-b-product .caption .sku {
    font-size: 9px;
  }
  .page--curated-b .curated-b-products.count-3 .curated-b-product .caption .name {
    font-size: 10px;
  }
  .page--curated-b .curated-b-products.count-3 .curated-b-product .caption .price {
    font-size: 10px;
  }

  /* CURATED E — Mobile: stile simile al Curated B Atmosphere
     - Foto custom full-width sopra
     - Sotto: prodotti in linea (count-2/3/4 colonne) con foto verticale + caption + bottone Aggiungi sotto */
  .page--curated-e .curated-e-grid {
    display: flex;
    flex-direction: column;
    gap: var(--gap-inside);
  }
  .page--curated-e .lifestyle-photo {
    aspect-ratio: 4/5;
    width: 100%;
    height: auto;
  }
  /* Resetto il layout prodotti: torno a grid (non flex come desktop) */
  .page--curated-e .products-side {
    display: block;
    height: auto;
    min-height: auto;
  }
  .page--curated-e .products-grid-2x2 {
    display: grid;
    flex-direction: unset;
    flex: unset;
    gap: var(--gap-inside);
    padding: 0;
    height: auto;
    min-height: auto;
  }
  .page--curated-e .products-grid-2x2.count-2 {
    grid-template-columns: 1fr 1fr;
  }
  .page--curated-e .products-grid-2x2.count-3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap-inside);
  }
  .page--curated-e .products-grid-2x2.count-4 {
    grid-template-columns: 1fr 1fr;
  }
  /* Cella mobile: stile verticale (foto sopra, info sotto) */
  .page--curated-e .product-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border: none;
    flex: unset;
    grid-template-columns: unset;
    gap: 0;
    overflow: visible;
  }
  .page--curated-e .product-cell .photo {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    margin-bottom: 8px;
    flex: unset;
  }
  .page--curated-e .product-cell .photo img {
    object-fit: cover;
  }
  /* Info caption: SKU + Nome + Prezzo allineati a sinistra (stesso pattern degli altri Curated mobile) */
  .page--curated-e .product-cell .info .sku {
    font-size: 9px;
    letter-spacing: 0.12em;
    margin-bottom: 3px;
  }
  .page--curated-e .product-cell .info .name {
    font-size: 12px;
    margin-bottom: 2px;
  }
  .page--curated-e .product-cell .info .price {
    font-size: 10px;
  }
  /* Typography ridotta per count-3 (3 colonne strette) */
  .page--curated-e .products-grid-2x2.count-3 .product-cell .info .name {
    font-size: 11px;
  }
  .page--curated-e .products-grid-2x2.count-3 .product-cell .info .price {
    font-size: 9px;
  }

  /* CURATED F — Mobile: 2 contenitori uno SOTTO l'altro (1 colonna verticale)
     così ogni contenitore ha tutta la larghezza schermo e i 2 prodotti dentro
     non sono compressi. I 2 prodotti restano affiancati 50/50 dentro ogni blocco. */
  .page--curated-f .curated-f-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-inside);
    padding: 0;
  }
  .page--curated-f .block-photo {
    margin-bottom: var(--gap-inside);
  }
  .page--curated-f .block-products {
    gap: var(--gap-inside);
  }
  .page--curated-f .product .ph {
    margin-bottom: var(--gap-inside);
  }
  .page--curated-f .product .info .sku {
    font-size: var(--lb-fs-sku);
    margin-bottom: 3px;
  }
  .page--curated-f .product .info .name {
    font-size: 13px;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .page--curated-f .product .info .price {
    font-size: 11px;
  }


  /* SINGLE GRID DYNAMIC — Mobile: sempre 2 colonne fisse
     3 prodotti → 2+1, 4 prodotti → 2x2, 5 prodotti → 2+2+1
     Frecce sempre visibili (no hover su touch device) */
  .page--single-grid-dynamic .sgd-grid,
  .page--single-grid-dynamic .sgd-grid.count-3,
  .page--single-grid-dynamic .sgd-grid.count-4,
  .page--single-grid-dynamic .sgd-grid.count-5 {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-inside);
    padding: 0;
  }
  .page--single-grid-dynamic .sgd-photo-area {
    margin-bottom: var(--gap-inside);
  }
  .page--single-grid-dynamic .sgd-arrow,
  .page--curated-g-feature .sgd-arrow {
    width: 28px;
    height: 28px;
    font-size: 24px;
    opacity: 1; /* sempre visibili su mobile */
  }
  .page--single-grid-dynamic .sgd-arrow.prev,
  .page--curated-g-feature .sgd-arrow.prev { left: 4px; }
  .page--single-grid-dynamic .sgd-arrow.next,
  .page--curated-g-feature .sgd-arrow.next { right: 4px; }
  .page--single-grid-dynamic .sgd-caption .sku {
    font-size: 9px;
    margin-bottom: 3px;
  }
  .page--single-grid-dynamic .sgd-caption .name {
    font-size: 12px;
    margin-bottom: 2px;
  }
  .page--single-grid-dynamic .sgd-caption .price {
    font-size: 10px;
  }


  /* DIPTYCH CURATED DYNAMIC — Mobile */
  .page--diptych-curated-dynamic .dcd-diptych {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-inside);
    padding: 0;
  }
  .page--diptych-curated-dynamic .dcd-photo {
    aspect-ratio: 3/5;
    margin-bottom: var(--gap-inside);
  }
  .page--diptych-curated-dynamic .dcd-view-btn {
    top: 8px;
    right: 8px;
    padding: 6px 9px;
    font-size: 8px;
    letter-spacing: 0.1em;
  }
  /* Mobile: testo corto "N Articoli" invece di "Visualizza N Articoli" */
  .page--diptych-curated-dynamic .dcd-view-btn .label-long { display: none; }
  .page--diptych-curated-dynamic .dcd-view-btn .label-short { display: inline; }
  .page--diptych-curated-dynamic .dcd-plus-dot {
    bottom: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
  .page--diptych-curated-dynamic .dcd-collection-name {
    font-size: 9px;
    letter-spacing: 0.15em;
  }

  /* DIPTYCH CURATED STACKED — variante mobile a 1 colonna full-width
     Le 2 card vanno una sotto l'altra a tutta larghezza schermo.
     Foto più grandi (aspect 4/5 come desktop) e bottoni leggermente più presenti
     dato che hanno più spazio a disposizione. */
  .page--diptych-curated-dynamic.is-stacked .dcd-diptych {
    grid-template-columns: 1fr;
    gap: var(--gap-inside);
    padding: 0;
  }
  .page--diptych-curated-dynamic.is-stacked .dcd-photo {
    aspect-ratio: 4/5;
    margin-bottom: var(--gap-inside);
  }
  /* Card a tutta larghezza: posso usare label-long "Visualizza N Articoli" + padding più generoso */
  .page--diptych-curated-dynamic.is-stacked .dcd-view-btn {
    top: 14px;
    right: 14px;
    padding: 10px 16px;
    font-size: 10px;
    letter-spacing: 0.15em;
  }
  .page--diptych-curated-dynamic.is-stacked .dcd-view-btn .label-long { display: inline; }
  .page--diptych-curated-dynamic.is-stacked .dcd-view-btn .label-short { display: none; }
  .page--diptych-curated-dynamic.is-stacked .dcd-plus-dot {
    bottom: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
  .page--diptych-curated-dynamic.is-stacked .dcd-collection-name {
    font-size: 11px;
    letter-spacing: 0.2em;
  }


  /* TRIPTYCH MOSAIC — Mobile: hero full-width sopra + 2 satelliti affiancati 50/50 sotto */
  .page--triptych-mosaic .tm-mosaic {
    grid-template-columns: 1fr;
    gap: var(--gap-inside);
    padding: 0;
  }
  .page--triptych-mosaic .tm-hero {
    aspect-ratio: 3/4;
  }
  .page--triptych-mosaic .tm-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-inside);
  }
  .page--triptych-mosaic .tm-slide {
    aspect-ratio: 3/4;
    flex: unset;
  }
  /* Bottone "Visualizza N articoli" — più compatto, label corta */
  .page--triptych-mosaic .tm-view-btn {
    top: 10px;
    right: 10px;
    padding: 7px 11px;
    font-size: 9px;
    letter-spacing: 0.12em;
  }
  .page--triptych-mosaic .tm-view-btn .label-long { display: none; }
  .page--triptych-mosaic .tm-view-btn .label-short { display: inline; }
  /* Pallino "+" — più piccolo */
  .page--triptych-mosaic .tm-plus-dot {
    bottom: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
  .page--triptych-mosaic .tm-collection-name {
    margin-top: var(--gap-inside);
    padding: 0;
    font-size: 9px;
    letter-spacing: 0.15em;
  }


  /* TRIPTYCH CURATED DYNAMIC — Mobile:
     - 2 card affiancate sopra (50/50)
     - 3a card (.tcd-card-full) full-width sotto
     Usa grid con custom placement per posizionare la 3a card a tutta larghezza */
  .page--triptych-curated-dynamic .tcd-triptych {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-inside);
    padding: 0;
  }
  /* La 3a card occupa entrambe le colonne (full-width) */
  .page--triptych-curated-dynamic .tcd-card-full {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
  /* Foto: aspect 3/5 per le 2 card affiancate (più verticali, leggibili stretto)
     e aspect 4/5 per la 3a full-width (più editoriale) */
  .page--triptych-curated-dynamic .tcd-card .tcd-photo {
    aspect-ratio: 3/5;
    margin-bottom: 10px;
  }
  .page--triptych-curated-dynamic .tcd-card-full .tcd-photo {
    aspect-ratio: 4/5;
    margin-bottom: var(--gap-inside);
  }
  /* Bottone: compatto per le 2 card affiancate, label corta */
  .page--triptych-curated-dynamic .tcd-view-btn {
    top: 8px;
    right: 8px;
    padding: 6px 9px;
    font-size: 8px;
    letter-spacing: 0.1em;
  }
  .page--triptych-curated-dynamic .tcd-view-btn .label-long { display: none; }
  .page--triptych-curated-dynamic .tcd-view-btn .label-short { display: inline; }
  /* Bottone della 3a card full-width: più presente (label lunga + padding generoso) */
  .page--triptych-curated-dynamic .tcd-card-full .tcd-view-btn {
    top: 14px;
    right: 14px;
    padding: 10px 16px;
    font-size: 10px;
    letter-spacing: 0.15em;
  }
  .page--triptych-curated-dynamic .tcd-card-full .tcd-view-btn .label-long { display: inline; }
  .page--triptych-curated-dynamic .tcd-card-full .tcd-view-btn .label-short { display: none; }
  /* Pallino "+": piccolo per le 2 card, grande per la full */
  .page--triptych-curated-dynamic .tcd-plus-dot {
    bottom: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
  .page--triptych-curated-dynamic .tcd-card-full .tcd-plus-dot {
    bottom: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
  /* Nome collezione: ridotto per le 2 card, full size per la 3a */
  .page--triptych-curated-dynamic .tcd-collection-name {
    font-size: 9px;
    letter-spacing: 0.15em;
  }
  .page--triptych-curated-dynamic .tcd-card-full .tcd-collection-name {
    font-size: 11px;
    letter-spacing: 0.2em;
  }


  /* LOOKBOOK OVERSIZE STACK — Mobile:
     Sempre stack verticale 1 colonna full-width, qualunque sia il count.
     Le foto continuano a sforare il padding mobile (16px) per edge-to-edge totale. */
  .page--lookbook-oversize-stack .los {
    /* Su mobile la .page ha padding 0 (margin-left/right viene gestito da .page sopra),
       quindi devo usare un valore noto = il padding mobile applicato altrove.
       In genere il mobile usa 16px o 20px laterale. Uso 100vw - 100% per essere sicuri. */
    margin-left: 0;
    margin-right: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .page--lookbook-oversize-stack .los-grid,
  .page--lookbook-oversize-stack .los-grid.count-1,
  .page--lookbook-oversize-stack .los-grid.count-2,
  .page--lookbook-oversize-stack .los-grid.count-3 {
    grid-template-columns: 1fr;
    gap: var(--gap-inside);
  }
  .page--lookbook-oversize-stack .los-cell {
    aspect-ratio: 3/4;
  }
  .page--lookbook-oversize-stack .los-num {
    top: 12px;
    left: 12px;
    font-size: 9px;
    padding: 4px 9px;
  }
  /* Bottone "Visualizza N articoli" su mobile: label corta */
  .page--lookbook-oversize-stack .los-view-btn {
    top: 12px;
    right: 12px;
    padding: 8px 12px;
    font-size: 9px;
    letter-spacing: 0.12em;
  }
  .page--lookbook-oversize-stack .los-view-btn .label-long { display: none; }
  .page--lookbook-oversize-stack .los-view-btn .label-short { display: inline; }
  /* Pallino "+" più compatto su mobile */
  .page--lookbook-oversize-stack .los-plus-dot {
    bottom: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
  /* Caption: re-applico il padding mobile (per restare dentro i margini standard) */
  .page--lookbook-oversize-stack .los-caption {
    margin-top: var(--gap-inside);
    padding: 0;
    font-size: 9px;
    letter-spacing: 0.15em;
  }


  /* Caption tipografia mobile (override font-size per leggibilità su schermi piccoli) */
  .look-product .look-product-name { font-size: 12px; }
  .look-product .look-product-sku { font-size: 9px; }
  .look-product .look-product-price { font-size: 11px; }
}


/* =====================================================
   PAGE — Curated G Feature
   Layout 50/50: griglia 2x2 di 4 prodotti + foto custom decorativa.
   Flag mirror inverte sinistra/destra.
   Mobile: foto custom sopra full-width + griglia 2x2 prodotti sotto.
   ===================================================== */
.page--curated-g-feature .cgf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-inside);
  align-items: stretch;
}
/* Variante mirror: foto a sinistra invece di destra */
.page--curated-g-feature.is-mirror .cgf-products { order: 2; }
.page--curated-g-feature.is-mirror .cgf-feature-photo { order: 1; }

/* Griglia 2x2 dei 4 prodotti correlati */
.page--curated-g-feature .cgf-products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--gap-inside);
  min-height: 0;
}

/* Cella prodotto (anchor con gallery scorrevole) */
.page--curated-g-feature .cgf-cell {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  text-align: left;
  min-height: 0;
  /* min-width: 0 necessario per far funzionare text-overflow: ellipsis dentro
     a un figlio di una grid track 1fr — altrimenti la cella si "stira" per
     contenere il titolo lungo invece di rispettare la larghezza 1fr. */
  min-width: 0;
}
.page--curated-g-feature .cgf-photo-area {
  position: relative;
  aspect-ratio: 3/4;
  background: var(--surface-alt);
  overflow: hidden;
  margin-bottom: var(--gap-inside);
}
.page--curated-g-feature .cgf-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.page--curated-g-feature .cgf-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.page--curated-g-feature .cgf-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Frecce navigazione gallery: eredito stile da .sgd-arrow del Single Grid Dynamic
   (vedi regola estesa "page--single-grid-dynamic .sgd-arrow, page--curated-g-feature .sgd-arrow"). */

/* Caption sotto la foto */
.page--curated-g-feature .cgf-caption {
  text-align: left;
  /* min-width: 0 indispensabile dentro flex/grid: senza, il .name con
     white-space: nowrap "spinge" il caption a sua larghezza naturale,
     allargando l'intera griglia. */
  min-width: 0;
}
.page--curated-g-feature .cgf-caption .sku {
  font-family: var(--mono);
  font-size: var(--lb-fs-sku);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 3px;
}
.page--curated-g-feature .cgf-caption .name {
  font-size: var(--lb-fs-name);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page--curated-g-feature .cgf-caption .price {
  font-family: var(--mono);
  font-size: var(--lb-fs-price);
  color: var(--ink-soft);
}

/* Foto custom decorativa (lato opposto) */
.page--curated-g-feature .cgf-feature-photo {
  background: var(--surface-alt);
  overflow: hidden;
  position: relative;
  min-height: 0;
  width: 100%;
  height: 100%;
}
.page--curated-g-feature .cgf-feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page--curated-g-feature .cgf-feature-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.page--curated-g-feature .cgf-feature-empty .cgf-empty-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* MOBILE — Curated G Feature
   Foto custom sopra full-width, griglia 2x2 prodotti sotto.
   Mirror non ha effetto su mobile (sempre stesso ordine). */
@media (max-width: 700px) {
  .page--curated-g-feature .cgf-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-inside);
  }
  .page--curated-g-feature .cgf-products {
    order: 2;
  }
  .page--curated-g-feature .cgf-feature-photo {
    order: 1;
    aspect-ratio: 4/5;
    height: auto;
  }
  /* Anche in mirror, mobile sempre foto sopra prodotti */
  .page--curated-g-feature.is-mirror .cgf-products { order: 2; }
  .page--curated-g-feature.is-mirror .cgf-feature-photo { order: 1; }

  /* Frecce mobile: lo stile è ereditato da .page--single-grid-dynamic .sgd-arrow mobile
     tramite il selettore esteso (sempre visibili, 28px). */

  /* Caption più piccola */
  .page--curated-g-feature .cgf-caption .sku {
    font-size: 9px;
    letter-spacing: 0.12em;
  }
  .page--curated-g-feature .cgf-caption .name {
    font-size: 12px;
  }
  .page--curated-g-feature .cgf-caption .price {
    font-size: 10px;
  }
}


/* =====================================================
   VIDEO IN BLOCCHI CURATED
   I tag <video> generati da renderCuratedHeroImg() ereditano
   le stesse proprietà di posizionamento dei <img>. Aggiungo
   selettori paralleli per ogni blocco che può ricevere un video.
   ===================================================== */

/* Full Bleed */
.page--type-06 .fullbleed-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Curated B Atmosphere */
.page--curated-b .atmosphere-photo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Curated E Get The Look (lifestyle photo) */
.page--curated-e .lifestyle-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Curated F Diptych */
.page--curated-f .block-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Diptych Curated Dynamic (normale + stacked) */
.page--diptych-curated-dynamic .dcd-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Triptych Curated Dynamic */
.page--triptych-curated-dynamic .tcd-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Triptych Mosaic (hero + satelliti) */
.page--triptych-mosaic .tm-hero video,
.page--triptych-mosaic .tm-side video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lookbook Oversize Stack */
.page--lookbook-oversize-stack .los-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Curated G Feature (foto custom decorativa) */
.page--curated-g-feature .cgf-feature-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}