/* ==============================================================================

  NAV

============================================================================== */

nav {
    position: absolute;
    top: 0;
    width: 100%;
    padding-top: var(--g16) !important;
    padding-bottom: var(--g16) !important;
    z-index: 500;
}

nav .logo {
    opacity: .9;
}

nav .logo svg {
    height: 11px;
    fill: white;
}

nav.black .logo svg {
    height: 11px;
    fill: black !important;
}


nav .logo:hover {
    opacity: 1;
}

nav.black .cart-button svg {
    fill: black !important;
}

.cart-button {
    height: 26px;
    opacity: .8;
    aspect-ratio: 1;
    border-radius: var(--br6);
}

.cart-button svg {
    height: 13px;
}

nav.black .cart-button:hover {
    background-color: hsl(0, 0%, 0%, .1);
}

.cart-button:hover {
    background-color: hsl(0, 0%, 100%, .1);
    opacity: 1;
    backdrop-filter: blur(2px);
}



/* =======================================
  BREAKPOINT 1
======================================= */

@media (max-width: 1340px) {

    
    /* ==============================================================================

        HERO

    ============================================================================== */

    nav .logo svg {
        height: 10px;
    }


    .cart-button {
        height: 24px;
    }

    .cart-button svg {
        height: 12px;
    }

    
}

@media (max-width: 1027px) {

    /* ==============================================================================

        HERO

    ============================================================================== */

    
}

@media (max-width: 703px) {

    /* ==============================================================================

        HERO

    ============================================================================== */

        nav .logo svg {
        height: 9px;
    }


    .cart-button {
        height: 24px;
    }

    .cart-button svg {
        height: 12px;
    }

    
}