/* ==========================================================================
   incomeauto host theme, "Garage": asphalt surfaces, orange accent,
   condensed display type. Maps the design onto the library's --mp-* tokens
   (marketplace-vendor/styles/core.css, loaded first) and adds the few .ia-*
   shell classes the library has no notion of. Dark is the default theme.
   ========================================================================== */

/* ── Fonts (self-hosted, OFL, see OFL-*.txt) ─────────────────────────────
   Cyrillic + Latin subsets. The ruble sign lives in neither, so it ships as
   a one-glyph face. font-display: swap keeps text visible while they load. */
@font-face { font-family: "Fira Sans Extra Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/fira-xc-600-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans Extra Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/fira-xc-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans Extra Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/fira-xc-600-ruble.woff2") format("woff2"); unicode-range: U+20BD; }
@font-face { font-family: "Fira Sans Extra Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/fira-xc-700-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans Extra Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/fira-xc-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans Extra Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/fira-xc-700-ruble.woff2") format("woff2"); unicode-range: U+20BD; }
@font-face { font-family: "Fira Sans Extra Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/fira-xc-800-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans Extra Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/fira-xc-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans Extra Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/fira-xc-800-ruble.woff2") format("woff2"); unicode-range: U+20BD; }
@font-face { font-family: "Fira Sans Extra Condensed"; font-weight: 700; font-style: italic; font-display: swap; src: url("fonts/fira-xc-700i-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans Extra Condensed"; font-weight: 700; font-style: italic; font-display: swap; src: url("fonts/fira-xc-700i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fira Sans Extra Condensed"; font-weight: 800; font-style: italic; font-display: swap; src: url("fonts/fira-xc-800i-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Fira Sans Extra Condensed"; font-weight: 800; font-style: italic; font-display: swap; src: url("fonts/fira-xc-800i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Onest is a variable font: one file per subset covers 400-700. */
@font-face { font-family: "Onest"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("fonts/onest-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("fonts/onest-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("fonts/onest-ruble.woff2") format("woff2"); unicode-range: U+20BD; }

/* ── Tokens: light ───────────────────────────────────────────────────── */
:root {
    --mp-bg: #f4f3f0;
    --mp-bg-alt: #eceae5;
    --mp-surface: #ffffff;
    --mp-surface-2: #f6f5f2;
    --mp-well-1: #fbfbfc;          /* light box behind photos: supplier shots sit on white */
    --mp-well-2: #e3e5e9;

    --mp-fg: #15171a;
    --mp-fg-muted: #4f555f;
    --mp-fg-subtle: #646a74;
    --mp-border: #dedbd4;
    --mp-border-strong: #c3bfb6;

    --mp-primary: #ff7a18;
    --mp-primary-hover: #ff8a30;
    --mp-primary-press: #ea6a0b;
    --mp-primary-fg: #170b02;
    --mp-primary-text: #b04600;    /* 5.6:1 on white */
    --mp-primary-soft: rgba(255, 122, 24, 0.13);
    --mp-ring: #c25100;

    --mp-success: #14804f;  --mp-success-soft: rgba(20, 128, 79, 0.11);
    --mp-warning: #8a5a00;  --mp-warning-soft: rgba(197, 134, 0, 0.14);
    --mp-danger:  #c42b2b;  --mp-danger-soft:  rgba(196, 43, 43, 0.10);
    --mp-info:    #1c64b8;  --mp-info-soft:    rgba(28, 100, 184, 0.10);

    --mp-header-bg: rgba(244, 243, 240, 0.86);
    --mp-overlay: rgba(20, 18, 14, 0.5);
    --mp-shadow-card: 0 0 0 1px rgba(20, 18, 14, 0.04), 0 1px 2px rgba(20, 18, 14, 0.05), 0 6px 16px -6px rgba(20, 18, 14, 0.08);
    --mp-shadow-pop: 0 0 0 1px rgba(20, 18, 14, 0.06), 0 2px 4px rgba(20, 18, 14, 0.06), 0 24px 48px -16px rgba(20, 18, 14, 0.22);
    --ia-grain: 0.05;
}

/* ── Tokens: dark (default). .mp-on-dark pins a block (hero, footer) to it in the light theme too. */
[data-theme="dark"], .mp-on-dark {
    --mp-bg: #0d0e10;              /* asphalt */
    --mp-bg-alt: #131518;
    --mp-surface: #1a1c20;
    --mp-surface-2: #23262b;
    --mp-well-1: #f7f8f9;
    --mp-well-2: #dcdfe4;

    --mp-fg: #f3f1ed;
    --mp-fg-muted: #a9aeb6;        /* 7.9:1 on bg */
    --mp-fg-subtle: #8a909a;       /* 5.6:1 on bg, 4.9:1 on surface */
    --mp-border: #2a2d33;
    --mp-border-strong: #3d414a;

    --mp-primary: #ff7a18;
    --mp-primary-hover: #ff9242;
    --mp-primary-press: #ea6a0b;
    --mp-primary-fg: #170b02;      /* 8.4:1 on primary */
    --mp-primary-text: #ff8d3a;
    --mp-primary-soft: rgba(255, 122, 24, 0.14);
    --mp-ring: #ff9242;

    --mp-success: #43d392;  --mp-success-soft: rgba(67, 211, 146, 0.14);
    --mp-warning: #f4c14e;  --mp-warning-soft: rgba(244, 193, 78, 0.14);
    --mp-danger:  #ff7474;  --mp-danger-soft:  rgba(255, 116, 116, 0.14);
    --mp-info:    #6fb6ff;  --mp-info-soft:    rgba(111, 182, 255, 0.14);

    --mp-header-bg: rgba(13, 14, 16, 0.82);
    --mp-overlay: rgba(4, 5, 6, 0.66);
    --mp-shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.02);
    --mp-shadow-pop: 0 24px 60px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --ia-grain: 0.06;
}
.mp-on-dark { background: var(--mp-bg); color: var(--mp-fg); color-scheme: dark; }

/* ── Tokens: type, shape, photos ─────────────────────────────────────── */
:root {
    --mp-font-display: "Fira Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
    --mp-font-text: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mp-display-weight: 700;
    --mp-display-tracking: 0.005em;
    --mp-display-leading: 1.02;

    /* Condensed caps run small: the display steps are one notch up from the neutral scale. */
    --mp-fs-xl: 1.5rem;
    --mp-fs-2xl: 1.875rem;
    --mp-fs-3xl: 2.5rem;
    --mp-fs-4xl: clamp(2.125rem, 5vw, 3.5rem);
    --mp-fs-price: 1.875rem;

    --mp-container-max: 1360px;

    /* Supplier photos are shot on white: show them in a light well and let the white drop out. */
    --mp-well-fit: contain;
    --mp-well-blend: multiply;
    --mp-img-outline: oklch(0 0 0 / 0.1);
}

/* ── Fields: inset on dark, white on light ───────────────────────────── */
.mp-input, .mp-select, .mp-textarea, .mp-stepper { background: var(--mp-bg-alt); }
.mp-check input { background: var(--mp-bg-alt); }
[data-theme="light"] .mp-input, [data-theme="light"] .mp-select, [data-theme="light"] .mp-textarea,
[data-theme="light"] .mp-stepper, [data-theme="light"] .mp-check input { background: #fff; }
[data-theme="light"] .mp-on-dark .mp-input, [data-theme="light"] .mp-on-dark .mp-select,
[data-theme="light"] .mp-on-dark .mp-check input { background: var(--mp-bg-alt); }
[data-theme="light"] .mp-card, [data-theme="light"] .mp-product { border-color: transparent; }

/* ── Header ──────────────────────────────────────────────────────────── */
:root { --mp-header-h: 72px; }
@media (max-width: 760px) { :root { --mp-header-h: 116px; } }

.mp-logo {
    position: relative; padding-left: 18px;
    font: italic 800 30px/1 var(--mp-font-display); letter-spacing: 0.01em;
}
.mp-logo::before {   /* the slanted tread block */
    content: ""; position: absolute; left: 0; top: 50%; width: 11px; height: 22px; translate: 0 -50%;
    background: var(--mp-primary); transform: skewX(-18deg); border-radius: 2px;
    box-shadow: 5px 0 0 -1px var(--mp-primary-soft);
}
.mp-logo em { color: var(--mp-primary-text); font-style: italic; }
@media (max-width: 760px) { .mp-logo { font-size: 26px; } }
.mp-nav-link { font-size: 0.9375rem; }
.ia-mnav-tools { padding: 12px 12px 0; margin-top: 8px; border-top: 1px solid var(--mp-border); }

/* ── Product cards: season/stock tags and condensed type ─────────────── */
/* Badge tones come from the backend (success = summer, info = winter, neutral = all-season,
   warning = low stock). On a photo every tag is a dark chip; a season icon is orange (as in the
   Garage design), a badge without one gets a dot in its tone colour. */
.mp-tag {
    --_tone: var(--mp-fg-subtle);
    background: rgba(13, 14, 16, 0.82); color: #f3f1ed; box-shadow: none;
}
.mp-tag .mp-i { color: #ff8d3a; }
.mp-tag__dot { background: var(--_tone); }
.mp-tag--accent  { --_tone: #ff8d3a; color: #f3f1ed; box-shadow: none; }
.mp-tag--success { --_tone: #43d392; color: #f3f1ed; box-shadow: none; }
.mp-tag--warning { --_tone: #f4c14e; color: #f3f1ed; box-shadow: none; }
.mp-tag--info    { --_tone: #6fb6ff; color: #f3f1ed; box-shadow: none; }
.mp-product__vendor { font-size: 0.8125rem; }   /* the brand line above the title */
.mp-product__title { font-size: 1.5rem; line-height: 1.05; }
.mp-hl li:first-child { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.01em; }
@media (max-width: 520px) { .mp-product__title { font-size: 1.3125rem; } }

/* ── Brand motifs: tread band and grain ──────────────────────────────── */
.ia-tread {
    height: 10px; opacity: 0.9;
    background: repeating-linear-gradient(115deg, var(--mp-border-strong) 0 10px, transparent 10px 16px);
    -webkit-mask: linear-gradient(90deg, #000 60%, transparent); mask: linear-gradient(90deg, #000 60%, transparent);
}
.ia-tread--accent { background: repeating-linear-gradient(115deg, var(--mp-primary) 0 10px, transparent 10px 16px); }
.ia-grain { position: relative; isolation: isolate; }
.ia-grain::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--ia-grain); mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.ia-footer { margin-top: var(--mp-space-5); }
.ia-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 40px; padding-block: 56px 40px; }
.ia-footer h2 { margin-bottom: 14px; font-size: 1.25rem; }
.ia-footer__about { margin-top: 14px; max-width: 36ch; color: var(--mp-fg-muted); font-size: 0.9375rem; }
.ia-footer li a { display: inline-flex; align-items: center; min-height: 36px; color: var(--mp-fg-muted); transition: color var(--mp-dur); }
.ia-footer li a:hover { color: var(--mp-fg); text-decoration: none; }
.ia-footer__bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 20px 28px;
    border-top: 1px solid var(--mp-border); color: var(--mp-fg-subtle); font-size: 0.875rem;
}
@media (max-width: 900px) { .ia-footer__grid { grid-template-columns: 1fr 1fr; } .ia-footer__grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) {
    .mp-tags { max-width: calc(100% - 12px); }
    .mp-tag { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}