/* ==========================================================================
   صفحه اختصاصی /products
   نکته: این فایل جدا از style.css نگه‌داری می‌شود چون فقط مخصوص این صفحه است
   و از همان متغیرهای رنگی (--gold, --gray-...) تعریف‌شده در style.css استفاده می‌کند.
   ========================================================================== */

/* ---------- سربرگ صفحه ---------- */
.products-page-hero{
  padding:150px 0 46px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 900px 380px at 50% -10%, rgba(201,162,75,.10), transparent 70%),
    var(--bg);
}
.back-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.86rem; font-weight:700; color:var(--gray-100);
  border:1px solid var(--line-strong); border-radius:999px;
  padding:9px 18px; margin-bottom:26px; transition:.25s;
}
.back-btn svg{width:16px;height:16px; fill:var(--gold-bright); transition:transform .25s ease;}
.back-btn:hover{color:var(--gold-bright); border-color:var(--gold-bright); background:rgba(201,162,75,.08);}
.back-btn:hover svg{transform:translateX(4px);}

.products-page-hero .eyebrow{margin-bottom:16px;}
.products-page-hero h1{
  font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:900; margin-bottom:12px;
  transition:opacity .25s ease;
}
.products-page-hero p{color:var(--gray-300); font-size:1rem; max-width:560px; transition:opacity .25s ease;}

/* ---------- تب دسته‌ها ---------- */
.cat-tabs-section{
  position:sticky; top:72px; z-index:80;
  background:rgba(10,10,11,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
html[data-theme="light"] .cat-tabs-section{background:rgba(250,248,243,.86);}
.cat-tabs{display:flex; gap:10px; padding:16px 0; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;}
.cat-tabs::-webkit-scrollbar{display:none;}
.cat-tab{
  flex:none; white-space:nowrap;
  padding:11px 22px; border-radius:999px; border:1px solid var(--line-strong);
  background:transparent; color:var(--gray-100); font-size:.9rem; font-weight:700;
  transition:.25s;
}
.cat-tab:hover{color:var(--gold-bright); border-color:var(--gold-bright);}
.cat-tab.active{
  background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#161207; border-color:transparent;
  box-shadow:0 8px 20px -8px rgba(201,162,75,.6);
}

@media (max-width:640px){
  .cat-tabs-section{top:60px;}
}

/* ---------- گرید مدل‌ها ---------- */
.models-section{padding:52px 0 120px;}
.models-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  transition:opacity .25s ease;
}
.models-grid.fading{opacity:.35;}
@media (max-width:980px){.models-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.models-grid{grid-template-columns:1fr;}}

.model-card{
  position:relative;
  background:var(--surface-2); border:1px solid var(--line); border-radius:16px;
  padding:22px; opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .5s ease, border-color .3s ease, box-shadow .3s ease;
  cursor:pointer; /* کل کارت قابل کلیک/تپ است */
}
.model-card.visible{opacity:1; transform:translateY(0);}
.model-card:hover{border-color:var(--gold-bright); box-shadow:var(--shadow-gold); transform:translateY(-6px);}
.model-card:focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px;}

/* ---------- دکمه راهنمای «مشخصات کامل» روی هر کارت ----------
   همیشه دیده می‌شود (نه فقط با هاور) چون روی موبایل هاور معنا ندارد؛ کاربر باید
   بدون نیاز به تست‌وخطا بفهمد کل کارت قابل‌لمس است. روی دسکتاپ با هاور کارت
   کمی برجسته‌تر/طلایی‌تر می‌شود تا حس تعامل را تقویت کند. */
.model-detail-btn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; margin-top:14px; padding:9px 0;
  border-radius:10px; border:1px solid var(--line-strong);
  background:transparent; color:var(--gray-100);
  font-size:.78rem; font-weight:700;
  transition:.25s; pointer-events:none; /* کلیک از خود کارت مدیریت می‌شود */
}
.model-detail-btn svg{width:15px;height:15px; fill:currentColor; transform:scaleX(-1);}
.model-card:hover .model-detail-btn,
.model-card:focus-visible .model-detail-btn{
  color:#161207; background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  border-color:transparent;
}

.model-photo{
  width:85%; aspect-ratio:1/1; height:auto; border-radius:12px; margin:0 auto 18px;
  background:radial-gradient(circle at 30% 20%, rgba(201,162,75,.16), transparent 65%), var(--bg-soft);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--line);
}
.model-photo svg{width:72%;height:72%;}
.model-photo img{width:100%;height:100%;object-fit:contain;border-radius:inherit;}
.model-card h4{font-size:1.02rem;font-weight:800;margin-bottom:8px;}
.model-card .model-feature{font-size:.85rem;color:var(--gray-300);margin-bottom:16px;min-height:2.6em;}
.model-price{
  display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  padding-top:14px;border-top:1px solid var(--line);
}
.model-price b{font-size:1.08rem;font-weight:900;color:var(--gold-bright);}
.model-price span{font-size:.74rem;color:var(--gray-500);}

/* ---------- حالت خالی / خطا (مثلاً وقتی در گام ۶ fetch واقعی fail کند) ---------- */
.models-empty{
  grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--gray-300);
  border:1px dashed var(--line-strong); border-radius:16px;
}
.models-empty p{margin-bottom:16px;line-height:1.8;}
.retry-btn{
  padding:10px 26px; border-radius:10px; border:1px solid var(--gold);
  background:transparent; color:var(--gold-bright); font-weight:700; font-size:.85rem;
  cursor:pointer; transition:background .25s ease, transform .25s ease;
}
.retry-btn:hover{background:rgba(201,162,75,.1); transform:translateY(-2px);}

@media (prefers-reduced-motion: reduce){
  .model-card{opacity:1; transform:none; transition:none;}
}

/* ==========================================================================
   صفحه‌ی کامل و مستقل محصول (/products/:id) — گام ۶.۲/۶.۳
   ----------------------------------------------------------------------------
   جایگزین حالت قبلیِ هاور/مودالِ کوچک روی همان صفحه. طراحی بصری (رنگ‌ها،
   جدول مشخصات، بلوک قیمت) عیناً از همان مودال قبلی گرفته شده (کلاس‌های pm-*)
   تا ظاهر آشنا بماند، فقط این‌بار داخل یک صفحه‌ی کامل و مستقل رندر می‌شود،
   نه یک لایه‌ی شناور روی صفحه‌ی قبلی.
   ========================================================================== */
.product-detail-hero{padding:150px 0 20px;}
.product-detail-section{padding:20px 0 110px;}
.product-detail-box{
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  padding:34px; display:grid; grid-template-columns:320px 1fr; gap:36px;
}
.product-detail-photo.pm-photo{
  height:320px; border-radius:14px; border:1px solid var(--line);
  background:radial-gradient(circle at 30% 20%, rgba(201,162,75,.16), transparent 65%), var(--bg-soft);
  display:flex; align-items:center; justify-content:center; padding:18px;
}
.product-detail-photo img{width:100%;height:100%;object-fit:contain;}
.product-detail-noimage{color:var(--gray-500); font-size:.9rem;}

.product-detail-info h1{font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:900; margin:10px 0 18px;}
.product-detail-info .eyebrow{margin-bottom:0;}

@media (max-width:820px){
  .product-detail-box{grid-template-columns:1fr;}
  .product-detail-photo.pm-photo{height:240px;}
}

/* ---------- بلوک قیمت + جدول مشخصات (کلاس‌های pm-* هم‌الگو با طراحی قبلی) ---------- */
.pm-feature{color:var(--gray-300); font-size:.92rem; margin-bottom:18px;}

.pm-price-block{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px;
  padding:16px 18px; border-radius:12px; background:var(--bg-soft); border:1px solid var(--line);
  margin-bottom:18px;
}
.pm-price{display:flex; flex-direction:column; gap:2px;}
.pm-price b{font-size:1.4rem; font-weight:900; color:var(--gold-bright); display:block;}
.pm-price small{font-size:.72rem; font-weight:700; color:var(--gold-bright);}
.pm-price span{font-size:.72rem; color:var(--gray-500);}
.pm-no-price b, .pm-no-price{color:var(--gray-100); font-size:1rem; font-weight:800;}

.pm-old-price{display:flex; align-items:center; gap:10px;}
.pm-strike{font-size:.85rem; color:var(--gray-500); text-decoration:line-through;}
.pm-badge{
  font-size:.72rem; font-weight:800; color:#161207;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  padding:4px 10px; border-radius:999px;
}

.pm-specs{margin-bottom:16px; border-top:1px solid var(--line);}
.pm-spec-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 2px; border-bottom:1px solid var(--line); font-size:.86rem;
}
.pm-spec-row span{color:var(--gray-300);}
.pm-spec-row b{font-weight:700; color:var(--gray-100);}
.pm-stock.pm-in{color:#7fd18c;}
.pm-stock.pm-out{color:#e0776b;}

.pm-desc{color:var(--gray-300); font-size:.88rem; line-height:1.9;}

/* ===================== گام ۵ — دکمه‌ی «افزودن به سبد» روی کارت محصول ===================== */
.model-actions{display:flex; align-items:center; gap:8px; margin-top:14px;}
.model-actions .model-detail-btn{margin-top:0; flex:1 1 auto;}
.model-add-cart-btn{
  flex:1 1 auto; padding:9px 0; border-radius:10px; border:1px solid var(--gold-bright);
  background:transparent; color:var(--gold-bright); font-size:.78rem; font-weight:800;
  transition:.2s;
}
.model-add-cart-btn:hover{background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#161207;}
.model-add-cart-btn.added{background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#161207;}