:root{
    /* primary */
    --Orange: hsl(26, 100%, 55%);
    --paleOrange: hsl(25, 100%, 94%);

    /* neutral */
    --varkBlue: hsl(220, 13%, 13%);
    --DarkGrayishBlue: hsl(219, 9%, 45%);
    --GrayishBlue: hsl(220, 14%, 75%);
    --LightGrayishBlue: hsl(223, 64%, 98%);
    --White: hsl(0, 0%, 100%);
    --black: hsl(0, 0%, 0%); /* with 75% opacity for lightbox background */
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Kumbh Sans', sans-serif;
    font-size: 18px;
}

/*        */
/* header */
/*        */
header{
    border-bottom: 1px solid var(--GrayishBlue);
    height: 120px;
    width: 80%;

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

/*                      */
/* logo and nad content */
/*                      */
.logo-nav-content{
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
}

/*              */
/* logo content */
/*              */

.logo-content{
    margin-left: 5px;
}

/*     */
/* nav */
/*     */
.mobile-menu, .mobile-img{
    display: none;
}

.close-nav, .close-nav-img{
    display: none;
}
.menu{
    display: flex;
    flex-flow: row wrap;
    gap: 30px;
}

.li-link{
    list-style: none;
}

.link{
    text-decoration: none;
    color: var(--black);

    transition: all 0.1s ease;
    padding: 43px 20px;
}

.link:hover{
    border-bottom: 5px solid var(--Orange);
}

/*                     */
/* avatar and cart box */
/*                     */
.user{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 2.5em;
}

.avatar{
    width: 45px;
    height: 45px;
    border-radius: 50%;

    background-image: url(../images/image-avatar.png);
    background-size: cover;
    background-repeat: no-repeat;

    cursor: pointer;
}

.avatar:hover .border-avatar{
    width: 45px;
    height: 45px;
    border-radius: 50%;

    border: 2px solid var(--Orange);
}

.cartShop{
    cursor: pointer;
    height: 20px;
}

.cartContent{
    position: relative;
}

/* popup cart shop */
#product-list{
    display: none;
}

#cartEmpty{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 150px;
}

.popup-product{
    position: absolute;
    top: 150%;
    left: -600%;
    right: 0%;
    z-index: 100;

    width: 350px;
    height: auto;

    background-color: var(--White);

    box-shadow: 0px 10px 20px var(--GrayishBlue);

    visibility: hidden;
}

.popup-product.activo{
    visibility: visible;
}

.tittle-div{
    border-bottom: 1px solid var(--GrayishBlue);
}

#tittle-cart{
    font-weight: 700;
    font-size: 15px;
    text-align: left;
    padding: 20px 0px 20px 20px;
}

.product-item{
    margin: 20px 0px 20px 25px;
    display: flex;
    font-size: 15px;
    align-items: center;
}

#img-cart-product{
    width: 70px;
    height: 70px;
    border-radius: 5px;
}

.info-shop{
    margin-left: 10px;
    margin-right: 10px;
}

.product-shop{
    color: var(--GrayishBlue);
    font-size: 15px;
}
.product-price{
    display: inline-block;
    color: var(--GrayishBlue);
}
.product-count-shop{
    display:inline-block;
    color: var(--GrayishBlue);
}
.value-shop{
    display:inline-block;
    margin-left: 10px;
}

.delete-product{
    cursor: pointer;

    height: 15px;
}

.btn-checkout{
    background-color: var(--Orange);
    color: var(--White);
    border: none;
    border-radius: 10px;

    width: 300px;
    height: 50px;
    margin-left: 25px;
    margin-bottom: 25px;

    cursor: pointer;
}
.btn-checkout:hover{
    background-color: hsl(26, 100%, 66%);
}
.icon-add{
    margin-right: 15px;
    width: 18px;
}

/*      */
/* body */
/*      */
body{
    background-color: var(--White);
}

.container{
    display: grid;
    grid-template-columns: 1fr;

    justify-items: center;
}

/*      */
/* main */
/*      */
main{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 0px;

    margin: 130px 180px;

    position: relative;
}

/*                  */
/* imagenes content */
/*                  */
.images{
    width: 50%;
}

.info-products{
    width: 50%;
}

.main-img{
    height: 455px;
    width: 455px;

    border-radius: 16px;
    cursor: zoom-in;
}


.sm-1-div, .sm-2-div, .sm-3-div, .sm-4-div{
    display: inline-block;
    width: 96px;
    height: 96px;
    border-radius: 16px;
    margin: 20px 20px 10px 0px;

    cursor: pointer;

    background-size: cover;
    background-repeat: no-repeat;
}
.sm-1-div{
    background-image: url(../images/image-product-1-thumbnail.jpg);
}
.sm-2-div{
    background-image: url(../images/image-product-2-thumbnail.jpg);
}
.sm-3-div{
    background-image: url(../images/image-product-3-thumbnail.jpg);
}
.sm-4-div{
    background-image: url(../images/image-product-4-thumbnail.jpg);
}
.sm-1-div:hover .filtro, .sm-2-div:hover .filtro, .sm-3-div:hover .filtro, .sm-4-div:hover .filtro{
    background-color: rgba(255, 255, 255, 0.336);
    border: 4px solid var(--Orange);
    width: 96px;
    height: 96px;
    border-radius: 16px;
}

.big-image{
    grid-column: 1 / 4spam;
    grid-row: 1 / 3spam;
}

.big-image .prev, .big-image .next{
    display: none;
}
/*                           */
/* info productos contenedor */
/*                           */
#company-Name{
    font-weight: bold;
    color: var(--Orange);
}

.title-pro{
    font-weight: 900;
    font-size: 30px;
}

#description{
    font-weight: 400;
    font-size: 16px;
    color: var(--DarkGrayishBlue);
}

#price{
    font-weight: bold;
    font-size: 25px;

    width: 90px;
    display: inline-block;
}

#discount{
    color: var(--Orange);
    background-color: var(--paleOrange);

    font-weight: 700;

    width: 46px;
    padding: 1px 5px;
    margin-left: .3em;
    border-radius: 5px;
    display: inline-block;
}

#old-price{
    color: var(--GrayishBlue);

    text-decoration: line-through;
}

.controlPro{
    background-color: var(--LightGrayishBlue);

    font-weight: bold;
    border: none;

    padding: 15px 15px;
    
    cursor: pointer;
}
#resta{
    color: var(--Orange);

    margin-right: 0px;

    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
#suma{
    color: var(--Orange);

    margin-left: 0px;

    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

#countPro{
    text-align: left;
    font-weight: bold;
    border: none;

    width: 60px;
    padding: 15px 25px;

    background-color: var(--LightGrayishBlue);
}

#addCarts{
    padding: 15px 80px;
    font-weight: bold;

    background-color: var(--Orange);
    color: var(--White);
    border: none;
    border-radius: 10px;
    box-shadow: 0px 15px 20px 2px hsla(26, 100%, 55%, 0.199); /* offset-x | offset-y | blur-radius o difuminado | spread-radius o ancho del radio | color */
    cursor: pointer;
}
#addCarts:hover{
    background-color: hsl(26, 100%, 66%);
}

/*        */
/* footer */
/*        */
.attribution{
    font-size: 16px;
    font-weight: 200;
    grid-column: 1 / 2spam;
}

.attribution a{
    color: var(--Orange);
}

/*                 */
/*  image popup   */
/*               */
.overlay{
    background-color: hsla(0, 0%, 0%, 0.75);
    width: 199.3vh;
    height: 105vh;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

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

    visibility: hidden;
}

.overlay.active{
    visibility: visible;
}

.close-pop{
    color: var(--White);
    text-decoration: none;
    font-size: 30px;
    font-size: 700;
    text-align: right;

    width: 30px;

    display: flex;
    margin-left: 90%;
}
.close-pop:hover{
    color: var(--Orange);
}

.main-img-popup{
    height: 500px;
    width: 500px;

    border-radius: 16px;

    display: block;
}

.prev{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;

    cursor: pointer;

    position: absolute;
    top: 40%;
    left: 34.5%;
}
.prev-img{
    margin-top: 5px;
    margin-right: 5px;
}
.prev:hover{
    background-color: hsl(26, 100%, 82%);
}

.next{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;

    cursor: pointer;

    position: absolute;
    top: 40%;
    right: 36.5%;
}
.next-img{
    margin-top: 5px;
    margin-left: 5px;
}
.next:hover{
    background-color: hsl(26, 100%, 82%);
}

.sm-1-div-pop, .sm-2-div-pop, .sm-3-div-pop, .sm-4-div-pop{
    display: inline-block;
    width: 96px;
    height: 96px;
    border-radius: 16px;
    margin: 30px 35px 10px 0px;

    cursor: pointer;

    background-size: cover;
    background-repeat: no-repeat;
}
.sm-1-div-pop{
    background-image: url(../images/image-product-1-thumbnail.jpg);
}
.sm-2-div-pop{
    background-image: url(../images/image-product-2-thumbnail.jpg);
}
.sm-3-div-pop{
    background-image: url(../images/image-product-3-thumbnail.jpg);
}
.sm-4-div-pop{
    background-image: url(../images/image-product-4-thumbnail.jpg);
}
.sm-1-div-pop:hover .filtro-pop, .sm-2-div-pop:hover .filtro-pop, .sm-3-div-pop:hover .filtro-pop, .sm-4-div-pop:hover .filtro-pop{
    background-color: rgba(255, 255, 255, 0.336);
    border: 4px solid var(--Orange);
    width: 96px;
    height: 96px;
    border-radius: 16px;
}

/*        */
/* medias */
/*        */

@media (min-width: 1600px){
    main{
        margin: 130px 280px;
    }
}

@media (max-width: 375px){
    .container{
        grid-template-columns: 375px;
        grid-template-rows: auto;
    }
/*        header content               */
    header{
        width: 100%;
        height: 60px;
    }

    .mobile-menu, .mobile-img{
        display: inline-block;
    }

    .mobile-menu{
        background: none;
        border: none;
        margin-right: 10px;
    }

    .mobile-menu:active .mobile-img{
        transition: .5s;
        transform: rotate(90deg);
    }

    .logo-content{
        margin-left: 1em;
    }

    .nav{
        display: none;
        background-color: rgb(255, 255, 255);

        width: 70%;
        height: 100%;
        position: absolute;
        z-index: 1;
    }

    .link{
        font-size: 20px;
        font-weight: 700;
    }

    .close-nav, .close-nav-img{
        display: block;
    }
    .close-nav{
        background-color: red;
        border: none;
        margin-left: 20px;
        margin-top: 20px;
    }

    .close-nav-img{
        background-color: white;
    }

    .menu{
        flex-direction: column;
        margin-top: 40px;
    }

    .link{
        padding: 5px 5px 5px 20px;
    }

    .link:hover{
        border-bottom: none;
    }

    .user{
        gap: 1em;
    }

    .avatar{
        width: 20px;
        height: 20px;

        margin-right: 1em;
    }

    .popup-product{
        top: 50px;
        left: -285px;
    }
/*     img product                      */
    main{
        margin: 0px;
    }

    .images{
        width: 100%;
        height: auto;
    }

    .main-img{
        height: 375px;
        width: 375px;
    
        border-radius: 0px;
        cursor: default;
    }

    .small-images{
        display: none;
    }
/*      info product    */
    .info-products{
        width: 100%;
        height: auto;

        margin: 10px 20px;
    }

    .title-pro{
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #description{
        margin-top: 10px;
        margin-bottom: 10px;

        font-size: 15px;
    }

    #old-price{
        display: inline-block;

        margin-left: 110px;

        font-size: 15px;
    }

    #form-inputs{
        margin-top: 20px;
    }

    #countPro{
        width: 245px;
        text-align: center;
    }

    #addCarts{
        margin-top: 15px;
        margin-bottom: 15px;
        width: 335px;
    }
/*        footer          */
    .attribution{
        margin: 10px 20px;
    }
/*      btn next and prev       */
    .big-image .prev, .big-image .next{
        display: block;
    }
    .big-image .prev{
        left: 20px;
        top: 20%;

        width: 40px;
        height: 40px;
    }
    .prev-img{
        width: 10px;
    }

    .big-image .next{
        right: 20px;
        top: 20%;

        width: 40px;
        height: 40px;
    }
    .next-img{
        width: 10px;
    }
}

@media (min-width: 376px) and (max-width: 768px) {
    .container{
        grid-template-columns: auto;
        grid-template-rows: auto;
    }

    /*        header content               */
    header{
        width: 100%;
        height: 60px;
    }

    .mobile-menu, .mobile-img{
        display: inline-block;
    }

    .mobile-menu{
        background: none;
        border: none;
        margin-right: 10px;
    }

    .mobile-menu:active .mobile-img{
        transition: .5s;
        transform: rotate(90deg);
    }

    .logo-content{
        margin-left: 1em;
    }

    .nav{
        display: none;
        background-color: rgb(255, 255, 255);

        width: 70%;
        height: 100%;
        position: absolute;
        z-index: 1;
    }

    .link{
        font-size: 20px;
        font-weight: 700;
    }

    .close-nav, .close-nav-img{
        display: block;
    }
    .close-nav{
        background-color: red;
        border: none;
        margin-left: 20px;
        margin-top: 20px;
    }

    .close-nav-img{
        background-color: white;
    }

    .menu{
        flex-direction: column;
        margin-top: 40px;
    }

    .link{
        padding: 5px 5px 5px 20px;
    }

    .link:hover{
        border-bottom: none;
    }

    .user{
        gap: 1em;
    }

    .avatar{
        width: 20px;
        height: 20px;

        margin-right: 1em;
    }

    .popup-product{
        top: 50px;
        left: -285px;
    }
/*     img product                      */
    main{
        margin: 0px;
    }

    .images{
        width: 100%;
        height: auto;
    }

    .main-img{
        height: 100%;
        width: 100%;
    
        border-radius: 0px;
        cursor: default;
    }

    .small-images{
        display: none;
    }
/*      info product    */
    .info-products{
        width: 100%;
        height: auto;

        margin: 10px 20px;
    }

    .title-pro{
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #description{
        margin-top: 10px;
        margin-bottom: 10px;

        font-size: 15px;
    }

    #old-price{
        display: inline-block;

        margin-left: 110px;

        font-size: 15px;
    }

    #form-inputs{
        margin-top: 20px;
    }

    #countPro{
        width: 245px;
        text-align: center;
    }

    #addCarts{
        margin-top: 15px;
        margin-bottom: 15px;
        width: 335px;
    }
/*        footer          */
    .attribution{
        margin: 10px 20px;
    }
/*      btn next and prev       */
    .big-image .prev, .big-image .next{
        display: block;
    }
    .big-image .prev{
        left: 20px;
        top: 20%;

        width: 40px;
        height: 40px;
    }
    .prev-img{
        width: 10px;
    }

    .big-image .next{
        right: 20px;
        top: 20%;

        width: 40px;
        height: 40px;
    }
    .next-img{
        width: 10px;
    }
}