/* =============================================================
   BB Landing Pages — Categoria + Classics
   ============================================================= */

/* ── Full-width page override ────────────────────────────── */
.bb-full-width-page .shoptimizer-archive,
.bb-full-width-page .col-full {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.bb-full-width-page .archive-header {
  display: none !important;
}

/* ── Reset layout ────────────────────────────────────────── */
.bb-landing {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.bb-landing .entry-content,
.bb-landing .site-content,
.bb-landing #content {
  padding: 0;
  margin: 0;
  max-width: 100%;
}

/* Override Shoptimizer gutter — must beat 99-overrides.css specificity */
body:has(main.bb-landing) #content.site-content {
  padding-inline: 0 !important;
  padding-top: 0 !important;
}
body:has(main.bb-landing) #content.site-content > *,
body:has(main.bb-landing) #primary,
body:has(main.bb-landing) .site-main,
body:has(main.bb-landing) article,
body:has(main.bb-landing) .entry-content {
  max-width: none !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* ── HEADER TRASPARENTE SOPRA LA HERO ─────────────────────────
   [NEW-39] Fabio 18/09: come l'XD "PAGINE CATEGORIE HEADER", menu, logo e
   icone bianchi direttamente sulla foto; appena si scorre, fascia bianca al
   71% con testi scuri (artboard "SCROLL HEADER" dell'XD Home). SOLO su queste
   pagine (questo foglio non si carica altrove): la Home resta bianca.
   Solo da 768px in su: nell'XD mobile l'header resta bianco sopra la hero.
   Tutto vale solo con `bb-header-js` sul body, messo da landing-header.js:
   senza JS l'header resta quello di sempre. */
@media (min-width: 768px) {
  body.bb-header-overlay.bb-header-js header#masthead.site-header {
    background: transparent;
    border-bottom-color: transparent;
    transition: background-color 0.35s ease;
  }
  body.bb-header-overlay.bb-header-js header#masthead.site-header.bb-header--scrolled {
    background: rgba(255, 255, 255, 0.71);
  }

  /* La hero sale sotto l'header: e' sticky e occupa spazio nel flusso. */
  body.bb-header-overlay.bb-header-js .bb-landing {
    margin-top: calc(-1 * var(--bb-header-h, 58px));
  }

  /* Stato "sulla foto": bianco. !important e #masthead perche' le icone hanno
     `color: var(--bb-fg) !important` in header.css. */
  body.bb-header-overlay.bb-header-js header#masthead:not(.bb-header--scrolled) .bb-header-nav__link,
  body.bb-header-overlay.bb-header-js header#masthead:not(.bb-header--scrolled) .bb-header__icon,
  body.bb-header-overlay.bb-header-js header#masthead:not(.bb-header--scrolled) .bb-ge-text {
    color: #fff !important;
  }
  body.bb-header-overlay.bb-header-js header#masthead:not(.bb-header--scrolled) .site-branding img {
    filter: brightness(0) invert(1); /* il logo e' un PNG nero su trasparente */
  }
  body.bb-header-overlay.bb-header-js header#masthead:not(.bb-header--scrolled) .bb-header__cart-count {
    background: #fff;
    color: var(--bb-black);
  }

  /* Leggibilita' del bianco anche sulle hero chiare (Classics, Scarpe): un velo
     scuro solo nella fascia dell'header, in cima alla prima hero.

     [NEW-177, 26/09] Il velo c'era gia' e arriva su tutte e quattro le landing
     (verificato: il selettore colpisce ovunque). Non bastava dove la foto e'
     molto chiara — su /classics/ "ACCESSORI" cade sui capelli biondi. Alzato
     da 0.30 a 0.38, ma SOLO di quel poco, perche' il velo agisce sulla FOTO:
     portarlo al valore che da solo avrebbe risolto il caso peggiore avrebbe
     appesantito anche le hero gia' scure, che e' esattamente cio' che Fabio
     non voleva. Il resto del lavoro lo fa l'ombra qui sotto. */
  body.bb-header-overlay.bb-header-js .bb-landing > .bb-landing__hero:first-child .bb-landing__hero-overlay {
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.38) 0, rgba(0,0,0,0) 165px),
      radial-gradient(ellipse 62% 42% at 50% 46%, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 72%),
      linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.06) 30%, rgba(0,0,0,0.30) 68%, rgba(0,0,0,0.58) 100%);
  }

  /* [NEW-177] L'ombra: la meta' della soluzione che NON tocca la fotografia.
     Un'ombra scura sotto una scritta bianca e' invisibile su fondo scuro (nero
     su nero) e stacca su fondo chiaro — cioe' agisce da sola solo dove serve.
     E' per questo che sta insieme al velo invece che al posto suo: cosi'
     entrambi restano leggeri. Verificato guardando /accessori/ (hero quasi
     nera) prima e dopo: indistinguibili.

     Tenuta volutamente bassa (0.40, 2px): a questa misura non si legge come
     "ombra" — non e' un effetto, e' il minimo che serve a dare un bordo alle
     lettere sopra una foto. Piu' forte diventerebbe un alone, fuori posto su
     una testata di questo marchio.

     Solo nello stato "sulla foto": quando si scorre la fascia diventa bianca
     coi testi scuri, e li' un'ombra sarebbe solo sporcizia.
     Il logo e' un'immagine, quindi non prende text-shadow: gli si aggiunge un
     drop-shadow in coda al filtro che lo rende bianco. */
  body.bb-header-overlay.bb-header-js header#masthead:not(.bb-header--scrolled) .bb-header-nav__link,
  body.bb-header-overlay.bb-header-js header#masthead:not(.bb-header--scrolled) .bb-header__icon,
  body.bb-header-overlay.bb-header-js header#masthead:not(.bb-header--scrolled) .bb-ge-text {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
  }
  body.bb-header-overlay.bb-header-js header#masthead:not(.bb-header--scrolled) .site-branding img {
    filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.40));
  }
}

/* ── HERO ──────────────────────────────────────────────────── */
.bb-landing__hero {
  position: relative;
  width: 100%;
  aspect-ratio: 5089 / 2363;
  max-height: 90vh;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(48px, 7vw, 88px);
}

.bb-landing__hero-bg {
  position: absolute;
  inset: 0;
  background-color: var(--bb-black);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform 8s ease;
  will-change: transform;
}

/* GLB-09: no zoom foto — scale governato dalla utility condivisa --bb-img-hover-scale (default 1) */
.bb-landing__hero:hover .bb-landing__hero-bg {
  transform: scale(var(--bb-img-hover-scale));
}

/* Gradient overlay — much better than flat black for drama + readability */
.bb-landing__hero-overlay {
  position: absolute;
  inset: 0;
  /* B1 (2026-08-25): velo radiale soffuso dietro il titolo centrato → leggibile
     anche su hero chiare (es. Scarpe argento), senza incupire tutta l'immagine.
     Sopra il gradiente verticale esistente (piu scuro in basso per la CTA). */
  background:
    radial-gradient(ellipse 62% 42% at 50% 46%, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 72%),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.06) 30%,
      rgba(0, 0, 0, 0.30) 68%,
      rgba(0, 0, 0, 0.58) 100%
    );
  pointer-events: none;
}

/* ── Hero entrance animations ────────────────────────────── */
@keyframes bb-hero-reveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Hero title wrap ─────────────────────────────────────── */
.bb-landing__hero-title-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  /* CAT-02 (2026-08-25): titolo CENTRATO verticalmente (era spinto in alto da un
     padding-bottom). Il CTA ha gia il suo spazio in basso (hero align-items:flex-end). */
  padding-bottom: 0;
}

.bb-landing__hero-title {
  color: #fff !important;
  /* [NEW-197] la misura NON sta piu' qui: vedi il blocco "LA MISURA DELLA
     HERO" piu' sotto. Era clamp(26px, 4.5vw, 68px), cioe' 64,8px su 1440. */
  font-weight: 300;
  letter-spacing: var(--bb-ls-heading); /* [NEW-54] tracking unico dei titoli (era 0.22em) */
  text-transform: uppercase;
  margin: 0;
  text-align: center;
  line-height: 1.1;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.22);
  animation: bb-hero-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.08s;
}

.bb-landing__hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  animation: bb-hero-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.26s;
}

/* ── Hero CTA ────────────────────────────────────────────── */
.bb-landing__hero-cta,
.bb-landing__hero-cta:visited,
.bb-landing__hero-cta:hover,
.bb-landing__hero-cta:focus {
  color: #fff !important;
}

.bb-landing__hero-cta {
  display: inline-block;
  /* [NEW-197] misura e spaziatura NON stanno piu' qui: vedi "LA MISURA
     DELLA HERO". Erano var(--bb-h3) (16px sul desktop) e var(--bb-ls-wide)
     (0.08em, meta' della home). */
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none !important;
  padding-bottom: 5px;
  position: relative;
  transition: opacity var(--bb-transition-fast);
}

/* ═══ [NEW-197] LA MISURA DELLA HERO, FISSATA QUI E SOLO QUI ═══════════
   Fabio 29/09: titolo e invito delle landing alla stessa misura della home
   ("MORE THAN BAGS" e "ESPLORA LE COLLEZIONI").

   Due scelte fatte apposta perche' la misura non si sposti piu' da sola:

   1. DUE CLASSI (0,2,0), non una. Una regola a classe sola (0,1,0) perde da
      qualunque `.qualcosa h1` (0,1,1) — e' esattamente come il kit Elementor
      ha scavalcato mezzo tema in NEW-194 — e la base dei titoli di GLB-03
      fa 0,0,2. A 0,2,0 questa passa davanti a tutte e tre senza !important.
      Le due classi sono la struttura vera dei template (wrap > titolo,
      inner > invito), non un raddoppio artificiale.

   2. IL TITOLO PRENDE LO STESSO TOKEN DELLA HOME, non una copia del suo
      valore: se un giorno la home cambia misura, le landing la seguono
      invece di restare indietro in silenzio. NB: si usa `--bb-h1-hero`
      (:root, 00-tokens.css) e NON `--bb-home-title`, che vive dentro
      `.bb-home-wrapper` e qui non esisterebbe.
      L'invito invece ha i 13px scritti, come li ha la home
      (`a.bb-home-hero__cta`): li' non c'e' nessun token da condividere, e
      agganciarlo a `--bb-h3` era il motivo per cui cresceva a 16px sul
      desktop mentre la home restava a 13.

   Vale anche per /classics/, che usa la stessa hero.
   Per cambiare queste misure si viene qui: e' voluto. */
.bb-landing__hero-title-wrap .bb-landing__hero-title {
  font-size: var(--bb-h1-hero);
}

.bb-landing__hero-inner .bb-landing__hero-cta {
  font-size: 13px;
  /* Fabio 29/09: anche la spaziatura come la home, se no a parita' di 13px
     l'invito delle landing sembrava piu' stretto (era 0.08em, la meta').
     I valori sono due perche' due ne ha la home (a.bb-home-hero__cta):
     0.16em, e 0.14em sotto i 767px. Scritti, non presi da un token: qui
     stiamo copiando la home, non applicando la scala. */
  letter-spacing: 0.16em;
}

@media (max-width: 767px) {
  .bb-landing__hero-inner .bb-landing__hero-cta {
    letter-spacing: 0.14em;
  }
}

.bb-landing__hero-cta::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
  transition: background-color 0.35s ease;
}

.bb-landing__hero-cta:hover::after {
  background: rgba(255, 255, 255, 1);
}

.bb-landing__hero-cta:hover {
  opacity: 0.88;
}

/* [NEW-51] CTA della hero come in home: fissa a 40px dal fondo della
   finestra (28px sul telefono), poi cavalca il fondo della hero
   (landing-header.js, stessa logica di home.js). Vale solo con il JS attivo.
   - Il contenitore perde la sua animazione d'ingresso: un transform, anche
     finito, trasforma il contenitore nel riferimento del position:fixed e la
     CTA non sarebbe piu' fissa alla finestra.
   - La comparsa (dissolvenza + salita di 14px) passa alla CTA stessa, con la
     proprieta' `translate`: si somma al `transform` che scrive il JS invece
     di sovrascriverlo. */
body.bb-hero-cta-js .bb-landing__hero:not(.bb-landing__hero--2) .bb-landing__hero-inner {
  animation: none;
}
body.bb-hero-cta-js .bb-landing__hero-cta {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translate(-50%, 0);
  z-index: 6;
  white-space: nowrap;
  will-change: transform;
  animation: bb-hero-cta-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both;
}
@keyframes bb-hero-cta-reveal {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}
@media (max-width: 767px) {
  body.bb-hero-cta-js .bb-landing__hero-cta {
    bottom: 28px;
  }
}

/* ── MANIFESTO / INTRO ────────────────────────────────────── */
.bb-landing__manifesto {
  padding: var(--bb-section-padding) var(--bb-gutter);
  display: flex;
  justify-content: center;
  border-top: var(--bb-line-width) solid var(--bb-line);

  /* NEW-15: il vuoto fra la fine del manifesto e la CTA sotto era 137px su
     desktop (80 di questo padding + 57.6 del blocco CTA) contro 72 su mobile.
     Fabio (11/09) lo vuole intorno ai 70. Qui si abbassa SOLO il padding di
     sotto, a 40px fissi: sul desktop dimezza, su mobile e' gia' 40 e quindi
     non cambia niente. Non si tocca `--bb-section-padding`, che governa lo
     spazio di TUTTE le sezioni del sito.
     Il padding di sopra resta pieno di proposito: cosi' il testo ha 80px dal
     bordo superiore e 72 (40 + i 32 della CTA) verso il basso, che a occhio
     si equivalgono. */
  padding-bottom: 40px;
}

/* CAT-08 nasceva solo per Borse («togliere il separatore dopo il primo
   paragrafo»), ma la stessa riga era annotata anche sulla slide 27 (Scarpe) e
   li' era rimasta DA FARE: era la stessa richiesta sulla pagina sbagliata.
   Fabio 11/09: vale per Scarpe, Accessori e Classics. Siccome le varianti sono
   esattamente quattro, togliere il border-bottom QUI alla fonte equivale a
   elencarle tutte, e non lascia in giro un default che nessuna pagina usa.
   Il separatore SOPRA il manifesto resta. */

.bb-landing__manifesto p {
  max-width: 640px;
  font-family: var(--bb-font-editorial); /* GLB-15: paragrafo editoriale = Playfair Display */
  font-weight: 400;
  font-size: var(--bb-text-editorial); /* GLB-15: narrativo leggermente piu piccolo (Fabio 2026-08-25) */
  line-height: 1.8;
  color: var(--bb-fg);
  text-align: center;
  margin: 0;
  letter-spacing: 0;
}

/* ── CATEGORIE GRID 2×2 / 4×1 (Borse) ───────────────────── */
.bb-landing__categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  padding-bottom: clamp(8px, 1.5vw, 16px);
}

.bb-landing__cat-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  /* [NEW-127] il nome non sta piu' dentro la foto: col mouse ci torna sopra
     ancorandosi qui */
  position: relative;
  background-color: #fff; /* CAT-09: box sottocategorie bianchi (era var(--bb-light-gray)) */
  overflow: hidden;
}

.bb-landing__cat-tile-img {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.bb-landing__cat-tile:hover .bb-landing__cat-tile-img {
  transform: scale(var(--bb-img-hover-scale)); /* GLB-09: utility condivisa --bb-img-hover-scale */
}

/* [NEW-88/NEW-90/NEW-91] Il gesto dei box: il NOME del box compare sulla
   foto su un velo leggero, con il trattino corto. Stessa meccanica dello
   strip prodotti della home: col mouse al passaggio (e li' l'etichetta sotto
   si toglie, se no il nome si legge due volte); sul telefono, dove il
   passaggio non esiste, sulla scheda che si ha davanti mentre si scorre
   (classe is-active, messa da landing-header.js come home.js). */
.bb-landing__cat-tile-img {
  position: relative;
}
/* [NEW-109/121] Velo e nome stanno sulla foto. Su un telefono ci restano
   sempre (li' non esiste il passaggio del mouse e il nome sotto non c'e'
   piu'); col mouse invece la foto e' pulita a riposo e velo e nome compaiono
   solo al passaggio — Fabio, 23/09: l'immagine prima di tutto, il nome
   quando lo cerchi. Lo spegnimento sta nel blocco `hover` piu' sotto. */
.bb-landing__cat-tile-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
/* [NEW-127] BASE (telefono e ogni schermo senza mouse): "no velo - nome
   sotto", come home e ricerca. Col mouse il nome torna sulla foto e compare
   solo al passaggio (blocco piu' sotto). */
.bb-landing__cat-tile-cta {
  position: relative; /* si porta dietro il suo trattino (NEW-103) */
  padding: 13px 6px 5px;
  font-family: 'Jost', sans-serif;
  /* [NEW-99] era --bb-small (12px, la misura delle note): troppo piccolo
     accanto ai nomi sui box della home. Ora la scala condivisa. */
  font-size: var(--bb-overlay-name-sm);
  font-weight: 400;
  letter-spacing: var(--bb-ls-wide);
  text-transform: uppercase;
  color: var(--bb-fg, #111);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}
/* [NEW-103 → NEW-416] Il trattino della piastrella segue la regola di sito
   (NEW-47, in 99-overrides.css): a riposo non c'e', al passaggio del mouse
   cresce da zero; dove il mouse NON c'e' sta fermo a 22px, se no non lo
   vedrebbe nessuno.
   ⚠ Prima il cancello era `(hover: hover) and (min-width: 768px)`, cioe' una
   condizione DIVERSA da quella con cui il sito prende la stessa decisione.
   Misurato su /borse/: a 1440 col mouse cresceva e sul telefono stava fermo
   (giusti entrambi), ma in una finestra desktop STRETTA restava FERMO col
   mouse attaccato, mentre tutte le altre CTA della stessa pagina crescevano.
   Il motivo vero della regola non e' «schermo piccolo» ma «qui il mouse non
   c'e'»: adesso il cancello e' quello, identico al resto del sito. */
.bb-landing__cat-tile-cta::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .bb-landing__cat-tile:hover .bb-landing__cat-tile-cta::after,
  .bb-landing__cat-tile:focus-visible .bb-landing__cat-tile-cta::after {
    width: 22px;
  }
}
@media (hover: none) and (pointer: coarse) {
  .bb-landing__cat-tile-cta::after {
    width: 22px;
  }
}

/* [NEW-121] Col mouse: a riposo la foto e' pulita, al passaggio compaiono
   insieme velo e nome. [NEW-103] il trattino cresce con loro. */
@media (hover: hover) and (min-width: 768px) {
  .bb-landing__cat-tile-cta {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    padding: 0 0 5px;
    color: #fff;
  }
  .bb-landing__cat-tile-img::after,
  .bb-landing__cat-tile-cta {
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .bb-landing__cat-tile:hover .bb-landing__cat-tile-img::after,
  .bb-landing__cat-tile:focus-visible .bb-landing__cat-tile-img::after,
  .bb-landing__cat-tile:hover .bb-landing__cat-tile-cta,
  .bb-landing__cat-tile:focus-visible .bb-landing__cat-tile-cta {
    opacity: 1;
  }
  /* [NEW-416] Qui c'erano le stesse quattro righe del trattino, identiche a
     quelle di sopra e sotto la stessa condizione: non facevano niente. Il
     trattino lo governa il blocco NEW-103/416 qui sopra. */
}

@media (min-width: 768px) {
  .bb-landing__hero--2 {
    aspect-ratio: 5089 / 2363;
    min-height: 480px;
    max-height: 90vh;
  }
}

@media (max-width: 767px) {
  /* [NEW-95] Sul telefono la foto grande in fondo ha la stessa misura della
     hero (a tutto schermo da NEW-53), non piu' un 4:5 piu' basso. */
  .bb-landing__hero--2 {
    aspect-ratio: auto;
    height: 100svh;
    min-height: 500px;
    max-height: none;
  }
}

/* [NEW-95] Piu' bianco SOPRA la foto grande che chiude la pagina: la seconda
   hero su Borse, le sezioni immagine su Scarpe e Accessori. */
.bb-landing__hero--2,
.bb-landing__section-images {
  margin-top: clamp(40px, 5vw, 72px);
}

/* ── STYLES HEADING sopra 5 immagini ─────────────────────── */
/* CAT-10: "ESPLORA PER STILE" reso UGUALE a "ESPLORA LE COLLEZIONI" (cta-link):
   stesso corpo piccolo (13px), stesso tracking (--bb-ls-wide), non piu titolo 28px. */
/* Due classi, non una: la regola base `.bb-landing__styles-title` (piu' sotto
   nel file, stessa specificita') rimetteva `margin: 0 0 ...` e annullava gli
   `auto` laterali, quindi il titolo — largo fit-content — restava attaccato a
   sinistra (misurato: da x0 a x129 su 1440 e su 390). Con due classi la
   variante vince a prescindere dall'ordine nel file. */
.bb-landing__styles-title.bb-landing__styles-title--grid {
  display: block;
  width: fit-content;
  /* [NEW-94] Fabio: stessa aria sopra e sotto, blocco in mezzo al bianco
     (prima sotto ce n'era meno della meta'). */
  margin: clamp(40px, 5vw, 72px) auto;
  padding: 0 0 5px;
  border-bottom: 1px solid var(--bb-black); /* B2: sottolineatura come "Esplora le collezioni" */
  text-align: center;
  font-size: 13px !important;
  font-weight: 400;
  letter-spacing: var(--bb-ls-wide) !important;
  text-transform: uppercase;
  color: var(--bb-black);
}

/* ── 5 IMMAGINI STILI BORSE ───────────────────────────────── */
.bb-landing__styles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding-bottom: clamp(32px, 4vw, 64px);
}

/* ── CATEGORIE 3 COLONNE (Scarpe / Accessori) ─────────────── */
.bb-landing__categories--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* ── STILI / SOTTOCATEGORIE (Borse) ──────────────────────── */
.bb-landing__styles {
  padding: clamp(32px, 4vw, 64px) var(--bb-gutter);
  text-align: center;
}

.bb-landing__styles-title {
  font-size: var(--bb-h3);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 clamp(20px, 3vw, 40px);
}

.bb-landing__styles-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 40px;
}

.bb-landing__styles-list li a {
  font-size: var(--bb-body);
  letter-spacing: var(--bb-ls-normal);
  text-transform: capitalize;
  color: var(--bb-fg);
  text-decoration: none;
  padding-bottom: 3px;
  position: relative;
  transition: opacity var(--bb-transition-fast);
}

/* Underline draws from left on hover */
.bb-landing__styles-list li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--bb-fg);
  transition: width 0.32s ease;
}

.bb-landing__styles-list li a:hover { opacity: 0.7; }
.bb-landing__styles-list li a:hover::after { width: 100%; }

/* ── CTA COLLEZIONI / VIEW ALL ────────────────────────────── */
.bb-landing__collections-cta {
  display: flex;
  justify-content: center;
  padding: clamp(32px, 4vw, 64px) var(--bb-gutter);

  /* NEW-15, seconda meta': su desktop il clamp dava 57.6px, su mobile 32.
     Portandolo a 32 fissi il vuoto verso il manifesto diventa 72px a
     entrambe le larghezze — mobile identico a prima, desktop dimezzato.
     Lo spazio SOTTO la CTA resta quello del clamp: qui serve separare dal
     blocco successivo, non stringere. */
  padding-top: 32px;
}

/* [NEW-93] Il testo che introduce i box: stesso trattamento di
   "ESPLORA PER STILE" (stesso corpo, stesso tracking, nessuna
   sottolineatura), perche' ora e' una didascalia, non una CTA. */
.bb-landing__collections-title {
  margin: 0;
  padding: 0;
  font-family: 'Jost', sans-serif;
  font-size: 13px !important;
  font-weight: 400;
  letter-spacing: var(--bb-ls-wide) !important;
  text-transform: uppercase;
  text-align: center;
  color: var(--bb-black);
}

/* [NEW-416] Qui c'era `.bb-landing__cta-link`, tolta: censita il 15/10/2026
   come ORFANA — 0 riferimenti nel PHP, 0 nel JS, 0 elementi nel DOM su 21
   pagine servite (15 pagine + 6 schede prodotto). Era anche una delle ultime
   a portare il meccanismo vecchio del trattino (sottolineatura piena che si
   contrae al passaggio), l'opposto della regola di sito NEW-47. */

/* [NEW-416] Qui c'era la fila delle 3 categorie (`.bb-landing__cat-row` e
   `.bb-landing__cat-row-item`), tolta: censita il 15/10/2026 come ORFANA —
   0 riferimenti nel PHP, 0 nel JS, 0 elementi nel DOM su 21 pagine servite.
   Le categorie di Scarpe e Accessori oggi si servono con altri blocchi. */

/* ── 2 GRANDI IMMAGINI SEZIONE (Scarpe / Accessori) ─────── */
.bb-landing__section-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  padding-bottom: clamp(32px, 4vw, 64px);
}

.bb-landing__section-img-item {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--bb-light-gray);
}

.bb-landing__section-img-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.bb-landing__section-img-item:hover .bb-landing__section-img-bg {
  transform: scale(var(--bb-img-hover-scale)); /* GLB-09: utility condivisa --bb-img-hover-scale */
}

.bb-landing__section-img-bg--mirror {
  transform: scaleX(-1);
}

.bb-landing__section-img-item:hover .bb-landing__section-img-bg--mirror {
  transform: scaleX(-1) scale(var(--bb-img-hover-scale)); /* GLB-09: mirror + utility zoom */
}

/* Gradient scrim — makes label legible on any image */
.bb-landing__section-img-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 42%,
    rgba(0, 0, 0, 0.5) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.bb-landing__section-img-label {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;
  font-size: var(--bb-h3);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  transition: border-color 0.3s ease;
}

.bb-landing__section-img-item:hover .bb-landing__section-img-label {
  border-color: rgba(255, 255, 255, 0.95);
}

/* CAT-11: su Accessori togliere i testi dai box immagine in basso (section-images). */
.bb-landing--accessori .bb-landing__section-img-label {
  display: none;
}

/* ── CLASSICS — modelli ───────────────────────────────────────
   [CAT-01] XD "CLASSICS – 2" (18/09): non piu' una griglia a due colonne ma
   una colonna centrata larga il 61% (1557 su 2560), un modello per riga, foto
   e testo alternati. Proporzioni dall'XD: foto 636 x 782, spazio 142, testo
   779; righe distanti 214 (tra la fine di una foto e l'inizio della prossima).
   Su mobile (sotto) foto a tutta larghezza e testo sotto. */
.bb-landing__models {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 8.4vw, 120px);
  width: min(61%, 1100px);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 120px);
}

.bb-landing__model-card {
  display: grid;
  grid-template-columns: 636fr 142fr 779fr;
  grid-template-areas: "img . body";
  align-items: center;
}

.bb-landing__model-card:nth-child(even) {
  grid-template-columns: 779fr 142fr 636fr;
  grid-template-areas: "body . img";
}

.bb-landing__model-card-img-wrap {
  grid-area: img;
  display: block;
  overflow: hidden;
  aspect-ratio: 636 / 782;
  background-color: var(--bb-light-gray);
}

.bb-landing__model-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.bb-landing__model-card-img-wrap:hover .bb-landing__model-card-img {
  transform: scale(var(--bb-img-hover-scale)); /* GLB-09: utility condivisa --bb-img-hover-scale */
}

.bb-landing__model-card-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 36px);
}

/* Nome a sinistra e citazione a destra, sulla stessa riga (XD) */
.bb-landing__model-card-head {
  display: flex;
  flex-wrap: wrap; /* nome lungo (Giulietta degli Spiriti): la citazione va a capo intera invece di stringersi in una colonnina */
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
}

.bb-landing__model-card-head .bb-landing__model-card-quote {
  flex: 1 1 220px;
}

.bb-landing__model-card-quote {
  font-family: var(--bb-font-editorial); /* GLB-15: citazione narrativa = Playfair (italico) */
  font-size: var(--bb-small);
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  border: none;
  font-style: italic;
  color: var(--bb-black);
  letter-spacing: 0.02em;
  text-align: right;
}

.bb-landing__model-card-name {
  font-size: var(--bb-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  color: var(--bb-black);
  flex-shrink: 0;
}

/* Testo intero: l'XD lo mostra tutto (prima era troncato a 3 righe) */
.bb-landing__model-card-desc {
  font-family: var(--bb-font-editorial); /* GLB-15: descrizione narrativa modello = Playfair */
  font-size: var(--bb-text-editorial);
  line-height: 1.8;
  color: var(--bb-fg);
  margin: 0;
}

.bb-landing__model-card-cta {
  display: inline-block;
  font-size: var(--bb-small);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-black);
  text-decoration: none;
  padding-bottom: 4px;
  align-self: flex-end; /* XD: il link sta dal lato esterno della riga… */
  position: relative;
  transition: opacity var(--bb-transition-fast);
}

.bb-landing__model-card:nth-child(even) .bb-landing__model-card-cta {
  align-self: flex-start; /* …a destra quando il testo e' a destra, a sinistra quando e' a sinistra */
}

/* [NEW-416] Il trattino di questa CTA lo governa la regola di sito (NEW-47,
   in 99-overrides.css), dov'e' in tutte e quattro le liste. Qui c'era una
   copia col meccanismo vecchio (`transform: scaleX`, sottolineatura piena che
   si contrae) che la regola di sito sovrascriveva proprieta' per proprieta' —
   la lista dell'hover ridichiara `translateX(-50%)` proprio per difendersi da
   quello `scaleX(0.28)`, che se no avrebbe schiacciato il trattino al 28% e
   scentrato. Misurato su /classics/ prima di togliere: a riposo 0px, col mouse
   24 larghezze distinte da 0 a 22px, transform solo translateX. Era codice
   morto, e teneva in vita un meccanismo che il sito non usa piu'. */
.bb-landing__model-card-cta:hover { opacity: 0.7; }

/* NB GLB-11 (opzione C): la soppressione per-componente della underline è stata
   RIMOSSA — ora è gestita globalmente in 01-base.css (default a:hover senza
   underline, riaccesa solo in prosa). Qui non serve più nulla. */

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 767px) {

  /* [NEW-128] Nel modo "no velo - nome sotto" il nome finiva appiccicato al
     box della riga dopo: ci vuole aria sotto. 28px, lo stesso numero della
     home (home.css) — se cambia di la', cambia anche qui. */
  .bb-landing__cat-tile {
    padding-bottom: 28px;
  }
  /* [NEW-135] CAROSELLO: qui non c'e' il nome sotto la foto, perche' non
     c'e' nessun nome fermo da leggere — si scorre. Il nome compare SULLA
     scheda che si sta guardando, col velo, e le altre restano pulite.
     La classe la mette assets/js/carosello-focus.js. */
  .bb-landing__cat-tile-cta {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 90%;
    padding: 0 0 5px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .bb-landing__cat-tile.is-active .bb-landing__cat-tile-img::after,
  .bb-landing__cat-tile.is-active .bb-landing__cat-tile-cta {
    opacity: 1;
  }

  /* Hero */
  .bb-landing__hero {
    aspect-ratio: 4 / 5;
    padding-bottom: clamp(36px, 6vw, 52px);
  }

  .bb-landing__hero-title {
    letter-spacing: var(--bb-ls-heading) !important; /* [NEW-54] */
  }

  .bb-landing__hero-title-wrap {
    padding-bottom: clamp(52px, 10vw, 72px);
  }

  /* Manifesto: remove side borders on narrow screens */
  .bb-landing__manifesto {
    border-left: none;
    border-right: none;
  }

  .bb-landing__manifesto p {
    font-size: 14px;
    line-height: 1.8;
  }

  /* [MOB-11..14] Hero con foto propria per il mobile (vedi landing-data.php,
     `hero_image_url_mobile`). !important perche' la foto desktop arriva come
     style inline, che altrimenti vincerebbe su qualunque regola. */
  .bb-landing__hero-bg--has-mobile {
    background-image: var(--bb-bg-mobile) !important;
  }

  /* [MOB-13 + NEW-53] Scarpe: prima la foto desktop ingrandita al 265%; con
     la hero a tutto schermo non bastava piu' in altezza. Ora ha il suo
     taglio verticale (cat-scarpe-hero-mobile.webp), a copertura normale. */

  /* [NEW-53] «Hero mobile di tutte le pagine categoria con maggiore
     ingombro»: la prima hero (Borse, Scarpe, Accessori, Classics) occupa
     tutto lo schermo, come la hero della home (100svh, min 500px). Era 4:5,
     cioe' 480px su un telefono da 390. Cosi' si vede anche la fase "ferma in
     fondo alla finestra" della CTA (NEW-51), identica alla home. Le foto
     mobile sono esportate per questa misura (XD/_export_categorie_header.sh).
     La seconda hero di Borse resta 4:5. */
  .bb-landing > .bb-landing__hero:not(.bb-landing__hero--2) {
    aspect-ratio: auto;
    height: 100svh;
    min-height: 500px;
    max-height: none;
  }
  /* Classics: nella foto il viso sta a sinistra e la borsa a destra; su uno
     schermo stretto si tiene il viso e l'inizio della borsa. */
  .bb-landing--classics .bb-landing__hero-bg--has-mobile {
    background-position: 41% 50%;
  }

  /* [MOB-12/13/14] Ordine delle sezioni come nell'XD mobile: hero, "ESPLORA
     LE COLLEZIONI", categorie a scorrimento, poi il testo e il resto. Nel
     markup (e su desktop) il testo viene prima della CTA: qui si riordina solo
     la resa, senza duplicare niente. Classics non e' toccata (ha un'altra
     struttura). */
  .bb-landing--borse,
  .bb-landing--scarpe,
  .bb-landing--accessori {
    display: flex;
    flex-direction: column;
  }
  .bb-landing--borse > *,
  .bb-landing--scarpe > *,
  .bb-landing--accessori > * { order: 10; }
  .bb-landing--borse > .bb-landing__hero:not(.bb-landing__hero--2),
  .bb-landing--scarpe > .bb-landing__hero,
  .bb-landing--accessori > .bb-landing__hero      { order: 1; }
  /* [NEW-89] Fabio 21/09: sul telefono il testo di apertura sta SUBITO sotto
     la hero, poi la CTA, poi i caroselli; la foto grande scende in fondo.
     Stesso ritmo sulle tre landing: dove una sezione non esiste (Scarpe e
     Accessori non hanno "Esplora per stile" ne' seconda hero) l'ordine
     semplicemente salta quel numero. */
  .bb-landing--borse > .bb-landing__manifesto,
  .bb-landing--scarpe > .bb-landing__manifesto,
  .bb-landing--accessori > .bb-landing__manifesto  { order: 2; }
  .bb-landing--borse > .bb-landing__collections-cta,
  .bb-landing--scarpe > .bb-landing__collections-cta,
  .bb-landing--accessori > .bb-landing__collections-cta { order: 3; }
  .bb-landing--borse > .bb-landing__categories,
  .bb-landing--scarpe > .bb-landing__categories,
  .bb-landing--accessori > .bb-landing__categories { order: 4; }
  .bb-landing--borse > .bb-landing__styles-title   { order: 5; }
  .bb-landing--borse > .bb-landing__styles-grid    { order: 6; }
  /* La foto grande chiude la pagina: seconda hero su Borse, sezioni
     immagine su Scarpe e Accessori. */
  .bb-landing--scarpe > .bb-landing__section-images,
  .bb-landing--accessori > .bb-landing__section-images { order: 8; }
  .bb-landing--borse > .bb-landing__hero--2        { order: 9; }

  /* In questo ordine il separatore sopra il testo cadrebbe tra i riquadri e
     il testo: nell'XD mobile non c'e'. */
  .bb-landing--borse > .bb-landing__manifesto,
  .bb-landing--scarpe > .bb-landing__manifesto,
  .bb-landing--accessori > .bb-landing__manifesto {
    border-top: 0;
    padding-top: 32px;
  }
  .bb-landing--borse > .bb-landing__collections-cta,
  .bb-landing--scarpe > .bb-landing__collections-cta,
  .bb-landing--accessori > .bb-landing__collections-cta {
    padding: 32px var(--bb-gutter);
  }

  /* [MOB-12/13/14] Categorie e stili: scorrimento laterale, come il carosello
     Classics della home mobile. Riquadro 279 x 343 su 390 (XD) = 72% della
     larghezza, cosi' si vede l'inizio del successivo. Il nome resta SOTTO la
     foto: e' la scelta gia' fatta per la home mobile (MOB-06, niente
     mouseover su touch). */
  .bb-landing__categories,
  .bb-landing__categories--3col,
  .bb-landing__styles-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    padding-bottom: 0;
  }
  .bb-landing__categories::-webkit-scrollbar,
  .bb-landing__styles-grid::-webkit-scrollbar { display: none; }

  .bb-landing__categories .bb-landing__cat-tile,
  .bb-landing__styles-grid .bb-landing__cat-tile {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }
  .bb-landing__cat-tile-img {
    aspect-ratio: 279 / 343;
  }

  /* Classics: foto a tutta larghezza, testo sotto (XD mobile 390 x 480) */
  .bb-landing__models {
    width: 100%;
    gap: 56px;
    padding-top: 24px;
  }
  .bb-landing__model-card,
  .bb-landing__model-card:nth-child(even) {
    grid-template-columns: 1fr;
    grid-template-areas: "img" "body";
  }
  .bb-landing__model-card-img-wrap {
    aspect-ratio: 390 / 480;
  }
  .bb-landing__model-card-body {
    padding: 24px var(--bb-gutter) 0;
    gap: 16px;
  }
  .bb-landing__model-card-head {
    flex-direction: column;
    gap: 8px;
  }
  .bb-landing__model-card-quote { text-align: left; }
  /* in colonna la base di 220px diventerebbe un'altezza: 220px vuoti per modello */
  .bb-landing__model-card-head .bb-landing__model-card-quote { flex: none; }
  .bb-landing__model-card:nth-child(even) .bb-landing__model-card-cta { align-self: flex-end; }

  /* Scarpe/Accessori: una sola foto grande, verticale (XD mobile 394 x 485).
     L'XD mobile non ha la seconda: si nasconde solo qui, su desktop restano due. */
  .bb-landing__section-images {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* [NEW-95] Stessa misura della hero, come la seconda hero di Borse. */
  .bb-landing__section-img-item {
    aspect-ratio: auto;
    height: 100svh;
    min-height: 500px;
  }
  .bb-landing__section-img-item + .bb-landing__section-img-item {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Classics: al 61% su tablet la colonna di testo sarebbe troppo stretta */
  .bb-landing__models {
    width: 86%;
  }

  /* Stili grid: 3 colonne su tablet */
  .bb-landing__styles-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Scarpe/Accessori: 3 colonne */
  .bb-landing__categories--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1025px) {
  /* Borse: 4 categorie */
  .bb-landing__categories {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Scarpe/Accessori: sempre 3 */
  .bb-landing__categories--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}