/* Koppers productzoeker. Selectors start with :is(#kq-app,body) so they win over the configurator's
   generic "#kq-app button/input" rules when the finder sits inside the configurator. */
:is(#kq-app,body) .kq-finder{--n:#101d31;--t:#172236;--a:#0b809c;--a2:#076f86;--al:#e9f7fa;--b:#e4e9ef;--m:#657386;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--t);font-size:15px;max-width:1320px;margin:0 auto 20px}
:is(#kq-app,body) .kq-finder *{box-sizing:border-box}
:is(#kq-app,body) .kq-finder .kq-f{border:1px solid var(--b);border-radius:16px;background:#fff;padding:24px;box-shadow:0 7px 26px #14223a09}
:is(#kq-app,body) .kq-finder .kq-f-loading{padding:24px;color:var(--m)}
:is(#kq-app,body) .kq-finder .kq-f-title{display:flex;align-items:center;gap:12px;margin-bottom:18px}
:is(#kq-app,body) .kq-finder .kq-f-title b{background:var(--al);color:#087e98;border-radius:9px;padding:10px}
:is(#kq-app,body) .kq-finder h3{margin:0;font-size:20px;color:#14213a;line-height:1.3}
:is(#kq-app,body) .kq-finder h3.kq-f-h{font-size:17px;margin:22px 0 12px}

/* Zoekveld */
:is(#kq-app,body) .kq-finder .kq-f-search{position:relative}
:is(#kq-app,body) .kq-finder input.kq-f-input{width:100%;min-height:56px;margin:0;padding:14px 84px 14px 48px;font-size:17px;border:2px solid #cfdbe5;border-radius:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23657386' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='6'/%3E%3Cpath d='m13 13 5 5'/%3E%3C/svg%3E") no-repeat 16px 50%;color:var(--t);-webkit-appearance:none;appearance:none}
:is(#kq-app,body) .kq-finder input.kq-f-input:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 4px #0b809c22}
:is(#kq-app,body) .kq-finder input.kq-f-input::-webkit-search-cancel-button{display:none}
:is(#kq-app,body) .kq-finder .kq-f-status{position:absolute;right:52px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--m);pointer-events:none}
:is(#kq-app,body) .kq-finder:not(.is-loading) .kq-f-status{visibility:hidden}
:is(#kq-app,body) .kq-finder button.kq-f-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:0;border-radius:50%;background:#eef3f7;color:var(--t);font-size:20px;line-height:1;border:0;cursor:pointer}

/* Categorietegels: het herkenbare element van de zoeker */
:is(#kq-app,body) .kq-finder .kq-f-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
:is(#kq-app,body) .kq-finder button.kq-f-tile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:0 0 12px;background:#f5f8fb;border:1px solid var(--b);border-radius:14px;overflow:hidden;cursor:pointer;text-align:left;color:var(--t);white-space:normal;font-weight:400}
:is(#kq-app,body) .kq-finder button.kq-f-tile:hover{border-color:var(--a);background:#fff;filter:none}
:is(#kq-app,body) .kq-finder button.kq-f-tile:focus-visible{outline:3px solid var(--a);outline-offset:2px}
:is(#kq-app,body) .kq-finder .kq-f-tile img,:is(#kq-app,body) .kq-finder .kq-f-tileph{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#fff;margin-bottom:8px}
:is(#kq-app,body) .kq-finder .kq-f-tileph{display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;color:#b9cad8}
:is(#kq-app,body) .kq-finder .kq-f-tilename{padding:0 12px;font-weight:700;font-size:15px;line-height:1.25}
:is(#kq-app,body) .kq-finder .kq-f-tilecount{padding:0 12px;font-size:12px;color:var(--m)}

/* Kruimelpad en subcategorieën */
:is(#kq-app,body) .kq-finder .kq-f-crumbs{margin:16px 0 4px;font-size:14px;color:var(--m)}
:is(#kq-app,body) .kq-finder .kq-f-crumbs button{background:none;border:0;padding:0;color:var(--a2);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
:is(#kq-app,body) .kq-finder .kq-f-crumbs strong{color:var(--t)}
:is(#kq-app,body) .kq-finder .kq-f-subcats{margin-top:14px}

/* Filters */
:is(#kq-app,body) .kq-finder .kq-f-bar{margin-top:18px;padding-top:16px;border-top:1px solid #edf0f4}
:is(#kq-app,body) .kq-finder button.kq-f-ftoggle{display:none}
:is(#kq-app,body) .kq-finder .kq-f-filters{display:grid;gap:12px}
:is(#kq-app,body) .kq-finder .kq-f-group{display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:start}
:is(#kq-app,body) .kq-finder .kq-f-glabel{font-size:13px;font-weight:700;padding-top:8px;color:#33445a}
:is(#kq-app,body) .kq-finder .kq-f-subcats{display:grid;grid-template-columns:86px 1fr;gap:10px}
:is(#kq-app,body) .kq-finder .kq-f-chips,:is(#kq-app,body) .kq-finder .kq-f-swatches{display:flex;flex-wrap:wrap;gap:6px}
:is(#kq-app,body) .kq-finder button.kq-f-chip,:is(#kq-app,body) .kq-finder button.kq-f-sw{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid #d4dde7;border-radius:999px;background:#fff;color:var(--t);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
:is(#kq-app,body) .kq-finder button.kq-f-chip small{color:var(--m);font-weight:500}
:is(#kq-app,body) .kq-finder button.kq-f-chip:hover,:is(#kq-app,body) .kq-finder button.kq-f-sw:hover{border-color:var(--a);filter:none}
:is(#kq-app,body) .kq-finder button.is-on{background:var(--n);border-color:var(--n);color:#fff}
:is(#kq-app,body) .kq-finder button.is-on small{color:#c7d2e0}
:is(#kq-app,body) .kq-finder button.kq-f-sw.is-on span{box-shadow:0 0 0 2px #fff}
:is(#kq-app,body) .kq-finder button.kq-f-sw span{width:18px;height:18px;border-radius:50%;border:1px solid #0002;flex:none}
:is(#kq-app,body) .kq-finder select.kq-f-select,:is(#kq-app,body) .kq-finder .kq-f-sort select{min-height:36px;width:auto;margin:0;padding:6px 10px;border:1px solid #d4dde7;border-radius:999px;background:#fff;color:var(--t);font-size:13px}
:is(#kq-app,body) .kq-finder .kq-f-activebar{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
:is(#kq-app,body) .kq-finder button.kq-f-active{min-height:32px;padding:5px 12px;border-radius:999px;background:var(--al);color:var(--a2);border:0;font-size:13px;font-weight:700;cursor:pointer}
:is(#kq-app,body) .kq-finder button.kq-f-clear,:is(#kq-app,body) .kq-finder button.kq-f-link{background:none;border:0;padding:5px 6px;color:#b23b31;font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
:is(#kq-app,body) .kq-finder button.kq-f-link{color:var(--a2)}

/* Resultaten */
:is(#kq-app,body) .kq-finder .kq-f-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
:is(#kq-app,body) .kq-finder .kq-f-sort{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin:0}
:is(#kq-app,body) .kq-finder .kq-f-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
:is(#kq-app,body) .kq-finder.is-loading .kq-f-grid{opacity:.55;transition:opacity .15s}
:is(#kq-app,body) .kq-finder .kq-f-card{display:flex;flex-direction:column;border:1px solid var(--b);border-radius:14px;overflow:hidden;background:#fff;color:var(--t);text-decoration:none}
:is(#kq-app,body) .kq-finder a.kq-f-card:hover{border-color:var(--a)}
:is(#kq-app,body) .kq-finder a.kq-f-card:focus-visible{outline:3px solid var(--a);outline-offset:2px}
:is(#kq-app,body) .kq-finder .kq-f-img{display:block;aspect-ratio:1;background:#f7f9fb}
:is(#kq-app,body) .kq-finder .kq-f-img img{width:100%;height:100%;object-fit:contain;display:block}
:is(#kq-app,body) .kq-finder .kq-f-info{display:flex;flex-direction:column;gap:6px;padding:12px 14px;flex:1}
:is(#kq-app,body) .kq-finder .kq-f-brand{font-size:12px;font-weight:700;color:var(--a2)}
:is(#kq-app,body) .kq-finder .kq-f-name{font-weight:650;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:is(#kq-app,body) .kq-finder .kq-f-dots{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
:is(#kq-app,body) .kq-finder .kq-f-dot{width:14px;height:14px;border-radius:50%;border:1px solid #0002}
:is(#kq-app,body) .kq-finder .kq-f-more{font-size:12px;color:var(--m)}
:is(#kq-app,body) .kq-finder .kq-f-price{font-size:13px;color:var(--m);margin-top:auto}
:is(#kq-app,body) .kq-finder .kq-f-price b{color:var(--t);font-size:15px}
:is(#kq-app,body) .kq-finder .kq-f-cta{display:block;margin:0 14px 14px;padding:11px 12px;border-radius:9px;background:var(--a);color:#fff;font-weight:700;font-size:14px;text-align:center;border:0;cursor:pointer;white-space:normal}
:is(#kq-app,body) .kq-finder a.kq-f-card .kq-f-cta{background:var(--al);color:var(--a2)}
:is(#kq-app,body) .kq-finder a.kq-f-card:hover .kq-f-cta{background:var(--a);color:#fff}
:is(#kq-app,body) .kq-finder button.kq-f-moreBtn{display:block;margin:18px auto 0;padding:12px 22px;border-radius:9px;border:1px solid #cfe3ea;background:var(--al);color:var(--a2);font-weight:700;cursor:pointer}
:is(#kq-app,body) .kq-finder .kq-f-msg,:is(#kq-app,body) .kq-finder .kq-f-empty p{color:#40526a;line-height:1.6}
:is(#kq-app,body) .kq-finder .kq-f-empty{padding:8px 0}
:is(#kq-app,body) .kq-finder a.kq-f-call{display:block;margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--al);border:1px solid #bfe6ee;color:var(--a2);text-decoration:none;font-size:14px}
:is(#kq-app,body) .kq-finder a.kq-f-call small{color:var(--m)}

@media (max-width:760px){
 :is(#kq-app,body) .kq-finder .kq-f{padding:16px}
 :is(#kq-app,body) .kq-finder input.kq-f-input{font-size:16px}
 :is(#kq-app,body) .kq-finder .kq-f-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 :is(#kq-app,body) .kq-finder .kq-f-tilename{font-size:13px;padding:0 8px}
 :is(#kq-app,body) .kq-finder .kq-f-tilecount{font-size:11px;padding:0 8px}
 :is(#kq-app,body) .kq-finder .kq-f-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 :is(#kq-app,body) .kq-finder .kq-f-info{padding:10px}
 :is(#kq-app,body) .kq-finder .kq-f-cta{margin:0 10px 10px;font-size:13px}
 :is(#kq-app,body) .kq-finder button.kq-f-ftoggle{display:inline-flex;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid #d4dde7;background:#fff;color:var(--t);font-weight:700;cursor:pointer}
 :is(#kq-app,body) .kq-finder .kq-f-filters{display:none;margin-top:12px}
 :is(#kq-app,body) .kq-finder .kq-f-filters.is-open{display:grid}
 :is(#kq-app,body) .kq-finder .kq-f-group,:is(#kq-app,body) .kq-finder .kq-f-subcats{grid-template-columns:1fr;gap:4px}
 :is(#kq-app,body) .kq-finder .kq-f-glabel{padding-top:0}
}
@media (prefers-reduced-motion:reduce){:is(#kq-app,body) .kq-finder *{transition:none!important;scroll-behavior:auto!important}}