/* Selluxe Cart, drawer styling.
   Alles wordt gestuurd door CSS variabelen die per cart worden gezet. */

.sx,.sx *{box-sizing:border-box}
/* Het lettertype komt altijd van het thema. Nergens in de drawer staat een
   eigen font, en formulierelementen erven niet vanzelf, dus die zetten we
   expliciet terug op inherit. */
.sx,.sx *{font-family:inherit}
.sx input,.sx select,.sx textarea{font-family:inherit;font-size:inherit}
.sx button,.sx optgroup{font-family:inherit}
html.sxc-locked{overflow:hidden}
.sxc-root{position:fixed;inset:0;z-index:2147483000;font-size:13px}
.sxc-root[hidden]{display:none}
.sxc-ov{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .28s ease}
.sxc-root.is-open .sxc-ov{opacity:.45}

.sx{
  --r:6px;--bh:48px;--pad:18px;--sxw:440px;
  width:min(var(--sxw),100vw);background:var(--sxbg);color:var(--sxtext);
  display:flex;flex-direction:column;font-size:13px;line-height:1.4;overflow:hidden;
  font-family:inherit;
}
.sxc-root .sx{
  position:absolute;top:0;bottom:0;box-shadow:0 12px 44px rgba(0,0,0,.18);
  transition:transform .32s cubic-bezier(.32,.72,0,1);
}
.sxc-root .sx--r{right:0;transform:translateX(100%)}
.sxc-root .sx--l{left:0;transform:translateX(-100%)}
.sxc-root.is-open .sx{transform:translateX(0)}
.sxc-root.is-busy .sx{pointer-events:none;opacity:1 !important}
.sxc-root.is-busy .sx__sc,
.sxc-root.is-busy .sx__ft{filter:none}
/* Tijdens het laden blijft alles gewoon staan.
   Dit was een dekkend vlak over de hele drawer met een draaiend icoon: je cart
   werd wit en alles verdween, ook al veranderde er maar een regel. Nu een dunne
   lijn bovenin die doorloopt, en de inhoud blijft zichtbaar. */
.sx__spin{
  position:absolute;top:0;left:0;right:0;height:2px;display:none;
  overflow:hidden;z-index:5;background:transparent;pointer-events:none;
}
.sxc-root.is-busy .sx__spin{display:block}
.sx__spin i{
  position:absolute;top:0;left:0;height:100%;width:40%;border:0;border-radius:0;
  background:var(--sxacc);animation:sxcSlide 1.1s ease-in-out infinite;
}
@keyframes sxcSlide{
  0%{left:-40%}
  100%{left:100%}
}
/* Alleen de knoppen blokkeren, zodat niemand twee keer klikt terwijl het laadt.
   De inhoud zelf verandert niet van kleur en verspringt niet. */
.sxc-root.is-busy .sx__ft,
.sxc-root.is-busy .qty,
.sxc-root.is-busy .upc__add{opacity:.6}
.sx{position:relative}

.sx__hd{display:flex;align-items:center;padding:var(--hdpy,18px) var(--pad);border-bottom:1px solid var(--sxline);gap:10px;flex:0 0 auto}
/* Zit de meldingsbalk er direct onder, dan valt de lijn weg zodat de kleur
   naadloos tegen de header aansluit. */
.sx__hd.flush{border-bottom:0}
.sx__hd.ctr{justify-content:center;position:relative}
.sx__ti{font-weight:650;font-size:var(--hdts,16px);line-height:1.1;display:block}
.sx__logo{margin-right:auto;display:block;width:auto;object-fit:contain}
.sx__hd.ctr .sx__logo{margin:0 auto}
.sx__x{margin-left:auto;border:0;background:none;color:inherit;opacity:.55;display:inline-flex;
  align-items:center;justify-content:center;cursor:pointer;font:inherit;flex:0 0 auto;
  padding:0;line-height:0;box-sizing:border-box;-webkit-appearance:none;appearance:none}
.sx__x svg{display:block}
.sx__x.has-bg{opacity:1}
.sx__x:hover{opacity:.9}
.sx__hd.ctr .sx__x{position:absolute;right:var(--pad)}
.sx__note{padding:8px var(--pad);text-align:center;font-size:12px;flex:0 0 auto}
.sx__sc{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--pad);display:flex;flex-direction:column;gap:16px}
.sx__lines{display:flex;flex-direction:column;gap:var(--lnrg,15px)}
/* scheidingslijn tussen de regels, of onder elke regel */
/* De lijn loopt van rand tot rand, net als de scheidingen boven en onder in de
   cart. Daarvoor trekken we de regel over de padding van het scrollgebied heen
   en zetten die padding er binnen de regel weer op, zodat de inhoud blijft
   uitlijnen met de rest. */
.sx__lines--div-between .ln + .ln,
.sx__lines--div-each .ln{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
.sx__lines--div-between .ln + .ln{border-top:var(--lndw,1px) solid var(--lndc,var(--sxline));
  padding-top:var(--lnrg,15px)}
.sx__lines--div-each .ln{border-bottom:var(--lndw,1px) solid var(--lndc,var(--sxline));
  padding-bottom:var(--lnrg,15px)}

/* doelbalk */
.rw{padding:14px var(--pad) 10px;flex:0 0 auto;
  --rwfs:14px;--rwis:12px;--rwgap:12px}
/* scheidingslijn onder de doelbalk, uit te zetten in de module */
.rw--divider{border-bottom:var(--rwdw,1px) solid var(--rwdc,var(--sxline))}
.rw__t{margin:0 0 var(--rwgap);text-align:center;font-size:var(--rwfs);line-height:1.35}

/* gedeelde balk */
.rw__track{height:9px;border-radius:20px;background:var(--rwbg);overflow:hidden}
.rw__track i{display:block;height:100%;border-radius:20px;background:var(--rwfill);
  transition:width .45s cubic-bezier(.32,.72,0,1)}
.rw__track--thin{height:3px}

/* dots */
/* flex-start, niet center. De vakken verschillen in hoogte doordat het ene
   label langer is dan het andere, en bij centreren schuift de balk van dat vak
   dan omhoog. Dat is waarom een enkele speld hoger stond dan de rest. */
.rw__row{display:flex;align-items:flex-start;gap:5px;padding:0 calc(var(--rwinset,0px) + 2px)}
/* Eerder reserveerden we hier een halve labelbreedte aan beide kanten, zodat
   ook het laatste label gecentreerd kon blijven. Op een telefoon bleef daardoor
   nauwelijks balk over. De labels van de buitenste tredes lijnen nu naar binnen
   in plaats van dat de balk moet inleveren. */
.rw__seg{flex:1;min-width:0;display:flex;flex-direction:column}
.rw__segrow{display:flex;align-items:center;gap:5px}
.rw__bar{flex:1;height:9px;border-radius:20px;background:var(--rwbg);overflow:hidden;min-width:6px}
.rw__bar i{display:block;height:100%;border-radius:20px;background:var(--rwfill);
  transition:width .45s cubic-bezier(.32,.72,0,1)}
.rw__pin{width:calc(var(--rwis) + 10px);height:calc(var(--rwis) + 10px);border-radius:50%;
  background:var(--rwbg);color:var(--rwic2,#fff);display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;position:relative;z-index:1;line-height:0}
.rw__pin.done,.rw__mark.is-done .rw__pin{background:var(--rwfill);color:var(--rwic,#fff)}
.rw__pin img{width:var(--rwis);height:var(--rwis);object-fit:contain}
.rw__pin svg{width:var(--rwis);height:var(--rwis)}
/* Onder de speld, gecentreerd, met een eigen breedte zodat een langere tekst
   over meerdere regels breekt in plaats van de drawer uit te lopen. De inzet op
   de rij hierboven zorgt dat ook de buitenste tredes die ruimte hebben. */
/* Het onderschrift staat gecentreerd onder zijn eigen speld. De negatieve
   rechtermarge schuift het blok zo op dat het midden ervan samenvalt met het
   midden van de speld, terwijl het gewoon in de flow blijft staan. */
/* De ingestelde breedte, maar nooit meer dan het vak van deze trede zelf.
   Anders steekt een label op een smal scherm over dat van de buurman heen.
   Het is belangrijk dat de marge met dezelfde waarde rekent als de breedte,
   want alleen dan blijft de tekst midden onder zijn speld staan. */
.rw__cap{--capw:min(var(--rwcapw,120px), 100%);
  width:var(--capw);margin-top:var(--rwcapg,6px);margin-left:auto;
  margin-right:calc((var(--rwis) + 10px) / 2 - var(--capw) / 2);
  padding-inline:2px;overflow-wrap:break-word;hyphens:none;
  font-size:calc(var(--rwfs) * .72);color:var(--sxmut);
  white-space:normal;overflow-wrap:break-word;line-height:1.25;text-align:center}

/* Elk label staat gecentreerd onder zijn eigen speld. Alleen de laatste kan dat
   niet: die speld staat helemaal rechts en het label zou half buiten de cart
   vallen, dus die lijnt naar binnen. De eerste speld staat aan het eind van het
   eerste vak en heeft links ruimte zat, dus die blijft gewoon gecentreerd. */
.rw__seg:last-child .rw__cap{margin-right:0;margin-left:auto;text-align:right}

/* checkpoint */
.rw--checkpoint .rw__marks{display:flex;justify-content:space-between;margin-bottom:9px;gap:10px;
  padding:0 var(--rwinset,24px)}
.rw--checkpoint .rw__track{margin:0 var(--rwinset,24px)}
.rw__mark{display:flex;flex-direction:column;align-items:center;gap:var(--rwcapg,6px);flex:1 1 0;min-width:0}
/* Bij dots hangt het onderschrift met een negatieve rechtermarge onder zijn
   speld. Hier staat het al in een eigen kolom die op de speld is gecentreerd,
   dus die marges moeten eruit, anders schuift de tekst opzij. */
.rw__mark .rw__cap{position:static;transform:none;text-align:center;white-space:normal;
  margin:0;width:100%;max-width:none}
.rw__mark.is-done .rw__cap{color:var(--sxtext)}

/* segments */
.rw__blocks{display:flex;gap:5px;padding:0 var(--rwinset,24px)}
.rw__block{flex:1;height:9px;border-radius:20px;background:var(--rwbg);overflow:hidden}
.rw__block span{display:block;height:100%;border-radius:20px;background:var(--rwfill);
  transition:width .45s cubic-bezier(.32,.72,0,1)}
.rw--segments .rw__caps{display:flex;gap:10px;margin-top:var(--rwcapg,6px);padding:0 var(--rwinset,24px)}
.rw--segments .rw__caps span{flex:1 1 0;min-width:0;text-align:center;font-size:calc(var(--rwfs) * .72);
  color:var(--sxmut);line-height:1.25;overflow-wrap:break-word}
.rw--segments .rw__caps span.is-done{color:var(--sxtext)}

/* continuous: een doorlopende balk met de iconen erop */
.rw--continuous .rw__row{gap:0}
.rw--continuous .rw__segrow{gap:0}
.rw--continuous .rw__bar{border-radius:0}
.rw--continuous .rw__seg:first-child .rw__bar{border-radius:20px 0 0 20px}
.rw--continuous .rw__bar i{border-radius:0}
.rw--continuous .rw__seg:first-child .rw__bar i{border-radius:20px 0 0 20px}

/* milestones: label boven, icoon op de lijn, beloning eronder */
.rw--milestones .rw__ms{display:flex;gap:8px;padding:0 var(--rwinset,24px)}
.rw__msi{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--rwcapg,6px)}
.rw__mstop{font-size:calc(var(--rwfs) * .82);line-height:1.25;text-align:center;color:var(--sxtext);
  max-width:100%;overflow-wrap:break-word}
.rw__msrow{display:flex;align-items:center;gap:4px;width:100%}
.rw__msbar{flex:1;height:3px;border-radius:20px;background:var(--rwbg);overflow:hidden;min-width:4px}
.rw__msbar i{display:block;height:100%;border-radius:20px;background:var(--rwfill);
  transition:width .45s cubic-bezier(.32,.72,0,1)}
.rw__mscap{font-size:calc(var(--rwfs) * .66);line-height:1.25;text-align:center;color:var(--sxmut);
  text-transform:uppercase;letter-spacing:.03em;max-width:100%;overflow-wrap:break-word}
.rw__msi.is-done .rw__mscap{color:var(--sxtext)}

/* regels */
.ln{display:flex;gap:11px}
.ln__im{width:var(--lnimg,62px);height:var(--lnimg,62px);border-radius:var(--lnimr,6px);background:var(--sxsurf);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--sxmut);overflow:hidden}
.ln__im img{width:100%;height:100%;object-fit:cover;display:block}
.ln__b{flex:1;min-width:0}
.ln__top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.ln__t{font-weight:var(--lntw,550);font-size:var(--lnts,13.5px);line-height:1.3;
  color:var(--lntc,inherit);text-decoration:none;overflow-wrap:break-word}
.ln__v{font-size:var(--lnms,11.5px);color:var(--lnmc,var(--sxmut));display:block;margin-top:2px}
.ln__top + .ln__v{margin-top:var(--lnmg,6px)}
.ln__x{border:0;background:none;color:inherit;opacity:.45;padding:1px;display:flex;cursor:pointer;font:inherit;flex:0 0 auto}
.ln__x:hover{opacity:.9}
.ln__r{display:flex;align-items:center;justify-content:space-between;margin-top:9px;gap:10px;min-height:28px}
.ln.is-gift .ln__im{outline:1px solid var(--sxline)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--sxline);border-radius:var(--r);height:var(--lnqh,34px)}
.qty button{border:0;background:none;color:inherit;width:calc(var(--lnqh,34px) * 0.94);height:100%;display:flex;align-items:center;justify-content:center;opacity:.7;cursor:pointer}
.qty button:hover{opacity:1}
.qty b{min-width:calc(var(--lnqh,34px) * 0.8);text-align:center;font-weight:500;font-size:var(--lnqf,14px)}
/* Een rij die mag doorlopen. Zonder wrap bleef het woord onder de prijs er
   naast staan in plaats van eronder. */
.pr{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pr b{font-weight:var(--lnpw,700);font-size:var(--lnps,14px);color:var(--lnpc,inherit)}
.pr s{color:var(--lncc,var(--sxmut));font-size:var(--lncs,12px);font-weight:var(--lncw,400)}
.ln__saved{display:flex;align-items:center;justify-content:flex-end;gap:5px;
  font-size:var(--lnss,11.5px);color:var(--lnsc,#1a7f5a);margin-top:1px;line-height:1.3}
.ln__saved .ic,.pr__save .ic{display:inline-flex;align-items:center;line-height:0;flex:0 0 auto}
.ln__saved .ic svg,.pr__save .ic svg{width:var(--lnsis,14px);height:var(--lnsis,14px)}
.ln__saved img.ic,.pr__save img.ic{width:var(--lnsis,14px);height:var(--lnsis,14px);object-fit:contain}

/* prijs boven de aantalteller: alles op een lijn, besparing tussen haakjes */
.ln__r--above{flex-direction:column;align-items:flex-start;gap:7px}
.ln__r--above .pr{flex-wrap:wrap;row-gap:3px}
.pr__save{display:inline-flex;align-items:center;gap:4px;color:var(--lnsc,#1a7f5a);
  font-size:var(--lnss,11.5px);font-weight:500;white-space:nowrap}

/* Geen vaste lijn boven een blok. De modules die een scheiding willen hebben
   daar hun eigen instelling voor, en die vaste lijn kon je nergens uitzetten. */
.blk{padding-top:15px}
.blk__t{font-weight:650;margin:0 0 11px;font-size:13.5px;display:flex;align-items:center;gap:7px}
.blk__t--left{justify-content:flex-start;text-align:left}
.blk__t--center{justify-content:center;text-align:center}
.blk__t--right{justify-content:flex-end;text-align:right}
.blk--ups{padding-top:var(--upspt,15px);padding-bottom:var(--upspb,0)}

/* aanbiedingen */
.ups{display:flex;align-items:center;gap:6px}
.ups__nav{width:26px;height:26px;border-radius:50%;border:1px solid var(--sxline);background:var(--sxbg);color:var(--sxmut);display:flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer}
.ups__nav:hover{color:var(--sxtext)}
.ups__vp{flex:1;min-width:0;overflow:hidden}
.ups__tr{display:flex;gap:var(--upcgap,10px);transition:transform .3s cubic-bezier(.32,.72,0,1)}
.upc{flex:0 0 100%;background:var(--sxsurf);border-radius:10px;padding:var(--upcpad,11px);display:flex;gap:var(--upcpad,11px);align-items:center}
.upc__im{width:var(--upcim,54px);height:var(--upcim,54px);border-radius:var(--upcimr,7px);background:var(--sxbg);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--sxmut);overflow:hidden}
.upc__im img{width:100%;height:100%;object-fit:cover;display:block}
.upc__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.upc__t{font-size:12.5px;font-weight:600;line-height:1.3}
.upc__pr{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.upc__now{font-weight:650;font-size:13.5px}
.upc__was{color:var(--sxmut);font-size:12px}
.upc__save{display:inline-flex;align-items:center;line-height:1;font-size:10.5px;background:#d9f7e4;color:#0c5132;padding:2px 7px;border-radius:20px;white-space:nowrap}
.upc__add{align-self:flex-start;border:0;border-radius:var(--r);background:var(--sxacc);color:var(--sxacct);height:30px;padding:0 13px;font:inherit;font-size:12px;font-weight:600;display:inline-flex;align-items:center;cursor:pointer;text-decoration:none}
.upc__sel{border:1px solid var(--sxline);border-radius:var(--r);height:26px;font:inherit;font-size:11.5px;background:var(--sxbg);color:inherit;padding:0 6px;max-width:140px}
.ups--raster .ups__tr{flex-wrap:wrap;transform:none!important}
.ups--raster .upc{flex:1 1 calc(50% - (var(--upcgap,10px) / 2));flex-direction:column;align-items:stretch}
.ups--raster .upc__im{width:100%;height:var(--upcimh,74px)}
.ups--lijst .ups__tr{flex-direction:column;transform:none!important}
.ups--lijst .upc{flex:1 1 auto}
.ups__dots{display:flex;justify-content:center;gap:5px;margin-top:9px}
.ups__dots i{width:5px;height:5px;border-radius:9px;background:var(--sxline)}
.ups__dots i.on{background:var(--sxmut)}

/* stijlvarianten aanbiedingen */
.upst--compact .upc{padding:calc(var(--upcpad,11px) * .75);gap:9px;align-items:center}
.upst--compact .upc__im{width:calc(var(--upcim,54px) * .74);height:calc(var(--upcim,54px) * .74)}
.upst--compact .upc__b{flex-direction:row;align-items:center;gap:9px}
.upst--compact .upc__t{flex:1;font-size:12px}
.upst--compact .upc__add{height:26px;padding:0 10px;font-size:11.5px;align-self:center}
.upst--compact .upc__pr{flex:0 0 auto}
.upst--compact .upc__save{display:none}

.upst--wide .upc{flex-direction:column;align-items:stretch;padding:0;overflow:hidden}
.upst--wide .upc__im{width:100%;height:calc(var(--upcimh,74px) * 1.62);border-radius:0}
.upst--wide .upc__b{padding:var(--upcpad,11px)}
.upst--wide .upc__add{width:100%;justify-content:center;height:36px}

.upst--banner .upc{background:var(--sxacc);color:var(--sxacct);padding:calc(var(--upcpad,11px) + 2px)}
.upst--banner .upc__im{background:rgba(255,255,255,.15)}
.upst--banner .upc__was{color:rgba(255,255,255,.6)}
.upst--banner .upc__save{background:rgba(255,255,255,.2);color:var(--sxacct)}
.upst--banner .upc__add{background:var(--sxacct);color:var(--sxacc)}

.upst--bare .upc{background:none;padding:0}
.upst--bare .upc__im{background:var(--sxsurf)}
.upst--bare + .ups__dots{margin-top:12px}

/* bundel */
.bd{background:var(--sxsurf);border:1px solid var(--sxline);border-radius:11px;padding:13px}
.bd__bg{display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:10px;text-transform:uppercase;letter-spacing:.06em;background:var(--sxacc);color:var(--sxacct);padding:3px 8px;border-radius:20px;margin-bottom:9px}
.bd__row{display:flex;align-items:center;gap:7px;margin:11px 0;overflow-x:auto}
.bd__p{color:var(--sxmut);flex:0 0 auto}
.bd__it{margin:0;width:54px;text-align:center;flex:0 0 auto}
.bd__im{width:54px;height:54px;border-radius:7px;background:var(--sxbg);display:flex;align-items:center;justify-content:center;color:var(--sxmut);overflow:hidden}
.bd__im img{width:100%;height:100%;object-fit:cover;display:block}
.bd__cp{font-size:9.5px;color:var(--sxmut);margin-top:4px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bd__rs{font-size:11.5px;color:var(--sxmut);line-height:1.5;margin:0}
.bd__ft{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:10px}
.bd__ft b{font-size:14px}
.bd__ft s{color:var(--sxmut);margin-left:6px;font-size:12px}

.sx__notes details{font-size:12px;color:var(--sxmut)}
.sx__notes summary{cursor:pointer;display:flex;align-items:center;gap:6px;padding:2px 0}
.sx__ta{width:100%;margin-top:7px;border:1px solid var(--sxline);border-radius:var(--r);background:var(--sxbg);color:inherit;font:inherit;padding:8px 10px;resize:vertical}

/* extra's */
.sx__addt{font-weight:650;margin-bottom:8px}
.ao{display:flex;align-items:center;gap:10px;border:1px solid var(--sxline);border-radius:9px;padding:10px;cursor:pointer}
.ao+.ao{margin-top:7px}
.ao.is-on{border-color:var(--sxacc)}
.ao__in{position:absolute;opacity:0;pointer-events:none}
.sw__t{width:32px;height:18px;border-radius:20px;background:var(--sxline);position:relative;flex:0 0 auto;transition:background .15s}
.sw__t::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:20px;background:var(--sxbg);transition:transform .15s}
.ao.is-on .sw__t{background:var(--sxacc)}
.ao.is-on .sw__t::after{transform:translateX(14px);background:var(--sxacct)}
.ao__ic{width:34px;height:34px;border-radius:8px;flex:0 0 auto;background:var(--sxsurf);display:flex;align-items:center;justify-content:center;color:var(--aoic,var(--sxtext))}
.ao__im{width:34px;height:34px;border-radius:6px;overflow:hidden;flex:0 0 auto;background:var(--sxsurf);display:flex;align-items:center;justify-content:center}
.ao__im img{width:100%;height:100%;object-fit:cover;display:block}
.ao__b{flex:1;min-width:0}
.ao__t{font-size:12.5px;font-weight:550;display:block}
.ao__d{font-size:11px;color:var(--sxmut);display:block;margin-top:1px}
.ao__p{font-size:12.5px}

/* footer */
.sx__ft{padding:var(--pad);border-top:1px solid var(--sxline);flex:0 0 auto;display:flex;flex-direction:column;gap:13px;background:var(--sxbg)}
.sm{--smgap:8px;--smpos:#1a7f5a}
.sm.has-bg{background:var(--smbg);border-radius:10px;padding:13px}
/* Volledige onderkant: van de scheidingslijn tot onderaan de cart. De negatieve
   marges halen de padding van de footer terug, zodat de kleur echt tot de rand loopt. */
/* De kleur zit op de footer zelf, zodat hij van de scheidingslijn tot de
   onderrand loopt, inclusief de betaalicoontjes. */
.sx__ft.has-bg-full{background:var(--smbg)}
.sx__ft.has-bg-full .sm{background:none;padding:0;border-radius:0;margin:0}
.sm__top{display:flex;align-items:center;gap:7px;font-size:var(--smbfs,11.5px);
  font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--sxmut);
  margin-top:var(--smbmt,0);margin-bottom:var(--smbmb,11px)}
.sm__top--plain{text-transform:none;letter-spacing:0;font-weight:500}
.sm__top--center{justify-content:center}
.sm__top--left{justify-content:flex-start}
.sm__top--right{justify-content:flex-end}
.sm__top svg{flex:0 0 auto;color:var(--smbic,currentColor)}
.sm__top img{flex:0 0 auto}
.sm__top--div-above{border-top:1px solid var(--sxline);padding-top:calc(var(--smgap) + 3px)}
.sm__top--div-below{border-bottom:1px solid var(--sxline);padding-bottom:calc(var(--smgap) + 3px)}
.sm__top--div-both{border-top:1px solid var(--sxline);border-bottom:1px solid var(--sxline);
  padding:calc(var(--smgap) + 3px) 0}
.sm__r{display:flex;justify-content:space-between;font-size:var(--smlfs,13px);
  font-weight:var(--smlfw,400);color:var(--smlfc,inherit)}
.sm__r + .sm__r{margin-top:var(--smgap)}
.sm__r--pos{color:var(--smpos);font-size:var(--smsfs,var(--smlfs,13px));
  font-weight:var(--smsfw,400)}
.sm__lbl{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
/* kortingscode naast het label, zoals de klant hem heeft ingevuld */
/* De kortingscode naast het label. Bewust niet vet en niet in hoofdletters:
   dat is de naam van een korting, geen kop. Wie het wel wil zetten kan dat met
   de dikte en de schakelaar voor hoofdletters in de editor. */
.sm__tag{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:6px;
  background:var(--smtagbg,var(--sxsurf));color:var(--smtagfg,var(--sxtext));
  font-size:calc(var(--smlfs,13px) * .82);font-weight:var(--smbw,400);line-height:1.3;
  letter-spacing:normal}
/* Themas zetten graag font-weight op b, strong en span. De dikte staat ook
   inline op het element zelf, dit is de tweede grendel. */
.sxc-root .sm__tag,.sxc-root .sm__tag span{font-weight:var(--smbw,400) !important}
.sm--upper .sm__tag{text-transform:uppercase;letter-spacing:.02em}
.sm__tag svg{flex:0 0 auto}
.sm__r--disc{color:var(--smpos)}
.sm__lbl .ic{display:inline-flex;align-items:center;line-height:0;flex:0 0 auto}
.sm__lbl img.ic{object-fit:contain}
.sm__r.tot{font-weight:var(--smtw,650);font-size:var(--smtfs,14.5px);color:var(--smtot,inherit)}
.sm__n{font-size:11px;color:var(--sxmut);margin:9px 0 0}

.sm--boxed .sm__box{background:var(--sxsurf);border-radius:10px;padding:12px 13px}
.sm--divided .sm__r.tot{border-top:1px solid var(--sxline);padding-top:calc(var(--smgap) + 2px);
  margin-top:calc(var(--smgap) + 2px)}
.sm--highlight .sm__pill{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--smhl,var(--smpos));color:var(--smhlfg,#fff);border-radius:var(--smhlr,8px);
  padding:var(--smhlpy,7px) var(--smhlpx,11px);font-size:var(--smsfs,12.5px);
  margin-bottom:var(--smgap)}
.sm--compact .sm__r{font-size:12.5px}
.sm--compact .sm__r.tot{font-size:13.5px}
.sm--compact .sm__n{margin-top:6px;font-size:10.5px}
.cta{width:100%;border:0;font-weight:var(--smctaw,600);border-radius:var(--r);min-height:calc(var(--bh) + var(--smctapy,0px) * 2);padding:var(--smctapy,0) 12px;background:var(--sxacc);color:var(--sxacct);font:inherit;font-weight:var(--smctaw,600);font-size:var(--smcta,14px);display:flex;align-items:center;justify-content:center;gap:8px;margin-top:11px;cursor:pointer}
.cont{display:block;width:100%;text-align:center;font:inherit;font-size:12px;color:var(--sxmut);text-decoration:underline;background:none;border:0;padding:0;margin-top:10px;cursor:pointer}
.tm{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;color:var(--sxmut);
  margin-top:10px;line-height:1.45;cursor:pointer}
.tm input{width:15px;height:15px;margin:0;flex:0 0 auto;accent-color:var(--sxacc);
  position:relative;top:1px}
.tm span{flex:1;min-width:0}
.tm.is-err{color:#c0392b}
.exp{display:flex;gap:7px}
.exp__b{flex:1;height:40px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600}
.exp__b.sp{background:#5a31f4;color:#fff}
.exp__b.pp{background:#ffc439;color:#111}
.exp__b.gp{background:#fff;border:1px solid var(--sxline);color:#3c4043}
.tb{display:flex;justify-content:center;gap:var(--tbgap,7px);flex-wrap:wrap;
  padding-top:var(--tbpt,0);padding-bottom:var(--tbpb,0)}
.tb__i svg{color:var(--tbic,currentColor)}
.tb__i{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:calc(var(--tbfs,14px) + 12px);padding:4px 10px;border:1px solid var(--sxline);
  border-radius:5px;font-size:var(--tbfs,14px);color:var(--sxmut);background:var(--sxbg)}
.tb__i img{width:var(--tbis,15px);height:var(--tbis,15px);object-fit:contain}
.tb__i svg{width:var(--tbis,15px);height:var(--tbis,15px)}
.pay{display:flex;justify-content:center;gap:var(--paygap,8px);flex-wrap:wrap;align-items:center;
  padding-top:var(--tbpt,0);padding-bottom:var(--tbpb,0)}
.pay__i{width:var(--payw,38px);height:calc(var(--payw,38px) * 0.66);border-radius:4px;border:1px solid var(--sxline);background:#fff;display:flex;align-items:center;justify-content:center;font-size:7.5px;font-weight:700;color:#4a4a4a;text-transform:uppercase;overflow:hidden}
/* Zodra het thema het echte icoon levert vervalt het kadertje eromheen, want
   die iconen brengen hun eigen rand en achtergrond mee. */
.pay__i--real{border:0;background:none;padding:0}
.pay__i--real svg,.pay__i--real img{width:100%;height:100%;object-fit:contain;display:block}
/* Geen height:auto hier: een SVG verwacht een lengte en weigert anders de
   hele regel. De verhouding houden we met aspect-ratio. */
.pay svg{width:var(--payw,38px);height:calc(var(--payw,38px) * 0.66);object-fit:contain}
/* Kortingscode: invoerveld links, knop rechts, allebei even hoog. De knop
   heeft standaard de accentkleur van de cart, zodat hij opvalt zoals in de
   meeste winkels met deze opmaak. */
.fr{display:flex;gap:var(--dcgap,8px);align-items:stretch}
.fr input{flex:1;min-width:0;box-sizing:border-box;
  border:1px solid var(--dcinbd,var(--sxline));border-radius:var(--dcr,4px);
  height:var(--dch,44px);padding:0 14px;font:inherit;font-size:var(--dcfs,13px);
  background:var(--dcinbg,var(--sxbg));color:var(--dcintx,inherit)}
.fr input::placeholder{color:var(--dcph,var(--sxmut));opacity:1}
.fr input:focus{outline:none;border-color:var(--dcinbd,var(--sxtext))}
.fr button{flex:0 0 auto;box-sizing:border-box;border:0;cursor:pointer;
  background:var(--dcbtnbg,var(--sxacc));color:var(--dcbtntx,var(--sxacct));
  border-radius:var(--dcr,4px);height:var(--dch,44px);
  padding:0 var(--dcbtnpx,22px);font:inherit;font-size:var(--dcfs,13px);
  font-weight:var(--dcbtnfw,700)}

.mt{text-align:center;padding:30px 10px;color:var(--sxmut)}
.mt__i{display:flex;justify-content:center;opacity:.45}
.mt__t{font-weight:650;color:var(--sxtext);margin:11px 0 5px}
.mt__s{font-size:12px;margin:0 0 16px}

/* zwevende knop */
.sxc-bub{position:fixed;z-index:2147482000;border:0;cursor:pointer;
  border-radius:var(--bubr,50%);display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--bubsh,0 8px 24px rgba(0,0,0,.18))}
.sxc-bub__n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:20px;font-size:11px;display:inline-flex;align-items:center;justify-content:center}

@media (max-width:749px){
  .sx{width:min(var(--sxw),100vw)}
  .ups--raster .upc{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .sxc-root .sx,.sxc-ov,.rw__bar i,.ups__tr{transition:none}
  .sx__spin i{animation-duration:2.2s}
}

.nt{
  margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 0;
  padding:var(--ntpt,16px) var(--pad) var(--ntpb,14px);
  text-align:center;font-size:var(--ntfs,12px);line-height:1.5;
  font-weight:500;letter-spacing:.01em;flex:0 0 auto;
}
/* De tekst blijft smaller dan de cart, zodat hij netjes over twee regels
   breekt in plaats van van rand tot rand te lopen. */
.nt__t{display:block;max-width:var(--ntmw,78%);margin:0 auto;text-wrap:balance}
.nt--b-above{border-top:var(--ntbw,1px) solid var(--ntbc,#e3e3e3)}
.nt--b-below{border-bottom:var(--ntbw,1px) solid var(--ntbc,#e3e3e3)}
.nt--b-both{border-top:var(--ntbw,1px) solid var(--ntbc,#e3e3e3);
  border-bottom:var(--ntbw,1px) solid var(--ntbc,#e3e3e3)}
.nt--timer{font-size:var(--nttf,12px)}


/* eigen HTML-blokken */
.hx{flex:0 0 auto;min-width:0;font-size:inherit;line-height:1.45}
.hx--left{text-align:left}
.hx--center{text-align:center}
.hx--right{text-align:right}
/* Buiten het scrollgebied zit geen padding op de container, dus zet het blok
   zijn eigen zijmarge zodat het uitlijnt met de rest van de cart. */
.hx--edge{padding-inline:var(--pad)}
/* Van rand tot rand, bijvoorbeeld voor een balk met een eigen achtergrond. */
.hx--full{padding-inline:0}
.sx__sc > .hx--full,.sx__ft > .hx--full{margin-inline:calc(var(--pad) * -1)}
.hx img{max-width:100%;height:auto}


/* ============================================================
   ONZE STIJL WINT
   Themas stylen vaak op elementniveau: prijzen krijgen een kleur mee via
   `s`, `del` of `.price`, links krijgen een onderstreping, knoppen een eigen
   achtergrond. Die regels raken ook onze drawer, want die staat gewoon in de
   pagina. Alles hieronder staat als laatste in het bestand, is gescopeerd op
   .sxc-root zodat het nooit buiten de cart komt, en gebruikt !important omdat
   themaregels vaak zelf !important gebruiken.
   Voeg hier alleen dingen toe die een merchant in de editor kan instellen,
   anders zet je iets vast wat hij niet meer kan wijzigen.
   ============================================================ */

.sxc-root .sx,
.sxc-root .sx *{box-sizing:border-box !important}

/* prijzen en besparing */
.sxc-root .pr b{color:var(--lnpc,var(--sxtext)) !important;font-size:var(--lnps,14px) !important;
  font-weight:var(--lnpw,700) !important;text-decoration:none !important}
.sxc-root .pr s{color:var(--lncc,var(--sxmut)) !important;font-size:var(--lncs,12px) !important;
  font-weight:var(--lncw,400) !important;text-decoration:line-through !important;opacity:1 !important}
.sxc-root .ln__saved,.sxc-root .pr__save{color:var(--lnsc,#1a7f5a) !important}
.sxc-root .sm__r--pos{color:var(--smpos) !important}

/* titels en links in de regels */
.sxc-root .ln__t{color:var(--lntc,var(--sxtext)) !important;text-decoration:none !important;
  font-weight:var(--lntw,550) !important;text-transform:none !important;letter-spacing:normal !important}
.sxc-root .ln__v{color:var(--lnmc,var(--sxmut)) !important;text-transform:none !important}

/* knoppen: themas zetten hier vaak een eigen achtergrond, rand of hoofdletters op */
.sxc-root .cta{background:var(--sxacc) !important;color:var(--sxacct) !important;
  border:0 !important;text-transform:none !important;letter-spacing:normal !important;
  width:100% !important;opacity:1 !important;font-weight:var(--smctaw,600) !important}
/* De sluitknop krijgt zijn achtergrond via een inline stijl uit de editor, dus
   die laten we met rust: !important zou die instelling overrulen. */
.sxc-root .qty button,.sxc-root .ln__x{background:none !important;border:0 !important;
  box-shadow:none !important;color:inherit !important;min-width:0 !important;min-height:0 !important}
.sxc-root .sx__x{border:0 !important;box-shadow:none !important;color:inherit !important;
  min-width:0 !important;min-height:0 !important}

/* afbeeldingen: themas geven img vaak een eigen breedte of aspect ratio mee */
.sxc-root .ln__im img,.sxc-root .upc__im img{width:100% !important;height:100% !important;
  object-fit:cover !important;max-width:none !important;border-radius:0 !important;
  aspect-ratio:auto !important;margin:0 !important}

/* lijsten en velden */
.sxc-root .sx ul:not(.hx *),.sxc-root .sx ol:not(.hx *){list-style:none !important;margin:0 !important;padding:0 !important}
.sxc-root .sx input:not(.hx *),.sxc-root .sx select:not(.hx *),.sxc-root .sx textarea:not(.hx *){
  box-shadow:none !important;letter-spacing:normal !important;text-transform:none !important}


/* Iconen. Themas zetten regelmatig iets als `svg{width:100%}` of
   `svg{fill:currentColor}` neer, en dat raakt onze iconen ook. Dan worden ze te
   groot, of lopen ze vol tot een vlek. Hieronder zetten we ze terug op wat er
   in het icoon zelf staat.
   De twee fill-regels houden het onderscheid tussen open en gevulde iconen
   intact. */
/* Alleen onze eigen iconen dragen de klasse sxc-i. Alles wat hier niet onder
   valt blijft ongemoeid: eigen HTML-blokken van de merchant met eigen sterren
   of logo's, en de officiele betaaliconen die het thema aanlevert. Die hebben
   hun eigen kleuren en die mogen we niet overschrijven.

   LET OP: hier nooit width of height op auto zetten. Voor een gewoon element
   is dat geldig, voor een SVG niet: die verwacht een lengte. De browser
   weigert de hele regel dan met "Expected length" en dat raakt elk icoon op de
   pagina, ook die van het thema. Onze iconen krijgen hun maat al mee als
   attribuut vanuit de renderer, dus hier hoeft niets te staan. */
.sxc-root svg.sxc-i{
  max-width:none !important;max-height:none !important;
  stroke:currentColor !important;display:block;vertical-align:middle;
  transform:none !important;opacity:1 !important}
.sxc-root svg.sxc-i[fill="none"]{fill:none !important}
.sxc-root svg.sxc-i[fill="currentColor"]{fill:currentColor !important}
.sxc-root svg.sxc-i *{fill:inherit !important;stroke:inherit !important;
  /* De dikte komt van de svg zelf, die staat inline vast. Een themaregel op
     path of g mag daar niet overheen. */
  stroke-width:inherit !important;vector-effect:none !important}
/* De vlak getekende iconen zetten hun eigen fill en stroke op een g eromheen.
   Die mogen we niet overschrijven, anders komt de dubbele rand terug. */
.sxc-root svg.sxc-i g[stroke="none"],
.sxc-root svg.sxc-i g[stroke="none"] *{stroke:none !important;fill:currentColor !important;
  stroke-width:0 !important}


/* Add-ons. Themas zetten vaak iets op `label`, bijvoorbeeld een breedte of een
   display, en dan krimpt het blok tot de inhoud in plaats van de volle breedte
   te vullen. */
.sxc-root .ao{width:100% !important;max-width:none !important;align-self:stretch !important;
  box-sizing:border-box !important;margin-inline:0 !important;float:none !important}
.sxc-root .ao__b{flex:1 1 auto !important;min-width:0 !important}


/* Aanbiedingen die vast boven de footer blijven staan.
   Buiten het scrollgebied, dus altijd in beeld, ook bij een lange cart. De
   zijmarge zit hier op het blok zelf, want de container eromheen heeft er geen. */
.sx__sticky{flex:0 0 auto;padding:0 var(--pad);border-top:1px solid var(--sxline);
  background:var(--sxbg)}
/* Eigen HTML onder de body. Staat buiten het scrollgebied, dus vlak boven de
   scheidingslijn van de footer en altijd in beeld. */
.sx__above{flex:0 0 auto;padding:0 var(--pad) 12px;background:var(--sxbg)}
.sx__sticky .blk{padding-top:12px;padding-bottom:12px}
.sx__sticky .blk--ups{padding-top:var(--upspt,12px);padding-bottom:var(--upspb,12px)}

/* Doorlopende balk met cirkels erop. De spelden staan op hun eigen drempel,
   dus de afstanden ertussen kloppen met wat de klant nog moet halen. */
.rw--track .rw__trackwrap{position:relative;padding:0 var(--rwinset,0px);
  height:calc(var(--rwis) + 10px);display:flex;align-items:center}
.rw--track .rw__track{flex:1;height:9px;border-radius:20px;background:var(--rwbg);overflow:hidden}
.rw--track .rw__track i{display:block;height:100%;background:var(--rwfill);
  border-radius:20px;transition:width .35s ease}
.rw__dot{position:absolute;top:50%;transform:translate(-50%,-50%);
  width:calc(var(--rwis) + 10px);height:calc(var(--rwis) + 10px);border-radius:50%;
  background:var(--sxbg);border:2px solid var(--rwbg);color:var(--rwic2,var(--sxtext));
  display:flex;align-items:center;justify-content:center;line-height:0;z-index:1}
.rw__dot.done{background:var(--rwfill);border-color:var(--rwfill);color:var(--rwic,#fff)}
.rw__dot svg{width:var(--rwis);height:var(--rwis)}
.rw__dot img{width:var(--rwis);height:var(--rwis);object-fit:contain}

.rw--track .rw__tcaps{position:relative;height:auto;min-height:1.4em;
  margin-top:var(--rwcapg,6px);padding:0 var(--rwinset,0px)}
.rw__tcap{position:absolute;top:0;transform:translateX(-50%);
  width:var(--rwcapw,92px);text-align:center;line-height:1.25;
  font-size:calc(var(--rwfs) * .72);color:var(--sxmut);overflow-wrap:break-word}
.rw__tcap.is-done{color:var(--sxtext)}
/* De buitenste labels lijnen naar binnen, anders vallen ze buiten de cart. */
.rw__tcap:first-child{transform:none;left:0 !important;text-align:left}
.rw__tcap:last-child{transform:none;left:auto !important;right:0;text-align:right}

/* besparing per regel kan vet */
.ln__saved,.pr__save{font-weight:var(--lnsw,400)}


/* De keuzelijst en de knop staan normaal onder elkaar, precies zoals eerst.
   display:contents laat de wikkel eromheen verdwijnen, dus de bestaande
   stijlen veranderen niet. */
.upc__act{display:contents}
.blk--noline{border-top:0}
/* Het vaste blok heeft zijn eigen lijn boven de footer, dus het blok erbinnen
   hoeft er geen tweede. */
/* Het vaste blok heeft zijn eigen lijn boven de footer, dus het blok erbinnen
   hoeft er geen tweede. Zet de merchant de lijn uit, dan gaat ook die weg. */
.sx__sticky .blk{border-top:0}
.sx__sticky--noline{border-top:0}

/* Picker: afbeelding links, en daaronder de variantkeuze en de knop naast
   elkaar op een rij. De doorgestreepte prijs staat hier voorop, zoals in de
   meeste winkels met deze opmaak. */
.upst--picker .upc{align-items:center}
.upst--picker .upc__act{display:flex;gap:8px;align-items:center;margin-top:8px}
.upst--picker .upc__sel{flex:1 1 auto;min-width:0;max-width:none;height:34px;align-self:auto}
.upst--picker .upc__add{flex:0 0 auto;width:auto;height:34px;padding:0 20px;align-self:auto}
.upst--picker .upc__was{order:-1}
.upst--picker .upc__pr{flex-wrap:wrap;row-gap:2px}


/* Extra inhoud onder een regel: usp-punten, een badge en een losse zin. Staat
   binnen de regel, dus lijnt uit met de titel en niet met de afbeelding. */
.ii{margin-top:var(--iigap,6px);font-size:var(--iifs,12px);color:var(--iic,var(--sxmut));line-height:1.4}
.ii__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;
  background:var(--sxsurf);color:var(--sxtext);font-size:calc(var(--iifs,12px) * .95);
  font-weight:550;margin-bottom:var(--iirg,3px)}
.ii__ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--iirg,3px)}
.ii__li{display:flex;align-items:flex-start;gap:5px}
.ii__li svg{flex:0 0 auto;margin-top:1px;color:var(--iiic,currentColor)}
.ii__note{margin-top:var(--iirg,3px)}
/* Naast elkaar in plaats van onder elkaar, voor korte punten. */
.ii--row .ii__ul{flex-direction:row;flex-wrap:wrap;gap:4px 12px}


/* De meldingsbalk als losse kaart in plaats van rand tot rand.

   Geen ruimte boven en onder tenzij je die zelf zet: de balk moet op precies
   dezelfde hoogte blijven staan als de volle variant, anders verspringt je hele
   cart zodra je van stijl wisselt. De zijruimte volgt standaard --pad, dus de
   kaart lijnt uit met de rest van de cart. */
.nt--card{margin:var(--ntgap,0) var(--ntins,var(--pad));
  border-radius:var(--ntrad,8px);overflow:hidden}
.nt--b-all{border:var(--ntbw,1px) solid var(--ntbc,#e3e3e3)}


/* Het woord onder de prijs als een regel niets kost. Eigen regel, zodat de
   doorgestreepte oude prijs erboven gewoon zichtbaar blijft. Rechts uitgelijnd,
   net als het bedrag erboven, en de grootte stelt de merchant zelf in. */
/* flex-basis 100% dwingt een eigen regel af binnen de rij hierboven. */
.pr__free{flex:0 0 100%;width:100%;text-align:right;line-height:1.3;margin-top:2px}