/* Sellabees Sites Core — component-styling (huisstijl-onafhankelijk).
   Kleuren/typografie komen uit het child-thema via CSS-variabelen met fallbacks.
   Deze core bevat GEEN webshop-componenten (cart, filter, productcard, …); die
   leven in sellabees-shops-core. De Google-reviews-BADGE (.sellabees-greviews) wordt
   bewust in het child gestyled — de core levert alleen de markup + lokale assets. */

/* --- 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 — de accentkleuren komen via
   --sellabees-preloader-* (inline, Site-instellingen → Laadscherm),
   met terugval op --sellabees-red / --sellabees-yellow (child-tokens).
   ============================================================ */
.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; }
/* Grootte van de animatie: instelbaar via Laadscherm → Grootte. Als schaal op de
   wrapper, zodat elke stijl (ring, stippen, balk, logo, unieke stijlen) meegroeit. */
.sellabees-preloader__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(var(--sellabees-preloader-scale, 1));
	transform-origin: center 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; }
}