/* ============================================
   瞳泽行 - 移动端专属适配优化
   适配小屏幕：搜索框宽大、分类入口放大、商品卡片优化
   ============================================ */

/* 移动端标语区：默认隐藏，仅手机端显示在页面底部 */
.mobile-brand-banner {
  display: none;
}

/* ---------- 手机端通用（≤768px） ---------- */
@media (max-width: 768px) {

  /* 底部移动端标语 */
  .mobile-brand-banner {
    display: block;
    text-align: center;
    padding: 24px 24px 10px;
  }
  .mobile-brand-banner .mb-slogan {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 1px;
    margin-bottom: 8px;
  }
  .mobile-brand-banner .mb-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
  }

  /* 容器边距收紧 */
  .container { padding: 0 16px; }

  /* ---------- 导航栏 ---------- */
  .navbar { height: 56px; }
  .nav-container { padding: 0 16px; }
  .logo { font-size: 18px; }
  .nav-menu {
    display: none;
    position: absolute;
    top: 56px; left: 0; right: 0;
    background: var(--bg-primary);
    flex-direction: column;
    padding: 12px 16px;
    gap: 0;
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
    z-index: 999;
  }
  .nav-menu.open { display: flex; }
  .nav-menu .nav-link {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 16px;
  }
  .nav-menu .nav-link:last-child { border-bottom: none; }
  .nav-toggle { display: flex; }
  .nav-right { gap: 8px; }
  .nav-contact {
    padding: 6px 12px;
    font-size: 12px;
  }
  .nav-cart { width: 36px; height: 36px; font-size: 18px; }
  .cart-badge {
    top: 0; right: 0;
    min-width: 16px; height: 16px;
    font-size: 10px;
  }

  /* ---------- Hero 首屏：压缩高度，减少留白 ----------
     手机端隐藏顶部标语（已移至页面底部），仅保留搜索框 */
  .hero {
    padding: calc(56px + 12px) 16px 14px;
  }
  .hero .hero-title,
  .hero .hero-subtitle {
    display: none;
  }

  /* ---------- 搜索框：宽大优化 + 按钮内嵌 ---------- */
  .hero-search {
    position: relative;
    max-width: 100%;
    flex-direction: row; /* 按钮内嵌，整体只占一行高度 */
    gap: 0;
  }
  .search-input {
    flex: 1;
    height: 46px;
    width: 100%;
    padding: 0 84px 0 18px; /* 右侧预留内嵌按钮空间 */
    font-size: 16px; /* 16px防止iOS自动缩放 */
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md); /* 四周同圆角 */
  }
  .search-btn {
    position: absolute;
    top: 4px; right: 4px;
    height: 38px;
    width: 76px;
    font-size: 15px;
    border-radius: 10px;
    padding: 0;
  }

  /* 列表页搜索框 */
  .list-search {
    padding: 16px 16px 0;
  }
  .list-search .search-input {
    height: 48px;
  }

  /* ---------- 分类入口：移动端一行4列，高度压缩 ---------- */
  .category-section { padding: 8px 0 4px; }
  .category-grid {
    grid-template-columns: repeat(4, 1fr); /* 强制4列不换行 */
    gap: 6px;
  }
  .category-card {
    padding: 7px 3px;
    gap: 3px;
  }
  .category-icon { font-size: 19px; }
  .category-name { font-size: 10px; }
  .category-desc { font-size: 9px; }

  /* ---------- 商品区域：上移 ---------- */
  .products-section { padding: 12px 0 50px; }
  .section-title { font-size: 19px; margin-bottom: 12px; }
  .section-header { margin-bottom: 12px; }

  /* 筛选标签 */
  .filter-bar {
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .filter-tag {
    padding: 8px 18px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ---------- 商品卡片：图片放大，文字缩小 ---------- */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .product-card { border-radius: 10px; }
  .card-image { aspect-ratio: 1 / 1; }
  .card-body {
    padding: 10px 10px 12px;
  }
  .card-title {
    font-size: 13px;
    margin-bottom: 4px;
    -webkit-line-clamp: 1;
  }
  .card-tags {
    gap: 4px;
    margin-bottom: 6px;
  }
  .card-tag {
    font-size: 10px;
    padding: 1px 5px;
  }
  .card-summary {
    font-size: 11px;
    line-height: 1.4;
    margin-bottom: 8px;
    -webkit-line-clamp: 1; /* 手机端只显示1行摘要 */
  }
  .card-price {
    font-size: 16px;
  }
  .card-price .currency { font-size: 11px; }
  .card-stock {
    font-size: 11px;
    margin-top: 3px;
  }

  /* ---------- 详情页 ---------- */
  .product-detail {
    padding: calc(56px + 16px) 0 40px;
  }
  .breadcrumb {
    font-size: 12px;
    margin-bottom: 16px;
    padding: 0 16px;
  }
  .product-layout { gap: 20px; padding: 0 16px; }
  .product-title { font-size: 20px; margin-bottom: 10px; }
  .product-tags { margin-bottom: 14px; }
  .product-price-row {
    padding: 14px 16px;
    margin-bottom: 16px;
  }
  .product-price { font-size: 26px; }
  .product-summary {
    font-size: 14px;
    margin-bottom: 18px;
  }
  .product-spec { margin-bottom: 18px; }
  .spec-item { padding: 8px 0; font-size: 13px; }
  .spec-label { width: 70px; }

  /* 数量选择 */
  .quantity-row { margin-bottom: 16px; }
  .qty-btn { width: 40px; height: 40px; font-size: 20px; }
  .qty-input { width: 56px; height: 40px; font-size: 16px; }

  /* 详情页按钮 */
  .btn-group { gap: 10px; }
  .btn-add-cart, .btn-whatsapp {
    height: 48px;
    font-size: 14px;
  }
  .btn-back { height: 42px; font-size: 13px; }

  /* 缩略图 */
  .thumbnail { width: 56px; height: 56px; }

  /* 详情卡片 */
  .detail-card {
    padding: 20px 16px;
    margin: 0 16px 16px;
  }
  .detail-card-title { font-size: 16px; margin-bottom: 14px; }
  .detail-card-body { font-size: 13px; line-height: 1.9; }

  /* ---------- 购物车页 ---------- */
  .cart-page {
    padding: calc(56px + 16px) 0 40px;
  }
  .cart-title {
    font-size: 20px;
    margin-bottom: 16px;
    padding: 0 16px;
    border-left: none;
  }
  .cart-layout {
    gap: 16px;
    padding: 0 16px;
  }
  .cart-item {
    padding: 14px;
    gap: 12px;
  }
  .cart-item-img { width: 72px; height: 72px; }
  .cart-item-name { font-size: 14px; }
  .cart-item-spec { font-size: 11px; }
  .cart-item-price { font-size: 15px; }
  .cart-summary { padding: 18px; }
  .cart-summary-title { font-size: 16px; margin-bottom: 14px; }
  .cart-summary-total .value { font-size: 22px; }
  .btn-checkout { height: 48px; font-size: 15px; }

  /* ---------- 页脚 ---------- */
  .footer { padding: 32px 0 18px; }
  .footer-content {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 16px;
  }
  .footer-bottom { padding-top: 18px; font-size: 12px; }
  .footer-notice { font-size: 11px; }

  /* ---------- Toast提示 ---------- */
  .toast {
    top: 70px;
    padding: 10px 22px;
    font-size: 13px;
  }

  /* ---------- 咨询弹窗：移动端适配 ---------- */
  .modal-box {
    padding: 20px;
    max-width: 100%;
  }
  .modal-option {
    padding: 16px;
    font-size: 16px;
  }
  .wechat-qr {
    width: 180px;
    height: 180px;
  }
  .btn-open-wechat {
    padding: 14px;
    font-size: 16px;
  }
}

/* ---------- 超小屏（≤380px）进一步优化 ---------- */
@media (max-width: 380px) {
  .category-card { padding: 6px 2px; }
  .category-icon { font-size: 17px; }
  .category-name { font-size: 9px; }
  .card-body { padding: 8px 8px 10px; }
  .card-title { font-size: 12px; }
  .card-price { font-size: 15px; }
  .nav-contact { padding: 5px 10px; font-size: 11px; }
}