/* ==========================================================================
   Ricerca Brickollector — campo header + hero + pannello autosuggest.
   TUTTI i colori derivano dai token del tema (theme.json preset): cambiare la
   palette del sito aggiorna anche la ricerca senza toccare questo file.
   ========================================================================== */
.ldd-search {
  --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);
  --red: var(--bk-red);
  --green: var(--bk-green);
  /* tinte derivate dal blu del brand (color-mix → seguono il token) */
  --blue-bg: color-mix(in srgb, var(--blue) 8%, #fff);
  --blue-bd: color-mix(in srgb, var(--blue) 22%, #fff);
  --ring: 0 0 0 3px color-mix(in srgb, var(--blue) 35%, transparent);
  --panel-shadow: 0 1px 2px rgba(24,24,27,.06), 0 18px 40px -18px rgba(24,24,27,.42);
  position: relative;
  font-family: var(--bk-font-sans);
}

/* ---------- CAMPO NELL'HEADER ---------- */
.ldd-search-toggle { display: none; }
.ldd-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  /* FIX (backlog #4): flessibile invece che larghezza fissa, cosi' cede spazio
     alla nav prima di farla andare a capo. Floor 150px = ancora usabile. */
  flex: 0 1 290px;
  min-width: 150px;
  max-width: 290px;
  background: var(--white);
  border: 1px solid #d4d4d8;
  border-radius: 10px;
  padding: 0 12px;
  transition: box-shadow .15s, border-color .15s;
  box-sizing: border-box;
}
.ldd-search-form:focus-within {
  border-color: var(--blue);
  box-shadow: var(--ring);
}
.ldd-search-back { display: none; }
.ldd-search-ico { display: inline-flex; color: #71717a; flex: none; }
.ldd-search-ico svg { width: 17px; height: 17px; }
.ldd-search-input {
  border: 0;
  outline: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--bk-font-sans);
  font-size: var(--bk-fs-md);
  color: var(--ink);
  background: none;
  padding: 0;
}
/* Gate contrasto (chiusura ultimi 5 punti): #a1a1aa su bianco era 2.56:1, sotto il
   minimo 4.5:1 (testo) e 3:1 (icone UI interattive). --muted (#52525b) fa 7.4:1. */
.ldd-search-input::placeholder { color: var(--muted); opacity: 1; }
.ldd-search-input::-webkit-search-cancel-button { display: none; }
.ldd-search-clear {
  /* icona INTERATTIVA (svuota il campo): soglia 3:1, --muted la supera ampiamente. */
  border: 0; background: none; padding: 2px; cursor: pointer; color: var(--muted); flex: none;
  display: inline-flex; align-items: center;
}
.ldd-search-clear:hover { color: var(--ink); }
.ldd-search-clear svg { width: 15px; height: 15px; }
.ldd-search-kbd {
  /* Task 3 (gate contrasto): #a1a1aa su bianco era 2.56:1, sotto il minimo 4.5:1
     richiesto anche per elementi minori dentro .ldd-header. */
  /* Il badge tastiera resta monospaziato: e' un tasto, non testo. */
  font-family: var(--bk-font-mono); font-size: var(--bk-fs-micro); line-height: 1; color: var(--muted);
  border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; flex: none;
}

/* ---------- PANNELLO AUTOSUGGEST ---------- */
.ldd-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-width: 92vw;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
  overflow: hidden;
  z-index: 80;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: ldd-sg-in .13s ease;
}
@keyframes ldd-sg-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ldd-search-panel[hidden] { display: none; }

.ldd-sg-sect { padding: 6px; }
.ldd-sg-sect + .ldd-sg-sect { border-top: 1px solid var(--border); }
.ldd-sg-hd {
  font-family: var(--bk-font-sans); font-size: var(--bk-fs-micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 9px 12px 5px; font-weight: 600;
}
.ldd-sg-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
  text-decoration: none; color: inherit;
}
.ldd-sg-row.is-active, .ldd-sg-row:hover { background: var(--surface); }
.ldd-sg-th {
  width: 46px; height: 46px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border); flex: none; overflow: hidden;
  display: grid; place-items: center;
}
.ldd-sg-th img { width: 100%; height: 100%; object-fit: cover; }
.ldd-sg-no { font-family: var(--bk-font-sans); font-size: var(--bk-fs-sm); color: var(--muted); font-weight: 500; }
.ldd-sg-body { min-width: 0; flex: 1; }
.ldd-sg-nm {
  display: block; font-size: var(--bk-fs-base); font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink);
}
.ldd-sg-nm mark { background: none; color: var(--blue); font-weight: 800; }
.ldd-sg-meta {
  display: flex; align-items: center; gap: 7px; margin-top: 3px; min-width: 0;
  font-family: var(--bk-font-sans); font-size: var(--bk-fs-xs); color: var(--muted);
}
.ldd-sg-sku { font-family: var(--bk-font-mono); color: var(--ink); font-weight: 600; flex: none; }
.ldd-sg-tm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ldd-sg-dot { color: #d4d4d8; flex: none; }
.ldd-sg-meta .ldd-sg-pill { flex: none; }
.ldd-sg-pill {
  font-family: var(--bk-font-sans); font-size: var(--bk-fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; padding: 2px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--green) 14%, #fff);
  color: color-mix(in srgb, var(--green) 78%, #000);
}
/* Gate contrasto: --red PIENO come testo su questo fondo tinto misura 3.89:1
   (sotto 4.5:1). La pill gemella "Sigillato" sopra non ha lo stesso difetto: usa
   color-mix verso il nero (78%), non il verde pieno, ed e' gia' a ~6:1. Qui serve
   la variante scura esplicita, come --bk-red-700 nel badge account/nav logout. */
.ldd-sg-pill.rit {
  background: color-mix(in srgb, var(--red) 12%, #fff);
  color: var(--bk-red-700);
}
/* Stato "In arrivo" (inc/preorder.php): blu profondo (--bk-blue-700 =
   brand-blue-deep), lo stesso del badge di card e scheda. Mai il blu dei
   pulsanti: uno stato non e' un'azione. Il colore pieno come testo su fondo
   tinto passa la soglia 4.5:1 (il gate che ha bruciato --red e --green qui
   sopra): #12587f su #e7eef3 misura ~6.3:1. */
.ldd-sg-pill.pre {
  background: color-mix(in srgb, var(--bk-blue-700) 12%, #fff);
  color: var(--bk-blue-700);
}
.ldd-sg-price {
  margin-left: auto; flex: none; padding-left: 8px;
  font-family: var(--bk-font-sans); font-weight: 900; font-size: var(--bk-fs-2xl); color: var(--ink);
}

/* riga scorciatoia tema/anno */
.ldd-sg-short .ldd-sg-ic {
  width: 46px; height: 46px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--blue-bg); border: 1px solid var(--blue-bd); color: var(--blue);
}
.ldd-sg-short .ldd-sg-ic svg { width: 20px; height: 20px; }
.ldd-sg-cnt { display: block; margin-top: 2px; font-family: var(--bk-font-sans); font-size: var(--bk-fs-xs); color: var(--muted); }
.ldd-sg-go { margin-left: auto; color: var(--blue); flex: none; display: inline-flex; }
.ldd-sg-go svg { width: 18px; height: 18px; }

/* footer "vedi tutti" */
.ldd-sg-foot { border-top: 1px solid var(--border); padding: 2px; }
.ldd-sg-all {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; font-size: var(--bk-fs-base); font-weight: 700; color: var(--blue);
  text-decoration: none; border-radius: 10px;
}
.ldd-sg-all:hover, .ldd-sg-all.is-active { background: var(--blue-bg); }
.ldd-sg-all b { font-family: var(--bk-font-sans); }
.ldd-sg-all svg { width: 15px; height: 15px; }

/* stato vuoto */
.ldd-sg-empty { padding: 30px 22px; text-align: center; }
.ldd-sg-big {
  /* icona "nessun risultato": #a1a1aa su --surface faceva 2.33:1 (sotto 3:1 UI). */
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 12px;
  background: var(--surface); display: grid; place-items: center; color: var(--muted);
}
.ldd-sg-big svg { width: 26px; height: 26px; }
.ldd-sg-empty p { font-size: var(--bk-fs-base); color: var(--muted); line-height: 1.5; margin: 0 0 14px; }
.ldd-sg-empty p b { color: var(--ink); }
.ldd-sg-empty a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--bk-fs-sm); font-weight: 700; color: var(--blue); text-decoration: none; cursor: pointer;
}
.ldd-sg-empty a svg { width: 14px; height: 14px; }

/* skeleton loading */
.ldd-sg-sk { display: flex; align-items: center; gap: 12px; padding: 9px 12px; }
.ldd-sg-sk .ldd-sg-th { border: 0; }
.ldd-sg-sk .ldd-sg-th,
.ldd-sg-lines i {
  background: linear-gradient(90deg, var(--surface), var(--border), var(--surface));
  background-size: 200% 100%; animation: ldd-sg-sh 1.2s infinite; border-radius: 8px;
}
.ldd-sg-lines { flex: 1; }
.ldd-sg-lines i { display: block; height: 10px; border-radius: 5px; }
.ldd-sg-lines i:first-child { width: 70%; margin-bottom: 8px; }
.ldd-sg-lines i:last-child { width: 45%; }
@keyframes ldd-sg-sh { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* focus ring coerente */
body.search a:focus-visible,
body.search button:focus-visible,
.ldd-search a:focus-visible,
.ldd-search button:focus-visible,
.ldd-search input:focus-visible { outline: var(--bk-focus); outline-offset: 2px; border-radius: 6px; }

/* La variante "hero" del campo (.ldd-search--hero: campo grande col bottone
   Cerca) e' stata rimossa insieme alla ricerca dell'hero: il mockup della home
   non la prevede e la lente dell'header c'e' su ogni pagina. Vestiva un markup
   che non esiste piu' in nessun template — e con lei se n'e' andato l'unico
   bottone .ldd-search-submit del sito, che questa regola nascondeva. */

/* ---------- MOBILE/TABLET: icona lente → overlay a tutta larghezza ----------
   Breakpoint alzato a 1024px: tra 640 e 1024 il form inline rubava spazio alla
   nav, che andava a capo ("Chi siamo" su seconda riga). Con la lente a icona la
   nav resta su una riga fino a 1024px; sotto 600px scatta il menu hamburger. */
body.ldd-search-lock { overflow: hidden; }
@media (max-width: 1024px) {
  /* header: nascondi il form inline, mostra l'icona */
  .ldd-header .ldd-search-form { display: none; }
  .ldd-header .ldd-search-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 9px;
    background: var(--surface); border: 1px solid var(--border); color: var(--ink); cursor: pointer;
  }
  .ldd-header .ldd-search-toggle svg { width: 18px; height: 18px; }

  /* overlay aperto */
  .ldd-header .ldd-search.is-open {
    position: fixed; inset: 0; z-index: 200; background: var(--white);
    display: flex; flex-direction: column;
  }
  .ldd-header .ldd-search.is-open .ldd-search-toggle { display: none; }
  .ldd-header .ldd-search.is-open .ldd-search-form {
    display: flex; width: 100%; max-width: none; height: 56px; border: 0;
    border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none;
    padding: 8px 14px; gap: 10px; background: var(--white);
  }
  .ldd-header .ldd-search.is-open .ldd-search-back {
    display: inline-flex; align-items: center; flex: none;
    border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px;
  }
  .ldd-header .ldd-search.is-open .ldd-search-back svg { width: 22px; height: 22px; }
  .ldd-header .ldd-search.is-open .ldd-search-kbd { display: none; }
  .ldd-header .ldd-search.is-open .ldd-search-input { font-size: var(--bk-fs-xl); }
  .ldd-header .ldd-search.is-open .ldd-search-panel {
    position: static; width: auto; max-width: none; flex: 1; border: 0; border-radius: 0;
    box-shadow: none; max-height: none; animation: none;
  }
  .ldd-header .ldd-search.is-open .ldd-search-panel[hidden] { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .ldd-search-panel { animation: none; }
  .ldd-sg-sk .ldd-sg-th, .ldd-sg-lines i { animation: none; }
}

/* ==========================================================================
   RISULTATI RICERCA — loop a blocchi WooCommerce (.wc-block-product-template).
   Di default erano card senza bordo, titolo Anton centrato, immagine 400px:
   incoerenti col catalogo. Le uniformiamo allo stile card catalogo/home.
   Scoped a body.search: shop/categoria usano il catalogo faceted (catalog.css).
   ========================================================================== */
/* Larghezza risultati a --ldd-w-immersive (1840): i risultati ricerca sono liste
   di prodotti come il catalogo. Il blocco product-collection è `.alignwide` →
   prende wideSize (1240) del tema come max-width; si allarga solo quello. */
body.search main .wp-block-woocommerce-product-collection.alignwide {
  max-width: var(--ldd-w-immersive);
}
body.search .wc-block-product-template {
  display: grid !important;
  /* auto-fill minmax come catalog.css: 4-5 colonne, card compatte (era 3 fisse). */
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)) !important;
  gap: 18px;
  margin: 4px 0 0;
}
body.search .wc-block-product {
  width: auto !important;
  margin: 0 !important;
  border: 1px solid var(--wp--preset--color--border, #e4e4e7);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  text-align: left !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.search .wc-block-product:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(24, 24, 27, .18);
}
body.search .wc-block-product .wc-block-components-product-image {
  margin: 0;
  padding: 12px;
  background: #fff;
  border-bottom: 1px solid var(--wp--preset--color--border, #e4e4e7);
}
body.search .wc-block-product .wc-block-components-product-image img {
  width: 100%;
  height: 210px;
  object-fit: contain;
}
body.search .wc-block-product .wp-block-post-title {
  text-align: left !important;
  font-family: var(--bk-font-sans) !important;
  font-size: var(--bk-fs-base) !important;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none !important;
  letter-spacing: normal;
  padding: 13px 14px 0;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
body.search .wc-block-product .wp-block-post-title a {
  color: var(--wp--preset--color--contrast, #171717);
  text-decoration: none;
}
body.search .wc-block-product .wp-block-post-title a:hover { color: var(--bk-blue-600); }
/* Titolo legacy duplicato (Anton uppercase): nascosto, teniamo il post-title. */
body.search .wc-block-product .woocommerce-loop-product__title { display: none !important; }
body.search .wc-block-product .wc-block-components-product-price,
body.search .wc-block-product [class*="product-price"] {
  text-align: left !important;
  font-family: var(--bk-font-sans) !important;
  font-weight: 900;
  font-size: var(--bk-fs-2xl);
  color: var(--wp--preset--color--contrast, #171717);
  padding: 8px 14px 0;
  margin: 0;
}
body.search .wc-block-product .wp-block-woocommerce-product-button { margin-top: auto; }
body.search .wc-block-product .wp-block-button__link,
body.search .wc-block-product a.button {
  display: block;
  text-align: center;
  margin: 12px 14px 14px;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--bk-blue-600);
  color: #fff;
  font-family: var(--bk-font-sans);
  font-weight: 700;
  font-size: var(--bk-fs-base);
  text-decoration: none;
}
body.search .wc-block-product .wp-block-button__link:hover,
body.search .wc-block-product a.button:hover { background: var(--bk-blue-700); }
/* Titolo pagina risultati coerente con le altre pagine interne. */
body.search .wp-block-query-title,
body.search .woocommerce-products-header__title { margin-bottom: 4px; }

@media (max-width: 900px) {
  body.search .wc-block-product-template { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
  body.search .wc-block-product-template { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  body.search .wc-block-product .wc-block-components-product-image img { height: 150px; }
  body.search .wc-block-product .wp-block-post-title { font-size: var(--bk-fs-base) !important; padding: 11px 12px 0; }
}

/* Set non in vendita: "Esaurito" al posto del prezzo (regola in inc/price.php). */
.ldd-sg-price.is-na{ font-size:var(--bk-fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--red); }

/* ==========================================================================
   CEROTTO CACHE EDGE — RIMUOVERE dopo il purge (2026-07-17)
   ==========================================================================
   Gemello del blocco in home.css: l'edge di Aruba serve ancora l'HTML
   vecchio della home, che contiene il campo di ricerca dell'hero rimosso da
   questo lavoro. Senza queste regole quel campo resta senza forma finche' la
   cache non rigenera (purge solo dal pannello hosting). Inerti sulla home
   nuova, che non stampa piu' .ldd-search--hero. Via col primo commit di
   pulizia dopo il purge.
   ========================================================================== */
/* ---------- VARIANTE HERO (campo grande, chiaro) ---------- */
.ldd-search--hero { width: 100%; max-width: 560px; }
.ldd-search--hero .ldd-search-form {
  width: 100%; max-width: none; height: 58px; border-radius: 14px;
  padding: 0 8px 0 18px; border-color: var(--border);
  box-shadow: 0 1px 2px rgba(24,24,27,.06), 0 12px 30px -16px rgba(24,24,27,.25);
}
.ldd-search--hero .ldd-search-ico svg { width: 20px; height: 20px; }
.ldd-search--hero .ldd-search-input { font-size: var(--bk-fs-xl); }
.ldd-search--hero .ldd-search-kbd { display: none; }
.ldd-search--hero .ldd-search-submit {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 44px; padding: 0 18px; border: 0; border-radius: 10px;
  background: var(--blue); color: #fff; font-family: var(--bk-font-sans); font-weight: 700; font-size: var(--bk-fs-md);
  cursor: pointer;
}
.ldd-search--hero .ldd-search-submit:hover { background: color-mix(in srgb, var(--blue) 82%, #000); }
.ldd-search--hero .ldd-search-submit svg { width: 16px; height: 16px; }
.ldd-search--hero .ldd-search-panel { left: 0; right: auto; width: 100%; }
.ldd-search-submit { display: none; }

@media (max-width: 640px) {
  .ldd-search--hero .ldd-search-form { height: 52px; }
  .ldd-search--hero .ldd-search-submit { padding: 0 14px; }
  .ldd-search--hero .ldd-search-submit span { display: none; }
}