/* ─────────────────────────────────────────────────────────────
   صفحه جزئیات محصول
   ───────────────────────────────────────────────────────────── */

.product-top { padding-top: var(--space-5); }

.product-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-7);
  align-items: start;
  margin-top: var(--space-4);
}

/* در RTL ستون اول سمت راست می‌افتد. پروتوتایپ ۶ تصویر را چپ و
   اطلاعات را راست می‌خواهد، پس گالری به ستون دوم منتقل می‌شود.
   ترتیب DOM دست‌نخورده می‌ماند (تصویر قبل از متن، بی‌اثر برای صفحه‌خوان). */
/* min-width:0 لازم است: بدون آن حداقلِ عرضِ محتوای نوار بندانگشتی
   ستون گرید را پهن‌تر از صفحه می‌کند و در موبایل سرریز افقی می‌سازد. */
.product-hero__gallery { order: 2; min-width: 0; }

.product-hero__main {
  display: grid;
  place-items: center;
  aspect-ratio: 4/3;
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  overflow: hidden;
}
.product-hero__main img { max-height: 100%; object-fit: contain; }
.product-hero__placeholder { width: 64px; height: 64px; color: var(--gray-400); }

.product-hero__title { font-size: var(--fs-2xl); font-weight: var(--fw-black); }
.product-hero__title-en { font-size: var(--fs-md); color: var(--text-muted); margin-top: var(--space-1); }
.product-hero__tagline { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--navy-700); margin-top: var(--space-3); }
.product-hero__desc { margin-top: var(--space-3); line-height: var(--lh-normal); color: var(--text-body); }

/* ── گالری بندانگشتی ─────────────────────────────────────── */

.gallery-thumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.gallery-thumbs__arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--navy-800);
  transition: border-color var(--transition), color var(--transition);
}
.gallery-thumbs__arrow:hover { border-color: var(--orange-500); color: var(--orange-600); }
.gallery-thumbs__arrow svg { width: 16px; height: 16px; }

.gallery-thumbs__list {
  display: flex;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.gallery-thumbs__list::-webkit-scrollbar { display: none; }

.gallery-thumb {
  display: block;
  width: 88px;
  height: 66px;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--gray-50);
  overflow: hidden;
  transition: border-color var(--transition);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumb:hover { border-color: var(--border-strong); }
.gallery-thumb.is-active { border-color: var(--orange-500); border-width: 2px; }

.product-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

.product-hero__docs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.doc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  transition: border-color var(--transition), color var(--transition);
}
.doc-pill:hover { border-color: var(--orange-500); color: var(--orange-600); }
.doc-pill svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .product-hero { grid-template-columns: 1fr; }
}

/* ── نوار ویژگی ───────────────────────────────────────────── */

/* نوار مزیت‌ها داخل ستون اطلاعات (پروتوتایپ ۶):
   آیکون بالا، عنوان پررنگ، توضیح کم‌رنگ — با جداکننده‌ی عمودی بین آیتم‌ها */
.feature-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: var(--space-5);
  padding-block: var(--space-4);
  border-block: 1px solid var(--border);
}
.feature-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  flex: 1 1 130px;
  padding-inline: var(--space-3);
}
/* در RTL لبه‌ی inline-start سمت راست است، پس روی آیتم دوم به بعد
   می‌نشیند و دقیقاً بین دو آیتم می‌افتد. */
.feature-strip__item + .feature-strip__item { border-inline-start: 1px solid var(--border); }
.feature-strip__item svg { width: 26px; height: 26px; color: var(--orange-500); flex-shrink: 0; }
.feature-strip__item strong { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--navy-800); }
.feature-strip__item span { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

/* ── شناسنامه‌ی محصول ─────────────────────────────────────── */

.identity-list { margin-top: var(--space-5); }
.identity-list li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-2) 0;
  padding-inline-start: var(--space-5);
  border-bottom: 1px dashed var(--border);
}
.identity-list li:last-child { border-bottom: none; }
.identity-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--orange-500);
}
.identity-list span { font-size: var(--fs-sm); color: var(--text-muted); min-width: 120px; }
.identity-list strong { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--navy-800); }

/* ── تب‌ها ────────────────────────────────────────────────── */

.tabs__nav {
  display: flex;
  gap: var(--space-1);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: var(--space-5);
}
.tabs__nav::-webkit-scrollbar { display: none; }

.tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.tabs__btn svg { width: 17px; height: 17px; }
.tabs__btn:hover { background: var(--gray-100); color: var(--navy-800); }
.tabs__btn.is-active { background: var(--navy-800); color: var(--white); font-weight: var(--fw-medium); }

.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; animation: fade-in 220ms ease; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ── لیست کاربردها / بسته‌بندی / اسناد ───────────────────── */

.app-list li, .pack-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.app-list li:last-child, .pack-list li:last-child { border-bottom: none; }
.app-list__icon, .pack-list svg { width: 24px; height: 24px; color: var(--orange-500); flex-shrink: 0; margin-top: 2px; }
.app-list strong, .pack-list strong { display: block; color: var(--navy-800); font-weight: var(--fw-medium); }
.app-list span, .pack-list span { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }

.doc-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.doc-list li + li { margin-top: var(--space-2); }
.doc-list__title { flex: 1; font-size: var(--fs-sm); }
.doc-list__dl {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: var(--gray-100);
  transition: background var(--transition), color var(--transition);
}
.doc-list__dl:hover { background: var(--orange-500); color: var(--white); }
.doc-list__dl svg { width: 15px; height: 15px; }