/* DealerSpark public theme — dark powersports layout. Shared by every public
   page; each page's own styles are in home.css, inventory.css, vehicle.css
   and forms.css, linked after this file (templates' `styles` block). */
/* Fonts are self-hosted (Latin subset, only the weights used) so text
   doesn't wait on extra connections to Google. Roboto Condensed is the
   variable font cut to wght 400-900 (fontTools varLib.instancer; 900 is
   reached by <strong> inside bold text). */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/anton-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/rajdhani-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/rajdhani-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/static/fonts/roboto-condensed.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --red: #f7152b;
  --red-dark: #cc0000;
  --bg: #121212;
  --panel: #000;
  --panel-2: #1b1b1b;
  --bar: #252525;
  --line: #333;
  --text: #fff;
  --muted: #a9a9a9;
  /* Title chips: a light plate under red unit names, so they read on black. */
  --chip-bg: #efeee9;
  --chip-bg-hi: #fbfaf7;
  --chip-ink: #c8101f;
  --chip-ink-hover: #9a0a16;
  --wrap: 1320px;
  --display: "Anton", Impact, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --body: "Rajdhani", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --cond: "Roboto Condensed", "Arial Narrow", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  /* Seamless SVG mesh tile, plus a soft fixed light falloff layered on top
     so the shading never repeats or seams as the page scrolls. */
  background:
    radial-gradient(ellipse 90% 70% at 70% 20%, rgba(255,255,255,.04), transparent 70%) fixed,
    url("/static/img/carbon.svg") 0 0 / 11px 19px repeat,
    var(--bg);
  color: var(--text);
  font: 400 15px/1.45 var(--body);
  padding-bottom: 64px; /* room for the fixed brand bar */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration: none; }

/* A unit's name on a light plate with a slanted end (inventory cards, the
   unit page's heading): the brand red, deepened to read on it (5:1), with
   the red edge the site's headings use. */
.title-chip {
  display: inline-block; max-width: 100%; padding: .14em 1.1em .12em .5em;
  background: linear-gradient(180deg, var(--chip-bg-hi), var(--chip-bg)) var(--chip-bg); /* the color: hover fades from it, not from clear */
  border-left: 4px solid var(--red); color: var(--chip-ink);
  clip-path: polygon(0 0, 100% 0, calc(100% - .62em) 100%, 0 100%);
  /* The slant keeps one line's angle however many lines the name wraps to:
     its edge runs through a point ten lines down (the box cuts it off). */
  clip-path: polygon(0 0, 100% 0, calc(100% - 6.2em) calc(10lh + 2.6em), 0 calc(10lh + 2.6em));
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .07);
  text-decoration: none; overflow-wrap: anywhere;
}
a.title-chip { transition: color .15s, background-color .15s; }
a.title-chip:hover, a.title-chip:focus-visible { color: var(--chip-ink-hover); background: var(--chip-bg-hi); text-decoration: none; }
a.title-chip:focus-visible { outline: 2px solid var(--chip-ink); outline-offset: -5px; }
/* On inventory cards, hovering the name sweeps a band of the make's color,
   see-through, across the plate once, left to right (under the text). */
.unit a.title-chip { position: relative; isolation: isolate; }
.unit a.title-chip::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, color-mix(in srgb, var(--brand, var(--red)) 38%, transparent) 50%, transparent 80%);
  transform: translateX(-100%);
}
.unit a.title-chip:hover::after { animation: chip-shimmer .55s ease-out; }
@keyframes chip-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .unit a.title-chip:hover::after { animation: none; } }
/* After it, a slanted stripe in the make's color (models::brand_color), one
   line high, parallel to the plate's end and a little below it: the plate's
   shadow falls along its near edge. 113deg runs square to the slant. The
   plate's left edge takes the same color. */
.title-wrap { display: inline-flex; max-width: 100%; vertical-align: top; }
.title-wrap .title-chip { min-width: 0; border-left-color: var(--brand, var(--red)); }
.brand-tick {
  flex: none; align-self: flex-start; width: 1.1em; height: 1.46em; height: calc(1lh + .26em); margin-left: -.46em;
  background: linear-gradient(113deg, rgba(0, 0, 0, .2) .57em, rgba(0, 0, 0, .06) .8em, rgba(0, 0, 0, 0) 1em), var(--brand);
  clip-path: polygon(.62em 0, 100% 0, calc(100% - .62em) 100%, 0 100%);
}
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 500; line-height: 1.15; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 15px; }
.muted { color: var(--muted); }
/* Every shown price carries a small asterisk in its upper right corner (see the disclaimer). */
.ast::after { content: "*"; display: inline-block; margin-left: .05em; font-size: .5em; line-height: 1; vertical-align: top; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; color: #000; padding: 8px 12px; z-index: 100; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Text fields and dropdowns get an on-theme red glow instead of the white ring. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(247,21,43,.55); }

/* ---------------------------------------------------------------- icons (CSS masks) */
.ico { display: inline-block; width: 1em; height: 1em; background: currentColor; vertical-align: -0.125em;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ico-pin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.ico-phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E"); }
.ico-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3a7 7 0 1 0 4.2 12.6l5.1 5.1 1.4-1.4-5.1-5.1A7 7 0 0 0 10 3zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10z'/%3E%3C/svg%3E"); }
.ico-mic { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5.3-3c0 3-2.5 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.4 2.7 6.2 6 6.7V21h2v-3.3c3.3-.5 6-3.3 6-6.7z'/%3E%3C/svg%3E"); }
.ico-mail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18v14H3zm2 2v.5l7 4.5 7-4.5V7zm0 2.9V17h14V9.9l-7 4.5z'/%3E%3C/svg%3E"); }
.ico-camera { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4 7.2 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-3.2L15 4zm3 4.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9z'/%3E%3C/svg%3E"); }
.ico-info { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2zm0-8h-2V7h2z'/%3E%3C/svg%3E"); }
.ico-comment { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.6 2 11c0 2.4 1.3 4.5 3.4 6L4 21l4.7-2.4c1 .3 2.1.4 3.3.4 5.5 0 10-3.6 10-8s-4.5-8-10-8zm0 2c4.4 0 8 2.7 8 6s-3.6 6-8 6c-1.1 0-2.1-.2-3.1-.5l-.4-.1-1.6.8.5-1.5-.7-.5C5 14 4 12.6 4 11c0-3.3 3.6-6 8-6z'/%3E%3C/svg%3E"); }
/* text message: speech bubble with three dots */
.ico-text { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 3h16a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H10l-5 4v-4H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2.5 7.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0zm4 0a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0zm4 0a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0z'/%3E%3C/svg%3E"); }
.ico-exchange { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3l4 4-4 4V8H4V6h13zM7 13v3h13v2H7v3l-4-4z'/%3E%3C/svg%3E"); }
/* cash: stacked banknotes */
.ico-dollar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 14V6a2 2 0 0 0-2-2H3a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zm-9-1a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm13-6v11a2 2 0 0 1-2 2H4v-2h17V7z'/%3E%3C/svg%3E"); }
.ico-cogs { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.3 2h3.4l.5 2.6 1.6.9 2.5-.9 1.7 3-2 1.7v1.4l2 1.7-1.7 3-2.5-.9-1.6.9-.5 2.6h-3.4l-.5-2.6-1.6-.9-2.5.9-1.7-3 2-1.7V9.3l-2-1.7 1.7-3 2.5.9 1.6-.9zM12 8.5a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E"); }
.ico-quote { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.37 10.52A8.5 8.5 0 1 1 18.88 7.00'/%3E%3Cpath fill='%23000' stroke-width='1.2' d='M20.06 8.96L20.87 4.57L15.85 7.47Z'/%3E%3Cg transform='translate%2812 12%29 scale%28.8%29 translate%28-12 -11.85%29' stroke-width='2.4'%3E%3Cpath d='M14.3 9.4c-.4-.7-1.2-1.1-2.3-1.1-1.3 0-2.3.7-2.3 1.7 0 2.4 4.7 1.3 4.7 3.6 0 1-1 1.8-2.4 1.8-1.1 0-2-.5-2.4-1.2M12 6.9v1.4M12 15.4v1.4'/%3E%3C/g%3E%3C/svg%3E"); }
.ico-arrow-right { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E"); }
.ico-bell { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a1.5 1.5 0 0 1 1.5 1.5v.7A6 6 0 0 1 18 10v5l2 2v1H4v-1l2-2v-5a6 6 0 0 1 4.5-5.8v-.7A1.5 1.5 0 0 1 12 2zm-2 18h4a2 2 0 0 1-4 0z'/%3E%3C/svg%3E"); }
.ico-calendar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3zm-2 8v9h14v-9z'/%3E%3C/svg%3E"); }
.ico-print { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12v5H6zM4 8h16a2 2 0 0 1 2 2v6h-4v6H6v-6H2v-6a2 2 0 0 1 2-2zm4 8v4h8v-4z'/%3E%3C/svg%3E"); }
.ico-share { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 2a3 3 0 1 1-2.4 4.8L8.9 10.2a3 3 0 0 1 0 1.6l6.7 3.4A3 3 0 1 1 15 17l-6.7-3.4a3 3 0 1 1 0-3.2L15 7a3 3 0 0 1 3-5z'/%3E%3C/svg%3E"); }
.ico-circle-arrow { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5 5 5-5 5-1.4-1.4 2.6-2.6H6v-2h6.2L9.6 8.4z'/%3E%3C/svg%3E"); }
.ico-history { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 3a9 9 0 0 0-9 9H1l3.9 3.9L9 12H6a7 7 0 1 1 2.05 4.95l-1.42 1.42A9 9 0 1 0 13 3zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z'/%3E%3C/svg%3E"); }
.ico-flag { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.6' y='1.5' width='2.2' height='21' rx='1.1'/%3E%3Cpath d='M5 3.5L9 2.5L13 3.5L17 4.5L21 3.5L21 14L17 15L13 14L9 13L5 14Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M5 3.5L9 2.5L9 6L5 7ZM13 3.5L17 4.5L17 8L13 7ZM9 6L13 7L13 10.5L9 9.5ZM17 8L21 7L21 10.5L17 11.5ZM5 10.5L9 9.5L9 13L5 14ZM13 10.5L17 11.5L17 15L13 14Z'/%3E%3C/svg%3E"); }
.ico-flag-o { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.6' y='1.5' width='2.2' height='21' rx='1.1'/%3E%3Cpath d='M5 3.5L9 2.5L13 3.5L17 4.5L21 3.5L21 14L17 15L13 14L9 13L5 14Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ico-fb { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8V6.5c0-.8.2-1.2 1.4-1.2H17V2h-2.6C11.3 2 10 3.5 10 6v2H8v3.2h2V22h4V11.2h2.7L17 8z'/%3E%3C/svg%3E"); }
.ico-ig { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3zm5 3.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9zm0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM17.3 5.5a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z'/%3E%3C/svg%3E"); }
.ico-tw { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 5.9c-.7.3-1.5.5-2.3.6.8-.5 1.5-1.3 1.8-2.2-.8.5-1.7.8-2.6 1a4.1 4.1 0 0 0-7 3.7A11.6 11.6 0 0 1 3.4 4.7a4.1 4.1 0 0 0 1.3 5.5c-.7 0-1.3-.2-1.9-.5 0 2 1.4 3.7 3.3 4.1-.6.2-1.2.2-1.9.1a4.1 4.1 0 0 0 3.8 2.8A8.2 8.2 0 0 1 2 18.4 11.6 11.6 0 0 0 8.3 20.2c7.5 0 11.7-6.3 11.7-11.7v-.5c.8-.6 1.5-1.3 2-2.1z'/%3E%3C/svg%3E"); }
.ico-yt { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 7.2a3 3 0 0 0-2.1-2.1C19 4.6 12 4.6 12 4.6s-7 0-8.9.5A3 3 0 0 0 1 7.2 31 31 0 0 0 .5 12a31 31 0 0 0 .5 4.8 3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1 31 31 0 0 0 .5-4.8 31 31 0 0 0-.5-4.8zM9.7 15.1V8.9L15.5 12z'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- color swatches
   A round tile; its background (one color, a split for two-tone) comes from
   colors::swatch_css in a style attribute. */
.swatch { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.facet__list .swatch { width: 16px; height: 16px; margin-right: -3px; }

/* ---------------------------------------------------------------- favorites */
/* checkered-flag toggle on unit photos (inventory cards, VDP gallery) */
.fav { position: absolute; left: 8px; top: 8px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.3); color: #fff; font-size: 21px; cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,.18); transition: background .15s, color .15s, transform .15s; }
/* light circle so the photo shows through; the shadow keeps the flag readable on bright shots */
.fav > .ico { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.55)); }
.fav:hover { background: rgba(0,0,0,.5); transform: scale(1.06); }
.fav.is-fav { background: rgba(255,255,255,.55); color: var(--red); }
/* saved on a photo: a real black-and-white checkered flag (a colour image, not the one-colour mask) */
.fav.is-fav > .ico { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.6' y='1.5' width='2.2' height='21' rx='1.1' fill='black'/%3E%3Cpath d='M5 3.5L9 2.5L13 3.5L17 4.5L21 3.5L21 14L17 15L13 14L9 13L5 14Z' fill='white'/%3E%3Cpath d='M5 3.5L9 2.5L9 6L5 7ZM13 3.5L17 4.5L17 8L13 7ZM9 6L13 7L13 10.5L9 9.5ZM17 8L21 7L21 10.5L17 11.5ZM5 10.5L9 9.5L9 13L5 14ZM13 10.5L17 11.5L17 15L13 14Z' fill='black'/%3E%3Cpath d='M5 3.5L9 2.5L13 3.5L17 4.5L21 3.5L21 14L17 15L13 14L9 13L5 14Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: none; mask: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
/* tilted like it's being waved; `rotate` composes with the save pulse's transform */
.fav > .ico { rotate: -14deg; }
.fav.is-fav:hover { background: rgba(255,255,255,.75); }
.fav--lg { left: 12px; top: 12px; width: 48px; height: 48px; font-size: 25px; }
.is-fav > .ico-flag-o { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.6' y='1.5' width='2.2' height='21' rx='1.1'/%3E%3Cpath d='M5 3.5L9 2.5L13 3.5L17 4.5L21 3.5L21 14L17 15L13 14L9 13L5 14Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M5 3.5L9 2.5L9 6L5 7ZM13 3.5L17 4.5L17 8L13 7ZM9 6L13 7L13 10.5L9 9.5ZM17 8L21 7L21 10.5L17 11.5ZM5 10.5L9 9.5L9 13L5 14ZM13 10.5L17 11.5L17 15L13 14Z'/%3E%3C/svg%3E"); }
/* pulse + starburst when a unit is saved */
.is-pop > .ico { animation: favPop .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes favPop { 0% { transform: scale(1); } 25% { transform: scale(.7); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.fav-burst { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 1; }
.fav-burst::before { content: ""; position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--red); animation: favRing .55s ease-out forwards; }
.fav-burst i { position: absolute; left: -1.5px; top: -4px; width: 3px; height: 8px; border-radius: 2px; background: var(--red); opacity: 0; animation: favRay .6s cubic-bezier(.15,.7,.3,1) forwards; }
.fav-burst i:nth-child(even) { background: #ffc23d; height: 6px; }
@keyframes favRing { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
@keyframes favRay { 0% { transform: rotate(var(--a)) translateY(-10px) scaleY(.3); opacity: 1; } 55% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-30px) scaleY(1); opacity: 0; } }
/* header link to /favorites with a count badge */
.favlink { position: relative; display: grid; place-items: center; width: var(--topbar-h, 42px); height: var(--topbar-h, 42px); border-radius: 6px; background: #262626; border: 1px solid #333; color: var(--red); font-size: 22px; transition: border-color .15s, background .15s; }
.favlink:hover { border-color: var(--red); background: #2f2f2f; text-decoration: none; }
.favlink__count { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font: 700 12px/21px var(--cond); text-align: center; box-shadow: 0 0 0 2px #1a1a1a; }
.favlink__count[hidden] { display: none; }
.favlink.is-bump { animation: favPop .5s cubic-bezier(.2,.9,.3,1.4); }
@media (prefers-reduced-motion: reduce) { .is-pop > .ico, .favlink.is-bump { animation: none; } }

/* ---------------------------------------------------------------- top bar */
/* One shared control height for the call button, social icons and search. */
.topbar { position: relative; z-index: 47; --topbar-h: 46px; background: #1a1a1a; border-bottom: 1px solid #000; font-size: 14px; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 14px; flex-wrap: wrap; }
.topbar__address { display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; color: #fff; letter-spacing: .03em; font-weight: 600; }
.topbar__address .ico { margin-right: 4px; font-size: 17px; color: var(--red); }
.topbar__address .sep { color: #666; margin: 0 6px; }
.topbar__address a { text-transform: uppercase; font-weight: 700; }
.topbar__right { display: flex; align-items: center; gap: 20px; }
/* call button: icon + live open/closed status + number */
.callpill { box-sizing: border-box; height: var(--topbar-h); display: inline-flex; align-items: center; gap: 10px; padding: 0 18px 0 5px; border-radius: 999px; background: #262626; border: 1px solid #333; color: #fff; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s; }
.callpill:hover { background: #2f2f2f; border-color: var(--red); text-decoration: none; color: #fff; }
.callpill:active { transform: scale(.98); }
.callpill__icon { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--red); display: grid; place-items: center; font-size: 20px; flex: none; }
.callpill.is-open .callpill__icon::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--red); animation: ring 2.4s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.9); opacity: .9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.callpill__text { display: flex; flex-direction: column; line-height: 1.05; }
.callpill__status { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1.2 var(--body); color: #c8c8c8; text-transform: uppercase; letter-spacing: .04em; }
.callpill__number { font: 400 22px/1.1 var(--display); letter-spacing: .02em; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #888; flex: none; }
/* only the open-now pill and call bar, not the menu (.mainnav.is-open) */
.callpill.is-open .dot, .mobilebar__call.is-open .dot, .is-live .dot { background: #3ccf4e; box-shadow: 0 0 0 0 rgba(60,207,78,.6); animation: pulse 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .callpill.is-open .callpill__icon::after, .callpill.is-open .dot, .mobilebar__call.is-open .dot, .is-live .dot { animation: none; } }
.topbar__search { display: flex; border-radius: 4px; transition: box-shadow .15s; }
.topbar__search:focus-within { box-shadow: 0 0 0 3px rgba(247,21,43,.6); }
.topbar__search input:focus, .topbar__search input:focus-visible { outline: none; box-shadow: none; }
.topbar__search input { width: 240px; height: var(--topbar-h); border: 0; border-radius: 4px 0 0 4px; padding: 0 12px; font-size: 15px; color: #222; background: #fff; }
.topbar__search button { border: 0; border-radius: 0 4px 4px 0; background: var(--red-dark); color: #fff; width: var(--topbar-h); height: var(--topbar-h); font-size: 18px; cursor: pointer; }
/* voice search (site.js adds the mic where speech is recognised on the device) */
.voice { color: var(--red); flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; cursor: pointer; font-size: 20px; }
.topbar__search .voice { width: 34px; height: var(--topbar-h); background: #fff; color: var(--red); }
.voice:hover { filter: brightness(1.15); }
.voice.is-loading .ico { opacity: .35; }
/* listening: the mic turns solid red with a ring pulsing out of it, and the
   box goes pink with a red edge and "Listening…" in red */
form.is-listening .voice { position: relative; background: var(--red); color: #fff; }
form.is-listening .voice::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255,255,255,.45); animation: voiceRing 1.2s ease-out infinite; }
form.is-listening .voice .ico { position: relative; animation: voicePulse 1.2s ease-in-out infinite; }
form.is-listening input { background: #fff0f1; box-shadow: inset 0 0 0 2px var(--red); }
form.is-listening input::placeholder { color: var(--red); font-weight: 600; opacity: 1; }
@keyframes voicePulse { 50% { transform: scale(1.25); } }
@keyframes voiceRing { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { form.is-listening .voice::before { animation: none; opacity: .35; } form.is-listening .voice .ico { animation: none; } }

.social { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.social a { display: grid; place-items: center; width: var(--topbar-h); height: var(--topbar-h); border-radius: 6px; color: #fff; font-size: 30px; transition: filter .15s, transform .15s; }
.social a:hover { transform: translateY(-1px); }
.social__fb { background: #3b5998; }
/* Instagram brand gradient */
.social__ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social__tw { background: #1da1f2; }
.social__yt { background: #cc181e; }
.social a:hover { filter: brightness(1.15); text-decoration: none; }

.topbar__logo { display: none; }
/* Desktop: the top bar stays pinned (phones pin the nav bar instead).
   site.js keeps --sticky-top at its height for things that stick below it. */
@media (min-width: 992px) {
  .topbar { position: sticky; top: 0; z-index: 47; transition: box-shadow .2s; }
  /* one row, always: the address gives way (ellipsis) rather than the bar
     wrapping, e.g. while the fallback font is showing before the web font */
  .topbar__inner { flex-wrap: nowrap; }
  .topbar__address { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .topbar__address .ico { flex: none; }
  .topbar__right { flex: none; }
  .is-scrolled .topbar { box-shadow: 0 8px 20px rgba(0,0,0,.6); }
  html { scroll-padding-top: calc(var(--sticky-top, 0px) + 10px); }
  /* the inventory page has its own search box */
  .is-inventory .topbar__search { display: none; }
  .search-collapsing .is-inventory .topbar__search { display: flex; }
  .search-expanding .topbar__search { display: none; }
  /* the banner logo flies into the pinned bar as the banner scrolls away;
     site.js drives the transform, starting from the logo's real spot */
  .topbar__logo { display: block; position: fixed; left: 0; top: 0; z-index: 48; transform-origin: 0 0; visibility: hidden; will-change: transform; }
  .topbar__logo.is-flying { visibility: visible; }
  .topbar__logo img { display: block; width: 100%; height: auto; }
}
/* narrower desktops: tighten the right side so the bar stays one row */
@media (min-width: 992px) and (max-width: 1239px) {
  .topbar__right { gap: 12px; }
  .topbar__search input { width: 140px; }
  .topbar__address .sep, .topbar__address a { display: none; }
}

/* ---------------------------------------------------------------- masthead */
.masthead { background: #000 center / cover no-repeat; min-height: 182px; position: relative; overflow: hidden; }
.masthead__inner { position: relative; height: 182px; }
.masthead__brand { position: absolute; left: 15px; top: 4px; width: 46%; max-width: 520px; }
.masthead__brand img { width: 100%; }
.masthead__wordmark { font: 400 56px/1 var(--display); color: var(--red); text-transform: uppercase; text-shadow: 3px 3px 0 #000; }
/* Phone number lettered like the logo: red gradient fill, white inner
   outline, black outer outline (the ::before copy), italic slant, hard shadow. */
.masthead__phone { position: absolute; left: 34px; bottom: 10px; display: inline-block; transform: skewX(-9deg); transform-origin: left bottom; transition: transform .15s; isolation: isolate; }
.masthead__phone span { position: relative; display: inline-block; font: 400 32px/1 var(--display); letter-spacing: .03em; color: #ec1c2a;
  -webkit-text-stroke: 4px #fff; paint-order: stroke fill;
  background: linear-gradient(#ff5560, #e3101f 55%, #b80012); -webkit-background-clip: text; background-clip: text; }
.masthead__phone span::before { content: attr(data-t); position: absolute; inset: 0; z-index: -1; color: #0b0b0b;
  -webkit-text-stroke: 11px #0b0b0b; paint-order: stroke fill; text-shadow: 3px 4px 0 #0b0b0b; }
.masthead__phone:hover { text-decoration: none; transform: skewX(-9deg) translateY(-2px); }
.masthead__phone:hover span { filter: brightness(1.1); }
.masthead__phone:active { transform: skewX(-9deg) translateY(1px); }
.masthead__phone:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
/* placed from the centre, like the cover background, so he clears its "Easiest Financing" banner */
.masthead__mascot { position: absolute; left: calc(50% + 130px); bottom: 0; width: min(384px, calc(50% - 142px)); height: auto; }

/* ---------------------------------------------------------------- nav */
.mainnav { background: var(--bar); border-bottom: 1px solid #111; position: relative; z-index: 20; }
.mainnav__menu { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.mainnav__menu > li { position: relative; }
.mainnav__menu > li + li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: #3a3a3a; }
.mainnav__menu > li > a { display: block; padding: 16px 26px; font: 400 23px/1.2 var(--display); text-transform: uppercase; color: #fff; letter-spacing: .04em; text-shadow: 0 2px 0 rgba(0,0,0,.6); transition: color .15s; }
.mainnav__menu > li > a:hover, .mainnav__menu > li:focus-within > a { color: var(--red); text-decoration: none; }
.has-sub > a::after { content: ""; display: inline-block; margin-left: 8px; border: 4px solid transparent; border-top-color: var(--red); vertical-align: 2px; }
.mainnav__cta .dollar { color: var(--red); }
.sub { display: none; position: absolute; left: 0; top: 100%; min-width: 240px; list-style: none; margin: 0; padding: 6px 0; background: #111; border-top: 3px solid var(--red); box-shadow: 0 8px 18px rgba(0,0,0,.5); }
.has-sub:hover > .sub, .has-sub:focus-within > .sub { display: block; }
.sub a { display: block; padding: 7px 18px; color: #fff; font: 500 15px/1.3 var(--body); text-transform: uppercase; }
.sub a:hover { background: var(--red); color: #fff; text-decoration: none; }
.mainnav__toggle, .mainnav__call, .mainnav__find-toggle, .mainnav__find, .mainnav__extra, .sub-toggle, .mainnav__fav, .mainnav__hist { display: none; }

/* mobile quick-action bar (shown on phones instead of the brand strip) */
.mobilebar { display: none; }

/* ---------------------------------------------------------------- page shells */
.page { padding: 14px 0 30px; }
.panel { background: var(--panel); padding: 18px 20px 26px; }
.page-title { color: var(--red); font: 500 34px/1.1 var(--body); margin: 4px 0 18px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer; padding: 8px 14px; color: #fff; background: #333; font: 700 13px/1 var(--cond); text-transform: uppercase; }
.btn:hover { text-decoration: none; filter: brightness(1.15); }
.btn--red { background: var(--red); color: #fff; }
.btn--dark { background: #333; }
.btn--sm { padding: 6px 10px; font-size: 12px; }
.btn--lg { padding: 16px 40px; font-size: 16px; }
.btn--block { width: 100%; }
.cms { font-family: var(--body); font-size: 15px; color: #fff; }
.cms p { margin: 0 0 1em; }
.cms h2, .cms h3 { color: var(--red); font-family: var(--body); }
.cms img { display: inline-block; }
.cms a { font-weight: 700; }
.cms table { border-collapse: collapse; }
.cms td, .cms th { padding: 4px 8px; }
/* legal pages (privacy, terms, policies): one readable column of numbered sections */
.legal { max-width: 820px; font-size: 17px; line-height: 1.55; }
.legal__updated { color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.legal__lead { font-size: 19px; }
.legal__toc { background: var(--panel-2); border-left: 3px solid var(--red); padding: 14px 20px; margin: 22px 0 8px; }
.legal__toc-title { margin: 0 0 6px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; color: var(--muted); }
.legal__toc ol { columns: 2; column-gap: 32px; margin: 0; padding-left: 22px; }
.legal__toc li { break-inside: avoid; margin: 2px 0; }
.legal__toc a { font-weight: 600; color: #fff; }
.legal section { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 4px; scroll-margin-top: 20px; }
.legal h2 { font-size: 23px; font-weight: 700; margin: 14px 0 10px; }
.legal ul, .legal ol { margin: 0 0 1em; padding-left: 24px; }
.legal li { margin: 0 0 .45em; }
.legal li::marker { color: var(--red); }
.legal__toc li::marker { color: var(--muted); }
.legal strong { color: #fff; }
.legal code { font-size: 15px; background: var(--bar); padding: 1px 6px; border-radius: 3px; }
.legal__table { width: 100%; margin: 4px 0 1.2em; font-size: 16px; }
.legal__table th { text-align: left; color: var(--muted); font-weight: 700; border-bottom: 2px solid var(--line); }
.legal__table td { border-bottom: 1px solid var(--line); vertical-align: top; }
.legal__table th, .legal__table td { padding: 8px 12px 8px 0; }
.legal__terms { margin: 0 0 1em; }
.legal__terms dt { font-weight: 700; margin-top: 12px; }
.legal__terms dd { margin: 2px 0 0; color: #ddd; }
.legal__contact { font-style: normal; background: var(--panel-2); padding: 14px 20px; display: inline-block; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(51,204,51,.7); } 100% { box-shadow: 0 0 0 10px rgba(51,204,51,0); } }

/* suggestions dropdown (inventory + header search) */
.suggest { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 6px 0; background: #fff; color: #111; box-shadow: 0 12px 30px rgba(0,0,0,.55); border-radius: 4px; max-height: 70vh; overflow-y: auto; font-family: var(--cond); text-align: left; }
.suggest[hidden] { display: none; }
.suggest--header { width: 380px; left: auto; right: 0; }
.suggest__group { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #888; }
.suggest__item { display: flex; align-items: center; gap: 12px; padding: 7px 14px; cursor: pointer; }
.suggest__item:hover, .suggest__item.is-active { background: #fdecee; }
.suggest__item img { width: 64px; height: 48px; object-fit: cover; border-radius: 3px; flex: none; background: #eee; }
.suggest__kind { flex: none; width: 64px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: #333; border-radius: 3px; text-align: center; padding: 3px 0; }
.suggest__item--make .suggest__kind { background: var(--red); }
.suggest__item--includes .suggest__kind { background: #e0a800; color: #111; }
.suggest__text { display: flex; flex-direction: column; min-width: 0; }
.suggest__label { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest__label mark { background: none; color: var(--red); }
.suggest__sub { font-size: 12px; color: #666; }
.suggest__none { padding: 10px 14px; color: #666; font-size: 14px; }
.ribbon { position: absolute; top: 0; right: 0; background: rgba(247,21,43,.85); color: #fff; font: 400 13px/1 var(--cond); text-transform: uppercase; padding: 8px 12px; }
.ribbon--dark { background: rgba(0,0,0,.75); top: auto; bottom: 0; }
.ribbon--lg { font-size: 22px; padding: 14px 24px; }
.btn--ghost { background: transparent; color: #ccc; border: 1px solid #3a3a3a; }
.btn--ghost:hover { color: #fff; border-color: #666; }

/* ---------------------------------------------------------------- footer */
.footer { background: #1b1b1b; margin-top: 30px; padding: 60px 0 30px; color: #fff; font: 400 15px/1.35 var(--body); }
.footer__grid { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 0; }
.footer__col { padding: 0 30px; }
.footer__col:first-child { padding-left: 15px; }
.footer__col--mid { border-left: 1px dotted #555; border-right: 1px dotted #555; }
.footer h4 { color: var(--red); font: 400 18px/1 var(--display); text-transform: uppercase; margin: 0 0 14px; }
.footer h4:not(:first-child) { margin-top: 30px; }
.footer address { font-style: normal; text-transform: uppercase; }
.footer address a { color: #fff; }
.footer__links-inline { display: flex; gap: 22px; margin: 20px 0 50px; }
.footer__links-inline a, .footer__email { color: #fff; font-weight: 700; text-transform: uppercase; font-size: 14px; }
.footer__links-inline .ico, .footer__email .ico { color: var(--red); }
.footer__logo { max-width: 220px; }
.hours { border-collapse: collapse; }
.hours td { padding: 0 60px 0 0; vertical-align: top; }
.quicklinks { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.quicklinks--single { columns: 1; }
.quicklinks a { color: #fff; text-transform: uppercase; font-size: 14px; }
.footer .social { margin-bottom: 14px; }
.footer .social a { border-radius: 50%; width: 36px; height: 36px; font-size: 22px; }
.footer__legal { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; margin-top: 50px; font: 400 10px/1 Arial, sans-serif; color: #777; text-transform: uppercase; }
.footer__legal a { color: #777; }
.footer__legal > :last-child { text-align: right; }

/* ---------------------------------------------------------------- fixed brand bar */
.brandbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(51,51,51,.92); border-top: 1px solid #444; }
.brandbar__inner { display: flex; justify-content: space-between; align-items: center; height: 62px; gap: 10px; }
.brandbar a { flex: 1; display: flex; justify-content: center; }
.brandbar img { max-height: 44px; max-width: 130px; width: auto; filter: grayscale(1) brightness(2); transition: filter .2s; }
.brandbar a:hover img { filter: none; }
/* A band of light sweeps left to right across the logos every 7s: each
   logo's mask is dimmed except a bright stripe, delayed by its place in
   the row (--i) so the sweep runs from one logo to the next. */
.brandbar img { -webkit-mask-image: linear-gradient(105deg, rgba(0,0,0,.7) 42%, #000 50%, rgba(0,0,0,.7) 58%); mask-image: linear-gradient(105deg, rgba(0,0,0,.7) 42%, #000 50%, rgba(0,0,0,.7) 58%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; animation: brand-shimmer 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .12s); }
.brandbar a:hover img { -webkit-mask-image: none; mask-image: none; animation: none; }
@keyframes brand-shimmer { 0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 22%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .brandbar img { animation: none; -webkit-mask-image: none; mask-image: none; } }

/* ---------------------------------------------------------------- hot units
   Flame sticker in the bottom right of the photos of a dealer's top 1%
   most-viewed units (crate::hot, public/_hot.html): tilted, a little
   shake every few seconds, and its label on hover (tap on touch screens:
   site.js toggles .is-open). */
.hot { position: absolute; z-index: 4; right: 8px; bottom: 8px; width: 38px; height: 42px; cursor: help; -webkit-tap-highlight-color: transparent; }
.gallery__main .hot { right: 12px; bottom: 12px; width: 44px; height: 48px; }
/* Above the photo count, which takes that corner. */
.gallery__main:has(.gallery__count) .hot { bottom: 44px; }
.featured__img { position: relative; }
.hot svg { display: block; width: 100%; height: 100%; overflow: visible; rotate: -14deg; transform-origin: 50% 90%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); animation: hot-shake 3.6s ease-in-out infinite; }
.hot__outer { fill: #ff6a00; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; paint-order: stroke; }
.hot__inner { fill: #ffd23f; }
.hot:hover svg, .hot.is-open svg { animation-duration: .9s; }
@keyframes hot-shake { 0%, 72%, 100% { transform: rotate(0) scale(1); } 76% { transform: rotate(-10deg) scale(1.06); } 80% { transform: rotate(9deg) scale(1.06); } 84% { transform: rotate(-7deg); } 88% { transform: rotate(5deg); } 92% { transform: rotate(-2deg); } }
/* The same bubble names the favorite flag on hover. */
.hot__tip, .fav::after, .histlink::after { position: absolute; top: 50%; padding: 6px 10px; border: 1px solid #ff6a00; border-radius: 6px; background: rgba(12,12,12,.94); color: #fff; font: 400 14px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .15s, translate .15s; }
.hot__tip { right: calc(100% + 4px); translate: 6px -50%; }
.hot:hover .hot__tip, .hot.is-open .hot__tip { opacity: 1; translate: 0 -50%; }
.fav::after { content: "Add to Favorites"; left: calc(100% + 6px); translate: -6px -50%; }
.fav.is-fav::after { content: "Remove from Favorites"; }
@media (hover: hover) { .fav:hover::after, .fav:focus-visible::after { opacity: 1; translate: 0 -50%; } }
/* ...and the header link to /viewed, under it */
.histlink { color: #ddd; }
.histlink::after { content: "Viewed Powersports"; top: calc(100% + 8px); left: 50%; translate: -50% -6px; z-index: 60; }
@media (hover: hover) { .histlink:hover::after, .histlink:focus-visible::after { opacity: 1; translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .hot svg { animation: none; } }

/* ---------------------------------------------------------------- Text Us
   Desktop button on the bottom left (above the brand bar), and the popup
   it and the phone nav bar's Text Us open (site.js). */
.textus-fab { position: fixed; left: 20px; bottom: 20px; z-index: 31; display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px 12px 16px; border-radius: 999px; background: var(--red); color: #fff; font: 400 18px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 3px 0 #8a0010, 0 8px 22px rgba(0,0,0,.45); transition: transform .15s, box-shadow .15s; }
.textus-fab .ico { font-size: 22px; }
.textus-fab:hover { color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 5px 0 #8a0010, 0 12px 26px rgba(0,0,0,.5); }
.textus-fab:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a0010, 0 4px 12px rgba(0,0,0,.45); }
body:has(.brandbar) .textus-fab { bottom: 82px; }
/* Staff editing a unit page have their own bar there. */
body:has(.vdpe-bar) .textus-fab { display: none; }
.textus { width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-top: 4px solid var(--red); border-radius: 12px; background: #161616; color: #fff; box-shadow: 0 18px 60px rgba(0,0,0,.7); font: 500 15px/1.4 var(--body); }
.textus::backdrop { background: rgba(0,0,0,.65); }
.textus[open] { animation: textus-in .18s ease-out; }
@keyframes textus-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.textus__form { position: relative; }
.textus__body, .textus__done { display: grid; gap: 14px; padding: 22px 22px 20px; }
.textus__body[hidden], .textus__done[hidden] { display: none; }
.textus__close { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #262626; color: #ddd; font-size: 24px; line-height: 1; cursor: pointer; }
.textus__close:hover { background: #333; color: #fff; }
.textus__head { display: flex; align-items: center; gap: 14px; padding-right: 30px; }
.textus__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--red); font-size: 24px; }
.textus h2 { margin: 0; font: 400 28px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.textus__head p { margin: 4px 0 0; color: var(--muted); }
.textus__field { display: grid; gap: 5px; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; }
.textus__field input, .textus__field textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid #3a3a3a; border-radius: 8px; background: #0d0d0d; color: #fff; font: 500 17px/1.3 var(--body); text-transform: none; letter-spacing: 0; }
.textus__field textarea { resize: vertical; min-height: 92px; }
.textus__field input:focus, .textus__field textarea:focus { outline: 2px solid var(--red); outline-offset: 0; border-color: transparent; }
.textus__field.has-error input, .textus__field.has-error textarea { border-color: var(--red); }
.textus__err { color: #ff6b78; font: 600 13px/1.3 var(--body); text-transform: none; letter-spacing: 0; }
.textus__err:empty { display: none; }
.textus .req { color: var(--red); }
.textus .hp { position: absolute; left: -9999px; }
.textus__consent { margin: 0; color: #8d8d8d; font-size: 12px; line-height: 1.35; }
.textus__fail { margin: 0; color: #ff6b78; }
.textus__fail a { color: #fff; }
.textus__send { min-height: 50px; font-size: 16px; border-radius: 8px; }
.textus__send .ico { font-size: 19px; }
.textus__send[disabled] { opacity: .65; cursor: progress; }
.textus__done { justify-items: center; text-align: center; padding-top: 30px; }
.textus__done p { margin: 0; color: #ccc; }
.textus__done .btn { min-width: 140px; min-height: 44px; border-radius: 8px; }

/* ---------------------------------------------------------------- notice popup */
.notice { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); display: grid; place-items: start center; padding-top: 4vh; }
.notice[hidden] { display: none; }
.notice__dialog { position: relative; width: min(610px, 94vw); background: #fff; color: #222; font: 400 14px/1.5 Arial, sans-serif; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.notice__header { background: repeating-linear-gradient(-45deg, #b49700 0 18px, #1d1d1d 18px 36px); padding: 26px 20px; text-align: center; }
.notice__header h2 { display: inline-block; background: #1d1d1d; color: #eee; font: 400 64px/1 var(--display); text-transform: uppercase; padding: 4px 16px; margin: 0; }
.notice__body { padding: 16px 20px 20px; }
.notice__body .msh-notice__heading { font-size: 20px; text-align: center; }
.notice__body .msh-notice__subheading { font-size: 17px; text-align: center; margin-bottom: 14px; }
.notice__body a { color: #d32f2f; }
.notice__close { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; background: #eee; font-size: 22px; line-height: 1; cursor: pointer; z-index: 1; }

/* ---------------------------------------------------------------- responsive
   Page-specific responsive rules live in home.css, inventory.css,
   vehicle.css and forms.css. */
@media (max-width: 991px) {
  .topbar__inner { justify-content: center; padding: 8px 15px; }
  .topbar { --topbar-h: 40px; }
  .topbar__search input { width: 170px; }
  .topbar .social a { font-size: 26px; }
  .topbar__address { font-size: 12.5px; white-space: nowrap; }
  .topbar__address .sep, .topbar__address a { display: none; }
  .topbar__right { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .topbar__phone { font-size: 16px; }
  .masthead, .masthead__inner { min-height: 120px; height: 120px; }
  .masthead__phone { left: 18px; bottom: 7px; }
  .masthead__phone span { font-size: 20px; -webkit-text-stroke-width: 3px; }
  .masthead__phone span::before { -webkit-text-stroke-width: 7px; text-shadow: 2px 3px 0 #0b0b0b; }
  .callpill { display: none; }
  .textus-fab { display: none; }
  .mainnav .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .mainnav__menu { flex-basis: 100%; }
  .mainnav__call { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--red); color: #fff; font: 400 16px/1 var(--display); text-transform: uppercase; }
  .mainnav__call:hover { text-decoration: none; color: #fff; }
  .mobilebar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(14,14,14,.96); border-top: 1px solid #2a2a2a; backdrop-filter: blur(6px); }
  .mobilebar__call { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 6px 14px; border-radius: 10px; background: var(--red); color: #fff; box-shadow: 0 3px 0 #8a0010; }
  .mobilebar__call:hover, .mobilebar__call:active { text-decoration: none; color: #fff; }
  .mobilebar__call:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a0010; }
  .mobilebar__call > .ico { font-size: 22px; flex: none; }
  .mobilebar__call span { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
  .mobilebar__call strong { font: 400 clamp(16px, 4.7vw, 19px)/1.1 var(--display); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobilebar__call small { display: inline-flex; align-items: center; gap: 5px; font: 500 11px/1.3 var(--body); text-transform: uppercase; letter-spacing: .03em; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobilebar__call .dot { background: rgba(255,255,255,.6); }
  .mobilebar__call.is-open .dot { background: #7dff8c; }
  .mobilebar__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 70px; min-height: 52px; border-radius: 10px; background: #262626; color: #fff; font: 600 11px/1 var(--body); text-transform: uppercase; letter-spacing: .03em; }
  .mobilebar__btn .ico { font-size: 18px; color: var(--red); }
  .mobilebar__btn:hover { text-decoration: none; color: #fff; background: #2f2f2f; }
  .brandbar { display: none; }
  .masthead__mascot { display: none; }
  .mainnav__toggle { display: flex; align-items: center; gap: 10px; background: transparent; border: 0; color: #fff; font: 400 20px var(--display); text-transform: uppercase; padding: 12px 0; cursor: pointer; }
  .burger, .burger::before, .burger::after { display: block; width: 22px; height: 2px; background: #fff; position: relative; }
  .burger::before, .burger::after { content: ""; position: absolute; left: 0; }
  .burger::before { top: -7px; }
  .burger::after { top: 7px; }
  .mainnav__menu { display: none; flex-direction: column; }
  .mainnav.is-open .mainnav__menu { display: flex; }
  .mainnav__menu > li + li::before { display: none; }
  .mainnav__menu > li > a { padding: 10px 0; }
  .sub { position: static; box-shadow: none; border: 0; display: block; padding: 0 0 6px 12px; background: transparent; }
  .suggest--header { width: auto; left: 0; right: 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .footer__col, .footer__col:first-child { padding: 0 15px; border: 0; }
  .footer__legal { display: flex; flex-direction: column; gap: 10px; }
  .footer__legal > :last-child { text-align: left; }
  .brandbar img { max-width: 76px; max-height: 26px; }
  .brandbar__inner { height: 46px; overflow-x: auto; justify-content: flex-start; gap: 22px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .brandbar__inner::-webkit-scrollbar { display: none; }
  .brandbar a { flex: 0 0 auto; scroll-snap-align: start; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------- phones & tablets */
/* Touch layout: sticky nav bar with search, accordion menu, swipeable rows,
   compact inventory cards and a thumb-reach action bar. */
@media (max-width: 991px) {
  :root { --navh: 56px; }
  html { scroll-padding-top: calc(var(--navh) + 10px); }
  body { overflow-x: clip; -webkit-tap-highlight-color: transparent; }
  body.menu-open { overflow: hidden; }
  /* 16px+ text in fields keeps iOS from zooming in on focus */
  .topbar__search input { font-size: 16px; }

  /* sticky nav bar: menu | search | call */
  .mainnav { position: sticky; top: 0; z-index: 46; border-bottom: 0; transition: box-shadow .2s; }
  .mainnav.is-stuck { box-shadow: 0 8px 20px rgba(0,0,0,.6); }
  .mainnav .wrap { flex-wrap: nowrap; gap: 8px; height: var(--navh); }
  .mainnav__toggle { margin-right: auto; height: 100%; padding: 0 6px 0 0; font-size: 22px; letter-spacing: .03em; }
  .burger, .burger::before, .burger::after { transition: transform .2s, top .2s, background .2s; }
  .mainnav.is-open .burger { background: transparent; }
  .mainnav.is-open .burger::before { top: 0; transform: rotate(45deg); }
  .mainnav.is-open .burger::after { top: 0; transform: rotate(-45deg); }
  .mainnav__find-toggle { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #3a3a3a; border-radius: 50%; background: #1b1b1b; color: #fff; font-size: 18px; cursor: pointer; transition: background .15s, border-color .15s; }
  .mainnav.is-finding .mainnav__find-toggle { background: var(--red); border-color: var(--red); }
  .mainnav__fav, .mainnav__hist { display: grid; width: 42px; height: 42px; border-radius: 50%; font-size: 19px; background: #1b1b1b; border-color: #3a3a3a; }
  .mainnav__fav .favlink__count { top: -4px; right: -6px; box-shadow: 0 0 0 2px var(--bar); }
  .mainnav__call { height: 42px; padding: 0 16px; font-size: 18px; letter-spacing: .03em; box-shadow: 0 3px 0 #8a0010; }
  .mainnav__call:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a0010; }
  .mainnav__find { display: none; position: absolute; left: 0; right: 0; top: 100%; gap: 8px; padding: 10px 12px; background: #141414; border-top: 3px solid var(--red); box-shadow: 0 18px 30px rgba(0,0,0,.6); }
  .mainnav.is-finding .mainnav__find { display: flex; animation: dropIn .2s ease; }
  .mainnav__find input { flex: 1; min-width: 0; height: 46px; border: 0; border-radius: 6px; padding: 0 14px; background: #fff; color: #111; font: 400 16px var(--cond); }
  .mainnav__find .btn { border-radius: 6px; padding: 0 16px; font-size: 14px; }
  .mainnav__find .voice { width: 46px; height: 46px; border-radius: 6px; background: #2a2a2a; color: var(--red); font-size: 20px; }

  /* the menu drops over the page and scrolls on its own */
  .mainnav__menu { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--navh)); max-height: calc(100dvh - var(--navh)); overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 calc(20px + env(safe-area-inset-bottom)); background: #141414; border-top: 3px solid var(--red); box-shadow: 0 24px 40px rgba(0,0,0,.65); }
  .mainnav.is-open .mainnav__menu { display: block; animation: dropIn .22s ease; }
  .mainnav__menu > li { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid #242424; }
  .mainnav__menu > li > a { flex: 1; padding: 13px 20px; font-size: 25px; }
  .mainnav__menu > li > a:active { background: #1d1d1d; }
  .has-sub > a::after { display: none; }
  .sub-toggle { display: grid; place-items: center; width: 60px; border: 0; border-left: 1px solid #242424; background: none; cursor: pointer; }
  .sub-toggle::before { content: ""; width: 10px; height: 10px; border-right: 3px solid var(--red); border-bottom: 3px solid var(--red); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
  .is-expanded > .sub-toggle { background: #1b1b1b; }
  .is-expanded > .sub-toggle::before { transform: translateY(2px) rotate(-135deg); }
  .mainnav .sub, .mainnav .has-sub:not(.is-expanded) > .sub { display: none; }
  .mainnav .has-sub.is-expanded > .sub { display: block; flex-basis: 100%; padding: 4px 0 10px; background: #0d0d0d; border-top: 1px solid #242424; }
  .sub a { padding: 11px 20px 11px 34px; font-size: 16px; color: #ddd; }
  .sub a:active { background: var(--red); color: #fff; }
  .mainnav__extra { display: block !important; padding: 18px 20px 6px; border-bottom: 0 !important; }
  .mainnav__visit { display: flex; gap: 10px; margin-bottom: 16px; color: #ddd; font: 600 15px/1.35 var(--body); text-transform: uppercase; }
  .mainnav__visit:hover { text-decoration: none; color: #fff; }
  .mainnav__visit > .ico { flex: none; margin-top: 1px; color: var(--red); font-size: 20px; }
  .mainnav__visit small { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: #aaa; font-size: 13px; text-transform: none; }
  .mainnav__visit small.is-live { color: #8ee89a; }
  .mainnav__visit small.is-live .dot { background: #3ccf4e; }
  .mainnav__extra .social { gap: 10px; }
  .mainnav__extra .social a { width: 44px; height: 44px; border-radius: 50%; font-size: 24px; }
  @keyframes dropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .mobilebar__btn:active { transform: scale(.96); background: #333; }

  /* page shells */
  .panel { padding: 14px 12px 22px; }
  .page-title { font-size: 28px; }

  /* footer */
  .footer { padding: 36px 0 24px; }
  .footer__links-inline { flex-wrap: wrap; margin: 16px 0 24px; }
  .hours td { padding: 2px 24px 2px 0; }
  .quicklinks a { display: inline-block; padding: 4px 0; }
  .footer__legal { font-size: 11px; line-height: 1.6; }
}

/* phones */
@media (max-width: 767px) {
  /* address, socials and search live in the menu / nav bar instead */
  .topbar { display: none; }
  .masthead, .masthead__inner { min-height: 112px; height: 112px; }
  .masthead__brand { width: 58%; }

  .notice { padding: 2vh 10px 0; }
  .notice__dialog { max-height: calc(100dvh - 4vh - 20px); overflow-y: auto; }
  .notice__header { padding: 18px 12px; }
  .notice__header h2 { font-size: 40px; }

  .legal { font-size: 16px; }
  .legal__lead { font-size: 17px; }
  .legal__toc ol { columns: 1; }
  .legal__table thead { display: none; }
  .legal__table tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
  .legal__table td { display: block; border: 0; padding: 2px 0; }
  .legal__table td:last-child { color: var(--muted); }
}

@media print {
  .topbar, .mainnav, .brandbar, .footer, .notice, .textus-fab, .textus { display: none !important; }
  body { background: #fff; color: #000; }
  .panel { background: #fff; display: block !important; }
}