/* CO Koffie Machines - detailpagina voor THUIS-machines (SPRSO-magazine-design).
   Volledig gescoped onder .cok-sprso, geen globale resets, font Montserrat. */
.cok-sprso{
  --esp:#2B1A0E;
  --brown8:#4B2D15;
  --brown:#693F19;
  --cream:#F7F1E8;
  --sand:#D6C6BF;
  --gold:#C9A05C;
  --gold-soft:rgba(201,160,92,.28);
  --ink:#3A2A1C;
  font-family:'Montserrat',sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  /* Full-bleed en -100px omhoog: de crème-achtergrond loopt onder de
     transparante thema-header door zodat er bovenin geen witte strook staat.
     Identiek principe als de zakelijke .co-km-banner. padding-top houdt de
     inhoud netjes onder de header. */
  width:100vw;
  margin:-100px calc(50% - 50vw) 0;
  padding-top:100px;
  box-sizing:border-box;
}
.cok-sprso *{box-sizing:border-box;margin:0;padding:0}
.cok-sprso img{max-width:100%;display:block}
.cok-sprso button{font-family:inherit;cursor:pointer;border:none;background:none}
.cok-sprso .cs-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.cok-sprso h1,.cok-sprso h2,.cok-sprso h3{font-family:'Montserrat',sans-serif;font-weight:700;color:var(--brown8);line-height:1.12;letter-spacing:-.01em}

/* reveal */
.cok-sprso .cs-rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.cok-sprso .cs-rv.cs-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.cok-sprso .cs-rv{opacity:1;transform:none;transition:none}}

/* breadcrumb */
.cok-sprso .cs-crumb{padding:26px 0 0;font-size:13px;color:#8a7561;display:flex;gap:8px;flex-wrap:wrap}
.cok-sprso .cs-crumb a{color:#8a7561;text-decoration:none}
.cok-sprso .cs-crumb a:hover{color:var(--brown)}
.cok-sprso .cs-crumb span{color:var(--brown8);font-weight:600}

/* top: gallery + info */
.cok-sprso .cs-top{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;padding:30px 0 70px;align-items:start}
.cok-sprso .cs-gallery{position:sticky;top:90px}
.cok-sprso .cs-stage{position:relative;background:linear-gradient(160deg,#EFE7DA,#E4D8C8);border-radius:24px;padding:44px 30px;min-height:460px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cok-sprso .cs-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(201,160,92,.22),transparent 55%);pointer-events:none}
.cok-sprso .cs-stage::after{content:"";position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:380px;height:380px;border:1px solid var(--gold-soft);border-radius:50%;pointer-events:none}
.cok-sprso .cs-stage img{position:relative;z-index:1;max-height:420px;width:auto;filter:drop-shadow(0 30px 40px rgba(43,26,14,.28));transition:opacity .35s ease}
.cok-sprso .cs-badge-home{position:absolute;top:18px;left:18px;z-index:2;background:var(--esp);color:var(--cream);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border-radius:100px;display:flex;align-items:center;gap:7px}
.cok-sprso .cs-badge-home svg{width:13px;height:13px;stroke:var(--gold)}
.cok-sprso .cs-thumbs{display:flex;gap:12px;margin-top:14px}
.cok-sprso .cs-thumb{flex:1;background:#EFE7DA;border:2px solid transparent;border-radius:16px;padding:12px;display:flex;align-items:center;justify-content:center;transition:border-color .25s,transform .25s}
.cok-sprso .cs-thumb img{max-height:86px;width:auto}
.cok-sprso .cs-thumb:hover{transform:translateY(-2px)}
.cok-sprso .cs-thumb.cs-act{border-color:var(--gold)}

.cok-sprso .cs-info h1{font-size:clamp(32px,4vw,46px);margin-bottom:14px}
.cok-sprso .cs-lead{font-size:16.5px;color:#5c4a38;max-width:46ch;margin-bottom:18px}
.cok-sprso .cs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.cok-sprso .cs-chip{font-size:12.5px;font-weight:600;color:var(--brown8);background:#fff;border:1px solid #E7DCCD;padding:7px 13px;border-radius:100px}

.cok-sprso .cs-price{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.cok-sprso .cs-price strong{font-family:'Montserrat',sans-serif;font-size:38px;color:var(--brown8);letter-spacing:-.01em}
.cok-sprso .cs-price em{font-style:normal;font-size:13.5px;color:#8a7561}
.cok-sprso .cs-price-note{font-size:13px;color:#8a7561;margin-bottom:26px}

.cok-sprso .cs-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.cok-sprso .cs-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding:16px 28px;border-radius:100px;text-decoration:none;transition:transform .25s,box-shadow .25s}
.cok-sprso .cs-btn-p{background:linear-gradient(135deg,var(--brown),var(--brown8));color:#fff;box-shadow:0 12px 26px rgba(75,45,21,.32);animation:cs-pulse 2.6s ease-in-out infinite}
.cok-sprso .cs-btn-p:hover{transform:translateY(-2px)}
.cok-sprso .cs-btn-p::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:cs-shine 3.4s ease-in-out infinite}
@keyframes cs-shine{0%,55%{left:-70%}85%,100%{left:130%}}
@keyframes cs-pulse{0%,100%{box-shadow:0 12px 26px rgba(75,45,21,.32)}50%{box-shadow:0 12px 34px rgba(105,63,25,.5)}}
.cok-sprso .cs-btn-s{background:#fff;color:var(--brown8);border:1.5px solid #E0D2BF}
.cok-sprso .cs-btn-s:hover{border-color:var(--gold);transform:translateY(-2px)}
.cok-sprso .cs-btn svg{width:17px;height:17px;flex:none}
@media(prefers-reduced-motion:reduce){.cok-sprso .cs-btn-p{animation:none}.cok-sprso .cs-btn-p::after{animation:none}}

.cok-sprso .cs-quickusps{border-top:1px solid #E7DCCD;padding-top:22px;display:grid;gap:12px}
.cok-sprso .cs-qusp{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:#5c4a38}
.cok-sprso .cs-qusp svg{width:18px;height:18px;flex:none;stroke:var(--gold);margin-top:2px}
.cok-sprso .cs-qusp strong{color:var(--brown8)}

/* dranken dial */
.cok-sprso .cs-dial-band{background:var(--esp);border-radius:32px;margin:0 0 80px;position:relative;overflow:hidden}
.cok-sprso .cs-dial-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 15%,rgba(201,160,92,.14),transparent 45%),radial-gradient(circle at 90% 90%,rgba(105,63,25,.5),transparent 55%);pointer-events:none}
.cok-sprso .cs-dial-inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:64px 60px}
.cok-sprso .cs-dial-copy h2{color:var(--cream);font-size:clamp(28px,3.2vw,40px);margin-bottom:16px}
.cok-sprso .cs-dial-copy h2 em{font-style:normal;color:var(--gold)}
.cok-sprso .cs-dial-copy p{color:#CBB9A4;font-size:15.5px;max-width:44ch}
.cok-sprso .cs-dial-count{margin-top:26px;display:flex;align-items:center;gap:14px}
.cok-sprso .cs-dial-count strong{font-family:'Montserrat',sans-serif;font-size:52px;color:var(--gold);line-height:1}
.cok-sprso .cs-dial-count span{font-size:13px;color:#CBB9A4;max-width:18ch;line-height:1.4}
.cok-sprso .cs-dial{position:relative;width:min(360px,100%);aspect-ratio:1;margin:0 auto}
.cok-sprso .cs-dial-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(201,160,92,.35)}
.cok-sprso .cs-dial-ring::before{content:"";position:absolute;inset:14px;border-radius:50%;border:1px dashed rgba(201,160,92,.25)}
.cok-sprso .cs-dial-center{position:absolute;inset:70px;border-radius:50%;background:linear-gradient(160deg,#3a2515,#20120a);box-shadow:inset 0 0 0 1px rgba(201,160,92,.3),0 24px 50px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.cok-sprso .cs-dial-drink{font-family:'Montserrat',sans-serif;font-weight:700;font-size:22px;color:var(--cream);line-height:1.2;transition:opacity .3s}
.cok-sprso .cs-dial-sub{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:8px}
.cok-sprso .cs-dial-cupicon{width:34px;height:34px;stroke:var(--gold);margin-bottom:10px}
.cok-sprso .cs-dial-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:rgba(201,160,92,.4);transform:translate(-50%,-50%);transition:background .3s,box-shadow .3s}
.cok-sprso .cs-dial-dot.cs-act{background:var(--gold);box-shadow:0 0 12px rgba(201,160,92,.8)}
.cok-sprso .cs-dial-nav{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);display:flex;gap:12px}
.cok-sprso .cs-dial-btn{width:46px;height:46px;border-radius:50%;background:rgba(247,241,232,.08);border:1px solid rgba(201,160,92,.4);color:var(--gold);font-size:18px;display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s}
.cok-sprso .cs-dial-btn:hover{background:rgba(201,160,92,.18);transform:scale(1.06)}

/* feature grid */
.cok-sprso .cs-feats{padding:0 0 80px}
.cok-sprso .cs-sechead{max-width:640px;margin-bottom:38px}
.cok-sprso .cs-sechead h2{font-size:clamp(26px,3vw,36px);margin-bottom:12px}
.cok-sprso .cs-sechead p{color:#5c4a38;font-size:15.5px}
.cok-sprso .cs-featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cok-sprso .cs-feat{background:#fff;border:1px solid #EDE2D2;border-radius:20px;padding:28px 24px;transition:transform .3s,box-shadow .3s}
.cok-sprso .cs-feat:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(75,45,21,.12)}
.cok-sprso .cs-feat-ico{width:46px;height:46px;border-radius:14px;background:linear-gradient(150deg,#F1E6D4,#E6D5BC);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.cok-sprso .cs-feat-ico svg{width:22px;height:22px;stroke:var(--brown)}
.cok-sprso .cs-feat h3{font-size:17px;margin-bottom:8px}
.cok-sprso .cs-feat p{font-size:13.5px;color:#6b5745}

/* specs */
.cok-sprso .cs-specs{padding:0 0 80px}
.cok-sprso .cs-specgrid{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:start}
.cok-sprso .cs-spectable{background:#fff;border:1px solid #EDE2D2;border-radius:20px;overflow:hidden}
.cok-sprso .cs-specrow{display:flex;justify-content:space-between;gap:20px;padding:16px 24px;font-size:14px;border-bottom:1px solid #F2EADD}
.cok-sprso .cs-specrow:last-child{border-bottom:none}
.cok-sprso .cs-specrow dt{color:#8a7561;font-weight:500}
.cok-sprso .cs-specrow dd{color:var(--brown8);font-weight:700;text-align:right}
.cok-sprso .cs-drinklist{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cok-sprso .cs-drinktag{font-size:12.5px;font-weight:600;color:var(--brown8);background:#F1E8DA;padding:7px 13px;border-radius:100px}

/* melkkoeler callout */
.cok-sprso .cs-milk{background:linear-gradient(135deg,#fff,#F6EEE1);border:1px solid #EDE2D2;border-radius:24px;padding:34px 38px;display:flex;gap:26px;align-items:center;margin:0 0 80px}
.cok-sprso .cs-milk-ico{flex:none;width:64px;height:64px;border-radius:18px;background:var(--esp);display:flex;align-items:center;justify-content:center}
.cok-sprso .cs-milk-ico svg{width:30px;height:30px;stroke:var(--gold)}
.cok-sprso .cs-milk h3{font-size:19px;margin-bottom:6px}
.cok-sprso .cs-milk p{font-size:14px;color:#6b5745;max-width:62ch}
.cok-sprso .cs-milk-tag{flex:none;margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:var(--esp);padding:8px 14px;border-radius:100px;white-space:nowrap}

/* contact / aanvraag */
.cok-sprso .cs-contact{background:var(--esp);border-radius:32px;position:relative;overflow:hidden;margin-bottom:90px}
.cok-sprso .cs-contact::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 10%,rgba(201,160,92,.16),transparent 45%),radial-gradient(circle at 95% 100%,rgba(105,63,25,.5),transparent 55%);pointer-events:none}
.cok-sprso .cs-contact-grid{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:46px;align-items:center;padding:56px 54px}
.cok-sprso .cs-contact-copy h2{color:var(--cream);font-size:clamp(26px,3vw,38px);margin-bottom:14px}
.cok-sprso .cs-contact-copy h2 em{font-style:normal;color:var(--gold)}
.cok-sprso .cs-contact-copy p{color:#CBB9A4;font-size:15px;max-width:46ch;margin-bottom:26px}
.cok-sprso .cs-advisor{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.cok-sprso .cs-advisor-ava{width:56px;height:56px;border-radius:50%;background:linear-gradient(150deg,#3a2515,#20120a);display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:700;font-size:18px;color:var(--gold);position:relative;flex:none}
.cok-sprso .cs-advisor-ava::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(var(--gold),#7a5c2e,var(--gold));z-index:-1}
.cok-sprso .cs-advisor strong{display:block;color:var(--cream);font-size:16px;font-family:'Montserrat',sans-serif;font-weight:700}
.cok-sprso .cs-advisor span{font-size:12.5px;color:var(--gold)}
.cok-sprso .cs-contact-links{display:flex;flex-direction:column;gap:10px}
.cok-sprso .cs-contact-links a{display:inline-flex;align-items:center;gap:10px;color:var(--cream);text-decoration:none;font-size:14.5px;font-weight:600;transition:color .25s;width:fit-content}
.cok-sprso .cs-contact-links a:hover{color:var(--gold)}
.cok-sprso .cs-contact-links svg{width:16px;height:16px;stroke:var(--gold);flex:none}

.cok-sprso .cs-form{background:var(--cream);border-radius:22px;padding:34px 32px;box-shadow:0 24px 60px rgba(0,0,0,.35);position:relative}
.cok-sprso .cs-form-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cok-sprso .cs-field{margin-bottom:14px}
.cok-sprso .cs-field label{display:block;font-size:12.5px;font-weight:700;color:var(--brown8);margin-bottom:6px}
.cok-sprso .cs-field input,.cok-sprso .cs-field textarea{width:100%;font-family:'Montserrat',sans-serif;font-size:14px;color:var(--ink);background:#fff;border:1.5px solid #E0D2BF;border-radius:12px;padding:13px 15px;outline:none;transition:border-color .25s,box-shadow .25s;resize:vertical}
.cok-sprso .cs-field input:focus,.cok-sprso .cs-field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,160,92,.18)}
.cok-sprso .cs-field input::placeholder,.cok-sprso .cs-field textarea::placeholder{color:#B3A08B}
.cok-sprso .cs-btn-form{width:100%;justify-content:center;background:linear-gradient(135deg,var(--gold),#A87F3F);color:#fff;box-shadow:0 12px 26px rgba(201,160,92,.3);margin-top:4px;border:none}
.cok-sprso .cs-btn-form:hover{transform:translateY(-2px)}
.cok-sprso .cs-btn-form:disabled{opacity:.7;cursor:default;transform:none}
.cok-sprso .cs-form-note{font-size:12px;color:#8a7561;margin-top:12px;text-align:center}
.cok-sprso .cs-form-done{display:none;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:36px 10px}
.cok-sprso .cs-form-done svg{width:52px;height:52px;stroke:var(--gold);margin-bottom:6px}
.cok-sprso .cs-form-done strong{font-family:'Montserrat',sans-serif;font-weight:700;font-size:20px;color:var(--brown8)}
.cok-sprso .cs-form-done span{font-size:14px;color:#6b5745}
.cok-sprso .cs-form.cs-sent #cs-form-fields{display:none}
.cok-sprso .cs-form.cs-sent .cs-form-done{display:flex}

/* responsive */
@media(max-width:960px){
  .cok-sprso .cs-top{grid-template-columns:1fr;gap:34px}
  .cok-sprso .cs-gallery{position:static}
  .cok-sprso .cs-dial-inner{grid-template-columns:1fr;padding:46px 28px;gap:46px}
  .cok-sprso .cs-featgrid{grid-template-columns:1fr 1fr}
  .cok-sprso .cs-specgrid{grid-template-columns:1fr}
  .cok-sprso .cs-contact-grid{grid-template-columns:1fr;padding:44px 30px;gap:34px}
}
@media(max-width:600px){
  .cok-sprso .cs-stage{min-height:340px;padding:30px 18px}
  .cok-sprso .cs-stage img{max-height:300px}
  .cok-sprso .cs-featgrid{grid-template-columns:1fr}
  .cok-sprso .cs-milk{flex-direction:column;align-items:flex-start;padding:26px 22px}
  .cok-sprso .cs-milk-tag{margin-left:0}
  .cok-sprso .cs-dial{width:min(300px,100%)}
  .cok-sprso .cs-dial-center{inset:58px}
  .cok-sprso .cs-price strong{font-size:32px}
  .cok-sprso .cs-contact-grid{padding:34px 20px}
  .cok-sprso .cs-form{padding:24px 18px}
  .cok-sprso .cs-form-row2{grid-template-columns:1fr}
}