/* ═══════════════════════════════════════════════════════════════════════════
   LEADER HELLAS — Σήματα προϊόντος (badges overlay)
   Ακολουθεί τον κανόνα rem του leader-core.css:  px @1920 ÷ 10 = rem
   Χρώματα/ραδιους/fonts κληρονομούνται από τα --lh-* custom properties.
   Το overlay κάθεται μέσα στο .lh-product__main (position: relative).
   ═══════════════════════════════════════════════════════════════════════════ */

.lh-product__main {
	/* Ασφάλεια: αν για κάποιο λόγο δεν έχει τεθεί από το leader-single.css. */
	position: relative;
}

.lh-badges {
	margin: 0;
	padding: 0;
	list-style: none;

	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;          /* 12px */
}

/* Overlay mode: πάνω-αριστερά μέσα στην εικόνα (non-printing προϊόντα). */
.lh-badges--overlay {
	position: absolute;
	top: 2.4rem;          /* 24px @1920 */
	left: 2.4rem;
	right: 2.4rem;
	z-index: 3;
	pointer-events: none; /* δεν εμποδίζει interactions με την εικόνα */
}

/* Flow mode: μπαίνει στη ροή του printing preview, όπου το τοποθέτησες
   (π.χ. κάτω από το «ΓΡΑΦΗΣ» ή κάτω από το «100G»). */
.lh-badges--flow {
	justify-content: center;
	margin: 2.4rem 0 0;   /* 24px κενό από το προηγούμενο block */
}

/* Στο printing preview τα στοιχεία είναι column & centered — κρατάμε συνέπεια. */
.lh-product__main--printing .lh-badges--flow {
	width: 100%;
}

/* ── Κάρτα καταλόγου / κατηγορίας (leader_catalog) ───────────────────────── */
.lh-cat-card--printing .lh-badges--flow {
	position: relative;
	z-index: 2;            /* πάνω από την absolute εικόνα παλέτας */
	width: 100%;
	justify-content: center;
	margin: 2rem 0 0;      /* 20px κενό από display/stat */
}

/* Στην κάρτα το font είναι μεγαλύτερο (128/40) — μικραίνουμε λίγο το badge. */
.lh-cat-card--printing .lh-badge {
	font-size: 1.7rem;
	padding: .7rem 1.4rem;
}

.lh-badge {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;

	padding: .8rem 1.6rem;              /* 8px 16px */
	border-radius: 999px;

	/* Προεπιλογές — υπερισχύουν τα inline χρώματα (φόντο/περίγραμμα/κείμενο)
	   που ορίζει ο χρήστης ανά badge. Αν αφήσεις κάτι «auto», μένει αυτό. */
	background: #ffffff;
	border: .1rem solid var(--lh-navy, #251c52);
	color: var(--lh-navy, #251c52);

	font-family: var(--lh-display, "Fira Sans Extra Condensed", "Arial Narrow", Arial, sans-serif);
	font-size: 1.8rem;    /* 18px @1920 */
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04rem;
	text-transform: uppercase;
	white-space: nowrap;

	box-shadow: 0 .2rem .6rem rgba(37, 28, 82, .1);

	transition: transform .2s var(--lh-ease, cubic-bezier(.4, 0, .2, 1)),
		box-shadow .2s var(--lh-ease, cubic-bezier(.4, 0, .2, 1));
}

.lh-badge:hover {
	transform: translateY(-.2rem);
	box-shadow: 0 .4rem 1.2rem rgba(37, 28, 82, .16);
}

.lh-badge__text {
	display: inline-block;
}

/* ── Mobile / tablet (κάτω από 1024px το leader-core αλλάζει το rem base) ── */
@media (max-width: 1024px) {
	.lh-badges {
		top: 1.6rem;
		left: 1.6rem;
		right: 1.6rem;
		gap: .8rem;
	}

	.lh-badge {
		padding: .6rem 1.2rem;
		font-size: 1.6rem;
	}
}

@media (max-width: 640px) {
	.lh-badge {
		font-size: 1.5rem;
	}
}