/*
Theme Name: Mystery Jersey
Description: Lean WooCommerce theme. style.css is the design system (.mj-* classes, layered); per-template additions live in /css/.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: mystery-jersey
*/

@layer reset, abstracts, base, layout, components, pages, custom, utilities;

@layer reset {
    html {
        box-sizing: border-box;
        -webkit-text-size-adjust: 100%; /* stop iOS Safari auto-inflating text on rotate */
    }

    *,
    *::before,
    *::after {
        box-sizing: inherit;
    }

    body,
    h1, h2, h3, h4, h5, h6,
    p,
    figure,
    blockquote,
    dl,
    dd {
        margin: 0;
    }

    button,
    input,
    select,
    textarea {
        margin: 0;
    }

    button,
    select {
        text-transform: none;
    }

    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
        -webkit-appearance: button; /* iOS Safari still needs this on button-like inputs */
    }

    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

    fieldset {
        margin: 0;
        padding: 0;
        border: 0;
        min-width: 0; /* Firefox/Chrome: fieldset ignores child overflow without this */
    }

    legend {
        max-width: 100%;
        padding: 0;
        display: table; /* Firefox: legend ignores width from a flex/grid ancestor otherwise */
    }

    progress {
        vertical-align: baseline;
    }

    [type="search"] {
        -webkit-appearance: textfield;
        outline-offset: -2px;
    }

    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit;
    }

    [type="number"]::-webkit-inner-spin-button,
    [type="number"]::-webkit-outer-spin-button {
        height: auto;
    }

    pre {
        font-family: monospace, monospace;
    }

    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    @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;
        }
    }
}

/**
 * Tokens / abstracts
 *
 * Core     = сырые значения, компоненты НЕ ссылаются на них напрямую
 * Semantic = названия по роли, ссылаются на core; на них ссылаются компоненты
 * Component-level = определяются в классе компонента, никогда не в руте
 *
 */
@layer abstracts {
    :root {
        /* ---------- Core: colors ---------- */
        --core-color-black: #0A0A0A;
        --core-color-black-raised: #001514;
        --core-color-teal-900: #043735;
        --core-color-teal-700: #2A5553;
        --core-color-teal-500: #4F7372;
        --core-color-white: #FFFFFF;
        --core-color-gray-a10: rgba(105, 105, 105, 0.1);

        --core-color-mint: #00FFA6;
        --core-color-cyan: #00FFF2;
        --core-color-magenta: #FF00FD;
        --core-color-lime: #D0FF00;
        --core-color-olive: #659548;
        --core-color-blue: #4E77EC;
        --core-color-orange: #FF7700;

        --core-color-navy-psg: #004170;
        --core-color-madrid-white: #ffffff;
        --core-color-bayern-red: #dc052d;
        --core-color-manchester-red: #da291c;
        --core-color-milan-red: #fb090b;
        --core-color-liverpool-red: #c8102e;
        --core-color-barcelona-red: #a50044;

        /* ---------- Core: space (база 8px) ---------- */
        --core-space-0: 0;
        --core-space-25: 2px;
        --core-space-50: 4px;
        --core-space-75: 6px;
        --core-space-100: 8px;
        --core-space-150: 12px;
        --core-space-200: 16px;
        --core-space-250: 20px;
        --core-space-300: 24px;
        --core-space-400: 32px;
        --core-space-500: 40px;
        --core-space-600: 48px;
        --core-space-800: 64px;
        --core-space-1200: 96px;

        --core-radius-100: 8px;
        --core-radius-200: 16px;
        --core-radius-300: 24px;
        --core-radius-full: 999px;

        --core-border-50: 0.5px;
        --core-border-100: 1px;
        --core-border-200: 2px;

        --core-max-width: 1440px;

        --core-font-sans: "Manrope", "Helvetica", "Arial", sans-serif;
        --core-font-mono: "Geist Mono", ui-monospace, "Menlo", monospace;

        --core-font-size-smallest: 10px;
        --core-font-size-small: 12px;
        --core-font-size-body: 14px;
        --core-font-size-medium: 16px;
        --core-font-size-large1: 20px;
        --core-font-size-large2: 24px;
        --core-font-size-giant1: 30px;
        --core-font-size-giant2: 36px;
        --core-font-size-giant3: 46px;


        /* Для промо материалов */
        --core-font-size-poster-s: 2rem; /*  32 */
        --core-font-size-poster-m: 3.5rem; /*  56 */
        --core-font-size-poster-l: 6rem; /*  96 */
        --core-font-size-poster-xl: 9rem; /* 144 */

        --core-line-height-150: 12px;
        --core-line-height-200: 16px;
        --core-line-height-250: 20px;
        --core-line-height-300: 24px;
        --core-line-height-350: 28px;
        --core-line-height-400: 32px;
        --core-line-height-500: 40px;
        --core-line-height-575: 46px;
        --core-line-height-600: 56px;

        --core-font-weight-400: 400;
        --core-font-weight-500: 500;
        --core-font-weight-600: 600;
        --core-font-weight-700: 700;

        --core-tracking-none: 0;
        --core-tracking-display: -0.02em;
        --core-tracking-signal: 0.05em;

        /* ---------- Core: motion ---------- */
        --core-duration-fast: 200ms;
        --core-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

        /* ---------- Semantic: colors ---------- */
        --color-background: var(--core-color-black);
        --color-surface: var(--core-color-black-raised);
        --color-surface-secondary: var(--core-color-black-raised);
        --color-border: var(--core-color-teal-700);
        --color-border-control: var(--core-color-teal-500);
        --color-text: var(--core-color-white);
        --color-text-muted: color-mix(in srgb, var(--core-color-white) 60%, var(--core-color-black-raised));
        --color-scrim: var(--core-color-gray-a10);
        --color-danger: var(--core-color-orange);

        --color-accent: var(--core-color-mint);
        --color-accent-yellow: var(--core-color-lime);

        --color-variant-default: var(--core-color-cyan);
        --color-variant-classic: var(--core-color-mint);
        --color-variant-champ: var(--core-color-magenta);
        --color-variant-legend: var(--core-color-lime);
        --color-variant-wc: var(--core-color-olive);
        --color-variant-wc-moments: var(--core-color-blue);

        --color-gradient-psg: linear-gradient(to top, transparent 5%, var(--core-color-navy-psg) 50%);
        --color-gradient-bayern: linear-gradient(to top, transparent 5%, var(--core-color-bayern-red) 50%);
        --color-gradient-liverpool: linear-gradient(to top, transparent 5%, var(--core-color-liverpool-red) 50%);
        --color-gradient-milan: linear-gradient(to top, transparent 5%, var(--core-color-milan-red) 50%);
        --color-gradient-barca: linear-gradient(to top, transparent 5%, var(--core-color-barcelona-red) 50%);
        --color-gradient-manchester: linear-gradient(to top, transparent 5%, var(--core-color-manchester-red) 50%);
        --color-gradient-madrid: linear-gradient(to top, transparent 5%, var(--core-color-madrid-white) 50%);

        --color-zone-grid: color-mix(in srgb, var(--core-color-teal-500) 16%, transparent);


        /* ---------- Semantic: space ---------- */
        --space-hairline: var(--core-space-50);
        --space-inline: var(--core-space-100);
        --space-inset: var(--core-space-200);
        --space-group: var(--core-space-300);
        --space-subsection: var(--core-space-600);
        --space-section: var(--core-space-1200);
        --space-page-margin: var(--core-space-200);
        --space-aside-gap: var(--core-space-800);

        --space-inset-btn-x: var(--core-space-250);
        --space-inset-input-x: var(--core-space-200);

        --content-max-width: var(--core-max-width);
        --measure: 72ch;

        /* ---------- Semantic: shape ---------- */
        --radius-default: var(--core-radius-100);
        --radius-large: var(--core-radius-200);
        --radius-xl: var(--core-radius-300);
        --radius-full: var(--core-radius-full);
        --radius-circle: 50%;

        --border-subtle: var(--core-border-50);
        --border-default: var(--core-border-100);
        --border-strong: var(--core-border-200);

        --size-action-sm: var(--core-space-400);
        --size-action-md: var(--core-space-500);
        --size-action-lg: var(--core-space-600);
        --size-tap-min: var(--core-space-600);

        --logo-short-ratio: 419 / 667;

        /* ---------- Semantic: type ---------- */
        --font-body: var(--core-font-sans);
        --font-mono: var(--core-font-mono);

        --weight-regular: var(--core-font-weight-400);
        --weight-medium: var(--core-font-weight-500);
        --weight-bold: var(--core-font-weight-600);
        --weight-bolder: var(--core-font-weight-700);

        --tracking-body: var(--core-tracking-none);
        --tracking-display: var(--core-tracking-display);
        --tracking-signal: var(--core-tracking-signal);

        --text-display-1: var(--core-font-size-giant3);
        --leading-display-1: var(--core-line-height-600);
        --text-display-2: var(--core-font-size-giant2);
        --leading-display-2: var(--core-line-height-575);
        --text-display-3: var(--core-font-size-giant1);
        --leading-display-3: var(--core-line-height-500);

        --text-title-1: var(--core-font-size-large2);
        --leading-title-1: var(--core-line-height-400);
        --text-title-2: var(--core-font-size-large1);
        --leading-title-2: var(--core-line-height-350);
        --text-title-3: var(--core-font-size-medium);
        --leading-title-3: var(--core-line-height-300);

        --text-subtitle-1: var(--core-font-size-large1);
        --leading-subtitle-1: var(--core-line-height-350);
        --text-subtitle-2: var(--core-font-size-medium);
        --leading-subtitle-2: var(--core-line-height-300);

        --text-poster-s: var(--core-font-size-poster-s);
        --text-poster-m: var(--core-font-size-poster-m);
        --text-poster-l: var(--core-font-size-poster-l);
        --text-poster-xl: var(--core-font-size-poster-xl);
        --leading-poster: 0.93; /* unitless: scales with the font size */
        --tracking-poster: -0.04em;

        /* MJ: body 16/24 вместо eBay 14/20 */
        --text-body: var(--core-font-size-medium);
        --leading-body: var(--core-line-height-300);

        --text-caption: var(--core-font-size-small);
        --leading-caption: var(--core-line-height-200);

        --text-signal-1: var(--core-font-size-large1);
        --leading-signal-1: var(--core-line-height-250);
        --text-signal-2: var(--core-font-size-body);
        --leading-signal-2: var(--core-line-height-150);

        --text-control: var(--core-font-size-body);

        /* ---------- Semantic: motion ---------- */
        --transition-quick: var(--core-duration-fast) var(--core-ease-standard);

        /* ---------- Semantic: focus ---------- */
        --focus-ring: var(--border-strong) solid var(--color-accent);
        --focus-offset: 2px;

        /* ---------- Semantic: stacking ---------- */
        --z-base: 0;
        --z-raised: 10;
        --z-sticky: 100;
        --z-overlay: 500;
        --z-modal: 600;
        --z-toast: 700;
        --z-skip-link: 1000;

        /* Semantic: Utilities */
        --size-page-header: clamp(15rem, 32svh, 22rem);
        --size-header-topbar: calc(var(--size-action-lg) + 2 * var(--space-inset));
    }

    /* Планшет: поля шире */
    @media (min-width: 600px) {
        :root {
            --space-page-margin: var(--core-space-400);
        }
    }

    /* Десктоп: поля 48px */
    @media (min-width: 1024px) {
        :root {
            --space-page-margin: var(--core-space-600);
        }
    }

    /* Узкие экраны: стили от 20px опускаются на одну ступень (правило eBay) */
    @media (max-width: 599.98px) {
        :root {
            --text-display-1: var(--core-font-size-giant2);
            --leading-display-1: var(--core-line-height-575);
            --text-display-2: var(--core-font-size-giant1);
            --leading-display-2: var(--core-line-height-500);
            --text-display-3: var(--core-font-size-large2);
            --leading-display-3: var(--core-line-height-400);
            --text-title-1: var(--core-font-size-large1);
            --leading-title-1: var(--core-line-height-350);
            --text-title-2: var(--core-font-size-medium);
            --leading-title-2: var(--core-line-height-300);
            --text-subtitle-1: var(--core-font-size-medium);
            --leading-subtitle-1: var(--core-line-height-300);
            --text-signal-1: var(--core-font-size-medium);
            --space-section: var(--core-space-800);
            --space-subsection: var(--core-space-500);
        }
    }
}

/**
 * Base — дефолты html элементов
 */
@layer base {
    body,
    button,
    input,
    select,
    optgroup,
    textarea {
        font-family: var(--font-body);
        letter-spacing: var(--tracking-body);
        color: var(--color-text);
        font-size: var(--text-body);
        line-height: var(--leading-body);
    }

    html {
        overflow-x: hidden;
    }

    body {
        background: var(--color-background);
        -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: var(--weight-bold);
    }

    h1 {
        font-size: var(--text-display-3);
        line-height: var(--leading-display-3);
    }

    h2 {
        font-size: var(--text-title-1);
        line-height: var(--leading-title-1);
    }

    h3 {
        font-size: var(--text-title-2);
        line-height: var(--leading-title-2);
    }

    h4 {
        font-size: var(--text-title-3);
        line-height: var(--leading-title-3);
    }

    b, strong, dt {
        font-weight: var(--weight-bold);
    }

    code, kbd, samp, var {
        font-family: var(--font-mono);
        font-size: 0.875em;
        white-space: nowrap;
    }

    kbd {
        padding: 0 var(--space-hairline);
        border: var(--border-default) solid var(--color-border-control);
        border-radius: var(--core-space-50);
    }

    hr {
        height: 0;
        border: 0;
        border-top: var(--border-default) solid var(--color-border);
    }

    img {
        height: auto;
        max-width: 100%;
    }

    svg {
        vertical-align: middle;
    }

    ul, ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    dd {
        margin: 0;
    }

    /* eBay: ссылки всегда подчёркнуты */
    a {
        color: var(--color-text);
        text-decoration: underline;
        text-decoration-thickness: var(--border-default);
        text-underline-offset: 0.2em;
        transition: color var(--transition-quick);

        &:hover {
            color: var(--color-accent);
        }

        &:active {
            color: color-mix(in srgb, var(--color-accent), var(--color-background) 15%);
        }

        &[aria-current="page"] {
            color: var(--color-accent) !important;
        }
    }

    button {
        cursor: pointer;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        white-space: nowrap;

        th, td {
            padding: var(--core-space-150) var(--space-inset);
            border-bottom: var(--border-default) solid var(--color-border);
            text-align: start;
            vertical-align: middle;
        }

        thead th {
            font-size: var(--text-caption);
            line-height: var(--leading-caption);
            font-weight: var(--weight-bold);
            color: var(--color-text-muted);
            border-bottom-color: var(--color-border-control);
        }

        tbody th {
            font-weight: var(--weight-regular);
        }
    }

    caption {
        caption-side: top;
        padding-block-end: var(--space-inline);
        text-align: start;
        font-size: var(--text-caption);
        line-height: var(--leading-caption);
        color: var(--color-text-muted);
    }

    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    textarea {
        min-block-size: var(--size-action-lg);
        padding: 0 var(--space-inset-input-x);
        border: var(--border-default) solid var(--color-border-control);
        border-radius: var(--radius-default);
        background: transparent;
        color: var(--color-text);
        transition: border-color var(--transition-quick);

        &::placeholder {
            color: var(--color-text-muted);
        }

        &:hover {
            border-color: var(--color-text-muted);
        }
    }
    textarea {
        padding: var(--space-inset-input-x);
    }
}

/**
 * Layout — примитивы раскладки (.mj-l-*)
 */
@layer layout {
    .mj-l-stack {
        --mj-l-stack-space: var(--space-group);

        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        > * {
            margin-block: 0;
        }

        > * + *:not(.mj-s__logo-field) {
            margin-block-start: var(--mj-l-stack-space);
        }
    }

    .mj-l-cluster {
        --mj-l-cluster-space: var(--space-inline);

        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--mj-l-cluster-space);

        > * {
            margin: 0;
        }
    }

    .mj-l-grid {
        --mj-l-grid-min: 16rem;
        --mj-l-grid-space: var(--space-group);

        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(var(--mj-l-grid-min), 100%), 1fr));
        gap: var(--mj-l-grid-space);

        > * {
            margin: 0;
        }
    }

    .mj-l-sidebar {
        --mj-l-sidebar-width: 16rem;
        --mj-l-sidebar-space: var(--space-group);

        display: flex;
        flex-wrap: wrap;
        gap: var(--mj-l-sidebar-space);

        > :first-child {
            flex-basis: var(--mj-l-sidebar-width);
            flex-grow: 1;
        }

        > :last-child {
            flex-basis: 0;
            flex-grow: 999;
            min-inline-size: 55%;
        }
    }

    .mj-l-center {
        max-inline-size: calc(var(--content-max-width));
        margin-inline: auto;
        padding-inline: var(--space-page-margin);
        min-inline-size: 0;
        inline-size: 100%;
        box-sizing: border-box;
    }

    .mj-l-split {
        --mj-l-split-a: 2;
        --mj-l-split-b: 1;
        --mj-l-split-unit: 12rem;
        --mj-l-split-space: var(--space-group);

        display: flex;
        flex-wrap: wrap;
        gap: var(--mj-l-split-space);

        > * {
            min-inline-size: 0;
        }

        > :first-child {
            flex: var(--mj-l-split-a) 1 calc(var(--mj-l-split-a) * var(--mj-l-split-unit));
        }

        > :last-child {
            flex: var(--mj-l-split-b) 1 calc(var(--mj-l-split-b) * var(--mj-l-split-unit));
        }
    }
}

    /**
     * Components — классы дизайн-системы (.mj-*)
     */
@layer components {
    /* ---------- Focus ---------- */
    :focus-visible {
        outline: var(--focus-ring);
        outline-offset: var(--focus-offset);
    }

    /* ---------- Type ramp (eBay) ---------- */
    .mj-text-display-1,
    .mj-text-display-2,
    .mj-text-display-3 {
        font-weight: var(--weight-bold);
        letter-spacing: var(--tracking-display);
    }

    .mj-text-display-1 {
        font-size: var(--text-display-1);
        line-height: var(--leading-display-1);
    }

    .mj-text-display-2 {
        font-size: var(--text-display-2);
        line-height: var(--leading-display-2);
    }

    .mj-text-display-3 {
        font-size: var(--text-display-3);
        line-height: var(--leading-display-3);
    }

    .mj-text-title-1,
    .mj-text-title-2,
    .mj-text-title-3 {
        font-weight: var(--weight-bolder);
        letter-spacing: var(--tracking-body);
    }

    .mj-text-title-1 {
        font-size: var(--text-title-1);
        line-height: var(--leading-title-1);
    }

    .mj-text-title-2 {
        font-size: var(--text-title-2);
        line-height: var(--leading-title-2);
    }

    .mj-text-title-3 {
        font-size: var(--text-title-3);
        line-height: var(--leading-title-3);
    }

    .mj-text-subtitle-1,
    .mj-text-subtitle-2 {
        font-weight: var(--weight-regular);
        color: var(--color-text-muted);
    }

    .mj-text-subtitle-1 {
        font-size: var(--text-subtitle-1);
        line-height: var(--leading-subtitle-1);
    }

    .mj-text-subtitle-2 {
        font-size: var(--text-subtitle-2);
        line-height: var(--leading-subtitle-2);
    }

    .mj-text-body,
    .mj-text-body-bold {
        font-size: var(--text-body);
        line-height: var(--leading-body);
    }

    .mj-text-body-bold {
        font-weight: var(--weight-bold);
    }

    .mj-text-caption,
    .mj-text-caption-bold {
        font-size: var(--text-caption);
        line-height: var(--leading-caption);
        color: var(--color-text-muted);
    }

    .mj-text-caption-bold {
        font-weight: var(--weight-bold);
        color: var(--color-text);
    }

    .mj-text-signal-1,
    .mj-text-signal-2 {
        font-family: var(--font-mono);
        /*text-transform: uppercase;*/
        letter-spacing: var(--tracking-signal);
        color: var(--color-text-muted);
        word-break: break-word;
    }

    .mj-text-signal-1 {
        font-size: var(--text-signal-1);
        line-height: var(--leading-signal-1);
        font-weight: var(--weight-bold);
    }

    .mj-text-signal-2 {
        font-size: var(--text-signal-2);
        line-height: var(--leading-signal-2);
        font-weight: var(--weight-bold);
    }

    /* ICONS */
    .mj-site-icon__logo {
        display: block;
        block-size: var(--size-action-lg);
        inline-size: auto;

        aspect-ratio: var(--logo-short-ratio);
    }

    /* Алиасы v1 — для совместимости разметки */
    .mj-text-display {
        font: var(--weight-bold) var(--text-display-3) / var(--leading-display-3) var(--font-body);
        letter-spacing: var(--tracking-display);
    }

    .mj-text-h2 {
        font: var(--weight-bold) var(--text-title-1) / var(--leading-title-1) var(--font-body);
    }

    .mj-text-h3 {
        font: var(--weight-bold) var(--text-title-2) / var(--leading-title-2) var(--font-body);
    }

    .mj-text-lede {
        font-size: var(--text-subtitle-1);
        line-height: var(--leading-subtitle-1);
        color: var(--color-text-muted);
    }

    .mj-text-small {
        font-size: var(--text-caption);
        line-height: var(--leading-caption);
        color: var(--color-text-muted);
    }

    .mj-text-overline {
        font-size: var(--text-signal-1);
        line-height: var(--leading-signal-1);
        text-transform: uppercase;
        letter-spacing: var(--tracking-signal);
        color: var(--color-text-muted);
    }

    .mj-price {
        font-family: var(--font-mono);
        font-size: var(--text-title-2);
        line-height: var(--leading-title-2);
        font-weight: var(--weight-medium);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    /* ---------- Surfaces: контур по умолчанию ---------- */
    .mj-s {
        border: var(--border-default) solid var(--color-border);
        border-radius: var(--radius-large);
        padding: var(--space-group);
        background: transparent;
    }

    .mj-s--solid {
        border-color: transparent;
        background: var(--color-surface);
    }

    .mj-s--raised {
        background: var(--color-surface);
    }

    .mj-s--glass {
        background: var(--color-scrim);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .mj-s--branded {
        position: relative;
        isolation: isolate;
        border: none;

        --logo: url("assets/svg/logo-flat.svg");
        --fill: #00ffa6;
        --opacity: .1;
        --angle: 10deg;
        --row-leading: 1.1;

        .mj-s__logo-field {
            --ratio: 0.14450;
            --pitch: calc(100cqh / var(--logo-rows, 4));
            --tile-h: calc(var(--pitch) / var(--row-leading));
            --tile-w: calc(var(--tile-h) / var(--ratio));
            --bleed: calc(50cqw * tan(var(--angle)));

            position: absolute;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            container-type: size;
            overflow: clip;
            border-radius: inherit;

            &::before,
            &::after {
                content: "";
                position: absolute;
                left: calc(var(--tile-w) * -2);
                width: calc(100cqw + var(--tile-w) * 4);
                top: calc(var(--bleed) * -1);
                height: calc(100cqh + var(--bleed) * 2);

                will-change: transform;

                background: var(--fill);
                opacity: var(--opacity);

                /* one cell = one word wide, two pitches tall; the word is centered in it.
                   It repeats both ways, so any number of rows is covered with no extra elements. */

                -webkit-mask: var(--logo) 0 0 / var(--tile-w) calc(var(--pitch) * 2) repeat;
                mask: var(--logo) 0 0 / var(--tile-w) calc(var(--pitch) * 2) repeat;

                transform: skewY(calc(var(--angle) * -1));
            }

            &::after {

                -webkit-mask-position: 0 var(--pitch);
                mask-position: 0 var(--pitch);
                transform: skewY(calc(var(--angle) * -1)) translateX(calc(var(--pitch) * -5));

            }
        }
    }

    .mj-s--branded-anim {
        --speed-a: 15s;
        --speed-b: 30s;
        --dir-a: 1;
        --dir-b: -1;
        --delay-a: 0s;
        --delay-b: -30s;

        .mj-s__logo-field {
            &::before,
            &::after {
                animation: mj-logo-slide var(--speed-a) var(--delay-a) linear infinite;
                --dir: var(--dir-a);
            }

            &::after {
                --dir: var(--dir-b);

                animation-duration: var(--speed-b);
                animation-delay: var(--delay-b);
            }
        }
    }

    .mj-s--branded--fullscreen {
        --logo-rows: 8;

        background: linear-gradient(to top, transparent 5%, #043735 50%), var(--color-surface);
    }

    @keyframes mj-logo-slide {
        from {
            transform: skewY(calc(var(--angle) * -1)) translateX(0);
        }
        to {
            transform: skewY(calc(var(--angle) * -1)) translateX(calc(var(--tile-w) * var(--dir)));
        }
    }

    /* ---------- Navigation ---------- */
    .mj-nav {
        display: flex;
        flex-direction: column;
        gap: var(--space-group);
        padding: var(--space-group);
        border: var(--border-default) solid var(--color-border);
        border-radius: var(--radius-large);
    }

    .mj-nav__title {
        font-size: var(--text-signal-2);
        line-height: var(--leading-signal-2);
        font-weight: var(--weight-bold);
        letter-spacing: var(--tracking-signal);
        color: var(--color-text-muted);
    }

    .mj-nav__group {
        display: flex;
        flex-direction: column;
        gap: var(--space-inline);

        & + & {
            padding-block-start: var(--space-group);
            border-top: var(--border-default) solid var(--color-border);
        }
    }

    .mj-nav__label {
        padding-inline: var(--core-space-150);
        font-size: var(--text-caption);
        line-height: var(--leading-caption);
        font-weight: var(--weight-bold);
        color: var(--color-text-muted);
    }

    .mj-nav__list {
        display: flex;
        gap: var(--space-hairline);
        flex-direction: column;
    }

    .mj-nav__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-inline);
        min-block-size: var(--size-action-md);
        padding: var(--space-inline) var(--core-space-150);
        border: var(--border-default) solid transparent;
        border-radius: var(--radius-default);
        font-size: var(--text-signal-2);
        line-height: var(--leading-signal-2);
        text-decoration: none;
        transition: border-color var(--transition-quick), color var(--transition-quick);

        &:hover {
            color: var(--color-text);
            border-color: var(--color-border-control);
        }

        &[aria-current="true"] {
            color: var(--color-accent);
            border-color: var(--color-border);
            box-shadow: inset var(--border-strong) 0 0 var(--color-accent);
        }
    }

    .mj-nav__num {
        font-family: var(--font-mono);
        font-size: var(--text-caption);
        color: var(--color-text-muted);
    }

    /* ---------- Button ---------- */
    .mj-btn {
        --mj-btn-bg: transparent;
        --mj-btn-fg: var(--color-text);
        --mj-btn-border: var(--color-border-control);

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-inline);
        min-block-size: var(--size-action-md);
        padding: var(--space-inline) var(--space-inset-btn-x);
        border: var(--border-default) solid var(--mj-btn-border);
        border-radius: var(--radius-full);
        background: var(--mj-btn-bg);
        color: var(--mj-btn-fg);
        font-size: var(--text-control);
        line-height: var(--leading-signal-1);
        font-weight: var(--weight-bold);
        text-align: center;
        text-decoration: none;
        overflow-wrap: anywhere;
        transition: background-color var(--transition-quick),
        border-color var(--transition-quick),
        color var(--transition-quick);

        &:hover,
        &.is-hover {
            --mj-btn-border: var(--color-text);
            color: var(--mj-btn-fg);
        }

        &:active,
        &.is-active {
            --mj-btn-bg: var(--color-surface);
        }

        &.is-focus {
            outline: var(--focus-ring);
            outline-offset: var(--focus-offset);
        }

        &:disabled,
        &[aria-disabled="true"] {
            opacity: 0.4;
            cursor: not-allowed;
        }
    }

    .mj-btn--primary {
        --mj-btn-bg: var(--color-accent);
        --mj-btn-fg: var(--color-background);
        --mj-btn-border: var(--color-accent);

        &:hover,
        &.is-hover {
            --mj-btn-bg: color-mix(in srgb, var(--color-accent), var(--color-text) 30%);
            --mj-btn-border: var(--mj-btn-bg);
        }

        &:active,
        &.is-active {
            --mj-btn-bg: color-mix(in srgb, var(--color-accent), var(--color-background) 15%);
        }
    }

    .mj-btn--secondary {
        --mj-btn-bg: transparent;
    }

    .mj-btn--ghost {
        --mj-btn-border: transparent;

        text-decoration: underline;
        text-underline-offset: 0.2em;

        &:hover,
        &.is-hover {
            --mj-btn-border: transparent;
            color: var(--color-accent);
        }
    }

    .mj-btn--icon {
        inline-size: var(--size-action-md);
        padding: 0;
        border-radius: var(--radius-circle);
    }

    .mj-btn--accordion {
        border-radius: 0;
        border: none;
        border-bottom: var(--border-default) solid var(--color-border);
        min-inline-size: 100%;

        justify-content: space-between;
        align-items: center;

        text-align: left;
        padding-inline: 0;
        padding-block: var(--space-inset);

        &:hover,
        &.is-active {
            color: var(--color-accent);
            background: transparent;
        }
    }

    .mj-btn__icon {
        flex-shrink: 0;
        inline-size: var(--space-group);
        block-size: var(--space-group);
    }

    .mj-spinner {
        inline-size: 1em;
        block-size: 1em;
        border: var(--border-strong) solid currentColor;
        border-inline-end-color: transparent;
        border-radius: var(--radius-circle);
        animation: mj-spin 0.8s linear infinite;
    }

    @keyframes mj-spin {
        to {
            transform: rotate(1turn);
        }
    }

    /* ---------- Field ---------- */
    .mj-field {
        display: flex;
        flex-direction: column;
        gap: var(--space-inline);
        /*max-inline-size: 28rem;*/
    }

    .mj-field__label {
        font-size: var(--text-control);
        line-height: var(--leading-signal-1);
        font-weight: var(--weight-bold);
    }

    .mj-field__hint,
    .mj-field__error {
        font-size: var(--text-caption);
        line-height: var(--leading-caption);
        color: var(--color-text-muted);
    }

    .mj-field__error {
        color: var(--color-danger);
    }

    .mj-field--error .mj-field__input {
        border-color: var(--color-danger);
    }

    .mj-fieldset {
        --mj-l-stack-space: var(--space-inline);
    }

    .mj-field--utility {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .mj-check {
        display: inline-flex;
        align-items: center;
        gap: var(--space-inline);
        min-block-size: var(--size-action-md);
        cursor: pointer;

        input {
            inline-size: 20px;
            block-size: 20px;
            accent-color: var(--color-accent);
        }
    }

    /* Promo zones / banners */
    .mj-promo {
        --mj-promo-gradient: var(--color-gradient-psg);
        --mj-promo-solid: var(--core-color-navy-psg);
        --mj-promo-on: var(--color-text);

        --fill: var(--mj-promo-on);
        --opacity: 0.15;

        position: relative;
        isolation: isolate;
        overflow: hidden;
        container-type: inline-size;
        border: var(--border-default) solid var(--color-border);
        border-radius: var(--radius-large);
        background: var(--mj-promo-gradient), var(--color-surface);
        color: var(--mj-promo-on);
    }

    .mj-promo-banner,
    .mj-promo-banner--small {
        --mj-promo-pad: var(--space-group);
        --mj-promo-min: 26rem;
        --logo-rows: 3;

        --mj-promo-title-min: var(--text-poster-s);
        --mj-promo-title-max: var(--text-poster-m);
        --mj-promo-title-fluid: 0.14; /* heading size = 14% of banner width */
        --mj-promo-title-leading: var(--leading-poster);
        --mj-promo-title-tracking: var(--tracking-poster);

        --mj-promo-media-max: 520px;
        --mj-promo-media-fluid: 0.75; /* product width = 75% of banner width */
        --mj-promo-media-x: calc(var(--mj-promo-media-max) / 5 * -1);
        --mj-promo-media-y: calc(var(--mj-promo-media-max) / 4 * -1);

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--space-group);
        min-block-size: var(--mj-promo-min);
        padding: var(--mj-promo-pad);
    }

    .mj-promo__grid {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(90deg, var(--color-zone-grid) 1px, transparent 1px);
    }

    .mj-promo__eyebrow,
    .mj-promo__body {
        position: relative;
        z-index: var(--z-raised);
    }

    .mj-promo__eyebrow {
        color: inherit;
    }

    .mj-promo__body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-inset);
        max-inline-size: 100%;
    }

    .mj-promo__title {
        font-size: clamp(
                var(--mj-promo-title-min),
                calc(var(--mj-promo-title-fluid) * 100cqi), var(--mj-promo-title-max)
        );
        line-height: var(--mj-promo-title-leading);
        letter-spacing: var(--mj-promo-title-tracking);
        filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.4));
        font-weight: var(--weight-bold);
        text-transform: uppercase;
        text-wrap: balance;
        hyphens: auto;
        overflow-wrap: anywhere;
    }

    .mj-promo__media {
        position: absolute;
        inset-inline-end: var(--mj-promo-media-x);
        inset-block-end: var(--mj-promo-media-y);
        max-inline-size: none;

        block-size: min(var(--mj-promo-media-max), calc(var(--mj-promo-media-fluid) * 100cqb));
        rotate: 15deg;
        pointer-events: none;

    }

    .mj-promo .mj-btn--stage {
        --mj-btn-bg: var(--mj-promo-on);
        --mj-btn-fg: var(--mj-promo-solid);
        --mj-btn-border: var(--mj-promo-on);

        &:hover,
        &.is-hover {
            --mj-btn-bg: color-mix(in srgb, var(--mj-promo-on), var(--mj-promo-solid) 14%);
            --mj-btn-border: transparent;
        }
    }

    /* Pill tabs via segmented controls */
    .mj-tabs {
        --mj-tabs-duration: calc(var(--core-duration-fast) * 1.5);
        --mj-tabs-shift: var(--space-inset);
        --mj-tabs-count: 2;
        --mj-tabs-index: 0;

        display: flex;
        flex-direction: column;
        gap: var(--space-inset);

        .mj-l-stack {
            --mj-l-stack-space: var(--space-inset);
        }
    }

    .mj-tabs__list {
        position: relative;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: var(--space-hairline);
        padding: var(--space-hairline);
        border: var(--border-default) solid var(--color-border);
        border-radius: var(--radius-full);

        &[hidden] {
            display: none;
        }
    }

    .mj-tabs__indicator {
        position: absolute;
        inset-block: var(--space-hairline);
        inset-inline-start: var(--space-hairline);
        inline-size: calc((100% - (var(--mj-tabs-count) + 1) * var(--space-hairline)) / var(--mj-tabs-count));
        border: var(--border-default) solid var(--color-accent);
        border-radius: var(--radius-full);
        pointer-events: none;
        transform: translateX(calc(var(--mj-tabs-index) * (100% + var(--space-hairline))));
    }

    .mj-tabs__tab {
        position: relative;
        z-index: var(--z-raised);
        min-block-size: var(--size-action-md);
        padding: var(--space-inline) var(--space-inset);
        border: var(--border-default) solid transparent;
        border-radius: var(--radius-full);
        background: transparent;
        color: var(--color-text);
        font-size: var(--text-control);
        line-height: var(--leading-signal-1);
        font-weight: var(--weight-bold);
        transition: color var(--transition-quick), border-color var(--transition-quick);

        &:hover:not([aria-selected="true"]) {
            border-color: var(--color-border-control);
        }

        &[aria-selected="true"] {
            color: var(--color-accent);
        }
    }

    .mj-tabs__panels {
        display: grid;
        box-sizing: content-box;
        overflow: clip;
        padding: var(--space-hairline);
        margin: calc(var(--space-hairline) * -1);
    }

    .mj-tabs__panel {
        grid-area: 1 / 1;
        align-self: start;
    }

    .mj-tabs.is-enhanced .mj-tabs__panel {
        opacity: 0;
        visibility: hidden;
        /*transform: translateX(calc(var(--from, 1) * var(--mj-tabs-shift)));*/
    }

    .mj-tabs.is-enhanced .mj-tabs__panel.is-active {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .mj-tabs.is-ready .mj-tabs__indicator {
        transition: transform var(--mj-tabs-duration) var(--core-ease-standard);
    }

    .mj-tabs.is-ready .mj-tabs__panels {
        transition: block-size var(--mj-tabs-duration) var(--core-ease-standard);
    }

    .mj-tabs.is-ready .mj-tabs__panel {
        transition: opacity var(--mj-tabs-duration) var(--core-ease-standard),
        transform var(--mj-tabs-duration) var(--core-ease-standard),
        visibility 0s linear var(--mj-tabs-duration);

        &.is-active {
            transition-delay: 0s;
        }
    }

    /*.mj-auth { inline-size: 100%; max-inline-size: 30rem; margin-inline: auto; }*/
    /*.mj-btn--block { inline-size: 100%; min-block-size: var(--size-action-lg); }*/
    /* ---------- Badge ---------- */
    .mj-product-badge {
        --mj-badge-color: var(--color-variant-default);

        display: inline-flex;
        align-items: center;
        gap: var(--space-hairline);
        padding: var(--space-hairline) var(--space-inline);
        border: var(--border-default) solid var(--mj-badge-color);
        border-radius: var(--radius-full);
        color: var(--mj-badge-color);
        font-size: var(--text-signal-2);
        line-height: var(--leading-signal-2);
        font-weight: var(--weight-bold);
        letter-spacing: var(--tracking-signal);
        white-space: nowrap;
    }

    .mj-product-badge--hot {
        --mj-badge-color: var(--color-variant-default);
    }

    .mj-product-badge--club {
        --mj-badge-color: var(--color-variant-classic);
    }

    .mj-product-badge--mystery {
        --mj-badge-color: var(--color-variant-champ);
    }

    /* ---------- product card ---------- */
    .mj-product-card {
        display: flex;
        flex-direction: column;
        gap: var(--space-inset);
        block-size: 100%;
        z-index: var(--z-base);
        border-radius: var(--radius-large);
    }

    .mj-product-card__reel {
        border-radius: var(--radius-large);
        z-index: var(--z-raised);
        background-color: var(--core-color-manchester-red);
        filter: drop-shadow(0px 10px 5px rgba(0, 0, 0, 0.4));
    }

    .mj-product-card__media {
        > img {
            rotate: 15deg;
            filter: drop-shadow(10px 10px rgba(0, 0, 0, 0.4));
        }
    }

    .mj-product-card__body {
        --mj-l-stack-space: var(--space-inline);
        padding: var(--space-inset);

        flex-grow: 1;
        align-items: flex-start;

        > .mj-btn {
            margin-block-start: auto;
            width: 100%;
        }

        > .mj-product-card__price + .mj-btn {
            margin-block-start: var(--space-inset);
        }
    }

    .mj-product-card__title {
        font-size: var(--text-body);
        line-height: var(--leading-body);
        font-weight: var(--weight-regular);
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    /* ---------- Feedback ---------- */
    .mj-alert {
        padding: var(--space-inset) var(--space-group);
        border-inline-start: var(--border-strong) solid var(--color-accent);
        border-radius: var(--radius-default);
    }

    .mj-alert--error {
        border-inline-start-color: var(--color-danger);
    }

    .mj-empty {
        --mj-l-stack-space: var(--space-inline);

        align-items: flex-start;
        padding: var(--space-subsection) var(--space-group);

        > .mj-btn {
            margin-block-start: var(--space-group);
        }
    }

    /* Breadcrumbs */
    .mj-breadcrumb__item > a {
        text-decoration: none;
    }

    .mj-breadcrumb__item:last-child > a {
        color: var(--color-text);
        font-weight: var(--weight-bold);
        text-decoration: underline;
    }

    .mj-breadcrumb__item:hover > a {
        color: var(--color-accent);
    }

    .mj-breadcrumb__item + .mj-breadcrumb__item::before {
        content: "/";
        color: var(--color-border-control);
        margin-inline-end: var(--space-inline);
    }

    /* Header [full/compact/hero/inner] */
    .mj-site-header {
        .mj-site-header__topbar {
            inset-block-start: 0;
            position: sticky;
            z-index: var(--z-sticky);

            border-bottom: var(--border-default) solid var(--color-border);
            background: var(--color-background);

            .mj-site-header__topbar-content {
                padding-block: var(--space-inset);
                justify-content: space-between;
                align-items: center;
                width: auto;
            }

            .mj-site-header__navigation {
                display: none;
            }

            .mj-site-header__user-controls > .mj-menu-trigger--auth {
                display: none;
            }

            #user-controls > * {
                block-size: var(--size-action-md);
            }
        }

        .mj-site-header__detailed {
            position: relative;
            display: grid;
            min-block-size: calc(var(--size-page-header) - var(--size-header-topbar));

            .mj-site-header__detailed-bg {
                position: absolute;

                block-size: 100%;
                inline-size: 100%;

                z-index: var(--z-base);

                background-image: linear-gradient(90deg, rgba(79, 115, 114, 0.16) 1px, transparent 1px);
                background-size: calc((100% - 96px) / 12) 100%;
            }

            .mj-site-header__detailed-content {
                position: relative;
                z-index: var(--z-raised);

                & > * {
                    margin-block: var(--space-subsection);
                }

                .mj-site-header__page-title {
                    justify-content: space-between !important;
                }
            }

            .mj-site-header__pagemeta {
                border-left: var(--border-strong) solid var(--color-border);
                padding-inline-start: var(--space-inset);
            }
        }
    }

    @media (min-width: 1024px) {
        .mj-site-header {
            .mj-site-header__topbar {
                .mj-menu-trigger--nav {
                    display: none;
                }

                .mj-site-header__navigation {
                    display: block;
                }

                .mj-site-header__user-controls > .mj-menu-trigger--auth {
                    display: flex;
                }
            }
        }
    }

    .mj-site-header[data-variant="minimal"] {
        position: fixed;
        inline-size: 100cqw;
        z-index: var(--z-overlay);

        .mj-site-header__topbar {
            background: initial;
        }

        .mj-site-header__detailed {
            display: none;
        }
    }

    .mj-site-header[data-variant="compact"] {
        .mj-site-header__detailed {
            display: none;
        }
    }

    /* Footer [full/compact] */
    .mj-site-footer {
        /*margin-block-start: var(--space-section);*/
    }

    /* [minimal]: hairline top rule, logo + © on the start side, service links on the end side (artboard Q1) */
    .mj-site-footer[data-variant="minimal"] {
        border-block-start: var(--border-default) solid var(--color-border);

        .mj-site-footer__content {
            justify-content: space-between;
            padding-block: var(--space-group);
        }

        .mj-site-icon__logo {
            block-size: var(--size-action-md);
        }
    }


    /* Site Megamenu [ Nav / Cart / Auth ] */
    .mj-menu {
        --space-menu-gutter: var(--core-space-200);
        color: var(--color-text);

        box-sizing: border-box;
        padding: 0;
        margin: 0;
        border: 0;

        block-size: 100dvh;
        max-block-size: none;
        min-inline-size: 100svw;

        overflow-y: auto;
        overscroll-behavior: contain;

        .mj-menu__inner {
            display: grid;

            grid-template-columns: 1fr 1fr;
            grid-template-areas: "header header"
            "nav nav"
            "auth auth"
            "cart cart"
            "promo promo";

            padding: var(--space-inset) var(--space-menu-gutter);
            gap: var(--space-group);
        }

        /*.mj-menu__inner > * {*/
        /*    padding: var(--space-inset) var(--space-menu-gutter) 0 var(--space-menu-gutter);*/
        /*}*/

        .mj-menu__panel {
            border-radius: var(--radius-large);
            border: var(--border-default) solid var(--color-border);

            padding: var(--space-group) var(--space-inset);
            gap: var(--space-inset);

            > * {
                margin: 0;
            }

            :last-child {
                margin-block-start: auto;
            }
        }

        .mj-menu__header {
            grid-area: header;

            justify-content: space-between;

            & > svg {
                color: var(--color-text);
            }
        }

        .mj-menu__nav {
            grid-area: nav;

            > ol {
                gap: 0;
                --mj-l-stack-space: 0;

                &:first-child {
                    border-top: var(--border-default) solid var(--color-border);
                }
            }

        }

        .mj-menu__auth {
            grid-area: auth;
            border: none;
            padding: var(--space-group) 0;

            > p {
                display: none;
            }

            > .mj-nav__list {
                flex-direction: column;
                align-items: stretch;

                .mj-nav__link {
                    inline-size: 100%;

                    padding: var(--space-inset);
                }
            }
        }

        .mj-menu__cart {
            grid-area: cart;

            .mj-menu__cart-btn {
                inline-size: fit-content;
            }
        }

        .mj-menu__inner-promozone {
            grid-area: promo;
        }
    }

    /* Account  */
    .mj-product-badge--done    { --mj-badge-color: var(--color-variant-classic); }
    .mj-product-badge--transit { --mj-badge-color: var(--color-variant-default); }
    .mj-product-badge--cancel  { --mj-badge-color: var(--color-danger); }

    .mj-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
    .mj-cell-end { text-align: end; }

    .mj-order-active {
        --mj-l-stack-space: var(--space-inset);
        padding: var(--space-inset);

        #btn-track-order {
            --mj-btn-bg: var(--color-text);
            --mj-btn-fg: var(--color-background);
            --mj-btn-border: var(--color-text);

            &:hover,
            &.is-hover {
                --mj-btn-bg: color-mix(in srgb, var(--color-text), var(--color-background) 14%);
                --mj-btn-border: transparent;
            }
        }

        #btn-order-details {
            /*--mj-btn-bg: var(--color-background);*/
            /*--mj-btn-fg: var(--color-text);*/
            /*--mj-btn-border: var(--color-background);*/

            /*&:hover,*/
            /*&.is-hover {*/
            /*    --mj-btn-bg: color-mix(in srgb, var(--color-background), var(--color-text) 14%);*/
            /*    --mj-btn-border: transparent;*/
            /*}*/
        }
    }

    .mj-order-active__label,
    .mj-order-active__date { display: none; }

    .mj-tracker__full { display: none; }

    .mj-order-active__track,
    .mj-order-active__details { display: none; }

    .mj-order-active__actions { inline-size: 100%; }

    .mj-order-active__actions .mj-btn {
        inline-size: 100%;
        min-block-size: var(--size-action-lg);
    }

    /* ---------- Form card (edit-account) ---------- */
    .mj-form-card { max-inline-size: 40rem; }

    .mj-form-card__head { --mj-l-stack-space: var(--space-inline); }

    .mj-form { --mj-l-stack-space: var(--space-inset); }

    /* The card sets the width, not the field's 28rem cap */
    .mj-form .mj-field { max-inline-size: none; }

    .mj-form__pair {
        --mj-l-grid-min: 12rem;
        --mj-l-grid-space: var(--space-inset);
    }

    .mj-form__actions { margin-block-start: var(--space-group); }

    /* ---------- Active order: K1 (desktop) ---------- */
    @media (min-width: 1024px) {
        .mj-order-active {
            --mj-l-stack-space: var(--space-group);
            padding: var(--space-group);
        }

        .mj-order-active__label,
        .mj-order-active__date { display: inline; }

        .mj-tracker__short { display: none; }
        .mj-tracker__full { display: inline; }

        .mj-order-active__track { display: block; }
        .mj-order-active__details { display: inline-flex; }

        .mj-order-active__actions { inline-size: auto; }

        .mj-order-active__actions .mj-btn {
            inline-size: auto;
            min-block-size: var(--size-action-md);
        }
    }

    .mj-order-active__row { justify-content: space-between; }

    .mj-tracker {
        --mj-tracker-dot: var(--core-space-150);
        --mj-tracker-rail: color-mix(in srgb, var(--color-text) 25%, transparent);

        display: grid;
        grid-auto-flow: column;
        padding: 0;
        list-style: none;
        grid-auto-columns: minmax(0, 1fr);

        > li {
            position: relative;
            padding-block-start: calc(var(--space-group) + var(--space-hairline));
            color: var(--color-text);

            &::before {
                content: "";
                position: absolute;
                inset-inline: 0;
                inset-block-start: calc((var(--mj-tracker-dot) - var(--border-strong)) / 2);
                block-size: var(--border-strong);
                background: var(--mj-tracker-rail);
            }

            &::after {
                content: "";
                position: absolute;
                inset: 0 auto auto 0;
                inline-size: var(--mj-tracker-dot);
                block-size: var(--mj-tracker-dot);
                border: var(--border-strong) solid color-mix(in srgb, var(--color-text) 45%, transparent);
                border-radius: var(--radius-circle);
                background: var(--color-background);
            }

            &.is-done::before { background: var(--color-accent); }
            &.is-done::after  { background: var(--color-accent); border-color: var(--color-accent); }

            &.is-now { color: var(--color-accent); }
            &.is-now::before { background: linear-gradient(90deg, var(--color-accent) 50%, var(--mj-tracker-rail) 100%); }
            &.is-now::after {
                border-color: var(--color-accent);
                box-shadow: 0 0 0 var(--space-hairline) color-mix(in srgb, var(--color-accent) 30%, transparent);
            }

            &:not(.is-done, .is-now) { opacity: 0.7; }
        }
    }

    .mj-point {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-inset);
        padding: var(--space-inset);
        border-color: var(--color-accent);
    }

    .mj-opt {
        display: inline-flex;
        align-items: center;
        gap: var(--space-inline);
        min-block-size: var(--size-action-md);
        padding: var(--space-inline) var(--space-inset);
        border: var(--border-default) solid var(--color-border-control);
        border-radius: var(--radius-full);
        font-size: var(--text-control);
        line-height: var(--leading-signal-1);
        font-weight: var(--weight-bold);
        cursor: pointer;
        transition: border-color var(--transition-quick), color var(--transition-quick);

        &:hover { border-color: var(--color-text); }
        &:has(input:checked) { border-color: var(--color-accent); color: var(--color-accent); }
        &:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
    }
    .mj-opt__dot {
        inline-size: var(--space-inline);
        block-size: var(--space-inline);
        border-radius: var(--radius-circle);
        background: var(--mj-opt-dot);
    }

    .mj-btn--danger {
        --mj-btn-fg: var(--color-danger);

        &:hover { color: var(--color-danger); }
    }

    @media (min-width: 1024px) {
        .mj-menu {
            --space-menu-gutter: var(--core-space-400);

            min-inline-size: 50svw;
            margin-inline-start: 50svw;

            border-inline-start: var(--border-default) solid var(--color-border);

            transition: display var(--transition-quick) allow-discrete,
            overlay var(--transition-quick) allow-discrete,
            opacity var(--transition-quick);
            opacity: 0;

            &[open] {
                opacity: 1;

                @starting-style {
                    opacity: 0;
                }
            }

            &::backdrop {
                background: color-mix(in srgb, var(--color-background) 20%, transparent);
                -webkit-backdrop-filter: blur(4px);
                backdrop-filter: blur(4px);
            }

            .mj-menu__inner {
                grid-template-areas: "header header"
                                     "nav nav"
                                     "auth cart"
                                     "promo promo";
            }

            .mj-menu__auth {
                grid-area: auth;
                border: var(--border-default) solid var(--color-border);
                padding: var(--space-group) var(--space-inset);

                > p {
                    display: initial;
                }

                > .mj-nav__list {
                    flex-direction: initial;
                    align-items: inherit;

                    .mj-nav__link {
                        padding: var(--space-inline) var(--space-inset-btn-x);
                    }
                }
            }
        }
    }
}

/**
 * Pages — каркас страниц / уникальные лейауты постранично
 */
@layer pages {
    .mj-primary-wrapper {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        /* header / main grows / footer sticks to the bottom (was a single 1fr row, which stretched the header on short pages) */
        grid-template-rows: auto 1fr auto;
        min-height: 100svh;
    }

    .mj-primary-wrapper > main > :where(:not(.mj-s__logo-field)) {
        max-inline-size: var(--content-max-width);
        margin-inline: auto;
        padding: 0 var(--space-page-margin);
    }

    .mj-main:not(.mj-s--branded--fullscreen) {
        margin-block: var(--space-subsection);
    }

    /* Woo [ general ] */
    .mj-main .woocommerce {
        display: grid;
        grid-template-rows: min-content;
        min-block-size: 100dvh;
        grid-template-columns: minmax(0, 1fr);
    }

    .mj-main--login .woocommerce {
        padding: 0;
    }

    .mj-account {
        margin: var(--space-group) 0;
    }

    /* Login / reg / floater pages standin */
    .mj-main--account {
        min-block-size: 100cqb;

        min-inline-size: 0;

        form {
            block-size: 100%;
        }
    }

    .mj-main--account #customer_login {
        margin-inline: auto;
        margin-block: calc(var(--size-header-topbar) + var(--space-section)) 0;
        max-width: 600px;
        border-radius: 0;
    }

    @media (min-width: 1024px) {
        .mj-main--login .woocommerce {
            padding: 0 var(--space-page-margin);
        }

        .mj-main--account #customer_login {
            border-radius: var(--radius-large);

            margin-block: calc(var(--size-header-topbar) + var(--space-section)) var(--space-section);
        }
    }
}

@layer custom {
}

/**
 * Utilities — одноцелевые классы
 */
@layer utilities {
    .mj-scroll-h {
        max-inline-size: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;

        &:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset)};
    }

    .mj-visually-hidden {
        position: absolute !important;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .mj-skip-link {
        position: absolute;
        top: var(--space-inline);
        left: var(--space-inline);
        z-index: var(--z-skip-link);
        min-block-size: var(--size-action-md);
        padding: var(--space-inline) var(--space-inset-btn-x);
        border-radius: var(--radius-full);
        background: var(--color-accent);
        color: var(--color-background);
        font-weight: var(--weight-bold);
        text-decoration: none;
        transform: translateY(-200%);

        &:focus {
            transform: none;
        }
    }
}