@media (max-width: 1023px) {
  /* NOTE: a stray `.nav__mobile-links { display: none }` used to live here and,
     because mobile.css loads after navigation.css, it hid the entire mobile
     overlay menu (the hamburger opened an overlay with no navigation links).
     Removed so the mobile menu works. The overlay itself stays hidden on
     desktop via opacity/pointer-events in navigation.css. */

  .hero__title { font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .hero__cta { gap: 0.75rem; }
  .hero__cta .btn { padding: 0.75rem 1.5rem; font-size: 0.7rem; }

  .page-hero { padding-top: calc(var(--nav-height) + var(--space-lg)); padding-bottom: var(--space-lg); }
  .page-hero h1 { font-size: var(--text-2xl); }
}

@media (max-width: 767px) {
  :root { --space-xl: 4rem; --space-lg: 2.5rem; }

  h2 { font-size: var(--text-2xl); }

  .gallery-grid { grid-template-columns: 1fr; }

  .rental-terms { grid-template-columns: 1fr; }
  .rental-term { border-left: none; border-top: 2px solid var(--color-lavender); padding-left: 0; padding-top: var(--space-xs); }

  .contact-grid { gap: var(--space-lg); }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .footer__bottom { flex-direction: column; text-align: center; }

  .steps-grid { grid-template-columns: 1fr; }

  .artwork-modal__panel { grid-template-columns: 1fr; max-height: 95vh; }
  .artwork-modal__image img { min-height: 220px; }
  .artwork-modal__info { padding: var(--space-md); }

  .shop-info-bar { flex-direction: column; gap: var(--space-sm); }
}

@media (max-width: 480px) {
  :root { --space-xl: 3rem; }
  .hero { padding-bottom: var(--space-lg); }
  .collection-filter { gap: 0.5rem; }
  .filter-btn { font-size: 0.65rem; padding: 0.6rem 0.9rem; }
  .artwork-card__body { padding: var(--space-xs) var(--space-sm) var(--space-sm); }
}