.wrap {
    font-family: Templato, sans-serif;
    font-size: 16px;
    font-weight: 300;
    background: #F5F8FB;
    color: #2D2D2D;
}

header {
    position: relative;
    background: #FFF;
    z-index: 9;
}

.header {
    max-width: 75em;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 1em;
    align-items: center;
    gap: 1em;
}

main.content {
    position: relative;
    z-index: 5;
}

main.content.active {
    z-index: -1;
}

main.content.show {
    z-index: 101;
}

.burger {
    grid-row: 1;
    grid-column: 5 / 6;
    align-self: center;
    background: var(--default-color);
    color: #FFF;
    text-align: center;
    padding: .75em 1em;
    border-radius: .2em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .75em;
    border: 1px solid var(--default-color);
    font-size: clamp(0.875em, 1vw, 1em);
    cursor: pointer;
    transition: .3s;
}

.burger:hover {
    border-color: var(--default-color-hover);
    background: var(--default-color-hover);
}

.header__logo {
    grid-row: 1;
    grid-column: 1;
    width: 3em;
    height: 3em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    box-sizing: border-box;
    border-radius: .2em;
}

.header__logo img {
    max-height: 2.5em;
}

.header__logo a {
    color: #2A2A2A;
}

.header__menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vw;
    z-index: 100500;
}

.header__menu.active {
    display: block;
}

.header__links {
    display: flex;
    justify-content: space-around;
    gap: 1em;
    align-items: center;
    width: 100%;
}

.search {
    position: relative;
    grid-row: 2;
    grid-column: 1 / 6;
    font-size: clamp(0.875em, 1vw, 1em);
}

.search__result {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #FFF;
    z-index: 99;
    display: none;
    border-radius: 0 0 .4em .4em;
}

.search__result.loading {
    display: flex;
    padding: 1em;
    flex-wrap: wrap;
    gap: 1em;
    box-shadow: var(--medium-shadow);
}

.search__result > span {
    color: rgba(0, 0, 0, .5);
}

.search__result > i {
    display: inline-flex;
    color: var(--default-color);
    animation: spin 1s linear infinite;
    font-size: 1em;
    width: 1.375em;
    height: 1.375em;
    justify-content: center;
    align-items: center;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

button.search__submit {
    box-shadow: none;
    position: absolute;
    top: .35em;
    right: .35em;
    display: flex;
    gap: .5em;
    align-items: center;
    border: 0;
    background: #FFF;
    color: #AFAFAF;
    border-radius: .2em;
    padding: .5em;
    cursor: pointer;
    transition: .3s;
}

button.search__submit:hover {
    background: #F2F5F9;
}

button.search__submit i {
    transform: unset;
}

button.search__submit span {
    display: none;
}

.search__input {
    display: block;
    padding: .75em 1em;
    border-radius: .2em;
    border: 1px solid var(--light-black);
    width: 100%;
    box-sizing: border-box;
}

form.search__form {
    position: relative;
    display: flex;
    gap: 1em;
    z-index: 101;
}

form.search__form label {
    display: none;
}

.short-search, .short-search__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.short-search__item {
    position: relative;
    display: flex;
    gap: 1em;
    align-items: center;
    border-bottom: 1px solid var(--light-black);
    padding: 0 1em 1em 1em;
}

.short-search__item:last-child {
    border-bottom: 0;
    padding: 0 1em;
}

.short-search__empty {
    background: #F2F5F9;
    padding: .5em;
    border-radius: .5em;
    text-align: center;
}

.short-search__photo {
    width: clamp(4em, 1vw, 4em);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F2F5F9;
    height: 4em;
    border-radius: .4em;
    overflow: hidden;
}

.short-search__photo img {
    width: 100%;
    height: 4em;
    object-fit: cover;
    border-radius: .4em;
}

.banner__caption {
    position: absolute;
    top: 10px;
    left: 100px;
    color: #fff;
    width: 29.813em;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    gap: 20px;
    flex-direction: column;
    justify-content: center;
    z-index: 9;
}

@media (max-width: 600px) {
    .banner__caption {
        width: auto;
        left: 50px;
        padding-right: 50px;
    }

}

.banner__title {
    font-size: 1.813em;
}

.banner__list::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
}

.short-search__photo i {
    transform: scale(1.25);
    color: var(--light-black);
}

.short-search__caption div {
    font-size: clamp(1.2em, 1vw, 1.2em);
    padding-bottom: .25em;
}

.short-search__caption span {
    display: block;
    font-size: clamp(.875em, 1vw, 1em);
    color: rgba(0, 0, 0, .5);
}

.header__panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1em;
    background: #FFF;
    border-top: 1px solid var(--light-black);
    z-index: 98;
}

a.header__links-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: .25em;
}

span.header__links-name {
    color: rgba(0, 0, 0, .35);
    font-size: .875em;
}

span.header__links-count {
    border-radius: 50%;
    width: .4em;
    height: .4em;
    display: inline-block;
    box-sizing: border-box;
    color: var(--default-color);
    position: absolute;
    top: -.5em;
    right: 0;
}

span.header__links-count.active {
    background: var(--default-color);
}

.short-search__speller {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.short-search__speller-item {
    cursor: pointer;
    transition: .3s;
    color: rgba(0, 0, 0, .6);
}

.short-search__speller-item:hover {
    color: rgba(0, 0, 0, 1);
}

h1.title {
    font-size: clamp(1.7em, 1vw, 1.7em);
}

.header__links-item i {
    color: #2A2A2A;
    font-size: 1.3em;
}

.header__container {
    display: flex;
    background: #FFF;
    position: relative;
    width: 100%;
    min-height: calc(var(--vh, 1vh) * 100);
}

.breadcrumbs {
    max-width: 100%;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1em;
}

.breadcrumbs i {
    font-size: .5em;
}

.breadcrumbs i:last-child {
    display: none;
}

.breadcrumbs__item a {
    color: #5A5A5A;
    font-size: .875em;
}

.breadcrumbs.expanded {
    max-height: none;
    white-space: normal;
    flex-wrap: wrap;
}

.speed__bar {
    max-width: 75em;
    margin: auto;
    overflow-x: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    padding: .75em;
}

.speed__bar::-webkit-scrollbar {
    height: 2px;
}

.speed__bar::-webkit-scrollbar-track {
    background: #F1F2F6;
}

.speed__bar::-webkit-scrollbar-thumb {
    background-color: #DADDE2;
    border-radius: 2px;
    border: 0;
}

.speed__bar-item {
    width: calc(50% - .5em);
    background: #FFF;
    padding: 1em;
    border-radius: .4em;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .5em;
    border: 1px solid var(--light-black);
    overflow: hidden;
    transition: .3s;
}

.speed__bar-item:hover {
    -webkit-box-shadow: 0 0 8px 0 rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0 0 8px 0 rgba(34, 60, 80, 0.2);
    box-shadow: 0 0 8px 0 rgba(34, 60, 80, 0.2);
}

.speed__bar-photo {
    position: relative;
    transform: translate(1em, 1em);
    width: 100%;
    height: 8em;
}

.speed__bar-photo::before {
    content: '';
    width: 9em;
    height: 8em;
    background: #F2F5F9;
    display: block;
    border-radius: 50%;
    position: absolute;
    transform: translate(2em, 1em);
    transition: transform 0.2s cubic-bezier(0.12, 0, 0.39, 0);
}

.speed__bar-item:hover .speed__bar-photo::before {
    transform: scale(1.05);
}

.speed__bar-photo img {
    position: relative;
    z-index: 5;
    width: 5em;
    height: 5em;
    object-fit: contain;
    transform: translate(2em, 2em);
}

.speed__bar-name {
    color: #2A2A2A;
    font-size: clamp(0.8em, 1vw, 1em);
    position: absolute;
    top: 1em;
    left: 1em;
    text-align: left;
    padding: 0 .5em;
}

a.speed__bar-link {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    height: 100%;
}

.speed__buttons {
    padding: 1em;
    display: none;
    justify-content: flex-end;
    gap: 1em;
}

.speed__buttons button {
    border: 0;
    background: var(--default-color);
    color: #FFF;
    cursor: pointer;
    transition: .3s;
    border-radius: .4em;
    padding: .5em .75em;
}

.speed__buttons button:disabled {
    background: var(--light-black);
    color: #2A2A2A;
    cursor: default;
}

.scrollToTop.active {
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
}

footer {
    padding: 2em 1em 4.55em 1em;
    background: #FFF;
    width: 100%;
    margin-top: 2em;
}

.footer__company {
    color: rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.footer__company-name {
    font-weight: 500;
    color: #2A2A2A;
    padding-bottom: .45em;
}

.footer__company-item {
    font-size: .875em;
}

.footer__company-year {
    color: #2A2A2A;
    font-size: .875em;
}

.hidden {
    display: none !important;
}

/* Скрываем стандартный чекбокс */
.custom-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Стили для метки, которая заменяет чекбокс */
.custom-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    color: #333;
}

/* Стилизованный квадрат вместо чекбокса */
.custom-label::before {
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.5em;
    border: 2px solid var(--light-black);
    border-radius: 0.2em;
    background-color: #fff;
    transition: background-color 0.3s, border-color 0.3s;
    transform: translateY(.4em);
}

/* Состояние активного чекбокса */
.custom-checkbox:checked + .custom-label::before {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}

/* При наведении изменяем цвет */
.custom-label:hover::before {
    border-color: var(--primary-color);
}

.range-slider {
    position: relative;
    width: 100%;
}

.range-slider input[type="range"] {
    position: absolute;
    pointer-events: none;
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}

.range-slider input[type="range"]::-webkit-slider-thumb {
    pointer-events: all;
    width: 15px;
    height: 15px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
}

.range-slider input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
}

.range-slider input[type="range"]:focus {
    outline: none;
}

.empty {
    width: 100%;
    background: var(--light-black);
    text-align: center;
    padding: 2em;
    border-radius: .4em;
}

.form__group {
    padding: 0 0 1em;
}

.form__group label {
    padding-bottom: 1em;
    display: block;
}

.form__button {
    padding: 1em 0;
}

button.form__submit {
    background: var(--additional-color);
    color: #FFF;
    border: 0;
    padding: .75em 2em;
    border-radius: .4em;
    cursor: pointer;
    transition: .3s;
}

button.form__submit:hover {
    background: var(--default-color-hover);
}

.pagination {
    width: 100%;
    padding: 1em;
    display: flex;
    justify-content: end;
    gap: .5em;
}

.pagination__item a {
    color: #2A2A2A;
    background: #FFF;
    min-width: 2em;
    text-align: center;
    padding: .5em 0;
    border: 1px solid var(--light-black);
    border-radius: .4em;
    cursor: pointer;
    display: inline-block;
    transition: .3s;
}

.pagination__item a:hover {
    background: #F2F5F9;
}

.pagination__item.active a {
    background: var(--default-color);
    border: 1px solid var(--default-color);
    color: #FFF;
    cursor: default;
}

.footer {
    display: flex;
    gap: 2em;
    flex-wrap: wrap;
    max-width: 75em;
    margin: auto;
}

.footer__logo {
    width: 100%;
}

.footer__logo a {
    display: flex;
    gap: 1em;
    align-items: center;
}

.footer__logo img {
    width: 4em;
}

.footer__item {
    width: 100%;
}

.footer__item h3 {
    font-weight: 500;
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: .75em;
}

.footer__links a {
    color: var(--default-color);
    transition: .3s;
}

.footer__links a:hover {
    color: var(--default-color-hover);
}

.footer__copy {
    padding: 1em 0;
    font-size: .875em;
}

@media (max-width: 768px) {
    .footer__logo,
    .footer__item,
    .footer__company {
        flex: 1 1 calc(50% - 15px); /* 2 колонки на мобильных */
        min-width: 0;
    }

    /* Дополнительные адаптивные стили */
    .footer {
        gap: 15px;
        padding: 15px;
    }

    .footer__links {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .footer__icon {
        margin-top: 10px;
        display: flex;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .footer__icon--container {
        width: 35px;
        height: 35px;
    }
}

.banner {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    background: #FFF;
    padding: 0 1em 2em;
}

.banner__container {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 1em;
}

.banner__list {
    display: flex;
    flex-direction: row;
    width: 100%;
    transition: transform 0.3s ease-in-out;
    position: relative;
    z-index: 5;
}

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

.banner__item {
    width: 100%;
    transition: transform 0.3s ease-in-out;
    flex: 0 0 auto;
    height: 29.75em;
    position: relative;
}

.banner__item img {
    display: block;
    width: 100%;
    height: 29.75em;
    object-fit: cover;
}

.banner__action button {
    position: absolute;
    top: calc(50% - 2.5em);
    border: 0;
    height: 3em;
    width: 2em;
    background: #FFF;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    z-index: 9;
}

@media (max-width: 500px) {
    .prod__item {
        width: calc(50% - 0.75em); /* Две карточки в ряд на меньших экранах */
    }
}

.prod__item {
    background: #FFF;
    border: 1px solid var(--light-black);
    padding: .75em;
    border-radius: 1em;
    position: relative;
    transition: .3s;
    display: flex;
    flex-direction: column; /* Позволяет управлять вертикальным расположением */
    height: 100%; /* Задает высоту по содержимому */
}

/* Установите фиксированную высоту для карточек */
.prod__item {
    height: 600px; /* Пример фиксированной высоты */
}

.prod__caption {
    padding: 1em;
    position: relative;
}

.prod__wishlist {
    position: absolute;
    top: 2em;
    right: 2em;
    transform: scale(1.5);
    z-index: 9;
}

.prod__price {
    display: inline-flex;
    font-size: 1.75em;
    font-weight: 600;
}

.prod__wishlist.active {
    color: #ff0000;
    transform: scale(1.65);
}

.prod__caption h4 {
    font-size: 1.25em;
    margin: 0px;
    padding-bottom: 1em;
}

.prod__cart {
    position: relative;
    z-index: 9;
    margin-top: 1em;
    width: 100%;
    text-align: center;
    background: var(--default-color);
    color: #fff;
    padding: 1.5em;
    border-radius: .5em;
    cursor: pointer;
    transition: .3s;
}

.prod__cart:hover {
    background: var(--default-color-hover);
}

.prod__price i {
    font-size: 0.5em;
}

.prod__item img {
    width: 100%;
    height: 22em;
    object-fit: cover;
    display: block;
}

.prod {
    padding: 0em .75em;
}

h4.prod__title {
    font-size: 2em;
    text-align: center;
}

.prod__list {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    padding: 0em 0;
    max-width: 1950px; /* Устанавливаем максимальную ширину */
    margin: auto; /* Центрируем контейнер */
    max-width: 73.125rem;
}

button.banner__action-prev {
    left: .95em;
    border-radius: 0 2em 2em 0;
}

button.banner__action-next {
    right: .95em;
    border-radius: 2em 0 0 2em;
    justify-content: end;
}

section.c-brands {
    background: #FFF;
}

.c-brands__container {
    max-width: 75em;
    margin: auto;
    padding: 2em .75em;
}

.c-brands__row {
    display: flex;
    gap: 1em;
    width: 100%;
    overflow-x: auto;
    padding: 1em;
}

.c-brands__row::-webkit-scrollbar {
    height: 2px;
}

.c-brands__row::-webkit-scrollbar-track {
    background: #F1F2F6;
}

.c-brands__row::-webkit-scrollbar-thumb {
    background-color: #DADDE2;
    border-radius: 2px;
    border: 0;
}

.c-brands__column {
    width: 10em;
    border-radius: .5em;
    border: 1px solid rgba(0, 0, 0, .1);
    padding: 1em;
    transition: .3s;
}

.c-brands__column:hover {
    box-shadow: var(--light-shadow);
}

.c-brands__column img {
    width: 100%;
    height: 4em;
    object-fit: contain;
    border-radius: .5em;
}


@media (min-width: 456px) {

    .speed__bar-item {
        width: calc(33.333333% - .75em);
    }
}


@media (min-width: 620px) {

    .footer__item {
        width: calc(50% - 1em);
    }
}

@media (min-width: 768px) {


    .only-mobile {
        display: none !important;
    }

    .header {
        grid-template-columns: repeat(10, 1fr);
        gap: 0 1em;
    }

    .burger {
        grid-column: 2 / 4;
        padding: .75em;
    }

    .header__links {
        justify-content: flex-end;
        gap: 2em;
    }

    .header__links-item.item--profile {
        font-weight: 500;
        font-size: clamp(.875em, 1vw, 1em);
    }

    .header__links-item.item--profile span.header__links-name {
        color: #FFF;
        display: block;
        background: var(--additional-color);
        padding: .75em 1.25em;
        border-radius: .4em;
        transition: .3s;
        border: 1px solid var(--additional-color);
        box-sizing: border-box;
        font-size: 1em;
    }

    .header__links-item.item--profile:hover span.header__links-name {
        background: var(--additional-color-hover);
        border-color: var(--additional-color-hover);
    }

    .header__links-item.item--profile i {
        display: none;
    }

    .header__panel {
        position: relative;
        grid-column: 6 / 11;
        border: 0;
        display: flex;
        align-items: center;
        padding: .75em 0;
    }

    section.search {
        grid-column: 1 / 11;
    }

    button.search__submit span {
        display: block;
    }

    .speed__bar {
        flex-wrap: nowrap;
    }

    .speed__bar-item {
        min-width: 9.25em;
        width: auto;
        padding: 3em 1em 1em;
    }

    .speed__bar-photo {
        width: 7em;
        height: 6em;
    }

    .speed__buttons {
        display: flex;
    }

    .speed__bar-photo img {
        transform: translate(1em, .5em);
    }

    .speed__bar-photo::before {
        transform: translate(0, 0);
    }

    footer {
        padding: 4em 1em;
        border-top: 1px solid var(--light-black);
    }

    .footer__logo, .footer__item {
        width: calc(33.333% - 2em);
    }

    .footer__item h3 {
        margin: 0;
        padding-bottom: 1em;
    }
}

@media (min-width: 1024px) {
    .prod__item {
        width: calc(33.333333% - 0.75em); /* Три карточки в ряд */
    }
}

@media (max-width: 800px) {
    .prod__item {
        width: 100%;

    }
}

.header {
    grid-template-columns: 3em 9em 16em repeat(9, 1fr);
    padding: .1em .75em;
}

.header.header--owner {
    grid-template-columns: 3em 9em 8em repeat(9, 1fr);
}

.header__logo {
    justify-content: flex-start;
}

.header__logo i {
    display: inline-flex;
    padding: .75em;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--default-color);
    color: var(--default-color);
    border-radius: .2em;
}

.burger {
    grid-row: 1;
    grid-column: 2;
    padding: .75em;
    background: var(--default-color);
    color: #FFF;
    transition: .3s;
}

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

.burger span {
    display: none;
}

section.search {
    grid-row: 1;
    grid-column: 3 / 9;
}

.search__result {
    top: calc(100% - 1em);
    padding: 2em 1em 1em 1em !important;
}

.header__panel {
    border: 0;
    grid-row: 1;
    grid-column: 9 / 14;
    padding: .75em 0;
}

.header__links {
    gap: 3em;
    font-size: clamp(0.875em, 1vw, 1em);
    align-items: center;
}

.header__links-item i {
    color: var(--default-color);
    font-size: clamp(1em, 1vw, 1em);
}

.header__links-item {
    position: relative;
    display: inline-flex;
    font-weight: 500;
    gap: .5em;
    cursor: pointer;
    color: var(--default-color);
    transition: color 0.3s ease, transform 0.2s ease;
    align-items: center;
    flex-direction: column;
}

.header__links-item:hover {
    color: var(--default-color-hover);
}

span.header__links-count {
    transform: translate(0, 0);
    color: #FFF;
    background: var(--default-color);
    width: fit-content;
    height: fit-content;
    padding: .25em .75em .1em;
    font-size: .65em;
    border-radius: 1em;
    position: absolute;
    top: -.5em;
    right: -1em;
}

[data-link="owner"] span {
    display: none;
}

.header__menu-cover {
    background: rgba(0, 0, 0, .5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: .3s;
}

.header__menu-cover:hover {
    background: rgba(0, 0, 0, .25);
}

[data-link="owner"] span.header__links-name {
    display: none;
}


@media (min-width: 1200px) {

    span.header__links-name {
        display: block;
        color: #2a2a2a;
    }

    .footer__logo, .footer__item {
        width: calc(25% - 2em);
    }
}

@media (min-width: 1275px) {
    .prod__item {
        width: calc(33.333333% - 0.75em); /* Три карточки в ряд */
    }

    .wrap {
        font-size: 18px;
    }

    .speed {
        max-width: 75em;
        margin: auto;
    }

    .header__panel {
        padding: 0;
    }

    .scrollToTop.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .burger span {
        display: block;
    }
}

@media (min-width: 1400px) {
    .prod__item {
        background: #FFF;
        border: 1px solid var(--light-black);
        padding: .75em;
        border-radius: 1em;
        position: relative;
        transition: .3s;
        width: calc(33.333333% - 0.75em); /* Три карточки в ряд */
        height: 650px;
    }


    .speed__bar {
        padding: 1em 0;
    }

    .header {
        padding: .2em 0;
    }
}

@media (min-width: 1800px) {
    .wrap {
        font-size: 22px;
    }
}

@media (min-width: 2200px) {
    .wrap {
        font-size: 26px;
    }
}

@media (min-width: 2800px) {
    .wrap {
        font-size: 28px;
    }
}


.advantages__cart:hover {
    box-shadow: var(--medium-shadow);

}

.advantages {
    gap: 1em;
    padding: 1em 0em;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    gap: .25em;
    max-width: 73.125rem;
    margin: auto;
}

[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    margin-right: 0.10em;
}

.advantages__cart {
    width: calc(25% - 1.25em);
    background-color: #fff;
    border-radius: 8px;
    box-shadow: -6px 15px 5px rgba(0, 0, 0, 0.1);
    padding: 1.25em;
    text-align: left;
    width: 49%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.advantages__cart i {
    margin-right: 0.625em;
    font-size: 1.5em;
}

.advantages__cart h3 {
    margin: 0; /* Remove default margin */
    font-size: 1.2em; /* Adjust heading size */
}

.advantages__cart p {
    margin: 5px 0 0; /* Space above the paragraph */
}

@media (max-width: 768px) {
    .advantages__cart {
        width: 100%;
        margin-bottom: 0.75em;
    }
}

.c-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-modal__cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: .3s;
}

.c-modal__cover:hover {
    background: rgba(255, 255, 255, 0.35);
}

.c-modal__container {
    background: #fff;
    box-shadow: var(--medium-shadow);
    padding: 3em;
    width: 30em;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.c-modal__product {
    display: flex;
    gap: 2em;
}

.c-modal__product-image {
    width: 4em;
}

.c-modal__product-image .empty--image {
    height: 4em;
}

.c-modal__product-image .empty--image i {
    font-size: 1em;
}

.c-modal__header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 2em;
}

.header__menu .menu .menu__item:first-child .sub-menu {
    display: block; /* Сделать подменю видимым */
    position: absolute; /* Абсолютное позиционирование относительно родителя */
    top: 100%; /* Разместить под под первым элементом каталога */
    left: 0; /* Выровнять по левому краю родителя */
    background-color: #fff; /* Белый фон (или любой другой) */
    padding: 10px; /* Добавить отступы */
    border: 1px solid #ccc; /* Добавить рамку */
    z-index: 10; /* Убедиться, что оно поверх других элементов */
    width: 200px; /* Ширина подменю */
}

.header__menu .menu .menu__item:first-child {
    position: relative; /* Сделать родителя точкой отсчета для абсолютного позиционирования */
}

.header__menu .menu .menu__item .sub-menu .menu__item {
    display: block; /* Чтобы пункты подменю отображались вертикально */
    margin: 5px 0; /* Добавить отступы между пунктами подменю */
}

.header__menu .menu .menu__item .sub-menu a {
    display: block; /* Чтобы ссылки занимали всю ширину */
    padding: 5px;
    text-decoration: none;
    color: #333;
}

.header__menu .menu .menu__item .sub-menu a:hover {
    background-color: #f0f0f0;
}

.banner__item:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .35);
    z-index: 5;
}

.banner__item:first-child:before {
    background: rgba(0, 0, 0, .05);
}

.popular-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 73.125rem;
    /*1170px*/
    margin: 0 auto;
    margin-bottom: 5.3125rem;
    /*85px*/
}

.popular-box__h2 {
    display: flex;
    justify-content: center;
    align-items: start;
    margin-bottom: 2.625rem;
    /*42px*/
    font-family: "Montserrat", sans-serif;
    font-size: 1.875rem;
    font-weight: 600;
}

.popular-box__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.875rem;
    /*30px*/
    margin-bottom: 2.1875rem;
    /*35px*/
}

.popular-box__cards--cards_one,
.popular-box__cards--cards_two,
.popular-box__cards--cards_three,
.popular-box__cards--cards_four,
.popular-box__cards--cards_five,
.popular-box__cards--cards_six {
    display: flex;
    flex-direction: column;
    border: 1px solid #EDEDF0;
    background-color: #FFFFFF;
    width: 23.125rem;
    /*370px*/
    height: 28.6875rem;
    /*459px*/
    border-radius: 0.3125rem;
    /*5px*/
    transition: 0.2s;
}

.popular-box__cards--cards_one:hover,
.popular-box__cards--cards_two:hover,
.popular-box__cards--cards_three:hover,
.popular-box__cards--cards_four:hover,
.popular-box__cards--cards_five:hover,
.popular-box__cards--cards_six:hover {
    transform: scale(1.07);
    cursor: pointer;
}

.popular-box__image {
    width: 23.125rem;
    /*370px*/
    height: 18.75rem;
    /*300px*/
}

.popular-box__cards--h4 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.125rem;
    /*18px*/
    font-weight: 600;
    margin-top: 0.85rem;
    /*13,6px*/
    margin-bottom: 0.875rem;
    /*14px*/
}

.popular-box__cards--p {
    font-weight: 400;
    font-size: 0.875rem;
    /*14px*/
    color: #292929;
}

.popular-box__cards--price-line {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #EDEDF0;
}

.popular-box__cards--price-line_button {
    display: flex;
    width: 6.375rem;
    /*102px*/
    height: 1.58rem;
    /*25,28px*/
    justify-content: space-between;
    align-items: center;
    background-color: #FFFFFF;
    margin-top: 0.7125rem;
    /*11,4px*/
    margin-right: 1.5625rem;
    /*25px*/
}

.box-button__text {
    margin-top: 0.3rem;
    /*4,8px*/
}

.popular-box__cards--price-line_button-text {
    font-family: "Montserrat", sans-serif;
    font-size: 0.875rem;
    /*14px*/
    font-weight: 600;
}

.popular-box__cards--price-line_button-text:hover {
    color: #F95D5E;
}

.popular-box__cards--price-line-price {
    font-family: "Montserrat", sans-serif;
    font-size: 1.125rem;
    /*18px*/
    font-weight: 600;
    color: #F95D5E;
    margin-top: 1rem;
    /*16px*/
    margin-left: 1.3125rem;
    /*21px*/
    background-color: #FFFFFF;
}

.also-margin {
    margin-bottom: 1.4rem;
    /*22,4px*/
}

.popular-box__cards--p,
.popular-box__cards--h4 {
    margin-left: 1.3125rem;
    /*21px*/
}

.popular-box__button {
    display: flex;
    justify-content: center;
    font-family: "Montserrat", sans-serif;
    font-size: 0.875rem;
    /*14px*/
    font-weight: 600;
}

.popular-box__link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #4E9DD3;
}

.popular-box__link:hover {
    color: #F95D5E;
}

.popular-box__link:active {
    color: #F7F7F7;
}

.holidays {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 73.125rem;
    /*50px*/
    margin: 0 auto;
    /*108px*/
}

.holidays_h4 {
    font-size: 2em;
    font-weight: 600;
    display: flex;
    justify-content: center;
    margin-bottom: 3.0625rem;
    text-align: center;
}

.holiday_items {
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
}

.holiday_items--container {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}

.holiday_item_1,
.holiday_item_2,
.holiday_item_3,
.holiday_item_4,
.holiday_item_5,
.holiday_item_6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.holiday_img--container {
    margin-bottom: 1rem;
    transition: 0.2s;
}

.holiday_img--container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.holiday_img_1 {
    width: 4.25rem;
    width: 4.25rem;
}

.holiday_img_2 {
    width: 3.75rem;
    height: 3.75rem;
}

.holiday_img_3 {
    width: 4rem;
    height: 4rem;
}

.holiday_img_4 {
    width: 3.625rem;
    height: 3.625rem;
}

.holiday_img_5 {
    width: 3.625rem;
    height: 3.625rem;
}

.holiday_img_6 {
    width: 3rem;
    height: 3rem;
}

.holiday_item_1:hover,
.holiday_item_2:hover,
.holiday_item_3:hover,
.holiday_item_4:hover,
.holiday_item_5:hover,
.holiday_item_6:hover {
    text-decoration: underline;
    text-decoration-color: #F95D5E;
    transition: color 0.1s linear;
    transform: scale(1.09);
    cursor: pointer;
}

.holiday_item_1:active,
.holiday_item_2:active,
.holiday_item_3:active,
.holiday_item_4:active,
.holiday_item_5:active,
.holiday_item_6:active {
    color: #F95D5E;
    transition: color 0.1s linear;
}

.holiday_text {
    display: flex;
    width: 10.62rem;
    /*169px*/
    text-align: center;
    justify-content: center;
    color: black;
    font-weight: 600;
    font-size: 0.875rem;
    /*14px*/
}

@media (max-width: 768px) {
    .holiday_items--container {
        flex: 1 1 calc(33.333% - 10px);
        min-width: 0;
    }

    .holiday_text {
        font-size: 14px;
    }

    .holiday_img--container img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    .holiday_items--container {
        flex: 1 1 calc(50% - 10px);
    }
}

.footer__icon {
    display: flex;
    width: 7em;
}

.footer__icon_2 {
    margin-right: 10px;
}

.sales {
    width: 100%;
    max-width: 73.125rem;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 2rem; /* Добавлено для лучшей визуальной гармонии */
    cursor: pointer;
}

/* Заголовок */
.sales__header {
    text-align: center;
    margin-bottom: 2rem;
}

.sales__header h4 {
    font-size: 2em;
    text-align: center;
}

/* Обёртка карточек */
.sales__cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: stretch; /* Для равномерного распределения высоты */
}

/* Одна карточка */
.sales__card {
    display: flex;
    flex-direction: column; /* Вертикальное расположение */
    align-items: center; /* Центрирование по горизонтали */
    text-align: center; /* Центрирование текста */
    background: #fff; /* Опционально: фон карточки */
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Тень */
    transition: all 0.3s ease;
    will-change: transform;

    /* Адаптивная ширина */
    width: calc(25% - 1.5rem); /* По 4 в ряд */
}

/* Анимация при наведении */
@keyframes cardHoverEffect {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-3px) scale(1.02);
    }
    100% {
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }
}

/* Применяем анимацию к карточке при наведении */
.sales__card:hover {
    animation: cardHoverEffect 0.3s forwards;
}

/* Изображение внутри карточки */
.sales__card .lazy {
    width: 100%;
    height: 200px; /* Фиксированная высота */
    overflow: hidden;
    border-radius: 8px;
}

.sales__card .lazy img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Обрезает лишнее, сохраняет пропорции */
    display: block;
}

/* Текст под изображением */
.sales__cards--text {
    margin-top: 1rem;
    min-height: 80px; /* Одинаковая высота для текста */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Адаптивность */
@media (max-width: 1024px) {
    .sales__card {
        width: calc(33.33% - 2rem); /* По 3 в ряд */
    }

    .sales__card .lazy {
        height: 150px; /* Уменьшаем высоту изображения */
    }
}

@media (max-width: 768px) {
    .sales__card {
        width: calc(50% - 2rem); /* По 2 в ряд */
    }

    .sales__card .lazy {
        height: 120px; /* Уменьшаем высоту изображения */
    }

    .sales__cards--h3 h4 {
        font-size: 1.4rem; /* Уменьшаем заголовок */
    }

    .sales__cards--p p {
        font-size: 0.9rem; /* Уменьшаем текст */
    }
}

@media (max-width: 480px) {
    .sales__card {
        width: 100%; /* По 1 в ряд */
    }

    .sales__card .lazy {
        height: 100px; /* Уменьшаем высоту изображения */
    }

    .sales__cards--h3 h4 {
        font-size: 1.2rem; /* Уменьшаем заголовок */
    }

    .sales__cards--p p {
        font-size: 0.8rem; /* Уменьшаем текст */
    }
}