/* ==========================================================================
   Espart — Technician quick search (requires main.css)
   Figma: ۰۵ › تکنسین ۱–۴ · جستجوی کد فنی و نمای لیستی — دسکتاپ (1440)
   Mobile has no Figma frame: it follows the system's mobile patterns.
   ========================================================================== */

.tech { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; padding-bottom: 24px; }
.tech__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tech__title { font-weight: 700; font-size: 20px; line-height: 32px; color: var(--gray-900); }
.tech__badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px;
  background: var(--accent-50); color: var(--accent-900); font-weight: 700; font-size: 12px; line-height: 20px; white-space: nowrap;
}
.tech__badge .ic { width: 16px; height: 16px; }

/* ---------- List cards ---------- */
.lcards { display: flex; flex-direction: column; gap: 12px; }
.lcard {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
  grid-template-areas: "img info info" "stock stock price" "actions actions actions";
  align-items: center; gap: 12px;
  padding: 12px; border: 1px solid var(--gray-300); border-radius: 12px; background: var(--white);
}
.lcard__img { grid-area: img; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 8px; background: var(--gray-200); color: var(--gray-600); }
.lcard__img .ic { width: 28px; height: 28px; stroke-width: 1.5; }
.lcard__info { grid-area: info; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.lcard__meta { display: flex; align-items: center; gap: 8px; }
.lcard__code { font-weight: 500; font-size: 12px; line-height: 20px; color: var(--gray-700); }
.lcard__name { align-self: stretch; font-weight: 700; font-size: 14px; line-height: 24px; color: var(--gray-900); }
.lcard__name a:hover { color: var(--primary); }
.lcard__fit { display: flex; align-items: center; gap: 4px; font-weight: 500; font-size: 12px; line-height: 20px; color: var(--success-900); }
.lcard__fit .ic { width: 14px; height: 14px; stroke-width: 2.5; }
.lcard__stock { grid-area: stock; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lcard__wh { display: flex; align-items: center; gap: 4px; font-weight: 400; font-size: 12px; line-height: 20px; color: var(--gray-700); }
.lcard__wh .ic { width: 14px; height: 14px; color: var(--gray-600); }
.lcard__price { grid-area: price; display: flex; flex-direction: column; align-items: flex-start; }
.lcard__now { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.lcard__amount { font-weight: 900; font-size: 16px; line-height: 26px; color: var(--gray-900); }
.lcard__cur { font-weight: 500; font-size: 12px; line-height: 20px; color: var(--gray-700); }
.lcard__partner { font-weight: 400; font-size: 12px; line-height: 20px; color: var(--primary); white-space: nowrap; }
.lcard__actions { grid-area: actions; display: flex; align-items: center; gap: 8px; }
.lcard__actions .btn { flex: 1 1 auto; }

/* ==========================================================================
   ≥600 — tablets
   ========================================================================== */
@media (min-width: 600px) {
  .lcard { grid-template-columns: 80px minmax(0, 1fr) auto auto; grid-template-areas: "img info stock price" "img info actions actions"; }
  .lcard__img { width: 80px; height: 80px; }
  .lcard__img .ic { width: 32px; height: 32px; }
  .lcard__actions { justify-content: flex-end; }
  .lcard__actions .btn { flex: none; }
}

/* ==========================================================================
   ≥1200 — Desktop (design 1440)
   ========================================================================== */
@media (min-width: 1200px) {
  .tech { gap: 20px; padding-top: 32px; padding-bottom: 64px; }
  .tech__head { flex-wrap: nowrap; }
  .tech__title { font-size: 24px; line-height: 36px; }

  .tech .results { gap: 12px; }

  /* list row — exact Figma "PartCard / Layout=List" */
  .lcard { display: flex; align-items: center; gap: 16px; height: 106px; padding: 12px 16px; }
  .lcard__info { flex: 1 1 auto; }
  .lcard__stock { flex: 0 0 190px; }
  .lcard__price { flex: 0 0 130px; }
  .lcard__actions .btn { flex: none; }

  /* grid view (toolbar toggle) */
  .lcards[data-layout="grid"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .lcards[data-layout="grid"] .lcard { flex-direction: column; align-items: stretch; height: auto; }
  .lcards[data-layout="grid"] .lcard__img { width: 100%; height: 140px; }
  .lcards[data-layout="grid"] .lcard__stock, .lcards[data-layout="grid"] .lcard__price { flex: none; }
  .lcards[data-layout="grid"] .lcard__actions .btn { flex: 1 1 auto; }
}

@media (max-width: 599.98px) {
  .toolbar__dl { width: 36px; padding: 0; }
  .toolbar__dl span { display: none; }
}