/* ===================================
   RESPONSIVE CSS — Mobile First
   =================================== */

/* ===================================
   LARGE DESKTOP (1280px+)  — default
   =================================== */

/* ===================================
   MEDIUM (max 1024px)
   =================================== */
@media (max-width: 1024px) {
  .category-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .product-detail-layout {
    gap: 28px;
  }

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

  .admin-layout {
    grid-template-columns: 200px 1fr;
  }
}

/* ===================================
   TABLET (max 768px)
   =================================== */
@media (max-width: 768px) {

  /* Header */
  .nav-search {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .nav-user-btn span {
    display: none;
  }

  /* Mobile nav overlay */
  .mobile-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-dark);
    z-index: 999;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transform: translateX(-100%);
    transition: var(--transition);
    overflow-y: auto;
  }

  .mobile-menu.open {
    transform: translateX(0);
  }

  .mobile-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 10px 16px;
  }

  .mobile-search input {
    flex: 1;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
  }

  .mobile-search input::placeholder { color: var(--text-muted); }

  .mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: var(--transition-fast);
  }

  .mobile-nav-link:hover,
  .mobile-nav-link.active {
    background: rgba(255,107,0,0.1);
    color: var(--primary);
  }

  .mobile-nav-link i { width: 20px; text-align: center; }

  /* Hero */
  .hero {
    height: auto;
    min-height: 380px;
    max-height: 500px;
  }

  .hero-title { font-size: 1.6rem; }
  .hero-desc { font-size: 0.88rem; }

  .hero-nav { display: none; }

  /* Categories */
  .category-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .category-card {
    padding: 16px 8px;
    gap: 8px;
  }

  .category-card-icon {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }

  /* Products grid */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Products page */
  .products-page-layout {
    grid-template-columns: 1fr;
  }

  .filter-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    z-index: 9000;
    border-radius: 0;
    transform: translateX(-100%);
    transition: var(--transition);
    max-height: 100vh;
  }

  .filter-sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 8999;
    display: none;
  }

  .filter-overlay.active { display: block; }

  /* Cart */
  .cart-layout {
    grid-template-columns: 1fr;
  }

  .cart-summary {
    position: static;
  }

  /* Checkout */
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  /* Product detail */
  .product-detail-layout {
    grid-template-columns: 1fr;
  }

  .product-gallery { position: static; }

  .product-info-title { font-size: 1.4rem; }

  /* Account */
  .account-layout {
    grid-template-columns: 1fr;
  }

  .account-sidebar {
    position: static;
  }

  .account-sidebar-nav {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 8px;
    gap: 4px;
  }

  .account-nav-item {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Promo */
  .promo-grid {
    grid-template-columns: 1fr;
  }

  /* Admin */
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    height: auto;
    display: flex;
    overflow-x: auto;
    gap: 4px;
    padding: 10px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .admin-nav-item {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-brand p { max-width: 100%; }

  /* Auth */
  .auth-card { padding: 28px 20px; }

  /* Form row */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Section */
  .section { padding: 40px 0; }

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

  /* Checkout steps */
  .checkout-step:not(:last-child)::after { width: 80%; }
  .step-label { display: none; }
}

/* ===================================
   SMALL MOBILE (max 480px)
   =================================== */
@media (max-width: 480px) {
  .category-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .category-card {
    padding: 12px 6px;
  }

  .category-card-name { font-size: 0.72rem; }
  .category-card-count { display: none; }

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

  .product-card-body { padding: 12px; }
  .product-card-name { font-size: 0.84rem; }
  .price-current { font-size: 0.95rem; }

  .cart-item {
    flex-wrap: wrap;
  }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions .btn { width: 100%; }

  .product-actions { flex-direction: column; }
  .product-actions .btn { width: 100%; }

  .section-title { font-size: 1.3rem; }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .modal { padding: 20px; }
}

/* Mobile hardening for management, account and checkout surfaces */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .admin-layout { display:block; min-width:0; }
  .admin-content { width:100%; min-width:0; padding:16px 12px 32px; }
  .admin-sidebar { position:sticky; top:0; z-index:120; width:100%; max-width:100vw; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; background:var(--bg-secondary); }
  .admin-nav-item { min-height:44px; padding:11px 13px; font-size:.78rem; }
  .admin-header { align-items:flex-start; }
  .admin-header h2 { font-size:1.22rem; line-height:1.25; }
  .admin-header .btn { width:100%; justify-content:center; }
  .admin-table-wrap { width:100%; max-width:calc(100vw - 24px); overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .admin-table { min-width:920px; }
  .admin-table th, .admin-table td { padding:10px 9px; }
  .admin-pagination { gap:10px; flex-wrap:wrap; }
  .admin-pagination > div:first-child { width:100%; }
  .admin-toolbar { display:grid; grid-template-columns:1fr; gap:10px; padding:12px; }
  .admin-toolbar .form-control, .admin-toolbar select { width:100% !important; min-width:0; }
  .exchange-rate-card { padding:16px; border-radius:13px; }
  .exchange-rate-control { display:grid; grid-template-columns:auto minmax(90px,1fr) auto; width:100%; }
  .exchange-rate-control input { width:100%; }
  .exchange-rate-control .btn { grid-column:1/-1; width:100%; }
  .admin-task { grid-template-columns:auto minmax(0,1fr); gap:11px; }
  .admin-task > .admin-actions { grid-column:2; }
  .task-title-row { align-items:flex-start; flex-direction:column; gap:6px; }
  .task-meta { flex-direction:column; gap:7px; }
  .modal-overlay { padding:10px; align-items:flex-end; }
  .modal, .admin-wide-modal { width:100%; max-width:none; max-height:92dvh; overflow-y:auto; padding:18px; border-radius:18px 18px 8px 8px; }
  .auth-page { padding:12px; align-items:flex-start; }
  .auth-card { width:100%; max-width:100%; margin:10px auto; padding:24px 17px; }
  .account-content, .checkout-main, .checkout-sidebar { min-width:0; }
  .account-sidebar-nav { scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .account-nav-item { min-height:44px; scroll-snap-align:start; }
  input, select, textarea, button { font-size:16px; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns:1fr; }
  .stat-card { min-width:0; }
  .admin-actions .btn { min-width:38px; min-height:38px; }
  .cart-item { display:grid; grid-template-columns:64px minmax(0,1fr); gap:11px; }
  .cart-item-actions { grid-column:1/-1; width:100%; justify-content:space-between; }
  .bundle-price { align-items:flex-start; flex-direction:column; gap:8px; }
}

/* ===================================
   PRINT
   =================================== */
@media print {
  #header, footer, .nav-categories, #toast-container { display: none; }
  body { background: white; color: black; }
  .card, .product-card { border-color: #ccc; }
}