@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Titillium+Web:wght@600;700&display=swap');

:root {
    --oav-navy: #041633;
    --oav-deep: #020d21;
    --oav-blue: #1478ef;
    --oav-cyan: #10c8ef;
    --oav-orange: #ff8a12;
    --oav-border: #dfe7ef;
    --oav-text: #09213f;
}

body {
    font-family: "Archivo", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Titillium Web", "Archivo", Arial, sans-serif;
}

.oav-topbar {
    min-height: 32px;
    padding: 4px clamp(20px, 4vw, 62px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #c5d4e5;
    background: var(--oav-deep);
    font-size: 11px;
    font-weight: 500;
}

.oav-topbar__group {
    display: flex;
    align-items: center;
    gap: 22px;
}

.oav-topbar a { color: inherit; }
.oav-topbar a:hover { color: var(--oav-cyan); }
.oav-topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.oav-topbar__item svg {
    width: 13px !important;
    height: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    color: var(--oav-cyan);
    flex: 0 0 13px !important;
}

.oav-site-header {
    min-height: 74px;
    padding: 7px clamp(20px, 4vw, 62px);
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.4vw, 22px);
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid rgba(4, 22, 51, .08);
    box-shadow: 0 7px 26px rgba(4, 22, 51, .09);
    backdrop-filter: blur(12px);
}

.oav-brand { flex: 0 0 auto; display: inline-flex; align-items: center; }
.oav-brand img {
    display: block;
    width: clamp(165px, 12vw, 190px);
    height: 58px;
    object-fit: contain;
}

.oav-main-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(10px, .9vw, 18px); }
.oav-main-nav > a,
.oav-nav-group > summary {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    color: var(--oav-text);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    cursor: pointer;
}

.oav-main-nav > a::after,
.oav-nav-group > summary::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--oav-cyan);
    transform: scaleX(0);
    transition: transform .2s ease;
}

.oav-main-nav > a:hover,
.oav-main-nav > a[aria-current="page"],
.oav-nav-group > summary:hover,
.oav-nav-group[open] > summary { color: var(--oav-blue); }
.oav-main-nav > a:hover::after,
.oav-main-nav > a[aria-current="page"]::after,
.oav-nav-group > summary:hover::before,
.oav-nav-group[open] > summary::before { transform: scaleX(1); }

.oav-nav-group { position: relative; }
.oav-nav-group > summary { list-style: none; gap: 5px; }
.oav-nav-group > summary::-webkit-details-marker { display: none; }
.oav-nav-group > summary::after { content: "⌄"; position: static; color: var(--oav-blue); font-size: 16px; }
.oav-submenu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    width: 290px;
    padding: 10px;
    display: grid;
    gap: 3px;
    background: #fff;
    border: 1px solid var(--oav-border);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(4, 22, 51, .17);
    transform: translateX(-50%);
}

.oav-submenu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: calc(50% - 6px);
    width: 12px;
    height: 12px;
    background: #fff;
    border-top: 1px solid var(--oav-border);
    border-left: 1px solid var(--oav-border);
    transform: rotate(45deg);
}

.oav-submenu a {
    position: relative;
    z-index: 1;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    color: var(--oav-text);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
}

.oav-submenu a::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--oav-cyan); }
.oav-submenu a:hover { color: var(--oav-blue); background: #f1f7fc; transform: translateX(2px); }

.oav-header-actions { display: flex; align-items: center; gap: 9px; }
.oav-icon-link {
    min-width: 38px;
    height: 38px;
    padding: 0 9px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--oav-border);
    border-radius: 9px;
    color: var(--oav-navy);
    background: #fff;
}
.oav-icon-link:hover { color: var(--oav-blue); border-color: var(--oav-blue); }
.oav-icon-link svg { width: 18px; height: 18px; }
.oav-cart-count {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 12px;
    color: #fff;
    background: var(--oav-orange);
    font-size: 10px;
    font-weight: 800;
}

.oav-quote-button {
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(135deg, var(--oav-blue), #0864ca);
    box-shadow: 0 9px 20px rgba(20, 120, 239, .22);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.oav-quote-button:hover { color: #fff; background: linear-gradient(135deg, #0864ca, var(--oav-blue)); transform: translateY(-1px); }
.oav-menu-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--oav-border); border-radius: 9px; color: var(--oav-navy); background: #fff; font-size: 25px; cursor: pointer; }
.oav-mobile-contact { display: none; }

@media (max-width: 1280px) {
    .oav-site-header { gap: 12px; }
    .oav-brand img { width: 165px; }
    .oav-main-nav { gap: 10px; }
    .oav-main-nav > a, .oav-nav-group > summary { font-size: 12px; }
    .oav-quote-button { padding: 0 11px; }
}

@media (max-width: 1080px) {
    .oav-topbar__group:first-child .oav-topbar__item:last-child { display: none; }
    .oav-site-header { min-height: 72px; }
    .oav-brand img { width: 180px; height: 56px; }
    .oav-menu-toggle { display: inline-grid; place-items: center; margin-left: auto; order: 3; }
    .oav-header-actions { order: 2; margin-left: auto; }
    .oav-main-nav {
        width: min(380px, 88vw);
        height: calc(100dvh - 72px);
        margin: 0;
        padding: 20px;
        position: fixed;
        top: 72px;
        right: 0;
        z-index: 101;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        overflow-y: auto;
        background: #fff;
        border-top: 1px solid var(--oav-border);
        box-shadow: -16px 20px 45px rgba(4, 22, 51, .18);
        transform: translateX(110%);
        transition: transform .25s ease;
    }
    .oav-main-nav.is-open { transform: translateX(0); }
    .oav-main-nav > a, .oav-nav-group > summary { width: 100%; min-height: 43px; padding: 0 10px; font-size: 14px; }
    .oav-main-nav > a::after, .oav-nav-group > summary::before { display: none; }
    .oav-nav-group > summary { justify-content: space-between; }
    .oav-submenu { width: 100%; padding: 4px 0 8px 12px; position: static; border: 0; border-left: 3px solid var(--oav-cyan); border-radius: 0; box-shadow: none; transform: none; }
    .oav-submenu::before { display: none; }
    .oav-submenu a { font-size: 14px; }
    .oav-mobile-contact { margin-top: 15px; padding: 16px 12px; display: grid; gap: 6px; border-radius: 10px; color: #c5d4e5; background: var(--oav-navy); font-size: 12px; }
    body.oav-menu-open { overflow: hidden; }
    body.oav-menu-open::after { content: ""; position: fixed; inset: 0; z-index: 90; background: rgba(2, 13, 33, .55); }
}

@media (max-width: 680px) {
    .oav-topbar { justify-content: center; padding-inline: 16px; }
    .oav-topbar__group:first-child { display: none; }
    .oav-topbar__group { width: 100%; justify-content: space-between; gap: 12px; }
    .oav-topbar__item { font-size: 11px; }
    .oav-site-header { min-height: 66px; padding: 5px 14px; gap: 7px; }
    .oav-brand img { width: 145px; height: 50px; }
    .oav-main-nav { top: 66px; height: calc(100dvh - 66px); }
    .oav-icon-link--account { display: none; }
    .oav-quote-button { display: none; }
    .oav-header-actions { margin-left: auto; }
}

@media (max-width: 390px) {
    .oav-brand img { width: 132px; }
    .oav-icon-link { min-width: 40px; height: 40px; }
    .oav-menu-toggle { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .oav-main-nav, .oav-submenu a, .oav-quote-button { transition: none; }
}