/* { ___ TOPBAR ___ } */
.topbar {padding-block: 10px; background-color: var(--c-primary);}
.topbar .container {max-width: 100%; padding-inline: 30px;}
.topbar .wrapper {display: flex; align-items: center; justify-content: space-between;}
.topbar ul {display: flex; align-items: center;}
.topbar ul:first-of-type {gap: 46px;}
.topbar ul:first-of-type li:nth-of-type(2) span:nth-of-type(1) {display: none;}
.topbar ul:first-of-type a {font-size: var(--fs-xs, 14px); color: #fff;}
.topbar ul:first-of-type img {flex: 0; margin-right: 10px;}
.topbar ul:first-of-type li:first-of-type {position: relative;}
.topbar ul:first-of-type li:first-of-type:has(+ li)::after {position: absolute; top: 0; right: -22px; width: 2px; height: 19px; background-color: #fff; content: '';}
.topbar ul:nth-of-type(2) {gap: 13px;}
.topbar ul:nth-of-type(2) a:hover {transform: scale(1.15);}
.topbar li {display: flex; align-items: center;}
.topbar li::selection {background-color: #fff; color: var(--c-primary);}
.topbar *::selection {background-color: #fff; color: var(--c-primary);}

/* { ___ NAVIGATION ___ } */
nav {padding-block: 10px; background-color: #fff; border-bottom: 2px solid #C9C9C980; --_c-placeholder: #999999;}
/* nav .container {max-width: 100%; padding-inline: 30px;} */
nav .wrapper {display: flex; align-items: center; justify-content: space-between;}
nav {position: relative; border-bottom: 2px solid #C9C9C9;}
nav nav {padding-block: 12px;}
nav .wrapper {display: flex; align-items: center; justify-content: space-between;}
nav #nav-toggle {display: none;}
nav .nav-links {display: flex; align-items: center; gap: 30px;}
nav .menu {margin-left: auto;}
nav .nav-links a {position: relative; font-weight: 600; color: #000;}
nav .nav-links > li > a::before {position: absolute; bottom: -5px; left: 0; width: 0; height: 3px; background-color: var(--c-primary); content: '';}
nav .nav-links > li > a:hover::before {width: 90%; transition: var(--transition);}
nav .nav-links a:hover {color: var(--c-primary);}
nav .btn__primary {width: 100%; max-width: 150px; padding-block: 14px; border-radius: 10px;}
nav .nav-links > li:not(:has(.dropdown)) {position: relative; z-index: 101;}
nav .nav-links > li:not(:has(.dropdown)) ul {display: none; position: absolute; top: 50px; left: 0; width: fit-content; background-color: #fff; padding: 8px;}
nav .nav-links > li:not(:has(.dropdown)) ul li {padding: 6px 8px;}
nav .nav-links > li:not(:has(.dropdown)) ul li a {text-wrap: nowrap;}
nav .nav-links li:has(.dropdown) > a,
nav .nav-links > li:has(> ul) > a {background: no-repeat right/8px url('https://thunderpackaging.com.au/theme/website/images/icons/caret-down-fill.svg'); padding-right: 12px;}
nav .nav-links .dropdown {display: none; position: absolute; top: 78px; left: 30px; grid-template-columns: repeat(6, 1fr); gap: 10px; width: calc(100% - 60px); background-color: #fff; padding: 15px; border-radius: 0 0 10px 10px; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 35%); z-index: 101;}
nav .nav-links .dropdown .category > :first-child {position: relative; display: block; width: fit-content; font-size: var(--fs-xs, 14px); font-weight: 600; color: #000; margin-bottom: 28px;}
nav .nav-links .dropdown .category > :first-child::before {position: absolute; bottom: -8px; left: 0; width: 100%; height: 2px; background-color: var(--c-primary); content: '';}
nav .nav-links .dropdown ul {border-left: 2px solid var(--c-primary); padding-left: 18px;}
nav .nav-links .dropdown .category:first-of-type ul {border: none; padding: 0;}
nav .nav-links .dropdown a {position: relative; font-size: var(--fs-xs, 14px); padding: 6px 6px 6px 26px;}
nav .nav-links .dropdown a::before {position: absolute; top: 8px; left: 0; width: 14px; height: 16px; background: no-repeat center/contain url('https://thunderpackaging.com.au/theme/website/images/icons/chevron-right.svg'); content: '';}
nav .nav-links .dropdown a:hover::before {left: 7px;}
nav .search {margin-left: 12px;}
nav .search > button {display: flex; align-items: center;}
nav .search > button img {filter: invert(1);}
nav #search-bar {position: absolute; top: 78px; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; background-color: #fff; padding-block: 14px; z-index: -1; transform: translateY(-100%);}
nav #search-bar.visible {z-index: 50; transform: translateY(0);}
nav #search-bar input {width: 100%; max-width: 640px; font-size: var(--fs-xs, 14px); padding: 9px 10px; border: 1px solid var(--c-primary);}
nav #search-bar button[type="submit"] {display: flex; align-items: center; justify-content: center; width: 70px; background-color: var(--c-primary); padding-block: 10px;}
nav #search-bar button[type="submit"]:hover {background-color: var(--c-primary-drk);}

/* { --- MEDIA QUERIES --- } */
@media only screen and (max-width: 1200px) {
    nav .nav-links {gap: 20px;}
    nav .nav-links .dropdown {grid-template-columns: repeat(3, 1fr);}
    nav .nav-links .dropdown .category:nth-of-type(4) ul {border: none; padding: 0;}
}

@media only screen and (max-width: 991px) {
    /* Topbar */
    .topbar ul:first-of-type {gap: 36px;}
    .topbar ul:nth-of-type(2) {gap: 8px;}
    .topbar li img {max-width: 22px;}
    .topbar ul:first-of-type li:first-of-type::after {right: -18px;}
    /* Header */
    nav.header-overlay::before {position: absolute; inset: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 90%); content: '';}
    .topbar .container,
    nav .container {padding-inline: 15px;}
    nav #nav-toggle {display: block;}   
    nav .nav-links {display: none; position: absolute; top: 78px; left: 0; flex-direction: column; width: 100%; background-color: #fff; align-items: flex-start; gap: 10px; padding: 15px; z-index: 50; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 35%);}
    nav .nav-links li {width: 100%;}
    nav .nav-links > li > a::before {content: none;}
    nav .nav-links > li:not(:has(.dropdown)) ul {position: static; width: 100%; background-color: var(--c-primary); border-radius: 8px; margin-top: 8px;}
    nav .nav-links > li:not(:has(.dropdown)) ul a {color: #fff;}
    nav .nav-links > li:not(:has(.dropdown)) ul a:hover {padding-left: 7px;}
    nav .nav-links .dropdown {position: initial; width: 100%; background-color: var(--c-primary); margin-top: 10px; border-radius: 10px; box-shadow: none;}
    nav .nav-links .dropdown .category > :first-child {color: #fff;}
    nav .nav-links .dropdown .category > :first-child::before {background-color: #fff;}
    nav .nav-links .dropdown ul {border-color: #fff;}
    nav .nav-links .dropdown a {color: #fff;}
    nav .nav-links .dropdown a:hover {color: #fff;}
    nav .nav-links .dropdown a::before {filter: invert(1);}
    nav .menu {order: 3; margin: 0;}
    nav .search {order: 2; margin-inline: auto 12px;}
    nav .search > button img {width: 18px;}
}

@media only screen and (max-width: 767px) {
    /* Topbar */
    .topbar ul:first-of-type li:nth-of-type(2) span:nth-of-type(1) {display: block;}
    .topbar ul:first-of-type li:nth-of-type(1) a *,
    .topbar ul:first-of-type li:nth-of-type(2) span:nth-of-type(2) {display: none;}
    /* Navigation */
    .navigation form {max-width: 280px;}
    .navigation form button {padding: 8px;}
    /* Header */
    header .nav-links {width: 45%;}
    nav .nav-links .dropdown ul {padding-left: 12px;}
    nav .nav-links .dropdown a {padding-left: 20px;}
    nav .nav-links .dropdown a::before {width: 12px; height: 14px;}
    nav .nav-links .dropdown a:hover::before {left: 3px;}
}

@media only screen and (max-width: 575px) {
    /* Topbar */
    .topbar .wrapper {justify-content: center;}
    .topbar ul:first-of-type {gap: 24px;}
    .topbar ul:first-of-type li:first-of-type::after {top: 0; right: -12px; height: 100%; }
    .topbar ul:nth-of-type(2) {display: none;}
    /* Navigation */
    header nav {padding-block: 8px;}
    .navigation {padding-block: 12px;}
    .navigation .wrapper {flex-direction: column; gap: 15px;}
    /* Header */
    header .nav-links {width: 80%; transition: 0.5s;}
    header .nav-links > li:nth-of-type(n+1) a {padding-left: 10px;}
    header .btn__primary {max-width: 120px; padding: 10px;}
    nav .nav-links .dropdown {grid-template-columns: repeat(2, 1fr);}
    nav .nav-links .dropdown .category:nth-of-type(4) ul {border-left: 2px solid #fff; padding-left: 12px;}
    nav .nav-links .dropdown .category:nth-of-type(odd) ul {border: none; padding: 0;}
}

@media only screen and (max-width: 475px) {
    nav .nav-links .dropdown {grid-template-columns: 1fr;}
    nav .nav-links .dropdown .category > :first-child {margin-bottom: 15px;}
    nav .nav-links .dropdown .category > :first-child::before {bottom: -6px;}
    nav .nav-links .dropdown .category:nth-of-type(n+1) ul {border: none; padding: 0;}
}

@media only screen and (max-width: 360px) {
    /* Header */
    header .nav-links {width: 80%;}
}