/* ============================================
   PR-Store Responsive Stylesheet
   Mobile-first approach with clean breakpoints
   ============================================ */

/* ==========================================
   EXTRA SMALL DEVICES (max-width: 360px)
   ========================================== */
@media screen and (max-width: 360px) {
  html { font-size: 13px; }
  .container { padding: 0 12px; }

  .navbar { padding: 0 10px; }
  .nav-content { padding: 10px 0; gap: 10px; }
  .logo { font-size: 1.2rem; }
  .logo-img { width: 24px; height: 24px; }
  .search-bar { display: none; }
  .nav-back-btn { display: none; }
  .nav-icons { gap: 10px; }
  .nav-link { width: 36px; height: 36px; font-size: 15px; border-radius: 8px; }
  .btn-primary { padding: 10px 16px; font-size: 12px; border-radius: 8px; }
  .user-name { display: none !important; }

  .hero { min-height: 280px; padding: 40px 14px; }
  .hero-content h1 { font-size: 24px; line-height: 1.2; }
  .hero-content p { font-size: 14px; margin-bottom: 20px; }
  .hero .btn-primary { padding: 12px 24px; font-size: 14px; }

  .categories { padding: 28px 12px; }
  .section-title { font-size: 20px; margin-bottom: 20px; }
  .section-title::after { width: 36px; height: 2px; margin-top: 8px; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .categories-carousel-track { gap: 20px; padding: 0 8px; }
  .carousel-arrow { display: none !important; }
  .category-card { padding: 0; min-height: auto; border-radius: 0; width: 72px; }
  .category-image { width: 56px; height: 56px; }
  .category-icon { font-size: 28px; width: 42px; height: 42px; margin-bottom: 6px; }
  .category-name { font-size: 11px; }

  .featured-products { padding: 28px 12px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-card { border-radius: 10px; }
  .product-image { height: 140px; }
  .product-info { padding: 12px; }
  .product-name { font-size: 13px; -webkit-line-clamp: 1; line-clamp: 1; margin-bottom: 4px; }
  .product-description { display: none; }
  .product-rating { margin-bottom: 6px; }
  .stars { font-size: 11px; }
  .review-count { font-size: 11px; }
  .product-price { margin-bottom: 8px; gap: 4px; }
  .current-price { font-size: 15px; }
  .original-price { font-size: 11px; }
  .discount { font-size: 10px; padding: 2px 5px; }
  .stock-left-badge { font-size: 9px; padding: 2px 7px; top: 6px; left: 6px; }
  .product-actions { gap: 4px; }
  .product-actions button { padding: 8px; font-size: 11px; border-radius: 6px; }

  .footer { padding: 28px 12px 20px; }
  .footer-content { gap: 20px; }
  .footer-section h4 { font-size: 14px; margin-bottom: 10px; }
}

/* ==========================================
   SMALL DEVICES (361px - 480px)
   ========================================== */
@media screen and (min-width: 361px) and (max-width: 480px) {
  .container { padding: 0 14px; }
  .search-bar { display: none; }
  .user-name { display: none !important; }
  .nav-back-btn { display: none; }

  .hero { min-height: 300px; padding: 44px 16px; }
  .hero-content h1 { font-size: 26px; }
  .hero-content p { font-size: 14px; }

  .categories { padding: 32px 14px; }
  .section-title { font-size: 22px; }
  .categories-grid { gap: 20px; }
  .categories-carousel-track { gap: 24px; padding: 0 8px; }
  .carousel-arrow { display: none !important; }
  .category-card { width: 80px; padding: 0; min-height: auto; }
  .category-icon { font-size: 30px; }

  .featured-products { padding: 32px 14px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .product-image { height: 160px; }
  .product-info { padding: 14px; }
  .product-name { font-size: 13px; -webkit-line-clamp: 2; line-clamp: 2; }
  .product-description { display: none; }
  .current-price { font-size: 16px; }
  .stock-left-badge { font-size: 10px; padding: 2px 8px; }
  .product-actions button { padding: 9px; font-size: 12px; }
}

/* ==========================================
   MEDIUM DEVICES - TABLETS (481px - 768px)
   ========================================== */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .container { padding: 0 20px; }
  .nav-content { gap: 12px; }
  .logo { font-size: 1.3rem; }
  .logo-img { width: 28px; height: 28px; }
  .search-bar { min-width: 160px; }
  .user-name { display: none !important; }
  .nav-back-btn { display: none; }

  .hero { min-height: 360px; padding: 56px 20px; }
  .hero-content h1 { font-size: 32px; }
  .hero-content p { font-size: 16px; }

  .categories { padding: 40px 20px; }
  .section-title { font-size: 24px; margin-bottom: 28px; }
  .categories-grid { gap: 28px; }
  .categories-carousel-track { gap: 28px; padding: 0 10px; }
  .carousel-arrow { display: none !important; }

  .featured-products { padding: 40px 20px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .product-image { height: 180px; }
  .product-info { padding: 16px; }

  .footer-content { grid-template-columns: repeat(2, 1fr); gap: 28px; }

  /* Modal responsive */
  .modal-content { max-width: 420px; padding: 28px; margin: 0 16px; }

  /* Toast responsive */
  .toast-container { max-width: 340px; right: 16px; top: 16px; }
}

/* ==========================================
   LARGE TABLETS / SMALL DESKTOP (769px - 1024px)
   ========================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .product-image { height: 200px; }
  .footer-content { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================
   LARGE DESKTOP (1025px - 1440px)
   ========================================== */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
  .products-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
}

/* ==========================================
   EXTRA LARGE (1441px+)
   ========================================== */
@media screen and (min-width: 1441px) {
  .container { max-width: 1400px; }
  .products-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ==========================================
   PAGE-SPECIFIC RESPONSIVE
   ========================================== */

/* Cart Page */
@media screen and (max-width: 768px) {
  .cart-container { grid-template-columns: 1fr; }
  .cart-item { flex-direction: column; gap: 16px; text-align: center; }
  .cart-item-image { width: 100%; max-width: 200px; margin: 0 auto; }
  .cart-summary { position: static; }
  .checkout-grid { grid-template-columns: 1fr; }

  /* Skeleton responsive */
  .skeleton-product-detail { grid-template-columns: 1fr; }
  .skeleton-detail-image { height: 280px; }
  .skeleton-grid-3, .skeleton-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .skeleton-form-row { grid-template-columns: 1fr; }
  .skeleton-profile-header { flex-direction: column; text-align: center; }
  .skeleton-avatar { margin: 0 auto; }
}

/* Product Detail Page */
@media screen and (max-width: 768px) {
  .product-detail-content { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
  .product-images { order: -1; }
}

/* Profile Page */
@media screen and (max-width: 768px) {
  .profile-container,
  .profile-layout { flex-direction: column; }
  .profile-sidebar { width: 100%; }
  .profile-content { width: 100%; }
}

/* Orders Page */
@media screen and (max-width: 600px) {
  .order-header { flex-direction: column; gap: 10px; }
  .order-items { gap: 8px; }
  .order-item { flex-direction: column; align-items: stretch; }
  .item-image { width: 100%; max-width: 120px; }
  .order-footer { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* Checkout Page */
@media screen and (max-width: 768px) {
  .checkout-container,
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-form { order: 1; }
  .order-summary,
  .checkout-summary { order: 2; position: static; }
  .form-row { grid-template-columns: 1fr; }
  .auth-toggle { flex-direction: column; }
}

/* Admin Panel */
@media screen and (max-width: 768px) {
  .admin-container { flex-direction: column; }
  .admin-sidebar { width: 100%; position: relative; height: auto; }
  .admin-content { padding: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .analytics-grid { grid-template-columns: 1fr; }
  .table-responsive { font-size: 13px; }
}

@media screen and (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .table-responsive th, .table-responsive td { padding: 8px 10px; font-size: 12px; }
}

/* Wishlist Page */
@media screen and (max-width: 600px) {
  .wishlist-grid { grid-template-columns: 1fr; }
}

/* Contact & About Pages */
@media screen and (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; }
  .about-features,
  .features-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
}

/* Products Page - Filters */
@media screen and (max-width: 768px) {
  .products-page { flex-direction: column; }
  .filters-sidebar { width: 100%; }
  .filter-toggle-btn { display: block; }
  .filters-content { display: none; }
  .filters-content.active { display: block; }
  .products-header { flex-direction: column; gap: 12px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}