/* ===== CATALOG ===== (catalog.html)
   Shared and NOT redefined here: .breadcrumb, .chips/.chip, .checkbox, .sort-wrap select base, .product-grid (2 → 3 cols),
   .empty-state/.empty-links, .filter-overlay, the round close button (.sidebar-head button), .btn*.
   Owned here: tinted intro panel, toolbar, filter sidebar (sticky card ≥980 / slide-in sheet <980), filter groups,
   #catalog-grid 3 cols next to the sidebar. JS hooks kept: #catalog-sidebar transform/visibility, body.filters-open. */

/* ----- intro: soft tinted hero panel ----- */
/* full-width band, fades into white at the bottom */
body[data-page="catalog"] .page-intro{padding:20px 0 clamp(48px,6vw,72px);margin-bottom:clamp(-24px,-2vw,-12px);
  background:linear-gradient(180deg,rgba(255,255,255,0) 45%,#fff 100%),
             radial-gradient(60% 120% at 100% 0%,#DCE6FF 0%,rgba(220,230,255,0) 60%),
             radial-gradient(50% 90% at 0% 100%,#E6F6EE 0%,rgba(230,246,238,0) 60%),
             linear-gradient(135deg,#F5F8FF,var(--tint-blue))}
body[data-page="catalog"] .page-intro .breadcrumb{margin-bottom:14px}
body[data-page="catalog"] .page-intro h1{font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem)}

.catalog-page{padding:0 0 clamp(64px,8vw,104px)}
.catalog-layout{display:block}
.catalog-results{min-width:0}

/* ----- toolbar: count · query · sort (+ filters button below 980) ----- */
.catalog-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"filters sort" "meta meta";
  align-items:center;gap:10px 12px;padding:10px;margin-bottom:20px;border-radius:var(--r);background:var(--ground)}
.filters-toggle{grid-area:filters;width:100%;min-height:46px;padding:0 18px;font-size:var(--fs-ui);border-color:transparent;box-shadow:var(--shadow-sm)}
.filters-toggle::before{content:"";width:18px;height:18px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230F1A33' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3 5h14M5.5 10h9M8 15h4'/%3E%3C/svg%3E") center/contain no-repeat}
.catalog-meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0;padding:0 6px}
#catalog-count{font:600 var(--fs-ui)/1.3 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.catalog-query{font:400 var(--fs-ui)/1.3 var(--sans);color:var(--ink-2);overflow-wrap:anywhere}
.sort-wrap{grid-area:sort;display:flex;align-items:center;gap:10px;min-width:0}
.sort-wrap select{width:100%;min-width:0;border-color:transparent;box-shadow:var(--shadow-sm)}
.sort-wrap select:hover{border-color:var(--rule-strong)}
.sort-wrap select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,79,224,.14)}
.sort-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (min-width:700px){
  .catalog-toolbar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"filters meta sort";gap:16px}
  .filters-toggle{width:auto}
  .sort-label{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;
    font:500 var(--fs-small)/1.3 var(--sans);color:var(--ink-3);white-space:nowrap}
  .sort-wrap select{width:auto;min-width:200px}
}

/* ----- filter sidebar ----- */
.sidebar-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sidebar-head strong{font:700 1.25rem/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.filters{display:flex;flex-direction:column;gap:6px}
.filter-group{padding:14px 0 8px;border-top:1px solid var(--rule-sheet)}
.filter-group h3{font:600 .9375rem/1.3 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none;margin-bottom:4px}
.catalog-sidebar .checkbox{margin:0 -10px;padding:7px 10px;border-radius:10px;transition:background-color var(--t-fast)}
.catalog-sidebar .checkbox:hover{background:var(--ground)}
.catalog-sidebar .checkbox>span{color:var(--ink-2)}
.catalog-sidebar .checkbox:hover>span,.catalog-sidebar .checkbox:has(input:checked)>span{color:var(--ink)}
.catalog-sidebar .checkbox:has(input:checked) em{background:var(--tint-blue);color:var(--blue-dark)}
/* «Лише в наявності» + reset sit at the bottom of the list */
.catalog-sidebar .filters>.checkbox{margin:6px 0 0;padding:12px 14px;border-radius:var(--r-ctl);background:var(--tint-green)}
.catalog-sidebar .filters>.checkbox:hover{background:#DFF2E6}
.filters [data-clear-filters]{min-height:46px;margin-top:6px;padding:0 16px;border-radius:var(--r-ctl);background:var(--ground);color:var(--ink-2);font-weight:600}
.filters [data-clear-filters]:hover{background:var(--ground-2);color:var(--blue)}

/* ----- results ----- */
.catalog-results .chips{margin:-4px 0 20px}
#catalog-empty .empty-state{max-width:none;padding:clamp(28px,5vw,48px);border-radius:var(--r-lg);background:var(--ground)}
#catalog-empty .empty-state p{max-width:46ch}
#catalog-empty .empty-links a{border-color:transparent;box-shadow:var(--shadow-sm)}

/* ----- desktop: sticky filter card next to a 3-column grid ----- */
@media (min-width:980px){
  .catalog-layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:28px;align-items:start}
  .catalog-sidebar{position:sticky;top:calc(var(--sticky-top) + 16px);max-height:calc(100vh - var(--sticky-top) - 32px);overflow:auto;
    overscroll-behavior:contain;padding:18px 20px 20px;background:#fff;border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow-sm);
    transform:none;visibility:visible;z-index:1;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
  .sidebar-head{padding-bottom:10px}
  .filters>.filter-group:first-child{border-top:0;padding-top:4px}
  .catalog-toolbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"meta sort"}
  .filters-toggle,.sidebar-head button{display:none}
  #catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ----- below 980: the sidebar is a left sheet (not re-rendered, so the transform transition is safe) ----- */
@media (max-width:979px){
  .catalog-sidebar{position:fixed;top:0;bottom:0;left:0;width:min(100%,380px);z-index:var(--z-sheet);background:#fff;
    border-radius:0 24px 24px 0;box-shadow:var(--shadow-lg);padding:0 20px 28px;overflow:auto;overscroll-behavior:contain;
    transform:translateX(-105%);visibility:hidden;transition:transform 240ms var(--ease),visibility 0s linear 240ms}
  body.filters-open .catalog-sidebar{transform:none;visibility:visible;transition:transform 240ms var(--ease)}
  .sidebar-head{position:sticky;top:0;z-index:2;min-height:68px;margin:0 -20px 4px;padding:0 16px 0 20px;background:#fff;border-bottom:1px solid var(--rule)}
  .filters>.filter-group:first-child{border-top:0}
  .catalog-sidebar .checkbox{padding:9px 10px}
}
@media (max-width:379px){
  .catalog-sidebar{border-radius:0}
}

@media (min-width:1400px){#catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}