/* ICE-IT catalog (archive + taxonomies) — pixel-perfect per /png/Catalog.png
 * Dependencies: tokens.css (design tokens), components.css (card, grid, pager).
 * Page-level layout + filters sidebar + toolbar live here.
 */

.ice-catalog-page {
  background: transparent;
  padding-bottom: clamp(32px, 4vw, 64px);
}

body.post-type-archive-iceit_product,
body.tax-iceit_product_cat,
body.tax-iceit_product_brand {
  background: #f8fafc;
}

body.post-type-archive-iceit_product .iceit-main,
body.tax-iceit_product_cat .iceit-main,
body.tax-iceit_product_brand .iceit-main,
body.search .iceit-main {
  padding-top: 0;
}

/* Catalog search bar (top of page, above title) */
.ice-catalog-search {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center;
  gap: var(--ice-s-3);
  background: #fff; border: 1px solid var(--ice-line); border-radius: 12px;
  padding: var(--ice-s-2) var(--ice-s-2) var(--ice-s-2) var(--ice-s-3);
  margin: var(--ice-s-3) 0 var(--ice-s-5);
  box-shadow: 0 1px 2px rgba(14,26,51,.04);
}
.ice-catalog-search input[type="search"] {
  border: 0; padding: 10px 0; font-size: var(--ice-fs-base);
  background: transparent; outline: 0; color: var(--ice-ink);
}
.ice-catalog-search input[type="search"]::placeholder { color: var(--ice-muted); }
.ice-catalog-search > .ice-ico--search {
  width: 20px; height: 20px; margin-left: 8px; color: var(--ice-muted);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%236b7490' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='9' r='7'/><path d='M20 20l-5-5'/></svg>");
  background-repeat: no-repeat; background-position: center;
}
.ice-catalog-search .ice-btn { border-radius: 10px; padding: 10px 22px; }

/* Page head — «Весь каталог» */
.ice-catalog-page__head {
  margin: 0 0 var(--ice-s-5);
}
.ice-catalog-page__head h1 {
  margin: 0;
  font: 700 clamp(1.75rem, 2.8vw, 2.5rem)/1.15 var(--ice-font-sans);
  color: var(--ice-ink); letter-spacing: -0.01em;
}
.ice-catalog-page__desc {
  margin-top: var(--ice-s-3);
  color: var(--ice-muted);
  max-width: 720px;
}

/* ---------- Two-column layout: sidebar + main ---------- */
.ice-catalog {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--ice-s-6);
  padding: 0;
}
@media (max-width: 992px) {
  .ice-catalog {
    grid-template-columns: 1fr;
    gap: var(--ice-s-5);
  }
}

/* ---------- Filters sidebar ---------- */
.ice-filters {
  background: #fff;
  border: 1px solid var(--ice-line);
  border-radius: var(--ice-r-3);
  padding: var(--ice-s-5);
  align-self: start;
  position: sticky;
  top: calc(var(--iceit-header-height, 84px) + 16px);
}
.ice-filters__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--ice-s-4);
  padding-bottom: var(--ice-s-3);
  border-bottom: 1px solid var(--ice-line);
}
.ice-filters__head h3 {
  margin: 0;
  font: 700 var(--ice-fs-md)/1 var(--ice-font-sans);
  color: var(--ice-ink);
}
/* Filter icon (sliders) on top-right of filters card */
.ice-filters__ico {
  width: 20px; height: 20px; display: inline-block;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7490' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='21' x2='4' y2='14'/><line x1='4' y1='10' x2='4' y2='3'/><line x1='12' y1='21' x2='12' y2='12'/><line x1='12' y1='8' x2='12' y2='3'/><line x1='20' y1='21' x2='20' y2='16'/><line x1='20' y1='12' x2='20' y2='3'/><line x1='1' y1='14' x2='7' y2='14'/><line x1='9' y1='8' x2='15' y2='8'/><line x1='17' y1='16' x2='23' y2='16'/></svg>") no-repeat center / contain;
}

/* Filter groups — separated by thin rule */
.ice-filters__group + .ice-filters__group {
  margin-top: var(--ice-s-5);
  padding-top: var(--ice-s-5);
  border-top: 1px solid var(--ice-line);
}
.ice-filters__group h4 {
  margin: 0 0 var(--ice-s-3);
  font: 700 var(--ice-fs-base)/1 var(--ice-font-sans);
  color: var(--ice-ink);
  text-transform: none; letter-spacing: 0;
}

/* Category tree */
.ice-filters__list,
.ice-filters__tree {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ice-filters__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ice-filters__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.ice-filters__link {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ice-s-2);
  flex: 1;
  min-width: 0;
  color: var(--ice-ink-2);
  font-size: var(--ice-fs-sm);
  line-height: 1.4;
  padding: 4px 0;
  text-decoration: none;
}
.ice-filters__link > span:first-child {
  flex: 1;
  min-width: 0;
}
.ice-filters__link:hover,
.ice-filters__item.is-ancestor > .ice-filters__row > .ice-filters__link,
.ice-filters__link.is-active {
  color: var(--ice-primary);
}
.ice-filters__item.is-active > .ice-filters__row > .ice-filters__link {
  color: var(--ice-primary);
  font-weight: 600;
}
.ice-filters__toggle {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  padding: 0;
  margin: 2px 0 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ice-muted);
  cursor: pointer;
  transition: background-color .15s var(--ice-ease);
}
.ice-filters__toggle:hover {
  background: rgba(67, 108, 247, .08);
}
.ice-filters__toggle::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 4px auto 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s var(--ice-ease);
}
.ice-filters__item.is-open > .ice-filters__row > .ice-filters__toggle::before {
  transform: rotate(45deg);
}
.ice-filters__toggle--empty {
  visibility: hidden;
  pointer-events: none;
}
.ice-filters__tree--sub {
  gap: 6px;
  margin-left: 10px;
  padding-left: 14px;
  border-left: 1px solid rgba(17, 24, 39, .08);
}
.ice-filters__tree--sub .ice-filters__link {
  color: var(--ice-muted);
}
.ice-filters__tree--sub .ice-filters__item.is-active > .ice-filters__row > .ice-filters__link,
.ice-filters__tree--sub .ice-filters__item.is-ancestor > .ice-filters__row > .ice-filters__link,
.ice-filters__tree--sub .ice-filters__link:hover {
  color: var(--ice-primary);
}
.ice-filters__count {
  color: var(--ice-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ice-filters__empty {
  color: var(--ice-muted);
  font-size: var(--ice-fs-sm);
  line-height: 1.5;
}

/* Checkbox */
.ice-checkbox {
  display: flex; align-items: center; gap: var(--ice-s-2);
  font-size: var(--ice-fs-sm); color: var(--ice-ink-2);
  cursor: pointer; user-select: none;
  padding: 4px 0;
}
.ice-checkbox input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border: 1.5px solid var(--ice-line);
  border-radius: 4px; background: #fff; cursor: pointer;
  flex: 0 0 18px; position: relative;
  transition: .15s var(--ice-ease);
}
.ice-checkbox input[type="checkbox"]:hover { border-color: var(--ice-primary); }
.ice-checkbox input[type="checkbox"]:checked {
  background: var(--ice-primary); border-color: var(--ice-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.5l2.5 2.5L11 4.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: 90%; background-position: center; background-repeat: no-repeat;
}
.ice-checkbox > span:not(.ice-filters__count) { flex: 1; }

/* Reset button — bottom of sidebar per design */
.ice-filters__reset-wrap {
  margin-top: var(--ice-s-5);
  padding-top: var(--ice-s-5);
  border-top: 1px solid var(--ice-line);
}
.ice-filters__reset {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--ice-r-2);
  border: 1px solid var(--ice-line);
  background: #fff;
  color: var(--ice-ink-2);
  font: 600 var(--ice-fs-sm)/1 var(--ice-font-sans);
  text-decoration: none;
  transition: .15s var(--ice-ease);
}
.ice-filters__reset:hover {
  border-color: var(--ice-primary);
  color: var(--ice-primary);
}

/* Mobile filters — no sticky, full width above content */
@media (max-width: 992px) {
  .ice-filters {
    position: static;
    padding: var(--ice-s-4);
  }
}

/* ---------- Catalog main area ---------- */
.ice-catalog__main { min-width: 0; }

.ice-catalog-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--ice-s-3); flex-wrap: wrap;
  margin-bottom: var(--ice-s-5);
}
.ice-catalog-toolbar__count {
  font-size: var(--ice-fs-sm);
  color: var(--ice-muted);
}
.ice-catalog-toolbar__count strong {
  color: var(--ice-ink);
  font-weight: 700;
}

.ice-catalog-toolbar__sort {
  display: inline-flex; align-items: center; gap: var(--ice-s-2);
  font-size: var(--ice-fs-sm); color: var(--ice-muted);
}
.ice-catalog-toolbar__sort label {
  display: inline-flex;
  align-items: center;
  gap: var(--ice-s-2);
}
.ice-catalog-toolbar__sort select {
  border: 1px solid var(--ice-line); border-radius: 8px;
  padding: 8px 32px 8px 12px;
  font: 500 var(--ice-fs-sm)/1 var(--ice-font-sans);
  color: var(--ice-ink); background: #fff;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2316203a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l3 3 3-3'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
  cursor: pointer;
}

/* ---------- Responsive grid for catalog products ----------
 * Sidebar (280px) + gap (32px) means main area has less room than home.
 * Desktop (≥1200px): 3 cols
 * Large tablet (992-1199): 2 cols (main area is still beside sidebar)
 * Tablet (768-991): 3 cols (sidebar gone, full width)
 * Small tablet (520-767): 2 cols
 * Mobile (<520): 1 col
 */
.ice-catalog__main .ice-grid--products {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ice-s-5);
}
@media (max-width: 1199px) {
  .ice-catalog__main .ice-grid--products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
  .ice-catalog__main .ice-grid--products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .ice-catalog__main .ice-grid--products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 519px) {
  .ice-catalog__main .ice-grid--products { grid-template-columns: 1fr; }
}