/* The parts pages (the listings, the search and the Make Page): the counter's look,
   ported from store.orbitalparts.ca's catalog.css and the shared parts of its site.css (ADR 0007), onto
   the class names of docs/counter-contract.md. Every colour, font and radius is a --parts-* token
   (tokens.css: a default each, a site's :root overrides); nothing here names a site's class.

   Listing: a rail (200px) and a ledger of rows, one part per row, under a column head:
   | img | PART #     | Description                   | Availability | Your price    | Qty | Add |
   | [ ] | HB453B.585 | Front HPS 5.0 Disc Brake Pad  | * 5 in stock |   $153.75     | [1] |[Add]|
   |     | Hawk Perf. | (ok) Fits your 2018 Ford F-150| Ships today  | Sugg. $204.99 |     |     |
   The Qty and Add columns (52 + 12 + 58 = 122px) hold a row's nudge when it cannot be added.
   body[data-parts-view=grid] lays the same rows out as cards. Under 1025px the rail folds behind its
   Filters toggle; at 760px and under a row folds to thumb + number and title, availability, then
   price | qty | Add.

   Options and category rows are links, and both draw as the counter's rail links did; a button (a
   layout that still posts the old filters form, POST /parts/filters) has its own chrome reset here.
   Every rule sits in @layer kit, between a site's base and site layers (tokens.css). */
@layer base, kit, site;

@layer kit {

/* ---------- the page and what it inherits: element defaults at no specificity, so every class below wins ---------- */
/* width: 100% and min-width: 0, since a Site's layout may wrap the page in a flex column (a Shopify theme's body): the auto margins
   stop the stretch there and the page would take its min-content width, the fitment table's 520px on a phone, with the gallery
   and the image out of their boxes (shop.beyondauto.ca, 2026-10-26); a definite width holds in a block, a flex row or a column */
.parts {
  width: 100%; min-width: 0; max-width: var(--parts-max); margin: 0 auto; padding: 16px var(--parts-gut) 48px;
  color: var(--parts-ink); background: var(--parts-page); font: 400 14px/20px var(--parts-font); font-optical-sizing: auto;
}
.parts-lb, .parts-peek { color: var(--parts-ink); font: 400 14px/20px var(--parts-font); font-optical-sizing: auto; }
:where(.parts, .parts-lb, .parts-peek), :where(.parts, .parts-lb, .parts-peek) *, :where(.parts, .parts-lb, .parts-peek) ::before, :where(.parts, .parts-lb, .parts-peek) ::after { box-sizing: border-box; }
:where(.parts, .parts-lb) :where(h1, h2, h3) { margin: 0; font-family: var(--parts-font); font-weight: 600; letter-spacing: -.015em; text-transform: none; }
:where(.parts, .parts-lb) :where(p, figure) { margin: 0; }
:where(.parts, .parts-lb) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.parts, .parts-lb, .parts-peek) :where(img) { max-width: 100%; display: block; }
:where(.parts, .parts-lb) :where(a) { color: inherit; }
:where(.parts, .parts-lb) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.parts, .parts-lb) [hidden] { display: none !important; }
:where(.parts, .parts-lb) :focus-visible { outline: 2px solid var(--parts-focus); outline-offset: 2px; }
/* the script focuses the listing itself after a swap whose control is gone: no ring round the whole page */
.parts:focus { outline: none; }
.parts-mono { font-family: var(--parts-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons, the note, a quiet link ---------- */
.parts-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; margin: 0; padding: 0 14px; border: 1px solid var(--parts-ink); border-radius: var(--parts-radius);
  background: var(--parts-ink); color: var(--parts-bg); font: 600 13px/1 var(--parts-font);
  text-decoration: none; cursor: pointer; white-space: nowrap; -webkit-appearance: none; appearance: none;
  transition: background .12s;
}
.parts-btn:hover { background: var(--parts-ink-2); }
.parts-btn--go { background: var(--parts-cta); border-color: var(--parts-cta); color: var(--parts-cta-ink); }
.parts-btn--go:hover { background: var(--parts-cta-hover); border-color: var(--parts-cta-hover); }
.parts-btn--line { background: var(--parts-bg); color: var(--parts-ink); border-color: var(--parts-dove); }
.parts-btn--line:hover { background: var(--parts-cream); border-color: var(--parts-ink); }
.parts-btn[disabled] { background: var(--parts-bg); color: var(--parts-ink); border-style: dashed; cursor: not-allowed; } /* not yet: dashed at full contrast, never faded */
.parts-note { padding: 10px 12px; border-radius: var(--parts-radius); background: var(--parts-cream); border: 1px solid var(--parts-dove); color: var(--parts-steel); font-size: 13px; }
.parts-main > .parts-note { margin-bottom: 10px; }
.parts-link { color: var(--parts-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--parts-dove); text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; }
.parts-link:hover { text-decoration-color: var(--parts-ink); }

/* ---------- breadcrumbs: small, steel, separators in dove ---------- */
.parts-crumbs { margin-bottom: 10px; font-size: 13px; line-height: 20px; color: var(--parts-steel); }
.parts-crumbs, .parts-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.parts-crumbs li { display: inline-flex; gap: 6px; align-items: baseline; }
.parts-crumbs a { text-decoration: none; }
.parts-crumbs a:hover { text-decoration: underline; }
.parts-crumbs [aria-hidden="true"] { color: var(--parts-ink); } /* full contrast like every word (0.9.1) */

/* ---------- the rail beside the main column ---------- */
.parts-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.parts-filters { min-width: 0; }
.parts-main { min-width: 0; }
/* the rail stays where the page puts it and scrolls with it (Greg 2026-10-28: a rail that follows the screen is a distraction); it was sticky and steered by parts.js from 2026-10-26 to 2026-10-28 */
.parts-rail { min-width: 0; font-size: 13px; line-height: 20px; }
.parts-rail, .parts-rail__body { display: grid; gap: 14px; }
.parts-rail__fold { display: block; }
/* the fold: under 1025px its summary is the Filters toggle and it opens on a tap; from 1025px its body
   always shows and the toggle hides (where a browser cannot show a closed fold's body, the toggle stays) */
.parts-rail__toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--parts-dove); border-radius: var(--parts-radius); background: var(--parts-bg); color: var(--parts-ink);
  font-weight: 600; font-size: 13px; list-style: none; cursor: pointer; user-select: none;
}
.parts-rail__toggle::-webkit-details-marker { display: none; }
.parts-rail__toggle:hover { border-color: var(--parts-fog); }
.parts-rail__fold[open] > .parts-rail__toggle { border-color: var(--parts-ink); background: var(--parts-sand); }
@media (min-width: 1025px) {
  .parts-rail__fold::details-content { content-visibility: visible; block-size: auto; }
  @supports selector(::details-content) { .parts-rail__toggle { display: none; } }
}

/* a group: Category, Brand, Availability, Part type, Fitment, Price; its title folds it */
.parts-group { border-bottom: 1px solid var(--parts-dove); padding-bottom: 12px; }
.parts-group > summary { list-style: none; display: flex; justify-content: space-between; padding: 2px 0 6px; font-weight: 600; color: var(--parts-ink); cursor: pointer; }
.parts-group > summary::-webkit-details-marker { display: none; }
.parts-group > summary::after { content: "\2212"; color: var(--parts-fog); }
.parts-group:not([open]) > summary::after { content: "+"; }
.parts-options { display: grid; gap: 1px; }
.parts-options--sub { margin: 2px 0 4px 10px; padding-left: 8px; border-left: 1px solid var(--parts-dove); }

/* a row: a category link or an option, drawn alike, a button's chrome undone */
.parts-option {
  display: flex; justify-content: space-between; gap: 8px; box-sizing: border-box; width: calc(100% + 12px);
  margin: 0 -6px; padding: 3px 6px; border: 0; border-radius: var(--parts-radius-check);
  background: none; color: var(--parts-ink); font: inherit; line-height: 20px; text-align: left; text-decoration: none;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.parts-options--sub .parts-option { font-size: 13px; }
.parts-option:hover { background: var(--parts-cream); color: var(--parts-ink); }
.parts-option[data-open] { color: var(--parts-ink); font-weight: 600; }
.parts-option[aria-pressed="true"], .parts-option[aria-current="page"] { background: var(--parts-sand); color: var(--parts-ink); font-weight: 600; }
.parts-option small { color: var(--parts-fog); font-family: var(--parts-mono); font-size: 13px; }
.parts-option:focus-visible { outline: 2px solid var(--parts-focus); outline-offset: -2px; }
/* a picked brand: the row stays highlighted, its count and an × at the right edge; the whole row takes the brand off */
.parts-option__end { display: inline-flex; align-items: center; gap: 6px; }
.parts-option__x { font-weight: 400; font-size: 15px; line-height: 1; color: var(--parts-steel); }
.parts-option[aria-pressed="true"]:hover .parts-option__x { color: var(--parts-ink); }
/* the Brand list's fold: a step's summary is a row ("Show 15 more"), gone once opened, so the list only grows */
.parts-more > summary {
  list-style: none; display: block; box-sizing: border-box; width: calc(100% + 12px); margin: 0 -6px; padding: 3px 6px;
  border-radius: var(--parts-radius-check); color: var(--parts-ink); font-weight: 600; line-height: 20px; cursor: pointer;
}
.parts-more > summary::-webkit-details-marker { display: none; }
.parts-more > summary:hover { background: var(--parts-cream); }
.parts-more > summary:focus-visible { outline: 2px solid var(--parts-focus); outline-offset: -2px; }
.parts-more[open] > summary { display: none; }
/* the last step's Fewer: the same row, its click folding the whole list (parts.js) */
.parts-fewer {
  display: block; box-sizing: border-box; width: calc(100% + 12px); margin: 0 -6px; padding: 3px 6px; border: 0; text-align: left;
  border-radius: var(--parts-radius-check); background: none; color: var(--parts-ink); font: inherit; font-weight: 600; line-height: 20px; cursor: pointer;
}
.parts-fewer:hover { background: var(--parts-cream); }
.parts-fewer:focus-visible { outline: 2px solid var(--parts-focus); outline-offset: -2px; }

/* ---------- the mast: the node's title as the counter's page head, its heading's icon or the brand's logo beside it ---------- */
.parts-mast { display: grid; gap: 4px; margin-bottom: 12px; }
.parts-mast__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.parts-mast h1 { font-size: 22px; line-height: 28px; overflow-wrap: anywhere; }
.parts-mast__icon { flex: none; width: 28px; height: 28px; filter: var(--parts-icon-filter); }
/* a brand logo sits on its plate (--parts-logo-bg, white by default): the logos are drawn for a white page, and a dark site's page would swallow their dark words */
.parts-mast__logo { flex: none; width: auto; max-width: 160px; height: 32px; object-fit: contain; box-sizing: content-box; padding: 4px 8px; border-radius: var(--parts-radius-image); background: var(--parts-logo-bg); }
.parts-mast--brand h1 { line-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.parts-mast__words { line-height: 1.2; font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; }
.parts-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.parts-mast--brand img { width: auto; max-width: min(100%, 280px); height: 56px; object-fit: contain; box-sizing: content-box; padding: 8px 14px; border-radius: var(--parts-radius-image); background: var(--parts-logo-bg); }
.parts-mast__lead { max-width: 72ch; color: var(--parts-ink); }
.parts-mast__lead a { color: var(--parts-ink); font-weight: 500; text-decoration-color: var(--parts-dove); text-underline-offset: 3px; }
/* the lines under the mast: the vehicle's or the page's lead, how a search ran, a warning */
.parts-lead, .parts-outcome { margin-bottom: 10px; max-width: 72ch; color: var(--parts-ink); }
.parts-lead a, .parts-outcome__link { color: var(--parts-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--parts-dove); text-underline-offset: 3px; }
.parts-lead a:hover, .parts-outcome__link:hover { text-decoration-color: var(--parts-ink); }
.parts-outcome--warn { max-width: none; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--parts-red) 25%, transparent); border-radius: var(--parts-radius); background: var(--parts-red-bg); color: var(--parts-red); font-size: 13px; }

/* ---------- the bar over the rows: the count, In stock only, the sort, Rows / Grid ---------- */
.parts-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.parts-bar > :first-child { margin-right: auto; } /* the count, or In stock only when no vehicle is picked and the count stays off */
.parts-bar__count { font-weight: 600; }
.parts-bar__count span { color: var(--parts-ink); font-weight: 400; }
.parts-bar__stock {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0; padding: 0 10px;
  border: 1px solid var(--parts-dove); border-radius: var(--parts-radius); background: var(--parts-bg); color: var(--parts-ink);
  font: 400 13px/1 var(--parts-font); text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.parts-bar__stock:hover { border-color: var(--parts-fog); }
.parts-bar__stock[aria-pressed="true"] { border-color: var(--parts-ink); background: var(--parts-sand); font-weight: 500; }
/* the box, and the check drawn in it (an SVG mask, filled from a token): Inter's glyph sat off-centre */
.parts-bar__stock::before { content: ""; flex-shrink: 0; width: 15px; height: 15px; border: 1px solid var(--parts-fog); border-radius: var(--parts-radius-check); background: var(--parts-bg); }
.parts-bar__stock[aria-pressed="true"]::before { background: var(--parts-ink); border-color: var(--parts-ink); }
.parts-bar__stock[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 12px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; background: var(--parts-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
/* the sort: the counter's select, its chevron two hairlines drawn in ink */
.parts-bar__form { display: contents; } /* the sort's GET form wraps the select and button without breaking the bar's row */
.parts-bar__sort {
  width: auto; min-width: 0; height: 32px; margin: 0; padding: 0 28px 0 10px;
  border: 1px solid var(--parts-dove); border-radius: var(--parts-radius); color: var(--parts-ink); font: 400 14px/20px var(--parts-font);
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-color: var(--parts-bg);
  background-image:
    linear-gradient(45deg, transparent calc(50% - .75px), var(--parts-ink) calc(50% - .75px), var(--parts-ink) calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(-45deg, transparent calc(50% - .75px), var(--parts-ink) calc(50% - .75px), var(--parts-ink) calc(50% + .75px), transparent calc(50% + .75px));
  background-size: 5px 5px, 5px 5px; background-position: right 15px center, right 10px center; background-repeat: no-repeat;
}
.parts-bar__sort:hover { border-color: var(--parts-fog); }
.parts-bar__sort:focus { border-color: var(--parts-ink); outline: 2px solid var(--parts-focus); outline-offset: 0; }
.parts-bar__apply {
  height: 32px; margin: 0; padding: 0 14px; border: 1px solid var(--parts-dove); border-radius: var(--parts-radius);
  background: var(--parts-bg); color: var(--parts-ink); font: 600 13px/1 var(--parts-font); cursor: pointer;
}
.parts-bar__apply:hover { background: var(--parts-cream); border-color: var(--parts-ink); }
/* Rows / Grid */
.parts-view { display: inline-flex; margin-left: auto; border: 1px solid var(--parts-dove); border-radius: var(--parts-radius); overflow: hidden; }
.parts-view__btn { width: 36px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--parts-bg); color: var(--parts-ink); display: grid; place-items: center; cursor: pointer; -webkit-appearance: none; appearance: none; }
.parts-view__btn + .parts-view__btn { border-left: 1px solid var(--parts-dove); }
.parts-view__btn:hover { background: var(--parts-cream); color: var(--parts-ink); }
.parts-view__btn[aria-pressed="true"] { background: var(--parts-ink); color: var(--parts-bg); }
.parts-view__btn:focus-visible { outline: 2px solid var(--parts-focus); outline-offset: -2px; }

/* ---------- the chips: one per pick, each taking it off, then Clear all ---------- */
.parts-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.parts-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; margin: 0; padding: 0 8px;
  border: 0; border-radius: var(--parts-radius-chip); background: var(--parts-chip-bg); color: var(--parts-ink);
  font: 400 13px/1 var(--parts-font); text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.parts-chip:hover { background: var(--parts-sand-2); }
.parts-chip b { font-weight: 400; color: var(--parts-steel); }
/* a brand's chip: its logo on the white plate (--parts-logo-bg) in place of the name, the × in a fixed grey since the plate is white on any page */
.parts-chip--logo { height: 34px; padding: 0 9px 0 7px; border-radius: var(--parts-radius); background: var(--parts-logo-bg); }
.parts-chip--logo:hover { background: var(--parts-logo-bg); box-shadow: 0 0 0 1px var(--parts-ink); }
.parts-chip--logo img { display: block; height: 24px; width: auto; max-width: 128px; object-fit: contain; }
.parts-chip--logo b { color: #1a1613; } /* the plate is white on any page: the light ink, fixed */
.parts-chip--clear { background: none; color: var(--parts-steel); text-decoration: underline; text-decoration-color: var(--parts-dove); text-underline-offset: 3px; }
.parts-chip--clear:hover { background: none; color: var(--parts-ink); text-decoration-color: var(--parts-ink); }

/* ---------- the ledger: one part per row ---------- */
.parts-ledger { border: 1px solid var(--parts-dove); border-radius: var(--parts-radius-card); background: var(--parts-bg); }
.parts-ledger__head, .parts-row {
  display: grid; align-items: center; column-gap: 12px;
  grid-template-columns: 52px 136px minmax(0, 1fr) 208px 126px 106px 58px;
  padding: 0 12px;
}
.parts-ledger__head {
  position: sticky; top: 0; z-index: 5; height: 30px;
  font-size: 13px; font-weight: 500; color: var(--parts-steel); background: var(--parts-cream);
  border-bottom: 1px solid var(--parts-dove); border-radius: var(--parts-radius-card) var(--parts-radius-card) 0 0;
}
.parts-ledger__head > :nth-child(5) { text-align: right; }
.parts-ledger__head > :nth-child(6) { text-align: center; }
.parts-row { min-height: 64px; padding-top: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--parts-dove); }
.parts-row:last-child { border-bottom: 0; border-radius: 0 0 var(--parts-radius-card) var(--parts-radius-card); }
.parts-row:hover { background: var(--parts-cream); }
.parts-row.is-added { background: var(--parts-accent-bg); }

/* the thumbnail: a button that opens the lightbox, the peek beside it on hover */
.parts-row__img {
  width: 52px; height: 44px; margin: 0; padding: 0; overflow: hidden; display: grid; place-items: center;
  border: 1px solid var(--parts-cream); border-radius: var(--parts-radius-photo); background: var(--parts-photo-bg);
  color: inherit; font: inherit; cursor: zoom-in; -webkit-appearance: none; appearance: none;
}
.parts-row__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .18s ease; }
.parts-row__img:hover img, .parts-row__img:focus-visible img { transform: scale(1.12); }
.parts-row__img:hover { border-color: var(--parts-dove); }
.parts-row__img:focus-visible { outline: 2px solid var(--parts-focus); outline-offset: 1px; }
/* a part with no picture: the photo-coming-soon placeholder in the same frame, nothing to peek at or zoom (Greg 2026-10-16) */
.parts-row__img--none, .parts-row__img--none:hover { cursor: default; border-color: var(--parts-cream); }
.parts-row__img--none:hover img { transform: none; }
body[data-parts-view="grid"] .parts-row__img--none:hover { border-color: var(--parts-cream); }

.parts-row__num { min-width: 0; display: grid; line-height: 17px; }
.parts-row__num :is(a, b) { font: 700 13.5px/18px var(--parts-mono); letter-spacing: -.02em; text-decoration: none; word-break: break-all; }
.parts-row__num a:hover { text-decoration: underline; }
.parts-row__num span { font-size: 13px; color: var(--parts-steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parts-row__desc { min-width: 0; display: grid; gap: 2px; }
.parts-row__title {
  font-weight: 500; line-height: 18px; text-decoration: none; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.parts-row__title:hover { text-decoration: underline; }
.parts-row__meta { font-size: 13px; color: var(--parts-fog); }
/* the Fitment Alert under the verdict (an EDC car's damper note): the verdict's type scale, the brand line's grey */
.parts-row__alert { font-size: 13px; line-height: 18px; color: var(--parts-steel); }
.parts-row__stock, .parts-row__price { min-width: 0; }

/* the buy cell: the form draws no box, so the quantity and Add take the last two columns */
.parts-row__buy { display: contents; }
.parts-row__qty, .parts-row__buy > .parts-qty { justify-self: center; }
.parts-row__add, .parts-row__buy > .parts-btn { min-width: 0; }
.parts-row__buy .parts-btn { width: 100%; height: 32px; padding: 0 12px; }
/* a part that cannot be added says why across the Qty and Add columns */
.parts-row__nudge { grid-column: 6 / -1; justify-self: end; text-align: right; font-size: 13px; line-height: 16px; color: var(--parts-steel); }
.parts-row__nudge a { font-weight: 600; color: var(--parts-ink); }
/* kit-cart.js says a failed add on a line after Add: across the row, under the buy cell */
.parts-row .kit-cart-error { grid-column: 1 / -1; justify-self: end; margin: 4px 0 0; color: var(--parts-cart-error); font-size: 13px; line-height: 16px; }

/* ---------- verdicts, stock, price, quantity (a row, a card, the lightbox) ---------- */
.parts-fit { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; line-height: 18px; }
.parts-fit svg { flex-shrink: 0; }
.parts-fit--fits { color: var(--parts-fit-strong); }
.parts-fit--fits svg { color: var(--parts-fit); }
.parts-fit--universal { color: var(--parts-ink); }
.parts-fit--unknown { color: var(--parts-fog); font-weight: 400; }
.parts-fit--no { color: var(--parts-red); font-weight: 400; }

.parts-stock { display: grid; gap: 1px; font-size: 13px; line-height: 17px; }
.parts-stock b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.parts-stock b::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: var(--parts-radius-round); background: var(--parts-stock); }
.parts-stock--out b::before { background: var(--parts-stock-wait); }
.parts-stock span { color: var(--parts-steel); }
/* the Short Line swap (parts.js): past the stock the line's ready children are hidden and its split sentence shows */
.parts-stock > [hidden] { display: none; }
.parts-stock__split { line-height: inherit; }

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

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

/* the card's stepper: - and + beside the quantity, one box with the site's corner radius; a 40px target with a 16px
   number on a card, a phone or a touch screen, the counter's dense 32px on the rows view with a mouse */
.parts-stepper--row { display: inline-flex; align-items: stretch; border: 1px solid var(--parts-qty-border); border-radius: var(--parts-radius); overflow: hidden; background: var(--parts-bg); }
.parts-stepper--row button { flex: none; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--parts-qty-step); color: var(--parts-ink); font: 600 18px/1 var(--parts-font); cursor: pointer; }
.parts-stepper--row button:hover { background: var(--parts-qty-step-hover); }
.parts-stepper--row button:focus-visible { outline: 2px solid var(--parts-focus); outline-offset: -2px; }
.parts-row .parts-stepper--row .parts-qty { width: 44px; height: 30px; border: 0; border-left: 1px solid var(--parts-qty-border); border-right: 1px solid var(--parts-qty-border); border-radius: 0; font-size: 16px; }
body[data-parts-view="grid"] .parts-stepper--row button { width: 40px; height: 40px; }
body[data-parts-view="grid"] .parts-row .parts-stepper--row .parts-qty { width: 44px; height: 40px; }

/* parts/_card.html's stepper (the region stores' card): the grid card's, 40px buttons around a 16px number, and its
   Short Line sentence in the stock line's ink */
.parts-stepper--card { display: inline-flex; align-items: stretch; border: 1px solid var(--parts-qty-border); border-radius: var(--parts-radius); overflow: hidden; background: var(--parts-bg); }
.parts-stepper--card button { flex: none; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--parts-qty-step); color: var(--parts-ink); font: 600 18px/1 var(--parts-font); cursor: pointer; }
.parts-stepper--card button:hover { background: var(--parts-qty-step-hover); }
.parts-stepper--card button:focus-visible { outline: 2px solid var(--parts-focus); outline-offset: -2px; }
.parts-stepper--card .parts-qty { width: 44px; height: 40px; border: 0; border-left: 1px solid var(--parts-qty-border); border-right: 1px solid var(--parts-qty-border); border-radius: 0; font-size: 16px; }
.npp-card-stock > [hidden] { display: none; }
.npp-stock-split { margin: 0; font-weight: 700; color: var(--parts-ink); }

/* while the next listing is fetched (parts.js swaps #parts-listing), what it will replace dims; a product page
   under a vehicle answer dims whole; opacity only, so nothing moves */
.parts[aria-busy="true"] :is(.parts-bar, .parts-chips, .parts-ledger, .parts-pager, .parts-empty) { opacity: .5; transition: opacity .15s; }
.parts-product[aria-busy="true"] > * { opacity: .5; transition: opacity .15s; }

/* ---------- the pager ---------- */
.parts-pager { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.parts-pager__list { display: flex; align-items: center; gap: 4px; }
.parts-pager__n {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px;
  border: 1px solid var(--parts-dove); border-radius: var(--parts-radius);
  font: 500 13px/1 var(--parts-mono); font-variant-numeric: tabular-nums; text-decoration: none;
}
a.parts-pager__n:hover { border-color: var(--parts-ink); background: var(--parts-cream); }
.parts-pager__n[aria-current="page"] { background: var(--parts-ink); border-color: var(--parts-ink); color: var(--parts-bg); }
.parts-pager__gap { color: var(--parts-fog); padding: 0 2px; }
.parts-pager__of { margin-left: auto; font-size: 13px; color: var(--parts-steel); }
.parts-pager__step {
  display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px;
  border: 1px solid var(--parts-dove); border-radius: var(--parts-radius); background: var(--parts-bg); color: var(--parts-ink);
  font: 600 13px/1 var(--parts-font); text-decoration: none; white-space: nowrap;
}
.parts-pager__step:hover { background: var(--parts-cream); border-color: var(--parts-ink); }
/* Per page, a line of its own at the right */
.parts-pager__per { flex-basis: 100%; display: flex; justify-content: flex-end; align-items: baseline; gap: 4px; font-size: 13px; color: var(--parts-steel); }
.parts-pager__size { padding: 0 4px; color: var(--parts-ink); font-family: var(--parts-mono); text-decoration: none; }
.parts-pager__size:hover { text-decoration: underline; }
.parts-pager__size[aria-current] { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the empty state: a panel with the reason, a search and the categories ---------- */
.parts-empty {
  display: grid; gap: 14px; justify-items: start; padding: 28px 24px;
  border: 1px solid var(--parts-dove); border-radius: var(--parts-radius-card); background: var(--parts-bg);
}
.parts-empty h2 { font-size: 18px; line-height: 24px; }
.parts-empty p { max-width: 60ch; color: var(--parts-ink); }
.parts-empty .parts-chips { margin-bottom: 0; }
.parts-empty > .parts-chip--clear { height: auto; padding: 0; }
.parts-empty__search { display: flex; gap: 8px; width: min(100%, 520px); }
.parts-empty__label { margin-bottom: 6px; color: var(--parts-fog); }
.parts-input, .parts-empty__search input:not([type="hidden"]) {
  flex: 1; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--parts-dove); border-radius: var(--parts-radius);
  background: var(--parts-bg); color: var(--parts-ink); font: 400 14px/20px var(--parts-mono);
}
.parts-input:hover, .parts-empty__search input:hover { border-color: var(--parts-fog); }
/* a focused field rings in ink, never the accent (Greg 2026-10-28: the green around a selected input looked wrong) */
.parts-input:focus, .parts-empty__search input:focus { border-color: var(--parts-ink); outline: 2px solid var(--parts-ink); outline-offset: 0; }
.parts-empty__search button { height: 40px; }
.parts-empty__search button:not(.parts-btn) {
  padding: 0 14px; border: 1px solid var(--parts-ink); border-radius: var(--parts-radius); background: var(--parts-ink); color: var(--parts-bg);
  font: 600 13px/1 var(--parts-font); cursor: pointer;
}

/* ---------- the peek: the thumbnail large beside the pointer, rows only, a fine pointer only ---------- */
.parts-peek {
  position: fixed; z-index: 60; width: 320px; height: 260px; padding: 10px;
  background: var(--parts-photo-bg); border: 1px solid var(--parts-dove); border-radius: var(--parts-radius-card);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--parts-shadow) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--parts-shadow) 4%, transparent);
  pointer-events: none; opacity: 0; transform: translateY(-4px) scale(.97); transform-origin: top left;
  transition: opacity .14s ease, transform .18s cubic-bezier(.2, .8, .2, 1);
}
.parts-peek.is-on { opacity: 1; transform: none; }
.parts-peek.is-up { transform-origin: bottom left; }
.parts-peek[hidden] { display: none; }
.parts-peek img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- the lightbox: the part's pictures large, its facts beside them ---------- */
.parts-lb {
  width: min(1040px, 94vw); max-height: 90vh; padding: 0; border: 0; border-radius: var(--parts-radius);
  background: var(--parts-bg); overflow: hidden;
  display: none; grid-template-columns: minmax(0, 1fr) 300px;
  box-shadow: 0 30px 80px color-mix(in srgb, var(--parts-shadow) 35%, transparent);
}
.parts-lb[open] { display: grid; animation: parts-lb-in .2s cubic-bezier(.2, .8, .2, 1); }
.parts-lb::backdrop { background: color-mix(in srgb, var(--parts-shadow) 62%, transparent); animation: parts-lb-fade .2s ease; }
@keyframes parts-lb-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes parts-lb-fade { from { opacity: 0; } }
@keyframes parts-lb-swap { from { opacity: 0; transform: scale(.985); } }
.parts-lb__close {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; margin: 0; padding: 0;
  border: 1px solid var(--parts-dove); border-radius: var(--parts-radius-round); background: var(--parts-bg); color: var(--parts-ink);
  display: grid; place-items: center; cursor: pointer;
}
.parts-lb__close:hover { background: var(--parts-cream); border-color: var(--parts-ink); }
.parts-lb__stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 420px; background: var(--parts-cream); }
.parts-lb__fig { margin: 0; display: grid; place-items: center; min-height: 0; padding: 28px 64px 12px; }
.parts-lb__img { max-width: 100%; max-height: min(62vh, 560px); object-fit: contain; display: block; background: var(--parts-photo-mat); }
.parts-lb__img.is-swapping { animation: parts-lb-swap .16s ease; }
.parts-lb__nav {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); width: 40px; height: 40px; margin: 0; padding: 0;
  border: 1px solid var(--parts-dove); border-radius: var(--parts-radius-round); background: var(--parts-bg); color: var(--parts-ink);
  display: grid; place-items: center; cursor: pointer;
}
.parts-lb__nav:hover { border-color: var(--parts-ink); }
.parts-lb__nav--prev { left: 12px; }
.parts-lb__nav--next { right: 12px; }
.parts-lb__thumbs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; min-height: 10px; padding: 0 16px 10px; }
.parts-lb__thumb { width: 54px; height: 44px; margin: 0; padding: 2px; border: 1px solid var(--parts-dove); border-radius: var(--parts-radius-photo); background: var(--parts-photo-bg); cursor: pointer; }
.parts-lb__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.parts-lb__thumb[aria-current="true"] { border-color: var(--parts-ink); box-shadow: 0 0 0 1px var(--parts-ink); }
.parts-lb__count { position: absolute; left: 14px; top: 12px; margin: 0; font-size: 13px; color: var(--parts-fog); }
.parts-lb__side { display: grid; align-content: start; gap: 6px; padding: 44px 22px 22px; border-left: 1px solid var(--parts-dove); }
.parts-lb__num { margin: 0; font: 700 14px/18px var(--parts-mono); letter-spacing: -.02em; }
.parts-lb__brand { margin: 0; font-size: 13px; color: var(--parts-steel); }
.parts-lb__title { margin: 4px 0 2px; font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -.01em; }
.parts-lb__price { margin-top: 10px; display: grid; gap: 1px; }
.parts-lb__price b { font: 700 22px/26px var(--parts-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.parts-lb__price small { font-size: 13px; color: var(--parts-fog); }
.parts-lb__price small:empty { display: none; }
.parts-lb__buy { display: grid; grid-template-columns: 60px 1fr; gap: 8px; margin-top: 12px; }
.parts-lb__buy .parts-qty { width: 100%; height: 40px; }
.parts-lb__buy .parts-btn { height: 40px; }
.parts-lb__open { margin-top: 8px; justify-content: center; }
.parts-lb__hint { margin: 14px 0 0; font-size: 13px; color: var(--parts-fog); }
.parts-lb .parts-fit { margin: 2px 0 0; }
.parts-lb .parts-fit--fits::before { content: "\2713\00a0"; }
.parts-lb .parts-fit--no::before { content: "\2715\00a0"; }
.parts-lb .parts-stock { margin-top: 8px; }

/* ---------- the grid: the same rows laid out as cards (Rows / Grid, remembered on body) ---------- */
body[data-parts-view="grid"] .parts-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; border: 0; border-radius: 0; background: transparent; }
body[data-parts-view="grid"] .parts-ledger__head { display: none; }
body[data-parts-view="grid"] .parts-row {
  grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 4px; align-items: start; align-content: start;
  grid-template-areas: "img img" "num num" "desc desc" "stock stock" "price price" "qty add";
  min-height: 0; padding: 10px; border: 1px solid var(--parts-dove); border-radius: var(--parts-radius-card); background: var(--parts-bg);
  transition: border-color .12s ease, box-shadow .12s ease;
}
body[data-parts-view="grid"] .parts-row:hover { background: var(--parts-bg); border-color: var(--parts-ink); box-shadow: 0 0 0 1px var(--parts-ink); }
body[data-parts-view="grid"] .parts-row.is-added { background: var(--parts-accent-bg); }
/* the card's picture: a square plate (the makers' pictures are square, 880 px, so the plate shows the whole picture with no bands at the
   sides), the picture contained in it. The img carries the plate's ratio itself: a percentage height inside the button's auto grid row
   is cyclic, resolves to auto, and a square picture would then overflow a shorter plate and be clipped at the bottom */
body[data-parts-view="grid"] .parts-row__img { grid-area: img; width: 100%; height: auto; aspect-ratio: 1 / 1; margin-bottom: 4px; border-color: var(--parts-cream); background: var(--parts-cream); }
body[data-parts-view="grid"] .parts-row__img:hover { border-color: var(--parts-dove); }
body[data-parts-view="grid"] .parts-row__img img { height: auto; aspect-ratio: 1 / 1; padding: 4px; background: var(--parts-photo-mat); }
body[data-parts-view="grid"] .parts-row__num { grid-area: num; display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
body[data-parts-view="grid"] .parts-row__num :is(a, b) { font-size: 13px; }
/* a card with the brand's logo: the logo on its white plate (--parts-logo-bg) first, the part number to its right, the brand's
   name kept for the rows view and screen readers (Greg 2026-10-16) */
.parts-row__brand { display: none; }
body[data-parts-view="grid"] .parts-row__num--logo { justify-content: flex-start; align-items: center; gap: 10px; }
body[data-parts-view="grid"] .parts-row__num--logo .parts-row__brand { display: block; flex: none; height: 18px; width: auto; max-width: 84px; object-fit: contain; box-sizing: content-box; padding: 4px 6px; border-radius: var(--parts-radius); background: var(--parts-logo-bg); }
body[data-parts-view="grid"] .parts-row__num--logo span { display: none; }
body[data-parts-view="grid"] .parts-row__desc { grid-area: desc; }
body[data-parts-view="grid"] .parts-row__title { font-size: 13.5px; }
body[data-parts-view="grid"] .parts-row__stock { grid-area: stock; margin-top: 2px; }
body[data-parts-view="grid"] .parts-row__price { grid-area: price; justify-self: start; margin-top: 4px; }
body[data-parts-view="grid"] .parts-row__price .parts-price { text-align: left; }
body[data-parts-view="grid"] .parts-row__price .parts-price b { font-size: 17px; }
body[data-parts-view="grid"] :is(.parts-row__qty, .parts-row__buy > .parts-qty) { grid-area: qty; justify-self: stretch; margin-top: 6px; }
body[data-parts-view="grid"] .parts-row .parts-qty { width: 100%; height: 36px; }
body[data-parts-view="grid"] .parts-row__qty { justify-self: start; }
body[data-parts-view="grid"] :is(.parts-row__add, .parts-row__buy > .parts-btn) { grid-area: add; margin-top: 6px; }
body[data-parts-view="grid"] .parts-row__buy .parts-btn { height: 42px; }
body[data-parts-view="grid"] .parts-row__nudge { grid-area: qty / qty / add / add; justify-self: start; text-align: left; margin-top: 6px; }
body[data-parts-view="grid"] .parts-row .kit-cart-error { justify-self: start; }

/* ====================================================== the narrower screens (the counter's breakpoints) */

/* the rail folds behind its Filters toggle, over the main column */
@media (max-width: 1024px) {
  .parts-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .parts-rail { position: static; }
  .parts-rail__body {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-items: start; gap: 14px 24px;
    margin-top: 10px; padding: 12px; border: 1px solid var(--parts-dove); border-radius: var(--parts-radius-rail); background: var(--parts-bg);
  }
}

@media (max-width: 900px) {
  .parts-ledger__head, .parts-row { grid-template-columns: 52px 128px minmax(0, 1fr) 128px 100px 106px 54px; column-gap: 10px; }
  .parts-qty { width: 48px; }
}

/* a phone: a row folds to thumb + number and title, availability, then price | qty | Add */
@media (max-width: 760px) {
  .parts-ledger__head { display: none; }
  .parts-row {
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    grid-template-areas: "img num num num" "img desc desc desc" "stock stock stock stock" "price price qty add";
    row-gap: 6px; padding: 10px 12px;
  }
  .parts-row__img { grid-area: img; width: 56px; height: 56px; align-self: start; }
  .parts-row__num { grid-area: num; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .parts-row__desc { grid-area: desc; }
  .parts-row__stock { grid-area: stock; }
  .parts-row__price { grid-area: price; justify-self: start; }
  .parts-row__price .parts-price { text-align: left; }
  .parts-price--none small { text-align: left; }
  :is(.parts-row__qty, .parts-row__buy > .parts-qty) { grid-area: qty; }
  :is(.parts-row__add, .parts-row__buy > .parts-btn) { grid-area: add; }
  .parts-row .parts-qty { width: 52px; height: 36px; }
  .parts-row__buy .parts-btn { height: 36px; padding: 0 16px; }
  .parts-row__nudge { grid-area: auto; grid-column: 3 / 5; grid-row: 4; }
  .parts-pager__list { display: none; }
  .parts-pager__of { margin: 0 auto; }
  .parts-view { margin-left: 0; }
  .parts-lb { grid-template-columns: 1fr; max-height: 92vh; overflow: auto; }
  .parts-lb__stage { min-height: 300px; }
  .parts-lb__fig { padding: 20px 52px 8px; }
  .parts-lb__img { max-height: 42vh; }
  .parts-lb__side { border-left: 0; border-top: 1px solid var(--parts-dove); padding: 18px; }
}

@media (max-width: 480px) {
  .parts-mast h1 { font-size: 26px; line-height: 32px; }  /* a phone's h1 reads bigger than the desktop's 22px, not smaller (Greg 2026-10-29) */
  .parts-empty { padding: 20px 14px; }
  body[data-parts-view="grid"] .parts-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body[data-parts-view="grid"] .parts-row { padding: 8px; }
  body[data-parts-view="grid"] .parts-row__num:not(.parts-row__num--logo) { flex-direction: column; gap: 0; }
  body[data-parts-view="grid"] .parts-row__num span { white-space: normal; }
  /* two cards across leave no room for the stepper beside Add: the stepper fills its line, Add the next */
  body[data-parts-view="grid"] .parts-row { grid-template-areas: "img img" "num num" "desc desc" "stock stock" "price price" "qty qty" "add add"; }
  body[data-parts-view="grid"] .parts-row__qty { justify-self: stretch; }
  body[data-parts-view="grid"] .parts-stepper--row { display: flex; }
  body[data-parts-view="grid"] .parts-row .parts-stepper--row .parts-qty { flex: 1; width: auto; min-width: 0; }
  body[data-parts-view="grid"] :is(.parts-row__add, .parts-row__buy > .parts-btn) { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .parts-row__img img, .parts-peek, body[data-parts-view="grid"] .parts-row, .parts-btn { transition: none; }
  .parts-lb[open], .parts-lb::backdrop, .parts-lb__img.is-swapping { animation: none; }
}
@media (hover: none), (pointer: coarse) {
  .parts-peek { display: none !important; }
}


/* ====================================================== a phone or a touch screen (0.9.1, the shop-page rules)
   Every control a 40px target, every input and select 16px (iOS zooms a smaller one), no word under 13px: the crumbs,
   the Filters toggle, an option, Fewer and a group's title, In stock only, the sort, the view switch, the pager, a chip, a
   row's part number, title, quantity and Add. The desktop's mouse keeps the counter's dense 32px controls. */
@media (max-width: 760px), (pointer: coarse) {
  .parts-crumbs, .parts-crumbs ol, .parts-crumbs li { gap: 0 4px; align-items: center; }
  .parts-crumbs a, .parts-crumbs [aria-current="page"] { display: inline-flex; align-items: center; min-height: 40px; }
  .parts-crumbs a { min-width: 40px; }
  .parts-rail__toggle, .parts-bar__stock, .parts-bar__apply, .parts-view__btn, .parts-pager__step { height: 40px; }
  .parts-view__btn { width: 40px; }
  .parts-bar__sort { height: 40px; font-size: 16px; }
  .parts-group > summary { align-items: center; min-height: 40px; padding: 0; }
  .parts-option, .parts-more > summary, .parts-fewer { align-items: center; min-height: 40px; padding-top: 0; padding-bottom: 0; }
  .parts-pager__n { min-width: 40px; height: 40px; }
  .parts-fewer { display: flex; }
  .parts-pager__size { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
  .parts-chip { height: 40px; padding: 0 12px; border-radius: var(--parts-radius); }
  .parts-chip--logo { height: 40px; }
  .parts-empty > .parts-chip--clear { height: 40px; }
  .parts-row__num :is(a, b) { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; }
  .parts-row__title { min-height: 40px; display: -webkit-box; padding-top: 2px; }
  .parts-row .parts-qty, body[data-parts-view="grid"] .parts-row .parts-qty { height: 40px; font-size: 16px; }
  .parts-stepper--row button { width: 40px; height: 40px; }
  .parts-row .parts-stepper--row .parts-qty, body[data-parts-view="grid"] .parts-row .parts-stepper--row .parts-qty { height: 40px; }
  .parts-row__buy .parts-btn { height: 40px; }
  body[data-parts-view="grid"] .parts-row__buy .parts-btn { height: 42px; }
  .parts-input, .parts-empty__search input:not([type="hidden"]) { font-size: 16px; }
  .parts-lb__close { width: 40px; height: 40px; }
  .parts-lb__buy .parts-qty { font-size: 16px; }
  .parts-lb__open { min-height: 40px; }
}

}