/* HP5, the redesigned homepage (canvas boards HomeHP5*, Krish 2026-10-08; the homepage since
   2026-10-09). Loaded by templates/new-design/homepage.html on that page only. Every rule is
   hp-*, sits under main.hp5, or is the compact listing card (.lc-item--compact).
   The purple is the redesign's #5B2FC9 (vehicle-page.css, listing-filters.css); the auction stage
   keeps its orange. */

.hp5 {
  --hp-ink: #19284A;
  --hp-muted: #5B6478;
  --hp-soft: #4A5468;
  --hp-line: #E3E6EC;
  --hp-purple: #5B2FC9;
  --hp-purple-dark: #4A23AE;
  --hp-stage: #0C101C;
  --hp-stage-box: #1F2A44;
  --hp-stage-text: #B8C0D0;
  --hp-orange: #FF6B2C;
  --hp-live: #FF4D5E;
  --hp-next: #FFC83D;
}

/* The stage shows its "before" or its "live" copy, never both. */
.hp5[data-hp-phase="before"] [data-hp-when="live"],
.hp5[data-hp-phase="live"] [data-hp-when="before"] { display: none !important; }

/* ---------------------------------------------------------------- header */

/* The brand line beside the logo: a hairline, then the words. Two short lines until the header
   has room for one (1680px): on one line it squeezed the logo below its 130px (to 102px at 1440,
   64px at 1280), which prod's header never does. 14px, a step up from 12px (Krish 2026-10-09),
   except from 992 to 1279px, where the full menu leaves no room: 14px shrank the logo to 83px at
   1024 and 118px at 1200. */
.logo:has(.hp-tagline) { display: flex; align-items: center; gap: 10px; }
.hp-tagline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 10px;
  border-left: 1px solid #E3E6EC;
  min-height: 36px;
  font-family: var(--ff-primary);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: #4A5468;
  white-space: nowrap;
}
@media (min-width: 992px) and (max-width: 1279.98px) {
  .hp-tagline { min-height: 28px; font-size: 12px; line-height: 15px; }
}
@media (min-width: 1680px) {
  .logo:has(.hp-tagline) { gap: 14px; }
  .hp-tagline { flex-direction: row; align-items: center; gap: 4px; padding-left: 14px; min-height: 32px; font-size: 16px; line-height: 22px; }
}

/* No hamburger on a desktop: from 992px the header shows the whole menu and the Sign up / Log in
   buttons, and every other link the drawer holds is in the footer (tests/test_homepage_hp5.py
   checks that). Hidden, not removed: the drawer stays in the page for phones, and for crawlers. */
@media (min-width: 992px) {
  header .header-wrapper .tp-header__hamburger { display: none; }
}

/* The board's buttons: Sign up an outline, Log in solid, both the redesign's purple. */
header .header-acttion-btns [data-target="#registermodal"].btn {
  background: #FFFFFF;
  border: 1.5px solid #5B2FC9;
  color: #5B2FC9;
}
header .header-acttion-btns [data-target="#loginModal"].btn {
  background: #5B2FC9;
  border-color: #5B2FC9;
  color: #FFFFFF;
}
header .header-acttion-btns [data-target="#registermodal"].btn:hover { background: #F4F1FC; }
header .header-acttion-btns [data-target="#loginModal"].btn:hover { background: #4A23AE; border-color: #4A23AE; }

/* ---------------------------------------------------------------- the first screen */

.hp-top {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 16px;
  font-family: var(--ff-primary);
  color: var(--hp-ink);
}

.hp-top > * { grid-column: 2; min-width: 0; margin: 0; }
.hp-stage-bg { grid-column: 1 / -1; grid-row: 1 / 3; background: var(--hp-stage); }
.hp-stage { grid-row: 1; }
.hp-lots { grid-row: 2; }
.hp-search { grid-row: 3; }
.hp-popular { grid-row: 4; }
.hp-offer { grid-row: 5; }

.hp-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 0 0;
  color: #FFFFFF;
}

.hp5[data-hp-state="none"] .hp-stage { padding-bottom: 24px; }

.hp-stage__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.hp-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.hp-dot--live { background: var(--hp-live); box-shadow: 0 0 0 4px rgba(255, 77, 94, 0.25); }
.hp-dot--next { background: var(--hp-next); box-shadow: 0 0 0 4px rgba(255, 200, 61, 0.25); }
.hp-dot--none { background: #8A94A8; box-shadow: 0 0 0 4px rgba(138, 148, 168, 0.25); }

.hp-stage__h1 {
  margin: 0;
  font-family: var(--ff-primary);
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  color: #FFFFFF;
}
.hp-stage__h1 br { display: none; }

.hp-stage__sub { display: none; margin: 0; }

.hp-stage__when { display: flex; flex-direction: column; gap: 14px; }
.hp-count { display: flex; gap: 8px; }
/* The boards' boxes: 90 x 70 on a phone, 104 x 84 on a desktop. Their 66px / 80px minimum was
   drawn without border-box, so the padding came on top; here the site's border-box counts it
   inside, which made the boxes 24px narrower than the board's (Krish 2026-10-09: "i like the
   desinged boxes"). */
.hp-count__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 90px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--hp-stage-box);
}
.hp-count__box b {
  font-size: 30px;
  line-height: 34px;
  font-weight: 700;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.hp-count__box span {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hp-stage-text);
}

.hp-stage__facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--hp-stage-text);
}
.hp-stage__date { color: #FFFFFF; font-weight: 700; }

.hp-stage__actions { display: flex; gap: 12px; }
.hp-stage__actions .hp-btn--orange { flex: 1; }
.hp-stage__actions .hp-btn--ghost { display: none; }

.hp-btn,
.hp-btn:hover,
.hp-btn:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 52px;
  padding: 0 22px;
  border-radius: 12px;
  font-family: var(--ff-primary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.hp-btn--orange, .hp-btn--orange:focus { background: var(--hp-orange); color: var(--hp-stage); }
.hp-btn--orange:hover { background: #FF8248; color: var(--hp-stage); }
.hp-btn--ghost, .hp-btn--ghost:focus { border: 1.5px solid rgba(255, 255, 255, 0.55); color: #FFFFFF; }
.hp-btn--ghost:hover { border-color: #FFFFFF; color: #FFFFFF; }
.hp-btn--purple, .hp-btn--purple:focus { height: 48px; background: var(--hp-purple); color: #FFFFFF; }
.hp-btn--purple:hover { background: var(--hp-purple-dark); color: #FFFFFF; }
.hp-btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.hp-offer .hp-btn:focus-visible { outline-color: var(--hp-purple); }

/* The Buy Now card: in the stage on a desktop, after the Popular strip on a phone. */
.hp-offer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--hp-line);
  border-radius: 18px;
  background: #FFFFFF;
  color: var(--hp-ink);
}
.hp-offer__eyebrow {
  margin: 0;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hp-muted);
}
.hp-offer__h {
  margin: 0;
  font-family: var(--ff-primary);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--hp-ink);
}
.hp-offer__text { margin: 0; font-size: 14px; line-height: 21px; color: var(--hp-soft); }
.hp-offer .hp-btn { align-self: flex-start; margin-top: 4px; }

/* ---- the swipe rows: the stage's lots and the Popular strip */

.hp-lots { display: flex; flex-direction: column; gap: 12px; padding: 14px 0 20px; }

.hp-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hp-row-head__h {
  margin: 0;
  font-family: var(--ff-primary);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--hp-ink);
}
.hp-row-head__h--dark { color: #FFFFFF; }

.hp-arrows { display: flex; gap: 8px; }
.hp-arrows[hidden] { display: none; }
.hp-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--hp-line);
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--hp-ink);
  cursor: pointer;
}
.hp-arrow:disabled { opacity: 0.4; cursor: default; }
.hp-arrows--dark .hp-arrow { border-color: rgba(255, 255, 255, 0.35); background: transparent; color: #FFFFFF; }

/* A scroller clips whatever overflows it, the cards' shadow included, so the row runs past its column
   by --hp-row-bleed on the sides and has room above and below, and negative margins keep its place.
   On a phone the bleed reaches the screen's edges. */
.hp-row {
  --hp-row-bleed: 16px;
  display: flex;
  gap: 10px;
  margin: -8px calc(-1 * var(--hp-row-bleed)) -20px;
  padding: 8px var(--hp-row-bleed) 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--hp-row-bleed);
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.hp-row::-webkit-scrollbar { display: none; }
.hp-row > .lc-item { scroll-snap-align: start; }
.hp-row--lots > .lc-item { width: 290px; }
.hp-row--popular > .lc-item { width: 300px; }

/* "See all 12" opens the strip into a list (phones). */
.hp-popular__all {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--ff-primary);
  font-size: 14px;
  font-weight: 600;
  color: var(--hp-purple);
  text-decoration: underline;
  cursor: pointer;
}
.hp-popular__all[aria-expanded="false"] .hp-popular__less,
.hp-popular__all[aria-expanded="true"] .hp-popular__more { display: none; }
.hp-row--popular.is-expanded { flex-direction: column; margin: 0; padding: 0; overflow: visible; }
.hp-row--popular.is-expanded > .lc-item { width: 100%; }

.hp-popular { display: flex; flex-direction: column; gap: 10px; padding: 0; }

/* ---- the search */

.hp-search { padding: 16px 0; }
.hp-search__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 8px 0 16px;
  border: 1px solid var(--hp-line);
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 6px 20px rgba(25, 40, 74, 0.12);
}
.hp-search__form #autocomplete_search_top::placeholder { font-style: normal; color: var(--hp-muted); opacity: 1; }
/* The pill is the field: the site's input focus ring (a rounded blue box-shadow) would draw a second
   box inside it, so focus shows on the pill's border instead (.hp-search__form:focus-within). */
.hp-search__form #autocomplete_search_top,
.hp-search__form #autocomplete_search_top:focus {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  font-family: var(--ff-primary);
  font-size: 14px;
  color: var(--hp-ink);
}
.hp-search__go {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hp-purple);
  color: #FFFFFF;
  cursor: pointer;
}
.hp-search__go:hover { background: var(--hp-purple-dark); }
.hp-search__form:focus-within { border-color: var(--hp-purple); box-shadow: 0 0 0 3px rgba(91, 47, 201, 0.18), 0 6px 20px rgba(25, 40, 74, 0.12); }
.hp-search .topsearchloadbox { position: absolute; right: 56px; top: 50%; transform: translateY(-50%); }
.hp-search .field-box { position: absolute; top: calc(100% + 6px); left: 12px; right: 12px; z-index: 50; }
.hp-search .field-box ul.dropdownbox { min-width: 0; }

/* ---------------------------------------------------------------- the compact listing card */

/* The same card markup (templates/common/listing-card.html), laid out as a tile: photo left, then
   the name, the time-left badge, the run status (the stage's lots only) and the price. Its media
   and body boxes step aside (display: contents), so their children are this grid's items, and the
   card-wide link still opens the car. vehicle-card.js keeps it current like every other card.
   It keeps the card's shadow and hover lift. The text starts at the top, so the names line up across a row
   when one tile has fewer lines; the last row takes any spare height. The photo grows with the tile. */
.lc-item.lc-item--compact { flex: 0 0 auto; margin-bottom: 0; }
.lc-item--compact .lc-card {
  display: grid;
  grid-template-columns: clamp(96px, 34%, 168px) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: 12px;
  row-gap: 4px;
  padding: 8px 12px 8px 8px;
}
.lc-item--compact .lc-media,
.lc-item--compact .lc-body,
.lc-item--compact .lc-foot,
.lc-item--compact .lc-pricing { display: contents; }
.lc-item--compact .lc-photo {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: #E9ECF1;
}
.lc-item--compact .lc-media > :not(.lc-photo),
.lc-item--compact .lc-body > *,
.lc-item--compact .lc-pricing > * { grid-column: 2; }
.lc-item--compact .lc-title { order: 1; font-size: 14px; line-height: 20px; }
.lc-item--compact .lc-badge {
  order: 2;
  position: static;
  justify-self: start;
  gap: 6px;
  padding: 3px 8px;
  font-size: 11px;
  line-height: 16px;
}
.lc-item--compact .lc-badge[hidden] { display: none; }
.lc-item--compact .lc-chips { order: 3; display: none; }
.lc-item--compact .lc-opens,
.lc-item--compact .lc-price { order: 4; }
.lc-item--compact .lc-watch,
.lc-item--compact .lc-trim,
.lc-item--compact .lc-meta,
.lc-item--compact .lc-pills { display: none; }

.lc-item--run .lc-chips { display: flex; }
.lc-item--run .lc-chip:not(:first-child) { display: none; }

.lc-item--compact .lc-opens { min-height: 0; font-size: 13px; line-height: 18px; }
.lc-item--compact .lc-price {
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0;
  min-height: 0;
}
/* A longer label ("Compra Inmediata") puts the amount on its own line rather than cutting it off. */
.lc-item--compact .lc-price-col,
.lc-item--compact .lc-price-col--end { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.lc-item--compact .lc-price-label {
  font-size: 12px;
  line-height: 17px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lc-muted);
}
.lc-item--compact .lc-price-value { font-size: 12px; line-height: 17px; font-weight: 400; color: var(--lc-muted); }
.lc-item--compact .lc-price-value--primary { font-size: 16px; line-height: 22px; font-weight: 700; color: var(--lc-navy); }
.lc-item--compact .lc-price-col:has(.lc-price-value--primary) .lc-price-label { font-size: 13px; color: var(--lc-body); }
.lc-item--compact .lc-price-col:has(.lc-no-bids) .lc-price-label { display: none; }
.lc-item--compact .lc-no-bids { font-size: 12px; line-height: 17px; }

.hp-lots .lc-card { border-color: transparent; }

/* ---------------------------------------------------------------- All cars */

.hp-allcars {
  margin: 8px 0 16px;
  font-family: var(--ff-primary);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: #19284A;
  scroll-margin-top: 96px;
}

.hp5 #toggleButton.bg-gradient-purple { background: #5B2FC9; border-color: #5B2FC9; }

/* "New here? How buying works", kept in the grid's fourth slot by homepage-hp5.js. */
.hp-tip-item { display: flex; margin-bottom: 12px; }
.hp-tip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 18px 18px;
  border-radius: 14px;
  background: #19284A;
  color: #FFFFFF;
  font-family: var(--ff-primary);
}
.hp-tip__close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #C9D2F2;
  cursor: pointer;
}
.hp-tip__eyebrow { margin: 0; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #C9D2F2; }
.hp-tip__h { margin: -8px 0 0; font-family: var(--ff-primary); font-size: 20px; line-height: 26px; font-weight: 700; color: #FFFFFF; }
.hp-tip__steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hp-tip__steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 19px; color: #DDE3F0; }
.hp-tip__steps b { display: block; font-size: 14px; color: #FFFFFF; }
.hp-tip__n {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #19284A;
  font-size: 13px;
  font-weight: 700;
}
.hp-tip__note { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 19px; color: #DDE3F0; }
.hp-tip__note svg { flex-shrink: 0; margin-top: 1px; color: #7BE0A8; }
.hp-tip__link,
.hp-tip__link:hover { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: #FFFFFF; font-size: 14px; font-weight: 600; text-decoration: underline; }

/* ---------------------------------------------------------------- the docked auction bar */

.hp-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1020;
  background: #19284A;
  box-shadow: 0 -6px 18px rgba(16, 24, 40, 0.18);
  font-family: var(--ff-primary);
}
.hp-bar[hidden] { display: none; }
body.hp-bar-on { padding-bottom: 56px; }
/* The chat bubble (Chatbase) rides above the bar instead of covering its button, as on the board. */
body.hp-bar-on #chatbase-bubble-button { transform: translateY(-56px); }
.hp-bar__link,
.hp-bar__link:hover,
.hp-bar__link:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
  box-sizing: border-box;
  padding: 0 12px;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 13px;
}
.hp-bar__link .hp-dot { width: 9px; height: 9px; }
.hp-bar__text { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 17px; }
.hp-bar__a, .hp-bar__b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-bar__b { font-size: 12px; color: var(--hp-stage-text); }
.hp-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #19284A;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- tablets and up */

@media (min-width: 768px) {
  .hp-top { grid-template-columns: 24px minmax(0, 1fr) 24px; }
  .hp-row { --hp-row-bleed: 24px; }
  .hp-search { padding: 24px 0; }
  .hp-search__form { max-width: 760px; height: 60px; padding-left: 22px; }
  .hp-search__form #autocomplete_search_top { font-size: 16px; }
  .hp-search__go { width: 44px; height: 44px; }
  .hp-stage__actions .hp-btn--orange { flex: 0 0 auto; }
  .hp-stage__actions .hp-btn--ghost { display: inline-flex; }
  .hp-bar__link,
  .hp-bar__link:hover,
  .hp-bar__link:focus { justify-content: center; padding: 0 48px; font-size: 15px; }
  .hp-bar__text { flex: 0 1 auto; flex-direction: row; gap: 6px; }
  .hp-bar__b { font-size: 15px; color: #FFFFFF; }
  .hp-bar__b::before { content: "\00B7"; margin-right: 6px; }
}

/* ---------------------------------------------------------------- desktop: the stage's two columns */

/* The first screen spans the page like the header and the All cars grid under it, whose content sits
   48px from each edge. It once stopped at 1,344px and left a widening empty margin on bigger screens. */
@media (min-width: 992px) {
  .hp-top { grid-template-columns: 48px minmax(0, 1fr) minmax(300px, 380px) 48px; }
  .hp-top > * { grid-column: 2 / 4; }
  .hp-stage-bg { grid-column: 1 / -1; }
  .hp-stage { grid-column: 2; gap: 18px; padding: 48px 48px 0 0; }
  .hp5[data-hp-state="none"] .hp-stage { padding-bottom: 40px; }
  .hp-offer { grid-column: 3; grid-row: 1; align-self: end; margin-top: 0; padding: 24px; border: 0; }
  .hp-offer__h { font-size: 24px; line-height: 32px; }

  .hp-stage__h1 { font-size: clamp(36px, 3.4vw, 48px); line-height: 1.17; }
  .hp-stage__h1 br { display: inline; }
  /* The break suits the English line; the longer Spanish wraps on its own. */
  html[lang="es"] .hp-stage__h1 br { display: none; }
  .hp-stage__sub { display: block; max-width: 640px; font-size: 18px; line-height: 28px; color: var(--hp-stage-text); }
  .hp-stage__when { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 24px; }
  .hp-count__box { min-width: 104px; }
  .hp-count__box b { font-size: 44px; line-height: 48px; }
  .hp-stage__facts { gap: 4px; }
  .hp-stage__date { font-size: 18px; line-height: 26px; }

  .hp-lots { gap: 14px; padding: 32px 0 40px; }
  /* Both rows show the same number of whole tiles, so their columns line up; the tiles grow with the
     screen rather than adding more of them, as the grid's cards do. */
  .hp-row { --hp-row-bleed: 12px; --hp-per-view: 3; gap: 12px; margin-bottom: -28px; padding-bottom: 28px; }
  .hp-row > .lc-item { width: calc((100% - (var(--hp-per-view) - 1) * 12px) / var(--hp-per-view)); }
  .hp-row-head__h { font-size: 18px; }
  .hp-popular .hp-row-head__h { font-size: 20px; line-height: 28px; }
  .hp-popular__all { display: none; }
  .hp-search { padding: 28px 0; }
  .hp-popular { gap: 12px; padding: 4px 0 0; }
  .hp-allcars { margin-top: 24px; font-size: 22px; line-height: 30px; }
}

@media (min-width: 1100px) {
  .hp-row { --hp-per-view: 4; }
}

@media (min-width: 1360px) {
  .hp-row { --hp-per-view: 5; }
}

@media (max-width: 991.98px) {
  .hp-arrows { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-row { scroll-behavior: auto; }
}