.cat-grid{direction:rtl}
.cat-side{order:-1}
.cat-main{order:0}

.cat-filter-form{display:flex;flex-direction:column;gap:4px}
.cat-fs{border:0;margin:0;padding:18px 0;border-bottom:1px solid var(--line)}
.cat-fs:last-of-type{border-bottom:0}
.cat-fs-legend{font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);padding:0;margin:0 0 12px;width:100%}

.cat-range-dual{display:flex;flex-direction:column;gap:10px}
.cat-range-dual input[type=range]{width:100%;accent-color:var(--navy)}
.cat-range-labels{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--ink)}

.cat-color-grid{display:flex;flex-direction:column;gap:8px}
.cat-color-opt{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;font-weight:500}
.cat-color-swatch{width:28px;height:28px;border-radius:999px;background:var(--sw,#ccc);border:2px solid var(--sw,#ccc);flex-shrink:0}
.cat-color-opt input:checked + .cat-color-swatch{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--navy)}
.cat-opt-meta em{font-style:normal;color:var(--muted);font-size:12px;font-weight:600}

.cat-size-list{display:flex;flex-direction:column;gap:4px}
.cat-size-opt{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13.5px;cursor:pointer;font-weight:500}
.cat-size-opt input{width:16px;height:16px;accent-color:var(--navy)}
.cat-size-opt em{font-style:normal;color:var(--muted);font-size:12px}
.cat-check-opt{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13.5px;cursor:pointer}
.cat-check-opt input{width:16px;height:16px;accent-color:var(--navy)}
.cat-clear-opt{display:block;margin-top:8px;font-size:12.5px;color:var(--teal-2);font-weight:700;cursor:pointer}

.cat-filter-actions{display:flex;flex-direction:column;gap:10px;margin-top:8px;padding-top:8px}
.cat-filter-apply{background:var(--navy);color:#fff;border:0;padding:14px;font-weight:800;font-size:13px;letter-spacing:.3px;text-transform:uppercase;cursor:pointer;width:100%}
.cat-filter-apply:hover{background:var(--teal-2)}
.cat-filter-reset{text-align:center;font-size:12.5px;font-weight:700;color:var(--muted)}

.cat-side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-inline-end:48px}
.cat-side-head h3{margin:0;font-size:15px;font-weight:900}
.cat-side-close{display:none}

.cat-drawer-backdrop{display:none;pointer-events:none}
@media (max-width:980px){
  .cat-side{
    display:none !important;
    visibility:hidden;
    pointer-events:none;
    position:fixed;
    inset:0;
    top:0;
    z-index:92;
    background:#fff;
    overflow:hidden;
    padding:20px 20px 0;
    max-height:100vh;
    flex-direction:column;
    order:10;
  }
  .cat-side.is-open{
    display:flex !important;
    visibility:visible;
    pointer-events:auto;
  }
  .cat-side .cat-filter-form{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px}
  .cat-side .cat-filter-actions{
    flex-shrink:0;
    position:sticky;
    bottom:0;
    background:#fff;
    padding:14px 0 max(14px,env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    margin-top:auto;
    z-index:2;
  }
  .cat-filter-apply{min-height:48px}
  .cat-drawer-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(14,22,38,.5);
    z-index:91;
    opacity:0;
    visibility:hidden;
    transition:opacity .2s;
    pointer-events:none;
  }
  .cat-drawer-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto}
  .cat-side-close{
    display:flex !important;
    position:absolute;
    top:14px;
    inset-inline-end:14px;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    background:#fff;
    border:1px solid var(--line);
    font-size:22px;
    cursor:pointer;
    z-index:3;
  }
}

.cat-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:12px 16px;background:var(--bg);border:1px solid var(--line)}
.cat-chip{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;padding:6px 12px;font-size:12px;font-weight:700;text-decoration:none}
.cat-chip-x{font-weight:300;font-size:16px;line-height:1}

.cat-pagination{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:36px}
.cat-pagination a,.cat-pagination span{padding:8px 14px;border:1px solid var(--line);font-size:13px;font-weight:700;text-decoration:none;color:var(--ink)}
.cat-pagination .is-current{background:var(--navy);color:#fff;border-color:var(--navy)}

.tb-sort{display:inline-flex;align-items:center;gap:8px}
.tb-sort-label{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}
.tb-sort-select{
  border:1px solid var(--line);padding:8px 12px 8px 28px;font-size:13px;font-weight:600;
  color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat left 10px center;
  outline:none;direction:rtl;text-align:right;min-width:168px;cursor:pointer;
}
.tb-sort-select:focus{border-color:var(--navy)}