/* ==========================================================================
   NHV-50 — Product sticker
   ==========================================================================
   One image, top-right on every product image: listing cards, related
   products, the product page's main photo and the home page's latest
   products. Markup from extension/module/nhv_sticker.twig; the size comes from
   the admin form as --nhv-sticker-size on each image box.
   ========================================================================== */

.nhv-sticker {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: block;
  width: var(--nhv-sticker-size, 28%);
  line-height: 0;
}
.nhv-sticker img {
  display: block;
  width: 100%;
  height: auto;
}

/* A plain sticker must not swallow the click meant for the product under it. */
span.nhv-sticker { pointer-events: none; }

a.nhv-sticker:focus-visible {
  outline: 2px solid var(--nhv-copper);
  outline-offset: 2px;
  border-radius: 50%;
}

/* The Sale badge shares the corner. It drops to sit 6px under the sticker.
   A percentage margin-top is measured against the box's WIDTH — the same thing
   the sticker's width is a percentage of — so the gap is right whatever height
   the image box turns out to be. */
.nhv-sticker ~ .nhv-product-badge {
  margin-top: calc(var(--nhv-sticker-size, 28%) + 6px);
}

/* --- Listing cards --------------------------------------------------------
   Anchored to the PHOTO, not the image box. The box has padding — 10px all
   round in grid view, 0 15px in list view — and in list view it is also a flex
   row taller than the photo, which it centres. Positioned against the box, the
   sticker sat above the photo's top edge and past its right one there. The
   anchor wraps just the photo link, the sticker and the Sale badge, so it is
   exactly the photo's size in either view, and 28% means 28% of the photo.

   Flush to the photo's corner: in grid view that is where the box padding
   already put the Sale badge, so grid looks exactly as it did. */
.nhv-image-anchor {
  position: relative;
  display: block;
  width: 100%;
}
.nhv-image-anchor > .nhv-sticker,
.nhv-image-anchor > .nhv-product-badge {
  top: 0;
  right: 0;
}

/* Positioning contexts for the two places without an anchor: the image runs
   to the edge of the card or gallery item, so 10px in reads as the corner. */
.nhv-latest-card,
.nhv-gallery > li:first-child { position: relative; }

/* Latest products lifts its photo on hover; the sticker stays put above it. */
.nhv-latest-card .nhv-sticker { z-index: 3; }