/* =========================================================
   BADGES – BASE
========================================================= */

.vcom-badge,
.sp-badge {
  display: inline-flex;
  align-items: center;

  padding: 4px 8px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* =========================================================
   BADGE TYPES
========================================================= */

/* NEW */
.vcom-badge--new,
.sp-badge--new {
  background: var(--vcom-accent);
  color: #fff;
}

/* SALE */
.vcom-badge--sale {
  background: var(--vcom-sale);
  color: var(--vcom-sale-text);
  font-weight: 700;
}

/* FREE SHIPPING – soft filled, tydlig men sekundär */
.vcom-badge--freeship {
  background: color-mix(
    in srgb,
    var(--vcom-success),
    white 85%
  );

  color: var(--vcom-success);

  border: 1px solid color-mix(
    in srgb,
    var(--vcom-success),
    transparent 40%
  );

  font-weight: 600;
}

/* OUT OF STOCK */
.vcom-badge--out,
.sp-badge--out {
  background: var(--vcom-danger);
  color: #fff;
}

/* =========================================================
   SIZE VARIANTS (optional)
========================================================= */

.vcom-badge--lg {
  padding: 6px 12px;
  font-size: 13px;
}

/* =========================
   Corner Ribbons – Layout
========================= */

.vcom-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
  overflow: hidden;
  pointer-events: none;
  z-index: 6;
}

.vcom-ribbon__text {
  position: absolute;
  top: 18px;
  left: -34px;
  width: 140px;

  text-align: center;
  font-size: .85rem;
  font-weight: 700;

  transform: rotate(-45deg);
  padding: .35rem 0;
}

/* Default (fallback) */
.vcom-ribbon__text {
  background: #e11d48; /* hot pink / default */
  color: #fff;
}

/* 3 för 349 */
.vcom-ribbon--349 {
  background: #16a34a; /* grön */
}

/* 3 för 599 */
.vcom-ribbon--599 {
  background: #2563eb; /* blå */
}