/*
 * Product badges (includes/badges.php): short labels laid over a product photo, in one of nine spots.
 *
 * The markup is a layer that fills the photo, one box per spot in use, one label per badge:
 *   div.nb-layer[.nb-layer--pdp][.nb-layer--sale] > div.nb-pos[data-pos="tl|tc|tr|cl|cc|cr|bl|bc|br"] > span.nb
 * The label's text and background colours are set inline on span.nb (they are the shop owner's choice).
 */

/* The box the layer fills: the photo link on a shop card, the photo wrapper on the product page.
   The percent-off tag does not move when the card photo becomes the positioned box, because the box
   it used before had the same top and right edges. */
.nl-card-photo,
.hj-pdp-gallery .woocommerce-product-gallery__image,
.hj-pdp-gallery .woocommerce-product-gallery__image--placeholder { position: relative; }

.nb-layer {
	--nb-edge: 12px;                /* gap between a badge and the photo edge; the percent tag uses the same */
	--nb-top: var(--nb-edge);       /* where the top row of stacks starts */
	--nb-bottom: var(--nb-edge);    /* where the bottom row of stacks starts */
	--nb-tl: var(--nb-top);         /* a corner stack can start further in, to clear the percent tag or the photo counter */
	--nb-tr: var(--nb-top);
	--nb-br: var(--nb-bottom);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	pointer-events: none;           /* clicks go through to the photo link */
}

.nb-pos {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: max-content;             /* a long label in a centred spot must not be squeezed to half the photo */
	max-width: calc(100% - (2 * var(--nb-edge)));
}
.nb-pos[data-pos$="l"] { left: var(--nb-edge); align-items: flex-start; }
.nb-pos[data-pos$="c"] { left: 50%; align-items: center; }
.nb-pos[data-pos$="r"] { right: var(--nb-edge); align-items: flex-end; }

.nb-pos[data-pos^="t"] { top: var(--nb-top); }
.nb-pos[data-pos="tl"] { top: var(--nb-tl); }
.nb-pos[data-pos="tr"] { top: var(--nb-tr); }
.nb-pos[data-pos^="c"] { top: 50%; }
.nb-pos[data-pos^="b"] { bottom: var(--nb-bottom); flex-direction: column-reverse; } /* bottom spots stack upward */
.nb-pos[data-pos="br"] { bottom: var(--nb-br); }

/* Centred spots are pulled back by half their own size, so a stack grows around the middle. */
.nb-pos[data-pos="tc"],
.nb-pos[data-pos="bc"] { transform: translateX(-50%); }
.nb-pos[data-pos="cl"],
.nb-pos[data-pos="cr"] { transform: translateY(-50%); }
.nb-pos[data-pos="cc"] { transform: translate(-50%, -50%); }

/* Same family as the percent tag: bold, small, with a hair of shadow so a pale badge still reads on a pale photo. */
.nb {
	display: block;
	max-width: 100%;
	margin: 0;
	padding: 4px 9px;
	overflow: hidden;
	border-radius: 4px;
	font-family: var(--hj-sans);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .02em;
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(43, 23, 25, .2);
}

/* ---------- things on the photo that a stack must clear ----------
   Sizes were measured in the browser; every stack starts about 6px past the thing it clears. */

/* Shop card: the percent tag keeps the top-right corner (24px tall, 21px on phones). */
.nb-layer--sale { --nb-tr: 42px; }

/* Shop card with a combo chip over the bottom of the photo (25px tall, 21px on phones). The theme prints the chip
   just before this layer, so the sibling selector finds it, and the whole bottom row sits above it. */
.hj-chip ~ .nb-layer { --nb-bottom: 43px; }

/* Product page: the percent tag is top left of the gallery (top: 0; left: 0; 24px tall), so that stack starts below it. */
.nb-layer--pdp.nb-layer--sale { --nb-tr: var(--nb-top); --nb-tl: 30px; }

@media (max-width: 900px) {
	.nb-layer { --nb-edge: 8px; }
	.nb-layer--sale { --nb-tr: 35px; }
	.hj-chip ~ .nb-layer { --nb-bottom: 35px; }
	/* Product page: the site header lies over the top of the photo (53px of icons under a white fade about 110px
	   deep, chrome.css .nl-hdr--over), so the top row starts below the fade. That also clears the percent tag. */
	.nb-layer--pdp { --nb-top: 100px; }
	.nb-layer--pdp.nb-layer--sale { --nb-tl: var(--nb-top); --nb-tr: var(--nb-top); }
	.nb { padding: 3px 7px; font-size: 11px; }
}

/* Phones: Shop Kit's photo counter ("1/3") sits in the bottom-right corner of the gallery (40 x 27px, 10px in). */
@media (max-width: 767px) {
	.nb-layer--pdp { --nb-br: 44px; }
}