/*
 * Huntley Ford — compare vehicles (2.75.0). inc/compare.php, assets/js/compare.js.
 *  1. "Compare" on vehicle cards and in the VDP tool row
 *  2. The tray along the bottom of the screen
 *  3. The /compare/ page
 */

/* ------------------------------------------------ 1. card checkbox, VDP button */

.hfp .hfp-cmp-check {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin: 0;
  padding: 0 14px 0 9px;
  border-radius: var(--hf-radius-pill);
  background: rgb(var(--hf-paper-rgb) / .95);
  color: var(--hf-ink);
  font-family: var(--hf-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 4px rgb(var(--hf-black-rgb) / .18);
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, color .15s ease;
}
.hfp .hfp-cmp-check__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.hfp .hfp-cmp-check__box {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--hf-neutral-600);
  border-radius: 4px;
  background: var(--hf-paper);
}
.hfp .hfp-cmp-check__box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hf-interactive);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
  opacity: 0;
}
.hfp .hfp-cmp-check:hover .hfp-cmp-check__box { border-color: var(--hf-interactive); }
.hfp .hfp-cmp-check__input:checked + .hfp-cmp-check__box { border-color: var(--hf-paper); }
.hfp .hfp-cmp-check__input:checked + .hfp-cmp-check__box::after { opacity: 1; }
.hfp .hfp-cmp-check__input:focus-visible + .hfp-cmp-check__box { outline: 3px solid var(--hf-interactive); outline-offset: 3px; }
.hfp .hfp-cmp-check.is-on { background: var(--hf-interactive); color: var(--hf-paper); }

/* The tool row button: "Add to compare" / "Added to compare ✓", two arrows like OON's. */
.hfp .hfp-vdp-tool[hidden] { display: none; }
.hfp .hfp-vdp-tool--compare { --hfp-tool-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h15M15 4l4 4-4 4M20 16H5M9 12l-4 4 4 4'/%3E%3C/svg%3E"); }
.hfp .hfp-vdp-tool--compare[aria-pressed="true"] { border-color: var(--hf-interactive); background: var(--hf-brand-050); color: var(--hf-interactive); }

/* 2.75.1: in the tool row, where Save was (Print · Share · Add to compare ·
   Copy VIN), two by two beside the photo and on phones (vdp-tools.css). The
   cells are 150-225px: where the row is narrow the tools lose a little side
   padding, and the button switches to its short label — "Added ✓" under a
   400px row, "Compare" / "Added ✓" under 332px (a 360px phone). */
.hfp .hfp-vdp__top .hfp-vdp-summary__tools { container-type: inline-size; }
.hfp .hfp-vdp-tool__short { display: none; }
@container (max-width: 459px) {
  .hfp .hfp-vdp-summary__tools .hfp-vdp-tool { gap: 6px; padding-inline: 10px 12px; }
}
@container (max-width: 399px) {
  .hfp .hfp-vdp-tool--compare[aria-pressed="true"] .hfp-vdp-tool__long { display: none; }
  .hfp .hfp-vdp-tool--compare[aria-pressed="true"] .hfp-vdp-tool__short { display: inline; }
}
@container (max-width: 331px) {
  .hfp .hfp-vdp-tool--compare .hfp-vdp-tool__long { display: none; }
  .hfp .hfp-vdp-tool--compare .hfp-vdp-tool__short { display: inline; }
}

/* ------------------------------------------------------------------ 2. tray */

.hfp-cmp-tray {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 44;
  border-top: 1px solid var(--hf-line);
  background: var(--hf-paper);
  box-shadow: 0 -10px 30px rgb(var(--hf-black-rgb) / .10);
  font-family: var(--hf-font);
  animation: hfp-cmp-up .22s ease-out;
}
.hfp-cmp-tray[hidden] { display: none; }
@keyframes hfp-cmp-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes hfp-cmp-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.hfp-cmp-tray.is-full .hfp-cmp-tray__list { animation: hfp-cmp-nudge .3s ease 2; }

.hfp-cmp-tray__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px clamp(16px, 3vw, 24px);
}
.hfp-cmp-tray__head { display: grid; gap: 2px; margin: 0; color: var(--hf-ink); font-size: 15px; line-height: 1.2; }
.hfp-cmp-tray__head span { color: var(--hf-muted); font-size: 13px; }
.hfp-cmp-tray__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hfp-cmp-tray__item {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 58px;
  margin: 0;
  padding: 6px 30px 6px 6px;
  border: 1px solid var(--hf-line);
  border-radius: var(--hf-radius-md);
  background: var(--hf-paper);
}
.hfp-cmp-tray__item img,
.hfp-cmp-tray__ph { display: block; width: 48px; height: 36px; border-radius: 4px; background: var(--hf-surface-2); object-fit: cover; }
.hfp-cmp-tray__text { display: grid; min-width: 0; }
.hfp-cmp-tray__name {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: var(--hf-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hfp-cmp-tray__name a { color: inherit; text-decoration: none; }
.hfp-cmp-tray__name a:hover { color: var(--hf-interactive); text-decoration: underline; }
.hfp-cmp-tray__price { display: block; margin-top: 2px; color: var(--hf-muted); font-size: 12px; font-weight: 400; }
.hfp-cmp-tray__x {
  position: absolute;
  top: 2px;
  right: 1px;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--hf-radius-circle);
  background: transparent;
  color: var(--hf-muted);
  cursor: pointer;
}
.hfp-cmp-tray__x:hover { background: var(--hf-surface-1); color: var(--hf-ink); }
.hfp-cmp-tray__x:focus-visible { outline: 3px solid var(--hf-interactive); outline-offset: 1px; }
.hfp-cmp-tray__item--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  background: var(--hf-surface-1);
  color: var(--hf-muted);
  font-size: 12.5px;
}
.hfp-cmp-tray__acts { display: flex; align-items: center; gap: 6px; }
.hfp-cmp-tray__go { white-space: nowrap; }
.hfp-cmp-tray__clear {
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--hf-interactive);
  font: 600 14px/1 var(--hf-font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hfp-cmp-tray__clear:focus-visible { outline: 3px solid var(--hf-interactive); outline-offset: 2px; border-radius: 4px; }
.hfp-cmp-tray__msg { grid-column: 1 / -1; margin: 0; color: var(--hf-danger-strong); font-size: 13px; font-weight: 600; }
.hfp-cmp-tray__msg[hidden] { display: none; }

/* The page keeps its last lines clear of the tray, and the phone call button rides above it. */
html.hf-cmp-tray-on body { padding-bottom: var(--hf-cmp-tray-h, 88px); }

/* Under 1,100px the cars are thumbnails (names for screen readers). */
@media (max-width: 1100px) {
  .hfp-cmp-tray__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 16px; }
  .hfp-cmp-tray__head { display: none; }
  .hfp-cmp-tray__list { grid-template-columns: repeat(4, 48px); gap: 10px; }
  .hfp-cmp-tray__item { display: block; min-height: 0; padding: 0; border: 0; background: none; }
  .hfp-cmp-tray__item img,
  .hfp-cmp-tray__ph { width: 48px; height: 36px; }
  .hfp-cmp-tray__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .hfp-cmp-tray__x {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 24px;
    height: 24px;
    border: 2px solid var(--hf-paper);
    background: var(--hf-ink);
    color: var(--hf-paper);
  }
  .hfp-cmp-tray__x svg { width: 12px; height: 12px; }
  .hfp-cmp-tray__x:hover { background: var(--hf-ink); color: var(--hf-paper); }
  .hfp-cmp-tray__item--empty { width: 48px; height: 36px; border: 1px dashed var(--hf-line-strong); border-radius: 4px; background: var(--hf-surface-1); }
  .hfp-cmp-tray__item--empty span { display: none; }
  .hfp-cmp-tray__go { min-height: 44px; padding-inline: 18px; }
}
@media (max-width: 760px) {
  .hfp-cmp-tray__n { display: none; }   /* the thumbnails show how many */
  .hfp-cmp-tray__list { grid-template-columns: repeat(4, 44px); gap: 8px; }
  .hfp-cmp-tray__item img,
  .hfp-cmp-tray__ph,
  .hfp-cmp-tray__item--empty { width: 44px; height: 33px; }
}
@media (max-width: 420px) {
  .hfp-cmp-tray__clear { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hfp-cmp-tray, .hfp-cmp-tray.is-full .hfp-cmp-tray__list { animation: none; }
}

/* ------------------------------------------------------- 3. the /compare/ page */

.hfp main.hf-compare > .hfp-cmp-page { padding-top: 36px; }
.hfp .hfp-cmp-page__head { margin-bottom: 24px; }
.hfp .hfp-cmp-page__head p { max-width: 70ch; }
.hfp .hfp-cmp-note { margin: 0 0 20px; padding: 12px 16px; border-left: 4px solid var(--hf-warn); border-radius: var(--hf-radius-sm); background: var(--hf-warn-bg); color: var(--hf-ink); font-size: 14.5px; }

/* Tools: two switches, then Copy link / Print / Clear all. */
.hfp .hfp-cmp__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin: 0 0 20px;
  padding: 12px 0;
  border-top: 1px solid var(--hf-line);
  border-bottom: 1px solid var(--hf-line);
}
.hfp .hfp-cmp__hint { margin: 0; color: var(--hf-muted); font-size: 14.5px; }
.hfp .hfp-cmp__tools-end { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.hfp .hfp-cmp__switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--hf-ink); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.hfp .hfp-cmp__switch input {
  flex: none;
  position: relative;
  width: 40px;
  height: 24px;
  margin: 0;
  border-radius: var(--hf-radius-pill);
  background: var(--hf-neutral-500);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .15s ease;
}
.hfp .hfp-cmp__switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--hf-paper);
  box-shadow: 0 1px 2px rgb(var(--hf-black-rgb) / .3);
  transition: transform .15s ease;
}
.hfp .hfp-cmp__switch input:checked { background: var(--hf-interactive); }
.hfp .hfp-cmp__switch input:checked::after { transform: translateX(16px); }
.hfp .hfp-cmp__switch input:focus-visible { outline: 3px solid var(--hf-interactive); outline-offset: 2px; }

.hfp .hfp-cmp__tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: 0;
  padding: 0 16px 0 12px;
  border: 1px solid var(--hf-line);
  border-radius: var(--hf-radius-pill);
  background: var(--hf-paper);
  color: var(--hf-ink);
  font: 600 14px/1 var(--hf-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.hfp .hfp-cmp__tool[hidden] { display: none; }
.hfp .hfp-cmp__tool::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--hfp-cmp-ico) center / contain no-repeat;
  mask: var(--hfp-cmp-ico) center / contain no-repeat;
}
.hfp .hfp-cmp__tool:hover,
.hfp .hfp-cmp__tool:focus-visible { border-color: var(--hf-interactive); color: var(--hf-interactive); }
.hfp .hfp-cmp__tool--link { --hfp-cmp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); }
.hfp .hfp-cmp__tool--print { --hfp-cmp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E"); }
.hfp .hfp-cmp__tool--clear { --hfp-cmp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E"); }

.hfp .hfp-cmp__swipe { margin: 0 0 10px; color: var(--hf-muted); font-size: 13px; }
.hfp .hfp-cmp__swipe[hidden] { display: none; }

/* The table. Desktop: label column + one column per car (and per free slot). */
.hfp .hfp-cmp__scroll { position: relative; }
.hfp .hfp-cmp__scroll:focus-visible { outline: 3px solid var(--hf-interactive); outline-offset: 4px; }
.hfp .hfp-cmp__table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: var(--hf-font);
}
.hfp .hfp-cmp__table th,
.hfp .hfp-cmp__table td {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--hf-line);
  color: var(--hf-ink);
  font-size: 14.5px;
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.hfp .hfp-cmp__corner,
.hfp .hfp-cmp__row > th { width: 190px; }
.hfp .hfp-cmp__table .hfp-cmp__corner { vertical-align: bottom; }
@media (max-width: 1179px) {
  .hfp .hfp-cmp__corner,
  .hfp .hfp-cmp__row > th { width: 150px; }
}
.hfp .hfp-cmp__count { color: var(--hf-muted); font-size: 13px; }
.hfp .hfp-cmp__row > th { color: var(--hf-muted); font-size: 13px; font-weight: 600; }
.hfp .hfp-cmp__group-head > th {
  padding: 30px 14px 10px;
  border-bottom: 2px solid var(--hf-ink);
  color: var(--hf-ink);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}
.hfp .hfp-cmp__group:first-of-type .hfp-cmp__group-head > th { padding-top: 18px; }

/* The head: photos, then names and prices (they stay under the site header
   while the rows scroll), then Get ePrice and Remove. */
.hfp .hfp-cmp__table thead th,
.hfp .hfp-cmp__table thead td { border-bottom: 0; font-weight: 400; }
.hfp .hfp-cmp__photos > td { padding: 0 8px 4px; vertical-align: bottom; }
.hfp .hfp-cmp__car { position: relative; }
.hfp .hfp-cmp__photo { display: block; overflow: hidden; border-radius: var(--hf-radius-md); background: var(--hf-surface-1); aspect-ratio: 4 / 3; }
.hfp .hfp-cmp__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hfp .hfp-cmp__photo--none { display: grid; place-items: center; color: var(--hf-muted); font-size: 13px; text-decoration: none; }
.hfp .hfp-cmp__badge {
  position: absolute;
  top: 8px;
  left: 16px;
  padding: 4px 10px;
  border-radius: var(--hf-radius-pill);
  background: var(--hf-success-bg);
  color: #006e00;                 /* --hf-success (#008200) is 4.2:1 on its own tint; this is 5.8:1 */
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 1px 3px rgb(var(--hf-black-rgb) / .12);
}
.hfp .hfp-cmp__table .hfp-cmp__heads > th,
.hfp .hfp-cmp__table .hfp-cmp__heads > td {
  position: sticky;
  top: 76px;                      /* under .hfp-header, as .hfp-page-nav */
  z-index: 3;
  padding: 10px 8px 10px;
  border-bottom: 1px solid var(--hf-line);
  background: var(--hf-paper);
  vertical-align: top;
}
.hfp .hfp-cmp__table .hfp-cmp__heads > td { vertical-align: bottom; }
.hfp .hfp-cmp__name {
  display: block;
  min-height: 2.6em;
  color: var(--hf-ink);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.hfp .hfp-cmp__name:hover { color: var(--hf-interactive); text-decoration: underline; text-underline-offset: 3px; }
.hfp .hfp-cmp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 4px 0 0; }
.hfp .hfp-cmp__price span { color: var(--hf-muted); font-size: 12.5px; }
.hfp .hfp-cmp__price strong { color: var(--hf-ink); font-size: 21px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hfp .hfp-cmp__table .hfp-cmp__acts { padding: 12px 8px 16px; border-bottom: 0; }
.hfp .hfp-cmp__acts .hfp-btn { display: flex; width: 100%; justify-content: center; }
.hfp .hfp-cmp__remove {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 4px auto 0;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 8px;
  color: var(--hf-muted);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hfp .hfp-cmp__remove::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hfp .hfp-cmp__remove:hover { color: var(--hf-danger-strong); }

/* Free columns: the picker in the first, a dashed space in the others. */
.hfp .hfp-cmp__table .hfp-cmp__slot { padding: 0 8px 16px; vertical-align: top; }
.hfp .hfp-cmp__slot--more span,
.hfp .hfp-cmp-pick {
  display: grid;
  align-content: start;
  gap: 8px;
  height: 100%;
  min-height: 220px;
  padding: 18px 16px;
  border: 1.5px dashed var(--hf-line-strong);
  border-radius: var(--hf-radius-md);
  background: var(--hf-surface-1);
}
.hfp .hfp-cmp__slot--more span { place-items: center; border-color: var(--hf-line); background: none; color: var(--hf-muted); font-size: 13.5px; }
.hfp .hfp-cmp-pick__title { margin: 0 0 4px; color: var(--hf-ink); font-size: 16px; font-weight: 600; }
.hfp .hfp-cmp-pick label { margin: 4px 0 0; color: var(--hf-ink); font-size: 13px; font-weight: 600; }
.hfp .hfp-cmp-pick select {
  width: 100%;
  min-height: 44px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--hf-line-strong);
  border-radius: var(--hf-radius-sm);
  background: var(--hf-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat;
  color: var(--hf-ink);
  font: 400 14.5px/1.3 var(--hf-font);
  -webkit-appearance: none;
  appearance: none;
}
.hfp .hfp-cmp-pick select:disabled { background-color: var(--hf-surface-2); color: var(--hf-muted); cursor: not-allowed; }
.hfp .hfp-cmp-pick select:focus-visible { outline: 3px solid var(--hf-interactive); outline-offset: 1px; }
.hfp .hfp-cmp-pick { grid-template-columns: minmax(0, 1fr); }
.hfp .hfp-cmp-pick select { min-width: 0; }
.hfp .hfp-cmp-pick .hfp-btn { margin-top: 8px; justify-content: center; padding-inline: 12px; white-space: normal; text-align: center; }
.hfp .hfp-cmp-pick .hfp-btn:disabled { opacity: .55; cursor: not-allowed; }
.hfp .hfp-cmp-pick__empty { margin: 0; color: var(--hf-muted); font-size: 14px; }

/* Values. */
.hfp .hfp-cmp__none { color: var(--hf-neutral-500); }
.hfp .hfp-cmp__list { margin: 0; padding: 0; list-style: none; }
.hfp .hfp-cmp__list li { position: relative; margin: 0 0 6px; padding-left: 20px; font-size: 14px; line-height: 1.4; }
.hfp .hfp-cmp__list li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 14px;
  height: 14px;
  background: var(--hf-success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hfp .hfp-cmp__swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 8px -2px 0;
  border: 1px solid rgb(var(--hf-black-rgb) / .2);
  border-radius: 50%;
  background-image: linear-gradient(135deg, rgb(255 255 255 / .45), rgb(255 255 255 / 0) 60%);
}
.hfp .hfp-cmp__swatch--white  { background-color: #f3f3f1; }
.hfp .hfp-cmp__swatch--black  { background-color: #1e1f22; }
.hfp .hfp-cmp__swatch--silver { background-color: #c3c6cb; }
.hfp .hfp-cmp__swatch--gray   { background-color: #7c8087; }
.hfp .hfp-cmp__swatch--blue   { background-color: #2d5a9b; }
.hfp .hfp-cmp__swatch--red    { background-color: #b0241d; }
.hfp .hfp-cmp__swatch--green  { background-color: #4e6b3b; }
.hfp .hfp-cmp__swatch--beige  { background-color: #d9cba6; }
.hfp .hfp-cmp__swatch--brown  { background-color: #6c4a32; }
.hfp .hfp-cmp__swatch--orange { background-color: #d7672a; }
.hfp .hfp-cmp__swatch--yellow { background-color: #e6c22c; }
.hfp .hfp-cmp__swatch--purple { background-color: #5a3e79; }

/* Price lines: label left, amount right, the price itself larger. */
.hfp .hfp-cmp__prices { display: grid; gap: 4px; margin: 0; overflow-wrap: normal; }
.hfp .hfp-cmp__pl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hfp .hfp-cmp__pl dt { color: var(--hf-muted); font-size: 13px; font-weight: 400; }
.hfp .hfp-cmp__pl dd { margin: 0; color: var(--hf-ink); font-size: 14px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hfp .hfp-cmp__pl--msrp dd { text-decoration: line-through; color: var(--hf-muted); font-weight: 400; }
.hfp .hfp-cmp__pl--final { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--hf-line); }
.hfp .hfp-cmp__pl--final dt { color: var(--hf-ink); font-weight: 600; }
.hfp .hfp-cmp__pl--final dd { font-size: 18px; font-weight: 700; }
.hfp .is-lowest .hfp-cmp__pl--final dd { color: #006e00; }

/* Differences: values that are not the same for every car are tinted. */
.hfp .hfp-cmp--diff .hfp-cmp__row[data-same="0"] > td:not(.hfp-cmp__gap) { background: var(--hf-brand-050); }
.hfp .hfp-cmp--diff .hfp-cmp__row[data-same="0"] > th { color: var(--hf-ink); }
.hfp .hfp-cmp--hide-same .hfp-cmp__row[data-same="1"] { display: none; }
.hfp .hfp-cmp--hide-same .hfp-cmp__group:not(:has(.hfp-cmp__row:not([data-same="1"]))) { display: none; }

.hfp .hfp-cmp__add-below { display: none; }

.hfp .hfp-cmp__fine { max-width: 80ch; margin: 24px 0 0; color: var(--hf-muted); font-size: 12.5px; line-height: 1.55; }

/* Nothing chosen yet. */
.hfp .hfp-cmp-empty { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: 32px; align-items: start; }
.hfp .hfp-cmp-empty__copy h2 { margin: 0 0 10px; font-size: 26px; }
.hfp .hfp-cmp-empty__copy p { margin: 0 0 20px; max-width: 56ch; }
.hfp .hfp-cmp-empty .hfp-cmp-pick { min-height: 0; border-style: solid; }

/*
 * Narrower than 1,000px: every row's label sits above its values, the cars
 * side by side under it, at least 150px each (two fit a 360px phone); more
 * cars than fit are a sideways swipe away (the labels stay put). The picker
 * moves under the table.
 */
@media screen and (max-width: 999px) {
  .hfp .hfp-cmp__scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
  }
  .hfp .hfp-cmp__table,
  .hfp .hfp-cmp__table thead,
  .hfp .hfp-cmp__table tbody { display: block; }
  .hfp .hfp-cmp__table { min-width: calc(var(--cmp-cols, 2) * 150px + (var(--cmp-cols, 2) - 1) * 12px); }
  .hfp .hfp-cmp__table tr { display: grid; grid-template-columns: repeat(var(--cmp-cols, 2), minmax(0, 1fr)); column-gap: 12px; }
  .hfp .hfp-cmp__table .hfp-cmp__corner,
  .hfp .hfp-cmp__table .hfp-cmp__slot,
  .hfp .hfp-cmp__table .hfp-cmp__gap { display: none; }
  .hfp .hfp-cmp__add-below { display: block; max-width: 480px; margin-top: 24px; }
  .hfp .hfp-cmp__add-below .hfp-cmp-pick { min-height: 0; }
  .hfp .hfp-cmp__table .hfp-cmp__photos > td { padding: 0 0 6px; scroll-snap-align: start; }
  .hfp .hfp-cmp__table .hfp-cmp__heads > th { position: static; padding: 6px 8px 4px; border-bottom: 0; }
  .hfp .hfp-cmp__table .hfp-cmp__acts { padding: 8px 0 14px; }
  .hfp .hfp-cmp__badge { left: 8px; }
  .hfp .hfp-cmp__table .hfp-cmp__row > th,
  .hfp .hfp-cmp__table .hfp-cmp__group-head > th {
    grid-column: 1 / -1;
    justify-self: start;
    position: sticky;
    left: 0;
    width: auto;
    max-width: calc(100vw - 32px);
    border-bottom: 0;
  }
  .hfp .hfp-cmp__table .hfp-cmp__row > th { padding: 12px 8px 4px; }
  .hfp .hfp-cmp__table .hfp-cmp__group-head { border-bottom: 2px solid var(--hf-ink); }
  .hfp .hfp-cmp__table .hfp-cmp__group-head > th { padding: 26px 0 8px; }
  .hfp .hfp-cmp__table .hfp-cmp__row { border-bottom: 1px solid var(--hf-line); }
  .hfp .hfp-cmp__table .hfp-cmp__row > td { margin-bottom: 10px; padding: 6px 8px; border-bottom: 0; border-radius: 6px; }
  .hfp .hfp-cmp__table .hfp-cmp__group-head > th { padding-left: 8px; }
  .hfp .hfp-cmp__name { font-size: 15px; }
  .hfp .hfp-cmp__price strong { font-size: 19px; }
  .hfp .hfp-cmp__tools { gap: 4px 20px; }
  .hfp .hfp-cmp__tools-end { margin-left: 0; }
  .hfp .hfp-cmp-empty { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .hfp-cmp-tray,
  .hfp .hfp-cmp__tools,
  .hfp .hfp-cmp__swipe,
  .hfp .hfp-cmp__slot,
  .hfp .hfp-cmp__gap,
  .hfp .hfp-cmp__acts,
  .hfp .hfp-cmp-note,
  .hfp .hfp-cmp-check { display: none !important; }
  html.hf-cmp-tray-on body { padding-bottom: 0; }
  .hfp .hfp-cmp__table th,
  .hfp .hfp-cmp__table td { padding: 6px 8px; font-size: 11px; }
  .hfp .hfp-cmp__row { break-inside: avoid; }
  .hfp .hfp-cmp--diff .hfp-cmp__row[data-same="0"] > td { background: none; }
}