/*
 * tpl-list.css — Л4-list: раздел-оглавление, листинг, фильтровая посадочная.
 * GOAL_MKIND_LEMANA.md Л-§4 волна 3. Только токены Д0 (tokens.css) + общие классы мотора (motion.css:
 * .mk-tile-tilt, .mk-reveal, .mk-chip, .mk-skeleton) — своих цветов/анимаций с нуля не придумываем.
 */

/* ===================== 1. Раздел-оглавление: подзаголовок-УТП + плитки ===================== */

.mk-section-lead {
  font-size: var(--mk-text-md);
  color: var(--mk-color-text-muted);
  margin: 0 0 var(--mk-space-6);
  max-width: 62ch;
}

.mk-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: var(--mk-grid-gap);
  margin: 0 0 var(--mk-space-10);
  list-style: none;
  padding: 0;
}

.mk-section-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--mk-space-2);
  padding: var(--mk-space-5) var(--mk-space-3);
  background: var(--mk-color-bg-elevated);
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-lg);
  text-decoration: none;
  color: var(--mk-color-text);
  transition: box-shadow var(--mk-dur-base) var(--mk-ease-standard), border-color var(--mk-dur-base) var(--mk-ease-standard);
}
.mk-section-tile:hover {
  box-shadow: var(--mk-shadow-md);
  border-color: var(--mk-color-border-strong);
}
.mk-section-tile-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--mk-radius-md);
  background: var(--mk-color-bg-muted);
}
.mk-section-tile-img img { width: 100%; height: 100%; object-fit: contain; }
.mk-section-tile-icon { width: 48px; height: 48px; color: var(--mk-color-brand); }
.mk-section-tile-name {
  font-size: var(--mk-text-base);
  font-weight: var(--mk-fw-semibold);
  line-height: var(--mk-lh-tight);
}
.mk-section-tile-count {
  font-size: var(--mk-text-xs);
  color: var(--mk-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.mk-hub-products-h2 {
  font-size: var(--mk-text-lg);
  font-weight: var(--mk-fw-semibold);
  margin: var(--mk-space-4) 0 var(--mk-space-4);
  padding-top: var(--mk-space-4);
  border-top: 1px solid var(--mk-color-border);
}

/* ===================== 2. Листинг: фильтры-чипы ===================== */

.mk-facets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mk-space-5);
  align-items: flex-start;
  padding: var(--mk-space-4) 0;
  margin-bottom: var(--mk-space-2);
  border-bottom: 1px solid var(--mk-color-border);
}
.mk-facet-group { display: flex; flex-direction: column; gap: var(--mk-space-2); min-width: 0; }
.mk-facet-label {
  display: flex; align-items: center; gap: var(--mk-space-1);
  font-size: var(--mk-text-xs); font-weight: var(--mk-fw-semibold);
  color: var(--mk-color-text-muted); text-transform: uppercase; letter-spacing: 0.02em;
}
.mk-facet-label .mk-icon { width: 14px; height: 14px; }
.mk-facet-chips { display: flex; flex-wrap: wrap; gap: var(--mk-space-2); }
.mk-facet-chip {
  display: inline-flex; align-items: center; gap: var(--mk-space-1);
  padding: 6px var(--mk-space-3);
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-pill);
  background: var(--mk-color-bg);
  color: var(--mk-color-text);
  font-size: var(--mk-text-sm);
  text-decoration: none;
  white-space: nowrap;
}
.mk-facet-chip:hover { border-color: var(--mk-color-brand); color: var(--mk-color-brand); }
.mk-facet-chip[aria-pressed="true"] {
  background: var(--mk-color-brand); border-color: var(--mk-color-brand); color: var(--mk-color-text-on-brand);
}
.mk-facet-count { font-variant-numeric: tabular-nums; opacity: 0.75; font-size: var(--mk-text-xs); }

/* ===================== 3. Листинг: таблица-строки сети → сетка карточек ===================== */

.woocommerce ul.products.columns-4,
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: var(--mk-grid-gap);
  list-style: none;
  padding: 0;
  margin: var(--mk-space-2) 0 var(--mk-space-8) !important;
}
.woocommerce ul.products > li.st-prow-li { list-style: none; margin: 0 !important; width: auto !important; }
.st-loop-head { display: none; } /* заголовок таблицы-строк сети не нужен в сетке карточек */

a.st-prow {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--mk-space-4);
  background: var(--mk-color-bg-elevated);
  border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-md);
  text-decoration: none;
  color: var(--mk-color-text);
  transition: box-shadow var(--mk-dur-base) var(--mk-ease-standard), border-color var(--mk-dur-base) var(--mk-ease-standard);
}
a.st-prow:hover { box-shadow: var(--mk-shadow-md); border-color: var(--mk-color-border-strong); }
a.st-prow .c-img {
  order: 0; margin-bottom: var(--mk-space-3);
  /* width:100% обязателен: без него flex-stretch вычисляет ширину через content-based flex-basis
   * (авто по главной оси column-флекса), а это у части товаров даёт реальную высоту/ширину от
   * intrinsic-размера img, который сеть иногда заявляет через sizes="46px" (старая строка-таблица,
   * без WP "sizes=auto") — плитка схлопывается в 46×46 с мелкой иконкой (гейт п.2, найдено через
   * getBoundingClientRect: boxW=46 vs 196 у карточек без этого бага). width:100% рвёт эту
   * циклическую зависимость — размер плитки больше не зависит от intrinsic-размера фото. */
  width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: var(--mk-radius-sm); background: var(--mk-color-bg-muted);
}
/* !important: у части товаров без фото (АЗДФ, плиты составные) сетевой img приходит с
 * inline-атрибутами width/height=46 (sizes="46px" заточен под строку-таблицу, не карточку) —
 * внешний CSS без !important их не перебивает, плитка остаётся пустой с мелкой иконкой (гейт п.2). */
a.st-prow .c-img img {
  width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important;
  object-fit: contain !important;
}
/* Заглушка одного размера, если фото нет вовсе (сеть отдаёт woocommerce-placeholder) — фон
 * .c-img уже нейтральный (--mk-color-bg-muted), просто не даём плейсхолдеру съехать в угол. */
a.st-prow .c-img img.woocommerce-placeholder { opacity: 0.35; }
a.st-prow .c-name {
  order: 1; font-size: var(--mk-text-sm); font-weight: var(--mk-fw-semibold);
  line-height: var(--mk-lh-normal); margin-bottom: var(--mk-space-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Данные (get_the_title) не трогаем — только отображение: первая буква визуально заглавная (гейт п.1). */
a.st-prow .c-name::first-letter { text-transform: uppercase; }
a.st-prow .c-d, a.st-prow .c-steel, a.st-prow .c-gost {
  order: 2; font-size: var(--mk-text-xs); color: var(--mk-color-text-muted); margin-right: var(--mk-space-2);
}
a.st-prow .c-d:has(.is-empty), a.st-prow .c-steel:has(.is-empty), a.st-prow .c-gost:has(.is-empty) { display: none; }
a.st-prow .c-price {
  order: 3; margin-top: auto; padding-top: var(--mk-space-3);
  font-size: var(--mk-text-md); font-weight: var(--mk-fw-semibold); color: var(--mk-color-brand);
}
a.st-prow .c-btn {
  order: 4; margin-top: var(--mk-space-2); align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; box-sizing: border-box;
  padding: 0 var(--mk-space-4); border-radius: var(--mk-radius-control);
  font-size: var(--mk-text-sm); font-weight: var(--mk-fw-semibold);
}
/* Фон кнопки задаёт сеть (--cta, оранжевый бренд, !important) — на нём тёмный текст из
 * mk-color-brand-active давал контраст <4,5:1 (гейт п.3). Белый текст поверх оранжевого проходит
 * WCAG AA при --cta темнее #e0a000; если бренд когда-то станет светлее — проверить руками. */
a.st-prow .c-btn { color: #fff !important; }

/* лёгкий 3D-поворот карточки при наведении (Л-§3.7: только transform) — класс добавляет tpl-list.js,
   поворот считает общий design/motion.js (.mk-tile-tilt уже используется в мегаменю Д1) */
.woocommerce ul.products > li.st-prow-li.mk-tile-tilt { perspective: 700px; }
.woocommerce ul.products > li.st-prow-li.mk-tile-tilt a.st-prow { transform-style: preserve-3d; }

/* ===================== 3.0 «Другие стандарты раздела» (чужой mu-plugin) — чипы Д0 (гейт п.3) ===================== */

.mk-hubs ul {
  columns: initial !important; padding-left: 0 !important; list-style: none !important;
  display: flex !important; flex-wrap: wrap !important; gap: var(--mk-space-2) !important; margin: 0 !important;
}
.mk-hubs ul li { margin: 0 !important; }
.mk-hubs ul li a {
  display: inline-flex; align-items: center; gap: var(--mk-space-1);
  padding: 6px var(--mk-space-3); border: 1px solid var(--mk-color-border);
  border-radius: var(--mk-radius-pill); background: var(--mk-color-bg); color: var(--mk-color-text);
  text-decoration: none; font-size: var(--mk-text-sm);
}
.mk-hubs ul li a:hover { border-color: var(--mk-color-brand); color: var(--mk-color-brand); }

/* ===================== 3.1 SEO-текст сети под листингом — не стена (гейт п.5) ===================== */

.mk-seo-h2 {
  font-size: var(--mk-text-lg);
  font-weight: var(--mk-fw-semibold);
  margin: var(--mk-space-6) 0 var(--mk-space-3);
  max-width: 75ch;
}
.mk-seo-p {
  max-width: 75ch;
  margin: 0 0 var(--mk-space-3);
  line-height: var(--mk-lh-normal);
  color: var(--mk-color-text);
}

/* ===================== 4. «Показать ещё» + skeleton ===================== */

.mk-show-more { display: block; margin: var(--mk-space-6) auto 0; }
nav.woocommerce-pagination[hidden] { display: none; }
.mk-skeleton-card { min-height: 236px; border-radius: var(--mk-radius-md); list-style: none; }

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products > li.st-prow-li.mk-tile-tilt { perspective: none; }
}

/* ===================== 5. Мобильная раскладка (SPEC: допуск ±10% от 1440) ===================== */

@media (max-width: 782px) {
  .mk-section-grid { grid-template-columns: repeat(2, 1fr); }
  .woocommerce ul.products.columns-4,
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .mk-facets { gap: var(--mk-space-4); }
}

/* Сетевой @media(max-width:640px) (не мой файл) возвращает .st-prow в строку-таблицу
 * (flex-wrap, c-img:48px, c-btn margin-left:auto) — на карточке это сталкивает «Подробнее» с
 * ценой (гейт п.1). Отбиваем те же селекторы с !important, печатаем файл после сетевого —
 * в карточке остаётся колонка. */
@media (max-width: 640px) {
  .woocommerce ul.products > li.st-prow-li a.st-prow {
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: stretch !important; gap: 0 !important;
  }
  .st-prow .c-img { flex: 0 0 auto !important; width: 100% !important; }
  .st-prow .c-name { flex: 0 0 auto !important; }
  .st-prow .c-price { flex: 0 0 auto !important; }
  .st-prow .c-btn {
    flex: 0 0 auto !important; margin-left: 0 !important; width: 100% !important;
  }
}