/* assets/dp-checkout.css — nieuwe Decoprof-checkout (snippets/dp-checkout*.rain)
   Alles valt onder #dpc zodat thema-/bootstrap-stijlen er niet doorheen lopen, zonder !important. */

#dpc {
  --dpc-ink: #29384B;
  --dpc-text: #4a5566;
  --dpc-muted: #898D93;
  --dpc-line: #ECECEC;
  --dpc-field: #8D8D8D;
  --dpc-bg: #FAFAFA;
  --dpc-green: #70C067;
  --dpc-green-d: #5aa651;
  --dpc-blue: #0099E5;
  --dpc-blue-bg: #E6F5FC;
  --dpc-red: #D0342C;
  --dpc-red-bg: #fdf1f0;
  --dpc-radius: 4px;
  --dpc-card: 6px;
  color: var(--dpc-text);
  font-size: 15px;
  line-height: 1.45;
  padding: 24px 16px 64px;
}
#dpc *, #dpc *::before, #dpc *::after { box-sizing: border-box; }
#dpc [hidden] { display: none !important; }
/* thema zet float op knoppen en velden; binnen de checkout niet */
#dpc button, #dpc input, #dpc select, #dpc textarea, #dpc label { float: none; }
#dpc summary { text-align: left; }
#dpc .dpc-sr, #dpc .dpc-legend.dpc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- layout ---------- */
#dpc .dpc__wrap {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas: "head head" "main side";
  column-gap: 40px;
  align-items: start;
}
#dpc .dpc__head { grid-area: head; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 20px; }
#dpc .dpc__main { grid-area: main; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#dpc .dpc__side { grid-area: side; position: sticky; top: 16px; }

#dpc .dpc__h1 { margin: 0; flex: 1 1 auto; font-size: 28px; line-height: 1.2; font-weight: 800; color: var(--dpc-ink); }
#dpc .dpc-back { order: -1; flex: 1 0 100%; font-size: 14px; color: var(--dpc-muted); text-decoration: none; }
#dpc .dpc-back::before { content: "‹ "; }
#dpc .dpc-back:hover { color: var(--dpc-ink); }
#dpc .dpc-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dpc-muted); }
#dpc .dpc-lock { width: 14px; height: 14px; fill: currentColor; flex: none; }

/* ---------- stappen ---------- */
#dpc .dpc-step { background: #fff; border: 1px solid var(--dpc-line); border-radius: var(--dpc-card); padding: 18px 20px; }
#dpc .dpc-step.is-open { border-color: #dfe2e6; box-shadow: 0 1px 2px rgba(41, 56, 75, .05); padding-bottom: 24px; }
#dpc .dpc-step__head { display: flex; align-items: center; gap: 12px; }
#dpc .dpc-step__nr {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: var(--dpc-ink); color: #fff; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
#dpc .dpc-step.is-done .dpc-step__nr { background: var(--dpc-green); font-size: 0; }
#dpc .dpc-step.is-done .dpc-step__nr::before { content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
#dpc .dpc-step.is-todo .dpc-step__nr { background: #c7cbd1; }
#dpc .dpc-step__title { margin: 0; flex: 1; font-size: 18px; line-height: 1.3; font-weight: 800; color: var(--dpc-ink); }
#dpc .dpc-step.is-todo .dpc-step__title { color: #9aa0a8; }
#dpc .dpc-step__edit { font-size: 14px; }
#dpc .dpc-step__sum { margin: 8px 0 0 36px; font-size: 14px; color: var(--dpc-ink); }
#dpc .dpc-step__hint { margin: 4px 0 0 36px; font-size: 13px; color: #9aa0a8; }
#dpc .dpc-step__body { margin-top: 18px; }
#dpc .dpc-step.is-busy .dpc-step__body { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* ---------- tekst / links ---------- */
#dpc .dpc-muted { color: var(--dpc-muted); }
#dpc .dpc-link {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer;
  color: var(--dpc-blue); text-decoration: underline; text-underline-offset: 2px;
}
#dpc .dpc-link:hover { color: #007bb8; }
#dpc .dpc-link--small { font-size: 13px; }
#dpc .dpc-hint { font-size: 13px; color: var(--dpc-muted); margin: 6px 0 0; }
#dpc .dpc-free { color: var(--dpc-green-d); font-weight: 600; }
#dpc .dpc-badge { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 10px; background: #eef7ed; color: #3f8a37; font-size: 12px; font-weight: 600; vertical-align: 1px; }
#dpc .dpc-badge--green { display: inline-flex; align-items: center; gap: 4px; background: #70C067; color: #fff; }
#dpc .dpc-leaf { width: 12px; height: 12px; fill: currentColor; flex: none; }

/* ---------- meldingen ---------- */
#dpc .dpc-alert { padding: 12px 14px; margin: 0 0 16px; border-radius: var(--dpc-radius); background: var(--dpc-blue-bg); color: var(--dpc-ink); font-size: 14px; }
#dpc .dpc-alert--error { background: var(--dpc-red-bg); color: var(--dpc-red); }
#dpc .dpc-alert--ok { background: #eef7ed; color: #2f6b29; }

/* ---------- formulier ---------- */
#dpc .dpc-form { margin: 0; }
#dpc .dpc-fs { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
#dpc .dpc-legend { display: block; width: 100%; padding: 0; margin: 0 0 10px; border: 0; font-size: 15px; font-weight: 700; color: var(--dpc-ink); }
#dpc .dpc-legend__sub { display: block; font-size: 13px; font-weight: 400; color: var(--dpc-muted); margin-top: 2px; }
#dpc .dpc-row { display: flex; gap: 12px; }
#dpc .dpc-row > .dpc-field { flex: 1 1 0; min-width: 0; }
#dpc .dpc-field { margin: 0 0 12px; }
#dpc .dpc-field--zip { flex: 1.3 1 0; }
#dpc .dpc-field--nr { flex: 0 0 110px; }
#dpc .dpc-field--ext { flex: 0 0 90px; }
#dpc .dpc-field--street { flex: 2 1 0; }
#dpc .dpc-label { display: block; margin: 0 0 5px; font-size: 14px; font-weight: 600; color: var(--dpc-ink); line-height: 1.3; }
#dpc .dpc-opt { font-weight: 400; color: var(--dpc-muted); }
#dpc .dpc-input {
  display: block; width: 100%; height: 46px; margin: 0; padding: 0 12px;
  font: inherit; font-size: 16px; color: var(--dpc-ink); background: #fff;
  border: 1px solid var(--dpc-field); border-radius: var(--dpc-radius); box-shadow: none; outline: 0;
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
#dpc .dpc-input:focus { border-color: var(--dpc-blue); box-shadow: 0 0 0 3px rgba(0, 153, 229, .18); }
#dpc .dpc-select {
  padding-right: 36px; cursor: pointer;
  background-image: 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' fill='none' stroke='%2329384B' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
#dpc .dpc-textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
#dpc .dpc-field.has-error .dpc-input { border-color: var(--dpc-red); background: var(--dpc-red-bg); }
#dpc .dpc-field.is-ok .dpc-input { border-color: var(--dpc-green); }
#dpc .dpc-err { color: var(--dpc-red); font-size: 13px; margin-top: 4px; }
#dpc .dpc-vat-hint { font-size: 13px; line-height: 1.4; margin-top: 6px; }
#dpc .dpc-vat-hint:empty { display: none; }
#dpc .dpc-vat-hint.is-warn { padding: 8px 10px; border-radius: var(--dpc-radius); background: #fff6e5; color: #7a4b00; }
#dpc .dpc-vat-hint.is-ok { color: var(--dpc-green-d); }
#dpc .dpc-vat-hint.is-ok::before { content: "✓ "; font-weight: 700; }
#dpc .dpc-vat-hint.is-busy { color: var(--dpc-muted); }
#dpc .dpc-vat-hint.is-busy::before, #dpc .dpc-submit-note::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 7px; vertical-align: -1px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: dpc-spin .7s linear infinite; }
#dpc .dpc-submit-note { margin: 10px 0 0; font-size: 13px; color: var(--dpc-muted); }
#dpc .dpc-vat-hint .dpc-link { font-weight: 600; white-space: nowrap; }
#dpc .dpc-err:empty { display: none; }

#dpc .dpc-phone { display: flex; gap: 8px; }
#dpc .dpc-phone__code { flex: 0 0 116px; width: 116px; max-width: none; font-size: 15px; padding-left: 10px; padding-right: 30px; background-position: right 10px center; }

/* checkbox */
#dpc .dpc-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; font-size: 15px; font-weight: 400; color: var(--dpc-ink); cursor: pointer; flex-wrap: wrap; }
#dpc .dpc-check input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; display: block; position: static; opacity: 1;
  width: 20px; height: 20px; margin: 1px 0 0; padding: 0; flex: none; cursor: pointer;
  border: 2px solid var(--dpc-field); border-radius: 3px; background: #fff no-repeat center / 12px 10px;
  transition: background-color .12s, border-color .12s;
}
#dpc .dpc-check input[type="checkbox"]:checked {
  border-color: var(--dpc-blue); background-color: var(--dpc-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#dpc .dpc-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--dpc-blue); outline-offset: 2px; }
#dpc .dpc-check input[type="checkbox"]::before, #dpc .dpc-check input[type="checkbox"]::after { content: none; display: none; }
#dpc .dpc-check > span:not(.dpc-err) { flex: 1; min-width: 0; }
#dpc .dpc-check .dpc-err { flex-basis: 100%; margin: 0 0 0 30px; }

/* particulier / zakelijk */
#dpc .dpc-seg { display: inline-flex; border: 1px solid var(--dpc-field); border-radius: var(--dpc-radius); overflow: hidden; margin-bottom: 14px; }
#dpc .dpc-seg__opt { position: relative; margin: 0; font-weight: 600; font-size: 14px; cursor: pointer; }
#dpc .dpc-seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
#dpc .dpc-seg__opt span { display: block; padding: 0 18px; line-height: 42px; color: var(--dpc-ink); }
#dpc .dpc-seg__opt + .dpc-seg__opt span { border-left: 1px solid var(--dpc-field); }
#dpc .dpc-seg__opt input:checked + span { background: var(--dpc-blue-bg); color: var(--dpc-ink); box-shadow: inset 0 0 0 2px var(--dpc-blue); }
#dpc .dpc-seg__opt input:focus-visible + span { outline: 2px solid var(--dpc-blue); outline-offset: -4px; }
#dpc .dpc-company, #dpc .dpc-ship, #dpc .dpc-account {
  background: var(--dpc-bg); border: 1px solid var(--dpc-line); border-radius: var(--dpc-radius);
  padding: 14px 14px 2px; margin: 0 0 14px;
}

/* inloggen */
#dpc .dpc-login { margin: -4px 0 18px; }
#dpc .dpc-login__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 14px; border: 1px solid var(--dpc-line); border-radius: var(--dpc-radius); background: var(--dpc-bg); }
#dpc .dpc-login__q { margin: 0; font-size: 14px; color: var(--dpc-text); }
#dpc .dpc-login__q strong { color: var(--dpc-ink); margin-right: 4px; }
#dpc .dpc-btn--sm { height: 40px; padding: 0 18px; font-size: 14px; flex: none; }
#dpc .dpc-login__form { margin-top: 12px; background: var(--dpc-bg); border: 1px solid var(--dpc-line); border-radius: var(--dpc-radius); padding: 14px; }
#dpc .dpc-login__actions { display: flex; align-items: center; gap: 16px; }

/* adres */
#dpc .dpc-addr__found {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  margin: -2px 0 14px; padding: 10px 12px; border-radius: var(--dpc-radius);
  background: #eef7ed; color: var(--dpc-ink); font-size: 14px;
}
#dpc .dpc-addr__found-txt::before { content: ""; display: inline-block; width: 9px; height: 5px; margin: 0 8px 3px 2px; border: solid var(--dpc-green-d); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
#dpc .dpc-addr__msg { font-size: 13px; color: var(--dpc-muted); margin: -6px 0 12px; }
#dpc .dpc-addr__msg:empty { display: none; }
#dpc .dpc-addr__msg.is-error { color: var(--dpc-red); }
.dpc-js #dpc .dpc-addr.is-auto .dpc-addr__street { display: none; }

#dpc .dpc-combo { position: relative; }
#dpc .dpc-combo__list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  background: #fff; border: 1px solid var(--dpc-field); border-radius: var(--dpc-radius); box-shadow: 0 8px 24px rgba(41, 56, 75, .12);
  max-height: 260px; overflow-y: auto; scrollbar-width: none;
}
#dpc .dpc-combo__list::-webkit-scrollbar { display: none; }
#dpc .dpc-combo__list li { padding: 10px; border-radius: 3px; cursor: pointer; color: var(--dpc-ink); font-size: 15px; }
#dpc .dpc-combo__list li[aria-selected="true"], #dpc .dpc-combo__list li:hover { background: var(--dpc-blue-bg); }
#dpc .dpc-combo__list li.is-empty { cursor: default; color: var(--dpc-muted); background: none; }

/* ---------- keuzekaarten (verzend- en betaalmethodes) ---------- */
#dpc .dpc-options { display: flex; flex-direction: column; gap: 8px; }
#dpc .dpc-opt-card {
  position: relative; display: flex; align-items: center; gap: 12px; margin: 0;
  min-height: 56px; padding: 12px 14px; background: #fff; cursor: pointer;
  border: 1px solid var(--dpc-field); border-radius: var(--dpc-radius);
  font-weight: 400; color: var(--dpc-ink); transition: border-color .15s, background-color .15s;
}
#dpc .dpc-opt-card:hover { border-color: var(--dpc-green); }
#dpc .dpc-opt-card > input { position: absolute; opacity: 0; pointer-events: none; }
#dpc .dpc-opt-card__radio { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid var(--dpc-field); background: #fff; }
#dpc .dpc-opt-card > input:checked ~ .dpc-opt-card__radio { border: 6px solid var(--dpc-blue); }
#dpc .dpc-opt-card:has(> input:checked) { background: var(--dpc-blue-bg); border-color: var(--dpc-blue); box-shadow: inset 0 0 0 1px var(--dpc-blue); }
#dpc .dpc-opt-card.is-checked { background: var(--dpc-blue-bg); border-color: var(--dpc-blue); box-shadow: inset 0 0 0 1px var(--dpc-blue); }
#dpc .dpc-opt-card > input:focus-visible ~ .dpc-opt-card__radio { outline: 2px solid var(--dpc-blue); outline-offset: 2px; }
#dpc .dpc-opt-card__icon { width: 32px; height: 24px; object-fit: contain; flex: none; }
#dpc .dpc-opt-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#dpc .dpc-opt-card--pay .dpc-opt-card__main { flex-direction: row; flex-wrap: wrap; align-items: center; }
#dpc .dpc-opt-card__title { font-weight: 600; font-size: 15px; }
#dpc .dpc-opt-card__desc { font-size: 13px; color: var(--dpc-muted); margin-top: 1px; }
#dpc .dpc-opt-card__price { flex: none; font-weight: 600; font-size: 15px; color: var(--dpc-ink); white-space: nowrap; }
/* "Duurzame keuze": label rechtsboven in de kaart */
#dpc .dpc-opt-card.is-green { padding-top: 30px; }
#dpc .dpc-opt-card__flag { position: absolute; top: -1px; right: -1px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 8px; border-radius: 0 var(--dpc-radius) 0 8px; background: var(--dpc-green); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3; pointer-events: none; }
#dpc .dpc-opt-card__flag .dpc-leaf { width: 12px; height: 12px; fill: currentColor; }
#dpc .dpc-opt-card__form { display: block; width: 100%; margin-top: 10px; }
#dpc .dpc-opt-card__form .dpc-field { display: block; margin-bottom: 8px; }
#dpc .dpc-opt-card__form .dpc-label { font-size: 13px; }
#dpc .dpc-opt-card:not(:has(> input:checked)) .dpc-opt-card__form { display: none; }

#dpc .dpc-chosen { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; margin-bottom: 16px; border: 1px solid var(--dpc-line); border-radius: var(--dpc-radius); background: var(--dpc-bg); color: var(--dpc-ink); font-weight: 600; }

/* ---------- knoppen ---------- */
#dpc .dpc-actions { margin-top: 8px; }
#dpc .dpc-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 28px; margin: 0; border-radius: var(--dpc-radius); cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1; text-decoration: none; text-align: center;
  border: 2px solid var(--dpc-green); background: var(--dpc-green); color: #fff;
  transition: background-color .15s, color .15s;
}
/* hover: lichter groen met witte tekst (zelfde als winkelwagen en side-cart) */
/* !important: het thema geeft knoppen/links bij hover een eigen (bijna witte) achtergrond met !important en filter: brightness(.85) */
#dpc .dpc-btn:not(.dpc-btn--ghost):hover, #dpc .dpc-btn:not(.dpc-btn--ghost):focus-visible { background: #8DCD85 !important; border-color: #8DCD85 !important; color: #fff !important; filter: none !important; }
#dpc .dpc-btn--ghost:hover, #dpc .dpc-btn--ghost:focus-visible { background: #fff !important; color: var(--dpc-ink) !important; border-color: var(--dpc-ink) !important; filter: none !important; }
#dpc .dpc-btn:disabled { opacity: .5; cursor: default; }
#dpc .dpc-btn--ghost { height: 46px; padding: 0 18px; background: #fff; color: var(--dpc-ink); border: 1px solid var(--dpc-field); font-size: 15px; }
#dpc .dpc-btn--ghost:hover { background: #fff; color: var(--dpc-ink); border-color: var(--dpc-ink); }
#dpc .dpc-btn .dpc-lock { width: 16px; height: 16px; }
#dpc .dpc-btn.is-loading { color: transparent; pointer-events: none; }
#dpc .dpc-btn.is-loading::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #fff; border-right-color: transparent; animation: dpc-spin .7s linear infinite;
}
#dpc .dpc-btn--ghost.is-loading::after { border-color: var(--dpc-ink); border-right-color: transparent; }
#dpc .dpc-btn.is-loading .dpc-lock { opacity: 0; }
@keyframes dpc-spin { to { transform: rotate(360deg); } }

#dpc .dpc-place { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--dpc-line); }
#dpc .dpc-more { margin: 0 0 14px; }
#dpc .dpc-more > summary { cursor: pointer; color: var(--dpc-blue); font-size: 14px; list-style: none; display: inline-block; text-decoration: underline; text-underline-offset: 2px; }
#dpc .dpc-more > summary::-webkit-details-marker { display: none; }
#dpc .dpc-more[open] > summary { margin-bottom: 8px; }
#dpc .dpc-btn--place { width: 100%; height: 56px; font-size: 17px; }
#dpc .dpc-terms { font-size: 13px; color: var(--dpc-muted); margin: 10px 0 0; text-align: center; }
#dpc .dpc-terms a { color: inherit; }

/* ---------- overzicht ---------- */
#dpc .dpc-sum { background: var(--dpc-bg); border: 1px solid var(--dpc-line); border-radius: var(--dpc-card); }
#dpc .dpc-sum__toggle { display: none; }
#dpc .dpc-sum__body { padding: 20px; }
#dpc .dpc-sum__title { margin: 0 0 12px; font-size: 18px; font-weight: 800; color: var(--dpc-ink); }
#dpc .dpc-sum__lines { list-style: none; margin: 0; padding: 0; }
.dpc-js #dpc .dpc-sum__lines.is-long:not(.is-all) > .dpl:nth-child(n+5) { display: none; }
#dpc .dpc-sum__more { display: none; font-size: 14px; margin: 4px 0 6px; }
.dpc-js #dpc .dpc-sum__lines.is-long + .dpc-sum__more { display: inline-block; }
#dpc .dpc-sum__coupon { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--dpc-line); }
#dpc .dpc-sum__coupon > summary { display: inline-block; cursor: pointer; font-size: 14px; color: var(--dpc-blue); list-style: none; text-decoration: underline; text-underline-offset: 2px; }
#dpc .dpc-sum__coupon > summary::-webkit-details-marker { display: none; }
#dpc .dpc-coupon { display: flex; gap: 8px; margin-top: 10px; }
#dpc .dpc-coupon .dpc-input { height: 46px; text-transform: uppercase; }
#dpc .dpc-coupon__msg { font-size: 13px; margin-top: 6px; }
#dpc .dpc-coupon__msg:empty { display: none; }
#dpc .dpc-coupon__msg.is-error { color: var(--dpc-red); }
#dpc .dpc-totals { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--dpc-line); }
#dpc .dpc-totals__row { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; font-size: 14px; }
#dpc .dpc-totals__row dt { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; margin: 0; font-weight: 400; color: var(--dpc-text); }
#dpc .dpc-totals__row dd { margin: 0; color: var(--dpc-ink); text-align: right; white-space: nowrap; }
#dpc .dpc-totals__row--disc dd { color: var(--dpc-green-d); }
#dpc .dpc-totals__row--total { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dpc-line); font-size: 18px; }
#dpc .dpc-totals__row--total dt, #dpc .dpc-totals__row--total dd { font-weight: 800; color: var(--dpc-ink); }
#dpc .dpc-totals__row--tax { font-size: 13px; }
#dpc .dpc-totals__row--tax dt, #dpc .dpc-totals__row--tax dd { color: var(--dpc-muted); }
#dpc .dpc-chip { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 2px 0 8px; border-radius: 11px; background: #eef7ed; color: #2f6b29; font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
#dpc .dpc-chip__x { position: relative; display: inline-block; width: 18px; height: 18px; border-radius: 50%; color: inherit; text-decoration: none; }
#dpc .dpc-chip__x::before, #dpc .dpc-chip__x::after { content: ""; position: absolute; left: 5px; top: 8px; width: 8px; height: 2px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
#dpc .dpc-chip__x::after { transform: rotate(-45deg); }
#dpc .dpc-chip__x:hover { background: rgba(47, 107, 41, .15); }
#dpc .dpc-code { display: inline-block; padding: 0 5px; margin-left: 4px; border-radius: 3px; background: #e8eaed; font-size: 12px; font-weight: 600; color: var(--dpc-ink); }
#dpc .dpc-totals__row--shift dt, #dpc .dpc-totals__row--shift dd { color: var(--dpc-green-d); font-weight: 600; }
#dpc .dpc-sum__shift { margin: 6px 0 0; font-size: 12px; color: var(--dpc-muted); }
#dpc .dpc-sum__nudge { margin: 12px 0 0; padding: 9px 12px; border-radius: var(--dpc-radius); background: #eef7ed; color: #2f6b29; font-size: 13px; }
#dpc .dpc-sum__cart { display: inline-block; margin-top: 12px; font-size: 13px; }
#dpc .dpc-usps { list-style: none; margin: 0; padding: 14px 20px 16px; border-top: 1px solid var(--dpc-line); font-size: 13px; color: var(--dpc-ink); }
#dpc .dpc-usps li { position: relative; padding-left: 20px; margin: 3px 0; }
#dpc .dpc-usps li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 9px; height: 5px; border: solid var(--dpc-green); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
#dpc .dpc-trust { margin-top: 12px; }

/* ---------- productregel (snippets/dp-line.rain) ---------- */
.dpl { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid #ECECEC; list-style: none; }
.dpl:last-child { border-bottom: 0; }
.dpl__img { position: relative; width: 56px; height: 56px; border-radius: 4px; background: #fff; border: 1px solid #ECECEC; }
.dpl__img img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.dpl__qty { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #29384B; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.dpl__info { font-size: 13px; color: #6b7480; line-height: 1.35; }
.dpl__title { font-size: 14px; font-weight: 600; color: #29384B; line-height: 1.3; margin-bottom: 2px; }
.dpl__color { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: #29384B; }
.dpl__swatch { width: 14px; height: 14px; flex: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.dpl__swatch--none { background: #eef0f2; }
.dpl__swatch.is-unknown { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.dpl__field, .dpl__extra { margin-top: 2px; }
.dpl__bundle { list-style: none; margin: 5px 0 0; padding: 0; }
.dpl__bitem { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: #29384B; }
.dpl__bimg { flex: none; width: 28px; height: 28px; border: 1px solid #ECECEC; border-radius: 3px; background: #fff; overflow: hidden; }
.dpl__bimg img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dpl__btxt { min-width: 0; font-size: 12px; line-height: 1.3; }
.dpl__note { margin-top: 4px; color: #29384B; }
.dpl__stock { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 12px; line-height: 1.35; color: #898D93; }
.dpl__truck { width: 15px; height: 11px; flex: none; margin-top: 2px; fill: currentColor; }
.dpl__price { display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; font-weight: 600; color: #29384B; white-space: nowrap; text-align: right; line-height: 1.3; }
.dpl__was { font-size: 12px; font-weight: 400; color: #898D93; }
.dpl__now.is-disc { color: inherit; }
.dpl__gratis { color: #5aa651; }

/* ---------- mobiel / tablet ---------- */
@media (max-width: 991px) {
  #dpc { padding: 12px 0 48px; }
  #dpc .dpc__wrap { display: flex; flex-direction: column; align-items: stretch; }
  #dpc .dpc__head { padding: 0 16px; margin-bottom: 12px; }
  #dpc .dpc__h1 { font-size: 24px; }
  #dpc .dpc__side { position: static; order: 0; margin-bottom: 12px; }
  #dpc .dpc__main { order: 1; padding: 0 8px; }
  #dpc .dpc-sum { border-radius: 0; border-left: 0; border-right: 0; }
  .dpc-js #dpc .dpc-sum__toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; margin: 0; background: none; border: 0; font: inherit; font-size: 15px; color: var(--dpc-ink); cursor: pointer;
  }
  #dpc .dpc-sum__count { color: var(--dpc-muted); }
  #dpc .dpc-sum__toggle-r { display: inline-flex; align-items: center; gap: 10px; }
  #dpc .dpc-chev { width: 8px; height: 8px; border: solid var(--dpc-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
  #dpc .dpc-sum.is-open .dpc-chev { transform: rotate(-135deg) translateY(-2px); }
  .dpc-js #dpc .dpc-sum:not(.is-open) .dpc-sum__body { display: none; }
  .dpc-js #dpc .dpc-sum__title { display: none; }
  #dpc .dpc-sum__body { padding: 4px 16px 16px; }
  .dpc-js #dpc .dpc-sum:not(.is-open) .dpc-usps { display: none; }
  #dpc .dpc-trust { display: none; }
}
@media (max-width: 575px) {
  #dpc .dpc-step { padding: 16px 14px; }
  #dpc .dpc-step.is-open { padding-bottom: 20px; }
  #dpc .dpc-row { flex-wrap: wrap; gap: 0 10px; }
  #dpc .dpc-row > .dpc-field { flex: 1 1 100%; }
  #dpc .dpc-row > .dpc-field--zip { flex: 1 1 100%; }
  #dpc .dpc-row > .dpc-field--nr { flex: 1 1 0; }
  #dpc .dpc-row > .dpc-field--ext { flex: 0 0 96px; }
  #dpc .dpc-addr__zip { flex-wrap: wrap; }
  #dpc .dpc-btn--cta { width: 100%; }
  #dpc .dpc-step__sum, #dpc .dpc-step__hint { margin-left: 0; }
  #dpc .dpc-login__actions { flex-wrap: wrap; }
  #dpc .dpc-login__q span { display: block; }
}

/* ---------- bedankpagina (snippets/dp-thankyou.rain) ---------- */
#dpc.dpt { padding-bottom: 24px; }
#dpc.dpt .dpt__wrap { grid-template-areas: "hero hero" "main side"; }
#dpc .dpt__hero { grid-area: hero; display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding: 20px 24px; background: #eef7ed; border-radius: var(--dpc-card); }
#dpc .dpt__check { position: relative; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--dpc-green); }
#dpc .dpt__check::before { content: ""; position: absolute; left: 15px; top: 15px; width: 18px; height: 10px; border: solid #fff; border-width: 0 0 3px 3px; transform: rotate(-45deg); }
#dpc .dpt__hero .dpc__h1 { margin: 0 0 4px; }
#dpc .dpt__lead { margin: 0; color: var(--dpc-ink); font-size: 15px; }
#dpc .dpt__lead strong { font-weight: 700; word-break: break-word; }
#dpc .dpt-card { padding: 20px 24px 22px; }
#dpc .dpt-card__title { margin: 0 0 14px; font-size: 18px; line-height: 1.3; font-weight: 800; color: var(--dpc-ink); }
/* tijdlijn */
#dpc .dpt-steps { list-style: none; margin: 0; padding: 0; }
#dpc .dpt-steps__item { position: relative; display: flex; gap: 14px; padding: 0 0 18px; color: var(--dpc-text); }
#dpc .dpt-steps__item:last-child { padding-bottom: 0; }
#dpc .dpt-steps__item::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--dpc-line); }
#dpc .dpt-steps__item:last-child::before { display: none; }
#dpc .dpt-steps__item.is-done::before { background: var(--dpc-green); }
#dpc .dpt-steps__dot { position: relative; z-index: 1; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid #c7cbd1; background: #fff; }
#dpc .dpt-steps__item.is-done .dpt-steps__dot { border-color: var(--dpc-green); background: var(--dpc-green); }
#dpc .dpt-steps__item.is-done .dpt-steps__dot::before { content: ""; position: absolute; left: 5px; top: 5px; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
#dpc .dpt-steps__item.is-now .dpt-steps__dot { border-color: var(--dpc-blue); box-shadow: inset 0 0 0 4px #fff; background: var(--dpc-blue); }
#dpc .dpt-steps__item strong { display: block; color: var(--dpc-ink); font-size: 15px; font-weight: 700; line-height: 24px; }
#dpc .dpt-steps__item:not(.is-done):not(.is-now) strong { color: #6b7480; }
#dpc .dpt-steps__meta { display: block; font-size: 14px; color: var(--dpc-muted); }
/* video + introtekst */
#dpc .dpt-intro.has-video { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: center; }
#dpc .dpt-intro__txt { color: var(--dpc-text); font-size: 15px; line-height: 1.6; }
#dpc .dpt-intro__txt p:last-child { margin-bottom: 0; }
#dpc .dpt-video { position: relative; display: block; border-radius: var(--dpc-radius); overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
#dpc .dpt-video img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .15s; }
#dpc .dpt-video:hover img { opacity: 1; }
#dpc .dpt-video__play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--dpc-green); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
#dpc .dpt-video__play::before { content: ""; position: absolute; left: 22px; top: 17px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff; }
/* gegevens */
#dpc .dpt-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
#dpc .dpt-info__h { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--dpc-muted); text-transform: uppercase; letter-spacing: .04em; }
#dpc .dpt-info p { margin: 0 0 12px; color: var(--dpc-ink); font-size: 14px; line-height: 1.5; word-break: break-word; }
#dpc .dpt-paid { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 10px; background: #eef7ed; color: #2f6b29; font-size: 12px; font-weight: 700; }
/* betaling mislukt */
#dpc .dpt__hero.is-failed { align-items: flex-start; background: #fff6e5; }
#dpc .dpt__hero.is-failed .dpt__check { background: #e0a030; }
#dpc .dpt__hero.is-failed .dpt__check::before { content: "!"; left: 0; top: 0; width: 100%; height: 100%; border: 0; transform: none; color: #fff; font-size: 28px; font-weight: 800; line-height: 48px; text-align: center; }
#dpc .dpt__retry { margin: 14px 0 6px; }
#dpc .dpt__note { margin: 0; font-size: 13px; color: var(--dpc-muted); }
#dpc .dpt-steps__item.is-warn .dpt-steps__dot { border-color: #e0a030; background: #e0a030; }
#dpc .dpt-steps__link { display: inline-block; margin-top: 4px; font-size: 14px; }
#dpc .dpt-paid.is-open { background: #fff6e5; color: #7a4b00; }
#dpc .dpt-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 8px; }
/* account aanmaken na een gastbestelling */
#dpc .dpt-acc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 28px; background: #f4faf3; border-color: #d3eacf; }
#dpc .dpt-acc .dpt-card__title { grid-column: 1 / -1; }
#dpc .dpt-acc__intro { display: contents; }
#dpc .dpt-acc__usps { list-style: none; margin: 0; padding: 0; color: var(--dpc-ink); font-size: 15px; }
#dpc .dpt-acc__usps li { position: relative; padding-left: 26px; margin: 0 0 8px; line-height: 1.4; }
#dpc .dpt-acc__usps li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--dpc-green); }
#dpc .dpt-acc__usps li::after { content: ""; position: absolute; left: 5px; top: 7px; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
#dpc .dpt-acc__form { margin: 0; }
#dpc .dpt-acc__for { margin: 0 0 10px; font-size: 14px; color: var(--dpc-text); word-break: break-word; }
#dpc .dpt-acc__btn { width: 100%; margin-top: 2px; }
#dpc .dpt-acc .dpc-err:empty { display: none; }
#dpc .dpt-acc__terms { margin: 8px 0 0; font-size: 13px; color: var(--dpc-muted); }
#dpc .dpt-acc__done { display: flex; gap: 14px; align-items: flex-start; }
#dpc .dpt-acc__done[hidden] { display: none; }
#dpc .dpt-acc__done strong { display: block; color: var(--dpc-ink); font-size: 16px; }
#dpc .dpt-acc__done p { margin: 4px 0 12px; color: var(--dpc-text); font-size: 14px; }
#dpc .dpt-acc__ok { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--dpc-green); }
#dpc .dpt-acc__ok::before { content: ""; position: absolute; left: 9px; top: 10px; width: 13px; height: 7px; border: solid #fff; border-width: 0 0 3px 3px; transform: rotate(-45deg); }
/* social media: blok uit shopmonkey.css (zoals /blog/), hier compacter */
.dpt-social { padding: 8px 0 56px; }
.dpt-social .social-block .title-wrap h2 { margin-bottom: 6px; }
.dpt-social__sub { margin: 0 0 20px; color: #898D93; }
.dpt-social .socials-wrap { --block_height: 150px; --icon_size: 56px; }
@media (max-width: 991px) {
  #dpc.dpt .dpt__wrap { display: flex; flex-direction: column; }
  #dpc .dpt__hero { order: -1; margin: 0 8px 12px; padding: 16px; }
  #dpc.dpt .dpc__side { order: 2; margin: 12px 0 0; }
  #dpc.dpt .dpc__main { order: 1; }
  #dpc .dpt-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dpt-social .socials-wrap { --block_height: 110px; --icon_size: 40px; }
}
@media (max-width: 575px) {
  #dpc .dpt__hero { align-items: flex-start; }
  #dpc .dpt__check { width: 36px; height: 36px; }
  #dpc .dpt__check::before { left: 10px; top: 11px; width: 15px; height: 8px; }
  #dpc .dpt__hero.is-failed .dpt__check::before { left: 0; top: 0; width: 100%; height: 100%; font-size: 22px; line-height: 36px; }
  #dpc .dpt__retry .dpc-btn { width: 100%; }
  #dpc .dpt-card { padding: 16px 14px 18px; }
  #dpc .dpt-intro.has-video { grid-template-columns: 1fr; }
  #dpc .dpt-info { grid-template-columns: 1fr; }
  #dpc .dpt-actions .dpc-btn { width: 100%; }
  #dpc .dpt-acc { grid-template-columns: 1fr; }
  #dpc .dpt-acc__usps { margin-bottom: 8px; }
  .dpt-social .socials-wrap { --block_height: 80px; --icon_size: 32px; }
}