/**
 * Best Seller badge styles — 9 variants.
 *
 * Architecture:
 *   - Rank colour palette (gold / silver / bronze / teal / etc.) is exposed
 *     as CSS custom properties under [data-rank="…"].
 *   - Each visual variant is a `.lpk-bs--s{N}` class that reads from those
 *     properties — change a hex in :root, every variant updates.
 *   - Style is picked per-label via lpk_bs_settings.labels[$slug].style; the
 *     renderer emits the chosen `.lpk-bs--s{N}` class directly on the badge.
 *
 * Renders for both `.lpk-bs--card` (product cards) and `.lpk-bs--pdp` (PDP
 * inline badges row). PDP variants are slightly larger for the heavier
 * info-column context.
 *
 * @phase 5-N
 */

/* ---------------------------------------------------------------------------
 * RANK COLOUR PALETTE — single source of truth.
 * ------------------------------------------------------------------------- */
.lpk-bs {
	--rank-bg:        #1A1A1A;
	--rank-bg-soft:   #F3F4F6;
	--rank-fg:        #FFFFFF;
	--rank-fg-soft:   #1A1A1A;
	--rank-medal:     #1A1A1A;
	--rank-accent:    #1A1A1A;
}
.lpk-bs[data-rank="1"] {       /* gold */
	--rank-bg: #F59E0B; --rank-bg-soft:#FEF3C7;
	--rank-fg: #1A1A1A; --rank-fg-soft:#92400E;
	--rank-medal:#FFD700; --rank-accent:#F59E0B;
}
.lpk-bs[data-rank="2"] {       /* silver */
	--rank-bg: #94A3B8; --rank-bg-soft:#F1F5F9;
	--rank-fg: #FFFFFF; --rank-fg-soft:#334155;
	--rank-medal:#C0C0C0; --rank-accent:#64748B;
}
.lpk-bs[data-rank="3"] {       /* bronze */
	--rank-bg: #B45309; --rank-bg-soft:#FFF7ED;
	--rank-fg: #FFFFFF; --rank-fg-soft:#7C2D12;
	--rank-medal:#CD7F32; --rank-accent:#B45309;
}
.lpk-bs[data-rank="4"] {       /* honorable mention #4-#10 */
	--rank-bg: #0F766E; --rank-bg-soft:#CCFBF1;
	--rank-fg: #FFFFFF; --rank-fg-soft:#134E4A;
	--rank-medal:#14B8A6; --rank-accent:#0F766E;
}
/* "other" + force_on without specific position fall through to defaults
   (ink + white) which is the safe baseline. */

/* ---------------------------------------------------------------------------
 * S1 — Pill stack (current production)
 * Solid-fill pill, rank-coloured background, white text.
 * ------------------------------------------------------------------------- */
.lpk-bs--s1 {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	font-family: 'Manrope', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 4px;
	line-height: 1.2;
	white-space: nowrap;
	background: var(--rank-bg);
	color: var(--rank-fg);
}
.lpk-bs--s1.lpk-bs--pdp { padding: 5px 10px; font-size: 12px; }

/* ---------------------------------------------------------------------------
 * S2 — Amazon orange flag — two-part with category-specific copy
 * ------------------------------------------------------------------------- */
.lpk-bs--s2 {
	display: inline-flex;
	align-items: stretch;
	font-family: 'Manrope', sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(0,0,0,0.06);
	border-radius: 3px;
	overflow: hidden;
}
.lpk-bs--s2 .lpk-bs__num {
	background: var(--rank-bg);
	color: var(--rank-fg);
	padding: 4px 7px;
	display: inline-flex;
	align-items: center;
}
.lpk-bs--s2 .lpk-bs__lbl {
	background: #fff;
	color: #1A1A1A;
	padding: 4px 8px;
	border: 1px solid var(--rank-bg);
	border-left: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.lpk-bs--s2 .lpk-bs__scope { font-weight: 400; color: #5A5A5A; }

/* ---------------------------------------------------------------------------
 * S4 — Medal with numbered circle
 * ------------------------------------------------------------------------- */
.lpk-bs--s4 {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--rank-bg-soft);
	color: var(--rank-fg-soft);
	padding: 4px 10px 4px 4px;
	border-radius: 20px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.08);
	font-family: 'Manrope', sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.lpk-bs--s4 .lpk-bs__medal {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--rank-medal);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15);
}
.lpk-bs--s4.lpk-bs--pdp .lpk-bs__medal { width: 26px; height: 26px; font-size: 12.5px; }

/* ---------------------------------------------------------------------------
 * S5 — AliExpress flame
 * ------------------------------------------------------------------------- */
.lpk-bs--s5 {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--rank-bg);
	color: var(--rank-fg);
	padding: 3px 8px;
	font-family: 'Manrope', sans-serif;
	font-size: 10.5px;
	font-weight: 800;
	border-radius: 2px;
	letter-spacing: 0.03em;
}
.lpk-bs--s5 .lpk-bs__flame { font-size: 11px; line-height: 1; }

/* ---------------------------------------------------------------------------
 * S6 — Stripe ribbon overlaid on image (eBay / Etsy)
 * Sits absolutely positioned — the badge container needs position: relative.
 * ------------------------------------------------------------------------- */
.lpk-bs--s6 {
	display: inline-block;
	background: var(--rank-bg);
	color: var(--rank-fg);
	padding: 4px 14px 4px 10px;
	font-family: 'Manrope', sans-serif;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.04em;
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

/* ---------------------------------------------------------------------------
 * S9 — Under-title chip (Newegg / B&H pattern)
 * Tinted background, star glyph in rank-accent colour.
 * ------------------------------------------------------------------------- */
.lpk-bs--s9 {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--rank-bg-soft);
	color: var(--rank-fg-soft);
	padding: 2px 10px;
	border-radius: 12px;
	font-family: 'Manrope', sans-serif;
	font-size: 10.5px;
	font-weight: 700;
}
.lpk-bs--s9::before {
	content: '★';
	font-size: 10px;
	color: var(--rank-accent);
}

/* ---------------------------------------------------------------------------
 * S11 — Soft chip (Sonos / B&H micro)
 * Bordered, sentence-case-friendly, low visual weight.
 * ------------------------------------------------------------------------- */
.lpk-bs--s11 {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: var(--rank-bg-soft);
	color: var(--rank-fg-soft);
	border: 1px solid currentColor;
	padding: 2px 8px;
	font-family: 'Manrope', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: 10px;
	line-height: 1.5;
}
.lpk-bs--s11::before {
	content: '★';
	font-size: 9px;
	color: var(--rank-accent);
}

/* ---------------------------------------------------------------------------
 * S12 — Gradient banner (gaming / marketplace look)
 *
 * Renders as inline-flex like every other badge, but uses flex-basis: 100%
 * inside the PDP badges row so it claims its own line (other badges wrap
 * below). On product cards the .product-card__badges container is a
 * column-flex (one badge per line) so 100% width comes naturally.
 * ------------------------------------------------------------------------- */
.lpk-bs--s12 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	background: linear-gradient(90deg, var(--rank-medal) 0%, var(--rank-bg) 100%);
	color: var(--rank-fg);
	font-family: 'Manrope', sans-serif;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 4px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* Take a full row inside the PDP flex container without breaking siblings. */
.lpk-pdp__badges .lpk-bs--s12 { flex-basis: 100%; }
/* Take full width inside the card column-flex container. */
.product-card__badges .lpk-bs--s12 { width: 100%; }

/* ---------------------------------------------------------------------------
 * S13 — Trophy icon + text
 * Translucent pill, rank-coloured icon. Quiet enterprise treatment.
 * ------------------------------------------------------------------------- */
.lpk-bs--s13 {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(255,255,255,0.94);
	color: var(--rank-fg-soft);
	padding: 3px 10px;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	font-family: 'Manrope', sans-serif;
	font-size: 10.5px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.lpk-bs--s13 .lpk-bs__trophy { color: var(--rank-accent); flex-shrink: 0; }
.lpk-bs--s13.lpk-bs--pdp { padding: 4px 12px; font-size: 11.5px; }
.lpk-bs--s13.lpk-bs--pdp .lpk-bs__trophy { width: 14px; height: 14px; }

/* ---------------------------------------------------------------------------
 * PDP placement — the badges <div> is rendered at one of N anchor points
 * via PHP (see pdp-enhancements.php). CSS only needs to handle the
 * over_image variant which absolutely positions over the hero image.
 *
 *   Placements (PHP-driven):
 *     above_title, below_title, above_price, below_price, over_image
 *
 *   over_image sits inside .lpk-pdp__main-image so it anchors to the
 *   hero specifically. Anchoring on .lpk-pdp__gallery instead would put
 *   the badge in the corner of the gallery flex container — which is
 *   the top-left of the thumb column on desktop, not the hero image.
 * ------------------------------------------------------------------------- */
.lpk-pdp__main-image .lpk-pdp__badges--over-image {
	position: absolute;
	/* top: 0 aligns the badge with the right column's "above_title"
	   badges row (5% OFF / NEW), since both columns share the outer
	   grid's row baseline and above_title sits at top: 0 of .lpk-pdp__info.
	   left: 12px is the only intentional inset — keeps the badge from
	   touching the image's left edge while still feeling anchored. */
	top: 0;
	left: 12px;
	z-index: 5;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
	max-width: calc(100% - 24px);
	pointer-events: none;
}
.lpk-pdp__main-image .lpk-pdp__badges--over-image > * { pointer-events: auto; }
/* Hero wrapper must be a positioned ancestor for the absolute child to anchor. */
.lpk-pdp__main-image { position: relative; }

/* ---------------------------------------------------------------------------
 * CARD placement — same architecture: badges <div> is rendered at one of
 * 4 anchor points inside the product card. CSS handles the "over_image"
 * absolute positioning; other placements are inline within the content area.
 *
 *   Placements:
 *     over_image (default), above_title, above_price, below_price
 *
 *   .product-card__badges--inline = used by the three non-absolute placements;
 *   renders as a left-aligned wrap row sitting in .product-card__content.
 * ------------------------------------------------------------------------- */
.product-card__badges--inline {
	position: static;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 4px;
	margin: 0 0 6px;
	z-index: auto;
}
.product-card__badges--inline.product-card__badges--below-price { margin: 6px 0 0; }
.product-card__badges--below-title { margin: 4px 0 6px; }

/* -------------------------------------------------------------------------
 * Per-label visibility classes — server emits these on each badge wrapper
 * so the operator can disable specific labels on tight layouts:
 *
 *   .lpk-badge--hide-small    → hidden inside small-card grids (mobile 2-col)
 *   .lpk-badge--hide-carousel → hidden inside .lpk-rail carousels
 *
 * Surface detection lives on the PARENT (.product-grid--cols-2 etc., or the
 * rail wrapper) so a single CSS rule covers every consumer. The mobile
 * breakpoint mirrors the category-page 2-col threshold (640px).
 * ------------------------------------------------------------------------- */
.lpk-rail .lpk-badge--hide-carousel,
.product-rail .lpk-badge--hide-carousel { display: none !important; }

@media (max-width: 640px) {
	/* When category grid drops to 2 columns on mobile, hide labels flagged
	 * as small-card-noise. Operators can re-enable per-label in admin.
	 * .lpk-grid is the canonical container on category archives — must be
	 * in this list or the "hide on mobile 2-col" admin toggle silently
	 * does nothing for the stock indicator + any other small-card label. */
	.lpk-grid .lpk-badge--hide-small,
	.lpk-product-grid .lpk-badge--hide-small,
	.product-grid .lpk-badge--hide-small,
	.lpk-category-page .lpk-badge--hide-small { display: none !important; }
}

/* -------------------------------------------------------------------------
 * SALE badge — 3 styles
 *   .lpk-sale--pill    — coloured pill, "{N}% OFF" (legacy behaviour)
 *   .lpk-sale--circle  — circular medal, "-{N}%"
 *   .lpk-sale--amazon  — flag with strikethrough regular price + sale price
 * ------------------------------------------------------------------------- */
.lpk-sale {
	display: inline-flex;
	align-items: center;
	font-family: var(--ff-sans, 'Inter', system-ui, sans-serif);
	white-space: nowrap;
	line-height: 1;
}

.lpk-sale--pill {
	padding: 4px 8px;
	background: #DC2626;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.4px;
	border-radius: 3px;
	text-transform: uppercase;
}

.lpk-sale--circle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #DC2626;
	color: #fff;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: -0.3px;
	box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}
.lpk-sale--circle .lpk-sale__num { display: inline-block; }

.lpk-sale--amazon {
	gap: 6px;
	padding: 5px 8px 5px 0;
	background: #fff;
	color: #1A1A1A;
	border: 1px solid #E5E5E5;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.lpk-sale--amazon .lpk-sale__deal {
	display: inline-block;
	background: #DC2626;
	color: #fff;
	padding: 5px 6px;
	margin: -5px 0 -5px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.lpk-sale--amazon .lpk-sale__pct {
	color: #DC2626;
	font-weight: 800;
	font-size: 12px;
}
.lpk-sale--amazon .lpk-sale__prices {
	display: inline-flex;
	gap: 5px;
	align-items: baseline;
	padding-right: 8px;
}
.lpk-sale--amazon .lpk-sale__price-now {
	color: #1A1A1A;
	font-weight: 700;
	font-size: 12px;
}
.lpk-sale--amazon .lpk-sale__price-was {
	color: #6B7280;
	text-decoration: line-through;
	font-weight: 500;
	font-size: 11px;
}

/* -------------------------------------------------------------------------
 * NEW badge — 3 styles
 *   .lpk-new--pill     — coloured pill, "NEW" (legacy behaviour)
 *   .lpk-new--ribbon   — angled corner ribbon
 *   .lpk-new--softchip — subtle "Just added" chip
 * ------------------------------------------------------------------------- */
.lpk-new {
	display: inline-flex;
	align-items: center;
	font-family: var(--ff-sans, 'Inter', system-ui, sans-serif);
	white-space: nowrap;
	line-height: 1;
}

.lpk-new--pill {
	padding: 4px 8px;
	background: #00ECC2;
	color: #1A1A1A;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.4px;
	border-radius: 3px;
	text-transform: uppercase;
}

.lpk-new--ribbon {
	padding: 4px 10px 4px 8px;
	background: #00ECC2;
	color: #1A1A1A;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
	padding-right: 14px;
}

.lpk-new--softchip {
	padding: 4px 8px;
	background: rgba(0, 236, 194, 0.12);
	color: #047857;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2px;
	border-radius: 999px;
}

/* -------------------------------------------------------------------------
 * Stock indicator dot — used at inline anchors (below_title / above_price /
 * below_price). The over-image variant uses the legacy .product-card__stock
 * styling since the variable-product swatch-change JS keys off that class.
 * ------------------------------------------------------------------------- */
.lpk-stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ff-sans, 'Inter', system-ui, sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1px;
	line-height: 1.2;
}
.lpk-stock__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}
.lpk-stock--in  { color: #047857; }
.lpk-stock--in  .lpk-stock__dot { background: #10B981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15); }
.lpk-stock--out { color: #B91C1C; }
.lpk-stock--out .lpk-stock__dot { background: #DC2626; box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12); }