/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {
    -webkit-text-size-adjust: 100%;
    line-height: 1.15
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

[hidden],
template {
    display: none
}

*,
:active,
:after,
:before,
:focus {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    outline: none;
    padding: 0
}

body {
    height: 100%;
    margin: 0;
    width: 100%
}

ol,
ul {
    list-style-type: none
}

@font-face {
    font-display: swap;
    font-family: PT-Sans;
    font-style: normal;
    font-weight: 400;
    src: url(../assets/fonts/pt_sans/PTSans-Regular.woff2) format("woff2"), url(../assets/fonts/pt_sans/PTSans-Regular.woff) format("woff"), url(../assets/fonts/pt_sans/PTSans-Regular.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: PT-Sans;
    font-style: normal;
    font-weight: 700;
    src: url(../assets/fonts/pt_sans/PTSans-Bold.woff2) format("woff2"), url(../assets/fonts/pt_sans/PTSans-Bold.woff) format("woff"), url(../assets/fonts/pt_sans/PTSans-Bold.ttf) format("truetype")
}

:root {
    --container-max-width-sm: 540px;
    --container-max-width-md: 720px;
    --container-max-width-lg: 954px;
    --container-max-width-xl: 1240px;
    --font-family: "PT-Sans", Arial, Helvetica, sans-serif;
    --fs-title: 48px;
    --fs-logo-title: 24px
}

@media(max-width:767px) {
    :root {
        --fs-title: 32px;
        --fs-logo-title: 20px
    }
}

@media(max-width:599px) {
    :root {
        --fs-title: 24px;
        --fs-logo-title: 16px
    }
}

:root {
    --c-white: #fff;
    --c-black: #000;
    --c-main: #110739;
    --c-accent-light: #ed1e79;
    --c-accent-dark: #f82179;
    --c-text: #090618;
    --c-placeholder-text: #9e99a8;
    --c-notes-text: #6f5e91;
    --c-processing: #f1b210;
    --c-completed: #17a625;
    --c-bg-light: #f3f3f3;
    --c-bg: #f5f5f6;
    --c-bg-dark: #dbd7e3;
    --c-numval-t: #5d5d63;
    --c-numval-b: #c4c4c4;
    --c-photo-bg: #d3d1d8;
    --c-option-bg: #ffd3e5;
    --transition: all .3s linear
}

html {
    font-family: var(--font-family);
    font-size: 16px
}

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

@media(max-width:1199px) {
    .container {
        max-width: var(--container-max-width-lg)
    }
}

@media(max-width:959px) {
    .container {
        max-width: var(--container-max-width-md)
    }
}

@media(max-width:767px) {
    .container {
        max-width: var(--container-max-width-sm)
    }
}

.h1 {
    color: var(--c-text);
    font-size: var(--fs-title);
    font-weight: 700;
    line-height: 1.3;
    margin: 0
}

.header {
    background-color: var(--c-main);
    padding: 28px 0 20px
}

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

.header .open-menu-wrap._icon {
    border: 1px solid var(--c-numval-b);
    border-radius: 5px;
    display: none;
    padding: 10px 7px 6px
}

@media(max-width:959px) {
    .header .open-menu-wrap._icon {
        display: block
    }
    .header .menu {
        display: none
    }
}

.step-header {
    margin-bottom: 40px
}

@media(max-width:599px) {
    .step-header__title {
        width: 230px
    }
}

.step-header__info {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
    row-gap: 20px
}

.step-header__subtitle {
    color: var(--c-text);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3
}

@media(max-width:959px) {
    .step-header__subtitle {
        font-size: 24px
    }
}

@media(max-width:767px) {
    .step-header__subtitle {
        font-size: 20px
    }
}

@media(max-width:599px) {
    .step-header__subtitle {
        font-size: 16px
    }
}

.step-header__btns {
    align-items: center;
    column-gap: 14px;
    display: flex
}

@media(max-width:767px) {
    .step-header__btns {
        order: 1
    }
}

.step-header .btn {
    flex-basis: fit-content;
    padding: 9px 46px
}

@media(max-width:599px) {
    .step-header .btn {
        padding: 9px 35px
    }
}

.step-header__number {
    flex-basis: 100%
}

.menu-wrap {
    background: var(--c-white);
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: auto;
    padding: 26px;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateZ(0);
    transition: transform .7s ease;
    width: 100%;
    z-index: 15
}

.menu-wrap.menu-hidden {
    transform: translate3d(100%, 0, 0);
    transition: transform .7s ease .4s
}

.menu-wrap._open .menu-wrap__links,
.menu-wrap._open .menu-wrap__menu {
    opacity: 1
}

.menu-wrap__close {
    height: 45px;
    padding: 10px;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 45px
}

.menu-wrap__close .icon-close {
    height: 20px;
    width: 18px
}

.menu-wrap__close:hover .icon-close {
    transform: rotate(90deg)
}

.menu-wrap__menu {
    align-items: center;
    display: flex;
    flex-basis: auto;
    flex-grow: 1;
    justify-content: center;
    opacity: 0;
    transition: opacity .4s ease
}

.menu-wrap__menu .menu .menu__item {
    display: block;
    font-family: var(--f-primary-medium);
    margin-bottom: 30px;
    text-align: center
}

.menu-wrap__menu .menu .menu__item:last-child {
    margin-bottom: 0
}

.menu-wrap__menu .menu .menu__item a {
    font-size: 14px
}

.menu-wrap__phone {
    font-family: var(--f-primary-medium);
    margin-bottom: 22px;
    text-align: center
}

.menu-wrap__links {
    align-items: center;
    column-gap: 21px;
    display: flex;
    justify-content: center;
    line-height: 1;
    opacity: 0;
    transition: opacity .4s ease
}

.menu-wrap__links a {
    line-height: 1
}

.menu-wrap__links .social svg path {
    fill: var(--c-text)
}

.menu-wrap .menu__item-techs {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    transition: all .8s ease;
    width: 100%
}

.menu-wrap .menu__item-techs .submenu__item:not(:last-child) {
    margin-bottom: 20px
}

.menu-wrap .menu__item-techs .submenu__item .link {
    color: var(--c-black);
    font-family: var(--f-primary)
}

.menu-wrap .menu__item-techs._open {
    height: 140px;
    opacity: 1;
    padding-top: 30px;
    transition: var(--transition)
}

.modal {
    height: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 0
}

.modal,
.modal._open {
    transition: var(--transition)
}

.modal._open {
    height: 100vh;
    width: 100vw
}

.modal__overlay {
    background: var(--c-black);
    height: 100%;
    opacity: .7;
    position: absolute;
    width: 100%
}

.modal__container {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: space-between
}

.number-field {
    color: var(--c-main);
    font-size: 14px;
    font-weight: 400;
    height: 28px;
    line-height: 28px;
    position: relative;
    text-align: center;
    width: 47px
}

.number-field._border {
    border: 1px solid var(--c-numval-b);
    border-radius: 3px
}

.number-field__control {
    cursor: pointer;
    height: 8px;
    position: absolute;
    top: 0;
    width: 8px
}

.number-field__control._plus {
    right: -14px
}

.number-field__control._minus {
    left: -14px
}

.number-field__control svg {
    height: 100%;
    width: 100%
}

.btn,
.link {
    background: none;
    text-decoration: none
}

.btn,
.btn:hover,
.link,
.link:hover {
    transition: var(--transition)
}

.btn {
    background-color: var(--c-accent-light);
    border-radius: 5px;
    color: var(--c-white);
    cursor: pointer;
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center
}

@media(max-width:767px) {
    .btn {
        font-size: 14px
    }
}

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

.btn._transparent {
    background-color: transparent;
    border: 1px solid var(--c-accent-light);
    color: var(--c-black)
}

.btn._transparent:hover {
    background-color: var(--c-accent-dark);
    color: var(--c-white)
}

.btn._icon {
    background-color: transparent;
    border-radius: 0
}

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

.link._accent {
    color: var(--c-accent-light)
}

.link._accent:hover {
    color: var(--c-accent-dark)
}

.link._white {
    color: var(--c-white)
}

.link._white:hover {
    color: var(--c-accent-light)
}

.logo {
    display: flex
}

.logo__img {
    object-fit: contain;
    padding-right: 4px;
    width: 77px
}

@media(max-width:767px) {
    .logo__img {
        width: 65px
    }
}

@media(max-width:599px) {
    .logo__img {
        width: 41px
    }
}

.logo__title {
    color: var(--c-accent-light);
    font-size: var(--fs-logo-title)
}

.logo__subtitle,
.logo__title {
    font-weight: 700;
    line-height: 1.3
}

.logo__subtitle {
    color: var(--c-notes-text);
    font-size: 12px
}

.menu {
    column-gap: 60px;
    display: flex
}

.menu .link {
    font-size: 16px;
    font-weight: 400
}

.menu-mobile {
    display: flex;
    flex-direction: column;
    row-gap: 20px
}

.menu-mobile .link {
    color: var(--c-main);
    font-size: 16px;
    font-weight: 400;
    text-align: left
}

.orders .order {
    align-items: center;
    border: 1px solid var(--c-bg-dark);
    border-radius: 10px;
    color: var(--c-black);
    display: flex;
    font-size: 16px;
    font-weight: 400;
    justify-content: start;
    line-height: 1.3;
    padding: 24px
}

@media(max-width:959px) {
    .orders .order {
        font-size: 14px
    }
}

@media(max-width:599px) {
    .orders .order {
        flex-direction: column;
        row-gap: 40px
    }
}

.orders .order:not(:last-child) {
    margin-bottom: 20px
}

.orders .order__firstblock {
    align-self: flex-start;
    flex-basis: 166px
}

@media(max-width:767px) {
    .orders .order__firstblock {
        align-self: stretch;
        display: flex;
        flex-basis: 150px;
        flex-direction: column;
        justify-content: space-between
    }
}

@media(max-width:599px) {
    .orders .order__firstblock {
        align-self: start;
        flex-basis: 100%;
        flex-direction: row;
        width: 100%
    }
}

.orders .order__info {
    color: var(--c-main)
}

.orders .order__list {
    flex-basis: 420px
}

@media(max-width:1199px) {
    .orders .order__list {
        flex-basis: 260px
    }
}

@media(max-width:767px) {
    .orders .order__list {
        align-self: flex-start;
        flex-basis: 235px
    }
}

@media(max-width:599px) {
    .orders .order__list {
        flex-basis: auto
    }
}

.orders .order__list-item:not(:last-child) {
    margin-bottom: 10px
}

.orders .order__list-item span {
    color: var(--c-notes-text)
}

.orders .order__list .link {
    color: var(--c-accent-light)
}

.orders .order__list .link:hover {
    color: var(--c-accent-dark)
}

.orders .order__user {
    flex-basis: 170px;
    text-align: center
}

@media(max-width:767px) {
    .orders .order__user {
        display: none
    }
}

.orders .order__user._mobile {
    display: none
}

@media(max-width:767px) {
    .orders .order__user._mobile {
        display: block;
        flex-basis: auto;
        margin-top: 20px;
        text-align: left
    }
}

@media(max-width:767px)and (max-width:599px) {
    .orders .order__user._mobile {
        margin-top: 0
    }
}

.orders .order__username {
    margin-bottom: 10px
}

.orders .order__link {
    flex-basis: auto;
    flex-grow: 1;
    text-align: right
}

@media(max-width:959px) {
    .orders .order__link {
        flex-grow: 0
    }
}

.orders .order__number {
    margin-bottom: 10px
}

.orders .order__controls {
    column-gap: 87px;
    display: flex;
    margin-left: auto
}

@media(max-width:1199px) {
    .orders .order__controls {
        column-gap: 50px
    }
}

@media(max-width:959px) {
    .orders .order__controls {
        align-self: stretch;
        column-gap: 0;
        flex-basis: 80px;
        flex-direction: column;
        justify-content: space-between
    }
}

@media(max-width:599px) {
    .orders .order__controls {
        flex-basis: 100%;
        flex-direction: row;
        width: 100%
    }
}

.orders .order__status {
    flex-basis: 187px;
    text-align: center
}

@media(max-width:959px) {
    .orders .order__status {
        flex-basis: auto;
        text-align: right
    }
}

.orders .order__status._yellow {
    color: var(--c-processing)
}

.orders .order__status._green {
    color: var(--c-completed)
}

.orders .order__status._grey {
    color: var(--c-placeholder-text)
}

.order-body {
    align-items: flex-start;
    column-gap: 33px;
    display: flex;
    justify-content: space-between
}

@media(max-width:959px) {
    .order-body {
        column-gap: 0;
        flex-direction: column;
        row-gap: 40px
    }
}

.order-body__list {
    flex-basis: auto;
    flex-grow: 1
}

@media(max-width:959px) {
    .order-body__list {
        width: 100%
    }
}

.order-body__list-item:not(:last-child) {
    margin-bottom: 60px
}

.order-body__list .prod-card {
    align-items: flex-start;
    column-gap: 20px;
    display: flex
}

@media(max-width:767px) {
    .order-body__list .prod-card {
        column-gap: 0;
        flex-wrap: wrap
    }
}

.order-body__list .prod-card__img {
    background-position: 0;
    background-repeat: no-repeat;
    background-size: contain;
    flex-basis: 124px;
    height: 124px
}

@media(max-width:1199px) {
    .order-body__list .prod-card__img {
        flex-basis: 80px;
        height: 80px
    }
}

@media(max-width:599px) {
    .order-body__list .prod-card__img {
        flex-basis: 66px;
        height: 66px
    }
}

.order-body__list .prod-card__textblock {
    flex-basis: auto;
    flex-grow: 1
}

@media(max-width:599px) {
    .order-body__list .prod-card__textblock {
        margin-top: 10px;
        width: 100%
    }
}

.order-body__list .prod-card__header {
    display: flex;
    justify-content: space-between;
    width: 100%
}

@media(max-width:599px) {
    .order-body__list .prod-card__header {
        flex-wrap: wrap
    }
}

@media(max-width:767px) {
    .order-body__list .prod-card__titleblock {
        width: 120px
    }
}

@media(max-width:599px) {
    .order-body__list .prod-card__titleblock {
        width: 200px
    }
}

.order-body__list .prod-card__category {
    color: var(--c-notes-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 6px
}

.order-body__list .prod-card__name {
    color: var(--c-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3
}

@media(max-width:767px) {
    .order-body__list .prod-card__name {
        font-size: 14px
    }
}

.order-body__list .prod-card__controls {
    align-items: center;
    column-gap: 43px;
    display: flex
}

@media(max-width:599px) {
    .order-body__list .prod-card__controls {
        flex-basis: 100%;
        flex-wrap: wrap;
        position: relative
    }
    .order-body__list .prod-card__counter {
        margin-left: 12px;
        order: 1
    }
}

.order-body__list .prod-card__price {
    color: var(--c-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    min-width: 95px;
    text-align: right
}

@media(max-width:767px) {
    .order-body__list .prod-card__price {
        font-size: 16px
    }
}

@media(max-width:599px) {
    .order-body__list .prod-card__price {
        flex-basis: 100%;
        margin-bottom: 10px;
        margin-top: 10px;
        text-align: left
    }
    .order-body__list .prod-card__delete {
        position: absolute;
        right: 0;
        top: -120px
    }
}

.order-body__list .prod-card__composition {
    display: flex;
    margin-top: 28px
}

@media(max-width:959px) {
    .order-body__list .prod-card__composition {
        justify-content: space-between
    }
}

@media(max-width:767px) {
    .order-body__list .prod-card__composition {
        display: none
    }
}

.order-body__list .prod-card__composition._mobile {
    display: none
}

@media(max-width:767px) {
    .order-body__list .prod-card__composition._mobile {
        display: flex
    }
}

@media(max-width:599px) {
    .order-body__list .prod-card__composition._mobile {
        margin-top: 20px;
        position: relative;
        width: 100%
    }
}

.order-body__list .prod-card__composition-title {
    color: var(--c-notes-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3
}

.order-body__list .prod-card__ingredients {
    display: flex;
    flex-direction: column;
    margin-right: 130px;
    row-gap: 10px
}

@media(max-width:1199px) {
    .order-body__list .prod-card__ingredients {
        margin-right: 90px
    }
}

@media(max-width:599px) {
    .order-body__list .prod-card__ingredients {
        margin-right: 0;
        row-gap: 13px
    }
}

.order-body__list .prod-card__ingredients .prod-card__composition-title {
    margin-bottom: 2px
}

.order-body__list .prod-card__ingredients-item {
    color: var(--c-numval-t);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3
}

@media(max-width:767px) {
    .order-body__list .prod-card__ingredients-item {
        font-size: 14px
    }
}

.order-body__list .prod-card__values {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    margin-right: 37px;
    row-gap: 6px;
    min-width: 65px;
}

@media(max-width:599px) {
    .order-body__list .prod-card__values {
        margin-right: 0
    }
}

.order-body__list .prod-card__values .prod-card__composition-title {
    margin-bottom: 6px
}

.order-body__list .prod-card__prices {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    margin-right: 90px;
    row-gap: 6px
}

@media(max-width:1199px) {
    .order-body__list .prod-card__prices {
        margin-right: 60px
    }
}

@media(max-width:767px) {
    .order-body__list .prod-card__prices {
        margin-right: 34px
    }
}

@media(max-width:599px) {
    .order-body__list .prod-card__prices {
        margin-right: 0
    }
}

.order-body__list .prod-card__prices .prod-card__composition-title {
    margin-bottom: 6px
}

.order-body__list .prod-card__purchaseprice {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    row-gap: 12px
}

@media(max-width:599px) {
    .order-body__list .prod-card__purchaseprice {
        position: absolute;
        right: 0;
        text-align: right;
        top: -130px;
        width: 100px
    }
}

.order-body__list .prod-card__number-val {
    border: 1px solid var(--c-numval-b);
    border-radius: 3px;
    color: var(--c-numval-t);
    font-size: 14px;
    font-weight: 400;
    height: 25px;
    line-height: 1.3;
    line-height: 25px;
    text-align: center;
    width: 51px
}

.order-body__result {
    background-color: var(--c-bg);
    border-radius: 4px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    flex-basis: 255px;
    padding: 24px
}

@media(max-width:1199px) {
    .order-body__result {
        flex-basis: 242px
    }
}

@media(max-width:959px) {
    .order-body__result {
        display: flex;
        flex-basis: auto;
        justify-content: space-between;
        width: 100%
    }
}

@media(max-width:599px) {
    .order-body__result {
        flex-direction: column;
        row-gap: 30px
    }
}

.order-body__result-category {
    color: var(--c-notes-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 6px
}

@media(max-width:959px) {
    .order-body__result-category {
        font-size: 14px;
        margin-bottom: 0
    }
}

.order-body__result-category:not(:first-child) {
    margin-top: 20px
}

@media(max-width:959px) {
    .order-body__result-category:not(:first-child) {
        margin-top: 9px
    }
}

.order-body__result-name {
    color: var(--c-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3
}

@media(max-width:959px) {
    .order-body__result-name {
        display: none
    }
}

.order-body__result-name+.order-body__result-name {
    margin-top: 6px
}

.order-body__totalprice {
    color: var(--c-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
    margin-top: 60px
}

@media(max-width:959px) {
    .order-body__totalprice {
        margin-top: 0;
        text-align: right
    }
}

@media(max-width:599px) {
    .order-body__totalprice {
        text-align: left
    }
}

.order-body__totalprice span:last-child {
    color: var(--c-accent-light)
}

.order-body__totalprice._flexible {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 0
}

.order-body__totalprice._flexible span {
    color: var(--c-black)
}

.order-body__btn {
    padding: 12px;
    width: 100%
}

.categories-list {
    align-items: center;
    column-gap: 15px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 15px
}

@media(max-width:959px) {
    .categories-list {
        column-gap: 6px;
        row-gap: 10px
    }
}

.categories-list__item {
    background-color: transparent;
    border: 1px solid var(--c-main);
    border-radius: 30px;
    color: var(--c-main);
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    padding: 6px 10px;
    transition: var(--transition)
}

@media(max-width:959px) {
    .categories-list__item {
        padding: 6px 10px
    }
}

@media(max-width:767px) {
    .categories-list__item {
        padding: 6px 10px
    }
}

.categories-list__item._selected,
.categories-list__item:hover {
    background-color: var(--c-main);
    color: var(--c-white);
    transition: var(--transition)
}

.search-form {
    border: 1px solid var(--c-numval-b);
    border-radius: 5px;
    padding: 10px 20px
}

.search-form__wrap {
    column-gap: 20px;
    display: flex;
    justify-content: space-between
}

.search-form__input {
    flex-basis: 100%;
    flex-shrink: 2
}

.contact-form__container {
    column-gap: 16px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px
}

.contact-form__field {
    color: var(--c-black);
    flex-basis: 48%;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3
}

@media(max-width:599px) {
    .contact-form__field {
        flex-basis: 100%
    }
}

.contact-form__input {
    border: 1px solid var(--c-placeholder-text);
    border-radius: 5px;
    color: var(--c-black);
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 6px;
    padding: 10px 16px;
    width: 100%
}

.worker-form__container {
    column-gap: 24px;
    display: flex
}

@media(max-width:767px) {
    .worker-form__container {
        column-gap: 0;
        flex-direction: column;
        row-gap: 24px
    }
}

.worker-form__text-fields {
    column-gap: 16px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px
}

@media(max-width:767px) {
    .worker-form__text-fields {
        column-gap: 0;
        flex-direction: column
    }
}

.worker-form__text-fields .worker-form__field {
    max-width: 286px
}

@media(max-width:767px) {
    .worker-form__text-fields .worker-form__field {
        max-width: 205px;
        max-width: 100%
    }
}

.worker-form__field {
    color: var(--c-black);
    flex-basis: 48%;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3
}

@media(max-width:767px) {
    .worker-form__field {
        flex-basis: auto
    }
}

.worker-form__field._photo {
    background-color: var(--c-bg);
    flex-basis: 159px;
    flex-shrink: 0;
    height: 188px;
    position: relative;
    width: 159px
}

@media(max-width:767px) {
    .worker-form__field._photo {
        flex-basis: auto;
        height: 186px;
        width: 205px
    }
}

@media(max-width:599px) {
    .worker-form__field._photo {
        width: 100%
    }
}

.worker-form__field._photo label {
    height: 100%;
    left: 0;
    line-height: 188px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%
}

.worker-form__field._photo input {
    height: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 0
}

.worker-form__input {
    border: 1px solid var(--c-placeholder-text);
    border-radius: 5px;
    color: var(--c-black);
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 6px;
    padding: 10px 16px;
    width: 100%
}

.worker-form__btn {
    margin-top: 24px;
    padding: 13px 72px
}

.ingredient-form__container {
    align-items: center;
    column-gap: 20px;
    display: flex
}

@media(max-width:599px) {
    .ingredient-form__container {
        column-gap: 0;
        flex-direction: column;
        row-gap: 24px
    }
}

.ingredient-form__text-fields {
    flex-basis: 255px
}

@media(max-width:599px) {
    .ingredient-form__text-fields {
        flex-basis: auto;
        width: 100%
    }
}

.ingredient-form__field {
    color: var(--c-black);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3
}

@media(max-width:599px) {
    .ingredient-form__field {
        width: 100%
    }
}

.ingredient-form__field+.ingredient-form__field {
    margin-top: 16px
}

.ingredient-form__field._photo {
    flex-basis: 255px;
    flex-shrink: 0;
    height: 317px;
    position: relative;
    width: 255px
}

@media(max-width:959px) {
    .ingredient-form__field._photo {
        flex-basis: 216px;
        height: 269px
    }
}

@media(max-width:599px) {
    .ingredient-form__field._photo {
        flex-basis: auto;
        height: 175px;
        width: 100%
    }
}

.ingredient-form__field._photo label {
    background-color: var(--c-photo-bg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.ingredient-form__field._photo input {
    height: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 0
}

.ingredient-form__input {
    border: 1px solid var(--c-placeholder-text);
    border-radius: 5px;
    color: var(--c-black);
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 6px;
    padding: 10px 16px;
    width: 100%
}

.ingredient-form__input._textarea {
    margin-top: 0
}

.ingredient-form__btn {
    margin-top: 20px;
    padding: 9px 52px
}

.cocktail-form__container {
    align-items: flex-start;
    column-gap: 31px;
    display: flex
}

@media(max-width:599px) {
    .cocktail-form__container {
        column-gap: 0;
        flex-direction: column;
        row-gap: 24px
    }
}

.cocktail-form__text-fields {
    flex-basis: 349px
}

@media(max-width:599px) {
    .cocktail-form__text-fields {
        flex-basis: auto;
        width: 100%
    }
}

.cocktail-form__field {
    color: var(--c-black);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3
}

@media(max-width:599px) {
    .cocktail-form__field {
        width: 100%
    }
}

.cocktail-form__field+.cocktail-form__field {
    margin-top: 16px
}

.cocktail-form__field._photo {
    flex-basis: 349px;
    flex-shrink: 0;
    height: 343px;
    position: relative
}

@media(max-width:1199px) {
    .cocktail-form__field._photo {
        flex-basis: 240px;
        height: 262px
    }
}

@media(max-width:767px) {
    .cocktail-form__field._photo {
        flex-basis: 180px;
        height: 182px
    }
}

@media(max-width:599px) {
    .cocktail-form__field._photo {
        flex-basis: auto;
        height: 224px;
        width: 100%
    }
}

.cocktail-form__field._photo label {
    background-color: var(--c-photo-bg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.cocktail-form__field._photo input {
    height: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 0
}

.cocktail-form__field .select {
    border: 1px solid var(--c-placeholder-text);
    border-radius: 5px;
    margin-top: 8px;
    width: 100%
}

.cocktail-form__field .select__header {
    padding: 10px 16px
}

.cocktail-form__field .select__list {
    border: 1px solid var(--c-placeholder-text);
    display: flex;
    flex-direction: column;
    max-width: fit-content;
    right: 0
}

.cocktail-form__field .select__option {
    text-align: left;
    white-space: nowrap
}

.cocktail-form__input {
    border: 1px solid var(--c-placeholder-text);
    border-radius: 5px;
    color: var(--c-black);
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 6px;
    padding: 10px 16px;
    width: 100%
}

.cocktail-form__input._textarea {
    margin-top: 0
}

.cocktail-form__btn {
    margin-top: 20px;
    padding: 9px 28px
}

.drink-list {
    align-items: flex-start;
    column-gap: 76px;
    display: flex;
    justify-content: space-between
}

@media(max-width:1199px) {
    .drink-list {
        column-gap: 30px
    }
}

@media(max-width:959px) {
    .drink-list {
        column-gap: 0;
        flex-direction: column;
        row-gap: 40px
    }
}

.drink-list__list {
    flex-basis: auto;
    flex-grow: 1
}

@media(max-width:1199px) {
    .drink-list__list {
        width: 100%
    }
}

.drink-list__item {
    align-items: center;
    border: 1px solid var(--c-main);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 7px 60px 8px 24px
}

.drink-list__item-img {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    flex-basis: 55px;
    height: 55px;
    margin-right: 17px
}

.drink-list__item-titleblock {
    display: flex;
    flex-grow: 1;
    width: 527px
}

@media(max-width:1199px) {
    .drink-list__item-titleblock {
        width: 517px
    }
}

@media(max-width:959px) {
    .drink-list__item-titleblock {
        width: 517px
    }
}

@media(max-width:599px) {
    .drink-list__item-titleblock {
        flex-direction: column;
        row-gap: 4px
    }
}

.drink-list__item-category {
    color: var(--c-notes-text);
    flex-basis: 40%;
    flex-shrink: 1;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3
}

@media(max-width:767px) {
    .drink-list__item-category {
        font-size: 14px
    }
}

.drink-list__item-name {
    color: var(--c-text);
    flex-basis: 50%;
    flex-shrink: 1;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3
}

@media(max-width:767px) {
    .drink-list__item-name {
        font-size: 14px
    }
}

.drink-list__item-counter {
    margin-left: 23px
}

.drink-list__item:not(:last-child) {
    margin-bottom: 20px
}

.drink-list__result {
    background-color: var(--c-bg);
    border-radius: 4px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    flex-basis: 255px;
    padding: 24px
}

@media(max-width:1199px) {
    .drink-list__result {
        flex-basis: 210px;
        flex-basis: auto;
        width: 100%
    }
}

.drink-list__result-category {
    color: var(--c-notes-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 6px
}

.drink-list__result-category:not(:first-child) {
    margin-top: 20px
}

.drink-list__result-name {
    color: var(--c-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3
}

.drink-list__result-name+.drink-list__result-name {
    margin-top: 6px
}

.drink-list__save {
    padding: 9px;
    width: 100%
}

.select {
    position: relative
}

.select__header {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 41px;
    justify-content: space-between;
    padding-right: 8px
}

@media(max-width:599px) {
    .select__header {
        gap: 21px
    }
}

.select__value {
    font-size: 16px
}

@media(max-width:1199px) {
    .select__value {
        font-size: 14px
    }
}

@media(max-width:599px) {
    .select__value {
        font-size: 12px
    }
}

.select__icon {
    display: flex;
    height: 7px;
    transform: rotate(0deg);
    transition: var(--transition);
    width: 12px
}

.select.active .select__icon {
    transform: rotate(180deg);
    transition: transform var(--transition)
}

.select__list {
    background-color: var(--c-white);
    border-radius: 4px;
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 100%;
    transition: var(--transition);
    visibility: hidden;
    width: 100%;
    z-index: -1
}

.select.active .select__list {
    height: auto;
    opacity: 1;
    padding-bottom: 10px;
    padding-top: 10px;
    transition: var(--transition);
    visibility: visible;
    z-index: 9999
}

.select__option {
    cursor: pointer;
    font-size: 16px;
    padding: 8px 16px;
    transition: var(--transition)
}

.select__option.active {
    background-color: var(--c-accent-dark);
    color: var(--c-white)
}

@media(max-width:767px) {
    .select__option {
        font-size: 14px
    }
}

.select__option:hover {
    background-color: var(--c-option-bg);
    color: var(--c-notes-text);
    transition: all var(--transition)
}

.sort {
    color: var(--c-main);
    column-gap: 5px;
    display: flex;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3
}

@media(max-width:959px) {
    .sort {
        font-size: 14px
    }
}

.sort .select__value {
    color: var(--c-accent-light)
}

.sort .select__list {
    left: 0;
    width: fit-content
}

.sort .select__option {
    white-space: nowrap
}

.signin-form__container {
    margin: 0 auto;
    max-width: 298px;
    text-align: center
}

.signin-form__title {
    color: var(--c-text);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 16px
}

@media(max-width:959px) {
    .signin-form__title {
        font-size: 24px
    }
}

@media(max-width:599px) {
    .signin-form__title {
        font-size: 20px
    }
}

.signin-form__field {
    color: var(--c-black);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3
}

@media(max-width:959px) {
    .signin-form__field {
        font-size: 14px
    }
}

.signin-form__field._checkbox {
    margin-top: 14px;
    padding-left: 24px;
    position: relative
}

.signin-form__field._checkbox input {
    height: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 0;
    z-index: -100
}

.signin-form__field._checkbox input:checked+label:before {
    color: var(--c-accent-light)
}

.signin-form__field._checkbox label {
    color: var(--c-placeholder-text);
    cursor: pointer;
    position: relative;
    width: fit-content
}

.signin-form__field._checkbox label:before {
    border: .8px solid var(--c-placeholder-text);
    border-radius: 2px;
    bottom: 3px;
    color: transparent;
    content: "✔";
    height: 14px;
    left: -24px;
    line-height: 9px;
    position: absolute;
    width: 14px
}

.signin-form__input {
    border: 1px solid var(--c-placeholder-text);
    border-radius: 5px;
    color: var(--c-black);
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    padding: 17px 16px;
    text-align: center;
    width: 100%
}

@media(max-width:1199px) {
    .signin-form__input {
        padding: 10px 16px
    }
}

@media(max-width:959px) {
    .signin-form__input {
        font-size: 14px
    }
}

.signin-form__btn {
    margin-top: 20px;
    padding: 13px 72px;
    width: 100%
}

@media(max-width:959px) {
    .signin-form__btn {
        font-size: 14px
    }
}

.signin-form__forgot-pass {
    color: var(--c-notes-text);
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 20px
}

@media(max-width:959px) {
    .signin-form__forgot-pass {
        font-size: 14px
    }
}

.forgotpass-form {
    background-color: var(--c-white);
    margin: 0 auto;
    max-width: 498px;
    padding: 55px 74px 60px;
    position: relative
}

@media(max-width:1199px) {
    .forgotpass-form {
        padding: 50px 74px
    }
}

@media(max-width:959px) {
    .forgotpass-form {
        padding: 40px 67px
    }
}

@media(max-width:767px) {
    .forgotpass-form {
        padding: 28px 62px
    }
}

@media(max-width:599px) {
    .forgotpass-form {
        padding: 40px 30px
    }
}

.forgotpass-form__title {
    color: var(--c-black);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 16px
}

@media(max-width:959px) {
    .forgotpass-form__title {
        font-size: 24px
    }
}

@media(max-width:599px) {
    .forgotpass-form__title {
        font-size: 20px
    }
}

.forgotpass-form__subtitle {
    color: var(--c-notes-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 16px
}

@media(max-width:599px) {
    .forgotpass-form__subtitle {
        font-size: 14px
    }
}

.forgotpass-form__field {
    color: var(--c-black);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3
}

@media(max-width:599px) {
    .forgotpass-form__field {
        font-size: 14px
    }
}

.forgotpass-form__input {
    border: 1px solid var(--c-placeholder-text);
    border-radius: 5px;
    color: var(--c-black);
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    padding: 14px 20px;
    width: 100%
}

@media(max-width:1199px) {
    .forgotpass-form__input {
        padding: 9px 20px
    }
}

@media(max-width:599px) {
    .forgotpass-form__input {
        font-size: 14px
    }
}

.forgotpass-form__btn {
    margin-top: 20px;
    padding: 13px 72px;
    width: 100%
}

@media(max-width:959px) {
    .forgotpass-form__btn {
        font-size: 14px
    }
}

.forgotpass-form__close {
    position: absolute;
    right: 44px;
    top: 67px
}

@media(max-width:1199px) {
    .forgotpass-form__close {
        right: 44px;
        top: 63px
    }
}

@media(max-width:959px) {
    .forgotpass-form__close {
        right: 44px;
        top: 53px
    }
}

@media(max-width:767px) {
    .forgotpass-form__close {
        right: 28px;
        top: 41px
    }
}

@media(max-width:599px) {
    .forgotpass-form__close {
        right: 28px;
        top: 28px
    }
}

.forgotpass-form__close svg {
    fill: var(--c-placeholder-text);
    height: 16px;
    width: 16px
}

.orders-main-screen {
    padding: 80px 0 72px
}

@media(max-width:767px) {
    .orders-main-screen {
        padding: 40px 0 50px
    }
}

.orders-main-screen__header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px
}

@media(max-width:767px) {
    .orders-main-screen__header {
        margin-bottom: 20px
    }
}

.orders-main-screen__add {
    padding: 14px 40px
}

@media(max-width:959px) {
    .orders-main-screen__add {
        padding: 13px 30px
    }
}

@media(max-width:599px) {
    .orders-main-screen__add {
        padding: 10px 11px
    }
}

.orders-main-screen .sort {
    background-color: var(--c-bg-light);
    border-radius: 10px;
    margin-bottom: 20px;
    margin-left: auto;
    padding: 8px 27px;
    text-align: center;
    width: fit-content
}

@media(max-width:959px) {
    .orders-main-screen .sort {
        padding: 8px 24px
    }
}

@media(max-width:599px) {
    .orders-main-screen .sort {
        margin-left: 0
    }
}

.order-main-screen {
    padding: 80px 0 141px
}

.order-main-screen__header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 40px
}

@media(max-width:1199px) {
    .order-main-screen__header {
        margin-bottom: 20px
    }
}

@media(max-width:599px) {
    .order-main-screen__header {
        margin-bottom: 32px;
        row-gap: 40px
    }
}

.order-main-screen__title {
    flex-basis: auto
}

.order-main-screen__save {
    flex-basis: fit-content;
    padding: 9px 59px
}

@media(max-width:599px) {
    .order-main-screen__save {
        display: none
    }
}

.order-main-screen__save._mobile {
    display: none
}

@media(max-width:599px) {
    .order-main-screen__save._mobile {
        display: block;
        margin-top: 40px;
        width: 100%
    }
}

.order-main-screen__info {
    color: var(--c-main);
    column-gap: 60px;
    display: flex;
    flex-basis: 100%;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 20px
}

@media(max-width:959px) {
    .order-main-screen__info {
        font-size: 14px;
        justify-content: space-between
    }
}

@media(max-width:599px) {
    .order-main-screen__info {
        column-gap: 0;
        flex-direction: column;
        row-gap: 12px
    }
}

.order-main-screen__info .order__status {
    color: var(--c-black)
}

.order-main-screen__info .order__status ._yellow {
    color: var(--c-processing)
}

.order-main-screen__info .order__status ._green {
    color: var(--c-completed)
}

.order-main-screen__info .order__status ._grey {
    color: var(--c-placeholder-text)
}

.step1-main-screen {
    padding: 80px 0 256px
}

@media(max-width:1199px) {
    .step1-main-screen {
        padding: 80px 0 90px
    }
}

@media(max-width:959px) {
    .step1-main-screen {
        padding: 80px 0 75px
    }
}

@media(max-width:599px) {
    .step1-main-screen {
        padding: 60px 0 65px
    }
    .step1-main-screen__title {
        width: 230px
    }
}



@media(max-width:1199px) {
    .step1-main-screen .categories-list {
        width: calc(100% - 160px)
    }
}

@media(max-width:959px) {
    .step1-main-screen .categories-list {
        width: 100%
    }
}

.step1-main-screen .search-form {
    margin-bottom: 40px;
    margin-top: 20px;
    width: calc(100% - 331px)
}

@media(max-width:1199px) {
    .step1-main-screen .search-form {
        width: calc(100% - 160px)
    }
}

@media(max-width:959px) {
    .step1-main-screen .search-form {
        width: 100%
    }
}

.step2-main-screen {
    padding: 80px 0 101px
}

@media(max-width:1199px) {
    .step2-main-screen {
        padding: 80px 0 90px
    }
}

@media(max-width:959px) {
    .step2-main-screen {
        padding: 80px 0 75px
    }
}

@media(max-width:599px) {
    .step2-main-screen {
        padding: 60px 0 65px
    }
}

.step3-main-screen {
    padding: 80px 0 55px
}

@media(max-width:599px) {
    .step3-main-screen {
        padding: 60px 0 55px
    }
}

.step3-main-screen__titleblock {
    align-items: center;
    background-color: var(--c-accent-dark);
    border-radius: 4px;
    display: flex;
    margin-bottom: 19px;
    max-width:100%;
    padding: 9px 24px
}

@media(max-width:767px) {
    .step3-main-screen__titleblock {
        display: none
    }
}

.step3-main-screen__title {
    color: var(--c-white);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3
}

.step3-main-screen__title:nth-child(2) {
    margin-left: 167px
}

@media(max-width:959px) {
    .step3-main-screen__title:nth-child(2) {
        margin-left: 100px
    }
}

.step3-main-screen__title:nth-child(3) {
    margin-left: 125px
}

@media(max-width:959px) {
    .step3-main-screen__title:nth-child(3) {
        margin-left: 100px
    }
}

.step3-main-screen__title:nth-child(4) {
    margin-left: 233px
}

@media(max-width:959px) {
    .step3-main-screen__title:nth-child(4) {
        margin-left: 150px
    }
}

.step3-main-screen__item {
    align-items: flex-end;
    border: 1px solid var(--c-main);
    border-radius: 5px;
    display: flex;
    max-width: 100%;
    padding: 24px
}

@media(max-width:767px) {
    .step3-main-screen__item {
        flex-wrap: wrap
    }
}

@media(max-width:599px) {
    .step3-main-screen__item {
        justify-content: space-between;
        position: relative
    }
}

.step3-main-screen__item-name {
    color: var(--c-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 16px;
    min-height: 44px
}

@media(max-width:767px) {
    .step3-main-screen__item-name {
        font-size: 14px
    }
}

@media(max-width:599px) {
    .step3-main-screen__item-name {
        margin-bottom: 34px
    }
}

.step3-main-screen__item-ingredients {
    flex-basis: 250px
}

@media(max-width:959px) {
    .step3-main-screen__item-ingredients {
        flex-basis: 216px
    }
}

@media(max-width:767px) {
    .step3-main-screen__item-ingredients {
        flex-basis: 40%
    }
}

.step3-main-screen__item-ingredient {
    color: var(--c-black);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    min-height: 43px
}

@media(max-width:767px) {
    .step3-main-screen__item-ingredient {
        font-size: 14px
    }
}

.step3-main-screen__item-ingredient+.step3-main-screen__item-ingredient {
    margin-top: 6px
}

.step3-main-screen__item-volumes {
    flex-basis: 70px
}

.step3-main-screen__item-volume {
    color: var(--c-black);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 6px;
    min-height: 43px;
    text-align: center
}

@media(max-width:767px) {
    .step3-main-screen__item-volume {
        font-size: 14px
    }
}

@media(max-width:599px) {
    .step3-main-screen__item-volume {
        text-align: right
    }
}

.step3-main-screen__item-photo {
    flex-basis: 243px
}

@media(max-width:767px) {
    .step3-main-screen__item-photo {
        align-items: center;
        align-self: flex-start;
        display: flex;
        flex-basis: 35%;
        flex-direction: row-reverse;
        margin-left: auto
    }
}

@media(max-width:599px) {
    .step3-main-screen__item-photo {
        justify-content: space-between;
        position: absolute;
        right: 12px;
        top: 12px;
        width: 102px
    }
}

.step3-main-screen__item-img {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 129px;
    margin: 0 auto 16px;
    width: 137px
}

@media(max-width:959px) {
    .step3-main-screen__item-img {
        height: 92px;
        width: 96px
    }
}

@media(max-width:767px) {
    .step3-main-screen__item-img {
        height: 122px;
        margin: 0 0 0 auto;
        width: 128px
    }
}

@media(max-width:599px) {
    .step3-main-screen__item-img {
        height: 44px;
        width: 44px
    }
}

.step3-main-screen__item-count {
    text-align: center
}

.step3-main-screen__item-description {
    align-self: center;
    color: var(--c-black);
    flex-basis: 231px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    margin-left: auto
}

@media(max-width:767px) {
    .step3-main-screen__item-description {
        flex-basis: 100%;
        font-size: 14px;
        margin-top: 26px
    }
}

.step3-main-screen__item+.step3-main-screen__item {
    margin-top: 10px
}

.step4-main-screen {
    padding: 80px 0 210px
}

@media(max-width:1199px) {
    .step4-main-screen {
        padding: 80px 0 90px
    }
}

@media(max-width:959px) {
    .step4-main-screen {
        padding: 80px 0 75px
    }
}

@media(max-width:599px) {
    .step4-main-screen {
        padding: 60px 0 65px
    }
}

.step4-main-screen .order-ingredients {
    border: 1px solid var(--c-main);
    border-radius: 10px;
    column-gap: 71px;
    display: flex;
    justify-content: space-between;
    max-width: 658px;
    padding: 24px
}

@media(max-width:767px) {
    .step4-main-screen .order-ingredients {
        column-gap: 0;
        flex-direction: column;
        row-gap: 30px
    }
}

.step4-main-screen .order-ingredients__info {
    color: var(--c-main);
    flex-basis: auto;
    flex-grow: 1;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3
}

.step4-main-screen .order-ingredients__info-item {
    display: flex;
    justify-content: space-between
}

.step4-main-screen .order-ingredients__info-item:not(:first-child) {
    margin-top: 6px
}

.step4-main-screen .order-ingredients__info-name {
    color: var(--c-text);
    flex-basis: 230px
}

@media(max-width:599px) {
    .step4-main-screen .order-ingredients__info-name {
        flex-basis: 70%
    }
}

.step4-main-screen .order-ingredients__info-volume {
    flex-basis: 73px
}

.step4-main-screen .order-ingredients__info-price {
    flex-basis: 84px;
    text-align: right
}

.step4-main-screen .order-ingredients__controls {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

@media(max-width:767px) {
    .step4-main-screen .order-ingredients__controls {
        align-items: flex-end;
        flex-direction: row-reverse
    }
}

@media(max-width:599px) {
    .step4-main-screen .order-ingredients__controls {
        align-items: flex-start;
        flex-direction: column;
        row-gap: 20px
    }
}

.step4-main-screen .order-ingredients__controls-price {
    color: var(--c-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3
}

.step4-main-screen .order-ingredients__controls-header {
    column-gap: 27px;
    display: flex
}

@media(max-width:767px) {
    .step4-main-screen .order-ingredients__controls-header {
        align-items: flex-end;
        justify-content: space-between;
        width: 200px
    }
}

@media(max-width:599px) {
    .step4-main-screen .order-ingredients__controls-header {
        column-gap: 0;
        width: 160px
    }
}

.step4-main-screen .order-ingredients__controls-header .link {
    font-size: 16px;
    font-weight: 400
}

.step4-main-screen .order-ingredients__controls .btn {
    margin-bottom: 14px;
    padding: 9px
}

@media(max-width:767px) {
    .step4-main-screen .order-ingredients__controls .btn {
        margin-bottom: 0;
        padding: 11px 48px
    }
}

.step4-main-screen .order-drinks {
    margin-top: 40px;
    max-width: 730px
}

.step4-main-screen .order-drinks .order-drink {
    border: 1px solid var(--c-main);
    border-radius: 5px;
    color: var(--c-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    padding: 24px
}

@media(max-width:767px) {
    .step4-main-screen .order-drinks .order-drink {
        font-size: 14px
    }
}

.step4-main-screen .order-drinks .order-drink+.order-drink {
    margin-top: 10px
}

.step4-main-screen .order-drinks .order-drink__header {
    align-items: center;
    display: flex;
    justify-content: space-between
}

@media(max-width:599px) {
    .step4-main-screen .order-drinks .order-drink__header {
        align-items: flex-start
    }
}

.step4-main-screen .order-drinks .order-drink__header-right {
    display: flex;
    flex-basis: auto;
    flex-grow: 1;
    justify-content: space-between
}

@media(max-width:599px) {
    .step4-main-screen .order-drinks .order-drink__header-right {
        flex-wrap: wrap;
        row-gap: 20px;
        text-align: right
    }
}

.step4-main-screen .order-drinks .order-drink__name {
    flex-basis: 50%
}

@media(max-width:599px) {
    .step4-main-screen .order-drinks .order-drink__name {
        flex-basis: 80%
    }
}

.step4-main-screen .order-drinks .order-drink__count {
    color: var(--c-main);
    font-size: 18px
}

@media(max-width:767px) {
    .step4-main-screen .order-drinks .order-drink__count {
        font-size: 14px
    }
}

@media(max-width:599px) {
    .step4-main-screen .order-drinks .order-drink__change {
        margin-left: auto;
        text-align: right
    }
}

.step4-main-screen .order-drinks .order-drink__body {
    align-items: flex-end;
    display: flex;
    height: 0;
    justify-content: space-between;
    margin-top: 0;
    min-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: var(--transition)
}

@media(max-width:599px) {
    .step4-main-screen .order-drinks .order-drink__body {
        align-items: flex-start;
        flex-direction: column;
        row-gap: 24px
    }
    .step4-main-screen .order-drinks .order-drink._expanded {
        position: relative
    }
}

.step4-main-screen .order-drinks .order-drink._expanded .order-drink__body {
    height: auto;
    margin-top: 16px;
    min-height: 40px;
    opacity: 1;
    transition: var(--transition)
}

@media(max-width:599px) {
    .step4-main-screen .order-drinks .order-drink._expanded .order-drink__header-right {
        flex-direction: column;
        position: absolute;
        right: 24px;
        top: 24px
    }
}

.step4-main-screen .order-drinks .order-drink__ingredient {
    font-size: 14px
}

.step4-main-screen .order-drinks .order-drink__save {
    padding: 9px 44px
}

@media(max-width:599px) {
    .step4-main-screen .order-drinks .order-drink__save {
        align-self: flex-end
    }
}

.step5-main-screen {
    padding: 80px 0 210px
}

@media(max-width:1199px) {
    .step5-main-screen {
        padding: 80px 0 90px
    }
}

@media(max-width:959px) {
    .step5-main-screen {
        padding: 80px 0 75px
    }
}

@media(max-width:599px) {
    .step5-main-screen {
        padding: 60px 0 65px
    }
}

.step5-main-screen .contact-form {
    max-width: 588px
}

.workers-main-screen {
    padding: 80px 0 259px
}

@media(max-width:1199px) {
    .workers-main-screen {
        padding: 80px 0 90px
    }
}

@media(max-width:959px) {
    .workers-main-screen {
        padding: 80px 0 75px
    }
}

@media(max-width:599px) {
    .workers-main-screen {
        padding: 60px 0 65px
    }
}

.workers-main-screen__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px
}

.workers-main-screen__add {
    padding: 9px 27px
}

@media(max-width:599px) {
    .workers-main-screen__add,
    .workers-main-screen__add._mobile {
        display: none
    }
}

@media(max-width:599px)and (max-width:599px) {
    .workers-main-screen__add._mobile {
        display: block;
        margin-top: 40px;
        width: 100%
    }
}

.workers-main-screen .workers-list__header {
    align-items: center;
    background-color: var(--c-bg-dark);
    border-radius: 10px;
    display: flex;
    margin-bottom: 20px;
    padding: 8px 20px
}

@media(max-width:599px) {
    .workers-main-screen .workers-list__header {
        margin-bottom: 10px
    }
}

.workers-main-screen .workers-list__header>p {
    color: var(--c-notes-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3
}

@media(max-width:767px) {
    .workers-main-screen .workers-list__header>p {
        font-size: 14px
    }
}

.workers-main-screen .workers-list__header>p:first-child {
    flex-basis: 345px
}

@media(max-width:959px) {
    .workers-main-screen .workers-list__header>p:first-child {
        flex-basis: 220px
    }
}

@media(max-width:767px) {
    .workers-main-screen .workers-list__header>p:first-child {
        flex-basis: 150px
    }
}

.workers-main-screen .workers-list__header>p:nth-child(2) {
    flex-basis: 214px
}

@media(max-width:767px) {
    .workers-main-screen .workers-list__header>p:nth-child(2) {
        flex-basis: 150px
    }
}

.workers-main-screen .workers-list__item {
    align-items: center;
    border: 1px solid var(--c-notes-text);
    border-radius: 10px;
    display: flex;
    padding: 14px 20px
}

.workers-main-screen .workers-list__item+.workers-list__item {
    margin-top: 10px
}

.workers-main-screen .workers-list__item>p {
    color: var(--c-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3
}

@media(max-width:767px) {
    .workers-main-screen .workers-list__item>p {
        font-size: 14px
    }
}

.workers-main-screen .workers-list__item>p:first-child {
    flex-basis: 345px
}

@media(max-width:959px) {
    .workers-main-screen .workers-list__item>p:first-child {
        flex-basis: 220px
    }
}

@media(max-width:767px) {
    .workers-main-screen .workers-list__item>p:first-child {
        flex-basis: 130px
    }
}

.workers-main-screen .workers-list__item>p:nth-child(2) {
    flex-basis: 214px;
    text-align: center
}

@media(max-width:767px) {
    .workers-main-screen .workers-list__item>p:nth-child(2) {
        text-align: left
    }
}

@media(max-width:599px) {
    .workers-main-screen .workers-list__item>p:nth-child(2) {
        flex-basis: 85px
    }
}

.workers-main-screen .workers-list__item-controls {
    align-items: center;
    column-gap: 43px;
    display: flex;
    flex-basis: auto;
    margin-left: auto
}

@media(max-width:767px) {
    .workers-main-screen .workers-list__item-controls {
        column-gap: 23px;
        column-gap: 9px
    }
}

@media(max-width:599px) {
    .workers-main-screen .workers-list__item__delete {
        flex-basis: 20px
    }
    .workers-main-screen .workers-list__item__change {
        display: none
    }
}

.workers-main-screen .workers-list__item__change._mobile {
    display: none
}

@media(max-width:599px) {
    .workers-main-screen .workers-list__item__change._mobile {
        display: block
    }
}

.workers-main-screen .workers-list .sort {
    flex-basis: auto;
    margin-left: auto
}

@media(max-width:599px) {
    .workers-main-screen .workers-list .sort {
        display: none
    }
}

.workers-main-screen .workers-list .sort._mobile {
    display: none
}

@media(max-width:599px) {
    .workers-main-screen .workers-list .sort._mobile {
        display: flex;
        margin-bottom: 20px
    }
}

.settings-main-screen {
    padding: 80px 0 248px
}

@media(max-width:1199px) {
    .settings-main-screen {
        padding: 80px 0 90px
    }
}

@media(max-width:959px) {
    .settings-main-screen {
        padding: 80px 0 75px
    }
}

@media(max-width:599px) {
    .settings-main-screen {
        padding: 60px 0 65px
    }
}

.settings-main-screen__title {
    margin-bottom: 30px
}

.settings-main-screen__subtitle {
    color: var(--c-black);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 20px
}

.settings-main-screen .worker-form {
    max-width: 771px
}

.cocktails-main-screen {
    padding: 80px 0 130px
}

@media(max-width:1199px) {
    .cocktails-main-screen {
        padding: 80px 0 90px
    }
}

@media(max-width:959px) {
    .cocktails-main-screen {
        padding: 80px 0 75px
    }
}

@media(max-width:599px) {
    .cocktails-main-screen {
        padding: 60px 0 65px
    }
}

.cocktails-main-screen__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px
}

.cocktails-main-screen__add {
    padding: 9px 33px
}

@media(max-width:599px) {
    .cocktails-main-screen__add {
        display: none
    }
}

.cocktails-main-screen__add._mobile {
    display: none
}

@media(max-width:599px) {
    .cocktails-main-screen__add._mobile {
        display: block;
        margin-top: 40px;
        width: 100%
    }
}

.cocktails-main-screen__filterblock {
    align-items: start;
    column-gap: 20px;
    display: flex;
    justify-content: space-between
}

@media(max-width:1199px) {
    .cocktails-main-screen__filterblock {
        column-gap: 0;
        flex-direction: column;
        row-gap: 24px
    }
}

.cocktails-main-screen .categories-list {
    margin-bottom: 15px;
}

@media(max-width:1199px) {
    .cocktails-main-screen .categories-list {
        flex-basis: auto;
        width: 770px
    }
}

@media(max-width:959px) {
    .cocktails-main-screen .categories-list {
        width: 100%
    }
}

.cocktails-main-screen .search-form {
    flex-basis: auto;
    flex-grow: 1;
    max-width: 100%
}

@media(max-width:1199px) {
    .cocktails-main-screen .search-form {
        width: 770px
    }
}

@media(max-width:959px) {
    .cocktails-main-screen .search-form {
        width: 100%
    }
}

.cocktails-main-screen .cocktails-list {
    column-gap: 84px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 23px;
    row-gap: 40px
}

@media(max-width:959px) {
    .cocktails-main-screen .cocktails-list {
        column-gap: 27px
    }
}

@media(max-width:767px) {
    .cocktails-main-screen .cocktails-list {
        column-gap: 25px
    }
}

@media(max-width:599px) {
    .cocktails-main-screen .cocktails-list {
        column-gap: 0
    }
}

.cocktails-main-screen .cocktails-list__item {
    flex-basis: calc(25% - 63px)
}

@media(max-width:959px) {
    .cocktails-main-screen .cocktails-list__item {
        flex-basis: calc(33.33333% - 18px)
    }
}

@media(max-width:767px) {
    .cocktails-main-screen .cocktails-list__item {
        flex-basis: calc(50% - 12.5px)
    }
}

@media(max-width:599px) {
    .cocktails-main-screen .cocktails-list__item {
        flex-basis: 100%
    }
}

.cocktails-main-screen .cocktails-list__item-photo {
    border-radius: 6px;
    height: 190px;
    margin-bottom: 10px;
    object-fit: contain;
    width: 100%
}

.cocktails-main-screen .cocktails-list__item-price {
    color: var(--c-main);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 14px
}

@media(max-width:767px) {
    .cocktails-main-screen .cocktails-list__item-price {
        font-size: 14px
    }
}

.cocktails-main-screen .cocktails-list__item-name {
    color: var(--c-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 4px
}

@media(max-width:767px) {
    .cocktails-main-screen .cocktails-list__item-name {
        font-size: 14px
    }
}

.cocktails-main-screen .cocktails-list__item-category {
    color: var(--c-notes-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 20px
}

.cocktails-main-screen .cocktails-list__item-controls {
    display: flex;
    justify-content: space-between
}

.cocktails-main-screen .cocktails-list__item-change {
    padding: 8px 28px
}

.ingredients-main-screen {
    padding: 80px 0 130px
}

@media(max-width:1199px) {
    .ingredients-main-screen {
        padding: 80px 0 90px
    }
}

@media(max-width:959px) {
    .ingredients-main-screen {
        padding: 80px 0 75px
    }
}

@media(max-width:599px) {
    .ingredients-main-screen {
        padding: 60px 0 65px
    }
}

.ingredients-main-screen__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px
}

.ingredients-main-screen__add {
    padding: 9px 33px
}

@media(max-width:599px) {
    .ingredients-main-screen__add {
        display: none
    }
}

.ingredients-main-screen__add._mobile {
    display: none
}

@media(max-width:599px) {
    .ingredients-main-screen__add._mobile {
        display: block;
        margin-top: 40px;
        width: 100%
    }
}

.ingredients-main-screen .search-form {
    max-width: 350px
}

.ingredients-main-screen .ingredients-list {
    column-gap: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 23px;
    row-gap: 40px
}

@media(max-width:959px) {
    .ingredients-main-screen .ingredients-list {
        column-gap: 24px
    }
}

@media(max-width:599px) {
    .ingredients-main-screen .ingredients-list {
        column-gap: 0
    }
}

.ingredients-main-screen .ingredients-list__item {
    flex-basis: calc(25% - 22.5px)
}

@media(max-width:959px) {
    .ingredients-main-screen .ingredients-list__item {
        flex-basis: calc(33.33333% - 16px)
    }
}

@media(max-width:767px) {
    .ingredients-main-screen .ingredients-list__item {
        flex-basis: calc(50% - 12px)
    }
}

@media(max-width:599px) {
    .ingredients-main-screen .ingredients-list__item {
        flex-basis: 100%
    }
}

.ingredients-main-screen .ingredients-list__item-photo {
    display: block;
    border-radius: 6px;
    margin: 0 auto;
    height: 220px;
    margin-bottom: 24px;
    object-fit: contain;
    width: 220px;
}

.ingredients-main-screen .ingredients-list__item-price {
    color: var(--c-main);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px
}

@media(max-width:767px) {
    .ingredients-main-screen .ingredients-list__item-price {
        font-size: 16px
    }
}

.ingredients-main-screen .ingredients-list__item-note {
    color: var(--c-notes-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 14px
}

.ingredients-main-screen .ingredients-list__item-name {
    color: var(--c-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 24px
}

@media(max-width:767px) {
    .ingredients-main-screen .ingredients-list__item-name {
        font-size: 14px
    }
}

.ingredients-main-screen .ingredients-list__item-controls {
    display: flex;
    justify-content: space-between
}

.ingredients-main-screen .ingredients-list__item-change {
    padding: 9px 38px
}

.newingredient-main-screen {
    padding: 80px 0 175px
}

@media(max-width:1199px) {
    .newingredient-main-screen {
        padding: 80px 0 90px
    }
}

@media(max-width:959px) {
    .newingredient-main-screen {
        padding: 80px 0 75px
    }
}

@media(max-width:599px) {
    .newingredient-main-screen {
        padding: 60px 0 65px
    }
}

.newingredient-main-screen__subtitle {
    color: var(--c-black);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 40px
}

@media(max-width:1199px) {
    .newingredient-main-screen__subtitle {
        margin-top: 30px
    }
}

.newingredient-main-screen .ingredient-form {
    margin-top: 20px;
    max-width: 530px
}

.newcocktail-main-screen {
    padding: 80px 0 175px
}

@media(max-width:1199px) {
    .newcocktail-main-screen {
        padding: 80px 0 90px
    }
}

@media(max-width:959px) {
    .newcocktail-main-screen {
        padding: 80px 0 75px
    }
}

@media(max-width:599px) {
    .newcocktail-main-screen {
        padding: 60px 0 65px
    }
}

.newcocktail-main-screen__subtitle {
    color: var(--c-black);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 40px
}

@media(max-width:1199px) {
    .newcocktail-main-screen__subtitle {
        margin-top: 30px
    }
}

.newcocktail-main-screen .cocktail-form {
    margin-top: 20px;
    max-width: 729px
}

.signin-main-screen {
    padding: 94px 0 152px
}

@media(max-width:1199px) {
    .signin-main-screen {
        padding: 80px 0 90px
    }
}

@media(max-width:959px) {
    .signin-main-screen {
        padding: 80px 0 75px
    }
}

@media(max-width:599px) {
    .signin-main-screen {
        padding: 60px 0 65px
    }
}