/* ___ HEADER ___ */
.topbar, .menu-bar, .menu-links {--_c-gray-100: #f5f5f5; --_c-gray-400:  #424242; --_c-border-200: #cbcbcb; --_c-dark-900: #242424; --_c-light-100: #f8f9fa;}
.topbar {padding-block: 8px; background-color: var(--_c-gray-100);}
.topbar .wrapper {display: flex; align-items: center; justify-content: space-between;}
.topbar li {display: inline-flex; align-items: center; margin-right: 10px;}
.topbar li a {color: var(--_c-gray-400);}
.topbar li:hover a {color: var(--c-secondary);}
.topbar li:hover svg {fill: var(--c-secondary);}
.topbar ul:nth-child(2) li:hover svg {transform: scale(1.1);}
.topbar ul:nth-child(1) li svg {margin-right: 5px;}
.topbar ul:nth-child(1) li:nth-child(1) {border-right: 1px solid var(--_c-gray-400); padding-right: 10px;}
.menu-bar {position: sticky; top: 0; background-color: #fff; z-index: 50;}
.menu-bar .wrapper {display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-block: 20px;}
.menu-bar ul {display: flex; align-items: center; gap: 20px; margin-left: auto;}
.menu-bar li a {display: flex; align-items: center; cursor: pointer;}
.menu-bar li a:hover svg {fill: var(--c-secondary);}
.menu-bar li div {margin-left: 10px;}
.menu-bar li div * {display: block; color: var(--c-tertiary);}
.menu-bar li div :first-child {font-size: var(--fs-sm, 18px); font-weight: 600;}
.menu-bar li div :nth-child(2) {font-size: var(--fs-xs, 14px);}
.menu-links .wrapper {display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px;}
.menu-links #nav-toggle[data-hidden="true"] {display: none; height: 30px;}
.menu-links #nav-toggle svg {fill: var(--c-secondary);}
.menu-links .nav-links {display: flex; align-items: center;}
.menu-links .nav-links li {position: relative;}
.menu-links .nav-links > li > a {width: 100%; height: 54px; color: var(--c-tertiary); font-weight: 700; padding: 14px 20px; border-top: 1px solid transparent;}
.menu-links .nav-links > li > a[role="button"] {cursor: pointer;}
.menu-links .nav-links > li:first-child > a {background: no-repeat 20px 50%/24px url(https://www.emenacpackaging.co.nz/theme/website/assets/images/icons/nav-list.svg);}
.menu-links .nav-links > li:first-child:hover > a {background-image: url(https://www.emenacpackaging.co.nz/theme/website/assets/images/icons/nav-list-light.svg);}
.menu-links .nav-links > li:not(:first-child) > a:hover {border-top-color: var(--c-secondary); color: var(--c-secondary);}
.menu-links .nav-links > li:not(:first-child) > a:hover:after {filter: var(--fl-secondary);}
.menu-links .nav-links > li svg {margin-right: 5px;}
.menu-links .nav-links > li:first-child {width: 240px; background-color: #f5f5f5;}
.menu-links .nav-links > li:first-child:hover > a {background-color: var(--_c-dark-900); color: #fff;}
.menu-links .nav-links > li:first-child > ul {width: var(--container-size); grid-template-columns: repeat(4, 1fr); z-index:100;}
.menu-links .nav-links > li:first-child > ul li a {color: var(--c-tertiary); padding: 15px;}
.menu-links .nav-links > li:first-child > ul li:nth-child(1) a {background: no-repeat 15px 50%/34px url(https://www.emenacpackaging.co.nz/theme/website/assets/images/icons/apparal-icon.webp);}
.menu-links .nav-links > li:first-child > ul li:nth-child(2) a {background: no-repeat 15px 50%/34px url(https://www.emenacpackaging.co.nz/theme/website/assets/images/icons/bakery-icon.webp);}
.menu-links .nav-links > li:first-child > ul li:nth-child(3) a {background: no-repeat 15px 50%/34px url(https://www.emenacpackaging.co.nz/theme/website/assets/images/icons/cosmetics-icon.webp);}
.menu-links .nav-links > li:first-child > ul li:nth-child(4) a {background: no-repeat 15px 50%/34px url(https://www.emenacpackaging.co.nz/theme/website/assets/images/icons/medicine-icon.webp);}
.menu-links .nav-links > li:first-child > ul li:nth-child(5) a {background: no-repeat 15px 50%/34px url(https://www.emenacpackaging.co.nz/theme/website/assets/images/icons/retail-icon.webp);}
.menu-links .nav-links > li:first-child:hover > ul {display: grid;}
.menu-links .nav-links li ul {position: absolute; top: 54px; left: 0; background-color: #fff; border: 1px solid #00000026; border-radius: 0 0 5px 5px; display: none; z-index: 10;}
.menu-links .nav-links li ul a {width: 100%; text-wrap: nowrap;}
.menu-links .nav-links li > ul li:nth-child(n+1) a:hover {background-color: var(--_c-light-100);}
.menu-links .nav-links > li:not(:first-child):has(> ul) > a::after {position: absolute; top: 24px; right: 6px; width: 14px; height: 4px; background: no-repeat center/cover url(https://www.emenacpackaging.co.nz/theme/website/assets/images/icons/caret-down-fill.svg); content: '';}
.menu-links .nav-links > li:not(:first-child) > ul li a {width: fit-content; min-width: 200px; color: var(--c-tertiary); padding: 10px;}
.menu-links .nav-links > li:not(:first-child):hover > ul {display: block;}
.menu-links form {position: relative; width: 100%; max-width: 242px;}
.menu-links form input {width: 100%; height: 51px; border: 1px solid var(--_c-border-200); border-radius: 30px; padding-inline: 10px;margin:5px 0;}
.menu-links form button {position: absolute; top: 10px; right: 10px; padding: 10px;}
.menu-links form button:hover img {filter: var(--fl-secondary);}
.menu-links form button img {display: block;}
.tel-btn {display: flex; align-items: center; border-radius: 5px; padding: 6px 12px;}
.tel-btn span {font-size: calc(var(--fs-md) - 2px); font-weight: 600;}
.tel-btn svg {vertical-align: middle; padding-right: 8px; margin: 2px 8px 0 0; border-right: 1px solid #fff;}

@media only screen and (max-width: 1400px) {
    .menu-links .nav-links > li > a {padding-inline: 10px;}
    .menu-links .nav-links > li:first-child > ul {width: max-content;}
}

@media only screen and (max-width: 1200px) {
    .menu-links .nav-links {width: 100%;}
    .menu-links .nav-links > li:first-child {width: 220px;}
    .menu-links .nav-links > li:not(:first-child) > a::after {right: 0;}
    .menu-links .nav-links > li:nth-last-of-type(-n+1) {display: none;}
    .menu-links .nav-links > li:nth-of-type(2) {margin-left: auto;}
    .menu-links .nav-links > li:nth-last-of-type(2) {margin-right: auto;}
}

@media only screen and (min-width: 991px) {
    .menu-links .nav-links li ul {display: none;}
}

@media only screen and (max-width: 991px) {
    .menu-bar .wrapper {gap: 20px;}
    .menu-bar .logo img {width: 130px; height: auto;}
    .menu-links #nav-toggle[data-hidden="true"] {display: block;}
    .menu-links {position: relative; background-color: var(--_c-gray-100);}
    .menu-links .wrapper {align-items: center; padding-block: 7px;}
    .menu-links .nav-links {width: 100%; height: fit-content; display: block; background-color: var(--_c-gray-100); padding-top: 15px;}
    .menu-links .nav-links {display: none;} 
    .menu-links .nav-links > li:first-child {width: auto;}
    .menu-links .nav-links li [data-toggle="collapse"] {position: unset; width: auto;}
    .menu-links .nav-links li ul {position: unset;}
    .menu-links .nav-links > li:first-child > ul {width: 100%; grid-template-columns: repeat(2, 1fr);}
    .menu-links .nav-links > li:not(:first-child) > ul li a {width: 100%;}
    .menu-links .nav-links > li:not(:first-child) > ul {grid-template-columns: repeat(3, 1fr);}
    .menu-links .nav-links > li:not(:first-child) > a::after {right: unset;}
    .menu-links .nav-links > li:nth-last-of-type(-n+1) {display: block;}
    .menu-links:has(#nav-toggle[data-hidden="false"]) form {max-width: 100%;}
}

@media only screen and (max-width: 767px) {
    .menu-bar .wrapper {gap: 20px;}
    .menu-bar ul {gap: 10px;}
    .menu-bar li svg {margin-top: 3px;}
    .menu-bar li div {display: none;}
    .menu-links form {max-width: 210px;}
    .menu-links form input {height: 46px;}
    .menu-links form button {top: 7px; right: 7px;}
}

@media only screen and (max-width: 575px) {
    .menu-bar .wrapper {gap: 18px;}
    .menu-bar .logo video {width: 120px;}
    .menu-bar .logo img {width: 120px;}
    .menu-bar li svg {width: 32px; height: 32px;}
    .menu-bar .logo > a {margin-inline: auto;}
    .menu-links .nav-links > li:first-child:hover > ul {grid-template-columns: repeat(2, 1fr);}
    .menu-links form {max-width: 190px;}
    .menu-links form button {top: 6px; padding: 13px;}
    .menu-links form button img {width: 18px;}
}

@media only screen and (max-width: 475px) {
    .topbar .wrapper {justify-content: center;}
    .topbar ul:nth-child(2) {display: none;}
    .menu-links .nav-links > li:first-child:hover ul {grid-template-columns: 1fr;}
    .tel-btn {padding-inline: 8px;}
    .tel-btn svg {display: none;}
    .tel-btn span {font-size: var(--fs-sm);}
}