/* ============================================================================
   AROVANO — PRODUCTS / FILTER PAGE
   نسخه: 3.0 (بهینه‌شده)
   ============================================================================ */

/* ============================================
   ۱. متغیرها و پایه
   ============================================ */
:root {
    /* رنگ‌ها */
    --arv-teal: #008f86;
    --arv-teal-dark: #00766f;
    --arv-teal-soft: #edf9f7;
    --arv-gold: #efa91f;
    --arv-red: #dc4658;
    --arv-text: #20282d;
    --arv-muted: #8b969c;
    --arv-border: #e5ecee;
    --arv-surface: #ffffff;
    --arv-page: #f7faf9;
    --arv-shadow-sm: 0 5px 18px rgba(24, 39, 44, .045);
    --arv-shadow-md: 0 14px 34px rgba(24, 39, 44, .085);
    /* تایپوگرافی */
    --fs-base: 15px;
    --fs-lead: 17px;
    --fs-h1: 30px;
    --fs-h2: 24px;
    --fs-h3: 22px;
    --fs-h4: 18px;
    --fs-card-title: 15px;
    --fs-price: 18px;
    --fs-label: 13px;
    --fs-small: 12px;
    --fs-btn: 14px;
    --lh-base: 1.9;
    --lh-tight: 1.6;
    --lh-card: 1.7;
}

/* ============================================
   ۲. کانتینر اصلی
   ============================================ */
.filter-page {
    position: relative;
    min-height: 100vh;
    padding: 26px 0 55px;
    background: radial-gradient(circle at 100% 0%, rgba(0, 143, 134, .055), transparent 25%), radial-gradient(circle at 0% 20%, rgba(239, 169, 31, .035), transparent 20%), linear-gradient(180deg, #f8fbfa 0%, #f4f8f7 100%);
}

.filter-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 18px;
}

/* ============================================
   ۳. هدر صفحه
   ============================================ */
.page-header {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 25px 30px;
    border: 1px solid #e4ecec;
    border-radius: 22px;
    background: radial-gradient(circle at 100% 0%, rgba(0, 143, 134, .09), transparent 28%), radial-gradient(circle at 0% 100%, rgba(239, 169, 31, .055), transparent 25%), linear-gradient(135deg, #ffffff 0%, #fbfdfd 100%);
    box-shadow: var(--arv-shadow-sm);
}

    .page-header::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 5px;
        height: 100%;
        border-radius: 0 22px 22px 0;
        background: linear-gradient(180deg, #00a99d, #008078);
    }

    .page-header::after {
        content: "";
        position: absolute;
        left: -70px;
        bottom: -95px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        border: 1px solid rgba(0, 143, 134, .06);
        pointer-events: none;
    }

    .page-header h1 {
        position: relative;
        z-index: 1;
        margin: 0 0 8px;
        color: var(--arv-text);
        font-size: var(--fs-h1);
        font-weight: 900;
        line-height: 1.4;
        text-align: center;
        letter-spacing: -.35px;
    }

    .page-header > div {
        position: relative;
        z-index: 1;
        color: var(--arv-muted);
        font-size: var(--fs-base);
        line-height: var(--lh-base);
    }

/* ============================================
   ۴. دکمه‌های فیلتر موبایل
   ============================================ */
.mobile-filter-triggers {
    display: none;
    gap: 8px;
    flex-wrap: nowrap;
    margin-bottom: 14px;
    padding: 2px 1px 5px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    white-space: nowrap;
    width: 100%;
}

    .mobile-filter-triggers::-webkit-scrollbar {
        display: none;
    }

.mobile-filter-trigger {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #dfe9e9;
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    color: #465258;
    box-shadow: 0 4px 13px rgba(24, 39, 44, .045);
    font-size: var(--fs-label);
    font-weight: 750;
    cursor: pointer;
    transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

    .mobile-filter-trigger i {
        color: var(--arv-teal);
        font-size: 14px;
    }

    .mobile-filter-trigger:hover {
        transform: translateY(-2px);
        border-color: #9ed8d2;
        box-shadow: 0 8px 18px rgba(24, 39, 44, .07);
    }

.mobile-filter-trigger-main {
    background: linear-gradient(135deg, #effaf8, #e5f7f4);
    border-color: #9ddbd3;
    color: #007b73;
}

    .mobile-filter-trigger-main .badge-count {
        background: var(--arv-teal);
        color: #fff;
        box-shadow: 0 3px 8px rgba(0, 143, 134, .18);
    }

.mobile-filter-trigger .badge-count {
    min-width: 20px;
    padding: 2px 7px;
    border-radius: 50%;
    color: #fff;
    font-size: var(--fs-small);
    font-weight: 700;
    text-align: center;
}

.mobile-active-filter-triggers {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: max-content;
    min-width: max-content;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.mobile-active-filter-trigger {
    position: relative;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 7px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #b9e4de;
    border-radius: 12px;
    background: #eef9f7;
    color: #14776f;
    font-size: var(--fs-label);
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(21, 95, 83, .06);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

    .mobile-active-filter-trigger:hover {
        background: #c7f1e8;
        border-color: #169d89;
    }

    .mobile-active-filter-trigger .category-count {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 10px;
        background: rgba(21, 95, 83, .12);
        color: #155f53;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: var(--fs-small);
        font-weight: 800;
    }

.quick-mobile-toggle {
    flex: 0 0 auto;
    white-space: nowrap;
}

    .quick-mobile-toggle.active {
        background: #d8f7ef !important;
        border-color: #20b99f !important;
        color: #155f53 !important;
        box-shadow: 0 2px 8px rgba(32, 185, 159, .16);
    }

        .quick-mobile-toggle.active i {
            color: #155f53 !important;
        }

/* تعداد محصولات — موبایل */
.mobile-result-count {
    display: none;
    margin: 0 0 12px;
    padding: 8px 2px 11px;
    border-bottom: 1px solid #e8eeee;
    color: #899398;
    font-size: var(--fs-label);
}

    .mobile-result-count strong {
        color: var(--arv-text);
        font-size: var(--fs-h4);
    }

/* ============================================
   ۵. سایدبار فیلتر (دسکتاپ)
   ============================================ */
.filter-sidebar {
    position: sticky;
    top: 18px;
    padding: 15px;
    border: 1px solid #e4ebec;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%);
    box-shadow: var(--arv-shadow-sm);
}

/* جستجو + فیلترهای سریع */
.search-and-quick-filters {
    margin-bottom: 12px;
    padding: 11px;
    border: 1px solid #e8eeee;
    border-radius: 15px;
    background: #f8fbfb;
    transition: border-color .25s ease, box-shadow .25s ease;
}

    .search-and-quick-filters:focus-within {
        border-color: #86d0c8;
        box-shadow: 0 0 0 3px rgba(0, 143, 134, .08);
    }

.search-box {
    margin-bottom: 9px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: transparent;
}

    .search-input-wrapper .search-icon {
        position: absolute;
        right: 13px;
        color: #9aa4a8;
        font-size: 15px;
        pointer-events: none;
        z-index: 1;
    }

    .search-input-wrapper .search-input {
        width: 100%;
        min-height: 42px;
        padding: 8px 39px 8px 12px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--arv-text);
        font-size: var(--fs-base);
        box-shadow: none;
        outline: none;
    }

        .search-input-wrapper .search-input::placeholder {
            color: #88909b;
        }

/* فیلترهای سریع (Toggle) */
.quick-filters {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 3px 11px;
    border: 1px solid #e8eeee;
    border-radius: 12px;
    background: #fff;
}

.toggle-switch {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    cursor: pointer;
    user-select: none;
    position: relative;
}

    .toggle-switch:not(:last-child) {
        border-bottom: 1px solid #eee;
    }

    .toggle-switch input[type="checkbox"] {
        display: none;
    }

.toggle-slider {
    position: relative;
    width: 38px;
    height: 21px;
    flex-shrink: 0;
    border-radius: 50px;
    background: #dfe5e7;
    transition: all 0.3s ease;
}

    .toggle-slider::before {
        content: '';
        position: absolute;
        left: 3px;
        bottom: 3px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
    }

.toggle-switch input:checked + .toggle-slider {
    background: var(--arv-teal);
}

    .toggle-switch input:checked + .toggle-slider::before {
        transform: translateX(17px);
    }

.toggle-label {
    color: #59656a;
    font-size: var(--fs-label);
    font-weight: 700;
    transition: color 0.3s ease;
}

.toggle-switch input:checked ~ .toggle-label {
    color: #1a1a2e;
    font-weight: 600;
}

/* Badgeهای فعال */
.active-filters-container {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid #dcefeb;
    border-radius: 13px;
    background: #f3fbf9;
}

    .active-filters-container.active {
        display: flex;
    }

.active-filters-label {
    color: #68757a;
    font-size: var(--fs-small);
    font-weight: 500;
}

.active-filters-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px 4px 5px;
    border: 1px solid #cbe8e3;
    border-radius: 9px;
    background: #fff;
    color: #26736c;
    font-size: var(--fs-small);
    font-weight: 500;
}

    .filter-badge .badge-icon {
        color: var(--arv-teal);
        font-size: 14px;
    }

    .filter-badge .badge-remove {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.05);
        color: #666;
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .filter-badge .badge-remove:hover {
            background: #e03a3a;
            color: #fff;
            transform: scale(1.1);
        }

.clear-all-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border: 1px solid #f0d6d9;
    border-radius: 9px;
    background: transparent;
    color: #b74b58;
    font-size: var(--fs-small);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .clear-all-filters-btn:hover {
        background: #fee2e2;
        border-color: #fca5a5;
        color: #dc2626;
    }

    .clear-all-filters-btn i {
        font-size: 14px;
    }

/* هدر سایدبار */
.filter-sidebar .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px;
    padding: 3px 3px 12px;
    border-bottom: 1px solid #edf1f2;
}

    .filter-sidebar .filter-header h5 {
        display: flex;
        align-items: center;
        gap: 7px;
        margin: 0;
        color: var(--arv-text);
        font-size: var(--fs-h4);
        font-weight: 900;
    }

        .filter-sidebar .filter-header h5::before {
            content: "\f0b0";
            width: 29px;
            height: 29px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            color: #fff;
            background: var(--arv-teal);
            font-family: "Font Awesome 6 Free";
            font-size: 12px;
            font-weight: 900;
        }

    .filter-sidebar .filter-header a,
    #clearAllLink {
        color: #c35460;
        font-size: var(--fs-small);
        font-weight: 750;
        text-decoration: none;
        cursor: pointer;
    }

/* ============================================
   ۶. گروه‌های فیلتر
   ============================================ */
.filter-group {
    margin-bottom: 8px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e8eeee;
    border-radius: 13px;
    background: #fff;
    transition: all 0.2s ease;
}

    .filter-group:last-child {
        margin-bottom: 0;
    }

    .filter-group:hover {
        border-color: #d7e6e5;
    }

    .filter-group .filter-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 43px;
        padding: 10px 12px;
        color: #354147;
        font-size: var(--fs-label);
        font-weight: 850;
        background: linear-gradient(180deg, #fff, #fcfdfd);
        cursor: pointer;
        user-select: none;
    }

        .filter-group .filter-title .title-text {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .filter-group .filter-title .chevron-icon,
        .filter-group .filter-title > i {
            width: 23px;
            height: 23px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 7px;
            color: #8e9a9e;
            background: #f2f6f6;
            font-size: 14px;
            transition: transform 0.3s ease;
        }

    .filter-group.open .filter-title {
        color: var(--arv-teal);
        background: #f8fcfb;
    }

        .filter-group.open .filter-title .chevron-icon,
        .filter-group.open .filter-title > i {
            color: var(--arv-teal);
            background: #eaf7f5;
            transform: rotate(180deg);
        }

    .filter-group .filter-options {
        display: none;
        flex-direction: column;
        gap: 3px;
        margin-top: 0;
        padding: 8px 11px 10px;
        border-top: 1px solid #f0f3f3;
    }

    .filter-group.open .filter-options {
        display: flex;
    }

    .filter-group .filter-options .option-item {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 31px;
        margin: 0;
        padding: 5px 2px;
        border-radius: 8px;
        color: #59656a;
        font-size: var(--fs-base);
        font-weight: 600;
        cursor: pointer;
        transition: 0.2s;
    }

        .filter-group .filter-options .option-item:hover {
            padding-right: 7px;
            color: var(--arv-teal);
            background: #f5fbfa;
        }

        .filter-group .filter-options .option-item input[type="checkbox"] {
            width: 15px;
            height: 15px;
            flex-shrink: 0;
            border: 2px solid #d2dce8;
            border-radius: 4px;
            accent-color: var(--arv-teal);
            cursor: pointer;
        }

        .filter-group .filter-options .option-item .count {
            margin-right: auto;
            color: #a1aaae;
            font-size: var(--fs-small);
        }

.option-item.disabled-option {
    opacity: 0.5;
    cursor: not-allowed;
}

    .option-item.disabled-option input {
        cursor: not-allowed;
    }

/* نقطه سبز */
.filter-active-indicator {
    display: none;
    align-items: center;
    margin-right: 4px;
}

    .filter-active-indicator .status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--arv-teal);
        display: inline-block;
        box-shadow: 0 0 0 3px rgba(0, 143, 134, .08);
        animation: pulse 1.5s ease-in-out infinite;
    }

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ============================================
   ۷. اسلایدر قیمت
   ============================================ */
.price-range-wrapper {
    position: relative;
    width: 100%;
    padding: 19px 5px 8px;
    direction: rtl;
}

.price-range-track {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 27px;
    height: 5px;
    border-radius: 10px;
    background: #e8eeee;
    pointer-events: none;
}

.price-range-selected {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #00a99d, #00877f);
}

.price-range-wrapper input[type="range"] {
    position: absolute;
    left: 0;
    right: 0;
    top: 20px;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    background: transparent;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    direction: rtl;
}

    .price-range-wrapper input[type="range"]::-webkit-slider-runnable-track {
        height: 5px;
        background: transparent;
    }

    .price-range-wrapper input[type="range"]::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
        margin-top: -7px;
        border: 3px solid #fff;
        border-radius: 50%;
        background: var(--arv-teal);
        box-shadow: 0 3px 9px rgba(0, 143, 134, .22);
        cursor: pointer;
        pointer-events: auto;
        appearance: none;
        -webkit-appearance: none;
    }

    .price-range-wrapper input[type="range"]::-moz-range-track {
        height: 5px;
        background: transparent;
    }

    .price-range-wrapper input[type="range"]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border: 3px solid #fff;
        border-radius: 50%;
        background: var(--arv-teal);
        box-shadow: 0 3px 9px rgba(0, 143, 134, .22);
        cursor: pointer;
        pointer-events: auto;
    }

.price-values {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    color: #69767b;
    font-size: var(--fs-small);
    font-weight: 600;
}

.min-price-value,
.max-price-value {
    direction: rtl;
    white-space: nowrap;
}

/* دکمه اعمال فیلتر */
.btn-apply-filter {
    width: 100%;
    min-height: 43px;
    margin-top: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #00a99d, #00867e);
    color: #fff;
    font-size: var(--fs-btn);
    font-weight: 850;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 8px 17px rgba(0, 143, 134, .16);
}

    .btn-apply-filter:hover {
        transform: translateY(-2px);
        background: linear-gradient(135deg, #008f86, #006f69);
        box-shadow: 0 12px 22px rgba(0, 143, 134, .22);
    }

/* ============================================
   ۸. هدر محصولات + مرتب‌سازی
   ============================================ */
.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 58px;
    margin-bottom: 15px;
    padding: 10px 15px;
    border: 1px solid #e4ebec;
    border-radius: 16px;
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--arv-shadow-sm);
}

    .products-header .result-count {
        color: #879297;
        font-size: var(--fs-base);
        font-weight: 650;
    }

        .products-header .result-count strong {
            color: var(--arv-text);
            font-size: var(--fs-h4);
            font-weight: 900;
        }

    .products-header .sort-options {
        display: flex;
        align-items: center;
        gap: 7px;
    }

        .products-header .sort-options label {
            color: #879297;
            font-size: var(--fs-label);
            margin: 0;
        }

        .products-header .sort-options select {
            min-height: 37px;
            padding: 6px 29px 6px 10px;
            border: 1px solid #dfe8e8;
            border-radius: 10px;
            outline: none;
            color: #39464b;
            background: #f9fbfb;
            font-size: var(--fs-label);
            font-weight: 750;
            cursor: pointer;
        }

            .products-header .sort-options select:focus {
                border-color: #8fd4cd;
                box-shadow: 0 0 0 3px rgba(0, 143, 134, .07);
            }

/* ============================================
   ۹. گرید محصولات + کارت
   ============================================ */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.product-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    display: block;
    border: 1px solid #e5ecee;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #fcfdfd 100%);
    box-shadow: 0 2px 5px rgba(24, 39, 44, .025), 0 7px 18px rgba(24, 39, 44, .04);
    text-decoration: none;
    color: inherit;
    transition: transform .32s cubic-bezier(.22, 1, .36, 1), border-color .28s ease, box-shadow .32s ease, background .28s ease;
}

    .product-card::before {
        content: "";
        position: absolute;
        inset: 4px;
        z-index: 1;
        pointer-events: none;
        border: 1px solid rgba(0, 143, 134, .055);
        border-radius: 14px;
        transition: border-color .3s ease, inset .3s ease;
    }

    .product-card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 4;
        width: 58%;
        height: 3px;
        border-radius: 0 0 5px 5px;
        background: linear-gradient(90deg, transparent, #00a99d, transparent);
        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
        transition: transform .38s cubic-bezier(.22, 1, .36, 1);
        pointer-events: none;
    }

    .product-card:hover {
        transform: translateY(-6px);
        border-color: rgba(0, 143, 134, .28);
        background: #fff;
        box-shadow: 0 4px 8px rgba(24, 39, 44, .025), 0 18px 36px rgba(24, 39, 44, .10), 0 22px 42px rgba(0, 143, 134, .06);
    }

        .product-card:hover::before {
            inset: 6px;
            border-color: rgba(0, 143, 134, .15);
        }

        .product-card:hover::after {
            transform: translateX(-50%) scaleX(1);
        }

    /* تصویر محصول */
    .product-card .product-image {
        position: relative;
        height: 210px;
        margin: 8px 8px 0;
        padding: 17px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: radial-gradient(circle at 50% 42%, rgba(0, 143, 134, .035), transparent 58%), linear-gradient(145deg, #fafcfc 0%, #f3f7f7 100%);
    }

        .product-card .product-image::after {
            content: "";
            position: absolute;
            left: 12%;
            right: 12%;
            bottom: 9px;
            height: 18px;
            border-radius: 50%;
            background: rgba(29, 45, 50, .06);
            filter: blur(10px);
            pointer-events: none;
        }

        .product-card .product-image img {
            position: relative;
            z-index: 2;
            max-width: 88%;
            max-height: 88%;
            object-fit: contain;
            transition: transform .45s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
        }

    .product-card:hover .product-image img {
        transform: scale(1.07);
        filter: drop-shadow(0 11px 18px rgba(20, 35, 40, .10));
    }

    /* Badge تخفیف */
    .product-card .product-image .discount-badge {
        position: absolute;
        top: 9px;
        right: 9px;
        z-index: 5;
        min-height: 25px;
        padding: 4px 8px;
        border-radius: 9px;
        background: linear-gradient(135deg, #e85a68, #ce394d);
        color: #fff;
        font-size: var(--fs-small);
        font-weight: 900;
        box-shadow: 0 6px 13px rgba(211, 61, 80, .18);
    }

    /* دکمه + (سبد خرید) */
    .product-card .plus-small-btn {
        position: absolute;
        left: 10px;
        bottom: 10px;
        z-index: 7;
        width: 34px;
        height: 34px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, .7);
        border-radius: 11px;
        background: linear-gradient(145deg, #00aa9e, #00847c);
        color: #fff;
        box-shadow: 0 7px 15px rgba(0, 143, 134, .25);
        cursor: pointer;
        transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
    }

    .product-card:hover .plus-small-btn {
        transform: scale(1.12) rotate(90deg);
        box-shadow: 0 10px 19px rgba(0, 143, 134, .30);
    }

    /* بدنه کارت */
    .product-card .product-body {
        position: relative;
        z-index: 2;
        min-width: 0;
        padding: 14px 15px 15px;
    }

        .product-card .product-body .product-title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: 42px;
            height: 42px;
            margin-bottom: 5px;
            color: #20282d;
            font-size: var(--fs-card-title);
            font-weight: 850;
            line-height: var(--lh-card);
            transition: color .25s ease;
        }

    .product-card:hover .product-body .product-title {
        color: #00877f;
    }

    .product-card .product-body .product-brand {
        display: block;
        min-height: 18px;
        margin-bottom: 7px;
        overflow: hidden;
        color: #98a2a6;
        font-size: var(--fs-small);
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Variants */
    .product-card .product-body .product-variants {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin: 4px 0 8px;
        min-height: 0;
    }

        .product-card .product-body .product-variants .variant-badge,
        .product-card .product-body .product-variants .variant-more {
            padding: 3px 7px;
            border-radius: 7px;
            font-size: var(--fs-small);
            font-weight: 700;
        }

        .product-card .product-body .product-variants .variant-badge {
            border: 1px solid #e2ebeb;
            background: #f5f8f8;
            color: #68757a;
        }

        .product-card .product-body .product-variants .variant-more {
            background: #eaf7f5;
            color: #00877f;
        }

    /* قیمت */
    .product-card .product-body .product-price {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px;
        min-height: 31px;
    }

        .product-card .product-body .product-price .final-price {
            color: #00877f;
            font-size: var(--fs-price);
            font-weight: 950;
            letter-spacing: -.15px;
        }

        .product-card .product-body .product-price .original-price {
            color: #adb5b8;
            font-size: var(--fs-small);
            text-decoration: line-through;
        }

        .product-card .product-body .product-price .discount-percent {
            padding: 3px 6px;
            border-radius: 6px;
            background: #fff0f2;
            color: #d8485a;
            font-size: var(--fs-small);
            font-weight: 900;
        }

    .product-card .product-body .price-range {
        color: #9aa4a8;
        font-size: var(--fs-small);
    }

    /* ناموجود */
    .product-card.out-of-stock-card {
        background: #fbfcfc;
    }

        .product-card.out-of-stock-card .product-image {
            background: #f4f6f6;
        }

        .product-card.out-of-stock-card:hover {
            transform: translateY(-2px);
            border-color: #e1e6e7;
        }

        .product-card.out-of-stock-card .product-image img {
            filter: grayscale(100%) brightness(.9);
        }

        .product-card.out-of-stock-card:hover .product-image img {
            filter: grayscale(100%) brightness(.86);
        }

.out-of-stock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 31px;
    margin-top: 8px;
    padding: 5px 10px;
    border: 1px solid #e1e5e6;
    border-radius: 9px;
    background: #f1f3f3;
    color: #8d969a;
    font-size: var(--fs-small);
    font-weight: 800;
    cursor: default;
}

    .out-of-stock-btn i {
        color: #a5adaf;
        font-size: 12px;
    }

/* ============================================
   ۱۰. حالت خالی
   ============================================ */
#emptyProductsState {
    min-height: 250px;
    padding: 55px 20px;
    border: 1px dashed #dce7e6;
    border-radius: 18px;
    background: rgba(255, 255, 255, .75);
    color: #929da1;
    font-size: var(--fs-base);
    text-align: center;
}

    #emptyProductsState i {
        display: block;
        margin-bottom: 12px;
        color: #b2c1c1;
        font-size: 36px;
    }

/* ============================================
   ۱۱. Load More
   ============================================ */
.load-more-wrapper {
    padding: 24px 0;
    text-align: center;
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 220px;
    padding: 12px 32px;
    border: 2px solid #00a693;
    border-radius: 50px;
    background: #fff;
    color: #00a693;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

    .btn-load-more:hover {
        transform: translateY(-2px);
        background: #00a693;
        color: #fff;
        box-shadow: 0 6px 20px rgba(0, 166, 147, 0.3);
    }

    .btn-load-more i {
        font-size: 18px;
    }

.load-more-counter {
    font-size: 13px;
    opacity: 0.85;
    font-weight: 400;
}

.load-more-progress,
.load-more-end {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    color: #88909b;
    font-size: 14px;
    font-weight: 500;
}

.load-more-end {
    color: #00a693;
    font-weight: 600;
}

.load-more-progress .spin {
    display: inline-block;
    animation: lm-spin 1s linear infinite;
    font-size: 18px;
}

@keyframes lm-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   ۱۲. توضیحات کامل دسته‌بندی
   ============================================ */
.category-full-description {
    margin-top: 30px;
    padding: 25px 28px;
    border: 1px solid #e4ebec;
    border-radius: 19px;
    background: linear-gradient(180deg, #fff, #fbfdfd);
    box-shadow: var(--arv-shadow-sm);
}

    .category-full-description h2 {
        color: var(--arv-text);
        font-size: var(--fs-h2);
        font-weight: 900;
    }

    .category-full-description h3 {
        color: var(--arv-text);
        font-size: var(--fs-h3);
        font-weight: 900;
    }

    .category-full-description img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        border-radius: 15px;
    }

    .category-full-description .description-content {
        color: #667277;
        font-size: var(--fs-base);
        line-height: var(--lh-base);
    }

        .category-full-description .description-content p {
            margin-bottom: 16px;
        }

        .category-full-description .description-content ul,
        .category-full-description .description-content ol {
            padding-right: 20px;
            margin-bottom: 10px;
        }

        .category-full-description .description-content a {
            color: var(--arv-teal);
            text-decoration: none;
        }

            .category-full-description .description-content a:hover {
                text-decoration: underline;
            }

        /* جداول داخل توضیحات */
        .category-full-description .description-content table {
            width: 100%;
            margin: 20px 0;
            border-collapse: separate;
            border-spacing: 0;
            overflow: hidden;
            border: 1px solid #e2ebeb;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 4px 16px rgba(24, 39, 44, 0.05);
            font-size: var(--fs-base);
            line-height: var(--lh-tight);
        }

            .category-full-description .description-content table thead {
                background: linear-gradient(135deg, #00a99d 0%, #00877f 100%);
            }

                .category-full-description .description-content table thead tr th {
                    position: relative;
                    padding: 14px 16px;
                    color: #ffffff;
                    font-size: var(--fs-label);
                    font-weight: 800;
                    text-align: right;
                    border: none;
                    white-space: nowrap;
                    letter-spacing: 0.2px;
                }

                    .category-full-description .description-content table thead tr th strong {
                        color: #ffffff;
                        font-weight: 800;
                    }

                    .category-full-description .description-content table thead tr th:not(:last-child)::after {
                        content: "";
                        position: absolute;
                        left: 0;
                        top: 25%;
                        height: 50%;
                        width: 1px;
                        background: rgba(255, 255, 255, 0.2);
                    }

            .category-full-description .description-content table tbody tr {
                transition: background 0.2s ease;
            }

                .category-full-description .description-content table tbody tr:nth-child(even) {
                    background: #f8fbfb;
                }

                .category-full-description .description-content table tbody tr:hover {
                    background: #eef9f7;
                }

                .category-full-description .description-content table tbody tr:not(:last-child) td {
                    border-bottom: 1px solid #eef3f3;
                }

                .category-full-description .description-content table tbody tr td {
                    padding: 13px 16px;
                    color: #4a555a;
                    font-size: var(--fs-base);
                    font-weight: 500;
                    text-align: right;
                    vertical-align: middle;
                    line-height: var(--lh-base);
                }

                    .category-full-description .description-content table tbody tr td:first-child {
                        color: #1a1a2e;
                        font-weight: 700;
                        background: rgba(0, 143, 134, 0.03);
                    }

                .category-full-description .description-content table tbody tr:hover td:first-child {
                    color: #00877f;
                    background: rgba(0, 143, 134, 0.06);
                }

/* ============================================
   ۱۳. FAQ
   ============================================ */
.category-faq {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid #e2ebeb;
    border-radius: 19px;
    background: #fbfdfd;
    box-shadow: var(--arv-shadow-sm);
}

    .category-faq .faq-header {
        padding: 17px 20px;
        border-bottom: 1px solid #e9eeee;
        background: #fff;
        text-align: center;
    }

        .category-faq .faq-header h4 {
            color: var(--arv-text);
            font-size: var(--fs-h4);
            font-weight: 900;
            margin: 0;
        }

    .category-faq .faq-body {
        padding: 20px;
    }

.faq-item {
    margin-bottom: 8px;
    overflow: hidden;
    border: 1px solid #e5ecee;
    border-radius: 12px;
    background: #fff;
    transition: all 0.3s ease;
}

    .faq-item:last-child {
        margin-bottom: 0;
    }

    .faq-item:hover {
        border-color: #b6dfda;
        box-shadow: 0 7px 16px rgba(0, 143, 134, .06);
    }

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 15px;
    border-radius: 12px;
    background: #fff;
    color: #354147;
    font-size: var(--fs-base);
    font-weight: 750;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

    .faq-question:hover {
        background: #f7fbfa;
    }

    .faq-question .transition-icon {
        color: var(--arv-teal);
        font-size: 16px;
        transition: transform 0.3s ease;
    }

.faq-item.open .faq-question .transition-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    color: #68757a;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.open .faq-answer {
    max-height: 500px;
    padding: 18px 20px 20px;
    border-top: 1px solid #e2e8f0;
}

.faq-answer p {
    margin-bottom: 8px;
}

.faq-answer ul,
.faq-answer ol {
    padding-right: 20px;
    margin-bottom: 8px;
}

.faq-answer a {
    color: var(--arv-teal);
    text-decoration: none;
}

    .faq-answer a:hover {
        text-decoration: underline;
    }

/* ============================================
   ۱۴. دکمه "پاک کردن همه" — موبایل
   ============================================ */
.mobile-clear-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 16px;
    padding: 12px 16px;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    background: #fff5f5;
    color: #dc3545;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

    .mobile-clear-all-btn:hover {
        background: #dc3545;
        border-color: #dc3545;
        color: #fff;
    }

    .mobile-clear-all-btn:active {
        transform: scale(0.98);
    }

    .mobile-clear-all-btn i {
        font-size: 16px;
    }

/* ============================================
   ۱۵. فیلترهای موبایل (سایدبار)
   ============================================ */
.mobile-category-filter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 9px 12px;
    border: 1px solid #e7edf2;
    border-radius: 12px;
    background: #fff;
    color: #30343b;
    font-size: var(--fs-label);
    cursor: pointer;
    transition: all .2s ease;
}

    .mobile-category-filter-item .item-name {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
    }

    .mobile-category-filter-item .item-label-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-category-filter-item .item-check {
        color: #c7d0d6;
        font-size: 16px;
        flex: 0 0 auto;
        transition: color .2s ease, transform .2s ease;
    }

    .mobile-category-filter-item.selected {
        background: #f0fbf7;
        border-color: #9adfce;
    }

        .mobile-category-filter-item.selected .item-check {
            color: #20a98f;
            transform: scale(1.05);
        }

.mobile-category-checkbox {
    width: 19px;
    height: 19px;
    accent-color: #20a98f;
    flex: 0 0 auto;
}

/* فیلترهای مرتب‌سازی موبایل */
.mobile-sort-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.mobile-sort-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid #e7edf2;
    border-radius: 12px;
    background: #fff;
    color: #30343b;
    font-size: var(--fs-base);
    cursor: pointer;
    transition: .2s ease;
}

    .mobile-sort-option .sort-radio {
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
        accent-color: #20a98f;
    }

    .mobile-sort-option.selected {
        background: #f0fbf7;
        border-color: #9adfce;
        color: #155f53;
        font-weight: 700;
    }


/* ============================================
   مخفی کردن سایدبار موبایل در حالت دسکتاپ
   ============================================ */
#mobileFilterOverlay,
#mobileFilterSidebar {
    display: none;
}
/* ============================================================================
   ۱۶. RESPONSIVE — TABLET (max-width: 991.98px)
   ============================================================================ */
@media (max-width: 991.98px) {

    /* ---------- تایپوگرافی ---------- */
    :root {
        --fs-base: 14px;
        --fs-h1: 24px;
        --fs-h2: 21px;
        --fs-h3: 19px;
        --fs-h4: 17px;
        --fs-card-title: 14px;
        --fs-price: 17px;
        --fs-label: 12.5px;
        --fs-small: 12px;
        --fs-btn: 13px;
    }

    /* ---------- کانتینر ---------- */
    .filter-page {
        padding: 16px 0 35px;
    }

    .filter-container {
        padding: 0 12px;
    }

    .page-header {
        margin-bottom: 12px;
        padding: 17px;
        border-radius: 17px;
    }

        .page-header h1 {
            font-size: var(--fs-h1);
        }

        .page-header > div {
            font-size: var(--fs-base);
        }

    /* ---------- فیلترها ---------- */
    .filter-sidebar {
        display: none;
    }

    .mobile-filter-triggers {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
    }

    .mobile-result-count {
        display: block;
    }

    .products-header {
        display: none;
    }

    #activeFiltersContainer,
    #activeFiltersContainerMobile {
        display: none !important;
    }

    /* ---------- Overlay و سایدبار موبایل ---------- */
    #mobileFilterOverlay {
        position: fixed !important;
        inset: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, .45);
        z-index: 99990;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility .25s ease;
    }

        #mobileFilterOverlay.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

    #mobileFilterSidebar {
        position: fixed !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(390px, 92vw);
        max-width: 390px;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #fff;
        border-radius: 0;
        z-index: 99991;
        box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
        transform: translateX(105%);
        visibility: hidden;
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    }

        #mobileFilterSidebar.open {
            transform: translateX(0);
            visibility: visible;
        }

        #mobileFilterSidebar.category-sheet {
            top: auto;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            max-width: none;
            height: auto;
            max-height: min(72vh, 560px);
            border-radius: 20px 20px 0 0;
            transform: translateY(105%);
            box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
        }

            #mobileFilterSidebar.category-sheet.open {
                transform: translateY(0);
                visibility: visible;
            }

            #mobileFilterSidebar.category-sheet #mobileFilterContent {
                max-height: calc(min(72vh, 560px) - 64px);
                padding: 12px 16px 24px;
            }

        #mobileFilterSidebar .mobile-filter-header {
            position: relative;
            flex: 0 0 64px;
            min-height: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid #eee;
            border-radius: 0;
            background: #fff;
            z-index: 2;
        }

    #mobileFilterTitle {
        margin: 0;
        font-size: var(--fs-h4);
        font-weight: 700;
        color: #1a1a2e;
    }

    #mobileFilterClose {
        width: 38px;
        height: 38px;
        min-width: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        background: #f5f5f5;
        cursor: pointer;
        flex-shrink: 0;
        transition: background .2s ease;
    }

        #mobileFilterClose:hover {
            background: #e9e9e9;
        }

    #mobileFilterContent {
        position: relative;
        flex: 1 1 auto;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 16px 16px 30px;
    }

        #mobileFilterContent .filter-sidebar-mobile-inner {
            display: block;
            width: 100%;
            padding: 0;
            margin: 0;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            position: static;
            background: transparent;
        }

        #mobileFilterContent .filter-header {
            display: none;
        }

        #mobileFilterContent .active-filters-container {
            display: none;
        }

        #mobileFilterContent .filter-group {
            width: 100%;
            margin-bottom: 8px;
            border-radius: 13px;
        }

        #mobileFilterContent .filter-title {
            min-height: 45px;
            padding: 11px 12px;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

            #mobileFilterContent .filter-title:active {
                background: #f7f9fc;
            }

    body.mobile-filter-open {
        overflow: hidden;
        height: 100vh;
        touch-action: none;
    }

        body.mobile-filter-open #mobileFilterSidebar {
            touch-action: auto;
        }

    .mobile-bottom-menu {
        display: none;
    }

    /* ---------- گرید محصولات ---------- */
    .products-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .product-card {
        min-height: 160px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px;
        border-radius: 16px;
    }

        .product-card::before {
            inset: 3px;
            border-radius: 13px;
        }

        .product-card::after {
            display: none;
        }

        .product-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 9px 22px rgba(24, 39, 44, .075);
        }

        /* تصویر محصول — ۱۳۰×۱۳۰ */
        .product-card .product-image {
            order: 2;
            flex: 0 0 130px;
            width: 130px;
            min-width: 130px;
            max-width: 130px;
            height: 130px;
            max-height: 130px;
            margin: 0;
            padding: 10px;
            border-radius: 12px;
            box-sizing: border-box;
        }

            .product-card .product-image img {
                max-width: 100%;
                max-height: 100%;
                width: auto;
                height: auto;
                object-fit: contain;
            }

        .product-card .plus-small-btn {
            width: 29px;
            height: 29px;
            left: 5px;
            bottom: 5px;
            border-radius: 9px;
        }

        .product-card .product-image .discount-badge {
            top: 5px;
            right: 5px;
            min-height: 20px;
            padding: 2px 6px;
            border-radius: 7px;
            font-size: var(--fs-small);
        }

        .product-card .product-body {
            order: 1;
            flex: 1 1 auto;
            min-width: 0;
            padding: 3px 2px 3px 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 2px;
        }

            .product-card .product-body .product-title {
                min-height: 0;
                height: auto;
                max-height: 44px;
                margin-bottom: 1px;
                font-size: var(--fs-card-title);
                line-height: var(--lh-card);
            }

            .product-card .product-body .product-brand {
                min-height: 15px;
                margin-bottom: 2px;
                font-size: var(--fs-small);
            }

            .product-card .product-body .product-variants {
                margin: 1px 0 3px;
                gap: 3px;
            }

                .product-card .product-body .product-variants .variant-badge,
                .product-card .product-body .product-variants .variant-more {
                    padding: 2px 5px;
                    font-size: var(--fs-small);
                }

            .product-card .product-body .product-price {
                min-height: 25px;
                gap: 4px;
            }

                .product-card .product-body .product-price .final-price {
                    font-size: var(--fs-price);
                }

                .product-card .product-body .product-price .original-price,
                .product-card .product-body .product-price .discount-percent {
                    font-size: var(--fs-small);
                }

    .out-of-stock-btn {
        width: fit-content;
        min-height: 27px;
        margin-top: 4px;
        padding: 4px 10px;
        font-size: var(--fs-small);
    }

    /* ---------- جدول توضیحات ---------- */
    .category-full-description .description-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        border-radius: 12px;
        font-size: var(--fs-label);
        margin: 16px 0;
    }

        .category-full-description .description-content table thead,
        .category-full-description .description-content table tbody,
        .category-full-description .description-content table tr {
            display: table;
            width: 100%;
            table-layout: auto;
        }

            .category-full-description .description-content table thead tr th,
            .category-full-description .description-content table tbody tr td {
                padding: 10px 12px;
                font-size: var(--fs-label);
                min-width: 110px;
            }

                .category-full-description .description-content table thead tr th:first-child,
                .category-full-description .description-content table tbody tr td:first-child {
                    min-width: 130px;
                }

        .category-full-description .description-content table::-webkit-scrollbar {
            height: 6px;
        }

        .category-full-description .description-content table::-webkit-scrollbar-track {
            background: #f0f4f4;
            border-radius: 10px;
        }

        .category-full-description .description-content table::-webkit-scrollbar-thumb {
            background: #b8d8d5;
            border-radius: 10px;
        }

            .category-full-description .description-content table::-webkit-scrollbar-thumb:hover {
                background: #8fc4bf;
            }

    /* ---------- FAQ ---------- */
    .category-faq .faq-header {
        padding: 14px 16px;
    }

    .category-faq .faq-body {
        padding: 14px 16px;
    }

    .faq-question {
        padding: 14px 16px;
        font-size: var(--fs-base);
    }

    /* ---------- توضیحات ---------- */
    .page-header h1 {
        font-size: var(--fs-h2);
    }

    .category-full-description {
        padding: 16px 18px;
        border-radius: 12px;
    }

        .category-full-description h3 {
            font-size: var(--fs-h4);
        }

        .category-full-description .description-content {
            font-size: var(--fs-base);
        }
}

/* ============================================================================
   ۱۷. RESPONSIVE — MOBILE (max-width: 576px)
   ============================================================================ */
@media (max-width: 576px) {

    /* ---------- تایپوگرافی ---------- */
    :root {
        --fs-base: 13.5px;
        --fs-h1: 20px;
        --fs-h2: 18px;
        --fs-h3: 17px;
        --fs-h4: 16px;
        --fs-card-title: 13.5px;
        --fs-price: 15px;
        --fs-label: 12.5px;
        --fs-small: 12px;
        --fs-btn: 13px;
    }

    /* ---------- کانتینر ---------- */
    .filter-container {
        padding: 0 9px;
    }

    .page-header {
        padding: 15px 14px;
        border-radius: 15px;
    }

        .page-header h1 {
            font-size: var(--fs-h1);
        }

        .page-header > div {
            font-size: var(--fs-base);
            line-height: var(--lh-base);
        }

    .mobile-filter-triggers {
        gap: 6px;
    }

    .mobile-filter-trigger {
        min-height: 37px;
        padding: 7px 10px;
        border-radius: 10px;
        font-size: var(--fs-label);
    }

        .mobile-filter-trigger i {
            font-size: 12px;
        }

    .mobile-result-count {
        font-size: var(--fs-label);
    }

    /* ---------- گرید ---------- */
    .products-grid {
        gap: 8px;
    }

    .product-card {
        min-height: 148px;
        gap: 10px;
        padding: 8px;
        border-radius: 14px;
    }

        .product-card .product-image {
            flex: 0 0 120px;
            width: 120px;
            min-width: 120px;
            max-width: 120px;
            height: 120px;
            max-height: 120px;
            padding: 8px;
            border-radius: 10px;
        }

        .product-card .plus-small-btn {
            width: 25px;
            height: 25px;
            left: 4px;
            bottom: 4px;
            border-radius: 8px;
            font-size: 12px;
        }

        .product-card .product-image .discount-badge {
            top: 4px;
            right: 4px;
            min-height: 18px;
            padding: 1px 5px;
            font-size: var(--fs-small);
        }

        .product-card .product-body {
            padding: 2px 0;
        }

            .product-card .product-body .product-title {
                max-height: 40px;
                font-size: var(--fs-card-title);
            }

            .product-card .product-body .product-brand {
                min-height: 13px;
                font-size: var(--fs-small);
            }

            .product-card .product-body .product-variants .variant-badge,
            .product-card .product-body .product-variants .variant-more {
                padding: 1px 4px;
                font-size: var(--fs-small);
            }

            .product-card .product-body .product-price {
                min-height: 22px;
            }

                .product-card .product-body .product-price .final-price {
                    font-size: var(--fs-price);
                }

                .product-card .product-body .product-price .original-price,
                .product-card .product-body .product-price .discount-percent {
                    font-size: var(--fs-small);
                }

    /* ---------- توضیحات ---------- */
    .category-full-description {
        margin-top: 18px;
        padding: 17px 15px;
        border-radius: 15px;
    }

        .category-full-description h3 {
            font-size: var(--fs-h4);
        }

        .category-full-description .description-content {
            font-size: var(--fs-base);
        }

            .category-full-description .description-content table thead tr th,
            .category-full-description .description-content table tbody tr td {
                padding: 9px 10px;
                font-size: var(--fs-small);
            }

    /* ---------- FAQ ---------- */
    .category-faq .faq-header h4 {
        font-size: var(--fs-h4);
    }

    .faq-question {
        padding: 12px 14px;
        font-size: var(--fs-base);
    }

    .faq-answer {
        font-size: var(--fs-base);
    }
}

/* ============================================================================
   ۱۸. RESPONSIVE — SMALL PHONES (max-width: 380px)
   ============================================================================ */
@media (max-width: 380px) {

    :root {
        --fs-base: 13px;
        --fs-h1: 18px;
        --fs-h2: 17px;
        --fs-h3: 16px;
        --fs-h4: 15px;
        --fs-card-title: 13px;
        --fs-price: 14px;
        --fs-label: 12px;
        --fs-small: 12px;
        --fs-btn: 12px;
    }

    .product-card {
        min-height: 130px;
        gap: 7px;
    }

        .product-card .product-image {
            flex: 0 0 105px;
            width: 105px;
            min-width: 105px;
            max-width: 105px;
            height: 105px;
            max-height: 105px;
        }

        .product-card .product-body .product-title {
            font-size: var(--fs-card-title);
        }

        .product-card .product-body .product-price .final-price {
            font-size: var(--fs-price);
        }
}

/* ============================================================================
   ۱۹. REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .product-card,
    .product-card::before,
    .product-card::after,
    .product-card img,
    .product-card .plus-small-btn,
    .mobile-filter-trigger,
    .pagination-container .page-link,
    .btn-apply-filter,
    .btn-load-more {
        transition: none !important;
    }
}

/* ============================================================================
   ۲۰. بلاک دسته‌بندی‌های پروموشن
   ============================================================================ */
.promo-categories-block {
    margin-bottom: 12px;
    border: 1px solid #e8eeee;
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
}

    .promo-categories-block .promo-categories-title {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 12px;
        border-bottom: 1px solid #f0f3f3;
        color: #354147;
        font-size: var(--fs-label);
        font-weight: 850;
        background: linear-gradient(180deg, #fff, #fcfdfd);
    }

        .promo-categories-block .promo-categories-title::before {
            content: "\f0ca";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            color: var(--arv-teal);
            font-size: 12px;
        }

.promo-categories-list {
    display: flex;
    flex-direction: column;
}

.promo-category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid #f0f3f3;
    color: #354147;
    text-decoration: none;
    transition: background .2s, color .2s;
}

    .promo-category-item:last-child {
        border-bottom: 0;
    }

    .promo-category-item:hover {
        background: #f5fbfa;
        color: var(--arv-teal);
        padding-right: 15px;
    }

    .promo-category-item .cat-title {
        font-size: var(--fs-label);
        font-weight: 750;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
    }

    .promo-category-item .cat-count {
        padding: 3px 9px;
        border-radius: 8px;
        background: #edf1f5;
        color: #5a6570;
        font-size: var(--fs-small);
        font-weight: 750;
        white-space: nowrap;
        flex-shrink: 0;
        transition: background .2s, color .2s;
    }

    .promo-category-item:hover .cat-count {
        background: #e0f2ef;
        color: var(--arv-teal);
    }