[hidden] { display: none !important; }

.listing-hero { padding: 31px 0 52px; color: #fff; background: var(--ink); }
.breadcrumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; color: rgba(255,255,255,.55); font-size: 10px; }
.breadcrumbs a { color: rgba(255,255,255,.76); }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs > span[aria-hidden="true"] { color: #f27b63; }
.listing-hero .eyebrow { margin-bottom: 13px; }
.listing-hero h1 { margin: 0; font: 800 clamp(2.8rem, 6vw, 4.8rem)/1.02 var(--display); letter-spacing: -.085em; }
.listing-hero h1 span { color: #f17860; }
.listing-hero > .container > p:last-child { max-width: 520px; margin: 15px 0 0; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.8; }

.listing-content { padding: 43px 0 72px; background: var(--paper); }
.listing-filters { display: grid; grid-template-columns: minmax(210px,1.5fr) repeat(3,minmax(140px,.8fr)) auto; align-items: center; gap: 9px; padding: 17px; border: 1px solid #e6e8e4; background: #fff; }
.listing-filters > label { min-width: 0; height: 45px; display: flex; align-items: center; border: 1px solid #e4e7e5; background: #f9faf9; }
.listing-filters select, .listing-search input { width: 100%; min-width: 0; height: 100%; padding: 0 11px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.listing-search { padding-left: 12px; }
.listing-search > span { color: var(--accent); font-size: 22px; transform: rotate(-20deg); }
.listing-search input { padding-left: 8px; }
.listing-filters .button { min-height: 45px; }
.filter-reset { grid-column: 1 / -1; justify-self: end; padding: 2px 0; border: 0; color: #7a8589; background: transparent; cursor: pointer; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.filter-reset:hover { color: var(--accent-dark); }
.listing-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin: 38px 0 19px; }
.listing-summary h2 { margin: 0; font: 800 24px/1.2 var(--display); letter-spacing: -.06em; }
.listing-summary p { margin: 0; color: #7e898d; font-size: 10px; }
.listing-grid { min-height: 120px; }
.listing-grid .vehicle-image { height: 220px; }
.listing-grid .vehicle-card { display: flex; flex-direction: column; }
.listing-grid .vehicle-details { flex: 1; }
.listing-empty { grid-column: 1 / -1; padding: 52px 20px; color: #697579; text-align: center; font-size: 13px; }
.listing-empty a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.listing-disclaimer { margin: 19px 0 0; color: #879094; font-size: 10px; line-height: 1.7; }
.listing-help { padding: 43px 0; color: #fff; background: #202c32; }
.listing-help-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.listing-help .eyebrow { margin-bottom: 7px; }
.listing-help h2, .detail-more h2 { margin: 0; font: 800 clamp(1.7rem, 3.5vw, 2.45rem)/1.15 var(--display); letter-spacing: -.065em; }
.listing-help-inner > div > p:last-child { margin: 7px 0 0; color: rgba(255,255,255,.62); font-size: 11px; }

.detail-top { padding: 16px 0 19px; border-bottom: 1px solid #e7e9e6; background: #fff; }
.detail-top .breadcrumbs { margin: 0; color: #839094; }
.detail-top .breadcrumbs a { color: #616d71; }
.detail-top .breadcrumbs span[aria-hidden="true"] { color: var(--accent); }
.detail-back { display: inline-block; margin-top: 15px; color: var(--accent-dark); font-size: 10px; font-weight: 700; }
.detail-content { padding-top: 38px; padding-bottom: 72px; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(320px,.7fr); align-items: start; gap: 35px; }
.detail-photo { position: relative; overflow: hidden; background: #e2e5e2; }
.detail-photo img { width: 100%; aspect-ratio: 1.6; object-fit: cover; }
.detail-photo .vehicle-badge { top: 17px; left: 17px; }
.detail-photo-note { margin: 9px 0 0; color: #858f92; font-size: 9px; }
.detail-about { margin-top: 35px; padding-top: 24px; border-top: 1px solid #dfe2de; }
.detail-about .eyebrow { margin-bottom: 8px; }
.detail-about h2 { margin: 0; font: 800 clamp(1.5rem,3vw,2rem)/1.2 var(--display); letter-spacing: -.06em; }
.detail-about > p:last-child { max-width: 600px; margin: 10px 0 0; color: #778286; font-size: 11px; line-height: 1.8; }
.detail-card { position: sticky; top: 100px; padding: 24px; border: 1px solid #e3e6e2; background: #fff; box-shadow: 0 14px 35px rgba(23,33,38,.05); }
.detail-card .eyebrow { margin-bottom: 11px; font-size: 9px; }
.detail-stock { margin: 0; color: #859094; font-size: 9px; }
.detail-card h1 { margin: 5px 0 0; font: 800 clamp(1.7rem,3vw,2.25rem)/1.12 var(--display); letter-spacing: -.07em; }
.detail-price { margin: 17px 0 0; color: var(--accent-dark); font: 800 29px/1 var(--display); letter-spacing: -.05em; }
.detail-price-note { margin: 7px 0 18px; color: #838d90; font-size: 9px; }
.detail-specs { border-top: 1px solid #e8ebe7; }
.detail-spec { display: flex; justify-content: space-between; gap: 13px; padding: 9px 0; border-bottom: 1px solid #e8ebe7; font-size: 10px; }
.detail-spec span { color: #7b8689; }
.detail-spec strong { color: var(--ink); font-weight: 700; text-align: right; }
.detail-actions { display: grid; gap: 9px; margin-top: 19px; }
.detail-actions .button { width: 100%; }
.detail-actions .button-outline:hover { color: #fff; }
.detail-finance { display: flex; justify-content: space-between; margin-top: 14px; padding-bottom: 12px; border-bottom: 1px solid #e8ebe7; color: var(--accent-dark); font-size: 10px; font-weight: 700; }
.detail-disclaimer { margin: 12px 0 0; color: #899296; font-size: 9px; line-height: 1.7; }
.detail-not-found { min-height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 60px; padding-bottom: 60px; text-align: center; }
.detail-not-found > span { display: grid; width: 48px; height: 48px; place-items: center; color: var(--accent); background: #fae7e2; border-radius: 50%; }
.detail-not-found h1 { margin: 18px 0 0; font: 800 clamp(1.8rem,4vw,2.5rem)/1.2 var(--display); letter-spacing: -.07em; }
.detail-not-found p { max-width: 420px; margin: 9px 0 18px; color: #778286; font-size: 12px; }
.detail-more { padding: 35px 0; color: #fff; background: var(--ink); }
.detail-more-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.detail-more .eyebrow { margin-bottom: 7px; }
.detail-more h2 { font-size: clamp(1.5rem,3vw,2.1rem); }

@media (max-width: 900px) {
  .listing-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .listing-filters .listing-search { grid-column: 1 / -1; }
  .listing-filters .button { grid-column: 1 / -1; }
  .filter-reset { grid-column: 1 / -1; }
  .detail-layout { grid-template-columns: minmax(0,1.1fr) minmax(290px,.9fr); gap: 20px; }
  .detail-card { padding: 19px; }
}

@media (max-width: 650px) {
  .listing-hero { padding: 23px 0 38px; }
  .listing-hero .breadcrumbs { margin-bottom: 24px; }
  .listing-content { padding: 27px 0 53px; }
  .listing-filters { padding: 11px; gap: 8px; }
  .listing-filters > label { height: 43px; }
  .listing-summary { margin-top: 28px; }
  .listing-grid { grid-template-columns: 1fr; }
  .listing-grid .vehicle-image { height: 235px; }
  .listing-help-inner, .detail-more-inner { align-items: flex-start; flex-direction: column; }
  .detail-content { padding-top: 24px; padding-bottom: 48px; }
  .detail-layout { grid-template-columns: 1fr; gap: 24px; }
  .detail-photo img { aspect-ratio: 1.25; }
  .detail-card { position: static; grid-row: 1; }
  .detail-about { margin-top: 24px; }
}

@media (max-width: 380px) {
  .listing-filters { grid-template-columns: 1fr; }
  .listing-filters .listing-search, .listing-filters .button, .filter-reset { grid-column: 1; }
}