/* Dealer-fee disclosure — the one component this mockup adds to the live site.
   Set in McLaren Sans (the brand's current typeface) so it reads as its own
   voice rather than borrowing the site's Knockout headline style. */

@font-face { font-family: "McLaren Sans Text"; src: url("fonts/McLarenSansText-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "McLaren Sans Text"; src: url("fonts/McLarenSansText-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "McLaren Sans Display"; src: url("fonts/McLarenSansDisplay-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  --fx-text: "McLaren Sans Text", "Helvetica Neue", Arial, sans-serif;
  --fx-display: "McLaren Sans Display", "Helvetica Neue", Arial, sans-serif;
  --fx-accent: #ff9f2e;          /* site accent orange */
  --fx-ink: #1e1e1e;             /* 16.7:1 on white */
  --fx-muted: #4a4a4a;           /* 8.9:1 on white */
  --fx-on-dark: #d6d6d6;         /* trigger on #242424 / #323232, ≥10:1 */
  --fx-rule: #e6e6e6;
  --fx-bar: #f3f3f3;
  --fx-s1: 4px;
  --fx-s2: 8px;
  --fx-s3: 12px;
  --fx-s4: 16px;
  --fx-s5: 24px;
  --fx-radius: 6px;
  --fx-dur: 160ms;
  --fx-ease: cubic-bezier(.2, .7, .2, 1);
}

.fx { position: relative; }

/* ---- trigger --------------------------------------------------------------- */
.fx-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--fx-s2);
  margin: 0;
  padding: var(--fx-s1) 0;
  border: 0;
  background: none;
  font-family: var(--fx-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fx-on-dark);
  cursor: pointer;
}
.fx-trigger:hover,
.fx-trigger[aria-expanded="true"] { color: #fff; }
.fx-trigger:focus-visible { outline: 2px solid var(--fx-accent); outline-offset: 3px; border-radius: 2px; }
.fx-i { width: 15px; height: 15px; color: var(--fx-accent); flex: none; }

/* VDP header: price and its trigger stack as one unit inside the existing inline row */
.actionsHead > .priceBox.fx { vertical-align: top; }
.actionsHead > .priceBox.fx h2 { margin: 0 0 var(--fx-s3); }
@media (max-width: 767px) {
  .actionsHead > .priceBox.fx { display: block; margin-bottom: var(--fx-s3); }
  .actionsHead > .priceBox.fx + div { margin-left: 0; }
}

/* SRP card: the trigger gets its own line under the Price / Year / Miles row */
.miniInf .fx-srp-row { clear: both; margin: 0; padding-top: var(--fx-s2); }
/* the site right-aligns the row's :last-child, which is now the popover */
body.inventory .inventory-section .car-col .vehicle .details .miniInf.fx-srp > .mileage { text-align: right; }

/* ---- popover ---------------------------------------------------------------- */
/* Out of flow on purpose: opening it never moves the page under the pointer. */
.fx-pop {
  position: absolute;
  z-index: 1000; /* above the card's own action icons */
  top: calc(100% + var(--fx-s2));
  left: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: var(--fx-radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  font-family: var(--fx-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--fx-ink);
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
  transition: opacity var(--fx-dur) var(--fx-ease), transform var(--fx-dur) var(--fx-ease), visibility 0s linear var(--fx-dur);
}
.fx.is-open .fx-pop {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity var(--fx-dur) var(--fx-ease), transform var(--fx-dur) var(--fx-ease), visibility 0s;
}
/* SRP: the card clips its content (overflow: hidden); while the panel is open the card
   lets it out and rises above the next row, so the panel lays over it instead of being cut */
body.inventory .inventory-section .car-col .vehicle:has(.fx.is-open) { overflow: visible; }
body.inventory .inventory-section .car-col:has(.fx.is-open) { position: relative; z-index: 50; }
/* SRP: span the card's inner width so the panel never runs off the grid */
.fx-srp > .fx-pop { left: var(--fx-s4); right: var(--fx-s4); width: auto; top: calc(100% - var(--fx-s2)); }

.fx-pop__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--fx-s2) var(--fx-s2) var(--fx-s2) var(--fx-s4);
  background: var(--fx-bar);
  border-bottom: 1px solid var(--fx-rule);
  border-radius: var(--fx-radius) var(--fx-radius) 0 0;
}
.fx-pop__title {
  margin: 0;
  font-family: var(--fx-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fx-ink);
}
.fx-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fx-muted);
  cursor: pointer;
}
.fx-close svg { width: 14px; height: 14px; }
.fx-close:hover { background: #e6e6e6; color: var(--fx-ink); }
.fx-close:focus-visible { outline: 2px solid var(--fx-accent); outline-offset: 0; }

.fx-pop__body { padding: var(--fx-s4); }
.fx-lead { margin: 0 0 var(--fx-s3); font-weight: 700; }

.fx-rows { margin: 0; padding: 0; list-style: none; }
.fx-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--fx-s4);
  padding: var(--fx-s1) 0;
  color: var(--fx-muted);
}
.fx-row__value { color: var(--fx-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

.fx-sub {
  margin: var(--fx-s3) 0 var(--fx-s1);
  padding-top: var(--fx-s3);
  border-top: 1px solid var(--fx-rule);
  font-size: 14px;
  font-weight: 700;
  color: var(--fx-ink);
}

.fx-legal {
  margin: var(--fx-s3) 0 0;
  padding-top: var(--fx-s3);
  border-top: 1px solid var(--fx-rule);
  font-size: 14px;
  line-height: 1.45;
  color: var(--fx-muted);
}

/* A figure the dealer has not supplied yet — visibly a placeholder, never a guess. */
.fx-tbd {
  display: inline-block;
  padding: 0 var(--fx-s2);
  border: 1px dashed #8a8a8a;
  border-radius: 3px;
  font-size: 14px;
  color: var(--fx-muted);
}

@media (prefers-reduced-motion: reduce) {
  .fx-pop, .fx.is-open .fx-pop { transition: none; transform: none; }
}

/* ---- new wordmark (proposed pages) ------------------------------------------ */
/* Same 294×64 box as the old PNG, whose artwork carried ~24px of built-in margin:
   the header's layout was tuned to that box, so the new mark sits inside it. */
.logoBox .logo img.mk-logo-new {
  box-sizing: border-box;
  width: 294px;
  max-width: none;
  height: 64px;
  padding: 6px 24px;
  object-fit: contain;
  object-position: left center;
}

/* ---- V2: price stacking ------------------------------------------------------
   The dealer's own format, line for line: Price / Documentation fee / Electronic
   filing fee / Total Price, then Optional. Always visible on the VDP (dark ground),
   inside the breakdown popover on the SRP (white ground). */
.st {
  --st-ink: var(--fx-ink);
  --st-muted: var(--fx-muted);
  --st-rule: var(--fx-rule);
  font-family: var(--fx-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--st-ink);
}
.st-rows { margin: 0; padding: 0; list-style: none; }
.st-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--fx-s4);
  padding: var(--fx-s1) 0;
  color: var(--st-muted);
}
.st-val { color: var(--st-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-row--price { font-weight: 700; color: var(--st-ink); }
.st-row--total {
  margin-top: var(--fx-s2);
  padding-top: var(--fx-s3);
  border-top: 1px solid var(--st-rule);
  font-family: var(--fx-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--st-ink);
}
.st-sub {
  margin: var(--fx-s4) 0 var(--fx-s1);
  padding-top: var(--fx-s3);
  border-top: 1px solid var(--st-rule);
  font-size: 14px;
  font-weight: 700;
  color: var(--st-ink);
}
.st-legal {
  margin: var(--fx-s3) 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--st-muted);
}

/* VDP: its own block under the title and the Year / Mileage line, on the dark page */
.main .actionsHead > .st-box {
  display: block;
  max-width: 440px;
  margin: var(--fx-s5) 0 0;
  font-size: 15px;
  text-transform: none;
}
.st-box .st {
  --st-ink: #fff;
  --st-muted: #b4b4b4;   /* 8.3:1 on #242424 */
  --st-rule: #444;
}

/* SRP: the same stack inside the popover */
.fx-pop--stack .st-legal { padding-top: var(--fx-s3); border-top: 1px solid var(--fx-rule); }

/* VDP V2, desktop: title and Year / Mileage on the left, the stack on the right,
   top-aligned with the title, so the gallery is not pushed down a full screen */
@media (min-width: 992px) {
  .mk-v2 .main .actionsHead {
    display: grid;
    grid-template-columns: max-content max-content 1fr 420px;
    grid-template-rows: auto auto 1fr;
    column-gap: 0;
    align-items: start;
  }
  .mk-v2 .main .actionsHead > .titleBox { grid-column: 1 / 4; grid-row: 1; }
  .mk-v2 .main .actionsHead > .year { grid-column: 1; grid-row: 2; }
  .mk-v2 .main .actionsHead > .milleage { grid-column: 2; grid-row: 2; }
  .mk-v2 .main .actionsHead > .st-box { grid-column: 4; grid-row: 1 / 4; margin: 0; max-width: none; }
}

/* SRP V2: "Total Price: $434,520" is too long for a third of the card — give it the
   full width on its own line, Year left and Miles right beneath it */
body.inventory.mk-v2 .inventory-section .car-col .vehicle .details .miniInf > .price { float: none; width: 100%; margin-bottom: var(--fx-s2); }
body.inventory.mk-v2 .inventory-section .car-col .vehicle .details .miniInf > .year { width: 50%; text-align: left; }
body.inventory.mk-v2 .inventory-section .car-col .vehicle .details .miniInf > .mileage { width: 50%; text-align: right; }

/* SRP V3: the price stack open in every card (no hover, no click), on the dark card */
.mk-v3 .car-col .details > .st-card {
  --st-ink: #fff;
  --st-muted: #b4b4b4;   /* 6.2:1 on the #323232 card */
  --st-rule: #4a4a4a;
  padding: var(--fx-s3) 15px var(--fx-s4);
  border-bottom: 1px solid #505050;
  font-size: 14px;
}
.mk-v3 .car-col .st-card .st-row { padding: 2px 0; }
.mk-v3 .car-col .st-card .st-row--total { margin-top: var(--fx-s1); padding-top: var(--fx-s2); font-size: 17px; }
.mk-v3 .car-col .st-card .st-sub { margin-top: var(--fx-s3); padding-top: var(--fx-s2); font-size: 14px; }
/* Year / Miles keep their row above the stack, now as two halves */
body.inventory.mk-v3 .inventory-section .car-col .vehicle .details .miniInf > .year { width: 50%; text-align: left; }
body.inventory.mk-v3 .inventory-section .car-col .vehicle .details .miniInf > .mileage { width: 50%; text-align: right; }

/* ---- VDP V3: the price stack as one line under the title ----------------------
   Price + fees = Total Price across the page width; optional products and the
   small print run beneath at reading length. Becomes a vertical list on phones. */
.mk-v3 .main .actionsHead { display: block; }
.main .actionsHead > .sx-box {
  display: block;
  margin: var(--fx-s4) 0 0;
  font-size: 15px;
  text-transform: none;
}
.sx { font-family: var(--fx-text); color: #fff; letter-spacing: 0; text-transform: none; }
.sx-eq {
  display: inline-flex;  /* the rule beneath spans the figures, not the page */
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--fx-s3) var(--fx-s5);
  margin: 0;
  padding-bottom: var(--fx-s4);
  border-bottom: 1px solid #444;
}
.sx-item { margin: 0; }
.sx-item dt {
  margin: 0 0 var(--fx-s1);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: #b4b4b4;            /* 8.3:1 on #242424 */
}
.sx-item dd {
  margin: 0;
  font-family: var(--fx-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.sx-op {
  align-self: flex-end;
  font-family: var(--fx-display);
  font-size: 20px;
  line-height: 1.1;
  color: #8a8a8a;            /* decorative operator; the labels carry the meaning */
}
.sx-total dt { color: #fff; font-weight: 700; }
.sx-total dd { font-size: 28px; color: var(--fx-accent); }
.sx-opt {
  margin: var(--fx-s3) 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: #d6d6d6;
}
.sx-opt__label { font-weight: 700; color: #fff; margin-right: var(--fx-s2); }
.sx-num { color: #fff; font-variant-numeric: tabular-nums; }
.sx-dot { margin: 0 var(--fx-s2); color: #8a8a8a; }
.sx-legal {
  max-width: 78ch;
  margin: var(--fx-s2) 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #b4b4b4;
}

@media (max-width: 767px) {
  .sx-eq { display: block; }
  .sx-op { display: none; }
  .sx-item { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; }
  .sx-item dt { margin: 0; font-size: 15px; }
  .sx-item dd { font-family: var(--fx-text); font-size: 15px; font-weight: 400; }
  .sx-total { margin-top: var(--fx-s2); padding-top: var(--fx-s3); border-top: 1px solid #444; }
  .sx-total dt { font-family: var(--fx-display); font-size: 19px; }
  .sx-total dd { font-family: var(--fx-display); font-size: 22px; font-weight: 700; }
  .sx-opt__label { display: block; margin: 0 0 var(--fx-s1); }
  /* the + operators are hidden in the list: carry them on the fee amounts instead */
  .sx-item + .sx-op + .sx-item:not(.sx-total) dd::before { content: "+"; }
}