/* Site-wide phone breakpoints. Every layout on the site is built with fixed
   grid-template-columns in inline styles (no page had a single @media rule
   before this file), so this adds a small, consistent set of utility
   classes rather than bespoke CSS per page. Loaded last, after every other
   stylesheet, on every page. */

html, body { overflow-x: hidden; }
img, svg, iframe, video { max-width: 100%; }

/* A component (Dialog, etc.) may render its own fixed width; capping its
   rendered root to the wrapper's width is always safe regardless of what
   width the component sets internally. */
.rg-modal-wrap > * { max-width: 100%; box-sizing: border-box; }

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --size-5xl: 44px;
    --size-4xl: 34px;
    --size-3xl: 28px;
    --size-2xl: 24px;
  }
}

/* Collapse a multi-column grid to a single column below tablet width. */
@media (max-width: 700px) {
  .rg-stack { grid-template-columns: 1fr !important; }
}

/* Reduce a wide grid (shelf, ingredient families) to two columns on phones,
   rather than a full stack — keeps the "wall of squares" feel intact. The
   brand's own cubbies are documented as a fixed 264px square that never
   reflows ("you change the column count, never the aspect") — if that
   holds at runtime, two of them may still be wider than the screen, so
   this scrolls locally instead of silently clipping under the page-level
   overflow-x: hidden above. */
@media (max-width: 520px) {
  .rg-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Turn a flex row (fixed-width label + flexible content + a button) into a
   stacked column so nothing gets clipped on a narrow phone. */
@media (max-width: 520px) {
  .rg-row-stack {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  /* Beats an inline width (e.g. a fixed date-column width) — only !important
     reliably overrides an inline style. */
  .rg-row-stack > * { width: 100% !important; }
}