/* Floating Island Menu (Pill Header) */
.has-island-menu {
    max-width: 1280px !important; /* Limits the width so it floats like an island */
     /* Detaches it from the top edge */
    border-radius: 15px; /* Pill shape */
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08) !important; /* Floating shadow */
    left: 10px !important;
    right: 10px !important;
    transition: top 0.4s ease, border-radius 0.4s ease, margin 0.4s ease, box-shadow 0.4s ease !important;
    border: 1px solid rgba(0, 0, 0, 0.04);
    padding: 5px;
    margin-top: 8px !important;
}
.row.header{
    padding-bottom: 15px;
    border-radius: 0 0 15px 15px;
}
.has-island-menu{
    @supports(corner-shape:superellipse(2)) {
        corner-shape: superellipse(2) !important
    }
    @supports(corner-shape:squircle) {
        border-radius: 40px !important;
        corner-shape: squircle !important
    }
}
/* Maintain floating gap when sticky mode is triggered */
.has-island-menu.mobile-top-bar {
    top: 15px !important;
}

/* Ensure inner container respects the rounded borders */
.has-island-menu .main-menu-div {
    border-radius: inherit;
}

/* Combine with Glassmorphism */
.has-glass-mega-menu.has-island-menu {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Dark Mode Support */
body.dark-mode .has-island-menu {
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .has-glass-mega-menu.has-island-menu {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* --- MEGA MENU POSITIONING ADJUSTMENTS --- */
/* Detach the dropdown slightly so it doesn't overlap the island's rounded corners */
.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items,
.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li > .classic-submenu {
    margin-top: 10px !important;
    border-radius: 24px !important;
}

/* Add shadow to normal submenus if glass mode is off, to match the floating style */
.has-island-menu:not(.has-glass-mega-menu) .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items,
.has-island-menu:not(.has-glass-mega-menu) .main-menu-div .bk_menu > .bakala > ul > li > .classic-submenu {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

body.dark-mode .has-island-menu:not(.has-glass-mega-menu) .main-menu-div .bk_menu > .bakala > ul > li > .bakala-tab-menu-items,
body.dark-mode .has-island-menu:not(.has-glass-mega-menu) .main-menu-div .bk_menu > .bakala > ul > li > .classic-submenu {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6) !important;
    border-radius: 24px !important;
}

/* Adjust the red hover line to fit the rounded style */
.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li > span.title::after {
    border-radius: 10px !important;
}

/* Make the submenu full width and center aligned inside the island menu */
.has-island-menu .main-menu-div {
    position: relative !important;
}

/* Ensure all intermediate wrappers have static positioning so the absolute submenu aligns to main-menu-div */
.has-island-menu .main-menu-div .bk_menu,
.has-island-menu .main-menu-div .bk_menu .bakala,
.has-island-menu .main-menu-div .bk_menu > .bakala > ul,
.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li:has(> .bakala-tab-menu-items),
.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li.has-tab-menu {
    position: static !important;
}

.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li:has(> .bakala-tab-menu-items) > .bakala-tab-menu-items,
.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li.has-tab-menu > .bakala-tab-menu-items {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
}

/* Disable the default hover line on mega menu items and move it to title span */
.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li:has(> .bakala-tab-menu-items)::after,
.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li.has-tab-menu::after {
    display: none !important;
}

.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li:has(> .bakala-tab-menu-items) > span.title,
.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li.has-tab-menu > span.title {
    position: relative !important;
}

.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li:has(> .bakala-tab-menu-items) > span.title::after,
.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li.has-tab-menu > span.title::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    height: 2px !important;
    width: 0 !important;
    background-color: var(--accent_color2) !important;
    transition: width 0.2s ease !important;
    border-radius: 10px !important;
    z-index: 99 !important;
}

.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li:has(> .bakala-tab-menu-items):hover > span.title::after,
.has-island-menu .main-menu-div .bk_menu > .bakala > ul > li.has-tab-menu:hover > span.title::after {
    width: 100% !important;
}

/* --- LIQUID GLASS STYLES (Merged from liquid.css) --- */
.modern-header.nav-down,
.left-header-product ul.product-tooltips,
.collection input+div,
a.back-button,
.mobile-bottom-nav {
    --blur: 4px;
    --sat: 125%;
    --innerTop: rgba(255, 255, 255, .46);
    --innerBottom: rgba(10, 14, 28, 0.02);
    background: radial-gradient(1px 1px at 18% 24%, rgb(255 255 255 / .05) 50%, #0000 51%),
                radial-gradient(1px 1px at 72% 78%, rgb(0 0 0 / .02) 50%, #0000 51%),
                radial-gradient(1px 1px at 42% 62%, rgb(255 255 255 / .04) 50%, #00000003 51%),
                linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / 3%)) !important;
    background-blend-mode: overlay, overlay, overlay, normal;
    border: 1px solid rgb(255 255 255 / .38);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(10 14 28 / .01), 0 24px 48px #fff0;
    -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)) contrast(1.5);
    backdrop-filter: blur(var(--blur)) saturate(var(--sat)) contrast(1.5);
    overflow: visible;
}

.modern-header.nav-down:before,
.left-header-product ul.product-tooltips:before,
.collection input+div:before,
a.back-button:before,
body .basic-header#navbar-primary-fixed:before,
.mobile-bottom-nav:before,
.row.header:before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from 35deg, rgb(255 255 255 / 6%) 0 8%, rgb(255 255 255 / .03) 12% 36%, #fff0 40% 58%, rgb(0 0 0 / .02) 62% 78%, rgb(255 255 255 / .03) 84% 100%);
    -webkit-mask: radial-gradient(160% 160% at -10% -10%, #000 0 36%, transparent 56%),
                  radial-gradient(150% 150% at 110% 110%, #000 0 42%, transparent 62%);
    mask: radial-gradient(160% 160% at -10% -10%, #000 0 36%, transparent 56%),
          radial-gradient(150% 150% at 110% 110%, #000 0 42%, transparent 62%);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .78;
}

.modern-header.nav-down:after,
.left-header-product ul.product-tooltips:after,
.collection input+div:after,
a.back-button:after,
body .basic-header#navbar-primary-fixed:after,
.mobile-bottom-nav:after,
.row.header:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: inherit;
    pointer-events: none;
    background: radial-gradient(150% 170% at 50% 0%, rgb(165 196 241 / 21%) 0%, rgb(255 255 255 / .18) 34%, rgb(94 94 94 / 12%) 56%, #fff0 74%);
    -webkit-backdrop-filter: blur(0) saturate(140%) contrast(1.08);
    backdrop-filter: blur(0) saturate(140%) contrast(1.08);
    box-shadow: 0 -1px 0 rgb(255 255 255 / .45) inset, 0 14px 26px rgb(0 0 0 / .08);
    border-radius: inherit;
}

.site-location a,
.rtl .dgwt-wcas-no-submit .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input,
div.product form.cart div.quantity {
    background: #c0c0c024;
    box-shadow: 0 3px 1px 0 rgb(2 34 124 / .07);
}

.navbar-primary,
.row.header {
    background-color: #fff0;
}

@media only screen and (max-width:600px) {
    .single-product .add-to-cart-holder {
        --blur: 2px;
        --sat: 125%;
        --innerTop: rgba(255, 255, 255, .46);
        --innerBottom: rgba(10, 14, 28, 0.02);
        background: radial-gradient(1px 1px at 18% 24%, rgb(255 255 255 / .05) 50%, #0000 51%),
                    radial-gradient(1px 1px at 72% 78%, rgb(0 0 0 / .02) 50%, #0000 51%),
                    radial-gradient(1px 1px at 42% 62%, rgb(255 255 255 / .04) 50%, #00000003 51%),
                    linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / 3%)) !important;
        background-blend-mode: overlay, overlay, overlay, normal;
        border: 1px solid rgb(255 255 255 / .38);
        box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(10 14 28 / .01), 0 24px 48px #fff0;
        -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat)) contrast(1.5);
        backdrop-filter: blur(var(--blur)) saturate(var(--sat)) contrast(1.5);
        overflow: visible;
    }

    .single-product .add-to-cart-holder:before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        pointer-events: none;
        background: conic-gradient(from 35deg, rgb(255 255 255 / 6%) 0 8%, rgb(255 255 255 / .03) 12% 36%, #fff0 40% 58%, rgb(0 0 0 / .02) 62% 78%, rgb(255 255 255 / .03) 84% 100%);
        -webkit-mask: radial-gradient(160% 160% at -10% -10%, #000 0 36%, transparent 56%),
                      radial-gradient(150% 150% at 110% 110%, #000 0 42%, transparent 62%);
        mask: radial-gradient(160% 160% at -10% -10%, #000 0 36%, transparent 56%),
              radial-gradient(150% 150% at 110% 110%, #000 0 42%, transparent 62%);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: .78;
    }

    .single-product .add-to-cart-holder:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: inherit;
        pointer-events: none;
        background: radial-gradient(150% 170% at 50% 0%, rgb(165 196 241 / 21%) 0%, rgb(255 255 255 / .18) 34%, rgb(94 94 94 / 12%) 56%, #fff0 74%);
        -webkit-backdrop-filter: blur(0) saturate(140%) contrast(1.08);
        backdrop-filter: blur(0) saturate(140%) contrast(1.08);
        box-shadow: 0 -1px 0 rgb(255 255 255 / .45) inset, 0 14px 26px rgb(0 0 0 / .08);
        border-radius: inherit;
    }
}