/* catalog.css — уникальные блоки страницы «Каталог» */

/* ---------- BREADCRUMBS ---------- */

/* PAGE HEAD — общий компонент в components.css */

/* Родитель merchant на woocommerce-архивах зажимает .container до ~1170px
   и прижимает влево (margin:0) → 3 колонки сжаты, справа пустота.
   Возвращаем нашу ширину 1340 по центру для всего контента каталога. */
main .container{max-width:var(--container)!important;width:auto!important;margin-inline:auto!important;}

/* ---------- SHOP LAYOUT ---------- */
.shop{display:grid;grid-template-columns:288px 1fr;gap:30px;padding:8px 0 70px;align-items:start;}
.sidebar{position:sticky;top:104px;display:flex;flex-direction:column;gap:14px;}

/* ---------- FILTER CARDS ---------- */
.filter-card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;}
.filter-card > .fc-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;cursor:pointer;user-select:none;}
.fc-head h3{font-size:15px;font-weight:700;}
.fc-head .chev{width:18px;height:18px;color:var(--muted);transition:.2s;}
.filter-card.collapsed .chev{transform:rotate(-90deg);}
.fc-body{padding:0 18px 18px;display:flex;flex-direction:column;gap:11px;}
.filter-card.collapsed .fc-body{display:none;}

/* дерево категорий в сайдбаре */
.cat-tree{display:block;font-size:14px;}
.cat-tree .ct-parent{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-weight:600;font-size:13px;margin-bottom:10px;}
.cat-tree .ct-parent svg{width:14px;height:14px;}
.cat-tree .ct-parent:hover{color:var(--brand-ink);}
.cat-tree ul{list-style:none;margin:0;padding:0;}
.cat-tree a{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink-2);padding:5px 0;transition:.12s;}
.cat-tree a:hover{color:var(--brand-ink);}
.cat-tree .ct-cnt{color:var(--muted);font-size:12px;font-weight:600;}
.cat-tree .ct-cur > a{color:var(--brand-ink);font-weight:700;}
.cat-tree .ct-sub{margin:3px 0 8px;padding-left:14px;border-left:2px solid var(--line);}
.cat-tree .ct-sub a{font-size:13px;color:var(--muted);}
.cat-tree .ct-sub a:hover{color:var(--brand-ink);}

/* ---------- CHECKBOXES ---------- */
.check{display:flex;align-items:center;gap:11px;cursor:pointer;font-size:14.5px;color:var(--ink-2);transition:.12s;}
.check:hover{color:var(--ink);}
.check input{position:absolute;opacity:0;width:0;height:0;}
.check .box{flex-shrink:0;width:20px;height:20px;border:1.5px solid var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:.15s;background:#fff;}
.check .box svg{width:13px;height:13px;color:#fff;opacity:0;transform:scale(.5);transition:.15s;}
.check input:checked + .box{background:var(--brand);border-color:var(--brand);}
.check input:checked + .box svg{opacity:1;transform:scale(1);}
.check .lbl{flex:1;}
.check .qty{color:var(--muted);font-size:13px;font-weight:600;}
.check input:checked ~ .lbl{color:var(--ink);font-weight:600;}

/* ---------- PILL CHECKS ---------- */
.pills{display:flex;flex-wrap:wrap;gap:8px;}
.pill-check{cursor:pointer;}
.pill-check input{position:absolute;opacity:0;width:0;height:0;}
.pill-check .p{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border:1.5px solid var(--line);border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink-2);transition:.15px;background:#fff;}
.pill-check:hover .p{border-color:var(--muted);}
.pill-check input:checked + .p{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);}

/* ---------- PRICE RANGE ---------- */
.price-inputs{display:flex;align-items:center;gap:10px;}
.price-inputs .pf{flex:1;display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;padding:0 12px;height:44px;background:#fff;transition:.15s;}
.price-inputs .pf:focus-within{border-color:var(--brand);}
.price-inputs .pf span{color:var(--muted);font-size:13px;font-weight:600;margin-right:6px;}
.price-inputs .pf input{border:none;outline:none;width:100%;font-size:14.5px;font-weight:600;color:var(--ink);background:none;}
.price-inputs .dash{color:var(--muted);}
.range-wrap{position:relative;height:30px;margin-top:10px;}
.range-track{position:absolute;top:13px;left:0;right:0;height:5px;border-radius:3px;background:var(--surface-2);}
.range-fill{position:absolute;top:13px;height:5px;border-radius:3px;background:var(--brand);}
/* Нативные range лежат поверх трека, ловим только бегунки (pointer-events на thumb).
   Родитель merchant навешивает на input[type=range] рамку 1px #ccc и фон псевдо-трека —
   глушим (наша специфичность .range-wrap input… выше), иначе вокруг слайдера «коробка». */
.range-wrap input[type=range]{position:absolute;top:0;left:0;width:100%;height:30px;margin:0;padding:0;background:none;border:none;border-radius:0;box-shadow:none;pointer-events:none;-webkit-appearance:none;appearance:none;}
.range-wrap input[type=range]:focus{outline:none;}
.range-wrap input[type=range]::-webkit-slider-runnable-track{background:transparent;border:none;box-shadow:none;height:30px;}
.range-wrap input[type=range]::-moz-range-track{background:transparent;border:none;height:30px;}
.range-wrap input[type=range]::-moz-range-progress{background:transparent;}
.range-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#fff;border:2.5px solid var(--brand);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .12s;}
.range-wrap input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12);}
.range-wrap input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;border:2.5px solid var(--brand);box-shadow:var(--shadow-sm);cursor:pointer;}

/* ---------- RESET FILTERS ---------- */
.reset-filters{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border:1.5px dashed var(--line);border-radius:12px;font-weight:600;font-size:14px;color:var(--ink-2);transition:.15s;}
.reset-filters:hover{border-color:var(--brand);color:var(--brand-ink);}
.reset-filters svg{width:16px;height:16px;}

/* ---------- TOOLBAR ---------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
.toolbar .found{font-size:14px;color:var(--ink-2);}
.toolbar .found b{color:var(--ink);}
.toolbar-right{display:flex;align-items:center;gap:10px;}
.sort-sel{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:11px;padding:0 6px 0 14px;height:46px;background:#fff;}
.sort-sel span{font-size:13px;color:var(--muted);font-weight:600;}
.sort-sel select{border:none;outline:none;background:none;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--ink);padding:0 8px;height:100%;cursor:pointer;}
.view-toggle{display:flex;border:1.5px solid var(--line);border-radius:11px;overflow:hidden;height:46px;flex:0 0 auto;}
/* id-специфичность: родитель merchant шлёт на <button> padding:0 37px (контент схлопывался,
   иконки пропадали) — перебиваем точечно и обнуляем его сброс. */
.view-toggle button#view-grid,
.view-toggle button#view-list{box-sizing:border-box;width:46px;min-width:46px;flex:0 0 46px;height:100%;padding:0;margin:0;border:0;border-radius:0;background:none;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;transition:.15s;}
.view-toggle button#view-grid.on,
.view-toggle button#view-list.on{background:var(--graphite);color:#fff;}
.view-toggle button#view-grid:hover:not(.on),
.view-toggle button#view-list:hover:not(.on){background:var(--surface);}
.view-toggle svg{width:19px;height:19px;flex:none;}

/* ---------- ACTIVE FILTER CHIPS ---------- */
.chips-active{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.chips-active:empty{display:none;}
.achip{display:inline-flex;align-items:center;gap:7px;background:var(--brand-soft);color:var(--brand-ink);font-size:13px;font-weight:600;padding:7px 8px 7px 13px;border-radius:9px;}
.achip button{display:flex;width:18px;height:18px;border-radius:6px;align-items:center;justify-content:center;color:var(--brand-ink);transition:.12s;padding:3px;}
.achip button:hover{background:rgba(201,109,5,.16);}
.achip svg{width:12px;height:12px;}

/* ---------- PRODUCT GRID (catalog-specific classes) ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.grid.list{grid-template-columns:1fr;}
/* карточка .pc — общий компонент (см. components.css). Ниже только оверрайды list-view. */

/* list view tweaks */
.grid.list .pc{flex-direction:row;}
.grid.list .pc-media{width:230px;height:auto;min-height:170px;border-bottom:none;border-right:1px solid var(--line-2);flex-shrink:0;}
.grid.list .pc-body{flex-direction:row;align-items:center;gap:24px;flex-wrap:wrap;}
.grid.list .pc-info{flex:1;min-width:220px;}
.grid.list .pc-name{margin-bottom:10px;font-size:17px;}
.grid.list .pc-foot{margin-top:0;flex-direction:column;align-items:flex-end;gap:12px;}
.grid.list .pc-add{height:50px;padding:0 22px;}

/* empty state */
.empty{grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--muted);}
.empty svg{width:54px;height:54px;margin:0 auto 16px;color:var(--line);}
.empty b{display:block;color:var(--ink);font-size:18px;font-weight:700;margin-bottom:6px;}

/* ---------- LOAD MORE / PAGER ---------- */
.pager{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:16px;}
.pager .pbar{width:240px;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;}
.pager .pbar i{display:block;height:100%;background:var(--brand);border-radius:3px;transition:width .3s;}
.pager .ptext{font-size:13.5px;color:var(--muted);font-weight:600;}
.pager .ptext b{color:var(--ink);}

/* ---------- SEO BLOCK ---------- */
.seo{background:var(--surface);border-radius:24px;padding:44px 48px;margin:10px 0 60px;}
.seo h2{font-size:26px;margin-bottom:16px;}
.seo p{color:var(--ink-2);font-size:15px;line-height:1.7;margin-bottom:14px;max-width:880px;}
.seo .seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;}
.seo .sg{background:#fff;border-radius:14px;padding:20px 22px;}
.seo .sg .ic{width:42px;height:42px;border-radius:11px;background:var(--brand-soft);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.seo .sg .ic svg{width:22px;height:22px;}
.seo .sg b{display:block;font-size:15px;margin-bottom:5px;}
.seo .sg span{font-size:13.5px;color:var(--ink-2);line-height:1.45;}

/* ---------- TOAST ---------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--graphite);color:#fff;padding:15px 22px;border-radius:14px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600;z-index:200;transition:transform .35s var(--ease);max-width:90vw;}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast .tk{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;}
.toast .tk svg{width:15px;height:15px;color:#fff;}

/* mobile filter fab */
.filter-fab{display:none;}

/* ---------- SIDEBAR MOBILE BACKDROP ---------- */
.sb-backdrop{position:fixed;inset:0;background:rgba(20,24,33,.45);opacity:0;visibility:hidden;transition:.3s;z-index:110;}
.sb-backdrop.open{opacity:1;visibility:visible;}
.sb-close{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.sb-close h3{font-size:18px;}
.sb-close button{width:38px;height:38px;border-radius:10px;background:var(--surface);display:flex;align-items:center;justify-content:center;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1080px){
  .shop{grid-template-columns:1fr;}
  .sidebar{position:fixed;inset:0 auto 0 0;width:340px;max-width:88vw;z-index:120;background:#fff;padding:20px;overflow-y:auto;transform:translateX(-104%);transition:transform .3s var(--ease);box-shadow:var(--shadow-md);}
  .sidebar.open{transform:none;}
  .grid{grid-template-columns:repeat(2,1fr);}
  .filter-fab{display:inline-flex;}
}
@media(min-width:1081px){
  .sb-close,.sb-backdrop{display:none;}
}
@media(max-width:760px){
  .grid,.grid.list .pc-body{grid-template-columns:1fr;}
  .grid{grid-template-columns:1fr;}
  .grid.list .pc{flex-direction:column;}
  .grid.list .pc-media{width:100%;border-right:none;border-bottom:1px solid var(--line-2);}
  .grid.list .pc-foot{flex-direction:row;align-items:center;}
  .seo{padding:30px 24px;}
  .seo .seo-grid{grid-template-columns:1fr;}
}

/* --- Серверная нумерованная пагинация (WP) --- */
.pager.pager-nums{display:flex;flex-flow:row wrap;gap:8px;justify-content:center;align-items:center;margin-top:32px;}
.pager.pager-nums .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-weight:600;text-decoration:none;transition:.15s;}
.pager.pager-nums a.page-numbers:hover{border-color:var(--brand);color:var(--brand);}
.pager.pager-nums .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff;}
.pager.pager-nums .page-numbers.dots{border:none;background:none;min-width:auto;padding:0 4px;}

/* Поля цены: компактно, чтобы влезали 5–6-значные суммы (38325 и т.п. — раньше обрезалось) */
.price-inputs{display:flex;align-items:center;gap:6px;}
.price-inputs .pf{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px;padding:0 8px;}
.price-inputs .pf span{margin-right:0;font-size:12px;flex:0 0 auto;}
.price-inputs .pf input{flex:1 1 auto;width:100%;min-width:0;font-size:13.5px;}
.price-inputs .pf input::-webkit-outer-spin-button,
.price-inputs .pf input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.price-inputs .pf input{-moz-appearance:textfield;appearance:textfield;text-align:left;}