body {
    position: relative;

    width: 100%;
    height: 435%;

    min-width: 800px;
    min-height: 600px;

    background: #FDFAF3;

}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

body a {
    text-decoration: none;
}

body img {
    transition: transform 1s ease;
    cursor: pointer;
}

body img:hover {
  transform: scale(1.05);
}

header {
    width: 100%;
    height: 4%;

    min-width: 800px;
    min-height: 44px;

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

    border-bottom: 1px solid black;
}

header div {
    display: flex;

    gap: 1vw;

    font-family: Open Sans, cursive;
    font-size: 100%;
    font-weight: 1000;
    line-height: 2vh;

    margin-left: 3vw;
    margin-right: 3vw;

    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

header div a {
    text-decoration: none;
    color: black;

    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 80%;

    line-height: 1.5vh;
    text-align: center;

}

header div a:hover {
    color: gray;
}

main {
    display: flex;
    flex-direction: column;
}

main div {
    position: relative;
}

.overlay-text {
    position: absolute;

    color: white;
    bottom: 10vh;
    left: 5vw;

    max-width: 30vw;

    font-family: Dharma Gothic E, sans-serif;
    font-size: 4.5vw;
    font-weight: 700;
    line-height: 14vh;
    text-align: left;

    text-underline-position: from-font;
    text-decoration-skip-ink: none;

    transition: color 1s ease;

    z-index: 1;
}

#main_header_img {
    width: 97.4vw;
    height: 95vh;

    min-width: 774px;

    left: -0.1vw;

    display: block;

    margin-left: auto;
    margin-right: auto;

    position: relative;

    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;

    transition: none;
    transform: none;
}

.main_products {
    width: 31.6vw;
    height: 64vh;

    min-width: 251px;

    display: inline-block;
    border: 1px solid black;

    margin-top: 4vh;
    margin-left: 4%;

    position: relative;
}

.product + .product {
    margin-left: 1vw;
}

.product-grid {
    display: flex;
    flex-wrap: wrap;
}

.product > .overlay-text {
    bottom: 1vh;
    left: 4vw;
    font-size: 2.5vw;
}

.topics, .subpage_topics {
    width: 80vw;
    height: 50vh;
    left: 0.5vw;
    top: 10vh;

    font-family: Dharma Gothic E, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 11vw;
    line-height: 76%;
    text-transform: uppercase;

    min-height: 150px;

    position: relative;

    transition: color 1s ease;
}

.topics {
    color: black;
}

.subpage_topics {
    color: white;
}

#final_topic {
    color: burlywood;
    transition: color 1s ease;
}

#final_topic:hover {
    color: coral;
}

.image-wrapper {
    display: flex;
    justify-content: center;

    gap: 1.7%;
    width: 100vw;
    min-width: 800px;
}

.foot-wrapper {
    display: flex;
    justify-content: left;

    gap: 0.5vw;
    width: 100vw;

    margin-top: -20vh;
    margin-left: 1vw;
}

.executive_products {
    width: 30vw;
    height: 50vh;
    object-fit: cover;
    margin-top: 7vh;
    border: 1px solid black;
    min-width: 240px;
    min-height: 200px;
}

.other_products {
    width: 23.8vw;
    height: 45vh;
    object-fit: cover;
    margin-top: 7vh;
    border: 1px solid black;
    min-width: 190px;
    min-height: 200px;
}

.separator {
    width: 1px;
    height: 71vh;
    background-color: black;
    min-height: 280px;
}

.horizontal-separator {
    width: 100vw;
    min-width: 800px;
    height: 1px;
    background-color: black;
}

.short-horizontal-separator {
    margin-top: 6vh;
    width: 23.7vw;
    height: 1px;
    background-color: black;
}

.image-caption {
    text-align: left;
    margin-left: -3px;
    font-family: Dharma Gothic E, sans-serif;
    font-size: 3vw;
    font-weight: 700;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    transition: color 1s ease;
}

.image-cost {
    font-family: Recoleta Alt, serif;
    font-size: 20px;
    font-weight: 500;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    transition: color 1s ease;
}

#food_presentation {
    width: 66.78vw;
    height: 65vh;
    border: 1px solid black;
}

#food_presentation_topic {
    text-align: center;
    top: 10vh;
    width: 50%;

    font-family: Dharma Gothic E, sans-serif;
    font-size: 5vw;
    font-weight: 700;
    line-height: 150%;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

    transition: color 1s ease;
}

.presentation-topic {
    display: flex;
    flex-direction: row;
    justify-content: right;
}

.image-caption:hover, .image-cost:hover, .topics:hover, #food_presentation_topic:hover {
    color: gray;
}

.subpage_topics:hover {
    color: lightyellow;
}

.overlay-text:hover {
    color: coral;
}

footer {
    display: flex;
    flex-direction: column;
    gap: 10vh;
    font-family: sans-serif;
    background-color: burlywood;
    border: 1px solid black;
    margin-top: 10vh;
    width: 100vw;
    height: 37vh;
    min-height: 470px;
    min-width: 860px;
}

.top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.email {
    padding-top: 3%;
    padding-left: 3%;
    font-size: 4vh;

    font-weight: 500;
    line-height: 1.5vh;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.email a {
    color: black;
    font-family: Open Sans, cursive;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: fadeIn 2s ease-in-out;
}

.links-container {
    display: flex;
    gap: 20px;
}

.link-column {
    display: flex;
    flex-direction: column;
    line-height: 200%;
}

.link-column a, .copyright, .social-links a {
    color: black;
    font-weight: 500;
    font-size: 100%;
    font-family: Open Sans, cursive;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: fadeIn 2s ease-in-out;
}

.logo {
    text-align: center;
    font-size: 11vw;
    font-weight: 1000;

    color: #FDFAF3;

    font-family: Open Sans, cursive;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: fadeIn 2s ease-in-out;
    line-height: 2vh;

    margin-top: 10vh;
    margin-bottom: 10vh;
}


.bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}

.social-links {
  display: flex;
  gap: 10px;
}

footer a {
    text-decoration: none;

    font-size: 1.3vh;
    font-family: 'Roboto', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: fadeIn 2s ease-in-out;
}

footer a:hover {
  color: coral;
}

.chat-button {
    position: fixed;
    bottom: 5vh;
    width: 60vw;
    right: 20vw;
    background-color: rgba(255, 192, 203, 0.7);
    border-radius: 50px;
    color: black;
    padding: 2vh 10vw;
    cursor: pointer;
    border: 1px solid black;
    box-shadow:
            0 1px 5px rgba(255,255,255,1),
            0 -1px 5px rgba(255,255,255,1),
            -1px 0 5px rgba(255,255,255,1),
            1px 0 5px rgba(255,255,255,1);
    text-align: center;
    font-family: 'Roboto', serif;
    text-shadow:
                -1px -1px 0 rgba(255, 255, 255, 0.5),
                 1px -1px 0 rgba(255, 255, 255, 0.5),
                -1px  1px 0 rgba(255, 255, 255, 0.5),
                 1px  1px 0 rgba(255, 255, 255, 0.5);
    animation: fadeIn 2s ease-in-out;
    font-size: 1.4vw;
    font-weight: 900;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.chat-popup {
    position: fixed;
    bottom: 8vh;
    right: 20vw;
    width: 60vw;
    height: 50vh;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid lightgray;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    box-shadow:
            0 1px 5px rgba(255,255,255,1),
            -1px 0 5px rgba(255,255,255,1),
            1px 0 5px rgba(255,255,255,1);
    display: none;

    z-index: 9999 !important;
}

.chat-header {
    background-color: transparent;
    color: white;
    margin-top: 1vh;
    padding: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: none;
    border-radius: 50px;
}

.chat-content {
    overflow-y: auto;
    height: calc(100% - 4.5vh);
    margin-left: 20px;
    margin-right: 20px;
}

.chat-messages {
    height: calc(100% - 4.5vh);
    display: block;
    overflow-y: scroll;
}

.b-message, .u-message {
    text-align: left;
    font-family: Dharma Gothic E, serif;
    font-weight: 700;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: white;
}

.u-message {
    color: white;
}

.user-message, .bot-message {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    overflow-y: auto;
}

.bot-message a {
    color: red;
}

.user-message, .bot-message {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
}

#message-input {
    position: fixed;
    right: 20vw;
    width: 60vw;
    bottom: 3vh;
    color: white;
    font-size: 1.6vh;
    font-family: Dharma Gothic E, serif;
    padding-left: 2vw;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border: 2px solid lightgray;
    height: 5.2vh;
    box-shadow:
            0 1px 5px rgba(255,255,255,1),
            -1px 0 5px rgba(255,255,255,1),
            1px 0 5px rgba(255,255,255,1);

    background-color: rgba(0, 0, 0, 0.5);
}

#message-input::placeholder {
    color: white;
    font-size: 1.6vh;
    font-family: Dharma Gothic E, serif;
}

#send-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#closeChat {
    background: none;
    border-radius: 5px;
    color: white;
    font-family: Dharma Gothic E, serif;
    border: none;
    font-size: 2vw;
    font-weight: 900;
    cursor: pointer;
}

#closeChat:hover {
    transform: scale(1.1);
}

#closeChat:active {
    transform: scale(0.95);
}

#wishlist-container, #bag-container {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.wishlist-items, .bag-items {
    font-family: Dharma Gothic E, sans-serif;
    font-size: 3vw;
    font-weight: 700;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    transition: color 1s ease;
    margin-top: 3vh;
}

#total-cost-container {
    font-family: Dharma Gothic E, sans-serif;
    font-size: 3vw;
    font-weight: 700;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    transition: color 1s ease;
    margin-top: 10vh;
    color: black;
}

.remove-button, .to-bag-button, .add-bag-button, .remove-bag-button, .remove-bag-all-button {
    font-family: Dharma Gothic E, sans-serif;
    font-size: 3vw;
    font-weight: 700;
    background: none;

    position: absolute;
    border: none;
    transition: color 1s ease;
}

.remove-button {
    right: 15vw;
}

.to-bag-button {
    right: 1vw;
}

.add-bag-button {
    right: 36vw;
}

.remove-bag-button {
    right: 22vw;
}

.remove-bag-all-button {
    right: 1vw;
}

.wishlist-items:hover, .bag-items:hover, .remove-button:hover, .to-bag-button:hover, .add-bag-button:hover, .remove-bag-button:hover, .remove-bag-all-button:hover{
    color: pink;
}

.wishlist-button {
    background: transparent;
    border: none;
    cursor: pointer;
    margin-left: -0.5vw;
}

.heart {
    fill: transparent;
    stroke: black;
    stroke-width: 2;
    transition: stroke 0.2s;
}

        .filled {
            stroke: red; /* Цвет при добавлении в избранное */
        }

.wishlist-button:hover .heart {
    stroke: red;
}

#berries_topic:hover, #fruits_topic:hover, #vegetables_topic:hover, #meat_topic:hover, #wishlist_topic:hover, #bag_topic:hover, #other_topic, #relevant_topic {
    color: white;
}

#berries_topic {
    background-image: url('../static/imgs/violet_rainbow_logo.jpeg');
}

#fruits_topic {
    background-image: url('../static/imgs/peach_rainbow_logo.jpg');
}

#vegetables_topic {
    background-image: url('../static/imgs/green_rainbow_logo.jpeg');
}

#meat_topic {
    background-image: url('../static/imgs/red_rainbow_logo.jpg');
}

#wishlist_topic {
    background-image: url('../static/imgs/pink_rainbow_logo.jpg');
}

#bag_topic {
    background-image: url('../static/imgs/bag_rainbow_logo.jpg');
}

#other_topic {
    background-image: url('../static/imgs/brown_rainbow_logo.webp');
}

#relevant_topic {
    background-image: url('../static/imgs/relevant_rainbow_logo.jpeg');
}

.image-background {
    background-size: cover;
    background-position: center;
    height: 40vh;
    width: 100vw;
    position: relative;
    z-index: 0;
}

#results-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: auto;
}