@import "variables.css";

* {
    box-sizing: border-box;
}

.toast-container {
    position: fixed;
    top: 120px;
    right: 12px;
}

.toast {
    --bs-toast-max-width: unset;
    --bs-toast-border-width: 0;
    --bs-toast-border-radius: 8px;
    --bs-toast-bg: var(--black);
    --bs-toast-padding-x: 16px 22px;
}

.toast-body {
    color: var(--white, #FFF);
    font-family: var(--ff-golos);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 122.222% */
    letter-spacing: -0.36px;
}

.modal-backdrop {
    background: var(--blue-grey);
}

body {
    font-family: var(--ff-golos);
    background-color: var(--white);
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

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

h1 {
    margin-bottom: 0;
    font-size: 2rem;
    line-height: 112.5%;
    font-weight: 600;
    letter-spacing: -0.64px;
}

h2 {
    margin-bottom: 0;
    color: var(--secondary);
    font-size: 1.5rem;
    line-height: 125%;
    font-weight: 500;
    letter-spacing: -0.48px;
}

h3 {
    margin-bottom: 0;
    color: var(--secondary);
    font-size: 1.5rem;
    line-height: 125%;
    font-weight: 500;
    letter-spacing: -0.48px;
}

main {
    flex-grow: 1;
    margin-top: 138px;
    background-color: var(--blue-white);

    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 1200px) {
    main {
        margin-top: 193px;
    }
}

@media screen and (max-width: 992px) {
    main {
        margin-top: 225px;
    }
}

@media screen and (max-width: 576px) {
    main {
        margin-top: 340px;
    }
}

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

#app .container {
    max-width: 1412px;
    padding: 0;
    margin: 0 auto;
}

.container {
    max-width: 1412px;
    padding: 0 50px;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .container {
        padding: 0 25px;
    }
}

.list-reset {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cursor-pointer {
    cursor: pointer;
}

/* ------- Components ------- */

/* Input */
.input {
    padding: 12px;
    height: 48px;
    border-radius: 8px;
    border: 1px solid var(--input-border);

    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.32px;
    color: var(--secondary);
    transition: all .4s;

    &::placeholder {
        color: var(--grey);
    }

    &:focus {
        outline: none;
        border-color: var(--secondary);
    }
}

.input.dark {
    border: none;
    color: var(--grey);
    background-color: #1B253A;
}

/* Input Fields */

.input-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.input-field__header {
    display: flex;
    justify-content: space-between;
}

.input-field label:not(.checkbox) {
    margin-bottom: 14px;

    color: var(--secondary);

    font-size: 1rem;
    line-height: 118%;
    font-weight: 500;
    letter-spacing: -0.32px;
}

.modal .input-field input {
    width: 100%;
}

.input-field__error {
    display: none;
    color: var(--wrong-red);
    font-size: 0.875rem;
    line-height: 135%;
    letter-spacing: -0.28px;
}

.input-field.error label {
    color: var(--wrong-red);
}

.input-field.error .input {
    border: 1px solid var(--wrong-red);
}

.input-field.error .input-field__error {
    margin-top: 6px;
    display: block;
}

.input-field__phone {
    position: relative;
}


/* Button */
.button {
    padding: 13px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;

    background-color: var(--primary);
    color: var(--white);
    transition: background-color 0.3s;

    font-size: 1rem;
    line-height: 137%;
    font-weight: 500;
    letter-spacing: -0.32px;

    &:hover {
        background-color: #4283FF;
    }

    &.white {
        background-color: var(--white);
        border: 1px solid var(--white);
        color: var(--black);

        &:hover {
            background-color: var(--blue-white);
            border: 1px solid var(--blue-white);
        }
    }

    &.red {
        background-color: var(--white);
        color: #E33939;
        border: 1px solid #E33939;

        &:hover {
            opacity: 0.7;
        }
    }

    &.black {
        background-color: var(--black);
        color: var(--white);
        border: 1px solid var(--black);

        &:hover {
            opacity: 0.8;
        }
    }
}

.button_small {
    padding: 8px 12px;

    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: -0.28px;
}

.button_link {
    text-decoration: none;
    text-align: center;
}

/* Checkbox */
.checkbox {
    position: relative;
    padding: 4px 0 4px 34px;

    color: var(--secondary);
    cursor: pointer;

    font-size: 1rem;
    line-height: 135%;
    letter-spacing: -0.32px;
}

.checkbox.hidden {
    display: none;
}

.checkbox__box {
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);

    width: 22px;
    height: 22px;
    border: 2px solid var(--input-border);
    border-radius: 3px;
    background-color: var(--white);
}

.checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.checkbox__input:checked + .checkbox__box {
    background: var(--primary) url("../images/check.svg") no-repeat center / contain;
    border: 2px solid var(--primary);
}

/* Dropdown */
.dropdown {
    position: relative;
    width: 100%;
}

.dropdown__display {
    width: 100%;
    padding: 12px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    border-radius: 8px;
    border: 1px solid var(--input-border);
    background-color: var(--white);

    transition: border 0.3s;
}

.dropdown.active .dropdown__display {
    border: 1px solid var(--secondary);
}

.dropdown__chosen {
    max-width: 218px;
    flex-grow: 1;
    height: 22px;
    text-align: start;

    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    overflow: hidden;
    text-overflow: ellipsis;

    color: var(--grey);
}

.dropdown.active .dropdown__chosen {
    color: var(--secondary);
}

.dropdown__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s;
    transform: rotate(-180deg);
}

.dropdown__icon svg {
    color: var(--grey);
    transition: color 0.3s;
}

.dropdown.active .dropdown__icon {
    transform: rotate(0deg);
}

.dropdown.active .dropdown__icon svg {
    color: var(--secondary);
}

.dropdown__list {
    max-height: 310px;
    overflow-y: auto;
    position: absolute;
    top: 54px;
    z-index: 2;

    display: none;
    width: 100%;
    padding: 8px;

    border-radius: 8px;
    border: 1px solid var(--input-border);
    background-color: var(--white);
    /*box-shadow: 0 4px 10px 0 var(--blue-white);*/

    scrollbar-color: var(--input-border);
    scrollbar-width: thin;
}

.dropdown__list::-webkit-scrollbar {
    width: 12px;
}

.dropdown__list::-webkit-scrollbar-thumb {
    background-color: var(--input-border);
    border-radius: 100px;
    border: 4px solid white;
}

.dropdown__list::-webkit-scrollbar-track {
    margin: 8px;
}

.dropdown__option {
    padding: 12px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;

    cursor: pointer;
    border-radius: 8px;
    background-color: var(--white);
    color: var(--secondary);

    font-size: 1rem;
    line-height: 137%;
    letter-spacing: -0.32px;
}

.dropdown__option:hover {
    background-color: var(--blue-white);
}

.dropdown__option_selected {
    font-weight: 500;
}

.dropdown.active .dropdown__list {
    display: block;
}

.dropdown__text {
    margin-bottom: 0;
}

/* Search Input */

.search-input {
    width: 278px;
    height: 48px;

    position: relative;
}

.search-input input {
    width: 100%;
    height: 100%;
    padding: 12px 48px 12px 12px;
}

.search-input__icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-53%);
}

.search-input__icon svg {
    color: var(--grey);
    transition: color 0.3s;
}

.search-input__input:focus + .search-input__icon svg {
    color: var(--secondary);
}

/* Range Input */

.range-input {
    position: relative;
}

.range-input input:focus + span {
    color: var(--secondary);
}

.range-input span {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);

    color: var(--grey);

    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.32px;

    transition: color 0.4s;
}

.range-input input {
    width: 100%;
    height: 100%;
    padding: 12px 12px 12px 39px;
}

/* RangePicker*/

.slider-range {
    width: 278px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.slider-range__inputs {
    margin-bottom: 17px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 14px;
}

.slider-range__reset {
    margin-bottom: 14px;
    background-color: transparent;
    color: var(--grey);
    border: none;
    transition: color 0.3s linear;

    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.32px;
}

.slider-range__reset:hover {
    color: var(--black);
}

/* Number Input */
.number-input {
    width: fit-content;
    height: 100%;
    position: relative;
}

.number-input:hover input {
    border: 1px solid var(--primary);
    background-image: url('../images/selector-active.svg');
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.number-input input {
    -moz-appearance: textfield;
    background-image: url('../images/selector.svg');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 24px;
    border-radius: 6px;

    font-family: 'Inter', sans-serif;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.28px;

    &:focus {
        border: 1px solid var(--primary);
        background-image: url('../images/selector-active.svg');
    }
}

.number-input__controls {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 24px;
    height: calc(100% - 2px);

    display: flex;
    flex-direction: column;
}

.number-input__btn {
    padding: 0;
    width: 100%;
    height: calc(100% / 2);
    background-color: transparent;
    border: none;
}

/* Table */

.ui-table {
    width: 100%;
}

.ui-table th {
    color: var(--secondary, #373737);
    font-family: var(--ff-golos);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px; /* 157.143% */
    letter-spacing: -0.28px;

    padding: 8px 12px;
}

.ui-table th.ui-table__big-offset {
    padding: 8px 40px 8px 12px;
}

.ui-table td {
    vertical-align: top;
    color: var(--secondary, #373737);
    font-family: var(--ff-golos);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px; /* 135.714% */
    letter-spacing: -0.28px;

    padding: 12px;
    border-top: 8px solid transparent;
}

.ui-table td.ui-table__right, th.ui-table__right {
    text-align: end;
}

.ui-table td.ui-table__big-offset {
    padding: 12px 40px 12px 12px;
}

.ui-table > thead {
    border: 0 transparent;
    border-radius: 4px;
    background-color: var(--blue-white);
}

.ui-table > thead > tr > th:first-child,
.ui-table > tbody > tr > td:first-child {
    border-radius: 4px 0 0 4px;
}

.ui-table > thead > tr > th:last-child,
.ui-table > tbody > tr > td:last-child {
    border-radius: 0 4px 4px 0;
}

.ui-table > tbody {
    border: 0 transparent;
}

.ui-table tbody > *:nth-child(2n) {
    background-color: var(--blue-white);
}

/* Phone Input */

.phone-input {
    font-family: var(--ff-golos);
}

.phone-input.active {
    border: 1px solid var(--secondary);
}

.iti {
    width: 100%;
}

.iti__country-list {
    overflow-y: unset;
    width: 318px;
    max-height: unset;
    top: calc(100% + 6px);
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background-color: var(--white);
    padding: 8px;
}

.iti__country {
    padding: 12px;

    display: flex;
    flex-direction: row;

    cursor: pointer;
    background-color: var(--white);
    color: var(--secondary);
    border-radius: 8px;

    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.32px;
}

.iti__country.iti__highlight {
    background-color: var(--blue-white);
}

.iti--separate-dial-code .iti__selected-flag {
    background-color: transparent;
}

.iti__active {
    font-weight: 500;
}

.iti__flag-box {
    margin-right: 12px;
}

.iti__flag.iti__kz,
.iti__flag.iti__kg,
.iti__flag.iti__tj,
.iti__flag.iti__tm,
.iti__flag.iti__uz {
    width: 24px;
    height: 24px;
    background-position: center;
    background-color: transparent;
    background-size: cover;
    box-shadow: none;
}

.iti__kz {
    background-image: url('../images/countries/kz.png');
}

.iti__kg {
    background-image: url('../images/countries/kg.png');
}

.iti__tj {
    background-image: url('../images/countries/tj.png');
}

.iti__tm {
    background-image: url('../images/countries/tm.png');
}

.iti__uz {
    background-image: url('../images/countries/uz.png');
}


.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: transparent;
}

.iti--allow-dropdown input,
.iti--allow-dropdown input[type=text],
.iti--allow-dropdown input[type=tel],
.iti--separate-dial-code input,
.iti--separate-dial-code input[type=text],
.iti--separate-dial-code input[type=tel] {
    padding-left: 100px;
}

.iti__dial-code {
    color: var(--secondary);
}

.iti__arrow {
    margin-left: 10px;
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1L5 5L9 1' stroke='%23A9A9A9' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    border: none;
}

.iti__arrow--up {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 5L5 1L9 5' stroke='%23373737' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

.code-display {
    position: absolute;
    top: calc(50% + 5px);
    left: 60px;
    z-index: 1;

    color: var(--secondary);
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.32px;
}

/* Breadcrumbs */
.breadcrumbs {
    padding: 20px 0;
}

.breadcrumbs .container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumbs__link {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--grey);
    text-decoration: none;

    font-size: 1rem;
    line-height: 137%;
    font-weight: 500;
    letter-spacing: -0.32px;
}

.breadcrumbs__link:not(:last-child)::after {
    content: '/';
    font-weight: 600;
}

.breadcrumbs__link:last-child {
    opacity: 0.8;
    color: var(--black);
}

/* ------- Header ------- */

.header {
    position: fixed;
    width: 100vw;
    z-index: 5;
    background-color: var(--white);
    border-bottom: 1px solid var(--input-border);
}

.header__top {
    padding: 10px 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 33px;

    font-size: 1rem;
    line-height: 137%;
    letter-spacing: -0.32px;
}

@media screen and (max-width: 992px) {
    .header__top {
        gap: 10px 33px;
        flex-flow: wrap;
        justify-content: space-between;
    }
}

@media screen and (max-width: 576px) {
    .header__top {
        font-size: 0.75rem;
    }
}

.location {
    flex-shrink: 0;
}

.location__display {
    position: relative;

    padding: 0 0 0 20px;
    background-color: transparent;
    border: none;
    cursor: pointer;

    font-size: 1rem;
    line-height: 137%;
    letter-spacing: -0.32px;
}

.location__display::before {
    content: url('../images/location-marker.svg');
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}

@media screen and (max-width: 576px) {
    .location__display {
        font-size: 0.75rem;
    }
}

.header__nav {
    flex-grow: 1;
}

.nav__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 33px;
}

@media screen and (max-width: 1200px) {
    .header__nav {
        width: 100%;
    }

    .nav__list {
        gap: 10px
    }
}

@media screen and (max-width: 992px) {
    .header__nav {
        order: 3;
    }
}

.nav__link,
.header__phone {
    color: var(--secondary);
    text-decoration: none;
    transition: color .3s;
}

.nav__link:hover,
.header__phone:hover {
    color: var(--primary);
}

.header__phone {
    flex-shrink: 0;
}

.header__bottom {
    padding: 19px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}

@media screen and (max-width: 1200px) {
    .header__bottom {
        flex-flow: wrap;
    }
}

.logo {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 576px) {
    .header__logo {
        flex-grow: 1;
        justify-content: center;
    }
}

.search {
    flex-grow: 1;
    display: flex;
    position: relative;
}

.search__input {
    height: 100%;
    flex-grow: 1;
    border-radius: 8px 0 0 8px;
    border: 1px solid var(--primary);
}

.search__input:focus {
    border: 1px solid var(--primary);
}

.search__button {
    padding: 13px 21px;
    border-radius: 0 8px 8px 0;
}

.search__clear {
    visibility: hidden;

    position: absolute;
    right: 12px;
    top: 50%;
    transform: translate(-89px, -53%);

    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;

    & svg {
        color: var(--grey);
        opacity: 0.6;
        transition: color 0.3s;
    }

    &:hover svg {
        color: var(--secondary);
    }
}


@media screen and (max-width: 1200px) {
    .search {
        flex-shrink: 0;
    }
}

.header__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

@media screen and (max-width: 576px) {
    .header__list {
        width: 100%;
        justify-content: space-between;
    }
}


.header__link {
    position: relative;
    width: 66px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--secondary);
}

.header__link span {
    font-size: 0.75rem;
    line-height: 0.875rem;
    font-weight: 500;
}

.header__link svg {
    color: var(--black);
}

.header__link:hover svg,
.header__link:hover span:not(#cart-counter) {
    color: var(--primary);
}

.cart-counter {
    position: absolute;
    top: -2px;
    left: 31px;
    height: 21px;
    min-width: 21px;
    padding: 2px 5px;

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

    border: 2px solid var(--white);
    border-radius: 2000px;

    background-color: var(--wrong-red);
    color: var(--white);

    font-size: 0.75rem;
    line-height: 108%;
}

.header__manager {
}

.manager {
    position: relative;
}

.manager__btn {
    position: relative;
    display: flex;
    gap: 8px;

    width: 196px;
    height: 100%;
    padding: 6px 8px;
    background-color: var(--blue-white);
    border-radius: 10px;
    border: none;

    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: -0.24px;
}

.manager__btn::after {
    content: url("../images/chevron.svg");
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}

.manager__img {
    display: block;
    width: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
}

.manager__img img {
    max-width: 100%;
}

.manager__descr {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.manager__title {
    color: var(--blue-grey);
}

.manager__name {
    color: var(--secondary);
}

.manager__content {
    display: flex;
    flex-direction: column;

    visibility: hidden;
    position: absolute;
    top: 58px;
    right: 0;

    width: 212px;
    padding: 12px 16px;

    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--white);
    box-shadow: 0 4px 10px 0 #E2E2E2;

    transform: translateY(-6px);
    transition: visibility 0.3s ease-in-out, transform 0.3s ease-in-out;

    font-size: 0.875rem;
    line-height: 1.1875rem;
    letter-spacing: -0.28px;
}

.manager__content.active {
    visibility: visible;
    transform: translateY(0);
}

.manager__content p {
    margin-bottom: 8px;
    color: var(--secondary);
    font-weight: 500;
}

.manager__content a {
    color: var(--blue-grey);
    font-weight: 400;
    text-decoration: none;
}

@media screen and (max-width: 576px) {
    .header__manager {
        width: 100%;
    }

    .manager__btn {
        width: 100%;
    }

    .manager__content {
        width: 100%;
    }
}


/* ------- Footer ------- */

.footer {
    padding: 60px 0;
    background-color: var(--footer-dark-blue);
}

.footer__container {
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    justify-content: space-between;
    gap: 90px;
}

.footer__title {
    width: 55%;
    min-width: 288px;
    margin-bottom: 22px;

    color: var(--white);

    font-size: 1.5rem;
    line-height: 125%;
    font-weight: 500;
    letter-spacing: -0.48px;
}

.footer__form {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.footer__form .input {
    flex-grow: 1;
    padding: 12px 12px 12px 48px;
}

.footer__form::before {
    content: url("../images/mail.svg");
    position: absolute;
    width: 24px;
    height: 24px;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.footer__text {
    max-width: 85%;
    margin-bottom: 0;

    color: var(--blue-grey);

    font-size: 0.875rem;
    line-height: 135%;
    letter-spacing: -0.28px;
}

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

.footer__right {
    max-width: 422px;
}

@media screen and (max-width: 1200px) {
    .footer__right {
        width: 50%;
        max-width: unset;
    }
}

@media screen and (max-width: 768px) {
    .footer__right {
        width: 100%;
        max-width: unset;
    }
}

.footer__left {
    flex-grow: 1;
    display: grid;
    grid-template-columns: minmax(228px, 40%) 176px minmax(208px, 1fr);
    gap: 24px 48px;
}

@media screen and (max-width: 768px) {
    .footer__left {
        display: flex;
        flex-direction: row;
        gap: 24px;
    }
}

.footer__company {

}

.footer__logo {
    margin-bottom: 24px;
}

.footer__company a {
    font-size: 1.5rem;
    line-height: 125%;
    font-weight: 500;
    letter-spacing: -0.48px;

    text-decoration: none;
    color: var(--white);
}

.footer__company p {
    margin: 14px 0 0;
    font-size: 1rem;
    line-height: 137%;
    letter-spacing: -0.32px;

    color: var(--blue-grey);
}

@media screen and (max-width: 768px) {
    .footer__company {
        width: 100%;
    }

    .footer__company a {
        font-size: 1.25rem;
    }
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media screen and (max-width: 768px) {
    .footer__list {
        display: none;
    }
}

.footer__item {
    font-size: 1rem;
    line-height: 137%;
    letter-spacing: -0.32px;
    color: var(--white);
}

.footer__link {
    text-decoration: none;
    color: var(--blue-grey);
}

.footer__policy {
    width: 100%;
    grid-column: 1 / 4;
    display: grid;
    align-items: flex-end;
    grid-template-columns: minmax(228px, 40%) 176px minmax(208px, 1fr);
    gap: 24px 48px;


    color: var(--blue-grey);
    font-size: 0.875rem;
    letter-spacing: -0.28px;
}

.footer__policy p {
    max-width: 228px;
    grid-column: 1 span;
    margin-bottom: 0;
}

.footer__policy a {
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    .footer__policy {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .footer__policy p {
        max-width: none;
        text-align: end;
    }

    .footer__policy a {
        display: none;
    }
}


/* ------------Modals------------- */

/* Template */
.modal-dialog {
    max-width: 398px;
    height: 100vh;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-content {
    padding: 20px 20px 40px;
    border: none;
    border-radius: 16px;
}

.btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg opacity='1'%3e%3cpath d='M21 21L12 12M12 12L3 3M12 12L21.0001 3M12 12L3 21.0001' stroke='%23A9A9A9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/g%3e%3c/svg%3e");

    width: 24px;
    height: 24px;
    padding: 0;

    align-self: flex-end;
    opacity: 0.6;

    color: var(--grey);
    background-size: 1.5rem;
    transition: opacity 0.3s ease-in-out;
}

.btn-close:hover {
    opacity: 1;
}

.btn-close:focus {
    box-shadow: none;
}

.modal-title {
    max-width: 226px;
    margin: 0 auto 28px;

    color: var(--black);
    text-align: center;

    font-size: 1.5rem;
    line-height: 125%;
    font-weight: 500;
    letter-spacing: -0.48px;
}

.modal-body {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal-body .link {
    color: var(--grey);
    text-decoration: none;
    text-align: center;

    font-size: 0.875rem;
    line-height: 135%;
    font-weight: 500;
    letter-spacing: -0.28px;
}

.modal-backdrop {
    background-color: var(--blue-grey);
}

.modal-backdrop.show {
    opacity: 0.4;
}

.modal__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal__form.error input {
    border: 1px solid var(--wrong-red);
}

.modal__form.error .input-field__error {
    margin-top: 6px;
    display: block;
}

/* Registration Modal */
.modal-registration {
    & .modal-title {
        margin: 0 auto 8px;
        max-width: unset;
    }

    & .modal-text {
        margin-bottom: 14px;

        text-align: center;
        font-size: 16px;
        line-height: 22px;
        font-weight: 400;
        letter-spacing: -0.32px;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

/* Notifications Modal */

.notifications__modal .modal-dialog {
    display: block;
    max-width: 304px;
    height: unset;
    margin: 252px auto auto;
}

.notifications__modal.show .modal-dialog {
    transform: translateX(145%);
}

.notifications__modal .modal-content {
    max-height: min(55vh, 512px);
    padding: 22px 6px 26px 22px;
}

.notifications__modal .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 18px 10px 18px;
    border-color: transparent transparent var(--white) transparent;
}

.notifications__modal .modal-header {
    padding: 0 18px 0 0;
    border-bottom: none;
}

.notifications__modal .modal-title {
    margin: 0;
    flex-grow: 1;
    text-align: start;

    font-size: 1.125rem;
    line-height: 122%;
    font-weight: 500;
    letter-spacing: -0.36px;
}

.notifications__modal .modal-body {
    overflow-y: scroll;
    margin-top: 14px;
    gap: 0;
    padding: 0 14px 0 0;
    scrollbar-color: var(--input-border);
    scrollbar-width: thin;

}

.notifications__modal .modal-body::-webkit-scrollbar {
    width: 4px;
}

.notifications__modal .modal-body::-webkit-scrollbar-thumb {
    background-color: var(--input-border);
    border-radius: 100px;
}

.vacancies__wrapper .btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg opacity='1'%3e%3cpath d='M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18' stroke='%23A9A9A9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/g%3e%3c/svg%3e");
}

.notifications__modal .btn-close {
    padding: 0;
    margin: 0 0 0 10px;
    background-size: 1.3rem;
}

.btn-delete {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg opacity='1'%3e%3cpath d='M13.75 10.2222V16.4444M10.25 10.2222V16.4444M6.75 6.66667V17.1556C6.75 18.1512 6.75 18.6487 6.94074 19.029C7.10852 19.3635 7.37604 19.636 7.70532 19.8064C8.0793 20 8.56912 20 9.5473 20H14.4527C15.4309 20 15.92 20 16.294 19.8064C16.6233 19.636 16.8917 19.3635 17.0594 19.029C17.25 18.6491 17.25 18.152 17.25 17.1583V6.66667M6.75 6.66667H8.5M6.75 6.66667H5M8.5 6.66667H15.5M8.5 6.66667C8.5 5.83833 8.5 5.42436 8.63321 5.09766C8.81082 4.66205 9.15128 4.31576 9.58008 4.13533C9.90168 4 10.3096 4 11.125 4H12.875C13.6904 4 14.0981 4 14.4197 4.13533C14.8485 4.31576 15.1891 4.66205 15.3667 5.09766C15.4999 5.42436 15.5 5.83833 15.5 6.66667M15.5 6.66667H17.25M17.25 6.66667H19' stroke='%23A9A9A9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/g%3e%3c/svg%3e");
    background-color: transparent;
    background-size: 1.5rem;
    background-repeat: no-repeat;
    border: none;
    width: 24px;
    height: 24px;
    opacity: 0.6;
    transition: opacity 0.3s ease-in-out;
}

.btn-delete:hover {
    opacity: 1;
}

/* Warehouses */
.warehouses {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 19px;
}

.warehouses__map {
    width: 100%;
    height: 454px;
    border-radius: 16px;
    overflow: hidden;
}

.warehouses-cities__wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.warehouses-cities {
    display: flex;
    flex-direction: column;
    gap: 16px;

    h4 {
        color: var(--black);
        font-family: var(--ff-golos);
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 30px; /* 125% */
        letter-spacing: -0.48px;
        padding-bottom: 0;
    }
}

.warehouses-cities__items {
    display: flex;
    flex-direction: column;
    gap: 6px;

    span {
        color: var(--secondary);
        font-family: var(--ff-golos);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; /* 157.143% */
        letter-spacing: -0.28px;
    }
}

/* Product Modal */

.product-modal .modal-dialog {
    max-width: 860px;
    margin: 90px auto auto;
    justify-content: flex-start;
}

.product-modal .btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
}

.product-modal .modal-title {
    max-width: unset;
    text-align: start;
    margin: 0;

    font-size: 32px;
    line-height: 36px;
    font-weight: 600;
    color: var(--black);
    letter-spacing: -0.64px;
}

.product-modal .modal-header {
    padding: 0;
    border-bottom: none;
    margin-bottom: 16px;
}

.product-modal .modal-content {
    padding: 40px;
}

.product-modal .modal-body {
    padding: 0;
}

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

.product__text {
    margin-bottom: 0;
    color: var(--secondary);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.32px;
}

.product__content .tabs > input[type=radio] {
    display: none;
}

.product__content .tabs {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--tertiary);
}

.product__content .tabs > label {
    width: 152px;
    padding: 12px;
    color: var(--grey);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.32px;
    text-align: center;
    cursor: pointer;
}

.product__content .tabs > input:checked + label {
    padding: 12px;
    color: var(--secondary);
    font-weight: 500;
    border-bottom: 2px solid var(--primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: flex;
}

/* Order Modal */

.order-modal .modal-dialog,
.return-modal .modal-dialog {
    max-width: 358px;
}

.order-modal .modal-title {
    margin: 0 auto 8px;
}

.order-modal .modal-body {
    gap: 28px;
}

.order-modal p {
    margin-bottom: 0;
    text-align: center;

    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.32px;
}

/* Return Modal */
.return-modal .modal-title {
    margin: 0 auto 16px;
}

.return-modal__info {
    width: 100%;
    margin-bottom: 28px;
}

.return-modal__info p {
    margin-bottom: 0;

    font-size: 14px;
    line-height: 19px;
    font-weight: 400;
    letter-spacing: -0.28px;
}

.return-modal__row {
    display: flex;
    justify-content: space-between;
}

.return-modal__row .part__name {
    font-weight: 500;
}

/* ------------ Account ------------- */

.account {
    margin-bottom: 80px;
}

.account__header {
    margin-bottom: 16px;
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*align-items: center;*/
    /*gap: 18px;*/
    display: grid;
    grid-template-columns: minmax(318px, 25%) minmax(434px, 35%) minmax(238px, 20%) minmax(238px, 20%);
    gap: 18px;
}

.account__title {
    grid-column: 3 span;
    color: var(--black);
}

.account__controls {
    display: flex;
    gap: 18px;
}

.notifications {
    position: relative;
}

.notifications__btn {
    width: 62px;
    height: 48px;
    padding: 12px 7px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    border-radius: 8px;
    border: none;
    background-color: var(--white);
}

.notifications__btn.open {
    position: relative;
    z-index: 1055;
    background-color: var(--primary);
}

.notifications__btn .icon {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9M15 17H18.5905C18.973 17 19.1652 17 19.3201 16.9478C19.616 16.848 19.8475 16.6156 19.9473 16.3198C19.9997 16.1643 19.9997 15.9715 19.9997 15.5859C19.9997 15.4172 19.9995 15.3329 19.9863 15.2524C19.9614 15.1004 19.9024 14.9563 19.8126 14.8312C19.7651 14.7651 19.7048 14.7048 19.5858 14.5858L19.1963 14.1963C19.0706 14.0706 19 13.9001 19 13.7224V10C19 6.134 15.866 2.99999 12 3C8.13401 3.00001 5 6.13401 5 10V13.7224C5 13.9002 4.92924 14.0706 4.80357 14.1963L4.41406 14.5858C4.29476 14.7051 4.23504 14.765 4.1875 14.8312C4.09766 14.9564 4.03815 15.1004 4.0132 15.2524C4 15.3329 4 15.4172 4 15.586C4 15.9715 4 16.1642 4.05245 16.3197C4.15225 16.6156 4.3848 16.848 4.68066 16.9478C4.83556 17 5.02701 17 5.40956 17H9' stroke='%230057FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
}

.notifications__btn.open .icon {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9M15 17H18.5905C18.973 17 19.1652 17 19.3201 16.9478C19.616 16.848 19.8475 16.6156 19.9473 16.3198C19.9997 16.1643 19.9997 15.9715 19.9997 15.5859C19.9997 15.4172 19.9995 15.3329 19.9863 15.2524C19.9614 15.1004 19.9024 14.9563 19.8126 14.8312C19.7651 14.7651 19.7048 14.7048 19.5858 14.5858L19.1963 14.1963C19.0706 14.0706 19 13.9001 19 13.7224V10C19 6.134 15.866 2.99999 12 3C8.13401 3.00001 5 6.13401 5 10V13.7224C5 13.9002 4.92924 14.0706 4.80357 14.1963L4.41406 14.5858C4.29476 14.7051 4.23504 14.765 4.1875 14.8312C4.09766 14.9564 4.03815 15.1004 4.0132 15.2524C4 15.3329 4 15.4172 4 15.586C4 15.9715 4 16.1642 4.05245 16.3197C4.15225 16.6156 4.3848 16.848 4.68066 16.9478C4.83556 17 5.02701 17 5.40956 17H9' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

.notifications__btn.active .icon {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.5 17V18C15.5 19.6569 14.1569 21 12.5 21C10.8431 21 9.5 19.6569 9.5 18V17.0001M15.5 17L9.5 17.0001M15.5 17H19.5C20.0523 17 20.5 16.5523 20.5 16V15.4141C20.5 15.1489 20.3945 14.8946 20.207 14.707L19.6963 14.1963C19.5706 14.0706 19.5 13.9 19.5 13.7222V10C19.5 9.82357 19.4936 9.64855 19.4805 9.4761M9.5 17.0001L5.5 17.0001C4.94772 17.0001 4.5 16.5521 4.5 15.9998V15.4141C4.5 15.1489 4.60544 14.8949 4.79297 14.7073L5.30371 14.1958C5.42939 14.0701 5.5 13.9002 5.5 13.7224V9.99998C5.5 6.13401 8.634 3 12.5 3C13.2116 3 13.8984 3.10618 14.5454 3.30357M19.4805 9.4761C20.6868 8.7873 21.5 7.48861 21.5 6C21.5 3.79086 19.7091 2 17.5 2C16.3298 2 15.2769 2.50253 14.5454 3.30357M19.4805 9.4761C18.8966 9.80949 18.2205 10 17.5 10C15.2909 10 13.5 8.20914 13.5 6C13.5 4.9611 13.8961 4.0147 14.5454 3.30357M14.5454 3.30357L14.5468 3.304' stroke='%230057FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

.notifications__btn.open.active .icon {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.5 17V18C15.5 19.6569 14.1569 21 12.5 21C10.8431 21 9.5 19.6569 9.5 18V17.0001M15.5 17L9.5 17.0001M15.5 17H19.5C20.0523 17 20.5 16.5523 20.5 16V15.4141C20.5 15.1489 20.3945 14.8946 20.207 14.707L19.6963 14.1963C19.5706 14.0706 19.5 13.9 19.5 13.7222V10C19.5 9.82357 19.4936 9.64855 19.4805 9.4761M9.5 17.0001L5.5 17.0001C4.94772 17.0001 4.5 16.5521 4.5 15.9998V15.4141C4.5 15.1489 4.60544 14.8949 4.79297 14.7073L5.30371 14.1958C5.42939 14.0701 5.5 13.9002 5.5 13.7224V9.99998C5.5 6.13401 8.634 3 12.5 3C13.2116 3 13.8984 3.10618 14.5454 3.30357M19.4805 9.4761C20.6868 8.7873 21.5 7.48861 21.5 6C21.5 3.79086 19.7091 2 17.5 2C16.3298 2 15.2769 2.50253 14.5454 3.30357M19.4805 9.4761C18.8966 9.80949 18.2205 10 17.5 10C15.2909 10 13.5 8.20914 13.5 6C13.5 4.9611 13.8961 4.0147 14.5454 3.30357M14.5454 3.30357L14.5468 3.304' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}


.notifications__count {
    color: var(--secondary);
    font-size: 1rem;
    line-height: 137.5%;
    font-weight: 500;
    letter-spacing: -0.32px;
}

.notifications__btn.open .notifications__count {
    color: var(--white);
}

.notifications__btn span:not(:last-child) {
    margin-right: 4px;
}

.notifications__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.notification {
    position: relative;
    width: 100%;
    padding: 0 20px 14px 0;

    font-size: 0.875rem;
    line-height: 135%;
    letter-spacing: -0.28px;
}

.notification_new::after {
    content: '';

    width: 8px;
    height: 8px;

    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    border-radius: 100%;
    background-color: var(--primary);
}

.notification__date {
    color: var(--grey);
    margin-bottom: 5px;
}

.notification__text {
    margin: 0;
    max-width: 80%;
    color: var(--secondary);
}

.notification__text a {
    color: var(--primary);
    text-decoration: underline;
}

.notification:not(:last-child) {
    border-bottom: 1px solid var(--input-border);
}

.notification__placeholder {
    width: 100%;
    padding: 38px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%230057FF38' stroke-width='1' stroke-dasharray='6' stroke-dashoffset='3' stroke-linecap='round'/%3e%3c/svg%3e");
    border-radius: 10px;
}

.notification__placeholder .notification__text {
    max-width: unset;
    font-size: 0.875rem;
    line-height: 135%;
    font-weight: 500;
    letter-spacing: -0.28px;
}

.notification__icon {
    width: 38px;
    height: 38px;
}

.account__leave-btn {
    width: 158px;
    padding: 12px 16px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    border: none;
    border-radius: 8px;
    background-color: #F5E8EC;
    color: #F60000;

    font-size: 1rem;
    line-height: 137%;
    font-weight: 500;
    letter-spacing: -0.32px;

    transition: background-color 0.3s ease-in-out;
}

.account__leave-btn:hover {
    background-color: #F0DDE3;
}


.account__content {
    display: grid;
    grid-template-columns: minmax(318px, 25%) minmax(434px, 35%) minmax(238px, 20%) minmax(238px, 20%);
    grid-template-rows: 148px 148px 195px;
    gap: 18px;
}

.account__section {
    padding: 22px;
    text-decoration: none;
    border-radius: 14px;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    position: relative;
}

.account__section p {
    flex-grow: 1;
    color: var(--blue-grey);
    font-size: 0.875rem;
    line-height: 135%;
    letter-spacing: -0.28px;
}

.account__section span {
    width: 40px;
    height: 40px;
    padding: 8px;

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

    border-radius: 40px;
    background-color: var(--blue-white);
}

.account__section img {
    position: absolute;
    right: 16px;
    bottom: 16px;
}

.account__section.security {
    grid-column: 1 span;
    grid-row: 2 span;
}

.account__section.orders {
    grid-column: 1 span;
    grid-row: 2 span;
    margin-bottom: 0;
}

.account__section.settings {
    grid-column: 2 span;
}

.balance {
    padding: 22px 60px 22px 22px;

    grid-column: 1 span;
    grid-row: 2 span;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 25px;

    border-radius: 14px;
    background-color: var(--primary);
    overflow: hidden;

    background-image: url("../images/account/balance-background.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.balance__total {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.balance__text {
    margin-bottom: 0;

    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 0.875rem;
    line-height: 135%;
    letter-spacing: -0.28px;

    color: var(--white);
    opacity: 0.8;
}

.balance__tooltip {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.balance__tooltip:hover {
    opacity: 0.6;
}

.custom-tooltip .tooltip-inner {
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.60);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    text-align: left;
    font-size: 0.875rem;
    line-height: 135%;
    font-weight: 400;
    letter-spacing: -0.28px;
}

.custom-tooltip .tooltip-arrow {
    left: -4px !important;
}

.custom-tooltip .tooltip-arrow::before {
    top: 0 !important;
    border-width: 10px calc(22px * .5) 0 !important;
    border-top-color: rgba(0, 0, 0, 0.60) !important;
}

.balance__number {
    margin-bottom: 0;
    font-size: 2rem;
    line-height: 93.75%;
    font-weight: 500;
    letter-spacing: -0.64px;

    color: var(--white);
}

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

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

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

.balance__nums .balance__number {
    font-size: 1.5rem;
    line-height: 125%;
    letter-spacing: -0.48px;
}

.manager-account {
    padding: 22px;

    display: flex;
    justify-content: space-between;
    gap: 33px;

    border-radius: 14px;
    background-color: var(--white);
}

.manager-account__content {
    display: flex;
    flex-direction: column;
    max-width: 206px;
}

.manager-account h3 {
    margin-bottom: 21px;
    flex-grow: 1;
}

.manager-account p {
    margin-bottom: 8px;

    font-size: 1rem;
    line-height: 137%;
    font-weight: 500;
    letter-spacing: -0.32px;

    color: var(--secondary);
}

.manager-account a {
    color: var(--blue-grey);
    text-decoration: none;
    opacity: 0.8;

    font-size: 1rem;
    line-height: 137%;
    font-weight: 400;
    letter-spacing: -0.32px;
}

.manager-account a:not(:last-child) {
    margin-bottom: 4px;
}

.manager-account__avatar {
    position: relative;
    border-radius: 151px;
    aspect-ratio: 1 / 1;
}

.manager-account__avatar::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 2px;
    width: 28px;
    height: 28px;
    border-radius: 100%;
    border: 4px solid var(--white);
    background-color: #54DA16;
}

.manager-account__image {
    border-radius: 151px;
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    max-width: 151px;
}

.manager-account__image img {
    max-width: 100%;
    object-fit: cover;
}


/* Section */
.section {
    overflow-x: hidden;
    margin-bottom: 80px;
    flex-grow: 1;
}

.section .container {
    min-height: 700px;
}

.section__title {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--input-border);
    position: relative;
    z-index: 1;
}

.section__subtitle {
    margin-bottom: 16px;
}

.section__text {
    margin-bottom: 44px;
    color: var(--blue-grey);
    font-size: 1rem;
    line-height: 137.5%;
    letter-spacing: -0.32px;
}

.section__block {
    max-width: 868px;
    margin-top: 44px;
    padding-bottom: 44px;
    border-bottom: 1px solid var(--input-border);
    position: relative;
    z-index: 1;
}

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

@media screen and (max-width: 576px) {
    .section__content {
        gap: 25px;
    }
}

.item-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.item-section__name {
    margin-bottom: 4px;
    color: var(--blue-grey);
    font-size: 0.875rem;
    line-height: 135%;
    letter-spacing: -0.28px;
}

.item-section__current {
    margin-bottom: 8px;
    color: var(--secondary);
    font-size: 1rem;
    line-height: 137.5%;
    font-weight: 500;
    letter-spacing: -0.32px;
}

.item-section__link {
    margin-top: 4px;
    color: var(--blue-grey);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 135%;
    letter-spacing: -0.28px;
}

.item-section__btn {
    padding: 0;
    border: none;
    background-color: transparent;
    color: var(--primary);
    font-size: 1rem;
    line-height: 137.5%;
    font-weight: 500;
    letter-spacing: -0.32px;
}

.section__group {
    display: flex;
    flex-direction: column;
}

/* ---------------Settings-------------- */

.settings .container {
    position: relative;
}

.settings__background {
    position: absolute;
    right: 0;
    top: 100px;
    transform: translateX(32%);
    z-index: 0;
}

/* ---------------Address-------------- */

.address .container {
    position: relative;
}

.address .section__text {
    max-width: 300px;
}

.address .item-section__current {
    margin-bottom: 0;
}

.address__background {
    position: absolute;
    right: 0;
    top: 100px;
    transform: translateX(25%);
    z-index: 0;
}

/* ---------------Security-------------- */

.security .container {
    position: relative;
}

.security .section__text {
    max-width: 666px;
}

.security__background {
    position: absolute;
    right: 0;
    top: 100px;
    transform: translateX(25%);
    z-index: 0;
}

/* ---------------Calculations--------------- */
.table-section {
    margin-bottom: 80px;
}

.table-section .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}

.table-section h1 {
    color: var(--black);
}

.table-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-section__header p {
    margin-bottom: 0;

    color: var(--blue-grey);

    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.32px;
}


.aside {
    width: 276px;
    flex-shrink: 0;
}

.aside__results {
    margin-top: 14px;
    margin-bottom: 30px;
    color: var(--secondary);
    font-size: 1rem;
    line-height: 137%;
    font-weight: 500;
    letter-spacing: -0.32px;
}

.aside__filters {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.aside__nav {
    display: flex;
    flex-direction: column;
}

.aside__nav li {
    padding: 13px 12px;
    border-radius: 8px;

    &:hover {
        background-color: var(--blue-white);
    }

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

.aside__link {
    display: flex;
    gap: 8px;
    width: 100%;

    color: var(--secondary);
    text-decoration: none;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.32px;
}

.aside__link img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}


.table-section__content {
    flex-grow: 1;
}

.table-section__table {
    margin-top: 30px;
}

/* ---------------Orders--------------- */
.part__item-link {
    color: var(--secondary);
    opacity: 0.6;
    font-size: 0.875rem;
    line-height: 135%;
    letter-spacing: -0.28px;
}

.part__name {
    margin-bottom: 0;
    color: var(--secondary);
    font-size: 0.875rem;
    line-height: 135%;
    font-weight: 500;
    letter-spacing: -0.28px;
}

.part__info {
    margin-top: 8px;
    display: flex;
    flex-direction: row;
    gap: 3px;
    font-size: 0.75rem;
    line-height: 183%;
    letter-spacing: -0.24px;
}

.part__order {
    color: var(--primary);
}

.part__date {
    color: var(--secondary);
    margin-bottom: 0;
}

.delivery {
    color: var(--secondary);
}

.delivery__date {
    margin-bottom: 0;

    font-size: 0.875rem;
    line-height: 135%;
    letter-spacing: -0.28px;
}

.delivery__time {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='14' height='15' viewBox='0 0 14 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 4.58333V7.5H9.91667M7 12.75C4.1005 12.75 1.75 10.3995 1.75 7.5C1.75 4.6005 4.1005 2.25 7 2.25C9.89949 2.25 12.25 4.6005 12.25 7.5C12.25 10.3995 9.89949 12.75 7 12.75Z' stroke='%230057FF' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    padding-left: 18px;

    font-size: 0.75rem;
    line-height: 158%;
    letter-spacing: -0.24px;
}

.status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

.status__badge {
    width: fit-content;
    padding: 2px 6px;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;

    border-radius: 8px;
}

.status__badge_red {
    background-color: var(--status-red);
}

.status__badge_green {
    background-color: var(--status-green);
}

.status__badge_blue {
    background-color: var(--status-blue);
}

.status__badge_orange {
    background-color: var(--status-orange);
}

.status__badge p {
    margin-bottom: 0;
    font-size: 0.875rem;
    line-height: 135%;
    font-weight: 500;
    letter-spacing: -0.28px;
}

.orders__btn {
    padding: 2px 6px;
    min-width: 72px;

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

    background-color: transparent;
    border-radius: 6px;

    font-size: 0.75rem;
    line-height: 158%;
    font-weight: 500;
    letter-spacing: -0.24px;
}

.orders__btn_red {
    color: #E33939;
    border: 1px solid #F4B2B2;
}

.orders__btn_gray {
    background-color: #d3d3d3;
    color: #6c757d;
    border: 1px solid #ced4da;
    cursor: not-allowed;
    opacity: 0.65;
    /*pointer-events: none;*/
}


.orders__btn_orange {
    color: #FF7A41;
    border: 1px solid #F7D9C8;
}

.table-section__table th.type {
    width: 180px;
}

.table-section__table th.name {
    width: 228px;
}

/* ---------------Returns--------------- */

.returns .status__badge {
    gap: 4px;
    padding: 4px 10px 4px 6px;
    align-items: flex-end;
}

/* ---------------Search--------------- */
.search h2 {
    /*margin-top: 44px;*/
    font-weight: 600;
    color: var(--black);
}


.checkbox-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0 16px;
}

.search__checkbox-group {
    margin-bottom: 14px;
    max-height: 238px;
    overflow-y: auto;
}

.show-more {
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;

    background-color: transparent;
    color: var(--primary);
    border: none;

    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.32px;

    svg {
        color: var(--primary);
    }
}

.show-more img {
    transition: transform 0.3s;
}

.show-more.open img {
    transform: rotate(180deg);
}

.show-more svg {
    transition: transform 0.3s;
}

.show-more.open svg {
    transform: rotate(180deg);
}

.search__brand {
    margin-bottom: 0;
    color: var(--secondary);
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: -0.36px;
}

.search__num {
    color: var(--primary);
}

.search__underlined {
    margin-bottom: 0;
    text-decoration: underline;
    cursor: pointer;
}

.search__table td {
    vertical-align: middle;
    color: var(--secondary);
    font-family: var(--ff-golos);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.32px;

    padding: 12px;
    border-top: 8px solid transparent;
}

.is_our_warehouse {
    background-color: #DCEBFF !important
}

.delivery__search {
    white-space: nowrap;
    color: #004D00;
    font-weight: bold;
}

.add-to-cart {
    width: 44px;
    height: 26px;
}

.add-to-cart.big {
    width: 172px;
    height: 48px;
}

.add-to-cart__btn {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
}

.add-to-cart__btn.big {
    padding: 12px 29px;
    gap: 10px;

    span {
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
    }

    img {
        width: 24px;
        height: 24px;
    }
}

.add-to-cart.open .add-to-cart__btn {
    display: none;
}

.add-to-cart img {
    width: 16px;
    height: 16px;
}

.add-to-cart input {
    display: none;
    width: 100%;
    height: 100%;
    padding: 1px 17px 1px 1px;
}

.add-to-cart.open input {
    display: block;
}


.markup {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    text-align: start;
}

.markup__btn {
    width: 16px;
    height: 16px;
    background-color: transparent;
    border: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg opacity='0.5'%3e%3cpath d='M6.88309 2.87821C7.16735 1.70726 8.83265 1.70726 9.11692 2.87821C9.30055 3.63462 10.1672 3.99358 10.8319 3.58857C11.8609 2.96159 13.0384 4.13914 12.4114 5.16812C12.0064 5.83284 12.3654 6.69945 13.1218 6.88308C14.2927 7.16735 14.2927 8.83265 13.1218 9.11692C12.3654 9.30055 12.0064 10.1672 12.4114 10.8319C13.0384 11.8609 11.8609 13.0384 10.8319 12.4114C10.1672 12.0064 9.30055 12.3654 9.11692 13.1218C8.83265 14.2927 7.16735 14.2927 6.88309 13.1218C6.69945 12.3654 5.83284 12.0064 5.16812 12.4114C4.13914 13.0384 2.96159 11.8609 3.58857 10.8319C3.99358 10.1672 3.63462 9.30055 2.87821 9.11692C1.70726 8.83265 1.70726 7.16735 2.87821 6.88308C3.63462 6.69945 3.99358 5.83284 3.58857 5.16812C2.96159 4.13914 4.13914 2.96159 5.16812 3.58857C5.83284 3.99358 6.69945 3.63462 6.88309 2.87821Z' stroke='%23545F71' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6C9.10457 6 10 6.89543 10 8Z' stroke='%23545F71' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/g%3e%3c/svg%3e");
}

.markup__btn_red {
    width: 16px;
    height: 16px;
    background-color: transparent;
    border: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='red' xmlns='http://www.w3.org/2000/svg'%3e%3cg opacity='0.5'%3e%3cpath d='M6.88309 2.87821C7.16735 1.70726 8.83265 1.70726 9.11692 2.87821C9.30055 3.63462 10.1672 3.99358 10.8319 3.58857C11.8609 2.96159 13.0384 4.13914 12.4114 5.16812C12.0064 5.83284 12.3654 6.69945 13.1218 6.88308C14.2927 7.16735 14.2927 8.83265 13.1218 9.11692C12.3654 9.30055 12.0064 10.1672 12.4114 10.8319C13.0384 11.8609 11.8609 13.0384 10.8319 12.4114C10.1672 12.0064 9.30055 12.3654 9.11692 13.1218C8.83265 14.2927 7.16735 14.2927 6.88309 13.1218C6.69945 12.3654 5.83284 12.0064 5.16812 12.4114C4.13914 13.0384 2.96159 11.8609 3.58857 10.8319C3.99358 10.1672 3.63462 9.30055 2.87821 9.11692C1.70726 8.83265 1.70726 7.16735 2.87821 6.88308C3.63462 6.69945 3.99358 5.83284 3.58857 5.16812C2.96159 4.13914 4.13914 2.96159 5.16812 3.58857C5.83284 3.99358 6.69945 3.63462 6.88309 2.87821Z' stroke='%23545F71' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M10 8C10 9.10457 9.10457 10 8 10C6.89543 10 6 9.10457 6 8C6 6.89543 6.89543 6 8 6C9.10457 6 10 6.89543 10 8Z' stroke='%23545F71' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/g%3e%3c/svg%3e");
}

.markup__content {
    display: flex;
    flex-direction: column;
    gap: 14px;

    visibility: hidden;
    position: absolute;
    top: 40px;
    right: -82px;

    width: 284px;
    padding: 16px;

    border: 1px solid var(--input-border);
    border-radius: 12px;
    background-color: var(--white);
    box-shadow: 0 4px 10px 0 #E2E2E2;

    font-size: 0.875rem;
    line-height: 1.1875rem;
    font-weight: 400;
    letter-spacing: -0.28px;
}

.markup__content.active {
    visibility: visible;
    z-index: 2;
}

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

.markup__title {
    margin-bottom: 0;
    color: var(--secondary);
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: -0.36px;
}

.markup__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.markup__controls {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.markup .search-input {
    width: 100%;
}

.markup .search-input input {
    padding: 12px 39px 12px 12px;
    transition: none;
}

.markup .search-input__icon {
    color: var(--grey);
    font-size: 20px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.4px;
}

.markup__arrow {
    position: absolute;
    width: 44px;
    height: 40px;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.markup__triangle {
    position: absolute;
    width: 39px;
    height: 40px;
    top: -21px;
    left: 50%;
    transform: translateX(-50%) skewY(-15deg) rotate(49deg) scaleX(0.6) scaleY(0.4);
    background-color: white;
    border-top: 2px solid var(--input-border);
    border-left: 2px solid var(--input-border);
}

/* tabs */

.info-product {
    flex-direction: row;
    gap: 20px;
}

.info-product__image {
    width: 60%;

    display: flex;
    /*justify-content: center;*/

    border: 1px solid var(--blue-white);
    border-radius: 14px;
}

.info-product__image img {
    object-fit: contain;
}

.info-product__content {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-product__row {
    display: flex;

    font-size: 14px;
    line-height: 19px;
    font-weight: 400;
    letter-spacing: -0.28px;
}

.info-product__char {
    width: 200px;
    margin-bottom: 0;
    color: var(--grey);
}

.info-product__value {
    color: var(--secondary);
    margin-bottom: 0;
}

.info-product__value.underlined {
    text-decoration: underline;
}

.applicability-product {
    margin-bottom: 39px;
    flex-direction: column;
    gap: 20px;
}

.applicability-product__controls {
    display: flex;
    gap: 20px;
}

.applicability-product__dropdown {
    width: 278px;
}

.applicability-product__table thead th:nth-child(1) {
    width: 140px;
}

.applicability-product__table thead th:nth-child(2n) {
    width: 200px;
}

.applicability-product__table thead th:nth-child(3) {
    width: 150px;
}

.manufacturer-product {
    margin-bottom: 27px;
    flex-direction: column;
    gap: 20px;
    color: var(--secondary);
}

.manufacturer-product__text {
    margin-bottom: 0;
    max-width: 88%;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.28px;
}

.manufacturer-product__content {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.manufacturer-product__row {
    display: flex;
    align-items: center;

    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 19px;
    font-weight: 400;
    letter-spacing: -0.28px;
}

.manufacturer-product__char {
    width: 110px;
    margin-bottom: 0;
    color: var(--grey);
    opacity: 0.6;
}

.manufacturer-product__value {
    color: var(--secondary);
    margin-bottom: 0;
}

/* -------Search Results-------- */

.search-results__table {
    margin-top: 22px;
}

.search-results__table .search__num,
.search-results__table .search__underlined {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.32px;
}

.search-results__table .search__brand {
    font-weight: 700;
}

.search-results__table thead th:nth-child(1) {
    width: 144px;
}

.search-results__table thead th:nth-child(2) {
    width: 94px;
}

.search-results__table thead th:nth-child(3) {
    width: 396px;
}

.search-results__table thead th:nth-child(4) {
    width: 174px;
}

.search-results__table thead th:nth-child(5) {
    width: 82px;
}

.search-results__table td {
    vertical-align: middle;
}

.search-results__table a.button {
    text-decoration: none;
}


/* -------Cart-------- */

.cart .table-section__header {
    margin-bottom: 30px;
}

.cart__sum {
    margin-bottom: 0;
    font-size: 32px;
    line-height: 30px;
    font-weight: 500;
    letter-spacing: -0.64px;
}

.cart__table {

}

.cart__aside {
    width: 230px;
}

.cart__aside .search-input {
    width: 230px;
}

.cart__aside .slider-range {
    width: 230px;
}

.table-cart {
    border-radius: 8px;
    border: 3px solid var(--blue-white);
}

.table-cart__header {
    padding: 18px 12px;
}

.table-cart__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.table-cart__row:first-child {
    margin-bottom: 10px;
}

.table-cart__input {
    width: 278px;
}

.table-cart__col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.table-cart__sum {
    color: var(--blue-grey);
    font-family: var(--ff-golos);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 137.5% */
    letter-spacing: -0.32px;
}

.table-cart__description {
    color: var(--grey);
    font-family: var(--ff-golos);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 137.5% */
    letter-spacing: -0.32px;
}

.table-cart__controls {
    display: flex;
    gap: 12px;
}

.table-cart .table-section__table {
    margin-top: 0;
    font-size: 16px;
}

.table-cart td {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.32px;
}

.table-cart thead > tr > th:first-child,
.table-cart thead > tr > th:last-child,
.table-cart tbody > tr > td:first-child,
.table-cart tbody > tr > td:last-child {
    border-radius: 0;
}

.table-cart thead th:nth-child(1) {
    width: 206px;
}

.table-cart thead th:nth-child(2) {
    width: 130px;
}

.table-cart thead th:nth-child(3) {
    width: 278px;
}

.table-cart thead th:nth-child(4) {
    width: 138px;
}

.table-cart thead th:nth-child(5) {
    width: 90px;
}

.table-cart thead th:nth-child(6) {
    width: 128px;
}

.table-cart thead th:nth-child(8) {
    width: 44px;
}

.table-cart .number-input,
.table-cart .number-input .input {
    height: 26px;
    width: 68px;
}

.table-cart .number-input .input {
    padding: 1px 20px 1px 0;
    text-align: center;
}

.cart__delete {
    width: 22px;
    height: 22px;
    background-size: 22px;
}


.table-cart__placeholder {
    margin: 125px auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: -0.36px;
}

.table-cart__img {
    width: 128px;
    height: 105px;
    margin-bottom: 22px;
}

.table-cart__img img {
    max-width: 100%;
    object-fit: contain;
}

.table-cart__placeholder p {
    text-align: center;
    margin-bottom: 0;
}

.cart__item-name {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


/* ----------------Account Section---------------- */
.account-section {
    margin-bottom: 80px;
}

.account-section .container {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.account-section__content {
    width: 100%;
}

/* ----------------Vacancies---------------- */
.vacancies h1 {
    margin-bottom: 22px;
}

.vacancies__pros {
    margin-bottom: 36px;
}

.pros-vacancies {
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 12px 26px;
}

.pros-vacancies__item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pros-vacancies__item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.pros-vacancies__item p {
    margin-bottom: 0;
}

.vacancies__title {
    margin-bottom: 14px;

    display: flex;
    gap: 12px;

    color: var(--secondary);
    font-size: 24px;
    line-height: 30px;
    font-weight: 600;
    letter-spacing: -0.48px;
}

.vacancies__city .markup__btn {
    width: unset;
    height: unset;
    padding: 0;

    background-color: transparent;
    color: var(--primary);
    border: none;
    background-image: none;

    font-size: 24px;
    line-height: 30px;
    font-weight: 600;
    letter-spacing: -0.48px;
}

.vacancies__city .markup__content {
    gap: 20px;
    top: 45px;
    right: -47px;
}


.vacancies__city .dropdown__list {
    max-height: 200px;
    display: block;
    position: relative;
    top: 0;
}

.markup__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.markup .search-input {
    width: 100%;
}

.markup .search-input input {
    padding: 12px 39px 12px 12px;
    transition: none;
}

.markup .search-input__icon {
    color: var(--grey);
    font-size: 20px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.4px;
}

.markup__triangle {
    position: absolute;
    top: -21px;
    left: 50%;

    width: 39px;
    height: 40px;

    background-color: white;
    border-top: 2px solid var(--input-border);
    border-left: 2px solid var(--input-border);
    transform: translateX(-50%) skewY(-15deg) rotate(49deg) scaleX(0.6) scaleY(0.4);
}

.vacancies__text {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.32px;
}

.vacancies__search {
    margin-bottom: 22px;
    width: 100%;
}

.vacancies__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vacancy {
    padding: 24px;
    border-radius: 16px;
    background-color: var(--blue-white);
}

.vacancy__header {
    margin-bottom: 18px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

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

.vacancy__name {
    max-width: 438px;
}

.vacancy__name,
.vacancy__salary {
    margin-bottom: 0;

    color: var(--secondary);
    font-size: 24px;
    line-height: 30px;
    font-weight: 500;
    letter-spacing: -0.48px;
}

.vacancy__location {
    margin-bottom: 0;
    opacity: 0.6;

    color: var(--secondary);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.32px;
}

.vacancy__descr {
    max-width: 641px;

    color: var(--secondary);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.32px;
}


/* ----------------Return Rules---------------- */
.rules {
    & h1 {
        margin-bottom: 22px;
    }
}

.rules__list {
    display: flex;
    flex-direction: column;
    gap: 25px;

    color: var(--secondary);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.32px;

    & > li:first-child {
        font-weight: 600;
    }
}

.rules__item {
    & ul {
        margin-top: 25px;
    }
}

.list_letter {
    padding-inline-start: 30px;

    list-style: lower-alpha;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.list_disc {
    list-style-type: disc;
}

/* ----------------News---------------- */

.news {

    & h1 {
        margin-bottom: 22px;
    }
}

.news__controls {
    margin-bottom: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.news__checkbox {
    padding: 8px 12px 8px 12px;

    & .checkbox__box {
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 8px 12px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        color: var(--primary);
        background-color: var(--blue-white);
        border-radius: 24px;
        border: none;

        transition: background 0.3s;
    }

    & .checkbox__text {
        position: relative;
        z-index: 1;

        color: var(--primary);
        font-size: 14px;
        line-height: 19px;
        font-weight: 500;
        letter-spacing: -0.28px;

        transition: margin-left 0.3s;
    }


    & .checkbox__input:checked + .checkbox__box {
        background: var(--primary) url("../images/news/check.svg") no-repeat left 10px center / 20px;
    }

    & .checkbox__input:checked ~ .checkbox__text {
        color: var(--white);
        margin-left: 26px;
    }
}

.news__content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px 20px;
}

@media screen and (max-width: 950px) {
    .news__content {
        grid-template-columns: repeat(2, 1fr);
    }
}

.news__item {
    text-decoration: none;
}

.news__image {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;

    & img {
        width: 100%;
        object-fit: cover;
    }
}

.news__date {
    margin-bottom: 6px;

    color: var(--grey);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.32px;
}

.news__name {
    margin-bottom: 0;

    color: var(--secondary);
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: -0.36px;
}

/* ----------------Empty Search---------------- */

.empty-search__container {
    padding: 56px 50px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.empty-search__img {
    margin-bottom: 22px;
}

.empty-search__alert {
    margin-bottom: 18px;

    color: var(--black);
    font-size: 32px;
    line-height: 36px;
    font-weight: 500;
    letter-spacing: -0.64px;
}

.empty-search__text {
    margin-bottom: 0;

    color: var(--secondary);
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: -0.32px;
}

.offer {
    margin-bottom: 80px;
}

.offer__title {
    margin-bottom: 22px;
    color: var(--secondary);

    font-size: 32px;
    line-height: 36px;
    font-weight: 600;
    letter-spacing: -0.64px;
}

.offer__list {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}


/* ----------------Product Item---------------- */

.product {
    width: 256px;
    display: flex;
    flex-direction: column;
    gap: 8px;

    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: -0.32px;
}

.product__img {
    padding: 36px;
    margin-bottom: 8px;

    & img {
        max-width: 100%;
    }
}

.product__name {
    margin-bottom: 0;
    color: var(--secondary);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product__info {
    margin-bottom: 0;
    color: var(--blue-grey);

    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product__price {
    display: flex;
    gap: 8px;
    align-items: center;

    & span:first-child {
        color: var(--secondary);
        font-size: 24px;
        line-height: 30px;
        font-weight: 600;
        letter-spacing: -0.48px;
    }

    & span:last-child {
        color: var(--grey);
        font-size: 18px;
        letter-spacing: -0.36px;
        text-decoration: line-through;
    }
}

.product__controls {
    display: flex;
    justify-content: space-between;
    gap: 8px;

    & .button {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 10px;
    }
}

.btn-favorite {
    padding: 12px 26px;
    background-color: var(--blue-white);
    border: none;
    border-radius: 6px;
    outline: none;
    transition: opacity 0.3s;

    &:hover {
        opacity: 0.6;
    }
}

.product__delivery {
    margin-bottom: 0;
    padding: 8px 0;

    color: var(--black);
    font-size: 14px;
    line-height: 19px;
    letter-spacing: -0.28px;

    display: flex;
    gap: 4px;

    & span {
        color: var(--grey);
    }
}

/* ------------------------Main Page--------------------- */
.banners {
    margin: 40px 0 66px;
    height: 360px;

    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;

    & .splide,
    & .splide__track {
        height: 100%;
        border-radius: 10px;
    }

    & .splide__arrow {
        top: 50%;
        width: 48px;
        height: 48px;
        background-color: white;
        box-shadow: 0 8px 20px 10px rgba(175, 175, 175, 0.15);
        opacity: 1;

        & svg {
            color: var(--secondary);
            fill: none;
            width: 24px;
            height: 24px;
            transition: color 0.2s ease;
        }

        &:hover {
            opacity: 1;

            & svg {
                color: var(--primary);
                transition: color 0.2s ease;
            }

        }
    }

    & .splide__arrow--prev {
        left: -24px;
    }

    & .splide__arrow--next {
        right: -24px;
    }


    & .splide__slide {
        border-radius: 10px;
    }

    & .splide__slide img {
        border-radius: 10px;
        max-width: 100%;
    }

    & .splide__pagination {
        bottom: -22px;
        gap: 12px;
    }

    & .splide__pagination__page {
        margin: 0;
        background: var(--input-border);
        opacity: 1;

        &.is-active {
            transform: none;
            background: var(--primary);
        }
    }

    & .banner {
        height: 100%;
    }
}

.banners__wrapper {
    grid-column: 1 / 2;
}

.banner {
    overflow: hidden;
    border-radius: 12px;

    & img {
        max-width: 100%;
        min-height: 100%;
        object-fit: cover;
    }
}

.mini-banners {
    height: 160px;
    margin-bottom: 44px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.mini-banners__banner {
    grid-column: 1 span;

    &:not(:last-child) {
        grid-column: 2 span;

        & img {
            margin-top: -20px;
            min-height: calc(100% + 20px);
        }
    }
}

.grid-banners {
    margin-bottom: 44px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
}

.grid-banners__banner {


    &:last-child {
        grid-row: 1 / 3;
        grid-column: 2 / 3;
    }
}

.section-title {
    margin-bottom: 22px;

    color: var(--secondary);
    font-size: 32px;
    line-height: 36px;
    font-weight: 600;
    letter-spacing: -0.64px;
}

.categories {
    margin-bottom: 44px;
}

.categories__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.categories__item {
    overflow: hidden;
    height: 160px;
    padding: 20px 30px;

    display: flex;
    flex-direction: column;
    gap: 6px;

    background-color: var(--blue-white);
    border-radius: 10px;
    text-decoration: none;

    & p {
        margin-bottom: 0;
        color: var(--secondary);
        text-align: center;

        font-size: 18px;
        line-height: 22px;
        font-weight: 600;
        letter-spacing: -0.36px;
    }

    & span {
        display: flex;
        justify-content: center;

        & img {
            object-fit: contain;
        }
    }
}

.products {
    margin-bottom: 44px;

    & .splide__arrow {
        top: 25%;
        width: 48px;
        height: 48px;
        background-color: var(--white);
        opacity: 1;

        border-radius: 32px;
        border: 1px solid var(--blue-white, #F4F6FB);

        box-shadow: 0 8px 20px 10px rgba(175, 175, 175, 0.15);

        & svg {
            color: var(--secondary);
            fill: none;
            width: 24px;
            height: 24px;
            transition: color 0.2s ease;
        }

        &:hover {
            opacity: 1;

            & svg {
                color: var(--primary);
                transition: color 0.2s ease;
            }

        }
    }

    & .splide__arrow--prev {
        left: -24px;
    }

    & .splide__arrow--next {
        right: -24px;
    }
}

.brands {
    margin-bottom: 80px;
}

.brands__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.brands__item {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--blue-white);
    border-radius: 10px;

    & img {
        max-width: 100%;
    }
}

.owl-item {
    height: 278px !important;
}

.untouchable {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

/*Временное решение для категорий*/

.products {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
}

.products__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 10px;
}

.products__sort {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;

    p {
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: -0.02em;
        color: var(--secondary);
        margin: 0;
    }
}

ul.products__sort-items {
    margin: 0;
    padding: 0;
}

ul.products__sort-items li {
    display: inline;
    margin: 0;

    a {
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: -0.02em;
        color: var(--grey);
        text-decoration: none;
    }
}

.product-item {
    display: flex;
    flex-direction: column;
}

.product-item__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;

    img {
        width: 100%;
        aspect-ratio: 1;
    }
}

.product-item__title {
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: var(--secondary);

    padding-top: 16px;
    margin: 0;
    overflow: hidden;
    max-height: 85px;
    min-height: 85px;
}

.product-item__subtitle {
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: var(--blue-grey);
    margin: 0;
}

.product-item__price-block {
    display: flex;
    gap: 8px;
    align-items: center;
}

.product-item__price {
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    color: var(--secondary);
    margin: 0;
}

.product-item__old-price {
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    color: var(--grey);
    text-decoration: line-through;
    margin: 0;
}

.product-item__actions {
    display: flex;
    width: 100%;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
}

.product-item__favourite {
    width: 66px;
    height: 48px;
    background-color: var(--blue-white);
    border-radius: 6px;
    border: none;
    outline: none;
}

.product-item__info {
    display: flex;
    gap: 4px;

    p {
        font-weight: 500;
        font-size: 14px;
        line-height: 19px;
        color: var(--black);
        margin: 0;
    }

    span {
        font-weight: 500;
        font-size: 14px;
        line-height: 19px;
        color: var(--grey);
        margin: 0;
    }
}

.tabs {
    width: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;

    position: relative;
    background: var(--white);

    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: var(--grey);
}

.tabs__item {
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;

    cursor: pointer;

    border-bottom: 1px var(--tertiary) solid;
}

.tabs__item:not(.disabled):hover {
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    color: black;
}

.tabs__item.active {
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    font-weight: 500;
    color: var(--secondary);
    border-bottom: 2px var(--primary) solid;
}

.product-info {
    display: flex;
    flex-direction: column;

    width: 100%;

    h1 {
        font-weight: 600;
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -0.02rem;
    }
}

.product-info__data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 42px;
}

.product-info__data-item {
    display: grid;
    grid-template-columns: 2fr 2fr;

    p {
        font-size: 14px;
        font-weight: 400;
        line-height: 19px;
        letter-spacing: -0.02em;
        color: var(--grey);

        margin: 0;
        padding: 0 5px 0 0;
    }

    span {
        font-size: 14px;
        font-weight: 400;
        line-height: 19px;
        letter-spacing: -0.02em;
        text-align: left;

        color: var(--secondary);
    }
}

.product-info__table {
    margin-top: 42px;
}

.product-info__code {
    margin: 22px 0 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.02em;

    color: var(--secondary);

    a {
        color: var(--primary);
        text-decoration: underline;
    }
}

.product-info__tabs {
    margin-top: 10px;
}

.product-info__tab-content {
    width: 60%;
    margin-top: 16px;
}

.product-info__description {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.02em;
    color: var(--secondary);
}


.item-slider {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

.product-images {
    display: flex;
    flex-direction: column;
    gap: 16px;

    max-width: 278px;
}

.product-images__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.owl-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
    margin-top: var(--bs-gutter-y);
}

.owl-photo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: unset !important;
    object-fit: cover;
    border-radius: 8px;
    height: 278px;
    max-height: 278px;
}

.custom-navigation-item {
    min-width: 24px;
    width: 24px;
    height: 24px;
    color: var(--secondary);
    cursor: pointer;
}

.custom-navigation-item--prev {
    transform: rotate(90deg);
}

.custom-navigation-item--next {
    transform: rotate(-90deg);
}

.owl-thumbs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    img {
        width: 56px;
        height: 56px;
        padding: 1px;
        object-fit: contain;
        border-radius: 4px;
    }
}

.owl-thumb-item.active {
    padding: 0;
    overflow: hidden;
    outline: 1px var(--secondary) solid;
}

/* QR */

#qrPaymentModal .modal-title {
    min-width: 250px;
}

.qr-payment__balance {
    background-color: #F4F6FB;
    border-radius: 8px;
    padding: 12px;
}

.qr-payment__balance_title {
    color: #373737;
    font-size: 14px;
    font-family: Golos Text;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    margin-bottom: 5px;
}

.qr-payment__balance_sum {

    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.02em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #050505;

}

.qr-payment__balance_min {
    color: #A9A9A9;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: -0.02em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.qr-payment__balance_commission {
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: -0.02em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #A9A9A9;
}

.qr-payment__balance_totals {
    gap: 8px;
}

.qr-payment__balance_total {
    background-color: #F4F6FB;
    padding: 10px 12px 10px 12px;
    gap: 6px;
    border-radius: 8px;
    color: #0057FF;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    cursor: pointer;
}

.button-qr-payment {
    width: 100%;
    text-align: center;
}

.qr-payment__balance_amount {
    color: #0057FF;
    font-size: 44px;
    font-weight: 500;
    line-height: 44px;
    letter-spacing: -0.02em;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.qr-payment__text {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.02em;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #A9A9A9;
}

.button-qr-payment-chancel {
    background-color: #F4F6FB;
    color: #0057FF;
    width: 100%;
    text-align: center;
}

.button-qr-payment .spinner-border {
    display: none;
}

.button-qr-payment:disabled .spinner-border, .button-qr-payment[disabled] .spinner-border {
    display: inline-block !important;
}

.img-how {
    width: 100%;
}

.search__table tr.is_priority td, .is_priority {
    background-color: #f4fbf7 !important
}

/* bitrix 1457 */

.header__right-side {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header__mail {
    font-size: 14px;
    line-height: 18px;
    color: var(--secondary);
    text-decoration: none;
}

.hfield {
    text-align: right;
}

.hfield__name {
    color: var(--blue-grey);
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    padding-bottom: 0;
    margin-bottom: 0;
}

.hfield__value {
    text-decoration: none;
    color: var(--secondary);
    font-size: 14px;
    line-height: 18px;
}

.social {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/**/

.btn-bg-none {
    background-color: transparent !important;
}