@font-face {
font-family: 'iranyekan';
src: url('../fonts/iranyekanr.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-feature-settings: "ss02";
font-display: swap;

}

@font-face {
font-family: 'iranyekan';
src: url('../fonts/iranyekanb.woff2') format('woff2');
font-weight: bold;
font-style: normal;
font-feature-settings: "ss02";
font-display: swap;

}
/* تنظیمات عمومی هدر */
header{
background:#fff;
 width:100%
}
.container-h {
    max-width: 1200px;
    margin: 0 auto; 
background:#fff; 
}
.top-banner{
background:#d62432;
 width:100%
}
.top-banner img {
    width: auto;
    display: block;
    height: 50px;
    margin:0 auto;
}

/* <!---------------------- ردیف پایین هدر ----------------------> */
.header-top {
background: #fff;
display: flex;
align-items: center;
padding:10px 10px;
gap: 30px;
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.logo {
margin-right: 10px;
max-width: 100px !important;
height: auto;

}

/******************** ایکونهای هدر **************************/

.icon-btn {
display: flex;
color: #6e715c;
font-size: 15px;
text-decoration: none;
margin-left: 3px;
}

.header-icons {
display: flex;
gap: 15px;
align-items: center;
}

.icon-separator {
color: #6e715c !important;
font-size: 18px !important;
font-weight: bold !important;
opacity: 0.6 !important;
margin: 0 4px !important; /* فاصله کمتر */
}
.wishlist-header ,
.cart-header ,
.compare-header,
.acount-header {
position: relative;
display: inline-block;
}

.wishlist-link ,
.compare-link ,
.cart-link,
.account-link {
display: flex;
align-items: center;
gap: 6px;
text-decoration: none;
color: #030302e8;
}

.account-link {
display: flex;
align-items: center;
gap: 6px;
text-decoration: none;
color: #ffffff;
border: 2px solid;
border-radius: 14px;
padding: 7px;
}
.account-link:hover {
background-color:#ced4da;
color:#9e0707;
}
.cart-icon ,
.wishlist-icon ,
.compare-icon,
.account-icon{
width: 25px;
height: 25px;
flex-shrink: 0;
}

.cart-count {
background: #ab0000;
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
font-size: 12px;
position: absolute;
top: -10px;
right: -8px;
display: flex;
align-items: center;
justify-content: center;
}
#wishlist-count , #compare-count{
background: #ab0000;
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
font-size: 12px;
position: absolute;
top: -5px;
right: -3px;
display: flex;
align-items: center;
justify-content: center;
}

/* cart-total هدر تغییر */
.cart-header .cart-total .woocommerce-Price-amount.amount {
font-size: 15px !important;
}

.wishlist-text ,
.compare-text ,
.account-text{
font-size: 14px;
font-weight: 500;
color: #030302e8;
margin-left: 4px;
}

.account-text{
font-size: 14px;
font-weight: 500;
color: #ffffff;
margin-left: 4px;
}
.account-text:hover{
color: #9e0707;;
}
.wishlist-link svg, 
.compare-link svg {
    border: 2px solid rgba(0, 0, 0, 0.1); /* رنگ کادر دایره */
    border-radius: 50%;                    /* تبدیل به دایره کامل */
    padding: 9px;                         /* ایجاد فاصله بین آیکون و دایره */
    width: 20px;                          /* تنظیم اندازه دقیق آیکون */
    height: 20px;
    box-sizing: content-box;              /* برای اینکه پدینگ به ابعاد اضافه شود */
    transition: all 0.3s ease;            /* افکت نرم برای هاور */
}

/* افکت هاور (اختیاری): در صورت تمایل موقع رفتن ماوس روی دایره‌ها */
.wishlist-link:hover svg, 
.compare-link:hover svg {
    border-color: #ab0000;                /* تغییر رنگ کادر دایره هنگام هاور */
    color: #ab0000;                       /* تغییر رنگ خود آیکون هنگام هاور */
}


/* جلوگیری از تغییر رنگ کادر باکس سرچ هنگام کلیک */
.search-box input:focus {
    outline: none;                             /* حذف کادر پیش‌فرض مرورگر */
    border-color: rgba(0, 0, 0, 0.1) !important; /* ثابت نگه داشتن کادر قبلی */
}
/*********************** بخش سرچ هدر *****************************/
.search-box {
position: relative;
flex: 1;
}

.search-box input {
width: 100%;
padding: 15px; /* جا برای آیکن سمت چپ */
border-radius: 5px;
border: 2px solid  rgba(0, 0, 0, 0.1);
font-size: 14px;
font-family: 'iranyekan' !important;
background-color:#fff;
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 1px;
    transform: translateY(-50%);
    background: transparent;
        border: 1px solid rgb(186, 41, 48);
border-radius: 5px 0 0px 5px;
    cursor: pointer;
    color: #faf0de;
    font-size: 18px;
    background-color: rgb(186,41,48);
    padding: 11px 15px !important;

}

/* پیشنهادات سرچ باکس */

.search-box {
    position: relative;
}

.search-results {
    position: absolute;

    width: 100%;
    background: #fff;
    z-index: 9999;
}

.live-search-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.live-search-item {
    border-bottom: 1px solid #f1f1f1;
}

.live-search-item a {
    display: flex;
    align-items: center;
    padding: 10px;
    text-decoration: none;
    color: #333;
    transition: 0.2s;
    
}

.live-search-item a:hover {
    background: #f8f8f8;
}

.live-search-thumb img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
}

.live-search-info {
    margin-right: 10px;
    display: flex;
    flex-direction: column;
}

.live-search-title {
    font-size: 14px;
    margin-bottom: 5px;
}

.live-search-price {
    font-size: 13px;
    color: #111127;
    font-weight: bold;
}

.no-result,
.search-loading {
    padding: 10px;
    font-size: 13px;
}
/* بالا هدر */
/* تنظیمات کلی هدر */
.main-header {
    padding: 10px 10px;
border-bottom: 2px solid #ab0000;
}

.header-right-menu {
    position: relative;
    padding-left: 20px; /* ایجاد فاصله تا خط */
}

.header-right-menu::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;          /* ضخامت خط */
    height: 30px;        /* ارتفاع خط قرمز مطابق تصویر */
    background-color: #b82d33; /* رنگ قرمز سازمانی شما */
}

.mega-menu-root > li.menu-item-has-children > a {
    display: flex;
    align-items: center;
    gap: 4px; /* فاصله بیشتر بین متن و فلش (قابل تغییر) */
}

/* ۲. طراحی فلش بسیار کوچک و ظریف فقط برای سطح اول */
.mega-menu-root > li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 4px;             /* کوچک‌تر کردن پهنای فلش */
    height: 4px;            /* کوچک‌تر کردن ارتفاع فلش */
    border-right: 1.5px solid #a0a0a0; /* نازک‌تر کردن خطوط فلش */
    border-bottom: 1.5px solid #a0a0a0;
    transform: rotate(45deg); /* چرخاندن به سمت پایین */
    margin-top: -3px;       /* تراز عمودی دقیق با متن */
    transition: transform 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;         /* جلوگیری از دفرم شدن فلش */
}

/* ۳. افکت هاور فقط برای سطح اول */
.mega-menu-root > li.menu-item-has-children:hover > a::after {
    border-color: #b82d33;  /* تغییر رنگ به قرمز در حالت هاور */
    transform: rotate(225deg); /* چرخش رو به بالا هنگام باز شدن منو */
    margin-top: 3px;

}
/* استایل عمومی منوها */
.main-header .header-center-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 15px; /* فاصله بین آیتم‌های منو */
}

.main-header ul li a {
    text-decoration: none;
    color: #4a4a4a;
    font-size: 14px;
    font-weight: bold;
    transition: color 0.3s ease;
    display: block;
    padding: 8px 0;
}

.main-header ul li a:hover {
    color: #b82d33; /* رنگ هاور منوها متمایل به قرمز تصویر */
}

/* جداکننده عمودی در منوی وسط */
.header-center-menu ul li:not(:last-child) {
    position: relative;
}
.header-center-menu ul li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background-color: #e0e0e0;
}

/* منوی سمت راست (دسته بندی‌ها با فلش رو به پایین) */
.category-menu li {
    position: relative;
}
/* شبیه‌سازی فلش کوچک کنار منوهای دسته‌بندی */
.category-menu li.menu-item-has-children > a::after {
    content: "⌃";
    display: inline-block;
    transform: rotate(180deg);
    margin-right: 5px;
    font-size: 10px;
    vertical-align: middle;
}

/* بخش سمت چپ (اکشن‌ها) */
.header-left-actions {
    display: flex;
    align-items: center;
    gap: 1px;
}

/* باکس دکمه تماس */
.header-phone-box {
    display: flex;
    align-items: center;
    background-color: #b82d33; /* قرمز تیره هدر */
    color: #ffffff;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 6px;
    gap: 10px;
    direction: ltr; /* جهت شماره تلفن به انگلیسی درست بماند */
    text-align: right;
    transition: background-color 0.3s;
}
.header-phone-box:hover {
    background-color: #9c2429;
}

.phone-number {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.5px;
}
.phone-title {
    font-size: 11px;
    color: #fff;
    direction: rtl; /* کلمه واحد فروش راست‌چین شود */
 font-weight: bold;
}
.phone-icon svg {
    display: block;
    transform: scaleX(-1); /* برعکس کردن آیکون تلفن برای حالت RTL */
}

/* دکمه ورود و ثبت نام */
.header-login-btn {
    background-color: #b82d33;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 25px; /* کاملا گرد مطابق تصویر */
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s;
}
.header-login-btn:hover {
    background-color: #9c2429;
}

/* ریسپانسیو ساده: در موبایل منوی دسکتاپ مخفی شود */
@media (max-width: 992px) {
    .header-right-menu, .header-center-menu {
        display: none;
    }
}
/* ========================================================
   ساختار اصلی هدر (مبنای تراز شدن مگامنو)
   ======================================================== */
.header-container {
    position: relative; /* مگامنو خودش را با این باکس تراز می‌کند تا همیشه در یک موقعیت ثابت باز شود */
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

/* منوی اصلی ریشه */
.mega-menu-root {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* آیتم‌های منوی اصلی (سطح ۱) */
.mega-menu-root > li {
    position: static; /* مهم: استاتیک بودن باعث می‌شود زیرمنو نسبت به کل هدر باز شود نه زیر خود آیتم! */
}

.mega-menu-root > li > a {
    display: block;
    padding: 15px 0;
    font-size: 14px;
    font-weight: bold;
    color: #4a4a4a;
    text-decoration: none;
}

/* --------------------------------------------------
   ۱. باکس کلی و اصلی مگامنو (باکس بزرگ)
-------------------------------------------------- */


/* نمایش منو هنگام فعال بودن آیتم */
.mega-menu-root > li.active > .sub-menu {
    display: block;
}

/* --------------------------------------------------
   ۲. ستون سمت راست - سطح ۲ (منوی قرمز عمودی)
-------------------------------------------------- */
/* ایجاد بستر فلکس یا تبدیل آیتم‌ها به ستون */
.mega-menu-root > li > .sub-menu > li {
    position: static; /* برای اینکه لایه سطح ۳ نسبت به کل مگامنو تراز شود */
    width: 260px; /* عرض ستون قرمز */
}

/* کل لیست سطح ۲ را در یک ستون سمت راست جمع می‌کنیم */
.mega-menu-root > li > .sub-menu {
    display: none;
}
.mega-menu-root > li.active > .sub-menu {
    display: block;
    background-color: #b82d33; /* رنگ قرمز پس‌زمینه ستون راست */
}


/* حالت هاور روی آیتم‌های سطح ۲ (تغییر وضعیت به منوی سفید) */
.mega-menu-root > li > .sub-menu > li:hover > a {
    background-color: #ffffff !important; /* بک‌گراند کاملاً سفید شبیه نمونه */
    color: #b82d33 !important; /* متن قرمز می‌شود */
    position: relative;
    z-index: 10;
}

/* فلش کوچک کنار آیتم‌های سطح ۲ */
.mega-menu-root > li > .sub-menu > li.menu-item-has-children > a::after {
    content: "‹";
    font-size: 16px;
    font-weight: normal;
}

/* --------------------------------------------------
   ۳. باکس سفید سمت چپ - سطح ۳ و ۴ (حل مشکل غیب شدن)
-------------------------------------------------- */
.mega-menu-root > li > .sub-menu > li > .sub-menu {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 260px; /* دقیقاً مماس با پایان ستون قرمز (بدون حتی ۱ پیکسل فاصله) */
    background: #ffffff; /* پس‌زمینه تمام‌عرض سفید */
    padding: 30px;
    margin: 0;
    list-style: none;
    
    /* پنهان بودن در حالت عادی */
    display: none !important;
    
    /* چیدمان شبکه‌ای آیتم‌ها */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-content: flex-start;
    overflow-y: auto;
    
    /* ایجاد یک لایه نامرئی کوچک برای اورلپ و جلوگیری از غیب شدن هنگام حرکت سریع موس */
    border-right: 1px solid #f0f0f0; 
}

/* نمایش باکس سفید محتوا در زمان هاور روی آیتم ردیف خودش */
.mega-menu-root > li > .sub-menu > li:hover > .sub-menu {
    display: grid !important;
}

/* --------------------------------------------------
   ۴. استایل داخل باکس سفید (سطح ۳ و ۴)
-------------------------------------------------- */
/* عناوین اصلی (سطح ۳) */
.mega-menu-root > li > .sub-menu > li > .sub-menu > li > a {
    font-size: 13px;
    font-weight: bold;
    color: #333333;
    text-decoration: none;
    display: block;
}

/* لیست زیرمجموعه‌ها (سطح ۴) */
.mega-menu-root > li > .sub-menu > li > .sub-menu > li > .sub-menu {
    position: static;
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* لینک‌های سطح ۴ */
.mega-menu-root > li > .sub-menu > li > .sub-menu > li > .sub-menu li a {
    font-size: 13px;
    color: #666666;
    text-decoration: none;
    display: block;
    transition: color 0.2s, padding 0.2s;
}

.mega-menu-root > li > .sub-menu > li > .sub-menu > li > .sub-menu li a:hover {
    color: #b82d33;
    padding-right: 4px; /* افکت جابجایی کوچک هنگام هاور */
}

/* ========================================================
   ساختار اصلی هدر (مبنای تراز شدن مگامنو)
   ======================================================== */
.header-container {
    position: relative; /* تراز شدن مگامنو نسبت به کل عرض هدر */
}

/* منوی اصلی ریشه (سطح ۱) */
.mega-menu-root {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-menu-root > li {
    position: static; /* منو نسبت به هدر باز می‌شود نه تک‌تک آیتم‌ها */
}

.mega-menu-root > li > a {
    display: block;
    padding: 15px 0;
    font-size: 14px;
    font-weight: bold;
    color: #4a4a4a;
    text-decoration: none;
}

/* --------------------------------------------------
   ۱. باکس کلی مگامنو (در حالت عادی فقط به اندازه ستون قرمز است)
-------------------------------------------------- */
.mega-menu-root > li > .sub-menu {
    position: absolute;
    top: 132%; /* دقیقاً زیر هدر */
    right: 0px; /* چسبیده به لبه راست هدر */
    width: 260px; /* عرض پیش‌فرض فقط اندازه ستون قرمز است */
    height: 530px; /* ارتفاع منو */
    background: #b82d33; /* پس‌زمینه اصلی قرمز است تا اگر سطح ۳ نبود، فقط قرمز دیده شود */
    display: none;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    z-index: 9999;
    direction: rtl;
}

/* نمایش منو هنگام فعال بودن */
.mega-menu-root > li.active > .sub-menu {
    display: flex;
}

/* --------------------------------------------------
   ۲. ستون سمت راست - سطح ۲ (منوی قرمز عمودی)
-------------------------------------------------- */
.mega-menu-root > li > .sub-menu > li {
    position: static; /* برای تراز شدن باکس سفید نسبت به کل مگامنو */
    width: 100%;
}

/* استایل لینک‌های داخل ستون قرمز */
.mega-menu-root > li > .sub-menu > li > a {
    color: #ffffff !important;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s, color 0.2s;
}

/* حالت هاور روی آیتم‌های سطح ۲ */
.mega-menu-root > li > .sub-menu > li:hover > a {
    background-color: #ffffff !important; /* پس‌زمینه سفید شبیه نمونه */
    color: #b82d33 !important; /* متن قرمز */
    position: relative;
    z-index: 10;
}

/* فلش کوچک کنار آیتم‌های سطح ۲ دارای فرزند */
.mega-menu-root > li > .sub-menu > li.menu-item-has-children > a::after {
    content: "›";
    font-size: 16px;
    font-weight: normal;
}

/* --------------------------------------------------
   ۳. باکس سفید سمت چپ - سطح ۳ و ۴ (فقط در صورت وجود فرزند باز می‌شود)
-------------------------------------------------- */
.mega-menu-root > li > .sub-menu > li > .sub-menu {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 260px; /* شروع دقیقاً از پایان ستون قرمز */
    width: 880px; /* عرض باکس سفید (مجموعاً با ستون قرمز اندازه ۱۱۷۰ پیکسل هدر را پر می‌کند) */
    background: #ffffff;
    padding: 30px;
    margin: 0;
    list-style: none;
    border-radius: 0 0 0 8px;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.05);
    
    /* پنهان بودن در حالت عادی */
    display: none !important;
    
    /* چیدمان شبکه‌ای آیتم‌ها */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-content: flex-start;
    overflow-y: auto;
    border-right: 1px solid #f0f0f0; 
}

.mega-menu-root > li > .sub-menu > li.first-active > .sub-menu {
    display: grid !important;
}

/* اصلاح تداخل نمایش */
@media (min-width: 769px) {
    .mobile-header, .mobile-panel, .mobile-overlay, .top-bar-announcement {
        display: none !important;
    }
}
/* فقط در حالت موبایل نمایش داده شود */
@media (max-width: 768px) {

.header-top,
.header-bottom,
.main-header,
.desktop-header {
  display:none !important;
}


.mobile-header {
    display: flex!important;
    justify-content: space-between;
    align-items: center;
    padding: 15px 15px;
    background: #fff;
    position: relative;
    border-bottom: 1px solid #eee;
}
.mobile-logo{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  margin-top:15px;

}

.mobile-logo img{
  max-height:55px;
  height:auto;

}
/* آیکون های سمت راست (جستجو و پروفایل) */
.mobile-header-left {
    display: flex;
    align-items: center;
    gap: 15px; /* فاصله بین دو آیکون */
}

.mobile-header-left svg {
    display: block;
    color: #000; /* رنگ مشکی خالص */
    transition: 0.3s;
}

.mobile-header-left a, 
.mobile-header-left button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}
.mobile-menu-btn {
    display: flex;
    align-items: center; /* تراز عمودی متن و آیکون */
    gap: 5px; /* فاصله بین آیکون و کلمه منو */
    background:#a87c77;
    border: none;
    padding: 4px 7px;
    cursor: pointer;
    color: #f8f8f8; /* رنگ دلخواه */ 
    border-radius: 30px;
}

.mobile-menu-btn i {
    font-style: normal;
    font-size: 24px; /* سایز آیکون همبرگری */
    line-height: 1;
    background-color:#f4f4f4 ;
    border-radius: 50px;
    color: #000;
    padding: 7px;
}

.mobile-menu-btn span {
    font-size: 14px; /* سایز کلمه منو */
    font-weight: bold;
    font-family: inherit;
}

/* overlay */
.mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  opacity:0;
  visibility:hidden;
  transition:.3s;
  z-index:9998;
}

.mobile-overlay.active{
  opacity:1;
  visibility:visible;
}

.mobile-panel {
    position: fixed;
    top: 0;
    left: 0; 
    width: 280px;
    max-width: 85%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    transform: translateX(-101%);
    transition: transform .3s ease-in-out;
    display: flex;
    flex-direction: column;
    box-shadow: none; /* وقتی بسته است سایه نداشته باشه */
}

.mobile-panel.active {
    transform: translateX(0);
    box-shadow: 5px 0 15px rgba(0,0,0,0.1); /* فقط وقتی باز شد سایه بدهد */
}

/* top */
.mobile-panel-top{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-bottom:1px solid #eee;
}


.panel-search{
  flex:1;
}

.panel-search input{
  width:100%;
  padding:10px;
  border:1px solid #ddd;
}

.close-panel{
background:none;
 color:#a87c77;
  border:none;
  font-size:20px;
 
}

/* tabs */
.panel-tabs{
  display:flex;
  border-bottom:1px solid #eee;
}

.panel-tabs button{
  flex:1;
  padding:12px;
  border:none;
  background:#f5f5f5;
  color: #000;
  font-size: 12px;
  font-weight: bold;
}

.panel-tabs button.active{
  background:#fff;
  border-bottom:2px solid #a87c77;
  font-weight:bold;
}

/* content */
.panel-content{
  flex:1;
  overflow-y:auto;
}

.tab-content{
  display:none;
}

.tab-content.active{
  display:block;
}

}

@media (max-width: 768px) {
.mobile-menu, .mobile-cats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block !important;
}

.mobile-menu li, .mobile-cats li {
    border-bottom: 1px solid #eee;
    width: 100%;
    display: block; 
}

.mobile-menu li a, .mobile-cats li a {
    display: block;
    padding: 15px;
    color: #333 !important;
    text-decoration: none;
    font-size: 14px;
    text-align: right; /* تراز راست برای زبان فارسی */
    transition: 0.3s;
}

/* افکت ساده هنگام لمس یا هاور */
.mobile-menu li a:active, .mobile-cats li a:active {
    background-color: #f9f9f9;
}
.cat-item-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse; /* برای قرار گرفتن فلش در سمت چپ در سایت فارسی */
    border-bottom: 1px solid #eee;
}

.cat-item-wrapper a {
    flex: 1;
    padding: 14px;
    border-bottom: none !important;
}

.toggle-child {
    background: #f1f1f1;
    border: none;
    border-left: 1px solid #eee;
    width: 45px;
    height: 50px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* استایل زیرمنوها */
.sub-cats {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f9f9f9;
}

.sub-cats li a {
    padding: 12px 30px 12px 15px !important; 
    font-size: 13px;
    color: #555;
}


.toggle-child.open {
    transform: rotate(90deg);
    background: #ae0000;
    color: #fff;
}
.sub-cats {
        list-style: none;
        padding: 0;
        margin: 0;
        background: #f9f9f9;
    }

    .sub-cats li a {
        display: block;
        padding: 12px 30px 12px 15px !important;
        font-size: 13px;
        color: #555;
    }

    /* برای سطح سوم کمی تو رفتگی بیشتر */
    .sub-cats .sub-cats li a {
        padding-right: 45px !important;
        background: #fff;
    }
.uder-header-mobile {
    margin: 20px;
}