.mw-container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--gutter-desktop);
}

/* Sticky footer shell.

   The page is a full-height flex column so a thin page (an empty cart, a
   404, a policy page with three paragraphs) still pushes the footer to the
   bottom of the viewport instead of leaving canvas-coloured dead space
   beneath it. #mw-main takes the slack; the footer never shrinks. */
.mw-page {
	background: var(--paper);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	padding-bottom: var(--mw-tabbar-h);
}

#mw-main {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

/* Templates opt into vertical centring for genuinely empty states
   (404, empty cart, no search results) so the copy sits optically
   centred in the slack rather than clinging to the header. */
#mw-main > .mw-fill,
#mw-main > .mw-woo-page > .mw-fill {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mw-footer {
	flex-shrink: 0;
	margin-top: auto;
}

/* Announcement bar

   An explicit height rather than padding, so the chrome arithmetic that
   the hero depends on (40 + 78 = 118 scale units) is exact rather than
   dependent on how the 11px mono line-height happens to round. */
.mw-announcement {
	display: grid;
	place-items: center;
	height: calc(40 * var(--mw-chrome-scale));
	background: var(--ink);
	color: var(--paper);
	text-align: center;
	font-family: var(--font-mono);
	font-size: calc(11 * var(--mw-chrome-scale));
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0 var(--space-4);
}

/* Header */
.mw-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: calc(78 * var(--mw-chrome-scale));
	border-bottom: 1px solid var(--line);
	padding: 0 var(--gutter-desktop);
	background: var(--paper);
}

.mw-header__nav ul {
	display: flex;
	align-items: center;
	gap: calc(34 * var(--mw-chrome-scale));
}

.mw-header__nav a {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: calc(12 * var(--mw-chrome-scale));
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
	transition: color var(--transition-fast);
}

.mw-header__nav a:hover {
	color: var(--olive);
}

.mw-header__wordmark {
	font-family: var(--font-display);
	font-size: calc(22 * var(--mw-chrome-scale));
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink);
	text-align: center;
	white-space: nowrap;
}

.mw-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: calc(26 * var(--mw-chrome-scale));
}

.mw-header__actions a,
.mw-header__actions button {
	background: none;
	border: none;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: calc(12 * var(--mw-chrome-scale));
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	gap: calc(4 * var(--mw-chrome-scale));
}

.mw-header__actions sup {
	font-family: var(--font-mono);
	font-size: calc(10 * var(--mw-chrome-scale));
	top: -0.6em;
}

.mw-header__hamburger {
	display: none;
}

.mw-header--mobile {
	display: none;
}

/* Footer */
.mw-footer {
	background: var(--ink);
	color: var(--paper);
	padding: 64px var(--gutter-desktop) 36px;
}

.mw-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--space-10);
	padding-bottom: var(--space-11);
}

.mw-footer__wordmark {
	font-family: var(--font-display);
	font-size: 22px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: var(--space-5);
}

.mw-footer__newsletter {
	display: flex;
	align-items: flex-end;
	gap: var(--space-3);
	border-bottom: 1px solid var(--line-dark);
	padding-bottom: var(--space-3);
	margin-top: var(--space-6);
}

.mw-footer__newsletter input {
	flex: 1;
	background: none;
	border: none;
	color: var(--paper);
	font-family: var(--font-body);
	font-size: 14px;
	padding: var(--space-2) 0;
}

.mw-footer__newsletter input::placeholder {
	color: var(--ink-dim);
}

.mw-footer__newsletter button {
	background: none;
	border: none;
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.mw-footer__col-header {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-dim-2);
	margin-bottom: var(--space-5);
}

.mw-footer__col ul li {
	margin-bottom: var(--space-3);
}

.mw-footer__col a {
	font-size: 14px;
	color: var(--paper);
	transition: color var(--transition-fast);
}

.mw-footer__col a:hover {
	color: var(--ink-dim-2);
}

.mw-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid var(--line-dark);
	padding-top: var(--space-5);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--ink-dim-2);
}

.mw-footer__bottom-links {
	display: flex;
	gap: var(--space-5);
}

/* Section rhythm */
.mw-section {
	border-bottom: 1px solid var(--line);
}

.mw-section__inner {
	padding: var(--space-12) var(--gutter-desktop);
}

.mw-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--space-8);
}

.mw-section__title {
	font-family: var(--font-display);
	font-size: 34px;
	line-height: 1;
	color: var(--ink);
}

.mw-section__count {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

/* Mobile menu drawer + filter sheet + tab bar: base state, positioned/hidden by default */
.mw-drawer,
.mw-sheet {
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
}

.mw-drawer.is-open,
.mw-sheet.is-open {
	visibility: visible;
}

.mw-tabbar {
	display: none;
}

.mw-shop-filter-bar {
	display: none;
}