.main-navigation .page-menu {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100%;
padding: 0 !important;
margin: 0 !important;
min-height: 60px;
} .menu-menu-1-container,
.menu-menu-2-container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 60px;
margin: 0 !important;
width: 65% !important;
} .menu-menu-1-container ul.menu,
.menu-menu-2-container ul.menu {
display: flex !important;
align-items: center !important;
justify-content: space-evenly !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
min-height: 60px;
list-style: none;
} .menu-menu-1-container ul.menu > li,
.menu-menu-2-container ul.menu > li {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
flex: 1;
min-height: 60px;
position: relative;
} .menu-menu-1-container ul.menu > li > a,
.menu-menu-2-container ul.menu > li > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100%;
min-height: 60px;
padding: 0 1em !important;
text-decoration: none;
font-family: 'K2D', sans-serif;
font-size: 14px !important;
font-weight: 600;
color: #333333;
white-space: nowrap;
transition: all 0.3s ease;
position: relative;
letter-spacing: 0.3px;
text-transform: none;
} .menu-menu-1-container ul.menu > li > a::after,
.menu-menu-2-container ul.menu > li > a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--c-primary), transparent);
transform: translateX(-50%);
transition: width 0.3s ease;
}
.menu-menu-1-container ul.menu > li > a:hover,
.menu-menu-2-container ul.menu > li > a:hover {
color: var(--c-primary);
transform: translateY(-2px);
}
.menu-menu-1-container ul.menu > li > a:hover::after,
.menu-menu-2-container ul.menu > li > a:hover::after,
.menu-menu-1-container ul.menu > li.current-menu-item > a::after,
.menu-menu-2-container ul.menu > li.current-menu-item > a::after {
width: 80%;
} .menu-menu-1-container ul.menu > li.current-menu-item > a,
.menu-menu-2-container ul.menu > li.current-menu-item > a,
.menu-menu-1-container ul.menu > li.current_page_item > a,
.menu-menu-2-container ul.menu > li.current_page_item > a {
color: var(--c-primary);
font-weight: 700;
} .fixed-nav .menu-menu-1-container ul.menu > li.current-menu-item > a,
.fixed-nav .menu-menu-2-container ul.menu > li.current-menu-item > a,
.fixed-nav .menu-menu-1-container ul.menu > li.current_page_item > a,
.fixed-nav .menu-menu-2-container ul.menu > li.current_page_item > a {
color: #ffffff !important;
} .shop-nav-wrapper {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0;
min-height: 60px;
flex-shrink: 0;
width: auto !important;
padding: 0 !important;
} .v-icon-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px;
position: relative;
min-width: 44px;
min-height: 60px;
cursor: pointer;
transition: all 0.2s ease;
padding: 0 8px;
}
.v-icon-box a {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px;
text-decoration: none;
height: 100%;
width: 100%;
} .v-icon-box svg {
width: 24px !important;
height: 24px !important;
display: block;
margin-bottom: 0;
transition: transform 0.2s ease;
flex-shrink: 0;
} .v-icon-box:hover {
transform: translateY(-2px);
}
.v-icon-box:hover svg {
transform: scale(1.1);
} .v-label {
font-family: 'K2D', sans-serif;
font-size: 13px;
font-weight: 500;
color: #333333;
text-align: left;
white-space: nowrap;
transition: color 0.2s ease;
line-height: 1;
margin-top: 0;
} .v-label.v-price {
font-weight: 700;
color: var(--c-primary);
font-size: 14px;
}
.v-cart:hover .v-label.v-price {
color: #164a85;
} .v-search:hover .v-label {
color: var(--c-primary);
}
.v-search:hover svg path {
fill: var(--c-primary);
transition: fill 0.2s ease;
}
.v-account:hover .v-label {
color: var(--c-primary);
}
.v-account:hover svg path {
transition: fill 0.2s ease;
} .v-account a:not(:has(svg path[fill="var(--c-primary)"])):hover svg path {
fill: var(--c-primary);
} .v-account a:has(svg path[fill="var(--c-primary)"]):hover svg path:first-child {
fill: var(--c-primary);
}
.v-cart:hover .v-label {
color: var(--c-primary);
}
.v-cart:hover svg path {
fill: var(--c-primary);
transition: fill 0.2s ease;
} .shop-nav-wrapper .woocommerce-Price-amount {
margin: 0;
position: static;
}
.shop-nav-wrapper .woocommerce-Price-amount bdi {
position: static;
transform: none;
width: auto;
font-size: 14px;
font-weight: 700;
color: var(--c-primary);
white-space: nowrap;
line-height: 1;
} @media screen and (max-width: 992px) {
.main-navigation .page-menu {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0.5em 0.5em !important;
background-color: #ffffff !important;
}
.main-navigation .page-menu .site-branding {
order: 1;
margin-bottom: 0;
flex-shrink: 0;
}
.main-navigation .page-menu .shop-nav-wrapper {
order: 2;
margin-top: 0;
width: auto !important;
justify-content: flex-end !important;
gap: 12px !important;
margin-left: auto;
margin-right: 0.5em;
}
.main-navigation .page-menu .menu-toggle {
order: 3;
position: relative;
top: auto;
right: auto;
background-color: transparent !important;
}
.shop-nav-wrapper {
width: auto !important;
gap: 12px !important;
height: auto;
padding: 0;
}
.v-icon-box {
min-width: 40px;
min-height: 50px;
}
.v-icon-box svg {
width: 22px !important;
height: 22px !important;
margin-bottom: 0;
}
.v-label {
font-size: 12px;
}
.shop-nav-wrapper .woocommerce-Price-amount bdi {
font-size: 12px;
}
}
@media screen and (max-width: 768px) {
.v-icon-box {
min-width: 36px;
height: 45px;
}
.v-icon-box svg {
width: 20px !important;
height: 20px !important;
}
.v-label {
font-size: 12px;
}
.shop-nav-wrapper .woocommerce-Price-amount bdi {
font-size: 12px;
}
} .shop-nav-wrapper .myaccount .myaccount-link-unlogged svg,
.shop-nav-wrapper .myaccount .myaccount-link-logged svg,
.search-desktop #search-icon svg {
width: 24px !important;
height: 24px !important;
} .v-icon-box + .v-icon-box {
margin-left: 12px;
}
@media screen and (max-width: 992px) {
.v-icon-box + .v-icon-box {
margin-left: 8px;
}
}