/* QC&S – Quality Coffee & Service
   Design tokens en componenten uit de goedgekeurde Claude Design-versie (okt 2026). */

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:#fff;font-family:'Instrument Sans',system-ui,sans-serif;color:#111;font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:#111;text-decoration:none}
a:hover{color:#666}
input,button,select,textarea{font-family:inherit}
img{max-width:100%}
button{color:inherit}
:focus-visible{outline:2px solid #111;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Layout ---------- */
.wrap{max-width:1360px;margin:0 auto;padding-left:32px;padding-right:32px}
.sec{border-top:1px solid #ececec}
.soft{background:#fafafa}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:40px}
.span2{grid-column:span 2}
@media (max-width:720px){.span2{grid-column:auto}}
@media (max-width:600px){.wrap{padding-left:20px;padding-right:20px}}

/* ---------- Typografie ---------- */
.h1{margin:0;font-weight:600;line-height:1.04;letter-spacing:-.03em}
.h2{margin:0;font-size:clamp(29px,2.6vw,37px);font-weight:600;line-height:1.06;letter-spacing:-.03em}
.tag{align-self:flex-start;font-size:10px;font-weight:600;letter-spacing:.08em;border:1px solid #111;padding:2px 6px;text-transform:uppercase}
.tag-light{border-color:#fff}
.more{font-size:13px;font-weight:600}
.muted{color:#555}
.num{font-size:11px;color:#888}
.crumbs{font-size:12px;color:#888;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:#888}
.crumbs .cur{color:#111}

/* ---------- Knoppen ---------- */
.btn{height:40px;padding:0 18px;background:#111;color:#fff;font-size:13px;font-weight:500;display:inline-flex;align-items:center;border-radius:2px;border:0;cursor:pointer;white-space:nowrap}
.btn:hover{background:#333;color:#fff}
.btn-outline{background:transparent;color:#111;border:1px solid #111}
.btn-outline:hover{background:#111;color:#fff}
.btn-light{background:#fff;color:#111}
.btn-light:hover{background:#ddd;color:#111}
.btn-dark-outline{background:transparent;color:#fff;border:1px solid #555}
.btn-dark-outline:hover{background:transparent;border-color:#fff;color:#fff}
.btn-sm{height:36px;padding:0 12px}
.btn-md{height:38px;padding:0 16px}
.btn-lg{height:42px;padding:0 20px}
.btn-line{background:#fff;color:#111;border:1px solid #d6d6d6}
.btn-line:hover{background:#fff;border-color:#111;color:#111}

/* Keuzechips (formulieren, segmenten) */
.chip{height:38px;padding:0 14px;border:1px solid #d6d6d6;background:#fff;color:#111;font-size:13px;border-radius:2px;cursor:pointer}
.chip.on{border-color:#111;background:#111;color:#fff}
.chip:not(.on):hover{border-color:#111}
a.chip:hover{color:#111}
a.chip.on:hover{color:#fff}

/* Onderlijnde tekstfilter-knoppen */
.ul-opt{background:none;border:0;padding:4px 0;border-bottom:1.5px solid transparent;color:#888;font-size:13px;cursor:pointer}
.ul-opt.on{border-bottom-color:#111;color:#111}

/* Schakelaar */
.sw{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;font-size:13px;cursor:pointer;color:#111}
.sw i{width:28px;height:16px;border-radius:8px;background:#cfcfcf;position:relative;transition:background .2s;flex:none}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .2s}
.sw[aria-pressed="true"] i{background:#111}
.sw[aria-pressed="true"] i::after{left:14px}

/* Btw-schakelaar */
.vat{display:flex;border:1px solid #ddd;border-radius:2px;overflow:hidden;height:32px}
.vat button{border:0;padding:0 10px;font-size:12.5px;cursor:pointer;background:#fff;color:#111}
.vat button.on{background:#111;color:#fff}
.vat-sm{height:28px}

/* ---------- Kaarten & lijsten ---------- */
.card{background:#f3f3f3}
a.card:hover,.card-link:hover{background:#ececec;color:#111}
.lines{display:flex;flex-direction:column;font-size:13px}
.lines>*{padding:9px 0;border-top:1px solid #dcdcdc}
.lines-dark>*{border-top-color:#333}
.pill{font-size:12.5px;border:1px solid #d6d6d6;padding:4px 10px;border-radius:999px}
.mblend{mix-blend-mode:multiply}
.bgimg{background-position:center;background-repeat:no-repeat;background-size:contain;mix-blend-mode:multiply}

/* ---------- Formulieren ---------- */
.inp{height:44px;border:1px solid #d6d6d6;padding:0 12px;font-size:14px;font-weight:400;border-radius:2px;outline:none;background:#fff;color:#111;width:100%}
textarea.inp{height:auto;padding:12px;resize:vertical}
.inp:focus{border-color:#111}
.lbl{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500}
.opt{font-weight:400;color:#888}
.form-error{font-size:12px;color:#c03}

/* ---------- Accordeon (FAQ) ---------- */
.acc-item{border-top:1px solid #e8e8e8}
.acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;background:none;border:0;padding:12px 2px;font-size:13px;font-weight:500;text-align:left;cursor:pointer;color:#111}
.acc-btn span{font-size:16px;color:#555}
.acc-body{margin:0 0 14px;padding:0 2px;font-size:12.5px;color:#555}

details.faq{border-bottom:1px solid #e2e2e2}
details.faq summary{cursor:pointer;padding:18px 0;font-size:15.5px;font-weight:500}
details.faq p{margin:0 0 20px;color:#555;font-size:14px;max-width:720px}

/* Verticale tabs (home: service) */
.svc-tab{text-align:left;background:none;border:0;border-left:1.5px solid #e0e0e0;padding:5px 12px;color:#9a9a9a;font-size:13px;cursor:pointer}
.svc-tab[aria-selected="true"]{border-left-color:#111;color:#111}
.check-row{display:flex;gap:14px;padding:9px 0;border-top:1px solid #dcdcdc}
.check-row b{color:#888;font-weight:400;font-variant-numeric:tabular-nums}

.brand-card:hover{border-color:#111!important;color:#111}
@media (max-width:600px){.cfg-wrap{padding-left:20px!important;padding-right:20px!important}}

/* Prijs-schakelaar servicetarieven */
.seg-sw{display:flex;background:#ececec;padding:3px;align-self:flex-start;border-radius:2px}
.seg-sw button{height:30px;padding:0 12px;border:0;background:transparent;font-size:12.5px;cursor:pointer;border-radius:2px;color:#111}
.seg-sw button.on{background:#fff}

@media (max-width:480px){.cart-row{grid-template-columns:64px minmax(0,1fr)!important;padding:14px 16px!important;gap:12px!important}}
.map{aspect-ratio:16/7;min-height:280px}
@media (max-width:720px){.map{aspect-ratio:auto;height:320px}}
.btn-wrap{white-space:normal;height:auto;min-height:40px;padding-top:8px;padding-bottom:8px;line-height:1.3}
@media (max-width:560px){.rep-tab-l{display:none}.rep-tabs button{padding:14px 8px!important;align-items:center}}

/* Juridische pagina's */
.legal{max-width:720px;font-size:15px;line-height:1.7;color:#222}
.legal h2{margin:40px 0 10px;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:#111}
.legal p,.legal ul,.legal ol{margin:0 0 14px}
.legal ul,.legal ol{padding-left:20px}
.legal li{margin-bottom:6px}
.legal a{text-decoration:underline}
.legal .box{background:#f3f3f3;padding:20px 22px;margin:8px 0 18px}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;background:#111;color:#fff;padding:12px 18px;font-size:13px;border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100% - 32px)}

/* ---------- Header ---------- */
.hdr{background:#fff;border-bottom:1px solid #ececec;position:relative;z-index:30}
.hdr-top{border-bottom:1px solid #f0f0f0;font-size:11.5px;color:#777}
.hdr-top .wrap{padding-top:7px;padding-bottom:7px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px}
.hdr-top a{color:#777}
.hdr-top a.tel{color:#111;font-weight:600}
.hdr-main{min-height:58px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px}
.logo{order:1;font-weight:700;font-size:15px;letter-spacing:.14em;font-stretch:85%;color:#111}
.nav{order:2;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;display:flex;justify-content:safe center;gap:20px;font-size:13px;white-space:nowrap;align-self:stretch;min-height:44px}
.nav::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;color:#111;border-bottom:1.5px solid transparent;padding-top:1.5px}
.nav a.on{border-bottom-color:#111}
.hdr-actions{order:3;display:flex;align-items:center;gap:10px;font-size:13px;white-space:nowrap}
.cart-link{color:#111;display:flex;align-items:center;gap:6px}
.cart-n{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#eee;color:#777;font-size:11px;display:grid;place-items:center}
.cart-n.has{background:#111;color:#fff}
@media (max-width:1099px){
  .nav{order:4;flex-basis:100%;justify-content:flex-start;border-top:1px solid #f0f0f0}
}
@media (max-width:560px){
  .hdr-top .addr{display:none}
  .hdr-actions .btn-cfg{display:none}
}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid #e5e5e5;box-shadow:0 30px 40px -30px rgba(0,0,0,.15);z-index:40}
.mega[hidden]{display:none}
.mega-in{padding-top:32px;padding-bottom:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}
.mega-col{display:flex;flex-direction:column;gap:2px;font-size:13px}
.mega-col a{padding:6px 0;color:#111}
.mega-col a:hover{color:#666}
.mega-h{font-size:11.5px;color:#888;margin-bottom:10px}
.mega-feat{grid-column:span 2}
@media (max-width:720px){.mega-feat{grid-column:auto}}

/* ---------- Footer ---------- */
.ftr{background:#0f0f0f;color:#fff;overflow:hidden}
.ftr a:not(.btn){color:#fff}
.ftr a:not(.btn):hover{color:#bbb}
.ftr-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:32px;font-size:12.5px}
.ftr-cols>div{display:flex;flex-direction:column;gap:7px}
.ftr-h{color:#777;margin-bottom:6px}
.ftr-news{display:flex;border-bottom:1px solid #555}
.ftr-news input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font-size:12.5px;padding:8px 0;outline:none}
.ftr-news input::placeholder{color:#888}
.ftr-news button{background:none;border:0;color:#fff;cursor:pointer;font-size:14px}
.ftr .ftr-bottom a{color:#888}
.ftr .ftr-bottom a:hover{color:#fff}
a.on-dark{color:#fff}
a.on-dark:hover{color:#ccc}

/* ---------- Hero-achtergronden ---------- */
.grad-hero{background:linear-gradient(180deg,#e6e6e6 0%,#f5f5f5 74%,#ededed 74%,#fafafa 100%)}
.grad-soft{background:linear-gradient(180deg,#ececec 0%,#f7f7f7 100%)}
.shadow-ellipse{position:absolute;left:50%;height:40px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 70%)}

/* ---------- Tabellen (vergelijking/specs) ---------- */
.cmp-row{display:grid;grid-template-columns:minmax(140px,1.2fr) 1fr 1fr 1fr;gap:20px;padding:13px 0;border-top:1px solid #e5e5e5}
@media (max-width:640px){
  .cmp-scroll{overflow-x:auto}
  .cmp-scroll>div{min-width:600px}
}
.kv{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:20px;padding:16px 0;border-top:1px solid #e5e5e5}
@media (max-width:520px){.kv{grid-template-columns:1fr;gap:8px}}

/* ---------- Product sticky subnav ---------- */
.subnav{position:sticky;top:0;z-index:15;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #ececec}
.subnav-in{height:48px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12.5px}
.subnav-links{display:flex;gap:22px;color:#777;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.subnav-links::-webkit-scrollbar{display:none}
.subnav-links a{color:#777}
.subnav-buy{display:flex;align-items:center;gap:14px;white-space:nowrap}
@media (max-width:860px){.subnav-buy .nm,.subnav-buy .pr{display:none}}
.has-subnav section[id]{scroll-margin-top:60px}