/*
 * صفحه‌ی دسته در گوشی: محصولات بالاتر بیایند -- ۱۴۰۵/۰۷/۱۴.
 *
 * پیش از این در پهنای ۳۹۰ اولین کارت محصول ۲۲۹۲px پایین‌تر بود (۲٫۷ صفحه):
 * لوگوی برندها ۳ ستونی (۴۵۷px) و چهار بلوک قیمت/کاربری/پردازنده/اندازه
 * زیر هم (۱۴۳۰px). حالا برندها یک ردیف افقی است و چهار بلوک یک نوار زبانه
 * (client/js/bpr-cat-tabs.js) که هر بار یکی را نشان می‌دهد. همه‌ی پیوندها
 * در HTML می‌مانند. بیرون از media query فقط حاشیه‌ی H1 است که پیش‌تر
 * درون‌خطی بود (همان ۵۰px، تا دسکتاپ عوض نشود).
 */
.category-name-2023 { margin-bottom: 50px !important; }

/* عکس کارت محصول: width/height=185 در HTML برای جا نگه داشتن (CLS)؛ اندازه‌ی
   نمایش همان قبلی است، پس ارتفاع باید از نسبت بیاید نه از ویژگی height. */
.bpr-card-img { height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.bpr-cat-tabs { display: none; }

/* خط تاریخ زیر H1 لپ تاپ (مرحله‌ی ۹). حاشیه‌ی پایین H1 در عمل صفر است (قانون دیگری
   آن را می‌خواباند)، پس فاصله را خود این خط می‌دهد؛ حاشیه‌ی منفی آن را روی H1 می‌برد. */
.category-name-2023 + .price-updated { margin: 12px 0 28px; text-align: center; font-family: byekan, Tahoma, sans-serif; font-size: 13px; line-height: 1.8; color: #6b7280; }

/* قلم: همان byekan سرتیتر و نوار مرتب‌سازی. بی این، زبانه‌ها و نام‌های رده
   کاربری Tahoma (از body) می‌گرفتند و نام برندها IRANSans که روی سایت بار
   نمی‌شود. دسکتاپ هم (درخواست مدیر سایت، ۱۴۰۵/۰۷/۱۴). */
.console-general .subcats_2023 p,
.console-general .subcats_2023 p span,
#category-landing-wrapper .item-name,
#category-landing-wrapper .item-name span,
.bpr-cat-tabs button { font-family: byekan, Tahoma, sans-serif !important; }

@media (max-width: 767px) {
    .category-name-2023 { margin-bottom: 12px !important; }
    .category-name-2023 + .price-updated { margin: 10px 0 14px; font-size: 12px; }

    .console-general .subcats_2023 .innerSubCat,
    [data-bpr-tabs] .panel-title-items,
    [data-bpr-tabs] .innerSubCat {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        width: 100%;
        padding: 4px 4px 8px;
        margin: 0;
    }
    .console-general .subcats_2023 .innerSubCat::-webkit-scrollbar,
    [data-bpr-tabs] .panel-title-items::-webkit-scrollbar,
    [data-bpr-tabs] .innerSubCat::-webkit-scrollbar { display: none; }

    .console-general .subcats_2023 .innerSubCat > .clearfix,
    [data-bpr-tabs] .panel-title-items > .clearfix,
    [data-bpr-tabs] .innerSubCat > .clearfix { display: none; }

    .console-general .subcats_2023 .innerSubCat > .mod {
        flex: 0 0 84px;
        width: 84px;
        float: none;
        padding: 0 4px;
        margin: 0;
        scroll-snap-align: start;
    }
    .console-general .subcats_2023 .innerSubCat img {
        display: block;
        width: 64px;
        height: 64px;
        margin: 0 auto;
        padding: 0;
    }
    .console-general .subcats_2023 .innerSubCat p { margin: 2px 0 0; }

    [data-bpr-tabs] .panel-title-items > .mod,
    [data-bpr-tabs] .innerSubCat > .mod {
        flex: 0 0 108px;
        width: 108px;
        float: none;
        padding: 0 4px;
        margin: 0;
        scroll-snap-align: start;
    }
    [data-bpr-tabs] .panel-title-items img,
    [data-bpr-tabs] .innerSubCat img {
        display: block;
        width: 100px;
        height: auto;
        margin: 0 auto;
    }

    .bpr-cat-tabs {
        display: flex;
        gap: 6px;
        float: right;
        width: 100%;
        overflow-x: auto;
        padding: 8px 4px;
        scrollbar-width: none;
    }
    .bpr-cat-tabs::-webkit-scrollbar { display: none; }
    .bpr-cat-tabs button {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 8px 14px;
        border: 1px solid #d5d9de;
        border-radius: 999px;
        background: #fff;
        color: #222;
        font: inherit;
        font-size: 13px;
        white-space: nowrap;
    }
    .bpr-cat-tabs button[aria-selected="true"] {
        background: #1ac3ba;
        border-color: #1ac3ba;
        color: #fff;
    }

    .bpr-tabs-on > .bpr-shortcut-panel { display: none; }
    .bpr-tabs-on > .bpr-shortcut-panel.is-active { display: block; }
    .bpr-tabs-on > .bpr-shortcut-panel .panel-title { margin: 0; padding: 0; }
    .bpr-tabs-on > .bpr-shortcut-panel h2 {
        position: absolute !important;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* مرحله‌ی ۱۳٫۱ (۱۴۰۵/۰۷/۱۵): همان چیدمان زبانه، پیش از اجرای bpr-cat-tabs.js (defer).
   بی این، گوشی اول چهار بلوک را زیر هم می‌چید و بعد اسکریپت آن‌ها را زبانه می‌کرد → CLS 0.35 در Lighthouse.
   ::before جای نوار زبانه (شناور، ۵۶px = min-height 40 + padding 8+8) را نگه می‌دارد؛ فقط بلوک اول دیده
   می‌شود و H2اش مثل حالت نهایی پنهان. با کلاس bpr-tabs-on (اسکریپت) این قاعده‌ها کنار می‌روند.
   مقایسهٔ getBoundingClientRect همهٔ عنصرها (۳۶۰ و ۴۱۲px) با حالت نهایی: صفر تفاوت. */
@media (max-width: 767px) {
    #category-landing-wrapper[data-bpr-tabs]:not(.bpr-tabs-on)::before { content: ""; float: right; width: 100%; height: 56px; }
    #category-landing-wrapper[data-bpr-tabs]:not(.bpr-tabs-on) > :has(h2) ~ :has(h2) { display: none; }
    #category-landing-wrapper[data-bpr-tabs]:not(.bpr-tabs-on) > :has(h2) .panel-title { margin: 0; padding: 0; }
    #category-landing-wrapper[data-bpr-tabs]:not(.bpr-tabs-on) > :has(h2) h2 {
        position: absolute !important;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}