/* Responsive Styles */
@media (max-width: 1024px) {
  .grid { 
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
  }
  
  .toolbar { 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
  }
}

@media (max-width: 720px) {
  .grid { 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
  }
  
  .hero-card { 
    grid-template-columns: 1fr; 
  }
  
  .toolbar { 
    grid-template-columns: 1fr 1fr; 
  }
  
  .nav-actions .label { 
    display: none; 
  }
}

@media (max-width: 420px) {
  .grid { 
    grid-template-columns: 1fr; 
  }
  
  .toolbar { 
    flex-direction: column; 
    gap: 12px; 
  }
  
  .toolbar-row { 
    width: 100%; 
  }
  
  .nav-actions { 
    flex-direction: column; 
    gap: 8px; 
    width: 100%; 
  }
  
  .hero-card { 
    flex-direction: column; 
    text-align: center; 
  }
  
  .modal-grid { 
    grid-template-columns: 1fr; 
  }
  
  .cart-item { 
    flex-direction: column; 
    align-items: stretch; 
    text-align: left; 
  }
  
  .cart-item img { 
    width: 100%; 
    height: 200px; 
  }
}

@media (max-width: 320px) {
  .container { 
    padding: 0 8px; 
  }
  
  .toolbar-row { 
    gap: 8px; 
  }
  
  .btn { 
    padding: 8px 12px; 
    font-size: 14px; 
  }
  
  .card { 
    padding: 12px; 
  }
}