/* HERO HEADER */
.header-main {
    position: absolute;

    width: 100%;

    overflow: hidden;
}

/* NAVIGATION CONTAINER */ 
.navigation-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    background-color: transparent;

    padding: 1.25rem;
}

/* BUTTONS */
.btn-menu {
    z-index: 9998;
}

.btn-menu,
.btn-cart {
    font-size: 1.3125rem; /*21*/

    background-color: transparent;
    color: var(--color-nav-button);
    text-shadow: 0px 0px 3px var(--color-nav-button-shadow);
    border: none;

    padding: 0.3125rem; /*5*/
    
    transition: color .3s ease, transform 0.3s ease;
}

.btn-menu:hover,
.btn-cart:hover {
    color: var(--color-nav-button-hover);
    transform: scale(1.1);
}

.btn-menu:active,
.btn-cart:active {
    color: var(--color-nav-button-active);
}

/********/
/* LOGO */
/********/
.logo-header {
    width: 3.125rem; /*50*/
    height: 3.125rem; /*50*/

    background-color: var(--color-background);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, .5);

    border-radius: 50%;
}

.logo-header img {
    width: 100%;
    height: auto;

    display: block;
}

/********/
/* CART */
/********/
.btn-cart {
    position: relative;
}

#cart-count {
    position: absolute;
    right: -3px;
    top: -11px;

    font-size: 0.75rem; /*12*/
    font-weight: 500;

    width: 1.125rem; /*18*/
    height: 1.125rem; /*18*/

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: var(--color-cart-count-bg);
    color: var(--color-cart-count-txt);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

/*************************/
/* FULLSCREEN NAVIGATION */
/*************************/
.fullscreen-nav {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: var(--color-fullscreen-bg-gradient, var(--color-fullscreen-bg));

    overflow: hidden;

    z-index: 9997;

    transition: height 0.5s ease;
}

.fullscreen-nav.active {
    height: 100vh;
}

.nav-links {
    text-align: center;

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
}

.fullscreen-nav.active .nav-links {
    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.3s;
}

.fullscreen-nav.closing .nav-links {
    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.4s ease, transform 0.4s ease;
}

.nav-links li {
    margin: 1rem 0;
}

.nav-links a {
    font-size: 1.875rem; /*30*/
    font-weight: 600;

    color: var(--color-fullscreen-link);
    text-shadow: 0px 0px 3px var(--color-fullscreen-link-shadow);

    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--color-fullscreen-link-hover);
}

.nav-links a:active {
    color: var(--color-fullscreen-link-active);
}

/* RESPONSIVE 425px */
@media screen and (min-width: 425px) {
    /* NAVIGATION CONTAINER */ 
    .navigation-container {
        padding: 1.25rem 1.875rem; /*20 y 30*/
    }

    /* LOGO */
    .logo-header {
        width: 3.75rem; /*60*/
        height: 3.75rem; /*60*/
    }
}