/* =========================
   RESPONSIVE.CSS
   Glow Lab Research
========================= */

/* Large tablets */

@media (max-width: 1200px) {
  .hero {
    padding: 60px 5%;
  }

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

/* Tablets */

@media (max-width: 900px) {
  .site-header {
    padding: 18px 5%;
  }

  .main-nav {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 35px;
  }

  .hero-content {
    margin: 0 auto;
  }

  .hero-visual img {
    max-width: 520px;
    margin: 0 auto;
  }

  .trust-strip {
    grid-template-columns: 1fr;
  }

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

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

/* Mobile */

@media (max-width: 650px) {
  .top-bar {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  .logo-mark {
    font-size: 28px;
  }

  .logo-text {
    font-size: 12px;
  }

  .header-icons button {
    font-size: 15px;
  }

  .hero {
    padding: 55px 6% 45px;
  }

  .hero h1 {
    font-size: 62px;
  }

  .hero-copy {
    font-size: 14px;
  }

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

  .product-card {
    min-height: auto;
  }

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

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

  .email-form {
    flex-direction: column;
  }

  .email-form button {
    width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}
/* PRODUCT PAGE RESPONSIVE */

@media (max-width: 900px) {
  .product-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .product-content p {
    margin-left: auto;
    margin-right: auto;
  }

  .product-buttons,
  .product-badges {
    justify-content: center;
  }

  .product-image img {
    max-height: 460px;
  }
}