/*
 * Additions to the approved concept's stylesheet.
 *
 * The concept's own CSS (assets/index-D0c4vUIj.css) is the design system and is
 * loaded first; this file only covers what it has no equivalent for, because the
 * concept is a homepage and two product pages and the application has 22 public
 * routes. Everything here is built from the concept's own custom properties, so
 * additions inherit the palette rather than introducing a second one.
 *
 * Two kinds of rule live here:
 *
 * 1. Progressive navigation. Desktop panels have a hover/focus CSS fallback;
 *    mobile panels use native <details>. These rules position the panels the
 *    way the concept positions them; navigation works without scripts.
 * 2. Components the concept never needed — breadcrumbable page headers, listing
 *    empty states, subcategory lists, form layouts and the administration area.
 *
 * If you find yourself adding a rule that duplicates something the concept
 * already styles, use the concept's class instead. See Doc/Design-System.md.
 */

/* --- navigation menus ---------------------------------------------------- */

.mobile-nav-wrap > summary,
.mobile-machinery-group > summary,
.mobile-used-categories > summary {
  cursor: pointer;
  list-style: none;
}
.mobile-nav-wrap > summary::-webkit-details-marker,
.mobile-machinery-group > summary::-webkit-details-marker,
.mobile-used-categories > summary::-webkit-details-marker {
  display: none;
}

/* Labels are links to their selection grids. Hover/focus opens a temporary
   dropdown without changing the normal click destination. */
.desktop-nav .nav-menu-label {
  align-items: center;
  color: #33495e;
  display: inline-flex;
  font-size: 12px;
  font-weight: 620;
  gap: 6px;
  padding: 10px 0;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}
.desktop-nav .nav-menu-label:hover { color: var(--scott-cyan); }
.desktop-nav .nav-menu-label::after {
  content: "";
  height: 40px;
  left: -10px;
  position: absolute;
  right: -10px;
  top: 100%;
}

/* The concept anchors .mega-menu to .header-inner, which is position:relative.
   Leaving this wrapper unpositioned keeps that anchor, so the panel spans the
   header rather than the menu item. */
.desktop-nav .nav-menu { position: static; }
.desktop-nav .nav-menu > .mega-menu { display: none; }
.desktop-nav .nav-menu:hover > .mega-menu,
.desktop-nav .nav-menu:has(:focus-visible) > .mega-menu { display: block; }
.desktop-nav .nav-menu:hover > .nav-menu-label span:last-child,
.desktop-nav .nav-menu:has(:focus-visible) > .nav-menu-label span:last-child {
  transform: rotate(180deg);
}

.mobile-nav-wrap > summary {
  display: none;
}
.mobile-nav-wrap > .mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1001;
  box-shadow: 0 24px 60px #061f3a1f;
}
.mobile-machinery-group > summary {
  border-bottom: 1px solid #e8edf1;
  color: var(--scott-blue);
  display: flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: space-between;
  padding: 13px 0;
}
.mobile-used-categories > summary {
  border-bottom: 1px solid #e8edf1;
  color: var(--scott-blue);
  display: flex;
  font-size: 12px;
  font-weight: 780;
  justify-content: space-between;
  padding: 13px 0;
}
.mobile-used-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 5px 0 12px 12px;
}
.mobile-used-grid a {
  border: 0;
  color: #4a6072;
  font-size: 10px;
  padding: 7px 8px 7px 0;
  white-space: normal;
}
.mobile-machinery-grid {
  display: grid;
  gap: 2px;
  padding: 4px 0 10px 12px;
}

/* Keep the complete desktop navigation through tablet-landscape and compact
   desktop widths. The concept collapses at 1130px; this intermediate treatment
   preserves all destinations until space genuinely becomes mobile-sized. */
@media (min-width: 961px) and (max-width: 1130px) {
  .header-inner {
    gap: 14px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .site-header .scott-logo-crop {
    height: 68px;
    width: 175px;
  }
  .site-header .scott-logo-crop img {
    height: 68px;
    left: -114px;
  }
  .desktop-nav {
    display: flex;
    gap: 9px;
  }
  .desktop-nav > a,
  .desktop-nav .nav-menu-label { font-size: 10px; }
  .header-actions { gap: 6px; }
  .icon-button {
    min-height: 38px;
    width: 38px;
  }
  .cart-button {
    min-height: 38px;
    padding-left: 12px;
    padding-right: 10px;
  }
  .header-cta {
    min-height: 38px;
    padding-left: 17px;
    padding-right: 17px;
  }
}

@media (max-width: 960px) {
  .mobile-nav-wrap > summary { display: grid; }
}

/* --- footer branding ------------------------------------------------------ */

/* Centre the original letterhead's company mark, leaving clear white space
   around it. The small concept crop clipped the mark against rounded edges.
   This is footer-only; the source artwork and header sizing stay unchanged. */
.footer-brand .scott-logo-crop {
  border-radius: 6px;
  height: 88px;
  width: 210px;
}
.footer-brand .scott-logo-crop img {
  height: 70px;
  left: 50%;
  top: 9px;
  transform: translateX(-50%);
}

/* --- accessibility -------------------------------------------------------- */

.skip-link {
  background: var(--scott-navy);
  color: #fff;
  left: -9999px;
  padding: 12px 18px;
  position: absolute;
  top: 0;
  z-index: 2000;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

:focus-visible {
  outline: 3px solid var(--scott-cyan);
  outline-offset: 2px;
}

.product-lightbox[hidden] { display: none; }
body.lightbox-open { overflow: hidden; }
.search-layer[hidden] { display: none; }
body.search-open { overflow: hidden; }

.search-pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 32px auto 64px;
}
.search-pagination a {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--scott-blue);
  min-width: 40px;
  padding: 10px 14px;
  text-align: center;
  text-decoration: none;
}
.search-pagination a:hover,
.search-pagination a.active {
  background: var(--scott-blue);
  border-color: var(--scott-blue);
  color: #fff;
}

/* --- page scaffolding ----------------------------------------------------- */

.page-header {
  margin: 0 auto;
  max-width: 1180px;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3.3vw, 52px) clamp(16px, 2vw, 28px);
}
.page-header h1 {
  color: var(--scott-ink);
  font-size: clamp(28px, 3.4vw, 46px);
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.page-header .lede,
.page-section p.lede {
  color: var(--steel);
  font-size: clamp(15px, 1.15vw, 18px);
  max-width: 60ch;
}

/* Search balances short result sets without widening cards or changing other listings. */
.search-page { padding-bottom: clamp(56px, 6vw, 88px); }
.search-results-header { max-width: 960px; text-align: center; padding-bottom: 32px; }
.search-results-header h1 { margin-bottom: 24px; }
.search-results-header .search-form { max-width: 760px; margin-inline: auto; }
.search-results-header .search-results-summary {
  max-width: 100%;
  margin: 22px auto 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.search-results { max-width: 1384px; padding-inline: clamp(20px, 3.3vw, 52px); margin-inline: auto; }
.search-results-grid-compact { display: flex; flex-wrap: wrap; justify-content: center; }
.search-results-grid-compact > .arrival-card { flex: 0 1 calc(25% - 13.5px); max-width: 360px; }
.search-results .listing-empty { max-width: 760px; margin: 0 auto; text-align: center; }
.search-results .search-pagination { margin-bottom: 0; }
@media (max-width: 1130px) {
  .search-results-grid-compact > .arrival-card { flex-basis: calc(50% - 9px); }
}
@media (max-width: 640px) {
  .search-results-header { padding-inline: 17px; padding-top: 28px; }
  .search-results-header h1 { margin-bottom: 20px; }
  .search-results { padding-inline: 17px; }
  .search-results-grid-compact > .arrival-card { flex-basis: 100%; max-width: none; }
}
.page-section {
  margin: 0 auto;
  max-width: 1180px;
  padding: clamp(20px, 3vw, 40px) clamp(20px, 3.3vw, 52px);
}
.page-section h2 {
  color: var(--scott-ink);
  font-size: clamp(20px, 2vw, 28px);
  margin-bottom: 10px;
}
.page-section p { color: #3d5366; margin-bottom: 12px; max-width: 70ch; }
.page-section h2 + p { margin-top: 0; }

/* The original commercial document is readable directly on the Terms page. */
.commercial-terms { border-top: 1px solid var(--line); padding-bottom: 64px; }
.commercial-terms h2 { max-width: 34ch; margin-bottom: 24px; }
.commercial-terms-copy { max-width: 76ch; }
.commercial-terms-copy p,
.commercial-terms-copy li { font-size: 15px; line-height: 1.75; color: #3d5366; }
.commercial-terms-copy p { max-width: none; margin-bottom: 16px; }
.commercial-terms-copy h3 {
  color: var(--scott-navy);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 600;
  margin: 32px 0 12px;
}
.commercial-terms-copy strong { font-weight: 650; }
.commercial-terms-copy ul { list-style: none; margin: 0 0 20px; padding-left: 24px; }
.commercial-terms-copy li { margin-bottom: 10px; }
#commercial-terms,
.commercial-terms-copy h3 { scroll-margin-top: 150px; }

/* Terms-only reading layout; the imported commercial wording is unchanged. */
.terms-page { max-width: 900px; margin: 0 auto; padding: 0 clamp(20px, 3.3vw, 40px); }
main:has(> .terms-page) > .product-breadcrumbs { max-width: 900px; padding-inline: clamp(20px, 3.3vw, 40px); }
.terms-page .terms-header { padding: 36px 0 28px; margin: 0; }
.terms-page .terms-header h1 { margin: 0; line-height: 1.15; }
.terms-page .terms-information { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 0 0 36px; }
.terms-page .terms-information h2 { font-size: 20px; line-height: 1.3; margin: 0 0 10px; }
.terms-page .terms-information p { font-size: 15px; line-height: 1.7; margin: 0; }
.terms-page .commercial-terms { padding: 36px 0 64px; }
.terms-page .commercial-terms h2 { max-width: none; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.25; margin: 0 0 20px; }
.terms-page .commercial-terms-copy { max-width: none; }
.terms-page .commercial-terms-copy h3 { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 32px; line-height: 1.35; }
.terms-page .commercial-terms-copy ul { padding-left: 20px; }
.terms-page .commercial-terms-copy li { padding-left: 4px; }
@media (max-width: 600px) {
  .terms-page .terms-header { padding-top: 28px; padding-bottom: 24px; }
  .terms-page .terms-information { gap: 24px; padding-bottom: 28px; }
  .terms-page .commercial-terms { padding-top: 28px; padding-bottom: 44px; }
  .terms-page .commercial-terms-copy h3 { padding-top: 20px; margin-top: 28px; }
}

.product-breadcrumbs {
  color: var(--steel);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 auto;
  max-width: 1180px;
  padding: 18px clamp(20px, 3.3vw, 52px) 0;
}
.product-breadcrumbs a { color: var(--scott-blue); text-decoration: none; }
.product-breadcrumbs a:hover { color: var(--scott-cyan); }

.site-message {
  background: #fff7e8;
  border: 1px solid #f0d09a;
  border-radius: 12px;
  color: #6b4a12;
  margin: 18px auto 0;
  max-width: 1180px;
  padding: 14px 18px;
}

.family-block {
  border-top: 1px solid var(--line);
  margin: 0 auto;
  max-width: 1180px;
  padding: clamp(20px, 2.4vw, 34px) clamp(20px, 3.3vw, 52px);
}
.family-block h2 { font-size: clamp(19px, 1.8vw, 25px); }
.family-block h2 a { color: var(--scott-blue); text-decoration: none; }
.family-block h2 a:hover { color: var(--scott-cyan); }
.family-block > p { color: var(--steel); margin-bottom: 12px; }

.subcategory-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.subcategory-list a {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #3d5366;
  font-size: 12px;
  padding: 8px 14px;
  text-decoration: none;
}
.subcategory-list a:hover { border-color: var(--scott-cyan); color: var(--scott-cyan); }

/* --- homepage brand routes and scroller --------------------------------- */

html { scroll-behavior: smooth; }
.brands-section .brand-window {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-snap-type: inline proximity;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  scrollbar-width: thin;
}
.brands-section .brand-track { will-change: auto; }
.brands-section .brand-tile { scroll-snap-align: start; }
.brand-controls button:disabled { cursor: default; opacity: 0.35; }
.brand-wordmark {
  color: var(--scott-navy);
  font-size: 24px;
  font-weight: 820;
  letter-spacing: -0.035em;
}
.brand-logo-stage-spiro img {
  height: 78px;
  width: auto;
}
.brand-show-all .brand-logo-stage {
  align-content: center;
  background: linear-gradient(135deg, var(--scott-blue), var(--scott-cyan));
  color: #fff;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  column-gap: 14px;
}
.brand-show-all .brand-logo-stage strong { font-size: 19px; }
.brand-show-all .brand-logo-stage span { font-size: 21px; }

.accessory-brand-grid .accessory-brand-with-logo {
  min-height: 98px;
  padding: 9px;
}
.accessory-logo-stage {
  background: #fff;
  border-radius: 7px;
  display: grid;
  height: 54px;
  overflow: hidden;
  padding: 7px 9px;
  place-items: center;
}
.accessory-logo-stage img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}
.accessory-brand-with-logo > span:last-child { margin-left: 4px; }

/* The concept uses buttons for popular searches; ours are bookmarkable links. */
.popular-searches a {
  background: #fff;
  border: 1px solid #d7e2e8;
  border-radius: 999px;
  color: #355269;
  font-size: 10px;
  font-weight: 690;
  padding: 8px 13px;
  text-decoration: none;
}
.popular-searches a:hover {
  border-color: var(--scott-cyan);
  color: var(--scott-blue);
}

.brands-directory {
  background: var(--scott-navy);
  color: #fff;
  padding: clamp(54px, 7vw, 92px) max(24px, calc(50vw - 640px));
}
.brand-directory-heading { margin-bottom: 24px; }
.brand-directory-heading h2 {
  color: #fff;
  font-size: clamp(28px, 3vw, 42px);
  margin: 0;
}
.brand-directory-heading > p:last-child {
  color: #91a7ba;
  margin: 10px 0 0;
}
.brand-directory-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.brand-directory-accessory-section {
  border-top: 1px solid #ffffff24;
  margin-top: clamp(44px, 6vw, 72px);
  padding-top: clamp(38px, 5vw, 58px);
}
.brand-directory-accessories { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  .brand-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-directory-accessories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .brand-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-directory-accessories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html,
  .brands-section .brand-window { scroll-behavior: auto; }
}

/* --- product preview framing -------------------------------------------- */

/* A grid's automatic minimum row size follows a portrait image's intrinsic
   height, even with object-fit: contain. Keep the row inside the fixed frame
   so listing cards show the complete machine at every screen width. */
.arrival-image,
.used-category-card .process-image-wrap {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.arrival-image img,
.used-category-card .process-image-wrap img {
  display: block;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

/* Accessory photos can be tall or wide. Keep the full item and a little room
   around it, including during the concept's hover animation. */
.accessory-image img {
  object-fit: contain;
  object-position: center;
  padding: 14px;
}

/* --- category preview framing ------------------------------------------- */

/* The transparent tooling-family vice replaces the concept's cropped photo. */
.process-card.tooling-card .process-image-wrap {
  grid-template-rows: minmax(0, 1fr);
}
.process-card.tooling-card .process-image-wrap img {
  display: block;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: clamp(16px, 2vw, 28px);
  mix-blend-mode: normal;
  transform: none;
}

/* Machinery category art must show the whole machine, not crop its head. */
.process-card.subcategory-card .process-image-wrap {
  background: #f3f7f9;
  grid-template-rows: minmax(0, 1fr);
}
.process-card.subcategory-card .process-image-wrap img {
  display: block;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: clamp(12px, 1.8vw, 26px);
  mix-blend-mode: multiply;
}

.used-categories { padding-top: clamp(24px, 3vw, 42px); }
.used-category-card .process-image-wrap { background: linear-gradient(145deg, #fff, #e8f0f4); }
.used-category-card .process-image-wrap img {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease, transform 0.38s;
}
.used-category-card .process-image-wrap img.active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .used-category-card .process-image-wrap img { transition: none; }
}

@media (min-width: 1131px) and (max-width: 1280px) {
  .desktop-nav .nav-menu-label { font-size: 11px; }
}

.listing-empty {
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 18px;
  margin: 0 auto;
  max-width: 1180px;
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
}
.listing-empty p { color: #3d5366; margin: 0 auto 16px; max-width: 52ch; }

/* --- legacy multi-column specifications --------------------------------- */

.spec-matrix-scroll {
  background: #fff;
  border: 1px solid #d8e2e8;
  border-radius: 16px;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
.spec-matrix-scroll:focus-visible {
  outline: 3px solid rgba(5, 169, 223, 0.35);
  outline-offset: 3px;
}
.spec-matrix {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
  width: max-content;
}
.spec-matrix th,
.spec-matrix td {
  border-bottom: 1px solid #e2e9ed;
  border-right: 1px solid #e0e7eb;
  color: #193a57;
  font-size: 10px;
  line-height: 1.45;
  min-width: 132px;
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
}
.spec-matrix tr:last-child > * { border-bottom: 0; }
.spec-matrix tr > *:last-child { border-right: 0; }
.spec-matrix th:first-child,
.spec-matrix td:first-child {
  left: 0;
  min-width: 210px;
  position: sticky;
  z-index: 1;
}
.spec-matrix thead th,
.spec-matrix-row-header th {
  background: var(--scott-navy);
  color: #fff;
  font-size: 10px;
  font-weight: 760;
}
.spec-matrix tbody th[scope="row"] {
  background: #f6f8f9;
  color: #627889;
  font-weight: 650;
}
.spec-matrix tbody td { background: #fff; }
.spec-matrix tbody tr:nth-child(even):not(.spec-matrix-row-header):not(.spec-matrix-row-background) td { background: #f8fafb; }
.spec-matrix-row-background:not(.spec-matrix-row-header) > * { background: #edf4f7; }
.spec-matrix-row-italic > * { font-style: italic; }
/* Row formatting is independent: bold alone must not switch on colour. */
.spec-matrix tr:not(.spec-matrix-row-background) > :is(th,td) { background: #fff; color: #193a57; }
.spec-matrix tr.spec-matrix-row-background > :is(th,td) { background: #edf4f7; color: #193a57; }
.spec-matrix tr:not(.spec-matrix-row-bold) > :is(th,td) { font-weight: 400; }
.spec-matrix tr.spec-matrix-row-bold > :is(th,td) { font-weight: 750; }
.spec-matrix tr.spec-matrix-row-background.spec-matrix-row-bold > :is(th,td) { background: var(--scott-navy); color: #fff; }
.spec-table > .spec-row-formatted > * { font-weight: 400; }
.spec-table > .spec-row-bold > * { font-weight: 750; }
.spec-table > .spec-row-italic > * { font-style: italic; }
.spec-table > .spec-row-colour { background: #edf4f7; }
.spec-table > .spec-row-colour.spec-row-bold { background: var(--scott-navy); }
.spec-table > .spec-row-colour.spec-row-bold > * { color: #fff; }
.spec-matrix .spec-matrix-section {
  background: #e6f1f6;
  color: var(--scott-blue);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.04em;
  min-width: 0;
  position: static;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .spec-matrix th,
  .spec-matrix td {
    min-width: 118px;
    padding: 11px 12px;
  }
  .spec-matrix th:first-child,
  .spec-matrix td:first-child { min-width: 168px; }
}

/* --- forms ---------------------------------------------------------------- */

.form {
  display: grid;
  gap: 14px;
  max-width: 560px;
}
.field { display: grid; gap: 6px; }
.field-label { color: var(--scott-ink); font-size: 12px; font-weight: 700; }
.field input,
.field select,
.field textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--scott-ink);
  font: inherit;
  padding: 11px 13px;
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--scott-cyan); outline: none; }

.enquiry-lines { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.enquiry-lines li {
  align-items: flex-end;
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  padding: 16px 18px;
}
.enquiry-line-detail { display: grid; gap: 4px; }
.enquiry-line-detail a { color: var(--scott-blue); font-weight: 700; text-decoration: none; }
.enquiry-line-form { align-items: flex-end; display: flex; gap: 8px; }
.enquiry-line-form .field input { width: 84px; }

.reference {
  border: 1px solid var(--line);
  border-radius: 14px;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 0.1em;
  margin: 14px 0;
  padding: 14px 22px;
}

/* --- administration ------------------------------------------------------- */

body.admin { background: var(--paper); }
.admin-header {
  align-items: center;
  background: var(--scott-navy);
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 14px clamp(16px, 3vw, 32px);
}
.admin-header a { color: #fff; }
.admin-main { margin: 0 auto; max-width: 880px; padding: 28px clamp(16px, 3vw, 32px) 64px; }
.admin-main h1 { color: var(--scott-ink); font-size: 26px; margin-bottom: 18px; }
.admin-row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-bottom: 14px;
  padding: 18px;
}
.admin-row h2 { font-size: 16px; }
.form-wide { max-width: 100%; }
.form-wide textarea { font-family: var(--font-mono); font-size: 13px; }
.admin-search { align-items: end; grid-template-columns: minmax(0, 1fr) auto; max-width: 100%; }
.admin-product-result,
.admin-history-row { align-items: center; display: flex; gap: 18px; justify-content: space-between; }
.admin-product-result .button { flex: 0 0 auto; }
.admin-erp-summary dl { display: grid; gap: 7px 16px; grid-template-columns: minmax(130px, 0.35fr) 1fr; margin: 0; }
.admin-erp-summary dt { color: var(--steel); font-size: 12px; font-weight: 750; }
.admin-erp-summary dd { margin: 0; }
.admin-history-action { align-items: center; display: flex; gap: 10px; }
.admin-edit-product { display: flex; justify-content: center; padding: 28px 24px 54px; }
.product-preview-message { margin: 24px auto; max-width: min(1180px, calc(100% - 48px)); }
@media (max-width: 640px) {
  .admin-search { grid-template-columns: 1fr; }
  .admin-product-result,
  .admin-history-row { align-items: stretch; flex-direction: column; }
  .admin-erp-summary dl { grid-template-columns: 1fr; }
}
.message {
  background: #fff7e8;
  border: 1px solid #f0d09a;
  border-radius: 12px;
  margin-bottom: 18px;
  padding: 12px 16px;
}
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: 6px 0; }
.note { color: var(--steel); font-size: 13px; }
.product-type-nav { display: flex; flex-wrap: wrap; gap: 10px; max-width: 1280px; margin: 0 auto 28px; padding: 0 24px; }
.product-type-nav a { padding: 10px 16px; border: 1px solid var(--line, #d5e1ea); border-radius: 24px; color: var(--blue, #155491); text-decoration: none; background: #fff; }
.product-type-nav a[aria-current="page"], .product-type-nav a:hover { background: #155491; color: #fff; }

/* October 2026 homepage refresh. Real source photography and live editorial copy.
   The original Micro Dynamics promotional image has an accessible specification description.
   Scoped overrides deliberately leave catalogue imagery and the archived concept alone. */
.hero-refresh { height: auto; min-height: 0; background: #f3f7fa; }
.hero-refresh .hero-slides { position: relative; height: clamp(590px, 43vw, 670px); }
.hero-refresh .hero-slide { transform: none; transition: opacity .55s ease, visibility .55s; visibility: hidden; }
.hero-refresh .hero-slide.active { visibility: visible; }
.hero-refresh .hero-content { display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: 16px; width: min(100%, 1540px); height: 100%; padding: 36px 80px; align-items: center; }
.hero-refresh .hero-copy { width: auto; min-width: 0; position: relative; z-index: 3; }
.hero-refresh .hero-overline { margin: 0 0 18px; color: #17608d; font-size: 10px; line-height: 1.5; font-weight: 750; letter-spacing: .15em; }
.hero-refresh .hero-brand { margin: 0 0 24px; min-height: 28px; }
.hero-refresh .hero-brand img { display: block; width: auto; max-width: 210px; height: 40px; object-fit: contain; object-position: left center; }
.hero-refresh .brand-micro img { height: 52px; max-width: 190px; }
.hero-refresh .brand-dener img { width: 240px; max-width: 100%; height: auto; }
.hero-refresh .brand-prototrak img { height: 36px; max-width: 220px; }
.hero-refresh .brand-cosen img { height: 46px; }
.hero-refresh .brand-microweily img { width: 320px; max-width: 100%; height: auto; }
.hero-refresh .hero-copy h1, .hero-refresh .hero-copy h2 { margin: 0; font-size: clamp(42px, 3.5vw, 60px); font-weight: 590; line-height: 1.04; letter-spacing: -.052em; max-width: 620px; text-wrap: balance; }
.hero-refresh .hero-copy h1 span, .hero-refresh .hero-copy h2 span { margin-top: 8px; color: #155491; }
.hero-refresh .hero-intro { margin: 24px 0 0; max-width: 470px; font-size: 15px; line-height: 1.65; color: #4e657a; }
.hero-refresh .hero-actions { gap: 16px 22px; margin-top: 28px; align-items: center; }
.hero-refresh .hero-actions .button-primary { min-height: 47px; padding: 0 23px; font-size: 12px; }
.hero-refresh .hero-specialist-link { color: #155491; font-weight: 650; font-size: 12px; text-decoration: none; padding: 12px 0; }
.hero-refresh .hero-specialist-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.hero-refresh :is(a,button):focus-visible { outline: 3px solid #00aee8; outline-offset: 5px; }
.hero-refresh .hero-art-stage { position: relative; height: 520px; min-width: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 45px; }
.hero-refresh .hero-stage-image { position: static; inset: auto; display: block; width: 100%; height: 100%; opacity: 1; object-fit: contain; object-position: center; mix-blend-mode: normal; filter: drop-shadow(0 18px 15px #15334c16); transform: none; }
.hero-refresh .hero-image-caption { position: absolute; bottom: 17px; left: 0; right: 0; margin: 0; text-align: center; font-size: 10px; letter-spacing: .09em; font-weight: 650; text-transform: uppercase; color: #536c81; }
.hero-refresh .hero-image-link { display: inline-block; margin-left: 14px; padding: 6px 0; color: #155491; font-size: 11px; letter-spacing: normal; text-transform: none; text-decoration: underline; text-underline-offset: 3px; }
.hero-refresh .theme-micro, .hero-refresh .theme-dener, .hero-refresh .theme-prototrak, .hero-refresh .theme-cosen, .hero-refresh .theme-microweily, .hero-refresh .theme-accessories { color: var(--scott-navy, #082039); background: radial-gradient(ellipse at 76% 55%, #fff 18%, #eef4f8 78%); }
.hero-refresh :is(.theme-dener, .theme-prototrak, .theme-microweily) .hero-stage-image { position: relative; z-index: 1; max-width: none; filter: drop-shadow(0 24px 18px #0005); }
.hero-refresh :is(.theme-dener, .theme-prototrak, .theme-microweily) .hero-image-caption { z-index: 2; color: #dbe7ee; }
.hero-refresh .theme-dener { color: #fff; }
.hero-refresh .theme-dener .hero-overline { color: #ffb6b8; }
.hero-refresh .theme-dener h2 span { color: #ff9295; }
.hero-refresh .theme-dener .hero-intro { color: #d6dfe6; }
.hero-refresh .theme-dener .hero-specialist-link { color: #fff; }
.hero-refresh .theme-dener .button-primary { background: #bb2635; border-color: #bb2635; color: #fff; }
.hero-refresh .theme-dener .button-primary:hover { background: #a41b2a; border-color: #a41b2a; }
.hero-refresh .theme-dener .hero-highlights li { color: #e4eaf0; }
.hero-refresh .theme-dener .hero-highlights li::before { background: #ff9295; }
.hero-refresh .theme-prototrak .hero-overline { color: #176757; }
.hero-refresh .theme-prototrak h2 span { color: #087765; }
.hero-refresh .theme-prototrak .button-primary { background: #086a5d; border-color: #086a5d; }
.hero-refresh .theme-prototrak .button-primary:hover { background: #054e46; border-color: #054e46; }
.hero-refresh .theme-prototrak .hero-specialist-link { color: #086a5d; }
.hero-refresh .theme-cosen h2 span { color: #b14b00; }
/* Two reversible Cosen comparisons. The original is retired from the lineup.
   CSS staging surrounds the existing transparent photograph; no machine pixels
   or manufacturer information are altered. */
.hero-refresh .cosen-option { isolation: isolate; color: #fff; background: #121e29; }
.hero-refresh .cosen-option::before, .hero-refresh .cosen-option::after { content: ''; position: absolute; pointer-events: none; z-index: -1; }
.hero-refresh .cosen-option .hero-overline { color: #f8b273; }
.hero-refresh .cosen-option .brand-cosen { width: max-content; max-width: 100%; min-height: 0; padding: 10px 14px; border-radius: 4px; background: #f6f8fa; }
.hero-refresh .cosen-option .brand-cosen img { width: 210px; max-width: 100%; height: auto; filter: none; }
.hero-refresh .cosen-option h2 span { color: #ffad61; }
.hero-refresh .cosen-option .hero-intro { color: #c8d5df; }
.hero-refresh .cosen-option .hero-specialist-link { color: #fff; }
.hero-refresh .cosen-option .button-primary { background: #ed791e; color: #13202b; border-color: #ed791e; }
.hero-refresh .cosen-option .button-primary:hover { background: #ffa35c; border-color: #ffa35c; }
.hero-refresh .cosen-option .hero-art-stage { height: clamp(460px, 36vw, 570px); }
.hero-refresh .cosen-option .hero-stage-image { position: relative; z-index: 1; width: 112%; max-width: none; filter: drop-shadow(0 24px 18px #0006); }
.hero-refresh .cosen-option .hero-image-caption { z-index: 2; color: #c8d5df; letter-spacing: .08em; }
.hero-refresh .cosen-graphite { background: radial-gradient(ellipse at 77% 40%, #5b6365 0%, #303b43 24%, #172631 52%, #091b2b 87%); }
.hero-refresh .cosen-graphite::before { inset: 0; background: linear-gradient(118deg, transparent 57%, #ffffff0c 57.1%, transparent 57.2%), linear-gradient(118deg, transparent 74%, #ffffff0a 74.1%, transparent 74.2%); }
.hero-refresh .cosen-graphite::after { left: 47%; right: -10%; bottom: -22%; height: 47%; border-top: 1px solid #e68d426b; background: linear-gradient(180deg, #74858b22, #08141f66); transform: skewY(-9deg); }
.hero-refresh .cosen-graphite .hero-art-stage::before { content: ''; position: absolute; width: 94%; height: 13%; bottom: 14%; border-radius: 50%; background: #020a11a6; filter: blur(22px); }
.hero-refresh .cosen-studio { background: linear-gradient(110deg, #071d30, #1e3342); }
.hero-refresh .cosen-studio::before { inset: 0 0 0 47%; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); background: radial-gradient(ellipse at 61% 31%, #f6f7f5, #ccd5d8 59%, #93a4ac); }
.hero-refresh .cosen-studio::after { top: 0; bottom: 0; left: 51%; width: 3px; background: #ee822b; transform: skewX(-13deg); box-shadow: -18px 0 55px #ed791e1f; }
.hero-refresh .cosen-studio .hero-image-caption { color: #304956; }
.hero-refresh .hero-highlights { display: flex; flex-wrap: wrap; gap: 8px 15px; list-style: none; padding: 0; margin: 20px 0 0; }
.hero-refresh .hero-highlights li { color: #415d70; font-size: 11px; font-weight: 650; display: flex; align-items: center; gap: 7px; }
.hero-refresh .hero-highlights li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #00a9e0; }
.hero-refresh .theme-scott .hero-content, .hero-refresh .theme-bodor .hero-content { grid-template-columns: 49% 1fr; }
.hero-refresh .theme-scott .hero-overline, .hero-refresh .theme-bodor .hero-overline { color: #48d4ff; }
.hero-refresh .theme-scott .hero-intro, .hero-refresh .theme-bodor .hero-intro { color: #e0eaf1; }
.hero-refresh .theme-scott h1 span, .hero-refresh .theme-bodor h2 span { color: #24c4f4; }
.hero-refresh .theme-scott .hero-specialist-link, .hero-refresh .theme-bodor .hero-specialist-link { color: #fff; }
.hero-refresh .theme-scott .hero-wash { background: linear-gradient(90deg, #041c32f5 0%, #041c32e8 27%, #041c32b5 46%, #041c3220 70%, #041c3208 100%); }
.hero-refresh .theme-bodor .hero-wash { background: linear-gradient(90deg, #071b30f5 0%, #071b30db 33%, #071b3077 57%, #071b3012 85%); }
.hero-refresh .theme-bodor { background: #111f2c; }
.hero-refresh .theme-bodor .full-bleed-art { width: 78%; height: 100%; left: auto; right: 0; object-fit: contain; object-position: right center; }
.hero-refresh .full-bleed-art { transform: none; object-position: center 56%; }
.hero-refresh .hero-photo-caption { position: absolute; right: 80px; bottom: 25px; border-left: 2px solid #24c4f4; padding: 7px 12px; font-size: 10px; letter-spacing: .04em; color: #fff; background: #071c3280; }
.hero-refresh .theme-micro .hero-stage-image { width: 100%; height: 100%; margin: 0; padding: 0; filter: none; }
.hero-refresh .hero-feature-bubbles { list-style: none; padding: 0; margin: 0; position: absolute; z-index: 2; right: -10px; top: 49px; display: grid; gap: 14px; width: 160px; }
.hero-refresh .hero-feature-bubble { position: relative; background: #fff; border: 1px solid #c8dae7; border-left: 3px solid #00aee8; border-radius: 40px 12px 12px 40px; box-shadow: 0 8px 22px #15334c0a; padding: 12px 12px 12px 22px; }
.hero-refresh .hero-feature-bubble::before { content: ''; position: absolute; top: 50%; right: 100%; width: 28px; border-top: 1px solid #00aee8; }
.hero-refresh .hero-feature-bubble strong { display: block; color: #0b355c; font-size: 21px; letter-spacing: -.045em; line-height: 1.1; white-space: nowrap; }
.hero-refresh .hero-feature-bubble span { display: block; color: #536c81; font-size: 10px; margin-top: 5px; }
.hero-refresh .hero-feature-note { position: absolute; bottom: 7px; left: 0; right: 0; font-size: 9px; line-height: 1.4; text-align: center; color: #61768a; margin: 0; }
.hero-refresh .carousel-footer { position: relative; inset: auto; z-index: 12; margin: 0; width: 100%; border-radius: 0; background: #fff; color: #436079; border-top: 1px solid #dce5ed; border-bottom: 1px solid #dce5ed; backdrop-filter: none; display: flex; gap: 22px; padding: 12px max(80px, calc((100% - 1380px) / 2)); }
.hero-refresh .carousel-dots { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); align-items: stretch; gap: 8px; flex: 1; }
.hero-refresh .carousel-dots button { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; color: #62788b; min-height: 42px; padding: 4px; text-align: left; background: transparent; border: 0; }
.hero-refresh .carousel-dots button span { background: #d6e0e8; width: 20px; height: 3px; border-radius: 2px; transition: width .3s, background .3s; }
.hero-refresh .carousel-dots button small { display: block; font-size: 11px; line-height: 1.3; letter-spacing: .01em; text-transform: none; white-space: normal; }
.hero-refresh .carousel-dots button.active { color: #155491; }
.hero-refresh .carousel-dots button.active span { width: 34px; background: #00aeef; }
.hero-refresh .carousel-toggle { border: 1px solid #cbd9e4; border-radius: 20px; font: inherit; font-size: 10px; font-weight: 650; padding: 8px 14px; background: #fff; color: #155491; min-height: 36px; }
.hero-refresh .carousel-toggle:disabled { opacity: .55; cursor: default; }
.hero-refresh .carousel-count { color: #61768a; font-size: 10px; min-width: 44px; }
.hero-refresh .carousel-arrow { top: calc(50% - 36px); bottom: auto; width: 38px; height: 38px; background: #ffffffcf; color: #155491; border: 1px solid #b9ccdccc; backdrop-filter: blur(10px); }
.hero-refresh .carousel-arrow.previous { left: 18px; }
.hero-refresh .carousel-arrow.next { right: 18px; }
.hero-refresh:not([data-carousel-ready]) .carousel-footer,
.hero-refresh:not([data-carousel-ready]) .carousel-arrow { display: none; }
#why-scott .why-showroom { object-position: center; }
@media (min-width: 1600px) {
  .hero-refresh .hero-content { padding-left: 60px; padding-right: 60px; }
}
@media (max-width: 1400px) and (min-width: 961px) {
  .hero-refresh .carousel-dots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hero-refresh .carousel-footer { align-items: center; }
  .hero-refresh .carousel-arrow { top: calc(50% - 61px); }
}
@media (max-width: 1150px) and (min-width: 961px) {
  .hero-refresh .hero-content { padding-left: 65px; padding-right: 65px; grid-template-columns: 44% minmax(0, 1fr); }
  .hero-refresh .hero-copy h1, .hero-refresh .hero-copy h2 { font-size: 42px; }
  .hero-refresh .hero-intro { font-size: 13px; }
  .hero-refresh .hero-art-stage { height: 460px; }
  .hero-refresh .hero-feature-bubbles { width: 133px; right: -14px; top: 45px; gap: 12px; }
  .hero-refresh .hero-feature-bubble { padding: 11px 8px 11px 15px; }
  .hero-refresh .hero-feature-bubble strong { font-size: 18px; }
  .hero-refresh .hero-feature-bubble span { font-size: 9px; }
  .hero-refresh .carousel-footer { padding: 12px 65px; gap: 12px; }
  .hero-refresh .carousel-dots button small { font-size: 10px; white-space: normal; }
  .hero-refresh .carousel-count { display: none; }
}
@media (max-width: 960px) {
  .hero-refresh .hero-slides { display: grid; height: auto; }
  .hero-refresh .hero-slide { position: relative; inset: auto; grid-area: 1 / 1; min-width: 0; }
  .hero-refresh .hero-content, .hero-refresh .theme-scott .hero-content, .hero-refresh .theme-bodor .hero-content { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 16px; height: auto; min-height: 100%; padding: 32px 26px 20px; }
  .hero-refresh .hero-copy { width: 100%; }
  .hero-refresh .hero-overline { font-size: 9px; margin-bottom: 13px; }
  .hero-refresh .hero-brand { margin-bottom: 18px; min-height: 24px; }
  .hero-refresh .hero-brand img { max-height: 32px; max-width: 175px; }
  .hero-refresh .brand-micro img { max-height: 42px; }
  .hero-refresh .brand-dener img { width: 200px; max-width: 100%; max-height: none; }
  .hero-refresh .brand-microweily img { width: 250px; max-width: 100%; max-height: none; }
  .hero-refresh .cosen-option .brand-cosen img { width: 175px; }
  .hero-refresh .hero-copy h1, .hero-refresh .hero-copy h2 { font-size: clamp(34px, 7.8vw, 48px); line-height: 1.05; max-width: 560px; }
  .hero-refresh .hero-intro { font-size: 13px; line-height: 1.65; margin-top: 17px; max-width: 520px; }
  .hero-refresh .hero-actions { margin-top: 22px; gap: 6px 18px; }
  .hero-refresh .hero-actions .button-primary { padding: 0 18px; font-size: 11px; min-height: 45px; }
  .hero-refresh .hero-specialist-link { font-size: 11px; }
  .hero-refresh .hero-highlights { margin-top: 16px; gap: 7px 12px; }
  .hero-refresh .hero-highlights li { font-size: 10px; }
  .hero-refresh .hero-art-stage { width: 100%; height: 345px; padding: 4px 0 30px; margin-top: auto; }
  .hero-refresh .cosen-option .hero-art-stage { height: 345px; }
  .hero-refresh .cosen-option .hero-stage-image { width: 100%; }
  .hero-refresh .cosen-graphite { background: radial-gradient(ellipse at 65% 74%, #4a565e, #172631 47%, #091b2b 84%); }
  .hero-refresh .cosen-graphite::after { left: -10%; right: -10%; bottom: -10%; height: 29%; }
  .hero-refresh .cosen-studio::before, .hero-refresh .cosen-studio::after { display: none; }
  .hero-refresh .cosen-studio .hero-art-stage::before { content: ''; position: absolute; inset: -18px -26px -20px; clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%); background: radial-gradient(ellipse at 61% 31%, #f6f7f5, #ccd5d8 59%, #93a4ac); }
  .hero-refresh .cosen-studio .hero-art-stage::after { content: ''; position: absolute; pointer-events: none; top: 4px; left: -26px; right: -26px; height: 2px; background: #ee822b; transform: rotate(-3deg); }
  .hero-refresh .hero-stage-image { position: static; opacity: 1; width: 100%; height: 100%; margin: 0; }
  .hero-refresh .theme-microweily .hero-stage-image { width: 100%; }
  .hero-refresh .theme-micro .hero-art-stage { height: auto; display: block; padding: 4px 0 0; }
  .hero-refresh .theme-micro .hero-stage-image { width: 100%; height: auto; max-height: 430px; object-fit: contain; padding: 0; margin: 0; }
  .hero-refresh .hero-feature-bubbles { position: static; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .hero-refresh .hero-feature-bubble { padding: 9px 12px; border-radius: 22px 8px 8px 22px; text-align: center; }
  .hero-refresh .hero-feature-bubble::before { display: none; }
  .hero-refresh .hero-feature-bubble strong { font-size: 18px; }
  .hero-refresh .hero-feature-bubble span { margin-top: 3px; font-size: 10px; }
  .hero-refresh .hero-image-caption { bottom: 6px; font-size: 10px; line-height: 1.5; letter-spacing: .02em; }
  .hero-refresh .theme-micro .hero-image-caption, .hero-refresh .hero-feature-note { position: static; font-size: 10px; }
  .hero-refresh .theme-micro .hero-image-caption { margin-top: 12px; }
  .hero-refresh .theme-micro .hero-image-link { display: block; margin: 3px 0 0; }
  .hero-refresh .theme-scott .hero-content, .hero-refresh .theme-bodor .hero-content { padding-top: 40px; padding-bottom: 44px; }
  .hero-refresh .theme-scott .hero-copy, .hero-refresh .theme-bodor .hero-copy { max-width: 560px; }
  .hero-refresh .theme-scott .full-bleed-art { object-position: 61% bottom; }
  .hero-refresh .theme-scott .hero-wash { background: linear-gradient(180deg, #041c32f2 0%, #041c32df 29%, #041c326e 61%, #041c3212 100%); }
  .hero-refresh .theme-bodor .hero-wash { background: linear-gradient(180deg, #041c32f5 0%, #041c32d4 35%, #041c3210 100%); }
  .hero-refresh .theme-bodor .full-bleed-art { width: 100%; height: 46%; top: auto; bottom: 0; object-position: center; }
  .hero-refresh .hero-photo-caption { position: static; align-self: flex-end; margin: auto 0 0; font-size: 9px; max-width: 240px; }
  .hero-refresh .carousel-footer { padding: 14px 58px 14px 20px; gap: 8px; align-items: center; }
  .hero-refresh .carousel-dots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; }
  .hero-refresh .carousel-dots button { min-height: 44px; gap: 6px; padding: 3px 0; }
  .hero-refresh .carousel-dots button small { font-size: 10px; white-space: normal; }
  .hero-refresh .carousel-dots button span { width: 16px; }
  .hero-refresh .carousel-dots button.active span { width: 28px; }
  .hero-refresh .carousel-count { display: none; }
  .hero-refresh .carousel-toggle { position: absolute; right: 12px; bottom: 39px; padding: 6px 8px; font-size: 8px; min-height: 32px; }
  .hero-refresh .carousel-arrow { top: auto; bottom: 178px; width: 34px; height: 34px; transform: none; }
  .hero-refresh .carousel-arrow.previous { left: 12px; }
  .hero-refresh .carousel-arrow.next { right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-refresh .hero-slide, .hero-refresh .carousel-dots button span { transition: none; }
}
/* Micro Dynamics: original PDF wall/floor and exact clipped promotional art.
   One continuous campaign, not a rectangular brochure card. Other heroes stay unchanged. */
.hero-refresh .hero-slide.theme-micro {
  color: #fff;
  background-color: #102432;
  background-image: linear-gradient(0deg, #071c32cf 0%, #071c3200 30%), linear-gradient(90deg, #061d32f5 0%, #061d32ec 28%, #0a2037a6 46%, #0a203724 67%, #0a203710 100%), url('/brand/hero-micro-showroom-20261010.webp');
  background-size: cover;
  background-position: center, center, center 53%;
  background-repeat: no-repeat;
}
.hero-refresh .hero-slide.theme-micro .hero-content { grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0; gap: 24px; }
.hero-refresh .hero-slide.theme-micro .hero-overline { color: #48d4ff; }
.hero-refresh .hero-slide.theme-micro .brand-micro img { filter: brightness(0) invert(1); }
.hero-refresh .hero-slide.theme-micro h2 { color: #fff; }
.hero-refresh .hero-slide.theme-micro h2 span { color: #24c4f4; }
.hero-refresh .hero-slide.theme-micro .hero-intro { color: #e0eaf1; }
.hero-refresh .hero-slide.theme-micro .hero-specialist-link { color: #fff; }
.hero-refresh .hero-slide.theme-micro .button-primary { background: #24c4f4; border-color: #24c4f4; color: #06233d; }
.hero-refresh .hero-slide.theme-micro .button-primary:hover { background: #6ddaff; border-color: #6ddaff; }
.hero-refresh .hero-slide.theme-micro .hero-art-stage { display: flex; height: 100%; min-height: 0; max-height: 470px; padding: 0 0 48px; align-items: center; }
.hero-refresh .hero-slide.theme-micro .hero-stage-image { width: 100%; max-width: none; height: 100%; max-height: none; object-fit: contain; object-position: center; mask-image: none; filter: none; }
.hero-refresh .hero-slide.theme-micro .hero-image-caption { bottom: 28px; margin: 0; color: #e4edf4; font-size: 10px; letter-spacing: .07em; line-height: 1.4; }
.hero-refresh .hero-slide.theme-micro .hero-image-link { color: #fff; font-size: 11px; margin-left: 12px; padding: 3px 0; }
@media (max-width: 960px) {
  .hero-refresh .hero-slide.theme-micro {
    background-image: linear-gradient(180deg, #061d32 4%, #061d32ee 35%, #061d3224 67%, #061d32e6 100%), url('/brand/hero-micro-showroom-20261010.webp');
    background-size: 100% 100%, auto 680px;
    background-position: center, center bottom;
  }
  .hero-refresh .hero-slide.theme-micro .hero-content { gap: 14px; }
  .hero-refresh .hero-slide.theme-micro .hero-art-stage { display: block; height: auto; max-height: none; padding: 6px 0 0; }
  .hero-refresh .hero-slide.theme-micro .hero-stage-image { height: auto; max-height: 430px; width: 100%; }
  .hero-refresh .hero-slide.theme-micro .hero-image-caption { position: static; margin: 12px 0 0; font-size: 11px; }
  .hero-refresh .hero-slide.theme-micro .hero-image-link { display: block; width: fit-content; margin: 4px auto 0; padding: 10px 0; min-height: 40px; font-size: 13px; }
}
/* ProtoTRAK: original, unchanged RMX 5000 cutout over an illustrative empty
   toolroom. This decorative generated setting is not a Scott branch photograph.
   Own the compact-main cascade without changing the other brand stages. */
.hero-refresh .hero-slide.theme-prototrak {
  isolation: isolate;
  background-color: #e9eeeb;
  background-image: linear-gradient(90deg, #f3f6f2fa 0%, #f3f6f2ed 30%, #f3f6f293 46%, #f3f6f200 64%), url('/brand/hero-prototrak-toolroom-20261010.webp');
  background-size: cover;
  background-position: center, center;
  background-repeat: no-repeat;
}
.hero-refresh .hero-slide.theme-prototrak .hero-content { grid-template-columns: 43% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0; gap: 30px; }
.hero-refresh .hero-slide.theme-prototrak .hero-intro { color: #40594f; }
.hero-refresh .hero-slide.theme-prototrak .hero-highlights li { color: #254e43; }
.hero-refresh .hero-slide.theme-prototrak .hero-highlights li::before { background: #087765; }
.hero-refresh .hero-slide.theme-prototrak .hero-art-stage { height: 100%; min-height: 0; max-height: 470px; padding: 0; align-items: flex-end; }
.hero-refresh .hero-slide.theme-prototrak .hero-art-stage::before { content: ''; position: absolute; z-index: 0; pointer-events: none; width: 32%; height: 4%; left: 50%; bottom: 9%; border-radius: 50%; background: #142b2680; filter: blur(9px); transform: translateX(-50%); }
.hero-refresh .hero-slide.theme-prototrak .hero-stage-image { width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: center bottom; filter: drop-shadow(2px 4px 3px #19312926); }
.hero-refresh .hero-slide.theme-prototrak .hero-image-caption { color: #23453c; bottom: 0; font-size: 10px; letter-spacing: .08em; }
@media (max-width: 960px) {
  .hero-refresh .hero-slide.theme-prototrak {
    background: #f3f6f2;
  }
  .hero-refresh .hero-slide.theme-prototrak .hero-content { gap: 18px; }
  .hero-refresh .hero-slide.theme-prototrak .hero-art-stage { isolation: isolate; height: 340px; max-height: none; padding: 0; }
  .hero-refresh .hero-slide.theme-prototrak .hero-art-stage::after { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -28px -32px -24px; background-image: linear-gradient(180deg, #f3f6f2 0%, #f3f6f266 19%, #f3f6f200 38%), url('/brand/hero-prototrak-toolroom-20261010.webp'); background-size: cover; background-position: center, 74% center; }
  .hero-refresh .hero-slide.theme-prototrak .hero-image-caption { letter-spacing: .03em; }
}
@media (max-width: 560px) {
  .hero-refresh .hero-slide.theme-prototrak .hero-art-stage { height: 280px; }
}
/* Dener: original XL photograph and red logo in an illustrative fabrication
   bay. Only the empty architecture is generated; no real facility is implied. */
.hero-refresh .hero-slide.theme-dener {
  isolation: isolate;
  background-color: #17232d;
  background-image: linear-gradient(0deg, #071421a3, #07142100 30%), linear-gradient(90deg, #101d2bf5 0%, #101d2bed 28%, #101d2bab 44%, #101d2b1a 68%), url('/brand/hero-dener-fabrication-20261010.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-refresh .hero-slide.theme-dener .hero-content { grid-template-columns: 43% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0; gap: 32px; }
.hero-refresh .hero-slide.theme-dener .hero-art-stage { height: 100%; min-height: 0; padding: 0 0 52px; align-items: flex-end; }
.hero-refresh .hero-slide.theme-dener .hero-art-stage::before { content: ''; position: absolute; z-index: 0; pointer-events: none; width: 75%; height: 4%; left: 44%; bottom: 50px; transform: translateX(-50%); border-radius: 50%; background: #050b12a6; filter: blur(9px); }
.hero-refresh .hero-slide.theme-dener .hero-stage-image { width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 3px 3px #060c1333); }
.hero-refresh .hero-slide.theme-dener .hero-image-caption { color: #eef4f8; bottom: 7px; font-size: 10px; letter-spacing: .08em; text-shadow: 0 1px 3px #071421; }
@media (min-width: 961px) and (max-width: 1100px) {
  .hero-refresh .hero-slide.theme-dener .hero-content { grid-template-columns: 46% minmax(0, 1fr); gap: 22px; }
  .hero-refresh .hero-slide.theme-dener .hero-copy h2 { font-size: 34px; }
  .hero-refresh .hero-slide.theme-dener .hero-intro { font-size: 14px; line-height: 1.5; }
  .hero-refresh .hero-slide.theme-dener .hero-actions { gap: 8px 12px; }
  .hero-refresh .hero-slide.theme-dener .hero-actions .button-primary { font-size: 12px; min-height: 44px; padding: 0 16px; }
  .hero-refresh .hero-slide.theme-dener .hero-specialist-link { font-size: 12px; }
}
@media (max-width: 960px) {
  .hero-refresh .hero-slide.theme-dener { background: #17232d; }
  .hero-refresh .hero-slide.theme-dener .hero-content { gap: 22px; }
  .hero-refresh .hero-slide.theme-dener .hero-art-stage { isolation: isolate; height: clamp(225px, 43vw, 370px); padding: 0 0 40px; }
  .hero-refresh .hero-slide.theme-dener .hero-art-stage::after { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -26px -32px -24px; background-image: linear-gradient(180deg, #17232d 0%, #17232d77 20%, #17232d22 62%, #071421bb 100%), url('/brand/hero-dener-fabrication-20261010.webp'); background-size: cover; background-position: center, 72% center; }
  .hero-refresh .hero-slide.theme-dener .hero-art-stage::before { bottom: 39px; }
  .hero-refresh .hero-slide.theme-dener .hero-image-caption { bottom: 0; letter-spacing: .025em; }
}
/* Bodor: authentic transparent C-series brochure artwork in an illustrative
   contemporary showroom. CSS accommodates the original PDF canvas padding. */
.hero-refresh .hero-slide.theme-bodor {
  isolation: isolate;
  background-color: #111f2c;
  background-image: linear-gradient(0deg, #07172499, #07172400 28%), linear-gradient(90deg, #091b2be8 0%, #091b2bd9 28%, #091b2b66 48%, #091b2b00 72%), url('/brand/hero-bodor-modern-hall-20261010.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-refresh .hero-slide.theme-bodor .hero-content { grid-template-columns: 43% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0; gap: 32px; }
.hero-refresh .hero-slide.theme-bodor .hero-art-stage { height: 100%; min-height: 0; padding: 0; }
.hero-refresh .hero-slide.theme-bodor .hero-stage-image { position: absolute; z-index: 1; width: 185%; height: 160%; max-width: none; left: -57%; top: -35%; margin: 0; object-fit: contain; object-position: center; transform: none; filter: none; }
.hero-refresh .hero-slide.theme-bodor .hero-image-caption { color: #eef4f8; bottom: 7px; font-size: 10px; letter-spacing: .08em; text-shadow: 0 1px 3px #071421; z-index: 2; }
@media (min-width: 1440px) {
  .hero-refresh .hero-slide.theme-bodor .hero-stage-image { width: 203.5%; height: 176%; left: -68%; top: -44%; }
}
@media (min-width: 961px) and (max-width: 1100px) {
  .hero-refresh .hero-slide.theme-bodor .hero-content { grid-template-columns: 46% minmax(0, 1fr); gap: 22px; }
  .hero-refresh .hero-slide.theme-bodor .hero-copy h2 { font-size: 34px; }
  .hero-refresh .hero-slide.theme-bodor .hero-intro { font-size: 14px; line-height: 1.5; }
  .hero-refresh .hero-slide.theme-bodor .hero-actions { gap: 8px 12px; }
  .hero-refresh .hero-slide.theme-bodor .hero-actions .button-primary { font-size: 12px; padding: 0 16px; }
}
@media (max-width: 960px) {
  .hero-refresh .hero-slide.theme-bodor { background: #111f2c; }
  .hero-refresh .hero-slide.theme-bodor .hero-content { gap: 22px; padding-top: 30px; padding-bottom: 22px; }
  .hero-refresh .hero-slide.theme-bodor .hero-art-stage { isolation: isolate; height: clamp(230px, 48vw, 380px); }
  .hero-refresh .hero-slide.theme-bodor .hero-stage-image { height: 150%; top: -30%; }
  .hero-refresh .hero-slide.theme-bodor .hero-art-stage::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -26px -32px -24px; background-image: linear-gradient(180deg, #111f2c 0%, #111f2c77 20%, #111f2c00 60%, #0b1b29cc 100%), url('/brand/hero-bodor-modern-hall-20261010.webp'); background-size: cover; background-position: center, 72% center; }
  .hero-refresh .hero-slide.theme-bodor .hero-image-caption { bottom: 0; }
}
/* Cosen: approved C-320NC and black/orange logo, grounded in an illustrative
   sawing hall. The source machine remains an untouched transparent photograph. */
.hero-refresh .hero-slide.cosen-graphite {
  background-color: #14232e;
  background-image: linear-gradient(0deg, #0b1b29bb, #0b1b2900 30%), linear-gradient(90deg, #0b1b2bef 0%, #0b1b2bdf 27%, #0b1b2b88 46%, #0b1b2b08 71%), url('/brand/hero-cosen-sawing-hall-20261010.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-refresh .hero-slide.cosen-graphite::before, .hero-refresh .hero-slide.cosen-graphite::after { display: none; }
.hero-refresh .hero-slide.cosen-graphite .hero-content { grid-template-columns: 43% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0; gap: 32px; }
.hero-refresh .hero-slide.cosen-graphite .hero-art-stage { height: 100%; min-height: 0; padding: 0 0 45px; align-items: flex-end; }
.hero-refresh .hero-slide.cosen-graphite .hero-art-stage::before { width: 72%; height: 4%; left: 46%; bottom: 56px; transform: translateX(-50%); background: #07121bbb; filter: blur(9px); }
.hero-refresh .hero-slide.cosen-graphite .hero-stage-image { width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 3px 3px #07121b33); }
.hero-refresh .hero-slide.cosen-graphite .hero-image-caption { color: #eef4f8; bottom: 7px; font-size: 10px; letter-spacing: .06em; text-shadow: 0 1px 3px #071421; }
@media (min-width: 961px) and (max-width: 1100px) {
  .hero-refresh .hero-slide.cosen-graphite .hero-content { grid-template-columns: 46% minmax(0, 1fr); gap: 22px; }
  .hero-refresh .hero-slide.cosen-graphite .hero-copy h2 { font-size: 34px; }
  .hero-refresh .hero-slide.cosen-graphite .hero-intro { font-size: 14px; line-height: 1.5; }
  .hero-refresh .hero-slide.cosen-graphite .hero-actions { gap: 8px 12px; }
  .hero-refresh .hero-slide.cosen-graphite .hero-actions .button-primary { font-size: 12px; padding: 0 16px; }
}
@media (max-width: 960px) {
  .hero-refresh .hero-slide.cosen-graphite { background: #14232e; }
  .hero-refresh .hero-slide.cosen-graphite .hero-content { gap: 22px; }
  .hero-refresh .hero-slide.cosen-graphite .hero-art-stage { isolation: isolate; height: clamp(235px, 48vw, 380px); padding: 0 0 40px; }
  .hero-refresh .hero-slide.cosen-graphite .hero-art-stage::after { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -26px -32px -24px; background-image: linear-gradient(180deg, #14232e 0%, #14232e77 20%, #14232e00 60%, #0b1b29d9 100%), url('/brand/hero-cosen-sawing-hall-20261010.webp'); background-size: cover; background-position: center, 73% center; }
  .hero-refresh .hero-slide.cosen-graphite .hero-art-stage::before { bottom: 48px; }
  .hero-refresh .hero-slide.cosen-graphite .hero-image-caption { bottom: 0; letter-spacing: .015em; }
}
/* Microweily: the unchanged original machine photograph, grounded in
   a generated empty engineering bay. This is not a real Scott installation. */
.hero-refresh .hero-slide.theme-microweily {
  isolation: isolate;
  background-color: #edece6;
  background-image: linear-gradient(90deg, #f3f2ecfc 0%, #f3f2ecf2 29%, #f3f2ecb3 43%, #f3f2ec12 65%), url('/brand/hero-microweily-workshop-20261010.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-refresh .hero-slide.theme-microweily .hero-content { grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0; gap: 30px; }
.hero-refresh .hero-slide.theme-microweily .hero-overline { color: #675128; }
.hero-refresh .hero-slide.theme-microweily .hero-intro { color: #455565; }
.hero-refresh .hero-slide.theme-microweily .hero-art-stage { height: 100%; min-height: 0; padding: 0 0 58px; align-items: flex-end; }
.hero-refresh .hero-slide.theme-microweily .hero-art-stage::before { content: ''; position: absolute; z-index: 0; pointer-events: none; width: 100%; height: 3%; left: 50%; bottom: 19%; transform: translateX(-50%); border-radius: 50%; background: #17202870; filter: blur(7px); }
.hero-refresh .hero-slide.theme-microweily .hero-stage-image { width: 109%; max-width: none; height: auto; max-height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 3px 2px #19272b26); }
.hero-refresh .hero-slide.theme-microweily .hero-image-caption { color: #183348; bottom: 8px; font-size: 10px; letter-spacing: .08em; }
@media (min-width: 961px) and (max-width: 1100px) {
  .hero-refresh .hero-slide.theme-microweily .hero-content { grid-template-columns: 45% minmax(0, 1fr); gap: 24px; }
  .hero-refresh .hero-slide.theme-microweily .hero-copy h2 { font-size: 34px; }
  .hero-refresh .hero-slide.theme-microweily .hero-intro { font-size: 14px; line-height: 1.5; }
  .hero-refresh .hero-slide.theme-microweily .hero-actions { gap: 10px 12px; }
  .hero-refresh .hero-slide.theme-microweily .hero-actions .button-primary { font-size: 12px; min-height: 44px; padding: 0 18px; }
  .hero-refresh .hero-slide.theme-microweily .hero-specialist-link { font-size: 12px; }
}
@media (max-width: 960px) {
  .hero-refresh .hero-slide.theme-microweily { background: #f3f2ec; }
  .hero-refresh .hero-slide.theme-microweily .hero-content { gap: 18px; }
  .hero-refresh .hero-slide.theme-microweily .hero-art-stage { isolation: isolate; height: clamp(185px, 35vw, 320px); padding: 0 0 38px; }
  .hero-refresh .hero-slide.theme-microweily .hero-art-stage::after { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -24px -32px -24px; background-image: linear-gradient(180deg, #f3f2ec 0%, #f3f2ec88 16%, #f3f2ec00 37%), url('/brand/hero-microweily-workshop-20261010.webp'); background-size: cover; background-position: center, 72% center; }
  .hero-refresh .hero-slide.theme-microweily .hero-art-stage::before { width: 94%; bottom: 25%; }
  .hero-refresh .hero-slide.theme-microweily .hero-stage-image { width: 100%; height: 100%; }
  .hero-refresh .hero-slide.theme-microweily .hero-image-caption { bottom: 0; letter-spacing: .025em; }
}
/* Accessories: one illustrative workbench. The HPAQ160F derivative includes
   the shallower perspective and base alignment; no runtime distortion. */
.hero-refresh .hero-slide.theme-accessories {
  isolation: isolate;
  color: #082039;
  background-color: #edf1f2;
  background-image: linear-gradient(90deg, #edf1f2fc 0%, #edf1f2ee 30%, #edf1f29c 44%, #edf1f200 65%), url('/brand/hero-accessories-workbench-20261010.webp');
  background-size: cover;
  background-position: center;
}
.hero-refresh .hero-slide.theme-accessories .hero-art-stage { isolation: isolate; padding: 0; }
.hero-refresh .hero-slide.theme-accessories .hero-stage-image { position: absolute; z-index: 2; inset: auto auto 13.3% 6.65%; width: 56.7%; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; object-fit: contain; filter: drop-shadow(-1px 2px 1px #15293860) drop-shadow(-3px 4px 4px #15293828); }
.hero-refresh .hero-slide.theme-accessories .hero-accessory-item { position: absolute; z-index: 1; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; display: flex; align-items: end; justify-content: center; }
.hero-refresh .hero-slide.theme-accessories .hero-accessory-item:nth-of-type(1) { width: 29%; height: 30%; right: 5.5%; bottom: 31%; }
.hero-refresh .hero-slide.theme-accessories .hero-accessory-item:nth-of-type(2) { width: 33%; height: 36%; right: -11%; bottom: 8%; }
.hero-refresh .hero-slide.theme-accessories .hero-accessory-item img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(-1px 2px 1px #15293860) drop-shadow(-3px 4px 3px #15293830); }
.hero-refresh .hero-slide.theme-accessories .hero-accessory-item figcaption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-refresh .hero-slide.theme-accessories .hero-image-caption { z-index: 3; bottom: -12px; color: #fff; text-shadow: 0 1px 4px #082039; font-size: 11px; letter-spacing: .065em; }
@media (min-width: 961px) and (max-width: 1100px) {
  .hero-refresh .hero-slide.theme-accessories .hero-copy h2 { font-size: 34px; }
  .hero-refresh .hero-slide.theme-accessories .hero-actions { gap: 8px 16px; }
  .hero-refresh .hero-slide.theme-accessories .hero-actions .button-primary { padding: 0 16px; font-size: 12px; }
  .hero-refresh .hero-slide.theme-accessories .hero-specialist-link { font-size: 12px; }
}
@media (max-width: 960px) {
  .hero-refresh .hero-slide.theme-accessories { background: #edf1f2; }
  .hero-refresh .hero-slide.theme-accessories .hero-content { gap: 16px; }
  .hero-refresh .hero-slide.theme-accessories .hero-art-stage { height: clamp(220px, 40vw, 360px); width: 100%; max-width: 640px; margin: 0 auto; padding: 0; }
  .hero-refresh .hero-slide.theme-accessories .hero-art-stage::after { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -20px auto -24px 50%; width: 100vw; transform: translateX(-50%); background-image: linear-gradient(180deg, #edf1f2 0%, #edf1f299 15%, #edf1f200 38%), url('/brand/hero-accessories-workbench-20261010.webp'); background-size: cover; background-position: center, 86% center; }
  .hero-refresh .hero-slide.theme-accessories .hero-image-caption { bottom: -7px; font-size: 10px; }
}
@media (min-width: 601px) and (max-width: 960px) {
  .hero-refresh .hero-slide.theme-accessories .hero-art-stage::after { background-size: cover, auto 135%; background-position: center, right center; }
}
@media (max-width: 600px) {
  .hero-refresh .hero-slide.theme-accessories .hero-accessory-item:nth-of-type(2) { right: -4.5%; }
}
.product-type-nav a:focus-visible { outline: 3px solid #00afe1; outline-offset: 3px; }
.family-subcategories #all-products { margin-top: 40px; font-size: 28px; }
.staff-stock-panel { max-width:1232px; margin:24px auto 60px; padding:28px; background:#eef4f9; border:1px solid #c9d9e8; border-radius:14px; color:#183a56; }
.staff-stock-panel h2 { font-size:24px; margin:0 0 10px; }
.staff-stock-panel > p { font-size:13px; margin-bottom:20px; }
.staff-stock-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:#d5e1eb; }
.staff-stock-grid > div { padding:14px; background:white; overflow-wrap:anywhere; }
.staff-stock-grid dt { font-size:12px; color:#607b91; margin-bottom:6px; }
.staff-stock-grid dd { font-size:15px; font-weight:600; margin:0; }
@media print { .staff-stock-panel { display:none !important; } }
@media (max-width: 700px) {
  .product-type-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 12px; }
  .product-type-nav a { flex: 0 0 auto; white-space: nowrap; }
}

/* Inactive hero backgrounds remain unfetched until the carousel prepares them.
   The opening hero is marked in server HTML, including when JavaScript is off. */
.hero-refresh .hero-slide:not([data-carousel-assets]) { display: none !important; }