/* Страницы разделов и «Все товары» (inc/listing.php) по макету Figma «Перечень товаров · вариант»:
 * десктоп 134:2 (≥1024: слева подразделы и фильтры, справа таблица), планшет 139:2 (лента подразделов, таблица без колонки артикула),
 * телефон 139:273 (<640: строки-карточки, параметры чипами). Токены и шапка раздела — из catalog-page.css (.ptvc). */

.ptvl { --side: #f6f5f2; --row-line: #eeebe5; --group: #fbfaf7; --hl: #f3f7f6; --chip: #e6eeed; }
.ptvc-nav a.is-on { color: var(--link); box-shadow: inset 0 -2px 0 var(--link); }

/* заголовок */
.ptvl-head .ptvc-wrap { padding-top: 26px; padding-bottom: 22px; }
.ptvl-head .ptvc-crumbs { color: #b9cfcd; }
.ptvl-h1 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.ptvl h1 { font-size: 34px; line-height: 1.15; }
.ptvl-total { color: #b9cfcd; font-size: 15px; }
.ptvl-lead { margin-top: 10px !important; max-width: 860px; color: #dfe9e8; font-size: 15px; line-height: 1.5; }

/* подразделы лентой — планшет и телефон */
.ptvl-strip { display: none; }

/* панель */
.ptvl-panel { display: grid; grid-template-columns: 250px minmax(0, 1fr); background: #fff; border-radius: 10px; overflow: hidden; margin-bottom: 40px; }
.ptvl-side { background: var(--side); padding: 22px 14px 28px; display: flex; flex-direction: column; gap: 22px; }
.ptvl-side__t { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 -12px !important; }
.ptvl-side__t a:hover { color: var(--link); }
.ptvl-tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ptvl-tree--sub { margin: 2px 0 4px 10px; padding-left: 8px; border-left: 1px solid var(--line); }
.ptvl-tree a { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border-radius: 6px; font-size: 14px; line-height: 1.3; color: var(--ink); }
.ptvl-tree a span { flex: 1 1 auto; }
.ptvl-tree a small { color: #8a8178; font-size: 13px; }
.ptvl-tree a:hover { background: #ece9e2; }
.ptvl-tree a.is-open { font-weight: 600; }
.ptvl-tree a.is-on { background: var(--bg); color: #fff; font-weight: 600; }
.ptvl-tree a.is-on small { color: #b9cfcd; }
.ptvl-tree--sub a { font-size: 13px; padding: 6px 10px; }

.ptvl-filters { display: flex; flex-direction: column; gap: 18px; border-top: 1px solid var(--line); padding-top: 20px; }
.ptvl-f__t { font-weight: 600; font-size: 14px; margin: 0 0 10px !important; }
.ptvl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ptvl-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 1px solid #d9d4cb; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink) !important; }
.ptvl-chip small { font-weight: 400; color: #8a8178; font-size: 12px; }
.ptvl-chip:hover { border-color: var(--bg); }
.ptvl-chip.is-on { background: var(--bg); border-color: var(--bg); color: #fff !important; }
.ptvl-chip.is-on small { color: #b9cfcd; }
.ptvl-reset { font-size: 13px; font-weight: 600; color: var(--link) !important; }
.ptvl-reset[hidden] { display: none; }

/* основная колонка */
.ptvl-main { padding: 18px 22px 24px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ptvl-bar { display: flex; align-items: center; gap: 12px; min-height: 30px; }
.ptvl-count { font-weight: 600; font-size: 14px; }

/* таблица */
.ptvl-table { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ptvl-row {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) repeat(var(--cols, 0), minmax(64px, 92px)) 136px;
  align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--row-line); position: relative; background: #fff;
}
.ptvl-row:hover { background: var(--hl); }
.ptvl-row--head { padding-top: 10px; padding-bottom: 10px; background: var(--side) !important; font-size: 12px; font-weight: 600; color: var(--muted); }
.ptvl-row[hidden], .ptvl-group[hidden] { display: none; }
.ptvl-group { display: flex; align-items: baseline; gap: 10px; padding: 10px 16px; background: var(--group); border-bottom: 1px solid var(--row-line); }
.ptvl-group__t { font-family: 'Scada', Arial, sans-serif; font-weight: 700; font-size: 16px !important; line-height: 1.3; color: var(--bg); margin: 0; }
.ptvl-group__t a:hover { text-decoration: underline; }
.ptvl-group__n { font-size: 13px; color: #8a8178; }
.ptvl-group__all { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--link) !important; white-space: nowrap; }

.ptvl-th { width: 72px; height: 72px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #fff; }
.ptvl-th img { width: 100%; height: 100%; object-fit: cover; }
.ptvl-th--none { background: #f2f0eb; }
.ptvl-th--none img { width: var(--s, 44px); height: var(--s, 44px); object-fit: contain; opacity: .5; mix-blend-mode: multiply; }

.ptvl-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ptvl-name > a { font-weight: 600; font-size: 15px; line-height: 1.38; color: var(--ink); overflow-wrap: anywhere; }
.ptvl-name > a::after { content: ''; position: absolute; inset: 0; }   /* вся строка — ссылка на товар */
.ptvl-row:hover .ptvl-name > a { color: var(--bg); text-decoration: underline; text-underline-offset: 2px; }
.ptvl-sub { font-size: 13px; color: var(--muted); line-height: 1.4; }
.ptvl-sub .ptvl-sku { display: none; }
.ptvl-sub:empty { display: none; }
.ptvl-mchips { display: none; }
.ptvl-c { font-family: 'Scada', Arial, sans-serif; font-weight: 700; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.ptvl-c i { font-style: normal; color: #b9b2a8; font-weight: 400; }
.ptvl-c--sku { font-family: 'Open Sans', Arial, sans-serif; font-weight: 400; font-size: 14px; color: #3a3631; }
.ptvl-act { display: flex; justify-content: flex-end; position: relative; z-index: 1; }

/* кнопки */
.ptvl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1.5px solid var(--bg); color: var(--bg) !important; background: #fff; font-weight: 600; font-size: 14px; line-height: 1; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.ptvl-btn:hover { background: var(--bg); color: #fff !important; }
.ptvl-btn__s { display: none; }
.ptvl-btn--wa { background: #25d366; border-color: #25d366; color: #0b2416 !important; }
.ptvl-btn--wa:hover { background: #1fbe5b; border-color: #1fbe5b; color: #0b2416 !important; }
.ptvl-btn--lg { height: 48px; padding: 0 22px; font-size: 15px; }

.ptvl-empty { padding: 20px 16px; color: var(--muted); }
.ptvl-empty a { color: var(--link); font-weight: 600; }
.ptvl-empty[hidden] { display: none; }

/* не нашли */
.ptvl-help { display: flex; align-items: center; gap: 20px; padding: 18px 20px; border-radius: 8px; background: var(--tile); }
.ptvl-help > div { flex: 1 1 auto; }
.ptvl-help__t { font-family: 'Scada', Arial, sans-serif; font-weight: 700; font-size: 18px; color: #462e21; margin-bottom: 4px !important; }
.ptvl-help p:not(.ptvl-help__t) { font-size: 14px; color: #5a4a3c; line-height: 1.45; }

/* страницы списка */
.ptvl-pager { display: flex; flex-wrap: wrap; gap: 6px; }
.ptvl-pager a, .ptvl-pager span { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; border: 1px solid var(--line); }
.ptvl-pager a:hover { border-color: var(--bg); }
.ptvl-pager span { background: var(--bg); color: #fff; border-color: var(--bg); }

/* текст внизу */
.ptvl-text { background: #fff; border-radius: 10px; padding: 28px 32px; margin-bottom: 40px; color: #3a3631; font-size: 15px; line-height: 1.6; }
.ptvl-text h2 { font-family: 'Scada', Arial, sans-serif; font-weight: 700; font-size: 22px; line-height: 1.25; color: var(--ink); margin: 22px 0 8px !important; }
.ptvl-text h2:first-child { margin-top: 0 !important; }
.ptvl-text p + p { margin-top: 10px !important; }
.ptvl-guides { margin-bottom: 40px; }
.ptvl-guides__t { font-family: 'Scada', Arial, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--ink); margin: 0 0 12px !important; }
.ptvl-guides__l { display: flex; flex-wrap: wrap; gap: 8px; }
.ptvl-guides__l a { padding: 8px 14px; border: 1px solid #d9d4cb; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink) !important; }
.ptvl-guides__l a:hover { border-color: var(--bg); }

/* 1024–1199: колонки поуже */
@media (min-width: 1024px) and (max-width: 1199px) {
  .ptvl-panel { grid-template-columns: 230px minmax(0, 1fr); }
  .ptvl-row { gap: 12px; grid-template-columns: 64px minmax(0, 1fr) repeat(var(--cols, 0), minmax(60px, 84px)) 132px; }
  .ptvl-th { width: 64px; height: 64px; }
}

/* ---------- планшет ---------- */
@media (max-width: 1023px) {
  .ptvl h1 { font-size: 30px; }
  .ptvl-head .ptvc-wrap { padding-top: 22px; padding-bottom: 14px; }
  .ptvl-strip { display: block; padding: 0 0 16px; }
  .ptvl-strip__in { display: flex; gap: 8px; overflow-x: auto; padding: 0 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ptvl-strip__in::-webkit-scrollbar { display: none; }
  .ptvl-strip a { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #2b5557; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
  .ptvl-strip a small { color: #9fbcba; font-weight: 400; font-size: 12px; }
  .ptvl-strip a.is-on { background: #fff; color: var(--bg); }
  .ptvl-strip a.is-on small { color: var(--muted); }

  .ptvl-panel { display: block; margin-bottom: 24px; }
  .ptvl-side { background: #fff; padding: 18px 20px 0; gap: 0; }
  .ptvl-side__t, .ptvl-side > .ptvl-tree { display: none; }
  .ptvl-filters { border: 0; padding: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
  .ptvl-f { display: flex; align-items: center; gap: 8px; }
  .ptvl-f__t { margin: 0 !important; font-size: 13px; color: var(--muted); }
  .ptvl-side:not(:has(.ptvl-filters)) { display: none; }
  .ptvl-main { padding: 14px 20px 20px; }

  .ptvl-row { grid-template-columns: 64px minmax(0, 1fr) repeat(var(--cols-t, 0), minmax(64px, 84px)) 132px; gap: 14px; padding: 12px 14px; }
  .ptvl-row .ptvl-c--sku, .ptvl-h-sku { display: none; }
  .ptvl-th { width: 64px; height: 64px; }
  .ptvl-sub .ptvl-sku { display: inline; }
  .ptvl-btn { height: 38px; padding: 0 14px; }
  .ptvl-text { padding: 22px 24px; }
}

/* ---------- телефон ---------- */
@media (max-width: 639px) {
  /* крошки — одной строкой, листаются вбок; текущая страница — это H1 ниже */
  .ptvl-head .ptvc-crumbs { white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ptvl-head .ptvc-crumbs::-webkit-scrollbar { display: none; }
  .ptvl-head .ptvc-crumbs > a:first-child, .ptvl-head .ptvc-crumbs > a:first-child + .ptvc-sep, .ptvl-head .ptvc-crumbs > [aria-current], .ptvl-head .ptvc-crumbs > .ptvc-sep:nth-last-child(2) { display: none; }
  .ptvl h1 { font-size: 26px; }
  .ptvl-total { font-size: 14px; }
  .ptvl-lead { font-size: 14px; }
  .ptvl-strip__in { padding: 0 16px; }
  .ptvl-panel { margin: 0 -4px 20px; }
  .ptvl-side { padding: 14px 12px 0; }
  .ptvl-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ptvl-filters::-webkit-scrollbar { display: none; }
  .ptvl-f { flex: 0 0 auto; }
  .ptvl-chips { flex-wrap: nowrap; }
  .ptvl-main { padding: 12px 12px 16px; gap: 12px; }

  .ptvl-row--head { display: none; }
  .ptvl-row { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "th name" "th act"; align-items: start; gap: 6px 12px; padding: 12px; }
  .ptvl-th { grid-area: th; width: 72px; height: 72px; }
  .ptvl-name { grid-area: name; gap: 6px; }
  .ptvl-c { display: none; }
  .ptvl-mchips { display: flex; flex-wrap: wrap; gap: 6px; }
  .ptvl-mchips span { background: var(--chip); color: var(--bg); font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 4px; }
  .ptvl-act { grid-area: act; justify-content: flex-end; }
  .ptvl-btn { height: 34px; padding: 0 16px; font-size: 13px; }
  .ptvl-btn__l { display: none; }
  .ptvl-btn__s { display: inline; }
  .ptvl-group { padding: 9px 12px; flex-wrap: wrap; }
  .ptvl-group__t { font-size: 15px !important; }

  .ptvl-help { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
  .ptvl-help .ptvl-btn { height: 44px; }
  .ptvl-text { padding: 18px 16px; margin: 0 -4px 24px; }
  .ptvl-text h2 { font-size: 19px; }
}