/* صفحه‌های سخت‌افزار (فهرست و جزئیات محصول) — همهٔ مقادیر از توکن‌های dentival-tokens.css */
/* کف اندازهٔ متنِ ورودی‌ها: iOS Safari روی هر فیلدی زیر ۱۶px صفحه را بزرگ می‌کند؛ فقط فرم‌های این صفحه و فقط در موبایل تا چیدمانِ عمومی دست‌نخورده بماند */
@media (max-width: 767px) {
  .hw-inquiry-form input,
  .hw-inquiry-form select,
  .hw-inquiry-form textarea {
    font-size: 16px;
  }
}

/* ── فهرست محصولات ─────────────────────────────────────────────── */
/* چیدمان صریح جای auto-fit تا شمار ستون معلوم و کارت یتیم ردیف آخر قابل‌کنترل بماند */
.hw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

/* نردبان ستون‌ها: از ۶۰۰px دو ستون و از ۹۰۰px سه ستون */
@media (min-width: 600px) {
  .hw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .hw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ضدِ کارت یتیم: قلم تنهای ردیف آخر تمام‌عرض ولی هم‌اندازهٔ یک ستون و وسط‌چین */
@media (min-width: 600px) and (max-width: 899px) {
  .hw-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: calc((100% - var(--sp-6)) / 2);
  }
}

@media (min-width: 900px) {
  .hw-grid > :last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: calc((100% - 2 * var(--sp-6)) / 3);
  }
}

.hw-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.hw-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
}

.hw-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border-subtle);
}

.hw-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--sp-4);
}

/* نگه‌دارندهٔ محصول بدون تصویر — نباید آیکن تصویر شکسته دیده شود */
.hw-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--c-n-300);
  font-size: 2.4rem;
}

.hw-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
}

.hw-card-body h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.hw-card-body h3 a {
  color: inherit;
  text-decoration: none;
}

.hw-card-body h3 a:hover {
  color: var(--color-brand);
}

.hw-card-tagline {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.hw-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--sp-3);
}

.hw-price {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: var(--fs-sm);
}

.hw-price del {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.hw-price strong {
  color: var(--color-brand-ink);
  font-size: var(--fs-base);
}

.hw-price-ask {
  color: var(--color-text-muted);
  font-weight: var(--fw-bold);
}

/* ── مسیر صفحه ─────────────────────────────────────────────────── */
.hw-breadcrumb {
  padding: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
}

.hw-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
}

.hw-breadcrumb li + li::before {
  content: '‹';
  margin-inline-end: var(--sp-2);
  color: var(--color-border-strong);
}

.hw-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.hw-breadcrumb a:hover {
  color: var(--color-brand);
}

/* ── صفحهٔ جزئیات: تصاویر ──────────────────────────────────────── */
.hw-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

.hw-shot-main {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 340px;
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.hw-shot-main img {
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
}

.hw-shot-empty {
  flex-direction: column;
  gap: var(--sp-3);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  text-align: center;
  background: var(--color-surface-sunken);
  border-style: dashed;
}

.hw-shot-empty i {
  font-size: 2.6rem;
  color: var(--c-n-300);
}

.hw-shot-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.hw-shot-thumb {
  padding: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.hw-shot-thumb img {
  display: block;
  width: 100%;
  height: 62px;
  object-fit: cover;
}

.hw-shot-thumb:hover,
.hw-shot-thumb:focus-visible {
  border-color: var(--color-brand);
  outline: none;
}

.hw-shot-thumb.is-active {
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
}

/* ── صفحهٔ جزئیات: بلوک خرید ───────────────────────────────────── */
.hw-kicker {
  margin: 0 0 var(--sp-2);
  color: var(--color-brand);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.hw-buy h1 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-2xl);
  line-height: var(--lh-heading);
}

.hw-buy-lead {
  margin: 0 0 var(--sp-5);
  color: var(--color-text-muted);
}

.hw-buy-price {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-brand-subtle);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-md);
}

.hw-buy-price del {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.hw-buy-price strong {
  color: var(--color-brand-ink);
  font-size: var(--fs-xl);
}

.hw-buy-note {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.hw-buy-facts {
  display: grid;
  gap: 0;
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.hw-buy-facts li {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
}

.hw-buy-facts li + li {
  border-top: 1px solid var(--color-border-subtle);
}

.hw-buy-facts span {
  color: var(--color-text-muted);
}

.hw-buy-facts strong.is-ok {
  color: var(--c-success-600);
}

.hw-buy-facts strong.is-off {
  color: var(--c-warn-600);
}

.hw-buy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ── صفحهٔ جزئیات: معرفی و مشخصات ─────────────────────────────── */
.hw-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}

.hw-info-grid h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
}

.hw-info-text p {
  margin: 0 0 var(--sp-3);
  color: var(--color-text-muted);
  line-height: var(--lh-body);
}

.hw-spec-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--fs-sm);
}

.hw-spec-table th,
.hw-spec-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: start;
  border-bottom: 1px solid var(--color-border-subtle);
}

.hw-spec-table tr:last-child th,
.hw-spec-table tr:last-child td {
  border-bottom: 0;
}

.hw-spec-table th {
  width: 42%;
  color: var(--color-text-muted);
  font-weight: var(--fw-bold);
  background: var(--color-surface-sunken);
}

/* وضعیت هر دستگاه صادقانه نمایش می‌یابد: آماده، در راستی‌آزمایی یا در برنامه */
.hw-support-state {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin: 0;
}

.hw-state-badge {
  flex: 0 0 auto;
  padding: 0.15rem var(--sp-3);
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-pill);
  background: var(--color-success-surface);
  color: var(--color-success-ink);
  font-size: var(--fs-2xs);
  font-weight: 600;
  white-space: nowrap;
}

.hw-state-note {
  font-size: var(--fs-2xs);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* فرم استعلام محصول (پارشال hardware-inquiry-form.ejs) — پیام با کلاس سراسری `.lp-form-msg` و رنگ‌ها روی نقش‌های عمومی توکن، بی وابستگی به `--lp-*` */
.hw-inquiry-wrap {
  max-width: var(--container-narrow);
}

.hw-inquiry-intro {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.hw-inquiry-form {
  padding: var(--sp-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
}

.hw-inquiry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

/* «اختیاری» باید در برچسب دیده شود تا کاربر نداند فقط با رنگ کم‌رنگ‌تر */
.form-optional {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: 400;
}

.hw-inquiry-form .lp-form-msg {
  color: var(--color-text-muted);
}

.hw-inquiry-form .lp-form-msg.is-success {
  color: var(--color-success-ink);
}

.hw-inquiry-form .lp-form-msg.is-error {
  color: var(--color-danger-ink);
}

.hw-inquiry-note {
  margin: var(--sp-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

/* دکمهٔ ارسال تمام عرض می‌ماند تا روی موبایل هدف لمس بزرگ باشد و گرید را نشکند */
.hw-inquiry-form .btn[type="submit"] {
  width: 100%;
}

/* استان/شهر با کادر انتخاب استاندارد می‌مانند تا در مرورگرهای اندرویدی قابل تایپ نباشند و عرض گرید لنگ نکشند */
.hw-inquiry-form select {
  max-width: 100%;
}

/* ── واکنش‌گرا ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hw-detail-grid,
  .hw-info-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .hw-shot-main {
    min-height: 240px;
  }

  .hw-shot-main img {
    max-height: 280px;
  }
}

@media (max-width: 640px) {
  .hw-inquiry-grid {
    grid-template-columns: 1fr;
  }

  .hw-inquiry-form {
    padding: var(--sp-5) var(--sp-4);
  }
}

/* ── دستگاه‌های پشتیبانی‌شده (شش پرسشِ خرید) ───────────────────── */
/* هر دستگاه یک کارت است و پاسخ‌ها در فهرست تعریف تا در موبایل تک‌ستونه و اسکن‌شدنی بماند */
.hw-support-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 1000px) {
  .hw-support-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* کارت تنهای ردیف آخر تمام‌عرض می‌شود چون پاسخ‌هایش بلندترند */
  .hw-support-list > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.hw-support-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.hw-support-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.hw-support-head h3 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-lg);
  color: var(--color-text);
}

.hw-support-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  font-size: var(--fs-lg);
  color: var(--color-brand);
  background: var(--color-brand-subtle);
  border-radius: var(--radius-md);
}

.hw-support-what {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.hw-support-facts {
  margin: 0;
  display: grid;
  gap: var(--sp-3);
}

.hw-support-facts > div {
  padding-block-start: var(--sp-3);
  border-block-start: 1px dashed var(--color-border);
}

.hw-support-facts > div:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.hw-support-facts dt {
  margin-block-end: var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--color-brand-ink);
}

.hw-support-facts dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.95;
  color: var(--color-text);
}

/* جزئیات فنی از کلاس‌های سراسری پرسش‌های متداول استفاده می‌کند تا ظاهر یکسان بماند */
.hw-support-tech {
  margin-block-start: auto;
}

.hw-tech-list {
  margin: 0;
  padding-inline-start: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  /* پرسش‌های خرید بلند‌مطلب‌اند و هر سه در یک ردیف عمودی می‌نشینند؛ فاصلهٔ بین کارت و خط‌کشِ عمودیِ سؤالات روی موبایل فشرده می‌شود */
  .hw-support-list { gap: var(--sp-4); }

  .hw-support-card { gap: var(--sp-3); }
}

/* یادداشت شفافیت در صفحهٔ جزئیات: مرزِ یکپارچگی نرم‌افزاری روشن گفته می‌شود */
.hw-integration-note {
  margin-block-start: var(--sp-6);
  margin-block-end: 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--fs-sm);
  line-height: 2;
  color: var(--color-text-muted);
}

.hw-integration-note a {
  color: var(--color-brand);
  font-weight: 600;
}
/* حرکت کم‌تر: کارت محصول در حالت کاهش حرکت نه جابه‌جا می‌شود نه انیمیشن دارد */
@media (prefers-reduced-motion: reduce) {
  .hw-card {
    transition: none;
  }

  .hw-card:hover {
    transform: none;
  }
}