/* =====================================================================
   STILARA — search.css (Група B): резултатите в търсачката на цял екран (#st-search).
   Самата рамка (.st-search, полето, бутоните) е в base.css — тук са редовете, състоянията и движението.
   ===================================================================== */

/* зареждане: жарава линия под полето; празно поле → поклащане */
.st-search.is-loading .st-search__form::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--st-accent),var(--st-accent-2)); transform-origin:0 50%;
  animation:st-sres-load 1.1s var(--st-ease-io) infinite;
}
@keyframes st-sres-load{ 0%{ transform:scaleX(0); opacity:1; } 70%{ transform:scaleX(1); opacity:1; } 100%{ transform:scaleX(1); opacity:0; } }
.st-search.is-shake .st-search__form{ animation:st-sres-shake .42s var(--st-ease); }
@keyframes st-sres-shake{ 20%,60%{ transform:translateX(-8px); } 40%,80%{ transform:translateX(8px); } }
.st-search__results .st-sres{ transition:opacity .2s var(--st-ease); }
.st-search__results.is-stale .st-sres{ opacity:.45; }

/* ---------- заглавен ред ---------- */
.st-sres__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:12px; margin-bottom:6px;
  border-bottom:1px solid var(--st-line); font-size:var(--st-fs-micro); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--st-bone-3);
}
.st-sres__count{ letter-spacing:.08em; color:var(--st-bone-2); }
.st-sres__label{ margin:0 0 14px; font-size:var(--st-fs-micro); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--st-bone-3); }

/* ---------- редове (6 резултата) ---------- */
.st-sres__list{ display:grid; grid-template-columns:minmax(0,1fr); column-gap:clamp(20px,3vw,40px); }
@media (min-width:900px){
  .st-sres__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .st-sres__item--all{ grid-column:1 / -1; }
}
.st-sres__item{ opacity:0; transform:translateY(14px); animation:st-sres-in .55s var(--st-ease) forwards; animation-delay:calc(var(--i,0) * 45ms); }
@keyframes st-sres-in{ to{ opacity:1; transform:none; } }

.st-sres__row{
  position:relative; display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:16px;
  padding:12px 12px 12px 10px; border-bottom:1px solid var(--st-line); border-radius:12px; transition:background var(--st-d) var(--st-ease);
}
@media (min-width:600px){ .st-sres__row{ grid-template-columns:64px minmax(0,1fr) auto 22px; } }
.st-sres__row::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:2px; border-radius:2px; background:var(--st-accent);
  transform:scaleY(0); transition:transform .35s var(--st-ease-spring);
}
.st-sres__row:hover,.st-sres__row.is-active{ background:rgba(241,236,228,.05); }
.st-sres__row:hover::before,.st-sres__row.is-active::before{ transform:scaleY(1); }
.st-sres__row:active{ background:rgba(241,236,228,.08); }

.st-sres__thumb{ display:block; width:64px; aspect-ratio:4/5; border-radius:10px; overflow:hidden; background:var(--st-ink-3); }
.st-sres__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--st-ease); }
.st-sres__row:hover .st-sres__thumb img,.st-sres__row.is-active .st-sres__thumb img{ transform:scale(1.08); }

.st-sres__info{ display:grid; gap:3px; min-width:0; }
.st-sres__cat{ font-size:var(--st-fs-micro); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--st-bone-3); }
.st-sres__name{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:clamp(.95rem,.3vw + .88rem,1.08rem); font-weight:500; line-height:1.3; }
.st-sres__name mark{ background:none; color:var(--st-accent); font-weight:600; }
.st-sres__price{ font-size:var(--st-fs-sm); white-space:nowrap; }
.st-sres__price .st-price{ gap:6px; }
.st-sres__go{ display:none; color:var(--st-bone-3); transition:transform .45s var(--st-ease-spring), color var(--st-d-fast); }
@media (min-width:600px){ .st-sres__go{ display:grid; place-items:center; } }
.st-sres__row:hover .st-sres__go,.st-sres__row.is-active .st-sres__go{ color:var(--st-accent); transform:translate(3px,-3px); }

/* „Всички резултати (N) →“ */
.st-sres__item--all{ margin-top:18px; }
.st-sres__all{
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:58px; padding:0 22px;
  border-radius:var(--st-radius-pill); background:var(--st-accent); color:var(--st-accent-ink); font-weight:700;
  transition:transform .45s var(--st-ease-spring), background var(--st-d), color var(--st-d);
}
.st-sres__all b{ font-weight:800; }
.st-sres__all .st-icon{ transition:transform .45s var(--st-ease-spring); }
.st-sres__all:hover,.st-sres__all.is-active{ background:var(--st-bone); color:var(--st-ink); }
.st-sres__all:hover .st-icon,.st-sres__all.is-active .st-icon{ transform:translateX(6px); }
.st-sres__all:active{ transform:scale(.98); }

/* ---------- празно поле: популярни марки ---------- */
.st-sres__brands{ display:flex; flex-wrap:wrap; gap:8px; }
.st-sres__brand{
  opacity:0; animation:st-sres-pop .5s var(--st-ease-spring) forwards; animation-delay:calc(var(--i,0) * 40ms);
  transition:background var(--st-d-fast), color var(--st-d-fast), box-shadow var(--st-d-fast), transform .4s var(--st-ease-spring);
}
.st-sres__brand:active{ transform:scale(.94); }
.st-sres__brand sup{ margin-left:2px; font-size:.66rem; color:var(--st-bone-3); transition:color var(--st-d-fast); }
.st-sres__brand.is-active{ background:var(--st-bone); color:var(--st-ink); box-shadow:none; }
.st-sres__brand:hover sup,.st-sres__brand.is-active sup{ color:rgba(13,12,11,.55); }
@keyframes st-sres-pop{ from{ opacity:0; transform:translateY(10px) scale(.9); } to{ opacity:1; transform:none; } }

/* ---------- няма резултати / грешка ---------- */
.st-sres--empty{ padding-block:6px; }
.st-sres__empty-title{ margin:0 0 6px; font-size:clamp(1.3rem,2vw + .8rem,2rem); font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.st-sres__empty-title b{ font-family:var(--st-f-serif); font-style:italic; font-weight:600; color:var(--st-accent); }
.st-sres__empty-text{ margin:0 0 16px; color:var(--st-bone-2); }
.st-sres__error{ margin:0; color:var(--st-danger); font-weight:500; }

@media (prefers-reduced-motion:reduce){
  .st-sres__item,.st-sres__brand{ animation:none!important; opacity:1!important; transform:none!important; }
  .st-search.is-loading .st-search__form::after{ animation:none!important; opacity:.8; transform:none; }
  .st-search.is-shake .st-search__form{ animation:none!important; }
}