.design-your-uniform-wrapper {
    position: relative;
    font-family: Anuphan;
    /* Ensure proper stacking context */
    z-index: 1000;
}

.nav-dropdown-has-arrow li.has-dropdown.design-your-uniform__menu-link:before {
	display: none!important;
}

.nav-dropdown-has-arrow li.current-dropdown.design-your-uniform__menu-link.has-dropdown:after{
	display: none!important;
}

.design-your-uniform__menu-link {
    font-weight: 600;
    font-size: 15px;
    line-height: 19.5px;
    border-radius: 7px;
    padding: 0px 18px 0px!important;
    border: solid 2px var(--fs-color-primary);
    z-index: 10;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
}

.design-your-uniform-dropdown a {
    font-weight: 600;
    font-size: 15px;
    line-height: 19.5px;
    border-radius: 7px;
    padding: 7px 28px 8px;
    border: solid 2px var(--fs-color-primary);
    color: var(--fs-color-primary);
    z-index: 10;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
}

.design-your-uniform-dropdown a {
    background: var(--fs-color-primary);
    color: #17191B !important;
}

.design-your-uniform__menu-link:hover,
.design-your-uniform-dropdown-content a:hover {
	background: var(--fs-color-primary);
}

.design-your-uniform__menu-link .nav-top-link {
	color: var(--fs-color-primary) !important;
	font-weight: 600!important;
}

#masthead .header-nav li.design-your-uniform__menu-link a:has(.icon-angle-down):after {
	filter: none!important;
}

#masthead .header-nav li.design-your-uniform__menu-link:hover a:has(.icon-angle-down):after {
	filter: brightness(0) saturate(100%) contrast(100%)!important;
}

.design-your-uniform__menu-link:hover .nav-top-link {
	color: #17191B !important;
}

.design-your-uniform__menu-link .nav-dropdown {
	border-radius: 10px;
	margin-top: 15px;
}




/* Responsive width for smaller screens */
@media (max-width: 440px) {
    .design-your-uniform-dropdown {
        width: 90vw;
        max-width: 360px;
    }
}

.design-your-uniform-dropdown-content {
    background: #17191BF0;
    backdrop-filter: blur(55px);
    padding: 20px 40px 40px;
    z-index: 10;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    /* Add shadow for better visibility */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    /* Ensure smooth rendering */
    will-change: transform, opacity;
}


.design-your-uniform-dropdown h3 {
    margin-top: 17px;
    margin-bottom: 0;
    font-weight: 500;
    font-size: 15px;
    line-height: 19.5px;
    color: #FFF;
    text-transform: uppercase;
}

.design-your-uniform-dropdown h4 {
    font-weight: 700;
    font-size: 15px;
    line-height: 19.5px;
    margin-bottom: 23px;
    color: var(--fs-color-primary);
    text-transform: uppercase;
}

.design-your-uniform-dropdown a {
    width: fit-content;
}

/* Additional styles for sticky header compatibility */
.design-your-uniform-wrapper {
    /* Ensure the wrapper doesn't interfere with sticky positioning */
    position: relative;
    display: inline-block;
}

/* If your header has a specific z-index, make sure dropdown is higher */
.site-header.sticky .design-your-uniform-dropdown,
.header-sticky .design-your-uniform-dropdown,
.fixed-header .design-your-uniform-dropdown {
    z-index: 99999 !important;
}

/* Prevent dropdown from being affected by transform3d on parent elements */
.design-your-uniform-dropdown {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}