.shop-footer__main {
	background: var(--shop-blue-soft);
	padding: 72px 0;
}

.shop-footer__grid {
	display: grid;
	grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(120px, 1fr));
	gap: 36px;
}

.shop-footer__brand img {
	width: 164px;
	margin-bottom: 16px;
}

.shop-footer__brand p,
.shop-footer__column a {
	margin: 0;
	color: var(--shop-muted);
	font-size: 16px;
	font-weight: 500;
	line-height: 2;
}

.shop-footer__column h3 {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 600;
}

.shop-footer__column ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-footer__bar {
	background: var(--shop-blue);
	color: var(--shop-white);
}

.shop-footer__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Wrap the YouTube icon onto its own line when the (nowrap) policy links no
	 * longer fit beside it on narrow phones (~<450px). Without this, flex shrinks
	 * the icon itself to a sliver instead — the links can't shrink (nowrap text),
	 * so the image absorbs all the squeeze. Only takes effect when the row can't
	 * fit; the desktop bar stays on one line. */
	flex-wrap: wrap;
	gap: 24px;
	padding: 28px 0;
}

.shop-footer__policies {
	display: flex;
	align-items: center;
	gap: 48px;
	flex-wrap: wrap;
}

.shop-footer__policies a {
	font-size: 16px;
	font-weight: 500;
}

/* Never let the icon shrink — it keeps its intrinsic size and wraps to the next
 * line instead (see .shop-footer__bar-inner) rather than being squished.
 * margin-left:auto keeps it pinned to the right edge on whatever line it lands —
 * so when it wraps below the policy links it sticks to the bottom right. */
.shop-footer__youtube {
	flex-shrink: 0;
	margin-left: auto;
}

.shop-footer__youtube img {
	height: 28px;
}

/* "Ship to" region picker — the only region control either app renders, so it
 * has to read identically in both footers. Duplicated verbatim into
 * acadental-storefront/src/styles/globals.css, same as every other
 * .shop-footer__ rule here; the two footers are a 1:1 port and drift the moment
 * one side styles this with its own tokens (it did: scoped CSS here vs Tailwind
 * utilities there, and they rendered visibly different). Label is sized off
 * .shop-footer__policies a (16px/500) so it shares their baseline. */
.shop-footer__region {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 500;
	/* Must be allowed to shrink. This was flex-shrink:0, and at 320px the label
	 * plus a fixed 220px select measured 287px against a 256px content box — the
	 * control ran 31px past the bar. min-width:0 lets the flex item size below its
	 * content; the select below carries the actual shrink. */
	min-width: 0;
	flex: 1 1 auto;
}

/* "Ship to" must never wrap to a second line and orphan the select. */
.shop-footer__region > span {
	white-space: nowrap;
}

.shop-footer__region-select {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	color: #333;
	font-family: inherit;
	/* Same 16px as .shop-footer__policies a — the control sits in their row, so
	 * any difference reads as a mistake. Drops to 10px with them at <=680px. */
	font-size: 16px;
	font-weight: 500;
	padding: 7px 10px;
	/* max-width caps it on desktop; min-width:0 is what actually lets it shrink —
	 * a <select> has an intrinsic min-content width (its longest option, here
	 * "Heard Island And Mcdonald Islands") and will refuse to go narrower without
	 * it, overflowing the footer on any phone. */
	flex: 1 1 auto;
	min-width: 0;
	max-width: 220px;
}

.shop-footer__region-select:disabled {
	cursor: default;
	opacity: 0.6;
}

@media (max-width: 991px) {
	.shop-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.shop-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 990px) {
	.shop-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.shop-footer__brand {
		grid-column: 1 / -1;
	}
}

/* Note: no single-column tier here. The base 2-column layout (<=990px) holds
 * down to 681px, where the 3-up mobile grid below takes over. A former
 * `@media (max-width: 765px) { grid-template-columns: 1fr }` rule left an awkward
 * single-column band at 681–765px (everything stacked, huge gap on the right);
 * removing it keeps the balanced 2-column footer down to the 680px mobile grid. */

@media (max-width: 400px) {
	.shop-footer__policies {
		gap: 14px;
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ============================================================================
 * Shared "clustered" footer — the SITE-WIDE DEFAULT (Nuxt port addition).
 *
 * The marketing site's footer is meant to render identically on every page:
 * brand pinned far left, the four link columns clustered on the right (desktop),
 * a 3-up grid on mobile, and a single-row policy bar. In the PHP source this was
 * DUPLICATED into each page's stylesheet (scoped to body.<page-class>) — and any
 * page that omitted it (e.g. teo.css) fell back to the evenly-spread base grid
 * above, making its footer inconsistent with the rest of the site.
 *
 * Defining it ONCE here, unscoped, makes the footer consistent across ALL pages
 * — current and future — with no per-page override required. These rules sit
 * AFTER the base rules (win on source order) and footer.css loads BEFORE every
 * page's own stylesheet (see nuxt.config.ts), so a page that genuinely needs a
 * different footer can still override it. The existing per-page footer blocks
 * (modupro.css's body.mp-page, etc.) simply reaffirm these same values.
 * ============================================================================ */
@media (min-width: 991px) {
	.shop-footer__grid {
		grid-template-columns: 1fr repeat(4, minmax(0, max-content));
		gap: 100px;
		align-items: start;
	}

	.shop-footer__brand {
		max-width: 370px;
	}
}

@media (max-width: 680px) {
	.shop-footer__main {
		padding: 48px 0;
	}

	.shop-footer__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px 16px;
		align-items: start;
	}

	.shop-footer__brand {
		grid-column: 1 / -1;
		margin-bottom: 4px;
	}

	.shop-footer__column h3 {
		font-size: 16px;
	}

	.shop-footer__column a,
	.shop-footer__brand p {
		font-size: 15px;
		line-height: 1.9;
	}

	.shop-footer__bar-inner {
		gap: 12px;
	}

	.shop-footer__policies {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 14px;
	}

	.shop-footer__policies a {
		font-size: 10px;
		white-space: nowrap;
	}

	/* Scale with the rest of the bar. The links drop 16px -> 10px here and the
	 * YouTube icon 28px -> 22px; leaving this control at its desktop size made it
	 * tower over everything beside it. Same ratio, so it reads as part of the row
	 * rather than a widget dropped into it. */
	.shop-footer__region {
		gap: 6px;
		font-size: 10px;
	}

	.shop-footer__region-select {
		font-size: 10px;
		padding: 4px 6px;
		border-radius: 4px;
		max-width: 150px;
	}

	.shop-footer__youtube img {
		height: 22px;
	}
}

@media (max-width: 380px) {
	.shop-footer__bar-inner {
		flex-wrap: wrap;
		gap: 10px;
	}

	.shop-footer__policies {
		flex-wrap: wrap;
		gap: 8px 12px;
	}
}