/* =============================================================
   Nordic-LED · discount badge + saving pill
   Pairs with handoff/discount-badge.php
   ============================================================= */

/* −34% badge on the product image.
   Anchors to .woocommerce-product-gallery (already position:relative).
   If your theme wraps the gallery differently, ensure the wrapper is
   position: relative. */
.nl-sale-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: #DC2626;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 5px 11px;
  border-radius: 8px;
  line-height: 1.2;
}

/* On the shop/category loop the thumbnails are smaller — scale down */
.products .nl-sale-badge,
ul.products .nl-sale-badge {
  top: 10px;
  left: 10px;
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 6px;
}

/* Bundle badge — injected inside .woocommerce-product-gallery via the
   woocommerce_product_thumbnails hook. The gallery is position:relative in
   WooCommerce core, so the badge anchors to the image. We add the relative
   guard defensively in case a theme unset it. */
.single-product div.product .woocommerce-product-gallery { position: relative; }
.nl-sale-badge--bundle {
  top: 16px;
  left: 16px;
}

/* "Spar 88 kr · 34%" pill next to the price */
.nl-saving-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FEEAEA;
  color: #DC2626;
  font-size: 12.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 8px;
}