/* ---------------------------------------------------------------------------
 * Dervix Product Badges — Frontend
 * --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * Base badge container
 * --------------------------------------------------------------------------- */
/* Wrapper around the product image: makes the image the positioning
 * context for badges. The image element itself is never modified. */
.dervix-pb-img-wrap {
	position: relative;
	display: block;
	max-width: 100%;
	container-type: inline-size; /* Enables cqw units (1cqw = 1% of image width). */
}

/* Badge overlay covers exactly the image box; badges inside are absolute. */
.dervix-pb-image-badges {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	z-index: 5;
}

.dervix-pb-image-badges .dervix-pb-badge {
	position: absolute;
	font-size: 12px; /* Fallback without container-query support. */
	font-size: calc(var(--dervix-pb-fs, 6) * 1cqw); /* % of image width. */
}

/* ---------------------------------------------------------------------------
 * Individual badge positioning
 * All 9 positions supported with top/left/transform.
 * --------------------------------------------------------------------------- */

/* Top Left */
.dervix-pb-badge--top_left {
	position: absolute;
	top: 8px;
	left: 8px;
	transform: none;
}

/* Top Center */
.dervix-pb-badge--top_center {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX( -50% );
}

/* Top Right */
.dervix-pb-badge--top_right {
	position: absolute;
	top: 8px;
	right: 8px;
	transform: none;
}

/* Middle Left */
.dervix-pb-badge--middle_left {
	position: absolute;
	top: 50%;
	left: 8px;
	transform: translateY( -50% );
}

/* Middle Center */
.dervix-pb-badge--middle_center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}

/* Middle Right */
.dervix-pb-badge--middle_right {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY( -50% );
}

/* Bottom Left */
.dervix-pb-badge--bottom_left {
	position: absolute;
	bottom: 8px;
	left: 8px;
	transform: none;
}

/* Bottom Center */
.dervix-pb-badge--bottom_center {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX( -50% );
}

/* Bottom Right */
.dervix-pb-badge--bottom_right {
	position: absolute;
	bottom: 8px;
	right: 8px;
	transform: none;
}

/* ---------------------------------------------------------------------------
 * Compact, modern sizing for a men's fashion store.
 * --------------------------------------------------------------------------- */
.dervix-pb-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 8px;
	border-radius: 3px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	background: #000;
	color: #fff;
	white-space: nowrap;
	font-size: 12px; /* Fallback until frontend.js scales it to the image width. */
	z-index: 5;
	pointer-events: none; /* Do not block image clicks or add-to-cart. */
}

/* ---------------------------------------------------------------------------
 * Multiple badges at the same position: stack with consistent spacing.
 * --------------------------------------------------------------------------- */
.dervix-pb-image-badges .dervix-pb-badge:not(:last-child) {
	margin-bottom: 4px;
}

/* ---------------------------------------------------------------------------
 * Badge shape variants
 * --------------------------------------------------------------------------- */

/* Rectangle (default) */
.dervix-pb-badge--shape-rectangle {
	border-radius: 3px;
}

/* Rounded Rectangle */
.dervix-pb-badge--shape-rounded {
	border-radius: 6px;
}

/* Pill */
.dervix-pb-badge--shape-pill {
	border-radius: 20px;
}

/* ---------------------------------------------------------------------------
 * Badge type color schemes
 * --------------------------------------------------------------------------- */

/* TRENDING — black background, white bold text */
.dervix-pb-badge-trending {
	background: #000;
	color: #fff;
}

.dervix-pb-badge-trending span {
	background: #000;
}

/* SALE — red background, white bold text */
.dervix-pb-badge-sale {
	background: #d00;
	color: #fff;
}

.dervix-pb-badge-sale span {
	background: #d00;
}

/* DISCOUNT — red background, white bold percentage text */
.dervix-pb-badge-discount {
	background: #d00;
	color: #fff;
}

.dervix-pb-badge-discount span {
	background: #d00;
}

/* CUSTOM labels — dynamic colors from stored metadata */
.dervix-pb-badge--type-custom {
	border-radius: 3px;
}

/* Custom label overrides — applied via inline styles from metadata. */
.dervix-pb-badge--type-custom {
	background-color: #000000;
	color: #ffffff;
}

.dervix-pb-badge--type-custom.dervix-pb-badge--shape-rounded {
	border-radius: 6px;
}

.dervix-pb-badge--type-custom.dervix-pb-badge--shape-pill {
	border-radius: 20px;
}

/* Weighting so the discount badge appears on top of the sale badge when both
 * are active (only occurs when the store owner selects both). */
.dervix-pb-badge-discount {
	z-index: 6;
}

/* ---------------------------------------------------------------------------
 * Responsive tweaks
 * --------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.dervix-pb-image-badges .dervix-pb-badge:not(:last-child) {
		margin-bottom: 3px;
	}

	.dervix-pb-badge {
		padding: 2px 6px;
		border-radius: 3px;
	}

	.dervix-pb-badge--top_left { top: 6px; left: 6px; }
	.dervix-pb-badge--top_right { top: 6px; right: 6px; }
	.dervix-pb-badge--bottom_left { bottom: 6px; left: 6px; }
	.dervix-pb-badge--bottom_right { bottom: 6px; right: 6px; }
}

/* ---------------------------------------------------------------------------
 * Focus outline for accessibility.
 * --------------------------------------------------------------------------- */
.dervix-pb-badge:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
}