:root {
    --ani-header-border: var(--color-light-grey);
}

.ani-header {
    --ani-header-control-height: 44px;
    --ani-sections-height: 56px;
    --ani-header-gap: 20px;

    position: sticky;
    top: 0;
    z-index: 200;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--ani-header-border);
    font-family: var(--font-family);
    transition: box-shadow 0.25s ease-in-out;
}

.ani-header__inner {
    display: flex;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: var(--page-padding-x);
}

.ani-icon {
    display: block;
    flex: 0 0 auto;
}

.ani-header__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ani-header__topbar {
    height: 40px;
    background-color: var(--color-very-light-grey);
    transition: height 0.25s ease-in-out;
}

.ani-header__topbar .ani-header__inner {
    transition: opacity 0.15s ease-in-out, visibility 0s linear 0.15s;
}

.ani-header__topbar .ani-header__inner {
    justify-content: space-between;
    height: 40px;
}

.ani-header__phone {
    display: flex;
    align-items: center;
    gap: 8px;
    font: var(--text-s2) var(--font-family);
    color: var(--color-text-regular);
    text-decoration: none;
}

.ani-header__phone .ani-icon {
    color: var(--color-dark-grey);
}

.ani-topmenu__list {
    display: flex;
    align-items: center;
    gap: 32px;
}

.ani-topmenu__item {
    position: relative;
}

.ani-topmenu__link {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    font: var(--text-s2) var(--font-family);
    color: var(--color-text-regular);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.ani-topmenu__link:hover,
.ani-topmenu__link.is-active {
    color: var(--color-blue);
}

.ani-topmenu__arrow {
    width: 12px;
    height: 12px;
    color: var(--color-dark-grey);
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.ani-topmenu__item--parent:hover > .ani-topmenu__link,
.ani-topmenu__item--parent:focus-within > .ani-topmenu__link,
.ani-topmenu__link.is-active {
    color: var(--color-blue);
}

.ani-topmenu__item--parent:hover > .ani-topmenu__link .ani-topmenu__arrow,
.ani-topmenu__item--parent:focus-within > .ani-topmenu__link .ani-topmenu__arrow {
    color: var(--color-blue);
    transform: rotate(180deg);
}

.ani-topmenu__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    display: none;
    min-width: 220px;
    padding: 12px 16px;
    background-color: var(--color-white);
    box-shadow: 0 4px 16px rgb(41 45 50 / 12%);
}

.ani-topmenu__item--parent:hover > .ani-topmenu__dropdown,
.ani-topmenu__item--parent:focus-within > .ani-topmenu__dropdown {
    display: block;
}

.ani-topmenu__dropdown-link {
    display: block;
    padding: 4px 0;
    font: var(--text-s2) var(--font-family);
    color: var(--color-text-regular);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.ani-topmenu__dropdown-link:hover,
.ani-topmenu__dropdown-link.is-active {
    color: var(--color-blue);
}

.ani-header__main .ani-header__inner {
    padding-block: 16px;
}

.ani-header__logo {
    flex: 0 0 auto;
    display: block;
    margin-right: 86px;
}

.ani-header__logo picture {
    display: block;
}

.ani-header__logo img {
    width: auto;
    height: 52px;
}

.ani-header__catalog-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 0 0 auto;
    height: var(--ani-header-control-height);
    margin-right: 16px;
    padding-inline: 24px;
    background-color: var(--color-red);
    color: var(--color-white);
    font: var(--text-t2) var(--font-family);
    cursor: pointer;
}

.ani-header__catalog-icon--close,
.ani-header[data-catalog-open] .ani-header__catalog-icon:not(.ani-header__catalog-icon--close) {
    display: none;
}

.ani-header[data-catalog-open] .ani-header__catalog-icon--close {
    display: block;
}

.ani-header__search {
    position: relative;
    flex: 0 1 490px;
    min-width: 0;
    margin-right: 20px;
}

.ani-search {
    position: relative;
    display: flex;
    align-items: center;
}

.ani-search__icon {
    position: absolute;
    left: 16px;
    color: var(--color-grey);
    pointer-events: none;
}

.ani-search__input,
.ani-search input[type="search"] {
    width: 100%;
    height: var(--ani-header-control-height);
    padding: 0 16px 0 40px;
    border: 1px solid var(--ani-header-border);
    background-color: var(--color-white);
    font: var(--text-t3) var(--font-family);
    color: var(--color-text-regular);
    appearance: none;
    transition: border-color 0.2s ease-in-out;
}

.ani-search__input:focus,
.ani-search input[type="search"]:focus {
    border-color: var(--color-blue);
}

.ani-search__input::placeholder,
.ani-search input[type="search"]::placeholder {
    color: var(--color-grey);
}

.ani-search__suggest {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 200px;
    overflow-y: auto;
    background-color: var(--color-white);
    border: 1px solid var(--ani-header-border);
    box-shadow: 0 4px 16px rgb(41 45 50 / 12%);
    font: var(--text-t3) var(--font-family);
    color: var(--color-text-regular);
}

.ani-search__suggest ul > :not(li) {
    display: block;
    margin: 0;
    padding: 12px 16px;
    color: var(--color-dark-grey);
}

.ani-search__suggest li a,
.ani-search__suggest li > * {
    display: block;
    padding: 12px 16px;
    font: var(--text-t3) var(--font-family);
    color: var(--color-text-regular);
    text-decoration: none;
}

.ani-search__suggest li a:hover {
    background-color: var(--color-hover-background);
}

.ani-header__account {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
}

.ani-header__icon-button {
    position: relative;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--ani-header-control-height);
    height: var(--ani-header-control-height);
    border: 1px solid var(--ani-header-border);
    color: var(--color-text-regular);
    text-decoration: none;
    transition: border-color 0.2s ease-in-out;
}

.ani-header__icon-button:hover {
    border-color: var(--color-blue);
}

.ani-header__counter {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background-color: var(--color-red);
    color: var(--color-white);
    font-size: 10px;
    line-height: 1;
}

.ani-header__counter[hidden] {
    display: none;
}

.ani-header__sections {
    position: relative;
    overflow: hidden;
    height: var(--ani-sections-height);
    transition: height 0.25s ease-in-out;
}

.ani-header__sections .ani-header__inner {
    position: relative;
    padding-block: 8px 16px;
}

.ani-header__section-list {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.ani-header__section-list::-webkit-scrollbar {
    display: none;
}

.ani-header__section-list > li {
    flex: 0 0 auto;
    display: flex;
}

.ani-section-link {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    height: 32px;
    padding-inline: 16px;
    background-color: var(--color-very-light-grey);
    font: var(--text-t3) var(--font-family);
    color: var(--color-text-regular);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease-in-out;
}

.ani-section-link:hover {
    background-color: var(--color-hover-background);
}

.ani-section-link__icon {
    color: var(--color-blue);
}

.ani-section-link--promo {
    background-color: var(--color-reg-light);
}

.ani-section-link--promo .ani-section-link__icon {
    color: var(--color-red);
}

.ani-section-link--new {
    background-color: var(--color-green-light);
}

.ani-section-link--new .ani-section-link__icon {
    color: var(--color-green);
}

.ani-header__section-nav {
    position: absolute;
    top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 1px solid var(--ani-header-border);
    box-shadow: 0 2px 8px rgb(41 45 50 / 12%);
    color: var(--color-text-regular);
    cursor: pointer;
}

.ani-header__section-nav--prev {
    left: calc(var(--page-padding-x) - 16px);
}

.ani-header__section-nav--prev .ani-icon {
    transform: rotate(180deg);
}

.ani-header__section-nav--next {
    right: calc(var(--page-padding-x) - 16px);
}

.ani-header__section-nav[hidden] {
    display: none;
}

.ani-header[data-catalog-open] .ani-header__sections {
    visibility: hidden;
}

.ani-catalog-menu {
    position: absolute;
    top: calc(100% - var(--ani-sections-height));
    left: 0;
    right: 0;
    z-index: 90;
    max-height: calc(100vh - 100% + var(--ani-sections-height));
    overflow-y: auto;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--ani-header-border);
}

.ani-catalog-menu[hidden] {
    display: none;
}

.ani-catalog-menu .ani-header__inner {
    display: block;
    padding-block: 38px 40px;
}

.ani-catalog-menu__columns {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.ani-catalog-menu__column {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 320px;
}

.ani-catalog-menu__group {
    margin-bottom: 32px;
}

.ani-catalog-menu__group:last-child {
    margin-bottom: 0;
}

.ani-catalog-menu__title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font: var(--text-t2) var(--font-family);
    color: var(--color-text-regular);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.ani-catalog-menu__title:hover {
    color: var(--color-blue);
}

.ani-catalog-menu__icon {
    margin-top: 1px;
    color: var(--color-blue);
}

.ani-catalog-menu__title--promo {
    color: var(--color-red);
}

.ani-catalog-menu__title--promo .ani-catalog-menu__icon {
    color: var(--color-red);
}

.ani-catalog-menu__title--new {
    color: var(--color-green);
}

.ani-catalog-menu__title--new .ani-catalog-menu__icon {
    color: var(--color-green);
}

.ani-catalog-menu__list {
    margin-top: 12px;
    padding-left: 28px;
}

.ani-catalog-menu__link {
    display: block;
    padding: 3px 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--color-text-regular);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.ani-catalog-menu__link:hover {
    color: var(--color-blue);
}

@media screen and (width >= 1024px) {
    .ani-header__overlay {
        transition: none;
    }

    .ani-header[data-compact] {
        --ani-sections-height: 0px;
        box-shadow:
            0 6px 14px rgb(0 0 0 / 7%),
            0 25px 25px rgb(0 0 0 / 6%),
            0 57px 34px rgb(0 0 0 / 3%),
            0 102px 41px rgb(0 0 0 / 1%);
    }

    .ani-header[data-compact] .ani-header__topbar {
        height: 0;
    }

    .ani-header[data-compact] .ani-header__topbar .ani-header__inner {
        opacity: 0;
        visibility: hidden;
    }
}

.ani-header__overlay {
    position: fixed;
    inset: 0;
    z-index: 180;
    background-color: rgb(41 45 50 / 40%);
}

.ani-header__overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
}

.ani-header__overlay:not([hidden]) {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.ani-header__overlay[hidden] {
    display: block;
}

.ani-header__mobile,
.ani-header__mobile-search {
    display: none;
}

.ani-drawer {
    --ani-drawer-padding: 32px;

    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 205;
    display: flex;
    flex-direction: column;
    width: 374px;
    max-width: calc(100vw - 64px);
    background-color: var(--color-white);
    font-family: var(--font-family);
}

.ani-drawer {
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s ease-in-out, visibility 0s linear 0.25s;
}

.ani-drawer:not([hidden]) {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
}

.ani-drawer[hidden] {
    display: flex;
}

.ani-drawer__bar {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    height: 44px;
    border-bottom: 1px solid var(--ani-header-border);
}

.ani-drawer__bar-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    color: var(--color-text-regular);
    text-decoration: none;
    cursor: pointer;
}

.ani-drawer__bar-cell:first-child {
    border-right: 1px solid var(--ani-header-border);
}

.ani-drawer__bar-cell:last-child {
    border-left: 1px solid var(--ani-header-border);
}

.ani-drawer__bar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
}

.ani-drawer__bar-logo img {
    width: auto;
    height: 32px;
}

.ani-drawer__body {
    flex: 1 1 auto;
    padding-top: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ani-drawer__catalog {
    padding-inline: var(--ani-drawer-padding);
}

.ani-drawer__item + .ani-drawer__item > .ani-drawer__row {
    border-top: 1px solid var(--color-light-grey);
}

.ani-drawer__row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding-block: 16px;
    font: var(--text-t2) var(--font-family);
    color: var(--color-text-regular);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.ani-drawer__row-icon {
    color: var(--color-blue);
}

.ani-drawer__row--promo {
    color: var(--color-red);
}

.ani-drawer__row--promo .ani-drawer__row-icon {
    color: var(--color-red);
}

.ani-drawer__row--new {
    color: var(--color-green);
}

.ani-drawer__row--new .ani-drawer__row-icon {
    color: var(--color-green);
}

.ani-drawer__row span {
    flex: 1 1 auto;
    min-width: 0;
}

.ani-drawer__row-arrow {
    color: var(--color-dark-grey);
    transition: transform 0.2s ease-in-out;
}

.ani-drawer__row[aria-expanded="true"] .ani-drawer__row-arrow {
    transform: rotate(180deg);
}

.ani-drawer__subwrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease-in-out;
}

.ani-drawer__row[aria-expanded="true"] + .ani-drawer__subwrap {
    grid-template-rows: 1fr;
}

.ani-drawer__sublist {
    overflow: hidden;
    min-height: 0;
    padding: 0 0 8px 28px;
    visibility: hidden;
    transition: visibility 0s linear 0.25s;
}

.ani-drawer__row[aria-expanded="true"] + .ani-drawer__subwrap .ani-drawer__sublist {
    visibility: visible;
    transition-delay: 0s;
}

.ani-drawer__sublink {
    display: block;
    padding: 8px 0;
    font: var(--text-s2) var(--font-family);
    color: var(--color-text-regular);
    text-decoration: none;
}

.ani-drawer__pages {
    margin-top: 32px;
    padding-inline: var(--ani-drawer-padding);
    background-color: var(--color-very-light-grey);
}

.ani-drawer__pages .ani-drawer__row {
    font: var(--text-s2) var(--font-family);
}

.ani-drawer__pages .ani-drawer__item + .ani-drawer__item > .ani-drawer__row {
    border-top: none;
}

.ani-drawer__phone {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 32px var(--ani-drawer-padding) 24px;
    font: var(--text-s2) var(--font-family);
    color: var(--color-text-regular);
    text-decoration: none;
}

.ani-drawer__phone .ani-icon {
    color: var(--color-dark-grey);
}

@media screen and (width < 1400px) {
    .ani-header__logo {
        margin-right: 32px;
    }

    .ani-header__search {
        flex: 1 1 auto;
    }
}

@media screen and (width < 1024px) {
    .ani-header__topbar,
    .ani-header__main,
    .ani-header__sections {
        display: none;
    }

    .ani-header__mobile {
        display: flex;
        align-items: stretch;
        height: 44px;
    }

    .ani-header__mobile > * + * {
        border-left: 1px solid var(--ani-header-border);
    }

    .ani-header__mobile-cell {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 64px;
        width: 64px;
        color: var(--color-text-regular);
        text-decoration: none;
        cursor: pointer;
    }

    .ani-header__mobile-cell--dealer {
        background-color: var(--color-blue-light);
    }

    .ani-header__mobile-initials {
        font: var(--text-t2) var(--font-family);
        text-transform: uppercase;
    }

    .ani-header__mobile-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        min-width: 0;
        padding-inline: 12px;
    }

    .ani-header__mobile-logo img {
        width: auto;
        height: 32px;
    }

    .ani-header__mobile-search {
        position: relative;
        display: block;
        padding: 8px var(--page-padding-x);
        border-top: 1px solid var(--ani-header-border);
    }

    .ani-header__mobile-search[hidden] {
        display: none;
    }

    .ani-header__counter {
        top: 2px;
        right: 2px;
    }
}

@media screen and (width < 768px) {
    .ani-drawer {
        width: 311px;
    }

    .ani-header__mobile-cell {
        flex: 0 0 44px;
        width: 44px;
    }
}

.ani-header:not([data-ready]),
.ani-header:not([data-ready]) .ani-header__topbar,
.ani-header:not([data-ready]) .ani-header__topbar .ani-header__inner,
.ani-header:not([data-ready]) .ani-header__sections {
    transition: none;
}