/* Channel Support: keuzeblok gratis sticker (winkelwagen). Gebruikt de thema-tokens met terugvalwaarden. */
.cs-freesticker:empty { display: none; }
.cs-freesticker__card {
  margin: 16px 0 0; padding: 20px; border: 1px dashed var(--jp-purple, #6c2c91); border-radius: var(--jp-radius, 8px);
  background: #fcfafd;
}
.cs-freesticker__head { display: flex; align-items: center; gap: 14px; }
.cs-freesticker__zoom {
  position: relative; flex: 0 0 104px; width: 104px; height: 104px; padding: 0; border: 0; background: none; cursor: zoom-in;
}
.cs-freesticker__img {
  display: block; width: 104px; height: 104px; object-fit: contain; padding: 4px;
  border: 1px solid var(--jp-line, #e6e1ea); border-radius: 8px; background: #fff; transition: border-color 0.15s;
}
.cs-freesticker__zoom:hover .cs-freesticker__img, .cs-freesticker__zoom:focus-visible .cs-freesticker__img { border-color: var(--jp-purple, #6c2c91); }
.cs-freesticker__zoomicon {
  position: absolute; right: 6px; bottom: 6px; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--jp-purple, #6c2c91); color: #fff;
  box-shadow: 0 2px 6px rgba(28, 18, 32, 0.25);
}
.cs-freesticker__dialog {
  width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); margin: auto; padding: 16px;
  border: 0; border-radius: 12px; background: #fff; box-shadow: 0 24px 64px rgba(28, 18, 32, 0.3);
}
.cs-freesticker__dialog::backdrop { background: rgba(28, 18, 32, 0.7); }
.cs-freesticker__dialog img { display: block; width: 100%; height: auto; max-height: calc(100vh - 80px); object-fit: contain; }
.cs-freesticker__dialogclose { position: absolute; top: 10px; right: 10px; margin: 0; }
.cs-freesticker__dialogclose button {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--jp-ink, #1c1220); cursor: pointer;
  box-shadow: 0 2px 8px rgba(28, 18, 32, 0.2);
}
.cs-freesticker__title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 2px;
  color: var(--jp-ink, #1c1220); font-size: 16px; font-weight: 700; line-height: 1.3;
}
.cs-freesticker__badge {
  padding: 3px 8px; border-radius: 999px; background: var(--jp-yellow, #f5e623); color: var(--jp-ink, #1c1220);
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2;
}
.cs-freesticker__text { margin: 0; color: var(--jp-ink-soft, #4d4452); font-size: 13px; line-height: 1.5; }
.cs-freesticker__form { margin: 16px 0 0; }
.cs-freesticker__form.is-loading { opacity: 0.55; pointer-events: none; }
.cs-freesticker__options { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-freesticker__opt {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px 6px 7px;
  border: 1px solid var(--jp-line, #e6e1ea); border-radius: 999px; background: #fff; color: var(--jp-ink, #1c1220);
  font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.cs-freesticker__opt:hover, .cs-freesticker__opt:focus-visible { border-color: var(--jp-purple, #6c2c91); outline: 0; box-shadow: 0 0 0 3px var(--jp-purple-soft, #f1e9f6); }
.cs-freesticker__opt.is-selected { border: 2px solid var(--jp-purple, #6c2c91); padding: 5px 11px 5px 6px; color: var(--jp-purple, #6c2c91); cursor: default; }
.cs-freesticker__swatch {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(28, 18, 32, 0.18);
}
.cs-freesticker__check { flex: 0 0 auto; color: var(--jp-purple, #6c2c91); }
.cs-freesticker__status { margin: 14px 0 0; color: var(--jp-ink-soft, #4d4452); font-size: 13px; line-height: 1.5; }
.cs-freesticker__status.is-done { color: var(--jp-success, #1f8a4c); font-weight: 600; }
.cs-freesticker__status.is-error { color: #c0392b; font-weight: 600; }

@media (max-width: 575.98px) {
  .cs-freesticker__card { padding: 16px; }
  .cs-freesticker__head { align-items: flex-start; }
  .cs-freesticker__zoom, .cs-freesticker__img { flex-basis: 84px; width: 84px; height: 84px; }
  .cs-freesticker__opt { font-size: 12px; }
}