/* ============================================================
   19. Price flash overlay  (.ms-price-flash)
   A pill-shaped "Under £XX" badge absolutely positioned over
   a product image.  The parent container must have
   position:relative — use .card__img-wrap for card images or
   the gds-hero__media wrapper for hero images.

   Corner variants (default tr = top-right):
     .ms-price-flash--tr   top-right   (default)
     .ms-price-flash--tl   top-left
     .ms-price-flash--br   bottom-right
     .ms-price-flash--bl   bottom-left

   Site CSS supplies:
     --flash-bg      : pill background colour
     --flash-color   : text colour
     --flash-shadow  : box-shadow (optional)
   Fallback values are set here so the flash renders even
   without site overrides.
   ============================================================ */

/* Relative wrapper - used on card image links and hero media */
.card__img-wrap {
	position: relative;
	display: block;  /* inherits block from <a> replacement */
}

.card__img-wrap > a,
.card__img-wrap > a > img {
	display: block;
	width: 100%;
}

/* Flash pill */
.ms-price-flash {
	position: absolute;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 0.45em 0.9em 0.5em;
	border-radius: 999px;
	line-height: 1.15;
	pointer-events: none;
	user-select: none;
	/* Fallback colours - overridden by site CSS variables */
	background: var(--flash-bg, rgba(220, 38, 38, 0.92));
	color: var(--flash-color, #fff);
	box-shadow: var(--flash-shadow, 0 2px 6px rgba(0,0,0,0.28));
}

.ms-price-flash__line1 {
	display: block;
	font-size: 0.62em;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.9;
	line-height: 1.1;
}

.ms-price-flash__line2 {
	display: block;
	font-size: 1.05em;
	font-weight: 800;
	line-height: 1.15;
	white-space: nowrap;
}

/* Hero flash: bleeds slightly outside the white image box */
/* Corner positions */
.ms-price-flash--tr {
    top: -0.6rem;
    right: -0.6rem;
}

.ms-price-flash--tl {
	top: 0.55rem;
	left: 0.55rem;
}

.ms-price-flash--br {
	bottom: 0.55rem;
	right: 0.55rem;
}

.ms-price-flash--bl {
	bottom: 0.55rem;
	left: 0.55rem;
}

/* Hero image: the gds-hero__media wrapper needs position:relative
   so the overlay can be placed over the product image */
.gds-hero__media {
	position: relative;
}

/* Scale flash size in hero context - larger image = larger badge */
.gds-hero__media .ms-price-flash {
	padding: 0.6em 1.2em 0.65em;
}

.gds-hero__media .ms-price-flash .ms-price-flash__line1 {
	font-size: 0.68em;
}

.gds-hero__media .ms-price-flash .ms-price-flash__line2 {
	font-size: 1.2em;
}

@media (max-width: 640px) {
	.ms-price-flash {
		padding: 0.35em 0.65em 0.4em;
	}

	.ms-price-flash__line1 {
		font-size: 0.56em;
	}

	.ms-price-flash__line2 {
		font-size: 0.9em;
	}

	.ms-price-flash--tr,
	.ms-price-flash--br {
		right: 0.35rem;
	}

	.ms-price-flash--tl,
	.ms-price-flash--bl {
		left: 0.35rem;
	}

	.ms-price-flash--tr,
	.ms-price-flash--tl {
		top: 0.35rem;
	}

	.ms-price-flash--br,
	.ms-price-flash--bl {
		bottom: 0.35rem;
	}
}