/* Sellabees Shops Core — component-styling (huisstijl-onafhankelijk).
   Kleuren/typografie komen uit het child-thema via CSS-variabelen met fallbacks. */

/* --- SALE-badge --- */
.onsale,
span.onsale {
	background: var(--sellabees-accent, #d6336c);
	color: #fff;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .72rem;
	padding: .25em .6em;
	border-radius: 3px;
	line-height: 1;
}

/* --- Live winkelwagenteller (header) --- */
.sellabees-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.2em;
	height: 1.2em;
	padding: 0 .35em;
	border-radius: 999px;
	background: var(--sellabees-accent, #d6336c);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	line-height: 1;
}
.sellabees-cart-count.is-empty { display: none; }

/* --- Maat-swatches in de productloop --- */
.sellabees-loop-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: center;
	margin-top: 6px;
}
.sellabees-size {
	border: 2px solid var(--sellabees-size-border, #e6dfce);
	background: var(--sellabees-size-bg, #ece5d3);
	color: #1a1a1a;
	padding: 4px 9px;
	border-radius: 5px;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1;
}
.sellabees-size.is-unavailable {
	border-color: #d33;
	text-decoration: line-through;
	opacity: .55;
}
/* Klikbare maat (variabel product): klik = die maat voorselecteren op de productpagina. */
.sellabees-size[data-url] { cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.sellabees-size[data-url]:hover,
.sellabees-size[data-url]:focus-visible {
	border-color: var(--sellabees-accent, #dfbe69);
	background: #fff;
	outline: none;
}

/* --- Cart-toast (winkelwagen-melding) --- */
.sellabees-toast {
	position: fixed;
	z-index: 99999;
	max-width: min(360px, calc(100vw - 32px));
	background: var(--sellabees-toast-bg, #1a1a1a);
	color: var(--sellabees-toast-color, #fff);
	font-size: .95rem;
	line-height: 1.35;
	padding: 14px 18px;
	border-radius: 8px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease;
}
.sellabees-toast.is-visible { opacity: 1; transform: translateY(0); }
.sellabees-toast--bottom-right  { right: 16px; bottom: 16px; }
.sellabees-toast--bottom-center { left: 50%; bottom: 16px; transform: translate(-50%, 8px); }
.sellabees-toast--bottom-center.is-visible { transform: translate(-50%, 0); }
.sellabees-toast--top-right     { right: 16px; top: 16px; }
.sellabees-toast--top-center    { left: 50%; top: 16px; transform: translate(-50%, 8px); }
.sellabees-toast--top-center.is-visible { transform: translate(-50%, 0); }
/* Optioneel icoon links van de tekst (Site-instellingen → Winkelwagen-melding). */
.sellabees-toast--has-icon { display: flex; align-items: center; gap: 12px; }
.sellabees-toast__icon {
	flex: 0 0 auto;
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--sellabees-accent, #dfbe69);
	color: #fff;
}
.sellabees-toast__icon img { width: 22px; height: 22px; object-fit: contain; display: block; }
.sellabees-toast__text { flex: 1 1 auto; }

/* --- Handmatige review-kaarten ([sellabees_reviews_cards]) --- */
.sellabees-reviews-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.sellabees-review-card { border: 1px solid #e6e0d4; border-radius: 8px; padding: 20px 22px; background: #fff; }
.sellabees-review-card__stars { color: var(--sellabees-accent, #dfbe69); display: inline-flex; gap: 2px; margin-bottom: 8px; }
.sellabees-review-card__text { margin: 0 0 12px; line-height: 1.6; }
.sellabees-review-card__meta { margin: 0; font-size: .9rem; color: #777; }

/* ============================================================
   Preloader / laadscherm — geport uit de generieke Sellabees-core.
   Kleuren via --sellabees-preloader-* (inline, Site-instellingen → Laadscherm),
   met terugval op --sellabees-red / --sellabees-yellow (child-tokens).
   ============================================================ */
/* =========================================================
   PRELOADER / LAADSCHERM
   ========================================================= */
.sellabees-preloader {
	--pl-bg: var(--sellabees-preloader-bg, #ffffff);
	--pl-accent: var(--sellabees-preloader-accent, var(--sellabees-red, #dd2532));
	--pl-gold: var(--sellabees-preloader-accent2, var(--sellabees-yellow, #f8c100));
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pl-bg);
	opacity: 1;
	visibility: visible;
	transition: opacity .6s ease, visibility 0s linear .6s;
}
.sellabees-preloader.is-hidden {
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility 0s linear .6s;
}
/* geen scroll terwijl het laadscherm zichtbaar is */
html.sellabees-loading { overflow: hidden; }
.sellabees-preloader__inner { display: flex; align-items: center; justify-content: center; }

/* ---- Stijl: draaiende ring ---- */
.sellabees-preloader__ring {
	width: 52px; height: 52px;
	border: 4px solid color-mix(in srgb, var(--pl-accent) 22%, transparent);
	border-top-color: var(--pl-accent);
	border-radius: 50%;
	animation: sellabees-pl-spin .8s linear infinite;
}
@keyframes sellabees-pl-spin { to { transform: rotate(360deg); } }

/* ---- Stijl: stuiterende stippen ---- */
.sellabees-preloader__dots { display: flex; gap: 12px; }
.sellabees-preloader__dots span {
	width: 14px; height: 14px;
	border-radius: 50%;
	background: var(--pl-accent);
	animation: sellabees-pl-bounce 1.2s ease-in-out infinite;
}
.sellabees-preloader__dots span:nth-child(2) { animation-delay: .15s; }
.sellabees-preloader__dots span:nth-child(3) { animation-delay: .3s; }
@keyframes sellabees-pl-bounce {
	0%, 80%, 100% { transform: translateY(0); opacity: .5; }
	40% { transform: translateY(-16px); opacity: 1; }
}

/* ---- Stijl: voortgangsbalk ---- */
.sellabees-preloader__bar {
	position: relative;
	width: 220px; height: 4px;
	background: color-mix(in srgb, var(--pl-accent) 18%, transparent);
	border-radius: 4px;
	overflow: hidden;
}
.sellabees-preloader__bar span {
	position: absolute;
	left: -40%;
	width: 40%; height: 100%;
	background: var(--pl-accent);
	border-radius: 4px;
	animation: sellabees-pl-slide 1.1s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes sellabees-pl-slide {
	0% { left: -40%; }
	100% { left: 100%; }
}

/* ---- Stijl: pulserende cirkel ---- */
.sellabees-preloader__pulse {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--pl-accent);
	animation: sellabees-pl-pulse 1.3s ease-in-out infinite;
}
@keyframes sellabees-pl-pulse {
	0% { transform: scale(.6); opacity: .35; }
	50% { transform: scale(1); opacity: 1; }
	100% { transform: scale(.6); opacity: .35; }
}

/* ---- Stijl: pulserend logo ---- */
.sellabees-preloader__logo {
	max-width: 200px; height: auto; display: block;
	animation: sellabees-pl-logo 1.4s ease-in-out infinite;
}
@keyframes sellabees-pl-logo {
	0%, 100% { opacity: .45; transform: scale(.96); }
	50% { opacity: 1; transform: scale(1); }
}

/* Bewegingsreductie: animaties uit, maar laadscherm fadet nog wel netjes weg */
@media (prefers-reduced-motion: reduce) {
	.sellabees-preloader__ring,
	.sellabees-preloader__dots span,
	.sellabees-preloader__bar span,
	.sellabees-preloader__pulse,
	.sellabees-preloader__logo { animation: none; }
}

/* =========================================================
   UNIEKE LAADSCHERMEN (ontworpen + adversarieel gereviewd)
   ========================================================= */
.sellabees-preloader--nested-squares .sb-ns{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.6rem;
}
.sellabees-preloader--nested-squares .sb-ns__stack{
  position:relative;width:128px;height:128px;
}
.sellabees-preloader--nested-squares .sb-ns__sq{
  position:absolute;top:50%;left:50%;
  border-style:solid;border-width:2px;
  /* base == keyframe 0% so there is no first-paint snap */
  transform:translate(-50%,-50%) scale(.72) rotate(0deg);
  opacity:.25;
  will-change:transform,opacity;
  animation:sb-ns-breathe 4.8s cubic-bezier(.45,0,.25,1) infinite;
}
/* nested rounded squares — maze/spiral feel, alternating green & gold.
   Negative delays keep the cascade phase but start every ring in steady
   state, so there is no startup pop on the inner rings. */
.sellabees-preloader--nested-squares .sb-ns__sq--1{
  width:128px;height:128px;border-radius:34px;
  border-color:var(--pl-accent);animation-delay:0s;
}
.sellabees-preloader--nested-squares .sb-ns__sq--2{
  width:100px;height:100px;border-radius:27px;
  border-color:var(--pl-gold);animation-delay:-.34s;animation-direction:reverse;
}
.sellabees-preloader--nested-squares .sb-ns__sq--3{
  width:72px;height:72px;border-radius:20px;
  border-color:var(--pl-accent);animation-delay:-.68s;
}
.sellabees-preloader--nested-squares .sb-ns__sq--4{
  width:46px;height:46px;border-radius:13px;
  border-color:var(--pl-gold);animation-delay:-1.02s;animation-direction:reverse;
}
.sellabees-preloader--nested-squares .sb-ns__sq--5{
  width:22px;height:22px;border-radius:7px;
  border-color:var(--pl-accent);animation-delay:-1.36s;
}
.sellabees-preloader--nested-squares .sb-ns__dot{
  position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:2px;
  background:var(--pl-gold);transform:translate(-50%,-50%) scale(.6);opacity:.5;
  will-change:transform,opacity;
  animation:sb-ns-core 4.8s ease-in-out infinite;
}
.sellabees-preloader--nested-squares .sb-ns__word{
  font-family:"Cormorant Unicase","Cormorant",serif;
  font-size:2rem;line-height:1;letter-spacing:.42em;
  text-indent:.42em;font-weight:600;color:var(--pl-accent);
  opacity:.45;transform:translateY(2px);
  will-change:transform,opacity;
  animation:sb-ns-word 4.8s ease-in-out infinite;
}
.sellabees-preloader--nested-squares .sb-ns__sub{
  font-family:"Montserrat",sans-serif;
  font-size:.5rem;line-height:1;letter-spacing:.34em;
  text-indent:.34em;font-weight:500;text-transform:uppercase;
  /* color rule: only var(--pl-accent)/var(--pl-gold)/var(--pl-bg) allowed.
     Hierarchy via opacity, not a hardcoded grey. */
  color:var(--pl-accent);opacity:.55;
  will-change:opacity;
  animation:sb-ns-sub 4.8s ease-in-out infinite;animation-delay:-.2s;
}

/* each ring breathes: scales in/out while rotating; reverse-direction rings
   counter-rotate via animation-direction for the hypnotic interlock.
   Net 180deg rotation per cycle is invisible at the seam thanks to the
   90deg rotational symmetry of a rounded square -> seamless loop. */
@keyframes sb-ns-breathe{
  0%   {transform:translate(-50%,-50%) scale(.72) rotate(0deg);  opacity:.25;}
  50%  {transform:translate(-50%,-50%) scale(1)   rotate(90deg); opacity:1;}
  100% {transform:translate(-50%,-50%) scale(.72) rotate(180deg);opacity:.25;}
}
@keyframes sb-ns-core{
  0%,100%{transform:translate(-50%,-50%) scale(.6); opacity:.5;}
  50%    {transform:translate(-50%,-50%) scale(1.6);opacity:1;}
}
@keyframes sb-ns-word{
  0%,100%{opacity:.45;transform:translateY(2px);}
  50%    {opacity:1;  transform:translateY(0);}
}
@keyframes sb-ns-sub{
  0%,100%{opacity:.4;}
  50%    {opacity:.7;}
}

@media (prefers-reduced-motion: reduce){
  .sellabees-preloader--nested-squares .sb-ns__sq,
  .sellabees-preloader--nested-squares .sb-ns__dot,
  .sellabees-preloader--nested-squares .sb-ns__word,
  .sellabees-preloader--nested-squares .sb-ns__sub{
    animation:none;opacity:1;
  }
  .sellabees-preloader--nested-squares .sb-ns__sq{
    transform:translate(-50%,-50%) scale(1) rotate(0deg);
  }
  .sellabees-preloader--nested-squares .sb-ns__dot{
    transform:translate(-50%,-50%) scale(1);
  }
  .sellabees-preloader--nested-squares .sb-ns__word{
    transform:translateY(0);
  }
  .sellabees-preloader--nested-squares .sb-ns__sub{
    opacity:.7;
  }
}

.sellabees-preloader--maze-draw .mz{
  display:flex;flex-direction:column;align-items:center;gap:22px;
}
.sellabees-preloader--maze-draw .mz__svg{
  width:118px;height:118px;display:block;overflow:visible;
}

/* gemeenschappelijke baan-stijl — alle vormen zijn <path> met pathLength=1,
   dus stroke-dasharray:1 + dashoffset 1->0 tekent de vorm betrouwbaar. */
.sellabees-preloader--maze-draw .mz__p{
  stroke:var(--pl-accent);
  stroke-width:2.4;
  stroke-dasharray:1;
  stroke-dashoffset:1;            /* startverborgen */
  animation:mz-draw 3.4s cubic-bezier(.65,0,.35,1) infinite;
}
/* gestaffelde start -> doolhof bouwt zich van buiten naar binnen op */
.sellabees-preloader--maze-draw .mz__p--1{ animation-delay:0s; }
.sellabees-preloader--maze-draw .mz__p--2{ animation-delay:.16s; }
.sellabees-preloader--maze-draw .mz__p--3{ animation-delay:.32s; }

/* gouden spiraal-hart (tekent ná de vierkanten) */
.sellabees-preloader--maze-draw .mz__g{
  stroke:var(--pl-gold);
  stroke-width:2.6;
  animation-delay:.5s;
}

/* centraal punt = einde van de spiraal */
.sellabees-preloader--maze-draw .mz__dot{
  fill:var(--pl-gold);
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(0);
  animation:mz-dot 3.4s ease-in-out .5s infinite;
}

/* heel het patroon ademt zacht na het tekenen */
.sellabees-preloader--maze-draw .mz__svg g{
  transform-box:view-box;
  transform-origin:60px 60px;
  animation:mz-breathe 3.4s ease-in-out infinite;
}

@keyframes mz-draw{
  0%   { stroke-dashoffset:1; opacity:0; }
  8%   { opacity:1; }
  42%  { stroke-dashoffset:0; opacity:1; }   /* getekend */
  80%  { stroke-dashoffset:0; opacity:1; }   /* rustig zichtbaar */
  96%  { stroke-dashoffset:-1; opacity:1; }  /* weggeveegd in dezelfde richting */
  100% { stroke-dashoffset:-1; opacity:0; }
}

@keyframes mz-dot{
  0%,30%   { transform:scale(0);   opacity:0; }
  42%      { transform:scale(1.7); opacity:1; }
  48%,80%  { transform:scale(1);   opacity:1; }
  96%,100% { transform:scale(0);   opacity:0; }
}

@keyframes mz-breathe{
  0%,46%   { transform:scale(1); }
  64%      { transform:scale(1.05); }
  82%,100% { transform:scale(1); }
}

/* wordmark */
.sellabees-preloader--maze-draw .mz__word{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  opacity:0;
  animation:mz-word 3.4s ease-in-out infinite;
}
.sellabees-preloader--maze-draw .mz__brand{
  font-family:"Cormorant Unicase","Cormorant",serif;
  font-weight:600;
  font-size:30px;
  line-height:1;
  letter-spacing:.18em;
  text-indent:.18em;
  color:var(--pl-accent);
}
.sellabees-preloader--maze-draw .mz__tag{
  font-family:"Montserrat",sans-serif;
  font-weight:500;
  font-size:8px;
  letter-spacing:.34em;
  text-indent:.34em;
  color:color-mix(in srgb, var(--pl-accent) 62%, var(--pl-bg));
}

@keyframes mz-word{
  0%,34%   { opacity:0; transform:translateY(6px); }
  52%,82%  { opacity:1; transform:translateY(0); }
  98%,100% { opacity:0; transform:translateY(6px); }
}

@media (prefers-reduced-motion: reduce){
  .sellabees-preloader--maze-draw .mz__p,
  .sellabees-preloader--maze-draw .mz__dot,
  .sellabees-preloader--maze-draw .mz__svg g,
  .sellabees-preloader--maze-draw .mz__word{
    animation:none;
  }
  .sellabees-preloader--maze-draw .mz__p{ stroke-dashoffset:0; opacity:1; }
  .sellabees-preloader--maze-draw .mz__dot{ transform:scale(1); opacity:1; }
  .sellabees-preloader--maze-draw .mz__svg g{ transform:none; }
  .sellabees-preloader--maze-draw .mz__word{ opacity:1; transform:none; }
}

/* ---- wordmark-sheen ---- */
.sellabees-preloader--wordmark-sheen .sb-ws{
  display:flex;flex-direction:column;align-items:center;gap:.55em;
  font-family:"Cormorant Unicase","Cormorant",Georgia,serif;
  --gold:var(--pl-gold);
  color:var(--pl-accent);
}
/* WORDMARK */
.sellabees-preloader--wordmark-sheen .sb-ws__mark{
  position:relative;
  font-size:clamp(3.4rem,13vw,7rem);
  line-height:.9;letter-spacing:.14em;
  padding:0 .14em;
}
.sellabees-preloader--wordmark-sheen .sb-ws__word,
.sellabees-preloader--wordmark-sheen .sb-ws__shine{
  display:block;font-weight:600;
}
/* base tint: muted gold so the wordmark stays legible at all times,
   fading toward the accent at the foot for depth (in-palette only) */
.sellabees-preloader--wordmark-sheen .sb-ws__word{
  background-image:linear-gradient(180deg,
    color-mix(in srgb, var(--pl-gold) 72%, transparent) 0%,
    color-mix(in srgb, var(--pl-gold) 42%, transparent) 60%,
    var(--pl-accent) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* the gold sheen layer, masked to the glyphs, swept by background-position */
.sellabees-preloader--wordmark-sheen .sb-ws__shine{
  position:absolute;inset:0;
  background-image:linear-gradient(100deg,
     transparent 0%,transparent 38%,
     color-mix(in srgb, var(--pl-gold) 35%, transparent) 46%,
     var(--gold) 50%,
     color-mix(in srgb, var(--pl-gold) 35%, #fff) 52%,
     var(--gold) 54%,
     color-mix(in srgb, var(--pl-gold) 35%, transparent) 62%,
     transparent 70%,transparent 100%);
  background-size:260% 100%;
  background-repeat:no-repeat;
  background-position:160% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:sb-ws-sweep 3.4s cubic-bezier(.66,0,.34,1) infinite;
  will-change:background-position;
}
@keyframes sb-ws-sweep{
  0%{background-position:160% 0}
  55%{background-position:-60% 0}
  100%{background-position:-60% 0}
}
/* ART-DECO RULE (nested-square logo motif) */
.sellabees-preloader--wordmark-sheen .sb-ws__rule{
  width:clamp(150px,38vw,260px);height:12px;color:var(--gold);
}
.sellabees-preloader--wordmark-sheen .sb-ws__rule svg{display:block;width:100%;height:100%;overflow:visible}
.sellabees-preloader--wordmark-sheen .sb-ws__rule path{opacity:.55}
.sellabees-preloader--wordmark-sheen .sb-ws__d{
  transform-box:fill-box;transform-origin:center;
  animation:sb-ws-pulse 3.4s ease-in-out infinite;
}
.sellabees-preloader--wordmark-sheen .sb-ws__d2{animation-delay:.18s;opacity:.85}
.sellabees-preloader--wordmark-sheen .sb-ws__d3{animation-delay:.36s}
@keyframes sb-ws-pulse{
  0%,100%{transform:rotate(45deg) scale(.86);opacity:.45}
  50%{transform:rotate(45deg) scale(1);opacity:1}
}
/* TAGLINE */
.sellabees-preloader--wordmark-sheen .sb-ws__tag{
  font-family:"Montserrat",system-ui,sans-serif;
  font-size:clamp(.6rem,1.7vw,.78rem);
  font-weight:500;letter-spacing:.42em;text-indent:.42em;
  color:var(--gold);opacity:0;
  animation:sb-ws-tag 3.4s ease-in-out infinite;
}
@keyframes sb-ws-tag{
  0%,100%{opacity:.4}
  50%{opacity:.85}
}
@media (prefers-reduced-motion:reduce){
  .sellabees-preloader--wordmark-sheen .sb-ws__shine{
    animation:none;background-position:48% 0;
  }
  .sellabees-preloader--wordmark-sheen .sb-ws__d,
  .sellabees-preloader--wordmark-sheen .sb-ws__tag{
    animation:none;opacity:1;
  }
  .sellabees-preloader--wordmark-sheen .sb-ws__d{transform:rotate(45deg) scale(.95)}
  .sellabees-preloader--wordmark-sheen .sb-ws__tag{opacity:.8}
}
/* ---- stitch ---- */
.sellabees-preloader--stitch .sellabees-preloader__stitch-wrap{
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.sellabees-preloader--stitch .sb-stitch-svg{
  display:block;overflow:visible;
}

/* ---- geweven goudraad: subtiel in/uit ---- */
.sellabees-preloader--stitch .sb-weave-line{
  fill:none;stroke:var(--pl-gold);stroke-width:1;opacity:.18;
  stroke-dasharray:4 6;
  animation:sb-weave-shift 3.6s linear infinite;
}
.sellabees-preloader--stitch .sb-weave-line--v{
  animation-direction:reverse;
}
@keyframes sb-weave-shift{
  to{ stroke-dashoffset:-20; }
}

/* ---- gestikte vierkanten ---- */
.sellabees-preloader--stitch .sb-stitch{
  fill:none;
  stroke:var(--pl-accent);
  stroke-width:2.4;
  stroke-linecap:round;
  /* dash = stiksel-look; offset wordt voortgeschreven */
  stroke-dasharray:7 6;
}
.sellabees-preloader--stitch .sb-stitch--1{
  animation:sb-sew 3.6s cubic-bezier(.65,0,.35,1) infinite;
}
.sellabees-preloader--stitch .sb-stitch--2{
  animation:sb-sew 3.6s cubic-bezier(.65,0,.35,1) infinite;
  animation-delay:.18s;
}
.sellabees-preloader--stitch .sb-stitch--3{
  animation:sb-sew 3.6s cubic-bezier(.65,0,.35,1) infinite;
  animation-delay:.36s;
}
/* de draad "naait" voort: dashoffset schuift, omtrek vult met korte adempauze */
@keyframes sb-sew{
  0%   { stroke-dashoffset:130; opacity:0; }
  12%  { opacity:1; }
  62%  { stroke-dashoffset:0;   opacity:1; }
  84%  { stroke-dashoffset:0;   opacity:1; }
  100% { stroke-dashoffset:-130;opacity:0; }
}

/* ---- naald met draadknoop die de buitenste lijn volgt ---- */
.sellabees-preloader--stitch .sb-needle{
  transform-box:view-box;
  transform-origin:0 0;
  animation:sb-needle-path 3.6s cubic-bezier(.65,0,.35,1) infinite;
}
.sellabees-preloader--stitch .sb-needle-body{
  stroke:var(--pl-gold);stroke-width:1.4;stroke-linecap:round;
}
.sellabees-preloader--stitch .sb-needle-eye{
  fill:none;stroke:var(--pl-gold);stroke-width:.7;
}
.sellabees-preloader--stitch .sb-needle-knot{
  fill:var(--pl-accent);
}
/* naald reist rond de buitenste rect (18,18 -> 102,102, hoeken benaderd),
   met kleine "prik"-schaal voor het stiksel-gevoel; opacity volgt de naai-fase */
@keyframes sb-needle-path{
  0%   { transform:translate(32px,18px) scale(.6); opacity:0; }
  12%  { opacity:1; }
  20%  { transform:translate(102px,32px) scale(1); }
  38%  { transform:translate(102px,102px) scale(1); }
  50%  { transform:translate(18px,102px) scale(1); }
  62%  { transform:translate(18px,18px) scale(1); opacity:1; }
  74%  { transform:translate(60px,60px) scale(.5); opacity:0; }
  100% { transform:translate(60px,60px) scale(.5); opacity:0; }
}

/* ---- wordmark ---- */
.sellabees-preloader--stitch .sb-stitch-word{
  font-family:"Cormorant Unicase","Cormorant",serif;
  font-size:30px;
  letter-spacing:.32em;
  text-indent:.32em;
  color:var(--pl-accent);
  line-height:1;
  position:relative;
  animation:sb-word-in 3.6s ease-in-out infinite;
}
.sellabees-preloader--stitch .sb-stitch-word::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:repeating-linear-gradient(90deg,var(--pl-accent) 0 6px,transparent 6px 12px);
  background-size:12px 2px;
  animation:sb-underline-stitch 1.4s linear infinite;
}
@keyframes sb-word-in{
  0%,100%{ opacity:.55; }
  50%    { opacity:1; }
}
@keyframes sb-underline-stitch{
  to{ background-position:12px 0; }
}

/* ---- reduced motion: alles stil, beeld blijft netjes staan ---- */
@media (prefers-reduced-motion: reduce){
  .sellabees-preloader--stitch .sb-weave-line,
  .sellabees-preloader--stitch .sb-stitch--1,
  .sellabees-preloader--stitch .sb-stitch--2,
  .sellabees-preloader--stitch .sb-stitch--3,
  .sellabees-preloader--stitch .sb-needle,
  .sellabees-preloader--stitch .sb-stitch-word,
  .sellabees-preloader--stitch .sb-stitch-word::after{
    animation:none !important;
  }
  .sellabees-preloader--stitch .sb-stitch{ stroke-dashoffset:0; opacity:1; }
  .sellabees-preloader--stitch .sb-needle{ opacity:0; }
  .sellabees-preloader--stitch .sb-stitch-word{ opacity:1; }
}

/* ============================================================
   Cart-/checkout-loader — logo i.p.v. de WooCommerce blockUI-spinner. Globaal
   (de overlay verschijnt op winkelwagen én checkout-AJAX). De core-JS injecteert
   <div class="sellabees-cart-loader"><img …></div> in .blockUI.blockOverlay.
   ============================================================ */
.blockUI.blockOverlay { background-image: none !important; }
.blockUI.blockOverlay::before,
.blockUI.blockOverlay::after { display: none !important; content: none !important; background: none !important; animation: none !important; }
.sellabees-cart-loader {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.sellabees-cart-loader img {
	display: block; width: auto; max-width: 78px; height: auto;
	animation: sellabees-cart-logo 1.3s ease-in-out infinite;
}
@keyframes sellabees-cart-logo {
	0%, 100% { opacity: .45; transform: scale(.94); }
	50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .sellabees-cart-loader img { animation: none; } }

/* =========================================================================
 * Inlog-popup (inc/account-auth.php) — BASIS-opmaak in de core, zodat elke shop
 * out-of-the-box een werkende, verzorgde popup heeft. Accent volgt --sellabees-red
 * (child-token) met een neutrale fallback; een child kan alles verder overschrijven.
 * ====================================================================== */
.sellabees-popup { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.sellabees-popup[hidden] { display: none; }
.sellabees-popup__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.sellabees-popup__box { position: relative; background: #fff; border: 1px solid #e6e6e6; border-radius: 3px; max-width: 420px; width: 100%; padding: 34px 36px; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.sellabees-login-popup .sellabees-popup__box { max-width: 420px; text-align: left; }
.sellabees-popup__close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--sellabees-red, #1f1f1f); background: #fff; color: var(--sellabees-red, #1f1f1f); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; }
.sellabees-popup__close:hover { background: var(--sellabees-red, #1f1f1f); color: #fff; }
.sellabees-popup__title { font-family: var(--sellabees-font-heading, inherit); font-weight: 600; font-size: 22px; color: var(--sellabees-ink, #1f1f1f); margin: 0 0 10px; }
.sellabees-popup__text { color: #6b6b6b; font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.sellabees-login__field { margin: 0 0 14px; }
.sellabees-login__field label { display: block; font-size: 13px; font-weight: 600; color: var(--sellabees-ink, #1f1f1f); margin-bottom: 6px; }
.sellabees-login__field input { width: 100%; border: 1px solid #cfcfcf; border-radius: 2px; padding: 12px 14px; font-size: 14px; background: #fff; }
.sellabees-login__field input:focus { outline: none; border-color: var(--sellabees-red, #1f1f1f); }
.sellabees-login__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; font-size: 13px; }
.sellabees-login__remember { display: flex; align-items: center; gap: 8px; color: #6b6b6b; cursor: pointer; margin: 0; }
.sellabees-login__remember input { width: auto; margin: 0; }
.sellabees-login__lost { color: var(--sellabees-red, #1f1f1f); white-space: nowrap; }
.sellabees-login__lost:hover { text-decoration: underline; }
.sellabees-login__btn { width: 100%; background: var(--sellabees-red, #1f1f1f); color: #fff; border: 0; border-radius: 2px; padding: 14px; font-family: var(--sellabees-font-heading, inherit); text-transform: uppercase; font-size: 15px; letter-spacing: .3px; cursor: pointer; }
.sellabees-login__btn:hover { filter: brightness(.93); }
.sellabees-login__btn:disabled { opacity: .65; cursor: default; }
.sellabees-login__msg { margin-top: 12px; font-size: 13px; color: #6b6b6b; text-align: center; min-height: 1em; }
.sellabees-login__msg.is-error { color: #c0392b; }
.sellabees-login__register { margin: 16px 0 0; text-align: center; font-size: 13px; color: #6b6b6b; }
.sellabees-login__register a { color: var(--sellabees-red, #1f1f1f); }
.sellabees-login__register a:hover { text-decoration: underline; }
body.sellabees-popup-open { overflow: hidden; }
@media (max-width: 600px) { .sellabees-popup__box { padding: 26px 20px; } }

/* =========================================================================
 * Zwevende winkelwagen-knop + zijbalk-winkelwagen (inc/side-cart.php) —
 * BASIS-opmaak in de core, zodat de feature in elke shop meteen werkt. Accenten
 * volgen child-tokens (--sellabees-red/--sellabees-ink) met neutrale fallback;
 * een child-thema laadt ná deze stylesheet en mag alles overschrijven.
 * ====================================================================== */
.sellabees-cart-fab { position: fixed; right: 18px; bottom: 16px; z-index: 9000; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--sellabees-red, #1f1f1f); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.22); transition: transform .18s ease, box-shadow .18s ease; }
.sellabees-cart-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.sellabees-cart-fab__icon { display: block; line-height: 0; }
.sellabees-cart-fab__count { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--sellabees-ink, #1f1f1f); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.sellabees-cart-fab__count.is-empty { display: none; }
.sellabees-cart-fab--bump { animation: sellabees-fab-bump .45s ease; }
@keyframes sellabees-fab-bump { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } }

.sellabees-side-cart { position: fixed; inset: 0; z-index: 9100; visibility: hidden; }
.sellabees-side-cart__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .3s ease; }
.sellabees-side-cart__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 350px; max-width: 90vw; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .32s cubic-bezier(.22,1,.36,1); box-shadow: -8px 0 30px rgba(0,0,0,.18); }
.sellabees-side-cart__panel:focus { outline: none; }
.sellabees-side-cart.is-open { visibility: visible; }
.sellabees-side-cart.is-open .sellabees-side-cart__overlay { opacity: 1; }
.sellabees-side-cart.is-open .sellabees-side-cart__panel { transform: translateX(0); }
body.sellabees-side-cart-open { overflow: hidden; }
.sellabees-side-cart__head { display: flex; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid #e5e5e5; }
.sellabees-side-cart__head-bag { position: relative; display: inline-flex; flex: 0 0 auto; color: var(--sellabees-ink, #1f1f1f); }
.sellabees-side-cart__head-icon { display: block; width: 26px; height: 26px; }
.sellabees-side-cart__count { position: absolute; top: 52%; left: 0; right: 0; transform: translateY(-50%); font-size: 9px; font-weight: 700; line-height: 1; text-align: center; }
.sellabees-side-cart__title { flex: 1 1 auto; font-family: var(--sellabees-font-heading, inherit); font-weight: 600; font-size: 20px; color: var(--sellabees-ink, #1f1f1f); }
.sellabees-side-cart__close { background: none; border: 0; cursor: pointer; font-size: 28px; line-height: 1; color: var(--sellabees-ink, #1f1f1f); }
.sellabees-side-cart__body { flex: 1 1 auto; overflow-y: auto; }
.sellabees-side-cart__items { padding: 18px 22px; }
.sellabees-side-cart__items.is-busy { opacity: .5; pointer-events: none; }
.sellabees-side-cart__items .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.sellabees-side-cart__items .woocommerce-mini-cart-item { position: relative; padding: 14px 26px 14px 0; border-bottom: 1px solid #e5e5e5; }
.sellabees-side-cart__items a.remove { position: absolute; top: 12px; right: 0; font-size: 18px; line-height: 1; }
.sellabees-side-cart__recos[hidden] { display: none; }
.sellabees-side-cart__recos { background: #f4f4f4; padding: 16px 22px 22px; }
.sellabees-side-cart__recos-title { font-family: var(--sellabees-font-heading, inherit); font-weight: 600; font-size: 17px; margin: 0 0 12px; }
.sellabees-side-cart__recos-list { list-style: none; margin: 0; padding: 0; }
.sellabees-side-cart__reco { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.sellabees-side-cart__reco-thumb { flex: 0 0 56px; }
.sellabees-side-cart__reco-thumb img { width: 56px; height: 70px; object-fit: cover; display: block; }
.sellabees-side-cart__reco-info { flex: 1 1 auto; min-width: 0; }
.sellabees-side-cart__reco-name { display: block; font-size: 13px; line-height: 1.3; }
.sellabees-side-cart__reco-price { display: block; font-size: 13px; font-weight: 600; margin-top: 2px; }
.sellabees-side-cart__reco-add { flex: 0 0 auto; background: var(--sellabees-red, #1f1f1f); color: #fff; font-size: 12px; font-weight: 600; padding: 8px 12px; white-space: nowrap; }
.sellabees-side-cart__reco-add:hover { filter: brightness(.93); color: #fff; }
/* Toast niet onder de zwevende knop laten vallen. */
body.sellabees-has-cart-fab .sellabees-toast--bottom-right { bottom: 84px; }
@media (max-width: 600px) { .sellabees-cart-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; } }
@media (prefers-reduced-motion: reduce) {
	.sellabees-side-cart__overlay, .sellabees-side-cart__panel { transition: none; }
	.sellabees-cart-fab--bump { animation: none; }
}