/* ═══════════════════════════════════════════════
   COLLECTION PAGE
   ═══════════════════════════════════════════════ */
.coll-hero{background:var(--dark);color:var(--white);padding:44px 0 32px;text-align:center}
.coll-hero h1{font-family:var(--font-h);font-size:clamp(26px,3.5vw,36px);font-weight:700;text-transform:uppercase;letter-spacing:5px}
.coll-hero__bc{font-size:11px;color:var(--g400);margin-top:8px}
.coll-hero__bc a{color:var(--g400);transition:.2s}.coll-hero__bc a:hover{color:var(--white)}
.coll-body{padding:32px 0 64px}
.coll-layout{display:grid;grid-template-columns:240px 1fr;gap:32px}
/* Toolbar */
.coll-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--g200);gap:12px}
.coll-toolbar__info{font-size:12px;color:var(--g500)}
.coll-toolbar__sort{padding:7px 12px;border:1px solid var(--g200);border-radius:var(--radius);font-size:12px;color:var(--g600);background:var(--white);outline:none}
.coll-toolbar__filter-btn{display:none;padding:8px 14px;border:1px solid var(--g200);border-radius:var(--radius);font-family:var(--font-h);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--g600);align-items:center;gap:6px}
.coll-toolbar__filter-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.coll-layout>aside{position:sticky;top:100px;align-self:start}
.coll-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* Pagination */
.pagination{display:flex;justify-content:center;gap:4px;margin-top:32px}
.pagination button{width:36px;height:36px;border-radius:var(--radius);font-family:var(--font-h);font-size:12px;color:var(--g500);background:var(--g100);transition:.2s}
.pagination button.act{background:var(--dark);color:var(--white)}
.pagination button:hover:not(.act){background:var(--g200)}
/* Loading overlay */
.coll-grid--loading{opacity:.4;pointer-events:none;transition:opacity .3s}

/* Sidebar filters */
.filter-search{display:flex;border:1px solid var(--g200);border-radius:var(--radius);overflow:hidden;margin-bottom:20px}
.filter-search input{flex:1;padding:10px 12px;border:none;font-size:12px;outline:none;background:var(--white)}
.filter-search input::placeholder{color:var(--g400)}
.filter-search button{padding:10px 12px;background:var(--dark);display:flex;align-items:center;justify-content:center;transition:.2s}
.filter-search button:hover{background:var(--red)}
.filter-search button svg{width:14px;height:14px;stroke:var(--white);fill:none;stroke-width:2}
.filter-group{margin-bottom:20px;background:var(--white);border:1px solid var(--g200);border-radius:var(--radius-lg);padding:16px 18px;transition:border-color .2s}
.filter-group:hover{border-color:var(--g300)}
.filter-group h4{font-family:var(--font-h);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:2px;margin-bottom:12px;display:flex;align-items:center}
.filter-group h4::after{content:'';flex:1;height:1px;background:var(--g200);margin-left:10px}
.filter-group label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--g600);padding:7px 8px;margin:0 -8px;border-radius:var(--radius);cursor:pointer;transition:.15s}
.filter-group label:hover{background:var(--g50);color:var(--dark)}
.filter-group input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:16px;height:16px;border:1.5px solid var(--g300);border-radius:3px;cursor:pointer;position:relative;flex-shrink:0;transition:.2s}
.filter-group input[type="checkbox"]:checked{background:var(--red);border-color:var(--red)}
.filter-group input[type="checkbox"]:checked::after{content:'';position:absolute;left:4.5px;top:1.5px;width:5px;height:9px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.filter-group input[type="checkbox"]:hover{border-color:var(--red)}
.filter-group .cnt{font-size:10px;font-weight:600;margin-left:auto;background:var(--g100);padding:1px 8px;border-radius:10px;color:var(--g500)}
.filter-group label:has(input:checked) .cnt{background:var(--red);color:var(--white)}
.filter-apply{width:100%;padding:12px;background:var(--dark);color:var(--white);font-family:var(--font-h);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:2px;border-radius:var(--radius);margin-top:8px;transition:.2s;display:flex;align-items:center;justify-content:center;gap:6px}
.filter-apply:hover{background:var(--red)}
.filter-apply svg{width:14px;height:14px;stroke:var(--white);fill:none;stroke-width:2}
.filter-clear{display:block;text-align:center;font-size:11px;color:var(--g400);margin-top:8px;cursor:pointer;transition:.2s}
.filter-clear:hover{color:var(--red)}

/* Filter expand/collapse */
.filter-group label.filter-hidden{display:none}
.filter-group.expanded label.filter-hidden{display:flex}
.filter-toggle{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;padding:8px 12px;margin:8px 0 0;font-size:11px;font-weight:600;color:var(--g500);background:var(--g50);border:1px dashed var(--g200);cursor:pointer;transition:.25s;border-radius:var(--radius);letter-spacing:.5px}
.filter-toggle:hover{background:var(--g100);border-color:var(--g300);color:var(--red)}
.filter-toggle svg{transition:transform .25s}
.filter-group.expanded .filter-toggle{background:none;border-style:solid;border-color:var(--g200);color:var(--g400)}
.filter-group.expanded .filter-toggle svg{transform:rotate(180deg)}
.filter-group.expanded .filter-toggle:hover{color:var(--red)}