/* Reference storefront skin. It intentionally replaces the previous marketing-led
   shell with the compact, catalogue-first layout used by the supplied reference. */
.reference-shell {
  --reference-orange: var(--color-action);
  --reference-orange-dark: var(--color-action-hover);
  --reference-blue: var(--color-link);
  --reference-blue-dark: var(--color-action-hover);
  --reference-ink: var(--color-text);
  --reference-muted: var(--color-text-muted);
  --reference-line: var(--color-border);
  --reference-soft: var(--color-surface-info);
  --reference-yellow: var(--color-status-pending-bg);
  --reference-footer: var(--color-surface-accent);
  --reference-page: var(--shop-page-width);
  /* Brand palette from the owner-provided MOEVE third-party manual.
     Legacy token names remain compatible with existing components. */
  --ink: var(--reference-ink);
  --blue: var(--reference-blue);
  --action: var(--reference-orange);
  --action-hover: var(--reference-orange-dark);
  --line: var(--reference-line);
  --muted: var(--reference-muted);
  --pale: var(--reference-soft);
  --yellow: var(--reference-yellow);
  background: var(--color-surface-page);
  color: var(--reference-ink);
  font-family: var(--shop-font-sans);
}

.reference-shell .page-width {
  width: var(--reference-page);
  max-width: var(--reference-page);
}

.reference-shell a { color: inherit; }
.reference-shell h1,
.reference-shell h2,
.reference-shell h3,
.reference-shell h4 { color: var(--reference-ink); font-weight: 700; letter-spacing: -.025em; }
.reference-shell .button {
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid var(--reference-orange);
  border-radius: 3px;
  background: var(--reference-orange);
  color: var(--color-surface);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 0 var(--color-text);
}
.reference-shell .button:hover { border-color: var(--reference-orange-dark); background: var(--reference-orange-dark); }
.reference-shell .button.button-secondary { border-color: var(--color-border-secondary); background: var(--color-surface); color: var(--reference-ink); box-shadow: 0 1px 0 var(--color-shadow-secondary); }
.reference-shell .button.button-secondary:hover { background: var(--reference-soft); }
.reference-shell .text-link { color: var(--reference-blue); }

/* Header */
.reference-shell .storefront-utility {
  min-height: 34px;
  border-bottom: 1px solid var(--color-retained-e1e4e7);
  background: var(--color-surface);
  color: var(--reference-ink);
  font-size: 12px;
  font-weight: 600;
}
.reference-shell .storefront-utility-inner {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.reference-shell .storefront-utility nav { display: flex; align-items: center; gap: 28px; }
.reference-shell .storefront-utility a:hover { color: var(--reference-orange); text-decoration: underline; }
.reference-shell .site-header {
  width: var(--reference-page);
  min-height: 148px;
  height: auto;
  display: grid;
  grid-template-columns: 270px minmax(380px, 1fr) 210px;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 32px;
  padding: 18px 0 20px;
  border: 0;
}
.reference-shell .site-header .storefront-identity { grid-column: 1; grid-row: 1; justify-self: start; }
.reference-shell .site-header .brand strong {
  display: block;
  color: var(--reference-ink);
  font-size: 42px;
  line-height: .92;
  letter-spacing: -2.8px;
}
.reference-shell .site-header .brand strong span { color: var(--reference-orange); }
.reference-shell .site-header .distributor-brand { margin-top: 10px; color: var(--reference-muted); }
.reference-shell .site-header .distributor-label { font-size: 10px; }
.reference-shell .site-header .distributor-logo-space { padding: 5px 0 0 10px; }
.reference-shell .site-header .distributor-logo-space img { width: 90px; }
.reference-shell .header-search {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 500px;
  justify-self: center;
  position: relative;
  display: flex;
}
.reference-shell .header-search input {
  width: 100%;
  min-height: 47px;
  padding: 10px 62px 10px 15px;
  border: 1px solid var(--color-retained-2f3438);
  border-radius: 3px;
  background: var(--color-surface);
  color: var(--reference-ink);
  font-size: 16px;
  font-weight: 600;
}
.reference-shell .header-search input::placeholder { color: var(--color-retained-71777d); opacity: 1; }
.reference-shell .header-search input:focus { border-color: var(--reference-blue); box-shadow: 0 0 0 3px var(--color-retained-047dba2b); }
.reference-shell .header-search button {
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 47px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0 3px 3px 0;
  background: var(--reference-orange);
  color: var(--color-surface);
}
.reference-shell .header-search button:hover { background: var(--reference-orange-dark); }
.reference-shell .site-header .site-nav { display: none; }
.reference-shell .site-header .nav-toggle { display: none; }
.reference-shell .header-actions {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.reference-shell .header-actions .language-menu { display: none; }
.reference-shell .header-login-menu > summary,
.reference-shell .header-account > summary,
.reference-shell .site-header .header-cart {
  min-height: 47px;
  border: 1px solid var(--color-retained-d7dce0);
  border-radius: 3px;
  background: var(--color-surface);
  color: var(--reference-ink);
}
.reference-shell .header-login-menu > summary,
.reference-shell .header-account > summary { padding: 10px 12px; font-size: 12px; font-weight: 700; }
.reference-shell .header-login-menu > summary:hover,
.reference-shell .header-account > summary:hover,
.reference-shell .site-header .header-cart:hover { border-color: var(--reference-orange); color: var(--reference-orange); }
.reference-shell .header-login-panel { border-radius: 3px; box-shadow: 0 8px 22px var(--color-retained-1f293726); }
.reference-shell .site-header .header-cart { position: relative; min-width: 84px; justify-content: center; padding: 10px 13px; }
.reference-shell .site-header .header-cart b { position: absolute; top: -8px; right: -7px; min-width: 21px; height: 21px; background: var(--reference-orange); color: var(--color-surface); }

/* Category landing */
.reference-shell .reference-category-browser,
.reference-shell .reference-list { padding-top: 4px; }
.reference-shell .reference-breadcrumbs {
  min-height: 42px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 0 14px;
  color: var(--reference-muted);
  font-size: 14px;
}
.reference-shell .reference-breadcrumbs a { color: var(--reference-blue); font-weight: 700; }
.reference-shell .reference-breadcrumbs strong { color: var(--reference-ink); }
.reference-shell .reference-category-layout { display: grid; grid-template-columns: 294px minmax(0, 1fr); gap: 28px; align-items: start; }
.reference-shell .reference-category-tree {
  overflow: hidden;
  border: 1px solid var(--color-retained-d5d8dc);
  background: var(--color-surface);
}
.reference-shell .reference-category-tree > header {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  border-bottom: 1px solid var(--color-retained-d5d8dc);
  background: var(--color-retained-e5e6e8);
  color: var(--color-text);
  font-size: 16px;
}
.reference-shell .reference-category-tree details { border-bottom: 1px solid var(--color-retained-e1e2e4); }
.reference-shell .reference-category-tree details:last-child { border-bottom: 0; }
.reference-shell .reference-category-tree summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 0 12px;
  color: var(--color-retained-181a1d);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.reference-shell .reference-category-tree summary::-webkit-details-marker { display: none; }
.reference-shell .reference-category-tree summary::before { content: "›"; margin-right: 7px; color: var(--color-retained-6c7378); font-size: 18px; }
.reference-shell .reference-category-tree details[open] > summary::before { content: "⌄"; }
.reference-shell .reference-category-tree summary span:first-of-type { min-width: 0; flex: 1; }
.reference-shell .reference-category-tree summary small,
.reference-shell .reference-category-tree details a small {
  min-width: 32px;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--color-retained-f0f1f2);
  color: var(--color-retained-737a7f);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}
.reference-shell .reference-category-tree details > div { padding: 0 8px 7px 25px; }
.reference-shell .reference-category-tree details a {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 6px;
  color: var(--color-retained-343b40);
  font-size: 13px;
}
.reference-shell .reference-category-tree details a:hover,
.reference-shell .reference-category-tree details a[aria-current="page"] { background: var(--color-surface-info); color: var(--reference-orange); }
.reference-shell .reference-category-tree .reference-category-nested {
  border-bottom: 0;
}
.reference-shell .reference-category-tree .reference-category-nested > summary {
  min-height: 31px;
  padding-left: 4px;
  font-size: 13px;
  font-weight: 600;
}
.reference-shell .reference-category-tree .reference-category-nested > div {
  padding-left: 17px;
}
.reference-shell .reference-category-tree .reference-category-disabled {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 6px;
  color: var(--color-retained-7b8287);
  font-size: 13px;
}
.reference-shell .reference-category-tree .reference-category-disabled > span:first-child {
  min-width: 0;
  flex: 1;
}
.reference-shell .reference-category-content { min-width: 0; }
.reference-shell .reference-category-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.reference-shell .reference-category-heading .reference-quick-search { margin-bottom: 13px; }
.reference-shell .reference-eyebrow {
  display: block;
  color: var(--color-text-caption);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.reference-shell .reference-category-content h1,
.reference-shell .reference-list-heading h1 { margin: 8px 0 20px; color: var(--reference-ink); font-size: 31px; line-height: 1.1; }
.reference-shell .reference-category-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.reference-shell .reference-category-tile {
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 10px;
  border: 1px solid var(--color-retained-dfe1e3);
  background: var(--color-surface);
  color: var(--color-retained-202326);
  text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.reference-shell .reference-category-tile:hover { border-color: var(--reference-blue); box-shadow: 0 3px 12px var(--color-retained-047dba1c); }
.reference-shell .reference-category-tile strong { max-width: 24ch; font-size: 14px; line-height: 1.25; }
.reference-shell .reference-category-tile small { color: var(--reference-muted); font-size: 11px; }
.reference-shell .reference-category-tile.is-product-teaser {
  min-height: 82px;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px;
  text-align: left;
}
.reference-shell .reference-category-tile.is-product-teaser > img { width: 68px; height: 70px; object-fit: contain; }
.reference-shell .reference-category-tile.is-product-teaser > div { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.reference-shell .reference-category-tile.is-product-teaser strong { color: var(--reference-blue); font-size: 12px; line-height: 1.2; }
.reference-shell .reference-category-tile.is-product-teaser small { font-size: 10px; }
.reference-shell .reference-unavailable-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.reference-shell .reference-category-tile.is-unavailable {
  position: relative;
  min-height: 102px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--color-surface);
  color: var(--reference-ink);
  cursor: default;
  text-align: left;
}
.reference-shell .reference-category-tile.is-unavailable:hover { border-color: var(--color-retained-dfe1e3); box-shadow: none; }
.reference-shell .reference-category-tile.is-unavailable > img { width: 76px; height: 82px; object-fit: contain; background: var(--color-surface); }
.reference-shell .reference-category-tile.is-unavailable > div { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.reference-shell .reference-category-tile.is-unavailable strong { color: var(--reference-blue); font-size: 12px; line-height: 1.2; }
.reference-shell .reference-category-tile.is-unavailable small { color: var(--reference-muted); font-size: 10px; }
.reference-shell .reference-category-tile.is-unavailable span { color: var(--reference-orange); font-size: 10px; font-weight: 700; }

/* Listing */
.reference-shell .reference-list-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding-bottom: 9px; }
.reference-shell .reference-list-heading h1 { margin-bottom: 8px; }
.reference-shell .catalog-result-count { margin: 0; color: var(--reference-muted); font-size: 13px; }
.reference-shell .reference-quick-search { width: 315px; flex: none; }
.reference-shell .reference-quick-search > span { display: block; margin-bottom: 5px; color: var(--reference-muted); font-size: 11px; }
.reference-shell .reference-quick-search input { min-height: 38px; border: 1px solid var(--color-retained-555c61); border-radius: 2px; background: var(--color-surface); }
.reference-shell .catalog-section { padding: 5px 0 45px; border: 0; }
.reference-shell .catalog-toolbar.reference-list-toolbar {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 10px;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--reference-line);
  border-bottom: 1px solid var(--reference-line);
  border-radius: 0;
  background: transparent;
}
.reference-shell .reference-list-toolbar label > span { margin: 0; color: var(--reference-muted); font-size: 11px; font-weight: 600; }
.reference-shell .reference-list-toolbar .catalog-sort { display: flex; align-items: center; gap: 8px; width: 245px; }
.reference-shell .reference-list-toolbar .catalog-sort select { min-height: 38px; border: 1px solid var(--color-retained-b9c0c5); border-radius: 2px; background: var(--color-surface); font-size: 13px; }
.reference-shell .reference-stock { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.reference-shell .reference-stock input { width: 16px; min-height: 16px; }
.reference-shell .reference-moc { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--color-retained-676f75); font-size: 13px; }
.reference-shell .reference-moc i { width: 29px; height: 18px; display: inline-block; border-radius: 12px; background: var(--color-retained-878b8e); position: relative; }
.reference-shell .reference-moc i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-surface); }
.reference-shell .catalog-view-toggle { display: inline-flex; gap: 2px; margin-left: 8px; border: 0; }
.reference-shell .catalog-view-toggle button { width: 35px; height: 35px; display: grid; place-items: center; border: 0; background: var(--color-surface); color: var(--color-retained-737b80); }
.reference-shell .catalog-view-toggle button.is-active { color: var(--reference-orange); }
.reference-shell .catalog-mobile-filters { display: none; }
.reference-shell .reference-pack-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.reference-shell .reference-pack-chips a { min-height: 39px; display: inline-flex; align-items: center; padding: 7px 16px; border: 1px solid var(--color-retained-d5d9dc); border-radius: 3px; background: var(--color-surface); color: var(--color-retained-23282c); font-size: 13px; font-weight: 700; }
.reference-shell .reference-pack-chips a:hover,
.reference-shell .reference-pack-chips a[aria-current="page"] { border-color: var(--reference-orange); color: var(--reference-orange); }
.reference-shell .catalog-layout { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 18px; align-items: start; }
.reference-shell .catalog-sidebar { top: 10px; padding: 0 10px 0 0; border-top: 1px solid var(--reference-line); }
.reference-shell .catalog-sidebar-head { min-height: 42px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--reference-line); color: var(--reference-ink); }
.reference-shell .catalog-sidebar-head button { border: 0; background: none; color: var(--reference-muted); font-size: 22px; }
.reference-shell .catalog-filter-section { border-bottom: 1px solid var(--reference-line); }
.reference-shell .catalog-filter-section summary { min-height: 38px; padding: 7px 2px; color: var(--reference-ink); font-size: 13px; }
.reference-shell .catalog-filter-options { max-height: 230px; padding: 0 4px 5px 0; }
.reference-shell .catalog-filter-option { grid-template-columns: 16px minmax(0,1fr) auto; min-height: 26px; gap: 6px; padding: 2px 0; color: var(--reference-ink); font-size: 12px; }
.reference-shell .catalog-filter-option > span { font-size: 12px; }
.reference-shell .catalog-filter-option input { width: 14px; min-height: 14px; }
.reference-shell .catalog-filter-option:has(input:checked) { background: var(--color-retained-fff5ef); color: var(--reference-orange); }
.reference-shell .catalog-filter-option small { color: var(--reference-muted); font-size: 10px; }
.reference-shell .catalog-results { min-width: 0; }
.reference-shell .reference-filter-panels { display: grid; gap: 8px; margin-bottom: 12px; }
.reference-shell .reference-filter-panel { border: 1px solid var(--color-retained-d3dfef); border-radius: 3px; background: var(--reference-soft); }
.reference-shell .reference-filter-panel summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; color: var(--reference-ink); font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; }
.reference-shell .reference-filter-panel summary::-webkit-details-marker { display: none; }
.reference-shell .reference-filter-panel summary::before { content: "⌄"; margin-right: 10px; color: var(--reference-blue); }
.reference-shell .reference-filter-panel summary b { display: none; }
.reference-shell .reference-filter-panel > div { display: flex; flex-wrap: wrap; gap: 6px 15px; padding: 0 18px 13px; }
.reference-shell .reference-filter-panel a { color: var(--reference-blue); font-size: 12px; }
.reference-shell .reference-filter-panel-content { align-items: flex-start; }
.reference-shell .reference-filter-parameter-groups { display: grid !important; gap: 12px !important; }
.reference-shell .reference-filter-parameter-groups section { display: grid; gap: 5px; width: 100%; }
.reference-shell .reference-filter-parameter-groups section > strong { color: var(--reference-ink); font-size: 12px; }
.reference-shell .reference-filter-parameter-groups section > div { display: flex; flex-wrap: wrap; gap: 6px 15px; }
.reference-shell .reference-filter-empty { color: var(--reference-muted); font-size: 12px; }
.reference-shell .product-grid.catalog-list-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.reference-shell .product-grid.catalog-list-view .product-card {
  min-height: 224px;
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--color-retained-dce0e3);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
}
.reference-shell .product-grid.catalog-list-view .product-card:hover { border-color: var(--color-retained-b7c6d6); box-shadow: 0 3px 12px var(--color-retained-00465614); }
.reference-shell .product-grid.catalog-list-view .product-card-media { min-height: 224px; height: auto; border-right: 1px solid var(--color-retained-e1e3e5); border-bottom: 0; border-radius: 0; background: var(--color-surface); }
.reference-shell .product-grid.catalog-list-view .product-card-media img { padding: 16px 25px; }
.reference-shell .product-grid.catalog-list-view .product-card .image-note { bottom: 8px; left: 10px; right: 10px; padding: 4px; border-radius: 0; background: var(--color-retained-ffffffdc); color: var(--reference-muted); font-size: 9px; }
.reference-shell .product-grid.catalog-list-view .product-card-body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 180px; grid-template-rows: auto auto auto 1fr auto; gap: 0 15px; padding: 13px 15px 12px; }
.reference-shell .product-grid.catalog-list-view .product-article { grid-column: 1; min-height: 18px; color: var(--reference-orange); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.reference-shell .product-grid.catalog-list-view .product-card h3 { grid-column: 1; min-height: 0; margin: 1px 0 7px; font-size: 18px; line-height: 1.2; }
.reference-shell .product-grid.catalog-list-view .product-card h3 a { color: var(--reference-blue); }
.reference-shell .product-grid.catalog-list-view .product-card h3 a:hover { color: var(--reference-orange); text-decoration: underline; }
.reference-shell .product-grid.catalog-list-view .product-card-description { grid-column: 1; display: -webkit-box; max-height: 45px; margin: 0 0 7px; overflow: hidden; color: var(--color-retained-5d666c); font-size: 12px; line-height: 1.35; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.reference-shell .product-grid.catalog-list-view .product-card-specs { grid-column: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.reference-shell .product-grid.catalog-list-view .product-card-specs div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 8px 3px 0; border-top: 1px dotted var(--color-retained-cbd0d4); font-size: 11px; }
.reference-shell .product-grid.catalog-list-view .product-card-specs dt { color: var(--color-retained-657078); }
.reference-shell .product-grid.catalog-list-view .product-card-specs dd { margin: 0; font-weight: 700; }
.reference-shell .product-grid.catalog-list-view .product-pack { grid-column: 1; margin-top: 4px; color: var(--reference-muted); font-size: 11px; }
.reference-shell .product-grid.catalog-list-view .product-commerce { grid-column: 2; grid-row: 1 / -1; min-width: 0; align-self: end; display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 10px 0 0 13px; border-top: 0; border-left: 1px solid var(--color-retained-e0e3e5); }
.reference-shell .product-grid.catalog-list-view .product-commerce > strong { color: var(--reference-ink); font-size: 18px; line-height: 1.2; }
.reference-shell .product-grid.catalog-list-view .product-commerce .price-caption { color: var(--reference-muted); font-size: 10px; }
.reference-shell .product-grid.catalog-list-view .product-order-controls { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 5px; margin-top: 7px; }
.reference-shell .product-grid.catalog-list-view .quantity-control { display: grid; grid-template-columns: 18px 24px 18px; height: 34px; border: 1px solid var(--color-retained-cfd4d8); }
.reference-shell .product-grid.catalog-list-view .quantity-control button { width: 18px; padding: 0; border: 0; background: var(--color-retained-f2f3f4); color: var(--reference-ink); }
.reference-shell .product-grid.catalog-list-view .quantity-control input { width: 24px; min-height: 32px; padding: 0; border: 0; border-right: 1px solid var(--color-retained-cfd4d8); border-left: 1px solid var(--color-retained-cfd4d8); border-radius: 0; text-align: center; font-size: 12px; }
.reference-shell .product-grid.catalog-list-view .product-order-button { width: 100%; min-height: 34px; padding: 7px 8px; font-size: 11px; }
body.shop-public.reference-shell .product-order-button,
body.shop-public.reference-shell [data-catalog-submit] {
  border-color: var(--reference-orange) !important;
  background: var(--reference-orange) !important;
  color: var(--color-surface) !important;
  box-shadow: 0 2px 0 var(--color-text) !important;
}
body.shop-public.reference-shell .product-order-button:hover,
body.shop-public.reference-shell [data-catalog-submit]:hover {
  border-color: var(--reference-orange-dark) !important;
  background: var(--reference-orange-dark) !important;
}
.reference-shell .pagination { margin: 18px 0 0; }

/* Product detail */
.reference-shell[data-shop-page="product"] .breadcrumbs { min-height: 43px; padding: 9px 0 14px; color: var(--reference-muted); }
.reference-shell[data-shop-page="product"] .breadcrumbs a { color: var(--reference-blue); font-weight: 700; }
.reference-shell[data-shop-page="product"] .product-page { display: grid; grid-template-columns: 52% 48%; grid-template-areas: "image summary" "image buy" "tabs tabs" "evidence evidence"; align-items: start; padding-bottom: 0; border: 1px solid var(--color-retained-e1e3e5); background: var(--color-surface); }
.reference-shell[data-shop-page="product"] .product-image { grid-area: image; width: 100%; height: 590px; border-right: 1px solid var(--color-retained-dfe2e5); border-radius: 0; background: var(--color-surface); }
.reference-shell[data-shop-page="product"] .product-image > img { width: 100%; height: 100%; padding: 30px 40px 55px; object-fit: contain; }
.reference-shell[data-shop-page="product"] .product-thumbnail { position: absolute; left: 20px; bottom: 16px; width: 66px; height: 66px; padding: 5px; border: 1px solid var(--color-retained-d9dde1); background: var(--color-surface); }
.reference-shell[data-shop-page="product"] .product-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.reference-shell[data-shop-page="product"] .product-summary { grid-area: summary; padding: 24px 22px 10px; }
.reference-shell[data-shop-page="product"] .product-summary h1 { margin: 0 0 24px; color: var(--reference-ink); font-size: 27px; line-height: 1.12; }
.reference-shell[data-shop-page="product"] .product-meta { margin-bottom: 12px; }
.reference-shell[data-shop-page="product"] .product-meta .product-article { color: var(--reference-orange); font-size: 18px; font-weight: 700; }
.reference-shell[data-shop-page="product"] .product-meta p { display: none; }
.reference-shell[data-shop-page="product"] .product-summary-description { margin: 0 0 18px; color: var(--color-text); font-size: 14px; line-height: 1.35; }
.reference-shell[data-shop-page="product"] .product-summary .tag-list { display: none; }
.reference-shell[data-shop-page="product"] .buy-panel { grid-area: buy; margin: 0; padding: 0 22px 18px; border: 0; border-radius: 0; box-shadow: none; }
.reference-shell[data-shop-page="product"] .product-packages { margin: 0 0 14px; padding-top: 13px; border-top: 1px dotted var(--color-retained-c9cdd0); }
.reference-shell[data-shop-page="product"] .product-packages-label { margin: 0 0 7px; color: var(--reference-muted); font-size: 11px; font-weight: 700; }
.reference-shell[data-shop-page="product"] .product-package-options { display: flex; flex-wrap: wrap; gap: 6px; }
.reference-shell[data-shop-page="product"] .product-package-option { min-height: 34px; display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--color-retained-d5dadd); border-radius: 3px; background: var(--color-surface); color: var(--reference-ink); font-size: 12px; font-weight: 700; }
.reference-shell[data-shop-page="product"] .product-package-option[aria-current="page"] { border-color: var(--reference-orange); color: var(--reference-orange); }
.reference-shell[data-shop-page="product"] .product-price { display: inline-block; margin: 0; color: var(--reference-ink); font-size: 26px; }
.reference-shell[data-shop-page="product"] .price-caption { display: inline-block; margin-left: 10px; color: var(--reference-muted); font-size: 12px; }
.reference-shell[data-shop-page="product"] .buy-panel > .form-note { display: block; margin: 8px 0 4px; color: var(--reference-muted); font-size: 11px; }
.reference-shell[data-shop-page="product"] .buy-panel .product-order-controls { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 7px; }
.reference-shell[data-shop-page="product"] .buy-panel .quantity-control { display: grid; grid-template-columns: 20px 24px 20px; height: 38px; border: 1px solid var(--color-retained-cfd4d8); }
.reference-shell[data-shop-page="product"] .buy-panel .quantity-control button { width: 20px; padding: 0; border: 0; background: var(--color-retained-f3f4f5); }
.reference-shell[data-shop-page="product"] .buy-panel .quantity-control input { width: 24px; min-height: 36px; padding: 0; border: 0; border-right: 1px solid var(--color-retained-cfd4d8); border-left: 1px solid var(--color-retained-cfd4d8); border-radius: 0; text-align: center; }
.reference-shell[data-shop-page="product"] .buy-panel .product-order-button { min-height: 38px; }
.reference-shell[data-shop-page="product"] .product-inquiry,
.reference-shell[data-shop-page="product"] .product-order-terms,
.reference-shell[data-shop-page="product"] .buy-panel > .text-link:not(.product-inquiry) { display: none; }
.reference-shell[data-shop-page="product"] .product-detail-tabs { grid-area: tabs; display: flex; gap: 0; margin-top: 0; border-top: 1px solid var(--color-retained-dfe2e5); border-bottom: 1px solid var(--color-retained-dfe2e5); }
.reference-shell[data-shop-page="product"] .product-detail-tabs a { min-height: 50px; display: inline-flex; align-items: center; padding: 0 18px; border-right: 1px solid var(--color-retained-dfe2e5); color: var(--reference-blue); font-size: 13px; font-weight: 700; }
.reference-shell[data-shop-page="product"] .product-detail-tabs a:first-child { color: var(--color-text); background: var(--color-surface); }
.reference-shell[data-shop-page="product"] .product-detail-tabs a:hover { color: var(--reference-orange); background: var(--color-surface-info); }
.reference-shell[data-shop-page="product"] .product-evidence { grid-area: evidence; padding: 34px 38px 42px; }
.reference-shell[data-shop-page="product"] .product-detail-section { padding: 0 0 24px; border-bottom: 1px solid var(--color-retained-e1e3e5); }
.reference-shell[data-shop-page="product"] .product-detail-section + .product-detail-section { padding-top: 26px; }
.reference-shell[data-shop-page="product"] .product-detail-section h2 { margin: 0 0 22px; color: var(--color-text); font-size: 18px; }
.reference-shell[data-shop-page="product"] .product-detail-section p { color: var(--color-retained-5b656b); font-size: 14px; line-height: 1.5; }
.reference-shell[data-shop-page="product"] .spec-list { grid-template-columns: 1fr 1fr; }
.reference-shell[data-shop-page="product"] .spec-list div { padding: 8px 12px; border-bottom: 1px dotted var(--color-retained-cbd0d4); font-size: 14px; }

/* Cart and checkout */
.reference-shell[data-shop-page="cart"] .page-intro,
.reference-shell[data-shop-page="checkout"] .page-intro { padding: 20px 0 13px; }
.reference-shell[data-shop-page="cart"] .page-intro h1,
.reference-shell[data-shop-page="checkout"] .page-intro h1 { margin: 7px 0 9px; font-size: 31px; }
.reference-shell .cart-intro-note,
.reference-shell .checkout-intro > p { color: var(--reference-muted); font-size: 13px; }
.reference-shell .reference-order-progress,
.reference-shell .checkout-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--reference-line); border-bottom: 1px solid var(--reference-line); }
.reference-shell .reference-order-progress li,
.reference-shell .checkout-progress li { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-right: 1px solid var(--reference-line); color: var(--reference-muted); font-size: 11px; font-weight: 700; }
.reference-shell .reference-order-progress li:first-child,
.reference-shell .checkout-progress li:first-child { border-left: 1px solid var(--reference-line); }
.reference-shell .reference-order-progress li[aria-current="step"],
.reference-shell .checkout-progress li:first-child { background: var(--color-surface-info); color: var(--reference-ink); }
.reference-shell .reference-order-progress b,
.reference-shell .checkout-progress b { width: 25px; height: 25px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--color-retained-c4d0e5); color: var(--color-surface); font-size: 13px; }
.reference-shell .reference-order-progress li[aria-current="step"] b,
.reference-shell .checkout-progress li:first-child b { background: var(--reference-orange); }
.reference-shell[data-shop-page="cart"] .two-column,
.reference-shell[data-shop-page="checkout"] .checkout-layout { gap: 20px; padding-bottom: 52px; }
.reference-shell .summary-card,
.reference-shell .form-card,
.reference-shell .panel { border: 1px solid var(--color-border); border-radius: 0; background: var(--color-surface); box-shadow: none; }
.reference-shell .summary-card { top: 12px; }
.reference-shell[data-shop-page="checkout"] .checkout-layout { grid-template-columns: minmax(0, 1fr) 300px; }
.reference-shell .checkout-section,
.reference-shell .checkout-identity { border: 1px solid var(--color-retained-d8e3f2); border-radius: 0; background: var(--color-surface); }
.reference-shell .checkout-section-heading,
.reference-shell .checkout-section > legend { background: var(--color-retained-edf3fb); color: var(--reference-ink); }
.reference-shell .checkout-section-heading h2,
.reference-shell .checkout-section > legend { font-size: 15px; }
.reference-shell .checkout-number { color: var(--reference-blue); }
.reference-shell .checkout-section input,
.reference-shell .checkout-section select,
.reference-shell .checkout-section textarea { min-height: 39px; border: 1px solid var(--color-retained-cfd5da); border-radius: 2px; background: var(--color-surface); }
.reference-shell .checkout-section label > span { color: var(--color-retained-697279); font-size: 11px; }
.reference-shell .checkout-account { background: var(--color-retained-fff9df); border: 1px solid var(--color-retained-f0e2a4); border-radius: 0; }
.reference-shell .checkout-actions .button { min-width: 180px; }
.reference-shell[data-shop-page="checkout"] .state-box[data-manual-checkout-state],
.reference-shell[data-shop-page="checkout"] .state-box[data-manual-checkout-state].error {
  min-height: 180px;
  border: 1px solid var(--color-retained-f0e2a4);
  border-radius: 0;
  background: var(--color-retained-fff9df);
  color: var(--reference-ink);
}

/* Full cart: the reference presents a compact table before the checkout form. */
.reference-shell[data-shop-page="cart"] .two-column { display: block; }
.reference-shell[data-shop-page="cart"] [data-cart-summary] { display: none !important; }
.reference-shell .reference-cart-table { overflow-x: auto; border: 1px solid var(--color-retained-7b858c); background: var(--color-surface); }
.reference-shell .reference-cart-header,
.reference-shell .reference-cart-row { min-width: 840px; display: grid; grid-template-columns: 34px 105px 116px minmax(235px, 1fr) 112px 112px 105px 34px; align-items: stretch; }
.reference-shell .reference-cart-header { min-height: 46px; background: var(--color-text); color: var(--color-surface); font-size: 10px; font-weight: 700; }
.reference-shell .reference-cart-header > span { display: flex; align-items: center; padding: 7px 8px; border-right: 1px solid var(--color-retained-899198); }
.reference-shell .reference-cart-row { min-height: 70px; border-top: 1px solid var(--color-retained-d7dce0); background: var(--color-retained-fff7d1); color: var(--color-text); font-size: 12px; }
.reference-shell .reference-cart-row:nth-child(odd) { background: var(--color-surface); }
.reference-shell .reference-cart-row > * { min-width: 0; display: flex; align-items: center; padding: 8px; border-right: 1px solid var(--color-retained-d7dce0); }
.reference-shell .reference-cart-row .reference-cart-check { justify-content: center; }
.reference-shell .reference-cart-row .reference-cart-check input { width: 15px; min-height: 15px; accent-color: var(--color-retained-737b80); }
.reference-shell .reference-cart-code,
.reference-shell .reference-cart-brand { font-weight: 700; }
.reference-shell .reference-cart-title { display: block; }
.reference-shell .reference-cart-title h3 { margin: 0 0 3px; font-size: 13px; line-height: 1.25; }
.reference-shell .reference-cart-title h3 a { color: var(--reference-orange); }
.reference-shell .reference-cart-title p { margin: 0; color: var(--reference-muted); font-size: 10px; }
.reference-shell .reference-cart-unit,
.reference-shell .reference-cart-total { justify-content: flex-end; text-align: right; }
.reference-shell .reference-cart-total .order-line-price { font-size: 12px; }
.reference-shell .reference-cart-quantity { justify-content: center; }
.reference-shell .reference-cart-quantity .order-quantity { height: 32px; border-radius: 0; }
.reference-shell .reference-cart-quantity .order-quantity button { width: 23px; height: 30px; }
.reference-shell .reference-cart-quantity .order-quantity input { width: 34px !important; height: 30px; }
.reference-shell .reference-cart-remove { width: 32px; margin: 0; padding: 0 !important; justify-content: center; border-right: 0 !important; }
.reference-shell .reference-cart-summary { display: flex; justify-content: flex-end; gap: 45px; min-height: 67px; align-items: center; padding: 10px 16px; border: 1px solid var(--color-retained-7b858c); border-top: 0; background: var(--color-retained-f5f7fa); color: var(--reference-ink); }
.reference-shell .reference-cart-summary strong:last-child { color: var(--reference-orange); font-size: 19px; }
.reference-shell .reference-cart-tools { display: grid; gap: 10px; margin-top: 24px; }
.reference-shell .reference-cart-tools details { background: var(--color-retained-f1f2f3); }
.reference-shell .reference-cart-tools summary { padding: 15px; color: var(--reference-ink); font-size: 15px; cursor: pointer; list-style: none; }
.reference-shell .reference-cart-tools summary::-webkit-details-marker { display: none; }
.reference-shell .reference-cart-tools p { margin: 0; padding: 0 15px 15px; color: var(--reference-muted); font-size: 12px; }
.reference-shell .reference-cart-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 22px; }
.reference-shell .reference-cart-actions .order-primary { width: auto; min-width: 225px; border-radius: 2px; box-shadow: 0 2px 0 var(--color-text); }
.reference-shell .reference-cart-actions .order-continue { margin: 0; min-width: 180px; text-align: center; }

/* Legal, account and footer */
.reference-shell .site-footer {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.35fr 1.15fr;
  gap: 36px;
  margin-top: 34px;
  padding: 38px max(14px, calc((100vw - 1230px) / 2));
  border-top: 0;
  background: var(--reference-footer);
  color: var(--color-text);
}
.reference-shell .site-footer > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.reference-shell .site-footer .footer-lead { gap: 4px; }
.reference-shell .site-footer .brand strong { color: var(--color-text); font-size: 23px; }
.reference-shell .site-footer .brand strong span { color: var(--reference-orange); }
.reference-shell .site-footer .distributor-brand { margin: 6px 0; color: var(--color-text); }
.reference-shell .site-footer .distributor-label { font-size: 10px; }
.reference-shell .site-footer .distributor-logo-space { padding: 3px 0 0 7px; }
.reference-shell .site-footer .distributor-logo-space img { width: 76px; }
.reference-shell .site-footer strong,
.reference-shell .site-footer > div > a:first-child { color: var(--color-text); font-size: 13px; font-weight: 800; }
.reference-shell .site-footer a,
.reference-shell .site-footer button,
.reference-shell .site-footer span,
.reference-shell .site-footer small { color: var(--color-text-muted); font-size: 12px; line-height: 1.45; }
.reference-shell .site-footer a:hover { color: var(--reference-orange); }
.reference-shell .site-footer .footer-company strong { color: var(--color-text); }
.reference-shell .site-footer .footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--color-retained-cbd2db);
}
.reference-shell .site-footer .footer-bottom-brand { display: flex; align-items: center; gap: 22px; }
.reference-shell .site-footer .footer-bottom .brand strong { font-size: 24px; }
.reference-shell .site-footer .footer-bottom .distributor-brand { margin: 0; }
.reference-shell .site-footer .footer-bottom small { max-width: 650px; color: var(--color-text-muted); }
.reference-shell .consent-banner { border-radius: 2px; }
.reference-shell .legal-layout { padding-bottom: 48px; }
.reference-shell .legal-layout nav a:hover { background: var(--color-surface-info); color: var(--reference-orange); }

@media (max-width: 900px) {
  .reference-shell .site-header { grid-template-columns: 220px minmax(300px, 1fr) 170px; gap: 18px; }
  .reference-shell .site-header .brand strong { font-size: 34px; }
  .reference-shell .reference-category-layout { grid-template-columns: 245px minmax(0, 1fr); gap: 18px; }
  .reference-shell .reference-category-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reference-shell .reference-unavailable-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-shell .product-grid.catalog-list-view .product-card { grid-template-columns: 200px minmax(0, 1fr); }
  .reference-shell .product-grid.catalog-list-view .product-card-body { grid-template-columns: minmax(0, 1fr) 145px; }
}

@media (max-width: 760px) {
  .reference-shell { --reference-page: calc(100vw - 20px); }
  .reference-shell .storefront-utility { display: none; }
  .reference-shell .site-header {
    width: 100%;
    min-height: 123px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: 62px 53px;
    gap: 0 5px;
    padding: 8px 10px 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .reference-shell .site-header .storefront-identity { grid-column: 1; grid-row: 1; }
  .reference-shell .site-header .brand strong { font-size: 26px; letter-spacing: -1.7px; }
  .reference-shell .site-header .distributor-brand { display: none; }
  .reference-shell .header-actions { grid-column: 2; grid-row: 1; gap: 4px; }
  .reference-shell .header-actions .header-account,
  .reference-shell .header-actions .language-menu { display: none; }
  .reference-shell .header-login-menu > summary,
  .reference-shell .site-header .header-cart { width: 42px; min-width: 42px; min-height: 42px; justify-content: center; padding: 8px; }
  .reference-shell .header-login-menu > summary span { display: none; }
  .reference-shell .site-header .header-cart .sr-only { display: none; }
  .reference-shell .site-header .header-cart b { top: -4px; right: -3px; }
  .reference-shell .site-header .nav-toggle { grid-column: 3; grid-row: 1; width: 42px; height: 42px; display: grid; place-items: center; margin: 0; border: 1px solid var(--color-retained-d7dce0); border-radius: 3px; background: var(--color-surface); color: var(--reference-ink); }
  .reference-shell .header-search { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: none; }
  .reference-shell .header-search input { min-height: 42px; font-size: 14px; }
  .reference-shell .header-search button { width: 43px; height: 42px; }
  .reference-shell .site-header .site-nav { position: absolute; z-index: 50; top: 123px; left: 0; right: 0; display: none; flex-direction: column; height: auto; padding: 9px; border: 1px solid var(--color-retained-d7dce0); background: var(--color-surface); box-shadow: 0 9px 20px var(--color-retained-1f293726); }
  .reference-shell .site-header .site-nav.open { display: flex; }
  .reference-shell .site-header .site-nav a { min-height: 39px; padding: 9px 12px; border-bottom: 1px solid var(--color-retained-eceeef); }
  .reference-shell .reference-category-browser,
  .reference-shell .reference-list { padding-top: 0; }
  .reference-shell .reference-breadcrumbs { min-height: 35px; padding: 7px 0 8px; font-size: 11px; }
  .reference-shell .reference-category-layout { display: flex; flex-direction: column; gap: 10px; }
  .reference-shell .reference-category-content { order: 1; width: 100%; }
  .reference-shell .reference-category-tree { order: 2; width: 100%; }
  .reference-shell .reference-category-content h1 { margin: 7px 0 12px; font-size: 24px; }
  .reference-shell .reference-category-heading { display: block; }
  .reference-shell .reference-category-heading .reference-quick-search { display: none; }
  .reference-shell .reference-category-content .reference-eyebrow { font-size: 10px; }
  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-tiles,
  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-unavailable-categories { display: none !important; }
  .reference-shell .reference-category-tree > header { min-height: 41px; }
  .reference-shell .reference-category-tree summary { min-height: 36px; font-size: 13px; }
  .reference-shell .reference-category-tree details > div { padding-left: 19px; }
  .reference-shell .reference-category-tree details a { min-height: 31px; font-size: 12px; }
  .reference-shell .reference-list-heading { display: block; padding-bottom: 6px; }
  .reference-shell .reference-list-heading h1 { font-size: 23px; }
  .reference-shell .reference-quick-search { display: none; }
  .reference-shell .catalog-section { padding-top: 0; }
  .reference-shell .catalog-toolbar.reference-list-toolbar { flex-wrap: wrap; gap: 9px; padding: 8px 0; }
  .reference-shell .reference-list-toolbar .catalog-sort { width: 100%; }
  .reference-shell .reference-list-toolbar .catalog-sort select { flex: 1; }
  .reference-shell .reference-stock { order: 2; }
  .reference-shell .reference-moc { order: 3; margin-left: auto; }
  .reference-shell .catalog-view-toggle { order: 4; margin-left: 0; }
  .reference-shell .catalog-mobile-filters { order: 5; display: inline-flex; min-height: 35px; margin-left: auto; padding: 7px 12px; }
  .reference-shell .catalog-toolbar > [data-catalog-submit] { order: 6; min-height: 35px; padding: 7px 12px; }
  .reference-shell .reference-pack-chips { gap: 5px; }
  .reference-shell .reference-pack-chips a { min-height: 34px; padding: 6px 11px; font-size: 11px; }
  .reference-shell .catalog-layout { display: block; }
  .reference-shell .catalog-sidebar { position: fixed; z-index: 80; top: 0; bottom: 0; left: -310px; width: 300px; max-height: none; padding: 15px; overflow-y: auto; background: var(--color-surface); box-shadow: 8px 0 20px var(--color-retained-1f293733); transition: left .16s ease; }
  .reference-shell .catalog-sidebar.is-open { left: 0; }
  .reference-shell .reference-filter-panel summary { min-height: 39px; padding-inline: 12px; font-size: 14px; }
  .reference-shell .product-grid.catalog-list-view .product-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); min-height: 170px; }
  .reference-shell .product-grid.catalog-list-view .product-card-media { min-height: 170px; }
  .reference-shell .product-grid.catalog-list-view .product-card-media img { padding: 8px; }
  .reference-shell .product-grid.catalog-list-view .product-card-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; padding: 9px 10px; }
  .reference-shell .product-grid.catalog-list-view .product-card h3 { font-size: 13px; }
  .reference-shell .product-grid.catalog-list-view .product-card-description { max-height: 32px; font-size: 10px; -webkit-line-clamp: 2; }
  .reference-shell .product-grid.catalog-list-view .product-card-specs { grid-template-columns: 1fr; }
  .reference-shell .product-grid.catalog-list-view .product-card-specs div { font-size: 10px; }
  .reference-shell .product-grid.catalog-list-view .product-commerce { grid-column: 1; grid-row: auto; align-self: stretch; padding: 7px 0 0; border-top: 1px solid var(--color-retained-e0e3e5); border-left: 0; }
  .reference-shell .product-grid.catalog-list-view .product-commerce > strong { font-size: 14px; }
  .reference-shell .product-grid.catalog-list-view .product-order-controls { grid-template-columns: 54px minmax(0, 1fr); }
  .reference-shell[data-shop-page="product"] .product-page { grid-template-columns: 1fr; grid-template-areas: "image" "summary" "buy" "tabs" "evidence"; }
  .reference-shell[data-shop-page="product"] .product-image { height: 390px; border-right: 0; border-bottom: 1px solid var(--color-retained-dfe2e5); }
  .reference-shell[data-shop-page="product"] .product-image > img { padding: 15px 20px 48px; }
  .reference-shell[data-shop-page="product"] .product-summary { padding: 17px 15px 7px; }
  .reference-shell[data-shop-page="product"] .product-summary h1 { font-size: 22px; }
  .reference-shell[data-shop-page="product"] .buy-panel { padding: 0 15px 15px; }
  .reference-shell[data-shop-page="product"] .product-detail-tabs { overflow-x: auto; }
  .reference-shell[data-shop-page="product"] .product-detail-tabs a { min-width: max-content; padding-inline: 12px; font-size: 11px; }
  .reference-shell[data-shop-page="product"] .product-evidence { padding: 23px 15px 28px; }
  .reference-shell[data-shop-page="product"] .spec-list { grid-template-columns: 1fr; }
  .reference-shell .reference-order-progress,
  .reference-shell .checkout-progress { grid-template-columns: repeat(4, minmax(112px, 1fr)); overflow-x: auto; }
  .reference-shell .reference-order-progress li,
  .reference-shell .checkout-progress li { min-width: 112px; min-height: 42px; padding: 6px 8px; font-size: 9px; }
  .reference-shell[data-shop-page="checkout"] .checkout-layout { grid-template-columns: 1fr; }
  .reference-shell[data-shop-page="checkout"] .checkout-order { position: static; order: -1; }
  .reference-shell .form-grid { grid-template-columns: 1fr; }
  .reference-shell .site-footer { grid-template-columns: 1fr 1fr; gap: 24px 15px; padding: 29px 14px; }
  .reference-shell .site-footer .footer-lead,
  .reference-shell .site-footer .footer-company { grid-column: 1 / -1; }
  .reference-shell .site-footer .footer-bottom { grid-column: 1 / -1; }
  .reference-shell .reference-cart-actions { flex-direction: column-reverse; align-items: stretch; }
  .reference-shell .reference-cart-actions .order-primary,
  .reference-shell .reference-cart-actions .order-continue { width: 100%; min-width: 0; }
}

/* Recommendation rail: a complete, reference-inspired product card with
   honest LubrixOils pricing and fulfilment states. This final layer is scoped
   to the homepage so catalogue cards keep their own geometry. */
.reference-shell[data-shop-page="home"] .reference-home-products {
  min-height: 0 !important;
  padding-top: 48px;
  padding-bottom: 42px;
}
.reference-shell[data-shop-page="home"] .reference-home-products-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.reference-shell[data-shop-page="home"] .reference-home-products-heading h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--reference-ink);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.15;
  text-align: left;
}
.reference-shell[data-shop-page="home"] .reference-home-products-mark {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  color: var(--color-action);
  flex: none;
}
.reference-shell[data-shop-page="home"] .reference-home-products-mark svg {
  width: 100%;
  height: 100%;
}
.reference-shell[data-shop-page="home"] .reference-home-products-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
}
.reference-shell[data-shop-page="home"] .reference-home-products-actions > .text-link {
  color: var(--reference-blue);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.reference-shell[data-shop-page="home"] .reference-home-products-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.reference-shell[data-shop-page="home"] .reference-home-products-arrow {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--reference-blue);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--reference-blue);
  cursor: pointer;
}
.reference-shell[data-shop-page="home"] .reference-home-products-arrow:hover:not(:disabled) {
  border-color: var(--reference-orange);
  color: var(--reference-orange);
}
.reference-shell[data-shop-page="home"] .reference-home-products-arrow:disabled {
  opacity: .35;
  cursor: default;
}
.reference-shell[data-shop-page="home"] .reference-home-products-arrow svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.reference-shell[data-shop-page="home"] .reference-home-product-viewport {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  outline: none;
}
.reference-shell[data-shop-page="home"] .reference-home-product-viewport::-webkit-scrollbar { display: none; }
.reference-shell[data-shop-page="home"] .reference-home-product-viewport:focus-visible {
  outline: 3px solid var(--color-retained-047dba55);
  outline-offset: 5px;
}
.reference-shell[data-shop-page="home"] .reference-home-product-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 30px) / 4);
  grid-template-columns: none;
  gap: 10px;
  min-width: 0;
  margin: 0;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card {
  min-width: 0;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
  scroll-snap-align: start;
}
.reference-shell[data-shop-page="home"] .reference-home-product-image {
  height: 286px;
  flex: none;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--color-retained-eceeef);
  background: var(--color-surface);
}
.reference-shell[data-shop-page="home"] .reference-home-product-image img {
  width: 100%;
  height: 100%;
  padding: 18px;
  object-fit: contain;
}
.reference-shell[data-shop-page="home"] .reference-home-product-image span {
  color: var(--reference-muted);
  font-size: 20px;
  font-weight: 700;
}
.reference-shell[data-shop-page="home"] .reference-home-product-body {
  min-width: 0;
  min-height: 435px;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 16px;
  text-align: center;
}
.reference-shell[data-shop-page="home"] .reference-home-product-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: -1px 0 10px -16px;
  padding: 6px 11px;
  background: var(--color-text);
  color: var(--color-surface);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
}
.reference-shell[data-shop-page="home"] .reference-home-product-tag svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card h3 {
  width: 100%;
  min-height: 43px;
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card h3 a {
  color: var(--reference-blue);
}
.reference-shell[data-shop-page="home"] .reference-home-product-card h3 a:hover {
  color: var(--reference-orange);
}
.reference-shell[data-shop-page="home"] .reference-home-product-code {
  min-height: 18px;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  color: var(--reference-orange);
  font-size: 12px;
  line-height: 1.25;
}
.reference-shell[data-shop-page="home"] .reference-home-product-code strong { font-weight: 800; }
.reference-shell[data-shop-page="home"] .reference-home-product-code b {
  color: var(--color-text);
  font-weight: 800;
}
.reference-shell[data-shop-page="home"] .reference-home-product-code b::before {
  content: "·";
  margin-right: 5px;
  color: var(--reference-orange);
}
.reference-shell[data-shop-page="home"] .reference-home-product-description {
  width: 100%;
  min-height: 53px;
  margin: 8px 0 6px;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.reference-shell[data-shop-page="home"] .reference-home-product-price {
  min-height: 69px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  color: var(--color-text);
}
.reference-shell[data-shop-page="home"] .reference-home-product-price strong {
  display: block;
  font-size: 21px;
  line-height: 1.2;
}
.reference-shell[data-shop-page="home"] .reference-home-product-price span {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.25;
}
.reference-shell[data-shop-page="home"] .reference-home-product-price strong + span {
  color: var(--color-retained-4f5a61);
  font-weight: 700;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card .product-order-controls {
  width: 100%;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card .quantity-control {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  width: 96px;
  height: 44px;
  border: 1px solid var(--color-retained-cfd4d8);
  border-radius: 3px;
  overflow: hidden;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card .quantity-control button {
  width: 28px;
  min-height: 42px;
  padding: 0;
  border: 0;
  background: var(--color-retained-f3f4f5);
  color: var(--reference-ink);
  font-size: 21px;
  line-height: 1;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card .quantity-control input {
  width: 100%;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--color-retained-cfd4d8);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-retained-22272b);
  text-align: center;
  font-size: 14px;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card .recommendation-order-button {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 7px;
  border-radius: 3px;
  background: var(--reference-orange);
  color: var(--color-surface);
  font-size: 12px;
  line-height: 1.2;
  white-space: normal;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card .recommendation-order-button:hover {
  background: var(--reference-orange-dark);
}
.reference-shell[data-shop-page="home"] .reference-home-product-card .recommendation-order-button svg {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card .product-order-unavailable,
.reference-shell[data-shop-page="home"] .reference-home-product-card .product-order-error,
.reference-shell[data-shop-page="home"] .reference-home-product-card .product-order-status {
  grid-column: 1 / -1;
  width: 100%;
  margin: 4px 0 0;
  font-size: 11px;
  text-align: left;
}
.reference-shell[data-shop-page="home"] .reference-home-product-compare {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 6px;
  color: var(--color-text);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.reference-shell[data-shop-page="home"] .reference-home-product-compare:hover {
  color: var(--reference-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.reference-shell[data-shop-page="home"] .reference-home-product-compare svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.reference-shell[data-shop-page="home"] .reference-home-product-status {
  width: 100%;
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
}
.reference-shell[data-shop-page="home"] .reference-home-product-status-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  text-align: left;
}
.reference-shell[data-shop-page="home"] .reference-home-product-stock {
  min-width: 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 4px;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
}
.reference-shell[data-shop-page="home"] .reference-home-product-stock.is-positive { background: var(--color-status-success-bg); }
.reference-shell[data-shop-page="home"] .reference-home-product-stock.is-negative { background: var(--color-status-error-bg); }
.reference-shell[data-shop-page="home"] .reference-home-product-stock.is-neutral { background: var(--color-status-pending-bg); }
.reference-shell[data-shop-page="home"] .reference-home-product-stock svg,
.reference-shell[data-shop-page="home"] .reference-home-product-delivery-icon svg {
  width: 19px;
  height: 19px;
  flex: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.reference-shell[data-shop-page="home"] .reference-home-product-stock.is-positive svg { color: var(--color-status-success-icon); }
.reference-shell[data-shop-page="home"] .reference-home-product-stock.is-negative svg { color: var(--color-status-error-icon); }
.reference-shell[data-shop-page="home"] .reference-home-product-stock.is-neutral svg { color: var(--color-status-pending-icon); }
.reference-shell[data-shop-page="home"] .reference-home-product-status-context {
  min-width: 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.reference-shell[data-shop-page="home"] .reference-home-product-delivery-icon {
  display: inline-flex;
  align-items: center;
  color: var(--reference-orange);
}

@media (max-width: 1100px) {
  .reference-shell[data-shop-page="home"] .reference-home-product-grid {
    grid-auto-columns: calc((100% - 20px) / 3);
  }
}

@media (max-width: 760px) {
  .reference-shell[data-shop-page="home"] .reference-home-products {
    padding-top: 34px;
    padding-bottom: 30px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-products-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-products-heading h2 {
    font-size: 24px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-products-mark {
    width: 23px;
    height: 23px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-products-actions {
    width: 100%;
    justify-content: space-between;
  }
  .reference-shell[data-shop-page="home"] .reference-home-products-actions > .text-link {
    font-size: 14px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-grid {
    grid-auto-columns: calc((100% - 8px) / 2);
    gap: 8px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-image {
    height: 245px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-body {
    min-height: 415px;
    padding-inline: 12px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-tag {
    margin-left: -12px;
    padding: 6px 9px;
    font-size: 11px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-card h3 {
    font-size: 15px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-description,
  .reference-shell[data-shop-page="home"] .reference-home-product-status-context {
    font-size: 11px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-price strong {
    font-size: 18px;
  }
}

@media (max-width: 440px) {
  .reference-shell[data-shop-page="home"] .reference-home-product-grid {
    grid-auto-columns: 100%;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-image {
    height: 285px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-body {
    min-height: 400px;
    padding-inline: 16px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-tag {
    margin-left: -16px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-card h3 {
    font-size: 17px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-description,
  .reference-shell[data-shop-page="home"] .reference-home-product-status-context {
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  .reference-shell .site-footer { grid-template-columns: 1fr; }
  .reference-shell .site-footer > div { grid-column: auto; }
  .reference-shell .site-footer .footer-lead,
  .reference-shell .site-footer .footer-company { grid-column: 1; }
  .reference-shell .site-footer .footer-bottom { grid-column: 1; flex-direction: column; align-items: flex-start; }
}

/* catalog.css contains an older three-column product grid with intentionally
   stronger selectors. Reassert the supplied reference topology at the end of
   the public skin so the product page cannot regress to that layout. */
body.shop-public.reference-shell[data-shop-page="product"] main .product-page {
  display: grid !important;
  grid-template-columns: 52% 48% !important;
  grid-template-rows: auto auto auto auto !important;
  grid-template-areas: "image summary" "image buy" "tabs tabs" "evidence evidence" !important;
  gap: 0 !important;
  padding-bottom: 0 !important;
  border: 1px solid var(--color-retained-e1e3e5) !important;
  background: var(--color-surface) !important;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-page > * { min-width: 0 !important; }
body.shop-public.reference-shell[data-shop-page="product"] main .product-summary {
  grid-area: summary !important;
  grid-column: auto !important;
  grid-row: auto !important;
  padding: 24px 22px 10px !important;
  border-bottom: 0 !important;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-summary h1 { margin: 0 0 24px !important; font-size: 27px !important; }
body.shop-public.reference-shell[data-shop-page="product"] main .product-image {
  grid-area: image !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  height: 590px !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--color-retained-dfe2e5) !important;
  border-radius: 0 !important;
  background: var(--color-surface) !important;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-image > :is(img, .image-placeholder) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  max-height: none !important;
  padding: 30px 40px 55px !important;
  object-fit: contain !important;
}
body.shop-public.reference-shell[data-shop-page="product"] main .buy-panel {
  grid-area: buy !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 22px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-tabs {
  grid-area: tabs !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  margin-top: 0 !important;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-evidence {
  grid-area: evidence !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  margin-top: 0 !important;
  display: block !important;
  padding: 34px 38px 42px !important;
  border: 0 !important;
  background: var(--color-surface) !important;
}

@media (max-width: 760px) {
  body.shop-public.reference-shell[data-shop-page="product"] main .product-page {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas: "image" "summary" "buy" "tabs" "evidence" !important;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-image {
    height: 390px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--color-retained-dfe2e5) !important;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-image > :is(img, .image-placeholder) { padding: 15px 20px 48px !important; }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-summary { padding: 17px 15px 7px !important; }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-summary h1 { font-size: 22px !important; }
  body.shop-public.reference-shell[data-shop-page="product"] main .buy-panel { padding: 0 15px 15px !important; }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-evidence { padding: 23px 15px 28px !important; }
}

/* Set named areas after the explicit row/column resets above; CSS resets an
   earlier grid-area declaration when grid-column/grid-row are assigned. */
body.shop-public.reference-shell[data-shop-page="product"] main .product-summary { grid-area: summary !important; }
body.shop-public.reference-shell[data-shop-page="product"] main .product-image { grid-area: image !important; }
body.shop-public.reference-shell[data-shop-page="product"] main .buy-panel { grid-area: buy !important; }
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-tabs { grid-area: tabs !important; }
body.shop-public.reference-shell[data-shop-page="product"] main .product-evidence { grid-area: evidence !important; }

/* Home page: the supplied reference uses a compact catalogue homepage with
   image-led category tiles, service cards, editorial notes and a product rail.
   The images below come from the published LubrixOils catalogue; colour is
   applied by the layout, never by fabricating product packaging. */
.reference-shell[data-shop-page="home"] .reference-home {
  padding-top: 4px;
  padding-bottom: 48px;
}
.reference-shell[data-shop-page="home"] .reference-home-section-heading {
  margin: 0 0 17px;
}
.reference-shell[data-shop-page="home"] .reference-home-section-heading h1,
.reference-shell[data-shop-page="home"] .reference-home-section-heading h2 {
  margin: 6px 0 0;
  color: var(--reference-ink);
  font-size: 31px;
  line-height: 1.08;
  text-align: center;
}
.reference-shell[data-shop-page="home"] .reference-home-section-heading h1 {
  margin-top: 7px;
  font-size: 32px;
  text-transform: uppercase;
}
.reference-shell[data-shop-page="home"] .reference-home-section-heading .reference-eyebrow {
  text-align: center;
}
.reference-shell[data-shop-page="home"] .reference-home-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.reference-shell[data-shop-page="home"] .reference-home-category {
  position: relative;
  min-height: 142px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--color-retained-dce1e5);
  color: var(--color-surface);
  isolation: isolate;
  background: var(--color-retained-9aa7b0);
}
.reference-shell[data-shop-page="home"] .reference-home-category::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, var(--color-retained-004656eb) 0%, var(--color-retained-004656b8) 48%, var(--color-retained-047dba85) 100%);
}
.reference-shell[data-shop-page="home"] .reference-home-category.is-orange::after {
  background: linear-gradient(90deg, var(--color-retained-004656f2) 0%, var(--color-retained-047dbaca) 48%, var(--color-retained-047dba9e) 100%);
}
.reference-shell[data-shop-page="home"] .reference-home-category img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.72) contrast(.96);
  transform: scale(1.08);
}
.reference-shell[data-shop-page="home"] .reference-home-category span {
  max-width: 72%;
  padding: 20px 29px;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.06;
  text-shadow: 0 1px 4px var(--color-retained-18202766);
}
.reference-shell[data-shop-page="home"] .reference-home-category b {
  margin-left: auto;
  padding: 20px 24px;
  color: var(--color-surface);
  font-size: 39px;
  font-weight: 400;
  line-height: 1;
}
.reference-shell[data-shop-page="home"] .reference-home-category:hover {
  border-color: var(--reference-orange);
  box-shadow: 0 4px 15px var(--color-retained-047dba2b);
}
.reference-shell[data-shop-page="home"] .reference-home-category:hover img { transform: scale(1.13); }
.reference-shell[data-shop-page="home"] .reference-home-services {
  padding-top: 43px;
}
.reference-shell[data-shop-page="home"] .reference-home-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.reference-shell[data-shop-page="home"] .reference-home-service-card {
  min-height: 164px;
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--color-retained-e0e3e6);
  background: var(--color-surface);
}
.reference-shell[data-shop-page="home"] .reference-home-service-card > img {
  width: 100%;
  height: 164px;
  padding: 12px;
  object-fit: contain;
  background: var(--color-retained-f7f8f9);
}
.reference-shell[data-shop-page="home"] .reference-home-service-card > div {
  padding: 18px 22px;
}
.reference-shell[data-shop-page="home"] .reference-home-service-card h3 {
  margin: 0 0 8px;
  color: var(--reference-ink);
  font-size: 19px;
  line-height: 1.15;
}
.reference-shell[data-shop-page="home"] .reference-home-service-card p {
  margin: 0 0 13px;
  color: var(--color-retained-6d767d);
  font-size: 12px;
  line-height: 1.4;
}
.reference-shell[data-shop-page="home"] .reference-home-service-card .button {
  min-height: 32px;
  padding: 7px 15px;
  font-size: 11px;
}
.reference-shell[data-shop-page="home"] .reference-home-benefits {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.reference-shell[data-shop-page="home"] .reference-home-benefits article {
  min-width: 0;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 17px 12px;
  border-right: 1px solid var(--color-retained-e1e3e5);
  text-align: center;
}
.reference-shell[data-shop-page="home"] .reference-home-benefits article:last-child { border-right: 0; }
.reference-shell[data-shop-page="home"] .reference-benefit-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 9px;
  border-radius: 50%;
  background: var(--color-retained-fff0e9);
  color: var(--color-retained-ff7148);
}
.reference-shell[data-shop-page="home"] .reference-benefit-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.reference-shell[data-shop-page="home"] .reference-home-benefits strong {
  color: var(--reference-ink);
  font-size: 13px;
  line-height: 1.2;
}
.reference-shell[data-shop-page="home"] .reference-home-benefits small {
  max-width: 18ch;
  margin-top: 5px;
  color: var(--color-retained-8c969d);
  font-size: 10px;
  line-height: 1.25;
}
.reference-shell[data-shop-page="home"] .reference-home-notice {
  margin-top: 26px;
  padding: 5px 0 5px;
  color: var(--color-retained-59636a);
  font-size: 13px;
  line-height: 1.42;
}
.reference-shell[data-shop-page="home"] .reference-home-notice h2 {
  margin: 0 0 14px;
  color: var(--reference-ink);
  font-size: 19px;
}
.reference-shell[data-shop-page="home"] .reference-home-notice p { margin: 0 0 12px; }
.reference-shell[data-shop-page="home"] .reference-home-news {
  padding-top: 20px;
}
.reference-shell[data-shop-page="home"] .reference-home-news-grid {
  display: grid;
  gap: 10px;
}
.reference-shell[data-shop-page="home"] .reference-home-news-card {
  padding: 17px 18px 15px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.reference-shell[data-shop-page="home"] .reference-home-news-card h3 {
  margin: 0 0 3px;
  font-size: 19px;
  line-height: 1.2;
}
.reference-shell[data-shop-page="home"] .reference-home-news-card h3 a { color: var(--reference-blue); }
.reference-shell[data-shop-page="home"] .reference-home-news-card h3 a:hover { color: var(--reference-orange); }
.reference-shell[data-shop-page="home"] .reference-home-news-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 11px;
  color: var(--color-retained-737d84);
  font-size: 11px;
}
.reference-shell[data-shop-page="home"] .reference-home-news-meta span {
  padding: 2px 7px;
  background: var(--reference-blue);
  color: var(--color-surface);
  font-weight: 700;
}
.reference-shell[data-shop-page="home"] .reference-home-news-card p {
  margin: 0 0 7px;
  color: var(--color-retained-5c666d);
  font-size: 13px;
  line-height: 1.4;
}
.reference-shell[data-shop-page="home"] .reference-home-news-card .text-link,
.reference-shell[data-shop-page="home"] .reference-home-all-news { font-size: 12px; font-weight: 700; }
.reference-shell[data-shop-page="home"] .reference-home-all-news {
  display: inline-block;
  margin-top: 10px;
  color: var(--reference-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.reference-shell[data-shop-page="home"] .reference-home-products {
  padding-top: 43px;
}
.reference-shell[data-shop-page="home"] .reference-home-products-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.reference-shell[data-shop-page="home"] .reference-home-products-heading h2 {
  margin: 0;
  text-align: left;
}
.reference-shell[data-shop-page="home"] .reference-home-products-heading h2 span {
  color: var(--color-action);
  font-size: 27px;
}
.reference-shell[data-shop-page="home"] .reference-home-product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.reference-shell[data-shop-page="home"] .reference-home-product-image {
  height: 216px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--color-retained-eceeef);
  background: var(--color-surface);
}
.reference-shell[data-shop-page="home"] .reference-home-product-image img {
  width: 100%;
  height: 100%;
  padding: 16px;
  object-fit: contain;
}
.reference-shell[data-shop-page="home"] .reference-home-product-image span {
  color: var(--reference-muted);
  font-size: 20px;
  font-weight: 700;
}
.reference-shell[data-shop-page="home"] .reference-home-product-body {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 0 11px 13px;
  text-align: center;
}
.reference-shell[data-shop-page="home"] .reference-home-product-tag {
  align-self: flex-start;
  margin: 0 0 7px -11px;
  padding: 3px 7px;
  background: var(--color-text);
  color: var(--color-surface);
  font-size: 10px;
  font-weight: 700;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card h3 {
  min-height: 34px;
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.12;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card h3 a { color: var(--reference-blue); }
.reference-shell[data-shop-page="home"] .reference-home-product-card h3 a:hover { color: var(--reference-orange); }
.reference-shell[data-shop-page="home"] .reference-home-product-code {
  color: var(--reference-orange);
  font-size: 11px;
  font-weight: 700;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card p {
  min-height: 48px;
  margin: 8px 0 6px;
  overflow: hidden;
  color: var(--color-retained-657078);
  font-size: 10px;
  line-height: 1.3;
}
.reference-shell[data-shop-page="home"] .reference-home-product-price {
  min-height: 20px;
  color: var(--color-text);
  font-size: 16px;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card .product-order-controls {
  width: 100%;
  display: grid;
  grid-template-columns: 77px minmax(0, 1fr);
  gap: 4px;
  margin-top: 10px;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card .quantity-control {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) 17px;
  height: 34px;
  border: 1px solid var(--color-retained-cfd4d8);
}
.reference-shell[data-shop-page="home"] .reference-home-product-card .quantity-control button {
  padding: 0;
  border: 0;
  background: var(--color-retained-f3f4f5);
  color: var(--reference-ink);
}
.reference-shell[data-shop-page="home"] .reference-home-product-card .quantity-control input {
  width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--color-retained-cfd4d8);
  border-radius: 0;
  text-align: center;
  font-size: 11px;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card .product-order-button {
  width: 100%;
  min-height: 34px;
  padding: 7px 5px;
  font-size: 10px;
}
.reference-shell[data-shop-page="home"] .reference-home-product-card .product-order-unavailable,
.reference-shell[data-shop-page="home"] .reference-home-product-card .product-order-error,
.reference-shell[data-shop-page="home"] .reference-home-product-card .product-order-status {
  grid-column: 1 / -1;
  width: 100%;
  margin: 4px 0 0;
  font-size: 10px;
  text-align: left;
}

@media (max-width: 760px) {
  .reference-shell[data-shop-page="home"] .reference-home { padding-bottom: 28px; }
  .reference-shell[data-shop-page="home"] .reference-home-section-heading h1,
  .reference-shell[data-shop-page="home"] .reference-home-section-heading h2 { font-size: 23px; }
  .reference-shell[data-shop-page="home"] .reference-home-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .reference-shell[data-shop-page="home"] .reference-home-category { min-height: 110px; }
  .reference-shell[data-shop-page="home"] .reference-home-category span { padding: 13px; font-size: 15px; }
  .reference-shell[data-shop-page="home"] .reference-home-category b { padding: 13px 10px; font-size: 25px; }
  .reference-shell[data-shop-page="home"] .reference-home-services { padding-top: 30px; }
  .reference-shell[data-shop-page="home"] .reference-home-service-grid { grid-template-columns: 1fr; gap: 7px; }
  .reference-shell[data-shop-page="home"] .reference-home-service-card { min-height: 135px; grid-template-columns: 34% minmax(0, 1fr); }
  .reference-shell[data-shop-page="home"] .reference-home-service-card > img { height: 135px; padding: 8px; }
  .reference-shell[data-shop-page="home"] .reference-home-service-card > div { padding: 12px 14px; }
  .reference-shell[data-shop-page="home"] .reference-home-service-card h3 { font-size: 15px; }
  .reference-shell[data-shop-page="home"] .reference-home-service-card p { margin-bottom: 9px; font-size: 10px; }
  .reference-shell[data-shop-page="home"] .reference-home-service-card .button { min-height: 29px; padding: 5px 10px; font-size: 10px; }
  .reference-shell[data-shop-page="home"] .reference-home-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-shell[data-shop-page="home"] .reference-home-benefits article { min-height: 118px; padding: 13px 8px; }
  .reference-shell[data-shop-page="home"] .reference-home-benefits article:nth-child(odd) { border-right: 1px solid var(--color-retained-e1e3e5); }
  .reference-shell[data-shop-page="home"] .reference-home-benefits article:nth-child(even) { border-right: 0; }
  .reference-shell[data-shop-page="home"] .reference-home-benefits article:nth-child(-n+3) { border-bottom: 1px solid var(--color-retained-e1e3e5); }
  .reference-shell[data-shop-page="home"] .reference-home-notice { font-size: 12px; }
  .reference-shell[data-shop-page="home"] .reference-home-news-card h3 { font-size: 16px; }
  .reference-shell[data-shop-page="home"] .reference-home-products { padding-top: 30px; }
  .reference-shell[data-shop-page="home"] .reference-home-products-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .reference-shell[data-shop-page="home"] .reference-home-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .reference-shell[data-shop-page="home"] .reference-home-product-image { height: 165px; }
  .reference-shell[data-shop-page="home"] .reference-home-product-image img { padding: 10px; }
  .reference-shell[data-shop-page="home"] .reference-home-product-card h3 { font-size: 12px; }
  .reference-shell[data-shop-page="home"] .reference-home-product-card p { min-height: 56px; font-size: 9px; }
  .reference-shell[data-shop-page="home"] .reference-home-product-price { font-size: 13px; }
  .reference-shell[data-shop-page="home"] .reference-home-product-card .product-order-controls { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .reference-shell[data-shop-page="home"] .reference-home-category-grid,
  .reference-shell[data-shop-page="home"] .reference-home-product-grid { grid-template-columns: 1fr; }
  .reference-shell[data-shop-page="home"] .reference-home-category { min-height: 100px; }
  .reference-shell[data-shop-page="home"] .reference-home-product-image { height: 190px; }
}

/* The reference list uses a single content column on phones; keep the old
   filter/sidebar implementation from widening the page or appearing above it. */
@media (max-width: 760px) {
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-sidebar,
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-mobile-filters {
    display: none !important;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-layout {
    display: block !important;
  }
}

/* Category root and the next motor-oil level follow the reference hierarchy:
   sidebar first, then compact subcategory/viscosity tiles. */
.reference-shell .reference-root-category-tiles .reference-category-tile.is-root-category {
  min-height: 80px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  text-align: left;
}
.reference-shell .reference-root-category-tiles .is-root-category > img {
  width: 76px;
  height: 70px;
  object-fit: contain;
}
.reference-shell .reference-root-category-tiles .is-root-category > strong {
  color: var(--reference-ink);
  font-size: 13px;
  line-height: 1.18;
}
.reference-shell .reference-root-category-tiles .is-root-category > b { display: none; }
.reference-shell .reference-viscosity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.reference-shell .reference-viscosity-grid a {
  min-height: 78px;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px solid var(--color-retained-e0e3e6);
  background: var(--color-surface);
  color: var(--color-retained-202326);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.reference-shell .reference-viscosity-grid .is-disabled {
  min-height: 78px;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px solid var(--color-retained-e0e3e6);
  background: var(--color-surface);
  color: var(--color-retained-9aa0a5);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.reference-shell .reference-viscosity-grid a:hover,
.reference-shell .reference-viscosity-grid a:focus-visible,
.reference-shell .reference-viscosity-grid a[aria-current="page"] {
  border-color: var(--reference-orange);
  box-shadow: 0 3px 12px var(--color-retained-047dba1c);
  color: var(--reference-orange);
  outline: none;
}
@media (max-width: 760px) {
  .reference-shell .reference-viscosity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .reference-shell .reference-viscosity-grid a,
  .reference-shell .reference-viscosity-grid .is-disabled { min-height: 58px; font-size: 12px; }
}

/* Tablet parity audit (761–800px).
   The supplied storefront changes to its compact/mobile shell at 768px,
   while LubrixOils intentionally keeps the existing 760px JavaScript filter
   boundary. This CSS-only bridge gives the tablet the same observable shell
   without changing filter state management or the desktop 1024px layout. */
@media (min-width: 761px) and (max-width: 800px) {
  body.shop-public.reference-shell {
    --reference-page: calc(100vw - 20px);
  }

  body.shop-public.reference-shell .storefront-utility {
    display: none;
  }

  body.shop-public.reference-shell .site-header {
    width: 100%;
    max-width: none;
    height: 152px;
    min-height: 152px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: 70px 62px;
    gap: 0 5px;
    padding: 10px 10px 9px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  body.shop-public.reference-shell .site-header .storefront-identity {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
  body.shop-public.reference-shell .site-header .brand strong {
    font-size: 26px;
    letter-spacing: -1.7px;
  }
  body.shop-public.reference-shell .site-header .distributor-brand,
  body.shop-public.reference-shell .header-actions .header-account,
  body.shop-public.reference-shell .header-actions .language-menu {
    display: none;
  }
  body.shop-public.reference-shell .header-actions {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    gap: 4px;
  }
  body.shop-public.reference-shell .header-guest {
    display: block;
  }
  body.shop-public.reference-shell .header-login-menu > summary,
  body.shop-public.reference-shell .site-header .header-cart {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    justify-content: center;
    padding: 8px;
  }
  body.shop-public.reference-shell .header-login-menu > summary span,
  body.shop-public.reference-shell .site-header .header-cart .sr-only {
    display: none;
  }
  body.shop-public.reference-shell .site-header .header-cart b {
    top: -4px;
    right: -3px;
  }
  body.shop-public.reference-shell .site-header .nav-toggle {
    grid-column: 3;
    grid-row: 1;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    align-self: start;
    margin: 0;
    border: 1px solid var(--color-retained-d7dce0);
    border-radius: 3px;
    background: var(--color-surface);
    color: var(--reference-ink);
  }
  body.shop-public.reference-shell .header-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    align-self: center;
  }
  body.shop-public.reference-shell .header-search input {
    min-height: 42px;
    font-size: 16px;
    font-weight: 600;
  }
  body.shop-public.reference-shell .header-search button {
    width: 42px;
    height: 42px;
  }
  body.shop-public.reference-shell .site-header .site-nav {
    position: absolute;
    z-index: 50;
    top: 152px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    height: auto;
    padding: 9px;
    border: 1px solid var(--color-retained-d7dce0);
    background: var(--color-surface);
    box-shadow: 0 9px 20px var(--color-retained-1f293726);
  }
  body.shop-public.reference-shell .site-header .site-nav.open {
    display: flex;
  }
  body.shop-public.reference-shell .site-header .site-nav a {
    min-height: 39px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--color-retained-eceeef);
  }

  /* The category landing keeps the audited 318×153 tile rhythm and two
     centered columns at 768px. */
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home,
  body.shop-public.reference-shell[data-shop-page="catalog"] .page-width {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home {
    padding-top: 23px;
    padding-bottom: 34px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-section-heading h1,
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-section-heading h2 {
    font-size: 22px;
    line-height: 1.25;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-section-heading h1 {
    font-size: 28px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-category-grid {
    width: 646px;
    max-width: calc(100vw - 20px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-inline: auto;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-category {
    min-height: 153px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-category span {
    padding: 20px 29px;
    font-size: 28px;
    line-height: 32px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-category b {
    padding: 20px 24px;
    font-size: 39px;
  }

  /* At the audited tablet width service cards are full-bleed horizontal
     compositions: 190px media, 548px text, 240px card height. */
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-services {
    padding-top: 49px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-grid {
    width: calc(100vw - 10px);
    max-width: none;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 240px);
    gap: 10px;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card {
    height: 240px;
    min-height: 240px;
    grid-template-columns: 190px minmax(0, 1fr);
    padding: 10px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card > img {
    width: 190px;
    height: 190px;
    min-height: 190px;
    padding: 0;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card > div {
    min-width: 0;
    height: 220px;
    padding: 24px 20px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card h3 {
    font-size: 19px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card p {
    margin-bottom: 13px;
    font-size: 14.6667px;
    line-height: 24px;
  }

  /* Benefits are 3 items on the first row and 2 wider items on the second. */
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits {
    width: 100vw;
    min-height: 326px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, 144px);
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits article {
    min-height: 144px;
    padding: 17px 12px;
    border-right: 1px solid var(--color-retained-e1e3e5);
    border-bottom: 1px solid var(--color-retained-e1e3e5);
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits article:nth-child(-n+3) {
    grid-column: span 2;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits article:nth-child(4) {
    grid-column: 1 / span 3;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits article:nth-child(5) {
    grid-column: 4 / span 3;
    border-right: 0;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits strong {
    font-size: 13.3333px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits small {
    font-size: 10.6667px;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-notice {
    min-height: 0;
    height: auto;
    margin-top: 20px;
    padding: 5px 0;
    font-size: 14.6667px;
    line-height: 24px;
    overflow: visible;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-notice h2 {
    font-size: 22px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news {
    height: auto;
    min-height: 393px;
    margin-top: 30px;
    padding-top: 0;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news-card h3 {
    font-size: 20px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news-card p {
    font-size: 14.6667px;
    line-height: 24px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products {
    width: 100vw;
    min-height: 630px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 40px;
    padding: 30px 0 42px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading {
    width: calc(100vw - 40px);
    margin-inline: auto;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading h2 {
    font-size: 22px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-viewport {
    width: 100%;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-grid {
    grid-auto-flow: column;
    grid-auto-columns: 42.5%;
    grid-template-columns: none;
    gap: 1px;
    padding: 0;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card {
    height: 540px;
    min-height: 540px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-image {
    height: 200px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-body {
    min-height: 340px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card h3 {
    font-size: 22px;
    line-height: 1.1;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-description,
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-status-context {
    font-size: 13.3333px;
    line-height: 1.35;
  }

  /* Catalogue list: keep all controls in the document flow at tablet widths. */
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-layout {
    display: flex !important;
    flex-direction: column;
    gap: 12px !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-sidebar {
    position: static;
    width: 100%;
    max-height: none;
    padding: 0;
    order: 0;
    overflow: visible;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results {
    order: 1;
    width: 100%;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-category-tree summary {
    min-height: 40px;
    font-size: 14.6667px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-category-tree details a {
    min-height: 32px;
    font-size: 13.3333px;
  }

  /* Product detail: stack the same way as the audited 768px reference, but
     keep the tall 632px image canvas used by that breakpoint. */
  body.shop-public.reference-shell[data-shop-page="product"] main .product-page {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas: "image" "summary" "buy" "tabs" "evidence" !important;
    min-height: 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-image {
    height: 632px !important;
    border-right: 0;
    border-bottom: 1px solid var(--color-retained-dfe2e5);
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-summary {
    padding: 17px 15px 12px !important;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-summary h1.product-detail-title {
    font-size: 22px !important;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-tabs {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    overflow-x: visible;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-tabs a {
    width: 100%;
    min-width: 0;
    min-height: 39px;
    padding: 9px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--color-retained-dfe2e5);
    white-space: normal;
    text-transform: none;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-evidence {
    padding: 23px 15px 28px !important;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-section .spec-list {
    grid-template-columns: 1fr;
  }

  /* Footer: one readable column on tablet, with the same 13.333px / 26.667px
     link rhythm measured on the supplied 768px reference. */
  body.shop-public.reference-shell .site-footer {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 24px;
    padding: 30px 20px 28px;
  }
  body.shop-public.reference-shell .site-footer > div,
  body.shop-public.reference-shell .site-footer .footer-lead,
  body.shop-public.reference-shell .site-footer .footer-company,
  body.shop-public.reference-shell .site-footer .footer-update-row,
  body.shop-public.reference-shell .site-footer .footer-bottom {
    grid-column: 1;
    min-height: 0 !important;
  }
  body.shop-public.reference-shell .site-footer a,
  body.shop-public.reference-shell .site-footer button,
  body.shop-public.reference-shell .site-footer span,
  body.shop-public.reference-shell .site-footer small {
    font-size: 13.3333px;
    line-height: 26.6667px;
  }
  body.shop-public.reference-shell .site-footer .footer-update-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 18px 0;
  }
  body.shop-public.reference-shell .site-footer .footer-update-row .button {
    width: 100%;
  }
  body.shop-public.reference-shell .site-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

/* Desktop/laptop recommendation rail: preserve the reference's 4-card,
   575px-height rhythm while fitting the available 1024px canvas without
   creating a page-level horizontal scrollbar. */
@media (min-width: 801px) {
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products {
    height: 685px !important;
    min-height: 685px !important;
    margin-top: 50px !important;
    padding: 20px 0 30px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading {
    width: 100% !important;
    margin: 0 0 24px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading h2 {
    font-size: 26.6667px !important;
    line-height: normal !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-actions {
    align-self: flex-start !important;
    margin-left: auto !important;
    margin-top: 5px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-actions > .text-link {
    display: none !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-controls {
    gap: 5px !important;
  }
  body.shop-public.reference-shell[data-shop="home"] .reference-home-products-arrow {
    width: 23px !important;
    height: 23px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-viewport {
    width: 100% !important;
    height: 575px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-grid {
    width: 100% !important;
    height: 575px !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-auto-columns: calc((100% - 30px) / 4) !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card {
    position: relative !important;
    height: 575px !important;
    min-height: 575px !important;
    padding: 12px 15px 21px !important;
    overflow: visible !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-image {
    width: calc(100% + 30px) !important;
    height: 200px !important;
    min-height: 200px !important;
    margin: 15px 0 0 -15px !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-body {
    min-height: 340px !important;
    padding: 0 0 16px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-tag {
    position: absolute !important;
    z-index: 2 !important;
    top: 211px !important;
    left: 1px !important;
    margin: 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card h3 {
    font-size: 22px !important;
    line-height: normal !important;
  }
}

/* Keep the reference shell compact without changing its measured 1210px
   desktop content width. */
@media (min-width: 761px) {
  .reference-shell .header-search button svg { width: 18px !important; height: 18px !important; }
  .reference-shell .header-actions svg { width: 19px !important; height: 19px !important; }
  .reference-shell .catalog-view-toggle svg { width: 16px !important; height: 16px !important; }
}

/* Keep the product/catalog content start aligned with the supplied reference.
   The shared storefront styles give breadcrumbs a 43px desktop rhythm; the
   reference page uses a compact 33px breadcrumb bar before the main panel. */
@media (min-width: 761px) {
  body.shop-public.reference-shell[data-shop-page="product"] main .breadcrumbs,
  body.shop-public.reference-shell[data-shop-page="catalog"] main .breadcrumbs {
    height: 33px !important;
    min-height: 33px !important;
    box-sizing: border-box;
    padding: 0 0 5px !important;
    align-items: flex-start !important;
  }
}

/* Final home parity pass. These values are tied to the audited 1230 px
   reference capture; the mobile rules below intentionally switch to the
   reference's stacked/scrollable rhythm. */
@media (min-width: 761px) {
  .reference-shell .storefront-utility,
  .reference-shell .storefront-utility-inner {
    min-height: 54px;
  }
  .reference-shell .storefront-utility nav {
    gap: 22px;
  }
  .reference-shell .storefront-utility-inner {
    font-size: 12px;
  }
  .reference-shell .site-header {
    min-height: 156px;
    grid-template-columns: 300px minmax(400px, 1fr) 160px;
    gap: 28px;
    padding: 18px 0 22px;
  }
  .reference-shell .site-header .brand strong {
    font-size: 50px;
    letter-spacing: -3.2px;
  }
  .reference-shell .site-header .distributor-brand {
    margin-top: 12px;
  }
  .reference-shell .site-header .header-login-menu {
    display: none;
  }
  .reference-shell .site-header .header-actions .language-menu {
    display: block;
  }
  .reference-shell .site-header .header-cart {
    min-width: 76px;
  }

  .reference-shell[data-shop-page="home"] .reference-home {
    padding-top: 23px;
    padding-bottom: 55px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-section-heading {
    margin-bottom: 27px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-section-heading h1 {
    font-size: 34px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-category {
    min-height: 158px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-services {
    padding-top: 54px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-service-card,
  .reference-shell[data-shop-page="home"] .reference-home-service-card > img {
    min-height: 242px;
    height: 242px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-service-card > img {
    padding: 18px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-service-card > div {
    padding: 22px 24px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-service-card h3 {
    font-size: 22px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-service-card p {
    font-size: 13px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-benefits {
    margin-top: 28px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-benefits article {
    min-height: 182px;
    padding: 22px 14px;
  }
  .reference-shell[data-shop-page="home"] .reference-benefit-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
  }
  .reference-shell[data-shop-page="home"] .reference-benefit-icon svg {
    width: 35px;
    height: 35px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-benefits strong {
    font-size: 17px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-benefits small {
    font-size: 12px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-notice {
    margin-top: 30px;
    padding-block: 5px;
    font-size: 14px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-notice h2 {
    font-size: 21px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-news {
    padding-top: 24px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-news-card {
    padding: 14px 16px 13px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-news-card h3 {
    font-size: 20px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-news-meta {
    margin-bottom: 8px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-news-card p {
    font-size: 12px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-products {
    padding-top: 49px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-card {
    min-height: 575px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-image {
    height: 270px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-image img {
    padding: 20px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-body {
    padding-bottom: 18px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-availability {
    min-height: 38px;
    margin: 8px 0 0;
    color: var(--color-retained-71808a);
    font-size: 10px;
    line-height: 1.3;
  }
}

/* The reference footer has a distinct information band between its columns
   and the small brand/legal line. Keep the links truthful to LubrixOils. */
.reference-shell .site-footer {
  min-height: 575px;
  grid-template-rows: minmax(250px, 1fr) auto auto;
  row-gap: 28px;
  padding-top: 44px;
  padding-bottom: 28px;
}
.reference-shell .site-footer .footer-company p {
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.reference-shell .site-footer .footer-update-row {
  grid-column: 1 / -1;
  min-height: 70px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid var(--color-retained-cbd2db);
  border-bottom: 1px solid var(--color-retained-cbd2db);
}
.reference-shell .site-footer .footer-update-row strong {
  flex: none;
  font-size: 18px;
}
.reference-shell .site-footer .footer-update-row span {
  flex: 1;
  color: var(--color-text-muted);
}
.reference-shell .site-footer .footer-update-row .button {
  flex: none;
  min-height: 36px;
  padding: 7px 15px;
  font-size: 11px;
}
.reference-shell .reference-back-to-top {
  position: fixed;
  z-index: 40;
  right: 20px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 2px;
  background: var(--color-retained-7b7f82);
  color: var(--color-surface);
  font-size: 24px;
  line-height: 1;
  opacity: .9;
}
.reference-shell .reference-back-to-top:hover {
  background: var(--reference-orange);
}

@media (max-width: 760px) {
  .reference-shell .site-footer {
    min-height: 0;
    grid-template-rows: auto;
    row-gap: 24px;
    padding-top: 30px;
    padding-bottom: 28px;
  }
  .reference-shell .site-footer .footer-update-row {
    grid-column: 1;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 18px 0;
  }
  .reference-shell .site-footer .footer-update-row .button {
    width: 100%;
  }
  .reference-shell .reference-back-to-top {
    right: 12px;
    bottom: 12px;
    width: 38px;
    height: 38px;
    font-size: 21px;
  }
  .reference-shell[data-shop-page="home"] .reference-home {
    padding-top: 12px;
    padding-bottom: 34px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-benefits {
    grid-template-columns: 1fr;
  }
  .reference-shell[data-shop-page="home"] .reference-home-benefits article,
  .reference-shell[data-shop-page="home"] .reference-home-benefits article:nth-child(odd),
  .reference-shell[data-shop-page="home"] .reference-home-benefits article:nth-child(even) {
    min-height: 104px;
    border-right: 0;
    border-bottom: 1px solid var(--color-retained-e1e3e5);
  }
  .reference-shell[data-shop-page="home"] .reference-home-benefits article:last-child {
    border-bottom: 0;
  }
  .reference-shell[data-shop-page="home"] .reference-benefit-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
  }
  .reference-shell[data-shop-page="home"] .reference-benefit-icon svg {
    width: 29px;
    height: 29px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-benefits strong {
    font-size: 14px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-benefits small {
    font-size: 10px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-notice {
    margin-top: 25px;
    padding-inline: 2px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(270px, 1fr));
    gap: 7px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 5px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-card {
    min-height: 520px;
    scroll-snap-align: start;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-card p {
    min-height: 42px;
  }
  .reference-shell[data-shop-page="home"] .reference-home-product-availability {
    min-height: 42px;
  }
}

/* Home mobile parity pass. The public reference keeps more vertical room than
   the catalogue pages: one full-width category tile per row, square service
   imagery, tall benefit rows and an intentionally generous footer. Keep these
   rules scoped to the homepage so checkout/catalog mobile layouts stay intact. */
@media (max-width: 760px) {
  body.shop-public.reference-shell[data-shop-page="home"] .site-header {
    height: 152px;
    min-height: 152px;
    grid-template-rows: 70px 62px;
    padding: 10px 10px 9px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .site-header .site-nav {
    top: 152px;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home {
    padding-top: 23px;
    padding-bottom: 0;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-categories
    .reference-home-section-heading {
    margin-bottom: 40px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-category-grid {
    width: 318px;
    max-width: calc(100vw - 20px);
    grid-template-columns: 1fr;
    gap: 10px;
    margin-inline: auto;
    padding: 5px 0;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-category {
    min-height: 153px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-category span {
    max-width: 72%;
    padding: 20px 29px;
    font-size: 23px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-category b {
    padding: 20px 24px;
    font-size: 39px;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-services {
    padding-top: 66px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-grid {
    width: calc(100vw - 10px);
    max-width: none;
    grid-template-columns: 1fr;
    grid-template-rows: 447px 399px;
    gap: 10px;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 5px 0;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card {
    min-height: 0;
    height: 100%;
    display: block;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card > img {
    display: block;
    width: 100%;
    height: 190px;
    min-height: 190px;
    padding: 18px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card > div {
    height: calc(100% - 190px);
    min-height: 0;
    padding: 24px 20px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card h3 {
    font-size: 19px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card p {
    font-size: 12px;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits {
    height: 910px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    margin-top: 20px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits article,
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits article:nth-child(odd),
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits article:nth-child(even) {
    min-height: 0;
    height: auto;
    padding: 22px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--color-retained-e1e3e5);
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits article:last-child {
    border-bottom: 0;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-benefit-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-benefit-icon svg {
    width: 35px;
    height: 35px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits strong {
    font-size: 17px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits small {
    font-size: 12px;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-notice {
    margin-top: 30px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-notice p {
    margin-bottom: 11px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news {
    min-height: 492px;
    margin-top: 40px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products {
    min-height: 660px;
    margin-top: 40px;
  }

}

@media (min-width: 761px) {
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home {
    width: calc(100% - 40px);
    padding-bottom: 0;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .storefront-utility-inner,
  body.shop-public.reference-shell[data-shop-page="home"] .site-header {
    width: calc(100% - 40px);
  }
  body.shop-public.reference-shell[data-shop-page="home"] .site-header {
    height: 155px;
    min-height: 155px;
    grid-template-columns: 388px minmax(0, 1fr) 160px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .site-header .storefront-identity {
    transform: translateY(6px);
  }
  body.shop-public.reference-shell[data-shop-page="home"] .header-search {
    max-width: 480px;
    justify-self: start;
    margin-left: 0;
    transform: translateY(-7px);
  }
  body.shop-public.reference-shell[data-shop-page="home"] .header-search input {
    min-height: 42px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .header-search button {
    width: 42px;
    height: 42px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .site-header .header-login-menu > summary,
  body.shop-public.reference-shell[data-shop-page="home"] .site-header .header-account > summary,
  body.shop-public.reference-shell[data-shop-page="home"] .site-header .header-cart {
    min-height: 42px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-services {
    padding-top: 49px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card,
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card > img {
    min-height: 250px;
    height: 250px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits {
    height: 182px;
    min-height: 182px;
    margin-top: 20px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits article {
    min-height: 0;
    height: 100%;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-notice {
    height: 204px;
    min-height: 204px;
    overflow: hidden;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news {
    height: 367px;
    min-height: 367px;
    margin-top: 30px;
    padding-top: 0;
    overflow: visible;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news
    .reference-home-section-heading {
    margin-bottom: 0;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news
    .reference-home-section-heading h2 {
    margin-top: 0;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news-grid {
    gap: 20px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news-card {
    padding: 10px 18px 8px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news-card:first-child {
    min-height: 154px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news-card:nth-child(2) {
    min-height: 122px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-all-news {
    margin-top: 10px;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products {
    margin-top: 29px;
    padding-top: 19px;
    padding-bottom: 30px;
    min-height: 685px;
  }
}

/* Final catalogue parity pass. The older catalogue stylesheet contains a
   compact card grid with stronger selectors; keep the data/filter behavior,
   but make the rendered catalogue follow the audited reference list: compact
   heading, controls first, filter panels, pack chips, then tall horizontal
   product rows. */
@media (min-width: 761px) {
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-list {
    padding: 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-list .reference-breadcrumbs {
    height: 33px;
    min-height: 33px;
    padding: 0;
    font-size: 13px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-list-heading {
    height: 45px;
    min-height: 45px;
    align-items: center;
    padding: 0;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-list-heading .reference-eyebrow,
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-list-heading .catalog-result-count,
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-list-heading .reference-quick-search {
    display: none !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-list-heading h1 {
    margin: 0 !important;
    font-size: 27px;
    line-height: 1.1;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-section {
    padding: 0 0 45px !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-toolbar.reference-list-toolbar {
    height: 43px;
    min-height: 43px;
    align-items: center;
    gap: 15px;
    margin: 0 0 0 !important;
    padding: 3px 0;
    border-top: 1px solid var(--reference-line);
    border-bottom: 1px solid var(--reference-line);
    background: transparent;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-list-toolbar .catalog-sort {
    width: 245px;
    height: 37px;
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-list-toolbar .catalog-sort > span {
    display: inline-block !important;
    margin: 0 !important;
    white-space: nowrap;
    font-size: 11px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-list-toolbar .catalog-sort select {
    width: auto;
    min-width: 0;
    flex: 1;
    height: 37px;
    min-height: 37px;
    padding: 6px 9px;
    font-size: 13px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-list-toolbar .reference-stock {
    height: 37px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-list-toolbar .reference-stock input {
    width: 16px;
    min-height: 16px;
    margin: 0;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-list-toolbar .reference-moc {
    height: 37px;
    margin-left: auto;
    font-size: 13px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-list-toolbar .catalog-view-toggle {
    height: 35px;
    margin-left: 8px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-list-toolbar .catalog-view-toggle button {
    width: 35px;
    height: 35px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-layout {
    grid-template-columns: 252px minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-sidebar {
    top: 0;
    max-height: none;
    padding-right: 10px;
    border-top: 1px solid var(--reference-line);
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-sidebar .reference-filter-tree-section > div {
    max-height: none;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .reference-filter-panels {
    margin: -1px 0 0 !important;
    gap: 8px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .reference-filter-panel summary {
    min-height: 50px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .reference-pack-chips {
    min-height: 39px;
    margin: 10px 0 19px !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view {
    gap: 10px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-card {
    /* Keep the reference image column; row height follows real content. */
    grid-template-columns: 231px minmax(0, 1fr) !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-card-media {
    height: auto !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-card-media img {
    width: 200px;
    height: 200px;
    max-width: 100%;
    max-height: 100%;
    padding: 0 !important;
    object-fit: contain;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-card-body {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 10px !important;
    overflow: hidden;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-card h3 {
    min-height: 0;
    margin: 1px 0 7px;
    font-size: 18px;
    line-height: 1.2;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-card-description {
    max-height: 33px;
    margin: 0 0 7px;
    font-size: 12px;
    line-height: 1.35;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-card-specs {
    flex: 0 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-card-specs div {
    min-width: 0;
    padding: 2px 8px 2px 0;
    font-size: 11px;
    line-height: 1.35;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-commerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    min-width: 0;
    margin: auto 0 0;
    padding: 8px 0 0;
    gap: 0 12px;
    border-top: 1px solid var(--color-retained-e0e3e5);
    border-left: 0;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-commerce > strong,
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-commerce .price-caption {
    grid-column: 1;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-commerce > strong {
    font-size: 18px;
    line-height: 1.2;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-commerce .price-caption {
    line-height: 1.35;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-order-controls {
    grid-column: 2;
    grid-row: 1 / span 2;
    grid-template-columns: 60px 92px;
    align-items: center;
    gap: 5px;
    margin: 0;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-order-controls .quantity-control {
    width: 60px;
    height: 44px;
    grid-template-columns: 18px 24px 18px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-order-controls .quantity-control > button,
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-order-controls .quantity-control > input {
    min-height: 42px;
    height: 42px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-order-controls .product-order-button {
    width: 92px;
    min-height: 44px;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.2;
  }
}

/* The toolbar's grid button must switch to a real compact catalogue grid.
   The list geometry above intentionally stays unchanged for the reference view. */
@media (min-width: 761px) {
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid:not(.catalog-list-view) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid:not(.catalog-list-view) .product-card {
    display: flex !important;
    flex-direction: column;
    min-height: 0 !important;
    height: auto;
    grid-template-columns: none !important;
    border-radius: 0;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid:not(.catalog-list-view) .product-card-media {
    height: 175px !important;
    min-height: 175px !important;
    border-right: 0;
    border-bottom: 1px solid var(--color-retained-e1e3e5);
    border-radius: 0;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid:not(.catalog-list-view) .product-card-media img {
    padding: 12px !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid:not(.catalog-list-view) .product-card-body {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    padding: 11px 12px 12px !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid:not(.catalog-list-view) .product-card h3 {
    min-height: 38px;
    margin: 3px 0 6px;
    font-size: 15px;
    line-height: 1.25;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid:not(.catalog-list-view) .product-card-description {
    max-height: 34px;
    margin: 0 0 7px;
    font-size: 11px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid:not(.catalog-list-view) .product-card-specs {
    grid-template-columns: 1fr;
    margin-bottom: 5px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid:not(.catalog-list-view) .product-card-specs div {
    font-size: 10px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid:not(.catalog-list-view) .product-commerce {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-top: auto;
    padding: 8px 0 0;
    border-top: 1px solid var(--color-retained-e0e3e5);
    border-left: 0;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid:not(.catalog-list-view) .product-commerce > strong {
    font-size: 16px;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid:not(.catalog-list-view) .product-order-controls {
    grid-template-columns: 54px minmax(0, 1fr);
    margin-top: 6px;
  }
}

@media (max-width: 760px) {
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid:not(.catalog-list-view) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid:not(.catalog-list-view) .product-card {
    display: flex !important;
    flex-direction: column;
    min-height: 0 !important;
  }
}

/* Product detail parity: the reference keeps the product image and the
   information/order column in one 632px composition, then places the tabs and
   the full parameter content below it. */
body.shop-public.reference-shell[data-shop-page="product"] main .product-page {
  grid-template-columns: 57.53% 42.47% !important;
  grid-template-rows: minmax(0, 1fr) auto auto auto !important;
  min-height: 632px !important;
}
@media (min-width: 761px) {
  body.shop-public.reference-shell main .breadcrumbs {
    height: 33px !important;
    box-sizing: border-box;
    padding: 0 0 5px !important;
    align-items: flex-start !important;
  }
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-summary {
  min-height: 0 !important;
  padding: 24px 10px 10px !important;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-title {
  display: block;
  margin: 0 0 22px !important;
  color: var(--color-text) !important;
  font-size: 24px !important;
  line-height: 1.33 !important;
  font-weight: 800 !important;
  letter-spacing: -.035em;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-summary h1.product-detail-title {
  margin: 0 0 22px !important;
  color: var(--color-text) !important;
  font-size: 24px !important;
  line-height: 1.33 !important;
  font-weight: 800 !important;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-title [data-product-title] {
  display: inline;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-title-brand {
  display: inline;
  color: var(--color-text);
  font-weight: 800;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-title-code {
  display: inline;
  color: var(--color-text);
  font-weight: 800;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-summary-description {
  margin: 0 0 16px !important;
  color: var(--color-text);
  font-size: 14.6667px;
  line-height: 1.42;
  font-weight: 300;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-summary-description > p {
  margin: 0 0 7px;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-summary-description details p {
  margin: 0;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-summary-description .original-source-label {
  color: var(--color-text);
  font-size: 11px;
  font-weight: 700;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-summary-specifications {
  color: var(--color-text);
  font-weight: 400;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-summary-specifications strong {
  font-weight: 700;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-meta {
  display: none !important;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-identity-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 0 0;
  border-top: 1px dotted var(--color-retained-cbd0d4);
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-identity-specs > div {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(0, 1fr);
  grid-column: 1 / -1;
  min-height: 28px;
  border-bottom: 1px dotted var(--color-retained-cbd0d4);
  font-size: 14.6667px;
  line-height: 28px;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-identity-specs dt {
  padding-left: 4px;
  color: var(--color-retained-566169);
  font-weight: 300;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-identity-specs dd {
  margin: 0;
  padding-left: 12px;
  border-left: 1px dotted var(--color-retained-cbd0d4);
  color: var(--color-text);
  font-weight: 700;
  overflow-wrap: anywhere;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-identity-specs .product-article {
  color: var(--color-text);
  font-size: inherit;
  font-weight: 700;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-moc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 16px;
  color: var(--color-retained-70777b);
  font-size: 13px;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-moc i {
  width: 30px;
  height: 18px;
  position: relative;
  display: inline-block;
  border-radius: 12px;
  background: var(--color-retained-878b8e);
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-moc i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-surface);
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-image {
  height: 632px !important;
  align-self: stretch !important;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-image > :is(img, .image-placeholder) {
  padding: 28px 42px 58px !important;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-thumbnail {
  left: 20px;
  bottom: 16px;
  width: 66px;
  height: 66px;
}
body.shop-public.reference-shell[data-shop-page="product"] main .buy-panel {
  min-width: 0 !important;
  padding: 0 0 18px !important;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-packages {
  margin: 0 10px 10px !important;
  padding-top: 10px !important;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-delivery-list {
  width: 100%;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-delivery-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 1.15fr);
  gap: 10px;
  align-items: center;
  min-height: 92px;
  padding: 12px 10px;
  border-top: 1px solid var(--color-retained-e1e3e7);
  border-bottom: 1px solid var(--color-retained-e1e3e7);
  background: var(--color-retained-f5f6fa);
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-delivery-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body.shop-public.reference-shell[data-shop-page="product"] main .delivery-stock {
  min-width: 102px;
  padding: 9px 10px;
  border-radius: 4px;
  background: var(--color-status-pending-bg);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
body.shop-public.reference-shell[data-shop-page="product"] main .delivery-stock.is-in-stock { background: var(--color-status-success-bg); }
body.shop-public.reference-shell[data-shop-page="product"] main .delivery-place {
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.3;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-delivery-commerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-delivery-price { min-width: 0; }
body.shop-public.reference-shell[data-shop-page="product"] main .product-price {
  display: block;
  margin: 0;
  color: var(--color-text);
  font-size: 20px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-delivery-price .price-caption {
  display: block;
  margin: 2px 0 0;
  color: var(--color-retained-626d73);
  font-size: 12px;
  line-height: 1.25;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-delivery-commerce .product-order-controls {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-delivery-commerce .quantity-control {
  grid-template-columns: 16px 16px 16px;
  width: 48px;
  height: 38px;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-delivery-commerce .quantity-control button { width: 16px; }
body.shop-public.reference-shell[data-shop-page="product"] main .product-delivery-commerce .quantity-control input { width: 16px; }
body.shop-public.reference-shell[data-shop-page="product"] main .product-delivery-commerce .product-order-button {
  min-height: 38px;
  padding: 7px 8px;
  font-size: 11px;
  white-space: normal;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-tabs {
  min-height: 52px;
  overflow-x: auto;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-tabs a {
  min-height: 52px;
  white-space: nowrap;
  text-transform: uppercase;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-tabs .reference-tab-icon {
  width: 22px;
  height: 22px;
  margin-right: 9px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-tabs .reference-legacy-section-link { display: none !important; }
body.shop-public.reference-shell[data-shop-page="product"] main .product-evidence {
  padding: 34px 38px 42px !important;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-section {
  padding-bottom: 24px;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-section h2 {
  margin-bottom: 22px;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.3;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-subsection {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--color-retained-e1e3e5);
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-subsection h3 {
  margin: 0 0 13px;
  color: var(--color-text);
  font-size: 15px;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-section p,
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-section li {
  color: var(--color-retained-5b656b);
  font-size: 14px;
  line-height: 1.5;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-section .spec-list {
  grid-template-columns: 1fr 1fr;
  margin: 0;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-section .spec-list div {
  min-height: 36px;
  padding: 7px 12px;
  border-bottom: 1px dotted var(--color-retained-cbd0d4);
  font-size: 14px;
}
body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-section .spec-list dd { font-weight: 700; }
body.shop-public.reference-shell[data-shop-page="product"] main #product-approvals { display: none !important; }

/* The horizontal list uses the same measured proportions as the supplied
   reference: 231px media, a full specification column and a narrow commerce
   rail. */
@media (min-width: 761px) {
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-layout {
    grid-template-columns: 252px minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-card {
    grid-template-columns: 231px minmax(0, 1fr) !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-card-media img {
    width: 200px;
    height: 200px;
    max-width: 100%;
    max-height: 100%;
    padding: 0 !important;
    object-fit: contain;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-card-body {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 10px !important;
    overflow: hidden;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-card h3 {
    font-size: 17px;
    line-height: 1.2;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-card-description {
    max-height: 33px;
    font-size: 12px;
    line-height: 1.35;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-card-specs {
    grid-template-columns: 1fr 1fr;
    flex: 0 1 auto;
    margin: 0;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-card-specs div {
    min-width: 0;
    padding: 2px 8px 2px 0;
    font-size: 11px;
    line-height: 1.35;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-commerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    min-width: 0;
    margin: auto 0 0;
    padding: 8px 0 0;
    gap: 0 12px;
    border-top: 1px solid var(--color-retained-e0e3e5);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  body.shop-public.reference-shell[data-shop-page="product"] main .product-page {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    min-height: 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-image {
    height: 390px !important;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-summary {
    padding: 17px 15px 12px !important;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-title {
    font-size: 22px !important;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-summary h1.product-detail-title {
    font-size: 22px !important;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-identity-specs {
    grid-template-columns: 1fr;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-delivery-row {
    grid-template-columns: 1fr;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-delivery-commerce {
    grid-template-columns: minmax(0, 1fr) minmax(165px, 1fr);
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-tabs {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    overflow-x: visible;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-tabs a {
    width: 100%;
    min-width: 0;
    min-height: 39px;
    padding: 9px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--color-retained-dfe2e5);
    white-space: normal;
    text-transform: none;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-tabs a:last-child {
    border-bottom: 0;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-evidence {
    padding: 23px 15px 28px !important;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-section .spec-list {
    grid-template-columns: 1fr;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results .product-grid.catalog-list-view .product-card {
    min-height: 0 !important;
  }
}
/* Final cascade for the recommendation rail. The legacy homepage rules above
   still style the older four-column grid; this scoped layer keeps the new
   track-based carousel from inheriting explicit zero-width columns. */
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products {
  min-height: 0 !important;
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  gap: 20px !important;
  margin-bottom: 22px !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading h2 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: clamp(26px, 2.4vw, 34px) !important;
  line-height: 1.15 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-mark {
  width: 28px !important;
  height: 28px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: var(--color-action) !important;
  font-size: initial !important;
  flex: none !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-mark svg {
  width: 100% !important;
  height: 100% !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-actions {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex: none !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-actions > .text-link {
  font-size: 15px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-arrow {
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--reference-blue) !important;
  border-radius: 50% !important;
  background: var(--color-surface) !important;
  color: var(--reference-blue) !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-arrow svg {
  width: 21px !important;
  height: 21px !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.8 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-viewport {
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  scroll-snap-type: x proximity !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-viewport::-webkit-scrollbar {
  display: none !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-grid {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-auto-columns: calc((100% - 30px) / 4) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card {
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
  scroll-snap-align: start !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-image {
  height: 286px !important;
  min-height: 286px !important;
  flex: none !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 1px solid var(--color-retained-eceeef) !important;
  background: var(--color-surface) !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  padding: 18px !important;
  object-fit: contain !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-body {
  min-width: 0 !important;
  min-height: 435px !important;
  height: auto !important;
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 16px 16px !important;
  text-align: center !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-tag {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: -1px 0 10px -16px !important;
  padding: 6px 11px !important;
  background: var(--color-text) !important;
  color: var(--color-surface) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-tag svg {
  width: 15px !important;
  height: 15px !important;
  flex: none !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card h3 {
  width: 100% !important;
  min-height: 43px !important;
  margin: 0 0 6px !important;
  font-size: 17px !important;
  line-height: 1.18 !important;
  overflow-wrap: anywhere !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card h3 a {
  color: var(--reference-blue) !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-code {
  min-height: 18px !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 5px !important;
  color: var(--reference-orange) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-code b {
  color: var(--color-text) !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-code b::before {
  content: "·" !important;
  margin-right: 5px !important;
  color: var(--reference-orange) !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-description {
  width: 100% !important;
  min-height: 53px !important;
  margin: 8px 0 6px !important;
  overflow: hidden !important;
  color: var(--color-text-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-price {
  width: 100% !important;
  min-height: 69px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  color: var(--color-text) !important;
  font-size: initial !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-price strong {
  display: block !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-price span {
  color: var(--color-text-muted) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card .product-order-controls {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  gap: 6px !important;
  margin-top: 10px !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card .quantity-control {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 28px !important;
  width: 96px !important;
  height: 44px !important;
  border: 1px solid var(--color-retained-cfd4d8) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card .quantity-control button {
  width: 28px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--color-retained-f3f4f5) !important;
  color: var(--reference-ink) !important;
  font-size: 21px !important;
  line-height: 1 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card .quantity-control input {
  width: 100% !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-inline: 1px solid var(--color-retained-cfd4d8) !important;
  border-radius: 0 !important;
  background: var(--color-surface) !important;
  text-align: center !important;
  font-size: 14px !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card .recommendation-order-button {
  width: 100% !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 8px 7px !important;
  border-radius: 3px !important;
  background: var(--reference-orange) !important;
  color: var(--color-surface) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card .recommendation-order-button svg {
  width: 20px !important;
  height: 20px !important;
  flex: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.8 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-compare {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin-top: 6px !important;
  color: var(--color-text) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-compare svg {
  width: 21px !important;
  height: 21px !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.7 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-status {
  width: 100% !important;
  display: grid !important;
  gap: 6px !important;
  margin-top: auto !important;
  padding-top: 10px !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-status-row {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: center !important;
  text-align: left !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-stock {
  min-width: 0 !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 8px !important;
  border-radius: 4px !important;
  color: var(--color-text) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-stock.is-positive { background: var(--color-status-success-bg) !important; }
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-stock.is-negative { background: var(--color-status-error-bg) !important; }
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-stock.is-neutral { background: var(--color-status-pending-bg) !important; }
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-stock svg,
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-delivery-icon svg {
  width: 19px !important;
  height: 19px !important;
  flex: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.8 !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-stock.is-positive svg { color: var(--color-status-success-icon) !important; }
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-stock.is-negative svg { color: var(--color-status-error-icon) !important; }
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-stock.is-neutral svg { color: var(--color-status-pending-icon) !important; }
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-status-context {
  min-width: 0 !important;
  color: var(--color-text-muted) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-delivery-icon {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--reference-orange) !important;
}

/* Final cascade guard for the tablet audit. The file contains older
   desktop/product-card parity layers above this point; keep the audited
   761–800px topology last so those layers cannot reopen a desktop grid. */
@media (min-width: 761px) and (max-width: 800px) {
  body.shop-public.reference-shell .storefront-utility { display: none !important; }
  body.shop-public.reference-shell .site-header {
    width: 100% !important;
    max-width: none !important;
    height: 152px !important;
    min-height: 152px !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-rows: 70px 62px !important;
    gap: 0 5px !important;
    padding: 10px 10px 9px !important;
  }
  body.shop-public.reference-shell .site-header .storefront-identity {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    transform: none !important;
  }
  body.shop-public.reference-shell .site-header .brand strong {
    font-size: 26px !important;
    letter-spacing: -1.7px !important;
  }
  body.shop-public.reference-shell .site-header .distributor-brand,
  body.shop-public.reference-shell .header-actions .header-account,
  body.shop-public.reference-shell .header-actions .language-menu { display: none !important; }
  body.shop-public.reference-shell .header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    gap: 4px !important;
  }
  body.shop-public.reference-shell .header-guest { display: block !important; }
  body.shop-public.reference-shell .site-header .header-login-menu { display: block !important; }
  body.shop-public.reference-shell .header-login-menu > summary,
  body.shop-public.reference-shell .site-header .header-cart {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    justify-content: center !important;
    padding: 8px !important;
  }
  body.shop-public.reference-shell .header-login-menu > summary span,
  body.shop-public.reference-shell .site-header .header-cart .sr-only { display: none !important; }
  body.shop-public.reference-shell .site-header .header-cart b { top: -4px !important; right: -3px !important; }
  body.shop-public.reference-shell .site-header .nav-toggle {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    align-self: start !important;
    margin: 0 !important;
  }
  body.shop-public.reference-shell .header-search {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-self: start !important;
    margin-left: 0 !important;
    transform: none !important;
  }
  body.shop-public.reference-shell .header-search input {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  body.shop-public.reference-shell .header-search button { width: 42px !important; height: 42px !important; }
  body.shop-public.reference-shell .site-header .site-nav {
    top: 152px !important;
    left: 0 !important;
    right: 0 !important;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    padding-top: 23px !important;
    padding-bottom: 34px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-section-heading h1,
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-section-heading h2 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-section-heading h1 { font-size: 28px !important; }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-category-grid {
    width: 646px !important;
    max-width: calc(100vw - 20px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-inline: auto !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-category {
    min-height: 153px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-category span {
    padding: 20px 29px !important;
    font-size: 28px !important;
    line-height: 32px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-category b {
    padding: 20px 24px !important;
    font-size: 39px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-services { padding-top: 49px !important; }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-grid {
    width: calc(100vw - 10px) !important;
    max-width: none !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(2, 240px) !important;
    gap: 10px !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card {
    height: 240px !important;
    min-height: 240px !important;
    grid-template-columns: 190px minmax(0, 1fr) !important;
    padding: 10px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card > img {
    width: 190px !important;
    height: 190px !important;
    min-height: 190px !important;
    padding: 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card > div {
    height: 220px !important;
    min-width: 0 !important;
    padding: 24px 20px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card p {
    font-size: 14.6667px !important;
    line-height: 24px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits {
    width: 100vw !important;
    min-height: 326px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 144px) !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 20px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits article {
    min-height: 144px !important;
    padding: 17px 12px !important;
    border-bottom: 1px solid var(--color-retained-e1e3e5) !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits article:nth-child(-n+3) { grid-column: span 2 !important; }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits article:nth-child(4) { grid-column: 1 / span 3 !important; }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits article:nth-child(5) {
    grid-column: 4 / span 3 !important;
    border-right: 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-notice {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 20px !important;
    font-size: 14.6667px !important;
    line-height: 24px !important;
    overflow: visible !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-notice h2 { font-size: 22px !important; }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news {
    height: auto !important;
    min-height: 393px !important;
    margin-top: 30px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news-card h3 { font-size: 20px !important; }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news-card p {
    font-size: 14.6667px !important;
    line-height: 24px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products {
    width: 100vw !important;
    min-height: 630px !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 40px !important;
    padding: 30px 0 42px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading {
    width: calc(100vw - 40px) !important;
    margin-inline: auto !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading h2 { font-size: 22px !important; }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-grid {
    width: max-content !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-auto-columns: 42vw !important;
    gap: 1px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card {
    height: 540px !important;
    min-height: 540px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-image {
    height: 200px !important;
    min-height: 200px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-body { min-height: 340px !important; }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card h3 {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-sidebar {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    order: 0 !important;
    overflow: visible !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .catalog-results {
    order: 1 !important;
    width: 100% !important;
  }

  body.shop-public.reference-shell[data-shop-page="product"] main .product-page {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas: "image" "summary" "buy" "tabs" "evidence" !important;
    min-height: 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-image {
    height: 632px !important;
    border-right: 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-summary h1.product-detail-title { font-size: 22px !important; }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-tabs {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    overflow-x: visible !important;
  }
  body.shop-public.reference-shell[data-shop-page="product"] main .product-detail-tabs a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 39px !important;
    white-space: normal !important;
    text-transform: none !important;
    border-right: 0 !important;
  }

  body.shop-public.reference-shell .site-footer {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    row-gap: 24px !important;
    padding: 30px 20px 28px !important;
  }
  body.shop-public.reference-shell .site-footer {
    grid-template-rows: 220px 187px 520px 250px 250px 250px !important;
    row-gap: 18px !important;
  }
  body.shop-public.reference-shell .site-footer > div,
  body.shop-public.reference-shell .site-footer .footer-lead,
  body.shop-public.reference-shell .site-footer .footer-company,
  body.shop-public.reference-shell .site-footer .footer-update-row,
  body.shop-public.reference-shell .site-footer .footer-bottom { grid-column: 1 !important; min-height: 0 !important; }
  body.shop-public.reference-shell .site-footer a,
  body.shop-public.reference-shell .site-footer button,
  body.shop-public.reference-shell .site-footer span,
  body.shop-public.reference-shell .site-footer small {
    font-size: 13.3333px !important;
    line-height: 26.6667px !important;
  }
  body.shop-public.reference-shell .site-footer .footer-update-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 9px !important;
    padding: 18px 0 !important;
  }
  body.shop-public.reference-shell .site-footer .footer-update-row .button { width: 100% !important; }
  body.shop-public.reference-shell .site-footer .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
}

@media (max-width: 1100px) {
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-grid {
    grid-auto-columns: calc((100% - 20px) / 3) !important;
  }
}

@media (max-width: 760px) {
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-actions {
    width: 100% !important;
    justify-content: space-between !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading h2 {
    font-size: 24px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-mark {
    width: 23px !important;
    height: 23px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-grid {
    grid-auto-columns: calc((100% - 8px) / 2) !important;
    gap: 8px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-image {
    height: 245px !important;
    min-height: 245px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-body {
    min-height: 415px !important;
    padding-inline: 12px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-tag {
    margin-left: -12px !important;
    padding: 6px 9px !important;
    font-size: 11px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card h3 {
    font-size: 15px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-description,
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-status-context {
    font-size: 11px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-price strong {
    font-size: 18px !important;
  }
}

@media (max-width: 440px) {
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-grid {
    grid-auto-columns: 100% !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-image {
    height: 285px !important;
    min-height: 285px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-body {
    min-height: 400px !important;
    padding-inline: 16px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-tag {
    margin-left: -16px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card h3 {
    font-size: 17px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-description,
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-status-context {
    font-size: 12px !important;
  }
}

/* Keep the final recommendation-rail defaults from reopening three equal
   columns after the tablet guard above. */
@media (min-width: 761px) and (max-width: 800px) {
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-grid {
    width: max-content !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-auto-columns: 42vw !important;
    gap: 1px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card {
    height: 540px !important;
    min-height: 540px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-image {
    height: 200px !important;
    min-height: 200px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-body { min-height: 340px !important; }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card h3 {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }
}

/* Final desktop/laptop cascade guard. This comes after the legacy <=1100px
   three-column fallback so 801–1100px retains the audited four-card rail. */
@media (min-width: 801px) {
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products {
    height: 685px !important;
    min-height: 685px !important;
    margin-top: 50px !important;
    padding: 20px 0 30px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading {
    width: 100% !important;
    margin: 0 0 24px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading h2 {
    font-size: 26.6667px !important;
    line-height: normal !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-actions {
    align-self: flex-start !important;
    margin-left: auto !important;
    margin-top: 5px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-actions > .text-link {
    display: none !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-controls {
    gap: 5px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-arrow {
    width: 23px !important;
    height: 23px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-viewport {
    width: 100% !important;
    height: 575px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-grid {
    width: 100% !important;
    height: 575px !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-auto-columns: calc((100% - 30px) / 4) !important;
    gap: 10px !important;
    padding: 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card {
    position: relative !important;
    height: 575px !important;
    min-height: 575px !important;
    padding: 12px 15px 21px !important;
    overflow: visible !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-image {
    width: calc(100% + 30px) !important;
    height: 200px !important;
    min-height: 200px !important;
    margin: 15px 0 0 -15px !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-body {
    min-height: 340px !important;
    padding: 0 0 16px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-tag {
    position: absolute !important;
    z-index: 2 !important;
    top: 211px !important;
    left: 1px !important;
    margin: 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card h3 {
    font-size: 22px !important;
    line-height: normal !important;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
}

/* The reference carousel cards keep a compact inner frame on both phone and
   tablet: 12/15/14px card padding, a 200px image inset by 28px, and the
   status badge layered over the image instead of consuming title space. */
@media (max-width: 800px) {
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card {
    position: relative !important;
    padding: 12px 15px 14px !important;
    overflow: visible !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-image {
    width: calc(100% + 30px) !important;
    height: 200px !important;
    min-height: 200px !important;
    margin: 15px 0 0 -15px !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-body {
    min-height: 340px !important;
    padding: 0 0 16px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-tag {
    position: absolute !important;
    z-index: 2 !important;
    top: 211px !important;
    left: 1px !important;
    margin: 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card h3 {
    line-height: normal !important;
  }
}

/* Finish the 761–800px rail geometry after the older 1100px/mobile layers. */
@media (min-width: 761px) and (max-width: 800px) {
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products {
    height: 630px !important;
    min-height: 630px !important;
    padding: 20px 0 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading {
    width: 100vw !important;
    margin: 0 0 24px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading h2 {
    font-size: 26.6667px !important;
    line-height: normal !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-actions {
    align-self: flex-start !important;
    margin-left: auto !important;
    margin-top: 5px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-actions > .text-link {
    display: none !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-controls {
    gap: 5px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-arrow {
    width: 23px !important;
    height: 23px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-viewport {
    height: 550px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-grid {
    height: 550px !important;
    padding: 10px 0 0 !important;
  }
}

/* Measured vertical alignment for the 768px control capture. */
@media (min-width: 761px) and (max-width: 800px) {
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-category-grid {
    margin-top: 7px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-services {
    padding-top: 63.5px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits {
    margin-top: 25px !important;
    row-gap: 38px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-notice {
    margin-top: 30px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-notice p {
    margin-bottom: 7px !important;
    line-height: 22px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products {
    padding-bottom: 2px !important;
  }
  body.shop-public.reference-shell .site-footer {
    margin-top: 30px !important;
    grid-template-rows: 220px 187px 520px 250px 250px 224px !important;
  }
}

/* Final 768px flow correction: the reference leaves a short blank band after
   the 3+2 benefit rows, while the homepage itself does not add another bottom
   padding band before the footer. */
@media (min-width: 761px) and (max-width: 800px) {
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home {
    padding-bottom: 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-category-grid {
    margin-top: 0 !important;
    padding-top: 7px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-notice {
    margin-top: 68px !important;
  }
}

/* The root catalogue browser uses a legacy class family. Bring it into the
   same full-width tablet flow as the filtered catalogue and the audited
   reference category page. */
@media (min-width: 761px) and (max-width: 800px) {
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-category-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-category-content {
    order: 1 !important;
    width: 100% !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-category-layout > .reference-category-tree {
    order: 2 !important;
    width: 100% !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-category-tiles,
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-unavailable-categories {
    display: none !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-category-heading {
    display: block !important;
    width: 100% !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-category-content h1 {
    margin: 7px 0 12px !important;
    font-size: 24px !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-category-layout > .reference-category-tree > header {
    min-height: 41px !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-category-layout > .reference-category-tree summary {
    min-height: 36px !important;
    font-size: 14.6667px !important;
  }
  body.shop-public.reference-shell[data-shop-page="catalog"] main .reference-category-layout > .reference-category-tree details a {
    min-height: 32px !important;
    font-size: 13.3333px !important;
  }
}

/* Extra-narrow 320px parity: the source increases the first service panel
   and gives the news/footer bands their taller wrapped-content rhythm. */
@media (max-width: 340px) {
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-grid {
    grid-template-rows: 481px 399px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card:first-child {
    height: 481px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news {
    height: 587px !important;
    min-height: 587px !important;
    margin-top: 30px !important;
  }
  html body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news {
    height: 587px !important;
    min-height: 587px !important;
    margin-top: 30px !important;
  }
}

/* Final narrow-screen parity: the source reference keeps the search field at
   the top of the second header row, gives news a fixed 527px content band,
   and exposes recommendations as a 42vw horizontal rail rather than one
   full-width card. */
@media (max-width: 760px) {
  body.shop-public.reference-shell .header-search {
    align-self: start !important;
  }
  body.shop-public.reference-shell .header-search input {
    height: 42px !important;
    min-height: 42px !important;
    font-size: 16px !important;
    line-height: 24px !important;
  }
  body.shop-public.reference-shell .header-search button {
    width: 42px !important;
    height: 42px !important;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news {
    width: 100vw !important;
    height: 527px !important;
    min-height: 527px !important;
    margin-top: 45px !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    padding-top: 4px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news
    > .reference-home-section-heading {
    width: calc(100vw - 40px) !important;
    margin: 0 auto 17px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news
    .reference-home-section-heading h2 {
    font-size: 22px !important;
    line-height: normal !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news-grid {
    width: calc(100vw - 20px) !important;
    margin-inline: auto !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-all-news {
    display: block !important;
    width: calc(100vw - 20px) !important;
    margin-inline: auto !important;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products {
    width: 100vw !important;
    height: 660px !important;
    min-height: 660px !important;
    margin-left: 50% !important;
    margin-top: 30px !important;
    transform: translateX(-50%) !important;
    padding: 20px 0 30px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading {
    width: 100vw !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 0 24px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading h2 {
    min-width: 0 !important;
    font-size: 26.6667px !important;
    line-height: normal !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-mark {
    width: 23px !important;
    height: 23px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-actions {
    width: auto !important;
    flex: none !important;
    align-self: flex-start !important;
    margin-left: auto !important;
    margin-top: 5px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-actions > .text-link {
    display: none !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-controls {
    gap: 5px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-arrow {
    width: 23px !important;
    height: 23px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-arrow svg {
    width: 17px !important;
    height: 17px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-viewport {
    width: 100vw !important;
    height: 550px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-grid {
    width: max-content !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-auto-columns: 42vw !important;
    gap: 1px !important;
    padding: 10px 0 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card {
    height: 540px !important;
    min-height: 540px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-image {
    height: 200px !important;
    min-height: 200px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-body {
    min-height: 340px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card h3 {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }
}

/* Final recommendation-card cleanup. Keep the rail compact, but let every
   text block participate in normal flow so long product names cannot collide
   with the brand, description or price. */
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products {
  padding-top: 32px;
  padding-bottom: 34px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading {
  gap: 14px;
  margin-bottom: 16px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading h2 {
  gap: 8px;
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1.2;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-mark {
  width: 20px;
  height: 20px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-mark svg {
  width: 18px;
  height: 18px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-arrow {
  width: 32px;
  height: 32px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-arrow svg {
  width: 17px;
  height: 17px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-grid {
  gap: 12px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-image {
  height: 230px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-image img {
  padding: 14px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-body {
  min-height: 390px;
  padding: 0 14px 14px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-tag {
  gap: 4px;
  margin-left: -14px;
  margin-bottom: 8px;
  padding: 5px 9px;
  font-size: 11px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-tag svg {
  width: 12px;
  height: 12px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card h3 {
  min-height: 2.4em;
  height: auto;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.2;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-code {
  min-height: 18px;
  line-height: 1.3;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-description {
  min-height: 48px;
  margin: 8px 0 4px;
  line-height: 1.35;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-price {
  min-height: 64px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-price strong {
  font-size: 18px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card .product-order-controls {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 6px;
  margin-top: 8px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card .quantity-control {
  width: 88px;
  grid-template-columns: 25px minmax(0, 1fr) 25px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card .quantity-control button {
  width: 25px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card .recommendation-order-button {
  padding-inline: 6px;
  font-size: 12px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card .recommendation-order-button svg {
  width: 18px;
  height: 18px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-compare {
  gap: 6px;
  font-size: 12px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-compare svg {
  width: 18px;
  height: 18px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-stock {
  min-height: 30px;
  gap: 5px;
  padding: 4px 6px;
  font-size: 11px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-stock svg,
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-delivery-icon svg {
  width: 17px;
  height: 17px;
}
body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-status-context {
  font-size: 11px;
}

@media (max-width: 760px) {
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 24px !important;
    padding: 18px 0 26px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading {
    width: 100vw !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-heading h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-mark {
    width: 18px !important;
    height: 18px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-mark svg {
    width: 16px !important;
    height: 16px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-arrow {
    width: 28px !important;
    height: 28px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-products-arrow svg {
    width: 15px !important;
    height: 15px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-viewport {
    height: auto !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-grid {
    width: max-content !important;
    grid-auto-columns: min(340px, calc(100vw - 24px)) !important;
    gap: 10px !important;
    padding: 0 12px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card {
    height: auto !important;
    min-height: 0 !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-image {
    height: 190px !important;
    min-height: 190px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-body {
    min-height: 0 !important;
    padding: 0 14px 14px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-tag {
    margin-left: -14px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-card h3 {
    min-height: 2.4em !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 440px) {
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-grid {
    grid-auto-columns: min(340px, calc(100vw - 24px)) !important;
  }
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-image {
    height: 190px !important;
  }
}

/* Compact header and overview footer. Keep this final so the parity audit
   cannot reopen the oversized legacy geometry above. */
@media (min-width: 801px) {
  body.shop-public.reference-shell[data-shop-page] .storefront-utility,
  body.shop-public.reference-shell[data-shop-page] .storefront-utility-inner {
    min-height: 48px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .storefront-utility {
    font-size: 11px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .storefront-utility-inner {
    gap: 18px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .storefront-utility nav {
    gap: 16px !important;
    min-width: 0;
  }

  body.shop-public.reference-shell[data-shop-page] .storefront-utility nav a {
    min-width: 0;
    white-space: nowrap;
  }

  body.shop-public.reference-shell[data-shop-page] .utility-contact,
  body.shop-public.reference-shell[data-shop-page] .utility-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }

  body.shop-public.reference-shell[data-shop-page] .utility-contact {
    flex: 0 0 auto;
    gap: 7px;
    color: var(--reference-ink);
  }

  body.shop-public.reference-shell[data-shop-page] .utility-contact svg {
    flex: none;
    color: var(--reference-muted);
  }

  body.shop-public.reference-shell[data-shop-page] .utility-contact-separator {
    color: var(--color-retained-b3bac0);
  }

  body.shop-public.reference-shell[data-shop-page] .utility-phone:hover {
    color: var(--reference-orange);
    text-decoration: none;
  }

  body.shop-public.reference-shell[data-shop-page] .utility-overview {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    background: var(--reference-orange);
    color: var(--color-surface);
  }

  body.shop-public.reference-shell[data-shop-page] .utility-overview:hover,
  body.shop-public.reference-shell[data-shop-page] .utility-overview[aria-current="page"] {
    background: var(--reference-orange-dark);
    color: var(--color-surface);
    text-decoration: none;
  }

  body.shop-public.reference-shell[data-shop-page] .utility-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  body.shop-public.reference-shell[data-shop-page] .utility-login svg {
    width: 27px;
    height: 27px;
    padding: 5px;
    border-radius: 50%;
    background: var(--reference-orange);
    color: var(--color-surface);
  }

  body.shop-public.reference-shell[data-shop-page] .utility-login:hover {
    text-decoration: none;
  }

  body.shop-public.reference-shell[data-shop-page] .site-header {
    width: var(--reference-page) !important;
    max-width: var(--reference-page) !important;
    margin-inline: auto !important;
    min-height: 136px !important;
    grid-template-columns: 260px minmax(360px, 1fr) 190px !important;
    gap: 24px !important;
    padding: 13px 0 15px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .site-header .brand strong {
    font-size: 42px !important;
    letter-spacing: -2.7px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .site-header .distributor-brand {
    margin-top: 7px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .site-header .distributor-logo-space {
    padding-top: 2px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .site-header .distributor-logo-space img {
    width: 78px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .header-search input,
  body.shop-public.reference-shell[data-shop-page] .header-search button {
    height: 44px !important;
    min-height: 44px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .header-search input {
    font-size: 14px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .header-search button {
    width: 46px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .header-actions {
    gap: 4px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .language-menu-trigger {
    width: 38px;
    height: 38px;
  }

  body.shop-public.reference-shell[data-shop-page] .site-header .header-cart {
    min-width: 122px !important;
    min-height: 42px !important;
    height: 42px;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 7px 9px !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.shop-public.reference-shell[data-shop-page] .site-header .header-cart:hover {
    color: var(--reference-orange);
  }

  body.shop-public.reference-shell[data-shop-page] .header-cart-total {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.05;
    white-space: nowrap;
  }

  body.shop-public.reference-shell[data-shop-page] .header-cart-total strong {
    color: var(--reference-ink);
    font-size: 13px;
  }

  body.shop-public.reference-shell[data-shop-page] .header-cart-total small {
    color: var(--reference-muted);
    font-size: 9px;
  }
}

body.shop-public.reference-shell[data-shop-page] .overview-page {
  min-height: 88px;
}

body.shop-public.reference-shell[data-shop-page] .overview-breadcrumbs {
  min-height: 88px;
  align-items: center;
  padding: 20px 0;
  font-size: 14px;
}

body.shop-public.reference-shell[data-shop-page] .overview-breadcrumbs a {
  display: inline-flex;
  align-items: center;
  color: var(--reference-muted);
}

body.shop-public.reference-shell[data-shop-page] .overview-breadcrumbs h1 {
  margin: 0;
  color: var(--reference-muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

@media (max-width: 760px) {
  body.shop-public.reference-shell[data-shop-page] .site-header {
    min-height: 112px !important;
    grid-template-rows: 52px 48px !important;
    padding: 6px 10px 0 !important;
  }

  body.shop-public.reference-shell[data-shop-page] .header-search input,
  body.shop-public.reference-shell[data-shop-page] .header-search button {
    height: 40px !important;
    min-height: 40px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .header-search input {
    font-size: 14px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .header-search button {
    width: 42px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .overview-page,
  body.shop-public.reference-shell[data-shop-page] .overview-breadcrumbs {
    min-height: 62px;
  }

  body.shop-public.reference-shell[data-shop-page] .overview-breadcrumbs {
    padding: 12px 0;
  }
}

/* Keep the compact desktop header within the viewport at tablet-desktop widths. */
@media (min-width: 761px) and (max-width: 1100px) {
  body.shop-public.reference-shell[data-shop-page] .header-cart-total {
    display: none !important;
  }
}

/* The language switch is a primary buyer control. Keep it visible beside the
   account/cart controls at every shell width; older parity layers hid it. */
body.shop-public.reference-shell[data-shop-page] .header-actions .language-menu {
  display: block !important;
  flex: 0 0 38px;
}

body.shop-public.reference-shell[data-shop-page] .language-menu-trigger {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid var(--color-retained-d7dce0);
  border-radius: 3px;
  color: var(--reference-ink);
}

body.shop-public.reference-shell[data-shop-page] .language-menu-trigger:hover,
body.shop-public.reference-shell[data-shop-page] .language-menu[open] .language-menu-trigger {
  border-color: var(--reference-orange);
  background: var(--color-surface);
  color: var(--reference-orange);
}

body.shop-public.reference-shell[data-shop-page] .language-menu-panel {
  z-index: 70;
  border-radius: 3px;
  box-shadow: 0 8px 22px var(--color-retained-1f293726);
}

@media (max-width: 800px) {
  body.shop-public.reference-shell[data-shop-page] .header-actions .language-menu {
    flex-basis: 38px;
  }

  body.shop-public.reference-shell[data-shop-page] .language-menu-panel {
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
  }
}

/* Make the restored switch unmistakable: show the active locale beside the
   globe while keeping the control within the reference header geometry. */
body.shop-public.reference-shell[data-shop-page] .language-menu-trigger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 56px !important;
  padding-inline: 7px !important;
}

body.shop-public.reference-shell[data-shop-page] .language-menu-trigger > svg:first-child {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
}

body.shop-public.reference-shell[data-shop-page] .language-menu-code {
  color: currentColor;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

body.shop-public.reference-shell[data-shop-page] .language-menu-chevron {
  width: 11px !important;
  height: 11px !important;
  flex: 0 0 11px;
}

@media (max-width: 800px) {
  body.shop-public.reference-shell[data-shop-page] .language-menu-trigger {
    width: 52px !important;
    padding-inline: 5px !important;
  }
}

@media (max-width: 360px) {
  body.shop-public.reference-shell[data-shop-page] .language-menu-trigger {
    width: 44px !important;
    gap: 3px;
    padding-inline: 3px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .language-menu-code {
    font-size: 10px;
  }

  body.shop-public.reference-shell[data-shop-page] .language-menu-chevron {
    display: none;
  }
}

/* Homepage geometry parity at the audited desktop width. The reference uses
   a 1210px content rail, a 56px utility bar and fixed-height promotional
   bands. Keep the local content and responsive behaviour, but make the
   measured blocks land on the same coordinates. */
@media (min-width: 801px) {
  body.shop-public.reference-shell[data-shop-page="home"] .storefront-utility,
  body.shop-public.reference-shell[data-shop-page="home"] .storefront-utility-inner {
    min-height: 56px !important;
    height: 56px !important;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .site-header {
    grid-template-columns: 279px minmax(360px, 1fr) 177.7px !important;
    gap: 0 !important;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .storefront-identity {
    width: 279px;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .header-search {
    max-width: 480px !important;
    justify-self: center !important;
    height: 62px !important;
    margin-inline: auto !important;
    transform: translateY(1px);
  }

  body.shop-public.reference-shell[data-shop-page="home"] .header-search input,
  body.shop-public.reference-shell[data-shop-page="home"] .header-search button {
    height: 42px !important;
    min-height: 42px !important;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .header-search button {
    width: 42px !important;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-categories
    .reference-home-section-heading {
    height: 44px !important;
    margin-bottom: 20px !important;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-category-grid {
    box-sizing: border-box;
    height: 326px !important;
    min-height: 326px !important;
    grid-template-rows: repeat(2, 153px) !important;
    padding: 5px !important;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-category {
    min-height: 153px !important;
    height: 153px !important;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-services {
    padding-top: 44px !important;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-services
    .reference-home-section-heading {
    height: 44px !important;
    margin-bottom: 20px !important;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-grid {
    box-sizing: border-box;
    height: 250px !important;
    min-height: 250px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
    padding: 5px !important;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card,
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-card > img {
    height: 240px !important;
    min-height: 240px !important;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-benefits {
    height: 182px !important;
    min-height: 182px !important;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-notice {
    box-sizing: border-box;
    height: 216px !important;
    min-height: 216px !important;
  }

  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-news {
    box-sizing: border-box;
    height: 375px !important;
    min-height: 375px !important;
  }

}

@media (min-width: 1101px) {
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-service-grid {
    grid-template-columns: 601px 589px !important;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  body.shop-public.reference-shell[data-shop-page="home"] .reference-home-product-grid {
    grid-auto-columns: calc((100% - 20px) / 3) !important;
  }
}

/* Catalog landing parity. The legacy reference puts the breadcrumb, the
   full-width title/search row, and the category browser on three compact
   desktop bands. Keep the local motor/viscosity data, but use the same rail,
   tree rhythm, and footer start as the supplied category capture. */
body.shop-public.reference-shell[data-shop-page="catalog"]
  .reference-category-browser .reference-category-tree > header {
  display: none;
}

body.shop-public.reference-shell[data-shop-page="catalog"]
  .reference-motor-category-landing .reference-category-nested > div {
  display: none;
}

@media (min-width: 801px) {
  body.shop-public.reference-shell[data-shop-page="catalog"] .storefront-utility,
  body.shop-public.reference-shell[data-shop-page="catalog"] .storefront-utility-inner {
    height: 54.5px !important;
    min-height: 54.5px !important;
    max-height: 54.5px !important;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .site-header {
    width: var(--reference-page) !important;
    max-width: var(--reference-page) !important;
    height: 155px !important;
    min-height: 155px !important;
    max-height: 155px !important;
    grid-template-columns: 279px minmax(360px, 1fr) 177.7px !important;
    gap: 0 !important;
    padding: 13px 0 15px !important;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .storefront-identity {
    width: 279px;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .header-search {
    width: 480px !important;
    max-width: 480px !important;
    height: 62px !important;
    justify-self: center !important;
    margin-inline: auto !important;
    transform: translateY(1px);
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .header-search input,
  body.shop-public.reference-shell[data-shop-page="catalog"] .header-search button {
    height: 42px !important;
    min-height: 42px !important;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .header-search button {
    width: 42px !important;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-browser {
    padding: 0 0 30px !important;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-breadcrumbs {
    height: 33px !important;
    min-height: 33px !important;
    box-sizing: border-box;
    padding: 0 0 5px !important;
    align-items: flex-start !important;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-heading {
    height: 62px !important;
    min-height: 62px !important;
    box-sizing: border-box;
    align-items: flex-start !important;
    gap: 20px;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-heading .reference-eyebrow {
    display: none;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-heading h1 {
    width: auto;
    height: 52px;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 10px 0 0;
    font-size: 24px;
    line-height: 32px;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-heading .reference-quick-search {
    width: 305px;
    height: 52px;
    box-sizing: border-box;
    margin: 0 0 0 auto;
    padding: 10px 0;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-heading .reference-quick-search > span {
    display: none;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-heading .reference-quick-search input {
    width: 305px;
    height: 32px;
    min-height: 32px;
    box-sizing: border-box;
    padding: 5px 35px 5px 10px;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout {
    height: 480px;
    min-height: 480px;
    margin: 0 !important;
    grid-template-columns: 317px minmax(0, 1fr) !important;
    gap: 25px !important;
    align-items: start;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout > .reference-category-tree {
    width: 317px;
    height: 480px;
    box-sizing: border-box;
    border: 0;
    background: transparent;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout > .reference-category-tree details {
    border-bottom: 1px solid var(--color-retained-d9dcdf);
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout > .reference-category-tree summary {
    height: 30px;
    min-height: 30px;
    box-sizing: border-box;
    padding: 0 8px;
    background: var(--color-retained-e5e6e8);
    font-size: 14px;
    line-height: 30px;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout > .reference-category-tree details[open] > summary {
    background: var(--color-retained-dedfe1);
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout > .reference-category-tree summary::before {
    margin-right: 7px;
    font-size: 16px;
    line-height: 30px;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout > .reference-category-tree summary small,
  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout > .reference-category-tree details a small,
  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout > .reference-category-tree .reference-category-disabled small {
    min-width: 30px;
    padding: 1px 5px;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout > .reference-category-tree details > div {
    padding: 0 8px 0 25px;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout > .reference-category-tree details a,
  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout > .reference-category-tree .reference-category-disabled {
    height: 30px;
    min-height: 30px;
    box-sizing: border-box;
    padding: 3px 6px;
    font-size: 14px;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout > .reference-category-tree .reference-category-nested > summary {
    min-height: 30px;
    padding-left: 4px;
    font-size: 14px;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout > .reference-category-tree summary > span,
  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout > .reference-category-tree details a > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-content {
    width: auto;
    height: 480px;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-viscosity-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: start;
  }

}

@media (min-width: 801px) and (max-width: 1100px) {
  body.shop-public.reference-shell[data-shop-page="catalog"] .site-header {
    grid-template-columns: 220px minmax(300px, 1fr) 170px !important;
    gap: 18px !important;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .storefront-identity {
    width: 220px;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .header-search {
    width: min(480px, 100%) !important;
    max-width: 480px !important;
  }
}

@media (min-width: 761px) and (max-width: 800px) {
  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-heading {
    min-height: 62px;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout {
    grid-template-columns: 245px minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-layout > .reference-category-tree {
    width: auto;
    height: auto;
  }
}

@media (max-width: 760px) {
  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-heading h1 {
    margin: 7px 0 12px !important;
    font-size: 24px;
  }

  body.shop-public.reference-shell[data-shop-page="catalog"] .reference-category-heading .reference-eyebrow {
    font-size: 10px;
  }
}

/* Square reference controls. The buyer UI system gives generic fields and
   buttons a softer radius; the catalogue reference uses compact 2–3px
   corners, while count badges and circular action controls stay round. */
body.shop-public.reference-shell[data-shop-page] :is(
  .header-search input,
  .reference-quick-search input,
  .header-login-menu > summary,
  .header-account > summary,
  .language-menu-trigger,
  .catalog-sort select,
  .catalog-toolbar select,
  .reference-pack-chips a,
  .reference-filter-panel,
  .button:not(.order-icon-button)
) {
  border-radius: 3px !important;
}

body.shop-public.reference-shell[data-shop-page] .header-search button {
  border-radius: 0 3px 3px 0 !important;
}

body.shop-public.reference-shell[data-shop-page] .catalog-view-toggle button {
  border-radius: 0 !important;
}

body.shop-public.reference-shell[data-shop-page] .catalog-results .product-card {
  border-radius: 2px !important;
}

/* Canonical public-shell geometry. This is intentionally shared by every
   buyer route: page content can keep its natural height, while the outer rail,
   utility bar, header and footer use one measurable standard. */
@media (min-width: 801px) {
  body.shop-public.reference-shell[data-shop-page] {
    --reference-page: var(--shop-page-width);
    --page: var(--shop-page-width);
  }

  body.shop-public.reference-shell[data-shop-page] .storefront-utility,
  body.shop-public.reference-shell[data-shop-page] .storefront-utility-inner {
    width: 100%;
    height: var(--shop-utility-height) !important;
    min-height: var(--shop-utility-height) !important;
    max-height: var(--shop-utility-height) !important;
  }

  body.shop-public.reference-shell[data-shop-page] .storefront-utility-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: var(--shop-page-width);
    max-width: var(--shop-page-width);
    margin-inline: auto;
  }

  body.shop-public.reference-shell[data-shop-page] .site-header {
    width: var(--shop-page-width) !important;
    max-width: var(--shop-page-width) !important;
    height: var(--shop-header-height) !important;
    min-height: var(--shop-header-height) !important;
    max-height: var(--shop-header-height) !important;
    margin-inline: auto !important;
    grid-template-columns:
      var(--shop-header-identity-width)
      minmax(0, 1fr)
      var(--shop-header-actions-width) !important;
    grid-template-rows: 1fr !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    gap: 0 !important;
    padding: 13px 0 15px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .site-header .storefront-identity {
    width: var(--shop-header-identity-width);
  }

  body.shop-public.reference-shell[data-shop-page] .header-search {
    width: var(--shop-header-search-width) !important;
    max-width: var(--shop-header-search-width) !important;
    height: var(--shop-header-search-height) !important;
    justify-self: center !important;
    margin-inline: auto !important;
    transform: translateY(1px);
  }

  body.shop-public.reference-shell[data-shop-page] .header-search input,
  body.shop-public.reference-shell[data-shop-page] .header-search button {
    height: 42px !important;
    min-height: 42px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .header-search button {
    width: 42px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .header-actions {
    width: var(--shop-header-actions-width) !important;
    min-width: 0 !important;
    overflow: visible !important;
    justify-content: flex-end !important;
    gap: 4px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .site-footer {
    height: auto !important;
    min-height: var(--shop-footer-min-height) !important;
    box-sizing: border-box;
  }
}

/* At tablet-desktop widths keep the same shell rhythm without allowing the
   fixed reference search field to create horizontal page overflow. */
@media (min-width: 801px) and (max-width: 1100px) {
  body.shop-public.reference-shell[data-shop-page] .site-header {
    grid-template-columns: 220px minmax(0, 1fr) 170px !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
  }

  body.shop-public.reference-shell[data-shop-page] .site-header .storefront-identity {
    width: 220px;
  }

  body.shop-public.reference-shell[data-shop-page] .header-search {
    width: min(480px, 100%) !important;
    max-width: 480px !important;
  }

  body.shop-public.reference-shell[data-shop-page] .header-actions {
    width: 170px !important;
  }
}

/* Center buyer links in the space between contact details and account actions. */
@media (min-width: 801px) {
  body.shop-public.reference-shell[data-shop-page] .storefront-utility nav {
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 16px !important;
    row-gap: 4px;
  }
}
.shop-public .utility-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}