/* Reggal Labels — stock availability labels.
   Kept in the plugin (not Scripts Organizer) so the styling is versioned in git. */

.reggal-label {
	display: inline-block;
	padding: calc(var(--space-xs, 8px) * 0.5) calc(var(--space-xs, 8px) * 0.8);
	font-size: calc(var(--text-m, 16px) - 3px);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--white, #fff);
}

.reggal-label--green {
	background-color: #1f8a4c;
}

.reggal-label--orange {
	background-color: #d97706;
}

.reggal-label--red {
	background-color: #c02626;
}

.reggal-label--grey {
	background-color: #6b7280;
}
/* Special-label colours. Deliberately outside the stock palette so a marketing
   badge never reads as an availability state. Both clear AA against white text:
   purple 8.7:1, blue 6.7:1. */
.reggal-label--purple {
	background-color: #6b21a8;
}

.reggal-label--blue {
	background-color: #1d4ed8;
}


/* The row wrapper. Both chips sit on one line, discount first, but a long pair
   (e.g. "-13%" + "Posledné kusy skladom") can exceed a narrow card. Bound the
   row to the card width and let it wrap to a second line instead of painting
   over the neighbouring card — .reggal-labels--tl is absolutely positioned, so
   an unbounded row does not widen anything, it just overflows. Chips keep
   their own intrinsic (nowrap) width rather than shrinking, so no
   min-width: 0 is needed on them; wrapping, not squeezing, is the fix. */
.reggal-labels {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	max-width: calc(100% - 8px);
	gap: 4px;
}

/* Compact chips for the configurator, which sizes its own UI in fixed pixels
   rather than ACSS type scale — these match the badge this row replaced.

   white-space overrides the nowrap every chip otherwise carries. The row above
   wraps BETWEEN chips, which is enough while each one fits; a single long chip
   ("Posledné kusy skladom") cannot shrink below its intrinsic width and pushed
   straight out of the card on a phone, where the configurator's image cards are
   capped at 27% of the row. Wrapping inside the chip is the only thing that
   helps there. line-height goes back to the 1.2 of the base rule, which this
   block had flattened to 1 — fine on one line, too tight once there are two. */
.reggal-labels--compact .reggal-label {
	padding: 4px 7px;
	font-size: 12px;
	line-height: 1.2;
	white-space: normal;
}

/* Corner placement — top left, where the old discount badge lived. */
.reggal-labels--tl {
	position: absolute;
	top: 4px;
	left: 4px;
	z-index: 2;
}

/* Discount chip. Dark is used in both the archive card and the configurator;
   --sale-action (red) survives only on the product page's price row, a
   separate Bricks element this plugin does not render. */
.reggal-label--sale-dark {
	background-color: var(--base, #282828);
}

.reggal-label--sale-action {
	background-color: var(--action, #e4002b);
}

/* Bare coloured text, no chip — used under an accessory's name. */
.reggal-label--text {
	padding: 0;
	background: none;
	font-size: 12px;
}

.reggal-label--text.reggal-label--green {
	color: #1f8a4c;
}

.reggal-label--text.reggal-label--orange {
	color: #d97706;
}

.reggal-label--text.reggal-label--red {
	color: #c02626;
}

.reggal-label--text.reggal-label--grey {
	color: #6b7280;
}

.reggal-label--text.reggal-label--purple {
	color: #6b21a8;
}

.reggal-label--text.reggal-label--blue {
	color: #1d4ed8;
}

/* The archive card is already position:relative (the sale badge relies on it);
   the product page image wrapper is not. */
.wa-product-main__img-wrapper {
	position: relative;
}