/* ===================== */
/*  Image wrapper        */
/* ===================== */
.product-visual {
  max-width: 520px;
  margin-inline: auto;
  position: relative;
}

/* ===================== */
/*  Discount Bubble (fully fluid) */
/* ===================== */
.discount-bubble {
  /* Theme */
  --bubble-fill: #14b85a;
  --text-main: #ffffff;
  --text-muted: #0f3e1f;

  /* Core sizing that drives everything */
  --bubble-size: clamp(96px, 30vw, 180px); /* scales 320px → desktop */
  --offset: clamp(6px, calc(var(--bubble-size) * 0.08), 18px);
  --pad: clamp(6px, calc(var(--bubble-size) * 0.06), 12px);

  /* Set a base font that follows bubble size */
  --base-fs: clamp(11px, calc(var(--bubble-size) * 0.12), 16px);

  position: absolute;
  right: var(--offset);
  top: var(--offset);

  width: var(--bubble-size);
  height: var(--bubble-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--bubble-fill);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  color: var(--text-main);
  font-weight: 800;
  line-height: 1.05;
  font-size: var(--base-fs); /* everything inside scales from this */

  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
  z-index: 2;
  padding: var(--pad);
}

.bubbleblue {
  /* Theme */
  --bubble-fill: #04376a;
}

/* ===================== */
/*  Typography (uses em) */
/* ===================== */
.discount-bubble .was,
.discount-bubble h3.was {
  font-size: 1em; /* follows --base-fs */
  letter-spacing: clamp(0.15px, 0.025em, 0.4px);
  color: var(--text-muted);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  white-space: nowrap;
  margin: 0;
  line-height: 1.05;
}

.discount-bubble .now {
  font-size: 1em; /* follows --base-fs */
  margin-top: clamp(1px, 0.35em, 6px);
  color: var(--text-main);
  font-weight: 800;
}

.discount-bubble .now2 {
  font-size: 1.5em; /* follows --base-fs */
}

.discount-bubble .price {
  /* ~30px at smallest size, ~46px at largest */
  font-size: clamp(2.4em, 2.8em, 2.9em);
  margin-top: clamp(1px, 0.45em, 8px);
  color: var(--text-main);
  font-weight: 900;
}

/* ===================== */
/*  Old price strike     */
/* ===================== */
.discount-bubble .old-price {
  position: relative;
  color: var(--text-muted);
  text-decoration: none; /* we draw the line ourselves */
}

.discount-bubble .old-price::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  top: 50%;
  /* thickness follows bubble size but stays in a crisp range */
  height: clamp(2px, calc(var(--bubble-size) * 0.018), 3px);
  background: #e52525; /* red */
  transform: translateY(-50%) rotate(-12deg);
  transform-origin: center;
  border-radius: 2px;
}

/* ===================== */
/*  Optional: container-aware refinement
    (uses container queries if supported; safe to keep) */
/* ===================== */
@supports (container-type: inline-size) {
  .product-visual {
    container-type: inline-size;
  }
  .discount-bubble {
    /* Prefer container width over viewport when available */
    --bubble-size: clamp(96px, 45cqw, 180px);
  }
}

/* Remove all top margins inside the discount bubble */
.discount-bubble .now,
.discount-bubble .price {
  margin-top: 0 !important;
}

/* Equal-size PER/JAR, follows --base-fs */
.discount-bubble .per-jar{
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size: 1.1em;
  line-height: 1;
  gap: .15em;
  text-transform: uppercase;
}
.discount-bubble .per-jar > span{
  font-size: 1em;
  font-weight: 800;
  letter-spacing: .02em;
}

@media (width: 320px) {
  .discount-bubble {
    --bubble-size: 100px;
  }
}

@media (width: 375px) {
  .discount-bubble {
    --bubble-size: 112px;
  }
}

@media (width: 425px) {
  .discount-bubble {
    --bubble-size: 128px;
  }
}

@media (min-width: 992px) {
  .discount-bubble {
    --bubble-size: 140px;
  }
}