/* Breakpoint interpolation: 1440 and 390 are the two anchors */

@media (max-width: 1240px) {
	/* No hero headline override here any more. Above 900px the headline is
	   calc(92 * var(--mw-scale)) and --mw-scale already accounts for both
	   axes, so a second rule at this width would only break the one-number
	   proportional model the hero depends on. */
	.mw-product-grid { grid-template-columns: repeat(2, 1fr); }
	.mw-product-grid.is-landing { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
	.mw-pdp {
		grid-template-columns: 1fr;
	}

	.mw-pdp__gallery {
		border-right: none;
		border-bottom: 1px solid var(--line);
	}

	.mw-reviews {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.mw-shop-layout {
		grid-template-columns: 1fr;
	}

	.mw-shop-sidebar {
		display: none;
	}

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

	/* 900px is this design's compact-layout boundary: it is already where
	   the shop sidebar collapses into the filter sheet and the account rail
	   turns into a tab strip, so the header switches here too.

	   It has to. The desktop header is a `1fr auto 1fr` grid holding a
	   four-item nav, the wordmark and three actions; below roughly 860px
	   that cannot fit, and it was overflowing every page by 100px at iPad
	   portrait width. */
	.mw-page {
		/* Interpolate the gutter between the 48px desktop anchor and the
		   20px mobile one, per the handoff's responsive note. */
		--gutter-desktop: 28px;
		--mw-chrome-h: 95px;
	}

	.mw-page:not(:has(.mw-announcement)) {
		--mw-chrome-h: 56px;
	}

	.mw-header {
		display: none;
	}

	.mw-header--mobile {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) auto;
		align-items: center;
		height: 56px;
		border-bottom: 1px solid var(--line);
		padding: 0 var(--gutter-desktop);
		background: var(--paper);
	}

	.mw-header__hamburger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		background: none;
		border: none;
	}

	.mw-header__hamburger span {
		display: block;
		width: 20px;
		height: 1px;
		background: var(--ink);
	}

	.mw-header__bag {
		justify-self: end;
		font-family: var(--font-mono);
		font-size: 11px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	/* Nothing may drag the page sideways at any compact width, not just on
	   phones. Root causes are fixed individually; this is the guarantee. */
	html,
	body,
	.mw-page {
		max-width: 100%;
		overflow-x: clip;
	}

	.mw-cat-grid,
	.mw-account__nav ul,
	.mw-article__rail ul {
		overflow-x: auto;
	}

	/* Card title/price: stacked, not side by side.
	 *
	 * shop.css lays these out as one flex row - title flex:1, price
	 * white-space:nowrap - which works fine wherever the card has room
	 * to spare. It does not on the two-up mobile grid: a 169px card
	 * minus a variable product's price RANGE ("₹3,290 - ₹4,790", which
	 * cannot shrink) can leave the title as little as 31px to work
	 * with - not enough to fit a single average word, let alone "Neroli
	 * Morning Eau de Toilette". No overflow-wrap value fixes that: the
	 * box itself is too narrow, not merely wrapping badly.
	 *
	 * Stacking price under title removes the competition for width
	 * altogether - title gets the full card width to wrap across
	 * (2-3 lines, normally, at word boundaries), price sits on its own
	 * line below. overflow-wrap: break-word stays as the safety net for
	 * a single word that is still too long for the full card width on
	 * its own (a long SKU-like name), which is now a rare case rather
	 * than the everyday one.
	 */
	.mw-card__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.mw-card__title {
		overflow-wrap: break-word;
	}
}

/* Compact hero.

   Stacks at 900px, the same boundary where the header, the shop sidebar
   and the account rail switch, so the whole layout changes strategy at one
   width instead of drifting through three.

   The proportional model is deliberately abandoned here. A phone is far
   too narrow to hold the desktop composition at any scale, so this is a
   different arrangement built for the same feel: the same Caslon headline,
   mono eyebrow, hairline stat rule and ink CTA, restacked and sized for
   reading at arm's length with 52px touch targets. */
@media (max-width: 900px) {
	.mw-hero {
		grid-template-columns: 1fr;
		height: auto;
		min-height: 0;
	}

	.mw-hero__copy {
		border-right: none;
		border-bottom: 1px solid var(--line);
		padding: var(--space-8) var(--gutter-desktop);
	}

	.mw-hero__headline {
		/* Fluid between the two design anchors rather than scale-driven:
		   below 900px the constraint is column width alone. */
		font-size: clamp(40px, 7.4vw, 64px);
		margin: var(--space-4) 0 var(--space-5);
	}

	.mw-hero__body {
		font-size: 16px;
		margin-bottom: var(--space-6);
	}

	.mw-hero__stats {
		margin-top: var(--space-6);
		padding-top: var(--space-4);
		font-size: 11px;
	}

	.mw-hero__ctas .mw-btn {
		padding: 18px 34px;
		font-size: 12px;
	}

	.mw-hero__ctas .mw-link,
	.mw-hero__tag {
		font-size: 11px;
	}

	.mw-hero__tag {
		top: var(--space-5);
		right: var(--space-5);
		padding: var(--space-3) var(--space-4);
	}

	/* Stacked hero: the media is no longer sharing a row with the copy, so
	   it goes back to carrying its own ratio (a 7:8 vertical crop per the
	   shoot list) instead of filling a cell that now has no height. */
	.mw-hero__media {
		overflow: visible;
	}

	.mw-hero__media > .mw-placeholder {
		position: relative;
		inset: auto;
		height: auto;
		aspect-ratio: 7 / 8;
		max-height: 60dvh;
	}
}

@media (max-width: 840px) {
	.mw-look {
		grid-template-columns: 1fr;
	}

	.mw-look__copy {
		padding: 32px var(--gutter-mobile);
	}
}

@media (max-width: 720px) {
	.mw-container,
	.mw-section__inner,
	.mw-product-area,
	.mw-cat-header,
	.mw-pdp__info,
	.mw-wear-it-with,
	.mw-reviews,
	.mw-footer {
		padding-left: var(--gutter-mobile);
		padding-right: var(--gutter-mobile);
	}

	/* Phone-only chrome. The header swap, the gutter interpolation and the
	   horizontal-overflow guard all live in the 900px block above, which
	   this band inherits; only the tab bar and the tighter type scale are
	   specific to phones. */
	.mw-page {
		--gutter-desktop: var(--gutter-mobile);
		--mw-tabbar-h: calc(64px + env(safe-area-inset-bottom, 0px));
	}

	.mw-header--mobile {
		padding: 0 var(--gutter-mobile);
	}

	.mw-header__wordmark {
		font-size: 14px;
		letter-spacing: 0.16em;
	}

	.mw-announcement {
		height: auto;
		min-height: 34px;
		font-size: 9px;
		padding: 9px var(--gutter-mobile);
		line-height: 1.4;
	}

	.mw-hero__headline { font-size: 44px; line-height: 0.98; }
	.mw-hero__body { font-size: 15px; }

	.mw-hero__ctas {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-3);
	}

	/* Primary actions are 52px on touch, per the handoff's target sizes. */
	.mw-hero__ctas .mw-btn,
	.mw-hero__ctas .mw-btn-outline {
		height: 52px;
		padding: 0 var(--space-5);
	}

	/* The stacked row stretches its children, which dragged the text
	   link's underline across the full column. It stays inline-width and
	   centred under the button. */
	.mw-hero__ctas .mw-link {
		align-self: center;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.mw-section__title { font-size: 26px; }
	.mw-section__inner { padding: 28px var(--gutter-mobile) 36px; }

	.mw-cat-grid {
		grid-auto-flow: column;
		grid-auto-columns: 148px;
		grid-template-columns: none;
		grid-auto-rows: 196px;
		overflow-x: auto;
		gap: var(--space-3);
	}

	.mw-cat-tile--2x2,
	.mw-cat-tile--2x1,
	.mw-cat-tile--3x1 {
		grid-column: span 1;
		grid-row: span 1;
	}

	.mw-cat-swipe-hint {
		font-family: var(--font-mono);
		font-size: 10px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--ink-mute);
		margin-top: var(--space-3);
	}

	.mw-product-grid,
	.mw-product-grid.is-landing {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 12px;
	}

	.mw-product-grid > * {
		min-width: 0;
	}

	.mw-props {
		grid-template-columns: 1fr;
	}

	.mw-props__cell {
		border-right: none;
		border-bottom: 1px solid var(--line);
		padding: 28px var(--gutter-mobile);
	}

	.mw-journal {
		grid-template-columns: 1fr;
	}

	/* The tab bar is reserved by .mw-page now, so the footer no longer needs
	   to pad itself clear of it. */
	.mw-footer {
		padding: 40px var(--gutter-mobile) 36px;
	}

	/* Desktop is one row of four columns (1.4fr 1fr 1fr 1fr). Stacking all
	 * four full-width on mobile - the previous rule here - is correct for
	 * Brand (a paragraph and an email form; it needs the width) but
	 * wasteful for Shop/Help/House, which are just short link lists and
	 * end up as three long single-file columns with a lot of empty
	 * horizontal space next to every line.
	 *
	 * Two columns, addressed by name rather than position: Brand stays
	 * full width above (it still needs the room), Shop runs the full
	 * height of the second row since it is the longest list (nine links,
	 * one per department), and Help/House - six links apiece - split the
	 * second column between them instead of each claiming a full-width
	 * row of their own. Named areas rather than nth-child so the mapping
	 * reads directly off the CSS instead of having to count columns in
	 * footer.php.
	 */
	.mw-footer__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"brand brand"
			"shop  help"
			"shop  house";
		gap: var(--space-8) var(--space-6);
	}

	.mw-footer__col--brand { grid-area: brand; }
	.mw-footer__col--shop { grid-area: shop; }
	.mw-footer__col--help { grid-area: help; }
	.mw-footer__col--house { grid-area: house; }

	.mw-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
	}

	.mw-cat-header {
		grid-template-columns: 1fr;
		padding: 28px var(--gutter-mobile);
	}

	.mw-cat-header__meta {
		text-align: left;
	}

	.mw-cat-header__meta .mw-sort {
		display: none;
	}

	.mw-cat-header__title {
		font-size: 40px;
	}

	.mw-product-area {
		padding: 24px var(--gutter-mobile) 32px;
	}

	.mw-pdp__info {
		padding: 28px var(--gutter-mobile) 96px;
	}

	.mw-pdp__name { font-size: 34px; }

	.mw-size-row {
		grid-template-columns: repeat(3, 1fr);
	}

	.mw-pdp__add-row {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--mw-tabbar-h);
		background: var(--paper);
		border-top: 1px solid var(--line);
		padding: 12px var(--gutter-mobile) 16px;
		margin: 0;
		z-index: 20;
	}

	.mw-pdp__add-row .mw-stepper {
		height: 52px;
	}

	.mw-pdp__add-row .mw-btn {
		height: 52px;
		font-size: 12px;
	}

	.mw-pdp__info {
		padding-bottom: 120px;
	}

	.mw-tabbar {
		display: grid;
	}
}

/* Below ~360px a two-up card cannot hold a name and a price on one line,
   so the card row stacks instead of squeezing the name to nothing. */
@media (max-width: 380px) {
	.mw-card__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.mw-card__price {
		white-space: normal;
	}
}

/* Mobile menu drawer

   Previously `inset: 0` sized the drawer to 100vh - the *large* viewport,
   which on a phone excludes the retractable URL bar. The pinned footer block
   (Account / Track order / Help) therefore sat 60–120px below the visible
   area, and whether it was reachable depended on scroll position, which is
   why options appeared to vanish on some pages and not others.

   The drawer is now a dvh-height flex column: head and foot are fixed, and
   the nav between them scrolls if it cannot fit. Nothing can fall off. */
.mw-drawer {
	background: var(--ink);
	color: var(--paper);
	transform: translateX(-100%);
	transition: transform var(--transition-fast);
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	overscroll-behavior: contain;
}

.mw-drawer.is-open {
	transform: translateX(0);
}

.mw-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	height: 56px;
	padding: 0 var(--gutter-mobile);
	border-bottom: 1px solid var(--line-dark);
}

.mw-drawer__nav {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mw-drawer__close {
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	color: var(--paper);
	font-size: 20px;
}

.mw-drawer__nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) var(--gutter-mobile);
	border-bottom: 1px solid var(--line-dark);
	font-family: var(--font-display);
	font-size: 34px;
	line-height: 1.5;
	color: var(--paper);
	transition: color var(--transition-fast);
}

.mw-drawer__nav a:hover,
.mw-drawer__nav .current-menu-item > a {
	color: var(--ink-dim-2);
}

.mw-drawer__nav .mw-drawer__count {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink-dim-2);
}

.mw-drawer__foot {
	flex-shrink: 0;
	border-top: 1px solid var(--line-dark);
	padding: var(--space-5) var(--gutter-mobile);
	padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-dim-2);
}

.mw-drawer__foot a {
	display: block;
	color: var(--paper);
	min-height: 32px;
	line-height: 32px;
}

.mw-drawer__scrim,
.mw-sheet__scrim {
	position: fixed;
	inset: 0;
	background: rgba(26, 24, 21, 0.45);
	opacity: 0;
	transition: opacity var(--transition-fast);
	pointer-events: none;
}

.mw-drawer.is-open ~ .mw-drawer__scrim,
.mw-sheet.is-open .mw-sheet__scrim {
	opacity: 1;
	pointer-events: auto;
}

/* Mobile filter sheet */
.mw-sheet__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 88%;
	background: var(--paper);
	transform: translateY(100%);
	transition: transform var(--transition-fast);
	display: flex;
	flex-direction: column;
}

.mw-sheet.is-open .mw-sheet__panel {
	transform: translateY(0);
}

.mw-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-5) var(--gutter-mobile);
	border-bottom: 1px solid var(--line);
}

.mw-sheet__body {
	overflow-y: auto;
	padding: var(--space-5) var(--gutter-mobile);
	flex: 1;
}

.mw-sheet__footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: var(--space-3);
	border-top: 1px solid var(--line);
	padding: var(--space-4) var(--gutter-mobile);
	padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}

.mw-sheet__footer > * {
	min-width: 0;
	white-space: normal;
	text-align: center;
}

.mw-sheet__panel,
.mw-sheet__body {
	min-width: 0;
	max-width: 100%;
}

/* The sheet is a flex column inside a fixed overlay; without this the
   body cannot shrink and the panel grows past a narrow phone. */
.mw-sheet__panel {
	display: flex;
	flex-direction: column;
}

.mw-sheet__footer .mw-btn,
.mw-sheet__footer .mw-btn-outline {
	height: 52px;
}

/* Sticky mobile shop filter/sort bar (base display:none lives in layout.css,
   before this file loads, so the 900px override below wins the cascade) */
.mw-shop-filter-bar {
	grid-template-columns: 1fr 1fr;
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.mw-shop-filter-bar button {
	height: 52px;
	background: none;
	border: none;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mw-shop-filter-bar button:first-child {
	border-right: 1px solid var(--line);
}

/* Sticky bottom tab bar */
.mw-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(64px + env(safe-area-inset-bottom, 0px));
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--paper);
	border-top: 1px solid var(--line);
	grid-template-columns: repeat(4, 1fr);
	z-index: 15;
}

.mw-tabbar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.mw-tabbar a.is-active {
	color: var(--ink);
}

.mw-tabbar__glyph {
	width: 16px;
	height: 16px;
	border: 1px solid currentColor;
}

.mw-tabbar__glyph.is-circle { border-radius: 50% !important; }

.mw-tabbar__glyph.is-lines {
	border: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 2px 0;
}

.mw-tabbar__glyph.is-lines span {
	display: block;
	height: 1px;
	background: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.mw-drawer,
	.mw-sheet__panel,
	.mw-drawer__scrim,
	.mw-sheet__scrim,
	.mw-accordion-panel,
	.mw-card__sizes {
		transition: none !important;
	}
}