@charset "UTF-8";
/* ==========================================================================
   بوش تهران — لایهٔ هویت برند
   ترتیب لود: app → rtl → nav → card → [CSS صفحه] → bosch → mobile

   این فایل بعد از همهٔ کامپوننت‌ها می‌آید، پس هر چیزی که «امضای بصری سایت»
   است اینجا نوشته می‌شود و بقیه فایل‌ها ساختار خالص می‌مانند.

   ⚠ mobile.css بعد از این لود می‌شود؛ هر قاعده‌ای که باید در موبایل هم برنده
     باشد یا باید در mobile.css نوشته شود یا اینجا با تخصصِ بالاتر بیاید.
     (بخش موبایلِ همین طرح در انتهای mobile.css است.)

   ── سه تصمیمِ هویتی ────────────────────────────────────────────────────
   ۱. نوارِ بالاییِ تیره. تنها سطحِ تیرهٔ ثابتِ سایت و اولین چیزی که کاربر
      می‌بیند؛ همان نقشی را دارد که تابلوی فروشگاه در بازار امیرکبیر.
   ۲. قابِ خاکستریِ عکس. عکس‌های محصولِ سایت قدیم پس‌زمینهٔ سفید دارند؛ روی
      کارتِ سفید، لبهٔ یخچالِ سفید ناپدید می‌شد.
   ۳. سبزآبی = اطمینان. چون ۵۸٪ محصولات قیمت ندارند، «موجود / اصل / گارانتی»
      باید سیگنالِ رنگیِ خودش را داشته باشد.
   ========================================================================== */


/* ══════════════════════════════════════════════════════════ ۱. نوار بالایی
   تنها سطحِ تیرهٔ ثابتِ سایت. چون .topbar بیرون از <header> و بیرون از جریانِ
   sticky است، تیره‌کردنش هیچ ریسکی برای هدرِ چسبان ندارد. */
.topbar{
  background:var(--c-dark);
  border-bottom:0;
  color:var(--c-on-dark-2);
}
.topbar a{color:var(--c-on-dark-2)}
.topbar a:hover{color:#fff}
.topbar-hours{color:var(--c-on-dark-2)}
.topbar-hours svg{color:var(--c-on-dark-2)}
/* آیکن تلفن قرمز می‌ماند: تنها لکهٔ رنگ روی نوار تیره */
.topbar svg{color:var(--c-primary)}
.topbar-contact a{color:#fff;font-weight:500}
.topbar-contact a:hover{color:#fff}
.topbar-links li+li::before{background:rgba(255,255,255,.18)}
.topbar a:focus-visible{outline-color:#fff}


/* ═══════════════════════════════════════════════════════════════ ۲. هدر */
/* خطِ باریکِ قرمز زیرِ هدر — امضای برند، بدون اشغال ارتفاع */
.site-header{border-bottom:1px solid var(--c-line)}
.site-header.is-stuck{box-shadow:var(--sh-1)}
.header-search input{background:var(--c-bg);border-color:transparent}
.header-search input:hover{border-color:var(--c-line)}
.header-search input:focus{background:var(--c-surface);border-color:var(--c-primary)}
.hact-count{background:var(--c-primary)}


/* ════════════════════════════════════════════════════════ ۳. کارت محصول
   ترتیب اطلاعات: قابِ عکس → نام → کد مدل → وضعیت اعتماد → قیمت → دکمه */
.pcard{border-radius:var(--r-lg);border-color:var(--c-line-2)}
@media (hover:hover){
  .pcard:hover{border-color:var(--c-line);box-shadow:var(--sh-2)}
}

/* قابِ خاکستریِ عکس — عکس‌های پس‌زمینه‌سفیدِ لوازم خانگی روی این زمینه
   لبه پیدا می‌کنند. حاشیهٔ داخلی هم می‌گذاریم تا محصول به لبه نچسبد. */
.pcard-img{
  background:var(--c-panel);
  border-radius:var(--r-md);
  margin:8px 8px 0;
  padding:10px;
}
.pcard-img img{mix-blend-mode:multiply}
.pcard.is-oos .pcard-img{background:var(--c-line-2)}

/* برچسب‌ها — گوشهٔ قابِ عکس، نه گوشهٔ کارت */
.pcard-flags{inset-block-start:16px;inset-inline-start:16px}
.pcard-flag{border-radius:var(--r-sm);font-weight:700;letter-spacing:0}
.pcard-flag.new{background:var(--c-trust);color:#fff;border-color:var(--c-trust)}
.pcard-flag.hot{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}
.pcard-quick{inset-block-start:16px;inset-inline-end:16px}

/* کدِ مدل به‌صورت چیپ — خریدارِ لوازم خانگی با کد مدل جستجو می‌کند
   (SMS46MI01B)، پس باید خوانا و قابلِ کپیِ چشمی باشد. */
.pcard-sku{
  background:var(--c-bg);
  border:1px solid var(--c-line-2);
  border-radius:var(--r-sm);
  padding:2px 8px;
  font-weight:500;
  color:var(--c-ink-2);
  letter-spacing:.02em;
  unicode-bidi:isolate;
}

/* خطِ اعتماد — جایگزینِ چیزی که در سایتِ تک‌رنگ اصلاً وجود نداشت */
.pcard-trust{
  display:flex;align-items:center;gap:5px;
  margin-block-start:2px;
  font-size:15px;font-weight:500;line-height:1.6;
  color:var(--c-success);
}
.pcard-trust svg{width:15px;height:15px;flex:none;stroke-width:2}
.pcard.is-oos .pcard-trust{color:var(--c-ink-2)}

/* خطِ مویی بالای بلوکِ قیمت — قیمت را از متن جدا می‌کند */
.pcard-foot{border-block-start:1px solid var(--c-line-2);padding-block-start:10px;margin-block-start:auto}
.pcard .price-now{font-size:21px;letter-spacing:-.01em}

/* دکمهٔ کارت رنگش را از وضعیتِ محصول می‌گیرد.
   ⚠ همچنان یک لینکِ ساده است (نه فرم): صفحهٔ دستهٔ ۲۴تایی هیچ <form> اضافه
     و هیچ توکنِ CSRF اضافه‌ای در DOM ندارد. فقط برچسب و رنگ عوض می‌شود تا
     کاربر پیش از کلیک بداند آن‌طرف «خرید» است یا «تماس». */
.pcard-cta--go{
  background:var(--c-primary);border-color:var(--c-primary);color:#fff;
  border-radius:var(--r-md);font-weight:700;
}
@media (hover:hover){
  .pcard-cta--go:hover{background:var(--c-primary-dark);border-color:var(--c-primary-dark);color:#fff}
}
/* استعلامی → سبزآبی (تماس، نه خرید) */
.pcard.is-quote .pcard-cta--go{background:var(--c-trust);border-color:var(--c-trust)}
@media (hover:hover){
  .pcard.is-quote .pcard-cta--go:hover{background:var(--c-trust-dark);border-color:var(--c-trust-dark)}
}
/* ناموجود → خنثی، تا با محصولِ قابلِ‌خرید اشتباه نشود */
.pcard.is-oos .pcard-cta--go{
  background:var(--c-surface);border-color:var(--c-line);color:var(--c-ink-2);
}
@media (hover:hover){
  .pcard.is-oos .pcard-cta--go:hover{background:var(--c-bg);border-color:var(--c-ink-3);color:var(--c-ink)}
}
.pcard-cta svg{width:17px;height:17px;flex:none;stroke-width:1.9}


/* ═════════════════════════════════════════════════════ ۴. عنوانِ بخش‌ها
   خطِ کوتاهِ قرمز بالای تیتر — ریتمِ بصریِ تکرارشوندهٔ صفحه اصلی و دسته */
.section-head h2,
.sec-title,
.home-sec > h2{position:relative}
.section-head h2::before,
.sec-title::before,
.home-sec > h2::before{
  content:"";display:block;
  width:34px;height:3px;border-radius:2px;
  background:var(--c-primary);
  margin-block-end:10px;
}


/* ═══════════════════════════════════════════════════ ۵. قیمت و استعلام */
.price-now{color:var(--c-ink);font-weight:700}
.price-now .unit{color:var(--c-ink-2);font-weight:400}
.price-old{color:var(--c-ink-3)}
.price-off{background:var(--c-primary);color:#fff;border-radius:var(--r-sm)}

/* باکسِ استعلام — سبزآبی، نه قرمز. «تماس بگیر» یک اقدامِ کم‌ریسک است و
   نباید هم‌وزنِ بصریِ «خرید» باشد. */
.quotebox{
  background:var(--c-trust-soft);
  border:1px solid rgba(var(--c-trust-rgb),.22);
  border-radius:var(--r-lg);
}
.quotebox .qtitle{color:var(--c-trust-dark)}
.quotebox .qphone{
  background:var(--c-trust);color:#fff;border-color:var(--c-trust);
  border-radius:var(--r-md);
}
.quotebox .qphone:hover{background:var(--c-trust-dark);border-color:var(--c-trust-dark)}


/* ═══════════════════════════════════════════════════ ۶. سیگنالِ اطمینان */
.trust-bar{background:var(--c-surface);border-radius:var(--r-lg);border:1px solid var(--c-line-2)}
.trust-bar svg,
.trust-item svg{color:var(--c-trust)}
/* متنِ سبزآبی روی زمینهٔ سبزآبیِ روشن باید نسخهٔ تیره باشد (۶٫۱۳:۱)،
   وگرنه ۴٫۱۴:۱ می‌شود و AA رد می‌شود. */
.badge-stock,
.stock-in,
.in-stock{color:var(--c-success);background:var(--c-trust-soft)}
.alert-success{background:var(--c-trust-soft);border-color:rgba(var(--c-trust-rgb),.25);color:var(--c-trust-dark)}


/* ═════════════════════════════════════════════════ ۷. جدول مشخصات فنی */
.spec-row:nth-child(odd){background:var(--c-bg)}
.specs-group > h3{
  color:var(--c-ink);
  border-inline-start:3px solid var(--c-trust);
  padding-inline-start:10px;
}


/* ══════════════════════════════════════════════════════ ۸. نوار خرید */
.sticky-buy{border-block-start:1px solid var(--c-line);box-shadow:var(--sh-3)}
.sticky-buy .sb-price .now{color:var(--c-ink)}


/* ══════════════════════════════════════════ ۹. بردکرامب و نوار پایین */
.breadcrumb a:hover{color:var(--c-primary)}
.mobile-bar .mb-count{background:var(--c-primary)}

/* دکمهٔ برجستهٔ «تماس» وسط نوار پایین.
   تنها عنصرِ رنگیِ نوار است؛ در سایتی بدون درگاه، این خودِ دکمهٔ خرید است. */
.mobile-bar .mb-fab > a{
  position:relative;
  color:var(--c-primary);
}
.mobile-bar .mb-fab .mb-ico{
  width:46px;height:46px;
  margin-top:-16px;                 /* از لبهٔ بالای نوار بیرون بزند */
  border-radius:var(--r-full);
  background:var(--c-primary);
  color:#fff;
  display:grid;place-items:center;
  /* برجستگی از خودِ حلقهٔ سفید می‌آید، نه از سایهٔ رنگی — سیستمِ سایهٔ سایت
     فقط سه سطحِ توکن‌شده دارد و سایهٔ رنگیِ اختصاصی از آن بیرون می‌زد. */
  box-shadow:var(--sh-2);
  border:3px solid var(--c-surface);
}
.mobile-bar .mb-fab .mb-ico svg{width:21px;height:21px;stroke-width:2}
.mobile-bar .mb-fab .mb-label{color:var(--c-primary);font-weight:700}

/* ══════════════════════════════ ۱۰. ایزوله‌سازی جهت برای اعداد و کدها
   در متنِ RTL، «۱۲۰٬۰۰۰٬۰۰۰ تومان» و «۰۲۱-۳۳۱۲۷۶۴۲» و کد مدل «SMS46MI01B»
   با الگوریتم دوجهته جابه‌جا می‌شوند (۰۲۱ می‌پرد آخر). isolate این را می‌بندد. */
.price-now,.price-old,.pcard-amount,
.sb-price,.p-price,.sum-row .v,
.pcard-sku,.p-sku,.tel-num,.tel-link,
.num,.order-number{
  unicode-bidi:isolate;
}
/* عدد و واحد باید کنار هم بمانند ولی هرکدام جزیرهٔ خودش باشد */
.price-now .unit{unicode-bidi:isolate;margin-inline-start:4px}

/* ═══════════════════════════════ ۱۱. حالت استعلامی روی کارت محصول
   ⚠ کارتِ بی‌قیمت نباید «سوراخ» داشته باشد. اگر بلوکِ قیمت را حذف کنیم و
     جایش چیزی نگذاریم، ارتفاعِ کارت‌ها در گرید نامساوی می‌شود و کارتِ
     استعلامی «ناقص» به‌نظر می‌رسد — نه «عمدی». این بلوک دقیقاً همان جای
     قیمت را می‌گیرد و با لحنِ اطمینان (سبزآبی) نوشته شده. */
.pcard-quote{
  display:flex;align-items:center;gap:6px;
  min-height:30px;
  font-size:15px;font-weight:700;line-height:1.5;
  color:var(--c-success);
}
.pcard-quote svg{width:16px;height:16px;flex:none;stroke-width:2}


/* ═══════════════════════════════════════════════════ ۱۰. بازگشت به بالا */
.to-top{
  background:var(--c-surface);color:var(--c-ink);
  border:1px solid var(--c-line);box-shadow:var(--sh-2);
  border-radius:var(--r-full);
}
.to-top:hover{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}


/* ══════════════════════════════════════════════════════ ۱۱. فرم‌ها */
.input:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.10);
}
.btn{border-radius:var(--r-md)}
.btn-primary{background:var(--c-primary);border-color:var(--c-primary)}
.btn-primary:hover{background:var(--c-primary-dark);border-color:var(--c-primary-dark)}
/* دکمهٔ سبزآبی — برای «تماس»، «استعلام» و «مشاوره» */
.btn-trust{
  background:var(--c-trust);border:1px solid var(--c-trust);color:#fff;
}
.btn-trust:hover{background:var(--c-trust-dark);border-color:var(--c-trust-dark);color:#fff}


/* ═════════════════════════════════════ ۱۲. ریل گروه‌های دسته‌بندی (خانه) */
.grp-sec{padding-block:var(--sp-6)}
.grp-rail{
  display:flex;gap:12px;
  overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-block-end:4px;
}
.grp-rail::-webkit-scrollbar{display:none}
.grp{
  scroll-snap-align:start;
  flex:0 0 auto;width:132px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 10px;
  background:var(--c-surface);
  border:1px solid var(--c-line-2);
  border-radius:var(--r-lg);
  text-align:center;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
@media (hover:hover){
  .grp:hover{border-color:var(--c-primary);box-shadow:var(--sh-1)}
}
.grp-ic{
  width:64px;height:64px;
  display:grid;place-items:center;
  /* مربعِ گردگوشه، نه دایره — لوازم خانگی جعبه‌ای‌اند */
  border-radius:var(--r-md);
  background:var(--c-panel);
  color:var(--c-ink-2);
  overflow:hidden;
}
.grp-ic img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.grp-ic svg{width:26px;height:26px;stroke-width:1.5}
.grp b{font-size:15px;font-weight:700;line-height:1.5;color:var(--c-ink)}
.grp-n{font-size:15px;color:var(--c-ink-3)}
/* قرمزِ روشن روی صورتیِ کم‌رنگ ۴٫۳۹:۱ می‌دهد و AA را با اختلافِ کم رد می‌کند؛
   نسخهٔ تیره روی همان زمینه راحت از حد می‌گذرد. */
.grp--all .grp-ic{background:var(--c-primary-soft);color:var(--c-primary-dark)}


/* ═══════════════════════════════════════ ۱۳. چیپ‌های فیلترِ سریع */
.quick-filters{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.chip--toggle{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--c-line);
  background:var(--c-surface);
  color:var(--c-ink-2);
  border-radius:var(--r-md);
  font-size:15px;font-weight:500;
}
.chip--toggle svg{width:16px;height:16px;stroke-width:1.9}
@media (hover:hover){
  .chip--toggle:hover{border-color:var(--c-ink-3);color:var(--c-ink)}
}
/* روشن = سبزآبیِ اطمینان، نه قرمز: این‌ها «محدودکننده»اند نه «اقدام» */
.chip--toggle.is-on{
  background:var(--c-trust-soft);
  border-color:rgba(var(--c-trust-rgb),.35);
  color:var(--c-success);
  font-weight:700;
}


/* ═════════════════════════════ ۱۴. شکلِ امضاییِ برچسب («بلیتی»)
   یک هندسه، سه معنا — تمایزِ ارزان و یکدست. گوشهٔ بالا-شروع و پایین-پایان
   بزرگ، دو گوشهٔ دیگر ریز. */
.pcard-flag,
.gal-flags .pcard-flag,
.price-off,
.badge-ticket{
  border-start-start-radius:var(--r-md);
  border-end-end-radius:var(--r-md);
  border-start-end-radius:4px;
  border-end-start-radius:4px;
}


/* ═══════════════════════════════ ۱۵. گالری — اورلیِ «+N» روی بندانگشتی */
.gal-thumbs.has-more .gal-thumb.is-hidden{display:none}
.gal-thumbs .gal-thumb.is-more{position:relative}
.gal-thumbs .gal-thumb.is-more::after{
  content:attr(data-more);
  position:absolute;inset:0;
  display:grid;place-items:center;
  background:rgba(16,22,28,.62);
  color:#fff;font-weight:700;font-size:15px;
  border-radius:inherit;
  unicode-bidi:isolate;
}
/* بعد از باز شدن، اورلی می‌رود و بقیه دیده می‌شوند */
.gal-thumbs.is-open .gal-thumb.is-hidden{display:block}
.gal-thumbs.is-open .gal-thumb.is-more::after{display:none}


/* ══════════════════════════ ۱۶. جدول مشخصات — دو ستونه در دسکتاپ
   محصولات این سایت تا ۱۹ ردیفِ مشخصات دارند؛ تک‌ستونه یعنی یک ستونِ باریکِ
   بلند و کلی فضای خالی سمت مقابل. */
@media (min-width:1024px){
  .specs-group{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--sp-6);
  }
  .specs-group > h3{grid-column:1 / -1}
  /* راه‌راهِ زوج/فرد در دو ستون به هم می‌ریزد؛ به‌جایش خطِ جداکنندهٔ افقی */
  .specs-group .spec-row:nth-child(odd){background:transparent}
  .specs-group .spec-row{border-block-end:1px solid var(--c-line-2)}
}


/* ══════════════════════════ ۱۷. لینک واتس‌اپ در باکس مشاوره
   ⚠ کلاس .is-wa در call-cta.php بود ولی هیچ قاعده‌ای نداشت، پس دقیقاً شبیه
     لینک‌های تلفنِ کنارش دیده می‌شد و کاربر تفکیکشان نمی‌کرد. این پارشال در
     صفحهٔ اصلی، دسته، محصول و جستجو تکرار می‌شود — یعنی همه‌جا.
     سبزآبیِ اطمینان می‌گیرد، نه سبزِ برندِ واتس‌اپ، تا از پالت بیرون نزند. */
.consult-tels a.is-wa{
  background:var(--c-trust-soft);
  border-color:rgba(var(--c-trust-rgb),.30);
  color:var(--c-success);
  font-weight:700;
}
.consult-tels a.is-wa svg{color:var(--c-trust)}
.consult-tels a.is-wa:hover{border-color:var(--c-trust);color:var(--c-trust-dark)}


/* ══════════════════════════ ۱۸. مگامنو — بازشدن با کیبورد
   پنل فقط با کلاسِ .is-open (از app.js) باز می‌شد. اگر جاوااسکریپت نرسد یا
   کاربر با Tab حرکت کند، پنل هرگز باز نمی‌شد. لینکِ والد همچنان به صفحهٔ
   گروه می‌رود، پس ناوبری نمی‌شکست — ولی این یک خطِ CSS همان را با کیبورد
   هم قابل استفاده می‌کند. */
.mainnav > li.has-mega:focus-within > .mega{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s;
}


/* ══════════════════════════ ۱۹. کانال دومِ فروش روی محصولِ قیمت‌دار */
.buybox-alt{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;margin-block-start:10px;
}
.buybox-alt .btn{min-height:44px;font-size:15px}
.buybox-alt:only-child,
.buybox-alt:has(.btn:only-child){grid-template-columns:minmax(0,1fr)}


/* ══════════════════════════════════════════ ۲۰. احترام به کاهش حرکت */
@media (prefers-reduced-motion:reduce){
  .pcard,.pcard-img img,.btn,.to-top,.grp{transition:none !important}
}