@media (max-width: 780px) {
  .container {
    width: min(100%, calc(100% - 2rem));
  }

  .hero-grid {
    gap: 2rem;
  }

  .section-title h2 {
    font-size: 2rem;
  }

  .cards-grid,
  .product-grid,
  .highlight-grid,
  .testimonial-grid,
  .story-grid,
  .instagram-grid {
    grid-template-columns: 1fr;
  }

  .site-header .container {
    justify-content: space-between;
  }

  .header-actions {
    gap: 0.5rem;
  }

  .hero-section {
    padding-top: 4rem;
  }

  .hero-copy p,
  .section-title p {
    font-size: 1rem;
  }

  .product-card-content,
  .cart-item,
  .cart-page-header,
  .featured-banner,
  .limited-banner {
    padding: 1.25rem;
  }

  .cart-item {
    grid-template-columns: 1fr;
  }

  .product-gallery-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .product-gallery-main {
    min-height: 420px;
  }

  .filter-panel {
    grid-column: 1/-1;
  }

  .mobile-menu {
    display: grid;
  }

  .mobile-menu[hidden] {
    display: none;
  }

  .mobile-nav {
    display: grid;
    gap: 1rem;
  }

  .mobile-close {
    justify-self: end;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
}

@media (max-width: 520px) {
  .site-header .container {
    gap: 0.75rem;
  }

  .button {
    width: 100%;
  }

  .hero-actions,
  .action-row,
  .field-grid,
  .price-range,
  .cart-summary,
  .product-info-grid,
  .story-grid {
    grid-template-columns: 1fr;
  }

  .product-gallery-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quantity-control button,
  .quantity-control span {
    width: 2rem;
  }
}