/* Landing hero

   Fills the landing view exactly: the hero is precisely the space left
   under the announcement bar and header, so the next section never bleeds
   through and there is never dead space inside it.

   Every dimension below is written as a multiple of --mw-scale, which is
   1px at the 1440x900 design anchor. That is what makes the composition
   identical at 720p, 1080p, 1440p, 4K and beyond instead of a 700px block
   marooned on a large display. See tokens.css for the derivation.

   The earlier version capped the height at 700px, which left 622px of the
   next section showing at 2560x1440 and a 153px dead gap inside the copy
   column, while the headline stayed a fixed 92px at every size. */
.mw-hero {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	/* The hairline this section draws at its own bottom edge is part of the
	   118 units of chrome, hence the -1px. */
	height: calc(100dvh - var(--mw-chrome-h) - 1px);
	border-bottom: 1px solid var(--line);
}

.mw-hero__copy {
	padding:
		calc(48 * var(--mw-scale))
		calc(88 * var(--mw-scale))
		calc(48 * var(--mw-scale))
		calc(48 * var(--mw-scale));
	border-right: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	min-height: 0;
	/* Long words must break rather than widen the column at any scale. */
	overflow-wrap: anywhere;
}

/* On a narrow desktop window the copy column is only ~400px wide, and the
   88-unit right padding was costing the headline a fourth line. Reclaiming
   it keeps the headline at three lines all the way down to the 901px
   boundary, so the composition reads the same there as at 1440. */
@media (max-width: 1279px) {
	.mw-hero__copy {
		padding-right: calc(48 * var(--mw-scale));
	}
}

.mw-hero__eyebrow,
.mw-hero__copy .mw-eyebrow {
	font-size: calc(11 * var(--mw-scale));
}

.mw-hero__headline {
	font-family: var(--font-display);
	font-size: calc(92 * var(--mw-scale));
	line-height: 0.94;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: calc(20 * var(--mw-scale)) 0 calc(26 * var(--mw-scale));
	text-wrap: balance;
}

.mw-hero__body {
	max-width: 44ch;
	font-size: calc(17 * var(--mw-scale));
	line-height: 1.7;
	color: var(--ink-soft);
	margin-bottom: calc(34 * var(--mw-scale));
}

.mw-hero__ctas {
	display: flex;
	align-items: center;
	gap: calc(26 * var(--mw-scale));
	margin-bottom: auto;
}

/* The hero's own buttons scale with the composition; the shared .mw-btn
   sizing elsewhere on the page is left alone. */
.mw-hero__ctas .mw-btn {
	padding: calc(18 * var(--mw-scale)) calc(34 * var(--mw-scale));
	font-size: calc(12 * var(--mw-scale));
}

.mw-hero__ctas .mw-link {
	font-size: calc(12 * var(--mw-scale));
}

.mw-hero__stats {
	border-top: 1px solid var(--line);
	padding-top: calc(16 * var(--mw-scale));
	margin-top: calc(34 * var(--mw-scale));
	font-family: var(--font-mono);
	font-size: calc(11 * var(--mw-scale));
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

.mw-hero__media {
	position: relative;
	overflow: hidden;
	min-height: 0;
}

/* Fill the cell rather than imposing an aspect ratio on it. The 8:7 crop
   still governs which part of the shot is delivered (see the shoot list in
   the handoff README); it just no longer drives page height. */
.mw-hero__media > .mw-placeholder {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	height: 100%;
}

.mw-hero__tag {
	position: absolute;
	top: calc(20 * var(--mw-scale));
	right: calc(20 * var(--mw-scale));
	background: var(--paper);
	border: 1px solid var(--ink);
	padding: calc(12 * var(--mw-scale)) calc(16 * var(--mw-scale));
	font-family: var(--font-mono);
	font-size: calc(11 * var(--mw-scale));
	letter-spacing: 0.06em;
	text-transform: uppercase;
	z-index: 1;
}

/* Shop the complete look */
.mw-look {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 0;
}

.mw-look__copy {
	padding: 56px 64px;
}

.mw-look__title {
	font-family: var(--font-display);
	font-size: 46px;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: var(--space-4) 0 var(--space-5);
}

.mw-look__list {
	border-top: 1px solid var(--line);
	margin-top: var(--space-8);
}

.mw-look__row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--line);
}

/* minmax(0, 1fr) above rather than 1fr: a plain fr track keeps its
   automatic minimum, so a long product name refused to wrap and pushed the
   row (and with it the whole page) 58px wider than a 320px phone. */
.mw-look__row > * {
	min-width: 0;
}

.mw-look__thumb {
	width: 56px;
	height: 56px;
}

.mw-look__name {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.mw-look__variant {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ink-mute);
	text-transform: uppercase;
}

.mw-look__price {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--ink);
}

.mw-look__cta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	margin-top: var(--space-6);
	/* The CTA carries a full price and the save label sits beside it; on a
	   narrow phone they stack rather than forcing the row wide. */
	flex-wrap: wrap;
}

.mw-look__cta-row .mw-btn {
	max-width: 100%;
	white-space: normal;
	text-align: center;
}

.mw-look__save {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--olive);
	line-height: 1.6;
}

/* Three-column proposition row */
.mw-props {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.mw-props__cell {
	padding: 56px 40px;
	border-right: 1px solid var(--line);
}

.mw-props__cell:last-child {
	border-right: none;
}

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

.mw-props__title {
	font-family: var(--font-display);
	font-size: 24px;
	color: var(--ink);
	margin-bottom: var(--space-3);
}

.mw-props__body {
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-soft);
}

/* Journal */
.mw-journal {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-8);
}

.mw-journal__date {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin: var(--space-4) 0 var(--space-2);
}

.mw-journal__title {
	font-family: var(--font-display);
	font-size: 28px;
	line-height: 1.15;
	max-width: 26ch;
	color: var(--ink);
}

/* Product detail page */
.mw-pdp {
	display: grid;
	grid-template-columns: 1fr 520px;
}

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

.mw-pdp__hero-frame {
	position: relative;
}

.mw-pdp__zoom-hint {
	position: absolute;
	right: var(--space-4);
	bottom: var(--space-4);
	background: var(--paper);
	border: 1px solid var(--line-strong);
	padding: 8px 12px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mw-pdp__detail-crops {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.mw-pdp__detail-crops .mw-placeholder:first-child {
	border-right: 1px solid var(--line);
}

.mw-pdp__info {
	padding: 56px 44px 64px;
}

.mw-pdp__breadcrumb {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: var(--space-5);
}

.mw-pdp__breadcrumb .mw-sku {
	color: var(--olive);
}

.mw-pdp__name {
	font-family: var(--font-display);
	font-size: 46px;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin-bottom: var(--space-4);
}

.mw-pdp__price-row {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	font-size: 22px;
	margin-bottom: var(--space-3);
}

.mw-pdp__meta-line {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--ink-mute);
	margin-bottom: var(--space-6);
}

.mw-pdp__desc {
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-soft);
	margin-bottom: var(--space-8);
}

.mw-pdp__option {
	border-top: 1px solid var(--line);
	padding-top: var(--space-5);
	margin-top: var(--space-5);
}

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

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

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

.mw-swatch-row,
.mw-size-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.mw-size-row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-3);
}

.mw-pdp__add-row {
	display: flex;
	align-items: stretch;
	gap: var(--space-3);
	margin-top: var(--space-8);
}

.mw-pdp__add-row .mw-btn {
	/* min-width: 0 is what lets the button shrink; a plain flex: 1 keeps
	   its automatic minimum and the long "Add to bag, ₹4,290" label then
	   pushes the whole row past a narrow phone. */
	flex: 1 1 0;
	min-width: 0;
	height: 56px;
	padding: 0 var(--space-4);
	font-size: 12px;
	white-space: normal;
	line-height: 1.2;
	text-align: center;
}

.mw-pdp__add-row > * {
	min-width: 0;
	flex-shrink: 0;
}

.mw-wishlist-btn {
	width: 56px;
	height: 56px;
	border: 1px solid var(--line-strong);
	background: transparent;
	font-size: 16px;
}

.mw-pdp__accordions {
	margin-top: var(--space-8);
	border-top: 1px solid var(--line);
}

.mw-pdp__reassurance {
	border-top: 1px solid var(--line);
	padding-top: var(--space-5);
	margin-top: var(--space-8);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-mute);
	display: flex;
	gap: var(--space-6);
	flex-wrap: wrap;
}

/* Wear it with */
.mw-wear-it-with {
	padding: var(--space-12) var(--gutter-desktop);
	border-bottom: 1px solid var(--line);
}

/* Reviews */
.mw-reviews {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	padding: var(--space-12) var(--gutter-desktop);
	gap: var(--space-10);
}

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

.mw-reviews__summary-title {
	font-family: var(--font-display);
	font-size: 34px;
	margin-bottom: var(--space-4);
}

.mw-reviews__avg {
	font-family: var(--font-mono);
	font-size: 40px;
	color: var(--ink);
	margin-bottom: var(--space-4);
}

.mw-reviews__bar-row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: 6px;
}

.mw-reviews__bar-track {
	flex: 1;
	height: 4px;
	background: var(--line);
}

.mw-reviews__bar-fill {
	height: 4px;
	background: var(--ink);
}

.mw-reviews__fit-stat {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--olive);
	margin: var(--space-6) 0;
}

.mw-review {
	border-bottom: 1px solid var(--line);
	padding: var(--space-6) 0;
}

.mw-review__meta {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: var(--space-3);
}

.mw-review__headline {
	font-family: var(--font-display);
	font-size: 20px;
	margin-bottom: var(--space-3);
}

.mw-review__body {
	max-width: 64ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-soft);
}

.mw-review__photos {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-4);
	overflow-x: auto;
}

.mw-review__photos .mw-placeholder {
	min-width: 0;
	flex: 0 0 200px;
	width: 200px;
}