@media (max-width: 768px) {
  header {
    padding: 12px 16px;
  }

  header nav {
    gap: 14px;
  }

  .logo img {
    width: 80px;
  }

  nav a span {
    margin-left: -8px;
  }
}


@media (max-width: 768px) {
  .spa {
    padding: 16px;
  }

  .hero {
    height: 28vh;
    border-radius: 14px;
  }

  #hero-text {
    font-size: 36px;
  }

  .hero-arrow svg {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 500px) {
  .cart-drawer {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

img {
  max-width: 100%;
  height: auto;
}

button {
  touch-action: manipulation;
}