/* =============================================================
   DPV Cart Drawer – assets/cart-drawer.css  v1.0.7
   
   BELANGRIJK: De header plugin heeft een * reset met !important
   die alle child elements raakt. Wij gebruiken ID-gebaseerde
   selectors (#dpvDrawer) voor hogere specificiteit waar nodig.
   ============================================================= */

:root {
  --dpv-cd-w:       420px;
  --dpv-cd-bg:      #ffffff;
  --dpv-cd-surface: #f6f6f6;
  --dpv-cd-border:  #e8e8e8;
  --dpv-cd-text:    #111111;
  --dpv-cd-muted:   #909090;
  --dpv-cd-accent:  #2f4156;
  --dpv-cd-green:   #1a7a42;
  --dpv-cd-danger:  #c0021a;
  --dpv-cd-r:       4px;
  --dpv-cd-ease:    cubic-bezier(.25,.46,.45,.94);
}

/* ── Overlay ── */
#dpvOverlay {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.28) !important;
  z-index: 199990 !important;
  backdrop-filter: blur(1.5px) !important;
  -webkit-backdrop-filter: blur(1.5px) !important;
  opacity: 0 !important;
  transition: opacity 200ms var(--dpv-cd-ease) !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
#dpvOverlay.show    { display: block !important; }
#dpvOverlay.visible { opacity: 1 !important; }

/* ── Drawer — ID selector wint van header's * ── */
#dpvDrawer {
  position: fixed !important;
  top: 0 !important;
  margin-top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(var(--dpv-cd-w), 100vw) !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  background: #ffffff !important;
  z-index: 199991 !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(100%) !important;
  transition: transform 230ms var(--dpv-cd-ease) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #111111 !important;
  border-left: 1px solid #e8e8e8 !important;
  will-change: transform !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
#dpvDrawer.open {
  transform: translateX(0) !important;
}

/* ── Reset alle directe kinderen van drawer ── */
#dpvDrawer * {
  box-sizing: border-box !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

/* ── Header ── */
#dpvDrawer .dpv-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 18px 15px !important;
  border-bottom: 1px solid #e8e8e8 !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  background: #ffffff !important;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  max-width: none !important;
  transform: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: auto !important;
}
#dpvDrawer .dpv-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: #111111 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
#dpvDrawer .dpv-count {
  font-weight: 400 !important;
  color: #909090 !important;
}
#dpvDrawer #dpvClose {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  color: #909090 !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: color 120ms, background 120ms !important;
}
#dpvDrawer #dpvClose:hover { color: #111111 !important; background: #f6f6f6 !important; }
#dpvDrawer #dpvClose svg {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 1.8 !important;
  display: block !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Progress ── */
#dpvDrawer .dpv-progress {
  padding: 11px 18px 12px !important;
  border-bottom: 1px solid #e8e8e8 !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  background: #ffffff !important;
  margin: 0 !important;
}
#dpvDrawer .dpv-prog-label {
  font-size: 11.5px !important;
  color: #909090 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  display: block !important;
  width: 100% !important;
}
#dpvDrawer .dpv-prog-label strong { color: #111111 !important; font-weight: 600 !important; }
#dpvDrawer .dpv-prog-track {
  position: relative !important;
  height: 3px !important;
  background: #e8e8e8 !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
#dpvDrawer .dpv-prog-fill {
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  background: #2f4156 !important;
  border-radius: 3px !important;
  transition: width 380ms var(--dpv-cd-ease), background 300ms !important;
  margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-prog-fill.phase2 { background: #1a7a42 !important; }
#dpvDrawer .dpv-prog-markers {
  position: relative !important;
  height: 18px !important;
  margin: 5px 0 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
#dpvDrawer .dpv-prog-marker {
  position: absolute !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  font-size: 10px !important;
  color: #909090 !important;
  white-space: nowrap !important;
  transition: color 300ms !important;
  margin: 0 !important; padding: 0 !important;
  line-height: 1 !important;
}
#dpvDrawer .dpv-prog-marker.hit { color: #1a7a42 !important; font-weight: 600 !important; }
#dpvDrawer .dpv-prog-marker--gift { left: 83.33% !important; }
#dpvDrawer .dpv-prog-marker--ship { left: 100% !important; transform: translateX(-100%) !important; }
#dpvDrawer .dpv-prog-marker .dot {
  width: 5px !important; height: 5px !important;
  border-radius: 50% !important;
  background: #e8e8e8 !important;
  margin: 0 0 3px 0 !important; padding: 0 !important;
  display: block !important;
  transition: background 300ms !important;
}
#dpvDrawer .dpv-prog-marker.hit .dot { background: #1a7a42 !important; }

/* ── Body ── */
#dpvDrawer .dpv-body {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-body::-webkit-scrollbar { width: 3px !important; }
#dpvDrawer .dpv-body::-webkit-scrollbar-thumb { background: #e8e8e8 !important; border-radius: 3px !important; }

/* ── Section ── */
#dpvDrawer .dpv-section {
  padding: 12px 18px !important;
  border-bottom: 1px solid #e8e8e8 !important;
  width: 100% !important;
  background: #ffffff !important;
  margin: 0 !important;
}
#dpvDrawer .dpv-section:last-child { border-bottom: none !important; }
#dpvDrawer .dpv-section-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #909090 !important;
  margin: 0 0 9px 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* ── Item ── */
#dpvDrawer .dpv-item {
  display: grid !important;
  grid-template-columns: 52px 1fr auto !important;
  gap: 10px !important;
  align-items: start !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #e8e8e8 !important;
  transition: opacity 160ms, transform 160ms !important;
  width: 100% !important;
  margin: 0 !important;
}
#dpvDrawer .dpv-item:first-child { padding-top: 2px !important; }
#dpvDrawer .dpv-item:last-child  { border-bottom: none !important; padding-bottom: 0 !important; }

#dpvDrawer .dpv-item-thumb {
  width: 52px !important; height: 52px !important;
  border-radius: 4px !important;
  border: 1px solid #e8e8e8 !important;
  background: #f6f6f6 !important;
  object-fit: cover !important;
  display: block !important;
  flex-shrink: 0 !important;
  margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-item-info { min-width: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
#dpvDrawer .dpv-item-name {
  font-size: 12.5px !important; font-weight: 500 !important;
  line-height: 1.3 !important; color: #111111 !important;
  white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important; display: block !important;
  margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-item-meta {
  font-size: 11px !important; color: #909090 !important;
  margin: 2px 0 0 0 !important; padding: 0 !important; display: block !important;
}

/* Qty row */
#dpvDrawer .dpv-qty-row {
  display: flex !important; align-items: center !important;
  margin: 7px 0 0 0 !important; padding: 0 !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 4px !important;
  width: fit-content !important; overflow: hidden !important;
}
#dpvDrawer .dpv-qty-btn {
  width: 26px !important; height: 23px !important;
  border: none !important; background: none !important;
  cursor: pointer !important; font-size: 15px !important;
  color: #111111 !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important;
  transition: background 100ms !important;
  line-height: 1 !important;
  padding: 0 !important; margin: 0 !important;
  flex-shrink: 0 !important;
}
#dpvDrawer .dpv-qty-btn:hover { background: #f6f6f6 !important; }
#dpvDrawer .dpv-qty-val {
  width: 26px !important; text-align: center !important;
  font-size: 12px !important; font-weight: 600 !important;
  border-left: 1px solid #e8e8e8 !important;
  border-right: 1px solid #e8e8e8 !important;
  line-height: 23px !important;
  display: block !important; flex-shrink: 0 !important;
  padding: 0 !important; margin: 0 !important;
}
#dpvDrawer .dpv-item-right {
  text-align: right !important; flex-shrink: 0 !important;
  display: flex !important; flex-direction: column !important;
  align-items: flex-end !important;
  margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-price {
  font-size: 13px !important; font-weight: 700 !important;
  display: block !important; color: #111111 !important;
  margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-price-orig {
  font-size: 11px !important; color: #909090 !important;
  text-decoration: line-through !important;
  display: block !important; margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-remove {
  display: block !important; margin: 6px 0 0 0 !important; padding: 0 !important;
  font-size: 10.5px !important; color: #909090 !important;
  background: none !important; border: none !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color 120ms !important;
  text-align: right !important;
  line-height: 1.3 !important;
}
#dpvDrawer .dpv-remove:hover { color: #c0021a !important; }
#dpvDrawer .dpv-empty {
  text-align: center !important; padding: 36px 0 !important;
  color: #909090 !important; font-size: 12.5px !important;
  display: block !important; margin: 0 !important;
}
#dpvDrawer .dpv-item.loading { opacity: .5 !important; pointer-events: none !important; }

/* ── Cadeau sectie ── */
#dpvDrawer .dpv-gift-section {
  display: none !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid #e8e8e8 !important;
  width: 100% !important;
  background: #ffffff !important;
  margin: 0 !important;
  animation: dpvFadeIn 260ms var(--dpv-cd-ease) !important;
}
#dpvDrawer .dpv-gift-section.visible { display: block !important; }

@keyframes dpvFadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

#dpvDrawer .dpv-gift-hd {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important; background: none !important;
  border: none !important; cursor: pointer !important;
  padding: 0 !important; margin: 0 !important;
  text-align: left !important;
}
#dpvDrawer .dpv-gift-hd-left {
  display: flex !important; align-items: flex-start !important;
  gap: 8px !important; flex: 1 !important;
  margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-gift-icon {
  color: #1a7a42 !important; flex-shrink: 0 !important;
  margin: 2px 0 0 0 !important; padding: 0 !important;
  display: block !important;
  width: 15px !important; height: 15px !important;
}
#dpvDrawer .dpv-gift-title {
  font-size: 12.5px !important; font-weight: 600 !important;
  color: #111111 !important; display: block !important;
  margin: 0 !important; padding: 0 !important; line-height: 1.3 !important;
}
#dpvDrawer .dpv-gift-sub {
  font-size: 11px !important; color: #909090 !important;
  display: block !important; margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-chevron {
  width: 14px !important; height: 14px !important;
  color: #909090 !important; flex-shrink: 0 !important;
  transition: transform 200ms var(--dpv-cd-ease) !important;
  display: block !important; margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-gift-acc.open .dpv-chevron { transform: rotate(180deg) !important; }
#dpvDrawer .dpv-gift-grid {
  display: none !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 7px !important; margin: 10px 0 0 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-gift-acc.open .dpv-gift-grid { display: grid !important; }
#dpvDrawer .dpv-gift-opt {
  position: relative !important;
  border: 1.5px solid #e8e8e8 !important;
  border-radius: 4px !important;
  padding: 7px 5px 6px !important;
  cursor: pointer !important; text-align: center !important;
  background: none !important;
  transition: border-color 140ms !important;
  display: block !important; width: 100% !important;
  margin: 0 !important;
}
#dpvDrawer .dpv-gift-opt:hover { border-color: #bbb !important; }
#dpvDrawer .dpv-gift-opt.sel   { border-color: #2f4156 !important; }
#dpvDrawer .dpv-gift-opt.sel::after {
  content: '✓' !important; position: absolute !important;
  top: 4px !important; right: 5px !important;
  font-size: 10px !important; font-weight: 700 !important;
  color: #2f4156 !important;
  margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-gift-opt img {
  width: 100% !important; aspect-ratio: 1 !important;
  object-fit: cover !important; object-position: center !important;
  border-radius: 3px !important;
  margin: 0 0 5px 0 !important; padding: 0 !important;
  display: block !important;
  background: #f6f6f6 !important;
}
#dpvDrawer .dpv-gift-name {
  font-size: 10px !important; line-height: 1.3 !important;
  color: #111111 !important; display: block !important;
  margin: 0 !important; padding: 0 !important;
}

/* ── Shipping cards ── */
#dpvDrawer .dpv-ship-list {
  display: flex !important; flex-direction: column !important;
  gap: 7px !important; width: 100% !important;
  margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-ship-card {
  border: 1.5px solid #e8e8e8 !important;
  border-radius: 4px !important;
  overflow: hidden !important; cursor: pointer !important;
  transition: border-color 140ms !important;
  width: 100% !important; background: #ffffff !important;
  display: block !important; margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-ship-card:hover { border-color: #bbb !important; }
#dpvDrawer .dpv-ship-card.active { border-color: #2f4156 !important; }
#dpvDrawer .dpv-ship-card.dpv-hidden { display: none !important; }

#dpvDrawer .dpv-ship-card[data-key="afhalen"]              { border-color: #c8e6d4 !important; }
#dpvDrawer .dpv-ship-card[data-key="afhalen"]:hover        { border-color: #1a7a42 !important; }
#dpvDrawer .dpv-ship-card[data-key="afhalen"].active       { border-color: #1a7a42 !important; }
#dpvDrawer .dpv-ship-card[data-key="afhalen"].active .dpv-ship-radio {
  border-color: #1a7a42 !important; background: #1a7a42 !important;
}
#dpvDrawer .dpv-ship-card[data-key="afhalen"].active .dpv-ship-title { color: #1a7a42 !important; }
#dpvDrawer .dpv-ship-card[data-key="afhalen"] .dpv-ship-radio { border-color: #a8d5b8 !important; }

#dpvDrawer .dpv-ship-top {
  display: flex !important; align-items: center !important;
  gap: 10px !important; padding: 11px 13px !important;
  width: 100% !important; margin: 0 !important;
}
#dpvDrawer .dpv-ship-radio {
  width: 16px !important; height: 16px !important; min-width: 16px !important;
  border: 2px solid #e8e8e8 !important;
  border-radius: 50% !important; flex-shrink: 0 !important;
  position: relative !important;
  transition: border-color 140ms, background 140ms !important;
  background: #ffffff !important;
  margin: 0 !important; padding: 0 !important;
  display: block !important;
}
#dpvDrawer .dpv-ship-card.active .dpv-ship-radio {
  border-color: #2f4156 !important; background: #2f4156 !important;
}
#dpvDrawer .dpv-ship-card.active .dpv-ship-radio::after {
  content: '' !important; display: block !important;
  width: 5px !important; height: 5px !important;
  border-radius: 50% !important; background: #fff !important;
  position: absolute !important; top: 50% !important;
  left: 50% !important; transform: translate(-50%,-50%) !important;
  margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-ship-body { flex: 1 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; }
#dpvDrawer .dpv-ship-title {
  font-size: 13px !important; font-weight: 600 !important;
  color: #111111 !important; display: block !important;
  margin: 0 !important; padding: 0 !important; line-height: 1.3 !important;
}
#dpvDrawer .dpv-ship-card.active .dpv-ship-title { color: #2f4156 !important; }
#dpvDrawer .dpv-ship-desc {
  display: none !important; font-size: 11px !important;
  color: #909090 !important; margin: 2px 0 0 0 !important;
  padding: 0 !important; line-height: 1.4 !important;
}
#dpvDrawer .dpv-ship-card.active .dpv-ship-desc { display: block !important; }
#dpvDrawer .dpv-ship-price {
  font-size: 13px !important; font-weight: 700 !important;
  color: #2f4156 !important; flex-shrink: 0 !important;
  margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-ship-price.gratis { color: #1a7a42 !important; }

/* Postcode */
#dpvDrawer .dpv-ship-calc {
  border-top: 1px solid #e8e8e8 !important;
  background: #f6f6f6 !important;
  padding: 10px 13px 12px !important;
  width: 100% !important; margin: 0 !important;
}
#dpvDrawer .dpv-calc-label {
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .07em !important; text-transform: uppercase !important;
  color: #909090 !important; display: block !important;
  margin: 0 0 7px 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-calc-row {
  display: flex !important; gap: 6px !important;
  width: 100% !important; margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-calc-input {
  flex: 1 !important; height: 32px !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 4px !important;
  padding: 0 9px !important; font-size: 13px !important;
  color: #111111 !important; outline: none !important;
  background: #ffffff !important;
  transition: border-color 140ms !important;
  min-width: 0 !important; margin: 0 !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
}
#dpvDrawer .dpv-calc-input:focus { border-color: #2f4156 !important; }
#dpvDrawer .dpv-calc-input::placeholder { color: #c8c8c8 !important; }
#dpvDrawer .dpv-calc-btn {
  height: 32px !important; padding: 0 12px !important;
  background: #2f4156 !important; color: #fff !important;
  border: none !important; border-radius: 4px !important;
  font-size: 12px !important; font-weight: 700 !important;
  cursor: pointer !important; white-space: nowrap !important;
  flex-shrink: 0 !important; margin: 0 !important;
  transition: opacity 140ms !important;
}
#dpvDrawer .dpv-calc-btn:hover { opacity: .85 !important; }
#dpvDrawer .dpv-calc-msg {
  margin: 7px 0 0 0 !important; padding: 6px 9px !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  line-height: 1.5 !important; border-radius: 4px !important;
  display: none !important;
}
#dpvDrawer .dpv-calc-msg.show { display: block !important; }
#dpvDrawer .dpv-calc-msg.ok   { background: rgba(26,122,66,.07) !important; border: 1px solid rgba(26,122,66,.2) !important; color: #1a7a42 !important; }
#dpvDrawer .dpv-calc-msg.info { background: rgba(47,65,86,.06) !important; border: 1px solid rgba(47,65,86,.15) !important; color: #2f4156 !important; }
#dpvDrawer .dpv-calc-msg.err  { background: rgba(192,2,26,.05) !important; border: 1px solid rgba(192,2,26,.15) !important; color: #c0021a !important; }

/* ── Upsells ── */
#dpvDrawer .dpv-section--upsells {
  padding: 12px 0 12px 18px !important;
}
#dpvDrawer .dpv-upsell-row {
  display: flex !important; gap: 8px !important;
  overflow-x: auto !important;
  padding: 0 18px 4px 0 !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  width: 100% !important; margin: 0 !important;
}
#dpvDrawer .dpv-upsell-row::-webkit-scrollbar { display: none !important; }
#dpvDrawer .dpv-upsell-card {
  flex-shrink: 0 !important; width: 110px !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 4px !important; overflow: hidden !important;
  background: #ffffff !important;
  display: flex !important; flex-direction: column !important;
  margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-upsell-thumb {
  width: 100% !important; aspect-ratio: 1 !important;
  object-fit: cover !important; object-position: center !important;
  display: block !important; background: #f6f6f6 !important;
  flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-upsell-body {
  padding: 7px 7px 8px !important;
  display: flex !important; flex-direction: column !important;
  gap: 3px !important; margin: 0 !important;
}
#dpvDrawer .dpv-upsell-name {
  font-size: 11px !important; font-weight: 500 !important;
  line-height: 1.3 !important; color: #111111 !important;
  white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important; display: block !important;
  margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-upsell-price {
  font-size: 11px !important; color: #909090 !important;
  margin: 0 !important; padding: 0 !important; display: block !important;
}
#dpvDrawer .dpv-upsell-add {
  display: block !important; width: 100% !important;
  height: 26px !important; background: #2f4156 !important;
  color: #fff !important; border: none !important;
  border-radius: 4px !important;
  font-size: 11px !important; font-weight: 600 !important;
  cursor: pointer !important;
  margin: 4px 0 0 0 !important; padding: 0 !important;
  transition: opacity 140ms !important;
}
#dpvDrawer .dpv-upsell-add:hover { opacity: .82 !important; }
#dpvDrawer .dpv-upsell-add.done { background: #1a7a42 !important; cursor: default !important; }

/* ── Footer ── */
#dpvDrawer .dpv-footer {
  border-top: 1px solid #e8e8e8 !important;
  padding: 13px 18px 18px !important;
  flex-shrink: 0 !important; background: #ffffff !important;
  width: 100% !important; margin: 0 !important;
}
#dpvDrawer .dpv-totals { margin: 0 0 11px 0 !important; padding: 0 !important; width: 100% !important; }
#dpvDrawer .dpv-tot-row {
  display: flex !important; justify-content: space-between !important;
  align-items: baseline !important;
  margin: 0 0 4px 0 !important; padding: 0 !important;
  width: 100% !important;
}
#dpvDrawer .dpv-tot-row:last-child { margin-bottom: 0 !important; }
#dpvDrawer .dpv-tot-label { font-size: 12px !important; color: #909090 !important; margin: 0 !important; padding: 0 !important; }
#dpvDrawer .dpv-tot-val   { font-size: 12px !important; font-weight: 500 !important; margin: 0 !important; padding: 0 !important; }
#dpvDrawer .dpv-tot-label.grand { font-size: 13.5px !important; font-weight: 700 !important; color: #111111 !important; }
#dpvDrawer .dpv-tot-val.grand   { font-size: 14px !important; font-weight: 700 !important; }
#dpvDrawer .dpv-tot-val.gratis  { color: #1a7a42 !important; }
#dpvDrawer .dpv-divider {
  border: none !important; border-top: 1px solid #e8e8e8 !important;
  margin: 7px 0 !important; padding: 0 !important;
  display: block !important; width: 100% !important; height: 0 !important;
}

#dpvDrawer .dpv-cta {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important; height: 50px !important;
  background: #2f4156 !important; color: #ffffff !important;
  border: none !important; border-radius: 4px !important;
  padding: 0 18px !important; margin: 0 !important;
  font-size: 14px !important; font-weight: 600 !important;
  cursor: pointer !important;
  transition: opacity 150ms !important; letter-spacing: .01em !important;
  text-decoration: none !important;
}
#dpvDrawer .dpv-cta:hover { opacity: .87 !important; }
#dpvDrawer .dpv-cta span  { color: #ffffff !important; margin: 0 !important; padding: 0 !important; }
#dpvDrawer .dpv-cta-price { font-size: 14px !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 !important; padding: 0 !important; }

#dpvDrawer .dpv-trust {
  display: flex !important; align-items: center !important;
  justify-content: center !important;
  gap: 14px !important; margin: 9px 0 0 0 !important; padding: 0 !important;
  flex-wrap: wrap !important; width: 100% !important;
}
#dpvDrawer .dpv-trust-item {
  display: flex !important; align-items: center !important;
  gap: 4px !important; font-size: 10.5px !important;
  color: #909090 !important; margin: 0 !important; padding: 0 !important;
}
#dpvDrawer .dpv-trust-item svg {
  width: 11px !important; height: 11px !important;
  display: block !important; flex-shrink: 0 !important;
  margin: 0 !important; padding: 0 !important;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  #dpvDrawer { width: 100vw !important; border-left: none !important; }
}

/* ── Drawer: altijd vanaf top:0, ook met WP admin bar ── */
.dpv-drawer {
  top: 0 !important;
}
/* WP voegt margin-top toe aan html/body voor de admin bar — neutraliseren */
html.wp-toolbar .dpv-drawer,
.admin-bar .dpv-drawer {
  top: 0 !important;
  margin-top: 0 !important;
}

/* ── Progress bar — prominenter ── */
.dpv-progress {
  padding: 12px 18px 14px !important;
  background: #f0f3f6 !important;
  border-bottom: 2px solid var(--dpv-border) !important;
}
.dpv-prog-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--dpv-text) !important;
  margin-bottom: 10px !important;
}
.dpv-prog-label strong {
  color: var(--dpv-accent) !important;
  font-weight: 700 !important;
}
.dpv-prog-wrap { position: relative !important; }
.dpv-prog-track {
  height: 8px !important;
  background: #dde3ea !important;
  border-radius: 8px !important;
  overflow: visible !important;
  position: relative !important;
}
.dpv-prog-fill {
  height: 100% !important;
  background: var(--dpv-accent) !important;
  border-radius: 8px !important;
  transition: width 400ms var(--dpv-ease), background 300ms !important;
  position: relative !important;
}
.dpv-prog-fill.phase2 { background: var(--dpv-green) !important; }

/* Verticale scheidingslijn op 83.33% (= €125 van €150) */
.dpv-prog-mid {
  position: absolute !important;
  left: 83.33% !important;
  top: -3px !important;
  bottom: -3px !important;
  width: 2px !important;
  background: #fff !important;
  border-radius: 2px !important;
  z-index: 2 !important;
}

.dpv-prog-markers {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 6px !important;
  position: relative !important;
  height: auto !important;
}
.dpv-prog-marker {
  position: static !important;
  transform: none !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--dpv-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}
.dpv-prog-marker.hit { color: var(--dpv-green) !important; }
.dpv-prog-marker--gift { /* nothing extra needed */ }
.dpv-prog-marker--ship { /* nothing extra needed */ }
/* Verberg de dot span die we niet meer nodig hebben */
.dpv-prog-marker .dot { display: none !important; }

/* ── Upsell thumbnail als echte img ── */
.dpv-upsell-thumb {
  width: 100% !important;
  aspect-ratio: 1 !important;
  object-fit: cover !important;
  display: block !important;
  background: var(--dpv-surface) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Upsell add button event ── */
.dpv-upsell-add {
  display: block !important; width: 100% !important;
  height: 24px !important; background: var(--dpv-accent) !important;
  color: #fff !important; border: none !important;
  border-radius: var(--dpv-r) !important;
  font-size: 11px !important; font-weight: 600 !important;
  cursor: pointer !important; transition: opacity 140ms !important;
  padding: 0 !important; margin: 0 !important;
}
.dpv-upsell-add:hover { opacity: .82 !important; }
.dpv-upsell-add.done  { background: var(--dpv-green) !important; cursor: default !important; }

/* ── Kortingscode ── */
.dpv-coupon-wrap {
  border-top: 1px solid var(--dpv-border) !important;
  flex-shrink: 0 !important;
  background: var(--dpv-bg) !important;
}

/* Zelfde breedte/padding als subtotaal en bezorging rijen */
.dpv-coupon-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  padding: 10px 18px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--dpv-muted) !important;
  font-family: inherit !important;
  text-align: left !important;
  transition: color 140ms !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
}
.dpv-coupon-toggle:hover { color: var(--dpv-text) !important; }
.dpv-coupon-toggle svg:first-child { flex-shrink: 0 !important; color: var(--dpv-muted) !important; }
.dpv-coupon-chevron {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  transition: transform 200ms var(--dpv-ease) !important;
}
.dpv-coupon-wrap.open .dpv-coupon-chevron { transform: rotate(180deg) !important; }

/* Body — zelfde zijpadding als de rest */
.dpv-coupon-body {
  display: none !important;
  padding: 0 18px 12px !important;
}
.dpv-coupon-wrap.open .dpv-coupon-body { display: block !important; }

/* Input + knop naast elkaar, duidelijke "Toepassen" knop */
.dpv-coupon-row {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}
.dpv-coupon-input {
  flex: 1 !important;
  height: 36px !important;
  border: 1.5px solid var(--dpv-border) !important;
  border-radius: var(--dpv-r) !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  color: var(--dpv-text) !important;
  outline: none !important;
  background: var(--dpv-bg) !important;
  transition: border-color 140ms !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  min-width: 0 !important;
  -webkit-appearance: none !important;
}
.dpv-coupon-input:focus { border-color: var(--dpv-accent) !important; }
.dpv-coupon-input::placeholder {
  color: #c8c8c8 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-style: italic !important;
}
.dpv-coupon-btn {
  height: 36px !important;
  padding: 0 14px !important;
  background: var(--dpv-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--dpv-r) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: opacity 140ms !important;
}
.dpv-coupon-btn:hover { opacity: .85 !important; }
.dpv-coupon-btn:disabled { opacity: .5 !important; cursor: default !important; }

.dpv-coupon-row {
  display: flex !important;
  gap: 6px !important;
}
.dpv-coupon-input {
  flex: 1 !important;
  height: 34px !important;
  border: 1px solid var(--dpv-border) !important;
  border-radius: var(--dpv-r) !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  color: var(--dpv-text) !important;
  outline: none !important;
  background: var(--dpv-bg) !important;
  transition: border-color 140ms !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.dpv-coupon-input:focus { border-color: var(--dpv-accent) !important; }
.dpv-coupon-input::placeholder { color: #c8c8c8 !important; text-transform: none !important; letter-spacing: 0 !important; }
.dpv-coupon-btn {
  height: 34px !important;
  padding: 0 13px !important;
  background: var(--dpv-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--dpv-r) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  transition: opacity 140ms !important;
  flex-shrink: 0 !important;
}
.dpv-coupon-btn:hover { opacity: .85 !important; }
.dpv-coupon-btn:disabled { opacity: .5 !important; cursor: default !important; }

.dpv-coupon-msg {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  margin-top: 7px !important;
  padding: 5px 8px !important;
  border-radius: var(--dpv-r) !important;
  display: none !important;
  line-height: 1.4 !important;
}
.dpv-coupon-msg.show { display: block !important; }
.dpv-coupon-msg.ok  { background: rgba(26,122,66,.07) !important; border: 1px solid rgba(26,122,66,.2) !important; color: var(--dpv-green) !important; }
.dpv-coupon-msg.err { background: rgba(192,2,26,.05) !important; border: 1px solid rgba(192,2,26,.15) !important; color: var(--dpv-danger) !important; }

.dpv-coupon-applied {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 8px !important;
}
.dpv-coupon-tag {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(47,65,86,.07) !important;
  border: 1px solid rgba(47,65,86,.2) !important;
  border-radius: 20px !important;
  padding: 3px 8px 3px 9px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--dpv-accent) !important;
}
.dpv-coupon-remove {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: var(--dpv-accent) !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: .6 !important;
  font-family: inherit !important;
  transition: opacity 120ms !important;
}
.dpv-coupon-remove:hover { opacity: 1 !important; }

/* ── Coupon breedte fix ── */
.dpv-coupon-wrap {
  margin: 0 -18px !important;
  padding: 0 !important;
  border-top: 1px solid var(--dpv-border) !important;
  border-bottom: 1px solid var(--dpv-border) !important;
  margin-bottom: 11px !important;
}
.dpv-coupon-toggle {
  padding: 10px 18px !important;
  width: 100% !important;
}
.dpv-coupon-body {
  padding: 0 18px 12px !important;
}

/* DPV hard reset voor coupon UI binnen drawer: voorkomt theme/button styling lekkage */
#dpvDrawer .dpv-coupon-wrap {
  margin: 0 -18px 11px !important;
  padding: 0 !important;
  border-top: 1px solid var(--dpv-border) !important;
  border-bottom: 1px solid var(--dpv-border) !important;
  background: var(--dpv-bg) !important;
  box-sizing: border-box !important;
}
#dpvDrawer .dpv-coupon-toggle,
#dpvDrawer .dpv-coupon-toggle:hover,
#dpvDrawer .dpv-coupon-toggle:focus,
#dpvDrawer .dpv-coupon-toggle:active {
  all: unset !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 38px !important;
  padding: 10px 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--dpv-muted) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}
#dpvDrawer .dpv-coupon-toggle:hover { color: var(--dpv-text) !important; }
#dpvDrawer .dpv-coupon-toggle svg { flex: 0 0 auto !important; }
#dpvDrawer .dpv-coupon-chevron { margin-left: auto !important; transition: transform 200ms var(--dpv-ease) !important; }
#dpvDrawer .dpv-coupon-wrap.open .dpv-coupon-chevron { transform: rotate(180deg) !important; }
#dpvDrawer .dpv-coupon-body {
  display: none !important;
  padding: 0 18px 12px !important;
  box-sizing: border-box !important;
}
#dpvDrawer .dpv-coupon-wrap.open .dpv-coupon-body { display: block !important; }
#dpvDrawer .dpv-coupon-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 6px !important;
  align-items: center !important;
  width: 100% !important;
}
#dpvDrawer .dpv-coupon-input,
#dpvDrawer .dpv-coupon-input:focus {
  all: unset !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 10px !important;
  background: var(--dpv-bg) !important;
  border: 1px solid var(--dpv-border) !important;
  border-radius: var(--dpv-r) !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--dpv-text) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 34px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
#dpvDrawer .dpv-coupon-input:focus { border-color: var(--dpv-accent) !important; }
#dpvDrawer .dpv-coupon-input::placeholder { color: #c8c8c8 !important; font-style: italic !important; text-transform: none !important; letter-spacing: 0 !important; }
#dpvDrawer .dpv-coupon-btn,
#dpvDrawer .dpv-coupon-btn:hover,
#dpvDrawer .dpv-coupon-btn:focus,
#dpvDrawer .dpv-coupon-btn:active {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 86px !important;
  height: 34px !important;
  padding: 0 13px !important;
  background: var(--dpv-accent) !important;
  border: 0 !important;
  border-radius: var(--dpv-r) !important;
  box-shadow: none !important;
  outline: none !important;
  color: #fff !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
#dpvDrawer .dpv-coupon-btn:hover { opacity: .85 !important; }
#dpvDrawer .dpv-coupon-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
  max-width: 100% !important;
  background: rgba(47,65,86,.07) !important;
  border: 1px solid rgba(47,65,86,.2) !important;
  border-radius: 20px !important;
  padding: 3px 8px 3px 9px !important;
  color: var(--dpv-accent) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
#dpvDrawer .dpv-coupon-remove,
#dpvDrawer .dpv-coupon-remove:hover,
#dpvDrawer .dpv-coupon-remove:focus,
#dpvDrawer .dpv-coupon-remove:active {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--dpv-accent) !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1 !important;
  opacity: .65 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#dpvDrawer .dpv-coupon-remove:hover { opacity: 1 !important; }