/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .detail { grid-template-columns: 1fr; }
  .landing { grid-template-columns: 1fr; gap: 1.5rem; margin-top: .5rem; }
  .landing .hero h1 { max-width: 24ch; }
  .stores-form { grid-template-columns: minmax(0, 1fr) auto; }
  .stores-form .btn-locate { grid-column: 1 / -1; justify-self: start; }
  .warehouse-region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-inner { flex-wrap: wrap; row-gap: .5rem; padding-top: .6rem; padding-bottom: .6rem; }
  .header-search { order: 1; flex: 1 1 100%; max-width: none; margin: 0; }
  .header-search select, .header-search input { font-size: 1rem; }
  .lookup-outcome, :target { scroll-margin-top: 7.5rem; }
  .nav { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; justify-content: flex-end; }
  .site-header { transition: transform .2s ease, visibility 0s; }
  .site-header.is-scrolled-away { transform: translateY(calc(-100% - 2px)); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
}
@media (max-width: 600px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  main.container { padding-top: 1rem; }
  .header-inner { gap: .45rem; padding: .45rem .7rem; }
  .header-search .header-search-scope { max-width: 40%; }
  .brand { flex: 0 0 auto; min-width: 0; min-height: 44px; white-space: nowrap; font-size: .9rem; gap: .35rem; }
  .brand-mark { width: 24px; height: 24px; border-radius: 6px; }
  .nav { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; justify-content: flex-end; margin-left: auto; gap: .35rem; }
  .nav a { flex: 0 0 auto; font-size: .82rem; }
  .nav > a, .nav > details > summary { min-height: 44px; }
  .nav .nav-warehouse { flex: 0 1 auto; min-width: 0; max-width: 7.5rem; font-size: .76rem; padding: .24rem .4rem; }
  .nav-warehouse-noun { display: none; }
  .warehouse-menu { min-width: 0; position: static; }
  .warehouse-menu-panel { left: .7rem; right: .7rem; top: calc(100% + .35rem); min-width: 0; max-width: none; }
  .hero { padding: .7rem 0 .2rem; }
  .hero h1 { margin-bottom: .65rem; }
  .search-form { flex-direction: column; align-items: stretch; }
  /* in a column layout flex-basis becomes height — pin so inputs don't balloon */
  .field, .field-grow { flex: 0 0 auto; }
  .search-panel { --panel-pad: 1.1rem; }
  .landing { gap: 1.25rem; margin-bottom: 2rem; }
  .landing .search-panel { --panel-pad: 1.1rem; }
  .warehouse-search-form { padding: .6rem; }
  .warehouse-search-form .btn { width: auto; padding-left: .9rem; padding-right: .9rem; }
  .warehouse-search-panel > .geo-banner { width: 100%; }
  /* the change link takes a 44px tap target here, so let the strip size to it */
  .panel-store { padding-top: .35rem; padding-bottom: .35rem; }
  .panel-store .change-link { padding: 0 .3rem; }
  .btn, .btn-locate { width: 100%; }
  .deals-head { flex-direction: column; align-items: flex-start; }
  .compare-head { flex-direction: column; align-items: flex-start; }
  .nearby-radius-form { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .nearest-availability { grid-template-columns: 1fr; align-items: flex-start; }
  .nearest-availability-meta, .nearest-availability-actions { justify-content: flex-start; }
  .nearby-table-foot { align-items: flex-start; flex-direction: column; }
  .footer-links { gap: .15rem var(--space-4); }
  .footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .pager { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .pager > .pager-btn:first-child { grid-column: 1; grid-row: 1; }
  .pager > .pager-btn:last-child { grid-column: 3; grid-row: 1; }
  .pager > .pager-btn { width: 100%; }
  .pager-pages { grid-column: 2; grid-row: 1; flex-wrap: nowrap; }
  .pager-numbered .pager-pages { display: none; }
  .pager-mobile-status { display: block; grid-column: 2; grid-row: 1; }
  .policy-panel, .contact-panel { padding: 1.1rem; }
  .contact-form .btn { width: 100%; }
  .back-link, .change-link { min-height: 44px; display: inline-flex; align-items: center; }
  /* Keep the product image prominent without wrapping the whole mobile hero in
     multiple nested cards. */
  .detail { gap: 1rem; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .detail-media img, .detail-noimg { height: 210px; border: 0; border-radius: var(--radius); }
  .detail-main { padding: 0 .1rem; }
  .detail-title { font-size: 1.75rem; }
  .price-xl { font-size: 2.25rem; }
  .detail-shop-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-shop-actions-no-recheck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-shop-action { min-height: 44px; justify-content: center; }
  .recheck-form .detail-shop-action { width: 100%; }
  .share-status { grid-column: 1 / -1; }
  .deal-verdict { align-items: center; }
  .compare-panel, .chart-panel, .desc-panel, .availability-panel, .item-lookup-panel { padding: 1rem; }
  .availability-head { align-items: flex-start; }
  .availability-legend { align-items: flex-start; flex-direction: column; gap: .3rem; }
  .card-online { min-height: 44px; }
}

@media (max-width: 480px) {
  /* Keep the three history stats side by side; stacking them turned three
     numbers into a screen-and-a-half of scrolling on a phone. */
  .chart-legend { gap: .4rem; }
  .chart-legend > span { flex-direction: column; align-items: flex-start; gap: .05rem; padding: .5rem .55rem; min-width: 0; flex-wrap: nowrap; }
  /* The label's full-basis row rule is for the wide layout; in this stacked one
     it made the cell wrap into a second column and pushed the price outside the
     panel, so the numbers were clipped. Let each stat size to its own column. */
  .chart-legend .history-label { flex-basis: auto; }
  .chart-legend strong, .chart-legend > span .muted { max-width: 100%; overflow-wrap: anywhere; }
  .chart-legend strong { font-size: .98rem; }
}

/* Data tables -> stacked cards. The 560px min-width forces an inner horizontal
   scrollbar until the viewport is wide enough to hold it (~660px once panel and
   page padding are counted), so below that we drop the columns and label each
   cell instead, letting warehouse prices read top-to-bottom with no side-scroll. */
@media (max-width: 680px) {
  .table-scroll { overflow-x: visible; }
  .table-scroll .ptable { min-width: 0; }
  .ptable thead {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
  }
  .ptable, .ptable tbody { display: block; width: 100%; }
  .ptable tr {
    display: block; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: .65rem .8rem; margin-bottom: .55rem;
  }
  .ptable tr:last-child { margin-bottom: 0; }
  .ptable td {
    display: block; padding: .3rem 0; border: none;
    text-align: right; overflow-wrap: anywhere;
  }
  .ptable td::before {
    content: attr(data-label); float: left; margin-right: 1rem;
    font-family: var(--font-body); font-weight: 600; font-size: .72rem;
    letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  }
  .ptable td:first-child {
    text-align: left; padding: 0 0 .5rem; margin-bottom: .45rem;
    border-bottom: 1px solid var(--line); font-size: .95rem; line-height: 1.45;
  }
  .ptable td:first-child::before { content: none; }
  .compare-table tr.is-cheapest { background: #eef6f0; border-color: #bfe0cb; }
  .compare-table tr.is-cheapest td { background: transparent; }
  .compare-table tr.is-priciest { background: #fbf1ef; border-color: #e6c9bf; }
  .compare-table tr.is-priciest td { background: transparent; }
  .compare-table tr.is-current { border-left: 3px solid var(--brand); }
  .compare-table tr.is-current td:first-child { box-shadow: none; }
  /* Shade the whole online-offer card, not just its cells (the per-td shading
     used on desktop leaves the card's padding unshaded once rows stack). */
  .compare-table tr.online-row { background: var(--online-tint); border-color: var(--online-line); }
  .compare-table tr.online-row td { background: transparent; }
  /* Pack each warehouse's price, stock and freshness into one tight wrapping row
     under the name so the comparison scans fast on a phone. */
  .compare-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .8rem; }
  .compare-table td { display: inline-flex; align-items: baseline; gap: .3rem; width: auto; padding: .15rem 0; text-align: left; }
  .compare-table td::before { content: none; }
  .compare-table td:first-child { display: block; flex: 1 1 100%; }
  /* Meta line: price (+delta) on the left, stock badge pushed to the right.
     These always fit, so the badges line up on the right without wrapping. */
  .compare-table td[data-label="Stock"] { margin-left: auto; }
  /* Freshness is least important and, with wide gap-to-cheapest amounts, won't
     fit beside the badge on a phone. Give it its own small, muted, right-aligned
     line so every card reads the same instead of orphaning the time at random. */
  .compare-table td[data-label="Updated"] {
    flex-basis: 100%; justify-content: flex-end; white-space: nowrap;
    color: var(--muted); font-family: var(--font-mono); font-size: .72rem;
  }
  /* Row action (Show / Check) gets its own right-aligned line so it's an easy tap;
     empty action cells (the shown row, the online row) collapse away. */
  .compare-table td.compare-action { flex-basis: 100%; justify-content: flex-end; padding-top: .35rem; }
  .compare-table td.compare-action:empty { display: none; }
  /* The cheapest/most-expensive word tags make the price cell wide enough to
     wrap the row on a phone; the green/pink card tint signals them visually, so
     hide the words *visually* here (still read by screen readers) rather than
     display:none, and keep the +$ gap-to-cheapest. */
  .compare-table .price-tag {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
  }
}