/* =========================================================
   MenuCss.css FINAL (Clean + Stable) - FIXED + DESKTOP PATCH
   - Desktop mega: hover stable + show active pane (with fallback on hover)
   - Mobile mega: checkbox open + per-parent accordion
   - Watermark icons behind titles (REAL behind text)
   - Cats link: graphite + hamburger (desktop + mobile)
   - Parents list scroll with SAME mega height
   - Divider full height of mega (not page)
   ========================================================= */


/* ===================== TOP NAV ===================== */
.pn-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: flex-end;
}

.pn-nav__item {
    position: relative
}

/* unify <a> and <label> alignment */
.pn-nav__link,
.pn-nav__toggle {
    text-decoration: none;
    color: #222;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
    position: relative;
    margin: 0;
    vertical-align: middle;
    font-size: 14px;
}

.pn-nav__link--bold {
    font-weight: 900
}

/* ---- Categories trigger (graphite + hamburger) ---- */
.pn-nav__link--cats {
    color: #687383;
    padding-right: 36px !important;
}

    .pn-nav__link--cats::before {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 2px;
        border-radius: 2px;
        opacity: .9;
        background: currentColor;
        box-shadow: 0 -5px 0 0 currentColor, 0 5px 0 0 currentColor;
    }

/* lock style on mobile (templates may override labels) */
@media (max-width:992px) {
    .pn-nav__item--products .pn-nav__toggle.pn-nav__link--cats {
        color: #687383 !important;
        display: inline-flex !important;
    }

        .pn-nav__item--products .pn-nav__toggle.pn-nav__link--cats::before {
            opacity: .9 !important;
            background: currentColor !important;
            box-shadow: 0 -5px 0 0 currentColor, 0 5px 0 0 currentColor !important;
        }
}


/* ===================== MEGA: STATE INPUTS ===================== */
.pn-mega__chk,
.pn-parent__chk {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* ===================== MEGA: PANEL BASE ===================== */
.pn-mega {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 980px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    overflow: visible;
    z-index: 11000;
}

    /* hover bridge to prevent flicker */
    .pn-mega::before {
        content: "";
        position: absolute;
        top: -16px;
        left: 0;
        right: 0;
        height: 16px;
    }

/* IMPORTANT: relative for divider + absolute panes */
.pn-mega__inner {
    position: relative;
    display: flex;
    min-height: 420px; /* mega height ثابت */
    border-radius: 14px;
    overflow: hidden;
}

/* Right column (parents) */
.pn-mega__right {
    width: 270px;
    background: #fafafa;
    border-left: 1px solid rgba(0,0,0,.06);
    display: flex;
    flex-direction: column; /* برای اسکرول parents */
}

.pn-mega__rightTitle {
    padding: 12px 12px 8px;
    font-weight: 900;
    color: #111;
}

/* Parents list scroll: exactly inside mega height */
.pn-mega__parents {
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0; /* لازم برای اسکرول درست در flex */
}

    .pn-mega__parents::-webkit-scrollbar {
        width: 8px
    }

    .pn-mega__parents::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.15);
        border-radius: 10px
    }

    .pn-mega__parents::-webkit-scrollbar-track {
        background: rgba(0,0,0,.05)
    }

.pn-mega__parent {
    margin: 4px 0;
    border-radius: 12px;
    position: static;
}

/* Parent label */
.pn-mega__parentBtn {
    display: block;
    width: 100%;
    text-align: right;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    font-weight: 800;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    outline: none;
}

    .pn-mega__parentBtn:hover {
        background: #fff;
        box-shadow: 0 8px 18px rgba(0,0,0,.06);
        color: #111;
    }

    /* watermark behind parent title */
    .pn-mega__parentBtn::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 26px;
        height: 26px;
        opacity: .10;
        pointer-events: none;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
    }

/* Pane container */
.pn-mega__pane {
    background: #fff
}

/* head */
.pn-mega__head {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: #fff;
    position: relative;
    isolation: isolate; /* برای کنترل لایه‌ها */
}

/* ===== View-all title: ICON truly behind text (single line) ===== */
.pn-mega__title {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    color: #111;
    font-weight: 900;
    padding: 10px 46px 10px 12px; /* جا برای آیکون سمت راست */
    overflow: hidden;
}

/* متن را جدا کن تا مطمئن شویم روی آیکون است */
.pn-mega__titleText {
    position: relative;
    z-index: 2;
}

/* آیکون پشت متن (Watermark) */
.pn-mega__titleIcon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    opacity: .14;
    z-index: 1; /* پشت متن */
    pointer-events: none;
    line-height: 1;
}

/* body */
.pn-mega__body {
    padding: 12px 16px;
    max-height: 460px;
    overflow: auto;
}

/* subcategories chips auto-width */
.pn-subgrid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 10px;
    align-items: flex-start;
}

.pn-subitem {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: auto;
    max-width: 100%;
    padding: 10px 12px;
    text-decoration: none;
    color: #333;
    font-weight: 800;
    font-size: 13px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.06);
    background: #fff;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

    .pn-subitem:hover {
        box-shadow: 0 10px 22px rgba(0,0,0,.08);
        border-color: rgba(0,0,0,.10);
    }

.pn-subitem__arrow {
    opacity: .6;
    flex: 0 0 auto
}

/* watermark for subitem */
.pn-subitem::before {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    opacity: .07;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73L13 2.27a2 2 0 0 0-2 0L4 6.27A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8z'/%3E%3Cpath d='M3.3 7.3L12 12l8.7-4.7'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}

.pn-mega__empty {
    padding: 14px;
    color: #777;
    font-weight: 700;
    font-size: 13px;
}


/* ===================== DESKTOP ===================== */
@media (min-width:993px) {

    /* open mega on hover/focus */
    .pn-nav__item.has-mega:hover > .pn-mega,
    .pn-nav__item.has-mega:focus-within > .pn-mega,
    .pn-mega:hover {
        display: block;
    }

    /* FULL-HEIGHT divider inside mega */
    .pn-mega__inner::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 270px;
        width: 1px;
        background: rgba(0,0,0,.06);
        pointer-events: none;
        z-index: 20;
    }

    .pn-mega__right {
        border-left: 0 !important
    }

    /* show ONLY active pane */
    .pn-mega__parent .pn-mega__pane {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 270px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 5;
        background: #fff;
    }

    .pn-mega__parent.is-active .pn-mega__pane {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* highlight active parent */
    .pn-mega__parent.is-active .pn-mega__parentBtn {
        background: #fff;
        box-shadow: 0 8px 18px rgba(0,0,0,.06);
        color: #111;
    }

    /* ===================== DESKTOP PATCH ===================== */

    /* اگر قالب روی header/menu overflow:hidden گذاشته باشد، مگا دیده نمی‌شود */
    .main-header,
    .bottom-header,
    .main-menu,
    .main-menu nav,
    .main-menu .list,
    .dt-sl {
        overflow: visible !important;
    }

    /* اگر has-mega روی li نیامده باشد، باز هم مگا روی hover باز شود */
    .pn-nav__item:hover > .pn-mega,
    .pn-nav__item:focus-within > .pn-mega {
        display: block;
    }

    /* اگر هیچکدام is-active نبود، حداقل اولین پنل را نشان بده (fallback) */
    .pn-mega__parent:first-child .pn-mega__pane {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: 6;
    }

    /* مهم‌ترین: بدون JS هم با hover پنل همان parent نمایش داده شود */
    .pn-mega__parent:hover .pn-mega__pane,
    .pn-mega__parent:focus-within .pn-mega__pane {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: 10;
    }

    /* هایلایت parent هنگام hover */
    .pn-mega__parent:hover .pn-mega__parentBtn,
    .pn-mega__parent:focus-within .pn-mega__parentBtn {
        background: #fff;
        box-shadow: 0 8px 18px rgba(0,0,0,.06);
        color: #111;
    }
}


/* ===================== MOBILE ===================== */
.pn-mega__close {
    display: none
}

@media (max-width:992px) {

    /* full screen mega */
    .pn-mega {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        margin-top: 0;
        border-radius: 0;
    }

        .pn-mega::before {
            display: none
        }

    .pn-mega__inner {
        border-radius: 0;
        min-height: 100vh;
        display: block;
        overflow: auto;
    }

    /* open mega */
    .pn-mega__chk:checked ~ .pn-mega {
        display: block
    }

    /* close button */
    .pn-mega__close {
        display: inline-flex;
        position: fixed;
        top: 10px;
        left: 12px;
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(0,0,0,.12);
        border-radius: 12px;
        background: #fff;
        font-size: 20px;
        font-weight: 900;
        cursor: pointer;
        z-index: 11001;
    }

    /* parents full width */
    .pn-mega__right {
        width: 100%;
        background: #fff;
        border-left: 0;
    }

    /* remove desktop divider */
    .pn-mega__inner::after {
        display: none
    }

    /* accordion pane under each parent */
    .pn-mega__parent .pn-mega__pane {
        position: static;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 12px;
        overflow: hidden;
        margin-top: 8px;
        display: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        background: #fff;
    }

    .pn-parent__chk:checked + .pn-mega__parentBtn + .pn-mega__pane {
        display: block;
    }

    /* parents list should scroll naturally in full screen */
    .pn-mega__parents {
        max-height: none
    }
}


/* =========================================================
   SIDEBAR (sb) - CSS only accordion
   ========================================================= */
.sb {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    overflow: hidden;
}

.sb__head {
    padding: 12px 14px;
    background: #fafafa;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

    /* Sidebar head like categories (graphite + hamburger) */
    .sb__head.sb__head--cats {
        display: flex;
        align-items: center;
        justify-content: flex-start; /* RTL => right side */
        direction: rtl;
        text-align: right;
    }

.sb__title {
    font-weight: 900;
    color: #111;
}

    .sb__title.sb__title--cats {
        color: #687383 !important;
        padding-right: 34px !important;
        position: relative;
        display: inline-block;
    }

        .sb__title.sb__title--cats::before {
            content: "";
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 2px;
            border-radius: 2px;
            background: currentColor !important;
            box-shadow: 0 -5px 0 0 currentColor, 0 5px 0 0 currentColor !important;
            opacity: .9;
        }

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

.sb__item {
    border-bottom: 1px solid rgba(0,0,0,.06);
    position: relative
}

.sb__chk {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.sb__node {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px;
    background: #fff;
    border: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .sb__node::after {
        content: "";
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        opacity: .07;
        pointer-events: none;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73L13 2.27a2 2 0 0 0-2 0L4 6.27A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8z'/%3E%3Cpath d='M3.3 7.3L12 12l8.7-4.7'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
    }

.sb__nodeText {
    color: #333;
    font-weight: 700;
    position: relative;
    z-index: 1
}

.sb__nodeText--strong {
    font-weight: 900
}

.sb__nodeIcon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px;
    background: #fafafa;
    font-weight: 900;
    position: relative;
    z-index: 1;
}

    .sb__nodeIcon::after {
        content: "+"
    }

.sb__chk:checked + .sb__node .sb__nodeIcon::after {
    content: "−"
}

.sb__sub {
    display: none;
    list-style: none;
    margin: 0;
    padding: 6px 12px 12px;
    background: #fff;
}

.sb__chk:checked + .sb__node + .sb__sub {
    display: block
}

.sb__subItem {
    margin-top: 8px
}

.sb__subItem--lvl3 {
    padding-right: 12px
}

.sb__subItem--msg {
    color: #777;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 0
}

.sb__subLink {
    display: block;
    text-decoration: none;
    color: #222;
    font-weight: 800;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.06);
    background: #fff;
}

    .sb__subLink:hover {
        box-shadow: 0 10px 22px rgba(0,0,0,.08)
    }

.sb__fixed {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    padding: 12px;
    background: #fafafa;
}

.sb__fixedLink {
    text-decoration: none;
    color: #222;
    font-weight: 800;
    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 12px;
    background: #fff;
    text-align: center;
}

    .sb__fixedLink:hover {
        box-shadow: 0 10px 22px rgba(0,0,0,.08)
    }


/* ===================== Sidebar mobile toggle (CSS-only) ===================== */
.sb__mainChk {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

/* Head clickable */
.sb__headToggle {
    cursor: pointer;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}

/* caret */
.sb__headCaret {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px;
    background: #fff;
    margin-right: 10px; /* RTL spacing */
    position: relative;
}

    .sb__headCaret::before {
        content: "▾";
        font-size: 16px;
        line-height: 1;
        opacity: .75;
    }

/* content default: visible (desktop) */
.sb__content {
    display: block
}

/* Mobile: collapsed by default */
@media (max-width:992px) {
    .sb__content {
        display: none
    }

    .sb__mainChk:checked ~ .sb__content {
        display: block
    }

    .sb__mainChk:checked + .sb__headToggle .sb__headCaret::before {
        content: "▴"
    }
}
/* ========= DESKTOP FIX: show pane without JS (hover) ========= */
/*@media (min-width:993px) {*/

    /* وقتی مگا باز شد، اگر is-active نداریم با hover خود parent پنل را نشان بده */
    /*.pn-mega__parent:hover .pn-mega__pane,
    .pn-mega__parent:focus-within .pn-mega__pane {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 6 !important;
    }

    .pn-mega__parent:hover .pn-mega__parentBtn,
    .pn-mega__parent:focus-within .pn-mega__parentBtn {
        background: #fff;
        box-shadow: 0 8px 18px rgba(0,0,0,.06);
        color: #111;
    }*/

    /* لایه‌بندی: مگا بالاتر از سبد خرید و بقیه */
    /*.pn-mega {
        z-index: 40000 !important;
    }

    .main-menu {
        z-index: 30000 !important;
    }
}*/

/* جلوگیری از بریده شدن منو توسط overflow */
/*.main-header,
.bottom-header,
.main-menu,
.dt-sl,
.container.main-container {
    overflow: visible !important;
}*/