@media (max-width: 768px) {
  html {
    width: 100%;
    max-width: 100%;
    /* 'clip' stops sideways overflow WITHOUT creating a scroll container -
       overflow-x:hidden on <html> is what made touch scrolling stick on phones. */
    overflow-x: clip;
  }

  body {
    width: 100%;
    max-width: 100%;
    /* 'clip' (not 'hidden') — 'overflow-x: hidden' on <body> turns the body
       into a scroll container, which is what makes touch dragging stick or
       resist on phones. 'clip' trims overflow without creating a scroller. */
    overflow-x: clip;
  }

  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }

  .hero-content h1 {
    font-size: 2.2rem;
  }

  .nav-links {
    display: none; /* Can be expanded into a mobile hamburger menu */
  }

  .admin-layout {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

  .main-content {
    padding: 1.5rem;
  }

  /* backdrop-filter forces an expensive composite on every scroll frame - on
     phones a solid bar is far smoother. */
  .site-header,
  .shop-header,
  .cart-header,
  .checkout-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #f4f1ec;
  }
}

@media (max-width: 650px) {
  .product-grid,
  .product-grid.shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .navbar {
    height: 66px;
  }

  .logo {
    font-size: 1.25rem;
  }

  .product-page,
  .shop-shell,
  .cart-shell,
  .checkout-shell {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .btn-primary,
  .btn-secondary {
    max-width: 100%;
  }
}