/*
 * Тулкит для редизайна "магазинной" части сайта (каталог/карточка товара/корзина/
 * заказ/сравнение/избранное/поиск/личный кабинет) — тестовые страницы, см.
 * test/claude/shop-redesign/plan.md.
 *
 * Использует те же CSS-переменные --rb-*, что определены в pages-motion.css
 * на .rb-page — подключать pages-motion.css вместе с этим файлом.
 *
 * ВАЖНО: везде, где переопределяются классы реальных прод-компонентов
 * (.pr__sidebar, .tabs__nav и т.д.) — это ЧИСТЫЙ CSS-рескин поверх
 * существующей разметки/JS-хуков, без переименования классов, на которые
 * опирается detail-item.js/catalog.js/basket.js/order.js. Новые классы
 * добавляются РЯДОМ с существующими, никогда не заменяют их.
 */

/* ================= Карточка товара ================= */

.rb-product-page .container-card,
.rb-product-page .content-wrapper > .container {
    max-width: 1332px;
}

/* --- Шапка товара: хлебные крошки/название/код/действия --- */
.rb-product-head {
    margin-bottom: 24px;
}
.rb-product-head .breadcrumb,
.rb-product-page .breadcrumb {
    font-size: 13px;
    color: var(--rb-muted);
    margin-bottom: 12px;
}
.rb-product-page h1.cart__item_name-js {
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--rb-ink);
    margin: 0 0 14px;
}
.rb-product-page .pr__meta {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rb-border);
}
.rb-product-page .pr__meta__id {
    color: var(--rb-muted);
    font-size: 13.5px;
}
.rb-product-page .pr__meta__review__link-js {
    color: var(--rb-accent-deep) !important;
    font-weight: 600;
}
/* Кнопки "в сравнение"/"в избранное" — тот же add__to_compare-js/add__to_favorite-js,
   просто скин пилюли поверх существующего .btn.btn-toggle. */
.rb-product-page .btn.btn-toggle {
    border: 1px solid var(--rb-border);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 500;
    background: #fff;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.rb-product-page .btn.btn-toggle:hover { border-color: var(--rb-navy); }
.rb-product-page .btn.btn-toggle.active {
    background: var(--rb-tint-orange);
    border-color: var(--rb-accent);
    color: var(--rb-accent-deep);
}

/* --- Галерея --- */
.rb-gallery-frame {
    border-radius: 20px;
    overflow: hidden;
    background: var(--rb-tint-grey);
    border: 1px solid var(--rb-border);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    position: relative;
}
.rb-gallery-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s ease;
}
.rb-gallery-frame:hover img { transform: scale(1.04); }
.rb-gallery-frame:after {
    content: "⤢";
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(10, 10, 11, .55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}
.rb-gallery-frame:hover:after { opacity: 1; }
.rb-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.rb-gallery-thumbs .image-small {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--rb-border);
    background: #fff;
    transition: border-color .18s ease, transform .18s ease;
}
.rb-gallery-thumbs .image-small:hover { border-color: var(--rb-navy); transform: translateY(-2px); }
.rb-gallery-thumbs .image-small img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* --- Характеристики (тизер сбоку от галереи) --- */
.rb-product-page .pr__specs.pr__option {
    background: var(--rb-tint-grey);
    border-radius: 18px;
    padding: 22px 24px;
}
.rb-product-page .pr__spec li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--rb-border);
    font-size: 14px;
}
.rb-product-page .pr__spec li:last-child { border-bottom: none; }
.rb-product-page .characteristic-btn-show {
    margin-top: 14px;
    font-weight: 600;
    gap: 6px;
}

/* --- Блок покупки (.pr__sidebar) — САМОЕ чувствительное место: только CSS,
   структура/классы/data-атрибуты не менялись в шаблоне. --- */
.rb-buybox {
    background: #fff;
    border: 1px solid var(--rb-border);
    border-radius: 20px;
    padding: 26px 26px 22px;
    box-shadow: 0 20px 50px -30px rgba(10, 10, 11, .25);
    position: sticky;
    top: 16px;
}
.rb-buybox .pr__price__title__discount .font-size-28 {
    font-size: 32px;
    font-weight: 700;
    color: var(--rb-ink);
}
.rb-buybox .pr__price__title__no-discount {
    color: var(--rb-muted);
    text-decoration: line-through;
}
.rb-buybox .pr__sidebar__hr,
.rb-buybox hr.hr__light__gray { border-color: var(--rb-border); margin: 18px 0; }
.rb-buybox .pr__calc {
    background: var(--rb-tint-grey);
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 4px;
}
.rb-buybox .pr__calc__row { padding: 6px 0; }
.rb-buybox .hr__dotted { border-top: 1px dashed var(--rb-border); margin: 2px 0; }
.rb-buybox .pr__action__btn,
.rb-buybox .catalog-item__btn-basket-js {
    width: 100%;
    border-radius: 12px;
    font-weight: 600;
    padding: 14px 18px;
    box-shadow: 0 14px 26px -10px rgba(239, 113, 59, .45);
    transition: transform .18s ease, box-shadow .18s ease;
}
.rb-buybox .pr__action__btn:hover { transform: translateY(-2px); }
.rb-buybox .catalog-item__qty-control {
    border-radius: 12px;
    border: 1px solid var(--rb-border);
}
.rb-buybox .catalog-item__cart-link {
    border-radius: 12px;
    background: var(--rb-navy);
}
@media (max-width: 1023px) {
    .rb-buybox { position: static; }
}

/* --- Sticky-панель "В корзину" на карточке товара, мобилка (ТЗ п.12) ---
   Кнопка — тонкая прокси (см. catalog.js): по клику находит текущий реально
   видимый элемент действия в живом .pr__action и кликает по нему. Панель НЕ
   клонирует DOM исходника — вся бизнес-логика добавления в корзину остаётся
   на единственном настоящем узле. */
.rb-sticky-buybox {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9500; /* ниже .mobile-bottom-nav (9999), выше контента страницы */
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    box-sizing: border-box;
    background: #fff;
    border-top: 1px solid var(--rb-border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .08);
}

@media (max-width: 767px) {
    .rb-sticky-buybox.rb-sticky-buybox--active {
        display: flex;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    /* За кнопку/степпер теперь отвечает sticky-панель выше — блок в самой
       карточке на мобилке дублирует её, прячем. getComputedStyle().display,
       который читает catalog.js (findPrimaryAction/syncAction), не зависит
       от видимости родителя, так что вся логика панели продолжает работать
       как обычно, даже когда .pr__action физически скрыт. */
    .pr__sidebar .pr__action {
        display: none;
    }
}

/* Цена и кнопка делят панель поровну (50/50). Содержимое цены — клон
   .pr__price целиком (розница + старая цена при скидке + опт + цена за
   кг/пог.м/шт, см. catalog.js) — там же font-size 28/24/20/18/14px из
   полноразмерного сайдбара, для тонкой панели их пришлось сжать. */
.rb-sticky-buybox__price {
    flex: 1 1 0;
    min-width: 0;
    color: var(--rb-ink);
    overflow: hidden;
}

.rb-sticky-buybox__price .pr__price {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.rb-sticky-buybox__price .pr__price__title {
    gap: 6px !important;
    align-items: baseline;
    flex-wrap: wrap;
}

.rb-sticky-buybox__price [class*="font-size-"] {
    font-size: inherit !important;
}

.rb-sticky-buybox__price .cart__item_price-js,
.rb-sticky-buybox__price .cart__item_opt_price-js {
    font-size: 15px;
    font-weight: 700;
}

.rb-sticky-buybox__price .pr__price__title > div,
.rb-sticky-buybox__price .price-row,
.rb-sticky-buybox__price .price-row .price {
    font-size: 15px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rb-sticky-buybox__price .pr__price__title__no-discount {
    font-size: 12px !important;
    text-decoration: line-through;
    color: var(--rb-muted);
}

.rb-sticky-buybox__price .price-row {
    font-size: 12px !important;
    color: var(--rb-muted);
    margin: 0 !important;
}

/* .pr__action__btn обычно получает размер от предка .pr__action (см.
   ".pr__action .pr__action__btn" в index.css) — кнопка панели вне этого
   предка, размер задаём явно сами. */
.rb-sticky-buybox__btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    min-height: 44px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rb-sticky-buybox__btn:disabled {
    opacity: .5;
    cursor: default;
}

/* Степпер −/qty/+ — занимает тот же слот 50%, что и кнопка (показывается
   вместо неё, когда товар уже в корзине; см. syncAction в catalog.js).
   Форма — как у настоящего .catalog-item__qty-control на карточке
   (catalog.css): скруглён весь контейнер, +/- кнопки квадратные и прижаты
   к его краям (не отдельные кружки — border-radius:50% был неверной формой
   из первой версии, .spin__min/.spin__plus круглые только САМИ ПО СЕБЕ вне
   контекста qty-control; внутри него — .catalog-item__qty-control .spin__min
   явно обнуляет border-radius). */
.rb-sticky-buybox__qty {
    display: none;
    flex: 1 1 0;
    min-width: 0;
    align-items: stretch;
    min-height: 44px;
    border: 1px solid var(--rb-border);
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

.rb-sticky-buybox__qty-minus,
.rb-sticky-buybox__qty-plus {
    flex: 0 0 auto;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    background: #184076;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.rb-sticky-buybox__qty-minus:hover,
.rb-sticky-buybox__qty-plus:hover {
    background: #ef713b;
}

/* Прелоадер пересчёта количества — тот же визуал, что у
   .catalog-item__qty-control.is-loading на самой карточке (catalog.css),
   @keyframes btn-spin общий, объявлен в index.css. */
.rb-sticky-buybox__qty.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.55;
}
.rb-sticky-buybox__qty.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(24, 64, 118, 0.25);
    border-top-color: #184076;
    border-radius: 50%;
    animation: btn-spin 0.65s linear infinite;
}

.rb-sticky-buybox__qty-value {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--rb-ink);
    background: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Доставка/город --- */
.rb-product-page .pr__delivery {
    border-radius: 16px !important;
    padding: 18px 20px;
}
.rb-product-page .pr__delivery .title__small { font-weight: 600; margin-bottom: 6px; }
.rb-product-page .pr__delivery .open__city_popup-js {
    font-weight: 600;
}

/* --- Вкладки (sticky pill nav) — та же .tabs/.tabs__nav/.tabs__nav__item
   разметка и id, только визуал. JS сам переключает .fixed/.sticky/.active. --- */
.rb-product-page .tabs__container {
    background: #fff;
}
.rb-product-page .tabs__nav {
    display: flex;
    gap: 6px;
    padding: 10px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.rb-product-page .tabs__nav::-webkit-scrollbar { display: none; }
.rb-product-page .tabs__nav__item {
    flex: none;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 14px;
    color: var(--rb-muted);
    transition: background-color .18s ease, color .18s ease;
    text-decoration: none;
}
.rb-product-page .tabs__nav__item:hover { background: var(--rb-tint-grey); color: var(--rb-ink); }
.rb-product-page .tabs__nav__item.active {
    background: var(--rb-navy);
    color: #fff;
}
.rb-product-page .tabs.fixed .tabs__container,
.rb-product-page .tabs.sticky .tabs__container {
    box-shadow: 0 8px 20px -14px rgba(10, 10, 11, .3);
}

/* --- Описание / характеристики (полная таблица) --- */
.rb-product-page .description__main,
.rb-product-page .description__option {
    background: #fff;
    border: 1px solid var(--rb-border);
    border-radius: 18px;
    padding: 28px 30px;
    margin-bottom: 20px;
}
.rb-product-page .title_h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--rb-ink);
}
.rb-product-page .specs__table .table-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rb-border);
    font-size: 14px;
}
.rb-product-page .specs__table .table-row__name { color: var(--rb-muted); }
.rb-product-page .specs__table .table-row:last-child { border-bottom: none; }

/* --- Оплата и доставка (payment-card) — id/detail-page-nav-search-js оставлены,
   визуал переведён на язык .rb-feature-row. --- */
.rb-product-page .payment-card {
    background: var(--rb-navy);
    border-radius: 24px;
    color: #fff;
    padding: 8px 0;
    margin: 32px 0;
    /* Прод-баг (воспроизводится и на реальной /catalog/.../ странице): .payment-card
       схлопывается в height:0 (overflow:hidden + дочерний .container не создаёт BFC).
       flow-root — безопасный современный клирфикс, только в скоупе редизайна. */
    display: flow-root;
}
.rb-product-page .payment-card h2 { color: #fff; font-size: 22px; }
.rb-product-page .bullet-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.rb-product-page .pay__right { background: rgba(255, 255, 255, .06); border-radius: 0 24px 24px 0; }
.rb-product-page .pay__right ul.unstyle { display: flex; flex-direction: column; gap: 26px; }
.rb-product-page .pay__right li { display: flex; align-items: flex-start; gap: 16px; }
@media (max-width: 900px) {
    .rb-product-page .pay__right { border-radius: 0 0 24px 24px; }
}

/* --- Sub-компоненты (услуги/отзывы/вопросы/документы) — обёрнуты в rb-reveal,
   сами не редизайнились (отдельные вложенные компоненты, вне объёма этой фазы). --- */
.rb-product-page .rb-subblock-wrap { margin: 24px 0; }

/* ================= Листинг каталога (фаза 2) =================
 * Полный редизайн: описание раздела (.rb-content-card, уже есть в тулките),
 * подкатегории (.rb-cat-grid/.rb-card--cat, уже есть, см. /organizations/),
 * фильтр (.rb-filter*, чистый CSS-рескин), сетка товаров вертикального вида
 * (.rb-product-grid/.rb-product-tile). Horizontal/table виды НЕ редизайнились
 * (вне объёма фазы 2) — только базовая работоспособность, не трогали CSS.
 */
.rb-catalog-page .catalog-list-container h1 {
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--rb-ink);
}

/* --- Шапка листинга: сортировка/вид/NDS --- */
.rb-catalog-page .catalog-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
    padding: 14px 18px;
    background: var(--rb-tint-grey);
    border-radius: 14px;
}
.rb-catalog-page .catalog-items-header__count-ndc { font-size: 13px; color: var(--rb-muted); }
.rb-catalog-page .js-catalog-sort {
    border: 1px solid var(--rb-border);
    border-radius: 8px;
    padding: 6px 10px;
    background: #fff;
    font-size: 13.5px;
}
.rb-catalog-page .catalog-items-header__elements-view-icons {
    display: flex;
    gap: 4px;
}
.rb-catalog-page .catalog-items-header__elements-view-icons svg {
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease;
}
.rb-catalog-page .catalog-items-header__elements-view-icons svg.active,
.rb-catalog-page .catalog-items-header__elements-view-icons svg:hover {
    background: #fff;
    box-shadow: 0 4px 10px -4px rgba(10,10,11,.2);
}

/* --- Кнопка "Фильтр" (мобильная) --- */
.rb-catalog-page .catalog-items-filter-btn__inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--rb-navy);
    color: #fff;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
}

/* --- Фильтр --- */
.rb-catalog-page .rb-filter {
    background: #fff;
    border: 1px solid var(--rb-border);
    border-radius: 18px;
    padding: 20px;
}
.rb-catalog-page .rb-filter__toggle-btn { display: none; }
.rb-catalog-page .rb-filter__block {
    padding: 14px 0;
    border-bottom: 1px solid var(--rb-border);
}
.rb-catalog-page .rb-filter__block:last-of-type { border-bottom: none; }
.rb-catalog-page .rb-filter__block-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 14px;
    color: var(--rb-ink);
    cursor: pointer;
    margin: 0;
}
.rb-catalog-page .filter-block__arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--rb-muted);
    border-bottom: 2px solid var(--rb-muted);
    transform: rotate(45deg);
    transition: transform .18s ease;
    flex: none;
}
.rb-catalog-page .rb-filter__block-toggle.collapsed .filter-block__arrow { transform: rotate(-45deg); }
.rb-catalog-page .rb-filter__block-body {
    margin-top: 12px;
    max-height: 400px;
    overflow: hidden;
    transition: max-height .2s ease, margin-top .2s ease, opacity .2s ease;
    opacity: 1;
}
.rb-catalog-page .rb-filter__block-body.collapsed {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
}
.rb-catalog-page .rb-filter__range { display: flex; gap: 8px; }
.rb-catalog-page .rb-filter__range-input,
.rb-catalog-page .rb-filter__block select.input {
    border: 1px solid var(--rb-border);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13.5px;
    width: 100%;
}
.rb-catalog-page .rb-filter__list { display: flex; flex-direction: column; gap: 8px; }
.rb-catalog-page .rb-filter__checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    cursor: pointer;
}
.rb-catalog-page .rb-filter__buttons {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.rb-catalog-page .rb-filter__buttons .apply { border-radius: 10px; font-weight: 600; }
.rb-catalog-page .rb-filter__buttons .reset { border-radius: 10px; }

/* --- Сетка товаров (вертикальный вид) --- */
.rb-catalog-page .rb-product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.rb-catalog-page .catalog-item.rb-product-tile {
    /* .catalog-item добавлен в селектор для специфичности (0,3,0) — иначе легаси-правило
       .popular__product .catalog-item (0,2,0, index.css) выигрывает по порядку подключения
       и перебивает border-radius/padding на слайдере "Популярные товары" на главной. */
    background: #fff;
    border: 1px solid var(--rb-border);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
    /* Легаси .catalog-item{max-width:230px} (index.css) рассчитан на старую узкую
       карточку — на широком слайдере "Популярные товары" (слот ~326px) карточка
       упиралась в этот потолок и "прилипала" к левому краю слота, оставляя мёртвое
       пространство справа от каждой карточки (наиболее заметно — у последней в ряду,
       перед правым краем секции). В сетке листинга каталога не проявлялось, т.к. там
       колонки уже уже 230px. */
    max-width: none;
    /* Легаси .catalog-item{box-sizing:content-box} (index.css:2188 и :6255) — width:100%
       в content-box означает "100% КОНТЕНТА", к которому потом ещё прибавляются padding
       (32px) и border (2px) СВЕРХУ — карточка оказывалась на 34px шире выделенного слота
       и наезжала на соседнюю карточку слайдера. border-box возвращает стандартное
       поведение (width:100% = вся видимая ширина, включая padding/border). */
    box-sizing: border-box;
}
.rb-catalog-page .catalog-item.rb-product-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -24px rgba(10, 10, 11, .3);
}
.rb-catalog-page .rb-product-tile .catalog-item__image {
    border-radius: 14px;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
}
.rb-catalog-page .rb-product-tile .catalog-item__image img { width: 100%; height: 100%; object-fit: contain; }
.rb-catalog-page .rb-product-tile .catalog-item__label a {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--rb-ink);
    text-decoration: none;
    line-height: 1.35;
}
.rb-catalog-page .rb-product-tile .catalog-item__sublabel {
    font-size: 12.5px;
    color: #2f9e44;
    margin-top: 4px;
}
.rb-catalog-page .rb-product-tile .catalog-item__params { font-size: 12.5px; color: var(--rb-muted); margin-top: 6px; }
.rb-catalog-page .rb-product-tile .catalog-item__price-container { margin-top: auto; padding-top: 12px; }
.rb-catalog-page .rb-product-tile .catalog-item__price {
    font-size: 20px;
    font-weight: 700;
    color: var(--rb-ink);
}
.rb-catalog-page .rb-product-tile .catalog-item__price-opt {
    font-size: 12.5px;
    color: var(--rb-muted);
    margin: 2px 0 10px;
}
.rb-catalog-page .rb-product-tile__btn,
.rb-catalog-page .rb-product-tile .catalog-item__btn-basket-js {
    width: 100%;
    border-radius: 10px;
    background: var(--rb-accent);
    color: #fff;
    font-weight: 600;
    padding: 10px;
    border: none;
    cursor: pointer;
}
.rb-catalog-page .rb-product-tile__btn--wait { background: var(--rb-muted); }
.rb-catalog-page .rb-product-tile .catalog-item__qty-control { border-radius: 10px; border: 1px solid var(--rb-border); }
.rb-catalog-page .rb-product-tile .catalog-item__info-icons a {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--rb-tint-grey);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rb-catalog-page .rb-product-tile .catalog-item__info-icons a.active { background: var(--rb-tint-orange); }
@media (max-width: 1220px) { .rb-catalog-page .rb-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .rb-catalog-page .rb-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rb-catalog-page .rb-product-grid { grid-template-columns: 1fr; } }

/* ================= Сравнение (фаза 4) ================= */
/* Данные плотные (десятки характеристик) — таблицу оставляем как есть (структура/классы для
   script.js — data-col-index, .compare-scroll, .compare-nav и т.д. — не трогаются), только
   визуальный рескин + анимация появления. */

.rb-compare-page h1 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.01em; color: var(--rb-ink); margin-bottom: 20px; }

.rb-compare-toolbar { margin-bottom: 16px; }
.rb-compare-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--rb-muted); }
.rb-compare-switch .checkbox__wrap { position: relative; padding-left: 44px; }
.rb-compare-switch .checkbox__wrap::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 34px; height: 20px; border-radius: 999px; background: var(--rb-border); transition: background .2s ease;
}
.rb-compare-switch .checkbox__wrap::after {
    content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .2s ease;
}
.rb-compare-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.rb-compare-switch input:checked ~ .checkbox__wrap::before { background: var(--rb-accent); }
.rb-compare-switch input:checked ~ .checkbox__wrap::after { left: 16px; }

.rb-compare-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.rb-compare-tab {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px;
    background: var(--rb-tint-grey); color: var(--rb-ink); font-size: 14px; font-weight: 500;
    text-decoration: none; transition: background .18s ease, color .18s ease;
}
.rb-compare-tab i { font-style: normal; font-size: 12px; opacity: .65; }
.rb-compare-tab.active,
.rb-compare-tab:hover { background: var(--rb-accent); color: #fff; }
.rb-compare-tab.active i,
.rb-compare-tab:hover i { opacity: .85; }

.rb-compare-content { margin-bottom: 28px; }

.rb-compare-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 10px; }
.rb-compare-nav__btn {
    width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rb-border); background: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, opacity .15s ease;
}
.rb-compare-nav__btn:hover:not(:disabled) { background: var(--rb-tint-grey); }
.rb-compare-nav__btn:disabled { opacity: .35; cursor: default; }
.rb-compare-nav__count { font-size: 13px; color: var(--rb-muted); min-width: 70px; text-align: center; }

.rb-compare-scroll {
    border-radius: 16px;
    border: 1px solid var(--rb-border);
    overflow: hidden;
    background: #fff;
}
.rb-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.rb-compare-label-cell {
    background: var(--rb-tint-grey);
    font-size: 13.5px;
    color: var(--rb-muted);
    font-weight: 500;
    padding: 12px 16px;
    min-width: 160px;
    vertical-align: middle;
}
.rb-compare-product-cell { padding: 20px 16px; vertical-align: top; border-left: 1px solid var(--rb-border); }
.rb-compare-product { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; position: relative; }
.rb-compare-remove {
    position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%;
    background: var(--rb-tint-grey); color: var(--rb-muted); display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.rb-compare-remove:hover { background: #fde2e2; color: #c92a2a; }
.rb-compare-image-link { display: block; width: 120px; height: 120px; }
.rb-compare-image-link img { width: 100%; height: 100%; object-fit: contain; }
.rb-compare-name {
    font-size: 13.5px; font-weight: 600; color: var(--rb-ink); text-decoration: none; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rb-compare-price { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rb-compare-price-main,
.compare-product__price-main { font-size: 18px; font-weight: 700; color: var(--rb-ink); }
.compare-product__price-old { font-size: 12.5px; color: var(--rb-muted); }
.compare-product__price-measure { font-size: 12px; color: var(--rb-muted); }
.rb-compare-btn {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 10px; background: var(--rb-accent); color: #fff; font-size: 13px; font-weight: 600;
    padding: 9px 12px; text-decoration: none; margin-top: 4px; transition: filter .15s ease;
}
.rb-compare-btn:hover { filter: brightness(0.95); }
.rb-compare-btn--order { background: var(--rb-muted); }

.rb-compare-section-head td { background: var(--rb-tint-grey); font-size: 13px; font-weight: 600; color: var(--rb-ink); padding: 10px 16px; }
.rb-compare-prop-row:nth-child(even) { background: #fafbfc; }
.rb-compare-prop-row--diff .rb-compare-value-cell { color: var(--rb-ink); font-weight: 600; }
.rb-compare-value-cell,
.rb-compare-label-cell { padding: 10px 16px; font-size: 13.5px; border-top: 1px solid var(--rb-border); }
.rb-compare-value-cell { border-left: 1px solid var(--rb-border); text-align: center; }

.rb-compare-actions { display: flex; align-items: center; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.rb-compare-btn-clear {
    border-radius: 10px; border: 1px solid var(--rb-border); background: #fff; color: var(--rb-ink);
    padding: 10px 18px; font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .15s ease;
}
.rb-compare-btn-clear:hover { border-color: var(--rb-accent); color: var(--rb-accent); }
.rb-compare-continue { font-size: 14px; color: var(--rb-accent); text-decoration: none; }
.rb-compare-continue:hover { text-decoration: underline; }

@media (max-width: 767px) {
    .rb-compare-label-cell { min-width: 120px; font-size: 12.5px; }
    .rb-compare-image-link { width: 90px; height: 90px; }
    .rb-compare-name { font-size: 12.5px; }
}

/* ================= Корзина (фаза 5) ================= */
/* basket.js опирается на порядок сиблингов (.spin__min, .spin__plus, input — .next()/.next().next()
   в обработчиках степпера) и на конкретные классы/data-атрибуты — структура НЕ меняется, только
   визуальный рескин поверх существующей разметки. */

.rb-basket-page h1 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.01em; color: var(--rb-ink); margin-bottom: 20px; }

.rb-basket-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 18px; background: var(--rb-tint-grey); border-radius: 12px; margin-bottom: 16px;
}
.rb-basket-checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--rb-ink); }
.rb-basket-remove-all { font-size: 13.5px; color: #c92a2a; text-decoration: none; transition: opacity .15s ease; }
.rb-basket-remove-all.disabled { opacity: .4; pointer-events: none; }
.rb-basket-remove-all:not(.disabled):hover { text-decoration: underline; }

.rb-basket-content {
    border: 1px solid var(--rb-border);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}
.rb-basket-head {
    background: var(--rb-tint-grey);
    font-size: 12.5px;
    color: var(--rb-muted);
    font-weight: 500;
    padding: 12px 16px;
}
.rb-basket-item {
    padding: 16px;
    border-top: 1px solid var(--rb-border);
    transition: background .15s ease;
}
.rb-basket-item:first-child { border-top: none; }
.rb-basket-item:hover { background: #fafbfc; }
.rb-basket-item__image img { border-radius: 10px; object-fit: contain; }
.rb-basket-item__name { color: var(--rb-ink); font-weight: 600; text-decoration: none; line-height: 1.4; }
.rb-basket-item__name:hover { color: var(--rb-accent); }
.rb-basket-item__price .order__item__price-val div { font-weight: 700; color: var(--rb-ink); }
.rb-basket-item__total span:last-child { font-weight: 700; font-size: 16px; color: var(--rb-ink); }

.rb-basket-spin { display: inline-flex; align-items: center; border: 1px solid var(--rb-border); border-radius: 10px; overflow: hidden; }
.rb-basket-spin__btn { background: var(--rb-tint-grey); border: none; width: 30px; height: 30px; cursor: pointer; transition: background .15s ease; }
.rb-basket-spin__btn:hover:not(:disabled) { background: var(--rb-tint-orange); }
.rb-basket-spin__btn:disabled { opacity: .4; cursor: default; }
.rb-basket-qty { width: 44px; margin: 0 !important; height: 30px; text-align: center; border: none; border-left: 1px solid var(--rb-border); border-right: 1px solid var(--rb-border); font-size: 14px; }

.rb-basket-item__remove { cursor: pointer; color: var(--rb-muted); transition: color .15s ease; }
.rb-basket-item__remove:hover { color: #c92a2a; }

.rb-basket-coupon { margin-top: 20px; padding: 16px 18px; background: var(--rb-tint-grey); border-radius: 12px; }
.rb-basket-coupon__input { border-radius: 10px; border: 1px solid var(--rb-border); padding: 10px 14px; width: 100%; }
.rb-basket-coupon__btn { border-radius: 10px; white-space: nowrap; }

.rb-basket-summary {
    border: 1px solid var(--rb-border);
    border-radius: 16px;
    padding: 20px;
    background: #fff;
}
.rb-basket-summary .title__medium__nm { font-size: 17px; font-weight: 600; color: var(--rb-ink); }
.rb-basket-summary .order__price li { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--rb-border); }
.rb-basket-summary .order__price li.last { border-bottom: none; font-size: 17px; font-weight: 700; }
.rb-basket-next__btn { border-radius: 12px; font-weight: 600; margin-top: 14px; transition: filter .15s ease; }
.rb-basket-next__btn:hover { filter: brightness(0.95); }

@media (max-width: 900px) {
    .rb-basket-head { display: none; }
}

/* ================= Оформление заказа (фаза 6) ================= */
/* Самая рискованная фаза: buyer.php/delivery.php/payment.php/summary.php переиспользуются
   БЕЗ ИЗМЕНЕНИЙ из оригинальной test2/ (см. test2.redesign/template.php — include по пути),
   поэтому здесь только визуальный CSS поверх уже существующих классов order.css, без единого
   нового id/переименования -js классов. Внешние виджеты карт (СДЭК/ПЭК/ДЛ) и order.js не тронуты. */

.rb-order-page h1 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.01em; color: var(--rb-ink); margin-bottom: 20px; }

.rb-order-section {
    background: #fff;
    border: 1px solid var(--rb-border);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 16px;
}
.rb-order-section .title__small { font-size: 16px; font-weight: 600; color: var(--rb-ink); margin-bottom: 14px; }

.rb-order-section .input-group { margin-bottom: 14px; }
.rb-order-section .input-group input,
.rb-order-section .input-group select {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--rb-border);
    padding: 10px 14px;
    font-size: 14px;
    box-sizing: border-box;
}
.rb-order-section .input-group input:focus,
.rb-order-section .input-group select:focus { outline: none; border-color: var(--rb-accent); }
.rb-order-section .group__label { font-size: 12.5px; color: var(--rb-muted); margin-bottom: 4px; display: inline-block; }

.rb-order-section .choice__btn {
    border: 1px solid var(--rb-border);
    border-radius: 12px;
    padding: 12px 16px;
    transition: border-color .15s ease, background .15s ease;
}
.rb-order-section .choice__btn:hover { border-color: var(--rb-accent); }
.rb-order-section .choice__btn:has(input:checked) { border-color: var(--rb-accent); background: var(--rb-tint-orange); }
.rb-order-section .choice__btn .head { font-weight: 600; color: var(--rb-ink); display: flex; align-items: center; justify-content: space-between; }
.rb-order-section .choice__btn .caption { font-size: 12.5px; color: var(--rb-muted); margin-top: 4px; }

.rb-order-submit__btn { border-radius: 12px; font-weight: 600; padding: 12px 28px; transition: filter .15s ease; }
.rb-order-submit__btn:hover { filter: brightness(0.95); }

.rb-order-summary-wrap .checkout__basket {
    background: #fff;
    border: 1px solid var(--rb-border);
    border-radius: 16px;
    padding: 20px;
    position: sticky;
    top: 20px;
}
.rb-order-summary-wrap .title__medium__nm { font-size: 17px; font-weight: 600; color: var(--rb-ink); }
.rb-order-summary-wrap .order__basket__item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--rb-border);
}
.rb-order-summary-wrap .order__price li { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--rb-border); }
.rb-order-summary-wrap .order__price li.last { border-bottom: none; font-size: 17px; font-weight: 700; }

@media (max-width: 900px) {
    .rb-order-layout { flex-direction: column; }
    .rb-order-summary-wrap .checkout__basket { position: static; }
}

/* ================= Поиск (фаза 7, прототип с нуля) ================= */
/* Страницы результатов поиска в проекте не было вообще — это новый прототип на
   REST-логике /api/v2/search/fast/ (через локальный тонкий api.php), а не редизайн. */

.rb-search-page h1 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.01em; color: var(--rb-ink); margin-bottom: 20px; }

.rb-search-box {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 640px;
    border: 1px solid var(--rb-border);
    border-radius: 14px;
    padding: 4px 4px 4px 16px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.rb-search-box:focus-within { border-color: var(--rb-accent); box-shadow: 0 0 0 3px var(--rb-tint-orange); }
.rb-search-box__icon { color: var(--rb-muted); flex: 0 0 auto; }
.rb-search-box__input {
    flex: 1 1 auto;
    border: none;
    outline: none;
    font-size: 15px;
    padding: 12px 10px;
    background: transparent;
    color: var(--rb-ink);
}
.rb-search-box__clear {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: none;
    background: var(--rb-tint-grey);
    border-radius: 50%;
    color: var(--rb-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, background .15s ease;
}
.rb-search-box__clear--visible { opacity: 1; pointer-events: auto; }
.rb-search-box__clear:hover { background: var(--rb-tint-orange); color: var(--rb-accent); }

.rb-search-status { margin-top: 16px; font-size: 14px; color: var(--rb-muted); min-height: 20px; }
.rb-search-status--error { color: #c92a2a; }

.rb-search-sections { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rb-search-section-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--rb-tint-grey);
    color: var(--rb-ink);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.rb-search-section-chip:hover { background: var(--rb-accent); color: #fff; }

.rb-search-results {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
}
.rb-search-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rb-border);
    border-radius: 14px;
    padding: 14px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.rb-search-card:hover { box-shadow: 0 8px 24px rgba(20,30,50,.08); transform: translateY(-2px); border-color: var(--rb-accent); }
.rb-search-card__img { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: var(--rb-tint-grey); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.rb-search-card__img img { width: 100%; height: 100%; object-fit: contain; }
.rb-search-card__noimg { font-size: 12px; color: var(--rb-muted); }
.rb-search-card__name { font-size: 13.5px; font-weight: 600; color: var(--rb-ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
.rb-search-card__price { font-size: 15px; font-weight: 700; color: var(--rb-ink); margin-top: auto; }

@media (max-width: 1100px) { .rb-search-results { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .rb-search-results { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .rb-search-results { grid-template-columns: 1fr; } }

/* ================= Личный кабинет (фаза 8) ================= */
/* Только гармонизация внешней рамки (сайдбар-меню + хаб-плитки кабинета) — содержимое
   заказов уже имеет свой redesign-шаблон из более ранней модернизации (не наш rb-* тулкит,
   чужая задача) и не трогается. "Чисто легаси" подстраницы (cabinet/act_of_reconciliation/
   docs/price/delivery_address) — редизайн шапки/меню общий для всех через этот же CSS. */

.rb-personal-sidebar { padding: 20px; background: #fff; border: 1px solid var(--rb-border); border-radius: 16px; height: fit-content; }
/* Кнопка-переключатель нужна только в свёрнутой иконке-рейке на ≤900px
   (см. её @media ниже, где display возвращается на flex) — на десктопе
   меню и так полностью текстовое, разворачивать нечего. */
.rb-personal-nav__toggle { display: none; }

/* Легаси-разметка этого компонента держит СТАРЫЕ классы (.profile__nav__item,
   .manager-info__container, .manager-info__discount и т.д.) РЯДОМ с новыми
   rb-* — сняты не были, чтобы не трогать чужой JS/другие шаблоны, которые их
   используют. На этой конкретной тестовой странице index.css физически
   подключается ПОСЛЕ pages-motion-shop.css (не как на остальных redesign-test
   страницах) — легаси-правила той же specificity выигрывали по порядку
   подключения. Плюс отдельно — `.profile .profile__nav__item .ui` в index.css
   само по себе специфичнее (0,2,1: 2 класса+тег), чем было у меня (0,1,1),
   независимо от порядка файлов — принудительно занижало исходную иконку до
   24px c margin-right:20px, из-за чего съезжало центрирование в бейдже.
   Везде ниже — либо составные селекторы с .rb-personal-sidebar/.profile
   (гарантированно выше по specificity), либо явный !important точечно там,
   где иначе не выйти (сам легаси .ui почти не имеет модификаторов). */
.rb-personal-sidebar .profile__nav__item.rb-personal-nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--rb-ink);
    min-height: 0;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.rb-personal-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.rb-personal-nav__item a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--rb-muted); width: 100%; }
/* Легаси `.profile .profile__nav__item:hover {filter:brightness(.4)}` (index.css,
   0,3,0) специфичнее, чем был мой одиночный `:hover` (0,2,0) — реально применялся
   ПОВЕРХ моего фона и просто затемнял всю строку почти до чёрного, это и был
   "наведение не радует". Тот же составной селектор с .rb-personal-sidebar, что и
   у базового правила, + явный сброс filter. */
.rb-personal-sidebar .profile__nav__item.rb-personal-nav__item:hover {
    filter: none;
    background: var(--rb-tint-grey);
    transform: translateX(2px);
}
.rb-personal-sidebar .profile__nav__item.rb-personal-nav__item:not(.rb-personal-nav__item--active):hover:before {
    content: "";
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: var(--rb-border);
}
.rb-personal-nav__item:hover .rb-personal-nav__icon { background: #fff; color: var(--rb-accent-deep); box-shadow: 0 2px 6px rgba(10, 10, 11, .1); }
.rb-personal-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--rb-tint-grey);
    color: var(--rb-muted);
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.rb-personal-sidebar .rb-personal-nav__icon svg.ui {
    width: 17px !important;
    height: 17px !important;
    margin-right: 0 !important;
    flex: 0 0 auto;
}
.rb-personal-nav__item--active {
    background: var(--rb-tint-orange);
    color: var(--rb-accent);
    font-weight: 600;
}
.rb-personal-nav__item--active:before {
    content: "";
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: var(--rb-accent);
}
.rb-personal-nav__item--active .rb-personal-nav__icon { background: var(--rb-accent); color: #fff; }

/* Карточка менеджера — аватар-инициалы + кликабельные строки контактов вместо
   плоского серого блока; скидка встроена нижней "лентой" той же карточки.
   .rb-personal-sidebar в начале каждого селектора — не декоративно, а чтобы
   гарантированно перебить легаси .manager-info__* той же/близкой specificity
   (см. пояснение выше про порядок файлов на этой странице). */
.rb-personal-sidebar .rb-personal-manager {
    max-width: none;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--rb-border);
    border-radius: 14px;
    margin-top: 14px;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 400;
    overflow: hidden;
}
.rb-personal-manager__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rb-personal-manager__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--rb-navy);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
}
.rb-personal-sidebar .rb-personal-manager h5 { margin: 0 0 2px; font-size: 11.5px; font-weight: 600; color: var(--rb-muted); text-transform: uppercase; letter-spacing: .04em; }
.rb-personal-sidebar .rb-personal-manager p { margin: 0; font-weight: 600; color: var(--rb-ink); font-size: 14px; line-height: 1.3; }
.rb-personal-sidebar .rb-personal-manager__row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    padding: 6px 0;
    color: var(--rb-muted);
    text-decoration: none;
    transition: color .15s ease;
}
.rb-personal-sidebar .rb-personal-manager__row svg { flex: 0 0 auto; margin-right: 0; }
.rb-personal-manager__row:hover { color: var(--rb-accent-deep); }
.rb-personal-sidebar .rb-personal-discount {
    max-width: none;
    width: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px -16px -16px;
    padding: 12px 16px;
    background: var(--rb-tint-orange);
    border: none;
    color: var(--rb-accent-deep);
    font-size: 12.5px;
}
.rb-personal-discount b { font-size: 14px; }
.rb-personal-sidebar .rb-personal-discount--standalone { margin: 14px 0 0; border-radius: 12px; }
.rb-personal-discount__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--rb-accent);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
}

.rb-personal-links { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rb-border); }
.rb-personal-links .profile__link__item { padding: 8px 4px; cursor: pointer; }
.rb-personal-logout { padding: 0 !important; margin-top: 4px; }
.rb-personal-logout__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border: 1px solid var(--rb-border);
    border-radius: 10px;
    color: var(--rb-muted);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.rb-personal-logout__btn:hover { border-color: var(--rb-accent); color: var(--rb-accent-deep); background: var(--rb-tint-orange); }

.rb-personal-content h1 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.01em; color: var(--rb-ink); margin-bottom: 20px; }

/* Приветствие — минимальная строка, без дублирования скидки/корзины/избранного
   (это уже есть в сайдбар-меню, повтор тут раздражал — правка после отзыва
   пользователя "та же инфа что и в меню"). */
.rb-cabinet-greeting { font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; color: var(--rb-ink); margin-bottom: 20px; }

/* Реальная статистика заказов — единственные цифры на дашборде, которых
   больше нигде в ЛК не показывают: NavRecordCount (истинное общее число
   заказов, а не заглушка) + агрегаты по выборке последних ORDER_COUNT заказов
   (class.php::getDeal, тот же компонент, что на /personal/, шаблон "widget").
   "Ждут оплаты" > 0 — акцентный (оранжевый) блок, привлекает внимание к
   реальному действию, а не просто украшение. */
.rb-order-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.rb-order-stat {
    flex: 1 1 140px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--rb-border);
    border-radius: 14px;
}
.rb-order-stat b { display: block; font-size: 26px; font-weight: 700; color: var(--rb-ink); line-height: 1.1; }
.rb-order-stat span { font-size: 12.5px; color: var(--rb-muted); }
.rb-order-stat--alert { background: var(--rb-tint-orange); border-color: var(--rb-accent); }
.rb-order-stat--alert b { color: var(--rb-accent-deep); }
.rb-order-stat--alert span { color: var(--rb-accent-deep); }

.rb-order-widget { background: #fff; border: 1px solid var(--rb-border); border-radius: 18px; padding: 22px 24px; margin-bottom: 24px; }
.rb-order-widget__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rb-order-widget__head h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--rb-ink); }
.rb-order-widget__all { font-size: 13px; font-weight: 600; color: var(--rb-accent); text-decoration: none; }
.rb-order-widget__all:hover { text-decoration: underline; }

.rb-order-list { display: flex; flex-direction: column; gap: 12px; }
.rb-order-card { border: 1px solid var(--rb-border); border-radius: 14px; padding: 16px 18px; transition: border-color .15s ease; }
.rb-order-card:hover { border-color: var(--rb-accent); }
.rb-order-card__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rb-order-card__number { font-size: 14.5px; font-weight: 600; color: var(--rb-ink); }
.rb-order-card__date { font-size: 12.5px; color: var(--rb-muted); margin-top: 2px; }
.rb-order-card__status {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--rb-tint-grey);
    color: var(--rb-muted);
    white-space: nowrap;
}
.rb-order-card__status[data-status="Выполнен"] { background: #e3f6e8; color: #1f8a4c; }
.rb-order-card__status[data-status="Отменен"] { background: var(--rb-tint-grey); color: #9a9a9a; }
.rb-order-card__status[data-status="Отправлен"] { background: var(--rb-tint-blue); color: #2062c9; }
.rb-order-card__status[data-status="Готов к отгрузке"],
.rb-order-card__status[data-status="Отправлен на сборку"] { background: var(--rb-tint-orange); color: var(--rb-accent-deep); }
.rb-order-card__track { font-size: 13px; color: var(--rb-muted); margin-top: 10px; }
.rb-order-card__track b { color: var(--rb-ink); font-weight: 600; }
.rb-order-card__track a { color: var(--rb-accent); text-decoration: none; margin-left: 6px; }
.rb-order-card__track a:hover { text-decoration: underline; }
.rb-order-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rb-border); }
.rb-order-card__sum { font-size: 15px; font-weight: 600; color: var(--rb-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rb-order-card__pay { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.rb-order-card__pay.is-paid { background: #e3f6e8; color: #1f8a4c; }
.rb-order-card__pay.is-unpaid { background: #fdeaea; color: #c92a2a; }
.rb-order-card__pay-btn {
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 10px;
    background: var(--rb-accent);
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.rb-order-card__pay-btn:hover { background: var(--rb-accent-deep); }
.rb-order-empty { text-align: center; padding: 30px 10px; color: var(--rb-muted); font-size: 14px; }
.rb-order-empty a { display: inline-block; margin-top: 10px; color: var(--rb-accent); font-weight: 600; text-decoration: none; }
.rb-order-empty a:hover { text-decoration: underline; }

/* Слайдер "Активные заказы" на /personal/ (Slick, js-инициализация в cabinet.js) — карточки
   компактнее и уже, чем в полном списке /personal/orders/. Скоуп через .rb-order-widget, а не
   правка .rb-order-card напрямую — этот класс общий с company.order.list/rb (полный список),
   его трогать нельзя. Готовые .slick-dots/.slick-list/.slick-track уже есть в index.css. */
.rb-order-widget .rb-order-list.slick-initialized { display: block; }
.rb-order-widget .slick-list { margin: 0 -7px; }
.rb-order-widget .rb-order-card { margin: 0 7px; padding: 12px 14px; }
.rb-order-widget .rb-order-card__foot { margin-top: 8px; padding-top: 8px; }
/* Виджет рендерит ВСЕ заказы "в работе" в трек (не только 3 видимых) — на аккаунтах
   с полусотней активных заказов трек растягивается на ~15000px, и Chrome при такой
   ширине перестаёт резолвить .slick-slide{height:100%} (index.css) в auto, раздувая
   каждую карточку до высоты всего трека. auto здесь безопасен: adaptiveHeight не
   используется, а min-height:1px из базового правила остаётся. */
.rb-order-widget .slick-slide { height: auto; }
/* Базовый .slick-dots (index.css) — flex-wrap:nowrap, рассчитан на слайдеры с единицами
   точек. При slidesToScroll=1 на мобильном (≤767px) точек столько же, сколько заказов
   (до полусотни) — без переноса строка вылезала за пределы блока и тянула горизонтальный
   скролл всей страницы. */
.rb-order-widget .slick-dots { padding: 14px 0 0; flex-wrap: wrap; row-gap: 6px; }

/* Полный список "Заказы" (company.order.list/rb) — переиспользует .rb-order-card целиком,
   добавляет счёт/УПД-ссылки во footer и разворачиваемое содержимое (состав заказа + разбивка
   стоимости + кнопки действий), стилизованное в том же языке, что и .rb-reclamation-*. */
.rb-order-card__links { display: flex; align-items: center; gap: 10px; }
.rb-order-card__link-btn {
    font-size: 13px; font-weight: 600; color: var(--rb-accent); cursor: pointer;
    padding: 6px 12px; border-radius: 999px; background: var(--rb-tint-orange);
}
.rb-order-card__link-btn:hover { background: var(--rb-accent); color: #fff; }
.rb-order-cost { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rb-border); }
.rb-order-cost__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--rb-muted); padding: 3px 0; }
.rb-order-cost__row b { color: var(--rb-ink); font-weight: 600; }
.rb-order-cost__row--total { font-size: 14.5px; }
.rb-order-cost__row--total span, .rb-order-cost__row--total b { color: var(--rb-ink); font-weight: 700; }
.rb-order-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.rb-order-actions__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--rb-accent); text-decoration: none; }
.rb-order-actions__link:hover { text-decoration: underline; }

/* Попап "Счёт по заказу"/УПД (легаси .deal__link-popup, index.css:8395) — плоский серый
   #f6f6f6 на белой карточке визуально сливался с фоном страницы ("такого же цвета что
   форма заказа, всё сливается", отзыв пользователя). Даём настоящую карточку с тенью,
   чтобы попап читался как всплывающий элемент, а не часть страницы. Ссылка "Скачать"
   тоже была обычным чёрным текстом без явных признаков кликабельности — делаем акцентной. */
.rb-order-card .deal__link-popup {
    background: #fff !important;
    border: 1px solid var(--rb-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 36px -16px rgba(10, 10, 11, .28) !important;
}
.rb-order-card .deal__link-popup__header { color: var(--rb-ink); font-weight: 600; }
.rb-order-card .deal__link-popup__content { color: var(--rb-muted); }
.rb-order-card .deal__link-popup__download-button a {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--rb-accent); font-weight: 600; text-decoration: none;
}
.rb-order-card .deal__link-popup__download-button a:hover { color: var(--rb-accent-deep); text-decoration: underline; }
.rb-order-card .deal__link-popup__download-button svg path { fill: var(--rb-accent); }

/* Плитки-ссылки (прайс/адреса/ЭДО/акт сверки и т.д.) — раньше были крупными
   карточками-дублями сайдбар-меню ("дебильная плитка", отзыв пользователя
   2026-08-23), теперь компактный ряд пилюль под виджетом заказов, второстепенный
   к реальным данным выше. Раскладка задаётся не через grid/инлайн TILE_WIDTH
   (тот приём был для крупных карточек), а обычным flex-wrap. */
.rb-cabinet-grid { display: flex !important; flex-wrap: wrap; gap: 8px; }
.rb-cabinet-tile {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}
.rb-cabinet-tile a {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    height: auto !important;
    padding: 10px 16px;
    background: var(--rb-tint-grey);
    border-radius: 999px;
    color: var(--rb-ink) !important;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.rb-cabinet-tile a:hover { background: var(--rb-tint-orange); color: var(--rb-accent) !important; }
.rb-cabinet-tile h3 { font-size: 13.5px; font-weight: 500; order: 2; }
.rb-cabinet-tile p,
.rb-cabinet-tile__arrow,
.rb-cabinet-tile .cabinet-icon--lg { display: none !important; }
/* .cabinet-icon--sm легаси прячет на десктопе (index.css:12353) — тут наоборот
   единственная иконка пилюли на всех брейкпоинтах, поэтому форсируем показ.
   Легаси .cabinet-personal__item svg { align-self: end; margin-right: 10px; }
   (index.css:1823) специфичностью (0,1,1) уступает составному правилу ниже
   (0,2,0), но я не переопределял align-self/margin вовсе — при отсутствии
   конкурирующего значения побеждало легаси, иконка прижималась к низу пилюли
   вместо центра ("иконка поехала", отзыв пользователя). */
.rb-cabinet-tile .cabinet-icon--sm {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    align-self: center !important;
    order: 1;
}
.rb-cabinet-tile .cabinet-persona__content,
.rb-cabinet-tile .cabinet-personal__img { display: contents; }

/* Сайдбар/контент — легаси-сетка col3(25%)/col9(75%) рассчитана на бок-о-бок
   раскладку; при переводе .row в колонку (ниже) сами проценты ширины никто не
   сбрасывает — сайдбар оставался зажат в 25% контейнера, контент в 75%, оба
   прижаты влево с пустым полем справа ("меню отдельно, контент отдельно",
   отзыв пользователя на планшетной ширине). */
@media (max-width: 900px) {
    /* Точка отсчёта для "припаркованной" рейки (position:absolute, когда
       контента ЛК снизу уже не хватает на её полную высоту — см. cabinet.js
       initSidebarRail/updatePosition). */
    .rb-personal-page { position: relative; }
    .rb-personal-page .row { flex-direction: column; }
    .rb-personal-sidebar,
    .rb-personal-content {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Второй шаг: сайдбар не скрыт совсем, а свёрнут в узкую иконку-рейку,
       прилипшую к левому краю экрана — тот же паттерн position:fixed, что у
       .onboarding-trigger (rusbelt.onboarding/css/onboarding.css), только слева
       и без своего label. Разметка не менялась — тот же bitrix:menu/personal.redesign,
       плюс одна кнопка-переключатель (.rb-personal-nav__toggle). Текст пунктов не
       трогаем (font-size обычный) — ширина рейки просто уже текста, лишнее клипается
       overflow-x:hidden; при разворачивании (.is-expanded, ставит cabinet.js по клику
       на переключатель) ширина анимированно растёт и текст "выезжает" из-под обрезки.
       Карточка менеджера и текстовые ссылки (смена пароля/выход) — не нужны ни в
       свёрнутом, ни в развёрнутом виде, скрыты всегда. */
    /* top/max-height НЕ фиксируем в CSS — реальную высоту шапки (варьируется:
       городской баннер, промо и т.п.) и появление .mobile-bottom-nav (≤767px)
       знает только JS в момент рендера. Считает и подставляет инлайн-стилем
       positionPersonalSidebar() в cabinet.js, тем же приёмом, что уже применяется
       для .foot__scrollTop в actions.js (positionScrollTopButton) — тот же
       наезд на шапку/съезд за низ экрана при разной высоте header, что там
       описан в комментарии, случился бы и здесь с хардкодным top/bottom.
       top:0 ниже — просто безопасный фолбэк на случай, если JS ещё не отработал. */
    .rb-personal-sidebar {
        display: block;
        /* position без !important — cabinet.js переключает fixed/absolute
           инлайн-стилем в зависимости от того, хватает ли контента ЛК снизу
           ("парковка", см. комментарий в initSidebarRail); !important в
           стилях перебил бы инлайн и запер рейку в fixed навсегда. */
        position: fixed;
        left: 0;
        top: 0;
        max-height: 80vh;
        height: fit-content;
        /* Не скролл — cabinet.js масштабирует содержимое (.rb-personal-nav),
           если оно не помещается, так что здесь просто клипаем неизбежный
           излишек невидимого layout-пространства под масштабированным блоком. */
        overflow: hidden;
        /* Ниже .header__sticky .header__main (position:fixed, z-index:100,
           index.css:5677-5679) — иначе рейка перекрывает открытый бургер-каталог
           (.header__catalog nav внутри шапки — свои z-index:1000, но это
           локально ВНУТРИ стекинг-контекста шапки; сравнение с рейкой идёт по
           z-index самой шапки — 100, а не по 1000). Выше обычного контента
           достаточно и небольшого числа — контент статичный, z-index:auto. */
        z-index: 90;
        width: 72px !important;
        max-width: none !important;
        transition: width .25s ease;
        background: #fff;
        border-radius: 0 14px 14px 0;
        box-shadow: 0 4px 20px rgba(10, 10, 11, .15);
        padding: 10px 6px;
    }
    .rb-personal-sidebar.is-expanded { width: 240px !important; }
    /* Если весь список пунктов не влезает по высоте между шапкой и низом —
       cabinet.js масштабирует .rb-personal-nav целиком (transform:scale),
       вместо внутреннего скролла. transform-origin сверху — рейка "сжимается"
       вниз от своего верхнего края, а не от центра. */
    .rb-personal-sidebar .rb-personal-nav {
        transform-origin: top center;
        transition: transform .15s ease;
    }
    .rb-personal-sidebar .rb-personal-manager,
    .rb-personal-sidebar .rb-personal-discount,
    .rb-personal-sidebar .rb-personal-links {
        display: none !important;
    }
    /* "Выйти" — тот же пункт, что везде в .rb-personal-nav (свой SVG-значок,
       LOGOUT=>Y в .personal.menu.php), но получает служебный
       .profile__left_menu_item_hide (index.css:8261, display:none) — в
       десктоп-версии сайдбара логаут выводится отдельным текстовым блоком
       .rb-personal-links (скрыт целиком строкой выше). В рейке своего
       текстового блока нет — без этой строки выхода из аккаунта не было
       вообще ни в свёрнутом, ни в развёрнутом виде. */
    .rb-personal-sidebar .profile__nav__item.profile__left_menu_item_hide {
        display: flex !important;
    }
    /* margin-top освобождает место под кнопку-переключатель (position:absolute,
       top:6px, 22px высотой) в верхнем правом углу рейки — иначе она наложилась
       бы на иконку первого пункта ("Мой кабинет"). */
    .rb-personal-sidebar .rb-personal-nav { margin-top: 30px; margin-bottom: 0; }
    /* max-width на самом пункте (li) — 54px = его собственный padding
       (8px+12px, .rb-personal-nav__item) + 34px иконка, а НЕ расчёт "хватит ли
       ширины рейки". Считать нужно было именно на li, а не отдельно ещё раз на
       <a> — из-за border-box <a> внутри li и так наследует урезанный content-box
       (46-20=26px), а мой отдельный max-width:46 на самой <a> дополнительно
       обрезал уже сам паддинг + иконку (26 < 34) — у пунктов без ссылки-обёртки
       текст в li прямо (активный) иконка не резалась, а у всех обычных <a>-пунктов
       иконка (34px, flex-shrink:0, не сжимается) вылезала за куцые 26px и
       обрезалась overflow:hidden — "неактивные иконки обрезались", отзыв
       пользователя. На <a> отдельный max-width не нужен вовсе — она сама
       наследует верно посчитанный content-box li через width:100% (базовое
       правило). */
    .rb-personal-sidebar .profile__nav__item.rb-personal-nav__item {
        max-width: 54px;
        overflow: hidden;
    }
    .rb-personal-sidebar .rb-personal-nav__item a {
        white-space: nowrap;
    }
    .rb-personal-sidebar.is-expanded .profile__nav__item.rb-personal-nav__item {
        max-width: none;
    }
    /* Кнопка-переключатель — внутри границ рейки (не наружу): у .rb-personal-sidebar
       теперь overflow:hidden (для масштабирования содержимого при нехватке высоты,
       см. cabinet.js), всё, что вылезает за край, обрезалось бы. Стрелка
       разворачивается на 180° в .is-expanded — та же SVG-стрелка, что в
       header.personal.cabinet.redesign/template.php. */
    .rb-personal-nav__toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 6px;
        right: 6px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 1px solid var(--rb-border);
        background: #fff;
        color: var(--rb-muted);
        box-shadow: 0 2px 6px rgba(10, 10, 11, .12);
        cursor: pointer;
        z-index: 1;
    }
    .rb-personal-nav__toggle svg { width: 14px; height: 14px; transition: transform .25s ease; }
    .rb-personal-sidebar.is-expanded .rb-personal-nav__toggle svg { transform: rotate(180deg); }
    /* Рейка position:fixed вне потока — сама по себе место под контент не
       освобождает, он просто оказывался наполовину под ней слева. Отступ считаем
       по СВЁРНУТОЙ ширине (72px) и не трогаем при .is-expanded — контент не должен
       ни сжиматься, ни ёрзать при разворачивании, развёрнутая рейка просто ляжет
       поверх него (z-index выше). !important — иначе перебивает
       div[class^="col"]:not(.np) { padding-left: calc(var(--col)/2) } (index.css):
       атрибутный селектор по classList, а .rb-personal-content начинается с "col9 ...",
       тоже под него попадает, и он специфичнее одного класса. */
    .rb-personal-content { padding-left: 92px !important; }
}

/* Легаси .profile__sidebar-desktop { display: none } на ≤767px (index.css:8232)
   рассчитан на замену отдельным .profile__sidebar-mobile блоком — такого блока
   нет ни здесь, ни на боевом /personal/ (тот же класс без мобильного дублёра),
   поэтому меню целиком пропадало на мобилке ("меню вообще пропало", отзыв
   пользователя). Отдельный мобильный вариант не нужен — уже отредизайненный
   сайдбар сам по себе компактный, просто не прячем его. */
@media (max-width: 767px) {
    .rb-personal-page .profile__sidebar-desktop { display: block !important; }
}

/* Легаси .cabinet-personal__item { width: calc(50% - 10px) !important; margin-bottom:
   10px !important; padding: 15px !important; } (index.css, @media max-width:767px) —
   та же специфичность (0,1,0), что и .rb-cabinet-tile выше, а порядок подключения
   файлов НЕ универсален по сайту (см. feedback_css_specificity_legacy_wrapper) —
   на этой странице pages-motion-shop.css подключается ДО index.css, легаси-правило
   побеждало и разваливало пилюли в блочные половинки экрана ("ссылки поехали",
   отзыв пользователя). Составной селектор с уже существующим в разметке
   .cabinet-personal__item поднимает специфичность безусловно. */
@media (max-width: 767px) {
    .cabinet-personal__item.rb-cabinet-tile {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* --- Подстраницы кабинета: адреса доставки / акт сверки / прайс-лист --- */

.rb-address-list { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
.rb-address-card { border: 1px solid var(--rb-border); border-radius: 14px; padding: 18px 20px; background: #fff; }
.rb-address-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rb-address-card__head h4 { font-size: 15px; font-weight: 600; color: var(--rb-ink); }
.rb-address-card__remove { font-size: 13px; color: #c92a2a; cursor: pointer; }
.rb-address-card__remove:hover { text-decoration: underline; }
.rb-address-card__body { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.rb-address-group .group__title { font-size: 12px; color: var(--rb-muted); margin-bottom: 2px; }
.rb-address-group .group__value { font-size: 13.5px; color: var(--rb-ink); font-weight: 500; }
.rb-address-add-btn { border-radius: 10px; }

.rb-personal-form { max-width: 520px; }
.rb-personal-form .select,
.rb-personal-form .input {
    display: block; /* инпуты/select по умолчанию inline-block — их margin-top НЕ схлопывается
    с margin-bottom подписи над ними (сумма 4+10=14px), тогда как соседний .phone-input-wrapper
    (блочный div) схлопывается (max(4,10)=10px) — отсюда 4px сдвиг между "Телефон" и остальными
    полями в ряду ("не на одной линии", отзыв пользователя). display:block уравнивает поведение. */
    width: 100%; border-radius: 10px; border: 1px solid var(--rb-border); padding: 10px 14px;
    margin: 10px 0; box-sizing: border-box;
    background: #fff; height: auto; font-size: 14px; font-family: inherit;
}
.rb-personal-form .input:focus { padding: 10px 14px !important; border: 1px solid var(--rb-accent) !important; background: #fff; outline: none; }
/* Легаси .btn-default {padding:15px 24px; font-size:18px; line-height:26px} — рассчитан на
   старую 56px высоту полей, рядом с компактными 40px инпутами выглядит непропорционально
   крупным ("большие кнопки", отзыв пользователя). */
.rb-personal-form__btn {
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    height: auto !important;
}

/* Виджет кода страны (contact.css:520, .phone-input-wrapper{display:flex;align-items:stretch}) —
   `.rb-personal-form .input {margin:10px 0}` выше рассчитан на ОДИНОЧНЫЕ поля в столбик (отступ
   сверху/снизу от соседних полей), но внутри .phone-input-wrapper инпут лежит РЯДОМ с кнопкой
   страны в горизонтальном flex-ряду — тот же margin-top:10px сдвигал инпут на 10px вниз
   относительно кнопки (у неё этого margin нет, класса "input" на ней нет), высота у обоих
   одинаковая (40px), но по вертикали не совпадали ("не на одной линии", отзыв пользователя) —
   и как следствие враппер раздувался до 60px, чтобы вместить сдвинутый инпут. Обнуляем margin
   именно для инпута внутри виджета, высоту синхронизируем явно вместо непредсказуемого stretch. */
.rb-personal-form .phone-code-btn,
.rb-personal-form .phone-input-wrapper .input__phone-js {
    height: 40px;
    box-sizing: border-box;
}
.rb-personal-form .phone-input-wrapper .input__phone-js {
    padding: 0 14px !important;
    margin: 0 !important;
}
/* margin:10px 0 переносим с самого <input> (внутри враппера это ломало выравнивание
   с кнопкой) на весь враппер — чтобы поле "Телефон" по вертикали совпадало с соседними
   ИНН/Email, у которых этот же отступ задаёт margin самого .input. */
.rb-personal-form .phone-input-wrapper { margin: 10px 0; }

/* Карточка-обёртка для форм ЛК (акт сверки/ЭДО и т.д.) — раньше поля лежали
   голыми на белом фоне страницы, растянутые на всю ширину .rb-personal-form
   (520px) под пару символов текста — "очень широкие инпуты, скучно" (отзыв
   пользователя). Карточка с иконкой-заголовком + рядная раскладка коротких
   полей (.rb-form-row) вместо укладки в один растянутый столбец. */
.rb-form-card {
    background: #fff;
    border: 1px solid var(--rb-border);
    border-radius: 18px;
    padding: 26px 28px;
    max-width: 560px;
}
.rb-form-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rb-form-card__icon {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: var(--rb-tint-orange);
    display: flex; align-items: center; justify-content: center;
}
.rb-form-card__icon svg { width: 22px; height: 22px; color: var(--rb-accent); }
.rb-form-card__icon--ok { background: #e3f6e8; }
.rb-form-card__icon--ok svg { color: #1f8a4c; }
.rb-form-card__title { font-size: 16px; font-weight: 600; color: var(--rb-ink); }
/* Не scope-нуто под .rb-form-card — переиспользуется и внутри .rb-content-card
   (ЭДО/Рекламации), где легаси-правило .rb-content-card p{color:var(--rb-ink)}
   иначе перебивало бы приглушённый цвет подсказки. */
p.rb-form-card__hint { font-size: 13.5px; color: var(--rb-muted) !important; margin: 0 0 18px; }

.rb-form-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.rb-form-row > * { flex: 1 1 200px; min-width: 160px; margin: 0 !important; }

/* Легаси .input-group label { position:absolute; top:30px; ... } (index.css:4378) —
   "плавающая" подпись ВНУТРИ 56px-поля (материал-дизайн стиль), из-за которого
   .rb-form-row .group__label { display:block } из прошлой правки НИЧЕГО не решал —
   position всё равно оставался absolute (свойство просто не было переопределено),
   подпись сидела поверх/внутри поля. Для пустого текстового поля почти незаметно
   маскировалось серым фоном, но на "Телефон" (компонент company.edm/company.order.reclamation)
   виджет international-phone (`.phone-input-wrapper`/`.phone-code-btn`, contact.css:520)
   рисует НЕПРОЗРАЧНУЮ кнопку страны ровно там же — подпись "Телефон" пропадала
   визуально целиком, виден был только "RU ⌄". Здесь — сознательно другой язык:
   обычная статичная подпись НАД полем (не плавающая внутри), поэтому глушим position. */
.rb-form-card .input-group label,
.rb-form-row .group__label,
.rb-personal-form .input-group label {
    position: static !important;
    display: block;
    font-size: 12px;
    color: var(--rb-muted);
    margin-bottom: 4px;
    transform: none !important;
}

/* --- Профиль / ЭДО / Рекламации (2026-08-24) — редизайн трёх подстраниц ЛК,
   ранее оставленных "как есть" (свой более ранний "redesign"-шаблон без rb-*
   визуала — плоские .group-списки, широкие голые инпуты). Новый шаблон-сосед
   "rb" у каждого компонента (personal.info/rb, company.edm/rb,
   company.order.reclamation/rb) — тот же $arResult/логика/JS-хуки, только
   визуальная обёртка. */
.rb-content-card__subtitle { font-size: 14px; font-weight: 600; color: var(--rb-ink); margin: 0 0 10px; }

.rb-profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.rb-profile-field--wide { grid-column: 1 / -1; }
.rb-profile-field__label { font-size: 12px; color: var(--rb-muted); margin-bottom: 3px; }
.rb-profile-field__value { font-size: 14px; color: var(--rb-ink); font-weight: 500; }

.rb-cabinet-statuses { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.rb-cabinet-statuses__select { margin: 0; width: 100%; max-width: 420px; }
/* .rb-personal-form .select задаёт background:#fff шорткодом — стирает background-image
   со стрелочкой из базового .select (index.css). Тот же баг, похоже, есть и на /personal/edit/,
   но чиним только свой select — чужой компонент трогать не просили. */
.rb-cabinet-statuses__select .select {
    background-image: url("data:image/svg+xml,<svg width=%2724%27 height=%2724%27 xmlns=%27http://www.w3.org/2000/svg%27><path fill=%27gray%27 d=%27m0,6l12,12l12,-12l-24,0z%27/><path fill=%27none%27 d=%27m0,0l24,0l0,24l-24,0l0,-24z%27/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px auto;
    padding-right: 34px;
    appearance: none;
}
/* Легаси .select:focus (index.css) переопределяет border/border-radius/border-bottom под
   старый 56px-стиль — с нашим 1px-бордером это "ломает" вид при открытии/фокусе и оставляет
   селект без нижней границы после закрытия до потери фокуса. Возвращаем тот же тонкий focus-
   бордер, что и у .rb-personal-form .input:focus, вместо легаси-варианта. */
.rb-cabinet-statuses__select .select:focus {
    padding: 10px 34px 10px 14px;
    border: 1px solid var(--rb-accent);
    border-radius: 10px;
    background-color: #fff;
    outline: none;
}
.rb-status-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
    background: var(--rb-tint-grey); color: var(--rb-muted);
}
.rb-status-pill .ui__indicator { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rb-status-pill--green { background: #e3f6e8; color: #1f8a4c; }
.rb-status-pill--red { background: #fdeaea; color: #c92a2a; }
.rb-status-pill--orange { background: var(--rb-tint-orange); color: var(--rb-accent-deep); }

.rb-agent-list { display: flex; flex-direction: column; gap: 8px; }
.rb-agent-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--rb-tint-grey); border-radius: 10px; font-size: 13.5px; }
.rb-agent-row__actions { display: flex; gap: 12px; }
.rb-agent-row__action { color: #c92a2a; font-size: 13px; font-weight: 600; cursor: pointer; }
.rb-agent-row__action--accept { color: #1f8a4c; }
.rb-agent-row__action:hover { text-decoration: underline; }

.rb-filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; }
.rb-filter-tabs__item {
    padding: 7px 14px; border-radius: 999px; background: var(--rb-tint-grey);
    color: var(--rb-muted); font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.rb-filter-tabs__item:hover { background: var(--rb-tint-orange); color: var(--rb-accent-deep); }
.rb-filter-tabs__item.is-active { background: var(--rb-accent); color: #fff; }

/* .rb-reclamation-body сидит на том же элементе, что и легаси .deal__content —
   show/hide по клику на .deal__toggle уже управляется легаси
   .profile .deal.active .deal__content (index.css:8458), здесь только отступ. */
.rb-reclamation-body { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rb-border); }
.rb-reclamation-product { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rb-border); cursor: pointer; font-size: 13.5px; }
.rb-reclamation-product:last-of-type { border-bottom: none; }
.rb-reclamation-product__name { flex: 1; }
.rb-reclamation-product__meta { color: var(--rb-muted); white-space: nowrap; }
.rb-reclamation-comment { margin: 14px 0; }
.rb-reclamation-comment textarea {
    width: 100%; border: 1px solid var(--rb-border); border-radius: 10px; padding: 10px 14px;
    box-sizing: border-box; font-family: inherit; font-size: 13.5px; resize: vertical;
}
.rb-upload-zone {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    border: 2px dashed var(--rb-border); border-radius: 14px; padding: 20px; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.rb-upload-zone:hover { border-color: var(--rb-accent); background: var(--rb-tint-orange); }
.rb-upload-zone__icon { margin-bottom: 4px; }
.rec-upload__text { font-size: 13.5px; font-weight: 600; color: var(--rb-ink); }
.rec-upload__hint { font-size: 12px; color: var(--rb-muted); }

.rb-price-download { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; text-decoration: none; }
.rb-price-upload .upload__dropzone {
    border: 2px dashed var(--rb-border);
    border-radius: 14px;
    padding: 30px;
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
}
.rb-price-upload .upload__dropzone:hover { border-color: var(--rb-accent); background: var(--rb-tint-orange); }

/* --- "Популярные товары" на главной: тот же .rb-product-tile, что и в листинге
   каталога (фаза 2), но внутри Slick-слайдера (.default.redesign). ВАЖНО: зазор
   нельзя давать через margin на самой карточке — Slick выставляет ширину слайда
   инлайн-стилем (containerWidth/slidesToShow) БЕЗ учёта margin, из-за чего
   реальный слайд (карточка+margin) оказывается шире выделенного места — крайняя
   карточка в ряду обрезается по overflow:hidden .slick-list, шаг перелистывания
   не совпадает с видимой шириной карточки, а в конце трека остаётся пустой
   хвост, накопленный из этих "лишних" margin. Карточка обёрнута в .rb-product-slide
   (см. .default.redesign/template.php) — Slick вешает slick-slide и инлайн-width
   именно на неё, зазор даём через padding (border-box учитывает его В ширине
   слайда, а не поверх неё), поэтому overflow не возникает. */
.catalog-slider .rb-product-slide { padding: 0 8px; }
/* Компенсирующий отрицательный margin на .catalog-slider (чтобы крайние карточки
   были заподлицо с сеткой страницы) сюда специально НЕ добавлен: легаси-правило
   .popular__product .slick-initialized { width: 100% } (catalog.css:1577) фиксирует
   ширину слайдера, из-за чего при одновременно заданных margin и width:100% браузер
   (over-constrained box, LTR) молча игнорирует margin-right и пересчитывает его сам —
   левый край уезжал наружу как надо, а правый нет, отсюда "слева нет отступа, справа
   большой". Проще и надёжнее — не бороться с этим правилом, а оставить симметричный
   инсет в 8px с обеих сторон (тот же padding, что и зазор между карточками). */