* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

/*************************ШРИФТЫ*******************************/
@font-face {
    font-family: 'Karton Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Karton Regular'), url('fonts/karton/Karton-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Literal Light';
    font-style: normal;
    font-weight: normal;
    src: local('Literal Light'), url('fonts/literal/Literal - Light (Personal use).woff') format('woff');
}


@font-face {
    font-family: 'Literal Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Literal Bold'), url('fonts/literal/Literal - Bold (Personal use).woff') format('woff');
}

@font-face {
    font-family: 'Literal Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Literal Regular'), url('fonts/literal/Literal - Regular (Personal use).woff') format('woff');
}

/*************************BODY*******************************/

html {
    scroll-behavior: smooth;
}

body {
    max-width: 100%;
    width: 100%;
}

.nav_info,
.nav_contacts_container,
.advantages,
.product_cards_container,
.order_info,
.reviews_container,
.disclaimer_container,
.upper_nav_container,
.center_nav_container,
.contacts_page_nav_container,
.contacts_page_container,
.discounts_container {
    max-width: 1115px;
    margin: 0 auto;
}


:root {
    --brown: #5B4A58;
    --green: #6AAE55;
    --gray: #828282;
    --white-gray: #F9F8FB;
    --yellow-gray: #F0F0F0;
    --gray4: #d0d0d0;
    --shadow-brown: #A29BB4;
    --karton-regular: "Karton Regular", sans-serif;
    --literal-light: "Literal Light", sans-serif;
    --literal-bold: "Literal Bold", sans-serif;
    --literal-regular: "Literal Regular", sans-serif;
}

a, button {
    cursor: pointer;
}

/*************************HEADER*******************************/

.nav_contacts {
    background-color: var(--brown);
    width: 100%;
    height: 40px;
}

.nav_contacts_container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.nav_contacts_container > a {
    padding: 0 5px;
}

a {
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 5px;
    transition:  background-color 0.2s, color 0.2s;
}

.nav_contacts_container > a:hover {
    height: 100%;
    background-color: #6D5B6A;
}

.nav_maps {
    font-family: var(--literal-regular), sans-serif;
    font-size: 16px;
}

.nav_maps span {
    color: var(--green);
}

.nav_contacts_container > a {
    text-decoration: none;
}

.nav_contacts_container > a {
    color: white;
}

.nav_maps span,
.nav_tel,
.nav_basket {
    font-family: var(--literal-bold), sans-serif;
    font-size: 16px;
}

.nav_tel {
    gap: 20px;
}

.nav_basket {
    text-transform: uppercase;
    gap: 10px;
}

.nav_info {
    width: 100%;
    height: 100px;
    display: grid;
    justify-items: center;
    align-content: center;
    align-items: center;
    grid-template-columns: 40% 20% 30% 10%;
    grid-template-areas:
    "container_1 container_2 container_3 container_5";
}

.nav_info_container_1 {
    grid-area: container_1;
}
.nav_info_container_2 {
    grid-area: container_2;
}
.nav_info_container_3 {
    grid-area: container_3;
}
.nav_info_container_5 {
    grid-area: container_5;
}

.nav_info_container_1,
.nav_info_container_3 {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.nav_info_container_5 {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.nav_info_container_1 > a,
.nav_info_container_2 > a,
.nav_info_container_3 > a,
.change_currency_btn,
.burger_button,
.modal_nav > a {
    color: var(--brown);
    text-transform: uppercase;
    font-family: var(--literal-regular), sans-serif;
    font-size: 14px;
    text-decoration: none;
    border: none;
    background: none;
    transition: color 0.2s;
}

.nav_info_container_1 > a:hover,
.nav_info_container_2 > a:hover,
.nav_info_container_3 > a:hover,
.change_currency_btn:hover,
.burger_button:hover,
.modal_nav > a:hover {
    color: var(--green);
}

.nav_info_container_4
 {
    display: none;
}

.burger_button {
    display: flex;
    align-items: center;
    gap: 10px;
}

.burger:hover .burger_link {
    background-color: var(--green);
}

/**************************анимация для бургер-кнопки******************************/

/* Используем CSS переменные для легкой настройки */
.burger {
    --burger-width: 30px;
    --burger-height: 20px;
    --burger-thickness: 3px;

    position: relative;
    width: var(--burger-width);
    height: var(--burger-height);
    background: transparent;
    cursor: pointer;
    display: block;
}

.burger span {
    display: block;
    position: absolute;
    height: var(--burger-thickness);
    width: 100%;
    background: var(--brown);
    border-radius: calc(var(--burger-thickness) / 2);
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

.burger input {
    display: none;
}

.burger span:nth-of-type(1) {
    top: 0;
}

.burger span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
}

.burger span:nth-of-type(3) {
    bottom: 0;
}

.burger input:checked ~ span:nth-of-type(1) {
    transform: rotate(45deg);
    top: calc(var(--burger-height) / 2 - var(--burger-thickness) / 2);
    left: calc(var(--burger-thickness) * 1.5);
}

.burger input:checked ~ span:nth-of-type(2) {
    width: 0;
    opacity: 0;
}

.burger input:checked ~ span:nth-of-type(3) {
    transform: rotate(-45deg);
    top: calc(var(--burger-height) / 2 - var(--burger-thickness) / 2);
    left: calc(var(--burger-thickness) * 1.5);
}

/*************************анимация для модального окна****************/

.modal_nav {
    position: absolute;
    top: 130px;
    background-color: white;
    width: 100%;

    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 0 10px 0;
}

.border {
    border: 1px solid var(--brown);
    width: 100%;
    margin: 0;
}

.modal_nav.active {
    display: flex;
    align-items: flex-start;
    padding: 5px;
    animation: slideDown 0.3s ease-in-out;
}

.modal_nav.closing {
    animation: slideUp 0.3s ease-in-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-20px);
        opacity: 0;
    }
}

/*************************MAIN PAGE H1*******************************/

.main_page {
    height: 400px;
    background-image: url('images/background.svg');
    object-fit: cover;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

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

h1 {
    font-family: var(--karton-regular), sans-serif;
    font-size: 35px;
    color: var(--brown);
}

h1 span {
    color: var(--green);
}

.h1 {
    font-family: var(--karton-regular), sans-serif;
    font-size: 65px;
    letter-spacing: 8px;
    color: var(--brown);
}

.button_catalog {
    margin-top: 35px;
    padding: 15px 65px;
    background-color: var(--green);
    font-family: var(--literal-bold), sans-serif;
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-size: 18px;
    text-transform: uppercase;
}

.button_catalog:hover {
    background-color: var(--brown);
}

/*************************MAIN PAGE advantages*******************************/

.advantages {
    height: 225px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.advantages_card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-family: var(--literal-bold), sans-serif;
    font-size: 18px;
    color: var(--brown);
}

.advantages_card span {
    color: var(--green);
}

/*************************MAIN PAGE product_cards*******************************/

.product_cards {
    background-color: var(--white-gray);
    padding: 50px 0;
}

.product_cards_container {
    display: grid;
    gap: 10px;
    grid-template-columns: 75% 20%;
    grid-template-rows: auto 1fr;
    justify-content: center;
    grid-template-areas:
    "sorter filter"
    "cards filter";
}

.sorter_and_filter_for_mobile {
    grid-area: sorter;
}

.product_cards_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.product_cards_items {
    grid-area: cards;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.product_cards_filter {
    grid-area: filter;
}

#search-input {
    width: 100%;
    padding-right: 40px;
    padding-left: 15px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 20px;
}

.form_filter_search {
    position: relative;
}

.form_filter_search > input:focus {
    outline: none;
}

/* Убираем крестик в браузерах на движке Webkit (Chrome, Safari, Edge) */
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

/* Для Internet Explorer */
input[type="search"]::-ms-clear {
    display: none;
}

.search_submit {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: #666;
}

.product_cards_sorter_mobile {
    width: 20%;
    padding-left: 10px;
}

.sorter_mobile_block {
    width: 90%;
    display: flex;
    justify-content: space-around;
}

.product_cards_sorter {
    display: flex;
    justify-content: space-evenly;
    height: 50px;
    align-items: center;
    width: 100%;
}

.product_cards_sorter {
    font-size: 16px;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 10px;
    font-family: var(--literal-regular), sans-serif;
    color: var(--gray);
}



.product_cards_sorter > button,
.sorter_mobile_button {
    font-family: var(--literal-regular), sans-serif;
    font-size: 16px;
    color: var(--gray4);
    text-decoration: none;
    border: none;
    background: none;
}

.product_cards_sorter > button:hover,
.sorter_mobile_button:hover {
    color: var(--gray);
}

.product_card_item {
    background-color: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product_card_item_text {
    display: flex;
    gap: 10px;
}

.product_card_item_img_and_text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product_card_item_img_and_text > img {
    overflow: hidden;
}

.product_card_item.hidden {
    display: none;
}

.product_card_item_h3 {
    font-family: var(--literal-bold), sans-serif;
    font-size: 18px;
    color: var(--brown);
}

.product_card_item_p,
.product_card_item_span,
.product_card_item_h3 {
    margin: 0 20px;
}

.product_card_item_p {
    font-family: var(--literal-regular), sans-serif;
    font-size: 14px;
    color: var(--gray);
}

.product_card_item_span {
    font-family: var(--literal-bold), sans-serif;
    font-size: 16px;
    color: var(--brown);
}

.product_card_item_button {
    font-family: var(--literal-bold), sans-serif;
    background-color: var(--green);
    border: none;
    height: 40px;
    width: 200px;
    font-size: 16px;
    color: white;
    border-radius: 10px;
    transition:  background-color 0.2s;
    margin: 10px;
}

.product_card_item_button:hover {
    background-color: var(--brown);
}

.filter_checkbox1.hidden {
    display: none;
}

.filter_checkbox2.hidden {
    display: none;
}

.form_filter_checkbox > fieldset > div > input {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    accent-color: var(--green);
}


.form_filter_checkbox > fieldset > button {
    font-family: var(--literal-regular), sans-serif;
    color: var(--gray4);
    font-size: 14px;
    border: none;
    background: none;
    padding-bottom: 10px;
    transition: color 0.2s;
}

.form_filter_checkbox > fieldset > button:hover {
    color: var(--gray);
}


.product_cards_section > button {
    font-family: var(--literal-regular), sans-serif;
    color: var(--green);
    font-size: 16px;
    text-decoration: underline dotted;
    text-underline-offset: 6px;
    border: none;
    background: none;
    padding-bottom: 10px;
    transition: color 0.2s;
}

.product_cards_section > button:hover {
    color: var(--brown);
}

.product_cards_filter {
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 10px;
}

.product_cards_filter > * {
    padding: 0 10px;
}

#search-input {
    background-color: var(--white-gray);
    font-family: var(--literal-regular), sans-serif;
    color: var(--brown);
    border: none;
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
    height: 50px;
}

#search-input::placeholder {
    color: var(--gray4);
    font-size: 16px;
}

.form_filter_checkbox > fieldset {
    display: flex;
    flex-direction: column;
    border: none;
    border-bottom: 1px solid #E5E5E5;
    margin: 10px 0;
}

.form_filter_checkbox > fieldset > * {
    font-family: var(--literal-regular), sans-serif;
    color: var(--brown);
    font-size: 16px;
}

.form_filter_checkbox > fieldset > div {
    padding: 5px 0;
    display: flex;
    align-items: center;
}

.form_filter_checkbox > fieldset > legend {
    font-family: var(--literal-bold), sans-serif;
    color: var(--gray4);
    font-size: 14px;
    padding: 5px 0;
}

/*************************MAIN PAGE order_info_points***************************/

.order_info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.order_info_points {
    display: grid;
    justify-items: start;
    grid-template-columns: repeat(2, 1fr);
    margin: 20px 0;

}

.order_info_point {
    display: flex;
    align-items: center;
}

.order_info_title_h2 {
    font-family: var(--karton-regular), sans-serif;
    font-size: 24px;
    color: var(--brown);
    margin-top: 50px;
}

.order_info_title_h2 span {
    color: var(--green);
}

.order_info_h3 {
    font-family: var(--literal-bold), sans-serif;
    color: var(--green);
    font-size: 18px;
}

.order_info_p {
    font-family: var(--literal-regular), sans-serif;
    color: var(--brown);
    font-size: 16px;
}

.order_info_point_button {
    font-family: var(--literal-light), sans-serif;
    color: var(--brown);
    font-size: 50px;

    text-decoration: none;
    width: 86px;
    height: 86px;
    min-width: 86px !important;
    min-height: 86px !important;
    border: 1px solid var(--brown);
    border-radius: 50%;
    background-color: white;
    margin: 50px 30px;

    position: relative;
    transition: border 0.2s, color 0.2s;
    cursor: default;
}

/* Создаем декоративный элемент вокруг кнопки */
.order_info_point_button::before {
    content: "";
    position: absolute;
    top: -24px; /* Отступ наружу от кнопки */
    left: -24px;
    right: -24px;
    bottom: -24px;
    background-image: url(images/order-info-points/twigs.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1; /* Помещаем под кнопку */
    pointer-events: none; /* Чтобы не мешало кликам */
}

.order_info_point_button:hover {
    color: var(--green);
    border: 1px solid var(--green);
}

/*************************MAIN PAGE reviews***************************/

.reviews {
    width: 100%;
    background-color: var(--white-gray);
}

.reviews_container {
    display: flex;
    justify-content: space-between;
    padding-top: 60px;
    padding-bottom: 60px;
}

.reviews_comments {
    width: 60%;
}

.reviews_photos_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}

.reviews_photos_img {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 21px;
}

.img_review {
    border-radius: 10px;
    object-fit: cover;
    height: 168px;
    width: 168px;
}

.img_review.hidden {
    display: none;
}

.reviews_title_h2 {
    font-family: var(--karton-regular), sans-serif;
    font-size: 26px;
    color: var(--brown);
}

.reviews_title_h2 span {
    color: var(--green);
}

.reviews_btn {
    font-family: var(--literal-regular), sans-serif;
    color: var(--green);
    font-size: 16px;
    text-decoration: underline dotted;
    text-underline-offset: 6px;
    background: none;
    border: none;
    transition: color 0.2s;
}

.reviews_btn:hover {
    color: var(--brown);
}

.reviews_comment_card {
    margin-bottom: 10px;
}

.reviews_comment_card.hidden {
    display: none;
}

.reviews_comment_card_block_1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.reviews_comment_card_block_2 {
    border-bottom: 1px solid #E5E5E5;
}

.reviews_comment_card_block_2 > p {
    margin-bottom: 15px;
}

.name_reviewer {
    font-family: var(--literal-bold), sans-serif;
    color: var(--green);
}

.name_reviewer span {
    font-family: var(--literal-regular), sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--gray);
}

.text_comment {
    font-family: var(--literal-regular), sans-serif;
    font-size: 16px;
    color: var(--brown);
}

/*************************MAIN PAGE disclaimer***************************/

.disclaimer {
    background-color: var(--yellow-gray);
}

.disclaimer_container {
    padding: 50px 0;
}

.disclaimer_container > p {
    font-family: var(--literal-regular), sans-serif;
    font-size: 16px;
    color: var(--gray);
}

/*************************footer***************************/

footer {
    background-color: #746471;
}

.footer_upper_nav {
    height: 80px;
    border-bottom: 1px solid var(--shadow-brown);
}

.upper_nav_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.upper_nav_container > a {
    text-decoration: none;
    color: white;
    font-family: var(--literal-regular), sans-serif;
    font-size: 16px;
}

.upper_nav_container > a:hover {
    color: var(--green);
}

.footer_center_nav {
    margin-top: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--shadow-brown);
}

.center_nav_container {
    display: grid;
    grid-template-columns: 30% 30% 40%;
    align-items: start;
}

.footer_center_nav_block_1 > h3,
.footer_center_nav_block_2 > h3,
.footer_center_nav_block_3 > h3 {
    font-family: var(--literal-bold), sans-serif;
    font-size: 18px;
    color: var(--green);
}

.footer_center_nav_block_1 > div,
.footer_center_nav_block_2 > a {
    font-family: var(--literal-regular), sans-serif;
    font-size: 16px;
    color: white;
}

.footer_center_nav_block_2 > a {
    text-decoration: none;
}

.footer_center_nav_block_2 > a:hover {
    color: var(--green);
}

.form_call_us > * {
    font-family: var(--literal-regular), sans-serif;
    font-size: 14px;
    color: white;
}

.form_call_us {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "name phone"
    "textarea textarea"
    ". submit";
    gap: 5px;
}

#name_input {
    grid-area: name;
}

#phone_input {
    grid-area: phone;
}

.fieldset_call_us {
    border: none;
    display: flex;
    flex-direction: column;
}

.phone_label,
.name_label {
    padding-bottom: 2px;
}

.textarea {
    grid-area: textarea;
    height: 70px;
    color: var(--gray);
}

.name_input,
#phone_input,
#button_submit,
#contacts_page_button_submit,
.textarea {
    border: none;
    padding: 5px;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: var(--literal-regular), sans-serif;
}

#button_submit:hover,
#contacts_page_button_submit:hover {
    background-color: var(--brown);
}

.footer_center_nav_block_1,
.footer_center_nav_block_2 {
    display: flex;
    flex-direction: column;
}

.footer_center_nav_block_1 > div,
.footer_center_nav_block_2 > a {
    margin-bottom: 20px;
}

.footer_center_nav_block_1 > h3,
.footer_center_nav_block_2 > h3,
.footer_center_nav_block_3 > h3 {
    margin-bottom: 15px;
}

#button_submit,
#contacts_page_button_submit {
    grid-area: submit;
    background-color: var(--green);
    font-family: var(--literal-bold), sans-serif;
    font-size: 16px;
    height: 40px;
}

.footer_bottom_nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 60px;
    font-family: var(--literal-regular), sans-serif;
    color: var(--shadow-brown);
}

.footer_bottom_nav > div > a {
    text-decoration: none;
    color: var(--shadow-brown);
}

.footer_bottom_nav > div > a:hover {
    color: var(--green);
}

.footer_bottom_nav > div {
    display: flex;
    justify-content: center;
    gap: 5px;
}

/******************************CONTACTS PAGE******************************************/

.contacts_page_nav,
.contacts_page {
    background-color: var(--white-gray);
}

.contacts_page_grid {
    display: grid;
    width: 100%;
    height: auto;
    justify-content: center;
    grid-template-columns: 20% 80%;
    gap: 10px;
    grid-template-areas:
    "info map"
    "call_us call_us";
}

.contacts_page_info {
    grid-area: info;
}

.contacts_page_map {
    grid-area: map;
}

.contacts_page_map > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.contacts_page_call_us {
    grid-area: call_us;
}

.contacts_page_nav_container {
    display: flex;
    justify-content: flex-start;
    font-family: var(--literal-regular), sans-serif;
    font-size: 14px;
    color: var(--gray);
    gap: 5px;
    padding-top: 10px;
}

.contacts_page_info_block_border {
    border: 1px solid #dfdfdf;
}

.contacts_page_nav_container > a {
    text-decoration: none;
    color: var(--gray);
}

.contacts_page_h2 {
    font-family: var(--karton-regular), sans-serif;
    font-size: 24px;
    color: var(--brown);
    margin-bottom: 20px;
}

.contacts_page_nav_container > a:hover {
    color: var(--brown);
}

.contacts_page_container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contacts_page_info,
.contacts_page_call_us {
    background-color: white;
    border-radius: 10px;

}

.contacts_page_info_block {
    display: flex;
    flex-direction: column;
    word-break: break-all;
    padding: 20px 10px;
    font-family: var(--literal-regular), sans-serif;
    font-size: 14px;
    color: var(--gray);
}

.contacts_page_info_block span {
    font-family: var(--literal-bold), sans-serif;
    font-size: 16px;
    color: var(--brown);
}

.contacts_page_call_us {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.contacts_page_call_us >  h3 {
    font-family: var(--literal-bold), sans-serif;
    font-size: 18px;
    color: var(--brown);
    margin: 20px 0;
}

.contacts_page_fieldset_call_us {
    border: none;
    background: none;
}

#contacts_page_name_input,
#contacts_page_email_input,
#contacts_page_phone_input,
#contacts_page_textarea {
    font-family: var(--literal-regular), sans-serif;
    font-size: 16px;
    color: var(--gray4);
    background-color: #FAFAFA;
    border-radius: 5px;
    border: 1px solid var(--gray4);
    height: 40px;
    padding-left: 10px;
}

#contacts_page_textarea {
    padding-top: 8px;
}

#contacts_page_textarea {
    height: 128px;
}

.contacts_page_form_call_us {
    width: 100%;
    height: 220px;
    display: grid;
    justify-content: center;
    grid-template-columns: 30% 50%;
    grid-template-rows: 20% 20% 20% 20%;
    grid-template-areas:
    "name textarea"
    "email textarea"
    "phone textarea"
    ". submit";
}

#contacts_page_name_input {
    grid-area: name;
    width: 95%;
}

#contacts_page_email_input {
    grid-area: email;
    width: 95%;
}
#contacts_page_phone_input {
    grid-area: phone;
    width: 95%;
}
#contacts_page_textarea {
    grid-area: textarea;
}
#contacts_page_button_submit {
    grid-area: submit;
    width: 30%;
    color: white;
    justify-self: end;
}

/******************************DISCOUNTS PAGE******************************************/

.discounts {
    display: flex;
    flex-direction: column;
    background-color: var(--white-gray);
}

.discounts_container {
    padding: 5px;
}

.discounts_cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    margin-bottom: 50px;
}

.discounts_h2 {
    font-family: var(--karton-regular), sans-serif;
    font-size: 24px;
    color: var(--brown);
    margin-bottom: 20px;
    margin-top: 20px;
}

.discount_card {
    background-color: white;
    border-radius: 10px;
}

.discount_card > img {
    width: 100%;
}

.discount_card_text {
    font-family: var(--literal-regular), sans-serif;
    padding: 10px 5px 20px 10px;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.discount_card_text_deadline {
    font-size: 16px;
    color: var(--gray);
}

.discount_card_text_deadline span,
.discount_card_text_info span {
    font-family: var(--literal-bold), sans-serif;
}

.discount_card_text_info {
    font-size: 18px;
    color: var(--brown);
}

/******************************MOBILE VERSION******************************************/

@media (max-width: 1114px) {

    .nav_maps,
    .tel2 {
        display: none;
    }

    .nav_info {
        padding: 5px;
    }

    .nav_info_container_1,
    .nav_info_container_3 {
        display: none;
    }

    .nav_info_container_4,
    .nav_info_container_5 {
        display: flex;
    }

    .nav_info_container_4 {
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }

    .advantages {
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .product_cards_sorter_mobile,
    .sorter_mobile_button {
        font-size: 14px;
    }

    .product_cards_items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .reviews,
    .disclaimer,
    footer {
        padding: 10px;
    }

    .contacts_page_nav_container {
        padding-left: 5px;
    }

    .contacts_page_grid {
        padding: 5px;
    }

    .contacts_page_info_block,
    .contacts_page_info_block span {
        font-size: 14px;
    }

    .discounts_cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 925px) {
    .reviews_container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        justify-items: center;
        gap: 10px;
    }

    .reviews_comments {
        width: 90%;
    }

    .center_nav_container {
        display: grid;
        gap: 10px;
        grid-template-columns: 40% 40%;
        grid-template-rows: 1fr 1fr;
        justify-content: center;
        grid-template-areas:
        "block_1 block_2"
        "block_3 block_3";
    }

    .footer_center_nav_block_1 {
        grid-area: block_1;
    }

    .footer_center_nav_block_2 {
        grid-area: block_2;
    }

    .footer_center_nav_block_3 {
        grid-area: block_3;
    }

    .contacts_page_grid {
        display: flex;
        flex-direction: column;
        padding: 5px;
    }
}

@media (max-width: 750px) {
    .order_info_points {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .product_cards_container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .product_cards_sorter_mobile {
        width: auto;
    }

    .sorter_mobile_block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: auto;
    }

    .product_cards_sorter.sorter_and_filter_for_mobile {
        display: flex;
        height: 100px;
        width: 95%;
        align-items: center;
        justify-content: space-around;
    }

    .product_cards_filter {
        display: flex;
        flex-direction: column;
        width: 95%;
    }

    .form_filter_checkbox {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    #contacts_page_button_submit {
        width: auto;
    }

    .discounts_cards {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 530px) {
    .main_page > h1 {
        font-size: 25px;
    }

    .h1 {
        font-size: 50px;
    }

    .center_nav_container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .product_cards_items {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .contacts_page_h2 {
        margin-top: 20px;
    }

    .contacts_page_form_call_us {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-bottom: 20px;
        padding: 20px 5px;
    }

    #contacts_page_textarea {
        min-height: 80px;
        width: 100%;
        resize: vertical;
    }

    #contacts_page_name_input,
    #contacts_page_email_input,
    #contacts_page_phone_input,
    #contacts_page_textarea {
        width: 100%;
    }

    #contacts_page_button_submit {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 410px) {
    .main_page > h1 {
        font-size: 20px;
    }

    .h1 {
        font-size: 35px;
        font-weight: bold;
    }

    .advantages {
        height: auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .reviews_container {
        display: flex;
        flex-direction: column;
    }

    .reviews_photos_img {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .form_call_us {
        display: flex;
        flex-direction: column;
    }

    .upper_nav_container {
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .footer_upper_nav {
        height: auto;
    }

    .upper_nav_container {
        display: flex;
        gap: 5px;
    }
}