/* ==========================================================================
   marketplace-frontend — brand-neutral design system.

   Structure:  1 tokens  2 base  3 primitives (icons, buttons, forms, chips)
               4 chrome (header, footer, toast)  5 catalog  6 product page
               7 cart + checkout  8 account (orders, profile, login)

   Hosts re-skin the library by overriding --mp-* tokens in their own
   stylesheet loaded AFTER this file. The library never loads fonts: a host
   ships its @font-face rules and points --mp-font-text / --mp-font-display /
   --mp-font-mono at them. See examples/host-template/theme.css.

   Class prefix is .mp-*; BEM-ish: .mp-block, .mp-block__part, .mp-block--mod.
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
    color-scheme: light;

    /* Surfaces, lowest to highest. */
    --mp-bg: #f5f6f8;
    --mp-bg-alt: #eceef2;
    --mp-surface: #ffffff;
    --mp-surface-2: #f1f3f6;
    --mp-well-1: #fbfbfc;           /* image well, centre */
    --mp-well-2: #e4e7ec;           /* image well, edge */

    /* Text, strongest to weakest. fg-muted ≥ 7:1 and fg-subtle ≥ 4.5:1 on bg. */
    --mp-fg: #14171c;
    --mp-fg-muted: #4b5361;
    --mp-fg-subtle: #5c6573;

    --mp-border: #e0e3e9;
    --mp-border-strong: #c3c8d2;
    --mp-scroll-track: transparent;          /* scrollbars: track, thumb, thumb on hover */
    --mp-scroll-thumb: #c3c8d2;
    --mp-scroll-thumb-hover: #8d95a3;

    /* Accent. "primary" is the historical name hosts already override;
       accent / accent-fg are aliases that read better in new code. */
    --mp-primary: #3550e6;
    --mp-primary-hover: #2a43c9;
    --mp-primary-press: #2338ad;
    --mp-primary-fg: #ffffff;       /* text on a primary fill */
    --mp-primary-text: #2a43c9;     /* accent used as text/icon colour on bg/surface */
    --mp-primary-soft: rgba(53, 80, 230, 0.10);
    --mp-accent: var(--mp-primary);
    --mp-accent-fg: var(--mp-primary-fg);

    /* Status colours: the base is text-safe on surfaces, -soft is a tint. */
    --mp-success: #126a35;  --mp-success-soft: rgba(18, 106, 53, 0.11);
    --mp-warning: #8a5300;  --mp-warning-soft: rgba(197, 124, 0, 0.14);
    --mp-danger:  #b0212a;  --mp-danger-soft:  rgba(176, 33, 42, 0.10);
    --mp-info:    #1d62b8;  --mp-info-soft:    rgba(29, 98, 184, 0.10);

    /* Focus ring. */
    --mp-ring: #3550e6;
    --mp-ring-width: 2px;
    --mp-ring-offset: 2px;

    /* Overlays. */
    --mp-header-bg: rgba(245, 246, 248, 0.86);
    --mp-overlay: rgba(18, 20, 26, 0.5);

    /* Radii. */
    --mp-radius-xs: 6px;
    --mp-radius-sm: 8px;
    --mp-radius: 12px;              /* controls */
    --mp-radius-lg: 18px;           /* cards, panels */
    --mp-radius-pill: 999px;

    /* Spacing scale (4-pt). */
    --mp-space-1: 4px;  --mp-space-2: 8px;  --mp-space-3: 12px; --mp-space-4: 16px;
    --mp-space-5: 24px; --mp-space-6: 32px; --mp-space-7: 48px; --mp-space-8: 72px;

    /* Type. The library ships no fonts; these are system stacks. */
    --mp-font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mp-font-display: var(--mp-font-text);
    --mp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --mp-font: var(--mp-font-text);         /* legacy alias */
    --mp-mono: var(--mp-font-mono);         /* legacy alias */
    --mp-display-weight: 700;
    --mp-display-tracking: -0.01em;
    --mp-display-leading: 1.1;

    --mp-fs-xs: 0.75rem;
    --mp-fs-sm: 0.875rem;
    --mp-fs-md: 1rem;
    --mp-fs-lg: 1.125rem;
    --mp-fs-xl: 1.375rem;
    --mp-fs-2xl: 1.75rem;
    --mp-fs-3xl: 2.25rem;
    --mp-fs-4xl: clamp(2rem, 1.2rem + 3vw, 3.25rem);   /* page titles */
    --mp-fs-price: 1.625rem;                            /* card price */
    --mp-fs-price-lg: 2.5rem;                           /* product page price */

    /* Elevation. */
    --mp-shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.06);
    --mp-shadow-card: 0 0 0 1px rgba(20, 23, 28, 0.04), 0 1px 2px rgba(20, 23, 28, 0.05), 0 6px 16px -8px rgba(20, 23, 28, 0.1);
    --mp-shadow: var(--mp-shadow-card);
    --mp-shadow-pop: 0 0 0 1px rgba(20, 23, 28, 0.06), 0 2px 4px rgba(20, 23, 28, 0.06), 0 24px 48px -16px rgba(20, 23, 28, 0.24);

    /* Motion. */
    --mp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --mp-dur-fast: 120ms;
    --mp-dur: 180ms;
    --mp-dur-slow: 320ms;

    /* Layers. */
    --mp-z-sticky: 100;
    --mp-z-scrim: 290;
    --mp-z-drawer: 300;
    --mp-z-modal: 350;
    --mp-z-toast: 400;

    /* Layout. */
    --mp-container-max: 1320px;
    --mp-gutter: 24px;
    --mp-header-h: 68px;            /* hosts with a taller header raise this: sticky offsets follow */
    --mp-img-outline: oklch(0 0 0 / 0.1);   /* 1px edge on photos: pure black on light, pure white on dark */
    --mp-card-ratio: 1;             /* product image well aspect ratio */
    --mp-well-fit: contain;         /* contain | cover */
    --mp-well-blend: normal;        /* multiply for white-background packshots */
    --mp-sticky-top: calc(var(--mp-header-h) + var(--mp-space-4));
}

[data-theme="dark"], .mp-on-dark {
    color-scheme: dark;

    --mp-bg: #0e1013;
    --mp-bg-alt: #14171b;
    --mp-surface: #1a1d22;
    --mp-surface-2: #23272e;
    --mp-well-1: #2a2e36;
    --mp-well-2: #1d2026;

    --mp-fg: #eef0f3;
    --mp-fg-muted: #a6adb9;
    --mp-fg-subtle: #8b929e;

    --mp-border: #292d35;
    --mp-border-strong: #3c414c;
    --mp-scroll-thumb: #3c414c;
    --mp-scroll-thumb-hover: #5b616e;

    --mp-primary: #6f86ff;
    --mp-primary-hover: #8697ff;
    --mp-primary-press: #5b72f0;
    --mp-primary-fg: #0a0e26;
    --mp-primary-text: #93a3ff;
    --mp-primary-soft: rgba(111, 134, 255, 0.16);

    --mp-success: #4cd38f;  --mp-success-soft: rgba(76, 211, 143, 0.14);
    --mp-warning: #f2c14e;  --mp-warning-soft: rgba(242, 193, 78, 0.14);
    --mp-danger:  #ff7a7f;  --mp-danger-soft:  rgba(255, 122, 127, 0.14);
    --mp-info:    #72b7ff;  --mp-info-soft:    rgba(114, 183, 255, 0.14);

    --mp-ring: #93a3ff;
    --mp-img-outline: oklch(1 0 0 / 0.1);
    --mp-header-bg: rgba(14, 16, 19, 0.82);
    --mp-overlay: rgba(4, 5, 7, 0.66);

    --mp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --mp-shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.02);
    --mp-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    --mp-shadow-pop: 0 24px 60px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

@media (max-width: 760px) {
    :root { --mp-gutter: 16px; --mp-header-h: 116px; }
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--mp-header-h) + var(--mp-space-4));
}
html, body { margin: 0; padding: 0; }
body {
    background: var(--mp-bg);
    color: var(--mp-fg);
    font: 400 var(--mp-fs-md)/1.55 var(--mp-font-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--mp-font-display);
    font-weight: var(--mp-display-weight);
    letter-spacing: var(--mp-display-tracking);
    line-height: var(--mp-display-leading);
    text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--mp-primary-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--mp-primary); color: var(--mp-primary-fg); }

:focus-visible {
    outline: var(--mp-ring-width) solid var(--mp-ring);
    outline-offset: var(--mp-ring-offset);
    border-radius: var(--mp-radius-xs);
}

/* Scrollbars: thin and themed, on the page and on every inner scroll area. The standard
   properties cover Firefox and current Chromium; the ::-webkit rules cover older WebKit. */
html { scrollbar-color: var(--mp-scroll-thumb) var(--mp-bg); scrollbar-width: thin; }
* { scrollbar-color: var(--mp-scroll-thumb) var(--mp-scroll-track); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mp-scroll-track); }
html::-webkit-scrollbar-track { background: var(--mp-bg); }
::-webkit-scrollbar-thumb {
    background: var(--mp-scroll-thumb); border-radius: 999px;
    border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--mp-scroll-thumb-hover); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Layout */
.mp-container { width: 100%; max-width: var(--mp-container-max); margin: 0 auto; padding: 0 var(--mp-gutter); }
.mp-main { padding-block: var(--mp-space-4) var(--mp-space-7); min-height: 60vh; outline: none; }
.mp-stack { display: flex; flex-direction: column; gap: var(--mp-space-3); }
.mp-row   { display: flex; gap: var(--mp-space-3); align-items: center; }
.mp-grow  { flex: 1 1 auto; min-width: 0; }
.mp-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mp-space-3); }
.mp-cols-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--mp-space-3); }
.mp-grid { display: grid; gap: var(--mp-space-4); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.mp-skip {
    position: absolute; left: var(--mp-space-2); top: -64px; z-index: var(--mp-z-toast);
    background: var(--mp-primary); color: var(--mp-primary-fg); padding: 10px 16px;
    border-radius: var(--mp-radius-sm); font-weight: 600;
}
.mp-skip:focus { top: var(--mp-space-2); }

/* Typography helpers */
.mp-h1 { font-size: var(--mp-fs-3xl); margin: 0 0 var(--mp-space-4); }
.mp-h2 { font-size: var(--mp-fs-2xl); margin: 0 0 var(--mp-space-3); }
.mp-h3 { font-size: var(--mp-fs-xl);  margin: 0 0 var(--mp-space-2); }
.mp-title { font-size: var(--mp-fs-4xl); }
.mp-text-muted { color: var(--mp-fg-muted); }
.mp-text-subtle { color: var(--mp-fg-subtle); }
.mp-text-sm { font-size: var(--mp-fs-sm); }
.mp-text-xs { font-size: var(--mp-fs-xs); }
.mp-mono { font-family: var(--mp-font-mono); }
.mp-num { font-variant-numeric: tabular-nums lining-nums; }
.mp-vh {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── 3. Primitives ─────────────────────────────────────────────────────── */

/* Icons */
.mp-i {
    width: 1.25em; height: 1.25em; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round;
}
.mp-btn .mp-i, .mp-chip .mp-i, .mp-pill .mp-i, .mp-seg .mp-i { stroke-width: 2; }
.mp-i-spin { animation: mp-spin 0.8s linear infinite; }
@keyframes mp-spin { to { transform: rotate(360deg); } }

/* Buttons */
.mp-btn {
    --_bg: var(--mp-surface-2); --_fg: var(--mp-fg); --_bd: var(--mp-border-strong);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--mp-space-2);
    min-height: 44px; padding: 0 20px;
    border: 1px solid var(--_bd); border-radius: var(--mp-radius);
    background: var(--_bg); color: var(--_fg);
    font-weight: 600; font-size: var(--mp-fs-md); line-height: 1.2; text-align: center;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color var(--mp-dur) var(--mp-ease), border-color var(--mp-dur) var(--mp-ease),
                color var(--mp-dur) var(--mp-ease), transform var(--mp-dur-fast) var(--mp-ease);
}
.mp-btn:hover { --_bd: var(--mp-fg-subtle); text-decoration: none; }
.mp-btn:active { transform: scale(0.96); }
.mp-btn:disabled, .mp-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.mp-btn-primary { --_bg: var(--mp-primary); --_fg: var(--mp-primary-fg); --_bd: transparent; }
.mp-btn-primary:hover { --_bg: var(--mp-primary-hover); --_bd: transparent; }
.mp-btn-primary:active { --_bg: var(--mp-primary-press); }
.mp-btn-danger { --_bg: var(--mp-danger-soft); --_fg: var(--mp-danger); --_bd: transparent; }
.mp-btn-danger:hover { --_bd: var(--mp-danger); }
.mp-btn-ghost { --_bg: transparent; --_bd: transparent; }
.mp-btn-ghost:hover { --_bg: var(--mp-surface-2); --_bd: transparent; }
.mp-btn-lg { min-height: 52px; padding: 0 28px; font-size: var(--mp-fs-lg); border-radius: 14px; }
.mp-btn-sm { min-height: 40px; padding: 0 14px; font-size: var(--mp-fs-sm); border-radius: 10px; }
.mp-btn-icon { width: 44px; padding: 0; flex: none; }
.mp-btn-icon.mp-btn-sm { width: 40px; }
.mp-btn-block { width: 100%; }
.mp-btn.is-loading { pointer-events: none; opacity: 0.85; }

.mp-iconbtn {
    position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
    border: 1px solid transparent; border-radius: var(--mp-radius); background: transparent; color: inherit;
    transition: background-color var(--mp-dur) var(--mp-ease), transform var(--mp-dur-fast) var(--mp-ease);
}
.mp-iconbtn .mp-i { width: 22px; height: 22px; }
.mp-iconbtn:hover { background: var(--mp-surface-2); text-decoration: none; }
.mp-iconbtn:active { transform: scale(0.96); }
.mp-count {
    position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px;
    display: grid; place-items: center; border-radius: 9px;
    background: var(--mp-primary); color: var(--mp-primary-fg);
    font: 700 11px/1 var(--mp-font-text); font-variant-numeric: tabular-nums;
}

.mp-link-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px;
    border: 0; border-radius: var(--mp-radius-sm); background: transparent; color: var(--mp-fg-muted);
    font-size: var(--mp-fs-sm);
    transition: color var(--mp-dur), background-color var(--mp-dur);
}
.mp-link-btn:hover { color: var(--mp-danger); background: var(--mp-danger-soft); }
.mp-link-btn .mp-i { width: 18px; height: 18px; }
.mp-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-height: 44px; }

/* Form controls */
.mp-field { display: grid; gap: 6px; }
.mp-label, .mp-field > label {
    display: block; font-size: var(--mp-fs-sm); font-weight: 500; color: var(--mp-fg-muted);
}
.mp-label { margin-bottom: 6px; }
.mp-field > .mp-label { margin-bottom: 0; }
.mp-input, .mp-select, .mp-textarea {
    display: block; width: 100%; min-height: 46px; padding: 0 14px;
    border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius);
    background: var(--mp-surface); color: var(--mp-fg); font-size: var(--mp-fs-md);
    transition: border-color var(--mp-dur), box-shadow var(--mp-dur);
}
.mp-textarea { padding: 12px 14px; min-height: 96px; resize: vertical; }
.mp-input::placeholder, .mp-textarea::placeholder { color: var(--mp-fg-subtle); }
.mp-input:hover, .mp-select:hover, .mp-textarea:hover { border-color: var(--mp-fg-subtle); }
.mp-input:focus-visible, .mp-select:focus-visible, .mp-textarea:focus-visible {
    outline: none; border-color: var(--mp-primary);
    box-shadow: 0 0 0 3px var(--mp-primary-soft), 0 0 0 1px var(--mp-primary);
}
.mp-input[aria-invalid="true"], .mp-textarea[aria-invalid="true"] { border-color: var(--mp-danger); }
.mp-input:disabled, .mp-select:disabled, .mp-textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.mp-input[type="search"]::-webkit-search-cancel-button { display: none; }
.mp-field-error { display: none; align-items: center; gap: 6px; font-size: var(--mp-fs-sm); color: var(--mp-danger); }
.mp-field-error.is-shown, [aria-invalid="true"] ~ .mp-field-error { display: flex; }
.mp-field-hint { font-size: var(--mp-fs-sm); color: var(--mp-fg-subtle); }

.mp-sel { position: relative; }
.mp-sel .mp-select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.mp-sel > .mp-i {
    position: absolute; right: 12px; top: 50%; translate: 0 -50%;
    width: 18px; height: 18px; color: var(--mp-fg-muted); pointer-events: none;
}

.mp-check { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; font-size: var(--mp-fs-md); }
.mp-check input {
    appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center;
    width: 20px; height: 20px; margin: 0; cursor: pointer;
    border: 1.5px solid var(--mp-border-strong); border-radius: 6px; background: var(--mp-surface);
    transition: background-color var(--mp-dur), border-color var(--mp-dur);
}
.mp-check input:hover { border-color: var(--mp-fg-subtle); }
.mp-check input:checked { background: var(--mp-primary); border-color: var(--mp-primary); }
.mp-check input:checked::after {
    content: ""; width: 10px; height: 6px; translate: 0 -1px; rotate: -45deg;
    border-left: 2.2px solid var(--mp-primary-fg); border-bottom: 2.2px solid var(--mp-primary-fg);
}
.mp-check input[type="radio"] { border-radius: 50%; }
.mp-check input[type="radio"]:checked::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--mp-primary-fg); rotate: 0deg; translate: 0; }
.mp-check input:focus-visible { outline: var(--mp-ring-width) solid var(--mp-ring); outline-offset: var(--mp-ring-offset); }
.mp-check .mp-count-note { margin-left: auto; color: var(--mp-fg-subtle); font-size: var(--mp-fs-sm); font-variant-numeric: tabular-nums; }

.mp-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-3); min-height: 44px; cursor: pointer; }
.mp-switch input {
    appearance: none; -webkit-appearance: none; flex: none; position: relative; cursor: pointer;
    width: 44px; height: 26px; margin: 0; border-radius: 13px; background: var(--mp-border-strong);
    transition: background-color var(--mp-dur);
}
.mp-switch input::after {
    content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: translate var(--mp-dur) var(--mp-ease);
}
.mp-switch input:checked { background: var(--mp-primary); }
.mp-switch input:checked::after { translate: 18px 0; }
.mp-switch input:disabled { opacity: 0.5; cursor: not-allowed; }

.mp-range { width: 100%; accent-color: var(--mp-primary); height: 28px; }

/* Themed select (core/select.js): the native <select> is hidden but stays the source of truth */
.mp-dd__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mp-dd__btn { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-2); text-align: left; cursor: pointer; }
.mp-dd__btn:not(.mp-select) { min-height: 44px; padding: 0 40px 0 14px; border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius); background: var(--mp-surface); color: var(--mp-fg); }
.mp-dd__btn:not(.mp-select):focus-visible { outline: var(--mp-ring-width) solid var(--mp-ring); outline-offset: var(--mp-ring-offset); }
.mp-dd__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mp-dd__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-dd__btn > .mp-i { position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--mp-fg-muted); pointer-events: none; transition: rotate var(--mp-dur) var(--mp-ease); }
.mp-dd__btn[aria-expanded="true"] > .mp-i { rotate: 180deg; }
.mp-sel:has(.mp-dd__btn[aria-expanded="true"]) > .mp-i { rotate: 180deg; }
.mp-sel > .mp-i { transition: rotate var(--mp-dur) var(--mp-ease); }
.mp-dd__list {
    position: fixed; z-index: var(--mp-z-modal); margin: 0; padding: 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain;
    background: var(--mp-surface); color: var(--mp-fg); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow-pop); transform-origin: top center; animation: mp-dd-in var(--mp-dur-fast) var(--mp-ease) both;
}
.mp-dd__list.is-up { transform-origin: bottom center; }
@keyframes mp-dd-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
.mp-dd__list.is-up { animation-name: mp-dd-in-up; }
@keyframes mp-dd-in-up { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
.mp-dd__opt { display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-3); min-height: 40px; padding: 0 12px; border-radius: var(--mp-radius-xs); cursor: pointer; font-size: var(--mp-fs-md); }
.mp-dd__opt.is-active { background: var(--mp-surface-2); }
.mp-dd__opt[aria-selected="true"] { color: var(--mp-primary-text); font-weight: 600; }
.mp-dd__opt[aria-selected="true"].is-active { background: var(--mp-primary-soft); }
.mp-dd__opt[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.mp-dd__opt .mp-i { width: 16px; height: 16px; flex: none; stroke-width: 2.25; }
.mp-dd__group { padding: 10px 12px 4px; color: var(--mp-fg-subtle); font-size: var(--mp-fs-xs); font-weight: 600; }

/* Chips, segmented control */
.mp-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
    border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-pill);
    background: transparent; color: var(--mp-fg); font-size: var(--mp-fs-sm); font-weight: 500;
    white-space: nowrap; cursor: pointer; user-select: none;
    transition: background-color var(--mp-dur), border-color var(--mp-dur), color var(--mp-dur), transform var(--mp-dur-fast) var(--mp-ease);
}
.mp-chip:hover { border-color: var(--mp-fg-subtle); background: var(--mp-surface-2); text-decoration: none; }
.mp-chip:active { transform: scale(0.96); }
.mp-chip .mp-i { width: 16px; height: 16px; }
.mp-chip-sq { min-width: 52px; justify-content: center; padding: 0 10px; border-radius: 10px; font-variant-numeric: tabular-nums; }
label.mp-chip { position: relative; }
label.mp-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
label.mp-chip:has(input:checked) { background: var(--mp-primary); border-color: var(--mp-primary); color: var(--mp-primary-fg); }
label.mp-chip:has(input:focus-visible) { outline: var(--mp-ring-width) solid var(--mp-ring); outline-offset: var(--mp-ring-offset); }
.mp-chip[aria-pressed="true"] { background: var(--mp-primary); border-color: var(--mp-primary); color: var(--mp-primary-fg); }
.mp-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.mp-chip-active { background: var(--mp-primary-soft); border-color: transparent; color: var(--mp-primary-text); font-weight: 600; }
.mp-chip-active:hover { background: var(--mp-primary-soft); border-color: var(--mp-primary-text); }

.mp-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--mp-radius); background: var(--mp-bg-alt); border: 1px solid var(--mp-border); }
.mp-seg button {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
    border: 0; border-radius: 7px; background: transparent; color: var(--mp-fg-muted);
    font-weight: 600; font-size: var(--mp-fs-sm); white-space: nowrap;
    transition: background-color var(--mp-dur), color var(--mp-dur);
}
.mp-seg button:hover { color: var(--mp-fg); }
.mp-seg button[aria-pressed="true"], .mp-seg button[aria-selected="true"] { background: var(--mp-primary); color: var(--mp-primary-fg); }

/* Quantity stepper */
.mp-stepper { display: inline-flex; align-items: center; border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius); background: var(--mp-surface); }
.mp-stepper button {
    display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 11px; background: transparent;
    transition: background-color var(--mp-dur), transform var(--mp-dur-fast) var(--mp-ease);
}
.mp-stepper button:hover:not(:disabled) { background: var(--mp-surface-2); }
.mp-stepper button:active:not(:disabled) { transform: scale(0.96); }
.mp-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.mp-stepper output {
    min-width: 38px; text-align: center; font: 700 1.25rem/1 var(--mp-font-display); font-variant-numeric: tabular-nums;
}
.mp-stepper-sm button { width: 40px; height: 40px; }
.mp-stepper-sm output { min-width: 28px; font-size: 1.0625rem; }

/* Pills, badges, tags */
.mp-pill, .mp-badge {
    display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px;
    border-radius: var(--mp-radius-pill); background: var(--mp-surface-2); color: var(--mp-fg-muted);
    font-size: var(--mp-fs-xs); font-weight: 600; line-height: 1; white-space: nowrap;
}
.mp-pill { min-height: 28px; font-size: 0.8125rem; }
.mp-pill .mp-i { width: 15px; height: 15px; }
.mp-pill--info,    .mp-badge-info    { background: var(--mp-info-soft);    color: var(--mp-info); }
.mp-pill--warn,    .mp-badge-warning { background: var(--mp-warning-soft); color: var(--mp-warning); }
.mp-pill--ok,      .mp-badge-success { background: var(--mp-success-soft); color: var(--mp-success); }
.mp-pill--bad,     .mp-badge-danger  { background: var(--mp-danger-soft);  color: var(--mp-danger); }
.mp-pill--accent,  .mp-badge-accent  { background: var(--mp-primary-soft); color: var(--mp-primary-text); }
.mp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mp-success); box-shadow: 0 0 0 3px var(--mp-success-soft); flex: none; }
.mp-dot--warn { background: var(--mp-warning); box-shadow: 0 0 0 3px var(--mp-warning-soft); }
.mp-dot--bad { background: var(--mp-danger); box-shadow: 0 0 0 3px var(--mp-danger-soft); }

.mp-tags { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 64px); }
.mp-tag {
    display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 9px;
    border-radius: var(--mp-radius-pill); font-size: var(--mp-fs-xs); font-weight: 600; line-height: 1;
    background: color-mix(in srgb, var(--mp-surface) 90%, transparent); color: var(--mp-fg);
    box-shadow: 0 0 0 1px var(--mp-border); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.mp-tag .mp-i { width: 14px; height: 14px; stroke-width: 2; }
.mp-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.mp-tag--accent  { color: var(--mp-primary-text); box-shadow: 0 0 0 1px var(--mp-primary-text); }
.mp-tag--success { color: var(--mp-success); box-shadow: 0 0 0 1px var(--mp-success); }
.mp-tag--warning { color: var(--mp-warning); box-shadow: 0 0 0 1px var(--mp-warning); }
.mp-tag--info    { color: var(--mp-info);    box-shadow: 0 0 0 1px var(--mp-info); }

/* Surfaces */
.mp-card {
    background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg);
    padding: var(--mp-space-5); box-shadow: var(--mp-shadow-card);
}
.mp-card-hover { transition: border-color var(--mp-dur) var(--mp-ease), box-shadow var(--mp-dur-slow) var(--mp-ease); }
.mp-card-hover:hover { border-color: var(--mp-border-strong); }
.mp-note {
    display: flex; gap: var(--mp-space-3); padding: 14px 16px; border-radius: var(--mp-radius);
    background: var(--mp-info-soft); font-size: var(--mp-fs-sm); line-height: 1.5;
}
.mp-note .mp-i { color: var(--mp-info); margin-top: 1px; }
.mp-note--warn { background: var(--mp-warning-soft); }
.mp-note--warn .mp-i { color: var(--mp-warning); }

.mp-table { font-size: var(--mp-fs-sm); }
.mp-table th, .mp-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--mp-border); }
.mp-table th { font-weight: 600; color: var(--mp-fg-muted); font-size: var(--mp-fs-xs); letter-spacing: 0.02em; }

/* States */
.mp-loading { text-align: center; padding: 48px 24px; color: var(--mp-fg-muted); }
.mp-error {
    display: flex; align-items: center; gap: var(--mp-space-2); padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--mp-danger) 35%, transparent);
    background: var(--mp-danger-soft); color: var(--mp-danger); border-radius: var(--mp-radius);
}
.mp-empty { display: grid; justify-items: center; gap: var(--mp-space-3); text-align: center; padding: 48px 24px; color: var(--mp-fg-muted); }
.mp-empty--box { border: 1.5px dashed var(--mp-border-strong); border-radius: var(--mp-radius-lg); padding: 64px 24px; }
.mp-empty__ico {
    display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
    background: var(--mp-primary-soft); color: var(--mp-primary-text);
}
.mp-empty__ico .mp-i { width: 32px; height: 32px; }
.mp-empty h3 { font-size: var(--mp-fs-2xl); color: var(--mp-fg); }
.mp-empty p { max-width: 44ch; }
.mp-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: var(--mp-space-2); }

.mp-sk {
    background: linear-gradient(100deg, var(--mp-surface-2) 30%, var(--mp-border) 50%, var(--mp-surface-2) 70%);
    background-size: 300% 100%; animation: mp-shimmer 1.4s linear infinite; border-radius: var(--mp-radius-sm);
}
@keyframes mp-shimmer { to { background-position: -300% 0; } }
.mp-sk--well { aspect-ratio: var(--mp-card-ratio); border-radius: 10px; }
.mp-sk--line { height: 14px; margin-top: 12px; }
.mp-sk--line.w1 { width: 40%; } .mp-sk--line.w2 { width: 80%; height: 20px; } .mp-sk--line.w3 { width: 55%; } .mp-sk--line.w4 { width: 35%; height: 28px; margin-top: 20px; }

/* Modal (legacy, still used by hosts) */
.mp-modal-bg {
    position: fixed; inset: 0; z-index: var(--mp-z-modal); padding: var(--mp-space-4);
    display: flex; align-items: center; justify-content: center; background: var(--mp-overlay);
}
.mp-modal {
    width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: var(--mp-space-5);
    background: var(--mp-surface); color: var(--mp-fg); border-radius: var(--mp-radius-lg); box-shadow: var(--mp-shadow-pop);
}

.mp-scrim {
    position: fixed; inset: 0; z-index: var(--mp-z-scrim); background: var(--mp-overlay);
    opacity: 0; pointer-events: none; transition: opacity var(--mp-dur-slow) var(--mp-ease);
}
.mp-scrim.is-open { opacity: 1; pointer-events: auto; }

/* ── 4. Chrome: header, footer, toast ──────────────────────────────────── */
.mp-header {
    position: sticky; top: 0; z-index: var(--mp-z-sticky);
    background: var(--mp-header-bg); border-bottom: 1px solid var(--mp-border);
    backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.mp-header__row { display: flex; align-items: center; gap: var(--mp-space-4); min-height: var(--mp-header-h); }
.mp-logo {
    display: inline-flex; align-items: center; min-height: 44px; margin-right: var(--mp-space-2);
    font: var(--mp-display-weight) 1.5rem/1 var(--mp-font-display); letter-spacing: var(--mp-display-tracking);
    color: var(--mp-fg); white-space: nowrap;
}
.mp-logo:hover { text-decoration: none; }
.mp-nav { display: flex; gap: 2px; }
.mp-nav-link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px;
    font-weight: 500; color: var(--mp-fg-muted);
    transition: color var(--mp-dur), background-color var(--mp-dur);
}
.mp-nav-link:hover { color: var(--mp-fg); background: var(--mp-surface-2); text-decoration: none; }
.mp-nav-link.active { color: var(--mp-primary-text); }
.mp-search { position: relative; flex: 1; max-width: 520px; margin-left: auto; }
.mp-search .mp-input { padding-left: 44px; border-radius: 14px; background: var(--mp-surface); }
.mp-search > .mp-i { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--mp-fg-muted); pointer-events: none; }
.mp-header__actions { display: flex; align-items: center; gap: 2px; }
.mp-header__actions .mp-btn { margin-left: var(--mp-space-2); }
.mp-menu-btn, .mp-show-sm { display: none; }
.mp-mnav { border-top: 1px solid var(--mp-border); padding: var(--mp-space-2) var(--mp-gutter) var(--mp-space-4); display: grid; gap: 2px; }
.mp-mnav a, .mp-mnav button {
    display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: 10px;
    background: transparent; font-size: var(--mp-fs-lg); font-weight: 500; text-align: left; color: var(--mp-fg);
}
.mp-mnav a:hover, .mp-mnav button:hover { background: var(--mp-surface-2); text-decoration: none; }
@media (max-width: 1100px) { .mp-nav { display: none; } .mp-menu-btn { display: inline-grid; } }
@media (max-width: 760px) {
    .mp-header__row { flex-wrap: wrap; min-height: 0; padding-block: var(--mp-space-2) 10px; gap: 4px 8px; }
    .mp-search { order: 5; flex: 1 1 100%; max-width: none; margin: 0; }
    .mp-logo { margin-right: auto; font-size: 1.375rem; }
    .mp-header__actions .mp-btn, .mp-header__actions .mp-hide-sm { display: none; }
    .mp-header__actions .mp-show-sm { display: inline-grid; }
}

.mp-footer { margin-top: var(--mp-space-7); border-top: 1px solid var(--mp-border); color: var(--mp-fg-muted); }
.mp-footer__row {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: var(--mp-space-3) var(--mp-space-5); padding-block: var(--mp-space-5);
    font-size: var(--mp-fs-sm);
}
.mp-footer a { color: var(--mp-fg-muted); display: inline-flex; min-height: 36px; align-items: center; }
.mp-footer a:hover { color: var(--mp-fg); }

.mp-toasts {
    position: fixed; left: 50%; bottom: var(--mp-space-5); z-index: var(--mp-z-toast); translate: -50% 0;
    display: grid; justify-items: center; gap: var(--mp-space-2); width: max-content; max-width: calc(100vw - 32px);
    pointer-events: none;
}
.mp-toast {
    display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--mp-radius);
    background: var(--mp-fg); color: var(--mp-bg); font-weight: 500; box-shadow: var(--mp-shadow-pop);
    animation: mp-toast-in var(--mp-dur-slow) var(--mp-ease) both;
}
.mp-toast .mp-i { color: var(--mp-success); flex: none; }
:root:not([data-theme="dark"]) .mp-toast .mp-i { color: #4cd38f; }
.mp-toast--warn .mp-i, :root:not([data-theme="dark"]) .mp-toast--warn .mp-i { color: #f2c14e; }
.mp-toast--bad .mp-i, :root:not([data-theme="dark"]) .mp-toast--bad .mp-i { color: #ff7a7f; }
.mp-toast.is-leaving { animation: mp-toast-out var(--mp-dur) ease-out both; }
@keyframes mp-toast-in { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes mp-toast-out { to { opacity: 0; translate: 0 8px; } }
@media (max-width: 760px) { .mp-toasts { bottom: 88px; } }

.mp-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-block: var(--mp-space-4) var(--mp-space-2);
    font-size: var(--mp-fs-sm); color: var(--mp-fg-muted);
}
.mp-crumbs a { color: var(--mp-fg-muted); }
.mp-crumbs a:hover { color: var(--mp-fg); }
.mp-crumbs .mp-i { width: 14px; height: 14px; }
.mp-back {
    display: inline-flex; align-items: center; gap: var(--mp-space-2); min-height: 44px; margin-left: -8px; padding: 0 8px;
    border: 0; border-radius: var(--mp-radius-sm); background: transparent; color: var(--mp-fg-muted); font-weight: 500;
}
.mp-back:hover { color: var(--mp-fg); text-decoration: none; }

/* ── 5. Catalog ────────────────────────────────────────────────────────── */
.mp-page-head { margin-bottom: var(--mp-space-4); }

/* Product card */
.mp-well {
    position: relative; overflow: hidden; aspect-ratio: var(--mp-card-ratio); border-radius: 10px;
    background: radial-gradient(120% 100% at 50% 38%, var(--mp-well-1) 30%, var(--mp-well-2) 100%);
}
.mp-well--sq { --mp-card-ratio: 1; }
.mp-well::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--mp-img-outline); pointer-events: none; }
.mp-well img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--mp-well-fit);
    mix-blend-mode: var(--mp-well-blend);
}
.mp-well__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mp-fg-subtle); }
.mp-well__ph .mp-i { width: 36%; height: 36%; stroke-width: 1.25; opacity: 0.55; }

.mp-product {
    position: relative; display: flex; flex-direction: column; padding: 8px; border-radius: var(--mp-radius-lg);
    background: var(--mp-surface); border: 1px solid var(--mp-border); box-shadow: var(--mp-shadow-card);
    transition: border-color var(--mp-dur) var(--mp-ease), box-shadow var(--mp-dur-slow) var(--mp-ease);
}
.mp-product:hover { border-color: var(--mp-border-strong); }
.mp-product:has(.mp-product__title a:focus-visible) { outline: var(--mp-ring-width) solid var(--mp-ring); outline-offset: var(--mp-ring-offset); }
.mp-product__body { display: flex; flex: 1; flex-direction: column; gap: 2px; padding: 14px 8px 8px; }
.mp-product__vendor { font-size: var(--mp-fs-sm); color: var(--mp-fg-muted); font-weight: 500; }
.mp-product__title { margin-top: 2px; font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.mp-product__title a { color: var(--mp-fg); }
.mp-product__title a:hover { text-decoration: none; }
.mp-product__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mp-product__title a:focus-visible { outline: none; }
.mp-hl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin-top: 8px; }
.mp-hl li { color: var(--mp-fg-muted); font-size: var(--mp-fs-xs); font-weight: 500; padding: 3px 7px; border-radius: 6px; background: var(--mp-surface-2); font-variant-numeric: tabular-nums; }
.mp-hl li:first-child { padding: 0; background: none; color: var(--mp-fg); font: 600 1.125rem/1.2 var(--mp-font-display); }
.mp-stock { font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: var(--mp-space-2); margin-top: 10px; font-size: var(--mp-fs-sm); color: var(--mp-fg-muted); }
.mp-product__buy { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--mp-space-2); margin-top: auto; padding-top: 14px; }
.mp-product__ctl { display: flex; align-items: center; justify-content: flex-end; gap: 6px; position: relative; z-index: 2; min-width: 124px; min-height: 40px; }
.mp-product__ctl .mp-btn { min-height: 40px; }

/* Card cart control: icon button that widens into a stepper without moving the layout (the slot above keeps its width) */
.mp-cartctl { position: relative; flex: none; width: 40px; height: 40px; transition: width var(--mp-dur) var(--mp-ease); }
.mp-cartctl.is-active { width: 124px; }
.mp-cartctl__add, .mp-cartctl__step { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-cartctl__add { padding: 0; transition: opacity var(--mp-dur-fast) var(--mp-ease), scale var(--mp-dur-fast) var(--mp-ease); }
.mp-cartctl__step { justify-content: space-between; opacity: 0; scale: 0.9; transform-origin: right center; transition: opacity var(--mp-dur) var(--mp-ease), scale var(--mp-dur) var(--mp-ease); }
.mp-cartctl.is-active .mp-cartctl__add { opacity: 0; scale: 0.9; pointer-events: none; }
.mp-cartctl.is-active .mp-cartctl__step { opacity: 1; scale: 1; }
.mp-cartctl__step[inert] { visibility: hidden; transition: opacity var(--mp-dur) var(--mp-ease), scale var(--mp-dur) var(--mp-ease), visibility 0s linear var(--mp-dur); }
.mp-cartctl__add[inert] { visibility: hidden; transition: opacity var(--mp-dur-fast) var(--mp-ease), scale var(--mp-dur-fast) var(--mp-ease), visibility 0s linear var(--mp-dur-fast); }
.mp-price { display: block; font: 700 var(--mp-fs-price)/1 var(--mp-font-display); font-variant-numeric: tabular-nums; letter-spacing: var(--mp-display-tracking); white-space: nowrap; }
.mp-price-old { display: block; margin-bottom: 4px; font-size: var(--mp-fs-sm); color: var(--mp-fg-subtle); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.mp-per { display: block; margin-top: 5px; font-size: 0.8125rem; color: var(--mp-fg-muted); font-variant-numeric: tabular-nums; }
.mp-fav {
    position: absolute; right: 8px; top: 8px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px;
    border: 0; border-radius: 50%; background: transparent; color: #2a2d33;
    transition: color var(--mp-dur), transform var(--mp-dur-fast) var(--mp-ease);
}
.mp-fav::before {
    content: ""; position: absolute; inset: 7px; z-index: -1; border-radius: 50%;
    background: rgba(255, 255, 255, 0.82); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); transition: background-color var(--mp-dur);
}
.mp-fav:hover::before { background: #fff; }
.mp-fav:active { transform: scale(0.96); }
.mp-fav .mp-i { width: 19px; height: 19px; }
.mp-fav[aria-pressed="true"] { color: #d9382a; }
.mp-fav[aria-pressed="true"] .mp-i { fill: currentColor; }

/* Layout: filters + results */
.mp-catalog { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: var(--mp-space-6); align-items: start; }
.mp-filters {
    position: sticky; top: var(--mp-sticky-top); max-height: calc(100vh - var(--mp-sticky-top) - var(--mp-space-4));
    overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
    background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg); box-shadow: var(--mp-shadow-card);
}
.mp-filters__head, .mp-filters__foot { display: none; }
.mp-fgroup { padding: 4px 20px; border-bottom: 1px solid var(--mp-border); }
.mp-fgroup:last-child { border-bottom: 0; }
.mp-fgroup summary {
    display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-radius: 8px;
    font-weight: 600; cursor: pointer; list-style: none;
}
.mp-fgroup summary::-webkit-details-marker { display: none; }
.mp-fgroup summary .mp-i { width: 18px; height: 18px; color: var(--mp-fg-muted); transition: rotate var(--mp-dur) var(--mp-ease); }
.mp-fgroup[open] summary .mp-i { rotate: 180deg; }
.mp-fgroup__body { display: flex; flex-wrap: wrap; gap: var(--mp-space-2); padding-bottom: var(--mp-space-4); }
.mp-fgroup__body--col { display: grid; gap: 0; }
.mp-fgroup__more { grid-column: 1 / -1; justify-self: start; }
.mp-price-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mp-space-2); width: 100%; }
.mp-price-fields .mp-input { min-height: 42px; font-size: var(--mp-fs-sm); font-variant-numeric: tabular-nums; }
.mp-cat-link {
    display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--mp-radius-sm);
    background: transparent; color: var(--mp-fg); text-align: left; font-weight: 400;
}
.mp-cat-link:hover { background: var(--mp-surface-2); text-decoration: none; }
.mp-cat-link[aria-current="true"] { background: var(--mp-primary-soft); color: var(--mp-primary-text); font-weight: 600; }
.mp-cat-link--child { padding-left: 28px; }

.mp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-3); }
.mp-toolbar__count { margin-right: auto; color: var(--mp-fg-muted); font-variant-numeric: tabular-nums; }
.mp-toolbar__count b { margin-right: 6px; color: var(--mp-fg); font: 700 1.75rem/1 var(--mp-font-display); }
.mp-toolbar .mp-sel { min-width: 210px; }
.mp-toolbar .mp-select { min-height: 44px; font-size: var(--mp-fs-sm); }
.mp-filter-open { display: none; }
.mp-chips { display: flex; flex-wrap: wrap; gap: var(--mp-space-2); margin-top: var(--mp-space-4); }
.mp-chips:empty { display: none; }
.mp-results { margin-top: var(--mp-space-4); }
.mp-results[aria-busy="true"] { opacity: 0.6; transition: opacity var(--mp-dur); }

.mp-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 36px; }
.mp-pager a, .mp-pager span.mp-pager__gap {
    display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--mp-radius);
    color: var(--mp-fg); font-weight: 600; font-variant-numeric: tabular-nums;
    transition: background-color var(--mp-dur);
}
.mp-pager a:hover { background: var(--mp-surface-2); text-decoration: none; }
.mp-pager a[aria-current="page"] { background: var(--mp-primary); color: var(--mp-primary-fg); }
.mp-pager a[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }
.mp-pager__gap { color: var(--mp-fg-subtle); }

@media (max-width: 1023px) {
    .mp-catalog { grid-template-columns: 1fr; }
    .mp-filter-open { display: inline-flex; }
    .mp-filters {
        position: fixed; z-index: var(--mp-z-drawer); left: 0; right: 0; bottom: 0; top: auto; max-height: 88dvh;
        display: flex; flex-direction: column; overflow: hidden; border: 0; border-radius: 22px 22px 0 0; box-shadow: var(--mp-shadow-pop);
        translate: 0 105%; visibility: hidden;
        transition: translate var(--mp-dur-slow) var(--mp-ease), visibility 0s linear var(--mp-dur-slow);
    }
    .mp-filters.is-open { translate: 0 0; visibility: visible; transition: translate var(--mp-dur-slow) var(--mp-ease), visibility 0s; }
    .mp-filters__head { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--mp-border); }
    .mp-filters__head::before { content: ""; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; border-radius: 2px; background: var(--mp-border-strong); translate: -50% 0; }
    .mp-filters__head h2 { padding-top: 10px; font-size: var(--mp-fs-2xl); }
    .mp-filters__body { flex: 1; overflow: auto; overscroll-behavior: contain; }
    .mp-filters__foot { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--mp-border); background: var(--mp-surface); }
}
@media (max-width: 760px) {
    .mp-toolbar .mp-sel { min-width: 0; flex: 1; }
    .mp-toolbar__count { flex: 1 1 100%; order: -1; }
    .mp-filter-open { flex: 1; }
}
@media (max-width: 520px) {
    .mp-grid { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mp-product { padding: 6px; border-radius: 16px; }
    .mp-product__body { padding: 12px 6px 6px; }
    .mp-product__title { font-size: 1.0625rem; }
    .mp-price { font-size: 1.375rem; }
    .mp-product__buy { flex-direction: column; align-items: stretch; }
    .mp-product__ctl { flex-direction: column; align-items: stretch; min-width: 0; }
    .mp-product__ctl .mp-btn { width: 100%; }
    .mp-cartctl, .mp-cartctl.is-active { width: 100%; }
}

/* ── 6. Product page ───────────────────────────────────────────────────── */
.mp-pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--mp-space-7); align-items: start; }
.mp-gallery { position: sticky; top: var(--mp-sticky-top); display: grid; gap: var(--mp-space-3); }
.mp-gallery__main { position: relative; border-radius: 16px; }
.mp-gallery__main .mp-well { aspect-ratio: var(--mp-gallery-ratio, 1); border-radius: 16px; }
.mp-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--mp-space-3); }
.mp-thumb {
    position: relative; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 14px; background: transparent; opacity: 0.8;
    transition: border-color var(--mp-dur), opacity var(--mp-dur);
}
.mp-thumb:hover { opacity: 1; }
.mp-thumb[aria-current="true"] { border-color: var(--mp-primary); opacity: 1; }
.mp-thumb .mp-well { border-radius: 12px; }   /* thumb 14 - border 2 */
/* Gallery video tile and inline player */
.mp-well video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.mp-play {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: inline-flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 0 22px 0 18px; border: 0; border-radius: var(--mp-radius-pill);
    background: color-mix(in srgb, var(--mp-bg) 82%, transparent); color: var(--mp-fg); font-weight: 600;
    box-shadow: 0 0 0 1px var(--mp-border-strong), var(--mp-shadow-pop); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: scale var(--mp-dur-fast) var(--mp-ease), background-color var(--mp-dur);
}
.mp-play:hover { background: var(--mp-bg); text-decoration: none; }
.mp-play:active { scale: 0.96; }
.mp-play .mp-i:first-child { width: 22px; height: 22px; fill: currentColor; color: var(--mp-primary-text); }
.mp-play .mp-i:last-child:not(:first-child) { width: 16px; height: 16px; color: var(--mp-fg-muted); }
.mp-play-badge { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.28); color: #fff; }
.mp-play-badge .mp-i { width: 26px; height: 26px; fill: currentColor; }

/* «Открыть на …» marketplace buttons */
.mp-listings { display: flex; flex-wrap: wrap; gap: var(--mp-space-2); margin-top: var(--mp-space-4); }
.mp-listing { min-height: 52px; padding: 0 16px; gap: 12px; font-weight: 600; }
.mp-listing > .mp-i:first-child { width: 24px; height: 24px; color: var(--mp-primary-text); }
.mp-listing > .mp-i:last-child { width: 15px; height: 15px; color: var(--mp-fg-subtle); }
.mp-listing__text { display: grid; text-align: left; line-height: 1.2; }
.mp-listing__text small { margin-top: 2px; font-size: var(--mp-fs-xs); font-weight: 500; color: var(--mp-fg-muted); }
.mp-review__src { text-decoration: none; }
a.mp-review__src:hover { text-decoration: none; background: var(--mp-border); }
.mp-review__src .mp-i:last-child:not(:first-child) { width: 13px; height: 13px; }
.mp-pdp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-2); color: var(--mp-fg-muted); }
.mp-pdp h1 { margin-top: 10px; font-size: var(--mp-fs-4xl); }
.mp-rating { display: inline-flex; align-items: center; gap: var(--mp-space-2); min-height: 32px; margin-top: var(--mp-space-3); font-size: var(--mp-fs-sm); color: var(--mp-fg-muted); }
.mp-stars { display: inline-flex; gap: 2px; color: var(--mp-primary-text); }
.mp-stars .mp-i { width: 16px; height: 16px; fill: currentColor; stroke-width: 1.5; }
.mp-stars .off { fill: none; color: var(--mp-border-strong); }
.mp-keyspecs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--mp-space-2); margin-top: var(--mp-space-5); }
.mp-keyspec { padding: 12px 14px; border-radius: var(--mp-radius); background: var(--mp-surface); border: 1px solid var(--mp-border); }
.mp-keyspec .k { font-size: 0.8125rem; color: var(--mp-fg-muted); }
.mp-keyspec .v { margin-top: 4px; font: 700 1.375rem/1.1 var(--mp-font-display); font-variant-numeric: tabular-nums; }
.mp-buy {
    position: relative; overflow: hidden; margin-top: var(--mp-space-5); padding: var(--mp-space-5);
    border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); background: var(--mp-surface); box-shadow: var(--mp-shadow-card);
}
.mp-buy::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--mp-primary); }
.mp-buy .mp-price { font-size: var(--mp-fs-price-lg); }
.mp-buy__prices { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--mp-space-3) var(--mp-space-6); }
.mp-buy__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-3); margin-top: 20px; }
.mp-buy__row .mp-btn-lg { flex: 1; min-width: 200px; }
.mp-buy__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--mp-space-3); margin-top: 14px; color: var(--mp-fg-muted); }
.mp-buy__total b { font: 700 1.625rem/1 var(--mp-font-display); color: var(--mp-fg); font-variant-numeric: tabular-nums; }
.mp-variants { display: flex; flex-wrap: wrap; gap: var(--mp-space-2); margin-top: var(--mp-space-4); }
.mp-perks { display: grid; margin-top: var(--mp-space-4); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg); overflow: hidden; }
.mp-perks li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.mp-perks li + li { border-top: 1px solid var(--mp-border); }
.mp-perks .mp-i { width: 22px; height: 22px; color: var(--mp-primary-text); }
.mp-perks small { display: block; color: var(--mp-fg-muted); font-size: var(--mp-fs-sm); }
.mp-perks b { margin-left: auto; font-weight: 600; white-space: nowrap; }
.mp-sec { padding-top: var(--mp-space-7); }
.mp-sec h2 { margin-bottom: var(--mp-space-4); font-size: var(--mp-fs-3xl); }
.mp-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--mp-space-7); }
.mp-specs { overflow: hidden; border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg); background: var(--mp-surface); }
.mp-specs tr + tr { border-top: 1px solid var(--mp-border); }
.mp-specs th, .mp-specs td { padding: 13px 20px; text-align: left; vertical-align: top; font-size: var(--mp-fs-sm); }
.mp-specs th { width: 46%; font-weight: 400; color: var(--mp-fg-muted); }
.mp-specs td { font-weight: 500; font-variant-numeric: tabular-nums; }
.mp-tabs { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--mp-border); scrollbar-width: thin; }
.mp-tab {
    display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 48px; margin-bottom: -1px; padding: 0 18px;
    border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--mp-fg-muted);
    font-weight: 600; white-space: nowrap; transition: color var(--mp-dur), border-color var(--mp-dur);
}
.mp-tab:hover { color: var(--mp-fg); border-color: var(--mp-border-strong); }
.mp-tab[aria-selected="true"] { color: var(--mp-fg); border-color: var(--mp-primary); }
.mp-tab__count { min-width: 22px; padding: 2px 7px; border-radius: var(--mp-radius-pill); background: var(--mp-surface-2); color: var(--mp-fg-muted); font-size: var(--mp-fs-xs); text-align: center; font-variant-numeric: tabular-nums; }
.mp-tabpanel { padding-top: var(--mp-space-5); }
.mp-tabpanel[hidden] { display: none; }
/* Article typography for long descriptions (plain paragraphs, lists, headings, tables as imported from marketplaces) */
.mp-prose { max-width: 68ch; color: var(--mp-fg-muted); line-height: 1.7; overflow-wrap: anywhere; }
.mp-prose > * + * { margin-top: 14px; }
.mp-prose p { white-space: pre-line; }
.mp-prose strong, .mp-prose b { color: var(--mp-fg); font-weight: 600; }
.mp-prose a { text-decoration: underline; text-underline-offset: 3px; }
.mp-prose h1, .mp-prose h2, .mp-prose h3, .mp-prose h4 { margin-top: 28px; margin-bottom: 0; color: var(--mp-fg); font-size: var(--mp-fs-xl); line-height: 1.25; }
.mp-prose h1:first-child, .mp-prose h2:first-child, .mp-prose h3:first-child, .mp-prose h4:first-child { margin-top: 0; }
.mp-prose ul, .mp-prose ol { padding-left: 1.4em; display: grid; gap: 6px; }
.mp-prose ul { list-style: disc; }
.mp-prose ol { list-style: decimal; }
.mp-prose li::marker { color: var(--mp-fg-subtle); }
.mp-prose blockquote { margin-left: 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--mp-border-strong); }
.mp-prose img, .mp-prose video { max-width: 100%; height: auto; border-radius: var(--mp-radius); }
.mp-prose code { padding: 1px 6px; border-radius: var(--mp-radius-xs); background: var(--mp-surface-2); color: var(--mp-fg); font-family: var(--mp-font-mono); font-size: 0.9em; }
.mp-prose table { display: block; overflow-x: auto; font-size: var(--mp-fs-sm); }
.mp-prose th, .mp-prose td { padding: 8px 12px; border: 1px solid var(--mp-border); text-align: left; }
.mp-prose hr { border: 0; border-top: 1px solid var(--mp-border); margin-block: 24px; }
.mp-rev-sum { display: flex; align-items: center; gap: var(--mp-space-5); margin-bottom: var(--mp-space-4); padding: var(--mp-space-5); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg); background: var(--mp-surface); }
.mp-rev-sum__n { font: 800 3.5rem/1 var(--mp-font-display); font-variant-numeric: tabular-nums; }
.mp-review { display: grid; gap: var(--mp-space-2); padding: 20px 0; border-top: 1px solid var(--mp-border); }
.mp-review:first-child { border-top: 0; padding-top: 0; }
.mp-review header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mp-review time { color: var(--mp-fg-subtle); font-size: var(--mp-fs-sm); }
.mp-review p { max-width: 68ch; color: var(--mp-fg-muted); }
.mp-review__reply { margin: 4px 0 0 var(--mp-space-4); padding: 12px 16px; border-left: 3px solid var(--mp-border-strong); background: var(--mp-surface-2); border-radius: 0 var(--mp-radius-sm) var(--mp-radius-sm) 0; }
.mp-star-input { display: inline-flex; gap: 2px; }
.mp-star-input button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--mp-radius-sm); background: transparent; color: var(--mp-border-strong); }
.mp-star-input button[aria-pressed="true"] { color: var(--mp-primary-text); }
.mp-star-input .mp-i { width: 26px; height: 26px; }
.mp-star-input button[aria-pressed="true"] .mp-i { fill: currentColor; }

.mp-buybar { display: none; }
@media (max-width: 1100px) {
    .mp-pdp { grid-template-columns: 1fr; gap: var(--mp-space-5); }
    .mp-gallery { position: static; }
    .mp-two { grid-template-columns: 1fr; gap: var(--mp-space-6); }
}
@media (max-width: 760px) {
    .mp-buy { padding: 18px; }
    .mp-buy .mp-price { font-size: 2.25rem; }
    .mp-buy__row .mp-btn-lg { min-width: 0; flex: 1 1 100%; }
    .mp-sec h2 { font-size: var(--mp-fs-2xl); }
    .mp-rev-sum { flex-direction: column; align-items: flex-start; gap: var(--mp-space-3); }
    .mp-pdp-page { padding-bottom: 88px; }
    .mp-buybar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--mp-z-sticky) + 50);
        display: flex; align-items: center; gap: var(--mp-space-3); padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: var(--mp-header-bg); border-top: 1px solid var(--mp-border-strong);
        backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        translate: 0 110%; transition: translate var(--mp-dur-slow) var(--mp-ease);
    }
    .mp-buybar.is-show { translate: 0 0; }
    .mp-buybar .mp-price { font-size: 1.625rem; }
    .mp-buybar .mp-btn { flex: 1; }
}

/* ── 7. Cart + checkout ────────────────────────────────────────────────── */
.mp-steps { display: flex; align-items: center; flex-wrap: wrap; gap: var(--mp-space-3); margin-block: var(--mp-space-2) var(--mp-space-5); }
.mp-step { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--mp-fg-subtle); }
.mp-step b {
    display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid currentColor; border-radius: 50%;
    font: 700 1rem/1 var(--mp-font-display); font-variant-numeric: tabular-nums;
}
.mp-step[aria-current="step"] { color: var(--mp-fg); }
.mp-step[aria-current="step"] b { background: var(--mp-primary); border-color: var(--mp-primary); color: var(--mp-primary-fg); }
.mp-step.is-done { color: var(--mp-success); }
.mp-step.is-done b { background: var(--mp-success-soft); }
.mp-step-sep { flex: 0 1 48px; min-width: 16px; height: 2px; background: var(--mp-border-strong); }

.mp-cartlay { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--mp-space-6); align-items: start; }
.mp-lines { display: grid; gap: var(--mp-space-3); }
.mp-line {
    display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 12px;
    border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg); background: var(--mp-surface); box-shadow: var(--mp-shadow-card);
}
.mp-line .mp-well { border-radius: 6px; --mp-card-ratio: 1; }   /* card 18 - padding 12 */
.mp-line h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.15; }
.mp-line h3 a { color: var(--mp-fg); }
.mp-line__meta { margin-top: 6px; font-size: var(--mp-fs-sm); color: var(--mp-fg-muted); }
.mp-line__ctl { display: flex; align-items: center; flex-wrap: wrap; gap: var(--mp-space-3); margin-top: var(--mp-space-3); }
.mp-line__sum { padding-right: 8px; text-align: right; }
.mp-line__sum .mp-price { font-size: 1.625rem; }
.mp-line__warn { margin-top: 6px; font-size: var(--mp-fs-sm); color: var(--mp-warning); }

.mp-sum {
    position: sticky; top: var(--mp-sticky-top); display: grid; gap: 14px; padding: var(--mp-space-5);
    border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-lg); background: var(--mp-surface); box-shadow: var(--mp-shadow-card);
}
.mp-sum h2 { font-size: var(--mp-fs-2xl); }
.mp-sum__row { display: flex; justify-content: space-between; gap: var(--mp-space-3); color: var(--mp-fg-muted); font-variant-numeric: tabular-nums; }
.mp-sum__row b { color: var(--mp-fg); font-weight: 600; }
.mp-sum__row > :last-child { text-align: right; }
.mp-sum__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--mp-border); }
.mp-sum__total b { font: 700 2.25rem/1 var(--mp-font-display); font-variant-numeric: tabular-nums; }
.mp-sum__mini { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--mp-space-3); align-items: center; font-size: var(--mp-fs-sm); }
.mp-sum__mini .mp-well { border-radius: 8px; --mp-card-ratio: 1; }
.mp-sum__mini b { display: block; font-weight: 600; line-height: 1.25; }
.mp-sum__mini span { color: var(--mp-fg-muted); font-variant-numeric: tabular-nums; }

.mp-form { display: grid; gap: 20px; }
.mp-form-sec { display: grid; gap: var(--mp-space-4); }
.mp-form-sec > h2 { font-size: var(--mp-fs-2xl); }
.mp-rcards { display: grid; gap: 10px; }
.mp-rcard {
    position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px 18px;
    border: 1.5px solid var(--mp-border-strong); border-radius: var(--mp-radius); background: var(--mp-surface); cursor: pointer;
    transition: border-color var(--mp-dur), background-color var(--mp-dur);
}
.mp-rcard:hover { border-color: var(--mp-fg-subtle); }
.mp-rcard:has(input:checked) { border-color: var(--mp-primary); background: var(--mp-primary-soft); }
.mp-rcard:has(input:focus-visible) { outline: var(--mp-ring-width) solid var(--mp-ring); outline-offset: var(--mp-ring-offset); }
.mp-rcard input {
    appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 0;
    border: 1.5px solid var(--mp-border-strong); border-radius: 50%; background: var(--mp-surface);
}
.mp-rcard input:checked { border-color: var(--mp-primary); background: var(--mp-primary); }
.mp-rcard input:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mp-primary-fg); }
.mp-rcard b { display: block; font-weight: 600; }
.mp-rcard small { display: block; margin-top: 2px; color: var(--mp-fg-muted); font-size: var(--mp-fs-sm); }
.mp-rcard .p { font: 700 1.25rem/1 var(--mp-font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-rcard .p small { font: 500 var(--mp-fs-sm)/1 var(--mp-font-text); color: var(--mp-fg-muted); }
.mp-rcard > .mp-i { color: var(--mp-primary-text); width: 26px; height: 26px; }

.mp-success { display: grid; justify-items: center; gap: var(--mp-space-4); max-width: 640px; margin: var(--mp-space-5) auto 0; padding: 56px 32px; text-align: center; }
.mp-success__ico {
    display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%;
    background: var(--mp-success-soft); color: var(--mp-success); box-shadow: 0 0 0 10px var(--mp-success-soft);
    animation: mp-pop 500ms var(--mp-ease) both;
}
.mp-success__ico .mp-i { width: 44px; height: 44px; stroke-width: 2.2; }
@keyframes mp-pop { from { scale: 0.6; opacity: 0; } to { scale: 1; opacity: 1; } }
.mp-success h2 { font-size: var(--mp-fs-4xl); }
.mp-success__num { font: 800 2.25rem/1 var(--mp-font-display); color: var(--mp-primary-text); font-variant-numeric: tabular-nums; }

@media (max-width: 1023px) { .mp-cartlay { grid-template-columns: 1fr; } .mp-sum { position: static; } }
@media (max-width: 640px) {
    .mp-line { grid-template-columns: 84px 1fr; gap: 12px 14px; }
    .mp-line__sum { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 10px 0 0; border-top: 1px solid var(--mp-border); text-align: left; }
    .mp-line h3 { font-size: 1.125rem; }
    .mp-cols-2, .mp-cols-3 { grid-template-columns: 1fr; }
    .mp-step-sep { display: none; }
    .mp-steps { gap: 4px 20px; }
    .mp-rcard { grid-template-columns: auto 1fr; }
    .mp-rcard .p { grid-column: 2; }
}

/* ── 8. Account: orders, profile, login ────────────────────────────────── */
.mp-acc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--mp-space-6); align-items: start; margin-top: var(--mp-space-3); }
.mp-accnav {
    position: sticky; top: var(--mp-sticky-top); display: grid; gap: 4px; padding: 10px;
    border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg); background: var(--mp-surface);
}
.mp-accnav__user { display: flex; align-items: center; gap: var(--mp-space-3); padding: var(--mp-space-3); margin-bottom: 6px; min-width: 0; }
.mp-accnav__user b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-dl { display: grid; grid-template-columns: minmax(110px, 200px) 1fr; gap: 14px 16px; align-items: center; margin: 0; }
.mp-dl dt { color: var(--mp-fg-muted); }
.mp-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .mp-dl { grid-template-columns: 1fr; gap: 2px; } .mp-dl dd { margin-bottom: 12px; } }
.mp-avatar {
    display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
    background: var(--mp-primary); color: var(--mp-primary-fg); font: 800 1.375rem/1 var(--mp-font-display);
}
.mp-accnav a, .mp-accnav button {
    display: flex; align-items: center; gap: var(--mp-space-3); min-height: 46px; padding: 0 14px; border: 0; border-radius: var(--mp-radius);
    background: transparent; color: var(--mp-fg-muted); font-weight: 500; text-align: left;
    transition: background-color var(--mp-dur), color var(--mp-dur);
}
.mp-accnav a:hover, .mp-accnav button:hover { background: var(--mp-surface-2); color: var(--mp-fg); text-decoration: none; }
.mp-accnav a[aria-current="page"] { background: var(--mp-primary-soft); color: var(--mp-primary-text); font-weight: 600; }
.mp-accnav .mp-count-note { margin-left: auto; font-size: var(--mp-fs-sm); font-variant-numeric: tabular-nums; }
.mp-acc-sec { display: grid; gap: var(--mp-space-4); }
.mp-acc-sec > h1, .mp-acc-sec > .mp-acc-sec__head h1 { font-size: var(--mp-fs-3xl); }
.mp-acc-sec__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mp-space-3); }

.mp-orders { display: grid; gap: var(--mp-space-3); }
.mp-order {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; width: 100%; padding: 18px 20px;
    border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg); background: var(--mp-surface); color: var(--mp-fg);
    box-shadow: var(--mp-shadow-card); transition: border-color var(--mp-dur);
}
.mp-order:hover { border-color: var(--mp-border-strong); text-decoration: none; }
.mp-order__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mp-order__num { font: 700 1.5rem/1 var(--mp-font-display); font-variant-numeric: tabular-nums; }
.mp-order__date { color: var(--mp-fg-muted); font-size: var(--mp-fs-sm); }
.mp-order__thumbs { display: flex; align-items: center; margin-top: var(--mp-space-3); }
.mp-order__thumbs .mp-well { width: 52px; border-radius: 10px; margin-right: -10px; --mp-card-ratio: 1; box-shadow: 0 0 0 2px var(--mp-surface); }
.mp-order__more { margin-left: 18px; color: var(--mp-fg-muted); font-size: var(--mp-fs-sm); }
.mp-order__sum { text-align: right; }
.mp-order__sum .mp-price { font-size: 1.75rem; }

.mp-timeline { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: var(--mp-space-2) 0 4px; }
.mp-tl { position: relative; display: grid; justify-items: start; gap: 10px; color: var(--mp-fg-subtle); font-size: var(--mp-fs-sm); }
.mp-tl::before { content: ""; position: absolute; left: 36px; right: -4px; top: 17px; height: 2px; background: var(--mp-border-strong); }
.mp-tl:last-child::before { display: none; }
.mp-tl b {
    position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid var(--mp-border-strong); background: var(--mp-surface-2); color: var(--mp-fg-subtle);
}
.mp-tl b .mp-i { width: 18px; height: 18px; }
.mp-tl small { display: block; color: var(--mp-fg-subtle); font-variant-numeric: tabular-nums; }
.mp-tl.is-on { color: var(--mp-fg); }
.mp-tl.is-on b { background: var(--mp-success-soft); border-color: var(--mp-success); color: var(--mp-success); }
.mp-tl.is-on::before { background: var(--mp-success); }
.mp-tl.is-now b { background: var(--mp-primary); border-color: var(--mp-primary); color: var(--mp-primary-fg); box-shadow: 0 0 0 5px var(--mp-primary-soft); }
.mp-tl.is-now::before { background: var(--mp-border-strong); }
.mp-ship { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-3); padding: var(--mp-space-3) 0; }
.mp-ship + .mp-ship { border-top: 1px solid var(--mp-border); }

.mp-method { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--mp-space-4); padding: 16px 18px; border: 1px solid var(--mp-border); border-radius: var(--mp-radius); background: var(--mp-surface); }
.mp-method__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--mp-radius); color: #fff; background: var(--mp-fg-muted); }
.mp-method__ico .mp-i { width: 22px; height: 22px; }
.mp-m-telegram, .mp-m-tg { background: #229ed9; }
.mp-m-vk { background: #0077ff; }

.mp-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 600px; margin-top: var(--mp-space-5); overflow: hidden; border: 1px solid var(--mp-border); border-radius: 24px; background: var(--mp-surface); }
.mp-login__art {
    position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px;
    background: var(--mp-login-art, linear-gradient(150deg, var(--mp-primary) 0%, color-mix(in srgb, var(--mp-primary) 40%, #000) 100%));
    background-size: cover; background-position: center; color: #fff;
}
.mp-login__art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 9, 12, 0.7) 5%, transparent 70%); }
.mp-login__art h2 { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1; }
.mp-login__art p { margin-top: 14px; max-width: 36ch; color: rgba(255, 255, 255, 0.85); }
.mp-login__form { display: grid; align-content: center; gap: 22px; padding: 48px; }
.mp-login__form h1 { font-size: var(--mp-fs-3xl); }
.mp-chan { display: grid; gap: 10px; }
.mp-chanbtn {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--mp-space-4); width: 100%; min-height: 72px; padding: 12px 18px;
    border: 1.5px solid var(--mp-border-strong); border-radius: 14px; background: var(--mp-surface); color: var(--mp-fg); text-align: left;
    transition: border-color var(--mp-dur), transform var(--mp-dur-fast) var(--mp-ease);
}
.mp-chanbtn:hover { border-color: var(--mp-primary); text-decoration: none; }
.mp-chanbtn:active { transform: scale(0.96); }
.mp-chanbtn b { display: block; font-size: var(--mp-fs-lg); font-weight: 600; }
.mp-chanbtn small { color: var(--mp-fg-muted); font-size: var(--mp-fs-sm); }
.mp-chanbtn .mp-method__ico { width: 48px; height: 48px; }
.mp-chanbtn > .mp-i { color: var(--mp-fg-subtle); }
.mp-howto { display: grid; gap: var(--mp-space-3); counter-reset: s; }
.mp-howto li { position: relative; padding-left: 40px; color: var(--mp-fg-muted); counter-increment: s; }
.mp-howto li::before {
    content: counter(s); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 28px; height: 28px;
    border: 1.5px solid var(--mp-border-strong); border-radius: 50%; color: var(--mp-fg); font: 700 0.9375rem/1 var(--mp-font-display);
}
.mp-howto b { color: var(--mp-fg); font-weight: 600; }
.mp-codebox { display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-3); padding: 14px 18px; border: 1.5px dashed var(--mp-border-strong); border-radius: var(--mp-radius); }
.mp-codebox code { font: 700 1.75rem/1 var(--mp-font-mono); letter-spacing: 0.12em; }

@media (max-width: 1023px) {
    .mp-acc { grid-template-columns: 1fr; gap: var(--mp-space-4); }
    .mp-accnav { position: static; display: flex; overflow-x: auto; padding: 6px; scrollbar-width: none; }
    .mp-accnav__user { display: none; }
    .mp-accnav a, .mp-accnav button { white-space: nowrap; }
}
@media (max-width: 900px) {
    .mp-login { grid-template-columns: 1fr; min-height: 0; }
    .mp-login__art { min-height: 200px; padding: 24px; }
    .mp-login__form { padding: 28px 20px; }
}
@media (max-width: 640px) {
    .mp-order { grid-template-columns: 1fr; }
    .mp-order__sum { display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
    .mp-timeline { grid-auto-flow: row; gap: 14px; }
    .mp-tl { grid-template-columns: auto 1fr; align-items: center; }
    .mp-tl::before { display: none; }
    .mp-method { grid-template-columns: auto 1fr; }
    .mp-method .mp-btn { grid-column: 1 / -1; }
}

/* ── Motion preferences ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important; scroll-behavior: auto !important;
    }
    .mp-sk { animation: none; }
}

/* Theme toggle: show the icon of the theme you would switch to. */
.mp-theme-toggle .mp-i {
    grid-area: 1 / 1;
    transition: opacity var(--mp-dur) cubic-bezier(0.2, 0, 0, 1), scale var(--mp-dur) cubic-bezier(0.2, 0, 0, 1), filter var(--mp-dur) cubic-bezier(0.2, 0, 0, 1);
}
.mp-theme-toggle .mp-theme-sun, [data-theme="dark"] .mp-theme-toggle .mp-theme-moon { opacity: 0; scale: 0.25; filter: blur(4px); }
.mp-theme-toggle .mp-theme-moon, [data-theme="dark"] .mp-theme-toggle .mp-theme-sun { opacity: 1; scale: 1; filter: blur(0); }