/* ==========================================================================
   Brickollector — HOME (front-page) + header/footer chrome.
   Home = design "Home A / Vetrina Collezione". Tutte le regole della home
   sono scoped sotto .ldd-home; header (.ldd-header) e footer (.ldd-footer)
   sono chrome globali e restano invariati.
   Font e palette arrivano da theme.json; qui riusiamo le CSS var preset.
   ========================================================================== */

/* ---------- TOKENS locali (mappati sui preset di theme.json) ---------- */
/* Task 3 (restyling colori): --carbon/--carbon2/--yellow/--orange escono da questo
   scope, sostituiti dagli alias --bk-* globali (style.css).
   Anche gli alias di tipografia sono usciti: famiglie e dimensioni si prendono
   dai token globali del :root di style.css (--bk-font-sans/--bk-font-mono e la
   scala --bk-fs-*). Qui resta solo --maxw, che e' layout, non tipografia. */
.ldd-home,
.ldd-header,
.ldd-footer {
  --white: var(--wp--preset--color--base, #ffffff);
  --surface: var(--wp--preset--color--surface, #f4f4f5);
  --border: var(--wp--preset--color--border, #e4e4e7);
  --ink: var(--wp--preset--color--contrast, #171717);
  --muted: var(--wp--preset--color--muted, #52525b);
  --blue: var(--bk-blue-600);
  --blue-deep: var(--bk-blue-700);
  --red: var(--bk-red);
  --green: var(--bk-green);
  --band: var(--bk-band);
  --band-line: var(--bk-band-line);
  --band-ink: var(--bk-band-ink);
  --shadow: 0 1px 2px rgba(24,24,27,.06), 0 8px 24px rgba(24,24,27,.06);
  --ring: 0 0 0 3px rgba(23,117,171,.35);
  /* Larghezza base delle sezioni "di lettura/feature" (hero, fascia fiducia,
     "Perché fidarti di noi", metodo, assistenza, newsletter): sale a
     --ldd-w-page (1440) dalla scala condivisa di style.css. Le tre
     sezioni-griglia (temi, novità, ritirati) salgono a --ldd-w-immersive (1840)
     con un override sotto. Prima era 1200 hardcoded → gradino col chrome a 1840. */
  --maxw: var(--ldd-w-page);
}

/* ---------- HEADER (chrome, invariato) ---------- */
.ldd-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(24,24,27,.05);
}
/* il filo tricolore del logo: il brand entra in una barra bianca senza appesantirla */
.ldd-header::after { content: ""; display: block; height: 3px; background: var(--bk-thread); }
.ldd-header .ldd-header-inner {
  min-height: 68px;
  max-width: var(--ldd-w-chrome);
  margin-inline: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-inline: var(--ldd-gutter-x);
  gap: 20px;
}
.ldd-header .ldd-brand { gap: 12px; }
/* Logo nuovo: contiene gia' il wordmark "Brickollector", niente testo accanto
   (il nome resta nel markup solo per SEO/screen reader, via l'alt dell'immagine). */
.ldd-header .ldd-brand-link { display: inline-flex; align-items: center; text-decoration: none; }
.ldd-header .ldd-brand-logo img { height: 34px; width: auto; display: block; }
@media (max-width: 640px) {
  /* Mobile: logo con wordmark + tagline (logo-tagline.png, 923×180 ~5.1:1).
     Altezza contenuta per stare con ricerca+carrello+hamburger a 360-390px. */
  .ldd-header .ldd-brand-logo img { height: 40px; width: auto; }
}
.ldd-header .ldd-mainnav {
  font-family: var(--bk-font-sans);
  font-size: var(--bk-fs-md);
  font-weight: 600;
}
.ldd-header .ldd-mainnav a { color: var(--muted); font-weight: 600; text-decoration: none; }
.ldd-header .ldd-mainnav a:hover { color: var(--blue-deep); }
/* Nav come blocco dinamico PHP (legodreamduck/site-nav): la <ul class="ldd-nav-list">
   non eredita più il layout del core wp:navigation (flex + no bullet). Lo definiamo
   qui esplicitamente, altrimenti il menu è una lista puntata verticale. */
.ldd-header .ldd-mainnav .ldd-nav-list {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ldd-header .ldd-mainnav .ldd-nav-list li { margin: 0; }
/* FIX (backlog #4): le voci di menu andavano a capo gonfiando l'header quando
   lo spazio si stringeva (>=1025px, dove compare il form di ricerca inline).
   I link non vanno mai a capo e la nav non si comprime: a cedere spazio e' il
   campo di ricerca (vedi search.css, .ldd-search-form flex:0 1 290px min-width).
   min-width:0 su tools/search sblocca lo shrink del form contro il min-width:auto
   di default dei flex item dei blocchi WP. Verificato IT/EN/PL/NL, 1001-2560px:
   header sempre 69px, zero wrap, zero overflow orizzontale. */
.ldd-header .ldd-mainnav { flex: 0 0 auto; }
.ldd-header .ldd-mainnav .ldd-nav-list li a { white-space: nowrap; }
.ldd-header .ldd-tools { min-width: 0; }
.ldd-header .ldd-search { min-width: 0; }
.ldd-header .wp-block-navigation__responsive-container-open,
.ldd-header .wp-block-navigation__responsive-container-close { color: var(--ink); }
.ldd-header .ldd-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  font-family: var(--bk-font-sans);
  font-size: var(--bk-fs-base);
  font-weight: 600;
}
.ldd-header .ldd-cart svg { width: 18px; height: 18px; }
.ldd-header .ldd-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
}
.ldd-header .ldd-account svg { width: 19px; height: 19px; }
/* pill uniforme carrello/account/burger/ricerca: erano fondo carbon2 (#27272a),
   ora superficie chiara con bordo discreto (--surface/--border).
   .ldd-search-toggle NON e' qui: il componente e' di search.css, che lo
   definisce per intero (background/border/radius/color inclusi) dentro il suo
   @media(max-width:1024px) — ripeterlo qui sarebbe una duplicazione. */
.ldd-header .ldd-cart,
.ldd-header .ldd-account,
.ldd-header .ldd-burger {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--ink);
}
.ldd-header .ldd-cart:hover,
.ldd-header .ldd-account:hover,
.ldd-header .ldd-burger:hover { border-color: var(--blue); }
.ldd-header a:focus-visible,
.ldd-header button:focus-visible {
  outline: var(--bk-focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* FIX: mobile overlay menu — first link gets a persistent azure "pill"
   outline from the generic header focus rule above when the overlay opens
   and steals focus programmatically. Override with a subtler, non-boxy
   focus style that still meets keyboard-accessibility needs. */
.ldd-header .wp-block-navigation__responsive-container.is-menu-open a:focus-visible {
  outline: none;
  border-radius: 0;
  text-decoration: underline;
  text-decoration-color: var(--blue-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ==========================================================================
   NAV MOBILE — hamburger + drawer overlay (chrome, globale)
   Burger e drawer nascosti su desktop; ≤900px la nav inline sparisce e
   compare l'hamburger che apre il pannello bianco (overlay scrim resta scuro
   e semi-trasparente: non e' una superficie, e' lo scrim del backdrop).
   ========================================================================== */
.ldd-header .ldd-burger { display: none; }
.ldd-header .ldd-drawer { display: none; }

@media (max-width: 900px) {
  .ldd-header .ldd-mainnav { display: none; }
  .ldd-header .ldd-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 10px;
    margin-left: auto;               /* spinge burger accanto ai tools a destra */
    border-radius: 9px;
    cursor: pointer;
  }
  .ldd-header .ldd-burger span {
    display: block;
    height: 2px;
    width: 20px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }

  /* Drawer */
  .ldd-header .ldd-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    opacity: 0;
    background: rgba(9, 9, 11, .6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    transition: opacity .22s ease, visibility .22s ease;
  }
  .ldd-header .ldd-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(86vw, 360px);
    box-sizing: border-box;
    padding: 20px 22px calc(24px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    background: var(--white);
    border-left: 3px solid var(--blue);
    box-shadow: -24px 0 60px rgba(24,24,27,.28);
  }
  .ldd-header .ldd-drawer-panel a { color: var(--ink); }
  .ldd-header .ldd-drawer-panel a:hover { color: var(--blue-deep); }
  .ldd-header .ldd-drawer-close {
    align-self: flex-end;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--ink);
    cursor: pointer;
    margin-bottom: 8px;
  }
  .ldd-header .ldd-drawer-close svg { width: 20px; height: 20px; }
  .ldd-header .ldd-drawer-nav { display: flex; flex-direction: column; }
  .ldd-header .ldd-drawer-nav a {
    font-family: var(--bk-font-sans);
    font-size: var(--bk-fs-3xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    padding: 13px 4px;
    /* i separatori erano #27272a: su fondo bianco sarebbero invisibili (D6) */
    border-bottom: 1px solid var(--border);
  }
  .ldd-header .ldd-drawer-sep { flex: 1; min-height: 18px; }
  /* nel markup .ldd-drawer-sec e' l'elemento <a> stesso (account/carrello), non un
     contenitore con un <a> annidato: i selettori restano scoped su .ldd-drawer-sec,
     non ".ldd-drawer-sec a" (che non matcherebbe nulla). Serve il prefisso
     .ldd-drawer-panel per battere in specificita' la regola generica
     ".ldd-drawer-panel a" (0,2,1): senza, l'ink del link generico vincerebbe sul
     muted qui sotto. */
  .ldd-header .ldd-drawer-sec {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--bk-font-sans);
    font-size: var(--bk-fs-md);
    font-weight: 600;
    text-decoration: none;
    padding: 11px 4px;
  }
  .ldd-header .ldd-drawer-sec svg { width: 19px; height: 19px; flex: none; }
  .ldd-header .ldd-drawer-panel .ldd-drawer-sec { color: var(--muted); }
  .ldd-header .ldd-drawer-panel .ldd-drawer-sec:hover { color: var(--ink); }

  /* Account e selettore lingua escono dalla barra: vivono nel drawer.
     La barra mobile resta con ricerca + carrello + hamburger. */
  .ldd-header .ldd-account,
  .ldd-header .ldd-lang { display: none; }

  /* Lingua nel drawer: bandiera + nome nativo, su due colonne (undici lingue
     in colonna singola sarebbero uno scroll intero), separate da una linea
     sottile (non la molla flex:1 di .ldd-drawer-sep, che spingerebbe due volte).
     Riga alta almeno 44px: e' un bersaglio da pollice. */
  .ldd-header .ldd-drawer-langsep {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .ldd-header .ldd-drawer-langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
  .ldd-header .ldd-drawer-panel .ldd-drawer-lang {
    display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box;
    font-family: var(--bk-font-sans); font-size: var(--bk-fs-base); font-weight: 600;
    color: var(--ink); text-decoration: none;
    padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 8px;
    white-space: nowrap; overflow: hidden;
  }
  .ldd-header .ldd-drawer-panel .ldd-drawer-lang .ldd-lang-name { overflow: hidden; text-overflow: ellipsis; }
  .ldd-header .ldd-drawer-panel .ldd-drawer-lang .ldd-flag { width: 24px; height: 18px; }
  .ldd-header .ldd-drawer-panel .ldd-drawer-lang:hover { border-color: var(--blue); }
  .ldd-header .ldd-drawer-panel .ldd-drawer-lang.is-current {
    color: #fff; background: var(--blue); border-color: var(--blue);
  }

  /* Stato aperto */
  html.ldd-drawer-open .ldd-header .ldd-drawer { visibility: visible; opacity: 1; }
  html.ldd-drawer-open .ldd-header .ldd-drawer-panel { transform: translateX(0); }
  html.ldd-drawer-open,
  html.ldd-drawer-open body { overflow: hidden; }
}
/* Sotto i 360px le due colonne del drawer stringono i nomi lunghi
   (Slovenčina, Nederlands): una colonna sola. */
@media (max-width: 359px) {
  .ldd-header .ldd-drawer-langs { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HOME A — "Vetrina Collezione"
   ========================================================================== */

/* ---------- BASE ---------- */
.ldd-home {
  background: var(--white);
  color: var(--ink);
  font-family: var(--bk-font-sans);
  font-weight: 400;
  line-height: 1.55;
  font-size: var(--bk-fs-xl);
  -webkit-font-smoothing: antialiased;
}
.ldd-home img { max-width: 100%; display: block; }
.ldd-home a { color: inherit; text-decoration: none; }
.ldd-home h1,
.ldd-home h2,
.ldd-home h3,
.ldd-home h4 { margin: 0; line-height: 1.15; letter-spacing: -.01em; }
.ldd-home p { margin: 0; }
/* .mono e' rimasto solo il nome della classe nel markup: i numeri sono Lato
   (cifre tabellari), non monospaziati. */
.ldd-home .mono {
  font-family: var(--bk-font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.ldd-home .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  /* Gutter condiviso col chrome/catalogo: allinea il bordo sinistro delle
     sezioni-griglia (1840) a header/footer/catalogo, che usano --ldd-gutter-x. */
  padding: 0 var(--ldd-gutter-x);
  /* border-box come header (.ldd-header-inner) e catalogo (.ldd-cat-form): con
     content-box il max-width escluderebbe il padding e i .wrap div "puri" (Temi)
     sporgerebbero rispetto ai .wrap che sono wp-block-group (Novità/Ritirati,
     border-box di default nei blocchi). Uniforma l'allineamento delle 3 griglie. */
  box-sizing: border-box;
}
/* Sezioni-griglia "immersive": temi, novità, ritirati salgono a 1840. Il resto
   della home (hero, trustbar, chi siamo, newsletter) resta a --ldd-w-page (1440).
   > .wrap: solo il wrapper diretto della sezione, non wrap annidati. */
.ldd-home #temi > .wrap,
.ldd-home .ldd-novita > .wrap,
.ldd-home .ldd-in-arrivo > .wrap,
.ldd-home .ldd-ritirati > .wrap {
  max-width: var(--ldd-w-immersive);
}

/* focus visibile */
.ldd-home a:focus-visible,
.ldd-home button:focus-visible,
.ldd-home input:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 6px;
}

/* eyebrow / section heads */
.ldd-home .eyebrow {
  font-family: var(--bk-font-mono);
  font-weight: 500;
  font-size: var(--bk-fs-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- HERO ---------- */
.ldd-home .hero { padding: 56px 0 40px; border-bottom: 1px solid var(--border); }
.ldd-home .hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  /* start, non center: la colonna di destra ora è vetrina + scheda di
     controllo, e centrarla la faceva "galleggiare" rispetto al titolo.
     Allineate in alto, le due colonne partono dalla stessa riga. */
  align-items: start;
}
.ldd-home .hero-copy .eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.ldd-home .hero .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(26,127,75,.16);
}
/* L'UNICO elemento del sito che usa --bk-fs-display: il titolo dell'hero della
   home. Il vecchio font display e' fuori dal tema: qui c'e' Lato 900, niente
   maiuscolo forzato, e a parita' di corpo l'ingombro e' maggiore. */
.ldd-home .hero h1 {
  font-family: var(--bk-font-sans);
  font-weight: 900;
  font-size: var(--bk-fs-display);
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--ink);
}
.ldd-home .hero h1 em { font-style: normal; color: var(--blue); }
.ldd-home .hero .sub {
  margin-top: 22px;
  font-size: var(--bk-fs-2xl);
  color: var(--muted);
  max-width: 42ch;
  line-height: 1.6;
}
.ldd-home .hero-cta { display: flex; align-items: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.ldd-home .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: var(--bk-fs-lg);
  border-radius: 11px;
  padding: 14px 24px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .12s, background .15s, box-shadow .15s;
}
.ldd-home .btn svg { width: 16px; height: 16px; }
.ldd-home .btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(23,117,171,.28); }
.ldd-home .btn-primary:hover { background: var(--blue-deep); transform: translateY(-1px); }
.ldd-home .btn-ghost { background: transparent; color: var(--ink); font-weight: 600; }
.ldd-home .btn-ghost:hover { color: var(--blue-deep); }
.ldd-home .hero-meta { display: flex; gap: 28px; margin-top: 34px; flex-wrap: wrap; }
.ldd-home .hero-meta .m { display: flex; flex-direction: column; gap: 2px; }
/* Numeri dell'hero: nel mockup sono 26px, cioe' il gradino h2, non 3xl. */
.ldd-home .hero-meta .m b { font-family: var(--bk-font-sans); font-weight: 900; font-size: var(--bk-fs-h2); color: var(--ink); line-height: 1.15; }
.ldd-home .hero-meta .m span { font-size: var(--bk-fs-sm); color: var(--muted); }

/* ---------- LE DUE VETRINE DELL'HERO ----------
   Due card affiancate: l'ultimo set arrivato e l'ultimo in arrivo, quello in
   preorder. Quando non c'e' nessun preorder il PHP emette la classe di stato
   solitaria e la griglia torna a una colonna: l'hero e' pixel per pixel
   quello di prima, senza segnaposto. Il markup lo produce la funzione hero
   cards del tema, dentro il file dedicato alle card dell'hero.
   Griglia auto-fit con soglia minima, non due colonne di larghezza fissa
   uguale: sopra i 1000px di larghezza la sezione hero e' ancora divisa in due
   (testo a sinistra, vetrina a destra: vedi RESPONSIVE piu' sotto), quindi la
   colonna della vetrina vale gia' circa meta' della pagina. Due colonne fisse
   la dividerebbero ancora in due, con una fascia morta fra circa 1000 e 1230
   pixel di viewport dove ogni card scende sotto i 220 pixel di larghezza:
   l'immagine si schiaccia e il pannello prezzo finisce per coprire il tag di
   stato. 285 pixel e' la soglia sotto la quale questa vetrina (immagine, nome
   del set, prezzo) non regge piu' leggibile, e non e' una stima: e' tarata sul
   portatile piu' diffuso. A 1366 pixel di larghezza della finestra la colonna
   della vetrina vale circa 600 pixel, quanto basta perche' due card affiancate
   ci stiano proprio a questa soglia. A 1280 pixel la stessa colonna scende a
   circa 560 pixel, troppo stretta per reggere due card leggibili: li' e'
   giusto che vadano a capo invece di stringersi ulteriormente. La griglia
   auto-fit fa cadere da sola la seconda colonna ovunque non ci stia, senza
   bisogno di un breakpoint dedicato (la stessa idea vive gia' in
   vendi-page.css, sopra la griglia dei canali di contatto). Auto-fit e non la
   sua variante che riempie i vuoti: con quella, quando la card e' una sola
   (nessun preorder, o comunque una riga con un solo elemento), resterebbe una
   traccia vuota accanto invece di farla espandere. */
.ldd-home .hero-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 16px; }
.ldd-home .hero-cards.is-solo { grid-template-columns: 1fr; }

/* hero showcase card */
.ldd-home .showcase {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  aspect-ratio: 5 / 4;
}
.ldd-home .showcase .ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Il brief (Task 4) proponeva un gradiente a 3 tappe con --blue-brand (#1c92cf) e
     --bk-blue-300 (#6cb9e0) come tappa centrale: sul mezzo il bianco del .setno
     scendeva a ~2.2:1 (fallisce anche il 3:1 richiesto per testo grande). Qui sopra
     compare il set senza foto (.setno bianco, vedi sotto): restiamo nella coppia
     --blue/--blue-deep, che garantisce >=5:1 con testo bianco in ogni punto del
     gradiente, e non usiamo mai --blue-brand come fondo sotto testo bianco. */
  /* background-color esplicito oltre al gradiente: il fallback testuale (sku)
     e' bianco sopra, e un motore che legge solo background-color (screen reader
     "forced colors", strumenti di audit contrasto, o il gradiente che non regge
     per qualche motivo) deve comunque trovare un fondo scuro coerente, non il
     transparent implicito che farebbe risalire il contrasto al genitore chiaro. */
  background-color: var(--blue-deep);
  background-image: linear-gradient(140deg, var(--blue) 0%, var(--blue-deep) 100%);
}
.ldd-home .showcase .ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 12px 12px, rgba(255,255,255,.10) 4px, transparent 5px);
  background-size: 34px 34px;
  opacity: .6;
}
/* variante con immagine reale del box: niente gradiente/pattern, box su fondo chiaro */
.ldd-home .showcase .ph--img { background: #fff; padding: 22px; }
.ldd-home .showcase .ph--img::before { display: none; }
.ldd-home .showcase .showcase-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
/* perf-images.php avvolge l'<img> in <picture> (WebP), come nelle card del
   catalogo (assets/css/card.css): il figlio di .ph e' il <picture>, alto
   "auto", e l'altezza al 100% dell'<img> qui sopra non limita piu' niente. La foto
   eBay verticale (600x1067) allungava il riquadro a tutta la sua altezza e
   le due card dell'hero finivano ad altezze diverse, col pannello prezzo della
   seconda a meta' card (visto in produzione il 2026-09-18). Il <picture>
   prende l'intera area del riquadro e l'overflow e' la rete. */
.ldd-home .showcase .ph { overflow: hidden; }
.ldd-home .showcase .ph picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; }
.ldd-home .showcase .ph picture .showcase-img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
/* la showcase è cliccabile: link overlay che copre tutta la card, hover soft */
.ldd-home .showcase { transition: transform .18s ease, box-shadow .18s ease; }
.ldd-home .showcase:hover { transform: translateY(-2px); }
.ldd-home .showcase .showcase-link { position: absolute; inset: 0; z-index: 5; text-indent: -9999px; overflow: hidden; }
/* Fallback testuale quando il set non ha foto: era un numero gigante fuori
   scala (fino a 120px). Ora prende --bk-fs-h1 come ogni altro titolo grande
   del sito: il display resta riservato all'h1 dell'hero. */
.ldd-home .showcase .setno {
  font-family: var(--bk-font-sans);
  font-weight: 900;
  color: #fff;
  font-size: var(--bk-fs-h1);
  letter-spacing: -.01em;
  line-height: 1.15;
  position: relative;
  z-index: 1;
  opacity: .96;
  /* rete di contenimento sempre attiva: mai piu' largo del riquadro, va a capo
     invece di sforare in orizzontale (utile con SKU insolitamente lunghi anche
     su desktop, zero effetto quando il testo gia' ci sta). */
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* D2: su mobile lo sku fallback (niente foto prodotto) usciva dal riquadro,
   finendo sotto/dietro il box prezzo (showcase-info, z-index piu' alto). Con
   la scala unica il corpo non e' piu' un caso mobile a se': il token h1 e' gia'
   fluido e scende da solo, quindi qui resta solo lo spazio da liberare sotto.
   Da riverificare a schermo: con un testo molto piu' piccolo il
   padding-bottom qui sotto potrebbe essere ora eccessivo. */
@media (max-width: 480px) {
  /* il testo resta centrato in verticale in .ph (flex, justify-content:center):
     senza margine il blocco sku+setlabel arriva comunque a toccare il bordo
     superiore del box prezzo (showcase-info, sovrapposto in basso). Spingiamo
     il centro verso l'alto liberando lo spazio del box prezzo (~120px con
     l'inset di 16px) senza toccare .ph--img, che ha gia' il suo padding fisso
     per l'immagine reale.
     Scopata alla card singola (nessun set in arrivo): e' l'unico caso rimasto
     in cui il pannello sta ancora sovrapposto in basso, quindi l'unico dove
     il blocco di ripiego ha davvero qualcosa da scansare. Nella coppia
     affiancata il pannello ora sta sotto la foto, in flusso: applicare qui lo
     stesso margine deformerebbe il riquadro, che li' deve restare quadrato,
     senza fascia riservata in fondo per nulla. Ogni card della vetrina passa
     sempre da una delle due, mai da nessuna: la funzione che le genera avvolge
     sempre il contenuto in una di queste due classi. */
  .ldd-home .hero-cards.is-solo .showcase .ph:not(.ph--img) { padding-bottom: 110px; }
}
.ldd-home .showcase .setlabel {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  font-family: var(--bk-font-mono);
  font-size: var(--bk-fs-base);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
/* D4 (difensivo): nel markup attuale, generato dalla funzione ldd_hero_card_html dentro inc/hero-cards.php, .setno/
   .setlabel compaiono SOLO dentro .ph (fondo gradiente blu, mai .ph--img: quando
   c'e' una foto il fallback testuale non viene renderizzato affatto). Il bianco
   su blu e' gia' garantito leggibile dal gradiente sopra (>=5:1). Questa regola
   resta come rete di sicurezza se in futuro .ph--img (fondo bianco) dovesse mai
   contenere questi span: senza, sarebbe bianco su bianco invisibile. */
.ldd-home .showcase .ph--img .setno,
.ldd-home .showcase .ph--img .setlabel { color: var(--muted); }
.ldd-home .showcase .tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  font-size: var(--bk-fs-sm);
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.ldd-home .showcase .tag .seal { width: 8px; height: 8px; border-radius: 2px; background: var(--green); }
.ldd-home .showcase-info {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  background: rgba(255,255,255,.96);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--shadow);
}
.ldd-home .showcase-info h3 { font-size: var(--bk-fs-2xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.ldd-home .showcase-info .meta { font-size: var(--bk-fs-xs); color: var(--muted); margin-top: 3px; }
.ldd-home .showcase-info .price { font-family: var(--bk-font-sans); font-weight: 900; font-size: var(--bk-fs-3xl); color: var(--ink); white-space: nowrap; }

/* Il pannello va SOTTO la foto, non sopra, e solo quando le card sono
   affiancate (is-duo). Misura sul mockup approvato: il pannello sovrapposto
   arrivava a coprire il 43% della scatola (134px di 248px di card). La card
   is-solo (nessun set in arrivo, una foto sola a piena larghezza) non ha
   questo problema e resta col pannello sovrapposto com'era. Stesso
   linguaggio delle card del catalogo (assets/css/card.css): riquadro foto
   sopra col proprio rapporto d'aspetto, testo sotto in flusso, mai uno
   sopra l'altro. */
.ldd-home .hero-cards.is-duo .showcase {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
}
.ldd-home .hero-cards.is-duo .showcase .ph {
  position: static;
  aspect-ratio: 1 / 1;
  /* niente crescita flex e nessuna altezza minima implicita, cosi' il quadrato
     resta un quadrato e il contenuto non lo allunga (nota sul <picture> sopra). */
  flex: none;
  min-height: 0;
}
/* A due card affiancate il pannello prezzo si stringe: nome e prezzo
   affiancati si spezzerebbero male, cosi' l'informazione va in colonna.
   Dopo il passaggio alla griglia auto-fit (Task 3, fix successivo) le due
   card vanno anche a capo su una riga sola in tutte le larghezze intermedie:
   i corpi del testo restano quindi quelli base, uguali alla card singola,
   e qui sotto cambia solo l'impaginazione (colonna invece di riga), mai la
   dimensione del testo. In flusso sotto la foto il pannello non deve piu'
   galleggiare sopra nulla: sfondo trasparente, nessuna ombra ne' angoli
   propri, solo un filo di separazione dalla foto. */
.ldd-home .hero-cards.is-duo .showcase-info {
  position: static;
  background: transparent;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: 13px 14px;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.ldd-home .hero-cards.is-duo .showcase .tag { top: 12px; left: 12px; padding: 6px 10px; font-size: var(--bk-fs-xs); }
.ldd-home .hero-cards.is-duo .showcase .ph--img { padding: 16px; }

/* Il blocco di ripiego (.setno/.setlabel, vedi sopra) e' pensato per la
   vetrina grande: a piena larghezza ha tutta la card per se' e i corpi
   possono restare quelli base. A due card affiancate il riquadro foto e' un
   quadrato piu' stretto: qui i corpi scendono ai gradini della scala
   pensati per badge ed etichette minori, cosi' SKU e tema restano leggibili
   senza sforare dal riquadro. Da quando il pannello sta sotto la foto e non
   piu' sovrapposto, il blocco di ripiego ha tutto il quadrato per se' e non
   serve piu' nessun compenso di spazio verticale per lasciargli posto. */
.ldd-home .hero-cards.is-duo .showcase .setno { font-size: var(--bk-fs-xl); line-height: 1.15; }
.ldd-home .hero-cards.is-duo .showcase .setlabel { font-size: var(--bk-fs-micro); margin-top: 4px; }

/* Il titolo resta troncato a due righe: il nome completo resta comunque
   disponibile nella scheda del prodotto, a un clic di distanza. Il
   troncamento da solo pero' non basta a far combaciare le due card: un nome
   che sta su una riga sola lascerebbe la sua colonna piu' corta di quella
   col nome su due righe, e prezzo e riga di spedizione finirebbero a quote
   diverse. min-height riserva SEMPRE lo spazio di due righe, corto o lungo
   che sia il nome (stesso calcolo di .cname in card.css: due volte
   line-height 1.35 fa 2.7em): il pannello assorbe la differenza e le due
   card restano alla stessa altezza, prezzo compreso. Solo qui, nelle card
   affiancate: la card singola non ha questo vincolo. */
.ldd-home .hero-cards.is-duo .showcase-info h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

/* Il tag di stato della card "In arrivo".
   Blu profondo, come il badge preorder di card.css e product.css: il colore
   dello stato e' --blue-deep, MAI --blue, che e' il blu dei pulsanti (uno stato
   non e' un'azione). Bianco su --blue-deep e' >=5:1.
   Niente bollo verde: il verde qui dentro significa "sigillo verificato", e la
   scatola di un preorder non l'abbiamo ancora in mano. */
.ldd-home .showcase .tag--preorder {
  background: var(--blue-deep);
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* La promessa di spedizione, sempre presente su entrambe le card (richiesta
   del cliente: le due colonne di testo si allineano riga per riga). Stesso
   linguaggio di .ceta/.ceta--preorder in card.css: verde = parte subito,
   blu profondo = e' ancora in arrivo. E' il colore di uno STATO, non di un
   pulsante: qui non entra mai il blu dei pulsanti. */
.ldd-home .showcase-info .seta {
  display: block;
  margin-top: 4px;
  font-size: var(--bk-fs-xs);
  font-weight: 700;
  color: var(--bk-green-700);
}
.ldd-home .showcase-info .seta--preorder { color: var(--blue-deep); }

/* ---------- SCHEDA DI CONTROLLO (hero) ----------
   Il contenuto che regge la promessa della pagina: lo showcase mostra la
   scatola, questa dice perché fidarsi.

   PERCHE' NON E' SOVRAPPOSTA COME NEL MOCKUP
   Nel mockup la card stava a cavallo dell'angolo in basso a sinistra della
   vetrina, sopra un'area vuota. La NOSTRA vetrina lì non è vuota: la
   funzione che genera la card dell'hero, dentro il file delle card dell'hero,
   chiude con .showcase-info, una barra a tutta larghezza col nome e il
   prezzo del set. Ogni sovrapposizione in basso ci
   finisce sopra — due card bianche l'una sull'altra, testo di entrambe
   illeggibile. Tararla con un bottom negativo (si era provato -140px) non
   risolve: cura il sintomo a un'altezza sola, e il primo titolo di prodotto
   che va a due righe la rimette sopra al prezzo, in silenzio e in tutte e 7
   le lingue.
   Sta sotto, in flusso: nessun numero magico, nessuna altezza da indovinare,
   stesso comportamento a ogni breakpoint. La sovrapposizione era vestito, e
   il vestito qui è il nostro. */
.ldd-home .certcard {
  /* border-box: width:100% non deve diventare 100% + padding + bordo, o la
     card sfora il contenitore (a 390px sforava di 20px oltre il bordo). */
  box-sizing: border-box;
  width: 100%;
  margin-top: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 18px 18px 14px;
}
.ldd-home .certcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ldd-home .certcard-head .mono { font-size: var(--bk-fs-xs); color: var(--muted); }
.ldd-home .certcard ul { list-style: none; margin: 0; padding: 0; }
.ldd-home .certcard li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: var(--bk-fs-base);
  font-weight: 500;
  color: var(--ink);
}
.ldd-home .certcard li svg { color: var(--green); flex: none; }

/* ---------- FASCIA FIDUCIA (due righe) ----------
   Riga 1: i quattro vantaggi. Riga 2: da quanto lo facciamo, e come.
   Nel mockup erano due strisce separate (topbar + proof-strip): qui una sola,
   perché una topbar sarebbe chrome e vivrebbe anche fuori dalla home. */
.ldd-home .trustbar {
  background: var(--band);
  border-bottom: 1px solid var(--band-line);
  color: var(--band-ink);
}
.ldd-home .trustbar .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 0;
}
.ldd-home .trustbar .t {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--bk-fs-base);
  font-weight: 600;
}
.ldd-home .trustbar .t svg { flex: none; }
.ldd-home .trustbar .proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--band-line);
}
.ldd-home .trustbar .proof-claim { font-size: var(--bk-fs-base); font-weight: 700; }
.ldd-home .trustbar .chip {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--bk-fs-sm);
  font-weight: 600;
  color: var(--blue-deep);
}
.ldd-home .trustbar .chip svg { flex: none; }

/* ---------- SECTION SHELL ---------- */
.ldd-home .blk { padding: 56px 0; }
.ldd-home .ldd-novita { padding-top: 0; }
.ldd-home .ldd-ritirati { background: var(--surface); border-top: 1px solid var(--border); }
.ldd-home .ldd-in-arrivo { background: var(--surface); border-top: 1px solid var(--border); }
.ldd-home .sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}
/* .care-intro h2 e' un titolo di sezione anche se non sta dentro un .sec-head
   (markup di inc/home.php): senza questa riga sarebbe l'unico h2 della home a
   cadere sullo stile globale dell'h2, con un corpo diverso dagli altri. */
.ldd-home .sec-head h2,
.ldd-home .care-intro h2 {
  font-family: var(--bk-font-sans);
  font-weight: 900;
  font-size: var(--bk-fs-h2);
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--ink);
}
.ldd-home .sec-head .eyebrow { display: block; margin-bottom: 12px; }
/* niente nowrap: in polacco "Wszystkie wycofane" (+ freccia) sfora il container
   flex su mobile (.sec-head e' stretto quanto il titolo lo consente) e produce
   scroll orizzontale. Il testo normale va a capo su 2 righe quando serve — non
   ha effetto sulle lingue piu' corte, che restano su una riga. */
.ldd-home .sec-head .link {
  font-weight: 600;
  font-size: var(--bk-fs-md);
  color: var(--blue);
  white-space: normal;
  text-align: right;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ldd-home .sec-head .link:hover { gap: 9px; }
.ldd-home .sec-head .link svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Il sec-head di temi/novità/ritirati ha il link a destra; il paragrafo va
   sotto entrambi, non dentro la colonna del titolo. */
.ldd-home .blk > .wrap > .sec-sub { margin-top: -18px; margin-bottom: 30px; }

/* ---------- RITIRATI: i tre patti ---------- */
.ldd-home .rit-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 32px;
}
/* Bianchi sul fondo grigio della sezione, come le card di "Perché fidarti di
   noi": erano --surface, cioè lo stesso identico colore della sezione che li
   ospita, e i tre pannelli si distinguevano solo per i fili di separazione.
   Nel mockup si staccavano perché erano chiari su navy; qui il navy non c'è. */
.ldd-home .rit-features .f {
  background: var(--white);
  padding: 18px 20px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.ldd-home .rit-features .f svg { color: var(--blue-deep); flex: none; margin-top: 2px; }
.ldd-home .rit-features h4 { font-size: var(--bk-fs-base); font-weight: 700; margin-bottom: 5px; }
.ldd-home .rit-features p { font-size: var(--bk-fs-sm); line-height: 1.55; color: var(--muted); }

/* ---------- THEMES GRID ---------- */
/* auto-fill (non auto-fit): con pochi item auto-fit ristirerebbe le card gonfiandole.
   A 1840 gli 8 temi entrano in una riga; sotto, le colonne calano da sole. I fixed
   count nelle media query tablet/mobile restano e vincono sotto le loro soglie. */
.ldd-home .themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 14px; }
.ldd-home .theme {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.ldd-home .theme:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--shadow); }
/* Numero di set del tema: e' una statistica, quindi Lato 900 (mai mono). */
.ldd-home .theme .count { font-family: var(--bk-font-sans); font-weight: 900; font-size: var(--bk-fs-h2); color: var(--blue); line-height: 1.15; }
.ldd-home .theme .name { font-weight: 700; font-size: var(--bk-fs-lg); line-height: 1.35; }
.ldd-home .theme .sets { font-size: var(--bk-fs-sm); color: var(--muted); }
.ldd-home .theme .bar { height: 3px; border-radius: 2px; margin-top: 10px; background: var(--surface); overflow: hidden; }
.ldd-home .theme .bar i { display: block; height: 100%; border-radius: 2px; }

/* ---------- PRODUCT GRID (Novità / Ritirati) ----------
   Le due sezioni NON usano più gli shortcode WooCommerce (ul.products > li.product,
   card povere: solo titolo, niente prezzo né stato). Rendono la card del catalogo
   via ldd_render_cards() dentro <div class="grid c3 ldd-cards"> — vedi inc/home.php.
   Tutto il CSS della card e della griglia sta in assets/css/card.css, condiviso col
   catalogo: qui non c'è nulla da ridefinire, e le vecchie regole ul.products (griglia,
   immagine 250px, bottone, override mobile) sono state rimosse perché morte. */
.ldd-home .ldd-fallback {
  font-family: var(--bk-font-mono);
  font-size: var(--bk-fs-sm);
  color: var(--muted);
  margin: 16px 0 0;
}

/* ---------- FASCIA VENDI ---------- */
/* TRAPPOLA VERIFICATA, da conoscere prima di editare i commenti qui sotto.
   In locale Autoptimize aggrega e minifica il CSS. Se dentro un commento si scrive
   testo che somiglia a CSS (una coppia proprieta-due punti-valore, o una funzione
   di grid con le parentesi), il minificatore perde il pezzo: il commento e il
   blocco che lo segue spariscono dal file servito e riappaiono, senza selettore,
   come dichiarazioni orfane. Qui era successo al media query e al selettore del
   titolo, e la fascia usciva a una colonna. Il sorgente resta CSS validissimo:
   il bug si vede solo nel CSS servito. Quindi due regole per questo blocco:
     1. nei commenti si descrivono i valori a parole, non si incollano;
     2. dopo un edit si verifica il CSS aggregato, non solo il sorgente.
   Fine della nota tecnica. Il resto e' il disegno della fascia:
   stessa specie della .trustbar, non della .news-box: banda a tutta larghezza in
   tinta --bk-band con un filo --bk-band-line sopra e sotto, non un box arrotondato
   su fondo bianco. Il markup è una section alignfull blk come .ldd-novita e
   .ldd-ritirati, quindi il fondo va sulla sezione.
   Due cose arrivano gratis e non vanno ridefinite:
     - .blk dà il ritmo verticale delle altre sezioni (56px, 44px sotto 560px);
     - .wrap eredita la larghezza di pagina (1440), perché la fascia NON è nella
       lista delle 3 griglie immersive a 1840 (#temi/.ldd-novita/.ldd-ritirati).
   Il focus non è ridefinito qui apposta: .ldd-home a:focus-visible (ring azzurro)
   è la convenzione della home e vale già su entrambe le CTA. */
.ldd-home .ldd-home-vendi {
  background: var(--bk-band);
  color: var(--bk-band-ink);
  border-block: 1px solid var(--bk-band-line);
}
.ldd-home .ldd-home-vendi-box {
  display: grid;
  gap: 24px;
  align-items: center;
}
/* Breakpoint unico della fascia: impilata di default, due colonne da 900 in su.
   Si usa una soglia minima e non massima perché il requisito è due colonne da 900
   in su: a 900 esatti devono essere già affiancate, non impilate.
   La prima traccia ha minimo esplicito zero: col minimo automatico dei grid item
   il testo non si restringe e spinge le CTA oltre il bordo. */
@media (min-width: 900px) {
  .ldd-home .ldd-home-vendi-box {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
  }
}
/* Titolo di sezione come tutti gli altri: Lato 900, scala unica, niente
   maiuscolo forzato. */
.ldd-home .ldd-home-vendi-testo h2 {
  font-family: var(--bk-font-sans);
  font-weight: 900;
  font-size: var(--bk-fs-h2);
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--bk-band-ink);
}
/* La colonna del testo è 1fr della fascia (a 1440 sono ~900px): senza un limite
   di misura la riga arriverebbe a ~120ch. 62ch la tiene leggibile senza stringere
   il box né mandare le CTA a capo. */
.ldd-home .ldd-home-vendi-testo p {
  color: var(--muted);
  margin-top: 14px;
  font-size: var(--bk-fs-lg);
  line-height: 1.55;
  max-width: 62ch;
}
.ldd-home .ldd-home-vendi-cta { display: flex; flex-wrap: wrap; gap: 12px; }
/* Gemello di .btn per geometria (padding 14/24, radius 11, 700 a 15px, gap 10):
   le due CTA devono leggere come una coppia, non come due bottoni scollegati.
   Verde --bk-green (#1a7f4b): bianco sopra = 5.0:1. Il verde WhatsApp 25D366 è
   vietato (bianco sopra = 2.3:1, sotto soglia). */
.ldd-home .ldd-home-vendi-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bk-green);
  color: #fff;
  font-weight: 700;
  font-size: var(--bk-fs-lg);
  border-radius: 11px;
  padding: 14px 24px;
  border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(26,127,75,.28);
  transition: transform .12s, background .15s;
}
.ldd-home .ldd-home-vendi-wa:hover { background: var(--bk-green-700); transform: translateY(-1px); }

/* ---------- PERCHE' FIDARTI DI NOI ----------
   Era .authban a 3 colonne in fondo alla pagina. Stesso vestito (fondo
   surface, icona in riquadro), quattro colonne, e un sec-head sopra. */
.ldd-home .trust { background: var(--surface); }
.ldd-home .trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 36px;
}
.ldd-home .trust-grid .col {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 22px;
}
.ldd-home .trust-grid .ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-deep);
  margin-bottom: 16px;
}
.ldd-home .trust-grid h3 { font-size: var(--bk-fs-xl); font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.ldd-home .trust-grid p { font-size: var(--bk-fs-base); line-height: 1.55; color: var(--muted); }

/* sec-head impilato: occhiello, titolo e paragrafo lungo, senza link a destra */
.ldd-home .sec-head--stack { display: block; }
.ldd-home .sec-sub {
  margin-top: 14px;
  max-width: 90ch;
  font-size: var(--bk-fs-lg);
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- NEWSLETTER ---------- */
.ldd-home .news { padding: 76px 0; }
.ldd-home .news-box {
  background: var(--band);
  color: var(--band-ink);
  border: 1px solid var(--band-line);
  border-radius: 22px;
  padding: 52px 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.ldd-home .news-box::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 260px;
  height: 260px;
  background-image: radial-gradient(circle at 14px 14px, rgba(28,146,207,.12) 4px, transparent 5px);
  background-size: 36px 36px;
  transform: rotate(8deg);
}
.ldd-home .news-box h2 {
  font-family: var(--bk-font-sans);
  font-weight: 900;
  font-size: var(--bk-fs-h2);
  letter-spacing: -.01em;
  line-height: 1.15;
}
/* Il tema forza il colore del titolo con !important a 3 classi di specificita':
   serve pari specificita' qui, altrimenti l'override sopra vince e il titolo
   resta bianco (invisibile) sulla banda chiara. */
.ldd-home .news .news-box h2 {
  color: var(--band-ink) !important;
}
.ldd-home .news-box p { color: var(--muted); margin-top: 14px; font-size: var(--bk-fs-lg); max-width: 42ch; }
.ldd-home .news-form { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.ldd-home .news-form input {
  flex: 1;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--band-line);
  color: var(--ink);
  border-radius: 11px;
  padding: 14px 16px;
  font-family: var(--bk-font-sans);
  font-size: var(--bk-fs-lg);
  outline: none;
}
/* Gate contrasto: #a1a1aa su bianco era 2.56:1 (sotto 4.5:1 testo reso). */
.ldd-home .news-form input::placeholder { color: var(--muted); }
.ldd-home .news-form input:focus { border-color: var(--blue); }
.ldd-home .news-form .btn-primary { white-space: nowrap; }
.ldd-home .news-note { font-size: var(--bk-fs-sm); color: var(--muted); margin-top: 12px; position: relative; z-index: 1; }

/* ---------- IL NOSTRO METODO ----------
   Quattro passi con il filo che li collega: il filo è decorativo e sparisce
   quando la griglia va a capo, altrimenti collegherebbe passi che non sono
   più sulla stessa riga. */
.ldd-home .metodo { background: var(--surface); }
.ldd-home .sec-head--center {
  display: block;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.ldd-home .sec-head--center .sec-sub { margin-left: auto; margin-right: auto; max-width: 68ch; }
.ldd-home .metodo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
/* Il filo va dal centro del primo cerchio al centro dell'ultimo: collega i
   quattro passi, che è il suo unico mestiere.
   Il mockup usava left/right:12%, tarati a occhio sulla sua griglia da 1220:
   sulla nostra il filo partiva dopo il 01 e sfilava a destra oltre il 04,
   finendo nel vuoto. I 41px non sono un numero magico: sono il padding dello
   step (18px) più il raggio del cerchio (46/2), cioè esattamente il centro del
   pallino. L'ultima colonna comincia al 75%, quindi il suo centro è a
   75% + 41px — da cui il right. */
.ldd-home .metodo-grid::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 41px;
  right: calc(25% - 41px);
  height: 1px;
  background: var(--border);
}
.ldd-home .metodo-grid .step { padding: 0 18px; }
.ldd-home .metodo-grid .num {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bk-fs-md);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}
.ldd-home .metodo-grid h3 { font-size: var(--bk-fs-xl); font-weight: 700; margin-bottom: 8px; }
.ldd-home .metodo-grid p { font-size: var(--bk-fs-base); line-height: 1.55; color: var(--muted); }

/* ---------- ASSISTENZA CLIENTI ---------- */
.ldd-home .care { background: var(--white); border-top: 1px solid var(--border); }
.ldd-home .care-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.ldd-home .care-intro h2 { margin: 12px 0 16px; }
.ldd-home .care-intro > p { font-size: var(--bk-fs-lg); line-height: 1.7; color: var(--muted); max-width: 46ch; }
.ldd-home .care-contact {
  border-top: 1px solid var(--border);
  margin-top: 24px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ldd-home .care-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--bk-fs-base);
  font-weight: 700;
  color: var(--ink);
}
.ldd-home .care-row svg { color: var(--red); flex: none; }
.ldd-home a.care-row:hover { color: var(--blue-deep); }
.ldd-home .care-list { list-style: none; margin: 0; padding: 0; }
.ldd-home .care-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.ldd-home .care-card:last-child { border-bottom: none; }
.ldd-home .care-num { font-size: var(--bk-fs-lg); font-weight: 600; color: var(--red); padding-top: 2px; }
.ldd-home .care-card h3 { font-size: var(--bk-fs-xl); font-weight: 700; margin-bottom: 7px; }
.ldd-home .care-card p { font-size: var(--bk-fs-base); line-height: 1.6; color: var(--muted); max-width: 60ch; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
  .ldd-home .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .ldd-home .themes { grid-template-columns: repeat(3, 1fr); }
  .ldd-home .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .ldd-home .news-box { grid-template-columns: 1fr; gap: 26px; }
  /* .certcard non ha una regola qui: sta sotto la vetrina a ogni larghezza,
     quindi non c'è un caso mobile da rimettere a posto. */
  .ldd-home .metodo-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .ldd-home .metodo-grid::before { display: none; }
  .ldd-home .care-grid { grid-template-columns: 1fr; gap: 36px; }
  .ldd-home .care-intro > p { max-width: 100%; }
  .ldd-home .rit-features { grid-template-columns: 1fr; }
}
/* FIX: between ~600px and ~1000px the inline nav (.ldd-mainnav) items wrap
   to a second row. Tighten the row's gap so it stays single-line; scoped
   to this band only so it doesn't touch the <600px mobile overlay menu or
   the >1100px desktop layout. */
@media (min-width: 601px) and (max-width: 1000px) {
  .ldd-header .ldd-header-inner { gap: 14px; }
  .ldd-header .ldd-mainnav .ldd-nav-list { gap: 10px !important; }
}
@media (max-width: 760px) {
  .ldd-home .trustbar .row { gap: 10px 24px; }
  .ldd-home .trustbar .t { font-size: var(--bk-fs-sm); }
  .ldd-home .trustbar .proof { gap: 12px; text-align: center; }
}
/* Il bug D1 ("Reso 14 giorni"/"Fattura sempre inclusa" toccavano il bordo su
   mobile, perché ".trustbar .row" viveva sullo stesso elemento di ".wrap" e la
   sua "padding: 16px 0" ne azzerava il gutter orizzontale) non può più
   verificarsi: dal Task 5 ".row" e ".proof" sono figli di ".wrap", non più lo
   stesso elemento, quindi non c'è più conflitto di specificità da correggere.
   Resta solo min-width:0, utile perché ".t" è un flex item e senza non si
   restringerebbe sotto la sua content-width nel flex-wrap. */
@media (max-width: 700px) {
  .ldd-home .trustbar .t { min-width: 0; }
}
/* I quattro vantaggi in colonna, non a capo liberamente.
   Con "justify-content: space-between" + flex-wrap, a 390px cadevano in un
   pattern casuale — misurato: "Spedizione" da sola, poi "Reso" e "Pagamenti"
   affiancati, poi "Fattura" da sola — con allineamenti a sinistra e a destra
   che sembravano un errore di impaginazione. Sono quattro promesse, e vanno
   lette come un elenco: una per riga, tutte allineate. La fascia si allunga di
   ~40px, e sono 40px ben spesi. */
@media (max-width: 620px) {
  .ldd-home .trustbar .row {
    flex-direction: column;
    align-items: flex-start;
    /* space-between della regola base qui non fa danni (l'asse verticale non ha
       spazio libero da distribuire), ma resterebbe in agguato: basterebbe una
       futura altezza su .row per farlo riemergere e sparpagliare le quattro
       righe. Si spegne dove si spegne la riga orizzontale. */
    justify-content: flex-start;
    gap: 9px;
  }
}
@media (max-width: 560px) {
  .ldd-home .wrap { padding: 0 18px; }
  .ldd-home .themes { grid-template-columns: repeat(2, 1fr); }
  .ldd-home .trust-grid { grid-template-columns: 1fr; }
  .ldd-home .hero-meta { gap: 20px; }
  .ldd-home .blk { padding: 44px 0; }
  .ldd-home .ldd-novita { padding-top: 0; }
  .ldd-home .news { padding: 52px 0; }
  .ldd-home .news-box { padding: 34px 24px; }
  .ldd-home .showcase-info { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ldd-header .ldd-cart-label { display: none; }
  /* FIX: .ldd-tools (flex, nowrap) overflowed the viewport at small widths,
     clipping .ldd-cart and causing ~7px horizontal scroll. Cart label is
     already hidden above; also tighten gaps/padding so the icon-only cart
     + account buttons fit with no horizontal overflow down to 360px. */
  .ldd-header .ldd-header-inner { gap: 10px; }
  .ldd-header .ldd-tools { gap: 8px; }
  .ldd-header .ldd-cart { padding: 0 10px; gap: 0; }
  .ldd-home .metodo-grid { grid-template-columns: 1fr; }
  .ldd-home .metodo-grid .step { padding: 0; }
  .ldd-home .care-card { grid-template-columns: 36px 1fr; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ldd-home *,
  .ldd-header * {
    animation-duration: .001ms !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .ldd-home .card:hover,
  .ldd-home .theme:hover,
  .ldd-home .btn-primary:hover { transform: none; }
}

/* ==========================================================================
   FOOTER (chrome, caricato su tutte le pagine) — banda chiara (Task 3 colori)
   ========================================================================== */
.ldd-footer {
  /* token duplicati rimossi: .ldd-footer e' nello scope del blocco tokens in
     cima al file (.ldd-home, .ldd-header, .ldd-footer), li eredita da li'. */
  background: var(--band);
  color: var(--muted);
  font-family: var(--bk-font-sans);
  border-top: 3px solid transparent;
  border-image: var(--bk-thread) 1;
}
.ldd-footer .ldd-foot-wrap {
  max-width: var(--ldd-w-chrome);
  margin: 0 auto;
  padding: 56px var(--ldd-gutter-x) 28px;
  /* border-box come .ldd-header-inner: con content-box il max-width escluderebbe
     i due gutter, il wrap sforerebbe di 2×gutter e le colonne del footer non
     cadrebbero sull'asse del logo. */
  box-sizing: border-box;
}
.ldd-footer .ldd-foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}
.ldd-footer .ldd-foot-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.ldd-footer .ldd-foot-logo img {
  width: auto;
  height: 54px;
  border-radius: 0;
  box-shadow: none;
  display: block;
}
.ldd-footer .ldd-foot-blurb {
  font-size: var(--bk-fs-base);
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 16px;
  max-width: 320px;
}
.ldd-footer .ldd-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ldd-footer .ldd-pay span {
  font-family: var(--bk-font-mono);
  font-size: var(--bk-fs-micro);
  letter-spacing: .04em;
  color: var(--muted);
  background: rgba(255,255,255,.8);
  border: 1px solid var(--band-line);
  border-radius: 6px;
  padding: 4px 8px;
}
.ldd-footer .ldd-foot-col h3 {
  font-family: var(--bk-font-sans);
  font-size: var(--bk-fs-sm);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--band-ink);
  margin: 0 0 14px;
}
.ldd-footer .ldd-foot-col a,
.ldd-footer .ldd-foot-col span {
  display: block;
  font-size: var(--bk-fs-base);
  color: var(--muted);
  text-decoration: none;
  margin: 0 0 9px;
}
.ldd-footer .ldd-foot-col a:hover { color: var(--blue-deep); }
.ldd-footer .ldd-foot-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--band-line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--bk-font-mono);
  font-size: var(--bk-fs-xs);
  color: var(--muted);
}
.ldd-footer a:focus-visible {
  outline: var(--bk-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (max-width: 900px) {
  .ldd-footer .ldd-foot-grid { grid-template-columns: 1fr 1fr; }
  .ldd-footer .ldd-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ldd-footer .ldd-foot-grid { grid-template-columns: 1fr; }
  .ldd-footer .ldd-foot-bottom { flex-direction: column; }
}

/* ==========================================================================
   CEROTTO CACHE EDGE — RIMUOVERE dopo il purge (2026-07-17)
   ==========================================================================
   La home nuova e' andata live oggi, ma l'edge di Aruba continua a servire
   l'HTML VECCHIO per ore (X-Aruba-Cache: HIT) e non e' purgabile da WordPress:
   solo dal pannello hosting. L'HTML vecchio ha .authban e .ldd-search--hero,
   che questo lavoro ha rimosso dal CSS: risultato, per chi apre la home dalla
   cache i tre riquadri "Set sigillati e verificati / Spedizione / Reso"
   diventano testo impilato e il campo di ricerca perde la sua forma.
   Queste regole vestono un markup che la home NUOVA non produce piu': sono
   inerti appena l'edge rigenera. Stanno qui per non lasciare il negozio
   sformattato nel frattempo, e vanno via col primo commit di pulizia dopo il
   purge — insieme al blocco gemello in search.css.
   ========================================================================== */
.ldd-home .authban { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ldd-home .authban .inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0; }
.ldd-home .authban .col { padding: 44px 32px; border-left: 1px solid var(--border); }
.ldd-home .authban .col:first-child { border-left: 0; }
.ldd-home .authban .ic {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--blue);
  margin-bottom: 16px;
}
.ldd-home .authban h3 { font-size: var(--bk-fs-2xl); font-weight: 700; margin-bottom: 8px; }
.ldd-home .authban p { font-size: var(--bk-fs-md); color: var(--muted); line-height: 1.55; }
@media (max-width: 760px) {
  .ldd-home .authban .inner { grid-template-columns: 1fr; }
  .ldd-home .authban .col { border-left: 0; border-top: 1px solid var(--border); }
  .ldd-home .authban .col:first-child { border-top: 0; }
}