/* Deal-Display Pro - "Angebot der Woche" card. Typography is inherited from
   the theme (no font-family / px font-size); spacing is em-based. */

.opc-ddp {
  --ddp-accent: #0090ff;
  --ddp-price: #d9232d;
  --ddp-bg: #ffffff;
  --ddp-radius: 8px;
  --ddp-img-w: 40%;
  --ddp-border: rgba(0, 0, 0, 0.1);
  --ddp-soft: rgba(0, 0, 0, 0.04);
  --ddp-media-bg: var(--ddp-soft);
  --ddp-img-fit: 22em;
  --ddp-body-max: 32em;
  --ddp-eyebrow-size: 0.8em;
  --ddp-title-size: 1.35em;
  --ddp-price-size: 1.9em;
}
.opc-ddp--eyebrow-sm { --ddp-eyebrow-size: 0.8em; }
.opc-ddp--eyebrow-md { --ddp-eyebrow-size: 1em; }
.opc-ddp--eyebrow-lg { --ddp-eyebrow-size: 1.25em; }
.opc-ddp--eyebrow-xl { --ddp-eyebrow-size: 1.6em; }
.opc-ddp--title-sm { --ddp-title-size: 1.1em; }
.opc-ddp--title-md { --ddp-title-size: 1.35em; }
.opc-ddp--title-lg { --ddp-title-size: 1.7em; }
.opc-ddp--title-xl { --ddp-title-size: 2.1em; }
.opc-ddp--price-sm { --ddp-price-size: 1.25em; }
.opc-ddp--price-md { --ddp-price-size: 1.55em; }
.opc-ddp--price-lg { --ddp-price-size: 1.9em; }
.opc-ddp--price-xl { --ddp-price-size: 2.4em; }

.opc-ddp__card {
  display: flex;
  align-items: stretch;
  background: var(--ddp-bg);
  border: 1px solid var(--ddp-border);
  border-radius: var(--ddp-radius);
  overflow: hidden;
}
.opc-ddp--img-right .opc-ddp__card {
  flex-direction: row-reverse;
}
/* Schedule mode renders every slot; only the active one is visible.
   The root itself is hidden before the schedule starts (the layout modes below
   set display, which would otherwise beat the browser's [hidden] rule). */
.opc-ddp[hidden],
.opc-ddp .opc-ddp__card[hidden],
.opc-ddp .opc-ddp__expired[hidden] {
  display: none !important;
}

/* Editor-only schedule table (rendered in the OPC preview). */
.opc-ddp__plan {
  flex-basis: 100%;
  width: 100%;
  margin-top: 0.75em;
  padding: 0.6em 0.8em;
  font-size: 0.8em;
  border: 1px dashed rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  opacity: 0.9;
}
.opc-ddp__plan-head {
  font-weight: 600;
  margin-bottom: 0.4em;
}
.opc-ddp__plan-table {
  width: 100%;
  border-collapse: collapse;
}
.opc-ddp__plan-table th,
.opc-ddp__plan-table td {
  text-align: left;
  padding: 0.25em 0.5em;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  vertical-align: top;
}
.opc-ddp__plan-table tr.is-active td {
  font-weight: 600;
}
.opc-ddp__plan-table tr.sp-ok td:last-child {
  color: #1c7c54;
}
.opc-ddp__plan-table tr.sp-partial td:last-child {
  color: #b7791f;
}
.opc-ddp__plan-table tr.sp-none td:last-child {
  color: #c0392b;
}
.opc-ddp__plan-table tr.sp-unknown td:last-child {
  color: #6b7280;
}

/* Card width "fit": the card is only as wide as image + content, aligned
   inside the OPC row. "full" (default before v0.1.2) stretches to the row. */
.opc-ddp--fit {
  display: flex;
  flex-wrap: wrap;
}
.opc-ddp--fit.opc-ddp--align-left {
  justify-content: flex-start;
}
.opc-ddp--fit.opc-ddp--align-center {
  justify-content: center;
}
.opc-ddp--fit.opc-ddp--align-right {
  justify-content: flex-end;
}
.opc-ddp--fit .opc-ddp__card {
  display: inline-flex;
  width: auto;
  max-width: 100%;
}
.opc-ddp--fit .opc-ddp__media {
  flex: 0 0 auto;
  width: var(--ddp-img-fit);
  max-width: none;
}
.opc-ddp--fit .opc-ddp__body {
  flex: 0 1 auto;
  max-width: var(--ddp-body-max);
}
.opc-ddp--fit .opc-ddp__expired {
  width: auto;
  min-width: 18em;
  max-width: 100%;
}

.opc-ddp__media {
  position: relative;
  flex: 0 0 var(--ddp-img-w);
  max-width: var(--ddp-img-w);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25em;
  background: var(--ddp-media-bg);
}
.opc-ddp__media-link {
  display: block;
  width: 100%;
}
.opc-ddp__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 26em;
  object-fit: contain;
}
.opc-ddp__placeholder {
  font-size: 3em;
  color: rgba(0, 0, 0, 0.2);
}
.opc-ddp__badge {
  position: absolute;
  top: 0.9em;
  left: 0.9em;
  background: var(--ddp-price);
  color: #fff;
  font-weight: 700;
  font-size: 0.85em;
  line-height: 1;
  padding: 0.45em 0.7em;
  border-radius: 999px;
  white-space: nowrap;
}

.opc-ddp__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  padding: 1.5em 1.75em;
}
.opc-ddp__eyebrow {
  color: var(--ddp-accent);
  font-size: var(--ddp-eyebrow-size);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.opc-ddp__title {
  color: inherit;
  font-size: var(--ddp-title-size);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}
.opc-ddp__title:hover,
.opc-ddp__title:focus {
  color: var(--ddp-accent);
  text-decoration: none;
}
.opc-ddp__artnr {
  font-size: 0.8em;
  opacity: 0.65;
  margin-top: -0.5em;
}

.opc-ddp__prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25em 0.75em;
}
.opc-ddp__price-old {
  font-size: 0.95em;
  opacity: 0.65;
}
.opc-ddp__price-old del {
  text-decoration: line-through;
}
.opc-ddp__price-current {
  color: var(--ddp-price);
  font-size: var(--ddp-price-size);
  font-weight: 700;
  line-height: 1.1;
}
/* Nova's price.tpl (box scope): .price_wrapper > .price.productbox-price sets its
   own px size and colour - make it inherit the card's price size/colour. */
.opc-ddp .opc-ddp__price-current .price_wrapper,
.opc-ddp .opc-ddp__price-current .price_wrapper .price,
.opc-ddp .opc-ddp__price-current .price.productbox-price,
.opc-ddp .opc-ddp__price-current .price,
.opc-ddp .opc-ddp__price-current .price > span:not([class]) {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}
.opc-ddp .opc-ddp__price-current .footnote-reference {
  font-size: 0.5em;
  font-weight: 400;
  vertical-align: super;
}
.opc-ddp__price-current small,
.opc-ddp__price-current .small,
.opc-ddp__price-current .text-muted,
.opc-ddp__price-current .price-note,
.opc-ddp__price-current .price_footer,
.opc-ddp__price-current .vat_info,
.opc-ddp__price-current .base-price {
  font-size: 0.42em;
  font-weight: 400;
  color: inherit;
  opacity: 0.7;
}
/* Bootstrap ships .text-muted with !important - match it or the note stays grey. */
.opc-ddp .opc-ddp__price-current .text-muted {
  color: inherit !important;
}
.opc-ddp__price-current .price-note:empty {
  display: none;
}

.opc-ddp__countdown {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.opc-ddp__countdown-label {
  font-size: 0.8em;
  opacity: 0.7;
}
.opc-ddp__timer {
  display: flex;
  gap: 0.5em;
}
.opc-ddp__cell {
  min-width: 3.4em;
  padding: 0.45em 0.3em;
  text-align: center;
  background: var(--ddp-soft);
  border: 1px solid var(--ddp-border);
  border-top: 3px solid var(--ddp-accent);
  border-radius: calc(var(--ddp-radius) * 0.6);
}
.opc-ddp__cell b {
  display: block;
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.opc-ddp__cell span {
  display: block;
  font-size: 0.7em;
  opacity: 0.65;
  margin-top: 0.15em;
}

.opc-ddp__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-top: auto;
  padding-top: 0.25em;
}
.opc-ddp__cart-form {
  margin: 0;
}
.opc-ddp__cart .fas {
  margin-right: 0.35em;
}
.opc-ddp__link .fas {
  margin-left: 0.35em;
}

.opc-ddp__expired {
  text-align: center;
  padding: 2em 1.5em;
  background: var(--ddp-bg);
  border: 1px solid var(--ddp-border);
  border-radius: var(--ddp-radius);
  opacity: 0.85;
}
.opc-ddp__expired i {
  display: block;
  font-size: 1.8em;
  margin-bottom: 0.5em;
  opacity: 0.5;
}
.opc-ddp__expired p {
  margin: 0;
}

.opc-ddp--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 6em;
  border: 1px dashed rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  opacity: 0.7;
}
.opc-ddp--empty i {
  font-size: 1.5em;
}

@media (max-width: 767.98px) {
  .opc-ddp__card,
  .opc-ddp--img-right .opc-ddp__card {
    flex-direction: column;
  }
  .opc-ddp--fit .opc-ddp__card {
    display: flex;
    width: 100%;
  }
  .opc-ddp--fit .opc-ddp__media {
    width: auto;
  }
  .opc-ddp--fit .opc-ddp__body {
    max-width: none;
  }
  .opc-ddp--fit .opc-ddp__expired {
    width: 100%;
  }
  .opc-ddp__media {
    flex-basis: auto;
    max-width: none;
  }
  .opc-ddp__image {
    max-height: 16em;
  }
  .opc-ddp__body {
    padding: 1.25em;
  }
  .opc-ddp__cell {
    flex: 1 1 0;
    min-width: 0;
  }
}