/* The shell (variant E of docs/prototype-2026-10-15.md): the tokens and type, buttons and fields, the account strip, the logo row with the search box and
   its dropdown, the cart, the black menu row, variant A's vehicle band, the footer, the 404 and the small parts every page shares
   (panels, chips, crumbs, section heads, the fitment verdict, stock and price). Ported from the prototype's proto-e.css.
   A page's own stylesheet never restyles a class here.

   Who: the person at a shop's parts counter who orders 40 lines a day. Density and speed over whitespace.
   Colour: orbitalparts.ca's tokens. Blue-black --ink for text and filled buttons, --cream and --sand for bands and hovers,
   --dove for every rule, --accent green only for fitment verdicts and the one main action per page. Red only for "Does not fit".
   Orange stays in the logo.
   Type: Figtree 14/20 for everything, Geist Mono for part numbers, money and order numbers (tabular figures).
   One bold place: the search box, the widest thing on the page, 2px warm black, 46px tall, with a "/" key badge.

   Header: strip 30 + logo row 92 + menu 38, then the kit's vehicle band (band.css: ink while it asks, fitment green once it knows).

   Layers (base.html declares `@layer base, kit, site;` first, ADR 0006): the tokens stay outside any layer, the reset is in `base`
   (under the storefront kit's parts pages, which sit in `kit`), and every rule after it is in `site`; the page stylesheets are in
   `site` too, after this one.
*/

:root {
  --ink: #0d1524;
  --ink-2: #1f2a3d;
  --cream: #eef1f5;
  --sand: #e6eaf0;
  --sand-2: #dce2ea;
  --dove: #dfe4eb;
  --steel: #545454;
  --fog: #858585;
  --accent: #1e9e5a;
  --accent-deep: #1a6e41;
  --accent-bg: #e7f1e9;
  --red: #b42318;
  --red-bg: #fbeceb;
  --parts-stock-wait: var(--red); /* the kit's dot of a part that is out of stock */
  --orange: #f06c05;                /* the logo's orange */
  --orange-deep: #d95f02;           /* it on hover */
  --parts-card-hover: var(--orange);  /* the line around a card under the pointer */
  --parts-cta: var(--orange);       /* the kit's Add to cart */
  --parts-cta-hover: var(--orange-deep);
  --parts-cta-ink: #fff;            /* white on the orange in either theme, as on a listing's Add */
  --parts-rail-bg: var(--white);    /* the filters' rail: a white panel lifted off the off-white page, once the kit draws it from these */
  --parts-rail-shadow: 0 1px 2px rgb(26 22 19 / .06), 0 4px 14px rgb(26 22 19 / .05);
  --parts-rail-pad: 14px 16px;
  --parts-radius-rail: 12px;
  --parts-rail-width: 240px;
  --parts-add: linear-gradient(180deg, #f8a825 0%, #e2820f 100%);  /* a listing's Add to cart */
  --parts-add-hover: linear-gradient(180deg, #ee9a17 0%, #d17509 100%);
  --parts-add-ink: #fff;
  --parts-band-edge: var(--parts-band-bg);          /* no pale line under the vehicle band, asking or set */
  --parts-band-set-edge: var(--parts-band-set-bg);
  --white: #fff;
  --page: #f4f6f9;                    /* behind everything: a faint cool tint, so the white panels and cards stand on it */
  --plate: #fff;                      /* behind a product photo or a brand logo: white in either theme, they are drawn for white */
  --on-accent: #fff;                  /* words on a green button */
  --accent-hover: var(--accent-deep); /* a green button on hover */
  --foot-ink: #d7dde6;                /* the footer's words */
  --warn-bg: #fdf6e8;
  --warn-line: #f0dfb8;
  --warn-ink: #6b4e12;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230d1524' stroke-width='1.5'/%3E%3C/svg%3E");  /* a select's arrow */
  --focus: var(--ink);                /* the focus ring is ink on every control, as the kit draws it (the green around a focused input looked wrong) */
  --sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --max: 1250px;                    /* every band of the page: the header, the vehicle band, the content, the footer */
  --parts-max: var(--max);          /* the kit's parts pages are as wide as the store's own */
  --parts-gut: var(--gut);          /* and keep the store's side padding */
  --gut: 16px;
  --r: 6px;
  --parts-radius: var(--r);
  --parts-font: var(--sans);        /* the kit's parts pages in the shell's face */
}

/* the kit's light palette is the shell's (its dark one is its own, tokens.css, which the dark block below matches) */
:root:not([data-parts-theme="dark"]) {
  --parts-ink: var(--ink);
  --parts-ink-2: var(--ink-2);
  --parts-cream: var(--cream);
  --parts-sand: var(--sand);
  --parts-sand-2: var(--sand-2);
  --parts-dove: var(--dove);
  --parts-bar-bg: #16202f;          /* the vehicle band, a shade over the menu row */
}

@media (min-width: 1025px) { :root { --gut: 24px; } }  /* desktop: 24px each side */

/* The dark theme (storefront-kit 0.10: Site(dark="night"), the kit's head block writes data-parts-theme="dark" on <html> from 21:30
   to 04:30 by the visitor's clock unless the shopper picked light): the kit's own dark palette (static/parts/tokens.css), which is
   this counter's palette flipped, so the shell and the kit's parts pages read as one. A warm near black page, near white words
   (steel and fog included, never grey), dark rules, the green kept with its words lifted, a filled button light with dark words.
   The menu row, the footer, the home's hero and the dealer pitch stay the dark bands they are by day: inside them the light
   values come back. Photos and brand logos keep their white plates (--plate), and the logo turns to its light-lettered copy. */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  --ink: #f6f3ef;
  --ink-2: #ddd7cf;
  --cream: #1c1a18;
  --sand: #2a2622;
  --sand-2: #36312c;
  --dove: #3d3833;
  --steel: #ebe6e0;
  --fog: #ebe6e0;
  --accent-deep: #7fe5a8;
  --accent-hover: #4fb37e;
  --accent-bg: #15291d;
  --red: #ff7b6e;
  --red-bg: #33140f;
  --white: #121110;
  --page: var(--white);
  --foot-ink: #ebe6e0;
  --warn-bg: #2d2412;
  --warn-line: #5c4a22;
  --warn-ink: #f8ead0;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f6f3ef' stroke-width='1.5'/%3E%3C/svg%3E");
}
:root[data-parts-theme="dark"] :is(.menubar, .foot, .hero, .apply-pitch, .apply-sent) {
  --ink: #1a1613;
  --ink-2: #332e29;
  --cream: #f9f8f6;
  --white: #fff;
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font: 400 14px/20px var(--sans);
    font-optical-sizing: auto;
    overflow-x: hidden;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  button, input, select, textarea { font: inherit; color: inherit; }
  h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.015em; }
  p { margin: 0; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  table { border-collapse: collapse; width: 100%; }
}

@layer site {
  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  .num { font-variant-numeric: tabular-nums; }
  [hidden] { display: none !important; }
  .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
  .muted { color: var(--fog); }

  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  .skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--white); padding: 8px 12px; border-radius: var(--r); }
  .skip:focus { top: 8px; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  }

  /* ---------- buttons and fields ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 34px; padding: 0 14px; border: 1px solid var(--ink); border-radius: var(--r);
    background: var(--ink); color: var(--white); font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background .12s;
  }
  .btn:hover { background: var(--ink-2); }
  .btn--go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .btn--go:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .btn--buy { background: var(--parts-cta); border-color: var(--parts-cta); color: var(--parts-cta-ink); }  /* the cart's Check out: the orange of Add to cart */
  .btn--buy:hover { background: var(--parts-cta-hover); border-color: var(--parts-cta-hover); }
  .btn--line { background: var(--white); color: var(--ink); border-color: var(--dove); }
  .btn--line:hover { background: var(--cream); border-color: var(--ink); }
  .btn--big { height: 44px; font-size: 15px; padding: 0 20px; }
  .btn--wide { width: 100%; }
  .btn[disabled] { opacity: .45; cursor: not-allowed; }

  .field { display: grid; gap: 4px; }
  .field > span { font-size: 12px; font-weight: 500; color: var(--steel); }
  .input, .select {
    height: 34px; padding: 0 10px; border: 1px solid var(--dove); border-radius: var(--r);
    background: var(--white); min-width: 0; width: 100%;
  }
  .input:hover, .select:hover { border-color: var(--fog); }
  .input:focus, .select:focus { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 0; }
  .select { appearance: none; padding-right: 28px; background: var(--white) var(--chevron) no-repeat right 10px center; }
  .select:disabled { color: var(--fog); background-color: var(--cream); }
  textarea.input { height: auto; padding: 8px 10px; }

  .qty { width: 52px; height: 32px; padding: 0 4px; text-align: center; border: 1px solid var(--dove); border-radius: var(--r); font-family: var(--mono); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
  .qty::-webkit-inner-spin-button, .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .qty:focus { border-color: var(--ink); }

  .stepper { display: inline-flex; border: 1px solid var(--dove); border-radius: var(--r); height: 40px; }
  .stepper button { width: 36px; border: 0; background: var(--cream); cursor: pointer; font-size: 18px; line-height: 1; }
  .stepper button:hover { background: var(--sand); }
  .stepper .qty { border: 0; border-radius: 0; height: 38px; width: 56px; border-left: 1px solid var(--dove); border-right: 1px solid var(--dove); }

  /* ---------- header: the strip ---------- */
  .strip { background: var(--cream); font-size: 12.5px; }
  .strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 30px; }
  .strip__who { display: flex; gap: 14px; align-items: center; min-width: 0; color: var(--steel); }
  .strip__who b { color: var(--ink); font-weight: 600; }
  .strip__who .mono { color: var(--ink); font-weight: 700; font-size: 12px; }
  .strip__shipto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .strip__links { display: flex; gap: 2px; align-items: center; flex-shrink: 0; }
  .strip__links a { text-decoration: none; padding: 5px 8px; font-weight: 500; border-radius: var(--r); }
  .strip__links a:hover { background: var(--sand); }

  /* ---------- header: logo + search ---------- */
  .masthead { background: var(--white); }  /* the strip above it keeps the page's off-white */
  .masthead .wrap { display: flex; align-items: center; gap: 32px; min-height: 92px; padding-top: 16px; padding-bottom: 16px; }
  @media (min-width: 801px) {  /* the search in the middle of the row, whatever the logo and the cart measure */
    .masthead .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
    .masthead .logo { grid-column: 1; }
    .masthead .search { grid-column: 2; justify-self: end; width: 100%; margin-right: -20px; }  /* beside the cart, not centred */
    .masthead .cartbtn { grid-column: 3; grid-row: 1; justify-self: end; margin-right: -8px; }  /* the icon, not its tap box, meets the row's edge */
    .masthead .parts-theme-switch { grid-column: 3; grid-row: 1; justify-self: end; margin: 0 56px 0 0; }
  }
  .logo { flex-shrink: 0; display: block; width: 250px; line-height: 0; color: var(--ink); }
  .logo svg, .foot__logo svg { display: block; width: 100%; height: auto; }

  .search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 550px; }
  .search__form { display: flex; height: 46px; border: 2px solid var(--ink); border-radius: 6px; background: var(--white); }
  .search__form:focus-within { box-shadow: 0 0 0 1px var(--ink); }
  .search__icon { width: 40px; flex-shrink: 0; display: grid; place-items: center; color: var(--steel); }
  .search__input {
    flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 4px; font-size: 15px; outline: none;
  }
  .search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .search__input::placeholder { color: var(--fog); font-family: var(--mono); font-size: 13.5px; letter-spacing: -.01em; }
  :root[data-parts-theme="dark"] .search__input::placeholder { color: #8f877e; }  /* a hint, set apart from typed words as by day */
  .search__key { align-self: center; margin-right: 8px; font: 500 11px/1 var(--mono); color: var(--fog); border: 1px solid var(--dove); border-radius: 3px; padding: 3px 6px; }
  .search__go { border: 0; background: var(--ink); color: var(--white); padding: 0 20px; font-weight: 600; cursor: pointer; border-radius: 0 3px 3px 0; }
  .search__go:hover { background: var(--ink-2); }
  .search__go:focus-visible { outline-offset: -4px; outline-color: var(--white); }

  /* the suggest dropdown: a part-number-first table */
  .suggest {
    position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
    background: var(--white); border: 1px solid var(--ink); border-radius: 6px; box-shadow: 0 12px 32px rgba(26, 22, 19, .18);
    max-height: min(70vh, 560px); overflow: auto;
  }
  .suggest[hidden] { display: none; }
  .suggest__head { display: grid; grid-template-columns: 40px 140px minmax(0, 1fr) 104px 84px; gap: 10px; padding: 6px 12px; font-size: 11.5px; color: var(--fog); border-bottom: 1px solid var(--dove); background: var(--cream); }
  .suggest__row {
    display: grid; grid-template-columns: 40px 140px minmax(0, 1fr) 104px 84px; gap: 10px; align-items: center;
    padding: 6px 12px; text-decoration: none; border-bottom: 1px solid var(--cream);
  }
  .suggest__row img { width: 40px; height: 32px; object-fit: contain; background: var(--plate); }
  .suggest__row .mono { font-weight: 700; font-size: 13px; }
  .suggest__row mark { background: var(--sand-2); color: inherit; border-radius: 2px; }
  .suggest__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .suggest__title small { display: block; color: var(--fog); font-size: 12px; }
  .suggest__price { text-align: right; font-weight: 600; }
  .suggest__price small { display: block; font-weight: 400; color: var(--fog); font-size: 11.5px; }
  .suggest__stock { font-size: 12px; }
  .suggest__row[aria-selected="true"], .suggest__row:hover { background: var(--sand); }
  .suggest__cat { display: flex; justify-content: space-between; padding: 8px 12px; text-decoration: none; border-top: 1px solid var(--dove); }
  .suggest__cat[aria-selected="true"], .suggest__cat:hover { background: var(--sand); }
  .suggest__all { display: block; padding: 9px 12px; font-weight: 600; text-decoration: none; border-top: 1px solid var(--dove); background: var(--cream); }
  .suggest__all[aria-selected="true"], .suggest__all:hover { background: var(--sand); }
  .suggest__empty { padding: 12px; color: var(--steel); }

  /* the cart: the icon alone, its count a badge on it; a dealer's total beside it */
  .cartbtn { position: relative; flex-shrink: 0; display: flex; align-items: center; min-width: 46px; height: 46px; justify-content: center; border-radius: 6px; text-decoration: none; color: var(--ink); }
  .cartbtn:hover, .cartbtn:focus-visible { background: #1a1613; color: #fff; }  /* reversed: the menu row's black under a white cart, in either theme */
  .cartbtn__icon { display: block; line-height: 0; }
  /* the kit's theme switch (parts/theme_switch.html, 40px, shown from 21:30 to 04:30 only) between the search box and the cart, closer to the cart */
  .masthead .parts-theme-switch { margin: 0 -22px 0 -16px; color: var(--ink); }
  .cartbtn__count { position: absolute; top: 2px; left: 26px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--orange); color: #fff; font: 700 11px/18px var(--mono); text-align: center; }
  .cartbtn__text { display: grid; line-height: 16px; }
  .cartbtn__text small, .cartbtn__word { display: none; }  /* the word Cart is the link's spoken label alone */
  .cartbtn__text b[data-cart-total] { margin: 0 8px 0 16px; }
  .cartbtn__text b { font-family: var(--mono); font-size: 13px; }

  .burger { display: none; width: 40px; height: 40px; border: 1px solid var(--dove); border-radius: var(--r); background: var(--white); cursor: pointer; flex-shrink: 0; }
  .burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; background: var(--ink); margin: 0 auto; position: relative; }
  .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
  .burger span::before { top: -6px; }
  .burger span::after { top: 6px; }

  /* ---------- header: menu bar ---------- */
  .menubar { background: var(--ink); color: var(--cream); }
  .menubar .wrap { display: flex; align-items: stretch; justify-content: space-between; min-height: 42px; }
  .menubar ul { display: flex; align-items: stretch; }
  .menubar a { display: flex; align-items: center; padding: 0 12px; text-decoration: none; font-weight: 500; font-size: 13.5px; height: 100%; }
  .menubar a:hover { background: var(--ink-2); }
  .menubar a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }
  .menubar__right a { color: var(--white); }
  .menubar a:focus-visible { outline-color: var(--cream); outline-offset: -3px; }
  /* the one button of the row, Want a website?: an outlined pill at the right end, after a dealer's tools */
  .menubar__right { margin-left: auto; }
  .menubar .menubar__cta { align-self: center; height: 26px; margin-left: auto; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--r); color: var(--white); }
  .menubar__right + .menubar__cta { margin-left: 12px; }
  .menubar .menubar__cta:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
  .menubar .menubar__cta[aria-current="page"] { box-shadow: none; background: var(--white); border-color: var(--white); color: var(--ink); }
  .strip__links a[aria-current="page"] { background: var(--sand); }
  .cartbtn[aria-current="page"] { background: var(--sand); }

  /* ---------- main ---------- */
  /* the kit's parts pages are their own <main class="parts"> with the kit layer's gutters; this layer outranks it, so their
     padding is left to them (the product page sat edge to edge on a phone with the side padding zeroed here) */
  main { display: block; min-height: 50vh; }
  main:not(.parts) { padding: 16px 0 48px; }
  .crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--steel); margin-bottom: 10px; }
  .crumbs a { text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }
  .crumbs span[aria-hidden] { color: var(--dove); }
  .pagehead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
  .pagehead h1 { font-size: 22px; line-height: 28px; }
  .pagehead p { color: var(--steel); }
  .h2 { font-size: 16px; line-height: 22px; margin-bottom: 8px; }
  .panel { border: 1px solid var(--dove); border-radius: 6px; background: var(--white); }
  .panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--dove); }
  .panel__head h2 { font-size: 15px; }
  .panel__head a { font-size: 13px; color: var(--steel); }
  .panel__body { padding: 12px 14px; }
  .note { padding: 10px 12px; border-radius: var(--r); background: var(--cream); border: 1px solid var(--dove); color: var(--steel); font-size: 13px; }
  .note--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
  .linkish { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--dove); text-underline-offset: 3px; }
  .linkish:hover { text-decoration-color: var(--ink); }

  /* ---------- verdicts, stock, price ---------- */
  .fit { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; line-height: 18px; }
  .fit svg { flex-shrink: 0; }
  .fit--fits { color: var(--accent-deep); }
  .fit--fits svg { color: var(--accent); }
  .fit--universal { color: var(--steel); }
  .fit--unknown { color: var(--fog); font-weight: 400; }
  .fit--no { color: var(--red); font-weight: 400; }

  .stock { display: grid; gap: 1px; font-size: 12px; line-height: 17px; }
  .stock b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
  .stock b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .stock--out b::before { background: var(--fog); }
  .stock span { color: var(--steel); }

  .price { text-align: right; display: grid; gap: 1px; }
  .price b { font: 700 15.5px/20px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .price small { font-size: 11.5px; color: var(--fog); line-height: 15px; white-space: nowrap; }
  .price small .mono { font-size: 11.5px; }

  /* ---------- chips and section heads ---------- */
  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--sand); font-size: 12.5px; text-decoration: none; }
  .chip:hover { background: var(--sand-2); }
  .chip b { font-weight: 400; color: var(--steel); }
  .section { margin-bottom: 28px; }
  .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  .section__head h2 { font-size: 16px; }
  .section__head a { font-size: 13px; color: var(--steel); }

  /* ---------- footer ---------- */
  .foot { background: var(--ink); color: var(--foot-ink); font-size: 13px; padding: 28px 0 40px; }
  .foot .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; }
  .is-visitor .foot .wrap { grid-template-columns: 1.4fr 1fr 1fr; }
  .foot h2 { font-size: 13px; color: var(--cream); margin-bottom: 8px; }
  .foot ul { display: grid; gap: 4px; }
  .foot a { text-decoration: none; }
  .foot a:hover { color: var(--white); text-decoration: underline; }
  .foot__logo { display: block; width: 150px; margin-bottom: 10px; color: var(--cream); }
  .foot p { max-width: 36ch; }
  .foot a:focus-visible { outline-color: var(--cream); }

  /* ---------- 404 ---------- */
  .lost { max-width: 720px; display: grid; gap: 14px; padding: 20px 0; }
  .lost h1 { font-size: 26px; }
  .lost p { color: var(--steel); }
  .lost__search { display: flex; gap: 8px; width: min(100%, 520px); }
  .lost__search .input { height: 40px; font-family: var(--mono); }
  .lost__search .btn { height: 40px; }

  /* ====================================================== the phone rules */
  @media (max-width: 1024px) {
    .menubar__right { display: none; }
  }

  @media (max-width: 900px) {
    .strip__shipto { display: none; }
  }

  @media (max-width: 800px) {
    .burger { display: block; }
    .masthead .wrap { flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; min-height: 0; }
    .logo { width: 168px; }
    .logo { margin-right: auto; }
    .search { order: 5; flex-basis: 100%; max-width: none; }
    .search__key { display: none; }
    .cartbtn { height: 40px; min-width: 40px; }
    .masthead .parts-theme-switch { margin: 0; }
    .menubar { display: none; }
    .menubar.is-open { display: block; }
    .menubar .wrap { flex-direction: column; padding-top: 6px; padding-bottom: 10px; }
    .menubar ul { flex-direction: column; }
    .menubar a { padding: 10px 0; }
    .menubar__right { display: block; border-top: 1px solid var(--ink-2); margin-top: 6px; }
    .menubar a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
    .menubar .menubar__cta, .menubar__right + .menubar__cta { align-self: flex-start; height: 40px; margin: 8px 0 0; padding: 0 14px; }
    .foot .wrap, .is-visitor .foot .wrap { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 760px) {
    .panel__head { flex-wrap: wrap; }
    .suggest__head { display: none; }
    .suggest__row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "img num price" "img title stock"; row-gap: 0; }
    .suggest__row img { grid-area: img; }
    .suggest__row .mono { grid-area: num; }
    .suggest__title { grid-area: title; }
    .suggest__title small { display: none; }
    .suggest__price { grid-area: price; }
    .suggest__price small { display: none; }
    .suggest__stock { grid-area: stock; text-align: right; }
  }

  @media (max-width: 480px) {
    .logo { width: 150px; }
    .strip__who .strip__co { display: none; }
    /* a visitor's strip holds its sentence, Account and Dealer sign in from 360 wide: 13px type, 40px tall links */
    .strip { font-size: 13px; }
    .strip .wrap { gap: 10px; }
    .strip__msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .strip__links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; }
    .strip__links a.hide-s { display: none; }
    .pagehead h1 { font-size: 19px; line-height: 24px; }
    .foot .wrap, .is-visitor .foot .wrap { grid-template-columns: 1fr; }
  }

  /* ---------- the tables the home's account summary, the account pages and the product page share ---------- */
  .otable { font-size: 13px; }
  .otable th { text-align: left; font-size: 11.5px; font-weight: 500; color: var(--steel); padding: 6px 14px; background: var(--cream); border-bottom: 1px solid var(--dove); }
  .otable td { padding: 7px 14px; border-bottom: 1px solid var(--cream); vertical-align: top; overflow-wrap: anywhere; }
  .otable tr:last-child td { border-bottom: 0; }
  .otable .r { text-align: right; white-space: nowrap; }
  .otable a { font-family: var(--mono); font-weight: 600; text-decoration: none; white-space: nowrap; }
  .otable a:hover { text-decoration: underline; }
  .otable .otable__track { font-weight: 500; font-size: 12px; color: var(--steel); }
  /* the summary beside the home's pad, a 360px column: words and the status line wrap whole, the PO keeps one line and ends in an
     ellipsis past 9em, the total never wraps (it is .r), so the table is never wider than the panel */
  .otable--summary th, .otable--summary td { padding-left: 10px; padding-right: 10px; }
  .otable--summary th:first-child, .otable--summary td:first-child { padding-left: 14px; }
  .otable--summary th:last-child, .otable--summary td:last-child { padding-right: 14px; }
  .otable--summary td { overflow-wrap: normal; }
  .otable--summary .status { white-space: normal; }
  .otable__po { display: block; max-width: 9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the account pages' tables: --orders (the orders, the invoices, the open invoices), --lines (an order's and an invoice's lines,
     whose part number keeps one line) and --statement (the last statement, its closing row ruled); a .hide-s column drops under 760px */
  .otable__part { white-space: nowrap; font-weight: 600; }
  .otable--statement .otable__total td { font-weight: 700; border-top: 1px solid var(--dove); }
  @media (max-width: 760px) {
    .otable th, .otable td { padding-left: 10px; padding-right: 10px; }
    .otable--orders .hide-s, .otable--lines .hide-s, .otable--statement .hide-s { display: none; }
  }
  @media (max-width: 480px) {
    :is(.otable--orders, .otable--lines, .otable--statement) :is(th, td) { padding-left: 8px; padding-right: 8px; }
  }
  .status { font-size: 12px; white-space: nowrap; }
  .status--open { color: var(--accent-deep); font-weight: 600; }
  .status--late { color: var(--red); font-weight: 600; }
  .acct__links { display: flex; gap: 6px 14px; padding: 10px 14px; border-top: 1px solid var(--dove); font-size: 13px; flex-wrap: wrap; align-items: baseline; }
  .kv { font-size: 13px; border-top: 1px solid var(--dove); }
  .kv th, .kv td { text-align: left; padding: 6px 0; border-bottom: 1px solid var(--dove); vertical-align: top; }
  .kv th { width: 38%; font-weight: 500; color: var(--steel); padding-right: 12px; }
  .kv--panel { border-top: 0; }
  .kv.kv--panel th { padding-left: 14px; }
  .kv.kv--panel td { padding-right: 14px; overflow-wrap: anywhere; }
  .kv.kv--panel tr:last-child th, .kv.kv--panel tr:last-child td { border-bottom: 0; }
}