/* Anugraha Jewellers — responsive layer.
   The design uses inline styles (desktop, 1240px), so every mobile override
   needs !important. Class hooks were added during the compile. */

@media (max-width: 980px) {
  .g5, .g4p, .g4v, .g3t, .g5t { grid-template-columns: repeat(2, 1fr) !important; }
  .g-hero, .g2-about, .g2-show, .g2-contact, .g2-story { grid-template-columns: 1fr !important; }
  .g4f { grid-template-columns: 1fr 1fr !important; }
  .site-nav { gap: 16px !important; font-size: 13px !important; flex-wrap: wrap !important; justify-content: center !important; }
  .site-header-inner { flex-wrap: wrap !important; justify-content: center !important; }
}

@media (max-width: 620px) {
  .g5, .g4p, .g4v, .g3t, .g5t, .g4f { grid-template-columns: 1fr !important; }
  .g4s { grid-template-columns: repeat(2, 1fr) !important; }
  .g2-form { grid-template-columns: 1fr !important; }
  .g2-form label { grid-column: auto !important; }
  .g-tl { grid-template-columns: 64px 1px 1fr !important; gap: 16px !important; }
  .g-tl span:first-child { font-size: 24px !important; }
  .hero-badge { position: static !important; margin-top: 18px !important; display: inline-block !important; }
}