/* =========================================================================
 * PRODUCT BADGES — award/certification icons overlaid on product images.
 *
 * Rendered by inc/product-badges/render.php into `.wrap-for-top-part` (loop
 * cards) and the gallery wrapper (single product).
 *
 * Positioning uses logical properties (inset-inline-*) so the site's RTL
 * layout is handled without a separate rule set — `inline-end` is the left
 * corner in Hebrew and the right corner in LTR, automatically.
 *
 * The existing BeRocket "most popular" pill occupies the opposite top corner,
 * so the two never collide. To move the badges to a different corner, change
 * the two inset properties in `.oc-pb` — nothing else depends on the side.
 * ====================================================================== */

/* Sizes below are the client's specified values (40x40, 8px apart, 10px from
 * the corner), set once here so they can be retuned in one place. */
:root {
	--oc-pb-size: 50px;        /* badge edge length on loop cards */
	--oc-pb-size-single: 72px; /* larger on the single product gallery */
	--oc-pb-offset: 12px;      /* distance from the image corner */
	--oc-pb-gap: 12px;         /* space between neighbouring badges */

	/* How far a LEFT-positioned badge is inset on the single product page.
	 * Below the desktop breakpoint the thumbnails move under the image, so
	 * the plain offset is correct; see the override further down. */
	--oc-pb-single-inset: calc(var(--oc-pb-offset) * 2);
}

/* Desktop only: the thumbnail column sits to the left of the main image and
 * lives inside the same wrapper the badges position against, so they must
 * clear it.
 *
 * Expressed as a percentage of the gallery width plus the standard offset,
 * rather than a fixed pixel inset: the thumbnail column is a proportion of
 * the gallery, so a fixed value drifts onto the thumbnails on narrow screens
 * and into the middle of the image on wide ones. The 13% is the column's
 * share of the gallery; adjust only that number if the badges do not sit
 * flush to the main image's corner. */
@media (min-width: 1025px) {
	:root {
		--oc-pb-single-inset: calc(20.5% + (var(--oc-pb-offset) * 2));
	}
}

/* The parent theme's image wrapper is the positioning context. It has no
 * `position` of its own, so set it here — `relative` is inert otherwise and
 * cannot disturb the existing card layout. */
.woocommerce .wrap-for-top-part,
.wrap-for-top-part {
	position: relative;
}

/* Same job on the single product page. It has to be the outer gallery rather
 * than the <figure>: the figure is the mobile slider's container, and putting
 * anything inside it breaks the slide list. */
.woocommerce-product-gallery {
	position: relative;
}

.oc-pb {
	position: absolute;
	z-index: 5; /* above the BeRocket label wrapper, which sits at 4 */
	display: flex;
	/* Row, matching the client's reference: badges sit side by side along the
	 * top of the image rather than stacked down its edge. */
	flex-direction: row;
	align-items: flex-start;
	/* Wrap rather than squeeze: two wide lockups can exceed the max-width
	 * below, and without this they would be compressed until the images
	 * overflowed their own boxes and overlapped each other. */
	flex-wrap: wrap;
	gap: var(--oc-pb-gap);
	/* Never let a wide lockup run past the far edge of the card. */
	max-width: calc(100% - (var(--oc-pb-offset) * 2));
	margin: 0;
	padding: 0;
	/* The whole card is a link — an inert overlay would swallow clicks meant
	 * for the product, so the container ignores pointer events and only
	 * genuinely linked badges opt back in (see .oc-pb__item--link). */
	pointer-events: none;
}

/* Vertical offset is set by context; the single product gallery is larger so
 * it gets more breathing room from the top edge. */
.oc-pb--loop {
	inset-block-start: var(--oc-pb-offset);
}

.oc-pb--single {
	inset-block-start: calc(var(--oc-pb-offset) * 2);
}

/* Horizontal side comes from each badge's own setting. These use PHYSICAL
 * left/right rather than logical properties on purpose: the client picks
 * "ימין" or "שמאל" literally in the dashboard, so the rendered side must not
 * flip with text direction. */
.oc-pb--loop.oc-pb--right {
	right: var(--oc-pb-offset);
}

.oc-pb--loop.oc-pb--left {
	left: var(--oc-pb-offset);
}

/* The right edge of the gallery IS the right edge of the main image, so a
 * right-positioned badge needs no correction. */
.oc-pb--single.oc-pb--right {
	right: calc(var(--oc-pb-offset) * 2);
}

/* The left edge is not: on desktop the thumbnail column sits there, so a
 * left-positioned badge has to clear it. --oc-pb-single-inset is that
 * distance, and it is the ONE value to adjust if the badges sit over the
 * thumbnails or too far into the image. */
.oc-pb--single.oc-pb--left {
	left: var(--oc-pb-single-inset);
}

/* ---- Replaces the "most popular" pill --------------------------------
 * A product showing award badges hides the BeRocket label rather than
 * stacking both in one corner. Enforced in CSS so it holds however the
 * client assigns things in the dashboard — no reliance on him remembering
 * to remove the popular label from an award-winning product. */
.wrap-for-top-part:has(.oc-pb--right) .berocket_better_labels_position,
.wrap-for-top-part:has(.oc-pb--right) .berocket_better_labels_line,
.wrap-for-top-part:has(.oc-pb--right) .berocket_better_labels_inline,
.wrap-for-top-part:has(.oc-pb--right) .br_alabel,
.woocommerce-product-gallery:has(.oc-pb--right) .berocket_better_labels_position,
.woocommerce-product-gallery:has(.oc-pb--right) .berocket_better_labels_line,
.woocommerce-product-gallery:has(.oc-pb--right) .berocket_better_labels_inline,
.woocommerce-product-gallery:has(.oc-pb--right) .br_alabel {
	display: none !important;
}

.oc-pb__item {
	display: block;
	/* Hold each badge at its natural width. Flex items shrink by default,
	 * which would pull the box narrower than the image inside it. */
	flex: 0 0 auto;
	line-height: 0; /* kill the inline-image descender gap */
}

.oc-pb__item--link {
	pointer-events: auto;
}

/* `!important` is load-bearing here, not laziness. WooCommerce core ships
 * `.woocommerce ul.products li.product a img { width: 100% }` at specificity
 * (0,3,4); any selector we could write without it would have to be absurdly
 * long, and would still break the day the theme adds one more class. The
 * badge is a fixed-size overlay — it has exactly one correct width. */
/* Height is fixed and width follows the artwork. Official award lockups are
 * wide rather than square ("iF DESIGN AWARD 2026", "reddot winner 2025"), so
 * forcing a square box would either letterbox them into a fraction of the
 * space or distort them. Equal height is what makes a row read as a set. */
.oc-pb__item img {
	display: block;
	width: auto !important;
	height: var(--oc-pb-size) !important;
	object-fit: contain;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.oc-pb--single .oc-pb__item img {
	height: var(--oc-pb-size-single) !important;
}

/* ---- Responsive ------------------------------------------------------- */

/* Tablet — cards barely narrow here, so they keep the specified 40px. Only
 * the single-product gallery comes down. */
@media (max-width: 1024px) {
	:root {
		--oc-pb-size-single: 60px;
	}
}

/* Mobile — cards drop to roughly half their desktop width, so holding 40px
 * would make the badges around a quarter of the image. Scaled down to keep
 * the same visual weight the client approved on desktop. */
@media (max-width: 767px) {
	:root {
		--oc-pb-size: 42px;
		--oc-pb-size-single: 52px;
		--oc-pb-offset: 10px;
		--oc-pb-gap: 10px;
	}
}

/* ---- Print ------------------------------------------------------------ */
@media print {
	.oc-pb {
		position: static;
		flex-direction: row;
	}
}