/* ============================================================
   DMHouse — HEADER STYLES  v3
   ============================================================ */

/* ─── Reset ایزوله ─── */
.dm-main-header *,
.dm-main-header *::before,
.dm-main-header *::after { box-sizing: border-box !important; }
.dm-main-header ul,
.dm-main-header li  { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.dm-main-header a   { text-decoration: none !important; box-shadow: none !important; color: inherit; }
.dm-main-header img { max-width: 100%; display: block; box-shadow: none !important; border: none !important; }
.dm-main-header button { font-family: inherit; }


/* ════════════════════════════════════════════
   CSS Variables — رنگ‌بندی داینامیک
   (مقادیر از PHP در wp_head override می‌شوند)
   ════════════════════════════════════════════ */
:root {
    --dm-primary:     #ff6600;
    --dm-primary-10:  rgba(255,102,0,0.10);
    --dm-primary-20:  rgba(255,102,0,0.20);
    --dm-text:        #222;
    --dm-text-light:  #888;
    --dm-border:      #eee;
    --dm-bg-soft:     #f8f9fb;
    --dm-white:       #fff;
    --dm-radius:      10px;
}


/* ════════════════════════════════════════════
   نوار تبلیغاتی بالای صفحه
   ════════════════════════════════════════════ */
.site-top-banner { width: 100%; display: block; line-height: 0; }
.site-top-banner a { display: block; width: 100%; }
.site-top-banner img { width: 100%; height: auto; display: block; }


/* ════════════════════════════════════════════
   Wrapper اصلی هدر
   ════════════════════════════════════════════ */
.dm-main-header {
    width: 100% !important;
    max-width: 100% !important;
    direction: rtl !important;
    background: var(--dm-white) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07) !important;
    position: relative !important;
    z-index: 200 !important;
}
.dm-header-container {
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    position: static !important;
}


/* ════════════════════════════════════════════
   ردیف ۱: لوگو + جستجو + اکشن‌ها
   ════════════════════════════════════════════ */
.header-main-row {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

/* لوگو */
.header-logo { flex: 0 0 auto !important; }
.header-logo a { display: block !important; }
.header-logo img { max-height: 48px !important; width: auto !important; }
.header-logo .logo-text { font-size: 22px; font-weight: 900; color: var(--dm-text); }

/* جستجو */
.header-search { flex: 1 !important; max-width: 600px !important; }
.header-search form {
    display: flex !important;
    align-items: center !important;
    background: var(--dm-bg-soft) !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    height: 48px !important;
    border: 1.5px solid transparent !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    gap: 8px !important;
}
.header-search form:focus-within {
    border-color: var(--dm-primary) !important;
    background: var(--dm-white) !important;
    box-shadow: 0 4px 14px var(--dm-primary-10) !important;
}
.header-search input[type="search"],
.header-search input[type="text"] {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-size: 13px !important;
    color: var(--dm-text) !important;
    direction: rtl !important;
    padding: 0 !important;
    height: 100% !important;
    box-shadow: none !important;
}
.header-search button[type="submit"] {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #999 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    transition: color 0.2s !important;
}
.header-search button[type="submit"]:hover { color: var(--dm-primary) !important; }

/* اکشن‌ها */
.header-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-right: auto !important;
}
.action-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #444 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 9px 15px !important;
    border: 1.5px solid var(--dm-border) !important;
    border-radius: var(--dm-radius) !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    background: var(--dm-white) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    position: relative !important;
}
.action-btn:hover { border-color: var(--dm-primary) !important; color: var(--dm-primary) !important; background: #fff9f5 !important; }
.btn-cart { padding: 9px 12px !important; }
.cart-count {
    position: absolute !important;
    top: -5px !important;
    left: -5px !important;
    min-width: 20px !important;
    height: 20px !important;
    background: var(--dm-primary) !important;
    color: var(--dm-white) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    border: 2px solid var(--dm-white) !important;
    line-height: 1 !important;
}


/* ════════════════════════════════════════════
   ردیف ۲: مگامنو + منوی اصلی + پشتیبانی
   ════════════════════════════════════════════ */
.header-nav-row {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 52px !important;
}
.nav-right { display: flex !important; align-items: stretch !important; gap: 4px !important; }
.nav-left  { display: flex !important; align-items: center !important; }

.header-mega-wrapper {
    position: static !important;
    display: flex !important;
    align-items: stretch !important;
}
.mega-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--dm-text) !important;
    padding: 0 16px !important;
    cursor: pointer !important;
    border-left: 1px solid var(--dm-border) !important;
    border-top: none !important; border-right: none !important; border-bottom: none !important;
    white-space: nowrap !important;
    user-select: none !important;
    background: transparent !important;
    transition: color 0.2s !important;
}
.mega-trigger svg { flex-shrink: 0 !important; }
.header-mega-wrapper:hover .mega-trigger,
.header-mega-wrapper.is-open .mega-trigger { color: var(--dm-primary) !important; }

/* منوی اصلی */
.header-primary-nav { display: flex !important; align-items: center !important; }
.primary-menu-list  { display: flex !important; align-items: center !important; gap: 2px !important; }
.primary-menu-list > li { position: static !important; }
.primary-menu-list > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #555 !important;
    padding: 0 12px !important;
    height: 52px !important;
    border-bottom: 3px solid transparent !important;
    border-top: none !important; border-left: none !important; border-right: none !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
}
.primary-menu-list > li > a:hover { color: var(--dm-primary) !important; border-bottom-color: var(--dm-primary) !important; }

.support-link {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #555 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}
.support-link svg { color: var(--dm-primary); flex-shrink: 0; }
.support-link:hover { color: var(--dm-primary) !important; }


/* ════════════════════════════════════════════════════════════
   ★ MEGA DROPDOWN — سه‌ستونه
   Hover از طریق JS با کلاس .is-active کنترل می‌شود
   ════════════════════════════════════════════════════════════ */
.dm-main-header .mega-dropdown {
    position: absolute !important;
    top: 100% !important;
    right: 226px !important;
    left: 0 !important;
    background: var(--dm-white) !important;
    border-top: 3px solid var(--dm-primary) !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.10) !important;
    z-index: 9999 !important;
    display: none !important;
    flex-direction: row !important;
    direction: rtl !important;
    min-height: 480px !important;
    max-height: 560px !important;
    overflow: visible !important;    /* ★ visible — بدون clip */
        width: 1450px;
}
.dm-main-header .header-mega-wrapper:hover .mega-dropdown,
.dm-main-header .header-mega-wrapper.is-open .mega-dropdown { display: flex !important; }


/* ════ ستون ۱: دسته‌های اصلی (270px) ════ */
.dm-main-header .mega-nav-level-0 {
    flex: 0 0 270px !important;
    width: 270px !important;
    background: var(--dm-bg-soft) !important;
    border-left: 1px solid var(--dm-border) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px 0 !important;
    position: static !important;
}
.dm-main-header .mega-nav-level-0 > li { position: static !important; }
.dm-main-header .mega-nav-level-0 > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px 10px 10px !important;
    border-right: 3px solid transparent !important;
    border-left: none !important; border-top: none !important; border-bottom: none !important;
    min-height: 60px !important;
    transition: background 0.15s, border-color 0.15s !important;
    color: #444 !important;
}
/* ★ active از طریق JS — بدون :hover */
.dm-main-header .mega-nav-level-0 > li.is-active > a {
    background: var(--dm-white) !important;
    border-right-color: var(--dm-primary) !important;
}
.dm-main-header .mega-nav-level-0 > li.is-active .mm-title { color: var(--dm-primary) !important; }
.dm-main-header .mega-nav-level-0 > li.is-active .mm-chevron { color: var(--dm-primary) !important; }

/* آیکون */
.dm-main-header .mm-icon {
    flex: 0 0 36px !important;
    width: 36px !important; height: 36px !important;
    border-radius: 8px !important;
    background: var(--dm-white) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    flex-shrink: 0 !important;
}
.dm-main-header .mm-icon img { width: 26px !important; height: 26px !important; object-fit: contain !important; }

.dm-main-header .mm-body { flex: 1 !important; min-width: 0 !important; }
.dm-main-header .mm-title {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1.3 !important;
    transition: color 0.15s !important;
}
.dm-main-header .mm-desc {
    display: block !important;
    font-size: 10.5px !important;
    color: #aaa !important;
    margin-top: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.dm-main-header .mm-chevron { flex: 0 0 auto !important; color: #ccc !important; transition: color 0.15s !important; }


/* ════ Content Pane (ستون ۲+۳) ════
   ★ فقط با .is-active (JS) نمایش داده می‌شود — بدون :hover
   ─────────────────────────────────── */
.dm-main-header .mega-content-pane {
    position: absolute !important;
    top: 0 !important;
    right: 270px !important;
    left: 0 !important;
    bottom: 0 !important;
    background: var(--dm-white) !important;
    display: none !important;
    flex-direction: row !important;
    overflow: hidden !important;
}
.dm-main-header .mega-nav-level-0 > li.is-active > .mega-content-pane {
    display: flex !important;
    direction: rtl !important;
}


/* ════ ستون ۲: زیردسته‌ها (230px) ════ */
.dm-main-header .mega-nav-level-1 {
    flex: 0 0 230px !important;
    width: 230px !important;
    border-left: 1px solid var(--dm-border) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px 0 !important;
    background: var(--dm-white) !important;
    position: static !important;
    height: 100% !important;
}
.dm-main-header .mega-nav-level-1 > li { position: static !important; }
.dm-main-header .mega-nav-level-1 > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 11px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #444 !important;
    border-right: 3px solid transparent !important;
    border-left: none !important; border-top: none !important; border-bottom: none !important;
    min-height: 44px !important;
    transition: all 0.15s !important;
}
/* ★ active از طریق JS */
.dm-main-header .mega-nav-level-1 > li.is-active > a {
    color: var(--dm-primary) !important;
    border-right-color: var(--dm-primary) !important;
    background: #fafafa !important;
}
.dm-main-header .mega-nav-level-1 > li.is-active > a .mm-chevron { color: var(--dm-primary) !important; }
.dm-main-header .mega-nav-level-1 > li > a .mm-chevron { color: #ddd !important; }


/* ════ ستون ۳: آیتم‌ها / برندها ════
   ★ فقط با .is-active (JS) نمایش می‌شود
   default: first-child تا JS مدیریت کنه
   ──────────────────────────────────── */
.dm-main-header .mega-nav-level-2 {
    position: absolute !important;
    top: 0 !important;
    right: 230px !important;
    left: 0 !important;
    bottom: 0 !important;
    background: var(--dm-white) !important;
    overflow-y: auto !important;
    padding: 20px 24px !important;
    display: none !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    gap: 0 !important;
    flex-direction: row !important;
}
/* پیش‌فرض CSS: first-child (JS بعد override می‌کنه) */
.dm-main-header .mega-nav-level-1 > li:first-child > .mega-nav-level-2 { display: flex !important; }
/* وقتی JS یک آیتم رو active کرد، first-child مخفی بشه */
.dm-main-header .mega-nav-level-1.has-active > li:first-child > .mega-nav-level-2 { display: none !important; }
/* آیتم active نمایش بده */
.dm-main-header .mega-nav-level-1 > li.is-active > .mega-nav-level-2 { display: flex !important; }

.dm-main-header .mega-nav-level-2 > li { flex: 0 0 50% !important; position: static !important; }
.dm-main-header .mega-nav-level-2 > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: #555 !important;
    border-radius: 6px !important;
    transition: all 0.15s !important;
}
.dm-main-header .mega-nav-level-2 > li > a:hover { color: var(--dm-primary) !important; background: #fff8f4 !important; }

/* بنر اختیاری مگامنو */
.dm-main-header .mega-static-banner {
    flex: 0 0 200px;
    border-right: 1px solid var(--dm-border);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}
.dm-main-header .mega-static-banner img { width: 100%; border-radius: 10px; }
.dm-main-header .mega-static-banner p { font-size: 12px; font-weight: 700; color: #444; margin: 10px 0 0; }


/* ════════════════════════════════════════════
   دسکتاپ / موبایل visibility
   ════════════════════════════════════════════ */
.header-desktop { display: none !important; }
.header-mobile  { display: block !important; }

@media (min-width: 992px) {
    .header-desktop { display: block !important; }
    .header-mobile  { display: none  !important; }
    /* ★ استیکی ناو موبایل روی دسکتاپ مخفی */
    .mobile-sticky-nav,
    .dm-main-header ~ .mobile-sticky-nav { display: none !important; }
    
}


/* لمسی: CSS hover غیرفعال */
@media (hover: none) {
    .dm-main-header .header-mega-wrapper:hover .mega-dropdown { display: none !important; }
}


/* ════════════════════════════════════════════
   هدر موبایل
   ════════════════════════════════════════════ */
.header-mobile {
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--dm-border) !important;
    background: var(--dm-white) !important;
}
.mobile-top-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}
.mobile-logo img { max-height: 30px !important; width: auto !important; }
.mobile-actions {
    margin-right: auto !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}
.mobile-icon-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important; height: 38px !important;
    background: transparent !important;
    border: 1.5px solid var(--dm-border) !important;
    border-radius: var(--dm-radius) !important;
    color: #555 !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    padding: 0px;
}
.mobile-icon-btn:hover { border-color: var(--dm-primary) !important; color: var(--dm-primary) !important; }

.mobile-search-wrapper form {
    display: flex !important;
    align-items: center !important;
    background: var(--dm-bg-soft) !important;
    border-radius: var(--dm-radius) !important;
    padding: 0 12px !important;
    height: 44px !important;
    gap: 8px !important;
    border: 1.5px solid transparent !important;
}
.mobile-search-wrapper form:focus-within { border-color: var(--dm-primary) !important; background: var(--dm-white) !important; }
.mobile-search-wrapper input {
    flex: 1 !important; border: none !important; background: transparent !important;
    outline: none !important; font-size: 13px !important; direction: rtl !important; color: #333 !important; padding: 0 !important;
}
.mobile-search-wrapper button { background: transparent !important; border: none !important; color: #888 !important; cursor: pointer !important; display: flex !important; align-items: center !important; flex-shrink: 0 !important; padding: 0 !important; }


/* ─── نوار استیکی پایین موبایل ─── */
.mobile-sticky-nav {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;   /* ★ RTL: از راست */
    left: 0 !important;
    background: var(--dm-white) !important;
    box-shadow: 0 -3px 20px rgba(0,0,0,0.07) !important;
    display: flex ;
    justify-content: space-around !important;
    align-items: center !important;
    direction: rtl !important;   /* ★ RTL صریح */
    padding: 8px 0 !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 9998 !important;
    border-top: 1px solid var(--dm-border) !important;
    border-radius: 16px 16px 0 0 !important;
}
.sticky-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    color: #888 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px 10px !important;
    position: relative !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
.sticky-nav-item.active,
.sticky-nav-item:hover { color: var(--dm-primary) !important; }
.sticky-cart-badge {
    position: absolute !important;
    top: 0 !important;
    left: 8px !important;   /* ★ RTL: badge سمت چپ آیکون */
    min-width: 18px !important; height: 18px !important;
    background: var(--dm-primary) !important;
    color: var(--dm-white) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    border-radius: 9px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 3px !important;
    border: 2px solid var(--dm-white) !important;
}


/* ─── آفکنواس موبایل ─── */
.mobile-offcanvas {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;   /* ★ RTL: از راست */
    left: auto !important;
    width: 100% !important;
    height: 100dvh !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: row-reverse !important;   /* ★ RTL: پنل از راست بیاد */
    transition: right 0.35s cubic-bezier(0.4,0,0.2,1) !important;
    direction: rtl !important;
}
.mobile-offcanvas.is-open { right: 0 !important; }

.offcanvas-bg {
    flex: 1 !important;
    background: rgba(0,0,0,0.55) !important;
    opacity: 0 !important;
    transition: opacity 0.3s !important;
}
.mobile-offcanvas.is-open .offcanvas-bg { opacity: 1 !important; }

.offcanvas-inner {
    width: 320px !important;
    max-width: 88vw !important;
    background: var(--dm-white) !important;
    height: 100% !important;
    overflow-y: auto !important;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12) !important;
    display: flex !important;
    flex-direction: column !important;
}
.offcanvas-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--dm-border) !important;
    flex-shrink: 0 !important;
}
.offcanvas-logo img { max-height: 32px !important; }
.offcanvas-close {
    background: transparent !important; border: none !important; cursor: pointer !important;
    color: #888 !important; display: flex !important; padding: 4px !important;
    border-radius: 6px !important; transition: all 0.2s !important;
}
.offcanvas-close:hover { background: #f5f5f5 !important; color: #333 !important; }

/* آفکنواس: سطح ۰ */
.mobile-menu-level-0 { flex: 1 !important; }
.mobile-menu-level-0 > li { border-bottom: 1px solid #f5f5f5 !important; position: static !important; }
.mobile-menu-level-0 > li > a {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 14px 20px !important; font-size: 14px !important; font-weight: 800 !important;
    color: #333 !important; gap: 10px !important; text-decoration: none !important;
}
.mobile-menu-level-0 > li.is-open > a { color: var(--dm-primary) !important; background: #fff9f5 !important; }
.mobile-menu-level-0 .mm-chevron { color: #bbb !important; transition: transform 0.3s !important; }
.mobile-menu-level-0 > li.is-open > a .mm-chevron { transform: rotate(-90deg) !important; color: var(--dm-primary) !important; }

.mobile-menu-level-0 .mega-content-pane {
    position: static !important; display: none !important; flex-direction: column !important;
    padding: 12px 20px !important; background: #fafafa !important; border-top: 1px solid var(--dm-border) !important;
}
.mobile-menu-level-0 > li.is-open > .mega-content-pane { display: flex !important; }

.mobile-menu-level-0 .mega-nav-level-1 {
    width: 100% !important; height: auto !important; border: none !important;
    padding: 0 !important; overflow: visible !important; flex: none !important; position: static !important;
}
.mobile-menu-level-0 .mega-nav-level-1 > li { margin-bottom: 16px !important; position: static !important; }
.mobile-menu-level-0 .mega-nav-level-1 > li > a {
    display: flex !important; align-items: center !important;
    font-size: 13px !important; font-weight: 800 !important; color: #222 !important;
    border-right: 3px solid var(--dm-primary) !important;
    border-left: none !important; border-top: none !important;
    padding: 0 10px 10px !important; margin-bottom: 8px !important;
    border-bottom: 1px solid var(--dm-border) !important; min-height: auto !important;
    background: transparent !important; text-decoration: none !important;
}
.mobile-menu-level-0 .mega-nav-level-1 .mm-chevron { display: none !important; }

.mobile-menu-level-0 .mega-nav-level-2 {
    position: static !important; display: flex !important; flex-direction: row !important;
    flex-wrap: wrap !important; gap: 6px !important; padding: 0 !important;
    top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
}
.mobile-menu-level-0 .mega-nav-level-2 > li { flex: 0 0 auto !important; position: static !important; }
.mobile-menu-level-0 .mega-nav-level-2 > li > a {
    display: inline-flex !important; padding: 6px 13px !important;
    font-size: 12px !important; color: #555 !important;
    border-radius: 20px !important; background: var(--dm-white) !important;
    border: 1px solid var(--dm-border) !important; font-weight: 600 !important; text-decoration: none !important;
}
.mobile-menu-level-0 .mega-nav-level-2 > li > a:hover { color: var(--dm-primary) !important; border-color: var(--dm-primary) !important; }


/* ════════════════════════════════════════════
   ★ MINI CART
   ════════════════════════════════════════════ */
.dm-mini-cart-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.45) !important;
    z-index: 99990 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s !important;
}
.dm-mini-cart-overlay.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.dm-mini-cart-panel {
    position: fixed !important;
    top: 0 !important;
    left: -420px !important;   /* ★ از چپ می‌آد (RTL) */
    width: 380px !important;
    max-width: 95vw !important;
    height: 100dvh !important;
    background: var(--dm-white) !important;
    z-index: 99991 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.12) !important;
    transition: left 0.35s cubic-bezier(0.4,0,0.2,1) !important;
    direction: rtl !important;
}
.dm-mini-cart-panel.is-open { left: 0 !important; }

.mini-cart-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px !important;
    border-bottom: 1px solid var(--dm-border) !important;
    flex-shrink: 0 !important;
}
.mini-cart-header h3 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--dm-text) !important;
    margin: 0 !important;
}
.mini-cart-header-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--dm-primary) !important;
    color: var(--dm-white) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 20px !important;
    padding: 2px 8px !important;
    margin-right: 8px !important;
}
.mini-cart-close-btn {
    width: 36px !important; height: 36px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: var(--dm-bg-soft) !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    color: #555 !important;
    transition: all 0.2s !important;
    padding: 0px;
}
.mini-cart-close-btn:hover { background: var(--dm-border) !important; color: var(--dm-text) !important; }

.mini-cart-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px !important;
}

/* آیتم‌های WooCommerce cart */
.mini-cart-body .woocommerce-mini-cart { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.mini-cart-body .woocommerce-mini-cart__empty-message {
    text-align: center !important;
    color: var(--dm-text-light) !important;
    padding: 40px 20px !important;
    font-size: 14px !important;
}
.mini-cart-body .woocommerce-mini-cart-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--dm-border) !important;
}
.mini-cart-body .woocommerce-mini-cart-item img {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    border: 1px solid var(--dm-border) !important;
    flex-shrink: 0 !important;
}
.mini-cart-item-details { display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 10px;}
.mini-cart-item-details a {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--dm-text) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    text-decoration: none !important;
    width: 100%;
}
.mini-cart-item-details a:hover { color: var(--dm-primary) !important; }
.mini-cart-body .woocommerce-Price-amount {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #11111190 !important;
    direction: rtl !important;
}
.mini-cart-body .woocommerce-Price-amount .woocommerce-Price-currencySymbol{
        opacity: 0.5;
}
.mini-cart-body .quantity { font-size: 12px !important; color: var(--dm-text-light) !important; }
.mini-cart-remove-btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #ccc !important;
    padding: 4px !important;
    display: flex !important;
    align-items: flex-start !important;
    flex-shrink: 0 !important;
    transition: color 0.2s !important;
    margin-top: 2px !important;
}
.mini-cart-remove-btn:hover { color: #e53e3e !important; }
/* hide default WC remove link (ما custom button داریم) */
.mini-cart-body .woocommerce-mini-cart-item > a.remove_from_cart_button { display: none !important; }

.mini-cart-footer {
    padding: 16px 20px !important;
    border-top: 1px solid var(--dm-border) !important;
    flex-shrink: 0 !important;
    background: var(--dm-bg-soft) !important;
}
.mini-cart-total-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
}
.mini-cart-total-row .label { font-size: 13px !important; font-weight: 700 !important; color: var(--dm-text-light) !important; }
.mini-cart-total-row .amount {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: var(--dm-primary) !important;
    direction: rtl !important;
}
.mini-cart-actions { display: flex !important; gap: 10px !important; }
.mini-cart-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    border-radius: var(--dm-radius) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    border: none !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}
.mini-cart-btn-cart {
    background: var(--dm-bg-soft) !important;
    color: var(--dm-text) !important;
    border: 1.5px solid var(--dm-border) !important;
}
.mini-cart-btn-cart:hover { border-color: var(--dm-primary) !important; color: var(--dm-primary) !important; }
.mini-cart-btn-checkout {
    background: var(--dm-primary) !important;
    color: var(--dm-white) !important;
}
.mini-cart-btn-checkout:hover { opacity: 0.9 !important; }

/* Loading spinner */
.mini-cart-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
}
.mini-cart-spinner {
    width: 32px !important; height: 32px !important;
    border: 3px solid var(--dm-border) !important;
    border-top-color: var(--dm-primary) !important;
    border-radius: 50% !important;
    animation: dm-spin 0.7s linear infinite !important;
}
@keyframes dm-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════
   ★ v3 PATCH — mega-nav-level-2 restructured by JS
   اکنون level-2 مستقیماً child از .mega-content-pane هست
   ════════════════════════════════════════════════════════════ */

/* Override کردن old overflow-x:hidden روی level-1 */
.dm-main-header .mega-nav-level-1 {
    overflow-x: visible !important;    /* ★ ضروری — بدون clip */
}

/* level-2 بعد از DOM restructure: مستقیم child از content-pane */
.dm-main-header .mega-content-pane > .mega-nav-level-2 {
    display: none !important;
}
.dm-main-header .mega-content-pane > .mega-nav-level-2.is-active {
    display: flex !important;
}

/* Override کردن قوانین قدیمی first-child (دیگه اعمال نمی‌شوند) */
.dm-main-header .mega-nav-level-1 > li:first-child > .mega-nav-level-2 { display: none !important; }
.dm-main-header .mega-nav-level-1.has-active > li:first-child > .mega-nav-level-2 { display: none !important; }
.dm-main-header .mega-nav-level-1 > li.is-active > .mega-nav-level-2 { display: none !important; }
/* (level-2 ها دیگه داخل li نیستند — داخل content-pane هستند) */
/*استایل مینی کارت*/
.mini-cart-body .dm-mini-cart-item{
    display: flex;
    align-items: flex-start;
}
.dm-mini-cart-panel.is-open .dm-mini-cart-item {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e5e7eb;
}

.dm-mini-cart-panel.is-open .dm-mini-cart-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}
/* ══════════════════════════════════════════════════════
   HEADER ADDITIONS — این فایل را به انتهای header.css اضافه کنید
   ══════════════════════════════════════════════════════ */

/* ── دکمه برگشت موبایل (صفحه محصول) ── */
.mobile-back-btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px 6px !important;
    color: #555 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    transition: background 0.2s !important;
    flex-shrink: 0 !important;
}
.mobile-back-btn:hover { background: #f5f5f5 !important; }
.mobile-back-btn svg { transform: scaleX(-1) !important; /* RTL: فلش به سمت راست = بازگشت */ }

/* ── تب‌بار آفکنواس ── */
.offcanvas-tab-bar {
    display: flex !important;
    border-bottom: 2px solid var(--dm-border) !important;
    flex-shrink: 0 !important;
    background: #fff !important;
}

.oc-tab-btn {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    padding: 13px 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #888 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    transition: color 0.2s, border-color 0.2s !important;
}

.oc-tab-btn.is-active {
    color: var(--dm-primary) !important;
    border-bottom-color: var(--dm-primary) !important;
}

.oc-tab-btn svg { color: inherit !important; }

/* ── پانل‌های آفکنواس ── */
.oc-panel {
    display: none !important;
    flex-direction: column !important;
    flex: 1 !important;
    overflow-y: auto !important;
}
.oc-panel.is-active { display: flex !important; }

/* ── منوی دسترسی سریع (تب ۲) ── */
.oc-quick-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
}

.oc-quick-menu > li {
    border-bottom: 1px solid #f5f5f5 !important;
}

.oc-quick-menu > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-decoration: none !important;
    gap: 10px !important;
    transition: color 0.2s, background 0.2s !important;
}

.oc-quick-menu > li > a:hover {
    color: var(--dm-primary) !important;
    background: var(--dm-primary-10) !important;
}

.oc-quick-menu > li > a::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--dm-primary) !important;
    flex-shrink: 0 !important;
    opacity: 0.5 !important;
}

.oc-quick-menu > li > a:hover::before { opacity: 1 !important; }

/* sub-menu */
.oc-quick-menu .sub-menu {
    list-style: none !important;
    padding: 0 0 8px 0 !important;
    margin: 0 !important;
    background: #fafafa !important;
}
.oc-quick-menu .sub-menu a {
    padding: 10px 34px !important;
    font-size: 13px !important;
    color: #666 !important;
    display: block !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
.oc-quick-menu .sub-menu a:hover { color: var(--dm-primary) !important; }

/* ── بخش تماس تب ۲ ── */
.oc-quick-contact {
    border-top: 1px solid var(--dm-border) !important;
    padding: 16px 20px !important;
    margin-top: auto !important;
}

.oc-quick-contact-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #555 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    direction: ltr !important;
    justify-content: flex-end !important;
}

.oc-quick-contact-link svg { color: var(--dm-primary) !important; flex-shrink: 0 !important; }
.oc-quick-contact-link:hover { color: var(--dm-primary) !important; }

/* ── اطمینان از overflow آفکنواس ── */
.offcanvas-inner {
    overflow-y: hidden !important; /* مدیریت overflow توسط پانل‌ها */
}