/* Approved UGL homepage language for the existing commerce interfaces.
   This final layer changes presentation only. Grids, ordering, visibility,
   sticky behavior and native form interactions remain in the earlier layers. */

body:is([data-page="catalog"], [data-page="product"], [data-page="cart"],
  [data-page="checkout"], [data-page="saved"], [data-page="compare"],
  [data-page="account"], [data-page="track-order"]) #main {
  --uc-bg: #f2f4f9;
  --uc-card: #f9fbff;
  --uc-panel: #e6eaf2;
  --uc-dark: #041321;
  --uc-blue: #0c73ff;
  --uc-ink: #202020;
  --uc-muted: #596371;
  --uc-line: #d8dfeb;
  --uc-soft: #e8f1ff;
  --orisa-bg: var(--uc-bg);
  --orisa-card: var(--uc-card);
  --orisa-ink: var(--uc-ink);
  --orisa-muted: var(--uc-muted);
  --orisa-line: var(--uc-line);
  --orisa-blue: var(--uc-blue);
  --orisa-soft: var(--uc-soft);
  --orisa-dark: var(--uc-dark);
  --ink: var(--uc-ink);
  --muted: var(--uc-muted);
  --line: var(--uc-line);
  --light: var(--uc-bg);
  --blue: var(--uc-blue);
  --blue-dark: #075fd8;
  --navy: var(--uc-dark);
  --font-body: Geist, Arial, sans-serif;
  --font-display: Geist, Arial, sans-serif;
  font-family: Geist, Arial, sans-serif;
  background: var(--uc-bg);
  color: var(--uc-ink);
}

body:not([data-page="home"]) #main :is(.commerce-head, .commerce-catalog,
  .commerce-product-detail, .commerce-cart-section, .commerce-checkout,
  .commerce-saved, .commerce-compare, .commerce-account, .commerce-tracking,
  .commerce-confirmation) {
  --commerce-surface: var(--uc-panel);
  --commerce-blue-surface: var(--uc-soft);
  --commerce-divider: var(--uc-line);
  --commerce-radius: 24px;
  font-family: Geist, Arial, sans-serif;
  color: var(--uc-ink);
}

body:not([data-page="home"]) #main :is(.commerce-head, .commerce-catalog,
  .commerce-product-detail, .commerce-cart-section, .commerce-checkout,
  .commerce-saved, .commerce-compare, .commerce-account, .commerce-tracking,
  .commerce-confirmation) :is(h1, h2, h3, h4, input, select, textarea, button,
  .btn, .eyebrow, .product-price, .commerce-compare-price) {
  font-family: Geist, Arial, sans-serif;
}

/* Light page introductions and navigation trails. */
body:not([data-page="home"]) #main .commerce-head {
  background: var(--uc-bg);
  color: var(--uc-ink);
  border-color: var(--uc-line);
}
body:not([data-page="home"]) #main .commerce-head::before,
body:not([data-page="home"]) #main .commerce-head .breadcrumbs::before,
body:not([data-page="home"]) #main .commerce-product-detail > .breadcrumbs::before { background-image: none; }
body:not([data-page="home"]) #main :is(.commerce-head .breadcrumbs, .commerce-product-detail > .breadcrumbs) {
  background: transparent;
  color: var(--uc-muted);
}
body:not([data-page="home"]) #main :is(.commerce-head .breadcrumbs, .commerce-product-detail > .breadcrumbs) a { color: var(--uc-muted); }
body:not([data-page="home"]) #main :is(.commerce-head .breadcrumbs, .commerce-product-detail > .breadcrumbs) a:hover { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-title-row h1,
body:not([data-page="home"]) #main .commerce-title-row h1 span {
  color: var(--uc-ink);
  font-weight: 700;
  letter-spacing: -.035em;
}
body:not([data-page="home"]) #main .commerce-title-row p { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-head .eyebrow { color: var(--uc-muted); font-weight: 500; letter-spacing: .025em; }

/* Labels, native fields and their keyboard/validation states. */
body:not([data-page="home"]) #main .commerce-field { color: var(--uc-ink); font-weight: 600; letter-spacing: -.015em; }
body:not([data-page="home"]) #main :is(.commerce-field input, .commerce-field select,
  .commerce-field textarea, .commerce-filter-panel .form-control,
  .commerce-filter-panel .form-select, .commerce-search-input input, .commerce-sort select) {
  background-color: var(--uc-card);
  border-color: var(--uc-line);
  border-radius: 999px;
  color: var(--uc-ink);
  font-family: Geist, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -.01em;
  box-shadow: none;
}
body:not([data-page="home"]) #main .commerce-field textarea { border-radius: 20px; }
body:not([data-page="home"]) #main :is(.commerce-field input, .commerce-field textarea, .commerce-search-input input)::placeholder { color: #687383; opacity: 1; }
body:not([data-page="home"]) #main :is(.commerce-field input, .commerce-field select,
  .commerce-field textarea, .commerce-filter-panel .form-control,
  .commerce-filter-panel .form-select, .commerce-search-input input, .commerce-sort select):hover { border-color: #aab8cc; }
body:not([data-page="home"]) #main :is(.commerce-field input, .commerce-field select,
  .commerce-field textarea, .commerce-filter-panel .form-control,
  .commerce-filter-panel .form-select, .commerce-search-input input, .commerce-sort select):focus {
  border-color: var(--uc-blue);
  outline-color: var(--uc-blue);
  box-shadow: 0 0 0 3px #0c73ff12;
}
body:not([data-page="home"]) #main :is(.commerce-optional, .commerce-small, .commerce-checkbox, .commerce-checkbox small) { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-checkbox input { accent-color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-checkbox input:focus-visible { outline: 2px solid var(--uc-blue); outline-offset: 3px; }
body:not([data-page="home"]) #main .commerce-text-button { color: var(--uc-ink); font-weight: 500; letter-spacing: -.01em; }
body:not([data-page="home"]) #main .commerce-text-button:hover { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-icon-button { background: transparent; color: var(--uc-muted); border-radius: 50%; }
body:not([data-page="home"]) #main .commerce-icon-button:hover { background: var(--uc-soft); color: var(--uc-blue); }

/* Catalog controls share the homepage's cool, lightly framed surfaces. */
body:not([data-page="home"]) #main :is(.commerce-catalog-search, .commerce-filter-panel) {
  background: var(--uc-card);
  border-color: var(--uc-line);
  border-radius: 24px;
  box-shadow: none;
}
body:not([data-page="home"]) #main .commerce-catalog-search > label { color: var(--uc-ink); font-weight: 600; }
body:not([data-page="home"]) #main .commerce-search-input > :is(svg, .icon) { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-search-input > :is(svg, .icon) + input { padding-left: 50px; }
body:not([data-page="home"]) #main .commerce-filter-panel :is(input, select) { background-color: var(--uc-bg); }
body:not([data-page="home"]) #main .commerce-filter-panel fieldset { border-color: var(--uc-line); }
body:not([data-page="home"]) #main .commerce-filter-header h2 { color: var(--uc-ink); font-weight: 700; letter-spacing: -.025em; }
body:not([data-page="home"]) #main .commerce-filter-panel legend { color: var(--uc-ink); font-weight: 600; }
body:not([data-page="home"]) #main .commerce-price-filter label > span,
body:not([data-page="home"]) #main .commerce-price-filter > span,
body:not([data-page="home"]) #main .commerce-sort label,
body:not([data-page="home"]) #main .commerce-results-toolbar > p { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-results-toolbar > p strong { color: var(--uc-ink); }
body:not([data-page="home"]) #main .commerce-filter-help {
  background: var(--uc-panel);
  border: 0;
  border-radius: 20px;
  margin: 28px 0 0;
  padding: 22px;
  min-width: 0;
}
body:not([data-page="home"]) #main .commerce-filter-help > svg { display: block; color: var(--uc-blue); margin-bottom: 16px; }
body:not([data-page="home"]) #main .commerce-filter-help h3 { color: var(--uc-ink); font-weight: 700; letter-spacing: -.025em; line-height: 1.25; }
body:not([data-page="home"]) #main .commerce-filter-help p { color: var(--uc-muted); line-height: 1.6; }
body:not([data-page="home"]) #main .commerce-filter-help a { color: var(--uc-dark); font-weight: 600; max-width: 100%; gap: 8px; }
body:not([data-page="home"]) #main .commerce-filter-help a:hover { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-view-toggle { background: var(--uc-card); border-color: var(--uc-line); border-radius: 999px; }
body:not([data-page="home"]) #main .commerce-view-toggle button { background: var(--uc-card); color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-view-toggle button + button { border-color: var(--uc-line); }
body:not([data-page="home"]) #main .commerce-view-toggle button.active { background: var(--uc-blue); color: #fff; }
body:not([data-page="home"]) #main .commerce-view-toggle:focus-within { outline-color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-active-filters > button { background: var(--uc-card); color: var(--uc-ink); border-color: var(--uc-line); border-radius: 999px; }
body:not([data-page="home"]) #main .commerce-active-filters > button:hover { background: var(--uc-soft); color: var(--uc-blue); border-color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-active-filters .commerce-clear-all { background: transparent; border-color: transparent; color: var(--uc-muted); }
/* One complete notice frame, including compact product and mobile columns. */
body:not([data-page="home"]) #main .commerce-demo-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding: 14px 16px;
  background: var(--uc-card);
  color: var(--uc-muted);
  border: 1px solid var(--uc-line);
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.6;
}
body:not([data-page="home"]) #main .commerce-demo-note > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  color: var(--uc-muted);
}
body:not([data-page="home"]) #main .commerce-demo-note > span { min-width: 0; overflow-wrap: anywhere; }
body:not([data-page="home"]) #main .commerce-pagination { border-color: var(--uc-line); }
body:not([data-page="home"]) #main .commerce-pagination > span { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-pagination button { background: var(--uc-card); color: var(--uc-ink); border-color: var(--uc-line); border-radius: 50%; }
body:not([data-page="home"]) #main .commerce-pagination button:hover { background: var(--uc-soft); color: var(--uc-blue); border-color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-pagination button.active { background: var(--uc-blue); border-color: var(--uc-blue); color: #fff; }

/* The existing product grid and list view use the same framed inventory cards. */
body:not([data-page="home"]) #main .commerce-product-grid .product-card {
  background: var(--uc-card);
  border-color: transparent;
  border-radius: 24px;
  box-shadow: none;
}
body:not([data-page="home"]) #main .commerce-product-grid .product-card:hover { border-color: #ccd6e6; box-shadow: 0 8px 24px #04132106; }
body:not([data-page="home"]) #main .commerce-product-grid .product-image { background: var(--uc-panel); border-radius: 18px; }
body:not([data-page="home"]) #main .commerce-product-grid .condition-badge { background: var(--uc-card); color: var(--uc-muted); border-radius: 999px; font-weight: 500; }
body:not([data-page="home"]) #main .commerce-product-grid .save-part { background: #f9fbfff0; border-color: #f9fbff; color: var(--uc-dark); border-radius: 50%; }
body:not([data-page="home"]) #main .commerce-product-grid .save-part:hover,
body:not([data-page="home"]) #main .commerce-product-grid .save-part:is(.is-saved, [aria-pressed="true"]) { color: var(--uc-blue); background: var(--uc-card); }
body:not([data-page="home"]) #main .commerce-product-grid .save-part.is-saved svg { fill: currentColor; }
body:not([data-page="home"]) #main .commerce-product-grid :is(.product-meta, .product-meta span, .fit-line, .product-status, .product-bottom small) { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-product-grid .product-meta { font-weight: 500; letter-spacing: .01em; }
body:not([data-page="home"]) #main .commerce-product-grid .product-name { color: var(--uc-ink); font-weight: 700; letter-spacing: -.025em; }
body:not([data-page="home"]) #main .commerce-product-grid .product-name:hover { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-product-grid .product-price { color: var(--uc-ink); font-weight: 650; letter-spacing: -.035em; }
body:not([data-page="home"]) #main .commerce-product-grid .product-add { background: var(--uc-blue); border-color: var(--uc-blue); color: #fff; border-radius: 50%; }
body:not([data-page="home"]) #main .commerce-product-grid .product-add:hover { background: #075fd8; border-color: #075fd8; }
body:not([data-page="home"]) #main .commerce-product-grid .product-add:disabled { background: var(--uc-panel); border-color: var(--uc-panel); color: #697585; }
body:not([data-page="home"]) #main .commerce-product-grid .compare-link { border-color: var(--uc-line); color: var(--uc-muted); font-weight: 500; }
body:not([data-page="home"]) #main .commerce-product-grid .compare-link:hover,
body:not([data-page="home"]) #main .commerce-product-grid .compare-link:is(.is-compared, [aria-pressed="true"]) { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-product-grid .status-dot { background: #26805a; }
body:not([data-page="home"]) #main .commerce-product-grid .status-dot.unavailable { background: #976718; }
body:not([data-page="home"]) #main .commerce-sourcing-banner { background: var(--uc-dark); border-color: var(--uc-dark); color: var(--uc-card); border-radius: 24px; }
body:not([data-page="home"]) #main .commerce-sourcing-banner h2 { color: var(--uc-card); font-weight: 700; letter-spacing: -.03em; }
body:not([data-page="home"]) #main .commerce-sourcing-banner :is(p, .eyebrow) { color: #c6cfdb; }

/* Product imagery, specifications, purchasing controls and fitment help. */
body:not([data-page="home"]) #main .commerce-detail-image { background: var(--uc-panel); border: 0; border-radius: 24px; padding: 0; overflow: hidden; }
/* Product photography fills its media frame at every breakpoint. */
body:not([data-page="home"]) #main :is(.commerce-detail-image > img, .commerce-cart-image img,
  .commerce-checkout-items img, .commerce-compare-table thead img) {
  display: block;
  padding: 0;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
}
body:not([data-page="home"]) #main .commerce-detail-image > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
}
body:not([data-page="home"]) #main .commerce-image-label span:first-child { background: var(--uc-card); color: var(--uc-ink); border-radius: 999px; box-shadow: none; }
body:not([data-page="home"]) #main .commerce-image-label span:last-child { background: var(--uc-dark); color: var(--uc-card); border-radius: 999px; }
body:not([data-page="home"]) #main .commerce-detail-image .commerce-image-caption { background: #f9fbfff2; border-color: var(--uc-line); color: var(--uc-muted); }
body:not([data-page="home"]) #main :is(.commerce-detail-promises, .commerce-detail-price, .commerce-detail-lower, .commerce-accordion) { border-color: var(--uc-line); }
body:not([data-page="home"]) #main :is(.commerce-detail-promises > div, .commerce-part-note p, .commerce-part-meta > span, .commerce-condition-line) { color: var(--uc-muted); }
body:not([data-page="home"]) #main :is(.commerce-detail-promises svg, .commerce-part-note > svg) { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-part-meta a { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-product-info h1 { color: var(--uc-ink); font-weight: 700; letter-spacing: -.035em; }
body:not([data-page="home"]) #main .commerce-part-description { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-availability { color: #24724f; }
body:not([data-page="home"]) #main .commerce-availability i { background: #26805a; }
body:not([data-page="home"]) #main .commerce-availability.unavailable { color: #866016; }
body:not([data-page="home"]) #main .commerce-availability.unavailable i { background: #976718; }
body:not([data-page="home"]) #main .commerce-detail-price > strong { color: var(--uc-ink); font-family: Geist, Arial, sans-serif; font-weight: 650; letter-spacing: -.04em; }
body:not([data-page="home"]) #main :is(.commerce-detail-price > span, .commerce-detail-price > p, .commerce-quick-specs span) { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-help { color: var(--uc-muted); border-color: #95a5bb; }
body:not([data-page="home"]) #main .commerce-quick-specs strong { color: var(--uc-ink); font-weight: 600; }
body:not([data-page="home"]) #main .commerce-quantity { background: var(--uc-card); border-color: var(--uc-line); border-radius: 999px; }
body:not([data-page="home"]) #main .commerce-quantity :is(button, input) { color: var(--uc-ink); }
body:not([data-page="home"]) #main .commerce-quantity button:hover { color: var(--uc-blue); background: var(--uc-soft); }
body:not([data-page="home"]) #main .commerce-quantity input:focus-visible { outline-color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-detail-secondary :is(button, a) { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-detail-secondary button[aria-pressed="true"],
body:not([data-page="home"]) #main .commerce-detail-secondary :is(button, a):hover { color: var(--uc-blue); }
/* Comparison belongs to the detailed part view, next to the buying controls. */
body[data-page="product"] #main .commerce-detail-compare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 20px;
  padding: 20px;
  border: 1px solid #d4e2f5;
  border-radius: 18px;
  background: #edf4ff;
}
body[data-page="product"] #main .commerce-compare-intro { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; min-width: 0; }
body[data-page="product"] #main .commerce-compare-intro > .icon { width: 26px; height: 26px; flex: 0 0 26px; color: var(--uc-blue); }
body[data-page="product"] #main .commerce-compare-intro strong { display: block; color: var(--uc-ink); font-size: 15px; font-weight: 600; line-height: 1.4; }
body[data-page="product"] #main .commerce-compare-intro p { margin: 4px 0 0; color: var(--uc-muted); font-size: 12px; line-height: 1.5; }
body[data-page="product"] #main .commerce-compare-controls { display: flex; align-items: flex-start; flex-direction: column; gap: 10px; }
body[data-page="product"] #main .commerce-compare-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid #b7cff0;
  border-radius: 999px;
  background: var(--uc-card);
  color: var(--uc-blue);
  font: 500 13px/1.4 Geist, Arial, sans-serif;
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
body[data-page="product"] #main .commerce-compare-toggle > .icon { width: 17px; height: 17px; flex: 0 0 17px; }
body[data-page="product"] #main .commerce-compare-toggle:hover,
body[data-page="product"] #main .commerce-compare-toggle[aria-pressed="true"] { color: #fff; background: var(--uc-blue); border-color: var(--uc-blue); }
body[data-page="product"] #main .commerce-compare-toggle[aria-pressed="true"] > .icon { transform: rotate(45deg); }
body[data-page="product"] #main .commerce-compare-view { display: inline-flex; align-items: center; gap: 8px; color: var(--uc-blue); font-size: 12px; font-weight: 500; line-height: 1.5; }
body[data-page="product"] #main .commerce-compare-view[hidden] { display: none; }
body[data-page="product"] #main .commerce-compare-view .icon { width: 16px; height: 16px; }
body[data-page="product"] #main .commerce-detail-compare :is(button, a):focus-visible { outline: 3px solid var(--uc-blue); outline-offset: 3px; }
@media (max-width: 479px) {
  body[data-page="product"] #main .commerce-detail-compare { padding: 16px; gap: 16px; }
  body[data-page="product"] #main .commerce-compare-controls { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; }
}
body:not([data-page="home"]) #main .commerce-part-specialist { background: var(--uc-card); border-color: var(--uc-line); color: var(--uc-ink); border-radius: 22px; box-shadow: none; }
body:not([data-page="home"]) #main .commerce-specialist-icon { color: var(--uc-blue); background: var(--uc-soft); border-radius: 50%; }
body:not([data-page="home"]) #main .commerce-part-specialist > svg { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-part-specialist > div > span { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-specifications > h2 { color: var(--uc-ink); font-weight: 700; letter-spacing: -.03em; }
body:not([data-page="home"]) #main .commerce-accordion summary { color: var(--uc-ink); letter-spacing: -.015em; }
body:not([data-page="home"]) #main .commerce-accordion summary svg { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-spec-table > div:nth-child(odd) { background: var(--uc-panel); border-radius: 12px; }
body:not([data-page="home"]) #main :is(.commerce-spec-table dt, .commerce-accordion-body) { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-spec-table dd { color: var(--uc-ink); }
body:not([data-page="home"]) #main .commerce-accordion-body a { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-fitment-card { background: var(--uc-card); color: var(--uc-ink); border-radius: 24px; }
body:not([data-page="home"]) #main .commerce-fitment-card h2 { color: var(--uc-ink); font-weight: 700; letter-spacing: -.03em; }
body:not([data-page="home"]) #main .commerce-fitment-card :is(p, .eyebrow, .commerce-small) { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-fitment-card label { color: var(--uc-ink); }
body:not([data-page="home"]) #main .commerce-fitment-card .commerce-field :is(input, textarea) { background: var(--uc-bg); border-color: var(--uc-line); color: var(--uc-ink); }

/* Cart and request forms keep every line item and existing column width. */
body:not([data-page="home"]) #main .commerce-cart-header h2 { color: var(--uc-ink); font-weight: 700; letter-spacing: -.03em; }
body:not([data-page="home"]) #main .commerce-cart-header > a { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-cart-line { background: var(--uc-card); border-color: var(--uc-line); border-radius: 20px; }
body:not([data-page="home"]) #main .commerce-cart-image { background: var(--uc-panel); border-radius: 14px; }
body:not([data-page="home"]) #main .commerce-cart-part h3 { color: var(--uc-ink); font-weight: 700; letter-spacing: -.025em; }
body:not([data-page="home"]) #main :is(.commerce-cart-part > span, .commerce-cart-part > p, .commerce-cart-numbers > span, .commerce-remove) { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-cart-numbers > strong { color: var(--uc-ink); font-weight: 650; letter-spacing: -.03em; }
body:not([data-page="home"]) #main .commerce-remove:hover { color: #b63e3e; }
body:not([data-page="home"]) #main .commerce-summary { background: var(--uc-card); border-color: var(--uc-line); border-radius: 24px; box-shadow: none; }
body:not([data-page="home"]) #main .commerce-summary > h2 { color: var(--uc-ink); font-weight: 700; letter-spacing: -.03em; }
body:not([data-page="home"]) #main :is(.commerce-summary dt, .commerce-summary .commerce-pending, .commerce-summary-trust) { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-summary dd { color: var(--uc-ink); }
body:not([data-page="home"]) #main :is(.commerce-summary .commerce-total, .commerce-summary-trust) { border-color: var(--uc-line); }
body:not([data-page="home"]) #main .commerce-summary .commerce-total :is(dt, dd) { color: var(--uc-ink); }
body:not([data-page="home"]) #main .commerce-summary .commerce-total dd { font-weight: 700; letter-spacing: -.04em; }
body:not([data-page="home"]) #main .commerce-summary-trust > svg { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-back-link { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-back-link:hover { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-cart-callout { background: var(--uc-panel); border-color: var(--uc-line); border-radius: 20px; }
body:not([data-page="home"]) #main .commerce-cart-callout > svg,
body:not([data-page="home"]) #main .commerce-cart-callout a { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-cart-callout h3 { color: var(--uc-ink); font-weight: 700; letter-spacing: -.025em; }
body:not([data-page="home"]) #main .commerce-cart-callout p { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-checkout-notice { background: var(--uc-panel); border-radius: 22px; }
body:not([data-page="home"]) #main .commerce-checkout-notice strong { color: var(--uc-ink); font-weight: 600; }
body:not([data-page="home"]) #main .commerce-checkout-notice p { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-checkout-notice > svg { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-form-section { background: var(--uc-card); border-color: var(--uc-line); border-radius: 24px; }
body:not([data-page="home"]) #main .commerce-form-section h2 { color: var(--uc-ink); font-weight: 700; letter-spacing: -.03em; }
body:not([data-page="home"]) #main .commerce-form-section h2 > span { background: var(--uc-soft); color: var(--uc-blue); border-radius: 50%; }
body:not([data-page="home"]) #main .commerce-form-section .commerce-field :is(input, select, textarea) { background-color: var(--uc-bg); }
body:not([data-page="home"]) #main .commerce-checkout-items h3 { color: var(--uc-ink); font-weight: 700; letter-spacing: -.025em; }
body:not([data-page="home"]) #main .commerce-checkout-items > div { border-color: var(--uc-line); }
body:not([data-page="home"]) #main .commerce-checkout-items img { background: var(--uc-panel); border-radius: 14px; }
body:not([data-page="home"]) #main .commerce-checkout-items strong { color: var(--uc-ink); font-weight: 600; }
body:not([data-page="home"]) #main .commerce-checkout-items small { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-checkout-items > a { color: var(--uc-blue); }

/* Shortlists and comparison tables retain their scrolling and empty states. */
body:not([data-page="home"]) #main .commerce-local-notice { background: transparent; color: var(--uc-muted); border-color: var(--uc-line); }
body:not([data-page="home"]) #main .commerce-local-notice > svg { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-local-notice strong { color: var(--uc-ink); }
body:not([data-page="home"]) #main .commerce-saved-remove { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-saved-remove:hover { color: #b63e3e; }
body:not([data-page="home"]) #main .commerce-saved-footer { border-color: var(--uc-line); }
body:not([data-page="home"]) #main .commerce-saved-footer > a:not(.btn),
body:not([data-page="home"]) #main .commerce-compare-toolbar > a { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-compare-toolbar { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-compare-scroll { background: var(--uc-card); border-color: var(--uc-line); border-radius: 24px; }
body:not([data-page="home"]) #main .commerce-compare-table :is(th, td) { border-color: var(--uc-line); }
body:not([data-page="home"]) #main .commerce-compare-table thead th { background: var(--uc-card); }
body:not([data-page="home"]) #main .commerce-compare-table thead th:first-child { background: var(--uc-panel); }
body:not([data-page="home"]) #main .commerce-compare-table thead :is(h2, h3) { color: var(--uc-ink); font-weight: 700; letter-spacing: -.025em; }
body:not([data-page="home"]) #main .commerce-compare-table thead img { background: var(--uc-panel); border-radius: 16px; }
body:not([data-page="home"]) #main .commerce-compare-price { color: var(--uc-ink); font-weight: 650; letter-spacing: -.035em; }
body:not([data-page="home"]) #main .commerce-compare-table tbody tr:nth-child(even) { background: var(--uc-bg); }
body:not([data-page="home"]) #main .commerce-compare-table tbody th { color: var(--uc-ink); font-weight: 600; }
body:not([data-page="home"]) #main .commerce-compare-table tbody td { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-compare-remove { background: var(--uc-bg); color: var(--uc-dark); border-radius: 50%; }
body:not([data-page="home"]) #main .commerce-compare-remove:hover { background: var(--uc-soft); color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-compare-actions td > a { color: var(--uc-muted); }

/* Local workspace: figures, request drafts, garage and profile forms. */
body:not([data-page="home"]) #main .commerce-account-stats { background: var(--uc-card); border-radius: 24px; }
body:not([data-page="home"]) #main .commerce-account-stats > a { color: var(--uc-ink); border-color: var(--uc-line); }
body:not([data-page="home"]) #main .commerce-account-stats > a:hover { background: var(--uc-panel); }
body:not([data-page="home"]) #main .commerce-account-stats > a > span { background: var(--uc-soft); color: var(--uc-blue); border-radius: 50%; }
body:not([data-page="home"]) #main .commerce-account-stats > a > svg { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-account-stats > a > .ui-icon { width:20px; height:20px; flex:0 0 20px; margin:0; padding:0; border-radius:0; background:transparent; color:var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-account-stats > a > span:not(.ui-icon) > .ui-icon { width:22px; height:22px; }
body:not([data-page="home"]) #main .commerce-account-stats strong { color: var(--uc-ink); font-weight: 700; letter-spacing: -.04em; }
body:not([data-page="home"]) #main .commerce-account-stats p { color: var(--uc-muted); }
body:not([data-page="home"]) #main :is(.commerce-profile-card, .commerce-account-empty) { background: var(--uc-card); border-color: var(--uc-line); border-radius: 24px; }
body:not([data-page="home"]) #main :is(.commerce-profile-card > h2, .commerce-account-empty h3) { color: var(--uc-ink); font-weight: 700; letter-spacing: -.03em; }
body:not([data-page="home"]) #main :is(.commerce-profile-card > p, .commerce-account-empty p, .commerce-clear-profile) { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-account-empty > svg { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-profile-card .commerce-field input { background: var(--uc-bg); }
body:not([data-page="home"]) #main .commerce-draft-card { border-color: var(--uc-line); }
body:not([data-page="home"]) #main .commerce-draft-status { background: var(--uc-panel); color: #41546b; border-radius: 999px; letter-spacing: .015em; font-weight: 500; }
body:not([data-page="home"]) #main .commerce-draft-card h3 { color: var(--uc-ink); font-weight: 650; letter-spacing: -.02em; }
body:not([data-page="home"]) #main .commerce-draft-card p { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-draft-actions > :is(a, button) { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-draft-actions .commerce-remove-draft { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-draft-actions .commerce-remove-draft:hover { color: #b63e3e; }
body:not([data-page="home"]) #main .commerce-account-help { background: var(--uc-panel); color: var(--uc-ink); border-radius: 24px; }
body:not([data-page="home"]) #main .commerce-account-help h3 { color: var(--uc-ink); font-weight: 700; letter-spacing: -.025em; }
body:not([data-page="home"]) #main .commerce-account-help p { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-account-help a { color: var(--uc-blue); }
body:not([data-page="home"]) #main :is(.commerce-account-enquiries, .commerce-garage, .commerce-garage-truck) { border-color: var(--uc-line); }
body:not([data-page="home"]) #main .commerce-garage-truck { background: transparent; }
body:not([data-page="home"]) #main .commerce-garage-icon { color: var(--uc-blue); background: var(--uc-soft); border-radius: 50%; }
body:not([data-page="home"]) #main .commerce-garage-truck h3 { color: var(--uc-ink); font-weight: 700; letter-spacing: -.025em; }
body:not([data-page="home"]) #main :is(.commerce-garage-truck p, .commerce-garage-intro) { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-garage-truck a { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-garage-truck > button:hover { color: #b63e3e; }
body:not([data-page="home"]) #main .commerce-garage-add { background: var(--uc-card); border-color: var(--uc-line); border-radius: 22px; }
body:not([data-page="home"]) #main .commerce-garage-add > summary { color: var(--uc-ink); font-weight: 600; }
body:not([data-page="home"]) #main .commerce-garage-add > summary svg { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-garage-add .commerce-field :is(input, select) { background-color: var(--uc-bg); }

/* Order lookup, local request success and empty states stay light. */
body:not([data-page="home"]) #main :is(.commerce-track-form, .commerce-track-result) { background: var(--uc-card); border-color: var(--uc-line); border-radius: 24px; }
body:not([data-page="home"]) #main .commerce-track-form > label { color: var(--uc-ink); font-weight: 650; letter-spacing: -.02em; }
body:not([data-page="home"]) #main :is(.commerce-track-form > p, .commerce-track-result > p) { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-track-result > h2 { color: var(--uc-ink); font-weight: 700; letter-spacing: -.03em; }
body:not([data-page="home"]) #main :is(.commerce-track-empty > svg, .commerce-empty > svg) { color: var(--uc-blue); }
body:not([data-page="home"]) #main :is(.commerce-track-empty > h2, .commerce-empty h2) { color: var(--uc-ink); font-weight: 700; letter-spacing: -.03em; }
body:not([data-page="home"]) #main :is(.commerce-track-empty > p, .commerce-empty p) { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-track-empty > a { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-tracking-help { background: var(--uc-panel); color: var(--uc-ink); border-radius: 24px; }
body:not([data-page="home"]) #main .commerce-tracking-help h2 { color: var(--uc-ink); font-weight: 700; letter-spacing: -.03em; }
body:not([data-page="home"]) #main .commerce-tracking-help :is(p, li, .eyebrow) { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-tracking-help li svg,
body:not([data-page="home"]) #main .commerce-tracking-help > a:not(.btn) { color: var(--uc-blue); }
body:not([data-page="home"]) #main .commerce-request-timeline > div > span { background: var(--uc-panel); color: var(--uc-muted); border-radius: 50%; }
body:not([data-page="home"]) #main .commerce-request-timeline > div.complete > span { background: var(--uc-blue); color: #fff; }
body:not([data-page="home"]) #main .commerce-request-timeline > div:not(:last-child)::before { background: var(--uc-line); }
body:not([data-page="home"]) #main .commerce-request-timeline strong { color: var(--uc-ink); font-weight: 600; }
body:not([data-page="home"]) #main .commerce-request-timeline p { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-track-parts,
body:not([data-page="home"]) #main .commerce-track-parts > div:last-child { border-color: var(--uc-line); }
body:not([data-page="home"]) #main .commerce-track-parts > div { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-track-parts strong { color: var(--uc-ink); }
body:not([data-page="home"]) #main .commerce-confirmation-mark { background: var(--uc-soft); color: var(--uc-blue); border-radius: 50%; }
body:not([data-page="home"]) #main .commerce-confirmation > h2 { color: var(--uc-ink); font-weight: 700; letter-spacing: -.03em; }
body:not([data-page="home"]) #main .commerce-confirmation > p { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-confirmation-facts { background: var(--uc-card); border-color: var(--uc-line); border-radius: 24px; }
body:not([data-page="home"]) #main .commerce-confirmation-facts > div + div { border-color: var(--uc-line); }
body:not([data-page="home"]) #main .commerce-confirmation-facts span { color: var(--uc-muted); }
body:not([data-page="home"]) #main .commerce-confirmation-facts strong { color: var(--uc-ink); font-weight: 650; }

/* Keep disabled garage/model fields distinct from their surrounding forms. */
body:not([data-page="home"]) #main .commerce-field :is(input, select, textarea):disabled {
  background-color: var(--uc-panel);
  border-color: var(--uc-line);
  color: #687383;
  opacity: 1;
}

/* Give filters a useful inner width without narrowing the wider result area.
   The existing drawer still owns visibility and stacking below 768px. */
@media (min-width: 768px) {
  body:not([data-page="home"]) #main .commerce-catalog-layout {
    grid-template-columns: var(--ui-sidebar-width) minmax(0, 1fr);
    column-gap: var(--ui-column-gap);
  }
  body:not([data-page="home"]) #main .commerce-filter-panel {
    min-width: 0;
    width: 100%;
  }
}

/* The tablet sidebar leaves room for one full-size result, not two narrow cards. */
@media (min-width: 768px) and (max-width: 991px) {
  body[data-page="catalog"] #main .commerce-catalog .commerce-results > .commerce-product-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Compact state retains the existing filter drawer and all column breakpoints. */
@media (max-width: 767px) {
  body:not([data-page="home"]) #main .commerce-filter-panel.is-open { background: var(--uc-card); border-color: var(--uc-line); border-radius: 24px; }
}
@media (max-width: 599px) {
  body:not([data-page="home"]) #main .commerce-catalog-search .commerce-search-input > :is(svg, .icon) + input { padding-left: 48px; }
  body:not([data-page="home"]) #main :is(.commerce-catalog-search, .commerce-filter-panel,
    .commerce-summary, .commerce-fitment-card, .commerce-form-section,
    .commerce-profile-card, .commerce-account-empty, .commerce-account-help,
    .commerce-track-form, .commerce-track-result, .commerce-tracking-help) { border-radius: 20px; }
  body:not([data-page="home"]) #main .commerce-cart-line { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-page="home"]) #main .commerce-product-grid .product-card { transition: none; }
}
@media(max-width:420px){body:not([data-page="home"]) #main .commerce-image-label span:last-child{font-size:10px;letter-spacing:0;line-height:1.5;padding:8px 10px;max-width:none;white-space:nowrap;text-align:center}}
/* Keep disclosure state cues after switching to external icon masks. */
body:not([data-page="home"]) #main .commerce-accordion[open] summary > .ui-icon,
body:not([data-page="home"]) #main .commerce-garage-add[open] > summary > .ui-icon{transform:rotate(45deg)}