@media (max-width: 960px) {
  .site-nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 1rem;
    left: 1rem;
    display: none;
    padding: 0.6rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-md);
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav__list {
    display: grid;
    gap: 0.25rem;
  }

  .site-nav__list a {
    width: 100%;
    justify-content: flex-start;
  }

  .menu-toggle {
    display: inline-grid;
    place-items: center;
  }

  .hero__grid,
  .split,
  .split-section,
  .course-strip__grid,
  .product-layout {
    grid-template-columns: 1fr;
  }

  .hero__media {
    max-width: 720px;
  }

  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .section {
    padding: 2.5rem 0;
  }

  .feature-grid,
  .stats-grid,
  .footer-grid,
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    align-items: start;
  }

  .catalog-toolbar {
    display: grid;
    align-items: stretch;
  }

  .search-field {
    width: 100%;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .product-card__media,
  .product-card__media img {
    min-height: 170px;
    height: 170px;
  }

  .product-card__body {
    padding: 0.85rem;
  }

  .product-card__title {
    font-size: 0.95rem;
  }

  .gallery-main {
    min-height: 360px;
    padding: 1rem;
  }

  .gallery-main img {
    height: min(76vw, 420px);
    min-height: 260px;
  }
}

@media (max-width: 500px) {
  .container {
    width: min(calc(100% - 1.25rem), var(--container));
  }

  .brand__logo {
    width: 50px;
    height: 42px;
  }

  .brand__tagline {
    display: none;
  }

  .hero__actions .button,
  .button-row .button {
    width: 100%;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-card__media,
  .product-card__media img {
    height: 230px;
  }

  .whatsapp-float {
    right: 0.75rem;
    bottom: 0.75rem;
  }
}
