/* ============================================================================
   responsive.css — ЕДИНЫЙ слой адаптивности B2B-кабинета (Блок 9, Фаза 0)
   ----------------------------------------------------------------------------
   ПРИНЦИП (канон безопасности): этот файл подключён ПОСЛЕДНИМ в AppAsset,
   поэтому его правила перебивают и локальные css, и вендорные (daterangepicker),
   НЕ редактируя исходные файлы. Старое ничего не удаляем — только кладём слой.

   ПРИЧИНА → СЛЕДСТВИЕ по каждому блоку — в комментариях.
   Брейкпоинты = стандарт Bootstrap 5 (совпадают с 4 целевыми устройствами):
     <576 телефон · ≥576 sm · ≥768 md планшет · ≥992 lg десктоп · ≥1200/1400 xl/xxl
   ДЕСКТОП (≥992) НЕ ТРОГАЕМ — там вёрстка исправна. Ниже правим только там,
   где на узких экранах и так сломано → регресса на большом мониторе нет by design.
   ============================================================================ */

/* --- 0. Брейкпоинт-переменные — единый источник правды (устраняем разнобой
         767/768/900/991/1199 из старых css). Само по себе ничего не красит. --- */
:root{
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;
}

/* --- 1. Защита от горизонтального скролла (индустриальный стандарт).
     ПРИЧИНА: медиа с жёстким width (в т.ч. legacy width="140px" на <img>)
     и вставки шире экрана выталкивают вьюпорт вбок → вся страница ездит.
     СЛЕДСТВИЕ фикса: любое медиа не превышает ширину контейнера, пропорции
     сохраняются. НЕ прячем overflow у body (это маскировка, а не решение). --- */
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }

/* --- 2. table-responsive паттерн — переиспользуемая утилита.
     ПРИЧИНА: широкие таблицы (заказы/состав заказа) не влезают в телефон.
     Включается добавлением класса .rwrap на обёртку таблицы на экранах Фазы 3;
     сейчас нигде не навязан → 0 эффекта на текущие страницы. --- */
.rwrap{ width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================================
   3. ФИКС АКТИВНЫХ ФИКС-ШИРИН — только на мобильных @media (Фаза 2, безопасно)
   ============================================================================ */

/* 3.1 Карточка товара: products.css задаёт #prodImage width/height:480px.
       ПРИЧИНА: на телефоне 480px шире экрана → скролл + обрезка фото.
       СЛЕДСТВИЕ: на <576 фото сжимается по ширине, остаётся квадратным. */
@media (max-width: 575.98px){
  #prodImage{
    width: 100%;
    max-width: 480px;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* 3.2 Пикер диапазона дат в «Заказах»: orders.css + вендор задают
       .daterangepicker{min-width:750px} (два месяца рядом).
       ПРИЧИНА: 750px абсолютным блоком шире телефона → горизонтальный скролл.
       СЛЕДСТВИЕ: на <768 календари стакаются в столбик и влезают в экран. */
@media (max-width: 767.98px){
  .daterangepicker{
    min-width: auto;
    width: auto;
    max-width: calc(100vw - 20px);
  }
  .daterangepicker .drp-calendar.left,
  .daterangepicker .drp-calendar.right{
    float: none;
    max-width: none;
    padding: 8px;
  }
}

/* ============================================================================
   4. ЭКРАННЫЕ ФИКСЫ ПЕРЕПОЛНЕНИЯ на телефоне (<576) — Фаза 3, точечно
      Замерено iframe-харнесом на 390px под ЛУИС+ (2026-07-08).
      Всё строго в @media(max-width:575.98) → десктоп/планшет НЕ трогаем.
   ============================================================================ */

/* 4.1 КОРЗИНА: .cart-row — 5 колонок в nowrap-ряд не влезают в телефон
       (price 120 + qty 120 + acts 74 + thumb 56 = 370px нес­жимаемых → скролл +82).
       СЛЕДСТВИЕ фикса: ряд переносится в 2 строки —
       [фото][название…] сверху, [цена][кол-во][🗑] снизу. */
@media (max-width: 575.98px){
  .cart-row{ flex-wrap: wrap; gap: 8px 10px; }
  .cart-info{ flex: 1 1 55%; min-width: 140px; }
  .cart-price{ order: 3; min-width: auto; }
  .cart-qty{ order: 4; }
  .cart-acts{ order: 5; margin-left: auto; }
}

/* 4.2 ЗАКАЗЫ: бейдж .freshness (icon+label+refresh = 366px + padding 18)
       на 13px шире колонки → скролл +13.
       СЛЕДСТВИЕ: на телефоне бейдж переносит «Обновить» на 2-ю строку и ужимает
       боковые отступы, влезает в ширину. */
@media (max-width: 575.98px){
  .freshness{ flex-wrap: wrap; max-width: 100%; padding-left: 8px; padding-right: 8px; }
}

/* ============================================================================
   5. КАТАЛОГ на мобиле/планшете (<992) — best-practice раскладка (Фаза 3)
      ПРИЧИНА: сейчас 6 плиток категорий (~470px) + раскрытые фильтры (~800px)
      идут простынёй ДО товаров → на телефоне товары начинаются ~1200px вниз.
      СЛЕДСТВИЕ: категории → горизонт. лента чипов (свайп, ~50px), фильтры →
      выезжающая offcanvas-панель за кнопкой «Фильтры», товары сразу под тулбаром.
      Десктоп ≥992 использует .offcanvas-lg инлайн → НЕ меняется.
   ============================================================================ */
@media (max-width: 991.98px){

  /* 5.1 Категории: плитки-стопка → горизонтальная лента чипов (Ozon/WB-паттерн) */
  .cat-tiles{
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    margin: 0 0 10px;
  }
  .cat-tiles::-webkit-scrollbar{ display: none; }
  .cat-tiles{ scrollbar-width: none; }
  .cat-tiles .m-cats{ flex: 0 0 auto; width: auto; max-width: none; padding: 0; }

  /* 🔴 1.1 FIX (бэклог MOBILE_UX): раньше скрывали только .cat-logo, но его
     КОЛОНКА-обёртка .col-xl-2 (~242px) оставалась и раздувала пилюлю (чип 274px
     при тексте 221px → текст уезжал/обрезался). Скрываем саму колонку и ужимаем
     остальные колонки чипа до содержимого → компактная текст-пилюля. */
  .cat-tiles .m-cat > div:first-child{ display: none; }
  .cat-tiles .m-cat > div{ width: auto; max-width: none; padding: 0; flex: 0 0 auto; }

  .cat-tiles .m-cat{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    padding: 9px 15px;
    border: 1px solid #e6e9ef;
    border-radius: 999px;
    background: #fff;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease;
  }
  .cat-tiles .m-cat:hover, .cat-tiles .m-cat:active{ border-color: #2c5282; background: #f4f7fb; }
  .cat-tiles .cat-logo{ display: none; }                 /* иконка-плитка не нужна в чипе */
  .cat-tiles .cat-m-title{
    width: auto;
    flex: 0 0 auto;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: #2c5282;
  }

  /* 5.2 Кнопка «Фильтры» в тулбаре */
  .cat-filt-btn{
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid #d5dae2;
    border-radius: 10px;
    background: #fff;
    font-weight: 600;
    color: #2c5282;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
  }
  .cat-filt-btn:hover{ background: #f4f7fb; border-color: #2c5282; }
  .cat-filt-btn .bi{ font-size: 16px; }

  /* 5.3 Тулбар h-filters: колонки col-lg-* на мобиле = full-width (простынёй).
         → компактный flex-ряд; бейдж свежести скрываем (обновление остатков —
         кроном; на узком экране это лишний шум). */
  .h-filters{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .h-filters > div{ width: auto !important; flex: 0 0 auto; text-align: left !important; }
  .h-filters .align-content-center{ display: none; }     /* колонка FreshnessBadge */

  /* 5.4 Выезжающая панель фильтров */
  .cat-filters-oc{ width: 84vw; max-width: 350px; }
  .cat-filters-oc .offcanvas-body{ overflow-y: auto; }
}

/* ============================================================================
   6. ПЛИТКИ КАТЕГОРИЙ — приведение к Figma-эталону (desktop ≥992)
      ПРИЧИНА «странновато»: (1) .cat-logo зажат в 62px + пустая высокая плитка →
      «места куча»; (2) .m-cat несёт класс Bootstrap .row (flex-wrap:wrap) → при
      длинном названии текст переносится ПОД фото → плитки разной высоты, каша.
      СЛЕДСТВИЕ (как в Figma): фото 72px contain (без обрезки), текст ВСЕГДА сбоку
      по центру (nowrap), одинаковая высота, чистая светлая рамка без thumbnail-
      обводки, ровные отступы. Компактно — пустоты уходят не гигантским фото, а
      ровной невысокой плиткой. Мобилку (<992) НЕ трогаем — там чипы из §5.1. --- */
@media (min-width: 992px){
  .cat-tiles .m-cat{
    flex-wrap: nowrap;                 /* текст рядом с фото, не под ним */
    align-items: center;
    gap: 16px;
    min-height: 96px;
    padding: 16px 20px;
    border: 1px solid #eceef2;         /* видимая светлая рамка (в site.css была белой) */
    background: #fff;
    border-radius: 16px;
  }
  .cat-tiles .m-cat > div:first-child{ flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
  /* box 80px c внутренним воздухом 8px → фото не касается краёв (иначе тесно-
     кадрированные снимки, напр. МПП, визуально «обрываются»). */
  .cat-tiles .cat-logo{ width: 80px; height: 80px; padding: 8px; box-sizing: border-box; }
  .cat-tiles .cat-logo img{
    width: 100%; height: 100%; object-fit: contain;
    border: 0; padding: 0; background: transparent;   /* снимаем thumbnail-рамку */
  }
  .cat-tiles .cat-m-title{ flex: 1 1 auto; width: auto; max-width: none; padding: 0; font-size: 15px; line-height: 1.35; }
}

/* ============================================================================
   7. МОБИЛЬНЫЙ ПОЛИШ ЭКРАНОВ (Блок 9, Фаза 3) — точечно, всё в @media.
      Причина→следствие у каждого блока. Десктоп (≥992/≥768) не затрагиваем.
   ============================================================================ */

/* M2: номер заказа/счёта в заголовках (.h1spt) рвался по дефису (ТХ00-⏎000158).
   ПРИЧИНА: дефис — точка мягкого переноса. СЛЕДСТВИЕ: держим номер целым везде. */
.h1spt{ white-space: nowrap; }

@media (max-width: 991.98px){
  /* M1: чипы категорий — текст по центру пилюли, без обрезки по вертикали; очень
     длинные названия усекаем многоточием → нет гигантских пилюль и «клипа» слов. */
  .cat-tiles .m-cat{ overflow: visible; max-width: 80vw; }
  .cat-tiles .cat-m-title{
    display: block;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70vw;
  }

  /* M7: в списке заказов шапка-сортировка (.oi_heads: col-md-* «Номер/Стоимость/
     Дата/Контрагент/Действия») на узком экране схлопывалась в кашу-столбик.
     ПРИЧИНА: это метафора «шапка таблицы», а на телефоне заказы — карточки.
     СЛЕДСТВИЕ: прячем шапку (карточки самодостаточны; сортировка — на десктопе). */
  .oi_heads{ display: none; }
}

@media (max-width: 767.98px){
  /* M6: карточка товара в списке — при 1–2 характеристиках высокое фото (140px) на
     первой flex-строке, а цена/кнопка переносились на вторую → огромная пустота.
     ПРИЧИНА: .prod это Bootstrap .row (flex-wrap:wrap) + высокое фото.
     СЛЕДСТВИЕ: компактная сетка — [фото 84px][инфо] сверху, цена/кнопка/лайк ниже. */
  /* ⚠️ ЗАСКОУПЛЕНО на .is-list — раньше селектор .prod_item .prod ловил ТАКЖЕ
     плитку и поиск (у них другая разметка/фото) → раздувал их фото. Теперь M6
     только для списка; плитка/поиск — своя мобилка в §10. */
  .prod_item.is-list .prod{
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 4px 12px;
    align-items: start;
    margin: 0;
  }
  .prod_item.is-list .prod > div{ width: auto; max-width: none; padding: 0; }
  .prod_item.is-list .prod{ position: relative; }
  .prod_item.is-list .prod > div:nth-child(1){ grid-row: 1; grid-column: 1; }   /* фото */
  .prod_item.is-list .prod > div:nth-child(2){ grid-row: 1; grid-column: 2; padding-right: 30px; } /* инфо (место под лайк-оверлей) */

  /* 🟠 1.3 (бэклог MOBILE_UX) — ИЕРАРХИЯ карточки товара.
     Было (M6): цена, кнопка, лайк — каждый на своей строке → длинно и «плоско».
     Стало (топ-паттерн маркетплейсов): нижний ряд = ЦЕНА слева + CTA/степпер
     справа в один флекс-ряд; лайк/сравнение — оверлеем в правый верхний угол. */
  .prod_item.is-list .prod > div:nth-child(3){          /* цена → низ, слева */
    grid-row: 2; grid-column: 1; align-self: center;
    justify-content: flex-start !important;
  }
  .prod_item.is-list .prod > div:nth-child(4){          /* кнопка/степпер → низ, справа */
    grid-row: 2; grid-column: 2; align-self: center;
    justify-content: flex-end !important;
  }
  .prod_item.is-list .prod > div:nth-child(5){          /* лайк+сравнение → оверлей угла */
    position: absolute; top: 4px; right: 2px; width: auto; z-index: 4;
  }
  .prod_item.is-list .prod .fav_item_div{ margin: 0; }
  .prod_item.is-list .prod .fav_com_icon{ display: flex; gap: 14px; }

  .prod_item.is-list .prod-logo{ width: 84px; height: 84px; }
  .prod_item.is-list .prod_logo_list{ height: 84px; }
  .prod_item.is-list .p_price{ text-align: left; }                     /* цена слева, не к правому краю */
}

/* ============================================================================
   8. ПЕРЕКЛЮЧАТЕЛЬ СПИСОК/ПЛИТКА (.view-switch) — сегмент-контрол (все ширины)
      ПРИЧИНА «странно»: разметка использует .view-switch__btn, а стилей для него
      НЕ было (только старые .b-cat-view/.cat-view) → кнопки рендерились дефолтным
      chrome браузера внутри серой пилюли.
      СЛЕДСТВИЕ: чистые кнопки-иконки; активная = белая пилюля (iOS-сегмент).

      🔴 ЕДИНСТВЕННОЕ МЕСТО ЭТИХ СТИЛЕЙ. До 07-29 их было ТРИ: здесь и инлайном
      в views/catalog/index.php и item.php — причём с расходящимися значениями
      (32×32 против 36×30, радиус 14 против 8, синий #0077FF против #2c5282).
      Побеждали инлайновые (идут позже в документе при равной специфичности),
      то есть этот блок был мёртвым кодом, а правка в нём «не применялась».
      Инлайновые копии удалены. Новые сюда, не в вид. --- */
.view-switch{
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; background: #eef2f6; border-radius: 10px; vertical-align: middle;
}
.view-switch__btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 30px; padding: 0;
  border: 0; background: transparent; border-radius: 8px;
  color: #8a919e; cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.view-switch__btn .bi{ font-size: 16px; line-height: 1; }
/* 🔴 ЦВЕТ ИКОНКИ ЗАДАЁМ НА САМОЙ ИКОНКЕ, А НЕ НАСЛЕДОВАНИЕМ ОТ КНОПКИ.
   Две мины разом, из-за которых обе иконки были ЧЁРНЫМИ и активная не отличалась
   от выключенной ничем, кроме белой пилюли:
     1) site.css:5  `* { color: #0D1017 }` попадает в <i> НАПРЯМУЮ, а прямое совпадение
        бьёт наследование при любой специфичности;
     2) site.css:88 `a { color: #0D1017 !important }` — на /catalog сегменты сделаны
        ссылками (в item.php кнопками), поэтому у ссылки нечего было и наследовать:
        `color: inherit` на иконке честно подхватывал чёрный.
   Правила ниже не зависят ни от того, ни от другого. */
.view-switch__btn .bi{ color: #8a919e; }
/* Ховер меняет не только цвет: на серой пилюле смена оттенка иконки почти не читается,
   поэтому неактивный сегмент подсвечивается полупрозрачной белой подложкой — тем же
   материалом, из которого сделан активный. Активный при наведении не «моргает». */
.view-switch__btn:hover{ background: rgba(255,255,255,.66); }
.view-switch__btn:hover .bi{ color: #2c5282; }
.view-switch__btn.is-active{
  background: #fff;
  box-shadow: 0 1px 3px rgba(13,16,23,.12);
}
.view-switch__btn.is-active .bi{ color: #2c5282; }
.view-switch__btn.is-active:hover{ background: #fff; }

/* ============================================================================
   9. УТИЛИТА .tbl-cards — таблица → карточки label:value на телефоне (<576).
      Блок 9, Фаза 3 (задачи 9.3 отгрузки / 5.2 состав заказа / 9.6 заказы).
      ----------------------------------------------------------------------------
      ПРИЧИНА: широкие таблицы (5–6 колонок) на телефоне влезают только горизонт.
      скроллом — возить вбок пальцем неудобно, это не топ-UX.
      СЛЕДСТВИЕ: любая ПРОСТАЯ таблица (без rowspan) получает класс `tbl-cards` →
      на <576 каждая строка = карточка, ячейки = строки «подпись — значение».
      КОНТРАКТ разметки (переиспользуемо, без хардкода под конкретный экран):
        • <td data-label="Цена">…       → подпись слева из data-label
        • <td class="cell-full">…        → на всю ширину без подписи (фото+название)
        • <td class="ord-idx">…          → скрывается (№ строки в карточке лишний)
        • tfoot: пустые <td> прячутся, [colspan] тянется, .ord-total-sum → вправо
      Десктоп/планшет (≥576) — прежняя таблица, by design без регресса.
      ⚠️ НЕ вешать на таблицы с rowspan (вкладка «Отгрузки» в заказе) — там ломается.
   ============================================================================ */
@media (max-width: 575.98px){
  .tbl-cards{ display: block; margin-top: 6px; }
  .tbl-cards thead{ display: none; }                  /* заголовки уходят в data-label */
  .tbl-cards tbody{ display: block; }
  .tbl-cards tbody tr{
    display: block; background: #fff;
    border: 1px solid #EDEFF0; border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px;
  }
  .tbl-cards tbody tr:hover td{ background: transparent; } /* снять hover-заливку ячеек */
  .tbl-cards tbody td{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 6px 0; border: 0; text-align: right;
  }
  .tbl-cards tbody td[data-label]::before{             /* подпись слева из data-label */
    content: attr(data-label);
    flex: 0 0 auto; text-align: left;
    font-size: 12px; font-weight: 600; color: #8A909A;
    text-transform: uppercase; letter-spacing: .02em;
  }
  .tbl-cards tbody td.ord-idx{ display: none; }         /* № строки в карточке лишний */

  /* Ячейка на всю ширину без подписи (фото+название товара) */
  .tbl-cards tbody td.cell-full{ display: block; padding: 0 0 10px; text-align: left; }
  .tbl-cards tbody td.cell-full .ord-prod{ gap: 10px; }
  .tbl-cards tbody td.cell-full .ord-prod-name{ line-height: 1.3; }

  /* Итог → компактный выделенный блок под карточками */
  .tbl-cards tfoot{ display: block; }
  .tbl-cards tfoot tr{
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    border-top: 2px solid #EDEFF0; padding: 12px 2px 2px;
  }
  .tbl-cards tfoot td{ border: 0; padding: 0; }
  .tbl-cards tfoot td:empty{ display: none; }           /* пустые ячейки итог-строки */
  .tbl-cards tfoot td[colspan]{ flex: 1 1 auto; text-align: left; }
  .tbl-cards tfoot td.ord-total-sum{ margin-left: auto; } /* сумма к правому краю */
  .tbl-cards tfoot tr.ord-sub-row{ border-top: 0; padding: 2px; }
}

/* ============================================================================
   10. МОБИЛЬНАЯ КАРТОЧКА ТОВАРА: ПЛИТКА + ПОИСК (Блок 9, план MOBILE_FIX_2026-07-09)
      ПРИЧИНА (R0): фото плитки (.prod-logo_grid 300px) и поиска (.prod-logo_search
      200px) с background-size:cover раздувались на телефоне; M6 (заскоуплен на
      .is-list) их больше не трогает → нужна СВОЯ мобилка.
      СЛЕДСТВИЕ: плитка = 2 карточки в ряд с квадратным фото; поиск = горизонтальная
      строка [72px фото][инфо]; плейсхолдер-пожарник = contain (не cover), не режется.
   ============================================================================ */
@media (max-width: 767.98px){
  /* Сравнение — функция «скоро» (is-soon, задизейблена): на телефоне это лишний
     icon, который спорит с товаром → прячем везде (список/плитка/поиск). Лайк живой — остаётся. */
  .grid_icon.is-soon, .fav_com_icon_m.is-soon{ display: none; }

  /* --- ПЛИТКА (products_grid.php, .is-grid): 2 в ряд, фото-квадрат, contain --- */
  .prod_item.is-grid .prod-logo_grid{
    height: auto; aspect-ratio: 1 / 1;
    background-size: contain; background-color: #F7F8FA;   /* мягкий фон → letterbox реального фото выглядит намеренно */
    padding: 10px;
  }
  .prod_item.is-grid .prod-href-grid{ margin-top: 10px; min-height: 0; }
  .prod_item.is-grid .cat_charact_grid{ display: none; }   /* 3 ТТХ на узкой плитке — шум, они есть в списке/карточке */
  .prod_item.is-grid .p_price-grid{ margin-top: 8px; }
  /* ИЕРАРХИЯ: цена — крупная жирная (главный якорь глаза), вторичное мельчает ниже */
  .prod_item.is-grid .m_price{ font-size: 18px; line-height: 24px; font-weight: 700; }
  .prod_item.is-grid .p_vat{ font-size: 11px; }
  /* цена и CTA — в столбик (плитка узкая), CTA компактный на всю ширину плитки */
  .prod_item.is-grid .p_price-grid + div,
  .prod_item.is-grid .row > .col-xl-6:last-child{ width: 100%; margin-top: 6px; }
  .prod_item.is-grid .bt_card, .prod_item.is-grid .bt_card_out,
  .prod_item.is-grid .calc_card, .prod_item.is-grid .calc_card_out{ width: 100%; }
  .prod_item.is-grid .bt_card input[type="button"],
  .prod_item.is-grid .bt_card_out input[type="button"]{ width: 100%; }

  /* --- ПОИСК-ОВЕРЛЕЙ (search.php, .is-search): горизонтальная строка --- */
  .prod_item.is-search .prod{
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 2px 12px; align-items: start; margin: 0;
  }
  .prod_item.is-search .prod > div{ width: auto; max-width: none; padding: 0; }
  .prod_item.is-search .prod > div:nth-child(1){ grid-row: 1 / span 2; grid-column: 1; }
  .prod_item.is-search .prod > div:nth-child(2){ grid-row: 1; grid-column: 2; }
  .prod_item.is-search .prod > div:nth-child(3){ grid-row: 2; grid-column: 2; }
  .prod_item.is-search .prod-logo_search{
    height: 72px; width: 72px;
    background-size: contain; background-color: #fff;
    padding: 6px; min-height: 0;
  }
  .prod_item.is-search .prod-href-search h5{ font-size: 15px !important; line-height: 20px; }
}


/* ============================================================================
   11. СЧЁТ ВЫБОРКИ «Найдено N товаров» (.found) — все ширины.
   Живёт ЗДЕСЬ, а не инлайном в index.php: тот же счётчик стоит на странице
   категории, и вторая копия правил разъехалась бы с первой молча — ровно так
   уже разъехались три копии стилей переключателя список/плитка (см. §8).
   Цвет числа задан НА САМОМ <b>: из-за `* { color: #0D1017 }` в site.css:5
   наследование от .found внутрь вложенного элемента не доходит.
   ========================================================================= */
.found { color: #64748b; font-size: 15px; }
.found__n {
    color: #0d1017; font-weight: 600; font-size: 16px;
    font-variant-numeric: tabular-nums;
}