/* ==========================================================================
   Bindaas Menu Icon & SVG Styling
   ========================================================================== */

/* Main wrapper for menu image / SVG icons across all navigation locations */
.primary-navigation .nav-menu a .menu-item-icon.menu-icon-item--image,
.nav-menu .sub-menu a .menu-item-icon.menu-icon-item--image,
.header-category__menu ul.menu a .menu-item-icon.menu-icon-item--image,
.mobile-shop-navigation ul.menu a .menu-item-icon.menu-icon-item--image,
.hambuger-navigation ul.menu a .menu-item-icon.menu-icon-item--image,
ul.menu a .menu-item-icon.menu-icon-item--image {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    margin-right: 8px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

/* Right-aligned icon option support */
.primary-navigation .nav-menu a .menu-item-icon.menu-icon-item--image.menu-icon-item-position--right,
ul.menu a .menu-item-icon.menu-icon-item--image.menu-icon-item-position--right {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

/* Remove default em-ratio pseudo aspect-ratio padding block which breaks menu alignment */
.primary-navigation .nav-menu a .menu-item-icon.menu-icon-item--image:before,
.nav-menu .sub-menu a .menu-item-icon.menu-icon-item--image:before,
.header-category__menu ul.menu a .menu-item-icon.menu-icon-item--image:before,
.mobile-shop-navigation ul.menu a .menu-item-icon.menu-icon-item--image:before,
.hambuger-navigation ul.menu a .menu-item-icon.menu-icon-item--image:before,
ul.menu a .menu-item-icon.menu-icon-item--image:before {
    display: none !important;
    content: none !important;
    padding-bottom: 0 !important;
}

/* Style the actual img / SVG inside the icon container */
.primary-navigation .nav-menu a .menu-item-icon.menu-icon-item--image img,
.nav-menu .sub-menu a .menu-item-icon.menu-icon-item--image img,
.header-category__menu ul.menu a .menu-item-icon.menu-icon-item--image img,
.mobile-shop-navigation ul.menu a .menu-item-icon.menu-icon-item--image img,
.hambuger-navigation ul.menu a .menu-item-icon.menu-icon-item--image img,
ul.menu a .menu-item-icon.menu-icon-item--image img {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Dropdown sub-menu links alignment */
.primary-navigation .nav-menu .sub-menu li.menu-item-has-icon > a,
.nav-menu .sub-menu li.menu-item-has-icon > a,
ul.sub-menu li.menu-item-has-icon > a {
    display: flex !important;
    align-items: center !important;
}

.primary-navigation .nav-menu .sub-menu li.menu-item-has-icon > a .menu-item-icon,
.nav-menu .sub-menu li.menu-item-has-icon > a .menu-item-icon,
ul.sub-menu li.menu-item-has-icon > a .menu-item-icon {
    margin-right: 10px !important;
}

/* Mobile navigation items with icons */
.mobile-shop-navigation ul.menu li.menu-item-has-icon > a,
.hambuger-navigation ul.menu li.menu-item-has-icon > a {
    display: flex !important;
    align-items: center !important;
}

/* Styling for raw SVG code icons if utilized */
.primary-navigation .nav-menu a .menu-item-icon.menu-icon-item--svg,
.nav-menu .sub-menu a .menu-item-icon.menu-icon-item--svg,
ul.menu a .menu-item-icon.menu-icon-item--svg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

.primary-navigation .nav-menu a .menu-item-icon.menu-icon-item--svg svg,
.nav-menu .sub-menu a .menu-item-icon.menu-icon-item--svg svg,
ul.menu a .menu-item-icon.menu-icon-item--svg svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 20px !important;
    max-height: 20px !important;
    display: block !important;
    object-fit: contain !important;
}

/* ==========================================================================
   Bindaas Submenu Box & Enhanced Font Styling
   ========================================================================== */

/* 1. Submenu Container Styling (Attractive Modern Floating Card) */
.primary-navigation .nav-menu li > ul.sub-menu:not(.mega-menu),
.site-header .nav-menu li > ul.sub-menu:not(.mega-menu),
.nav-menu li > ul.sub-menu:not(.mega-menu) {
    background-color: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.12), 
                0 4px 12px -2px rgba(0, 0, 0, 0.05),
                0 0 0 1px rgba(0, 0, 0, 0.03) !important;
    padding: 8px 6px !important;
    min-width: 240px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.24s ease !important;
}

/* Invisible hover bridge to prevent cursor gap drop */
.primary-navigation .nav-menu li > ul.sub-menu:not(.mega-menu)::before,
.site-header .nav-menu li > ul.sub-menu:not(.mega-menu)::before,
.nav-menu li > ul.sub-menu:not(.mega-menu)::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: -14px !important;
    left: 0 !important;
    right: 0 !important;
    height: 14px !important;
    background: transparent !important;
    border: none !important;
}

/* Smooth Entrance Animation */
.primary-navigation .nav-menu > li > ul.sub-menu:not(.mega-menu),
.nav-menu > li > ul.sub-menu:not(.mega-menu) {
    transform: translate(-50%, 8px) scale(0.98) !important;
}

.primary-navigation .nav-menu > li:hover > ul.sub-menu:not(.mega-menu),
.nav-menu > li:hover > ul.sub-menu:not(.mega-menu) {
    transform: translate(-50%, 0) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Alignment overrides if left or right aligned */
.primary-navigation .nav-menu > li > ul.sub-menu.mega-menu-alignment--left,
.nav-menu > li > ul.sub-menu.mega-menu-alignment--left {
    transform: translateY(8px) scale(0.98) !important;
}
.primary-navigation .nav-menu > li:hover > ul.sub-menu.mega-menu-alignment--left,
.nav-menu > li:hover > ul.sub-menu.mega-menu-alignment--left {
    transform: translateY(0) scale(1) !important;
}

.primary-navigation .nav-menu > li > ul.sub-menu.mega-menu-alignment--right,
.nav-menu > li > ul.sub-menu.mega-menu-alignment--right {
    transform: translateY(8px) scale(0.98) !important;
}
.primary-navigation .nav-menu > li:hover > ul.sub-menu.mega-menu-alignment--right,
.nav-menu > li:hover > ul.sub-menu.mega-menu-alignment--right {
    transform: translateY(0) scale(1) !important;
}

/* 2. Submenu Items Reset */
.primary-navigation .nav-menu li > ul.sub-menu:not(.mega-menu) > li,
.site-header .nav-menu li > ul.sub-menu:not(.mega-menu) > li,
.nav-menu li > ul.sub-menu:not(.mega-menu) > li,
ul.sub-menu > li {
    padding: 0 !important;
    margin: 2px 0 !important;
    width: 100% !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

/* 3. Submenu Links - Larger, Clearer Font & Modern Spacing */
.primary-navigation .nav-menu li > ul.sub-menu:not(.mega-menu) > li > a,
.site-header .nav-menu li > ul.sub-menu:not(.mega-menu) > li > a,
.nav-menu li > ul.sub-menu:not(.mega-menu) > li > a,
.primary-navigation .nav-menu .sub-menu a,
.nav-menu .sub-menu a,
ul.sub-menu li > a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    border-radius: 9px !important;
    font-size: 15.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.15px !important;
    color: #1e293b !important;
    text-decoration: none !important;
    background-color: transparent !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
}

/* 4. Submenu Item Interactive Hover State */
.primary-navigation .nav-menu li > ul.sub-menu:not(.mega-menu) > li > a:hover,
.site-header .nav-menu li > ul.sub-menu:not(.mega-menu) > li > a:hover,
.nav-menu li > ul.sub-menu:not(.mega-menu) > li > a:hover,
.primary-navigation .nav-menu li > ul.sub-menu:not(.mega-menu) > li:hover > a,
.site-header .nav-menu li > ul.sub-menu:not(.mega-menu) > li:hover > a,
.nav-menu li > ul.sub-menu:not(.mega-menu) > li:hover > a,
ul.sub-menu li > a:hover,
ul.sub-menu li:hover > a {
    background-color: #fdf2f7 !important; /* Soft rose brand tint */
    color: #e11d48 !important;            /* Vibrant brand pink/rose */
    transform: translateX(4px) !important;
}

/* 5. Submenu Item Icons */
.primary-navigation .nav-menu .sub-menu a .menu-item-icon.menu-icon-item--image,
.nav-menu .sub-menu a .menu-item-icon.menu-icon-item--image,
ul.sub-menu a .menu-item-icon.menu-icon-item--image,
.primary-navigation .nav-menu .sub-menu a .menu-item-icon.menu-icon-item--svg,
.nav-menu .sub-menu a .menu-item-icon.menu-icon-item--svg,
ul.sub-menu a .menu-item-icon.menu-icon-item--svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    margin-right: 12px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Pop icon slightly on hover */
.primary-navigation .nav-menu .sub-menu li:hover > a .menu-item-icon,
.nav-menu .sub-menu li:hover > a .menu-item-icon,
ul.sub-menu li:hover > a .menu-item-icon {
    transform: scale(1.12) !important;
}

.primary-navigation .nav-menu .sub-menu a .menu-item-icon img,
.nav-menu .sub-menu a .menu-item-icon img,
ul.sub-menu a .menu-item-icon img {
    max-width: 22px !important;
    max-height: 22px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* 6. Nested Sub-Submenu Support */
.nav-menu li > ul.sub-menu:not(.mega-menu) ul.sub-menu {
    top: -6px !important;
    left: calc(100% + 6px) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.12), 
                0 4px 12px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Submenu Arrow if item has children */
.primary-navigation .nav-menu > li ul li.menu-item-has-children > a,
.nav-menu .sub-menu li.menu-item-has-children > a {
    padding-right: 32px !important;
}

.primary-navigation .nav-menu > li ul li.menu-item-has-children > a:before,
.nav-menu .sub-menu li.menu-item-has-children > a:before {
    right: 12px !important;
}

/* 7. Mobile Navigation Submenu Font Size & Clarity */
.mobile-shop-navigation ul.menu .sub-menu a,
.hambuger-navigation ul.menu .sub-menu a {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #334155 !important;
}