/* ------------------------------------------------------------------
   استایل بخش‌هایی که ما به صفحات اضافه می‌کنیم (کارت محصول، تابلوی نرخ
   هدر، حالت‌های بارگذاری).

   ⚠️ این فایل عمداً جدا از style.css امیرحسین است. قانون پروژه این است
   که به فایل‌های او دست نزنیم، تا هر بار نسخه جدید فرستاد بدون تعارض
   جایگزین شود.

   رنگ‌ها از پالت خودش برداشته شده: rgb(23, 66, 59)
   ------------------------------------------------------------------ */

:root {
  --zitto-green: rgb(23, 66, 59);
  --zitto-green-soft: rgba(23, 66, 59, 0.12);
  --zitto-mint: rgba(127, 255, 212, 0.479);
}

/* ---------- حالت‌های بارگذاری و خطا ---------- */
.zitto-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--zitto-green);
  font-size: 1.05rem;
}

.zitto-state button {
  margin-top: 12px;
  padding: 8px 22px;
  border: 2px solid var(--zitto-green);
  border-radius: 15px;
  background: transparent;
  color: var(--zitto-green);
  cursor: pointer;
  font: inherit;
}

.zitto-state button:hover {
  background: var(--zitto-green);
  color: #fff;
}

/* ---------- شبکه محصولات ---------- */
.zitto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

.zitto-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--zitto-green-soft);
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .3s, transform .3s;
}

.zitto-card:hover {
  box-shadow: 0 10px 24px rgba(23, 66, 59, .18);
  transform: translateY(-4px);
}

.zitto-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--zitto-green-soft);
}

.zitto-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zitto-card__badge {
  position: absolute;
  inset-inline-start: 10px;
  inset-block-start: 10px;
  background: var(--zitto-green);
  color: #fff;
  border-radius: 10px;
  padding: 3px 10px;
  font-size: .78rem;
}

.zitto-card__out {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .72);
  color: var(--zitto-green);
  font-weight: 700;
}

.zitto-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 18px;
  flex: 1;
}

.zitto-card__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--zitto-green);
}

.zitto-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: .8rem;
  color: rgba(23, 66, 59, .75);
}

.zitto-card__meta span {
  background: var(--zitto-green-soft);
  border-radius: 8px;
  padding: 2px 9px;
}

.zitto-card__desc {
  margin: 0;
  font-size: .85rem;
  line-height: 1.9;
  color: rgba(23, 66, 59, .8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zitto-card__price {
  margin-top: auto;
  padding-top: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--zitto-green);
}

.zitto-card__price small {
  font-size: .72rem;
  font-weight: 400;
  margin-inline-start: 4px;
}

/* ---------- صفحه‌بندی ---------- */
.zitto-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 32px 0 8px;
  color: var(--zitto-green);
}

.zitto-pager button {
  padding: 6px 18px;
  border: 2px solid var(--zitto-green);
  border-radius: 15px;
  background: transparent;
  color: var(--zitto-green);
  cursor: pointer;
  font: inherit;
}

.zitto-pager button:disabled {
  opacity: .35;
  cursor: default;
}

/* ---------- جزئیات یک محصول ---------- */
.zitto-detail {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: 32px;
  align-items: start;
}

.zitto-detail__media {
  border-radius: 15px;
  overflow: hidden;
  background: var(--zitto-green-soft);
  aspect-ratio: 1 / 1;
}

.zitto-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zitto-detail h1 {
  color: var(--zitto-green);
  font-size: 1.5rem;
  margin-bottom: 14px;
}

.zitto-breakdown {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: .9rem;
}

.zitto-breakdown th,
.zitto-breakdown td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--zitto-green-soft);
  text-align: start;
  color: var(--zitto-green);
}

.zitto-breakdown tr:last-child th,
.zitto-breakdown tr:last-child td {
  border-bottom: none;
  font-weight: 700;
  font-size: 1.05rem;
}

.zitto-back {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--zitto-green);
}

@media (max-width: 768px) {
  .zitto-detail { grid-template-columns: 1fr; }
  .zitto-grid { gap: 16px; }
}

/* ---------- نرخ طلا در هدر ---------- */
.nerkh p { margin: 0; }

/* ==================================================================
   اصلاح موبایل
   ------------------------------------------------------------------
   عمداً اینجاست نه در فایل‌های امیرحسین، تا با هر نسخه جدید فرانت
   باقی بماند (make-dev-pages.sh لینک همین فایل را دوباره تزریق می‌کند).
   ================================================================== */

/* تور ایمنی: هیچ سرریز افقی نباید صفحه را جابه‌جا کند.
   اول hidden بعد clip — مرورگر قدیمی hidden را می‌گیرد، جدید clip را.
   clip برخلاف hidden، position:sticky را خراب نمی‌کند. */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

@media (max-width: 767.98px) {
  /* جعبه نرخ در طرح اصلی برای عبارت کوتاه «نرخ طلا» بوده و ۲۲٪ نوار است.
     ما نرخ واقعی را داخلش می‌نویسیم که جا نمی‌شد. سهم اسلایدر تخفیف را
     کم و سهم نرخ را زیاد می‌کنیم. متن کوتاه‌شده را هم خود اسکریپت
     zitto-header-rate.js می‌سازد. */
  .banner-slidecontainer { width: 44%; }
  .nerkh {
    width: 42%;
    font-size: 11px;
    white-space: nowrap;
    /* چپ‌چین، چسبیده به لبه — مثل طرح اصلی. */
    text-align: left;
  }

  /* style.css قانون کلی p{text-align:justify} دارد که روی <p> داخل .nerkh
     هم می‌نشیند و در یک‌خطی به شروعِ راست برمی‌گردد. پس باید خود p را
     هدف گرفت، نه ظرفش. */
  .nerkh p { text-align: left; padding-left: 8px; }


  /* هدر در موبایل روی محتوا نیفتد.
     header در طرح اصلی position:fixed است و نیمه‌شفاف — روی دسکتاپ که
     بنر ۱۰۰vh است قشنگ است. در موبایل اما هدر سه‌ردیفه (~۱۵۵px) است و
     روی بنر کوتاه می‌افتد و بالایش را می‌خورد. در موبایل جریان عادی
     می‌شود و همه‌چیز زیر هم می‌نشیند. */
  header { position: static; }

  /* این حاشیه‌های بزرگ فقط برای خالی‌کردن جای هدرِ fixed بودند. */
  .darbare,
  .darbaree,
  .mahsolat-container { margin-top: 20px; }
  .rates-main { padding-top: 25px; }

  /* کارت محصول در گوشی: دو ستونی. تک‌ستونی هر کارت را بیش از یک صفحه
     بلند می‌کرد و دیدن ۹ محصول نُه بار اسکرول می‌خواست. */
  .zitto-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .zitto-card__title { font-size: .95rem; }
  .zitto-card__desc { display: none; }
  .zitto-card__price { font-size: 1rem; }
  .zitto-card__badge { font-size: .68rem; padding: 2px 7px; }

  /* بنر اصلی: عکس ۱۶۰۰×۹۰۰ (نسبت ۱۶:۹) در کادری با ارتفاع ۶۵vh و
     background-size:cover نمایش داده می‌شد، پس دو طرفش بریده می‌شد و
     «SAPPHIRE HALF SET» از کادر بیرون می‌افتاد. کادر را هم‌نسبت خود عکس
     می‌کنیم: نه برشی می‌ماند نه فضای خالی. */
  .cover {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center center;
  }
}

@media (max-width: 575.98px) {
  .banner-slidecontainer { width: 42%; }
  .nerkh { width: 44%; font-size: 10.5px; }
}

/* پاورقی صفحه نرخ‌ها می‌گوید «قیمت‌ها برای نمایش آماده شده‌اند و بعداً به
   API وصل می‌کنیم». از وقتی /api/v1/rates وصل شد این جمله غلط است و جلوی
   مشتری بد به نظر می‌رسد. فایل امیرحسین را دست نمی‌زنیم، پس اینجا پنهانش
   می‌کنیم. هر وقت خودش حذفش کرد، این قانون بی‌اثر می‌شود. */
.rates-note { display: none; }