/* AutoShot inventory template */
.page-content {width: min(1400px, calc(100% - 32px)); margin: 0 auto; padding: clamp(32px, 5vw, 58px) 0;}
.inv-list {display: block; width: 100%; margin: 0;}
.inv-list > .ar12 {width: 100%; display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 24px; margin: 0; padding: 0; font-size: 16px !important;}
.inv-list > .ar12 > br, .sticky-anchor, #ar_top {display: none;}

/* Modern SRP demo shell: fixed-width filters beside the scrolling card grid. */
.inventory-wrap {width: min(1400px, calc(100% - 32px)); display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 24px; margin: 0 auto; padding: clamp(32px, 5vw, 58px) 0;}
.inventory-wrap .sidebar {position: static; min-width: 0; align-self: stretch;}
.inventory-wrap .sidebar .inv-search-all {position: sticky; top: 98px; max-height: calc(100vh - 116px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;}
.srp-shell {min-width: 0;}
.srp-shell .section-heading {display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px;}
.srp-shell .section-heading h2 {margin: 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.1;}
.srp-shell .section-heading p {margin: 7px 0 0; color: var(--muted);}
.inventory-template {min-width: 0;}

/* Search and filters */
.inv-search-all {position: sticky; top: 98px; grid-column: 1; width: 100%; margin: 0; padding: 18px; border: 1px solid var(--line, #d8dde3); border-radius: var(--radius, 8px); background: var(--surface, #fff); box-shadow: var(--shadow); color: var(--ink, #101216); font-size: 16px;}
.inv-search-all form {margin: 0 !important;}
.search-header {display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; margin: -2px 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--soft-line, #e4e9ed);}
.search-header h3 {margin: 0; color: var(--ink); font-size: 21px; font-weight: 850; letter-spacing: -.015em; line-height: 1.15;}
.search-header p {grid-column: 1 / -1; margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45;}
.search-count {display: inline-flex; min-height: 28px; align-items: center; justify-content: center; padding: 4px 9px; border: 1px solid color-mix(in srgb, var(--red) 35%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--red) 10%, var(--surface)); color: var(--ink); font-size: 11px; font-weight: 850; line-height: 1; white-space: nowrap;}
.inv-div-search {display: grid !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; gap: 12px; width: 100%;}
.inv-div-search > div {min-width: 0; margin: 0;}
.inv-div-search > div[style*="clear"] {display: none !important;}
.inv-div-invkey {position: relative;}
.inv-div-invkey p {display: none;}
.inv-div-search label {display: block; margin: 0 0 6px; color: var(--label, #374250); font-size: 12px; font-weight: 800; letter-spacing: .055em; line-height: 1.2; text-transform: uppercase;}
.inv-div-search select, .inv-select-fullwidth, .inv-select-halfwidth, .inv-field-invkey {width: 100% !important; min-width: 0; height: 40px; margin: 0 !important; padding: 0 11px; border: 1px solid var(--line, #bcc6d0); border-radius: 6px; background: var(--field, #fff); color: var(--ink, #101216); font: inherit; font-size: 13px;}
.inv-div-search select:hover, .inv-field-invkey:hover {border-color: #7e8a97;}
.inv-submit {width: 100%; min-width: 120px; height: 46px; margin: 0; padding: 0 18px; border: 1px solid var(--red, #d71920); border-radius: 6px; background: var(--red, #d71920); color: var(--white, #fff); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;}
.inv-submit:hover {border-color: var(--red-dark, #a90f15); background: var(--red-dark, #a90f15);}
#dvLoading {display: none; min-height: 3px; margin-top: 14px; border-radius: 3px; background: var(--red, #d71920);}

/* Results grid */
.inv-list-container {display: grid !important; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); align-items: stretch; gap: 20px; min-width: 0; width: 100%; color: var(--txt-white, var(--ink, #101216)); font-size: 16px;}
.inventory-wrap .inv-list-container {grid-column: 2;}
.grid--1 .inv-list-container {grid-column: 1 / -1;}
.inv-list-container > br, .inv-container > br {display: none;}
.inv-list-container > .invtablein, .inv-list-container > table {grid-column: 1 / -1;}
.inv-list-results {padding: 2px 0 6px; color: var(--muted, #65707f); font-size: 14px !important; text-align: left !important;}
.inv-container {display: grid; grid-template-areas: "photo" "title" "price"; grid-template-rows: auto auto 1fr; min-width: 0; height: 100%; overflow: hidden; border: 1px solid var(--line, #d8dde3); border-radius: var(--radius, 8px); background: var(--surface, #fff); box-shadow: var(--shadow);}
.inv-container .section.group, .inv-container .section.group:first-child, .inv-container .section.group:nth-of-type(2), .ar_picspecs-container {display: contents;}
.ar_col {float: none !important; width: auto !important; margin: 0 !important;}

/* Vehicle image and title */
.ar_thumb {position: relative; grid-area: photo; width: 100%; max-width: none; min-height: 0; overflow: hidden; aspect-ratio: 4 / 3; background: #e2e6ea;}
.ar_thumb > a {display: block; width: 100%; height: 100%;}
.ar_thumb img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .2s ease;}
.ar_thumb:hover img {transform: scale(1.025);}
.ar_new, .ar_piccnt {position: absolute; left: 10px; z-index: 1; padding: 5px 8px; border-radius: 4px; color: var(--white, #fff); font-size: 11px; font-weight: 850; letter-spacing: .04em;}
.ar_new {top: 10px; background: var(--black, #050608); text-transform: uppercase;}
.ar_piccnt {bottom: 10px; background: rgba(5, 6, 8, .78);}
.ar_makemodel-container {grid-area: title; min-width: 0; padding: 15px 16px; border-bottom: 1px solid #e8ecf0;}
.ar_makemodel {white-space: normal;}
.ar_makemodel a {display: -webkit-box; min-height: 42px; overflow: hidden; color: var(--txt-white, var(--ink, #101216)); font-size: 17px; font-weight: 850; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.ar_makemodel a:hover {color: var(--red-dark, #a90f15); text-decoration: underline; text-underline-offset: 3px;}
.ar_seldisplay-container, .ar_seldisplay, .ar_vehspecs, .ar_confidence-container {display: none;}

/* Pricing and actions */
.ar_right-container {display: flex; grid-area: price; flex-direction: column; justify-content: flex-end; gap: 14px; min-width: 0; padding: 16px; background: #fafbfc;}
.ar_pricing {display: grid; gap: 6px; margin: 0;}
.vpricing-sub, .vpricing-full {display: grid; gap: 6px;}
.vpricing-msrp, .vpricing-final, .vpricing-docfee, .vpricing-total {display: flex; align-items: baseline; justify-content: space-between; gap: 10px;}
.vpricing-msg {color: var(--muted, #65707f); font-size: 11px; font-weight: 800; letter-spacing: .03em; line-height: 1.25; text-transform: uppercase;}
.vpricing-price {color: var(--txt-white, var(--ink, #101216)); font-size: 13px; font-weight: 850; line-height: 1.1;}
.vpricing-msrp .vpricing-price {color: var(--muted, #65707f); text-decoration: line-through;}
.vpricing-final .vpricing-price {font-size: 24px;}
.vpricing-docfee {padding-top: 6px; border-top: 1px solid #e4e9ed;}
.vpricing-total {padding-top: 7px; border-top: 1px solid #d5dce2;}
.vpricing-total .vpricing-msg, .vpricing-total .vpricing-price {color: var(--red-dark, #a90f15);}
.vpricing-call {display: block; padding: 4px 0;}
.vpricing-call .vpricing-msg {display: block; color: var(--txt-white, var(--ink, #101216)); font-size: 21px; font-weight: 900; letter-spacing: 0; text-align: center;}
.vpricing-note {display: block; color: var(--muted, #65707f); font-size: 11px; line-height: 1.4;}
.ar_msgs {display: grid; grid-template-columns: 1fr; gap: 8px;}
.ar_msgs a {display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 12px; border: 1px solid var(--line, #d8dde3); border-radius: 6px; background: var(--surface, #fff); color: var(--ink, #101216); font-size: 13px; font-weight: 800; line-height: 1.25; text-align: center;}
.ar_msgs a:first-child {display: inline-flex;}
.ar_msgs a:nth-child(2) {border-color: var(--red, #d71920); background: var(--red, #d71920); color: var(--white, #fff);}
.ar_msgs a:nth-child(2):hover {border-color: var(--red-dark, #a90f15); background: var(--red-dark, #a90f15);}
.ar_msgs a:nth-child(n+3) {display: none;}

/* Pagination */
.invtablein {width: 100%; border-collapse: collapse;}
.invtablein td {white-space: normal !important;}
.ar_navthis, .ar_navbtnl, .ar_navbtnr {float: none; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; margin: 4px 5px 4px 0; padding: 0 10px; border: 1px solid var(--line, #d8dde3); border-radius: 6px; background: var(--surface, #fff); color: var(--ink, #101216); font-size: 14px; font-weight: 800;}
.ar_navthis {border-color: var(--red, #d71920); background: var(--red, #d71920); color: var(--white, #fff);}

@media (max-width: 900px) {
  .inventory-wrap {grid-template-columns: 1fr;}
  .inventory-wrap .sidebar {position: static; align-self: auto;}
  .inventory-wrap .sidebar .inv-search-all {position: static; max-height: none; overflow: visible; scrollbar-gutter: auto;}
  .inv-list > .ar12 {grid-template-columns: 1fr;}
  .inv-search-all {position: static; grid-column: 1;}
  .inv-list-container {grid-column: 1;}
}

@media (max-width: 760px) {
  .inventory-wrap .sidebar {display: none;}
  .inventory-wrap.filters-open .sidebar {display: block;}
  .inventory-wrap.filters-open .srp-shell {display: block;}
  .page-content {padding: 24px 0 40px;}
  .inv-search-all {padding: 14px;}
  .inv-div-search {grid-template-columns: 1fr;}
  .inv-div-search select, .inv-select-fullwidth, .inv-select-halfwidth, .inv-field-invkey {height: 46px; padding: 0 12px; font-size: 16px;}
  .inv-submit {width: 100%;}
  .inv-list-container {grid-template-columns: 1fr; gap: 16px;}
  .inv-list-results {padding-bottom: 2px;}
}

@media (prefers-reduced-motion: reduce) {
  .ar_thumb img {transition: none;}
  .ar_thumb:hover img {transform: none;}
}
