/* ============================================================
   Sunbeem — Shared Responsive Styles
   Breakpoints: 480 (xs) · 768 (sm) · 1024 (md) · 1280 (lg)
   ============================================================ */

/* ── Mobile nav hamburger ──────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 200;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all .3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.nav-drawer {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 20px 24px 28px;
  z-index: 99;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 8px 32px rgba(26,26,24,0.1);
}
.nav-drawer.open { display: flex; }
.nav-drawer a, .nav-drawer button {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: color .2s;
}
.nav-drawer a:last-child { border-bottom: none; }
.nav-drawer a:hover, .nav-drawer button:hover { color: var(--accent); }

/* ── Global max-width + side padding helpers ─────────────────── */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 56px; }

/* ── BREAKPOINT: ≤1024px (tablet) ───────────────────────────── */
@media (max-width: 1024px) {
  .container { padding: 0 32px; }

  /* index */
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left { padding: 80px 32px 60px; }
  .hero-left::after { display: none; }
  .hero-right { padding: 48px 32px; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .step-card:first-child { border-radius: 12px 0 0 0; }
  .step-card:nth-child(2) { border-radius: 0 12px 0 0; }
  .step-card:nth-child(3) { border-radius: 0 0 0 12px; }
  .step-card:last-child { border-radius: 0 0 12px 0; }
  .banner { grid-template-columns: 1fr; margin: 0 32px; padding: 56px 48px; }
  footer { grid-template-columns: 1fr 1fr; gap: 36px; padding: 48px 32px; }
  .footer-bottom { padding: 20px 32px; }
  .section { padding: 72px 32px; }
  nav { padding: 0 32px; }

  /* product */
  .product-main { gap: 48px; padding: 32px 32px 60px; }
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-section { padding: 0 32px 60px; }
  .breadcrumb { padding-top: calc(var(--nav-h) + 24px); padding-left: 32px; padding-right: 32px; }

  /* store */
  .store-header { padding: calc(var(--nav-h) + 40px) 32px 40px; }
  .store-body { padding: 32px 32px 60px; gap: 32px; }
  .type-tabs { padding: 0 32px; }

  /* cart */
  .cart-layout { gap: 32px; }
  .cart-wrap { padding: 40px 32px 60px; }
  .page-header { padding: calc(var(--nav-h) + 36px) 32px 36px; }

  /* checkout */
  .checkout-layout { gap: 32px; }
  .page-wrap { padding: calc(var(--nav-h) + 40px) 32px 60px; }

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

/* ── BREAKPOINT: ≤768px (mobile landscape / large phone) ─────── */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }

  /* Show hamburger, hide nav links */
  .nav-hamburger { display: flex !important; }
  .nav-links { display: none !important; }

  .container { padding: 0 20px; }
  nav { padding: 0 20px; }
  .section { padding: 56px 20px; }

  /* checkout secure badge hide on tiny */
  .secure-badge { display: none; }
  .nav-back { font-size: 12px; }

  /* account page */
  .page-header { padding: calc(var(--nav-h) + 24px) 20px 24px; }
  .page-wrap { padding: 0 20px 60px; }
  .page-header h1, #pageTitle { font-size: 32px !important; }

  /* index hero */
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left { padding: 56px 20px 48px; }
  .hero-left::after { display: none; }
  .hero-right { display: none; } /* hide demo on small screens */
  .hero-title { font-size: clamp(36px, 9vw, 56px) !important; }
  .hero-sub { font-size: 15px; }
  .hero-stats { gap: 24px; margin-top: 40px; padding-top: 28px; }
  .stat-item h3 { font-size: 28px; }
  .hero-cta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .btn-primary, .btn-ghost { width: 100%; justify-content: center; }

  /* steps */
  .steps-grid { grid-template-columns: 1fr; gap: 2px; }
  .step-card { border-radius: 0 !important; padding: 28px 24px; }
  .step-card:first-child { border-radius: 12px 12px 0 0 !important; }
  .step-card:last-child { border-radius: 0 0 12px 12px !important; }
  .section-title { font-size: 36px !important; margin-bottom: 36px; }

  /* product grid */
  .product-grid { grid-template-columns: 1fr; gap: 16px; }

  /* banner */
  .banner { grid-template-columns: 1fr; margin: 0 20px; padding: 40px 24px; border-radius: 16px; }
  .banner-title { font-size: 32px; }

  /* footer */
  footer { grid-template-columns: 1fr; gap: 28px; padding: 36px 20px; }
  .footer-bottom { padding: 16px 20px; }

  /* store */
  .store-header { padding: calc(var(--nav-h) + 28px) 20px 28px; }
  .store-header h1 { font-size: 36px; }
  .store-header-inner { flex-direction: column; gap: 12px; }
  .type-tabs { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .type-tabs-inner { padding: 0 20px; gap: 0; width: max-content; }
  .type-tab { padding: 14px 18px; font-size: 12px; white-space: nowrap; }
  .store-body { grid-template-columns: 1fr; padding: 20px 20px 60px; }
  .sidebar { position: static; }
  .sidebar-section { margin-bottom: 20px; }
  .filter-group { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .filter-btn { padding: 7px 14px; border-radius: 20px; font-size: 12px; }
  .products-top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sort-select { width: 100%; }

  /* product detail */
  .product-main { grid-template-columns: 1fr; gap: 32px; padding: 20px 20px 48px; }
  .product-gallery { position: static; }
  .main-img { height: 300px; font-size: 80px; }
  .product-name { font-size: 34px; }
  .product-price { font-size: 26px; }
  .spec-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .length-options { gap: 8px; }
  .length-btn { padding: 8px 14px; font-size: 12px; }
  .action-row { flex-direction: column; gap: 10px; }
  .btn-primary { width: 100%; text-align: center; justify-content: center; }
  .btn-wishlist { width: 100%; border-radius: 40px; padding: 14px; }
  .related-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .related-section { padding: 0; }
  .related-inner { padding: 0 20px; }
  .reviews-section { padding: 0 20px 48px; }
  .breadcrumb { padding: calc(var(--nav-h) + 16px) 20px 0; }

  /* cart */
  .cart-layout { grid-template-columns: 1fr; gap: 24px; }
  .cart-wrap { padding: 28px 20px 60px; }
  .page-header { padding: calc(var(--nav-h) + 24px) 20px 24px; }
  .page-header h1 { font-size: 36px; }
  .checkout-steps { gap: 0; }
  .cs { font-size: 11px; gap: 6px; }
  .cs-num { width: 24px; height: 24px; font-size: 10px; }
  .cs-line { margin: 0 8px; }
  .cart-item { flex-wrap: wrap; gap: 14px; padding: 18px 0; }
  .item-img { width: 72px; height: 72px; font-size: 28px; }
  .item-price { width: 100%; text-align: left; font-size: 16px; }
  .order-summary { position: static; }

  /* checkout */
  .checkout-layout { grid-template-columns: 1fr; }
  .page-wrap { padding: calc(var(--nav-h) + 28px) 20px 56px; }
  .summary-box { position: static; }
  .stepper { gap: 0; margin-bottom: 28px; }
  .step { font-size: 11px; gap: 6px; }
  .step-num { width: 26px; height: 26px; font-size: 11px; }
  .step-line { margin: 0 8px; }
  .panel-body { padding: 20px; }
  .panel-header { padding: 16px 20px; }
  .addr-form { padding: 18px; }
  .form-row { grid-template-columns: 1fr; gap: 12px; }
  .form-row.three { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column; }
  .btn-save-addr, .btn-cancel-form { width: 100%; text-align: center; justify-content: center; }

  /* account / edit-address */
  .profile-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .tab { font-size: 12px; padding: 12px 16px; }
  .form-card { padding: 20px; }
  .form-row { grid-template-columns: 1fr; gap: 12px; }
  .form-row.three { grid-template-columns: 1fr; }
  .address-card { flex-direction: column; gap: 10px; }
  .address-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .order-card { padding: 16px; }
  .order-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .order-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
  .order-items-list { gap: 6px; }

  /* toast */
  .toast { left: 16px; right: 16px; bottom: 20px; border-radius: 12px; text-align: center; }
}

/* ── BREAKPOINT: ≤480px (small phones) ──────────────────────── */
@media (max-width: 480px) {
  .hero-title { font-size: clamp(32px, 10vw, 44px) !important; }
  .hero-cta .btn-primary, .hero-cta .btn-ghost { font-size: 12px; padding: 13px 24px; }
  .product-name { font-size: 28px; }
  .spec-grid { grid-template-columns: 1fr; }
  .length-btn { font-size: 11px; padding: 7px 10px; }
  .related-grid { grid-template-columns: 1fr; }
  .cart-item {  align-items: flex-start; }
  .item-img { align-self: center; }
  .addr-card {  }
  .success-screen { padding: 48px 16px; }
  .success-screen h2 { font-size: 32px; }
  .success-actions { flex-direction: column; }
  .success-actions a { width: 100%; justify-content: center; }
}

/* ── Desktop-specific enhancements (≥1280px) ─────────────────── */
@media (min-width: 1280px) {
  .hero-left { padding: 100px 80px 100px 72px; }
  .product-main { padding: 48px 72px 100px; }
  .reviews-section { padding: 0 72px 100px; }
  .related-inner { padding: 0 72px; }
  .breadcrumb { padding-left: 72px; padding-right: 72px; }
}