/**
 * JSD product image fallback
 *
 * The monogram in a hairline frame, with a short caption underneath. Pure
 * HTML/CSS — no SVG file, no icon font, no image request, no library.
 *
 * Three sizes driven by three custom properties, so the compact tile, the full
 * card and the single deal page are the same object at different scales rather
 * than three lookalikes that will drift apart.
 *
 * It sits inside whatever aspect-ratio frame the host component already has and
 * never sets one of its own, so nothing about layout changes on the day real
 * product photography arrives.
 */

.jsd-media-fallback {
	--jsd-fb-box: 52px;
	--jsd-fb-mark: 15px;
	--jsd-fb-label: 9px;
	--jsd-fb-gap: 12px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--jsd-fb-gap);
	box-sizing: border-box;
	max-width: 100%;
	padding: 2px;
	text-align: center;
	/*
	 * Never grows past the frame it is centred in. On the narrowest tiles the
	 * caption wraps rather than the mark shrinking, which keeps the monogram a
	 * constant size across a grid.
	 */
	overflow: hidden;
}

.jsd-media-fallback * {
	box-sizing: border-box;
}

/*
 * The frame. A 3px radius against the card's 2px, so it reads as a picture
 * mount inside the tile rather than as a second card.
 */
.jsd-media-fallback .jsd-media-fallback__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--jsd-fb-box);
	height: var(--jsd-fb-box);
	border: 1px solid #e4e4e4;
	border-radius: 3px;
	background: #ffffff;
	color: #cfcfcf;
	font-size: var(--jsd-fb-mark);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Optical centring: the tracking on the last letter pushes the word left. */
	text-indent: 0.08em;
}

/*
 * Quiet, but not unreadable. #767676 is the site's mid-grey and clears AA on
 * every JSD ground (4.54:1 on white, 4.13:1 on #f4f4f4), so the caption is
 * legible without competing with the product title below it.
 */
.jsd-media-fallback .jsd-media-fallback__label {
	max-width: 24ch;
	color: #767676;
	font-size: var(--jsd-fb-label);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Sizes ------------------------------------------------------------------- */

/*
 * Compact tiles: four-up on desktop, two-up on a phone. Sized so the mark
 * occupies roughly the same share of its frame as on the full card — a little
 * smaller in absolute terms, identical in proportion, so a page that mixes
 * both reads as one system.
 */
.jsd-media-fallback--sm {
	--jsd-fb-box: 48px;
	--jsd-fb-mark: 14px;
	--jsd-fb-label: 8.5px;
	--jsd-fb-gap: 10px;
}

/* Full cards on the homepage merchandising rows. */
.jsd-media-fallback--md {
	--jsd-fb-box: 52px;
	--jsd-fb-mark: 15px;
	--jsd-fb-label: 9px;
	--jsd-fb-gap: 12px;
}

/* The single deal page, where the frame is the largest thing on screen. */
.jsd-media-fallback--lg {
	--jsd-fb-box: 88px;
	--jsd-fb-mark: 26px;
	--jsd-fb-label: 10px;
	--jsd-fb-gap: 18px;
}

/*
 * Below the four-up breakpoint a compact tile loses roughly a third of its
 * width. The caption is the part that suffers, so it drops a step and tightens
 * rather than wrapping to three lines.
 */
@media (max-width: 600px) {
	.jsd-media-fallback--sm {
		--jsd-fb-box: 36px;
		--jsd-fb-mark: 11px;
		--jsd-fb-label: 7.5px;
		--jsd-fb-gap: 8px;
	}

	.jsd-media-fallback--sm .jsd-media-fallback__label {
		letter-spacing: 0.1em;
	}

	.jsd-media-fallback--lg {
		--jsd-fb-box: 66px;
		--jsd-fb-mark: 19px;
		--jsd-fb-label: 9px;
		--jsd-fb-gap: 14px;
	}
}