.catalog-layout { grid-template-columns: 252px minmax(0, 1fr); align-items: start; }
.catalog-filter-panel { position: sticky; top:102px; align-self: start; padding: 17px; border: 1px solid rgba(255,255,255,.8); border-radius: 15px; background: rgba(255,255,255,.74); box-shadow: 0 16px 42px rgba(0,0,0,.08); backdrop-filter: blur(16px); }
.filter-panel-head { display:flex; align-items:start; justify-content:space-between; gap:12px; padding:0 0 14px; border-bottom:1px solid var(--line); }
.filter-panel-head b { font-size:16px; }.filter-panel-head small { display:block; margin-top:5px; color:var(--muted); font-size:11px; }.filter-panel-head .icon-button { display:none; width:31px; height:31px; font-size:18px; }
.filter-groups { display:grid; gap:5px; padding:9px 0; }.filter-section { border-bottom:1px solid var(--line); }.filter-section summary { display:flex; align-items:center; justify-content:space-between; padding:12px 1px; list-style:none; font-size:13px; font-weight:800; cursor:pointer; }.filter-section summary::-webkit-details-marker{display:none}.filter-section summary:after { content:"+"; margin-left:auto; color:var(--muted); font-size:18px; font-weight:400; }.filter-section[open] summary:after { content:"−"; }.filter-section summary span { display:grid; place-items:center; min-width:20px; height:20px; margin-left:7px; border-radius:99px; color:#555; background:#e9e9e7; font-size:10px; }
.filter-section>div { display:grid; gap:8px; padding:1px 0 14px; }.filter-section label { display:flex; align-items:center; gap:9px; color:#555; font-size:12px; cursor:pointer; }.filter-section input { width:15px; height:15px; accent-color:#111; }.filter-section input:checked+span { color:#111; font-weight:800; }
.clear-filters,.filter-trigger { border:1px solid #bababa; border-radius:9px; padding:10px 12px; color:#222; background:#fff; font-size:12px; font-weight:800; }.clear-filters { width:100%; margin-top:8px; }.filter-trigger { display:none; align-items:center; gap:8px; }.filter-trigger span { display:grid; place-items:center; min-width:19px; height:19px; border-radius:50%; color:#fff; background:#171717; font-size:10px; }
.product-badges { position:absolute; top:13px; right:13px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; max-width:62%; }.product-badge { padding:5px 8px; border-radius:99px; color:#171717; background:rgba(255,255,255,.94); box-shadow:0 2px 10px rgba(0,0,0,.08); font-size:10px; font-weight:800; }.product-badge.stock-low { color:#714d00; background:#fff0b3; }.product-badge.stock-out { color:#9b2828; background:#ffe2e0; }.product-badge.stock-preorder { color:#41556e; background:#e5edf5; }.product-badge.sale { color:#fff; background:#171717; }.modal-product-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }.add-button:disabled,.button:disabled { cursor:not-allowed; opacity:.45; }
.filter-scrim { display:none; }
@media (max-width: 900px) { .catalog-tools { flex-direction:row; align-items:center; }.filter-trigger { display:inline-flex; }.catalog-filter-panel { position:fixed; z-index:75; top:0; bottom:0; left:0; width:min(350px,88vw); overflow:auto; border-radius:0 18px 18px 0; padding:22px; transform:translateX(-110%); transition:transform .25s; }.catalog-filter-panel[aria-hidden="false"] { transform:translateX(0); }.filter-panel-head .icon-button { display:grid; }.filter-scrim { position:fixed; z-index:70; inset:0; visibility:hidden; opacity:0; background:rgba(0,0,0,.42); transition:.25s; }.filter-scrim.is-open { display:block; visibility:visible; opacity:1; }.filter-open { overflow:hidden; }.catalog-layout { display:block; }.product-grid { margin-top:0; } }
@media (max-width: 620px) { .catalog-tools { gap:10px; }.filter-trigger { min-height:43px; }.catalog-tools .search { flex:1; }.product-badges { max-width:67%; } }