/* ============================================================
   Артемон — витрина магазина: блоки главной, плитки товаров.
   Подключается после template.css, использует его токены.
   ============================================================ */

/* На главной компонент (пустой featured-блог) не должен давать лишний воздух —
   содержимое главной собирается из модулей на позициях home-*. */
.is-home .site-main{ padding:8px 0 0; }

/* Блок главной (chrome «section») использует классы макета .home-sec/.home-head —
   стили лежат в template.css рядом с остальными секциями главной. */

/* ---------- Сетка плиток ---------- */
.tiles{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .tiles{ grid-template-columns:repeat(4,1fr); gap:16px; } }

.tile{
  display:flex; flex-direction:column; gap:8px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px; box-shadow:var(--shadow-sm);
}
/* Hover плитки живёт ТОЛЬКО в блоке @media (hover:hover) в template.css
   (подъём + тень, как в макете) — здесь дубля нет, иначе на тач-экранах
   тень «залипала» бы после касания. */

/* Фото товара. Подложка --surface — как у заглушки .ph в макете. */
.tile-photo{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1; border-radius:10px; background:var(--surface); overflow:hidden;
}
.tile-img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply; }
:root[data-theme="dark"] .tile-img{ mix-blend-mode:normal; }

/* Метки на фото */
.badges{ position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:5px; z-index:2; }
.badge{
  width:max-content; padding:3px 8px; border-radius:7px;
  font-size:11px; font-weight:700; letter-spacing:.02em; line-height:1.5;
}
.badge-new{ background:var(--badge-new, var(--ok)); color:var(--badge-new-ink, #fff); }
.badge-sale{ background:var(--badge-sale, var(--sale)); color:var(--badge-sale-ink, #fff); }
.badge-hit{ background:var(--badge-hit, var(--count-bg)); color:var(--badge-hit-ink, var(--count-ink)); }

/* Текстовая часть */
.tile-brand{
  font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tile-name{
  margin:0; font-family:var(--font); font-size:14px; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.6em;   /* как .name в макете; кламп в 3 строки — для реальных длинных имён */
}
.tile-name a{ color:var(--ink); }
.tile-name a:hover{ color:var(--accent); text-decoration:none; }
/* Чипсы фасовок В ПЛИТКЕ: механика и классы те же, что в строке каталога
   (.row-fas + .w-chip.sm.fas-chip, см. ниже блок «Чипсы фасовок»), но плитка
   узкая (2 в ряд на моб ~150–160px) — чипсы компактнее; перенос на 2-ю строку
   даёт flex-wrap базового .row-fas. Блок живёт в .tile-foot (прижат книзу),
   поэтому переменное число чипсов растёт вверх, а цена и кнопка «В корзину»
   соседних плиток остаются на одной линии. */
.tile .row-fas{ gap:5px; margin-top:0; }
.tile .row-fas .w-chip.sm{ padding:3px 8px; font-size:11.5px; }

/* Низ плитки прижат к основанию — карточки одной высоты */
.tile-foot{ margin-top:auto; display:flex; flex-direction:column; gap:9px; }
.price-row{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.price{ font-size:17.5px; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--ink); }
/* «от» — мелким внутри цены, вплотную к числу (разметка <small>от</small> из макета) */
.price small{ font-size:12.5px; font-weight:600; color:var(--muted); margin-right:1px; }
.price-old{ font-size:13.5px; color:var(--muted); text-decoration:line-through; font-variant-numeric:tabular-nums; }
.tile-out{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:11px; background:var(--bg); color:var(--muted);
  font-size:13.5px; font-weight:600; text-align:center;
}

/* Мини-корзина в шапке использует классы макета .cart-btn/.count/.cart-sum —
   стили в template.css (блок шапки). Старый вид .hdr-cart удалён. */

/* ============================================================
   КАТАЛОГ: страница категории / поиска / бренда
   Эталон — design/v2-purpur/mockup-catalog.html (закрыт 20.07.2026).
   ============================================================ */

/* ---------- Хлебные крошки (override mod_breadcrumbs) ---------- */
.crumbs{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  font-size:13px; color:var(--muted); margin:0;
}
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--accent-txt); text-decoration:underline; }
.crumbs .sep{ opacity:.55; }

/* ---------- Шапка раздела ---------- */
.shop-cat .cat-head h1{
  margin:0 0 6px;
  font-size:clamp(22px, 4vw, 30px);
  letter-spacing:-.02em; line-height:1.2;
}
.shop-cat .cat-head .cnt{ font-size:14px; color:var(--muted); font-weight:400; white-space:nowrap; }
.shop-cat .cat-desc{ margin:0 0 16px; color:var(--muted); font-size:14.5px; max-width:72ch; }
.shop-cat .cat-desc p{ margin:0 0 6px; }

/* ---------- Плитки подкатегорий ---------- */
.subcats{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  margin:0 0 18px;
}
.subcat{
  display:flex; align-items:center; gap:10px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px 13px;
  text-decoration:none; color:var(--ink);
  font-size:13.5px; font-weight:600; line-height:1.3;
  box-shadow:var(--shadow-sm);
}
.subcat svg{ width:18px; height:18px; flex:none; color:var(--accent); }

/* ---------- Раскладка: колонка фильтров слева + контент ----------
   Контейнер для @container-правил строки товара — .cat-main: ширину строкам
   задаёт колонка КОНТЕНТА (с фильтрами она уже всей страницы). Сама видимость
   колонки — через @media: это курица-и-яйцо для container query, плюс шторка
   на телефоне позиционируется fixed, чему container-type у предка мешал бы. */
.cat-layout{ display:grid; gap:16px; align-items:start; }
.cat-main{ min-width:0; container-type:inline-size; container-name:cat; }
@media (min-width:1000px){
  .cat-layout.has-filters{ grid-template-columns:242px minmax(0,1fr); }
}

/* ---------- Панель фильтров (эталон — .filters макета) ---------- */
.filters{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:4px 14px 14px;
  box-shadow:var(--shadow-sm);
  margin:0;                     /* у <form> браузерный margin-block-end:1em — грабли флекса */
}
.fgroup{ border-bottom:1px solid var(--line); padding:2px 0 12px; }
.fgroup:last-of-type{ border-bottom:none; padding-bottom:4px; }
.fgroup summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700;
  padding:11px 0 8px;
}
.fgroup summary::-webkit-details-marker{ display:none; }
.fgroup summary::after{
  content:""; width:7px; height:7px; margin-left:auto; margin-right:3px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .15s ease;
}
.fgroup[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
.fsearch{
  width:100%;
  border:1.5px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--ink);
  font:inherit; font-size:13.5px;
  padding:8px 11px;
  margin:0 0 9px;
}
.fsearch::placeholder{ color:var(--muted); }
/* ⚠️ Прокручиваемый список (бренды, страны): полоса прокрутки — ОВЕРЛЕЙНАЯ, она
   рисуется ПОВЕРХ содержимого и накрывала счётчики у правого края (юзер поймал
   на скриншоте). Лечится парой: scrollbar-gutter резервирует место под полосу,
   padding-right отодвигает от неё числа. gutter обязателен — без него у списка,
   который не прокручивается, ширина будет другая, и панель «дышала» бы. */
.flist{
  display:flex; flex-direction:column; gap:8px;
  max-height:196px; overflow:auto;
  padding:2px 10px 2px 1px;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
}
.flist.expanded{ max-height:none; }
.fitem{ display:flex; align-items:center; gap:9px; font-size:13.5px; cursor:pointer; }
.fitem[hidden]{ display:none !important; }   /* поиск по брендам прячет мимо-кассы */
.fitem input{ width:16px; height:16px; accent-color:var(--accent); margin:0; flex:none; }
/* счётчик у пункта — приглушённый серый (жёлтый занят отметками состояния) */
.fitem .cnt{ margin-left:auto; color:var(--muted); font-size:12px; }
/* пункт, дающий 0 товаров при текущих фильтрах: приглушаем через --muted,
   НЕ прячем (важно видеть, что раздел существует); выбранные не гасим —
   в шаблоне такие не получают is-off */
.fitem.is-off{ color:var(--muted); opacity:.55; cursor:default; }
.fitem.is-off input{ accent-color:var(--muted); }
.fpack-chip.is-off{ color:var(--muted); opacity:.5; cursor:default; }
.fmore{
  display:inline-block; margin-top:8px;
  border:none; background:none; padding:0;
  color:var(--accent-txt); font:inherit; font-size:13px; font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
  cursor:pointer;
}
.range{ display:flex; align-items:center; gap:8px; }
.range input{
  width:100%; min-width:0;
  border:1.5px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--ink);
  font:inherit; font-size:13.5px;
  padding:8px 10px;
}
.range .dash{ color:var(--muted); flex:none; }
.fweights{ display:flex; flex-wrap:wrap; gap:6px; }
/* чип фасовки в фильтре — label с чекбоксом внутри; выбранный — жёлтый
   (отметка состояния, как активная фасовка в строке товара) */
.fpack-chip{ cursor:pointer; position:relative; padding:4px 8px; }
.fpack-chip input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
/* число найденного внутри чипса — мельче текста и с ужатыми отступами,
   чтобы чипсы не разъезжались в лишние ряды; правило то же, что у
   .fitem .cnt (фасетный пересчёт без своей группы) */
.fpack-chip .cnt{ margin-left:3px; align-self:center; font-size:10.5px; font-weight:400; color:var(--muted); }
.fpack-chip:has(input:checked) .cnt{ color:inherit; opacity:.7; }
.fpack-chip:has(input:checked){
  background:var(--count-bg); color:var(--count-ink); border-color:var(--count-bg);
}
.fpack-chip:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.factions{ display:flex; gap:8px; margin-top:14px; }
.factions .btn{ flex:1; }

/* Кнопка «Фильтры» на телефоне (в cat-bar) */
.filters-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--line); border-radius:10px;
  background:var(--card); color:var(--ink);
  padding:8px 13px; font:inherit; font-size:13.5px; font-weight:700;
  cursor:pointer;
}
.filters-btn svg{ width:16px; height:16px; }
.filters-btn .fcount{
  min-width:19px; height:19px; padding:0 5px;
  border-radius:999px;
  background:var(--accent); color:var(--accent-ink);
  font-size:11.5px; font-weight:700; line-height:19px; text-align:center;
}

/* Чипсы применённых фильтров над списком */
.fchips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; }
.fchips-label{ font-size:13px; color:var(--muted); }
.fchips .chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent-soft); color:var(--accent-txt);
  border-radius:999px;
  padding:5px 7px 5px 13px;
  font-size:13px; font-weight:600;
}
.fchips .chip a{
  width:20px; height:20px; border-radius:50%;
  color:inherit;
  display:inline-flex; align-items:center; justify-content:center;
}
.fchips .chip a svg{ width:11px; height:11px; }
.chip-clear{
  border:none; background:none; padding:5px 4px;
  color:var(--muted); font-size:13px; font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
}

/* Шапка/низ шторки — на десктопе панель обычная колонка, эти элементы скрыты */
.fdrawer-head{ display:none; }

@media (min-width:1000px){
  .filters-btn{ display:none; }
}

/* Телефон/планшет: панель фильтров = шторка на весь экран.
   z-index 95 — выше липкой шапки (50) и меню-drawer (90). */
@media (max-width:999.98px){
  .cat-sidebar{
    position:fixed; inset:0; z-index:95;
    display:none;
    background:var(--bg);
    overflow:auto;
    padding:0 16px 16px;
  }
  .cat-sidebar.is-open{ display:block; }
  .fdrawer-head{
    position:sticky; top:0; z-index:2;
    display:flex; align-items:center; gap:10px;
    background:var(--bg);
    padding:13px 0;
    border-bottom:1px solid var(--line);
    margin-bottom:10px;
    font-size:16px; font-weight:800;
  }
  .fdrawer-x{
    margin-left:auto;
    width:34px; height:34px; flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    border:1.5px solid var(--line); border-radius:10px;
    background:var(--card); color:var(--ink);
    cursor:pointer; padding:0;
  }
  .fdrawer-x svg{ width:15px; height:15px; }
  /* «Показать/Сбросить» всегда под рукой на длинной шторке */
  .filters .factions{
    position:sticky; bottom:0;
    background:var(--card);
    padding:10px 0 2px;
    margin-top:10px;
  }
}

/* Автоприменение фильтров: пока грузится страница с новым набором —
   неброско приглушаем колонку списка, чтобы клик не казался «пустым».
   Тот же приём — у пересчёта корзины (.cart-grid, template.js «КОРЗИНА»). */
.cat-main.is-applying, .cart-grid.is-applying{ opacity:.45; pointer-events:none; transition:opacity .25s ease; }

/* ---------- Панель над списком ---------- */
.cat-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:14px;
  box-shadow:var(--shadow-sm);
}
.cat-bar .found{ font-size:14px; font-weight:600; }
.sel-label{ font-size:13px; color:var(--muted); }
.sel{
  border:1.5px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--ink);
  font:inherit; font-size:13.5px; padding:6px 9px;
  max-width:100%;
}
.view-toggle{
  margin-left:auto;
  display:inline-flex; gap:4px;
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:3px;
}
.view-toggle button{
  border:none; border-radius:7px;
  width:36px; height:32px;
  background:transparent; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.view-toggle button.active{ background:var(--accent); color:var(--accent-ink); }
.view-toggle svg{ width:17px; height:17px; }

/* Телефон: свободный flex-wrap давал рваные строки — «по N» слева, вид
   справа и зияющая пустота между ними (скрин заказчика 23.07.2026).
   Пересобираем жёстким гридом: строка 1 — [Фильтры][Найдено N],
   строка 2 — [Сортировка][по N][вид] в одну линию; селект сортировки
   тянется (1fr + min-width:0 — на 360px аккуратно ужимается), подпись
   «Сортировка» прячем (name селекту по-прежнему даёт label[for]).
   Десктоп не задет — базовый flex выше живёт от 660px. */
@media (max-width:659.98px){
  .cat-bar{
    display:grid; gap:8px 10px;
    grid-template-columns:1fr auto auto;
    grid-template-areas:
      "filters found found"
      "sort    limit view";
  }
  .cat-bar .filters-btn{ grid-area:filters; justify-self:start; }
  .cat-bar .found{ grid-area:found; justify-self:end; }
  .cat-bar .sel-label{ display:none; }
  .cat-bar [data-sort]{ grid-area:sort; width:100%; min-width:0; }
  .cat-bar [data-limit]{ grid-area:limit; }
  .cat-bar .view-toggle{ grid-area:view; margin-left:0; }
}

/* Переключение видов: свой display не должен перебивать hidden (грабли) */
.view-list[hidden], .view-grid[hidden]{ display:none !important; }
.price-old[hidden]{ display:none !important; }

/* «Цена уточняется» — товар без цены в данных (не продаём из списка) */
.price.price-ask{ font-size:13.5px; font-weight:600; color:var(--muted); }

/* ---------- Товар строкой (вид «список», по умолчанию) ---------- */
.rows{ display:flex; flex-direction:column; gap:10px; }
.row{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  padding:12px;
  align-items:center;
  box-shadow:var(--shadow-sm);
}
.row-photo{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1; border-radius:9px; background:var(--surface);
  overflow:hidden; align-self:start;
}
.row-photo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply; }
:root[data-theme="dark"] .row-photo img{ mix-blend-mode:normal; }
.row-photo .row-noimg{ width:36%; height:36%; opacity:.35; color:var(--muted); }
.row-main{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.row-main .brand{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.row-main .name{ font-size:14.5px; font-weight:600; line-height:1.35; margin:0; }
.row-main .name a{ color:var(--ink); text-decoration:none; }
.row-main .name a:hover{ color:var(--accent-txt); }
.row-main .attrs{ font-size:12.5px; color:var(--muted); }
.row-fas{ display:flex; flex-wrap:wrap; gap:6px; margin-top:3px; }
.row-buy{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:10px;
}
.row-buy .price-row{ margin-right:auto; }
/* «Код товара» — мелким приглушённым у нижнего/правого края строки:
   нужен для звонка в магазин, но не должен спорить с названием и ценой.
   Это КНOПКА КОПИРОВАНИЯ (как в ДНС): значок справа от подписи, по клику
   код уходит в буфер. Сбрасываем дефолтный вид button, вид — прежний текст. */
.row-buy .sku{
  width:100%;
  display:inline-flex; align-items:center; justify-content:flex-end; gap:5px;
  border:0; background:none; padding:0; margin:0;
  font-family:inherit; font-size:11px; color:var(--muted); opacity:.85;
  font-variant-numeric:tabular-nums; cursor:pointer;
  transition:color .15s, opacity .15s;
}
.row-buy .sku-ico{
  width:14px; height:14px; flex:none; color:var(--muted);
  transition:color .15s;
}
@media (hover:hover){
  .row-buy .sku:hover{ color:var(--accent-txt); opacity:1; }
  .row-buy .sku:hover .sku-ico{ color:var(--accent-txt); }
}
/* состояние «скопировано»: значок-галочка зелёным, текст подсказки */
.row-buy .sku.is-copied{ color:var(--ok,#2F9E63); opacity:1; }
.row-buy .sku.is-copied .sku-ico{ color:var(--ok,#2F9E63); }
@container cat (min-width:640px){
  .row{ grid-template-columns:86px 1fr auto; }
  .row-buy{
    grid-column:auto; border-top:none; padding-top:0;
    flex-direction:column; align-items:flex-end; gap:7px;
    min-width:150px; align-self:start;
  }
  .row-buy .price-row{ margin-right:0; justify-content:flex-end; }
  .row-buy .sku{ width:auto; margin-top:2px; }
}

/* Чипсы фасовок: выбранная — ЖЁЛТАЯ (отметка состояния, не действие).
   База .w-chip живёт в template.css; здесь — кнопочный вид и состояния. */
button.w-chip{ cursor:pointer; font-family:var(--font); }
.w-chip.sm{ padding:4px 11px; font-size:12.5px; font-variant-numeric:tabular-nums; }
.w-chip.active{
  background:var(--count-bg); color:var(--count-ink);
  border-color:var(--count-bg);
}

/* Сердечко «в избранное»: пустое — контур, добавленное — малиновое */
.buy-line{ display:flex; align-items:center; gap:8px; }
.fav-btn{
  width:34px; height:34px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line); border-radius:9px;
  background:var(--card); color:var(--muted);
  cursor:pointer; padding:0; text-decoration:none;
}
.fav-btn svg{ width:18px; height:18px; }
.fav-btn.is-on{ color:var(--sale); border-color:var(--sale); }

/* ---------- Пагинация + «Показать ещё» ---------- */
.pager-wrap{ margin-top:16px; display:flex; flex-direction:column; gap:10px; align-items:center; }
.shop-pager ul.pagination{
  list-style:none; display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
  margin:0; padding:0;
}
.shop-pager .page-link{
  min-width:36px; height:36px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line); border-radius:9px;
  background:var(--card); color:var(--ink);
  font-size:14px; font-weight:600; text-decoration:none;
  font-variant-numeric:tabular-nums;
}
/* текущая страница — жёлтая «мелочь»: отметка «вы здесь», не действие */
.shop-pager .active .page-link{
  background:var(--count-bg); color:var(--count-ink); border-color:var(--count-bg);
}
.shop-pager .disabled .page-link{ opacity:.45; }
/* многоточие между окнами страниц — просто текст, не кнопка */
.shop-pager .dots span{
  min-width:22px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted);
}

/* ---------- Пустые состояния ---------- */
.empty{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center;
  padding:34px 18px 30px;
}
.empty .big{
  width:66px; height:66px; border-radius:50%;
  background:var(--surface); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.empty .big svg{ width:32px; height:32px; opacity:.4; }
.empty h3{ margin:0; font-size:19px; letter-spacing:-.01em; }
.empty p{ margin:0; color:var(--muted); font-size:14px; max-width:46ch; }
.empty ul{
  margin:2px 0 0; padding:0; list-style:none;
  color:var(--muted); font-size:13.5px;
}
.empty ul li{ margin:3px 0; }
.popcats{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:4px; }
.popcat{
  border:1.5px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--ink);
  padding:7px 14px;
  font-size:13.5px; font-weight:600;
  text-decoration:none;
}

/* ---------- Отклик на наведение (только мышь — на тачах «залипает») ---------- */
@media (hover:hover){
  .row, .subcat{
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .row:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
  .subcat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--accent); }
  .w-chip, .fav-btn, .popcat, .shop-pager .page-link{
    transition:background .14s ease, color .14s ease, border-color .14s ease;
  }
  button.w-chip:hover{ border-color:var(--accent); }
  .w-chip.active:hover{ border-color:var(--count-bg); }
  .fav-btn:hover{ border-color:var(--accent); color:var(--accent-txt); }
  .fav-btn.is-on:hover{ border-color:var(--sale); color:var(--sale); }
  .popcat:hover{ border-color:var(--accent); color:var(--accent-txt); }
  .shop-pager li:not(.active):not(.disabled) .page-link:hover{ border-color:var(--accent); color:var(--accent-txt); }
  .fchips .chip a:hover{ background:var(--accent); color:var(--accent-ink); }
  .chip-clear:hover, .fmore:hover{ color:var(--accent-txt); }
  .filters-btn:hover{ border-color:var(--accent); }
  .fpack-chip:hover{ border-color:var(--accent); }
  .fpack-chip.is-off:hover{ border-color:var(--line); }   /* выключенный не зазывает */
  .fpack-chip:has(input:checked):hover{ border-color:var(--count-bg); }
}

/* ============================================================
   КАРТОЧКА ТОВАРА
   Эталон — design/v2-purpur/mockup-product.html (закрыт 21.07.2026).
   Container queries переносим как есть: контейнер — .p-shell,
   раскладка зависит от его ширины, а не от окна (грабли каталога).
   ============================================================ */
.shop-product .p-shell{ container-type:inline-size; }
/* у <form> браузерный margin-block-end:1em — те же грабли, что у фильтров */
.shop-product form.productfull{ margin:0; }

.p-panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow-sm);
}
@media (min-width:760px){ .p-panel{ padding:22px; } }

.p-grid{ display:grid; gap:20px; }
@container (min-width:700px){
  .p-grid{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:30px; align-items:start; }
}

/* ---------- Галерея ---------- */
.g-main{
  position:relative;
  aspect-ratio:1/1;
  border-radius:12px;
  background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.g-main img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply; }
.g-main .g-noimg{ width:38%; height:38%; opacity:.35; color:var(--muted); }
.g-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px; }
.g-thumb{
  aspect-ratio:1/1;
  border:1.5px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  padding:4px; cursor:pointer; overflow:hidden;
}
.g-thumb img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply; }
.g-thumb.active{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
/* белые фото товаров на серой подложке: в тёмной теме multiply не работает */
:root[data-theme="dark"] .g-main img,
:root[data-theme="dark"] .g-thumb img{ mix-blend-mode:normal; }

/* ---------- Шапка товара ---------- */
.p-info{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.p-meta{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.brand-link{
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-txt); text-decoration:none;
}
.brand-link:hover{ text-decoration:underline; }
/* Код товара на карточке = КНОПКА КОПИРОВАНИЯ (как в строке каталога .row-buy .sku).
   Сбрасываем дефолт button, вид — прежний приглушённый текст + значок справа. */
.p-sku{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:5px;
  border:0; background:none; padding:0;
  font-family:inherit; font-size:12.5px; color:var(--muted);
  font-variant-numeric:tabular-nums; cursor:pointer;
  transition:color .15s;
}
.p-sku .sku-ico{ width:14px; height:14px; flex:none; color:var(--muted); transition:color .15s; }
@media (hover:hover){
  .p-sku:hover{ color:var(--accent-txt); }
  .p-sku:hover .sku-ico{ color:var(--accent-txt); }
}
.p-sku.is-copied{ color:var(--ok,#2F9E63); }
.p-sku.is-copied .sku-ico{ color:var(--ok,#2F9E63); }
.p-title{
  margin:0; font-size:clamp(20px, 3.6cqw + 12px, 26px);
  line-height:1.25; letter-spacing:-.015em; text-wrap:balance;
}
.p-lead{ margin:2px 0 0; font-size:14.5px; line-height:1.45; color:var(--muted); }

/* Страна и класс корма — наше преимущество, крупно под названием */
.p-feats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.p-feats:has(.feat:only-child){ grid-template-columns:1fr; }
/* совсем узкий телефон: две плашки тесны, длинные страны («Франция / Россия»)
   ломались бы на каждое слово — одна колонка (скрин заказчика 23.07.2026) */
@media (max-width:380px){
  .p-feats{ grid-template-columns:1fr; }
}
.feat{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface);
  padding:10px 12px; min-width:0;
}
.feat svg{ width:22px; height:22px; flex:none; color:var(--accent-txt); }
.feat > div{ min-width:0; }
.feat i{
  display:block; font-style:normal; font-size:11.5px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em;
}
/* overflow-wrap: значение без пробелов у разделителя («Франция/Россия»)
   не переносилось и вылезало за плашку (min-width:0 контейнерам уже стоит,
   но неразрывной строке он не помогает) — разрешаем рвать где угодно */
.feat b{ display:block; font-size:14.5px; line-height:1.3; overflow-wrap:anywhere; }
.feat .klass{ color:var(--accent-txt); }

/* ---------- Выбор фасовки: «карточки весов» ----------
   .w-card — <label> со скрытым НАСТОЯЩИМ radio jshop_attr_id[1] внутри формы:
   выбор рисует CSS (:has(:checked), как чипсы фильтра фасовок), в корзину
   уходит штатным сабмитом, работает и без JS. Выбранная — ЖЁЛТАЯ: жёлтый
   у нас отмечает состояние, пурпур занят кнопками, малиновый — скидками. */
.wlabel{
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0;
}
.weights{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@container (min-width:520px){ .weights{ grid-template-columns:repeat(4,1fr); } }
.w-card{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  border:1.5px solid var(--line); border-radius:11px;
  background:var(--card); color:var(--ink);
  padding:9px 6px 8px;
  min-width:0; cursor:pointer;
}
.w-card input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.w-card .w-val{ font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.w-card .w-price{ font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.w-card:has(input:checked){
  background:var(--count-bg); color:var(--count-ink);
  border-color:var(--count-bg);
}
.w-card:has(input:checked) .w-val{ color:var(--count-ink); }
.w-card:has(input:checked) .w-price{ color:var(--count-ink); opacity:.78; }
.w-card:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }

/* прочие атрибуты и свободные поля (редкость) — простой ряд без выдумок */
.p-attr-row{ display:flex; flex-direction:column; gap:6px; }

/* ---------- Цена ---------- */
.pprice{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pprice .now{ font-size:31px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.pprice .now.ask{ font-size:20px; font-weight:700; color:var(--muted); }
.pprice .old{ font-size:16.5px; color:var(--muted); text-decoration:line-through; font-variant-numeric:tabular-nums; }
.pprice .disc{ background:var(--sale); color:#fff; font-size:12.5px; font-weight:700; border-radius:7px; padding:3px 8px; }
/* своя видимость перебивает [hidden] — страхуемся явным правилом (грабли) */
.pprice .old[hidden], .pprice .disc[hidden], .p-perkg[hidden]{ display:none !important; }
.p-perkg{ margin:-6px 0 0; font-size:13px; color:var(--muted); }
.p-perkg b{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }

/* ---------- Покупка ---------- */
.btn-lg{ padding:13px 24px; font-size:15.5px; border-radius:12px; }
.buy-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.buy-row .btn-lg{ flex:1 1 180px; }
.buy-row .fav-btn{ width:46px; height:46px; border-radius:12px; }

/* Счётчик количества: лёгкая пилюля; внутри — настоящий input name="quantity" */
.qty{
  display:inline-flex; align-items:center; gap:2px;
  border:1.5px solid var(--line); border-radius:999px;
  background:var(--card);
  padding:4px;
  flex:none;
}
.qty button{
  width:34px; height:34px; border:none; border-radius:50%;
  background:transparent; color:var(--muted);
  font:inherit; font-size:18px; font-weight:600; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.qty button:hover{ background:var(--accent-soft); color:var(--accent-txt); }
.qty button:active{ background:var(--accent); color:var(--accent-ink); }
.qty input{
  width:40px; border:0; background:transparent; color:var(--ink);
  text-align:center; font:inherit; font-weight:700; font-size:15.5px;
  font-variant-numeric:tabular-nums; padding:0;
  -moz-appearance:textfield; appearance:textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ---------- Доставка и оплата (короткий блок в правой колонке) ---------- */
.p-delivery{
  border:1px solid var(--line); border-radius:12px;
  background:var(--card);
  padding:12px 14px;
  display:flex; flex-direction:column; gap:9px;
}
.p-delivery .d-row{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; }
.p-delivery .d-row.d-more{ font-size:13px; }
.p-delivery svg{ width:19px; height:19px; flex:none; margin-top:2px; color:var(--muted); }
.p-delivery b{ font-weight:600; }
.p-delivery span{ color:var(--muted); }
.shop-product .link{ color:var(--accent-txt); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Секции: описание / характеристики / отзывы / доставка ---------- */
.section-nav{ display:flex; gap:6px; flex-wrap:wrap; margin:26px 0 4px; }
.section-nav a{
  text-decoration:none; color:var(--ink);
  font-size:13.5px; font-weight:600;
  padding:7px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
}
.section-nav a:hover{ background:var(--accent-soft); color:var(--accent-txt); }
.p-section{ margin-top:16px; scroll-margin-top:80px; }   /* якоря не ныряют под липкую шапку */
.p-section h3{ margin:0 0 10px; font-size:18.5px; letter-spacing:-.01em; }
.p-section p{ margin:0 0 10px; font-size:14.5px; max-width:70ch; }
/* ---------- Описание товара: блочная раскладка импортного HTML ----------
   Хранимый HTML описаний нам не принадлежит (перезаписывается синком с
   pet-market) — весь вид собирается ПРИ ВЫВОДЕ: artemon_desc_blocks() в
   product/product_default.php группирует benefit-секции в карточки
   (.d-grid > .d-block), метит callout/сноски, заворачивает таблицы в
   .d-tblwrap и вычищает мусор импорта. Здесь — только вид этих блоков.
   Правила ниже держат и fallback-поток (DOM-разбор не сработал: плоская
   regex-разметка .d-h/.d-sub, таблица без обёртки, инлайн-стили импорта
   живы) — на этот случай !important против инлайн-мусора. */
.jshop_prod_description{ font-size:14.5px; line-height:1.65; color:var(--ink); }
/* на всю ширину секции (перебивает 70ch у .p-section p) */
.jshop_prod_description p{ margin:0 0 13px; max-width:none; }
/* вводный абзац — чуть крупнее, задаёт тон */
.jshop_prod_description > p:first-child{ font-size:15.5px; }

/* картинки: убить фикс-ширину и float импорта — главная причина «битого»
   вида на телефоне; сверх натуральной ширины не растягиваем */
.jshop_prod_description img{
  max-width:100% !important; width:auto !important; height:auto !important;
  float:none !important;
  display:block; margin:14px auto;
  border-radius:12px;
}

/* инлайн-оранжевый (и любой другой инлайн-цвет) — в наш цвет текста:
   оранжевого в палитре нет (актуально для fallback-потока) */
.jshop_prod_description [style*="color"]{ color:var(--ink) !important; }

/* настоящие h1–h4 вне карточек (напр. «Рекомендуемая суточная норма
   кормления» перед таблицей) — серифные, как заголовки секций */
.jshop_prod_description h1,
.jshop_prod_description h2,
.jshop_prod_description h3,
.jshop_prod_description h4{
  font-family:var(--font-display);
  font-size:17px; font-weight:700; line-height:1.3;
  letter-spacing:-.01em; color:var(--ink);
  margin:24px 0 10px;
}

/* ПОДЗАГОЛОВОК СЕКЦИИ (.d-h — вешает сервер): пурпурный акцент + короткая
   фирменная полоска-маркер; работает и в карточке, и в сквозном потоке */
.jshop_prod_description .d-h{
  font-family:var(--font-display);
  font-size:16px; font-weight:700; line-height:1.35;
  letter-spacing:-.01em; color:var(--accent-txt);
  margin:24px 0 9px; padding:0; border:none; max-width:none;
}
.jshop_prod_description .d-h::before{
  content:""; display:block; width:26px; height:3px; border-radius:2px;
  background:var(--accent); margin-bottom:8px;
}
.jshop_prod_description .d-h:first-child{ margin-top:0; }

/* инлайн-<strong> внутри абзаца («Ингредиенты: Рис, …») — лейбл, не заголовок:
   просто заметно плотнее текста, размер не трогаем */
.jshop_prod_description strong,
.jshop_prod_description b{ font-weight:700; color:var(--ink); }
.jshop_prod_description a{ color:var(--accent-txt); }

/* сноски-примечания («*L.I.P.: …») — вешает сервер */
.jshop_prod_description .d-note{ font-size:12.5px; color:var(--muted); }

/* ---- сетка benefit-карточек: 1 колонка на телефоне, 2 на широкой секции
   (контейнер — .p-shell); одинокая карточка растягивается на обе ---- */
.jshop_prod_description .d-grid{ display:grid; gap:12px; margin:4px 0 18px; }
@container (min-width:760px){
  .jshop_prod_description .d-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .jshop_prod_description .d-grid > .d-block:only-child{ grid-column:1 / -1; }
}
.jshop_prod_description .d-block{
  background:var(--surface);
  border:1px solid var(--line); border-radius:14px;
  padding:16px 18px;
}
.jshop_prod_description .d-block > :last-child{ margin-bottom:0; }
.jshop_prod_description .d-block .d-h{ margin-top:0; }
.jshop_prod_description .d-block img{ margin:10px auto 6px; border-radius:10px; }

/* ---- callout: строка, которую автор описания целиком выделил болдом
   (вешает сервер); мягкая пурпурная плашка с акцентной полосой ---- */
.jshop_prod_description .d-callout{
  background:var(--accent-soft);
  border-left:4px solid var(--accent); border-radius:12px;
  padding:13px 18px; margin:4px 0 18px;
  color:var(--ink);
}
.jshop_prod_description .d-callout p{ margin:0; }
.jshop_prod_description .d-callout strong,
.jshop_prod_description .d-callout b{ font-weight:600; }

/* ---- списки: фирменные пурпурные маркеры, нумерация — кружками ---- */
.jshop_prod_description ul,
.jshop_prod_description ol{ margin:0 0 14px; padding-left:2px; list-style:none; }
.jshop_prod_description li{ position:relative; padding-left:19px; margin:0 0 7px; }
.jshop_prod_description ul li::before{
  content:""; position:absolute; left:1px; top:.5em;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
}
.jshop_prod_description ol{ counter-reset:d-ol; }
.jshop_prod_description ol li{ padding-left:28px; counter-increment:d-ol; }
.jshop_prod_description ol li::before{
  content:counter(d-ol);
  position:absolute; left:0; top:.1em;
  width:20px; height:20px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-txt);
  font-size:11.5px; font-weight:700; line-height:20px; text-align:center;
}

/* ---- таблица норм кормления: без зебры, пурпурная шапка, скругления ----
   Обёртка .d-tblwrap (вешает сервер) держит рамку и скругление углов,
   горизонтальный скролл — ВНУТРИ неё: страница вбок не едет, углы не
   «съедаются» скроллом. */
.jshop_prod_description .d-tblwrap{
  max-width:100%; margin:16px 0 20px;
  border:1px solid var(--border); border-radius:14px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--card);
}
.jshop_prod_description table{
  border-collapse:separate; border-spacing:0;
  font-size:13.5px; line-height:1.45;
  /* fallback без обёртки: скролл, рамка и скругление на самой таблице */
  display:block; width:max-content !important; max-width:100% !important;
  height:auto !important;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:16px 0 20px;
  border:1px solid var(--border); border-radius:14px;
}
.jshop_prod_description .d-tblwrap > table{
  display:table; width:max-content !important; min-width:100%; max-width:none !important;
  margin:0; overflow:visible;
  border:none; border-radius:0;
}
/* шапка: фирменная пурпурная, текст белый (в т.ч. против инлайн-цветов
   импорта в fallback-потоке — селектор сильнее [style*="color"] выше) */
.jshop_prod_description table th{
  background:var(--accent) !important;
  border:none; padding:11px 14px;
  font-size:12.5px; font-weight:600; line-height:1.35;
  text-align:center; vertical-align:middle; white-space:normal;
}
.jshop_prod_description th,
.jshop_prod_description th *,
.jshop_prod_description th [style*="color"]{ color:#fff !important; }
.jshop_prod_description table th:first-child{ text-align:left; }
/* строки: только тонкие горизонтальные линии между весами, НИКАКОЙ зебры */
.jshop_prod_description table td{
  border:none; border-top:1px solid var(--border);
  padding:10px 14px;
  text-align:center; vertical-align:middle;
  background:none !important;               /* против инлайн-фонов и зебры импорта */
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.jshop_prod_description table td:first-child{ text-align:left; font-weight:600; white-space:normal; }
.jshop_prod_description table tr:first-child td{ border-top:none; }
/* пара строк одного веса (граммы + мерные стаканы, вторую размечает сервер
   классом d-sub): границы между ними нет, пара прижата и читается одним
   блоком; строка стаканов вторична — мельче и приглушённо */
.jshop_prod_description table tr.d-sub td{
  border-top:none; padding-top:0;
  font-size:12.5px; font-weight:400; color:var(--muted);
}
.jshop_prod_description table tr.d-sub td:first-child{ font-weight:400; }
.jshop_prod_description table tr.d-sub [style*="color"]{ color:var(--muted) !important; }
.jshop_prod_description table tr:has(+ tr.d-sub) td{ padding-bottom:5px; }

/* обёртки-скроллбоксы чужого сайта (fallback-поток: DOM-зачистка не
   сработала): снять инлайновые позиции/высоты, чтобы не резали контент.
   div[class*=] — только чужие div-обёртки, саму таблицу (class="tbl-scroll"
   на боевом) не трогаем, у неё свой скролл выше */
.jshop_prod_description .mCustomScrollbar,
.jshop_prod_description .mCustomScrollBox,
.jshop_prod_description .mCSB_container,
.jshop_prod_description div[class*="tbl-scroll"]{
  position:static !important;
  width:auto !important; height:auto !important; max-height:none !important;
  margin:0 !important; padding:0 !important;
  overflow:visible !important;
}
.jshop_prod_description .mCSB_scrollTools{ display:none !important; }

.specs{ display:grid; grid-template-columns:minmax(110px,auto) 1fr; gap:0; margin:0; font-size:14px; }
.specs dt{ color:var(--muted); padding:7px 18px 7px 0; border-bottom:1px dashed var(--line); }
.specs dd{ margin:0; padding:7px 0; border-bottom:1px dashed var(--line); }
.specs dt:last-of-type, .specs dd:last-of-type{ border-bottom:none; }

/* ---------- Секция «Доставка и оплата»: карточки условий ----------
   Вместо сплошного абзаца — карточки с иконками; пороги бесплатной
   доставки — жёлтые плашки (жёлтый у нас отмечает «выгодное/состояние»),
   цены поясов пригородов — плашки на --accent-soft. */
.dlv{ display:grid; gap:10px; }
@container (min-width:700px){
  .dlv{ grid-template-columns:repeat(3,1fr); align-items:stretch; }
  .dlv-card-zones{ grid-column:1 / -1; }
}
.dlv-card{
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface);
  padding:12px 14px;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  min-width:0;
}
.dlv-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; align-self:stretch; }
.dlv-head svg{ width:19px; height:19px; flex:none; color:var(--accent-txt); }
.dlv-head b{ font-size:14.5px; font-weight:700; }
.dlv-head .dlv-badge{ margin-left:auto; }
.dlv-badge{
  display:inline-block;
  background:var(--count-bg); color:var(--count-ink);
  font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
  border-radius:8px; padding:4px 10px;
  white-space:nowrap;
}
.dlv-zones{ list-style:none; margin:0; padding:0; align-self:stretch; }
.dlv-zones li{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:13.5px; padding:6px 0;
  border-bottom:1px dashed var(--line);
}
.dlv-zones li:last-child{ border-bottom:none; }
.dlv-zones li > span{ color:var(--muted); }
.dlv-zones li > b{
  flex:none;
  background:var(--accent-soft); color:var(--accent-txt);
  font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
  border-radius:7px; padding:2px 8px;
  white-space:nowrap;
}
/* заметки в карточках: перебиваем базовый отступ .p-section p */
.p-section .dlv-note{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.5; }
.dlv-note .dlv-num{ font-weight:700; color:var(--ink); white-space:nowrap; }
.p-section .dlv-operator{ margin:10px 0 0; font-size:13.5px; color:var(--muted); }

/* ---------- Отзывы: пустое состояние — основное на старте ---------- */
.rev-empty{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  border:1px dashed var(--line); border-radius:12px;
  padding:14px 16px; background:var(--surface);
}
.rev-empty b{ font-size:15px; }
.rev-empty span{ font-size:13.5px; color:var(--muted); line-height:1.5; }

.review{
  border:1px solid var(--line); border-radius:12px;
  background:var(--card);
  padding:12px 14px; margin-bottom:10px;
}
.review .r-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:5px; }
.review .r-name{ font-weight:700; font-size:14px; }
.review .r-time{ font-size:12px; color:var(--muted); }
.review p{ margin:0; font-size:14px; }
.stars{ display:inline-flex; gap:2px; color:var(--accent); }
.stars svg{ width:14px; height:14px; }
.stars .empty{ color:var(--line); }

/* «Написать отзыв»: <details> — работает без JS, summary выглядит кнопкой */
.rev-form{ margin-top:12px; }
.rev-form summary{ list-style:none; width:max-content; cursor:pointer; }
.rev-form summary::-webkit-details-marker{ display:none; }
.rev-form form{
  margin:14px 0 0; display:flex; flex-direction:column; gap:6px;
  max-width:480px;
}
.rev-form label{ font-size:13px; font-weight:600; color:var(--muted); margin-top:6px; }
.rev-form input[type="text"], .rev-form input[type="email"],
.rev-form textarea, .rev-form select{
  width:100%;
  border:1.5px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--ink);
  font:inherit; font-size:14px;
  padding:9px 11px;
}
.rev-form button[type="submit"]{ margin-top:10px; width:max-content; }
/* Подсказка гостю «Зарегистрируйтесь, чтобы оставить отзыв» — обычная
   неброская строка со ссылкой, без плашки (по фидбеку заказчика;
   сам вход переделаем отдельно на passwordless) */
.rev-note{ margin:12px 0 0; font-size:13.5px; color:var(--muted); line-height:1.5; }
.rev-note a{ color:var(--accent-txt); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.rev-note a:hover{ text-decoration-thickness:2px; }

/* ---------- «Похожие товары» / «Недавно смотрели» ---------- */
.h-block{ margin:28px 0 12px; font-size:19px; letter-spacing:-.01em; }
.tiles-mini .tile-name{ min-height:auto; }
.tile-photo .tile-noimg{ width:36%; height:36%; opacity:.35; color:var(--muted); }

/* ---------- Липкая панель покупки (телефон) ----------
   Кнопка внутри той же формы товара — сабмитит её штатно.
   z-index 80: выше липкой шапки (50), ниже drawer'а меню (90) и фильтров (95). */
.buybar{
  display:none; align-items:center; gap:12px;
  background:var(--card);
  border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 16px rgba(20,21,24,.08);
  transition:transform .25s ease;
  z-index:80;
}
.buybar.is-hidden{ transform:translateY(120%); }
.buybar .bb-price{ display:flex; flex-direction:column; min-width:0; }
.buybar .bb-sum{ font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.buybar .bb-note{ font-size:12px; color:var(--muted); white-space:nowrap; }
.buybar .btn{ margin-left:auto; flex:none; }
@media (max-width:719px){
  .buybar{ display:flex; position:fixed; left:0; right:0; bottom:0; }
  /* под панелью странице нужен воздух, иначе подвал прячется за ней */
  body:has(.shop-product){ padding-bottom:84px; }
}

/* ---------- Отклик на наведение (только мышь) ---------- */
@media (hover:hover){
  .w-card, .g-thumb{ transition:background .14s ease, color .14s ease, border-color .14s ease; }
  .w-card:hover, .g-thumb:hover{ border-color:var(--accent); }
  .w-card:has(input:checked):hover{ border-color:var(--count-bg); }
  .buy-row .fav-btn:hover{ border-color:var(--accent); color:var(--accent-txt); }
}

/* ============================================================
   СТРАНИЦА БРЕНДОВ (manufacturer/manufacturers.php)
   Заход 2: панель фильтров СЛЕВА «как в каталоге» — раскладка и
   панель целиком на классах каталога выше (.cat-layout.has-filters,
   .cat-sidebar, .filters/.fgroup/.flist/.fitem/.fsearch/.fmore,
   шторка на телефоне). Здесь только брендовое: сетка карточек,
   логотипы, «ничего не найдено». Старые .brands-bar/.alpha/
   .bfilters/.bfrow удалены вместе с разметкой.
   ============================================================ */

/* Кнопка «Фильтры» на телефоне живёт прямо в .cat-main (своего .cat-bar
   у брендов нет) — отступ до сетки; на десктопе скрыта общим правилом. */
[data-brands] .filters-btn{ margin:0 0 12px; }

/* «Ничего не найдено» под сеткой: показывается при нуле видимых карточек
   (сервер — по GET-фильтру, дальше — JS). display не задаём — [hidden]
   прячет абзац сам, страховка не нужна. */
.bempty{ margin:14px 0 0; color:var(--muted); font-size:14px; }

/* Сетка карточек: на телефоне — авто (2 в ряд от ~330px), при видимой
   панели фильтров (≥1000px) — ровно 4 в ряд: колонка .cat-main уже
   страницы, auto-fill дал бы 5–6 тесных карточек, логотипам не хватило
   бы места. */
.bgrid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); }
@media (min-width:1000px){ .bgrid{ grid-template-columns:repeat(4,1fr); gap:14px; } }

.bcard{
  display:flex; flex-direction:column; gap:7px; align-items:flex-start;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.bcard[hidden]{ display:none !important; }   /* фильтр прячет; flex перебил бы hidden */

/* Логотип бренда: файлы из img_manufs разнокалиберные (jpg/png/gif, часть
   с белым фоном и полями) — contain на светлой плашке; multiply в светлой
   теме растворяет белые подложки jpg (тот же приём, что .tile-img), в
   тёмной блендим нормально. Битый файл JS прячет и показывает текстовую
   плашку-соседку .blogo (см. блок «СТРАНИЦА БРЕНДОВ» template.js). */
.blogo-img{
  display:block; width:100%; height:60px;
  object-fit:contain;
  padding:7px 10px;
  border-radius:10px;
  background:var(--surface);
  mix-blend-mode:multiply;
}
:root[data-theme="dark"] .blogo-img{ mix-blend-mode:normal; }
/* у обеих плашек свой display — парный [hidden] обязателен (ловушка) */
.blogo-img[hidden], .blogo[hidden]{ display:none !important; }

/* Плашка-фолбэк логотипа (бренд без файла или файл битый): длинные названия
   («Nature's Protection») в узкой карточке режем многоточием — поэтому
   block + line-height, а не flex макета. Высота = .blogo-img, чтобы низ
   карточек с логотипом и без стоял на одной линии. */
.blogo{
  display:block; width:100%; height:60px;
  line-height:60px; text-align:center;
  padding:0 10px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  border-radius:10px;
  background:var(--surface);
  font-family:Georgia, "Times New Roman", serif;
  font-size:18px; font-weight:700; letter-spacing:.02em;
  color:var(--muted);
}
.bcard .bname{ font-size:14px; font-weight:700; line-height:1.3; }
.bcard .bmeta{ font-size:12px; color:var(--muted); }

/* наведение — как у остальных карточек-ссылок каталога (.subcat) */
@media (hover:hover){
  .bcard{ transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
  .bcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); border-color:var(--accent); }
}

/* ============================================================
   КОРЗИНА (cart/cart.php)
   Эталон — mockup-cart-checkout.html, раздел 2. Слева список
   строк-карточек, справа панель итога; на телефоне строки
   складываются в карточки (грид-области), панель уходит вниз.
   Степпер — общий .qty карточки товара + модификатор .q-sm.
   ============================================================ */

/* Раскладка: панель справа только на широком экране */
.cart-grid{ display:grid; gap:14px; align-items:start; }
@media (min-width:1000px){ .cart-grid{ grid-template-columns:minmax(0,1fr) 300px; } }

/* Порог перестройки строки считается от ширины СПИСКА (контейнер),
   а не окна — как в макете: рядом с панелью список уже страницы */
.cart-list{ container-type:inline-size; display:flex; flex-direction:column; gap:10px; min-width:0; }

.citem{
  border:1px solid var(--line); border-radius:14px;
  background:var(--card); padding:12px;
  box-shadow:var(--shadow-sm);
  display:grid; gap:9px 12px;
  grid-template-columns:64px minmax(0,1fr) 34px;
  grid-template-areas:
    "ph  main del"
    "buy buy  buy";
  align-items:start;
}
.citem .ph{
  grid-area:ph; width:64px; aspect-ratio:1/1; border-radius:9px;
  background:var(--surface);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.citem .ph img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply; }
:root[data-theme="dark"] .citem .ph img{ mix-blend-mode:normal; }
.c-main{ grid-area:main; min-width:0; display:flex; flex-direction:column; gap:3px; }
.c-main .brand{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.c-main .name{ margin:0; font-size:14.5px; font-weight:600; line-height:1.35; }
.c-main .name a{ color:var(--ink); text-decoration:none; }
.c-main .name a:hover{ color:var(--accent-txt); }
.c-main .c-code{ color:var(--muted); font-weight:400; font-size:12.5px; }
/* штатные принтеры атрибутов (sprintAtributeInCart: .list_attribute > p) и
   служебные строки (код, срок доставки) — мелким приглушённым, без отступов */
.c-attrs{ font-size:12.5px; color:var(--muted); }
.c-attrs p, .c-attrs div{ margin:0; }
.c-attrs:empty{ display:none; }
.c-unit{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.c-buy{
  grid-area:buy;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:10px;
}
.c-buy .qtyval{ font-weight:700; }
.c-sum{
  margin-left:auto;
  font-size:17.5px; font-weight:800; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.c-del{ grid-area:del; justify-self:end; }
.del-btn{
  width:34px; height:34px; border-radius:9px;
  border:1.5px solid var(--line);
  background:var(--card); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.del-btn svg{ width:16px; height:16px; }
/* компактный степпер корзины (базовый .qty — из карточки товара) */
.qty.q-sm button{ width:28px; height:28px; font-size:16px; }
.qty.q-sm input{ width:34px; font-size:14px; }
/* широкий список: строка в одну линию */
@container (min-width:600px){
  .citem{
    grid-template-columns:64px minmax(0,1fr) minmax(150px,auto) 34px;
    grid-template-areas:"ph main buy del";
    align-items:center;
  }
  .c-buy{ border-top:none; padding-top:0; flex-wrap:nowrap; justify-content:flex-end; }
  .c-sum{ min-width:86px; text-align:right; }
}

/* под списком: очистка корзины и описание из настроек магазина */
.cart-aux{ font-size:13px; color:var(--muted); }
.cart-aux .cart-clear{
  color:var(--muted); text-decoration:underline; text-underline-offset:3px;
}
.cart-aux .cart-clear:hover{ color:var(--sale); }

/* Панель итога. sticky: 120px ≈ высота липкой шапки + зазор — если при
   рендере панель ныряет под шапку или зависает ниже, крутить эту цифру */
.sum-panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:12px;
  position:sticky; top:120px;
}
.sum-rows{ display:flex; flex-direction:column; gap:8px; font-size:14.5px; }
.sum-row{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.sum-row .lbl{ color:var(--muted); }
.sum-row b{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.sum-row .is-discount{ color:var(--ok); }
.sum-row.total{
  border-top:1px solid var(--line); padding-top:10px;
  font-size:17px; font-weight:800;
}
.sum-row.total b{ font-size:19px; }
.sum-note{ font-size:12.5px; color:var(--muted); margin:0; }

/* Промокод: поле + кнопка в одну строку */
.promo-row{ display:flex; gap:8px; }
.promo-row .inp{ flex:1; min-width:0; }

/* Общее поле ввода (перенесено из макета — переиспользует и checkout) */
.inp{
  width:100%;
  border:1.5px solid var(--line); border-radius:11px;
  background:var(--card); color:var(--ink);
  padding:11px 14px;
  font:inherit; font-size:15px; line-height:1.4;
}
.inp::placeholder{ color:var(--muted); }

/* пустая корзина использует общий блок .empty; своё — только ссылка на ЛК */
.cart-empty .cart-login{ font-size:13px; }
.cart-empty .cart-login a{ color:var(--accent-txt); }

@media (hover:hover){
  .citem{ transition:box-shadow .14s ease, border-color .14s ease; }
  .citem:hover{ box-shadow:var(--shadow-lift); }
  .del-btn{ transition:color .14s ease, border-color .14s ease; }
  .del-btn:hover{ color:var(--sale); border-color:var(--sale); }
}

/* ============================================================
   ТОСТ «ДОБАВЛЕНО В КОРЗИНУ» (AJAX-добавление, template.js)
   Эталон — .cart-toast из design/v2-purpur/mockup-product.html:
   карточка в правом нижнем углу (галочка + товар/фасовка/цена +
   «Оформить заказ»/«Продолжить покупки»), авто-скрытие ~4 с.
   Один на страницу, создаёт JS при первом добавлении.
   ============================================================ */
.cart-toast{
  position:fixed; right:18px; bottom:18px; z-index:110;   /* выше buybar (80) и drawer'ов (90/95) */
  width:min(340px, calc(100vw - 24px));
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lift);
  padding:14px;
  animation:ct-in .22s ease;   /* глушится глобальным prefers-reduced-motion */
}
@keyframes ct-in{ from{ opacity:0; transform:translateY(8px); } }
/* своя [hidden]-страховка: анимация/позиционирование не должны перебить скрытие */
.cart-toast[hidden]{ display:none !important; }

/* телефон: снизу по центру во всю ширину; на карточке товара — над липкой
   панелью покупки .buybar, чтобы тост её не накрывал */
@media (max-width:719px){
  .cart-toast{ right:10px; left:10px; bottom:calc(12px + env(safe-area-inset-bottom)); width:auto; }
  body:has(.shop-product) .cart-toast{ bottom:calc(92px + env(safe-area-inset-bottom)); }
}

.ct-head{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.ct-head svg{ width:20px; height:20px; color:var(--ok); flex:none; }
.ct-head b{ font-size:14.5px; color:var(--ink); }
.ct-close{
  margin-left:auto; flex:none;
  width:28px; height:28px; border-radius:8px;
  border:none; cursor:pointer;
  background:var(--surface); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
}
.ct-close svg{ width:14px; height:14px; color:currentColor; }
.ct-body{ font-size:13.5px; color:var(--muted); margin-bottom:11px; line-height:1.45; }
.ct-body .ct-name{ display:block; }
.ct-body .ct-var{ color:var(--ink); font-weight:600; }
.ct-body .ct-var[hidden]{ display:none !important; }
.ct-actions{ display:flex; gap:8px; flex-wrap:wrap; }