/* CO Koffie Machines - SPRSO spotlight (Elementor-widget). Gescoped op
   .cok-sprsospot-l, geen globale resets, font Montserrat. Kleuren via CSS-vars
   die per widget overschreven kunnen worden. */
.cok-sprsospot-l{
  --esp:#2B1A0E;
  --brown8:#4B2D15;
  --brown:#693F19;
  --cream:#F7F1E8;
  --gold:#C9A05C;
  --ink:#3A2A1C;
  font-family:'Montserrat',sans-serif;
  color:var(--ink);
}
.cok-sprsospot-l *{box-sizing:border-box;margin:0;padding:0}
.cok-sprsospot-l img{max-width:100%;display:block}

.cok-sprsospot-l .spl-band{background:linear-gradient(160deg,#FBF7F0,var(--cream));border:1px solid #EDE2D2;border-radius:28px;overflow:hidden}
.cok-sprsospot-l .spl-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;padding:64px 56px}

.cok-sprsospot-l h2{font-family:'Montserrat',sans-serif;font-weight:700;font-size:clamp(28px,3.4vw,42px);line-height:1.1;letter-spacing:-.01em;color:var(--brown8);margin-bottom:16px}
.cok-sprsospot-l h2 em{font-style:normal;color:var(--gold)}
.cok-sprsospot-l .spl-lead{font-size:15.5px;line-height:1.65;color:#5c4a38;max-width:50ch;margin-bottom:24px}

.cok-sprsospot-l .spl-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.cok-sprsospot-l .spl-pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--brown8);background:#fff;border:1px solid #E7DCCD;padding:9px 16px;border-radius:100px}
.cok-sprsospot-l .spl-pill svg{width:15px;height:15px;stroke:var(--gold);flex:none}

.cok-sprsospot-l .spl-pricewrap{display:flex;align-items:baseline;gap:12px;margin-bottom:26px}
.cok-sprsospot-l .spl-price{font-family:'Montserrat',sans-serif;font-weight:700;font-size:32px;color:var(--brown8);letter-spacing:-.01em}
.cok-sprsospot-l .spl-pricesub{font-size:13px;color:#8a7561}

.cok-sprsospot-l .spl-ctas{display:flex;gap:14px;flex-wrap:wrap}
.cok-sprsospot-l .spl-btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding:15px 26px;border-radius:100px;text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.cok-sprsospot-l .spl-btn-p{background:linear-gradient(135deg,var(--brown),var(--brown8));color:#fff;box-shadow:0 10px 22px rgba(75,45,21,.22)}
.cok-sprsospot-l .spl-btn-p:hover{transform:translateY(-2px)}
.cok-sprsospot-l .spl-btn-s{background:linear-gradient(135deg,var(--gold),#A87F3F);color:#fff;box-shadow:0 10px 22px rgba(201,160,92,.28)}
.cok-sprsospot-l .spl-btn-s:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(201,160,92,.38)}
.cok-sprsospot-l .spl-btn svg{width:16px;height:16px;flex:none}

.cok-sprsospot-l .spl-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:380px}
.cok-sprsospot-l .spl-ring{position:absolute;width:min(380px,88%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0%,#F3EADC 70%,transparent 71%);box-shadow:inset 0 0 0 1px rgba(201,160,92,.3)}
.cok-sprsospot-l .spl-visual img{position:relative;z-index:1;max-height:360px;width:auto;filter:drop-shadow(0 26px 34px rgba(43,26,14,.22))}

.cok-sprsospot-l .spl-rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.cok-sprsospot-l .spl-rv.spl-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.cok-sprsospot-l .spl-rv{opacity:1;transform:none;transition:none}}

@media(max-width:960px){
  .cok-sprsospot-l .spl-inner{grid-template-columns:1fr;padding:44px 28px;gap:30px}
  .cok-sprsospot-l .spl-visual{min-height:300px;order:-1}
  .cok-sprsospot-l .spl-visual img{max-height:270px}
  .cok-sprsospot-l .spl-ring{width:min(290px,84%)}
}
@media(max-width:600px){
  .cok-sprsospot-l .spl-inner{padding:36px 20px}
  .cok-sprsospot-l h2{font-size:27px}
  .cok-sprsospot-l .spl-price{font-size:28px}
  .cok-sprsospot-l .spl-btn{width:100%;justify-content:center}
}