/* Calm Ledger, Megyefo's design system: quiet surfaces, one accent (a store's
   own brand colour in its shop), money in Geist Mono, generous gutters. Pages
   use the classes below; frames set the brand. The back office's version of
   these tokens is frontend/src/styles.css. */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-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: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/geist-mono-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; }

:root {
    --ink: #111113;
    --ink-2: #1c1c1f;
    --ink-3: #2a2a2e;
    --ink-soft: var(--ink-3);
    --ground: #f7f7f5;
    --surface: #fff;
    --line: #e6e6e3;
    --line-strong: #d4d4d0;
    --hairline: #efefec;
    --text-2: #3f3f46;
    --muted: #5e5e66;
    --muted-2: #71717a;
    /* Megyefo's own accent, with white text on it. A store's shop uses its own brand colour instead. */
    --megyefo: #c2410c;
    --brand: var(--megyefo);
    --brand-soft: #fff1e8;
    --on-brand: var(--ink);
    /* State, and only state: paid, waiting, late. */
    --paid: #15803d;
    --paid-soft: #e9f7ee;
    --wait: #b45309;
    --wait-soft: #fdf3e6;
    --late: #b91c1c;
    --late-soft: #fdecec;
    --mono: "Geist Mono", ui-monospace, monospace;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius: 16px;
    --radius-xl: 20px;
    --shadow-sm: 0 1px 2px rgba(11, 11, 13, 0.06);
    --shadow-md: 0 12px 32px -16px rgba(11, 11, 13, 0.22);
    --shadow-lg: 0 40px 80px -30px rgba(11, 11, 13, 0.55);
    /* Space between content and the edge of the window, and the widest content gets. */
    --gutter: clamp(20px, 4.5vw, 56px);
    --page: 1240px;
    --shop-page: 1320px;
    /* Padding that keeps a full-width band's content inside the page width. */
    --bleed: max(var(--gutter), calc((100% - var(--page)) / 2));
    font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
h1 { letter-spacing: -0.045em; line-height: 1; margin: 0; }
h2 { letter-spacing: -0.03em; line-height: 1.15; }
p { text-wrap: pretty; }
::selection { background: var(--brand); color: var(--on-brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
h1:focus { outline: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.lead { font-size: 1.15rem; line-height: 1.55; max-width: 38rem; color: var(--text-2); margin: 0; }
.muted { color: var(--muted); }
.mono { font-family: "Geist Mono", ui-monospace, monospace; }
.eyebrow { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grid-ink { background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 56px 56px; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 14px; border: 1px solid transparent; font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap; transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, filter 0.15s; }
.button:active { transform: translateY(1px); }
.button-light { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.button-light:hover { border-color: var(--ink); }
.button-brand { background: var(--brand); color: var(--on-brand); }
.button-brand:hover { filter: brightness(0.94); color: var(--on-brand); }
.button-ink { background: var(--ink); color: #fff; cursor: pointer; }
.button-ink:hover { background: var(--ink-3); color: #fff; }
.button-outline { background: #fff; border-color: var(--line-strong); color: var(--ink); cursor: pointer; }
.button-outline:hover { border-color: var(--ink); }
.button-small { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; transition: background-color 0.15s; }
.button-small:hover { background: var(--ink-3); color: #fff; }
.link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover { text-decoration-thickness: 2px; }
.admin-link-button { background: none; border: 0; padding: 0; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.admin-link-button { color: #b91c1c; }

/* Form controls: one look everywhere. */
.auth-form input:not([type=checkbox]):not([type=radio]),
.auth-form select, .auth-form textarea,
.checkout-form input:not([type=radio]):not([type=checkbox]), .checkout-form select, .checkout-form textarea, .admin-inline-form input:not([type=checkbox]):not([type=radio]), .admin-inline-form select, .admin-inline-form textarea, .add-to-cart input, .vehicle-bar select {
    min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; font-size: 15px; width: auto; max-width: 100%;
    box-shadow: var(--shadow-sm); transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-form textarea, .checkout-form textarea, .admin-inline-form textarea { padding: 10px 14px; min-height: 96px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent) !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--ink); width: 18px; height: 18px; }
::placeholder { color: #71717a; opacity: 1; }
.invalid { border-color: #dc2626 !important; }

/* Notices and badges */
.auth-error { margin: 0; padding: 12px 14px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; font-size: 14px; }
.admin-notice { margin: 0; padding: 12px 14px; border-radius: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; font-size: 14px; }
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #f4f4f5; color: var(--muted); white-space: nowrap; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Money lines up: prices, totals and amounts in tables are in mono. */
.num, .money, .product-price, .product-detail-price, .was-price, .bundle li > span { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.choice-price, .checkout-summary li > span:last-child, .order-lines li > span:last-child { font-variant-numeric: tabular-nums; }
.checkout-summary > ul:not(.trust-list) > li > span:last-child, .order-lines li > span:last-child { white-space: nowrap; }

/* The Megyefo mark */

.site-mark { width: 28px; height: 28px; border-radius: 9px; background: var(--megyefo); display: grid; place-items: center; flex: none; }
.site-mark::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--ink); }

/* ───────── Megyefo's own site ───────── */
.site { min-height: 100vh; display: flex; flex-direction: column; background: var(--ground); color: var(--ink); --on-brand: #fff; }
/* Calm Ledger: the top band is light; the accent is kept for the one main action and the headline's point. */
.site-top { position: relative; overflow: hidden; background-color: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); }
.site-top.grid-ink { background-image: linear-gradient(to right, rgba(17, 17, 19, 0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(17, 17, 19, 0.035) 1px, transparent 1px); }
.site-glow { position: absolute; left: 50%; top: -280px; width: 760px; height: 560px; margin-left: -120px; border-radius: 999px; background: var(--megyefo); opacity: 0.07; filter: blur(140px); pointer-events: none; }
/* The header stays at the top as the page scrolls: translucent, and with a hairline once the page has moved. */
.site-header { position: sticky; top: 0; z-index: 40; padding: 12px var(--bleed); background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.2s, box-shadow 0.2s; }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 28px -22px rgba(17, 17, 19, 0.4); }
.site-nav { display: flex; align-items: center; gap: 16px 24px; }
/* The menu's links glide to their section, which stops below the header. */
html:has(.site) { scroll-behavior: smooth; }
.site [id] { scroll-margin-top: 84px; }
.site-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; letter-spacing: -0.04em; color: inherit; }
.site-links { flex: 1 1 auto; display: flex; gap: 2px; font-size: 15px; font-weight: 500; }
.site-links a { padding: 8px 12px; border-radius: 10px; color: var(--text-2); transition: color 0.15s, background-color 0.15s; }
.site-links a:hover { color: var(--ink); background: var(--ground); }
/* The section in view. */
.site-links a[aria-current] { color: var(--ink); background: #f1f1ef; font-weight: 600; }
.site-menu { display: none; }
.site-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; font-weight: 600; cursor: pointer; }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.site-menu[open] summary { border-color: var(--ink); }
/* Open, the menu button turns into Close where it was. */
.site-menu-close-icon, .site-menu-close-label, .site-menu[open] .site-menu-open-icon, .site-menu[open] .site-menu-open-label { display: none; }
.site-menu[open] .site-menu-close-icon { display: block; }
.site-menu[open] .site-menu-close-label { display: inline; }
/* The phone menu: a sheet from under the header to the bottom of the screen. The header turns plain white while it
   is open, since a blurred header would hold the fixed sheet inside it, and its Start button gives way to the sheet's. */
.site-header:has(.site-menu[open]) { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--line); box-shadow: none; }
.site-header:has(.site-menu[open]) .site-actions { visibility: hidden; }
.site-menu-panel { position: fixed; z-index: 39; left: 0; right: 0; top: 69px; bottom: 0; display: flex; flex-direction: column; background: #fff; overflow-y: auto; overscroll-behavior: contain; animation: fade-in 160ms var(--ease-out); }
.site-menu-sections { display: flex; flex-direction: column; padding: 4px var(--bleed) 0; }
.site-menu-sections a { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.site-menu-number { flex: none; width: 20px; font-family: var(--mono); font-size: 12px; color: var(--muted-2); }
.site-menu-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.site-menu-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.site-menu-about { font-size: 14px; line-height: 1.4; color: var(--muted); }
/* The section you're in. */
.site-menu-sections a[aria-current] .site-menu-number { color: var(--megyefo); }
.site-menu-sections a[aria-current] .site-menu-name::after { content: "You're here"; padding: 2px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--megyefo); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.site-menu-chat { display: flex; align-items: center; gap: 10px; padding: 18px var(--bleed); font-size: 15px; color: var(--text-2); }
.site-menu-chat svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The ways in, at the bottom in reach of the thumb. */
.site-menu-actions { margin-top: auto; position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px var(--bleed) calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--ground); }
.site-menu-actions a { height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; font-weight: 600; font-size: 15px; color: var(--ink); }
.site-menu-actions .site-menu-start { grid-column: 1 / -1; height: 54px; border: 0; border-radius: 14px; background: var(--megyefo); color: #fff; font-size: 17px; }
.site-menu-actions .site-menu-start:hover { background: color-mix(in srgb, var(--megyefo) 88%, #000); }
@media (max-width: 980px) { html:has(.site-menu[open]) { overflow: hidden; } }
.site-menu-panel { scrollbar-width: thin; }
/* Short screens (a small phone, a zoomed window): denser rows, so all five sections and the buttons fit. */
@media (max-height: 760px) {
    .site-menu-sections a { padding: 10px 0; }
    .site-menu-name { font-size: 19px; }
    .site-menu-about { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .site-menu-chat { padding-top: 12px; padding-bottom: 12px; }
    .site-menu-actions { gap: 8px; padding-top: 12px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
    .site-menu-actions a { height: 42px; }
    .site-menu-actions .site-menu-start { height: 48px; font-size: 16px; }
}
/* A phone on its side: the names alone, and the three buttons on one row. */
@media (max-height: 520px) {
    .site-menu-sections a { padding: 8px 0; align-items: center; }
    .site-menu-name { font-size: 18px; }
    .site-menu-about { display: none; }
    .site-menu-actions { grid-template-columns: 2fr 1fr 1fr; }
    .site-menu-actions .site-menu-start { grid-column: auto; height: 42px; font-size: 15px; }
}
/* Where the links no longer fit on one line, they fold into the menu. */
@media (max-width: 980px) {
    .site-links, .site-actions .site-button-plain { display: none; }
    .site-menu { display: block; }
    .site-actions { margin-left: auto; }
}
.site-actions, .site-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.site-main { flex: 1; }
.site-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 14px; font-size: 16px; font-weight: 600; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color 0.15s, border-color 0.15s, filter 0.15s, transform 0.15s; }
.site-button:active { transform: translateY(1px); }
.site-button svg { width: 16px; height: 16px; }
.site-button-plain { height: 44px; padding: 0 14px; color: inherit; }
.site-top .site-button-plain { color: var(--ink); }
.site-button-ink { background: var(--ink); color: #fff; }
.site-button-ink:hover { background: var(--ink-3); }
.site-button-white { height: 44px; padding: 0 20px; background: var(--ink); color: #fff; }
.site-button-white:hover { background: var(--ink-3); }
.site-button-accent { background: var(--megyefo); color: #fff; }
.site-button-accent:hover { filter: brightness(0.94); }
.site-button-light { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.site-button-light:hover { border-color: var(--ink); }
.site-button-ghost { border-color: var(--line-strong); background: #fff; color: var(--ink); }
.site-button-ghost:hover { border-color: var(--ink); }

.site-hero { position: relative; padding: clamp(48px, 7vw, 88px) var(--bleed) clamp(64px, 8vw, 104px); display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 5vw, 56px); text-align: center; }
.site-hero-text { max-width: 920px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.site-hero .site-pill { align-self: center; }
.site-hero .site-row { justify-content: center; }
.site-hero h1 { margin: 0; font-size: clamp(42px, 6vw, 84px); line-height: 0.98; letter-spacing: -0.055em; }
.site-hero h1 em { font-style: normal; color: var(--megyefo); }
.site-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; }
.site-pill, .site-mono, .site-eyebrow { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.site-top .site-pill { border-color: var(--line); background: var(--ground); color: var(--text-2); }
.site-eyebrow { margin: 0; font-weight: 500; color: var(--muted); }
.site-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--megyefo); }
.site-lead { margin: 0; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--text-2); max-width: 580px; }
.site-top .site-lead { color: var(--text-2); }
.site-small { font-size: 14px; color: var(--muted); gap: 8px 24px; }
.site-top .site-small { color: var(--muted); }
.site-small span::before { content: "✓"; margin-right: 8px; color: var(--megyefo); font-weight: 700; }

/* The hero's tour of the back office: tabs over an app window, with the shopper's phone in front. */
.site-tour { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: left; }
.site-tour-tabs, .site-industry-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 14px; background: #f1f1ef; max-width: 100%; }
.site-tour-tabs button, .site-industry-tabs button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-2); cursor: pointer; transition: background-color 0.15s, color 0.15s, box-shadow 0.15s; }
.site-tour-tabs button:hover, .site-industry-tabs button:hover { color: var(--ink); }
.site-tour-tabs [aria-selected="true"], .site-industry-tabs [aria-selected="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.site-tour-stage { position: relative; width: 100%; max-width: 1080px; }
.site-tour-window { display: grid; grid-template-columns: 196px 1fr; min-height: 380px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 0 0 10px var(--ground), 0 0 0 11px var(--line), var(--shadow-lg); overflow: hidden; }
.site-tour-side { display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; border-right: 1px solid var(--hairline); font-size: 13px; color: var(--text-2); }
.site-tour-side b { padding: 0 10px 12px; font-size: 14px; color: var(--ink); }
.site-tour-side span { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 8px; }
.site-tour-side .is-on { background: #f1f1ef; color: var(--ink); font-weight: 600; }
.site-tour-side i { font-style: normal; font-family: var(--mono); font-weight: 500; }
.site-tour-panel { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 16px; animation: fade-in 260ms var(--ease-out); }
.site-tour-panel[hidden] { display: none; }
.site-tour-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.site-tour-tiles div { padding: 14px; border: 1px solid var(--hairline); border-radius: 12px; display: flex; flex-direction: column; gap: 4px; }
.site-tour-tiles span { font-size: 12px; color: var(--muted); }
.site-tour-tiles b { font-family: var(--mono); font-size: 24px; font-weight: 500; }
.site-tour-tiles .is-wait { color: var(--wait); }
.site-tour-tiles .is-late { color: var(--late); }
.site-tour-rows { display: flex; flex-direction: column; font-size: 14px; }
.site-tour-rows > div { display: grid; grid-template-columns: minmax(130px, 1.1fr) 1.6fr minmax(130px, 1fr) minmax(90px, 0.7fr); gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hairline); }
.site-tour-rows b { text-align: right; font-family: var(--mono); font-weight: 500; }
.site-tour-mono { font-family: var(--mono); }
.site-tag { justify-self: start; padding: 3px 9px; border-radius: 999px; background: #f1f1ef; color: var(--text-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.site-tag.is-paid { background: var(--paid-soft); color: var(--paid); }
.site-tag.is-wait { background: var(--wait-soft); color: var(--wait); }
.site-tag.is-late { background: var(--late-soft); color: var(--late); }
.site-tour-shop { display: flex; flex-direction: column; gap: 2px; padding: 18px; border-radius: 14px; background: var(--ground); }
.site-tour-shop b { font-size: 22px; letter-spacing: -0.03em; }
.site-tour-shop span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.site-tour-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.site-tour-products div { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.site-tour-products i { aspect-ratio: 4 / 3; border-radius: 12px; background: #f1f1ef; }
.site-tour-products b { font-family: var(--mono); font-weight: 500; }
/* The money owed, by how late: not yet due, up to 30 days, over 30 (the tour and the credit tile). */
.site-ageing { height: 6px; border-radius: 999px; overflow: hidden; display: flex; gap: 2px; background: var(--line); }
.site-ageing i:nth-child(1) { width: 58%; background: var(--paid); }
.site-ageing i:nth-child(2) { width: 23%; background: #f59e0b; }
.site-ageing i:nth-child(3) { width: 19%; background: var(--late); }
.site-tour-phone { position: absolute; right: -64px; bottom: -44px; width: 220px; padding: 18px 16px; border-radius: 26px; background: #fff; border: 8px solid var(--ink); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--muted); }
.site-tour-phone b { font-size: 16px; color: var(--ink); }
.site-tour-paid { color: var(--paid) !important; font-weight: 600; }
.site-tour-paid::before { content: "✓"; margin-right: 6px; }
/* The phone stands at the window's edge only where there is room for it, and the panel leaves it space. */
@media (max-width: 1320px) { .site-tour-phone { display: none; } }
@media (min-width: 1321px) { .site-tour-panel { padding-right: 160px; } }
/* On a phone the tabs keep to one line and scroll sideways, and the tour's figures sit three across. */
@media (max-width: 640px) {
    .site-tour-tabs, .site-industry-tabs { display: flex; flex-wrap: nowrap; width: 100%; box-sizing: border-box; overflow-x: auto; scrollbar-width: none; }
    .site-tour-tabs button, .site-industry-tabs button { flex: none; padding: 0 12px; }
    .site-tour-panel { padding: 16px; }
    .site-tour-tiles { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
    .site-tour-tiles div { padding: 10px; }
    .site-tour-tiles span { font-size: 11px; }
    .site-tour-tiles b { font-size: 17px; }
}
@media (max-width: 860px) {
    .site-tour-window { grid-template-columns: 1fr; }
    .site-tour-side { display: none; }
    .site-tour-rows > div { grid-template-columns: 1fr auto; }
    .site-tour-rows > div > span:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 13px; }
    .site-tour-rows .site-tag { grid-column: 2; grid-row: 2; justify-self: end; }
    .site-tour-products { grid-template-columns: repeat(2, 1fr); }
    .site-tour-products div:nth-child(3) { display: none; }
}
/* Under the hero: the payment networks customers already use, as plain names gliding slowly past, fading in and
   out at the edges. The row is there twice, so moving it by half its length loops without a seam; a pointer over it
   holds it still to read. */
.site-rails { position: relative; overflow: hidden; padding: 22px 0; border-top: 1px solid var(--hairline); font-size: 15px; color: var(--muted);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.site-rails span { font-size: 13px; }
.site-rails b { font-weight: 600; }
.site-rails-track { display: flex; width: max-content; animation: rails-glide 48s linear infinite; }
.site-rails:hover .site-rails-track { animation-play-state: paused; }
.site-rails-set, .site-rails-group { display: flex; align-items: center; gap: 36px; margin: 0; white-space: nowrap; }
.site-rails-set { flex: none; padding-right: 36px; }
@keyframes rails-glide { to { transform: translateX(-50%); } }
@media (max-width: 640px) {
    .site-rails-set, .site-rails-group { gap: 24px; }
    .site-rails-set { padding-right: 24px; }
    .site-rails-track { animation-duration: 36s; }
}
/* Less motion asked for: the names stand still, wrapped in the middle, once. */
@media (prefers-reduced-motion: reduce) {
    .site-rails { padding: 22px var(--bleed); -webkit-mask-image: none; mask-image: none; }
    .site-rails-track { width: auto; justify-content: center; }
    .site-rails-set { flex: 1; flex-wrap: wrap; justify-content: center; gap: 10px 36px; padding-right: 0; }
    .site-rails-set[aria-hidden="true"] { display: none; }
    .site-rails-group { flex-wrap: wrap; justify-content: center; gap: 10px 36px; white-space: normal; }
}

.site-section { padding: clamp(56px, 8vw, 104px) var(--bleed) 0; display: flex; flex-direction: column; gap: 32px; }
.site-section:last-child { padding-bottom: clamp(56px, 8vw, 104px); }
.site-split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.site-h2 { margin: 0; font-size: clamp(34px, 4.6vw, 56px); line-height: 1; letter-spacing: -0.05em; font-weight: 600; max-width: 760px; }
.site-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.site-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; transition: border-color 0.15s; }
.site-card:hover { border-color: var(--line-strong); }
.site-card h3 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
.site-card p, .site-card ul { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.site-card ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.site-card .site-button { margin-top: auto; align-self: stretch; }
/* The plan most stores choose: outlined in ink, with its word above. */
.site-card-featured { position: relative; border: 2px solid var(--ink); padding: 27px; }
.site-card-featured:hover { border-color: var(--ink); }
.site-badge { position: absolute; top: -13px; left: 24px; padding: 4px 10px; border-radius: 999px; background: var(--megyefo); color: #fff; font-size: 12px; font-weight: 600; }
/* What the platform does, as tiles that each show it: the trade credit one twice as wide, in ink. */
.site-bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.site-tile { min-height: 290px; box-sizing: border-box; padding: 28px; border-radius: var(--radius-xl); background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.site-tile h3 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
.site-tile p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 440px; }
.site-tile-owed { background: var(--ink); color: #fff; border-color: var(--ink); }
.site-tile-owed p { color: #d4d4d8; }
.site-tile-quotes { background: var(--brand-soft); border-color: #fbd9c4; }
.site-tile-quotes p { color: var(--text-2); }
@media (min-width: 980px) { .site-bento { grid-template-columns: repeat(3, 1fr); } .site-tile-owed { grid-column: span 2; } }
.site-mini { margin-top: auto; display: flex; gap: 8px; font-size: 13px; }
.site-mini-owed { flex-wrap: wrap; gap: 10px 24px; color: #d4d4d8; }
.site-mini-owed .site-ageing { flex: 1 1 100%; height: 14px; }
.site-mini-owed b { font-family: var(--mono); font-weight: 500; color: #fff; }
.site-mini-momo { align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--ground); border: 1px solid var(--line); }
.site-mini-momo i { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #facc15; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 11px; }
.site-mini-momo span { display: flex; flex-direction: column; color: var(--muted); }
.site-mini-momo b { color: var(--ink); }
.site-mini-sheet { flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-family: var(--mono); font-size: 12px; }
.site-mini-sheet span { display: grid; grid-template-columns: 1fr 64px 40px; padding: 7px 10px; border-top: 1px solid var(--hairline); }
.site-mini-sheet span:first-child { border-top: 0; background: var(--paid-soft); color: var(--paid); }
.site-mini-sheet i { font-style: normal; }
.site-mini-flow { flex-wrap: wrap; align-items: center; }
.site-mini-flow span { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.site-mini-flow { gap: 8px 30px; }
.site-mini-flow span { position: relative; }
.site-mini-flow span:not(:last-child)::after { content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.site-mini-flow .is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.site-mini-options { flex-direction: column; }
.site-mini-options span { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.site-mini-options .is-on { border: 2px solid var(--ink); padding: 9px 11px; }
.site-mini-options i { font-style: normal; }
.site-mini-options b { font-family: var(--mono); font-weight: 500; }
/* The industries: one trade at a time, with what changes for it and a worked example. */
.site-industry-tabs { align-self: flex-start; }
.site-industry { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 32px; align-items: center; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-xl); background: #fff; border: 1px solid var(--line); animation: fade-in 260ms var(--ease-out); }
.site-industry[hidden] { display: none; }
.site-industry-text { display: flex; flex-direction: column; gap: 16px; }
.site-industry h3 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.03em; }
.site-ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.site-ticks li { display: flex; gap: 10px; }
.site-ticks li::before { content: "✓"; flex: none; color: var(--paid); font-weight: 700; }
.site-industry-example { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px; background: var(--ground); }
.site-industry-example strong { font-size: 16px; }
.site-industry-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.site-industry-cells > span { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 13px; }
.site-industry-cells > span > span { color: var(--muted); }
.site-industry-cells b { font-family: var(--mono); font-weight: 500; font-size: 15px; }
.site-industry-cells .is-chosen { border: 2px solid var(--ink); padding: 11px; }
/* Two across on a phone: a last figure left alone takes the row, not half of it. */
@media (max-width: 480px) { .site-industry-cells > span:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; } }
.site-price { margin: 4px 0 2px !important; font-family: var(--mono); font-size: 30px !important; font-weight: 500; letter-spacing: 0; color: var(--ink) !important; line-height: 1.1 !important; }
.site-price.site-price-words { font-family: "Geist", system-ui, sans-serif; font-size: 22px !important; font-weight: 600; letter-spacing: -0.02em; }
.site-price span { font-family: "Geist", system-ui, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.site-proof { margin: 0; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-xl); background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.site-proof blockquote { margin: 0; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.25; letter-spacing: -0.03em; font-weight: 500; max-width: 900px; }
.site-proof figcaption { color: var(--muted); }
.site-proof figcaption strong { color: var(--ink); }
.site-proof-figures { margin: 6px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.site-proof-figures div { position: relative; padding-top: 14px; }
.site-proof-figures div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--megyefo); transform-origin: left; }
.site-proof-figures dt { font-family: var(--mono); font-size: 26px; font-weight: 500; }
.site-proof-figures dd { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.site-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 12px; align-items: start; }
.site-faq details { border-radius: var(--radius); background: #fff; border: 1px solid var(--line); padding: 0 22px; transition: border-color 0.15s; }
.site-faq details[open] { border-color: var(--line-strong); }
.site-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.site-faq summary::-webkit-details-marker { display: none; }
.site-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--ground); display: grid; place-items: center; font-size: 18px; font-weight: 500; transition: transform 0.2s; }
.site-faq details[open] summary::after { transform: rotate(45deg); }
.site-faq p { margin: 0 0 20px; color: var(--text-2); line-height: 1.65; }
.site-band { margin-top: clamp(56px, 8vw, 104px); background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.site-band > .site-section { padding-bottom: clamp(56px, 8vw, 104px); }
.site-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.site-steps li { border-radius: var(--radius-xl); background: #fff; border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.site-steps .site-mono { font-size: 13px; letter-spacing: 0.04em; text-transform: none; color: var(--muted); }
.site-steps li:last-child { background: var(--ink); border-color: var(--ink); color: #fff; }
.site-steps li:last-child p, .site-steps li:last-child .site-mono { color: #d4d4d8; }
.site-steps h3 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
.site-steps p { margin: 0; color: var(--muted); line-height: 1.6; }
.site-cta { margin: clamp(56px, 8vw, 104px) var(--bleed); border-radius: 28px; background: var(--ink); color: #fff; padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 64px); display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }
.site-cta .site-h2 { max-width: 640px; }
.site-cta .site-lead { color: #d4d4d8; }
.site-cta .site-row { justify-content: center; }
.site-cta .site-button-white { background: #fff; color: var(--ink); }
.site-cta .site-button-white:hover { background: #ececee; }
.site-button-dark { background: transparent; border-color: var(--ink-3); color: #fff; }
.site-button-dark:hover { border-color: #a1a1aa; }
.site-cta p { margin: 0; }
.site-footer { background: var(--ink); color: #a1a1aa; font-size: 14px; padding: 40px var(--bleed); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; }
.site-footer .site-logo { font-size: 20px; color: #fff; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer-links a:hover { color: #fff; }
.site-form-page > * { max-width: 720px; }
.site-form .site-button { align-self: flex-start; }
.site-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-md); }
.site-form .auth-form select { min-height: 46px; }
/* Starting a store: the form in two steps on the left, the store as it will look on the right. */
.site-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px clamp(32px, 5vw, 64px); align-items: start; }
.site-start-main { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.site-start-main .site-h2 { font-size: clamp(36px, 4.4vw, 52px); }
.site-start-progress { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; font-size: 13px; color: var(--muted); }
.site-start-progress li { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.site-start-progress li span { height: 4px; border-radius: 999px; background: var(--line-strong); transition: background-color 0.3s; }
.site-start-progress .is-done span { background: var(--ink); }
.site-start-progress [aria-current] { color: var(--ink); font-weight: 600; }
.site-start-step { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; animation: rise-in 240ms var(--ease-out); }
.site-start-step[hidden] { display: none; }
.site-start-step > legend { padding: 0; margin-bottom: 16px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
/* The web address: one field with the store domain joined on, and what the check said under it. */
.site-address { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.site-address:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }
.auth-form .site-address input { flex: 1; min-width: 0; border: 0 !important; border-radius: 0; box-shadow: none !important; font-family: var(--mono); }
.site-address > span { display: flex; align-items: center; padding: 0 14px; background: var(--ground); border-left: 1px solid var(--line); font-family: var(--mono); font-size: 14px; color: var(--text-2); }
.site-address-check { margin: -8px 0 0; min-height: 20px; font-size: 13px; color: var(--muted); }
.site-address-check.is-free { color: var(--paid); }
.site-address-check.is-free::before { content: "✓ "; font-weight: 700; }
.site-address-check.is-problem { color: var(--late); }
/* What they sell, as cards to tap. */
.site-choices { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px; }
.site-choices legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 500; }
.auth-form .site-choice { flex-direction: row; align-items: center; gap: 10px; min-height: 52px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.auth-form .site-choice:hover { border-color: var(--ink); }
.auth-form .site-choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.site-choice input { flex: none; margin: 0; }
/* The store, as it will look. */
.site-preview { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
.site-preview > .site-mono { font-size: 11px; color: var(--muted); }
.site-preview-window { border-radius: var(--radius-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; }
.site-preview-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f1f1ef; border-bottom: 1px solid var(--line); }
.site-window-dots { display: flex; gap: 6px; }
.site-window-dots span { width: 10px; height: 10px; border-radius: 999px; background: var(--line-strong); }
.site-preview-address { flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; padding: 0 10px; border-radius: 8px; background: #fff; font-family: var(--mono); font-size: 12px; color: var(--text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.site-preview-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.site-preview-head { display: flex; align-items: center; gap: 10px; }
.site-preview-head b { flex: 1; min-width: 0; font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.site-preview-mark { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--megyefo); color: #fff; display: grid; place-items: center; font-weight: 700; }
.site-preview-search { flex: none; width: 140px; height: 34px; display: flex; align-items: center; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.site-preview-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; border-radius: 16px; background: var(--ground); }
.site-preview-hero b { font-size: 26px; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.site-preview-button { height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 10px; background: var(--megyefo); color: #fff; font-size: 13px; font-weight: 600; }
.site-preview-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.site-preview-products span { display: flex; flex-direction: column; gap: 6px; }
.site-preview-products i { height: 8px; width: 70%; border-radius: 4px; background: var(--line); }
.site-preview-products i:first-child { height: 80px; width: auto; border-radius: 12px; background: #f1f1ef; }
.site-preview-products i:last-child { width: 40%; }
.site-preview .muted { margin: 0; font-size: 12px; }
@media (max-width: 820px) { .site-preview { position: static; } }
@media (max-width: 760px) {
    .site-nav { gap: 12px; }
    .site-actions { gap: 4px; }
    .site-actions .site-button, .site-menu summary { height: 44px; padding: 0 14px; font-size: 14px; }
    .site-cta { border-radius: 28px; }
}
/* On a narrow phone the menu button is its icon alone; "Menu" stays its name for screen readers. */
@media (max-width: 420px) {
    .site-menu summary { width: 44px; padding: 0; justify-content: center; }
    .site-menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 360px) {
    .site-nav { gap: 8px; }
    .site-logo { font-size: 19px; gap: 8px; }
    .site-actions .site-button { padding: 0 10px; font-size: 13px; }
}

/* ───────── A business's shop ───────── */
.shop { min-height: 100vh; display: flex; flex-direction: column; --bleed: max(var(--gutter), calc((100% - var(--shop-page)) / 2)); }
.shop-note { background: var(--ink); color: #d4d4d8; font-size: 13px; padding: 10px var(--bleed); }
.preview-bar { padding: 10px var(--bleed); background: var(--brand); color: var(--on-brand); font-size: 14px; font-weight: 500; text-align: center; }
.preview-bar a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.shop-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.shop-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 14px var(--bleed); }
.shop-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 21px; letter-spacing: -0.035em; }
.shop-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); font-size: 19px; }
.shop-logo { height: 52px; width: auto; max-width: 220px; object-fit: contain; border-radius: 8px; }
.shop-search { flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 6px 0 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); transition: border-color 0.15s, box-shadow 0.15s; }
.shop-search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }
.shop-search svg { flex: none; width: 18px; height: 18px; color: var(--muted-2); }
.shop-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 15px; box-shadow: none !important; }
/* Suggestions under the search box, as the shopper types. */
.shop-search { position: relative; }
.search-suggest { position: absolute; z-index: 45; left: -1px; right: -1px; top: calc(100% + 8px); padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-md); animation: rise-in 140ms var(--ease-out); }
.search-suggest ul { list-style: none; margin: 0; padding: 0; }
.search-suggest li a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 10px; }
.search-suggest li.is-active a, .search-suggest li a:hover { background: var(--ground); }
.search-suggest img, .search-suggest-photo { flex: none; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: #efefec; }
.search-suggest-title { flex: 1; min-width: 0; font-weight: 500; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.search-suggest-price { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; }
.search-suggest-kind { flex: none; min-width: 40px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.search-suggest-none { margin: 0; padding: 10px; color: var(--muted); font-size: 14px; }
.search-suggest-all { display: block; margin-top: 4px; padding: 12px 10px 8px; border-top: 1px solid var(--hairline); font-size: 14px; font-weight: 600; }
.shop-search button { height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; }
.shop-search button:hover { background: var(--ink-3); }
.shop-links { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.shop-account { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; transition: border-color 0.15s; }
.shop-account:hover { border-color: var(--ink); }
.shop-account svg { width: 18px; height: 18px; }
.shop-cart { height: 44px; padding: 0 8px 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; transition: background-color 0.15s; }
.shop-cart:hover { background: var(--ink-3); color: #fff; }
.shop-cart svg { width: 17px; height: 17px; }
.shop-cart-count { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-size: 12px; }
.shop-cart-count:empty { display: none; }
.shop-subbar { display: flex; align-items: center; gap: 8px; padding: 0 var(--bleed) 10px; }
.shop-categories { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; font-size: 14px; }
.shop-categories::-webkit-scrollbar { display: none; }
.shop-categories a { white-space: nowrap; padding: 8px 14px; border-radius: 999px; color: var(--muted); font-weight: 500; transition: background-color 0.15s, color 0.15s; }
.shop-categories a:hover { background: rgba(11, 11, 13, 0.05); color: var(--ink); }
/* The shopper's vehicle: a chip that opens the picker under it. In ink once one is chosen. */
.vehicle-pick { position: relative; flex: none; }
.vehicle-pick summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--brand-soft); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.vehicle-pick summary::-webkit-details-marker { display: none; }
.vehicle-pick summary svg { width: 17px; height: 17px; flex: none; }
.vehicle-pick:has(.vehicle-clear) summary { background: var(--ink); border-color: var(--ink); color: #fff; }
.vehicle-pick[open] summary { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
.vehicle-pick .vehicle-bar { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: min(360px, calc(100vw - 32px)); box-sizing: border-box; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-md); animation: rise-in 160ms var(--ease-out); }
.vehicle-pick .vehicle-bar label { flex-basis: 100%; }
.vehicle-pick .vehicle-bar select { flex: 1 1 100%; width: 100%; }
.vehicle-bar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; font-size: 14px; }
.vehicle-bar label { font-weight: 600; }
.vehicle-bar select { min-height: 40px; }
.vehicle-bar button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font-weight: 600; }
.vehicle-bar .vehicle-clear { background: none; color: var(--ink); text-decoration: underline; }
.shop-main { flex: 1; width: 100%; max-width: calc(var(--shop-page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.shop-section { margin: clamp(28px, 4vw, 48px) 0; display: flex; flex-direction: column; gap: 20px; }
.shop-section h1 { font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.05em; }
.shop-section h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.035em; margin: 0; }
/* The footer: a line of the store's colour over the ink, columns to get around by, then a quiet bottom line. */
.shop-footer { margin-top: clamp(48px, 7vw, 96px); background: var(--ink); color: #a1a1aa; border-top: 3px solid var(--brand); padding: clamp(40px, 5vw, 64px) var(--gutter) 24px; font-size: 14px; }
.shop-footer-top, .shop-footer-bottom { max-width: var(--shop-page); margin: 0 auto; }
.shop-footer-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-bottom: clamp(32px, 4vw, 48px); }
.shop-footer .shop-name { color: #fff; }
.shop-footer h2 { margin: 0 0 6px; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.shop-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.shop-footer a { transition: color 0.15s; }
.shop-footer a:hover { color: #fff; }
.shop-footer-col svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shop-footer-phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-family: var(--mono); }
.shop-footer-chat { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 16px 9px 13px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-weight: 600; transition: filter 0.15s; }
.shop-footer .shop-footer-chat:hover { color: var(--on-brand); filter: brightness(1.1); }
.shop-footer-bottom { border-top: 1px solid var(--ink-3); padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; font-size: 13px; }
.shop-footer-powered { color: var(--muted-2); }
@media (max-width: 760px) {
    .shop-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    .shop-footer-brand { grid-column: 1 / -1; }
    .shop-footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
    .shop-header { position: static; }
    .shop-bar { gap: 12px; }
    .shop-links { margin-left: auto; }
    .shop-search { order: 3; flex-basis: 100%; }
}
/* Phones: the shop's main places in a bar under the thumb, and Add to cart kept in reach. */
.shop-tabs { display: none; }
@media (max-width: 760px) {
    .shop { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
    .shop-footer { margin-bottom: calc(-68px - env(safe-area-inset-bottom)); padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
    .shop-links { display: none; }
    .shop-search { order: 2; flex-basis: auto; flex: 1 1 100%; }
    .shop-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--line); }
    .shop-tabs a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border-radius: 12px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
    .shop-tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; }
    .shop-tabs a[aria-current="page"] svg { stroke: var(--ink); }
    .shop-tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .shop-tab-icon { position: relative; display: grid; }
    .shop-tab-count { position: absolute; top: -5px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
}
.region-picker { display: flex; align-items: center; gap: 8px; }
.region-picker select { height: 36px; border-radius: 999px; border: 1px solid var(--ink-3); background: var(--ink-2); color: #fff; padding: 0 14px; }
.region-picker button { height: 36px; border-radius: 999px; border: 1px solid var(--ink-3); background: none; color: #fff; padding: 0 14px; transition: border-color 0.15s; }
.region-picker button:hover { border-color: #a1a1aa; }

/* The shop's home, quiet: the store's words large and one search, its departments as a numbered index,
   then the products; trade and the shop's facts each a line. Lines rather than boxes, and the store's
   colour only on what is live. A store's own photo fills the band behind its words, under a dark wash
   so white text reads on any photo. */
.shop-intro { margin: clamp(24px, 4vw, 48px) 0 clamp(24px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.shop-intro-photo { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(380px, 46vw, 560px); align-content: end; padding: clamp(24px, 5vw, 64px); border-radius: var(--radius-xl); background: var(--ink); color: #fff; }
.shop-intro-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 11, 13, 0.72), rgba(11, 11, 13, 0.2) 70%), linear-gradient(0deg, rgba(11, 11, 13, 0.6), transparent 60%); }
.shop-intro-copy { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.shop-intro-name { margin: 0 0 -8px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
.shop-intro-name::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--brand); }
.shop-intro h1 { margin: 0; max-width: 22ch; font-size: clamp(32px, 4.2vw, 56px); line-height: 1; letter-spacing: -0.045em; font-weight: 600; text-wrap: balance; }
.shop-search-large { flex: none; width: 100%; max-width: 720px; height: 60px; padding-left: 20px; border-color: var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 11, 13, 0.04), 0 12px 32px -12px rgba(11, 11, 13, 0.14); }
.shop-search-large input { font-size: 17px; }
.shop-search-large button { height: 46px; padding: 0 20px; border-radius: 12px; }
.shop-intro-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.vehicle-tag { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-deep); font-size: 14px; font-weight: 500; }
.vehicle-tag:hover { color: var(--ink); }
.shop-intro-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; color: var(--muted); }
.shop-intro-facts li + li::before { content: "\00b7"; margin: 0 10px; color: var(--muted-2); }
.shop-intro-cover { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.shop-intro-photo .shop-intro-name, .shop-intro-photo .shop-intro-facts { color: rgba(255, 255, 255, 0.85); }
.shop-intro-photo .shop-intro-facts li + li::before { color: rgba(255, 255, 255, 0.5); }
.shop-intro-photo h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
/* Here the page's own search and departments stand in for the header's, so nothing is said twice. */
.shop:has(.shop-intro) .shop-bar > .shop-search, .shop:has(.shop-intro) .shop-categories { display: none; }
.shop:has(.shop-intro) .shop-subbar:not(:has(.vehicle-pick)) { display: none; }
/* Without the search between them, the account and cart still keep to the right. */
.shop:has(.shop-intro) .shop-links { margin-left: auto; }
.shop-departments { margin: 0 0 clamp(16px, 3vw, 32px); }
.department-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); column-gap: 40px; border-top: 1px solid var(--line); }
.department-list li { border-bottom: 1px solid var(--line); }
.department { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 18px 2px; }
.department-number { font-family: var(--mono); font-size: 12px; color: var(--muted-2); }
.department-name { font-size: clamp(20px, 2vw, 24px); font-weight: 600; letter-spacing: -0.03em; transition: color 0.15s; }
.department-count { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.department-count::after { content: " \2192"; }
.department:hover .department-name { color: var(--brand-deep); }
/* A section's heading with its links on the same line. */
.shop-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.shop-section-links { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.shop-section-more { font-size: 15px; font-weight: 500; }
.shop-section-more:hover { color: var(--brand-deep); }
.shop-trade-line { margin: clamp(32px, 5vw, 64px) 0 0; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.shop-trade-line p { margin: 0; max-width: 48ch; font-size: clamp(18px, 2vw, 22px); line-height: 1.4; letter-spacing: -0.02em; font-weight: 500; }
.shop-trade-line p span { color: var(--muted); font-weight: 400; }
.shop-trade-link { font-size: 15px; font-weight: 600; color: var(--brand-deep); }
.shop-trade-link:hover { color: var(--ink); }
/* Why buy here, in a line: where the shop is, delivery, paying, returns. */
.trust-line { margin: clamp(32px, 5vw, 64px) 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.shop-trade-line + .trust-line { margin-top: 0; border-top: 0; }
.trust-line ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 32px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.trust-list svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trust-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.trust-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); line-height: 1.45; }
.trust-list svg { flex: none; margin-top: 1px; color: var(--muted); }
.trust-list strong { color: var(--ink); font-weight: 600; margin-right: 4px; }
.checkout-summary .trust-list { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.button-whatsapp { background: #25d366; color: #0b2e17; }
.button-whatsapp:hover { filter: brightness(0.95); color: #0b2e17; }
.shop-whatsapp { position: fixed; z-index: 38; right: max(16px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); height: 52px; padding: 0 18px 0 14px; border-radius: 999px; background: #25d366; color: #0b2e17; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; box-shadow: 0 14px 32px -10px rgba(11, 11, 13, 0.45); transition: transform 0.15s, filter 0.15s; }
.shop-whatsapp:hover { color: #0b2e17; filter: brightness(0.96); transform: translateY(-2px); }
.shop-whatsapp svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
    /* Phones: a round button, above the tab bar, and above Add to cart on a product page. */
    .shop-whatsapp { right: 12px; height: 48px; width: 48px; padding: 0; justify-content: center; }
    .shop-whatsapp span { display: none; }
    .shop .shop-whatsapp { bottom: calc(80px + env(safe-area-inset-bottom)); }
    .shop:has(.add-to-cart.is-pinned) .shop-whatsapp { bottom: calc(152px + env(safe-area-inset-bottom)); }
}

/* Shop: categories, product grid, product page */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.breadcrumb a:hover { color: var(--ink); }
.product-grid, .chip-list { list-style: none; margin: 0; padding: 0; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; }
/* A product is its photo, its name and its price: no box around it. */
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-tile { position: relative; }
.product-media { position: relative; display: block; overflow: hidden; border-radius: var(--radius); }
.product-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #efefec; transition: transform 0.4s ease; }
.product-card:hover .product-photo { transform: scale(1.03); }
.product-badges { position: absolute; left: 10px; top: 10px; right: 64px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.product-badges .price-note { box-shadow: 0 1px 3px rgba(11, 11, 13, 0.12); }
.product-part { font-family: var(--mono); font-size: 12px; color: var(--muted-2); }
.product-stock { display: inline-flex; align-items: center; gap: 6px; padding-top: 2px; font-size: 13px; font-weight: 500; }
.product-stock::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.stock-low { color: var(--wait); }
.stock-out { color: var(--muted); }
.quick-add { position: absolute; right: 10px; top: 10px; margin: 0; }
.quick-add button { width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 0; background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(11, 11, 13, 0.16); transition: background-color 0.15s, color 0.15s, transform 0.15s; }
.quick-add button span { display: none; }
.quick-add button:hover { background: var(--ink); color: #fff; }
.quick-add button:active { transform: scale(0.96); }
.quick-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* A product without a photo shows its initials in the store's colours, and its page gives the room to the details. */
span.product-photo-empty, .product-no-photo { display: grid; place-items: center; }
.product-initials { font-size: clamp(32px, 5vw, 48px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--brand-deep); opacity: 0.55; user-select: none; }
.product-card span.product-photo-empty { background-color: #f1f1ef; }
.product-card .product-initials { font-size: clamp(22px, 2.6vw, 30px); color: var(--muted-2); opacity: 0.6; }
.product-layout-bare .product-gallery { flex: 1 1 240px; max-width: 320px; }
@media (max-width: 900px) {
  .product-layout-bare .product-gallery { max-width: none; }
}
.product-info { padding: 12px 2px 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-title { font-weight: 600; line-height: 1.35; }
.product-subtitle { font-size: 14px; color: var(--muted); }
.product-price { margin-top: auto; padding-top: 4px; font-size: 16px; font-weight: 600; }
.pager { display: flex; gap: 16px; align-items: center; justify-content: center; font-weight: 500; }
.pager a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; }
.pager a:hover { border-color: var(--ink); }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 500; transition: border-color 0.15s; }
.chip:hover { border-color: var(--ink); }

/* A list: the heading with its count, the category's own parts as tabs, the vehicle bar, then the filters as
   one bar over the products. Each filter is a pill that opens a small menu; on a phone the menu is a panel
   from the bottom (below). A filter that is on shows dark. */
.list-page { gap: 18px; }
.list-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.list-head h1 { margin: 0; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 600; }
.list-count { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.list-page > .lead { margin: -8px 0 0; font-size: 16px; color: var(--muted); }
.list-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; font-size: 15px; }
.list-tabs > * { flex: none; margin-bottom: -1px; padding: 10px 0 12px; border-bottom: 2px solid transparent; color: var(--muted); white-space: nowrap; }
.list-tabs a:hover { color: var(--ink); }
.list-tabs [aria-current="page"] { border-bottom-color: var(--ink); color: var(--ink); font-weight: 600; }
.fits-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 16px; border-radius: 14px; background: var(--brand-soft); font-size: 15px; }
.fits-bar > svg { flex: none; width: 20px; height: 20px; color: var(--brand-deep); }
.fits-bar p { flex: 1 1 260px; margin: 0; }
.fits-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 500; }
.fits-switch .switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--line-strong); transition: background-color 0.15s; }
.fits-switch .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 13, 0.2); transition: transform 0.15s var(--ease-out); }
.fits-switch.is-on .switch { background: var(--brand); }
.fits-switch.is-on .switch::after { transform: translateX(16px); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.filter-bar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.filter-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; user-select: none; transition: border-color 0.15s, background-color 0.15s; }
.filter-pill:hover { border-color: var(--ink); }
.filter-pill.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }
.filter-check input { margin: 0; accent-color: var(--brand); }
.filter-n { font-variant-numeric: tabular-nums; }
.filter-chevron { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; transition: transform 0.15s var(--ease-out); }
.filter-menu { position: relative; }
.filter-menu > summary { list-style: none; }
.filter-menu > summary::-webkit-details-marker { display: none; }
.filter-menu[open] > summary .filter-chevron { transform: rotate(180deg); }
.filter-pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 240px; margin: 0; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 2px; }
.filter-pop legend { float: left; width: 100%; margin: 0 0 8px; padding: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.filter-pop input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); }
.filter-pop .button-small { align-self: flex-start; margin-top: 10px; }
.filter-clear { padding: 0 6px; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.filter-clear:hover { color: var(--ink); }
.list-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
.list-sort select { min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 12px; background-color: #fff; font-size: 14px; color: var(--ink); }
.list-sort-go { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; font-weight: 600; cursor: pointer; }
html.js .list-sort-go { display: none; }
.list-filter-check { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; cursor: pointer; }
.list-filter-n { margin-left: auto; padding-left: 16px; font-family: var(--mono); font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.list-filter-range { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.list-filter-range input { flex: 1 1 0; width: 100%; min-width: 0; }
@media (max-width: 760px) {
    /* Phones: the pills in one row that scrolls sideways, and each menu a panel from the bottom over the page. */
    .filter-bar-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--bleed)); padding: 0 var(--bleed); }
    .filter-pop { position: fixed; z-index: 60; top: auto; right: 0; bottom: 0; left: 0; min-width: 0; max-height: 72vh; overflow-y: auto; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); border: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(11, 11, 13, 0.2); }
    .filter-menu[open]::before { content: ""; position: fixed; z-index: 55; inset: 0; background: rgba(11, 11, 13, 0.38); }
    .filter-pop legend { font-size: 17px; color: var(--ink); }
    .filter-pop .button-small { align-self: stretch; min-height: 48px; }
    .list-sort { width: 100%; }
    .list-sort select { flex: 1; }
}
/* Phones: the products on the first screen. A slim header, the vehicle and categories as chips
   (the home's category tiles would only say them again), the welcome as a short band, the trade
   account on one line, and products two across with their add button on the photo. */
@media (max-width: 760px) {
    .shop-bar { padding-top: 10px; padding-bottom: 10px; }
    .shop-name { font-size: 18px; }
    .shop-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
    .shop-logo { height: 40px; max-width: 150px; }
    .shop-search { height: 46px; }
    .shop-search button { height: 36px; padding: 0 12px; }
    .shop-categories { gap: 8px; }
    .shop-categories a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); color: var(--ink); }
    .shop-intro { margin: 24px 0 20px; gap: 20px; }
    .shop-intro-photo { min-height: 420px; padding: 20px; }
    .shop-intro-copy { gap: 18px; }
    .shop-search-large { height: 54px; padding-left: 16px; }
    .shop-search-large button { display: none; }
    .shop-intro-facts li:not(:first-child) { display: none; }
    .department { padding: 16px 2px; }
    .shop-trade-line { padding: 20px 0; }
    .shop-section { margin: 20px 0; gap: 14px; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .product-photo { aspect-ratio: 1; }
    .product-info { padding: 10px 2px 0; }
    .product-title { font-size: 14px; }
    .product-price { font-size: 15px; }
    .product-badges { left: 8px; top: 8px; right: 58px; }
    .quick-add { top: 8px; right: 8px; }
}
.chip-on { border: 2px solid var(--brand); background: var(--brand-soft); font-weight: 600; }
.product-layout { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: flex-start; }
.product-gallery { flex: 999 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.product-hero-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-xl); border: 1px solid var(--line); background: #efefec; }
/* Product photos: swipe on phones (scroll snapping), arrows and thumbnails with a mouse. */
.gallery { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gallery-stage { position: relative; }
.gallery-track { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; border-radius: var(--radius-xl); border: 1px solid var(--line); background: #efefec; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.gallery-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.gallery-open { display: block; cursor: zoom-in; }
.gallery-track .product-hero-photo { display: block; border: 0; border-radius: 0; }
.gallery-count { position: absolute; right: 14px; bottom: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(11, 11, 13, 0.72); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); pointer-events: none; }
.gallery-arrow { display: none; position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--ink); box-shadow: var(--shadow-md); place-items: center; opacity: 0; transition: opacity 0.2s, transform 0.15s; }
.gallery-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gallery-prev { left: 14px; }
.gallery-next { right: 14px; }
html.js .gallery-arrow { display: grid; }
.gallery-stage:hover .gallery-arrow, .gallery-arrow:focus-visible { opacity: 1; }
.gallery-arrow:disabled { opacity: 0 !important; pointer-events: none; }
.gallery-arrow:active { transform: scale(0.94); }
@media (hover: none) { html.js .gallery-arrow { display: none; } }
.gallery-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 88px)); gap: 10px; }
.gallery-thumbs a { display: block; border-radius: 14px; overflow: hidden; border: 2px solid transparent; opacity: 0.65; transition: opacity 0.15s, border-color 0.15s; }
.gallery-thumbs a:hover { opacity: 1; }
.gallery-thumbs a[aria-current="true"] { border-color: var(--ink); opacity: 1; }
.gallery-thumbs img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #efefec; }
@media (max-width: 760px) {
    .gallery-track { border-radius: 22px; }
    /* Phones: dots instead of thumbnails; the photos swipe. */
    .gallery-thumbs { display: flex; justify-content: center; gap: 0; }
    /* Small to look at, a fingertip wide to tap. */
    .gallery-thumbs a { width: 44px; height: 44px; border: 0; border-radius: 0; background: none; opacity: 1; display: grid; place-items: center; overflow: visible; }
    .gallery-thumbs a::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--line-strong); transition: width 0.2s, background-color 0.2s; }
    .gallery-thumbs a[aria-current="true"] { width: 44px; }
    .gallery-thumbs a[aria-current="true"]::before { width: 22px; background: var(--ink); }
    .gallery-thumbs img { display: none; }
}

/* The full-screen view a tap on a photo opens (app.js). */
.photo-viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0b0d; color: #fff; overflow: hidden; }
.photo-viewer[open] { display: block; animation: jump-in 0.18s ease-out; }
.photo-viewer::backdrop { background: #0b0b0d; }
.viewer-track { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; }
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-track li { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; padding: 56px 16px; box-sizing: border-box; }
.viewer-track img { max-width: 100%; max-height: calc(100dvh - 112px); object-fit: contain; border-radius: 8px; }
.viewer-close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 26px; line-height: 1; }
.viewer-close:hover, .viewer-arrow:hover { background: rgba(255, 255, 255, 0.22); }
.viewer-arrow { position: absolute; z-index: 2; top: 50%; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 30px; line-height: 1; }
.viewer-prev { left: 16px; }
.viewer-next { right: 16px; }
.viewer-count { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); margin: 0; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 13px; font-variant-numeric: tabular-nums; }
.viewer-single .viewer-arrow, .viewer-single .viewer-count { display: none; }
@media (hover: none) { .viewer-arrow { display: none; } }
.product-details { flex: 1 1 380px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 140px; }
.product-details h1 { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 600; }
.product-details > .product-part { margin: 0 0 -8px; font-size: 13px; }
.product-buy-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.product-detail-price { margin: 0; font-family: inherit; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.product-buy-price .deposit-note, .product-buy-price .muted { margin: 0; font-size: 14px; color: var(--muted); }
.product-details > .product-stock { margin: -4px 0 0; font-size: 14px; }
.stock-ok { color: var(--paid); }
.option-picker { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.option-picker legend { font-weight: 600; margin-bottom: 8px; }
.product-description { white-space: pre-line; color: var(--text-2); line-height: 1.65; }
@media (max-width: 900px) { .product-details { position: static; } }

/* Prices and cart */
.was-price { color: var(--muted); font-size: 0.7em; font-weight: 500; margin-left: 8px; }
.price-note { display: inline-block; width: fit-content; padding: 2px 10px; border-radius: 999px; background: var(--paid-soft); color: var(--paid); font-size: 12px; font-weight: 600; }
.tier-table { border-collapse: collapse; font-size: 14px; }
.tier-table caption { text-align: left; font-weight: 600; margin-bottom: 6px; }
.tier-table th, .tier-table td { padding: 8px 18px 8px 0; text-align: left; border-top: 1px solid var(--hairline); }
.tier-table th { font-weight: 500; color: var(--muted); }
/* An online payment waiting for the shopper's approval: where it has got to, step by step. */
.momo-wait { display: flex; flex-direction: column; gap: 24px; }
.momo-wait h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 600; }
.momo-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.momo-step { display: flex; gap: 14px; padding-bottom: 18px; position: relative; }
.momo-step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--line); }
.momo-step.is-done:not(:last-child)::before { background: var(--paid); }
.momo-mark { flex: none; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; border: 2px solid var(--line-strong); background: #fff; }
.is-done .momo-mark { background: var(--paid); border-color: var(--paid); color: #fff; }
.is-done .momo-mark svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.is-now .momo-mark { border-color: var(--wait); color: var(--wait); }
.is-now .momo-mark .waiting-dot { margin: 0; }
.momo-text { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; }
.is-next .momo-text strong { color: var(--muted); }
.momo-help { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; background: #f4f4f2; font-size: 14px; }
.momo-help form { margin: 4px 0 0; }
/* The cart as a drawer over the page, after "Add to cart" (CartDrawer.tsx). */
@keyframes drawer-in { from { transform: translateX(100%); } }
.cart-drawer { position: fixed; inset: 0; z-index: 60; }
.cart-drawer-backdrop { position: absolute; inset: 0; background: rgba(17, 17, 19, 0.4); animation: fade-in 200ms var(--ease-out); }
.cart-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); display: flex; flex-direction: column; background: #fff; box-shadow: -24px 0 48px -24px rgba(17, 17, 19, 0.45); animation: drawer-in 280ms var(--ease-out); }
.cart-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--hairline); }
.cart-drawer-head h2 { margin: 0; font-size: 19px; }
.cart-drawer-count { font-family: var(--mono); font-weight: 500; color: var(--muted); }
.cart-drawer-close { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 20px; cursor: pointer; }
.cart-drawer-added { margin: 12px 18px 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--paid-soft); color: var(--paid); font-size: 14px; font-weight: 500; }
.cart-drawer-added svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cart-drawer-empty { margin: 24px 18px; }
.cart-drawer-lines { list-style: none; margin: 0; padding: 4px 18px; flex: 1; overflow-y: auto; }
.cart-drawer-lines li { display: flex; align-items: center; gap: 12px; padding: 12px 6px; margin: 0 -6px; border-bottom: 1px solid var(--hairline); border-radius: 12px; }
.cart-drawer-lines img, .cart-drawer-photo { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: #efefec; }
/* No photo: its initials on grey, as on the cart page. */
.cart-drawer-photo { display: grid; place-items: center; background: #f1f1ef; }
.cart-drawer-photo .product-initials { font-size: 16px; color: var(--muted-2); opacity: 0.7; }
.cart-drawer-line { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.cart-drawer-title { font-weight: 500; }
.cart-drawer-stepper { display: inline-flex; align-items: center; align-self: flex-start; height: 36px; margin-top: 2px; border: 1px solid var(--line-strong); border-radius: 10px; }
.cart-drawer-stepper button { width: 36px; height: 34px; border: 0; background: transparent; font-size: 17px; cursor: pointer; }
.cart-drawer-stepper button:disabled { opacity: 0.4; cursor: wait; }
.cart-drawer-stepper span { min-width: 26px; text-align: center; font-family: var(--mono); }
.cart-drawer-total { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }
.cart-drawer-foot { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); }
.cart-drawer-foot .muted { font-size: 13px; }
.cart-drawer-sum { display: flex; justify-content: space-between; font-size: 16px; }
.cart-drawer-extra { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-2); }
.cart-drawer-extra span:last-child { font-family: var(--mono); white-space: nowrap; }
.cart-drawer-sum strong { font-family: var(--mono); font-weight: 500; }
.cart-drawer-checkout { height: 52px; margin-top: 4px; font-size: 16px; }
.cart-drawer-link { align-self: center; padding: 8px; border: 0; background: none; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--ink); }
/* A list or cart with nothing in it: what that means, and the way on. */
.shop-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(32px, 6vw, 56px) 20px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); animation: rise-in 200ms var(--ease-out); }
.shop-empty .muted { margin: 0; max-width: 46ch; }
.shop-empty .button { margin-top: 6px; }
.shop-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--brand-soft); color: var(--ink); }
.shop-empty-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shop-empty-title { margin: 4px 0 0; font-size: 18px; font-weight: 600; }
/* Beside a product's price: how it reaches the shopper, and how they pay. */
.product-promise { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.product-promise li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.product-promise svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.add-to-cart { display: flex; align-items: stretch; gap: 10px; }
.add-to-cart input { width: 104px; min-height: 52px; font-size: 16px; }
.add-to-cart .button { flex: 1 1 200px; height: 52px; border: 0; cursor: pointer; font-size: 16px; }
/* The cart: the items on the left between hairlines, and a summary on the right that stays in view;
   on a phone, one column, with the total and Checkout in a bar at the bottom. */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 900px) {
    .cart-layout { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 40px; }
    .cart-summary { position: sticky; top: 140px; }
}
.cart-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cart-lines ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.cart-line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-photo { grid-row: 1 / 3; width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: #efefec; display: grid; place-items: center; }
.cart-photo.product-photo-empty { background: #f1f1ef; }
.cart-photo .product-initials { font-size: 18px; color: var(--muted-2); opacity: 0.7; }
.cart-line-info { grid-column: 2; grid-row: 1 / 3; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cart-quantity { grid-column: 3; grid-row: 1 / 3; display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; }
.cart-quantity button { width: 40px; height: 40px; border: 0; background: none; font-size: 18px; color: var(--muted); cursor: pointer; transition: color 0.15s; }
.cart-quantity button:hover { color: var(--ink); }
.cart-quantity span { min-width: 28px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.cart-line-total { grid-column: 4; grid-row: 1; align-self: end; text-align: right; font-size: 16px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-remove { padding: 4px 0; border: 0; background: none; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cart-remove:hover { color: var(--late); }
.cart-line .cart-remove { grid-column: 4; grid-row: 2; align-self: start; justify-self: end; }
.cart-summary { display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: #fff; }
.cart-summary h2 { margin: 0; font-size: 17px; letter-spacing: -0.02em; }
.cart-totals { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.cart-totals div { display: flex; justify-content: space-between; gap: 16px; }
.cart-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.cart-totals .cart-total { padding-top: 10px; border-top: 1px solid var(--line); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.cart-totals .muted { font-size: 14px; }
.cart-delivery { margin: 0; font-size: 13.5px; }
.cart-checkout { width: 100%; height: 52px; font-size: 16px; }
.cart-promo-toggle > summary { width: fit-content; font-size: 14px; font-weight: 500; cursor: pointer; }
.cart-promo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.cart-promo-toggle .cart-promo { margin-top: 10px; }
.cart-promo label { flex: 1 1 140px; display: flex; }
.cart-promo input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; font-size: 15px; text-transform: uppercase; }
.cart-promo .button-small { min-height: 44px; }
.cart-extra { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.cart-extra p { margin: 0; }
.cart-continue { width: fit-content; font-size: 14px; font-weight: 500; }
.cart-bar { display: none; }
@media (max-width: 760px) {
    .cart-line { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px 14px; }
    .cart-photo { width: 64px; height: 64px; }
    .cart-line-info { grid-row: 1; }
    .cart-quantity { grid-column: 2; grid-row: 2; justify-self: start; }
    .cart-line-total { grid-column: 3; align-self: start; }
    .cart-line .cart-remove { grid-column: 3; align-self: center; }
    .shop:has(.cart-bar) { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
    .shop:has(.cart-bar) .shop-whatsapp { bottom: calc(152px + env(safe-area-inset-bottom)); }
    .shop:has(.cart-bar) .shop-footer { margin-bottom: calc(-150px - env(safe-area-inset-bottom)); padding-bottom: calc(174px + env(safe-area-inset-bottom)); }
    html.js .cart-bar:not(.is-shown) { display: none; }
    .cart-bar { position: fixed; z-index: 39; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px -12px rgba(11, 11, 13, 0.35); font-size: 15px; }
    .cart-bar strong { font-size: 17px; font-variant-numeric: tabular-nums; }
    .cart-bar .button { height: 48px; padding: 0 22px; border-radius: 12px; }
}

@media (max-width: 760px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .product-title { font-size: 14px; }
    .product-subtitle { display: none; }
    .product-price { font-size: 15px; }
    .was-price { display: block; margin: 0; }
    /* The buy form sits in its place under the price; once that has scrolled up out of sight, it pins
       above the tabs (ProductPage's usePinnedPast), and its place keeps its height so nothing jumps. */
    .buy-spot { min-height: 48px; }
    .shop:has(.add-to-cart.is-pinned) { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
    .add-to-cart.is-pinned { position: fixed; z-index: 39; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px -12px rgba(11, 11, 13, 0.35); }
    .add-to-cart .button { height: 48px; flex: 1 1 auto; }
    .product-hero-photo.product-no-photo { aspect-ratio: 3 / 1; }
    .vehicle-bar { flex-wrap: nowrap; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
    .vehicle-bar label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .vehicle-bar select { flex: 1; min-width: 0; }
}

/* Checkout and orders */
.checkout-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.checkout-form { flex: 999 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.checkout-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; flex: 1 1 200px; }
.checkout-form > label { flex: none; }
/* Checkout, quiet: the steps numbered between hairlines, choices as cards with a dark edge on the one
   chosen, the address on a grey panel, and the order placed from the summary beside it. The header's
   search and categories step aside, so nothing leads away from paying. */
.shop:has(.checkout-page) .shop-bar > .shop-search, .shop:has(.checkout-page) .shop-subbar { display: none; }
.shop:has(.checkout-page) .shop-links { margin-left: auto; }
.checkout-page > h1 { font-size: clamp(30px, 3.2vw, 38px); letter-spacing: -0.04em; font-weight: 600; }
.checkout-form { counter-reset: step; }
.checkout-step { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; padding: 24px 0 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.checkout-form > .checkout-step:first-of-type { border-top: 0; padding-top: 0; }
.checkout-step legend { float: left; width: 100%; margin-bottom: 4px; padding: 0; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.checkout-step > legend::before { counter-increment: step; content: counter(step); flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 13px; }
.checkout-step:has(> .choice) { flex-direction: row; flex-wrap: wrap; }
.checkout-step:has(> .choice) > :not(.choice) { flex: 1 1 100%; }
.checkout-step:has(> .choice) > .choice { flex: 1 1 240px; }
.checkout-step > label, .checkout-step > .choice { flex: none; }
/* Hints under fields, and what's wrong, shown as soon as someone leaves a field they got wrong. */
.field-hint { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.field-error, .field-problem { display: none; font-size: 13px; font-weight: 500; color: #b91c1c; }
.field-problem { display: block; }
.checkout-form label:has(input:user-invalid) .field-error { display: block; }
.checkout-form label:has(input:user-invalid) .field-hint { display: none; }
.checkout-form input:user-invalid, .checkout-form label:has(.field-problem) input { border-color: #dc2626 !important; }
/* Green only for a required field the shopper has filled in; an empty optional one stays plain. */
.checkout-form input:required:user-valid:not([type=radio]):not([type=checkbox]):not(:placeholder-shown) { border-color: #16a34a; }
/* The address only matters for delivery. */
.checkout-address { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 14px; background: #f4f4f2; }
.checkout-address-title { margin: 4px 0 0; }
.checkout-address > label, .checkout-address > .auth-row, .checkout-address > details { flex: none; }
.checkout-step:has(input[data-kind="pickup"]:checked) .checkout-address { display: none; }
.checkout-someone summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-2); padding: 4px 0; }
.checkout-someone[open] summary { margin-bottom: 10px; }
.checkout-remember { font-size: 14px; color: var(--text-2); }
.checkout-slots { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.checkout-slots legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font-weight: 600; }
.checkout-slots label { flex: none !important; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 14px; cursor: pointer; font-size: 15px; transition: border-color 0.15s, background-color 0.15s; }
.checkout-slots label:hover { border-color: var(--ink); }
.checkout-slots label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.checkout-slots input { accent-color: var(--ink); }
.choice { flex-direction: row !important; align-items: center; gap: 12px !important; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color 0.15s; }
.choice:hover { border-color: var(--ink); }
.choice:has(input:checked) { border: 2px solid var(--ink); padding: 13px 15px; }
.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.choice-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.choice-price { font-weight: 600; }
.checkout-summary-submit { display: none; width: 100%; height: 54px; font-size: 16px; }
@media (min-width: 900px) {
    .checkout-summary-submit { display: inline-flex; }
    .checkout-form > .checkout-submit { display: none; }
}
.checkout-submit { border: 0; cursor: pointer; font-weight: 600; height: 56px; font-size: 16px; justify-content: center; }
.checkout-summary { flex: 1 1 340px; position: sticky; top: 140px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.checkout-summary h2 { margin: 0; font-size: 18px; }
.checkout-summary > ul:not(.trust-list), .order-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checkout-summary > ul:not(.trust-list) > li, .order-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hairline); font-size: 14px; }
/* An order: what is happening on the left, what was ordered in a card on the right. */
.order-page { gap: 16px; }
.order-page > .order-number { margin: 0; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.order-layout { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-start; }
.order-main { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.order-summary { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: #fff; }
.order-summary h2, .order-window h2 { margin: 0; font-size: 17px; letter-spacing: -0.02em; }
.order-summary p { margin: 0; font-size: 14px; }
.order-total { font-weight: 600; font-size: 18px; }
.order-to { color: var(--text-2); }
.order-links { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
/* In the summary card each link is a full-width button whose words may wrap, so a long one never spills out. */
.order-links .button { flex: 1 1 100%; height: auto; min-height: 44px; padding: 10px 16px; white-space: normal; text-align: center; line-height: 1.3; }
.order-confirmed { display: flex; flex-direction: column; gap: 14px; }
.order-confirmed p { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 600; }
.order-confirmed p.order-confirmed-more { font-size: 17px; line-height: 1.5; letter-spacing: 0; font-weight: 400; color: var(--text-2); overflow-wrap: anywhere; }
.order-tick { width: 48px; height: 48px; border-radius: 999px; background: var(--paid-soft); color: var(--paid); display: grid; place-items: center; }
.order-tick svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.order-window { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.order-window p { margin: 0; }
@media (max-width: 900px) { .checkout-summary { position: static; } }

/* Auto parts and heavy goods in the shop */
/* A product page's fit: one bar, green when it fits the shopper's vehicle and amber when it doesn't, with a way
   to change the vehicle; without one, the picker itself. The vehicles it fits fold away under it. */
.fit-check { display: flex; flex-direction: column; gap: 8px; }
.fit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px; border-radius: 14px; font-size: 15px; }
.fit-bar > svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fit-bar strong { flex: 1 1 auto; font-weight: 500; }
.fit-fits .fit-bar { background: var(--paid-soft); color: #14532d; }
.fit-doesnotfit .fit-bar { background: var(--wait-soft); color: #78350f; }
.fit-selectvehicle .fit-bar { background: var(--ground); }
.fit-change { font-size: 14px; }
.fit-change > summary { list-style: none; min-height: 32px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fit-change > summary::-webkit-details-marker { display: none; }
.fit-change[open] { flex-basis: 100%; }
.fit-change .fit-picker { margin-top: 6px; color: var(--ink); }
.fit-change .fit-picker label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fit-picker { display: flex; flex-direction: column; gap: 10px; }
.fit-selectvehicle .fit-picker { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.fit-picker label { font-size: 15px; font-weight: 600; }
.fit-picker-row { display: flex; gap: 8px; }
.fit-picker select { flex: 1; min-width: 0; min-height: 44px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; font-size: 15px; }
/* With the script, choosing a vehicle applies it at once (ShopFrame, ShopPages), so its button goes. */
html.js .picker-go { display: none; }
.fit-picker button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.fit-list { font-size: 14px; color: var(--muted); }
.fit-list summary { width: fit-content; cursor: pointer; }
.fit-list ul { margin: 6px 0 0; padding-left: 18px; }
.quantity-stepper { flex: none; display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; }
.quantity-stepper button { width: 44px; height: 52px; border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer; }
.quantity-stepper button:hover { color: var(--ink); }
.add-to-cart .quantity-stepper input { width: 44px; height: 52px; min-height: 0; padding: 0; border: 0; box-shadow: none; background: transparent; text-align: center; font-size: 16px; font-weight: 600; -moz-appearance: textfield; }
.quantity-stepper input::-webkit-inner-spin-button, .quantity-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
html:not(.js) .quantity-stepper button { display: none; }
html:not(.js) .add-to-cart .quantity-stepper input { width: 88px; }
.button-buy { background: var(--ink); color: #fff; }
.button-buy:hover { background: var(--ink-3); color: #fff; }
.add-to-cart .button-buy { flex: 1 1 auto; height: 54px; border-radius: 14px; }
.product-about { padding-top: 18px; border-top: 1px solid var(--line); }
.product-about h2 { margin: 0 0 8px; font-size: 15px; letter-spacing: -0.01em; }
/* No photo: a quiet grey square with its initials small, not a block of the store's colour. */
.product-hero-photo.product-no-photo { border: 0; background-color: #f1f1ef; }
.product-no-photo .product-initials { font-size: clamp(32px, 4vw, 48px); color: var(--muted-2); opacity: 0.5; }
@media (max-width: 760px) {
    /* Phones: a little shorter; pinned, the bar is a white card and the stepper sits in grey on it. */
    .add-to-cart.is-pinned .quantity-stepper { background: var(--ground); border: 0; border-radius: 12px; }
    .quantity-stepper button { width: 40px; height: 48px; }
    .add-to-cart .quantity-stepper input { width: 32px; height: 48px; }
    .add-to-cart .button-buy { height: 48px; border-radius: 12px; }
}
.fitment { padding: 12px 14px; border-radius: 12px; background: var(--ground); font-size: 14px; }
.fitment-fits { background: #dcfce7; color: #14532d; }
.fitment-doesnotfit { background: #fef2f2; color: #7f1d1d; }
.fitment details { margin-top: 6px; }
.fitment ul { margin: 6px 0 0; padding-left: 18px; }
.deposit-note { font-size: 14px; color: var(--muted); }
.bundle { margin-top: 20px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.bundle h2 { margin: 0 0 8px; font-size: 18px; }
.bundle ul, .deposit-lines { list-style: none; padding: 0; margin: 0 0 10px; }
.bundle li, .deposit-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--hairline); font-size: 14px; }
.complements { margin-top: 28px; }
.complement-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.complement-list li { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.trade-apply { max-width: 680px; margin-inline: auto; }
/* A shopper's account: a greeting with Sign out beside it, tabs to the company's pages, the orders in a table. */
.account-page { gap: 20px; }
.account-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.account-head h1 { margin: 0; font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -0.04em; font-weight: 600; }
.account-head p { margin: 6px 0 0; font-size: 15px; }
.account-head form { margin: 0; }
.account-orders { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.account-orders table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.account-orders th { padding: 12px 18px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.account-orders td { padding: 14px 18px; border-bottom: 1px solid var(--hairline); color: var(--text-2); }
.account-orders tr:last-child td { border-bottom: 0; }
.account-order { font-family: var(--mono); font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.account-order:hover { color: var(--brand-deep); }
/* The company's pages, in the account's frame: who orders on it, adding someone, and orders to approve. */
.account-section { display: flex; flex-direction: column; gap: 12px; }
.account-section h2 { margin: 0; font-size: 18px; letter-spacing: -0.02em; }
.account-section > p { margin: 0; }
.account-card { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.account-card .auth-form { max-width: 640px; }
.account-team { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.account-team li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 14px 18px; border-top: 1px solid var(--hairline); }
.account-team li:first-child { border-top: 0; }
.account-team-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.account-team-who .muted { font-size: 13.5px; }
.account-team-role { display: flex; gap: 12px; font-size: 14px; color: var(--text-2); }
.account-team-change { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.account-team-change select, .account-team-change input { min-height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; }
.account-team-change input { width: 110px; }
.account-team-remove { border: 0; background: none; padding: 0 4px; color: #b91c1c; font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.account-decide { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 4px 0 0; }
.account-decide label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; font-size: 14px; font-weight: 500; }
.account-decide input { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 12px; font: inherit; }
@media (max-width: 760px) {
    .account-card { padding: 18px; }
    .account-team-change { width: 100%; }
    .account-team-change select { flex: 1 1 140px; }
}
.quote-summary { padding-left: 20px; color: var(--muted); }
/* A page with a form, split in two: what it is for on the left, the form in a card on the right. It takes the
   page's width rather than the narrow card the page's own class gives it. */
.auth-card.form-page { max-width: 1160px; margin-inline: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 32px 72px; }
.form-page-about { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.form-page-about h1 { margin: 0; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 600; }
.form-page-about .lead, .form-page-about .muted { margin: 0; font-size: 16px; line-height: 1.55; }
.form-page-form { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: #fff; }
.form-page-form .auth-form > .button { width: 100%; height: 52px; margin-top: 4px; font-size: 16px; }
/* Not found: the message large, then where to go next as full-width rows. */
.not-found { max-width: 640px; gap: 16px; }
.not-found h1 { margin: 0; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 600; }
.not-found > .muted { margin: 0; font-size: 16px; line-height: 1.55; }
.link-rows { display: flex; flex-direction: column; margin-top: 8px; border-top: 1px solid var(--line); }
.link-rows a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 500; }
.link-rows a:hover { color: var(--brand-deep); }
.site-not-found { max-width: 640px; }
.site-not-found .link-rows { margin-top: 18px; }
.quote-table { margin: 12px 0 16px; }

/* ───────── Sign-in and account pages ───────── */
.auth { min-height: 100vh; display: grid; place-items: center; padding: clamp(24px, 6vw, 64px) var(--gutter); background: radial-gradient(1200px 600px at 50% -200px, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%), var(--ground); }
.auth-card { width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(24px, 5vw, 40px); display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-md); }
.auth-card h1 { font-size: clamp(26px, 3vw, 32px); line-height: 1.1; letter-spacing: -0.04em; }
.auth-card > p { margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; flex: 1; }
.auth-form .button { height: 50px; width: 100%; margin-top: 4px; }
.auth-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ───────── Back office and control plane ───────── */
.admin { min-height: 100vh; display: grid; grid-template-columns: 264px minmax(0, 1fr); background: var(--ground); }
kbd { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; padding: 2px 6px; border-radius: 6px; border: 1px solid currentColor; opacity: 0.7; white-space: nowrap; }
@media (max-width: 900px) {
    .admin { grid-template-columns: minmax(0, 1fr); }
}

/* Jump to: the Ctrl K box over the page */

@keyframes jump-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
.jump-results { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; }
.jump-results a { display: flex; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: 10px; }
.jump-results [aria-selected="true"] a, .jump-results a:hover { background: var(--ground); }
.jump-results [aria-selected="true"] a { box-shadow: inset 3px 0 0 var(--megyefo); }

/* The overview */

.button-compact { height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
.trend { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* Get your shop selling: the overview's list until the first real sale. */
.getting-started { border-color: var(--brand); box-shadow: inset 4px 0 0 var(--brand); }
.getting-started .muted { margin: 2px 0 0; font-size: 14px; }

/* Sales: where shoppers stop on the way to paying. */
.funnel { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.funnel li { display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr) 64px minmax(0, 170px); align-items: center; gap: 12px; font-size: 14px; }
@media (max-width: 640px) {
    .funnel li { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Back office: cards, tables, lists */
.admin-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; overflow-x: auto; }
.admin-card h2 { margin: 0 0 6px; font-size: 17px; letter-spacing: -0.02em; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.admin-table th { text-align: left; font-weight: 500; font-size: 12px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table td { padding: 13px 10px; border-top: 1px solid var(--hairline); vertical-align: middle; }
.admin-table tbody tr { transition: background-color 0.12s; }
.admin-table tbody tr:hover { background: #fafaf9; }
.admin-table th:first-child, .admin-table td:first-child { padding-left: 0; }
.admin-table th:last-child, .admin-table td:last-child { padding-right: 0; }
.admin-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 12px; background: rgba(11, 11, 13, 0.05); }
.admin-tabs a { padding: 6px 14px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--muted); transition: color 0.15s, background-color 0.15s; }
.admin-tabs a:hover { color: var(--ink); }
.admin-tabs a[aria-current="page"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(11, 11, 13, 0.12); }
.admin-inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.admin-inline-form input:not([type=checkbox]):not([type=radio]), .admin-inline-form select { min-height: 40px; font-size: 14px; }
.admin-inline-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.admin-total td { font-weight: 700; border-top: 2px solid var(--line); }
.admin-checks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.admin-checks legend { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.admin-check { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 400 !important; }
.admin-check input { min-height: 0; }

/* Store setup */
.setup { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 760px) { .setup { grid-template-columns: minmax(0, 1fr); } }

/* Pro-formas, invoices, statements: laid out for paper */
.paper-page { max-width: 900px; margin: 0 auto; padding: 32px var(--gutter) 56px; }
.paper-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-bottom: 16px; font-size: 14px; }
.paper-actions form { margin-left: auto; }
.paper-members { margin-bottom: 24px; }
.paper { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 4vw, 40px); font-size: 14px; line-height: 1.5; box-shadow: var(--shadow-md); }
.paper p { margin: 0; }
.paper-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 2px solid #111; }
.paper-logo { max-height: 48px; max-width: 180px; margin-bottom: 8px; }
.paper-from strong { font-size: 16px; }
.paper-title { text-align: right; }
.paper-title h1 { margin: 0; font-size: 24px; letter-spacing: 0.02em; text-transform: uppercase; }
.paper-title dl { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 10px 0 0; justify-content: end; }
.paper-title dt { color: #555; }
.paper-title dd { margin: 0; text-align: right; }
.paper-party { padding: 18px 0; border-bottom: 1px solid #ddd; }
.paper-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.paper-lines { width: 100%; border-collapse: collapse; margin: 18px 0; }
.paper-lines th { text-align: left; font-size: 12px; text-transform: uppercase; color: #555; border-bottom: 1px solid #111; padding: 6px 4px; }
.paper-lines td { padding: 8px 4px; border-bottom: 1px solid #eee; vertical-align: top; }
.paper-lines .num { text-align: right; white-space: nowrap; }
.paper-lines tfoot td { border-bottom: none; padding: 4px; }
.paper-lines .paper-total td { border-top: 2px solid #111; font-weight: 700; font-size: 16px; padding-top: 8px; }
.paper-pay { padding: 12px 0; }
.paper-pay h2 { font-size: 15px; margin: 0 0 6px; }
.paper-pay p + p { margin-top: 6px; }
.paper-instructions { white-space: pre-line; }
.paper-foot { margin-top: 20px; padding-top: 12px; border-top: 1px solid #ddd; font-size: 13px; }
.paper-subhead { font-size: 15px; margin: 24px 0 8px; }
.paper .paper-lines + .paper-lines { margin-top: 16px; }
/* On a phone the paper's tables fit its width: headings wrap, the amounts stay whole. */
@media (max-width: 600px) {
    .paper { padding: 18px; }
    .paper-lines th, .paper-lines th.num { white-space: normal; font-size: 10.5px; letter-spacing: 0; padding: 6px 3px; }
    .paper-lines td { padding: 8px 3px; }
}
/* On a phone a wide table (five columns or more: an invoice's lines, a statement's invoices) drops its second
   column, the SKU or the buyer's PO, in its rows only. Totals and the ageing table keep every figure. */
@media (max-width: 600px) {
    .paper-title { text-align: left; }
    .paper-title dl { justify-content: start; }
    .paper-lines:has(thead th:nth-child(5)):has(tbody td:nth-child(2)) thead th:nth-child(2),
    .paper-lines:has(thead th:nth-child(5)):has(tbody td:nth-child(2)) tbody td:nth-child(2) { display: none; }
}
@media print {
    body, .auth, .admin { background: #fff; }
    .paper-actions, .paper-members, .preview-bar, .shop-header, .shop-footer { display: none; }
    .paper-page { padding: 0; max-width: none; }
    .paper { border: none; border-radius: 0; padding: 0; box-shadow: none; }
}

/* Design partners, agreements, notices */
.partner-steps { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.partner-steps li { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff; }
.partner-steps li.done { background: var(--ink); color: #fff; border-color: var(--ink); }
.issue { padding: 14px 0; border-top: 1px solid var(--line); }
.agreement h2 { font-size: 17px; margin: 22px 0 6px; }
.agreement p { margin: 0; line-height: 1.6; max-width: 68ch; }
.legal { line-height: 1.7; }
.legal > * { max-width: 760px; }
.legal h2 { font-size: 20px; margin: 28px 0 8px; }
.legal ul { padding-left: 20px; }

/* Sales */

textarea.mono { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; }

/* ───────── Back office and control plane in the dark ─────────
   Follows the device's setting. Only pages with the back office frame change:
   shops and Megyefo's site stay light, and documents (.paper) stay paper-white. */
@media (prefers-color-scheme: dark) {
    :root:has(.admin) {
        color-scheme: dark;
        --ground: #0e0e10;
        --surface: #17171a;
        --raised: #1f1f23;
        --line: #2a2a2f;
        --line-strong: #3f3f46;
        --hairline: #232328;
        --text: #ececee;
        --text-2: #d4d4d8;
        --muted: #a1a1aa;
        --muted-2: #8b8b94;
        --brand-soft: #2b1608;
        --shadow-sm: none;
        --shadow-md: 0 16px 36px -18px rgba(0, 0, 0, 0.8);
        background: var(--ground);
        color: var(--text);
    }
    :root:has(.admin) ::selection { background: var(--megyefo); color: var(--ink); }

    .admin { color: var(--text); }

    /* Surfaces */
    .admin-card, .partner-steps li, .admin .choice, .admin .checkout-step {
        background: var(--surface);
    }
    .admin-table tbody tr:hover { background: var(--raised); }
    .admin-tabs { background: rgba(255, 255, 255, 0.06); }
    .admin-tabs a:hover { color: var(--text); }
    .admin-tabs a[aria-current="page"] { background: var(--raised); color: var(--text); box-shadow: none; }

    

    /* Fields */
    .admin input:not([type=checkbox]):not([type=radio]), .admin select, .admin textarea {
        background: #111114; color: var(--text); border-color: var(--line-strong);
    }
    .admin input:focus, .admin select:focus, .admin textarea:focus { border-color: #a1a1aa !important; }
    .admin input[type=checkbox], .admin input[type=radio] { accent-color: var(--megyefo); }

    /* Buttons: black on a black page would vanish, so the main button turns light. */
    .admin .button-ink, .admin .button-small, .admin .checkout-submit:not(.button-brand) { background: #f4f4f5; color: var(--ink); }
    .admin .button-ink:hover, .admin .button-small:hover { background: #d4d4d8; color: var(--ink); }
    .admin .button-outline, .admin .button-light { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
    .admin .button-outline:hover, .admin .button-light:hover { border-color: #a1a1aa; }
    .admin-link-button { color: #f87171; }
    .partner-steps li.done { background: #f4f4f5; border-color: #f4f4f5; color: var(--ink); }

    /* Badges and notices keep their meaning, in darker tints. */
    .admin .badge { background: var(--raised); color: var(--text-2); }
    .admin .price-note { background: #0f2e1a; color: #86efac; }
    .admin .admin-notice { background: #0f2e1a; border-color: #14532d; color: #bbf7d0; }
    .admin .auth-error { background: #3b1111; border-color: #7f1d1d; color: #fecaca; }
    .admin .fitment-fits { background: #0f2e1a; color: #86efac; }
    .admin .fitment-doesnotfit { background: #3b1111; color: #fca5a5; }
    .admin ::placeholder { color: #a1a1aa; }

    /* Jump to sits outside the frame, so it is styled here too. */
    
    .jump-results [aria-selected="true"] a, .jump-results a:hover { background: var(--raised); }
}

/* Between pages: a thin bar while the next one loads, and a short fade when it arrives. */

@keyframes loading-bar { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@keyframes page-arrive { from { opacity: 0.4; transform: translateY(4px); } }

/* On phones and touch screens every control is at least 44×44px, the size of a fingertip.
   Links inside a sentence are left as text; links that stand alone get the room. */
@media (max-width: 760px), (pointer: coarse) {
    .shop-footer-col { gap: 0; }
    .button-compact, .button-small, .site-button, .vehicle-bar button, .quick-add button { min-height: 44px; }
    .site-button-plain, .site-button-white { height: 44px; }
    .shop-search { height: 54px; }
    .shop-search button { height: 44px; }
    .shop-name, .site-logo { min-height: 44px; }
    .shop-categories a, .site-links a, .admin-tabs a { min-height: 44px; display: inline-flex; align-items: center; }
    .quick-add button { width: 44px; }
    .cart-quantity button { width: 44px; height: 44px; }
    .site-links a { min-width: 44px; justify-content: center; }
    summary { min-height: 44px; display: flex; align-items: center; }
    .admin-check, .checkout-remember { min-height: 44px; }
    select, .admin-inline-form input:not([type=checkbox]):not([type=radio]), .admin-inline-form select, .vehicle-bar select { min-height: 44px; }
    :is(section, aside, div, li, header, footer, nav, figure, td, .admin-card-head) > a.link,
    p > a.link:only-child, .shop-footer a, .site-footer-links a, td > a, .breadcrumb a, .cart-line-info > a,
    .admin-link-button { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}

/* Motion (Calm Ledger): only to say something happened: a page arriving, an action
   landing, something waiting. Short, easing out, opacity and transform only. Money never
   moves. The block below turns all of it off for people who ask their device for less motion. */
:root { --ease-out: cubic-bezier(0.2, 0, 0, 1); }

/* Shop and website pages are whole pages, and their forms plain posts: each new page fades in. */
@view-transition { navigation: auto; }
/* Opening a product grows its tile's photo into the page's; the header stays where it is. */
.shop-header { view-transition-name: shop-header; }
::view-transition-group(*) { animation-duration: 320ms; animation-timing-function: var(--ease-out); }
::view-transition-group(root) { animation-duration: 160ms; }

/* A copy of the photo on its way to the cart. */
.fly-to-cart { position: fixed; z-index: 90; margin: 0; border-radius: 12px; pointer-events: none; object-fit: cover; overflow: hidden; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
    /* Tiles rise in as they scroll into view, a beat apart across a row. Scroll-driven, so there is no script;
       a tile already on screen when the page opens is past its range and simply shows. */
    @supports (animation-timeline: view()) {
        .product-tile { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
        .product-grid > .product-tile:nth-child(4n + 2) { animation-range: entry 5% entry 45%; }
        .product-grid > .product-tile:nth-child(4n + 3) { animation-range: entry 10% entry 50%; }
        .product-grid > .product-tile:nth-child(4n + 4) { animation-range: entry 15% entry 55%; }
    }

    /* With a mouse, a tile's Add slides in when it is pointed at or reached by keyboard; on touch it stays in view. */
    @media (hover: hover) and (pointer: fine) {
        .quick-add button { opacity: 0; transform: translateY(6px); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), background-color 0.15s; }
        .product-tile:hover .quick-add button, .product-tile:focus-within .quick-add button { opacity: 1; transform: none; }
        .product-tile .quick-add button:active { transform: scale(0.96); }
    }

    /* The shop's home arrives in order: the store's words, then its search, then the notes under it, while
       its photo settles from slightly close. Short, so the heading is never long hidden. */
    .shop-intro-copy > * { animation: rise-in 560ms var(--ease-out) backwards; }
    .shop-intro-copy > :nth-child(2) { animation-delay: 90ms; }
    .shop-intro-copy > :nth-child(3) { animation-delay: 180ms; }
    .shop-intro-copy > :nth-child(4) { animation-delay: 270ms; }
    .shop-intro-photo::before { animation: fade-in 700ms var(--ease-out) both; }
    .shop-intro-cover { animation: settle-in 1600ms var(--ease-out) both; }
    .shop-search-large { transition: box-shadow 0.2s var(--ease-out), border-color 0.15s, transform 0.2s var(--ease-out); }
    .shop-search-large:focus-within { transform: translateY(-2px); }

    /* Further down, the departments, section heads and closing lines rise in as they scroll into view,
       the departments a beat apart, like the tiles. */
    @supports (animation-timeline: view()) {
        .department-list > li, .shop-section-head, .shop-trade-line, .trust-line { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
        .department-list > li:nth-child(2n) { animation-range: entry 6% entry 46%; }
    }
    .department-name, .department-number { transition: transform 0.25s var(--ease-out), color 0.15s; }
    .department:hover .department-name { transform: translateX(6px); }
    .department:hover .department-number { color: var(--brand); }
    .shop-section-more, .shop-trade-link { transition: transform 0.2s var(--ease-out); }
    .shop-section-more:hover, .shop-trade-link:hover { transform: translateX(4px); }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; animation-timing-function: var(--ease-out); }

@keyframes fade-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes settle-in { from { opacity: 0; transform: scale(1.08); } }
@keyframes slide-up { from { transform: translateY(calc(100% + 32px)); } }
@keyframes added-glow { 0%, 35% { background-color: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand); } }
@keyframes pop { 40% { transform: scale(1.3); } }
@keyframes waiting { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }

/* Photos arrive gently: a wash of the store's colour, then the photo fades in once it has
   loaded. Without the script they show as they come. */
.product-photo, .product-hero-photo { background-color: var(--brand-soft); }
html.js img.product-photo, html.js img.product-hero-photo { opacity: 0; transition: opacity 320ms var(--ease-out), transform 0.4s ease; }
html.js img.product-photo.is-loaded, html.js img.product-hero-photo.is-loaded { opacity: 1; }
/* An action landed: the line just added glows for a moment, and the cart count pops once. */
.cart-line-added { animation: added-glow 1.6s var(--ease-out); }
.shop:has(.cart-line-added) .shop-cart-count { animation: pop 420ms var(--ease-out) 200ms; }
/* What a post answered comes in, rather than appearing. */
.auth-error, .admin-notice { animation: rise-in 200ms var(--ease-out); }
/* Waiting on something outside the page (a MoMo approval): the one thing that repeats. */
.waiting-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 999px; background: currentColor; vertical-align: middle; animation: waiting 1.6s ease-in-out infinite; }
/* On a phone, the pinned buy bar arrives from below. */
@media (max-width: 760px) {
    .add-to-cart.is-pinned { animation: slide-up 360ms var(--ease-out) both; }
}
/* Megyefo's home page: each section comes in once as it scrolls into view (SiteApp's useReveal
   marks it is-in). Only with the script; without it, or with less motion asked for, all is shown. */
@keyframes settle-forward { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(-6px); } }
@keyframes ring-once { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--megyefo) 55%, transparent); } 70% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--megyefo) 0%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
html.js [data-reveal]:not(.is-in) > *, html.js [data-reveal="cta"]:not(.is-in) { opacity: 0; }
[data-reveal].is-in > * { animation: rise-in 520ms var(--ease-out) both; }
/* What the platform does, the tiles one after another, trade credit first. */
[data-reveal="cards"].is-in > :nth-child(2) { animation-delay: 70ms; } [data-reveal="cards"].is-in > :nth-child(3) { animation-delay: 140ms; }
[data-reveal="cards"].is-in > :nth-child(4) { animation-delay: 210ms; } [data-reveal="cards"].is-in > :nth-child(5) { animation-delay: 280ms; }
/* How it starts: the steps one after another, joined by a line drawn from the first to the last. */
[data-reveal="steps"].is-in > :nth-child(2) { animation-delay: 220ms; } [data-reveal="steps"].is-in > :nth-child(3) { animation-delay: 440ms; }
@media (min-width: 900px) {
    .site-steps { position: relative; isolation: isolate; }
    .site-steps::before { content: ""; position: absolute; z-index: -1; left: 28px; right: 28px; top: 50px; height: 2px; background: color-mix(in srgb, var(--megyefo) 45%, var(--line)); transform-origin: left; }
    html.js .site-steps:not(.is-in)::before { transform: scaleX(0); }
    .site-steps.is-in::before { animation: grow-x 900ms var(--ease-out) 120ms both; }
    /* Plans: together, then the one most choose settles slightly forward. */
    [data-reveal="plans"].is-in > .site-card-featured { animation: settle-forward 640ms var(--ease-out) 160ms both; box-shadow: var(--shadow-md); }
}
/* A store's own figures: each line draws across, then its figure comes in under it. */
html.js [data-reveal="figures"]:not(.is-in) > div::before { transform: scaleX(0); }
[data-reveal="figures"].is-in > div::before { animation: grow-x 560ms var(--ease-out) both; }
[data-reveal="figures"].is-in > div { animation-delay: 220ms; }
[data-reveal="figures"].is-in > div:nth-child(2)::before { animation-delay: 140ms; }
[data-reveal="figures"].is-in > div:nth-child(3)::before { animation-delay: 280ms; }
[data-reveal="figures"].is-in > :nth-child(2) { animation-delay: 360ms; } [data-reveal="figures"].is-in > :nth-child(3) { animation-delay: 500ms; }
/* The last word: the band rises in, and its main button calls once. */
[data-reveal="cta"].is-in { animation: fade-in 420ms var(--ease-out) both; }
[data-reveal="cta"].is-in > * { animation: rise-in 520ms var(--ease-out) 120ms both; }
[data-reveal="cta"].is-in > :nth-child(2) { animation-delay: 300ms; }
[data-reveal="cta"].is-in .site-button-white { animation: ring-once 1100ms var(--ease-out) 900ms both; }
/* Answers open smoothly. */
.site-faq details { interpolate-size: allow-keywords; }
.site-faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 280ms var(--ease-out), content-visibility 280ms allow-discrete; }
.site-faq details[open]::details-content { block-size: auto; }
.site-faq details[open] > p { animation: rise-in 260ms var(--ease-out) 40ms both; }
.site-faq summary::after { transition: transform 0.28s var(--ease-out), background-color 0.2s; }
.site-faq details[open] summary::after { background: var(--brand-soft); }

/* Megyefo's website: the tour's window comes in, then the shopper's phone in front of it, once. */
.site-tour-stage { animation: rise-in 560ms var(--ease-out) 150ms both; }
.site-tour-phone { animation: rise-in 520ms var(--ease-out) 700ms both; }
.site-ageing i { transform-origin: left; animation: grow-x 700ms var(--ease-out) 800ms both; }
@keyframes grow-x { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; }
    *, *::before, *::after { transition: none !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    html:has(.site) { scroll-behavior: auto; }
}

/* The storefront in motion. Every page arrives in order, things respond to the pointer with a small lift,
   and what scrolls into view rises in. All CSS, so the server's first HTML moves the same as React's;
   all inside no-preference, so less motion asked for means none of it. Entrances use backwards fill, so a
   finished animation never pins a transform that hover or focus wants. */
@keyframes shop-pop-in { from { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.08); } }
@keyframes shop-float-in { from { opacity: 0; transform: translateY(24px) scale(0.9); } }
@keyframes shop-header-lift { to { background: rgba(255, 255, 255, 0.78); box-shadow: 0 10px 30px -18px rgba(11, 11, 13, 0.35); border-bottom-color: transparent; } }
@keyframes shop-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shop-shine { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
@keyframes shop-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes shop-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--paid) 45%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
@keyframes shop-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (prefers-reduced-motion: no-preference) {
    /* The frame. The header lifts off the page once it scrolls, and on wide screens a thin line in the
       store's colour under it shows how far down the page is. */
    @supports (animation-timeline: scroll()) {
        .shop-header { animation: shop-header-lift linear both; animation-timeline: scroll(); animation-range: 0 140px; }
        @media (min-width: 761px) {
            .shop-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand); transform-origin: left; animation: shop-progress linear both; animation-timeline: scroll(root); pointer-events: none; }
        }
    }
    .shop-name { transition: transform 0.25s var(--ease-out), opacity 0.15s; }
    .shop-name:hover { transform: translateY(-1px); opacity: 0.85; }
    .shop-account, .shop-cart { transition: border-color 0.15s, background-color 0.15s, transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
    .shop-account:hover, .shop-cart:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(11, 11, 13, 0.45); }
    .shop-account:active, .shop-cart:active { transform: scale(0.95); }
    .shop-cart svg { transition: transform 0.3s var(--ease-out); }
    .shop-cart:hover svg { transform: rotate(-10deg) translateX(-1px); }
    .shop-categories a:active { transform: scale(0.96); }
    .shop-whatsapp { animation: shop-float-in 600ms var(--ease-out) 900ms backwards; transition: transform 0.2s var(--ease-out), filter 0.15s, box-shadow 0.2s; }
    .shop-whatsapp:hover { box-shadow: 0 12px 28px -12px rgba(37, 211, 102, 0.7); }

    /* Each page arrives: its first few blocks rise in a beat apart. The home's intro keeps its own order. */
    .shop-main > :not(.shop-intro):nth-child(-n + 5) { animation: rise-in 520ms var(--ease-out) backwards; }
    .shop-main > :nth-child(2) { animation-delay: 70ms; }
    .shop-main > :nth-child(3) { animation-delay: 140ms; }
    .shop-main > :nth-child(4) { animation-delay: 210ms; }
    .shop-main > :nth-child(5) { animation-delay: 280ms; }

    /* Buttons press and lift; the ones that buy catch a sweep of light when pointed at. */
    .button:not(:disabled):hover { transform: translateY(-1px); }
    .button:not(:disabled):active { transform: translateY(1px) scale(0.98); }
    .button-brand, .button-buy { position: relative; overflow: hidden; isolation: isolate; }
    .button-brand:hover, .button-buy:hover { box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--brand) 70%, rgba(11, 11, 13, 0.6)); }
    .button-brand::after, .button-buy::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); transform: translateX(-120%) skewX(-20deg); pointer-events: none; }
    .button-brand:hover::after, .button-buy:hover::after { animation: shop-shine 700ms var(--ease-out); }

    /* Product cards lift off the page, the photo leans in further, and the badges pop on. */
    .product-card { transition: transform 0.35s var(--ease-out); }
    .product-media { transition: box-shadow 0.35s var(--ease-out); }
    .product-card:hover { transform: translateY(-4px); }
    .product-card:hover .product-media { box-shadow: 0 18px 36px -20px rgba(11, 11, 13, 0.45); }
    .product-photo { transition: transform 0.7s var(--ease-out), opacity 320ms var(--ease-out); }
    .product-card:hover .product-photo { transform: scale(1.06); }
    .product-badges > * { animation: shop-pop-in 420ms var(--ease-out) 250ms backwards; }
    .product-badges > :nth-child(2) { animation-delay: 330ms; }
    .product-title { transition: color 0.15s; }
    .product-card:hover .product-title { color: var(--brand-deep); }

    /* Lists: tabs and filters answer, the open filter drops in, and the pager nudges. */
    .list-tabs > * { transition: color 0.15s, border-color 0.25s var(--ease-out); }
    .filter-chevron { transition: transform 0.25s var(--ease-out); }
    .filter-menu[open] > .filter-pop { animation: rise-in 180ms var(--ease-out); }
    .pager a { transition: border-color 0.15s, transform 0.2s var(--ease-out); }
    .pager a:hover { transform: translateY(-2px); }
    .breadcrumb a { transition: color 0.15s; }

    /* A product's page: the details beside the photos come in one after another; thumbnails lift. */
    .product-info > * { animation: rise-in 520ms var(--ease-out) backwards; }
    .product-info > :nth-child(2) { animation-delay: 60ms; }
    .product-info > :nth-child(3) { animation-delay: 120ms; }
    .product-info > :nth-child(4) { animation-delay: 180ms; }
    .product-info > :nth-child(5) { animation-delay: 240ms; }
    .product-info > :nth-child(n + 6) { animation-delay: 300ms; }
    .gallery-thumbs a { transition: opacity 0.15s, border-color 0.15s, transform 0.2s var(--ease-out); }
    .gallery-thumbs a:hover { transform: translateY(-2px); }
    .quantity-stepper { transition: border-color 0.15s, box-shadow 0.2s; }
    .quantity-stepper:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
    .quantity-stepper button { transition: color 0.15s, transform 0.12s; }
    .quantity-stepper button:active { transform: scale(0.85); }

    /* The cart: its lines come in one after another, in the drawer too. */
    .cart-lines li, .cart-drawer-lines > li { animation: rise-in 420ms var(--ease-out) backwards; }
    .cart-lines li:nth-child(2), .cart-drawer-lines > li:nth-child(2) { animation-delay: 60ms; }
    .cart-lines li:nth-child(3), .cart-drawer-lines > li:nth-child(3) { animation-delay: 120ms; }
    .cart-lines li:nth-child(n + 4), .cart-drawer-lines > li:nth-child(n + 4) { animation-delay: 180ms; }
    .cart-photo, .cart-drawer-photo { transition: transform 0.3s var(--ease-out); }
    .cart-lines li:hover .cart-photo, .cart-drawer-lines > li:hover .cart-drawer-photo { transform: scale(1.04); }

    /* Checkout: the steps come in order, the step being filled in lights its number, and a choice
       settles in when picked. */
    .checkout-step { animation: rise-in 480ms var(--ease-out) backwards; }
    .checkout-step:nth-of-type(2) { animation-delay: 80ms; }
    .checkout-step:nth-of-type(3) { animation-delay: 160ms; }
    .checkout-step:nth-of-type(n + 4) { animation-delay: 240ms; }
    .checkout-step > legend::before { transition: background-color 0.2s, color 0.2s, transform 0.3s var(--ease-out); }
    .checkout-step:focus-within > legend::before { background: var(--brand); color: var(--on-brand); transform: scale(1.12); }
    .choice { transition: border-color 0.15s, transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
    .choice:hover { transform: translateY(-1px); }
    .choice:has(input:checked) { box-shadow: 0 10px 24px -16px rgba(11, 11, 13, 0.5); animation: jump-in 220ms var(--ease-out); }

    /* An order confirmed: the tick pops, draws itself and rings once; the words follow it. */
    .order-tick { animation: shop-pop-in 520ms var(--ease-out) backwards, shop-ring 1100ms var(--ease-out) 450ms; }
    .order-tick path { stroke-dasharray: 24; animation: shop-draw 480ms var(--ease-out) 320ms backwards; }
    .order-confirmed > p { animation: rise-in 520ms var(--ease-out) 380ms backwards; }
    .order-confirmed > p + p { animation-delay: 480ms; }
    .order-window, .account-card { animation: rise-in 480ms var(--ease-out) backwards; }
    .account-card + .account-card { animation-delay: 90ms; }

    /* An empty page still feels alive: its icon bobs a few times, then rests. */
    .shop-empty-icon { animation: shop-bob 1.8s ease-in-out 400ms 3; }

    /* The footer's columns rise in as the page reaches them. */
    @supports (animation-timeline: view()) {
        .shop-footer-top > * { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    }
}