@charset "UTF-8";
/* ==========================================================================
   اصلاحات موبایل — آخرین فایل CSS در هدر، پس برندهٔ تداخل‌هاست.
   به همین دلیل عمداً «لاغر» است: هرچه اینجا بنویسیم، هر فایلِ دیگری را
   خاموش می‌کند و اشکال‌زدایی را سخت می‌کند.

   ⚠ قانون این فایل: فقط چیزی اینجا می‌آید که *هیچ فایل دیگری نمی‌تواند
   بگوید*. چیدمانِ هدر موبایل (nav.css §۶)، کارت محصول (card.css) و صفحهٔ
   محصول (product.css) خودشان مدیای موبایل دارند و اینجا تکرار نمی‌شوند.
   تکرارشان قبلاً باعث شده بود دو فایل سرِ یک عدد دعوا کنند.
   ========================================================================== */

@media (max-width:900px){

  /* ارتفاع‌های هدر. --header-h در nav.css از این‌ها calc می‌شود
     (--mainbar-h + --navbar-h + --msearch-h)، پس خودِ --header-h اینجا
     بازنویسی نمی‌شود؛ اگر بشود، ستون‌های چسبانِ بقیهٔ صفحات زیر هدر گیر
     می‌کنند. .navbar در این عرض مخفی است ⇒ صفر. */
  :root{--topbar-h:34px;--mainbar-h:58px;--navbar-h:0px;--sp-7:32px;--sp-8:44px}

  body{font-size:15px}
  .container{padding:0 12px}
  .section{padding-block:var(--sp-6)}
  .section-head{margin-bottom:var(--sp-4)}

  /* تیترها عمداً کوچک نمی‌شوند: app.css از clamp() استفاده می‌کند
     (h1 ۲۵→۳۸ / h2 ۲۱→۳۰) و کفِ آن دقیقاً همان چیزی است که برای موبایل
     می‌خواهیم. نسخهٔ قبلی اینجا h1 را ۲۰px و h2 را ۱۸px می‌کرد و clamp را
     بی‌اثر می‌گذاشت — یعنی تیترِ موبایل از حداقلِ خوانایی هم پایین‌تر می‌رفت. */
  .lead{font-size:15px}
  .prose,.article{font-size:15px;line-height:2.05}
  .article h2{font-size:21px}
  .article h3{font-size:18px}

  /* نوار بالایی بیرون از هدرِ چسبان است و با اسکرول برای همیشه بالا می‌رود؛
     فقط لینک‌های منو حذف می‌شوند تا شماره تماس یک لمسِ راحت فاصله بگیرد. */
  .topbar-links{display:none}
  .topbar-start{gap:0}
  .topbar--nophone{display:none}

  /* ورود و علاقه‌مندی در نوار پایینِ موبایل هستند؛ در هدر فقط سبد می‌ماند.
     (چیدمان دو-ردیفهٔ هدر خودش در nav.css §۶ است و اینجا دست‌کاری نمی‌شود.) */
  .header-cta,.hact--user,.hact--wish{display:none}

  /* کارت‌های عمومی. کارتِ محصول (.pcard) عمداً اینجا نیست — اندازهٔ عنوان،
     قیمت و دکمه‌اش در card.css تعریف شده و تکرارِ اینجا فقط با آن می‌جنگید. */
  .card,.card-lg{padding:var(--sp-4);border-radius:var(--r-md)}

  /* لمس راحت‌تر: هدف کلیک حداقل ۴۴px */
  .btn{min-height:46px}
  .btn-sm{min-height:44px}
  .chip{padding:9px 15px}

  /* ریل‌ها لبه‌به‌لبه اسکرول شوند.
     ⚠ .sort-opts عمداً از این فهرست بیرون است: آیتمِ فلکسِ داخلِ .sortbar است و
     حاشیهٔ منفی، آن را ۲۴ پیکسل از ظرفش پهن‌تر می‌کرد و کل ستون را می‌ترکاند. */
  .rail,.chip-rail,.related-rail{
    margin-inline:-12px;padding-inline:12px;
  }
  /* هر ظرفِ اسکرول‌شونده باید بتواند باریک شود، وگرنه به‌جای اسکرولِ داخلی،
     والدش را پهن می‌کند و صفحه از عرض بیرون می‌زند. */
  .rail,.chip-rail,.related-rail,.coll-main,.coll-results,.sortbar{min-width:0;max-width:100%}

  .site-footer{margin-bottom:8px}
}

@media (max-width:639px){
  /* ستون‌های چندتایی به یک ستون */
  .coll-layout,.cart-layout,.blog-layout,.acct-layout{grid-template-columns:minmax(0,1fr)}
  .home-seo .prose{columns:1}

  /* نوار برندها در موبایل کمی جمع‌تر */
  .brand-logo{min-width:158px;height:74px;padding:10px 12px}
  .brand-mono{width:38px;height:38px;font-size:16px}

  /* .product-top زیر ۸۶۰px در product.css به flex-column تبدیل می‌شود تا
     ترتیبِ گالری → عنوان → باکس خرید درست دربیاید؛ اینجا grid-template-columns
     دادن آن را خنثی می‌کرد. */

  /* باکس‌های داخلی صفحه محصول */
  .p-section{padding:var(--sp-4) 14px}
  /* زیر هدر چسبان بنشیند — عدد ثابت با ارتفاع واقعی هدر هم‌خوان نبود */
  .p-tabs{border-radius:var(--r-md);padding:4px;top:var(--header-h)}
  .p-tabs a{padding:9px 14px;font-size:15px}

  .summary{border-radius:var(--r-md)}

  /* بردکرامب: به‌جای شکستن خط، افقی اسکرول شود */
  .breadcrumb{overflow-x:auto;min-width:0;scrollbar-width:none;white-space:nowrap}
  .breadcrumb::-webkit-scrollbar{display:none}
  .breadcrumb ol{flex-wrap:nowrap}

  /* صفحه‌بندی جمع‌وجور */
  .pagination a,.pagination span{min-width:38px;height:38px;font-size:15px}
}

/* زیر ~۶۰۰px ساعت کاری جا نمی‌شود و متن را می‌شکند؛ فقط شماره تماس می‌ماند */
@media (max-width:599px){
  :root{--topbar-h:32px}
  .topbar-start{display:none}
  .topbar .container{justify-content:center}
  .bc-links{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:400px){
  .product-grid{gap:10px}
  .btn-lg{min-height:48px;font-size:15px;padding:0 18px}
}

/* ---------- دکمه بازگشت به بالا ---------- */
.to-top{
  position:fixed;inset-block-end:24px;inset-inline-start:20px;z-index:870;
  width:44px;height:44px;border-radius:var(--r-full);
  display:grid;place-items:center;
  background:var(--c-surface);border:1px solid var(--c-line);
  color:var(--c-ink-2);box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all var(--t-slow);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top svg{width:20px;height:20px;stroke-width:2}

/* بالای نوار پایینِ موبایل بنشیند. عمداً !important ندارد و از --mbar-h
   (nav.css) می‌خواند: product.css با body:has(.sticky-buy.is-visible) این
   دکمه را بالاتر می‌برد و !important آن قاعده را از کار می‌انداخت. */
@media (max-width:900px){
  .to-top{inset-block-end:calc(var(--mbar-h,62px) + 12px + env(safe-area-inset-bottom,0px))}
}

/* ---------- صفحه‌های خیلی بلند: بهبود پیمایش ---------- */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .pcard{contain-intrinsic-size:270px}
}