/* Onyx Moto unit page — final picks (Nov 5, 2026).
   All-in price card, New / Pre-owned label row (outline label first, then the red slash), action buttons
   (Text us + Call, then small cards), videos stacked under the buttons, phone total bar.
   Uses the site's own fonts: Muli for text, Aldrich (regular weight) for the label and the card title.
   Narrow-screen layout: layout-narrow-screens.css. Markup and placement: README.md. */

/* ---- Label row under the bike's name ---------------------------------------------------------------- */
h1.vehica-car-name.om-has-row::after { display: none !important; }   /* the old 140 x 15 slash */
.om-title-row { display: flex; align-items: center; gap: 10px; height: 22px; margin: 9px 0 10px; min-width: 0; }
.om-title-row .om-chip {   /* "New", "New · 6 mi", "Pre-owned · 5,166 mi" */
  position: relative; z-index: 0; flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 16px;
  font-family: 'Aldrich', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1; white-space: nowrap; color: #222732; background: transparent;
}
.om-title-row .om-chip::before { content: ""; position: absolute; inset: 0 3px; z-index: -1; border: 2px solid #222732; transform: skewX(-28deg); }
.om-title-row .om-slash {   /* three fixed strokes + a long bar that shortens when the label needs room */
  position: relative; flex: 0 1 213px; min-width: 100px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53 15.11'%3E%3Cg fill='%23e31d1a'%3E%3Cpolygon points='17 15.11 0 15.11 8.19 0 25.19 0'/%3E%3Cpolygon points='33.61 15.11 22.43 15.11 30.62 0 41.79 0'/%3E%3Cpolygon points='44.65 15.11 39.07 15.11 47.25 0 52.84 0'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / 77px 22px;
}
.om-title-row .om-slash::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 73px; right: 0;
  background: #e31d1a; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

/* ---- Price card ------------------------------------------------------------------------------------- */
.om-price {
  container-type: inline-size; container-name: om-price;
  box-sizing: border-box; width: 100%; max-width: 560px; margin: 4px 0 0; padding: 16px 18px 14px;
  background: #fff; border: 1px solid #e3e4e8; border-radius: 12px;
  font-family: 'Muli', Arial, Helvetica, sans-serif; color: #222732;
}
.om-price * { box-sizing: border-box; }
.om-price .om-price__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.om-price .om-price__title { margin: 0; padding: 0; font-family: 'Aldrich', Arial, Helvetica, sans-serif; font-size: 17px; line-height: 1.25; font-weight: 700; letter-spacing: 0; text-transform: none; color: #222732; }
.om-price .om-price__savings { margin: 0 0 2px; padding: 6px 10px; background: #ebf4ec; color: #2d6a3a; border-radius: 8px; font-size: 13.5px; line-height: 1.35; white-space: nowrap; }
.om-price .om-price__savings strong { font-weight: 800; }
.om-price .om-price__rows { margin: 0; padding: 0; }
.om-price .om-price__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 6px 0; border-bottom: 1px solid #ececef; font-size: 14.5px; line-height: 1.35; }
.om-price .om-price__row:last-child { border-bottom: 0; }
.om-price .om-price__row dt, .om-price .om-price__row dd { margin: 0; padding: 0; font-weight: inherit; }
.om-price .om-price__row dd { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.om-price .om-price__sign { display: inline-block; min-width: 0.9em; margin-right: 4px; color: #5f6673; text-align: center; }
.om-price .om-price__row--discount { color: #2d6a3a; font-weight: 800; }
.om-price .om-price__row--discount .om-price__sign { color: inherit; }
.om-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Total: "Total price" + one-line fine print on the left, amount on the right. */
.om-price .om-price__total { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label amount" "fine amount"; column-gap: 12px; row-gap: 1px; align-items: center; margin: 2px 0 0; padding: 8px 0 0; border-top: 2px solid #222732; }
.om-price .om-price__total-label { grid-area: label; align-self: end; margin: 0; padding: 0; font-size: 15px; line-height: 1.3; font-weight: 800; }
.om-price .om-price__amount { grid-area: amount; align-self: center; margin: 0; padding: 0; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #222732; }
.om-price .om-price__fine { grid-area: fine; align-self: start; margin: 0; padding: 0; font-size: 12.5px; line-height: 1.4; color: #4b5260; white-space: nowrap; }
@container om-price (max-width: 289px) {
  .om-price .om-price__total { column-gap: 10px; }
  .om-price .om-price__amount { font-size: 26px; }
  .om-price .om-price__fine { font-size: 11.5px; }
}
.om-facts { margin: 8px 0 0; padding: 0; font-family: 'Muli', Arial, Helvetica, sans-serif; font-size: 12.5px; line-height: 1.45; color: #4b5260; }
@media (max-width: 767px) {
  .om-price { margin-top: 14px; padding: 14px 16px 12px; }
  .om-price .om-price__title { font-size: 16.38px; }
  .om-price .om-price__row { padding: 5px 0; }
  .om-price .om-price__amount { font-size: 28px; }
}

/* ---- Action buttons: Text us + Call, then small cards --------------------------------------------------- */
.om-cta { margin: 16px 0 0; font-family: 'Muli', Arial, Helvetica, sans-serif; color: #222732; }
.om-cta a { text-decoration: none; }
.om-cta svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.om-cta .om-cta__title { display: block; margin: 0; font-size: 14.5px; line-height: 1.25; font-weight: 800; }
.om-cta .om-cta__sub { display: block; margin: 0; font-size: 12.5px; line-height: 1.3; color: #4b5260; }
.om-cta .om-cta__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.om-cta .om-cta__pair a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; color: #fff; }
.om-cta .om-cta__textbtn { background: #e31d1a; }
.om-cta .om-cta__callbtn { background: #0f1116; }
.om-cta .om-cta__pair .om-cta__title { font-size: 15.5px; }
.om-cta .om-cta__pair .om-cta__sub { color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
.om-cta .om-cta__cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.om-cta .om-cta__card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 10px 11px; border: 1px solid #e3e4e8; border-radius: 10px; background: #fff; color: #222732; text-align: center; }
.om-cta .om-cta__card svg { width: 20px; height: 20px; margin-bottom: 6px; color: #e31d1a; }
.om-cta .om-cta__card .om-cta__title { font-size: 13.5px; white-space: nowrap; }
.om-cta .om-cta__card .om-cta__sub { font-size: 12px; white-space: nowrap; }
@media (max-width: 767px) { .om-cta { margin-top: 12px; } }   /* phones: card and buttons read as one group */
/* Keyboard focus (added at handoff, Nov 5): a visible ring on every new link, including the phone total bar. */
.om-cta a:focus-visible, .om-sticky a:focus-visible { outline: 2px solid #0f1116; outline-offset: 2px; }

/* ---- Videos: stacked under the buttons, no "Video" heading -------------------------------------------- */
/* The Elementor container holding the two video widgets gets the CSS class om-videos (Advanced > CSS Classes). */
.om-videos { margin: 16px 0 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; }
.om-videos > .e-con-inner { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.om-videos .elementor-widget { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.om-videos .elementor-widget-container { margin: 0 !important; }
.om-videos .vehica-car-embed-wrapper { position: relative; width: 100%; height: auto !important; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0f1116; }
.om-videos .vehica-car-embed, .om-videos .vehica-car-embed__inner { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; }
.om-videos iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }

/* ---- Share buttons: moved into Related Units, under "Start a new search" -------------------------------- */
.elementor-widget.om-share { width: 100%; margin: 24px 0 0 !important; }
.om-share .elementor-widget-container { margin: 0 !important; }

/* ---- Phone total bar (shown by om-total-bar.js after the visitor scrolls past the card's total) ------- */
.om-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid #e3e4e8; box-shadow: 0 -6px 18px rgba(15, 17, 22, 0.10);
  font-family: 'Muli', Arial, Helvetica, sans-serif; color: #222732;
  transform: translateY(110%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
.om-sticky.is-visible { transform: translateY(0); visibility: visible; transition: transform 0.2s ease; }
.om-sticky .om-sticky__price { display: grid; min-width: 0; color: inherit; text-decoration: none; line-height: 1.2; }
.om-sticky .om-sticky__label { font-size: 12px; font-weight: 700; color: #4b5260; }
.om-sticky .om-sticky__amount { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
.om-sticky .om-sticky__fine { font-size: 11.5px; color: #4b5260; }
.om-sticky .om-sticky__cta { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 10px; background: #e31d1a; color: #fff; font-weight: 600; font-size: 15px; text-transform: uppercase; text-decoration: none; }
body.om-has-bar { padding-bottom: 72px; }
@media (prefers-reduced-motion: reduce) { .om-sticky, .om-sticky.is-visible { transition: none; } }
@media (min-width: 768px) { .om-sticky { display: none; } body.om-has-bar { padding-bottom: 0; } }