.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;
}

@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;
	}

	.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;
	}
}