/* =========================================================================
 * EMPOLAS Labels — frontend (v1.2.2)
 * Author: Ondřej Meitner
 *
 * GOAL
 * ----
 * Render label badges as a true visual OVERLAY on top of `.et_shop_image`
 * (Divi archive) and `.woocommerce-product-gallery__image` (single product),
 * never as in-flow elements pushing the image down.
 *
 * STRATEGY (defence in depth)
 * ---------------------------
 * The `woocommerce_before_shop_loop_item_title` hook fires BEFORE the image
 * span, so the host is rendered as a sibling. We solve the overlay in three
 * layers — any one of them is sufficient on its own:
 *
 *   1. JS layer — `empolas-labels-frontend.js` moves the host INTO the image
 *      span on DOMContentLoaded. After move, `position: absolute; inset: 0;`
 *      anchors the host to the image exactly.
 *
 *   2. CSS "negative-margin" layer (no-JS fallback) — when the host is still
 *      a sibling, we set `height: 0; margin-bottom: 0;` so it occupies zero
 *      vertical space. Its absolute children then anchor to the parent <a>
 *      (which is `position: relative`) and `top: 0; left: 0;` lands at the
 *      image's top-left because the image is the first child of <a>.
 *
 *   3. PHP inline fallback — the renderer emits `position: absolute` inline
 *      on each `.empolas-labels` corner container, so even if the stylesheet
 *      is stripped or overridden the absolute positioning still works.
 *
 * Z-INDEX: 999 on host, above Divi's `.et_overlay` (10) and `span.onsale` (9).
 * GAP between stacked labels: 4px.
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * 1. POSITIONING ANCESTORS
 *    `.et_shop_image` (Divi) and the gallery wrapper (single) MUST be
 *    `position: relative` so absolutely-positioned children anchor to them
 *    correctly. The wrapping <a> / <li> get the same treatment as a fallback
 *    for when the host is still a sibling of the image (no-JS path).
 * ---------------------------------------------------------------------- */
.et_shop_image,
.et_pb_shop .et_shop_image,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery .flex-active-slide {
	position: relative !important;
	overflow: visible;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.products .product,
.et_pb_shop ul.products li.product,
li.product,
.woocommerce ul.products li.product > a,
.woocommerce-page ul.products li.product > a,
.et_pb_shop ul.products li.product > a {
	position: relative;
}

/* -------------------------------------------------------------------------
 * 2. HOST WRAPPER
 *    Two states:
 *      a) After JS move — host is INSIDE `.et_shop_image`. `inset: 0` fills
 *         it; `position: absolute` anchors against the image span.
 *      b) Before JS / no-JS — host sits as a sibling of the image. We force
 *         `height: 0; margin: 0;` so it occupies no flow space. Its absolute
 *         children resolve against the parent <a>'s positioning context.
 *
 *    Both states land in the same visual place because the image is the
 *    first visible child of <a> in Divi's loop markup.
 * ---------------------------------------------------------------------- */
.empolas-labels-host {
	position: relative; /* establishes stacking context, fallback state */
	z-index: 999;
	height: 0;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

/* When the JS mover has placed the host inside the image span, switch to a
 * fully-absolute fill. The `:scope` of `.et_shop_image > .empolas-labels-host`
 * confirms the move actually happened. */
.et_shop_image > .empolas-labels-host,
.woocommerce-product-gallery__image > .empolas-labels-host,
.woocommerce-product-gallery .flex-active-slide > .empolas-labels-host {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	inset: 0;
	height: auto;
}

/* -------------------------------------------------------------------------
 * 3. CORNER CONTAINERS — absolute, flex column, gap 4px
 *
 *    Each corner is its own absolute-positioned flex container. Multiple
 *    labels in the same corner stack VERTICALLY with a 4px gap.
 *
 *    `align-items` is corner-aware so badges hug the correct edge.
 * ---------------------------------------------------------------------- */
.empolas-labels {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
	max-width: calc(100% - 16px);
}

.empolas-labels--overlay {
	position: absolute;
	z-index: 999;
}

.empolas-labels__pos--top-left {
	top: 8px;
	left: 8px;
	right: auto;
	bottom: auto;
	align-items: flex-start;
}

.empolas-labels__pos--top-right {
	top: 8px;
	right: 8px;
	left: auto;
	bottom: auto;
	align-items: flex-end;
}

.empolas-labels__pos--bottom-left {
	bottom: 8px;
	left: 8px;
	top: auto;
	right: auto;
	align-items: flex-start;
}

.empolas-labels__pos--bottom-right {
	bottom: 8px;
	right: 8px;
	top: auto;
	left: auto;
	align-items: flex-end;
}

/* When the host is NOT inside the image (no-JS state), bottom-anchored
 * labels would resolve to the bottom of the parent <a> (= bottom of the
 * title area). We reposition them via a custom CSS variable that JS sets
 * to the image height — see empolas-labels-frontend.js. */
.empolas-labels-host:not(:where(.et_shop_image *, .woocommerce-product-gallery__image *, .flex-active-slide *)) .empolas-labels__pos--bottom-left,
.empolas-labels-host:not(:where(.et_shop_image *, .woocommerce-product-gallery__image *, .flex-active-slide *)) .empolas-labels__pos--bottom-right {
	bottom: auto;
	top: calc(var(--empolas-image-h, 100%) - 8px - var(--empolas-stack-h, 28px));
}

/* -------------------------------------------------------------------------
 * 4. INLINE MODE — used when hook is not an image-overlay hook
 * ---------------------------------------------------------------------- */
.empolas-labels--inline {
	position: relative;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 12px;
	z-index: auto;
}

.empolas-labels--inline.empolas-labels--single {
	margin: 0 0 16px;
}

/* -------------------------------------------------------------------------
 * 5. INDIVIDUAL BADGE
 *
 *    Per-label inline styles (background, color, border-radius, font-size,
 *    padding) are emitted with !important from PHP — the values below are
 *    ONLY fallbacks for the rare case the inline style is stripped.
 * ---------------------------------------------------------------------- */
.empolas-label {
	display: inline-block;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	pointer-events: auto;
	box-sizing: border-box;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;

	/* fallbacks only — inline styles with !important win */
	background: #e63946;
	color: #ffffff;
	border-radius: 3px;
	font-size: 12px;
	padding: 4px 10px;
}

/* Defense vs Divi: prevent inherited transforms / transitions that Divi
 * applies to `span` inside shop modules from leaking into our badge. */
.et_pb_shop .empolas-label,
.woocommerce .empolas-label {
	transform: none;
	transition: none;
}

/* Subtle entrance animation on archive (skip on single — feels jarring there). */
.empolas-labels-host--archive .empolas-label {
	animation: empolas-fade-in 0.25s ease-out backwards;
}
@keyframes empolas-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------------
 * 6. NATIVE SALE BADGE COEXISTENCE
 * ---------------------------------------------------------------------- */
body.empolas-hide-default-sale .woocommerce span.onsale,
body.empolas-hide-default-sale .et_pb_shop span.onsale,
body.empolas-hide-default-sale .et_shop_image span.onsale {
	display: none !important;
}

body.empolas-shift-default-sale .et_shop_image span.onsale,
body.empolas-shift-default-sale .et_pb_shop span.onsale {
	top: auto !important;
	bottom: 8px !important;
	left: 8px !important;
	right: auto !important;
}

/* -------------------------------------------------------------------------
 * 7. RESPONSIVE
 * ---------------------------------------------------------------------- */
@media (max-width: 768px) {
	.empolas-labels {
		gap: 3px;
		max-width: calc(100% - 12px);
	}

	.empolas-labels__pos--top-left    { top: 6px;    left: 6px; }
	.empolas-labels__pos--top-right   { top: 6px;    right: 6px; }
	.empolas-labels__pos--bottom-left { bottom: 6px; left: 6px; }
	.empolas-labels__pos--bottom-right{ bottom: 6px; right: 6px; }

	.empolas-label {
		letter-spacing: 0.2px;
	}

	.empolas-label--hide-mobile {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
 * 8. SINGLE PRODUCT — gallery overlay
 * ---------------------------------------------------------------------- */
.woocommerce-product-gallery .empolas-labels__pos--top-left,
.woocommerce-product-gallery .empolas-labels__pos--top-right {
	top: 14px;
}
.woocommerce-product-gallery .empolas-labels__pos--top-left,
.woocommerce-product-gallery .empolas-labels__pos--bottom-left {
	left: 14px;
}
.woocommerce-product-gallery .empolas-labels__pos--top-right,
.woocommerce-product-gallery .empolas-labels__pos--bottom-right {
	right: 14px;
}
.woocommerce-product-gallery .empolas-labels__pos--bottom-left,
.woocommerce-product-gallery .empolas-labels__pos--bottom-right {
	bottom: 14px;
}

/* -------------------------------------------------------------------------
 * 9. DIVI — shop module specifics
 * ---------------------------------------------------------------------- */
.et_pb_shop .et_shop_image,
.et_shop_image {
	overflow: visible;
}

.et_pb_shop li.product > a {
	display: block;
	position: relative;
}

/* -------------------------------------------------------------------------
 * 10. RTL
 * ---------------------------------------------------------------------- */
html[dir="rtl"] .empolas-labels__pos--top-left,
html[dir="rtl"] .empolas-labels__pos--bottom-left {
	left: auto;
	right: 8px;
	align-items: flex-end;
}
html[dir="rtl"] .empolas-labels__pos--top-right,
html[dir="rtl"] .empolas-labels__pos--bottom-right {
	right: auto;
	left: 8px;
	align-items: flex-start;
}

@media (max-width: 768px) {
	html[dir="rtl"] .empolas-labels__pos--top-left,
	html[dir="rtl"] .empolas-labels__pos--bottom-left { right: 6px; }
	html[dir="rtl"] .empolas-labels__pos--top-right,
	html[dir="rtl"] .empolas-labels__pos--bottom-right { left: 6px; }
}

/* -------------------------------------------------------------------------
 * 11. PRINT — hide badges
 * ---------------------------------------------------------------------- */
@media print {
	.empolas-labels,
	.empolas-labels-host {
		display: none !important;
	}
}