/* ============================================================
   COS Woo Theme — каталог (archive) 1:1 с дизайном Catalog.jsx.
   Накладывает вид дизайна (.cat-*/.filters/.facet/.opt/.cat-grid)
   на РЕАЛЬНУЮ разметку нашего модуля Filter (.wpaic-filter__*).
   Данные/URL не меняем — только визуал.
   ============================================================ */

/* ---------------- ШАПКА КАТЕГОРИИ ---------------- */
.mk .cat-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 18px 0 0; font-size: 13px; color: var(--neutral-500); }
.mk .cat-crumbs a { color: var(--neutral-500); transition: color 120ms; }
.mk .cat-crumbs a:hover { color: var(--cyan-700); }
.mk .cat-crumbs .sep { color: var(--neutral-300); }
.mk .cat-crumbs .cur { color: var(--masla-navy); font-weight: 500; }

.mk .woocommerce-products-header,
.mk .cat-head { padding: 16px 0 14px; }
.mk .woocommerce-products-header__title,
.mk .cat-head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 2.2vw, 34px); letter-spacing: -0.022em; color: var(--masla-navy); margin: 0; }
.mk .cat-head .intro,
.mk .woocommerce-products-header .term-description { margin-top: 12px; font-size: 14.5px; color: var(--neutral-500); line-height: 1.55; max-width: 920px; }

/* the7-core рендерит заголовок архива как .page-title + .term-description —
   стилизуем под дизайн .cat-head (пока the7 активен; после #18 — наш head). */
.mk.cwt-catalog .page-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 2.2vw, 34px); letter-spacing: -0.022em; color: var(--masla-navy); margin: 14px 0 2px; line-height: 1.12; }
.mk.cwt-catalog .term-description { font-size: 14.5px; color: var(--neutral-500); line-height: 1.55; max-width: 920px; margin: 8px 0 4px; }
.mk.cwt-catalog .term-description p { margin: 0 0 8px; }
.mk.cwt-catalog .term-description > :last-child { margin-bottom: 0; }

/* подкатегории-чипы */
.mk .cat-subcats { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.mk .cat-subcat { display: inline-flex; align-items: center; gap: 8px; border: var(--hairline); border-radius: var(--r-pill); background: #fff; padding: 9px 16px; font-size: 14px; font-weight: 500; color: var(--masla-navy); transition: border-color 150ms, box-shadow 150ms, transform 120ms, color 150ms; text-decoration: none; }
.mk .cat-subcat:hover { border-color: transparent; box-shadow: var(--el-2); transform: translateY(-1px); color: var(--cyan-700); }
.mk .cat-subcat .n { font-size: 12px; color: var(--neutral-400); font-variant-numeric: tabular-nums; }

/* ---------------- ЛЕЙАУТ (сайдбар + грид) ---------------- */
.mk .wpaic-filter-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; padding-bottom: 24px; }
.mk .wpaic-filter-sidebar { position: sticky; top: 96px; background: transparent; border: 0; padding: 0; }
.mk .wpaic-filter-sidebar .wpaic-filter__facets { display: flex; flex-direction: column; }

/* ---------------- ФАСЕТЫ → .facet/.opt ---------------- */
.mk .wpaic-filter__section { border: 0; border-top: var(--hairline); padding: 16px 2px; margin: 0; background: transparent; }
.mk .wpaic-filter__facets > .wpaic-filter__section:first-child { border-top: 0; }
.mk .wpaic-filter__section-title { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--masla-navy); margin: 0 0 12px; padding: 0; letter-spacing: 0; line-height: 1.3; }
.mk .wpaic-filter__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.mk .wpaic-filter__item { margin: 0; padding: 0; list-style: none; }

/* чип-чекбокс → .opt с квадратом */
.mk .wpaic-filter__chip { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--r-sm); cursor: pointer; font-size: 14px; color: var(--masla-navy); transition: background 120ms; border: 0; background: transparent; width: 100%; box-sizing: border-box; text-align: left; }
.mk .wpaic-filter__chip:hover { background: var(--soft); }
.mk .wpaic-filter__chip::before { content: ""; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); flex-shrink: 0; transition: background-color 120ms, border-color 120ms; background-repeat: no-repeat; background-position: center; }
.mk .wpaic-filter__chip--active::before { background-color: var(--cyan); border-color: var(--cyan); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.mk .wpaic-filter__count { margin-left: auto; font-size: 12px; color: var(--neutral-400); font-variant-numeric: tabular-nums; }

/* текущая категория «заблокирована» как префильтр — в дизайне это крошки/заголовок, не фасет */
.mk .wpaic-filter__chip--locked,
.mk .wpaic-filter__section--prefilter { display: none !important; }

/* radio-фасеты */
.mk .wpaic-filter__radio-item { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--r-sm); cursor: pointer; font-size: 14px; color: var(--masla-navy); transition: background 120ms; }
.mk .wpaic-filter__radio-item:hover { background: var(--soft); }
.mk .wpaic-filter__radio-circle { width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--border-strong); flex-shrink: 0; transition: border 120ms; }
.mk .wpaic-filter__radio-circle.is-checked { border: 5px solid var(--cyan); }
.mk .wpaic-filter__radio-item .wpaic-filter__count { margin-left: auto; }

/* свотчи */
.mk .wpaic-swatch-item { border-radius: var(--r-sm); }
.mk .wpaic-swatch-item--active { outline: 2px solid var(--cyan); outline-offset: 1px; }

/* цена / слайдер */
.mk .wpaic-filter__price-inputs, .mk .wpaic-filter__slider-inputs { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.mk .wpaic-filter__price-min, .mk .wpaic-filter__price-max,
.mk .wpaic-filter__slider-min, .mk .wpaic-filter__slider-max { flex: 1; min-width: 0; box-sizing: border-box; border: var(--hairline); border-radius: var(--r-sm); padding: 9px 10px; font-family: var(--font-mono); font-size: 13px; color: var(--masla-navy); outline: none; background: #fff; }
.mk .wpaic-filter__price-min:focus, .mk .wpaic-filter__price-max:focus { border-color: var(--cyan); }
.mk .wpaic-filter__price-sep, .mk .wpaic-filter__slider-sep { color: var(--neutral-300); }
.mk .wpaic-filter__price-apply, .mk .wpaic-filter__slider-apply { background: var(--cyan); color: #fff; border: 0; border-radius: var(--r-sm); padding: 9px 14px; font-family: var(--font-body); font-weight: 600; font-size: 13px; cursor: pointer; transition: background 120ms; }
.mk .wpaic-filter__price-apply:hover, .mk .wpaic-filter__slider-apply:hover { background: var(--cyan-700); }

/* reset */
.mk .wpaic-filter__reset { font-size: 13px; color: var(--neutral-400); background: transparent; border: 0; cursor: pointer; transition: color 120ms; }
.mk .wpaic-filter__reset:hover { color: var(--danger); }

/* «показать ещё значений» внутри фасета */
.mk .wpaic-filter__show-more, .mk .wpaic-filter__more { font-size: 13px; font-weight: 600; color: var(--cyan-700); background: transparent; border: 0; cursor: pointer; padding: 6px 6px 2px; }

/* ---------------- ГРИД → .cat-grid (3 колонки, как в дизайне) ---------------- */
.mk.cwt-catalog .wpaic-filter__grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
.mk .wpaic-filter__grid .pc { height: 100%; }

/* загрузчик / пагинация / активные чипы */
.mk .wpaic-filter__loader { display: flex; justify-content: center; padding: 40px 0; }
.mk .wpaic-filter__spinner { width: 32px; height: 32px; border: 3px solid var(--soft-2); border-top-color: var(--cyan); border-radius: 999px; animation: cwt-spin 0.7s linear infinite; }
@keyframes cwt-spin { to { transform: rotate(360deg); } }
.mk .wpaic-filter__pagination { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px 0; }
.mk .wpaic-filter__pagination .wpaic-filter__load-more,
.mk .wpaic-filter__pagination button { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--masla-navy); border: var(--hairline-strong); border-radius: var(--r-sm); padding: 14px 28px; font-family: var(--font-body); font-weight: 600; font-size: 15px; cursor: pointer; transition: border-color 120ms, color 120ms; }
.mk .wpaic-filter__pagination button:hover { border-color: var(--cyan); color: var(--cyan-700); }
.mk .wpaic-filter__active-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mk .wpaic-filter__active-remove, .mk .wpaic-filter__chip-active { display: inline-flex; align-items: center; gap: 7px; background: var(--cyan-50); color: var(--cyan-900); border: 0; border-radius: var(--r-pill); padding: 6px 8px 6px 13px; font-size: 13px; font-weight: 600; cursor: pointer; }

/* SEO/help блок (рендерит тема) */
.mk .cat-help { background: var(--soft); border-radius: var(--r-lg); padding: 32px 36px; margin: 24px 0 8px; display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: center; }
.mk .cat-help h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.015em; color: var(--masla-navy); margin: 0 0 10px; }
.mk .cat-help p { font-size: 14px; color: var(--neutral-500); line-height: 1.6; margin: 0; }
.mk .cat-help .acts { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 1100px) {
	.mk .wpaic-filter-layout { grid-template-columns: 1fr; }
	.mk .wpaic-filter-sidebar { position: static; }
	.mk.cwt-catalog .wpaic-filter__grid { grid-template-columns: repeat(2, 1fr) !important; }
	.mk .cat-help { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.mk.cwt-catalog .wpaic-filter__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}