/* ==========================================================================
   CARD PRODOTTO — componente unico del sito.
   Era dentro catalog.css scopata su .ldd-catalog: la home la rendeva con gli
   shortcode WooCommerce (card povere, senza prezzo/stato) e il risultato erano
   due card diverse. Qui le stesse regole vivono scopate su .ldd-cards, la
   classe del CONTENITORE griglia (`<div class="grid c3 ldd-cards">`), che ora
   emettono sia il catalogo (inc/catalog-block.php, inc/catalog-rest.php) sia la
   home (inc/home.php). Markup prodotto da ldd_render_cards() in
   inc/catalog-render.php.

   Spostamento, non redesign: valori identici a quelli che stavano in
   catalog.css. Se cambi qualcosa qui cambia OVUNQUE — è il punto.

   I token sono dichiarati su .ldd-cards perché la card deve reggersi da sola in
   qualunque pagina (la home non ha lo scope .ldd-catalog). .ldd-catalog e
   .ldd-home continuano a dichiarare i propri: nessuno dei due dipende da
   questo file, e le var qui sotto vincono per prossimità sull'albero.
   ========================================================================== */
.ldd-cards{
  --border:var(--wp--preset--color--border,#e4e4e7);
  --surface:var(--wp--preset--color--surface,#f4f4f5);
  --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);
  /* Nessun alias di famiglia qui: le due famiglie sono --bk-font-sans /
     --bk-font-mono nel :root di style.css. La card non ne dichiara di propri. */
}

/* .c3 è un nome storico: le colonne ora sono auto-fill (2 su tablet, 4 a 1440, 5 a
   1920+). Il nome resta per non toccare catalog.js né catalog-block.php, che lo emettono. */
.ldd-cards.grid.c3{ display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:20px; }
.ldd-cards .card{ border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; background:#fff; transition:box-shadow .18s,transform .18s; }
.ldd-cards .card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px -12px rgba(24,24,27,.18); }
.ldd-cards .thumb{ position:relative; flex:none; height:260px; background:#fff; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); padding:12px; box-sizing:border-box; overflow:hidden; }
/* perf-images.php avvolge l'<img> in <picture> (WebP): il figlio del flex e' il
   <picture>, non l'<img>, e un max-height:100% sull'<img> si risolve contro un
   <picture> alto "auto" -> nessun limite. Le foto verticali (eBay 9:16)
   sfondavano il riquadro e coprivano il titolo. Il <picture> prende l'intera
   area utile del riquadro e centra l'<img> come faceva .thumb; l'overflow:hidden
   sopra e' la rete: qualunque wrapper futuro non puo' piu' coprire il testo. */
.ldd-cards .thumb picture{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:0; }
.ldd-cards .thumb img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.ldd-cards .thumb .no{ font-family:var(--bk-font-sans); font-size:var(--bk-fs-h2); color:var(--muted); background:var(--surface); }
.ldd-cards .badge{ position:absolute; top:10px; left:10px; z-index:1; font-size:var(--bk-fs-micro); font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:4px 8px; border-radius:6px; background:var(--blue); color:#fff; display:flex; align-items:center; gap:5px; }
.ldd-cards .badge.rit{ background:var(--red); }
/* alone del pallino "sigillato": era in rgba() col verde LEGO vecchio (check-colors.mjs
   non lo vedeva perche' guardava solo gli hex, non le forme rgb()/rgba()). Allineato al
   verde brand attuale (--bk-green, 26,127,75), come il pallino gemello in home.css. */
.ldd-cards .badge .seal{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(26,127,75,.3); }
.ldd-cards .cbody{ padding:12px 13px 14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.ldd-cards .ctheme{ font-size:var(--bk-fs-micro); font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--blue); }
/* min-height = 2 righe di titolo, tenuto in em cosi' segue il font-size: con
   line-height 1.35 due righe fanno 2.7em (prima erano 14px/1.3 = 2.6em). Serve a
   far finire prezzo e bottone alla stessa altezza su card con titolo a 1 riga. */
.ldd-cards .cname{ font-size:var(--bk-fs-base); font-weight:700; line-height:1.35; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; }
.ldd-cards .cname a{ color:var(--ink); text-decoration:none; }
.ldd-cards .cspecs{ display:flex; gap:10px; font-family:var(--bk-font-sans); font-size:var(--bk-fs-xs); font-weight:600; color:var(--muted); align-items:center; }
.ldd-cards .cspecs b{ color:var(--ink); font-weight:600; }
.ldd-cards .cfoot{ display:flex; justify-content:space-between; align-items:center; padding-top:8px; border-top:1px solid var(--border); margin-top:auto; }
/* Il prezzo e' Lato 900, mai mono (il mono qui vale solo per codici e micro-label). */
.ldd-cards .price{ font-family:var(--bk-font-sans); font-weight:900; font-size:var(--bk-fs-2xl); color:var(--ink); }
/* Set senza prezzo/non in vendita: "Esaurito" al posto di €0,00. */
.ldd-cards .price-na{ font-size:var(--bk-fs-base); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--red); }
.ldd-cards .card.is-soldout .thumb{ opacity:.86; }
.ldd-cards .buy{ height:34px; padding:0 12px; border-radius:8px; background:var(--blue); color:#fff; font-weight:700; font-size:var(--bk-fs-base); text-decoration:none; display:inline-flex; align-items:center; }
.ldd-cards .buy:hover{ background:var(--blue-deep); }

/* ==========================================================================
   Stato "In arrivo" (preorder) — badge sulla thumb + riga di spedizione.
   Colore dello stato: blu profondo (--blue-deep = --bk-blue-700 =
   brand-blue-deep). MAI --blue (#1775ab), che e' il blu dei PULSANTI: uno stato
   non e' un'azione. Verde = parte subito, rosso = esaurito.
   Stesse regole del badge di scheda (.ldd-badge--preorder in product.css): li'
   e' scopato su .ldd-product, qui su .ldd-cards — i due fogli non convivono mai
   sulla stessa pagina. Il valore del colore sta in un solo posto, il token.
   Il markup lo produce ldd_preorder_badge_html() (inc/preorder.php), unica fonte.
   ========================================================================== */
.ldd-cards .ldd-badge--preorder{
  position:absolute; top:10px; right:10px; z-index:1;
  font-size:var(--bk-fs-micro); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:4px 8px; border-radius:6px;
  background:var(--blue-deep); color:#fff;
  display:flex; align-items:center;
}
/* La promessa di spedizione, su una riga sua sotto prezzo/bottone. */
.ldd-cards .cfoot{ flex-wrap:wrap; }
.ldd-cards .ceta{
  order:3; flex-basis:100%; margin-top:7px;
  font-size:var(--bk-fs-xs); font-weight:700; letter-spacing:.02em;
  color:var(--bk-green-700);
}
.ldd-cards .ceta--preorder{ color:var(--blue-deep); }

@media(max-width:820px){
  .ldd-cards.grid.c3{ grid-template-columns:repeat(2,1fr); }
  /* A due colonne il badge di stato affiancherebbe "Sigillato": va sotto. */
  .ldd-cards .ldd-badge--preorder{ top:auto; bottom:10px; right:10px; }
}
@media(max-width:520px){
  .ldd-cards.grid.c3{ grid-template-columns:1fr; }
}

/* Modificatore .ldd-cards-row (home): il catalogo ha una lista lunga e le colonne
   auto-fill vanno bene, la home ne mostra 6 fisse — con auto-fill l'ultima card
   restava orfana su una riga tutta sua. Qui le colonne sono divisori di 6, quindi
   le righe sono sempre piene a qualunque larghezza. */
.ldd-cards.ldd-cards-row.grid.c3{ grid-template-columns:repeat(6,1fr); }
/* Il prezzo e' l'unico valore che cambia scala tra le due griglie: nel catalogo
   sta in una lista fitta da scorrere (2xl), in home e nella riga "Ritirati" e'
   il richiamo della vetrina (3xl). Stessa card, stesso peso 900. */
.ldd-cards.ldd-cards-row .price{ font-size:var(--bk-fs-3xl); }
@media(max-width:1399px){
  .ldd-cards.ldd-cards-row.grid.c3{ grid-template-columns:repeat(3,1fr); }
}
/* Sotto gli 820px restano 2 colonne anche su telefono: nel catalogo la card e'
   sola su una riga perche' la lista e' lunga e la si scorre, in home le 6 card
   sono un'anteprima — a una colonna diventerebbero 6 schermate di scroll. */
@media(max-width:820px){
  .ldd-cards.ldd-cards-row.grid.c3{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .ldd-cards.ldd-cards-row .thumb{ height:180px; padding:8px; }
  .ldd-cards.ldd-cards-row .cbody{ padding:10px 10px 12px; gap:6px; }
  /* A due colonne la card sta in ~160px: prezzo e bottone sulla stessa riga si
     toccavano (999,00 € appiccicato ad "Aggiungi"). Il bottone va sotto, a tutta
     larghezza: piu' leggibile e piu' facile da centrare col pollice. */
  .ldd-cards.ldd-cards-row .cfoot{ flex-direction:column; align-items:stretch; gap:8px; flex-wrap:nowrap; }
  /* In colonna l'asse principale e' verticale: il flex-basis:100% della .ceta
     (pensato per la riga) diventava un'altezza del 100% -> ceta alta 135px e la
     pillola "Spedizione gratuita" sbattuta in una seconda colonna fuori dalla
     card. Qui la ceta e' una riga normale; l'ordine (prezzo, bottone, ceta,
     pillola) resta quello degli order gia' dichiarati. */
  .ldd-cards.ldd-cards-row .ceta{ flex-basis:auto; margin-top:0; }
  .ldd-cards.ldd-cards-row .ldd-cship{ margin-top:0; }
  .ldd-cards.ldd-cards-row .buy{ justify-content:center; }
  /* La meta scendeva da 12px a 11px per stare nella card stretta: ora la scala
     parte gia' da --bk-fs-xs (11.5px) ovunque, quindi qui resta solo il wrap. */
  .ldd-cards.ldd-cards-row .cspecs{ flex-wrap:wrap; gap:4px 8px; }
}

/* ==========================================================================
   Pillola "Lotto di N set" — card di catalogo e home.
   Markup da ldd_bundle_card_pill_html() (inc/bundle.php), unica fonte.
   Sta fra titolo e meta, non nel piede: il titolo arriva dal gestionale e su
   nove lotti su sedici nomina un set solo, quindi e' proprio accanto al titolo
   che il prezzo del lotto va spiegato.
   Colore: ambra, la terza tinta del marchio. Non blu (e' il colore dei bottoni
   e degli stati "In arrivo"), non verde (parte subito), non rosso (esaurito):
   il lotto non e' uno stato di vendita, e' cosa c'e' nella scatola.
   --bk-amber-700 su fondo ambra chiarissimo tiene il contrasto sopra 4.5:1.
   ========================================================================== */
.ldd-cards .ldd-clotto{
  display:inline-flex; align-items:center; gap:5px;
  align-self:flex-start;
  font-family:var(--bk-font-sans); font-size:var(--bk-fs-xs); font-weight:700;
  padding:2px 8px; border-radius:999px;
  background:var(--bk-amber-050); color:var(--bk-amber-700);
}
.ldd-cards .ldd-clotto svg{ width:13px; height:13px; display:block; flex:0 0 auto; }