/*
  GAYLE PRINTZ THEME - HEADER & NAVIGATION STYLES
  ============================================================================
  This file contains header, navigation, and menu styles
  Last Updated: [Current Date]
  ============================================================================
*/

/* ============================================================================
   SECTION 1: HEADER & NAVIGATION STYLES
   ============================================================================ */

/* 1.1 Logo Styles */
.c-menu-style .et_pb_menu__logo img {
    max-width: 122px; /* Consistent logo size */
    width: 100%;
}
.c-menu-style .et_pb_menu__logo-wrap {
    margin-right: 20px; /* Spacing between logo and menu items */
}

/* 1.2 Cart Button Positioning */
.c-menu-style a.et_pb_menu__icon.et_pb_menu__cart-button {
    margin-left: auto; /* Push cart to the right */
    margin-right: 0;
}

/* ============================================================================
   SECTION 2: MOBILE MENU SYSTEM
   ============================================================================ */

/* 2.2 Hamburger Menu Styling */
.c-menu-style span.mobile_menu_bar {
    height: 3px;
    background: #fff;
	width: 24px;
}

/* Hamburger menu lines (before and after pseudo-elements) */
.c-menu-row .et_pb_module.c-menu-style span.mobile_menu_bar:after,
.c-menu-row .et_pb_module.c-menu-style span.mobile_menu_bar:before {
    content: "";
    background: #fff;
    position: absolute;
    width: 100%;
    height: 3px;
    left: 50%;
    transform: translatex(-50%);
	transition: all .2s ease-in-out; /* Smooth animation for hamburger */
}

.c-menu-row .et_pb_module.c-menu-style span.mobile_menu_bar:after {
    top: -8px;
}
.c-menu-row .c-menu-style.et_pb_module .mobile_menu_bar:before {
    top: 8px;
}

/* 2.3 Hamburger Menu Animation States */
.c-menu-row .c-menu-style.et_pb_module .mobile_nav.opened .mobile_menu_bar:before {
    top: 8px;
    transform: translate(-50%, -8px) rotate(-45deg) !important;
}

.c-menu-row .c-menu-style.et_pb_module .mobile_nav.opened .mobile_menu_bar:after {
    top: 8px;
    transform: translate(-50%, -8px) rotate(45deg) !important;
}
.c-menu-row .c-menu-style.et_pb_module .mobile_nav.opened .mobile_menu_bar {
    background: transparent;
}

/* 2.4 Mobile Menu Bar Child Element */
span.mobile-menu-bar-child {
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 20px;
    top: 50%;
    transform: translatey(-50%);
}

/* 2.5 Menu Item Hover Effects */
.et_pb_module.c-menu-style li.menu-item a::before {
    content: "";
    background: #fff;
    background-size: 150%;
    height: 1px;
    width: 0;
    position: absolute;
/*     bottom: 25px; */
	bottom: clamp(2px, 1.30vw, 25px); /* Responsive bottom positioning */
    transition: all .3s ease-in-out;
    left: 50%;
    transform: translateX(-50%);
}

.et_pb_module.c-menu-style li.menu-item.current-menu-item a::before,
.et_pb_module.c-menu-style li.menu-item a:hover::before {
    width: 100%;
}

.et_pb_module.c-menu-style .et-menu a:hover {
    opacity: 1 !important;
}

/* 2.7 Submenu Styling */
.c-menu-style li.menu-item ul.sub-menu li {
    position: relative;
}
.c-menu-style li.menu-item ul.sub-menu li a {
    padding: 10px 0;
    font-weight: 400;
    transition: all .2s ease-in-out;
}
.c-menu-style li.menu-item ul.sub-menu li a.active {
    font-weight: 600;
}

.c-menu-style li.menu-item ul.sub-menu {
    padding: 15px 0 30px;
    border: 0;
}

ul.sub-menu li.dynamic-artist-submenu a::after {
    content: "";
    background: rgba(255, 255, 255, .5);
    background-size: 150%;
    height: 1px;
    width: 100%;
    position: absolute;
    bottom: 0;
    transition: all .3s ease-in-out;
    left: 50%;
    transform: translateX(-50%);
}

ul.sub-menu li.dynamic-artist-submenu a:before {
    bottom: 0 !important;
}
.c-menu-style li.menu-item ul.sub-menu li a.active::before {
    font-weight: 600;
}

/* 2.8 Account Icon States */
.logged-in .account-icon-wrap a.header-icon span.show-logged-in {
    display: inline-block;
	width: max-content;
}
.account-icon-wrap a.header-icon span.show-logged-in {
    display: none;
}
.logged-in .account-icon-wrap a.header-icon span.show-logged-out{
    display: none;
}
.account-icon-wrap a.header-icon span.show-logged-out{
    display: inline-block;
	width: max-content;
}

/* 2.9 Cart Icon Styling */
.cart-icon-wrap a.header-icon:after {
    content: "";
    display: block;
    background-image: url(/wp-content/uploads/2025/04/Cart.png);
    width: 18px;
    height: 18px;
    background-size: 100%;
    background-repeat: no-repeat;
}

/* 2.10 Separate Menu Item */
li.separate-menu-item a::before {
	display: none;
}

/* 2.11 Header Icon Layout */
.header-icon-wrap {
    display: flex;
    align-items: center;
}

/* 2.12 Search Button Styling */
button.promagnifier {
    box-shadow: none !important;
}

/* 2.13 Search Input Styling */
body div.asl_w .probox .proinput input, body div.asl_w .probox .proinput input::placeholder {
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 16px;
}

li.separate-menu-item {
    list-style: none;
}
.c-menu-style .et_pb_menu_inner_container.clearfix {
    align-items: center;
}
li.separate-menu-item button.promagnifier {
    order: 1 !important;
}
li.separate-menu-item div.asl_m .probox .proclose svg {
	background: unset;
    padding: 2px !important; 
	width: 16px !important;
	height: 16px !important;
}
li.separate-menu-item div.asl_m .probox .proclose {
	width: 24px !important;
	height: 30px !important;
}

.account-icon-wrap {
    padding: 0 16px;
}
.cart-icon-wrap {
    padding: 0 16px;
    border-right: 1px solid #fff;
    height: 23.797px;
    display: flex;
    align-items: center;
}

/* ============================================================================
   SECTION 3: MOBILE MENU STYLING
   ============================================================================ */

/* 3.1 Mobile Menu Spacing */
.my-favorite-wrap {
    padding-left: 16px;
}
.custom-search-bar {
    padding-right: 16px;
}

/* 3.2 Mobile Menu Item Styling */
ul.et_mobile_menu li.menu-item a {
    padding: 10px 0;
}
ul.et_mobile_menu ul.sub-menu li.dynamic-artist-submenu {
    padding: 0 !important;
}

/* 3.3 Mobile Submenu Styling */
body .c-menu-style ul.et_mobile_menu ul.sub-menu {
    background-color: #161616 !important;
    padding: 16px !important;
	margin-bottom: 8px;
}
ul.et_mobile_menu ul.sub-menu li.dynamic-artist-submenu a {
    padding: 16px 0;
}
ul.et_mobile_menu li.menu-item a {
    padding: 12px 0;
}

/* 3.4 Mobile Search Bar Styling */
.custom-search-bar div.asl_w {
    box-shadow: unset !important;
}
.custom-search-bar .proinput:after {
    content: "";
    width: 116%;
	max-width: 116%;
    height: 1px;
    background: #fff;
    position: absolute;
    bottom: 0;
}
.custom-search-bar .proinput {
    margin-left: 3px !important;
}

/* 3.5 Mobile Search Bar Positioning */
.mobile-search-bar-top button.promagnifier {
    order: 1 !important;
}
a.mobile-search-bar-top .custom-search-bar {
    margin-bottom: 32px;
}
.custom-search-bar.mobile-search-bar-inside-menu .asl_w_container {
    width: 100%;
    max-width: 100%;
}
.et_mobile_nav_menu .header-icon-wrap {
    flex-wrap: wrap;
}
.et_mobile_nav_menu .account-icon-wrap {
    width: 100%;
}
.et_mobile_nav_menu .account-icon-wrap {
    width: 100%;
    border-right: unset;
    border-left: unset;
    padding-left: 0;
    margin-bottom: 24px;
	margin-top: -2px;
}
.et_mobile_nav_menu .cart-icon-wrap {
    width: 100%;
    padding: 0;
	border: unset;
}
.c-menu-style .et_mobile_menu li a:hover, .c-menu-style .nav ul li a:hover {
    opacity: 1 !important;
}
.mobile-search-toggle-icon {
  cursor: pointer;
  padding: 10px;
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease-in-out;
}
.mobile-search-toggle-icon svg {
  fill: #fff;
  transition: transform 0.2s ease-in-out;
}
.mobile-search-toggle-icon:hover {
  opacity: 0.8;
}
.mobile-search-toggle-icon.active svg {
  transform: scale(1.1);
}
.et_mobile_nav_menu ul.et_mobile_menu {
    padding: 32px;
}
.et_mobile_nav_menu li.artist-menu-item>a {
    margin-bottom: 12px;
	border: none;
}
body .c-menu-style .et_mobile_nav_menu li.artist-menu-item ul.sub-menu {
    padding-bottom: 28px !important;
}
.et_mobile_nav_menu li.menu-item a {
    position: relative;
}
.et_mobile_nav_menu li.menu-item a::before {
    bottom: 0 !important;
}
.custom-search-bar.mobile-search-bar {
    position: absolute;
    top: 100%;
    left: 0;
    background: #000;
    width: 100%;
    padding: 50px 5%;
}
.mobile-search-bar button.promagnifier {
    order: 1 !important;
}
.mobile-search-bar div.asl_m .probox .proclose svg {
    background: transparent !important;
    width: 18px;
    height: 18px;
	padding: 2px !important;
    margin-top: -12px !important;
}
.mobile-search-toggle-icon span.icon-search,
.mobile-search-toggle-icon span.icon-close {
    display: flex;
}
.mobile-search-bar .asl_w_container.asl_w_container_2 {
    width: 200px;
}
.wpdreams_asl_results.asl_w.asl_r .results {
    width: 1200px !important;
    margin: auto !important;
    max-width: 90%;
    max-height: calc(100vh - 154px);
    overflow: scroll;
    scrollbar-width: none;
}
.logged-in .wpdreams_asl_results.asl_w.asl_r .results {
    max-height: calc(100vh - 184px);
}

.wpdreams_asl_results.asl_w.asl_r h3 a.asl_res_url {
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 24px !important;
    text-transform: uppercase;
    font-weight: 600 !important;
    color: #fff !important;
    line-height: 20px !important;
}
.wpdreams_asl_results.asl_w.asl_r .results .item {
    border: unset !important;
    padding: 15px 0 !important;
}
.wpdreams_asl_results.asl_w.asl_r .asl_desc {
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #fff !important;
    line-height: 1.5em !important;
    margin-top: 12px !important;
    width: 1050px;
    max-width: 100%;
}
div.asl_r .results .item .asl_content {
    padding: 0 !important;
}
.wpdreams_asl_results.asl_w.asl_r img.asl_image {
    margin-right: 32px !important;
    margin-top: 0 !important;
}
.asl-results-msg {
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 17px !important;
}
span.asl-query-text {
    text-transform: uppercase;
}
.c-menu-style ul.et_mobile_menu {
  	max-height: calc(100vh - 81px);
 	overflow-y: auto;
  	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.et_mobile_nav_menu .my-favorite-wrap {
    width: 100%;
    padding: 0;
}
.header-icon-wrap .view-mobile {
    display: none;
}
.et_pb_module.c-menu-style ul.sub-menu li.dynamic-artist-submenu a::before {
  width: 0;
}

.et_pb_module.c-menu-style ul.sub-menu li.dynamic-artist-submenu a:hover::before,
.et_pb_module.c-menu-style ul.sub-menu li.dynamic-artist-submenu a.active::before {
  width: 100%;
}

.separate-menu-item .custom-search-bar .asl_w_container {
    min-width: 180px;
}
a.header-icon {
    transition: all 0.2s ease-in-out;
}
a.header-icon:hover {
    opacity: 0.80;
}

div.asl_w .probox div.asl_simple-circle {
    border: 4px solid #fff;
}
div.asl_r .results .item .asl_content .asl_desc {
    font-style: italic;
}

/* Mobile cart icon visibility fix in header */
@media (max-width: 980px) {
    .et_pb_menu .et_pb_menu__menu {
        display: block;
    }
    .et_pb_menu .et_pb_menu__menu>nav>ul>li:not(.separate-menu-item){
        display: none;
    }
    .et_pb_menu .et_pb_menu__menu>nav>ul>li.separate-menu-item .header-icon-wrap > *:not(.cart-icon-wrap){
        display: none;
    }
    .et_pb_menu .et_pb_menu__menu>nav>ul>li.separate-menu-item .header-icon-wrap > .cart-icon-wrap{
        margin-right: 46px !important;
        border-right: none;
    }
    #mobile_menu1 .cart-icon-wrap{
        display: none;
    }
    .et-db #et-boc .et-l .et_pb_icon_0_tb_header.custom-search-icon-button{
        right: calc(5% + 50px);
    }
    .et-db #et-boc .et-l .et_pb_icon_0_tb_header.custom-search-icon-button.opened .et_pb_icon_wrap .et-pb-icon{
        font-size: 0;
    }
}


.et-l.et-l--header .custom-search-icon-button {
    transform: translateY(-50%) !important;
}
.custom-search-icon-button .et_pb_icon_wrap {
    transform: none !important;
}
.custom-search-icon-button .et-pb-icon {
	padding: 7px;
}