/* =========================================================================
   JustReused shared browse final layer.
   Loaded after jr-browse.css so category browse pages have one clear final
   source for mobile rails, subcategory chips, filter tiles, toolbars, and cards.
   ========================================================================= */

@media (max-width: 1024px) {
  .jr-browse-page .jr-browse-shell {
    display: block !important;
    padding: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .jr-browse-page .jr-browse-catnav {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    width: 100% !important;
    height: auto !important;
    padding: 12px 12px 14px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--jr-border) !important;
    background: var(--jr-surface-bg) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
  }

  .jr-browse-page .jr-browse-catnav::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--jr-brand), rgba(243, 152, 26, .2), transparent);
    pointer-events: none;
  }

  .jr-browse-page .jr-browse-catnav__list {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    min-width: max-content !important;
    padding-bottom: 12px !important;
  }

  .jr-browse-page .jr-browse-catnav__btn {
    flex: 0 0 86px !important;
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    min-height: 92px !important;
    padding: 8px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    border-radius: 14px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--jr-text-muted) !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    scroll-snap-align: start;
  }

  .jr-browse-page .jr-browse-catnav__btn i {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 18px !important;
    border: 1px solid var(--jr-border) !important;
    background: #1b1f20 !important;
    color: #d3d8da !important;
    font-size: 22px !important;
  }

  .jr-browse-page .jr-browse-catnav__btn span {
    width: 100% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .jr-browse-page .jr-browse-catnav__btn.is-active {
    color: var(--jr-brand) !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }

  .jr-browse-page .jr-browse-catnav__btn.is-active i {
    color: var(--jr-brand) !important;
    border-color: var(--jr-brand) !important;
    box-shadow: 0 0 0 2px rgba(243, 152, 26, .28) !important;
  }

  .jr-browse-page .jr-browse-catnav__subs,
  .jr-browse-page .jr-browse-catnav__safe,
  .jr-browse-page .jr-browse-catnav__caret,
  .jr-browse-page .jr-browse-catnav__count {
    display: none !important;
  }

  .jr-browse-page .jr-browse-main {
    padding: 0 14px 34px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

.jr-browse-page .jr-fh-chip-row:not(.jr-fh-chip-row--props) {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 10px !important;
  padding: 2px 2px 12px !important;
  margin-bottom: 12px !important;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.jr-browse-page .jr-fh-chip-row:not(.jr-fh-chip-row--props)::-webkit-scrollbar {
  display: none;
}

.jr-browse-page .jr-fh-chip-row:not(.jr-fh-chip-row--props)::after {
  content: "";
  flex: 0 0 1px;
}

.jr-browse-page .jr-fh-chip:not(.jr-fh-chip--student) {
  min-width: 110px !important;
  max-width: 150px !important;
  min-height: 58px !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  justify-content: center !important;
  gap: 9px !important;
  scroll-snap-align: start;
}

.jr-browse-page .jr-fh-chip i {
  font-size: 18px !important;
}

.jr-browse-page .jr-fh-chip.is-active:not(.jr-fh-chip--student) {
  background: linear-gradient(180deg, #ffad21, #ff9808) !important;
  border-color: #ff9808 !important;
  color: #101010 !important;
}

.jr-browse-page .jr-fh-chip.is-active:not(.jr-fh-chip--student) i {
  color: #101010 !important;
}

.jr-browse-page .jr-fh-filter-tile {
  grid-template-columns: 24px minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.jr-browse-page .jr-fh-filter-tile__copy {
  min-width: 0 !important;
  overflow: hidden !important;
}

.jr-browse-page .jr-fh-filter-tile__copy small,
.jr-browse-page .jr-fh-filter-tile__copy strong {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 760px) {
  .jr-browse-page .jr-fh-shell {
    padding: 14px 12px !important;
    border-radius: 16px !important;
    margin-top: 18px !important;
  }

  .jr-browse-page .jr-fh-step-label {
    font-size: 17px !important;
    line-height: 1.25 !important;
    margin: 0 0 12px !important;
  }

  .jr-browse-page .jr-fh-chip-row:not(.jr-fh-chip-row--props) {
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-bottom: 2px solid rgba(243, 152, 26, .35) !important;
  }

  .jr-browse-page .jr-fh-chip:not(.jr-fh-chip--student) {
    flex: 0 0 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    min-height: 78px !important;
    flex-direction: column !important;
    padding: 8px 6px !important;
    font-size: 11px !important;
    line-height: 1.08 !important;
  }

  .jr-browse-page .jr-fh-chip span {
    white-space: normal !important;
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }

  .jr-browse-page .jr-fh-chip i {
    font-size: 22px !important;
  }

  .jr-browse-page .jr-fh-key-filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .jr-browse-page .jr-fh-filter-tile {
    min-height: 62px !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
  }

  .jr-browse-page .jr-fh-filter-tile strong {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  .jr-browse-page .jr-fh-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .jr-browse-page .jr-fh-more,
  .jr-browse-page .jr-fh-show {
    min-height: 54px !important;
    width: 100% !important;
    border-radius: 10px !important;
  }

  .jr-browse-page .jr-fh-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .jr-browse-page .jr-property-channel,
  .jr-browse-page .jr-fh-savebar,
  .jr-browse-page .jr-fh-toolbar .jr-fh-listing-tabs {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  .jr-browse-page .jr-property-channel::-webkit-scrollbar,
  .jr-browse-page .jr-fh-savebar::-webkit-scrollbar,
  .jr-browse-page .jr-fh-toolbar .jr-fh-listing-tabs::-webkit-scrollbar {
    display: none;
  }

  .jr-browse-page .af-topbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px 0 !important;
  }

  .jr-browse-page .af-topbar-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 0 !important;
    width: 100% !important;
  }

  .jr-browse-page .af-view-toggle,
  .jr-browse-page .af-sort {
    width: 100% !important;
    min-width: 0 !important;
  }

  .jr-browse-page .af-view-toggle {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .jr-browse-page .af-view-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .jr-browse-page .af-sort {
    justify-content: space-between !important;
  }

  .jr-browse-page .af-sort select {
    max-width: 190px !important;
  }

  .jr-browse-page .jr-listing-card__media,
  .jr-browse-page .jr-listing-card__media > img,
  .jr-browse-page .jr-listing-card__media .jr-card-gallery,
  .jr-browse-page .jr-listing-card__media .jr-card-gallery__track,
  .jr-browse-page .jr-listing-card__media .jr-card-gallery__slide,
  .jr-browse-page .jr-listing-card__media .jr-card-gallery__slide img {
    height: 210px !important;
    min-height: 210px !important;
  }
}

/* Property browse has its own inline shell; keep its mobile layout under the
   same final layer so later browse CSS cannot squeeze it into broken rows. */
@media (max-width: 760px) {
  .jr-browse-page .jr-property-zip {
    overflow: hidden !important;
  }

  .jr-browse-page .jr-pz-row {
    padding: 14px 10px 16px !important;
  }

  .jr-browse-page .jr-pz-mobile-intent-help {
    display: block !important;
    margin: 0 0 12px !important;
    padding: 11px 12px !important;
    border-radius: 12px !important;
  }

  .jr-browse-page .jr-pz-intents {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .jr-browse-page .jr-pz-intent {
    width: 100% !important;
    min-width: 0 !important;
    height: 82px !important;
    padding: 8px 5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  .jr-browse-page .jr-pz-intent i {
    font-size: 23px !important;
  }

  .jr-browse-page .jr-pz-intent span {
    max-width: 100% !important;
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }

  .jr-browse-page .jr-pz-filters,
  .jr-browse-page .jr-pz-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .jr-browse-page .jr-pz-filter,
  .jr-browse-page .jr-pz-more,
  .jr-browse-page .jr-pz-show {
    width: 100% !important;
    min-width: 0 !important;
  }

  .jr-browse-page .jr-pz-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .jr-browse-page .jr-pz-status,
  .jr-browse-page .jr-pz-save,
  .jr-browse-page .jr-pz-right,
  .jr-browse-page .jr-pz-offers,
  .jr-browse-page .jr-pz-view,
  .jr-browse-page .jr-pz-sort-wrap {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .jr-browse-page .jr-pz-status,
  .jr-browse-page .jr-pz-offers,
  .jr-browse-page .jr-pz-view {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .jr-browse-page .jr-pz-status {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .jr-browse-page .jr-pz-save {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .jr-browse-page .jr-pz-status button,
  .jr-browse-page .jr-pz-offers button,
  .jr-browse-page .jr-pz-view button,
  .jr-browse-page .jr-pz-save button,
  .jr-browse-page .jr-pz-save a,
  .jr-browse-page .jr-pz-sort {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .jr-browse-page .jr-pz-results-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* Final property shell cleanup: stop browser focus/active states and legacy
   mobile rules from painting random green blocks or oversizing controls. */
.jr-browse-page .jr-property-zip .jr-pz-filter,
.jr-browse-page .jr-property-zip .jr-pz-more,
.jr-browse-page .jr-property-zip .jr-pz-sort,
.jr-browse-page .jr-property-zip .jr-pz-view button,
.jr-browse-page .jr-property-zip .jr-pz-save button,
.jr-browse-page .jr-property-zip .jr-pz-save a {
  background: #08161d !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

.jr-browse-page .jr-property-zip .jr-pz-filter:focus,
.jr-browse-page .jr-property-zip .jr-pz-filter:focus-within,
.jr-browse-page .jr-property-zip .jr-pz-filter:active,
.jr-browse-page .jr-property-zip .jr-pz-more:focus,
.jr-browse-page .jr-property-zip .jr-pz-more:active {
  background: #08161d !important;
  outline: 2px solid rgba(255, 159, 18, 0.45) !important;
  outline-offset: 2px !important;
}

.jr-browse-page .jr-property-zip .jr-pz-filter i,
.jr-browse-page .jr-property-zip .jr-pz-more i {
  color: #ff9f12 !important;
}

.jr-browse-page .jr-property-zip .jr-pz-intent:not(.is-active):not(.jr-pz-intent--student),
.jr-browse-page .jr-property-zip .jr-pz-intent:not(.is-active):not(.jr-pz-intent--student):focus,
.jr-browse-page .jr-property-zip .jr-pz-intent:not(.is-active):not(.jr-pz-intent--student):active {
  background: #08161d !important;
  color: #f8fafc !important;
}

.jr-browse-page .jr-property-zip .jr-pz-intent.is-active:not(.jr-pz-intent--student) {
  background: #ff9f12 !important;
  color: #050505 !important;
}

.jr-browse-page .jr-property-zip .jr-pz-intent--student {
  background: rgba(112, 55, 176, 0.38) !important;
  color: #d9c2ff !important;
}

.jr-browse-page .jr-property-zip .jr-pz-intent--student.is-active {
  background: linear-gradient(135deg, #7c3fb8, #4f287f) !important;
  color: #ffffff !important;
}

@media (max-width: 760px) {
  .jr-browse-page .jr-property-zip {
    margin-inline: 0 !important;
    border-radius: 16px !important;
  }

  .jr-browse-page .jr-property-zip .jr-pz-section-title {
    font-size: 17px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  .jr-browse-page .jr-pz-mobile-intent-help {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .jr-browse-page .jr-pz-intents {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .jr-browse-page .jr-pz-intent {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
  }

  .jr-browse-page .jr-pz-filter {
    height: 68px !important;
    min-height: 68px !important;
    padding: 9px 12px !important;
    display: grid !important;
    grid-template-columns: 34px 1fr 22px !important;
    align-items: center !important;
    column-gap: 8px !important;
  }

  .jr-browse-page .jr-pz-filter .jr-pz-label {
    font-size: 12px !important;
    line-height: 1.1 !important;
    margin: 0 0 2px !important;
  }

  .jr-browse-page .jr-pz-filter .jr-pz-value {
    font-size: 20px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .jr-browse-page .jr-pz-more,
  .jr-browse-page .jr-pz-show {
    height: 56px !important;
    min-height: 56px !important;
  }

  .jr-browse-page .jr-pz-toolbar {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .jr-browse-page .jr-pz-status {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }

  .jr-browse-page .jr-pz-status::-webkit-scrollbar {
    display: none;
  }

  .jr-browse-page .jr-pz-status button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 74px !important;
    height: 48px !important;
    padding: 0 14px !important;
  }

  .jr-browse-page .jr-pz-save {
    grid-template-columns: 1fr !important;
  }

  .jr-browse-page .jr-pz-save button,
  .jr-browse-page .jr-pz-save a {
    height: 50px !important;
  }

  .jr-browse-page .jr-pz-offers,
  .jr-browse-page .jr-pz-view {
    height: auto !important;
    min-height: 0 !important;
  }

  .jr-browse-page .jr-pz-offers button,
  .jr-browse-page .jr-pz-view button {
    height: 46px !important;
    min-height: 46px !important;
  }

  .jr-browse-page .jr-pz-sort-wrap,
  .jr-browse-page .jr-pz-sort {
    height: 48px !important;
  }
}

/* Generic category mobile rail fix. Applies to boats, cars, aircraft, etc.
   Keep horizontal rails scrollable without widening the whole page. */
@media (max-width: 760px) {
  html,
  body,
  .page-wrapper,
  .jr-browse-page,
  .jr-browse-shell,
  .jr-browse-main,
  .af-search-root {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .jr-browse-page .jr-browse-catnav {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
  }

  .jr-browse-page .jr-browse-catnav__list {
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }

  .jr-browse-page .jr-browse-catnav__btn {
    flex: 0 0 74px !important;
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    min-height: 92px !important;
    padding: 6px 3px !important;
  }

  .jr-browse-page .jr-browse-catnav__btn > i:not(.jr-browse-catnav__caret) {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    font-size: 22px !important;
  }

  .jr-browse-page .jr-browse-catnav__btn > i.jr-browse-catnav__caret,
  .jr-browse-page .jr-browse-catnav__caret,
  .jr-browse-page .jr-browse-catnav__subs,
  .jr-browse-page .jr-browse-catnav__sub {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  .jr-browse-page .jr-fh-shell {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .jr-browse-page .jr-fh-chip-row:not(.jr-fh-chip-row--props),
  .jr-browse-page .jr-fh-chip-row--sub {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: calc(100% + 24px) !important;
    max-width: calc(100% + 24px) !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    scroll-snap-type: x proximity !important;
  }

  .jr-browse-page .jr-fh-chip-row:not(.jr-fh-chip-row--props) > .jr-fh-chip,
  .jr-browse-page .jr-fh-chip-row--sub > .jr-fh-chip {
    flex: 0 0 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    scroll-snap-align: start !important;
  }

  .jr-browse-page .jr-fh-chip-row:not(.jr-fh-chip-row--props) > .jr-fh-chip i,
  .jr-browse-page .jr-fh-chip-row--sub > .jr-fh-chip i {
    font-size: 22px !important;
  }

  /* Mobile browse/search is an active app screen; the site footer must never
     float over filters or results. Desktop and non-browse pages keep footer. */
  body:has(.jr-browse-page) .jr-site-footer,
  body:has(.jr-browse-page) footer.jr-site-footer,
  body:has(.jr-browse-page) footer {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    z-index: -1 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body:has(.jr-browse-page) .af-search-root,
  body:has(.jr-browse-page) .jr-browse-main {
    min-height: auto !important;
    padding-bottom: 36px !important;
  }
}