/* Вход, регистрация и личный кабинет покупателя.
 *
 * ⚠ Экранов кабинета в утверждённом дизайне НЕТ (в экспортах Design только
 * витрина, админка и дозаказ). Павел решил отрисовку у Claude Design не
 * заказывать: «сам делай в этом стиле». Поэтому все значения ниже СНЯТЫ
 * ЗАМЕРОМ с живой витрины (getComputedStyle на /catalog/, /product/, /cart/),
 * а не подобраны на глаз. Откуда что взято - помечено у каждого блока.
 *
 * Токены объявлены здесь, в :root, потому что ни в storefront.css (его пишет
 * конвейер 05), ни в custom.css переменных палитры нет вовсе: витрина держит
 * цвета инлайном в разметке артбордов. Дублировать хекс-коды по сорока
 * правилам этого файла нельзя, трогать конвейерный и витринный css ради
 * переменных - тоже (это правка чужого слоя). Когда переменные появятся в
 * общем месте, блок :root ниже заменяется одной строкой.
 *
 * Разметка страниц кабинета НЕ дублируется на десктоп и мобильный, в отличие
 * от экранов из макета: там два артборда, здесь одна форма и медиазапросы.
 * Две копии формы в DOM означали бы два поля с одним именем и два автофокуса.
 */

:root {
    /* Палитра. Ровно та, что стоит инлайном в артбордах Design. */
    --acc-bg: #FFEBF2;          /* подложка страницы */
    --acc-surface: #FFF8FB;     /* панели, карточки, поля */
    --acc-accent: #EE7598;      /* кнопки, активные состояния */
    --acc-accent-dark: #C9436E; /* ссылки, активная вкладка, акценты */
    --acc-text: #2E1D25;
    --acc-muted: #8A7079;       /* подписи, вторичное */
    --acc-line: #FFD6E4;        /* разделители, «мягкий» фон */

    /* Тени. Замер: article[data-slug] и aside каталога дают одну и ту же
       пару, кнопка «+» на плитке и кнопка «В корзину» - свою розовую. */
    --acc-shadow: 8px 8px 20px rgba(206, 140, 166, .28),
                  -8px -8px 20px rgba(255, 255, 255, .9);
    --acc-shadow-sm: 6px 6px 16px rgba(206, 140, 166, .28),
                     -6px -6px 16px rgba(255, 255, 255, .9);
    /* Наведение на плитку товара (класс scp57cffe из storefront.css). */
    --acc-shadow-up: 12px 14px 30px rgba(206, 140, 166, .36),
                     -8px -8px 20px rgba(255, 255, 255, .9);
    /* Поле поиска в шапке: вдавленная поверхность. */
    --acc-inset: inset 5px 5px 12px rgba(206, 140, 166, .30),
                 inset -5px -5px 12px rgba(255, 255, 255, .95);
    /* Чекбокс фильтра и бейдж «Нет в наличии»: та же вдавленность помельче. */
    --acc-inset-sm: inset 3px 3px 8px rgba(206, 140, 166, .28),
                    inset -3px -3px 8px rgba(255, 255, 255, .95);
    --acc-accent-shadow: 6px 6px 16px rgba(238, 117, 152, .45);

    /* Скругления: 44 обложка, 28 панель, 24 малая карточка, 999 кнопки. */
    --acc-r-hero: 44px;
    --acc-r: 28px;
    --acc-r-sm: 24px;
    --acc-r-xs: 18px;

    --acc-title-font: 'Playfair Display', Georgia, serif;
    --acc-text-font: 'PT Serif', Georgia, serif;
    --acc-mono-font: 'PT Mono', monospace;
    /* Обычный шрифт интерфейса. Появился 01.09: Павел «шрифты в кабинете
       сделать как везде, обычные, красивыми оставить только заголовки».
       Стек снят с витрины замером - им набраны названия товаров на плитках
       и подпись главной кнопки формы заказа. До этого токена в файле не
       было, и кнопки с вкладками кабинета набирались моноширинным. */
    --acc-ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Кнопка кабинета в шапке (partials/account_bar.html) ───────────────────
 *
 * Было (финальный аудит 2026-08-20): голое слово ВОЙТИ в 10px PT Mono, висящее
 * в верхнем поле шапки. Мелко и ни к чему не привязано.
 *
 * Стало: полноценный элемент ряда круглых кнопок шапки. Ряд свёрстан макетом
 * (generated/partials/header.desktop.html, руками не правится), поэтому
 * элемент переставляет в него account.js - цепляется за корзину по aria-label,
 * тем же приёмом, каким уже уводит сердечко в кабинет. Без скрипта элемент
 * остаётся на своём месте над шапкой и всё равно выглядит кнопкой.
 *
 * Замер ряда шапки: 50x50, border-radius 50%, фон #FFF8FB, тень --acc-shadow,
 * размер глифа 19px, зазор между кнопками 12px.
 */

.acc-bar {
    position: relative;
    /* высоты не занимает: ссылка ложится в верхнее поле шапки */
    height: 0;
    /* поверх шапки, но ниже панелей меню и фильтров (у них z-index больше) */
    z-index: 4;
}

.acc-bar__inner {
    /* ширины своей не заводит: класс .site-col в разметке даёт ту же колонку,
       что у шапки. Так пилюля «Войти» без JavaScript встаёт ровно над рядом
       круглых кнопок, а не по своей ширине (была 1008 против 1536 у сайта). */
    padding-top: 3px;
    display: flex;
    justify-content: flex-end;
}

/* Общий контейнер: и пилюля гостя, и кружок вошедшего. */
.acc-user {
    position: relative;
    font-family: var(--acc-mono-font);
}

/* Уехал в ряд кнопок шапки - лишние отступы снимаем, высоту равняем. */
.acc-user--docked {
    display: flex;
    align-items: center;
}

/* Класс вешает account.js после переезда кнопки в ряд шапки: пустая полоска
   в разметке остаётся, но места и обработчиков не занимает. */
.acc-bar--moved { display: none; }

/* Пилюля гостя: те же 50px высоты и та же тень, что у кнопок ♡ и 🧺. */
.acc-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--acc-surface);
    box-shadow: var(--acc-shadow);
    color: var(--acc-text);
    font-family: var(--acc-mono-font);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: .15s;
    white-space: nowrap;
}

/* Наведение как у чипа «Показать все результаты» в подсказках поиска
   (класс scp903556): фон #FFD6E4, цвет #C9436E, плюс подъём как у корзины. */
.acc-pill:hover {
    background: var(--acc-line);
    color: var(--acc-accent-dark);
    transform: translateY(-2px);
}

.acc-pill__glyph {
    font-size: 15px;
    letter-spacing: 0;
}

/* Кружок с инициалом. Размер и тень - ряда шапки, заливка - акцентная,
   как у кнопки «+» на плитке товара. */
.acc-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--acc-accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--acc-title-font);
    font-weight: 900;
    font-size: 20px;
    line-height: 1;
    box-shadow: var(--acc-accent-shadow);
    border: 0;
    cursor: pointer;
    transition: .15s;
    text-decoration: none;
    list-style: none;
}

.acc-avatar::-webkit-details-marker { display: none; }

.acc-avatar:hover {
    background: var(--acc-accent-dark);
    transform: translateY(-2px);
}

/* Выпадающее меню в стиле панели подсказок поиска (partials/search_overlay):
   фон #FFF8FB, скругление 26px, тень 8/24 плюс светлая, строки с наведением
   на #FFEBF2 и скруглением 18px. */
.acc-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 20;
    min-width: 232px;
    background: var(--acc-surface);
    border-radius: 26px;
    box-shadow: 8px 8px 24px rgba(206, 140, 166, .3),
                -8px -8px 20px rgba(255, 255, 255, .9);
    padding: 12px;
    text-align: left;
}

.acc-menu__who {
    display: block;
    font-family: var(--acc-mono-font);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--acc-muted);
    padding: 4px 14px 10px;
}

.acc-menu__link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--acc-r-xs);
    background: transparent;
    color: var(--acc-text);
    font-family: var(--acc-text-font);
    font-size: 16px;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: .14s;
}

.acc-menu__link:hover {
    background: var(--acc-bg);
    color: var(--acc-accent-dark);
}

.acc-menu__split {
    height: 1px;
    background: var(--acc-line);
    margin: 8px 14px;
}

.acc-menu__form { margin: 0; }

.acc-menu__link--muted { color: var(--acc-muted); }

@media (max-width: 768px) {
    /* Вход на телефоне живёт в панели бургера, здесь ему негде встать. */
    .acc-bar { display: none; }
}

/* ── Каркас страницы ───────────────────────────────────────────────────── */

.acc-shell {
    background: var(--acc-bg);
    min-height: 100vh;
    overflow: hidden;
}

.acc-shell__narrow {
    padding: 0 16px;
}

.acc-main {
    /* ширину и боковые поля даёт .site-col из custom.css, здесь только низ */
    padding-bottom: 40px;
    font-family: var(--acc-text-font);
    color: var(--acc-text);
    font-size: 17px;
    line-height: 1.62;
}

/* Крошка. Замер partials/breadcrumb_catalog.html: PT Mono 11px, .14em,
   uppercase, #8A7079, поля 34px сверху и 14px снизу. */
.acc-crumbs {
    position: relative;
    /* над декоративными кругами первого экрана: они лежат в следующем блоке
       и без этого закрашивали бы крошку собой */
    z-index: 2;
    font-family: var(--acc-mono-font);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--acc-muted);
    margin: 34px 0 14px;
}

.acc-crumbs a {
    color: var(--acc-muted);
    text-decoration: none;
    transition: .14s;
}

.acc-crumbs a:hover { color: var(--acc-accent-dark); }

.acc-crumbs span { color: var(--acc-accent-dark); }

/* H1. Замер каталога: Playfair 900 56px, letter-spacing -.025em, line-height 1
   и пунктирная отбивка 150x2 с анимацией cutX из storefront.css. */
.acc-title {
    font-family: var(--acc-title-font);
    font-size: 56px;
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1;
    margin: 0 0 30px;
}

.acc-title::after {
    content: "";
    display: block;
    height: 2px;
    margin-top: 10px;
    width: 150px;
    background: repeating-linear-gradient(90deg, var(--acc-accent) 0 12px, transparent 12px 20px);
    animation: cutX 1.4s linear infinite;
}

.acc-lead {
    font-size: 19px;
    line-height: 1.5;
    color: var(--acc-text);
    margin: 0 0 24px;
    max-width: 34ch;
}

.acc-footer {
    padding: 22px 0 30px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-family: var(--acc-mono-font);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--acc-muted);
    border-top: 1px solid var(--acc-line);
    margin-top: 26px;
}

.acc-footer a {
    color: var(--acc-muted);
    text-decoration: none;
}

.acc-footer a:hover { color: var(--acc-accent-dark); }

/* ── Первый экран входа и регистрации ──────────────────────────────────────
 *
 * Устройство снято с обложки главной (generated/home.desktop.html): надпись
 * PT Mono над крупным Playfair, текст в 34ch, декоративные круги #FFD6E4 и
 * #EE7598 с анимациями floaty/drift из storefront.css. Разница одна: у нас
 * в правой колонке форма, а не фотография, поэтому колонки не вложены в одну
 * панель - иначе панель формы легла бы карточкой на карточку того же цвета.
 * Панель формы - это ровно панель фильтров каталога (замер: #FFF8FB,
 * скругление 28px, тень 8/20 плюс светлая).
 */

.acc-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 52px;
    align-items: start;
    margin-bottom: 10px;
}

.acc-hero__side {
    position: relative;
    padding-top: 6px;
}

/* Круги обложки. pointer-events снят: они лежат под формой. */
.acc-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.acc-blob--one {
    width: 230px;
    height: 230px;
    background: var(--acc-line);
    opacity: .5;
    top: 18px;
    left: -132px;
    animation: floaty 5s ease-in-out infinite;
}

.acc-blob--two {
    width: 108px;
    height: 108px;
    background: var(--acc-accent);
    opacity: .13;
    bottom: -40px;
    left: 44%;
    animation: drift 6s ease-in-out infinite;
}

.acc-hero__text { position: relative; z-index: 1; }

/* Надстрочная подпись обложки: PT Mono 11px .2em uppercase плюс курсивная
   приписка Playfair 500 15px, ровно как «Ручная работа · с любовью». */
.acc-eyebrow {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 22px;
    font-family: var(--acc-mono-font);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--acc-muted);
}

.acc-eyebrow i {
    font-family: var(--acc-title-font);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--acc-accent-dark);
}

/* Список выгод. Оформление строки взято у «Состава набора» на карточке
   товара: номер PT Mono 11px цветом #C9436E, текст PT Serif 16px. */
.acc-points {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: 40ch;
}

.acc-points li {
    display: flex;
    gap: 12px;
    font-size: 16px;
    line-height: 1.62;
}

.acc-points b {
    font-family: var(--acc-mono-font);
    font-size: 11px;
    font-weight: 400;
    color: var(--acc-accent-dark);
    padding-top: 4px;
}

/* ── Панель ────────────────────────────────────────────────────────────── */

.acc-card {
    background: var(--acc-surface);
    border-radius: var(--acc-r);
    box-shadow: var(--acc-shadow);
    padding: 36px;
    margin-bottom: 22px;
}

.acc-card--narrow { max-width: 640px; }

.acc-card--form { margin-bottom: 0; }

/* Опасная карточка (удаление аккаунта). Не красная заливка: карточка стоит в
   ряду обычных, и алая панель кричала бы там, где надо просто предупредить.
   Отличие - тонкая рамка цветом ошибки и такой же цвет заголовка. */
.acc-card--danger {
    box-shadow: var(--acc-shadow), inset 0 0 0 1px rgba(196, 58, 94, .35);
}

.acc-card--danger .acc-card__title { color: #A32B52; }

/* ── Две колонки внутри вкладки ────────────────────────────────────────────
 *
 * Павел 21.08: «почему блок на пол-экрана». Замер до правки: панель профиля
 * 640px при колонке 1425 - 45 процентов, справа пустая розовая половина.
 *
 * 1.25fr к 1fr, а не поровну: слева форма с парами полей (двум полям в ряд
 * нужно не меньше 700px, иначе «День рождения» переносится под «Почту»),
 * справа - карточки-справки, которым хватает 600. При 1425 выходит 779 и 623,
 * при 1536 - 841 и 673. Зазор 22px - тот же, что между панелями по вертикали.
 *
 * align-items: start обязателен: без него колонка-коротышка растягивает свою
 * единственную карточку на высоту соседней, и внизу у неё пустое поле.
 */
.acc-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

/* Колонка - тоже сетка: так вертикальный зазор между карточками задаётся один
   раз и совпадает с горизонтальным. Нижний margin у карточек внутри снимаем,
   иначе к зазору сетки добавляется ещё 22px и колонки разъезжаются. */
.acc-col {
    display: grid;
    gap: 22px;
    align-content: start;
}

.acc-col > .acc-card { margin-bottom: 0; }

.acc-card__title {
    font-family: var(--acc-title-font);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 6px;
}

.acc-card__note {
    font-size: 15px;
    line-height: 1.55;
    color: var(--acc-muted);
    margin: 0 0 22px;
}

/* Выделение ВНУТРИ предложения. Шрифт и кегль сняты: моноширинная вставка
   посреди фразы на PT Serif читалась как чужеродная, да ещё и гасила
   жирность самого тега `b` весом 400. Теперь наследует абзац и выделяется
   тем, чем и должна, - насыщенностью. */
.acc-card__note b {
    font-weight: 700;
    color: var(--acc-text);
    white-space: nowrap;
}

/* Полоса-разделитель внутри панели: 1px #FFD6E4, как в панели фильтров. */
.acc-split {
    height: 1px;
    background: var(--acc-line);
    border: 0;
    margin: 24px 0 20px;
}

/* ── Формы ─────────────────────────────────────────────────────────────── */

.acc-field {
    display: block;
    margin-bottom: 18px;
}

/* Подпись поля: метка раздела панели фильтров, PT Mono 10px .2em uppercase. */
.acc-field__label {
    display: block;
    font-family: var(--acc-mono-font);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--acc-muted);
    margin-bottom: 9px;
}

/* Поле. Замер поля поиска в шапке: скругление 999px, поля 17px 26px,
   вдавленная тень. Заливка тут #FFEBF2, а не #FFF8FB: поле лежит НА панели
   цвета #FFF8FB, и одноцветное на одноцветном не читалось бы. Тот же приём,
   что у блока «Состав набора» внутри карточки товара. */
.acc-input {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-radius: 999px;
    background: var(--acc-bg);
    box-shadow: var(--acc-inset);
    padding: 17px 24px;
    font: 400 17px/1.4 var(--acc-text-font);
    color: var(--acc-text);
    outline: none;
    transition: box-shadow .16s;
    /* Поля крупные намеренно: вводить телефон и код чаще будут с телефона,
       а 16px и больше не дают Safari на iOS зумить страницу при фокусе. */
}

.acc-input::placeholder { color: var(--acc-muted); }

.acc-input:hover { box-shadow: var(--acc-inset), 0 0 0 1px var(--acc-line); }

.acc-input:focus { box-shadow: var(--acc-inset), 0 0 0 2px var(--acc-accent); }

/* Крупное поле телефона: PT Mono, потому что это цифры, и в проекте цифры
   моноширинные. Высота больше обычной строки - это главный ввод экрана. */
.acc-input--phone {
    font-family: var(--acc-mono-font);
    font-size: 20px;
    letter-spacing: .04em;
    padding: 20px 26px;
}

/* Ошибка поля: красная подсветка вместо акцентной. Цвет тот же, что у текста
   ошибки в .acc-message--error. */
.acc-input--bad {
    box-shadow: var(--acc-inset), 0 0 0 2px #C43A5E;
}

.acc-input--bad:focus {
    box-shadow: var(--acc-inset), 0 0 0 2px #C43A5E;
}

/* Запасное однострочное поле кода: показывается, когда скрипт не отработал
   (старый браузер, блокировщик). С ним вход остаётся рабочим. */
.acc-input--code {
    font-family: var(--acc-mono-font);
    font-size: 26px;
    letter-spacing: .5em;
    text-align: center;
    padding-left: 30px;
}

.acc-input--static {
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    color: var(--acc-muted);
}

.acc-input--static:hover,
.acc-input--static:focus { box-shadow: none; }

.acc-textarea {
    border-radius: var(--acc-r-sm);
    min-height: 84px;
    resize: vertical;
    font-size: 16px;
}

/* Две колонки на десктопе, одна на мобильном. */
.acc-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

/* ── Поля поперёк карточки ─────────────────────────────────────────────────
 * Шесть колонок, ширина поля задаётся числом занятых (`--1` … `--4`). Нужна
 * форме адреса: она стоит одна во всю ширину колонки, и парами полей её не
 * заполнить. Шесть, а не четыре: индекс это шесть цифр, дом и квартира - две-
 * три, а улице нужно место, и в четвертях такие ширины не набираются.
 * Ряд первый:  город 2 + индекс 1 + улица 3.
 * Ряд второй:  дом 1 + квартира 1 + комментарий 4.
 */
.acc-fields {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 16px;
}

.acc-field--1 { grid-column: span 1; }
.acc-field--2 { grid-column: span 2; }
.acc-field--3 { grid-column: span 3; }
.acc-field--4 { grid-column: span 4; }

.acc-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
    cursor: pointer;
}

/* Галочка ровно та же, что в панели фильтров каталога (замер facet_row:
   22x22, скругление 8px, вдавленная тень 3/7; отмеченная - заливка #EE7598
   с розовой тенью и белым знаком 12px). Системный чекбокс здесь выглядел
   казённым белым квадратом среди мягких розовых полей. */
.acc-check input {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin: 2px 0 0;
    border: 0;
    border-radius: 8px;
    background: var(--acc-bg);
    box-shadow: inset 3px 3px 7px rgba(206, 140, 166, .30),
                inset -3px -3px 7px rgba(255, 255, 255, .95);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .16s;
}

.acc-check input::after {
    content: "✓";
    font-size: 12px;
    line-height: 1;
    color: #fff;
    opacity: 0;
    transition: opacity .12s;
}

.acc-check input:checked {
    background: var(--acc-accent);
    box-shadow: 3px 3px 8px rgba(238, 117, 152, .4);
}

.acc-check input:checked::after { opacity: 1; }

.acc-check:hover input { box-shadow: inset 3px 3px 7px rgba(206, 140, 166, .30),
                inset -3px -3px 7px rgba(255, 255, 255, .95), 0 0 0 1px var(--acc-line); }

.acc-check:hover input:checked { box-shadow: 3px 3px 8px rgba(238, 117, 152, .55); }

.acc-check a { color: var(--acc-accent-dark); }

/* ── Перечень «Мы храним о вас» ────────────────────────────────────────────
 * Устройство таблицы характеристик с карточки товара (замер spec_row: подпись
 * PT Mono 10px .2em uppercase цветом #8A7079 слева, значение PT Serif справа,
 * между строками полоса 1px #FFD6E4). Разница одна: там две колонки жёстко,
 * здесь подпись над значением на узкой колонке - строк с длинными значениями
 * больше, и в две колонки они переносились бы по слогам.
 */
.acc-facts {
    margin: 0;
    padding: 0;
}

.acc-fact {
    display: grid;
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
    gap: 4px 18px;
    align-items: baseline;
    padding: 12px 0;
    border-top: 1px solid var(--acc-line);
}

.acc-fact:first-child { border-top: 0; padding-top: 0; }

.acc-fact__label {
    font-family: var(--acc-mono-font);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--acc-muted);
    line-height: 1.5;
}

.acc-fact__value {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

/* Пояснение «зачем это поле» - второй строкой и тише значения: человек читает
   перечень взглядом сверху вниз, и одинаковый вес мешал бы. */
.acc-fact__note {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: var(--acc-muted);
    margin-top: 2px;
}

/* В широкой карточке (подтверждение удаления) значения длинные, подписи
   короткие - подпись уезжает в свою колонку поуже. */
.acc-facts--wide .acc-fact { grid-template-columns: minmax(0, 130px) minmax(0, 1fr); }

/* Шесть строк перечня в две колонки. В один столбец карточка «Мы храним о вас»
   вырастала до 600px и перевешивала правую колонку на треть экрана - внизу
   справа оставалась та самая пустота, из-за которой вкладку и переделывали.
   В две колонки те же шесть строк занимают три ряда, и колонки сходятся. */
.acc-facts--pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
}

/* Внутри половины подпись встаёт НАД значением: 150px под подпись плюс 18px
   зазора оставляют значению 170 из 339, и «логин, на него приходит код входа»
   ломается на три строки, а соседние строки перестают совпадать по высоте. */
.acc-facts--pair .acc-fact { grid-template-columns: minmax(0, 1fr); }

/* Отбивку сверху снимаем у ПЕРВЫХ ДВУХ строк, а не у одной: в две колонки
   верхний ряд - это две строки, и полоса над второй висела бы в воздухе. */
.acc-facts--pair .acc-fact:nth-child(-n + 2) {
    border-top: 0;
    padding-top: 0;
}

/* ── Переключатель рассылки ────────────────────────────────────────────────
 * Выглядит галочкой панели фильтров, работает кнопкой формы: подписка и
 * отписка - одно нажатие каждая (ФЗ-38 требует прекращать рекламу по первому
 * требованию, а «снимите галочку, потом нажмите Сохранить» - это два).
 * Поэтому квадрат ниже нарисован span-ом, а не input-ом: настоящий чекбокс
 * внутри кнопки не кликается.
 */
.acc-switch {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--acc-r-xs);
    background: transparent;
    color: var(--acc-text);
    font-family: var(--acc-text-font);
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    transition: .16s;
}

.acc-switch:hover { background: var(--acc-bg); }

.acc-switch__box {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 2px;
    border-radius: 8px;
    background: var(--acc-bg);
    box-shadow: inset 3px 3px 7px rgba(206, 140, 166, .30),
                inset -3px -3px 7px rgba(255, 255, 255, .95);
    display: grid;
    place-items: center;
    transition: .16s;
}

.acc-switch__box::after {
    content: "✓";
    font-size: 12px;
    line-height: 1;
    color: #fff;
    opacity: 0;
    transition: opacity .12s;
}

.acc-switch--on .acc-switch__box {
    background: var(--acc-accent);
    box-shadow: 3px 3px 8px rgba(238, 117, 152, .4);
}

.acc-switch--on .acc-switch__box::after { opacity: 1; }

.acc-switch:hover .acc-switch__box { box-shadow: inset 3px 3px 7px rgba(206, 140, 166, .30),
                inset -3px -3px 7px rgba(255, 255, 255, .95), 0 0 0 1px var(--acc-line); }

.acc-switch--on:hover .acc-switch__box { box-shadow: 3px 3px 8px rgba(238, 117, 152, .55); }

/* ── Клетки кода ───────────────────────────────────────────────────────────
 * Шесть отдельных клеток вместо одного поля: так видно, сколько цифр введено,
 * и вставка кода из сообщения раскладывается по местам. Разметку строит
 * account.js из запасного однострочного поля, поэтому без скрипта вход не
 * ломается. Клетки - это чекбокс панели фильтров, увеличенный до размера
 * цифры: та же вдавленная тень, то же скругление 8px в пропорции.
 * grid c 1fr колонками, а не фиксированная ширина: на 390 шесть клеток
 * обязаны поместиться в строку, а не уехать за экран.
 */
.acc-code {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.acc-code__cell {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 64px;
    border: 0;
    border-radius: var(--acc-r-xs);
    background: var(--acc-bg);
    box-shadow: var(--acc-inset);
    font-family: var(--acc-mono-font);
    font-size: 26px;
    line-height: 1;
    text-align: center;
    color: var(--acc-text);
    padding: 0;
    outline: none;
    transition: box-shadow .16s, background .16s;
    -moz-appearance: textfield;
}

.acc-code__cell::-webkit-outer-spin-button,
.acc-code__cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.acc-code__cell:hover { box-shadow: var(--acc-inset), 0 0 0 1px var(--acc-line); }

/* Заполненная клетка выступает из подложки, как кнопка «+» на плитке. */
.acc-code__cell[data-filled] {
    background: var(--acc-surface);
    box-shadow: var(--acc-shadow-sm);
}

.acc-code__cell:focus {
    background: var(--acc-surface);
    box-shadow: var(--acc-shadow-sm), 0 0 0 2px var(--acc-accent);
}

.acc-code--bad .acc-code__cell { box-shadow: var(--acc-inset), 0 0 0 2px #C43A5E; }

.acc-code--bad .acc-code__cell:focus {
    background: var(--acc-surface);
    box-shadow: var(--acc-shadow-sm), 0 0 0 2px #C43A5E;
}

/* ── Кнопки ────────────────────────────────────────────────────────────────
 * Главная кнопка снята с «В корзину» на карточке товара и с кнопок обложки:
 * скругление 999px, фон #EE7598, PT Mono 12px, letter-spacing .18em,
 * uppercase, поля 19px 32px, розовая тень. Вторая кнопка - светлая пара
 * оттуда же (#FFF8FB и тень панели).
 */

.acc-btn {
    display: inline-grid;
    place-items: center;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    background: var(--acc-accent);
    color: #fff;
    font-family: var(--acc-ui-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 19px 32px;
    box-shadow: var(--acc-accent-shadow);
    text-decoration: none;
    transition: .16s;
    text-align: center;
}

.acc-btn:hover {
    background: var(--acc-accent-dark);
    transform: translateY(-2px);
}

.acc-btn[disabled],
.acc-btn[aria-disabled="true"] {
    background: var(--acc-line);
    color: var(--acc-muted);
    box-shadow: var(--acc-inset-sm);
    cursor: not-allowed;
    transform: none;
}

.acc-btn--wide { width: 100%; }

/* Светлая кнопка обложки и 404: фон панели, её тень и поля 19px 30px -
   на 2px уже главной, ровно как в макете («В каталог» рядом с «На главную»). */
.acc-btn--light {
    background: var(--acc-surface);
    color: var(--acc-text);
    box-shadow: var(--acc-shadow);
    padding: 19px 30px;
}

.acc-btn--light:hover {
    background: var(--acc-line);
    color: var(--acc-accent-dark);
}

/* Приглушённая кнопка: без фона, размерами чипа сортировки каталога
   (замер: 999px, поля 10px 18px).
   ⚠ Семейство и жирность она НЕ задаёт, а берёт у `.acc-btn`. После смены
   той на гротеск 15/700 здесь остались бы 11px моноширинных метрик - то
   есть заметно мельче и жиже соседней «Войти». Поэтому кегль поднят до 13
   и разрядка снята: у гротеска строчные и так шире моноширинных, разрядка
   поверх делала бы надпись рыхлой. Тринадцать против пятнадцати у главной -
   это и есть признак второстепенной кнопки, вместе с отсутствием заливки. */
.acc-btn--ghost {
    background: transparent;
    color: var(--acc-muted);
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    padding: 10px 18px;
}

.acc-btn--ghost:hover {
    background: var(--acc-bg);
    color: var(--acc-accent-dark);
    transform: none;
}

.acc-btn--danger:hover {
    background: var(--acc-accent-dark);
    color: #fff;
}

/* Кнопка необратимого действия (второй шаг удаления аккаунта). Цвет не новый:
   это тот же #C43A5E, которым уже подсвечиваются ошибочные поля. Розовая
   акцентная тут не годится - ею подписаны «Сохранить» и «В корзину», и
   удаление аккаунта выглядело бы такой же будничной кнопкой. */
.acc-btn--warn {
    background: #C43A5E;
    color: #fff;
    box-shadow: 6px 6px 16px rgba(196, 58, 94, .38);
}

.acc-btn--warn:hover { background: #A32B52; }

/* Кнопка ждёт второго нажатия (подтверждение вешает account.js). */
.acc-btn[data-asking] {
    background: var(--acc-accent-dark);
    color: #fff;
    box-shadow: var(--acc-accent-shadow);
}

/* Кнопка ждёт ответ сервера: подпись меняет скрипт, вид - этот класс. */
.acc-btn[aria-busy="true"] {
    opacity: .7;
    cursor: progress;
    transform: none;
}

.acc-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* Кнопка сохранения справа снизу, над ней отбивка панели. */
.acc-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
    border-top: 1px solid var(--acc-line);
    margin-top: 26px;
    padding-top: 22px;
}

.acc-foot__note {
    margin: 0 auto 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--acc-muted);
    max-width: 42ch;
}

.acc-hint {
    font-size: 15px;
    line-height: 1.5;
    color: var(--acc-muted);
    margin: 18px 0 0;
}

.acc-hint a { color: var(--acc-accent-dark); }

/* Ссылка-возврат («Изменить номер»): именно ссылка, а не кнопка - шаг назад
   не должен спорить весом с «Войти». Подчёркивание цветом линий витрины. */
.acc-back {
    border: 0;
    background: none;
    padding: 0;
    margin: 16px 0 0;
    cursor: pointer;
    font-family: var(--acc-ui-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--acc-muted);
    text-decoration: underline;
    text-decoration-color: var(--acc-line);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition: .14s;
}

.acc-back:hover {
    color: var(--acc-accent-dark);
    text-decoration-color: var(--acc-accent);
}

/* Строка выхода: отдельно от панели и приглушённая, чтобы не соперничать
   с «Сохранить». */
.acc-quiet {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 22px;
    padding: 0 4px;
    font-size: 15px;
    color: var(--acc-muted);
}

/* ── Сообщения ─────────────────────────────────────────────────────────── */

.acc-message {
    border-radius: 20px;
    padding: 15px 22px;
    font-size: 15px;
    line-height: 1.45;
    margin: 0 0 20px;
    /* Не во всю ширину 1280: короткая строка «Сохранили» через весь экран
       выглядит системным баннером, а не ответом на нажатие кнопки. */
    max-width: 720px;
}

.acc-message--error {
    background: #FFE0E8;
    color: #A32B52;
    box-shadow: inset 3px 3px 8px rgba(206, 140, 166, .25);
}

.acc-message--ok {
    background: #EAF6EC;
    color: #33693F;
}

/* Только цвета. Шрифт и кегль сняты 01.09: это ТЕКСТ сообщения, и он обязан
   читаться так же, как в сёстрах `--ok` и `--error`, которые своего шрифта
   не задают вовсе. Моноширинный отличал плашку от них без всякой причины. */
.acc-message--demo {
    background: #FFF3D6;
    color: #7A5A16;
}

/* Плашка «код ушёл»: мягкая, цветом линий витрины. */
.acc-message--sent {
    background: var(--acc-line);
    color: var(--acc-accent-dark);
}

/* ── Вкладки кабинета ──────────────────────────────────────────────────────
 * Один в один ряд сортировки каталога: панель-пилюля #FFF8FB со скруглением
 * 999px и тенью 8/20, слева метка PT Mono 10px .2em uppercase, дальше чипы
 * (999px, поля 10px 18px, PT Mono 11px, letter-spacing .08em). Активный чип
 * там - фон #FFD6E4 и цвет #C9436E, наведение на обычный - фон #FFEBF2.
 */

.acc-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--acc-surface);
    border-radius: 999px;
    box-shadow: var(--acc-shadow);
    padding: 12px 18px;
    margin: 0 0 26px;
    list-style: none;
}

.acc-tabs__label {
    font-family: var(--acc-mono-font);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--acc-muted);
    padding: 0 8px;
}

.acc-tab {
    display: inline-block;
    font-family: var(--acc-ui-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
    text-decoration: none;
    color: var(--acc-text);
    border-radius: 999px;
    padding: 10px 18px;
    transition: .16s;
    white-space: nowrap;
}

.acc-tab:hover { background: var(--acc-bg); }

.acc-tab--active {
    background: var(--acc-line);
    color: var(--acc-accent-dark);
}

.acc-tab--active:hover { background: var(--acc-line); }

/* Телефон владельца стоит справа в ряду вкладок - ровно там, где у каталога
   счётчик «1-12 из 32», и тем же PT Mono 10px .14em uppercase. */
.acc-tabs__who {
    margin-left: auto;
    font-family: var(--acc-mono-font);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--acc-muted);
    padding-right: 8px;
}

.acc-head {
    display: flex;
    /* По базовой линии, а не по низу: у заголовка снизу висит пунктирная
       отбивка (`.acc-title::after`, 2 точки плюс отступ 10), и выравнивание
       по низу опустило бы крошку на её уровень, ниже строки заголовка.
       Замер: рамка заголовка 68 при кегле 56, из них 12 - отбивка. */
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
    /* Отступ сверху раньше давала крошка своим `margin: 34px 0 14px`. Она
       переехала внутрь этого ряда, значит отступ теперь на ряду. */
    margin-top: 34px;
    margin-bottom: 28px;
}

.acc-head .acc-title { margin-bottom: 0; }

/* Крошка в одной строке с заголовком, прижата вправо - как номер телефона в
   ряду вкладок ниже. Свои внешние отступы ей здесь не нужны: сверху отступ у
   ряда, снизу тоже. */
.acc-head .acc-crumbs {
    margin: 0 0 0 auto;
}

/* ── Пустое состояние ──────────────────────────────────────────────────────
 * Устройство панели 404: относительное позиционирование, скрытый вылет,
 * два круга #FFD6E4 с анимацией floaty, текст по центру. Вместо гигантской
 * цифры - круглый значок с глифом магазина (те же ♡ и 🧺, что в шапке).
 */

/* Высота фиксирована и одинакова у всех пустых состояний (Павел 21.08:
   «пустые состояния не должны оставлять полстраницы пустой»). Три экрана -
   заказы, адреса, избранное - раньше давали панели 300, 250 и 300 пикселей, и
   при переключении вкладок подвал прыгал. Теперь панель одна и та же, а текст
   стоит по центру, а не липнет к верхнему краю.
   360px - это высота самого длинного из трёх пустых состояний плюс поля;
   короткие догоняются пустотой ВНУТРИ панели, а не под ней.
   400 - это замер самого высокого из трёх (заказы и избранное: значок,
   заголовок, две строки текста и кнопка). У адресов кнопки нет, своей высоты
   у него 318, и без этой строки панель была бы на 80px ниже соседних. */
.acc-empty {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 52px 40px;
    min-height: 400px;
    display: grid;
    /* Только по вертикали: по горизонтали блок остаётся во всю ширину панели,
       иначе он сжался бы до самой длинной строки и на 390 вылез бы за край. */
    align-content: center;
}

.acc-empty__blob {
    position: absolute;
    border-radius: 50%;
    background: var(--acc-line);
    pointer-events: none;
}

.acc-empty__blob--one {
    width: 220px;
    height: 220px;
    opacity: .5;
    top: -80px;
    left: -60px;
    animation: floaty 5s ease-in-out infinite;
}

.acc-empty__blob--two {
    width: 140px;
    height: 140px;
    opacity: .4;
    bottom: -50px;
    right: -40px;
    animation: floaty 6s ease-in-out infinite;
}

.acc-empty__body { position: relative; }

.acc-empty__mark {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin: 0 auto 22px;
    background: var(--acc-bg);
    box-shadow: var(--acc-inset);
    display: grid;
    place-items: center;
    font-size: 38px;
    line-height: 1;
    color: var(--acc-accent-dark);
}

/* Заголовок пустого экрана: Playfair 900 38px с тем же letter-spacing, что
   у подзаголовка 404. */
.acc-empty__title {
    font-family: var(--acc-title-font);
    font-weight: 900;
    font-size: 30px;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0 0 12px;
}

.acc-empty__text {
    font-size: 17px;
    line-height: 1.55;
    color: var(--acc-muted);
    margin: 0 auto 26px;
    max-width: 46ch;
}

/* ── Адреса ────────────────────────────────────────────────────────────────
 * Сетка плиток каталога, только мельче: там repeat(4,1fr) с зазором 20px,
 * здесь три колонки и 18px - адрес это две строки текста, а не фотография.
 * Карточка - малая карточка витрины: скругление 24px и тень 6/16.
 */

.acc-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}

.acc-address {
    position: relative;
    background: var(--acc-surface);
    border-radius: var(--acc-r-sm);
    box-shadow: var(--acc-shadow-sm);
    padding: 22px 24px 20px;
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s;
}

/* Подъём при наведении - как у плитки товара (класс scp57cffe), только без
   поворота: у адреса нет фотографии, наклон читался бы как сбой. */
.acc-address:hover,
.acc-address:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--acc-shadow-up);
}

/* Метка основного адреса: чип бейджа «Нет в наличии» с плитки товара
   (999px, поля 5px 12px в пропорции, PT Mono 10px .14em uppercase). */
.acc-address__flag {
    display: inline-block;
    font-family: var(--acc-mono-font);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--acc-accent-dark);
    background: var(--acc-bg);
    border-radius: 999px;
    padding: 6px 13px;
    margin-bottom: 12px;
    box-shadow: var(--acc-inset-sm);
}

.acc-address__text {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 6px;
}

.acc-address__note {
    font-size: 14px;
    line-height: 1.5;
    color: var(--acc-muted);
    margin: 0;
}

/* Кнопки правки показываются при наведении и при заходе табом. На тач-экране
   наведения не бывает, там они видны всегда - иначе адрес не отредактировать
   вовсе (ниже в медиазапросе). */
.acc-address__tools {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 14px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s, transform .18s;
}

.acc-address:hover .acc-address__tools,
.acc-address:focus-within .acc-address__tools {
    opacity: 1;
    transform: none;
}

/* Тач без наведения - показываем всегда, по СПОСОБУ ВВОДА, а не по ширине.
   Ниже есть такое же правило в `max-width: 768px`, и оно закрывает телефон, но
   не планшет: айпад в альбоме это 1024, наведения там нет и не будет, порог по
   ширине не срабатывает. Замер 02.09 во фрейме 1024: computed `opacity 0`,
   `(hover: none)` false, `(max-width: 768px)` false - показать кнопки нечем.
   Цена была не «неудобно»: `opacity: 0` НЕ убирает элемент из потока событий,
   `elementFromPoint` в центр каждой кнопки возвращал саму кнопку. То есть в
   карточке висели пять слепых, но нажимаемых зон, среди них две «Удалить» по
   91x32. Скрытая кнопка удаления опаснее отсутствующей.
   Правило в 768 не трогаем: оно чужой половины, а два условия уживаются - на
   телефоне сработают оба и дадут одно и то же. */
@media (hover: none) {
    .acc-address__tools {
        opacity: 1;
        transform: none;
    }
}

/* Кнопки «Изменить», «Удалить», «Сделать основным» в карточке адреса.
   Семейство берут у `.acc-btn`, а кегль держат свой. Десять точек гротеска
   прописными читались плотнее витринных чипов; на ревью codex указал, что и
   одиннадцати мало - это то же сочетание «новое семейство при старых мелких
   метриках». Двенадцать: «СДЕЛАТЬ ОСНОВНЫМ» это 128 точек при 236 внутри
   карточки на экране 320, запас есть. */
.acc-address__tools .acc-btn {
    padding: 9px 15px;
    font-size: 12px;
    letter-spacing: .5px;
}

/* Карточка-плюс в той же сетке: пунктирная рамка вместо тени, чтобы место
   читалось как свободное, а не как ещё один адрес. */
.acc-add {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    min-height: 150px;
    border-radius: var(--acc-r-sm);
    border: 2px dashed var(--acc-line);
    background: transparent;
    color: var(--acc-muted);
    text-decoration: none;
    font-family: var(--acc-mono-font);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: .18s;
}

.acc-add:hover {
    border-color: var(--acc-accent);
    color: var(--acc-accent-dark);
    background: var(--acc-surface);
}

.acc-add__plus {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--acc-accent);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 4px 4px 12px rgba(238, 117, 152, .4);
    transition: transform .2s;
}

/* Плюс поворачивается ровно как «+» на плитке товара (класс scpe170b6). */
.acc-add:hover .acc-add__plus { transform: scale(1.15) rotate(90deg); }

.acc-inline { display: inline; }

/* ── Избранное ─────────────────────────────────────────────────────────────
 * Сетка та же, что в каталоге: repeat(4,1fr) с зазором 20px. Плитки берём
 * прямо из generated/partials/product_card.html, поэтому своих стилей у них
 * тут нет вовсе - одна разметка, один вид.
 */

.acc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 22px;
}

/* ── Видимый фокус ─────────────────────────────────────────────────────────
 * Браузерная пунктирная рамка на розовом фоне почти не видна, поэтому по
 * всем экранам кабинета своя обводка акцентом. :focus-visible, а не :focus:
 * при клике мышью обводка не нужна, при обходе табом обязательна.
 */

.acc-shell a:focus-visible,
.acc-shell button:focus-visible,
.acc-shell input:focus-visible,
.acc-shell textarea:focus-visible,
.acc-shell select:focus-visible,
.acc-shell summary:focus-visible,
.acc-user a:focus-visible,
.acc-user button:focus-visible,
.acc-user summary:focus-visible {
    outline: 2px solid var(--acc-accent-dark);
    outline-offset: 3px;
}

/* У полей своя обводка тенью, браузерная поверх неё двоилась бы. */
.acc-shell .acc-input:focus-visible,
.acc-shell .acc-code__cell:focus-visible {
    outline: 2px solid var(--acc-accent-dark);
    outline-offset: 2px;
}

/* Поле поиска в шапке приезжает из макета с ИНЛАЙНОВЫМ `outline:none`, а
   инлайн бьёт таблицу стилей по каскаду - без !important обход табом через
   шапку кабинета шёл вслепую. Единственное !important в файле, и оно нужно
   ровно из-за чужой инлайновой строки, которую нам не править (шапка лежит
   в generated/). На витринных страницах поле остаётся как было. */
.acc-shell header input[type="search"]:focus-visible {
    outline: 2px solid var(--acc-accent-dark) !important;
    outline-offset: 2px;
}

/* ── Промежуточные ширины ──────────────────────────────────────────────── */

/* Своих боковых полей на планшетных ширинах у .acc-main больше нет: было 16
   против 24 у шапки и подвала той же страницы, то есть содержимое кабинета
   выходило шире собственной шапки на 8 точек с каждой стороны. Поля даёт
   общий .site-col, мобильные 16 остаются ниже в блоке 768. */

@media (max-width: 1100px) {
    .acc-hero {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .acc-hero__side { max-width: 640px; }

    .acc-blob--two { display: none; }

    .acc-card--form { max-width: 640px; }

    .acc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .acc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Колонка уже 1100: пара полей в ряд остаётся, а две колонки карточек
       превращаются в одну. Держать их до последнего нельзя - правая ужимается
       до 400px, и «Хочу письма о новинках и скидках» лезет в три строки. */
    .acc-cols { grid-template-columns: minmax(0, 1fr); }

    /* Шесть колонок полей на такой ширине дают поле «Дом» в 90px. Три ряда по
       две колонки: город с индексом, улица с домом, квартира с комментарием. */
    .acc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .acc-field--1,
    .acc-field--2,
    .acc-field--3 { grid-column: span 1; }

    .acc-field--4 { grid-column: span 2; }
}

/* ── Мобильная ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .acc-main { padding: 0 16px 30px; }

    .acc-crumbs {
        font-size: 10px;
        margin: 18px 0 10px;
    }

    .acc-title {
        font-size: 34px;
        margin-bottom: 18px;
    }

    .acc-title::after { display: none; }

    .acc-head {
        gap: 8px;
        margin-top: 18px;
        margin-bottom: 18px;
    }

    /* На телефоне крошка возвращается на свою строку НАД заголовком: в 375
       точек рядом с ним ей тесно. `order: -1` поднимает её выше заголовка,
       ширина во всю строку заставляет ряд перенестись. */
    .acc-head .acc-crumbs {
        order: -1;
        width: 100%;
        margin: 0 0 10px;
    }

    .acc-tabs__who {
        margin-left: 0;
        width: 100%;
        padding: 6px 4px 0;
    }

    .acc-eyebrow {
        font-size: 10px;
        margin-bottom: 14px;
    }

    .acc-lead { font-size: 16px; }

    .acc-points { margin-top: 18px; }

    .acc-points li { font-size: 15px; }

    .acc-blob--one {
        width: 150px;
        height: 150px;
        top: -40px;
        left: -70px;
    }

    .acc-card {
        padding: 24px 20px;
        border-radius: var(--acc-r-sm);
    }

    .acc-card__title { font-size: 21px; }

    /* Панель-пилюля на телефоне превращается в блок: четыре чипа в строку
       не встают, а пилюля с переносом выглядит сломанной. */
    .acc-tabs {
        border-radius: var(--acc-r-sm);
        padding: 14px 14px 12px;
        gap: 8px;
        margin-bottom: 20px;
        box-shadow: var(--acc-shadow-sm);
    }

    .acc-tabs__label {
        width: 100%;
        padding: 0 4px 2px;
    }

    /* ⚠ Второе место, где вкладке задан кегль. См. оговорку у `.acc-btn`
       выше: правка только базового правила оставила бы телефон на 10px. */
    .acc-tab {
        padding: 10px 14px;
        font-size: 12px;
    }

    .acc-row { grid-template-columns: 1fr; }

    /* Колонок карточек нет вовсе, поля в одну. Зазор мельче общего: на 390
       22px между панелями превращают экран в лестницу. */
    .acc-cols,
    .acc-col { gap: 16px; }

    .acc-fields { grid-template-columns: minmax(0, 1fr); }

    .acc-field--1,
    .acc-field--2,
    .acc-field--3,
    .acc-field--4 { grid-column: span 1; }

    /* Подпись над значением: 150px под подпись плюс значение рядом на 358
       оставляют значению 190px, и «имя, почту, день рождения…» ломается
       по слогам. Две колонки перечня на телефоне тем более не встают. */
    .acc-fact { grid-template-columns: minmax(0, 1fr); }

    .acc-facts--wide .acc-fact { grid-template-columns: minmax(0, 1fr); }

    .acc-facts--pair { grid-template-columns: minmax(0, 1fr); }

    .acc-facts--pair .acc-fact:nth-child(2) {
        border-top: 1px solid var(--acc-line);
        padding-top: 12px;
    }

    /* На 390 текст переносится иначе, замер самого высокого - 347. */
    .acc-empty { min-height: 350px; }

    .acc-list,
    .acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Наведения на телефоне нет: кнопки адреса видны всегда. */
    .acc-address__tools {
        opacity: 1;
        transform: none;
    }

    .acc-address { padding: 18px 18px 16px; }

    .acc-empty { padding: 34px 20px; }

    .acc-empty__title { font-size: 24px; }

    .acc-empty__text { font-size: 15px; }

    .acc-empty__mark {
        width: 76px;
        height: 76px;
        font-size: 30px;
        margin-bottom: 18px;
    }

    .acc-empty__blob--one {
        width: 140px;
        height: 140px;
        top: -50px;
        left: -40px;
    }

    .acc-empty__blob--two { display: none; }

    /* ⚠ Кегль кнопки живёт в ДВУХ местах: здесь и в базовом правиле.
       Правка только базового оставила бы телефон с прежними 11px, то есть
       с гротеском, втиснутым в метрики моноширинного. Поймано разбором
       01.09. Поля 16x24 оставлены: они держат высоту под палец. */
    .acc-btn {
        padding: 16px 24px;
        font-size: 15px;
        letter-spacing: .9px;
    }

    /* ⚠ Кегль ЗДЕСЬ обязателен, без него ghost на телефоне равна главной.
       У `.acc-btn--ghost` и у мобильного `.acc-btn` выше специфичность
       одинаковая (0,1,0), медиазапрос её не повышает, а лежит ниже по файлу
       и потому выигрывает. До 01.09 это не было видно: оба правила стояли на
       11px. Как только базовая кнопка выросла до 15, «Отменить» выросла
       вместе с ней и сравнялась с «Сохранить». Нашёл codex на ревью. */
    .acc-btn--ghost { padding: 10px 14px; font-size: 13px; }

    .acc-code { gap: 8px; }

    .acc-code__cell {
        height: 56px;
        font-size: 22px;
    }

    .acc-input--phone {
        font-size: 18px;
        padding: 18px 20px;
    }

    .acc-actions .acc-btn { flex: 1 1 auto; }

    .acc-foot { justify-content: stretch; }

    .acc-foot .acc-btn { width: 100%; }
}

@media (max-width: 430px) {
    /* Две плитки товара на 390 уже узкие, но читаемые: 390-32-20 = 169 на
       колонку, картинка 3:4 остаётся крупнее миниатюры. Адреса в одну. */
    .acc-list { grid-template-columns: 1fr; }
}

/* ── Заказы кабинета (модуль 2) ────────────────────────────────────────────
 *
 * Своей вёрстки не изобретаем: строка заказа это карточка адреса
 * (.acc-address) с её скруглением 24 и тенью 6/16, плашка статуса - чип с
 * плитки товара (999px, PT Mono 10px, .14em uppercase), миниатюры - те же
 * пропорции 4:5, что у картинок в блоке результата на /order/.
 *
 * Список в ОДНУ колонку во всю ширину, а не сетка на 3: у заказа длинная
 * строка состава и ряд миниатюр, в треть колонки они не помещаются, а панель
 * на 640px оставила бы справа пустую половину экрана - ту самую, из-за
 * которой переделывали профиль 21.08.
 */

.acc-orders {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.acc-order {
    background: var(--acc-surface);
    border-radius: var(--acc-r-sm);
    box-shadow: var(--acc-shadow-sm);
    padding: 20px 24px;
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s;
}

.acc-order:hover,
.acc-order:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--acc-shadow-up);
}

.acc-order__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.acc-order__num {
    font-family: var(--acc-title-font);
    font-weight: 900;
    font-size: 22px;
    color: var(--acc-accent-dark);
    text-decoration: none;
}

.acc-order__num:hover { text-decoration: underline; }

.acc-order__date {
    font-family: var(--acc-mono-font);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--acc-muted);
}

/* Плашка статуса: чип с плитки товара, только в фирменной паре line/accent. */
.acc-order__status {
    margin-left: auto;
    background: var(--acc-line);
    color: var(--acc-accent-dark);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: var(--acc-mono-font);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Отменённый - серым: цветная плашка читалась бы как «всё хорошо». */
.acc-order__status--off { background: #EFE6EA; color: var(--acc-muted); }

.acc-order__thumbs { display: flex; gap: 8px; margin-bottom: 10px; }

.acc-order__thumbs img {
    width: 44px;
    height: 56px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.acc-order__items {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--acc-text);
}

.acc-order__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.acc-order__qty {
    font-family: var(--acc-mono-font);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--acc-muted);
}

.acc-order__total {
    margin-left: auto;
    font-family: var(--acc-title-font);
    font-weight: 900;
    font-size: 22px;
    white-space: nowrap;
}

/* ── Подробности заказа ─────────────────────────────────────────────────── */

.acc-orderlines { margin-bottom: 6px; }

.acc-line {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--acc-bg);
}

.acc-line:first-child { border-top: 0; padding-top: 0; }

.acc-line__img { width: 56px; height: 70px; border-radius: 12px; object-fit: cover; display: block; }
.acc-line__box { min-width: 0; }

.acc-line__title {
    font-family: var(--acc-title-font);
    font-weight: 700;
    font-size: 17px;
    display: block;
}

.acc-line__title a { color: inherit; text-decoration: none; }
.acc-line__title a:hover { color: var(--acc-accent-dark); }

/* Примечание под названием товара в строке заказа. Это связный текст, а не
   подпись, поэтому основной шрифт страницы и читаемый кегль вместо
   моноширинных десяти точек - самого мелкого текста во всём файле.
   `line-height` задан явно: своего у правила не было, и оно брало 1.62 от
   `.acc-main`, отчего примечание распухало по высоте сильнее заголовка. */
.acc-line__note {
    font-size: 14px;
    line-height: 1.45;
    color: var(--acc-muted);
}

.acc-line__sum {
    margin-left: auto;
    font-family: var(--acc-title-font);
    font-weight: 900;
    font-size: 19px;
    white-space: nowrap;
}

/* Шкала статуса: те же кружки, что покупатель видит на /order/, только в
   столбик - в правой колонке кабинета ряд из четырёх шагов не помещается. */
.acc-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.acc-step { display: flex; align-items: center; gap: 12px; color: var(--acc-muted); }

.acc-step__dot {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: var(--acc-bg);
    color: var(--acc-muted);
    display: grid;
    place-items: center;
    font-family: var(--acc-mono-font);
    font-size: 12px;
    box-shadow: var(--acc-inset-sm);
}

.acc-step__label { font-family: var(--acc-title-font); font-weight: 700; font-size: 16px; }
.acc-step--done { color: var(--acc-text); }

.acc-step--done .acc-step__dot {
    background: var(--acc-accent);
    color: #fff;
    box-shadow: none;
}

@media (max-width: 560px) {
    .acc-order { padding: 18px 18px 16px; }
    .acc-order__status { margin-left: 0; }
    .acc-order__total { margin-left: 0; }
    .acc-order__foot .acc-btn { width: 100%; }
}

/* Уважаем системную настройку «меньше движения»: витрина гасит анимации
   тем же способом (storefront.css), декоративные круги не исключение. */
@media (prefers-reduced-motion: reduce) {
    .acc-blob,
    .acc-empty__blob,
    .acc-title::after { animation: none !important; }

    .acc-address,
    .acc-address__tools,
    .acc-order,
    .acc-btn,
    .acc-switch,
    .acc-switch__box,
    .acc-pill,
    .acc-avatar { transition: none !important; }
}