@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}
  /* لوگوی پهن نباید جای نوار جستجو را بخورد — کوتاه و قابل جمع‌شدن */
  .logo{gap:0;flex:0 1 auto;min-width:0}
  .logo img{height:32px;max-width:92px}
  .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}
  .pcard-quote{min-height:38px;font-size:12.5px}
  .pcard-price{min-height:46px;padding-top:8px}

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

  /* جدول‌ها و ریل‌ها لبه‌به‌لبه اسکرول شوند */
  .rail,.chip-rail,.brand-rail,.related-rail,.sort-opts{
    margin-inline:-12px;padding-inline:12px;
  }

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

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

@media (max-width:639px){
  /* ستون‌های چندتایی به یک ستون */
  .coll-layout,.cart-layout,.blog-layout,.acct-layout,.product-top{grid-template-columns: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}

  /* گالری محصول تمام‌عرض */
  .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}
}

@media (max-width:400px){
  .product-grid{gap:10px}
  .pcard-body{padding:9px 9px 11px}
  .btn-lg{min-height:48px;font-size:14.5px;padding:0 18px}
  .mobile-bar a{font-size:9.5px}
}

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

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