/**
 * Store ("Où acheter" / where-to-buy) card — shared between the single product
 * page (rendered client-side by single-product.js) and the single brand page
 * (rendered server-side). One markup contract, one stylesheet, so both surfaces
 * render the identical card: store logo, type label, an optional "Direct from the
 * producer" pill, name, address, countries and a "Discover this shop" link.
 *
 * House style: a uniform card border (no coloured left rule); the only colour
 * accent is on the small type label.
 */

.mp-sp-grid {
	display: grid;
	/* auto-fit (not auto-fill) so a handful of stores stretch to fill the row
	   instead of stranding narrow cards beside empty tracks. min(100%, 320px)
	   prevents overflow on small screens; the row is left-aligned so the first
	   card starts at the left edge rather than floating centred. */
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 320px ), 460px ) );
	justify-content: start;
	gap: 1.25rem;
	margin-top: 1rem;
}

.mp-sp-card {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 1.6rem;
	background: var( --bg-secondary );
	border: 1px solid var( --border-light );
	border-radius: var( --radius-md );
}

/* Header: the store logo beside its name. The name is the headline a visitor
   scans for first ("where can I buy this?"), so it leads the card. */
.mp-sp-card__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.mp-sp-card__logo-link {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

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

.mp-sp-card__name {
	font-size: 1.4rem;
	font-weight: 700;
	color: var( --text-primary );
	line-height: 1.25;
}

/* Tags row: the store/webshop kind + the optional "direct from the producer"
   marker. Secondary to the name — small chips, never the headline. The kind only
   matters to tell a physical store from a webshop, so it reads as a quiet tag. */
.mp-sp-card__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.mp-sp-card__type {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var( --bg-tertiary, rgba( 0, 0, 0, 0.05 ) );
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --text-tertiary );
}

.mp-sp-card--store .mp-sp-card__type {
	color: var( --brand-forest );
}

.mp-sp-card--webshop .mp-sp-card__type {
	color: var( --brand-amber-dark );
}

/* "Direct from the producer" — subtle outline pill, informational only. */
.mp-sp-card__direct {
	padding: 0.15rem 0.6rem;
	border: 1px solid var( --brand-sage-dark );
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var( --brand-sage-dark );
	background: transparent;
}

.mp-sp-card__address {
	font-style: normal;
	font-size: 1.0625rem;
	color: var( --text-secondary );
	line-height: 1.6;
}

.mp-sp-card__countries {
	font-size: 1.0625rem;
	color: var( --text-secondary );
	line-height: 1.5;
}

.mp-sp-card__cta {
	display: inline-block;
	/* auto pins the CTA to the card foot so tiles in a row align (the grid stretches
	   them to equal height); the small top padding is the floor when content is tall. */
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: var( --brand-amber-dark );
	text-decoration: none;
	transition: color 0.15s ease;
}

.mp-sp-card__cta:hover {
	color: var( --brand-amber );
	text-decoration: underline;
}

/* Dark mode */

@media ( prefers-color-scheme: dark ) {

	.mp-sp-card--store .mp-sp-card__type {
		color: var( --brand-forest-light );
	}

	.mp-sp-card--webshop .mp-sp-card__type {
		color: var( --brand-amber-light );
	}

	.mp-sp-card__cta {
		color: var( --brand-amber-light );
	}

	.mp-sp-card__cta:hover {
		color: var( --brand-amber );
	}
}

[data-theme="dark"] .mp-sp-card--store .mp-sp-card__type {
	color: var( --brand-forest-light );
}

[data-theme="dark"] .mp-sp-card--webshop .mp-sp-card__type {
	color: var( --brand-amber-light );
}

[data-theme="dark"] .mp-sp-card__cta {
	color: var( --brand-amber-light );
}

[data-theme="dark"] .mp-sp-card__cta:hover {
	color: var( --brand-amber );
}