#head {
    height: fit-content;
    width: 100%;
    display: flex;
    flex-direction: column;

    position: fixed;
    top: 0;
    z-index: 1000;
    background-color: #ffffff;
}

#filler {
    height: 13vh;
    background-color: #ffffff;
}

#main_bar {
    left: 0;
    width: 100%;
    height: 8vh;

    z-index: 30;

    display: flex;
    flex-direction: row;
    align-items: left;

    background-color: #ffffff;

    padding-bottom: 1vh;
}

#second_bar {
    left: 0;
    width: 100%;
    height: 4vh;

    z-index: 30;

    display: flex;

    border-bottom: #2563ae 4px solid;
    background-color: #ffffff;
}

/* LOGO */

#bar_logo {
    display: flex;

    align-items: center;

    margin-left: 6vw;
}

#logo {
    max-height: 80%;
    width: auto;
    object-fit: contain;
}

/* TOP MAIN BAR */

#top_main {
    left: 0;
    width: 100%;
    height: 8vh;

    z-index: 31;

    display: flex;
    align-items: left;
}

/* BIG WINDOW NAV */

#nav_big {
    width: 100%;
    height: 100%;

    margin: 0 4vw;
    padding: 0;
}

#nav_big_ul {
    height: 100%;

    flex: 1;

    list-style: none;

    margin: 0;
    padding: 0 2px;

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

    border-left: black 1px solid;
}

#nav_big_ul li {
    flex: 1;

    height: 100%;

    display: flex;
    align-items: center;
    text-align: center;

    padding: 0 2vw;

    background-color: white;
    transition: background-color 0.3s ease;

    cursor: pointer;

    border-right: black 1px solid;

    box-sizing: border-box;
}

#nav_big_ul li a {
    text-decoration: none;
    color: #000000;
    transition: color 0.3s ease;

    font-weight: bold;
    font-size: 1.6vh;

    width: 100%;
}

#nav_big_ul li:hover {
    background-color: #eeeeee;
}

#nav_big_ul li:hover a {
    color: #3a3a3a;
}

/* SEARCH BAR */

#bar_search {
    flex: 1;
    padding: 0 10vw;

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

#search_container_nav {
    padding: 1vh;
    width: 100%;

    background-color: #2563ae;
    border-radius: 8px;

    display: flex;
    flex-direction: row;
    gap: 2vw;
}

.search_input_group_nav {
    flex: 1 1;
    padding: 0 1vw;
    gap: 1vw;

    display: flex;
    justify-content: center;
    align-items: center;
}

.search_input_group_nav input {
    width: 100%;
    color: white;

    padding: 0.6vh;
    outline: none;
    border: none;
    border-bottom: white 2px solid;

    background-color: transparent;
}

.search_input_group_nav input::placeholder {
    color: rgb(160, 160, 160);
    font-style: italic;
}

#search_icon_container {
    border-radius: 4px;
    transition: background-color 0.3s;
    cursor: pointer;

    background-color: transparent;

    height: 3vh;
    width: 3vh;

    display: flex;
    justify-content: center;
    align-items: center;
}

#search_icon_container:hover {
    background-color: #3d80d1;
}

#search_icon {
    color: white;
}

/* ICONS NAV */

#nav_icons {
    height: 100%;

    display: flex;
    justify-content: right;
    align-items: center;

    gap: 1vh;

    padding-right: 1vw;
}

.icon_container {
    position: relative;

    border-radius: 28px;

    height: 5vh;
    width: 5vh;
    background-color: #2563ae;

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

    cursor: pointer;

    transition: width 0.3s ease;
}

.icon_container:hover {
    width: 6vh;
}

.icon_container:hover .icon_after {
    visibility: visible;
    margin-left: 7px;
    opacity: 1;
    width: 100%;
}

.icon {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.icon_after {
    width: 0%;
    margin-left: 0px;
    opacity: 0;
    color: white;
    font-weight: bold;

    transition: margin-left 0.3s ease, opacity 0.3s ease;
}

.icon_container span .fa-solid {
    color: white;
}

/* CESTA */

#cart_background {
    z-index: 40;

    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.4s ease;
}

#cart_background.active {
    opacity: 1;
    pointer-events: auto;
}

#cart_container {
    z-index: 41;

    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    height: 100vh;
    background: rgba(255, 255, 255);

    transform: translateX(100%);
    transition: transform 0.4s ease;

    display: flex;
    flex-direction: column;

    border-left: #2563ae 4px solid;
}

#cart_container.active {
    transform: translateX(0);
}

#my_cart_container {
    background-color: #2563ae;
    padding: 20px 20px;

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

    color: white;
}

#my_cart_container span {
    flex: 1;

    font-weight: bold;
    font-size: 2vh;
}

#my_cart_container i {
    font-size: 3vh;
    cursor: pointer;
}

#cart_main {
    flex: 1;

    padding: 2vh;

    display: flex;
    flex-direction: column;

    height: 100vh;
    overflow-y: scroll;
    box-sizing: border-box;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

#cart_main::-webkit-scrollbar {
    display: none;
}

#cart_footer {
    height: fit-content;

    display: flex;
    flex-direction: column;

    background-color: #2563ae;
}

#cart_articulos {
    display: flex;
    flex-direction: column;

    gap: 1vh;
}

.cart_articulo {
    border-bottom: black 1px solid;

    padding: 1vh 1.4vh;

    display: flex;
    flex-direction: row;

    gap: 10px;
}

.cart_articulo_photo {
    width: 120px;
    height: 120px;

    text-align: center;
}

.cart_articulo_text {
    flex: 1;

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

    gap: 1vh;
}

.cart_articulo_trash i {
    color: white;
    background-color: #2563ae;

    margin-top: 10px;

    padding: 1vh;
    border-radius: 24px;
    
    cursor: pointer;

    transition: background-color 0.3s ease, color 0.3s ease;
}

.cart_articulo_trash i:hover {
    color: #2563ae;
    background-color: white;
}

#cart_precio_total {
    padding: 2vh;
    padding-bottom: 1vh;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: row;

    box-sizing: border-box;

    color: white;

    align-items: center;
    font-weight: bold;
    font-size: 2.4vh;

    border-bottom: white 1px solid;
}

#cart_total_texto {
    flex: 1;

    text-align: left;
}

#cart_total_precio {
    margin-left: auto;

    text-align: right;
}

#cart_finalizar_cesta {
    padding-top: 1vh;
    padding-bottom: 2vh;

    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

#cart_button_finalizar_cesta {
    width: fit-content;

    background-color: white;
    color: rgb(56, 56, 56);

    align-items: center;
    font-weight: bold;
    font-size: 2vh;

    padding: 1vh 2vh;

    border-radius: 8px;

    cursor: pointer;

    transition: background-color 0.3s ease;
}

#cart_button_finalizar_cesta:hover {
    background-color: rgb(228, 228, 228);
}

/* SMALL WINDOW NAV */

#nav_small {
    width: fit-content;

    display: none;

    top: 40%;

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

    padding-right: 0vw;
}

#nav_small_line_container {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5vh;

    cursor: pointer;

    background-color: transparent;

    border-radius: 28px;

    height: 5vh;
    width: 5vh;

    transition: background-color 0.3s ease;
}

#nav_small_line_container:hover {
    background-color: #2563ae;
}

#nav_small_line_container:hover .line {
    background-color: white;
}

#nav_small_line_container .line {
    background-color: #2563ae;
    height: 0.5vh;
    width: 60%;
    border-radius: 12px;

    transition: background-color 0.3s ease;
}

#nav_small_ul {
    background-color: rgb(255, 255, 255);

    border: rgb(145, 145, 145) 1px solid;
    border-top: 0;

    list-style: none;

    display: none;

    margin: 0;
    padding-top: 1vh;
    padding-bottom: 1vh;
    padding-right: 1vw;

    z-index: 29;
}

#nav_small_ul li {
    height: auto;

    padding: 1vh 8vw;

    text-align: right;

    border-radius: 4px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

#nav_small_ul li:hover {
    background-color: #eeeeee;
}

#nav_small_ul li:hover a {
    color: #3a3a3a;
}

#nav_small_ul li a {
    text-decoration: none;
    color: #000000;
    transition: color 0.3s ease;

    font-weight: bold;

    width: 100%;
}

#nav_small_ul_background {
    z-index: 28;

    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.4s ease;
}

#nav_small_ul_background.active {
    opacity: 1;
    pointer-events: auto;
}

/* NAV CATALOGO */

#catalogo_background {
    z-index: 39;

    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.4s ease;
}

#catalogo_background.active {
    opacity: 1;
    pointer-events: auto;
}

#catalogo_container {
    z-index: 40;

    margin: 0;

    position: fixed;
    width: 500px;
    height: 100%;
    background-color: white;

    transform: translateX(-100%);
    transition: transform 0.4s ease;

    border-right: #2563ae 4px solid;
}

#catalogo_container.active {
    transform: translateX(0);
}

.catalogo_title {
    background-color: #2563ae;

    padding: 2vh 20px;

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

    color: white;

    position: sticky;
    top: 0;
}

.catalogo_title span {
    text-align: center;

    flex: 1;

    font-weight: bold;
    font-size: 2vh;
}

.catalogo_title i {
    font-size: 3vh;
    cursor: pointer;
}

#catalogo_ul {
    list-style: none;
    margin: 1vh 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 1vh;
}

#catalogo_ul li {
    cursor: pointer;
    background-color: transparent;

    padding: 1vh 20px;
    margin: 0 20px;
    display: flex;
    flex-direction: column;

    transition: background-color 0.3s ease;

    border-radius: 4px;
    box-sizing: border-box;

    font-size: 1.8vh;
    font-weight: bold;
}

#catalogo_ul li:hover {
    background-color: #eeeeee;
}

/* BUSCADOR */

#buscador_container {
    z-index: 36;

    top: 8vh;

    width: calc(100% - 36vw);
    padding-top: 1vh;

    position: absolute;
    background-color: white;
    border: black 1px solid;
    border-radius: 8px;

    left: 51%;
    transform: translateX(-50%);

    max-height: 30vh;
    overflow-y: auto;
    scroll-behavior: smooth;

    scrollbar-width: none;
    -ms-overflow-style: none;

    display: none;
}

#buscador_container::-webkit-scrollbar {
    display: none;
}

#buscador_container.active {
    display: block;
}

#buscador_container_ul {
    display: flex;
    flex-direction: column;

    list-style: none;

    margin: 0;
    padding: 0;

    padding-bottom: 1vh;
}

.buscador_container_li {
    cursor: pointer;

    background-color: transparent;
    border-radius: 4px;

    transition: background-color 0.3s ease;

    padding: 1vh 2vw;
    margin: 0 1vw;
}

.black_text {
    color: 2px solid #252525;
    margin: 0.4vh 1.6vw;

    border-bottom: #2563ae solid 2px;

    font-weight: bold;
}

.buscador_container_li:hover {
    background-color: #eeeeee;
}

#buscador_footer {
    position: sticky;
    bottom: 0;
    background: #2563ae;
    color: white;
    padding: 1vh 2vw;

    cursor: pointer;

    display: none;
}

#buscador_footer.active {
    display: block;
}

/* CLASIFICACION NIVEL */

#clasificacion_nivel_1_container {
    z-index: 41;
}

#clasificacion_nivel_2_container {
    z-index: 42;
}

.clasificacion_nivel_container {

    margin: 0;

    position: fixed;
    width: 500px;
    height: 100%;
    background-color: white;

    transform: translateX(-100%);
    transition: transform 0.4s ease;

    border-right: #2563ae 4px solid;

    overflow-y: auto;
    scroll-behavior: smooth;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.clasificacion_nivel_container::-webkit-scrollbar {
    display: none;
}

.clasificacion_nivel_container.active {
    transform: translateX(0);
}

.clasificacion_nivel_content ul {
    list-style: none;
    margin: 1vh 0;
    padding: 0;

    display: flex;
    flex-direction: column;
}

.clasif_li1 {
    background-color: transparent;

    padding: 0 20px;
    margin: 0 20px;
    display: flex;
    flex-direction: column;

    border-radius: 4px;
    box-sizing: border-box;

    font-size: 1.8vh;
    font-weight: bold;
}

.clasif_li1 span {
    border-bottom: #2563ae 2px solid;
    color: #2563ae;

    cursor: pointer;

    transition: background-color 0.3s ease;
    background-color: transparent;

    padding: 1vh 0;
}

.clasif_li1 span:hover {
    background-color: #eeeeee;
}

.clasif_li2 {
    cursor: pointer;
    background-color: transparent;

    padding: 1vh 10px;
    margin: 0 10px;
    display: flex;
    flex-direction: row;
    align-items: center;

    transition: background-color 0.3s ease;

    border-radius: 4px;
    box-sizing: border-box;

    font-size: 1.6vh;
    font-weight: bold;
}

.clasif_li2 i {
    margin-left: auto;
}

.clasif_li2:hover {
    background-color: #eeeeee;
}

/* WINDOW SIZE */

@media (max-width: 920px) {

    #main_bar {
        flex-direction: column;
        height: 13vh;
    }

    #filler {
        height: 14vh;
    }

    #nav_small {
        display: flex;
        padding-right: 8vw;
    }

    #nav_small_line_container {
        display: flex;
    }

    #nav_icons {
        flex: 1;
    }

    #cart_container {
        width: 100%;
    }

    #nav_big_ul {
        display: none;
    }

    #second_bar {
        height: 0vh;
    }

    #nav_catalogo {
        width: 100%;
    }

    #buscador_container {
        left: auto;
        right: 8vw;
        transform: none;

        width: calc(100% - 20vw);
    }

    #catalogo_container,
    .clasificacion_nivel_container {
        width: 100%;
    }
}