/** Shopify CDN: Minification failed

Line 1444:19 Expected identifier but found whitespace
Line 1444:20 Unexpected bad URL token
Line 1444:52 Expected ")" to end URL token
Line 1635:18 Unexpected "{"
Line 1635:27 Expected ":"
Line 2351:13 Unexpected "{"
Line 2351:22 Expected ":"
Line 2351:28 Unexpected "{"
Line 2358:13 Unexpected "{"
Line 2358:22 Expected ":"
... and 160 more hidden warnings

**/
/* =========================================================
   ROK&BILLIE – CUSTOM TWEAKS (CLEAN + CONSOLIDATED)
   - Duplicaten verwijderd
   - Foute CSS gerepareerd
   - Onvolledige regels verwijderd
   - Netjes gegroepeerd per onderdeel
   ========================================================= */

/* -----------------------------
   0) KLEUREN / VARS
----------------------------- */
:root{
  --rb-creme: #fdf8ee;
  --rb-petrol: #5CA4A1;
  --rb-turq:  #209E9C;
  --rb-cerise: #A63C6D;

  --rb-creme-70: rgba(253,248,238,.70);
  --rb-creme-80: rgba(253,248,238,.80);
  --rb-petrol-70: rgba(92,164,161,.70);

  /* variant maten */
  --rb-maten-creme: #fdf8ee;
  --rb-maten-cerise: #A63C6D;
}
/* =========================================================
   B) DOTS ALS OVERLAY ACHTER CONTENT (bulletproof)
   ========================================================= */
html, body{ height: 100%; }

body{
  position: relative;
  background: #fdf8ee !important;
}

/* de dots laag */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-color: #fdf8ee;
  background-image:
    radial-gradient(circle at 35% 35%, rgba(92,164,161,.24) 0 16px, transparent 11px),
    radial-gradient(circle at 65% 60%, rgba(92,164,161,.24) 0 16px, transparent 11px);
  background-size: 130px 120px;
  background-position: 0 0, 28px 36px;
  background-repeat: repeat;
}

/* zet alle pagina-content boven de overlay */
body > *{
  position: relative;
  z-index: 1;
}

/* alle witte lagen transparant maken */
.site-wrapper,
.page-wrapper,
.main-content,
.shopify-section,
.section,
.container,
.wrapper,
#MainContent,
.content-for-layout,
#app,
.theme-wrapper,
#root,
main#content{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#root .m6cl-inv::before,
#root .m6cl-inv::after,
#root .collection-wrapper::before,
#root .collection-wrapper::after,
#root .m6cl::before,
#root .m6cl::after{
  content: none !important;
  display: none !important;
  background: none !important;
}
/* =========================================================
   7) SOCIAL ICON BAR (Instagram, Facebook, etc.)
   ========================================================= */
.l4sc.plain.strong.static.size-l.text-center.hover-move-up{
  background: var(--rb-creme-70) !important;
  padding: 14px 0 !important;
  border-radius: 20px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 22px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.04) !important;
  max-width: 2000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.l4sc.plain.strong.static.size-l.text-center.hover-move-up li{
  list-style: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.l4sc.plain.strong.static.size-l.text-center.hover-move-up li a{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-decoration: none !important;
  gap: 6px !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.l4sc.plain.strong.static.size-l.text-center.hover-move-up li a i{
  width: 42px !important;
  height: 42px !important;
  border-radius: 30% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  transition: .25s ease !important;
  box-shadow: none !important;
}

.l4sc.plain.strong.static.size-l.text-center.hover-move-up li a:hover i{
  background: var(--rb-petrol) !important;
  color: var(--rb-creme) !important;
  transform: scale(1.15) !important;
  filter: drop-shadow(0 0 8px rgba(0,0,0,.25)) !important;
}

/* merk-kleuren default */
.l4sc .icon-instagram{ color:#d62976 !important; background:none !important; -webkit-background-clip: border-box !important; }
.l4sc .icon-youtube{ color:#ff0000 !important; }
.l4sc .icon-facebook-circle{ color:#1877F2 !important; }
.l4sc .icon-tiktok{ color:#000000 !important; }
.l4sc .icon-whatsapp{ color:#25D366 !important; }

/* pseudo-ovalen uit theme killen */
.l4sc.plain.strong.static.size-l.text-center.hover-move-up li a::before,
.l4sc.plain.strong.static.size-l.text-center.hover-move-up li a::after{
  content: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}


/* =========================================================
   25) CART – 1 groot CRÈME blok + knoppen turq/crème (sitebreed)
   ========================================================= */
body[class*="cart"] .form-cart,
body[class*="cart"] article.form-cart,
body.template-cart .cart,
body.template-cart #MainContent .cart,
body.template-cart .cart__contents{
  background: rgba(253,248,238,.70) !important;
  border-radius: 28px !important;
  padding: 26px !important;
}

body[class*="cart"] .form-cart fieldset{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body[class*="cart"] .form-cart fieldset > legend{ display: none !important; }

/* cart buttons */
body[class*="cart"] p.link-btn.wide.m10.form-group > a.overlay-buy_button,
body[class*="cart"] p.link-btn.wide.m10.form-group > button.overlay-buy_button,
body[class*="cart"] .form-cart a.overlay-buy_button,
body[class*="cart"] .form-cart button[name="checkout"]{
  background: #5ca4a1 !important;
  color: #fdf8ee !important;
  border: 2px solid #5ca4a1 !important;
  border-radius: 18px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body[class*="cart"] p.link-btn.wide.m10.form-group > a.overlay-buy_button:hover,
body[class*="cart"] p.link-btn.wide.m10.form-group > a.overlay-buy_button:active,
body[class*="cart"] p.link-btn.wide.m10.form-group > a.overlay-buy_button:focus,
body[class*="cart"] p.link-btn.wide.m10.form-group > button.overlay-buy_button:hover,
body[class*="cart"] p.link-btn.wide.m10.form-group > button.overlay-buy_button:active,
body[class*="cart"] p.link-btn.wide.m10.form-group > button.overlay-buy_button:focus,
body[class*="cart"] .form-cart button[name="checkout"]:hover,
body[class*="cart"] .form-cart button[name="checkout"]:active,
body[class*="cart"] .form-cart button[name="checkout"]:focus{
  background: #fdf8ee !important;
  color: #5ca4a1 !important;
  border-color: #fdf8ee !important;
  box-shadow: 0 0 0 3px rgba(92,164,161,.50) !important;
}


/* =========================
   RB – Koopknop (overlay-buy_button) FIX zichtbaar + geen dubbel randje
   ========================= */

body.template-product button.overlay-buy_button{
  /* altijd zichtbaar */
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;

  /* stevige look */
  background: #5CA4A1 !important;
  color: #FDF8EE !important;
  -webkit-text-fill-color: #FDF8EE !important;

  /* GEEN dubbele rand: één border, geen outline/boxshadow-rand */
  border: 1px solid rgba(253,248,238,.65) !important;
  outline: 0 !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.10) !important;

  /* zelfde hoeken als rest */
  border-radius: 12px !important;

  /* typografie */
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;

  /* maat */
  min-height: 54px !important;
  padding: 14px 22px !important;

  position: relative !important;
  z-index: 10 !important;
}

/* Verwijder eventuele “wash” lagen van theme */
body.template-product button.overlay-buy_button::before,
body.template-product button.overlay-buy_button::after{
  content: none !important;
  display: none !important;
}

/* Soms wordt de tekst apart uitgefadet */
body.template-product button.overlay-buy_button *{
  opacity: 1 !important;
  filter: none !important;
  color: #FDF8EE !important;
  -webkit-text-fill-color: #FDF8EE !important;
}

/* Hover/focus */
body.template-product button.overlay-buy_button:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,.14) !important;
}
body.template-product button.overlay-buy_button:focus-visible{
  outline: 2px solid rgba(253,248,238,.85) !important;
  outline-offset: 3px !important;
}
/* =========================================================
   RB – WINKELWAGEN • PDP INSPIRED • GLOBAL CSS
   Targets: .rb-cart markup uit rb-winkelwagen.liquid
   ========================================================= */

.rb-cart{
  /* fallbacks als inline vars ontbreken */
  --rb-cart-wrap: 1568px;
  --rb-creme: #FDF8EE;
  --rb-turq:  #5CA4A1;
  --rb-cerise:#A63C6D;
  --rb-panel-a: .82;
  --rb-radius: 22px;
  --rb-gap: 18px;

  --rb-panel: rgba(253,248,238,var(--rb-panel-a));
  --rb-soft: rgba(253,248,238,.55);
  --rb-tile: rgba(253,248,238,.45);
  --rb-line: rgba(92,164,161,.18);
  --rb-line2: rgba(92,164,161,.12);

  color: rgba(92,164,161,1);
}

/* ====== 1) Luxe wrapper (zoals PDP paneel) ====== */
.rb-cart .rb-cart__wrap{
  max-width: var(--rb-cart-wrap);
  margin: 22px auto 60px;
  padding: 18px;
  border-radius: var(--rb-radius);
  background: var(--rb-panel);
  border: 2px solid var(--rb-line);
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
  box-sizing: border-box;
}

@media (max-width: 1600px){
  .rb-cart .rb-cart__wrap{
    margin: 16px 12px 44px;
    max-width: calc(100% - 24px);
    padding: 16px;
    border-radius: 18px;
  }
}

/* ====== 2) Header titel als luxe crème pill (zoals Broeken) ====== */
.rb-cart .rb-cart__title{
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  margin: 0 0 18px;

  background: rgba(253,248,238,.92);
  border: 2px solid var(--rb-line);
  border-radius: 14px;

  color: var(--rb-turq);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.1;
}

/* ====== 3) Grid lay-out (links items / rechts overzicht) ====== */
.rb-cart .rb-grid{
  display: grid;
  grid-template-columns: 1.55fr .95fr;
  gap: var(--rb-gap);
  align-items: start;
}

@media (max-width: 990px){
  .rb-cart .rb-grid{ grid-template-columns: 1fr; }
}

/* ====== 4) Cards (links + rechts) ====== */
.rb-cart .rb-card{
  background: var(--rb-soft);
  border: 2px solid var(--rb-line2);
  border-radius: var(--rb-radius);
  overflow: hidden;
}

.rb-cart .rb-card__inner{
  padding: 16px;
}

/* ====== 5) Items list ====== */
.rb-cart .rb-items{ list-style: none; margin: 0; padding: 0; }

.rb-cart .rb-item{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;

  background: var(--rb-tile);
  border: 2px solid var(--rb-line2);
  border-radius: calc(var(--rb-radius) - 6px);
  padding: 12px;
  margin: 12px 0;
}

@media (max-width: 990px){
  .rb-cart .rb-item{ grid-template-columns: 96px 1fr; }
}

.rb-cart .rb-item__img{
  display:block;
  width: 110px;
  height: 110px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(92,164,161,.18);
  background: rgba(92,164,161,.08);
}
.rb-cart .rb-item__img img{ width:100%; height:100%; object-fit: cover; display:block; }

.rb-cart .rb-item__top{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.rb-cart .rb-item__h{
  margin: 0;
  font-weight: 900;
  line-height: 1.12;
  font-size: 18px;
}
.rb-cart .rb-item__h a{ color: inherit; text-decoration: none; }
.rb-cart .rb-item__h a:hover{ text-decoration: underline; }

.rb-cart .rb-item__variant{
  margin-top: 4px;
  opacity: .82;
  font-size: 14px;
}

.rb-cart .rb-item__price{
  text-align: right;
  white-space: nowrap;
}
.rb-cart .rb-old{
  display:block;
  opacity: .6;
  text-decoration: line-through;
  font-size: 13px;
  margin-bottom: 2px;
}
.rb-cart .rb-now{
  font-weight: 900;
  font-size: 18px;
}

.rb-cart .rb-item__bottom{
  margin-top: 10px;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
}

/* ====== 6) Aantal pill (mooier) ====== */
.rb-cart .rb-qty{ display:flex; align-items:center; gap: 10px; }
.rb-cart .rb-qty__label{ font-weight: 900; font-size: 14px; opacity: .95; }

.rb-cart .rb-qty__controls{
  display: inline-flex;
  align-items: center;
  height: 40px;
  border-radius: 14px;
  overflow: hidden;

  background: rgba(92,164,161,.70);
  border: 2px solid rgba(92,164,161,.22);
}

.rb-cart .rb-qty__btn{
  width: 44px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--rb-creme);
  font-weight: 900;
  font-size: 22px;
  line-height: 40px;
  cursor: pointer;
  padding: 0;
}
.rb-cart .rb-qty__btn:hover{ background: rgba(166,60,109,.14); }

.rb-cart .rb-qty__input{
  width: 58px;
  height: 40px;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 900;
  font-size: 16px;
  color: var(--rb-creme);
  -webkit-text-fill-color: var(--rb-creme);
  caret-color: var(--rb-creme);
  outline: none;
}

/* ====== 7) Verwijderen link: rustig, luxe ====== */
.rb-cart .rb-remove{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;
  border: 2px solid rgba(92,164,161,.25);
  background: rgba(253,248,238,.55);

  color: var(--rb-turq);
  font-weight: 900;
  text-decoration: none;
}
.rb-cart .rb-remove:hover{
  background: rgba(166,60,109,.14);
  border-color: rgba(166,60,109,.25);
  color: var(--rb-cerise);
}

/* ====== 8) Overzicht rechts ====== */
.rb-cart .rb-side__title{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 18px;
}

.rb-cart .rb-totals{ list-style: none; margin: 0; padding: 0; }
.rb-cart .rb-totals__row{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 2px solid var(--rb-line2);
}
.rb-cart .rb-totals__row--grand{
  border-bottom: 0;
  padding-top: 12px;
}

/* ====== 9) Buttons: crème -> cerise hover/active ====== */
.rb-cart .rb-actions{
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.rb-cart .rb-btn{
  width: 100%;
  min-height: 56px;
  padding: 0 22px;

  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(253,248,238,.95);
  color: var(--rb-turq);

  border-radius: 18px;
  border: 2px solid var(--rb-line);
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;

  outline: none;
  box-shadow: none;
  appearance: none;
}

.rb-cart .rb-btn:hover,
.rb-cart .rb-btn:focus{
  background: rgba(166,60,109,.88);
  color: #fff;
  border-color: rgba(166,60,109,.55);
}

.rb-cart .rb-btn:active{
  background: rgba(166,60,109,.94);
  transform: translateY(1px);
}

/* ====== 10) Notes ====== */
.rb-cart .rb-note{ margin-top: 14px; }
.rb-cart .rb-note__label{ font-weight: 900; color: var(--rb-turq); display:block; margin-bottom: 8px; }
.rb-cart .rb-note__area{
  width: 100%;
  min-height: 200px;
  border-radius: 18px;
  border: 2px solid var(--rb-line2);
  padding: 14px;

  background: rgba(92,164,161,.70);
  color: var(--rb-creme);
  font-weight: 700;
  outline: none;
}
.rb-cart .rb-note__area::placeholder{ color: rgba(253,248,238,.75); }


/* ---------- 3) CHECKOUT + VERDER WINKELEN: luxe turq pill ---------- */
.rb-cart .rb-actions .rb-btn{
  min-height: 56px !important;
  border-radius: 8px !important;

  background: rgba(92,164,161,.70) !important;           /* turq */
  border: 2px solid rgba(92,164,161,.35) !important;

  color: #FDF8EE !important;                              /* crème */
  -webkit-text-fill-color: #FDF8EE !important;

  font-weight: 900 !important;
  letter-spacing: .02em !important;

  transition: none !important;
}

/* alleen tekst cerise bij hover/focus/active (bg blijft turq) */
.rb-cart .rb-actions .rb-btn:hover,
.rb-cart .rb-actions .rb-btn:focus,
.rb-cart .rb-actions .rb-btn:focus-visible,
.rb-cart .rb-actions .rb-btn:active{
  background: rgba(92,164,161,.70) !important;
  border-color: rgba(92,164,161,.35) !important;

  color: rgba(166,60,109,.95) !important;                 /* cerise tekst */
  -webkit-text-fill-color: rgba(166,60,109,.95) !important;

  box-shadow: none !important;
  outline: 0 !important;
}

/* active: mini “press” zonder kleurwissel bg */
.rb-cart .rb-actions .rb-btn:active{
  transform: translateY(1px) !important;
}

/* ---------- 4) Optioneel: iets nettere spacing rechts ---------- */
.rb-cart .rb-actions{
  gap: 12px !important;
}


/* =========================================
   RB CART – QTY COLOR SWAP (LUXE)
   ========================================= */

/* hele balk: iets rustiger rand */
.rb-cart .rb-qty__controls{
  background: transparent !important;
  border: 2px solid rgba(92,164,161,.30) !important;
}

/* PLUS & MIN – crème blok, turquoise teken */
.rb-cart .rb-qty__btn{
  background: #FDF8EE !important;   /* crème */
  color: #5CA4A1 !important;        /* turquoise */

  font-size: 22px !important;
  font-weight: 900 !important;
}

/* hover / active = cerise (functie blijft hetzelfde) */
.rb-cart .rb-qty__btn:hover{
  background: #A63C6D !important;
  color: #FDF8EE !important;
}
.rb-cart .rb-qty__btn:active{
  background: #8f2f5a !important;
}

/* MIDDELSTE CIJFER – turquoise balk */
.rb-cart input.rb-qty__input[type="number"][name="updates[]"]{
  background: #5CA4A1 !important;   /* turquoise */
  color: #FDF8EE !important;        /* crème */

  -webkit-text-fill-color: #FDF8EE !important;
  caret-color: #FDF8EE !important;

  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 34px !important;
}

/* scheiding subtiel houden */
.rb-cart .rb-qty__controls > *:nth-child(2){
  border-left: 2px solid rgba(253,248,238,.35);
  border-right: 2px solid rgba(253,248,238,.35);
}

/* =========================================
   RB CART – TYPO FINETUNE
   ========================================= */

/* OMSCHRIJVING / PRODUCTTITEL */
.rb-cart .rb-item__h{
  font-size: 22px !important;   /* 👈 omschrijving */
  line-height: 1.15 !important;
  font-weight: 900 !important;
}

/* VARIANT / subtitel iets mee laten groeien */
.rb-cart .rb-item__variant{
  font-size: 16px !important;
}

/* VERWIJDEREN link */
.rb-cart .rb-remove{
  font-size: 18px !important;   /* 👈 verwijderen */
  font-weight: 900 !important;
}

/* icoon netjes mee schalen */
.rb-cart .rb-remove span{
  font-size: 18px !important;
  line-height: 1 !important;
}
/* =========================================
   RB CART – FINAL TUNING
   ========================================= */

/* PRIJS groter */
.rb-cart .rb-now{
  font-size: 22px !important;   /* 👈 prijs */
  font-weight: 900 !important;
}

/* Hoeken strakker */
.rb-cart .rb-qty__controls{
  border-radius: 5px !important;   /* 👈 5px hoeken */
}

/* =========================================================
   RB Legal Links – Luxe crème wrapper (1568) + pill in wrapper
   Plak in custom.css
========================================================= */

/* scope op alle RB legal secties */
[id^="rb-legal-"].rb-legal-section,
.rb-legal-section[id^="rb-legal-"]{
  width: 100%;
}

/* Turquoise buitenbalk */
.rb-legal-section .rb-legal-outer{
  background: #5CA4A1;
  border-radius: 999px;
  padding: 12px;
  margin: 18px auto;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* Crème binnenwrapper – maximaal 1568px “oogbreed” */
.rb-legal-section .rb-legal-inner{
  max-width: 1568px;
  margin: 0 auto;
  background: rgba(253,248,238,.92);
  border-radius: 999px;
  padding: 18px 26px;
  position: relative;
}

/* Pill IN de wrapper (hangt er luxe bovenop) */
.rb-legal-section .rb-legal-pill{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -55%);
  background: #5CA4A1;
  color: #FDF8EE;
  border-radius: 999px;
  padding: 10px 22px;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  border: 2px solid rgba(253,248,238,.80);
  z-index: 2;
  line-height: 1;
  white-space: nowrap;
}
.rb-legal-section .rb-legal-pill span{
  display: inline-block;
}

/* Nav/list uitlijnen */
.rb-legal-section .rb-legal-nav{
  padding-top: 10px; /* ruimte zodat pill niet “drukt” */
}

/* links netjes verdeeld / uitgelijnd */
.rb-legal-section .rb-legal-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between; /* mooie verdeling over de breedte */
  gap: 18px;
  flex-wrap: wrap;
}

/* elk item even “netjes” */
.rb-legal-section .rb-legal-list > li{
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

/* link styling (luxe tekstlink, geen chip) */
.rb-legal-section .rb-legal-list a{
  color: #2f3a3a;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.1;
  border-bottom: 2px solid transparent;
  padding: 6px 2px;
}
.rb-legal-section .rb-legal-list a:hover{
  border-bottom-color: rgba(166,60,109,.55);
}

/* icoontjes als je ze gebruikt */
.rb-legal-section .rb-legal-list svg{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  opacity: .95;
}

/* Responsive: op mobiel gecentreerd en netjes in regels */
@media (max-width: 980px){
  .rb-legal-section .rb-legal-inner{
    border-radius: 26px;
    padding: 22px 16px 16px;
  }
  .rb-legal-section .rb-legal-outer{
    border-radius: 26px;
  }
  .rb-legal-section .rb-legal-list{
    justify-content: center;
  }
  .rb-legal-section .rb-legal-list > li{
    white-space: normal;
  }
}
/* =====================================================
   RB Page Pill – TURQUOISE RAND OP 1568
===================================================== */

/* 1) outer: alleen breakout, geen styling */
#shopify-section-rb-page-pill,
#shopify-section-rb-page-pill > .rb-page-pill{
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  background: transparent !important;
}

/* 2) inner: HIER zit ALLES (rand + creme) */
.rb-page-pill__content{
  width: 100%;
  max-width: 1568px !important;
  margin: 40px auto 72px !important;

  /* rand */
  border: 40px solid #5CA4A1;
  border-radius: 28px;

  /* binnenkant */
  background: rgba(253,248,238,.7);
  padding: 72px 56px 44px;

  box-sizing: border-box;
  position: relative;
}

/* 3) pill snijdt door de rand */
.rb-page-pill__pill{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -65%);
  padding: 14px 52px;

  background: linear-gradient(180deg, rgba(92,164,161,.92), rgba(46,126,122,.92));
  color: #FDF8EE;

  border-radius: 999px;
  border: 3px solid rgba(253,248,238,.7); /* snij-effect */
  box-shadow: 0 14px 32px rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.15);

  z-index: 5;
  white-space: nowrap;
}

/* 4) tekst leesbreedte */
.rb-page-pill__body{
  max-width: 980px;
  margin: 0 auto;
}

/* 5) blobs/overlays killen */
.rb-page-pill__content::before,
.rb-page-pill__content::after,
.rb-page-pill .rte::before,
.rb-page-pill .rte::after{
  content: none !important;
  display: none !important;
}

/* 6) responsive */
@media (max-width: 980px){
  .rb-page-pill__content{
    padding: 52px 18px 22px;
    border-radius: 22px;
  }
  .rb-page-pill__pill{
    padding: 12px 36px;
  }
}
body.template-collection .collection-count{
  margin-top: 6px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #5CA4A1;
  font-size: 14px;
}
  /* RB – ontknijp theme wrapper zodat 1568 echt kan */
  .rb-collection-breakout .collection-wrapper{
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* RB – shell: exact 1568 met vaste marge */
  .rb-collection-shell{
    width: min(1568px, calc(100% - 56px)); /* 28px marge links+rechts */
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
  }
  @media (max-width: 900px){
    .rb-collection-shell{
      width: min(1568px, calc(100% - 32px)); /* 16px marge */
    }
  }

  /* Panel */
  .rb-collection-panel{
    margin: 18px auto 28px;
    padding: 22px;
    background: rgba(253,248,238,.70);
    border: 1px solid rgba(92,164,161,.35);
    border-radius: 22px;
    box-sizing: border-box;
    width: 100%;
  }
  @media (max-width: 900px){
    .rb-collection-panel{
      padding: 16px;
      border-radius: 18px;
    }
  }

  /* Count styling (links boven) */
  .rb-collection-count{
    margin-top: 6px;
    font-weight: 900;
    letter-spacing: .04em;
    color: #5CA4A1;
    font-size: 14px;
  }
  /* RB – echte breakout (breekt uit elke theme container) */
.rb-collection-breakout{
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ontknijp alles binnen breakout */
.rb-collection-breakout .collection-wrapper{
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* RB – shell exact 1568 (met vaste marge links/rechts) */
.rb-collection-shell{
  max-width: 1568px !important;
  width: calc(100% - 56px) !important;   /* 28px links + 28px rechts */
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box;
}

@media (max-width: 900px){
  .rb-collection-shell{
    width: calc(100% - 32px) !important; /* 16px + 16px */
  }
}

/* panel vult shell */
.rb-collection-panel{
  width: 100% !important;
  box-sizing: border-box;
}
/* RB – PDP: paneel exact 1568 */
body.template-product{
  --rb-pdp-wrap: 1568px;
  --rb-pdp-pad: 32px;
}

body.template-product #shopify-section-template--27497160704327__main-product{
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

body.template-product article#main-product{
  width: min(var(--rb-pdp-wrap), calc(100% - 56px)) !important; /* 28px + 28px */
  max-width: var(--rb-pdp-wrap) !important;
  margin: 24px auto !important;
  padding: var(--rb-pdp-pad) !important;
  box-sizing: border-box !important;

  background: rgba(253,248,238,.80) !important;
  border-radius: 22px !important;
  border: 2px solid rgba(92,164,161,.18) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.06) !important;
}

@media (max-width: 900px){
  body.template-product article#main-product{
    width: calc(100% - 32px) !important; /* 16+16 */
    padding: 16px !important;
    margin: 16px auto !important;
    border-radius: 18px !important;
  }
}
/* RB – PDP: paneel exact 1568 */
body.template-product{
  --rb-pdp-wrap: 1568px;
  --rb-pdp-pad: 32px;
}

body.template-product #shopify-section-template--27497160704327__main-product{
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

body.template-product article#main-product{
  width: min(var(--rb-pdp-wrap), calc(100% - 56px)) !important; /* 28px + 28px */
  max-width: var(--rb-pdp-wrap) !important;
  margin: 24px auto !important;
  padding: var(--rb-pdp-pad) !important;
  box-sizing: border-box !important;

  background: rgba(253,248,238,.80) !important;
  border-radius: 22px !important;
  border: 2px solid rgba(92,164,161,.18) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.06) !important;
}

@media (max-width: 900px){
  body.template-product article#main-product{
    width: calc(100% - 32px) !important; /* 16+16 */
    padding: 16px !important;
    margin: 16px auto !important;
    border-radius: 18px !important;
  }
}
/* =========================================================
   RB – PRODUCTPAGE WIDTH FIX
   - main#content niet beperken (anders blijft hij 1500)
   - main-product panel wél 1568 gecentreerd
   ========================================================= */

@media (min-width: 1024px){

  /* 1) Haal de "klem" weg: main#content mag op product full width */
  body.template-product main#content{
    max-width: none !important;
    width: 100% !important;
  }

  /* 2) Shopify section rondom main-product: full-bleed zodat dots etc doorlopen */
  body.template-product div[id^="shopify-section-template--"][id$="__main-product"]{
    width: 100% !important;
    max-width: none !important;
  }

  /* 3) Het echte paneel: 1568 gecentreerd */
  body.template-product article#main-product{
    width: min(1568px, calc(100% - 48px)) !important; /* 24px links+rechts */
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* =========================
   RB – Maten
   - op voorraad + gekozen = cerise
   - uitverkocht = crème + niet aanklikbaar
   ========================= */

/* 1) Default: laat je theme z'n styling doen (hier niets) */

/* 2) Op voorraad (dus NIET .disabled) én gekozen: CERISE tekst */
ul.check.box input[type="radio"]:checked:not(.disabled) + label span{
  color: #A63C6D !important; /* cerise */
}

/* (optioneel) als je ook rand/achtergrond cerise wil houden bij gekozen op voorraad */
ul.check.box input[type="radio"]:checked:not(.disabled) + label{
  border-color: #A63C6D !important;
}

/* 3) Uitverkocht: crème tekst */
ul.check.box input.disabled + label span{
  color: #FDF8EE !important; /* crème */
}

/* 4) Uitverkocht: NIET aanklikbaar */
ul.check.box input.disabled + label{
  pointer-events: none !important;
  cursor: not-allowed !important;
  opacity: .55 !important; /* mag je aanpassen */
}

/* extra safe: klik ook blokkeren op inner elementen */
ul.check.box input.disabled + label *{
  pointer-events: none !important;
}

/* 5) Super belangrijk:
   Als een uitverkochte maat tóch checked staat (zoals jouw 33),
   forceer dan dat hij NIET cerise wordt */
ul.check.box input.disabled:checked + label span{
  color: #FDF8EE !important; /* crème wint */
}
ul.check.box input.disabled:checked + label{
  border-color: rgba(253,248,238,.6) !important;
}
/* === RB | Floating product cards === */
.collection .product-card,
.collection .grid-product,
.collection .card {
  background: rgba(253, 248, 238, 0.85); /* crème transparant */
  border: 2px solid #5CA4A1;             /* turquoise rand */
  border-radius: 18px;
  padding: 14px 14px 16px;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.08),
    0 2px 6px rgba(0,0,0,0.05);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Hover = iets meer zweven */
.collection .product-card:hover,
.collection .grid-product:hover,
.collection .card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.12),
    0 4px 10px rgba(0,0,0,0.08);
}
/* Geen achtergrond achter product grid */
.collection .product-grid,
.collection .grid,
.collection .collection-products {
  background: transparent !important;
}

/* Ruimte tussen cards luchtig */
.collection .grid__item,
.collection .product-card-wrapper {
  padding: 14px;
  background: transparent !important;
}
/* Titel & prijs strak binnen card */
.collection .card__heading,
.collection .product-title {
  margin-top: 12px;
}

.collection .price {
  margin-top: 6px;
  font-weight: 600;
}

/* ===== RB | Doorlopende lijn boven productgrid ===== */

/* 1. Oude lijnen op cards UIT */
body.template-collection :where(
  .product-item::before,
  .product-card::before,
  .card--product::before
) {
  display: none !important;
}


/* ===== RB | Slider pijlen UIT op collectie ===== */
body.template-collection :where(
  .swiper-button-prev,
  .swiper-button-next,
  .slider-arrow,
  .collection-arrow,
  .product-grid-arrow
) {
  display: none !important;
}
/* Stop losse lijnen per product card */
body.template-collection li.product-card::before,
body.template-collection li.product-card::after{
  content: none !important;
  display: none !important;
}

/* Ook eventuele binnen-balkjes killen */
body.template-collection li.product-card > *::before{
  content: none !important;
}

/* =====================================
   RB | Cart titel EXACT OOTD pill look
   ===================================== */

/* 1) Titel zelf als OOTD-pill */
body.template-cart .rb-cart__title{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: fit-content !important;
  margin: 0 auto 22px !important;

  padding: 12px 38px !important;
  border-radius: 999px !important;

  background: #5CA4A1 !important;                 /* turquoise fill */
  border: 3px solid rgba(253,248,238,.92) !important; /* crème rand */

  color: #FDF8EE !important;                       /* crème tekst */
  font-family: "Frank Ruhl Libre", serif !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  text-align: center !important;

  box-shadow:
    0 10px 22px rgba(0,0,0,.18),
    inset 0 2px 0 rgba(255,255,255,.22) !important;  /* luxe highlight */
}

/* Iets hoger plaatsen: net onder de rand */
body.template-cart .rb-cart__title{
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-16px) !important;
}
/* =====================================
   RB | Quantity controls – luxe rechthoek
   ===================================== */

.rb-qty__controls{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  background: #FDF8EE;           /* crème */
  border: 2px solid #5CA4A1;     /* turquoise rand */
  border-radius: 6px;            /* jouw wens */
  height: 42px;
  min-width: 120px;

  padding: 0;
  overflow: hidden;
}

/* + en - knoppen */
.rb-qty__btn{
  width: 40px;
  height: 100%;
  border: none;
  background: transparent;

  color: #5CA4A1;                /* turquoise */
  font-size: 22px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

/* Hover = subtiele luxe feedback */
.rb-qty__btn:hover{
  background: rgba(92,164,161,.12);
}

/* Het cijfer */
.rb-qty__input{
  width: 40px;
  height: 100%;

  border: none;
  background: transparent;

  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #5CA4A1;                /* turquoise cijfer */

  appearance: textfield;
  -moz-appearance: textfield;
}

/* Spin buttons weg (Chrome/Safari) */
.rb-qty__input::-webkit-outer-spin-button,
.rb-qty__input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Focus netjes, niet schreeuwerig */
.rb-qty__input:focus{
  outline: none;
}
/* =====================================
   RB | Qty controls – PRO / boutique look
   ===================================== */

body.template-cart .rb-qty__controls{
  display: inline-flex !important;
  align-items: center !important;

  height: 38px !important;
  min-width: 112px !important;

  background: rgba(253,248,238,.92) !important;
  border: 1.5px solid rgba(92,164,161,.65) !important;
  border-radius: 6px !important;

  overflow: hidden !important;

  box-shadow:
    0 6px 16px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
}

/* Buttons: clean icon style, no boxes */
body.template-cart .rb-qty__btn{
  width: 36px !important;
  height: 38px !important;

  border: 0 !important;
  background: transparent !important;

  color: #5CA4A1 !important;
  font-size: 20px !important;
  font-weight: 700 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  user-select: none !important;

  transition: background .15s ease, opacity .15s ease !important;
}

/* Subtiele hover, niet “blokkerig” */
body.template-cart .rb-qty__btn:hover{
  background: rgba(92,164,161,.08) !important;
}

/* Geen extra pseudo’s die rare vakjes maken */
body.template-cart .rb-qty__btn::before,
body.template-cart .rb-qty__btn::after{
  content: none !important;
  display: none !important;
}

/* Input: rustig, perfect centered */
body.template-cart .rb-qty__input{
  width: 40px !important;
  height: 38px !important;

  border: 0 !important;
  background: transparent !important;

  text-align: center !important;
  color: #5CA4A1 !important;
  font-size: 15px !important;
  font-weight: 700 !important;

  padding: 0 !important;
  margin: 0 !important;

  outline: none !important;
  box-shadow: none !important;

  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

/* Spin buttons weg */
body.template-cart .rb-qty__input::-webkit-outer-spin-button,
body.template-cart .rb-qty__input::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0 !important;
}
/* =====================================
   RB | + en − optisch PERFECT centreren
   ===================================== */

body.template-cart .rb-qty__btn{
  line-height: 1 !important;          /* reset font line-height */
}

/* min-teken iets omhoog */
body.template-cart .rb-qty__btn[aria-label="Minder"]{
  transform: translateY(8px) !important;
}

/* plus-teken iets omlaag */
body.template-cart .rb-qty__btn[aria-label="Meer"]{
  transform: translateY(8px) !important;
}
body.template-cart .rb-qty__btn{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
/* =====================================
   RB | Mooie + en − iconen (rounded, luxe)
   ===================================== */

/* MIN (–) */
body.template-cart .rb-qty__btn[aria-label="Minder"]::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='2' rx='1' fill='%235CA4A1'/%3E%3C/svg%3E") !important;
}

/* PLUS (+) */
body.template-cart .rb-qty__btn[aria-label="Meer"]::after{
  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='11' y='5' width='2' height='14' rx='1' fill='%235CA4A1'/%3E%3Crect x='5' y='11' width='14' height='2' rx='1' fill='%235CA4A1'/%3E%3C/svg%3E\") !important;
}
/* =====================================
   RB | Luxe checkbox (voorwaarden)
   ===================================== */

body.template-cart input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;

  width: 20px;
  height: 20px;

  background: #FDF8EE;               /* crème */
  border: 2px solid #5CA4A1;         /* turquoise rand */
  border-radius: 4px;                /* subtiel afgerond */

  display: inline-grid;
  place-content: center;

  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

/* Vinkje */
body.template-cart input[type="checkbox"]::before{
  content: "";
  width: 12px;
  height: 8px;

  border-left: 4px solid #5CA4A1;
  border-bottom: 4px solid #5CA4A1;

  transform: rotate(-45deg) scale(0);
  transition: transform .12s ease;
}

/* Checked state */
body.template-cart input[type="checkbox"]:checked::before{
  transform: rotate(-45deg) scale(1);
}

/* Hover = iets duidelijker */
body.template-cart input[type="checkbox"]:hover{
  background: rgba(92,164,161,.08);
}

/* Focus (toegankelijk, maar rustig) */
body.template-cart input[type="checkbox"]:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(92,164,161,.25);
}
body.template-cart input[type="checkbox"]:checked{
  background: rgba(92,164,161,.08);
}
/* =====================================
   RB | Achterste (CSS) logo op mobiel UIT
   ===================================== */

@media (max-width: 760px){
  .rb-force-logo{
    --rb-logo-url: none !important;
    background-image: none !important;
  }

  .rb-force-logo::before,
  .rb-force-logo::after{
    content: none !important;
    display: none !important;
  }
}

/* =========================================================
   RB – UNIVERSELE PILL LOOK (WERKT ECHT)
   - pakt alle RB pill varianten
   - forceert dezelfde stijl met !important
   - houdt het beperkt tot Shopify sections (geen site-brede pill chaos)
   ========================================================= */

/* 0) Zorg dat wrappers kunnen ankeren */
[id^="shopify-section-"] :is(
  .rb-luxe-outer,
  .rb-rolodex-outer,
  .rb-ds3__frame,
  .rb-uitgelicht__panel,
  .rb-inner,
  .rb-stage
){
  position: relative !important;
}

/* 1) Alle pill-wrappers: altijd gecentreerd */
[id^="shopify-section-"] :is(
  .rb-rolopillwrap,
  .rb-collage__pillwrap,
  .rb-ds3__pillwrap,
  .rb-uitgelicht__pillwrap,
  .rb-pillwrap
){
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 50 !important;
  max-width: calc(100% - 24px) !important;
  pointer-events: none !important;
}

/* 2) De pill zelf: exact dezelfde opmaak */
[id^="shopify-section-"] :is(
  .rb-rolopill,
  .rb-collage__pill,
  .rb-ds3__pill,
  .rb-uitgelicht__pill,
  .rb-pill
){
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  width: min(760px, calc(100% - 24px)) !important; /* breed genoeg */
  max-width: calc(100% - 24px) !important;
  padding: 10px 22px !important;

  border-radius: 14px !important; /* rechter hoeken */
  border: 2px solid rgba(253,248,238,.90) !important;

  background: linear-gradient(135deg, rgba(92,164,161,.98), rgba(46,126,122,.98)) !important;

  box-shadow:
    0 10px 26px rgba(0,0,0,.22),
    inset 0 2px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(0,0,0,.10) !important;

  pointer-events: none !important;
}

/* 3) Tekst: altijd leesbaar (max 2 regels) */
[id^="shopify-section-"] :is(
  .rb-rolopill span,
  .rb-collage__pill span,
  .rb-ds3__pill span,
  .rb-uitgelicht__pill span,
  .rb-pill span
){
  font-family: "Frank Ruhl Libre", serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;

  font-size: 13px !important;
  letter-spacing: .08em !important;
  line-height: 1.12 !important;

  color: #FDF8EE !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.18),
    0 2px 6px rgba(0,0,0,.25) !important;

  /* 2 regels max, geen “onleesbare” ellipsis */
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

/* 4) Mobiel: iets compacter */
@media (max-width: 768px){
  [id^="shopify-section-"] :is(
    .rb-rolopill,
    .rb-collage__pill,
    .rb-ds3__pill,
    .rb-uitgelicht__pill,
    .rb-pill
  ){
    width: calc(100% - 20px) !important;
    padding: 9px 16px !important;
  }

  [id^="shopify-section-"] :is(
    .rb-rolopill span,
    .rb-collage__pill span,
    .rb-ds3__pill span,
    .rb-uitgelicht__pill span,
    .rb-pill span
  ){
    font-size: 12px !important;
    letter-spacing: .06em !important;
  }
}
#shopify-section-{{ section.id }} #logo .logo-img{
  max-height: none !important;
}


/* =========================================
   PRODUCT – mobiel: gallery centreren
   ========================================= */
@media (max-width: 749px){

  /* zorg dat de swiper shell netjes centreert */
  body.template-product article#main-product .l4pr.desktop-hide .swiper-outer{
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* slide inhoud centreren */
  body.template-product article#main-product .l4pr.desktop-hide .swiper-slide{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* kliklaag/picture niet links “plakken” */
  body.template-product article#main-product .l4pr.desktop-hide .swiper-slide a,
  body.template-product article#main-product .l4pr.desktop-hide .swiper-slide picture{
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }

  /* image altijd gecentreerd */
  body.template-product article#main-product .l4pr.desktop-hide img{
    display: block !important;
    margin: 0 auto !important;
    object-position: center center !important;
  }
}
/* =========================================
   PRODUCT – mobiel: 2-up gallery echt centreren
   ========================================= */
@media (max-width: 749px){

  /* center de hele carousel */
  article#main-product ul.l4pr.desktop-hide.s4wi .swiper-outer{
    display: flex !important;
    justify-content: center !important;
  }

  /* maak de track (wrapper) een “blok” dat kan centreren */
  article#main-product ul.l4pr.desktop-hide.s4wi .swiper-wrapper{
    width: fit-content !important;
    justify-content: center !important;
  }

  /* swiper container mag gewoon 100% blijven */
  article#main-product ul.l4pr.desktop-hide.s4wi .swiper{
    width: 100% !important;
  }

  /* voorkom rare extra margins die soms asymmetrisch voelen */
  article#main-product ul.l4pr.desktop-hide.s4wi .swiper-slide{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Fix swiper swipe on product images */
.swiper,
.swiper-wrapper,
.swiper-slide {
  pointer-events: auto !important;
  touch-action: pan-y pan-x !important;
}

.swiper-button-next,
.swiper-button-prev {
  pointer-events: auto !important;
}
/* PRODUCT: verberg pijlen bij afbeelding-galerij (theme-onafhankelijk) */
.template-product button[aria-label*="Next"],
.template-product button[aria-label*="Previous"],
.template-product button[aria-label*="Volgende"],
.template-product button[aria-label*="Vorige"],
.template-product .swiper-button-next,
.template-product .swiper-button-prev,
.template-product .flickity-button,
.template-product .splide__arrow,
.template-product .slider-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* =========================================================
   RB – CHAT WIDGET: altijd bovenop + wegklikbaar
   ========================================================= */

/* 1) Zorg dat de chat-container boven ALLES ligt */
#shopify-chat,
#ShopifyChat,
.shopify-chat,
.shopify-inbox,
#ShopifyInbox,
#tidio-chat,
#tawkchat-container,
#crisp-chatbox,
#smartsupp-widget-container,
#zEWidget-launcher,
#launcher,
.gorgias-web-messenger-container,
#GorgiasWebMessengerContainer,
iframe[title*="chat"],
iframe[id*="chat"],
iframe[src*="chat"],
iframe[src*="inbox"]{
  position: fixed !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important; /* klikbaar */
}

/* 2) Voorkom dat overlays/frames “boven” je chat komen */
html, body{
  overflow-x: hidden;
}

/* BELANGRIJK: als je ergens transform/filter op grote wrappers hebt,
   kan dat stacking contexts maken. We neutraliseren het waar het vaak zit. */
#MainContent,
.main-content,
.page-width,
.shopify-section,
.section,
.footer,
#shopify-section-footer{
  isolation: auto !important;
}
@media (max-width: 749px){

  /* ✅ Zet vars op het echte element dat altijd bestaat */
  body.template-product article#main-product{
    --rb-radius: 22px !important;
    --rb-gap: 28px !important;     /* ruimte zodat next wegvalt */
    --rb-shift: -16px !important;   /* eerste verder naar links */
  }

  /* ✅ Clip alles rechts weg (dus next niet zichtbaar) */
  body.template-product article#main-product .l4pr-container .swiper-outer{
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;

    /* jouw “naar links” shift, maar zonder links rand te slopen */
    position: relative !important;
    left: calc(0 * var(--rb-shift)) !important;
    padding-left: var(--rb-shift) !important;
  }

  /* ✅ Belangrijk: forceer wrapper en slides naar 1 per view
     (inline width van Swiper wordt hiermee geklapt) */
  body.template-product article#main-product .l4pr-container .swiper-wrapper{
    display: flex !important;
    margin-right: calc(-1 * var(--rb-gap)) !important; /* compenseert slide padding */
  }

  body.template-product article#main-product .l4pr-container .swiper-slide{
    width: 100% !important;        /* override inline width: 296px */
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-right: var(--rb-gap) !important; /* “ruimte” tussen slides */
    box-sizing: border-box !important;
  }
  body.template-product article#main-product .l4pr-container picture.img-multiply-bg > img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}


@media (max-width: 749px){

  body.template-product article#main-product{
    --rb-inner-shift: 8px; /* 👈 tweak 6–14px */
  }

  /* 🔹 Schuif het HELE beeld + frame iets naar rechts */
  body.template-product article#main-product
  .l4pr-container
  .swiper-slide > li{
    padding-left: var(--rb-inner-shift) !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 🔹 Zorg dat beeld netjes blijft passen */
  body.template-product article#main-product
  .l4pr-container
  picture.img-multiply-bg{
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 749px){

  /* 1) Titel (productnaam) los centreren */
  body.template-product #main-product header h5.mob-h4{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
  }

  /* 2) Prijs los centreren */
  body.template-product #main-product .f8pr-price{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
  }

  /* 3) Omschrijving/tekst (als je de korte intro/tekst in header bedoelt) */
  body.template-product #main-product header{
    text-align: center !important;
  }
  body.template-product #main-product header .l4dr{
    justify-content: center !important; /* deel/icoontjes etc. */
  }

}
@media (max-width: 999px){
  ul[data-type="main-nav"] ul.ff-primary li > ul > li > a[href^="/collections/"],
  ul[data-type="main-nav"] ul.ff-primary li > ul > li > a[href^="/blogs/"]{
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
  }

  ul[data-type="main-nav"] ul.ff-primary li > ul > li{
    cursor: pointer;
  }
}
#main-product .l4pr-container .swiper-outer,
#main-product .l4pr-container .swiper-wrapper,
#main-product .l4pr-container .swiper-slide{
  border: 0 !important;
}
body.template-product .l4pr li.has-anchor > a{
  border: 0 !important;
  height: auto !important;   /* 👈 dit is cruciaal */
  border-radius: 0 !important;
}
body.template-product .l4pr li.has-anchor > a{
  border: 0 !important;
  height: auto !important;   /* 👈 dit is cruciaal */
  border-radius: 0 !important;
}
/* RB – luxe gallery frame (geen turq border) */
body.template-product .l4pr li.has-anchor picture.img-multiply-bg{
  display:block !important;
  position:relative !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

body.template-product .l4pr li.has-anchor picture.img-multiply-bg > img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.12) !important; /* luxe */
}

/* =========================================================
   RB – LUXE CARDS (hard override) voor #collection.l4cl
   ========================================================= */

#collection.l4cl > li.product-card{
  position: relative !important;
  overflow: hidden !important;

  border-radius: 26px !important;
  background: rgba(253,248,238,.96) !important;
  border: 2px solid rgba(92,164,161,.35) !important;

  box-shadow: 0 18px 40px rgba(0,0,0,.12) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

#collection.l4cl > li.product-card:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(92,164,161,.55) !important;
  box-shadow: 0 26px 60px rgba(0,0,0,.16) !important;
}

/* Turq topbar per card */
#collection.l4cl > li.product-card::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important; left:0 !important; right:0 !important;
  height: 34px !important;
  background: linear-gradient(135deg,#5CA4A1,#2E7E7A) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important;
  z-index: 2 !important;
}

/* Beeld onder topbar */
#collection.l4cl > li.product-card > figure{
  margin: 0 !important;
  padding-top: 34px !important;
}

/* Vendor badge bovenop bar */
#collection.l4cl > li.product-card > a.rb-vendor-badge{
  position: absolute !important;
  top: 7px !important;
  left: 12px !important;
  z-index: 3 !important;

  padding: 6px 12px !important;
  border-radius: 999px !important;

  background: rgba(253,248,238,.95) !important;
  border: 1px solid rgba(253,248,238,.70) !important;

  color:#2E7E7A !important;
  text-decoration: none !important;

  font-weight: 900 !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;

  box-shadow: 0 10px 22px rgba(0,0,0,.16) !important;
}

/* Onderstuk (titel pill + prijs) */
#collection.l4cl > li.product-card > div{
  padding: 14px 16px 18px !important;
  text-align: center !important;
}

/* Crème pill (titel) */
#collection.l4cl > li.product-card .rb-card-title .product-title{
  margin: 0 !important;
}
#collection.l4cl > li.product-card .rb-card-title .product-title a{
  display: inline-block !important;
  max-width: 100% !important;

  padding: 8px 14px !important;
  border-radius: 999px !important;

  background: rgba(253,248,238,.97) !important;
  border: 1px solid rgba(92,164,161,.35) !important;

  color: #2E7E7A !important;
  text-decoration: none !important;

  font-weight: 900 !important;
  font-size: 12px !important;
  letter-spacing: .03em !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  box-shadow: 0 10px 22px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6) !important;
}

/* Prijs */
#collection.l4cl > li.product-card p.price{
  margin: 10px 0 0 !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  letter-spacing: .02em !important;
  color:#2E7E7A !important;
}

/* Rommel weg */
#collection.l4cl > li.product-card .static{
  display:none !important;
}

/* Swiper pijlen weg in cards */
#collection.l4cl > li.product-card .swiper-button-nav{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}
/* Ruimte tussen collectie cards */
#collection.l4cl > li.product-card{
  margin: 12px !important;       /* desktop */
}

@media (max-width: 749px){
  #collection.l4cl > li.product-card{
    margin: 12px !important;     /* mobiel iets compacter */
  }
}
/* =================================================
   RB – 4 cards per rij (desktop)
   ================================================= */

/* Desktop: 4 per rij */
@media (min-width: 1000px){
  #collection.l4cl > li.product-card{
    width: calc(25% - 36px) !important; /* 4 kolommen + ruimte */
    max-width: calc(25% - 36px) !important;
  }
}
/* =================================================
   RB – Collection grid exact 1568px
   ================================================= */

/* 1568 wrapper */
#collection.l4cl{
  max-width: 1568px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 🔑 vult de breedte */
}

/* Cards netjes verdelen */
#collection.l4cl > li.product-card{
  margin-bottom: 42px; /* verticale lucht */
}

/* Desktop: exact 4 per rij */
@media (min-width: 1000px){
  #collection.l4cl > li.product-card{
    width: calc(25% - 30px) !important;
    max-width: calc(25% - 30px) !important;
  }
}
/* Tablet: 2 per rij */
@media (min-width: 750px) and (max-width: 999px){
  #collection.l4cl > li.product-card{
    width: calc(50% - 24px) !important;
    max-width: calc(50% - 24px) !important;
  }
}

/* Mobiel: 1 per rij */
@media (max-width: 749px){
  #collection.l4cl > li.product-card{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* Omschrijving (static) leesbaarder */
#collection.l4cl > li.product-card .static{
  display: block !important;

  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;

  color: rgba(0,0,0,.72);
}
/* =================================================
   RB – Crème pill OOTD (Small Caps • Capsule • Sheen)
   ================================================= */

#collection li.product-card .rb-card-title .product-title a{
  /* Typography */
  font-family: "Frank Ruhl Libre", serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-variant-caps: small-caps !important;

  /* Capsule shape (iets hoger dan breed) */
  padding: 12px 18px !important;
  border-radius: 999px !important;

  /* Crème pill look */
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.75),
      rgba(253,248,238,.95) 35%,
      rgba(253,248,238,.92) 65%,
      rgba(235,225,205,.95)
    ) !important;

  border: 1px solid rgba(92,164,161,.35) !important;

  color: #2E7E7A !important;
  text-decoration: none !important;

  /* DS-style depth */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 10px 22px rgba(0,0,0,.14) !important;

  display: inline-block !important;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  transition: transform .18s ease, box-shadow .18s ease;
}

/* Subtiele lift bij hover */
#collection li.product-card:hover
.rb-card-title .product-title a{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 14px 30px rgba(0,0,0,.18) !important;
}
@media (max-width: 749px){
  #collection li.product-card .rb-card-title .product-title a{
    font-size: 13px !important;
    letter-spacing: .12em !important;
    padding: 11px 16px !important;
  }
}
/* RB – prijs groter & stijlvoller (exacte selector) */
#collection.l4cl li.product-card p.price.s1pr{
  font-family: "Frank Ruhl Libre", serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  color: #2E7E7A !important;
  text-align: center !important;
  margin-top: 14px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.6) !important;
}

/* optioneel: editorial hairline boven prijs */
#collection.l4cl li.product-card p.price.s1pr::before{
  content: "" !important;
  display: block !important;
  width: 38px !important;
  height: 1px !important;
  margin: 8px auto 7px !important;
  background: rgba(92,164,161,.45) !important;
}
/* Old-style cijfers + rustige euro */
#collection.l4cl li.product-card p.price.s1pr{
  font-variant-numeric: oldstyle-nums !important;
  letter-spacing: .06em !important;
}

/* Euroteken subtieler */
#collection.l4cl li.product-card p.price.s1pr::first-letter{
  font-size: .85em;
  opacity: .75;
  margin-right: 2px;
}
#collection.l4cl li.product-card p.price.s1pr{
  position: relative;
  top: -2px;
}
#collection.l4cl li.product-card p.price.s1pr::before{
  background: linear-gradient(
    to right,
    transparent,
    rgba(92,164,161,.45),
    transparent
  ) !important;
}
/* =================================================
   RB – Luxe turquoise OOTD pill (vendor)
   ================================================= */

#collection.l4cl li.product-card a.rb-vendor-badge{
  /* Typography */
  font-family: "Frank Ruhl Libre", serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-variant-caps: small-caps !important;

  /* Capsule shape */
  display: inline-block !important;
  padding: 4px 10px !important;     /* iets hoger dan breed */
  border-radius: 14px !important;

  /* Turquoise OOTD gradient */
  background:
    linear-gradient(
      180deg,
      #7BC6C3 0%,
      #5CA4A1 45%,
      #4B9794 55%,
      #3E7F7C 100%
    ) !important;

  color: #FDF8EE !important;
  text-decoration: none !important;

  /* DS-style depth & inner highlight */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 12px 26px rgba(0,0,0,.22) !important;

  border: 1px solid rgba(255,255,255,.35) !important;

  margin: 2px auto 12px !important;
  text-align: center !important;

  transition: transform .18s ease, box-shadow .18s ease;
}

/* Subtiele lift op hover */
#collection.l4cl li.product-card a.rb-vendor-badge:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 18px 36px rgba(0,0,0,.28) !important;
}
/* RB – Vendor pill omhoog (OOTD position) */
#collection.l4cl li.product-card a.rb-vendor-badge{
  margin-top: -34px !important;   /* omhoog */
}




/* RB – blauwe rand artefact grote productfoto FIX */
.template-product .l4pr li.has-anchor picture.img-multiply-bg{
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
/* RB – blauwe rand om grote productfoto weg (gallery/swiper + fancybox) */
.template-product .l4pr-container,
.template-product .l4pr,
.template-product .l4pr .swiper-outer,
.template-product .l4pr .swiper-slide,
.template-product .l4pr li.has-anchor,
.template-product .l4pr li.has-anchor > a.fancybox-initialized,
.template-product .l4pr li.has-anchor > a.fancybox-initialized picture,
.template-product .l4pr li.has-anchor > a.fancybox-initialized img{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
/* RB BACK BUTTON — fixed / meescrollend */
#rb-back-btn.rb-back-btn{
  position: fixed !important;
  left: 16px !important;
  top: 328px !important;   /* evt aanpassen */
  z-index: 9999 !important;

  display: inline-flex !important;
  align-items: center;
  gap: 10px;

  margin: 0 !important;
  padding: 10px 18px;

  border-radius: 16px; /* ✅ FIX */
  background: linear-gradient(135deg,#FDF8EE,#F7F1E6) !important;
  border: 2px solid #5CA4A1 !important;

  color: #2E7E7A !important;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.6);

  cursor: pointer;
}

#rb-back-btn.rb-back-btn:hover{
  background: linear-gradient(135deg,#5CA4A1,#2E7E7A) !important;
  color:#FDF8EE !important;
}

#rb-back-btn .rb-back-icon{
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:999px;
  background:#5CA4A1;
  color:#FDF8EE;
  font-size:18px;
  line-height:1;
}


@media (max-width: 749px){
  #rb-back-btn.rb-back-btn{ top: 140px !important; }
}
/* Verberg voorraadtekst overal BEHALVE productpagina */
body:not(.template-product) p.stock.overlay-valid{
  display: none !important;
}

/* =========================================================
   RB – BLOG ROLODEX (LUXE • CLEAN)
   ========================================================= */

#rb-rolodex-{{ section.id }}{
  width:100%;
  margin:48px 0 70px;
  position:relative;
}

/* HARD breakout */
#rb-rolodex-{{ section.id }} .rb-breakout{
  position:relative;
  left:50%;
  right:50%;
  width:100vw;
  margin-left:-50vw;
  margin-right:-50vw;
}

/* inner 1568 */
#rb-rolodex-{{ section.id }} .rb-inner{
  max-width:1568px;
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
}

/* theme parents kunnen knijpen */
#shopify-section-{{ section.id }}{ overflow:visible; }

/* crème luxe panel */
#rb-rolodex-{{ section.id }} .rb-rolodex-outer{
  position:relative;
  width:100%;
  margin:0 auto;
  padding:56px 40px;
  border-radius:26px;
  box-sizing:border-box;
  overflow:hidden;

  background:linear-gradient(180deg, rgba(253,248,238,.6) 0%, rgba(253,248,238,.6) 100%);
  border:1px solid rgba(92,164,161,.14);

  box-shadow:
    0 28px 60px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.60);
}

#rb-rolodex-{{ section.id }} .rb-stage{
  position:relative;
  width:100%;
}

/* geen extra frame/paneel */
#rb-rolodex-{{ section.id }} .rb-rolodex-frame,
#rb-rolodex-{{ section.id }} .rb-rolodex-window{
  background:none;
  padding:0;
  border-radius:0;
  box-shadow:none;
}

/* =========================
   PILL — EXACT ORIGINEEL
   ========================= */
#rb-rolodex-{{ section.id }} .rb-rolopillwrap{
  position:absolute;
  top: 50px;                 /* ✅ origineel */
  left:50%;
  transform:translateX(-50%);
  z-index:50;
  max-width:calc(100% - 24px);
  pointer-events:none;

  perspective:none;
  transform-style:flat;
  isolation:isolate;
}

#rb-rolodex-{{ section.id }} .rb-rolopill{
  pointer-events:none;
  padding:12px 44px;         /* ✅ origineel */
  border-radius:999px;

  background:linear-gradient(135deg, rgba(92,164,161,.98), rgba(46,126,122,.98));
  border:3px solid rgba(253,248,238,.88); /* ✅ origineel */

  box-shadow:
    0 12px 30px rgba(0,0,0,.20),
    inset 0 2px 0 rgba(255,255,255,.14),
    inset 0 -3px 0 rgba(0,0,0,.10);       /* ✅ origineel */

  transform:none;
  filter:none;
}

#rb-rolodex-{{ section.id }} .rb-rolopill span{
  display:block;
  font-family:"Frank Ruhl Libre", serif;
  color:#fdf8ee;
  font-weight:900;
  letter-spacing:.10em;      /* ✅ origineel */
  text-transform:uppercase;
  line-height:1;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  text-shadow:
    0 1px 0 rgba(255,255,255,.18),
    0 2px 6px rgba(0,0,0,.25); /* ✅ origineel */
}

/* =========================
   CARDS / ROLodex
   ========================= */
#rb-rolodex-{{ section.id }} .rb-cards{
  position:relative;
  height:590px;
  margin:48px auto 0;
  perspective:1500px;
  width:100%;
}

/* kaart */
#rb-rolodex-{{ section.id }} .rb-card{
  position:absolute;
  top:0;
  left:50%;
  width:450px;
  height:570px;

  border-radius:26px;
  padding:22px;
  box-sizing:border-box;

  display:flex;
  flex-direction:column;

  background:linear-gradient(180deg, rgba(92,164,161,.92) 0%, rgba(72,144,141,.88) 100%);
  border:1px solid rgba(253,248,238,.18);

  transform:
    translateX(calc(-50% + var(--x,0px)))
    rotateY(var(--ry,0deg))
    rotate(var(--rz,0deg))
    translateZ(var(--z,0px))
    scale(var(--s,1));

  transition:transform .45s ease, opacity .25s ease;

  box-shadow:
    0 26px 60px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.25);

  backdrop-filter:saturate(1.06);
}

/* foto */
#rb-rolodex-{{ section.id }} .rb-card-img-wrap{
  width:100%;
  height:285px;
  flex:0 0 285px;
  border-radius:18px;
  overflow:hidden;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 12px 24px rgba(0,0,0,.25);
}
#rb-rolodex-{{ section.id }} .rb-card-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  filter:contrast(1.05) saturate(1.05);
}
#rb-rolodex-{{ section.id }} .rb-img-placeholder{
  display:block;
  width:100%;
  height:100%;
  background:rgba(255,255,255,.25);
}

/* tekst */
#rb-rolodex-{{ section.id }} .rb-card-inner{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding-top:10px;
}
#rb-rolodex-{{ section.id }} .rb-date{
  margin:10px 0 8px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.2;
  color:rgba(253,248,238,.95);
  text-shadow:0 2px 10px rgba(0,0,0,.22);
}
#rb-rolodex-{{ section.id }} .rb-h3{
  margin:0;
  font-size:26px;
  font-weight:900;
  line-height:1.15;
  color:rgba(253,248,238,1);
  text-shadow:0 2px 12px rgba(0,0,0,.25);

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
#rb-rolodex-{{ section.id }} .rb-link{
  margin-top:auto;
  font-weight:800;
  text-decoration:underline;
  color:rgba(253,248,238,1);
  text-shadow:0 2px 12px rgba(0,0,0,.25);
}

/* nav */
#rb-rolodex-{{ section.id }} .rb-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:66px;
  height:66px;
  border-radius:50%;

  background:linear-gradient(180deg, rgba(253,248,238,.95), rgba(253,248,238,.85));
  border:3px solid #5CA4A1;
  color:#2E7E7A;
  font-size:36px;
  font-weight:900;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  z-index:90;

  box-shadow:0 12px 30px rgba(0,0,0,.22);
  transition:transform .18s ease, filter .18s ease;
}
#rb-rolodex-{{ section.id }} .rb-nav:hover{
  transform:translateY(-50%) scale(1.06);
  filter:brightness(1.02);
}
#rb-rolodex-{{ section.id }} .rb-prev{ left:0; }
#rb-rolodex-{{ section.id }} .rb-next{ right:0; }

/* =========================================================
   MOBILE (max 749px) — zelfde look + DRUKWERK-SCHERP
   ========================================================= */
@media (max-width: 749px){

  #rb-rolodex-{{ section.id }}{ margin:28px 0; }
  #rb-rolodex-{{ section.id }} .rb-inner{ padding:0 14px; }

  #rb-rolodex-{{ section.id }} .rb-rolodex-outer{
    padding:56px 16px 14px; /* pill ruimte + cards */
    border-radius:18px;
    background:linear-gradient(180deg, rgba(253,248,238,.95) 0%, rgba(253,248,238,.90) 100%);
  }

  /* pill — exact originele mobile */
  #rb-rolodex-{{ section.id }} .rb-rolopillwrap{
    top:-46px; /* ✅ origineel */
    max-width:calc(100% - 16px);
  }
  #rb-rolodex-{{ section.id }} .rb-rolopill{
    padding:12px 16px; /* ✅ origineel */
    border-width:2px;  /* ✅ origineel */
  }
  #rb-rolodex-{{ section.id }} .rb-rolopill span{
    letter-spacing:.10em; /* ✅ origineel */
  }

  /* cards */
  #rb-rolodex-{{ section.id }} .rb-cards{
    height:440px;
    margin-top:10px;
    transform:translateY(-32px);
  }

  #rb-rolodex-{{ section.id }} .rb-card{
    width:86vw;
    height:460px;
    padding:12px;
    border-radius:22px;

    background:linear-gradient(180deg, rgba(92,164,161,.92) 0%, rgba(72,144,141,.86) 100%);

    /* keep 3D (geen extra scale-factor erbij) */
    transform:
      translateX(calc(-50% + var(--x,0px)))
      rotateY(var(--ry,0deg))
      rotate(var(--rz,0deg))
      translateZ(var(--z,-100px))
      scale(var(--s,1));

    /* drukwerk-scherp killers */
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    transform-style:preserve-3d;
    will-change:transform;
    contain:paint;
    backdrop-filter:none; /* maakt tekst vaak soft op mobiel */
  }

  #rb-rolodex-{{ section.id }} .rb-card-img-wrap{
    height:210px;
    flex:0 0 210px;
    position:relative;
    z-index:1;
    transform:translateZ(0);
  }
  #rb-rolodex-{{ section.id }} .rb-card-img{
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    filter:none; /* filters voelen sneller soft op mobiel */
  }

  #rb-rolodex-{{ section.id }} .rb-card-inner{
    position:relative;
    z-index:5;
    transform:translateZ(1px);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }

  #rb-rolodex-{{ section.id }} .rb-date,
  #rb-rolodex-{{ section.id }} .rb-h3,
  #rb-rolodex-{{ section.id }} .rb-link{
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
    -webkit-text-stroke:0.2px rgba(0,0,0,0.001);
    text-shadow:0 1px 6px rgba(0,0,0,.22);
  }

  #rb-rolodex-{{ section.id }} .rb-date{ font-size:12px; }
  #rb-rolodex-{{ section.id }} .rb-h3{ font-size:20px; line-height:1.2; }

  #rb-rolodex-{{ section.id }} .rb-nav{
    width:42px;
    height:42px;
    font-size:28px;
    top:calc(50% - 32px);
  }
  #rb-rolodex-{{ section.id }} .rb-prev{ left:-6px; }
  #rb-rolodex-{{ section.id }} .rb-next{ right:-6px; }
}
/* =========================================================
   RB ROLODEX — PILL = 100% ORIGINEEL (laatste plakken!)
   ========================================================= */

/* DESKTOP */
#rb-rolodex-{{ section.id }} .rb-rolopillwrap{
  position:absolute !important;
  top:-4px !important;                 /* jouw originele desktop */
  left:50% !important;
  transform:translateX(-50%) !important;
  z-index:50 !important;
  max-width:calc(100% - 24px) !important;
  pointer-events:none !important;

  /* los van 3D context */
  perspective:none !important;
  transform-style:flat !important;
  isolation:isolate !important;
}

#rb-rolodex-{{ section.id }} .rb-rolopill{
  pointer-events:none !important;
  padding:12px 44px !important;         /* ✅ origineel */
  border-radius:999px !important;

  background:linear-gradient(135deg, rgba(92,164,161,.98), rgba(46,126,122,.98)) !important;
  border:3px solid rgba(253,248,238,.88) !important; /* ✅ origineel */

  box-shadow:
    0 12px 30px rgba(0,0,0,.20) !important,
    inset 0 2px 0 rgba(255,255,255,.14) !important,
    inset 0 -3px 0 rgba(0,0,0,.10) !important;       /* ✅ origineel */

  transform:none !important;
  filter:none !important;
}

#rb-rolodex-{{ section.id }} .rb-rolopill span{
  display:block !important;
  font-family:"Frank Ruhl Libre", serif !important;
  color:#fdf8ee !important;
  font-weight:900 !important;
  letter-spacing:.10em !important;      /* ✅ origineel */
  text-transform:uppercase !important;
  line-height:1 !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.18) !important,
    0 2px 6px rgba(0,0,0,.25) !important;            /* ✅ origineel */
}

/* MOBILE (jouw originele waarden) */
@media (max-width: 768px){
  #rb-rolodex-{{ section.id }} .rb-rolopillwrap{
    top:-68px !important;               /* ✅ origineel mobile */
    max-width:calc(100% - 16px) !important;
  }
  #rb-rolodex-{{ section.id }} .rb-rolopill{
    padding:12px 26px !important;       /* ✅ origineel mobile */
    border-width:2px !important;
    border-radius:999px !important;
  }
  #rb-rolodex-{{ section.id }} .rb-rolopill span{
    letter-spacing:.10em !important;    /* ✅ origineel mobile */
  }
}
/* =========================================
   PILL UITGELICHT – optisch gelijk aan OOTD
   ========================================= */
#rb-uitgelicht-{{ section.id }} .rb-uitgelicht__pill{
  min-height: 44px;               /* zelfde massa */
  padding: 14px 56px !important;  /* breder */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

#rb-uitgelicht-{{ section.id }} .rb-uitgelicht__pill span{
  font-size: 24px !important;     /* match OOTD */
  letter-spacing: .14em !important;
}

/* mobiel */
@media (max-width: 989px){
  #rb-uitgelicht-{{ section.id }} .rb-uitgelicht__pill{
    min-height: 36px;
    padding: 10px 32px !important;
  }
  #rb-uitgelicht-{{ section.id }} .rb-uitgelicht__pill span{
    font-size: 15px !important;
    letter-spacing: .10em !important;
  }
}
#rb-uitgelicht-{{ section.id }} .rb-uitgelicht__pill{
  background: red !important;
}
/* =========================================
   RB ROLODEX – PILL groter / gelijk aan rest
   ========================================= */
#rb-rolodex-{{ section.id }} .rb-rolopillwrap{
  top: -52px !important;            /* zelfde “hoogte” als OOTD */
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
}

#rb-rolodex-{{ section.id }} .rb-rolopill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 14px 58px !important;  /* BREED + “massa” */
  min-height: 46px !important;

  border-radius: 999px !important;

  /* als je al gradient/border/shadow hebt in rolodex:
     laat dit staan of zet het hieronder ook OOTD-style */
  background: linear-gradient(135deg, #5CA4A1, #2E7E7A) !important;
  border: 3px solid rgba(253,248,238,.95) !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
}

#rb-rolodex-{{ section.id }} .rb-rolopill span{
  display:block;
  font-weight: 900 !important;
  font-size: 22px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;

  color: rgba(253,248,238,.98) !important;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* mobiel */
@media (max-width: 989px){
  #rb-rolodex-{{ section.id }} .rb-rolopill{
    padding: 10px 32px !important;
    min-height: 36px !important;
  }
  #rb-rolodex-{{ section.id }} .rb-rolopill span{
    font-size: 14px !important;
    letter-spacing: .10em !important;
  }
}
/* =========================================
   RB ROLODEX – pill: 1 regel, altijd zichtbaar
   ========================================= */
#rb-rolodex-{{ section.id }} .rb-rolopill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: max-content !important;   /* groeit mee met tekst */
  max-width: none !important;       /* geen limiet */
  padding: 14px 58px !important;    /* luxe massa */

  white-space: nowrap !important;   /* 1 regel */
}

#rb-rolodex-{{ section.id }} .rb-rolopill span{
  white-space: nowrap !important;   /* 1 regel */
  overflow: visible !important;
  text-overflow: clip !important;

  font-size: 22px !important;
  letter-spacing: .12em !important;
  line-height: 1.1 !important;
}

/* mobiel: iets compacter maar nog steeds 1 regel */
@media (max-width: 989px){
  #rb-rolodex-{{ section.id }} .rb-rolopill{
    padding: 10px 34px !important;
  }
  #rb-rolodex-{{ section.id }} .rb-rolopill span{
    font-size: 14px !important;
    letter-spacing: .10em !important;
  }
}
/* ===== RB ROLODEX FIX: pill niet afknippen ===== */
#rb-rolodex-{{ section.id }} .rb-rolodex-outer{
  overflow: visible !important;   /* pill mag uitsteken */
}

/* kaarten blijven netjes binnen het raam */
#rb-rolodex-{{ section.id }} .rb-rolodex-window{
  overflow: hidden !important;    /* clip alleen de cards */
  border-radius: 0 !important;
}
/* PILL — 1 versie, klaar */
#rb-rolodex-{{ section.id }} .rb-rolopillwrap{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  z-index:50;
  pointer-events:none;
  top:-92px;
}

@media (max-width:749px){
  #rb-rolodex-{{ section.id }} .rb-rolopillwrap{ top:-46px; }
}
/* RB ROLODEX – ruimte boven voor pill */
@media (max-width: 749px){
  #rb-rolodex-{{ section.id }}{
    margin-top: 56px !important; /* ruimte voor pill */
  }
}
/* RB ROLODEX – pill optisch beter geplaatst */
@media (max-width: 749px){
  #rb-rolodex-{{ section.id }} .rb-rolopillwrap{
    top: -52px !important;   /* was -46 / -68 → te hoog */
  }
}
/* RB ROLODEX – mobile: card niet afsnijden */
@media (max-width: 749px){

  /* geef de kaarten-ruimte genoeg hoogte */
  #rb-rolodex-{{ section.id }} .rb-cards{
    height: 500px !important;          /* was 440 */
    transform: translateY(0px) !important; /* was -32, minder agressief */
    margin-top: 0px !important;
  }

  /* of: maak de card iets korter als je liever compact wil */
  #rb-rolodex-{{ section.id }} .rb-card{
    height: 460px !important; /* mag zo blijven, maar match met .rb-cards */
  }

  /* extra bodemruimte in je crème panel (zodat niks “tegen de rand” zit) */
  #rb-rolodex-{{ section.id }} .rb-rolodex-outer{
    padding-bottom: 10px !important;   /* was 14 */
  }
}
/* =========================================================
   RB — BLOG GRID: max 2 naast elkaar + breder (ul.l4ne.landscape.wide)
   ========================================================= */

body.template-blog ul.l4ne.landscape.wide{
  max-width: 1568px !important;
  margin: 0 auto !important;

  list-style: none !important;

  /* luxe wrapper */
  padding: 28px !important;
  background: rgba(253,248,238,.78);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 34px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);

  /* ✅ max 2 naast elkaar */
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

/* Cards breder & rustiger */
body.template-blog ul.l4ne.landscape.wide > li{
  margin: 0 !important;
  width: 100% !important;

  background: rgba(253,248,238,.90);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  overflow: hidden;

  display: flex !important;
  flex-direction: column !important;
}

/* Afbeelding bovenaan */
body.template-blog ul.l4ne.landscape.wide > li > figure{
  margin: 0 !important;
}

body.template-blog ul.l4ne.landscape.wide > li > figure img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
}

/* Tekstblok */
body.template-blog ul.l4ne.landscape.wide > li > h5{
  margin: 0 !important;
  padding: 14px 16px 8px !important;
  font-size: 20px;
  line-height: 1.15;
}

body.template-blog ul.l4ne.landscape.wide > li > h5 .small{
  display: block !important;
  margin-bottom: 8px !important;
  opacity: .75;
  font-size: 13px;
  white-space: normal !important; /* ✅ voorkomt verticale letterkolom */
}

body.template-blog ul.l4ne.landscape.wide > li > h5 a{
  color: inherit;
  text-decoration: none;
}

/* Lees meer */
body.template-blog ul.l4ne.landscape.wide > li > p.link{
  margin: 0 !important;
  padding: 0 16px 16px !important;
}

body.template-blog ul.l4ne.landscape.wide > li > p.link a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  text-decoration: none;
}

/* Mobiel: 1 kolom */
@media (max-width: 749px){
  body.template-blog ul.l4ne.landscape.wide{
    grid-template-columns: 1fr !important;
    padding: 16px !important;
    border-radius: 26px;
  }
}
/* =========================================================
   RB — BLOG CARDS
   ✅ auteur weg
   ✅ datum groter & prominenter
   ========================================================= */

/* Verberg alles in de meta-regel */
body.template-blog ul.l4ne.landscape.wide > li > h5 .small{
  font-size: 0 !important;       /* 🔥 verbergt tekstnodes zoals ", door Jolanda…" */
  line-height: 1 !important;
  opacity: .95;
  margin-bottom: 6px;
}

/* Zet ALLEEN de datum weer aan */
body.template-blog ul.l4ne.landscape.wide > li > h5 .small time{
  font-size: 15px !important;    /* ⬆ groter */
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5CA4A1;                /* Rok&Billie turquoise */
  display: inline-block;
}

/* Titel iets meer ademruimte nu meta compacter is */
body.template-blog ul.l4ne.landscape.wide > li > h5{
  padding-top: 12px !important;
}
/* ===== RB Rolodex Pill (scoped) ===== */
#rb-rolodex-{{ section.id }} .rb-rolodex-frame{
  position: relative;
  padding-top: 78px;            /* ruimte voor pill */
  overflow: visible;            /* niet clippen */
}

#rb-rolodex-{{ section.id }} .rb-rolodex__pillwrap{
  position: absolute;
  top: -60px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: center;
  z-index: 999;                 /* boven cards */
  pointer-events: none;
}

#rb-rolodex-{{ section.id }} .rb-rolodex__pill{
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(92,164,161,.95), rgba(46,126,122,.95));
  border: 2px solid rgba(253,248,238,.92);
  box-shadow: 0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
}

#rb-rolodex-{{ section.id }} .rb-rolodex__pill span{
  color: rgba(253,248,238,.98);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 749px){
  #rb-rolodex-{{ section.id }} .rb-rolodex-frame{
    padding-top: 66px;
  }
  #rb-rolodex-{{ section.id }} .rb-rolodex__pillwrap{
    top: -60px;
    left: 14px;
    right: 14px;
  }
}
/* ===== RB Rolodex Pill — font sizes ===== */

/* Desktop */
#rb-rolodex-{{ section.id }} .rb-rolodex__pill span{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}

/* Mobiel */
@media (max-width: 749px){
  #rb-rolodex-{{ section.id }} .rb-rolodex__pill span{
    font-size: 14px;
    letter-spacing: .10em; /* iets rustiger op mobiel */
  }
}
/* =========================================================
   RB — BLOG TITLE → OOTD PILL (FORCED COMPACT)
   ========================================================= */

body.template-blog h2{
  /* 🔥 breek theme-forcing */
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;

  align-items: center;
  justify-content: center;

  margin: 26px auto 22px !important;
  padding: 10px 16px !important;   /* ⬅️ compact */

  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(92,164,161,.95),
    rgba(46,126,122,.95)
  );
  border: 2px solid rgba(253,248,238,.92);

  box-shadow:
    0 10px 26px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.35);

  color: rgba(253,248,238,.98);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;

  white-space: nowrap;
}

/* Desktop */
@media (min-width: 750px){
  body.template-blog h2{
    font-size: 22px !important;
    padding: 12px 18px !important; /* net iets ruimer */
  }
}

/* Mobiel */
@media (max-width: 749px){
  body.template-blog h2{
    font-size: 14px !important;
    letter-spacing: .10em;
    padding: 8px 14px !important;
  }
}
/* RB BLOG ARTICLE – 1568 wrapper, foto boven, tekst eronder */
.rb-article-wrap{
  width: 100%;
  margin: 36px 0 64px;
}

.rb-article-inner{
  max-width: 1568px;
  margin: 0 auto;
  padding: 32px;
  box-sizing: border-box;

  background: rgba(253,248,238,.88);
  border-radius: 34px;
  border: 1px solid rgba(92,164,161,.18);
  box-shadow: 0 22px 55px rgba(0,0,0,.14);
}

/* afbeelding boven: strak, geen rare randen */
.rb-article-inner figure.lead,
.rb-article-inner figure{
  margin: 0 0 18px;
  border-radius: 22px;
  overflow: hidden;
}

.rb-article-inner img{
  display:block;
  width:100%;
  height:auto;
}

/* titel normaal (GEEN pill) */
.rb-article-inner header,
.rb-article-inner header h1,
.rb-article-inner header h2,
.rb-article-inner header h3{
  text-align: left;
  color: #2E7E7A;
}

/* content: fijne leesstijl */
.rb-article-inner .rte,
.rb-article-inner p,
.rb-article-inner li{
  color: rgba(46,126,122,.92);
  font-size: 18px;
  line-height: 1.9;
}

/* mobiel */
@media (max-width: 900px){
  .rb-article-inner{
    max-width: calc(100% - 26px);
    padding: 18px;
    border-radius: 22px;
  }
}
/* =========================================================
   RB BLOG ARTICLE — 1568 WRAPPER + BREDERE TEKST (HARD)
   ========================================================= */

body.template-article main#content,
body.template-article #MainContent{
  max-width: none !important;
  width: 100% !important;
}

/* 1568 outer wrapper */
body.template-article .rb-article-wrap{
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

/* jouw echte 1568 “shell” */
body.template-article .rb-article-inner{
  width: min(1568px, calc(100% - 56px)) !important; /* 28px + 28px */
  margin: 24px auto 60px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* de blokken (content/excerpt/tags/comments) vullen de 1568 shell */
body.template-article .rb-article-inner .rb-article-bg,
body.template-article .rb-article-inner .rb-article-block{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* ✅ TEKSTBREEDTE: pas dit getal aan */
body.template-article .rb-article-inner :is(.rte, .rte *, .rb-article-bg, .rb-article-bg .rte){
  max-width: 1320px !important;  /* 👈 1200–1360 is mooi */
}

/* Zet de echte tekstcontainer midden (vaak is .rte de limiter) */
body.template-article .rb-article-inner :is(.rte, .rb-article-bg .rte){
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Lijsten/koppen volgen dezelfde breedte */
body.template-article .rb-article-inner :is(p, ul, ol, h1, h2, h3, h4, blockquote){
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* =========================================================
   CART RESET – terug naar normale fullscreen winkelwagen
   (overschrijft RB "card/3D" styling) – alleen op /cart
   ========================================================= */

.template-cart .rb-cart_wrap,
.template-cart .rb-card,
.template-cart .rb-card.rb-card--main,
.template-cart .rb-card.rb-card--side{
  position: relative !important;
  left: auto !important;
  top: auto !important;

  width: 100% !important;
  max-width: 1568px !important;  /* pas aan als jij 1568 lock wil */
  height: auto !important;

  margin: 0 auto !important;

  transform: none !important;
  perspective: none !important;
  opacity: 1 !important;
}

/* vaak zorgt dit voor “afkappen” in kaart-styling */
.template-cart .rb-card{
  overflow: visible !important;
}

/* als de inner ook geforceerde hoogtes/centering had */
.template-cart .rb-card__inner,
.template-cart .rb-card-inner{
  height: auto !important;
  min-height: 0 !important;
}
/* ======================================
   RB Cart toast
   ====================================== */
#rb-cart-toast{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;

  background: rgba(92,164,161,.95); /* RB turquoise */
  color: #FDF8EE;

  padding: 14px 20px;
  border-radius: 999px;

  font-weight: 700;
  letter-spacing: .04em;

  box-shadow: 0 12px 28px rgba(0,0,0,.25);

  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;

  transition: all .35s ease;
}

#rb-cart-toast.is-visible{
  opacity: 1;
  transform: translateY(0);
}
/* =========================================
   RB – WINKELMANDJE CERISE (ICON + COUNT)
   ========================================= */

:root{
  --rb-cerise: #A63C6D;
  --rb-cerise-70: rgba(166, 60, 109, 0.7); /* 👈 70% */
  --rb-creme:  #FDF8EE;
}


/* === CART KNOP (header) === */
#root a[href="/cart"],
#root a[href^="/cart"],
#root a[data-cart-toggle]{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 46px;
  min-height: 46px;
  padding: 10px 12px;

  background: var(--rb-cerise-70);
  border-radius: 16px;

  box-shadow:
    0 12px 24px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.25);

  transition: transform .15s ease, box-shadow .15s ease;
}

#root a[href="/cart"]:hover,
#root a[href^="/cart"]:hover,
#root a[data-cart-toggle]:hover{
  transform: translateY(-1px);
  box-shadow:
    0 16px 30px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* === CART ICON (svg / icon-font) === */
#root a[href="/cart"] svg,
#root a[href^="/cart"] svg,
#root a[data-cart-toggle] svg{
  width: 22px;
  height: 22px;
  fill: var(--rb-creme);
}

/* === CIJFERBOL === */
#root a[href="/cart"] .count,
#root a[href^="/cart"] .count,
#root a[data-cart-toggle] .count,
#root a[href="/cart"] [class*="count"],
#root a[href^="/cart"] [class*="count"]{
  position: absolute !important;
  top: -7px;
  right: -7px;

  min-width: 22px;
  height: 22px;
  padding: 0 6px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  font-weight: 900;
  line-height: 1;

  background: var(--rb-cerise);
  color: var(--rb-creme);

  border: 2px solid var(--rb-creme);
  border-radius: 999px;

  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

/* === MOBIEL: iets groter === */
@media (max-width: 749px){
  #root a[href="/cart"],
  #root a[href^="/cart"],
  #root a[data-cart-toggle]{
    min-width: 52px;
    min-height: 52px;
    padding: 12px 14px;
  }

  #root a[href="/cart"] svg,
  #root a[href^="/cart"] svg{
    width: 24px;
    height: 24px;
  }
}
/* =========================================
   RB – OOTD PILL • ABSOLUUT SMALLER
   ========================================= */

/* Desktop */
.rb-ootd__pill{
  width: 260px;               /* 👈 HIER regel je de breedte */
  max-width: 260px;
  margin: 0 auto 16px;

  padding: 8px 0;             /* hoogte */
  text-align: center;
}

/* Tekst */
.rb-ootd__pill span{
  display: block;
  font-size: 13px;
  letter-spacing: .08em;
  white-space: nowrap;        /* voorkomt breder worden */
}
/* ======================================
   RB – Add to cart overlay (custom)
   Onder header + rondere hoeken
====================================== */

.message-rb-addtocart{
  position: fixed !important;

  /* 👇 onder de header */
  top: calc(var(--rb-header-h, 96px) + 14px) !important;
  right: 16px !important;

  z-index: 99999 !important;

  /* look & feel */
  border-radius: 22px !important;
  padding: 16px 20px !important;

  box-shadow:
    0 18px 46px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.6);

  max-width: 340px;
}

/* tekst */
.message-rb-addtocart p{
  margin: 0;
}
.message-rb-addtocart p.strong{
  font-weight: 800;
}

/* close knop subtieler */
.message-rb-addtocart a.close{
  margin-top: 6px;
  display: inline-block;
  font-size: 0.85rem;
  opacity: .7;
}
.message-rb-addtocart a.close:hover{
  opacity: 1;
}

/* ===== MOBIEL ===== */
@media (max-width: 749px){
  .message-rb-addtocart{
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;

    top: calc(var(--rb-header-h, 84px) + 10px) !important;
    border-radius: 20px !important;
  }
}
/* =========================
   RB – Cart titel
========================= */
.cart-title,
h1.cart__title,
.rb-cart-title{
  text-align: center !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
  margin: 0 auto 28px !important;
}
/* =========================
   RB – Lege winkelwagen
========================= */
.cart-empty,
.cart__empty,
.rb-cart-empty{
  text-align: center !important;
  padding: 40px 32px !important;
  font-size: 1.15rem;
}

.cart-empty p,
.cart__empty p{
  font-size: 1.25rem;
  line-height: 1.5;
  margin-bottom: 24px;
}
/* =========================
   RB – Verder winkelen knop
========================= */
.cart-empty a,
.cart__empty a,
.cart-empty .btn,
.cart__empty .btn{
  display: inline-block !important;
  margin: 0 auto !important;

  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;

  padding: 18px 42px !important;
  border-radius: 999px !important;

  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
@media (max-width: 749px){
  li.cart a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(166, 60, 109, 0.5) !important;
    border-radius: 999px !important;
    padding: 8px 10px !important;
  }
}
/* MOBIEL – CART CERISE 70% • VIERKANTE HOEKEN */
@media (max-width: 980px){
  li.cart a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background-color: rgba(166, 60, 109, 0.5) !important;
    border-radius: 0 !important;   /* ⬅️ vierkant */
    padding: 8px 10px !important;
  }
}
/* RB – Winkelwagen volledig weg op mobiel */
@media (max-width: 749px){
  li.cart,
  .cart,
  a[href="/cart"],
  .icon-cart-basket2{
    display: none !important;
    pointer-events: none !important;
  }
}
@media (max-width: 980px){}

 /* =========================================
   RB – TERUG KNOP
   Desktop AAN • Mobiel UIT
   ========================================= */

/* 🔥 DESKTOP: terugknop zichtbaar & klikbaar */
@media (min-width: 750px){

  #rb-back-btn,
  .rb-back-btn{
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

}

/* 📵 MOBIEL: ALLE terugknoppen weg */
@media (max-width: 749px){

  #rb-back-btn,
  .rb-back-btn,
  a[aria-label*="Terug"],
  a[aria-label*="Back"],
  button[aria-label*="Terug"],
  button[aria-label*="Back"],
  .back-button,
  .btn-back,
  .header__back,
  .header-back{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

}
@media (min-width: 750px){
  #rb-back-btn{
    position: fixed;
    top: calc(var(--rb-header-h, 96px) + 12px);
    left: 12px;
    z-index: 999999 !important;
    pointer-events: auto !important;
  }
}

/* =========================================================
   RB — Mobile header: taal + valuta altijd zichtbaar
   + uitlijnen op account-icoon
   ========================================================= */
@media (max-width: 760px){

  /* Zorg dat user-nav een flex row is */
  #header-inner #nav-user > ul[data-type="user-nav"]{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }

  /* Forceer zichtbaar (themes verstoppen dit vaak op mobile) */
  #header-inner #nav-user li.sub.currency,
  #header-inner #nav-user li.sub.lang{
    display:flex !important;
    align-items:center !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  /* Maak de toggles echte “icon buttons” (zelfde hoogte als account/cart) */
  #header-inner #nav-user li.sub.currency > a.toggle,
  #header-inner #nav-user li.sub.lang > a.toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:32px !important;
    height:32px !important;
    padding:0 !important;
    margin:0 !important;
    line-height:1 !important;
    font-size:0 !important; /* voorkomt “lege” tekstruimte */
  }

  /* TAAL: vlag altijd tonen */
  #header-inner #nav-user li.sub.lang > a.toggle img{
    display:block !important;
    width:18px !important;
    height:auto !important;
  }
  #header-inner #nav-user li.sub.lang > a.toggle span{ display:none !important; }

  /* VALUTA: jouw theme verbergt tekst met .mobile-hide, dus we tekenen zelf een € */
  #header-inner #nav-user li.sub.currency > a.toggle span{ display:none !important; }
  #header-inner #nav-user li.sub.currency > a.toggle::before{
    content:"€" !important;
    font-size:16px !important;
    font-weight:800 !important;
    line-height:1 !important;
    display:block !important;
    color:currentColor !important;
  }

  /* Als je wilt dat ze “iets naar links” schuiven t.o.v. de rest */
  #header-inner #nav-user li.sub.currency,
  #header-inner #nav-user li.sub.lang{
    margin-right:-2px !important;
  }
}


/* =========================================================
   RB — Collectielijst (Swiper): cirkels eerder links starten
   (verwijdert linker padding/offset die Swiper/section vaak geeft)
   ========================================================= */

/* 1) container padding weg */
.rb-collectielijst,
.rb-collectielijst .swiper,
.rb-collectielijst .swiper-container{
  padding-left:0 !important;
}

/* 2) wrapper “start echt links” */
.rb-collectielijst .swiper-wrapper{
  margin-left:0 !important;
}

/* 3) eerste slide geen extra inspringing */
.rb-collectielijst .swiper-slide:first-child{
  margin-left:0 !important;
}
@media (max-width: 760px){

  /* ===== VALUTA: voorkom dubbele weergave ===== */

  /* 1) Verberg ALLE tekst binnen de currency toggle (NL (EUR €), Menu, Toggle, etc.) */
  #header-inner #nav-user li.sub.currency > a.toggle span{
    display:none !important;
  }

  /* 2) Verberg eventuele bestaande icon-font / pseudo content van het theme */
  #header-inner #nav-user li.sub.currency > a.toggle i,
  #header-inner #nav-user li.sub.currency > a.toggle svg{
    display:none !important;
  }
  #header-inner #nav-user li.sub.currency > a.toggle::after{
    content:none !important;
    display:none !important;
  }

  /* 3) Onze ENIGE zichtbare valuta-indicator */
  #header-inner #nav-user li.sub.currency > a.toggle::before{
    content:"€" !important;
    font-size:16px !important;
    font-weight:800 !important;
    line-height:1 !important;
    display:block !important;
    color:currentColor !important;
  }

}
@media (max-width: 760px){
  /* Als er 2 toggles bestaan: toon alleen de eerste */
  #header-inner #nav-user li.sub.currency > a.toggle:nth-of-type(n+2){
    display:none !important;
  }
}
/* =========================================
   RB Collectielijst – FORCE IMG IN CIRKEL
   (werkt in custom.css, zonder Liquid)
   ========================================= */

[id^="rb-collectielijst-"].rb-collectielijst .rb-collectielijst__circle{
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* Als theme rare wrappers gebruikt */
[id^="rb-collectielijst-"].rb-collectielijst .rb-collectielijst__circle picture,
[id^="rb-collectielijst-"].rb-collectielijst .rb-collectielijst__circle .rb-collectielijst__img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* De IMG zelf: altijd vullen & centreren */
[id^="rb-collectielijst-"].rb-collectielijst .rb-collectielijst__circle img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  display: block !important;
}
/* RB – Collectietitel (jouw markup) in hoofdletters */
.rb-collection-title{
  text-transform: uppercase !important;
}
.rb-collection-title{
  text-transform: uppercase !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
}
/* RB: collectie grid altijd LINKS, geen gaten in het midden */
#collection.l4cl{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  justify-content: start !important;   /* links uitlijnen */
  justify-items: start;               /* items niet uitrekken/centreren */
  align-content: start;
  gap: 32px;                          /* pas aan naar smaak */
}

/* Zorg dat kaarten netjes de grid-cel gebruiken */
#collection.l4cl > li.product-card{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Tablet / mobiel */
@media (max-width: 1000px){
  #collection.l4cl{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}
@media (max-width: 560px){
  #collection.l4cl{
    grid-template-columns: 1fr;
  }
}
.rb-1568 {
  max-width: 1568px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
/* RB OOTD1568 — forceer 1568 breed (wrap) + laat panel meerekken */
.rb-ootd1568__wrap{
  width: 100% !important;
  max-width: 1568px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* Panel stond bij jou rond ~1000px: dit haalt elke begrenzer weg */
.rb-ootd1568__panel{
  width: 100% !important;
  max-width: none !important;
}
[id^="rb-ootd1568-template-"] .rb-ootd1568__wrap{
  max-width: 1568px !important;
}
.rb-section-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
/* RB OOTD1568 — pixel-perfect center (zonder scrollbar shift) */
#rb-ootd1568-template--27667479626055__section_collage_JGDbq3{
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Modern: gebruikt viewport zonder scrollbar → geen “bijna” meer */
@supports (width: 100dvw){
  #rb-ootd1568-template--27667479626055__section_collage_JGDbq3{
    width: 100dvw !important;
    margin-left: calc(50% - 50dvw) !important;
    margin-right: calc(50% - 50dvw) !important;
  }
}
.rb-ootd1568__wrap{
  max-width: 1568px !important;
  padding: 0 !important;
}

.rb-ootd1568__panel{
  padding: 0 24px; /* hier hoort hij */
  box-sizing: border-box;
}
/* RB OOTD1568 — HARD LOCK (section-only) */
body #MainContent
#rb-ootd1568-template--27667479626055__section_collage_JGDbq3{
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
body #MainContent
#rb-ootd1568-template--27667479626055__section_collage_JGDbq3
.rb-ootd1568__wrap{
  width: 100% !important;
  max-width: 1568px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}
#rb-ootd1568-template--27667479626055__section_collage_JGDbq3
:is(.page-width, .container, .wrapper, .section){
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* =========================================
   RB – TERUG & VOLGENDE
   Exact zelfde styling
   Zelfde hoogte
   NON-sticky
   ========================================= */

/* Zorg dat we een position-context hebben */
body.template-product #content{
  position: relative !important;
}

/* BASIS: beide knoppen identiek */
body.template-product #rb-back-btn,
body.template-product #rb-next-btn{
  position: absolute !important;
  top: 168px !important;               /* 👈 HOOGTE = TERUG */
  z-index: 80 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 8px 16px !important;
  border-radius: 999px !important;

  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  background: #fdf8ee !important;
  color: #5ca4a1 !important;
  border: 2px solid #5ca4a1 !important;

  box-shadow:
    0 6px 14px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.6) !important;

  cursor: pointer !important;
  white-space: nowrap !important;
}

/* TERUG = links */
body.template-product #rb-back-btn{
  left: 24px !important;
}

/* VOLGENDE = rechts */
body.template-product #rb-next-btn{
  right: 24px !important;
}

/* Hover: exact gelijk */
body.template-product #rb-back-btn:hover,
body.template-product #rb-next-btn:hover{
  background: #5ca4a1 !important;
  color: #fdf8ee !important;
}

/* Mobiel: UIT */
@media (max-width: 749px){
  #rb-back-btn,
  #rb-next-btn{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/* ===== PRIJZEN (PRODUCT + COLLECTIE) ===== */

/* NORMALE PRIJS = TURQ */
.f8pr-price.s1pr{
  color:#5ca4a1 !important;
  font-size:36px !important;
  font-weight:700 !important;
  line-height:1.2;
}

/* OUDE PRIJS = TURQ + KLEIN + STREEP */
.f8pr-price.s1pr .old-price,
.f8pr-price.s1pr del,
.f8pr-price.s1pr s{
  color:#5ca4a1 !important;
  font-size:16px !important;
  font-weight:600 !important;
  text-decoration:line-through !important;
  text-decoration-thickness:2px;
  opacity:.85;
  margin-right:8px;
  display:inline-block;
}

/* SALE PRIJS = ROOD + GROOT (alleen als er een oude prijs is) */
.f8pr-price.s1pr:has(.old-price),
.f8pr-price.s1pr:has(del),
.f8pr-price.s1pr:has(s){
  color:#c62828 !important;
  font-size:28px !important;
  font-weight:800 !important;
}
/* ===== PRIJZEN COLLECTIEKAARTEN ===== */

/* NORMALE PRIJS = TURQ */
#collection li.product-card p.price.s1pr{
  color:#5ca4a1 !important;
  font-size:22px !important;
  font-weight:700 !important;
  line-height:1.2;
}

/* OUDE PRIJS = TURQ + KLEIN + STREEP */
#collection li.product-card p.price.s1pr .old-price,
#collection li.product-card p.price.s1pr del,
#collection li.product-card p.price.s1pr s{
  color:#5ca4a1 !important;
  font-size:16px !important;
  font-weight:600 !important;
  text-decoration:line-through !important;
  text-decoration-thickness:2px;
  opacity:.85;
  margin-right:8px;
  display:inline-block;
}

/* SALE PRIJS = ROOD + GROOT (alleen als er een oude prijs is) */
#collection li.product-card p.price.s1pr:has(.old-price),
#collection li.product-card p.price.s1pr:has(del),
#collection li.product-card p.price.s1pr:has(s){
  color:#c62828 !important;
  font-size:28px !important;
  font-weight:800 !important;
}
.product-card,
.product-item,
.rb-product-wrap {
  position: relative;
}
/* ===== SALE BADGE IN HET CRÈME VLAK (NIET BIJ VENDOR) ===== */

/* 1) De productkaart moet een anker hebben */
#collection li.product-card{
  position: relative !important;
  overflow: visible !important;
}

/* 2) Dit is het crèmekleurige vlak (kaart-body) -> maak dit het anker
   (deze selector werkt in jouw theme omdat je al .product-card > div gebruikte) */
#collection li.product-card > div{
  position: relative !important;
  overflow: visible !important;
}

/* 3) Haal de label container uit alle rare posities */
#collection li.product-card .s1lb.label.plain{
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 30 !important;
}

/* 4) Plaats de badge IN het crème vlak */
#collection li.product-card > div .overlay-sale{
  position: absolute !important;
  top: 60px !important;     /* 👈 binnen crème vlak */
  left: 10px !important;    /* 👈 binnen crème vlak */
  transform: none !important;
  z-index: 40 !important;

  background: #e74c3c !important;
  color: #fff !important;
  padding: 6px 12px !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

/* 5) Op mobiel iets kleiner */
@media (max-width: 749px){
  #collection li.product-card > div .overlay-sale{
    top: 8px !important;
    left: 8px !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
  }
}
/* ===== SALE BADGE: VERDER NAAR BENEDEN (COLLECTIE) ===== */
body #collection li.product-card .overlay-sale{
  top: 85px !important;   /* 👈 hoger = verder naar beneden */
  left: -90px !important;
  bottom: auto !important;
  right: auto !important;
  transform: none !important;
}
#rb-back-btn.rb-back-btn{
  position: fixed !important;
  top: calc(var(--rb-header-h, 96px) + 12px) !important;
  left: 12px !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}
#rb-back-btn{
  top: calc(var(--rb-header-h, 96px) + 24px);
}
/* RB – Terug knop lager (hard override) */
@media (min-width: 750px){
  body #content #rb-back-btn.rb-back-btn{
    position: relative !important;  /* zorgt dat top werkt */
    top: 30px !important;           /* ↑ hoger getal = lager */
    margin-top: 0 !important;
  }
}
/* WebwinkelKeur sidebar verbergen op mobiel */
@media (max-width: 749px){
  #wwkSidebarTop,
  .wwk-sidebar--top-wrapper,
  a.wwk-sidebar--top{
    display: none !important;
  }
}
/* === WINKELWAGEN HERSTELLEN OP MOBIEL === */
@media (max-width: 989px){

  /* cart LI altijd tonen */
  li.cart{
    display: flex !important;
  }

  /* cart link / button */
  li.cart a,
  li.cart button{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* badge / teller */
  .cart-count-bubble,
  .cart-count{
    display: inline-flex !important;
  }
}
/* === MOBIEL: winkelwagen-icoon terug (fallback) === */
@media (max-width: 989px){

  /* Zorg dat cart element echt zichtbaar is */
  #nav-user li.cart,
  #nav-user li.cart a{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Maak het een nette klikbare knop */
  #nav-user li.cart a{
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: transparent !important; /* haalt dat paarse vlak meestal weg */
  }

  /* Fallback icoon als theme-icoon ontbreekt/verborgen is */
  #nav-user li.cart a::before{
    content: "🛒" !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: currentColor !important;
  }


  /* Teller/badge zichtbaar houden */
  #nav-user li.cart .cart-count,
  #nav-user li.cart .cart-count-bubble{
    display: inline-flex !important;
  }
}
/* === CART + COUNT correct zichtbaar (mobiel & desktop veilig) === */
a[href="/cart"][data-panel="cart"]{
  position: relative;
}

a[href="/cart"][data-panel="cart"] i.icon-cart-basket2{
  display: inline-block;
  position: relative;
}

a[href="/cart"][data-panel="cart"] #cart-count{
  position: absolute;
  top: -6px;
  right: -8px;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: #e53935;
  color: #fff;

  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* verberg badge als leeg */
a[href="/cart"][data-panel="cart"] #cart-count:empty{
  display: none;
}
/* Cart count badge */
a[data-panel="cart"]{
  position: relative;
}

.rb-cart-count{
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* MENU FIX: meerdere 'Alle categorieën' toggles blokkeren */
#nav a.toggle-back{
  pointer-events: none !important;
  display: none !important;
}

/* Alleen de echte (laatste) toggle actief laten */
#nav a.toggle:not(.toggle-back){
  display: block !important;
  pointer-events: auto !important;
}
/* RB – verdwaalde cart teller opruimen */
.rb-cart-count{
  display: none !important;
}
#nav-user #cart-count{
  position:absolute;
  top:-6px;
  right:-8px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  line-height:1;
}
/* RB – Cart knop op desktop hetzelfde uiterlijk als mobiel */
@media (min-width: 990px){

  /* klikgebied */
  a[data-panel="cart"][aria-label="Winkelwagen"]{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }

  /* het icoon als ronde knop (achtergrond + schaduw) */
  a[data-panel="cart"] i.icon-cart-basket2{
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;

    background: #B45576 !important;     /* magenta knop */
    color: #fff !important;             /* wit icoon */
    box-shadow: 0 10px 18px rgba(0,0,0,.18) !important;

    line-height: 1 !important;
    font-size: 20px !important;         /* grootte van het tas-icoon */
  }

  /* sommige icon-fonts tekenen via ::before */
  a[data-panel="cart"] i.icon-cart-basket2::before{
    color: #fff !important;
  }

  /* badge (het bolletje met aantal) */
  a[data-panel="cart"] #cart-count{
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;

    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;

    background: #fff !important;
    color: #B45576 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  /* “Winkelwagen” tekst verbergen als die op desktop ooit zichtbaar wordt */
  a[data-panel="cart"] > span.hidden{
    display: none !important;
  }
}
select option:disabled {
  color: #5ca4a1;   /* Rok & Billie turquoise */
  opacity: .55;     /* optisch kleiner / rustiger */
  font-weight: 500; /* minder lomp */
}
/* Variant dropdown kader */
select[name="variant-id"] {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #5ca4a1;
  border-radius: 8px;
  background-color: #fffaf0; /* jouw crème */
  color: #5ca4a1;
  font-weight: 700;
  font-size: 16px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #5ca4a1 50%),
    linear-gradient(135deg, #5ca4a1 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
/* ===== FIX: SCHOENEN link niet wit maken én altijd zichtbaar ===== */
a[href="/collections/schoenen-1"]{
  background: transparent !important;
  color: inherit !important;            /* <-- NIET forceren naar crème */
}

/* Hover/focus: géén witte balk, maar subtiele highlight */
a[href="/collections/schoenen-1"]:hover,
a[href="/collections/schoenen-1"]:focus{
  background: rgba(92,164,161,.12) !important; /* subtiele turq tint */
  color: inherit !important;
}

/* Icoon: niet "verdwijnen" door blend/filter regels */
a[href="/collections/schoenen-1"] img.img-multiply-bg{
  filter: none !important;
  mix-blend-mode: normal !important;   /* <-- multiply kan op licht vlak wegvallen */
}
/* =========================================
   MOBIEL – vlagpositie VAST (logo mag groeien)
   ========================================= */
@media (max-width: 760px){

  /* header als referentie */
  #header-inner{
    position: relative !important;
  }

  /* vlag: vaste plek, NIET afhankelijk van logo */
  #nav-user a.rb-locale-toggle{
    position: absolute !important;
    left: 64px !important;
    top: 28px !important;        /* 👈 VASTE PX */
    transform: none !important;
    z-index: 60 !important;
  }

  /* logo mag groeien zonder effect */
  #logo{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* RB – menu tekst mag NIET wit worden bij hover (ul-hover theme) */
#nav.ul-hover a{
  color:#5ca4a1 !important;
}

/* hover/focus/active blijven turq */
#nav.ul-hover a:hover,
#nav.ul-hover a:focus,
#nav.ul-hover a:active{
  color:#5ca4a1 !important;
}

/* veel themes zetten de kleur op li:hover > a */
#nav.ul-hover li:hover > a,
#nav.ul-hover li:focus-within > a{
  color:#5ca4a1 !important;
}
/* ===============================
   RB NAV – KLEUREN SCHEIDEN
   =============================== */

/* 1️⃣ HOOFDMENU (bovenste rij) → TURQ */
#nav.ul-hover > ul[data-type="main-nav"] > li > a{
  color:#5ca4a1 !important;
}

#nav.ul-hover > ul[data-type="main-nav"] > li:hover > a,
#nav.ul-hover > ul[data-type="main-nav"] > li:focus-within > a{
  color:#5ca4a1 !important;
}

/* 2️⃣ DROPDOWN ITEMS → CRÈME */
#nav.ul-hover ul ul a{
  color:#fdf8ee !important;
}

#nav.ul-hover ul ul a:hover,
#nav.ul-hover ul ul a:focus{
  color:#fdf8ee !important;
}
#nav-user li.cart a {
  position: relative;
}

#nav-user li.cart a .rb-cart-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  background: #c62828;
  color: #fff;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
}
a[data-panel="cart"] #cart-count{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:18px !important;
  height:18px !important;
  padding:0 6px !important;
  border-radius:999px !important;
  font-weight:800 !important;
  line-height:1 !important;
}
.rb-cart-count{ display:none !important; }