.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-48f7598:#134432;--e-global-color-3304912:#7DB078;--e-global-color-a7daed3:#000000;--e-global-color-d0a5e30:#FFFFFF;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1320px;}.e-con{--container-max-width:1320px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */#product_filters {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transition: all 0.3s ease;
}

/* استایل دکمه‌های سوئیچر */
.layout-switcher {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.layout-btn {
    cursor: pointer;
    background: #f1f1f1;
    border: 1px solid #d1d5db;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
}

.layout-btn svg {
    fill: currentColor;
}

.layout-btn.active {
    background-color: #134432 !important;
    color: #ffffff !important;
    border-color: #134432 !important;
}

/* ساختار کارت‌های محصول */
#product_filters .e-loop-item {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
}

/* ==============================================================
   ۱. دسکتاپ: حالت ۴ ستونه (پیش‌فرض)
   ============================================================== */
#product_filters:not(.layout-loose) .elementor-loop-container {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

#product_filters:not(.layout-loose) .e-loop-item {
    width: 100% !important;
    max-width: 100% !important;
}

/* ==============================================================
   ۲. دسکتاپ: حالت ۲ ستونه
   ============================================================== */
#product_filters.layout-loose .elementor-loop-container {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 25px !important;
}

#product_filters.layout-loose .e-loop-item {
    width: 100% !important;
    max-width: 100% !important;
}


/* ==============================================================
   ۳. واکنش‌گرا در موبایل (صفحات زیر 768px)
   ============================================================== */
@media screen and (max-width: 768px) {
    /* حالت دو ستونه در موبایل (۲ محصول در هر ردیف) */
    #product_filters:not(.layout-loose) .elementor-loop-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    #product_filters:not(.layout-loose) .e-loop-item {
        width: 100% !important;
    }

    /* حالت تک‌ستونه در موبایل (۱ محصول در هر ردیف با عرض دقیقاً ۵۰٪ و در مرکز) */
    #product_filters.layout-loose .elementor-loop-container {
        display: flex !important;
        flex-direction: column !important; /* چینش زیر هم برای ایجاد تک‌ستونه */
        align-items: center !important;    /* کارت‌ها دقیقاً وسط‌چین شوند */
        gap: 16px !important;
        width: 100% !important;
    }

    #product_filters.layout-loose .e-loop-item {
        width: 50% !important;     /* عرض هر کارت دقیقاً ۵۰ درصد کانتینر باشد */
        max-width: 50% !important;
    }
}/* End custom CSS */