/* ============================================================
   LashBeauty - 移动端响应式样式
   断点: 1024px, 768px, 375px
   触控优化 · Notch适配 · 横屏适配
   ============================================================ */

@media (max-width: 1024px) {
  :root { --header-height: 60px; }
  .container { padding: 0 var(--sp-4); }
  .nav-list { gap: var(--sp-4); }
  .mega-grid { grid-template-columns: repeat(2, 1fr); }
  .mega-menu { min-width: auto; left: 0; transform: none; }
  .product-grid, .product-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-badges { grid-template-columns: repeat(2, 1fr); }
  .shop-layout { grid-template-columns: 200px 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-sidebar { position: static; }
  .account-layout { grid-template-columns: 200px 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: var(--sp-16) 0; }
  .hero-content h1 { font-size: var(--fs-4xl); }
  .hero-image { width: 45%; right: -10%; }
  .product-main { grid-template-columns: 1fr; gap: var(--sp-8); }
  .product-gallery { position: static; }
}

@media (max-width: 768px) {
  /* Mobile Navigation */
  .main-nav { display: none; }
  .mobile-menu-toggle { display: flex; }
  
  /* Header */
  .header-inner { justify-content: space-between; }
  .header-actions { gap: var(--sp-1); }
  .header-action-btn { width: 36px; height: 36px; }
  .lang-dropdown { right: auto; left: 0; }
  
  /* Hero */
  .hero { padding: var(--sp-12) 0; text-align: center; }
  .hero-content { max-width: 100%; }
  .hero-content h1 { font-size: var(--fs-3xl); }
  .hero-content p { font-size: var(--fs-base); }
  .hero-actions { justify-content: center; }
  .hero-image { position: relative; width: 100%; right: auto; top: auto; transform: none; margin-top: var(--sp-8); }
  
  /* Grids */
  .product-grid, .product-grid-3 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .blog-grid { grid-template-columns: 1fr; }
  .trust-badges { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  
  /* Shop */
  .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar { display: none; }
  .shop-sidebar.open { display: block; }
  
  /* Product */
  .product-actions { flex-direction: column; }
  
  /* Cart Drawer */
  .cart-drawer-content { width: 100%; max-width: 100vw; }
  
  /* Checkout */
  .checkout-layout { grid-template-columns: 1fr; }
  
  /* Account */
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar { display: none; }
  
  /* Popup */
  .popup-content { flex-direction: column; max-width: 90%; }
  .popup-image { width: 100%; height: 180px; }
  .popup-text { width: 100%; padding: var(--sp-6); }
  
  /* Cookie */
  .cookie-consent { flex-direction: column; gap: var(--sp-3); }
  
  /* Order table */
  .order-table { font-size: var(--fs-xs); }
  .order-table thead { display: none; }
  .order-table tbody tr { display: block; padding: var(--sp-3); border-bottom: 1px solid var(--c-border); }
  .order-table td { display: flex; justify-content: space-between; padding: var(--sp-1) 0; border: none; }
  .order-table td::before { content: attr(data-label); font-weight: 600; color: var(--c-text); }
  
  /* Auth */
  .auth-card { padding: var(--sp-6); }
  
  /* Sections */
  .section { padding: var(--sp-12) 0; }
  .section-header { margin-bottom: var(--sp-8); }
  .section-header h2 { font-size: var(--fs-2xl); }
  
  /* Search */
  .search-overlay { padding-top: 10vh; }
  .search-inner { max-width: 90%; }
  .search-form { flex-direction: column; }
  .search-submit-btn { width: 100%; }
}

@media (max-width: 375px) {
  .product-grid, .product-grid-3 { grid-template-columns: 1fr; gap: var(--sp-4); }
  .trust-badges { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-content h1 { font-size: var(--fs-2xl); }
  .section-header h2 { font-size: var(--fs-xl); }
  .header-inner .lang-switcher { display: none; }
  
  /* Ensure touch targets are at least 44px */
  .btn { min-height: 44px; }
  .product-action-btn { width: 44px; height: 44px; }
  .header-action-btn { width: 44px; height: 44px; }
}

/* === Touch Optimization === */
@media (hover: none) {
  .product-card-actions { opacity: 1; transform: translateX(0); }
  .product-card:hover { transform: none; }
  .mega-menu { display: none; }
  .has-mega-menu:active .mega-menu,
  .has-mega-menu:focus-within .mega-menu { display: block; opacity: 1; visibility: visible; }
}

/* === Notch / Safe Area === */
@supports (padding: env(safe-area-inset-top)) {
  .site-header { padding-top: env(safe-area-inset-top); }
  .mobile-nav { padding-top: env(safe-area-inset-top); }
  .cart-drawer-content { padding-top: env(safe-area-inset-top); }
}

/* === Landscape Orientation === */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { padding: var(--sp-6) 0; }
  .auth-page { min-height: auto; padding: var(--sp-4); }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* === Print Styles === */
@media print {
  .site-header, .site-footer, .promo-bar, .cart-drawer,
  .search-overlay, .mobile-nav, .cookie-consent, .popup-overlay { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
}