/*
 * Shopfront (styles/shopfront.json): what the tokens cannot say. Loaded on
 * the Shopfront page only, every rule keyed off html[data-style="shopfront"]
 * (block stylesheets print after the theme's; see night.css). Pennant
 * Prints speaks in heavy, tight Plus Jakarta Sans on white and pale grey;
 * the colour belongs to the prints, one accent each, so the page itself
 * stays black and white with a deep coral for small text (5.6:1).
 */

/* The name carries a pennant: a small coral flag before it. */
html[data-style="shopfront"] .st-brand__name {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

html[data-style="shopfront"] .st-brand__name::before {
	content: "";
	width: 16px;
	height: 18px;
	background: var(--st-coral);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

html[data-style="shopfront"] .st-brand__tag {
	padding-left: 26px;
}

/* Labels: a small outlined pill, deep coral capitals. */
html[data-style="shopfront"] .wu-chip.st-label {
	border-color: var(--wu-line-strong);
	background: var(--wu-ground);
	color: var(--wu-accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

html[data-style="shopfront"] .wu-label.st-label {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
}

html[data-style="shopfront"] .wu-h2 {
	font-weight: 800;
	letter-spacing: -0.03em;
}

/* The hero grid: the prints on pale grey mounts. */
html[data-style="shopfront"] .st-products__title {
	max-width: 13ch;
}

html[data-style="shopfront"] .st-product__media {
	background: var(--wu-surface);
}

/* The collection: the shelf on a pale grey band, white cards on it. */
html[data-style="shopfront"] .st-products--shelf {
	background: var(--wu-surface);
}

html[data-style="shopfront"] .st-products--shelf::before {
	display: none;
}

html[data-style="shopfront"] .st-products--shelf .st-product__media {
	background: var(--wu-surface-2);
}

/* Our story and the studio: rounded photographs, figures heavy. */
html[data-style="shopfront"] .st-facts__figure {
	font-weight: 800;
	letter-spacing: -0.03em;
}

html[data-style="shopfront"] .st-steps__num {
	color: var(--wu-accent);
	font-family: var(--wu-display);
	font-size: 15px;
	font-weight: 800;
}

/* Delivery and returns: the price on white, a black button. */
html[data-style="shopfront"] .st-price {
	border-color: var(--wu-line);
	background: var(--wu-surface);
	box-shadow: none;
}

html[data-style="shopfront"] .st-price__figure {
	font-weight: 800;
	letter-spacing: -0.03em;
}

html[data-style="shopfront"] .st-hours {
	margin-top: 32px;
}

html[data-style="shopfront"] .st-ticks__tick {
	background: #fbe3dd;
	color: var(--wu-accent);
}

/* The call: a black band, white on it. */
html[data-style="shopfront"] .st-close {
	--wu-text: #fff;
	--wu-muted: #c9c9d1;
	--wu-line: rgba(255, 255, 255, 0.16);
	--wu-line-strong: rgba(255, 255, 255, 0.4);
	--wu-accent: #ff8a70;
	--wu-button-face: #fff;
	--wu-button-text: #14141a;
	--wu-ghost-border-hover: #fff;
	--wu-ghost-face-hover: rgba(255, 255, 255, 0.08);
	background: #14141a;
	border-top: 0;
}

html[data-style="shopfront"] .st-close .wu-chip.st-label {
	border-color: rgba(255, 255, 255, 0.3);
	background: transparent;
}

html[data-style="shopfront"] .st-close__title {
	font-weight: 800;
	letter-spacing: -0.03em;
}