/* =============================================================
   ЛАЙК-БУКЕТ — ДИЗАЙН-СИСТЕМА
   Подключается ПОСЛЕ style.css и bootstrap.
   Здесь живут токены (цвет, шрифт, ритм, тени) и базовый слой
   компонентов. Новые стили пишем здесь, а не инлайном в шаблонах.
   ============================================================= */

/* Шрифты отдаёт свой сервер: файлы те же, что у Google Fonts, но без
   похода на чужой узел при каждом заходе. Собираются tools/build_fonts.py. */
@import url("../vendor/fonts/fonts.d2ba7feea950.css");

/* ==================== 1. ТОКЕНЫ ==================== */
/* Здесь только то, что не зависит от темы: ритм, шрифты, скругления.
   Цвет живёт ниже, в двух палитрах. */
:root {
    /* Высота нижнего меню на телефоне. Само меню рисуется в
       main/mobile_menu.html со своими встроенными стилями, и это число
       там уже разъехалось — в одном месте 70, в другом 80. Всё, что
       встаёт над меню (плашка о данных, всплывающие подсказки), считает
       отступ отсюда, чтобы не гадать. */
    --mobnav-h: 80px;

    /* Типографика */
    --font-display: Georgia, 'Times New Roman', 'Playfair Display', serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --fs-display: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
    --fs-h1:      clamp(1.9rem, 1.3rem + 2.2vw, 2.85rem);
    --fs-h2:      clamp(1.5rem, 1.15rem + 1.4vw, 2.15rem);
    --fs-h3:      clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
    --fs-body:    1rem;
    --fs-sm:      0.875rem;
    --fs-xs:      0.78rem;

    /* Ритм */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
    --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
    --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;
    --section-y: clamp(3rem, 1.5rem + 5vw, 5.5rem);

    /* Скругления — три значения, не двенадцать */
    --r-xs: 8px;  --r-sm: 13px;  --r-md: 1.15rem;  --r-lg: 24px;  --r-pill: 999px;

    --ease: cubic-bezier(.2,.6,.3,1);
    --dur: .22s;
}

/* =============================================================
   1б. ДВЕ ПАЛИТРЫ

   Всё, что имеет цвет, объявлено здесь дважды и больше нигде. Это не
   украшение архитектуры: по сайту было больше тысячи жёстко вписанных
   цветов, и каждый из них — место, где тёмная тема оказалась бы белым
   пятном. Правило простое: ни одного цвета вне этого блока.

   Светлая — по умолчанию, то есть на голом :root. Решение владельца
   сайта: светлая, пока человек не включит тёмную. Тему ставит сервер
   атрибутом data-theme прямо в разметке (main/theme.py), так что
   страница приходит нужной с первого байта и не мигает.

   КОНТРАСТ МЕРЕН, А НЕ ПОДОБРАН НА ГЛАЗ. Рядом с цветом — его отношение
   к фону по WCAG. Порог AA для обычного текста 4.5, для крупного 3.0.
   Числа проверяются обходом checks/theme_ui.js на живых страницах, а не
   только здесь на словах.

   Отдельно про --on-brand. Кнопка «залить брендом, написать белым» на
   светлой теме даёт 8.1 и читается прекрасно. На тёмной бренд обязан
   посветлеть (иначе кнопка сливается с фоном), и белый текст на нём
   даёт 2.8 — ниже порога даже для крупного. Поэтому на тёмной теме
   текст на брендовой заливке почти чёрный: 7.1.
   ============================================================= */

/* ---------- Светлая (по умолчанию) ---------- */
:root,
:root[data-theme="light"] {
    /* Текст */
    --ink:        #271A21;   /* основной текст */
    --ink-2:      #4A2635;   /* вторичный текст */
    /* --ink-3 и --ink-4 — ОДНО И ТО ЖЕ ЗНАЧЕНИЕ, и это не оплошность.

       Раньше они различались: подписи бледнее основного текста,
       микроподписи ещё бледнее. Выглядит складно, а меряется плохо.
       Самая тёмная светлая поверхность палитры — #EEE9E5, и на ней
       прежний --ink-4 (#7C6C74) давал 4.1 при пороге 4.5. То есть
       целый ярус текста по всему сайту был нечитаемым — и был им до
       всякой тёмной темы.

       Ярусы теперь задаются размером и насыщенностью шрифта, а не
       выцветанием. Имена оставлены оба: ими покрашено больше сотни
       мест, и переименовывать их ради красоты списка — работа без
       результата. */
    --ink-3:      #6E5E66;   /* подписи, мета — 5.0 на самой тёмной поверхности */
    --ink-4:      #6E5E66;   /* то же значение, см. выше */

    /* Линии и поверхности */
    --line:       #E3DCD7;
    --line-soft:  #EEE9E5;
    --surface:    #FFFFFF;
    --surface-2:  #F7F5F1;   /* фон страницы */
    --surface-3:  #EEE9E5;   /* приглушённые блоки */

    /* Бренд: пыльная роза вместо жвачного розового */
    --brand:      #8F2850;   /* акцент: текст, иконки, действия */
    --brand-deep: #712240;   /* ховер */
    --brand-mid:  #B74F72;   /* декор, фокус */
    --brand-soft: #F5DFE3;   /* тонированные подложки */
    --brand-wash: #F2E8E6;
    --on-brand:   #FFFFFF;   /* текст на брендовой заливке — 8.1 */

    /* Золото потемнело с #A8874F до #806430, и вот почему.

       Контраст — величина симметричная: насколько золото читается на
       белом, настолько же белое читается на золоте. Прежнее давало
       3.4 — значит проваливались ОБА случая разом: и звёздочка
       рейтинга на белой карточке, и белая надпись «Хит» на золотой
       плашке. #806430 даёт 5.6 на белом. Цвет стал глубже, но остался
       золотом. */
    --gold:       #806430;   /* рейтинг и метки — 5.6 на белом */

    /* Семантика */
    --danger:     #C83F4C;
    --danger-soft:#F9EBEC;
    --success:    #4C6B52;
    --success-soft:#EDF2EE;
    /* Предупреждение — то же золото и по той же причине: прежнее #A8874F
       давало 3.4 и на белом, и под белой надписью. Обход нашёл это сразу
       на двух местах: подпись под знаком в подвале и метка «Хит» на
       подарке. */
    --warning:    #806430;
    --warning-soft:#FBF3E2;
    /* Синий «к сведению» был вписан в правила числом (#2196f3, #0d6efd):
       на тёмной теме он оставался ярким пятном, а подложка под ним —
       голубой плитой. */
    --info:       #2F6FAD;
    --info-soft:  #E8F0F8;

    /* Тёмная секция и шапка */
    --plum:        #3C2834;
    --plum-deep:   #321E29;
    --plum-action: #402735;
    --nav-glass:   rgba(255,255,255,.74);

    /* Тени — мягкие и тёплые, без «парения» */
    --shadow-xs: 0 1px 2px rgba(34,30,29,.05);
    --shadow-sm: 0 1px 3px rgba(34,30,29,.06), 0 1px 2px rgba(34,30,29,.04);
    --shadow-md: 0 4px 18px rgba(34,30,29,.07);
    --shadow-lg: 0 14px 40px rgba(34,30,29,.10);
    --shadow-nav:  0 8px 30px rgba(60,37,48,.035);
    --shadow-pill: 0 4px 12px rgba(52,30,44,.18);

    /* Роли, а не цвета.

       Эти появились потому, что без них в правилах стоял голый #fff:
       «белый текст на тёмной кнопке», «белая плитка в шапке». На
       светлой теме это верно, на тёмной — белая плита посреди чёрной
       страницы. Цвет, записанный прямо в правиле, переключить нельзя;
       роль — можно. */
    --nav-bar:        rgba(249,248,245,.88);   /* полоса шапки */
    --nav-pill:       var(--plum-deep);        /* выбранный пункт меню */
    --on-nav-pill:    #FFFFFF;
    --hover-wash:     rgba(62,38,48,.05);      /* подсветка под курсором */
    --btn-primary:    var(--plum-action);      /* основное действие */
    --on-btn-primary: #FFFFFF;
    --btn-outline-bg:   #FFFFFF;               /* второстепенное действие */
    --btn-outline-line: #DFD2CD;
    --on-plum:        #FFFFFF;                 /* текст на тёмной секции */
    /* Текст на заливке цветом чернил. На светлой теме чернила тёмные и
       надпись белая; на тёмной чернила становятся почти белыми, и тот
       же белый даёт белое по белому — обход нашёл это на выбранной
       «фишке» расстояния в знакомствах. */
    --on-ink:         #FFFFFF;
    --overlay:        rgba(18,14,13,.55);      /* затемнение под окнами */
    --skeleton:       #EEE9E5;                 /* заглушки на время загрузки */
    --like:           #E0245E;                 /* сердечко «нравится» */
    /* Полупрозрачные плиты: кнопка поверх фотографии, плавающая шапка.
       Записанные числом («белый с прозрачностью»), на тёмной теме они
       остаются белыми пятнами — переключить голый rgba нечем. */
    --glass:          rgba(255,255,255,.92);
    --glass-soft:     rgba(255,255,255,.74);
    --action:         var(--ink);              /* заливка основного действия */
    --action-hover:   var(--brand);
    --brand-surface:  var(--brand-soft);       /* крупные брендовые плоскости */
    --on-surface:     var(--ink);              /* текст на такой плоскости */

    /* Фон заставки запуска. Он же background_color в site.webmanifest, и
       это не совпадение: системную заставку телефон красит именно им, а
       нашу, поверх страницы, — этой переменной. Разойдутся — переход
       между ними станет видимой вспышкой. За совпадением следит
       splash_test.

       В тёмной палитре переменная НЕ переопределяется, и тоже нарочно:
       системную заставку темой не перекрасить — телефон про тему ничего
       не знает. Сделать тёмной только нашу значит получить вспышку у
       того, кто выбрал тёмную тему, то есть обратное задуманному. */
    --splash-bg:      #EFE2DC;
}

/* ---------- Тёмная ---------- */
:root[data-theme="dark"] {
    /* Текст */
    --ink:        #F7F3F5;   /* основной — 17.9 на фоне страницы */
    --ink-2:      #C6BDC2;   /* вторичный — 10.7 */
    --ink-3:      #9E959A;   /* подписи, мета — 6.0 на самой светлой поверхности */
    --ink-4:      #9E959A;   /* то же значение, пояснение в светлой палитре */

    /* Линии и поверхности */
    --line:       #2B2B30;
    --line-soft:  #202024;
    --surface:    #141417;   /* карточки */
    --surface-2:  #0B0B0D;   /* фон страницы */
    --surface-3:  #1A1A1E;   /* приглушённые блоки */

    /* Бренд. Фирменная роза #8F2850 на чёрном даёт 2.4 — как текст и
       как акцент она здесь не живёт вовсе. Берём ту же розу,
       осветлённую до читаемой. */
    --brand:      #E8798F;   /* акцент: текст, иконки — 7.1 */
    --brand-deep: #F29DAE;   /* ховер: на тёмном ярче, а не темнее — 9.6 */
    --brand-mid:  #C96A84;   /* декор, фокус — 5.5 */
    --brand-soft: #2A1620;   /* тонированные подложки */
    --brand-wash: #1C1216;
    --on-brand:   #140F12;   /* текст на брендовой заливке — 7.1 */

    --gold:       #D4B36B;   /* рейтинг — 9.8 */

    /* Семантика */
    --danger:     #E87B84;   /* 7.1 */
    --danger-soft:#2A1618;
    --success:    #7FB08A;   /* 7.9 */
    --success-soft:#142017;
    --warning:    #D4B36B;
    --warning-soft:#231B10;
    --info:       #7FAEDC;   /* 7.4 */
    --info-soft:  #111A22;

    /* Тёмная секция и шапка */
    --plum:        #16161A;
    --plum-deep:   #101014;
    --plum-action: #1E1E24;
    --nav-glass:   rgba(16,16,20,.78);

    /* Тени на тёмном почти не видны — их работу делает граница.
       Оставляем мягкими и глубокими, чтобы поднятые плоскости всё же
       отличались от фона. */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.40);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 4px 18px rgba(0,0,0,.50);
    --shadow-lg: 0 14px 40px rgba(0,0,0,.60);
    --shadow-nav:  0 8px 30px rgba(0,0,0,.45);
    --shadow-pill: 0 4px 12px rgba(0,0,0,.50);

    /* Роли — пояснение в светлой палитре. */
    --nav-bar:        rgba(11,11,13,.88);
    --nav-pill:       var(--brand);
    --on-nav-pill:    var(--on-brand);
    --hover-wash:     rgba(255,255,255,.07);
    --btn-primary:    var(--brand);
    --on-btn-primary: var(--on-brand);
    --btn-outline-bg:   var(--surface);
    --btn-outline-line: var(--line);
    --on-plum:        #F7F3F5;
    --on-ink:         #0B0B0D;
    --overlay:        rgba(0,0,0,.66);
    --skeleton:       #1A1A1E;
    --like:           #F2607F;   /* 6.4 на фоне страницы */
    --glass:          rgba(20,20,23,.92);
    --glass-soft:     rgba(16,16,20,.74);
    --action:         var(--brand);
    --action-hover:   var(--brand-deep);
    --brand-surface:  var(--brand-soft);
    --on-surface:     var(--ink);

    /* Фон заставки — тот же, что в светлой палитре, и это НЕ забытая
       строка. Системную заставку телефон красит background_color из
       манифеста, про тему он ничего не знает; сделать тёмной только
       нашу — значит получить вспышку ровно у того, кто выбрал тёмную.
       Записан здесь, а не пропущен, потому что пропущенное имя в тёмной
       палитре — это обычно забытый цвет, и проверка на такие имена
       справедливо краснеет. */
    --splash-bg:      #EFE2DC;
}

/* ==================== 2. БАЗА ==================== */
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--ink-2);
    background-color: var(--surface-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* ---------- Умолчания браузера и бутстрапа ----------

   Отдельный разбор, потому что это другая беда, чем жёстко вписанный
   цвет. Там цвет есть и он не тот; здесь цвета нет вовсе, и его берёт
   браузер или бутстрап — из своих представлений, сложившихся до всяких
   тем.

   ЭЛЕМЕНТЫ ФОРМ. У <button>, <input>, <select> и <textarea> цвет текста
   по умолчанию не наследуется от родителя: браузер подставляет свой
   (чёрный). На светлой теме это сходило с рук — чёрный на белом
   читается. На тёмной обход нашёл кнопки с чёрным текстом на почти
   чёрном фоне: контраст 1.14, то есть надписи не видно вовсе.

   БУТСТРАП. Его .list-group-item, .modal-content, .dropdown-menu,
   .pagination, .table и прочее приходят со своим белым фоном из
   вендорного файла (5.1.3 — там нет ни своей тёмной темы, ни
   data-bs-theme). Переопределить их цвета нашими — не прихоть
   оформления: без этого на тёмной теме остаются белые плиты, и обход
   насчитал их шесть штук на одной странице документов. */
button, input, select, textarea, optgroup {
    color: inherit;
}
input, select, textarea {
    background-color: var(--surface);
    border-color: var(--line);
}
input::placeholder, textarea::placeholder { color: var(--ink-4); opacity: 1; }

.list-group-item,
.modal-content,
.dropdown-menu,
.card,
.accordion-item,
.accordion-button,
.offcanvas,
.toast,
.popover,
.page-link {
    background-color: var(--surface);
    color: var(--ink-2);
    border-color: var(--line);
}
.accordion-button:not(.collapsed) { background-color: var(--surface-3); color: var(--ink); }
.dropdown-item { color: var(--ink-2); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--hover-wash); color: var(--ink); }
.page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.page-item.disabled .page-link { background-color: var(--surface-3); color: var(--ink-3); }
.table { --bs-table-bg: transparent; color: var(--ink-2); border-color: var(--line); }
.table > :not(caption) > * > * { background-color: transparent; color: inherit; }
.form-control, .form-select {
    background-color: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}
.form-control:focus, .form-select:focus {
    background-color: var(--surface);
    color: var(--ink);
    border-color: var(--brand-mid);
}
.form-control::placeholder { color: var(--ink-4); opacity: 1; }
/* Стрелка у <select> нарисована картинкой в самом бутстрапе и на тёмном
   фоне пропадает: там она тёмно-серая. Рисуем её сами градиентом, а не
   подменяем файл: своя копия svg разъехалась бы с их. */
:root[data-theme="dark"] .form-select {
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                      linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
    background-position: calc(100% - 20px) 1.1rem, calc(100% - 15px) 1.1rem;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.form-check-input { background-color: var(--surface); border-color: var(--line); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.input-group-text { background-color: var(--surface-3); color: var(--ink-2); border-color: var(--line); }
.modal-header, .modal-footer { border-color: var(--line); }
hr { border-color: var(--line); opacity: 1; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--line) !important; }
.bg-white { background-color: var(--surface) !important; }
.bg-light { background-color: var(--surface-3) !important; }
.text-muted { color: var(--ink-3) !important; }
.form-text { color: var(--ink-3); }
.text-dark, .text-black { color: var(--ink) !important; }
.text-white { color: var(--on-plum) !important; }

/* Цветные кнопки и метки бутстрапа. Свой цвет текста они приносят с
   собой — белый, — а заливку мы им отдаём из палитры. На светлой теме
   --danger тёмно-красный, и белая надпись на нём читается; на тёмной он
   обязан посветлеть (иначе кнопки не видно на чёрном), и тот же белый
   даёт 2.8. --on-brand — это «текст на цветной заливке, какой бы
   светлой она ни стала». */
.btn-danger, .btn-success, .btn-warning, .btn-info,
.badge.bg-danger, .badge.bg-success, .badge.bg-warning, .badge.bg-info,
.badge.bg-primary, .badge.bg-secondary {
    color: var(--on-brand) !important;
}
.btn-danger  { background-color: var(--danger) !important;  border-color: var(--danger) !important; }
.btn-success { background-color: var(--success) !important; border-color: var(--success) !important; }
.btn-warning { background-color: var(--warning) !important; border-color: var(--warning) !important; }
.btn-info    { background-color: var(--info) !important;    border-color: var(--info) !important; }
.bg-danger  { background-color: var(--danger) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-info    { background-color: var(--info) !important; }
.bg-primary { background-color: var(--brand) !important; }
.bg-secondary { background-color: var(--ink-3) !important; }
.btn-outline-danger  { color: var(--danger) !important;  border-color: var(--danger) !important; background: transparent !important; }
.btn-outline-success { color: var(--success) !important; border-color: var(--success) !important; background: transparent !important; }
.btn-outline-secondary { color: var(--ink-2) !important; border-color: var(--line) !important; background: transparent !important; }
.btn-outline-danger:hover  { background: var(--danger) !important;  color: var(--on-brand) !important; }
.btn-outline-success:hover { background: var(--success) !important; color: var(--on-brand) !important; }
.btn-outline-secondary:hover { background: var(--hover-wash) !important; color: var(--ink) !important; }
.alert-success { background: var(--success-soft); color: var(--ink); border-color: var(--success); }
.alert-danger  { background: var(--danger-soft);  color: var(--ink); border-color: var(--danger); }
.alert-warning { background: var(--warning-soft); color: var(--ink); border-color: var(--warning); }
.alert-info    { background: var(--info-soft);    color: var(--ink); border-color: var(--info); }

/* Поле «только для чтения»: бутстрап красит его своим #212529 — почти
   чёрным. На тёмной теме телефон в профиле становился чёрным по
   чёрному. */
.form-control-plaintext { color: var(--ink) !important; }

/* ---------- Переключатель темы ----------
   Кнопка живёт в четырёх разных шапках, и везде она должна выглядеть
   как соседние пункты, а не как кнопка браузера по умолчанию (серая
   плита — её на тёмной теме обход и нашёл). */
.theme-toggle-form { display: contents; }
.theme-toggle {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
    padding: .35rem .75rem;
    border-radius: var(--r-sm);
}
.theme-toggle:hover { background: var(--hover-wash); color: var(--ink); }
.theme-toggle.dropdown-item { width: 100%; }
/* В полосе кнопка — один значок, и боковые поля у неё меряются по
   значку, а не по подписи: в шапке с девятью вкладками каждый лишний
   пиксель поля отнимается у разделов. Высота нажимаемой области
   остаётся прежней — её задаёт вертикальное поле. */
.theme-toggle-nav { padding: .5rem .45rem; color: var(--ink-2); }
.theme-toggle-nav:hover { color: var(--brand); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.005em;
    text-shadow: none;
    margin-bottom: var(--sp-4);
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: 1.15rem; }
h5, .h5 { font-size: 1rem; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }
h6, .h6 { font-size: .9rem; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }

p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--brand-deep); }

small, .small { font-size: var(--fs-sm); color: var(--ink-3); }
.text-muted { color: var(--ink-3) !important; }
.text-secondary { color: var(--ink-3) !important; }

::selection { background: var(--brand-soft); color: var(--ink); }

hr { border-color: var(--line); opacity: 1; }

/* Заголовок секции: подпись + заголовок, без эмодзи и лишних теней */
.section-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: var(--sp-6);
}
.section-eyebrow {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-mid);
    margin-bottom: var(--sp-2);
}
.section { padding-block: var(--section-y); }

/* Тёплая крем-подложка вместо голого bg-light */
.bg-light { background-color: var(--surface-3) !important; }
.bg-white { background-color: var(--surface) !important; }

/* ==================== 3. НАВИГАЦИЯ ==================== */
.navbar {
    background-color: var(--glass) !important;
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--line);
    padding: 0.85rem 0 !important;
    min-height: 68px;
    box-shadow: none;
}

.navbar-brand {
    font-family: var(--font-display) !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    letter-spacing: 0.01em;
    text-shadow: none !important;
}
.navbar-brand:hover { color: var(--brand) !important; }

.navbar .nav-link {
    font-family: var(--font-sans) !important;
    font-size: 0.9rem !important;
    font-weight: 450;
    color: var(--ink-2) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--r-sm);
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.navbar .nav-link:hover {
    color: var(--brand) !important;
    background-color: transparent;
    transform: none;
}
.navbar .nav-link.active {
    color: var(--ink) !important;
    background-color: transparent;
    font-weight: 600;
    box-shadow: inset 0 -1.5px 0 var(--brand);
    border-radius: 0;
}
/* Иконки в меню — служебные, не украшение */
.navbar .nav-link i,
.navbar .nav-link .bi { color: var(--ink-3); margin-right: .4rem; font-size: .95em; }
.navbar .nav-link:hover i, .navbar .nav-link.active i { color: var(--brand); }

.navbar-toggler { border-color: var(--line); padding: .4rem .6rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--brand-soft); }

/* Кнопка входа */
.login-btn, #selectShopBtn, .user-dropdown {
    font-family: var(--font-sans) !important;
    font-size: .875rem !important;
    color: var(--ink-2) !important;
}
.login-btn {
    background: var(--ink) !important;
    color: var(--on-ink) !important;
    border: 1px solid var(--ink) !important;
    border-radius: var(--r-sm) !important;
    padding: .5rem 1.1rem !important;
    font-weight: 500;
}
.login-btn:hover { background: var(--brand) !important; border-color: var(--brand) !important; color: var(--on-brand) !important; transform: none; }

#selectShopBtn {
    border: 1px solid var(--line) !important;
    background: transparent !important;
    border-radius: var(--r-sm) !important;
    padding: .5rem .85rem !important;
}
#selectShopBtn:hover { border-color: var(--brand-mid) !important; color: var(--brand) !important; }

/* ==================== 4. КНОПКИ ==================== */
.btn {
    font-family: var(--font-sans);
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .005em;
    border-radius: var(--r-sm);
    padding: .65rem 1.35rem;
    border-width: 1px;
    box-shadow: none !important;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover, .btn:focus { transform: none !important; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-soft) !important; }
.btn-sm { padding: .45rem .95rem; font-size: .82rem; }
.btn-lg { padding: .85rem 1.9rem; font-size: 1rem; }

.btn-primary,
.btn-primary-custom {
    background-color: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--on-ink) !important;
}
.btn-primary:hover,
.btn-primary-custom:hover {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: var(--on-brand) !important;
}

.btn-accent {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}
.btn-accent:hover { background-color: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-brand); }

.btn-outline-primary,
.btn-outline-primary-custom,
.btn-outline-dark,
.btn-outline-secondary {
    background-color: transparent !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary-custom:hover,
.btn-outline-dark:hover,
.btn-outline-secondary:hover {
    background-color: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--on-ink) !important;
}

.btn-light { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-dark { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-success { background: var(--success); border-color: var(--success); }

/* Текстовая ссылка-действие вместо ещё одной кнопки */
.btn-link, .link-action {
    padding: 0;
    color: var(--ink);
    font-weight: 500;
    border: 0;
    border-bottom: 1px solid var(--brand-mid);
    border-radius: 0;
    text-decoration: none;
}
.btn-link:hover, .link-action:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* ==================== 5. КАРТОЧКИ ==================== */
.card {
    background: var(--surface);
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md);
    box-shadow: none;
}
.card.shadow, .card.shadow-sm, .card.shadow-lg { box-shadow: var(--shadow-sm) !important; }
.card-title { font-family: var(--font-display); color: var(--ink); font-weight: 500; }
.card-body { padding: var(--sp-5); }

.bouquet-card,
.flower-card,
.accessory-card {
    background: var(--surface);
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md);
    box-shadow: none !important;
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.bouquet-card:hover,
.flower-card:hover,
.accessory-card:hover {
    transform: none !important;
    border-color: var(--brand-mid) !important;
    box-shadow: var(--shadow-md) !important;
}

.bouquet-card .card-img-top,
.flower-card .card-img-top {
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--surface-3);
    transition: transform .5s var(--ease);
}
.bouquet-card:hover .card-img-top { transform: scale(1.02); }

.bouquet-card .card-body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }

.bouquet-card .card-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
    margin-bottom: var(--sp-2);
}
.bouquet-card .card-text.text-muted.small {
    font-size: var(--fs-xs);
    color: var(--ink-3);
    line-height: 1.5;
}

/* Цена — тёмная, с табличными цифрами. Розовые цены не читаются */
.price, .bouquet-price, .card .h3, .card .h4, .card .h5 {
    font-family: var(--font-sans);
    color: var(--ink) !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.price-old, .text-decoration-line-through { color: var(--ink-4) !important; font-weight: 400; }

/* Цвет «нравится» — в палитрах наверху (--like). */

/* Сердечко «в избранное» */
.favorite-btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--ink-2);
    box-shadow: var(--shadow-xs);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.favorite-btn:hover { color: var(--brand); border-color: var(--brand-mid); transform: none; }

/* Отмеченное сердце — красное и залитое.
   Раньше цвет задавался в трёх местах и трёх оттенках: на витрине один,
   в общем стиле другой, на наведении третий и близкий к первому. Отличить
   «нажал» от «не нажал» было трудно, особенно на телефоне, где наведения
   нет вовсе. Теперь один цвет и одно правило на весь сайт. */
.favorite-btn i {
    color: var(--ink-3);
    /* В style.css у сердца были тень и обводка: на светлой карточке оно
       выглядело размытым тёмным пятном, и отличить залитое от контурного
       становилось трудно. Контур должен быть просто контуром. */
    filter: none;
    text-shadow: none;
}
.favorite-btn.active,
.favorite-btn.active i,
.favorite-btn i.bi-heart-fill { color: var(--like); }
.favorite-btn.active { border-color: rgba(224, 36, 94, .35); }

/* На телефоне наведения нет, но браузер оставляет :hover после касания —
   и снятое сердце так и остаётся розоватым, будто оно наполовину отмечено.
   Там, где наводить нечем, состояние наведения не нужно вовсе. */
@media (hover: none) {
    .favorite-btn:hover i { color: var(--ink-3); }
    .favorite-btn:hover { color: var(--ink-2); border-color: var(--line); transform: none; }
    .favorite-btn.active:hover i,
    .favorite-btn:hover i.bi-heart-fill { color: var(--like); }
}

/* ==================== 6. БЕЙДЖИ И ЧИПЫ ==================== */
.badge {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .3rem .6rem;
    border-radius: var(--r-xs);
    background: var(--surface-3);
    color: var(--ink-2);
}
.badge-hit, .badge.bg-warning { background: var(--brand-soft) !important; color: var(--brand-deep) !important; }
.badge-new, .badge.bg-success { background: var(--success-soft) !important; color: var(--success) !important; }
.badge-sale, .badge.bg-danger  { background: var(--danger-soft) !important; color: var(--danger) !important; }
.badge.bg-primary { background: var(--brand-soft) !important; color: var(--brand-deep) !important; }
.badge.bg-secondary { background: var(--surface-3) !important; color: var(--ink-2) !important; }

.chip, .occasion-tag {
    display: inline-block;
    font-size: var(--fs-xs);
    color: var(--ink-2);
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: .3rem .75rem;
    margin: 0 .35rem .35rem 0;
}

/* ==================== 7. ФОРМЫ ==================== */
.form-control, .form-select {
    font-family: var(--font-sans);
    font-size: .925rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: .65rem .9rem;
    box-shadow: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-control::placeholder { color: var(--ink-4); }
.form-control:focus, .form-select:focus {
    border-color: var(--brand-mid);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
}
.form-label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); margin-bottom: .35rem; }
.form-check-input { border-color: var(--line); border-radius: var(--r-xs); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: var(--brand-mid); box-shadow: 0 0 0 3px var(--brand-soft); }
.form-check-label { font-size: .9rem; color: var(--ink-2); }

/* ==================== 8. КАТЕГОРИИ НА ГЛАВНОЙ ==================== */
.category-hero-card {
    height: 380px;
    border-radius: var(--r-md);
    box-shadow: none;
}
.category-hero-card:hover { box-shadow: var(--shadow-md); }
.category-hero-card:hover .category-hero-image { transform: scale(1.03); }

/* Градиент только снизу — фото остаётся фотографией, а не серым пятном */
.category-hero-overlay {
    background: linear-gradient(to top, rgba(20,16,15,.72) 0%, rgba(20,16,15,.34) 38%, rgba(20,16,15,0) 72%) !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    text-align: left !important;
    padding: var(--sp-5) !important;
}
.category-hero-card:hover .category-hero-overlay {
    background: linear-gradient(to top, rgba(20,16,15,.80) 0%, rgba(20,16,15,.40) 38%, rgba(20,16,15,0) 72%) !important;
}
/* Огромная белая иконка поверх фото — главный признак шаблона */
.category-hero-icon, .category-mobile-icon { display: none !important; }

.category-hero-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-shadow: none !important;
    margin-bottom: .25rem;
}
.category-hero-description {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: rgba(255,255,255,.78);
    text-shadow: none !important;
    max-width: 100% !important;
    margin-bottom: var(--sp-3) !important;
}
/* Пилюля-кнопка поверх фото → тонкая ссылка */
.category-hero-btn {
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.45) !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    font-size: var(--fs-sm) !important;
    font-weight: 500;
    opacity: 1 !important;
    padding-bottom: 2px !important;
}
.category-hero-card:hover .category-hero-btn {
    background: transparent !important;
    border-bottom-color: var(--line) !important;
}

.category-mobile-card { border-radius: var(--r-sm); box-shadow: none; border: 1px solid var(--line); }
.category-mobile-overlay {
    background: linear-gradient(to top, rgba(20,16,15,.70) 0%, rgba(20,16,15,.15) 55%, rgba(20,16,15,0) 100%) !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    text-align: left !important;
    padding: var(--sp-3) !important;
}
.category-mobile-title {
    font-family: var(--font-display);
    font-size: .95rem !important;
    font-weight: 500;
    text-shadow: none !important;
    margin-bottom: 0 !important;
}
.category-mobile-btn { display: none !important; }

.category-card { border: 1px solid var(--line); border-radius: var(--r-md); }
.category-card:hover { transform: none; background-color: var(--brand-wash); border-color: var(--brand-mid); box-shadow: none; }
.category-card-icon { color: var(--brand-mid); }

/* ==================== 9. КАРУСЕЛЬ И ПАГИНАЦИЯ ==================== */
.carousel-control-prev-icon, .carousel-control-next-icon { filter: none; }
.carousel-control-prev, .carousel-control-next {
    width: 44px; height: 44px;
    top: 50%; transform: translateY(-50%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    opacity: 1;
    box-shadow: var(--shadow-sm);
}
.carousel-control-prev:hover, .carousel-control-next:hover { border-color: var(--brand-mid); }
.carousel-indicators [data-bs-target] {
    width: 6px; height: 6px; border-radius: var(--r-pill);
    background-color: var(--line);
    border: 0; opacity: 1; margin: 0 4px;
}
.carousel-indicators .active { background-color: var(--brand); }

.pagination .page-link {
    color: var(--ink-2);
    border-color: var(--line);
    border-radius: var(--r-sm);
    margin: 0 2px;
    font-size: .9rem;
}
.pagination .page-item.active .page-link { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.pagination .page-link:hover { background: var(--surface-3); color: var(--ink); }

/* ==================== 10. ФИЛЬТРЫ ==================== */
.filter-sidebar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: none;
    padding: var(--sp-5);
}
.filter-sidebar h5, .filter-sidebar .filter-title {
    font-family: var(--font-sans);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--sp-3);
}
.filter-sidebar .filter-group + .filter-group { border-top: 1px solid var(--line-soft); padding-top: var(--sp-4); margin-top: var(--sp-4); }

/* ==================== 11. СТРАНИЦА ТОВАРА ==================== */
.bouquet-detail .bouquet-title,
.bouquet-detail h1 {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 500;
    color: var(--ink);
    margin-bottom: var(--sp-3);
}
.bouquet-detail .bouquet-price,
.detail-price {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
/* Карточка букета: размер и оплата в одной строке.

   Кнопка стоит по нижнему краю, вровень с кнопками размера, а не по
   середине блока: глаз ведёт по одной линии «M / XL / XXL → Оплатить», и
   выбранный размер виден в момент нажатия. На узком экране строка
   переносится, и кнопка занимает всю ширину — там она последняя, а не
   вторая. */
.detail-buy-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--sp-4);
}
.detail-buy-row .detail-size { flex: 0 0 auto; }

/* Размер букета на телефоне поднимается под название.
   Порядок задаётся стилем, а не разметкой: блок в разметке один, и
   дублей, которые разъезжаются при первой же правке, нет.
   На настольном он остаётся там, где и был по разметке, — прямо над
   кнопкой оплаты. */
.product-info { display: flex; flex-direction: column; }
.product-info .product-title { order: -2; }
@media (max-width: 767.98px) {
    .product-info .detail-size { order: -1; }
}
/* Размер, выбранный сейчас, — подписью на кнопке. */
.detail-buy-size { opacity: .85; font-weight: 600; }
.detail-buy-row .detail-section-label { margin-bottom: var(--sp-2); }
.detail-buy-btn { flex: 1 1 220px; }
@media (max-width: 575.98px) {
    .detail-buy-row { gap: var(--sp-3); }
    .detail-buy-btn { flex: 1 1 100%; }
}

.detail-section-label {
    font-family: var(--font-sans);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--sp-2);
}
.main-image, .bouquet-main-image {
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--surface-3);
}
.thumbnail, .bouquet-thumb {
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    opacity: .8;
    transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.thumbnail:hover, .thumbnail.active, .bouquet-thumb.active { opacity: 1; border-color: var(--brand); }

.size-option, .btn-size {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    border-radius: var(--r-sm);
    padding: .55rem 1.1rem;
    font-size: .9rem;
    font-weight: 500;
}
.size-option.active, .btn-size.active {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--on-ink);
}

/* ==================== 12. ОТЗЫВЫ ==================== */
.review-card, .testimonial-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 1px solid var(--line) !important;
    border-radius: var(--r-md);
    box-shadow: none !important;
    padding: var(--sp-5);
}
.review-card .bi-star-fill, .rating .bi-star-fill, .stars i { color: var(--gold); font-size: .85rem; }
.review-text, .testimonial-text {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-style: normal;
    line-height: 1.6;
    color: var(--ink-2);
}
.review-author { font-family: var(--font-sans); font-size: .875rem; font-weight: 600; color: var(--ink); }
.review-date { font-size: var(--fs-xs); color: var(--ink-4); }

/* ==================== 13. ФУТЕР ==================== */
footer, .footer {
    background-color: var(--surface-3) !important;
    color: var(--ink-2) !important;
    border-top: 1px solid var(--line) !important;
    backdrop-filter: none !important;
    padding: var(--sp-7) 0 var(--sp-5) !important;
    margin-top: var(--section-y) !important;
}
.footer h5 {
    font-family: var(--font-sans);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--sp-3);
}
.footer a { color: var(--ink-2); font-size: .875rem; }
.footer a:hover { color: var(--brand); text-decoration: none; }

/* ==================== 14. ЛЕНТА / МАРАФОН ==================== */
.marquee-container { background: transparent !important; padding-block: var(--sp-5); }
.marquee-wrapper { background: transparent !important; }
.marquee-content img, .marquee-item img { border-radius: var(--r-sm); }

/* ==================== 15. ОБЩИЕ ЗАЧИСТКИ ==================== */
/* Тени Bootstrap по умолчанию слишком грубые */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow    { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-md) !important; }

/* Никаких текстовых теней в контенте */
.card *, .navbar *, .footer *, main * { text-shadow: none; }

/* Никаких подпрыгиваний при наведении */
.card:hover, .btn:hover, .advantage-item:hover, .nav-link:hover { transform: none !important; }

/* Модалки */
.modal-content { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { border-color: var(--line-soft); }
.modal-title { font-family: var(--font-display); font-weight: 500; }

/* Тосты и алерты */
.toast, .alert { border-radius: var(--r-sm); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.alert-success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.alert-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: transparent; }

/* Дропдауны */
.dropdown-menu { border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: .35rem; }
.dropdown-item { border-radius: var(--r-xs); font-size: .9rem; color: var(--ink-2); padding: .5rem .75rem; }
.dropdown-item:hover { background: var(--surface-3); color: var(--ink); }

/* Таблицы */
.table { color: var(--ink-2); }
.table > :not(caption) > * > * { border-color: var(--line-soft); padding: .8rem .75rem; }
.table thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }

/* ==================== 16. МОБИЛЬНОЕ ==================== */
@media (max-width: 767.98px) {
    :root { --section-y: 2.5rem; }
    .card-body { padding: var(--sp-4); }
    .category-hero-card { height: 300px; }
    .filter-sidebar { padding: var(--sp-4); }
    .bouquet-card .card-title { font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==================== 17. ТОЧЕЧНЫЕ ИСПРАВЛЕНИЯ ==================== */

/* Кнопка входа сидит на .nav-link — нужна равная специфичность */
.navbar .nav-link.login-btn {
    background: var(--ink) !important;
    color: var(--on-ink) !important;
    border: 1px solid var(--ink) !important;
    border-radius: var(--r-sm) !important;
    padding: .5rem 1.1rem !important;
    font-weight: 500;
}
.navbar .nav-link.login-btn:hover { background: var(--brand) !important; border-color: var(--brand) !important; color: var(--on-brand) !important; }
.navbar .nav-link.login-btn i { color: var(--on-plum) !important; }

.navbar .nav-link#selectShopBtn,
.navbar #selectShopBtn {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-sm) !important;
    padding: .5rem .85rem !important;
    color: var(--ink-2) !important;
}

/* Читаемость подписи поверх светлых фотографий категорий */
.category-hero-overlay {
    background: linear-gradient(to top, rgba(18,14,13,.85) 0%, rgba(18,14,13,.55) 30%, rgba(18,14,13,.12) 62%, rgba(18,14,13,0) 100%) !important;
}
.category-mobile-overlay {
    background: linear-gradient(to top, rgba(18,14,13,.85) 0%, rgba(18,14,13,.35) 50%, rgba(18,14,13,0) 100%) !important;
}

/* Шаги «как собрать букет» */
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--r-pill);
    background: transparent;
    border: 1px solid var(--brand-mid);
    color: var(--brand);
    font-family: var(--font-sans);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    flex-shrink: 0;
}

/* Цена в карточках и каруселях */
.price, span.h3.price {
    font-family: var(--font-sans) !important;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ink) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
}

/* Отзывы: убираем толстую цветную полосу сверху */
.review-card, .testimonial-card, .review-card.h-100 {
    border-top-width: 1px !important;
    border-top-color: var(--line) !important;
}
.review-card::before, .testimonial-card::before { display: none !important; }

/* Блок «как создать букет» — крем вместо серого, воздух */
.bg-light.rounded { border-radius: var(--r-md) !important; background: var(--surface-3) !important; }

/* Марафон-лента: спокойная, без «парения» плиток */
.marquee-container { padding-block: var(--sp-6) !important; }
.marquee-item {
    width: 300px !important;
    height: 375px !important;          /* тот же кадр 4:5, что и в карточках */
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
}
.marquee-item:hover { transform: none !important; box-shadow: var(--shadow-md) !important; }
.marquee-item:hover img { transform: scale(1.03); }
.marquee-content { gap: var(--sp-4) !important; }
@media (max-width: 768px) {
    .marquee-item { width: 190px !important; height: 238px !important; }
}

/* Лента: убираем розовый градиент-подложку */
.marquee-container { background: var(--surface-2) !important; }

/* ==================== 18. ШАПКА СТРАНИЦЫ ====================
 *
 * Одна шапка на весь сайт. До этого их было четыре: на одних страницах
 * заголовок в 45 px по центру, на других — 28 px слева, на третьих —
 * 61 px с собственным шрифтом; отступ сверху гулял от нуля до 114 px.
 * Разницы никто не задумывал — просто каждая страница заводила заголовок
 * заново.
 *
 * Правила здесь три, и все три про одно: чтобы страница начиналась с
 * дела, а не с пустоты.
 *
 * `.profile-header` описан вместе с `.page-head` не для красоты: так
 * заголовки кабинета выглядят как заголовки остального сайта, и при этом
 * десяток шаблонов кабинета трогать не пришлось.
 */
.page-head,
.profile-header {
    text-align: center;
    /* Строка длиннее 46rem читается тяжело, а подзаголовок во всю ширину
       экрана — это две строки глазами и четыре по ощущению. */
    max-width: 46rem;
    margin: 0 auto var(--sp-6);
    /* Кабинетная шапка приносила с собой рамку снизу и свои отступы. */
    padding-bottom: 0;
    border-bottom: 0;
}
.page-title,
.profile-title,
.profile-content h1 {
    font-family: var(--font-display);
    /* Размер тот же, что у заголовка раздела. Первый экран — не место для
       самой крупной надписи сайта: под ней всё равно ничего не помещается. */
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 var(--sp-2);
}
.page-subtitle,
.profile-subtitle {
    color: var(--ink-3);
    font-size: var(--fs-sm);
    margin: 0 auto;
    max-width: 42rem;
}
.page-head .section-eyebrow { text-align: center; }
/* Иконку-«наклейку» перед заголовком снимает общее правило ниже (раздел
   «завершающий слой»), и это сознательно: значок перед каждым названием
   страницы превращает шапку в ряд картинок. В шаблонах иконки остались —
   они ничего не стоят и пригодятся, если решение переменится. */
/* Действие страницы — под заголовком и по центру, а не сбоку от него:
   кнопка справа от центрированного заголовка сдвигает его влево, и на
   каждой странице по-своему. */
.page-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: center;
    margin-top: var(--sp-4);
}

/* Первый блок страницы. Обычная секция отбивается сверху так же, как
   снизу, — между двумя блоками это правильно, а под шапкой сайта даёт
   88 px пустоты до первой буквы. Поэтому отступ сверху задаёт шапка, а
   обёртка его не добавляет: иначе на каждой странице он свой, смотря
   какую утилиту Bootstrap приписали к контейнеру.

   `!important` здесь не по лени: у утилит Bootstrap (.py-4 и прочих) он
   стоит в самой библиотеке, и без него правило не действует. */
.main-content > .section:first-child,
.main-content > .container.section:first-child { padding-top: 0; }
.main-content > .container.py-4:first-child,
.main-content > .container.py-5:first-child { padding-top: 0 !important; }
.page-head:first-child,
.profile-header:first-child { margin-top: var(--sp-5); }

/* Узкая страница с одним сообщением: оплата, возврат, короткий ответ. */
.page-narrow { max-width: 46rem; margin-inline: auto; }
.section-tight { padding-block: var(--sp-6) var(--sp-5); }

/* ==================== 19. КАТАЛОГ: ФИЛЬТРЫ ==================== */
.filter-card {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
}
.filter-card:hover { box-shadow: none !important; transform: none !important; }
.filter-header {
    background: transparent !important;
    border-bottom: 1px solid var(--line-soft) !important;
    padding: var(--sp-4) var(--sp-5) !important;
}
.filter-header h5 {
    font-family: var(--font-sans) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3) !important;
    margin: 0 !important;
}
.filter-header h5 i { color: var(--ink-4) !important; }
.filter-body { padding: var(--sp-5) !important; }
.filter-section + .filter-section { border-top: 1px solid var(--line-soft); padding-top: var(--sp-4); margin-top: var(--sp-4); }
.filter-section-title {
    font-family: var(--font-sans) !important;
    font-size: .74rem !important;
    font-weight: 600 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3) !important;
    margin-bottom: var(--sp-3) !important;
}
.filter-section-title i { color: var(--ink-4) !important; }
.filter-option { font-size: .9rem; color: var(--ink-2); }
.filter-option:hover { background: transparent !important; color: var(--ink) !important; }
.filter-option input:checked + span { color: var(--brand); font-weight: 500; }

.btn-apply {
    background: var(--ink) !important;
    color: var(--on-ink) !important;
    border: 1px solid var(--ink) !important;
    border-radius: var(--r-sm) !important;
    padding: .65rem 1.35rem !important;
    font-family: var(--font-sans);
    font-size: .9rem; font-weight: 500;
    box-shadow: none !important;
}
.btn-apply:hover { background: var(--brand) !important; border-color: var(--brand) !important; transform: none !important; box-shadow: none !important; }
.btn-reset {
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-sm) !important;
    padding: .65rem 1.35rem !important;
    font-family: var(--font-sans);
    font-size: .9rem; font-weight: 500;
    box-shadow: none !important;
}
.btn-reset:hover { background: var(--surface-3) !important; border-color: var(--ink-4) !important; transform: none !important; }

/* Сетка каталога: карточки одной высоты, ровные промежутки */
#bouquets-container { row-gap: var(--sp-5); }

/* ==================== 20. СТРАНИЦА ТОВАРА ==================== */
.product-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-bottom: var(--sp-4);
}
.product-info { padding: 0 0 0 var(--sp-6); border: 0; background: transparent; }
.product-media { border: 1px solid var(--line) !important; border-radius: var(--r-md) !important; box-shadow: none !important; }
.product-media img { border-radius: var(--r-md) !important; }

.detail-price {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.detail-icon { color: var(--ink-4) !important; font-size: .95rem; }
.delivery-icon { color: var(--brand-mid); font-size: 1.35rem; display: inline-block; margin-bottom: .35rem; }

.thumbnail-img { border-radius: var(--r-sm); border: 1px solid var(--line); opacity: .75; transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.thumbnail-wrapper.active .thumbnail-img, .thumbnail-img:hover { opacity: 1; border-color: var(--ink); }

/* Кнопки размера */
.size-option, .size-btn {
    border: 1px solid var(--line) !important;
    background: var(--surface) !important;
    color: var(--ink-2) !important;
    border-radius: var(--r-sm) !important;
    padding: .55rem 1.2rem !important;
    font-weight: 500;
    box-shadow: none !important;
}
.size-option + .size-option, .size-btn + .size-btn { margin-left: -1px; }
.size-option.active, .size-btn.active {
    border-color: var(--ink) !important;
    background: var(--ink) !important;
    color: var(--on-ink) !important;
    z-index: 1;
}

/* Блок доставки под кнопкой */
.product-info .bg-light.rounded { background: var(--surface-3) !important; border-radius: var(--r-md) !important; padding: var(--sp-5) !important; }
.product-info .bg-light.rounded p { color: var(--ink-2); font-size: var(--fs-xs); margin: 0; line-height: 1.45; }

@media (max-width: 991.98px) {
    .product-info { padding-left: 0; margin-top: var(--sp-6); }
}

/* Шапка формы отзыва */
.card-header.bg-primary-custom {
    background: var(--surface-3) !important;
    border-bottom: 1px solid var(--line) !important;
}
.card-header.bg-primary-custom h5 { color: var(--ink) !important; font-family: var(--font-sans); font-size: .95rem; }
.bg-primary-custom { background: var(--surface-3) !important; color: var(--ink) !important; }

/* ==================== 21. ФИНАЛЬНАЯ ПОЛИРОВКА ==================== */

/* .filter-sidebar — это колонка сетки, а не карточка: рамка рисуется у .filter-card */
.col-lg-3.filter-sidebar,
.filter-sidebar {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-left: calc(var(--bs-gutter-x) * .5) !important;
    padding-right: calc(var(--bs-gutter-x) * .5) !important;
}

/* Активная миниатюра — тёмная рамка, не розовая */
.thumbnail-wrapper.active,
.thumbnail-wrapper.active .thumbnail-img {
    border-color: var(--ink) !important;
    outline: none !important;
    box-shadow: none !important;
}
.thumbnail-wrapper { border-radius: var(--r-sm); overflow: hidden; }

/* Вертикальный ритм на странице товара */
.product-info > .mt-3 { margin-top: var(--sp-5) !important; }
.product-info > .mt-4 { margin-top: var(--sp-6) !important; }
.product-info .detail-section-label { margin-top: 0; }
.product-info p { color: var(--ink-2); }
.product-info #composition-text { font-size: .95rem; }

/* Кнопка «в корзину» — основное действие страницы */
#add-to-cart { padding: .9rem 1.5rem !important; font-size: .95rem !important; }

/* Цена без копеек выглядит дороже; выравниваем со старой ценой по базовой линии */
.price-old { text-decoration: line-through; color: var(--ink-4) !important; margin-right: .5rem; }

/* Пустая карточка-заглушка вместо серого прямоугольника */
.card-img-top.bg-light { aspect-ratio: 4 / 5; background: var(--surface-3) !important; }
.card-img-top.bg-light i { color: var(--line) !important; }

/* Мобильное нижнее меню */
.mobile-menu, .mobile-bottom-nav {
    background: var(--glass) !important;
    border-top: 1px solid var(--line) !important;
    box-shadow: none !important;
    backdrop-filter: saturate(140%) blur(10px);
}
.mobile-menu a, .mobile-bottom-nav a { color: var(--ink-3) !important; }
/* Активная вкладка — брендовая, как и задумано в style.css.
   Здесь стояло `color: var(--ink) !important`, и оно перебивало тот
   цвет: на тёмной теме низ экрана становился одинаково серым, и
   понять, в каком ты разделе, было нельзя. Два правила об одном и том
   же, и побеждало то, что с `!important`. */
.mobile-menu a.active, .mobile-bottom-nav a.active { color: var(--brand) !important; }
.mobile-menu a.active i, .mobile-bottom-nav a.active i { color: var(--brand) !important; }

/* Заголовки внутри контента без ручных отступов Bootstrap */
.section-title + .row, .section-title + .carousel { margin-top: var(--sp-2); }

/* Ссылки в тексте политики/футере — не рябить брендовым цветом */
.cookie-consent a, .modal-body a { color: var(--ink); border-bottom: 1px solid var(--brand-mid); }
.cookie-consent a:hover, .modal-body a:hover { color: var(--brand); }

/* ==================== 22. КОНСТРУКТОР И СЛУЖЕБНЫЕ БЛОКИ ==================== */

/* Предупреждения: не «дорожный знак», а спокойная плашка */
.alert-warning {
    background: var(--surface-3) !important;
    color: var(--ink-2) !important;
    border: 1px solid var(--line) !important;
    border-left: 2px solid var(--gold) !important;
    border-radius: var(--r-sm) !important;
    font-size: .9rem;
}
.alert-warning i, .alert-warning .bi { color: var(--gold) !important; }
.alert-info {
    background: var(--brand-wash) !important;
    color: var(--ink-2) !important;
    border: 1px solid var(--line) !important;
    border-left: 2px solid var(--brand-mid) !important;
}

/* Чипы быстрого выбора в конструкторе */
.quick-filter, .quick-tag, .filter-chip {
    border-radius: var(--r-pill) !important;
    border: 1px solid var(--line) !important;
    background: var(--surface) !important;
    color: var(--ink-2) !important;
    font-size: var(--fs-xs) !important;
    font-weight: 500;
    padding: .35rem .8rem !important;
    box-shadow: none !important;
}
.quick-filter.active, .quick-tag.active, .filter-chip.active {
    background: var(--ink) !important; border-color: var(--ink) !important; color: var(--on-ink) !important;
}

/* Корзина-сайдбар в конструкторе */
.cart-sidebar, .selected-flowers, .bouquet-summary {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
}
.cart-sidebar .card-header, .bouquet-summary .card-header {
    background: var(--surface-3) !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--ink) !important;
}

/* Иконки-заголовки страниц: тонкие и приглушённые, а не «наклейки» */
h1 > i, h1 > .bi, .page-title > i { color: var(--brand-mid) !important; font-size: .8em; margin-right: .35rem; }

/* Плитки преимуществ (о нас, доставка) */
.advantage-item, .feature-card, .team-card {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
}
.advantage-item:hover, .feature-card:hover, .team-card:hover {
    background: var(--surface) !important;
    border-color: var(--brand-mid) !important;
    box-shadow: var(--shadow-sm) !important;
}
.feature-icon, .advantage-icon, .team-avatar {
    background: var(--brand-soft) !important;
    color: var(--brand) !important;
    box-shadow: none !important;
}

/* Чат-виджет */
.chat-widget-button, .chat-toggle {
    background: var(--ink) !important;
    box-shadow: var(--shadow-md) !important;
    border: 0 !important;
}
.chat-widget-button:hover, .chat-toggle:hover { background: var(--brand) !important; transform: none !important; }

/* Легаси-классы без определений: text-pink и родня раньше просто не работали.
   Даём им осмысленное поведение вместо случайного. */
.text-pink { color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.bg-pink { background: var(--brand-soft) !important; color: var(--ink) !important; }
.border-pink { border-color: var(--brand-mid) !important; }

/* =============================================================
   23. РОЛЕВЫЕ ТОКЕНЫ
   Одна переменная не может быть одновременно текстом и заливкой.
   Роза читается как текст на светлом и как мелкая метка,
   но крупная плоскость того же цвета превращается в тяжёлую плиту.
   ============================================================= */
/* Эти роли выражены через палитру и потому переключаются вместе с ней:
   объявлены они один раз, наверху. */

/* ==================== 24. МОДАЛКА АВТОРИЗАЦИИ ==================== */
/* Было: три разных пилюли с тенями, «плавающие» друг над другом.
   Стало: один сегментный переключатель + один текстовый. */
#authModal .modal-content, .auth-modal .modal-content {
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-2);
}
.auth-modal .modal-body, #authModal .modal-body { padding: var(--sp-6) var(--sp-6) var(--sp-7); }

/* Сегментный переключатель «Пользователь / Компания» */
.modal .nav-tabs, .auth-type-switch {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--surface-3) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-sm) !important;
    margin-bottom: var(--sp-5);
}
.modal .nav-tabs .nav-link, .auth-type-switch .nav-link {
    border: 0 !important;
    border-radius: calc(var(--r-sm) - 2px) !important;
    padding: .5rem 1.1rem !important;
    font-family: var(--font-sans) !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    color: var(--ink-3) !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal .nav-tabs .nav-link:hover { color: var(--ink) !important; background: transparent !important; }
.modal .nav-tabs .nav-link.active, .auth-type-switch .nav-link.active {
    background: var(--surface) !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow-xs) !important;
    border: 1px solid var(--line) !important;
}
.modal .nav-tabs .nav-link i { color: currentColor !important; margin-right: .35rem; }

/* «Вход / Регистрация» — текстовые вкладки с подчёркиванием, не пилюли */
.auth-mode-switch, .login-register-switch { display: inline-flex; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.auth-mode-switch a, .auth-mode-switch button,
.login-register-switch a, .login-register-switch button {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: .25rem 0 .5rem !important;
    font-family: var(--font-sans) !important;
    font-size: .95rem !important;
    font-weight: 500 !important;
    color: var(--ink-3) !important;
}
.auth-mode-switch .active, .login-register-switch .active {
    color: var(--ink) !important;
    box-shadow: inset 0 -1.5px 0 var(--ink) !important;
    background: transparent !important;
}

/* Кнопка «Получить код» — во всю ширину, прямоугольная */
#authModal .btn, .auth-modal .btn {
    border-radius: var(--r-sm) !important;
    box-shadow: none !important;
    font-weight: 500;
}
#authModal .btn-primary-custom, .auth-modal .btn-primary-custom,
#getCodeBtn, #authModal button[type="submit"] {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--on-ink) !important;
    padding: .85rem 1.5rem !important;
}
#authModal .btn-primary-custom:hover, #getCodeBtn:hover { background: var(--brand) !important; border-color: var(--brand) !important; }
#authModal .form-control { border-radius: var(--r-sm) !important; padding: .75rem .9rem !important; }
#authModal .form-label { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
#authModal .btn-close { opacity: .5; }
#authModal .btn-close:hover { opacity: 1; }

/* ==================== 25. ЛИЧНЫЙ КАБИНЕТ ==================== */
/* Бордовая плита в сайдбаре -> светлая карточка с волосяной линией */
.profile-user-card {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--ink) !important;
    padding: var(--sp-6) var(--sp-5) var(--sp-5) !important;
}
.profile-user-card .profile-username {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--ink) !important;
    margin-bottom: .2rem;
}
.profile-user-card .profile-email { font-size: .82rem; color: var(--ink-3) !important; margin-bottom: var(--sp-3); }
.profile-user-card .profile-avatar img,
.profile-user-card .avatar-initials {
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    box-shadow: none;
}
.profile-verified {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--success-soft) !important;
    color: var(--success) !important;
    border: 0 !important;
    border-radius: var(--r-pill);
    padding: .25rem .7rem;
    font-size: var(--fs-xs);
    font-weight: 500;
}

.profile-sidebar {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: none;
}
.profile-info-card { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: var(--sp-5) !important; margin-bottom: 0 !important; }
.profile-info-card h5 { font-family: var(--font-sans); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.profile-info-card h5 i { color: var(--ink-4); }
.btn-link-custom { font-size: .8rem; color: var(--ink) !important; border-bottom: 1px solid var(--brand-mid); padding-bottom: 1px; }
.btn-link-custom:hover { color: var(--brand) !important; border-bottom-color: var(--brand); }

/* Бейджи приходят цветами из БД — приглушаем их до ряда сдержанных медалей.
   Правило только для сайдбара: в публичном профиле бейджи показываются
   полноразмерными пилюлями, и сжимать их там не нужно. */
.profile-sidebar .badge-item, .profile-sidebar .badge-more {
    width: 30px !important; height: 30px !important;
    border-radius: var(--r-pill) !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    font-size: .8rem !important;
    filter: saturate(.5) brightness(.98);
    box-shadow: inset 0 0 0 1px rgba(34,30,29,.08);
    border: 0 !important;
}
.badge-more { background: var(--surface-3) !important; color: var(--ink-3) !important; filter: none; font-size: .7rem !important; font-weight: 600; }

.profile-menu-title {
    font-family: var(--font-sans);
    font-size: .72rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-4);
    padding: var(--sp-5) var(--sp-5) var(--sp-2);
}
.profile-menu-item {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem var(--sp-5) !important;
    font-size: .92rem;
    color: var(--ink-2) !important;
    border: 0 !important;
    border-left: 2px solid transparent !important;
    background: transparent !important;
    border-radius: 0 !important;
}
.profile-menu-item i { color: var(--ink-4); font-size: 1rem; width: 1.1rem; }
.profile-menu-item:hover { background: var(--surface-2) !important; color: var(--ink) !important; }
.profile-menu-item.active {
    background: var(--brand-wash) !important;
    color: var(--ink) !important;
    font-weight: 500;
    border-left-color: var(--brand) !important;
    border-right: 0 !important;
}
.profile-menu-item.active i { color: var(--brand); }

/* Заголовки кабинета. Размер и отступы им задаёт общая шапка страницы
   (раздел 18) — здесь остаются только шрифт и цвет для тех заголовков
   внутри кабинета, что шапкой не являются: «Обязательные согласия» и
   прочие подзаголовки карточек. */
.profile-content h2 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink);
}
.btn-eye {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm) !important;
    background: transparent !important;
    border: 1px solid var(--line) !important;
    color: var(--ink-3) !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.btn-eye:hover, .btn-eye.active { background: var(--surface-3) !important; color: var(--ink) !important; border-color: var(--ink-4) !important; }

/* Подписи полей профиля */
.profile-field-label, .info-label {
    font-family: var(--font-sans);
    font-size: .7rem; font-weight: 600;
    letter-spacing: .11em; text-transform: uppercase;
    color: var(--ink-4);
}
.profile-field-value, .info-value { font-size: .95rem; color: var(--ink); font-weight: 450; }

/* ==================== 26. ОБЩЕНИЕ / ПОДБОР ==================== */
/* Кнопки подбора теперь стилизуются в самом компоненте (user_chat_list.html):
   они лежат поверх фото, поэтому им нужна «стеклянная» подача, а не обычная. */

.chat-tabs { border-bottom: 1px solid var(--line); gap: var(--sp-4); }
.chat-tabs .nav-link {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ink-3) !important;
    font-size: .92rem;
    font-weight: 500;
    padding: .6rem 0 !important;
}
.chat-tabs .nav-link i { color: var(--ink-4) !important; }
.chat-tabs .nav-link.active {
    background: transparent !important;
    color: var(--ink) !important;
    box-shadow: inset 0 -1.5px 0 var(--ink) !important;
}
.chat-tabs .nav-link.active i { color: var(--brand) !important; }

/* Карточка без аватара — тёплая заглушка, а не цветная плита */
.user-card.no-avatar, .single-user-card .card-image.no-avatar {
    background: var(--surface-3) !important;
    display: flex; align-items: center; justify-content: center;
}
.user-card.no-avatar::after, .single-user-card .card-image.no-avatar::after {
    content: '\F4E1';
    font-family: 'bootstrap-icons';
    font-size: 2.5rem;
    color: var(--line);
}
.user-card { border-radius: var(--r-md); border: 1px solid var(--line); box-shadow: none; }
.user-card:hover { box-shadow: var(--shadow-md); transform: none; }

/* ==================== 27. ПОЛЯ ФОРМ ==================== */
/* Пилюли-инпуты — самый заметный «дешёвый» признак после цвета */
input[type="text"].form-control, input[type="search"].form-control,
input[type="tel"].form-control, input[type="email"].form-control,
input[type="password"].form-control, input[type="number"].form-control,
select.form-select, textarea.form-control,
.search-panel input, .search-panel select,
.filter-search .form-control {
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
}
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group > .input-group-text:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-color: var(--line) !important; background: var(--surface) !important; color: var(--ink-4) !important; }
.form-switch .form-check-input { border-radius: var(--r-pill) !important; }
/* Синяя системная рамка фокуса ломает палитру */
*:focus, *:focus-visible { outline-color: var(--brand-mid) !important; }
.dropdown-toggle:focus, .nav-link:focus, .btn:focus { outline: none !important; box-shadow: 0 0 0 3px var(--brand-soft) !important; }

/* ==================== 28. КОНСТРУКТОР ==================== */
/* Шапка «Ваш букет» шире тела карточки — рассинхрон вложенности */
.cart-sidebar, .bouquet-summary, .selected-flowers-wrapper {
    overflow: hidden;
    background: var(--surface) !important;
}
.cart-header {
    background: var(--surface-3) !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: var(--sp-4) var(--sp-5) !important;
    font-family: var(--font-sans);
    font-size: .82rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
}
.cart-header i { color: var(--ink-4) !important; }
.cart-body, .cart-sidebar .card-body { border-radius: 0 !important; box-shadow: none !important; }

/* Квадратные «+» -> одна пара с общей рамкой */
.quantity-btn, .btn-add, .flower-card .add-to-bouquet {
    border-radius: var(--r-sm) !important;
    box-shadow: none !important;
}
.flower-card .add-to-bouquet { background: var(--ink) !important; color: var(--on-ink) !important; border: 1px solid var(--ink) !important; }
.flower-card .add-to-bouquet:hover { background: var(--brand) !important; border-color: var(--brand) !important; transform: none !important; }

/* Цена за штуку — графит, как везде */
.flower-price, .flower-card .price, .price-per-unit { color: var(--ink) !important; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Скроллбары внутри панелей — тонкие и нейтральные */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line) !important; border-radius: var(--r-pill); }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4) !important; }

/* ==================== 29. ВЛОЖЕННОСТЬ ==================== */
/* Карточка в карточке в карточке — убираем вторую и третью рамку */
.card .card, .profile-info-card .card, .filter-card .card {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.card > .card-header:first-child { border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md); }

/* ==================== 30. ЗАВЕРШАЮЩИЙ СЛОЙ ==================== */

/* Заголовок раздела с действием справа жил здесь до того, как шапка
   стала одна на весь сайт (раздел 18). Ни один шаблон его больше не
   использует: действие у шапки теперь под заголовком, по центру. */

/* Сегментный переключатель — один паттерн на весь сайт */
.segmented {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--surface-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.segmented-item {
    border: 1px solid transparent !important;
    border-radius: calc(var(--r-sm) - 2px) !important;
    padding: .5rem 1.25rem !important;
    font-family: var(--font-sans) !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    color: var(--ink-3) !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented-item:hover { color: var(--ink) !important; }
.segmented-item.active {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow-xs) !important;
}

.auth-head { text-align: center; margin-bottom: var(--sp-6); }
.auth-title {
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 500;
    color: var(--ink);
    margin-bottom: var(--sp-4);
}

/* Вкладки внутри модалки и на «Общении» — Inter, не Playfair */
.modal .nav-tabs .nav-link,
.chat-tabs .nav-link,
.nav-tabs .nav-link { font-family: var(--font-sans) !important; }

/* Панель поиска: прямоугольные поля вместо пилюль */
.search-panel input, .search-panel select, .search-panel textarea,
.search-panel .form-control, .search-panel .form-select,
.filter-search input, .filter-sidebar input, .filter-card input, .filter-card select {
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
    font-size: .9rem;
}
.search-panel label, .search-panel .form-label {
    font-family: var(--font-sans);
    font-size: .7rem; font-weight: 600;
    letter-spacing: .11em; text-transform: uppercase;
    color: var(--ink-4);
    margin-bottom: .3rem;
}
.search-panel h5, .search-panel .panel-title {
    font-family: var(--font-sans) !important;
    font-size: .78rem !important; font-weight: 600 !important;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3) !important;
}
.search-panel h5 i, .search-panel .panel-title i { color: var(--ink-4) !important; }
.search-panel .btn-reset, .search-panel #resetBtn { border-radius: var(--r-sm) !important; }

/* Пустые состояния: приглушённая иконка, не брендовое пятно */
.empty-state i, .no-results i, .empty-icon {
    color: var(--line) !important;
    font-size: 2.5rem !important;
}
.empty-state p, .no-results p { color: var(--ink-3); font-size: .95rem; }

/* Чипы быстрого выбора — нейтральные, активный тёмный */
.quick-filter-badge {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink-2) !important;
    border-radius: var(--r-pill) !important;
    font-size: var(--fs-xs) !important;
    padding: .35rem .85rem !important;
    box-shadow: none !important;
}
.quick-filter-badge:hover { border-color: var(--ink-4) !important; color: var(--ink) !important; }
.quick-filter-badge.active, .quick-filter-badge:has(input:checked) {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--on-ink) !important;
}

/* Иконки-«наклейки» в заголовках страниц: снимаем везде */
h1 > i.bi:first-child, h2 > i.bi:first-child,
.section-title > i.bi:first-child, .page-title > i.bi:first-child { display: none !important; }

/* Блок достижений: заголовок и ссылка в одну строку */
.profile-info-card .d-flex.justify-content-between h5 { white-space: nowrap; margin-right: var(--sp-3); }
.profile-info-card .btn-link-custom { white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }
.profile-info-card .btn-link-custom i { font-size: .75rem; }
.badges-container { gap: .4rem !important; }

/* Цена за штуку в списке цветов */
.card-text.price { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; color: var(--ink) !important; font-variant-numeric: tabular-nums; }

/* Шапка корзины во всю ширину карточки */
.cart-card { overflow: hidden; }
.cart-card > .cart-header:first-child { margin: 0; border-radius: 0; }
.cart-card .cart-header h5 {
    font-family: var(--font-sans) !important;
    font-size: .78rem !important; font-weight: 600 !important;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3) !important;
}
.cart-card .cart-header h5 i { color: var(--ink-4) !important; }

/* ==================== 31. ТОЧНАЯ ДОВОДКА ==================== */

/* Панель поиска собеседника */
.search-sidebar {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
    padding: var(--sp-5) !important;
}
.search-title {
    font-family: var(--font-sans) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3) !important;
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--line-soft);
}
.search-title i { display: none !important; }
.search-input, .search-input-group .search-input {
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--line) !important;
    background: var(--surface) !important;
    padding: .65rem .9rem !important;
    font-size: .9rem !important;
    box-shadow: none !important;
}
.search-input:focus { border-color: var(--brand-mid) !important; box-shadow: 0 0 0 3px var(--brand-soft) !important; }
.filter-label {
    font-family: var(--font-sans);
    font-size: .68rem !important;
    font-weight: 600 !important;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ink-4) !important;
    margin-bottom: .3rem !important;
}
.search-filters .form-select, .search-filters .form-control, .search-filters input {
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
}
#clearFiltersBtn {
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--line) !important;
    background: transparent !important;
    color: var(--ink-2) !important;
}
#clearFiltersBtn:hover { background: var(--surface-3) !important; border-color: var(--ink-4) !important; color: var(--ink) !important; }
#searchBtn { width: 100%; padding: .8rem 1.5rem !important; }

/* Заглушка пустого результата */
#searchPlaceholder i { color: var(--line) !important; opacity: 1 !important; font-size: 2.5rem !important; }
#searchPlaceholder p { color: var(--ink-3); }

/* «Вход / Регистрация» — текстовые вкладки, чтобы не дублировать сегментный блок сверху */
.modal .nav-tabs {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: var(--sp-5) !important;
    justify-content: center;
    margin-bottom: var(--sp-5) !important;
}
.modal .nav-tabs .nav-link {
    padding: .5rem 0 .7rem !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.modal .nav-tabs .nav-link.active {
    background: transparent !important;
    border: 0 !important;
    color: var(--ink) !important;
    box-shadow: inset 0 -1.5px 0 var(--ink) !important;
}
#authModal .modal-body { padding-top: 0 !important; }
.auth-head { margin-bottom: var(--sp-5); }

/* Иконки-наклейки в подзаголовках блоков */
.profile-content h4 > i.bi:first-child,
.profile-content h5 > i.bi:first-child,
.profile-content h6 > i.bi:first-child,
.card-body > h5 > i.bi:first-child { display: none !important; }

/* Внутренности карточки корзины без вложенных скруглений */
.cart-card > *:not(.cart-header) { border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
.cart-empty, .cart-items { padding: var(--sp-6) var(--sp-5) !important; }
.cart-empty i, .cart-items > .text-center i { color: var(--line) !important; font-size: 2rem !important; }

/* Иконка чата: тёмный круг без брендового пятна */
.chat-widget-button i, .chat-toggle i { color: var(--on-plum) !important; }

/* Легаси-подписи, заданные напрямую серым */
.profile-menu-title, .empty-cart-text, small, .small,
.text-muted, .card-text.text-muted { color: var(--ink-3) !important; }
.filter-label, .profile-field-label, .info-label, .detail-section-label,
.section-eyebrow { color: var(--ink-4) !important; }
/* Надзаголовок секции — брендовый, но читаемый */
.section-eyebrow { color: var(--brand) !important; opacity: .85; }

/* ==================== 32. ПОРЯДОК НАЛОЖЕНИЯ ==================== */
/* backdrop-filter на шапке создаёт контекст наложения: без явного z-index
   выпадающее меню пользователя уходит под контент страницы. */
.navbar {
    position: relative;
    z-index: 1040;
}
.navbar .dropdown-menu, .user-dropdown-menu { z-index: 1050; }
.navbar .dropdown { position: relative; }

/* Никакого z-index на контейнерах: он создаёт контекст наложения,
   из которого модалка не может подняться над своим затемнением. */

/* Шкала слоёв: контент < шапка < затемнение < модалка */
.modal-backdrop { z-index: 1055 !important; }
.modal          { z-index: 1060 !important; }

/* Карточка подбора: кнопки живут внутри фото, наружу не выходят */
.single-user-card .action-buttons > .btn { margin: 0 !important; }
.single-user-card .action-buttons .btn:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.6) !important; }

/* ==================== 33. ОКНО «ПОДАРИТЬ БУКЕТ» ==================== */
#giftModal .modal-content { padding: var(--sp-2); }
#giftModal .modal-header { display: block; padding: var(--sp-5) var(--sp-5) var(--sp-3); position: relative; }
#giftModal .modal-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--ink); margin: 0; }
#giftModal .modal-subtitle { font-size: var(--fs-sm); color: var(--ink-3); margin: .25rem 0 0; }
#giftModal .btn-close { position: absolute; top: var(--sp-5); right: var(--sp-5); }
#giftModal .modal-body { padding: var(--sp-3) var(--sp-5) var(--sp-5); max-height: 70vh; overflow-y: auto; }

.gift-state {
    width: 100%;
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    color: var(--ink-3);
    font-size: .95rem;
}

.gift-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gift-card:hover { border-color: var(--brand-mid); box-shadow: var(--shadow-sm); }
.gift-card-media {
    aspect-ratio: 4 / 5;
    background: var(--surface-3);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.gift-card-media img { width: 100%; height: 100%; object-fit: cover; }
.gift-card-media i { font-size: 1.8rem; color: var(--line); }
.gift-card-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.gift-card-name {
    font-family: var(--font-display);
    font-size: .95rem;
    color: var(--ink);
    line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gift-card-price {
    font-size: .95rem; font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.gift-card .choose-bouquet {
    margin-top: auto;
    width: 100%;
    background: var(--ink) !important;
    border: 1px solid var(--ink) !important;
    color: var(--on-ink) !important;
    border-radius: var(--r-sm) !important;
    padding: .45rem .8rem !important;
    font-size: .82rem;
    font-weight: 500;
}
.gift-card .choose-bouquet:hover { background: var(--brand) !important; border-color: var(--brand) !important; }
.gift-card .choose-bouquet:disabled { opacity: .6; }

/* =============================================================
   34. ФОРМА КОМПОНЕНТОВ ПО РЕФЕРЕНСУ
   Палитра и шрифты уже в токенах выше. Здесь — геометрия:
   пилюли вместо прямоугольников, крупные скругления, плавающая
   шапка-таблетка, тёмные сливовые кнопки.
   ============================================================= */
/* Цвета этого раздела — в палитрах наверху (--plum, --nav-glass,
   --shadow-nav, --shadow-pill). Здесь они стояли вторым объявлением, и
   тёмная тема переключала палитру, а эти значения оставались светлыми:
   шапка и кнопки продолжали быть сливовыми на чёрном. */

/* ---------- Типографика ---------- */
h1, .h1, .page-title, .product-title {
    letter-spacing: -0.05em;
    font-weight: 500;
}
h2, .h2, .section-title { letter-spacing: -0.03em; font-weight: 500; }
h3, .h3 { letter-spacing: -0.02em; }
/* Выделенная фраза в заголовке — курсив брендовым цветом */
h1 em, .h1 em, .title-accent {
    font-style: italic;
    color: var(--brand);
    font-weight: 500;
}
.section-eyebrow {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--brand) !important;
    opacity: 1;
}

/* ---------- Шапка: плавающая таблетка ---------- */
.navbar {
    background: var(--nav-bar) !important;
    border-bottom: 0 !important;
    min-height: 80px;
    padding: .75rem 0 !important;
}
.navbar .navbar-nav.mx-auto {
    background: var(--nav-glass);
    border: 1px solid rgba(62,38,48,.09);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-nav);
    padding: 5px;
    gap: 2px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.navbar .navbar-nav.mx-auto .nav-link {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 15px !important;
    border-radius: var(--r-pill) !important;
    font-size: .875rem !important;
    font-weight: 700 !important;
    color: var(--ink-3) !important;
    box-shadow: none !important;
    white-space: nowrap;
}
.navbar .navbar-nav.mx-auto .nav-link:hover { color: var(--ink) !important; background: rgba(62,38,48,.05) !important; }
.navbar .navbar-nav.mx-auto .nav-link.active {
    background: var(--plum-deep) !important;
    color: var(--on-plum) !important;
    box-shadow: var(--shadow-pill) !important;
    border-radius: var(--r-pill) !important;
}
.navbar .navbar-nav.mx-auto .nav-link.active i { color: var(--on-plum) !important; }
.navbar-brand { font-weight: 600 !important; letter-spacing: -0.02em; }

/* Правая группа: белые пилюли */
.navbar .nav-link.login-btn,
.navbar #selectShopBtn,
.navbar .user-dropdown {
    height: 40px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--r-pill) !important;
    font-size: .8rem !important;
    font-weight: 800 !important;
    padding: 0 14px !important;
}
.navbar #selectShopBtn {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--brand) !important;
}
.navbar #selectShopBtn:hover { border-color: var(--brand-mid) !important; }
/* Цвет текста задаётся здесь же, где заливка. Раньше заливку ставило
   это правило, а цвет — другое, выше: на тёмной теме получилось почти
   чёрное по почти чёрному. */
.navbar .nav-link.login-btn {
    background: var(--plum-action) !important;
    border-color: var(--plum-action) !important;
    color: var(--on-plum) !important;
    box-shadow: var(--shadow-pill) !important;
}
.navbar .nav-link.login-btn:hover { background: var(--brand) !important; border-color: var(--brand) !important; }

/* ---------- Кнопки: пилюли ---------- */
.btn, .btn-apply, .btn-reset, .btn-primary-custom, .btn-outline-primary-custom {
    border-radius: var(--r-pill) !important;
    font-weight: 700;
    letter-spacing: .01em;
}
.btn-primary, .btn-primary-custom, .btn-apply, .login-btn, #add-to-cart, #searchBtn {
    background: var(--plum-action) !important;
    border-color: var(--plum-action) !important;
    color: var(--on-plum) !important;
}
.btn-primary:hover, .btn-primary-custom:hover, .btn-apply:hover, #add-to-cart:hover, #searchBtn:hover {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: var(--on-brand) !important;
}
.btn-outline-primary, .btn-outline-dark, .btn-outline-secondary, .btn-reset {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--brand) !important;
    font-weight: 700;
}
.btn-outline-primary:hover, .btn-outline-dark:hover, .btn-outline-secondary:hover, .btn-reset:hover {
    background: var(--brand-soft) !important;
    border-color: var(--brand-mid) !important;
    color: var(--brand-deep) !important;
}
.btn-sm { font-size: .75rem; font-weight: 800; padding: .45rem 1rem; }

/* ---------- Карточки: крупный радиус ---------- */
.card, .bouquet-card, .flower-card, .accessory-card,
.filter-card, .search-sidebar, .profile-sidebar, .single-user-card,
.review-card, .testimonial-card, .cart-card, .gift-card, .chat-history {
    border-radius: var(--r-md) !important;
}
.bouquet-card .card-title, .gift-card-name, .card-title {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.01em;
}
.card-body { padding: 17px; }

/* ---------- Бейджи: белые пилюли поверх фото ---------- */
.badge {
    border-radius: var(--r-pill);
    font-size: .625rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: none;
    padding: .45rem .65rem;
}
.badge-hit, .badge.bg-warning,
.badge-new, .badge.bg-success,
.badge-sale, .badge.bg-danger,
.badge.bg-primary {
    background: var(--glass) !important;
    color: var(--brand) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* ---------- Поля ввода ---------- */
.form-control, .form-select, .search-input,
input[type="text"].form-control, input[type="search"].form-control,
input[type="tel"].form-control, input[type="email"].form-control,
input[type="number"].form-control, textarea.form-control {
    border-radius: 13px !important;
    border: 1px solid var(--line) !important;
    font-size: .875rem !important;
    padding: .6rem .8rem !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}
.form-control:focus, .form-select:focus, .search-input:focus {
    border-color: var(--brand-mid) !important;
    box-shadow: 0 0 0 3px var(--brand-soft) !important;
}

/* ---------- Тёмная сливовая секция ---------- */
.section-dark {
    background: var(--plum);
    color: var(--on-plum);
    padding-block: 78px;
    /* Отступы по бокам. Тёмная полоса — это плашка со скруглёнными углами,
       а не край страницы: её содержимое начиналось вплотную к краю, и на
       «Трёх шагах» текст выглядел приклеенным слева. Вложенный .container
       тут не спасает — его отступ съедают отрицательные поля .row. */
    padding-inline: clamp(20px, 3vw, 48px);
}
.section-dark, .section-dark * { color: var(--on-plum); }
.section-dark .text-muted, .section-dark p, .section-dark small, .section-dark .small {
    color: rgba(255,255,255,.75) !important;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h5,
.section-dark .section-title { color: var(--on-plum) !important; }
.section-dark .step-number { border-color: rgba(255,255,255,.4); color: var(--on-plum); }
.section-dark .btn-primary, .section-dark .btn-primary-custom, .section-dark .btn {
    background: var(--surface) !important; border-color: var(--line) !important; color: var(--plum) !important;
}
.section-dark.rounded, .section-dark { border-radius: var(--r-md); }

/* Светлая плашка остаётся светлой — .bg-light используется и на других
   страницах. Тёмная полоса включается явным классом .section-dark. */
.bg-light.rounded { border-radius: var(--r-md) !important; }

/* ---------- Футер ---------- */
footer, .footer { background: var(--surface-3) !important; border-top: 1px solid var(--line) !important; }

/* ---------- Мелочи ---------- */
.chip, .occasion-tag, .quick-filter-badge { border-radius: var(--r-pill) !important; font-weight: 700; }
.modal-content { border-radius: var(--r-lg) !important; }
.dropdown-menu { border-radius: var(--r-md); }
.category-hero-card, .category-mobile-card, .marquee-item { border-radius: var(--r-md) !important; }
.pagination .page-link { border-radius: var(--r-pill); }
.segmented, .segmented-item { border-radius: var(--r-pill) !important; }

/* Подписи на тонированной подложке: серый на розовом даёт 4.3:1 */
.profile-referral .text-muted, .profile-referral label, .profile-referral small,
.bg-accent .text-muted { color: var(--brand-deep) !important; }
.profile-referral { border-color: var(--brand-mid) !important; border-radius: var(--r-sm) !important; }

/* ==================== 35. СТРОКА ЗАКАЗА ==================== */
/* Раньше строка была обычным div без ссылки — клик никуда не вёл.
   Теперь основная часть строки это <a>, а кнопки действий лежат
   рядом с ним, а не внутри: вложенные интерактивные элементы
   ломают клавиатурную навигацию. */
.order-item {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.order-item + .order-item { margin-top: var(--sp-3); }
.order-item:hover {
    background: var(--surface) !important;
    transform: none !important;
    border-color: var(--brand-mid) !important;
    box-shadow: var(--shadow-sm) !important;
}

.order-open {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    color: inherit;
    text-decoration: none;
    min-width: 0;
}
.order-open:hover { color: inherit; }
.order-open:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--brand-mid);
    border-radius: var(--r-md);
}
.order-open .order-info { flex: 1; min-width: 0; }
.order-number {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .15rem;
}
.order-date { font-size: var(--fs-xs); color: var(--ink-3); }
.order-date i { color: var(--ink-4); margin-right: .25rem; }
.order-amount {
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin-top: .25rem;
}
.order-open-chevron { color: var(--ink-4); font-size: .9rem; flex-shrink: 0; }
.order-item:hover .order-open-chevron { color: var(--brand); }

.order-actions { padding-right: var(--sp-5); flex-shrink: 0; }

@media (max-width: 575.98px) {
    .order-item { flex-wrap: nowrap !important; }
    .order-open { flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-4); }
    .order-open .order-info { width: auto; }
    .order-open-chevron { display: none; }
    .order-actions { padding-right: var(--sp-4); }
}

/* ==================== 36. МОБИЛЬНАЯ СЕТКА: ДВЕ КАРТОЧКИ В РЯД ==================== */
@media (max-width: 767.98px) {
    /* Промежутки уже, иначе на 360px карточкам не остаётся места */
    #bouquets-container, .equal-height-row { --bs-gutter-x: .75rem; row-gap: .75rem; }

    .bouquet-card .card-body,
    .flower-card .card-body { padding: .7rem .65rem .8rem; }

    .bouquet-card .card-title,
    .flower-card .card-title {
        font-size: .85rem;
        line-height: 1.25;
        margin-bottom: .3rem;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .bouquet-card .card-text.text-muted.small,
    .flower-card .card-text.text-muted.small {
        font-size: .7rem;
        line-height: 1.35;
        margin-bottom: .5rem;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .bouquet-card .price, .flower-card .price,
    .bouquet-card .h5.price { font-size: .95rem; }

    /* Цена и кнопка не помещаются в строку на половине ширины — ставим друг под друга */
    .bouquet-card .card-body > .d-flex.justify-content-between {
        flex-direction: column;
        align-items: stretch !important;
        gap: .45rem;
    }
    .bouquet-card .card-body > .d-flex.justify-content-between .btn {
        width: 100%;
        padding: .4rem .6rem;
        font-size: .72rem;
    }

    /* Конструктор: поле количества и «плюс» в одну строку без переноса */
    .flower-card .card-body > .d-flex.align-items-center {
        gap: .4rem !important;
        flex-wrap: nowrap;
    }
    .flower-card .quantity-input { width: 48px !important; flex: 0 0 48px; font-size: .8rem; padding: .25rem .2rem !important; }
    .flower-card .add-to-bouquet { width: 32px !important; height: 32px !important; font-size: 1rem !important; flex: 0 0 32px; }

    /* Бейджи поверх фото мельче, чтобы не закрывать снимок */
    .bouquet-card .badge { font-size: .55rem; padding: .3rem .45rem; }
    .bouquet-card .favorite-btn, .flower-card .favorite-btn { width: 30px; height: 30px; }

    /* Кадр фото одинаковый у всех карточек ряда */
    .flower-card .card-img-top { aspect-ratio: 4 / 5; height: auto !important; object-fit: cover; }
}

/* Совсем узкие экраны: сохраняем два столбца, ужимая содержимое */
@media (max-width: 380px) {
    #bouquets-container, .equal-height-row { --bs-gutter-x: .5rem; }
    .bouquet-card .card-body, .flower-card .card-body { padding: .55rem .5rem .65rem; }
    .bouquet-card .card-title, .flower-card .card-title { font-size: .8rem; }
    .flower-card .quantity-input { width: 42px !important; flex: 0 0 42px; }
}

/* ==================== 37. ЗНАКОМСТВА: ВОЗРАСТ, РАССТОЯНИЕ, «КТО РЯДОМ» ==================== */
.user-headline {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;                 /* иначе между именем и запятой появляется пробел */
    font-family: var(--font-display);
    font-weight: 500;
    margin-bottom: .35rem;
}
.user-age { font-weight: 400; color: var(--ink-2); }
.user-distance {
    margin-left: .5rem;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--brand-deep);
    background: var(--brand-soft);
    border-radius: var(--r-pill);
    padding: .2rem .6rem;
    white-space: nowrap;
}
.user-distance[hidden] { display: none !important; }

.nearby-options { display: flex; flex-wrap: wrap; gap: .35rem; }
.nearby-chip {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    border-radius: var(--r-pill);
    padding: .32rem .7rem;
    font-family: var(--font-sans);
    font-size: .74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nearby-chip:hover { border-color: var(--ink-4); color: var(--ink); }
.nearby-chip.active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--on-ink);
}
.nearby-note {
    margin: .5rem 0 0;
    font-size: .72rem;
    line-height: 1.4;
    color: var(--ink-3);
}
.nearby-note[hidden] { display: none !important; }

/* Пол — значком рядом с возрастом */
.user-gender {
    display: inline-flex;
    align-items: center;
    margin-left: .4rem;
    font-size: .95rem;
    line-height: 1;
}
.user-gender[hidden] { display: none !important; }
.user-gender.is-female { color: var(--brand-mid); }
.user-gender.is-male   { color: var(--info); }

/* ==================== 38. ПРЕДЛОЖЕНИЕ ПОДАРКА В ЧАТЕ ==================== */
.gift-offer {
    background: var(--surface);
    border: 1px solid var(--brand-mid);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.gift-offer-main { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.gift-offer-media {
    width: 64px; height: 80px; flex-shrink: 0;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-3);
    display: flex; align-items: center; justify-content: center;
}
.gift-offer-media img { width: 100%; height: 100%; object-fit: cover; }
.gift-offer-media i { font-size: 1.4rem; color: var(--line); }
.gift-offer-text { flex: 1; min-width: 0; }
.gift-offer-label {
    display: block;
    font-family: var(--font-sans);
    font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: .2rem;
}
.gift-offer-name {
    font-family: var(--font-display);
    font-size: 1.1rem; font-weight: 500;
    color: var(--ink);
    margin: 0 0 .15rem;
}
.gift-offer-price { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.gift-offer-actions { display: flex; gap: .5rem; flex-shrink: 0; }

.gift-offer .btn { border-radius: var(--r-pill); font-size: .82rem; font-weight: 700; padding: .5rem 1.1rem; }
.gift-accept, .gift-submit {
    background: var(--plum-action); border: 1px solid var(--plum-action); color: var(--on-plum);
}
.gift-accept:hover, .gift-submit:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.gift-decline, .gift-cancel {
    background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
}
.gift-decline:hover, .gift-cancel:hover { border-color: var(--ink-4); color: var(--ink); }

.gift-offer-address { margin-top: var(--sp-4); border-top: 1px solid var(--line-soft); padding-top: var(--sp-4); }
.gift-offer-address[hidden] { display: none !important; }
.gift-offer-address textarea { margin-bottom: .5rem; }
.gift-offer-hint {
    display: flex; align-items: flex-start; gap: .4rem;
    font-size: .75rem; line-height: 1.4;
    color: var(--ink-3);
    margin: 0 0 var(--sp-3);
}
.gift-offer-hint i { color: var(--brand-mid); margin-top: .12rem; }
.gift-offer-confirm { display: flex; gap: .5rem; justify-content: flex-end; }
.gift-offer-error {
    margin: var(--sp-3) 0 0;
    font-size: .8rem;
    color: var(--danger);
}
.gift-offer-error[hidden] { display: none !important; }
.gift-offer-done { margin: 0; font-size: .9rem; color: var(--ink-2); }

@media (max-width: 575.98px) {
    .gift-offer-actions { width: 100%; }
    .gift-offer-actions .btn { flex: 1; }
}

/* ==================== 39. ОПЛАТА ПОДАРКА И ЗАКАЗЫ ФЛОРИСТА ==================== */
.gift-offer-pay { border-color: var(--line); }

.gift-pay-wrap { max-width: 640px; }
.gift-pay-card {
    display: flex; gap: var(--sp-5); flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
}
.gift-pay-media {
    width: 140px; aspect-ratio: 4/5; flex-shrink: 0;
    border-radius: var(--r-sm); overflow: hidden;
    background: var(--surface-3);
    display: flex; align-items: center; justify-content: center;
}
.gift-pay-media img { width: 100%; height: 100%; object-fit: cover; }
.gift-pay-media i { font-size: 2rem; color: var(--line); }
.gift-pay-body { flex: 1; min-width: 220px; }
.gift-pay-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; margin: 0 0 .3rem; }
.gift-pay-to { font-size: .9rem; color: var(--ink-3); margin: 0 0 var(--sp-3); }
.gift-pay-price { font-size: 1.6rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: var(--sp-4); }
.gift-pay-note {
    display: flex; gap: .45rem; align-items: flex-start;
    font-size: .78rem; line-height: 1.45; color: var(--ink-3);
    margin: 0 0 var(--sp-4);
}
.gift-pay-note i { color: var(--brand-mid); margin-top: .1rem; }
.gift-pay-btn {
    width: 100%;
    background: var(--plum-action) !important; border: 1px solid var(--plum-action) !important;
    color: var(--on-plum) !important; border-radius: var(--r-pill) !important;
    padding: .8rem 1.4rem !important; font-weight: 700;
}
.gift-pay-btn:hover { background: var(--brand) !important; border-color: var(--brand) !important; }
.gift-pay-btn:disabled { opacity: .6; }
.gift-pay-error { margin: var(--sp-3) 0 0; font-size: .82rem; color: var(--danger); }
.gift-pay-error[hidden] { display: none !important; }
.gift-pay-done { margin: 0; font-size: .95rem; color: var(--success); display: flex; align-items: center; gap: .4rem; }

.gift-orders-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--sp-5); }
.gift-orders-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--line); background: var(--surface);
    border-radius: var(--r-pill); padding: .4rem .9rem;
    font-size: .82rem; font-weight: 600; color: var(--ink-2);
}
.gift-orders-tab:hover { border-color: var(--ink-4); color: var(--ink); }
.gift-orders-tab.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.gift-orders-count { font-size: .72rem; opacity: .7; font-variant-numeric: tabular-nums; }

.gift-orders-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.gift-order {
    display: flex; gap: var(--sp-4);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: var(--sp-4);
}
.gift-order-media {
    width: 84px; aspect-ratio: 4/5; flex-shrink: 0;
    border-radius: var(--r-sm); overflow: hidden; background: var(--surface-3);
    display: flex; align-items: center; justify-content: center;
}
.gift-order-media img { width: 100%; height: 100%; object-fit: cover; }
.gift-order-media i { font-size: 1.3rem; color: var(--line); }
.gift-order-main { flex: 1; min-width: 0; }
.gift-order-top { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.gift-order-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; margin: 0; }
.gift-order-status {
    font-size: .68rem; font-weight: 800; letter-spacing: .04em;
    border-radius: var(--r-pill); padding: .22rem .6rem;
    background: var(--surface-3); color: var(--ink-2);
}
.gift-order-status.status-paid { background: var(--success-soft); color: var(--success); }
.gift-order-status.status-declined { background: var(--danger-soft); color: var(--danger); }
.gift-order-status.status-accepted { background: var(--brand-soft); color: var(--brand-deep); }
.gift-order-price { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; margin: .2rem 0 var(--sp-3); }
.gift-order-facts { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin: 0 0 var(--sp-3); }
.gift-order-facts dt {
    font-size: .66rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-4); margin-bottom: .1rem;
}
.gift-order-facts dd { margin: 0; font-size: .88rem; color: var(--ink); }
.gift-order-phone { display: block; font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gift-order-address {
    background: var(--brand-soft); border-radius: var(--r-sm);
    padding: var(--sp-3);
}
.gift-order-address-label {
    display: block; font-size: .66rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep);
    margin-bottom: .25rem;
}
.gift-order-address p { margin: 0; font-size: .9rem; color: var(--ink); }
.gift-order-noaddress { margin: 0; font-size: .82rem; color: var(--ink-3); font-style: italic; }

@media (max-width: 575.98px) {
    .gift-order { flex-direction: column; }
    .gift-order-media { width: 100%; aspect-ratio: 16/9; }
}

/* ==================== 40. ЗАГРУЗКА СОТРУДНИКОВ СПИСКОМ ==================== */
.import-hint { font-size: .85rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 var(--sp-3); }
.import-cols { margin: 0 0 var(--sp-4); padding-left: 1.1rem; }
.import-cols li { font-size: .82rem; line-height: 1.55; color: var(--ink-3); margin-bottom: .2rem; }
.import-cols span { font-weight: 700; color: var(--ink); }
.import-template-link {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-top: var(--sp-3);
    font-size: .82rem; font-weight: 600;
    color: var(--brand);
    border-bottom: 1px solid var(--brand-mid);
    padding-bottom: 1px;
}
.import-template-link:hover { color: var(--brand-deep); }

.import-messages { display: flex; flex-direction: column; gap: .4rem; }
.import-message {
    border-radius: var(--r-sm);
    padding: .6rem .9rem;
    font-size: .85rem;
    background: var(--surface-3);
    color: var(--ink-2);
    border-left: 2px solid var(--line);
}
.import-message.success { background: var(--success-soft); color: var(--success); border-left-color: var(--success); }
.import-message.warning { background: var(--surface-3); color: var(--ink-2); border-left-color: var(--gold); }
.import-message.error   { background: var(--danger-soft);  color: var(--danger);  border-left-color: var(--danger); }

/* Уведомление сотруднику, чей аккаунт завела компания */
#companyNoticeModal .notice-lead { font-size: .95rem; line-height: 1.6; color: var(--ink); margin: 0 0 var(--sp-3); }
#companyNoticeModal .notice-sub { font-size: .85rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 var(--sp-3); }
#companyNoticeModal .notice-list { margin: 0 0 var(--sp-4); padding-left: 1.1rem; }
#companyNoticeModal .notice-list li { font-size: .85rem; line-height: 1.6; color: var(--ink-2); }

/* ==================== 41. ВХОДЯЩИЕ ПРЕДЛОЖЕНИЯ ПОДАРКОВ ==================== */
.gift-inbox {
    background: var(--surface);
    border: 1px solid var(--brand-mid);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: var(--sp-4);
}
.gift-inbox-header {
    display: flex; align-items: center; gap: .5rem;
    padding: var(--sp-4) var(--sp-5);
    background: var(--brand-soft);
    font-family: var(--font-sans);
    font-size: .78rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--brand-deep);
    border-bottom: 1px solid var(--line);
}
.gift-inbox-count {
    margin-left: auto;
    background: var(--brand); color: var(--on-brand);
    border-radius: var(--r-pill);
    padding: .1rem .5rem;
    font-size: .72rem; letter-spacing: 0;
}
.gift-inbox-item {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    color: inherit; text-decoration: none;
    transition: background-color var(--dur) var(--ease);
}
.gift-inbox-item + .gift-inbox-item { border-top: 1px solid var(--line-soft); }
.gift-inbox-item:hover { background: var(--surface-2); color: inherit; }
.gift-inbox-media {
    width: 48px; height: 60px; flex-shrink: 0;
    border-radius: var(--r-sm); overflow: hidden;
    background: var(--surface-3);
    display: flex; align-items: center; justify-content: center;
}
.gift-inbox-media img { width: 100%; height: 100%; object-fit: cover; }
.gift-inbox-media i { color: var(--line); }
.gift-inbox-text { flex: 1; min-width: 0; }
.gift-inbox-name { font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.gift-inbox-from { font-size: var(--fs-xs); color: var(--ink-3); }
.gift-inbox-price { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gift-inbox-cta {
    background: var(--plum-action); color: var(--on-plum);
    border-radius: var(--r-pill);
    padding: .4rem .9rem;
    font-size: .78rem; font-weight: 700;
    white-space: nowrap; flex-shrink: 0;
}
@media (max-width: 575.98px) {
    .gift-inbox-item { flex-wrap: wrap; }
    .gift-inbox-cta { width: 100%; text-align: center; }
}

/* Ссылка «Оплатить» внутри сообщения чата */
.chat-pay-link {
    display: inline-block;
    margin-top: .35rem;
    padding: .25rem .8rem;
    background: var(--plum-action);
    color: var(--on-plum) !important;
    border-radius: var(--r-pill);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}
.chat-pay-link:hover { background: var(--brand); color: var(--on-brand) !important; }

/* Ссылки, которые человек прислал сам.

   Адрес внешнего сайта остаётся надписью — по ссылке в чате должно быть
   видно, куда она ведёт. Ссылка на наш сбор показывается его названием:
   название берётся из базы, а не из сообщения, подставить своё нельзя.

   overflow-wrap: длинный адрес без пробелов иначе растягивает пузырь
   сообщения на всю ширину и ломает разметку переписки. */
.chat-link {
    color: var(--plum-action);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}
.chat-link:hover { color: var(--brand); }

.chat-wallet-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .55rem;
    background: rgba(168, 69, 107, .10);
    border-radius: var(--r-pill);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.chat-wallet-link:hover { background: rgba(168, 69, 107, .18); text-decoration: none; }
.chat-wallet-link i { font-size: .95em; }

.message-owner .chat-link,
.message-owner .chat-wallet-link { color: var(--on-plum); }
.message-owner .chat-wallet-link { background: rgba(255, 255, 255, .22); }
.message-owner .chat-wallet-link:hover { background: rgba(255, 255, 255, .32); }

/* ===== Аватарка в профиле =========================================== */
/* Круглая аватарка в 80 px показывала лицо размером с кнопку: в боковой
   колонке она терялась между именем и почтой, а на самой странице профиля
   занимала четверть отведённого под неё места. Делаем крупнее и квадратной
   со скруглением — так же, как выглядят карточки букетов и анкеты, и так же
   кадрируются загруженные фотографии.

   Правила стоят здесь, а не в style.css, потому что этот файл подключается
   последним: иначе прежние `border-radius: 50%` перебивали бы новые.

   Скругление задано числом, а не переменной --r-lg: та равна 24 px и на
   квадрате в 120 px читается почти как круг — то есть ровно то, от чего
   уходим. */
.profile-sidebar .profile-avatar,
.profile-user-card .profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 16px;
    overflow: hidden;
}
.profile-user-card .profile-avatar img,
.profile-user-card .avatar-initials,
.profile-sidebar .avatar-initials {
    width: 120px !important;
    height: 120px !important;
    border-radius: 16px !important;
    object-fit: cover;
}
.profile-sidebar .avatar-initials { font-size: 2.6rem !important; }

.profile-avatar-large {
    width: 160px;
    height: 160px;
    border-radius: 16px;
}
.profile-avatar-large img {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
}
.profile-avatar-large i { font-size: 5rem; }

/* На узком экране колонка сужается, и 160 px занимают половину экрана. */
@media (max-width: 575.98px) {
    .profile-avatar-large { width: 132px; height: 132px; }
    .profile-avatar-large i { font-size: 4rem; }
}

/* Колокольчик со счётчиком. Счётчик рисуется здесь, а не общим стилем
   значков: тот рассчитан на подпись внутри строки и даёт отступы по
   десять пикселей со светлой подложкой. Положенный поверх иконки, такой
   значок закрывал её целиком — в шапке оставалась белая пилюля с цифрой,
   и «колокольчик пропал».

   Поэтому счётчик маленький, круглый, тёмный и сдвинут за край иконки:
   он должен сообщать число, а не заменять собой значок. */
.navbar .nav-bell { position: relative; }
.navbar .nav-bell i { font-size: 1.05rem; }
.nav-bell-count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--brand, var(--brand));
    color: var(--on-brand);
    font-size: .65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    /* Обводка отделяет счётчик от иконки, на которую он налезает углом. */
    box-shadow: 0 0 0 2px var(--surface, #fff);
}

/* ===== Шапка: меню в одну строку =================================== */
/* Вкладок в меню бывает по-разному: сейчас семь, было девять, а «Букеты»,
   «Собрать» и «Рулетка» лежат в шаблоне закомментированными и однажды
   вернутся. Поэтому правила ниже не рассчитаны на конкретное число: они
   поджимают то, что поджать можно, и только там, где места правда мало.

   Поджимается при этом ровно одно — отступы между вкладками в середине.
   Правая группа — колокольчик, магазин, вход, имя — не сжимается: это
   кнопки, а кнопка в семь пикселей шириной перестаёт быть кнопкой. Раньше
   здесь пропадала подпись у магазина и значки у вкладок; и то и другое
   человек замечает как поломку, а не как заботу о месте.

   Ниже 1200 px меню целиком уезжает под кнопку (navbar-expand-xl в
   base.html), и поджимать уже нечего. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
    .navbar .navbar-nav.mx-auto .nav-link { padding: 0.5rem 0.5rem !important; }
    .navbar .navbar-nav.mx-auto .nav-link i,
    .navbar .navbar-nav.mx-auto .nav-link .bi { margin-right: .25rem; }
}
@media (min-width: 1200px) and (max-width: 1379.98px) {
    .navbar .navbar-nav.mx-auto .nav-link { padding: 0.5rem 0.35rem !important; font-size: 0.85rem !important; }
    /* Имя рядом с аватаркой: аватарка и так показывает, кто вошёл, а
       кнопкам справа место нужнее. */
    .navbar .user-dropdown .user-name { display: none !important; }
}

/* Ступень между ними: 1200–1280, где и стало тесно.
   Мерить запас суммой ширин, как это делает проверка, — обманчиво:
   середина полосы выровнена по центру (mx-auto), и свободное место
   живёт не по краям, а в двух промежутках между группами. На 1200 px
   правый промежуток был −20 px (строка уезжала за край) при «запасе»
   в тридцать с лишним. Поэтому мерить надо промежуток, а убирать —
   то, без чего раздел всё равно находят.

   Значки у вкладок здесь гаснут — те же, что гаснут ступенью ниже, и
   по той же причине: подпись называет раздел, значок его украшает.
   Семь значков с отступами — это около ста двадцати пикселей, то есть
   весь недостающий запас и ещё столько же сверху. Выше 1280 px они
   на месте. */
@media (min-width: 1200px) and (max-width: 1279.98px) {
    .navbar .navbar-nav.mx-auto .nav-link i,
    .navbar .navbar-nav.mx-auto .nav-link .bi { display: none; }
}

/* Последняя ступень — и включается она не от ширины, а от числа вкладок.
   Семь вкладок помещаются в 1200 px со всеми подписями и значками, девять
   — нет: строка уезжала за край на сотню пикселей. Раньше из-за этого
   жались все, включая тех, у кого места хватало.

   `:has()` здесь по делу: правило должно срабатывать, когда вкладок стало
   больше, а не когда экран стал уже. Вернут «О нас» и «Контакты» — оно
   включится само; уберут — само и выключится. */
@media (min-width: 1200px) and (max-width: 1319.98px) {
    .navbar .navbar-nav.mx-auto:has(> :nth-child(8)) .nav-link {
        padding: 0.5rem 0.15rem !important;
        font-size: 0.78rem !important;
    }
    /* Значки у вкладок — украшение, подписи — нет: по ним находят раздел. */
    .navbar .navbar-nav.mx-auto:has(> :nth-child(8)) .nav-link i,
    .navbar .navbar-nav.mx-auto:has(> :nth-child(8)) .nav-link .bi { display: none; }
    .navbar:has(.navbar-nav.mx-auto > :nth-child(8)) .brand-logo { height: 26px; }
    .navbar:has(.navbar-nav.mx-auto > :nth-child(8)) .user-dropdown .user-name {
        display: none !important;
    }
}

/* ==================== 42. КАРТОЧКА ЧЕЛОВЕКА В БОКОВОЙ КОЛОНКЕ ==================== */
/* Снимок во всю ширину колонки вместо квадрата в 120 px, а имя, почта и
   отметки о подтверждении — на самом снимке.

   Зачем: до этого колонка начиналась с маленького фото, под которым шли
   три строки текста и зелёная плашка «Телефон подтверждён». Плашка
   стояла вплотную к первому пункту меню и читалась как его часть, а
   само лицо было размером с кнопку. Снимок — то, ради чего в эту
   карточку смотрят; текст на нём места не занимает.

   Правила идут после раздела «Аватарка в профиле» выше: те задают
   квадрат 120 px и перебили бы эти, стой они раньше. */
.profile-sidebar .profile-user-card {
    padding: 0 !important;
    border-bottom: 1px solid var(--line) !important;
}
.profile-sidebar .profile-photo {
    position: relative;
    width: 100%;
    /* Портрет: у вертикальной пропорции лицо занимает больше кадра, чем
       у квадрата, а колонка узкая — по ширине запас всё равно мал. */
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--surface-2, var(--surface-3));
}
.profile-sidebar .profile-photo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-sidebar .profile-photo-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
    color: var(--on-brand);
    font-family: var(--font-display);
    font-size: 3.4rem;
    font-weight: 500;
}
/* Подписи лежат на снимке, на затемнении. Затемнение — градиент, а не
   сплошная заливка: сплошная отрезала бы низ фотографии полосой. */
.profile-sidebar .profile-photo-facts {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 2.2rem 1rem .9rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 12%, rgba(0, 0, 0, 0));
}
.profile-sidebar .profile-photo-facts .profile-username {
    color: var(--on-plum) !important;
    margin-bottom: .1rem;
    font-size: 1.1rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-sidebar .profile-photo-facts .profile-email {
    color: rgba(255, 255, 255, .8) !important;
    font-size: .78rem;
    margin-bottom: .5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-sidebar .profile-photo-marks {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.profile-sidebar .profile-mark {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .18rem .55rem;
    border-radius: var(--r-pill);
    background: var(--glass);
    color: var(--success);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.4;
}
.profile-sidebar .profile-mark i { font-size: .72rem; }

/* --- Свёрнутая карточка на телефоне ---------------------------------- */
/* Строка со стрелочкой вместо снимка. На широком экране её нет вовсе:
   там колонка стоит сбоку и прокручивать нечего. */
.profile-hero-toggle { display: none; }

@media (max-width: 991.98px) {
    .profile-hero-toggle {
        display: flex;
        align-items: center;
        gap: .6rem;
        width: 100%;
        padding: .7rem 1rem;
        border: 0;
        border-bottom: 1px solid var(--line);
        background: none;
        text-align: left;
        cursor: pointer;
        font-size: .95rem;
        font-weight: 600;
        color: var(--ink);
    }
    .profile-hero-mini {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
        display: block;
    }
    .profile-hero-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .profile-hero-mini-initials {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
        color: var(--on-brand);
        font-size: .85rem;
        font-weight: 600;
    }
    .profile-hero-mini-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .profile-hero-toggle > i {
        margin-left: auto;
        font-size: .7rem;
        opacity: .5;
        transition: transform .2s ease;
    }
    .profile-hero[data-open="true"] .profile-hero-toggle > i {
        transform: rotate(180deg);
        opacity: 1;
    }
    .profile-hero[data-open="false"] .profile-user-card { display: none; }
    /* Развёрнутый снимок на телефоне занимал бы весь экран: колонка там
       во всю ширину. Ограничиваем высотой, кадр остаётся по центру. */
    .profile-sidebar .profile-photo { aspect-ratio: auto; height: 46vh; max-height: 420px; }
}

/* ==================== 43. ЧАТ ПОДДЕРЖКИ: КТО ПИШЕТ ==================== */
/* Строка вместо трёх полей у вошедшего. Имя и телефон он уже называл при
   регистрации; повторный опрос стоил трёх полей между вопросом и ответом
   — с телефона на этом бросают, не написав. */
.chat-known {
    margin: 0;
    font-size: .8rem;
    color: var(--ink-3);
}
.chat-known b { color: var(--ink); font-weight: 600; }
/* Форма, в которой всё скрыто, не должна оставлять полосу с рамкой. */
.chat-user-form:not(:has(> *:not([hidden]))) {
    display: none;
}

/* ==================== 44. ДОСТИЖЕНИЯ В БОКОВОЙ КОЛОНКЕ ==================== */
/* Заголовок «Мои достижения» — ссылка, и разметка у него одна на оба
   экрана. Различаются только стили.

   На широком экране он выглядит заголовком карточки, как выглядел
   обычный <h5>: тот же размер, те же прописные, никакого подсвечивания
   строки при наведении.

   На телефоне он становится строкой меню со стрелочкой. Значки-медали
   там убраны: развернувшийся под пунктом раздел показывает их все, и
   шестёрка сверху дублировала бы его. */
.profile-badges-title {
    /* Отступы карточки уже заданы .profile-info-card — здесь они лишние. */
    padding: 0 !important;
    border-left: 0 !important;
    font-family: var(--font-sans);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3) !important;
    text-decoration: none;
}
.profile-badges-title i { color: var(--ink-4); }
.profile-badges-title:hover { background: transparent !important; color: var(--ink) !important; }
.profile-badges-title:hover i { color: var(--brand); }

@media (max-width: 991.98px) {
    /* Карточка растворяется в меню: своей рамки и отступов у неё больше
       нет, и пункт встаёт вровень с соседними. */
    .profile-sidebar .profile-badges {
        padding: 0 !important;
        border-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    /* Раскрытый раздел вставляется сразу за ссылкой. Пока голова была
       флексом, он оказывался третьей колонкой этой строки и ложился
       вбок; блоком — встаёт под пунктом, как у остальных. */
    .profile-sidebar .profile-badges-head {
        display: block !important;
        margin-bottom: 0 !important;
    }
    /* !important здесь не от лени: у бутстраповского .d-flex он свой,
       и без него строка значков остаётся видимой. */
    .profile-sidebar .profile-badges .badges-container { display: none !important; }
    /* Обычная строка меню: те же отступы, тот же размер, та же стрелка —
       её добавляет правило .accordion-trigger::after. */
    .profile-sidebar .profile-badges-title {
        padding: .7rem var(--sp-5) !important;
        font-family: inherit;
        font-size: .92rem;
        font-weight: 400;
        letter-spacing: normal;
        text-transform: none;
        color: var(--ink-2) !important;
        border-left: 2px solid transparent !important;
    }
    .profile-sidebar .profile-badges-title:hover { background: var(--surface-2) !important; }
    .profile-sidebar .profile-badges-title.active {
        background: var(--brand-wash) !important;
        border-left-color: var(--brand) !important;
    }
}

/* ===========================================================================
   34. СУДЬБА ФОТОГРАФИИ ПРОФИЛЯ
   ---------------------------------------------------------------------------
   Аватар уходит на проверку, а в профиле остаётся прежний. Без строки,
   которая это объясняет, замена фотографии выглядит как поломка: человек
   грузит фото, возвращается и видит старое. Ровно так и сообщили с
   проверки сайта — «фото загружается, но не меняется».

   Правило лежит здесь, а не в шаблоне, потому что строка показывается на
   двух страницах: в редакторе профиля и в самом профиле. Написанное
   дважды оформление разъезжается молча.
   ========================================================================= */
.avatar-moderation-note {
    font-size: .8rem;
    line-height: 1.35;
    color: var(--gold);
    background: var(--warning-soft);
    border-radius: 10px;
    padding: 8px 10px;
    text-align: left;
}

.avatar-moderation-note.rejected {
    color: var(--brand-deep);
    background: var(--danger-soft);
}

/* Выбранная, но ещё не отправленная фотография. Рамка отличает её от той,
   что уже стоит в профиле: иначе предпросмотр выглядит свершившимся
   фактом — он и выглядел. */
.profile-avatar-large.avatar-awaiting {
    outline: 3px dashed var(--gold);
    outline-offset: 2px;
}

/* ===========================================================================
   35. ФОТОГРАФИИ В КАБИНЕТЕ: СЕТКИ, НАКЛАДКА, КНОПКА УДАЛЕНИЯ
   ---------------------------------------------------------------------------
   Правила лежали внутри profile.html. Те же сетки и те же кнопки есть на
   странице «Личные фото» — а она profile.html не подключает, и до сих пор
   стояла вообще без оформления.

   Здесь же лечится кнопка удаления на телефоне: она пряталась в накладке,
   которая показывалась по наведению, а наведения на телефоне не бывает.
   Кнопка существовала и не нажималась — с проверки сайта попросили её
   «добавить», хотя добавлять было нечего, надо было показать.
   ========================================================================= */
.profile-photos-section {
    margin-top: 2rem;
}

.profile-photos-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.profile-photos-title h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.profile-photos-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

.profile-photo-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--surface-2);
}

.profile-photo-item:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(140, 74, 91, 0.3);
}

.profile-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo-item .avatar-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background: var(--brand-soft);
    color: var(--ink);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: 500;
    z-index: 10;
}

.profile-photo-item .photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.profile-photo-item:hover .photo-overlay {
    opacity: 1;
}

.profile-photo-item .photo-overlay i {
    color: var(--on-plum);
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    padding: 8px;
}

.add-photo-btn {
    background: var(--surface-2);
    border: 2px dashed var(--brand);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--brand);
}

.add-photo-btn:hover {
    background: var(--brand-soft);
    transform: scale(1.02);
}

.add-photo-btn i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.add-photo-btn span {
    font-size: 0.7rem;
}

.photo-count-badge {
    font-size: 0.7rem;
    color: var(--ink-3);
    margin-top: 0.5rem;
    text-align: center;
}
/* Кнопка удаления на фотографии. Оформления у неё не было вовсе — голая
   кнопка браузера поверх тёмной накладки. */
.profile-photo-item .delete-photo-btn {
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: var(--on-plum);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.profile-photo-item .delete-photo-btn:hover,
.profile-photo-item .delete-photo-btn:focus-visible {
    background: var(--brand);
}

.profile-photo-item .photo-overlay {
    gap: 10px;
}

/* Телефон. Наведения нет, значит накладка не появится никогда, и всё,
   что в ней лежит, недостижимо. Показываем её всегда — слегка
   притушенной, чтобы фотографию было видно, — и кнопку удаления в углу,
   чтобы она не закрывала снимок. */
@media (hover: none) {
    .profile-photo-item .photo-overlay {
        opacity: 1;
        background: none;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 6px;
    }

    /* Прячем ТОЛЬКО одинокий значок наложения — лупу «увеличить»,
       которая на телефоне ни к чему: снимок и так открывается нажатием.

       Знак «больше» здесь существенный. Без него правило пряталo и
       значки ВНУТРИ кнопок, и кнопка удаления на телефоне показывалась
       пустым тёмным кружком — рядом с таким же пустым белым кружком
       «на аватар». Нажать можно было оба, но понять, что нажимаешь,
       нельзя. */
    .profile-photo-item .photo-overlay > i {
        display: none;
    }

    .profile-photo-item .delete-photo-btn {
        width: 34px;
        height: 34px;
        background: rgba(0, 0, 0, 0.55);
    }
}

/* ===========================================================================
   36. СВЁРНУТОЕ МЕНЮ КАБИНЕТА НА ТЕЛЕФОНЕ
   ---------------------------------------------------------------------------
   Колонка меню стоит НАД содержимым страницы. Развёрнутой она занимала
   1097 пикселей при экране в 840 — на любой странице кабинета человек
   сначала пролистывал всё меню и только потом добирался до того, ради
   чего пришёл. С проверки сайта об этом сказали так: «ссылки открываются
   в самом низу, а не под самой ссылкой».

   Правила общие для двух меню — личного кабинета и кабинета компании.
   Написанные дважды, они разъехались бы молча.
   ========================================================================= */
/* Свёрнутое меню кабинета — только на телефоне.
   Строка вместо полутора экранов ссылок: см. пояснение в разметке.

   Строка эта устроена как остальные пункты меню, и нарочно. Сначала она
   была отдельной карточкой с гамбургером слева — в белой рамке, с
   собственными скруглениями, не похожая ни на что вокруг. С проверки
   сайта про неё сказали прямо: «должна быть стрелка вниз и окно
   показываться прямо под пунктом меню».

   Замечание верное. Рядом два десятка строк, и все раскрываются
   одинаково: стрелка справа, нажал — содержимое под строкой, строка
   подсветилась. Гамбургер в этом ряду обещает что-то другое — выезжающую
   панель, список поверх страницы, — а делает то же самое. Обещание, на
   которое нечем ответить, и есть поломка, даже когда код работает.

   Поэтому гамбургера нет, стрелка одна и та же, и меню раскрывается
   прямо под строкой, прирастая к ней. */
.profile-menu-toggle {
    display: none;
    width: 100%;
    align-items: center;
    gap: 12px;
    padding: .75rem 1.5rem;
    border: 0;
    background: var(--surface);
    color: var(--ink, var(--ink));
    font-size: .9rem;
    font-weight: 600;
    text-align: left;
    transition: background .2s ease, color .2s ease;
}

.profile-menu-toggle > i:first-child {
    width: 20px;
    font-size: 1.1rem;
    color: var(--brand);
}

.profile-menu-toggle-text { flex: 1; min-width: 0; }

/* Раздел, в котором человек сейчас находится. Без него свёрнутое меню
   не отвечает на вопрос «где я» — а это единственное, что отличает одну
   страницу кабинета от другой, когда меню закрыто. */
.profile-menu-toggle-where {
    display: block;
    font-size: .75rem;
    font-weight: 400;
    color: var(--ink-3, var(--ink-3));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Стрелка — та же, что у раскрывающихся пунктов: .accordion-trigger::after
   рисует её тем же знаком и тем же размером. */
.profile-menu-toggle-arrow {
    margin-left: auto;
    font-size: .7rem;
    opacity: .5;
    color: inherit;
    transition: transform .2s ease, opacity .2s ease;
}

/* Открытая строка подсвечена и держит содержимое под собой: ровно так же
   ведёт себя раскрытый пункт меню. */
.profile-sidebar[data-menu="open"] > .profile-menu-toggle {
    background: var(--brand-soft, var(--brand-soft));
    color: var(--brand);
    border-right: 3px solid var(--brand);
}

.profile-sidebar[data-menu="open"] .profile-menu-toggle-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

.profile-sidebar[data-menu="open"] .profile-menu-toggle-where { color: var(--brand); }

@media (max-width: 991.98px) {
    .profile-menu-toggle { display: flex; }
    .profile-sidebar:not([data-menu="open"]) .profile-menu-body { display: none; }
}


/* ======================================================================
   37. ПОЛОСКА ЦИФР
   ======================================================================

   Одна горизонтальная карточка с несколькими числами внутри: «Получено
   бейджей 7 · Всего 24 · Прогресс 29%».

   Три страницы кабинета — «Мои достижения», «Мои бонусы» и «История
   бонусов» — показывали такие же цифры и каждая своей вёрсткой. У
   бонусной карты это были col-md-4, то есть на телефоне три высокие
   карточки столбиком; у истории бонусов — flex, которому на телефоне
   явным правилом выставляли flex-direction: column, опять столбиком. На
   экране в 390 точек три таких блока занимали всю высоту, и до
   собственно значков или списка операций приходилось листать.

   С проверки сайта это описали прямо: «статистика по бейджам, бонусам
   нужно сделать в 1 горизонтальную карточку как в профиле».

   Класс один на три страницы, как разделы 34 и 35: три копии одних и тех
   же .stats-card жили в трёх шаблонах и ни одной в .css, поэтому любая
   правка доходила до одной страницы из трёх.

   Полоска не переносится никогда. Числа короткие, их три-четыре, и
   перенос вернул бы ровно то, от чего уходим. Вместо переноса ужимаются
   отступы и шрифт, а длинная подпись переносится внутри своей ячейки. */

.stat-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--line, var(--surface-3));
    border-radius: 18px;
    padding: .25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .05);
}

.stat-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .15rem;
    padding: .9rem .5rem;
    min-width: 0;
    text-align: center;
}

/* Разделители — границей у соседей, а не у каждой ячейки: иначе крайние
   рисуют лишнюю линию по краям карточки. */
.stat-strip-item + .stat-strip-item {
    border-left: 1px solid var(--line, var(--surface-3));
}

.stat-strip-icon {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--brand);
}

.stat-strip-number {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink, var(--ink));
    white-space: nowrap;
}

.stat-strip-label {
    font-size: .72rem;
    line-height: 1.2;
    color: var(--ink-3, var(--ink-3));
    overflow-wrap: anywhere;
}

/* Полоска прогресса под числом — во всю ширину ячейки и прижата к низу,
   чтобы не зависеть от того, в сколько строк легла подпись соседа. */
.stat-strip-bar {
    width: 100%;
    height: 5px;
    margin-top: auto;
    padding-top: .4rem;
    box-sizing: content-box;
}

.stat-strip-bar .progress { height: 5px; }

@media (max-width: 767.98px) {
    .stat-strip { border-radius: 14px; margin-bottom: 1rem; }
    .stat-strip-item { padding: .6rem .3rem; gap: .1rem; }
    .stat-strip-icon { font-size: 1.05rem; }
    .stat-strip-number { font-size: 1.15rem; }
    .stat-strip-label { font-size: .6rem; letter-spacing: 0; }
}

@media (max-width: 400px) {
    .stat-strip-item { padding: .55rem .2rem; }
    .stat-strip-number { font-size: 1.02rem; }
    .stat-strip-label { font-size: .55rem; }
}

/* ======================================================================
   38. ШАПКА РАЗДЕЛА: ЗАГОЛОВОК И КНОПКИ
   ======================================================================

   Строка «слева название, справа действия». Образец встречался на
   страницах компании дважды, и оба раза был написан одинаково:

       <div class="d-flex justify-content-between align-items-center">

   У такой строки нет переноса. Пока название короткое, всё хорошо; стоит
   компании назваться «Общество с ограниченной ответственностью
   «Ромашка-Плюс»», и на экране в 390 точек заголовок с кнопками не
   помещается в строку — кнопки наезжают на текст, а страница уезжает
   вправо. С проверки сайта про раздел сотрудников так и сказали:
   «уплыло далеко вправо».

   Правило вынесено сюда, а не написано на каждой странице, потому что
   написанное дважды разъезжается молча: один раз я уже чинил шапку
   сотрудников и не заметил, что ровно та же шапка стоит на карточке
   компании и сломана так же. */

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

/* min-width: 0 — чтобы длинное название могло сжаться, а не распирать
   строку. Без него flex-элемент не уменьшается меньше своего
   содержимого, и переносить становится нечего. */
.section-head-title {
    min-width: 0;
    margin: 0;
    font-size: clamp(1.15rem, 4.5vw, 1.75rem);
    overflow-wrap: anywhere;
}

.section-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

@media (max-width: 575.98px) {
    .section-head { flex-direction: column; align-items: stretch; }
    .section-head-actions > .btn-reset,
    .section-head-actions > .btn-apply { flex: 1 1 100%; justify-content: center; }
    /* Бейдж — подпись, а не кнопка: пусть не растягивается рядом с ними. */
    .section-head-actions > .role-badge,
    .section-head-actions > .badge { align-self: flex-start; }
}

/* ==================== 45. ЧУЖАЯ СТРАНИЦА: КАРТОЧКА И СИМПАТИЯ ==================== */
/* Карточка человека на публичной странице собрана той же разметкой, что
   и в своём кабинете (раздел 42): снимок во всю ширину колонки, имя и
   отметки — на снимке. Поэтому размеров здесь нет: они уже заданы там,
   и второго набора, который со временем разойдётся с первым, заводить
   не нужно.

   Нужно ровно одно: поля для того, что идёт НИЖЕ снимка. Сама карточка
   в боковой колонке объявлена без полей (padding: 0 !important), иначе
   снимок не дошёл бы до краёв, — и без обёртки реквизиты и счётчики
   прилипали бы к самому краю. */
.profile-sidebar .profile-card-body {
    padding: var(--sp-4, 1rem);
}
.profile-sidebar .profile-card-body .info-item:first-child { margin-top: 0; }
.profile-sidebar .profile-card-body .profile-stats-mini { margin-top: .75rem; }

/* Кнопка симпатии.

   Обведённая, а не залитая: залитая рядом с «Написать сообщение» дала бы
   два главных действия подряд, и глазу не за что зацепиться. Залитой она
   становится, когда симпатия уже поставлена, — тогда это не предложение
   нажать, а состояние.

   Сердце слева от подписи, а не вместо неё: голое сердце на странице,
   где ниже у каждой фотографии своё сердце-лайк, читается как лайк
   фотографии. */
.profile-like-row { margin-top: var(--sp-3, .75rem); }
.profile-like-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    /* 46px в высоту: по кнопке на чужой странице попадают пальцем. */
    min-height: 46px;
    padding: .6rem 1rem;
    border: 1.5px solid var(--brand);
    border-radius: var(--r-pill, 999px);
    background: transparent;
    color: var(--brand);
    font-family: var(--font-sans);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.profile-like-btn i { font-size: 1.05rem; }
@media (hover: hover) {
    .profile-like-btn:not([disabled]):hover {
        background: var(--brand-soft, var(--brand-soft));
    }
}
.profile-like-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
/* Симпатия поставлена. Кнопка намеренно остаётся видимой и читаемой, а не
   бледнеет до неразличимости, как обычная выключенная кнопка: это теперь
   подпись о состоянии, и прочесть её важнее, чем показать, что не
   нажимается. Курсор при этом обычный — нажимать нечего. */
.profile-like-btn.is-liked {
    background: var(--brand-soft, var(--brand-soft));
    border-color: var(--brand-soft, var(--brand-soft));
    color: var(--brand-deep, var(--brand));
    cursor: default;
    opacity: 1;
}
.profile-like-btn.is-mutual {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}

/* ==================== 46. ПРЕМИУМ: КОРОНА И ЗАКРЫТЫЕ СИМПАТИИ ==================== */

/* Корона у имени.

   Рисунок один, видов два, и различаются они только заливкой с
   обводкой — поэтому второго файла не нужно. Размер в em, а не в
   точках: корона стоит у имён кеглем от 0.72rem (строка в списке) до
   1.75rem (заголовок чужой страницы), и в точках пришлось бы задавать
   её отдельно в каждом из двадцати шести мест. В em она сама
   подстраивается под соседнее слово.

   vertical-align подобран, а не взят круглым: по базовой линии svg
   встаёт низом на строку и выглядит просевшей на две точки. */
.корона-место {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin-inline-end: .3em;
    vertical-align: -0.12em;
    flex-shrink: 0;
}
.корона {
    display: block;
    overflow: visible;
}
/* Премиум есть: сплошное золото с чуть более тёмной обводкой — без неё
   золотая корона на светлом фоне теряет края. */
.корона-есть path {
    fill: var(--gold, var(--gold));
    stroke: var(--gold, var(--gold));
    stroke-width: 1.1;
}
/* Нарисованный для примера — в окне с рассказом о премиуме. Выглядит
   как золотая, но НЕ значит «у этого человека премиум»: человека там
   нет вовсе. Отдельный класс нужен проверке — иначе она считала бы
   картинку в окне за чей-то настоящий знак и зеленела бы всегда. */
.корона-образец path {
    fill: var(--gold, var(--gold));
    stroke: var(--gold, var(--gold));
    stroke-width: 1.1;
}
/* Премиума нет: только контур. Чёрный — как просили; берём --ink, чтобы
   на тёмной теме, когда до неё дойдёт, контур не пропал на чёрном. */
.корона-нет path {
    fill: none;
    stroke: var(--ink, var(--ink));
    stroke-width: 1.6;
    opacity: .45;
}

/* Закрытая строка на вкладке «Вы понравились».

   Размытие здесь — не способ что-то спрятать: прятать уже нечего,
   настоящий снимок в браузер не уходит, а приходит отдельный файл в
   24 точки (users/blur.py). Эти правила только дорисовывают картинку
   до мягкой: убирают остатки квадратов у растянутого пятна и гасят
   края, чтобы кружок не выглядел испорченным. */
/* Класс вешается НА .avatar-placeholder, а не вместо неё: размер кружка
   во всех списках задаёт именно она. Первый заход поставил размытый
   снимок прямо в .chat-room-avatar — и кружок распёрло во всю строку:
   у картинки своя величина, а высоте родителя не от чего считать 100%.
   Свой размер здесь означал бы второе место, где его надо править. */
.симпатия-закрыта { position: relative; overflow: visible; }
.симпатия-закрыта .симпатия-пятно {
    width: 100%; height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    filter: blur(2px) saturate(.9);
}
.симпатия-закрыта .симпатия-силуэт {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--surface-3, var(--brand-wash));
    color: var(--ink-4, var(--ink-3));
    font-size: 1.1rem;
}
/* Имя: в разметке его нет, поэтому рисуем полосу из точек. Ширина
   разная у соседних строк — одинаковая читалась бы как поломка
   вёрстки, а не как «тут имя, и его не видно». */
.симпатия-имя-скрыто {
    display: inline-block;
    color: var(--ink-3, var(--ink-3));
    letter-spacing: .12em;
    filter: blur(2.5px);
    user-select: none;
}
.симпатия-подпись {
    color: var(--brand, var(--brand));
    font-weight: 600;
    font-size: .78rem;
}
/* Замок поверх кружка — он и есть то, по чему нажимают. */
.симпатия-замок {
    position: absolute;
    right: -2px; bottom: -2px;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--brand, var(--brand));
    color: var(--on-brand);
    font-size: .62rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
/* Вся закрытая строка нажимается целиком: промахнуться мимо замка в
   двадцать точек пальцем легко, а ведут они в одно и то же место.

   display здесь НЕ задаётся нарочно. Кнопка несёт и класс
   .chat-room-link, который раскладывает кружок и имя в строку; а
   `button.симпатия-строка` весомее `.chat-room-link` по правилам
   отбора, и любое значение display отсюда перебило бы раскладку. Так и
   вышло с первого раза: аватарка встала над именем столбиком. */
button.симпатия-строка {
    width: 100%;
    border: 0;
    background: none;
    padding: 0;
    text-align: inherit;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* ==================== 47. СЕТКА ФОТОГРАФИЙ НА УЗКОМ ЭКРАНЕ ==================== */

/* Отзывчивые правила для .profile-photos-grid жили ВНУТРИ profile.html.
   Страница «Личные фото» — отдельный шаблон, он profile.html не
   подключает, и до неё они не доходили: на телефоне шириной 390 точек
   там оставалось пять квадратов в ряд, то есть по 68 точек на снимок.
   Правила переехали сюда, где объявлена сама сетка. */
@media (max-width: 767.98px) {
    .profile-photos-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
}
@media (max-width: 480px) {
    .profile-photos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Личные фото — по две в ряд на всю ширину телефона и планшета в
   книжной ориентации. Их смотрят, а не перебирают: это единственная
   сетка на сайте, где снимок и есть содержимое страницы. */
@media (max-width: 767.98px) {
    .profile-photos-grid.фото-крупнее {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* Блока «@media (hover: none)» здесь нет нарочно: он уже есть выше,
   рядом с остальными правилами наложения. Второй такой же блок в
   другом конце файла — это два места, где написано одно и то же, и
   рано или поздно они разойдутся. */

/* Значок внутри кнопки — просто значок.

   Правило `.profile-photo-item .photo-overlay i` красит ЛЮБОЙ значок
   внутри наложения белым и сажает его на тёмный кружок: оно писалось
   для одинокой лупы «увеличить», когда кнопок в наложении не было.
   На белой кнопке «на аватар» это давало белое по белому — кнопка
   выглядела пустым кружком. Снимаем с кнопок эту заливку: у них своя.

   Та же беда была и у кнопки удаления: тёмный кружок на тёмном
   кружке. Видно её хуже — обе тёмные, — но лишний слой там тоже был. */
.profile-photo-item .photo-overlay button i {
    color: inherit;
    background: none;
    padding: 0;
    font-size: inherit;
    border-radius: 0;
}

/* Кнопка «поставить на аватар» — рядом с удалением и такого же
   размера: по 36 точек, чтобы попадать пальцем, не целясь. */
.profile-photo-item .сделать-аватаром {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--glass);
    color: var(--ink, var(--ink));
    font-size: .95rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.profile-photo-item .сделать-аватаром:hover:not(:disabled) {
    background: var(--brand, var(--brand));
    color: var(--on-brand);
}
.profile-photo-item .сделать-аватаром:disabled { opacity: .5; cursor: default; }
.profile-photo-item .photo-overlay { gap: 6px; }