.kld-dpd-your-price,
.kld-dpd-banner,
.kld-dpd-countdown,
.kld-dpd-volume {
  box-sizing: border-box;
  margin: 1rem 0;
}

.kld-dpd-variation-slot[hidden] {
  display: none !important;
}

.kld-dpd-your-price {
  font-size: 1.05em;
}

.kld-dpd-your-price.is-loading {
  opacity: .65;
}

.kld-dpd-your-price__label,
.kld-dpd-banner__title,
.kld-dpd-countdown__label {
  font-weight: 700;
}

.kld-dpd-banner--classic {
  border-inline-start: 4px solid currentColor;
  padding: .8rem 1rem;
  background: color-mix(in srgb, currentColor 6%, transparent);
}

.kld-dpd-banner__title {
  display: block;
  margin-bottom: .25rem;
}

/*
 * Modern card presentation. Every visual property reads a CSS custom
 * property emitted from the Styling tab, with the production-matched
 * defaults inline so the card renders correctly with no settings saved.
 */
.kld-dpd-banner--card {
  display: flex;
  align-items: flex-start;
  gap: 1.05rem;
  padding: 1.2rem 1.45rem;
  background: var(--kld-dpd-card-surface, linear-gradient(180deg, #ffffff 0%, #fdf3ef 100%));
  color: var(--kld-dpd-card-text, #3f4756);
  border: var(--kld-dpd-card-border, 1px solid #f2e5e1);
  border-radius: var(--kld-dpd-card-radius, 16px);
  box-shadow: var(--kld-dpd-card-shadow, 0 12px 32px rgba(24, 30, 48, .09));
}

.kld-dpd-banner--card .kld-dpd-banner__title {
  color: var(--kld-dpd-card-title, #1e2433);
  font-size: 1.06em;
  margin-bottom: .3rem;
}

.kld-dpd-banner--card .kld-dpd-banner__message {
  line-height: 1.55;
}

.kld-dpd-banner__icon {
  flex: 0 0 auto;
  display: flex;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: var(--kld-dpd-card-icon-bg, #fbe4e0);
}

.kld-dpd-banner__icon::before {
  content: "";
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  margin: auto;
  background: var(--kld-dpd-card-icon, #f2b430);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kld-dpd-countdown {
  font-variant-numeric: tabular-nums;
}

.kld-dpd-volume table {
  width: 100%;
  border-collapse: collapse;
}

.kld-dpd-volume th,
.kld-dpd-volume td {
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  padding: .55rem .7rem;
  text-align: start;
}

.kld-dpd-volume--inline-horizontal tbody {
  display: flex;
  overflow-x: auto;
}

.kld-dpd-volume-modal {
  width: min(48rem, calc(100% - 2rem));
  border: 0;
  border-radius: .35rem;
  padding: 1.5rem;
}

.kld-dpd-volume-modal::backdrop {
  background: rgb(0 0 0 / .55);
}

.kld-dpd-volume-close {
  position: absolute;
  inset-block-start: .35rem;
  inset-inline-end: .55rem;
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  cursor: pointer;
}

.kld-dpd-total-saved th,
.kld-dpd-total-saved td {
  color: #16713a;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .kld-dpd-your-price { transition: none; }
}


.kld-dpd-your-price__unit del,
.kld-dpd-your-price__subtotal del {
  opacity: .6;
}

.kld-dpd-your-price__unit ins,
.kld-dpd-your-price__subtotal ins {
  text-decoration: none;
  font-weight: 700;
}

.kld-dpd-your-price__badge {
  font-size: .85em;
  font-weight: 700;
  color: #b3261e;
  white-space: nowrap;
}