@charset "UTF-8";
/* ==========================================================================
   بوش مرکزی — لایهٔ هویت بصری
   بعد از app/rtl/nav/card و CSS اختصاصی صفحه لود می‌شود و قبل از mobile.css،
   پس روی همه چیز غلبه دارد ولی قواعد موبایل همچنان آخرین حرف را می‌زنند.

   چیزی که این فایل عوض می‌کند:
     ۱. هدر سه‌طبقهٔ تیره  (نوار قرمز → مین‌بار زغالی → نوار دسته‌ها)
     ۲. تیتر بخش‌ها با خط‌کش قرمز زیر متن (به‌جای میلهٔ کناری)
     ۳. کارت محصول تیزگوشه با قیمت قرمز
     ۴. باندهای تیرهٔ ریل محصول (امضای سایت قدیم، مدرن‌شده)
     ۵. فوتر تیره
   ========================================================================== */

/* ══════════════════════════════════════════════════ ۱. هدر */

/* نوار بالا: نوار قرمز باریک — اولین چیزی که چشم می‌بیند */
.topbar{
  background:var(--c-primary);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.topbar a{color:rgba(255,255,255,.88)}
.topbar a:hover{color:#fff}
.topbar-links li+li::before{background:rgba(255,255,255,.35)}
.topbar-hours{color:rgba(255,255,255,.88)}
.topbar svg{opacity:.9}

/* مین‌بار: زغالی تیره */
.site-header{
  background:var(--c-dark);
  border-bottom:0;
  color:var(--c-on-dark);
}
.site-header.is-stuck{box-shadow:0 4px 18px rgba(0,0,0,.28)}

/* واژه‌نشان متنی است نه تصویری، تا فارسی با فونت خود سایت رندر شود و در
   موبایل هم دیده شود (قالب پایه زیر ۱۰۲۴ پیکسل مخفی‌اش می‌کرد و کنار
   نشانِ مربعی چیزی برای خواندن نمی‌ماند). */
.logo img{height:38px}
.logo{gap:9px;min-width:0}
.logo-text{display:flex;min-width:0}
.logo-text b{color:#fff;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo-text span{color:var(--c-primary);font-weight:700;font-size:11px;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1023px){
  .logo-text{display:flex}
  .logo-text b{font-size:14.5px}
  .logo-text span{font-size:10px}
}
/* زیر ۵۲۰ پیکسل نوار جستجو باید جا باز کند، پس فقط نام می‌ماند */
@media (max-width:520px){
  .logo{gap:7px}
  .logo-text span{display:none}
}
@media (max-width:380px){
  .logo-text{display:none}
}

.hamburger{color:var(--c-on-dark)}

/* جستجو روی زمینهٔ تیره */
.header-search input{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  color:#fff;
}
.header-search input::placeholder{color:var(--c-on-dark-2)}
.header-search input:focus{
  background:#fff;color:var(--c-ink);
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.25);
}
.header-search input:focus::placeholder{color:var(--c-ink-3)}
.header-search .search-icon{color:var(--c-on-dark-2)}
.header-search input:focus ~ .search-icon{color:var(--c-ink-3)}

/* اکشن‌های هدر */
.hact{color:var(--c-on-dark)}
.hact:hover{background:rgba(255,255,255,.08);color:#fff}
.hact-count{background:var(--c-primary);color:#fff;border-color:var(--c-dark)}

/* دکمهٔ تماس — قرصِ قرمزِ توپر، همان امضای سایت قدیم */
.btn-call.header-cta{
  --btn-bg:var(--c-primary); --btn-fg:#fff; --btn-bd:var(--c-primary);
  border-radius:var(--r-full);
  font-weight:700;
  box-shadow:0 4px 14px rgba(var(--c-primary-rgb),.35);
}
.btn-call.header-cta svg{color:#fff}
.btn-call.header-cta:hover{--btn-bg:var(--c-primary-dark);--btn-bd:var(--c-primary-dark)}

/* نوار دسته‌ها */
.navbar{
  background:var(--c-dark-2);
  border-top:1px solid rgba(255,255,255,.07);
}
.mainnav>li>a{color:var(--c-on-dark);font-weight:500}
.mainnav>li>a:hover,
.mainnav>li.is-open>a,
.mainnav>li>a[aria-current=page]{color:#fff}
.mainnav>li>a::after{background:var(--c-primary);height:3px}
.mainnav>li>a>svg{opacity:.65}
.nav-badge{background:var(--c-primary);color:#fff}

/* مگامنو روشن می‌ماند تا خوانا باشد، ولی خط بالایش قرمز است */
.mega{border-top:3px solid var(--c-primary)}
/* ستون برندها حذف شده — گرید باید تک‌ستونه شود وگرنه یک شکاف ۲۶۸ پیکسلی می‌ماند */
.mega-inner{grid-template-columns:minmax(0,1fr)}

/* ══════════════════════════════════════════════════ ۲. تیتر بخش‌ها */
/* میلهٔ کناری قالب پایه برداشته و جایش خط‌کش قرمزِ زیرِ متن می‌آید —
   همان چیزی که در صفحهٔ محصول سایت قدیم بود. */
.section-title::before{display:none}
.section-title{
  position:relative;
  padding-bottom:10px;
  letter-spacing:-.01em;
}
.section-title::after{
  content:'';position:absolute;bottom:0;inset-inline-start:0;
  width:46px;height:3px;background:var(--c-primary);border-radius:2px;
}
.section-head{align-items:flex-end}

/* ══════════════════════════════════════════════════ ۳. کارت محصول */
.pcard{border-radius:var(--r-md)}
@media (hover:hover){
  .pcard:hover{border-color:var(--c-primary);box-shadow:0 6px 20px rgba(18,22,29,.13);transform:translateY(-2px)}
}
.price-now{color:var(--c-primary)}
.price-now .unit{color:var(--c-ink-3)}
.pcard-flag.new{background:var(--c-accent)}
.pcard-flag.off,.pcard-flag.hot{background:var(--c-primary)}
.pcard-add{background:var(--c-primary)}
.pcard-add:hover{background:var(--c-primary-dark)}

/* کارت دسته در صفحه اصلی */
.cat-tile:hover{border-color:var(--c-primary)}

/* ══════════════════════════════════════════════════ ۴. باند ریل محصول */
/* سایت قدیم هر ریل را داخل یک نوار رنگیِ تمام‌عرض با تیتر سفید می‌گذاشت.
   نسخهٔ مدرنش: کارت تیرهٔ زغالی با تیتر سفید و خط‌کش قرمز. */
.sec-boxed{
  background:linear-gradient(180deg,var(--c-dark-2),var(--c-dark));
  border-color:rgba(255,255,255,.08);
  border-radius:var(--r-lg);
  box-shadow:0 6px 22px rgba(18,22,29,.18);
  padding:var(--sp-5) var(--sp-5) calc(var(--sp-5) + 4px);
}
.sec-boxed .section-title{color:#fff}
.sec-boxed .section-more{color:#fff;opacity:.85}
.sec-boxed .section-more:hover{opacity:1;color:#fff}
.sec-boxed .section-sub{color:var(--c-on-dark-2)}
/* کارت‌های داخل باند سفید می‌مانند تا تصویر محصول درست دیده شود */
.sec-boxed .pcard{border-color:transparent}

/* جعبهٔ مشاوره عمداً دست‌نخورده می‌ماند: گرادیان قرمزش (که حالا قرمز بوش است)
   کنار باندهای زغالیِ ریل‌ها تضاد خوبی می‌سازد. */

/* ══════════════════════════════════════════════════ ۵. فوتر تیره */
.site-footer{
  background:var(--c-dark);
  border-top:3px solid var(--c-primary);
  color:var(--c-on-dark-2);
}
.site-footer h4{color:#fff}
.footer-col a{color:var(--c-on-dark-2)}
.footer-col a:hover{color:#fff}
.footer-about p{color:var(--c-on-dark-2)}
.footer-social a{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.10);
  color:var(--c-on-dark);
}
.footer-social a:hover{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.footer-badges img{background:#fff;border-color:transparent}
/* بلوک شعبه در ستون تماس */
.foot-branch{display:flex;flex-direction:column;gap:3px;margin-bottom:14px}
.foot-branch b{color:#fff;font-size:13px;font-weight:700}
.foot-branch .tel-link{color:var(--c-primary);font-weight:700}
.foot-branch .muted{color:var(--c-on-dark-2);font-size:12.5px;line-height:1.9}
.footer-bottom{
  border-top-color:rgba(255,255,255,.09);
  color:var(--c-on-dark-2);
}
.footer-bottom a{color:var(--c-on-dark)}

/* ══════════════════════════════════════════════════ ۶. ریزه‌کاری‌ها */

/* قیمت در صفحه محصول: چیپ سبزِ خط‌چین — تنها بخشی از طراحی قدیم که
   واقعاً خوب بود و عمداً نگه داشته شده. */
.buybox .pricebox .now{
  color:var(--c-success);
  background:#ECFDF5;
  border:1px dashed #A7E8CB;
  border-radius:var(--r-md);
  padding:9px 13px;
  align-self:flex-start;
}
.buybox .pricebox .now .unit{color:#0B6B4A}
.buybox .pricebox .off{background:var(--c-primary);color:#fff}

/* جعبه استعلام قیمت — قرمز، چون همان «تماس بگیرید» سایت قدیم است */
.quotebox .qtitle{color:var(--c-primary)}
.quotebox .qphone{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.quotebox .qphone:hover{background:var(--c-primary-dark)}

/* جدول مشخصات فنی — راه‌راه ملایم برای خوانایی سطرها */
.spec-row:nth-child(odd){background:var(--c-line-2)}

/* بردکرامب و لینک‌های متنی */
.breadcrumb a:hover{color:var(--c-primary)}

/* نوار پایین موبایل */
.mobile-bar a.is-active{color:var(--c-primary)}
.mobile-bar .mb-count{background:var(--c-primary)}

/* دکمه بازگشت به بالا */
.to-top{background:var(--c-dark);color:#fff;border-color:var(--c-dark-3)}
.to-top:hover{background:var(--c-primary);border-color:var(--c-primary)}

/* فرم‌ها: فوکوس قرمز */
.input:focus,input:focus,select:focus,textarea:focus{border-color:var(--c-primary)}

/* ══════════════════════════════════════════════════ ۷. موبایل */
@media (max-width:1023px){
  /* در موبایل نوار دسته‌ها مخفی است، پس مین‌بار خودش کف هدر است */
  .site-header{box-shadow:0 2px 10px rgba(0,0,0,.22)}
}
@media (max-width:639px){
  .sec-boxed{padding:var(--sp-4);border-radius:var(--r-md)}
  .section-title::after{width:38px}
}