/* Плитки категорий, карточки товаров, страницы каталога, категории, подборки и поиска. Основа (токены, кнопки, поля, сетка) — в main.css. */

/* ───────── плитки категорий ───────── */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 4px; color: var(--c-ink); text-decoration: none; }
.tile__media { display: block; aspect-ratio: 1; border-radius: var(--r-m); overflow: hidden; background: var(--c-primary-soft); margin-bottom: 8px; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tile:hover .tile__media img { transform: scale(1.04); }
.tile__art { display: grid; place-items: center; height: 100%; color: var(--c-leaf); }
.tile__art .icon { width: 38%; height: 38%; stroke-width: 1; }
/* название всегда в две строки по высоте: плитки в ряду одной высоты */
.tile__name {
  font: 600 clamp(1.25rem, 2.4vw, 1.6rem)/1.1 var(--f-display); overflow-wrap: anywhere; min-height: 2.2em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile:hover .tile__name { color: var(--c-primary); }
.tile__count { font-size: .85rem; color: var(--c-muted); }
.tile-group { display: grid; align-content: start; gap: 10px; }

/* ul.chips — специфичнее, чем ul[role="list"] из main.css (иначе обнуляются отступы) */
ul.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; list-style: none; padding: 0; }
/* на телефоне чипы — одна строка с прокруткой, чтобы товары были на первом экране;
   край следующей плашки виден у правого края экрана */
@media (max-width: 719px) {
  ul.chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter, 16px)); padding-inline: var(--gutter, 16px); scroll-padding-inline: var(--gutter, 16px); scroll-snap-type: x proximity; }
  ul.chips::-webkit-scrollbar { display: none; }
  ul.chips > li { flex: none; scroll-snap-align: start; }
}
ul.chips.chips--wrap { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
.chips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface);
  color: var(--c-ink); text-decoration: none; font-size: .92rem; font-weight: 600;
}
.chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.chip__n { color: var(--c-muted); font-weight: 500; }
ul.chips.chips--small { margin-top: 0; }
.chip--more { color: var(--c-primary); background: var(--c-primary-soft); border-color: transparent; cursor: pointer; }

/* ───────── заголовок списка: описание и подкатегории ───────── */
.page-head--list .page-lead { margin-top: 12px; }
.subcats { margin-top: 16px; }
@media (min-width: 960px) { .subcats { margin-top: 24px; } }
.subcats ul.chips { margin-top: 0; }
/* флажок «Показать все» визуально скрыт, но доступен с клавиатуры (пробел) */
.subcats__toggle { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.subcats__more, .subcats__hide { display: none; }
.subcats:has(.subcats__toggle:focus-visible) .chip--more { outline: 3px solid var(--c-focus); outline-offset: 2px; }
@media (max-width: 719px) { .subcats__toggle { display: none; } }
@media (min-width: 720px) {
  .subcats--fold .subcats__more { display: list-item; }
  .subcats--fold .is-extra { display: none; }
  .subcats__toggle:checked + .subcats__list .is-extra, .subcats__toggle:checked + .subcats__list .is-mid { display: list-item; }
  .subcats__toggle:checked + .subcats__list .subcats__show { display: none; }
  .subcats__toggle:checked + .subcats__list .subcats__hide { display: inline; }
}
@media (min-width: 720px) and (max-width: 1023px) { .subcats--fold .is-mid { display: none; } }

/* ───────── «Выбрать по задаче»: плитки подборок ───────── */
.catalog-sets { margin-bottom: clamp(32px, 5vw, 56px); }
.catalog-sets__title { font: 600 clamp(1.5rem, 3vw, 2rem)/1.1 var(--f-display); margin-bottom: 16px; }
ul.sets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { ul.sets { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } }
.sets > li { display: flex; min-width: 0; }
.set {
  position: relative; display: grid; align-content: space-between; gap: 12px; width: 100%; min-height: 112px;
  padding: 16px 48px 16px 16px; border-radius: var(--r-m); background: var(--c-primary-soft); color: var(--c-primary);
  text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease);
}
.set--new { background: var(--c-tint); color: var(--c-ink); }
.set--large { background: var(--c-surface); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line); }
.set__name { font: 600 clamp(1.3rem, 2.4vw, 1.6rem)/1.1 var(--f-display); overflow-wrap: anywhere; }
.set__count { font-size: .85rem; color: var(--c-muted); }
.set__arrow { position: absolute; right: 16px; bottom: 16px; transition: transform .2s var(--ease); }
.set:hover { background: var(--c-primary); color: #fff; }
.set:hover .set__count { color: rgb(255 255 255 / .85); }
.set:hover .set__arrow { transform: translateX(3px); }

/* ───────── под списком: гайды и подборки ───────── */
.list-more { padding-bottom: clamp(40px, 6vw, 80px); }
.list-more .posts + .list-more__title { margin-top: clamp(32px, 5vw, 48px); }
.list-more__title { font: 600 1.5rem/1.15 var(--f-display); margin-bottom: 12px; }
.list-more ul.chips { margin-top: 0; }
.chips--small .chip { font-size: .85rem; padding: 0 12px; }

/* ───────── карточки товаров ───────── */
:has(> .grid-cards) { container-type: inline-size; }
.grid-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
@container (min-width: 620px) { .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; } }
@container (min-width: 1040px) { .grid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid-cards > li { min-width: 0; display: flex; }

.card { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; }
/* Единая подложка для всех фото: светлая, фото вписано целиком (contain, 3:4 — формат большинства снимков),
   белый фон снимков растворяется в подложке через multiply — нет пёстрых белых прямоугольников. */
.card__media {
  position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-m); overflow: hidden;
  background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--c-line);
}
.card__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.card--out .card__media img { opacity: .7; }
.card:hover .card__media img { transform: scale(1.035); }
.card__badges { position: absolute; left: 8px; top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.card__body { padding: 12px 2px 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.card__title { font: 600 .95rem/1.35 var(--f-text); }
.card__title a {
  color: var(--c-ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.card:hover .card__title a { color: var(--c-primary); }
/* вся карточка — одна ссылка: название растянуто на карточку, кнопка «В корзину» поверх */
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-m); }
.card__title a:focus-visible { outline: none; }
.card:has(.card__title a:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 4px; border-radius: var(--r-m); }
.card .add-form { position: relative; z-index: 2; }
.card__badges { z-index: 0; }
.badge--hit { background: var(--c-primary); color: #fff; }
.badge--new { background: var(--c-surface); color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary-soft); }
.card__size { margin: 0; font-size: .82rem; line-height: 1.35; color: var(--c-muted); }
.card__low { margin: 0; font-size: .82rem; font-weight: 600; color: var(--c-accent-deep); }
.card__rating { display: flex; align-items: center; gap: 4px; margin: 0; font-size: .82rem; font-weight: 600; }
.card__rating .muted { font-weight: 400; }
.icon--star { width: 14px; height: 14px; color: var(--c-star); }
.card__foot { padding-top: 12px; }
.card__foot .btn { min-height: 44px; font-size: .9rem; padding-inline: .8em; }
@media (max-width: 380px) { .card__foot .btn { font-size: .85rem; } }

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: auto 0 0; }
.price__now { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price__now--sale { color: var(--c-accent-deep); }
.price__old { color: var(--c-muted); font-size: .88rem; white-space: nowrap; }
.price--lg .price__now { font-size: clamp(1.6rem, 3vw, 2rem); }
.price--lg .price__old { font-size: 1.05rem; }

/* ───────── каталог ───────── */
.catalog { display: grid; gap: 24px; padding-bottom: clamp(40px, 6vw, 80px); align-items: start; }
.catalog__main { min-width: 0; }
.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filters-toggle { flex: 1 1 auto; }
.sort { flex: 1 1 auto; position: relative; display: flex; }
.sort__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sort select {
  width: 100%; min-height: 44px; padding: 0 40px 0 16px; border: 1px solid var(--c-line); border-radius: 999px;
  background: var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%231d2922' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 20px;
  -webkit-appearance: none; appearance: none; font-size: .92rem; font-weight: 600; cursor: pointer;
}
.listing { transition: opacity .2s var(--ease); }
.listing.htmx-request { opacity: .45; pointer-events: none; }
.listing__bar { display: grid; gap: 12px; margin-bottom: 16px; }
.listing__count { color: var(--c-muted); font-size: .9rem; margin: 0; }
/* выбранные фильтры: плашки с крестиком и «Сбросить всё» */
ul.fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 16px; border-radius: 999px;
  background: var(--c-primary-soft); color: var(--c-primary); font-size: .88rem; font-weight: 600; text-decoration: none;
}
.fchip .icon { width: 16px; height: 16px; }
.fchip:hover { background: var(--c-primary); color: #fff; }
.fchips__reset { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; font-size: .88rem; font-weight: 600; }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* на телефоне строка «Фильтры · Сортировка» прилипает под шапкой */
@media (max-width: 1023px) {
  .toolbar {
    position: sticky; top: var(--header-h); z-index: 30; margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter);
    background: var(--c-bg); box-shadow: 0 1px 0 var(--c-line);
  }
}
.catalog--plain .toolbar { justify-content: flex-end; }
.catalog--plain .sort { flex: 0 1 260px; }
@media (min-width: 1024px) { .catalog.catalog--plain { grid-template-columns: minmax(0, 1fr); } }

/* фильтры: на телефоне — выезжающая панель справа */
.filters {
  position: fixed; inset: 0 0 0 auto; z-index: 70; width: min(92vw, 400px);
  display: flex; flex-direction: column; background: var(--c-surface); box-shadow: var(--shadow);
  transform: translateX(105%); visibility: hidden;
  transition: transform .3s var(--ease), visibility 0s linear .3s;
}
.filters:target, .filters.is-open { transform: none; visibility: visible; transition: transform .3s var(--ease); }
.filters__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--c-line); }
.filters__title { font: 600 1.5rem/1 var(--f-display); }
.filters__body { flex: 1; overflow-y: auto; padding: 8px 20px 20px; overscroll-behavior: contain; }
.filters__foot { display: grid; gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-line); background: var(--c-surface); }
.filters-backdrop { display: none; position: fixed; inset: 0; z-index: 65; background: rgb(29 41 34 / .35); }
.catalog:has(.filters:target) .filters-backdrop, .catalog:has(.filters.is-open) .filters-backdrop { display: block; }

.fgroup { padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.fgroup:last-child { border-bottom: 0; }
.fgroup__title { font-weight: 700; font-size: .92rem; margin-bottom: 8px; padding: 0; }
.fgroup__list { display: grid; gap: 0; }
.fgroup__more summary {
  display: inline-flex; align-items: center; min-height: 44px; list-style: none; cursor: pointer;
  color: var(--c-primary); font-weight: 600; font-size: .92rem;
}
.fgroup__more summary::-webkit-details-marker { display: none; }
.fgroup__more summary::after { content: ""; width: 8px; height: 8px; margin-left: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.fgroup__more[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.fgroup__more[open] summary { order: 2; }
.fgroup__more[open] { display: flex; flex-direction: column; }
.fgroup__hide, .fgroup__more[open] .fgroup__show { display: none; }
.fgroup__more[open] .fgroup__hide { display: inline; }
.price-range { display: flex; align-items: center; gap: 8px; }
.price-range label { flex: 1; min-width: 0; }
.price-range input {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: var(--r-s);
  background: var(--c-bg); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.price-range input::-webkit-outer-spin-button, .price-range input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: .95rem; }
.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--c-primary); cursor: pointer; }
.check__n { margin-left: auto; color: var(--c-muted); font-size: .82rem; }
.check--switch + .check--switch { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .card:hover .card__media img, .tile:hover .tile__media img, .set:hover .set__arrow { transform: none; }
}

@media (min-width: 1024px) {
  .catalog { grid-template-columns: 260px minmax(0, 1fr); gap: 48px; }
  .filters {
    position: sticky; top: calc(var(--header-h) + 20px); z-index: auto; width: auto; max-height: calc(100vh - var(--header-h) - 40px);
    transform: none; visibility: visible; transition: none; box-shadow: none; background: none;
  }
  .filters__head { padding: 0 0 12px; }
  .filters__close, .filters-toggle, .filters-backdrop { display: none !important; }
  .filters__body { padding: 0; }
  .filters__foot { padding: 16px 0 0; background: none; }
  .js .filters__foot .btn--primary { display: none; }
  .toolbar { justify-content: flex-end; }
  .sort { flex: 0 0 240px; }
}

.category-about { padding-bottom: clamp(40px, 6vw, 80px); color: var(--c-muted); }
.category-about > * { max-width: 72ch; }

/* пагинация */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 40px; }
.pager ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; }
.pager a, .pager span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 999px; text-decoration: none; color: var(--c-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pager a:hover { background: var(--c-tint); }
.pager [aria-current] { background: var(--c-primary); color: #fff; }
.pager__gap { display: grid; place-items: center; min-width: 24px; color: var(--c-muted); }
.pager__step { padding-inline: 16px !important; border: 1px solid var(--c-line); }

/* Скрытый для глаз текст (.sr-only) позиционируется абсолютно: без этого он привязывается
   к странице, а не к плашке, и в прокручиваемой ленте растягивает страницу вширь. */
.chip, .tile, .tile-group, .card { position: relative; }

/* ───────── компьютер: товары ближе к началу страницы ─────────
   Подкатегории — одна строка («Показать все» прижата вправо), сортировка — в одной строке со счётчиком. */
@media (min-width: 1024px) {
  .page-head--list { padding-block: 28px 20px; }
  .subcats { margin-top: 20px; }
  .subcats--fold .subcats__toggle:not(:checked) + .subcats__list { flex-wrap: nowrap; overflow: hidden; }
  .subcats--fold .subcats__toggle:not(:checked) + .subcats__list > li { flex: none; }
  .subcats--fold .subcats__toggle:not(:checked) + .subcats__list > .subcats__more {
    position: sticky; right: 0; margin-left: auto; padding-left: 28px;
    background: linear-gradient(90deg, transparent, var(--c-bg) 24px);
  }
  .catalog__main { position: relative; }
  .catalog__main > .toolbar { position: absolute; top: 0; right: 0; margin: 0; }
  .listing__bar { min-height: 44px; align-content: center; padding-right: 260px; }
}