/* ── Base (mobile, 0–480px) ─────────────── */
.main-nav { display: none; }
.hamburger { display: block; }

.mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 250px;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    z-index: 1001;
    transition: right 0.3s ease;
    padding: 20px;
}
.mobile-nav-drawer.open { right: 0; }
.close-nav { font-size: 24px; cursor: pointer; text-align: right; margin-bottom: 20px; }
.mobile-nav-links a { display: block; padding: 15px 0; border-bottom: 1px solid #eee; font-weight: bold; }

.hero { height: 70vh; }
.hero h1 { font-size: 28px; }
.category-grid { grid-template-columns: 1fr; }
.how-it-works-grid { grid-template-columns: 1fr; gap: 20px; }

.customizer-layout { flex-direction: column; }
.preview-wrapper { order: 2; margin-top: 1rem; }
.controls-panel { order: 1; }
.size-selector { display: flex; flex-wrap: wrap; gap: 8px; overflow-x: auto; }
.size-option { flex: 1 1 45%; }

.cart-layout, .checkout-layout { flex-direction: column; }
.order-summary-sidebar { position: static; margin-bottom: 1.5rem; width: 100%; }

.footer-grid { grid-template-columns: 1fr; gap: 2rem; }
.admin-layout { flex-direction: column; }
.admin-sidebar { width: 100%; }
.admin-table-wrap { overflow-x: auto; }

/* Mobile table to cards */
@media (max-width: 768px) {
    .responsive-table thead { display: none; }
    .responsive-table tr { display: block; border: 1px solid #ddd; margin-bottom: 15px; border-radius: 8px; padding: 10px; background: #fff; }
    .responsive-table td { display: block; text-align: right; border-bottom: 1px solid #eee; padding: 8px 0; }
    .responsive-table td:last-child { border-bottom: none; }
    .responsive-table td::before { content: attr(data-label); float: left; font-weight: bold; }
}

/* ── Small tablet (481px–768px) ─────────── */
@media (min-width: 481px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .how-it-works-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablet (769px–1024px) ──────────────── */
@media (min-width: 769px) {
  .main-nav { display: flex; }
  .hamburger { display: none; }
  .mobile-nav-drawer { display: none; }
  
  .customizer-layout { flex-direction: row; gap: 2rem; }
  .preview-wrapper { flex: 1; order: 1; }
  .controls-panel { flex: 1; order: 2; }
  .hero { height: 100vh; }
  .hero h1 { font-size: 40px; }
  .cart-layout, .checkout-layout { flex-direction: row; gap: 2rem; }
  .order-summary-sidebar { position: sticky; top: 80px; width: 340px; }
  .admin-layout { flex-direction: row; }
  .admin-sidebar { width: 250px; min-height: 100vh; }
}

/* ── Desktop (1025px+) ──────────────────── */
@media (min-width: 1025px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .how-it-works-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 2fr; }
  .hero h1 { font-size: 52px; }
  .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
}