/** Shopify CDN: Minification failed

Line 526:0 Unexpected "}"

**/
/* ONYX — Commercial Treadmills
   DELTA stylesheet. Loaded by snippets/onyx-pin-head.liquid on
   template.suffix == 'commercial-treadmills' ONLY, always after
   onyx-pin-loaded.css, which supplies every token, type ramp, button, border and
   breakpoint. Nothing here redefines a token.

   Not a redesign. Five jobs:
     1. compact hero, with a mobile hero that drops the paragraph and 2nd CTA
     2. two-column desktop grid that fills naturally as the range grows
     3. pure-white product image field
     4. the comparison table (the one genuinely new component)
     5. the SEO section

   No !important. No global element selectors. Every rule is prefixed
   .onyx-tread-* or nested under one, and this stylesheet only ever loads on the
   treadmill template, so the pin-loaded, rack-attachments and racks pages cannot
   be affected. */

/* ------------------------------------------------------------------ *
   1. Hero
   The shared hero reserves 82vh and up to 160px of top padding for a hero that
   carries eyebrow, H1, kicker, paragraph and two buttons. This hero is compact,
   so that reservation reads as dead space above the content.
 * ------------------------------------------------------------------ */
.onyx-tread-hero .onyx-pin-hero__inner {
  min-height: clamp(400px, 56vh, 660px);
  padding-block: clamp(44px, 6vh, 76px) clamp(48px, 6vh, 84px);
  gap: 22px;
}

/* ------------------------------------------------------------------ *
   2. Grid
   Two per row rather than the shared auto-fill minmax(320px), which would yield
   four columns on a wide screen and leave two treadmills stranded in a half-empty
   row. Wider cards also let each card carry three labelled spec cells.

   auto-fit + a 420px floor means the grid still fills correctly at ANY count:
   two products give two columns, three give three on a wide screen, and a short
   final row simply ends — there is no placeholder cell to leave grey.
 * ------------------------------------------------------------------ */
.onyx-tread-grid {
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  background: #ffffff;
}

/* The shared grid paints its hairlines by letting a --onyx-line container
   background bleed through 1px gaps, which only works while every cell is
   filled. Here each cell owns its border, so an unfilled cell is invisible. */
.onyx-tread-grid > .onyx-pin-grid__cell {
  outline: 1px solid var(--onyx-line);
}

/* ------------------------------------------------------------------ *
   3. Pure-white image field
   Treadmill photography sits on white. A grey field would draw a visible
   rectangle around it, so field, padding and body are one continuous #FFFFFF
   surface — including on hover, where the shared stylesheet would otherwise tint
   the field and seam at the field/body boundary.
   object-fit: contain comes from the shared stylesheet — nothing is cropped.
 * ------------------------------------------------------------------ */
.onyx-tread-grid .onyx-pin-card__field,
.onyx-tread-grid .onyx-pin-card:hover .onyx-pin-card__field,
.onyx-tread-grid .onyx-pin-card:hover {
  background: #ffffff;
}

/* A treadmill is long and low: 4:3 wastes less field than the shared 1:1. */
.onyx-tread-grid .onyx-pin-card__field {
  aspect-ratio: 4 / 3;
}

/* The shared status chip is a translucent white pill built to sit on grey; on a
   white field it needs a hairline to exist at all. */
.onyx-tread-grid .onyx-pin-card__status {
  background: #ffffff;
  border: 1px solid var(--onyx-line-strong);
  color: var(--onyx-ink);
}

/* Model label — the bordered mono treatment already established by
   .onyx-pin-support__partner, so it reads as existing ONYX vocabulary. */
.onyx-tread-card__series {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 11px;
  border: 1px solid var(--onyx-line-strong);
  font-family: var(--onyx-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--onyx-ink);
}

/* Card spec cells — NEW component, not a reuse. The pin-loaded card uses
   unlabelled pill chips; a cardio buyer compares the same three numbers across
   models, so the labels earn their space. Hairline grid, square, same line token. */
.onyx-tread-card__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 4px 0 0;
  padding: 0;
  background: var(--onyx-line);
  border: 1px solid var(--onyx-line);
}

.onyx-tread-card__spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 12px;
  background: #ffffff;
}

.onyx-tread-card__spec dt {
  font-family: var(--onyx-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--onyx-ink-3);
}

.onyx-tread-card__spec dd {
  margin: 0;
  font-family: var(--onyx-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--onyx-ink);
}

/* Foot: price left, actions right — the reverse of the shared card, because the
   COMPARE control needs to sit beside the CTA rather than under the price. */
.onyx-tread-card__foot {
  flex-wrap: wrap;
  gap: 14px;
}

.onyx-tread-card__prices {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.onyx-tread-card__compare {
  font-family: var(--onyx-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--onyx-ink-3);
}

.onyx-tread-card__actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-left: auto;
}

/* Above the whole-card overlay (z-index 2) so it stays clickable. */
.onyx-tread-card__compare-link {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border: 1px solid var(--onyx-line);
  font-family: var(--onyx-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--onyx-ink);
  transition: border-color 140ms var(--onyx-ease);
}

.onyx-tread-card__compare-link:hover { border-color: var(--onyx-line-strong); }

.onyx-tread-card__compare-box {
  width: 13px;
  height: 13px;
  border: 1px solid var(--onyx-line-strong);
}

.onyx-tread-card__cta {
  position: relative;
  z-index: 3;
}

/* Image scale tiers, driven by custom.card_scale (small | medium | large).
   Blank falls back to medium. No tier crops. */
.onyx-tread-card--s .onyx-pin-card__img { padding: 6%; }
.onyx-tread-card--m .onyx-pin-card__img { padding: 10%; }
.onyx-tread-card--l .onyx-pin-card__img { padding: 14%; }

/* ------------------------------------------------------------------ *
   4. Comparison table
   A CSS grid rather than a <table>, because the same markup restacks on mobile.
   Column count comes from the section's modifier class, so the label column
   keeps a fixed measure and the model columns share what is left.
 * ------------------------------------------------------------------ */
.onyx-tread-compare {
  padding-block: clamp(56px, 8vh, 104px);
  border-top: 1px solid var(--onyx-line);
}

.onyx-tread-compare__head {
  display: grid;
  gap: 18px;
  max-width: 900px;
  margin-bottom: clamp(28px, 4vh, 44px);
}

.onyx-tread-compare__scroll { overflow: visible; }

.onyx-tread-compare__table {
  border: 1px solid var(--onyx-line);
}

.onyx-tread-compare__row {
  display: grid;
  grid-template-columns: var(--onyx-tread-label, 300px) repeat(var(--onyx-tread-cols, 2), minmax(0, 1fr));
  border-bottom: 1px solid var(--onyx-line);
}

.onyx-tread-compare--cols-2 { --onyx-tread-cols: 2; }
.onyx-tread-compare--cols-3 { --onyx-tread-cols: 3; }
.onyx-tread-compare--cols-4 { --onyx-tread-cols: 4; }
.onyx-tread-compare--cols-5 { --onyx-tread-cols: 5; }
.onyx-tread-compare--cols-6 { --onyx-tread-cols: 6; }

.onyx-tread-compare__row:last-child { border-bottom: 0; }
.onyx-tread-compare__row--band { background: var(--onyx-surface-3, #FAFAF8); }

.onyx-tread-compare__row--head {
  background: var(--onyx-dark);
  color: var(--onyx-on-dark);
  border-bottom: 0;
}

.onyx-tread-compare__label {
  padding: 15px 24px;
  font-family: var(--onyx-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--onyx-ink-3);
}

.onyx-tread-compare__label--head {
  padding-block: 20px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--onyx-on-dark-2);
}

.onyx-tread-compare__cell {
  padding: 15px 24px;
  border-left: 1px solid var(--onyx-line);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--onyx-ink);
}

.onyx-tread-compare__cell--head {
  padding-block: 20px;
  border-left-color: #2e2e2e;
}

.onyx-tread-compare__model {
  font-family: var(--onyx-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--onyx-on-dark);
}

.onyx-tread-compare__model:hover { text-decoration: underline; text-underline-offset: 4px; }

.onyx-tread-compare__empty { color: var(--onyx-ink-3); }

.onyx-tread-compare__foot {
  margin: 16px 0 0;
  font-family: var(--onyx-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--onyx-ink-3);
}

/* Five or more models: the grid stops fitting, so the table scrolls and the
   label column pins. Two to four never scroll. */
.onyx-tread-compare--cols-5 .onyx-tread-compare__scroll,
.onyx-tread-compare--cols-6 .onyx-tread-compare__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.onyx-tread-compare--cols-5 .onyx-tread-compare__table,
.onyx-tread-compare--cols-6 .onyx-tread-compare__table {
  min-width: 900px;
}

/* ------------------------------------------------------------------ *
   5. SEO section
 * ------------------------------------------------------------------ */
.onyx-tread-seo {
  padding-block: clamp(56px, 8vh, 104px);
  border-top: 1px solid var(--onyx-line);
}

.onyx-tread-seo__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.onyx-tread-seo__h2 {
  font-size: clamp(24px, 2.2vw, 34px);
  margin-bottom: 20px;
  max-width: 22ch;
}

.onyx-tread-seo__rte {
  font-size: 14px;
  line-height: 1.65;
  color: var(--onyx-ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}

.onyx-tread-seo__rte h3 {
  font-family: var(--onyx-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--onyx-ink);
  margin: 22px 0 10px;
}

.onyx-tread-seo__links {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--onyx-line);
}

.onyx-tread-seo__links-label { margin-bottom: 11px; }

.onyx-tread-seo__link-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.onyx-tread-seo__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 13px 0;
  border-bottom: 1px solid var(--onyx-line);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--onyx-ink);
  transition: color 140ms var(--onyx-ease);
}

.onyx-tread-seo__link-list li:last-child .onyx-tread-seo__link { border-bottom: 0; }
.onyx-tread-seo__link:hover { color: var(--onyx-ink-2); }

/* ------------------------------------------------------------------ *
   Pagination — only renders when the range outgrows one page.
 * ------------------------------------------------------------------ */
.onyx-tread-pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  font-family: var(--onyx-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
   Responsive
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1100px) {
  .onyx-tread-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
  .onyx-tread-compare__row { --onyx-tread-label: 200px; }
  .onyx-tread-compare__label,
  .onyx-tread-compare__cell { padding-inline: 16px; }
}

@media screen and (max-width: 749px) {
  /* One column. */
  .onyx-tread-grid { grid-template-columns: minmax(0, 1fr); }

  /* Square field on a phone — a 4:3 treadmill shot is too short to read at
     390px wide. */
  .onyx-tread-grid .onyx-pin-card__field { aspect-ratio: 1 / 1; }

  /* One card per row makes the field large enough that the tiers stop earning
     their difference. */
  .onyx-tread-card--s .onyx-pin-card__img,
  .onyx-tread-card--m .onyx-pin-card__img,
  .onyx-tread-card--l .onyx-pin-card__img { padding: 8%; }

  .onyx-tread-card__spec { padding: 10px 8px; }
  .onyx-tread-card__spec dt { font-size: 7.5px; letter-spacing: 0.1em; }
  .onyx-tread-card__spec dd { font-size: 13px; }

  /* Full-width CTA; COMPARE drops away — the table is two scrolls below. */
  .onyx-tread-card__actions { width: 100%; margin-left: 0; }
  .onyx-tread-card__cta { flex: 1; justify-content: center; }
  .onyx-tread-card__compare-link { display: none; }

  /* Compact mobile hero. The shared stylesheet raises the inner back to 74vh,
     which reintroduces the empty band above the content on a phone. */
  .onyx-tread-hero .onyx-pin-hero__inner {
      min-height: 0;
        padding-block: 30px 32px;
          gap: 16px;
          }
  }

  /* Paragraph and the second button are desktop only — the eyebrow, H1 and
     kicker carry the hero, and the range starts immediately below. Hidden rather
     than omitted, so both stay editable in the Theme Editor. */
  .onyx-tread-hero .onyx-pin-lede,
  .onyx-tread-hero .onyx-pin-hero__actions .onyx-pin-btn--ghost {
    display: none;
  }

  .onyx-tread-hero .onyx-pin-hero__actions .onyx-pin-btn--primary {
    width: 100%;
    justify-content: center;
  }

  /* The model count competes with the heading for a narrow header. */
  .onyx-tread-nav .onyx-pin-nav__count { display: none; }

  /* ---- Comparison table restacks ----
     With a small range both values fit side by side under the spec label at
     390px, so nothing scrolls and nothing hides behind a gesture. A horizontal
     scroller would push the second model out of view and make the comparison
     harder, which is the opposite of the point. */
  .onyx-tread-compare__scroll { overflow: visible; }

  .onyx-tread-compare--cols-5 .onyx-tread-compare__table,
  .onyx-tread-compare--cols-6 .onyx-tread-compare__table { min-width: 0; }

  .onyx-tread-compare__table { border: 0; }

  .onyx-tread-compare__row {
    grid-template-columns: repeat(var(--onyx-tread-cols, 2), minmax(0, 1fr));
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--onyx-line);
    background: none;
  }

  /* The label leaves the first column and becomes a full-width caption above
     the values. */
  .onyx-tread-compare__label {
    grid-column: 1 / -1;
    padding: 0 0 3px;
  }

  .onyx-tread-compare__cell {
    padding: 0;
    border-left: 0;
    font-size: 12.5px;
  }

  /* The header row stays a real two-up band so the model names sit directly
     above their own columns. */
  .onyx-tread-compare__row--head {
    grid-template-columns: repeat(var(--onyx-tread-cols, 2), minmax(0, 1fr));
    gap: 1px;
    padding: 0;
    margin-bottom: 12px;
    background: var(--onyx-dark);
  }

  .onyx-tread-compare__label--head { display: none; }

  .onyx-tread-compare__cell--head {
    padding: 12px 14px;
    border-left: 0;
  }

  .onyx-tread-compare__model { font-size: 16px; }

  /* Five or more models genuinely will not restack at 390px — that range scrolls
     on mobile too, and the label caption keeps the row readable. */
  .onyx-tread-compare--cols-5 .onyx-tread-compare__scroll,
  .onyx-tread-compare--cols-6 .onyx-tread-compare__scroll {
    overflow-x: auto;
  }

  .onyx-tread-compare--cols-5 .onyx-tread-compare__table,
  .onyx-tread-compare--cols-6 .onyx-tread-compare__table { min-width: 560px; }

  /* SEO stacks. */
  .onyx-tread-seo__grid { grid-template-columns: minmax(0, 1fr); }
  .onyx-tread-seo__rte { font-size: 13px; }

  /* Support list: reassuring, not a dense column of small text. */
  .onyx-pin-support__note { display: none; }
  .onyx-pin-support__item { grid-template-columns: 30px 1fr; padding: 17px 0; }
  .onyx-pin-support__label { font-size: 16px; }
}