/* 
 * Mega Menu CSS - Z-Index Hierarchy (راه‌حل اصولی)
 * 
 * Z-Index پایه برای حالت عادی:
 * - Header: z-index: 15
 * - Overlay: z-index: 14 (زیر mega-panel)
 * - Mega Panel: z-index: 300 (حالت عادی)
 * - Primary Nav (mobile): z-index: 300 (حالت عادی)
 * 
 * راه‌حل اصولی برای تداخل:
 * - وقتی مگامنو باز است، body.mega-open/nav-open کلاس‌ها اعمال می‌شوند
 * - در این حالت، مگامنو z-index: 999 !important می‌گیرد
 * - دکمه مینی‌کارت به z-index: 10 !important تنزل می‌یابد
 * - pointer-events: none برای غیرفعال کردن کلیک روی دکمه مینی‌کارت
 * 
 * Support for multiple instances:
 * - Each mega menu instance gets unique classes
 * - Uses data attributes for targeting
 * - Prevents conflicts between desktop and mobile instances
 */

 :root {
    --bg: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --line: #e5e7eb;
    --accent: #ff7a1a;
    --accent-600: #ff6a00;
    --radius: 8px;
    --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.18), 0 4px 14px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.08);
    --transition: 240ms cubic-bezier(.2,.7,.3,1);
    --container: min(1200px, 92vw);
    --panel: 862px;
    --cats: 208px;
  }
  
  /* Reset (minimal) */
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: #f5f7fb;
    color: var(--text);
    font-family: inherit; /* inherit WP theme font */
    line-height: 1.6;
  }
  img { max-width: 100%; display: block; }
  button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
  a { color: inherit; text-decoration: none; }
  
  .container { width: var(--container); margin-inline: auto; padding-inline: 8px; }
  
  /* Header */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 15; /* کاهش z-index تا زیر مینی‌کارت باشد */
    background: rgba(60, 130, 227, 0.08);
    transition: background var(--transition);
    height: 47.5px;
  }
  
  /* Header background when mega menu is open */
  body.mega-open .site-header {
    background: rgba(60, 130, 227, 0.08);
  }
  .site-header .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 17px;
  }
  .brand { display: inline-flex; align-items: center; gap: 8px; }
  
  /* Mobile Header (hidden on desktop) */
  .mobile-header {
    display: none;
  }
  
  /* Hamburger (mobile only) */
  .hamburger {
    display: none;
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg);
  }
  .hamburger span { display: block; width: 20px; height: 2px; background: #111827; margin: 3px 0; transition: var(--transition); }
  .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  
  /* Custom hamburger icon styles */
  .hamburger.custom-icon {
    padding: 8px;
  }
  
  .hamburger.custom-icon .hamburger-svg {
    width: 24px;
    height: 24px;
    transition: var(--transition);
  }
  
  .hamburger.custom-icon:hover .hamburger-svg {
    opacity: 0.8;
  }
  
  .hamburger.custom-icon[aria-expanded="true"] .hamburger-svg {
    transform: rotate(180deg);
  }
  
  /* Hamburger button transitions */
  .hamburger {
    transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
  }
  
  .hamburger:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
  }
  
  .hamburger:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
  
  /* Mobile header container adjustments */
  @media (max-width: 767px) {
    .site-header {
      height: auto; /* حذف ارتفاع ثابت */
      min-height: 55px; /* حداقل ارتفاع */
      padding: 0 !important; /* پدینگ عمودی */
    }
    
    .site-header .container {
      justify-content: flex-end; /* تغییر به flex-end برای قرارگیری در سمت راست */
      padding-left: 16px;
      padding-right: 16px;
      height: auto; /* حذف ارتفاع ثابت */
      min-height: 44px; /* حداقل ارتفاع */
      width: 100%; /* عرض کامل */
    }
    
    .hamburger {
      display: inline-flex;
      flex-shrink: 0;
      width: 42px;
      height: 42px;
      /* حذف margin-left: auto که فضای زیادی اشغال می‌کرد */
    }
  }
  
  /* Nav */
  .primary-nav { position: relative; }
  .nav-list { 
    display: flex; 
    background-color: #f0f5fd !important;
    align-items: center; 
    gap: 0; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
  }
  
  /* Ensure nav-list background is always maintained */
  .nav-list,
  .nav-list.mega-open,
  body.mega-open .nav-list,
  body.mega-open .primary-nav .nav-list {
    background-color: #f0f5fd !important;
  }
  
  /* Navigation sections with gaps */
  .nav-section {
    display: flex;
    align-items: center;
    gap: 0;
  }
  
  .nav-section + .nav-section {
    margin-left: 32px;
  }
  
  .nav-separator-container {
    margin: 0 16px;
  }
  
  .nav-item { position: relative; }
  
  /* Remove pseudo-element separators */
  .nav-item:not(:last-child)::after {
    display: none;
  }
  
  .nav-link { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    padding: 16px 12px; 
    border-radius: 8px; 
    transition: background var(--transition), color var(--transition); 
    position: relative;
    font-weight: 400;
    font-size: 14px;
    color: #222230;
  }
  
  /* Hover states - no background on desktop for any nav-link */
  .nav-item .nav-link:hover { 
    background-color: #f0f5fd !important; 
  }
  
  /* Hover line effect for main menu items */
  .nav-item:not(.has-mega) .nav-link::after {
    content: "";
    position: absolute;
    bottom: 12px;
    left: 10%;
    width: 0;
    height: 3px;
    background: #F46F27;
    border-radius: 2px 2px 0 0;
    transition: width var(--transition);
  }
  
  .nav-item:not(.has-mega) .nav-link:hover::after {
    width: 80%;
  }
  
  /* Icon styling */
  .nav-link .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  
  /* Show chevron-downbl icon only on desktop */
  .nav-link .icon[src*="chevron-downbl.svg"] {
    display: block;
  }
  
  /* Ensure nav-link-content is properly styled on desktop */
  .nav-link-content {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  /* Active state for current page - will be set by JavaScript */
  .nav-link.is-active {
    color: #222230;
    font-weight: 500;
    font-size: 16px;
  }
  .nav-link.is-active::after {
    content: "";
    position: absolute;
    bottom: 12px;
    left: 10%;
    width: 80%;
    height: 3px;
    background: #F46F27;
    border-radius: 2px 2px 0 0;
  }
  
  /* HTML separator element styling */
  .nav-separator {
    width: 24px;
    height: 1.5px;
    background: #CED6DF;
    border-radius: 0.75px;
    transform: rotate(90deg);
    list-style: none;
  }
  
  /* Main menu items spacing */
  .main-menu {
    gap: 16px;
  }
  
  
  /* Overlay (shared) - Support for multiple instances */
  .mega-overlay { 
    position: fixed; 
    top: 90px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: rgba(12, 18, 35, 0.45); 
    opacity: 0; 
    visibility: hidden; 
    transition: var(--transition); 
    z-index: 14; 
    backdrop-filter: blur(2px); /* overlay باید زیر mega-panel باشد */
  }
  
  /* Support for multiple mega menu instances */
  .mega-overlay.is-visible {
    opacity: 1;
    visibility: visible;
  }
  
  /* Global body classes for any mega menu instance */
  body.mega-open .mega-overlay,
  body.nav-open .mega-overlay { 
    opacity: 1; 
    visibility: visible; 
  }
  
  /* Mega Panel (desktop floating) - Support for multiple instances */
  .mega-panel {
    position: fixed;
    top: 110px; /* under header */
    left: 50%; transform: translate(-50%, -6px) scale(0.98);
    width: var(--panel);
    height: 468px;
    background: var(--bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
    z-index: 1000; /* z-index بالا */
  }
  
  .mega-panel.is-visible { 
    opacity: 1; 
    visibility: visible; 
    pointer-events: auto; 
    transform: translate(-50%, 0) scale(1); 
  }
  
  .mega-panel__inner { display: grid; grid-template-columns: var(--cats) 1fr; gap: 0; height: 100%; }
  
  /* Right content (swapped from left) */
  .mega-content { padding: 24px 28px; }
  .mega-group { display: none; animation: fadeIn var(--transition) both; }
  .mega-group.is-active { display: block; }
  .mega-group__title { 
    display: block; 
    font-weight: 700; 
    font-size: 16px; 
    color: #111827; 
    margin-bottom: 24px;
    position: relative;
  }
  .mega-group__title::after {
    content: "";
    position: absolute;
    bottom: -8px;
    right: 0;
    width: 60px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
  }
  
  .mega-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 32px; }
  .mega-col { list-style: none; margin: 0; padding: 0; }
  .mega-col li { margin: 8px 0; }
  .mega-col a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; color: #111827; }
  .mega-col a .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
  .mega-col a::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); transition: width var(--transition); }
  .mega-col a:hover::after { width: 100%; }
  .mega-col a:hover { color: var(--accent-600); }
  
  /* Left categories (swapped from right) */
  .mega-cats { 
    border-inline-end: 1px solid var(--line); 
    padding: 16px; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    background: #f9fafb; 
    border-radius: 8px;
    position: relative;
  }
  .mega-cat { 
    position: relative; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    width: 100%; 
    padding: 14px; 
    border-radius: 10px; 
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition); 
    text-align: start; 
    min-width: 0; /* Prevents flex item from overflowing */
  }
  .mega-cat .icon { width: 28px; height: 28px; opacity: .95; }
  
  /* Prevent text wrapping in mega-cat */
  .mega-cat span,
  .mega-cat a {
    white-space: wrap !important;
  }
  .mega-cat:hover { background: #fff; box-shadow: var(--shadow-md); transform: translateY(-1px); }
  .mega-cat:hover span { color: #222230; }
  .mega-cat.is-active { background: #fff; box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgba(255,122,26,.16); }
  .mega-cat.is-active::after { content: ""; position: absolute; inset-inline-end: -12px; top: 50%; width: 6px; height: 28px; background: var(--accent); border-radius: 3px; transform: translateY(-50%); }
  
  /* Brand slot moved to mega-cats bottom-right */
  .brand-slot { 
    position: absolute; 
    bottom: 16px; 
    right: 16px; 
    display: flex; 
    justify-content: flex-end; 
  }
  .brand-slot img { 
    width: 99px; 
    height: 38px; 
    object-fit: cover; 
    opacity: .9; 
  }
  
  /* Desktop and Tablet Styles - Ensure hamburger is always hidden */
  @media (min-width: 768px) {
    /* Force hide hamburger on desktop and tablet - but allow JS override */
    .hamburger,
    .pym-mega-menu .hamburger,
    .elementor-widget-pym-mega-menu .hamburger,
    .site-header .hamburger,
    .woocommerce .hamburger,
    .woocommerce-page .hamburger,
    .woocommerce-account .hamburger,
    body.woocommerce .hamburger,
    body.woocommerce-page .hamburger,
    body.woocommerce-account .hamburger {
      display: none;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
    }
  }
  
  /* Tablet Styles - Keep desktop behavior */
  @media (min-width: 768px) and (max-width: 1024px) {
    /* Ensure hamburger is hidden on tablets */
    .hamburger {
      display: none !important;
    }
    
    /* Keep navigation visible like desktop */
    .primary-nav {
      position: relative !important;
      transform: none !important;
      width: auto !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    
    .nav-list {
      flex-direction: row !important;
      align-items: center !important;
      gap: 0 !important;
      padding: 0 !important;
      background-color: #f0f5fd !important;
    }
    
    .nav-section {
      flex-direction: row !important;
      align-items: center !important;
    }
    
    .nav-separator-container {
      display: block !important;
      margin: 0 12px !important; /* کاهش فاصله */
    }
    
    .nav-item {
      width: auto !important;
    }
    
    .nav-link {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      padding: 12px 8px !important; /* کاهش پدینگ */
      border-radius: 8px !important;
      border-bottom: none !important;
      transition: background var(--transition), color var(--transition) !important;
    }
    
    /* Restore desktop hover effects */
    .nav-item:not(.has-mega) .nav-link::after {
      display: block !important;
    }
    
    .nav-item .nav-link:hover {
      background-color: #f0f5fd !important;
      border-radius: 8px !important;
    }
    
    /* Show chevron icon on tablets */
    .nav-link .icon[src*="chevron-downbl.svg"] {
      display: block !important;
    }
    
    /* Hide mobile chevron */
    .nav-link::after {
      display: none !important;
    }
    
    /* Mega panel adjustments for tablet */
    .mega-panel {
      position: fixed !important;
      top: 90px !important;
      left: 50% !important;
      transform: translate(-50%, -6px) scale(0.98) !important;
      width: min(90vw, 800px) !important;
      height: 400px !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      box-shadow: var(--shadow-lg) !important;
      border-radius: var(--radius) !important;
    }
    
    .mega-panel.is-visible {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      transform: translate(-50%, 0) scale(1) !important;
    }
    
    .mega-panel__inner {
      display: grid !important;
      grid-template-columns: 160px 1fr !important; /* کاهش عرض ستون دسته‌بندی */
      gap: 0 !important;
      height: 100% !important;
      width: 100% !important;
    }
    
    /* Adjust mega-cats for tablet */
    .mega-cats {
      display: flex !important;
      margin-top: 0 !important;
      border-inline-end: 1px solid var(--line) !important;
      padding: 12px !important; /* کاهش پدینگ */
      flex-direction: column !important;
      gap: 8px !important; /* کاهش فاصله */
      background: #f9fafb !important;
      border-radius: 8px !important;
      position: relative !important;
    }
    
    .mega-content {
      padding: 16px 20px !important; /* کاهش پدینگ */
      margin-top: 0 !important;
      overflow-y: auto !important;
    }
    
    /* Adjust mega columns for tablet */
    .mega-columns {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 12px 20px !important; /* کاهش فاصله */
      padding: 0 !important;
    }
    
    /* Container adjustments for tablet */
    .container {
      width: min(95vw, 1000px) !important;
      padding-inline: 12px !important; /* کاهش پدینگ */
    }
    
    /* Mobile header hidden on tablet */
    .mobile-header {
      display: none !important;
    }
    
    /* Ensure overlay works on tablet */
    .mega-overlay {
      top: 75px !important;
    }
    
    /* Additional tablet optimizations */
    .nav-link-content {
      display: flex !important;
      align-items: center !important;
      gap: 4px !important; /* کاهش فاصله */
    }
    
    .nav-link .icon {
      width: 16px !important; /* کاهش اندازه آیکون */
      height: 16px !important;
    }
    
    /* Adjust mega-cat items for tablet */
    .mega-cat {
      padding: 10px !important; /* کاهش پدینگ */
      gap: 6px !important; /* کاهش فاصله */
    }
    
    .mega-cat .icon {
      width: 20px !important; /* کاهش اندازه آیکون */
      height: 20px !important;
    }
    
    .mega-cat span {
      font-size: 12px !important; /* کاهش اندازه فونت */
    }
    
    /* Adjust mega group title for tablet */
    .mega-group__title {
      font-size: 14px !important; /* کاهش اندازه فونت */
      margin-bottom: 16px !important; /* کاهش فاصله */
    }
    
    /* Adjust mega column links for tablet */
    .mega-col a {
      font-size: 12px !important; /* کاهش اندازه فونت */
      padding: 4px 0 !important; /* کاهش پدینگ */
    }
    
    .mega-col a .dot {
      width: 4px !important; /* کاهش اندازه نقطه */
      height: 4px !important;
    }
    
    /* Brand slot adjustment for tablet */
    .brand-slot {
      bottom: 10px !important; /* کاهش فاصله */
      right: 10px !important;
    }
    
    .brand-slot img {
      width: 70px !important; /* کاهش اندازه لوگو */
      height: 26px !important;
    }
    
    /* Responsive text sizing for tablet */
    .nav-link {
      font-size: 12px !important; /* کاهش اندازه فونت */
    }
    
    .mega-cat span {
      white-space: wrap;

    }
  }
  
  /* Small tablet optimizations */
  @media (min-width: 768px) and (max-width: 900px) {
    .container {
      width: 95vw !important;
      padding-inline: 8px !important; /* کاهش بیشتر پدینگ */
    }
    
    .nav-section + .nav-section {
      margin-left: 16px !important; /* کاهش فاصله */
    }
    
    .nav-separator-container {
      margin: 0 8px !important; /* کاهش فاصله */
    }
    
    .nav-link {
      padding: 10px 6px !important; /* کاهش بیشتر پدینگ */
      font-size: 11px !important; /* کاهش بیشتر اندازه فونت */
    }
    
    .mega-panel {
      width: 95vw !important;
      height: 360px !important; /* کاهش ارتفاع */
    }
    
    .mega-panel__inner {
      grid-template-columns: 140px 1fr !important; /* کاهش بیشتر عرض ستون */
    }
    
    .mega-cats {
      padding: 8px !important; /* کاهش بیشتر پدینگ */
      gap: 6px !important; /* کاهش بیشتر فاصله */
    }
    
    .mega-cat {
      padding: 8px !important; /* کاهش بیشتر پدینگ */
      gap: 4px !important; /* کاهش بیشتر فاصله */
    }
    
    .mega-cat .icon {
      width: 18px !important; /* کاهش بیشتر اندازه آیکون */
      height: 18px !important;
    }
    
    .mega-cat span {
      font-size: 11px !important; /* کاهش بیشتر اندازه فونت */
    }
    
    .mega-content {
      padding: 14px 16px !important; /* کاهش بیشتر پدینگ */
    }
    
    .mega-group__title {
      font-size: 13px !important; /* کاهش بیشتر اندازه فونت */
      margin-bottom: 14px !important; /* کاهش بیشتر فاصله */
    }
    
    .mega-columns {
      gap: 8px 16px !important; /* کاهش بیشتر فاصله */
    }
    
    .mega-col a {
      font-size: 11px !important; /* کاهش بیشتر اندازه فونت */
      padding: 3px 0 !important; /* کاهش بیشتر پدینگ */
    }
    
    .mega-col li {
      margin: 6px 0 !important; /* کاهش فاصله آیتم‌ها */
    }
  }
  
  @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  
  /* Hero/content demo */
  .hero { padding: 48px 0 16px; }
  .hero h1 { margin: 0 0 8px; }
  .spacer { height: 120vh; }
  
/* راه‌حل اصولی برای تداخل z-index در موبایل */
/* وقتی مگامنو باز است، عناصر پایین‌تر رو به زیر بفرست */
body.mega-open .pym-mini-cart-wrapper .pym-mini-cart-toggle,
body.nav-open .pym-mini-cart-wrapper .pym-mini-cart-toggle {
  z-index: 10 !important; /* پایین‌تر از مگامنو */
  pointer-events: none; /* غیرفعال کردن کلیک */
}

/* محتوای مینی‌کارت هم در صورت باز بودن مگامنو به زیر برود */
body.mega-open .pym-mini-cart-wrapper .pym-mini-cart-content,
body.nav-open .pym-mini-cart-wrapper .pym-mini-cart-content,
body.mega-open .pym-mini-cart-wrapper .pym-mini-cart-content.open,
body.nav-open .pym-mini-cart-wrapper .pym-mini-cart-content.open {
  z-index: 10 !important; /* پایین‌تر از مگامنو */
}

/* کل wrapper مینی‌کارت هم به زیر برود */
body.mega-open .pym-mini-cart-wrapper,
body.nav-open .pym-mini-cart-wrapper {
  z-index: 10 !important; /* پایین‌تر از مگامنو */
}

/* اطمینان از اینکه مگامنو همیشه بالاتر باشه */
body.mega-open .pym-mega-menu .mega-panel,
body.nav-open .pym-mega-menu .primary-nav {
  z-index: 99999 !important; /* بالاترین z-index ممکن */
}

/* همچنین overlay مگامنو باید بالاتر باشه */
body.mega-open .pym-mega-menu .mega-overlay,
body.nav-open .pym-mega-menu .mega-overlay {
  z-index: 99998 !important; /* یکی پایین‌تر از پنل اصلی */
}

/* Off-canvas (mobile) */
@media (max-width: 767px) {
  .hamburger,
  .pym-mega-menu .hamburger,
  .elementor-widget-pym-mega-menu .hamburger,
  .site-header .hamburger,
  .woocommerce .hamburger,
  .woocommerce-page .hamburger,
  .woocommerce-account .hamburger,
  body.woocommerce .hamburger,
  body.woocommerce-page .hamburger,
  body.woocommerce-account .hamburger { 
    display: inline-flex !important; 
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    flex-shrink: 0; /* جلوگیری از کوچک شدن */
    width: 42px; 
    height: 42px;
  }
    
    /* Custom hamburger icon mobile styles */
    .hamburger.custom-icon {
      padding: 6px;
    }
    
    .hamburger.custom-icon .hamburger-svg {
      width: 20px;
      height: 20px;
    }
    
  .primary-nav {
    position: fixed; inset: 0 0 0 auto; width: min(92vw, 360px); background: var(--bg); z-index: 1000; /* z-index بالا */
    transform: translateX(100%); transition: transform var(--transition);
    box-shadow: -6px 0 20px rgba(17, 24, 39, .1);
  }
    
    /* Instance-specific navigation open state - z-index will be handled by body classes */
    .pym-mega-menu.nav-open .primary-nav { 
      transform: translateX(0); 
    }
  
    /* Mobile Header */
    .mobile-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 14px;
      border-bottom: 1px solid var(--line);
      background: var(--bg);
    }
    
    .mobile-logo img {
      width: 80px;
      height: 30px;
      object-fit: cover;
    }
    
    .mobile-close {
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: transparent !important;
      cursor: pointer;
      transition: opacity var(--transition);
    }
    
    .mobile-close:hover {
      opacity: 0.7;
    }
    
    .mobile-close img {
      width: 40px;
      height: 40px;
    }
    
    .nav-list { 
      flex-direction: column; 
      align-items: stretch; 
      gap: 0; 
      padding: 18px 14px; 
    }
    
    /* Mobile navigation sections */
    .nav-section {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      margin-left: 0 !important;
    }
    
    .nav-separator-container {
      display: none;
    }
    
    .main-menu {
      gap: 8px;
    }
    
    .nav-item { width: 100%; }
    .nav-link { 
      display: flex; 
      align-items: center;
      justify-content: space-between;
      padding: 16px; 
      border-radius: 0px; 
      transition: background var(--transition);
      border-bottom: 1px solid #EAEDF0; 
    }
    
    /* Style the nav-link content container */
    .nav-link-content {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
    }
    
    /* Ensure icons are properly aligned in mobile */
    .nav-link-content .icon {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }
    
    /* Hide chevron-downbl icon in mobile */
    .nav-link .icon[src*="chevron-downbl.svg"] {
      display: none;
    }
    
    /* Add chevron icon to all mobile menu items */
    .nav-link::after {
      content: "";
      width: 20px;
      height: 20px;
      background-image: url('../images/mega-menu/icons/chevron-leftbl.svg');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      flex-shrink: 0;
    }
    
    /* Mobile hover states */
    .nav-item.has-mega .nav-link:hover { 
      background: #f3f4f6; 
      border-radius: 10px;
    }
    
    .nav-item:not(.has-mega) .nav-link:hover { 
      background: #f3f4f6; 
      border-radius: 10px;
    }
    
    /* Hide hover line effect in mobile */
    .nav-item:not(.has-mega) .nav-link::after {
      display: none;
    }
  
  /* Mega panel becomes nested layer in mobile */
  .mega-panel { 
    position: fixed; 
    inset: 0; 
    width: 100vw; 
    height: 100vh; 
    transform: translateX(100%); 
    opacity: 1; 
    visibility: visible; 
    pointer-events: auto; 
    box-shadow: none; 
    border-radius: 0; 
    top: 0; 
    z-index: 1000; /* z-index بالا */
    background: var(--bg);
  }
    
    /* Instance-specific mega panel open state - z-index will be handled by body classes */
    .pym-mega-menu.mega-open .mega-panel { 
      transform: translateX(0); 
    }
    
    .mega-panel__inner { 
      display: grid; 
      grid-template-columns: var(--cats) 1fr; 
      gap: 0; 
      height: 100%; 
      width: 100%;
    }
    
    /* Mobile header for mega menu */
    .mega-panel::before {
      content: "دسته‌بندی محصولات";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 60px;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 16px;
      border-bottom: 1px solid var(--line);
      z-index: 1; /* این z-index مناسب است چون داخل mega-panel است */
    }
  
    /* Back button for mega menu */
    .mega-panel::after {
      content: "";
      position: absolute;
      top: 20px;
      right: 20px;
      width: 24px;
      height: 24px;
      background-image: url('../images/mega-menu/icons/arrow-rightbl.svg');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
      z-index: 2; /* این z-index مناسب است چون داخل mega-panel است */
    }
  
    .mega-cats { 
      display: flex; 
      margin-top: 60px;
      border-inline-end: 1px solid var(--line); 
      padding: 16px; 
      flex-direction: column; 
      gap: 12px; 
      background: #f9fafb; 
      border-radius: 0;
      position: relative;
    }
    
    /* Style mega-cat items in mobile */
    .mega-cat {
      display: flex;
      align-items: center;
      padding: 14px;
      border-radius: 10px;
      transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
      background: transparent;
    }
    
    .mega-cat:hover {
      background: #f3f4f6;
      border-radius: 10px;
    }
    
    .mega-content { 
      padding: 24px 28px; 
      margin-top: 60px;
      overflow-y: auto;
    }
    
    .mega-group { 
      display: none; 
      border-bottom: none; 
    }
    .mega-group.is-active { 
      display: block; 
    }
    .mega-group__title { 
      display: block; 
      padding: 0; 
      margin-bottom: 24px;
      font-weight: 700;
      font-size: 16px;
      color: #111827;
      position: relative;
    }
    .mega-group__title::after {
      content: "";
      position: absolute;
      bottom: -8px;
      right: 0;
      width: 60px;
      height: 2px;
      background: var(--accent);
      border-radius: 1px;
    }
  
    .mega-columns { 
      padding: 0; 
      display: block; 
      gap: 0; 
      max-height: none; 
      overflow: visible; 
      transition: none; 
    }
    
    .mega-col { 
      margin-bottom: 0; 
    }
    
    .mega-col li { 
      margin: 12px 0; 
    }
    
    .mega-col a { 
      padding: 8px 0; 
    }
  
    .brand-slot { 
      position: absolute; 
      bottom: 16px; 
      right: 16px; 
      display: flex; 
      justify-content: flex-end; 
    }
    .brand-slot img { 
      width: 99px; 
      height: 38px; 
      object-fit: cover; 
      opacity: .9; 
    }
  }