/*
    CSS اختصاصی «شهر یراق» - نزدیک کردن ظاهر سایت جدید به سایت قدیمی (WebForm)
    این فایل فقط برای دامنه‌ی shahreyaragh.com لود می‌شود (Html.TenantFileUrl)؛ هیچ مستاجر دیگری را تحت تأثیر قرار نمی‌دهد.
    رنگ‌ها از اسکرین‌شات‌های سایت قدیمی برداشته شده‌اند:
      نوار منو #e83f33 | بلوک «دسته‌بندی» #cb2d22 | فوتر #333 | نوار پایین فوتر #222 (پس‌زمینه‌ی صفحه سفید)
    نکته: site.css بعد از این فایل لود می‌شود؛ پس سلکتورها عمداً با id/تگ مشخص‌تر نوشته شده‌اند.
*/

:root {
    --sy-red: #e83f33;
    --sy-red-dark: #cb2d22;
    --sy-footer: #333333;
    --sy-footer-bottom: #222222;
}

/* ------------------------------------------------------------------ پس‌زمینه‌ی صفحه */
/* پس‌زمینه‌ی صفحه (و هدر) سفید است؛ خاکستری روشن سایت قدیمی عمداً استفاده نمی‌شود */
body,
body > header.header {
    background-color: #fff;
}

/* ------------------------------------------------------------------ منوی اصلی (نوار قرمز) */
/* ارتفاع نوار ثابت ۴۴ پیکسل است و padding عمومی nav حذف می‌شود تا لینک‌ها و بلوک «دسته بندی» دقیقاً تمام‌قد باشند */
nav#nva_sticky {
    --sy-nav-h: 44px;
    background-color: var(--sy-red);
    border: 0;
    box-shadow: none;
    padding-top: 0;
    padding-bottom: 0;
    min-height: var(--sy-nav-h);
}

    /*
    لینک‌های منوی بالا (استاندارد UX، هم‌سبک «خط زیر لینک» بقیه‌ی مستاجرها ولی مناسب نوار قرمز):
    - هر لینک تمام ارتفاع نوار را می‌گیرد تا ناحیه‌ی هاور/کلیک مستطیل کامل باشد
    - رنگ متن همیشه سفید می‌ماند (رنگ آبی هاور عمومی لینک‌ها روی نوار قرمز ناخوانا است)
    - هاور/فوکوس: یک خط سفید ۳ پیکسلی از وسطِ زیر لینک به دو طرف باز می‌شود + درخششِ بسیار ملایمِ سفید از پایین
      (به‌جای خاکستری‌شدن زمینه؛ خط قرمز پیش‌فرض روی نوار قرمز دیده نمی‌شد)
    - صفحه‌ی جاری (.active): همان خط دائمی | فوکوس کیبورد: حلقه‌ی سفید داخلی
*/
    nav#nva_sticky .mtmegamenu a:not(.btn) {
        display: flex;
        align-items: center;
        height: var(--sy-nav-h);
        margin: 0;
        padding: 0 14px;
        font-size: 13px;
        font-weight: 700;
        color: #fff;
        text-decoration: none;
        /* background-image: linear-gradient(to top, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%); */
        background-repeat: no-repeat;
        background-size: 100% 0;
        background-position: bottom;
        transition: background-size .25s ease;
    }

    /* خط زیر لینک: از وسط شروع می‌شود (left/right = 50%) و روی هاور تا لبه‌ی متن باز می‌شود */
    nav#nva_sticky .mtmegamenu > a:not(.btn):after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 50%;
        right: 50%;
        height: 3px;
        border-radius: 3px;
        background-color: #fff;
        transition: left .25s ease, right .25s ease;
        z-index: 1;
    }

    nav#nva_sticky .mtmegamenu > a:not(.btn):hover,
    nav#nva_sticky .mtmegamenu > a:not(.btn):focus-visible,
    nav#nva_sticky .mtmegamenu > a:not(.btn).active {
        color: #fff;
        background-size: 100% 100%;
    }

        nav#nva_sticky .mtmegamenu > a:not(.btn):hover:after,
        nav#nva_sticky .mtmegamenu > a:not(.btn):focus-visible:after,
        nav#nva_sticky .mtmegamenu > a:not(.btn).active:after {
            left: 14px;
            right: 14px;
        }

    nav#nva_sticky .mtmegamenu > a:not(.btn):focus-visible {
        outline: 2px solid #fff;
        outline-offset: -4px;
    }

/* احترام به کاربرانی که انیمیشن را کم کرده‌اند */
@media (prefers-reduced-motion: reduce) {
    nav#nva_sticky .mtmegamenu > a:not(.btn),
    nav#nva_sticky .mtmegamenu > a:not(.btn):after {
        transition: none;
    }
}

/*
    ریبون «دسته بندی محصولات» (مثل سایت قدیمی): بلوک قرمز تیره‌ای که ۹ پیکسل از نوار بالاتر می‌آید و تا لبه‌ی پایین نوار می‌رسد
    (۵۳ = ۴۴ + ۹). مثلث کوچک تیره‌ی سمت راست بالا «تا خوردگی» ریبون است (BoxMenu:after در CSS قدیم).
*/
nav#nva_sticky {
    position: relative;
    z-index: 5;
}

    /* کلاس align-content-center بوت‌استرپ (با !important) محتوای ستون را وسط نوار می‌آورد؛ بلوک باید از بالای نوار شروع شود */
    nav#nva_sticky .mega-container {
        align-content: flex-start !important;
    }

        nav#nva_sticky .mega-container .bg-menu {
            position: relative;
        }

        nav#nva_sticky .mega-container .BoxMenu {
            position: absolute;
            top: -9px;
            right: 0;
            left: 0;
            height: 53px;
            margin: 0;
            padding: 0 14px;
            background-color: var(--sy-red-dark);
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            z-index: 2;
        }

            nav#nva_sticky .mega-container .BoxMenu::after {
                content: "";
                position: absolute;
                top: 0;
                right: -8px;
                border-style: solid;
                border-width: 9px 0 0 8px;
                border-color: transparent transparent transparent #333;
            }

            nav#nva_sticky .mega-container .BoxMenu,
            nav#nva_sticky .mega-container .BoxMenu i,
            nav#nva_sticky .mega-container .BoxMenu span {
                color: #fff;
            }

                nav#nva_sticky .mega-container .BoxMenu i {
                    margin: 0;
                    padding: 0;
                }

                nav#nva_sticky .mega-container .BoxMenu span {
                    font-size: 14px;
                    font-weight: 700;
                }

/* ------------------------------------------------------------------ نوار دایره‌ای دسته‌ها (دسکتاپ: یک پله بزرگ‌تر) */
/* اندازه‌ها داخل خود partial (_ChildCategories) با <style> می‌آید؛ پس سلکتورها مشخص‌تر نوشته شده‌اند */
@media (min-width: 768px) {
    .cat_g .cg_item .cg_avatar {
        width: 4.75rem;
    }

    .cat_g .cg_item .cg_label {
        width: 5.25rem;
        font-size: .82rem;
        line-height: 1.5;
    }
}

/* ------------------------------------------------------------------ فوتر */
footer.footer-holder {
    background-color: var(--sy-footer);
    color: #e6e6e6;
}

    /* «همراه فروشگاه ... باشید!» (رنگ پیش‌فرض آن تیره است و روی زمینه‌ی تیره خوانده نمی‌شود) */
    footer.footer-holder .footer-social__title {
        color: #fff;
    }

    footer.footer-holder hr {
        border-color: rgba(255, 255, 255, .08);
        opacity: 1;
    }

    /* عنوان ستون‌ها: سفید */
    footer.footer-holder .til_f h5,
    footer.footer-holder h5.text-muted,
    footer.footer-holder .til_f {
        color: #fff !important;
    }

    /* متن و لینک‌ها: روشن روی زمینه‌ی تیره */
    footer.footer-holder,
    footer.footer-holder p,
    footer.footer-holder li,
    footer.footer-holder .linksFt,
    footer.footer-holder .mCard {
        color: #e6e6e6;
    }

        footer.footer-holder a {
            color: #f2f2f2;
        }

            footer.footer-holder a:hover {
                color: #fff;
                text-decoration: underline;
            }

        /* آیکن‌های شبکه‌های اجتماعی */
        footer.footer-holder .kfa,
        footer.footer-holder .fa {
            color: #e6e6e6;
        }

        /* نوار پایین (کپی‌رایت) */
        footer.footer-holder .copyright2 {
            background-color: var(--sy-footer-bottom);
        }

        footer.footer-holder .copyright,
        footer.footer-holder .copyright a {
            color: #9a9a9a;
        }

            footer.footer-holder .copyright a {
                color: #bdbdbd !important;
                text-decoration: underline;
            }

.sub1 > a {
    padding: 8px 4px;
}

.sub1:not(.nochild) > a:after {
}