/* ABS Market - Global Mobile Responsive Fixes. Loaded site-wide via includes/header.php. Desktop (>1024px) untouched. */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, iframe, canvas { max-width: 100%; height: auto; }
table { max-width: 100%; }
.container, .container-inner, main, section, article, form { max-width: 100%; }
@media (max-width: 768px) {
  h1 { font-size: clamp(26px, 7vw, 32px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(21px, 5.6vw, 26px) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(18px, 4.8vw, 22px) !important; line-height: 1.25 !important; }
  body { font-size: 15px; }
  .auction-title, [class*="listing-title"], [class*="vehicle-title"] { font-size: clamp(20px, 5.6vw, 26px) !important; line-height: 1.2 !important; overflow-wrap: break-word; word-break: break-word; }
}
@media (max-width: 768px) {
  .lf-group select, .header-search-form, .header-search-input, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], select, textarea { min-height: 44px; font-size: 16px !important; }
  .mobile-nav a { padding: 14px 0 !important; }
  button, .btn, input[type="submit"], input[type="button"] { min-height: 44px; }
  form { max-width: 100%; }
}
@media (max-width: 768px) {
  .modal:not(.gallery-modal):not(.lightbox):not(.documents-modal-overlay), .modal-content, .modal-box, .modal-dialog { width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; max-height: 90dvh !important; overflow-y: auto !important; }
}
@media (max-width: 1024px) and (min-width: 641px) {
  .auction-grid, .results-grid, .cars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .auction-grid, .results-grid, .cars-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}
@media (max-width: 768px) {
  .comment-body, .comment-author, .mention, .comment-head { overflow-wrap: break-word; word-break: break-word; }
}
@media (max-width: 1150px) {
  .main-layout { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
  .left-column, .right-column { display: contents; }
  .gallery-card { order: 1; }
  .gallery-modal, .lightbox, .documents-modal-overlay { order: 1; }
  .bid-card { order: 2; }
  .bat-details-card { order: 3; }
  .section-tabs { order: 4; }
  .pcm-editorial-card.content-card { order: 5; }
  .content-card:not(.pcm-editorial-card) { order: 6; }
  .question-card { order: 7; }
  .sidebar-live-card.more-live-auctions { order: 8; }
  .sidebar-live-card.sidebar-marketplace-card { order: 9; }
  .gallery-card, .section-tabs, .pcm-editorial-card.content-card, .content-card,
  .bid-card, .bat-details-card, .question-card, .sidebar-live-card {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    margin-bottom: 18px;
  }
  .gallery-main, .gallery-card img, .gallery-card .gallery-main img { width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 900px) {
  .mobile-bid-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
  body:has(.mobile-bid-bar) { padding-bottom: 78px; }
  .main-layout { padding-bottom: 8px; }
}
@media (max-width: 768px) {
  .footer-column img, .site-footer img { max-width: 140px; height: auto; }
  .footer-bottom, [class*="payment-badges"], [class*="app-links"] { flex-wrap: wrap !important; justify-content: center !important; }
}
@media (max-width: 720px) {
  .lf-group { min-width: 0 !important; width: 100%; }
  .lf-group select { width: 100%; }
  .listing-filter-bar { gap: 12px !important; padding: 14px !important; }
}
/* ---------- 11. Homepage hero: hide intro title/text above Live Now on mobile ---------- */
@media (max-width: 850px) {
  .hero { display: none !important; }
}

/* ---------- 12. Homepage carousel: fix gap between image and title/info ----------
   Root cause: .slider-image-link kept a desktop min-height:520px with no mobile
   override, while .slider-image itself was correctly reduced to 310px, leaving a
   large empty black gap between the photo and the title/badges below it. ---------- */
@media (max-width: 850px) {
  .slider-image-link { min-height: 0 !important; height: auto !important; }
  .slider-slide { min-height: 0 !important; align-content: start !important; }
  .slider-info { justify-content: flex-start !important; padding: 18px !important; }
}

/* ---------- 13. Price / time-remaining: always side by side on mobile, never stacked ----------
   Two homepage components (.slider-bid-box and .featured-bid-combined) had existing
   rules that collapsed Current Bid / Time Remaining into a single stacked column below
   850px / 520px. We force 2 columns back and shrink the font just enough that both
   values fit on one line without wrapping. ---------- */
@media (max-width: 850px) {
  .slider-bid-box {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 14px 0 !important;
  }
  .slider-bid-box strong {
    font-size: 17px !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .featured-bid-combined {
    grid-template-columns: 1fr 1fr !important;
  }
  .featured-bid-combined > div {
    padding: 10px 12px !important;
  }
  .featured-bid-combined strong {
    font-size: 18px !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .featured-bid-combined .auction-countdown {
    font-size: 17px !important;
  }
}
@media (max-width: 400px) {
  .slider-bid-box strong { font-size: 15px !important; }
  .featured-bid-combined strong { font-size: 16px !important; }
  .featured-bid-combined .auction-countdown { font-size: 15px !important; }
}
/* ---------- 14. Auctions listing count pill: hidden on mobile ---------- */
@media (max-width: 850px) {
  .auction-count { display: none !important; }
}

/* ---------- 15. Collapsible mobile filters (Show Filters toggle) ----------
   Applies to any page with .listing-filter-bar (auctions.php, results.php,
   unsold.php). The 5 dropdowns (Sort/Make/Model/Location/Era) are hidden by
   default on mobile behind a single toggle row, like pcarmarket.com. Toggle
   button is injected by JS (see mobile-filters.js). ---------- */
.mobile-filters-toggle { display: none; }
@media (max-width: 850px) {
  .mobile-filters-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #dddddd;
    padding: 14px 16px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #111111;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
  }
  .mobile-filters-toggle .mf-arrow {
    display: inline-flex;
    transition: transform 0.2s ease;
    font-size: 12px;
  }
  .mobile-filters-toggle.is-open .mf-arrow { transform: rotate(180deg); }
  .listing-filter-bar { display: none !important; }
  .listing-filter-bar.filters-open { display: flex !important; }
}
/* Desktop logo resize for new wide wordmark (5.16:1 ratio) - bigger, centered on nav */
@media (min-width: 1151px) {
  .site-logo { width: 240px !important; max-width: 240px !important; height: auto !important; }
  .site-header { align-items: center !important; }
}


/* Fix logo wrap overflow (new wide logo) + normalize header gap to match nav rhythm */
@media (min-width: 1151px) {
  .center-logo.center-logo, .center-logo-wrap.center-logo-wrap { width: 240px !important; max-width: 240px !important; }
  .site-header.site-header { gap: 28px !important; }
}