/* =========================================================
   inventory pages — shared
   ========================================================= */

.inv {
  padding: clamp(12px, 2vh, 20px) var(--pad) 0;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}

.crumbs {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: clamp(8px, 1.6vh, 16px) 0 10px;
}
.crumbs a { color: var(--muted); transition: color .2s var(--ease); }
.crumbs a:hover { color: var(--accent); }
.crumbs__sep { color: var(--dim); }
.crumbs__here { color: var(--ink); }

/* Tighter header — filters + grid sit higher up. The h1 still
   anchors the page but stops competing with the inventory itself. */
.inv__head {
  display: grid;
  gap: 8px;
  margin: 0 0 clamp(16px, 2.5vh, 24px);
  padding-bottom: clamp(12px, 2vh, 18px);
  border-bottom: 1px solid var(--line);
}
.inv__tag {
  display: inline-block;
  width: fit-content;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  color: var(--page-accent, var(--accent));
  border: 1.5px solid var(--page-accent, var(--accent));
  background: oklch(from var(--page-accent, var(--accent)) l c h / .12);
}
.inv__h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 44px);
  letter-spacing: -.025em;
  line-height: 1;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
  font-variation-settings: "wdth" 92;
}
.inv__h1 em { font-style: italic; color: var(--page-accent, var(--accent)); }
.inv__blurb {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.5;
  max-width: 56ch;
}

.inv__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.inv__meta b { color: var(--ink); font-weight: 500; }
.inv__meta .pulse {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--page-accent, var(--accent));
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 0 0 oklch(from var(--page-accent, var(--accent)) l c h / .5);
  animation: pulse 1.6s var(--ease) infinite;
  vertical-align: middle;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 oklch(from var(--page-accent, var(--accent)) l c h / .5); }
  70%  { box-shadow: 0 0 0 10px oklch(from var(--page-accent, var(--accent)) l c h / 0); }
  100% { box-shadow: 0 0 0 0 oklch(from var(--page-accent, var(--accent)) l c h / 0); }
}

/* =========================================================
   filter rail + sort
   ========================================================= */

.inv__toolbar {
  display: grid;
  gap: 16px;
  margin: 0 0 clamp(20px, 3vh, 28px);
}
@media (min-width: 760px) {
  .inv__toolbar {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .inv__toolbar .inv__search { grid-column: 1 / -1; }
}

/* =========================================================
   live search box + suggestion dropdown
   ========================================================= */
.inv__search {
  position: relative;
}
.inv__search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}
.inv__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.inv__search-input {
  appearance: none;
  width: 100%;
  background: var(--paper-2);
  border: 1.5px solid var(--line-2);
  border-radius: 100px;
  padding: 12px 44px 12px 40px;
  /* Below the iOS 16px zoom threshold on small screens forces Safari to
     auto-zoom the viewport when the input gains focus. Bump to 16px on
     touch widths to suppress that zoom; desktops keep the tighter 14px. */
  font: 500 16px/1.2 var(--sans);
  color: var(--ink);
  letter-spacing: -.005em;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
@media (min-width: 720px) {
  .inv__search-input { font-size: 14px; }
}
.inv__search-input::placeholder { color: var(--muted); }
.inv__search-input::-webkit-search-cancel-button { display: none; }
.inv__search-input:hover { border-color: var(--ink-soft, var(--ink)); }
.inv__search-input:focus {
  outline: none;
  border-color: var(--page-accent, var(--accent));
  background: var(--bg);
  box-shadow: 0 0 0 3px oklch(from var(--page-accent, var(--accent)) l c h / .18);
}
.inv__search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.inv__search-clear:hover { background: var(--line); color: var(--ink); }

.inv__search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 50;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .06);
  padding: 6px;
  max-height: 420px;
  overflow-y: auto;
  display: grid;
  gap: 2px;
}
.inv__search-dropdown[hidden] { display: none; }

.inv__search-opt {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background .12s var(--ease);
}
.inv__search-opt:hover,
.inv__search-opt.is-active {
  background: oklch(from var(--page-accent, var(--accent)) l c h / .10);
}
.inv__search-thumb {
  width: 56px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: block;
}
.inv__search-thumb--empty {
  background:
    repeating-linear-gradient(
      135deg,
      oklch(94% 0.025 85) 0px,
      oklch(94% 0.025 85) 6px,
      oklch(91% 0.03 80) 6px,
      oklch(91% 0.03 80) 12px
    );
}
.inv__search-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.inv__search-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variation-settings: "wdth" 96;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv__search-sub {
  font-size: 12px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv__search-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.inv__search-stock {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.inv__search-kind {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid currentColor;
  background: var(--paper-2);
}
.inv__search-kind--new  { color: oklch(58% 0.22 28);  }
.inv__search-kind--cpo  { color: oklch(32% 0.06 250); }
.inv__search-kind--used { color: oklch(48% 0.10 88);  }
.inv__search-price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.inv__search-empty {
  margin: 0;
  padding: 14px 12px;
  color: var(--ink-soft);
  font-size: 13.5px;
  text-align: center;
}

@media (max-width: 480px) {
  .inv__search-opt { grid-template-columns: 44px 1fr auto; }
  .inv__search-thumb { width: 44px; height: 32px; }
  .inv__search-title { font-size: 13.5px; }
}

.filters {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chip {
  appearance: none;
  background: var(--paper-2);
  border: 1.5px solid var(--line-2);
  border-radius: 100px;
  padding: 9px 14px 9px 12px;
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px/1 var(--sans);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  letter-spacing: -.005em;
}
.chip:hover { border-color: var(--ink); }
.chip__caret {
  width: 10px; height: 10px;
  display: inline-block;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: .6;
}
.chip--active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-2);
}
.chip--clear {
  background: transparent;
  color: var(--accent);
  border-color: transparent;
  padding-left: 6px;
  letter-spacing: 0;
}
.chip--clear:hover { background: var(--accent-soft); }

.sort {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px/1 var(--sans);
  color: var(--ink);
}
.sort__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.sort__select {
  appearance: none;
  background: var(--paper-2);
  border: 1.5px solid var(--line-2);
  border-radius: 100px;
  padding: 9px 32px 9px 14px;
  font: 500 13px/1 var(--sans);
  color: var(--ink);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.sort__select:hover { border-color: var(--ink); }

/* =========================================================
   vehicle card
   ========================================================= */

.fleet {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .fleet { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .fleet { grid-template-columns: repeat(3, 1fr); } }

.veh {
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  transition: border-color .25s var(--ease),
              transform .25s var(--ease),
              box-shadow .25s var(--ease);
  position: relative;
}
.veh:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(40, 20, 0, .22);
}
.veh__img {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(
      135deg,
      oklch(94% 0.025 85) 0px,
      oklch(94% 0.025 85) 8px,
      oklch(91% 0.03 80) 8px,
      oklch(91% 0.03 80) 16px
    );
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.veh__img::after {
  content: "FEED IMAGE";
  background: var(--paper-2);
  border: 1.5px dashed var(--line-2);
  padding: 6px 10px;
  border-radius: 4px;
}
.veh__badge {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--page-accent, var(--accent));
  padding: 4px 8px;
  border: 1.5px solid var(--page-accent, var(--accent));
  border-radius: 4px;
  background: var(--paper-2);
}
.veh__stock {
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--muted);
  background: var(--paper-2);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
}

.veh__body {
  padding: 18px 18px 12px;
  display: grid;
  gap: 10px;
}
.veh__year {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--muted);
}
.veh__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: -2px 0 0;
  font-variation-settings: "wdth" 92;
}
.veh__trim {
  color: var(--ink-soft);
  font-size: 13.5px;
  margin: -4px 0 0;
}

.veh__price {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 4px;
}
.veh__price-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variation-settings: "wdth" 100;
}
.veh__price-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Compact Sale + Fee breakdown beneath the headline price on a card. */
.veh__price-breakdown {
  list-style: none;
  padding: 8px 10px 6px;
  margin: 6px 0 0;
  display: grid;
  gap: 3px;
  background: oklch(from var(--paper-2) calc(l - 0.015) c h);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.veh__price-breakdown li {
  display: flex; justify-content: space-between; gap: 8px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.veh__price-breakdown li span:first-child { color: var(--muted); }
.veh__price-breakdown li span:last-child {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.veh__specs {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}
.veh__specs li {
  display: flex; justify-content: space-between; gap: 8px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.veh__specs li span:first-child { color: var(--muted); }
.veh__specs li span:last-child  { color: var(--ink); font-weight: 500; }

.veh__cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 16px;
  font: 600 13px/1 var(--sans);
  color: var(--ink);
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.veh__cta a {
  color: var(--page-accent, var(--accent));
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: -.005em;
}
.veh__cta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.veh__cta-sec {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* feed-pending notice */
.feed-note {
  margin: clamp(40px, 5vh, 56px) 0 0;
  padding: 18px 20px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--radius);
  background: var(--paper-2);
  display: grid;
  gap: 6px;
}
.feed-note__h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.feed-note p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

/* load more */
.load-more {
  margin: clamp(28px, 4vh, 40px) auto 0;
  display: flex; justify-content: center;
}

/* sticky CTA back to form */
.float-cta {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 50;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border-radius: 100px;
  background: var(--ink);
  color: var(--paper-2);
  font: 600 14px/1 var(--sans);
  letter-spacing: -.005em;
  box-shadow: 0 12px 30px -10px rgba(20, 10, 0, .45);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.float-cta:hover {
  background: var(--accent);
  transform: translateY(-2px);
}
.float-cta__dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.float-cta:hover .float-cta__dot { background: var(--paper-2); }

/* Schedule-driven state set by talk-button.js. Green "live" dot during
   business hours (Telegram-routed); muted when off-hours (form-routed). */
.float-cta[data-talk-open="true"] .float-cta__dot {
  background: oklch(72% 0.18 145);
  box-shadow: 0 0 0 3px oklch(72% 0.18 145 / .25);
}
.float-cta[data-talk-open="false"] .float-cta__dot {
  background: oklch(60% 0.01 250);
  box-shadow: none;
}
.float-cta[data-talk-open="true"]:hover .float-cta__dot,
.float-cta[data-talk-open="false"]:hover .float-cta__dot {
  background: var(--paper-2);
  box-shadow: none;
}

/* Stack wrapper: during business hours we park an Instagram CTA above
   the Telegram one. talk-button.js wraps the existing .float-cta into
   this container; off-hours, the IG child is removed and only the
   form-routed Telegram pill remains. */
.float-cta-stack {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none; /* let underlying page receive events outside pills */
}
.float-cta-stack .float-cta {
  position: static;
  pointer-events: auto;
}

/* Telegram brand fill during business hours. We override the page's
   default ink-color CTA + any INFINITI brand override so the open-hours
   pill reads unambiguously as a Telegram channel. */
.float-cta[data-talk-open="true"]:not(.float-cta--ig) {
  background: #229ED9;
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(34, 158, 217, .55);
}
.float-cta[data-talk-open="true"]:not(.float-cta--ig):hover {
  background: #1d8ec3;
}
.float-cta[data-talk-open="true"]:not(.float-cta--ig):hover .float-cta__dot {
  background: #fff;
}

/* Instagram brand fill — the classic warm gradient. Compound selectors
   used to beat the INFINITI brand override (.page-new .float-cta) on
   new/cpo pages without resorting to !important. */
.float-cta-stack .float-cta.float-cta--ig {
  background: linear-gradient(135deg, #fa7e1e 0%, #d62976 50%, #962fbf 100%);
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(214, 41, 118, .55);
}
.float-cta-stack .float-cta.float-cta--ig:hover {
  background: linear-gradient(135deg, #fa7e1e 0%, #d62976 50%, #962fbf 100%);
  filter: brightness(1.05);
  transform: translateY(-2px);
}
.float-cta__ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  color: #fff;
  line-height: 0;
}
.float-cta__ig svg { display: block; }

/* Telegram glyph swaps in during business hours so the CTA reads
   "Talk to Austin on Telegram" with the brand mark; off-hours we fall
   back to the schedule dot + plain label. */
.float-cta__tg {
  display: none;
  width: 18px; height: 18px;
  align-items: center;
  justify-content: center;
  color: currentColor;
  line-height: 0;
}
.float-cta__tg svg { display: block; }
.float-cta[data-talk-open="true"] .float-cta__tg { display: inline-flex; }
.float-cta[data-talk-open="true"] .float-cta__dot { display: none; }

@media (max-width: 480px) {
  .float-cta { padding: 12px 16px; font-size: 13px; }
  .float-cta-stack { gap: 8px; }
}

/* page-specific accents */
.page-new  { --page-accent: oklch(58% 0.22 28); }
.page-cpo  { --page-accent: oklch(32% 0.06 250); }
.page-used { --page-accent: oklch(62% 0.16 88); }