@charset "UTF-8";
/* ===== THEME ===== */
a, abbr, acronym, address, applet, b, big, blockquote, body, center,
cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form,
h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label,
legend, li, object, ol, p, pre, q, s, samp, small, span, strike,
strong, sub, sup, tt, u, ul, var {
  margin: 0;
  padding: 0;
  padding-bottom: 0px;
  border: 0;
  outline: 0;
  background: 0 0;
  vertical-align: baseline;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-decoration: none;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Scroll-offset zodat de vaste header de sectie niet overlapt */
#sets, #waarwestaan, #instagram, #faq, #contact, #tcg, #kaart-zoeker {
  scroll-margin-top: 90px;
}

.entry-content > * {
  margin: 0 0 1em 0;
}

.entry-content > *:last-child {
  margin-bottom: 0;
}

.nomargin {
  margin: 0px !important;
}

.entry-content p,
.entry-content li,
.entry-content blockquote {
  line-height: 1.6;
  -webkit-margin-before: 1em;
  margin-block-start: 1em;
  -webkit-margin-after: 1em;
  margin-block-end: 1em;
  -webkit-margin-start: 0px;
  margin-inline-start: 0px;
  -webkit-margin-end: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin: 0 0 0.5em 0;
  color: #1d1d1f;
}

:root {
  --glass-bg: rgba(12, 12, 20, 0.72);
  --glass-border: rgba(255, 255, 255, 0.07);
  --glass-blur: blur(24px) saturate(180%);
  --glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --radius-xl: 32px;
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.07);
  --transition: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  font-family: Plus Jakarta Sans, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.6;
  background: #f8f8fc;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.freeze {
  overflow: hidden;
}

#page_container {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

#main-content {
  overflow: hidden;
}

a:not([class]) {
  color: rgba(0, 0, 0, 0.6);
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
a:not([class])::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
a:not([class]):hover::before {
  width: 100%;
}

.menu a,
.sub-menu a {
  position: static;
  width: auto;
}
.menu a::before,
.sub-menu a::before {
  content: none;
}

.has-inline-color {
  font-size: 1.8rem;
  line-height: 1.6em;
}

.white {
  color: white;
}

.right {
  text-align: right;
}

a.white {
  color: white;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
a.white::before {
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 0%;
  height: 1px;
  background-color: white;
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}
a.white:hover::before {
  content: "";
  width: 100%;
}

.orange {
  color: #54b57d;
}

.showmobile {
  display: none !important;
}

@media screen and (max-width: 980px) {
  .showmobile {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}
h2, h3, h4, h5, h6 {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  letter-spacing: -0.01em;
  margin-bottom: 0px !important;
}

/* Focus states */
:focus-visible {
  outline: 2px solid #dd4290;
  outline-offset: 3px;
  border-radius: 4px;
}

/* glass utility */
.mk-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  -webkit-box-shadow: var(--glass-shadow);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
}

/* =============================================
   ANIMATIONS & KEYFRAMES
   ============================================= */
@-webkit-keyframes float-slow {
  0%, 100% {
    -webkit-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    -webkit-transform: translateY(-12px) rotate(1deg);
    transform: translateY(-12px) rotate(1deg);
  }
  66% {
    -webkit-transform: translateY(-6px) rotate(-1deg);
    transform: translateY(-6px) rotate(-1deg);
  }
}
@keyframes float-slow {
  0%, 100% {
    -webkit-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    -webkit-transform: translateY(-12px) rotate(1deg);
    transform: translateY(-12px) rotate(1deg);
  }
  66% {
    -webkit-transform: translateY(-6px) rotate(-1deg);
    transform: translateY(-6px) rotate(-1deg);
  }
}
@-webkit-keyframes float-medium {
  0%, 100% {
    -webkit-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(-18px) rotate(-1.5deg);
    transform: translateY(-18px) rotate(-1.5deg);
  }
}
@keyframes float-medium {
  0%, 100% {
    -webkit-transform: translateY(0px) rotate(0deg);
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(-18px) rotate(-1.5deg);
    transform: translateY(-18px) rotate(-1.5deg);
  }
}
@-webkit-keyframes blob-drift {
  0%, 100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
  }
  33% {
    -webkit-transform: translate(40px, -30px) scale(1.08);
    transform: translate(40px, -30px) scale(1.08);
  }
  66% {
    -webkit-transform: translate(-20px, 20px) scale(0.96);
    transform: translate(-20px, 20px) scale(0.96);
  }
}
@keyframes blob-drift {
  0%, 100% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
  }
  33% {
    -webkit-transform: translate(40px, -30px) scale(1.08);
    transform: translate(40px, -30px) scale(1.08);
  }
  66% {
    -webkit-transform: translate(-20px, 20px) scale(0.96);
    transform: translate(-20px, 20px) scale(0.96);
  }
}
@-webkit-keyframes shimmer-sweep {
  0% {
    -webkit-transform: translateX(-100%) skewX(-15deg);
    transform: translateX(-100%) skewX(-15deg);
  }
  100% {
    -webkit-transform: translateX(300%) skewX(-15deg);
    transform: translateX(300%) skewX(-15deg);
  }
}
@keyframes shimmer-sweep {
  0% {
    -webkit-transform: translateX(-100%) skewX(-15deg);
    transform: translateX(-100%) skewX(-15deg);
  }
  100% {
    -webkit-transform: translateX(300%) skewX(-15deg);
    transform: translateX(300%) skewX(-15deg);
  }
}
@-webkit-keyframes glow-pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes ring-pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(47, 214, 109, 0.55);
    box-shadow: 0 0 0 0 rgba(47, 214, 109, 0.55);
  }
  100% {
    -webkit-box-shadow: 0 0 0 9px rgba(47, 214, 109, 0);
    box-shadow: 0 0 0 9px rgba(47, 214, 109, 0);
  }
}
@keyframes ring-pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(47, 214, 109, 0.55);
    box-shadow: 0 0 0 0 rgba(47, 214, 109, 0.55);
  }
  100% {
    -webkit-box-shadow: 0 0 0 9px rgba(47, 214, 109, 0);
    box-shadow: 0 0 0 9px rgba(47, 214, 109, 0);
  }
}
@-webkit-keyframes spin-slow {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin-slow {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes fade-up {
  from {
    opacity: 0;
    -webkit-transform: translateY(24px);
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fade-up {
  from {
    opacity: 0;
    -webkit-transform: translateY(24px);
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes scale-in {
  from {
    opacity: 0;
    -webkit-transform: scale(0.94);
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scale-in {
  from {
    opacity: 0;
    -webkit-transform: scale(0.94);
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes border-glow {
  0%, 100% {
    border-color: rgba(221, 66, 144, 0.3);
  }
  50% {
    border-color: rgba(221, 66, 144, 0.7);
  }
}
@keyframes border-glow {
  0%, 100% {
    border-color: rgba(221, 66, 144, 0.3);
  }
  50% {
    border-color: rgba(221, 66, 144, 0.7);
  }
}
/* === REVEAL CLASSES (triggered by IntersectionObserver) === */
.mk-reveal {
  opacity: 0;
  -webkit-transform: translateY(28px);
  transform: translateY(28px);
  -webkit-transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-reveal.is-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.mk-reveal--scale {
  opacity: 0;
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
  -webkit-transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-reveal--scale.is-visible {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.mk-reveal--left {
  opacity: 0;
  -webkit-transform: translateX(-28px);
  transform: translateX(-28px);
  -webkit-transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.mk-reveal--left.is-visible {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* Stagger delays */
.mk-reveal:nth-child(1),
.mk-reveal--scale:nth-child(1),
.mk-reveal--left:nth-child(1) {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.mk-reveal:nth-child(2),
.mk-reveal--scale:nth-child(2),
.mk-reveal--left:nth-child(2) {
  -webkit-transition-delay: 0.08s;
  transition-delay: 0.08s;
}

.mk-reveal:nth-child(3),
.mk-reveal--scale:nth-child(3),
.mk-reveal--left:nth-child(3) {
  -webkit-transition-delay: 0.16s;
  transition-delay: 0.16s;
}

.mk-reveal:nth-child(4),
.mk-reveal--scale:nth-child(4),
.mk-reveal--left:nth-child(4) {
  -webkit-transition-delay: 0.24s;
  transition-delay: 0.24s;
}

.mk-reveal:nth-child(5),
.mk-reveal--scale:nth-child(5),
.mk-reveal--left:nth-child(5) {
  -webkit-transition-delay: 0.32s;
  transition-delay: 0.32s;
}

.mk-reveal:nth-child(6),
.mk-reveal--scale:nth-child(6),
.mk-reveal--left:nth-child(6) {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.mk-reveal:nth-child(7),
.mk-reveal--scale:nth-child(7),
.mk-reveal--left:nth-child(7) {
  -webkit-transition-delay: 0.48s;
  transition-delay: 0.48s;
}

.mk-reveal:nth-child(8),
.mk-reveal--scale:nth-child(8),
.mk-reveal--left:nth-child(8) {
  -webkit-transition-delay: 0.56s;
  transition-delay: 0.56s;
}

/* ===== LAYOUT ===== */
/* Reset WP-block achtergronden — body levert de basiskleur */
.entry-content > .wp-block-columns,
.entry-content > [class^=wp-block-] {
  background-color: transparent !important;
}

.entry-content > .wp-block-columns,
.entry-content > [class^=wp-block-]:not(.wp-block-columns):not(.wp-block-group) {
  max-width: 1400px;
  width: 90%;
  margin: 0 auto;
}

:root :where(.wp-block-image.is-style-rounded img, .wp-block-image .is-style-rounded img) {
  border-radius: 15px;
}

/* Laatste columns block */
.entry-content > .wp-block-columns:last-child {
  margin-bottom: 60px;
}

.wp-block-columns.is-layout-flex {
  gap: 3rem;
}

/* Volledige breedte via editor toggle */
.entry-content > .wp-block-columns.mk-full-width {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Geneste wp-block-columns binnen mk-full-width houden zich wél aan 1400px */
.wp-block-columns.mk-full-width > .wp-block-column > .wp-block-columns {
  max-width: 1400px;
  width: 90%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Gradient onderlijn via editor toggle */
.mk-gradient-border {
  position: relative;
}
.mk-gradient-border::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, rgba(221, 66, 144, 0.7)), color-stop(50%, #54b57d), color-stop(80%, rgba(84, 181, 125, 0.7)), to(transparent));
  background: linear-gradient(90deg, transparent 0%, rgba(221, 66, 144, 0.7) 20%, #54b57d 50%, rgba(84, 181, 125, 0.7) 80%, transparent 100%);
}

.wp-block-columns.mobile-txt-left > .wp-block-column:first-child {
  -webkit-box-flex: 0 !important;
  -ms-flex: 0 0 35% !important;
  flex: 0 0 35% !important;
}

@media screen and (max-width: 740px) {
  .wp-block-columns.mobile-txt-left > .wp-block-column:first-child {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
  }
  .entry-content > .wp-block-columns,
  .entry-content > [class^=wp-block-]:not(.wp-block-columns):not(.wp-block-group) {
    width: 90%;
  }
  .wp-block-columns.is-layout-flex {
    gap: 1.5rem;
  }
  .entry-content > .wp-block-columns:not(:last-child),
  .entry-content > [class^=wp-block-]:not(.wp-block-columns):not(.wp-block-group):not(:last-child) {
    margin: 40px auto 40px auto;
  }
  .wp-block-column:empty {
    display: none;
  }
  .mobile-txt-left h1, .mobile-txt-left h2, .mobile-txt-left h3, .mobile-txt-left h4, .mobile-txt-left h5, .mobile-txt-left h6 {
    text-align: left;
  }
  h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
  }
  h3 {
    font-size: clamp(1.6rem, 2.6vw, 3rem);
  }
}
/* =============================================
   FLOATING GLASS HEADER
   ============================================= */
.admin-bar .mk-header {
  top: 52px;
}

@media (max-width: 782px) {
  .admin-bar .mk-header {
    top: 58px;
  }
}
.mk-header {
  position: fixed;
  top: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 95%;
  z-index: 999;
  -webkit-transition: top 0.4s var(--transition), width 0.4s var(--transition), -webkit-transform 0.4s var(--transition);
  transition: top 0.4s var(--transition), width 0.4s var(--transition), -webkit-transform 0.4s var(--transition);
  transition: top 0.4s var(--transition), transform 0.4s var(--transition), width 0.4s var(--transition);
  transition: top 0.4s var(--transition), transform 0.4s var(--transition), width 0.4s var(--transition), -webkit-transform 0.4s var(--transition);
  /* === GLASS PILL === */
  /* === LEFT === */
  /* === CENTER NAV === */
  /* === MEGAMENU: "Kaarten verkopen bij jou in de buurt" ===
     Positionering/open-toggle staat hier (koppelt aan de trigger in de
     nav hierboven); de rijke binnenkant (tabs, regio-rail, live preview,
     SVG-kaart) staat in _locaties-mega.scss — apart bestand, want dat
     paneel is inmiddels een flink eigen onderdeel geworden i.p.v. een
     paar regels bij de rest van de header. */
  /* === RIGHT === */
  /* === NEXT FAIR WIDGET === */
  /* === CTA BUTTON === */
  /* === MOBILE TOGGLE === */
}
.mk-header.is-hidden {
  -webkit-transform: translateX(-50%) translateY(calc(-100% - 32px));
  transform: translateX(-50%) translateY(calc(-100% - 32px));
}
.mk-header.is-scrolled .mk-header__glass {
  padding: 0px 16px;
}
.mk-header.is-scrolled .mk-header__glass .mk-header__fair {
  border-radius: 0px;
}
.mk-header.is-scrolled .mk-header__glass .mk-header__left {
  height: 100%;
}
.mk-header.is-scrolled .mk-header__glass .mk-header__left .mk-header__logo {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 0px;
}
.mk-header__glass {
  display: grid;
  /* minmax(0, 1fr) i.p.v. kaal 1fr: zonder dit mag de middelste
     (nav-)kolom nooit smaller worden dan de eigen inhoud, waardoor
     de grid als geheel breder werd dan de header en losse
     nav-woorden (bv. "Kaarten verkopen bij jou in de buurt") om
     gingen breken tot een rommelige stapel i.p.v. dat de kolom
     gewoon compacter werd. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  position: relative;
  background: rgba(6, 6, 14, 0.88);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  -webkit-box-shadow: var(--glass-shadow);
  box-shadow: var(--glass-shadow);
  -webkit-transition: padding 0.4s var(--transition), background 0.4s var(--transition);
  transition: padding 0.4s var(--transition), background 0.4s var(--transition);
}
.mk-header__left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.mk-header__logo {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 6px 14px;
  -webkit-transition: background 0.3s ease, -webkit-transform 0.3s ease;
  transition: background 0.3s ease, -webkit-transform 0.3s ease;
  transition: background 0.3s ease, transform 0.3s ease;
  transition: background 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}
.mk-header__logo img {
  height: 40px;
  width: auto;
  display: block;
}
@media screen and (max-width: 640px) {
  .mk-header__logo img {
    height: 30px;
  }
}
.mk-header__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* Kolom mag smaller worden dan de content (zie minmax(0,1fr)
     hierboven) — dan moet de flex-rij zelf ook echt kunnen krimpen
     i.p.v. de grid-kolom te dwingen tot de volle breedte. */
  min-width: 0;
  /* Op smallere desktop-breedtes (net boven de mobiele 980px-grens)
     was het al krap: 5 nav-items + het beursblok + de Cardmarket-
     knop pasten niet meer comfortabel naast elkaar. Compactere gap
     en iets kleinere tekst geven de nav weer lucht i.p.v. dat-ie
     tegen het beursblok/logo aan schuurt. Bovengrens (1500px) zet
     bewust gelijk aan de hide-breakpoint van het beursblok
     hieronder — anders springt de nav precies op het moment dat
     het beursblok weer verschijnt terug naar volle breedte, en
     overlappen ze elkaar in die overgangszone. */
}
.mk-header__nav .mk-header__nav__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.mk-header__nav .mk-header__nav__list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /* Dropdown-pijltje. */
  /* Megamenu-trigger-pijltje — bewust geen position:absolute
     (zoals hierboven), maar gewoon een teken in de normale
     tekstflow via flexbox. Simpeler en minder foutgevoelig. */
}
.mk-header__nav .mk-header__nav__list li::marker {
  content: none;
}
.mk-header__nav .mk-header__nav__list li a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 7px 2px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  /* Zonder dit brak "Kaarten verkopen bij jou in de
     buurt" op smallere desktop-breedtes over 3-4 regels
     i.p.v. dat de rij zelf compacter werd. */
  white-space: nowrap;
  -webkit-transition: color 0.25s ease, background 0.25s ease, -webkit-transform 0.25s ease;
  transition: color 0.25s ease, background 0.25s ease, -webkit-transform 0.25s ease;
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease;
  position: relative;
}
.mk-header__nav .mk-header__nav__list li a:hover {
  color: #fff;
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}
.mk-header__nav .mk-header__nav__list li.current-menu-item a, .mk-header__nav .mk-header__nav__list li.current-page-ancestor a {
  color: #fff;
  background: var(--surface);
}
.mk-header__nav .mk-header__nav__list li.current-menu-item a::after, .mk-header__nav .mk-header__nav__list li.current-page-ancestor a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: -webkit-gradient(linear, left top, right top, from(#dd4290), to(#ef7815));
  background: linear-gradient(90deg, #dd4290, #ef7815);
}
.mk-header__nav .mk-header__nav__list li.menu-item-has-children {
  position: relative;
}
.mk-header__nav .mk-header__nav__list li.menu-item-has-children > a::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  -webkit-transform: translateY(-40%);
  transform: translateY(-40%);
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  -webkit-transition: rotate 0.2s ease;
  transition: rotate 0.2s ease;
}
.mk-header__nav .mk-header__nav__list li.menu-item-has-children > a {
  padding-right: 22px;
}
.mk-header__nav .mk-header__nav__list li.menu-item-has-children:hover > a::before {
  rotate: -135deg;
}
.mk-header__nav .mk-header__nav__list li.mk-nav-locaties-trigger > a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
}
.mk-header__nav .mk-header__nav__list li.mk-nav-locaties-trigger > a::after {
  content: "▾";
  font-size: 0.7em;
  opacity: 0.6;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.mk-header__nav .mk-header__nav__list li.mk-nav-locaties-trigger:hover > a::after {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.mk-header__nav .mk-header__nav__list li.menu-item-has-children .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(8px);
  transform: translateX(-50%) translateY(8px);
  min-width: 200px;
  background: rgba(10, 10, 20, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  -webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 8px;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s var(--transition);
  transition: opacity 0.25s ease, -webkit-transform 0.25s var(--transition);
  transition: opacity 0.25s ease, transform 0.25s var(--transition);
  transition: opacity 0.25s ease, transform 0.25s var(--transition), -webkit-transform 0.25s var(--transition);
  z-index: 100;
}
.mk-header__nav .mk-header__nav__list li.menu-item-has-children .sub-menu li a {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  white-space: nowrap;
}
.mk-header__nav .mk-header__nav__list li.menu-item-has-children .sub-menu li a::after {
  display: none;
}
.mk-header__nav .mk-header__nav__list li.menu-item-has-children:hover .sub-menu {
  opacity: 1;
  pointer-events: all;
  -webkit-transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 980px) {
  .mk-header__nav {
    display: none;
  }
}
@media screen and (max-width: 1600px) and (min-width: 981px) {
  .mk-header__nav .mk-header__nav__list {
    gap: 20px;
  }
  .mk-header__nav .mk-header__nav__list li a {
    font-size: 0.78rem;
  }
}
.mk-header .mk-locaties-mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(8px);
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s var(--transition);
  transition: opacity 0.25s ease, -webkit-transform 0.25s var(--transition);
  transition: opacity 0.25s ease, transform 0.25s var(--transition);
  transition: opacity 0.25s ease, transform 0.25s var(--transition), -webkit-transform 0.25s var(--transition);
  z-index: 100;
}
.mk-header .mk-locaties-mega.is-open {
  opacity: 1;
  pointer-events: all;
  -webkit-transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 980px) {
  .mk-header .mk-locaties-mega {
    display: none;
  }
}
.mk-header__right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}
@media screen and (max-width: 980px) {
  .mk-header .mk-header__glass {
    gap: 0px;
  }
  .mk-header .mk-header__right {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
  }
}
.mk-header__fair {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 8px 14px;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
  /* Subtiele "over X dagen" — bewust géén eigen kleur-accent, dit
     mag ondergeschikt blijven aan naam/datum hierboven. */
  /* Was 1200px, nu gelijk aan de bovengrens van de compacte
     nav-styling hierboven (981-1500px) — anders reageert de nav
     weer op volle breedte precies op het moment dat dit blok
     terugkomt, en overlapt het de nav. */
}
.mk-header__fair:hover {
  background: var(--surface-hover);
}
.mk-header__fair__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #54b57d;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.mk-header__fair__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1px;
}
.mk-header__fair__label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #54b57d;
  opacity: 0.9;
}
.mk-header__fair__name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.mk-header__fair__meta {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}
.mk-header__fair__countdown {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}
@media (max-width: 1600px) {
  .mk-header__fair {
    display: none;
  }
}
.mk-header__cta {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #dd4290, #c82477);
  border-radius: 12px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: background 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: background 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.mk-header__cta img {
  width: 14px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.mk-header__cta:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
@media (max-width: 640px) {
  .mk-header__cta {
    padding: 6px 12px;
  }
  .mk-header__cta span {
    display: none;
  }
}
.mk-header__mobile-toggle {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
}
.mk-header__mobile-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
}
.mk-header__mobile-toggle.is-active span:nth-child(1) {
  -webkit-transform: rotate(45deg) translate(5px, 5px);
  transform: rotate(45deg) translate(5px, 5px);
}
.mk-header__mobile-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.mk-header__mobile-toggle.is-active span:nth-child(3) {
  -webkit-transform: rotate(-45deg) translate(5px, -5px);
  transform: rotate(-45deg) translate(5px, -5px);
}
@media (max-width: 980px) {
  .mk-header__mobile-toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media screen and (max-width: 640px) {
  .mk-header.is-scrolled .mk-header__glass {
    padding: 3px 14px;
  }
}
/* =============================================
   MOBIELE STICKY "VOLGENDE BEURS" BALK
   Altijd in beeld op mobiel/tablet — zelfde glass-stijl
   als .mk-header__glass, maar los van de header zodat hij
   ook zichtbaar blijft als de header inschuift/verbergt.
   ============================================= */
.mk-mobile-fair-bar {
  display: none;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  position: fixed;
  left: 50%;
  bottom: 14px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 900;
  width: 94%;
  max-width: 440px;
  border-radius: var(--radius-lg);
  /* Radius/schaduw staan op deze buitenste wrapper, niet op __info of
     __whatsapp los — zo klikken de twee (verschillend gekleurde)
     segmenten strak tegen elkaar aan tot één doorlopende vorm, zelfde
     principe als de desktop verkoop-kaart + whatsapp-blok eronder. */
  overflow: hidden;
  -webkit-box-shadow: var(--glass-shadow);
  box-shadow: var(--glass-shadow);
  /* De balk zweeft altijd fixed boven de pagina, dus zonder dit vangt
     hij taps op knoppen/links weg die er toevallig onder doorscrollen
     (bv. de "Schrijf een review"-knop). Alleen __cta en __whatsapp
     hieronder mogen nog klikbaar zijn. */
  pointer-events: none;
  /* WhatsApp als eigen, eigen-gekleurd segment vast aan de beurs-info
     — geen los bolletje meer IN de balk, maar een apart vlak dat er
     recht tegenaan geplakt zit (zelfde opbouw als __card + __whatsapp
     in de desktop verkoop-sidebar). */
  /* Verbergen zolang het mobiele menu open staat */
}
.mk-mobile-fair-bar__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  background: rgba(6, 6, 14, 0.88);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-right: none;
}
.mk-mobile-fair-bar__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #54b57d;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-animation: fair-glow-pulse 2s ease-in-out infinite;
  animation: fair-glow-pulse 2s ease-in-out infinite;
}
.mk-mobile-fair-bar__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.mk-mobile-fair-bar__label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #54b57d;
  opacity: 0.9;
}
.mk-mobile-fair-bar__name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-mobile-fair-bar__countdown {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  white-space: nowrap;
}
.mk-mobile-fair-bar__cta {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  /* darken(10%) i.p.v. de kale $color-primary: wit-op-primary zat
     met ~4.0:1 net onder de vereiste 4.5:1 voor deze tekstgrootte. */
  background: #c82477;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  -webkit-transition: background 0.2s ease, -webkit-transform 0.2s ease;
  transition: background 0.2s ease, -webkit-transform 0.2s ease;
  transition: transform 0.2s ease, background 0.2s ease;
  transition: transform 0.2s ease, background 0.2s ease, -webkit-transform 0.2s ease;
  pointer-events: auto;
}
.mk-mobile-fair-bar__cta:hover {
  background: #d1267c;
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}
.mk-mobile-fair-bar__whatsapp {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 54px;
  background: linear-gradient(135deg, #2fd66d, #1fae55);
  color: #fff;
  pointer-events: auto;
  /* dunne lichte naadlijn i.p.v. een harde kleurovergang — zelfde
     truc als bij de desktop whatsapp-balk */
  -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.2);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.2);
  -webkit-transition: -webkit-filter 0.2s ease;
  transition: -webkit-filter 0.2s ease;
  transition: filter 0.2s ease;
  transition: filter 0.2s ease, -webkit-filter 0.2s ease;
}
.mk-mobile-fair-bar__whatsapp svg {
  width: 19px;
  height: 19px;
}
.mk-mobile-fair-bar__whatsapp:hover {
  -webkit-filter: brightness(1.08);
  filter: brightness(1.08);
}
.mk-mobile-fair-bar__whatsapp:active {
  -webkit-filter: brightness(0.95);
  filter: brightness(0.95);
}
.mk-mobile-fair-bar__whatsapp-status {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3ddc73;
  border: 2px solid #1fae55;
  -webkit-animation: ring-pulse 1.8s ease-out infinite;
  animation: ring-pulse 1.8s ease-out infinite;
}
body.freeze .mk-mobile-fair-bar {
  display: none;
}
@media (max-width: 768px) {
  .mk-mobile-fair-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

/* === KEYFRAMES (used in header) === */
/* Bewust eigen naam (niet "glow-pulse") — die naam bestond al met een
   heel andere (opacity-fade) implementatie in base/_animations.scss.
   Zelfde keyframe-naam op twee plekken betekent dat de laatst
   gecompileerde definitie stilzwijgend wint voor ALLE elementen die
   'm gebruiken — dat gaf de verkoop-sidebar-badge per ongeluk deze
   groene ring-pulse i.p.v. zijn eigen roze fade. */
@-webkit-keyframes fair-glow-pulse {
  0%, 100% {
    -webkit-box-shadow: 0 0 0 3px rgba(84, 181, 125, 0.25);
    box-shadow: 0 0 0 3px rgba(84, 181, 125, 0.25);
  }
  50% {
    -webkit-box-shadow: 0 0 0 5px rgba(84, 181, 125, 0.4);
    box-shadow: 0 0 0 5px rgba(84, 181, 125, 0.4);
  }
}
@keyframes fair-glow-pulse {
  0%, 100% {
    -webkit-box-shadow: 0 0 0 3px rgba(84, 181, 125, 0.25);
    box-shadow: 0 0 0 3px rgba(84, 181, 125, 0.25);
  }
  50% {
    -webkit-box-shadow: 0 0 0 5px rgba(84, 181, 125, 0.4);
    box-shadow: 0 0 0 5px rgba(84, 181, 125, 0.4);
  }
}
@-webkit-keyframes ticker-scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
@keyframes ticker-scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
/* === ANNOUNCEMENT BAR (tijdelijk uitgeschakeld) ===
.mk-announcement-bar { ... }
*/
.mk-footer {
  /* Hero-achtergrond — zelfde iriserende gradiënt als .hero-section */
  border-top: 3px solid transparent;
  -o-border-image: linear-gradient(90deg, transparent 0%, rgba(221, 66, 144, 0.7) 20%, #ef7815 50%, rgba(84, 181, 125, 0.7) 80%, transparent 100%) 1;
  border-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, rgba(221, 66, 144, 0.7)), color-stop(50%, #ef7815), color-stop(80%, rgba(84, 181, 125, 0.7)), to(transparent)) 1;
  border-image: linear-gradient(90deg, transparent 0%, rgba(221, 66, 144, 0.7) 20%, #ef7815 50%, rgba(84, 181, 125, 0.7) 80%, transparent 100%) 1;
  padding: 32px 0 40px;
  /* === GLASS PILL (zoals .mk-header__glass) === */
  /* === BRAND col === */
  /* === NAV col === */
  /* === CONTACT col === */
  /* === DISCLAIMER === */
  /* === BOTTOM BAR === */
}
.mk-footer h1::after, .mk-footer h2::after, .mk-footer h3::after, .mk-footer h4::after, .mk-footer h5::after, .mk-footer h6::after {
  display: none;
}
.mk-footer__glass {
  position: relative;
  width: 95%;
  margin: 0 auto;
  padding-top: 72px;
  overflow: hidden;
  background: rgba(6, 6, 14, 0.88);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  -webkit-box-shadow: var(--glass-shadow);
  box-shadow: var(--glass-shadow);
}
.mk-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 90%;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
}
.mk-footer__brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
}
.mk-footer__logo {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.mk-footer__logo img {
  height: 40px;
  width: auto;
}
.mk-footer__tagline {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  max-width: 280px;
  margin: 0;
}
.mk-footer .social-container h5 {
  display: none;
}
.mk-footer .socials {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.mk-footer .socials a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-transition: background 0.2s ease, border-color 0.2s ease;
  transition: background 0.2s ease, border-color 0.2s ease;
  position: static;
}
.mk-footer .socials a::before {
  content: none;
}
.mk-footer .socials a svg {
  width: 16px;
  height: 16px;
  fill: rgba(255, 255, 255, 0.6);
  -webkit-transition: fill 0.2s ease;
  transition: fill 0.2s ease;
}
.mk-footer .socials a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}
.mk-footer .socials a:hover svg {
  fill: #fff;
}
.mk-footer__heading {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 20px;
  padding-bottom: 0;
  display: block;
}
.mk-footer__heading::after {
  display: none;
}
.mk-footer__nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
}
.mk-footer__nav__list li::marker {
  content: none;
}
.mk-footer__nav__list a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
  position: static;
  width: auto;
}
.mk-footer__nav__list a::before {
  content: none;
}
.mk-footer__nav__list a:hover {
  color: #fff;
}
.mk-footer__nav__list .sub-menu {
  display: none;
}
.mk-footer__contact__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
}
.mk-footer__contact__list li {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}
.mk-footer__contact__list a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
  position: static;
  width: auto;
}
.mk-footer__contact__list a::before {
  content: none;
}
.mk-footer__contact__list a:hover {
  color: #fff;
}
.mk-footer__contact__kvk, .mk-footer__contact__btw {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.8rem !important;
  margin-top: 8px;
}
.mk-footer__disclaimer {
  max-width: 1400px;
  margin: 0 auto;
  width: 90%;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 20px 0;
}
.mk-footer__disclaimer p {
  font-size: 0.72rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}
.mk-footer__bottom {
  max-width: 1400px;
  margin: 0 auto;
  width: 90%;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 20px 0 28px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 16px;
}
.mk-footer__bottom span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}
.mk-footer__bottom__nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mk-footer__bottom__nav li {
  list-style: none;
}
.mk-footer__bottom__nav li::marker {
  content: none;
}
.mk-footer__bottom__nav li + li a {
  margin-left: 20px;
}
.mk-footer__bottom__nav a {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  position: static;
  width: auto;
}
.mk-footer__bottom__nav a::before {
  content: none;
}
.mk-footer__bottom__nav a:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* === RESPONSIVE === */
@media (max-width: 980px) {
  .mk-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .mk-footer__brand {
    grid-column: 1/-1;
  }
}
@media (max-width: 640px) {
  .mk-footer {
    padding: 16px 0 24px;
  }
  .mk-footer__glass {
    width: 100%;
    border-radius: 0;
  }
  .mk-footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .mk-footer__bottom {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 8px;
  }
}
/* ===== COMPONENTS ===== */
/* === MENU === */
/* nav styles now live in _header.scss */
.mk-nav-footer .menu-footermenu-container #menu-footermenu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  list-style: none;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
  gap: 10px;
}
.mk-nav-footer .menu-footermenu-container #menu-footermenu li::marker {
  content: "";
  display: none;
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
}
.mk-nav-footer .menu-footermenu-container #menu-footermenu li a {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

.mk-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  /* === OVERLAY === */
  /* === FLOATING GLASS PANEL — zelfde stijl als .mk-header__glass / .mk-footer__glass === */
  /* === HEADER === */
  /* === VOLGENDE BEURS — zelfde info als de losse floating fair-bar
     (die alleen nog op de homepage staat), maar dan als onderdeel van
     het menu zelf, dus overal beschikbaar. === */
  /* === NAVIGATION === */
  /* === FOOTER === */
}
.mk-mobile-menu.is-active {
  pointer-events: all;
}
.mk-mobile-menu.is-active .mk-mobile-menu__overlay {
  opacity: 1;
}
.mk-mobile-menu.is-active .mk-mobile-menu__panel {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}
.mk-mobile-menu__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  -webkit-transition: opacity 0.35s ease;
  transition: opacity 0.35s ease;
  cursor: pointer;
}
.mk-mobile-menu__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 98%;
  height: 98%;
  background: rgba(6, 6, 14, 0.88);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  -webkit-box-shadow: var(--glass-shadow);
  box-shadow: var(--glass-shadow);
  opacity: 0;
  -webkit-transform: translate(-50%, -50%) scale(0.96);
  transform: translate(-50%, -50%) scale(0.96);
  -webkit-transition: opacity 0.4s var(--transition), -webkit-transform 0.4s var(--transition);
  transition: opacity 0.4s var(--transition), -webkit-transform 0.4s var(--transition);
  transition: opacity 0.4s var(--transition), transform 0.4s var(--transition);
  transition: opacity 0.4s var(--transition), transform 0.4s var(--transition), -webkit-transform 0.4s var(--transition);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
}
.mk-mobile-menu__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.mk-mobile-menu__logo img {
  height: 32px;
  width: auto;
  display: block;
}
.mk-mobile-menu__close {
  position: relative;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 0;
}
.mk-mobile-menu__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 999px;
}
.mk-mobile-menu__close span:nth-child(1) {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}
.mk-mobile-menu__close span:nth-child(2) {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.mk-mobile-menu__close:hover {
  background: rgba(255, 255, 255, 0.1);
}
.mk-mobile-menu__fair {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  margin: 16px 24px 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mk-mobile-menu__fair:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.mk-mobile-menu__fair-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #54b57d;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-animation: fair-glow-pulse 2s ease-in-out infinite;
  animation: fair-glow-pulse 2s ease-in-out infinite;
}
.mk-mobile-menu__fair-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.mk-mobile-menu__fair-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #54b57d;
  opacity: 0.9;
}
.mk-mobile-menu__fair-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-mobile-menu__fair-countdown {
  display: inline-block;
  margin-top: 3px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.mk-mobile-menu__fair-arrow {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
}
.mk-mobile-menu__nav {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 12px 16px;
  overflow-y: auto;
}
.mk-mobile-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mk-mobile-menu__list li::marker {
  content: none;
}
.mk-mobile-menu__list li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 13px 12px;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border-radius: 10px;
  -webkit-transition: color 0.2s ease, background 0.2s ease;
  transition: color 0.2s ease, background 0.2s ease;
  position: static;
  width: auto;
}
.mk-mobile-menu__list li a::before {
  content: none;
}
.mk-mobile-menu__list li a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.mk-mobile-menu__list li.current-menu-item > a, .mk-mobile-menu__list li.current-page-ancestor > a {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.mk-mobile-menu__list li.menu-item-has-children > a::after {
  content: "›";
  font-size: 1.2rem;
  opacity: 0.4;
}
.mk-mobile-menu__list .sub-menu {
  display: none;
  padding: 4px 0 8px 12px;
}
.mk-mobile-menu__list .sub-menu li a {
  font-size: 0.9rem;
  font-weight: 500;
  padding: 9px 12px;
  color: rgba(255, 255, 255, 0.5);
}
.mk-mobile-menu__list .menu-item-has-children.is-open > a::after {
  content: "‹";
}
.mk-mobile-menu__list .menu-item-has-children.is-open > .sub-menu {
  display: block;
}
.mk-mobile-menu__footer {
  padding: 20px 24px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.mk-mobile-menu__footer .mk-button {
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.mk-mobile-menu__footer .social-container h5 {
  display: none;
}
.mk-mobile-menu__footer .socials {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
.mk-mobile-menu__footer .socials a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: static;
  width: 36px;
}
.mk-mobile-menu__footer .socials a::before {
  content: none;
}
.mk-mobile-menu__footer .socials a svg {
  width: 16px;
  height: 16px;
  fill: rgba(255, 255, 255, 0.55);
}
.mk-mobile-menu__footer .socials a:hover {
  background: rgba(255, 255, 255, 0.1);
}
.mk-mobile-menu__footer .socials a:hover svg {
  fill: #fff;
}

/* === CONTACT === */
.contact-info span, .contact-info strong, .contact-info a {
  display: block;
}

.social-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.social-container .socials {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  gap: 10px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.social-container .socials a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.social-container .socials a svg {
  width: 40px;
  fill: white;
}

/* === BUTTON === */
.mk-button {
  /* Bij een <button>-element (i.p.v. <a>) toont de browser standaard nog
     een eigen rand + achtergrond onder onze eigen styling door, en soms
     een outline bij focus/klik — vandaar !important, want dit moet
     overal gelijk zijn ongeacht wat een specifiekere selector elders
     nog meegeeft. */
  border: none !important;
  outline: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 12px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.3s var(--transition), -webkit-box-shadow 0.3s ease;
  transition: -webkit-transform 0.3s var(--transition), -webkit-box-shadow 0.3s ease;
  transition: transform 0.3s var(--transition), box-shadow 0.3s ease;
  transition: transform 0.3s var(--transition), box-shadow 0.3s ease, -webkit-transform 0.3s var(--transition), -webkit-box-shadow 0.3s ease;
  /* Toetsenbord-gebruikers verliezen zo geen focus-indicatie — zelfde
     ring-patroon als elders (bv. de zoekvelden) i.p.v. de weggehaalde
     browser-outline. */
  /* shimmer sweep op alle buttons */
  /* === PRIMARY === */
  /* === SECONDARY === */
  /* === GLASS — frosted ghost === */
  /* === LINK === */
  /* === SMALL === */
  /* === PILL === */
}
.mk-button:focus-visible {
  -webkit-box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.35);
  box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.35);
}
.mk-button--has-image img, .mk-button--has-image svg {
  width: 15px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.mk-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  -webkit-transform: translateX(-100%) skewX(-15deg);
  transform: translateX(-100%) skewX(-15deg);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.mk-button:hover::before {
  -webkit-transform: translateX(200%) skewX(-15deg);
  transform: translateX(200%) skewX(-15deg);
}
.mk-button--primary {
  background: linear-gradient(135deg, #dd4290, #c82477);
  color: #fff;
  -webkit-box-shadow: 0 4px 20px rgba(221, 66, 144, 0.3);
  box-shadow: 0 4px 20px rgba(221, 66, 144, 0.3);
}
.mk-button--primary:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 8px 32px rgba(221, 66, 144, 0.45);
  box-shadow: 0 8px 32px rgba(221, 66, 144, 0.45);
}
.mk-button--primary:active {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-box-shadow: 0 2px 10px rgba(221, 66, 144, 0.2);
  box-shadow: 0 2px 10px rgba(221, 66, 144, 0.2);
}
.mk-button--secondary {
  background: linear-gradient(135deg, #54b57d, #449c69);
  color: #fff;
  -webkit-box-shadow: 0 4px 20px rgba(84, 181, 125, 0.25);
  box-shadow: 0 4px 20px rgba(84, 181, 125, 0.25);
}
.mk-button--secondary:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 8px 32px rgba(84, 181, 125, 0.4);
  box-shadow: 0 8px 32px rgba(84, 181, 125, 0.4);
}
.mk-button--secondary:active {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.mk-button--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  /* Enige variant met een bedoelde rand — moet de !important op de
     basis .mk-button hierboven overstemmen. */
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.mk-button--ghost:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.2) !important;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.mk-button--link {
  color: #dd4290;
  padding: 0 28px 0 0;
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: 600;
}
.mk-button--link::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: -webkit-transform 0.25s ease;
  transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
  transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
.mk-button--link::before {
  display: none;
}
.mk-button--link:hover {
  -webkit-transform: none;
  transform: none;
}
.mk-button--link:hover::after {
  -webkit-transform: translate(5px, -50%);
  transform: translate(5px, -50%);
}
.mk-button--small {
  padding: 8px 16px;
  font-size: 0.78rem;
  border-radius: 10px;
}
.mk-button--pill {
  border-radius: 999px;
}
.mk-button--center {
  margin: auto;
}

/* Gutenberg */
a.wp-block-button__link {
  border-radius: 12px;
  -webkit-transition: -webkit-filter 0.3s ease, -webkit-transform 0.3s ease;
  transition: -webkit-filter 0.3s ease, -webkit-transform 0.3s ease;
  transition: filter 0.3s ease, transform 0.3s ease;
  transition: filter 0.3s ease, transform 0.3s ease, -webkit-filter 0.3s ease, -webkit-transform 0.3s ease;
}
a.wp-block-button__link:hover {
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

@media screen and (max-width: 740px) {
  .mk-button {
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 12px 20px;
  }
  .mk-button--link {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .mk-button--ghost::before {
    display: none;
  }
}
/* === FORM === */
.gform_wrapper {
  margin-top: 20px;
}
.gform_wrapper .gform-body {
  margin: 0;
}
.gform_wrapper .gform-body #field_1_8 {
  cursor: pointer;
}
.gform_wrapper .gform-body #field_1_8 .gfield_label {
  display: none;
}
.gform_wrapper .gform-body #field_1_8 input {
  display: none;
}
.gform_wrapper .gform-body #field_1_8 label {
  font-weight: 400;
  font-size: 15px;
  padding-left: 20px;
  position: relative;
}
.gform_wrapper .gform-body #field_1_8 label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: white;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.gform_wrapper .gform-body #field_1_8 input[type=checkbox]:checked + label::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E13510;
}
.gform_wrapper .gform-body .gfield {
  position: relative;
}
.gform_wrapper .gform-body .gfield .gfield_label {
  display: block;
  font-size: 15px;
  font-weight: 400;
  position: absolute;
  top: 26px;
  left: 20px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  line-height: 0em;
  color: black;
}
.gform_wrapper .gform-body .gfield .gfield_label .gfield_required_text {
  font-size: 0px;
}
.gform_wrapper .gform-body .gfield .gfield_label .gfield_required_text::before {
  content: "*";
  font-size: 15px;
  color: #E13510;
  padding-left: 2px;
}
.gform_wrapper .gform-body .gfield input[type=text], .gform_wrapper .gform-body .gfield input[type=email], .gform_wrapper .gform-body .gfield input[type=tel], .gform_wrapper .gform-body .gfield textarea {
  width: 100%;
  padding: 25px 20px 9px 20px;
  border-radius: 7px;
  font-size: 15px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
  background: white;
  border: 0px;
  color: black;
  font-family: Plus Jakarta Sans, sans-serif;
}
.gform_wrapper .gform-body .gfield input[type=text]:focus, .gform_wrapper .gform-body .gfield input[type=email]:focus, .gform_wrapper .gform-body .gfield input[type=tel]:focus, .gform_wrapper .gform-body .gfield textarea:focus {
  outline: none;
  border: 0px;
}
.gform_wrapper .gform-body .gfield select {
  width: 100%;
  padding: 14px 40px 14px 20px;
  border-radius: 7px;
  font-size: 15px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0px;
  color: black;
  font-family: Plus Jakarta Sans, sans-serif;
  cursor: pointer;
}
.gform_wrapper .gform-body .gfield select:focus {
  outline: none;
  border: 0px;
}
.gform_wrapper .gform-body .gfield.is-active .gfield_label, .gform_wrapper .gform-body .gfield.is-filled .gfield_label {
  top: 12px;
  font-size: 12px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.gform_wrapper .gform_fields .gfield:not(.gfield--width-half) {
  grid-column-start: 1;
  grid-column-end: 3;
}
.gform_wrapper .gform-footer {
  margin-top: 10px;
}
.gform_wrapper .gform-footer .gform_button {
  font-size: 15px;
  text-decoration: none;
  padding: 15px 25px;
  border-radius: 7px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: white;
  background-color: #54b57d;
  outline: none;
  cursor: pointer;
  border: 0px;
}
.gform_wrapper .gform-footer .gform_button:hover {
  background-color: #449c69;
}

.gform_title {
  margin: 0px !important;
  color: #54b57d;
  line-height: 0.5em;
}

.gform_wrapper .gform_validation_errors {
  margin-bottom: 10px;
}
.gform_wrapper .gform_validation_errors h2.gform_submission_error {
  font-size: clamp(1.4rem, 2.2vw, 2.5rem);
  color: #E13510;
}
.gform_wrapper .gfield_error .gfield_validation_message {
  font-size: 15px;
  color: #E13510;
}

@media screen and (max-width: 740px) {
  .gform-body .gform_fields {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px 0px;
  }
  .gform-body .gform_fields .gfield--width-half {
    grid-column-start: 1;
    grid-column-end: 2;
  }
}
/* ===== TEMPLATE PARTS ===== */
.hero-section {
  position: relative;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  overflow: hidden;
  margin-bottom: 0px;
  -webkit-box-shadow: 0 8px 48px rgba(0, 0, 0, 0.09);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.09);
  /* Gradient scheidingslijn onderaan */
  /* Iriserende achtergrond — meerdere zachte kleurvlekken */
  background: radial-gradient(ellipse 55% 45% at 8% 20%, rgba(221, 66, 144, 0.11) 0%, transparent 60%), radial-gradient(ellipse 45% 55% at 92% 80%, rgba(84, 181, 125, 0.09) 0%, transparent 60%), radial-gradient(ellipse 35% 40% at 75% 10%, rgba(239, 120, 21, 0.07) 0%, transparent 55%), linear-gradient(160deg, #fafafa 0%, #f2f2f7 100%);
  /* ================================================
     INNER — volledig scherm, stapelcontext
     ================================================ */
  /* ================================================
     GESPREIDE KAARTEN
     ================================================ */
  /* Smooth terugkeer bij mouse leave */
  /* Op de seo_locatie-pagina's staat een enkele --special-kaart in-flow
     in een kolom (.seo-locatie__header-card) i.p.v. absoluut verspreid
     over de volle hero zoals --1 t/m --4 hierboven — dus geen eigen
     top/left/rotate, wel dezelfde muis-tilt (via --mouse-rx/ry/tx/ty,
     script.js pikt elk .hero-card-element sitebreed op) en een
     shimmer-shine bij hover (zelfde patroon als .set-detail__top10-card
     in _set-detail.scss). Willekeurige kaart + herloting per
     paginaweergave: zie single-seo_locatie.php + de init in script.js. */
  /* ================================================
     GECENTREERDE CONTENT
     ================================================ */
  /* ================================================
     STATS RIJ
     ================================================ */
  /* ================================================
     SCROLL INDICATOR
     ================================================ */
  /* ================================================
     TRUST STRIP
     ================================================ */
}
.hero-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, rgba(221, 66, 144, 0.7)), color-stop(50%, #ef7815), color-stop(80%, rgba(84, 181, 125, 0.7)), to(transparent));
  background: linear-gradient(90deg, transparent 0%, rgba(221, 66, 144, 0.7) 20%, #ef7815 50%, rgba(84, 181, 125, 0.7) 80%, transparent 100%);
  z-index: 4;
}
.hero-section__inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 2;
  background: radial-gradient(ellipse 65% 55% at 50% 46%, rgba(255, 255, 255, 0.6) 0%, transparent 72%);
}
.hero-section .hero-cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-perspective: 1200px;
  perspective: 1200px;
}
.hero-section .hero-card {
  position: absolute;
  border-radius: 14px;
  overflow: hidden;
  will-change: transform;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.13), 0 4px 16px rgba(0, 0, 0, 0.07);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.13), 0 4px 16px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.06);
  aspect-ratio: 2.5/3.5;
  background: linear-gradient(135deg, rgba(221, 66, 144, 0.12), rgba(239, 120, 21, 0.08));
  --parallax-y: 0px;
  --parallax-rotate: 0deg;
  --mouse-rx: 0deg;
  --mouse-ry: 0deg;
  --mouse-tx: 0px;
  --mouse-ty: 0px;
  /* Boven-links */
  /* Boven-rechts */
  /* Onder-links */
  /* Onder-rechts */
}
.hero-section .hero-card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}
.hero-section .hero-card--1 {
  width: 190px;
  top: 13%;
  left: 4%;
  -webkit-transform: rotate(calc(-14deg + var(--parallax-rotate))) rotateX(calc(12deg + var(--mouse-rx))) rotateY(calc(18deg + var(--mouse-ry))) translateX(var(--mouse-tx)) translateY(calc(var(--parallax-y) + var(--mouse-ty)));
  transform: rotate(calc(-14deg + var(--parallax-rotate))) rotateX(calc(12deg + var(--mouse-rx))) rotateY(calc(18deg + var(--mouse-ry))) translateX(var(--mouse-tx)) translateY(calc(var(--parallax-y) + var(--mouse-ty)));
  background: linear-gradient(135deg, rgba(221, 66, 144, 0.18), rgba(239, 120, 21, 0.1));
}
.hero-section .hero-card--2 {
  width: 170px;
  top: 13%;
  right: 4%;
  -webkit-transform: rotate(calc(11deg + var(--parallax-rotate))) rotateX(calc(10deg + var(--mouse-rx))) rotateY(calc(-16deg + var(--mouse-ry))) translateX(calc(-1 * var(--mouse-tx))) translateY(calc(var(--parallax-y) + var(--mouse-ty)));
  transform: rotate(calc(11deg + var(--parallax-rotate))) rotateX(calc(10deg + var(--mouse-rx))) rotateY(calc(-16deg + var(--mouse-ry))) translateX(calc(-1 * var(--mouse-tx))) translateY(calc(var(--parallax-y) + var(--mouse-ty)));
  background: linear-gradient(135deg, rgba(239, 120, 21, 0.14), rgba(84, 181, 125, 0.1));
}
.hero-section .hero-card--3 {
  width: 210px;
  bottom: 6%;
  left: 2%;
  -webkit-transform: rotate(calc(-7deg + var(--parallax-rotate))) rotateX(calc(-8deg + var(--mouse-rx))) rotateY(calc(10deg + var(--mouse-ry))) translateX(var(--mouse-tx)) translateY(calc(var(--parallax-y) - var(--mouse-ty)));
  transform: rotate(calc(-7deg + var(--parallax-rotate))) rotateX(calc(-8deg + var(--mouse-rx))) rotateY(calc(10deg + var(--mouse-ry))) translateX(var(--mouse-tx)) translateY(calc(var(--parallax-y) - var(--mouse-ty)));
  background: linear-gradient(135deg, rgba(84, 181, 125, 0.16), rgba(221, 66, 144, 0.08));
}
.hero-section .hero-card--4 {
  width: 175px;
  bottom: 6%;
  right: 5%;
  -webkit-transform: rotate(calc(13deg + var(--parallax-rotate))) rotateX(calc(-10deg + var(--mouse-rx))) rotateY(calc(-12deg + var(--mouse-ry))) translateX(calc(-1 * var(--mouse-tx))) translateY(calc(var(--parallax-y) - var(--mouse-ty)));
  transform: rotate(calc(13deg + var(--parallax-rotate))) rotateX(calc(-10deg + var(--mouse-rx))) rotateY(calc(-12deg + var(--mouse-ry))) translateX(calc(-1 * var(--mouse-tx))) translateY(calc(var(--parallax-y) - var(--mouse-ty)));
  background: linear-gradient(135deg, rgba(221, 66, 144, 0.12), rgba(84, 181, 125, 0.1));
}
.hero-section.is-mouse-returning .hero-card {
  -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: -webkit-transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-section .hero-card--special {
  position: relative;
  width: 100%;
  -webkit-transform: rotateX(calc(6deg + var(--mouse-rx))) rotateY(calc(-8deg + var(--mouse-ry))) translateX(var(--mouse-tx)) translateY(var(--mouse-ty));
  transform: rotateX(calc(6deg + var(--mouse-rx))) rotateY(calc(-8deg + var(--mouse-ry))) translateX(var(--mouse-tx)) translateY(var(--mouse-ty));
  -webkit-transition: -webkit-box-shadow 0.25s ease;
  transition: -webkit-box-shadow 0.25s ease;
  transition: box-shadow 0.25s ease;
  transition: box-shadow 0.25s ease, -webkit-box-shadow 0.25s ease;
}
.hero-section .hero-card--special::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  -webkit-transform: translateX(-120%) skewX(-15deg);
  transform: translateX(-120%) skewX(-15deg);
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  pointer-events: none;
  z-index: 2;
}
.hero-section .hero-card--special:hover {
  -webkit-box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18), 0 6px 20px rgba(0, 0, 0, 0.1);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18), 0 6px 20px rgba(0, 0, 0, 0.1);
}
.hero-section .hero-card--special:hover::after {
  -webkit-transform: translateX(120%) skewX(-15deg);
  transform: translateX(120%) skewX(-15deg);
}
.hero-section .hero-card__rarity {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.hero-section__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1000px;
  width: 90%;
  padding: 80px 0px 130px 0px;
  /* Subtitel — was <h3> direct na de <h1> (sloeg <h2> over in de
     kopjes-hiërarchie), nu een echte <h2>. */
  /* Ghost button op lichte achtergrond */
}
.hero-section__content .hero-eyebrow {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  background: rgba(221, 66, 144, 0.22);
  border: 1px solid rgba(221, 66, 144, 0.32);
  border-radius: 999px;
  padding: 5px 14px 5px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #dd4290;
  opacity: 1;
  margin-bottom: 24px;
  -webkit-animation: fade-up 0.8s var(--transition) both;
  animation: fade-up 0.8s var(--transition) both;
}
.hero-section__content .hero-eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dd4290;
}
.hero-section__content h1 {
  font-size: clamp(2.6rem, 3.5vw, 4.8rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #1d1d1f;
  margin: 0 0 18px 0;
  -webkit-animation: fade-up 0.8s var(--transition) 0.08s both;
  animation: fade-up 0.8s var(--transition) 0.08s both;
}
.hero-section__content h1 span.gradient-text {
  background: linear-gradient(135deg, #dd4290 0%, #ef7815 55%, #54b57d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-section__content h2 {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 0;
  line-height: 1.65;
  -webkit-animation: fade-up 0.8s var(--transition) 0.16s both;
  animation: fade-up 0.8s var(--transition) 0.16s both;
}
.hero-section__content h2::after {
  display: none;
}
.hero-section__content p {
  color: rgba(0, 0, 0, 0.6);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 32px;
  -webkit-animation: fade-up 0.8s var(--transition) 0.2s both;
  animation: fade-up 0.8s var(--transition) 0.2s both;
}
.hero-section__content .hero-text--mobile {
  display: none;
}
.hero-section__content .hero-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 12px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-animation: fade-up 0.8s var(--transition) 0.24s both;
  animation: fade-up 0.8s var(--transition) 0.24s both;
}
.hero-section__content .mk-button--ghost {
  background: rgba(0, 0, 0, 0.05);
  color: #1d1d1f;
  border-color: rgba(0, 0, 0, 0.14);
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero-section__content .mk-button--ghost svg {
  color: #dd4290;
}
.hero-section__content .mk-button--ghost:hover {
  background: rgba(0, 0, 0, 0.09);
  border-color: rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: none;
  box-shadow: none;
}
.hero-section .hero-stats {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0;
  margin-top: 40px;
  -webkit-animation: fade-up 0.8s var(--transition) 0.32s both;
  animation: fade-up 0.8s var(--transition) 0.32s both;
}
.hero-section .hero-stats__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 3px;
  padding: 0 24px;
}
.hero-section .hero-stats__item:first-child {
  padding-left: 0;
}
.hero-section .hero-stats__item:last-child {
  padding-right: 0;
}
.hero-section .hero-stats__number {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1d1d1f;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero-section .hero-stats__label {
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.hero-section .hero-stats__divider {
  width: 1px;
  height: 32px;
  background: rgba(0, 0, 0, 0.1);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.hero-section .hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  z-index: 3;
}
.hero-section .hero-scroll__label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 600;
}
.hero-section .hero-scroll__line {
  width: 1px;
  height: 44px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.22)), to(transparent));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.22), transparent);
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-animation: scroll-line 1.8s ease-in-out infinite;
  animation: scroll-line 1.8s ease-in-out infinite;
}
@media screen and (max-width: 640px) {
  .hero-section .hero-scroll {
    display: none;
  }
}
.hero-section .hero-trust {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 44px;
  -webkit-animation: fade-up 0.8s var(--transition) 0.4s both;
  animation: fade-up 0.8s var(--transition) 0.4s both;
  /* Categorieën variant — items als pills */
}
.hero-section .hero-trust__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 7px;
  padding: 0 20px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  /* Categorieën */
}
.hero-section .hero-trust__item svg {
  width: 14px;
  height: 14px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.hero-section .hero-trust__item strong {
  color: rgba(0, 0, 0, 0.68);
  font-weight: 700;
}
.hero-section .hero-trust__item--rating svg {
  color: #ef7815;
}
.hero-section .hero-trust__item--check svg {
  color: #54b57d;
}
.hero-section .hero-trust__item--fast svg {
  color: #dd4290;
}
.hero-section .hero-trust__item--lock svg {
  color: rgba(0, 0, 0, 0.35);
}
.hero-section .hero-trust__item--singles svg {
  color: #dd4290;
}
.hero-section .hero-trust__item--etb svg {
  color: #54b57d;
}
.hero-section .hero-trust__item--boosters svg {
  color: #ef7815;
}
.hero-section .hero-trust__item--sealed svg {
  color: #6366f1;
}
.hero-section .hero-trust__sep {
  width: 1px;
  height: 14px;
  background: rgba(0, 0, 0, 0.1);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.hero-section .hero-trust--categories .hero-section .hero-trust__item {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 999px;
  padding: 5px 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
  gap: 6px;
}
.hero-section .hero-trust--categories .hero-section .hero-trust__sep {
  display: none;
}
.hero-section .hero-trust--categories {
  gap: 8px;
}

/* ================================================
   KEYFRAMES
   ================================================ */
/* Was ook een translateY(20px)-verschuiving — telt mee als CLS
   (indelingsverschuiving), ook al is het "maar" een animatie: Chrome meet
   de zichtbare verplaatsing, niet of die door transform komt. Alleen
   opacity behoudt het fade-in-effect zonder dat het element zichtbaar
   beweegt. */
@keyframes fade-up {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes scroll-line {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
  50% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
  51% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    opacity: 0;
  }
}
@keyframes scroll-line {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
  50% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
  51% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    opacity: 0;
  }
}
/* ================================================
   RESPONSIVE
   ================================================ */
@media screen and (max-width: 1100px) {
  .hero-section .hero-card--1 {
    width: 155px;
    left: 1%;
  }
  .hero-section .hero-card--2 {
    width: 140px;
    right: 1%;
  }
  .hero-section .hero-card--3 {
    width: 170px;
    left: 0;
  }
  .hero-section .hero-card--4 {
    width: 145px;
    right: 1%;
  }
}
@media screen and (max-width: 768px) {
  .hero-section {
    /* Kaarten kleiner + meer aan de randen */
  }
  .hero-section .hero-card--1 {
    width: 120px;
    top: 15%;
    left: -10px;
  }
  .hero-section .hero-card--2 {
    width: 110px;
    top: 13%;
    right: -10px;
  }
  .hero-section .hero-card--3 {
    width: 130px;
    bottom: 18%;
    left: -14px;
  }
  .hero-section .hero-card--4 {
    width: 115px;
    bottom: 16%;
    right: -10px;
  }
  .hero-section__content {
    /* Extra scrollruimte onderin zodat de hero-kaarten
       (die met de pagina meescrollen) langer in beeld blijven. */
    padding: 0px 0 260px;
    /* Kortere mobiele introtekst vervangt de lange versie, indien ingevuld */
  }
  .hero-section__content .hero-eyebrow {
    background: rgba(221, 66, 144, 0.16);
    border-color: rgba(221, 66, 144, 0.3);
  }
  .hero-section__content:has(.hero-text--mobile) .hero-text--desktop {
    display: none;
  }
  .hero-section__content .hero-text--mobile {
    display: block;
  }
  .hero-section__content h1 {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }
  .hero-section__content .hero-actions {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .hero-section__content .hero-actions .mk-button {
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .hero-section .hero-stats__item {
    padding: 0 16px;
  }
  .hero-section .hero-stats__number {
    font-size: 1.15rem;
  }
  .hero-section .hero-trust {
    margin-top: 32px;
  }
  .hero-section .hero-trust__sep {
    display: none;
  }
  .hero-section .hero-trust__item {
    padding: 4px 12px;
  }
}
@media screen and (max-width: 480px) {
  .hero-section .hero-card--3,
  .hero-section .hero-card--4 {
    display: none;
  }
  .hero-section__content {
    padding: 0px 0 40px;
  }
}
/* ================================================
   CALENDER SECTION — licht thema
   ================================================ */
.calander-section {
  padding: 40px 0;
  margin-bottom: 0px;
  position: relative;
  background: radial-gradient(ellipse 50% 60% at 90% 20%, rgba(221, 66, 144, 0.06) 0%, transparent 60%), radial-gradient(ellipse 40% 50% at 5% 80%, rgba(84, 181, 125, 0.05) 0%, transparent 55%);
}
.calander-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, rgba(221, 66, 144, 0.7)), color-stop(50%, #ef7815), color-stop(80%, rgba(84, 181, 125, 0.7)), to(transparent));
  background: linear-gradient(90deg, transparent 0%, rgba(221, 66, 144, 0.7) 20%, #ef7815 50%, rgba(84, 181, 125, 0.7) 80%, transparent 100%);
}
.calander-section h1, .calander-section h2, .calander-section h3, .calander-section h4, .calander-section h5 {
  color: #1d1d1f;
}
.calander-section h1::after, .calander-section h2::after, .calander-section h3::after, .calander-section h4::after, .calander-section h5::after {
  display: none;
}
.calander-section__inner {
  max-width: 800px;
  margin: auto;
  width: 90%;
}
.calander-section__inner__heading {
  text-align: center;
  margin-bottom: 24px;
}
.calander-section__inner__heading h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: #1d1d1f;
}
.calander-section__inner .beurs-loop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
}
.calander-section__inner__more {
  text-align: center;
  margin-top: 36px;
}

/* ================================================
   BEURS ITEM — lichte kaart
   ================================================ */
.beurs-item {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  position: relative;
  /* Niet hidden: het "Eerstvolgende beurs"-badge hangt bewust deels
     buiten de kaart (zie &__badge) en zou anders afgesneden worden. */
  overflow: visible;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  -webkit-transition: border-color 0.3s ease, -webkit-transform 0.3s var(--transition), -webkit-box-shadow 0.3s ease;
  transition: border-color 0.3s ease, -webkit-transform 0.3s var(--transition), -webkit-box-shadow 0.3s ease;
  transition: transform 0.3s var(--transition), box-shadow 0.3s ease, border-color 0.3s ease;
  transition: transform 0.3s var(--transition), box-shadow 0.3s ease, border-color 0.3s ease, -webkit-transform 0.3s var(--transition), -webkit-box-shadow 0.3s ease;
  /* Chips */
}
.beurs-item:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.12);
}
.beurs-item:hover::before {
  opacity: 1;
}
.beurs-item.active {
  border-color: rgba(221, 66, 144, 0.35);
  background: linear-gradient(160deg, rgba(221, 66, 144, 0.05), #fff 55%);
  -webkit-box-shadow: 0 8px 28px rgba(221, 66, 144, 0.16);
  box-shadow: 0 8px 28px rgba(221, 66, 144, 0.16);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}
.beurs-item.active::before {
  opacity: 1;
}
.beurs-item__badge {
  position: absolute;
  top: -12px;
  right: 24px;
  z-index: 2;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: -webkit-gradient(linear, left top, right top, from(#dd4290), to(#ef7815));
  background: linear-gradient(90deg, #dd4290, #ef7815);
  padding: 4px 10px;
  border-radius: 999px;
  -webkit-box-shadow: 0 4px 10px rgba(221, 66, 144, 0.25);
  box-shadow: 0 4px 10px rgba(221, 66, 144, 0.25);
  white-space: nowrap;
  /* Subtiel: lichter dan de rest van het badge-label, geen eigen accentkleur. */
}
.beurs-item__badge-countdown {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}
.beurs-item__badge-countdown::before {
  content: "·";
  margin-right: 6px;
}
.beurs-item.today {
  border-color: rgba(84, 181, 125, 0.25);
  background: rgba(84, 181, 125, 0.03);
}
.beurs-item.today::before {
  background: #54b57d;
  opacity: 1;
}
.beurs-item.today .beurs-item__date {
  background: rgba(84, 181, 125, 0.1);
  color: #419564;
  border-color: rgba(84, 181, 125, 0.2);
}
.beurs-item h3 {
  font-size: 0.9rem;
  color: #1d1d1f;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  line-height: 1.2;
}
.beurs-item h3::after {
  display: none;
}
.beurs-item__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 6px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.beurs-item__date {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: #dd4290;
  background: rgba(221, 66, 144, 0.08);
  border: 1px solid rgba(221, 66, 144, 0.15);
  padding: 4px 10px;
  border-radius: 999px;
}
.beurs-item__location {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 4px 10px;
  border-radius: 999px;
}
.beurs-item__time {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: #449c69;
  background: rgba(84, 181, 125, 0.09);
  border: 1px solid rgba(84, 181, 125, 0.15);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ================================================
   CALENDER GRID SECTION — licht thema
   ================================================ */
.calander-grid-section {
  padding: 80px 0;
  background: radial-gradient(ellipse 45% 50% at 10% 30%, rgba(239, 120, 21, 0.05) 0%, transparent 55%), radial-gradient(ellipse 40% 45% at 85% 70%, rgba(221, 66, 144, 0.05) 0%, transparent 55%);
}
.calander-grid-section h1, .calander-grid-section h2, .calander-grid-section h3, .calander-grid-section h4, .calander-grid-section h5 {
  color: #1d1d1f;
}
.calander-grid-section h1::after, .calander-grid-section h2::after, .calander-grid-section h3::after, .calander-grid-section h4::after, .calander-grid-section h5::after {
  display: none;
}
.calander-grid-section__inner {
  max-width: 1400px;
  margin: auto;
  width: 90%;
}
.calander-grid-section__inner__heading {
  text-align: center;
  margin-bottom: 24px;
}
.calander-grid-section__inner__heading h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1d1d1f;
}
.calander-grid-section__inner .beurs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.calander-grid-section__inner .beurs-grid__item {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  position: relative;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  -webkit-transition: -webkit-transform 0.3s var(--transition), -webkit-box-shadow 0.3s ease;
  transition: -webkit-transform 0.3s var(--transition), -webkit-box-shadow 0.3s ease;
  transition: transform 0.3s var(--transition), box-shadow 0.3s ease;
  transition: transform 0.3s var(--transition), box-shadow 0.3s ease, -webkit-transform 0.3s var(--transition), -webkit-box-shadow 0.3s ease;
}
.calander-grid-section__inner .beurs-grid__item:hover {
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  -webkit-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.09);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.09);
}
.calander-grid-section__inner .beurs-grid__item:hover::before {
  opacity: 1;
}
.calander-grid-section__inner .beurs-grid__item:target {
  border-color: rgba(221, 66, 144, 0.4);
  -webkit-box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.18), 0 12px 32px rgba(0, 0, 0, 0.09);
  box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.18), 0 12px 32px rgba(0, 0, 0, 0.09);
}
.calander-grid-section__inner .beurs-grid__item:target::before {
  opacity: 1;
}
.calander-grid-section__inner .beurs-grid__item.today {
  border-color: rgba(84, 181, 125, 0.25);
  background: rgba(84, 181, 125, 0.03);
}
.calander-grid-section__inner .beurs-grid__item.today::before {
  opacity: 1;
  background: #54b57d;
}
.calander-grid-section__inner .beurs-grid__item.active {
  border-color: rgba(221, 66, 144, 0.3);
  -webkit-box-shadow: 0 4px 20px rgba(221, 66, 144, 0.12);
  box-shadow: 0 4px 20px rgba(221, 66, 144, 0.12);
}
.calander-grid-section__inner .beurs-grid__item.active::before {
  opacity: 1;
}
.calander-grid-section__inner .beurs-grid__item__badge {
  position: absolute;
  top: -12px;
  right: 24px;
  z-index: 2;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: -webkit-gradient(linear, left top, right top, from(#dd4290), to(#ef7815));
  background: linear-gradient(90deg, #dd4290, #ef7815);
  padding: 4px 10px;
  border-radius: 999px;
  -webkit-box-shadow: 0 4px 10px rgba(221, 66, 144, 0.25);
  box-shadow: 0 4px 10px rgba(221, 66, 144, 0.25);
  white-space: nowrap;
}
.calander-grid-section__inner .beurs-grid__item__badge-countdown {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}
.calander-grid-section__inner .beurs-grid__item__badge-countdown::before {
  content: "·";
  margin-right: 6px;
}
.calander-grid-section__inner .beurs-grid__item h3 {
  font-size: 0.82rem;
  color: #1d1d1f;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.calander-grid-section__inner .beurs-grid__item h3::after {
  display: none;
}
.calander-grid-section__inner .beurs-grid__item__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 5px;
}
.calander-grid-section__inner .beurs-grid__item__date {
  font-size: 10px;
  font-weight: 600;
  color: #dd4290;
  background: rgba(221, 66, 144, 0.08);
  border: 1px solid rgba(221, 66, 144, 0.15);
  padding: 3px 8px;
  border-radius: 999px;
}
.calander-grid-section__inner .beurs-grid__item__location {
  font-size: 10px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 3px 8px;
  border-radius: 999px;
}
.calander-grid-section__inner .beurs-grid__item__time {
  font-size: 10px;
  font-weight: 600;
  color: #449c69;
  background: rgba(84, 181, 125, 0.09);
  border: 1px solid rgba(84, 181, 125, 0.15);
  padding: 3px 8px;
  border-radius: 999px;
}
.calander-grid-section__inner .beurs-grid__empty {
  grid-column: 1/-1;
  text-align: center;
  color: rgba(0, 0, 0, 0.55);
  font-style: italic;
  padding: 40px 0;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media screen and (max-width: 768px) {
  .calander-grid-section__inner .beurs-grid {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 640px) {
  .calander-section {
    padding: 60px 0;
  }
  .calander-section__inner__heading h2 {
    margin-bottom: 24px !important;
  }
  .calander-section .beurs-item {
    padding: 14px 16px;
  }
}
/* ================================================
   BEURS-INFOPOPUP — bottom-sheet op mobiel, gecentreerde
   modal op desktop (zie bottom-sheet.js). Zelfde patroon
   als .mk-card-detail-modal in de kaart-zoeker.
   ================================================ */
.beurs-info-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 16px;
  /* Shimmer-placeholder terwijl de plattegrond nog laadt — voorkomt dat
     de popup even helemaal leeg oogt bij een trage verbinding. Hergebruikt
     de mk-shimmer keyframe uit _kaart-zoeker.scss (globaal beschikbaar,
     alle SCSS-bestanden compileren samen in style-main.scss). */
}
.beurs-info-modal[hidden] {
  display: none;
}
.beurs-info-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-transition: opacity 0.28s ease;
  transition: opacity 0.28s ease;
}
.beurs-info-modal:not(.is-open) .beurs-info-modal__backdrop, .beurs-info-modal:not(.is-open) .beurs-info-modal__panel {
  opacity: 0;
}
.beurs-info-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 24px;
  -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  -webkit-animation: mk-modal-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation: mk-modal-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.beurs-info-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.65);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}
.beurs-info-modal__close:hover {
  background: rgba(0, 0, 0, 0.12);
}
.beurs-info-modal__map-wrap {
  position: relative;
  background: #f4f4f8;
  border-radius: 24px 24px 0 0;
  min-height: 220px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
}
.beurs-info-modal__map {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  -o-object-fit: contain;
  object-fit: contain;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}
.beurs-info-modal__map[hidden] {
  display: none;
}
.beurs-info-modal__map-skeleton {
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left top, right top, color-stop(25%, #ececf2), color-stop(37%, #f6f6fa), color-stop(63%, #ececf2));
  background: linear-gradient(90deg, #ececf2 25%, #f6f6fa 37%, #ececf2 63%);
  background-size: 400% 100%;
  -webkit-animation: mk-shimmer 1.4s ease infinite;
  animation: mk-shimmer 1.4s ease infinite;
}
.beurs-info-modal__map-skeleton[hidden] {
  display: none;
}
.beurs-info-modal__map-empty {
  margin: 0;
  padding: 40px 20px;
  text-align: center;
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(0, 0, 0, 0.55);
}
.beurs-info-modal__map-empty[hidden] {
  display: none;
}
.beurs-info-modal__body {
  padding: 28px 32px 32px;
}
.beurs-info-modal__title {
  margin: 0 0 14px;
  font-size: 1.35rem;
  font-weight: 800;
  color: #1d1d1f;
}
.beurs-info-modal__title::after {
  display: none;
}
.beurs-info-modal__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.beurs-info-modal__date, .beurs-info-modal__time {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
}
.beurs-info-modal__date[hidden], .beurs-info-modal__time[hidden] {
  display: none;
}
.beurs-info-modal__date {
  color: #dd4290;
  background: rgba(221, 66, 144, 0.08);
  border: 1px solid rgba(221, 66, 144, 0.15);
}
.beurs-info-modal__time {
  color: #449c69;
  background: rgba(84, 181, 125, 0.09);
  border: 1px solid rgba(84, 181, 125, 0.15);
}
.beurs-info-modal__address {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.65);
}
.beurs-info-modal__address[hidden] {
  display: none;
}
.beurs-info-modal__info {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.65);
  white-space: pre-line;
}
.beurs-info-modal__info[hidden] {
  display: none;
}
.beurs-info-modal__cta {
  margin-top: 26px;
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 15px 26px;
}
.beurs-info-modal__cta[hidden] {
  display: none;
}
.beurs-info-modal__secondary-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.beurs-info-modal__route, .beurs-info-modal__share {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 7px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
  background: #fff;
  color: rgba(0, 0, 0, 0.65);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: border-color 0.15s ease, background 0.15s ease;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.beurs-info-modal__route:hover, .beurs-info-modal__share:hover {
  border-color: rgba(221, 66, 144, 0.3);
  background: rgba(221, 66, 144, 0.04);
}
.beurs-info-modal__route[hidden], .beurs-info-modal__share[hidden] {
  display: none;
}
.beurs-info-modal__share-copied {
  display: none;
}
.beurs-info-modal__share.is-copied {
  border-color: rgba(221, 66, 144, 0.35);
  color: #dd4290;
}
.beurs-info-modal__share.is-copied .beurs-info-modal__share-icon,
.beurs-info-modal__share.is-copied .beurs-info-modal__share-label {
  display: none;
}
.beurs-info-modal__share.is-copied .beurs-info-modal__share-copied {
  display: inline;
}

/* Desktop: 2 kolommen (plattegrond links, gegevens rechts) i.p.v. de
   verticale stapeling — voorkomt een lang smal popup met een grote
   afbeelding boven een klein tekstblokje. Onder de 769px (waar de
   mk-bottom-sheet-mobielvariant het paneel toch al naar een sheet
   onderin verandert) blijft het gewoon gestapeld. */
@media screen and (min-width: 769px) {
  .beurs-info-modal__panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
  .beurs-info-modal__map-wrap {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45%;
    flex: 0 0 45%;
    border-radius: 24px 0 0 24px;
  }
  .beurs-info-modal__map {
    height: 100%;
    max-height: none;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .beurs-info-modal__body {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
  }
}
/* Uitvergroten van de plattegrond gebruikt nu de gedeelde
   .mk-image-lightbox (components/_image-lightbox.scss) i.p.v. een eigen
   losse lightbox-stijl hier. */
/* ================================================
   SETS OVERZICHT — tabbladen per era
   ================================================ */
.sets-overview {
  padding: 40px 0;
  position: relative;
  margin-bottom: 0px;
  /* Gradient scheidingslijn onderaan — zelfde als hero-section::after */
  /* Koptekst */
  /* CTA-knop op de homepage (compacte weergave) — link naar het
     volledige sets-overzicht op een aparte pagina. */
  /* Gradient tekst in koptekst */
  /* ================================================
     TABS
     ================================================ */
  /* ================================================
     TAB PANELS
     ================================================ */
}
.sets-overview::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, rgba(221, 66, 144, 0.7)), color-stop(50%, #ef7815), color-stop(80%, rgba(84, 181, 125, 0.7)), to(transparent));
  background: linear-gradient(90deg, transparent 0%, rgba(221, 66, 144, 0.7) 20%, #ef7815 50%, rgba(84, 181, 125, 0.7) 80%, transparent 100%);
}
.sets-overview__inner {
  max-width: 1440px;
  margin: auto;
  width: 92%;
}
.sets-overview__heading {
  text-align: center;
  margin-bottom: 40px;
}
.sets-overview__heading h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  margin-bottom: 6px;
}
.sets-overview__heading h2::after {
  display: none;
}
.sets-overview__subtitle {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
}
.sets-overview__intro {
  display: block;
  max-width: 680px;
  width: 100%;
  margin: 12px auto 0;
  color: rgba(0, 0, 0, 0.6);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
}
.sets-overview__brand-logo {
  display: block;
  margin: 0 auto 12px;
  height: clamp(48px, 8vw, 80px);
  width: auto;
  max-width: 360px;
  -o-object-fit: contain;
  object-fit: contain;
}
.sets-overview__cta-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 4px;
}
.sets-overview__gradient {
  background: linear-gradient(135deg, #dd4290 0%, #ef7815 55%, #54b57d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sets-overview .sets-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.sets-overview .sets-tabs::-webkit-scrollbar {
  display: none;
}
.sets-overview .sets-tab {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 160px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 3px;
  padding: 14px 16px 15px 20px;
  border-radius: 14px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: left;
  -webkit-transition: border-color 0.2s ease, background 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, background 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, -webkit-box-shadow 0.2s ease;
  /* Linker accent bar — era kleur */
  /* Shimmer sweep — zelfde als mk-button */
  /* Hover (inactief) */
  /* Actief tabblad */
}
.sets-overview .sets-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--era-color, #888);
  border-radius: 14px 0 0 14px;
  -webkit-transition: width 0.2s ease;
  transition: width 0.2s ease;
}
.sets-overview .sets-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  -webkit-transform: translateX(-100%) skewX(-15deg);
  transform: translateX(-100%) skewX(-15deg);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  pointer-events: none;
}
.sets-overview .sets-tab__logo {
  width: 100%;
  height: 28px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: left center;
  object-position: left center;
  display: block;
  margin-bottom: 6px;
  -webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
}
.sets-overview .sets-tab__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}
.sets-overview .sets-tab__name {
  font-size: 13px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.6);
  letter-spacing: -0.01em;
  line-height: 1.1;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.sets-overview .sets-tab__current {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--era-color, #888);
  background: color-mix(in srgb, var(--era-color, #888) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--era-color, #888) 25%, transparent);
  padding: 1px 6px;
  border-radius: 999px;
  -webkit-transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sets-overview .sets-tab__years {
  font-size: 10px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.sets-overview .sets-tab__meta {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.sets-overview .sets-tab__upcoming-pill {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sets-overview .sets-tab:hover:not(.is-active) {
  border-color: var(--era-color, #888);
  background: color-mix(in srgb, var(--era-color, #888) 4%, #fff);
  -webkit-box-shadow: 0 2px 12px color-mix(in srgb, var(--era-color, #888) 15%, transparent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--era-color, #888) 15%, transparent);
}
.sets-overview .sets-tab:hover:not(.is-active)::before {
  width: 5px;
}
.sets-overview .sets-tab:hover:not(.is-active)::after {
  -webkit-transform: translateX(220%) skewX(-15deg);
  transform: translateX(220%) skewX(-15deg);
}
.sets-overview .sets-tab:hover:not(.is-active) .sets-tab__name {
  color: rgba(0, 0, 0, 0.8);
}
.sets-overview .sets-tab.is-active {
  background: linear-gradient(135deg, var(--era-color, #888), color-mix(in srgb, var(--era-color, #888) 75%, #000));
  border-color: transparent;
  -webkit-box-shadow: 0 6px 24px color-mix(in srgb, var(--era-color, #888) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--era-color, #888) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  /* Shimmer op actief bij hover */
  /* Left bar verbergen — hele tab is al gekleurd */
}
.sets-overview .sets-tab.is-active:hover::after {
  -webkit-transform: translateX(220%) skewX(-15deg);
  transform: translateX(220%) skewX(-15deg);
}
.sets-overview .sets-tab.is-active::before {
  opacity: 0;
}
.sets-overview .sets-tab.is-active .sets-tab__name {
  color: #fff;
}
.sets-overview .sets-tab.is-active .sets-tab__years {
  color: rgba(255, 255, 255, 0.6);
}
.sets-overview .sets-tab.is-active .sets-tab__meta {
  color: rgba(255, 255, 255, 0.6);
}
.sets-overview .sets-tab.is-active .sets-tab__current {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.sets-overview .sets-tab.is-active .sets-tab__upcoming-pill {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}
.sets-overview .sets-panel {
  display: none;
}
.sets-overview .sets-panel.is-active {
  display: block;
  -webkit-animation: sets-tab-in 0.25s ease both;
  animation: sets-tab-in 0.25s ease both;
}
.sets-overview .sets-panel__empty {
  color: rgba(0, 0, 0, 0.55);
  font-style: italic;
  padding: 20px 0;
  font-size: 0.9rem;
}
.sets-overview .sets-era__scroll {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 4px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}
.sets-overview .sets-era__scroll::-webkit-scrollbar {
  height: 3px;
}
.sets-overview .sets-era__scroll::-webkit-scrollbar-track {
  background: transparent;
}
.sets-overview .sets-era__scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 99px;
}

/* ================================================
   SET KAARTEN — top-level (niet genest onder .sets-overview), want dit
   component wordt ook buiten de sets-overview-context hergebruikt (bv.
   taxonomy-pokemon_era.php's sets-grid). Stond hiervoor per ongeluk
   genest, waardoor de styling daar niet meekwam.
   ================================================ */
.set-card {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 158px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  -webkit-transition: -webkit-transform 0.22s ease, -webkit-box-shadow 0.22s ease;
  transition: -webkit-transform 0.22s ease, -webkit-box-shadow 0.22s ease;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  transition: transform 0.22s ease, box-shadow 0.22s ease, -webkit-transform 0.22s ease, -webkit-box-shadow 0.22s ease;
  /* Is sinds Fase 4 een echte <a href> i.p.v. een div — hier expliciet
     de linkkleur resetten zodat die niet doorschemert in kindtekst
     die zelf geen eigen kleur zet. */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  color: inherit;
  /* Shimmer sweep — zelfde stijl als buttons */
  /* === MET LOGO === */
  /* === ZONDER LOGO — donker gradient === */
  /* Visual wrapper */
  /* Aankomende sets — uitlichten, niet dimmen */
  /* Upcoming badge — brede balk onderaan */
}
.set-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  -webkit-transform: translateX(-100%) skewX(-15deg);
  transform: translateX(-100%) skewX(-15deg);
  -webkit-transition: -webkit-transform 0.55s ease;
  transition: -webkit-transform 0.55s ease;
  transition: transform 0.55s ease;
  transition: transform 0.55s ease, -webkit-transform 0.55s ease;
  pointer-events: none;
  z-index: 3;
}
.set-card:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}
.set-card:hover::after {
  -webkit-transform: translateX(220%) skewX(-15deg);
  transform: translateX(220%) skewX(-15deg);
}
.set-card.has-logo {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}
.set-card.has-logo:hover {
  -webkit-box-shadow: 0 3px 12px color-mix(in srgb, var(--era-color, #888) 10%, rgba(0, 0, 0, 0.05));
  box-shadow: 0 3px 12px color-mix(in srgb, var(--era-color, #888) 10%, rgba(0, 0, 0, 0.05));
}
.set-card.has-logo .set-card__visual {
  background: #f8f8f8;
}
.set-card.has-logo .set-card__name {
  padding: 7px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 1.3;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
}
.set-card.has-logo .set-card__date {
  padding: 0 10px 8px;
  font-size: 8px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  text-align: center;
  background: #fff;
  letter-spacing: 0.03em;
}
.set-card.no-logo {
  border: none;
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.set-card.no-logo:hover {
  -webkit-box-shadow: 0 4px 16px color-mix(in srgb, var(--era-color, #888) 14%, rgba(0, 0, 0, 0.08)), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--era-color, #888) 14%, rgba(0, 0, 0, 0.08)), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.set-card.no-logo .set-card__visual {
  /* Diagonale textuur + donker era-kleur gradient */
  background: repeating-linear-gradient(-48deg, transparent 0px, transparent 9px, rgba(255, 255, 255, 0.028) 9px, rgba(255, 255, 255, 0.028) 11px), linear-gradient(150deg, color-mix(in srgb, var(--era-color, #444) 80%, #04040e) 0%, color-mix(in srgb, var(--era-color, #444) 50%, #04040e) 100%);
}
.set-card.no-logo .set-card__name {
  padding: 7px 10px 4px;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: center;
  line-height: 1.3;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: color-mix(in srgb, var(--era-color, #444) 65%, #04040e);
}
.set-card.no-logo .set-card__date {
  padding: 0 10px 8px;
  font-size: 8px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.28);
  text-align: center;
  background: color-mix(in srgb, var(--era-color, #444) 65%, #04040e);
  letter-spacing: 0.03em;
}
.set-card__visual {
  width: 100%;
  height: 110px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 12px;
  position: relative;
}
.set-card__logo {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}
.set-card__fallback-name {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: center;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 1;
}
.set-card.is-upcoming {
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--era-color, #888) 55%, transparent), 0 4px 18px color-mix(in srgb, var(--era-color, #888) 14%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--era-color, #888) 55%, transparent), 0 4px 18px color-mix(in srgb, var(--era-color, #888) 14%, transparent);
}
.set-card.is-upcoming:hover {
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--era-color, #888) 65%, transparent), 0 4px 16px color-mix(in srgb, var(--era-color, #888) 16%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--era-color, #888) 65%, transparent), 0 4px 16px color-mix(in srgb, var(--era-color, #888) 16%, transparent);
}
.set-card__upcoming-badge {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 7px 8px 9px;
  text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--era-color, #6366f1) 82%, #000) 0%, color-mix(in srgb, var(--era-color, #6366f1) 58%, #000) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  -webkit-animation: upcoming-glow 2.4s ease-in-out infinite;
  animation: upcoming-glow 2.4s ease-in-out infinite;
}
.set-card__upcoming-badge::before {
  content: "BINNENKORT";
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  opacity: 0.65;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.set-card.is-clickable {
  cursor: pointer;
}

.set-card__cta-hint {
  display: block;
  width: 100%;
  /* .set-card is een flex-column — hierdoor plakt de hint altijd
     onderaan, ook als een buurkaart (bv. met een upcoming-badge)
     de rij hoger maakt en deze kaart wordt uitgerekt. */
  margin-top: auto;
  padding: 5px 8px 7px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(221, 66, 144, 0.7);
  background: rgba(221, 66, 144, 0.07);
  opacity: 0;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.set-card.is-clickable:hover .set-card__cta-hint {
  opacity: 1;
}

@media screen and (max-width: 640px) {
  .set-card__cta-hint {
    opacity: 1;
  }
}
/* ================================================
   SPOTLIGHT — nieuwste set + binnenkort
   ================================================ */
.sets-spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
  /* Tablet: naast elkaar kan nog, maar logo kleiner */
  /* Tablet smal: kaarten stapelen */
  /* Mobile: kaartinterne layout verticaal */
}
.sets-spotlight__card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  padding: 22px 28px;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid rgba(0, 0, 0, 0.07);
  background: #fff;
  -webkit-transition: -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  transition: -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  transition: box-shadow 0.2s ease, transform 0.2s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  cursor: pointer;
  /* Is sinds Fase 4 een echte <a href> i.p.v. een div. */
  color: inherit;
  /* Gekleurde linkerbalk */
  /* Upcoming card: era-kleur achtergrond */
}
.sets-spotlight__card:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-box-shadow: 0 4px 16px color-mix(in srgb, var(--era-color, #888) 14%, rgba(0, 0, 0, 0.05));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--era-color, #888) 14%, rgba(0, 0, 0, 0.05));
}
.sets-spotlight__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--era-color, #888);
  border-radius: 16px 0 0 16px;
}
.sets-spotlight__card--upcoming {
  background: linear-gradient(135deg, color-mix(in srgb, var(--era-color, #6366f1) 88%, #000) 0%, color-mix(in srgb, var(--era-color, #6366f1) 65%, #000) 100%);
  border-color: transparent;
}
.sets-spotlight__card--upcoming::before {
  display: none;
}
.sets-spotlight__card--upcoming .sets-spotlight__label {
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
}
.sets-spotlight__card--upcoming .sets-spotlight__name {
  color: #fff;
}
.sets-spotlight__card--upcoming .sets-spotlight__meta {
  color: rgba(255, 255, 255, 0.7);
}
.sets-spotlight__card--upcoming .sets-spotlight__description {
  color: rgba(255, 255, 255, 0.62);
}
.sets-spotlight__label {
  display: inline-block;
  -ms-flex-item-align: start;
  align-self: flex-start;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--era-color, #888);
  background: color-mix(in srgb, var(--era-color, #888) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--era-color, #888) 22%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 5px;
}
.sets-spotlight__logo {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 160px;
  height: 100px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
  -webkit-filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.15));
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.15));
}
.sets-spotlight__info {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}
.sets-spotlight__name {
  font-size: 18px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.85);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sets-spotlight__meta {
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
}
.sets-spotlight__description {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sets-spotlight__countdown {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .sets-spotlight {
    gap: 10px;
  }
  .sets-spotlight__logo {
    width: 120px;
    height: 80px;
  }
  .sets-spotlight__name {
    font-size: 15px;
  }
}
@media (max-width: 680px) {
  .sets-spotlight {
    grid-template-columns: 1fr;
    position: relative;
  }
  .sets-spotlight__card {
    padding: 10px 15px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    gap: 10px;
  }
  .sets-spotlight__description {
    display: none;
  }
  .sets-spotlight__countdown {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .sets-spotlight__logo {
    height: 50px;
  }
}
@media (max-width: 480px) {
  .sets-spotlight__card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
  }
  .sets-spotlight__logo {
    width: auto;
    max-width: 140px;
    height: 70px;
    -ms-flex-item-align: center;
    align-self: center;
  }
  .sets-spotlight__info {
    width: 100%;
  }
  .sets-spotlight__name {
    font-size: 16px;
    white-space: normal;
  }
  .sets-spotlight__countdown {
    -ms-flex-item-align: start;
    align-self: flex-start;
    font-size: 11px;
    padding: 4px 10px;
  }
}

/* ================================================
   ANIMATIE
   ================================================ */
@-webkit-keyframes sets-tab-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes sets-tab-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes upcoming-glow {
  0%, 100% {
    -webkit-box-shadow: 0 -4px 10px color-mix(in srgb, var(--era-color, #6366f1) 15%, transparent);
    box-shadow: 0 -4px 10px color-mix(in srgb, var(--era-color, #6366f1) 15%, transparent);
  }
  50% {
    -webkit-box-shadow: 0 -4px 18px color-mix(in srgb, var(--era-color, #6366f1) 28%, transparent);
    box-shadow: 0 -4px 18px color-mix(in srgb, var(--era-color, #6366f1) 28%, transparent);
  }
}
@keyframes upcoming-glow {
  0%, 100% {
    -webkit-box-shadow: 0 -4px 10px color-mix(in srgb, var(--era-color, #6366f1) 15%, transparent);
    box-shadow: 0 -4px 10px color-mix(in srgb, var(--era-color, #6366f1) 15%, transparent);
  }
  50% {
    -webkit-box-shadow: 0 -4px 18px color-mix(in srgb, var(--era-color, #6366f1) 28%, transparent);
    box-shadow: 0 -4px 18px color-mix(in srgb, var(--era-color, #6366f1) 28%, transparent);
  }
}
/* ================================================
   SET DETAIL MODAL
   ================================================ */
.sets-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 20px;
  margin: 0px !important;
  /* Logo area — era-kleur als subtiel verloop */
  /* Body */
  /* Sinds Fase 4: twee acties i.p.v. één — de eigen setpagina (nu het
     hoofddoel, met alle kaarten/statistieken/FAQ) en de externe
     Cardmarket-link (secundair, vandaar de ghost-stijl). */
}
.sets-modal[hidden] {
  display: none;
}
.sets-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sets-modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: rgba(8, 8, 18, 0.94);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  -webkit-box-shadow: var(--glass-shadow);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  -webkit-animation: modal-in 0.22s var(--transition);
  animation: modal-in 0.22s var(--transition);
}
.sets-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: background 0.2s ease, color 0.2s ease;
  transition: background 0.2s ease, color 0.2s ease;
  z-index: 2;
}
.sets-modal__close:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}
.sets-modal__logo-wrap {
  padding: 44px 40px 28px;
  text-align: center;
  min-height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--era-color, #6366f1) 18%, transparent) 0%, transparent 70%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sets-modal__logo {
  max-height: 80px;
  max-width: 260px;
  width: auto;
  margin: 0 auto;
  -o-object-fit: contain;
  object-fit: contain;
}
.sets-modal__body {
  padding: 24px 30px 32px;
}
.sets-modal__era-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: color-mix(in srgb, var(--era-color, #6366f1) 18%, transparent);
  color: var(--era-color, #6366f1);
  border: 1px solid color-mix(in srgb, var(--era-color, #6366f1) 35%, transparent);
  margin-bottom: 10px;
}
.sets-modal__era-badge[hidden] {
  display: none;
}
.sets-modal__name {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 18px;
  display: block;
}
.sets-modal__name::after {
  display: none;
}
.sets-modal__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.sets-modal__chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 5px 12px;
  border-radius: 999px;
}
.sets-modal__chip svg {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  opacity: 0.6;
}
.sets-modal__chip[hidden] {
  display: none;
}
.sets-modal__description {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 20px;
}
.sets-modal__description[hidden] {
  display: none;
}
.sets-modal__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
}
.sets-modal__cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-md);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  -webkit-transition: background 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: background 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  position: static;
  width: 100%;
}
.sets-modal__cta::before {
  content: none;
}
.sets-modal__cta[hidden] {
  display: none;
}
.sets-modal__cta svg {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.sets-modal__cta--page {
  background: linear-gradient(135deg, #dd4290, #c82477);
  -webkit-box-shadow: 0 4px 20px rgba(221, 66, 144, 0.35);
  box-shadow: 0 4px 20px rgba(221, 66, 144, 0.35);
}
.sets-modal__cta--page:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-box-shadow: 0 6px 28px rgba(221, 66, 144, 0.5);
  box-shadow: 0 6px 28px rgba(221, 66, 144, 0.5);
  color: #fff;
}
.sets-modal__cta--external {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.75);
}
.sets-modal__cta--external:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}

@-webkit-keyframes modal-in {
  from {
    opacity: 0;
    -webkit-transform: scale(0.96) translateY(12px);
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
  }
}

@keyframes modal-in {
  from {
    opacity: 0;
    -webkit-transform: scale(0.96) translateY(12px);
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
  }
}
/* ================================================
   RESPONSIVE
   ================================================ */
@media screen and (max-width: 1100px) {
  .sets-overview .sets-tab {
    min-width: 150px;
    padding: 12px 14px 13px 18px;
  }
}
@media screen and (max-width: 768px) {
  .sets-overview {
    padding: 60px 0;
  }
  .sets-overview__inner {
    width: 95%;
  }
  .sets-overview .sets-tab {
    min-width: 180px;
  }
  .sets-overview .sets-tab__name {
    font-size: 12px;
  }
  .sets-overview .set-card {
    width: 180px;
  }
  .sets-overview .set-card__visual {
    height: 94px;
  }
  .sets-overview .set-card__fallback-name {
    font-size: 10px;
  }
}
@media screen and (max-width: 480px) {
  .sets-overview {
    padding: 48px 0;
  }
  .sets-overview .set-card {
    width: 150px;
  }
}
/* #main-content heeft site-breed `overflow: hidden` (_theme.scss) — dat
   breekt position: sticky voor alles erbinnen (de browser kan een sticky
   element niet "loslaten" van een voorouder die overflow clipt). Alleen
   op de juridische-pagina-template (met de sticky inhoudsopgave) hoeft
   dat niet, dus specifiek daar weer op visible zetten. */
.page-template-template-juridische-pagina-php #main-content {
  overflow: visible;
}

/* ================================================
   SET DETAIL — losse SEO-pagina per set (/sets/<slug>/)
   ================================================ */
.set-detail {
  padding: 0px 0 80px;
  position: relative;
  /* Zachte iriserende achtergrond — zelfde formule als de homepage-hero
     (_hero.scss), zodat de setpagina niet plat wit/grijs aanvoelt maar
     in dezelfde stijl als de rest van de site. Valt achter de header
     (die zijn eigen donkere gradient heeft) en achter alle kaarten. */
  background: radial-gradient(ellipse 55% 45% at 8% 15%, rgba(221, 66, 144, 0.09) 0%, transparent 60%), radial-gradient(ellipse 45% 55% at 92% 60%, rgba(84, 181, 125, 0.08) 0%, transparent 60%), radial-gradient(ellipse 35% 40% at 75% 95%, rgba(239, 120, 21, 0.06) 0%, transparent 55%), linear-gradient(160deg, #fafafa 0%, #f2f2f7 100%);
  /* Gradient scheidingslijn onderaan — zelfde signature als de
     sets-overview-sectie, zodat de overgang naar de footer niet
     abrupt aanvoelt. */
  /* ---- full-bleed hero-header ----
     Breekt uit de 1440px-container tot volledige viewport-breedte.
     Zelfde lichte, iriserende achtergrond-taal als de homepage-hero
     (_hero.scss) — de era-kleur wordt hier alleen als accent gebruikt
     (badge, gradient-titel, gloed), niet als volledige achtergrondvulling.
     Begint bovenaan de pagina, dus valt achter de zwevende glass-header —
     zelfde overlay-principe als de homepage-hero. */
  /* Kaartafbeelding op de losse kaart-detail-pagina — een kaart is
     staand (2.5:3.5), i.t.t. de brede setlogo's, dus een max-height
     zodat 'm niet overdreven lang wordt bij de vaste breedte hierboven. */
  /* Zelfde opbouw als .hero-eyebrow op de homepage: kleine gekleurde
     stip + pill, alleen hier op basis van de era-kleur i.p.v. de vaste
     merkkleur, zodat elke set toch zijn eigen accent houdt. */
  /* Gradient-titel — zelfde techniek als span.gradient-text in de
     homepage-hero (_hero.scss), maar met de era-kleur als eerste stop
     i.p.v. een vaste kleur, zodat de titel per set net iets anders
     oogt terwijl de merk-gradient herkenbaar blijft. Op een inline
     <span> toegepast i.p.v. rechtstreeks op de h1 — rechtstreeks op
     een block-level element gaf in Chrome een renderfout waarbij
     losse letters (bv. de "g") deels wegvielen. */
  /* USP-koppeling met de homepage: dezelfde "live data"-belofte als de
     verkoop-sidebar, hier teruggekoppeld op de setpagina zelf. */
  /* ---- juridische/tekstzware pagina's (privacyverklaring, voorwaarden) ----
     Twee kolommen: links een vaste (sticky) inhoudsopgave die
     automatisch wordt opgebouwd uit de h2/h3-koppen in de content
     (zie template-juridische-pagina.php), rechts de vrije
     the_content()-opmaak vanuit de WordPress-editor. */
  /* Zelfde kaart-taal als .mk-card-results__sidebar-inner (kaart-zoeker):
     wit vlak, dunne rand, zachte schaduw, afgeronde hoeken. */
  /* ---- statistieken ---- */
  /* "Duurste kaart"-tegel: mini-kaart met afbeelding i.p.v. alleen een
     getal — en klikbaar, opent dezelfde kaart-detail modal als de grid. */
  /* Zeldzaamheid-tegel: gekleurde pill-badges i.p.v. een kaal lijstje —
     de "gewone" rarities (Common t/m Rare Holo) worden al uitgefilterd
     door mk_tcgdex_compute_set_stats(). */
  /* "Prijzen laatst bijgewerkt op ..."-indicator — visuele tegenhanger
     van de dateModified in de structured data hieronder in de template. */
  /* ---- top-10 duurste kaarten (horizontale slider) ---- */
  /* ---- toolbar (filters + weergave-toggle) ---- */
  /* Meerdere filters naast elkaar (naam, zeldzaamheid, energie-type,
     illustrator, sortering) — wrapt netjes op smallere schermen. */
  /* Sets-grid op het era-archief (taxonomy-pokemon_era.php) — zelfde
     .set-card-kaartjes als de "Alle sets"-pagina (_sets-overview.scss),
     maar hier als volle, wrappende grid i.p.v. de horizontaal
     scrollende teaser-rij (.sets-era__scroll) op de homepage. */
  /* Prijs als badge over de kaartafbeelding i.p.v. los tekstregeltje
     eronder — directer, e-commerce-achtig (gebruikt in grid + top-10). */
  /* ---- checklist-tabel (alternatief voor de grid) ----
     Zelfde kaart-opmaak/interactie als de grid: witte "kaart" met
     zachte schaduw, era-kleur accent in de kop, rarity-pilletjes i.p.v.
     kale tekst, chase-gloed op top-10-kaarten, en klikbare rijen die
     dezelfde kaart-detail modal openen. border-collapse staat op
     "separate" i.p.v. "collapse" — dat laatste knipt de border-radius
     van de tabel zelf lelijk af. */
  /* Rarity als klein gekleurd pilletje i.p.v. kale tekst in de checklist —
     zelfde taal als &__rarity-pill hierboven. */
  /* ---- kaart-detail-pagina: vaardigheden/aanvallen/zwaktes ----
     Hergebruikt bewust dezelfde witte-kaart/pill-taal als de rest van
     de pagina (stat-tegels, rarity-pillen, FAQ-items). */
  /* Aanvallen naast elkaar i.p.v. onder elkaar — wrapt vanzelf op
     smallere schermen. */
  /* Energie-/Pokemon-type als icoon (emoji, zie mk_tcgdex_type_icon())
     i.p.v. tekst — gebruikt bij de type-badges in de meta-rij én de
     aanval-kosten. De screen-reader-text erin blijft de naam voorlezen. */
  /* Zwaktes/weerstand/terugtrekkosten — kleine rij pilletjes onderaan. */
  /* ---- auto-FAQ ---- */
  /* Zelfde gepolijste accordion-stijl als het losse FAQ-blok
     (_faq.scss): witte kaart, +/- cirkel-icoon dat naar een kruisje
     roteert, zachte fade-in van het antwoord. */
  /* Cirkel-icoon met + / - */
}
.set-detail::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, rgba(221, 66, 144, 0.7)), color-stop(50%, #ef7815), color-stop(80%, rgba(84, 181, 125, 0.7)), to(transparent));
  background: linear-gradient(90deg, transparent 0%, rgba(221, 66, 144, 0.7) 20%, #ef7815 50%, rgba(84, 181, 125, 0.7) 80%, transparent 100%);
}
.set-detail__inner {
  max-width: 1440px;
  margin: auto;
  width: 92%;
  padding-top: 40px;
}
.set-detail__header {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 130px 0 48px;
  overflow: hidden;
  color: #1d1d1f;
  background: radial-gradient(ellipse 55% 60% at 10% 20%, color-mix(in srgb, var(--era-color, #888) 18%, transparent) 0%, transparent 62%), radial-gradient(ellipse 45% 55% at 92% 80%, rgba(84, 181, 125, 0.08) 0%, transparent 60%), radial-gradient(ellipse 35% 40% at 75% 10%, rgba(239, 120, 21, 0.06) 0%, transparent 55%), linear-gradient(160deg, #fafafa 0%, #f2f2f7 100%);
}
.set-detail__header-inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: auto;
  width: 92%;
}
.set-detail__header-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 32px;
}
.set-detail__breadcrumb {
  margin-bottom: 24px;
  /* Huidige pagina — geen link, iets nadrukkelijker dan de rest
     (zelfde lichte header-achtergrond als de andere breadcrumb-
     links, dus donkere tekstkleur i.p.v. wit). */
}
.set-detail__breadcrumb a {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
}
.set-detail__breadcrumb a:hover {
  color: #dd4290;
}
.set-detail__breadcrumb-sep {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.55);
  margin: 0 6px;
  opacity: 0.5;
}
.set-detail__breadcrumb-current {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
}
.set-detail__logo {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 220px;
  max-width: 30%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  -webkit-filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.12));
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.12));
}
.set-detail__logo--card {
  max-height: 320px;
  border-radius: 12px;
}
.set-detail__info {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}
.set-detail__era-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--era-color, #dd4290);
  background: color-mix(in srgb, var(--era-color, #dd4290) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--era-color, #dd4290) 28%, transparent);
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.set-detail__era-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--era-color, #dd4290);
}
.set-detail__title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px !important;
  padding-bottom: 0;
}
.set-detail__title::after {
  display: none;
}
.set-detail__title-gradient {
  background: linear-gradient(135deg, var(--era-color, #dd4290) 0%, #ef7815 55%, #54b57d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.set-detail__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 12px;
}
.set-detail__description {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 20px;
  max-width: 640px;
}
.set-detail__header-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 14px;
}
.set-detail__live-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
}
.set-detail__live-badge svg {
  width: 14px;
  height: 14px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  color: var(--era-color, #dd4290);
}
.set-detail__empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  color: rgba(0, 0, 0, 0.55);
  padding: 60px 20px;
  text-align: center;
}
.set-detail__empty p {
  font-style: italic;
  max-width: 420px;
}
.set-detail__empty-icon {
  width: 40px;
  height: 40px;
  color: rgba(0, 0, 0, 0.15);
}
.set-detail__seo-intro {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.6);
  max-width: 760px;
  margin-bottom: 32px;
}
.set-detail__seo-intro p {
  margin-bottom: 1em;
}
.set-detail__legal-layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 56px;
}
.set-detail__legal-nav {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 300px;
  flex: 0 0 300px;
  position: sticky;
  top: 110px;
  -ms-flex-item-align: start;
  align-self: flex-start;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-lg);
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  padding: 20px;
}
.set-detail__legal-nav-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 12px;
}
.set-detail__legal-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2px;
}
.set-detail__legal-nav-item a {
  display: block;
  padding: 6px 10px;
  margin-left: -10px;
  border-radius: var(--radius-md, 8px);
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
  -webkit-transition: color 0.15s ease, background-color 0.15s ease;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.set-detail__legal-nav-item a:hover {
  color: #1d1d1f;
  background: rgba(0, 0, 0, 0.04);
}
.set-detail__legal-nav-item--h3 a {
  padding-left: 22px;
  font-size: 0.83rem;
}
@media screen and (max-width: 900px) {
  .set-detail__legal-nav {
    position: static;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 24px;
  }
  .set-detail__legal-nav ul {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
  }
  .set-detail__legal-nav-item a {
    margin-left: 0;
  }
  .set-detail__legal-nav-item--h3 a {
    padding-left: 10px;
  }
}
.set-detail__legal-content {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 760px;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.6);
  /* Kop direct na een andere kop (bv. h2 met daaronder meteen een
     h3-subsectie) hoeft niet evenveel lucht te krijgen als een kop
     die op lopende tekst volgt — anders oogt het uit balans. */
  /* h4 is hier een klein veld-label (bv. "Grondslag") en geen
     echte sectiekop — met dezelfde stijl als h1-h3 was 'ie niet te
     onderscheiden van vetgedrukte tekst in de lopende tekst (bv.
     "Bedrijfsnaam:" in sectie 1), vandaar een duidelijk ander,
     kleiner label-uiterlijk. */
}
.set-detail__legal-content h1, .set-detail__legal-content h2, .set-detail__legal-content h3 {
  color: #1d1d1f;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 1em 0 0.75em;
}
.set-detail__legal-content h1:first-child, .set-detail__legal-content h2:first-child, .set-detail__legal-content h3:first-child {
  margin-top: 0;
}
.set-detail__legal-content h1 {
  font-size: 1.6rem;
}
.set-detail__legal-content h2 {
  font-size: 1.3rem;
}
.set-detail__legal-content h3 {
  font-size: 1.1rem;
}
.set-detail__legal-content h1 + h2, .set-detail__legal-content h1 + h3, .set-detail__legal-content h2 + h3 {
  margin-top: 0.5em;
}
.set-detail__legal-content h4 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.65);
  margin: 1.4em 0 0.4em;
}
.set-detail__legal-content h4:first-child {
  margin-top: 0;
}
.set-detail__legal-content p, .set-detail__legal-content ul, .set-detail__legal-content ol {
  margin-bottom: 1em;
}
.set-detail__legal-content ul, .set-detail__legal-content ol {
  padding-left: 1.3em;
}
.set-detail__legal-content ul li, .set-detail__legal-content ol li {
  margin-bottom: 0.4em;
}
.set-detail__legal-content a {
  color: #dd4290;
  text-decoration: underline;
}
.set-detail__legal-content a:hover {
  color: #54b57d;
}
.set-detail__legal-content strong {
  color: #1d1d1f;
}
.set-detail__legal-content hr {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 1.4em 0;
}
@media screen and (max-width: 900px) {
  .set-detail__legal-layout {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0;
  }
}
.set-detail__section-title {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: #1d1d1f;
  letter-spacing: -0.01em;
  margin-bottom: 16px !important;
  padding-bottom: 0;
}
.set-detail__section-title::after {
  display: none;
}
.set-detail__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.set-detail__stat {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px;
  padding: 18px 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-md);
  text-align: center;
  overflow: hidden;
  -webkit-transition: -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  transition: -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  transition: box-shadow 0.2s ease, transform 0.2s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  /* Era-kleur accent bovenaan, zelfde taal als de kaartjes elders
     op deze pagina. */
}
.set-detail__stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--era-color, #888);
}
.set-detail__stat-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 2px;
  color: var(--era-color, #dd4290);
}
.set-detail__stat-icon svg {
  width: 100%;
  height: 100%;
}
.set-detail__stat-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--era-color, #dd4290);
  letter-spacing: -0.01em;
}
.set-detail__stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
}
.set-detail__stat--card {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  text-align: left;
  cursor: pointer;
  /* Is sinds Fase 6 een echte <a href> i.p.v. een div. */
  color: inherit;
}
.set-detail__stat--card:hover {
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
}
.set-detail__stat-card-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.set-detail__stat-card-image {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 44px;
  height: 60px;
  -o-object-fit: contain;
  object-fit: contain;
  background: #f8f8f8;
  border-radius: 6px;
}
.set-detail__stat-card-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.set-detail__stat-card-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.set-detail__stat-card-price {
  font-size: 0.95rem;
  font-weight: 800;
  color: #dd4290;
}
.set-detail__stat--rarities {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  text-align: left;
  grid-column: span 2;
}
.set-detail__rarity-breakdown {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.set-detail__rarity-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--era-color, #dd4290);
  background: color-mix(in srgb, var(--era-color, #dd4290) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--era-color, #dd4290) 22%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
}
.set-detail__rarity-pill strong {
  color: #1d1d1f;
  font-weight: 800;
}
.set-detail__updated {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.55);
  font-style: italic;
  margin: -20px 0 24px;
}
.set-detail__top10 {
  margin-bottom: 40px;
}
.set-detail__top10-scroll {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}
.set-detail__top10-scroll::-webkit-scrollbar {
  height: 4px;
}
.set-detail__top10-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.set-detail__top10-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 99px;
}
.set-detail__top10-card {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 128px;
  position: relative;
  background: #fff;
  /* Is sinds Fase 6 een echte <a href> i.p.v. een div. */
  display: block;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-md);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  /* Era-kleur accent bovenaan — zelfde taal als de gekleurde
     linkerbalk op de sets-tabs/set-cards elders op de site. */
  /* Shimmer sweep bij hover — zelfde effect als de set-cards op
     de sets-overview. */
}
.set-detail__top10-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--era-color, #888);
  z-index: 2;
}
.set-detail__top10-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  -webkit-transform: translateX(-100%) skewX(-15deg);
  transform: translateX(-100%) skewX(-15deg);
  -webkit-transition: -webkit-transform 0.55s ease;
  transition: -webkit-transform 0.55s ease;
  transition: transform 0.55s ease;
  transition: transform 0.55s ease, -webkit-transform 0.55s ease;
  pointer-events: none;
  z-index: 1;
}
.set-detail__top10-card:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
}
.set-detail__top10-card:hover::after {
  -webkit-transform: translateX(220%) skewX(-15deg);
  transform: translateX(220%) skewX(-15deg);
}
.set-detail__top10-rank {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: var(--era-color, #dd4290);
  padding: 2px 6px;
  border-radius: 999px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.set-detail__top10-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #f8f8f8;
  padding: 8px;
}
.set-detail__top10-visual img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
.set-detail__top10-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1px;
  padding: 8px 9px 10px;
}
.set-detail__top10-name {
  font-size: 11px;
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1.25;
}
.set-detail__top10-rarity {
  font-size: 9px;
  color: rgba(0, 0, 0, 0.55);
}
.set-detail__toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}
.set-detail__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 12px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}
.set-detail__filter-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 5px;
}
.set-detail__filter-field label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.55);
}
.set-detail__rarity-filter, .set-detail__type-filter, .set-detail__illustrator-filter, .set-detail__sort, .set-detail__name-filter {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1d1d1f;
  cursor: pointer;
}
.set-detail__name-filter {
  cursor: text;
  min-width: 170px;
  font-weight: 400;
}
.set-detail__name-filter::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.55);
  font-weight: 400;
}
.set-detail__name-filter::-moz-placeholder {
  color: rgba(0, 0, 0, 0.55);
  font-weight: 400;
}
.set-detail__name-filter:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.55);
  font-weight: 400;
}
.set-detail__name-filter::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.55);
  font-weight: 400;
}
.set-detail__name-filter::placeholder {
  color: rgba(0, 0, 0, 0.55);
  font-weight: 400;
}
.set-detail__view-toggle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.set-detail__view-btn {
  padding: 7px 16px;
  border: none !important;
  background: #fff;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.set-detail__view-btn.is-active {
  background: var(--era-color, #dd4290);
  color: #fff;
}
.set-detail__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  /* Zonder deze regel wint "display: grid" altijd van het
     hidden-attribuut (auteur-CSS gaat vóór de UA-standaardregel
     [hidden]{display:none}), waardoor de grid/checklist-toggle
     niets zichtbaars deed — beide panelen bleven gewoon staan. */
}
.set-detail__cards[hidden] {
  display: none;
}
.set-detail__sets-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}
.set-detail__card {
  position: relative;
  background: #fff;
  /* Is sinds Fase 6 een echte <a href> i.p.v. een div. */
  display: block;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-md);
  overflow: hidden;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  /* Zelfde reden als &__cards hierboven: "display: block" (auteur-CSS)
     wint anders van de UA-standaardregel [hidden]{display:none},
     waardoor de rarity/naam/type-filters in de grid-weergave niets
     verborgen — de checklist (<tr>) had dit probleem niet. */
  /* Era-kleur accent bovenaan — zelfde taal als de top-10-slider en
     de sets-tabs/set-cards elders op de site. */
  /* Shimmer sweep bij hover. */
  /* Kaarten die ook in de top-10 duurste staan — subtiele gekleurde
     gloed, zodat "bijzondere" kaarten meteen opvallen tussen de rest. */
}
.set-detail__card[hidden] {
  display: none;
}
.set-detail__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--era-color, #888);
  z-index: 2;
}
.set-detail__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  -webkit-transform: translateX(-100%) skewX(-15deg);
  transform: translateX(-100%) skewX(-15deg);
  -webkit-transition: -webkit-transform 0.55s ease;
  transition: -webkit-transform 0.55s ease;
  transition: transform 0.55s ease;
  transition: transform 0.55s ease, -webkit-transform 0.55s ease;
  pointer-events: none;
  z-index: 1;
}
.set-detail__card:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
}
.set-detail__card:hover::after {
  -webkit-transform: translateX(220%) skewX(-15deg);
  transform: translateX(220%) skewX(-15deg);
}
.set-detail__card.is-chase {
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--era-color, #888) 45%, transparent), 0 4px 14px color-mix(in srgb, var(--era-color, #888) 16%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--era-color, #888) 45%, transparent), 0 4px 14px color-mix(in srgb, var(--era-color, #888) 16%, transparent);
}
.set-detail__card.is-chase:hover {
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--era-color, #888) 60%, transparent), 0 4px 16px color-mix(in srgb, var(--era-color, #888) 20%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--era-color, #888) 60%, transparent), 0 4px 16px color-mix(in srgb, var(--era-color, #888) 20%, transparent);
}
.set-detail__card-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #f8f8f8;
  padding: 8px;
}
.set-detail__card-visual img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
.set-detail__price-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 2;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  padding: 2px 7px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.set-detail__card-name {
  padding: 8px 10px 2px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
  line-height: 1.3;
}
.set-detail__card-rarity {
  padding: 0 10px 10px;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.55);
  text-align: center;
}
.set-detail__no-match {
  text-align: center;
  color: rgba(0, 0, 0, 0.55);
  font-style: italic;
  padding: 40px 0;
}
.set-detail__checklist {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-md);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  /* Zelfde reden als bij &__cards hierboven — een <table> heeft van
     zichzelf al display:table, wat het hidden-attribuut anders
     straal negeert. */
  /* Kaartnaam is sinds Fase 6 een echte <a href> — zelfde tekstkleur
     als de rest van de rij, alleen bij hover in de merkkleur. */
}
.set-detail__checklist[hidden] {
  display: none;
}
.set-detail__checklist th, .set-detail__checklist td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.set-detail__checklist tbody tr:last-child td {
  border-bottom: none;
}
.set-detail__checklist-name-link {
  color: #1d1d1f;
  font-weight: 600;
}
.set-detail__checklist-name-link:hover {
  color: #dd4290;
}
.set-detail__checklist thead th {
  background: color-mix(in srgb, var(--era-color, #dd4290) 6%, #fff);
  border-bottom: 2px solid color-mix(in srgb, var(--era-color, #dd4290) 28%, transparent);
}
.set-detail__checklist th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 700;
}
.set-detail__checklist td:first-child, .set-detail__checklist th:first-child {
  width: 50px;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 700;
}
.set-detail__checklist td:last-child, .set-detail__checklist th:last-child {
  text-align: right;
  font-weight: 800;
  color: #dd4290;
}
.set-detail__checklist tbody tr {
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
  /* Chase-kaarten (ook in de top-10 duurste) krijgen dezelfde
     gekleurde highlight als in de grid, hier als een linker-
     randaccent i.p.v. een gloed rondom (past beter bij een rij). */
}
.set-detail__checklist tbody tr.is-clickable {
  cursor: pointer;
}
.set-detail__checklist tbody tr:hover td {
  background: color-mix(in srgb, var(--era-color, #dd4290) 6%, transparent);
}
.set-detail__checklist tbody tr.is-chase {
  background: color-mix(in srgb, var(--era-color, #888) 5%, transparent);
  -webkit-box-shadow: inset 3px 0 0 0 var(--era-color, #888);
  box-shadow: inset 3px 0 0 0 var(--era-color, #888);
}
.set-detail__checklist tbody tr.is-chase:hover td {
  background: color-mix(in srgb, var(--era-color, #dd4290) 10%, transparent);
}
.set-detail__checklist-rarity {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--era-color, #dd4290);
  background: color-mix(in srgb, var(--era-color, #dd4290) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--era-color, #dd4290) 22%, transparent);
  padding: 2px 9px;
  border-radius: 999px;
}
.set-detail__ability {
  background: color-mix(in srgb, var(--era-color, #dd4290) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--era-color, #dd4290) 22%, transparent);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.set-detail__ability p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 6px;
}
.set-detail__ability-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--era-color, #dd4290);
}
.set-detail__ability-name {
  font-size: 1rem;
  font-weight: 800;
  color: #1d1d1f;
  margin: 2px 0 0 !important;
  padding-bottom: 0;
}
.set-detail__ability-name::after {
  display: none;
}
.set-detail__attacks {
  margin-bottom: 24px;
}
.set-detail__attacks-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
}
.set-detail__attack {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 260px;
  flex: 1 1 260px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-md);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 14px 18px;
}
.set-detail__attack-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
}
.set-detail__attack-cost {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 3px;
}
.set-detail__attack-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1d1d1f;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.set-detail__attack-damage {
  font-size: 1rem;
  font-weight: 800;
  color: var(--era-color, #dd4290);
}
.set-detail__attack-effect {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 8px;
}
.set-detail__type-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 13px;
  line-height: 1;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
}
.set-detail__wrr-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.set-detail__wrr-item {
  font-size: 0.8rem;
  font-weight: 600;
  color: #1d1d1f;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 5px 12px;
  border-radius: 999px;
}
.set-detail__wrr-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.55);
  margin-right: 4px;
}
.set-detail__faq {
  margin-top: 48px;
  max-width: 760px;
}
.set-detail__faq-item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-lg);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  margin-bottom: 10px;
  -webkit-transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, -webkit-box-shadow 0.25s ease;
}
.set-detail__faq-item[open] {
  border-color: color-mix(in srgb, var(--era-color, #dd4290) 18%, transparent);
  -webkit-box-shadow: 0 4px 20px color-mix(in srgb, var(--era-color, #dd4290) 8%, transparent);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--era-color, #dd4290) 8%, transparent);
}
.set-detail__faq-item summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  list-style: none;
}
.set-detail__faq-item summary::-webkit-details-marker {
  display: none;
}
.set-detail__faq-question {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1.4;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.set-detail__faq-icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--era-color, #dd4290) 25%, transparent);
  background: transparent;
  position: relative;
  -webkit-transition: background 0.25s ease, border-color 0.25s ease;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.set-detail__faq-icon::before, .set-detail__faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 2px;
  background: var(--era-color, #dd4290);
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
}
.set-detail__faq-icon::before {
  width: 10px;
  height: 2px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.set-detail__faq-icon::after {
  width: 2px;
  height: 10px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.set-detail__faq-item[open] .set-detail__faq-icon {
  background: color-mix(in srgb, var(--era-color, #dd4290) 8%, transparent);
  border-color: color-mix(in srgb, var(--era-color, #dd4290) 45%, transparent);
}
.set-detail__faq-item[open] .set-detail__faq-icon::after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.set-detail__faq-answer {
  padding: 0 20px 20px;
  -webkit-animation: set-detail-faq-open 0.22s ease;
  animation: set-detail-faq-open 0.22s ease;
}
.set-detail__faq-answer p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
}
@media screen and (max-width: 680px) {
  .set-detail__header {
    padding: 110px 0 36px;
  }
  .set-detail__header-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    text-align: left;
  }
  .set-detail__logo {
    width: 160px;
    max-width: 60%;
  }
  .set-detail__toolbar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
  .set-detail__filters {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
  .set-detail__filter-field {
    width: 100%;
  }
  .set-detail__rarity-filter, .set-detail__type-filter, .set-detail__illustrator-filter, .set-detail__sort, .set-detail__name-filter {
    width: 100%;
  }
  .set-detail__view-toggle {
    -ms-flex-item-align: stretch;
    align-self: stretch;
  }
  .set-detail__view-toggle .set-detail__view-btn {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}

@-webkit-keyframes set-detail-faq-open {
  from {
    opacity: 0;
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes set-detail-faq-open {
  from {
    opacity: 0;
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
/* ================================================
   KAART-DETAIL MODAL (single-pokemon_set.php)
   Zelfde lichte kaart-opmaak als de verkoop-popup
   (.mk-card-detail-section in _kaart-zoeker.scss),
   maar zonder de verkoopstappen — puur informatief.
   ================================================ */
.card-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 16px;
  margin: 0 !important;
}
.card-detail-modal[hidden] {
  display: none;
}
.card-detail-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.card-detail-modal__section {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 24px;
  -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  -webkit-animation: mk-modal-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation: mk-modal-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.card-detail-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none !important;
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.65);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}
.card-detail-modal__close:hover {
  background: rgba(0, 0, 0, 0.12);
}
.card-detail-modal__visual {
  padding: 20px 26px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* Nodig zodat de rotateX/rotateY-tilt op __image er 3D uitziet
     i.p.v. plat vervormd — zelfde als de verkoop-popup. */
  -webkit-perspective: 700px;
  perspective: 700px;
}
.card-detail-modal__image {
  max-width: 220px;
  width: 100%;
  border-radius: 12px;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  will-change: transform;
}
.card-detail-modal__image[hidden] {
  display: none;
}
.card-detail-modal__body {
  padding: 20px 26px 28px;
}
.card-detail-modal__rarity {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 4px;
}
.card-detail-modal__rarity[hidden] {
  display: none;
}
.card-detail-modal__name {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1d1d1f;
  margin: 0 0 16px;
  padding-bottom: 0;
}
.card-detail-modal__name::after {
  display: none;
}
.card-detail-modal__price-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(221, 66, 144, 0.06);
  border: 1px solid rgba(221, 66, 144, 0.15);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}
.card-detail-modal__price-box[hidden] {
  display: none;
}
.card-detail-modal__price-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.card-detail-modal__price-label {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.6);
}
.card-detail-modal__price-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #dd4290;
}
.card-detail-modal__price-disclaimer {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.55);
}
.card-detail-modal__price-disclaimer strong {
  color: rgba(0, 0, 0, 0.6);
}

/* Desktop: 2 kolommen (kaartafbeelding links, gegevens rechts) i.p.v.
   alles onder elkaar — zelfde opbouw als de verkoop-popup. */
@media screen and (min-width: 769px) {
  .card-detail-modal__section {
    max-width: 760px;
    max-height: 85vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .card-detail-modal__close {
    top: 16px;
    right: 18px;
  }
  .card-detail-modal__visual {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 300px;
    flex: 0 0 300px;
    padding: 40px 24px;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    background: #f8f8fc;
    border-radius: 24px 0 0 24px;
  }
  .card-detail-modal__body {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    padding: 32px 36px 36px;
  }
  .card-detail-modal__image {
    max-width: 100%;
  }
  .card-detail-modal__name {
    font-size: 1.5rem;
  }
}
.tcg-overview {
  padding: 40px 0;
  position: relative;
  margin-bottom: 0px;
  /* Koptekst */
  /* Logo-kaarten */
}
.tcg-overview::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, rgba(221, 66, 144, 0.7)), color-stop(50%, #ef7815), color-stop(80%, rgba(84, 181, 125, 0.7)), to(transparent));
  background: linear-gradient(90deg, transparent 0%, rgba(221, 66, 144, 0.7) 20%, #ef7815 50%, rgba(84, 181, 125, 0.7) 80%, transparent 100%);
}
.tcg-overview__inner {
  max-width: 1440px;
  margin: auto;
  width: 92%;
}
.tcg-overview__heading {
  text-align: center;
  margin-bottom: 20px;
}
.tcg-overview__heading h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  margin-bottom: 6px;
}
.tcg-overview__heading h2::after {
  display: none;
}
.tcg-overview__subtitle {
  display: block;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
}
.tcg-overview__subtitle p {
  margin: 0 !important;
}
.tcg-overview__logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
}
.tcg-overview__logo-card {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 200px;
  flex: 0 1 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 120px;
  padding: 24px 32px;
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-lg);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  -webkit-transition: border-color 0.25s ease, -webkit-transform 0.25s var(--transition), -webkit-box-shadow 0.25s ease;
  transition: border-color 0.25s ease, -webkit-transform 0.25s var(--transition), -webkit-box-shadow 0.25s ease;
  transition: transform 0.25s var(--transition), box-shadow 0.25s ease, border-color 0.25s ease;
  transition: transform 0.25s var(--transition), box-shadow 0.25s ease, border-color 0.25s ease, -webkit-transform 0.25s var(--transition), -webkit-box-shadow 0.25s ease;
}
.tcg-overview__logo-card img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  -o-object-fit: contain;
  object-fit: contain;
}
.tcg-overview__logo-card:hover {
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
  border-color: rgba(221, 66, 144, 0.18);
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media screen and (max-width: 640px) {
  .tcg-overview {
    padding: 48px 0;
  }
  .tcg-overview__logos {
    gap: 14px;
  }
  .tcg-overview__logo-card {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 140px;
    flex: 0 1 140px;
    min-height: 90px;
    padding: 16px 20px;
  }
  .tcg-overview__logo-card img {
    max-height: 44px;
  }
}
.instagram-section {
  padding: 80px 0;
}
.instagram-section__inner {
  max-width: 1400px;
  margin: auto;
  width: 90%;
}
.instagram-section__inner__heading {
  text-align: center;
  margin-bottom: 40px;
}
.instagram-section__inner__heading h2 {
  margin-bottom: 10px;
}
.instagram-section__inner__heading p {
  opacity: 0.75;
  margin-bottom: 16px;
}
.instagram-section__inner__heading__handle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  color: #dd4290;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.instagram-section__inner__heading__handle:hover {
  opacity: 0.75;
}
.instagram-section__inner__feed__notice {
  text-align: center;
  font-style: italic;
  opacity: 0.6;
}

/* ===== SMASH BALLOON OVERSCHRIJVEN ===== */
.instagram-section #sb_instagram {
  padding: 0 !important;
}
.instagram-section #sb_instagram #sbi_images {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
}
.instagram-section #sb_instagram #sbi_images .sbi_item {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
.instagram-section #sb_instagram #sbi_images .sbi_item .sbi_photo_wrap {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1/1;
}
.instagram-section #sb_instagram #sbi_images .sbi_item .sbi_photo_wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(221, 66, 144, 0.6), rgba(239, 120, 21, 0.6));
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  border-radius: 12px;
}
.instagram-section #sb_instagram #sbi_images .sbi_item .sbi_photo_wrap:hover::after {
  opacity: 1;
}
.instagram-section #sb_instagram #sbi_images .sbi_item .sbi_photo_wrap img {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 12px;
  -webkit-transition: -webkit-transform 0.4s ease !important;
  transition: -webkit-transform 0.4s ease !important;
  transition: transform 0.4s ease !important;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease !important;
}
.instagram-section #sb_instagram #sbi_images .sbi_item .sbi_photo_wrap:hover img {
  -webkit-transform: scale(1.05) !important;
  transform: scale(1.05) !important;
}
.instagram-section #sb_instagram #sbi_load {
  margin-top: 30px !important;
  text-align: center !important;
}
.instagram-section #sb_instagram #sbi_load .sbi_load_btn {
  background: linear-gradient(135deg, #dd4290, #ef7815) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 32px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  -webkit-transition: opacity 0.2s ease !important;
  transition: opacity 0.2s ease !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.instagram-section #sb_instagram #sbi_load .sbi_load_btn:hover {
  opacity: 0.85 !important;
}
.instagram-section #sb_instagram .sbi_follow_btn,
.instagram-section #sb_instagram #sbi_powered_by {
  display: none !important;
}

/* Smash Balloon's eigen "Volg op Instagram"-knop (sticky follow-widget,
   NIET de feed in .instagram-section hierboven — die staat al op
   display:none) zet zijn achtergrondkleur via een inline style-attribuut,
   dus is een gewone selector (zelfs met hogere specificiteit) niet genoeg
   om 'm te overschrijven. !important in een auteur-stylesheet wint wel
   van een inline style zonder !important. Contrast van de plugin-default
   (wit op rgb(64,139,209)) haalde maar ~3.6:1, hier vaste site-kleuren
   met voldoende contrast (WCAG AA, 4.5:1+). */
.sbi_follow_btn a {
  background: #c82477 !important;
  color: #fff !important;
}

@media screen and (max-width: 900px) {
  .instagram-section {
    padding: 50px 0;
  }
  .instagram-section #sb_instagram #sbi_images {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media screen and (max-width: 600px) {
  .instagram-section #sb_instagram #sbi_images {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}
/* ================================================
   CONTACT SECTIE — outer kolommen = full-width achtergrond
                  — inner kolommen = site-verhoudingen
   ================================================ */
/* Outer wrapper — full width achtergrond */
.entry-content > .wp-block-columns:has(#contact) {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 80px 0;
  position: relative;
  background: radial-gradient(ellipse 50% 60% at 90% 20%, rgba(221, 66, 144, 0.06) 0%, transparent 60%), radial-gradient(ellipse 40% 50% at 5% 80%, rgba(84, 181, 125, 0.05) 0%, transparent 55%);
  /* Gradiëntlijn bovenaan */
  /* Inner kolommen — houd site-verhoudingen aan */
}
.entry-content > .wp-block-columns:has(#contact)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, rgba(221, 66, 144, 0.7)), color-stop(50%, #ef7815), color-stop(80%, rgba(84, 181, 125, 0.7)), to(transparent));
  background: linear-gradient(90deg, transparent 0%, rgba(221, 66, 144, 0.7) 20%, #ef7815 50%, rgba(84, 181, 125, 0.7) 80%, transparent 100%);
}
.entry-content > .wp-block-columns:has(#contact) > .wp-block-column > .wp-block-columns {
  max-width: 1400px;
  width: 90%;
  margin: 0 auto;
}

/* === LINKER KOLOM — tekst === */
.entry-content > .wp-block-columns:has(#contact) {
  /* === RECHTER KOLOM — formulier === */
}
.entry-content > .wp-block-columns:has(#contact) div#contact.wp-block-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.entry-content > .wp-block-columns:has(#contact) div#contact.wp-block-column h3 {
  font-size: clamp(1.6rem, 2.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #1d1d1f;
  margin-bottom: 0px;
}
.entry-content > .wp-block-columns:has(#contact) div#contact.wp-block-column h3::after {
  display: none;
}
.entry-content > .wp-block-columns:has(#contact) div#contact.wp-block-column p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
  max-width: 480px;
}
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper {
  margin-top: 0;
  /* Validatiefouten */
}
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gform_fields {
  gap: 12px;
}
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield .gfield_label {
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px;
}
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=text],
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=email],
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=tel],
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield textarea {
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  color: #1d1d1f;
  font-size: 14px;
  padding: 14px 16px;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=text]::-webkit-input-placeholder, .entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=email]::-webkit-input-placeholder, .entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=tel]::-webkit-input-placeholder, .entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.25);
}
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=text]::-moz-placeholder, .entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=email]::-moz-placeholder, .entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=tel]::-moz-placeholder, .entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.25);
}
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=text]:-ms-input-placeholder, .entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=email]:-ms-input-placeholder, .entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=tel]:-ms-input-placeholder, .entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.25);
}
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=text]::-ms-input-placeholder, .entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=email]::-ms-input-placeholder, .entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=tel]::-ms-input-placeholder, .entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield textarea::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.25);
}
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=text]::placeholder,
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=email]::placeholder,
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=tel]::placeholder,
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield textarea::placeholder {
  color: rgba(0, 0, 0, 0.25);
}
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=text]:focus,
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=email]:focus,
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield input[type=tel]:focus,
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield textarea:focus {
  outline: none;
  border-color: rgba(221, 66, 144, 0.5);
  -webkit-box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.08);
  box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.08);
}
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield textarea {
  resize: vertical;
  min-height: 140px;
}
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield.is-active .gfield_label,
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield.is-filled .gfield_label {
  color: #dd4290;
}
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gform-footer {
  margin-top: 14px;
}
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gform-footer .gform_button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: none;
  color: #fff;
  background: linear-gradient(135deg, #dd4290, #c82477);
  -webkit-box-shadow: 0 4px 20px rgba(221, 66, 144, 0.35);
  box-shadow: 0 4px 20px rgba(221, 66, 144, 0.35);
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  width: auto;
}
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gform-footer .gform_button:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-box-shadow: 0 6px 28px rgba(221, 66, 144, 0.5);
  box-shadow: 0 6px 28px rgba(221, 66, 144, 0.5);
}
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gfield_validation_message,
.entry-content > .wp-block-columns:has(#contact) .gform_wrapper .gform_submission_error {
  color: #ff6b6b;
  font-size: 12px;
}

@media (max-width: 780px) {
  .entry-content > .wp-block-columns:has(#contact) {
    padding: 56px 0;
  }
}
/* ================================================
   FAQ SECTIE — twee-koloms layout met categoriefilter
   ================================================ */
.faq-section {
  padding: 80px 0;
  position: relative;
  background: radial-gradient(ellipse 55% 50% at 5% 20%, rgba(221, 66, 144, 0.05) 0%, transparent 60%), radial-gradient(ellipse 45% 55% at 95% 80%, rgba(84, 181, 125, 0.05) 0%, transparent 60%);
  /* Twee-koloms layout: categorieën links, FAQ rechts */
}
.faq-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, rgba(221, 66, 144, 0.7)), color-stop(50%, #ef7815), color-stop(80%, rgba(84, 181, 125, 0.7)), to(transparent));
  background: linear-gradient(90deg, transparent 0%, rgba(221, 66, 144, 0.7) 20%, #ef7815 50%, rgba(84, 181, 125, 0.7) 80%, transparent 100%);
}
.faq-section__inner {
  max-width: 1400px;
  width: 90%;
  margin: 0 auto;
}
.faq-section__heading {
  text-align: center;
  margin-bottom: 48px;
}
.faq-section__heading h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  margin-bottom: 12px;
}
.faq-section__heading h2::after {
  display: none;
}
.faq-section__heading p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
  max-width: 520px;
  margin: 0 auto;
}
.faq-section__footer {
  margin-top: 40px;
  text-align: center;
}
.faq-section__layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.faq-section__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
}

/* ================================================
   CATEGORIEFILTER — linker kolom
   ================================================ */
.faq-categories {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 100px;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.faq-cat-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  background: transparent;
  color: rgba(0, 0, 0, 0.6);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.faq-cat-btn__count {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  min-width: 25px;
  height: 25px;
  padding: 0 5px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.65);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  -webkit-transition: background 0.2s ease, color 0.2s ease;
  transition: background 0.2s ease, color 0.2s ease;
}
.faq-cat-btn:hover:not(:disabled) {
  background: rgba(221, 66, 144, 0.06);
  color: #dd4290;
}
.faq-cat-btn.is-active {
  background: rgba(221, 66, 144, 0.1);
  border-color: rgba(221, 66, 144, 0.22);
  /* $color-primary zelf gaf hier maar ~3.5:1 op deze lichte
     achtergrond (roze op bijna-wit) — donkerder nodig voor 4.5:1. */
  color: #a51e62;
}
.faq-cat-btn.is-active .faq-cat-btn__count {
  background: rgba(221, 66, 144, 0.16);
  color: #a51e62;
}
.faq-cat-btn:disabled, .faq-cat-btn.is-disabled {
  cursor: not-allowed;
  color: rgba(0, 0, 0, 0.55);
  opacity: 0.6;
}
.faq-cat-btn:disabled .faq-cat-btn__count, .faq-cat-btn.is-disabled .faq-cat-btn__count {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.55);
}

@media screen and (max-width: 640px) {
  .faq-categories {
    grid-template-columns: 1fr 1fr;
    display: grid;
    padding: 10px;
  }
}
/* ================================================
   FAQ ITEM — <details> accordion kaart
   ================================================ */
.faq-item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-lg);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  -webkit-transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: border-color 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, -webkit-box-shadow 0.25s ease;
  /* Verberg standaard browser driehoekje */
  /* Cirkel-icoon met + / - */
}
.faq-item[open] {
  border-color: rgba(221, 66, 144, 0.18);
  -webkit-box-shadow: 0 4px 20px rgba(221, 66, 144, 0.07);
  box-shadow: 0 4px 20px rgba(221, 66, 144, 0.07);
}
.faq-item summary {
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item__question {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.faq-item__question:focus-visible {
  outline: 2px solid rgba(221, 66, 144, 0.4);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}
.faq-item__question-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1.4;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.faq-item__icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(221, 66, 144, 0.25);
  background: transparent;
  position: relative;
  -webkit-transition: background 0.25s ease, border-color 0.25s ease;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.faq-item__icon::before, .faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 2px;
  background: #dd4290;
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
}
.faq-item__icon::before {
  width: 11px;
  height: 2px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.faq-item__icon::after {
  width: 2px;
  height: 11px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.faq-item[open] .faq-item__icon {
  background: rgba(221, 66, 144, 0.08);
  border-color: rgba(221, 66, 144, 0.45);
}
.faq-item[open] .faq-item__icon::after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.faq-item__answer {
  padding: 0 24px 22px;
  -webkit-animation: faq-open 0.22s ease;
  animation: faq-open 0.22s ease;
}
.faq-item__answer p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0 12px;
}
.faq-item__answer p:last-child {
  margin-bottom: 0;
}
.faq-item__answer a {
  color: #dd4290;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-item__answer a:hover {
  opacity: 0.75;
}
.faq-item__answer strong {
  color: #1d1d1f;
}

@-webkit-keyframes faq-open {
  from {
    opacity: 0;
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes faq-open {
  from {
    opacity: 0;
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 860px) {
  .faq-section__layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Categorieën worden horizontale scrollbar */
  .faq-categories {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
    position: static;
  }
  .faq-cat-btn {
    width: auto;
    padding: 8px 14px;
    font-size: 0.82rem;
  }
}
@media (max-width: 640px) {
  .faq-section {
    padding: 56px 0;
  }
  .faq-section__heading {
    margin-bottom: 32px;
  }
  .faq-item__question {
    padding: 16px 18px;
  }
  .faq-item__answer {
    padding: 0 18px 18px;
  }
}
/* ================================================
   REVIEWS SECTIE
   ================================================ */
.reviews-section {
  padding: 60px 0;
  background: radial-gradient(ellipse 55% 50% at 100% 0%, rgba(84, 181, 125, 0.04) 0%, transparent 60%), radial-gradient(ellipse 45% 45% at 0% 100%, rgba(221, 66, 144, 0.04) 0%, transparent 60%), #f8f8fc;
}
.reviews-section__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 24px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.reviews-section__title-block {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 200px;
}
.reviews-section__title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: #1d1d1f;
  letter-spacing: -0.02em;
  margin-bottom: 4px !important;
  padding-bottom: 0px !important;
}
.reviews-section__title::after {
  display: none;
}
.reviews-section__subtitle {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 !important;
}
.reviews-section__summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}
.reviews-section__avg {
  font-size: 1.3rem;
  font-weight: 800;
  color: #1d1d1f;
  line-height: 1;
}
.reviews-section__count {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.6);
}
.reviews-section__write-btn {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-left: auto;
  outline: 0px;
  border: 0px;
}
.reviews-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.reviews-section__empty {
  text-align: center;
  padding: 60px 20px;
}
.reviews-section__empty-icon {
  font-size: 48px;
  color: rgba(0, 0, 0, 0.1);
  line-height: 1;
  margin-bottom: 16px;
}
.reviews-section__empty p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.55);
}

/* --- Review card --- */
.review-card {
  background: #fff;
  border-radius: 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  padding: 20px 22px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 12px;
  /* Zonder dit is een grid-item's automatische min-breedte gebaseerd op
     de intrinsieke breedte van z'n inhoud — bij veel tags/foto's laat
     dat de hele kaart (en dus de grid-kolom) meegroeien i.p.v. dat
     __tags/__photos daarbinnen horizontaal scrollen zoals bedoeld. */
  min-width: 0;
  -webkit-transition: -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  transition: -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  transition: box-shadow 0.2s ease, transform 0.2s ease, -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
  /* --- "Wat vond je het beste?"-tags: horizontale slider i.p.v. een
     wrappende lijst, net als de review-cards zelf op mobiel. --- */
  /* --- Foto's: bij meerdere ook een horizontale slider --- */
}
.review-card:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}
.review-card__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 12px;
}
.review-card__avatar {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--avatar-color, #6366f1);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 1;
}
.review-card__meta {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}
.review-card__name {
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-card__beurs {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-card__text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.65);
  margin: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card__text.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.review-card__more-btn {
  -ms-flex-item-align: start;
  align-self: flex-start;
  margin: -6px 0 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.82rem;
  font-weight: 700;
  color: #dd4290;
  cursor: pointer;
  font-family: inherit;
}
.review-card__more-btn:hover {
  text-decoration: underline;
}
.review-card__tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 2px 2px 4px;
  overflow-x: auto;
  -ms-scroll-snap-type: x proximity;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.review-card__tags::-webkit-scrollbar {
  display: none;
}
.review-card__tag {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  color: #dd4290;
  background: rgba(221, 66, 144, 0.08);
  border-radius: 999px;
  padding: 4px 10px;
}
.review-card__photos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 2px 2px 4px;
  overflow-x: auto;
  -ms-scroll-snap-type: x proximity;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.review-card__photos::-webkit-scrollbar {
  display: none;
}
.review-card__photos li {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  scroll-snap-align: start;
  /* Enkele foto: laat 'm de volle breedte van de kaart vullen
     i.p.v. een klein vierkantje in een lege slider. */
}
.review-card__photos li:only-child {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
}
.review-card__photo {
  display: block;
  width: 140px;
  height: 140px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 12px;
}
.review-card__photos li:only-child .review-card__photo {
  width: 100%;
  height: auto;
  max-height: 220px;
}
.review-card__date {
  font-size: 0.72rem;
  color: rgba(0, 0, 0, 0.55);
  margin-top: auto;
}

/* --- Sterren --- */
.review-stars {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 1px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.review-stars__star {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.12);
  line-height: 1;
}
.review-stars__star.is-filled {
  color: #f59e0b;
}

.reviews-section__summary .review-stars__star {
  font-size: 20px;
}

/* ================================================
   MODAL ANIMATIES
   ================================================ */
@-webkit-keyframes mk-modal-in {
  from {
    opacity: 0;
    -webkit-transform: scale(0.94) translateY(12px);
    transform: scale(0.94) translateY(12px);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
  }
}
@keyframes mk-modal-in {
  from {
    opacity: 0;
    -webkit-transform: scale(0.94) translateY(12px);
    transform: scale(0.94) translateY(12px);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
  }
}
@-webkit-keyframes mk-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mk-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes mk-success-pop {
  from {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes mk-success-pop {
  from {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes mk-shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  25% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  75% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
}
@keyframes mk-shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  25% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  75% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
}
@-webkit-keyframes mk-reward-reveal {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes mk-reward-reveal {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes mk-qr-banner-in {
  from {
    opacity: 0;
    -webkit-transform: scale(0.9) translateY(-6px);
    transform: scale(0.9) translateY(-6px);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
  }
}
@keyframes mk-qr-banner-in {
  from {
    opacity: 0;
    -webkit-transform: scale(0.9) translateY(-6px);
    transform: scale(0.9) translateY(-6px);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
  }
}
@-webkit-keyframes mk-qr-banner-shimmer {
  to {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@keyframes mk-qr-banner-shimmer {
  to {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@-webkit-keyframes mk-qr-banner-wiggle {
  0%, 100% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  10% {
    -webkit-transform: rotate(-12deg) scale(1.08);
    transform: rotate(-12deg) scale(1.08);
  }
  20% {
    -webkit-transform: rotate(10deg) scale(1.08);
    transform: rotate(10deg) scale(1.08);
  }
  30% {
    -webkit-transform: rotate(-8deg) scale(1.05);
    transform: rotate(-8deg) scale(1.05);
  }
  40% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
}
@keyframes mk-qr-banner-wiggle {
  0%, 100% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  10% {
    -webkit-transform: rotate(-12deg) scale(1.08);
    transform: rotate(-12deg) scale(1.08);
  }
  20% {
    -webkit-transform: rotate(10deg) scale(1.08);
    transform: rotate(10deg) scale(1.08);
  }
  30% {
    -webkit-transform: rotate(-8deg) scale(1.05);
    transform: rotate(-8deg) scale(1.05);
  }
  40% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
}
@-webkit-keyframes mk-reward-tap-idle {
  0%, 100% {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
  50% {
    -webkit-transform: translateY(-4px) scale(1.015);
    transform: translateY(-4px) scale(1.015);
  }
}
@keyframes mk-reward-tap-idle {
  0%, 100% {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
  50% {
    -webkit-transform: translateY(-4px) scale(1.015);
    transform: translateY(-4px) scale(1.015);
  }
}
@-webkit-keyframes mk-reward-tap-shake {
  0%, 100% {
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
  }
  25% {
    -webkit-transform: translateX(-4px) scale(1.02);
    transform: translateX(-4px) scale(1.02);
  }
  75% {
    -webkit-transform: translateX(4px) scale(1.02);
    transform: translateX(4px) scale(1.02);
  }
}
@keyframes mk-reward-tap-shake {
  0%, 100% {
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
  }
  25% {
    -webkit-transform: translateX(-4px) scale(1.02);
    transform: translateX(-4px) scale(1.02);
  }
  75% {
    -webkit-transform: translateX(4px) scale(1.02);
    transform: translateX(4px) scale(1.02);
  }
}
@-webkit-keyframes mk-reward-tap-pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(221, 66, 144, 0.35);
    box-shadow: 0 0 0 0 rgba(221, 66, 144, 0.35);
  }
  100% {
    -webkit-box-shadow: 0 0 0 16px rgba(221, 66, 144, 0);
    box-shadow: 0 0 0 16px rgba(221, 66, 144, 0);
  }
}
@keyframes mk-reward-tap-pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(221, 66, 144, 0.35);
    box-shadow: 0 0 0 0 rgba(221, 66, 144, 0.35);
  }
  100% {
    -webkit-box-shadow: 0 0 0 16px rgba(221, 66, 144, 0);
    box-shadow: 0 0 0 16px rgba(221, 66, 144, 0);
  }
}
@-webkit-keyframes mk-confetti-fall {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
    opacity: 0;
  }
}
@keyframes mk-confetti-fall {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
    opacity: 0;
  }
}
/* ================================================
   REVIEW MODAL
   ================================================ */
.review-modal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 16px;
  /* Zichtbaarheid loopt via het [hidden]-attribuut (net als de andere
     modals), niet meer via .is-open — zo blijft er tijd voor de
     sluit-transitie i.p.v. dat display:none alles instant wegsnapt. */
  /* --- Gradient hero header, met een glazen "sheen" bovenin --- */
  /* --- Beloningsbanner: alleen zichtbaar bij een geldige beurs-QR-scan
     (zie mk_review_qr_context()) --- */
  /* --- Stap-indicator (pills) in hero --- */
  /* --- Form body — subtiele tint-verschuiving per stap, geeft
     onbewust het gevoel van voortgang zonder een harde kleurwissel. --- */
  /* --- Avatar preview --- */
  /* --- Avatar "reageert" op de gekozen mood-emoji --- */
  /* --- Emoji-mood-rij met live label --- */
  /* --- Kleurverloop-track onder de emoji's, met een thumb die naar de
     gekozen/gehoverde stemming meebeweegt (rood → groen). --- */
  /* --- Character counter --- */
  /* --- Volgende-knop (stap 1 → 2) — spring-achtige "overshoot" i.p.v.
     een lineaire hover, voelt tactieler dan een platte transitie. --- */
  /* --- Terug-knop (stap 2 → 1) --- */
  /* --- Success state --- */
  /* --- Deel-knop (4-5 sterren) --- */
  /* --- Follow-up bij 1-3 sterren --- */
  /* -------------------------------------------------------
     Gravity Forms — volledig overschrijven van global _form.scss
     De global heeft floating labels (position:absolute) en border:0
     op inputs; hier resetten we dat voor de review modal.
     ------------------------------------------------------- */
  /* Validatie: stap-1 select error */
  /* Beurs-select vastgezet via een geldige QR-scan (zie de inline JS
     hierboven) — blijft wel gewoon een normaal <select> dat meepost bij
     versturen, alleen visueel "op slot" en niet meer aan te passen. */
  /* --- "Zou je ons aanbevelen?" als 2 grote duim-knoppen i.p.v. kale
     radio-bolletjes — zelfde verberg-het-echte-input-truc als bij de
     sterren hierboven, maar dan met de hele label als klikbare knop. */
  /* --- Akkoord-checkbox in een grijs vakje met eigen vinkje i.p.v. de
     kale browser-default checkbox. --- */
  /* --- "Wat vond je het beste?" quick-tags: multi-select pill-chips
     i.p.v. een lijst met checkboxen. --- */
  /* --- Foto-upload (multi-file): GF's eigen drag-drop/uploader-markup
     (.gform_drop_area, .gform_button_select_files, .ginput_preview_list
     etc.) volledig overschrijven i.p.v. de kale plugin-default. --- */
}
.review-modal[hidden] {
  display: none;
}
.review-modal.is-open .review-modal__card {
  -webkit-animation: mk-modal-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation: mk-modal-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.review-modal.is-open .review-modal__backdrop {
  -webkit-animation: mk-backdrop-in 0.18s ease both;
  animation: mk-backdrop-in 0.18s ease both;
}
.review-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  -webkit-transition: opacity 0.28s ease;
  transition: opacity 0.28s ease;
}
.review-modal:not(.is-open) .review-modal__backdrop {
  opacity: 0;
}
.review-modal:not(.is-open) .review-modal__card {
  opacity: 0;
}
.review-modal__card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 24px;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  /* Was overflow-y:auto hierop — de scrollbar respecteert de
     rounded corners niet en sneed daardoor lelijk door de
     afgeronde hoek rechtsboven. Nu clipt deze alleen (overflow:
     hidden), en scrollt alleen __body (die geen radius heeft, dus
     daar speelt dat probleem niet). Als bijkomend voordeel blijft
     de hero met sluitknop nu ook zichtbaar vastgepind bovenin
     tijdens het scrollen. */
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0;
  -webkit-box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  /* Fallback voor desktop: zonder .is-open speelt de mk-modal-in
     animation niet, dus zonder dit blijft de kaart 320ms doodstil
     in beeld staan (de tijd die het sluiten van de sheet altijd
     krijgt) voordat hij abrupt verdwijnt. */
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.review-modal__close {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}
.review-modal__close:hover {
  background: rgba(255, 255, 255, 0.35);
}
.review-modal__hero {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background: linear-gradient(135deg, #dd4290 0%, #8b5cf6 100%);
  border-radius: 24px 24px 0 0;
  padding: 32px 40px 28px;
  position: relative;
  overflow: hidden;
  /* Glazen highlight-sheen: een diagonale, licht wazige lichtstrook
     bovenin, alsof er glas overheen ligt. */
}
.review-modal__hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 60%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 45%, transparent 70%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.review-modal__hero-deco {
  font-size: 13px;
  letter-spacing: 5px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  z-index: 1;
}
.review-modal__title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff !important;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
  margin-bottom: 0px !important;
}
.review-modal__title::after {
  display: none;
}
.review-modal__subtitle {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  position: relative;
  z-index: 1;
  margin: 0px !important;
}
.review-modal__qr-reward {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  -webkit-animation: mk-qr-banner-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation: mk-qr-banner-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  /* Diagonale glans die er één keer overheen beweegt zodra de
     banner verschijnt — trekt de blik zonder continu af te leiden. */
}
.review-modal__qr-reward[hidden] {
  display: none;
}
.review-modal__qr-reward::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 48%, transparent 66%);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-animation: mk-qr-banner-shimmer 1.8s ease 0.3s;
  animation: mk-qr-banner-shimmer 1.8s ease 0.3s;
  pointer-events: none;
}
.review-modal__qr-reward-icon {
  display: inline-block;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 1.5em;
  line-height: 1;
  -webkit-animation: mk-qr-banner-wiggle 2.4s ease-in-out infinite;
  animation: mk-qr-banner-wiggle 2.4s ease-in-out infinite;
}
.review-modal__steps {
  display: none; /* JS toont dit als multi-step actief is */
  gap: 6px;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}
.review-modal__step {
  height: 4px;
  width: 20px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  -webkit-transition: width 0.25s ease, background 0.25s ease;
  transition: width 0.25s ease, background 0.25s ease;
}
.review-modal__step.is-active {
  width: 32px;
  background: rgba(255, 255, 255, 0.95);
}
.review-modal__body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 40px 36px;
  background: #fff;
  -webkit-transition: background-color 0.35s ease;
  transition: background-color 0.35s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
.review-modal__body::-webkit-scrollbar {
  width: 4px;
}
.review-modal__body::-webkit-scrollbar-track {
  background: transparent;
}
.review-modal__body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}
.review-modal__body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.28);
}
.review-modal__body[data-step="2"] {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.035), rgba(255, 255, 255, 0) 220px);
}
.review-modal__avatar-preview {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.review-modal__avatar-preview.is-default {
  opacity: 0.45;
}
.review-modal__avatar-circle {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dd4290, #8b5cf6);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 1;
  -webkit-transition: background 0.25s ease;
  transition: background 0.25s ease;
}
.review-modal__avatar-mood {
  position: absolute;
  left: 30px;
  top: 8px;
  width: 20px;
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  opacity: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transition: opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.review-modal__avatar-mood.is-visible {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.review-modal__avatar-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
}
.review-modal__star-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
}
.review-modal__star-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #dd4290;
  opacity: 0;
  -webkit-transition: opacity 0.12s ease, color 0.15s ease;
  transition: opacity 0.12s ease, color 0.15s ease;
  white-space: nowrap;
}
.review-modal__star-label.is-visible {
  opacity: 1;
}
.review-modal__star-label.is-error {
  color: #ef4444 !important;
}
.review-modal__mood-track {
  position: relative;
  height: 4px;
  margin: 10px 0 4px;
  border-radius: 999px;
  background: -webkit-gradient(linear, left top, right top, from(#ef4444), color-stop(#f59e0b), color-stop(#eab308), color-stop(#84cc16), to(#22c55e));
  background: linear-gradient(90deg, #ef4444, #f59e0b, #eab308, #84cc16, #22c55e);
}
.review-modal__mood-thumb {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #dd4290;
  border: 2px solid #fff;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: left 0.15s ease, opacity 0.15s ease, background 0.15s ease;
  transition: left 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}
.review-modal__char-count {
  font-size: 0.72rem;
  color: rgba(0, 0, 0, 0.55);
  text-align: right;
  margin-top: 4px;
  -webkit-transition: color 0.15s ease;
  transition: color 0.15s ease;
}
.review-modal__char-count.is-near {
  color: #f59e0b;
}
.review-modal__char-count.is-limit {
  color: #ef4444;
}
.review-modal__next-btn {
  width: 100%;
  padding: 13px 24px;
  border: none;
  border-radius: 12px;
  background: #dd4290;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  -webkit-transition: opacity 0.15s ease, -webkit-transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.15s ease, -webkit-transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-top: 8px;
}
.review-modal__next-btn:hover {
  opacity: 0.9;
  -webkit-transform: translateY(-2px) scale(1.02);
  transform: translateY(-2px) scale(1.02);
}
.review-modal__next-btn:active {
  -webkit-transform: scale(0.96);
  transform: scale(0.96);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.review-modal__next-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  -webkit-transform: none;
  transform: none;
}
.review-modal__back-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  padding: 0 0 14px;
  display: block;
  font-family: inherit;
  -webkit-transition: color 0.15s ease;
  transition: color 0.15s ease;
}
.review-modal__back-btn:hover {
  color: rgba(0, 0, 0, 0.65);
}
.review-modal__success {
  text-align: center;
  padding: 16px 0 8px;
  /* --- Beloningsherinnering na versturen (alleen bij een geldige
     beurs-QR-scan, zie mk_review_qr_context()) --- */
  /* Klein, rustig label boven de grote beloning-badge. */
  /* Het echte "toon dit aan de klant"-moment: groot, kleurrijk en van
     een afstandje leesbaar — dit mag nooit klein/onopvallend ogen,
     want dit scherm wordt letterlijk aan de klant getoond bij de
     kraam. */
  /* --- Hoofdprijs: eenmalige, kansbepaalde extra prijs (zie
     mk_beurs_hoofdprijs_trekking() in custom-post-types.php) —
     bewust nóg opvallender dan de gewone beloning hierboven en
     direct zichtbaar (geen tik-onthulling), want dit is een zeldzaam
     moment. --- */
  /* --- Tik-om-te-openen: bezoeker moet een paar keer tikken voor de
     beloning onthuld wordt (zie revealRewardWithTaps() hierboven). --- */
}
.review-modal__success-icon {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 14px;
  display: block;
  -webkit-animation: mk-success-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation: mk-success-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.review-modal__success-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1d1d1f;
  margin-bottom: 8px;
}
.review-modal__success-title::after {
  display: none;
}
.review-modal__success-sub {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.6;
  margin: 0;
}
.review-modal__success-reward {
  margin-top: 18px;
  padding: 18px 20px 22px;
  background: rgba(221, 66, 144, 0.06);
  border: 1.5px dashed rgba(221, 66, 144, 0.3);
  border-radius: var(--radius-md);
  color: rgba(0, 0, 0, 0.65);
  /* Verschijnt pas ná het tikken hierboven — een korte "pop"
     zodat de onthulling ook zelf nog een beetje spanning geeft. */
}
.review-modal__success-reward.is-revealed {
  -webkit-animation: mk-reward-reveal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation: mk-reward-reveal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.review-modal__success-reward-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 10px;
}
.review-modal__success-reward-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #dd4290, #8b5cf6);
  border-radius: 999px;
  -webkit-box-shadow: 0 10px 28px rgba(221, 66, 144, 0.35);
  box-shadow: 0 10px 28px rgba(221, 66, 144, 0.35);
}
.review-modal__success-reward-icon {
  font-size: 2rem;
  line-height: 1;
}
.review-modal__success-reward-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  letter-spacing: -0.01em;
}
.review-modal__success-hoofdprijs {
  margin-top: 18px;
  padding: 20px 20px 24px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: var(--radius-md);
  -webkit-box-shadow: 0 10px 30px rgba(217, 119, 6, 0.4);
  box-shadow: 0 10px 30px rgba(217, 119, 6, 0.4);
  -webkit-animation: mk-success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation: mk-success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.review-modal__success-hoofdprijs-label {
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.review-modal__success-hoofdprijs-value {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 6px;
}
.review-modal__success-hoofdprijs-sub {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.review-modal__success-tap {
  width: 100%;
  margin-top: 18px;
  padding: 26px 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(221, 66, 144, 0.08)), to(rgba(139, 92, 246, 0.05)));
  background: linear-gradient(180deg, rgba(221, 66, 144, 0.08), rgba(139, 92, 246, 0.05));
  border: 1.5px dashed rgba(221, 66, 144, 0.35);
  border-radius: var(--radius-md);
  font-family: inherit;
  cursor: pointer;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease, -webkit-transform 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease, -webkit-transform 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, -webkit-transform 0.15s ease;
  /* Doorlopende, uitnodigende beweging vóórdat er getikt wordt —
     straalt uit dat er iets te doen valt, i.p.v. passief te
     wachten tot iemand toevallig klikt. Wordt tussen tikken door
     steeds hervat (zie JS: box.style.animation = "" na elke tik). */
  -webkit-animation: mk-reward-tap-idle 1.8s ease-in-out infinite;
  animation: mk-reward-tap-idle 1.8s ease-in-out infinite;
  /* Laatste tik: pakje "verdwijnt" terwijl de confetti-burst en de
     beloning zelf verschijnen. */
}
.review-modal__success-tap:hover:not(:disabled) {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(221, 66, 144, 0.13)), to(rgba(139, 92, 246, 0.08)));
  background: linear-gradient(180deg, rgba(221, 66, 144, 0.13), rgba(139, 92, 246, 0.08));
  border-color: rgba(221, 66, 144, 0.5);
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}
.review-modal__success-tap:active:not(:disabled) {
  -webkit-transform: scale(0.98);
  transform: scale(0.98);
}
.review-modal__success-tap:disabled {
  cursor: default;
}
.review-modal__success-tap.is-unwrapped {
  opacity: 0;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease;
}
.review-modal__success-tap-icon {
  font-size: 2.8rem;
  line-height: 1;
  -webkit-filter: drop-shadow(0 4px 10px rgba(221, 66, 144, 0.25));
  filter: drop-shadow(0 4px 10px rgba(221, 66, 144, 0.25));
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: -webkit-transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.review-modal__success-tap-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #dd4290;
  text-align: center;
}
.review-modal__success-tap-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}
.review-modal__success-tap-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(221, 66, 144, 0.18);
  border: 1.5px solid rgba(221, 66, 144, 0.3);
  -webkit-transition: background 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, -webkit-transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: background 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, -webkit-transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: background 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease;
  transition: background 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, -webkit-transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.review-modal__success-tap-dot.is-filled {
  background: #dd4290;
  border-color: #dd4290;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
}
.review-modal__share-btn {
  margin-top: 20px;
  padding: 13px 28px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #dd4290, #8b5cf6);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  -webkit-transition: -webkit-transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-box-shadow 0.15s ease;
  transition: -webkit-transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-box-shadow 0.15s ease;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-box-shadow 0.15s ease;
  -webkit-box-shadow: 0 8px 20px rgba(221, 66, 144, 0.25);
  box-shadow: 0 8px 20px rgba(221, 66, 144, 0.25);
}
.review-modal__share-btn:hover {
  -webkit-transform: translateY(-2px) scale(1.03);
  transform: translateY(-2px) scale(1.03);
  -webkit-box-shadow: 0 12px 26px rgba(221, 66, 144, 0.32);
  box-shadow: 0 12px 26px rgba(221, 66, 144, 0.32);
}
.review-modal__share-btn:active {
  -webkit-transform: scale(0.97);
  transform: scale(0.97);
}
.review-modal__followup {
  margin-top: 20px;
  padding: 16px 18px;
  background: #f4f4f8;
  border-radius: 14px;
}
.review-modal__followup p {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.5;
}
.review-modal__followup-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  color: #1d1d1f;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  -webkit-transition: border-color 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: border-color 0.15s ease, -webkit-transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: border-color 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: border-color 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.review-modal__followup-btn:hover {
  border-color: #dd4290;
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}
.review-modal .gform_wrapper .gfield--type-honeypot,
.review-modal .gform_wrapper .gform_validation_container {
  display: none !important;
}
.review-modal .gform_wrapper .gform_fields {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.review-modal .gform_wrapper .gform-body .gfield,
.review-modal .gform_wrapper .gform_body .gfield {
  position: static !important;
  margin-bottom: 18px;
}
.review-modal .gform_wrapper .gform-body .gfield .gfield_label,
.review-modal .gform_wrapper .gform_body .gfield .gfield_label {
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: rgba(0, 0, 0, 0.65) !important;
  letter-spacing: 0.01em;
  margin-bottom: 6px !important;
  line-height: 1.4 !important;
}
.review-modal .gform_wrapper .gform-body .gfield input[type=text],
.review-modal .gform_wrapper .gform-body .gfield input[type=email],
.review-modal .gform_wrapper .gform-body .gfield input[type=tel],
.review-modal .gform_wrapper .gform_body .gfield input[type=text],
.review-modal .gform_wrapper .gform_body .gfield input[type=email],
.review-modal .gform_wrapper .gform_body .gfield input[type=tel] {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 10px !important;
  /* Minimaal 16px: onder die grens zoomt iOS Safari automatisch
     in zodra je dit veld focust. */
  font-size: 16px !important;
  color: #1d1d1f !important;
  background: #fff !important;
  font-family: inherit;
  -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}
.review-modal .gform_wrapper .gform-body .gfield input[type=text]:focus,
.review-modal .gform_wrapper .gform-body .gfield input[type=email]:focus,
.review-modal .gform_wrapper .gform-body .gfield input[type=tel]:focus,
.review-modal .gform_wrapper .gform_body .gfield input[type=text]:focus,
.review-modal .gform_wrapper .gform_body .gfield input[type=email]:focus,
.review-modal .gform_wrapper .gform_body .gfield input[type=tel]:focus {
  border-color: #dd4290 !important;
  -webkit-box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.12) !important;
  box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.12) !important;
}
.review-modal .gform_wrapper .gform-body .gfield textarea,
.review-modal .gform_wrapper .gform_body .gfield textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  color: #1d1d1f !important;
  background: #fff !important;
  font-family: inherit;
  min-height: 110px;
  resize: vertical;
  outline: none;
}
.review-modal .gform_wrapper .gform-body .gfield textarea:focus,
.review-modal .gform_wrapper .gform_body .gfield textarea:focus {
  border-color: #dd4290 !important;
  -webkit-box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.12) !important;
  box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.12) !important;
}
.review-modal .gform_wrapper .gform-body .gfield select,
.review-modal .gform_wrapper .gform_body .gfield select {
  width: 100% !important;
  padding: 10px 36px 10px 14px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  color: #1d1d1f !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center !important;
  font-family: inherit;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
.review-modal .gform_wrapper .gform-body .gfield select:focus,
.review-modal .gform_wrapper .gform_body .gfield select:focus {
  border-color: #dd4290 !important;
  -webkit-box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.12) !important;
  box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.12) !important;
}
.review-modal .gform_wrapper select.mk-invalid {
  border-color: #ef4444 !important;
  -webkit-box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}
.review-modal .gform_wrapper select.is-qr-locked {
  background-color: rgba(221, 66, 144, 0.05) !important;
  border-color: rgba(221, 66, 144, 0.25) !important;
  color: #dd4290 !important;
  cursor: default !important;
  pointer-events: none;
}
.review-modal .gform_wrapper .mk-star-rating .gfield_radio {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-perspective: 400px;
  perspective: 400px;
}
.review-modal .gform_wrapper .mk-star-rating .gchoice {
  position: relative !important;
}
.review-modal .gform_wrapper .mk-star-rating input[type=radio] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
.review-modal .gform_wrapper .mk-star-rating label {
  display: block !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  font-size: 30px !important;
  cursor: pointer !important;
  line-height: 1 !important;
  -webkit-transition: opacity 0.15s ease, -webkit-transform 0.15s ease;
  transition: opacity 0.15s ease, -webkit-transform 0.15s ease;
  transition: transform 0.15s ease, opacity 0.15s ease;
  transition: transform 0.15s ease, opacity 0.15s ease, -webkit-transform 0.15s ease;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0.4;
  -webkit-filter: grayscale(0.6);
  filter: grayscale(0.6);
}
.review-modal .gform_wrapper .mk-star-rating label.is-lit {
  opacity: 1;
  -webkit-filter: none;
  filter: none;
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}
.review-modal .gform_wrapper .mk-star-rating .gfield_required {
  display: none !important;
}
.review-modal .gform_wrapper .mk-thumbs-rating .gfield_radio {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.review-modal .gform_wrapper .mk-thumbs-rating .gchoice {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
}
.review-modal .gform_wrapper .mk-thumbs-rating input[type=radio] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer;
}
.review-modal .gform_wrapper .mk-thumbs-rating label {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 16px !important;
  margin: 0 !important;
  border: 1.5px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 12px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: rgba(0, 0, 0, 0.65) !important;
  background: #fff !important;
  cursor: pointer !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, -webkit-transform 0.1s ease;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, -webkit-transform 0.1s ease;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.1s ease, -webkit-transform 0.1s ease;
}
.review-modal .gform_wrapper .mk-thumbs-rating label:hover {
  border-color: rgba(221, 66, 144, 0.35) !important;
}
.review-modal .gform_wrapper .mk-thumbs-rating input[type=radio]:checked + label {
  border-color: #dd4290 !important;
  background: rgba(221, 66, 144, 0.08) !important;
  color: #dd4290 !important;
}
.review-modal .gform_wrapper .mk-thumbs-rating input[type=radio]:focus-visible + label {
  -webkit-box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.18) !important;
  box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.18) !important;
}
.review-modal .gform_wrapper .mk-thumbs-rating .gfield_required {
  display: none !important;
}
.review-modal .gform_wrapper .mk-consent-checkbox .gfield_checkbox {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.review-modal .gform_wrapper .mk-consent-checkbox .gchoice {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px !important;
  background: #f4f4f8;
  border-radius: 12px;
}
.review-modal .gform_wrapper .mk-consent-checkbox input[type=checkbox] {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 20px !important;
  height: 20px !important;
  margin: 1px 0 0 !important;
  -moz-appearance: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1.5px solid rgba(0, 0, 0, 0.22) !important;
  border-radius: 5px !important;
  background: #fff !important;
  cursor: pointer;
  position: relative;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.review-modal .gform_wrapper .mk-consent-checkbox input[type=checkbox]:checked {
  background: #dd4290 !important;
  border-color: #dd4290 !important;
}
.review-modal .gform_wrapper .mk-consent-checkbox input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.review-modal .gform_wrapper .mk-consent-checkbox input[type=checkbox]:focus-visible {
  -webkit-box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.18);
  box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.18);
}
.review-modal .gform_wrapper .mk-consent-checkbox label {
  position: static !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  color: rgba(0, 0, 0, 0.65) !important;
  cursor: pointer !important;
}
.review-modal .gform_wrapper .mk-quick-tags .gfield_checkbox {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.review-modal .gform_wrapper .mk-quick-tags .gchoice {
  position: relative;
}
.review-modal .gform_wrapper .mk-quick-tags input[type=checkbox] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer;
}
.review-modal .gform_wrapper .mk-quick-tags label {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 8px 14px !important;
  margin: 0 !important;
  border: 1.5px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: rgba(0, 0, 0, 0.65) !important;
  background: #fff !important;
  cursor: pointer !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.review-modal .gform_wrapper .mk-quick-tags label:hover {
  border-color: rgba(221, 66, 144, 0.35) !important;
}
.review-modal .gform_wrapper .mk-quick-tags input[type=checkbox]:checked + label {
  border-color: #dd4290 !important;
  background: rgba(221, 66, 144, 0.08) !important;
  color: #dd4290 !important;
}
.review-modal .gform_wrapper .mk-quick-tags input[type=checkbox]:focus-visible + label {
  -webkit-box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.18) !important;
  box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.18) !important;
}
.review-modal .gform_wrapper .mk-photo-upload {
  /* --- Lijst met toegevoegde foto's --- */
  /* De voortgangsbalk is bij een al-geuploade rij altijd 100%, dus
     alleen het percentage-label als klein "klaar"-label tonen i.p.v.
     een volledige (nutteloze) balk erbij. */
}
.review-modal .gform_wrapper .mk-photo-upload .ginput_container_fileupload {
  padding: 20px !important;
  border: 1.5px dashed rgba(0, 0, 0, 0.15) !important;
  border-radius: 12px !important;
  background: #fafafd;
  text-align: center;
  -webkit-transition: border-color 0.15s ease, background 0.15s ease;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.review-modal .gform_wrapper .mk-photo-upload .gform_drop_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}
.review-modal .gform_wrapper .mk-photo-upload .gform_drop_instructions {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.6);
}
.review-modal .gform_wrapper .mk-photo-upload .gform_button_select_files {
  padding: 9px 20px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #1d1d1f !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  font-family: inherit;
  cursor: pointer;
  -webkit-transition: border-color 0.15s ease, color 0.15s ease;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.review-modal .gform_wrapper .mk-photo-upload .gform_button_select_files:hover {
  border-color: #dd4290 !important;
  color: #dd4290 !important;
}
.review-modal .gform_wrapper .mk-photo-upload .gform_fileupload_rules {
  display: block;
  margin-top: 10px;
  font-size: 0.72rem;
  color: rgba(0, 0, 0, 0.55);
}
.review-modal .gform_wrapper .mk-photo-upload .ginput_preview_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  text-align: left;
}
.review-modal .gform_wrapper .mk-photo-upload .ginput_preview {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.review-modal .gform_wrapper .mk-photo-upload .gfield_fileupload_filename {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1d1d1f;
}
.review-modal .gform_wrapper .mk-photo-upload .gfield_fileupload_filesize {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 0.72rem;
  color: rgba(0, 0, 0, 0.55);
}
.review-modal .gform_wrapper .mk-photo-upload .gfield_fileupload_progress {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.review-modal .gform_wrapper .mk-photo-upload .gfield_fileupload_progress .gfield_fileupload_progressbar {
  display: none;
}
.review-modal .gform_wrapper .mk-photo-upload .gfield_fileupload_progress .gfield_fileupload_percent {
  font-size: 0.7rem;
  font-weight: 700;
  color: #dd4290;
  background: rgba(221, 66, 144, 0.1);
  border-radius: 999px;
  padding: 2px 8px;
}
.review-modal .gform_wrapper .mk-photo-upload .gform_delete_file {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.65) !important;
  cursor: pointer;
  -webkit-transition: background 0.15s ease, color 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease;
  padding: 0 !important;
}
.review-modal .gform_wrapper .mk-photo-upload .gform_delete_file .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.review-modal .gform_wrapper .mk-photo-upload .gform_delete_file:hover {
  background: rgba(84, 181, 125, 0.15) !important;
  color: #419564 !important;
}
.review-modal .gform_wrapper .gform_footer,
.review-modal .gform_wrapper .gform_page_footer {
  margin-top: 8px;
  padding: 0 !important;
}
.review-modal .gform_wrapper .gform_footer input[type=submit],
.review-modal .gform_wrapper .gform_footer button[type=submit],
.review-modal .gform_wrapper .gform_footer .gform_button,
.review-modal .gform_wrapper .gform_page_footer input[type=submit],
.review-modal .gform_wrapper .gform_page_footer button[type=submit],
.review-modal .gform_wrapper .gform_page_footer .gform_button {
  width: 100% !important;
  padding: 13px 24px !important;
  border: none !important;
  border-radius: 12px !important;
  background: #dd4290 !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  -webkit-transition: opacity 0.15s ease, -webkit-transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.15s ease, -webkit-transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: inherit;
  display: block !important;
}
.review-modal .gform_wrapper .gform_footer input[type=submit]:hover,
.review-modal .gform_wrapper .gform_footer button[type=submit]:hover,
.review-modal .gform_wrapper .gform_footer .gform_button:hover,
.review-modal .gform_wrapper .gform_page_footer input[type=submit]:hover,
.review-modal .gform_wrapper .gform_page_footer button[type=submit]:hover,
.review-modal .gform_wrapper .gform_page_footer .gform_button:hover {
  opacity: 0.9;
  -webkit-transform: translateY(-2px) scale(1.02);
  transform: translateY(-2px) scale(1.02);
}
.review-modal .gform_wrapper .gform_footer input[type=submit]:active,
.review-modal .gform_wrapper .gform_footer button[type=submit]:active,
.review-modal .gform_wrapper .gform_footer .gform_button:active,
.review-modal .gform_wrapper .gform_page_footer input[type=submit]:active,
.review-modal .gform_wrapper .gform_page_footer button[type=submit]:active,
.review-modal .gform_wrapper .gform_page_footer .gform_button:active {
  -webkit-transform: scale(0.96);
  transform: scale(0.96);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.review-modal .gform_wrapper .gform_confirmation_message {
  text-align: center;
  padding: 24px 0;
  font-size: 1rem;
  color: #1d1d1f;
  line-height: 1.6;
}
.review-modal .gform_wrapper .gfield_error input, .review-modal .gform_wrapper .gfield_error select, .review-modal .gform_wrapper .gfield_error textarea {
  border-color: #ef4444 !important;
}
.review-modal .gform_wrapper .validation_message,
.review-modal .gform_wrapper .gfield_validation_message {
  font-size: 0.75rem;
  color: #ef4444;
  margin-top: 4px;
}
.review-modal .gform_wrapper .gform_validation_errors {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.07);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
}
.review-modal .gform_wrapper .gform_validation_errors h2 {
  font-size: 0.9rem;
  color: #ef4444;
}
.review-modal .gform_wrapper .gform_validation_errors h2::after {
  display: none;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 680px) {
  .reviews-section {
    padding: 40px 0;
    /* Horizontale slider i.p.v. gestapelde grid: eerste kaart ~80vw
       breed zodat het volgende item deels zichtbaar is (= scroll-hint). */
  }
  .reviews-section__header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 16px;
  }
  .reviews-section__write-btn {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
  .reviews-section__grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    padding: 4px 20px 12px;
    margin: 0 -20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .reviews-section__grid::-webkit-scrollbar {
    display: none;
  }
  .review-card {
    scroll-snap-align: start;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 80vw;
    flex: 0 0 80vw;
    max-width: 80vw;
  }
  /* Open/dicht-gedrag (align-items: flex-end, van-onder-in-beeld
     schuiven, sleepgreep) komt van het gedeelde .mk-bottom-sheet
     component (_bottom-sheet.scss) — hier alleen nog wat
     review-specifieke opmaak op kleine schermen. */
  .review-modal__hero {
    padding: 28px 24px 22px;
  }
  /* De sleepgreep overlayt hier op de gekleurde hero-gradient i.p.v.
     een witte kaart-achtergrond — lichter kleuren voor contrast. */
  .review-modal .mk-bottom-sheet__handle {
    background: rgba(255, 255, 255, 0.55);
  }
  .review-modal__body {
    padding: 20px 24px 28px;
  }
}
/* --- Sparkle-burst bij het kiezen van de hoogste mood-emoji (5) — losse
   elementen die JS op document.body plakt op de positie van de emoji. --- */
.mk-sparkle {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  -webkit-animation: mk-sparkle-fly 0.7s ease-out forwards;
  animation: mk-sparkle-fly 0.7s ease-out forwards;
}

@-webkit-keyframes mk-sparkle-fly {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(var(--dx), var(--dy)) scale(0.3);
    transform: translate(var(--dx), var(--dy)) scale(0.3);
  }
}

@keyframes mk-sparkle-fly {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(var(--dx), var(--dy)) scale(0.3);
    transform: translate(var(--dx), var(--dy)) scale(0.3);
  }
}
/* --- Confetti-burst bij het volledig uitpakken van de beloning (zie
   confettiBurst() in de inline JS) — rechthoekige snippers i.p.v. de
   ronde .mk-sparkle hierboven, voor een echt "pakje openscheuren"-gevoel. --- */
.mk-confetti-piece {
  position: fixed;
  border-radius: 2px;
  pointer-events: none;
  z-index: 99999;
  -webkit-animation: mk-confetti-fall 0.9s cubic-bezier(0.25, 0.65, 0.35, 1) forwards;
  animation: mk-confetti-fall 0.9s cubic-bezier(0.25, 0.65, 0.35, 1) forwards;
}

/* ================================================
   KAART ZOEKER — TCGdex zoekblok + collectie-waarde
   ================================================ */
/* Grijs kaart-silhouet als fallback wanneer de echte afbeelding niet laadt */
.mk-card-img--fallback {
  -o-object-fit: contain !important;
  object-fit: contain !important;
  padding: 12%;
  opacity: 0.9;
}

/* Bevestigingstoastje bij "toevoegen om te verkopen" — mobiel: klein
   pilletje onderin. Desktop: zie media query hieronder voor de grotere,
   gecentreerde variant met vink-animatie. */
.mk-card-finder__toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  -webkit-transform: translate(-50%, 16px);
  transform: translate(-50%, 16px);
  z-index: 10000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  max-width: 90vw;
  padding: 12px 20px;
  background: #1d1d1f;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 999px;
  -webkit-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease;
}
.mk-card-finder__toast.is-visible {
  opacity: 1;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.mk-card-finder__toast-icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.mk-card-finder__toast-icon circle, .mk-card-finder__toast-icon path {
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mk-card-finder__toast-icon circle {
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  -webkit-transition: stroke-dashoffset 0.4s ease;
  transition: stroke-dashoffset 0.4s ease;
}
.mk-card-finder__toast-icon path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  -webkit-transition: stroke-dashoffset 0.25s ease 0.3s;
  transition: stroke-dashoffset 0.25s ease 0.3s;
}

.mk-card-finder__toast.is-visible .mk-card-finder__toast-icon circle {
  stroke-dashoffset: 0;
}
.mk-card-finder__toast.is-visible .mk-card-finder__toast-icon path {
  stroke-dashoffset: 0;
}

/* Desktop: groter, gecentreerd op het scherm i.p.v. een klein pilletje
   onderin — meer aanwezig, met ruimte voor het vink-icoon en de
   kaartnaam. */
@media screen and (min-width: 769px) {
  .mk-card-finder__toast {
    left: 50%;
    top: 50%;
    bottom: auto;
    -webkit-transform: translate(-50%, -50%) scale(0.92);
    transform: translate(-50%, -50%) scale(0.92);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    gap: 14px;
    padding: 32px 44px;
    max-width: 380px;
    border-radius: var(--radius-lg);
    font-size: 1.05rem;
    -webkit-box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    -webkit-transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mk-card-finder__toast.is-visible {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
  .mk-card-finder__toast-icon {
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
  }
}
.mk-card-finder {
  padding: 60px 0;
  position: relative;
  /* Sticky wrapper (zoekveld + filters) — blijft op mobiel onder de
     header vastgeplakt terwijl je door resultaten scrolt, zodat je niet
     terug hoeft te scrollen om je zoekterm/filters aan te passen. */
  /* Op de homepage is dit een echte submit-button (formulier navigeert
     naar de resultatenpagina); op de resultatenpagina zelf is het een
     decoratief <span> (het zoeken daar gaat live/via JS). Button-reset
     zodat 'm er in beide gevallen identiek uitziet. */
  /* Filters + "Meerdere selecteren" op één rij — op de resultatenpagina
     (zie __top hieronder) is er nu de volle 1100px breed, dus hoeft de
     toolbar niet meer als eigen regel eronder te bungelen. */
  /* 3 velden (era → set → zeldzaamheid) i.p.v. 2 — op smalle schermen
     de zeldzaamheid-select op een eigen volle-breedte regel laten
     vallen, era+set blijven naast elkaar (dat is de logische 2-staps). */
  /* --- Kaart-tegel --- */
  /* Selectie-cirkel, alleen zichtbaar in "meerdere selecteren"-modus
     (zie .is-multiselect op de root). */
  /* --- States: loading / empty / error --- */
  /* --- Skeleton-loading: shimmerende kaart-vormen i.p.v. alleen een
     spinner, zodat de resultaten al "aan het verschijnen" lijken. --- */
  /* --- Recente zoekopdrachten --- */
  /* --- Typo-suggestie --- */
  /* --- Collectie-balk — nadruk op verkopen, dus prominenter dan een neutrale kaart --- */
  /* Homepage-teaser: alleen zoekbalk + filters, geen resultaten eronder —
     iets minder padding onderin zodat het niet onnodig hoog oogt. */
  /* Duidelijke, volle-breedte "Zoeken"-knop i.p.v. alleen op Enter
     drukken moeten vertrouwen — mensen zien 'm liever expliciet staan. */
}
.mk-card-finder__inner {
  max-width: 1000px;
  margin: auto;
  width: 92%;
}
.mk-card-finder__heading {
  text-align: center;
  margin-bottom: 28px;
}
.mk-card-finder__heading h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  margin-bottom: 6px;
}
.mk-card-finder__heading h2::after {
  display: none;
}
.mk-card-finder__subtitle {
  display: block;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
}
.mk-card-finder__search-bar {
  max-width: 480px;
  margin: 0 auto 24px;
  position: relative;
  z-index: 3;
}
.mk-card-finder__search {
  position: relative;
  margin-bottom: 10px;
}
.mk-card-finder__search-icon {
  position: absolute;
  top: 50%;
  /* Tikdoel is 24x24 (WCAG-minimum) i.p.v. het 18px icoontje zelf als
     klikvlak — daarom left hier gecorrigeerd zodat het grotere vlak
     nog steeds gecentreerd staat op dezelfde plek waar het icoontje
     altijd al stond. */
  left: 13px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}
.mk-card-finder__search-icon svg {
  width: 18px;
  height: 18px;
}
.mk-card-finder span.mk-card-finder__search-icon {
  pointer-events: none;
  cursor: default;
}
.mk-card-finder__input {
  width: 100%;
  padding: 14px 44px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-lg);
  background: #fff;
  font-family: inherit;
  /* Minimaal 16px: onder die grens zoomt iOS Safari automatisch in
     zodra je dit veld focust — dat "inzoomen" dat je zag. */
  font-size: 16px;
  color: #1d1d1f;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
  /* iOS: standaard "wis"-kruisje in een search-input verbergen —
     we tekenen zelf een consistente knop (__clear-btn). */
}
.mk-card-finder__input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.55);
}
.mk-card-finder__input::-moz-placeholder {
  color: rgba(0, 0, 0, 0.55);
}
.mk-card-finder__input:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.55);
}
.mk-card-finder__input::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.55);
}
.mk-card-finder__input::placeholder {
  color: rgba(0, 0, 0, 0.55);
}
.mk-card-finder__input::-webkit-search-cancel-button {
  display: none;
}
.mk-card-finder__input:focus {
  outline: none;
  border-color: rgba(221, 66, 144, 0.4);
  -webkit-box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.1);
  box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.1);
}
.mk-card-finder__clear-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.65);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mk-card-finder__clear-btn[hidden] {
  display: none;
}
.mk-card-finder__clear-btn:hover {
  background: rgba(0, 0, 0, 0.12);
}
.mk-card-finder__filters-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 12px;
}
.mk-card-finder__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  gap: 8px;
}
.mk-card-finder__filter-era, .mk-card-finder__filter-set {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  min-width: 120px;
}
.mk-card-finder__filter-rarity {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
}
.mk-card-finder__filter-era, .mk-card-finder__filter-set, .mk-card-finder__filter-rarity {
  padding: 9px 12px;
  border: 1.5px solid rgba(0, 0, 0, 0.09);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.65);
  -webkit-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}
.mk-card-finder__filter-era:focus, .mk-card-finder__filter-set:focus, .mk-card-finder__filter-rarity:focus {
  outline: none;
  border-color: rgba(221, 66, 144, 0.4);
}
.mk-card-finder__filter-era:disabled, .mk-card-finder__filter-set:disabled, .mk-card-finder__filter-rarity:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.mk-card-finder__results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  min-height: 40px;
}
.mk-card-finder__card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 14px;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  -webkit-animation: mk-fade-in 0.25s ease both;
  animation: mk-fade-in 0.25s ease both;
  -webkit-transition: border-color 0.2s ease, -webkit-transform 0.2s var(--transition), -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, -webkit-transform 0.2s var(--transition), -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s var(--transition), box-shadow 0.2s ease, border-color 0.2s ease;
  transition: transform 0.2s var(--transition), box-shadow 0.2s ease, border-color 0.2s ease, -webkit-transform 0.2s var(--transition), -webkit-box-shadow 0.2s ease;
  /* Tastbare tik-feedback — voelt fysieker aan dan alleen wachten
     tot de popup opent. */
  /* Al toegevoegd aan de collectie — vinkje rechtsboven op de tegel. */
}
.mk-card-finder__card:hover {
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
  -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
  border-color: rgba(221, 66, 144, 0.2);
}
.mk-card-finder__card:active {
  -webkit-transform: scale(0.97);
  transform: scale(0.97);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.mk-card-finder__card.is-added {
  border-color: rgba(221, 66, 144, 0.3);
}
.mk-card-finder__card.is-selected {
  border-color: #dd4290;
  -webkit-box-shadow: 0 0 0 2px rgba(221, 66, 144, 0.25);
  box-shadow: 0 0 0 2px rgba(221, 66, 144, 0.25);
}
.mk-card-finder__card-added {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dd4290;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 1;
  z-index: 1;
}
.mk-card-finder__card.is-added .mk-card-finder__card-added {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mk-card-finder__card-select {
  display: none;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  z-index: 1;
}
.mk-card-finder__card-visual {
  width: 100%;
  aspect-ratio: 2.5/3.5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #f4f4f8;
}
.mk-card-finder__card-visual img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
.mk-card-finder__card-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1d1d1f;
  line-height: 1.3;
}
.mk-card-finder__state {
  grid-column: 1/-1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.9rem;
  text-align: center;
  -webkit-animation: mk-fade-in 0.25s ease both;
  animation: mk-fade-in 0.25s ease both;
}
.mk-card-finder__state--error {
  color: #ef4444;
}
.mk-card-finder__skeleton {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.mk-card-finder__skeleton-card {
  aspect-ratio: 2.5/3.5;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  padding: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}
.mk-card-finder__skeleton-card span {
  display: block;
  border-radius: var(--radius-md);
  background: linear-gradient(100deg, #eee 30%, #f6f6f6 50%, #eee 70%);
  background-size: 220% 100%;
  -webkit-animation: mk-shimmer 1.3s ease-in-out infinite;
  animation: mk-shimmer 1.3s ease-in-out infinite;
}
.mk-card-finder__skeleton-card span:first-child {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.mk-card-finder__skeleton-card span:last-child {
  height: 12px;
  border-radius: 6px;
  width: 70%;
  -ms-flex-item-align: center;
  align-self: center;
}
.mk-card-finder__recent-chips {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.mk-card-finder__recent-chip {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 0, 0, 0.09);
  background: #fff;
  color: rgba(0, 0, 0, 0.65);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: border-color 0.15s ease, color 0.15s ease;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mk-card-finder__recent-chip:hover {
  border-color: rgba(221, 66, 144, 0.35);
  color: #dd4290;
}
.mk-card-finder__suggestion {
  margin-top: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(221, 66, 144, 0.3);
  background: rgba(221, 66, 144, 0.06);
  color: #dd4290;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}
.mk-card-finder__suggestion[hidden] {
  display: none;
}
.mk-card-finder__suggestion:hover {
  background: rgba(221, 66, 144, 0.12);
}
.mk-card-finder__state-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  color: rgba(0, 0, 0, 0.18);
}
.mk-card-finder__state-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1d1d1f;
}
.mk-card-finder__state-desc {
  margin: 0;
  max-width: 320px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
}
.mk-card-finder__query {
  font-weight: 700;
  color: #dd4290;
}
.mk-card-finder__query::before {
  content: "“";
}
.mk-card-finder__query::after {
  content: "”";
}
.mk-card-finder__spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(221, 66, 144, 0.2);
  border-top-color: #dd4290;
  -webkit-animation: mk-spin 0.7s linear infinite;
  animation: mk-spin 0.7s linear infinite;
}
.mk-card-finder__collection-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(221, 66, 144, 0.08), rgba(239, 120, 21, 0.06));
  border: 1.5px solid rgba(221, 66, 144, 0.2);
  border-radius: var(--radius-lg);
  -webkit-box-shadow: 0 4px 16px rgba(221, 66, 144, 0.08);
  box-shadow: 0 4px 16px rgba(221, 66, 144, 0.08);
}
.mk-card-finder__collection-bar[hidden] {
  display: none;
}
.mk-card-finder__collection-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2px;
}
.mk-card-finder__collection-count {
  font-size: 1rem;
  font-weight: 800;
  color: #1d1d1f;
}
.mk-card-finder__collection-hint {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.6);
}
.mk-card-finder__load-more-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 20px;
}
.mk-card-finder__load-more-wrap[hidden] {
  display: none;
}
.mk-card-finder__load-more {
  background: #fff;
  color: #1d1d1f;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: none;
  box-shadow: none;
}
.mk-card-finder__load-more:hover {
  border-color: rgba(221, 66, 144, 0.35);
  color: #dd4290;
}
.mk-card-finder__load-more:disabled {
  opacity: 0.6;
  cursor: default;
}
.mk-card-finder--intro .mk-card-finder__search-bar {
  margin-bottom: 0;
}
.mk-card-finder__submit {
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 12px;
}
.mk-card-finder__submit:disabled {
  opacity: 0.7;
  cursor: default;
}
.mk-card-finder__submit.is-shake {
  -webkit-animation: mk-shake 0.4s ease;
  animation: mk-shake 0.4s ease;
}

@keyframes mk-shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  25% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  75% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
}
/* ================================================
   KAART ZOEKER — RESULTATENPAGINA
   Losse pagina (mk/kaart-zoeker-resultaten): hergebruikt alle
   .mk-card-finder__* stijlen hierboven voor zoekbalk/filters/
   resultaten/states, en voegt hier alleen de pagina-wrapper en
   de losse "view"-secties (detail / verkoop-stappen) aan toe —
   geen enkele daarvan is nog een pop-up.
   ================================================ */
/* #page_container/#main-content staan sitebreed op overflow:hidden (voor
   decoratieve full-bleed elementen elders) — maar overflow anders dan
   "visible" op een ancestor breekt position:sticky voor descendants
   volledig. Alleen op deze resultatenpagina (waar de zij-balk sticky moet
   zijn) hier weer opheffen. */
body:has(.mk-card-results) #page_container,
body:has(.mk-card-results) #main-content {
  overflow: visible;
}

.mk-card-results {
  padding: 40px 0 80px;
  /* Volle-breedte kop (heading, stappen, welkom-terug, zoekbalk/filters,
     toolbar) — staat als eigen rij bóven de 2-koloms rij (__main +
     __sidebar), dus over de hele 1100px in plaats van beperkt tot de
     __main-kolom. flex-basis 100% dwingt 'm op een eigen rij door de
     flex-wrap op __layout. */
  /* --- Stap-indicator --- */
  /* --- Welkom-terug-banner --- */
  /* --- Toolbar (meerdere selecteren) — zit nu naast de filters in
     __filters-row, geen eigen regel/marge meer nodig. --- */
  /* --- Bulk-actiebalk (verschijnt bij selectie in "meerdere selecteren") ---
     z-index hoger dan de collectie-zij-balk (die wordt op mobiel z-index:500
     en position:fixed onderin) — anders verdween deze balk er half achter. */
  /* Precies één view tegelijk zichtbaar (JS zet [hidden]); elke keer
     dat een view weer verschijnt speelt de fade-in opnieuw af. */
  /* ================================================
     PERSISTENTE COLLECTIE-ZIJKOLOM (desktop) /
     -balk (mobiel, zie media query onderaan)
     ================================================ */
}
.mk-card-results__layout {
  max-width: 1100px;
  margin: auto;
  width: 92%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 32px;
  /* Was flex-start: dan is de __sidebar flex-item maar zo hoog als
     z'n eigen inhoud (sidebar-inner), en heeft de sticky binnenkant
     geen ruimte om ook echt "vast te blijven" tijdens het scrollen
     door de (langere) resultatenkolom. Met stretch krijgt __sidebar
     dezelfde hoogte als de rij (dus als __main), zodat sticky
     daadwerkelijk zichtbaar wordt. */
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.mk-card-results__top {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  width: 100%;
  /* Op de resultatenpagina is er nu de volle ~1100px breed i.p.v. de
     smalle 480px van de homepage-zoekbalk — zoekveld mag breder, en
     de zeldzaamheid-select hoeft niet meer per se op een eigen regel
     te vallen (dat was alleen nodig omdat er te weinig ruimte was). */
}
@media screen and (min-width: 900px) {
  .mk-card-results__top .mk-card-finder__search-bar {
    max-width: none;
    margin: 0 0 16px;
  }
  .mk-card-results__top .mk-card-finder__filter-rarity {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 160px;
    flex: 1 1 160px;
  }
}
.mk-card-results__main {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 560px;
  flex: 1 1 560px;
  min-width: 0;
  max-width: 640px;
}
.mk-card-results__heading {
  width: 100%;
  margin-bottom: 20px;
}
.mk-card-results__heading h1 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  margin: 0 0 6px;
}
.mk-card-results__heading h1::after {
  display: none;
}
.mk-card-results__heading p {
  font-size: 0.95rem;
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
  width: 100%;
}
.mk-card-results__steps {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  gap: 6px;
}
.mk-card-results__steps li {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.55);
  padding-bottom: 8px;
  border-bottom: 3px solid rgba(0, 0, 0, 0.08);
  -webkit-transition: color 0.2s ease, border-color 0.2s ease;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.mk-card-results__steps li.is-active {
  color: #dd4290;
  border-color: #dd4290;
}
.mk-card-results__welcome-back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(221, 66, 144, 0.09), rgba(239, 120, 21, 0.06));
  border: 1.5px solid rgba(221, 66, 144, 0.25);
  border-radius: var(--radius-lg);
  -webkit-animation: mk-fade-in 0.3s ease both;
  animation: mk-fade-in 0.3s ease both;
}
.mk-card-results__welcome-back[hidden] {
  display: none;
}
.mk-card-results__welcome-back p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.65);
}
.mk-card-results__toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.mk-card-results__multiselect-toggle {
  background: none;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
  cursor: pointer;
  -webkit-transition: border-color 0.15s ease, color 0.15s ease;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mk-card-results__multiselect-toggle:hover {
  border-color: rgba(221, 66, 144, 0.35);
  color: #dd4290;
}
.mk-card-results__bulk-bar {
  position: sticky;
  bottom: 14px;
  z-index: 600;
  margin-top: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: #1d1d1f;
  color: #fff;
  border-radius: var(--radius-lg);
  -webkit-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}
.mk-card-results__bulk-bar[hidden] {
  display: none;
}
.mk-card-results__bulk-count {
  font-size: 0.85rem;
  font-weight: 600;
}
.mk-card-results__view {
  -webkit-animation: mk-fade-in 0.3s ease both;
  animation: mk-fade-in 0.3s ease both;
}
.mk-card-results__back {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  font-family: inherit;
  -webkit-transition: color 0.15s ease;
  transition: color 0.15s ease;
}
.mk-card-results__back:hover {
  color: #dd4290;
}
.mk-card-results__sidebar {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 400px;
  flex: 0 0 400px;
  width: 400px;
  /* Zonder dit rekt een flex-item mee met de intrinsieke breedte van
     z'n inhoud (bv. een lange kaartnaam die niet kan afbreken) — dan
     varieert de breedte per collectie i.p.v. altijd 300px te zijn. */
  min-width: 0;
}
.mk-card-results__sidebar[hidden] {
  display: none;
}
.mk-card-results__sidebar-inner {
  width: 100%;
  position: sticky;
  top: var(--kz-sticky-top, 100px);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-lg);
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  padding: 20px;
}
.mk-card-results__sidebar-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.mk-card-results__sidebar-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #1d1d1f;
}
.mk-card-results__sidebar-title::after {
  display: none;
}
.mk-card-results__sidebar-empty {
  margin: 0 0 16px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.6);
}
.mk-card-results__sidebar-empty[hidden] {
  display: none;
}
.mk-card-results__sidebar-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.mk-card-results__sidebar-list[hidden] {
  display: none;
}
.mk-card-results__sidebar-summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-top: 12px;
  margin-bottom: 14px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
}
.mk-card-results__sidebar-summary .mk-card-finder__collection-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.65);
}
.mk-card-results__sidebar-total {
  font-size: 1.1rem;
  font-weight: 800;
  color: #dd4290;
}

.mk-card-results__sidebar-inner .mk-card-finder__collection-btn {
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.mk-card-results__sidebar-inner .mk-card-finder__collection-btn[hidden] {
  display: none;
}

/* "Meerdere selecteren"-modus: checkbox-cirkel per tegel tonen, tikken op
   een tegel selecteert i.p.v. de detail-sectie te openen (zie JS). */
.mk-card-results.is-multiselect .mk-card-finder__card-select {
  display: block;
}

.mk-card-finder__card.is-selected .mk-card-finder__card-select {
  background: #dd4290;
  border-color: #dd4290;
}
.mk-card-finder__card.is-selected .mk-card-finder__card-select::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

@-webkit-keyframes mk-spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes mk-spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes mk-fade-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes mk-fade-in {
  from {
    opacity: 0;
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes mk-modal-in {
  from {
    opacity: 0;
    -webkit-transform: scale(0.94) translateY(12px);
    transform: scale(0.94) translateY(12px);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
  }
}
@-webkit-keyframes mk-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -20% 0;
  }
}
@keyframes mk-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -20% 0;
  }
}
/* Sticky zoekbalk — alleen op mobiel, waar dit het meeste verschil maakt
   (op desktop zit de zoekbalk toch al ruim boven de resultaten). */
@media screen and (max-width: 768px) {
  .mk-card-finder__search-bar {
    position: sticky;
    top: var(--kz-sticky-top, 90px);
    background: #f8f8fc;
    padding: 10px 0 4px;
    margin: 0 0 14px;
  }
}
/* ================================================
   KAART-DETAIL POPUP — bottom-sheet op mobiel, gecentreerde
   modal op desktop (zie bottom-sheet.js voor het open/dicht-
   gedrag). .mk-sell-section (verkoop-stappen) blijft wél
   gewoon inline op de pagina, geen pop-up.
   ================================================ */
.mk-card-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 16px;
}
.mk-card-detail-modal[hidden] {
  display: none;
}
.mk-card-detail-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-transition: opacity 0.28s ease;
  transition: opacity 0.28s ease;
}
.mk-card-detail-modal:not(.is-open) .mk-card-detail-modal__backdrop {
  opacity: 0;
}
.mk-card-detail-modal:not(.is-open) .mk-card-detail-section {
  opacity: 0;
}

.mk-card-detail-section,
.mk-sell-section {
  background: #fff;
  border-radius: 24px;
  -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* .mk-sell-section heeft geen aparte __body-wrapper (inhoud staat direct
   in de sectie) — dus krijgt de padding hier; .mk-card-detail-section
   verdeelt 'm zelf over __visual (top) en __body (rest). */
.mk-sell-section {
  padding: 24px 26px 28px;
}

.mk-card-detail-section {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding-top: 20px;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  -webkit-animation: mk-modal-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation: mk-modal-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
  /* Dekt de hele popup af zolang de kaartdetails nog worden opgehaald —
     zonder dit oogde de tussentijdse staat (lege afbeelding, dashes,
     "Laden…") als een kapotte/lege kaart i.p.v. duidelijk "nog even
     geduld". Verborgen zodra .is-loading van de sectie afgaat. */
  /* Fase 4: setnaam als link naar de eigen SEO-setpagina, indien
     beschikbaar (zie setUrl in api-tcgdex.php). */
  /* Wij kopen in voor 70% contant of 80-85% in ruil voor andere kaarten. */
}
.mk-card-detail-section__close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.65);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}
.mk-card-detail-section__close:hover {
  background: rgba(0, 0, 0, 0.12);
}
.mk-card-detail-section__loading {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: inherit;
}
.mk-card-detail-section.is-loading .mk-card-detail-section__loading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mk-card-detail-section__loading-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(221, 66, 144, 0.15);
  border-top-color: #dd4290;
  -webkit-animation: mk-spin 0.7s linear infinite;
  animation: mk-spin 0.7s linear infinite;
}
.mk-card-detail-section__loading-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
}
.mk-card-detail-section__visual {
  padding: 12px 26px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* Nodig zodat de rotateX/rotateY-tilt op __image hieronder er
     daadwerkelijk 3D uitziet i.p.v. plat vervormd. */
  -webkit-perspective: 700px;
  perspective: 700px;
}
.mk-card-detail-section__body {
  padding: 20px 26px 28px;
}
.mk-card-detail-section__image {
  max-width: 220px;
  width: 100%;
  border-radius: 12px;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  /* Transform + transitie worden inline gezet door de mousemove-tilt
     in kaart-zoeker-resultaten.js — geen transitie hier standaard,
     anders "sleept" de tilt achter de cursor aan i.p.v. 'm 1-op-1 te
     volgen (de JS zet 'm alleen tijdelijk aan bij het terugveren). */
  will-change: transform;
}
.mk-card-detail-section__set {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 4px;
}
.mk-card-detail-section__set-link {
  color: inherit;
}
.mk-card-detail-section__set-link:hover {
  color: #dd4290;
  text-decoration: underline;
}
.mk-card-detail-section__name {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1d1d1f;
  margin: 0 0 4px;
}
.mk-card-detail-section__rarity {
  display: block;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 16px;
}
.mk-card-detail-section__price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(221, 66, 144, 0.06);
  border: 1px solid rgba(221, 66, 144, 0.15);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}
.mk-card-detail-section__price-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.mk-card-detail-section__price-row:first-child {
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(221, 66, 144, 0.18);
}
.mk-card-detail-section__price-label {
  font-size: 0.78rem;
  color: rgba(0, 0, 0, 0.6);
}
.mk-card-detail-section__price-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #dd4290;
}
.mk-card-detail-section__price-disclaimer {
  margin: 8px 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.55);
}
.mk-card-detail-section__price-disclaimer strong {
  color: rgba(0, 0, 0, 0.6);
}
.mk-card-detail-section__condition {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mk-card-detail-section__condition-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
}
.mk-card-detail-section__condition-select {
  padding: 8px 12px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  color: #1d1d1f;
}
.mk-card-detail-section__payout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  background: #f8f8fc;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}
.mk-card-detail-section__payout-title {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.55);
}
.mk-card-detail-section__payout-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.6);
}
.mk-card-detail-section__payout-row strong {
  color: #dd4290;
  white-space: nowrap;
}
.mk-card-detail-section__payout-row span:first-child {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
}
.mk-card-detail-section__payout-row span:last-child {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  font-weight: 700;
  color: #1d1d1f;
  text-align: right;
  white-space: nowrap;
}
.mk-card-detail-section__cardmarket-link {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
  text-decoration: none;
  margin-bottom: 14px;
  -webkit-transition: color 0.15s ease;
  transition: color 0.15s ease;
}
.mk-card-detail-section__cardmarket-link[hidden] {
  display: none;
}
.mk-card-detail-section__cardmarket-link:hover {
  color: #dd4290;
}
.mk-card-detail-section__qty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 16px;
}
.mk-card-detail-section__qty-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
}
.mk-card-detail-section__qty-stepper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 14px;
}
.mk-card-detail-section__qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  color: #1d1d1f;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: border-color 0.15s ease, color 0.15s ease;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mk-card-detail-section__qty-btn:hover {
  border-color: rgba(221, 66, 144, 0.4);
  color: #dd4290;
}
.mk-card-detail-section__qty-value {
  min-width: 20px;
  text-align: center;
  font-weight: 800;
  color: #1d1d1f;
}
.mk-card-detail-section__add {
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* Desktop: geef de popup meer ruimte en zet 'm in 2 kolommen
   (kaartafbeelding links, alle gegevens/prijzen rechts) i.p.v.
   alles onder elkaar zoals op mobiel. */
@media screen and (min-width: 769px) {
  .mk-card-detail-section {
    max-width: 760px;
    max-height: 85vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding-top: 0;
  }
  .mk-card-detail-section__close {
    top: 16px;
    right: 18px;
  }
  .mk-card-detail-section__visual {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 300px;
    flex: 0 0 300px;
    padding: 40px 24px;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    background: #f8f8fc;
    border-radius: 24px 0 0 24px;
  }
  .mk-card-detail-section__body {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    padding: 32px 36px 36px;
  }
  .mk-card-detail-section__image {
    max-width: 100%;
  }
  .mk-card-detail-section__name {
    font-size: 1.5rem;
  }
  .mk-card-detail-section__rarity {
    font-size: 0.95rem;
  }
  .mk-card-detail-section__price {
    padding: 16px 20px;
  }
  .mk-card-detail-section__price-value {
    font-size: 1.4rem;
  }
  .mk-card-detail-section__price-disclaimer {
    font-size: 0.8rem;
  }
  .mk-card-detail-section__payout {
    padding: 16px 20px;
  }
  .mk-card-detail-section__payout-title {
    font-size: 0.78rem;
  }
  .mk-card-detail-section__payout-row {
    font-size: 0.95rem;
  }
  .mk-card-detail-section__payout-row strong {
    font-size: 1.05rem;
  }
}
/* ================================================
   "VERKOOP JE COLLECTIE" — één sectie op de resultatenpagina
   met 2 tabs (Overzicht / Gegevens) i.p.v. 2 losse stappen.
   De itemlijst zelf staat alleen in de zij-balk, niet hier
   nogmaals (zie render.php).
   ================================================ */
.mk-sell-section {
  /* Korte, expliciete titel + bullets i.p.v. één dichte alinea —
     makkelijker te scannen dan de vorige lopende disclaimer-tekst. */
  /* -------------------------------------------------------
     Gravity Forms — zelfde overschrijving als .review-modal
     in _reviews.scss (global _form.scss gaat uit van floating
     labels, wat niet past in een compacte popup).
     ------------------------------------------------------- */
  /* Laad-icoontje tijdens het versturen — zie de submit-listener in
     kaart-zoeker-resultaten.js (los element i.p.v. ::after, want
     input[type=submit] ondersteunt geen pseudo-elementen). */
  /* --- Bedankt-scherm: kaartenlijst + ingevulde-gegevens-overzicht, zie
     showThankYou() in kaart-zoeker-resultaten.js. Links uitgelijnd i.p.v.
     de gecentreerde standaard-bevestigingstekst hierboven — een lijst
     leest nu eenmaal prettiger links. --- */
  /* De algemene .mk-sell-section__list is buiten mobiel standaard
     verborgen (staat normaal al in de zij-balk) — hier altijd tonen,
     ongeacht schermbreedte, want dit is de enige plek waar deze lijst
     nog staat zodra je bij het bedankt-scherm bent. */
  /* Nette tabel i.p.v. losse regels — label en waarde elk in hun eigen
     kolom, zodat het niet meer "uit elkaar valt" zoals de vorige simpele
     lijst-opmaak. */
  /* --- Bedankt-koptekst: vervangt de kale GF-bevestigingstekst (zie
     showThankYou()) met een vink-badge in de site-stijl, zelfde soort
     opzet als het bevestigingstoastje elders op deze pagina. --- */
}
.mk-sell-section__tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  background: #f4f4f8;
  border-radius: 999px;
  /* Zonder dit "won" deze display:flex altijd van het browser-eigen
     [hidden]-gedrag (zelfde specificiteit, maar deze auteursregel
     staat later) — tabsEl.hidden = true in showThankYou() verborg 'm
     dan niet echt. */
}
.mk-sell-section__tabs[hidden] {
  display: none;
}
.mk-sell-section__tab {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 9px 0;
  border: none;
  border-radius: 999px;
  background: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  -webkit-transition: background 0.2s ease, color 0.2s ease;
  transition: background 0.2s ease, color 0.2s ease;
}
.mk-sell-section__tab.is-active {
  background: #fff;
  color: #dd4290;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.mk-sell-section__panel {
  -webkit-animation: mk-fade-in 0.25s ease both;
  animation: mk-fade-in 0.25s ease both;
}
.mk-sell-section__panel[hidden] {
  display: none;
}
.mk-sell-section h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #1d1d1f;
  margin: 0 0 10px;
}
.mk-sell-section h3::after {
  display: none;
}
.mk-sell-section__intro {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0 18px;
}
.mk-sell-section__intro strong {
  color: #dd4290;
}
.mk-sell-section__list {
  /* Staat op desktop al in de vaste zij-balk — hier alleen tonen
     op mobiel (zie media query onderin dit bestand), anders dubbelop. */
  display: none;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.mk-sell-section__list-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: rgba(0, 0, 0, 0.65);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.mk-sell-section__list-item:last-child {
  border-bottom: none;
}
.mk-sell-section__list-img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 32px;
  height: 45px;
  -o-object-fit: contain;
  object-fit: contain;
  border-radius: 4px;
  background: #f4f4f8;
}
.mk-sell-section__list-name {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-sell-section__list-qty {
  margin-left: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #dd4290;
  background: rgba(221, 66, 144, 0.1);
  padding: 1px 7px;
  border-radius: 999px;
}
.mk-sell-section__list-condition {
  margin-left: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 7px;
  border-radius: 999px;
}
.mk-sell-section__list-price {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-weight: 600;
  color: #1d1d1f;
}
.mk-sell-section__list-remove {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.65);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: background 0.15s ease, color 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease;
}
.mk-sell-section__list-remove:hover {
  background: rgba(84, 181, 125, 0.15);
  color: #419564;
}
.mk-sell-section__total {
  padding: 16px 18px;
  background: #f8f8fc;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
}
.mk-sell-section__total-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.6);
}
.mk-sell-section__total-row strong {
  color: #dd4290;
  white-space: nowrap;
}
.mk-sell-section__total-row span:first-child {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
}
.mk-sell-section__total-row span:last-child {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}
.mk-sell-section__total-row--highlight {
  padding-top: 10px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  font-size: 0.95rem;
  font-weight: 700;
  color: #1d1d1f;
}
.mk-sell-section__total-row--highlight span:last-child {
  font-size: 1.1rem;
}
.mk-sell-section__cash-value, .mk-sell-section__trade-value {
  color: #dd4290;
}
.mk-sell-section__disclaimer-box {
  padding: 14px 16px;
  background: #f8f8fc;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}
.mk-sell-section__disclaimer-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.65);
  margin: 0 0 8px;
}
.mk-sell-section__disclaimer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6px;
}
.mk-sell-section__disclaimer-list li {
  position: relative;
  margin: 0;
  padding-left: 14px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.55);
}
.mk-sell-section__disclaimer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(221, 66, 144, 0.4);
}
.mk-sell-section__disclaimer-list li strong {
  color: rgba(0, 0, 0, 0.6);
}
.mk-sell-section__next {
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.mk-sell-section__cta {
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.mk-sell-section .gform_wrapper .gfield--type-honeypot,
.mk-sell-section .gform_wrapper .gform_validation_container {
  display: none !important;
}
.mk-sell-section .gform_wrapper .gform_fields {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.mk-sell-section .gform_wrapper .gform-body .gfield,
.mk-sell-section .gform_wrapper .gform_body .gfield {
  position: static !important;
  margin-bottom: 14px;
  /* Zonder eigen border viel niet op dat "Voorkeursbeurs" een
     dropdown is (de globale _form.scss-stijl gaat uit van
     border:0) — zelfde behandeling als de tekstvelden hierboven,
     plus een zichtbaar pijltje. */
}
.mk-sell-section .gform_wrapper .gform-body .gfield .gfield_label,
.mk-sell-section .gform_wrapper .gform_body .gfield .gfield_label {
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: rgba(0, 0, 0, 0.65) !important;
  margin-bottom: 6px !important;
  line-height: 1.4 !important;
}
.mk-sell-section .gform_wrapper .gform-body .gfield input[type=text],
.mk-sell-section .gform_wrapper .gform-body .gfield input[type=email],
.mk-sell-section .gform_wrapper .gform-body .gfield input[type=tel],
.mk-sell-section .gform_wrapper .gform_body .gfield input[type=text],
.mk-sell-section .gform_wrapper .gform_body .gfield input[type=email],
.mk-sell-section .gform_wrapper .gform_body .gfield input[type=tel] {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 10px !important;
  /* Minimaal 16px: onder die grens zoomt iOS Safari automatisch
     in zodra je dit veld focust. */
  font-size: 16px !important;
  color: #1d1d1f !important;
  background: #fff !important;
  font-family: inherit;
  -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}
.mk-sell-section .gform_wrapper .gform-body .gfield input[type=text]:focus,
.mk-sell-section .gform_wrapper .gform-body .gfield input[type=email]:focus,
.mk-sell-section .gform_wrapper .gform-body .gfield input[type=tel]:focus,
.mk-sell-section .gform_wrapper .gform_body .gfield input[type=text]:focus,
.mk-sell-section .gform_wrapper .gform_body .gfield input[type=email]:focus,
.mk-sell-section .gform_wrapper .gform_body .gfield input[type=tel]:focus {
  border-color: #dd4290 !important;
  -webkit-box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.12) !important;
  box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.12) !important;
}
.mk-sell-section .gform_wrapper .gform-body .gfield select,
.mk-sell-section .gform_wrapper .gform_body .gfield select {
  width: 100% !important;
  padding: 10px 36px 10px 14px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 10px !important;
  /* Minimaal 16px: onder die grens zoomt iOS Safari automatisch
     in zodra je dit veld focust. */
  font-size: 16px !important;
  color: #1d1d1f !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center !important;
  font-family: inherit;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
.mk-sell-section .gform_wrapper .gform-body .gfield select:focus,
.mk-sell-section .gform_wrapper .gform_body .gfield select:focus {
  border-color: #dd4290 !important;
  -webkit-box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.12) !important;
  box-shadow: 0 0 0 3px rgba(221, 66, 144, 0.12) !important;
}
.mk-sell-section .gform_wrapper .gform_footer,
.mk-sell-section .gform_wrapper .gform_page_footer {
  position: relative;
  margin-top: 4px;
  padding: 0 !important;
}
.mk-sell-section .gform_wrapper .gform_footer input[type=submit],
.mk-sell-section .gform_wrapper .gform_footer button[type=submit],
.mk-sell-section .gform_wrapper .gform_footer .gform_button,
.mk-sell-section .gform_wrapper .gform_page_footer input[type=submit],
.mk-sell-section .gform_wrapper .gform_page_footer button[type=submit],
.mk-sell-section .gform_wrapper .gform_page_footer .gform_button {
  width: 100% !important;
  padding: 13px 24px !important;
  border: none !important;
  border-radius: 12px !important;
  background: #dd4290 !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  -webkit-transition: opacity 0.15s ease, -webkit-transform 0.15s ease;
  transition: opacity 0.15s ease, -webkit-transform 0.15s ease;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transition: opacity 0.15s ease, transform 0.15s ease, -webkit-transform 0.15s ease;
  font-family: inherit;
  display: block !important;
}
.mk-sell-section .gform_wrapper .gform_footer input[type=submit]:hover,
.mk-sell-section .gform_wrapper .gform_footer button[type=submit]:hover,
.mk-sell-section .gform_wrapper .gform_footer .gform_button:hover,
.mk-sell-section .gform_wrapper .gform_page_footer input[type=submit]:hover,
.mk-sell-section .gform_wrapper .gform_page_footer button[type=submit]:hover,
.mk-sell-section .gform_wrapper .gform_page_footer .gform_button:hover {
  opacity: 0.9;
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}
.mk-sell-section .gform_wrapper .gform_footer input[type=submit].is-loading,
.mk-sell-section .gform_wrapper .gform_footer button[type=submit].is-loading,
.mk-sell-section .gform_wrapper .gform_footer .gform_button.is-loading,
.mk-sell-section .gform_wrapper .gform_page_footer input[type=submit].is-loading,
.mk-sell-section .gform_wrapper .gform_page_footer button[type=submit].is-loading,
.mk-sell-section .gform_wrapper .gform_page_footer .gform_button.is-loading {
  opacity: 0.75;
  cursor: not-allowed;
  -webkit-transform: none;
  transform: none;
}
.mk-sell-section .mk-sell-section__submit-spinner {
  position: absolute;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  -webkit-animation: mk-spin 0.7s linear infinite;
  animation: mk-spin 0.7s linear infinite;
  pointer-events: none;
}
.mk-sell-section .gform_wrapper .gform_confirmation_message {
  text-align: center;
  padding: 24px 0;
  font-size: 1rem;
  color: #1d1d1f;
  line-height: 1.6;
}
.mk-sell-section .gform_wrapper .gform_confirmation_message .mk-sell-section__thanks-block {
  margin-top: 22px;
  text-align: left;
}
.mk-sell-section .mk-sell-section__thanks-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(0, 0, 0, 0.55);
  margin: 0 0 10px;
}
.mk-sell-section .mk-sell-section__list--thanks {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  max-height: none;
}
.mk-sell-section .mk-sell-section__thanks-data {
  margin: 0 0 22px;
  padding: 4px 16px;
  background: #f8f8fc;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
}
.mk-sell-section .mk-sell-section__thanks-data-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.mk-sell-section .mk-sell-section__thanks-data-row:last-child {
  border-bottom: none;
}
.mk-sell-section .mk-sell-section__thanks-data-label {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
}
.mk-sell-section .mk-sell-section__thanks-data-value {
  font-weight: 700;
  color: #1d1d1f;
  overflow-wrap: break-word;
  min-width: 0;
}
.mk-sell-section .mk-sell-section__success {
  text-align: center;
  padding: 4px 0 8px;
}
.mk-sell-section .mk-sell-section__success-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dd4290, #8b5cf6);
  -webkit-box-shadow: 0 10px 28px rgba(221, 66, 144, 0.3);
  box-shadow: 0 10px 28px rgba(221, 66, 144, 0.3);
  margin-bottom: 16px;
  -webkit-animation: mk-success-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation: mk-success-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.mk-sell-section .mk-sell-section__success-icon svg {
  width: 32px;
  height: 32px;
}
.mk-sell-section .mk-sell-section__success-icon circle, .mk-sell-section .mk-sell-section__success-icon path {
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mk-sell-section .mk-sell-section__success-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1d1d1f;
  margin: 0 0 8px;
}
.mk-sell-section .mk-sell-section__success-sub {
  font-size: 0.95rem;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.5;
  margin: 0;
}
.mk-sell-section .gform_wrapper .gfield_error input {
  border-color: #ef4444 !important;
}
.mk-sell-section .gform_wrapper .validation_message,
.mk-sell-section .gform_wrapper .gfield_validation_message {
  font-size: 0.75rem;
  color: #ef4444;
  margin-top: 4px;
}
.mk-sell-section .gform_wrapper .gform_validation_errors {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.07);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
}
.mk-sell-section .gform_wrapper .gform_validation_errors h2 {
  font-size: 0.9rem;
  color: #ef4444;
}
.mk-sell-section .gform_wrapper .gform_validation_errors h2::after {
  display: none;
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media screen and (max-width: 640px) {
  .mk-card-finder {
    padding: 0px 0px 40px 0px;
    /* Hogere minimum-tegelbreedte dan voorheen (was 110px) — daardoor
       schaalt de grid al bij een iets bredere telefoon terug van 3 naar
       2 kolommen i.p.v. pas heel smal, zodat de kaarten niet te
       gedrongen ogen. */
  }
  .mk-card-finder__results, .mk-card-finder__skeleton {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 10px;
  }
}
/* Onder de ~900px past de vaste zij-kolom niet meer naast de resultaten —
   dan wordt de collectie een vaste balk onderin (net als een winkelwagen-
   samenvatting), met alleen aantal + totaal + knop, geen losse lijst. */
@media screen and (max-width: 900px) {
  .mk-card-results__layout {
    width: 100%;
  }
  .mk-card-results__layout .mk-card-results__welcome-back {
    width: 92%;
    margin: 0 auto;
  }
  .mk-card-results__layout .mk-card-finder__search-bar {
    width: 92%;
    margin: 0 auto;
  }
  .mk-card-results__layout .mk-card-results__main {
    width: 92%;
    margin: 0 auto;
  }
  .mk-card-results__heading {
    width: 92%;
    margin: 0 auto;
  }
  .mk-card-results__steps {
    width: 92%;
    margin: 0 auto;
  }
  .mk-card-results__sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 500;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    width: 100%;
    /* Geen bottom-padding hier — anders blijft er onder de witte kaart
       een kier tot de echte onderkant van het scherm hangen. De
       veilige-zone-ruimte zit al in __sidebar-inner z'n eigen padding. */
    padding: 0 16px;
  }
  .mk-card-results__sidebar-inner {
    position: static;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    -webkit-box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.14);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.14);
    padding: 8px 14px max(8px, env(safe-area-inset-bottom, 0px));
  }
  .mk-card-results__sidebar-title,
  .mk-card-results__sidebar-empty,
  .mk-card-results__sidebar-list {
    display: none;
  }
  /* Samenvatting (aantal + totaal) en de knop naast elkaar i.p.v.
     gestapeld — samen met de kleinere padding hierboven maakt dat de
     balk als geheel een stuk compacter, past ook prettiger op smalle
     telefoons. */
  .mk-card-results__sidebar-summary {
    border-top: none;
    margin-bottom: 6px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 0;
    padding-top: 0px;
  }
  .mk-card-results__sidebar-summary .mk-card-finder__collection-count {
    font-size: 0.72rem;
  }
  .mk-card-results__sidebar-total {
    font-size: 0.85rem;
  }
  /* Kleinere knop onderin op mobiel — de volledige lijst met kaarten
     staat daar niet meer, die zie je pas in het collectie-overzicht. */
  .mk-card-results__sidebar-inner .mk-card-finder__collection-btn {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    padding: 7px 14px;
    font-size: 0.78rem;
  }
  .mk-card-results__sidebar-inner .mk-card-results__sidebar-head {
    display: none;
  }
  /* Bulk-actiebalk ("meerdere selecteren") was op mobiel nog even groot
     als op desktop — knop en tekst hier duidelijk kleiner, past dan ook
     netjes naast/boven de collectie-balk onderin. */
  .mk-card-results__bulk-bar {
    padding: 10px 14px;
    gap: 8px;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
  .mk-card-results__bulk-count {
    font-size: 0.75rem;
  }
  .mk-card-results__bulk-add {
    padding: 7px 14px !important;
    font-size: 0.8rem !important;
    width: auto !important;
  }
  /* Op mobiel géén losse zij-balk-lijst — daar staat het overzicht van
     de toegevoegde kaarten nu in het collectie-scherm zelf. */
  .mk-sell-section__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  /* Ruimte houden zodat de vaste balk onderin niets overlapt. Ook de
     desktop-max-width van 640px loslaten, zodat (o.a.) mk-sell-section
     hier echt de volle breedte kan pakken. */
  .mk-card-results__main {
    padding-bottom: 90px;
    max-width: none;
  }
  /* Het toastje stond op dezelfde hoogte (~20px vanaf onder) als de
     vaste collectie-balk onderin, dus viel er lelijk overheen/onder i.p.v.
     er nette boven te zweven — zelfde hoogte aanhouden als de padding
     hierboven, plus een marge. */
  .mk-card-finder__toast {
    bottom: calc(90px + max(0px, env(safe-area-inset-bottom, 0px)));
    width: 92%;
  }
}
/* ================================================
   VERKOOP SIDEBAR — floatende USP-kaart (live marktprijzen /
   kaart-zoeker), rechts naast de content, meescrollend.
   Vanaf 1600px viewport (i.p.v. het eerdere 1800px) — laat de kaart op
   iets meer "normale" laptop/desktop-breedtes zien i.p.v. meteen naar
   de compacte bubble te vallen.
   ================================================ */
.verkoop-sidebar {
  position: fixed;
  top: 50%;
  right: max(24px, (100vw - 1440px) / 2 - 300px);
  -webkit-transform: translateY(-50%) translateX(24px) scale(0.94);
  transform: translateY(-50%) translateX(24px) scale(0.94);
  z-index: 40;
  width: 260px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  -webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  -webkit-transition: opacity 0.35s var(--transition), visibility 0s linear 0.35s, -webkit-transform 0.35s var(--transition), -webkit-box-shadow 0.3s ease;
  transition: opacity 0.35s var(--transition), visibility 0s linear 0.35s, -webkit-transform 0.35s var(--transition), -webkit-box-shadow 0.3s ease;
  transition: opacity 0.35s var(--transition), transform 0.35s var(--transition), box-shadow 0.3s ease, visibility 0s linear 0.35s;
  transition: opacity 0.35s var(--transition), transform 0.35s var(--transition), box-shadow 0.3s ease, visibility 0s linear 0.35s, -webkit-transform 0.35s var(--transition), -webkit-box-shadow 0.3s ease;
  /* "online" statusstip — versterkt de belofte "meestal binnen enkele
     minuten reactie" ook visueel, i.p.v. alleen in tekst */
  /* frosted-glass knopje i.p.v. plat grijs bolletje — zelfde
     blur+rand+zachte-schaduw-taal als de glass-elementen elders op de
     site, hier de lichte variant omdat dit op een witte kaart zit
     i.p.v. een donker paneel. */
  /* knipperende "live"-stip i.p.v. een statisch icoon — trekt net
     genoeg aandacht om "live marktprijzen" ook te laten voelen */
}
.verkoop-sidebar.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  -webkit-transform: translateY(-50%) translateX(0) scale(1);
  transform: translateY(-50%) translateX(0) scale(1);
  -webkit-transition: opacity 0.35s var(--transition), visibility 0s linear, -webkit-transform 0.35s var(--transition), -webkit-box-shadow 0.3s ease;
  transition: opacity 0.35s var(--transition), visibility 0s linear, -webkit-transform 0.35s var(--transition), -webkit-box-shadow 0.3s ease;
  transition: opacity 0.35s var(--transition), transform 0.35s var(--transition), box-shadow 0.3s ease, visibility 0s linear;
  transition: opacity 0.35s var(--transition), transform 0.35s var(--transition), box-shadow 0.3s ease, visibility 0s linear, -webkit-transform 0.35s var(--transition), -webkit-box-shadow 0.3s ease;
  /* lift op de hele kaart bij hover — de losse knoppen reageerden
     al, maar de kaart zelf voelde daardoor statisch t.o.v. andere
     kaarten op de site die altijd als geheel optillen */
}
.verkoop-sidebar.is-visible:hover {
  -webkit-transform: translateY(calc(-50% - 4px)) translateX(0) scale(1);
  transform: translateY(calc(-50% - 4px)) translateX(0) scale(1);
  -webkit-box-shadow: 0 18px 54px rgba(0, 0, 0, 0.2);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.2);
}
.verkoop-sidebar.is-dismissed {
  display: none;
}
.verkoop-sidebar__card {
  /* radius/schaduw staan nu op de buitenste .verkoop-sidebar,
     zodat de kaart en het whatsapp-blok als één doorlopend geheel
     ogen i.p.v. twee losse, zwevende kaartjes met een gat ertussen.
     Zachte kleurwas i.p.v. puur wit — zelfde merk-sfeer als de
     rest van de site, i.p.v. een generiek wit kaartje. */
  position: relative;
  padding: 22px 22px 20px;
  background: radial-gradient(ellipse 70% 50% at 8% 0%, rgba(221, 66, 144, 0.07) 0%, transparent 65%), radial-gradient(ellipse 60% 55% at 100% 100%, rgba(84, 181, 125, 0.07) 0%, transparent 60%), #fff;
}
.verkoop-sidebar__whatsapp {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 22px;
  background: linear-gradient(135deg, #2fd66d, #1fae55);
  color: #fff;
  text-decoration: none;
  /* dunne lichte lijn i.p.v. een harde kleurovergang — leest als
     een naad in dezelfde kaart, niet als het begin van een nieuw
     los element */
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  -webkit-transition: -webkit-filter 0.25s ease;
  transition: -webkit-filter 0.25s ease;
  transition: filter 0.25s ease;
  transition: filter 0.25s ease, -webkit-filter 0.25s ease;
  /* zelfde shimmer-sweep als .mk-button, hier los toegepast omdat
     dit element geen .mk-button is (eigen icoon-bubbel + 2 tekstregels
     i.p.v. de standaard button-opmaak) */
  /* bewust geen translateY-lift meer (zoals andere .mk-button's) —
     dat zou dit blok los laten "opspringen" van de kaart erboven en
     juist het samengesteld-geheel-gevoel doorbreken */
}
.verkoop-sidebar__whatsapp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  -webkit-transform: translateX(-100%) skewX(-15deg);
  transform: translateX(-100%) skewX(-15deg);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}
.verkoop-sidebar__whatsapp:hover::before {
  -webkit-transform: translateX(200%) skewX(-15deg);
  transform: translateX(200%) skewX(-15deg);
}
.verkoop-sidebar__whatsapp:hover {
  -webkit-filter: brightness(1.06);
  filter: brightness(1.06);
}
.verkoop-sidebar__whatsapp:active {
  -webkit-filter: brightness(0.97);
  filter: brightness(0.97);
}
.verkoop-sidebar__whatsapp-icon {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  /* glans bovenin + schaduw onderin — geeft het rondje een bolling
     i.p.v. een plat transparant vlak */
  -webkit-box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.4), inset 0 -3px 5px rgba(0, 0, 0, 0.14);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.4), inset 0 -3px 5px rgba(0, 0, 0, 0.14);
}
.verkoop-sidebar__whatsapp-icon svg {
  width: 18px;
  height: 18px;
}
.verkoop-sidebar__whatsapp-status {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3ddc73;
  border: 2px solid #1fae55;
  -webkit-animation: ring-pulse 1.8s ease-out infinite;
  animation: ring-pulse 1.8s ease-out infinite;
}
.verkoop-sidebar__whatsapp-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
  text-align: left;
}
.verkoop-sidebar__whatsapp-text strong {
  font-size: 0.85rem;
  font-weight: 700;
}
.verkoop-sidebar__whatsapp-text span {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.88;
}
.verkoop-sidebar__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: rgba(0, 0, 0, 0.55);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: background 0.2s ease, color 0.2s ease, -webkit-transform 0.2s ease;
  transition: background 0.2s ease, color 0.2s ease, -webkit-transform 0.2s ease;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
}
.verkoop-sidebar__close:hover {
  background: rgba(255, 255, 255, 0.95);
  color: rgba(0, 0, 0, 0.65);
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}
.verkoop-sidebar__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  line-height: 1;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #dd4290;
  background: rgba(221, 66, 144, 0.08);
  border: 1px solid rgba(221, 66, 144, 0.2);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.verkoop-sidebar__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dd4290;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-animation: glow-pulse 1.6s ease-in-out infinite;
  animation: glow-pulse 1.6s ease-in-out infinite;
}
.verkoop-sidebar__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1d1d1f;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 8px !important;
  padding-bottom: 0;
}
.verkoop-sidebar__title::after {
  display: none;
}
.verkoop-sidebar__text {
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 16px;
}
.verkoop-sidebar__cta {
  width: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* Onder 1600px viewport liever helemaal verbergen (i.p.v. half
   overlappend met de content) — de compacte bubble hieronder neemt
   het daar over. */
@media screen and (max-width: 1599px) {
  .verkoop-sidebar {
    display: none !important;
  }
}
/* ================================================
   VERKOOP SIDEBAR BUBBLE — compacte ronde WhatsApp-knop voor alle
   schermen waar de volledige kaart hierboven verborgen is (<1600px,
   dus mobiel plus de smallere laptop/desktop-breedtes). Zonder
   dit zag vrijwel niemand de WhatsApp-CTA ooit.
   ================================================ */
.verkoop-sidebar-bubble {
  display: none;
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  -webkit-transform: translateY(16px) scale(0.85);
  transform: translateY(16px) scale(0.85);
  -webkit-transition: opacity 0.3s var(--transition), visibility 0s linear 0.3s, -webkit-transform 0.3s var(--transition);
  transition: opacity 0.3s var(--transition), visibility 0s linear 0.3s, -webkit-transform 0.3s var(--transition);
  transition: opacity 0.3s var(--transition), transform 0.3s var(--transition), visibility 0s linear 0.3s;
  transition: opacity 0.3s var(--transition), transform 0.3s var(--transition), visibility 0s linear 0.3s, -webkit-transform 0.3s var(--transition);
}
.verkoop-sidebar-bubble.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  -webkit-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
  -webkit-transition: opacity 0.3s var(--transition), visibility 0s linear, -webkit-transform 0.3s var(--transition);
  transition: opacity 0.3s var(--transition), visibility 0s linear, -webkit-transform 0.3s var(--transition);
  transition: opacity 0.3s var(--transition), transform 0.3s var(--transition), visibility 0s linear;
  transition: opacity 0.3s var(--transition), transform 0.3s var(--transition), visibility 0s linear, -webkit-transform 0.3s var(--transition);
}
.verkoop-sidebar-bubble.is-dismissed {
  display: none !important;
}
.verkoop-sidebar-bubble__link {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2fd66d, #1fae55);
  -webkit-box-shadow: 0 10px 28px rgba(31, 174, 85, 0.45);
  box-shadow: 0 10px 28px rgba(31, 174, 85, 0.45);
  color: #fff;
  -webkit-transition: -webkit-transform 0.25s var(--transition), -webkit-box-shadow 0.25s ease;
  transition: -webkit-transform 0.25s var(--transition), -webkit-box-shadow 0.25s ease;
  transition: transform 0.25s var(--transition), box-shadow 0.25s ease;
  transition: transform 0.25s var(--transition), box-shadow 0.25s ease, -webkit-transform 0.25s var(--transition), -webkit-box-shadow 0.25s ease;
  /* zelfde shimmer-sweep als het desktop whatsapp-blok, voor
     consistentie tussen de twee varianten */
}
.verkoop-sidebar-bubble__link svg {
  width: 26px;
  height: 26px;
}
.verkoop-sidebar-bubble__link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  -webkit-transform: translateX(-120%) skewX(-15deg);
  transform: translateX(-120%) skewX(-15deg);
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}
.verkoop-sidebar-bubble__link:hover::before {
  -webkit-transform: translateX(120%) skewX(-15deg);
  transform: translateX(120%) skewX(-15deg);
}
.verkoop-sidebar-bubble__link:hover {
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
  -webkit-box-shadow: 0 14px 36px rgba(31, 174, 85, 0.55);
  box-shadow: 0 14px 36px rgba(31, 174, 85, 0.55);
}
.verkoop-sidebar-bubble__link:active {
  -webkit-transform: scale(0.97);
  transform: scale(0.97);
}
.verkoop-sidebar-bubble__status {
  /* Sibling van __link i.p.v. erin genest — __link heeft
     overflow:hidden (voor het glim-effect op de knop), waardoor dit
     puntje aan de rand deels werd afgesneden i.p.v. er cleanly
     bovenop te liggen. */
  position: absolute;
  right: 1px;
  bottom: 1px;
  z-index: 1;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #3ddc73;
  border: 2.5px solid #fff;
  -webkit-animation: ring-pulse 1.8s ease-out infinite;
  animation: ring-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
.verkoop-sidebar-bubble__close {
  position: absolute;
  top: -6px;
  left: -6px;
  /* Staat in de HTML vóór __link — zonder eigen z-index wint bij
     gelijke (auto) stacking altijd het element dat later in de
     broncode staat, dus verdween deze knop achter de groene knop. */
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  background: #fff;
  color: rgba(0, 0, 0, 0.65);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  -webkit-transition: background 0.2s ease, color 0.2s ease;
  transition: background 0.2s ease, color 0.2s ease;
}
.verkoop-sidebar-bubble__close:hover {
  background: rgba(0, 0, 0, 0.06);
}

@media screen and (max-width: 1599px) {
  .verkoop-sidebar-bubble {
    display: block;
  }
}
/* Iets meer marge tot de schermrand op erg smalle toestellen. */
@media screen and (max-width: 480px) {
  .verkoop-sidebar-bubble {
    right: 14px;
    bottom: 14px;
  }
}
/* Op de homepage met een aankomende beurs zit WhatsApp al ingebouwd in
   de mobiele beurs-balk (.mk-mobile-fair-bar__whatsapp, zie _header.scss)
   — de losse bubble zou daar dubbelop liggen en overlappen (precies dat
   overlapoverzicht liet zien). Alleen op dát breekpunt onderdrukken: op
   bredere schermen (769-1599px) is er geen beurs-balk en blijft de
   bubble gewoon de enige WhatsApp-CTA. */
@media screen and (max-width: 768px) {
  body:has(.mk-mobile-fair-bar) .verkoop-sidebar-bubble {
    display: none !important;
  }
}
/* ================================================
   SEO LOCATIE — lokale landingspagina per plaats
   (/pokemon-kaarten-verkopen/<plaats>/)
   ================================================ */
.seo-locatie {
  padding: 0 0 80px;
  position: relative;
  background: radial-gradient(ellipse 55% 45% at 8% 15%, rgba(221, 66, 144, 0.09) 0%, transparent 60%), radial-gradient(ellipse 45% 55% at 92% 60%, rgba(84, 181, 125, 0.08) 0%, transparent 60%), radial-gradient(ellipse 35% 40% at 75% 95%, rgba(239, 120, 21, 0.06) 0%, transparent 55%), linear-gradient(160deg, #fafafa 0%, #f2f2f7 100%);
  /* ---- stappen ---- */
  /* ---- andere plaatsen in de buurt ---- */
  /* ---- ingebedde kaart-zoeker (mk/kaart-zoeker-blok, direct op de
     locatiepagina i.p.v. een navigatie naar de homepage) ---- */
  /* ---- nieuwste sets ---- */
  /* ---- reviews van verkopers uit deze plaats ----
     Hergebruikt .review-card uit template-parts/_reviews.scss (sitebreed
     geladen) — hier alleen het grid eromheen. */
  /* ---- FAQ ---- */
  /* ---- CTA ----
     h2 had geen eigen font-size, dus viel terug op de kale browser-
     default voor h2 (véél groter dan de rest van de pagina) — nu op
     dezelfde schaal als andere CTA-koppen in het thema (zie
     .mk-regiokaart__cta). Vlak tweekleuren-blokje vervangen door
     hetzelfde zachte drieledige verloop + dunne rand als die andere
     CTA, voor een minder plat/generiek "gekleurd vlak"-gevoel. */
  /* Links binnen de introtekst/stappen (bv. "Taxeer de waarde",
     "Verkoop je kaarten", "Bekijk waar we binnenkort staan") — iets
     nadrukkelijker dan gewone lopende tekst, zodat ze als CTA opvallen. */
}
.seo-locatie__header {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 130px 0 48px;
  overflow: hidden;
  color: #1d1d1f;
  background: radial-gradient(ellipse 55% 60% at 10% 20%, rgba(221, 66, 144, 0.14) 0%, transparent 62%), radial-gradient(ellipse 45% 55% at 92% 80%, rgba(84, 181, 125, 0.08) 0%, transparent 60%), linear-gradient(160deg, #fafafa 0%, #f2f2f7 100%);
}
.seo-locatie__header-inner {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: auto;
  width: 92%;
}
.seo-locatie__breadcrumb {
  margin-bottom: 24px;
  font-size: 0.85rem;
}
.seo-locatie__breadcrumb a {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
}
.seo-locatie__breadcrumb a:hover {
  color: #dd4290;
}
.seo-locatie__breadcrumb-sep {
  color: rgba(0, 0, 0, 0.55);
  margin: 0 6px;
  opacity: 0.5;
}
.seo-locatie__breadcrumb-current {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
}
.seo-locatie__title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 12px;
}
.seo-locatie__title-gradient {
  background: linear-gradient(135deg, #dd4290 0%, #ef7815 55%, #54b57d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.seo-locatie__distance {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
  margin: 0 0 24px;
}
.seo-locatie__header-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
}
.seo-locatie__header-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media (min-width: 860px) {
  .seo-locatie__header-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  }
}
.seo-locatie__header-visual {
  display: none;
}
@media (min-width: 860px) {
  .seo-locatie__header-visual {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
.seo-locatie__header-card {
  width: 100%;
  max-width: 190px;
  /* .hero-card--special heeft zelf geen eigen positionering (in
     tegenstelling tot de --1 t/m --4-varianten op de homepage-hero,
     die absoluut binnen de volle hero-breedte staan) — hier gewoon
     in-flow, gecentreerd in deze kolom. */
  position: relative;
}
.seo-locatie__inner {
  max-width: 900px;
  margin: auto;
  width: 92%;
  padding-top: 48px;
}
.seo-locatie__inner > * + * {
  margin-top: 56px;
}
.seo-locatie__intro {
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.65);
}
.seo-locatie__intro p {
  margin: 0 0 1em;
}
.seo-locatie__section-title {
  font-size: 1.4rem;
  margin: 0 0 20px;
  color: #1d1d1f;
}
.seo-locatie__steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.seo-locatie__step {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-md);
  padding: 24px;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.seo-locatie__step h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}
.seo-locatie__step p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.5;
}
.seo-locatie__nearby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.seo-locatie__nearby-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  color: inherit;
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.seo-locatie__nearby-card:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
}
.seo-locatie__nearby-name {
  font-weight: 700;
  font-size: 0.95rem;
}
.seo-locatie__nearby-distance {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.55);
}
.seo-locatie .mk-card-finder--intro {
  margin: 0 0 8px;
}
.seo-locatie__sets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.seo-locatie__set-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  color: inherit;
  text-align: center;
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.seo-locatie__set-card:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
}
.seo-locatie__set-card-visual {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 90px;
}
.seo-locatie__set-card-visual img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
.seo-locatie__reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.seo-locatie__set-card-name {
  font-weight: 700;
  font-size: 0.95rem;
}
.seo-locatie__set-card-cta {
  font-size: 0.8rem;
  font-weight: 600;
  color: #dd4290;
}
.seo-locatie__faq-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
}
.seo-locatie__faq-item {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-md);
  padding: 4px 20px;
}
.seo-locatie__faq-question {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.seo-locatie__faq-question::-webkit-details-marker {
  display: none;
}
.seo-locatie__faq-icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}
.seo-locatie__faq-icon::before, .seo-locatie__faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #dd4290;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.seo-locatie__faq-icon::before {
  width: 12px;
  height: 2px;
}
.seo-locatie__faq-icon::after {
  width: 2px;
  height: 12px;
}
.seo-locatie__faq-item[open] .seo-locatie__faq-icon::after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
  transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}
.seo-locatie__faq-answer {
  padding: 0 0 18px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 0.92rem;
  line-height: 1.6;
}
.seo-locatie__faq-answer p {
  margin: 0 0 0.8em;
}
.seo-locatie__cta {
  text-align: center;
  background: linear-gradient(135deg, rgba(221, 66, 144, 0.1), rgba(239, 120, 21, 0.06) 60%, rgba(255, 255, 255, 0.4));
  border: 1px solid rgba(221, 66, 144, 0.18);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
}
.seo-locatie__cta h2 {
  margin: 0 0 8px;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #1d1d1f;
}
.seo-locatie__cta p {
  margin: 0 0 20px;
  color: rgba(0, 0, 0, 0.65);
}
.seo-locatie__cta-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 12px;
}
.seo-locatie__intro a, .seo-locatie__step p a {
  color: #dd4290;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(221, 66, 144, 0.3);
}
.seo-locatie__intro a:hover, .seo-locatie__step p a:hover {
  text-decoration-color: #dd4290;
}

/* ================================================
   MEGAMENU — "Kaarten verkopen bij jou in de buurt"
   Rijke inhoud van het .mk-locaties-mega-paneel (open/dicht-gedrag en
   positionering staan in layout/_header.scss). Regio-rail, doorzoekbare
   plaatsenlijst en een live preview-kolom. Er was hier ook een
   interactieve SVG-kaart — bewust geschrapt, alleen de lijst + preview
   blijven over. Datamodel gedeeld met de regiokaart-pagina, zie
   mk_seo_locaties_map_dataset() in functions/seo-locaties.php. */
.mk-locaties-mega {
  width: min(1440px, 94vw);
  max-height: 80vh;
  overflow: hidden;
  /* Ondoorzichtig (zelfde reden als hierboven ooit stond: dit paneel
     hangt los over de volle breedte van de pagina, een glazen versie
     laat onderliggende inhoud er doorheen spoken), maar bewust een
     stap lichter dan de bijna-zwarte #06060e van eerder — leest anders
     toch weer te donker/zwart i.p.v. als hetzelfde grijze glas-gevoel
     van de header. */
  background: #15151d;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  -webkit-box-shadow: var(--glass-shadow);
  box-shadow: var(--glass-shadow);
  color: #fff;
  font-family: inherit;
  /* ---- body-grid ---- */
  /* ---- kolom 1: regio-rail ---- */
  /* ---- kolom 2: plaatsenlijst ---- */
  /* ---- kolom 3: live preview ---- */
}
.mk-locaties-mega__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.028)), to(transparent));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent);
}
.mk-locaties-mega__heading {
  min-width: 0;
}
.mk-locaties-mega__heading h2 {
  margin: 0;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.15;
  color: #fff;
}
.mk-locaties-mega__controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.mk-locaties-mega__search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  width: 250px;
  height: 44px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}
.mk-locaties-mega__search-marker {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.mk-locaties-mega__search input {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
  padding: 0;
  font-family: inherit;
}
.mk-locaties-mega__search input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.mk-locaties-mega__search input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.mk-locaties-mega__search input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.mk-locaties-mega__search input::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.mk-locaties-mega__search input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.mk-locaties-mega__clear {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.38);
  cursor: pointer;
  opacity: 0.45;
}
.mk-locaties-mega__clear.is-active {
  opacity: 1;
}
.mk-locaties-mega__body {
  display: grid;
  /* Rijhoogte via clamp() i.p.v. een vaste px-waarde, zodat het op
     kortere vensters meekrimpt i.p.v. over max-height:80vh van het
     paneel heen te gaan (met afgekapte inhoud tot gevolg). */
  grid-template-columns: 220px 1fr 296px;
  grid-template-rows: clamp(420px, 52vh, 480px);
  height: clamp(420px, 52vh, 480px);
}
.mk-locaties-mega__body > * {
  min-height: 0;
  overflow: hidden;
}
.mk-locaties-mega__rail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px;
  background: rgba(255, 255, 255, 0.012);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  /* Deze kolom kreeg zijn overflow:hidden via de generieke
     ".mk-locaties-mega__body > *"-regel hierboven — prima om de
     ronde hoeken van het paneel te bewaken, maar als het aantal
     regio's ooit groeit is overflow-y:auto (met dezelfde dunne
     scrollbar als de lijst hiernaast) een veiliger vangnet dan hard
     afkappen. */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.mk-locaties-mega__rail::-webkit-scrollbar {
  width: 6px;
}
.mk-locaties-mega__rail::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 99px;
}
.mk-locaties-mega__rail::-webkit-scrollbar-track {
  background: transparent;
}
.mk-locaties-mega__rail-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  padding: 2px 10px 8px;
}
.mk-locaties-mega__regions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 6px;
}
.mk-locaties-mega__region {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  -webkit-transition: background 160ms ease, border-color 160ms ease;
  transition: background 160ms ease, border-color 160ms ease;
}
.mk-locaties-mega__region:hover {
  background: rgba(255, 255, 255, 0.06);
}
.mk-locaties-mega__region.is-active {
  background: var(--mk-region-bg);
  border-color: var(--mk-region-border);
}
.mk-locaties-mega__region-bar {
  width: 3px;
  height: 26px;
  border-radius: 3px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.12);
  -webkit-transition: background 160ms ease;
  transition: background 160ms ease;
}
.mk-locaties-mega__region.is-active .mk-locaties-mega__region-bar {
  background: var(--mk-region-accent);
}
.mk-locaties-mega__region-info {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}
.mk-locaties-mega__region-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.74);
}
.mk-locaties-mega__region.is-active .mk-locaties-mega__region-name {
  color: #fff;
}
.mk-locaties-mega__main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
}
.mk-locaties-mega__main-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px 12px;
}
.mk-locaties-mega__list-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #fff;
}
.mk-locaties-mega__list-title.is-accent {
  color: var(--mk-active-accent, #fff);
}
.mk-locaties-mega__list-sub {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.32);
  letter-spacing: -0.1px;
  white-space: nowrap;
}
.mk-locaties-mega__list {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow-y: auto;
  padding: 0 18px 18px 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  -ms-flex-line-pack: start;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
  /* SSR-fallback: platte linkjes vóór JS-init (crawlbaar/no-JS) */
}
.mk-locaties-mega__list[hidden] {
  display: none;
}
.mk-locaties-mega__list::-webkit-scrollbar {
  width: 6px;
}
.mk-locaties-mega__list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 99px;
}
.mk-locaties-mega__list::-webkit-scrollbar-track {
  background: transparent;
}
.mk-locaties-mega__list a {
  display: block;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.mk-locaties-mega__list a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
}
.mk-locaties-mega__city {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.022);
  -webkit-transition: background 150ms ease, border-color 150ms ease;
  transition: background 150ms ease, border-color 150ms ease;
  text-decoration: none;
}
.mk-locaties-mega__city:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.16);
}
.mk-locaties-mega__city.is-active {
  background: var(--mk-city-bg);
  border-color: var(--mk-city-border);
}
.mk-locaties-mega__city-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.16);
  -webkit-transition: background 150ms ease;
  transition: background 150ms ease;
}
.mk-locaties-mega__city.is-hot .mk-locaties-mega__city-dot {
  background: var(--mk-city-dot-hot);
}
.mk-locaties-mega__city.is-active .mk-locaties-mega__city-dot {
  background: var(--mk-city-accent);
}
.mk-locaties-mega__city-info {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}
.mk-locaties-mega__city-name {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.25px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.82);
}
.mk-locaties-mega__city.is-active .mk-locaties-mega__city-name {
  color: #fff;
}
.mk-locaties-mega__empty {
  height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.mk-locaties-mega__empty[hidden] {
  display: none;
}
.mk-locaties-mega__empty-ring {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
}
.mk-locaties-mega__empty-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.mk-locaties-mega__empty p {
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  max-width: 250px;
  margin: 0;
}
.mk-locaties-mega__preview {
  padding: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.03)), to(rgba(255, 255, 255, 0.008)));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.mk-locaties-mega__p-tag {
  -ms-flex-item-align: start;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 7px;
  color: var(--mk-p-accent, #fff);
  background: var(--mk-p-bg, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--mk-p-border, rgba(255, 255, 255, 0.16));
}
.mk-locaties-mega__p-name {
  margin: 11px 0 0;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.1;
  font-size: 22px;
}
.mk-locaties-mega__p-name.is-long {
  font-size: 18px;
}
.mk-locaties-mega__p-blurb {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.44);
  margin-top: 7px;
}
.mk-locaties-mega__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 15px;
}
.mk-locaties-mega__stat {
  padding: 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.mk-locaties-mega__stat-value {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 18px;
  height: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.mk-locaties-mega__stat-value.is-narrow {
  font-size: 12.5px;
}
.mk-locaties-mega__stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  margin-top: 2px;
}

/* ================================================
   REGIOKAART — hub-pagina (/pokemon-kaarten-verkopen/): hero, de volledige
   plaatsenlijst per regio (statisch, server-side) en een CTA-blok. Er
   stond hier ook een interactief donker paneel (filterbare lijst + live
   detailpaneel, met daarvoor weer een SVG-kaart) — dat hele blok is
   bewust geschrapt, deze pagina is nu puur statisch/server-side.
   ================================================ */
.mk-regiokaart {
  padding: 0 0 80px;
  position: relative;
  background: radial-gradient(ellipse 55% 45% at 8% 15%, rgba(221, 66, 144, 0.09) 0%, transparent 60%), radial-gradient(ellipse 45% 55% at 92% 60%, rgba(84, 181, 125, 0.08) 0%, transparent 60%), radial-gradient(ellipse 35% 40% at 75% 95%, rgba(239, 120, 21, 0.06) 0%, transparent 55%), linear-gradient(160deg, #fafafa 0%, #f2f2f7 100%);
  /* ---- hero ---- */
  /* ---- alle plaatsen (licht, zoals de rest van de site) ---- */
  /* ---- CTA-blok ---- */
}
.mk-regiokaart__inner {
  max-width: 1240px;
  margin: auto;
  width: 92%;
}
.mk-regiokaart__empty {
  text-align: center;
  color: rgba(0, 0, 0, 0.65);
  padding: 60px 0;
}
.mk-regiokaart__hero {
  padding: 0 0 40px;
}
.mk-regiokaart__hero-text {
  max-width: 640px;
}
.mk-regiokaart__eyebrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
.mk-regiokaart__eyebrow-bar {
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #dd4290;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.mk-regiokaart__eyebrow span:last-child {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}
.mk-regiokaart__hero-text h1 {
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #1d1d1f;
}
.mk-regiokaart__hero-text p {
  margin: 18px 0 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.65);
  max-width: 560px;
}
.mk-regiokaart__allplaces {
  padding: 0;
}
.mk-regiokaart__allplaces-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.mk-regiokaart__allplaces-head h2 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1d1d1f;
}
.mk-regiokaart__columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 980px) {
  .mk-regiokaart__columns {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .mk-regiokaart__columns {
    grid-template-columns: 1fr;
  }
}
.mk-regiokaart__column {
  padding: 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
}
.mk-regiokaart__column-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
.mk-regiokaart__column-bar {
  width: 3px;
  height: 26px;
  border-radius: 3px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.mk-regiokaart__column-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1.2;
  color: #1d1d1f;
}
.mk-regiokaart__column-count {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 2px;
}
.mk-regiokaart__column-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1px;
}
.mk-regiokaart__column-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.15px;
  color: rgba(0, 0, 0, 0.65);
  text-decoration: none;
  -webkit-transition: background 150ms ease, color 150ms ease;
  transition: background 150ms ease, color 150ms ease;
}
.mk-regiokaart__column-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #1d1d1f;
}
.mk-regiokaart__column-km {
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(0, 0, 0, 0.55);
}
.mk-regiokaart__cta {
  margin-top: 38px;
  padding: 34px 38px;
  border-radius: 20px;
  background: linear-gradient(115deg, rgba(221, 66, 144, 0.1), rgba(239, 120, 21, 0.06) 62%, rgba(255, 255, 255, 0.4));
  border: 1px solid rgba(221, 66, 144, 0.18);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 32px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.mk-regiokaart__cta h2 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #1d1d1f;
}
.mk-regiokaart__cta-text {
  min-width: 260px;
}
.mk-regiokaart__cta-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.mk-regiokaart__cta-primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 9px;
  padding: 0 24px;
  height: 50px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(135deg, #dd4290, #c9357f);
  -webkit-box-shadow: 0 10px 26px rgba(221, 66, 144, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 26px rgba(221, 66, 144, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.mk-regiokaart__cta-primary:hover {
  -webkit-transform: translateY(-1px);
  transform: translateY(-1px);
}
.mk-regiokaart__cta-secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 22px;
  height: 50px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 700;
  color: #1d1d1f;
  text-decoration: none;
  cursor: pointer;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
.mk-regiokaart__cta-secondary:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* === BOTTOM SHEET ===
   Na de modal-specifieke bestanden geïmporteerd, zodat de
   mobiele bottom-sheet-regels (gelijke class-specificiteit)
   in de cascade winnen van de desktop-only regels hierboven. */
/* ================================================
   BOTTOM SHEET — gedeeld gedrag voor modals op mobiel
   Toegepast op: .review-modal, .mk-card-detail-modal,
   .mk-collection-modal (elk krijgt de klassen
   mk-bottom-sheet / __panel / __handle erbij, naast hun
   eigen bestaande klassen).

   Desktop houdt gewoon de eigen gecentreerde/scale-in
   stijl van elk blok. Op mobiel schuift de sheet van
   onderuit in beeld en kan hij via de sleepgreep
   (__handle) omlaag geveegd worden om te sluiten.
   ================================================ */
.mk-bottom-sheet__handle {
  display: none;
}

@media (max-width: 768px) {
  .mk-bottom-sheet {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    padding: 0;
  }
  .mk-bottom-sheet__panel {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 88vh;
    margin: 0;
    -webkit-animation: none !important;
    animation: none !important;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    transition: -webkit-transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    /* Eigen compositor-laag, zodat de browser alleen hoeft te
       verschuiven i.p.v. steeds opnieuw te tekenen (voorkomt
       hakkelige animatie, vooral samen met de box-shadow). */
    will-change: transform;
  }
  .mk-bottom-sheet.is-open .mk-bottom-sheet__panel {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  .mk-bottom-sheet.is-dragging .mk-bottom-sheet__panel,
  .mk-bottom-sheet.is-dragging .mk-bottom-sheet__backdrop {
    -webkit-transition: none;
    transition: none;
  }
  /* Geen backdrop-filter/blur op mobiel: die wordt elke frame opnieuw
     berekend zodra opacity of de eronderliggende inhoud animeert, en
     is op veel telefoons (vooral Android) een van de grootste oorzaken
     van een hakkelige animatie. Een effen halfdoorzichtige achtergrond
     (zoals bv. mk-cart-popup dat ook doet) is vrijwel gratis voor de
     GPU en oogt in de praktijk nauwelijks anders. */
  .mk-bottom-sheet__backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: opacity;
    -ms-touch-action: none;
    touch-action: none;
  }
  /* Overlay bovenop de header/hero i.p.v. de inhoud omlaag te duwen
     — anders ontstaat er een wit gat vóór de eigenlijke popup-header. */
  .mk-bottom-sheet__handle {
    display: block;
    position: absolute;
    top: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 20;
    width: 40px;
    height: 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    -ms-touch-action: none;
    touch-action: none;
  }
}
/* ================================================
   GEDEELDE AFBEELDING-LIGHTBOX — hergebruikt door de
   kaart-zoeker (kaartafbeelding) en de beurs-plattegrond.
   Simpele klik-om-te-sluiten overlay (geen sheet-gedrag).
   ================================================ */
.mk-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.mk-image-lightbox[hidden] {
  display: none;
}
.mk-image-lightbox.is-open {
  opacity: 1;
}
.mk-image-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  border-radius: 8px;
  -webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  /* Geen transitie op transform: pinch/pan/scroll-zoom moeten 1-op-1
     met de vinger/muis meebewegen, een transitie erop maakt dat traag
     en hobbelig aanvoelen. */
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -ms-touch-action: none;
  touch-action: none;
  will-change: transform;
}
.mk-image-lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}
.mk-image-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.22);
}