/* ---------------------------------------------------------------------------
 * Product Low Stock Rules -- badge styling.
 *
 * All geometry is expressed as a share of the containing box rather than in
 * pixels, so the ribbon keeps the same proportions on any screen, at any grid
 * column count, without breakpoint-by-breakpoint tuning:
 *
 *   - width / right / padding / min-width  -> % of the containing block's width
 *   - top                                  -> % of its height
 *   - the swing travel                     -> em, so it tracks the font size
 *
 * Colour comes from the rule via --alk-pls-bg / --alk-pls-fg inline custom
 * properties; the values below are only fallbacks.
 *   - font-size                            -> cqw, a share of the container
 *
 * The percentages are calibrated so a ~600px cover and a ~220px grid thumbnail
 * render at the sizes that were signed off, then scale from there.
 * ------------------------------------------------------------------------ */

/* --- Containing boxes ---------------------------------------------------- */

/*
 * Product page. The theme's swiper already clips and positions, so this only
 * establishes a query container and a fallback positioning context. It
 * deliberately does not set overflow:hidden, which would clip the theme's zoom
 * lens and expander button.
 */
.product-cover {
  position: relative;
  container-type: inline-size;
}

/*
 * Listing pages. The thumbnail <a> wraps only the images, so it is safe to clip
 * here -- unlike .thumbnail-container, past whose bottom edge the theme hangs
 * the hover buttons. Specificity is set to win over the theme's
 * `.products-grid .product-miniature-layout-3 .product-thumbnail` static rule.
 */
.product-miniature .thumbnail-container a.product-thumbnail {
  display: block;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}

/* --- Shared ribbon ------------------------------------------------------- */

.alk-pls-image-badge {
  --alk-pls-angle: 35deg;
  position: absolute;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--alk-pls-bg, #DC143C);
  color: var(--alk-pls-fg, #ffffff);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transform: rotate(var(--alk-pls-angle));
  transform-origin: center;
  animation: alk-pls-ribbon-swing 1.9s ease-in-out infinite;
  pointer-events: none;
}

/* --- Product page cover -------------------------------------------------- */

.alk-pls-image-badge--cover {
  top: 3.2%;
  right: -7.5%;
  min-width: 39%;
  max-width: 52%;
  padding: 1.7% 6.8%;
  font-size: 15px; /* fallback where container queries are unsupported */
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* --- Listing thumbnails -------------------------------------------------- */

.alk-pls-image-badge--list {
  top: 6%;
  right: -19%;
  min-width: 84%;
  max-width: 100%;
  padding: 2.9% 12.5%;
  font-size: 12px; /* fallback where container queries are unsupported */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

@supports (container-type: inline-size) {
  .alk-pls-image-badge--cover {
    font-size: clamp(11px, 2.9cqw, 18px);
  }

  .alk-pls-image-badge--list {
    font-size: clamp(10px, 6cqw, 16px);
  }
}

/* --- Motion -------------------------------------------------------------- */

@keyframes alk-pls-ribbon-swing {
  0%, 100% {
    transform: rotate(var(--alk-pls-angle)) translateY(0);
  }
  50% {
    transform: rotate(var(--alk-pls-angle)) translateY(0.3em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .alk-pls-image-badge {
    animation: none;
  }
}