/* Стили Каталога */

/* Стили для работы с изображением */


/* Стили для каталога */

#catalog {
    width: 100%;
    margin-bottom: 5vw;
}

#blockCatalog {
    margin-left: 8vw;
    margin-top: 3vw;
    display: flex;
    flex-wrap: wrap;
    width: 85vw;
    gap: 2vw;
}


.catalogPage {
    width: 19vw;
    height: 24vw;
    background-color: rgb(248, 245, 222);
    border-radius: 1vw;
    transition: transform 0.5s ease;
}

.catalogPage * {
    margin-left: 1vw;
}

.catalogPictures {
    margin: 0;
}

.catalogImage {
    width: 17vw;
    height: 17vw;
    border-radius: 0.8vw;
    margin-top: 0.9vw;
}

.catalogText {
    margin: 0;
}

.catalogName {
    height: 2.5vw;
    width: 17vw;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 700;
    font-size: 1.8vw;
    color: rgb(213,  120, 67);
    margin-top: 0.3vw;

}

.catalogCost {
    display: flex;
    margin-top: 0.5vw;
    margin-left: 0;
    gap: 0;
}

.catalogPrice {
    font-weight: 500;
    font-size: 1vw;
    color: rgb(243, 177, 200);
}

.btn {
    display: flex;
    margin: 0;
}

.catalogPage:hover .catalogBtn {
    opacity: 1;
}

.catalogPage:hover {
    cursor: pointer;
    transform: scale(1.03);
}


/* Начало стилей для кнопок переключения страниц */

.pagination {
  margin-top: 5vw;
  text-align: center;
}

.pagination a,
.pagination span {
    display: inline-block;
    margin: 0 0.3vw;
    padding: 0.4vw 1vw;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 0.5vw;
    color: rgb(216, 120, 67);
    font-weight: bold;
    background-color: rgb(248, 245, 222);
    font-size: 1.3vw;
}

.pagination a:hover {
    background-color: #f0f0f0;
}

.pagination:hover {
    cursor: pointer;
}

.pagination .current {
    background-color: rgb(243, 177, 200);
    color: rgb(216, 120, 67);
}

/* Стили для лайка и изюраного */

.catalogBtn {
    position: absolute;
    margin-top: 13.5vw;
    margin-left: 10vw;
    display: flex;
    opacity: 0;
    transition: opacity 0.5s ease;

}

.save {
    height: 2.7vw;
    width: 2.7vw;
}

.likes {
    height: 3.7vw;
    width: 2.7vw;

}

.likesText {
    font-size: 1vw;
    color: rgb(215, 120, 67);
    position: absolute;
    margin-left: 80%;
    margin-top: 2.3vw;
    width: 0.5vw;

}

.img-checkbox1 input[type="checkbox"], .img-checkbox2 input[type="checkbox"] {
  display: none;
}

.img-checkbox1 input[type="checkbox"]:checked + img {
  content: url("/static/main/images/saveHold.png");
}

.img-checkbox2 input[type="checkbox"]:checked + img {
  content: url("/static/main/images/likesHold.png");
}

.img-checkbox1:hover, .img-checkbox2:hover {
    cursor: pointer;
}

.mainText {
    font-size: 2.5vw;
    justify-content: center;  /* горизонтально */
    align-items: center;      /* вертикально */
    color: rgb(192, 182, 93);
    font-weight: 500;
}

.secondText {
    font-size: 0.9vw;
    justify-content: center;  /* горизонтально */
    align-items: center;      /* вертикально */
    color: rgb(192, 182, 93);
}

.saveFon {
    width: 100%;
    height: 13vw;
    background: url('/static/main/images/saveFon.png');
    background-size: 100% 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
}

.saveFon div {
    text-align: center;
    align-items: center;
    justify-content: center;
}

.saveNothing {
    width: 100%;
    height: 20vw;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
}

.saveNothing h3 {
    font-size: 2.8vw;
    color: rgb(200, 192, 167);

}

@media screen and (max-width: 800px) {
    .saveNothing, #catalog {
        min-height: 105vw;
    }

    .saveNothing h3 {
        font-size: 5vw;
    }

    .saveFon {
        height: 18vw;
    }

    .mainText {
        font-size: 3vw;
        font-weight: 500;
    }

    .secondText {
        font-size: 1.9vw;
    }

    .catalogBtn {
        opacity: 1;
    }
    .catalogPage {
        width: 26.5vw;
        height: 34vw;
    }

    .catalogImage {
        width: 24.5vw;
        height: 24.5vw;
    }

    .catalogName {
        font-size: 2.8vw;
        height: 3.5vw;
        width: 24vw;
    }

    .catalogPrice {
        font-size: 1.7vw;
    }

    .catalogBtn {
        margin-left: 11vw;
        margin-top: 16vw;
    }

    .save {
        width: 5.5vw;
        height: 5.5vw;
        opacity: 0.9;
    }

    .likes {
        width: 5.5vw;
        height: 7.5vw;
        opacity: 0.9;
    }

    .likesText {
        font-size: 2vw;
        margin-top: 4.5vw;
    }

    .pagination a,
    .pagination span {
        font-size: 3vw;
        padding: 1.2vw 2.5vw;
        border-radius: 1vw;

    }
}