/* Home hero navigation is intentionally isolated from generic Swiper controls. */
body[data-page="Home-Index"] #homeHero.home-hero .home-hero__nav {
    position: absolute;
    top: 50%;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .92);
    background: rgba(9, 16, 29, .38);
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 50%;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .14);
    opacity: .82;
    cursor: pointer;
    direction: ltr;
    transform: translateY(-50%);
    transition: background-color .2s ease, border-color .2s ease,
                opacity .2s ease, transform .2s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

body[data-page="Home-Index"] #homeHero.home-hero .home-hero__nav--prev {
    left: clamp(10px, 2vw, 28px);
    right: auto;
}

body[data-page="Home-Index"] #homeHero.home-hero .home-hero__nav--next {
    right: clamp(10px, 2vw, 28px);
    left: auto;
}

body[data-page="Home-Index"] #homeHero.home-hero .home-hero__nav svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

body[data-page="Home-Index"] #homeHero.home-hero .home-hero__nav:hover {
    color: #fff;
    background: rgba(9, 16, 29, .68);
    border-color: rgba(255, 255, 255, .68);
    opacity: 1;
    transform: translateY(-50%) scale(1.04);
}

body[data-page="Home-Index"] #homeHero.home-hero .home-hero__nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    opacity: 1;
}

body[data-page="Home-Index"] #homeHero.home-hero .home-hero__nav.swiper-button-disabled {
    opacity: .28;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 767.98px) {
    body[data-page="Home-Index"] #homeHero.home-hero .home-hero__nav {
        width: 30px;
        height: 30px;
    }

    body[data-page="Home-Index"] #homeHero.home-hero .home-hero__nav--prev {
        left: 8px;
    }

    body[data-page="Home-Index"] #homeHero.home-hero .home-hero__nav--next {
        right: 8px;
    }

    body[data-page="Home-Index"] #homeHero.home-hero .home-hero__nav svg {
        width: 13px;
        height: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="Home-Index"] #homeHero.home-hero .home-hero__nav {
        transition: none;
    }
}

/* =========================================================================
   فاز ۱ — ساختار صفحه‌ی نخست
   هیروی ترکیبی (اسلایدر + بنرهای کناری)، نوار خدمات، شبکه‌ی دسته‌بندی.
   همه‌ی قواعد به body[data-page="Home-Index"] محدود شده‌اند تا هیچ صفحه‌ی
   دیگری را تحت تأثیر قرار ندهند.
   ========================================================================= */

body[data-page="Home-Index"] {
    --home-gap: 16px;
    --home-radius: 18px;
    --home-border: rgba(24, 24, 24, .08);
}

/* ---------- هیروی ترکیبی ---------- */

body[data-page="Home-Index"] .home-hero-section {
    padding-top: 18px;
}

body[data-page="Home-Index"] .home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--home-gap);
    align-items: stretch;
}

@media (min-width: 992px) {
    body[data-page="Home-Index"] .home-hero-grid {
        grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
    }
}

/* وقتی هیچ بنر کناری تعریف نشده باشد، اسلایدر تمام عرض را می‌گیرد؛ و برعکس،
   اگر اسلایدی ثبت نشده باشد بنرها تمام عرض را می‌گیرند. */
body[data-page="Home-Index"] .home-hero-grid:not(:has(.nw-ad-slot)),
body[data-page="Home-Index"] .home-hero-grid:not(:has(.home-hero)) {
    grid-template-columns: minmax(0, 1fr);
}

body[data-page="Home-Index"] .home-hero__side:not(:has(.nw-ad-slot)) {
    display: none;
}

/* نه اسلایدی هست و نه بنری: کل بخش حذف شود تا جعبه‌ی خالی نماند. */
body[data-page="Home-Index"] .home-hero-section:not(:has(.home-hero)):not(:has(.nw-ad-slot)) {
    display: none;
}

body[data-page="Home-Index"] #homeHero.home-hero {
    border-radius: var(--home-radius);
    overflow: hidden;
}

/* نسبت ابعاد ثابت به‌جای ارتفاع پیکسلی قالب: هم CLS صفر می‌شود و هم
   ارتفاع اسلایدر با ستون بنرهای کناری هماهنگ می‌ماند. */
body[data-page="Home-Index"] #homeHero.home-hero .wrap-slider {
    height: auto;
    aspect-ratio: 1200 / 560;
}

body[data-page="Home-Index"] #homeHero.home-hero .wrap-slider img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    body[data-page="Home-Index"] #homeHero.home-hero .wrap-slider {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 575.98px) {
    body[data-page="Home-Index"] #homeHero.home-hero .wrap-slider {
        aspect-ratio: 4 / 3;
    }
}

/* داخل کانتینر، فاصله‌های بزرگِ نسخه‌ی تمام‌عرض قالب زیادی است. */
@media (min-width: 992px) {
    body[data-page="Home-Index"] #homeHero.home-hero.slider-default .box-content {
        right: 44px;
        left: 44px;
        bottom: 52px;
    }
}

body[data-page="Home-Index"] #homeHero.home-hero .wrap-pagination {
    bottom: 14px;
}

/* بنرهای کناری */

body[data-page="Home-Index"] .home-hero__side {
    display: grid;
    grid-auto-rows: 1fr;
    gap: var(--home-gap);
    min-height: 0;
}

body[data-page="Home-Index"] .home-hero__side .nw-ad-slot {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--home-radius);
}

body[data-page="Home-Index"] .home-hero__side .nw-ad-link {
    display: block;
    position: absolute;
    inset: 0;
}

/* تصویر بنر با position:absolute از جریان چیدمان خارج می‌شود.
   وگرنه ارتفاع ذاتی عکس (مثلاً ۴۵۰px) ستون کناری را بلندتر از اسلایدر می‌کرد و
   زیر اسلایدر فضای خالی می‌افتاد. حالا ارتفاع ردیف را فقط اسلایدر تعیین می‌کند. */
body[data-page="Home-Index"] .home-hero__side .nw-ad-slot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--home-radius);
}

/* حالتی که اسلایدر وجود ندارد و فقط بنرها هستند: چون دیگر ارتفاع‌دهنده‌ای
   نیست، خود بنرها باید نسبت ابعاد داشته باشند. */
body[data-page="Home-Index"] .home-hero-grid:not(:has(.home-hero)) .home-hero__side {
    grid-auto-rows: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="Home-Index"] .home-hero-grid:not(:has(.home-hero)) .home-hero__side .nw-ad-slot {
    height: auto;
    aspect-ratio: 4 / 3;
}

@media (max-width: 991.98px) {
    body[data-page="Home-Index"] .home-hero__side {
        grid-auto-rows: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-page="Home-Index"] .home-hero__side .nw-ad-slot {
        aspect-ratio: 4 / 3;
    }
}

/* ---------- نوار خدمات و اعتماد ---------- */

body[data-page="Home-Index"] .home-trustbar {
    padding: 24px 0 4px;
}

body[data-page="Home-Index"] .home-trustbar__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 18px 10px;
    background-color: var(--surface);
    border: 1px solid var(--home-border);
    border-radius: var(--home-radius);
}

body[data-page="Home-Index"] .home-trustbar__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 14px;
}

body[data-page="Home-Index"] .home-trustbar__item + .home-trustbar__item {
    border-right: 1px solid var(--home-border);
}

body[data-page="Home-Index"] .home-trustbar__icon {
    flex: 0 0 auto;
    font-size: 32px;
    line-height: 1;
    color: var(--primary);
}

body[data-page="Home-Index"] .home-trustbar__title {
    margin: 0 0 2px;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--main);
}

body[data-page="Home-Index"] .home-trustbar__desc {
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--secondary);
}

@media (max-width: 991.98px) {
    body[data-page="Home-Index"] .home-trustbar__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 6px;
    }

    body[data-page="Home-Index"] .home-trustbar__item:nth-child(odd) + .home-trustbar__item {
        border-right: 1px solid var(--home-border);
    }

    body[data-page="Home-Index"] .home-trustbar__item:nth-child(odd) {
        border-right: 0;
    }
}

@media (max-width: 479.98px) {
    body[data-page="Home-Index"] .home-trustbar__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-page="Home-Index"] .home-trustbar__item,
    body[data-page="Home-Index"] .home-trustbar__item + .home-trustbar__item {
        justify-content: flex-start;
        border-right: 0;
    }
}

/* ---------- کاشی دسته‌بندی ---------- */
/* تعداد کاشیِ هر صفحه از data-per-view* در _CategorySlider.cshtml می‌آید. */

body[data-page="Home-Index"] .home-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 10px 14px;
    background-color: var(--white);
    border: 1px solid var(--home-border);
    border-radius: 16px;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

body[data-page="Home-Index"] .home-category-card:hover,
body[data-page="Home-Index"] .home-category-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(24, 24, 24, .16);
    box-shadow: 0 10px 24px rgba(43, 52, 74, .12);
}

body[data-page="Home-Index"] .home-category-card__media {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--surface);
    border-radius: 12px;
}

body[data-page="Home-Index"] .home-category-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body[data-page="Home-Index"] .home-category-card__name {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--main);
    text-align: center;
}

/* ---------- فروشگاه‌هایی که دسته‌بندی کم دارند ----------
   تعداد کاشیِ هر صفحه در _CategorySlider.cshtml به تعداد واقعی دسته‌ها محدود
   می‌شود تا ردیف تا انتهای عرض پر شود. اما وقتی فقط ۱ تا ۳ دسته داریم، هر کاشی
   آن‌قدر پهن می‌شود که مدیای مربعی به یک بلوک غول‌پیکر تبدیل شود؛ پس هرچه کاشی
   پهن‌تر، نسبت‌ابعاد افقی‌تر. */

body[data-page="Home-Index"] .home-slider--cat-1 {
    max-width: 720px;
    margin-inline: auto;
}

body[data-page="Home-Index"] .home-slider--cat-1 .home-category-card__media,
body[data-page="Home-Index"] .home-slider--cat-2 .home-category-card__media {
    aspect-ratio: 16 / 9;
}

body[data-page="Home-Index"] .home-slider--cat-3 .home-category-card__media {
    aspect-ratio: 4 / 3;
}

body[data-page="Home-Index"] .home-slider--cat-1 .home-category-card,
body[data-page="Home-Index"] .home-slider--cat-2 .home-category-card,
body[data-page="Home-Index"] .home-slider--cat-3 .home-category-card {
    padding: 14px 14px 16px;
}

body[data-page="Home-Index"] .home-slider--cat-1 .home-category-card__name,
body[data-page="Home-Index"] .home-slider--cat-2 .home-category-card__name,
body[data-page="Home-Index"] .home-slider--cat-3 .home-category-card__name {
    font-size: 16px;
    line-height: 24px;
}

/* روی موبایل کاشی‌ها باریک‌اند؛ مدیای افقی آن‌ها را به یک نوار کوتاه تبدیل می‌کند. */
@media (max-width: 575.98px) {
    body[data-page="Home-Index"] .home-slider--cat-1 .home-category-card__media,
    body[data-page="Home-Index"] .home-slider--cat-2 .home-category-card__media,
    body[data-page="Home-Index"] .home-slider--cat-3 .home-category-card__media {
        aspect-ratio: 1 / 1;
    }

    body[data-page="Home-Index"] .home-slider--cat-1 .home-category-card__name,
    body[data-page="Home-Index"] .home-slider--cat-2 .home-category-card__name,
    body[data-page="Home-Index"] .home-slider--cat-3 .home-category-card__name {
        font-size: 14px;
        line-height: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-page="Home-Index"] .home-category-card {
        transition: none;
    }

    body[data-page="Home-Index"] .home-category-card:hover {
        transform: none;
    }
}

/* =========================================================================
   فاز ۲ و ۳ — ریل‌های محصول، فلش‌سیل، برندها، نظرات
   ========================================================================= */

/* ---------- اسلایدر محصول/دسته ---------- */
/* Swiper با دکمه‌های ناوبری و حرکت صفحه‌به‌صفحه (home-sliders.js).
   جهت از سند به ارث می‌رسد، پس اسلاید اول سمت راست می‌ماند. */

body[data-page="Home-Index"] .home-slider {
    position: relative;
}

body[data-page="Home-Index"] .home-slider__viewport {
    /* کارت‌ها سایه و برچسب بیرون‌زده دارند؛ کمی فضای تنفس تا بریده نشوند. */
    margin: -6px;
    padding: 6px;
}

/* پیش از راه‌افتادن Swiper، اسلایدها عرض ندارند و صفحه می‌پرد.
   این عرض‌ها همان چیزی است که Swiper بعداً inline می‌گذارد. */
body[data-page="Home-Index"] .home-slider:not(.is-ready) .swiper-wrapper {
    display: flex;
    gap: 14px;
    overflow: hidden;
}

body[data-page="Home-Index"] .home-slider:not(.is-ready) .swiper-slide {
    flex: 0 0 calc((100% - 4 * 14px) / 5);
}

body[data-page="Home-Index"] .home-slider--category:not(.is-ready) .swiper-slide {
    flex: 0 0 calc((100% - 6 * 14px) / 7);
}

/* ریل با ۱ تا ۳ محصول: تعداد هر صفحه به همان تعداد کم می‌شود تا خانه‌ی خالی
   نماند، ولی کارت نباید تا نصف عرض صفحه کش بیاید؛ پس عرضش مهار و وسط‌چین
   می‌شود. روی نمایشگرهای کوچک اسلاید خودش باریک است و این سقف اثری ندارد. */
body[data-page="Home-Index"] .home-slider--items-1 .swiper-slide,
body[data-page="Home-Index"] .home-slider--items-2 .swiper-slide,
body[data-page="Home-Index"] .home-slider--items-3 .swiper-slide {
    display: flex;
    justify-content: center;
}

body[data-page="Home-Index"] .home-slider--items-1 .swiper-slide > *,
body[data-page="Home-Index"] .home-slider--items-2 .swiper-slide > *,
body[data-page="Home-Index"] .home-slider--items-3 .swiper-slide > * {
    width: 100%;
    max-width: 340px;
}

body[data-page="Home-Index"] .home-slider--items-1:not(.is-ready) .swiper-slide {
    flex-basis: 100%;
}

body[data-page="Home-Index"] .home-slider--items-2:not(.is-ready) .swiper-slide {
    flex-basis: calc((100% - 1 * 14px) / 2);
}

body[data-page="Home-Index"] .home-slider--items-3:not(.is-ready) .swiper-slide {
    flex-basis: calc((100% - 2 * 14px) / 3);
}

/* عرض پیش از راه‌افتادن Swiper هم باید به تعداد واقعی دسته‌ها بخورد، وگرنه
   لحظه‌ی اول کاشی‌ها ریز و کنارِ هم‌اند و بعد جای خود می‌پرند. */
body[data-page="Home-Index"] .home-slider--cat-1:not(.is-ready) .swiper-slide {
    flex-basis: 100%;
}

body[data-page="Home-Index"] .home-slider--cat-2:not(.is-ready) .swiper-slide {
    flex-basis: calc((100% - 1 * 14px) / 2);
}

body[data-page="Home-Index"] .home-slider--cat-3:not(.is-ready) .swiper-slide {
    flex-basis: calc((100% - 2 * 14px) / 3);
}

body[data-page="Home-Index"] .home-slider--cat-4:not(.is-ready) .swiper-slide {
    flex-basis: calc((100% - 3 * 14px) / 4);
}

body[data-page="Home-Index"] .home-slider--cat-5:not(.is-ready) .swiper-slide {
    flex-basis: calc((100% - 4 * 14px) / 5);
}

body[data-page="Home-Index"] .home-slider--cat-6:not(.is-ready) .swiper-slide {
    flex-basis: calc((100% - 5 * 14px) / 6);
}

/* wow.js کارت را تا دیده‌شدن مخفی می‌کند؛ داخل اسلایدر، کارت‌های صفحه‌های بعدی
   هرگز «دیده» نمی‌شوند و نامرئی می‌مانند. */
body[data-page="Home-Index"] .home-slider .card-product.wow {
    visibility: visible !important;
    animation-name: none !important;
}

/* دکمه‌های ناوبری */

body[data-page="Home-Index"] .home-slider__nav {
    position: absolute;
    top: 38%;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    color: var(--main);
    background-color: var(--white);
    border: 1px solid var(--home-border);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(43, 52, 74, .16);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

body[data-page="Home-Index"] .home-slider__nav--prev {
    right: -14px;
}

body[data-page="Home-Index"] .home-slider__nav--next {
    left: -14px;
}

body[data-page="Home-Index"] .home-slider__nav svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

body[data-page="Home-Index"] .home-slider__nav:hover {
    color: var(--white);
    background-color: var(--primary);
    border-color: var(--primary);
}

body[data-page="Home-Index"] .home-slider__nav:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Swiper خودش این کلاس‌ها را می‌گذارد */
body[data-page="Home-Index"] .home-slider__nav.swiper-button-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

body[data-page="Home-Index"] .home-slider__nav.swiper-button-lock {
    display: none;
}

/* در عرض‌های کم دکمه‌ها روی کارت می‌افتند؛ آنجا کشیدن با انگشت طبیعی‌تر است. */
@media (max-width: 991.98px) {
    body[data-page="Home-Index"] .home-slider__nav {
        display: none;
    }
}

/* ---------- فلش‌سیل ---------- */

body[data-page="Home-Index"] .home-flash {
    padding: 34px 0 6px;
}

body[data-page="Home-Index"] .home-flash__box {
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--flash-accent) 28%, transparent);
    border-radius: var(--home-radius);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--flash-accent) 9%, transparent) 0%,
            transparent 190px),
        var(--white);
}

body[data-page="Home-Index"] .home-flash__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-bottom: 18px;
}

body[data-page="Home-Index"] .home-flash__intro {
    margin-inline-end: auto;
}

body[data-page="Home-Index"] .home-flash__title {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--flash-accent);
}

body[data-page="Home-Index"] .home-flash__desc {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--secondary);
}

body[data-page="Home-Index"] .home-flash__timer {
    display: flex;
    align-items: center;
    gap: 10px;
}

body[data-page="Home-Index"] .home-flash__timer-label {
    font-size: 13px;
    color: var(--secondary);
}

body[data-page="Home-Index"] .home-flash__timer .gf-countdown .cd-cell {
    background-color: var(--flash-accent);
    color: var(--white);
}

body[data-page="Home-Index"] .home-flash__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    background-color: var(--flash-accent);
    border-radius: 99px;
    text-decoration: none;
    transition: opacity .2s ease;
}

body[data-page="Home-Index"] .home-flash__cta:hover {
    opacity: .88;
    color: var(--white);
}

@media (max-width: 575.98px) {
    body[data-page="Home-Index"] .home-flash__box {
        padding: 14px 12px;
    }

    body[data-page="Home-Index"] .home-flash__title {
        font-size: 20px;
        line-height: 28px;
    }

    body[data-page="Home-Index"] .home-flash__cta {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- نوار برندها ---------- */

body[data-page="Home-Index"] .home-brands {
    padding: 10px 0 34px;
}

body[data-page="Home-Index"] .home-brands__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
}

body[data-page="Home-Index"] .home-brands__item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 7;
    padding: 8px 10px;
    background-color: var(--white);
    border: 1px solid var(--home-border);
    border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

body[data-page="Home-Index"] .home-brands__item:hover {
    border-color: rgba(24, 24, 24, .18);
    box-shadow: 0 6px 16px rgba(43, 52, 74, .1);
}

body[data-page="Home-Index"] .home-brands__item img {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* لوگوهای رنگارنگ کنار هم شلوغ به‌نظر می‌رسند؛ رنگ روی هاور برمی‌گردد.
       اما کم‌رنگ‌کردن نباید تا حدی برود که نام برند خوانده نشود. */
    filter: grayscale(1);
    opacity: .92;
    transition: filter .2s ease, opacity .2s ease;
}

body[data-page="Home-Index"] .home-brands__item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

@media (max-width: 1199.98px) {
    body[data-page="Home-Index"] .home-brands__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* روی موبایل شبکه‌ی سه‌ستونه برای ۷ برند سه ردیف می‌شد و ارتفاع زیادی می‌گرفت؛
   به‌جایش یک نوار افقیِ کشیدنی که فقط یک ردیف جا می‌گیرد. اسکرول لمسی بومی است
   و به Swiper نیاز ندارد؛ عرضِ کمی‌کمتر از نصف، وجودِ برندهای بعدی را لو می‌دهد. */
@media (max-width: 767.98px) {
    body[data-page="Home-Index"] .home-brands__grid {
        display: flex;
        grid-template-columns: none;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body[data-page="Home-Index"] .home-brands__grid::-webkit-scrollbar {
        display: none;
    }

    body[data-page="Home-Index"] .home-brands__item {
        flex: 0 0 38%;
        scroll-snap-align: start;
    }
}

@media (max-width: 359.98px) {
    body[data-page="Home-Index"] .home-brands__item {
        flex-basis: 44%;
    }
}

/* ---------- نظرات مشتریان ---------- */

body[data-page="Home-Index"] .home-reviews {
    padding: 10px 0 40px;
}

body[data-page="Home-Index"] .home-reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

body[data-page="Home-Index"] .home-review {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 20px;
    background-color: var(--surface);
    border: 1px solid var(--home-border);
    border-radius: var(--home-radius);
}

body[data-page="Home-Index"] .home-review__stars {
    display: flex;
    gap: 2px;
    direction: ltr;
    font-size: 16px;
    color: var(--line);
}

body[data-page="Home-Index"] .home-review__star.is-on {
    color: var(--yellow);
}

body[data-page="Home-Index"] .home-review__title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--main);
}

body[data-page="Home-Index"] .home-review__text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    color: var(--secondary);
    /* نظرهای بلند نباید ارتفاع کارت‌ها را نامتوازن کنند. */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body[data-page="Home-Index"] .home-review__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

body[data-page="Home-Index"] .home-review__author {
    font-weight: 600;
    color: var(--main);
}

body[data-page="Home-Index"] .home-review__verified {
    padding: 3px 9px;
    font-size: 11px;
    color: var(--success);
    background-color: rgba(61, 171, 37, .12);
    border-radius: 99px;
}

@media (max-width: 991.98px) {
    body[data-page="Home-Index"] .home-reviews__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =========================================================================
   فاز ۴ — کارایی رندر
   ========================================================================= */

/* بخش‌های پایین صفحه تا وقتی نزدیک دید کاربر نشده‌اند چیده و رنگ‌آمیزی نمی‌شوند.
   contain-intrinsic-size ارتفاع تخمینی می‌دهد تا نوار اسکرول نپرد.
   بخش‌های بالای صفحه (هیرو و نوار خدمات) عمداً مستثنا هستند. */
/* نوار برندها عمداً بیرون از این فهرست است: بخش کوتاهی است و سودش ناچیز،
   ولی چون تصاویرش lazy هستند، رد شدن از رندر باعث می‌شد لوگوها اصلاً بارگذاری
   نشوند. اندازه‌ی تخمینی هم به ارتفاع واقعی هر بخش نزدیک نگه داشته شده تا
   پرش نوار اسکرول ایجاد نشود. */
@supports (content-visibility: auto) {
    body[data-page="Home-Index"] .home-reviews {
        content-visibility: auto;
        contain-intrinsic-size: auto 420px;
    }

    body[data-page="Home-Index"] .home-seolinks {
        content-visibility: auto;
        contain-intrinsic-size: auto 160px;
    }
}

/* ---------- لینک‌های دسته‌بندی (سئو) ---------- */

body[data-page="Home-Index"] .home-seolinks {
    padding: 0 0 44px;
}

body[data-page="Home-Index"] .home-seolinks__title {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--main);
}

body[data-page="Home-Index"] .home-seolinks__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body[data-page="Home-Index"] .home-seolinks__list a {
    display: inline-block;
    padding: 7px 14px;
    font-size: 13px;
    line-height: 20px;
    color: var(--secondary);
    background-color: var(--surface);
    border: 1px solid var(--home-border);
    border-radius: 99px;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
}

body[data-page="Home-Index"] .home-seolinks__list a:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

/* ---------- هم‌ترازی اندازه‌ی عناوین پس از اصلاح سلسله‌مراتب ---------- */
/* عنوان بخش‌ها از h3 به h2 تغییر کرد (زیر h1 صفحه) و عنوان کارت وبلاگ از h6
   به h3؛ اندازه‌ی دیداری باید همان قبل بماند. */

body[data-page="Home-Index"] .heading-section-2 h2,
body[data-page="Home-Index"] .heading-section h2 {
    font-size: 36px;
    line-height: 44px;
}

body[data-page="Home-Index"] .heading-section h2 {
    margin-bottom: 12px;
    text-transform: capitalize;
}

body[data-page="Home-Index"] .wg-blog .title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
}

@media (max-width: 767.98px) {
    body[data-page="Home-Index"] .heading-section-2 h2,
    body[data-page="Home-Index"] .heading-section h2 {
        font-size: 24px;
        line-height: 30px;
    }
}