a {
    -webkit-transition: color .5s;
    transition: color .5s;
    color: #009bc9
}

a:hover {
    text-decoration: none;
    color: #0cbcf1
}

.button {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 0 30px;
    transition: background-color 0.3s ease 0s;
}

.button-50 {
    height: 50px;
    padding: 0px 20px;
}

.button span {
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
}

.button svg {
    transition: transform 0.3s ease 0s;
}

.button-blue {
    color: var(--color-white);
    background-color: var(--color-dark-blue);
}

.button-white {
    color: var(--color-dark);
    background-color: var(--color-white);
}

.button-white:hover {
    background-color: var(--color-border-soft);
}

.button-blue:hover {
    background-color: var(--color-accent);
}

.button:hover svg {
    transform: translateX(2.5px);
}

.no-scroll {
    position: relative;
    overflow: hidden;
    height: 100vh;
    position: fixed;
    left: 0;
    /* top: 0; */
    width: 100%;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--container-padding);
}

.section {
    padding: var(--section-padding);
}

.top-bar {
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-main);
}

.top-bar__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 35px;
    max-width: var(--container-width);
}

.top-bar__list {
    display: flex;
    list-style: none;
    gap: 15px;
}

.top-bar__link {
    color: var(--color-gray);
    font-size: var(--font-size-xs);
    text-decoration: none;
    transition: color var(--transition-base);
    white-space: nowrap;
}

.top-bar__link span {
    transition: color 0.3s ease 0s;
}

.top-bar__link:hover,
.top-bar__link:hover span {
    color: var(--color-dark-blue);
}

.top-bar__link--discount {
    color: var(--color-red);
    font-weight: 500;
}

.top-bar__info {
    display: flex;
    gap: 30px;
    align-items: center;
}

.top-bar__item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.top-bar__text {
    color: var(--color-gray);
    font-size: var(--font-size-xs);
}

.top-bar__icon-img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    flex-shrink: 0;
}

.top-bar__link:hover .top-bar__icon-img {
    filter: invert(31%) sepia(94%) saturate(1915%) hue-rotate(212deg) brightness(96%) contrast(96%);
    transition: filter var(--transition-base);
}

.top-bar__item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.main-header {
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    background-color: var(--color-white);
    z-index: 100;
}

.main-header__container {
    display: flex;
    align-items: center;
    gap: 25px;
    max-width: var(--container-width);
}

.logo {
    text-decoration: none;
    flex-shrink: 0;
    max-width: 180px;
}
.logo__text {
    font-size: 14px;
    color: var(--color-dark-blue);
    text-transform: lowercase;
    margin-top: -5px;
}

.main-header__search-group {
    display: flex;
    flex: 1;
    gap: 10px;
    min-width: 400px;
}

.btn-catalog {
    background: var(--color-dark-blue);
    color: var(--color-white);
    border: none;
    height: 40px;
    padding: 0 25px;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.btn-catalog:hover {
    background: var(--color-blue-mid);
}

a.btn-catalog:hover {
    color: white;
}

.search-bar {
    flex: 1;
    display: flex;
    background: var(--color-bg);
    height: 40px;
    align-items: center;
    padding: 0 15px;
}

.search-bar__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 12px;
    color: var(--color-gray);
}

.search-bar__btn {
    background: transparent;
    border: none;
    cursor: pointer;
}

.main-header__contacts {
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-icons {
    display: flex;
    gap: 8px;
}
.social-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-item-header__desctop {
    display: flex;
    flex-direction: column;
}

.contact-item-header__label {
    font-size: 12px;
    color: var(--color-gray);
}

.contact-item-header__value {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.3s ease 0s;
}

.contact-item-header__value--blue {
    color: var(--color-accent);
    text-decoration: underline;
}

.contact-item-header__mobile-item {
    display: none;
}

.contact-item-header__value:hover {
    color: var(--color-accent);
}

.contact-item-header__value--blue:hover {
    color: var(--color-dark-blue);
}

.header-actions {
    display: flex;
    gap: 20px;
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    gap: 4px;
    position: relative;
}

.action-btn--catalog {
    display: none;
}

.action-btn__icon-wrapper {
    position: relative;
    width: 24px;
    height: 24px;
}
.action-btn__text {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-dark);
}

.badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 8px;
    font-weight: 700;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breadcrumbs {
    padding: 10px 0;
    background-color: var(--color-white);
}

.breadcrumbs__container {
    max-width: var(--container-width);
}

.breadcrumbs__list {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 7px;
    overflow-x: auto;
}

.breadcrumbs__list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.breadcrumbs__link {
    font-size: var(--font-size-xs);
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-base);
    white-space: nowrap;
}

.breadcrumbs__link:hover {
    text-decoration: underline;
}

.breadcrumbs__separator {
    font-size: var(--font-size-xs);
    color: var(--color-gray);
    user-select: none;
}

.breadcrumbs__current {
    font-size: var(--font-size-xs);
    color: var(--color-gray);
    pointer-events: none;
    max-width: 500px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}

/* Оптимизация для мобилок: скролл, если крошки слишком длинные */

.category-hero {
    padding: 20px 0 3px;
}

.category-hero__container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.category-hero__content {
    flex: 1;
}

.category-hero__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.category-hero__title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-dark);
}

.category-hero__count {
    font-size: 15px;
    color: var(--color-gray);
    font-weight: 500;
}

.category-hero__description {
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-gray);
    margin-bottom: 15px;
}

.category-hero__description p {
    margin-bottom: 10px;
}

.category-hero__more {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-dark);
    cursor: pointer;
    padding: 0;
}

.category-hero__more-icon {
    width: 16px;
    transition: transform var(--transition-base);
}

.category-hero__description {
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-gray);
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;

    max-height: 218px;

    transition: max-height 0.3s ease-in-out;
}

.category-hero__description::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

.category-hero__description--expanded {
    max-height: 1000px;
}

.category-hero__description--expanded::after {
    opacity: 0;
}

.category-hero__more-icon {
    width: 12px;
    display: inline-block;
    transition: transform 0.4s ease-in-out;
}

.category-hero__more--active .category-hero__more-icon {
    transform: rotate(180deg);
}

.manager-card {
    margin-top: -4px;
    width: 450px;
    background: var(--color-dark-blue);
    background-image: url("../img/mngr-bg.svg");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: cover;
    padding: 30px;
    position: relative;
    overflow: hidden;
    color: var(--color-white);
    padding-bottom: 25px;
}

.manager-card__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    opacity: 0.5;
}

.manager-card__glow--1 {
    width: 150px;
    height: 150px;
    background: var(--color-accent);
    top: -50px;
    right: -50px;
}

.manager-card__glow--2 {
    width: 100px;
    height: 100px;
    background: var(--color-cyan);
    bottom: -20px;
    right: 50px;
}

.manager-card > * {
    position: relative;
    z-index: 1;
}

.manager-card__profile {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.manager-card__avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.manager-card__name {
    font-size: 14px;
    font-weight: 600;
}

.manager-card__post {
    font-size: 12px;
    color: var(--color-gray-lighter);
}

.manager-card__bubble {
    background: var(--color-white);
    color: var(--color-dark);
    padding: 15px;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 22px;
    position: relative;
}

.manager-card__bubble::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 12px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--color-white);
}

.manager-card__contacts {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
}

.manager-card__item {
    margin-bottom: 10px;
}
.manager-card__item:last-child {
    margin-bottom: 0;
}

.manager-card__label {
    display: block;
    font-size: 12px;
    color: var(--color-gray-lighter);
    margin-bottom: 3px;
}

.manager-card__link {
    color: var(--color-white);
    font-size: 16px;
    font-weight: 700;
    text-decoration: underline;
}

.manager-card__link.mngr_phone {
    text-decoration: none;
}
.manager-card__socials {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.social-sq-btn {
    width: 45px;
    height: 45px;
    border: 1px solid rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base);
}

.social-sq-btn:hover {
    background: var(--color-white-20);
}

.swiper-dotts {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 19px;
    margin-top: 17px;
}

.swiper-dotts .swiper-pagination-bullet {
    margin: 0 !important;
    width: 20px;
    height: 4px;
    background-color: var(--color-white);
    position: relative;
    border-radius: 0px;
    opacity: 1;
    overflow: hidden;
}

.swiper-dotts.swiper-dotts--grey .swiper-pagination-bullet {
    background-color: var(--color-border);
}

.swiper-dotts .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--color-dark-blue);
    transition: width 0.4s ease-in-out;
}

.swiper-dotts .swiper-pagination-bullet-active::before {
    width: 100%;
}

.swiper-dotts .swiper-pagination-bullet-active {
    background-color: var(--color-white);
}

.burger-menu-button,
.mobile-menu,
.mobile-search-container {
    display: none;
}

.search-bar {
    position: relative;
}

.search-results-dropdown {
    /*display: none;*/
    position: absolute;
    width: max-content;
    top: 46px;
    z-index: 10;
    left: 0;
    max-width: 450px;
    background: var(--color-white);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    /*overflow: hidden;*/
    padding: 13px 0;
}

.search-results__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 12px;
}

.search-results__title {
    font-weight: 500;
    font-size: 14px;
    color: var(--color-dark);
    margin: 0;
}

.search-results__all {
    font-size: 12px;
    color: var(--color-gray);
    text-decoration: none;
}

.search-results-item {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    transition: background 0.2s;
}

.search-results-item:not(:last-child) {
    border-bottom: 1px solid var(--color-bg);
}

.search-results-item:hover {
    background: var(--color-bg-warm);
}

.search-results-item__img {
    width: 79px;
    height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-results-item__img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.search-results-item__info {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    gap: 10px;
}

.search-results-item__name {
    display: block;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-dark);
    text-decoration: none;
    margin-bottom: 5px;
}

.search-results-item__badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.search-results__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    font-size: 7px;
    font-weight: 500;
    border-radius: 2px;
    gap: 3px;
}

.search-results__badge--success {
    background: var(--color-green);
    color: var(--color-white);
}

.search-results__badge--warning {
    background: var(--color-yellow);
    color: var(--color-dark);
}

.search-results__badge--bonus {
    background: var(--color-bg);
    color: var(--color-dark-blue);
}

.search-item__price-block {
    text-align: right;
    min-width: 85px;
}

.search-results__price-current {
    display: block;
    font-weight: 700;
    font-size: 16px;
    color: var(--color-dark);
    white-space: nowrap;
}

.search-results__price-old {
    display: block;
    font-size: 12px;
    color: var(--color-gray);
    text-decoration: line-through;
}

/* === advantages-section.css === */
.advantages-section {
    padding: 70px 0;
    background: var(--color-white);
}

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

.adv-card {
    padding: 30px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.adv-card--white {
    background: var(--color-white);
}
.adv-card--gray {
    background: var(--color-bg);
}
.adv-card--outline {
    outline: 2px solid var(--color-bg);
    outline-offset: -2px;
}
.adv-card--relative {
    position: relative;
    overflow: hidden;
}

.adv-card__title {
    font-size: 29px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-dark);
    margin: 0;
}

.adv-stats {
    display: flex;
    gap: 30px;
}

.adv-stat-value {
    font-size: 49px;
    font-weight: 500;
    color: var(--color-accent);
    line-height: 1.2;
    margin-bottom: 9px;
}

.adv-stat-item {
    margin-bottom: 10px;
    font-size: 16px;
}

.adv-stat-item__list {
    list-style: disc;
    padding-left: 18px;
    margin-top: 10px;
}

.adv-stat-item__list li {
    list-style: disc;
    padding-bottom: 10px;
}

.adv-stat-label {
    font-size: 14px;
    color: var(--color-gray);
    font-weight: 500;
}

.adv-card__subtitle {
    font-size: 23px;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 15px;
}

.adv-card__text {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-gray);
    line-height: 1.4;
    margin-bottom: 10px;
}

.adv-card__text a {
    color: var(--color-dark);
    text-decoration: underline;
    transition: color 0.3s ease 0s;
}

.adv-card__text a:hover {
    color: var(--color-accent);
}

.adv-card__icon {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 90px;
    pointer-events: none;
}

.adv-features {
    display: flex;
    gap: 15px;
}

.adv-feature-box {
    flex: 1;
    background: var(--color-white);
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.adv-feature-label {
    font-weight: 500;
    font-size: 14px;
    color: var(--color-gray);
    margin-bottom: 12px;
}
.adv-feature-value {
    font-size: 16px;
    color: var(--color-dark);
    font-weight: 500;
}

.adv-card--delivery {
    grid-column: span 2;
}

.adv-card__map {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    z-index: 0;
}

.adv-card__content {
    max-width: 481px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.adv-delivery-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adv-delivery-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.adv-delivery-city {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-dark);
}

.adv-delivery-arrow {
    width: 28px;
    height: 24px;
}

.adv-delivery-time {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-dark);
}

.adv-card__btn {
    background: var(--color-dark-blue);
    color: var(--color-white);
    padding: 12px 20px;
    border: none;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 20px;
    width: fit-content;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}
.adv-card__btn:hover {
    background: var(--color-accent);
    transition: all 0.3s ease 0s;
}
/* === catalog.css === */

.catalog-page {
    display: flex;
    gap: 30px;
    padding: 20px 0px;
}

.sidebar {
    width: 230px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.sidebar__back {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.sidebar__back-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.sidebar__back span {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-dark);
    transition: color 0.3s ease 0s;
}

.sidebar__back-arrow {
    color: var(--color-gray-mid);
    transition: color 0.3s ease 0s;
}

.sidebar__back:hover span,
.sidebar__back:hover svg {
    color: var(--color-cyan);
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.filter-row__label {
    font-size: 14px;
    color: var(--color-dark);
}

.filter-row__count {
    font-size: 14px;
    color: var(--color-gray-mid);
    margin-left: -10px;
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    user-select: none;
}

.filter-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    min-width: 25px;
    background: var(--color-bg);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0;
}
.filter-row:hover input[type="checkbox"] {
    background: var(--color-border-mid);
}

.filter-row input[type="checkbox"]:checked {
    background: var(--color-dark-blue);
}

.filter-row input[type="checkbox"]::after {
    content: "";
    display: none;
    width: 19px;
    height: 19px;
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.95801 10.2916L7.12467 13.4583L15.0413 5.54163' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.filter-row input[type="checkbox"]:checked::after {
    display: block;
}

.sidebar__back,
.filter-row--instock,
.filter-group {
    margin-bottom: 25px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-group__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.3;
}

.filter-range {
    display: flex;
    gap: 10px;
}

.filter-range__input--muted {
    color: var(--color-gray-mid);
}

.filter-range__input {
    flex: 1;
    padding: 15px 10px;
    background: var(--color-bg);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-dark);
    font-family: var(--font);
    border: none;
    outline: none;
    line-height: 1.1;
    width: 100%;
    min-width: 0;
    display: block;

    -moz-appearance: textfield;
    appearance: textfield;
}

.filter-range__input::-webkit-outer-spin-button,
.filter-range__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.filter-range__input:focus {
    outline: none;
    color: var(--color-dark);
}

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

.filter-show-more {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-gray-mid);
    padding: 6px 0 0;
}

.all-filters-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border: 1px solid var(--color-bg);
    background: var(--color-white);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark);
    width: 100%;
}

.catalog-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.catalog-toolbar__count {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-dark);
}

.catalog-toolbar__count span {
    color: var(--color-gray);
}

.catalog-toolbar__right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.sort-wrapper {
    position: relative;
}

.sort-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-dark);
    cursor: pointer;
    font-family: var(--font);
    padding: 0;
    white-space: nowrap;
}

.sort-btn__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sort-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    background: var(--color-white);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);
    min-width: 220px;
    display: none;
    flex-direction: column;
}

.sort-dropdown--open {
    display: flex;
}

.sort-dropdown__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 10px 15px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-bg);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-dark);
    font-family: var(--font);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 0.15s;
}

.sort-dropdown__item:last-child {
    border-bottom: none;
}

.sort-dropdown__item:hover {
    background: var(--color-bg);
}

.sort-dropdown__item--active {
    color: var(--color-dark-blue);
}

.sort-dropdown__item--active svg line,
.sort-dropdown__item--active svg path,
.sort-dropdown__item--active svg rect {
    stroke: var(--color-dark-blue);
}

.view-toggle {
    display: flex;
    gap: 6px;
}

.view-toggle__btn {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-bg);
}

.view-toggle__btn--active {
    color: var(--color-dark-blue);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--color-bg);
    border-left: 1px solid var(--color-bg);
}

.products-grid-btn-more {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-bottom: 1px solid var(--color-bg);
    border-right: 1px solid var(--color-bg);
    border-left: 1px solid var(--color-bg);
    padding: 20px;
    transition: color 0.3s ease 0s;
}

.products-grid-btn-more span {
    font-weight: 700;
    font-size: 15px;
}

.products-grid-btn-more svg {
    color: var(--color-dark-blue);
    transition: color 0.3s ease 0s;
}

.products-grid-btn-more:hover,
.products-grid-btn-more:hover svg {
    color: var(--color-accent);
}

.product-card {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    /* outline: 1px solid var(--color-bg); */

    border-right: 1px solid var(--color-bg);
    border-bottom: 1px solid var(--color-bg);
}

.product-card__img-wrap {
    position: relative;
    height: 250px;
    overflow: hidden;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.product-card__img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card__img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 6px;
    object-fit: contain;
}

.product-card__badges {
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
}

.product-card__badges--row {
    flex-direction: row;
    flex-wrap: wrap;
}

.badge-product-card {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 24px;
    font-size: 10px;
    font-weight: 500;
    line-height: 13.05px;
    white-space: nowrap;
    width: max-content;
    position: relative;
}

/* .badge-product-card__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
} */

.badge-product-card--sale {
    background-color: var(--color-cyan);
    color: var(--color-white);
}

.badge-product-card--hit {
    background-color: var(--color-red);
    color: var(--color-white);
}

.badge-product-card--hit::before,
.badge-product-card--sale::before,
.badge-product-card--bonus-blur::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    left: 5px;
    top: 3px;
}

.badge-product-card--bonus-blur {
    background-color: var(--color-bg-55);
    backdrop-filter: blur(2.9px);
    color: var(--color-dark-blue);
}

.badge-product-card--hit::before {
    background: url(../img/icons/flash.svg) no-repeat;
}

.badge-product-card--sale::before {
    background: url(../img/icons/sale.svg) no-repeat;
}

.badge-product-card--bonus-blur::before {
    background: url(../img/icons/logo-mini.svg) no-repeat;
    /* background-repeat: no-repeat; */
}

.badge-product-card--order {
    background-color: var(--color-yellow);
    color: var(--color-dark);
}

.product-card__body {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-card__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
}

.product-card__art {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-gray);
    line-height: 17.4px;
}

.product-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 20.3px;
    transition: color 0.3s ease 0s;
}

.product-card__name:hover {
    color: var(--color-cyan);
}

.product-card__bottom {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
}

.product-card__status {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.status-badge-pc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 5px;
    font-size: 9px;
    font-weight: 500;
    line-height: 13.05px;
    white-space: nowrap;
}

.status-badge-pc__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-badge-pc--instock {
    background: var(--color-green);
    color: var(--color-white);
}
.status-badge-pc--order {
    background: var(--color-yellow);
    color: var(--color-dark);
}
.status-badge-pc--bonus {
    background: var(--color-bg);
    color: var(--color-dark-blue);
}

.product-card__specs {
    font-size: 9px;
    font-weight: 500;
    line-height: 13.05px;
    list-style: none;
    display: flex;
    flex-direction: column;
    /*gap: 4px;*/
}

.product-card__specs li {
    display: block;
    align-items: baseline;
    padding-left: 10px;
    position: relative;
    flex-wrap: wrap;
    line-height: 1.45;
}

.product-card__specs li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-gray);
    flex-shrink: 0;
}

.spec-label {
    color: var(--color-gray);
}
.spec-val {
    color: var(--color-dark);
    margin-left: 3px;
}

.product-card__price-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 0;
    height: 39px;
}

.product-card__price {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 29px;
}

.product-card__price-old {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-gray);
    text-decoration: line-through;
    line-height: 20.3px;
}

.product-card__button {
    max-width: 218px;
    width: 100%;
    height: 45px;
    padding: 8px 20px;
    background-color: var(--color-dark-blue);
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.3s ease 0s;
}

.product-card__button:hover {
    background-color: var(--color-accent);
}

.product-card__button-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1;
}

.product-card__button-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.product-card__button--no-icon {
    justify-content: center;
}

.qty-add-row {
    display: flex;
    gap: 10px;
}

.qty-add-row {
    display: none;
}

.product-card--in-cart .button--to-cart {
    display: none;
}

.product-card--in-cart .qty-add-row {
    display: flex;
}

.qty-ctrl {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--color-bg);
}

.qty-ctrl__btn {
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray);
}

.qty-ctrl__btn:hover {
    color: var(--color-dark-blue);
}

.qty-ctrl__val {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark);
    min-width: 24px;
    text-align: center;
}

.btn-pc-add {
    width: 45px;
    height: 45px;
    background: var(--color-cyan);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-pc-add svg {
    transition: transform 0.3s ease 0s;
}

.btn-pc-add:hover svg {
    transform: translateX(2px);
}

.btn-cart,
.btn-analog {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 20px;
    background: var(--color-dark-blue);
    color: var(--color-white);
    border: none;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    transition: opacity 0.15s;
}

.btn-cart:hover,
.btn-analog:hover {
    opacity: 0.85;
}

.btn-add-to-cart {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    background: var(--color-cyan);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}

.btn-add-to-cart:hover {
    opacity: 0.85;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding-top: 30px;
}

.pagination__btn {
    width: 40px;
    height: 40px;
    background: var(--color-bg);
    border: none;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination__btn--active {
    background: var(--color-dark-blue);
    color: var(--color-white);
}

.pagination__btn--arrow {
    background: var(--color-bg);
}

.pagination__btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.filter-extra {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
    overflow: hidden;
}

.filter-extra--open {
    grid-template-rows: 1fr;
}

.filter-extra > * {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-extra .filter-row {
    padding-top: 0;
}

.selected-filters__list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.selected-filters__item {
    border: 1px solid var(--color-bg);
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.3s ease 0s;
}

.selected-filters__item span {
    font-size: 12px;
    color: var(--color-dark);
}

.selected-filters__item-delete {
    width: 14px;
    height: 14px;
}

.selected-filters__item-delete svg {
    color: var(--color-gray-mid);
    transition: color 0.3s ease 0s;
}

.selected-filters__item:hover {
    border: 1px solid var(--color-dark-blue);
}

.selected-filters__item:hover .selected-filters__item-delete svg {
    color: var(--color-dark-blue);
}

.selected-filters__button-reset {
    padding: 4px 8px;
    background-color: var(--color-dark-blue);
    transition: background-color 0.3s ease 0s;
}

.selected-filters__button-reset span {
    font-size: 12px;
    color: var(--color-white);
}

.selected-filters__button-reset:hover {
    background-color: var(--color-blue-mid);
}

.product-card__bookmark,
.product-card__analytics {
    cursor: pointer;
    width: 22px;
    height: 22px;
    color: var(--color-gray-muted);
    transition: color 0.3s ease 0s;
}


.product-card__bookmark:hover,
.product-card__bookmark.active,
.product-card__analytics:hover,
.product-card__analytics.active {
    color: var(--color-cyan);
}

.product-card__badges--col {
    flex-direction: column;
}

/* Правая колонка в фото: сердечко + аналитика */
.product-card__img-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 1;
    margin-left: auto;
}

.status-text-pc {
    /* display: inline-flex;
    align-items: center;
    gap: 5px; */
    font-size: 11px;
    font-weight: 500;
    line-height: 15.95px;
    position: relative;
    padding-left: 21px;
}

.status-text-pc::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: -1px;
}

.status-text-pc--instock {
    color: var(--color-green);
}
.status-text-pc--clarify {
    color: var(--color-yellow-dark);
}

.status-text-pc--expecting {
    color: var(--color-cyan);
}

.product-card__price--sale {
    color: var(--color-red);
}

.product-card__price--muted {
    color: var(--color-gray);
}

.status-text-pc--instock::before {
    background: url(../img/icons/check-green.svg) no-repeat;
}

.status-text-pc--expecting::before {
    background: url(../img/icons/expecting.svg) no-repeat;
}

.status-text-pc--clarify::before {
    background: url(../img/icons/delivery-orange.svg) no-repeat;
}

/* В режиме СЕТКИ: meta-specs не создаёт лишний блок */
.product-card__meta-specs {
    display: contents;
}

.products-grid--list {
    grid-template-columns: 1fr;
}

.products-grid--list .product-card {
    flex-direction: row;
    height: auto;
}

.products-grid--list .product-card__img-wrap {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}

.products-grid--list .product-card__img {
    width: 125px;
    height: 185px;
    left: 37px;
    top: 6px;
}

.products-grid--list .product-card__body {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

/* Левая часть: арт + название + характеристики */
.products-grid--list .product-card__meta-specs {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
    min-width: 0;
}

/* Правая часть: статус + цена + кнопка */
.products-grid--list .product-card__bottom {
    flex: 0 0 218px;
    justify-content: flex-end;
}

.products-grid--list .product-card__price-row {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: 2px;
    padding: 5px 0;
}

.products-grid--list .product-card__button {
    max-width: 100%;
}

.products-grid--list .product-card__status-column,
.product-card__status-row,
.catalog-filter-mob {
    display: none;
}

.products-grid--list .product-card__status-row {
    display: block;
}

.extra-filters {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
    overflow: hidden;
}

.extra-filters--open {
    grid-template-rows: 1fr;
}

.extra-filters > * {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* === categories-section.css === */
.categories-section {
    padding: 10px 0 20px;
    background: var(--color-white);
}

.categories-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 23.4px;
    color: var(--color-dark);
    margin-bottom: 6px;
}

.categories-slider-container {
    position: relative;
}

.category-card {
    background: var(--color-bg);
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    outline: 1px solid var(--color-bg);
    outline-offset: -0.5px;
    height: auto;
    transition: all 0.3s ease 0s;
}
.category-card:hover {
    background: var(--color-border-mid);
    outline: 1px solid var(--color-border-mid);
    transition: all 0.3s ease 0s;
}

.category-card__logo-box {
    width: 140px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.category-card__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: darken;
}

.category-card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.category-card__name {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-dark);
    text-align: center;
    margin-bottom: 2px;
    transition: all 0.3s ease 0s;
}
/*
.category-card:hover .category-card__name {
  color: var(--color-accent);
    transition: all 0.3s ease 0s;

}
*/
.category-card__count {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-gray);
    text-align: center;
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0px 5px 19.7px rgba(15, 56, 90, 0.12);
    backdrop-filter: blur(10.1px);
    transition: all 0.3s ease;
}

.slider-nav:hover {
    background: var(--color-bg-soft);
}

.slider-nav--prev {
    left: -22.5px;
}

.slider-nav--next {
    right: -22.5px;
}

/* === cta-section.css === */
.cta-section {
    padding: 70px 0;
    /* Создает эффект "разреза" фона: половина белая, половина серая */
    background: linear-gradient(180deg, var(--color-white) 50%, var(--color-border) 50%);
}

.cta-card {
    position: relative;
    background-color: var(--color-dark-blue);
    padding: 41px 40px;
    overflow: hidden;
    box-shadow: 0px 18px 31px -15px rgba(15, 56, 90, 0.6);
}

.cta-card__glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: var(--color-cyan);
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
    z-index: 1;
}

.cta-card__glow--top {
    top: -150px;
    right: -50px;
}

.cta-card__glow--bottom {
    bottom: -150px;
    right: 150px;
}

.cta-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.cta-card__user {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cta-card__avatar {
    width: 76px!important;
    height: 76px!important;
    /*border-radius: 50%;*/
    /*object-fit: cover;*/
    /*flex-shrink: 0;*/
}

.cta-card__title {
    color: var(--color-white);
    font-size: 33px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 10px;
}

.cta-card__description {
    color: var(--color-gray-light);
    font-size: 16px;
    /* max-width: 500px; */
}

/* === expert-content.css === */
.expert-slider-wrapper {
    position: relative;
}

.expert-slider-wrapper .slider-nav {
    top: 34%;
}

.expert-content {
    padding: 70px 0;
    background-color: var(--color-white);
}

.expert-content__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.expert-slider {
    width: 100%;
    overflow: hidden;
}

.expert-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}

.expert-card__image-wrapper {
    position: relative;
    height: 275px;
    overflow: hidden;
}

.expert-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.expert-card__image-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 21, 28, 0) 58%, #14151c 100%);
    pointer-events: none;
}

.expert-card__image-wrapper .badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
}

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

.expert-card__title {
    font-size: 18px;
    font-weight: 500;
    line-height: 23.4px;
    color: var(--color-dark);
    margin: 0;
    transition: color 0.3s ease 0s;
}

.expert-card__title:hover {
    color: var(--color-accent);
}

.expert-card__descr {
    font-size: 14px;
    font-weight: 400;
    line-height: 18.2px;
    color: var(--color-gray);
    margin: 0;
}

.badge-article {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
    padding: 5px 20px;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 18.2px;
    color: var(--color-white);
    backdrop-filter: blur(3.65px);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.badge-article--green {
    background-color: var(--color-green);
}

.badge-article--blue {
    background-color: var(--color-accent);
}

.post-date {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.post-date__icon {
    width: 17px;
    height: 17px;
    object-fit: contain;
}

.post-date__text {
    color: var(--color-gray);
    font-size: 14px;
    font-weight: 500;
    line-height: 18.2px;
}

.slider-controls {
    display: flex;
    gap: 10px;
}

.slider-arrow {
    width: 45px;
    height: 45px;
    background: var(--color-white);
    box-shadow: 0px 5px 19.7px rgba(15, 56, 90, 0.12);
    border-radius: 44px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
}

.slider-arrow:hover {
    background-color: var(--color-bg-lighter);
}

/* === footer.css === */

.footer {
    background-color: var(--color-bg);
    font-family: "Roboto", sans-serif;
}

.footer__main {
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}

.footer__container {
    display: grid;

    grid-template-columns: 1.2fr 1fr 1.2fr 1.14fr;
    gap: 30px;
    position: relative;
    z-index: 2;
}

.footer__watermark {
    position: absolute;
    top: -36px;
    left: 15px;
    width: 366px;
    height: 620px;
    /* background-color: var(--color-bg-footer-wm); */
    z-index: -1;
}

.footer__title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--color-black);
}

.footer__label {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
}

.footer__description {
    font-size: 14px;
    color: var(--color-gray);
    line-height: 1.4;
    margin: 14px 0 25px;
}

.footer__col--nav,
.footer__col--categories {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.footer__list {
    list-style: none;
}

.footer__list li {
    margin-bottom: 2px;
    line-height: 140%;
}

.footer__list a {
    text-decoration: none;
    font-size: 14px;
    color: var(--color-gray);
    transition: color 0.3s;
}

.footer__list a:hover {
    color: var(--color-accent);
}

.contact-item {
    margin-bottom: 24px;
}
.contact-item span,
.address-item span {
    display: block;
    font-size: 14px;
    color: var(--color-gray);
}

.phone-link {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-dark);
    text-decoration: none;
}

.phone-link-sm {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-dark);
    text-decoration: none;
    line-height: 111%;
}

.callback-link {
    display: block;
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--color-accent);
    width: fit-content;
    margin-top: 5px;
}

.email-link {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-accent);
}

.address-item {
    margin-bottom: 24px;
}

.address-item p {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-dark);
}

.footer__socials {
    display: flex;
    gap: 10px;
}
.social-btn {
    width: 40px;
    height: 40px;
    background: var(--color-social-bg);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.social-btn--ig {
    background: linear-gradient(107deg, #feda75 0%, #fa7e1e 26%, #d62976 50%, #962fbf 74%, #4f5bd5 100%);
}

.footer__bottom {
    border-top: 1px solid var(--color-dark-blue-10);
    padding: 15px 0;
}

.footer__bottom-container {
    display: flex;
    justify-content: space-between;
}

.footer__copy,
.footer__policy a {
    font-size: 14px;
    color: var(--color-gray);
    text-decoration: none;
}

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

.footer__legal-info p {
    font-size: 14px;
    color: var(--color-gray);
}

/* === help-section.css === */
.help-section {
    padding: 70px 0;
    background-color: var(--color-white);
}

.help-wrapper {
    background-color: var(--color-dark-blue);
    padding: 40px;
    display: flex;
    gap: 40px;
    position: relative;
    overflow: hidden;
}

.help-wrapper::before {
    content: "";
    position: absolute;
    width: 366px;
    height: 366px;
    left: -121px;
    top: 122px;
    background: var(--color-cyan);
    filter: blur(210px);
    opacity: 0.2;
    pointer-events: none;
}

.help-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.help-info__title {
    font-size: 30px;
    font-weight: 600;
    line-height: 42px;
    color: var(--color-white);
    margin: 0 0 10px 0;
}

.help-info__subtitle {
    font-size: 15px;
    /*font-weight: 500;*/
    /*line-height: 25.2px;*/
    color: var(--color-gray-light);
    margin: 0 0 20px 0;
}

.specialist-card {
    margin-top: auto;
    max-width: 350px;
}

.specialist-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.specialist-card__avatar {
    width: 70px!important;
    height: 70px!important;
    /*border-radius: 50%;*/
    /*object-fit: cover;*/
}

.specialist-card__name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-white);
}

.specialist-card__position {
    font-size: 14px;
    color: var(--color-gray-light);
}

.specialist-card__bubble {
    background: var(--color-white);
    padding: 15px;
    color: var(--color-dark);
    font-size: 14px;
    line-height: 18.2px;
    position: relative;
    box-shadow: 0px 10px 33.5px rgba(0, 0, 0, 0.07);
}

.specialist-card__bubble::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 28px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--color-white);
}

.help-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 1;
}

.help-form__row {
    display: flex;
    gap: 20px;
}

.help-form__group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.help-form__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-white);
}

.help-form__label span {
    color: var(--color-red);
}

.help-form__input {
    min-height: 50px;
}

.help-form__input,
.help-form__textarea,
.file-upload {
    background: var(--color-blue-deep);
    border: none;
    padding: 10px;
    color: var(--color-white);
    font-size: 14px;
    outline: none;
}

.help-form__input::placeholder,
.help-form__textarea::placeholder {
    color: var(--color-gray-light);
}

.textarea-wrapper {
    position: relative;
}

.help-form__textarea {
    width: 100%;
    height: 120px;
    resize: none;
}

.textarea-counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    color: var(--color-gray-light);
}

.file-upload {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 10px;
}

.file-upload__text {
    color: var(--color-gray-light);
}

.file-upload-btn {
    background: var(--color-white);
    color: var(--color-dark-blue);
    padding: 6px 10px;

    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-upload-btn span {
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}

.help-form__policy {
    display: flex;
}

.custom-checkbox {
    display: flex;
    gap: 15px;
    cursor: pointer;
}

.custom-checkbox input {
    display: none;
}

.custom-checkbox__box {
    min-width: 25px;
    height: 25px;
    background: var(--color-blue-deep);
    position: relative;
}

.custom-checkbox input:checked + .custom-checkbox__box::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 19px;
    height: 19px;
    transform: translate(-50%, -50%);
    background: url(../img/icons/check-white.svg) no-repeat;
}

.custom-checkbox__text {
    font-size: 12px;
    color: var(--color-white);
    line-height: 14.4px;
}

.custom-checkbox__text a {
    color: var(--color-white);
    text-decoration: underline;
}

.help-form__submit {
    max-width: 368px;
}

.help-form__submit span,
.help-form__submit svg {
    color: var(--color-dark-blue);
}

/* === info-faq.css === */
.info-faq {
    padding: 30px 0;
    background-color: var(--color-white);
    font-family: var(--font-main);
}

.info-faq__wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.info-faq__text-block {
    flex: 1;
}

.info-faq__text-block .seo-content h2,
.info-faq__text-block .seo-content h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-dark);
    margin-bottom: 13px;
}

.info-faq__text-block .seo-content > :not(.seo-content__more):first-child {
    margin-top: 24px;
}

.info-faq__text-block .seo-content :is(h2, h3):not(:first-of-type) {
    margin-top: 12px;
}

.info-faq__text-block .seo-content p {
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-gray);
    margin-bottom: 15px;
}

.info-faq__text-block .seo-content ol,
.info-faq__text-block .seo-content ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
    list-style-position: outside;
}

.info-faq__text-block .seo-content ol > li,
.info-faq__text-block .seo-content ul > li {
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-gray);
    margin-bottom: 6px;
}

.info-faq__text-block .seo-content ol > li {
    list-style-type: decimal;
}

.info-faq__text-block .seo-content ul > li {
    list-style-type: disc;
}

.info-faq__text-block .seo-content:not(.is-opened) ol > li:nth-child(n + 4),
.info-faq__text-block .seo-content:not(.is-opened) ul > li:nth-child(n + 4) {
    display: none;
}

.seo-content__mini-section:nth-child(1) {
    margin-top: 24px;
}

.seo-content__mini-section:nth-child(2) {
    margin-top: 12px;
}

.seo-content__subtitle {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-dark);
    margin-bottom: 13px;
}

.seo-content__text {
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-gray);
    margin-bottom: 15px;
}

.seo-content__list {
    margin: 0 0 12px 0;
    padding-left: 20px;
    list-style-position: outside;
}

.seo-content__list li:nth-child(n + 4) {
    display: none;
}

.seo-content.is-opened .seo-content__list li:nth-child(n + 4) {
    display: list-item;
}

.seo-content.is-opened .js-seo-toggle svg {
    transform: rotate(-180deg);
}

.seo-content__list li {
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-gray);
    margin-bottom: 6px;
    list-style-type: decimal;
}

.seo-content__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-dark);
}

.seo-content__more svg {
    transition: transform 0.3s ease;
}

.seo-content__more.active svg {
    transform: rotate(-180deg);
}

.info-faq__questions {
    flex: 1;
}

.accordion {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.accordion__item {
    padding: 20.5px 20px;
    background-color: var(--color-bg);
    border-radius: 2px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.accordion__item:hover {
    background-color: var(--color-border-mid);
}

.accordion__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.accordion__header span {
    font-weight: 700;
    font-size: 15px;
    color: var(--color-dark);
    padding-right: 15px;
}

.accordion__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(0deg);
}

.accordion__item.active .accordion__icon {
    transform: rotate(-90deg);
}

.accordion__content-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
    overflow: hidden;
}

.accordion__item.active .accordion__content-wrapper {
    grid-template-rows: 1fr;
}

.accordion__content {
    min-height: 0;
}

.accordion__content-inner {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-dark);
}

.info-faq__questions .accordion__content-inner h2,
.info-faq__questions .accordion__content-inner h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-dark);
    margin-bottom: 13px;
}

.info-faq__questions .accordion__content-inner :is(h2, h3):not(:first-of-type) {
    margin-top: 12px;
}

.info-faq__questions .accordion__content-inner p {
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-dark);
    margin-bottom: 15px;
}

.info-faq__questions .accordion__content-inner p:last-child {
    margin-bottom: 0;
}

.info-faq__questions .accordion__content-inner ol,
.info-faq__questions .accordion__content-inner ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
    list-style-position: outside;
}

.info-faq__questions .accordion__content-inner ol > li,
.info-faq__questions .accordion__content-inner ul > li {
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-dark);
    margin-bottom: 6px;
}

.info-faq__questions .accordion__content-inner ol > li {
    list-style-type: decimal;
}

.info-faq__questions .accordion__content-inner ul > li {
    list-style-type: disc;
}

/* === partners-section.css === */

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

.partners-section__header {
    max-width: 850px;
    margin-bottom: 30px;
}

.partners-section__title {
    font-size: 30px;
    font-weight: 600;
    line-height: 42px;
    color: var(--color-dark);
    margin: 0 0 10px 0;
}

.partners-section__subtitle {
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    color: var(--color-gray);
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: var(--border-partners-section);
    border-left: var(--border-partners-section);
}

.partners-grid__item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 110px;
    padding: 20px;
    border-right: var(--border-partners-section);
    border-bottom: var(--border-partners-section);
    background-color: var(--color-white);
}

.partners-grid__img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.partners-grid__item:hover .partners-grid__img {
    transform: scale(1.05);
}

/* === popular-queries.css === */
.popular-queries {
    background-color: var(--color-white);
    padding: 20px 0;
    font-family: "Roboto", sans-serif;
}

.popular-queries__title {
    color: var(--color-dark);
    font-size: 30px;
    font-weight: 600;
    line-height: 42px;
    margin-bottom: 30px;
}

.popular-queries__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.popular-queries__tag {
    min-height: 45px;
    padding: 10px 15px;
    border: 1px solid var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--color-dark);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.popular-queries__tag:hover {
    background-color: var(--color-bg);
    border-color: var(--color-border-soft);
}

/* === related-products.css === */
.related-products {
    padding: 70px 0px;
}

.related-products-slider-wrapper,
.analogues-products-slider-wrapper {
    position: relative;
}

.related-products-slider,
.analogues-products-slider {
    border-top: 1px solid var(--color-bg);
    border-left: 1px solid var(--color-bg);
}

.related-products-slider .swiper-slide,
.analogues-products-slider .swiper-slide {
    height: auto !important;
}

.related-products .section-title,
.analogues-products .section-title {
    margin-bottom: 30px;
}

.related-products .product-card,
.analogues-products .product-card {
    height: 99.9%;
}

/* === reviews.css === */
.reviews {
    padding: 70px 0;
    background-color: var(--color-white);
}

.reviews__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
}

.reviews__info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.reviews__title {
    font-size: 30px;
    font-weight: 600;
    line-height: 42px;
    color: var(--color-dark);
    margin-bottom: 10px;
}

.reviews__subtitle {
    font-size: 18px;
    line-height: 25.2px;
    color: var(--color-gray);
    font-weight: 500;
}

.reviews__rating {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.reviews__yandex-badge {
    width: 65px;
    height: 65px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reviews__yandex-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.reviews__score-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}

.reviews__score-value {
    font-size: 81px;
    font-weight: 500;
    line-height: 74.52px;
    color: var(--color-dark);
}

.reviews__score-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reviews__stars {
    display: flex;
    gap: 7px;
}

.reviews__star {
    width: 31.2px;
    height: 31.2px;
    flex-shrink: 0;
    line-height: 0;
}

.reviews__star-icon {
    width: 31.2px;
    height: 31.2px;
    display: block;
}

.reviews__count {
    color: var(--color-gray);
    font-size: 18px;
    font-weight: 500;
    line-height: 25.2px;
}

.reviews__quotes {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.review-card {
    position: relative;
    padding: 30px;
    border: 2px solid var(--color-border);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.review-card__text {
    font-size: 14px;
    line-height: 18.2px;
    color: var(--color-dark);
    margin-bottom: 6px;
    padding-right: 40px;
}

.review-card__more {
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    color: var(--color-accent);
    text-decoration: underline;
    align-self: flex-start;
}

.review-card__platform-icon {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 60px;
    height: 60px;
}

.platform-svg-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    overflow: hidden;
}

.platform-svg-wrapper img {
    position: absolute;
    width: 47.5px;
    height: 35px;
    left: 6.25px;
    top: 12.5px;
    object-fit: contain;
}

.reviews__letters {
    background-color: var(--color-border);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.letters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.letters-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 23.8px;
    color: var(--color-dark);
}

.letters-nav {
    display: flex;
    gap: 0;
}

.letters-arrow {
    background: none;
    border: none;
    cursor: pointer;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.letters-arrow--prev {
    transform: rotate(0deg);
}

/* .letters-grid {
    display: flex;
    gap: 20px;
} */

.letters-slider {
    width: 100%;
    overflow: hidden;
}

.letters-arrow {
    background: none;
    border: none;
    color: var(--color-gray);
    cursor: pointer;
    padding: 5px;
    transition:
            color var(--transition-fast),
            opacity var(--transition-fast);
}

.letters-arrow:hover {
    color: var(--color-accent);
}

.letters-arrow.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

.letter-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    user-select: none;
}

.letter-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.letter-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.letter-caption {
    font-size: 12px;
    font-weight: 500;
    line-height: 16.8px;
    color: var(--color-gray);
    text-align: center;
}

/* === video-reviews.css === */
.video-slider-wrapper {
    position: relative;
}

.video-reviews {
    padding: 70px 0;
    background: var(--color-white);
}

.video-reviews__header {
    margin-bottom: 24px;
}

.main-section-title {
    font-family: var(--font-main);
    color: var(--color-dark);
    font-size: 30px;
    font-weight: 600;
    line-height: 42px;
    margin: 0;
}

.analogues-products__title {
    margin-bottom: 30px;
}

.video-card {
    height: 275px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.video-card__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.video-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.video-card__media::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(20, 21, 28, 0) 58%, #14151c 100%);
    z-index: 2;
    pointer-events: none;
}

.video-card__yt-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    transition: transform 0.3s ease;
}

.video-card__yt-btn .yt-bg {
    transition: fill 0.3s ease;
}

.video-card__info {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 4;
}

.video-card__title {
    color: var(--color-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 5px 0;
}

.video-card__duration {
    color: var(--color-white-60);
    font-size: 14px;
    font-weight: 400;
}

.video-card:hover .video-card__img {
    transform: scale(1.05);
}

.video-card:hover .yt-bg {
    fill: var(--color-red);
}

.video-card:hover .video-card__yt-btn {
    transform: translate(-50%, -50%) scale(1.1);
}

.slider-btn.swiper-button-disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   MEDIA QUERIES
   ============================================================ */

@media (max-width: 1360px) {
    .slider-nav--prev {
        left: 10px;
    }
    .slider-nav--next {
        right: 10px;
    }
}

@media (max-width: 1280px) {
    .top-bar,
    .contact-item-header__desctop {
        display: none;
    }
    .contact-item-header__mobile-item,
    .burger-menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background-color: var(--color-bg);
    }

    .main-header__contacts {
        gap: 15px;
    }

    .logo {
        text-decoration: none;
        flex-shrink: 0;
        max-width: 145px;
    }

    .main-header {
        padding: 16px 0px;
    }

    .mobile-menu {
        display: block;
        position: fixed;
        top: 76px;
        right: 0;
        width: 100%;
        height: 100%;
        background: var(--color-white);
        z-index: 1000;
        overflow-y: auto;
        padding: 10px;
        transform: translateX(-100%);
        transition: 0.3s;
        border-top: 1px solid var(--color-border);
    }
    .mobile-menu.active {
        transform: translateX(0);
    }
    .top-bar__list {
        flex-direction: column;
        gap: 9px;
    }
    .mobile-menu__content {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }
    .contact-item-header,
    .mobile-menu__contacts {
        display: flex;
        flex-direction: column;
    }

    .mobile-menu__contacts {
        gap: 20px;
    }

    .top-bar__info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .mobile-menu__send-btn {
        margin-top: -10px;
        padding: 20px 30px;
        background-color: var(--color-bg);
    }

    .mobile-menu__send-btn span {
        color: var(--color-dark);
    }

    .mobile-menu__button-catalog .btn-catalog {
        width: 100%;
        height: 60px;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .products-grid--list {
        grid-template-columns: 1fr;
    }
    .products-grid--list .product-card__bottom {
        flex: 0 0 200px;
    }
    .products-grid--list .product-card__img-wrap {
        width: 182px;
    }
}

@media (max-width: 1200px) {
    .category-hero__title {
        font-size: 24px;
    }
    .action-btn--comparison {
        display: none;
    }
    .main-header__container {
        gap: 20px;
    }
    .adv-card {
        padding: 20px;
    }
    .adv-card__map {
        height: 80%;
    }
    .adv-card__content {
        max-width: 364px;
    }
    .adv-card__text {
        font-size: 16px;
    }
    .adv-stat-value {
        font-size: 34px;
    }
    .adv-card__title {
        font-size: 24px;
    }
    .adv-card__subtitle {
        font-size: 20px;
    }
    .cta-card__title {
        font-size: 28px;
    }
    .help-info {
        flex: 0.7;
    }
    .help-wrapper {
        gap: 30px;
        padding: 30px;
    }
    .help-info__title {
        font-size: 25px;
        line-height: 35px;
    }
    .help-info__subtitle {
        font-size: 16px;
        margin-bottom: 32px;
    }
    .reviews__container,
    .reviews__quotes {
        gap: 20px;
    }
    .reviews__title {
        font-size: 26px;
        line-height: 35px;
    }
    .reviews__score-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .reviews__score-value {
        font-size: 70px;
    }
    .reviews__letters {
        padding: 20px;
        height: max-content;
    }
}

@media (max-width: 1024px) {
    .top-bar__nav {
        display: none;
    }
    .main-header__search-group .btn-catalog {
        display: none;
    }
    .main-header__search-group {
        min-width: 200px;
    }
    .action-btn--comparison {
        display: flex;
    }
    .advantages-grid {
        grid-template-columns: 1fr 1fr;
    }
    .adv-card--delivery {
        grid-column: span 2;
    }
    .adv-card__map {
        height: 100%;
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .products-grid--list {
        grid-template-columns: 1fr;
    }
    .cta-card__content {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-card__actions {
        width: 100%;
    }

    .btn-white {
        width: 100%;
        justify-content: center;
    }

    .cta-card {
        padding: 30px;
    }
    .main-section-title {
        font-size: 24px;
        line-height: 1.2;
    }

    .expert-content {
        padding: 40px 0;
    }
    .help-wrapper {
        flex-direction: column;
    }
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .partners-section__subtitle {
        margin-top: 4px;
    }
}

@media (max-width: 992px) {
    .category-hero__container {
        flex-direction: column-reverse;
    }

    .manager-card {
        width: 100%;
    }

    .swiper-dotts {
        display: flex;
    }

    .slider-controls {
        display: none;
    }

    .manager-card__bubble {
        max-width: 450px;
    }

    .category-hero__description {
        max-height: 56px;
        margin-bottom: 8px;
    }

    .category-hero__description::after {
        display: none;
    }

    .main-header__container {
        gap: 15px;
    }

    .logo {
        max-width: 127px;
    }
    .info-faq__wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .main-section-title {
        font-size: 24px;
    }
    .reviews,
    .video-reviews,
    .help-section,
    .advantages-section {
        padding: 30px 0px;
    }
    .reviews__container {
        grid-template-columns: 1fr;
    }
    .reviews__letters {
        grid-column: span 1;
    }
    .reviews__score-value {
        font-size: 64px;
    }
    .reviews__score-wrapper {
        align-items: center;
        flex-direction: row;
        gap: 20px;
    }

    .letters-slider {
        margin-bottom: -17px;
    }

    .products-grid--list .product-card__body {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .products-grid--list .product-card__bottom {
        flex: 1 1 auto;
        width: 100%;
    }
    .products-grid--list .product-card__price-row {
        flex-direction: row;
        align-items: center;
        gap: 5px;
    }
    .products-grid--list .product-card__status-row {
        display: none;
    }
    .products-grid--list .product-card__status-column {
        display: flex;
    }
    .products-grid--list .product-card__meta-specs {
        gap: 10px;
    }
    .slider-nav {
        display: none;
    }
    .footer__container {
        display: flex;
        flex-direction: column;
    }

    .footer__col--brand {
        order: 0;
    }

    .footer__col--contacts {
        order: 1;
    }

    .footer__col--nav {
        order: 2;
    }

    .footer__col--categories {
        order: 3;
    }
}

@media (max-width: 860px) {
    /*.sidebar.desctop,*/
    /*.selected-filters-desctop,*/
    /*.sidebar__back {*/
    /*    display: none;*/
    /*}*/

    body:not(.filter-open) .selected-filters-desctop {
        display: none;
    }

    .sidebar__back {
        display: none;
    }

    .selected-filters-desctop {
        margin-bottom: 20px;
    }

    .selected-filters-desctop .container {
        padding: 0;
    }



    .sidebar__selected-filters-mobile .selected-filters-desctop {
        padding: 15px 0;
        border-bottom: 1px solid var(--color-bg);
        margin-bottom: 20px;
    }

    .sidebar__selected-filters-mobile .selected-filters-desctop .container {
        padding: 0;
    }

    body.filter-open .sidebar {
        padding: 20px;
    }

    .catalog-filter-mob {
        display: block;
    }

    .catalog-filter-mob__button {
        padding: 15px 0px;
        height: 45px;
        width: 100%;
        background-color: var(--color-dark-blue);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: var(--color-white);
        font-weight: 700;
        font-size: 13px;
    }

    .catalog-filter-mob__inner {
        position: fixed;
        top: 0px;
        right: -100%;
        width: 100%;
        height: 100%;
        background: var(--color-white);
        z-index: 1000;
        overflow-y: auto;
        padding-top: 10px;
        transition: right 0.3s ease 0s;
    }

    .catalog-filter-mob__inner.open-filter-mob {
        right: 0;
    }

    .catalog-filter-mob__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 10px;
    }

    .catalog-filter-mob__title {
        font-weight: 600;
        font-size: 22px;
        line-height: 140%;
    }

    .catalog-filter-mob__close {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-bg);
    }

    .catalog-filter-mob__selected-filters {
        padding: 15px 10px;
        border-bottom: 1px solid var(--color-bg);
    }

    .catalog-filter-mob__filters {
        padding: 15px 10px;
    }

    .sidebar {
        width: 100%;
    }
    .categories-section {
        padding-top: 30px;
    }

    .categories-slider-container {
        position: relative;
    }

    .categories-slider-container::before {
        content: "";
        position: absolute;
        width: 18%;
        height: 100%;
        right: -10px;
        top: 0;
        z-index: 2;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--color-white) 76.78%);
    }
}

@media (max-width: 850px) {
    .main-header__search-group {
        display: none;
    }
    .logo {
        margin-right: auto;
    }
    .main-header {
        padding-bottom: 0;
    }
    .mobile-search-container {
        display: block;
        padding: 10px 0px;
    }
    .main-header {
        border-bottom: none;
    }
    .search-results-dropdown {
        width: 100%;
        top: 40px;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .breadcrumbs__list {
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .advantages-grid {
        grid-template-columns: 1fr;
    }
    .adv-card--delivery {
        grid-column: span 1;
    }
    .adv-card {
        min-height: 182px;
        gap: 30px;
    }
    .adv-card__icon {
        width: 60px;
        right: 20px;
        bottom: 20px;
    }
    .adv-delivery-list {
        margin-top: 20px;
    }
    .adv-card--white {
        padding: 0px;
        gap: 15px;
        padding-bottom: 20px;
    }
    .cta-card__title {
        font-size: 24px;
    }

    .cta-card {
        padding: 30px 20px;
    }
    .main-section-title {
        font-size: 24px;
        line-height: 1.2;
    }
    .partners-section__subtitle {
        font-size: 16px;
    }
    .partners-grid__item {
        height: 100px;
        padding: 15px;
    }
    .popular-queries__title {
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .popular-queries__tags {
        gap: 10px;
    }
    .video-card {
        height: 220px;
    }
    .main-section-title {
        font-size: 22px;
        line-height: 1.2;
    }
    .video-reviews__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

@media (max-width: 640px) {
    :root {
        --container-padding: 0 10px;
    }
    .breadcrumbs {
        padding: 5px 0px;
    }
    .category-hero {
        padding: 10px 0px 20px;
    }
    .category-hero__container {
        gap: 20px;
    }
    .category-hero__header {
        flex-direction: column;
        gap: 0px;
        align-items: flex-start;
        margin-bottom: 10px;
    }
    .category-hero__title {
        font-size: 22px;
        line-height: 140%;
    }
    .manager-card {
        padding: 20px;
    }
    .manager-card__link {
        font-size: 14px;
    }
    .social-sq-btn,
    .manager-card__avatar {
        width: 40px;
        height: 40px;
    }
    .social-sq-btn img {
        width: 21px;
        height: 21px;
    }
    .manager-card__name {
        font-size: 12px;
    }
    .manager-card__post,
    .manager-card__bubble,
    .breadcrumbs__link,
    .breadcrumbs__current {
        font-size: 10px;
    }
    .manager-card__bubble {
        padding: 10px;
    }
    .category-card__name,
    .category-card__count {
        font-size: 10px;
    }
    .category-card__img {
        max-width: 79%;
    }
    .main-header {
        padding: 10px 0px 0px 0px;
    }
    .main-header__contacts,
    .social-icons,
    .main-header__container {
        gap: 7px;
    }
    .logo {
        max-width: 116px;
    }
    .mobile-menu {
        top: 60px;
    }
    .search-results-item__img {
        width: 63px;
        height: 66px;
    }
    .search-results__price-current {
        font-size: 14px;
    }
    .search-results-item {
        padding: 10px;
    }

    .header-actions {
        position: fixed;
        width: 100%;
        height: 60px;
        bottom: 0;
        box-shadow: 0 -4px 14px 0 rgba(0, 0, 0, 0.05);
        background: var(--color-white);
        z-index: 10;
        justify-content: space-around;
        align-items: center;
        margin: 0px -10px;
        gap: 0px;
    }

    .action-btn--catalog {
        display: flex;
    }

    .action-btn {
        gap: 3px;
        padding: 0px 20px;
        position: relative;
    }
    .action-btn::before {
        content: "";
        position: absolute;
        width: 1px;
        height: 23px;
        right: 0;
        top: 9.5px;
        background-color: var(--color-bg);
    }

    .action-btn:last-child::before {
        display: none;
    }
    .adv-card {
        gap: 20px;
    }
    .adv-card__title {
        font-size: 22px;
    }
    .adv-stat-value {
        font-size: 35px;
        margin-bottom: 0px;
    }
    .adv-stat-label {
        font-size: 13px;
    }
    .adv-card__subtitle {
        margin-bottom: 10px;
    }

    .adv-card--relative {
        min-height: 229px;
    }
    .adv-card__icon {
        right: 15px;
        bottom: 15px;
    }
    .adv-features {
        flex-direction: column;
        gap: 10px;
    }
    .adv-feature-box {
        padding: 10px 15px;
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
    }
    .adv-feature-label {
        margin-bottom: 0px;
    }
    .adv-card--outline {
        padding: 30px;
    }
    .adv-card__btn {
        margin-top: 20px;
        font-size: 13px;
    }

    .adv-card__btn img {
        width: 15px;
        height: 15px;
    }
    .adv-card__text {
        font-size: 18px;
    }

    .adv-card--delivery {
        padding: 20px 20px 187px 20px !important;
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .adv-card__map {
        top: 136px;
        position: absolute;
        pointer-events: none;
    }

    .adv-delivery-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .adv-delivery-item {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
    }

    .adv-delivery-arrow {
        width: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .adv-delivery-time {
        font-size: 16px;
        font-weight: 500;
        color: var(--color-dark);
    }
    .catalog-page {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
    }
    .products-grid-btn-more {
        display: none;
    }
    .catalog-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .catalog-toolbar__right {
        width: 100%;
        justify-content: space-between;
    }
    .sort-dropdown {
        left: 0;
    }
    .product-card__name {
        font-size: 13px;
        line-height: 145%;
    }
    .product-card__body {
        padding: 10px;
    }
    .product-card__button {
        padding: 10px;
        height: 40px;
        max-width: 100%;
    }
    .product-card__button-label {
        font-size: 13px;
    }

    .product-card__button-icon {
        width: 15px;
        height: 15px;
    }
    .product-card__price {
        font-size: 18px;
    }
    .product-card__price-old {
        font-size: 12px;
        line-height: 145%;
    }
    .badge-product-card {
        font-size: 8px;
        padding: 2px 5px;
        padding-left: 22px;
    }

    .badge-product-card--hit::before,
    .badge-product-card--sale::before,
    .badge-product-card--bonus-blur::before {
        width: 12px;
        height: 12px;
        left: 4px;
        top: 2px;
    }
    .product-card__img-wrap {
        height: 185px;
    }
    .product-card__img {
        height: 85%;
        top: 24px;
    }
    .btn-pc-add {
        width: 40px;
        height: 40px;
        padding: 10px;
    }
    .qty-ctrl {
        height: 40px;
        padding: 10px;
    }
    .qty-ctrl__btn {
        width: 20px;
        height: 20px;
    }
    .products-grid--list .product-card__body {
        padding: 10px;
        width: 100%;
    }
    .products-grid--list .product-card__img-wrap {
        padding: 7px;
    }
    .products-grid--list .product-card__img-wrap {
        width: 140px;
        height: 100%;
    }
    .products-grid--list .product-card__img {
        width: 100%;
        height: 48%;
        left: 0;
        top: 10px;
    }
    .pagination {
        padding-top: 20px;
    }
    .categories-section {
        padding: 20px 0px;
    }
    .categories-section .slider-nav {
        display: none;
    }
    .cta-section {
        padding: 30px 0px;
    }
    .cta-card__title {
        font-size: 22px;
        margin-bottom: 4px;
    }
    .cta-card__description {
        font-size: 14px;
    }
    .cta-card__user {
        gap: 15px;
        align-items: flex-start;
    }
    .cta-card__avatar {
        width: 54px;
        height: 54px;
    }

    .btn-white {
        font-size: 14px;
        padding: 0px 30px;
        height: 60px;
        justify-content: space-between;
    }
    .expert-content__header {
        margin-bottom: 17px;
    }

    .expert-content__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .expert-card__image-wrapper {
        height: 220px;
    }
    .footer__main {
        padding-bottom: 20px;
    }
    .footer__bottom {
        padding-bottom: 70px;
    }
    .footer__bottom-container {
        display: flex;
        flex-direction: column-reverse;
        gap: 10px;
    }
    .footer__watermark {
        left: auto;
        right: 0;
        top: -36px;
        width: 288px;
    }
    .help-form__row {
        flex-direction: column;
    }
    .help-info__title {
        font-size: 22px;
        line-height: 140%;
    }

    .help-wrapper {
        padding: 30px 20px;
        gap: 40px;
    }

    .help-form {
        gap: 20px;
    }

    .help-form__submit {
        max-width: 100%;
        margin-top: 15px;
        font-size: 13px;
        gap: 15px;
        height: 50px;
    }

    .custom-checkbox {
        align-items: center;
    }
    .seo-content__mini-section:nth-child(1) {
        margin-top: 20px;
    }
    .info-faq__text-block .seo-content > :not(.seo-content__more):first-child {
        margin-top: 20px;
    }
    .info-faq__text-block .seo-content h2,
    .info-faq__text-block .seo-content h3 {
        margin-bottom: 10px;
    }
    .seo-content__subtitle {
        margin-bottom: 10px;
    }
    .accordion__header span {
        font-size: 14px;
        padding-right: 10px;
    }
    .partners-section {
        padding: 30px 0px;
    }

    .partners-section__header {
        margin-bottom: 20px;
    }

    .partners-grid__item {
        height: 76px;
        padding: 5px;
    }
    .popular-queries__tag {
        font-size: 10px;
        padding: 9px 7px;
        min-height: 30px;
    }
    .reviews__title {
        font-size: 22px;
        line-height: 140%;
    }
    .reviews__subtitle {
        font-size: 16px;
        line-height: 140%;
    }
    .reviews__rating {
        margin-top: 25px;
    }
    .reviews__yandex-badge {
        width: 50px;
        height: 50px;
    }
    .reviews__star {
        width: 24.4px;
        height: 24.4px;
    }
    .reviews__star-icon {
        width: 24.4px;
        height: 24.4px;
    }
    .reviews__count {
        font-size: 15px;
    }
    .reviews__score-meta {
        gap: 7px;
    }
    .review-card {
        padding: 20px;
    }

    .letters-nav {
        display: none;
    }

    .analogues-products__title {
        margin-bottom: 10px;
    }

    .also-buy-card__btn {
        max-width: 103px;
        height: 30px;
        padding: 0px 12px;
        gap: 14px;
    }

    .also-buy-card__btn span {
        font-size: 12px;
    }

    .also-buy-card__btn svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 370px) {
    .contact-item-header__mobile-item,
    .burger-menu-button,
    .social-btn {
        width: 35px;
        height: 35px;
    }
    .logo {
        max-width: 85px;
    }
    .mobile-menu {
        top: 54px;
    }
    .action-btn {
        padding: 0px 16px;
    }
    .products-grid {
        grid-template-columns: 1fr;
    }
    .products-grid--list .product-card {
        flex-direction: column;
    }
    .products-grid--list .product-card__img {
        height: 100%;
    }
    .products-grid--list .product-card__img-wrap {
        height: 200px;
        width: 100%;
    }
    .product-card__button {
        max-width: 100%;
    }
    .footer__policy {
        flex-direction: column;
    }
}

@media (max-width: 360px) {
    .reviews__yandex-badge {
        width: 40px;
        height: 40px;
    }
    .reviews__rating {
        gap: 15px;
    }
    .reviews__score-value {
        font-size: 46px;
    }
    .reviews__star {
        width: 25.4px;
        height: 25.4px;
    }
    .reviews__star-icon {
        width: 25.4px;
        height: 25.4px;
    }
}

@media (max-width: 340px) {
    .cta-card__title {
        font-size: 20px;
    }
    .help-form__submit {
        font-size: 11px;
    }

    .help-form__submit svg {
        width: 18px;
        height: 18px;
    }
}

.burger-menu-button .icon-cross {
    display: none;
}

.burger-menu-button.active .icon-burger {
    display: none;
}

.burger-menu-button.active .icon-cross {
    display: block;
}


/******** pager *********/
li.pagination__btn.pagination__btn--arrow.disabled span {
    color: #B3BBBE;
}
li.pagination__btn a {
    color: black;
    padding: 15px;
}
li.pagination__btn.pagination__btn--active a {
    color: white;
}

/*.pagination__btn--arrow {*/
/*    width: 32px;*/
/*    height: 32px;*/
/*    background-color: #B3BBBE;*/

/*    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13"><path d="M1 1L7 6.5L1 12" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;*/
/*}*/

/*********** search ***********/
.search-result {
    opacity: 0;
    visibility: hidden;
}
.search-result.is-opened {
    opacity: 1;
    visibility: visible
}
.search-results-dropdown {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: none;
    max-height: 500px;
}

/* ********************       Loader      *********************** */

.loader {
    width: 48px;
    height: 48px;
    margin: 3.5rem auto 0;
    background: url(/img/loader.gif) 50% no-repeat;
    background-size: contain
}

.search-result__wrapper .loader {
    margin-top: 0;
    width: 450px;
}

/*****************  Service *****************/
.hidden {
    display: none;
}

/*** Hero *********/
.category-hero__content ul{
    list-style: none;
    padding: 0;
    margin: 0 0 8px 6px;
}

.category-hero__content li {
    font-size: 14px;
    line-height: 18.2px;
    color: var(--color-gray);
    position: relative;
    padding-left: 15px;
}

.category-hero__content li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #b3bbbe;
}

/***********  catalog ***********/

.product-card__img, .swiper-slide img {
    opacity: 0;
    transition: opacity .2s ease;
}

.product-card__img-wrapper.is-loaded .product-card__img,
.swiper-slide div.is-loaded img,
.swiper-slide.is-loaded img,
.swiper-slide a.is-loaded img {
    opacity: 1;
}

/************ main  *********/
.like-link {
    cursor: pointer;
}

/********* popup *********/
.popup,
.popup__layer {
    position: fixed;
    display: none
}

.popup__layer {
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 100;
    top: 0;
    left: 0
}

.popup {
    z-index: 101;
    top: 50%;
    left: 50%;
    overflow: auto;
    width: 95%;
    max-width: 670px;
    max-height: 95vh;
    padding: 50px;
    transform: translate(-50%, -50%);
    background-color: #fff;
    overflow-x: hidden;
}

.popup.msg-order-popup {
    max-width: 560px;
    max-height: none;
    padding: 40px 45px;
    overflow: hidden;
}

#callback-popup {
    max-width: 420px;
}

.msg-order-popup__text,
.msg-order-popup__text p {
    font-size: 20px;
    margin-bottom: 0;
    text-align: center;
    color: #aab0b1;
    overflow-wrap: break-word;
}

.popup__close {
    position: absolute;
    z-index: 1;
    width: 1.1rem;
    height: 1.1rem;
    top: 1.5rem;
    right: 1.5rem;
    background: url(/img/svg/popup-close.svg) no-repeat 50%;
    background-size: contain;
    cursor: pointer
}

.popup__back {
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: transform .5s;
}

.popup-form a {
    color: var(--color-accent);
}

.popup-form__label span,
.popup__title {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 30px;
    color: #272425;
    display: flex;
}

.popup__text {
    margin: -20px 0 24px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #5c5c5c;
}

@media screen and (max-width: 767px) {
    .popup__title {
        font-size: 20px;
        line-height: 27px
    }

    .popup__text {
        font-size: 14px;
        line-height: 20px;
        margin: -16px 0 20px;
    }
}

.popup-form {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.popup-form,
.popup-form__input-file,
.popup-form__label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.popup-form__label {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 30px
}

.popup-form__label span {
    font-size: 14px;
    line-height: 14px;
    display: block;
    margin-bottom: 10px
}

.popup-form__label span i {
    font-style: normal;
    color: #e2e2e2
}

.popup-form__label input,
.popup-form__label textarea {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    width: 100%;
    color: #272425;
    border: 1px solid #e5e5e5;
    box-shadow: none;
    text-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.popup-form__label input {
    padding: 12px 14px
}

.popup-form__label textarea {
    min-height: 100px;
    padding: 14px
}

.popup-form__input-file {
    position: relative;
    overflow: hidden;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /*height: 17px;*/
    margin-bottom: 17px
}

@media screen and (max-width: 480px) {
    .popup-form__input-file {
        height: auto
    }
}

.popup-form__input-file input {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 20px;
    cursor: pointer;
    opacity: 0
}

.popup-form__input-file svg {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    fill: #009bc9;
    width: 12px;
    height: 17px;
    margin-right: 15px
}

.popup-form__input-file span {
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #253a5a
}

.popup-form__submit {
    width: 100%
}

.popup-form__submit-input {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 10px;
    padding: 13px 20px;
    -webkit-transition: .5s;
    transition: .5s;
    text-decoration: none;
    color: #fff;
    border: 0;
    background-color: #009bc9
}

@media screen and (max-width: 480px) {
    .popup-form__submit-input {
        width: 100%
    }
}

.popup-form__submit-input:hover {
    color: #fff;
    background-color: #0cbcf1
}

.popup-form__submit-agree {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    display: block;
    color: #979ea0
}

.popup-form__submit-agree a {
    text-decoration: none;
    color: #253a5a
}

.popup-form__submit-agree a:hover {
    text-decoration: underline;
    color: #009bc9
}

.faq-popup,
.light-request-popup,
.login-popup {
    max-width: 400px
}

@media screen and (max-width: 480px) {
    .faq-popup,
    .light-request-popup,
    .login-popup {
        max-width: 95%
    }
}

.faq-popup .popup-form__submit-input,
.light-request-popup .popup-form__submit-input,
.login-popup .popup-form__submit-input {
    width: 100%
}

.popup-form__forgot-password {
    margin-top: -15px;
    margin-bottom: 40px
}

@media screen and (max-width: 480px) {
    .popup-form__forgot-password {
        margin-bottom: 20px
    }
}

.popup-form__btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%
}

@media screen and (max-width: 480px) {
    .popup-form__btns {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.popup-form__btns .btn {
    padding-right: 30px;
    padding-left: 30px
}

@media screen and (max-width: 480px) {
    .popup-form__btns .btn {
        width: 100%;
        margin-bottom: 15px
    }

    .popup-form__btns .btn:last-child {
        margin-bottom: 0
    }
}

.header-menu__link:hover::before,
.popup-form__btns .btn--100 {
    width: 100%
}

.popup-form__btn-user {
    position: relative
}

@media screen and (max-width: 480px) {
    .popup-form__btn-user {
        width: 100%
    }
}

.popup-form__btn-user svg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 22px;
    fill: #009bc9;
    width: 14px;
    height: 17px;
    margin: auto;
    cursor: pointer
}

@media screen and (max-width: 480px) {
    .popup-form__btn-user svg {
        display: none
    }
}

.popup-form__btn-user .btn {
    padding-right: 15px;
    padding-left: 47px
}

@media screen and (max-width: 480px) {
    .popup-form__btn-user .btn {
        padding-left: 15px
    }
}

@media screen and (max-width: 767px) {
    #popup-review-form .popup-form__label {
        width: 100% !important;
    }
    #popup-review-form .popup-form__footer {
        display: inline-block;
    }
    #popup-review-form .popup-form__capcha {
        display: block;
        width: 100%;
        margin-bottom: 20px;
        overflow: scroll;
    }
    #popup-review-form .popup-form__capcha .g-recaptcha > div {
        margin: 0 auto;
    }
    #popup-review-form .popup-form__submit {
        display: block;
        text-align: center;
        width: 100%;
    }
}

.popup-form input {
    outline: none;
}

.popup-form input:focus {
    border-color: var(--color-accent);
}

/************** btn **************/
.btn {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 0 30px;
    transition: background-color 0.3s ease 0s;
    border: none;
    color: var(--color-white);
    background-color: var(--color-dark-blue);
    cursor: pointer;
}

.btn:hover {
    background-color: var(--color-accent);
}


/********** mob filter *********/
@media (max-width: 991px) {

    .sidebar {
        position: fixed;
        inset: 0;
        z-index: 1000;

        background: #fff;

        overflow-y: auto;

        transform: translateX(100%);
        transition: transform .3s ease;

        visibility: hidden;
    }

    .sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    body.filter-open {
        overflow: hidden;
    }

    .catalog-filter-overlay {
        position: fixed;
        inset: 0;
        z-index: 999;

        background: rgba(0,0,0,.4);

        opacity: 0;
        visibility: hidden;
        transition: .3s;
    }

    .catalog-filter-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

    .catalog-filter-mob__top {
        display: flex;
    }
}

@media (min-width: 992px) {

    .catalog-filter-overlay,
    .catalog-filter-mob__top {
        display: none;
    }
}

/********* city select popup ***********/
.city-popup {
    max-width: 400px;
}

/********* favorites ****************/
.category-tab__list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.category-tab__item {
    border: 1px solid var(--color-bg);
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.3s ease 0s;
}

.category-tab__item.active {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
}

.catalog-message {
    text-align: center;
    font-size: 16px;
    margin-bottom: 30px;
}

.btn-catalog a {
    text-decoration: none;
    color: var(--color-white);
}


.catalog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    margin: 100px 0;
}

/************* product card **************/
/*.info-product-card__brand-logo img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*}*/


label.error {
    display: block;
    color: #c42323;
    margin-left: 10px;
}

input.error, textarea.error {
    border-color: #ed1b24 !important;
    background: #fbd1d3 !important;
}

input.error {
    border: thin solid #ed1b24 !important;
}

.popup-form__submit-agree .error {
    display: inline;
}

.product-details__tabs {
    scroll-margin-top: 110px;
}

.popup-form__label input.error {
    border: 1px solid red;
}

/********************** manager *****************/
.manager-circle {
    overflow: hidden;
    width: 50px;
    height: 50px;
    border-radius: 50%
}

.manager-circle img {
    display: block;
    width: 100%
}