/* product-discount-badge.css — «-X%» over the product photo.
 *
 * Global component (loaded in base.html next to product-overlay.css).
 * Additive only: nothing renders unless a template includes
 * includes/product_discount_badge.html, so frozen pages are untouched.
 */

.product-discount-badge {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 4px 9px;
  border: 1px solid #a8181f;
  border-radius: 999px;
  background: #c62828;
  color: #fff;
  font-size: var(--text-caption);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 14px rgba(112, 12, 16, 0.22);
}

/* PDP: badge sits in the price row next to the struck-through price. */
.product-discount-badge--pdp {
  position: static;
  top: auto;
  left: auto;
  box-shadow: none;
}

.product-price-was {
  color: #8fa3b5;
  font-size: var(--text-body);
  text-decoration: line-through;
}

@media (max-width: 767px) {
  .product-discount-badge {
    top: 8px;
    left: 8px;
    min-width: 42px;
    padding: 3px 8px;
  }
}