@keyframes loader {
    0% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(180deg)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes opacity-animation {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

[hidden],
[v-cloak],
template {
    display: none !important
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%)
}

.advantage__list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    list-style: none
}

@media only screen and (min-width:1280px) {
    .advantage__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 44px;
        gap: 44px
    }
}

.advantage__item {
    position: relative;
    display: flex
}

@media only screen and (max-width:1279px) {
    .advantage__item:not(:last-child) {
        margin-bottom: 32px
    }
}

.advantage__content {
    display: block;
    width: 100%;
    padding: 32px;
    padding-inline-start: 80px
}

.advantage__content p {
    color: var(--color-bg-primary-contrast)
}

.advantage a:hover {
    padding: 31px 0 30px;
    padding-inline: 79px 31px;
    background-color: var(--color-text-contrast);
    border: 1px solid var(--color-text-secondary-contrast);
    border-bottom: 2px solid var(--color-accent)
}

.advantage__icon-svg {
    position: absolute;
    top: 32px;
    inset-inline-start: 32px;
    max-width: 32px;
    max-height: 32px;
    fill: var(--color-accent)
}

.advantage__sub-slogan,
.content .advantage__sub-slogan {
    margin-bottom: 7px;
    font-weight: 700;
    font-size: 19px;
    line-height: 24px
}

@media only screen and (min-width:768px) {
    .advantage__sub-slogan,
    .content .advantage__sub-slogan {
        margin-bottom: 10px
    }
}

.advantage__text {
    font-size: 16px;
    line-height: 24px
}

.advantage__item {
    color: var(--color-bg-primary-contrast);
    background-color: var(--color-line)
}

.last-news__list {
    list-style: none
}

.last-news__item {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px
}

.last-news__date {
    margin-bottom: 7px
}

.last-news__list {
    font-size: 14px
}

.last-news__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 28px
}

.latest-news__all-link {
    position: relative;
    color: var(--color-link);
    text-decoration: none;
    border: 0;
    display: inline-block;
    margin-top: 48px;
    font-size: 18px;
    line-height: 24px
}

.latest-news__all-link::after {
    position: absolute;
    bottom: -1px;
    inset-inline-start: 0;
    display: block;
    width: 100%;
    content: "";
    border-bottom: 1px solid transparent
}

.latest-news__all-link:focus {
    color: var(--color-link);
    background-color: var(--color-status-blue-bg)
}

.latest-news__all-link:active,
.latest-news__all-link:hover {
    color: var(--color-link-hover);
    background-color: transparent
}

.latest-news__all-link:active::after,
.latest-news__all-link:hover::after {
    border-color: var(--color-link-hover-border)
}

.latest-news__list {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 64px;
    grid-row-gap: 32px;
    list-style: none
}

@media only screen and (min-width:768px) {
    .latest-news__list {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media only screen and (min-width:1280px) {
    .latest-news__list {
        grid-template-columns: repeat(3, 1fr)
    }
}

.latest-news__item {
    display: flex;
    flex-direction: column
}

.latest-news__date {
    padding-bottom: 24px;
    color: var(--color-text-tertiary-contrast);
    font-size: 14px;
    line-height: 16px;
    letter-spacing: .08em;
    text-transform: uppercase
}

.latest-news__short-text {
    color: var(--color-text);
    font-size: 16px;
    line-height: 24px
}

.list-catalog-tile {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: -7.5px
}

.list-catalog-tile__item {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: row-reverse;
    min-height: 80px;
    padding: 15px;
    overflow: hidden
}

@media only screen and (max-width:767px) {
    .list-catalog-tile__item {
        width: 100%;
        margin-bottom: 10px
    }
    .list-catalog-tile__item:last-child {
        margin-bottom: 0
    }
}

@media only screen and (min-width:768px) {
    .list-catalog-tile__item {
        flex-direction: column;
        min-height: 130px;
        margin: 7.5px
    }
}

@media (min-width:768px) and (max-width:1279px) {
    .list-catalog-tile__item {
        width: calc(25% - 7.5px*2)
    }
    .list-catalog-tile__item_long_tablet {
        width: calc(50% - 7.5px*2)
    }
}

@media only screen and (min-width:1280px) {
    .list-catalog-tile__item {
        width: calc(50% - 7.5px*2);
        padding: 20px
    }
    .list-catalog-tile__item_long_desktop {
        width: 100%
    }
}

.list-catalog-tile__item::after {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(41, 41, 41, .65)0, transparent 100%);
    opacity: 1;
    transition: opacity 400ms;
    content: " "
}

.list-catalog-tile__item-wrap {
    width: calc(50% - 7.5px*2);
    min-height: 80px;
    margin: 7.5px
}

.list-catalog-tile__item--no-image {
    background-color: var(--color-text-secondary)
}

.list-catalog-tile__item--no-image::before {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-bg-secondary-contrast);
    transform: translateY(96%);
    transition: transform .2s linear;
    content: ""
}

.list-catalog-tile__content {
    position: relative;
    z-index: 30;
    display: block;
    flex-grow: 1
}

.list-catalog-tile__title {
    display: block;
    color: #fff;
    font-weight: 500;
    font-size: 16px
}

.list-catalog-tile__description {
    display: block;
    color: var(--color-line-border);
    font-size: 13px
}

.list-catalog-tile__image {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    transition: all 400ms ease-out;
    -o-object-fit: cover;
    object-fit: cover
}

.list-catalog-tile__item:hover .list-catalog-tile__image {
    transform: scale(1.085)
}

.list-catalog-tile__icon-wrap {
    z-index: 30;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    background-color: var(--color-accent);
    border-radius: 100%
}

@media only screen and (max-width:767px) {
    .list-catalog-tile__icon-wrap {
        margin-inline-end: 10px
    }
}

.list-catalog-tile__icon {
    width: 30px;
    height: 30px;
    fill: #fff
}

.main-sale__list {
    display: flex
}

.main-sale__item {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background-color: #fff;
    border: 2px solid #f0f0f0;
    border-radius: var(--border-radius);
    transition: border-color .15s linear, transform .15s ease-out, box-shadow .15s linear
}

.main-sale__item:focus,
.main-sale__item:hover {
    transition: border-color .15s linear, transform .15s ease-out, box-shadow .15s linear
}

.main-sale__item:hover .main-sale__favorites {
    display: block
}

.main-sale p.main-sale__category,
.main-sale__category {
    font-size: 14px;
    line-height: 18px
}

.main-sale__link-more {
    display: block;
    padding: 12px 24px;
    color: var(--color-text);
    text-align: center;
    background-color: var(--color-bg-link);
    border-radius: var(--border-radius)
}

.main-sale__link {
    flex-grow: 1;
    margin-bottom: 16px
}

.main-sale__image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180px;
    margin-bottom: 20px;
    text-align: center
}

@media only screen and (min-width:768px) {
    .main-sale__image-container {
        margin-bottom: 10px
    }
}

.main-sale__image {
    max-height: 180px;
    -o-object-fit: contain;
    object-fit: contain;
    margin: auto
}

.main-sale__no-image {
    width: 48px;
    height: 50px
}

.main-sale p.main-sale__name,
.main-sale__name {
    display: block;
    display: -webkit-box;
    max-height: 48px;
    margin-bottom: 8px;
    overflow: hidden;
    color: #333;
    font-weight: 700;
    font-size: 19px;
    line-height: 24px;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

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

.main-sale__price {
    margin-bottom: 16px;
    font-size: 18px;
    line-height: 26px
}

.main-sale__button {
    display: inline-flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    max-height: 48px;
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    border-radius: var(--border-radius)
}

.main-sale__button:focus,
.main-sale__button:hover {
    background-color: var(--color-accent-light)
}

.main-sale__button:active {
    background-color: var(--color-accent-dark)
}

.main-sale__button_ask {
    background-color: var(--color-bg-link);
    border-color: var(--color-bg-link)
}

.main-sale__button_ask:active,
.main-sale__button_ask:focus,
.main-sale__button_ask:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-bg-tertiary)
}

.main-sale__button-svg_type_added,
.main-sale__button-svg_type_loading,
.main-sale__button.btn--basket-loading .main-sale__button-svg {
    display: none
}

.main-sale__button.btn--basket-loading .main-sale__button-svg_type_loading {
    display: block;
    animation: loader 1s infinite linear
}

.main-sale__button.btn--basket-added .main-sale__button-svg {
    display: none
}

.main-sale__button.btn--basket-added .main-sale__button-svg_type_added {
    display: block
}

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

.main-sale__text {
    width: 50%;
    overflow: hidden;
    color: #404040;
    font-size: 14px;
    line-height: 16px;
    white-space: nowrap;
    text-overflow: ellipsis
}

.main-sale__text:not(:last-child) {
    margin-inline-end: 16px
}

.main-sale__text_gray {
    color: #a6a6a6
}

.main-sale__text_white {
    color: #fff;
    font-size: 18px;
    line-height: 24px
}

.main-sale__text_black {
    color: var(--color-text);
    font-size: 18px;
    line-height: 24px
}

.main-sale__group {
    display: flex
}

.main-sale__group:not(:last-child) {
    margin-bottom: 8px
}

.main-sale__wrapper {
    display: flex;
    justify-content: space-between
}

@media only screen and (min-width:768px) {
    .main-sale__wrapper {
        height: 48px
    }
}

@media only screen and (min-width:1280px) {
    .main-sale__favorites {
        display: none
    }
}

.main-sale .favorites-btn_added {
    display: block
}

.main-sale .swiper-container {
    padding: 4px
}

.main-sale .swiper-slide {
    height: auto
}

.main-sale .swiper-button-next,
.main-sale .swiper-button-prev {
    display: block;
    background-color: #fff;
    opacity: .4;
    transition: opacity .2s ease-in-out
}

.main-sale .swiper-button-next:hover,
.main-sale .swiper-button-prev:hover {
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .4)
}

.main-sale .swiper-button-prev {
    inset-inline-start: 4px
}

.main-sale .swiper-button-next {
    inset-inline-end: 4px
}

.main-sale__list {
    margin-bottom: 32px
}

@media only screen and (max-width:767px) {
    .main-sale__list {
        margin-bottom: 16px
    }
}

.main-sale__item:focus,
.main-sale__item:hover {
    box-shadow: var(--shadow-1dp)
}

.main-sale__no-image {
    fill: var(--color-text-secondary)
}

.main-sale__button {
    flex-basis: 56px;
    padding: 10px;
    gap: 10px;
    font-size: 18px;
    border: 0;
    transition: background-color .25s linear
}

.main-sale__button:focus,
.main-sale__button:hover {
    transition: background-color .25s linear
}

.main-sale__button:active {
    transition: background-color .25s linear
}

@media only screen and (min-width:768px) {
    .main-sale__button {
        display: inline-flex;
        justify-content: center;
        padding: 0
    }
}

.main-sale__button.btn--basket-added {
    background-color: var(--color-text-secondary)
}

.main-sale__button-svg {
    width: 20px;
    height: 20px
}

.main-sale__button-svg,
.main-sale__button:hover .main-sale__button-svg {
    transition: fill .15s linear;
    fill: var(--color-text-contrast)
}

.main-slider {
    height: 312px
}

@media only screen and (max-width:767px) {
    .main-slider {
        height: 280px
    }
}

.popular-goods {
    padding: 15px;
    overflow: hidden
}

@media (min-width:768px) and (max-width:1279px) {
    .popular-goods {
        margin-bottom: 40px
    }
}

.popular-goods {
    margin: 0
}

.popular-goods_full-width .popular-goods__item span:not(.popular-goods__img):not(.popular-goods__caption):not(.popular-goods__prop-value) {
    display: flex;
    flex: 1;
    flex-direction: column
}

.startup-section_custom-bg {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: var(--color-bg-secondary)
}

@media only screen and (max-width:767px) {
    .startup-section_custom-bg {
        padding-top: 40px;
        padding-bottom: 40px
    }
}

.startup-section__header-block {
    margin-bottom: 56px;
    white-space: normal
}

@media only screen and (max-width:767px) {
    .startup-section__header-block {
        margin-bottom: 16px
    }
}

@media only screen and (min-width:768px) {
    .startup-section__header-block {
        width: 75%
    }
}

@media only screen and (min-width:1280px) {
    .startup-section__header-block {
        width: 50%
    }
}

.startup-section__title {
    margin-bottom: 16px;
    color: var(--color-text)
}

@media only screen and (max-width:767px) {
    .startup-section__title {
        margin-bottom: 8px
    }
}

.startup-section__subtitle {
    color: var(--color-text-secondary)
}

.startup-sections__section:not(:last-child) {
    margin-bottom: 80px
}

@media only screen and (max-width:767px) {
    .startup-sections__section:not(:last-child) {
        margin-bottom: 40px
    }
}