/* The online shop. Self-hosted fonts, no CDN — the same rule as the back office: a page that waits
   on somebody else's server to draw its text is a page that stalls on a bad connection. The warm
   sunset gradient is the back office's "Sell" module colour, so the shop and the till read as one
   business. White on every gradient stop that carries text clears 4.5:1. */

@font-face {
    font-family: "Instrument Sans";
    src: url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

:root {
    --ink: #1B1B2A;
    --ink-muted: #5A5F73;
    --canvas: #FFF8F3;
    --surface: #FFFFFF;
    --hairline: #EDE3DA;
    --brand-a: #C2410C;
    --brand-b: #E11D48;
    --brand-glow: #FF7A18;
    --brand-ink: #B4380A;
    --in-stock: #15803D;
    --low: #8A5A00;
    --out: #B91C1C;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(27, 27, 42, 0.06), 0 8px 24px rgba(27, 27, 42, 0.06);
    --gradient: linear-gradient(120deg, var(--brand-a), var(--brand-b));
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--canvas);
}

h1, h2, h3 {
    font-family: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem); font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; }

a { color: var(--brand-ink); }
a:hover { color: var(--brand-b); }

:focus-visible { outline: 3px solid #2563EB; outline-offset: 2px; border-radius: 4px; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

.muted { color: var(--ink-muted); font-size: 0.9rem; }

/* ── Header ─────────────────────────────────────────────────────────────────────────────── */

.masthead {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--hairline);
}

.masthead__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; }

.brand__mark {
    width: 38px; height: 38px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--gradient);
    color: #FFFFFF;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.25rem;
}

.brand__name { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.15rem; }

.search { flex: 1 1 320px; display: flex; min-width: 0; }

.search input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid var(--hairline);
    border-right: 0;
    border-radius: 999px 0 0 999px;
    font: inherit;
    background: var(--surface);
}

.search button {
    padding: 0 18px;
    border: 0;
    border-radius: 0 999px 999px 0;
    background: var(--gradient);
    color: #FFFFFF;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.masthead__nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.masthead__nav a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: 0.95rem; }
.masthead__nav a:hover { color: var(--brand-b); }

.cart-link { display: inline-flex; gap: 6px; align-items: center; }

.cart-link__count {
    min-width: 22px; height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--gradient);
    color: #FFFFFF;
    font-size: 0.8rem;
    display: inline-grid; place-items: center;
}

/* ── Layout ─────────────────────────────────────────────────────────────────────────────── */

.page { max-width: 1240px; margin: 0 auto; padding: 24px 16px 64px; min-height: 60vh; }

.narrow { max-width: 620px; margin: 0 auto; }
.narrow--wide { max-width: 980px; }

.section { margin-top: 40px; }
.section__head { display: flex; justify-content: space-between; align-items: baseline; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--gradient);
    color: #FFFFFF;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.22);
}

.button:hover { color: #FFFFFF; filter: brightness(1.05); }
.button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.button--large { padding: 14px 24px; font-size: 1.05rem; }

.button--ghost {
    background: var(--surface);
    color: var(--brand-ink);
    border: 1px solid var(--hairline);
    box-shadow: none;
}

.button--ghost:hover { color: var(--brand-b); }

.link-button {
    border: 0;
    background: none;
    color: var(--brand-ink);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.notice {
    padding: 12px 16px;
    border-radius: var(--radius);
    background: #FFF1E6;
    border: 1px solid #FBD5B8;
}

.notice--warn { background: #FEF2F2; border-color: #FECACA; color: #7F1D1D; }

.empty {
    padding: 24px;
    border: 1px dashed var(--hairline);
    border-radius: var(--radius);
    text-align: center;
    color: var(--ink-muted);
}

/* ── Home ───────────────────────────────────────────────────────────────────────────────── */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    padding: 36px;
    border-radius: 24px;
    color: #FFFFFF;
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 122, 24, 0.45), transparent 45%),
        var(--gradient);
    box-shadow: 0 20px 40px rgba(194, 65, 12, 0.25);
}

.hero h1 { color: #FFFFFF; }
.hero p { font-size: 1.1rem; max-width: 34rem; }

.hero__vehicle label { display: block; font-weight: 700; margin: 16px 0 6px; }
.hero__vehicle-row { display: flex; gap: 8px; flex-wrap: wrap; }

.hero__vehicle input {
    flex: 1 1 240px;
    padding: 12px 16px;
    border-radius: 999px;
    border: 0;
    font: inherit;
}

.hero__vehicle .button { background: #1B1B2A; box-shadow: none; }

.hero__promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: center; }

.hero__promises li {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.hero__promises strong { display: block; font-size: 1.05rem; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }

.chip {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
}

.chip span { color: var(--ink-muted); font-weight: 400; margin-left: 4px; }
.chip:hover { border-color: var(--brand-a); }

/* ── Product grid ───────────────────────────────────────────────────────────────────────── */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }

.card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(27, 27, 42, 0.1); }

.card__tile, .product__tile {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 122, 24, 0.18), transparent 60%),
        linear-gradient(135deg, #FFF1E6, #FFE4EC);
    text-decoration: none;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: var(--brand-ink);
    letter-spacing: 0.04em;
}

.card__body { padding: 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card__brand { font-size: 0.78rem; font-weight: 700; color: var(--brand-ink); text-transform: uppercase; letter-spacing: 0.06em; }
.card__name { color: var(--ink); text-decoration: none; font-weight: 700; }
.card__sku { font-family: "JetBrains Mono", monospace; font-size: 0.8rem; color: var(--ink-muted); }
.card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 8px; gap: 4px 8px; }
.card__price { font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.card__add .button { width: 100%; margin-top: 8px; }

.stock { font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.stock--in { color: var(--in-stock); }
.stock--low { color: var(--low); }
.stock--out { color: var(--out); }

/* ── Shop page ──────────────────────────────────────────────────────────────────────────── */

.shop { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; }

.filters h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin-top: 20px; }
.filters ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.filters a { display: block; padding: 5px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.filters a.is-active, .filters a:hover { background: #FFF1E6; color: var(--brand-ink); font-weight: 700; }

.filters__vehicle {
    display: grid;
    gap: 2px;
    padding: 14px;
    border-radius: var(--radius);
    background: var(--gradient);
    color: #FFFFFF;
}

.filters__vehicle a { color: #FFFFFF; padding: 0; }
.filters__vehicle a:hover { background: none; color: #FFFFFF; text-decoration: underline; }

.results__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.results__count { color: var(--ink-muted); }

.sort { display: flex; gap: 8px; align-items: center; }
.sort select, .form input, .form select, .form textarea, .inline-form input, .inline-form select, .qty input {
    padding: 10px 12px;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    font: inherit;
    background: var(--surface);
}

.pager { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 28px; }

.crumbs { display: flex; gap: 8px; margin-bottom: 16px; color: var(--ink-muted); }

/* ── Product page ───────────────────────────────────────────────────────────────────────── */

.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
.product__tile { border-radius: 20px; font-size: 3.5rem; }
.product__codes { display: flex; gap: 16px; flex-wrap: wrap; font-family: "JetBrains Mono", monospace; font-size: 0.9rem; }
.product__price { font-size: 2rem; font-weight: 800; margin: 12px 0 0; }
.product__buy { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.product__buy input { width: 90px; padding: 10px; border: 1px solid var(--hairline); border-radius: 10px; font: inherit; }

.branches { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.branches li { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; }

.fits { columns: 2 280px; padding-left: 18px; }
.fits li { break-inside: avoid; margin-bottom: 6px; }
.fits span { color: var(--ink-muted); font-size: 0.85rem; margin-left: 6px; }

.vehicle-list { list-style: none; padding: 0; display: grid; gap: 8px; margin-top: 16px; }
.vehicle-list a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.vehicle-list a:hover { border-color: var(--brand-a); }
.vehicle-list span { color: var(--ink-muted); }

/* ── Cart, checkout, order ──────────────────────────────────────────────────────────────── */

.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }

.lines { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); margin: 16px 0; }
.lines th, .lines td { padding: 12px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.lines th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); }
.lines td span { display: block; }
.lines .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lines__total td { font-weight: 800; }

.qty { display: inline-flex; gap: 6px; align-items: center; }
.qty input { width: 76px; }

.totals { display: grid; gap: 6px; margin: 16px 0; }
.totals > div { display: flex; justify-content: space-between; gap: 16px; }
.totals__grand { font-size: 1.2rem; font-weight: 800; padding-top: 8px; border-top: 1px solid var(--hairline); }

.actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.form { display: grid; gap: 6px; }
.form label { font-weight: 600; margin-top: 8px; }
.form .button { margin-top: 12px; justify-self: start; }
.form--inline { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; }

.checkout__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }

.summary {
    position: sticky;
    top: 90px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.summary ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.summary li { display: flex; justify-content: space-between; gap: 12px; }

.locate { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }

.confirmed {
    padding: 24px;
    border-radius: 20px;
    background: var(--gradient);
    color: #FFFFFF;
    margin-bottom: 24px;
}

.confirmed h1 { color: #FFFFFF; }
.confirmed .muted { color: rgba(255, 255, 255, 0.92); }

.status { display: grid; gap: 4px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); }
.status__label { font-size: 1.2rem; font-weight: 800; }

.steps { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 0; border-left: 3px solid #FBD5B8; }
.steps li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 8px 16px; position: relative; }
.steps li::before { content: ""; position: absolute; left: -8px; top: 14px; width: 13px; height: 13px; border-radius: 50%; background: var(--gradient); }
.steps time { color: var(--ink-muted); font-size: 0.85rem; white-space: nowrap; }

.feedback { display: grid; gap: 8px; margin-top: 24px; padding: 20px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); }
.stars { border: 0; padding: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.stars input { position: absolute; opacity: 0; }
.stars label { font-size: 2rem; color: #E5D5C8; cursor: pointer; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: #F59E0B; }
.stars input:focus-visible + label { outline: 3px solid #2563EB; border-radius: 4px; }
.feedback textarea { padding: 10px; border: 1px solid var(--hairline); border-radius: 10px; font: inherit; }
.feedback .button { justify-self: start; }

.account-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.addresses { list-style: none; padding: 0; display: grid; gap: 8px; }
.addresses li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; }
.addresses li span { display: block; color: var(--ink-muted); }

/* ── Footer ─────────────────────────────────────────────────────────────────────────────── */

.footer { background: #1B1B2A; color: #E9E6F2; margin-top: 40px; }
.footer__inner { max-width: 1240px; margin: 0 auto; padding: 32px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.footer a { color: #FFD6BF; }
.footer .button--ghost { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.35); }

/* ── Narrow screens ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; padding: 24px; }
    .shop, .product, .checkout__grid { grid-template-columns: 1fr; }
    .summary { position: static; }
    .filters { order: 2; }
    .masthead__nav { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    .card { transition: none; }
    .card:hover { transform: none; }
}