body{
    color:var(--black);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
  }
 
  :root{
    --orange:#F06000;
    --orange-dark:#C94E00;
    --orange-light:#FFF1E6;
    --black:#111111;
    --black-soft:#1B1B1B;
    --gray-900:#222222;
    --gray-600:#5C5C5C;
    --gray-300:#DADADA;
    --gray-100:#F4F4F4;
    --white:#FFFFFF;
    --radius:6px;
    --shadow:0 4px 18px rgba(0,0,0,0.08);
  }
  
  /* ===== Hero ===== */
  .hero{
    background:var(--zwarter);
    color:var(--white);
    padding:56px 32px 84px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute; right:-80px; top:-80px;
    width:320px;height:320px;border-radius:50%;
    background:color:var(--zwarter);
  }
  .hero::after{
    content:"";
    position:absolute; left:-100px; bottom:-120px;
    width:280px;height:280px;border-radius:50%;
    background:color:var(--zwarter);
  }
  .hero-eyebrow{
    color:var(--orange);font-weight:700;font-size:13px;
    letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px;
  }
  /* ===== Filters ===== */
  .filters-wrap{
    max-width:1400px;margin:-42px auto 0;padding:0 32px;
    position:relative;z-index:2;
  }
  .filters-card{
    background:var(--white);
    border:1px solid var(--gray-300);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:22px 24px;
  }
  .filters-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:16px;flex-wrap:wrap;gap:10px;
  }
  .filters-head h2{
    font-size:15px;font-weight:800;margin:0;
    text-transform:uppercase;letter-spacing:0.6px;
    display:flex;align-items:center;gap:8px;
  }
  .filters-head h2 svg{color:var(--orange);}
  .clear-filters{
    font-size:13px;font-weight:700;color:var(--gray-600);
    background:none;border:none;display:flex;align-items:center;gap:6px;
    padding:6px 8px;border-radius:6px;
  }
  .clear-filters:hover{color:var(--orange);background:var(--orange-light);}
  .filter-chips{
    display:flex;flex-wrap:wrap;gap:10px;
  }
  .chip{
    display:flex;align-items:center;gap:9px;
    border:1.5px solid var(--gray-300);
    background:var(--white);
    color:var(--black);
    padding:10px 16px;border-radius:999px;
    font-size:14px;font-weight:600;
    transition:all .15s ease;
    user-select:none;
  }
  .chip:hover{border-color:var(--orange);color:var(--orange-dark);}
  .chip svg{width:18px;height:18px;flex-shrink:0;}
  .chip.active{
    background:var(--orange);border-color:var(--orange);color:var(--white);
  }
  .chip:disabled{
    opacity:.35;
    cursor:not-allowed;
    pointer-events:none;
  }
  /* ===== Results ===== */
  .results-wrap{
    max-width:1400px;margin:0 auto;padding:38px 32px 90px;
  }
  .results-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:22px;flex-wrap:wrap;gap:12px;
  }
  .results-count{
    font-size:15px;color:var(--gray-600);
  }
  .results-count strong{color:var(--black);}
  .active-tags{
    display:flex;gap:8px;flex-wrap:wrap;
  }
  .tag-pill{
    font-size:12px;font-weight:700;background:var(--orange-light);
    color:var(--zwarter);padding:5px 10px;border-radius:999px;
    display:flex;align-items:center;gap:6px;
  }
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
    gap:22px;
  }
  .card{
    border:1px solid var(--gray-300);
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--white);
    transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
    display:flex;flex-direction:column;
  }
  .card:hover{
    box-shadow:0 14px 30px rgba(0,0,0,0.12);
    transform:translateY(-3px);
    border-color:#e7cbb0;
  }
  .card-media{
    background:var(--zwarter);
    box-sizing:border-box;
    padding:0 10%;
    display:flex;align-items:center;justify-content:center;
    position:relative;
    overflow:hidden;
  }
  .card-media svg{width:88px;height:88px;color:var(--white);opacity:.85;}
  /* Echte productfoto: volle hoogte, niets bijgesneden.
     10% padding links/rechts (border-box) laat de band "los" van de rand staan. */
  .card-media img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
  }
  .card-badge{
    position:absolute;top:10px;left:10px;
    background:var(--black);color:var(--white);
    font-size:11px;font-weight:800;letter-spacing:.4px;
    padding:4px 9px;border-radius:6px;text-transform:uppercase;
  }
  .card-body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1;}
  .card-title{font-size:16px;font-weight:800;line-height:1.3;}
  .card-spec{font-size:13px;color:var(--gray-600);}
  .card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
  .card-tag{
    font-size:11px;font-weight:700;color:var(--gray-600);
    background:var(--gray-100);padding:4px 9px;border-radius:6px;
  }
  .card-footer{
    margin-top:auto;padding-top:12px;border-top:1px solid var(--gray-100);
    display:flex;align-items:center;justify-content:space-between;
  }
  .card-price{font-size:16px;font-weight:800;}
  .card-price span{font-size:12px;font-weight:600;color:var(--gray-600);}
  .card-btn{
    font-size:13px;font-weight:700;color:var(--orange-dark);
    background:var(--orange-light);padding:9px 14px;border-radius:8px;
    border:none;display:flex;align-items:center;gap:6px;
  }
  .card-btn:hover{background:var(--orange);color:var(--white);}
  .empty-state{
    text-align:center;padding:70px 20px;color:var(--gray-600);
    display:none;
  }
  .empty-state svg{width:56px;height:56px;color:var(--gray-300);margin:0 auto 16px;}
  .empty-state h3{color:var(--black);font-size:18px;margin:0 0 6px;}
	

  @media (max-width: 900px){
    .nav-menu{display:none;}
    .hero h1{font-size:30px;}
  }