/* Keep a long auction gallery inside its grid column instead of widening the page. */
.detail-page .container,
.detail-layout,
.detail-layout > *,
.detail-layout > div,
.vehicle-gallery,
.gallery-stage,
.gallery-thumbs {
  min-width: 0;
  max-width: 100%;
}

.vehicle-gallery,
.gallery-stage,
.gallery-thumbs {
  width: 100%;
}

.gallery-thumbs {
  overscroll-behavior-inline: contain;
}

.mobile-menu-toggle,
.mobile-menu-panel {
  display: none;
}

.mobile-menu-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #11161d;
  color: #fff;
  cursor: pointer;
  place-items: center;
}

.mobile-menu-toggle span,
.mobile-menu-toggle::before,
.mobile-menu-toggle::after {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transition: transform .2s ease, opacity .2s ease;
}

.mobile-menu-toggle span {
  display: block;
}

.mobile-menu-toggle[aria-expanded="true"] span {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"]::before {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"]::after {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu-panel[hidden] {
  display: none;
}

.offer-filter-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(125px, .7fr)) auto;
  gap: 12px;
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(16, 20, 27, .82);
}

.offer-filter-field {
  display: grid;
  gap: 6px;
}

.offer-filter-field span {
  color: #7f8793;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.offer-filter-field input,
.offer-filter-field select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #303741;
  border-radius: 10px;
  outline: none;
  background: #090d12;
  color: #fff;
}

.offer-filter-field input:focus,
.offer-filter-field select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(216, 171, 75, .12);
}

.offer-filter-reset {
  align-self: end;
  min-height: 44px;
  white-space: nowrap;
}

.offer-filter-summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin: 0 0 22px;
  color: #8e96a1;
  font-size: 12px;
}

.offer-filter-summary b {
  color: #e5e8ec;
}

.offer-filter-empty {
  grid-column: 1 / -1;
}

.card.is-filtered-out {
  display: none !important;
}

@media (max-width: 1000px) {
  .offer-filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offer-filter-field:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 850px) {
  .header .nav {
    min-height: 70px;
  }

  .header .brand {
    min-width: 0;
  }

  .header .brand strong {
    font-size: 13px;
  }

  .header .brand small {
    font-size: 8px;
  }

  .header .phone {
    display: none;
  }

  .header .market-trigger {
    order: 2;
  }

  .mobile-menu-toggle {
    display: grid;
    flex: 0 0 44px;
    order: 3;
  }

  .mobile-menu-panel {
    position: fixed;
    inset: 70px 0 0;
    height: calc(100dvh - 70px);
    z-index: 100;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(7, 9, 13, .98);
    backdrop-filter: blur(18px);
  }

  .mobile-menu-panel nav {
    display: grid;
    gap: 8px;
    width: min(520px, 100%);
    margin: 0 auto;
  }

  .mobile-menu-panel nav a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 54px;
    padding: 12px 14px;
    border: 1px solid #262d36;
    border-radius: 12px;
    background: #10151c;
    color: #e4e7eb;
    font-weight: 750;
  }

  .mobile-menu-panel nav a::after {
    color: var(--gold);
    content: "→";
  }

  .mobile-menu-panel .mobile-select-cta {
    width: min(520px, 100%);
    margin: 14px auto 0;
  }

  .mobile-menu-panel .mobile-select-cta .btn {
    width: 100%;
  }

  .mobile-menu-open {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
}

@media (max-width: 600px) {
  .header .nav {
    gap: 10px;
  }

  .header .brand img {
    width: 42px;
    height: 42px;
  }

  .header .market-trigger {
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }

  .header .market-trigger b {
    display: none;
  }

  .offer-filter-panel {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .offer-filter-field:first-child {
    grid-column: auto;
  }

  .offer-filter-reset {
    width: 100%;
  }

  .offer-filter-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .detail-layout > div,
  .vehicle-gallery,
  .gallery-stage,
  .gallery-thumbs {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}