:root {
            --primary: #01A572;
            --primary-light: #E6F6F1;
            --bg-page: #F9FAFB;
            --bg-card: #FFFFFF;
            --border: #CBCED4; /* было #E5E7EB - слишком светлое, границы почти не видны */
            --text-main: #111827;
            --text-muted: #6B7280;
            --status-done-bg: #F3F4F6;
            --status-done-text: #9CA3AF;
        }

        /* flex-wrap + footer:100% — иначе футер становится ТРЕТЬИМ элементом
           этой строки и встаёт СПРАВА от контента: замер на 1006px давал
           main шириной 154px и футер 632px рядом с ним. Футер подключили на
           страницы кабинета позже самой раскладки (address/news/order/profile
           заканчивались на </main>), и строка была рассчитана на двоих.
           На ≤768px тут flex-direction: column, поэтому баг был только на
           десктопе. */
        body {
            display: flex;
            flex-wrap: wrap;
            min-height: 100vh;
        }
        body > footer { width: 100%; }

        /* МЕСТО ПОД ШАПКУ ЗДЕСЬ НЕ ЗАДАЁМ — оно уже есть, и это проверено
           замером (, когда страницы кабинета получили шапку): .header —
           position:fixed высотой 80px, aside имеет свои 90px padding-top, а main
           получает 80px из css/main.css, который подключается ПОСЛЕ этого файла и
           перебивает здешние 48px. Попытка добавить padding-top самому body
           бесполезна по той же причине — main.css следом ставит body{padding:0}.
           Если однажды порядок подключения стилей поменяют, отступ у main пропадёт и
           контент уедет под шапку — искать надо будет здесь.
           */

        /* Side Navigation */
        /* ЛИПНЕТ САМО МЕНЮ, А НЕ КОЛОНКА: иначе меню кабинета слева уходило
           вниз под футер.

           Было: aside position:sticky + height:100vh. Колонка залипала во весь экран
           и продолжала висеть, когда страница докручена до подвала, - нижние пункты
           («Адрес доставки», «Новости сайта», «Мои данные», «Выход») оказывались ПОД
           футером, который проезжает поверх (см. правило footer ниже). На коротких
           страницах кабинета это половина меню.

           Стало: колонка обычная и тянется ровно на высоту контента (body - флекс,
           align-items:stretch по умолчанию), а sticky отдан <nav> внутри. Меню
           по-прежнему следует за прокруткой на длинных экранах, но заканчивается там
           же, где заканчивается страница, - перекрывать футеру больше нечего.
           */
        aside {
            width: 260px;
            background: #fff;
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            padding: 90px 16px 32px 16px;
        }

        /* ПОДВАЛ ПОВЕРХ ЛИПКОГО МЕНЮ.
           <body> здесь флексовый, <aside> и <footer> в нём соседи. Меню
           приклеено к верху и высотой во весь экран, а его контейнер —
           сам body, то есть тянется до конца страницы: докрутив вниз,
           покупатель видел белую полосу 260px поверх подвала. Замер на
           /account/orders/: скрыто 15 элементов, включая всю колонку
           «Информация» (О Компании, Гарантия качества, Остерегайтесь
           мошенников) и логотип.
           z-index подвалу, а не отмена sticky: липкость меню нужна на
           длинных экранах кабинета, а подвал по нему просто проезжает
           сверху — как и должен, он ниже по документу. */
        footer {
            position: relative;
            z-index: 1;
        }

        /* Только сайдбар кабинета (lib/view/_account-nav.php: <aside><nav>...),
           а не любой <nav> на странице - голый тег-селектор ловил и общий <nav
           class="header__nav desktop-nav"> шапки сайта (lib/view/_nav.php),
           растягивая зелёную плашку меню на flex:1 по всей ширине хедера (611px
           вместо ~390px) - разница читалась как "пустота справа в меню".
           */
        /* flex:0 0 auto, а не прежний flex:1 - растянутый на всю колонку <nav>
           липнуть не может: ему просто некуда двигаться внутри своего же
           размера. Высоту колонке теперь задаёт контент страницы. */
        aside nav {
            flex: 0 0 auto;
            position: sticky;
            /* 90px - под фиксированной шапкой (80px) плюс воздух, тот же
               отступ, что у padding-top колонки. */
            top: 90px;
        }

        .nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 16px;
            text-decoration: none;
            color: var(--text-main);
            border-radius: 12px;
            font-weight: 600;
            /* Поимённо: запись без свойства - это `all` по умолчанию. */
            transition: background var(--zd-dur-fast) var(--zd-ease),
                        color var(--zd-dur-fast) var(--zd-ease);
            margin-bottom: 4px;
        }

        .nav-item:hover { background: var(--bg-page); color: var(--primary); }
        .nav-item svg { width: 20px; height: 20px; opacity: 0.8; }
        .nav-item.active {
            background: #ecfdf5; 
            color: var(--primary);
            position: relative;
        }

        .logout-link {
            margin-top: auto;
            color: #DC2626;
        }
        .logout-link:hover{
            color: #DC2626;
        }

        /*
         * КОЛОНКА КАБИНЕТА.
         *
         * Селектор «body aside + main», а не голый «main»: main.css подключается
         * ПОСЛЕ этого файла и задаёт свои max-width:1900px и padding:80px 0
         * сначала правилом «main», а на планшете и телефоне - «body main».
         * Обе перебивали правило кабинета, и колонка растягивалась во весь
         * монитор: номер заказа оставался слева, сумма уезжала к правому краю,
         * и глазу приходилось пересекать весь экран. Три элемента в селекторе
         * выигрывают у обеих и ловят все шесть страниц кабинета - у половины
         * из них нет класса на body, привязаться больше не к чему.
         *
         * ЕСЛИ МЕНЯТЬ: правило работает, пока <main> стоит сразу за <aside> с
         * меню (lib/view/_account-nav.php). Вставите что-нибудь между ними -
         * кабинет молча вернётся к раскладке main.css.
         *
         * 1120, а не 1300: при 1300 строка заказа всё ещё разъезжалась на
         * полтора метра. Формы внутри уже, у них свои max-width.
         */
        /* ВЕРХНИЙ ОТСТУП ОБХОДИТ ШАПКУ. Она position:fixed, и под ней прячется
           заголовок страницы. Высоту берём из --zd-header-h (80px на десктопе,
           68px на телефоне) - тем же токеном задана сама шапка, так что число
           не разъедется с ней ни на одной ширине. Медиазапросы ниже меняют
           только бока и низ, верх остаётся этой формулой. Прежние 48px не
           годились: пока правило проигрывало main.css, обход давал тот файл, и
           заметить это было негде. */
        /* Колонка прижата ВЛЕВО, к меню. Стояла по центру - на широком мониторе
           между меню и содержимым висела полоса пустоты, а раньше кабинет
           начинался сразу за меню. */
        body aside + main {
            flex: 1; max-width: 1120px; margin: 0; width: 100%;
            padding: calc(var(--zd-header-h) + 10px) 32px 48px;
        }
        header h1 { font-size: 28px; font-weight: 700; margin-bottom: 32px; }

        /* Stats Section */
        .stats-grid { 
            display: grid; 
            grid-template-columns: repeat(4, 1fr); 
            gap: 20px; 
            margin-bottom: 40px; 
        }

        .stat-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 150px;
        }

        .card-top { display: flex; justify-content: space-between; align-items: center; }
        .card-label { font-size: 15px; font-weight: 700; color: var(--primary); line-height: 1.3; }
        .card-icon-box { 
            width: 38px; height: 38px; 
            background: var(--primary); 
            color: #fff; 
            border-radius: 12px; 
            display: flex; align-items: center; justify-content: center; 
        }
        .card-icon-box svg { width: 20px; height: 20px; }

        .stat-number { font-size: 36px; font-weight: 700; margin-top: auto; color: #000; }

        /* Alert Banner */
        .address-banner {
            background: #FFF7ED;
            border: 1px solid #FED7AA;
            border-radius: 20px;
            padding: 24px;
            margin-bottom: 32px;
        }
        .banner-content { display: flex; align-items: center; gap: 12px; margin-bottom: 15px;}
        .alert-circle { background: #FF7700; color: #fff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
        
        .btn-green {
            background: var(--primary);
            color: #fff;
            width: 100%;
            padding: 16px;
            border-radius: 16px;
            border: none;
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 10px;
        }

        /* Orders Grid */
        .section-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; }
        .orders-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

        /* Пустой список заказов. У нового покупателя заголовок «Последние
           заказы» стоял над голой пустотой: ни объяснения, ни выхода в каталог.
           Пунктирная рамка — тот же приём, что у пустой ленты новостей (.news-empty
           в news.php).
           */
        .orders-empty {
            text-align: center;
            padding: 56px 20px;
            border: 1px dashed #E5E7EB;
            border-radius: 12px;
        }
        /* Явно, не полагаясь на UA-стиль [hidden]: у соседнего .address-form
           класс задаёт display и той же специфичностью перебивает [hidden] —
           на этих граблях уже стояли (см. комментарий в profile.php). */
        .orders-empty[hidden] { display: none; }
        .orders-empty__icon { width: 48px; height: 48px; color: #D1D5DB; margin-bottom: 12px; }
        .orders-empty__title { font-weight: 700; color: #374151; margin: 0 0 4px; }
        .orders-empty__text { color: #9CA3AF; font-size: 14px; margin: 0 0 20px; }
        .orders-empty__btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--primary);
            color: #fff;
            padding: 14px 28px;
            border-radius: 14px;
            font-weight: 700;
            font-size: 15px;
            text-decoration: none;
        }
        .orders-empty__btn:hover { background: #019060; }

        .order-box {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 16px;
            display: flex; flex-direction: column; gap: 14px; align-items: stretch;
        }
        .order-box-main { display: flex; gap: 14px; align-items: center; }
        /* Этап и сумма - одной строкой под тонкой линией: статус и деньги читаются вместе. */
        .order-box-foot {
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
            padding-top: 12px; border-top: 1px solid rgba(15, 23, 42, .09);
        }
        .order-box-foot .status-tag { margin: 0; }
        /* cover - см. решение в css/card.css (.image-track img). */
        .order-img { width: 70px; height: 70px; border-radius: 14px; background: #f3f3f3; object-fit: cover; }

        /* SVG-иконки статусов вместо фото */
        .order-icon {
            width: 52px;
            height: 52px;
            border-radius: 12px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .order-icon svg { width: 26px; height: 26px; }

        /* ПЯТЬ СОСТОЯНИЙ ЗАЯВКИ. Раньше их было три - wait/way/done, -
           и они не совпадали со статусами в базе: код 'processing' не был описан
           вовсе и падал в «ожидает», а средняя ступень была недостижима. Теперь
           имена классов равны ТОНАМ из core/domain/order-status.php, то есть
           совпадают с тем, что решает сервер, и разойтись с ним не могут. Цвет =
           смысл: ждёт оранжевый, в работе синий, поехал зелёный, завершён серый,
           отказ красный.
           */
        /* Заказ оформлен — оранжевый: ждёт менеджера */
        .order-icon--wait {
            background: #FFF7ED;
            color: #FF7700;
            border: 1.5px solid #FED7AA;
        }
        /* Принят, в проработке — синий */
        .order-icon--work {
            background: #EFF6FF;
            color: #2563EB;
            border: 1.5px solid #BFDBFE;
        }
        /* Оплачен — зелёный: деньги получены, заказ подтверждён */
        .order-icon--paid {
            background: #E8F6F0;
            color: #01704F;
            border: 1.5px solid #A9DCC7;
        }
        /* Передан в логистику — фиолетовый: поехал. Отдельный тон от оплаты,
           иначе два соседних этапа сливаются в один. */
        .order-icon--ship {
            background: #F5F3FF;
            color: #6D28D9;
            border: 1.5px solid #DDD6FE;
        }
        /* Завершён — зелёный: заказ выполнен (серый читался как «неактивный») */
        .order-icon--final {
            background: #E8F6F0;
            color: #01704F;
            border: 1.5px solid #A9DCC7;
        }
        /* Отказ — красный. Причину покупателю НЕ показываем, только сам факт. */
        .order-icon--cancelled {
            background: #FEF2F2;
            color: #DC2626;
            border: 1.5px solid #FECACA;
        }

        /* Компактная карточка */
        .order-box-info { flex: 1; min-width: 0; }
        /* 14px - нижняя граница по сайту для аудитории 40-65+, ниже неё не
           опускаемся ни здесь, ни в медиазапросах ниже по файлу.
           Номер и сумма подняты выше границы намеренно: это две вещи, за
           которыми в список и приходят, и они читаются первыми. */
        .order-num { font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--text-main); margin: 0 0 3px; }
        .order-date { font-size: 14px; color: var(--text-muted); }
        /* Сумма стоит прямо под номером, а не у правого края строки: связать
           заказ с его суммой должно быть можно одним взглядом, не пересекая
           монитор. */
        .order-box .price { font-weight: 800; font-size: 20px; color: var(--text-main); margin: 0; white-space: nowrap; }

        /* Шеврон справа */
        .order-chevron {
            width: 16px; height: 16px;
            color: #D1D5DB;
            flex-shrink: 0;
        }

        /* Кликабельная карточка — без визуальных эффектов.
           Раньше это был <div role="button"> с onclick; теперь настоящая
           ссылка на страницу заказа, поэтому гасим её оформление и оставляем
           видимый фокус - с клавиатуры карточка раньше не открывалась вовсе. */
        a.order-box {
            text-decoration: none;
            color: inherit;
            cursor: pointer;
        }
        a.order-box:hover { border-color: #01A572; }
        a.order-box:focus-visible { outline: 2px solid #01A572; outline-offset: 2px; }

        /* Плитка-кнопка внутри грида */
        .order-toggle-card {
            background: #fff;
            border: 1.5px dashed var(--border);
            border-radius: 20px;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 16px;
            cursor: pointer;
            font-family: inherit;
            width: 100%;
            text-align: left;
            transition: border-color 0.2s, background 0.2s;
        }
        .order-toggle-card:hover {
            border-color: var(--primary);
            background: #F6FDF9;
        }
        .otc-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: #F0FDF4;
            border: 1.5px solid #BBF7D0;
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .otc-icon svg { width: 22px; height: 22px; }
        .otc-icon--collapse {
            background: #F9FAFB;
            border-color: var(--border);
            color: var(--text-muted);
        }
        .otc-text { display: flex; flex-direction: column; gap: 1px; }
        .otc-label { font-size: 14px; font-weight: 700; color: var(--text-main); }
        .otc-sub   { font-size: 14px; font-weight: 500; color: var(--text-muted); }

        /* Скрытые карточки */
        .order-hidden {
            display: none !important;
        }

        /* Анимация появления */
        @keyframes orderAppear {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .order-appearing {
            animation: orderAppear 0.3s ease forwards;
        }

        /* ===== МОДАЛЬНОЕ ОКНО ЗАКАЗА ===== */
        .order-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.45);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 16px;
            backdrop-filter: blur(3px);
        }
        .order-modal-overlay.active { display: flex; animation: modalFadeIn .2s ease; }
        @keyframes modalFadeIn {
            from { opacity:0; } to { opacity:1; }
        }

        .order-modal {
            background: #fff;
            border-radius: 20px;
            width: 100%;
            max-width: 560px;
            max-height: 90vh;
            overflow: hidden;          /* внешний скролл скрыт */
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 60px rgba(0,0,0,.2);
            animation: modalSlideUp .22s ease;
            position: relative;
        }

        /* Скролляемая зона — всё после хедера */
        .order-modal-body {
            overflow-y: scroll;
            flex: 1;
            /* Скрываем системный скроллбар */
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .order-modal-body::-webkit-scrollbar { display: none; }

        /* Тень — подсказка что контент есть ниже */
        .order-modal-fade {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 80px;
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 100%);
            pointer-events: none;
            border-radius: 0 0 20px 20px;
            z-index: 3;
            transition: opacity .25s ease;
        }
        .order-modal-fade.hidden { opacity: 0; }

        /* Полоска прокрутки — тонкая линия справа */
        .order-modal-scrollbar {
            position: absolute;
            right: 6px;
            top: 80px;          /* ниже хедера */
            bottom: 6px;
            width: 3px;
            z-index: 4;
            pointer-events: none;
        }
        .order-modal-scrollbar-track {
            width: 100%;
            height: 100%;
            background: #F3F4F6;
            border-radius: 2px;
        }
        .order-modal-scrollbar-thumb {
            width: 100%;
            background: #D1D5DB;
            border-radius: 2px;
            position: absolute;
            top: 0;
            transition: background .2s;
            min-height: 24px;
        }
        .order-modal-body:hover ~ .order-modal-scrollbar .order-modal-scrollbar-thumb,
        .order-modal-scrollbar-thumb:hover {
            background: var(--primary);
        }
        @keyframes modalSlideUp {
            from { transform: translateY(20px); opacity:0; }
            to   { transform: translateY(0);    opacity:1; }
        }

        .order-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
            padding: 20px 20px 16px;
            border-bottom: 1px solid var(--border);
            position: sticky; top: 0; background: #fff; z-index: 2;
            border-radius: 20px 20px 0 0;
        }
        .order-modal-title-row { display: flex; align-items: center; gap: 10px; }
        .order-modal-title { font-size: 18px; font-weight: 700; margin: 0; }

        /* Группа кнопок в хедере модалки.
           Было 8px - PDF и крестик закрытия стояли впритык, и на телефоне палец,
           метивший в один, задевал другой - одна кнопка скачивает чек, другая
           закрывает заказ целиком, и перепутать их обиднее, чем большинство соседних
           кнопок сайта.
           */
        .order-modal-actions {
            display: flex;
            align-items: center;
            gap: 28px;
            flex-shrink: 0;
        }

        /* Кнопка PDF */
        .order-pdf-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 0 12px;
            height: 34px;
            background: #FEF2F2;
            color: #DC2626;
            border: 1px solid #FECACA;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 700;
            text-decoration: none;
            transition: background 0.18s, border-color 0.18s;
            cursor: pointer;
            white-space: nowrap;
        }
        .order-pdf-btn:hover {
            background: #FEE2E2;
            border-color: #FCA5A5;
        }
        .order-pdf-btn svg {
            width: 15px;
            height: 15px;
            flex-shrink: 0;
        }

        .order-modal-close {
            width: 34px; height: 34px;
            border: none; background: #F3F4F6; border-radius: 50%;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: background .2s;
        }
        .order-modal-close svg { width: 16px; height: 16px; color: #6B7280; }
        .order-modal-close:hover { background: #E5E7EB; }

        .order-modal-meta {
            display: flex;
            gap: 0;
            border-bottom: 1px solid var(--border);
        }
        .order-meta-item {
            flex: 1;
            display: flex; flex-direction: column;
            padding: 16px 20px;
            border-right: 1px solid var(--border);
        }
        .order-meta-item:last-child { border-right: none; }
        .meta-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
        .meta-value { font-size: 13px; font-weight: 700; color: var(--text-main); }

        .order-modal-sums {
            padding: 16px 20px;
            background: #F9FAFB;
            border-bottom: 1px solid var(--border);
            display: flex; flex-direction: column; gap: 6px;
        }
        .sum-row {
            display: flex; justify-content: space-between;
            font-size: 13px; font-weight: 600; color: var(--text-muted);
        }
        .sum-accent { color: var(--primary); font-weight: 700; }

        /* Строка скидки в блоке сумм */
        .sum-row--discount { background: #FFF7ED; margin: 0 -20px; padding: 6px 20px; border-radius: 6px; }
        .sum-discount { color: #EA580C; font-weight: 700; }

        /* Старая цена в строке товара */
        .modal-item-old-price {
            font-size: 12px;
            color: var(--text-muted);
            text-decoration: line-through;
            font-weight: 500;
            margin-left: 4px;
        }

        /* Бейдж экономии рядом с итогом строки */
        .modal-item-discount-badge {
            display: inline-block;
            background: #FFF7ED;
            color: #EA580C;
            font-size: 12px;
            font-weight: 700;
            padding: 1px 8px;
            border-radius: 6px;
            margin-left: 8px;
            white-space: nowrap;
            vertical-align: middle;
        }

        .order-modal-items {
            padding: 16px 20px;
            display: flex; flex-direction: column; gap: 4px;
        }
        .modal-item-name { font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 2px; }
        .modal-item-desc { font-size: 12px; color: var(--text-muted); }
        .modal-item-price { text-align: right; flex-shrink: 0; }
        .modal-item-unit { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
        .modal-item-total { font-size: 14px; font-weight: 700; color: var(--text-main); }

        /* Товар в модалке — кликабельный */
        .modal-item {
            text-decoration: none;
            color: inherit;
            display: flex; justify-content: space-between; align-items: flex-start;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 12px;
            margin: 0 -12px;
            transition: background 0.15s;
        }
        .modal-item:hover { background: #F3F4F6; }
        .modal-item:hover .modal-item-name { color: var(--primary); }

        /* ПОЗИЦИЯ ЗАКАЗА С ОЦЕНКОЙ.
           Строка стала двухэтажной: сверху сам товар (фото + название + цена), снизу
           действие. Кнопка НЕ внутри ссылки на товар - вложенная в <a> ссылка
           невалидна и в части браузеров просто не кликается.
           */
        .modal-item-row {
            display: flex; flex-direction: column; gap: 6px;
            padding-bottom: 8px;
        }
        .modal-item-row + .modal-item-row {
            border-top: 1px solid var(--border);
            padding-top: 8px;
        }
        .modal-item-photo {
            width: 48px; height: 48px; flex-shrink: 0;
            object-fit: cover;               /* как везде, где показано фото товара */
            border-radius: 8px;
            background: #F3F4F6;
            border: 1px solid var(--border);
        }
        .modal-item-info { flex: 1; min-width: 0; }

        /* ДВЕ КНОПКИ В РЯД: «Оценить товар» и «В корзину» (по образцу
           Kaspi). Обе тянутся на равную долю ряда - так они читаются
           как пара равноправных действий, а не как главное и приписка. Ряд
           переносится сам: на узком экране кнопка уходит на вторую строку целиком,
           вместо того чтобы сжаться до нечитаемой.
           */
        .modal-item-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .modal-item-act {
            flex: 1 1 150px;
            justify-content: center;
            /* 44px - минимальная зона нажатия, принятая в проекте для
               аудитории 40-65+: на телефоне в эти кнопки целятся пальцем. */
            min-height: 44px;
        }

        /* Кнопка «Оценить товар». Контур, а не заливка: на экране уже есть
           главное действие (закрыть/PDF), и оценка не должна с ним спорить. */
        .modal-item-rate {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 7px 14px;
            border: 1px solid var(--primary);
            border-radius: 8px;
            background: #fff;
            color: var(--primary);
            font-size: 13px; font-weight: 700;
            text-decoration: none;
            transition: background .12s ease, color .12s ease;
        }
        .modal-item-rate svg { width: 15px; height: 15px; }
        .modal-item-rate:hover,
        .modal-item-rate:focus-visible { background: var(--primary); color: #fff; }

        /* «В корзину» - повтор покупки. Заливка серым, а не зелёным контуром:
           рядом стоит «Оценить товар», и две одинаково зелёные кнопки спорили
           бы друг с другом. Тот же приём, что у Kaspi на этом экране. */
        .modal-item-buy {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 7px 14px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: #F3F4F6;
            color: var(--text-main);
            font-size: 13px; font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            transition: background .12s ease, color .12s ease, border-color .12s ease;
        }
        .modal-item-buy .icon { font-size: 15px; line-height: 1; }
        .modal-item-buy:hover:not(:disabled),
        .modal-item-buy:focus-visible { background: var(--primary); border-color: var(--primary); color: #fff; }

        /* Уже доложено: кнопка не исчезает, а говорит об этом. Позиций в
           заказе бывает десяток, и человеку важно видеть, что он уже взял. */
        .modal-item-buy--done,
        .modal-item-buy--done:hover {
            background: #E7F7F0;
            border-color: var(--primary);
            color: var(--primary);
            cursor: default;
        }
        .modal-item-buy:disabled { opacity: .75; }

        /* Отзыв уже оставлен - показываем факт, а не кнопку. */
        .modal-item-rated {
            align-self: flex-start;
            font-size: 12px; font-weight: 600;
            color: var(--text-muted);
            padding: 4px 0;
        }
        .modal-item-rated--ok { color: var(--primary); }

        /* ПОВТОРИТЬ ЗАКАЗ. Стоит между списком позиций и итогом - под тем, что
           повторяем, и над суммой. Заливка фирменным зелёным: в отличие от
           кнопок у позиций, это действие на весь заказ, и оно здесь главное. */
        .order-repeat {
            padding: 12px 0 4px;
            border-top: 1px solid var(--border);
        }
        .order-repeat__btn {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            width: 100%;
            min-height: 48px;
            padding: 10px 16px;
            border: none;
            border-radius: 10px;
            background: var(--primary);
            color: #fff;
            font-family: inherit;
            font-size: 15px; font-weight: 700;
            cursor: pointer;
            transition: filter .12s ease;
        }
        .order-repeat__btn:hover:not(:disabled) { filter: brightness(1.08); }
        .order-repeat__btn:disabled { opacity: .7; cursor: default; }
        .order-repeat__btn .icon { font-size: 17px; line-height: 1; }

        /* Предупреждение о непереносимых позициях - ДО нажатия, а не после:
           человек должен знать, что перенесётся не всё, пока ещё решает. */
        .order-repeat__note {
            margin: 8px 0 0;
            font-size: 13px;
            color: var(--text-muted);
            text-align: center;
        }

        .order-modal-footer {
            display: flex; justify-content: space-between; align-items: center;
            padding: 16px 20px;
            border-top: 1px solid var(--border);
            background: #F9FAFB;
            border-radius: 0 0 20px 20px;
            font-weight: 700; font-size: 15px; color: var(--text-muted);
        }
        .modal-total-price { font-size: 20px; font-weight: 700; color: var(--primary); }

        /* Подпись статуса. БЕЗ uppercase: подписи стали длиннее одного слова
           («Принят, в проработке», «Передан в логистику»), и капсом они читаются
           заметно хуже, а на узком экране занимают две строки. */
        .status-tag { font-size: 14px; font-weight: 700; padding: 5px 10px; border-radius: 8px; margin-bottom: 6px; display: inline-block; }
        .status-wait { background: #FFF7ED; color: #FF7700; }
        .status-work { background: #EFF6FF; color: #2563EB; }
        /* Оплата и отгрузка - разные тоны: заказ оплачен, но ещё не уехал, и
           покупатель должен видеть разницу (, тон paid в zd_order_status_meta).
           */
        .status-paid { background: #E8F6F0; color: #01704F; }
        .status-ship { background: #F5F3FF; color: #6D28D9; }
        .status-final { background: #E8F6F0; color: #01704F; }
        .status-cancelled { background: #FEF2F2; color: #DC2626; }

        .price { font-weight: 700; font-size: 15px; }

        .order-all-link {
    text-decoration: none;
    color: var(--primary);
    display: flex;
    justify-content: center;
    min-width: 200px;
    border-style: dashed;
    transition: background-color, 0.3s;
    background: rgba(var(--primary-rgb), 0.02);
}

.order-all-link:hover {
    background-color: var(--primary);
    color: #fff;
    border-style: solid;
}

.order-all-content {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 16px;
}

        /* Mobile Specific */
        .mobile-only { display: none; }
        .page-header { margin-bottom: 28px; }
        .page-header h1 { font-size: 26px; font-weight: 700; margin: 0; }

        /* ===== 1024px — планшет горизонтально ===== */
        @media (max-width: 1024px) {
            aside { width: 220px; min-width: 220px; padding: 80px 12px 24px; }
            /* Селектор «body aside + main» по всему файлу - см. причину у правила
               колонки кабинета выше: голый main проигрывал main.css, и
               отступы кабинета не применялись ни на одной ширине. */
            body aside + main { padding-right: 24px; padding-bottom: 36px; padding-left: 24px; }
            .stats-grid   { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 28px; }
            .orders-grid  { grid-template-columns: repeat(2, 1fr); }
            .stat-card    { min-height: 130px; padding: 20px; }
            .stat-number  { font-size: 30px; }
        }

        /* ===== 768px — планшет вертикально / крупный телефон ===== */
        @media (max-width: 768px) {
            body { flex-direction: column; }

            /* ЗАКАЗЫ ВЫШЕ СВОДКИ - только на телефоне.
               Экран называется «Мои заказы», а сами заказы лежали за сгибом, под плиткой
               из пяти счётчиков (см. комментарий у первой плитки в order.php).
               Порядок задаём CSS-ом, а не переносом разметки: на
               десктопе сводка сверху - осознанная раскладка дашборда, её не трогаем.
               Плата за приём - порядок обхода экранным диктором остаётся прежним
               (сначала плитки); на тач-экране, ради которого правка и делается, обхода
               нет.
               */
            .page-orders main { display: flex; flex-direction: column; }
            /* Всё, что не перечислено ниже, уходит в конец, а не всплывает
               наверх нулевым порядком по умолчанию. */
            .page-orders main > *          { order: 9; }
            .page-orders .page-header      { order: 1; }
            .page-orders .address-banner   { order: 2; }  /* предупреждение - выше всего остального */
            .page-orders .section-title    { order: 3; }
            /* Панель отбора, счётчик и «ничего не подошло» - ровно над лентой.
               Без этих трёх строк им доставался order: 9 из правила выше, и
               на телефоне карточки вставали ВЫШЕ своих же чипов: человек
               прокручивал до панели, а список оставался за верхним краем.
               Проверено на 375px. */
            .page-orders .zd-orders-toolbar { order: 3; }
            .page-orders .zd-orders-count   { order: 3; }
            .page-orders .zd-orders-nothing { order: 3; }
            .page-orders .orders-grid      { order: 4; }
            .page-orders .orders-empty     { order: 5; }
            .page-orders .stats-grid       { order: 6; }
            .page-orders .btn-mobile-data  { order: 7; }

            aside { display: none; }

            body aside + main {
                /* снизу — запас под Safari-адресбар и нижнюю панель */
                padding-right: 16px; padding-bottom: 100px; padding-left: 16px;
                max-width: 100%;
            }

            .page-header { margin-bottom: 20px; }
            .page-header h1 { font-size: 22px; }

            /* Статистика — 2 колонки, компактнее */
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
                margin-bottom: 20px;
            }
            .stat-card    { min-height: 110px; padding: 16px; border-radius: 16px; }
            .card-label   { font-size: 14px; }
            .card-icon-box{ width: 34px; height: 34px; border-radius: 8px; }
            .card-icon-box svg { width: 17px; height: 17px; }
            .stat-number  { font-size: 28px; }

            /* Кнопка «Мои данные» */
            .mobile-only  { display: block; }
            .btn-mobile-data {
                width: 100%;
                background: #fff;
                border: 1px solid var(--border);
                padding: 16px 20px;
                border-radius: 16px;
                display: flex; justify-content: space-between; align-items: center;
                font-weight: 700; font-size: 15px;
                margin-bottom: 20px;
                text-decoration: none; color: inherit;
                box-sizing: border-box;
            }

            /* Баннер адреса доставки */
            .address-banner {
                padding: 20px;
                border-radius: 16px;
                margin-bottom: 20px;
            }
            .banner-content { margin-bottom: 10px; }
            .btn-green { padding: 14px; font-size: 14px; border-radius: 12px; }

            /* Заголовок секции */
            .section-title { margin-bottom: 16px; }
            .section-title h2 { font-size: 18px !important; }

            /* Сетка заказов — 1 колонка */
            .orders-grid { grid-template-columns: 1fr; gap: 10px; }

            /* Карточка заказа */
            .order-box { padding: 14px; border-radius: 16px; gap: 12px; }
            .order-icon { width: 46px; height: 46px; border-radius: 10px; }
            .order-icon svg { width: 22px; height: 22px; }
            /* На телефоне карточка занимает всю ширину, места хватает -
               номер и сумму не мельчим, за ними и заходят. */
            .order-num  { font-size: 16px; }
            .order-box .price { font-size: 18px; }
            .status-tag { font-size: 14px; padding: 4px 10px; }

            /* Плитка expand/collapse */
            .order-toggle-card { padding: 14px; border-radius: 16px; gap: 12px; }
            .otc-icon { width: 36px; height: 36px; }
            .otc-label { font-size: 14px; }
            .otc-sub   { font-size: 14px; }

            /* Модалка — на мобиле снизу вверх (sheet) */
            .order-modal-overlay {
                padding: 0;
                align-items: flex-end;
            }
            .order-modal {
                max-width: 100%;
                max-height: 92vh;
                border-radius: 20px 20px 0 0;
                animation: modalSlideUp .25s ease;
            }
            .order-modal-header {
                padding: 16px 16px 16px;
                border-radius: 20px 20px 0 0;
            }
            /* Полоска-«ручка» сверху как у нативных sheet */
            .order-modal-header::before {
                content: '';
                display: block;
                width: 36px; height: 4px;
                background: #E5E7EB;
                border-radius: 2px;
                margin: 0 auto 16px;
            }
            .order-modal-title { font-size: 16px; }
            .order-modal-meta { flex-wrap: wrap; }
            .order-meta-item {
                flex: 1 1 calc(50% - 1px);
                padding: 12px 16px;
                min-width: 0;
            }
            .order-meta-item:nth-child(odd)  { border-right: 1px solid var(--border); }
            .order-meta-item:nth-child(even) { border-right: none; }
            .order-meta-item:nth-child(3)    { border-top: 1px solid var(--border); }
            .meta-label { font-size: 10px; }
            .meta-value { font-size: 12px; }
            .order-modal-sums { padding: 12px 16px; gap: 8px; }
            .sum-row { font-size: 12px; }
            .modal-total-price { font-size: 18px; }
            .order-modal-footer { padding: 25px 16px; font-size: 14px; }
            .order-modal-items { padding: 10px 16px; }
            .modal-item { padding: 10px 10px; margin: 0 -10px; }
            .modal-item-name { font-size: 13px; }
            .modal-item-unit { font-size: 11px; }
            .modal-item-total { font-size: 13px; }
            .modal-item-discount-badge { font-size: 10px; padding: 1px 5px; }
            .order-modal-scrollbar { display: none !important; } /* на тач не нужен */

            /* Кнопка выйти */
            .logout-mobile {
                width: 100%;
                background: #FEE2E2;
                /* #DC2626 давал 4:1 на этой подложке - ниже минимума 4.5.
                   Красный не фирменный, затемнить его можно. */
                color: #B91C1C;
                padding: 16px;
                border-radius: 16px;
                text-align: center;
                font-weight: 700; font-size: 15px;
                margin-top: 32px;
                border: none;
                cursor: pointer;
            }
        }

        /* ===== 480px — смартфон ===== */
        @media (max-width: 480px) {
            body aside + main { padding-right: 12px; padding-bottom: calc(90px + var(--zd-nav-lift)); padding-left: 12px; }

            /* Статистика — 2 колонки, ещё компактнее */
            .stats-grid {
                gap: 12px;
                margin-bottom: 16px;
            }
            .stat-card  { min-height: 100px; padding: 14px; border-radius: 14px; }
            .stat-number{ font-size: 26px; }

            /* Карточки заказов */
            .order-box { padding: 12px; gap: 10px; border-radius: 14px; }
            .order-icon { width: 42px; height: 42px; border-radius: 9px; }
            .order-icon svg { width: 20px; height: 20px; }

            /* Модалка занимает больше высоты на маленьком экране */
            .order-modal { max-height: 96vh; }

            /* Мета-блок — все поля по всей ширине */
            .order-meta-item {
                flex: 1 1 100%;
                border-right: none !important;
                border-top: 1px solid var(--border);
                padding: 12px 16px;
            }
            .order-meta-item:first-child { border-top: none; }
        }

        /* ===================================================
           СТРАНИЦА АДРЕСА ДОСТАВКИ (address.html)
           Все классы уникальны — не влияют на order.html
        =================================================== */

        /* Текущий адрес */
        .current-address-box {
            background: #ecfdf5;
            border: 1px solid #6ee7b7;
            border-radius: 12px;
            padding: 20px 20px;
            font-size: 16px;
            font-weight: 600;
            color: var(--text-main);
            margin-bottom: 20px;
            min-height: 60px;
            max-width: 800px;
            line-height: 1.5;
        }
        .current-address-box.empty {
            color: var(--text-muted);
            font-weight: 500;
            font-style: italic;
        }

        /* Подсказка под адресом */
        .hint-text {
            font-size: 14px;
            max-width: 800px;
            color: var(--text-muted);
            margin-bottom: 32px;
            line-height: 1.6;
        }

        /* Форма */
        .address-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
            max-width: 740px;
        }

        /* Две колонки в кабинете на широком экране.
           Формы намеренно остаются узкими (740px — поле во весь экран читать
           неудобно), но раньше под ними на 1920px пустовала целая половина страницы,
           потому что заголовки при этом растягивались на всю ширину контента.
           Получалась рваная граница, которой нет на соседних страницах кабинета.
           Теперь второй блок занимает эту половину. Порог 1200px: ниже него двум
           колонкам по 740px уже не разойтись, и они схлопываются в прежний
           вертикальный порядок.
           */
        @media (min-width: 1200px) {
            .account-cols {
                display: grid;
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                gap: 48px;
                align-items: start;
            }
            /* Верхний отступ был нужен, только пока блок шёл ВТОРЫМ сверху —
               в колонке он сдвигал заголовок ниже соседнего. */
            .account-cols .account-col__title { margin-top: 0; }
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        /* [hidden] - атрибутный селектор той же специфичности, что .form-group -
           без этого правила display:flex выше побеждает по порядку в каскаде и
           скрытая через JS (address.html setCountryMode) группа полей всё равно
           рендерится. Тот же баг-паттерн, что был в .address-form (решения/
           рефакторинг чипов).
           */
        .form-group[hidden],
        .form-row[hidden] {
            display: none;
        }

        .form-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-muted);
        }
        .form-label .required { color: #EF4444; margin-left: 2px; }

        /* Подсказка под полем: почему поле необязательное, в каком виде
           записывается значение и т.п. Своего отступа не несёт — вертикальный
           ритм внутри .form-group задаёт её собственный gap: 6px, второй
           margin здесь дал бы двойной зазор. Не путать с .hint-text, которая
           оформляет самостоятельный абзац-пояснение под заголовком блока. */
        .form-hint {
            font-size: 14px;
            line-height: 1.5;
            color: var(--text-muted);
        }

        /* Переключатель страны доставки (КЗ / другая страна) */
        .country-toggle {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }
        .country-toggle__option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 20px;
            border: 1px solid var(--border);
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            transition: border-color 0.2s, color 0.2s, background 0.2s;
        }
        .country-toggle__option input {
            accent-color: var(--primary);
        }
        .country-toggle__option:has(input:checked) {
            border-color: var(--primary);
            color: var(--text-main);
            background: rgba(1, 165, 114, 0.06);
        }

        /* Без рамки в покое, поля побольше - чтобы не промахиваться. Граница заменена
           заливкой, чтобы поле оставалось заметным без контура. Рамка возвращается
           ТОЛЬКО на фокусе/ошибке - это не декор, а единственный сигнал "где я
           сейчас"/"что не так", убирать нельзя (WCAG 2.4.7, уже один раз ловили
           регрессию на этом - см. main.css про input:focus-visible). Высота выросла
           с ~48px до ~52px, не больше.
           */
        .form-control {
            width: 100%;
            padding: 14px 16px;
            border: 1.5px solid transparent;
            border-radius: 12px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-main);
            background: #F3F4F6;
            outline: none;
            transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
            appearance: none;
            -webkit-appearance: none;
        }
        .form-control:hover {
            background: #ECEEF1;
        }
        .form-control:focus,
        .form-control:focus-visible {
            background: #fff;
            border-color: var(--primary);
            box-shadow: 0 0 0 1px #01A572;
            outline: none;
        }
        .form-control.invalid,
        .form-control:invalid:not(:placeholder-shown) {
            border-color: #ef4444;
        }
        select.form-control {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 40px;
            cursor: pointer;
        }

        /* Строка дом / квартира / индекс */
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 16px;
        }

        /* Сообщение успех / ошибка */
        .form-message {
            padding: 12px 16px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            display: none;
        }
        .form-message.success {
            background: #ecfdf5;
            border: 1px solid #6ee7b7;
            color: #065f46;
        }
        .form-message.error {
            background: #FEF2F2;
            border: 1px solid #FECACA;
            color: #991B1B;
        }

        /* Кнопка сохранить. Фирменный зелёный --primary, а не затемнённый
           вариант. Кнопка общая для address.php и profile.php
           (оба грузят order.css).
           */
        .btn-submit {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--primary);
            color: #fff;
            border: none;
            border-radius: 12px;
            padding: 16px 32px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: background 0.2s, opacity .2s;
            margin-top: 8px;
            align-self: flex-start;
        }
        /* :not(:disabled) — раньше hover/active срабатывали и на выключенной
           кнопке (курсор оставался pointer, фон темнел под мышью), пока идёт
           сохранение: profile.php:417-418 выключает кнопку на время bcrypt+письма,
           address.php теперь тоже (см. addressForm submit) — кнопка выглядела и
           откликалась как рабочая, хотя клики не засчитывались. Найдено аудитом.
           */
        .btn-submit:hover:not(:disabled)  { background: #019060; }
        .btn-submit:active:not(:disabled) { background: #017a52; }
        .btn-submit:disabled {
            opacity: .6;
            cursor: not-allowed;
        }

        /* === Сохранённые адреса (до 3) === */
        .saved-addresses,
        .address-form,
        .btn-add-address,
        #formIntro,
        #formMessage {
            max-width: 820px;
        }
        .saved-addresses {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 16px;
        }
        .saved-address-card {
            border: 1.5px solid #e3e6e8;
            border-radius: 12px;
            padding: 16px 16px;
            background: #fff;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px 16px;
            align-items: start;
        }
        .saved-address-card.is-primary {
            border-color: #01A572;
            background: #f3fbf7;
        }
        .sa-radio {
            display: inline-flex;
            align-items: center;
            /* Сам кружок радио 13px, попасть пальцем невозможно. Зону
               даёт вся подпись целиком: <label> оборачивает и input, и текст. */
            min-height: 44px;
            gap: 8px;
            font-size: 14px;
            font-weight: 600;
            color: #01A572;
            cursor: pointer;
            grid-column: 1 / -1;
        }
        .sa-text {
            grid-column: 1 / 2;
            font-size: 14px;
            color: #1a1a1a;
            line-height: 1.45;
        }
        .sa-actions {
            grid-column: 2 / 3;
            display: flex;
            gap: 8px;
            align-self: center;
        }
        .sa-edit, .sa-delete {
            background: transparent;
            border: 1px solid #d8dbde;
            color: #555;
            /* 44px по высоте - минимальная зона нажатия по сайту;
               было 33px при кегле 12px. */
            padding: 10px 14px;
            min-height: 44px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
        }
        .sa-edit:hover  { border-color: #01A572; color: #01A572; }
        .sa-delete:hover { border-color: #e26262; color: #e26262; }

        .btn-add-address {
            display: inline-block;
            background: #fff;
            color: #01A572;
            border: 1.5px dashed #01A572;
            padding: 12px 20px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            margin: 0 0 20px;
        }
        .btn-add-address:hover { background: #f3fbf7; }

        /* Адаптив: планшет */
        @media (max-width: 1024px) {
            .form-row { gap: 12px; }
        }

        /* Адаптив: мобильный */
        @media (max-width: 768px) {
            .address-form { max-width: 100%; }
            .hint-text { font-size: 14px; }
        }

        @media (max-width: 480px) {
            .form-row { grid-template-columns: 1fr; }
        }

/* ===== Главная кабинета (/account/, account.php) =====
   Блоки, которых не было ни на одной странице кабинета: список дел, компактная
   строка заказа и пустое состояние. Размеры берутся у соседей по кабинету
   (карточка заказа, .section-title), новой шкалы не заводим.
   Аудитория 40-65+: минимум 15px на текст и 44px на зону нажатия. */
/* Кнопка пустого состояния («Перейти в каталог»). Осталась от убранного
   блока «требует внимания» - стиль тот же, имя нейтральное. */
.zd-acc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: 12px;
  background: #01A572; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none;
}
.zd-acc-btn:hover { background: #018a5f; }

.zd-acc-link { font-size: 15px; font-weight: 700; color: #01A572; text-decoration: none; }
.zd-acc-link:hover { text-decoration: underline; }

/* Плоской строки .zd-acc-order на главной кабинета больше нет: заказ там
   рисуется той же карточкой .order-box, что и на /account/orders/. В строке
   номер стоял слева, сумма справа, а между ними вся ширина монитора. */

.zd-acc-empty {
  padding: 32px 20px; margin: 0 0 28px; border-radius: 12px;
  background: #fff; border: 1px solid #eef0f2; text-align: center;
}
.zd-acc-empty p { margin: 0 0 16px; font-size: 15px; color: #6b7280; }


/* ===== Список разделов на главной кабинета (account.php) =====
   Строки вместо четырёх плиток: плитка показывала четыре раздела из семи, и
   на телефоне, где боковое меню скрыто, «Мои данные» и «Новости» становились
   недостижимы. Приём профиля маркетплейсов - строка с названием слева и
   числом или состоянием справа. */
/* НА ДЕСКТОПЕ СПИСКА НЕТ. Там слева стоит боковая колонка с ровно теми же
   семью разделами, и список в центре был бы её дословной копией. Список нужен только там, где
   колонка скрыта, то есть на телефоне.
   */
.zd-acc-section--links { display: none; }

.zd-acc-list {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #eef0f2; border-radius: 12px;
  overflow: hidden; margin: 0 0 28px;
}
.zd-acc-list__row {
  display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 12px 16px;
  text-decoration: none; border-bottom: 1px solid #f3f4f6;
}
.zd-acc-list__row:last-child { border-bottom: none; }
.zd-acc-list__row:hover { background: #F7F8F9; }
.zd-acc-list__icon { flex: 0 0 auto; width: 22px; height: 22px; color: #01A572; }
.zd-acc-list__icon svg { width: 22px; height: 22px; display: block; }
.zd-acc-list__label { font-size: 16px; font-weight: 600; color: #111827; }
.zd-acc-list__value { margin-left: auto; font-size: 15px; font-weight: 700; color: #6b7280; }
.zd-acc-list__value.is-warn { color: #F97316; }
.zd-acc-list__go { flex: 0 0 auto; font-size: 24px; line-height: 1; color: #9CA3AF; }
/* Стрелка прижимается вправо, когда числа у строки нет вовсе. */
.zd-acc-list__label + .zd-acc-list__go { margin-left: auto; }

@media (max-width: 768px) {
  /* ПОРЯДОК БЛОКОВ ГЛАВНОЙ КАБИНЕТА.
     Общие правила .page-orders задают order всем детям main, и незнакомым им
     блокам достаётся order: 9 - то есть самое срочное («не указан адрес»)
     уезжало под плитку счётчиков. Проверено на 375px. Здесь порядок задаётся
     явно: сначала дела, потом заказы, потом навигация по разделам. */
  .page-account main > *                   { order: 9; }
  .page-account .page-header               { order: 1; }
  /* Разделы выше заказов: сверху навигация, которой пользуются каждый заход, а лента заказов внизу
     как напоминание.
     */
  .zd-acc-section--links { display: block; }
  .page-account .zd-acc-section--links     { order: 3; }
  .page-account .zd-acc-section--orders    { order: 4; }
}


/* ===== Отбор и поиск на странице заказов (order.php) =====
   Пришли на место кнопки «Показать все»: список больше ничего не прячет, а
   разобраться в длинной ленте помогают три состояния и поиск по номеру.
   Размеры - по правилу для аудитории 40-65+: шрифт не меньше 15px, высота
   нажимаемых элементов 44px. */
.zd-orders-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 16px;
}
.zd-orders-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.zd-orders-chip {
  min-height: 44px; padding: 0 18px;
  border: 1px solid #E5E7EB; border-radius: 22px;
  background: #fff; color: #374151;
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.zd-orders-chip:hover { border-color: #01A572; color: #01A572; }
.zd-orders-chip.is-active {
  background: #01A572; border-color: #01A572; color: #fff;
}
.zd-orders-search { margin-left: auto; }
.zd-orders-search input {
  width: 220px; min-height: 44px; padding: 0 16px;
  border: 1px solid #E5E7EB; border-radius: 22px;
  background: #fff; color: #111827;
  font: inherit; font-size: 15px;
}
.zd-orders-search input:focus {
  outline: none; border-color: #01A572; box-shadow: 0 0 0 1px #01A572;
}
.zd-orders-count { margin: 0 0 12px; font-size: 14px; color: #6b7280; }
.zd-orders-nothing {
  margin: 0 0 16px; padding: 20px; border-radius: 12px;
  background: #fff; border: 1px solid #eef0f2;
  font-size: 15px; color: #374151; text-align: center;
}

@media (max-width: 560px) {
  /* Поле поиска на телефоне - своей строкой во всю ширину: прижатое вправо
     оно оставалось узким огрызком рядом с чипами. */
  .zd-orders-search { margin-left: 0; width: 100%; }
  .zd-orders-search input { width: 100%; }
}


/* ===== Вертикальный ритм главной кабинета =====
   Было наоборот, чем нужно: от заголовка секции до её содержимого 31px, а
   между самими секциями 28px - то есть разделитель групп оказывался меньше
   расстояния внутри группы, и «Разделы кабинета» зрительно склеивались с
   «Последними заказами». Заголовок теперь принадлежит своему блоку, а
   секции разведены заметно шире. Замерено на 375px. */
.page-account .zd-acc-section .section-title { margin-bottom: 12px; }
.page-account .zd-acc-section .section-title h2 { margin: 0; }
.page-account .zd-acc-list,
.page-account .orders-grid,
.page-account .zd-acc-empty { margin-bottom: 0; }
.page-account .zd-acc-section + .zd-acc-section { margin-top: 36px; }


/* ===== Страница одного заказа (order-view.php) =====
   Те же поверхности и радиусы, что у списка разделов кабинета: белая
   карточка, рамка #eef0f2, радиус 12px. Размеры под аудиторию 40-65+ -
   основной текст 16px, нажимаемые элементы от 44px.

   ЗАКАЗ ЧИТАЕТСЯ КАК ЧЕК - УЗКОЙ КОЛОНКОЙ. Блоки занимали всю ширину
   кабинета, и название позиции оставалось слева, а её сумма уезжала к правому
   краю монитора: на широком экране это полтора метра пустоты между двумя
   числами, которые нужно сопоставить. Колонка держит их в поле зрения
   целиком, а на телефоне ограничение просто не срабатывает.

   Блоки перечислены поимённо, а не «main > *»: прямым ребёнком main лежит ещё
   и форма отзыва - оверлей на весь экран, которому max-width сломал бы
   раскладку. */
.page-order-view .zd-order-head,
.page-order-view .zd-order-card,
.page-order-view .zd-order-items { max-width: 760px; }

.zd-order-back {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; margin: 0 0 4px;
  font-size: 15px; font-weight: 600; color: #6b7280; text-decoration: none;
}
.zd-order-back:hover { color: #01A572; }
.zd-order-back span { font-size: 22px; line-height: 1; }

/* Номер и статус в одной строке: статус - первое, что ищут глазами. */
.zd-order-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.zd-order-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px;
  padding: 20px; margin: 0 0 28px;
  background: #fff; border: 1px solid #eef0f2; border-radius: 12px;
}
.zd-order-meta { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.zd-order-meta__item { display: flex; flex-direction: column; gap: 4px; }
.zd-order-meta__label { font-size: 13px; color: #6b7280; }
.zd-order-meta__value { font-size: 16px; font-weight: 600; color: #111827; }
/* Маленькая плашка с листом, а не широкая зелёная кнопка: чек - действие
   второго ряда, и в полную ширину оно спорило по весу с самим заказом.
   Красный тон и размеры - те, что были у этой кнопки в модалке заказа. */
.zd-order-pdf {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; margin-left: auto; padding: 0 14px;
  background: #FEF2F2; border: 1px solid #FECACA; border-radius: 12px;
  color: #DC2626; font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background var(--zd-dur-fast) var(--zd-ease),
              border-color var(--zd-dur-fast) var(--zd-ease);
}
.zd-order-pdf:hover { background: #FEE2E2; border-color: #FCA5A5; }
.zd-order-pdf:focus-visible { outline: 2px solid #DC2626; outline-offset: 2px; }
.zd-order-pdf svg { width: 16px; height: 16px; flex-shrink: 0; }
.zd-order-pdf:disabled { opacity: .6; cursor: default; }
/* Второй кнопке в паре margin-left:auto не нужен - выравнивание группы
   вправо уже даёт первая (накладная), gap у .zd-order-card держит зазор
   между ними. Без сброса auto-margin браузер трактует его как «ещё раз
   растянуть свободное место», и кнопки расходятся по разным краям строки. */
.zd-order-pdf-share { margin-left: 0; }

.zd-order-h2 { margin: 0 0 12px; font-size: 20px; font-weight: 700; color: #111827; }

.zd-order-item {
  padding: 14px 16px; margin: 0 0 12px;
  background: #fff; border: 1px solid #eef0f2; border-radius: 12px;
}
/* СЕТКА, А НЕ FLEX: у позиций разной длины названия при flex-раскладке
   фото, текст и цена вставали на разной высоте, а суммы не выстраивались в
   столбец. Колонки
   фиксированы: фото 56, текст тянется, цена по содержимому.
   */
.zd-order-item__main {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  text-decoration: none; color: inherit;
}
/* Скругление 8 -> 14px: при 56px восьмёрка почти не читалась, фото выглядело
   квадратом. Больше не ставим - к 16px квадратный
   снимок начинает выглядеть обрезанным по углам. */
.zd-order-item__photo {
  flex: 0 0 auto; width: 56px; height: 56px;
  object-fit: contain; border-radius: 14px; background: #F7F8F9;
}
.zd-order-item__text { min-width: 0; }
.zd-order-item__name { font-size: 16px; font-weight: 600; color: #111827; }
.zd-order-item__unit { margin-top: 4px; font-size: 14px; color: #6b7280; }
.zd-order-item__sum {
  font-size: 16px; font-weight: 700; color: #111827; white-space: nowrap;
  text-align: right;
}
/* Фасовка - своей строкой и своим цветом: слитая с названием («Семена огурца
   Кураж 10 шт») она читалась как часть сорта, и два заказа одного товара в
   разной упаковке выглядели одинаково. */
.zd-order-item__packing {
  margin-top: 2px;
  font-size: 14px; font-weight: 600; color: #01A572;
}
a.zd-order-item__main:hover .zd-order-item__name { color: #01A572; }

/* Кнопки позиции - компактные и одинаковые по высоте. Иконки - из нашего шрифта zeldomkz
   (звезда e912, корзина e903), как и везде в проекте; инлайновый SVG здесь
   запрещён правилом.
   */
/*
 * «ОЦЕНИТЬ ТОВАР» - ЗОЛОТАЯ, А НЕ СЕРАЯ.
 *
 * Была белой с серой рамкой и терялась рядом с заливной кнопкой корзины,
 * а оставить отзыв должно быть заметно. Золото со звездой -
 * то, чем оценку обозначают везде, и читается раньше, чем прочитана подпись.
 *
 * Почему не зелёная: на этой странице зелёная заливка уже значит «лежит в
 * корзине», и бледно-зелёная кнопка рядом с ней читается как та же кнопка в
 * неактивном виде. Проверено сравнением обоих вариантов на живой странице.
 *
 * Звёзды в самой форме остались фирменно-зелёными (--rv-star в
 * css/review-modal.css) - это цвет блока отзывов на карточке товара, и менять
 * его здесь значило бы менять две страницы сразу.
 */
.zd-order-item__rate {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border: 1px solid #FCD34D; border-radius: 20px; background: #FFFBEB;
  color: #92400E; font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background var(--zd-dur-fast) var(--zd-ease),
              border-color var(--zd-dur-fast) var(--zd-ease);
}
.zd-order-item__rate .icon { color: #F59E0B; }
.zd-order-item__rate:hover { background: #FEF3C7; border-color: #F59E0B; }
.zd-order-item__rate:focus-visible { outline: 2px solid #B45309; outline-offset: 2px; }
.zd-order-item__rate .icon,
.zd-order-item__buy .icon,
.zd-order-repeat__btn .icon { font-size: 16px; line-height: 1; }
.zd-order-item__rated {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: 14px; color: #6b7280;
}
.zd-order-item__rated.is-ok { color: #01A572; font-weight: 600; }

.zd-order-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; margin-top: 16px;
  background: #fff; border: 1px solid #eef0f2; border-radius: 12px;
  font-size: 16px; font-weight: 600; color: #374151;
}
.zd-order-total__sum { font-size: 20px; font-weight: 700; color: #111827; }

/* Отметка об оплате - отдельной строкой прямо под итогом, без своей карточки:
   это не самостоятельный блок, а приписка к сумме, и рамка вокруг неё
   превратила бы приписку в раздел. */
.zd-order-paid {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px 0;
  font-size: 15px; color: #6b7280;
}
.zd-order-paid__value { font-weight: 700; color: #B45309; }
/* Оплачен - зелёным: это хорошая новость, и видеть её надо не вчитываясь.
   «Не оплачен» остаётся янтарным, а не красным: это не ошибка покупателя,
   а обычное состояние счёта, который ещё не провели. */
.zd-order-paid.is-paid .zd-order-paid__value { color: #01704F; }

/* Действия под позицией - в одну строку, с переносом на узком экране.

   ОТСТУП СВЕРХУ - У РЯДА, А НЕ У КНОПОК. Он стоял на .zd-order-item__rate и
   на .zd-order-item__rated, но не на кнопке корзины: в одном ряду соседние
   кнопки оказывались на разной высоте, и пара выглядела съехавшей. Выравнивание по низу - чтобы ряд держал линию, даже
   если подпись в одной из кнопок когда-нибудь встанет в две строки. */
.zd-order-item__acts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; }
.zd-order-item__acts:empty { display: none; }

/*
 * ЦВЕТА - КАК НА ВИТРИНЕ. Оранжевый значит «положить в корзину», зелёный -
 * «уже лежит». Кнопка была зелёной в обоих состояниях, различаясь только
 * насыщенностью фона: понять по ней, добавлен товар или нет, было нельзя.
 * Те же значения, что у .hot-add в product-page.css и .btn-add-to-cart в
 * favorites.css - покупатель видит один и тот же товар в трёх списках и не
 * должен решать, где правда.
 */
.zd-order-item__buy {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 18px;
  border: none; border-radius: 20px; background: #FF7700; color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background var(--zd-dur-fast) var(--zd-ease);
}
.zd-order-item__buy:hover { background: #E56900; }
.zd-order-item__buy:focus-visible { outline: 2px solid #01A572; outline-offset: 2px; }
/* Состояние «уже в корзине». Оно приходит и от клика, и от реальной корзины
   при загрузке страницы (js/order-actions.js), поэтому перебивает и
   :disabled, который браузер иначе гасит серым на время запроса.
   Курсор остаётся указателем: второе нажатие убирает позицию из корзины. */
.zd-order-item__buy.is-done,
.zd-order-item__buy.is-done:disabled {
  background: #01A572; color: #fff; opacity: 1;
}
.zd-order-item__buy.is-done:hover { background: #018A5F; }

.zd-order-repeat { margin-top: 20px; }
/* «Повторить заказ» - по содержимому, а не во всю ширину карточки: во всю
   ширину она спорила по весу с «Итого» и читалась как главное действие
   страницы, хотя главное здесь - сам заказ. */
.zd-order-repeat__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 24px;
  border: none; border-radius: 23px; background: #FF7700; color: #fff;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background var(--zd-dur-fast) var(--zd-ease);
}
.zd-order-repeat__btn:hover { background: #E56900; }
.zd-order-repeat__btn:focus-visible { outline: 2px solid #01A572; outline-offset: 2px; }
.zd-order-repeat__btn:disabled { opacity: .7; cursor: default; }
/* Переносить нечего - всё уже в корзине. Тот же зелёный, что у позиций:
   на странице ровно два цвета, и оба значат одно и то же. */
.zd-order-repeat__btn.is-done,
.zd-order-repeat__btn.is-done:hover,
.zd-order-repeat__btn.is-done:disabled {
  background: #01A572; color: #fff; cursor: default; opacity: 1;
}
.zd-order-repeat__note { margin: 10px 0 0; font-size: 14px; color: #6b7280; }

@media (max-width: 560px) {
  /* Цена уходит под текст, а не жмётся к его правому краю: на узком экране
     «155 000 ₸» рядом с длинным названием ломало строку пополам. Она
     остаётся В КОЛОНКЕ ТЕКСТА, а не под фото - так суммы всех позиций
     по-прежнему выстроены по одной вертикали. */
  .zd-order-item__main { grid-template-columns: 56px minmax(0, 1fr); }
  .zd-order-item__sum { grid-column: 2; text-align: left; }
  /* На телефоне кнопка НЕ растягивается во всю ширину - она маленькая и на
     ПК, и здесь. Высота 44px: это единственный размер, который на телефоне
     обязателен (зона нажатия). */
  .zd-order-pdf { margin-left: 0; height: 44px; padding: 0 18px; }
  /* На телефоне кнопки позиции делят строку пополам, а не встают друг под
     другом: столбиком каждая позиция занимала три экранных строки, и заказ
     из семи позиций превращался в бесконечную ленту. Высота 40px остаётся
     удобной для пальца, а ширина у обеих одинаковая - строка не выглядит
     случайной. */
  .zd-order-item__acts { flex-wrap: nowrap; }
  /* Подпись в ОДНУ строку: при 14px «Оценить товар» переносилось, и соседние
     кнопки получали разную высоту (44 против 40) - строка выглядела кривой.
     Уменьшаем шрифт и поля, а не режем текст: «Оценить» без «товара» рядом
     с «В корзину» читается как оценка заказа, а не товара. */
  .zd-order-item__rate,
  .zd-order-item__buy {
    flex: 1 1 0; min-width: 0; justify-content: center;
    padding: 0 8px; gap: 6px; font-size: 13px; white-space: nowrap;
  }
  .zd-order-repeat__btn { width: 100%; }
}


/* ===== Главная кабинета: профиль, активные заказы, «Купить снова» (account.php) =====
   Размеры под аудиторию 40-65+: текст не мельче 14px, нажимаемое не ниже 44px.
   Цвета этапов - те же тона, что у плашек статуса выше (wait/work/ship/final). */
.zd-b2 { --zd-gut: 16px; }

/* Карточка профиля сверху боковой колонки (lib/view/_account-nav.php). */
.zd-prof-card {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; margin-bottom: 16px; border-radius: 18px;
  background: #01A572; color: #fff; text-decoration: none;
}
.zd-prof-card:hover { background: #016A49; }
.zd-prof-card:focus-visible { outline: 3px solid #01A572; outline-offset: 2px; }
.zd-prof-card__avatar {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
  background: #fff; color: #01A572;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800;
}
.zd-prof-card__avatar svg { width: 26px; height: 26px; }
.zd-prof-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zd-prof-card__name { font-size: 16px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.zd-prof-card__phone { font-size: 14px; }

/* Шапка профиля - только телефон. */
.zd-b2-hero { display: none; }

.zd-b2 .section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zd-b2 .section-title h2 { margin: 0; font-size: 20px; font-weight: 800; }
.zd-b2 .zd-acc-link { display: inline-flex; align-items: center; min-height: 44px; }

/* Активные заказы: на компьютере сетка, на телефоне лента вбок. */
.zd-b2-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.zd-b2-order {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px; border-radius: 18px; background: #fff;
  border: 1px solid #E5E7EB; box-shadow: 0 2px 8px rgba(17, 24, 39, .06);
  color: #111827; text-decoration: none;
  transition: box-shadow var(--zd-dur-fast) var(--zd-ease);
}
.zd-b2-order:hover { box-shadow: 0 4px 14px rgba(17, 24, 39, .12); }
.zd-b2-order:focus-visible { outline: 3px solid #01A572; outline-offset: 2px; }
.zd-b2-order__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zd-b2-order__num { font-size: 16px; font-weight: 800; }
.zd-b2-order__sum { font-size: 16px; font-weight: 800; white-space: nowrap; }
.zd-b2-order__state { display: flex; flex-direction: column; gap: 8px; }
.zd-b2-order__label { font-size: 15px; font-weight: 700; }
.zd-b2-order__label.is-wait { color: #C2410C; }
.zd-b2-order__label.is-work { color: #1D4ED8; }
.zd-b2-order__label.is-ship { color: #6D28D9; }
.zd-b2-order__label.is-paid,
.zd-b2-order__label.is-final { color: #01704F; }
.zd-b2-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.zd-b2-bar__seg { height: 6px; border-radius: 3px; background: #E5E7EB; }
.zd-b2-bar__seg.is-done { background: #01A572; }
.zd-b2-bar__seg.is-now { background: #9FD9C4; }
.zd-b2-order__steps { font-size: 14px; line-height: 1.35; color: #4B5563; }
.zd-b2-order__thumbs { display: flex; gap: 8px; }
.zd-b2-order__thumbs img,
.zd-b2-order__more {
  width: 56px; height: 56px; border-radius: 12px; background: #F3F4F6; object-fit: cover;
}
.zd-b2-order__more {
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #4B5563;
}

/* Купить снова. */
.zd-b2-rebuy__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.zd-b2-prod {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 18px; background: #fff;
  border: 1px solid #E5E7EB; box-shadow: 0 2px 8px rgba(17, 24, 39, .06);
}
.zd-b2-prod__link { display: flex; flex-direction: column; gap: 8px; color: #111827; text-decoration: none; flex: 1 1 auto; }
.zd-b2-prod__link img { width: 100%; aspect-ratio: 1.3; object-fit: cover; border-radius: 12px; background: #F3F4F6; }
.zd-b2-prod__name { font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.zd-b2-prod__price { font-size: 17px; font-weight: 800; }
.zd-b2-buy.zd-order-item__buy { width: 100%; justify-content: center; min-height: 44px; border-radius: 12px; font-weight: 700; }

/* Написать менеджеру. */
.zd-b2-wa {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; margin-top: 28px; max-width: 360px;
  border-radius: 16px; background: #1572B6; color: #fff;
  font-size: 16px; font-weight: 700; text-decoration: none;
}
.zd-b2-wa:hover { background: #115F9B; }
.zd-b2-wa:focus-visible { outline: 3px solid #01A572; outline-offset: 2px; }
.zd-b2-wa svg { width: 22px; height: 22px; }
.zd-acc-list__row--exit .zd-acc-list__icon,
.zd-acc-list__row--exit .zd-acc-list__label { color: #B91C1C; }

@media (max-width: 768px) {
  .page-account .zd-b2-hero            { order: 0; }
  .page-account .zd-b2-greeting        { order: 1; display: none; }
  .page-account .zd-b2-orders          { order: 2; }
  .page-account .zd-b2-rebuy           { order: 3; }
  .page-account .zd-acc-section--links { order: 4; }
  .page-account .zd-b2-wa              { order: 5; max-width: none; margin-top: 20px; }

  .zd-b2-hero {
    display: flex; flex-direction: column; gap: 18px;
    margin: 0 calc(-1 * var(--zd-gut)) 20px; padding: 20px var(--zd-gut) 22px;
    background: #01A572; color: #fff; border-radius: 0 0 24px 24px;
  }
  .zd-b2-hero__who { display: flex; align-items: center; gap: 14px; }
  .zd-b2-avatar {
    flex: 0 0 60px; width: 60px; height: 60px; border-radius: 50%;
    background: #fff; color: #01A572;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800;
  }
  .zd-b2-avatar svg { width: 28px; height: 28px; }
  .zd-b2-hero__text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
  .zd-b2-hero__name { font-size: 20px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
  .zd-b2-hero__phone { font-size: 15px; }
  .zd-b2-hero__edit {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
    background: rgba(255, 255, 255, .2); color: #fff;
    display: flex; align-items: center; justify-content: center;
  }
  .zd-b2-hero__edit svg { width: 20px; height: 20px; }
  .zd-b2-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .zd-b2-quick__item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: #fff; text-decoration: none; min-height: 44px;
  }
  .zd-b2-quick__ico {
    position: relative; width: 56px; height: 56px; border-radius: 50%;
    background: #fff; color: #01A572;
    display: flex; align-items: center; justify-content: center;
  }
  .zd-b2-quick__ico svg { width: 26px; height: 26px; }
  .zd-b2-quick__badge {
    position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px;
    padding: 0 5px; box-sizing: border-box; border-radius: 11px;
    background: #FF7700; color: #fff; font-size: 13px; font-weight: 800; /* как счётчики в шапке */
    display: flex; align-items: center; justify-content: center;
  }
  .zd-b2-quick__badge.is-orange { background: #FF7700; }
  .zd-b2-quick__label { font-size: 14px; font-weight: 600; text-align: center; }
  .zd-b2-quick__item:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 12px; }

  .zd-b2-strip {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
    margin: 0 calc(-1 * var(--zd-gut)); padding: 2px var(--zd-gut) 8px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .zd-b2-strip::-webkit-scrollbar { display: none; }
  .zd-b2-order { flex: 0 0 min(300px, 84%); scroll-snap-align: start; padding: 16px; }

  .zd-b2-rebuy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .zd-b2-prod__link img { aspect-ratio: 1; }
  .zd-acc-list__row { min-height: 60px; }
  /* Общий .logout-mobile рисует розовую кнопку на всю ширину - здесь выход обычная строка списка. */
  .zd-acc-list__row.logout-mobile {
    width: auto; margin-top: 0; padding: 12px 16px; border-radius: 0;
    background: transparent; text-align: left; font-size: 16px; font-weight: 600;
  }
}
@media (max-width: 480px) {
  .zd-b2 { --zd-gut: 12px; }
}

/* Кабинет на телефоне: зоны нажатия 44px и подписи быстрых кнопок без слипания. */
.zd-order-item__buy { min-height: 44px; }
.zd-order-back { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 768px) {
  .zd-b2-quick { margin: 0 -6px; gap: 0; }
  .zd-b2-quick__label { overflow-wrap: anywhere; }
}

/* ===== Главная кабинета на телефоне: серые блоки как плитка раздела (#F2F2F2, 16px) ===== */
@media (max-width: 768px) {
  .zd-b2-hero { margin: 14px 0 16px; border-radius: 20px; padding: 16px 14px 18px; }
  .zd-b2-quick__ico .icon { font-size: 26px; line-height: 1; }

  .zd-b2-order, .zd-acc-list, .zd-acc-empty, .zd-b2-prod {
    background: #F2F2F2; border: 0; box-shadow: none; border-radius: 16px;
  }
  .zd-b2-bar__seg { background: #fff; }
  .zd-b2-bar__seg.is-done { background: #01A572; }
  .zd-b2-bar__seg.is-now { background: #9FD9C4; }
  .zd-b2-order__thumbs img, .zd-b2-order__more { background: #fff; }
  .zd-acc-list__row { border-bottom: 2px solid #fff; }
  .zd-acc-list__row:last-child { border-bottom: 0; }
  .zd-acc-list__row:hover { background: #EAEAEA; }
  .zd-acc-list__icon {
    width: 36px; height: 36px; border-radius: 12px; background: #fff;
    display: flex; align-items: center; justify-content: center;
  }
  .zd-acc-list__icon svg { width: 20px; height: 20px; }
  .zd-acc-list__icon .icon { font-size: 20px; line-height: 1; }
  .zd-acc-list__row--exit .zd-acc-list__icon { background: #fff; }

  /* Купить снова: всегда внизу, как рекомендации; строка-переход в списке не нужна - она резко кидала вниз. */
  .page-account .zd-b2-rebuy { order: 4; display: block; margin-top: 24px; }
  .page-account .zd-acc-section--links { order: 3; margin-top: 16px; }
  .zd-acc-list__row[href="#zd-rebuy"], .zd-b2 .zd-b2-rebuy__hide { display: none; }
}
@media (min-width: 769px) {
  .zd-b2 .zd-b2-rebuy__hide { display: none; }
}
@media (max-width: 768px) {
  /* Четыре подписи в ряд: шире рамки гаттера на 4px с каждой стороны и без своих отступов у ряда. */
  .zd-b2-hero { margin-inline: -4px; padding-inline: 10px; }
  .zd-b2-quick { margin: 0 -4px; gap: 0; }
  .zd-b2-quick__label { letter-spacing: -.03em; overflow-wrap: normal; word-break: keep-all; }
}
@media (max-width: 340px) {
  .zd-b2-quick__label { font-size: 12px; }
}

/* ===== Верхняя строка вкладок кабинета и шторка разделов (lib/view/_account-bar.php), только телефон ===== */
.zd-cabbar, .zd-cabsheet { display: none; }
@media (max-width: 768px) {
  .zd-cabbar { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; min-height: 48px; }
  .zd-cabbar__back, .zd-cabbar__menu {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; border: 0;
    background: #F2F2F2; color: #111827; cursor: pointer; text-decoration: none;
    display: flex; align-items: center; justify-content: center; padding: 0;
  }
  .zd-cabbar__back .icon { font-size: 22px; line-height: 1; }
  .zd-cabbar__menu svg { width: 24px; height: 24px; }
  .zd-cabbar__title {
    flex: 1 1 auto; min-width: 0; font-size: 20px; font-weight: 700; color: #111827;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .zd-cabbar__back:focus-visible, .zd-cabbar__menu:focus-visible { outline: 3px solid #01A572; outline-offset: 2px; }

  /* Название и разделы теперь в строке и в шторке: дубли на странице прячем. */
  .zd-cabbar ~ .mobile-only,
  .zd-cabbar ~ .page-header,
  .zd-cabbar ~ .zd-order-back,
  .zd-cabbar ~ h2:first-of-type { display: none; }

  .zd-cabsheet { display: block; position: fixed; inset: 0; z-index: 10050; visibility: hidden; pointer-events: none; }
  .zd-cabsheet.is-open { visibility: visible; pointer-events: auto; }
  .zd-cabsheet__dim { position: absolute; inset: 0; background: rgba(17, 24, 39, .45); opacity: 0; transition: opacity .2s ease; }
  .zd-cabsheet.is-open .zd-cabsheet__dim { opacity: 1; }
  .zd-cabsheet__panel {
    position: absolute; left: 8px; right: 8px; bottom: var(--zd-sheet-bottom, 8px);
    max-height: calc(100dvh - var(--zd-sheet-bottom, 8px) - 16px); overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border-radius: 22px; padding: 0 12px 12px;
    transform: translateY(calc(100% + var(--zd-sheet-bottom, 8px) + 8px));
    transition: transform var(--zd-dur-slow, .32s) var(--zd-ease-out, cubic-bezier(.16, 1, .3, 1));
  }
  .zd-cabsheet.is-open .zd-cabsheet__panel { transform: none; }
  .zd-cabsheet__panel.zd-panel-dragging { transition: none; }
  .zd-cabsheet__handle { display: flex; justify-content: center; padding: 20px 0 14px; min-height: 44px; touch-action: none; cursor: grab; }
  .zd-cabsheet__handle::before { content: ""; width: 40px; height: 5px; border-radius: 4px; background: #d6d9dd; }
  .zd-cabsheet__head { display: flex; align-items: center; justify-content: space-between; margin: -6px 0 8px; }
  .zd-cabsheet__name { font-size: 18px; font-weight: 700; color: #111827; }
  .zd-cabsheet__x {
    width: 44px; height: 44px; border: 0; border-radius: 50%; background: #F2F2F2; color: #1f1f1f;
    cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
  }
  .zd-cabsheet__x .icon { font-size: 22px; line-height: 1; }
  .zd-cabsheet__list { margin: 0; }
  .zd-cabsheet__list .zd-acc-list__row { min-height: 52px; }
  .zd-cabsheet__list .is-current .zd-acc-list__label { color: #01704F; }
  .zd-cabsheet__list .is-current .zd-acc-list__icon { background: #E6F3EC; }
}
@media (prefers-reduced-motion: reduce) {
  .zd-cabsheet__dim, .zd-cabsheet__panel { transition: none; }
}

/* ===== Мои заказы на телефоне: карточка заметно отделена от фона даже на тусклом экране ===== */
@media (max-width: 768px) {
  .order-box { background: #F0F0F0; border: 1px solid #E0E0E0; border-radius: 16px; }
}

/* ===== Главная кабинета: плотнее ===== */
@media (max-width: 768px) {
  .zd-b2-hero { margin: 10px -4px 12px; padding: 12px 10px 14px; gap: 12px; }
  .zd-b2-avatar { flex-basis: 48px; width: 48px; height: 48px; font-size: 17px; }
  .zd-b2-hero__name { font-size: 18px; }
  .zd-b2-quick__item { gap: 4px; }
  .zd-b2-quick__ico { width: 48px; height: 48px; }
  .zd-b2-quick__ico .icon { font-size: 24px; }
  .page-account .zd-acc-section + .zd-acc-section { margin-top: 20px; }
  .page-account .zd-acc-section .section-title { margin-bottom: 8px; }
  .zd-b2 .section-title h2 { font-size: 18px; }
  .zd-b2-order { padding: 12px; gap: 10px; }
  .zd-b2-order__thumbs img, .zd-b2-order__more { width: 44px; height: 44px; border-radius: 10px; }
  .zd-acc-list__row { min-height: 52px; padding: 8px 12px; gap: 12px; }
  .zd-acc-list__icon { width: 34px; height: 34px; }
  .zd-b2-wa { min-height: 48px; margin-top: 14px; }
  .page-account .zd-acc-section--links { margin-top: 12px; }
}
@media (max-width: 768px) {
  /* Строка вкладок всегда первая в колонке: общие правила .page-orders / .page-account раздают order всем детям main. */
  .page-orders .zd-cabbar, .page-account .zd-cabbar, .zd-cabbar { order: -1; }
}
@media (max-width: 768px) {
  .zd-cabbar__title {
    font-size: 18px; line-height: 1.15; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .zd-cabsheet__list .zd-acc-list__row.logout-mobile { padding: 8px 12px; font-size: 16px; font-weight: 600; }
}
@media (max-width: 768px) {
  /* Заголовок первого блока профиля повторял название в верхней строке. */
  .zd-cabbar ~ .account-cols > .account-col:first-child > h2:first-child { display: none; }
}
@media (max-width: 768px) {
  .zd-b2-hero { margin-inline: -8px; padding-inline: 8px; }
  .zd-b2-quick { margin: 0 -2px; }
}
@media (max-width: 768px) {
  .zd-cabbar__title { font-size: 20px; }
}

/* Количество заказов на кнопках отбора: отдельным кружком, чтобы цифра читалась как счётчик, а не часть названия. */
.zd-orders-chip__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 7px; margin-left: 6px; border-radius: 12px;
  background: #E5E7EB; color: #374151; font-size: 14px; font-weight: 700; line-height: 1;
  vertical-align: middle;
}
.zd-orders-chip.is-active .zd-orders-chip__n { background: rgba(255, 255, 255, .3); color: #fff; }
@media (max-width: 560px) {
  /* Четыре кнопки отбора: сетка два на два вместо трёх неровных строк. */
  .zd-orders-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .zd-orders-chip { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
  .zd-orders-chip__n { margin-left: 8px; }
}

/* Завершённый заказ - зеленоватая заливка и вниз списка, отменённый - приглушённый розоватый; остальные серые. */
.order-box.order-box--final { background: #E6F4EC; border-color: #BFE3CF; }
.order-box.order-box--cancelled { background: #F6EEEE; border-color: #E6D2D2; }


/* ===== Страница заказа на телефоне: сводка-карточка, две кнопки в ряд, «Повторить заказ» внизу над меню ===== */
.zd-ordsum { display: none; }
@media (max-width: 768px) {
  .zd-ordsum {
    display: block; margin: 0 0 12px; padding: 14px; border-radius: 16px;
    background: #EAF7F1; border: 1px solid #BFE6D3;
  }
  .zd-ordsum--wait { background: #FFF6EC; border-color: #FFD8B5; }
  .zd-ordsum--work { background: #EEF4FE; border-color: #C9DAF8; }
  .zd-ordsum--ship { background: #F3EFFD; border-color: #DDD3F7; }
  .zd-ordsum--cancelled { background: #F6EEEE; border-color: #E6D2D2; }
  .zd-ordsum__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .zd-ordsum__total { font-size: 22px; font-weight: 800; color: #111827; white-space: nowrap; }
  .zd-ordsum .zd-b2-bar { margin: 12px 0 10px; }
  .zd-ordsum .zd-b2-bar__seg { background: #fff; }
  .zd-ordsum .zd-b2-bar__seg.is-done { background: #01A572; }
  .zd-ordsum .zd-b2-bar__seg.is-now { background: #9FD9C4; }
  .zd-ordsum__meta { margin-top: 10px; font-size: 14px; color: #4B5563; line-height: 1.4; }

  /* Всё, что сводка уже показала, на телефоне не повторяем. */
  .page-order-view .zd-order-head,
  .page-order-view .zd-order-back,
  .page-order-view .zd-order-meta,
  .page-order-view .zd-order-total,
  .page-order-view .zd-order-paid { display: none; }

  /* Накладная и «Поделиться» - две кнопки в ряд. */
  .page-order-view .zd-order-card { display: flex; gap: 8px; padding: 0; margin: 0 0 12px; background: transparent; border: 0; box-shadow: none; }
  .page-order-view .zd-order-card .zd-order-pdf { flex: 1 1 0; justify-content: center; min-height: 44px; margin: 0; }

  .page-order-view .zd-order-item { background: #F2F2F2; border: 0; border-radius: 16px; }

  /* «Повторить заказ» закреплён над нижним меню, всегда под пальцем. */
  .page-order-view .zd-order-repeat {
    position: fixed; left: 0; right: 0; bottom: calc(var(--zd-nav-base, 65px) + var(--zd-nav-lift, 14px));
    z-index: 998; margin: 0; padding: 10px 12px; background: #fff; border-top: 1px solid #E5E7EB;
  }
  .page-order-view .zd-order-repeat__btn { width: 100%; min-height: 48px; justify-content: center; }
  .page-order-view .zd-order-repeat__note { margin: 6px 0 0; font-size: 13px; }
  .page-order-view main { padding-bottom: calc(var(--zd-nav-base, 65px) + var(--zd-nav-lift, 14px) + 120px); }
}

@media (max-width: 768px) {
  .page-order-view .zd-order-card .zd-order-pdf { white-space: nowrap; padding: 0 8px; gap: 6px; font-size: 14px; }
}

/* ===== Узкие экраны (320 и 280px): ничего не вылезает за край, все блоки видны ===== */
/* Кнопки отбора заказов: колонки не шире экрана, на самых узких - в одну колонку. */
@media (max-width: 560px) {
  .zd-orders-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zd-orders-chip { min-width: 0; padding: 0 10px; }
  .zd-orders-chip__n { flex: none; margin-left: 6px; }
}
@media (max-width: 299px) {
  .zd-orders-filter { grid-template-columns: minmax(0, 1fr); }
}

/* Сводка заказа и шапки блоков главной: переносятся вместо того, чтобы упираться в край. */
@media (max-width: 340px) {
  .zd-ordsum__top { flex-wrap: wrap; row-gap: 4px; }
  .zd-ordsum__total { font-size: 20px; }
  .zd-b2 .section-title { flex-wrap: wrap; row-gap: 0; }
  .zd-b2 .section-title h2 { font-size: 17px; }
}

/* Адреса: кнопки «Изменить» и «Удалить» уходят под текст адреса на всю ширину. */
@media (max-width: 400px) {
  .saved-address-card { grid-template-columns: minmax(0, 1fr); }
  .saved-address-card .sa-text, .saved-address-card .sa-actions { grid-column: 1 / -1; }
  .saved-address-card .sa-actions { align-self: stretch; }
  .saved-address-card .sa-edit, .saved-address-card .sa-delete { flex: 1 1 0; min-width: 0; }
}

/* Сравнение: стрелки, крестик и точки листания с зоной нажатия не меньше 44px. */
@media (max-width: 768px) {
  .cmp-pager-arrow, .cmp-remove { min-width: 44px; min-height: 44px; }
  .cmp-dot { position: relative; }
  .cmp-dot::after { content: ""; position: absolute; inset: -18px -8px; }
  .cmp-cat__link { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 300px) {
  /* Подписи под значками главной кабинета на 280px: мельче и впритык, чтобы «Избранное» и «Сравнение» не слипались. */
  .zd-b2-quick__label { font-size: 11px; letter-spacing: -.04em; }
  .zd-b2-quick__ico { width: 44px; height: 44px; }
}

/* ===== Компактный размер на телефоне до 400px: меньше отступы и кегль, всё видно, зоны нажатия не меньше 40px ===== */
@media (max-width: 400px) {
  /* верхняя строка вкладок */
  .zd-cabbar { gap: 6px; margin: 0 0 10px; min-height: 40px; }
  .zd-cabbar__back, .zd-cabbar__menu { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; }
  .zd-cabbar__back .icon { font-size: 18px; }
  .zd-cabbar__menu svg { width: 22px; height: 22px; }
  .zd-cabbar__title { font-size: 17px; }

  /* главная кабинета */
  .zd-b2-hero { margin: 8px -6px 10px; padding: 10px 8px 12px; gap: 10px; border-radius: 16px; }
  .zd-b2-avatar { flex-basis: 40px; width: 40px; height: 40px; font-size: 15px; }
  .zd-b2-hero__name { font-size: 16px; }
  .zd-b2-hero__phone { font-size: 13px; }
  .zd-b2-hero__edit { flex-basis: 40px; width: 40px; height: 40px; }
  .zd-b2-quick__ico { width: 42px; height: 42px; }
  .zd-b2-quick__ico .icon { font-size: 21px; }
  .zd-b2-quick__label { font-size: 13px; }
  .zd-b2-quick__badge { min-width: 18px; height: 18px; font-size: 11px; top: -3px; right: -3px; }
  .zd-b2 .section-title h2 { font-size: 16px; }
  .zd-b2 .zd-acc-link { min-height: 40px; font-size: 14px; }
  .zd-b2-order { padding: 10px; gap: 8px; border-radius: 14px; }
  .zd-b2-order__num, .zd-b2-order__sum { font-size: 14px; }
  .zd-b2-order__label { font-size: 13px; }
  .zd-b2-order__steps { font-size: 12px; }
  .zd-b2-order__thumbs img, .zd-b2-order__more { width: 38px; height: 38px; border-radius: 8px; }
  .zd-acc-list { border-radius: 14px; }
  .zd-acc-list__row { min-height: 46px; padding: 6px 10px; gap: 10px; }
  .zd-acc-list__label { font-size: 15px; }
  .zd-acc-list__value { font-size: 13px; }
  .zd-acc-list__icon { width: 32px; height: 32px; border-radius: 10px; }
  .zd-acc-list__icon svg { width: 18px; height: 18px; }
  .zd-b2-wa { min-height: 44px; font-size: 15px; border-radius: 12px; margin-top: 10px; }
  .page-account .zd-acc-section + .zd-acc-section { margin-top: 14px; }

  /* шторка меню кабинета */
  .zd-cabsheet__name { font-size: 16px; }
  .zd-cabsheet__x { width: 40px; height: 40px; }
  .zd-cabsheet__list .zd-acc-list__row { min-height: 46px; }

  /* Мои заказы */
  .zd-orders-chip { min-height: 40px; font-size: 14px; }
  .zd-orders-chip__n { min-width: 22px; height: 22px; font-size: 13px; }
  .zd-orders-search input { min-height: 40px; font-size: 14px; }
  .order-box { padding: 10px; border-radius: 14px; }
  .order-num { font-size: 14px; }
  .order-date { font-size: 12px; }
  .order-box .price { font-size: 15px; }
  .order-icon { width: 40px; height: 40px; flex-basis: 40px; }
  .status-tag { font-size: 12px; padding: 2px 8px; }

  /* страница заказа */
  .zd-ordsum { padding: 10px; border-radius: 14px; margin-bottom: 8px; }
  .zd-ordsum__total { font-size: 19px; }
  .zd-ordsum__meta { font-size: 13px; margin-top: 8px; }
  .page-order-view .zd-order-card .zd-order-pdf { min-height: 40px; font-size: 13px; }
  .page-order-view .zd-order-item { border-radius: 14px; }
  .page-order-view .zd-order-repeat { padding: 8px 10px; }
  .page-order-view .zd-order-repeat__btn { min-height: 44px; font-size: 15px; }

  /* формы кабинета: данные, адреса */
  .page-orders main h2 { font-size: 18px; }
  .saved-address-card { padding: 12px; }
  .sa-text { font-size: 14px; }
  .sa-edit, .sa-delete { min-height: 40px; padding: 8px 10px; }
}


/* ===== Адреса на телефоне (А2): весь адрес нажимается и становится основным, правка и удаление значками ===== */
.sa-rd, .sa-ic { display: none; }
.sa-hint { margin: 2px 2px 0; font-size: 13px; color: #6B7280; }
@media (max-width: 768px) {
  .saved-address-card { position: relative; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 10px 10px 12px; background: #F2F2F2; border: 1.5px solid transparent; border-radius: 14px; align-items: center; }
  .saved-address-card.is-primary { background: #EAF7F1; border-color: #01A572; }
  .saved-address-card .sa-radio { grid-column: 1; grid-row: 1; min-height: 28px; gap: 8px; font-size: 13px; }
  .saved-address-card .sa-radio input { position: absolute; opacity: 0; pointer-events: none; }
  .saved-address-card .sa-rd { display: inline-block; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid #C4CBC7; background: #fff; box-sizing: border-box; }
  .saved-address-card.is-primary .sa-rd { border: 6px solid #01A572; }
  .saved-address-card .sa-radio::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
  .saved-address-card .sa-text { grid-column: 1; grid-row: 2; padding-left: 28px; }
  .saved-address-card .sa-actions { position: relative; z-index: 2; grid-column: 2; grid-row: 1 / span 2; flex-direction: row; gap: 4px; align-self: center; }
  .saved-address-card .sa-edit, .saved-address-card .sa-delete { flex: 0 0 auto; width: 40px; height: 40px; min-height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: #fff; }
  .saved-address-card .sa-delete { color: #B91C1C; }
  .saved-address-card .sa-ic { display: block; width: 20px; height: 20px; }
  .saved-address-card .sa-bt { display: none; }
}

/* hidden должен прятать форму адреса и её вступление: их display перебивал атрибут. */
#addressForm[hidden], #formIntro[hidden], #addAddressBtn[hidden] { display: none !important; }
.sa-hint { display: none; }
@media (max-width: 768px) { .sa-hint { display: block; } }


/* ===== Мои данные на телефоне (Д2): поля строками, правка в шторке ===== */
.prof-rows, .zd-edsheet { display: none; }
@media (max-width: 768px) {
  body.prof-rows-on .prof-rows { display: block; margin: 0 0 14px; }
  body.prof-rows-on #profileForm { display: none; }
  .prof-set { margin: 0 0 14px; }
  .prof-set__h { margin: 0 2px 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6B7280; }
  .prof-set__list { border-radius: 14px; overflow: hidden; background: #F2F2F2; }
  .prof-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    min-height: 52px; padding: 6px 12px; border: 0; border-bottom: 2px solid #fff; background: transparent;
    font: inherit; text-align: left; cursor: pointer; color: #111827;
  }
  .prof-row:last-child { border-bottom: 0; }
  .prof-row__txt { display: flex; flex-direction: column; min-width: 0; }
  .prof-row__k { font-size: 12px; font-weight: 500; color: #6B7280; }
  .prof-row__v { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
  .prof-row__v.is-empty { color: #9CA3AF; font-weight: 600; }
  .prof-row__txt:only-child .prof-row__k { font-size: 15px; font-weight: 700; color: #111827; }
  .prof-row__ic { flex: none; width: 20px; height: 20px; color: #6B7280; }
  .prof-row__ic svg { width: 20px; height: 20px; display: block; }
  .prof-row:focus-visible { outline: 3px solid #01A572; outline-offset: -3px; }

  .zd-edsheet { display: block; position: fixed; inset: 0; z-index: 10050; visibility: hidden; pointer-events: none; }
  .zd-edsheet.is-open { visibility: visible; pointer-events: auto; }
  .zd-edsheet__dim { position: absolute; inset: 0; background: rgba(17, 24, 39, .45); opacity: 0; transition: opacity .2s ease; }
  .zd-edsheet.is-open .zd-edsheet__dim { opacity: 1; }
  .zd-edsheet__panel {
    position: absolute; left: 8px; right: 8px; bottom: var(--zd-sheet-bottom, 8px);
    max-height: calc(100dvh - var(--zd-sheet-bottom, 8px) - 16px); overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border-radius: 22px; padding: 12px 14px 14px;
    transform: translateY(calc(100% + var(--zd-sheet-bottom, 8px) + 8px));
    transition: transform var(--zd-dur-slow, .32s) var(--zd-ease-out, cubic-bezier(.16, 1, .3, 1));
  }
  .zd-edsheet.is-open .zd-edsheet__panel { transform: none; }
  .zd-edsheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .zd-edsheet__name { font-size: 17px; font-weight: 700; color: #111827; }
  .zd-edsheet__x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #F2F2F2; color: #1f1f1f; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
  .zd-edsheet__x .icon { font-size: 20px; line-height: 1; }
  .zd-edsheet__body .form-group { margin-bottom: 10px; }
  .zd-edsheet__msg { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; }
  .zd-edsheet__msg.is-error { background: #FDECEC; color: #B91C1C; }
  .zd-edsheet__msg.is-ok { background: #EAF7F1; color: #01704F; }
  .zd-edsheet__save { width: 100%; min-height: 46px; border: 0; border-radius: 12px; background: #01A572; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) { .zd-edsheet__dim, .zd-edsheet__panel { transition: none; } }


.prof-row--solo .prof-row__k { font-size: 15px; font-weight: 700; color: #111827; }

@media (max-width: 300px) {
  body .zd-b2-quick__label { font-size: 11px; letter-spacing: -.04em; }
  body .zd-b2-quick__ico { width: 40px; height: 40px; }
}

@media (max-width: 300px) {
  body .zd-acc-list__label { font-size: 14px; }
  body .zd-acc-list__meta, body .zd-acc-list__sub { font-size: 12px; }
}

@media (max-width: 340px) {
  body .zd-orders-chip { padding: 0 8px; font-size: 13px; gap: 4px; }
  body .zd-orders-chip__n { min-width: 22px; height: 22px; margin-left: 4px; font-size: 12px; }
}

/* Цвет карточки заказа по этапу: оформлен - тёплый, в работе - голубой, в пути - сиреневый (как подпись статуса). */
.order-box.order-box--wait, .zd-b2-order.zd-b2-order--wait { background: #FFF3E6; border-color: #F6D5AE; }
.order-box.order-box--work, .zd-b2-order.zd-b2-order--work { background: #EAF1FE; border-color: #C3D6F8; }
.order-box.order-box--ship, .zd-b2-order.zd-b2-order--ship { background: #F1ECFD; border-color: #D6CAF6; }
.zd-b2-order.zd-b2-order--final { background: #E6F4EC; border-color: #BFE3CF; }
.zd-b2-order.zd-b2-order--cancelled { background: #F6EEEE; border-color: #E6D2D2; }

/* Оплата в нижней плашке заказа: видна рядом с кнопкой. */
.zd-order-payrow { display: none; }
@media (max-width: 768px) {
  .page-order-view .zd-order-payrow { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; font-size: 14px; color: #4B5563; }
  .page-order-view .zd-order-payrow__v { padding: 3px 10px; border-radius: 999px; font-weight: 700; background: #FFF3E6; color: #B45309; }
  .page-order-view .zd-order-payrow.is-paid .zd-order-payrow__v { background: #E6F4EC; color: #01704F; }
  .page-order-view main { padding-bottom: calc(var(--zd-nav-base, 65px) + var(--zd-nav-lift, 14px) + 150px); }
}
.zd-order-repeat--paid-only { display: none; }
@media (max-width: 768px) { .page-order-view .zd-order-repeat.zd-order-repeat--paid-only { display: block; } }

/* Подпись адреса: чипы в форме и метка на карточке. */
.sa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sa-chip { min-height: 40px; padding: 0 16px; border: 1px solid #D1D5DB; border-radius: 22px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: #374151; cursor: pointer; }
.sa-chip.is-on { background: #01A572; border-color: #01A572; color: #fff; }
.sa-tag { display: inline-block; align-self: flex-start; margin: 0 0 2px; padding: 1px 9px; border-radius: 10px; font-size: 12px; font-weight: 700; background: #E6F4EC; color: #01704F; }
.sa-tag--dacha { background: #F1ECFD; color: #6D28D9; }
.sa-tag--work { background: #EAF1FE; color: #1D4ED8; }
.sa-tag--other { background: #EEF0F2; color: #4B5563; }

/* Шторка кабинета: заголовок с крестиком не прижат к верху и остаётся на месте при прокрутке списка (малые экраны). */
@media (max-width: 768px) {
  .zd-cabsheet__panel { padding-top: 0; max-height: calc(100svh - var(--zd-sheet-bottom, 8px) - 16px); }
  .zd-cabsheet__head { position: sticky; top: 0; z-index: 2; margin: 0 0 4px; padding: 14px 0 8px; background: #fff; }
}
@media (max-width: 400px) and (max-height: 700px) {
  .zd-cabsheet__list .zd-acc-list__row { min-height: 44px; }
  .zd-cabsheet__head { padding-top: 10px; padding-bottom: 6px; }
}

/* Кабинет на телефоне (владелец 08.10):
   - шапка профиля фирменным зелёным #01A572 вместо тёмного #017A55;
   - строка «назад / название / меню» симметрична: обе кнопки 44px, название по центру между ними. */
@media (max-width: 768px) {
  .zd-b2-hero { background: #01A572 !important; }
  .zd-cabbar { gap: 12px; }
  .zd-cabbar__title { text-align: center; font-size: 18px; }
}
/* Поля кабинета («Мои данные», адреса): текст 16px и на ПК, как во всех формах сайта. */
.form-control { font-size: 16px; }
select.form-control { min-height: 52px; }

/* Боковое меню кабинета шире (владелец 08.10), карандаш на карточке профиля - как на телефоне. */
body > aside { width: 330px; min-width: 330px; }
@media (max-width: 1024px) { body > aside { width: 270px; min-width: 270px; } }
.zd-prof-card__text { flex: 1; }
.zd-prof-card__edit { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; }
.zd-prof-card__edit svg { width: 18px; height: 18px; }

/* Компьютер: «Написать менеджеру» живёт в боковом меню (lib/view/_account-nav.php), кнопка в теле главной кабинета - только телефон. */
.nav-item--wa { color: #0F5E9C; }
@media (min-width: 769px) { body > aside ~ main .zd-b2-wa { display: none; } }
/* Пункт меню «Написать менеджеру» - синяя плашка, как прежняя кнопка на главной кабинета. */
aside nav .nav-item--wa, aside nav .nav-item--wa:hover { background: #0F5E9C; color: #fff; }
/* Верх заголовка на всех страницах кабинета на одной линии с карточкой профиля: у H2 (адреса, новости, мои данные) был отступ браузера. */
body > aside + main > h2:first-of-type, body > aside + main .account-col:first-child > h2:first-child { margin-top: 0; }
/* Заголовок страницы кабинета на компьютере - один размер везде (26px, как «Мои заказы», «Избранное / Сравнение»); important - у части страниц размер задан прямо в разметке. */
@media (min-width: 769px) {
  body > aside + main > h2:first-of-type, body > aside + main .account-col:first-child > h2:first-child { font-size: 26px !important; font-weight: 700; line-height: 1.2; }
}
/* Карточка профиля в меню: телефон одной строкой, имя не дробится по слогам. */
.zd-prof-card { gap: 10px; padding: 14px; }
.zd-prof-card__avatar { flex-basis: 48px; width: 48px; height: 48px; }
.zd-prof-card__phone { white-space: nowrap; }
@media (max-width: 1024px) {
  .zd-prof-card__phone { font-size: 13px; }
  /* Узкое меню планшета: карандаш убираем (нажимается вся карточка), аватар меньше - имени и телефону хватает места. */
  .zd-prof-card__edit { display: none; }
  .zd-prof-card__avatar { flex-basis: 40px; width: 40px; height: 40px; font-size: 15px; }
}
/* Доверенный получатель: в строке два поля (имя, телефон), общая сетка .form-row на три колонки сжимала их, а адрес вставал в одну колонку из трёх. */
@media (min-width: 481px) {
  #recipientForm .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #recipientForm .form-row > .form-group[style*="100%"] { grid-column: 1 / -1; }
}
/* Получатель заказа и окно его смены (order-view.php, js/order-recipient.js). */
.zd-order-recip { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.zd-order-recip .zd-order-meta__label { flex-basis: 100%; }
.zd-order-recip__btn { min-height: 36px; padding: 0 14px; border: 1.5px solid #01A572; border-radius: 10px; background: #fff; color: #01A572; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; }
.zd-order-recip__btn:hover { background: #E8F7F1; }
.zd-order-recip__btn:focus-visible { outline: 2px solid #01A572; outline-offset: 2px; }
.zd-recip-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.zd-recip-opt { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; min-height: 56px; padding: 10px 14px; border: 1.5px solid #E5E7EB; border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.zd-recip-opt:hover { border-color: #9FD9C4; }
.zd-recip-opt:has(input:checked) { border-color: #01A572; background: #E8F7F1; }
.zd-recip-opt input { grid-row: span 2; width: 20px; height: 20px; margin: 0; accent-color: #01A572; }
.zd-recip-opt__name { font-size: 15px; font-weight: 600; color: #111827; }
.zd-recip-opt__phone { font-size: 14px; color: #4B5563; }
.zd-recip-add { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 8px; color: #01A572; font-size: 15px; font-weight: 600; text-decoration: none; }
.zd-recip-add:hover { text-decoration: underline; }
.zd-recip-modal { width: min(420px, calc(100vw - 32px)); }
@media (max-width: 768px) {
  .page-order-view .zd-order-card { flex-wrap: wrap; }
  .page-order-view .zd-order-card .zd-order-meta { display: flex; flex: 1 1 100%; order: -1; padding: 12px 14px; background: #F2F2F2; border-radius: 16px; }
  .page-order-view .zd-order-meta__item:not(.zd-order-recip) { display: none; }
  .page-order-view .zd-order-recip { flex: 1 1 100%; justify-content: space-between; }
  .zd-order-recip__btn { min-height: 44px; }
}
/* Карточка профиля: длинное имя - одной строкой с многоточием. «Купить снова»: название в две строки, фасовка своей строкой, кнопка в одну строку. */
.zd-prof-card__text { min-width: 0; }
.zd-prof-card__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.zd-b2-prod__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; }
.zd-b2-prod__packing { margin-top: -4px; font-size: 14px; font-weight: 600; color: #01A572; }
.zd-b2-prod__price { margin-top: auto; }
.zd-b2-buy.zd-order-item__buy { white-space: nowrap; gap: 6px; padding: 0 10px; font-size: 15px; }
.zd-b2-hero__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; }
/* Доверенные получатели: та же карточка, что адрес, но без кружка «основной» - текст без отступа под него, в одну строку с кнопками; кнопки 44px. */
@media (max-width: 768px) {
  #recipientsList .saved-address-card .sa-text { grid-row: 1; padding-left: 4px; }
  #recipientsList .saved-address-card .sa-actions { grid-row: 1; }
  .saved-address-card .sa-edit, .saved-address-card .sa-delete { width: 44px; height: 44px; min-height: 44px; }
}
/* Кабинет: «Купить снова» по 4 (телефон - по 2) с кнопкой «Показать ещё»; выход отдельным блоком в самом низу. */
.zd-b2-rebuy:not(.is-all) .products > .hot-card:nth-child(n+5) { display: none; }
.zd-b2-rebuy__more { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 12px; border: 1.5px solid #01A572; border-radius: 12px; background: #fff; color: #01A572; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.zd-b2-rebuy__more[hidden] { display: none; }
.zd-b2-rebuy__more:hover { background: #E8F7F1; }
@media (max-width: 768px) {
  .zd-b2-rebuy:not(.is-all) .products > .hot-card:nth-child(n+3) { display: none; }
  .page-account .zd-acc-section--logout { order: 6; margin-top: 16px; }
}

/* ==== .zi: значки шрифта zd-ui вместо svg (сгенерировано по правилам svg выше) ==== */
.nav-item .zi { width: 20px; font-size: 20px; height: 20px; opacity: 0.8; }
.card-icon-box .zi { width: 20px; font-size: 20px; height: 20px; }
.order-icon .zi { width: 26px; font-size: 26px; height: 26px; }
.otc-icon .zi { width: 22px; font-size: 22px; height: 22px; }
.order-pdf-btn .zi { width: 15px; font-size: 15px; height: 15px; flex-shrink: 0; }
.order-modal-close .zi { width: 16px; font-size: 16px; height: 16px; color: #6B7280; }
.modal-item-rate .zi { width: 15px; font-size: 15px; height: 15px; }
@media (max-width: 768px) { .card-icon-box .zi { width: 17px; font-size: 17px; height: 17px; } }
@media (max-width: 768px) { .order-icon .zi { width: 22px; font-size: 22px; height: 22px; } }
@media (max-width: 480px) { .order-icon .zi { width: 20px; font-size: 20px; height: 20px; } }
.zd-acc-list__icon .zi { width: 22px; font-size: 22px; height: 22px; display: block; }
.zd-order-pdf .zi { width: 16px; font-size: 16px; height: 16px; flex-shrink: 0; }
.zd-prof-card__avatar .zi { width: 26px; font-size: 26px; height: 26px; }
.zd-b2-wa .zi { width: 22px; font-size: 22px; height: 22px; }
@media (max-width: 768px) { .zd-b2-avatar .zi { width: 28px; font-size: 28px; height: 28px; } }
@media (max-width: 768px) { .zd-b2-hero__edit .zi { width: 20px; font-size: 20px; height: 20px; } }
@media (max-width: 768px) { .zd-b2-quick__ico .zi { width: 26px; font-size: 26px; height: 26px; } }
@media (max-width: 768px) { .zd-acc-list__icon .zi { width: 20px; font-size: 20px; height: 20px; } }
@media (max-width: 768px) { .zd-cabbar__menu .zi { width: 24px; font-size: 24px; height: 24px; } }
@media (max-width: 400px) { .zd-cabbar__menu .zi { width: 22px; font-size: 22px; height: 22px; } }
@media (max-width: 400px) { .zd-acc-list__icon .zi { width: 18px; font-size: 18px; height: 18px; } }
@media (max-width: 768px) { .prof-row__ic .zi { width: 20px; font-size: 20px; height: 20px; display: block; } }
.zd-prof-card__edit .zi { width: 18px; font-size: 18px; height: 18px; }
.saved-address-card .sa-ic.zi { font-size: 20px; } .orders-empty__icon.zi { font-size: 48px; } .order-chevron.zi { font-size: 16px; }
.sa-ic.zi { display: none; }
@media (max-width: 768px) { .saved-address-card .sa-ic.zi { display: inline-flex; } }
.zd-b2-order__count { display: block; margin-top: 10px; font-size: 14px; font-weight: 600; color: #4B5563; }