/* ===== Does Sticker & Popover (single source of truth) ===== */
.hero-content { position: relative; } /* anchor for absolute sticker */

/* Simple round "Did you know?" sticker */
.does-sticker{
  position: absolute;
  top: -8px;              /* tweak to taste */
  right: -12px;           /* tweak to taste */
  padding: 10px 14px;     /* pill / small round */
  background: #FFFFFF;    /* calm white badge */
  color: #06FFA5;         /* green text */
  font: 700 12px/1 'Space Grotesk', sans-serif;
  letter-spacing: .3px;
  border: 3px solid #1a1a1a;  /* crisp outline */
  border-radius: 999px;       /* round */
  box-shadow: 8px 8px 0 rgba(0,0,0,.07);
  cursor: pointer;
  z-index: 5;
}
/* kill any old scallop pseudo just in case */
.does-sticker::before{ content:none !important; }

/* Popover stays the same */
.does-popover{
  position:absolute; top:56px; right:0;
  max-width:360px; background:#fff;
  border:3px solid #1a1a1a; box-shadow:12px 12px 0 rgba(0,0,0,.08);
  padding:14px; z-index:20; display:none;
}
.does-popover.is-open{ display:block; }

@media (max-width:640px){
  .does-sticker{ position: static; margin:.6rem 0 0 0; }
  .does-popover{ position: static; margin-top:.5rem; }
}

/* ===== Does Sticker: simple round + polish ===== */
.hero-content { position: relative; } /* zekerheidje voor absolute positioning */

/* Clean round sticker (kleiner) */
.does-sticker{
  position: absolute !important;
  top: -8px !important;         /* finetune naar smaak */
  right: -12px !important;      /* finetune naar smaak */
  padding: 9px 12px !important; /* iets compacter */
  background: #FFFFFF !important;
  color: #06FFA5 !important;    /* groen */
  font: 700 11px/1 'Space Grotesk', sans-serif !important; /* was 12px */
  letter-spacing: .3px !important;
  border: 3px solid #1a1a1a !important;
  border-radius: 999px !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,.06) !important;
  cursor: pointer !important;
  z-index: 5 !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}

/* Zet oude scallop pseudo zeker uit */
.does-sticker::before{
  content: none !important;
  display: none !important;
}

/* Hover micro-interactie */
.does-sticker:hover{
  transform: translateY(-1px) !important;
  box-shadow: 6px 6px 0 rgba(0,0,0,.06) !important;
}

/* Popover (kleiner + ronder) */
.does-popover{
  position: absolute !important;
  top: 56px !important;
  right: 0 !important;
  max-width: 420px !important;
  background: #fff !important;
  border: 3px solid #1a1a1a !important;
  border-radius: 12px !important;
  box-shadow: 12px 12px 0 rgba(0,0,0,.08) !important;
  padding: 16px 18px !important;   /* compacter dan 18/20 */
  z-index: 20 !important;
  display: none !important;
  font-size: .95rem !important;    /* iets kleiner */
  line-height: 1.5 !important;
}
.does-popover.is-open{ display: block !important; }

/* Pijltje naar sticker */
.does-popover::after{
  content: "" !important;
  position: absolute !important;
  top: -10px !important;
  right: 28px !important;
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;      /* vulling */
}
.does-popover::before{
  content: "" !important;
  position: absolute !important;
  top: -12px !important;
  right: 26px !important;              /* 2px groter voor outline */
  width: 0; height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #1a1a1a;   /* outline */
}

/* Content en subtitel net wat kleiner */
.does-popover__content{ font-size: .95rem !important; }
.does-popover__content h4{
  font-size: .9rem !important;
  margin-bottom: .25rem !important;
}

/* Mobiel: popover centreren en caret weg */
@media (max-width: 640px){
  .does-sticker{
    position: static !important;
    margin: .6rem 0 0 0 !important;
  }
  .does-popover{
    position: static !important;
    margin: .75rem auto 0 !important;
    max-width: 100% !important;
  }
  .does-popover::before,
  .does-popover::after{ display: none !important; }
}