/* Motopood Shop
   Every rule is scoped under .mp-ui so theme, Elementor and WooCommerce
   styles can't leak in (and ours can't leak out). Component rules use
   ".mp-ui .x" (two classes) so they beat element-level theme resets like
   Hello's `button:hover` and Elementor kit link colours.
   Breakpoint: ≤ 859px is the mobile layout (matches the approved design). */

.mp-ui {
	--mp-bg: #f4f4f5;
	--mp-surface: #ffffff;
	--mp-text: #201e1d;
	--mp-accent: #af0000;
	--mp-accent-600: #8f0000;
	--mp-accent-700: #6e0000;
	--mp-accent-100: #f9e6e6;
	--mp-ok: #1c6b32;
	--mp-line: rgba(32, 30, 29, 0.14);
	--mp-line-2: rgba(32, 30, 29, 0.28);
	--mp-r: 10px;
	--mp-r-lg: 14px;
	--mp-shadow-sm: 0 1px 2px rgba(32, 30, 29, 0.07);
	--mp-shadow: 0 6px 18px rgba(32, 30, 29, 0.09);
	--mp-shadow-lg: 0 24px 60px rgba(32, 30, 29, 0.18);
	--mp-glow: 0 8px 20px rgba(175, 0, 0, 0.16);
	--mp-font: "MP Archivo", "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mp-gutter: clamp(16px, 4vw, 40px);
	font-family: var(--mp-font);
	font-size: 14px;
	line-height: 1.45;
	color: var(--mp-text);
	-webkit-font-smoothing: antialiased;
	text-align: left;
}
.mp-ui *, .mp-ui *::before, .mp-ui *::after { box-sizing: border-box; }

/* ---- resets (low specificity on purpose; components override) ---- */
.mp-ui a { color: inherit; text-decoration: none; }
.mp-ui a:hover, .mp-ui a:focus { color: inherit; text-decoration: none; }
.mp-ui img { max-width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.mp-ui ul { list-style: none; margin: 0; padding: 0; }
.mp-ui li { margin: 0; }
.mp-ui p { margin: 0; }
.mp-ui h1, .mp-ui h2, .mp-ui h3 {
	font-family: var(--mp-font);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--mp-text);
	margin: 0;
	text-transform: none;
	text-wrap: pretty;
}
.mp-ui button, .mp-ui input, .mp-ui select, .mp-ui textarea { font-family: var(--mp-font); letter-spacing: normal; text-transform: none; }
.mp-ui button {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	cursor: pointer;
	box-shadow: none;
	text-decoration: none;
}
.mp-ui button:hover, .mp-ui button:focus { background: none; color: inherit; box-shadow: none; text-decoration: none; }
.mp-ui :focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; }
.mp-ui [hidden] { display: none !important; }
.mp-ui .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- primitives ---- */
.mp-ui .mp-wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--mp-gutter); }
.mp-ui .mp-dim { opacity: 0.58; }
.mp-ui .mp-push { margin-left: auto; }
.mp-ui .mp-sep { opacity: 0.4; }
.mp-ui .mp-num { text-align: right; }
.mp-ui .mp-in { color: var(--mp-text); }
.mp-ui .mp-out { color: var(--mp-accent-700); }
.mp-ui .mp-accent { color: var(--mp-accent); }
.mp-ui .mp-accent-dark { color: var(--mp-accent-700); }
.mp-ui .mp-i { flex: none; display: block; }
.mp-ui .mp-kicker { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.mp-ui .mp-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.mp-ui .mp-input {
	display: block;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	font-size: 14px;
	line-height: 1.2;
	color: var(--mp-text);
	background: var(--mp-surface);
	border: 2px solid var(--mp-text);
	border-radius: var(--mp-r);
	box-shadow: none;
	caret-color: var(--mp-accent);
	min-width: 0;
}
.mp-ui .mp-input:focus { outline: none; border-color: var(--mp-text); box-shadow: 0 0 0 3px var(--mp-accent-100); }
.mp-ui textarea.mp-input { height: auto; padding: 10px 12px; resize: vertical; }
.mp-ui select.mp-input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 32px;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.mp-ui .mp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px;
	border: 2px solid transparent;
	border-radius: var(--mp-r);
	background: transparent;
	color: var(--mp-text);
	font-family: var(--mp-font);
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.mp-ui .mp-btn-primary { background: var(--mp-accent); border-color: var(--mp-accent); color: #fff; }
.mp-ui .mp-btn-primary:hover, .mp-ui .mp-btn-primary:focus { background: var(--mp-accent-600); border-color: var(--mp-accent-600); color: #fff; }
.mp-ui .mp-btn-primary:active { background: var(--mp-accent-700); border-color: var(--mp-accent-700); }
.mp-ui .mp-btn-outline { border-color: var(--mp-text); color: var(--mp-text); background: transparent; }
.mp-ui .mp-btn-outline:hover, .mp-ui .mp-btn-outline:focus { background: rgba(32, 30, 29, 0.07); color: var(--mp-text); border-color: var(--mp-text); }
.mp-ui .mp-btn-soft { border-color: var(--mp-line); color: var(--mp-text); background: transparent; font-weight: 700; font-size: 13px; }
.mp-ui .mp-btn-soft:hover, .mp-ui .mp-btn-soft:focus { border-color: var(--mp-text); background: transparent; color: var(--mp-text); }
.mp-ui .mp-btn-ghost-light { border-color: currentColor; color: inherit; background: transparent; }
.mp-ui .mp-btn-ghost-light:hover, .mp-ui .mp-btn-ghost-light:focus { background: rgba(255, 255, 255, 0.12); color: inherit; border-color: currentColor; }
.mp-ui .mp-btn-ghost-text { color: inherit; background: transparent; border-color: transparent; }
.mp-ui .mp-btn-ghost-text:hover, .mp-ui .mp-btn-ghost-text:focus { background: rgba(255, 255, 255, 0.12); color: inherit; border-color: transparent; }
.mp-ui .mp-btn-block { display: flex; width: 100%; }
.mp-ui .mp-btn-split { justify-content: space-between; }
.mp-ui .mp-btn-sm { height: 33px; padding: 0 12px; gap: 7px; font-size: 13px; }
.mp-ui .mp-btn-lg { height: 46px; padding: 0 22px; }
.mp-ui .mp-btn.is-disabled { opacity: 0.45; pointer-events: none; }
.mp-ui .mp-btn.loading { opacity: 0.6; pointer-events: none; }
.mp-ui .mp-btn.added::after, .mp-ui .mp-btn.loading::after { display: none; }
body.mp-has-header .mp-ui a.added_to_cart { display: none; }
.mp-ui a.added_to_cart { font-size: 12px; font-weight: 700; color: var(--mp-accent-700); margin-left: 8px; }

.mp-ui .mp-iconbtn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; color: var(--mp-text); flex: none; border-radius: 8px; }
.mp-ui .mp-iconbtn:hover, .mp-ui .mp-iconbtn:focus { background: rgba(32, 30, 29, 0.06); color: var(--mp-text); }
.mp-ui .mp-x { display: flex; padding: 3px; opacity: 0.6; color: var(--mp-text); border-radius: 6px; flex: none; }
.mp-ui .mp-x:hover, .mp-ui .mp-x:focus { opacity: 1; color: var(--mp-accent); background: none; }

.mp-ui .mp-tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 8px;
	background: #f0efef;
	color: var(--mp-text);
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
}
.mp-ui .mp-tag:hover, .mp-ui .mp-tag:focus { background: var(--mp-accent-100); color: var(--mp-accent-700); }

.mp-ui .mp-only-mob, .mp-ui.mp-only-mob { display: none; }

/* ================================================================== *
 * Header
 * ================================================================== */

.mp-ui.mp-utility { background: var(--mp-bg); border-bottom: 1px solid var(--mp-line); position: relative; z-index: 61; }
.mp-ui .mp-utility-in {
	min-height: 32px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 24px;
	font-size: 10.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
}
.mp-ui .mp-utility-in a:hover { color: var(--mp-accent); }
.mp-ui .mp-utility-kicker { font-size: 10px; letter-spacing: 0.18em; }

.mp-ui.mp-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 60;
	background: var(--mp-bg);
}
.mp-ui .mp-masthead { border-bottom: 2px solid var(--mp-line); background: var(--mp-bg); }
.mp-ui .mp-masthead-in { display: flex; align-items: center; gap: 14px 32px; padding-top: 12px; padding-bottom: 12px; }
.mp-ui .mp-brand { flex: none; display: flex; align-items: center; }
.mp-ui .mp-logo { display: block; width: auto; height: 46px; max-width: 120px; object-fit: contain; }

.mp-ui .mp-search { position: relative; flex: 1 1 360px; min-width: 300px; max-width: 660px; margin: 0; }
.mp-ui .mp-search-row { display: flex; position: relative; }
.mp-ui .mp-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: 0.5; display: flex; }
.mp-ui .mp-search-input { height: 38px; padding-left: 38px; font-size: 13px; border-radius: 9px 0 0 9px; border-right: 0; }
.mp-ui .mp-search-input::-webkit-search-cancel-button { cursor: pointer; }
.mp-ui .mp-search-go { height: 38px; padding: 0 18px; border-radius: 0 9px 9px 0; flex: none; }

.mp-ui .mp-suggest {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--mp-surface);
	border: 2px solid var(--mp-text);
	border-radius: 12px;
	overflow: hidden auto;
	max-height: min(480px, calc(100vh - 140px));
	box-shadow: var(--mp-shadow-lg);
	z-index: 80;
}
.mp-ui .mp-suggest-head { padding: 10px 16px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; border-bottom: 1px solid var(--mp-line); }
.mp-ui .mp-sug { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--mp-line); color: var(--mp-text); }
.mp-ui .mp-sug:hover, .mp-ui .mp-sug:focus, .mp-ui .mp-sug.is-hot { background: var(--mp-accent-100); color: var(--mp-text); }
.mp-ui .mp-sug img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.mp-ui .mp-sug-main { flex: 1; min-width: 0; }
.mp-ui .mp-sug-title { display: block; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-ui .mp-sug-meta { display: block; font-size: 11px; opacity: 0.55; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-ui .mp-sug-price { font-weight: 800; font-size: 14px; flex: none; }
.mp-ui .mp-sug-cols { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 6px; }
.mp-ui .mp-sug-cols > div:first-child { border-right: 1px solid var(--mp-line); }
.mp-ui .mp-sug-cols.is-one { grid-template-columns: 1fr; }
.mp-ui .mp-sug-cols.is-one > div { border-right: 0; }
.mp-ui .mp-sug-cols .mp-suggest-head { border-bottom: 0; }
.mp-ui .mp-sug-row { display: block; padding: 7px 16px; font-size: 13px; color: var(--mp-text); }
.mp-ui .mp-sug-row:hover, .mp-ui .mp-sug-row:focus { background: var(--mp-accent-100); color: var(--mp-text); }
.mp-ui .mp-sug-empty { padding: 18px 16px; font-size: 13px; }
.mp-ui .mp-sug-empty b { display: block; margin-bottom: 6px; font-weight: 800; }

.mp-ui .mp-header-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; flex: none; }
.mp-ui .mp-link-cap { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mp-text); }
.mp-ui .mp-link-cap:hover, .mp-ui .mp-link-cap:focus { color: var(--mp-accent); }

/* nav */
.mp-ui .mp-nav { position: relative; background: var(--mp-bg); border-bottom: 1px solid var(--mp-line); }
.mp-ui .mp-nav-in {
	display: flex;
	align-items: center;
	gap: 28px;
	height: 42px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}
.mp-ui .mp-nav-in::-webkit-scrollbar { display: none; }
.mp-ui .mp-nav.is-overflow .mp-nav-in { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%); }
.mp-ui .mp-nav-link {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 42px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--mp-text);
	border-bottom: 2px solid transparent;
	flex: none;
}
.mp-ui .mp-nav-link .mp-i { opacity: 0.5; }
.mp-ui .mp-nav-link:hover, .mp-ui .mp-nav-link:focus, .mp-ui .mp-nav-link.is-open, .mp-ui .mp-nav-link.is-active { color: var(--mp-accent); border-bottom-color: var(--mp-accent); }
.mp-ui .mp-nav-ico { width: 22px; height: 22px; object-fit: contain; flex: none; }

.mp-ui .mp-drop {
	position: absolute;
	top: 100%;
	left: 24px;
	margin-top: -1px;
	z-index: 70;
	min-width: 288px;
	max-width: min(380px, calc(100vw - 32px));
	background: var(--mp-surface);
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-r-lg);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.16);
	padding: 8px;
}
.mp-ui .mp-drop-title { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5; padding: 4px 8px 12px; }
.mp-ui .mp-drop-row { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: var(--mp-r); color: var(--mp-text); }
.mp-ui .mp-drop-row:hover, .mp-ui .mp-drop-row:focus { background: var(--mp-accent-100); color: var(--mp-text); }
.mp-ui .mp-drop-thumb { width: 34px; height: 34px; flex: none; object-fit: contain; border: 1px solid var(--mp-line); border-radius: 8px; background: #fff; padding: 3px; }
.mp-ui .mp-drop-label { font-weight: 600; font-size: 14px; line-height: 1.25; }
.mp-ui .mp-drop-count { margin-left: auto; padding-left: 10px; font-size: 11px; opacity: 0.45; white-space: nowrap; }
.mp-ui .mp-drop-all { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; padding: 10px 10px 6px; border-top: 1px solid var(--mp-line); font-size: 12px; font-weight: 700; color: var(--mp-accent-700); }
.mp-ui .mp-drop-all:hover, .mp-ui .mp-drop-all:focus { color: var(--mp-accent); }

/* mobile menu drawer */
.mp-ui.mp-mnav { position: fixed; inset: 0; z-index: 100000; }
.mp-ui .mp-mnav-scrim { position: absolute; inset: 0; background: rgba(20, 18, 17, 0.5); }
.mp-ui .mp-mnav-panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(320px, 86vw);
	background: var(--mp-surface);
	box-shadow: 16px 0 44px rgba(0, 0, 0, 0.18);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px 20px 28px;
	animation: mp-slide-l 0.18s ease-out;
}
@keyframes mp-slide-l { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.mp-ui .mp-mnav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mp-ui .mp-mnav-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 4px;
	border-bottom: 1px solid var(--mp-line);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--mp-text);
	cursor: pointer;
	list-style: none;
}
.mp-ui .mp-mnav-row::-webkit-details-marker { display: none; }
.mp-ui .mp-mnav-row.is-active, .mp-ui .mp-mnav-row:hover { color: var(--mp-accent); }
.mp-ui .mp-mnav-group .mp-i { transition: transform 0.15s; }
.mp-ui .mp-mnav-group[open] > summary .mp-i { transform: rotate(180deg); }
.mp-ui .mp-mnav-subs { display: flex; flex-direction: column; gap: 3px; padding: 6px 0 10px 6px; }
.mp-ui .mp-mnav-sub { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--mp-text); }
.mp-ui .mp-mnav-sub:hover, .mp-ui .mp-mnav-sub:focus { background: var(--mp-accent-100); color: var(--mp-text); }
.mp-ui .mp-mnav-sub img { width: 32px; height: 32px; object-fit: contain; flex: none; border: 1px solid var(--mp-line); border-radius: 8px; background: #fff; padding: 3px; }
.mp-ui .mp-mnav-all { font-weight: 700; color: var(--mp-accent-700); padding-left: 52px; }
.mp-ui .mp-mnav-foot { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; font-size: 13px; }
.mp-ui .mp-mnav-foot a { display: flex; align-items: center; gap: 10px; font-weight: 600; }
html.mp-locked, html.mp-locked body { overflow: hidden; }

/* ================================================================== *
 * Dropdown cart
 * ================================================================== */

.mp-ui .mp-cartwrap { position: relative; }
.mp-ui .mp-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 14px;
	border: 2px solid var(--mp-line);
	border-radius: var(--mp-r);
	background: transparent;
	color: var(--mp-text);
	font-weight: 800;
	font-size: 14px;
	white-space: nowrap;
}
.mp-ui .mp-cart:hover, .mp-ui .mp-cart:focus, .mp-ui .mp-cart[aria-expanded="true"] { background: rgba(32, 30, 29, 0.07); color: var(--mp-text); border-color: var(--mp-line); }
.mp-ui .mp-cart-badge {
	display: none;
	position: absolute;
	top: -2px;
	right: -4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--mp-accent);
	color: #fff;
	font-size: 9.5px;
	font-weight: 800;
	line-height: 16px;
	text-align: center;
}

.mp-ui .mp-cart-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: min(400px, calc(100vw - 32px));
	background: var(--mp-surface);
	border: 2px solid var(--mp-text);
	border-radius: var(--mp-r-lg);
	box-shadow: var(--mp-shadow-lg);
	z-index: 120;
	color: var(--mp-text);
	text-align: left;
	font-weight: 400;
	white-space: normal;
}
.mp-ui .mp-cart-inner { display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 150px)); }
.mp-ui .mp-cart-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 2px solid var(--mp-line); }
.mp-ui .mp-cart-title { font-weight: 800; font-size: 15px; }
.mp-ui .mp-cart-x, .mp-ui .mp-cart-remove { display: flex; padding: 2px; opacity: 0.5; color: var(--mp-text); flex: none; }
.mp-ui .mp-cart-x:hover, .mp-ui .mp-cart-remove:hover, .mp-ui .mp-cart-x:focus, .mp-ui .mp-cart-remove:focus { opacity: 1; color: var(--mp-accent); }
.mp-ui .mp-cart-empty { padding: 26px 22px; text-align: center; }
.mp-ui .mp-cart-empty strong { display: block; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.mp-ui .mp-cart-empty span { display: block; font-size: 12.5px; opacity: 0.6; line-height: 1.5; }
.mp-ui .mp-cart-lines { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.mp-ui .mp-cart-line { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--mp-line); }
.mp-ui .mp-cart-line.is-busy { opacity: 0.45; pointer-events: none; }
.mp-ui .mp-cart-thumb { flex: none; display: block; }
.mp-ui .mp-cart-thumb img { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--mp-line); border-radius: 8px; background: #fff; display: block; }
.mp-ui .mp-cart-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.mp-ui .mp-cart-top { display: flex; align-items: flex-start; gap: 8px; }
.mp-ui .mp-cart-names { flex: 1; min-width: 0; }
.mp-ui .mp-cart-brand { display: block; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mp-accent-700); }
.mp-ui .mp-cart-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; font-size: 13px; line-height: 1.3; color: var(--mp-text); }
.mp-ui .mp-cart-name:hover, .mp-ui .mp-cart-name:focus { color: var(--mp-accent); }
.mp-ui .mp-cart-bottom { display: flex; align-items: center; gap: 10px; }
.mp-ui .mp-cart-qty { flex: none; display: flex; align-items: center; height: 30px; border: 1.5px solid var(--mp-line); border-radius: 7px; }
.mp-ui .mp-cart-qty button { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; line-height: 1; color: var(--mp-text); }
.mp-ui .mp-cart-qty button:hover, .mp-ui .mp-cart-qty button:focus { color: var(--mp-accent); }
.mp-ui .mp-cart-qty-n { min-width: 20px; text-align: center; font-size: 12.5px; font-weight: 700; }
.mp-ui .mp-cart-unit { font-size: 11px; opacity: 0.5; }
.mp-ui .mp-cart-lineprice { margin-left: auto; font-weight: 800; font-size: 14px; white-space: nowrap; }
.mp-ui .mp-cart-foot { flex: none; padding: 13px 16px 15px; border-top: 2px solid var(--mp-line); display: flex; flex-direction: column; gap: 11px; }
.mp-ui .mp-cart-ship { display: flex; flex-direction: column; gap: 6px; }
.mp-ui .mp-cart-shiptext { font-size: 11.5px; opacity: 0.7; }
.mp-ui .mp-cart-bar { display: block; height: 6px; background: var(--mp-line); border-radius: 3px; overflow: hidden; }
.mp-ui .mp-cart-bar i { display: block; height: 100%; background: var(--mp-accent); border-radius: 3px; }
.mp-ui .mp-cart-shipok { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #12692c; }
.mp-ui .mp-cart-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mp-ui .mp-cart-sublabel { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
.mp-ui .mp-cart-subvalue { font-weight: 800; font-size: 22px; line-height: 1; }
.mp-ui .mp-cart-note { font-size: 10.5px; opacity: 0.5; line-height: 1.45; }
.mp-ui .mp-cart-actions { display: flex; gap: 8px; }
.mp-ui .mp-cart-actions .mp-btn { flex: 1; height: 42px; font-size: 12.5px; padding: 0 10px; }
.mp-ui .mp-cart-actions .mp-btn-primary { flex: 1.25; }
.mp-ui .mp-cart-actions .mp-btn-outline { border-color: var(--mp-line); }

/* ================================================================== *
 * Shop page
 * ================================================================== */

.mp-ui.mp-shop { background: var(--mp-bg); width: 100%; }
.mp-ui .mp-notices { padding-top: 16px; }
.mp-ui .mp-notices:empty { display: none; }
.mp-ui .mp-notices .woocommerce-message, .mp-ui .mp-notices .woocommerce-info, .mp-ui .mp-notices .woocommerce-error { margin: 0 0 8px; border-radius: var(--mp-r); }
.mp-ui .mp-notices .woocommerce-message a.button { float: right; }

/* hero (desktop) */
.mp-ui.mp-hero { position: relative; background: #12100f var(--mp-hero-img) center / cover no-repeat; color: #fff; }
.mp-ui .mp-hero-shade { background: linear-gradient(90deg, rgba(12, 11, 10, 0.95) 0%, rgba(12, 11, 10, 0.86) 42%, rgba(12, 11, 10, 0.35) 100%); }
.mp-ui .mp-hero-in { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; min-height: 520px; }
.mp-ui .mp-hero-copy { padding: 80px 0; flex: 1 1 480px; min-width: 280px; }
.mp-ui .mp-hero-copy .mp-kicker { letter-spacing: 0.16em; margin-bottom: 20px; }
.mp-ui .mp-hero-title { font-size: clamp(36px, 3.8vw, 54px); line-height: 1.03; margin: 0 0 20px; max-width: 15ch; color: #fff; }
.mp-ui .mp-hero-lede { font-size: 17px; line-height: 1.6; max-width: 50ch; color: rgba(255, 255, 255, 0.72); margin: 0 0 36px; }
.mp-ui .mp-stats { display: flex; flex-wrap: wrap; row-gap: 16px; }
.mp-ui .mp-stat { padding: 0 32px; }
.mp-ui .mp-stat:first-child { padding-left: 0; }
.mp-ui .mp-stat + .mp-stat { border-left: 1px solid rgba(255, 255, 255, 0.22); }
.mp-ui .mp-stat b { display: block; font-weight: 800; font-size: 26px; line-height: 1.15; }
.mp-ui .mp-stat span { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; margin-top: 4px; }
.mp-ui .mp-hero-card { flex: 1 1 380px; min-width: 300px; max-width: 440px; margin: 48px 0; }

.mp-ui .mp-picker {
	background: #fff;
	color: var(--mp-text);
	border-radius: 18px;
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
	padding: 32px;
	display: grid;
	gap: 14px;
	margin: 0;
}
.mp-ui .mp-picker > .mp-kicker { letter-spacing: 0.14em; margin-bottom: 4px; }
.mp-ui .mp-field { display: block; margin: 0; }
.mp-ui .mp-field > span { display: block; font-size: 12px; margin-bottom: 5px; opacity: 0.7; }
.mp-ui .mp-field .mp-input { height: 44px; }
.mp-ui .mp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mp-ui .mp-picker .mp-btn { height: 48px; margin-top: 4px; }
.mp-ui .mp-picker-help { font-size: 12px; opacity: 0.6; }
.mp-ui .mp-picker-help a { color: var(--mp-accent-700); }
.mp-ui .mp-picker-help a:hover { color: var(--mp-accent); }

/* applied-vehicle bar */
.mp-ui.mp-fitbar { background: var(--mp-accent); color: var(--mp-bg); }
.mp-ui .mp-fitbar-in { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 40px; padding-top: 32px; padding-bottom: 32px; }
.mp-ui .mp-fitbar .mp-kicker { letter-spacing: 0.14em; opacity: 0.8; }
.mp-ui .mp-fitbar-value { font-weight: 800; font-size: 30px; line-height: 1.1; margin-top: 4px; }
.mp-ui .mp-fitbar-cell { border-left: 2px solid var(--mp-bg); padding-left: 32px; }
.mp-ui .mp-fitbar-note { font-size: 13px; max-width: 34ch; opacity: 0.9; }
.mp-ui .mp-fitbar-actions { display: flex; gap: 10px; margin-left: auto; }

/* hero (mobile) */
.mp-ui.mp-mhero { background: #12100f var(--mp-hero-img) center / cover no-repeat; }
.mp-ui .mp-mhero-shade { background: linear-gradient(180deg, rgba(12, 11, 10, 0.5) 0%, rgba(12, 11, 10, 0.88) 55%, rgba(12, 11, 10, 0.96) 100%); padding: 18px var(--mp-gutter) 20px; }
.mp-ui .mp-mhero-card {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 16px;
	background: #fff;
	color: var(--mp-text);
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
	text-align: left;
}
.mp-ui .mp-mhero-card:hover, .mp-ui .mp-mhero-card:focus { background: #fff; color: var(--mp-text); }
.mp-ui .mp-mhero-card > .mp-i { transition: transform 0.15s; margin-top: 4px; }
.mp-ui .mp-mhero.is-open .mp-mhero-card > .mp-i { transform: rotate(180deg); }
.mp-ui .mp-mhero-thumb { width: 58px; height: 58px; flex: none; border-radius: 10px; background: #12100f var(--mp-hero-img) center / cover no-repeat; }
.mp-ui .mp-mhero-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-ui .mp-mhero-txt .mp-kicker { font-size: 10px; margin-bottom: 5px; }
.mp-ui .mp-mhero-title { font-weight: 800; font-size: 16px; line-height: 1.2; }
.mp-ui .mp-mhero-sub { font-size: 11px; opacity: 0.6; margin-top: 3px; }
.mp-ui .mp-mhero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.mp-ui .mp-mhero-stats > div { background: rgba(255, 255, 255, 0.09); border-radius: 10px; padding: 9px 4px; text-align: center; color: #fff; }
.mp-ui .mp-mhero-stats b { display: block; font-weight: 800; font-size: 12.5px; }
.mp-ui .mp-mhero-stats span { display: block; font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.6; margin-top: 2px; }
.mp-ui .mp-mhero-body { margin-top: 12px; }
.mp-ui .mp-mhero-body .mp-picker { padding: 20px; border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); }
.mp-ui .mp-mhero-cta { display: block; width: 100%; height: 46px; margin-top: 12px; border-radius: 10px; background: var(--mp-accent); color: #fff; font-weight: 800; font-size: 14px; text-align: center; }
.mp-ui .mp-mhero-cta:hover, .mp-ui .mp-mhero-cta:focus { background: var(--mp-accent-600); color: #fff; }

/* tiles */
.mp-ui .mp-tiles-sec { background: var(--mp-bg); }
.mp-ui .mp-sec-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 20px; padding: 40px 0 18px; }
.mp-ui .mp-sec-head h2 { font-size: 24px; white-space: nowrap; }
.mp-ui .mp-sec-head span { font-size: 12px; }
.mp-ui .mp-rail { position: relative; }
.mp-ui .mp-tiles {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 2px 2px 10px;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.mp-ui .mp-tiles::-webkit-scrollbar { display: none; }
.mp-ui .mp-rail.is-start .mp-tiles { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%); }
.mp-ui .mp-rail.is-end .mp-tiles { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 100%); }
.mp-ui .mp-rail.is-start.is-end .mp-tiles { -webkit-mask-image: none; mask-image: none; }
.mp-ui .mp-rail.is-drag .mp-tiles { cursor: grabbing; scroll-snap-type: none; }
.mp-ui .mp-tile {
	flex: 0 0 132px;
	min-width: 132px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 13px 12px;
	background: #fff;
	border: 1px solid var(--mp-line);
	border-radius: 12px;
	box-shadow: var(--mp-shadow-sm);
	color: var(--mp-text);
	text-align: center;
	scroll-snap-align: start;
	transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
	user-select: none;
	-webkit-user-drag: none;
}
.mp-ui .mp-tile:hover, .mp-ui .mp-tile:focus { background: var(--mp-accent-100); border-color: var(--mp-accent); color: var(--mp-text); }
.mp-ui .mp-tile.is-active { border-color: var(--mp-accent); box-shadow: var(--mp-glow); }
.mp-ui .mp-tile-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-bottom: 8px; }
.mp-ui .mp-tile-img img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; pointer-events: none; }
.mp-ui .mp-tile-all { opacity: 0.8; }
.mp-ui .mp-tile-label { font-weight: 600; font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mp-ui .mp-tile-label.is-sm { font-size: 12px; }
.mp-ui .mp-tile-label.is-xs { font-size: 11px; }
.mp-ui .mp-tile-count { font-size: 11px; opacity: 0.5; margin-top: 3px; white-space: nowrap; }
.mp-ui .mp-rail-btn {
	position: absolute;
	top: calc(50% - 5px);
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--mp-line);
	background: #fff;
	box-shadow: var(--mp-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mp-text);
	z-index: 2;
}
.mp-ui .mp-rail-btn:hover, .mp-ui .mp-rail-btn:focus { border-color: var(--mp-accent); color: var(--mp-accent); background: #fff; }
.mp-ui .mp-rail-btn.is-prev { left: -18px; }
.mp-ui .mp-rail-btn.is-next { right: -18px; }
.mp-ui .mp-rail.is-start .mp-rail-btn.is-prev, .mp-ui .mp-rail.is-end .mp-rail-btn.is-next { display: none; }
.mp-ui .mp-swipe-hint { align-items: center; justify-content: center; gap: 6px; margin-top: 8px; opacity: 0.45; font-size: 11px; letter-spacing: 0.04em; }

/* subcategory quick-pick */
.mp-ui .mp-subs { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--mp-line); position: relative; }
.mp-ui .mp-subs-title { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.5; margin-bottom: 10px; }
.mp-ui .mp-subs-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-ui .mp-subchip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	border-radius: 8px;
	border: 1.5px solid var(--mp-line);
	background: #fff;
	color: var(--mp-text);
	font-weight: 600;
	font-size: 12.5px;
	white-space: nowrap;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.mp-ui .mp-subchip:hover, .mp-ui .mp-subchip:focus { border-color: var(--mp-accent); color: var(--mp-text); }
.mp-ui .mp-subchip.is-on { border-color: var(--mp-accent); background: var(--mp-accent-100); color: var(--mp-accent-700); box-shadow: var(--mp-glow); }
.mp-ui .mp-subchip-n { font-weight: 500; opacity: 0.5; }
.mp-ui .mp-subsel { position: relative; }
.mp-ui .mp-subsel-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	padding: 11px 16px;
	border-radius: 10px;
	border: 2px solid var(--mp-line);
	background: #fff;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	list-style: none;
}
.mp-ui .mp-subsel-btn::-webkit-details-marker { display: none; }
.mp-ui .mp-subsel-btn.is-active { border-color: var(--mp-text); }
.mp-ui .mp-subsel[open] .mp-subsel-btn { border-color: var(--mp-accent); }
.mp-ui .mp-subsel-btn .mp-i { transition: transform 0.15s; }
.mp-ui .mp-subsel[open] .mp-subsel-btn .mp-i { transform: rotate(180deg); }
.mp-ui .mp-subsel-list {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 58;
	background: #fff;
	border: 2px solid var(--mp-line);
	border-radius: 14px;
	box-shadow: var(--mp-shadow-lg);
	padding: 10px;
	max-height: 340px;
	overflow-y: auto;
}

/* ---- filter bar ---- */
.mp-ui.mp-fbar {
	position: sticky;
	top: var(--mp-head-h, 0px);
	z-index: 55;
	background: var(--mp-bg);
	padding: 14px 0;
	box-shadow: 0 10px 18px -12px rgba(32, 30, 29, 0.18);
	margin-top: 14px;
}
.mp-ui .mp-fbar-row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; position: relative; }
.mp-ui .mp-pill { position: relative; flex: 1 1 0; min-width: 0; max-width: 300px; display: flex; }
.mp-ui .mp-pill-btn {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	min-height: 52px;
	padding: 8px 12px;
	border-radius: 10px;
	border: 2px solid var(--mp-line);
	background: #fff;
	color: var(--mp-text);
	text-align: left;
	transition: border-color 0.15s;
}
.mp-ui .mp-pill-btn:hover, .mp-ui .mp-pill-btn:focus { border-color: var(--mp-accent); background: #fff; color: var(--mp-text); }
.mp-ui .mp-pill-btn.is-active { border-color: var(--mp-text); }
.mp-ui .mp-pill.is-open .mp-pill-btn { border-color: var(--mp-accent); }
.mp-ui .mp-pill-img { width: 26px; height: 26px; flex: none; object-fit: contain; border-radius: 7px; border: 1px solid var(--mp-line); background: #fff; }
.mp-ui .mp-pill-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mp-ui .mp-pill-k { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-ui .mp-pill-v { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; font-size: 13px; line-height: 1.2; }
.mp-ui .mp-pill-v > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-ui .mp-pill-v .mp-i { transition: transform 0.15s; }
.mp-ui .mp-pill.is-open .mp-pill-v .mp-i { transform: rotate(180deg); }

.mp-ui .mp-allbtn {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 16px;
	border-radius: 10px;
	border: 2px solid var(--mp-text);
	background: #fff;
	color: var(--mp-text);
	font-weight: 800;
	font-size: 13px;
	white-space: nowrap;
}
.mp-ui .mp-allbtn:hover, .mp-ui .mp-allbtn:focus { background: #fff; color: var(--mp-text); border-color: var(--mp-accent); }
.mp-ui .mp-allbtn.is-open, .mp-ui .mp-allbtn.is-open:hover { background: var(--mp-accent); border-color: var(--mp-accent); color: #fff; }
.mp-ui .mp-allbtn-s { display: none; }
.mp-ui .mp-badge { min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--mp-accent); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.mp-ui .mp-allbtn.is-open .mp-badge { background: #fff; color: var(--mp-accent); }

.mp-ui .mp-pop {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 70;
	width: max(300px, 100%);
	max-width: min(380px, calc(100vw - 32px));
	background: #fff;
	border: 2px solid var(--mp-text);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(20, 18, 17, 0.18);
	padding: 14px 16px 16px;
	text-align: left;
}
.mp-ui .mp-pop.is-right { left: auto; right: 0; }
.mp-ui .mp-pop-head, .mp-ui .mp-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mp-ui .mp-pop-title { font-weight: 800; font-size: 16px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-ui .mp-pop-hint { font-size: 12px; opacity: 0.6; margin: 4px 0 14px; }
.mp-ui .mp-pop-clear { margin-top: 14px; height: 38px; }

.mp-ui .mp-opt-list { display: flex; flex-direction: column; gap: 2px; }
.mp-ui .mp-opt-list.is-scroll {
	max-height: min(320px, calc(100vh - 330px));
	min-height: 120px;
	overflow-y: auto;
	padding-right: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--mp-line-2) transparent;
}
.mp-ui .mp-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 9px;
	font-size: 13px;
	color: var(--mp-text);
}
.mp-ui .mp-opt:hover, .mp-ui .mp-opt:focus { background: var(--mp-bg); color: var(--mp-text); }
.mp-ui .mp-opt.is-sub { padding-left: 46px; font-size: 12.5px; }
.mp-ui .mp-opt-all { font-weight: 600; margin-bottom: 4px; }
.mp-ui .mp-opt-all.is-on { background: var(--mp-accent-100); }
.mp-ui .mp-opt-tick { color: var(--mp-accent); display: flex; }
.mp-ui .mp-opt-img { width: 32px; height: 32px; flex: none; object-fit: contain; border-radius: 6px; border: 1px solid var(--mp-line); background: #fff; }
.mp-ui .mp-opt-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-ui .mp-opt-count { font-size: 11px; opacity: 0.45; flex: none; }
.mp-ui .mp-box { width: 15px; height: 15px; flex: none; border: 2px solid var(--mp-line-2); border-radius: 3px; background: transparent; }
.mp-ui .mp-opt.is-radio .mp-box { border-radius: 50%; }
.mp-ui .mp-opt.is-on .mp-box { border-color: var(--mp-accent); background: var(--mp-accent); box-shadow: inset 0 0 0 2px #fff; }
.mp-ui .mp-opt.is-on { font-weight: 600; }
.mp-ui .mp-opt-find { height: 36px; font-size: 13px; margin: 0 0 10px; border-width: 1.5px; border-color: var(--mp-line-2); }

/* chips under the bar */
.mp-ui .mp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.mp-ui .mp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--mp-accent-100); color: var(--mp-accent-700); font-size: 12px; font-weight: 600; }
.mp-ui .mp-chip:hover, .mp-ui .mp-chip:focus { background: #f3d2d2; color: var(--mp-accent-700); }
.mp-ui .mp-clear { font-size: 12px; color: var(--mp-accent-700); margin-left: 4px; white-space: nowrap; }
.mp-ui .mp-clear:hover { color: var(--mp-accent); }

/* "Kõik filtrid" side drawer: full height under the header, part of the page — no dark overlay */
.mp-ui .mp-drawer {
	position: fixed;
	top: var(--mp-head-h, 0px);
	right: 0;
	bottom: 0;
	z-index: 70;
	width: min(400px, 92vw);
	background: #fff;
	border-left: 2px solid var(--mp-line);
	box-shadow: -16px 0 44px rgba(0, 0, 0, 0.18);
	display: flex;
	flex-direction: column;
	color: var(--mp-text);
	animation: mp-slide-r 0.18s ease-out;
}
@keyframes mp-slide-r { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.mp-ui .mp-drawer-head { padding: 18px 22px; border-bottom: 2px solid var(--mp-line); }
.mp-ui .mp-drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 22px; }
.mp-ui .mp-dsec { padding: 20px 0; border-bottom: 1px solid var(--mp-line); }
.mp-ui .mp-dsec:last-child { border-bottom: 0; }
.mp-ui .mp-dsec-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; margin-bottom: 12px; }
.mp-ui .mp-dsec .mp-opt { padding: 6px 8px; }
.mp-ui .mp-dsec .mp-opt.is-sub { padding-left: 42px; }
.mp-ui .mp-dsec .mp-opt-list.is-scroll { max-height: 288px; }
.mp-ui .mp-dsec .mp-range { margin-top: 0; }
.mp-ui .mp-drawer-foot { padding: 14px 22px; border-top: 2px solid var(--mp-line); }
.mp-ui .mp-drawer-foot .mp-btn { height: 38px; font-size: 13px; }
.mp-ui .mp-scrim { position: fixed; inset: 0; z-index: 54; background: transparent; }

/* price slider */
.mp-ui .mp-range { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.mp-ui .mp-range-vals { display: flex; align-items: center; gap: 8px; }
.mp-ui .mp-range-vals label { display: flex; align-items: center; gap: 6px; flex: 1; font-size: 13px; margin: 0; }
.mp-ui .mp-range-vals .mp-input { height: 38px; text-align: center; padding: 0 6px; -moz-appearance: textfield; }
.mp-ui .mp-range-track { position: relative; height: 24px; margin: 0 9px; }
.mp-ui .mp-range-track::before, .mp-ui .mp-range-fill { content: ""; position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; }
.mp-ui .mp-range-track::before { left: 0; right: 0; background: var(--mp-line); }
.mp-ui .mp-range-fill { background: var(--mp-text); left: 0; right: 0; }
.mp-ui .mp-range-track input[type="range"] {
	position: absolute;
	left: -9px;
	top: 0;
	width: calc(100% + 18px);
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.mp-ui .mp-range-track input[type="range"]::-webkit-slider-runnable-track { background: none; border: 0; height: 24px; }
.mp-ui .mp-range-track input[type="range"]::-moz-range-track { background: none; border: 0; }
.mp-ui .mp-range-track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: #fff; border: 2px solid var(--mp-text); cursor: grab; }
.mp-ui .mp-range-track input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--mp-text); cursor: grab; }

/* ---- results ---- */
.mp-ui .mp-results { padding: 28px 0 40px; }
.mp-ui .mp-results-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; border-bottom: 2px solid rgba(189, 0, 0, 0.14); padding-bottom: 16px; }
.mp-ui .mp-results-title { flex: 1 1 320px; min-width: 0; }
.mp-ui .mp-results-title .mp-kicker { font-size: 11px; letter-spacing: 0.1em; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-ui .mp-results-head h2 { font-size: 30px; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; }
.mp-ui .mp-results-count { font-size: 13px; opacity: 0.7; margin-top: 6px; }
.mp-ui .mp-results-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.mp-ui .mp-sort-form { margin: 0; display: flex; gap: 8px; }
.mp-ui .mp-sort { width: 210px; height: 38px; }
.mp-ui .mp-seg { display: flex; height: 38px; border: 2px solid var(--mp-text); border-radius: var(--mp-r); overflow: hidden; background: #fff; flex: none; }
.mp-ui .mp-seg a { display: inline-flex; align-items: center; padding: 0 14px; font-size: 12px; color: var(--mp-text); }
.mp-ui .mp-seg a + a { border-left: 2px solid var(--mp-line); }
.mp-ui .mp-seg a:hover { background: rgba(32, 30, 29, 0.07); color: var(--mp-text); }
.mp-ui .mp-seg a.is-on, .mp-ui .mp-seg a.is-on:hover { background: var(--mp-accent); color: var(--mp-bg); }

.mp-ui .mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; margin-top: 22px; }
.mp-ui .mp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--mp-line);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color 0.15s, box-shadow 0.15s;
	min-width: 0;
}
.mp-ui .mp-card:hover { border-color: var(--mp-text); box-shadow: var(--mp-shadow); }
.mp-ui .mp-card-media { display: flex; align-items: center; justify-content: center; height: 206px; padding: 28px; background: #fff; border-bottom: 1px solid var(--mp-line); }
.mp-ui .mp-card-media img { width: 100%; height: 150px; object-fit: contain; display: block; }
.mp-ui .mp-flags { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; }
.mp-ui .mp-flag { background: var(--mp-accent); color: var(--mp-bg); font-weight: 800; font-size: 11px; padding: 4px 9px; }
.mp-ui .mp-flag-fit { background: var(--mp-text); display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.mp-ui .mp-card-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.mp-ui .mp-card-brand { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mp-accent-700); min-height: 14px; }
.mp-ui .mp-card-title { font-weight: 600; font-size: 14px; line-height: 1.25; min-height: 35px; color: var(--mp-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mp-ui .mp-card-title:hover, .mp-ui .mp-card-title:focus { color: var(--mp-accent); }
.mp-ui .mp-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 11px; opacity: 0.6; }
.mp-ui .mp-card-sku { overflow-wrap: anywhere; }
.mp-ui .mp-card-size { font-size: 11px; opacity: 0.6; }
.mp-ui .mp-card-size b { font-weight: 600; }
.mp-ui .mp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--mp-line); }
.mp-ui .mp-price-tag { font-weight: 800; font-size: 20px; line-height: 1.05; display: flex; flex-direction: column; min-width: 0; }
.mp-ui .mp-price-tag del { font-weight: 400; font-size: 12px; opacity: 0.5; order: -1; }
.mp-ui .mp-price-tag ins { text-decoration: none; background: none; }
.mp-ui .mp-price-tag .screen-reader-text { display: none; }
.mp-ui .mp-card-foot .mp-btn { flex: none; }

.mp-ui .mp-table-wrap { overflow-x: auto; margin-top: 18px; }
.mp-ui .mp-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; border: 0; }
.mp-ui .mp-list { min-width: 640px; }
.mp-ui .mp-table th { text-align: left; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; padding: 10px 12px; border: 0; border-bottom: 2px solid var(--mp-line); background: none; }
.mp-ui .mp-table th.mp-num { text-align: right; }
.mp-ui .mp-table td { padding: 12px; border: 0; border-bottom: 1px solid var(--mp-line); vertical-align: middle; background: none; }
.mp-ui .mp-table tbody tr:hover td { background: rgba(32, 30, 29, 0.03); }
.mp-ui .mp-col-prod { width: 46%; }
.mp-ui .mp-row-prod { display: flex; align-items: center; gap: 12px; color: var(--mp-text); }
.mp-ui .mp-row-prod:hover .mp-row-title { color: var(--mp-accent); }
.mp-ui .mp-row-prod img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.mp-ui .mp-row-title { display: block; font-weight: 600; font-size: 13px; line-height: 1.25; }
.mp-ui .mp-row-price { font-weight: 800; font-size: 15px; white-space: nowrap; }
.mp-ui .mp-row-price del { font-weight: 400; font-size: 12px; opacity: 0.5; margin-right: 4px; }
.mp-ui .mp-row-price ins { text-decoration: none; background: none; }

.mp-ui .mp-empty { border: 2px solid var(--mp-text); border-radius: 14px; padding: 32px; margin-top: 24px; max-width: 560px; }
.mp-ui .mp-empty h3 { margin: 0 0 8px; font-size: 19px; }
.mp-ui .mp-empty p { font-size: 14px; opacity: 0.75; margin: 0 0 16px; }

.mp-ui .mp-pager { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 28px; border-top: 2px solid var(--mp-line); padding-top: 20px; font-size: 13px; }
.mp-ui .mp-pager .mp-btn { height: 44px; padding: 0 20px; }

.mp-ui .mp-ask { margin: 0 0 120px; border: 2px solid var(--mp-text); border-radius: 14px; padding: 22px 26px; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.mp-ui .mp-ask-copy { flex: 1 1 260px; }
.mp-ui .mp-ask-title { font-weight: 800; font-size: 16px; line-height: 1.2; }
.mp-ui .mp-ask p { font-size: 13px; opacity: 0.75; margin: 6px 0 0; }
.mp-ui .mp-ask .mp-btn { flex: none; height: 44px; }

/* "Küsi osa" modal — opens via #mp-ask even without JS */
.mp-ui.mp-modal { position: fixed; inset: 0; z-index: 100001; display: none; align-items: center; justify-content: center; padding: 20px; }
.mp-ui.mp-modal:target, .mp-ui.mp-modal.is-open { display: flex; }
.mp-ui.mp-modal.is-closed { display: none; }
.mp-ui .mp-modal-scrim { position: absolute; inset: 0; background: rgba(20, 18, 17, 0.55); }
.mp-ui .mp-modal-box { position: relative; background: #fff; border-radius: 16px; max-width: 440px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; padding: 28px; box-shadow: var(--mp-shadow-lg); }
.mp-ui .mp-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.mp-ui .mp-modal-title { font-weight: 800; font-size: 19px; }
.mp-ui .mp-modal-lede { font-size: 13px; opacity: 0.7; margin: 0 0 18px; }
.mp-ui .mp-modal-note { font-size: 13px; font-weight: 600; padding: 10px 12px; border-radius: 9px; margin: 6px 0 14px; }
.mp-ui .mp-modal-note.is-ok { background: #e7f3ea; color: #12692c; }
.mp-ui .mp-modal-note.is-err { background: var(--mp-accent-100); color: var(--mp-accent-700); }
.mp-ui .mp-modal-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.mp-ui .mp-modal-form .mp-input { height: 42px; }
.mp-ui .mp-modal-form textarea.mp-input { height: auto; }
.mp-ui .mp-modal-row { display: flex; gap: 10px; }
.mp-ui .mp-modal-row .mp-input:first-child { flex: 2; }
.mp-ui .mp-modal-row .mp-input:last-child { flex: 1; }
.mp-ui .mp-modal-form .mp-btn { margin-top: 4px; }
.mp-ui .mp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================================================================== *
 * Product page
 * ================================================================== */

.mp-ui .mp-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 24px 0; font-size: 12px; }
.mp-ui .mp-crumbs > a, .mp-ui .mp-crumbs > span { opacity: 0.7; }
.mp-ui .mp-crumbs .mp-sep { opacity: 0.3; }
.mp-ui .mp-crumbs-back { color: var(--mp-accent-700); opacity: 1 !important; }
.mp-ui .mp-crumbs a:hover { color: var(--mp-accent); opacity: 1; }
.mp-ui .mp-pdp { display: flex; flex-wrap: wrap; border-top: 2px solid var(--mp-line); margin: 0; padding: 0; float: none; width: auto; }
.mp-ui .mp-pdp-media { padding: 48px 60px 72px 0; flex: 1 1 420px; min-width: 300px; }
.mp-ui .mp-pdp-stage { background: #fff; border: 1px solid var(--mp-line); border-radius: 16px; padding: 36px; display: flex; align-items: center; justify-content: center; min-height: 420px; }
.mp-ui .mp-pdp-stage img { width: 100%; max-height: 360px; object-fit: contain; display: block; }
.mp-ui .mp-pdp-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 10px; margin-top: 10px; }
.mp-ui .mp-pdp-thumbs button { background: #fff; border: 1px solid var(--mp-line); border-radius: var(--mp-r); padding: 8px; height: 80px; display: flex; align-items: center; justify-content: center; }
.mp-ui .mp-pdp-thumbs button:hover, .mp-ui .mp-pdp-thumbs button:focus { border-color: var(--mp-text); background: #fff; }
.mp-ui .mp-pdp-thumbs button.is-on { border: 2px solid var(--mp-text); }
.mp-ui .mp-pdp-thumbs img { max-height: 100%; width: auto; object-fit: contain; }

.mp-ui .mp-pdp-info { border-left: 2px solid var(--mp-line); padding: 48px 0 72px 60px; flex: 1 1 420px; min-width: 300px; }
.mp-ui .mp-pdp-info > .mp-kicker { margin-bottom: 10px; }
.mp-ui .mp-pdp-title { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.08; margin: 0 0 14px; overflow-wrap: anywhere; }
.mp-ui .mp-pdp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; opacity: 0.7; margin-bottom: 22px; }
.mp-ui .mp-stars { color: var(--mp-accent); letter-spacing: 1px; }
.mp-ui .mp-pdp-price { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 16px; border-top: 2px solid var(--mp-line); border-bottom: 2px solid var(--mp-line); padding: 18px 0; margin-bottom: 22px; font-size: 13px; }
.mp-ui .mp-pdp-amount { font-weight: 800; font-size: 40px; line-height: 1; color: var(--mp-text); }
.mp-ui .mp-pdp-amount del { font-size: 20px; font-weight: 400; opacity: 0.5; margin-right: 6px; }
.mp-ui .mp-pdp-amount ins { text-decoration: none; background: none; }
.mp-ui .mp-pdp-vat { font-size: 12px; padding-bottom: 6px; }
.mp-ui .mp-pdp-price .mp-push { padding-bottom: 6px; }
.mp-ui .mp-pdp-buy { display: flex; gap: 12px; margin: 0 0 22px; }
.mp-ui .mp-qty { display: flex; align-items: center; border: 2px solid var(--mp-text); border-radius: 10px; overflow: hidden; height: 52px; flex: none; background: #fff; }
.mp-ui .mp-qty button { width: 44px; height: 100%; font-size: 18px; color: var(--mp-text); }
.mp-ui .mp-qty button:hover, .mp-ui .mp-qty button:focus { background: var(--mp-accent-100); color: var(--mp-text); }
.mp-ui .mp-qty input { width: 44px; height: 100%; border: 0; padding: 0; text-align: center; font-weight: 800; font-size: 15px; background: transparent; color: var(--mp-text); -moz-appearance: textfield; appearance: textfield; box-shadow: none; }
.mp-ui .mp-qty input::-webkit-outer-spin-button, .mp-ui .mp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mp-ui .mp-pdp-add { height: 52px; flex: 1; justify-content: space-between; padding: 0 20px; font-size: 15px; min-width: 0; }
.mp-ui .mp-pdp-total { font-weight: 800; }
.mp-ui .mp-pdp-oos { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 22px; font-size: 14px; }
.mp-ui .mp-pdp-oos p { flex: 1 1 220px; opacity: 0.75; }

/* WooCommerce's own add-to-cart form (variations, grouped, external) in our look */
.mp-ui .mp-pdp-woo { margin-bottom: 22px; }
.mp-ui .mp-pdp-woo form.cart { margin: 0; }
.mp-ui .mp-pdp-woo table.variations { width: 100%; border: 0; margin: 0 0 14px; border-collapse: collapse; }
.mp-ui .mp-pdp-woo table.variations th, .mp-ui .mp-pdp-woo table.variations td { display: block; padding: 0; border: 0; background: none; text-align: left; }
.mp-ui .mp-pdp-woo table.variations tr { display: block; margin-bottom: 12px; }
.mp-ui .mp-pdp-woo table.variations label { display: block; font-size: 12px; font-weight: 400; opacity: 0.7; margin-bottom: 5px; }
.mp-ui .mp-pdp-woo table.variations select {
	width: 100%; height: 46px; padding: 0 36px 0 12px; font-size: 14px; color: var(--mp-text);
	background: #fff linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 17px) 50% / 5px 5px no-repeat, #fff linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 12px) 50% / 5px 5px no-repeat;
	border: 2px solid var(--mp-text); border-radius: var(--mp-r); appearance: none; -webkit-appearance: none; margin: 0;
}
.mp-ui .mp-pdp-woo .reset_variations { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--mp-accent-700); }
.mp-ui .mp-pdp-woo .woocommerce-variation { margin-bottom: 12px; font-size: 13px; }
.mp-ui .mp-pdp-woo .woocommerce-variation-price .price { font-weight: 800; font-size: 22px; }
.mp-ui .mp-pdp-woo .woocommerce-variation-add-to-cart, .mp-ui .mp-pdp-woo form.cart:not(.variations_form) { display: flex; gap: 12px; flex-wrap: wrap; }
.mp-ui .mp-pdp-woo .quantity { margin: 0; }
.mp-ui .mp-pdp-woo .quantity .qty { width: 72px; height: 52px; border: 2px solid var(--mp-text); border-radius: 10px; text-align: center; font-weight: 800; font-size: 15px; padding: 0; background: #fff; color: var(--mp-text); }
.mp-ui .mp-pdp-woo .single_add_to_cart_button, .mp-ui .mp-pdp-woo button.button, .mp-ui .mp-pdp-woo a.button {
	flex: 1; height: 52px; padding: 0 20px; border: 2px solid var(--mp-accent); border-radius: 10px; background: var(--mp-accent); color: #fff;
	font-family: var(--mp-font); font-weight: 800; font-size: 15px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.mp-ui .mp-pdp-woo .single_add_to_cart_button:hover, .mp-ui .mp-pdp-woo button.button:hover, .mp-ui .mp-pdp-woo a.button:hover { background: var(--mp-accent-600); border-color: var(--mp-accent-600); color: #fff; }
.mp-ui .mp-pdp-woo .single_add_to_cart_button.disabled { opacity: 0.45; cursor: not-allowed; }
.mp-ui .mp-pdp-woo .stock { font-size: 13px; margin: 0 0 8px; }
.mp-ui .mp-pdp-woo table.group_table { width: 100%; margin-bottom: 14px; }
.mp-ui .mp-pdp-woo table.group_table td { padding: 8px 6px; border-bottom: 1px solid var(--mp-line); }

.mp-ui .mp-assure { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--mp-line); border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
.mp-ui .mp-assure > div { padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.4; }
.mp-ui .mp-assure > div + div { border-left: 1px solid var(--mp-line); }
.mp-ui .mp-assure .mp-i { color: var(--mp-accent); margin-top: 1px; }
.mp-ui .mp-fitbox { border: 2px solid var(--mp-text); border-radius: 14px; padding: 18px; margin-bottom: 24px; }
.mp-ui .mp-fitbox .mp-dsec-label { margin-bottom: 10px; }
.mp-ui .mp-fitbox-title { font-weight: 800; font-size: 17px; margin-bottom: 10px; }
.mp-ui .mp-fitbox-title:last-child { margin-bottom: 0; }
.mp-ui .mp-fitlist { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-ui .mp-specs td:first-child { width: 44%; opacity: 0.6; }
.mp-ui .mp-specs td { padding: 10px 12px 10px 0; }
.mp-ui .mp-specs strong { font-weight: 600; }

.mp-ui .mp-pdp-sec { border-top: 2px solid var(--mp-line); padding: 36px 0; }
.mp-ui .mp-pdp-sec h3 { font-size: 22px; margin: 0 0 16px; }
.mp-ui .mp-prose { font-size: 15px; line-height: 1.7; max-width: 74ch; opacity: 0.85; }
.mp-ui .mp-prose p, .mp-ui .mp-prose ul, .mp-ui .mp-prose ol { margin: 0 0 1em; }
.mp-ui .mp-prose ul { list-style: disc; padding-left: 1.3em; }
.mp-ui .mp-prose ol { list-style: decimal; padding-left: 1.3em; }
.mp-ui .mp-prose a { color: var(--mp-accent-700); text-decoration: underline; }
.mp-ui .mp-prose img { height: auto; border-radius: 10px; }
.mp-ui .mp-prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.mp-ui .mp-prose td, .mp-ui .mp-prose th { border-bottom: 1px solid var(--mp-line); padding: 6px 8px; text-align: left; }
.mp-ui .mp-related { padding: 44px 0 120px; }
.mp-ui .mp-related h3 { margin-bottom: 26px; }
.mp-ui .mp-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; }
.mp-ui .mp-rcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mp-line); border-radius: 14px; overflow: hidden; color: var(--mp-text); transition: border-color 0.15s; }
.mp-ui .mp-rcard:hover, .mp-ui .mp-rcard:focus { border-color: var(--mp-text); color: var(--mp-text); }
.mp-ui .mp-rcard-media { display: flex; align-items: center; justify-content: center; padding: 18px; border-bottom: 1px solid var(--mp-line); }
.mp-ui .mp-rcard-media img { width: 100%; height: 130px; object-fit: contain; }
.mp-ui .mp-rcard-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mp-ui .mp-rcard-title { font-weight: 600; font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-ui .mp-rcard-price { font-weight: 800; font-size: 17px; margin-top: auto; }
.mp-ui .mp-rcard-price del { font-weight: 400; font-size: 12px; opacity: 0.5; margin-right: 4px; }
.mp-ui .mp-rcard-price ins { text-decoration: none; background: none; }
.mp-ui.mp-reviews { padding-bottom: 80px; }
.mp-ui.mp-reviews .mp-wrap { max-width: 1440px; }

/* ================================================================== *
 * Footer
 * ================================================================== */

.mp-ui.mp-footer { border-top: 2px solid var(--mp-text); background: var(--mp-surface); }
.mp-ui .mp-footer-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; padding-top: 64px; padding-bottom: 64px; }
.mp-ui .mp-footer-brand { display: inline-flex; margin-bottom: 14px; }
.mp-ui .mp-logo-lg { width: auto; height: 76px; max-width: 160px; object-fit: contain; display: block; }
.mp-ui.mp-footer p { font-size: 13px; opacity: 0.7; max-width: 34ch; }
.mp-ui .mp-footer-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.mp-ui .mp-footer-list a:hover { color: var(--mp-accent); }
.mp-ui .mp-footer-bar { border-top: 1px solid var(--mp-line); }
.mp-ui .mp-footer-bar .mp-wrap { padding-top: 20px; padding-bottom: 20px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.55; }

/* ================================================================== *
 * Responsive
 * ================================================================== */

@media (max-width: 1100px) {
	.mp-ui .mp-nav-in { gap: 20px; }
	.mp-ui .mp-masthead-in { gap: 14px 20px; }
}

@media (max-width: 859px) {
	.mp-ui .mp-only-desk, .mp-ui.mp-only-desk { display: none !important; }
	.mp-ui .mp-only-mob { display: flex; }
	.mp-ui.mp-only-mob { display: block; }
	.mp-ui .mp-swipe-hint.mp-only-mob { display: flex; }
	.mp-ui .mp-subsel.mp-only-mob { display: block; }

	.mp-ui.mp-utility, .mp-ui .mp-nav { display: none; }

	.mp-ui .mp-masthead { border-bottom-width: 2px; }
	.mp-ui .mp-masthead-in { flex-wrap: wrap; gap: 10px 14px; padding-top: 10px; padding-bottom: 10px; }
	.mp-ui .mp-brand { flex: 1; justify-content: center; }
	.mp-ui .mp-logo { height: 40px; }
	.mp-ui .mp-header-actions { gap: 6px; margin-left: 0; }
	.mp-ui .mp-search { display: none; order: 9; flex: 1 1 100%; min-width: 0; max-width: none; padding-bottom: 4px; }
	.mp-ui.mp-header.is-search .mp-search { display: block; }
	.mp-ui .mp-search-row { box-shadow: 0 6px 18px rgba(32, 30, 29, 0.12); border-radius: 10px; }
	.mp-ui .mp-search-input, .mp-ui .mp-search-go { height: 42px; }
	.mp-ui .mp-search-input { border-radius: 10px 0 0 10px; }
	.mp-ui .mp-search-go { border-radius: 0 10px 10px 0; padding: 0 16px; }
	.mp-ui .mp-suggest { max-height: 60vh; }
	.mp-ui .mp-sug-cols { grid-template-columns: 1fr; }
	.mp-ui .mp-sug-cols > div:first-child { border-right: 0; }

	.mp-ui .mp-cart { width: 36px; height: 36px; padding: 0; justify-content: center; border-color: transparent; }
	.mp-ui .mp-cart .mp-i { width: 20px; height: 20px; }
	.mp-ui .mp-cart-label { display: none; }
	.mp-ui .mp-cart-badge:not([data-count="0"]) { display: block; }
	.mp-ui .mp-cart-panel {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		border-radius: 18px 18px 0 0;
		border-width: 2px 0 0;
		box-shadow: 0 -18px 44px rgba(20, 18, 17, 0.22);
		z-index: 100000;
	}
	.mp-ui .mp-cart-inner { max-height: 82vh; }
	.mp-ui .mp-cart-foot { padding-bottom: calc(15px + env(safe-area-inset-bottom)); }

	.mp-ui .mp-sec-head { padding: 24px 0 14px; }
	.mp-ui .mp-sec-head h2 { font-size: 20px; }
	.mp-ui .mp-tile { flex: 0 0 92px; min-width: 92px; padding: 11px 8px; }
	.mp-ui .mp-tile-img { height: 44px; margin-bottom: 6px; }
	.mp-ui .mp-tile-img img { max-height: 44px; }
	.mp-ui .mp-tile-label { font-size: 12px; }
	.mp-ui .mp-tile-label.is-sm { font-size: 11px; }
	.mp-ui .mp-tile-label.is-xs { font-size: 10px; }
	.mp-ui .mp-rail-btn { width: 34px; height: 34px; }
	.mp-ui .mp-rail-btn.is-prev { left: -8px; }
	.mp-ui .mp-rail-btn.is-next { right: -8px; }
	.mp-ui .mp-subs { margin-top: 16px; padding-top: 14px; }
	.mp-ui .mp-subs-title { margin-bottom: 8px; }

	.mp-ui.mp-fbar { padding: 10px 0; margin-top: 10px; }
	.mp-ui .mp-fbar-row { gap: 6px; }
	.mp-ui .mp-pill-btn { padding: 7px 8px; gap: 6px; min-height: 48px; }
	.mp-ui .mp-pill-img { display: none; }
	.mp-ui .mp-pill-k { font-size: 9px; letter-spacing: 0.05em; }
	.mp-ui .mp-pill-v { font-size: 12px; gap: 4px; }
	.mp-ui .mp-allbtn { padding: 0 12px; gap: 6px; min-height: 48px; }
	.mp-ui .mp-allbtn-l { display: none; }
	.mp-ui .mp-allbtn-s { display: inline; }

	/* pill dropdowns + drawer become bottom sheets */
	.mp-ui .mp-pop,
	.mp-ui .mp-drawer {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: none;
		max-height: min(82vh, calc(100vh - var(--mp-head-h, 0px) - 12px));
		border: 0;
		border-top: 2px solid var(--mp-text);
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -18px 44px rgba(20, 18, 17, 0.22);
		z-index: 100000;
		animation: mp-slide-up 0.18s ease-out;
	}
	@keyframes mp-slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
	.mp-ui .mp-pop { overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
	.mp-ui .mp-pop.is-right { right: 0; }
	.mp-ui .mp-opt-list.is-scroll { max-height: 48vh; }
	.mp-ui .mp-drawer-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
	.mp-ui .mp-scrim { background: rgba(20, 18, 17, 0.4); z-index: 99999; }
	.mp-ui .mp-opt { min-height: 44px; }

	.mp-ui .mp-results { padding-top: 22px; }
	.mp-ui .mp-results-head { flex-direction: column; align-items: stretch; gap: 16px; }
	.mp-ui .mp-results-title { flex: none; }
	.mp-ui .mp-results-head h2 { font-size: 24px; }
	.mp-ui .mp-results-tools { flex-wrap: nowrap; justify-content: space-between; }
	.mp-ui .mp-sort-form { flex: 1; min-width: 0; }
	.mp-ui .mp-sort { width: 100%; }
	.mp-ui .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.mp-ui .mp-card-media { height: 150px; padding: 14px; }
	.mp-ui .mp-card-media img { height: 120px; }
	.mp-ui .mp-card-body { padding: 12px; gap: 8px; }
	.mp-ui .mp-card-title { font-size: 13px; min-height: 33px; }
	.mp-ui .mp-card-foot { flex-wrap: wrap; gap: 8px; }
	.mp-ui .mp-price-tag { font-size: 17px; }
	.mp-ui .mp-card-foot .mp-btn { width: 100%; }
	.mp-ui .mp-ask { margin-bottom: 64px; padding: 18px; }
	.mp-ui .mp-ask .mp-btn { width: 100%; }

	.mp-ui.mp-fitbar .mp-fitbar-in { gap: 14px 24px; padding-top: 22px; padding-bottom: 22px; }
	.mp-ui .mp-fitbar-value { font-size: 22px; }
	.mp-ui .mp-fitbar-cell { border-left: 0; padding-left: 0; }
	.mp-ui .mp-fitbar-actions { margin-left: 0; width: 100%; }

	.mp-ui .mp-pdp-media { padding: 20px 0 28px; min-width: 0; }
	.mp-ui .mp-pdp-stage { min-height: 280px; padding: 20px; }
	.mp-ui .mp-pdp-stage img { max-height: 260px; }
	.mp-ui .mp-pdp-info { border-left: 0; border-top: 2px solid var(--mp-line); padding: 28px 0 48px; min-width: 0; }
	.mp-ui .mp-pdp-amount { font-size: 32px; }
	.mp-ui .mp-pdp-add { padding: 0 14px; font-size: 14px; }
	.mp-ui .mp-assure > div + div { border-left: 0; border-top: 1px solid var(--mp-line); }
	.mp-ui .mp-related { padding-bottom: 64px; }
	.mp-ui .mp-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.mp-ui .mp-footer-in { grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 40px; padding-bottom: 40px; }
	.mp-ui .mp-footer-in > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
	/* WordPress's admin bar stops being fixed here */
	.mp-ui.mp-header { top: 0; }
}

@media (max-width: 420px) {
	.mp-ui .mp-field-row { grid-template-columns: 1fr; }
	.mp-ui .mp-modal-row { flex-direction: column; }
	.mp-ui .mp-modal-box { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.mp-ui *, .mp-ui *::before, .mp-ui *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
	.mp-ui.mp-utility, .mp-ui.mp-header, .mp-ui.mp-fbar, .mp-ui.mp-mnav, .mp-ui.mp-modal { display: none !important; }
}

/* WooCommerce reviews (its own template), in our look */
.mp-ui.mp-reviews #reviews { border-top: 2px solid var(--mp-line); padding-top: 36px; }
.mp-ui.mp-reviews h2, .mp-ui.mp-reviews .comment-reply-title { font-size: 22px; font-weight: 800; margin: 0 0 14px; display: block; }
.mp-ui.mp-reviews p { margin: 0 0 12px; font-size: 14px; }
.mp-ui.mp-reviews .commentlist { margin: 0 0 24px; }
.mp-ui.mp-reviews .commentlist li { border-bottom: 1px solid var(--mp-line); padding: 14px 0; }
.mp-ui.mp-reviews .commentlist img.avatar { float: left; width: 40px; height: 40px; border-radius: 50%; margin-right: 12px; }
.mp-ui.mp-reviews .star-rating { color: var(--mp-accent); }
.mp-ui.mp-reviews #review_form_wrapper { max-width: 640px; }
.mp-ui.mp-reviews label { display: block; font-size: 12px; opacity: 0.75; margin-bottom: 5px; }
.mp-ui.mp-reviews input[type="text"], .mp-ui.mp-reviews input[type="email"], .mp-ui.mp-reviews textarea, .mp-ui.mp-reviews select {
	width: 100%; min-height: 42px; padding: 8px 12px; font-size: 14px; color: var(--mp-text); background: #fff;
	border: 2px solid var(--mp-text); border-radius: var(--mp-r); box-shadow: none;
}
.mp-ui.mp-reviews .comment-form-cookies-consent label { display: inline; opacity: 1; }
.mp-ui.mp-reviews .comment-form-cookies-consent input { margin-right: 6px; }
.mp-ui.mp-reviews p.stars a { color: var(--mp-accent); font-size: 20px; }
.mp-ui.mp-reviews .form-submit input[type="submit"], .mp-ui.mp-reviews .form-submit .submit {
	height: 44px; padding: 0 22px; border: 2px solid var(--mp-accent); border-radius: var(--mp-r); background: var(--mp-accent);
	color: #fff; font-family: var(--mp-font); font-weight: 800; font-size: 14px; cursor: pointer;
}
.mp-ui.mp-reviews .form-submit input[type="submit"]:hover { background: var(--mp-accent-600); border-color: var(--mp-accent-600); }
.mp-ui .mp-pdp-woo .variations select:focus { outline: none; box-shadow: 0 0 0 3px var(--mp-accent-100); }