/* Buttons */
.mw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 18px 34px;
	border: 1px solid var(--ink);
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
	white-space: nowrap;
}

.mw-btn:hover,
.mw-btn:focus-visible {
	background: var(--olive);
	border-color: var(--olive);
	color: var(--paper);
}

.mw-btn:disabled {
	background: var(--ink-dim-2);
	border-color: var(--ink-dim-2);
	cursor: not-allowed;
}

.mw-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	background: transparent;
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 17px 33px;
	border: 1px solid var(--ink);
	transition: background var(--transition-fast), color var(--transition-fast);
}

.mw-btn-outline:hover,
.mw-btn-outline:focus-visible {
	background: var(--ink);
	color: var(--paper);
}

.mw-link {
	display: inline-block;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	transition: color var(--transition-fast);
}

.mw-link:hover,
.mw-link:focus-visible {
	color: var(--olive);
}

/* Placeholder imagery - replace with real photography.
   Ratios and captions follow the shoot list in design_handoff_mens_wardrobe/README.md. */
.mw-placeholder {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	background: var(--placeholder);
}

.mw-placeholder.is-flat {
	background: var(--placeholder-2);
}

.mw-placeholder.is-striped {
	background: var(--placeholder);
	background-image: repeating-linear-gradient(135deg, rgba(26, 24, 21, 0.055) 0 2px, transparent 2px 10px);
}

.mw-placeholder.is-dark {
	background: var(--ink);
}

.mw-placeholder--r45 { aspect-ratio: 4 / 5; }
.mw-placeholder--r11 { aspect-ratio: 1 / 1; }
.mw-placeholder--r169 { aspect-ratio: 16 / 9; }
.mw-placeholder--r1610 { aspect-ratio: 16 / 10; }
.mw-placeholder--r87 { aspect-ratio: 8 / 7; }

.mw-placeholder img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mw-placeholder__caption {
	position: absolute;
	left: var(--space-3);
	bottom: var(--space-3);
	font-family: var(--font-mono);
	font-size: 10px;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
	max-width: 70%;
}

/* Tags */
.mw-tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--paper);
	background: var(--olive);
	padding: 4px 8px;
}

.mw-tag.is-alert {
	background: var(--alert);
}

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

/* Filter chips */
.mw-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 44px;
	padding: 0 var(--space-3);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line-strong);
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.mw-chip.is-selected,
.mw-chip[aria-pressed="true"],
.mw-chip:has(input:checked) {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

label:has(> input[name="colour[]"]:checked) .mw-swatch {
	outline: 1px solid var(--ink);
	outline-offset: 3px;
}

.mw-chip-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 10px;
}

.mw-chip-pill button {
	background: none;
	border: none;
	color: inherit;
	font-family: inherit;
	font-size: 13px;
	line-height: 1;
	padding: 0;
}

/* Swatches */
.mw-swatch {
	display: inline-block;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line-strong);
	padding: 0;
	background-color: var(--swatch-value, var(--placeholder));
	position: relative;
	vertical-align: top;
}

.mw-swatch[data-swatch="bone"] { --swatch-value: var(--swatch-bone); border-color: var(--line-strong); }
.mw-swatch[data-swatch="olive"] { --swatch-value: var(--swatch-olive); }
.mw-swatch[data-swatch="ink"] { --swatch-value: var(--swatch-ink); }
.mw-swatch[data-swatch="tan"] { --swatch-value: var(--swatch-tan); }
.mw-swatch[data-swatch="navy"] { --swatch-value: var(--swatch-navy); }
.mw-swatch[data-swatch="rust"] { --swatch-value: var(--swatch-rust); }

.mw-swatch.is-selected {
	outline: 1px solid var(--ink);
	outline-offset: 3px;
}

.mw-swatch--sm {
	width: 30px;
	height: 30px;
}

/* Size buttons */
.mw-size-btn {
	height: 52px;
	border: 1px solid var(--line-strong);
	background: transparent;
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.mw-size-btn.is-selected {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

.mw-size-btn.is-oos {
	color: var(--ink-dim-2);
	text-decoration: line-through;
	cursor: not-allowed;
	pointer-events: none;
}

/* Stepper */
.mw-stepper {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--line-strong);
	height: 56px;
}

.mw-stepper button {
	width: 48px;
	background: transparent;
	border: none;
	font-family: var(--font-mono);
	font-size: 16px;
	color: var(--ink);
}

.mw-stepper button:hover {
	background: var(--placeholder-2);
}

.mw-stepper input {
	width: 44px;
	border: none;
	border-left: 1px solid var(--line-strong);
	border-right: 1px solid var(--line-strong);
	text-align: center;
	font-family: var(--font-mono);
	font-size: 14px;
	background: transparent;
	color: var(--ink);
}

/* Accordion */
.mw-accordion-item {
	border-bottom: 1px solid var(--line);
}

.mw-accordion-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: none;
	border: none;
	padding: var(--space-5) 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	text-align: left;
}

.mw-accordion-trigger .mw-accordion-marker {
	font-family: var(--font-mono);
	font-size: 16px;
}

.mw-accordion-panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--transition-fast);
}

.mw-accordion-item.is-open .mw-accordion-panel {
	max-height: 1200px;
}

.mw-accordion-panel__inner {
	padding-bottom: var(--space-5);
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink-soft);
}

/* Spec grid */
.mw-spec-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.mw-spec-cell {
	background: var(--paper);
	padding: 18px;
}

.mw-spec-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: 6px;
}

.mw-spec-value {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--ink);
}

/* Hairline utility rules */
.mw-hairline-top { border-top: 1px solid var(--line); }
.mw-hairline-bottom { border-bottom: 1px solid var(--line); }

.mw-eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--olive);
}

.mw-price {
	font-family: var(--font-mono);
	font-weight: 400;
}

.mw-price del {
	color: var(--ink-dim);
	text-decoration: line-through;
	margin-right: 6px;
}

.mw-save {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--olive);
}