/**
 * Single sales-point page (single-gdv_cm_sales_point.php, workstream ⑤) + the
 * "open now" pill shared with the store grid.
 */

.mp-sp {
	/* Per-store colours arrive as --sp-color / --sp-color-2 inline on .mp-sp. */
	--sp-color: var(--mp-forest, #2f5d44);
	--sp-color-2: var(--mp-amber, #c98a2b);
	/* Feeds the shared .mp-single__section-title heading colour (single-common.css). */
	--mp-single-accent: var(--sp-color);
}

/* Immersive header — mirrors .mp-brand__hero and shares the same clamp height so
   both producer-side surfaces feel like one family. Always uses the dark veil
   (white text); the SP has no per-row overlay choice. */
.mp-sp__hero {
	position: relative;
	min-height: clamp(360px, 46vh, 620px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--sp-color);
}

.mp-sp__hero--plain {
	min-height: 220px;
}

@media (max-width: 680px) {

	.mp-sp__hero {
		min-height: clamp(240px, 42vh, 360px);
	}
}

.mp-sp__hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.mp-sp__hero-overlay {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 48px 24px 28px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
}

.mp-sp__hero--plain .mp-sp__hero-overlay {
	background: none;
}

.mp-sp__hero-inner {
	max-width: var(--single-content-width);
	margin: 0 auto;
	color: #fff;
}

.mp-sp__logo {
	max-height: 72px;
	max-width: 220px;
	margin-bottom: 12px;
	background: #fff;
	border-radius: 8px;
	padding: 6px 10px;
}

.mp-sp__type {
	margin: 0;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
}

/* The theme styles h1 directly, so the title never inherits the hero-inner
   colour — set it explicitly, with a shadow that keeps it legible over any image. */
.mp-sp__title {
	margin: 4px 0 10px;
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
	line-height: 1.1;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.mp-sp__hero--plain .mp-sp__title {
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.mp-sp__open {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
}

.mp-sp__open--yes {
	background: #e3f3e6;
	color: #1c6b34;
}

.mp-sp__open--no {
	background: #f3e3e3;
	color: #8a2b2b;
}

.mp-sp__open--appointment {
	background: #eef0f4;
	color: #44506b;
}

.mp-sp__by-appointment {
	margin: 0;
	font-style: italic;
	color: #44506b;
}

/* Body, lede grid, sticky info card and the section heading are shared with the
   brand page (single-common.css: .mp-single__body / __lede / __aside /
   __aside-section / __section-title). Only SP-specific content styling is below. */

/* Operator one-liner above the description: the prominent lead, so the eye lands
   on the standfirst before the body prose. Mirrors .mp-brand__intro. */
.mp-sp__intro {
	max-width: 68ch;
	margin: 0 0 1rem;
	font-size: 1.25rem;
	line-height: 1.5;
	font-weight: 500;
	color: #2c2c2c;
}

/* Store description: basic-HTML prose at the theme's default body size (the intro
   carries the prominent styling, not this), aligned with .mp-brand__description. */
.mp-sp__description {
	max-width: 68ch;
	line-height: 1.7;
	color: #333;
}

.mp-sp__description p,
.mp-sp__description ul,
.mp-sp__description ol {
	margin: 0 0 0.9em;
}

.mp-sp__description :last-child {
	margin-bottom: 0;
}

.mp-sp__description ul,
.mp-sp__description ol {
	padding-left: 1.4em;
}

.mp-sp__description a {
	color: var(--mp-single-accent);
}

.mp-sp__address {
	font-style: normal;
	line-height: 1.6;
	margin-bottom: 14px;
}

/* Brands available here — a full-width showcase below the lede, mirroring the
   brand page's "Where to buy". The top separator comes from the shared
   .mp-single__section rule (single-common.css). */
.mp-sp__empty {
	margin: 0;
	color: var(--text-secondary, #6b6456);
	line-height: 1.6;
}

/* Brands available here: a card grid mirroring the brand page's "Where to buy"
   store card (store-card.css) — logo beside the name, a short intro, and a
   Discover link pinned to the card foot so tiles in a row align. */
.mp-sp__brand-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 320px ), 460px ) );
	justify-content: center;
	gap: 1.25rem;
	margin-top: 1rem;
}

.mp-sp__brand-card {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 1.6rem;
	background: var( --bg-secondary, #f7f5ef );
	border: 1px solid var( --border-light, rgba(0, 0, 0, 0.10) );
	border-radius: var( --radius-md, 10px );
}

.mp-sp__brand-card-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.mp-sp__brand-card-logo-link {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.mp-sp__brand-card-logo {
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	object-fit: contain;
	background: #fff;
	border: 1px solid var( --border-light, #eee );
	border-radius: 8px;
	padding: 4px;
}

.mp-sp__brand-card-name {
	font-size: 1.4rem;
	font-weight: 700;
	color: var( --text-primary, #2c2c2c );
	line-height: 1.25;
}

.mp-sp__brand-card-intro {
	margin: 0;
	font-size: 1.0625rem;
	color: var( --text-secondary, #6b6456 );
	line-height: 1.5;
}

.mp-sp__brand-card-cta {
	display: inline-block;
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: var( --mp-single-accent );
	text-decoration: none;
	transition: color 0.15s ease;
}

.mp-sp__brand-card-cta:hover,
.mp-sp__brand-card-cta:focus {
	text-decoration: underline;
}

/* Store grid (page-stores.php) */
.mp-stores-section {
	margin: 0 0 48px;
}

.mp-stores-section__title {
	font-size: 1.4rem;
	margin: 0 0 18px;
}