.grpl-image-wrapper {
	position: relative;
	/* Without this, a rotated ribbon (or any offset/oversized label) can
	   visually escape its own product card and sweep across neighbouring
	   cards in the grid — position:absolute has no bounds without a clipped
	   ancestor. This is the container every label anchors to, so it's the
	   right place to guarantee nothing spills outside this one product's
	   image box. */
	overflow: hidden;
}

.grpl-label {
	position: absolute;
	z-index: 2;
	display: inline-block;
	max-width: calc(100% - 16px);
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

.grpl-position-top-left {
	top: 8px;
	left: 8px;
}

.grpl-position-top-right {
	top: 8px;
	right: 8px;
}

.grpl-position-bottom-left {
	bottom: 8px;
	left: 8px;
}

.grpl-position-bottom-right {
	bottom: 8px;
	right: 8px;
}

.grpl-position-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Stack multiple labels sharing the same corner instead of overlapping. */
.grpl-position-top-left ~ .grpl-position-top-left {
	top: 34px;
}
.grpl-position-top-right ~ .grpl-position-top-right {
	top: 34px;
}
.grpl-position-bottom-left ~ .grpl-position-bottom-left {
	bottom: 34px;
}
.grpl-position-bottom-right ~ .grpl-position-bottom-right {
	bottom: 34px;
}

.grpl-shape-rectangle {
	border-radius: 2px;
}

.grpl-shape-pill {
	border-radius: 999px;
}

.grpl-shape-circle {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: normal;
	font-size: 11px;
}

/* Corner ribbon: a diagonal banner rotated into the image's corner and
   clipped to the card by .grpl-image-wrapper's overflow:hidden — no image
   asset needed. Fixed width (not text/padding-driven) is deliberate: an
   auto-width box rotated 45° around a corner pivot swings a wildly
   different distance depending on label text length, which is what made
   longer labels (e.g. "Out of Stock") sweep far outside their own card
   before this was fixed. A fixed width keeps that swing — and therefore
   the visible ribbon size — consistent regardless of the text. */
.grpl-shape-ribbon {
	width: 150px;
	padding: 4px 0;
	border-radius: 0;
	text-align: center;
	box-sizing: border-box;
}

/* Position + rotate each corner variant. Rotation uses the DEFAULT pivot
   (the strip's own center — deliberately not `transform-origin: corner`):
   rotating around the strip's center keeps that center point fixed in
   place while only the strip's long ends swing away from it, so as long
   as the center itself is positioned a sensible ~20-30px inside the
   card's corner, the text (which sits at that center, via text-align:
   center) stays inside .grpl-image-wrapper's clip box even though the
   strip's own tapering ends get clipped off — that's what makes a
   corner-ribbon banner look intentional rather than like a random
   clipped rectangle. The earlier version rotated around the corner
   pivot itself, which swept the text-bearing center of the strip
   outside the wrapper too, clipping it down to an unreadable sliver. */
.grpl-position-top-left.grpl-shape-ribbon {
	top: 18px;
	left: -42px;
	transform: rotate(-45deg);
}

.grpl-position-bottom-left.grpl-shape-ribbon {
	bottom: 18px;
	left: -42px;
	transform: rotate(45deg);
}

.grpl-position-top-right.grpl-shape-ribbon {
	top: 18px;
	right: -42px;
	transform: rotate(45deg);
}

.grpl-position-bottom-right.grpl-shape-ribbon {
	bottom: 18px;
	right: -42px;
	transform: rotate(-45deg);
}

.grpl-shape-image {
	padding: 0;
	background: none;
}

.grpl-label-image {
	display: block;
	max-width: 60px;
	height: auto;
}

.grpl-countdown {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* Custom HTML/CSS badges are meant to fully self-style — undo the base
   .grpl-label text-badge assumptions (padding, capped width, single-line
   truncation) that would otherwise clip a genuinely custom design. */
.grpl-shape-custom-html {
	padding: 0;
	max-width: none;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	background: none;
}

/* Mobile hide/scale — matches the theme's own mobile breakpoint
   (see .gr-mobile-tabbar in style.css). Scale is applied via `transform`,
   so it's skipped on Center-position labels: they already use `transform`
   for their own translate(-50%,-50%) centring, and only one `transform`
   value can win per element — the trade-off is fine since scaling a
   corner ribbon or badge on a cramped mobile card matters far more than
   scaling a centred one. */
@media (max-width: 781px) {
	.grpl-hide-mobile {
		display: none !important;
	}
	.grpl-label:not(.grpl-position-center) {
		transform: scale(var(--grpl-mobile-scale, 1));
	}
	.grpl-position-top-left.grpl-shape-ribbon:not(.grpl-position-center) {
		transform: rotate(-45deg) scale(var(--grpl-mobile-scale, 1));
	}
	.grpl-position-bottom-left.grpl-shape-ribbon:not(.grpl-position-center) {
		transform: rotate(-45deg) scale(var(--grpl-mobile-scale, 1));
	}
	.grpl-position-top-right.grpl-shape-ribbon:not(.grpl-position-center),
	.grpl-position-bottom-right.grpl-shape-ribbon:not(.grpl-position-center) {
		transform: rotate(45deg) scale(var(--grpl-mobile-scale, 1));
	}
}