/* =============================================================================
   Zagros Tech — Layout (page-level) + responsive
   آخرین فایل لود — می‌تواند هر چیزی را override کند.
   ============================================================================= */

main { display: block; min-height: 60dvh; }
section { padding-block: var(--s-7); }
.section-head { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-6); }
.section-head .eyebrow { align-self: flex-start; }

/* ---------- Hero ---------- */
.hero {
  position: relative; padding-block: var(--s-8) var(--s-7); overflow: hidden;
  border-block-end: 1px solid var(--border);
}
/* لایه‌ی تصویر hero — اگر /assets/images/hero.webp موجود نبود، فقط گرادیان دیده می‌شود */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--surface) url('/assets/images/hero.webp') center / cover no-repeat;
  opacity: 0.22; filter: grayscale(0.3);
}
:root[data-theme='dark'] .hero::before { opacity: 0.3; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 60% at 80% 0%, var(--brand-tint), transparent 70%),
    radial-gradient(40% 50% at 10% 100%, var(--accent-tint), transparent 70%);
}
.hero h1 { font-size: var(--fs-3xl); max-width: 16ch; }
.hero p.lead { font-size: var(--fs-md); color: var(--text-dim); max-width: 46ch; margin-block: var(--s-4); }
.hero .hero-search { display: flex; gap: var(--s-2); max-width: 520px; margin-block-start: var(--s-5); }
.hero .hero-search .input { min-height: 52px; }
.hero .hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-block-start: var(--s-4); }
@media (min-width: 900px) { .hero h1 { font-size: var(--fs-4xl); } }

/* ---------- Category grid ---------- */
.cat-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
.cat-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 3 / 2; padding: var(--s-4); border-radius: var(--r-2);
  border: 1px solid var(--border); background: var(--surface-2); overflow: hidden; isolation: isolate;
}
.cat-card img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.cat-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,.72), transparent 65%); }
.cat-card .t { color: #fff; font-weight: 800; font-size: var(--fs-lg); }
.cat-card .c { color: rgba(255,255,255,.7); font-size: var(--fs-xs); }
.cat-card:hover { border-color: var(--brand); }
@media (min-width: 700px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

/* ---------- Product grid ---------- */
.pgrid { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 680px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .pgrid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- List page: filter sidebar + grid ---------- */
.list-layout { display: grid; gap: var(--s-5); }
.filters { display: flex; flex-direction: column; gap: var(--s-5); }
.filter-group { border-block-end: 1px solid var(--border); padding-block-end: var(--s-4); }
.filter-group h4 { font-size: var(--fs-sm); margin-bottom: var(--s-3); }
.list-toolbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.list-toolbar .count { color: var(--text-dim); font-size: var(--fs-sm); }
.list-toolbar .select { width: auto; min-width: 160px; margin-inline-start: auto; }
.filter-toggle { display: inline-flex; }
@media (min-width: 900px) {
  .list-layout { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  .filters { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-4)); }
  .filter-toggle { display: none; }
}
@media (max-width: 899px) {
  .filters {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: min(320px, 88vw);
    background: var(--surface); border-inline-end: 1px solid var(--border-strong);
    z-index: var(--z-drawer); padding: var(--s-5); overflow-y: auto;
    transform: translateX(-100%); transition: transform var(--dur-in) var(--ease);
  }
  [dir='rtl'] .filters { transform: translateX(100%); }
  .filters.is-open { transform: none; }
}

/* ---------- Product detail ---------- */
.pd-top { display: grid; gap: var(--s-6); }
.pd-summary { display: flex; flex-direction: column; gap: var(--s-4); }
.pd-summary h1 { font-size: var(--fs-2xl); }
.pd-meta { display: flex; gap: var(--s-3); flex-wrap: wrap; color: var(--text-dim); font-size: var(--fs-sm); }
.pd-variants { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pd-buy { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface); }
.pd-buy .row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.pd-section { padding-block: var(--s-6); border-block-start: 1px solid var(--border); }
.pd-section > h2 { font-size: var(--fs-xl); margin-bottom: var(--s-4); }
.pd-desc { max-width: 68ch; }
.pd-desc p { margin-block: var(--s-3); }
.breadcrumb { display: flex; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-dim); margin-block: var(--s-4); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb span::after { content: '/'; margin-inline-start: var(--s-2); color: var(--text-faint); }
.breadcrumb span:last-child::after { content: none; }
@media (min-width: 900px) {
  .pd-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .pd-buy { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-4)); }
}

/* ---------- Video ---------- */
.pd-video video { width: 100%; border-radius: var(--r-2); border: 1px solid var(--border); background: #000; }

/* ---------- Trust strip ---------- */
.trust-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
.trust-card { display: flex; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface); }
.trust-card svg { width: 28px; height: 28px; color: var(--brand); flex-shrink: 0; }
.trust-card h4 { font-size: var(--fs-base); margin-bottom: var(--s-1); }
.trust-card p { font-size: var(--fs-sm); color: var(--text-dim); }
@media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Checkout / quote form pages ---------- */
.form-page { display: grid; gap: var(--s-6); max-width: 900px; margin-inline: auto; }
.form-card { padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface); }
.summary-line { display: flex; justify-content: space-between; padding: var(--s-2) 0; font-size: var(--fs-sm); }
.summary-line.total { border-block-start: 1px solid var(--border); margin-block-start: var(--s-2); padding-block-start: var(--s-3); font-size: var(--fs-md); font-weight: 800; }
.form-row { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .form-page.two-col { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }

/* ---------- Account ---------- */
.account-layout { display: grid; gap: var(--s-5); }
.account-nav { display: flex; gap: var(--s-2); overflow-x: auto; }
.account-nav a { white-space: nowrap; padding: var(--s-2) var(--s-4); border-radius: var(--r-1); border: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-dim); }
.account-nav a.is-active { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
@media (min-width: 900px) {
  .account-layout { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .account-nav { flex-direction: column; }
}

/* ---------- OTP / auth modal specifics ---------- */
.otp-input { text-align: center; letter-spacing: 0.5em; font-family: var(--font-mono); font-size: var(--fs-xl); }

/* ---------- Cart line ---------- */
.cart-line { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-3); padding: var(--s-3) 0; border-block-end: 1px solid var(--border); }
.cart-line img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-1); }
.cart-line .nm { font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; }
.cart-line .pr { font-family: var(--font-mono); font-size: var(--fs-sm); }