/* ── Reset & base (minimal — header.php owns :root vars) ─── */
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    body{background:#f8fafb;color:#111827}
    .cat-container{max-width:1600px;margin:0 auto;padding:0 20px}

    /* ── Category hero ───────────────────────────────────────── */
    .cat-hero{
      background:linear-gradient(135deg,#166534 0%,#16a34a 100%);
      color:#fff;padding:32px 0 22px
    }
    .cat-hero h1{
      font-size:clamp(1.4rem,3vw,2rem);
      margin:6px 0 4px;line-height:1.2
    }
    .cat-hero p{font-size:.875rem;opacity:.85}
    .breadcrumb{font-size:.82rem;margin-bottom:6px}
    .breadcrumb a{color:rgba(255,255,255,.8);text-decoration:none}
    .breadcrumb a:hover{color:#fff}
    .breadcrumb span{color:#fff}

    /* ── Layout ──────────────────────────────────────────────── */
    .cat-layout{
      display:grid;
      grid-template-columns:220px 1fr;
      gap:22px;margin:24px 0 40px;
      align-items:start
    }

    /* ── Sidebar ─────────────────────────────────────────────── */
    .sidebar{
      background:#fff;border:1px solid #e5e7eb;
      border-radius:10px;overflow:hidden;
      /* content-visibility speeds up off-screen paint */
      content-visibility:auto;contain-intrinsic-size:0 400px
    }
    .sidebar-section{padding:16px}
    .sidebar-title{
      font-size:.8rem;
      font-weight:700;text-transform:uppercase;letter-spacing:.07em;
      color:#374151;margin-bottom:12px
    }
    .brand-list{list-style:none;max-height:280px;overflow-y:auto;
                scrollbar-width:thin;scrollbar-color:#d1d5db transparent}
    .brand-list li a{
      display:flex;align-items:center;gap:8px;
      padding:7px 10px;border-radius:6px;font-size:.875rem;
      color:#4b5563;text-decoration:none;
      transition:background .15s,color .15s
    }
    .brand-list li a:hover,
    .brand-list li a.active{background:#dcfce7;color:#166534;font-weight:600}
    .price-range-form{}
    .price-inputs{display:flex;gap:8px;margin-bottom:10px}
    .price-inputs input{
      width:100%;border:1px solid #e5e7eb;border-radius:6px;
      padding:7px 10px;font-size:.875rem;
      outline:none;transition:border-color .2s
    }
    .price-inputs input:focus{border-color:#16a34a}
    .filter-btn{
      width:100%;background:#16a34a;color:#fff;border:none;
      padding:9px;border-radius:6px;cursor:pointer;
      font-size:.875rem;font-weight:600;
      transition:background .2s
    }
    .filter-btn:hover{background:#166534}
    .sidebar-divider{height:1px;background:#f3f4f6;margin:0}

    /* ── Products toolbar ────────────────────────────────────── */
    .products-toolbar{
      display:flex;justify-content:space-between;
      align-items:center;margin-bottom:16px;
      flex-wrap:wrap;gap:10px
    }
    .products-count{color:#6b7280;font-size:.875rem}
    .products-count strong{color:#111827}
    .active-filter-pill{
      display:inline-flex;align-items:center;gap:6px;
      background:#dcfce7;color:#166534;
      border-radius:20px;padding:4px 12px;
      font-size:.8rem;font-weight:600
    }
    .pill-remove{cursor:pointer;font-size:1rem;line-height:1;text-decoration:none;color:#166534}
    .sort-select{
      padding:8px 12px;border:1px solid #e5e7eb;
      border-radius:7px;background:#fff;
      font-size:.875rem;
      outline:none;cursor:pointer;transition:border-color .2s
    }
    .sort-select:focus{border-color:#16a34a}
    .product-grid{
      grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
      gap:16px;
    }

    /* ── Empty state ─────────────────────────────────────────── */
    .no-products{
      text-align:center;padding:60px 20px;background:#fff;
      border-radius:10px;grid-column:1/-1
    }
    .no-products h3{margin-bottom:8px}
    .no-products p{color:#6b7280;margin-bottom:16px}
    .no-products a{color:#16a34a;text-decoration:none;font-weight:600}

    /* ── Pagination ──────────────────────────────────────────── */
    .pagination{
      display:flex;justify-content:center;align-items:center;
      gap:5px;margin-top:28px;flex-wrap:wrap
    }
    .pagination a,.pagination span{
      padding:7px 13px;border:1px solid #e5e7eb;
      border-radius:7px;text-decoration:none;color:#111827;
      font-size:.875rem;transition:background .2s,color .2s
    }
    .pagination a:hover{background:#dcfce7;border-color:#16a34a;color:#166534}
    .pagination .pg-active{background:#16a34a;color:#fff;border-color:#16a34a;font-weight:700}
    .pagination .pg-disabled{opacity:.4;pointer-events:none}
    .pagination .pg-ellipsis{border:none;padding:7px 4px}

    /* ── Responsive ──────────────────────────────────────────── */
    @media(max-width:900px){
      .cat-layout{grid-template-columns:1fr}
      .sidebar{display:grid;grid-template-columns:1fr 1fr;gap:0}
      .sidebar-divider{display:none}
    }
    @media(max-width:600px){
      .cat-container{padding:0 14px}
      .sidebar{grid-template-columns:1fr}
      .product-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
      .cat-hero h1{font-size:1.35rem}
    }