@charset "UTF-8";
/* ==========================================================================
   اصلاحات موبایل — آخرین فایل CSS در هدر (SPEC §۴) تا برنده تداخل‌ها باشد.
   فقط چیزهایی که در فایل‌های دیگر جا نشدند یا باید بازنویسی شوند.
   ========================================================================== */

@media (max-width:900px){

  /* فاصله‌ها را جمع می‌کنیم تا صفحه اول موبایل بیشتر محتوا نشان دهد */
  /* .navbar در این عرض مخفی است ⇒ ارتفاع بخش چسبان فقط .mainbar است.
     --header-h در nav.css از همین دو مقدار calc می‌شود، پس اینجا بازنویسی
     نمی‌شود (اگر بازنویسی شود، calc از کار می‌افتد و ستون‌های sticky
     صفحات دیگر زیر هدر گیر می‌کنند). */
  :root{--topbar-h:34px;--mainbar-h:58px;--navbar-h:0px;--sp-7:32px;--sp-8:44px}
  body{font-size:14px}
  .container{padding:0 12px}
  .section{padding-block:var(--sp-6)}
  .section-head{margin-bottom:var(--sp-4)}

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

  /* هدر موبایل: یک ردیفِ ثابت.
     قبلاً .mainbar با flex-wrap دو ردیف می‌شد (جستجو زیر لوگو) و ارتفاع چسبان
     به ~۱۱۰px می‌رسید؛ هم فضای زیادی می‌خورد و هم هر تغییر ارتفاعِ ردیف دوم
     (مثلاً وقتی فونت دیر می‌رسید) کل صفحه را می‌پراند.
     حالا ارتفاع ثابت است و هیچ‌وقت عوض نمی‌شود. */
  .mainbar{height:var(--mainbar-h);gap:6px;flex-wrap:nowrap}
  /* لوگوی پهن نباید جای نوار جستجو را بخورد — کوتاه و قابل جمع‌شدن.
     ۳۲ → ۴۲ پیکسل (۳۰٪ بزرگ‌تر). max-width هم به همان نسبت زیاد شد
     وگرنه لوگوی عریض بلندتر نمی‌شود و فقط بریده می‌ماند. */
  .logo{gap:0;flex:0 1 auto;min-width:0}
  .logo img{height:42px;max-width:120px}
  .header-search{flex:1 1 auto;min-width:0;max-width:none}
  .header-search input{height:40px;padding-inline-start:36px;padding-inline-end:12px;font-size:13.5px}
  .header-search .search-icon{inset-inline-start:10px;width:18px;height:18px}
  .header-search .search-submit{display:none}
  /* ورود و علاقه‌مندی در نوار پایین موبایل هستند؛ در هدر فقط سبد می‌ماند */
  .header-cta,.hact--user,.hact--wish{display:none}
  .header-actions{gap:0;margin-inline-start:0}
  .hact{height:44px;padding:0 6px}
  .hact svg{width:24px;height:24px}
  .hact-count{top:2px;inset-inline-start:2px}

  /* تایپوگرافی */
  h1{font-size:20px}
  h2{font-size:18px}
  .lead{font-size:14.5px}
  .prose,.article{font-size:14.5px;line-height:2.05}
  .article h2{font-size:19px}
  .article h3{font-size:17px}

  /* کارت‌ها کمی جمع‌تر */
  .card,.card-lg{padding:var(--sp-4);border-radius:var(--r-md)}
  .pcard-body{padding:10px 11px 12px;gap:6px}
  .pcard-title{font-size:12.5px}
  .price-now{font-size:14.5px}
  .pcard-add{width:38px;height:38px}
  .pcard-add svg{width:18px;height:18px}
  /* ≥۴۴px برای لمس؛ عرض کامل و یکسان در همهٔ کارت‌ها */
  .pcard-quote{min-height:44px;font-size:12.5px;padding:0 8px;gap:5px;width:100%}
  .pcard-quote svg{width:15px;height:15px}
  .pcard-oos{min-height:44px;font-size:12px;padding:10px 8px}
  .pcard-price{min-height:46px;padding-top:8px}

  /* ⚠ در ستون باریکِ موبایل، قیمتِ nowrap کنار دکمهٔ گرد جا نمی‌شد و کارت‌ها
     ناهم‌قد و متن بریده می‌شد. هر سه حالت کارت روی موبایل ستونی می‌شوند تا
     دکمه همیشه تمام‌عرض و هم‌اندازه باشد و بلوک قیمت کف کارت بنشیند. */
  .pcard-price{flex-direction:column;align-items:stretch;gap:8px}
  .pcard-price > form,.pcard-price .pcard-add{width:100%}
  .pcard-add{width:100%;height:44px;border-radius:var(--r-md)}

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

  /* جدول‌ها و ریل‌ها لبه‌به‌لبه اسکرول شوند.
     .sort-opts عمداً از این فهرست بیرون است: داخل کادر .sortbar است، نه
     لبهٔ صفحه؛ حاشیهٔ منفی آن را از زیر پدینگِ کادر بیرون می‌زد. */
  .rail,.chip-rail,.brand-rail,.related-rail{
    margin-inline:-12px;padding-inline:12px;
    max-width:calc(100% + 24px);
  }

  /* عمق نوار پایین + نوار خرید چسبان */
  .site-footer{margin-bottom:8px}

  /* دکمه بازگشت به بالا کنار نوار پایین گیر نکند */
  .to-top{inset-block-end:74px !important}
}

@media (max-width:639px){
  /* ستون‌های چندتایی به یک ستون.
     minmax(0,…) نه 1fr خالی — با 1fr، ستون به «کمینه محتوا» باز می‌شد و
     ریل‌های افقی داخلش کل صفحه را پهن می‌کردند. */
  .coll-layout,.cart-layout,.blog-layout,.acct-layout,.product-top{grid-template-columns:minmax(0,1fr)}
  .coll-layout > *,.cart-layout > *,.blog-layout > *,.acct-layout > *,.product-top > *{min-width:0}
  .home-seo .prose{columns:1}

  /* نوار برندها در موبایل کمی جمع‌تر */
  /* ارتفاع کادر و تصویر با هم عوض می‌شوند: ۹۶ منهای ۲۰ پدینگ = ۷۶ */
  .brand-logo{min-width:158px;width:158px;height:96px;padding:10px 12px}
  .brand-logo img{height:76px}
  .brand-logo--text{width:auto;height:74px}
  .brand-mono{width:38px;height:38px;font-size:16px}

  /* گالری محصول تمام‌عرض */
  .gal-main{border-radius:var(--r-md)}
  .gal-thumb{width:60px;height:60px}

  /* باکس‌های داخلی صفحه محصول */
  .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:13px}

  /* خلاصه سفارش زیر لیست */
  .summary{border-radius:var(--r-md)}

  /* بردکرامب: فقط آخرین دو سطح تا خط نشکند */
  .breadcrumb{overflow-x:auto;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:13px}
}

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

/* ۳۲۰–۴۰۰px: ستون کارت ~۱۴۵px می‌شود؛ فاصله‌ها و متن یک پله ریزتر تا
   «تماس برای قیمت» در یک خط جا شود و دکمه‌ها هم‌عرض بمانند. */
@media (max-width:400px){
  .product-grid{gap:10px}
  .pcard-body{padding:9px 9px 11px}
  .pcard-quote{font-size:11.5px;padding:0 6px;gap:4px}
  .pcard-quote svg{width:14px;height:14px}
  .pcard-quote-label{font-size:11.5px}
  .price-now{font-size:13.5px}
  .price-now .unit{font-size:10.5px}
  .btn-lg{min-height:48px;font-size:14.5px;padding:0 18px}
  .mobile-bar a{font-size:9.5px}
}

/* ---------- سد نهایی سرریز افقی ----------
   mobile.css آخرین فایل است، پس این‌ها برندهٔ هر تداخلی می‌شوند.
   هیچ صفحه‌ای نباید document.scrollWidth > innerWidth بدهد. */
@media (max-width:900px){
  .container,.product-grid,.home-grid,.coll-results,.pcard,.pcard-body{min-width:0}
  .coll-head,.coll-seo,.sec-boxed,.p-section,.card,.surface{max-width:100%;overflow-wrap:anywhere}
  .breadcrumb,.p-tabs,.rail,.chip-rail,.brand-rail,.related-rail,.sort-opts,
  .gal-thumbs,.table-wrap,.compare-table{overscroll-behavior-inline:contain}
}

/* ---------- دکمه بازگشت به بالا ---------- */
.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}

/* ---------- صفحه‌های خیلی بلند: بهبود پیمایش ----------
   ارتفاع تخمینیِ کارت روی موبایل کمتر است. شرط prefers-reduced-motion
   برداشته شد: این یک اندازهٔ چیدمانی است، نه انیمیشن، و کاربرِ کم‌حرکت هم
   به نوار اسکرول درست نیاز دارد. `auto` یعنی اندازهٔ واقعیِ آخرین رندر. */
@media (max-width:900px){
  .pcard{contain-intrinsic-size:auto 300px}
}