/*
 * Breakpoints. Copied verbatim from the two @media blocks in app/globals.css and
 * loaded last. The !important flags were needed to beat inline styles in the
 * Next app; removing them is a separate cleanup once visuals are confirmed.
 * Rules for the shop, PDP and mobile bar do nothing until those templates exist.
 */

@media (max-width: 860px) {
  .util-right, .hdr-meta { display: none !important; }
  .search { order: 3; flex: 1 0 100% !important; min-width: 0 !important; }
  .hdr-main { gap: 14px; justify-content: space-between; }
  .navrow { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; }
  .navrow::-webkit-scrollbar { display: none; }
  .navrow > * { flex: 0 0 auto; }
  .navrow .spacer { display: none; }
  .hero-in { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { padding-bottom: 12px; }
  .hero-deal-wrap { padding-top: 12px; justify-content: stretch; }
  .hero-title { font-size: calc(52px * var(--cc-h-scale, 1)) !important; }
  .clock .v { font-size: 40px !important; min-width: 62px !important; padding: 4px 10px !important; }
  .pdp-hero { font-size: 58px !important; }
  .grid-sm { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .filters-btn { display: flex !important; }
  .rail { flex: 1 1 100% !important; }
  .rail[data-open="0"] { display: none !important; }
  .mbar { display: flex !important; }
  .pdp-wrap { padding-bottom: 104px !important; }
  .buybox { order: -1; min-width: 0; flex: 1 1 100%; }
}
@media (max-width: 430px) {
  .grid-sm { grid-template-columns: 1fr !important; }
  .hero-title { font-size: calc(40px * var(--cc-h-scale, 1)) !important; }
  .page-title { font-size: calc(38px * var(--cc-h-scale, 1)) !important; }
  .rail, .cols > * { min-width: 0 !important; }
  .hero-in { grid-template-columns: minmax(0, 1fr); }
}