.gotobottom {
    background: linear-gradient( 0deg, rgba(255,255,255,1) 1%, rgb(255,255,255,80%) 60%, rgb(255,255,255) 100%);
}

.spcat {
    text-align: center;
    display: inline-block;
    font-size: 11px;
    width: 100%
}

.PageSummery p {
    line-height: 39px;
    font-size: 14px;
}

.PageSummery {
    max-height: 94px;
    overflow: hidden;
}

.filtercard h3 {
    font-size: 14px;
    display: inline-block;
    margin-bottom: -1px;
    font-weight: 500;
    min-width: 80%;
}

.categories .box li > a {
    color: #656565;
}

.categories .box li.URLActive > a {
    font-weight: bold;
    font-size: 14px;
    color: #4285f4;
}


.sidebar-fix-holder .box {
    margin: 10px 0;
    padding: 0 17px;
}


.sidebar-fix-holder .categories .box > ul {
    margin-right: 0;
    display: block;
}

.sidebar-fix-holder .categories li li > span:before {
    content: " ";
    position: absolute;
    height: 30px;
    width: 1px;
    top: 7px;
    border-right: 1px dashed silver;
    right: -2px;
}

.sidebar-fix-holder .categories li li:last-child > span:before {
    height: 11px;
}

.sidebar-fix-holder .categories li li:first-child > span:before {
    height: 38px;
    top: -2px;
}

.sidebar-fix-holder .categories li li > span:after {
    content: " ";
    position: absolute;
    width: 18px;
    height: 1px;
    top: 16px;
    right: 0px;
    border-bottom: 1px dashed silver;
}

.sidebar-fix-holder .categories li > span {
    padding: 5px 7px;
    width: 11px;
    min-height: 10px;
    /* display: inline-block; */
    float: right;
    position: relative;
}

.sidebar-fix-holder .categories li li a {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.sidebar-fix-holder .categories li a {
    display: block;
    padding: 5px 22px 5px 0;
}

.sidebar-fix-holder .categories li span i {
    font-size: 11px;
    transition: all 0.3s;
    cursor: pointer;
}

.sidebar-fix-holder .categories li:hover span i {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari */
    transform: scale(1.5);
}

.sidebar-fix-holder .categories li.active > span i {
    transform: rotate(-90deg);
}

.categories .box li > a:hover {
    background-color: #f2f2f2;
    color: #812990;
}

.sidebar-fix-holder .categories ul ul:after {
    /* content:" "; */
    position: absolute;
    height: 93%;
    width: 1px;
    top: 0px;
    border-right: 1px dashed silver;
    right: -2px;
}

.sidebar-fix-holder .categories ul ul {
    margin-right: 25px;
    position: relative;
}

.sidebar-fix-holder .categories ul {
    margin-right: 20px;
    display: none;
}

    .sidebar-fix-holder .categories ul.active {
    }

.PageSummery a {
    text-decoration: underline;
    color: #0275d8;
}

#CP_Main_lblSummery {
}

:not(.ContentMyModalSOrt).SortUL:before {
    display: inline-block;
    content: attr(data-label);
    color: #3b3b3b;
    margin-left: 5px;
    font-size: 12px;
    font-size: .857rem;
    line-height: 21px;
    vertical-align: middle;
    white-space: nowrap;
}


.ContentMyModalSOrt li {
    width: 100%;
}

.SortUL li {
    display: inline-block;
}

.ContentMyModalSOrt .SortUL li a {
    padding-right: 31px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.SortUL li a {
    display: block;
    padding: 0 11px;
    position: relative;
    font-size: 12px;
    font-size: .757rem;
    line-height: 32px;
    vertical-align: middle;
    border-radius: 15px;
    white-space: nowrap;
    color: #898989;
}

.ContentMyModalSOrt .SortUL li {
    position: relative;
    border-bottom: 1px solid #e6e6e6;
}

    .ContentMyModalSOrt .SortUL li a:after {
        content: '';
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        top: 10px;
        right: 0;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #424242;
        flex-shrink: 0;
    }

    .ContentMyModalSOrt .SortUL li .isactive:after {
        background-color: #00bfd6;
    }

    .ContentMyModalSOrt .SortUL li .isactive {
        background-color: #ffffff;
        color: rgba(19,19,19,1);
    }

.SortUL li .isactive {
    background-color: #00bfd6;
    color: #fff;
}

.fitModal .ContentMyModalSOrt .SortUL li a {
    text-align: right;
}

.fastSerach {
    position: relative;
}

.clistingheader {
    margin-bottom: 10px;
    margin-top: 20px;
}

.fastSerach:after {
}

.filtercard {
    display: inline-block;
    width: 100%;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,d2d2d2+100 */
    /* background: rgb(245, 245, 245); */ /* Old browsers */
    font-family: var(--kw-font-fa, "iranyekan");
    /* border-bottom: 1px solid #e2e2e2; */
    /* border-radius: 4px 4px 0px 0px; */
    position: relative;
    padding: 8px 7px;
    /* margin-bottom: 10px; */
    margin-bottom: 7px;
    color: var(--color800);
}


.sh_r hr {
    position: relative;
    top: -4px;
    left: 0px; /* right: 11px; */ /* float: right; */ /* width: 87%; */
}

.sh_r b {
    font-weight: bold;
    font-size: 1rem;
    background: white;
    float: right;
    margin-left: 11px;
}

.sh_r {
    /* margin: 12px 0px; */
}


/* ===== نوار چیپ‌های فیلتر موبایل (category-mobile.js) ===== */
.kw-filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 2px;
    margin-bottom: 6px;
}

    .kw-filter-chips::-webkit-scrollbar {
        display: none;
    }

    .kw-filter-chips:empty {
        display: none;
    }

.kw-filter-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    background: #fff;
    color: #444;
    font-size: 13px;
    white-space: nowrap;
}

    .kw-filter-chip.is-active {
        border-color: var(--bs-primary, #198754);
        color: var(--bs-primary, #198754);
        background: rgba(25, 135, 84, .08);
    }

.kw-filter-chip__count {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--bs-primary, #198754);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

    .kw-filter-chip__count:empty {
        display: none;
    }

/* فلش چیپ‌های بازکننده‌ی کشو */
.kw-filter-chip__arrow {
    width: 7px;
    height: 7px;
    margin-top: -3px;
    /* لبه‌های فیزیکی (نه logical) تا در RTL هم گوشه‌ی پایین‌راست بماند و بعد از چرخش ۴۵ درجه فلش رو به پایین باشد */
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

/* دایره‌ی رادیویی چیپ‌های تک‌حالته (تخفیف‌دار / فقط موجود) */
.kw-filter-chip__radio {
    width: 16px;
    height: 16px;
    border: 2px solid #bbb;
    border-radius: 50%;
    background: #fff;
}

.kw-filter-chip.is-active .kw-filter-chip__radio {
    border-color: #ef394e;
    background: radial-gradient(circle, #ef394e 0 45%, #fff 50%);
}

/* ===== گروه‌بندی‌های placeholder صفحه‌ی جستجو: در موبایل یک ردیف با اسکرول افقی ===== */
@media (max-width: 575.98px) {
    .kw-hscroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .kw-hscroll::-webkit-scrollbar {
            display: none;
        }

        /* عرض هر آیتم = ۱۰۰٪ ÷ تعداد آیتم قابل‌دیدن (عدد اعشاری)؛ با ۳.۵ سه آیتم کامل و نصفِ چهارمی دیده می‌شود تا کاربر بفهمد ادامه دارد.
           برای تغییر، فقط --kw-hscroll-visible را عوض کنید. سلکتور قوی‌تر از col-* است تا عرض ستون‌ها را override کند */
        .row.kw-hscroll > * {
            flex: 0 0 auto;
            width: calc(100% / var(--kw-hscroll-visible, 3.5));
            max-width: none;
        }
}

/* ===== تغییر نحوه‌ی نمایش لیست محصولات در موبایل: لیست (پیش‌فرض) / ۲ ستون =====
   کلاس kw-view-grid روی <html> با یک اسکریپت کوچک در <head> و از روی کوکی kw_list_view ست می‌شود
   (قبل از رندر، بدون چشمک‌زدن؛ مستقل از Output Cache). تمام تغییر چیدمان فقط با CSS است. */
.kw-view-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 34px;
    padding: 0;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    background: #fff;
    color: #444;
}

    .kw-view-toggle svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }

    /* آیکون را بر اساس حالت فعلی عوض می‌کنیم: در حالت لیست آیکون «۲ ستون»، در حالت ۲ ستون آیکون «لیست» */
    .kw-view-toggle .kw-icon-list {
        display: none;
    }

html.kw-view-grid .kw-view-toggle .kw-icon-list {
    display: block;
}

html.kw-view-grid .kw-view-toggle .kw-icon-grid {
    display: none;
}

@media (max-width: 768px) {
    html.kw-view-grid #TopProductDiv .loadAjaxP > [class*="col-"]:not(.sh_r) {
        flex: 0 0 auto;
        width: 50%;
        padding-left: 4px;
        padding-right: 4px;
    }

    /* شمارنده‌ی صفحه‌بندی و پیام‌های کل‌عرض باید کل ردیف را بگیرند */
    html.kw-view-grid #TopProductDiv .loadAjaxP > .alert,
    html.kw-view-grid #TopProductDiv .loadAjaxP > div:not([class*="col-"]) {
        width: 100%;
    }

    html.kw-view-grid #TopProductDiv .pro-item {
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        height: 100%;
        position: relative;
    }

        html.kw-view-grid #TopProductDiv .pro-item.effect-bubba > a {
            flex-direction: column;
            flex: 1;
        }

        html.kw-view-grid #TopProductDiv .pro-item .proImg {
            float: none !important;
            flex: 0 0 auto;
            width: 100%;
        }

        html.kw-view-grid #TopProductDiv .pro-item div.proImg img {
            width: 100%;
            height: 150px !important;
            object-fit: contain;
        }

        html.kw-view-grid #TopProductDiv .pro-item .l_title {
            flex: 1;
            padding: 0 6px 6px;
        }

        html.kw-view-grid #TopProductDiv .pro-item .titlePro h3 {
            font-size: 12px;
            line-height: 1.7;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        html.kw-view-grid #TopProductDiv article.pro-item .mg1_hv {
            position: static;
            width: 100%;
        }
}

/* ===== اسکلتون نوار چیپ‌ها تا لود فیلترها =====
   ارتفاع چیپ واقعی، دکمه‌ی نمایش و اسکلتون هر سه ۳۴px ثابت است تا هنگام جایگزینی، صفحه نپرد (بدون Layout Shift). */
.kw-filter-chip,
.kw-view-toggle,
.kw-chip-skeleton {
    box-sizing: border-box;
    height: 34px;
}

.kw-chip-skeleton {
    flex: 0 0 auto;
    width: 96px;
    border-radius: 20px;
    background: #e9ecef;
    animation: kwChipSkeletonPulse 1.2s ease-in-out infinite;
}

    .kw-chip-skeleton:first-child {
        width: 36px;
    }

    .kw-chip-skeleton:nth-child(3) {
        width: 80px;
    }

@keyframes kwChipSkeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

/* ---------- برگشت به لیست بعد از Back (kwListBack در searchjustproduct.js) ---------- */
/* تا وقتی صفحه‌های قبلی دوباره گرفته می‌شوند، لیست دیده نمی‌شود (ولی جایش را نگه می‌دارد) تا کاربر پرش از بالای لیست به
   محصول را نبیند؛ بعد یک‌جا در همان نقطه ظاهر می‌شود. kwListBack حداکثر بعد از ۸ ثانیه کلاس را برمی‌دارد. */
.kw-list-restoring .loadAjaxP {
    visibility: hidden;
}

.kw-list-restoring #div_Search_Results::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 5;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid rgba(0, 0, 0, .08);
    border-top-color: var(--LogoOrgColor, #e6456f);
    border-radius: 50%;
    animation: kwListSpin .7s linear infinite;
}

@keyframes kwListSpin {
    to { transform: rotate(360deg); }
}

/* ورود نرم کارت‌های «نمایش بیشتر» در موبایل (فقط transform/opacity؛ لود اول لیست انیمیشن ندارد تا LCP دیر نشود) */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    .kw-card-in {
        animation: kwCardIn .38s cubic-bezier(.2, .7, .2, 1) both;
        animation-delay: calc(var(--kw-i, 0) * 35ms);
    }
}

@keyframes kwCardIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}