/* ===================================
   Layout & Responsive Grid
   =================================== */

/* Main Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* Product card needs relative positioning for wishlist button */
.card {
  position: relative;
}

/* Responsive Breakpoints */

/* Tablets */
@media (max-width: 960px) {
  body {
    padding: var(--space-lg) 10px;
  }

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

/* Large phones */
@media (max-width: 820px) {
  .prod {
    grid-template-columns: 1fr;
  }
}

/* Mobile */
@media (max-width: 720px) {
  .card-main {
    padding: 14px var(--space-md) 18px;
  }

  header.topbar {
    flex-wrap: wrap;
  }

  /* Show hamburger menu on mobile */
  .hamburger {
    display: flex;
  }

  /* Mobile navigation */
  nav.nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: min(280px, 80%);
    height: 100vh;
    background: rgba(6, 2, 22, 0.98);
    backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: flex-start;
    padding: 60px var(--space-xl) var(--space-xl);
    gap: var(--space-lg);
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    transition: left var(--transition-base);
    z-index: 25;
  }

  nav.nav.open {
    left: 0;
  }

  nav.nav a {
    font-size: 1.1rem;
    width: 100%;
    padding: var(--space-md);
  }

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

  .hero-main h1 {
    font-size: 1.5rem;
  }

  .search input {
    max-width: 180px;
  }

  .cart {
    font-size: 0.75rem;
    padding: 6px 10px;
  }
}

/* Mobile overlay for nav */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 20;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.nav-overlay.active {
  display: block;
  opacity: 1;
}

/* Small mobile */
@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-ghost {
    width: 100%;
    text-align: center;
  }
}