/************************************/
/* 1200px (Landscape tablet, small desktop) */
/************************************/
@media (max-width: 75em) {
  html {
    font-size: 56.25%; /* 1rem = 9px */
  }

  .container {
    padding: 0 2rem;
  }

  .header {
    padding: 1.4rem 2.4rem;
  }

  .hero-title {
    font-size: 3.6rem;
  }

  .hero-subtitle {
    font-size: 1.6rem;
  }
}

/************************************/
/* 944px (Tablet breakpoint) */
/************************************/
@media (max-width: 59em) {
  html {
    font-size: 50%;
  }

  /* ================= MOBILE NAV ================= */

  .btn-mobile-nav {
    display: block;
    font-size: 3rem;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--fg);
  }

  .main-nav {
    display: none;

    position: absolute;
    top: 100%;
    right: 0;

    width: 100%;
    padding: 2.4rem;

    flex-direction: column;
    gap: 2.4rem;
    align-items: center;

    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .header.nav-open .main-nav {
    display: flex;
  }

  .main-nav a {
    width: 100%;
    padding: 1rem 0;
    font-size: 1.6rem;
  }

  .header .fa-xmark {
    display: none;
  }

  .header.nav-open .fa-bars {
    display: none;
  }

  .header.nav-open .fa-xmark {
    display: block;
  }

  /* ================= HERO ================= */
  .hero {
    height: 80vh;
    padding: 0 2rem;
  }

  .hero-title {
    font-size: 3.2rem;
  }

  .hero-subtitle {
    font-size: 1.6rem;
    margin-bottom: 2.4rem;
  }

  /* ================= ABOUT ================= */
  .about {
    padding: 4.8rem 2rem;
  }

  .about-container {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }

  /* ================= CONTACT ================= */
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/************************************/
/* 768px (Large Mobile) */
/************************************/
@media (max-width: 48em) {
  .hero {
    height: 70vh;
  }

  .hero-title {
    font-size: 2.8rem;
  }

  .hero-subtitle {
    font-size: 1.5rem;
  }

  .hero-actions {
    flex-direction: column;
    gap: 1.6rem;
  }

  .btn {
    padding: 1.4rem 2rem;
    font-size: 1.4rem;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2.4rem;
  }

  .about-content p {
    font-size: 1.4rem;
    line-height: 1.7;
  }
}

/************************************/
/* 544px (Small Mobile) */
/************************************/
@media (max-width: 34em) {
  html {
    font-size: 55%; /* 1rem = 7.2px */
  }

  .header {
    padding: 1.2rem 1.8rem;
  }

  .logo {
    font-size: 1.4rem;
  }

  .hero {
    height: 65vh;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .hero-subtitle {
    font-size: 1.4rem;
  }

  .section-title {
    font-size: 2.4rem;
  }

  .product-grid {
    align-items: stretch;
  }

  .product-card {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    font-size: 1.8rem;
    height: 100%;
  }

  .product-card p {
    font-size: 1.4rem;
    line-height: 1.5;
  }

  .contact {
    padding: 5rem 1.6rem;
  }

  .contact-panel {
    padding: 2.4rem 2rem;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 1.4rem;
    padding: 1.2rem 1.4rem;
  }
}

@media (max-width: 48em) {
  .product-grid {
    padding: 0 1.6rem;
  }

  .products-filters {
    flex-direction: column;
  }

  .products-filters input,
  .products-filters select {
    width: 100%;
  }

  .product-card .btn-card {
    align-self: stretch;
    text-align: center;

    padding: 1.2rem;
    font-size: 1.4rem;
  }
}