/*
 * ItemPrice V312 — landing page responsive market layout
 * Caps the landing market at four columns, keeps five rows per page, and aligns the visible search-card border with the Today market-card border at every two-column breakpoint.
 */

body[data-page="landing"] .v49-shell,
body.landing-v49 .v49-shell,
body.landing-v51 .v49-shell {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 14px 22px 40px !important;
  box-sizing: border-box !important;
}

body[data-page="landing"] .v49-main-layout,
body.landing-v49 .v49-main-layout,
body.landing-v51 .v49-main-layout,
body[data-page="landing"] .v49-content,
body[data-page="landing"] .v49-market-panel,
body[data-page="landing"] #landingMarketGrid,
body[data-page="landing"] #landingMarketGrid > .item-card {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/*
 * Desktop: retain the original landing proportions.
 * The notice occupies the upper-right rail, while the market panel spans underneath
 * it to the exact same right boundary. This removes the unused right-side void.
 */
@media (min-width: 1280px) {
  body[data-page="landing"] .v49-main-layout,
  body.landing-v49 .v49-main-layout,
  body.landing-v51 .v49-main-layout {
    display: grid !important;
    grid-template-columns: clamp(300px, 19vw, 330px) minmax(0, 1fr) clamp(260px, 18vw, 420px) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  body[data-page="landing"] .v49-search-rail {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 72px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body[data-page="landing"] .v49-content {
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body[data-page="landing"] .v49-hero-line {
    padding-right: clamp(280px, 20vw, 440px) !important;
  }

  body[data-page="landing"] .v143-notice-rail {
    grid-column: 3 !important;
    grid-row: 1 !important;
    z-index: 5 !important;
    align-self: start !important;
    justify-self: stretch !important;
    position: sticky !important;
    top: 72px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-top: 0 !important;
  }

  body[data-page="landing"] .v49-market-panel {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body[data-page="landing"] .v49-search-panel {
    box-sizing: border-box !important;
  }
}

/* Notebook and smaller desktop: search on the left, content and notice on the right. */
@media (min-width: 821px) and (max-width: 1279px) {
  body[data-page="landing"] .v49-main-layout,
  body.landing-v49 .v49-main-layout,
  body.landing-v51 .v49-main-layout {
    display: grid !important;
    grid-template-columns: clamp(280px, 24vw, 320px) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  body[data-page="landing"] .v49-search-rail {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    position: sticky !important;
    top: 72px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body[data-page="landing"] .v49-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
  }

  body[data-page="landing"] .v49-hero-line {
    padding-right: 0 !important;
  }

  body[data-page="landing"] .v143-notice-rail {
    grid-column: 2 !important;
    grid-row: 2 !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-top: 0 !important;
  }
}

/*
 * The column count is measured by JavaScript from the real panel width and written
 * to --landing-market-columns. It is always capped at four, so ultrawide screens
 * widen the existing four tracks instead of creating a fifth column.
 */
body[data-page="landing"] #landingMarketGrid,
body.landing-v49 #landingMarketGrid {
  display: grid !important;
  grid-template-columns: repeat(var(--landing-market-columns, 1), minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  gap: 14px !important;
  padding: 1px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

body[data-page="landing"] #landingMarketGrid > .item-card,
body.landing-v49 #landingMarketGrid > .item-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  scroll-snap-align: none !important;
}

body[data-page="landing"] #landingMarketGrid .card-main,
body[data-page="landing"] #landingMarketGrid .card-title-row,
body[data-page="landing"] #landingMarketGrid .card-title-row h2,
body[data-page="landing"] #landingMarketGrid .price-line,
body[data-page="landing"] #landingMarketGrid .sub-line {
  min-width: 0 !important;
}

body[data-page="landing"] #landingMarketGrid .card-title-row h2 {
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

body[data-page="landing"] #landingMarketGrid .card-meta,
body[data-page="landing"] #landingMarketGrid .badge-row,
body[data-page="landing"] #landingMarketGrid .sub-line {
  flex-wrap: wrap !important;
}

body[data-page="landing"] #landingMarketGrid .price-line b {
  white-space: nowrap !important;
}

body[data-page="landing"] .v49-hero-copy,
body[data-page="landing"] .v49-hero-copy h1,
body[data-page="landing"] .v151-market-head,
body[data-page="landing"] .v151-market-controls,
body[data-page="landing"] .v151-market-meta {
  min-width: 0 !important;
}

body[data-page="landing"] .v49-hero-copy h1 {
  max-width: 100% !important;
  font-size: clamp(30px, 3.25vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -1.7px !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
}

/* Stack the market toolbar before it starts compressing its labels. */
@media (max-width: 1100px) {
  body[data-page="landing"] .v151-market-head {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "title" "controls" "meta" !important;
    align-items: stretch !important;
  }

  body[data-page="landing"] .v151-market-controls,
  body[data-page="landing"] .v151-market-meta {
    justify-content: flex-start !important;
  }
}


/*
 * V311 equal-bottom fix.
 * The legacy rail used max-height:calc(100vh - 82px) and clipped the tall form.
 * A min-height on the form therefore changed its layout box but not its visible
 * lower border.  Above the mobile breakpoint the rail must be an unclipped grid
 * item; the form itself receives the exact aligned height and owns the scrollbar.
 */
@media (min-width: 821px) {
  body[data-page="landing"] .v49-search-rail,
  body.landing-v49 .v49-search-rail,
  body.landing-v51 .v49-search-rail {
    position: relative !important;
    top: auto !important;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    scrollbar-gutter: auto !important;
  }

  body[data-page="landing"] #landingSearchForm,
  body.landing-v49 #landingSearchForm,
  body.landing-v51 #landingSearchForm {
    box-sizing: border-box !important;
    height: var(--landing-search-aligned-height, auto) !important;
    min-height: var(--landing-search-aligned-height, 0) !important;
    max-height: var(--landing-search-aligned-height, none) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
  }

  body[data-page="landing"] #landingSearchForm::-webkit-scrollbar,
  body.landing-v49 #landingSearchForm::-webkit-scrollbar,
  body.landing-v51 #landingSearchForm::-webkit-scrollbar {
    width: 8px;
  }

  body[data-page="landing"] #landingSearchForm::-webkit-scrollbar-thumb,
  body.landing-v49 #landingSearchForm::-webkit-scrollbar-thumb,
  body.landing-v51 #landingSearchForm::-webkit-scrollbar-thumb {
    background: rgba(216,255,31,.28);
    border-radius: 99px;
  }

  body[data-page="landing"] #landingSearchForm::-webkit-scrollbar-track,
  body.landing-v49 #landingSearchForm::-webkit-scrollbar-track,
  body.landing-v51 #landingSearchForm::-webkit-scrollbar-track {
    background: rgba(255,255,255,.04);
    border-radius: 99px;
  }
}

/* Mobile: one natural-width card per row; no horizontal card carousel. */
@media (max-width: 820px) {
  body[data-page="landing"] .v49-shell,
  body.landing-v49 .v49-shell,
  body.landing-v51 .v49-shell {
    padding: 10px 12px 32px !important;
  }

  body[data-page="landing"] .v49-main-layout,
  body.landing-v49 .v49-main-layout,
  body.landing-v51 .v49-main-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body[data-page="landing"] .v49-search-rail,
  body[data-page="landing"] .v49-content,
  body[data-page="landing"] .v143-notice-rail {
    grid-column: 1 !important;
    grid-row: auto !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-top: 0 !important;
  }

  body[data-page="landing"] #landingMarketGrid,
  body.landing-v49 #landingMarketGrid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 1px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    touch-action: pan-y !important;
  }

  body[data-page="landing"] .v49-market-panel {
    padding: 14px !important;
    border-radius: 17px !important;
  }

  body[data-page="landing"] .v49-hero-line {
    min-height: 0 !important;
    padding: 4px 2px 10px !important;
  }

  body[data-page="landing"] .v49-hero-copy h1 {
    font-size: clamp(28px, 8.3vw, 38px) !important;
    letter-spacing: -1.1px !important;
  }

  body[data-page="landing"] .v151-market-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    gap: 7px !important;
    width: 100% !important;
  }

  body[data-page="landing"] .v151-market-toggle {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-width: 0 !important;
  }

  body[data-page="landing"] .v151-market-toggle button {
    min-width: 0 !important;
    padding-inline: 6px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 480px) {
  body[data-page="landing"] #landingMarketGrid > .item-card {
    grid-template-columns: 60px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 10px !important;
  }

  body[data-page="landing"] #landingMarketGrid .card-icon-stack {
    width: 60px !important;
    min-width: 60px !important;
  }

  body[data-page="landing"] #landingMarketGrid .card-title-row h2 {
    font-size: 14px !important;
  }

  body[data-page="landing"] #landingMarketGrid .price-line b {
    font-size: 17px !important;
  }
}


/*
 * V312 first-paint reservation.
 * The static loading card is one short row, while the completed market page is
 * always five rows. Reserve 5 × 154px + 4 × 14px gaps, and the 23px page-dot lane,
 * so neither column folds and jumps while the API response is pending.
 */
@media (min-width: 821px) {
  body[data-page="landing"] #landingMarketGrid.is-content-refreshing,
  body.landing-v49 #landingMarketGrid.is-content-refreshing,
  body.landing-v51 #landingMarketGrid.is-content-refreshing {
    min-height: 826px !important;
    grid-auto-rows: auto !important;
    align-content: start !important;
    margin-bottom: 23px !important;
  }

  body[data-page="landing"] #landingMarketGrid.is-content-refreshing > .content-fallback-card,
  body.landing-v49 #landingMarketGrid.is-content-refreshing > .content-fallback-card,
  body.landing-v51 #landingMarketGrid.is-content-refreshing > .content-fallback-card {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }
}