.klik-colorcard{ position:relative; }

.klik-colorcard .klik-colorchart{
  --opacity:.52;
  --w:280px;

  position:absolute;
  right:14px; left:auto; bottom:16px; /* ✅ altijd rechts */

  width:var(--w);
  max-width:calc(100% - 28px);

  border-radius:16px;
  overflow:hidden;

  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 22px 70px rgba(0,0,0,.46);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  pointer-events:none;
  z-index:9;

  opacity:var(--opacity);
  transform: rotate(-9deg) skewX(-1deg);
  transform-origin: 85% 100%;
}

.klik-colorcard .klik-colorchart::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(circle at 78% 82%, rgba(226,0,223,.16), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.030) 0 1px, rgba(0,0,0,0) 1px 3px);
  opacity:.65;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:1;
}

.klik-colorchart__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 10px;
  border-bottom:1px solid rgba(255,255,255,.12);

  font-family: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing:.6px;
  color:rgba(255,255,255,.92);

  position:relative;
  z-index:3;
}
.klik-colorchart__tag{ font-size:11px; opacity:.9; }
.klik-colorchart__wb { font-size:11px; opacity:.9; }

.klik-colorchart__grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:6px;
  padding:10px;
  position:relative;
  z-index:3;
}
.klik-swatch{
  height:26px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
}

/* EXTREME kleurzweem overlay */
.klik-colorchart__tint{
  position:absolute;
  inset:-15%;
  opacity:0;
  pointer-events:none;
  z-index:2;
  mix-blend-mode: color-dodge;
  filter: blur(6px);
  transform: rotate(-8deg);
}

/* sweep-flits over “glas” */
.klik-colorchart__sweep{
  position:absolute;
  inset:-30%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.20) 45%,
    rgba(255,255,255,0) 100%
  );
  opacity:0;
  transform: translateX(-140%) rotate(-10deg);
  mix-blend-mode: screen;
  filter: blur(.7px);
  pointer-events:none;
  z-index:4;
}

@keyframes klikSweep {
  0%{ opacity:0; transform: translateX(-140%) rotate(-10deg); }
  15%{ opacity:.95; }
  70%{ opacity:.25; }
  100%{ opacity:0; transform: translateX(140%) rotate(-10deg); }
}

@media(max-width:520px){
  .klik-colorcard .klik-colorchart{
    right:10px; left:auto; bottom:12px;
    transform: rotate(-8deg) skewX(-1deg);
  }
  .klik-swatch{ height:24px; }
}