@charset "UTF-8";

/* Обнуление базовых стилей */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset для старых браузеров */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

/* Базовые глобальные стили */

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

th,
td {
    text-align: left;
    padding: 0;
}

/* Сброс стилей для форм */

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    background: transparent;
    vertical-align: baseline;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

/* Убираем стандартное оформление кнопок */

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* Фокус в Firefox */

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

/* Визуальная подсказка фокуса — будет заменена кастомной */

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

/* Сброс ссылок */

a {
    text-decoration: none;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

a:hover,
a:active,
a:focus {
    outline: none;
}

/* Изображения */

img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
}

/* Аудио/Видео/Canvas */

audio,
canvas,
video {
    display: inline-block;
}

/* Скрытие элементов */

[hidden] {
    display: none;
}

/* Глобальное отключение outline — будем управлять вручную */

*:focus {
    outline: none;
}

/* Текстовые поля */

textarea {
    resize: vertical;
    overflow: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Убираем спиннеры у input[type=number] */

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

input[type=number] {
    -moz-appearance: textfield;
    /* Для Firefox */
    -webkit-appearance: textfield;
    appearance: textfield;
}

/* Убираем иконку очистки в input[type=search] */

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

@font-face {
    font-family: "VelaSans";
    font-display: swap;
    src: url("../fonts/VelaSans-ExtraLight.ttf") format("ttf");
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: "VelaSans";
    font-display: swap;
    src: url("../fonts/VelaSans-Light.ttf") format("ttf");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "VelaSans";
    font-display: swap;
    src: url("../fonts/VelaSans-Regular.ttf") format("ttf");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "VelaSans";
    font-display: swap;
    src: url("../fonts/VelaSans-Medium.ttf") format("ttf");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "VelaSans";
    font-display: swap;
    src: url("../fonts/VelaSans-SemiBold.ttf") format("ttf");
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: "VelaSans";
    font-display: swap;
    src: url("../fonts/VelaSans-Bold.ttf") format("ttf");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "VelaSans";
    font-display: swap;
    src: url("../fonts/VelaSans-ExtraBold.ttf") format("ttf");
    font-weight: 800;
    font-style: normal;
}

/*
 * Палитра. Светлая — исходная, тёмная ниже в [data-theme="dark"].
 *
 * Два правила, из-за которых токенов стало больше, чем было:
 *
 * 1. --white и --surface — разные вещи. Раньше одним --white красили и фон
 *    карточки, и подпись на синей кнопке. В тёмной теме фон карточки должен
 *    стать тёмным, а подпись на кнопке обязана остаться белой, поэтому фоны
 *    переведены на --surface, а --white оставлен только тексту на заливке.
 *
 * 2. --main и --accent — тоже разные. На тёмном фоне одного синего не хватает:
 *    заливке кнопки нужен тёмный синий (белый текст на нём — 4.53:1), а тексту
 *    ссылки — светлый (на фоне 6.96:1). Фирменный #1A71A2 как текст на тёмном
 *    даёт всего 3.40:1, то есть ниже нормы WCAG AA — в макете это видно.
 *    Поэтому --main красит заливки, --accent — текст, иконки и активные
 *    состояния. В светлой теме оба равны фирменному синему.
 */
:root {
    color-scheme: light;

    --white: #ffffff;             /* текст на цветной заливке */
    --surface: #ffffff;           /* карточки, шапка, модалки */
    --surface-raised: #ffffff;    /* поля ввода, наведение */
    --fill-subtle: #F2F6F9;       /* приглушённые подложки внутри карточек */
    --border: #DDE3E9;            /* разделители */
    --border-strong: #C7D4DD;     /* рамки полей ввода */
    --control-border: #7A8A99;    /* рамка чекбокса и радио — 3.55:1 к фону */

    --main: #1A71A2;              /* заливка кнопок */
    --accent: #1A71A2;            /* текст, иконки, активное состояние */
    --main-orange: #EE8D00;
    --orange: #CD7900;
    --second: #DBF0FB;
    --second-orange: #FFE8C5;
    --hover: #2188c6;
    --bgmain: #EEF4F8;
    --bgextra: #f5f5f5;
    --extra: #2b2a29;
    --textmain: #1E1E1F;
    --textextra: #737373;

    --success: #2E9C51;
    --success-bg: #E3F5E8;
    --danger: #D64545;
    --danger-bg: #FDE7E7;
    --warning: #E04B23;
    --warning-bg: #FFE9E3;

    --focus-ring: rgba(26, 113, 162, 0.28);
    --backdrop: rgb(0 0 0 / 55%);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 6%);
    --shadow-md: 0 2px 8px rgb(0 0 0 / 8%);
    --shadow-lg: 0 8px 28px rgb(0 0 0 / 12%);

    --font-family: "Vela Sans", sans-serif;
}

/*
 * Тёмная тема. Фон и поверхности взяты из макетов в teme-dark/, акценты
 * подняты по светлоте до нормы контраста — в макете синий на тёмном фоне
 * читается плохо.
 *
 * Тема ставится атрибутом на <html> (см. скрипт в layouts/main): она нужна
 * до первой отрисовки, иначе на тёмной теме моргает белый экран.
 */
[data-theme="dark"] {
    color-scheme: dark;

    --white: #ffffff;             /* подпись на синей кнопке остаётся белой */
    --surface: #18222F;
    --surface-raised: #22303F;
    --fill-subtle: #22303F;
    --border: #26323F;
    --border-strong: #3C4C5E;
    --control-border: #5A7086;    /* 3.13:1 к поверхности */

    --main: #1E7DB2;              /* белый текст на заливке — 4.53:1 */
    --accent: #55A8DE;            /* текст и иконки на фоне — 6.96:1 */
    --main-orange: #F59A1E;       /* 8.24:1 на фоне */
    --orange: #FFB454;
    --second: #17303F;            /* мягкая синяя подложка бейджей */
    --second-orange: #3A2A12;     /* мягкая оранжевая подложка */
    --hover: #6BB6E5;
    --bgmain: #0E1621;
    --bgextra: #131E2B;
    --extra: #E9EEF4;
    --textmain: #E9EEF4;          /* 15.58:1 */
    --textextra: #93A7BB;         /* 7.3:1 — вторичный текст всё ещё читаем */

    /* Статусы: сам цвет поднят по светлоте, подложка — наоборот, глубокая
       и малонасыщенная, иначе бейдж на тёмном светится как лампочка. */
    --success: #4ADE80;
    --success-bg: #12301E;
    --danger: #F87171;
    --danger-bg: #3A1C1C;
    --warning: #FB923C;
    --warning-bg: #3A2113;

    --focus-ring: rgba(85, 168, 222, 0.42);
    --backdrop: rgb(0 0 0 / 72%);

    /* На тёмном фоне тень почти не видна — глубину даёт светлота слоя,
       поэтому тени приглушены, но оставлены для приподнятых элементов. */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 2px 10px rgb(0 0 0 / 45%);
    --shadow-lg: 0 12px 34px rgb(0 0 0 / 55%);
}

body {
    background-color: var(--bgmain);
    font-family: var(--font-family);
}

a, p, span, h1, h2, h3 {
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-family);
    color: var(--textmain);
}
input {
    height: 100%;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-family);
    color: var(--textmain);
}

.checkout-select {
    height: 3.25rem;
    padding: 0 0.875rem;
    border-radius: 0.75rem;
    background-color: var(--surface);
}

.container {
    padding: 0 5rem;
}

.header {
    height: 5rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--surface);
    position: sticky;
    top: 0;
    z-index: 5;
}
.header-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}
.location {
    font-weight: 800;
    color: var(--accent);
}
.header__nav .nav-list {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.header__nav .nav-list li a {
    font-weight: 600;
}
.header-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

#basketBtn {
    gap: 0.375rem;
}
#basketBtn.active {
    background-color: var(--main-orange);
}
#basketBtn #basketCountBadge:empty {
    display: none;
}
#basketBtn #basketCountBadge {
    color: var(--white);
    font-weight: 600;
}

.header__search {
    display: flex;
    min-width: 18.75rem;
    height: 2.5rem;
    border-radius: 2.5rem;
    background: var(--bgmain);
    padding: 0 0.875rem;
    gap: 0.625rem;
}
.button-mini {
    display: flex;
    align-items: center;
    height: 2rem;
    border-radius: 2.5rem;
    padding: 0 1.5rem;
    color: var(--accent);
    background-color: var(--second);
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font-family);
}
.button-second {
    display: flex;
    align-items: center;
    height: 2.5rem;
    border-radius: 2.5rem;
    padding: 0 1.75rem;
    color: var(--accent);
    background-color: var(--second);
    font-weight: 600;
}
.btn__color-orange {
    color: var(--orange);
    background-color: var(--second-orange);
}
.button-send {
    height: 3.25rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 3.25rem;
    background-color: var(--main);
    color: var(--white);
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-family);
    transition: 0.2s;
}
.button-send:hover {
    background-color: var(--hover);
}

.main {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.section-menu {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
    position: sticky;
    top: calc(5rem);
    z-index: 4;
    background-color: var(--bgmain);
    padding: 0.375rem 0;
    cursor: grab;
}
.section-menu a {
    min-width: max-content;
    display: flex;
    align-items: center;
    height: 2rem;
    padding: 0 0.75rem;
    background-color: var(--surface);
    border-radius: 2rem;
    gap: 0.375rem;
    font-weight: 600;
    transition: .2s;
}
.section-menu a:hover {
    background-color: var(--main);
    color: var(--white);
}
.section-menu a.active {
    background-color: var(--main);
    color: var(--white);
}
.section-menu a img {
    width: 1.25rem;
    height: 1.25rem;
}

.section-history {
    padding-top: 1.25rem;
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
}
.section-history a {
    border-radius: 0.75rem;
    overflow: hidden;
    min-width: max-content;
}
.section-history a img {
    width: 11.875rem;
}

.section-catalog {
    padding-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.catalog__container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    scroll-margin-top: 8rem;
}
.catalog__container h2,
.catalog__container h3 {
    font-size: 1.75rem;
    font-weight: 800;
}
.catalog__block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 0.75rem;
    row-gap: 1.25rem;
}
.catalog__box {
    width: calc(25% - 9px);
    padding: 0.75rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border-radius: 1.5rem;
    background-color: var(--surface);
    cursor: pointer;
}
.catalog__box img {
    border-radius: 1rem;
    /* Фото грузятся лениво. Без заранее заданных пропорций карточка до
       загрузки имеет нулевую высоту, контент разъезжается уже во время
       прокрутки — и переход к категории промахивается мимо цели. */
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: var(--bgmain);
}
.catalog__box .catalog__actions {
    display: flex;
    gap: 0.75rem;
    flex-direction: column;
}
.catalog__box .catalog__actions p {
    font-size: 1.125rem;
    font-weight: 600;
}
/* Описания блюд из iiko бывают в несколько абзацев: в карточке показываем
   три строки и многоточие, полный текст — в модалке товара. */
.catalog__box .catalog__actions small {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}
.catalog__box .catalog__actions .catalog__info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.catalog__box .catalog__actions .catalog__info span {
    font-size: 1rem;
}

.section-contact {
    padding: 2.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.section-contact .contact__top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.section-contact .contact__top h1 {
    font-size: 1.75rem;
    font-weight: 800;
}
.section-contact .contact__top .contact__info-phone {
    height: 3rem;
    border-radius: 3rem;
    background: var(--surface);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
}
.section-contact .contact__top .contact__info-phone span {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--textextra);
}
.section-contact .contact__top .contact__info-phone span a {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--accent);
}
.section-contact .contact__container {
    display: flex;
    gap: 0.75rem;
}
.section-contact .contact__container .contact__box {
    display: flex;
    flex-direction: column;
    width: calc(25% - 0.563rem);
    border-radius: 1.5rem;
    background: var(--surface);
    padding: 1.25rem 1.5rem;
    gap: 1.5rem;
}
.section-contact .contact__container .contact__box .contact__box-title {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.section-contact .contact__container .contact__box .contact__box-title h3 {
    font-size: 1.25rem;
    font-weight: 800;
}
.section-contact .contact__container .contact__box .contact__box-title p {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--textextra);
}
.section-contact .contact__container .contact__box .contact__box-address {
    font-size: 0.938rem;
    font-weight: 600;
    line-height: 134%;
    color: var(--accent);
}
.section-contact .contact__container .contact__box .contact__box-delivery {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.section-contact .contact__container .contact__box .contact__box-delivery .box-delivery {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.section-contact .contact__container .contact__box .contact__box-delivery .box-delivery p {
    font-size: 0.938rem;
    font-weight: 600;
}
.section-contact .contact__container .contact__box .contact__box-delivery .box-delivery span {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--textextra);
}

.section-stock {
    display: flex;
    padding: 2.5rem 0;
    flex-direction: column;
    gap: 1.5rem;
}
.section-stock h1 {
    font-size: 1.75rem;
    font-weight: 800;
}
.section-stock .stock__container {
    display: flex;
    gap: 0.75rem;
    flex-direction: row;
    flex-wrap: wrap;
}
.section-stock .stock__container .stock__box {
    width: calc(25% - 0.563rem);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
    border-radius: 1.5rem;
    background-color: var(--surface);
}
.section-stock .stock__container .stock__box a img {
    width: 100%;
}
.section-stock .stock__container .stock__box .stock__content {
    padding: 0 0.75rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
}
.section-stock .stock__container .stock__box .stock__content .stock-title {
    padding-bottom: 0.75rem;
    font-size: 1rem;
    font-weight: 800;
    transition: 0.2s;
}
.section-stock .stock__container .stock__box .stock__content .stock-title:hover {
    color: var(--accent)
}
.section-stock .stock__container .stock__box .stock__content p {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 140%;
    color: var(--textextra);
}
.section-stock .stock__container .stock__box .stock__content .button-second {
    margin-top: 1.25rem;
    width: max-content;
    padding: 0 2.5rem;
}

.section-profile {
    display: flex;
    padding: 2.5rem 0;
    flex-direction: column;
    gap: 1.5rem;
}
.section-profile h1 {
    font-size: 1.75rem;
    font-weight: 800;
}
.profile__container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2.5rem;
}
.profile__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.profile__content .profile-get-points {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--second);
    padding: 0.75rem 1.5rem;
    border-radius: 1.5rem;
}
.profile__content .profile-get-points p {
    font-size: 0.938rem;
    font-weight: 600;
}
.profile__content .profile-get-points span {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--accent)
}
.profile__content .profile__info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.profile__content .profile__info .profile__box {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1.5rem;
    background-color: var(--surface);
    position: relative;
}
.profile__content .profile__info .profile__box .profile__avatar {
    display: flex;
    position: relative;
}
.profile__content .profile__info .profile__box .profile__avatar img {
    width: 7rem;
    height: 7rem;
    border-radius: 7rem;
}
.profile__content .profile__info .profile__box .profile__avatar .profile__avatar-add {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    right: 0.375rem;
    bottom: 0.375rem;
    cursor: pointer;
}
.profile__content .profile__info .profile__box .profile__avatar .profile__avatar-add img {
    position: absolute;
    width: 100%;
    height: 100%;
}
.profile__content .profile__info .profile__box .profile__text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.profile__content .profile__info .profile__box .profile__text .name {
    font-size: 1.25rem;
    font-weight: 800;
}
.profile__content .profile__info .profile__box .profile__text .profile__info-extra {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.profile__content .profile__info .profile__box .profile__text .profile__info-extra p {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--textextra);
}
.profile__content .profile__info .profile__box .profile__edit {
    position: absolute;
    right: 1.5rem;
}
.profile__content .profile__info .profile__notice {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1.5rem;
    background-color: var(--surface);
}
.profile__content .profile__info .profile__notice p {
    font-size: 1.25rem;
    font-weight: 800;
}
.profile__content .profile__info .profile__notice span {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--textextra);
}
.profile__content .profile-logout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
    padding: 0 1.5rem;
    background-color: var(--main-orange);
    border-radius: 3rem;
    height: 3rem;
    color: var(--white);
    width: max-content;
    font-size: 0.938rem;
    font-weight: 600;
    transition: 0.2s;
}
.profile__content .profile-logout:hover {
    background-color: var(--orange);
}
.profile__content .profile-get-address {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--surface);
    padding: 0.75rem 1.5rem;
    border-radius: 1.5rem;
}
.profile__content .profile-get-address p {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--textextra);
}
.profile__content .profile-get-address a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
.profile__content .profile-get-address a img {
    width: 1rem;
    height: 1rem;
}
.profile__content .profile-addresses {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.profile__content .profile-addresses .profile-address-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 1.5rem;
    background-color: var(--surface);
    position: relative;
    align-items: center;
}
.profile__content .profile-addresses .profile-address-box form {
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
}
.profile__content .profile-addresses .profile-address-box p {
    font-size: 1.25rem;
    font-weight: 800;
}
.profile__content .profile-addresses .profile-address-box span {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--textextra);
}
.profile__content .profile-addresses .profile-address-box .profile-delete-address {
    position: absolute;
    right: 1.5rem;
    cursor: pointer;
}

.profile-address-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.profile-address-box__content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.profile-delete-address {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.profile-address-empty,
.profile-success-message {
    padding: 16px;
    border-radius: 12px;
    background: var(--fill-subtle);
}

.profile__info-empty {
    color: var(--textextra);
    font-style: italic;
}

.profile-edit-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 32rem;
}
.profile-edit-form .form__item {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.profile-edit-form .form__item label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--textmain);
}
.profile-edit-form .form__input {
    height: 3.25rem;
    padding: 0 1rem;
    border-radius: 0.75rem;
    background-color: var(--surface);
    font-size: 0.875rem;
    font-family: var(--font-family);
    color: var(--textmain);
    border: 1.5px solid transparent;
    transition: border-color 0.2s;
}
.profile-edit-form .form__input:focus {
    border-color: var(--main);
}
.profile-edit-form .form__input.is-invalid {
    border-color: var(--danger);
}
.profile-edit-form .invalid-feedback {
    font-size: 0.8rem;
    color: var(--danger);
}
.profile-edit-form__actions {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    padding-top: 0.5rem;
}
.profile-edit-form__actions .button-send {
    padding: 0 2rem;
    width: auto;
}

.profile__content .profile-orders {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.profile__content .profile-orders .profile-order-box {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 1.5rem;
    background-color: var(--surface);
}
.profile__content .profile-orders .profile-order-box .profile-order__content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
}
.profile__content .profile-orders .profile-order-box .profile-order__content img {
    width: 3rem;
    height: 3rem;
}
.profile__content .profile-orders .profile-order-box .profile-order__content .profile-order__info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.profile__content .profile-orders .profile-order-box .profile-order__content .profile-order__info p {
    font-size: 1.25rem;
    font-weight: 800;
    transition: 0.2s;
}
.profile__content .profile-orders .profile-order-box:hover .profile-order__content .profile-order__info p {
    color: var(--accent);
}
.profile__content .profile-orders .profile-order-box .profile-order__content .profile-order__info span {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--textextra);
}
.profile__content .profile-orders .profile-order-box .profile-order__price {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
}
.profile__content .profile-orders .profile-order-box .profile-order__price span {
    font-size: 0.938rem;
    font-weight: 600;
}

.profile__sidebar {
    width: 100%;
    height: max-content;
    max-width: 24.438rem;
    display: flex;
    padding: 1.5rem 1.5rem 0.75rem 1.5rem;
    border-radius: 1.5rem;
    background-color: var(--surface);
    flex-direction: column;
}
.profile__sidebar .profile__scores {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
}
.profile__sidebar .profile__scores img {
    width: 3rem;
    height: 3rem;
}
.profile__sidebar .profile__scores .profile__scores-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.profile__sidebar .profile__scores .profile__scores-info p {
    font-size: 0.938rem;
    font-weight: 600;
}
.profile__sidebar .profile__scores .profile__scores-info span {
    font-size: 1.5rem;
    font-weight: 800;
}
.hr {
    width: 100%;
    height: 0.063rem;
    background-color: var(--border);
}
.profile__scores-menu {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.25rem;
}
.profile__scores-menu a {
    width: 100%;
    padding: 0.625rem 0;
    font-size: 0.938rem;
    font-weight: 600;
    transition: 0.2s;
}
.profile__scores-menu a:hover {
    color: var(--accent)
}
.profile__scores-menu a.active {
    color: var(--accent)
}

/* Promo form in profile sidebar */
.profile__promo-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 0;
}
.profile__promo-form input {
    width: 100%;
    height: 3rem;
    border-radius: 0.75rem;
    background-color: var(--fill-subtle);
    padding: 0 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-family);
    border: none;
    outline: none;
    transition: box-shadow 0.2s;
}
.profile__promo-form input:focus {
    box-shadow: 0 0 0 2px var(--focus-ring);
}
.profile__promo-form input.is-invalid {
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.35);
}
.profile__promo-error {
    font-size: 0.75rem;
    color: var(--danger);
    padding-left: 0.25rem;
}
.profile__promo-btn {
    width: 100%;
    justify-content: center;
    height: 3rem;
    font-size: 0.875rem;
}

/* Bonus toggle checkbox in checkout */
.order__bonus-toggle {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--black);
    padding: 0.25rem 0;
}
.order__bonus-toggle input[type="checkbox"] {
    accent-color: var(--main);
    cursor: pointer;
    flex-shrink: 0;
}
.order__bonus-toggle strong {
    color: var(--accent);
}

/* Promo message states */
.order__promo-message--success {
    color: var(--accent);
    font-size: 0.813rem;
    font-weight: 600;
    margin-top: 0.25rem;
}
.order__promo-message--error {
    color: var(--danger);
    font-size: 0.813rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.modal {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 6;
}
.modal__backdrop {
    background-color: var(--backdrop);
    width: 100%;
    height: 100vh;
    top: 0;
    position: absolute;
    z-index: 10;
}
.modal__panel {
    width: calc(50% - 5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.75rem 1.5rem;
    border-radius: 1.5rem;
    background-color: var(--surface);
    z-index: 20;
    position: relative;
}
.modal__body-order {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    position: relative;
}

.basket-preloader {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.basket-preloader img {
    width: 2.5rem;
    height: 2.5rem;
}

.modal.modal-order {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.modal.modal-order.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-order__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
.modal-order__title p {
    font-size: 1.25rem;
    font-weight: 800;
}
.modal-order__title span {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--accent)
}
.modal-order__status {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.modal-order__status .hr-main {
    width: 1.25rem;
    height: 0.094rem;
    background-color: var(--main);
}
.modal-order__content {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.modal-order__product {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 0.063rem solid rgb(0 0 0 / 12%);
}
.modal-order__product:first-child {
    padding-top: 0.5rem;
}
.modal-order__product:last-child {
    padding-bottom: 0.5rem;
    border-bottom: none;
}
.modal-order__product .modal-order-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}
.modal-order__product .modal-order-info img {
    width: 4.5rem;
    height: 4.5rem;
}
.modal-order__product .modal-order-info .modal-order-text {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.modal-order__product .modal-order-info .modal-order-text a {
    font-size: 1.125rem;
    font-weight: 600;
    transition: 0.2s;
}
.modal-order__product .modal-order-info .modal-order-text a:hover {
    color: var(--accent);
}
.modal-order__product .modal-order-info .modal-order-text span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--textextra);
}
.modal-order__product .modal-order-price {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    align-items: flex-end;
}
.modal-order__product .modal-order-price span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--accent);
}
.modal-order__product .modal-order-price .modal-order-price_amount {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.375rem;
}
.modal-order__product .modal-order-price .modal-order-price_amount span {
    color: var(--textextra);
}
.modal-order__product .modal-order-price .modal-order-price_amount p {
    font-size: 1.25rem;
    font-weight: 700;
}
.modal-order__info {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 1.25rem;
    column-gap: 0.75rem;
}
.modal-order__info .modal-order__info-box {
    width: calc(50% - 0.375rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.modal-order__info .modal-order__info-box span {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--textextra);
}
.modal-order__info .modal-order__info-box p {
    font-size: 0.938rem;
    font-weight: 600;
}
.modal__close {
    position: absolute;
    width: 2rem;
    height: 2rem;
    border-radius: 1rem;
    background-color: var(--bgextra);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    top: 0;
    right: 0;
    z-index: 30;
    transition: 0.2s;
}
.modal__close:hover {
    background-color: var(--second);
}
.modal__close img {
    width: 0.75rem;
    height: 0.75rem;
}

.modal-product .modal__body {
    /* legacy hook — content row now lives in .modal-product__body */
}
.modal-product__body {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: flex-start;
}
.modal-product .modal__body-product-img {
    width: 30%;
    padding-top: 0.5rem;
}
.modal-product .modal__body-product {
    width: 70%;
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.modal-product .modal__body-product .modal-product-info__box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.modal-product .modal__body-product .modal-product-title {
    font-size: 1.5rem;
    font-weight: 800;
}
.modal-product .modal__body-product .modal-product-description {
    font-size: 0.938rem;
    font-weight: 600;
    line-height: 134%;
    color: var(--textextra)
}
.modal-product .modal__body-product .modal-product-del-ingredients {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.modal-product .modal__body-product .modal-product-del-ingredients span {
    font-size: 1rem;
    font-weight: 800;
}
.modal-product .modal__body-product .modal-product-del-ingredients .del-ingredients__box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.modal-product .modal__body-product .modal-product-del-ingredients .del-ingredients__box .ingredient__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.875rem;
    height: 2rem;
    border-radius: 2rem;
    background-color: var(--second);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-family);
    cursor: pointer;
}
.modal-product .modal__body-product .modal-product-del-ingredients .del-ingredients__box .ingredient__item img {
    width: 0.625rem;
    height: 0.625rem;
}
.modal-product .modal__body-product .modal-product-del-ingredients .del-ingredients__box .ingredient__item.active {
    color: var(--orange);
    background-color: var(--second-orange);
}
.modal-product .modal__body-product .modal-product-extras {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.modal-product .modal__body-product .modal-product-extras span {
    font-size: 1rem;
    font-weight: 800;
}
.modal-product .modal__body-product .modal-product-extras .del-extra__box {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}
.modal-product .modal__body-product .modal-product-extras .del-extra__box .extra__item {
    width: calc(25% - 0.375rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem 0.625rem 0.625rem 0.625rem;
    gap: 0.5rem;
    border-radius: 1.125rem;
    background-color: var(--second-orange);
}
.modal-product .modal__body-product .modal-product-extras .del-extra__box .extra__item img {
    width: 100%;
    padding: 0 0.313rem;
}
.modal-product .modal__body-product .modal-product-extras .del-extra__box .extra__item .extra__item__box {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
}
.modal-product .modal__body-product .modal-product-extras .del-extra__box .extra__item .extra__item__box p {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 134%;
    text-align: center;
    color: var(--textmain);
    font-family: var(--font-family);
}
.modal-product .modal__body-product .modal-product-extras .del-extra__box .extra__item .extra__item__box span {
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    color: var(--textmain);
    font-family: var(--font-family);
}
.modal-product .modal__body-product .modal-product-extras .del-extra__box .extra__item .extra__item__box .extra__item__actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    align-items: center;
    padding: 0.25rem;
    border-radius: 2.5rem;
    height: 2rem;
    background: var(--surface);
    position: relative;
    margin-top: 0.25rem;
}
.modal-product .modal__body-product .modal-product-extras .del-extra__box .extra__item .extra__item__box .extra__item__actions input {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
}
.modal-product .modal__body-product .modal-product-extras .del-extra__box .extra__item .extra__item__box .extra__item__actions .extra__btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    background-color: var(--orange);
    z-index: 20;
    cursor: pointer;
    transition: 0.2s;
}
.modal-product .modal__body-product .modal-product-extras .del-extra__box .extra__item .extra__item__box .extra__item__actions .extra__btn:hover {
    opacity: 0.9;
}
.modal-product .modal__body-product .modal-product-extras .del-extra__box .extra__item .extra__item__box .extra__item__actions .extra__btn img {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
}
.modal-product .modal__body-product .modal-product-extras .del-extra__box .extra__item.active {
    background-color: var(--second);
}
.modal-product .modal__body-product .modal-product-extras .del-extra__box .extra__item.active .extra__item__box .extra__item__actions {
    justify-content: space-between;
}
.modal-product .modal__body-product .modal-product-extras .del-extra__box .extra__item.active .extra__item__box .extra__item__actions .extra__btn {
    background-color: var(--main);
}
.modal-product .modal__body-product .modal-product-price__box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.modal-product .modal__body-product .modal-product-price__box .price {
    font-size: 1.5rem;
    font-weight: 700;
}
.modal-product .modal__body-product .modal-product-price__box .modal-product-price__info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.modal-product .modal__body-product .modal-product-price__box .modal-product-price__info .info-text__box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.modal-product .modal__body-product .modal-product-price__box .modal-product-price__info .info-text__box p {
    font-size: 0.938rem;
    font-weight: 600;
}
.modal-product .modal__body-product .modal-product-price__box .modal-product-price__info .info-text__box span {
    font-size: 0.875rem;
    font-weight: 700;
}
.modal-product .modal__close {
    top: 1.25rem;
    right: 1.5rem;
}
.modal.modal-product {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.modal.modal-product.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.catalog__box {
    cursor: pointer;
}

/* --- Product modal / page: refinements to match design --- */
.modal-product .modal__panel {
    width: min(56rem, 92vw);
    max-height: 90vh;
    overflow: hidden;
    align-items: stretch;
}
.modal-product .modal__panel .modal-product__body {
    max-height: calc(90vh - 3.5rem);
    overflow-y: auto;
}

/* Extra (modification) cards: check badge + selected/unselected states */
.modal-product .modal__body-product .modal-product-extras .del-extra__box .extra__item {
    position: relative;
    cursor: pointer;
}
.modal-product .extra__check {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--main);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 25;
}
.modal-product .extra__check img {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
}
.modal-product .extra__item.active .extra__check {
    display: flex;
}
/* Unselected card shows only the "+" button */
.modal-product .extra__item:not(.active) .js-extra-dec,
.modal-product .extra__item:not(.active) .js-extra-qty {
    display: none;
}

/* Ingredient chips: "×" when present, "+" when removed (active = removed) */
.modal-product .ingredient__item .ingredient__icon-add {
    display: none;
}
.modal-product .ingredient__item.active .ingredient__icon-remove {
    display: none;
}
.modal-product .ingredient__item.active .ingredient__icon-add {
    display: inline-block;
}

/* Price breakdown / total / CTA */
.modal-product .modal-product-price__box .hr {
    width: 100%;
    height: 0.063rem;
    background-color: var(--border);
}
.modal-product .modal-product-price__box .price {
    font-size: 1.75rem;
    font-weight: 800;
}
.modal-product .modal-product-price__box .modal-product-price__info .info-text__box p {
    color: var(--textmain);
}
.modal-product .modal-product-price__box .modal-product-price__info .info-text__box span {
    color: var(--textextra);
}
.modal-product .modal-product-price__box .button-send {
    width: 100%;
    border-radius: 1rem;
}

/* Modal product image fit */
.modal-product .modal__body-product-img img {
    width: 100%;
    border-radius: 1rem;
}

/* --- Standalone product page (mobile: works as a native-feeling page) --- */
.product-page {
    position: relative;
    width: 100%;
}
.product-page__back {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 30;
    background-color: var(--surface);
    box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 12%);
}
.product-page__inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 40rem;
    margin: 0 auto;
    padding-bottom: 6rem;
}
.product-page__inner .modal__body-product-img,
.product-page__inner .modal__body-product {
    width: 100%;
}
.product-page__inner .modal-product-info__box {
    text-align: center;
}

@media (max-width: 1023px) {
    /* Extras: horizontal scroll (both modal and page) */
    .modal-product .modal-product-extras .del-extra__box {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-product .modal-product-extras .del-extra__box .extra__item {
        width: 9rem;
        flex: 0 0 auto;
    }

    /* Полноэкранную карточку целиком описывает блок «Карточка блюда»
       в конце файла. */
}

.modal.modal-basket {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.modal.modal-basket.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.modal.modal-basket .modal__panel {
    transition: transform .2s ease;
}

#basketBtn span {

}

.modal-basket {
    justify-content: flex-end;
}
.modal-basket .modal__panel {
    height: 100vh;
    border-radius: 0;
    width: 31.188vw;
    padding: 0;
    background-color: var(--fill-subtle);
}
.modal-basket .modal__panel .modal-basket__title {
    width: 100%;
    display: flex;
    background-color: var(--surface);
    padding: 2.5rem 1.5rem 2rem 1.5rem;
}
.modal-basket .modal__panel .modal-basket__title .modal-basket-title {
    font-size: 1.5rem;
    font-weight: 800;
}
.modal-basket .modal__panel .modal-basket__products {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    height: 100%;
    padding-bottom: 1.5rem;
}
.modal-basket .modal__panel .modal-basket__products-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 1.5rem 1.25rem 1.5rem;
    background-color: var(--surface);
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 0.063rem solid rgb(0 0 0 / 12%);
}


.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product:first-child {
    padding-top: 0.5rem;
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product:last-child {
    padding-bottom: 0.5rem;
    border-bottom: none;
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-order-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-order-info img {
    width: 5.625rem;
    height: 5.625rem;
    border-radius: 0.75rem;
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-order-info .modal-order-text {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-order-info .modal-order-text .modal-basket__product-title {
    font-size: 1.125rem;
    font-weight: 600;
    transition: 0.2s;
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-order-info .modal-order-text span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--textextra);
}
/* Описание блюда и список добавок — только прямые потомки, чтобы не задеть
   цену «за шт.» ниже. Три строки и многоточие, как в карточке каталога. */
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-order-info .modal-order-text > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-order-price {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-basket__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-basket__actions .extra__item__actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 6.25rem;
    align-items: center;
    padding: 0.25rem;
    border-radius: 2.5rem;
    height: 2rem;
    background: var(--second);
    position: relative;
    margin-top: 0.25rem;
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-basket__actions .extra__item__actions input {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-basket__actions .extra__item__actions .extra__btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    background-color: var(--main);
    z-index: 20;
    cursor: pointer;
    transition: 0.2s;
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-basket__actions .extra__item__actions .extra__btn:hover {
    opacity: 0.9;
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-basket__actions .extra__item__actions .extra__btn img {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
}
.modal-basket .modal__panel .modal-basket__price {
    display: flex;
    flex-direction: column;
    padding: 10px 1.5rem 1.5rem 1.5rem;
    width: 100%;
    background-color: var(--surface);
    gap: 2rem;
}
.modal-basket .modal__panel .modal-basket__price .modal-basket__price-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.modal-basket .modal__panel .modal-basket__price .modal-basket__price-info input {
    height: 3.25rem;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 0.063rem solid rgb(0 0 0 / 12%);
}
.modal-basket .modal__panel .modal-basket__price .modal-basket__price-info .modal-basket__price-info-container {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.modal-basket .modal__panel .modal-basket__price .modal-basket__price-info .modal-basket__price-info-container .modal-basket__price-info-container__box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.modal-basket .modal__panel .modal-basket__price .modal-basket__price-info .modal-basket__price-info-container .modal-basket__price-info-container__box p {
    font-size: 0.938rem;
    font-weight: 600;
}
.modal-basket .modal__panel .modal-basket__price .modal-basket__price-info .modal-basket__price-info-container .modal-basket__price-info-container__box span {
    font-size: 0.875rem;
    font-weight: 700;
}
.modal-basket .modal__panel .modal-basket__price .modal-basket__price-info .modal-basket__price-info__price {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.modal-basket .modal__panel .modal-basket__price .modal-basket__price-info .modal-basket__price-info__price span {
    font-size: 1.25rem;
    font-weight: 700;
}





.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-order-price .modal-order-price_amount {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.375rem;
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-order-price span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--accent) !important;
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-order-price p {
    font-size: 1.25rem;
    font-weight: 700;
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-order__info {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 1.25rem;
    column-gap: 0.75rem;
}
.modal-basket .modal__panel .modal-basket__products-container .modal-basket__product .modal-order__info .modal-order__info-box {
    width: calc(50% - 0.375rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modal-basket .modal__close {
    top: 1.25rem;
    right: 1.5rem;
    z-index: 50;
}

.section-order {
    display: flex;
    padding: 2.5rem 0;
    flex-direction: column;
    gap: 1.5rem;
}
.section-order h1 {
    font-size: 1.75rem;
    font-weight: 800;
}
.section-order .order__container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2.5rem;
}
.section-order .order__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.section-order .order__inputs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.section-order .order__inputs .order__input-box .js-open-delivery-modal {
    width: max-content;
}
.section-order .order__inputs .order__input-box {
    width: calc(50% - 6px);
}
.section-order .order__inputs .order__input-box label {
    width: 100%;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-family);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.section-order .order__inputs .order__input-box input {
    height: 3.25rem;
    padding: 0 0.875rem;
    border-radius: 0.75rem;
    background-color: var(--surface);
}
.section-order .order__inputs .order__input-box.w-100 {
    width: 100%;
}
.section-order .order__inputs .order__input-box textarea {
    min-height: 7rem;
    padding: 1.25rem 0.875rem;
    border-radius: 0.75rem;
    background-color: var(--surface);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-family);
}
.section-order .order__payment {
    padding: 1.5rem;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background-color: var(--surface);
}
.section-order .order__payment h2 {
    font-size: 1.5rem;
    font-weight: 800;
}
.section-order .order__payment .order__payment-options {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.order__payment-options .choice-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-family: Arial, sans-serif;
}
.order__payment-options .option input[type="radio"] {
    display: none;
}
.order__payment-options .option label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 0.094rem solid var(--border);
    border-radius: 0.75rem;
    cursor: pointer;
    background: var(--surface);
    transition: 0.25s ease;
}
.order__payment-options .option label:hover {
    border-color: var(--border-strong);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.order__payment-options .fake-checkbox {
    width: 20px;
    height: 20px;
    border: 0.094rem solid var(--textextra);
    border-radius: 0.25rem;
    flex-shrink: 0;
    margin-top: 0.094rem;
    position: relative;
    transition: 0.25s ease;
}
.order__payment-options .text {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}
.order__payment-options .title {
    font-size: 1rem;
    font-weight: 600;
}
.order__payment-options .option input[type="radio"]:checked + label {
    border-color: var(--main);
    background: var(--fill-subtle);
}
.order__payment-options .option input[type="radio"]:checked + label .fake-checkbox {
    background: var(--main);
    border-color: var(--main);
}
.order__payment-options .option input[type="radio"]:checked + label .fake-checkbox::after {
    /* Центрируется так же, как галочка обычного чекбокса. */
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 11px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -55%) rotate(45deg);
}

.section-order .order__sidebar {
    width: 100%;
    height: max-content;
    max-width: 24.438rem;
    display: flex;
    padding: 1.5rem;
    border-radius: 1.5rem;
    background-color: var(--surface);
    flex-direction: column;
    gap: 1.25rem;
}
.section-order .order__sidebar h3 {
    font-size: 1.5rem;
    font-weight: 800;
}
.section-order .order__sidebar .order__sidebar-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.section-order .order__sidebar .order__sidebar-info .order__sidebar-info-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.section-order .order__sidebar .order__sidebar-info .order__sidebar-info-box p {
    font-size: 0.938rem;
    font-weight: 600;
}
.section-order .order__sidebar .order__sidebar-info .order__sidebar-info-box span {
    font-size: 0.875rem;
    font-weight: 700;
}
.section-order .order__sidebar input:not([type="checkbox"]) {
    width: 100%;
    height: 3.25rem;
    padding: 0 0.875rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: 0.094rem solid rgba(0, 0, 0, 0.12);
    font-family: var(--font-family);
}
.section-order .order__sidebar .order__sidebar-sum {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.section-order .order__sidebar .order__sidebar-sum p {
    font-size: 1.125rem;
    font-weight: 700;
}
.section-order .order__sidebar button {
    margin-top: 0.375rem;
    width: 100%;
    height: 3.25rem;
    border-radius: 5rem;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-family);
    color: var(--white);
    background-color: var(--main);
}

.modal.modal-delivery {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.modal.modal-delivery.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal.modal-auth {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.modal.modal-auth.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal.modal-auth .modal-auth__panel {
    width: 26.125rem;
}
.modal.modal-auth .modal-auth__body {
    gap: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.modal.modal-auth .auth-tab-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}
.modal.modal-auth .auth-tab-content .modal-auth__title-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
.modal.modal-auth .auth-tab-content .modal-auth__title-box span {
    font-size: 1.5rem;
    font-weight: 800;
}
.modal.modal-auth .auth-tab-content .modal-auth__title-box p {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--textextra);
    text-align: center;
    line-height: 140%;
}
.modal.modal-auth .modal-auth__body .form {
    width: 100%;
    gap: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.modal.modal-auth .modal-auth__body .form .form__item {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
}
.modal.modal-auth .modal-auth__body .form .form__item label {
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--textmain);
}
.modal.modal-auth .modal-auth__body .form .form__item input {
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 500;
    color: var(--textmain);
    height: 3.25rem;
    border-radius: 0.75rem;
    background-color: var(--fill-subtle);
    padding: 0 0.875rem;
}
.modal.modal-auth .modal-auth__body .form .form__item .invalid-feedback {
    color: red;
    font-size: 0.875rem;
    font-family: var(--font-family);
    font-weight: 500;
}
.modal.modal-auth .modal-auth__tabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-family);
}
.modal.modal-auth .auth-tab {
    font-weight: bold;
    color: var(--textextra);
}

.modal.modal-auth .auth-tab.active { color: var(--accent); }
.modal.modal-auth .auth-tab-content { display: none; }
.modal.modal-auth .auth-tab-content.active { display: flex; }

.modal.modal-auth .is-invalid { border: 1px solid red; }

.modal.modal-auth .modal__close {
    top: 1.25rem;
    right: 1.5rem;
}


.modal-delivery__panel {
    max-width: 1180px;
    width: calc(100% - 40px);
    height: 43.75rem;
}
.modal-delivery__panel .modal__close {
    top: 1.25rem;
    right: 1.5rem;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.14);
}
.modal-delivery__body {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 24px;
    align-items: start;
}
.modal-delivery__field {
    position: relative;
    width: 100%;
}
.modal-delivery__field input {
    width: 100%;
    border-radius: 0.75rem;
    height: 3rem;
    background-color: var(--fill-subtle);
    padding: 0 0.875rem;
}
.modal-delivery__grid {
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
}
.modal-delivery__form {
    z-index: 100;
    position: absolute;
    bottom: 2.5rem;
    left: 1.25rem;
    width: 26.125rem;
    background-color: var(--surface);
    border-radius: 1.5rem;
    padding: 1.25rem 0.75rem 0.75rem 0.75rem;
}
.modal-delivery__form p {
    font-weight: 800;
    line-height: 100%;
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
}
.modal-delivery__map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.modal-delivery__map #deliveryMap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 43.75rem;
    border-radius: 1.5rem;
    overflow: hidden;
}
.modal-delivery__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    margin-top: 1.25rem;
}
.modal-delivery__actions button {
    width: 50%;
    height: 3rem;
    justify-content: center;
    font-size: 0.875rem;
    font-family: var(--font-family);
    font-weight: 700;
    padding: 0;
}
.modal-delivery__actions button.button-second {
    background-color: var(--fill-subtle);
    color: var(--textmain);
    transition: 0.2s;
}
.modal-delivery__actions button.button-second:hover {
    background-color: var(--second-orange);
}
.delivery-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    z-index: 30;
    max-height: 280px;
    overflow-y: auto;
    display: none;
}
.delivery-suggest.is-open {
    display: block;
}
.delivery-suggest__item {
    padding: 0.75rem 0.875rem;
    cursor: pointer;
    transition: background .15s ease;
    font-family: var(--font-family);
    border-bottom: 1px solid var(--border);
}
.delivery-suggest__item:hover {
    background: var(--fill-subtle);
}
.delivery-suggest__title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}
.delivery-suggest__subtitle {
    font-size: 12px;
    color: var(--textextra);
}
body.modal-open {
    overflow: hidden;
}

@media (min-width: 1441px) {
    .catalog__box {
        width: calc(20% - 0.6rem);
    }
}

.color-main {
    color: var(--accent);
}
.bg-main {
    color: var(--white);
    background-color: var(--main);
}
.bg-orange {
    color: var(--orange);
    background-color: var(--second-orange);
}

.account-box-mob {
    position: relative;
    display: none;
}
.account-img-box {
    width: 2.5rem;
    height: 2.5rem;
    display: block;
}
.account-img-box--avatar {
    border-radius: 50%;
    object-fit: cover;
}

.account-box-mob .account-container-box {
    display: none;
}

.account-box-mob.open .account-container-box {
    display: flex;
}

.account-box-mob .account-container-box {
    position: absolute;
    right: 0;
    top: 3.5rem;
    background-color: var(--surface);
    border-radius: 1.5rem;
    flex-direction: column;
    min-width: 12rem;
}
.account-box-mob .account-container-box a {
    font-size: 0.875rem;
    padding: 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.account-box-mob .account-container-box a:last-child {
    border-bottom: none;
}

@media (max-width: 1023px) {
    .account-box-mob {
        display: block;
    }

    .header__nav, .header__search, .header-actions .btn-mob {
        display: none;
    }
    .container {
        padding: 0 0.75rem;
    }
    .main {
        padding-top: 0.75rem;
        padding-bottom: 1.5rem;
    }
    .section-catalog {
        padding-top: 0.75rem;
        gap: 1.5rem;
    }
    .catalog__container h2,
    .catalog__container h3 {
        font-size: 1.25rem;
    }
    .catalog__container {
        gap: 1rem;
    }
    .catalog__block {
        column-gap: 0.25rem;
        row-gap: 0.25rem;
    }
    .catalog__box {
        width: calc(50% - 2px);
        padding: 0.5rem 0.625rem;
        gap: 0.75rem;
    }
    .catalog__box .catalog__actions p {
        font-size: 0.875rem;
    }
    .button-second {
        padding: 0 1.25rem;
    }
    .catalog__box .catalog__actions .catalog__info span {
        font-size: 0.875rem;
        letter-spacing: -0.75px;
    }
    .section-history {
        padding-top: 1rem;
        gap: 0.375rem;
    }
    .section-history a img {
        width: 8.25rem;
    }

    .modal-basket .modal__panel {
        width: 100%;
    }

    .modal-delivery__form {
        left: 1rem;
        width: calc(100% - 2rem);
    }

    .header {
        height: 4rem;
    }
    .header-logo img {
        height: 1.75rem;
    }
    .section-menu {
        top: calc(4rem);
    }
    .catalog__container {
        scroll-margin-top: 7rem;
    }

    .section-stock {
        padding: 1.5rem 0;
        gap: 1.5rem;
    }
    .section-stock h1 {
        font-size: 1.5rem;
    }
    .section-stock .stock__container {
        flex-direction: column;
    }
    .section-stock .stock__container .stock__box {
        width: 100%;
        gap: 1rem;
        border-radius: 0.75rem;
    }
    .section-stock .stock__container .stock__box .stock__content p {
        line-height: 160%;
    }
    .section-stock .stock__container .stock__box .stock__content {
        padding: 0 0.75rem 1rem 0.75rem;
    }

    .section-contact {
        padding: 1.5rem 0;
    }
    .section-contact .contact__top h1 {
        font-size: 1.5rem;
    }
    .section-contact .contact__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }
    .section-contact .contact__container {
        flex-direction: column;
    }
    .section-contact .contact__container .contact__box {
        width: 100%;
    }
    .modal-delivery__map #deliveryMap, .modal-delivery__panel {
        height: 90vh;
    }
    .section-order {
        padding: 1.5rem 0;
        gap: 2rem;
    }
    .section-order h1 {
        font-size: 1.5rem;
    }
    .section-order .order__container {
        flex-direction: column;
        justify-content: space-between;
        gap: 1.5rem;
    }
    .section-order .order__inputs {
        column-gap: 0.75rem;
        row-gap: 1.5rem;
    }
    .section-order .order__inputs .order__input-box label {
        gap: 0.75rem;
    }
    .section-profile {
        padding: 1.5rem 0;
        gap: 2rem;
    }
    .section-profile h1 {
        font-size: 1.5rem;
    }
    .profile__container {
        flex-direction: column;
    }
    .profile__sidebar {
        display: none;
    }
    .profile__content .profile-get-points {
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        gap: 1.25rem;
    }
    .profile__content .profile-get-points p {
        width: 90%;
        text-align: center;
        line-height: 140%;
    }
    .profile__content {
        gap: 0.75rem;
    }
    .profile__content .profile__info .profile__box {
        padding: 1rem 0.75rem;
    }
    .profile__content .profile__info .profile__box .profile__edit {
        right: 0.75rem;
    }
    .profile__content .profile__info .profile__notice {
        padding: 1rem 1.25rem;
    }
    .profile__content .profile__info .profile__notice span {
        line-height: 140%;
    }

    .profile__content .profile-get-address {
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        gap: 1.25rem;
    }
    .profile__content .profile-get-address p {
        width: 90%;
        text-align: center;
        line-height: 140%;
    }
    .profile__content .profile-addresses .profile-address-box {
        padding: 1rem 1.25rem;
    }
    .profile__content .profile-addresses .profile-address-box p {
        font-size: 1rem;
        line-height: 140%;
    }
    .profile-address-box__content {
        gap: 0.75rem;
    }
    .profile__content .profile-orders {
        gap: 0.5rem;
    }
    .profile__content .profile-orders .profile-order-box {
        padding: 1rem 1.25rem;
        align-items: flex-start;
        flex-direction: column;
    }
    .profile__content .profile-orders .profile-order-box .profile-order__content {
        gap: 1rem;
    }
    .profile__content .profile-orders .profile-order-box .profile-order__price {
        width: 100%;
        justify-content: space-between;
    }
    .profile__content .profile-orders .profile-order-box .profile-order__content .profile-order__info p {
        font-size: 1.125rem;
    }

    .modal__panel {
        width: 90%;
        padding: 1.5rem 1.25rem;
    }
    .modal__body-order {
        gap: 1rem;
    }
    .modal-order__title {
        gap: 1rem;
    }
    .modal-order__info {
        row-gap: 1rem;
        margin-top: 0.5rem;
    }
    .modal-order__info .modal-order__info-box p {
        line-height: 140%;
    }

    .modal.modal-auth .modal-auth__panel {
        width: 90%;
    }
}

/* --- Модификаторы блюда: обязательные группы, состав строки корзины --- */
.modal-product-extras .extras__required {
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--warning-bg);
    color: var(--warning);
    font-size: 11px;
    font-style: normal;
    text-transform: lowercase;
    vertical-align: middle;
}

.button-send.is-disabled {
    opacity: .5;
    pointer-events: none;
    cursor: not-allowed;
}

.modal-basket__product-extras {
    display: block;
    color: var(--textextra);
    font-size: 12px;
    line-height: 1.35;
}

.cart-error {
    margin: 12px 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--warning-bg);
    color: var(--warning);
    font-size: 14px;
}

/* Подзаголовок вложенной группы iiko внутри категории */
.section-catalog .catalog__container .catalog__subtitle {
    margin: 18px 0 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--textextra);
}

@media (max-width: 767px) {
    .section-catalog .catalog__container .catalog__subtitle {
        font-size: 16px;
        margin: 14px 0 8px;
    }
}

/* Позиция без цены в iiko: видна, но не продаётся */
.catalog__info .price-on-request,
.modal-product-price__box .price-on-request {
    color: var(--textextra);
    font-weight: 500;
}

/* ======================================================================
   Корзина: гость и состояние ошибки
   ====================================================================== */

.cart-gate {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem 3rem 1.5rem;
    background-color: var(--fill-subtle);
}

.cart-gate__icon {
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--main);
    box-shadow: 0 0.75rem 1.5rem var(--focus-ring);
    margin-bottom: 1.25rem;
}
.cart-gate__icon img {
    width: 1.75rem;
    height: 1.75rem;
}

.cart-gate__title {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 130%;
    margin-bottom: 0.625rem;
}

.cart-gate__text {
    max-width: 20rem;
    color: var(--textextra);
    line-height: 150%;
    margin-bottom: 1.5rem;
}

.cart-gate__button {
    width: 100%;
    max-width: 20rem;
    padding: 0 1.5rem;
}

.cart-gate__hint {
    color: var(--textextra);
    font-size: 0.8125rem;
    margin-top: 0.75rem;
}

.cart-gate__benefits {
    width: 100%;
    max-width: 20rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
}
.cart-gate__benefits li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--textextra);
    font-size: 0.875rem;
    line-height: 140%;
}
.cart-gate__benefits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.375rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--main-orange);
}

.cart-gate--error .cart-gate__title {
    margin-top: 1rem;
}

/* ======================================================================
   Модалка входа: пояснение и согласия
   ====================================================================== */

.modal-auth__note {
    margin-top: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.75rem;
    background-color: var(--second);
    color: var(--accent);
    font-size: 0.8125rem;
    line-height: 140%;
    text-align: left;
}

.auth-consent {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.checkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
}
.checkbox__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.checkbox__box {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    border: 2px solid var(--control-border);
    border-radius: 0.375rem;
    background-color: var(--surface);
    transition: 0.15s;
    position: relative;
}
/* Галочка центрируется от середины, а не фиксированными left/top: при
   размере бокса 20px и рамке 2px прежние 5px/1px давали смещение влево-вверх.
   -55% по вертикали, а не -50%, — оптическая поправка: «птичка» нарисована
   правой и нижней границами, её видимая масса ниже геометрического центра. */
.checkbox__box::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.3125rem;
    height: 0.625rem;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -55%) rotate(45deg) scale(0);
    transition: 0.15s;
}
.checkbox__input:checked + .checkbox__box {
    background-color: var(--main);
    border-color: var(--main);
}
.checkbox__input:checked + .checkbox__box::after {
    transform: translate(-50%, -55%) rotate(45deg) scale(1);
}
.checkbox__input:focus-visible + .checkbox__box {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.checkbox__text {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 145%;
    color: var(--textextra);
}
.checkbox__text a {
    font-size: inherit;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.checkbox__input.is-invalid + .checkbox__box {
    border-color: var(--danger);
}
.checkbox .invalid-feedback {
    flex: 1 0 100%;
    color: var(--danger);
    font-size: 0.75rem;
}

/* ======================================================================
   Футер
   ====================================================================== */

.footer {
    margin-top: 3rem;
    background-color: var(--surface);
    border-radius: 2rem 2rem 0 0;
}
.footer__inner {
    padding: 3rem 5rem 2rem 5rem;
}

.footer__top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 3rem;
    padding-bottom: 2.5rem;
}

.footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
    max-width: 22rem;
}
.footer__logo img {
    height: 2.25rem;
    margin-bottom: 0.5rem;
}
.footer__tagline {
    color: var(--textextra);
    line-height: 150%;
    margin-bottom: 0.5rem;
}
.footer__phone {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--accent);
}
.footer__hours,
.footer__address {
    color: var(--textextra);
    line-height: 145%;
}
.footer__socials {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.footer__socials a {
    display: flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 1.125rem;
    border-radius: 2.5rem;
    background-color: var(--second);
    color: var(--accent);
    font-weight: 600;
    transition: 0.2s;
}
.footer__socials a:hover {
    background-color: var(--main);
    color: var(--white);
}

.footer__nav {
    display: flex;
    flex-direction: row;
    gap: 3.5rem;
}
.footer__col {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 9rem;
}
.footer__col-title {
    font-size: 1rem;
    font-weight: 800;
}
.footer__col ul {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.footer__col ul li a {
    color: var(--textextra);
    line-height: 140%;
    transition: 0.15s;
}
.footer__col ul li a:hover {
    color: var(--accent);
}

.footer__bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.footer__legal {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 52rem;
}
.footer__copy {
    font-weight: 600;
}
.footer__requisites {
    color: var(--textextra);
    font-size: 0.8125rem;
}
.footer__disclaimer {
    color: var(--textextra);
    font-size: 0.75rem;
    line-height: 150%;
}
.footer__disclaimer a {
    font-size: inherit;
    color: var(--accent);
}
.footer__links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding-top: 0.125rem;
}
.footer__links a {
    color: var(--textextra);
    font-size: 0.8125rem;
    transition: 0.15s;
}
.footer__links a:hover {
    color: var(--accent);
}

/* ======================================================================
   Уведомление о cookie
   ====================================================================== */

.cookie-banner {
    position: fixed;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 30;
    max-width: 40rem;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1.25rem;
    background-color: var(--surface);
    box-shadow: 0 1.25rem 2.5rem rgba(30, 30, 31, 0.18);
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity .25s ease, transform .25s ease;
}
/* Авторское display:flex перебивает [hidden] из стилей браузера — гасим явно. */
.cookie-banner[hidden] {
    display: none;
}
.cookie-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.cookie-banner__title {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.375rem;
}
.cookie-banner__text {
    color: var(--textextra);
    font-size: 0.8125rem;
    line-height: 150%;
}
.cookie-banner__text a {
    font-size: inherit;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookie-banner__actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cookie-banner__actions .button-send {
    height: 2.5rem;
    padding: 0 1.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
}
.cookie-banner__actions .button-second {
    justify-content: center;
    white-space: nowrap;
}

/* ======================================================================
   Правовой раздел
   ====================================================================== */

.legal {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 1rem;
}

.legal__hero {
    padding: 2rem;
    border-radius: 1.5rem;
    background-color: var(--surface);
}
.legal__hero-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 120%;
    margin-bottom: 0.75rem;
}
.legal__hero-text {
    max-width: 44rem;
    color: var(--textextra);
    line-height: 160%;
}

.legal__cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}
.legal__card {
    flex: 1 1 20rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
    background-color: var(--surface);
    transition: 0.2s;
}
.legal__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.75rem 1.5rem rgba(30, 30, 31, 0.08);
}
.legal__card-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 140%;
}
.legal__card-text {
    color: var(--textextra);
    line-height: 150%;
}
.legal__card-meta {
    margin-top: 0.375rem;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
}

.legal__contact-note {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    border-radius: 1.5rem;
    background-color: var(--second);
}
.legal__contact-note p {
    color: var(--accent);
    line-height: 150%;
}
.legal__contact-actions {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}
.legal__contact-actions .button-second {
    background-color: var(--surface);
}

.legal__grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
}

.legal__aside {
    flex: 0 0 20rem;
    position: sticky;
    top: 6.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
    background-color: var(--surface);
}
.legal__aside-title {
    font-size: 1rem;
    font-weight: 800;
}
.legal__nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.legal__nav-link {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    color: var(--textextra);
    line-height: 140%;
    transition: 0.15s;
}
.legal__nav-link:hover {
    background-color: var(--bgmain);
    color: var(--accent);
}
.legal__nav-link.is-active {
    background-color: var(--second);
    color: var(--accent);
    font-weight: 700;
}

.legal__doc {
    flex: 1 1 auto;
    min-width: 0;
    padding: 2.5rem;
    border-radius: 1.5rem;
    background-color: var(--surface);
}
.legal__doc-head {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.legal__doc-title {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 125%;
}
.legal__doc-meta {
    margin-top: 0.5rem;
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 600;
}
.legal__doc-lead {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background-color: var(--bgmain);
}
.legal__doc-lead p {
    line-height: 165%;
}

.legal__doc-body {
    max-width: 52rem;
}
.legal__doc-body h2 {
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 140%;
    margin: 2rem 0 0.875rem 0;
    scroll-margin-top: 6.5rem;
}
.legal__doc-body h2:first-child {
    margin-top: 0;
}
.legal__doc-body p {
    line-height: 170%;
    margin-bottom: 0.75rem;
}
.legal__doc-body ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
}
.legal__doc-body ul li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 165%;
}
.legal__doc-body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6875rem;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: var(--main);
}
.legal__doc-body a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal__requisites {
    margin-top: 2.5rem;
    padding: 1.5rem;
    border-radius: 1.25rem;
    background-color: var(--bgmain);
}
.legal__requisites-title {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 1rem;
}
.legal__requisites-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.legal__requisites-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.legal__requisites-row dt {
    flex: 0 0 12rem;
    color: var(--textextra);
    font-size: 0.875rem;
}
.legal__requisites-row dd {
    flex: 1 1 auto;
    font-size: 0.875rem;
    font-weight: 500;
}
.legal__requisites-row dd a {
    color: var(--accent);
}

/* Согласие с офертой на шаге оплаты */
.order__legal {
    margin-bottom: 0.875rem;
    color: var(--textextra);
    font-size: 0.75rem;
    line-height: 150%;
}
.order__legal a {
    font-size: inherit;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 1023px) {
    .footer {
        margin-top: 1.5rem;
        border-radius: 1.25rem 1.25rem 0 0;
    }
    .footer__inner {
        padding: 2rem 0.75rem 1.5rem 0.75rem;
    }
    .footer__top {
        flex-direction: column;
        gap: 2rem;
        padding-bottom: 1.5rem;
    }
    .footer__nav {
        flex-direction: column;
        gap: 1.5rem;
    }
    .footer__bottom {
        flex-direction: column;
        gap: 1rem;
    }

    .cookie-banner {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1.125rem 1.25rem;
    }
    .cookie-banner__actions {
        flex-direction: column-reverse;
    }

    .legal__grid {
        flex-direction: column;
    }
    .legal__aside {
        position: static;
        flex: 1 1 auto;
        width: 100%;
        padding: 1.25rem;
    }
    .legal__doc {
        padding: 1.5rem 1.25rem;
    }
    .legal__doc-title {
        font-size: 1.375rem;
    }
    .legal__hero {
        padding: 1.5rem 1.25rem;
    }
    .legal__hero-title {
        font-size: 1.5rem;
    }
    .legal__contact-note {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem;
    }
    .legal__requisites-row {
        flex-direction: column;
        gap: 0.125rem;
    }
    .legal__requisites-row dt {
        flex: 1 1 auto;
    }

    .cart-gate {
        padding: 2rem 1.25rem 2.5rem 1.25rem;
    }
    .cart-gate__benefits {
        margin-top: 1.5rem;
    }
}

/* ======================================================================
   Хлебные крошки
   ====================================================================== */

.breadcrumbs {
    margin-bottom: 1.25rem;
}
.breadcrumbs ol {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.breadcrumbs li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
/* Разделитель между крошками, у последней его нет */
.breadcrumbs li:not(:last-child)::after {
    content: "";
    width: 0.3125rem;
    height: 0.3125rem;
    border-top: 1.5px solid var(--border-strong);
    border-right: 1.5px solid var(--border-strong);
    transform: rotate(45deg);
}
.breadcrumbs li a,
.breadcrumbs li span {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 130%;
}
.breadcrumbs li a {
    color: var(--accent);
    transition: 0.15s;
}
.breadcrumbs li a:hover {
    color: var(--hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Текущая страница — не ссылка по смыслу, поэтому приглушена */
.breadcrumbs li:last-child a,
.breadcrumbs li:last-child span {
    color: var(--textextra);
}
.breadcrumbs li:last-child a:hover {
    color: var(--textextra);
    text-decoration: none;
}

/* ======================================================================
   Модалка входа: не должна обрезаться на невысоких экранах
   ====================================================================== */

.modal.modal-auth {
    align-items: flex-start;
    overflow-y: auto;
    padding: 2rem 0;
}
.modal.modal-auth .modal__backdrop {
    /* Скроллится сама модалка, поэтому подложку крепим к окну,
       иначе при прокрутке низ остаётся незатемнённым. */
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
}
.modal.modal-auth .modal-auth__panel {
    margin: auto 0;
}

@media (max-width: 1023px) {
    .breadcrumbs {
        margin-bottom: 0.875rem;
    }
    .breadcrumbs ol {
        gap: 0.375rem;
    }
    .breadcrumbs li {
        gap: 0.375rem;
    }
}

/* ======================================================================
   Прижимаем футер к низу на коротких страницах
   ====================================================================== */

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.wrapper > .header,
.wrapper > .footer {
    flex: 0 0 auto;
}
.wrapper > .main {
    flex: 1 0 auto;
}

/* --- Страница «О нас» -------------------------------------------------- */
.about {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 1rem;
}
.about__hero {
    padding: 2rem;
    border-radius: 1.5rem;
    background-color: var(--surface);
}
.about__title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 120%;
    margin-bottom: 1rem;
}
.about__lead {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.about__text {
    max-width: 44rem;
    color: var(--textextra);
    line-height: 170%;
    margin-bottom: 0.5rem;
}
.about__text:last-child {
    margin-bottom: 0;
}
.about__heart {
    color: #e0245e;
}

/* Контакты одной точкой.
   Базовое правило задаёт .contact__box ширину calc(25% - 0.563rem) под сетку из
   четырёх карточек. Когда точка одна, карточка должна занимать всю ширину —
   селектор повторяет специфичность базового, иначе не перебьёт. */
.section-contact .contact__container--single {
    display: block;
}
.section-contact .contact__container--single .contact__box {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(18rem, 1.6fr) minmax(14rem, 1fr);
    gap: 1.25rem 2.5rem;
    align-items: start;
    padding: 1.75rem 2rem;
}
/* длинный адрес не должен вылезать за карточку */
.section-contact .contact__container--single .contact__box * {
    overflow-wrap: anywhere;
}
.section-contact .contact__container--single .contact__contacts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.section-contact .contact__container--single .contact__info-phone span,
.section-contact .contact__container--single .contact__box-email {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--textextra);
}
.section-contact .contact__container--single .contact__info-phone a,
.section-contact .contact__container--single .contact__box-email a {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--accent);
}
.section-contact .contact__container--single .contact__box-delivery {
    gap: 0.75rem;
}

@media (max-width: 992px) {
    .section-contact .contact__container--single .contact__box {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.25rem 1.5rem;
    }
}
@media (max-width: 768px) {
    .about__hero {
        padding: 1.5rem 1.25rem;
    }
    .about__title {
        font-size: 1.5rem;
    }
}

/* --- Оплата: результат оформления заказа и страницы ошибок --------------- */

.payment-result {
    display: flex;
    justify-content: center;
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
}
.payment-result__card {
    width: 100%;
    max-width: 34rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 2.5rem 2rem;
    border-radius: 1.5rem;
    background-color: var(--surface);
    text-align: center;
}
.payment-result__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background-color: var(--second);
    color: var(--accent);
}
.payment-result__icon svg {
    width: 2.25rem;
    height: 2.25rem;
}
.payment-result__icon--success {
    background-color: var(--success-bg);
    color: var(--success);
}
.payment-result__icon--pending {
    background-color: var(--second-orange);
    color: var(--orange);
}
.payment-result__icon--failed {
    background-color: var(--danger-bg);
    color: var(--danger);
}
.payment-result__title {
    font-size: 1.5rem;
    font-weight: 800;
}
.payment-result__text {
    font-size: 0.938rem;
    font-weight: 500;
    color: var(--textextra);
    line-height: 1.5;
}
.payment-result__summary {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: 1rem;
    background-color: var(--bgmain);
}
.payment-result__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.payment-result__row span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--textextra);
}
.payment-result__row p {
    font-size: 0.938rem;
    font-weight: 700;
    text-align: right;
}
.payment-result__row--total p {
    font-size: 1.125rem;
    font-weight: 800;
}
.payment-result__actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.payment-result__actions .button-send,
.payment-result__actions .button-second {
    width: 100%;
    justify-content: center;
}
.payment-result__note {
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--textextra);
}

.payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.75rem;
    padding: 0 0.875rem;
    border-radius: 2rem;
    font-size: 0.813rem;
    font-weight: 700;
    white-space: nowrap;
}
.payment-badge--success {
    color: var(--success);
    background-color: var(--success-bg);
}
.payment-badge--warning {
    color: var(--orange);
    background-color: var(--second-orange);
}
.payment-badge--danger {
    color: var(--danger);
    background-color: var(--danger-bg);
}
.payment-badge--neutral {
    color: var(--textextra);
    background-color: var(--bgextra);
}

/* Строка оплаты в списке заказов личного кабинета */
.profile-order__payment {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.375rem;
}
.profile-order__pay-link {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 1rem;
    border-radius: 2rem;
    background-color: var(--main);
    color: var(--white);
    font-size: 0.813rem;
    font-weight: 700;
    transition: 0.2s;
}
.profile-order__pay-link:hover {
    background-color: var(--hover);
}

/* Подпись под способом оплаты на чекауте */
.order__payment-hint {
    margin-top: 0.75rem;
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--textextra);
    line-height: 1.45;
}

@media (max-width: 768px) {
    .payment-result__card {
        padding: 2rem 1.25rem;
        border-radius: 1.25rem;
    }
    .payment-result__title {
        font-size: 1.25rem;
    }
    .profile-order__payment {
        flex-wrap: wrap;
    }
}

/* --- Страницы ошибок ---------------------------------------------------- */

.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    background-color: var(--bgmain);
}
.error-page__card {
    width: 100%;
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 2rem;
    border-radius: 1.5rem;
    background-color: var(--surface);
    text-align: center;
}
.error-page__logo {
    height: 2.25rem;
    margin-bottom: 0.5rem;
}
.error-page__code {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
}
.error-page__title {
    font-size: 1.375rem;
    font-weight: 800;
}
.error-page__text {
    font-size: 0.938rem;
    font-weight: 500;
    color: var(--textextra);
    line-height: 1.5;
}
.error-page__actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.error-page__actions .button-send,
.error-page__actions .button-second {
    width: 100%;
    justify-content: center;
}

@media (max-width: 768px) {
    .error-page__card {
        padding: 2rem 1.25rem;
    }
    .error-page__code {
        font-size: 2.75rem;
    }
}

/* ======================================================================
   Карточка блюда: цена, полноэкранное окно на мобильном
   ====================================================================== */

/* Базовое правило `a, p, span, h1, h2, h3` жёстко задаёт span-ам 0.875rem,
   поэтому цена в `<span>` оставалась мелкой, а «₽» голым текстовым узлом
   наследовал 1.75rem — знак валюты выглядел крупнее суммы. Собираем строку
   из span-ов и заставляем их наследовать размер самой цены. */
.modal-product .modal-product-price__box .price {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.25rem;
}
.modal-product .modal-product-price__box .price .js-product-total,
.modal-product .modal-product-price__box .price .price__currency {
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
    color: inherit;
}
/* «от» — служебная приписка, ей размер цены не нужен */
.modal-product .modal-product-price__box .price .price__from {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--textextra);
}

/* Модалки должны перекрывать всё: шапку (z-index 5), cookie-баннер (30)
   и прикреплённую снизу кнопку карточки блюда (1100). */
.modal {
    z-index: 1200;
}

@media (max-width: 1023px) {
    /* Отдельная страница карточки — сюда попадают прямым заходом по ссылке
       или после перезагрузки; внутри сайта блюдо открывается окном. Обе
       формы должны выглядеть одинаково, поэтому страница отдаёт весь экран:
       шапки и футера нет, фон белый. */
    body.page-product,
    body.page-product .main {
        background-color: var(--surface);
    }
    body.page-product .header,
    body.page-product .footer {
        display: none;
    }
    body.page-product .main,
    body.page-product .container {
        padding: 0;
    }
    .product-page {
        margin: 0;
        background-color: var(--surface);
    }
    .product-page__inner {
        max-width: none;
        margin: 0;
        gap: 1.25rem;
        padding: 0;
    }

    /* Окно карточки — на весь экран, без полей и скруглений. Скроллится
       только содержимое окна, страница под ним остаётся на своём месте. */
    .modal-product .modal__panel {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        padding: 0;
        border-radius: 0;
    }
    .modal-product .modal__panel .modal-product__body {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        height: 100%;
        max-height: none;
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Дальше — общее для окна и страницы: и там, и там содержимое лежит
       внутри .modal-product. */

    /* Фото — во всю ширину экрана, без полей и без зазора снизу
       (inline-картинка иначе оставляет базовый отступ). */
    .modal-product .modal__body-product-img {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .modal-product .modal__body-product-img img {
        display: block;
        width: 100%;
        margin: 0;
        border-radius: 0;
    }

    /* Заголовок и описание — по центру, как в макете; на десктопе окно
       двухколоночное, там выравнивание остаётся по левому краю. */
    .modal-product .modal-product-info__box {
        text-align: center;
    }
    .modal-product .modal-product-title {
        font-size: 1.5rem;
    }

    /* Поля — только у текста и добавок; снизу место под кнопку */
    .modal-product .modal__body-product {
        width: 100%;
        margin: 0;
        padding: 0 1rem 8.5rem 1rem;
    }

    /* Закрытие — справа сверху, поверх фотографии */
    .product-page__back,
    .modal-product .modal__close {
        position: fixed;
        top: 0.875rem;
        right: 0.875rem;
        left: auto;
        z-index: 1100;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 50%;
        background-color: var(--surface);
        box-shadow: 0 0.125rem 0.75rem rgb(0 0 0 / 18%);
    }
    .product-page__back img,
    .modal-product .modal__close img {
        width: 1rem;
        height: 1rem;
    }

    /* «В корзину» прижата к низу экрана поверх содержимого */
    .modal-product .modal-product-price__box .button-send {
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 1rem;
        width: auto;
        margin: 0;
        border-radius: 3.25rem;
        box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 20%);
        z-index: 1100;
    }
    /* Подложка под кнопкой: содержимое не должно просвечивать из-под неё */
    .modal-product .modal-product-price__box::after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 6rem;
        background: linear-gradient(180deg, transparent 0%, var(--surface) 42%);
        pointer-events: none;
        z-index: 1090;
    }
}
/* ======================================================================
   Пустая корзина
   ====================================================================== */

.cart-gate--empty {
    padding-top: 3rem;
}

.cart-empty__art {
    width: 11rem;
    max-width: 60%;
    margin-bottom: 1.5rem;
}
.cart-empty__art svg {
    display: block;
    width: 100%;
    height: auto;
}
.cart-empty__shadow {
    fill: var(--accent);
    opacity: 0.08;
}
.cart-empty__bag {
    fill: var(--second);
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linejoin: round;
}
.cart-empty__handle {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
}
.cart-empty__void {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 2 9;
    opacity: 0.45;
}
.cart-empty__steam {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    opacity: 0.25;
}
.cart-empty__dot {
    fill: var(--main-orange);
}
.cart-empty__dot--small {
    opacity: 0.55;
}

/* ======================================================================
   Мобильные тап-зоны: по 44+ px, иначе в кнопки трудно попасть пальцем
   ====================================================================== */

@media (max-width: 1023px) {
    .header-actions {
        gap: 0.625rem;
    }
    .account-img-box {
        width: 2.875rem;
        height: 2.875rem;
    }
    .account-box-mob .account-container-box {
        top: 3.75rem;
    }
    #basketBtn {
        height: 2.875rem;
        min-width: 2.875rem;
        justify-content: center;
    }
    #basketBtn img {
        width: 1.375rem;
        height: 1.375rem;
    }

    /* Крестики всех модалок (карточка блюда — в своём блоке выше) */
    .modal__close {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 50%;
    }
    .modal__close img {
        width: 1rem;
        height: 1rem;
    }
    .modal-basket .modal__close {
        top: 0.875rem;
        right: 0.875rem;
    }
}

/* ======================================================================
   Состояние заказа (приходит из iiko)
   ====================================================================== */

/* Цвета те же, что у ярлыков оплаты, — в карточке заказа они стоят рядом
   и не должны спорить между собой. */
.order-status {
    white-space: nowrap;
}
.order-status--success {
    color: var(--success);
    background-color: var(--success-bg);
}
.order-status--warning {
    color: var(--orange);
    background-color: var(--second-orange);
}
.order-status--danger {
    color: var(--danger);
    background-color: var(--danger-bg);
}
.order-status--info {
    color: var(--accent);
    background-color: var(--second);
}

/* ======================================================================
   Личный кабинет: ярлыки оплаты в списке заказов
   ======================================================================
   Ярлык и кнопка лежат внутри .profile-order__info, а там на любой span
   висит правило из пяти классов с цветом --textextra. Оно перебивает
   одноклассовые .payment-badge--*, и «Оплачен» выходил серым. Поэтому
   цвета повторены с той же специфичностью, а не подкручены !important. */

.profile__content .profile-orders .profile-order-box .profile-order__content .profile-order__info .payment-badge--success {
    color: var(--success);
}
.profile__content .profile-orders .profile-order-box .profile-order__content .profile-order__info .payment-badge--warning {
    color: var(--orange);
}
.profile__content .profile-orders .profile-order-box .profile-order__content .profile-order__info .payment-badge--danger {
    color: var(--danger);
}
.profile__content .profile-orders .profile-order-box .profile-order__content .profile-order__info .payment-badge--neutral {
    color: var(--textextra);
}
.profile__content .profile-orders .profile-order-box .profile-order__content .profile-order__info .profile-order__pay-link {
    color: var(--white);
}

/* ======================================================================
   Модалка заказа
   ====================================================================== */

.modal-order__product .modal-order-info img {
    border-radius: 0.75rem;
    object-fit: cover;
    flex: 0 0 auto;
}

/* Цена не должна переноситься: «₽» уезжал на вторую строку, потому что
   колонка сжималась под длинным названием блюда. Название и описание
   теперь сжимаются, цена — нет. */
.modal-order__product .modal-order-info {
    min-width: 0;
    flex: 1 1 auto;
}
.modal-order__product .modal-order-info .modal-order-text {
    min-width: 0;
}
.modal-order__product .modal-order-price {
    flex: 0 0 auto;
    text-align: right;
}
.modal-order__product .modal-order-price span,
.modal-order__product .modal-order-price p {
    white-space: nowrap;
}

/* Описание блюда — максимум три строки с многоточием */
.modal-order__product .modal-order-info .modal-order-text span {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

/* Тот же случай, что и в списке: .modal-order__info-box span перекрывает
   одноклассовый ярлык оплаты. */
.modal-order__info .modal-order__info-box .payment-badge--success {
    color: var(--success);
}
.modal-order__info .modal-order__info-box .payment-badge--warning {
    color: var(--orange);
}
.modal-order__info .modal-order__info-box .payment-badge--danger {
    color: var(--danger);
}
.modal-order__info .modal-order__info-box .payment-badge--neutral {
    color: var(--textextra);
}

/* ======================================================================
   Корзина: скролл только по списку товаров
   ======================================================================
   Пятнадцать позиций раньше выталкивали итог и кнопку оформления за край
   экрана. Панель — колонка на всю высоту, шапка и подвал не сжимаются,
   прокручивается середина. */

.modal-basket .modal__panel {
    /* 100vh на телефоне выше видимой области (панели браузера прячутся не
       сразу) — кнопка оформления уезжала бы под край экрана */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
/* Гостевая и пустая корзина занимают всю панель: на низком экране им нужен
   свой скролл, иначе overflow: hidden срежет кнопку */
.modal-basket .modal__panel .cart-gate {
    min-height: 0;
    overflow-y: auto;
}
.modal-basket .modal__panel .modal-basket__title {
    flex: 0 0 auto;
}
.modal-basket .modal__panel .modal-basket__products {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.modal-basket .modal__panel .modal-basket__price {
    flex: 0 0 auto;
}

/* ======================================================================
   Профиль: согласие на рассылку
   ======================================================================
   Тот же .checkbox, что в форме регистрации, — состояние подписки должно
   выглядеть одинаково везде, где его спрашивают. Текст здесь крупнее:
   в блоке «Уведомления» это единственная строка, а не сноска под формой. */

.profile__content .profile__info .profile__notice .profile__notice-check {
    align-items: center;
    gap: 0.75rem;
    padding-left: 0.25rem;
}
.profile__content .profile__info .profile__notice .profile__notice-check .checkbox__box {
    margin-top: 0;
}
.profile__content .profile__info .profile__notice .profile__notice-check .checkbox__text {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--textextra);
}


/* Скрытый от глаз, но не от поисковика и не от скринридера текст.
   Нужен для h1 на главной: витрина начинается сразу с каталога, а страница
   без h1 остаётся для поисковика без темы. display:none тут не годится —
   его и робот, и скринридер пропускают. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ── Переключатель темы ────────────────────────────────────────────────────
   Круглая кнопка в шапке и строка-переключатель в личном кабинете. Иконки
   красятся currentColor, поэтому следуют теме сами. Видно всегда одну:
   на светлой теме — луну («включить тёмную»), на тёмной — солнце.          */

.theme-toggle {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--accent);
    background-color: var(--second);
    transition: background-color 0.15s ease, color 0.15s ease;
}

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

.theme-toggle:focus-visible,
.theme-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* На тёмной теме предлагаем вернуться к светлой — показываем солнце. */
.theme-icon--sun { display: none; }
[data-theme="dark"] .theme-icon--sun { display: block; }
[data-theme="dark"] .theme-icon--moon { display: none; }

/* ── Строка в личном кабинете ───────────────────────────────────────────── */

.theme-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background-color: var(--surface);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-family);
}

.theme-row__icons {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--accent);
    background-color: var(--second);
}

.theme-row__text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.theme-row__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--textmain);
}

.theme-row__hint {
    font-size: 0.8125rem;
    color: var(--textextra);
}

/* Сам тумблер: положение узнаём из aria-pressed, отдельного класса не нужно. */
.theme-switch {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 1.5rem;
    padding: 0.1875rem;
    border-radius: 1.5rem;
    background-color: var(--border-strong);
    transition: background-color 0.18s ease;
}

.theme-row[aria-pressed="true"] .theme-switch {
    background-color: var(--main);
}

.theme-switch__knob {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background-color: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease;
}

.theme-row[aria-pressed="true"] .theme-switch__knob {
    transform: translateX(1.25rem);
}

@media (max-width: 767px) {
    .theme-toggle {
        width: 2.875rem;
        height: 2.875rem;
    }
}

/* ── Логотип под тему ──────────────────────────────────────────────────────
   Показываем ровно один файл: в тёмной версии текст светлый, а «&» поднят
   до акцентного синего. Размеры задаёт .header-logo / .footer__logo, здесь
   только видимость.                                                        */

.logo-img--dark { display: none; }
[data-theme="dark"] .logo-img--light { display: none; }
[data-theme="dark"] .logo-img--dark { display: block; }

/* ── Тёмная тема: точечные поправки ────────────────────────────────────────
   То, что нельзя вывести из токенов: иконки-картинки и подложки, зашитые
   в сторонние куски вёрстки.                                               */

/* Инвертируем ТОЛЬКО те иконки, которые действительно тёмные.
   Крестик модалки нарисован stroke=#1E1E1F и лежит на тёмной подложке
   (--bgextra), поэтому без инверсии его не видно.

   Остальные трогать нельзя, и это была ошибка: card.svg (корзина),
   logout.svg и карандаш в edit.svg уже белые, а у edit.svg ещё и синий
   круг #1A71A2 — инверсия красила иконки в чёрный, а круг в оранжевый.
   search.svg нейтрально-серый (#76909D) и читается на обеих темах. */
[data-theme="dark"] .modal__close img {
    filter: invert(1);
}

/* Заглушка «фото нет» лежит на прозрачном фоне, но карточка блюда под ней
   в светлой теме белая — в тёмной подложка не нужна вовсе. */
[data-theme="dark"] .catalog__box img[src*="no-image"],
[data-theme="dark"] .modal__body-product-img img[src*="no-image"] {
    background-color: transparent;
}

/* Поля ввода: на тёмном фоне белая форма слепит, поэтому поле — приподнятый
   слой с видимой рамкой, а фокус подсвечивается акцентом. */
/* :where() обнуляет вес :not(), иначе это правило (0,3,1) перебивает
   точечные поправки вроде .header__search input и поле рисует свой фон
   поверх «таблетки» поиска. */
[data-theme="dark"] input:where(:not([type="checkbox"]):not([type="radio"])),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    color: var(--textmain);
    background-color: var(--surface-raised);
    border-color: var(--border-strong);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--textextra);
}

[data-theme="dark"] input:focus-visible,
[data-theme="dark"] textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Автозаполнение в Chrome перебивает фон своим светло-жёлтым. Обойти можно
   только тенью внутрь: сам background-color браузер игнорирует. */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--textmain);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-raised) inset;
}

/* Скроллбары под тему — иначе на тёмной странице остаётся светлая полоса. */
[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bgmain); }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 10px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--textextra); }

/* Поля, лежащие ВНУТРИ готовой «таблетки» со своим фоном и скруглением:
   строка поиска в шапке и счётчик количества в корзине и карточке блюда.
   Общее тёмное правило для input дало бы им собственный прямоугольный фон
   поверх родителя — у счётчика это выглядело как пропавшие скругления. */
[data-theme="dark"] .header__search input,
[data-theme="dark"] .header__search input:focus-visible,
[data-theme="dark"] .extra__item__actions input,
[data-theme="dark"] .extra__item__actions input:focus-visible {
    background-color: transparent;
    border: 0;
    outline: none;
}

/* Подпись под полем формы: часовой пояс у времени доставки и подобные
   уточнения. Блочная, чтобы вставать под инпутом, а не липнуть к нему сбоку. */
.field-hint {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.35;
    font-weight: 400;
    color: var(--textextra);
}


/* ── Правки после проверки на устройствах ─────────────────────────────────── */

/* Цена блюда на витрине — тем же весом, что и название: в карточке это
   второй по важности элемент, а наследуемые 500 из обнуления стилей делали
   её заметно бледнее заголовка. */
.catalog__box .catalog__actions .catalog__info span {
    font-weight: 600;
}

@media (max-width: 767px) {
    /* Переключатель темы в шапке на телефоне не помещается: рядом уже стоят
       корзина и аккаунт, и строка начинает переноситься. Тема при этом не
       теряется — она переключается в личном кабинете («Оформление»). */
    .theme-toggle {
        display: none;
    }

    /* Корзина на телефоне: сумма за позицию должна читаться крупнее цены
       за штуку, иначе обе строки сливаются в одинаковый мелкий текст. */
    .modal-basket .modal__panel .modal-basket__products-container
    .modal-basket__product .modal-order-price p {
        font-size: 1rem;
    }

    .modal-basket .modal__panel .modal-basket__products-container
    .modal-basket__product .modal-order-price span {
        font-size: 0.875rem;
    }
}