/* Component: pack-label — design-reference/canvas/Label.dc.html.
   Four designs (classic, modern, botanical, bold). Text sizes scale with --mx-u
   (1/100 of the label width, set per pack in pack-shot.css). Tint: --mx-label-tint. */

.mx-tint--forest { --mx-label-tint: var(--mx-forest); }
.mx-tint--clay { --mx-label-tint: var(--mx-demo-clay); }
.mx-tint--indigo { --mx-label-tint: var(--mx-demo-indigo); }
.mx-tint--plum { --mx-label-tint: var(--mx-demo-plum); }
.mx-tint--charcoal { --mx-label-tint: var(--mx-demo-charcoal); }
.mx-tint--teal { --mx-label-tint: var(--mx-demo-teal); }

.mx-pack .mx-label {
	position: absolute;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--mx-white);
	border-radius: calc(var(--mx-u) * 3);
	color: var(--mx-ink);
	line-height: 1.05;
}
.mx-label > span,
.mx-label__band > span,
.mx-label__lower > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-label__brand { font-family: var(--mx-font-display); font-weight: 600; color: var(--mx-label-tint); font-size: calc(var(--mx-u) * 15); }
.mx-label__product { font-family: var(--mx-font-ui); font-weight: 700; font-size: calc(var(--mx-u) * 8); color: var(--mx-ink); }
.mx-label__latin { font-family: var(--mx-font-display); font-style: italic; font-size: calc(var(--mx-u) * 7); color: var(--mx-label-muted); }
.mx-label__net { font-family: var(--mx-font-ui); font-size: calc(var(--mx-u) * 5.6); color: var(--mx-label-muted); }

/* Classic: framed, centred */
.mx-label--classic {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: calc(var(--mx-u) * 2.2);
	text-align: center;
	padding: calc(var(--mx-u) * 8);
	box-shadow: inset 0 0 0 calc(var(--mx-u) * 4) var(--mx-white), inset 0 0 0 calc(var(--mx-u) * 5.2) var(--mx-label-tint);
}
.mx-label__rule { width: calc(var(--mx-u) * 22); height: calc(var(--mx-u) * 1); background: var(--mx-label-tint); opacity: 0.6; }

/* Modern: colour block on top */
.mx-label--modern { display: flex; flex-direction: column; }
.mx-label__band { flex: 0 0 46%; display: flex; align-items: center; padding: 0 calc(var(--mx-u) * 8); background: var(--mx-label-tint); }
.mx-label--modern .mx-label__brand { font-family: var(--mx-font-ui); font-weight: 800; letter-spacing: -0.01em; color: var(--mx-white); font-size: calc(var(--mx-u) * 14); }
.mx-label__lower { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--mx-u) * 2); padding: 0 calc(var(--mx-u) * 8); }

/* Botanical: leaf mark, left aligned, tint rule at the bottom */
.mx-label--botanical {
	display: flex; flex-direction: column; justify-content: center;
	gap: calc(var(--mx-u) * 2);
	padding: calc(var(--mx-u) * 6) calc(var(--mx-u) * 8);
	border-bottom: calc(var(--mx-u) * 5) solid var(--mx-label-tint);
}
.mx-label__leaf { width: calc(var(--mx-u) * 13); height: calc(var(--mx-u) * 13); color: var(--mx-label-tint); }
.mx-label--botanical .mx-label__brand { font-weight: 500; font-size: calc(var(--mx-u) * 14); }

/* Bold: full tint */
.mx-pack .mx-label--bold {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: calc(var(--mx-u) * 3);
	text-align: center;
	padding: calc(var(--mx-u) * 6);
	background: var(--mx-label-tint);
}
.mx-label--bold .mx-label__brand { font-family: var(--mx-font-ui); font-weight: 800; letter-spacing: -0.02em; color: var(--mx-white); font-size: calc(var(--mx-u) * 17); }
.mx-label--bold .mx-label__product { color: var(--mx-white); font-weight: 600; font-size: calc(var(--mx-u) * 7.5); opacity: 0.92; }
.mx-label--bold .mx-label__net { color: var(--mx-white); opacity: 0.85; }