/* ============================================================
   ВИТРИНЫ ШИН — orion-koleso.ru, orion-gruz.ru (сессия 381)
   Свой слой поверх канона дизайн-системы: tokens.css и
   components.css приезжают из /home/oleg/projects/all_sites/
   design-system и руками не правятся. Здесь только то, чего
   в каноне нет и что живёт на публичной витрине.
   Общие для экосистемы компоненты каталога (карточка товара,
   сетка, фильтр, селектор размера) заводятся В КАНОН — это
   сессия 3 плана, а не этот файл.
   ============================================================ */

/* box-sizing НА ВСЮ ВИТРИНУ — не косметика, а причина, по которой весь сайт
   выглядел «крупно, как для слабовидящих» (владелец 09.09.2026, третье письмо
   подряд про окошки отбора).
   Кабинет получает сброс из app.css (`.app, .app *` и соседи), но витрина app.css
   не грузит вовсе — только fonts/tokens/components/shop. Значит по умолчанию у неё
   действовал content-box, и КАЖДОЕ поле кита раздувалось на свои отступы:
   у `.ds-input` стоит min-height 44 + padding 10px сверху и снизу + рамка 1px,
   и живьём поле цены измерялось 66 px вместо 44 — на r15c такое же поле 42.
   То же самое молча происходило со всеми кнопками, карточками и колонками,
   у которых ширина задана вместе с отступами. Один сброс чинит их разом. */
.shop, .shop *, .shop *::before, .shop *::after { box-sizing: border-box; }

/* Плотность витрины. Кабинет и витрина живут на одном ките, но читают их по-разному:
   в кабинете человек работает часами и текст должен быть крупным, а на витрине он
   выбирает товар и ему важно, сколько позиций видно за один взгляд. Размеры сняты
   с r15c.ru: текст 14 px, цена ~22 (а не 34), заголовок ~26 (а не 30). Переопределяем
   ТОКЕНЫ на корне витрины, а не правила компонентов: кит для того и построен
   на переменных, и правка одной строки не расходится с канонной вёрсткой.
   Токенов, однако, мало: `font-size` на корне витрины не стоял, и всё, что не
   называет кегль явно, наследовало браузерные 16 px — при 14 px у r15c. Отсюда
   и бралось общее ощущение «крупно»: подписи, ссылки, пункты меню и абзацы
   служебных страниц шли на два пункта больше эталона. */
.shop { margin: 0; background: var(--color-surface); color: var(--color-text);
        font-family: var(--font-body); line-height: 1.5;
        font-size: 0.875rem;         /* 14 px — базовый кегль r15c */
        --ds-fs-display: 1.625rem;   /* 26 px, H1 */
        --ds-fs-headline: 1.125rem;  /* 18 px, H2 */
        --ds-fs-price: 1.375rem;     /* 22 px, цена — как на r15c */
        --ds-fs-body: 0.875rem;      /* 14 px */
        --ds-fs-body-lg: 0.9375rem;  /* 15 px, лид */
        --ds-fs-label: 0.75rem;      /* 12 px, капс-метки */
        /* Тихий текст — третьестепенное, но ЧИТАЕМОЕ: домен сайта в полосе семьи,
           подпись под знаком, вторая строка шильдика. Дымка кита (#8B95A1) даёт на
           этих подложках 2,73–3,04 при норме 4,5, сталь-600 — 4,18. Канон завёл под
           это --color-text-quiet (кит 2026.09.11-1), но копия кита в кабинете отстала
           от канона на 60 файлов, и тащить сюда обновление целиком ради двух строк
           нельзя — обновление кита идёт своей сессией. До него значение объявлено
           здесь, ровно то же самое: как приедет канон, строка станет лишней. */
        --color-text-quiet: #5C6773;
        --spacing-card: var(--ds-space-3);
        /* Ширина страницы снята с r15c: содержимое живёт в 1380 px, а не в 1200.
           На широком экране узкая колонка оставляла по краям столько воздуха,
           что страница читалась как «всё подвешено в воздухе» (владелец 06.09.2026). */
        --ds-container: calc(1380px + var(--ds-space-4) * 2); }
/* Шапка, полоса каталога и подвал живут в канонном `.ds-container`, у которого
   поля входят в предел ширины. Чтобы их содержимое встало ровно под содержимое
   `.shop-wrap`, токен и держит те же «1380 плюс поля»: иначе шапка на 32 px уже
   страницы, и логотип с меню едут внутрь относительно товара под ними. */
/* Карточек в ряду больше: у r15c на широком экране их четыре при узкой колонке
   отбора, и товар начинается сразу, а не после экрана воздуха. */
/* Колонка карточки — от 240 px, как у r15c: при ширине страницы 1380 и колонке
   отбора 250 в ряд встают ровно четыре карточки, а не шесть узких. */
.shop .ds-catalog { gap: var(--ds-space-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.shop .ds-product__body { gap: 4px; }
/* 1380 — это ширина СОДЕРЖИМОГО у r15c, а не полосы вместе с полями. С border-box
   поля пришлось бы вычесть из тех же 1380, и страница стала бы на 32 px уже эталона,
   причём молча. Поэтому предел считается: содержимое плюс поля. */
.shop-wrap { max-width: calc(1380px + var(--ds-space-4) * 2); margin: 0 auto;
             padding: 0 var(--ds-space-4); }

/* --- первый экран ------------------------------------------ */
.shop-main { min-height: 50vh; }

/* Полоса подбора — панель первого экрана, снятая с r15c пипеткой и линейкой, а не
   придуманная: заливка #EAF1F7, рамка #CCDCEA, скругление 14, поля 22/26/26,
   заголовок 21 px полужирным капслоком цветом полосы каталога (#00669D), подписи
   условий 12 px, кнопка оранжевая на 50 px.
   Цвета берём ТОКЕНАМИ, а не этим замером: канон построен из r15c, и его 050/200
   расходятся со снятым пипеткой на пару единиц — глазу незаметно, зато панель
   останется в палитре, когда канон приедет обновлённым. Размеры — здесь, их
   в токенах нет. */
.shop-pickband { padding: var(--ds-space-5) 0 0; }
.shop-pickband__box { background: var(--ds-blue-050); border: 1px solid var(--ds-blue-200);
                      border-radius: 14px; padding: 22px 26px 26px; }
.shop-pickband__head { display: flex; align-items: baseline; flex-wrap: wrap;
                       gap: var(--ds-space-3); margin-bottom: var(--ds-space-4); }
.shop-pickband__h { margin: 0; font: 600 1.3125rem/1.1 var(--font-display);
                    text-transform: uppercase; letter-spacing: .5px; color: var(--color-primary); }
.shop-pickband__hint { margin-left: auto; font-size: .8125rem; color: var(--color-text-secondary); }
.shop-pickband__note { margin: var(--ds-space-3) 0 0; font-size: .8125rem;
                       color: var(--color-text-secondary); }
/* Поля подбора на этой полосе — во всю её ширину: у r15c их шесть в ряд по 169 px,
   у нас три, и растягивать их до трети экрана каждое незачем. Верхний предел
   держит строку похожей на эталон, а не на три поля-простыни. */
/* Предел ширины у `.shop-sizepick` — 620 px: он для полосы над выдачей, где подбор
   стоит сбоку от товара. В полосе первого экрана он бы сжал четыре поля и выкинул
   кнопку на вторую строку — именно так это и выглядело до правки. */
.shop-pickband .shop-sizepick--band { max-width: none; margin-bottom: 0; }
.shop-pickband .ds-sizepick__col { flex: 1 1 150px; max-width: 230px; }
.shop-pickband .ds-sizepick .ds-input { min-height: 50px; }
.shop-pickband .ds-sizepick .ds-btn { min-height: 50px; padding-inline: 26px; }
/* Подпись кнопки капслоком и на 700 — как «ПОДОБРАТЬ» у r15c. Это единственная
   кнопка витрины, набранная так: она главное действие главной страницы. */
.shop-pickband__go { text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }

/* H1 страницы стоит ПОД полосой подбора — тоже как у r15c, где первым экраном
   работает подбор, а рассказ о магазине идёт следом. */
.shop-lede { padding: var(--ds-space-6) 0 var(--ds-space-2); }
.shop-lede h1 { font-family: var(--font-display); font-size: clamp(1.375rem, 2.6vw, 1.625rem);
                font-weight: 600; margin: 0 0 var(--ds-space-3); letter-spacing: .01em; }
.shop-lede__sub { font-size: .9375rem; color: var(--color-text-secondary);
                  max-width: 62em; margin: 0; }

/* Полка «что уже работает» — не обещание, а перечень: человеку, попавшему на витрину
   до открытия каталога, нужно понять, можно ли купить прямо сейчас и как. */
.shop-cards { display: grid; gap: var(--ds-space-4); padding: var(--ds-space-7) 0;
              grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.shop-card { border: 1px solid var(--color-border); border-radius: var(--card-radius);
             padding: var(--spacing-card); background: #fff; }
.shop-card__h { font-family: var(--font-display); font-size: 1.05rem;
                margin: 0 0 var(--ds-space-2); }
.shop-card p { margin: 0; color: var(--color-text-secondary); font-size: .92rem; }

.shop-note { border-left: 3px solid var(--color-action); background: var(--color-plate);
             padding: var(--ds-space-4); margin: 0 0 var(--ds-space-7);
             border-radius: 0 var(--card-radius) var(--card-radius) 0; }
.shop-note__h { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 var(--ds-space-2); }
.shop-note p { margin: 0; }

.shop-btn { display: inline-block; padding: 10px 22px; border-radius: var(--button-radius);
            background: var(--color-action-strong); color: var(--color-action-contrast);
            text-decoration: none; font-weight: 600; border: 0; cursor: pointer; }
.shop-btn:hover { background: var(--color-action-strong-hover); }
.shop-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.shop-btn--ghost:hover { background: rgba(255,255,255,.12); }
.shop-cta { display: flex; gap: var(--ds-space-3); flex-wrap: wrap; margin-top: var(--ds-space-5); }

/* --- простая текстовая страница (контакты, доставка, юридическое) --- */
.shop-doc { padding: var(--ds-space-7) 0; max-width: 46em; }
.shop-doc h1 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
               margin: 0 0 var(--ds-space-4); }
.shop-doc h2 { font-family: var(--font-display); font-size: 1.05rem; margin: var(--ds-space-6) 0 var(--ds-space-2); }
.shop-doc p, .shop-doc li { color: var(--color-text-secondary); }
.shop-doc a { color: var(--color-primary); }

/* --- футер ------------------------------------------------- */
/* Заливка подвала — градиент r15c: сверху орион-синий #024A72, книзу глубже.
   Плоский нави у нас совпадал с лентой серии сайтов под ним, и два разных этажа
   читались одним чёрным подвалом в пол-экрана. Нижний тон снят пипеткой с r15c
   и токеном не выражается: между blue-700 и blue-800 канона его нет. */
.shop-foot { background: linear-gradient(180deg, var(--ds-blue-700) 0%, #013049 100%);
             color: rgba(255,255,255,.78);
             padding: var(--ds-space-7) 0 var(--ds-space-5); font-size: .88rem; margin-top: var(--ds-space-8); }
/* Подвал начинается сразу под содержимым страницы, своего отступа сверху ему не нужно. */
.shop-foot--under { margin-top: 0; padding-top: var(--ds-space-6); }
/* Карта сайтов теперь стоит ПОСЛЕ подвала (см. shop_footer): своего верхнего отступа
   ей больше не нужно, зато нужна оранжевая линия — у r15c именно она отделяет ленту
   серии сайтов от подвала самого магазина. */
.ds-ecomap { margin-top: 0; border-top: 3px solid var(--color-action);
             background: var(--ds-blue-800); }
.shop-foot__cols { display: grid; gap: var(--ds-space-5) var(--ds-space-6);
                   grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* Колонка знака шире прочих: под ней стоит фраза о магазине, а не список ссылок. */
.shop-foot__col--brand { grid-column: span 1; min-width: 240px; }
.shop-foot__logo { display: flex; align-items: center; gap: 10px; margin-bottom: var(--ds-space-3); }
.shop-foot__logo .ds-ic { width: 30px; height: 30px; color: #fff; flex: none; }
.shop-foot__logo span { display: flex; flex-direction: column; line-height: 1.15; }
.shop-foot__logo b { font: 700 1.0625rem/1.1 var(--font-display); color: #fff; letter-spacing: .16em; }
.shop-foot__logo span span { font: 500 .625rem/1 var(--font-body); letter-spacing: .22em;
                             color: rgba(255,255,255,.6); }
/* Заголовок колонки — КАПСЛОКОМ и с короткой ОРАНЖЕВОЙ чертой под ним, как на r15c:
   там это единственное, что отделяет заголовок колонки от её же ссылок, и без черты
   колонка читается сплошным столбиком слов. */
.shop-foot__h { font: 700 .8125rem/1.2 var(--font-body); color: #fff;
                text-transform: uppercase; letter-spacing: .08em;
                margin-bottom: var(--ds-space-3); padding-bottom: 9px; position: relative; }
.shop-foot__h::after { content: ''; position: absolute; left: 0; bottom: 0;
                       width: 28px; height: 2px; background: var(--color-action); }
/* Контакт строкой со значком: значок держит свою колонку, текст переносится под себя,
   а не под значок. */
.shop-foot__ci { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--ds-space-3); }
.shop-foot__ci .ds-ic { width: 18px; height: 18px; flex: none; margin-top: 2px;
                        color: var(--color-action); }
.shop-foot__tel { font: 700 1.0625rem/1.2 var(--font-display); }
.shop-foot__copy { margin-top: var(--ds-space-4); padding-top: var(--ds-space-4);
                   border-top: 1px solid rgba(255,255,255,.16);
                   text-align: center; font-size: .8rem; color: rgba(255,255,255,.6); }
.shop-foot p { margin: 0; line-height: 1.7; }
.shop-foot a { color: rgba(255,255,255,.9); text-decoration: none; }
.shop-foot a:hover { color: var(--color-action); }
.shop-foot__line { margin-top: var(--ds-space-5); padding-top: var(--ds-space-4);
                   border-top: 1px solid rgba(255,255,255,.16); font-size: .8rem; opacity: .7; }

/* Широкое содержимое (таблицы типоразмеров каталога) прокручивается внутри себя —
   страница по горизонтали не едет никогда. */
.shop-scroll { overflow-x: auto; }

@media (max-width: 640px) {
  .shop-head__what { display: none; }
  .shop-head__call { margin-left: auto; }
  .shop-hours { display: none; }
}

/* ============================================================
   КАТАЛОГ (сессия 385). Компоненты каталога — .ds-catalog,
   .ds-product, .ds-mark, .ds-shelf, .ds-filter, .ds-sizepick,
   .ds-table--sizes — живут в каноне дизайн-системы. Здесь
   только раскладка витрины вокруг них.
   ============================================================ */

.shop-crumbs { padding: var(--ds-space-3) 0; }
.shop-crumbs__sep { color: var(--color-text-faint); }
/* Отступы ТОЛЬКО сверху и снизу, а не сокращением. `.shop-sec` всегда стоит вторым
   классом на `.shop-wrap`, и `padding: … 0 …` занулял её боковые поля: на широком
   экране этого не видно (полосу центрует auto-margin), а на телефоне заголовок,
   лид и вся колонка отбора упирались в край экрана, тогда как хлебные крошки над
   ними стояли с отступом. Тринадцать экранов витрины из девятнадцати — с этим
   классом. */
.shop-sec { padding-top: var(--ds-space-4); padding-bottom: var(--ds-space-6); }
/* Начертание заголовка — 600, как у r15c: браузерная жирность у h1 это 700,
   и рядом с 600-й подписью пункта меню наш заголовок читался тяжелее эталонного. */
.shop-sec h1 { font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.65rem);
               font-weight: 600; margin: 0 0 var(--ds-space-3); }
.shop-h2 { font-family: var(--font-display); font-size: 1.05rem;
           margin: var(--ds-space-7) 0 var(--ds-space-3); }
.shop-lead { color: var(--color-text-secondary); max-width: 62em; margin: 0 0 var(--ds-space-4);
             font-size: .9rem; }
.shop-descr { max-width: 62em; }
.shop-note-line { color: var(--color-text-secondary); font-size: .9rem; margin: var(--ds-space-4) 0 0; }
.shop-note-line a { color: var(--color-primary); }
.shop-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.shop-sizepick { margin-bottom: var(--ds-space-6); max-width: 620px; }

/* Плитки размеров: размер крупно, число позиций мелко под ним. На карте каталога
   диаметр вынесен в заголовок группы, и в плитке остаётся «205/55» — вдвое короче
   прежнего, поэтому и колонка вдвое уже: на широком экране в ряд встаёт больше
   десяти размеров, и группа целиком видна одним взглядом, а не полосой в экран. */
.shop-sizes { display: grid; gap: var(--ds-space-2);
              grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.shop-sizes__it { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px;
                  border: 1px solid var(--color-border); border-radius: var(--ds-radius-sm);
                  background: #fff; text-decoration: none; }
.shop-sizes__it:hover { border-color: var(--color-primary); }
.shop-sizes__k { font: 600 .875rem/1.2 var(--font-mono); color: var(--color-text); }
.shop-sizes__n { font: 500 .6875rem/1 var(--font-body); color: var(--color-text-quiet); }
/* «Ходовые размеры» на главной живут БЕЗ группы по диаметру: там двенадцать плиток
   вперемешку, и диаметр в подписи обязателен. Им — прежняя, широкая колонка. */
.shop-sec > .shop-sizes { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.shop-sec > .shop-sizes .shop-sizes__k { font-size: .95rem; }

/* Карта каталога по диаметрам ------------------------------------------------ */
/* Линейка диаметров над картой: 494 размера иначе достаются только прокруткой. */
.shop-dbar { display: flex; flex-wrap: wrap; gap: var(--ds-space-2);
             margin: 0 0 var(--ds-space-6); }
.shop-dbar__it { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px;
                 border: 1px solid var(--color-border); border-radius: 999px;
                 background: var(--color-plate); text-decoration: none;
                 font: 600 .8125rem/1.2 var(--font-body); color: var(--color-text); }
.shop-dbar__it:hover { border-color: var(--color-primary); color: var(--color-primary); }
.shop-dbar__n { font: 500 .6875rem/1 var(--font-body); color: var(--color-text-quiet); }

.shop-dgroup { margin: 0 0 var(--ds-space-6); scroll-margin-top: var(--ds-space-5); }
/* Заголовок группы — единственное место, где диаметр назван, поэтому он и держит
   счёт: сколько размеров и сколько позиций под ним. Без счёта строка «R16» была бы
   такой же немой цифрой, из-за которых страницу и переделывали. */
.shop-dgroup__h { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ds-space-3);
                  margin: 0 0 var(--ds-space-3); padding-bottom: 6px;
                  border-bottom: 1px solid var(--color-border);
                  font: 700 1.0625rem/1.2 var(--font-display); color: var(--color-text); }
.shop-dgroup__n { font: 500 .75rem/1 var(--font-body); color: var(--color-text-quiet); }

.shop-brands { display: grid; gap: var(--ds-space-2);
               grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.shop-brands__it { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
                   padding: 12px 14px; border: 1px solid var(--color-border);
                   border-radius: var(--ds-radius-sm); background: #fff; text-decoration: none; }
.shop-brands__it:hover { border-color: var(--color-primary); }
.shop-brands__n { font: 600 .98rem/1.2 var(--font-body); color: var(--color-text); }
.shop-brands__c { font: 500 .75rem/1 var(--font-body); color: var(--color-text-quiet); white-space: nowrap; }

.shop-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-chips a { text-decoration: none; }
.shop-chips__n { opacity: .6; font-family: var(--font-mono); }

/* Листинг: фильтр колонкой слева, товары справа. На телефоне фильтр уезжает наверх
   и складывается — на узком экране колонка отбора съела бы весь первый экран. */
.shop-listing { display: grid; gap: var(--ds-space-5); grid-template-columns: 1fr; }
.shop-listing__side { min-width: 0; }
.shop-listing__main { min-width: 0; display: flex; flex-direction: column; gap: var(--ds-space-4); }
@media (min-width: 900px) {
  .shop-listing { grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
  /* Колонка отбора ВЫШЕ экрана: подбор размера, девять условий и подвал с кнопками.
     Липкая колонка прижимается ВЕРХОМ и отпускается только там, где кончился её
     контейнер, — то есть низ панели («Производитель», «Показать») уезжал под нижний
     край и доставался лишь тому, кто домотал всю выдачу до конца. Со стороны это
     читается как заклинивший фильтр: предложение №173 (Куприянова 09.09.2026) —
     «нет колесика в перемотке… фильтры застряли, надо всю страницу шинами
     прокрутить до низу». Своя прокрутка возвращает колесо: над панелью оно листает
     панель, а не страницу; панель ниже экрана прокрутки не получает и стоит как стояла.
     Обрезания выпадающих меню, каким `overflow` убил подменю в полосе каталога
     (сессия 388, правило ниже), здесь не случается: условия набраны нативными
     <select>, и список значений браузер рисует поверх страницы. */
  .shop-listing__side { position: sticky; top: var(--ds-space-4);
                        max-height: calc(100vh - var(--ds-space-4) * 2);
                        overflow-y: auto; overscroll-behavior: contain;
                        scrollbar-width: thin; }
}

/* ============================================================
   КАРТОЧКА ТОВАРА (сессия 392). Строй перенесён с r15c.ru:
   снимок слева, справа код товара и марка, под ними ДВА
   столбца — цена с наличием и характеристики, ниже во всю
   ширину текстовый блок о классе шин. Раскладка тремя зонами,
   а не одной колонкой: цена и характеристики — два разных
   вопроса («сколько» и «то ли это»), и человек задаёт их
   одновременно, а не по очереди.
   ============================================================ */
.shop-card2 { display: grid; gap: var(--ds-space-5); grid-template-columns: 1fr; }
@media (min-width: 800px) { .shop-card2 { grid-template-columns: 300px minmax(0, 1fr); } }
/* На карточке ТОВАРА снимок крупнее, чем на карточке модели: там под ним таблица
   типоразмеров, которой нужна ширина, а здесь снимок — половина решения о покупке. */
@media (min-width: 860px) { .shop-card2--product { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); } }
.shop-card2__pic { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1;
                   background: var(--ds-concrete-100); border-radius: var(--card-radius);
                   color: var(--color-text-faint); align-self: start; }
/* Карточка ТОВАРА — одна панель на снимок и на всё остальное, как на r15c. Снимок
   в собственной рамке рядом с другой рамкой читался вторым окошком, а не половиной
   одной карточки (владелец 06.09.2026: «окошки, всё остальное в воздухе подвешано»). */
.shop-card2--product { border: 1px solid var(--color-border); border-radius: var(--card-radius);
                       background: var(--color-surface); padding: var(--ds-space-5); gap: var(--ds-space-6); }
.shop-card2--product > .shop-card2__pic { border: 0; background: transparent; }
.shop-card2--product > .shop-card2__pic.is-empty { background: var(--ds-concrete-100); }
@media (min-width: 860px) {
  /* Тонкая черта между снимком и правой половиной — вместо второй рамки. */
  .shop-card2--product > .shop-card2__body { border-left: 1px solid var(--color-border);
                                             padding-left: var(--ds-space-6); }
}
.shop-card2__ic { width: 96px; height: 96px; opacity: .4; }
.shop-card2__body { min-width: 0; }
/* Заголовок — над обеими колонками: он про товар, а не про блок цены. */
.shop-card2__h1 { font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.5rem);
                  line-height: 1.25; margin: 0 0 var(--ds-space-4); }
.shop-card2__meta { display: flex; align-items: center; flex-wrap: wrap;
                    gap: var(--ds-space-3); padding-bottom: var(--ds-space-3);
                    margin-bottom: var(--ds-space-4); border-bottom: 1px solid var(--color-border); }
.shop-card2__code { font-size: .8rem; color: var(--color-text-secondary); }
/* Прежнее имя модели — рядом с кодом товара, тем же приглушённым цветом: обе строки
   вспомогательные, ни одна не главная в этом ряду. */
.shop-card2__aka { font-size: .8rem; color: var(--color-text-secondary); }
/* Марка — плашкой справа, на месте логотипа r15c. Логотипов марок у нас нет,
   и пустое место там читалось бы как не загрузившаяся картинка. margin-left: auto,
   а не justify-content: space-between на родителе — у ряда бывает и третий элемент
   («прежде …»), и плашка обязана остаться прижатой к правому краю при любом их числе. */
.shop-card2__brand { margin-left: auto; font: 700 .95rem/1 var(--font-display); letter-spacing: .03em;
                     color: var(--color-primary); text-decoration: none;
                     border: 1px solid var(--color-border); border-radius: var(--ds-radius-sm);
                     padding: 5px 10px; white-space: nowrap; }
.shop-card2__brand:hover { border-color: var(--color-primary); }
/* Цена и характеристики стоят в ОДНОМ коробе, а не в двух рядом (замечание владельца
   06.09.2026: «какая-то пустая белая, окошки, всё остальное в воздухе подвешано»).
   Два короба разной высоты давали белый провал под коротким из них, и правая колонка
   висела сама по себе. У r15c это один блок с двумя колонками внутри и без внутренних
   рамок: цена и характеристики — две стороны одного ответа «что это и сколько стоит». */
.shop-card2__cols { display: grid; gap: var(--ds-space-5); grid-template-columns: 1fr; }
@media (min-width: 1080px) {
  .shop-card2__cols { grid-template-columns: minmax(0, 1fr) minmax(210px, 280px); align-items: start; }
}
.shop-model__marks { margin-bottom: var(--ds-space-3); }

/* --- блок цены --- */
.shop-buy { min-width: 0; }
/* Цена на карточке товара — ЧЁРНАЯ и спокойнее, чем в сетке (владелец: «цены очень
   большие»). В сетке цена оранжевая, потому что там она отличает карточку от соседних;
   здесь карточка одна, спорить не с кем, и оранжевый крупным кеглем перетягивал
   на себя весь экран. Так же это сделано на r15c. */
.shop-buy__price { font: 700 1.75rem/1.05 var(--font-display); color: var(--color-text); }
.shop-buy__price small { display: block; margin-top: 4px;
                         font: 500 .8rem/1 var(--font-body); color: var(--color-text-secondary); }
/* Оговорка про НДС — под ценой и мелким: это условие к цифре, а не часть цифры. */
.shop-buy__vat { margin-top: var(--ds-space-2); font-size: .78rem; color: var(--color-text-secondary); }
/* Общая стоимость — сразу под кнопкой покупки и заметнее прежней строки комплекта:
   это последняя цифра, которую человек проверяет перед нажатием. Пересчитывается
   от счётчика скриптом (shop.js), поэтому «за 4 шт» стоит отдельным словом —
   меняется только оно и сама сумма. */
.shop-buy__total { margin-top: var(--ds-space-2); font: 500 var(--ds-fs-body)/1.4 var(--font-body);
                   color: var(--color-text-secondary); }
.shop-buy__total b { color: var(--color-text); font-weight: 700; }
.shop-buy__totalq { white-space: nowrap; }

/* Действия карточки: «Купить в 1 клик» и «Заказать по телефону» (сессия 504).
   Обе свёрнуты тегом <details>, поэтому раскрываются и без скрипта.

   Владелец 09.09.2026: «непонятно, где там внутри выскакивает новое небольшое окно».
   Так и было: панель раскрывалась в цвет страницы, тонкой рамкой в один пиксель, и
   от соседних блоков колонки покупки не отличалась ничем. Поэтому здесь три приёма
   разом, и все три про одно — «это отдельное окно, и в нём надо что-то сделать»:
   заливка и рамка фирменным синим, уголок-указатель к самой кнопке и заголовок
   первой строкой. Плюс кнопка в раскрытом виде перестаёт быть серой. */
.shop-act { margin-top: var(--ds-space-3); }
/* box-sizing обязателен: <summary> не попадает под общий сброс полей формы, и кнопка
   с шириной 100 % вылезала за колонку покупки на толщину своих отступов. */
.shop-act__sum { display: flex; box-sizing: border-box; width: 100%; align-items: center;
                 justify-content: center; gap: 8px; cursor: pointer; list-style: none; }
.shop-act__sum::-webkit-details-marker { display: none; }
.shop-act__ic { flex: none; }
/* Стрелка вниз — единственная подсказка на СВЁРНУТОЙ кнопке о том, что она
   раскрывается, а не уводит на другую страницу. Рисуется рамкой, а не значком:
   в канонном спрайте шеврона нет, а заводить его ради одной стрелки незачем. */
.shop-act__chev { flex: none; width: 7px; height: 7px; margin-left: 2px;
                  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
                  transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.shop-act[open] > .shop-act__sum { border-color: var(--color-primary); color: var(--color-primary);
                                   background: var(--color-primary-tint); }
.shop-act[open] > .shop-act__sum .shop-act__chev { transform: translateY(1px) rotate(225deg); }

/* Панель. Уголок вверху — тот самый «указатель на кнопку»: без него панель читается
   следующим блоком страницы, а не ответом на нажатие. */
.shop-act__panel { position: relative; margin-top: 10px; padding: var(--ds-space-3);
                   border: 2px solid var(--color-primary); border-radius: var(--card-radius);
                   background: var(--color-primary-tint);
                   box-shadow: 0 6px 20px rgba(2, 74, 114, .14); }
.shop-act__panel::before { content: ""; position: absolute; top: -8px; left: 50%;
                           width: 12px; height: 12px; margin-left: -6px;
                           background: var(--color-primary-tint);
                           border-left: 2px solid var(--color-primary);
                           border-top: 2px solid var(--color-primary);
                           transform: rotate(45deg); }
.shop-act__h { font: 700 1.0625rem/1.3 var(--font-display); color: var(--color-text); }
.shop-act__hint { margin: 4px 0 0; font: 400 .8125rem/1.45 var(--font-body);
                  color: var(--color-text-quiet); }
.shop-act__form { display: flex; flex-direction: column; gap: var(--ds-space-2);
                  margin-top: var(--ds-space-3); }
.shop-act__lab { font: 500 var(--ds-fs-label)/1.3 var(--font-body); color: var(--color-text-quiet); }
/* Поле телефона на синей заливке обязано остаться белым: без своего фона оно сливается
   с панелью, и вместо поля ввода человек видит рамку неизвестного назначения. */
.shop-act__form .ds-phone { background: #fff; }
.shop-act__go { width: 100%; justify-content: center; }
.shop-act__legal { margin: 0; font: 400 .75rem/1.4 var(--font-body); color: var(--color-text-quiet); }
.shop-act__err { margin: 0; font: 500 var(--ds-fs-label)/1.4 var(--font-body); color: var(--color-danger); }
.shop-act__done { display: flex; align-items: center; gap: 8px; margin: var(--ds-space-3) 0 0;
                  padding: 10px 12px; border-radius: var(--card-radius);
                  background: var(--color-primary-tint); border: 1px solid var(--color-primary-tint-edge);
                  font: 500 .875rem/1.4 var(--font-body); color: var(--color-text); }

/* Свой номер под формой обратного звонка: на телефоне звонок в одно касание короче
   любой формы, и отнимать его нельзя. Черта со словом «или» — чтобы два способа
   не читались одним. */
.shop-cb__or { display: flex; align-items: center; gap: 10px; margin-top: var(--ds-space-3);
               font: 400 .75rem/1 var(--font-body); color: var(--color-text-quiet); }
.shop-cb__or::before, .shop-cb__or::after { content: ""; flex: 1;
               border-top: 1px solid var(--color-primary-tint-edge); }
.shop-cb__num { display: flex; align-items: center; justify-content: center; gap: 8px;
                margin-top: 8px; font: 700 1.15rem/1 var(--font-display);
                color: var(--color-primary); text-decoration: none; }
.shop-cb__num:hover { text-decoration: underline; }

/* Старые имена оставлены для формы «Нашли дешевле?»: она пользуется теми же
   подписями и той же строкой согласия. */
.shop-quick__lab { font: 500 var(--ds-fs-label)/1.3 var(--font-body); color: var(--color-text-quiet); }
.shop-quick__legal { margin: 0; font: 400 .75rem/1.4 var(--font-body); color: var(--color-text-quiet); }
.shop-quick__err { margin: 0; font: 500 var(--ds-fs-label)/1.4 var(--font-body); color: var(--color-danger); }
.shop-buy__shelf { margin: var(--ds-space-3) 0 0; font-size: .9rem; }
.shop-buy__lead { margin-top: 3px; font-size: .8rem; color: var(--color-text-secondary); }
/* Кнопки — во всю ширину колонки и столбиком, как на r15c: две кнопки в строку
   в узкой колонке всё равно переносятся, но переносятся кривой лесенкой. */
.shop-buy__cta { display: flex; flex-direction: column; gap: var(--ds-space-2);
                 margin-top: var(--ds-space-4); max-width: 340px; }
.shop-buy__cta .ds-btn { width: 100%; }
.shop-buy__note { margin: var(--ds-space-4) 0 0; font-size: .82rem; color: var(--color-text-secondary); }
.shop-buy .ds-product__ask { text-align: left; margin-left: 0; }

/* Рамка «Для клиентов Ориона — цена ниже». Синяя черта слева и заливка — тот же
   приём, что на r15c: блок должен читаться предложением, а не рекламной врезкой,
   поэтому ни оранжевого, ни рамки со всех сторон. */
.shop-lkplate { margin: var(--ds-space-3) 0 0; padding: 10px 12px; line-height: 1.5;
                background: var(--color-primary-tint); border: 1px solid var(--color-primary-tint-edge);
                border-left: 3px solid var(--color-primary); border-radius: var(--ds-radius-md); }
.shop-lkplate__main { display: flex; align-items: center; gap: 8px; text-decoration: none;
                      font: 600 .9rem/1.3 var(--font-body); color: var(--color-text); }
.shop-lkplate__ic { width: 18px; height: 18px; flex: none; color: var(--color-primary); }
.shop-lkplate__line { display: block; margin: 5px 0 0 26px; text-decoration: none;
                      font-size: .8rem; color: var(--color-primary); }
.shop-lkplate__line:hover, .shop-lkplate__main:hover { text-decoration: underline; }

/* Способы получения — строкой, каждый с подсказкой. Пунктир снизу говорит, что
   за словом что-то есть; четыре строки условий под ценой отодвинули бы кнопку
   за нижний край экрана телефона. */
.shop-ways { display: flex; flex-wrap: wrap; align-items: center; margin-top: var(--ds-space-3);
             font-size: .82rem; color: var(--color-text-secondary); line-height: 1.6; }
.shop-ways__it { border-bottom: 1px dashed var(--color-border-hover); cursor: help; white-space: nowrap; }
.shop-ways__sep { margin: 0 7px; color: var(--color-text-faint); flex: none; }

/* --- характеристики --- */
.shop-chars { min-width: 0; }
.shop-chars__h { font-family: var(--font-display); font-size: 1rem; margin-bottom: var(--ds-space-3); }
/* Строка характеристики: подпись слева, значение справа, между ними — линия
   точками. Без неё в узкой колонке глаз теряет пару «подпись → значение».
   Линия рисуется фоном строки, а подпись и значение закрывают её собой: вставить
   между <dt> и <dd> третий элемент нельзя — список определений такого не допускает. */
.shop-spec { margin: 0; font-size: .85rem; }
.shop-spec__row { position: relative; display: flex; align-items: baseline; gap: 6px; padding: 5px 0; }
.shop-spec__row::before { content: ""; position: absolute; left: 0; right: 0; bottom: .45em;
                          border-bottom: 1px dotted var(--color-border); }
.shop-spec dt, .shop-spec dd { position: relative; background: var(--color-surface); }
.shop-spec dt { color: var(--color-text-secondary); flex: 0 1 auto; padding-right: 5px; }
.shop-spec dd { margin: 0 0 0 auto; font-weight: 600; text-align: right; padding-left: 5px; }
.shop-chars__more { margin-top: var(--ds-space-2); }
.shop-chars__more summary { cursor: pointer; font-size: .85rem; color: var(--color-primary);
                            list-style: none; padding: 4px 0; }
.shop-chars__more summary::-webkit-details-marker { display: none; }
.shop-chars__more summary::after { content: " ⌄"; }
.shop-chars__more[open] summary::after { content: " ⌃"; }

/* --- текстовый блок о классе шин --- */
.shop-about { margin-top: var(--ds-space-5); padding: var(--ds-space-4) var(--spacing-card);
              background: var(--color-primary-tint); border: 1px solid var(--color-primary-tint-edge);
              border-radius: var(--ds-radius-md); font-size: .9rem; line-height: 1.55; }
.shop-about__badge { display: inline-block; background: var(--color-primary-strong); color: #fff;
                     border-radius: var(--ds-radius-sm); padding: 3px 11px;
                     font-weight: 600; margin-bottom: var(--ds-space-2); }
.shop-about p { margin: 7px 0; }
.shop-about__trust { color: var(--color-text-quiet); }

.shop-card--link { text-decoration: none; display: block; }
.shop-card--link:hover { border-color: var(--color-primary); }
.shop-card--link .shop-card__h { display: block; color: var(--color-text); }
.shop-filter-toggle { margin-bottom: var(--ds-space-3); }

/* --- раздел дисков (сессия 413) --------------------------------------------------
   Тип обода — плашкой в углу снимка, там же, где у шины стоит сезон: это первое,
   чем диски отличаются друг от друга на глаз, и человек читает её раньше названия. */
.shop-disk__type { position: absolute; right: var(--ds-space-2); bottom: var(--ds-space-2);
                   background: var(--color-surface); border: 1px solid var(--color-border);
                   border-radius: 999px; padding: 3px 10px; font: 600 .75rem/1 var(--font-body);
                   color: var(--color-text-secondary); }
/* Цвет — рядом с моделью и потише её: «Тор» человек ищет, «Алмаз» проверяет. */
.shop-disk__color { color: var(--color-text-secondary); font-weight: 500; }
/* Полоса разболтовок идёт второй строкой под диаметрами и чуть тише: диаметр знают все,
   разболтовку — те, кто уже смотрел паспорт машины. */
.shop-chips--pcd { margin-top: calc(var(--ds-space-2) * -1); }
.shop-chips--pcd .ds-chip { font-family: var(--font-mono); font-size: .8125rem; }
/* Подсказка под характеристиками диска: разболтовка и вылет обязаны совпасть,
   и об этом надо сказать прямо там, где человек их читает. */
.shop-chars__hint { margin: var(--ds-space-3) 0 0; font: 400 .8125rem/1.45 var(--font-body);
                    color: var(--color-text-secondary); }

/* Окошки условий отбора — уже канонных 200 px и ВСЕ ОДНОЙ ШИРИНЫ (владелец
   07.09.2026: «сами окошки очень широкие, не по размеру», с образцом панели).
   Ширина, профиль и диаметр несут два-три знака, и поле во всю колонку под ними
   читается пустой полосой; но и разная ширина у соседних условий не годится —
   колонка тогда читается лесенкой, а не списком. 150 px — по самому длинному
   значению словесных условий («Нешипованные»), и оно же не даёт числовым
   растянуться. Вилка цены держит ту же ширину: это условие в общем ряду. */
.shop-listing__side .ds-filter__sel,
.shop-listing__side .ds-filter__range,
.shop-listing__side .ds-filter__ends { max-width: 150px; }
/* Поля цены — два в той же ширине, поэтому им отдаётся всё место до краёв:
   в поле стоит шестизначное «12 400», и канонные отступы в 12 px по бокам
   съедали последнюю цифру — подсказка вилки читалась как «1240». */
.shop-listing__side .ds-filter__num { padding-left: 4px; padding-right: 4px;
                                      font-size: 0.8125rem; }
.shop-listing__side .ds-filter__range { gap: var(--ds-space-1); }

/* Живой отбор (сессия 661). Кнопки «ПОКАЗАТЬ» при живом скрипте нет: выбор условия
   сам обновляет выдачу, а кнопка внизу одиннадцати условий читалась обязательной —
   до неё ещё надо было долистать. В РАЗМЕТКЕ она остаётся и работает как прежде,
   если скрипт не приехал: класс is-live ставит на форму сам скрипт. */
.ds-filter.is-live .ds-filter__go { display: none; }
/* Строка на её месте: «Обновляю…», потом столько же, сколько в зелёной плашке над
   выдачей. На телефоне выдача уехала под панель, и без этой строки выбор условия
   выглядит как «ничего не произошло». Место под строку держится всегда (min-height),
   иначе подвал панели дёргался бы при каждом выборе. */
.ds-filter__live { min-height: 1.2em; text-align: center;
                   font: 600 var(--ds-fs-label)/1.2 var(--font-body);
                   color: var(--color-text-secondary); }
/* Выдача на время запроса гаснет — но не исчезает: подменять её пустотой или крутилкой
   значит на каждый выбор отнимать у человека то, что он уже читает. Прежние карточки
   остаются на экране и не ловят нажатий, пока едут новые. */
.shop-listing__main.is-busy { opacity: .45; pointer-events: none;
                              transition: opacity .15s ease; }
@media (prefers-reduced-motion: reduce) { .shop-listing__main.is-busy { transition: none; } }

/* Селектор размера в колонке отбора: та же карточка, что у панели условий, и три
   поля СТОЛБЦОМ. В строку они встают только там, где полосы хватает (главная,
   сезон, поиск), а в колонке 240 px строка из трёх полей и кнопки крошит каждое
   поле до неузнаваемости. */
.shop-sizebox { border: 1px solid var(--color-border); border-radius: var(--card-radius);
                background: var(--color-surface); overflow: hidden;
                margin-bottom: var(--ds-space-3); }
.shop-sizebox__cap { padding: 11px var(--ds-space-4);
                background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
                color: var(--ds-paper); font: 700 var(--ds-fs-label)/1.2 var(--font-body);
                text-transform: uppercase; letter-spacing: .04em; }
.shop-sizepick--panel { margin: 0; max-width: none; padding: var(--ds-space-4); }
/* На телефоне подбор размера сложен, как и отбор: страницу своего размера человек
   открывает, чтобы ВЫБРАТЬ ТОВАР, а подбор ему нужен, чтобы уйти на другой размер.
   Развёрнутым он вместе с панелью отбора съедал первый экран целиком — до первой
   кнопки «В корзину» было 1334 px против 799 у r15c (замер 11.09.2026). Плашка
   остаётся на месте и работает кнопкой: видно, что подбор есть. Стрелка и повадки —
   те же, что у `.ds-filter__cap.is-toggle` канона, иначе на одном экране оказались бы
   две разные складные плашки. */
.shop-sizebox__cap.is-toggle { display: flex; align-items: center; justify-content: space-between;
                               cursor: pointer; }
.shop-sizebox__cap.is-toggle::after {
  content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.75px 1.75px 0;
  transform: translateY(-2px) rotate(45deg);
}
.shop-sizebox__cap.is-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
/* Своё `display` перебивает браузерное правило для `hidden` — та же грабля, что
   у панели отбора: форма оставалась бы на экране целиком. */
.shop-sizepick--panel[hidden] { display: none; }
/* Столбцом — только там, где отбор стоит колонкой сбоку. На телефоне колонка едет
   НАД выдачей, и три поля столбиком съедали весь первый экран: человек открывал
   размер и не видел ни одной шины. В строку они там помещаются втроём. */
@media (min-width: 900px) {
  .shop-sizepick--panel { display: flex; flex-direction: column; align-items: stretch;
                          gap: var(--ds-space-3); }
  .shop-sizepick--panel .ds-sizepick__col { flex: none; max-width: 150px; }
  .shop-sizepick--panel .ds-sizepick__col .ds-input { min-height: 42px; }
  /* Разделители «/» и «R» между полями читаются только в строку: колонкой они висят
     посреди пустоты и притворяются подписью следующего поля. */
  .shop-sizepick--panel .ds-sizepick__x { display: none; }
  .shop-sizepick--panel .ds-btn { width: 100%; justify-content: center; }
}

/* Плитка снимка ОДИНАКОВАЯ у всех карточек, есть снимок или нет. Разная высота
   ломает ряд: карточка с фото уезжает вниз, соседние висят в воздухе, и сетка
   читается как несобранная страница. Пропорция 4:3, а не квадрат канона: снимков
   в каталоге сейчас около половины, и ряд из наполовину пустых квадратов — это
   ряд пустоты. Вернуть квадрат, когда снимки закроют почти весь каталог. */
.shop .ds-product__pic { aspect-ratio: 4 / 3; background: #fff; }
.shop .ds-product--nopic .ds-product__pic { background: var(--ds-concrete-100); }
.shop .ds-product--nopic .ds-product__pic .ds-ic { width: 40px; height: 40px; }
.shop .ds-product__pic picture { display: block; width: 100%; height: 100%; }
.shop .ds-product__pic img { width: 100%; height: 100%; object-fit: contain; }
.shop-card2__pic picture, .shop-card2__pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.shop-card2__pic { background: #fff; border: 1px solid var(--color-border); overflow: hidden; }
.shop-card2__pic.is-empty { background: var(--ds-concrete-100); border-color: transparent; }

/* Мелкий текст полосы сайтов — по канону 2026.09.11-1: домен 12 px тихим цветом
   (было 11 px дымкой, контраст 2,73 при норме 4,5), подпись под знаком и «вы здесь»
   по 11 px (было 10 и 9 — мельче в ките не было ничего). Здесь это перебивка поверх
   отставшей копии кита; приедет канон — строки снимаются. */
.shop .ds-bridge__dom { font-size: .75rem; color: var(--color-text-quiet); }
.shop .ds-bridge__anchor-sub { font-size: .6875rem; color: var(--color-text-quiet); }
.shop .ds-bridge__here, .shop .ds-ecomap__here { font-size: .6875rem; }
/* Та же порода в панели отбора: границы цены под ползунком («3 050 … 25 170») —
   это цифры, которые человек читает, а набраны они цветом плейсхолдера: 3,04
   при норме 4,5 (замер прода 11.09.2026, после выкладки полосы сайтов он остался
   единственным провалом на странице каталога). */
.shop .ds-filter__ends { color: var(--color-text-quiet); }
/* И она же на синей подложке подбора: подписи полей («Ширина», «Профиль», «Диаметр»)
   и две пояснительные строки набраны вторичным цветом, а на blue-050 он даёт 4,45 —
   на пять сотых ниже нормы. Ровно тот случай, ради которого канон завёл затемнение
   стали: на подложке вторичный цвет не проходит. */
.shop-pickband .ds-sizepick__lab,
.shop-pickband__hint, .shop-pickband__note { color: var(--color-text-quiet); }
/* Шильдики в карточке товара — та же арифметика: вторичный цвет на шильдике даёт
   4,18. Это «с НДС» и ось на грузовой витрине («Рулевая», «Ведущая», «Прицепная»)
   и всесезонность — то, по чему в грузовых шинах и выбирают. */
.shop .ds-product__vat,
.shop .ds-mark,
.shop .ds-product__season--all { color: var(--color-text-quiet); }
.shop .ds-bridge__link.is-current .ds-bridge__dom { color: rgba(255,255,255,.8); }

/* ============================================================
   ВИД ПО СЕМЬЕ САЙТОВ (сессия 386). Шапка витрины собрана как
   у orion-centr.ru и r15c.ru: тонкая полоса со складом, белая
   шапка с логотипом и поиском, каталожное меню. Классы
   .ds-header-band, .ds-header, .ds-logo, .ds-trust, .ds-bridge —
   из канона; здесь только то, чем витрина от них отличается.
   ============================================================ */

/* Служебная полоса — БЕЛАЯ и тихая, как на r15c. Тёмная полоса, которая стояла здесь
   раньше, шла сразу под тёмной полосой-мостом, и две плотные строки подряд читались
   одной раздутой шапкой (владелец 06.09.2026: «ещё одна дублирующая полоса»).
   Этот ряд не для всех — он для тех, кто пришёл искать «Контакты» и «Доставку». */
.shop-top { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.shop-top__in { display: flex; align-items: center; justify-content: space-between;
                gap: var(--ds-space-4); min-height: 46px; }
.shop-top__links { display: flex; align-items: center; gap: var(--ds-space-5); min-width: 0;
                   overflow-x: auto; scrollbar-width: none; }
.shop-top__links::-webkit-scrollbar { display: none; }
.shop-top__links a { color: var(--color-text-secondary); text-decoration: none; white-space: nowrap;
                     font: 500 .875rem/1 var(--font-body); }
.shop-top__links a:hover { color: var(--color-primary); }

/* Белая шапка. Раскладка и высота сняты с r15c: там шапка выше нашей и разбита
   на отсеки тонкими чертами — логотип, чем торгуем, плашка юрлицам, связь.
   Из-за низкой шапки и мелкой врезки витрина читалась служебной страницей,
   а не главным окном магазина. */
.shop-head { position: relative; z-index: 2; }
.shop-head__in { gap: var(--ds-space-5); flex-wrap: nowrap; min-height: 84px; }
.shop-head__in > .shop-kicker { flex: 0 1 auto; }
/* Логотип — знак и подпись как на r15c.ru: шестерёнка с протектором, «ОРИОН»
   и «ШИННЫЙ ЦЕНТР» под ним тонкой строкой. Знак растровый (векторного оригинала
   у него нет), поэтому лежит в двойном размере и ужимается правилами — на экране
   с плотными точками он не должен мылиться. */
.shop-logo { display: inline-flex; align-items: center; gap: var(--ds-space-3); white-space: nowrap;
             text-decoration: none; }
.shop-logo__mark { width: 46px; height: 46px; flex: none; }
.shop-logo__text { display: flex; flex-direction: column; gap: 2px; }
.shop-logo__word { font: 700 1.4rem/1 var(--font-display); letter-spacing: .06em; color: var(--color-primary); }
.shop-logo__sub { font: 600 .62rem/1 var(--font-body); letter-spacing: .18em;
                  color: var(--color-text-secondary); text-transform: uppercase; }
@media (max-width: 480px) {
  .shop-logo__mark { width: 38px; height: 38px; }
  .shop-logo__word { font-size: 1.2rem; }
}

/* Юридическая полоса в самом низу — размеры сняты с r15c.ru: 13 px, серая,
   по центру, отделена тонкой чертой. Ссылки подчёркнуты пунктиром, разделитель «·».
   Она обязана быть незаметной: её задача — быть НАЙДЕННОЙ, когда её ищут. */
.shop-legal-foot { text-align: center; padding: 16px 12px 22px; margin-top: 10px;
                   border-top: 1px solid var(--color-border);
                   font: 400 .8125rem/1.7 var(--font-body); color: var(--color-text-secondary); }
.shop-legal-foot__links { margin-top: 6px; }
.shop-legal-foot a { color: var(--color-text-secondary); text-decoration: none;
                     border-bottom: 1px dashed var(--ds-line-300); }
.shop-legal-foot a:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.shop-legal-foot__tel { border-bottom: 0 !important; }
.shop-legal-foot__sep { color: var(--color-text-faint); padding: 0 4px; }

/* Плашка про cookie — по образцу r15c: тёмная полоса внизу, на телефоне тоньше
   и во всю ширину, чтобы не закрывать кнопку подбора на первом экране. */
.shop-cookie { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
               background: var(--color-primary-deep); color: rgba(255,255,255,.92);
               padding: 14px 18px; border-radius: var(--card-radius);
               box-shadow: 0 4px 24px rgba(0,0,0,.25); font: 400 .875rem/1.5 var(--font-body); }
.shop-cookie__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
                    justify-content: space-between; max-width: 1100px; margin: 0 auto; }
.shop-cookie a { color: #fff; text-decoration: underline; }
.shop-cookie__btn { flex: none; border: 0; cursor: pointer; white-space: nowrap;
                    background: var(--color-primary); color: #fff; padding: 9px 24px;
                    border-radius: var(--button-radius); font: 600 .875rem/1 var(--font-body); }
.shop-cookie__btn:hover { background: var(--color-action-strong); }
@media (max-width: 767px) {
  .shop-cookie { left: 0; right: 0; bottom: 0; border-radius: 0; padding: 9px 12px;
                 font-size: .75rem; line-height: 1.35; }
  .shop-cookie__row { flex-wrap: nowrap; gap: 10px; }
  .shop-cookie__row > span { flex: 1 1 auto; max-height: 3.3em; overflow: auto; }
  .shop-cookie__btn { padding: 8px 16px; font-size: .8125rem; }
}

/* Строка редакции под юридическим документом. */
.shop-doc__edition { margin-top: var(--ds-space-6); color: var(--color-text-faint); font-size: .82rem; }

/* Поиск переехал в белую полосу наверх (r15c держит его там же). Он не должен
   спорить с полосой каталога — отсюда узкая колодка и тихая рамка. */
.shop-find { display: flex; align-items: center; gap: var(--ds-space-2);
             flex: 0 1 300px; min-width: 160px;
             background: var(--color-surface); border: var(--input-border);
             border-radius: var(--input-radius); padding: 0 var(--ds-space-3); min-height: 34px; }
.shop-find:focus-within { border-color: var(--color-primary); }
.shop-find__ic { color: var(--color-text-faint); flex: none; }
.shop-find__in { flex: 1; min-width: 0; border: 0; background: none; color: var(--color-text);
                 font: 500 .85rem/1 var(--font-body); outline: none; }
.shop-find__in::placeholder { color: var(--color-text-faint); }
.shop-find__go { border: 0; background: none; cursor: pointer; padding: 8px 2px;
                 font: 600 .82rem/1 var(--font-body); color: var(--color-primary); }
.shop-find__go:hover { color: var(--color-action-strong); }

/* Каталожное меню — синяя полоса с градиентом, как на r15c.ru: сверху орион-синий,
   снизу тёмный. Это первое, по чему сайты семьи узнаются с одного взгляда.
   Три правки по замечанию владельца 06.09.2026 («галочки большие, между шинами
   расстояние маленькое, справа-слева полоса на всю длину экрана»):
   1. Заливка живёт на .shop-nav__row ВНУТРИ контейнера, а не на всей полосе:
      у r15c синий прямоугольник кончается там же, где кончается содержимое.
   2. Пункты разведены не зазором, а собственными полями (18 px с каждой стороны)
      и разделены тонкой чертой — так их читают как ячейки, а не как слипшийся ряд.
   3. Галочка вдвое мельче и тоньше: у r15c это подсказка, а не элемент строки. */
/* ЛИПКАЯ ПОЛОСА (владелец 09.09.2026: «верхнее меню закрепляется, при прокрутке вниз
   оно оставаться должно»). У r15c при прокрутке появляется отдельная компактная шапка
   с логотипом и меню; у нас закрепляется сама полоса каталога — она и есть меню сайта,
   и второй шапки заводить незачем.
   Работает `sticky`, а не `fixed`: закреплённый элемент остаётся в потоке, и под ним
   не нужен распорка-заполнитель, который у fixed-шапок всегда рассыпается на телефоне.
   Белая заливка на самой `.shop-nav` обязательна: синий прямоугольник лежит внутри
   контейнера (решение владельца 06.09.2026), и без фона на всю ширину содержимое
   страницы просвечивало бы по бокам от него при прокрутке. */
.shop-nav { position: sticky; top: 0; z-index: 60;
            background: var(--color-surface); padding-bottom: var(--ds-space-4); }
/* Тень появляется, только когда полоса ПРИЛИПЛА: у стоящей на месте полосы она
   рисовала бы вторую границу под шапкой. Класс вешает shop.js по сентинелу. */
.shop-nav.is-stuck { box-shadow: 0 6px 18px rgba(2, 74, 114, .13); }
.shop-nav.is-stuck { padding-bottom: var(--ds-space-2); }
/* Знака и телефона в липкой полосе НЕТ, хотя у r15c в их компактной шапке они есть,
   и первая версия этой правки их несла. Сняты по замеру, а не по вкусу: ряд пунктов
   занимает 1 148 px на легковой витрине и 1 191 на грузовой при полосе в 1 380 (и 1 330
   на ноутбуке 1366). Свободного места остаётся 139–232 px, а знак со словом «ОРИОН»
   и телефон просят 308 — полоса складывалась на ДВЕ строки, то есть ровно в то, на что
   владелец уже жаловался 07.09.2026 («верхнее меню очень плохо выглядит, разъехалось
   на две строки»).
   Влезал бы только один голый значок (46 px), и то с запасом в 7 px на узком ноутбуке
   у грузовой — то есть до первого нового диаметра в каталоге. Меню, которое ломается
   от пополнения прайса, хуже меню без значка. У r15c запас есть: их компактная шапка
   несёт 13 пунктов против наших 16, потому что размеры у них спрятаны в выпадающие
   списки, а не выложены линейкой.
   Если знак в липкой полосе всё-таки нужен — сначала придётся сократить линейку. */

/* На телефоне липкая полоса съедает пол-экрана, а листают там больше. Оставляем
   закрепление только там, где под полосой остаётся что читать. */
@media (max-width: 640px) {
  .shop-nav { position: static; }
}
.shop-nav__row { background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
                 border-radius: var(--ds-radius-md); }
.shop-nav__in { display: flex; overflow-x: auto; scrollbar-width: none; }
.shop-nav__in::-webkit-scrollbar { display: none; }
/* Поля пунктов 14 px, а не 18: в полосе легковой витрины пятнадцать пунктов (вся линейка
   диаметров R12…R24 плюс «Все размеры» и «Марки»), и на экране ноутбука 1366 она уезжала
   на вторую строку — владелец 07.09.2026: «верхнее меню очень плохо выглядит, разъехалось
   на две строки». Четыре пикселя с каждой стороны дают полосе больше сотни точек запаса. */
.shop-nav a { display: block; padding: 0 14px; color: rgba(255,255,255,.88);
              font: 600 .9375rem/54px var(--font-body); text-decoration: none; white-space: nowrap; }
.shop-nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
/* Черта между ячейками — на самой ячейке, а не отдельным элементом: пункты приезжают
   из цикла, и «вставить разделитель между» превратилось бы в счётчик в разметке. */
.shop-nav__in > * + * { box-shadow: inset 1px 0 0 rgba(255,255,255,.14); }

/* Размеры под диаметром — выпадающим подменю, как на r15c. Человек в полосе ищет
   не «диаметр», а свой «205/55 R16»; лишний экран между полосой и товаром теряет
   ровно тех, кто размер уже знает. Раскрывается наведением и фокусом с клавиатуры,
   на телефоне — нажатием (shop.js вешает .is-open). */
/* Полоса прокручивается вбок только на узком экране. На широком прокрутка обязана
   быть снята: `overflow-x: auto` создаёт область прокрутки, и она ОБРЕЗАЕТ выпадающее
   подменю — меню при этом «не работает», хотя разметка и правила верны. */
@media (min-width: 900px) {
  .shop-nav__in { overflow: visible; flex-wrap: wrap; }
  /* Пункты делят ВСЮ ширину полосы, а не жмутся к левому краю (владелец 11.09.2026:
     «всё лево прижато, а справа пустая область остаётся»). Остаток ширины раздаётся
     пунктам поровну: у шестнадцати пунктов легковой витрины это по 14 px на пункт —
     ряд ячеек от края до края вместо строки ссылок с пустотой в треть полосы.
     `flex: 1 0 auto`, а не `1 1 0`: базой берётся своя ширина пункта, и «Все размеры»
     не ужимается до ширины «R12» — ячейки остаются разными, как разные в них слова.
     Сжатие снято намеренно (`flex-shrink: 0`): узкому экрану полоса отвечает переносом
     на вторую строку, а не текстом, вылезающим из своей ячейки.
     Потолок ячейки — чтобы неполная вторая строка не растягивала два пункта на
     пол-экрана каждый: там, где растить нечего, ячейка остаётся нормального размера. */
  .shop-nav__in > * { flex: 1 0 auto; max-width: 200px; }
  /* Поля пункта тоже гибкие: на широком экране пункты дышат, на ноутбуке поджимаются,
     и полоса дольше держится в одну строку. Нижняя граница — 8 px: это ещё ячейка,
     а не слипшийся ряд. */
  .shop-nav a.shop-nav__it { padding: 0 clamp(8px, 1vw, 26px); text-align: center; }
}
.shop-nav__dd { position: relative; }
/* Правило пункта записано через .shop-nav, иначе его перебивает общее
   `.shop-nav a { display: block }` — оно старше по весу (класс + тег), и стрелка
   у пункта осталась бы строчной, то есть невидимой. */
.shop-nav a.shop-nav__it--dd { display: inline-flex; align-items: center; gap: 7px; }
/* Пункт с выпадающим списком — такая же ячейка во всю ширину: `inline-flex` обнимает
   слово, и на широком экране подсветка наведением осталась бы уже своей ячейки, а само
   слово прижалось бы к её левому краю. Правило стоит ПОСЛЕ базового намеренно: вес
   у них одинаковый, и решает порядок в файле. */
@media (min-width: 900px) {
  .shop-nav a.shop-nav__it--dd { display: flex; justify-content: center; }
}
/* Узкий ноутбук: шестнадцать пунктов легковой витрины в одну строку помещаются только
   мельче. Строка вторая, на которой два диаметра, — худшее из зол: полоса вырастает
   вдвое ради двух слов. */
@media (min-width: 900px) and (max-width: 1199px) {
  .shop-nav a.shop-nav__it { font-size: .875rem; padding: 0 clamp(6px, .7vw, 14px); }
}
.shop-nav__chev { display: inline-block; width: 5px; height: 5px; flex: none; border: solid currentColor;
                  border-width: 0 1.2px 1.2px 0; transform: translateY(-2px) rotate(45deg); opacity: .7; }
.shop-nav__dd:hover .shop-nav__chev,
.shop-nav__dd.is-open .shop-nav__chev { transform: translateY(1px) rotate(-135deg); opacity: 1; }
.shop-nav__sub {
  position: absolute; left: 0; top: 100%; z-index: 40; display: none;
  min-width: 260px; padding: var(--ds-space-3) 0 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-top: 0; border-radius: 0 0 var(--card-radius) var(--card-radius);
  box-shadow: var(--card-shadow);
}
.shop-nav__dd:hover .shop-nav__sub,
.shop-nav__dd:focus-within .shop-nav__sub,
.shop-nav__dd.is-open .shop-nav__sub { display: block; }
/* Подменю у правого края полосы раскрывается ВЛЕВО. Пункты тянутся на всю ширину,
   и последний диаметр стоит вплотную к правому краю: список размеров, приколотый
   левым краем к пункту, уезжал бы за край страницы. Какому пункту не хватает места
   справа — считает shop.js: это зависит от ширины окна и числа диаметров у сайта,
   в CSS такого условия не записать. */
.shop-nav__dd.is-right .shop-nav__sub { left: auto; right: 0; }
/* Замер: скрипту нужна ширина списка, а `display: none` её не даёт. Класс вешается
   на один кадр и снимается — человек ничего не видит (подменю absolute, соседей
   не двигает). */
.shop-nav__sub.is-measure { display: block; visibility: hidden; }
/* Размеров под диаметром бывает два десятка: в одну колонку это подменю ниже экрана. */
.shop-nav__subin { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr));
                   gap: 0 var(--ds-space-3); padding: 0 var(--ds-space-3); }
.shop-nav__sub a { padding: 7px 8px; color: var(--color-text); font: 500 .86rem/1.2 var(--font-mono);
                   border-radius: var(--ds-radius-sm); }
.shop-nav__sub a:hover { color: var(--color-primary); background: var(--color-primary-tint); }
.shop-nav__all { margin-top: var(--ds-space-2); padding: 10px var(--ds-space-4) !important;
                 border-top: 1px solid var(--color-border); color: var(--color-primary) !important;
                 font: 600 .82rem/1 var(--font-body) !important; }
.shop-nav__all:hover { background: var(--color-primary-tint); }
@media (max-width: 899px) {
  /* Полоса на телефоне прокручивается вбок, и выпадающее меню внутри неё обрезалось бы
     собственной прокруткой. Поэтому там подменю не раскрывается вовсе — пункт ведёт
     на страницу диаметра, где те же размеры лежат плитками. */
  .shop-nav__sub { display: none !important; }
  .shop-nav__chev { display: none; }
}

/* Полоса над выдачей: сколько нашлось и в каком порядке. */
/* Полоса порядка — слева над выдачей, как на r15c: выбранный порядок выделен
   цветом действия, остальные тихие ссылки. Черты под полосой нет: ниже стоит
   плашка наличия, и две горизонтальные линии подряд рубили колонку пополам. */
.shop-sortbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-space-3); }
.shop-sortbar__by { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-space-5); }
/* На телефоне четыре порядка переносились на вторую строку и добавляли к первому
   экрану ещё сорок точек. Одной строкой с прокруткой вбок: полоса читается полосой,
   а не абзацем ссылок. */
@media (max-width: 899px) {
  .shop-sortbar__by { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
                      gap: var(--ds-space-4); }
  .shop-sortbar__by::-webkit-scrollbar { display: none; }
  .shop-sortbar__it { white-space: nowrap; }
}
.shop-sortbar__it { font: 500 .9rem/1 var(--font-body); color: var(--color-text-secondary); text-decoration: none; }
.shop-sortbar__it:hover { color: var(--color-primary); }
.shop-sortbar__it.is-active { color: var(--color-action-strong); font-weight: 700; cursor: default; }

/* Полка «в наличии» — зелёная плашка с числом, как на r15c. Она отвечает на вопрос,
   который человек задаёт первым на странице каталога: есть ли вообще из чего выбирать.
   Число то же самое, что в полосе порядка, но там оно служебное («нашлось столько»),
   а здесь — обещание («столько можно купить»). */
/* Плашка обнимает свой текст: растянутая во всю колонку, она читалась полосой
   состояния страницы, а не короткой репликой «столько есть». В колонке выдачи
   она — гибкий элемент, поэтому по умолчанию тянется, и это надо снимать явно. */
.shop-instock { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; margin: 0;
                padding: 9px 16px; border-radius: var(--ds-radius-md);
                background: var(--color-stock-bg); border: 1px solid var(--ds-green-600);
                border-color: color-mix(in srgb, var(--color-stock) 30%, transparent);
                font: 500 .9rem/1.2 var(--font-body); color: var(--color-text); }
.shop-instock b { color: var(--color-stock); font-weight: 700; }

/* Полка доверия над выдачей — строй r15c: одна светлая строка с галочками.
   Она стоит там, где у страницы каталога иначе полоса пустоты между отбором
   и первым рядом карточек. Всё в ней — проверяемые факты о продавце. */
.shop-tb { display: flex; flex-wrap: wrap; gap: 10px var(--ds-space-5); margin: 0;
           padding: 12px var(--ds-space-4); border: 1px solid var(--color-border);
           border-radius: var(--ds-radius-md); background: var(--color-surface);
           font: 400 .82rem/1.3 var(--font-body); color: var(--color-text-secondary); }
.shop-tb__it { display: inline-flex; align-items: center; gap: 7px; }
.shop-tb__it b { color: var(--color-text); font-weight: 700; }
.shop-tb__it .ds-ic { width: 14px; height: 14px; flex: none; color: var(--color-stock); }
@media (max-width: 860px) { .shop-tb { display: none; } }

/* Полка доверия под первым экраном. */
.shop-trustband { background: var(--color-plate); border-bottom: 1px solid var(--color-border); }
.shop-trust { padding: var(--ds-space-4) 0; justify-content: space-between; }
.shop-trust .num { color: var(--color-primary); }


@media (max-width: 900px) {
  .shop-band__place span:not(.shop-band__addr) { display: none; }
  .shop-head__in { flex-wrap: wrap; }
  .shop-find { order: 3; flex-basis: 100%; margin-bottom: var(--ds-space-3); }
}

/* Полоса подбора на телефоне: поля столбиком, поля панели уже — иначе рамка
   в 26 px по бокам съедает у трёх полей больше, чем оставляет. */
@media (max-width: 640px) {
  .shop-pickband__box { padding: 16px 14px 18px; border-radius: 10px; }
  .shop-pickband__h { font-size: 1.125rem; }
  .shop-pickband__hint { margin-left: 0; flex-basis: 100%; }
  /* Два поля в ряд, а не «одно во всю ширину, потом два» вперемешку: без явной
     доли строки flex-basis в 150 px давал полю то целую строку, то половину,
     в зависимости от того, сколько осталось. */
  .shop-pickband .ds-sizepick__col { flex: 1 1 calc(50% - var(--ds-space-2)); max-width: none; }
  /* Разделители «/» и «R» читаются только в одну строку. Когда поля встают
     в две, они висят у правого края отдельными знаками — ровно та же беда,
     из-за которой их прячет колонка отбора. */
  .shop-pickband .ds-sizepick__x { display: none; }
  .shop-pickband .ds-sizepick .ds-btn { flex: 1 1 100%; justify-content: center; }
}

/* Полки-ссылки со значком: без значка четыре одинаковых прямоугольника читались
   как таблица, а не как четыре разных входа. */
.shop-card__ic { display: inline-flex; color: var(--color-primary); margin-bottom: var(--ds-space-2); }
.shop-card--link:hover .shop-card__ic { color: var(--color-action-strong); }

/* ============================================================
   РАСКЛАДКА ШАПКИ ПО ОБРАЗЦУ r15c.ru (сессия 387)
   Владелец: «максимально всё перетащим с основного сайта».
   Палитра совпадала и раньше — канон построен из r15c; здесь
   переносится СТРОЙ шапки: мост наверху, полоса склада, белая
   шапка с оранжевым акцентом и плашкой юрлицам, синяя полоса
   каталога, строка поиска.
   ============================================================ */

/* Мост экосистемы первой строкой страницы. Светлая полоса, как на r15c. */
.shop-eco { background: var(--ds-plate-100); border-bottom: 1px solid var(--ds-plate-300); }
.shop-eco .ds-bridge { max-width: var(--ds-container); margin: 0 auto; padding: 0 var(--ds-space-4);
                       overflow-x: auto; scrollbar-width: none; }
.shop-eco .ds-bridge::-webkit-scrollbar { display: none; }
/* Начертания полосы — снятые с r15c, а не канонные (владелец 09.09.2026: «обратите
   внимание на список наших сайтов… какие шрифты»). Расхождение ровно в трёх местах,
   и главное из них — имя сайта: в каноне `<b>` наследует 600 от строки и браузер
   доводит `bolder` до 900, у r15c оно набрано 700. Разница в две ступени видна
   глазом: наши названия читались жирнее и теснее эталонных.
   Правим здесь, а не в components.css: канон приезжает из design-system и руками
   не правится (память lk-kit-copy-css-only). */
.shop-eco .ds-bridge__text b { font-weight: 700; }
.shop-eco .ds-bridge__anchor-sub { font-weight: 700; }
.shop-eco .ds-bridge__here { font-weight: 700; }

/* Полоса склада: ссылки справа. */
.shop-band__links { display: inline-flex; gap: var(--ds-space-4); }

/* Название раздела с оранжевой чертой — акцент r15c. Оранжевый здесь по канону
   допустим: это указатель на предмет торговли, а не кнопка. */
.shop-kicker { border-left: 3px solid var(--color-action); padding-left: var(--ds-space-3); min-width: 0; }
.shop-kicker__t { font: 600 1.15rem/1.15 var(--font-display); letter-spacing: .02em; color: var(--color-text); }
.shop-kicker__s { font-size: .78rem; color: var(--color-text-secondary); margin-top: 3px; }

/* Плашка для юрлиц: у обеих витрин покупатель чаще всего парк или предприятие,
   и «НДС, отсрочка, 44/223-ФЗ» для него важнее любой картинки. */
.shop-legal--link { text-decoration: none; color: inherit; }
.shop-legal--link:hover { border-color: var(--color-primary); }
/* Вторая строка плашки («НДС · отсрочка · 44/223-ФЗ») набрана тихим цветом, а не
   вторичным: сталь-600 на шильдике даёт 4,18 при норме 4,5 — замер 11.09.2026. */
.shop-legal { display: inline-flex; align-items: center; gap: var(--ds-space-2);
              padding: 8px var(--ds-space-3); border: 1px solid var(--color-border);
              border-radius: var(--ds-radius-md); background: var(--color-plate);
              font-size: .76rem; line-height: 1.35; color: var(--color-text-quiet); }
.shop-legal b { color: var(--color-text); font-size: .82rem; }
.shop-legal .ds-ic { color: var(--color-primary); }

/* Телефон и кнопка звонка. */
/* Связь — отдельный отсек, отчёркнутый тонкой линией, как на r15c: телефон
   не должен читаться продолжением плашки для юрлиц. */
.shop-call { margin-left: auto; display: flex; align-items: center; gap: var(--ds-space-4);
             border-left: 1px solid var(--color-border); padding-left: var(--ds-space-5);
             align-self: stretch; }
.shop-call__num { font: 600 1.15rem/1 var(--font-display); color: var(--color-text); text-decoration: none; white-space: nowrap; }
.shop-call__num:hover { color: var(--color-primary); }

/* Часы работы под номером — раскладка r15c: сразу после «куда звонить» человек
   спрашивает «а сейчас возьмут трубку». В отдельной тёмной полосе наверху их
   не читал никто. */
.shop-call__box { display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
                  text-align: right; }
.shop-call__hours { font: 400 .72rem/1.3 var(--font-body); color: var(--color-text-secondary);
                    max-width: 20em; }

@media (max-width: 1100px) {
  .shop-legal { display: none; }
}
@media (max-width: 860px) {
  .shop-kicker { display: none; }
  .shop-call__num { display: none; }
  .shop-call__hours { display: none; }
  /* Раз номер и часы спрятаны, отсека «связь» больше нет — есть одна кнопка.
     Отчёркивающая линия и отступ под ним оставались, и в шапке телефона стояла
     пустая колонка в 43 px с вертикальной чертой слева от кнопки: черта отделяла
     кнопку от пустоты. */
  .shop-call { border-left: 0; padding-left: 0; }
  .shop-call__box { display: none; }
}
@media (max-width: 640px) {
  .shop-eco .ds-bridge { -webkit-mask-image: linear-gradient(to right, #000 86%, transparent);
                         mask-image: linear-gradient(to right, #000 86%, transparent); }
  .shop-eco .ds-bridge__anchor-sub, .shop-eco .ds-bridge__dom, .shop-eco .ds-bridge__here { display: none; }
  /* На телефоне служебные ссылки уступают место поиску: разделы из них доступны
     из подвала, а поиск на витрине — главный вход. */
  .shop-top__links { display: none; }
  .shop-find { flex: 1 1 100%; }
}

/* --- корзина (сессия 397) ---------------------------------------------------------
   Ссылка с цифрой в служебной полосе; на телефоне остаётся ВИДНОЙ, в отличие от
   остальных ссылок этой полосы: человек, положивший шины, должен видеть, куда идти. */
/* Прижата вправо, к поиску: посередине полосы (между служебными ссылками и поиском)
   корзина читалась случайной надписью, а не действием. */
.shop-top__cart { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--color-text-secondary); text-decoration: none; font: 500 .875rem/1 var(--font-body); }
.shop-top__cart:hover { color: var(--color-primary); }
.shop-top__cart.is-full { color: var(--color-primary); font-weight: 600; }
.shop-top__cart-ic { width: 17px; height: 17px; }
.shop-top__cart-n { display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--color-primary); color: #fff; font: 700 .75rem/1 var(--font-body); }

/* Покупка в карточке каталога: счётчик слева, кнопка справа одной строкой. Кнопка
   во всю ширину читалась единственным действием карточки и молча клала одну шину
   (владелец 07.09.2026: «количества штук в карточке не хватает»). Счётчик узкий —
   в колонке сетки на четыре карточки места ровно на «− 4 +». */
.ds-product__buy { display: flex; gap: 6px; align-items: stretch; margin-top: var(--ds-space-3); }
.ds-product__buy .ds-btn { flex: 1; min-width: 0; justify-content: center; padding-left: 10px; padding-right: 10px; }
.ds-product__count { flex: none; }
.ds-product__count .shop-buy__pm { width: 26px; font-size: 1rem; }
.ds-product__count .shop-buy__qty { width: 34px; font-size: .9375rem; }

/* Счётчик и «В корзину» на карточке товара — одной строкой, счётчик слева. */
.shop-buy__cart { display: flex; gap: var(--ds-space-3); align-items: stretch; margin: var(--ds-space-4) 0 var(--ds-space-3); }
.shop-buy__count { display: inline-flex; align-items: stretch; border: 1px solid var(--color-border);
  border-radius: var(--ds-radius-md); overflow: hidden; background: var(--card-bg); }
.shop-buy__pm { width: 38px; border: 0; background: transparent; cursor: pointer;
  color: var(--color-text-secondary); font: 600 1.125rem/1 var(--font-body); }
.shop-buy__pm:hover { background: var(--color-surface); color: var(--color-primary); }
.shop-buy__qty { width: 54px; border: 0; border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border); text-align: center; background: transparent;
  font: 600 1rem/1 var(--font-body); color: var(--color-text); -moz-appearance: textfield; }
.shop-buy__qty::-webkit-outer-spin-button,
.shop-buy__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shop-buy__add { flex: 1; justify-content: center; }

/* Страница корзины: список слева, итог и форма справа — как в каталоге. */
.shop-cart { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--ds-space-6);
  align-items: start; margin-top: var(--ds-space-5); }
.shop-cart__list { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.shop-cart__row { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto 28px;
  gap: var(--ds-space-4); align-items: center; padding: var(--ds-space-3);
  border: 1px solid var(--color-border); border-radius: var(--card-radius); background: var(--card-bg); }
.shop-cart__pic { display: block; width: 88px; height: 88px; }
.shop-cart__pic img, .shop-cart__pic svg { width: 100%; height: 100%; object-fit: contain; }
.shop-cart__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shop-cart__t a { color: inherit; text-decoration: none; font-weight: 600; }
.shop-cart__t a:hover { color: var(--color-primary); }
.shop-cart__size { color: var(--color-text-secondary); font-size: .8125rem; font-family: var(--font-mono, monospace); }
.shop-cart__qty { display: inline-flex; align-items: center; border: 1px solid var(--color-border);
  border-radius: var(--ds-radius-md); overflow: hidden; }
.shop-cart__pm { width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer;
  color: var(--color-text-secondary); font: 600 1rem/1 var(--font-body); }
.shop-cart__pm:hover { background: var(--color-surface); color: var(--color-primary); }
.shop-cart__n { min-width: 32px; text-align: center; font-weight: 600; }
.shop-cart__sum { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.shop-cart__sum span { color: var(--color-text-secondary); font-size: .8125rem; }
.shop-cart__del button { width: 28px; height: 28px; border: 0; background: transparent; cursor: pointer;
  color: var(--color-text-secondary); font-size: 1.25rem; line-height: 1; }
.shop-cart__del button:hover { color: var(--color-danger); }

.shop-cart__side { position: sticky; top: var(--ds-space-4); padding: var(--ds-space-5);
  border: 1px solid var(--color-border); border-radius: var(--card-radius); background: var(--card-bg); }
.shop-cart__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-3); }
.shop-cart__total b { font-size: 1.5rem; }
.shop-cart__note { margin: var(--ds-space-2) 0 var(--ds-space-4); color: var(--color-text-secondary); font-size: .8125rem; }
.shop-cart__form { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.shop-cart__f { display: flex; flex-direction: column; gap: 4px; font-size: .8125rem;
  color: var(--color-text-secondary); }
.shop-cart__f i { color: var(--color-danger); font-style: normal; }
.shop-cart__go { justify-content: center; }
.shop-cart__legal { margin: 0; color: var(--color-text-secondary); font-size: .75rem; }
.shop-cart__lost, .shop-cart__err { padding: var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius-md); background: var(--ds-orange-50, #fff6ed);
  color: var(--ds-orange-800, #9a3412); font-size: .875rem; }
.shop-cart__done p { max-width: 60ch; }

@media (max-width: 900px) {
  .shop-cart { grid-template-columns: 1fr; }
  /* Итог и форма уходят вниз, но липкими не остаются: на телефоне панель в пол-экрана
     закрывала бы сам список. */
  .shop-cart__side { position: static; }
  .shop-cart__row { grid-template-columns: 64px minmax(0, 1fr) auto; row-gap: var(--ds-space-3); }
  .shop-cart__pic { width: 64px; height: 64px; }
  .shop-cart__sum { grid-column: 2 / 4; align-items: flex-start; }
  .shop-cart__del { grid-column: 3; grid-row: 1; }
}

/* ============================================================================
   Карточка товара 2.0 (сессия 419): наличие цифрой и датой, линейка модели,
   сравнение по размеру, продавец цифрами, «нашли дешевле», липкая полоса покупки.
   Разбор Amazon и Alibaba — docs/plans/2026-09-07-product-card-2.md.
   ============================================================================ */

/* Наличие: слово, цифра и дата. Цифра приглушена намеренно — первым читается слово
   («Много» зелёным), цифра уточняет, а дата отвечает на главный вопрос. */
.shop-stock { margin: var(--ds-space-3) 0 0; font-size: .9rem; flex-wrap: wrap;
  align-items: baseline; gap: 4px 10px; }
.shop-stock__n { color: var(--color-text-secondary); font-size: .8125rem;
  font-variant-numeric: tabular-nums; }
.shop-stock__when { display: flex; align-items: center; gap: 6px; margin-top: 5px;
  font-size: .8125rem; color: var(--color-text); }
.shop-stock__ic { width: 15px; height: 15px; flex: none; color: var(--color-text-secondary); }

/* Линейка размеров модели: размер, цена, наличие. Ширина ячейки одна на всех,
   иначе колонка цен ходит зигзагом и сравнивать глазами нечем. */
.shop-line { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-line__i { display: flex; flex-direction: column; gap: 2px; min-width: 132px;
  padding: 8px 11px; border: 1px solid var(--color-border); border-radius: var(--ds-radius-sm);
  background: var(--color-surface); text-decoration: none; color: var(--color-text); }
.shop-line__i:hover { border-color: var(--color-primary); }
.shop-line__i.is-here { border-color: var(--color-primary); background: var(--color-primary-tint); }
.shop-line__i b { font-size: .875rem; }
.shop-line__p { font-family: var(--font-mono); font-size: .875rem; font-variant-numeric: tabular-nums; }
.shop-line__q { font-size: .75rem; color: var(--color-text-secondary); }
.shop-line__q--many, .shop-line__q--some { color: var(--color-stock); }
.shop-line__q--few { color: var(--color-low); }

/* Сравнение по размеру. Таблица прокручивается внутри себя: на телефоне шесть
   столбцов не помещаются, но резать их нельзя — сравнение тем и живо. */
.shop-cmp { overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border); border-radius: var(--ds-radius-md);
  background: var(--color-surface); }
.shop-cmp__t { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 620px; }
.shop-cmp__t th { text-align: left; padding: 9px 12px; font-size: .6875rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-quiet);
  background: var(--ds-concrete-100); border-bottom: 1px solid var(--color-border); }
.shop-cmp__t td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
.shop-cmp__t tbody tr:last-child td { border-bottom: 0; }
.shop-cmp__t tr.is-here td { background: var(--color-primary-tint); }
.shop-cmp__t a { color: var(--color-primary); text-decoration: none; }
.shop-cmp__t a:hover { text-decoration: underline; }
.shop-cmp__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-cmp__me { display: block; font-size: .75rem; color: var(--color-text-quiet); }
.shop-cmp__many, .shop-cmp__some { color: var(--color-stock); font-weight: 600; }
.shop-cmp__few { color: var(--color-low); font-weight: 600; }
.shop-cmp__none { color: var(--color-text-secondary); }

/* Продавец цифрами. Не карточки: рамка вокруг каждой цифры превратила бы блок
   доверия в три одинаковых плитки, а он читается одной строкой. */
.shop-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--ds-space-4); padding: var(--ds-space-4) 0 0; }
.shop-trust__i { display: flex; flex-direction: column; gap: 2px; }
.shop-trust__i b { font-size: 1.35rem; font-variant-numeric: tabular-nums;
  font-family: var(--font-body); }
.shop-trust__i span { font-size: .8125rem; color: var(--color-text-secondary); }

/* «Нашли дешевле?» — тихая строка под кнопками: это не действие покупки и спорить
   с «В корзину» за внимание не должно. */
.shop-cheap { margin-top: var(--ds-space-3); }
.shop-cheap__sum { cursor: pointer; font-size: .8125rem; color: var(--color-primary);
  text-decoration: underline dotted; list-style: none; }
.shop-cheap__sum::-webkit-details-marker { display: none; }
.shop-cheap__form { display: flex; flex-direction: column; gap: 6px;
  padding: var(--ds-space-3) 0 0; }
.shop-cheap__go { margin-top: 4px; }
.shop-cheap__done { display: flex; align-items: center; gap: 7px; margin: var(--ds-space-3) 0 0;
  padding: 9px 12px; border-radius: var(--ds-radius-sm); background: var(--color-stock-bg);
  color: var(--color-stock); font-size: .8125rem; }

/* Липкая полоса покупки. На десктопе прижата к верху (там же, где шапка каталога),
   на телефоне — к низу, под большой палец. Появляется скриптом; без скрипта скрыта
   атрибутом hidden и не мешает никому. */
.shop-sticky { position: fixed; left: 0; right: 0; top: 0; z-index: var(--ds-z-sticky, 10);
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 10px rgba(20, 28, 38, .09); }
.shop-sticky__in { display: flex; align-items: center; gap: var(--ds-space-4);
  max-width: 1380px; margin: 0 auto; padding: 9px var(--ds-space-4); }
.shop-sticky__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: .875rem; font-weight: 600; }
.shop-sticky__price { display: flex; flex-direction: column; line-height: 1.15; flex: none; }
.shop-sticky__price b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.shop-sticky__sum { font-size: .75rem; color: var(--color-text-secondary); }
.shop-sticky__go { flex: none; }

@media (max-width: 700px) {
  .shop-sticky { top: auto; bottom: 0; border-bottom: 0; border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 10px rgba(20, 28, 38, .1); padding-bottom: env(safe-area-inset-bottom, 0); }
  /* Имени товара на телефоне нет: он уже написан заголовком выше, а в полосе
     съедает место у цены и кнопки. */
  .shop-sticky__name { display: none; }
  .shop-sticky__go { flex: 1; }
  /* Размеры модели идут по две в ряд: в один столбец список из девяти размеров
     занимает пол-экрана прокрутки, а сравнивать цены в нём нечем. */
  .shop-line__i { flex: 1 1 calc(50% - 4px); min-width: 0; }
}

/* Диски того же диаметра и вопросы о шине (сессия 421). */
.shop-rims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ds-space-3); }
.shop-rims__i { display: flex; flex-direction: column; gap: 4px; padding: var(--ds-space-3);
  border: 1px solid var(--color-border); border-radius: var(--ds-radius-md);
  background: var(--color-surface); text-decoration: none; color: var(--color-text); }
.shop-rims__i:hover { border-color: var(--color-border-hover); }
.shop-rims__pic { aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--ds-concrete-100); border-radius: var(--ds-radius-sm); overflow: hidden; }
.shop-rims__pic img { width: 100%; height: 100%; object-fit: contain; }
.shop-rims__pic.is-empty .ds-ic { width: 36px; height: 36px; opacity: .4; }
.shop-rims__n { font-size: .875rem; line-height: 1.3; }
.shop-rims__s { font-family: var(--font-mono); font-size: .75rem; color: var(--color-text-secondary); }
.shop-rims__p { font-weight: 600; font-variant-numeric: tabular-nums; }

.shop-faq { display: flex; flex-direction: column; border: 1px solid var(--color-border);
  border-radius: var(--ds-radius-md); background: var(--color-surface); }
.shop-faq__i { border-bottom: 1px solid var(--color-border); }
.shop-faq__i:last-child { border-bottom: 0; }
.shop-faq__i > summary { cursor: pointer; padding: 12px var(--ds-space-4);
  font-weight: 600; font-size: .9375rem; list-style: none; display: flex; gap: 8px;
  align-items: baseline; }
.shop-faq__i > summary::-webkit-details-marker { display: none; }
.shop-faq__i > summary::before { content: '+'; color: var(--color-primary); font-weight: 700;
  flex: none; width: 12px; }
.shop-faq__i[open] > summary::before { content: '–'; }
.shop-faq__i > summary:hover { color: var(--color-primary); }
.shop-faq__i p { margin: 0; padding: 0 var(--ds-space-4) 13px 34px; font-size: .875rem;
  color: var(--color-text-secondary); max-width: 82ch; }

@media (max-width: 900px) { .shop-rims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shop-rims__warn { display: flex; gap: 7px; align-items: flex-start; margin: var(--ds-space-3) 0 0;
  font-size: .8125rem; color: var(--color-text-secondary); max-width: 82ch; }
.shop-rims__wic { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--color-low); }

/* Расшифровка обозначений шины (сессия 421): две колонки, факт и что он значит. */
.shop-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-3) var(--ds-space-5); }
.shop-facts__i { display: flex; flex-direction: column; gap: 2px;
  padding-left: var(--ds-space-3); border-left: 2px solid var(--color-primary-tint-edge); }
.shop-facts__i b { font-size: .9375rem; }
.shop-facts__i span { font-size: .8125rem; color: var(--color-text-secondary); max-width: 60ch; }
@media (max-width: 760px) { .shop-facts { grid-template-columns: 1fr; } }

/* Способы получения с ценой и строка возврата (сессия 427). */
.shop-ways2 { display: flex; flex-direction: column; gap: 2px; margin: var(--ds-space-3) 0 0;
  font-size: .8125rem; }
.shop-ways2__r { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-bottom: 1px dotted var(--color-border); cursor: help; }
.shop-ways2__r:last-of-type { border-bottom: 0; }
.shop-ways2__w { color: var(--color-text); }
.shop-ways2__p { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shop-ways2__p.is-free { color: var(--color-stock); }
.shop-ways2__note { margin: 4px 0 0; font-size: .75rem; color: var(--color-text-secondary); }
.shop-ways2__note a { color: var(--color-primary); }
.shop-guar { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--ds-space-3);
  padding-top: var(--ds-space-3); border-top: 1px solid var(--color-border);
  font-size: .8125rem; color: var(--color-text-secondary); }
.shop-guar b { color: var(--color-text); }
.shop-guar__ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--color-stock); }
.shop-guar a { color: var(--color-primary); }
.shop-ways2__free { margin: 5px 0 0; font-size: .8125rem; color: var(--color-low); }
.shop-ways2__free b { font-variant-numeric: tabular-nums; }

/* Служебная ссылка сотрудника (сессия 428): намеренно тихая — клиенту она ни о чём. */
.shop-staff { color: var(--color-text-faint); font-size: .75rem; text-decoration: none;
  border-bottom: 1px dotted var(--color-border); margin-left: 6px; }
.shop-staff:hover { color: var(--color-text-secondary); }

/* --- Вторая ось: разноширокий комплект (сессия 545, предложение №182) --------------- */

/* Раскрывашка под полями подбора. Занимает одну строчку у тех, кому вторая ось не
   нужна, и разворачивается вторым рядом у тех, кому нужна. Ряд — на всю ширину полосы
   (flex-basis: 100%), иначе он встал бы четвёртой колонкой рядом с первым. */
.shop-sizepick__axle { flex: 1 1 100%; margin-top: var(--ds-space-2); }
.shop-sizepick__more { cursor: pointer; font-size: .875rem; color: var(--color-primary);
  width: max-content; }
.shop-sizepick__rear { display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--ds-space-2); margin-top: var(--ds-space-2); }
.shop-sizepick__axlelab { align-self: center; }
.shop-pickband .shop-sizepick__rear .ds-sizepick__col { flex: 1 1 150px; max-width: 230px; }
.shop-pickband .shop-sizepick__rear .ds-input { min-height: 50px; }

/* Карточка комплекта: снимок слева, две оси строками, итог под ними. Не сетка товаров —
   человеку здесь важны обе половины рядом и одна цифра под ними. */
.shop-pairs { display: grid; gap: var(--ds-space-3); margin: var(--ds-space-4) 0; }
.shop-pair { display: flex; gap: var(--ds-space-4); padding: var(--ds-space-4);
  border: 1px solid var(--color-border); border-radius: var(--card-radius);
  background: var(--color-surface); }
.shop-pair__pic { flex: 0 0 120px; }
.shop-pair__pic img { width: 100%; height: auto; }
.shop-pair__body { flex: 1 1 auto; min-width: 0; }
.shop-pair__brand { font-family: var(--font-display); font-weight: 700; }
.shop-pair__model { color: var(--color-text-secondary); margin-bottom: var(--ds-space-2); }
.shop-pair__axles { display: grid; gap: 6px; }
.shop-pair__axle { display: grid; grid-template-columns: 84px 1fr auto auto;
  gap: var(--ds-space-3); align-items: baseline; text-decoration: none; color: inherit;
  padding: 4px 0; border-top: 1px solid var(--color-border); }
.shop-pair__axle:hover .shop-pair__size { color: var(--color-primary); }
.shop-pair__ax { color: var(--color-text-secondary); font-size: .875rem; }
.shop-pair__mm { color: var(--color-text); }
.shop-pair__price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shop-pair__per { font-weight: 400; color: var(--color-text-secondary); margin-left: 4px; }
.shop-pair__sum { margin-top: var(--ds-space-3); padding-top: var(--ds-space-3);
  border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap;
  gap: var(--ds-space-3); align-items: baseline; }
.shop-pair__total { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.shop-pair__when { color: var(--color-text-secondary); font-size: .875rem; }

@media (max-width: 640px) {
  /* На телефоне снимок уходит наверх, а строка оси складывается в две колонки:
     четыре колонки на 360 px давали перенос внутри каждой ячейки. */
  .shop-pair { flex-direction: column; }
  .shop-pair__pic { flex-basis: auto; max-width: 140px; }
  .shop-pair__axle { grid-template-columns: 1fr auto; gap: 4px var(--ds-space-2); }
  .shop-pair__stock { grid-column: 1 / -1; }
}

/* Подпись «Передняя» появляется только вместе с раскрытой второй осью: пока ряд один,
   называть его передним не от чего. `:has` здесь — прогрессивное улучшение: браузер,
   который его не знает, просто оставит первый ряд без подписи. */
.shop-sizepick__frontlab { display: none; }
.ds-sizepick:has(.shop-sizepick__axle[open]) .shop-sizepick__frontlab { display: block; }

/* --- вход покупателя и его заказы (сессия 595) --- */
/* Вход и имя — в служебной полосе рядом с корзиной, тем же ростом и тоном: это
   не действие страницы, а состояние человека, и спорить с «В корзину» ему нельзя. */
.shop-top__me { display: inline-flex; align-items: center; gap: 6px; margin-left: 14px;
  white-space: nowrap; color: var(--color-text-secondary); text-decoration: none;
  font: 500 .875rem/1 var(--font-body); max-width: 220px; overflow: hidden;
  text-overflow: ellipsis; }
.shop-top__me:hover { color: var(--color-primary); }
.shop-top__me.is-in { color: var(--color-primary); font-weight: 600; }
.shop-top__me-ic { width: 17px; height: 17px; flex: none; }

/* Рамка вошедшего — та же форма, что у гостевой: человек узнаёт место, где стояло
   приглашение, и видит на нём свою цену. */
.shop-lkplate--in .shop-lkplate__main { cursor: default; }
.shop-lkplate--in .shop-lkplate__line { color: var(--color-text-secondary); }
.shop-lkplate--in a.shop-lkplate__line { color: var(--color-primary); }

/* Зачёркнутая розница рядом с ценой уровня. Мельче и приглушена: она объясняет
   цифру, а не спорит с ней. */
.ds-product__was { margin-left: 6px; font-size: .8rem; font-weight: 400;
  color: var(--color-text-faint); text-decoration: line-through; }

/* Экран входа. Узкая колонка по центру: на этой странице одно дело — набрать номер. */
.shop-login { max-width: 460px; padding-block: var(--ds-space-4); }
.shop-login__h1 { margin: 0 0 var(--ds-space-3); font: 700 1.5rem/1.2 var(--font-head); }
.shop-login__lead { margin: 0 0 var(--ds-space-4); color: var(--color-text-secondary);
  line-height: 1.55; }
.shop-login__msg { margin: 0 0 var(--ds-space-3); padding: 10px 12px; line-height: 1.5;
  border-left: 3px solid var(--ds-red-600); background: var(--color-surface);
  border-radius: var(--ds-radius-sm); color: var(--color-text); }
.shop-login__form { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.shop-login__lbl { font: 600 .875rem/1.3 var(--font-body); }
.shop-login__note { color: var(--color-text-secondary); }
.shop-login__code { width: 100%; max-width: 160px; padding: 10px 12px; letter-spacing: .3em;
  font: 600 1.25rem/1 var(--font-body); text-align: center;
  border: 1px solid var(--color-border); border-radius: var(--ds-radius-sm);
  background: var(--color-surface); color: var(--color-text); }
.shop-login__pd { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px;
  font-size: .82rem; line-height: 1.45; color: var(--color-text-secondary); }
.shop-login__go { margin-top: var(--ds-space-2); }
.shop-login__alt { margin-top: var(--ds-space-4); font-size: .85rem;
  color: var(--color-text-secondary); line-height: 1.55; }
.shop-login__why { margin: var(--ds-space-4) 0 0; padding-left: 18px; font-size: .875rem;
  line-height: 1.6; color: var(--color-text-secondary); }

/* «Мои заказы». Список карточек, а не таблица: на телефоне таблица из пяти колонок
   уезжает за край, а здесь у строки всего три факта — номер, стадия и состав. */
.shop-acc { padding-block: var(--ds-space-4); }
.shop-acc__h1 { margin: 0 0 var(--ds-space-3); font: 700 1.5rem/1.2 var(--font-head); }
.shop-acc__who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: var(--ds-space-4);
  background: var(--color-primary-tint); border-left: 3px solid var(--color-primary);
  border-radius: var(--ds-radius-md); }
.shop-acc__tier { font-size: .85rem; color: var(--color-text-secondary); }
.shop-acc__out { margin-left: auto; }
.shop-acc__list { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.shop-acc__row { padding: 12px 14px; border: 1px solid var(--color-border);
  border-radius: var(--ds-radius-md); background: var(--color-surface); }
.shop-acc__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.shop-acc__when { font-size: .82rem; color: var(--color-text-faint); }
.shop-acc__step { margin-left: auto; padding: 2px 8px; border-radius: 999px;
  background: var(--color-primary-tint); color: var(--color-primary);
  font: 600 .78rem/1.5 var(--font-body); }
.shop-acc__items { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; font-size: .9rem; }
.shop-acc__qty { color: var(--color-text-secondary); }
.shop-acc__sum { color: var(--color-text); font-weight: 600; }
.shop-acc__total { margin-top: 8px; font-weight: 700; }
.shop-acc__none, .shop-acc__note, .shop-acc__lk { color: var(--color-text-secondary);
  line-height: 1.6; }
.shop-acc__lk { margin-top: var(--ds-space-4); font-size: .85rem; }

/* Строка выгоды в корзине — там же, где итог, до кнопки: она объясняет сумму. */
.shop-cart__save { margin: 0 0 var(--ds-space-3); font-size: .875rem; line-height: 1.55;
  color: var(--color-text-secondary); }
.shop-cart__sum s { color: var(--color-text-faint); }

/* --- витрина глазами сотрудника (сессия 595) --- */
/* Полоса наверху страницы. Тёмная и во всю ширину: она обязана бросаться в глаза —
   менеджер, забывший про режим, покажет клиенту экран с закупочными ценами. */
.shop-staffbar { background: var(--ds-ink-900); color: #fff; font-size: .82rem; }
.shop-staffbar__in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding-block: 6px; }
.shop-staffbar__x { margin-left: auto; padding: 3px 10px; border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--ds-radius-sm); background: transparent; color: #fff;
  font: 500 .8rem/1.4 var(--font-body); cursor: pointer; }
.shop-staffbar__x:hover { background: rgba(255,255,255,.12); }

/* Служебный блок под ценой. Рамка и подпись отделяют его от того, что видит клиент. */
/* Полоса живёт ПОД карточкой, во всю ширину контейнера: в колонке цены (≈400 px)
   таблица из тринадцати колонок не помещалась и ложилась поверх характеристик
   (скрин владельца 15.09). Своя прокрутка по ширине — вторая половина того же
   лечения: ширина окна кончится всё равно, и уезжать должна ТАБЛИЦА, а не страница
   (память lk-wide-table-scrollbar-unreachable). */
.shop-staffb__tbl { overflow-x: auto; max-width: 100%; }
.shop-staffb { margin: var(--ds-space-4) 0; padding: 10px 12px;
  border: 1px dashed var(--ds-steel-600); border-radius: var(--ds-radius-md);
  background: var(--ds-plate-100); font-size: .85rem; }
.shop-staffb__h { font: 700 .75rem/1.4 var(--font-body); text-transform: uppercase;
  letter-spacing: .04em; color: var(--ds-steel-600); margin-bottom: 6px; }
.shop-staffb__tiers { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px;
  font-weight: 600; }
.shop-staffb__go { display: inline-block; margin-top: 8px; color: var(--color-primary);
  text-decoration: none; }
.shop-staffb__go:hover { text-decoration: underline; }
/* Таблица предложений приезжает из помощника продаж со своими классами (hlp-*),
   а её стили живут в наборе портала — здесь повторяем только то, без чего она
   разъезжается на публичной странице. */
.shop-staffb .tbl { width: max-content; min-width: 100%; border-collapse: collapse;
  font-size: .82rem; }
.shop-staffb .tbl th, .shop-staffb .tbl td { padding: 4px 8px; text-align: left;
  border-bottom: 1px solid var(--ds-line-200); white-space: nowrap; }
.shop-staffb .tbl .num { text-align: right; }
.shop-staffb .hlp-own { margin-bottom: 8px; }

/* Клиент, с которым менеджер пришёл на сайт (сессия 600). Его цена — крупно и первой
   строкой служебного блока: это та цифра, которую он сейчас называет в трубку. */
.shop-staffb__mine { margin-bottom: 8px; font-size: 1rem; }
.shop-staffb__mine b { font-size: 1.15rem; }
.shop-staffb__lvl { color: var(--ds-steel-600); font-size: .82rem; }
.shop-staffb__save { color: var(--ds-steel-600); font-size: .82rem; text-decoration: line-through; }
.shop-staffbar__lvl { opacity: .75; }