/* ===================================================================
   TRUSTOLD · Каталог (page-specific layout)
   Палитра/шрифты/компоненты — из design.css (var(--…)).
   Здесь только лейаут каталога: хлебные крошки, шапка раздела,
   плитки категорий, двухколоночный грид с липким сайдбаром
   фильтров, тулбар сортировки, сетка карточек, «показать ещё».
   Имена классов и id сохранены для JS-хуков и AJAX.
   =================================================================== */

.catalog-page{background:var(--bg);padding-bottom:120px}

/* ── строка поиска ────────────────────────────────────────────── */
.catalog-search{max-width:var(--maxw);margin:30px auto 0;padding:0 var(--pad)}
.hero-search{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--gold-42);
  padding:13px 18px;transition:border-color .3s;max-width:620px;
}
.hero-search:focus-within{border-color:var(--gold)}
.hero-search svg{flex:none;color:var(--gold-2)}
.hero-search-input{
  flex:1;border:none;outline:none;background:transparent;padding:0;
  font-family:var(--sans);font-size:14px;color:var(--ink);
}
.hero-search-input::placeholder{color:var(--faint)}
.hero-search-clear{
  font-size:22px;line-height:1;color:var(--muted-2);
  text-decoration:none;transition:color .25s;
}
.hero-search-clear:hover{color:var(--wine)}

/* ── шапка раздела (заголовок + лид) ──────────────────────────── */
.catalog-header{max-width:var(--maxw);margin:0 auto;padding:30px var(--pad) 0}
.catalog-header .page-lead{max-width:560px}

/* ── плитки категорий ─────────────────────────────────────────── */
.cat-grid-section{max-width:var(--maxw);margin:40px auto 0;padding:0 var(--pad)}
.cat-grid-title{
  font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px;font-weight:400;
}
.cat-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;
}
.cat-tile{
  position:relative;background:var(--surface);
  border:1px solid var(--gold-22);transition:border-color .3s,box-shadow .3s;
}
.cat-tile:hover{border-color:var(--gold-62)}
.cat-tile-active{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.cat-tile-link{
  display:flex;align-items:center;gap:14px;
  padding:18px 20px;text-decoration:none;color:inherit;min-height:78px;
}
.cat-tile-active .cat-tile-link{padding-right:42px}
.cat-tile-icon{
  flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  color:var(--gold-2);transition:color .3s;
}
.cat-tile:hover .cat-tile-icon,
.cat-tile-active .cat-tile-icon{color:var(--gold)}
.cat-tile-svg{width:32px;height:32px;display:block}
.cat-tile-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px}
.cat-tile-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cat-tile-name{
  font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.2;color:var(--ink);
  overflow-wrap:anywhere;word-break:normal;transition:color .3s;
}
.cat-tile:hover .cat-tile-name,
.cat-tile-active .cat-tile-name{color:var(--gold)}
.cat-tile-diamond{
  width:8px;height:8px;flex:none;background:var(--gold-30);
  transform:rotate(45deg);transition:background .3s;
}
.cat-tile:hover .cat-tile-diamond,
.cat-tile-active .cat-tile-diamond{background:var(--gold)}
.cat-tile-count{
  font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--muted-2);
}
.cat-tile-close{
  position:absolute;top:10px;right:10px;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;color:var(--muted-2);text-decoration:none;
  transition:color .25s;z-index:2;
}
.cat-tile-close:hover{color:var(--wine)}

/* ── двухколоночный лейаут ────────────────────────────────────── */
.catalog-layout{
  max-width:var(--maxw);margin:48px auto 0;padding:0 var(--pad);
  display:grid;grid-template-columns:248px 1fr;gap:52px;align-items:start;
}

/* ── сайдбар фильтров (липкий) ────────────────────────────────── */
.filters{
  position:sticky;top:108px;max-height:calc(100vh - 132px);
  overflow-y:auto;overflow-x:hidden;padding-right:12px;
  scrollbar-width:thin;
}
.filters::-webkit-scrollbar{width:6px}
.filters::-webkit-scrollbar-thumb{background:var(--gold-30)}
.filters-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:26px;padding-bottom:16px;border-bottom:1px solid var(--gold-30);
}
.filters-title{
  margin:0;font-family:var(--sans);font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink);font-weight:400;
}
.filters-close{
  display:none;background:none;border:none;font-size:26px;line-height:1;
  cursor:pointer;color:var(--muted-2);padding:0;
}
.filters-close:hover{color:var(--wine)}

/* ── группы фильтров ──────────────────────────────────────────── */
.facet-group{margin-bottom:30px;border:none}
.facet-group:last-of-type{margin-bottom:8px}
.facet-group summary{
  font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;
}
.facet-group summary::after{content:"+";font-size:15px;color:var(--gold-2);font-weight:300}
.facet-group[open] summary::after{content:"\2212"}
.facet-group summary::-webkit-details-marker{display:none}
.facet-body{padding-top:2px}
.facet-hint{
  margin:0 0 12px;font-family:var(--sans);font-size:12px;line-height:1.4;color:var(--muted-2);
}
.facet-hint--tight{margin-bottom:10px}

/* поля ввода фильтра (цена / размер): унифицируем с design.css */
.input{
  width:100%;font-family:var(--sans);font-size:13px;color:var(--ink);
  background:var(--surface);border:1px solid var(--gold-42);padding:9px 12px;margin-bottom:8px;
}
.input:focus{outline:none;border-color:var(--gold)}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ── список брендов ───────────────────────────────────────────── */
.brand-search-input{
  width:100%;margin-bottom:10px;padding:9px 12px;
  border:1px solid var(--gold-42);background:var(--surface);
  font-family:var(--sans);font-size:13px;color:var(--ink);outline:none;
  transition:border-color .25s;
}
.brand-search-input:focus{border-color:var(--gold)}
.brand-list{max-height:220px;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column}
.brand-list::-webkit-scrollbar{width:5px}
.brand-list::-webkit-scrollbar-thumb{background:var(--gold-30)}
.brand-picker-item{
  font-family:var(--sans);font-size:14px;color:var(--muted-2);
  text-decoration:none;padding:6px 0;text-align:left;
  transition:color .25s;
}
.brand-picker-item:hover{color:var(--ink)}
.brand-picker-item.is-active{color:var(--gold);font-weight:500}
.brand-item-hidden{display:none !important}

/* ── чек-опции (вид / монтаж / управление) ────────────────────── */
.check{
  display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:14px;
  color:var(--muted-2);padding:6px 0;cursor:pointer;transition:color .25s;
}
.check:hover{color:var(--ink)}
.check input[type="radio"]{accent-color:var(--gold);flex:none}

/* ── действия фильтра ─────────────────────────────────────────── */
.filter-actions{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.filter-actions .btn{width:100%}
.filter-apply-btn{width:100%}

/* ── палитра-свотчи в сайдбаре ────────────────────────────────── */
.facet-color-picker .color-swatch-grid{
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;
}
.facet-color-picker .color-swatch{
  position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;
  width:52px;flex:none;margin:0;padding:0;border:none;background:none;font:inherit;
}
.facet-color-picker .color-swatch input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.facet-color-picker .color-swatch-dot{
  width:28px;height:28px;border-radius:50%;
  background-color:var(--swatch,#aeaeae);background:var(--swatch,#aeaeae);
  box-shadow:0 0 0 1px var(--gold-30);
  display:flex;align-items:center;justify-content:center;flex:none;
  transition:transform .15s ease,box-shadow .15s ease;
}
.facet-color-picker .color-swatch-dot--light{box-shadow:0 0 0 1px rgba(28,26,22,.22)}
.facet-color-picker .color-swatch-any{
  background:var(--surface) !important;color:var(--muted-2);
  font-size:16px;font-weight:600;line-height:1;
}
.facet-color-picker .color-swatch:hover .color-swatch-dot{transform:scale(1.08)}
.facet-color-picker .color-swatch.is-active .color-swatch-dot{
  box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--gold);
}
.facet-color-picker .color-swatch-caption{
  font-family:var(--sans);font-size:10px;letter-spacing:.04em;line-height:1.15;
  color:var(--muted-2);text-align:center;max-width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}
.facet-color-picker .color-swatch.is-active .color-swatch-caption{color:var(--gold);font-weight:500}

/* ── диапазон размера ─────────────────────────────────────────── */
.size-range{display:flex;flex-direction:column;gap:10px}
.size-range-row{display:flex;align-items:flex-end;gap:8px}
.size-range-field{display:flex;flex-direction:column;gap:4px;flex:1 1 0}
.size-range-label{
  font-family:var(--sans);font-size:10px;color:var(--muted-2);
  text-transform:uppercase;letter-spacing:.1em;padding-left:2px;
}
.size-range-field input[type="number"]{
  width:100%;padding:9px 11px;border:1px solid var(--gold-42);background:var(--surface);
  font-family:var(--sans);font-size:13px;color:var(--ink);-moz-appearance:textfield;
  transition:border-color .15s;
}
.size-range-field input[type="number"]::-webkit-outer-spin-button,
.size-range-field input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.size-range-field input[type="number"]:focus{outline:none;border-color:var(--gold)}
.size-range-dash{font-size:14px;color:var(--muted-2);margin-bottom:9px}
.size-range-unit{font-size:12px;color:var(--muted-2);margin-bottom:10px;padding-left:2px}
.size-range-hint{font-family:var(--sans);font-size:11px;color:var(--muted-2);opacity:.9;padding-top:2px}

/* ════════ ОСНОВНАЯ КОЛОНКА ═════════════════════════════════════ */
.catalog-main{min-width:0}

/* тулбар: счётчик · фильтры (моб.) · сортировка */
.catalog-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--gold-30);padding-bottom:18px;margin-bottom:32px;
}
.catalog-toolbar-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.catalog-count{
  font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}
.link-to-collections{
  font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--wine);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s;
}
.link-to-collections:hover{border-color:var(--wine)}
.catalog-toolbar-right{display:flex;align-items:center;gap:12px}
.sort-label{
  display:flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
}
#sort-select{
  font-family:var(--sans);font-size:12.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--gold-42);padding:9px 14px;cursor:pointer;
}
#sort-select:focus{outline:none;border-color:var(--gold)}

#btn-toggle-filters{display:none}

/* ── сетка карточек ───────────────────────────────────────────── */
.product-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:28px;
}
.product-grid .empty{grid-column:1/-1}

/* ── показать ещё ─────────────────────────────────────────────── */
.load-more-wrap{display:flex;justify-content:center;padding:54px 0 8px}
.btn-load-more{min-width:240px}
.load-spinner{display:flex;justify-content:center}
.spinner{
  width:30px;height:30px;border:2px solid var(--gold-22);
  border-top-color:var(--gold);border-radius:50%;animation:cat-spin .7s linear infinite;
}
@keyframes cat-spin{to{transform:rotate(360deg)}}

/* ── адаптив ──────────────────────────────────────────────────── */
@media (max-width:1024px){
  .catalog-layout{grid-template-columns:220px 1fr;gap:36px}
}
@media (max-width:880px){
  .catalog-layout{grid-template-columns:1fr}
  #btn-toggle-filters{display:inline-flex}
  .filters{
    position:fixed;inset:0;top:0;z-index:80;max-height:none;
    background:var(--bg);padding:24px var(--pad);overflow-y:auto;
    display:none;-webkit-overflow-scrolling:touch;
  }
  .filters.filters-open{display:block}
  .filters-close{display:block}
}
@media (max-width:560px){
  .cat-grid{grid-template-columns:1fr 1fr}
  .product-grid{grid-template-columns:1fr 1fr;gap:14px}
  .sort-label{font-size:0;gap:0}
}
@media (max-width:400px){
  .product-grid{grid-template-columns:1fr}
}