/* =========================================================================
   TMD Demo — CĂUTARE, hero + stare "fără rezultate" (Faza D.10, 2026-07-30)
   Rescriere 1:1 cu referinte/predare/design/Cromatica Cautare.dc.html, pe
   tokenii Cromatica (var(--c-*)/var(--f-*)/var(--fs-*)/var(--sp-*), din
   assets/css/tokens.css). Componentele globale reutilizate (definite în
   assets/css/components.css, NU redefinite aici): .kicker, .breadcrumb,
   .buton, .card-efect, .efect-media, .efect-bara, .cards, .product-card.
   search.css (taburi / rânduri articol-pagină) e fișierul-pereche, încărcat
   după acesta.
   ========================================================================= */

/* ------------------------------------------------------------------------
   (1) HERO — eyebrow + H1 + linia de contorizare / lead + câmp de căutare.
   ------------------------------------------------------------------------ */
.search-hero { padding: 30px 0 0; }
.search-hero h1 {
  font-family: var(--f-titlu);
  font-weight: var(--fw-titlu);
  font-size: var(--fs-h1-mic);
  line-height: var(--lh-titlu);
  color: var(--c-ink);
  margin: 14px 0 0;
  text-wrap: pretty;
}
.search-hero__count {
  font-size: var(--fs-13-5);
  color: var(--c-ink-55);
  margin: 12px 0 0;
}
.search-hero__count strong { color: var(--c-ink); font-weight: var(--fw-semi); }
.search-hero__lead {
  font-size: var(--fs-14-5);
  line-height: var(--lh-corp-larg);
  color: var(--c-ink-55);
  margin: 14px 0 0;
  max-width: 600px;
}
.search-hero--empty { padding-bottom: 0; }

/* Câmp de căutare mare — reutilizat identic pe 404.php (p404.css). */
.search-bigfield {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 660px;
  margin: 26px 0 0;
}
.search-bigfield label.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.search-bigfield input[type="search"] {
  flex: 1 1 280px;
  min-width: 0;
  border: var(--bd-input);
  background: var(--c-surface);
  height: 56px;
  padding: 0 16px 0 46px;
  font-family: var(--f-corp);
  font-size: var(--fs-15);
  color: var(--c-ink);
}
.search-bigfield input[type="search"]:focus {
  outline: none;
  border-color: var(--c-plum);
  box-shadow: 0 0 0 3px var(--c-plum-glow);
}
.search-bigfield .icon-search {
  position: absolute;
  left: 16px;
  top: 28px;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--c-ink-40);
  pointer-events: none;
}
.search-bigfield .search-submit {
  flex: 0 0 auto;
  height: 56px;
  padding: 0 30px;
}
@media (max-width: 520px) {
  .search-bigfield .search-submit { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------------
   (2) „ÎNCEARCĂ" — chips de sugestii (stare fără rezultate).
   ------------------------------------------------------------------------ */
.search-try { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.search-try__label { font-size: var(--fs-11); letter-spacing: var(--ls-camp); font-weight: var(--fw-semi); color: var(--c-ink-40); text-transform: uppercase; }
.search-chip {
  background: var(--c-surface-warm);
  border: 1px solid var(--c-line-chip);
  color: var(--c-ink-70);
  padding: 8px 13px;
  font-size: var(--fs-13);
  transition: border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.search-chip:hover { border-color: var(--c-crimson); color: var(--c-crimson); }

/* ------------------------------------------------------------------------
   (3) HELP-CARDS (3, stare fără rezultate).
   ------------------------------------------------------------------------ */
.search-help__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.search-help-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  padding: 24px 26px 28px;
  color: inherit;
}
.search-help-card__kicker { font-size: var(--fs-10-5); letter-spacing: var(--ls-fisa); font-weight: var(--fw-semi); color: var(--c-amber); text-transform: uppercase; }
.search-help-card__title { font-family: var(--f-titlu); font-size: var(--fs-card-titlu-mic); line-height: var(--lh-titlu-card); color: var(--c-ink); margin-top: 12px; }
.search-help-card__text { font-size: var(--fs-13); line-height: var(--lh-corp-larg); color: var(--c-ink-55); margin-top: 8px; }

/* ------------------------------------------------------------------------
   (4) TITLU DE RAIL ("Cele mai căutate produse" / reutilizat pe 404.php).
   ------------------------------------------------------------------------ */
.rail-title {
  font-family: var(--f-titlu);
  font-weight: var(--fw-titlu);
  font-size: 30px;
  line-height: var(--lh-titlu-larg);
  color: var(--c-ink);
  margin: 0;
}