/* ================================================
   LUMIÈRE 商城 - 响应式布局
   所有 @media 查询统一管理
   ================================================ */

/* ======== 平板（max-width: 1024px） ======== */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .features-inner { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .recently-viewed-grid { grid-template-columns: repeat(2, 1fr); }
  .products-area { padding: 40px 20px 0; }
  .detail-right,
  .detail-page.active .detail-right {
    width: 380px;
    padding: 15px;
    max-height: none;
    overflow: visible;
  }
  .detail-left { width: 55%; padding-right: 20px; flex-shrink: 0; }
  .detail-main { flex-direction: row; }
}

/* --- 价格排序下拉菜单（通用，适用于桌面端和手机端） --- */
.price-sort-menu {
  position: fixed !important;
  z-index: 200 !important;
  background: var(--deep-card) !important;
  border: 1px solid var(--dark-flow) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
  min-width: 160px !important;
}
.price-sort-menu .sort-option {
  display: block !important;
  width: 100% !important;
  padding: 8px 14px !important;
  text-align: left !important;
  background: none !important;
  border: none !important;
  color: var(--cloud-white) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  transition: background .15s !important;
}
.price-sort-menu .sort-option:hover,
.price-sort-menu .sort-option.active {
  background: var(--deep-sea) !important;
  color: var(--moonlight-gold) !important;
}

/* ======== 手机端（max-width: 768px） ======== */
@media (max-width: 768px) {
  /* --- 隐藏顶部公告栏 --- */
  .announcement-bar { display: none !important; }
  :root { --announcement-height: 0px !important; }

  /* --- 隐藏收藏和返回按钮（手机端不需要） --- */
  .header-actions a[onclick*="wishlist"] { display: none !important; }
  .header-actions a[onclick*="goBack"] { display: none !important; }

  /* header 整体 fixed，三行内部自然堆叠不再各自独立定位 */
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
  }

  /* ==================== 3行固定布局 ==================== */
  /* body 补偿 = Row1(44px) + Row2(34px) + Row3(34px) = 112px */
  /* body padding-top 由 JS 动态计算（加在 body 上） */
  body { padding-top: 112px; }

  /* --- Row1：顶部操作栏（LOGO + 搜索 + 汉堡）--- */
  .header-top {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 4px 8px !important;
    gap: 4px !important;
    background: var(--deep-sea) !important;
    height: 44px !important;
  }
  /* Row1 里的操作按钮隐藏（它们被移到 mobile-actions-row） */
  .header-top .header-actions { display: none !important; }

  /* Logo 缩小 */
  .logo {
    font-size: 20px !important;
    letter-spacing: 1px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .logo .logo-img { max-height: 28px; max-width: 90px; }
  .logo #logo-sub { font-size: 11px !important; letter-spacing: 1px !important; }

  /* 搜索栏缩小 */
  .search-bar { flex: 1 !important; min-width: 50px !important; margin: 0 4px !important; }
  .search-bar input {
    padding: 3px 6px 3px 22px !important;
    font-size: 12px !important;
    height: 26px !important;
  }
  .search-icon { left: 6px !important; font-size: 16px !important; }
  .hamburger-btn {
    font-size: 18px !important;
    padding: 2px 4px !important;
    flex-shrink: 0 !important;
  }

  /* --- Row2：操作按钮栏（Home / Cart / Wishlist / Orders / SignIn）--- */
  .mobile-actions-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0px !important;
    height: auto !important;
    min-height: 34px !important;
    background: var(--deep-card) !important;
    border-bottom: 1px solid var(--dark-flow) !important;
    padding: 2px 4px !important;
  }
  .mobile-action-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 4px 8px !important;
    font-size: 16px !important;
    color: var(--mist-gray) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: color .2s !important;
  }
  .mobile-action-link:hover,
  .mobile-action-link:active { color: var(--moonlight-gold) !important; }
  .mobile-auth-link {
    margin-left: auto !important;
    margin-right: 0.5cm !important;
    padding: 3px 10px !important;
    border: 1px solid var(--moonlight-gold) !important;
    border-radius: 14px !important;
    color: var(--moonlight-gold) !important;
    font-weight: 600 !important;
  }
  .mobile-actions-row .cart-badge {
    font-size: 10px !important;
    min-width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
  }

  /* --- Row3：分类导航栏 --- */
  #header-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    height: 34px !important;
    padding: 2px 8px !important;
    background: var(--deep-sea) !important;
    border-bottom: 1px solid var(--dark-flow) !important;
  }
  #nav-tags-container a {
    font-size: 13px !important;
    padding: 3px 8px !important;
  }

  /* --- 旧价格筛选栏不再固定，转为隐藏（替代为价格排序按钮） --- */
  #price-filter-bar { display: none !important; }

  /* --- 价格排序按钮（在 .section-title 内，保持标题居中） --- */
  .section-title {
    position: relative !important;
    text-align: center !important;
  }
  .section-title h2 { font-size: 20px !important; }
  .section-title p { font-size: 16px !important; margin-bottom: 0 !important; }
  .products-area .section-title { margin-bottom: 16px !important; }
  .price-sort-btn {
    position: absolute !important;
    right: 0.5cm !important;
    top: 50% !important;
    transform: translateY(calc(-50% - 11px)) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 3px 8px !important;
    font-size: 16px !important;
    color: var(--moonlight-gold) !important;
    background: transparent !important;
    border: 1px solid var(--moonlight-gold) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all .2s !important;
    font-weight: 500 !important;
  }
  .price-sort-btn:hover,
  .price-sort-btn:active {
    background: var(--moonlight-gold) !important;
    color: var(--deep-sea) !important;
  }
  /* --- 首页横幅缩小 --- */
  .hero-banner {
    height: auto !important;
    min-height: auto !important;
    padding: 14px 12px !important;
    margin-top: 38px !important;
    background: linear-gradient(135deg, var(--deep-sea) 0%, var(--starlight) 40%, var(--deep-card) 70%, var(--deep-sea) 100%) !important;
  }
  .hero-banner .hero-bg { display: none !important; }
  .hero-content h1 {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }
  .hero-content p {
    font-size: 16px !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }
  .hero-btn {
    padding: 14px 18px 4px 18px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  /* --- 信任条：自适应折行 --- */
  .trust-bar { padding: 4px 8px !important; }
  .trust-items {
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .trust-item {
    font-size: 16px !important;
    gap: 2px !important;
    white-space: nowrap !important;
  }
  .trust-icon { font-size: 16px !important; }

  /* --- 商品网格：2列 --- */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .product-image { height: 160px; }
  .product-info { padding: 8px; }
  .product-name { font-size: 16px; }
  .product-desc { font-size: 16px; -webkit-line-clamp: 1; }
  .product-price { font-size: 16px; }
  .product-btns-row { flex-direction: row; gap: 4px; }
  .product-btns-row button { flex: 1; font-size: 11px; padding: 6px 4px; }
  .product-add-btn { font-size: 12px; padding: 8px; }
  .product-view-btn { font-size: 12px; padding: 8px; }

  /* --- 分类网格：2列 --- */
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 12px; }
  .category-card { padding: 16px 12px; }
  .category-card h3 { font-size: 16px; }
  .category-card p { font-size: 16px; }
  .category-icon { font-size: 36px; }

  /* --- 特色区域 --- */
  .features-inner { grid-template-columns: 1fr; gap: 20px; }

  /* --- 评价区 --- */
  .review-grid { grid-template-columns: 1fr; }

  /* --- 最近浏览 --- */
  .recently-viewed-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* --- 相关商品 --- */
  .related-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* --- 邮件订阅 --- */
  .newsletter-form { flex-direction: column; }
  .newsletter { padding: 30px 16px; }

  /* --- 页脚 --- */
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-brand { grid-column: 1 / -1; }
  footer { padding: 24px 16px 16px; }

  /* --- 购物车侧栏：全屏 --- */
  .cart-sidebar { width: 100%; right: -100%; }

  /* --- 面包屑 --- */
  .breadcrumb { padding: 10px 12px; font-size: 12px; }

  /* --- 标题区 --- */
  .section-title h2 { font-size: 20px; }
  .section-title p { font-size: 16px; }

  /* --- 商品区域 --- */
  .products-area { padding: 12px 8px 0; }

  /* --- 语言切换器 --- */
  .lang-btn { padding: 3px 8px; font-size: 16px; }
  .language-switcher { padding: 3px 6px; }

  /* --- 聊天窗口：全宽 --- */
  .chat-window { left: 6px; right: 6px; width: auto; bottom: 88px; height: 340px; }

  /* --- 主题/AI按钮：缩小 --- */
  .theme-toggle { position: fixed; width: 40px; height: 40px; font-size: 16px; bottom: 56px; right: 12px; }
  .chat-widget { position: fixed; width: 44px; height: 44px; font-size: 20px; bottom: 56px; left: 12px; }

  /* --- 商品详情页 --- */
  .detail-main { flex-direction: column; }
  .detail-left { width: 100%; padding-right: 0; }
  .detail-right,
  .detail-page.active .detail-right {
    width: 100%;
    position: static;
    margin-top: 16px;
    padding: 0;
    visibility: visible;
    opacity: 1;
  }
  .detail-main-image { height: 260px; }
  .detail-page { padding: 0 12px 32px; }
  .detail-product-name { font-size: 20px; }
  .detail-sale-price { font-size: 22px; }
  .detail-action-btns { flex-direction: column; }
  .detail-tabs { margin-top: 0; }

  /* --- 结算页 --- */
  .checkout-grid { grid-template-columns: 1fr; }
  .order-card { position: static; }
  .checkout-page { padding: 16px; }

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

  /* --- no results --- */
  .no-results { font-size: 16px; padding: 30px 12px; }

  /* --- 搜索建议 --- */
  .search-suggestions .hot-tag { font-size: 16px; padding: 3px 8px; }
  .search-suggestions .suggestion-item { font-size: 16px; padding: 8px 10px; }

  /* --- 按钮和交互元素增大点击区域 --- */
  .qty-btn { min-width: 36px; min-height: 36px; }
}

/* ======== 小屏手机（max-width: 480px） ======== */
@media (max-width: 480px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .product-image { height: 140px; }
  .product-info { padding: 8px; }
  .product-name { font-size: 16px; }
  .product-price { font-size: 16px; }
  .product-btns-row button { font-size: 16px; padding: 6px 4px; }
  .header-actions a { font-size: 16px !important; padding: 2px 4px !important; }
  .hero-content h1 { font-size: 18px !important; }
  .hero-content p { font-size: 16px !important; }
  .trust-item { font-size: 16px !important; }
  .category-card { padding: 14px 12px; }
  .category-card h3 { font-size: 16px; }
  .category-icon { font-size: 36px; }
  .section-title h2 { font-size: 20px; }
  .section-title p { font-size: 16px; }
  .detail-main-image { height: 220px; }
  .detail-product-name { font-size: 19px; }
  .detail-sale-price { font-size: 20px; }
}