/**
 * SRD Shop Suite — Product Badge.
 *
 * Badges render inside a .srd-badge-strip anchored to one corner of the
 * image; several badges line up side by side within the strip. Strip
 * modifiers (set by the renderer):
 *   .srd-badge-strip--gallery   overlaid on the [srd_gallery] wrapper
 *   .srd-badge-strip--archive   overlaid on a shop/category product card
 *   .srd-badge-strip--flush     side by side, tight to the image corner
 *   .srd-badge-strip--floating  inset from the corner, rounded, with gaps
 *
 * .srd-badge--waiting hides a scheduled badge; srd-badge.js toggles it from
 * the data-srd-start / data-srd-end epoch attributes at page-load time, so
 * page caching cannot show or hide a badge late.
 */

.srd-badge-strip {
	position: absolute;
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	max-width: calc(100% - 2 * var(--srd-strip-inset, 0px));
	pointer-events: none;
}

.srd-badge-strip--flush {
	--srd-strip-inset: 0px;
	gap: 0;
}

.srd-badge-strip--floating {
	--srd-strip-inset: 14px;
	gap: 6px;
}

.srd-badge {
	display: inline-block;
	padding: 0.35em 0.9em;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
	pointer-events: none;
}

.srd-badge-strip--floating .srd-badge {
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.srd-badge--waiting {
	display: none !important;
}

.srd-badge--image {
	padding: 0;
	background: none !important;
	box-shadow: none !important;
}

.srd-badge--image img {
	display: block;
	width: auto;
	max-width: 90px;
	height: auto;
}

/* Corner anchors (logical properties for RTL). Right corners keep the
   badge order left-to-right while the strip hugs the right edge. */
.srd-badge-strip--top-left {
	top: var(--srd-strip-inset, 0px);
	inset-inline-start: var(--srd-strip-inset, 0px);
}

.srd-badge-strip--top-right {
	top: var(--srd-strip-inset, 0px);
	inset-inline-end: var(--srd-strip-inset, 0px);
	justify-content: flex-end;
}

.srd-badge-strip--bottom-left {
	bottom: var(--srd-strip-inset, 0px);
	inset-inline-start: var(--srd-strip-inset, 0px);
}

.srd-badge-strip--bottom-right {
	bottom: var(--srd-strip-inset, 0px);
	inset-inline-end: var(--srd-strip-inset, 0px);
	justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* Gallery context: coexist with the sale badge, lightbox trigger and  */
/* the thumbnail rail/strip of each layout                             */
/* ------------------------------------------------------------------ */

/* Sale badge owns the top-left corner: stack the strip below it. */
.srd-gallery > .onsale ~ .srd-badge-strip--top-left {
	top: calc(var(--srd-strip-inset, 0px) + 14px + 3.2em);
}

/* Lightbox trigger owns the top-right corner: drop below it. */
.srd-gallery:has(.woocommerce-product-gallery__trigger) > .srd-badge-strip--top-right {
	top: calc(12px + 40px + 10px);
}

/* Left thumbnail rail: push left positions onto the main image
   (rail width + 14px flex gap). */
.srd-gallery--thumbs-left:not(.srd-mobile) > .srd-badge-strip--top-left,
.srd-gallery--thumbs-left:not(.srd-mobile) > .srd-badge-strip--bottom-left {
	inset-inline-start: calc(var(--srd-thumb-size, 100px) + 14px + var(--srd-strip-inset, 0px));
}

/* Bottom thumbnail strip: keep bottom positions on the main image,
   above the strip (thumb height + 12px strip margin). */
.srd-gallery--thumbs-bottom-scroll > .srd-badge-strip--bottom-left,
.srd-gallery--thumbs-bottom-scroll > .srd-badge-strip--bottom-right,
.srd-gallery--thumbs-left.srd-mobile > .srd-badge-strip--bottom-left,
.srd-gallery--thumbs-left.srd-mobile > .srd-badge-strip--bottom-right {
	bottom: calc(var(--srd-thumb-size, 100px) + 12px + var(--srd-strip-inset, 0px));
}

/* ------------------------------------------------------------------ */
/* Archive context: product cards in shop/category loops               */
/* ------------------------------------------------------------------ */

/* The card is the positioning ancestor. Top positions align with the
   image; bottom positions depend on the theme's card markup. */
ul.products li.product {
	position: relative;
}

.srd-badge-strip--archive {
	z-index: 9;
}

.srd-badge-strip--archive .srd-badge {
	font-size: 12px;
}

.srd-badge-strip--archive .srd-badge--image img {
	max-width: 64px;
}

/* Archive sale badge in the same corner: stack below it. */
ul.products li.product .onsale ~ .srd-badge-strip--top-left {
	top: calc(var(--srd-strip-inset, 0px) + 14px + 3em);
}