/*آمدن هدر اکشن زیر لوگو در موبایل های کم عرض برای جلوگیری از ایجاد اسکرول*/
@media (max-width:276px) {

    .header-container{
        flex-wrap:wrap;
        gap:0 !important;
    }

    .site-logo{
        order:1;
        width:100%;
        justify-content:center;
        border-bottom: 1px solid #828282;
        padding-bottom: 8px;
    }

    .header-actions{
        order:2;
        width:100%;
        justify-content:center;
        direction:ltr;
        margin-top:8px;
    }
}
/* =========================================================
SHOES THEME - HEADER
========================================================= */

.site-header {
    position: relative;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eeeeee;
    z-index: 1000;
    }
    
    .header-main {
    width: 100%;
    }
    
    .header-container {
    width: min(1400px, calc(100% - 40px));
    min-height: 78px;
    margin-inline: auto;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    
    
    }
    
    /* =========================================================
    LOGO
    ========================================================= */
    
    /* =========================================================
    SITE LOGO
    ========================================================= */
    
    .site-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 100%;
    }
    
    .site-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 60px;
    height: 60px;
    
    text-decoration: none;
    
    
    }
    
    .site-logo-image {
    display: block;
    
    width: 60px;
    height: 60px;
    
    max-width: 100%;
    
    object-fit: contain;
    
    
    }
    
    .site-logo-text {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    }
    
    /* =========================================================
    DESKTOP NAVIGATION
    ========================================================= */
    
    .main-navigation {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    
    .main-menu {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 28px;
    
    list-style: none;
    margin: 0;
    padding: 0;
    
    
    }
    
    .main-menu > li {
    position: relative;
    }
    
    .main-menu > li > a {
    position: relative;
    
    min-height: 78px;
    
    display: flex;
    align-items: center;
    
    color: #111;
    font-size: 15px;
    font-weight: 600;
    
    text-decoration: none;
    white-space: nowrap;
    
    transition: color .15s ease;
    
    
    }
    
    .main-menu > li > a:hover,
    .main-menu > li > a:focus-visible {
    color: #c8102e;
    }
    
    /* Default submenu arrow
    Used by all menu items that have children,
    including the Products mega menu. */
    
    .main-menu > li.menu-item-has-children > a::after {
    content: '';
    
    width: 7px;
    height: 7px;
    
    margin-right: 8px;
    
    border-left: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    
    transform: rotate(-45deg) translateY(-2px);
    
    
    }
    
    /* =========================================================
    HEADER ACTIONS
    ========================================================= */
    
    .header-actions {
    flex: 0 0 auto;
    
    display: flex;
    align-items: center;
    gap: 18px;
    
    
    }
    
    .header-action {
    position: relative;
    
    width: 36px;
    height: 36px;
    
    padding: 0;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    color: #111;
    text-decoration: none;
    
    background: transparent;
    border: 0;
    
    cursor: pointer;
    
    transition: color .15s ease;
    
    
    }
    
    .header-action:hover {
    color: #c8102e;
    }
    
    /* =========================================================
    CART BADGE
    ========================================================= */
    
    .header-cart {
    position: relative;
    }
    
    .cart-count {
    position: absolute;
    
    top: -3px;
    right: -4px;
    
    min-width: 17px;
    height: 17px;
    
    padding: 0 4px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    border-radius: 50%;
    
    background: #111;
    color: #fff;
    
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    
    
    }
    
    /* =========================================================
    ICONS
    ========================================================= */
    
    .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    width: 22px;
    height: 22px;
    
    flex: 0 0 22px;
    
    
    }
    
    .icon svg {
    display: block;
    
    width: 100%;
    height: 100%;
    
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    
    
    }
    
    /* =========================================================
    MOBILE MENU BUTTON
    ========================================================= */
    
    .mobile-menu-toggle {
    display: none;
    }
    
    /* =========================================================
    MOBILE HEADER BASICS
    ========================================================= */
    
    @media (max-width: 992px) {
    
    .header-container {
        width: min(100% - 24px, 700px);
        min-height: 70px;
    }
    
    .main-navigation {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: inline-flex;
    }
    
    .site-logo-image {
        max-width: 135px;
    }
    
    .header-actions {
        gap: 10px;
    }
    
    .header-contact {
        display: none;
    }
    
    
    }
    
    /* =========================================
    Search Overlay
    ========================================= */
    
    .search-overlay {
    
    position: absolute;
    
    top: 100%;
    right: 0;
    left: 0;
    
    padding: 24px;
    
    background: #fff;
    
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    
    box-shadow:
        0 15px 40px rgba(0, 0, 0, .08);
    
    opacity: 0;
    visibility: hidden;
    
    transform: translateY(-8px);
    
    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;
    
    z-index: 999;
    
    
    }
    
    .search-overlay.is-open {
    
    opacity: 1;
    
    visibility: visible;
    
    transform: translateY(0);
    
    
    }
    
    .search-overlay-inner {
    
    width: min(800px, 100%);
    
    margin-inline: auto;
    
    
    }
    
    .site-search-form {
    
    position: relative;
    
    display: flex;
    align-items: center;
    
    
    }
    
    .site-search-form input {
    
    width: 100%;
    
    height: 56px;
    
    padding: 0 20px 0 60px;
    
    border: 1px solid #ddd;
    
    border-radius: 3px;
    
    outline: none;
    
    font-size: 15px;
    
    direction: rtl;
    
    
    }
    
    .site-search-form input:focus {
    border-color: #111;
    }
    
    .site-search-form button {
    
    position: absolute;
    
    left: 8px;
    
    width: 40px;
    height: 40px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    border: 0;
    
    background: transparent;
    
    cursor: pointer;
    
    
    }
    /* =========================================
    Mobile Menu
    ========================================= */
    
    .mobile-menu {
    position: fixed;
    
    top: 0;
    right: 0;
    
    width: min(380px, 88vw);
    height: 100vh;
    
    background: #fff;
    
    z-index: 2000;
    
    transform: translateX(100%);
    
    transition: transform .25s ease;
    
    overflow-y: auto;
    
    box-shadow:
        -10px 0 40px rgba(0, 0, 0, .08);
    
    
    }
    
    .mobile-menu.is-open {
    transform: translateX(0);
    }
    
    .mobile-menu-header {
    
    min-height: 70px;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    padding: 0 20px;
    
    border-bottom: 1px solid #eee;
    
    
    }
    
    .mobile-menu-title {
    
    font-size: 17px;
    font-weight: 700;
    
    
    }
    
    .mobile-menu-close {
    
    width: 40px;
    height: 40px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    border: 0;
    
    background: transparent;
    
    cursor: pointer;
    
    
    }
    
    .mobile-menu-list {
    
    margin: 0;
    padding: 0;
    
    list-style: none;
    
    
    }
    
    .mobile-menu-list li {
    position: relative;
    }
    
    .mobile-menu-list > li {
    border-bottom: 1px solid #eee;
    }
    
    .mobile-menu-list a {
    
    display: block;
    
    padding: 16px 20px;
    
    color: #111;
    
    font-size: 15px;
    font-weight: 600;
    
    text-decoration: none;
    
    
    }
    
    /* Submenus */
    
    .mobile-menu-list .sub-menu {
    
    display: none;
    
    margin: 0;
    padding: 0;
    
    list-style: none;
    
    background: #fafafa;
    
    border-top: 1px solid #eee;
    
    
    }
    
    .mobile-menu-list li.is-open > .sub-menu {
    display: block;
    }
    
    .mobile-menu-list .sub-menu a {
    
    padding-right: 35px;
    
    font-size: 14px;
    
    font-weight: 500;
    
    
    }
    
    /* Backdrop */
    
    .mobile-menu-backdrop {
    
    position: fixed;
    
    inset: 0;
    
    background: rgba(0, 0, 0, .35);
    
    z-index: 1999;
    
    opacity: 0;
    visibility: hidden;
    
    transition:
        opacity .25s ease,
        visibility .25s ease;
    
    
    }
    
    .mobile-menu-backdrop.is-visible {
    
    opacity: 1;
    
    visibility: visible;
    
    
    }
    
    /* =========================================
    Mobile Header
    ========================================= */
    
    @media (max-width: 992px) {
    
    .header-container {
        min-height: 70px;
    }
    
    .main-navigation {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: inline-flex;
    }
    
    .header-actions {
        gap: 10px;
    }
    
    .site-logo-image {
        max-width: 135px;
    }
    
    .header-contact {
        display: none;
    }
    
    
    }
    /* =========================================================
DESKTOP MEGA MENU
========================================================= */

@media (min-width: 992px) {

.main-menu > .menu-item.mega-menu { position: static; }

.main-menu > .menu-item.mega-menu > .sub-menu {
    position:absolute;
    top:100%;
    right:50%;
    transform:translateX(50%);
    width:min(1200px, calc(100% - 40px));
    padding:32px 2em 36px;
    margin:0;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    column-gap:0;
    list-style:none;
    background:#fff;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
    box-shadow:0 12px 35px rgba(0,0,0,.07);
    visibility:hidden;
    opacity:0;
    transform-origin:top center;
    pointer-events:none;
    transition:.18s ease;
    z-index:1500;
    box-sizing:border-box;
}

.main-menu > .menu-item.mega-menu:hover > .sub-menu,
.main-menu > .menu-item.mega-menu:focus-within > .sub-menu {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
}

.main-menu > .menu-item.mega-menu > .sub-menu > .menu-item {
    min-width:0;
    padding:0 1.5em;
}

.main-menu > .menu-item.mega-menu > .sub-menu > .menu-item:not(:last-child) {
    border-left:1px solid #eee;
}

.main-menu > .menu-item.mega-menu > .sub-menu > .menu-item > a {
    display:block;
    margin-bottom:12px;
    padding-bottom:10px;
    color:#111;
    font-size:16px;
    font-weight:700;
    text-decoration:none;
}

.main-menu > .menu-item.mega-menu > .sub-menu > .menu-item > .sub-menu {
    display:block;
    margin:0;
    padding:0;
    list-style:none;
}

.main-menu > .menu-item.mega-menu > .sub-menu > .menu-item > .sub-menu > .menu-item > a {
    display:block;
    padding:5px 0;
    color:#555;
    font-size:14px;
    font-weight:400;
    text-decoration:none;
}

.mega-menu-view-all {
    text-align:center;
    margin-top:auto;
    padding-top:20px;
}

/* Keep mega menu columns equal and pin "مشاهده همه" to the bottom */
.main-menu > .menu-item.mega-menu > .sub-menu > .mega-menu-column {
    display:flex;
    flex-direction:column;
}

.main-menu > .menu-item.mega-menu > .sub-menu > .mega-menu-column .mega-menu-view-all {
    margin-top:auto;
}

.mega-menu-view-all a {
    color:#e85b7a;
    font-weight:700;
    text-decoration:none;
}

    html.menu-open {
    overflow: hidden;
    }

    /* =========================================================
    MOBILE MENU
    ========================================================= */
    
    .mobile-menu {
    position: fixed;
    
    top: 0;
    right: 0;
    
    width: min(380px, 88vw);
    height: 100dvh;
    
    background: #fff;
    
    z-index: 2000;
    
    transform: translateX(100%);
    
    transition:
        transform .25s ease;
    
    overflow-y: auto;
    
    box-shadow:
        -10px 0 40px rgba(0, 0, 0, .08);
    
    overscroll-behavior: contain;
    
    
    }
    
    .mobile-menu.is-open {
    transform: translateX(0);
    }
    
    /* Header */
    
    .mobile-menu-header {
    min-height: 70px;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    padding: 0 20px;
    
    border-bottom: 1px solid #eee;
    
    
    }
    
    .mobile-menu-title {
    font-size: 17px;
    font-weight: 700;
    }
    
    .mobile-menu-close {
    width: 40px;
    height: 40px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    padding: 0;
    
    border: 0;
    background: transparent;
    
    color: #111;
    
    cursor: pointer;
    
    
    }
    
    /* Navigation */
    
    .mobile-menu-list {
    margin: 0;
    padding: 0;
    
    list-style: none;
    
    
    }
    
    .mobile-menu-list li {
    position: relative;
    }
    
    /* Main items */
    
    .mobile-menu-list > li {
    border-bottom: 1px solid #eee;
    }
    
    .mobile-menu-list a {
    display: block;
    
    padding: 16px 20px;
    
    color: #111;
    
    font-size: 15px;
    font-weight: 600;
    
    line-height: 1.6;
    
    text-decoration: none;
    
    
    }
    
    .mobile-menu-list a:hover {
    color: #c8102e;
    }
    
    /* Items with children */
    
    .mobile-menu-list > li.menu-item-has-children {
    display: grid;
    
    grid-template-columns: 1fr 48px;
    
    
    }
    
    /*
    
    لینک والد
    برای اینکه دکمه فلش کنار آن قرار بگیرد
    */
    .mobile-menu-list > li.menu-item-has-children > a {
    min-width: 0;
    }
    
    /* Submenu toggle */
    
    .mobile-submenu-toggle {
    width: 48px;
    min-height: 52px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    padding: 0;
    
    border: 0;
    border-right: 1px solid #eee;
    
    
    color: #111;
    
    cursor: pointer;
    
    
    }
    
    /* Arrow */
    
    .mobile-submenu-toggle::before {
    content: '';
    
    width: 7px;
    height: 7px;
    
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    
    transform: rotate(45deg);
    
    transition:
        transform .2s ease;
    
    
    }
    
    /* Open arrow */
    
    .mobile-menu-list li.is-open > .mobile-submenu-toggle::before {
    transform: rotate(-45deg);
    }
    
    /* Submenus */
    
    .mobile-menu-list .sub-menu {
    grid-column: 1 / -1;
    
    display: none;
    
    margin: 0;
    padding: 0;
    
    list-style: none;
    
    background: #fafafa;
    
    border-top: 1px solid #eee;
    
    
    }
    
    .mobile-menu-list li.is-open > .sub-menu {
    display: block;
    }
    
    /* First submenu level */
    
    .mobile-menu-list .sub-menu a {
    padding-right: 35px;
    
    font-size: 14px;
    font-weight: 500;
    
    
    }
    
    /* Second submenu level */
    
    .mobile-menu-list .sub-menu .sub-menu a {
    padding-right: 50px;
    
    font-size: 13px;
    font-weight: 400;
    
    
    }
    
    /* Backdrop */
    
    .mobile-menu-backdrop {
    position: fixed;
    
    inset: 0;
    
    background: rgba(0, 0, 0, .35);
    
    z-index: 1999;
    
    opacity: 0;
    visibility: hidden;
    
    transition:
        opacity .25s ease,
        visibility .25s ease;
    
    
    }
    
    .mobile-menu-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    }
    
    /* Lock page */
    
    html.menu-open {
    overflow: hidden;
    }
    
    /* Mobile only */
    
    @media (min-width: 992px) {
    
    .mobile-menu,
    .mobile-menu-backdrop {
        display: none;
    }
    
    
    }
    @media (max-width: 992px) {
    
    .mobile-menu-toggle {
        display: inline-flex;
    }
    
    
    }

/* =========================================================
   Square 60x60 site logo
   ========================================================= */
.site-logo {
    flex: 0 0 60px;
    width: 60px;
}

.site-logo a,
.site-logo-image {
    width: 60px;
    height: 60px;
}

.site-logo-image {
    object-fit: contain;
}

/* =========================================================
   HEADER DROPDOWN MENU
   Hover dropdown for regular navigation items
   ========================================================= */

.main-menu > li:not(.mega-menu) {
    position: relative;
}

.main-menu > li:not(.mega-menu) > .sub-menu {
    position: absolute;
    top: 100%;
    right: 50%;
    transform: translateX(50%);
    width: max-content;
    min-width: calc(100% + 4em);
    max-width: 90vw;

    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    background: #fff;
    border-radius: 0.1em;
    padding: 12px 2em;
    margin: 0;
    list-style: none;

    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    z-index: 2000;

    transition: opacity .2s ease, transform .2s ease;
}

.main-menu > li:not(.mega-menu):hover > .sub-menu,
.main-menu > li:not(.mega-menu):focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(50%);
}

.main-menu > li:not(.mega-menu) > .sub-menu > li {
    white-space: nowrap;
}

.main-menu > li:not(.mega-menu) > .sub-menu > li > a {
    display: block;
    padding: 8px 0;
    color: #111;
    text-decoration: none;
    font-size: 14px;
}

.main-menu > li:not(.mega-menu) > .sub-menu > li > a:hover {
    color: #c8102e;
}


/* =========================================================
   Mega menu hover color - match dropdown behavior
   ========================================================= */
.mega-menu .sub-menu a:hover,
.mega-menu .mega-menu-column > a:hover,
.mega-menu .mega-menu-column .sub-menu li a:hover {
    color: #c8102e;
}


/* =========================================================
   Mega menu item hover color - all menu elements
   ========================================================= */
.main-menu .mega-menu .mega-menu-column > a,
.main-menu .mega-menu .mega-menu-column .sub-menu li a {
    transition: color .15s ease;
}

.main-menu .mega-menu .mega-menu-column > a:hover,
.main-menu .mega-menu .mega-menu-column .sub-menu li a:hover,
.main-menu .mega-menu .mega-menu-column:hover .sub-menu li a:hover {
    color: #c8102e !important;
}

.mega-menu-view-all a:hover {
    color: #c8102e !important;
}