/* ── Responsive CSS ──
   Mobile-first media queries for all screen sizes */

/* ── Tablet (max 768px) ── */
@media (max-width: 768px) {

  /* Hide nav links on tablet and mobile */
  .nav-links {
    display: none;
  }

  /* Hero section smaller on mobile */
  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  /* Stack hero buttons vertically */
  .btn-outline {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

/* ── Mobile (max 480px) ── */
@media (max-width: 480px) {

  /* Smaller navbar padding */
  nav {
    padding: 0.75rem 1rem;
  }

  /* Smaller logo */
  .nav-logo {
    font-size: 1.2rem;
  }

  /* Hero full padding adjustment */
  .hero {
    padding: 3rem 1rem;
  }

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

  /* Single column product grid on mobile */
  #product-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Full width buttons on mobile */
  .btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-top: 0.5rem;
  }

  /* Cart items stack on mobile */
  .cart-item-card {
    flex-direction: column;
    align-items: flex-start;
  }
}