/* ================================
 HEADER / NAVBAR
================================ */
.site-header {
 position: sticky;
 top: 0;
 left: 0;
 right: 0;
 z-index: 3000;
 height: 62px;
 background: #fff;
 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.nav-shell {
 width: min(100% - 150px, 1510px);
 height: 100%;
 margin: 0 auto;
 display: flex;
 align-items: center;
 justify-content: space-between;
}
/* ================================
 BRAND
================================ */
.brand {
 display: inline-flex;
 align-items: center;
 flex-shrink: 0;
 text-decoration: none;
}
.brand-logo {
 display: block;
 width: auto;
 height: 34px;
}
/* ================================
 NAV
================================ */
.main-nav {
 display: flex;
 align-items: center;
 gap: 32px;
 font-size: 13px;
 font-weight: 710;
}
.main-nav > a,
.dropdown-trigger,
.dropdown-menu a {
 color: #000;
 text-decoration: none;
 transition: color 0.2s ease;
}
.main-nav > a {
 white-space: nowrap;
}
.main-nav > a:hover,
.dropdown-trigger:hover,
.dropdown:hover .dropdown-trigger,
.dropdown-menu a:hover {
 color: var(--blue, #005bbb);
}
/* ================================
 DROPDOWN
================================ */
.dropdown {
 position: relative;
}
.dropdown-row {
 display: inline-flex;
 align-items: center;
 gap: 7px;
}
.dropdown-trigger {
 display: inline-flex;
 align-items: center;
 padding: 22px 0;
 font-weight: 600;
 white-space: nowrap;
 cursor: pointer;
}
.dropdown-toggle {
 width: 22px;
 height: 22px;
 display: inline-grid;
 place-items: center;
 padding: 0;
 border: 0;
 background: transparent;
 cursor: pointer;
}
.dropdown-icon {
 display: block;
 width: 15px;
 height: 15px;
 object-fit: contain;
 transition: transform 0.2s ease;
}
.dropdown:hover .dropdown-icon,
.dropdown:focus-within .dropdown-icon,
.dropdown.open .dropdown-icon {
 transform: rotate(180deg);
}
.dropdown-menu {
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 3002;
 display: none;
 width: 240px;
 background: #fff;
 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown.open .dropdown-menu {
 display: block;
}
.dropdown-menu a {
 display: block;
 padding: 13px 16px;
 border-bottom: 1px solid #eee;
}
/* ================================
 SEARCH BUTTON
================================ */
.search-btn {
 position: relative;
 width: 16px;
 height: 16px;
 padding: 0;
 flex-shrink: 0;
 border: 2px solid #000;
 border-radius: 50%;
 background: transparent;
 cursor: pointer;
}
.search-btn::after {
 content: "";
 position: absolute;
 right: -8px;
 bottom: -4px;
 width: 10px;
 height: 2px;
 background: #000;
 transform: rotate(45deg);
}
/* ================================
 SEARCH POPUP
================================ */
.search-overlay {
 position: fixed;
 inset: 0;
 z-index: 4000;
 display: none;
 align-items: flex-start;
 justify-content: center;
 padding: 96px 24px 0;
 background: rgba(0, 0, 0, 0.52);
}
.search-overlay.open {
 display: flex;
}
.search-popup {
 position: relative;
 width: min(100%, 720px);
 padding: 26px 34px 28px;
 background: #fff;
 border-radius: 6px;
 box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}
.search-popup label {
 display: block;
 margin: 0 0 12px;
 color: var(--text, #05051f);
 font-size: 14px;
 font-weight: 700;
}
.search-popup-row {
 display: flex;
 align-items: center;
 gap: 18px;
}
.search-popup input {
 width: 100%;
 height: 48px;
 border: 0;
 border-bottom: 5px solid #00a8e8;
 outline: 0;
 color: var(--text, #05051f);
 background: transparent;
 font-family: 'DM Sans', sans-serif;
 font-size: 15px;
 font-weight: 400;
}
.search-popup input::placeholder {
 color: rgba(5, 5, 31, 0.45);
}
.search-submit {
 position: relative;
 width: 20px;
 height: 20px;
 padding: 0;
 flex: 0 0 auto;
 border: 2px solid #000;
 border-radius: 50%;
 background: transparent;
 cursor: pointer;
}
.search-submit::after {
 content: "";
 position: absolute;
 right: -10px;
 bottom: -5px;
 width: 13px;
 height: 2px;
 background: #000;
 transform: rotate(45deg);
}
body.search-open {
 overflow: hidden;
}
/* ================================
 MOBILE TOGGLE
================================ */
.mobile-toggle {
 display: none;
 padding: 0;
 border: 0;
 background: transparent;
 cursor: pointer;
}
.mobile-toggle span {
 display: block;
 width: 28px;
 height: 3px;
 margin: 5px 0;
 background: #111;
}
/* ================================
 TABLET
================================ */
@media (max-width: 1200px) {
 .nav-shell {
   width: min(100% - 72px, 1510px);
 }
 .main-nav {
   gap: 22px;
   font-size: 12px;
 }
}
/* ================================
 MOBILE
================================ */
@media (max-width: 900px) {
 .site-header {
   height: 62px;
 }
 .nav-shell {
   width: min(100% - 28px, 1510px);
   height: 62px;
   min-height: 62px;
   flex-wrap: nowrap;
 }
 .brand-logo {
   height: 32px;
 }
 .mobile-toggle {
   display: block;
   margin-left: auto;
 }
 .main-nav {
   position: absolute;
   top: 62px;
   left: 0;
   right: 0;
   z-index: 3001;
   display: none;
   width: 100%;
   padding: 22px 32px 24px;
   background: #fff;
   box-shadow: 0 14px 24px rgba(0, 0, 0, 0.12);
   flex-direction: column;
   align-items: flex-start;
   gap: 0;
   font-size: 13px;
 }
 .main-nav.open {
   display: flex;
 }
 .main-nav > a {
   width: 100%;
   padding: 10px 0;
   line-height: 1.2;
 }
 .dropdown {
   width: 100%;
 }
 .dropdown-row {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 .dropdown-trigger {
   width: auto;
   padding: 10px 0;
   line-height: 1.2;
 }
 .dropdown-toggle {
   width: 30px;
   height: 30px;
 }
 .dropdown-icon {
   width: 15px;
   height: 15px;
 }
 .dropdown-menu {
   position: static;
   display: none;
   width: 100%;
   padding: 0 0 6px 16px;
   background: #fff;
   box-shadow: none;
 }
 .dropdown:hover .dropdown-menu,
 .dropdown:focus-within .dropdown-menu {
   display: none;
 }
 .dropdown.open .dropdown-menu {
   display: block;
 }
 .dropdown-menu a {
   padding: 9px 0;
   border-bottom: 0;
   font-size: 12px;
 }
 .search-btn {
   width: 22px;
   height: 22px;
   margin-top: 12px;
   border-width: 3px;
 }
 .search-btn::after {
   width: 10px;
   height: 3px;
   right: -8px;
   bottom: -4px;
 }
 .search-overlay {
   padding: 86px 20px 0;
 }
 .search-popup {
   width: min(100%, 520px);
   padding: 22px 24px 24px;
 }
 .search-popup input {
   height: 44px;
   border-bottom-width: 4px;
   font-size: 15px;
 }
 .search-submit {
   width: 20px;
   height: 20px;
   border-width: 2px;
 }
 .search-submit::after {
   width: 11px;
   height: 2px;
   right: -8px;
   bottom: -4px;
 }
}
/* ================================
 SMALL MOBILE
================================ */
@media (max-width: 560px) {
 .nav-shell {
   width: min(100% - 24px, 1510px);
 }
 .brand-logo {
   height: 28px;
 }
 .main-nav {
   padding: 20px 28px 24px;
 }
 .mobile-toggle span {
   width: 26px;
   height: 3px;
   margin: 4px 0;
 }
 .search-overlay {
   padding: 78px 16px 0;
 }
 .search-popup {
   padding: 20px 20px 22px;
 }
 .search-popup input {
   font-size: 15px;
 }
}