/* CO Koffie Machines - front-end styling.
   Alles is gescoped onder .co-km zodat het thema en Elementor niet geraakt worden. */

/* Gilmer: upload de fontbestanden naar assets/fonts/. Tot die tijd valt alles terug op Outfit. */
@font-face{font-family:'Gilmer';src:url('../fonts/Gilmer-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Gilmer';src:url('../fonts/Gilmer-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

.co-km{
  --head:'Gilmer','Outfit',sans-serif;
  --espresso:#2a1810;--brown-800:#3b2417;--brown-700:#4a2c1a;--accent:#6b4226;--caramel:#b07d4f;
  --cream:#fdfaf4;--card:#fff;--tan:#efe7da;--text:#33271d;--muted:#8a7a6b;
  --line:#e7ddcf;--line2:#f1e9dc;--check:#7d9a5d;--radius:16px;--shadow:0 18px 46px rgba(46,26,15,.12);
  --content-w:1450px;
  font-family:'Mulish',sans-serif;color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased;
}
.co-km *{box-sizing:border-box}
.co-km h1,.co-km h2,.co-km h3{font-family:var(--head);color:var(--brown-800);margin:0}
.co-km p{margin:0}
.co-km img{max-width:100%;height:auto}

/* Volle breedte uit de (boxed) thema-container halen, content capped op --content-w. */
.co-km-wrap{width:100vw;max-width:100vw;margin:75px calc(50% - 50vw) 0;padding:36px max(28px,calc(50vw - var(--content-w)/2)) 80px}

/* breadcrumb */
.co-km-crumbs{font-size:13.5px;color:var(--muted);margin-bottom:30px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.co-km-crumbs a{color:var(--brown-700);text-decoration:none;font-weight:600}
.co-km-crumbs a:hover{text-decoration:underline}
.co-km-crumbs .co-km-sep{opacity:.5}
.co-km-crumbs .co-km-cur,.co-km-crumbs .co-km-cur-soort{color:var(--muted)}

/* product layout */
.co-km-pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:54px;align-items:center}
@media(max-width:900px){.co-km-pdp{grid-template-columns:1fr;gap:34px}}

/* gallery */
.co-km-gallery{position:relative}
.co-km-stage{position:relative;background:transparent;border:none;min-height:480px;display:flex;align-items:center;justify-content:center;overflow:visible}
@media(max-width:900px){.co-km-stage{min-height:360px}}
.co-km-stage img{position:relative;z-index:1;width:auto;height:auto;max-width:100%;max-height:480px;object-fit:contain;display:none;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.co-km-stage img.co-km-on{display:block}
.co-km-stage:hover img.co-km-on{transform:scale(1.02)}
.co-km-flag{position:absolute;top:20px;left:0;z-index:2;background:var(--accent);color:#fff;font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:1.4px;padding:7px 16px 7px 18px;border-radius:0 4px 4px 0;box-shadow:0 6px 16px rgba(107,66,38,.3)}
.co-km-gnav{position:absolute;right:18px;bottom:18px;z-index:2;display:flex;gap:8px}
.co-km-gnav button{width:50px;height:50px;border:none;border-radius:12px;background:var(--brown-800);color:#fff;font-size:18px;cursor:pointer;transition:.15s}
.co-km-gnav button:hover{background:var(--accent)}
.co-km-dots{display:flex;gap:9px;justify-content:center;margin-top:18px}
.co-km-dot{width:9px;height:9px;border-radius:50%;background:#d8cdbb;border:none;cursor:pointer;transition:.15s;padding:0}
.co-km-dot.co-km-on{background:var(--accent);transform:scale(1.15)}

/* info */
.co-km-eyebrow{font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--caramel)}
.co-km-info h1{font-size:clamp(34px,4.4vw,50px);line-height:1.05;font-weight:700;color:var(--espresso);margin:14px 0 0;letter-spacing:-.3px}
.co-km-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.co-km-chip{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--brown-700);background:linear-gradient(180deg,#ffffff,#fdf7ef);border:1px solid var(--line);padding:7px 12px 7px 10px;border-radius:30px;box-shadow:0 2px 8px rgba(58,33,16,.05)}
.co-km-chip b{color:var(--espresso)}
.co-km-chip::before{content:"";flex:0 0 auto;width:6.5px;height:6.5px;border-radius:50%;background:var(--caramel);box-shadow:0 0 0 0 rgba(176,125,79,.5);animation:co-km-chippulse 2.4s ease-out infinite}
@keyframes co-km-chippulse{0%{box-shadow:0 0 0 0 rgba(176,125,79,.5)}70%{box-shadow:0 0 0 7px rgba(176,125,79,0)}100%{box-shadow:0 0 0 0 rgba(176,125,79,0)}}
@media(prefers-reduced-motion:reduce){.co-km-chip::before{animation:none}}
.co-km-pricecard{margin-top:26px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;box-shadow:0 16px 40px -28px rgba(58,33,16,.4)}
.co-km-pc-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.co-km-pc-koop{font-family:var(--head);font-weight:700;font-size:34px;color:var(--espresso);line-height:1}
.co-km-pc-mnd{font-size:15px;color:var(--brown-700);font-weight:600}
.co-km-pc-mnd b{font-family:var(--head);font-size:18px}
.co-km-pc-meta{display:flex;align-items:center;gap:14px;margin-top:13px;flex-wrap:wrap}
.co-km-save{background:#eef3e6;color:#4f6b34;font-weight:700;font-size:12.5px;padding:6px 13px;border-radius:30px}
.co-km-advies{font-size:13px;color:var(--muted)}
.co-km-advies s{margin-left:3px}
.co-km-excl{font-size:11.5px;color:var(--muted);font-style:italic;margin-top:13px}
.co-km-lead{margin-top:22px;color:#5a4636;font-size:15px;max-width:48ch}
.co-km-lead-top{margin-top:16px;font-size:15.5px}
.co-km-lead b{color:var(--brown-800)}
.co-km-trust{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.co-km-trust li{display:flex;gap:9px;align-items:center;font-size:12px;color:#4a3a2c;font-weight:600;white-space:nowrap}
.co-km-trust .co-km-c{flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:var(--check);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800}
.co-km-cta{display:flex;gap:13px;margin-top:24px;flex-wrap:wrap}
.co-km-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'Mulish',sans-serif;font-weight:700;font-size:15px;padding:16px 28px;border-radius:44px;cursor:pointer;text-decoration:none;text-align:center;border:1.6px solid var(--accent);position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.co-km-bic{display:inline-flex;align-items:center}
.co-km-bic svg{width:18px;height:18px;display:block}
.co-km-barr{width:17px;height:17px;margin-left:-2px;transition:transform .25s}
.co-km-btn:hover .co-km-barr{transform:translateX(4px)}
.co-km-btn::before{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s;pointer-events:none}
.co-km-btn:hover::before{left:150%}
.co-km-btn-primary{background:var(--accent);color:#fff;box-shadow:0 12px 26px -12px rgba(107,66,38,.7);animation:co-km-btnglow 2.6s ease-in-out infinite}
.co-km-btn-primary:hover{background:var(--brown-700);border-color:var(--brown-700);transform:translateY(-2px);color:#fff;animation:none}
@keyframes co-km-btnglow{0%,100%{box-shadow:0 12px 26px -12px rgba(107,66,38,.55),0 0 0 0 rgba(199,154,107,.5)}50%{box-shadow:0 14px 30px -12px rgba(107,66,38,.7),0 0 0 9px rgba(199,154,107,0)}}
@media(prefers-reduced-motion:reduce){.co-km-btn-primary{animation:none}}
.co-km-btn-ghost{background:transparent;color:var(--brown-700)}
.co-km-btn-ghost .co-km-bic{color:var(--accent)}
.co-km-btn-ghost:hover{background:#fff;transform:translateY(-2px);border-color:var(--accent)}

/* contactbanner */
.co-km-contact{margin-top:60px;position:relative;border-radius:28px;padding:52px 56px;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
  background:
    radial-gradient(700px 360px at 88% 120%, rgba(199,154,107,.30), transparent 60%),
    radial-gradient(520px 300px at 6% -30%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(120deg,#26150c 0%,#3b2417 46%,#5a3920 100%);
  box-shadow:0 34px 70px -34px rgba(38,21,12,.7)}
.co-km-blob{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.co-km-blob svg{width:100%;height:100%;display:block}
.co-km-blob-right{opacity:.85;transform:scaleX(-1)}
.co-km-blob-left{opacity:.5}
.co-km-grain{position:absolute;inset:0;opacity:.05;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.co-km-ctxt{flex:1 1 480px;min-width:300px;position:relative;z-index:2}
.co-km-ce{font-family:'Mulish',sans-serif;font-weight:700;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:#fff}
.co-km-contact h2{font-family:var(--head);color:#fff;font-size:clamp(26px,3.2vw,40px);font-weight:700;line-height:1.08;letter-spacing:-.4px;margin-top:14px}
.co-km-contact h2 .co-km-soft{display:block;color:#e7cda8;font-weight:600}
.co-km-csub{color:#fff;font-size:15px;margin-top:14px;max-width:760px}
.co-km-cbtns{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.co-km-cbtn{display:inline-flex;align-items:center;gap:10px;font-family:'Mulish',sans-serif;font-weight:700;font-size:15px;text-decoration:none;padding:15px 26px;border-radius:44px;transition:transform .18s,box-shadow .18s,background .18s}
.co-km-cbtn svg{width:18px;height:18px}
.co-km-cbtn-gold{background:linear-gradient(180deg,#d9b083,#c79a6b);color:#2a1810;box-shadow:0 14px 30px -12px rgba(199,154,107,.8)}
.co-km-cbtn-gold:hover{transform:translateY(-2px);box-shadow:0 20px 38px -14px rgba(199,154,107,.9);color:#2a1810}
.co-km-cbtn-ghost{background:transparent;color:#fff;border:1.6px solid rgba(255,255,255,.45)}
.co-km-cbtn-ghost:hover{background:rgba(255,255,255,.10);transform:translateY(-2px);color:#fff}

.co-km-advisor{position:relative;z-index:2;flex:0 0 auto;display:flex;align-items:center;gap:18px}
.co-km-pwrap{position:relative;width:128px;height:128px}
.co-km-ring{position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(from 200deg,#c79a6b,#e7cda8,#8a5a32,#c79a6b)}
.co-km-portrait{position:relative;width:128px;height:128px;border-radius:50%;background:#f0e6d6;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;border:4px solid #2a1810}
.co-km-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.co-km-live{position:absolute;right:6px;bottom:10px;width:20px;height:20px;border-radius:50%;background:#5fbf6a;border:3px solid #2a1810;z-index:3}
.co-km-live::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:rgba(95,191,106,.45);animation:co-km-pulse 2s infinite}
@keyframes co-km-pulse{0%{transform:scale(.7);opacity:.8}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.co-km-advisor-meta{color:#fff}
.co-km-advisor-meta .co-km-nm{font-family:var(--head);font-weight:700;font-size:18px}
.co-km-advisor-meta .co-km-rl{color:#d9c3aa;font-size:13px;font-weight:600;margin-top:2px}
.co-km-advisor-meta .co-km-on{display:inline-flex;align-items:center;gap:7px;color:#9fd6a6;font-size:12px;font-weight:700;margin-top:8px}
.co-km-advisor-meta .co-km-on i{width:7px;height:7px;border-radius:50%;background:#5fbf6a;display:inline-block}
@media(max-width:760px){.co-km-contact{padding:38px 30px;gap:28px}.co-km-advisor{flex-direction:row}}
@media(max-width:480px){.co-km-advisor-meta{display:none}}

/* Mobiele adviseur-kaart (vervangt de banner op kleine schermen) */
.co-km-contact-m{display:none}
@media(max-width:600px){
  .co-km-contact{display:none}
  .co-km-contact-m{display:block;margin-top:32px;border-radius:20px;padding:16px;position:relative;overflow:hidden;
    background:radial-gradient(420px 200px at 90% -25%,rgba(199,154,107,.24),transparent 60%),linear-gradient(135deg,#26150c,#3b2417 58%,#5a3920);
    box-shadow:0 22px 44px -24px rgba(38,21,12,.65)}
  .co-km-cm-head{display:flex;align-items:center;gap:11px;margin-bottom:13px}
  .co-km-cm-av{position:relative;width:46px;height:46px;flex:0 0 auto}
  .co-km-cm-ring{position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 200deg,#c79a6b,#e7cda8,#8a5a32,#c79a6b)}
  .co-km-cm-av img{position:relative;width:46px;height:46px;border-radius:50%;object-fit:cover;border:3px solid #26150c;display:block}
  .co-km-cm-dot{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;background:#5fbf6a;border:2.5px solid #26150c;z-index:2}
  .co-km-cm-id{flex:1;min-width:0}
  .co-km-cm-nm{font-family:var(--head);font-weight:700;color:#fff;font-size:15px;display:flex;align-items:center;gap:5px;line-height:1.1}
  .co-km-cm-verif{display:inline-flex;color:#e7cda8}
  .co-km-cm-verif svg{width:13px;height:13px}
  .co-km-cm-rl{color:#d9c3aa;font-size:12px;font-weight:600;margin-top:2px}
  .co-km-cm-status{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:#cfe0b8;background:rgba(125,154,93,.18);border:1px solid rgba(125,154,93,.4);padding:4px 10px;border-radius:30px}
  .co-km-cm-status i{width:6px;height:6px;border-radius:50%;background:#5fbf6a}
  .co-km-cm-bubble{background:rgba(255,255,255,.07);border:1px solid rgba(231,205,168,.18);border-radius:5px 15px 15px 15px;padding:12px 14px;color:#f3e7d6;font-size:13.5px;line-height:1.5;margin-bottom:14px}
  .co-km-cm-action{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:13px;text-decoration:none;background:rgba(255,255,255,.05);border:1px solid rgba(231,205,168,.16);margin-top:9px;transition:transform .15s,background .15s,border-color .15s;width:100%;cursor:pointer;font:inherit;text-align:left}
  .co-km-cm-action:active{transform:scale(.99);background:rgba(255,255,255,.09)}
  .co-km-cm-ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#26150c}
  .co-km-cm-ic svg{width:18px;height:18px}
  .co-km-cm-phone{background:linear-gradient(180deg,#d9b083,#c79a6b)}
  .co-km-cm-wa{background:#5fbf6a;color:#0c2a14}
  .co-km-cm-cb{background:rgba(231,205,168,.16);color:#e7cda8}
  .co-km-cm-tx{flex:1;min-width:0;color:#fff}
  .co-km-cm-tx b{font-family:var(--head);font-weight:700;font-size:14px;display:block;line-height:1.15}
  .co-km-cm-tx span{color:#c9b49c;font-size:12px}
  .co-km-cm-go{flex:0 0 auto;color:#9a8771}
  .co-km-cm-go svg{width:18px;height:18px;display:block}
  .co-km-cm-go-rot{transition:transform .25s}
  .co-km-cm-cb-toggle.co-km-open .co-km-cm-go-rot{transform:rotate(90deg)}
  .co-km-cm-cb-row{display:none;gap:8px;margin-top:9px}
  .co-km-cm-cb-row.co-km-open{display:flex}
  .co-km-cm-cb-input{flex:1;min-width:0;padding:12px 13px;border:1px solid rgba(231,205,168,.2);border-radius:11px;background:rgba(255,255,255,.06);color:#fff;font-family:'Mulish',sans-serif;font-size:13.5px}
  .co-km-cm-cb-input::placeholder{color:#9a8771}
  .co-km-cm-cb-input:focus{outline:none;border-color:#c79a6b;background:rgba(255,255,255,.1)}
  .co-km-cm-cb-send{flex:0 0 auto;width:46px;border:none;border-radius:11px;background:linear-gradient(180deg,#d9b083,#c79a6b);cursor:pointer;display:flex;align-items:center;justify-content:center}
  .co-km-cm-cb-send svg{width:17px;height:17px}
  .co-km-cm-cb-ok{display:none;align-items:center;gap:7px;margin-top:10px;font-size:12.5px;font-weight:700;color:#cfe0b8}
  .co-km-cm-cb-ok.co-km-on{display:flex}
}

/* Compacter op mobiel: minder scrollen tot de knoppen. */
@media(max-width:600px){
  .co-km-wrap{padding:16px 18px 54px;margin-top:24px}
  .co-km-crumbs{margin-bottom:16px}
  .co-km-pdp{gap:18px}
  .co-km-stage{min-height:280px}
  .co-km-stage img{max-height:280px}
  .co-km-dots{margin-top:12px}
  .co-km-info h1{font-size:27px;line-height:1.12;margin:9px 0 0}
  .co-km-eyebrow{font-size:11px;letter-spacing:2px}
  .co-km-chips{margin-top:14px;gap:7px}
  .co-km-chip{padding:7px 11px 7px 10px;font-size:11px;gap:7px}
  .co-km-pricecard{margin-top:16px;padding:18px}
  .co-km-pc-koop{font-size:30px}
  .co-km-lead-top{margin-top:11px;font-size:14.5px}
  .co-km-trust{margin-top:15px;gap:9px}
  .co-km-trust li{font-size:13px;white-space:normal}
  .co-km-cta{margin-top:18px;gap:10px}
  .co-km-cta .co-km-btn{flex:1 1 auto;justify-content:center;padding:15px 18px}
}

/* specificaties (altijd open) */
.co-km-details{margin-top:54px;border-top:1px solid var(--line);padding-top:8px}
.co-km-specs-title{font-family:var(--head);font-weight:700;font-size:20px;color:var(--brown-800);margin:22px 0 6px}
.co-km-details .co-km-spectable{margin-top:14px}

/* uitklapblokken (overig) */
.co-km-acc-item{border-bottom:1px solid var(--line)}
.co-km-acc-head{width:100%;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 2px;font-weight:700;font-size:18px;color:var(--brown-800);text-align:left;font-family:var(--head)}
.co-km-acc-head .co-km-ico{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:var(--tan);color:var(--brown-700);display:flex;align-items:center;justify-content:center;font-size:14px;transition:transform .2s}
.co-km-acc-item.co-km-open .co-km-acc-head .co-km-ico{transform:rotate(180deg);background:var(--accent);color:#fff}
.co-km-acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.co-km-acc-body .co-km-inner{padding:4px 2px 26px;font-size:14.5px;color:#4f3f2f;max-width:980px}
.co-km-spectable{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
@media(max-width:700px){.co-km-spectable{grid-template-columns:1fr}}
.co-km-spec{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.co-km-spec span:first-child{color:var(--muted);font-weight:600}
.co-km-spec span:last-child{text-align:right;color:var(--brown-800);font-weight:600;max-width:60%}
.co-km-pricegrid{display:grid;grid-template-columns:repeat(2,minmax(0,240px));gap:14px;margin-top:8px}
.co-km-pricegrid .co-km-pc{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.co-km-pricegrid .co-km-pc .co-km-k{font-size:12px;color:var(--muted);font-weight:700}
.co-km-pricegrid .co-km-pc .co-km-v{font-family:var(--head);font-weight:700;color:var(--accent);font-size:19px;margin-top:3px}
.co-km-advieshelp{margin-top:14px;font-size:13.5px;color:var(--brown-700);font-weight:600}
.co-km-advieshelp a{color:var(--accent)}
.co-km-note{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:24px}

/* onderste contact + formulier */
.co-km-wrap-bottom{padding-top:0}
.co-km-leadform{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:860px){.co-km-leadform{grid-template-columns:1fr;gap:36px}}
.co-km-lf-text .co-km-eyebrow{margin-bottom:14px}
.co-km-lf-text h2{font-size:clamp(28px,3.4vw,40px);line-height:1.08;font-weight:700;color:var(--espresso);letter-spacing:-.4px}
.co-km-lf-text p{margin-top:18px;color:#5a4636;font-size:15.5px;max-width:46ch}
.co-km-lf-contact{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.co-km-lf-contact a{display:inline-flex;align-items:center;gap:12px;color:var(--brown-800);text-decoration:none;font-weight:700;font-size:15px}
.co-km-lf-contact .co-km-ic{flex:0 0 auto;width:40px;height:40px;border-radius:12px;background:var(--tan);color:var(--brown-700);display:flex;align-items:center;justify-content:center}
.co-km-lf-contact a:hover{color:var(--accent)}
.co-km-lf-contact small{display:block;color:var(--muted);font-weight:600;font-size:12.5px}
.co-km-lf-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:0 24px 56px -30px rgba(58,33,16,.4)}
.co-km-lf-card h3{font-size:21px;font-weight:700;color:var(--brown-800);margin-bottom:6px}
.co-km-lf-sub{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.co-km-lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.co-km-lf-grid{grid-template-columns:1fr}}
.co-km-fld{display:flex;flex-direction:column;gap:6px}
.co-km-fld.co-km-full{grid-column:1/-1}
.co-km-fld label{font-size:12.5px;font-weight:700;color:var(--brown-700)}
.co-km-fld input{padding:13px 14px;border:1px solid var(--line);border-radius:11px;font-family:'Mulish',sans-serif;font-size:14.5px;color:var(--text);background:var(--cream);transition:.15s;width:100%}
.co-km-fld input:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(107,66,38,.10)}
.co-km-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.co-km-lf-submit{margin-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.co-km-lf-submit button{font-family:'Mulish',sans-serif;font-weight:700;font-size:15px;padding:15px 34px;border:none;border-radius:44px;background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 12px 26px -12px rgba(107,66,38,.7);transition:.18s}
.co-km-lf-submit button:hover{background:var(--brown-700);transform:translateY(-2px)}
.co-km-lf-priv{font-size:11.5px;color:var(--muted);max-width:30ch}
.co-km-lf-ok{display:none;margin-top:18px;background:#eef3e6;color:#4f6b34;font-weight:700;font-size:14px;padding:14px 18px;border-radius:12px}
.co-km-lf-ok.co-km-on{display:block}

/* ---------- Catalogus ---------- */
.co-km-sec{padding:48px 0}
.co-km-cat-wrap{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0 max(24px,calc(50vw - var(--content-w)/2))}

/* Layout: filters links, producten rechts */
.co-km-cat-layout{display:grid;grid-template-columns:255px 1fr;gap:34px;align-items:start}
@media(max-width:900px){.co-km-cat-layout{grid-template-columns:1fr;gap:18px}}

.co-km-filterbar{display:none;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.co-km-filter-toggle{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;border:none;font-family:var(--head);font-weight:700;font-size:14px;padding:12px 20px;border-radius:30px;cursor:pointer}
.co-km-filter-toggle:hover{background:var(--brown-700)}
.co-km-filter-toggle svg{width:16px;height:16px}

/* Filterzijbalk (exacte stijl uit de referentie). Statisch: scrollt gewoon
   met de pagina mee, geen aparte scrollbalk. */
.co-km-filters{padding:0}
.co-km-ftitle{font-family:var(--head);font-weight:700;font-size:18px;color:var(--brown-800);margin-bottom:6px;letter-spacing:.3px}
.co-km-count{font-size:13.5px;color:var(--muted);font-weight:600}
.co-km-resultbar{margin-bottom:18px}
.co-km-fgroup{border-top:1px solid var(--line);padding:16px 0}
.co-km-fgroup:first-of-type{border-top:none}
.co-km-fgroup h4{font-family:var(--head);font-weight:600;font-size:13.5px;color:var(--brown-700);margin:0 0 11px;text-transform:none}
.co-km-fopt{display:flex;align-items:center;gap:9px;margin:0 0 9px;cursor:pointer;font-size:14px;color:#4f3f30}
.co-km-fopt input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.6px solid #c9b9a5;border-radius:5px;cursor:pointer;position:relative;flex:0 0 auto;margin:0;background:#fff}
.co-km-fopt input:checked{background:var(--accent);border-color:var(--accent)}
.co-km-fopt input:checked::after{content:"\2713";position:absolute;inset:0;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.co-km-fopt:hover{color:var(--accent)}
.co-km-price-row{display:flex;gap:10px;align-items:center}
.co-km-pf{flex:1;display:flex;align-items:center;gap:4px;border:1.6px solid #d8c9b6;border-radius:9px;padding:7px 10px;background:#fff}
.co-km-pf span{color:var(--muted);font-size:13px}
.co-km-pf input{border:none;outline:none;width:100%;font-size:13px;font-family:'Mulish',sans-serif;color:var(--text);background:transparent;padding:0;margin:0}
.co-km-pf input:focus{outline:none;box-shadow:none}
.co-km-reset{margin-top:16px;background:none;border:1.5px solid #d8c9b6;color:var(--brown-700);padding:10px 14px;border-radius:30px;font-family:var(--head);font-weight:600;font-size:13px;cursor:pointer;width:100%}
.co-km-reset:hover{background:#f4eee4;border-color:var(--accent);color:var(--accent)}

/* De kern-fix: kaarten met het hidden-attribuut echt verbergen
   (anders wint .co-km-card{display:flex} van de browser-standaard). */
.co-km-card[hidden],.co-km-empty[hidden]{display:none !important}

/* Mobiel: filters inklapbaar achter een knop */
@media(max-width:900px){
  .co-km-filterbar{display:flex}
  .co-km-filters{display:none;margin-bottom:6px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
  .co-km-filters.co-km-open{display:block}
}

.co-km-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1200px){.co-km-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.co-km-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.co-km-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.co-km-grid{grid-template-columns:1fr}}
.co-km-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;cursor:pointer}
.co-km-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#dcc9ad}
.co-km-card-link{position:absolute;inset:0;z-index:3;font-size:0;text-indent:-9999px;overflow:hidden;background:transparent}
.co-km-card-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.co-km-ph{position:relative;height:200px;background:#fff;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.co-km-ph img{max-width:84%;max-height:92%;object-fit:contain}
.co-km-badge{position:absolute;top:12px;left:0;background:var(--accent);color:#fff;font-family:var(--head);font-weight:700;font-size:10.5px;letter-spacing:.5px;padding:5px 12px 5px 14px;border-radius:0 30px 30px 0}
.co-km-badge.co-km-acc{background:#8a7a6b}
.co-km-card-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.co-km-card-body h3{font-size:16.5px;font-weight:700;margin-bottom:4px;line-height:1.25}
.co-km-cat{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:13px}
.co-km-feats{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:7px}
.co-km-feats li{font-size:13px;color:#52412f;display:flex;gap:8px;align-items:flex-start}
.co-km-feats li::before{content:"\2713";color:var(--check);font-weight:800;font-size:13px;margin-top:1px}
.co-km-foot{margin-top:auto}
.co-km-price-line{display:flex;justify-content:space-between;align-items:center;gap:12px}
.co-km-price{font-family:var(--head);font-weight:700;color:var(--accent);font-size:15px}
.co-km-price-mnd{color:var(--muted);font-weight:600;font-size:13px}
.co-km-sub{font-size:12px;color:var(--muted);margin-top:2px}
.co-km-detail{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.15s}
.co-km-card:hover .co-km-detail{background:var(--brown-700)}
.co-km-empty{grid-column:1/-1;text-align:center;padding:50px 0;color:var(--muted);font-size:15px}

/* ---------- Slider ---------- */
.co-km-slider-sec{padding:40px 0}
.co-km-slider-wrap{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0 max(24px,calc(50vw - var(--content-w)/2))}
.co-km-slider-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.co-km-slider-head h2{font-size:clamp(22px,2.6vw,30px);font-weight:700;color:var(--espresso)}
.co-km-slider-nav{display:flex;gap:10px}
.co-km-slider-nav button{width:46px;height:46px;border:none;border-radius:12px;background:var(--brown-800);color:#fff;font-size:18px;cursor:pointer;transition:.15s}
.co-km-slider-nav button:hover{background:var(--accent)}
.co-km-slider-nav button:disabled{opacity:.35;cursor:default}
.co-km-slider-track{display:flex;gap:22px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch;cursor:grab}
.co-km-slider-track.co-km-grab{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none;user-select:none}
.co-km-slider-track::-webkit-scrollbar{height:8px}
.co-km-slider-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.co-km-slide{position:relative;flex:0 0 300px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;cursor:pointer}
.co-km-slide:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#dcc9ad}
@media(max-width:520px){.co-km-slide{flex:0 0 80%}}
.co-km-slide-ph{position:relative;height:210px;background:#fff;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.co-km-slide-ph img{max-width:84%;max-height:92%;object-fit:contain}
.co-km-slide-body{padding:18px 18px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.co-km-slide-body h3{font-size:16.5px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-km-slide-sub{font-size:12.5px;color:var(--muted);font-weight:600}
.co-km-slide-chips{margin:0}
.co-km-slide-chips .co-km-chip{max-width:100%}
.co-km-slide-desc{font-size:13px;line-height:1.5;color:#52412f;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;height:calc(1.5em * 3)}
.co-km-slide-foot{margin-top:auto;padding-top:4px;display:flex;flex-direction:column;gap:12px}
.co-km-slide-foot .co-km-price{font-size:17px}
.co-km-slide-btn{margin-top:0;width:100%;align-self:stretch;padding:14px 24px;font-size:14px;z-index:4;animation:none;box-shadow:0 10px 22px -14px rgba(107,66,38,.7)}
.co-km-slide-btn .co-km-barr{position:absolute;right:20px;top:50%;transform:translateY(-50%);margin:0}
.co-km-slide-btn:hover .co-km-barr{transform:translateY(-50%) translateX(4px)}

/* Reviews-sectie: zie templates/part-reviews.php (zelfstandig gestyled onder .cok-co). */