/* ================================================================
   iranboschcenter.com — اصلاحات نسخه‌ی موبایل
   ================================================================
   آخرین استایل‌شیتی است که بارگذاری می‌شود، پس هرچه اینجاست بر بقیه
   غلبه می‌کند بدون نیاز به !important.

   قاعده: هیچ قاعده‌ای بیرون از media query نوشته نشود مگر آنکه عمداً
   برای همه‌ی اندازه‌ها باشد (مثل شبکه‌ی ایمنیِ اسکرول افقی). این‌طور
   نسخه‌ی دسکتاپ دست‌نخورده می‌ماند.
   ================================================================ */

/* ================================================================
   ۰) شبکه‌ی ایمنیِ اسکرول افقی — همه‌ی اندازه‌ها
   ================================================================
   overflow-x: clip به‌جای hidden، چون hidden روی html/body باعث می‌شود
   position: sticky در فرزندان کار نکند (هدر چسبان، نوار چسبانِ محصول).
   clip این عارضه را ندارد و در کروم/سافاری مدرن پشتیبانی می‌شود. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* هیچ رسانه‌ای نباید از ظرفش بیرون بزند */
img, svg, video, iframe, table { max-width: 100%; }
img { height: auto; }

/* نوار تماسِ موبایل — در دسکتاپ لازم نیست (شماره در هدر و فوتر هست) */
.callbar { display: none; }

/* شماره‌های داخل متنِ محتوا که با linkifyPhones لینک شده‌اند */
.tel-link {
    color: var(--color-primary, #e20015);
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 1px dashed currentColor;
}
.tel-link:hover { border-bottom-style: solid; }


@media (max-width: 767px) {

/* ================================================================
   ۰٫۵) نوار تماس — اولین چیزی که کاربر موبایل می‌بیند
   ================================================================
   در جریان عادی صفحه است (نه fixed و نه شناور)، پس جلوی هیچ محتوایی را
   نمی‌گیرد و چیزی زیرش پنهان نمی‌شود. */
.callbar {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .5rem .85rem;
    padding: .6rem .75rem;
    min-height: 3.25rem;                       /* هدف لمس راحت */
    background: var(--color-primary-light, #fdecec);
    border: 1px solid #ffd0d4;
    border-radius: .75rem;
    color: #0f1111;
}
.callbar:active { background: #fbdcdd; }
.callbar__ico {
    flex-shrink: 0;
    width: 2.25rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-primary, #e20015);
    border-radius: 50%;
    color: #fff;
}
.callbar__ico svg { width: 17px; height: 17px; }
.callbar__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.callbar__txt b { font-size: .8125rem; font-weight: 800; line-height: 1.6; }
.callbar__txt i {
    font-style: normal; font-size: .6875rem; color: #7d6a6b; line-height: 1.6;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.callbar__num {
    flex-shrink: 0;
    font-size: 1rem; font-weight: 800; letter-spacing: .02em;
    color: var(--color-primary-dark, #b00010);
}
@media (max-width: 359px) {
    .callbar__txt i { display: none; }
    .callbar__num { font-size: .9rem; }
}

/* ================================================================
   ۱) ریتم فاصله‌ها — همه‌ی بخش‌ها یک گاتر دارند
   ================================================================
   قبلاً هر بخش پدینگ خودش را داشت (1rem، .85rem، .75rem) و لبه‌ی چپ و
   راست بخش‌ها روی هم نمی‌افتاد؛ همان چیزی که «نامنظم» دیده می‌شد. */
:root { --home-pad: 1rem; }

.hb, .ht, .hs, .hc, .pcar, .dl__inner, .contact-band-wrap {
    padding-inline: var(--home-pad);
}

/* فاصله‌ی عمودی یکسان بین بخش‌ها — نه چسبیده، نه پر از فضای خالی */
.hb, .ht, .hs, .hc, .pcar, .contact-band-wrap { margin-block: 1.75rem; }
.dl { margin-block: 1.75rem; padding-block: 1.75rem; }
.bw-banners-section { margin-top: 1.75rem; }
.bw-blog-section { margin-top: 2rem; margin-bottom: 2rem; }


/* ================================================================
   ۲) تیترها — clamp تا روی ۳۲۰px هم نشکنند و روی ۴۳۰px ریز نباشند
   ================================================================ */
.hb__head h2, .ht__head h2, .bw-section-title {
    font-size: clamp(1.05rem, 4.4vw, 1.25rem);
    line-height: 1.7;
}
.dl__title  { font-size: clamp(1rem, 4.2vw, 1.2rem); }
.hc__title  { font-size: clamp(1.05rem, 4.6vw, 1.3rem); line-height: 1.75; }
.pcar__title { font-size: clamp(.95rem, 4vw, 1.1rem); }

/* متن بدنه هیچ‌جا زیر ۱۳px نرود */
.hc__sub, .dpanel__text, .price-note p, .bw-blog-summary {
    font-size: .8125rem;
    line-height: 1.95;
}


/* ================================================================
   ۳) کارت محصول
   ================================================================ */
/* ۱۳px برای نام محصول در موبایل کم بود — اسکن کردن فهرست سخت می‌شد */
.pcard__name { font-size: .875rem; line-height: 1.65; }

/* بج‌ها: به‌جای له شدن و تبدیل به «…۱۴»، عرض طبیعی خود را می‌گیرند و
   هرچه در ردیف اول جا نشود بریده می‌شود. */
.pcard__specs { max-height: 1.9rem; overflow: hidden; flex-wrap: wrap; }
.pcard__specs li { flex: 0 0 auto; max-width: none; text-overflow: clip; }
/* روی گوشی باریک حتی دو بج هم ردیف را پر می‌کند */
@media (max-width: 400px) { .pcard__specs li:nth-child(n + 3) { display: none; } }

/* هدفِ لمس دکمه‌ی افزودن/تماس — ۴۴×۴۴ استاندارد */
.btn-add {
    width: 2.5rem; height: 2.5rem;
    position: relative;
}
.btn-add::after { content: ''; position: absolute; inset: -5px; }

/* آیکن علاقه‌مندی روی موبایل hover ندارد، پس همیشه نامرئی می‌ماند و
   عملاً یک دکمه‌ی مرده است. نمایانش می‌کنیم با ناحیه‌ی لمسِ کافی. */
.pcard__wish { opacity: 1; width: 2.125rem; height: 2.125rem; }
.pcard__wish::after { content: ''; position: absolute; inset: -6px; }

/* کارت‌های بدون قیمت: جای‌خالیِ رزروشده حذف می‌شود تا کارت بی‌جهت بلند نشود.
   با یک فرزند، justify-content: space-between خودش دکمه را به ابتدا می‌چسباند. */
.quote-price--empty { display: none; }


/* ================================================================
   ۴) شبکه‌ی فهرست محصولات
   ================================================================
   دو ستون می‌ماند: با کاتالوگ ۷۰۰تایی، تک‌ستونه یعنی کاربر برای دیدن
   همان تعداد محصول دو برابر اسکرول کند. مشکل واقعی «تعداد ستون» نبود،
   «خوانا نبودن محتوای کارت» بود که در بند ۳ حل شد. */
.cat-grid, .home-grid { gap: .65rem; }

/* روی گوشی‌های خیلی باریک، دو ستون کارت را زیر ۱۴۰px می‌کند */
@media (max-width: 359px) {
    .cat-grid, .home-grid { grid-template-columns: 1fr; }
    .cat-grid .pcard, .home-grid .pcard { flex-direction: row; align-items: stretch; }
    .cat-grid .pcard__img-wrap, .home-grid .pcard__img-wrap { width: 7.5rem; flex-shrink: 0; aspect-ratio: 1; }
    .cat-grid .pcard__body, .home-grid .pcard__body { padding: .65rem .75rem; }
}


/* ================================================================
   ۵) فرم‌ها — جلوگیری از زوم خودکار سافاری
   ================================================================
   iOS هر ورودی با فونت کمتر از ۱۶px را که فوکوس شود، زوم می‌کند و
   چیدمان صفحه به‌هم می‌ریزد. تنها راه‌حل، فونت ۱۶px است. */
#main-content input:not([type="checkbox"]):not([type="radio"]),
#main-content select,
#main-content textarea,
.mobile-search-bar__form input,
.main-search input,
.hc__field input {
    font-size: 16px;
}

/* ارتفاع و ناحیه‌ی لمس ورودی‌ها */
#main-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#main-content select {
    min-height: 2.75rem;
}
#main-content label { font-size: .8125rem; }


/* ================================================================
   ۶) هدف‌های لمسی عمومی
   ================================================================ */
.action-btn, .hamburger,
.mob-panel__close,
.pcar__btn, .hslider__btn,
.pagination a, .pagination span {
    min-width: 2.75rem;
    min-height: 2.75rem;
}
.mobile-search-bar__form button { width: 2.5rem; height: 2.5rem; }

/* نقطه‌های اسلایدر: خودِ نقطه کوچک بماند ولی ناحیه‌ی لمس بزرگ باشد */
.hslider__dot, .bw-banner-dot { position: relative; }
.hslider__dot::after,
.bw-banner-dot::after { content: ''; position: absolute; inset: -11px; }
/* فاصله‌ی بین نقطه‌ها تا لمس اشتباه نشود */
.hslider__dots, .bw-banner-dots { gap: 10px; }


/* ================================================================
   ۷) منوی موبایل
   ================================================================ */
.mob-panel { width: min(20rem, 86vw); }
.mob-panel__head { padding: .9rem 1.1rem; }
.mob-panel__close { width: 2.25rem; height: 2.25rem; }
.mob-acc__trigger { min-height: 3rem; font-size: .9375rem; }
.mob-acc__body a  { min-height: 2.875rem; font-size: .875rem; }
.mob-simple-link  { min-height: 2.875rem; }
/* پایین پنل زیر نوار خانه‌ی آیفون نرود */
.mob-panel { padding-bottom: env(safe-area-inset-bottom); }


/* ================================================================
   ۸) اسلایدر اصلی
   ================================================================
   عمداً aspect-ratio ثابتی روی تصویر بنر گذاشته نشده: نسبت بنرهای موبایلِ
   شما را نمی‌دانم و هر نسبتِ حدسی، سوژه‌ی تصویر را می‌بُرد. راه درستِ رفع
   CLS اینجا این است که هنگام آپلود، ابعاد بنر ذخیره و در width/height تگ
   img نوشته شود — نه بریدن تصویر. */
.hslider__dots { bottom: .55rem; }


/* ================================================================
   ۹) بخش‌هایی که در موبایل فشرده می‌شدند
   ================================================================ */
/* پنل «پیشنهاد ویژه»: شماره‌ی تماس باید بزرگ‌ترین چیز پنل باشد */
.dpanel__phone { min-height: 3rem; font-size: 1.15rem; }
.dpanel__wa    { min-height: 2.75rem; }

/* بخش تماس: هر راه ارتباطی یک ردیف کامل، بدون له شدن متن */
.contact-band__ways { grid-template-columns: 1fr; }
.cw { min-height: 3.25rem; }
.cw__body i { white-space: normal; }

/* فرم مشاوره: دکمه زیر ورودی و تمام‌عرض */
.hc__field { flex-direction: column; align-items: stretch; border-radius: .9rem; padding: .55rem; gap: .5rem; }
.hc__field input { text-align: center; }
.hc__field button { width: 100%; min-height: 2.875rem; }

/* نوار یادداشت قیمت: دکمه‌ی تماس زیر متن، تمام‌عرض */
.price-note a { min-height: 2.5rem; display: inline-flex; align-items: center; }


/* ================================================================
   ۹٫۵) عناصر ثابتِ پایین صفحه — نباید جلوی محتوا را بگیرند
   ================================================================ */
/* نوار چسبانِ صفحه‌ی محصول: زیر نوار خانه‌ی آیفون نرود */
.sticky-cta {
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    min-height: 3.75rem;
}
/* و محتوای انتهای صفحه زیرش پنهان نماند */
body:has(.sticky-cta) #main-content { padding-bottom: 5.5rem; }

/* دکمه‌ی شناور سبد خرید: در موبایل روی نوار چسبان می‌افتاد و دو دکمه‌ی
   قرمز کنار هم گیج‌کننده بود. در موبایل، سبد از هدر در دسترس است. */
#sticky-cart { display: none !important; }

/* ================================================================
   ۱۰) فوتر
   ================================================================ */
.bw-footer-body { padding: 1.75rem 1rem 1.5rem; gap: 1.25rem; }
.bw-footer-topbar-inner { padding: 0 1rem; }
.bw-footer-topbar-phone { min-height: 2.5rem; display: inline-flex; align-items: center; }

} /* /max-width: 767px */


/* ================================================================
   ۱۱) تبلت — گذارِ نرم بین موبایل و دسکتاپ
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .hb__grid { grid-template-columns: repeat(2, 1fr); }
    .hb__card { min-height: 300px; }
    .cat-grid, .home-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ================================================================
   ۱۲) دسترس‌پذیری — حالت فوکوس دیدنی
   ================================================================
   :focus-visible فقط برای کاربر کیبورد ظاهر می‌شود، پس تجربه‌ی موس و
   لمس دست‌نخورده می‌ماند. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary, #e20015);
    outline-offset: 2px;
    border-radius: 4px;
}

/* کاربری که انیمیشن برایش آزاردهنده است */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}