/**
 * Shared structure for the immersive single pages (brand CPT + sales-point CPT).
 *
 * Both pages share one body/lede/sidebar/heading skeleton so the producer-side
 * surfaces stay one visual family and never drift apart again. Each page maps its
 * own per-row accent colour onto --mp-single-accent (see the page stylesheet), so
 * the shared section heading picks up the brand colour on a brand page and the
 * store colour on a sales-point page. The hero header stays page-specific.
 */

/* Body: single centred column with comfortable bottom space. */
.mp-single__body {
	max-width: var(--single-content-width);
	margin: 0 auto;
	padding: 36px 24px 72px;
}

/* Lede: the prose and a sticky info/contact card sit side by side, filling the
   space the reading-measure prose would otherwise leave empty. The card sticks
   while the prose scrolls; on narrow screens it stacks under the prose. */
.mp-single__lede {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 40px;
	align-items: start;
}

.mp-single__lede-main {
	min-width: 0;
}

.mp-single__aside {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	padding: 20px;
	background: #faf8f3;
	border: 1px solid #e6e2d8;
	border-radius: 10px;
}

/* The card frames its contents, so each section drops its own top separator;
   adjacent sections inside the card get a single hairline divider between them. */
.mp-single__aside-section {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.mp-single__aside-section + .mp-single__aside-section {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e6e2d8;
}

@media (max-width: 860px) {

	.mp-single__lede {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.mp-single__aside {
		position: static;
	}
}

/* Section heading inside the body, in the page's own accent colour. */
.mp-single__section-title {
	font-size: 1.3rem;
	margin: 0 0 16px;
	color: var(--mp-single-accent, var(--mp-forest, #2f5d44));
}

/* Full-width section below the lede (brand: Products / Where to buy; SP: Brands
   available here). A hairline rule above every one keeps the rhythm consistent. */
.mp-single__section {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #e6e2d8;
}

/* Pill links — outlined, rounded action links used inside the sidebar card
   (Contact details, social "Follow us") on both producer-side pages. Coloured
   by the page's --mp-single-accent. */
.mp-single__pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mp-single__pill {
	padding: 6px 14px;
	border: 1px solid var(--mp-single-accent, var(--mp-forest, #2f5d44));
	border-radius: 999px;
	color: var(--mp-single-accent, var(--mp-forest, #2f5d44));
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
}

.mp-single__pill:hover,
.mp-single__pill:focus {
	background: var(--mp-single-accent, var(--mp-forest, #2f5d44));
	color: #fff;
}

/* Labelled facts row — a horizontal strip of "small-caps label above value"
   facts that sits below the hero and above the lede on every single page (brand:
   Region / Country / Founded; product: Origin / Producer / Distiller). The
   mp-brand__facts alias keeps the brand template working with no markup change. */
.mp-single__facts,
.mp-brand__facts {
	list-style: none;
	margin: 0 0 28px;
	padding: 0 0 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	border-bottom: 1px solid #e6e2d8;
}

.mp-single__facts li,
.mp-brand__facts li {
	display: flex;
	flex-direction: column;
	font-size: 1rem;
	font-weight: 600;
}

.mp-single__fact-label,
.mp-brand__fact-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #8a8576;
	font-weight: 600;
	margin-bottom: 2px;
}

/* Outbound marker: the small "opens an external site in a new tab" glyph
   (marketplace_extlink_icon()) trailing every target="_blank" link. */
.mp-extlink-icon {
	margin-left: 0.4rem;
	vertical-align: -0.125em;
	flex-shrink: 0;
}