/* Каталог продуктов и карточка продукта (агент pubcat). Язык v10: тёмный текст на белом, цвет раздела
   (--tone, зелёный) — только у ссылок, текущих пунктов и выбранных чипов; волосяные линии, как в списке
   новостей; фото упаковок на студийной подложке; радиус 3 px только у кнопок, полей и чипов.
   Разделы: список (поиск, фильтры, панель на телефоне, сетка) · карточка (галерея, сведения, секции,
   характеристики, документы) · полноэкранный просмотр (он же на карточке услуги). */

/* ---------- список: раскладка ---------- */
.catalog { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.catalog__search { display: flex; gap: 8px; }
.catalog__search input {
  flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid rgba(24, 33, 43, .3);
  border-radius: var(--radius); background: #fff; font-size: 16px; color: var(--ink);
}
.catalog__search input::placeholder { color: var(--muted); opacity: 1; }
.catalog__search input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.catalog__search .button { min-height: 44px; }

.catalog__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.catalog__toggle { display: none; gap: 8px; }
.catalog__toggle svg { transition: transform .2s; }
.catalog__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.catalog__toggle-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius); background: var(--tone); color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
.catalog__toggle:hover .catalog__toggle-count { background: #fff; color: var(--ink); }
/* на тач-экранах :hover «залипает» после нажатия — кнопка остаётся контурной, раскрытие видно по стрелке */
@media (hover: none) {
  .catalog__toggle:hover { background: transparent; border-color: rgba(24, 33, 43, .3); color: var(--ink); }
  .catalog__toggle:hover .catalog__toggle-count { background: var(--tone); color: #fff; }
}
.catalog__sort { display: flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; }
.catalog__sort label { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
.catalog__sort select {
  min-width: 0; min-height: 40px; padding: 0 34px 0 12px; border: 1px solid rgba(24, 33, 43, .3); border-radius: var(--radius);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2318212B' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-size: 15px; font-weight: 500; color: var(--ink); -webkit-appearance: none; appearance: none; cursor: pointer;
}
.catalog__sort select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.catalog__count { font-size: 15px; color: var(--muted); }

/* ---------- фильтры ---------- */
.filter { min-width: 0; margin: 0; padding: 0; border: 0; }
.filter + .filter { margin-top: 28px; }
.filter__title { display: block; float: none; width: 100%; margin: 0 0 10px; padding: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.filter__link, .filter__option { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 15px; line-height: 1.4; color: var(--ink); }
.filter__link:hover .filter__label { color: var(--tone); text-decoration: underline; text-underline-offset: 3px; }
.filter__link[aria-current="page"] { color: var(--tone); font-weight: 500; }
.filter__count { flex: none; font-size: var(--fs-small); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.filter__option { justify-content: flex-start; align-items: center; gap: 10px; cursor: pointer; }
.filter__option input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--tone); cursor: pointer; }
.filter__option .filter__count { margin-left: auto; }
.filter__option:hover .filter__label { color: var(--tone); }
.filter__option:has(input:checked) { font-weight: 500; }
.filter .chips { gap: 8px; }
.chip.is-empty { color: var(--muted); }
.filter__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* с JS фильтры применяются сразу — кнопка «Показать» нужна только без него */
.js .catalog__apply { display: none; }
.js .filter__actions:not(:has(.catalog__reset)) { display: none; }

/* телефон и планшет: с JS фильтры — раскрывающаяся панель под кнопкой «Фильтры» (как аккордеон меню) */
@media (max-width: 1023px) {
  .catalog__filters { padding: 20px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .js .catalog__toggle { display: inline-flex; }
  .js .catalog__filters { display: none; }
  .js .catalog.is-open .catalog__filters { display: block; }
  .catalog__sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .catalog__sort label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .catalog__filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); }
  .catalog__filters, .js .catalog.is-open .catalog__filters { display: grid; }
  .js .catalog:not(.is-open) .catalog__filters { display: none; }
  .catalog__filters > nav { grid-row: span 3; }
  .catalog__filters > .filter + .filter { margin-top: 0; }
  .catalog__filters > fieldset.filter + fieldset.filter { margin-top: 28px; }
  .filter__actions { grid-column: 2; }
}

/* компьютер: фильтры — 3 колонки из 12 слева, поиск, счётчик, сортировка и плитки — 9 справа */
@media (min-width: 1024px) {
  .catalog { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 0 var(--gutter); align-items: start; }
  .catalog__filters { grid-column: 1 / span 3; grid-row: 1 / span 3; padding-top: 11px; }
  .catalog__search { grid-column: 4 / -1; grid-row: 1; }
  .catalog__count { grid-column: 4 / span 5; grid-row: 2; align-self: center; margin: 20px 0 24px; }
  .catalog__bar { grid-column: 9 / -1; grid-row: 2; align-self: center; margin: 20px 0 24px; }
  .catalog__results { grid-column: 4 / -1; grid-row: 3; }
  .catalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .catalog__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.catalog__results .empty-state { margin-top: 0; }

/* ---------- карточка продукта (раскладку detail-* использует и карточка услуги) ---------- */
.detail-crumbs { padding: 16px 0 24px; }
.detail-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
/* категория — под названием, как в плитке v10 (название → категория → описание → цена) */
.detail-cat { margin-top: 8px; font-size: 15px; }
.detail-cat a { color: var(--tone); }
.detail-cat a:hover { text-decoration: underline; text-underline-offset: 3px; }
.detail-lead { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); }
.detail-price { margin-top: 24px; font-size: 20px; font-weight: 500; line-height: 1.3; }
.detail-price .product__price-note { font-size: 15px; }
.detail-cta { margin-top: 20px; }
.detail-cta .button { min-height: 44px; padding: 0 22px; }

/* сведения (производитель, артикул, метод): строки «название — значение» с волосяными линиями, как характеристики */
.product-meta { margin-top: 32px; border-top: 1px solid var(--line); font-size: 15px; }
.product-meta__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.product-meta dt { color: var(--muted); }
.product-meta .chips { gap: 6px; }
.product-meta .chip { min-height: 32px; padding: 0 10px; }

@media (min-width: 768px) {
  .detail-crumbs { padding: 24px 0 32px; }
  .detail-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: start; }
  .detail-top--no-media { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .detail-top { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .detail-top__media { grid-column: 1 / span 6; }
  .detail-top__info { grid-column: 8 / span 5; padding-top: 4px; }
  .detail-top--no-media .detail-top__info { grid-column: 1 / span 8; }
}

/* галерея: лента с прокруткой по снимкам (свайп на телефоне без JS), миниатюры под ней */
.gallery__track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--studio); }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { position: relative; flex: 0 0 100%; display: block; aspect-ratio: 1; scroll-snap-align: start; scroll-snap-stop: always; cursor: zoom-in; }
.gallery__slide picture { display: contents; }
.gallery__slide img { width: 100%; height: 100%; object-fit: contain; }
.gallery__slide:focus-visible { outline-offset: -2px; }
.gallery__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gallery__thumb { position: relative; display: block; width: 56px; aspect-ratio: 1; background: var(--studio); }
.gallery__thumb picture { display: contents; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--tone); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.gallery__thumb:hover::after, .gallery__thumb[aria-current="true"]::after { transform: scaleX(1); }
@media (min-width: 768px) {
  .gallery__thumbs { gap: 12px; margin-top: 16px; }
  .gallery__thumb { width: 72px; }
}

/* секции карточки: заголовок слева (3 колонки из 12, как фильтры каталога), текст справа; линии как у новостей */
.detail-sections { margin-top: 48px; border-bottom: 1px solid var(--line); }
.detail-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px 0 28px; border-top: 1px solid var(--line); }
.detail-section__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.35; color: var(--ink); }
.detail-section .prose { font-size: var(--fs-body); }
@media (min-width: 768px) {
  .detail-sections { margin-top: var(--section); }
}
@media (min-width: 1024px) {
  .detail-section { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--gutter); padding: 32px 0 36px; }
  .detail-section__title { grid-column: 1 / span 3; }
  .detail-section__body { grid-column: 4 / span 7; } /* текст, таблица и документы — одна мера (~75 знаков) */
  .detail-section__body.prose { max-width: none; }
}

/* характеристики: тонкие линии, без заливки; на телефоне название над значением */
.specs { width: 100%; font-size: 15px; }
.specs th, .specs td { padding: 12px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.specs tr:first-child th, .specs tr:first-child td { padding-top: 2px; border-top: 0; }
.specs tr:last-child th, .specs tr:last-child td { padding-bottom: 0; }
.specs th { width: 40%; padding-right: 24px; font-weight: 400; color: var(--muted); }
@media (max-width: 599px) {
  .specs, .specs tbody, .specs tr, .specs th, .specs td { display: block; width: auto; }
  .specs th { padding: 12px 0 2px; font-size: var(--fs-small); }
  .specs td { padding: 0 0 12px; border-top: 0; }
  .specs tr + tr { border-top: 1px solid var(--line); }
  .specs tr:first-child th { padding-top: 0; }
  .specs tr:last-child td { padding-bottom: 0; }
}

/* документы: тип | название (ссылка) | формат и размер */
.docs__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 0; border-top: 1px solid var(--line); }
.docs__item:first-child { padding-top: 2px; border-top: 0; }
.docs__item:last-child { padding-bottom: 0; }
.docs__kind, .docs__meta { font-size: var(--fs-small); color: var(--muted); }
.docs__meta { font-variant-numeric: tabular-nums; }
.docs__title { font-weight: 500; }
.docs__title a { color: var(--tone); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.docs__title a:hover { text-decoration-color: currentColor; }
@media (min-width: 768px) {
  .docs__item { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); gap: var(--gutter); align-items: baseline; }
  .docs__kind { padding-top: 1px; }
  .docs__meta { text-align: right; white-space: nowrap; }
}

.detail-related { margin-top: var(--section); }

/* ---------- полноэкранный просмотр (<dialog>): студийный фон, фото целиком, свайп лентой ---------- */
html.is-lightbox-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--studio); color: var(--ink); }
.lightbox::backdrop { background: var(--studio); }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox__top, .lightbox__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--pad); }
.lightbox__bottom { min-height: 64px; }
.lightbox__counter { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lightbox__caption { font-size: 15px; color: var(--ink); max-width: 72ch; }
.lightbox__nav { display: flex; gap: 8px; margin-left: auto; }
.lightbox__btn { width: 44px; min-height: 44px; padding: 0; }
.lightbox__track { display: flex; overflow-x: auto; overscroll-behavior: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__track:focus-visible { outline-offset: -2px; } /* лента во всю ширину окна: рамка внутри, не под краем */
.lightbox__slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 var(--pad); scroll-snap-align: center; scroll-snap-stop: always; }
.lightbox__slide picture { display: contents; }
.lightbox__slide img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
@media (min-width: 768px) {
  .lightbox__top, .lightbox__bottom { padding: 16px 32px; }
  .lightbox__slide { padding: 0 32px; }
}