/* responsive.css — nakup.pl */

@media (max-width: 1100px) {
  .admin-stats { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 960px) {
  .products-grid { grid-template-columns: repeat(3,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .checkout-page { grid-template-columns: 1fr; }
  .product-detail { grid-template-columns: 1fr; }
  .admin-stats { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  .main-nav { display: none; }
  .hero h1 { font-size: 30px; }
  .hero-btns { flex-direction: column; align-items: center; }
  .products-grid { grid-template-columns: repeat(2,1fr); }
  .cats-grid { grid-template-columns: repeat(2,1fr); }
  .trust-bar { gap: 1.2rem; }
  .section { padding: 1.8rem 1rem; }
  .topbar { font-size: 11px; padding: 6px 1rem; }
  .site-header { padding: 0 1rem; }
  .product-detail { padding: 1rem; }
  .cart-page { padding: 1rem; }
  .form-row { grid-template-columns: 1fr; }
  .auth-wrap { margin: 1.5rem auto; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; gap: .3rem; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .a-tabs { overflow-x: auto; }
}

@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero h1 { font-size: 24px; }
  .hero { min-height: 380px; }
  .cart-item { grid-template-columns: 46px 1fr auto; }
  .cart-item-price { display: none; }
  .admin-stats { grid-template-columns: 1fr; }
  .modal-box { margin: .5rem; padding: 1.2rem; }
  .logo { font-size: 20px; }
  .cart-btn { padding: 8px 11px; font-size: 12px; }
  .header-inner { height: 58px; }
}

/* ===== HERO MOBILE ===== */
@media (max-width: 768px) {
  .hero { min-height: 480px; }
  .hero-content {
    text-align: center;
    padding: 3rem 1.5rem;
    max-width: 100%;
    align-items: center;
  }
  .hero-overlay {
    background: rgba(20,14,6,.72) !important;
  }
  .hero h1 { font-size: 28px !important; }
  .hero-btns { justify-content: center !important; }
}

@media (max-width: 480px) {
  .hero { min-height: 420px; }
  .hero h1 { font-size: 22px !important; }
  .hero p { font-size: 14px !important; }
}