/**
 * Modern UX for WooCommerce — core design system.
 *
 * Tokens, primitives (button, input, badge, quantity), and the three shared
 * overlays (drawer, modal, search panel) plus toasts.
 *
 * Design rules followed throughout:
 *  - one accent colour, one neutral ramp, no gradients
 *  - borders are hairlines; shadows are used sparingly and never coloured
 *  - motion is short (140–240ms) and always respects prefers-reduced-motion
 *  - specificity is kept to a single class wherever possible
 *  - `!important` appears only where WooCommerce core sets an inline/!important
 *    value we must neutralise, and each use is annotated
 */

/* ==========================================================================
   1. Tokens (fallbacks — the plugin overwrites these inline from settings)
   ========================================================================== */

:root {
	--mw-primary: #111111;
	--mw-primary-contrast: #ffffff;
	--mw-text: #111111;
	--mw-muted: #6b7280;
	--mw-border: #e7e7e9;
	--mw-background: #ffffff;
	--mw-surface: #f7f7f8;
	--mw-sale: #b42318;

	--mw-radius: 8px;
	--mw-radius-sm: 4px;
	--mw-radius-lg: 12px;
	--mw-btn-radius: 8px;

	--mw-container: 1280px;
	--mw-section-space: 64px;
	--mw-grid-gap: 32px;
	--mw-grid-gap-sm: 16px;

	--mw-cols: 4;
	--mw-cols-tablet: 3;
	--mw-cols-mobile: 2;

	--mw-image-ratio: 3/4;
	--mw-image-fit: cover;

	--mw-font: inherit;
	--mw-font-heading: inherit;
	--mw-font-size: 16px;
	--mw-tracking: -0.011em;

	/* Derived, not configurable. */
	--mw-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
	--mw-shadow: 0 4px 16px rgba(16, 24, 40, 0.08);
	--mw-shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
	--mw-ring: 0 0 0 3px rgba(17, 17, 17, 0.14);
	--mw-ease: cubic-bezier(0.32, 0.72, 0, 1);
	--mw-dur: 220ms;
	--mw-dur-fast: 140ms;
	--mw-z-overlay: 99990;
	--mw-z-panel: 99991;
	--mw-z-toast: 99999;
}

/* ==========================================================================
   2. Base scoping
   ========================================================================== */

.mw {
	--mw-line: 1.5;
}

/* Every component in this plugin sizes with border-box: its widths are written
   as `width: 100%` with padding on the same element.
 *
 * This cannot be assumed. A common theme pattern is `html { box-sizing:
 * border-box }` plus `*, ::before, ::after { box-sizing: inherit }` — and any
 * ancestor that flips back to content-box then cascades that into everything
 * inside it. WooCommerce's `li.product` does exactly that on some themes, so a
 * `width: 100%` button picked up its padding on top of the full column width
 * and overflowed into the next card.
 *
 * Scoped to our own namespace (plus the one slot where we lay out WooCommerce's
 * button) so no theme markup is touched. */
.mw [class^="mw-"],
.mw [class*=" mw-"],
.mw .mw-card__cta > *,
.mw .mw-card__actions > * {
	box-sizing: border-box;
}

.mw .mw-icon {
	flex: none;
	display: block;
}

.mw-sr-only {
	position: absolute !important; /* Standard WP screen-reader pattern. */
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mw-container {
	width: 100%;
	max-width: var(--mw-container);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */

.mw .mw-btn,
.mw a.mw-btn,
.mw button.mw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--mw-btn-radius);
	background: var(--mw-primary);
	color: var(--mw-primary-contrast);
	font-family: var(--mw-font);
	font-size: 0.9375rem;
	font-weight: 550;
	line-height: 1.2;
	letter-spacing: var(--mw-tracking);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity var(--mw-dur-fast) var(--mw-ease),
		background-color var(--mw-dur-fast) var(--mw-ease),
		border-color var(--mw-dur-fast) var(--mw-ease),
		transform var(--mw-dur-fast) var(--mw-ease);
}

.mw .mw-btn:hover {
	opacity: 0.86;
	color: var(--mw-primary-contrast);
}

.mw .mw-btn:active {
	transform: translateY(1px);
}

.mw .mw-btn:focus-visible {
	outline: 2px solid var(--mw-primary);
	outline-offset: 2px;
}

.mw .mw-btn[disabled],
.mw .mw-btn.is-busy {
	pointer-events: none;
	opacity: 0.55;
}

.mw .mw-btn--outline {
	background: transparent;
	border-color: var(--mw-border);
	color: var(--mw-text);
}

.mw .mw-btn--outline:hover {
	opacity: 1;
	border-color: var(--mw-text);
	color: var(--mw-text);
}

.mw .mw-btn--soft {
	background: var(--mw-surface);
	color: var(--mw-text);
}

.mw .mw-btn--sm {
	min-height: 40px;
	padding: 9px 16px;
	font-size: 0.875rem;
}

.mw .mw-btn--block {
	display: flex;
	width: 100%;
}

/* Button style variants applied from settings via a body class. */
.mw-btn-outline .mw-btn:not(.mw-btn--outline):not(.mw-btn--soft) {
	background: transparent;
	border-color: currentColor;
	color: var(--mw-primary);
}

.mw-btn-soft .mw-btn:not(.mw-btn--outline) {
	background: var(--mw-surface);
	color: var(--mw-text);
}

/* Loading spinner inside busy buttons. */
.mw .mw-btn.is-busy::after {
	content: "";
	width: 15px;
	height: 15px;
	margin-left: 4px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: mw-spin 640ms linear infinite;
}

@keyframes mw-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Icon button. */
.mw .mw-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--mw-text);
	cursor: pointer;
	transition: background-color var(--mw-dur-fast) var(--mw-ease);
}

.mw .mw-iconbtn:hover {
	background: var(--mw-surface);
}

.mw .mw-iconbtn:focus-visible {
	outline: 2px solid var(--mw-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   4. Form primitives
   ========================================================================== */

.mw .mw-input,
.mw input[type="text"].mw-input,
.mw input[type="email"].mw-input,
.mw input[type="tel"].mw-input,
.mw input[type="number"].mw-input,
.mw input[type="search"].mw-input,
.mw textarea.mw-input {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	background: var(--mw-background);
	color: var(--mw-text);
	font-family: var(--mw-font);
	font-size: 1rem; /* 16px prevents iOS zoom on focus. */
	line-height: 1.35;
	transition: border-color var(--mw-dur-fast) var(--mw-ease), box-shadow var(--mw-dur-fast) var(--mw-ease);
	appearance: none;
}

.mw .mw-input:focus {
	outline: none;
	border-color: var(--mw-primary);
	box-shadow: var(--mw-ring);
}

.mw .mw-input--sm {
	min-height: 42px;
	padding: 9px 12px;
	font-size: 0.9375rem;
}

.mw .mw-label {
	display: block;
	margin-bottom: 6px;
	color: var(--mw-muted);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0;
}

.mw .mw-check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	color: var(--mw-text);
	font-size: 0.9375rem;
	cursor: pointer;
}

.mw .mw-check input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--mw-primary);
	flex: none;
}

.mw .mw-check__count {
	margin-left: auto;
	color: var(--mw-muted);
	font-size: 0.8125rem;
	font-style: normal;
}

/* ==========================================================================
   5. Quantity stepper
   ========================================================================== */

/* A fixed quantity (min === max) renders a hidden input and no stepper, so the
   wrapper must not draw an empty bordered box. */
.mw .quantity.mw-qty--fixed {
	display: none;
}

.mw .mw-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-btn-radius);
	background: var(--mw-background);
	overflow: hidden;
}

.mw .mw-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 46px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mw-text);
	cursor: pointer;
	transition: background-color var(--mw-dur-fast) var(--mw-ease);
}

.mw .mw-qty__btn:hover {
	background: var(--mw-surface);
}

.mw .mw-qty__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.mw .mw-qty .mw-qty__input,
.mw .mw-qty input.qty {
	width: 44px;
	height: 46px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mw-text);
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.mw .mw-qty input::-webkit-outer-spin-button,
.mw .mw-qty input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.mw .mw-qty--sm .mw-qty__btn {
	width: 32px;
	height: 34px;
}

.mw .mw-qty--sm .mw-qty__input {
	width: 34px;
	height: 34px;
	font-size: 0.875rem;
}

/* ==========================================================================
   6. Badges
   ========================================================================== */

.mw .mw-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	pointer-events: none;
}

.mw .mw-badge {
	display: inline-block;
	padding: 4px 9px;
	border-radius: var(--mw-radius-sm);
	background: var(--mw-primary);
	color: var(--mw-primary-contrast);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	text-transform: uppercase;
}

.mw .mw-badge--sale {
	background: var(--mw-sale);
	color: #fff;
}

.mw .mw-badge--oos,
.mw .mw-badge--backorder,
.mw .mw-badge--low {
	background: var(--mw-background);
	border: 1px solid var(--mw-border);
	color: var(--mw-muted);
}

.mw .mw-badge--featured {
	background: var(--mw-surface);
	color: var(--mw-text);
}

/* ==========================================================================
   7. Overlay, drawer, modal, search panel
   ========================================================================== */

.mw-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--mw-z-overlay);
	background: rgba(16, 24, 40, 0.4);
	opacity: 0;
	transition: opacity var(--mw-dur) var(--mw-ease);
	backdrop-filter: saturate(120%) blur(2px);
}

.mw-overlay.is-open {
	opacity: 1;
}

.mw-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: var(--mw-z-panel);
	display: flex;
	flex-direction: column;
	width: min(420px, 100vw);
	background: var(--mw-background);
	color: var(--mw-text);
	box-shadow: var(--mw-shadow-lg);
	transition: transform var(--mw-dur) var(--mw-ease);
	will-change: transform;
}

.mw-drawer--right {
	right: 0;
	transform: translateX(100%);
}

.mw-drawer--left {
	left: 0;
	transform: translateX(-100%);
}

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

.mw-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--mw-border);
}

.mw-drawer__title {
	margin: 0;
	font-family: var(--mw-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: var(--mw-tracking);
}

.mw-drawer__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mw-drawer__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex: 1;
	padding: 48px 24px;
	text-align: center;
}

.mw-drawer__foot {
	position: sticky;
	bottom: 0;
	margin-top: auto;
	padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--mw-border);
	background: var(--mw-background);
}

.mw-drawer__note {
	margin: 10px 0 14px;
	color: var(--mw-muted);
	font-size: 0.8125rem;
}

.mw-drawer__actions {
	display: grid;
	gap: 8px;
}

/* Cart lines. */
.mw-linelist {
	margin: 0;
	padding: 8px 20px;
	list-style: none;
}

.mw-line {
	display: flex;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--mw-border);
}

.mw-line:last-child {
	border-bottom: 0;
}

.mw-line.is-busy {
	opacity: 0.5;
	pointer-events: none;
}

.mw-line__media {
	flex: none;
	width: 76px;
}

.mw-line__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mw-radius-sm);
	background: var(--mw-surface);
}

.mw-line__body {
	flex: 1;
	min-width: 0;
}

.mw-line__name {
	margin: 0 0 4px;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
}

.mw-line__name a {
	color: inherit;
	text-decoration: none;
}

.mw-line__meta {
	margin: 0 0 10px;
	color: var(--mw-muted);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.mw-line__meta p {
	margin: 0;
}

.mw-line__foot {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mw-line__price {
	margin-left: auto;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.mw-line__remove {
	padding: 4px;
	border: 0;
	background: none;
	color: var(--mw-muted);
	cursor: pointer;
	transition: color var(--mw-dur-fast) var(--mw-ease);
}

.mw-line__remove:hover {
	color: var(--mw-sale);
}

/* Totals + coupon. */
.mw-totals {
	margin: 0;
}

.mw-totals__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 3px 0;
	font-size: 0.9375rem;
}

.mw-totals__row dt,
.mw-totals__row dd {
	margin: 0;
}

.mw-totals__row dd {
	font-variant-numeric: tabular-nums;
}

.mw-totals__row--discount {
	color: var(--mw-sale);
}

.mw-coupon {
	margin-bottom: 14px;
}

.mw-coupon__form {
	display: flex;
	gap: 8px;
}

.mw-coupon__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.mw-coupon__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px 4px 10px;
	border: 1px solid var(--mw-border);
	border-radius: 999px;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.mw-coupon__chip button {
	display: inline-flex;
	padding: 2px;
	border: 0;
	background: none;
	color: var(--mw-muted);
	cursor: pointer;
}

/* Modal. */
.mw-modal {
	position: fixed;
	inset: 0;
	z-index: var(--mw-z-panel);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 4vw, 40px);
	pointer-events: none;
}

.mw-modal.is-open {
	pointer-events: auto;
}

.mw-modal__panel {
	position: relative;
	width: min(980px, 100%);
	max-height: min(88vh, 860px);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: var(--mw-radius-lg);
	background: var(--mw-background);
	box-shadow: var(--mw-shadow-lg);
	opacity: 0;
	transform: translateY(12px) scale(0.99);
	transition: opacity var(--mw-dur) var(--mw-ease), transform var(--mw-dur) var(--mw-ease);
}

.mw-modal.is-open .mw-modal__panel {
	opacity: 1;
	transform: none;
}

.mw-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	background: var(--mw-background);
}

.mw-modal__body {
	min-height: 220px;
}

.mw-modal__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	color: var(--mw-muted);
}

/* Search panel. */
.mw-searchpanel {
	position: fixed;
	inset: 0;
	z-index: var(--mw-z-panel);
	display: flex;
	justify-content: center;
	padding: clamp(0px, 6vh, 80px) clamp(0px, 4vw, 24px) 0;
	pointer-events: none;
}

.mw-searchpanel.is-open {
	pointer-events: auto;
}

.mw-searchpanel__inner {
	width: min(720px, 100%);
	max-height: 82vh;
	display: flex;
	flex-direction: column;
	border-radius: var(--mw-radius-lg);
	background: var(--mw-background);
	box-shadow: var(--mw-shadow-lg);
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity var(--mw-dur) var(--mw-ease), transform var(--mw-dur) var(--mw-ease);
	overflow: hidden;
}

.mw-searchpanel.is-open .mw-searchpanel__inner {
	opacity: 1;
	transform: none;
}

.mw-searchpanel__form {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--mw-border);
}

.mw-searchpanel__icon {
	color: var(--mw-muted);
	display: flex;
}

.mw-searchpanel__input {
	flex: 1;
	min-height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mw-text);
	font-family: var(--mw-font);
	font-size: 1.0625rem;
}

.mw-searchpanel__input:focus {
	outline: none;
}

.mw-searchpanel__results {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px;
}

.mw-result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border-radius: var(--mw-radius);
	color: var(--mw-text);
	text-decoration: none;
	transition: background-color var(--mw-dur-fast) var(--mw-ease);
}

.mw-result:hover,
.mw-result.is-active {
	background: var(--mw-surface);
}

.mw-result img {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: var(--mw-radius-sm);
	background: var(--mw-surface);
	flex: none;
}

.mw-result__body {
	min-width: 0;
	flex: 1;
}

.mw-result__name {
	display: block;
	font-size: 0.9375rem;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mw-result__cat {
	display: block;
	color: var(--mw-muted);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.mw-result__price {
	margin-left: auto;
	font-size: 0.9375rem;
	white-space: nowrap;
}

.mw-result__price del {
	color: var(--mw-muted);
	margin-right: 4px;
}

.mw-searchpanel__foot {
	padding: 10px 18px 16px;
	border-top: 1px solid var(--mw-border);
}

.mw-searchpanel__empty {
	padding: 40px 20px;
	color: var(--mw-muted);
	text-align: center;
	font-size: 0.9375rem;
}

/* ==========================================================================
   8. Toasts + live region
   ========================================================================== */

.mw-toasts {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: var(--mw-z-toast);
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: min(380px, calc(100vw - 32px));
	pointer-events: none;
}

.mw-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	background: var(--mw-background);
	box-shadow: var(--mw-shadow);
	color: var(--mw-text);
	font-size: 0.9375rem;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--mw-dur) var(--mw-ease), transform var(--mw-dur) var(--mw-ease);
}

.mw-toast.is-in {
	opacity: 1;
	transform: none;
}

.mw-toast--error {
	border-color: color-mix(in srgb, var(--mw-sale) 40%, var(--mw-border));
}

.mw-toast__img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: var(--mw-radius-sm);
	flex: none;
}

.mw-toast__text {
	flex: 1;
	min-width: 0;
}

.mw-toast__title {
	display: block;
	font-weight: 550;
}

.mw-toast__sub {
	display: block;
	color: var(--mw-muted);
	font-size: 0.8125rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mw-toast__action {
	flex: none;
	padding: 6px 10px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius-sm);
	background: none;
	color: var(--mw-text);
	font-size: 0.8125rem;
	cursor: pointer;
}

/* ==========================================================================
   9. Cart toggle + floating button
   ========================================================================== */

.mw-carttoggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.mw-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--mw-primary);
	color: var(--mw-primary-contrast);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.mw-carttoggle .mw-cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
}

.mw-cart-count:not(.is-filled) {
	display: none;
}

.mw-floatcart {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9998;
}

.mw-floatcart .mw-carttoggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--mw-primary);
	color: var(--mw-primary-contrast);
	box-shadow: var(--mw-shadow);
}

/* ==========================================================================
   10. Empty states
   ========================================================================== */

.mw-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: clamp(40px, 8vw, 80px) 20px;
	text-align: center;
}

.mw-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--mw-surface);
	color: var(--mw-muted);
}

.mw-empty__title {
	margin: 0;
	font-family: var(--mw-font-heading);
	font-size: 1.125rem;
	font-weight: 600;
}

.mw-empty__text {
	margin: 0 0 8px;
	color: var(--mw-muted);
	max-width: 34ch;
}

/* ==========================================================================
   11. Body state while an overlay is open
   ========================================================================== */

body.mw-locked {
	overflow: hidden;
}

/* ==========================================================================
   12. Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.mw *,
	.mw-drawer,
	.mw-overlay,
	.mw-modal__panel,
	.mw-searchpanel__inner,
	.mw-toast {
		transition-duration: 0.01ms !important; /* Overrides the durations above. */
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

.mw-no-motion .mw-drawer,
.mw-no-motion .mw-overlay,
.mw-no-motion .mw-modal__panel,
.mw-no-motion .mw-searchpanel__inner,
.mw-no-motion .mw-toast {
	transition: none;
}

/* ==========================================================================
   13. Small screens
   ========================================================================== */

@media (max-width: 782px) {
	.mw-drawer {
		width: min(100vw, 460px);
	}

	.mw-toasts {
		right: 12px;
		left: 12px;
		bottom: 12px;
		max-width: none;
	}

	.mw-searchpanel {
		padding: 0;
	}

	.mw-searchpanel__inner {
		width: 100%;
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
	}

	.mw-modal {
		padding: 0;
		align-items: flex-end;
	}

	.mw-modal__panel {
		width: 100%;
		max-height: 92vh;
		border-radius: var(--mw-radius-lg) var(--mw-radius-lg) 0 0;
		transform: translateY(24px);
	}
}