/* ========== WOW LUCKDAY 企业官网风格 v2.0 ========== */
/* 主色调: 酒红 #9e1b32 + 金色 #d4a017 — 高级感配色 */
/* 2025-2026 设计趋势升级：CSS变量系统、玻璃态、微交互、骨架屏 */

/* ========== CSS 变量系统 ========== */
:root {
  /* 品牌主色 */
  --wine: #9e1b32;
  --wine-light: #b8334a;
  --wine-dark: #7a1530;
  --wine-soft: #fdf6f6;
  --wine-tint: #fce8ec;
  --gold: #d4af37;
  --gold-light: #e6c260;
  --gold-dark: #b8962e;
  --gold-soft: #fdf8e8;
  --gold-tint: #fff9e0;
  --gold-glow: rgba(212,175,55,0.22);

  /* 辅助色 */
  --teal: #0d7377;
  --teal-light: #14a085;
  --cream: #faf6f0;
  --beige: #f5f0e8;
  --ink: #2c3e50;
  --ink-light: #555;
  --muted: #999;

  /* 功能色 */
  --success: #00b894;
  --success-bg: #e8f5e9;
  --warning: #e65100;
  --warning-bg: #fff3e0;
  --danger: #e74c3c;
  --danger-bg: #ffebee;
  --info: #3498db;
  --info-bg: #e3f2fd;

  /* 背景色 */
  --bg-body: #f8f9fa;
  --bg-card: #ffffff;
  --bg-hover: #f0f4f8;
  --bg-soft: #f8f9fa;

  /* 间距 */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;

  /* 圆角 */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-full: 9999px;

  /* 阴影 */
  --sh-sm: 0 1px 3px rgba(0,0,0,.05);
  --sh-md: 0 4px 12px rgba(0,0,0,.06);
  --sh-lg: 0 10px 28px rgba(0,0,0,.09);
  --sh-xl: 0 20px 56px rgba(0,0,0,.12);
  --sh-wine: 0 6px 20px rgba(158,27,50,.16);
  --sh-gold: 0 6px 20px rgba(212,175,55,.22);
  --sh-card-hover: 0 16px 44px rgba(0,0,0,.13);

  /* 过渡 */
  --tr-fast: .2s ease;
  --tr-base: .3s ease;
  --tr-slow: .5s ease;
  --tr-bounce: .35s cubic-bezier(.4,1.4,.6,1);

  /* 字体 */
  --font-sans: 'Poppins', -apple-system, 'Segoe UI', 'Microsoft YaHei', 'Noto Sans SC', 'PingFang SC', sans-serif;
  --font-display: 'Poppins', 'Noto Sans SC', sans-serif;

  /* 布局 */
  --container-w: 1280px;
  --header-h: 48px;
  --topbar-h: 36px;
}

/* ========== 基础重置 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-sans);
  background: var(--bg-body);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--gold-tint); color: var(--wine-dark); }
a { text-decoration: none; color: var(--ink); transition: color var(--tr-fast); }
ul, li { list-style: none; }
img { display: block; max-width: 100%; }
input, button, textarea, select { font-family: inherit; }
button { cursor: pointer; }

/* ========== Google Fonts 引入 ========== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

/* ========== 顶部条 ========== */
.top-bar {
  background: var(--wine);
  color: #fff;
  font-size: 12px;
  height: var(--topbar-h);
  line-height: var(--topbar-h);
}
.top-bar .wrap { width: var(--container-w); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.top-bar a { color: rgba(255,255,255,.8); margin: 0 8px; }
.top-bar a:hover { color: var(--gold); }
.top-bar .contact-info { display: flex; gap: 16px; align-items: center; }
.top-bar .contact-info span { display: inline-flex; align-items: center; gap: 4px; }

/* ========== Marquee Bar ========== */
.marquee-bar {
  background: linear-gradient(90deg, var(--wine), var(--wine-dark), var(--wine));
  color: #fff;
  height: 36px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}
.marquee-bar::before {
  content: '📢';
  position: absolute;
  left: 12px;
  z-index: 2;
  font-size: 14px;
}
.marquee-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: marquee-scroll 40s linear infinite;
  padding-left: 40px;
}
.marquee-item {
  font-size: 13px;
  margin-right: 60px;
  letter-spacing: 0.5px;
  opacity: 0.95;
}
.marquee-item::before {
  content: '✦ ';
  color: var(--gold);
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-bar:hover .marquee-track {
  animation-play-state: paused;
}

/* ========== Banner Zone ========== */
.banner-zone { background: var(--wine); width: 100%; }
.banner-zone .wrap { width: 100%; max-width: 1920px; margin: 0 auto; }
.banner-zone img { display: block; width: 1920px; height: 265px; object-fit: cover; }

/* ========== Header (毛玻璃效果) ========== */
.header {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 18px 0;
  box-shadow: var(--sh-sm);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow var(--tr-base), background var(--tr-base);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.header.scrolled { box-shadow: var(--sh-md); background: rgba(255,255,255,.96); }
.header .wrap { width: var(--container-w); margin: 0 auto; display: flex; align-items: center; gap: 30px; }
.logo { font-size: 30px; font-weight: 800; color: var(--wine); white-space: nowrap; display: flex; align-items: center; gap: 12px; }
.logo .logo-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--wine), var(--wine-light));
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 22px; font-weight: 900; flex-shrink: 0;
  box-shadow: var(--sh-wine);
}
.logo .logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo .logo-text .name { font-size: 26px; color: var(--wine); }
.logo .logo-text .slogan { font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.logo .divider { width: 1px; height: 36px; background: #e0e0e0; }
.logo .slogan-side { font-size: 13px; color: #666; max-width: 120px; line-height: 1.4; }
.search-area { flex: 1; max-width: 720px; }
.search-box {
  display: flex;
  border: 2px solid var(--wine);
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow var(--tr-fast), border-color var(--tr-fast);
}
.search-box:focus-within { box-shadow: 0 0 0 4px rgba(158,27,50,.1); border-color: var(--wine-light); }
.search-box input { flex: 1; border: none; outline: none; padding: 10px 20px; font-size: 14px; background: transparent; }
.search-box button {
  background: linear-gradient(135deg, var(--wine), var(--wine-light));
  color: #fff; border: none; padding: 0 36px; font-size: 15px;
  white-space: nowrap; transition: opacity var(--tr-fast);
  position: relative; overflow: hidden;
}
.search-box button:hover { opacity: .9; }
.search-box button::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: translate(-50%,-50%);
  transition: width .4s, height .4s;
}
.search-box button:active::after { width: 200px; height: 200px; }
.hot-words { margin-top: 8px; font-size: 12px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.hot-words a { color: var(--muted); }
.hot-words a:hover { color: var(--wine); }

/* ========== 导航栏 (毛玻璃) ========== */
.nav {
  background: linear-gradient(135deg, var(--wine) 0%, var(--wine-light) 100%);
  height: var(--header-h);
  position: sticky;
  top: 36px;
  z-index: 99;
  box-shadow: 0 3px 12px rgba(158,27,50,.22);
}
.nav .wrap { width: var(--container-w); margin: 0 auto; height: var(--header-h); display: flex; align-items: center; }
.nav .cat-trigger {
  background: rgba(0,0,0,.15);
  color: #fff;
  width: 220px;
  height: var(--header-h);
  line-height: var(--header-h);
  text-align: center;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  position: relative;
  border-left: 3px solid var(--gold);
  transition: background var(--tr-fast);
  text-decoration: none; display: block;
}
.nav .cat-trigger:hover { background: rgba(0,0,0,.25); }
.nav .cat-trigger::after { content: " ▾"; font-size: 11px; }

/* ========== 顶栏分类下拉（hover 展开） ========== */
.nav-dropdown {
  position: absolute; top: var(--header-h); left: 0;
  width: 220px; max-height: 70vh; overflow-y: auto;
  background: #fff; border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--sh-lg); z-index: 98; padding: 8px 0;
  display: none;
  border-top: 2px solid var(--gold);
}
.nav .wrap:hover .nav-dropdown,
.nav .cat-trigger:focus + .nav-dropdown,
.nav .cat-trigger:hover + .nav-dropdown { display: block; }
.nav-drop-item { position: relative; }
.nav-drop-main {
  display: block; padding: 10px 18px; font-size: 14px;
  color: #333; text-decoration: none; transition: all var(--tr-fast);
  border-left: 3px solid transparent;
}
.nav-drop-main:hover { background: var(--wine-soft); color: var(--wine); border-left-color: var(--gold); }
.nav-drop-sub {
  position: absolute; left: 100%; top: 0;
  min-width: 200px; background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg); padding: 12px;
  display: none; z-index: 99;
}
.nav-drop-item:hover .nav-drop-sub { display: block; }
.nav-drop-sub a {
  display: inline-block; margin: 4px 6px; font-size: 12px;
  color: #666; padding: 3px 10px; border-radius: var(--r-full);
  background: var(--bg-soft); text-decoration: none;
  transition: all var(--tr-fast);
}
.nav-drop-sub a:hover { color: #fff; background: var(--wine); }
.nav .menu-items { flex: 1; display: flex; gap: 32px; padding-left: 30px; height: var(--header-h); align-items: center; }
.nav .menu-items a {
  font-size: 15px; color: #fff;
  position: relative;
  height: var(--header-h); line-height: var(--header-h);
  transition: color var(--tr-fast);
}
.nav .menu-items a::after {
  content: ""; position: absolute; bottom: 0; left: 50%;
  width: 0; height: 2px; background: var(--gold);
  transition: all var(--tr-base); transform: translateX(-50%);
}
.nav .menu-items a:hover::after, .nav .menu-items a.active::after { width: 100%; }
.nav .menu-items a.active { color: var(--gold); }

/* ========== 主体布局 ========== */
.main { width: var(--container-w); margin: 16px auto; display: flex; gap: 16px; }

/* ========== 左侧分类 ========== */
.sidebar {
  width: 220px; background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 10px 0; flex-shrink: 0;
  box-shadow: var(--sh-md);
  border: 1px solid rgba(0,0,0,0.04);
}
.sidebar .cat-item {
  padding: 10px 18px; font-size: 13px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  transition: all var(--tr-fast);
  border-left: 3px solid transparent;
  margin: 0 8px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.sidebar .cat-item:hover { background: var(--wine-soft); color: var(--wine); border-left-color: var(--gold); }
.sidebar .cat-item .arrow { color: #ccc; font-size: 12px; }
.sidebar .cat-item .sub-cats {
  display: none; position: absolute; left: 220px; top: 0;
  width: 220px; background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); z-index: 100; padding: 12px;
}
.sidebar .cat-item:hover .sub-cats { display: block; }
.sidebar .cat-item .sub-cats a {
  display: inline-block; margin: 4px 6px; font-size: 12px;
  color: #666; padding: 3px 10px; border-radius: var(--r-full);
  background: var(--bg-soft);
}
.sidebar .cat-item .sub-cats a:hover { color: #fff; background: var(--wine); }
.sidebar .cat-wrap { position: relative; }

/* ========== 右侧内容 ========== */
.content { flex: 1; min-width: 0; }

/* ========== Banner 轮播 (升级视差+渐变叠加) ========== */
.banner-area { display: flex; gap: 12px; margin-bottom: 16px; }
.banner {
  flex: 1; height: 400px;
  border-radius: var(--r-lg);
  overflow: hidden; position: relative;
  box-shadow: var(--sh-md);
}
.banner .slides {
  display: flex;
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
  height: 100%;
}
.banner .slide {
  min-width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 32px; font-weight: bold;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  position: relative;
}
.banner .slide::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to top, rgba(158,27,50,.6), transparent);
  pointer-events: none;
}
.banner .slide::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 100%;
  background: radial-gradient(ellipse at 30% 40%, rgba(255,255,255,.08), transparent 60%);
  pointer-events: none;
}
.banner .slide-text {
  text-align: center; z-index: 3; padding: 0 40px;
  animation: fadeInUp .6s ease both;
}
.banner .slide-title {
  font-size: 42px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  margin-bottom: 12px; letter-spacing: 2px;
}
.banner .slide-sub {
  font-size: 22px; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
  margin-bottom: 8px;
}
.banner .slide-tag {
  font-size: 15px; color: rgba(255,255,255,.85);
  letter-spacing: 1px;
}
.banner .slide-cta {
  display: inline-block; margin-top: 16px;
  padding: 10px 32px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #fff; border-radius: var(--r-full);
  font-size: 15px; font-weight: 600;
  text-shadow: none;
  box-shadow: var(--sh-gold);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast);
}
.banner .slide-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,160,23,.35); }
.banner .dots {
  position: absolute; bottom: 16px; left: 50%;
  transform: translateX(-50%); display: flex; gap: 8px; z-index: 2;
}
.banner .dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.4); cursor: pointer;
  transition: all var(--tr-base);
}
.banner .dots span.active {
  background: var(--gold); width: 28px; border-radius: 5px;
}
.banner .arrow-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  background: rgba(255,255,255,.25);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 22px;
  opacity: 0; transition: all var(--tr-base); z-index: 2;
}
.banner:hover .arrow-btn { opacity: 1; }
.banner .arrow-btn:hover { background: rgba(255,255,255,.4); }
.banner .arrow-btn.prev { left: 16px; }
.banner .arrow-btn.next { right: 16px; }

/* ========== 推广卡片 (玻璃态) ========== */
.promo-col { width: 240px; display: flex; flex-direction: column; gap: 12px; }
.promo-card {
  height: 130px;
  border-radius: var(--r-md);
  padding: 18px; color: #fff; cursor: pointer;
  transition: transform var(--tr-bounce), box-shadow var(--tr-base);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.promo-card::before {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .5s;
}
.promo-card:hover::before { left: 100%; }
.promo-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.promo-card h4 { font-size: 16px; margin-bottom: 6px; font-weight: 700; }
.promo-card p { font-size: 12px; opacity: .9; line-height: 1.5; }
.promo-card .promo-icon { font-size: 24px; margin-bottom: 8px; }
.promo-card:nth-child(1) { background: linear-gradient(135deg, var(--wine), var(--wine-light)); }
.promo-card:nth-child(2) { background: linear-gradient(135deg, var(--gold), var(--gold-light)); }
.promo-card:nth-child(3) { background: linear-gradient(135deg, var(--teal), var(--teal-light)); }

/* 门店地址卡片（替代原三张推广卡） */
.promo-card.store-card { flex: 1; height: auto; justify-content: center; }
.promo-card.store-card .store-sub { font-size: 12px; opacity: .85; margin-top: 8px; line-height: 1.7; }
.promo-card.store-card .promo-icon { font-size: 28px; }

/* ========== 筛选条 ========== */
.filter-bar {
  background: var(--bg-card); border-radius: var(--r-lg);
  padding: 14px 22px; margin-bottom: 18px;
  display: flex; align-items: center; gap: 16px;
  font-size: 13px; box-shadow: var(--sh-md); flex-wrap: wrap;
  border: 1px solid rgba(0,0,0,0.04);
}
.filter-bar .sort-item {
  cursor: pointer; color: #666; padding: 5px 14px;
  border-radius: var(--r-full); transition: all var(--tr-fast); font-size: 13px;
}
.filter-bar .sort-item:hover { color: var(--wine); background: var(--bg-hover); }
.filter-bar .sort-item.active { color: #fff; background: var(--wine); }
.filter-bar .price-range { display: flex; align-items: center; gap: 6px; }
.filter-bar .price-range input {
  width: 70px; border: 1px solid #ddd; border-radius: var(--r-sm);
  padding: 5px 8px; font-size: 12px; outline: none;
  transition: border-color var(--tr-fast);
}
.filter-bar .price-range input:focus { border-color: var(--wine); }
.filter-bar .price-range button {
  background: linear-gradient(135deg, var(--wine), var(--wine-light));
  color: #fff; border: none; padding: 5px 14px;
  border-radius: var(--r-sm); font-size: 12px;
}
.filter-bar .price-range button:hover { opacity: .9; }

/* ========== 楼层标题 ========== */
.section-title {
  font-size: 22px; font-weight: 700;
  margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
  color: var(--wine);
}
.section-title::before {
  content: ""; display: inline-block;
  width: 4px; height: 22px;
  background: var(--gold); border-radius: 2px;
}

/* ========== 商品卡片 (3D倾斜+快捷操作) ========== */
.product-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 12px; margin-bottom: 20px;
}
.product-card {
  background: var(--bg-card); border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer;
  transition: transform var(--tr-base), box-shadow var(--tr-base);
  box-shadow: var(--sh-md);
  position: relative;
  border: 1px solid rgba(0,0,0,0.04);
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-card-hover);
  border-color: rgba(212,175,55,0.2);
}
.product-card .img-box {
  width: 100%; height: 220px; overflow: hidden; position: relative;
  background: var(--bg-soft);
}
.product-card .img-box img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.product-card:hover .img-box img { transform: scale(1.1); }

/* 商品卡片标签系统升级 */
.product-card .tag {
  position: absolute; top: 10px; left: 10px;
  font-size: 11px; padding: 3px 10px;
  border-radius: var(--r-full); color: #fff;
  font-weight: 600; z-index: 1;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.product-card .tag.factory { background: rgba(158,27,50,.85); }
.product-card .tag.hot { background: linear-gradient(135deg, rgba(212,160,23,.9), rgba(230,180,34,.9)); }
.product-card .tag.new { background: rgba(13,115,119,.85); }
.product-card .tag.sale { background: rgba(231,76,60,.85); }

/* 商品卡片快捷操作浮层 */
.product-card .quick-actions {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; gap: 6px; padding: 10px;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--tr-base), transform var(--tr-base);
  z-index: 2;
  pointer-events: none; /* 浮层本身不拦截点击，避免透明层挡住卡片跳转 */
}
.product-card:hover .quick-actions { opacity: 1; transform: translateY(0); }
.product-card .quick-actions .qa-btn {
  flex: 1; padding: 6px 10px;
  border: none; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: transform var(--tr-fast);
  pointer-events: auto; /* 按钮本身可点击 */
}
/* 触屏设备（无 hover）：加购按钮常驻显示，否则按钮永远看不见 */
@media (hover: none) {
  .product-card .quick-actions { opacity: 1; transform: translateY(0); }
}
.product-card .quick-actions .qa-btn:hover { transform: scale(1.05); }
.product-card .quick-actions .qa-cart {
  background: var(--wine); color: #fff;
}
.product-card .quick-actions .qa-fav {
  background: rgba(255,255,255,.9); color: var(--wine); width: 36px; flex: none;
}

/* 库存进度条 */
.product-card .stock-bar {
  height: 4px; background: #f0f0f0; border-radius: 2px;
  margin: 6px 14px 0; overflow: hidden;
}
.product-card .stock-bar-fill {
  height: 100%; border-radius: 2px;
  transition: width .6s ease;
}
.product-card .stock-bar-fill.high { background: linear-gradient(90deg, var(--success), #2e7d32); }
.product-card .stock-bar-fill.mid { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.product-card .stock-bar-fill.low { background: linear-gradient(90deg, var(--danger), #c62828); }

.product-card .info { padding: 10px 14px 14px; }
.product-card .title {
  font-size: 13px; line-height: 1.5;
  height: 38px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  margin-bottom: 8px; color: var(--ink);
  transition: color var(--tr-fast);
}
.product-card:hover .title { color: var(--wine); }
.price-tier { margin-bottom: 6px; }
.price-tier .tier-row {
  display: flex; justify-content: space-between;
  font-size: 11px; padding: 2px 6px; border-radius: var(--r-sm);
  line-height: 1.7;
}
.price-tier .tier-row:nth-child(odd) { background: var(--bg-soft); }
.price-tier .tier-row .qty { color: var(--muted); }
.price-tier .tier-row .price { color: var(--wine); font-weight: 700; }
.product-card .bottom {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--muted); margin-top: 8px;
  padding-top: 8px; border-top: 1px solid #f0f0f0;
}
.product-card .bottom .sales { color: #666; }
.product-card .bottom .shop { color: var(--wine); font-weight: 500; }
.product-card .bottom .shop:hover { color: var(--gold); }

/* ========== 楼层区域 ========== */
.floor {
  background: var(--bg-card); border-radius: var(--r-lg);
  margin-bottom: 18px; overflow: hidden;
  box-shadow: var(--sh-md);
  border: 1px solid rgba(0,0,0,0.04);
}
.floor-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px; border-bottom: 1px solid #f0f0f0;
}
.floor-header h3 {
  font-size: 18px; color: var(--wine);
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
}
.floor-header h3 span { color: var(--gold); }
.floor-header .more {
  font-size: 13px; color: var(--gold);
  transition: all var(--tr-fast);
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600;
}
.floor-header .more:hover { transform: translateX(4px); color: var(--gold-dark); }
.floor .product-grid { padding: 18px; margin-bottom: 0; }

/* ========== 面包屑 ========== */
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--wine); }
.breadcrumb span { margin: 0 6px; color: #ccc; }
.breadcrumb strong { color: var(--wine); }

/* ========== 子分类标签 ========== */
.sub-cat-tabs {
  background: var(--bg-card); border-radius: var(--r-lg);
  padding: 16px 22px; margin-bottom: 18px;
  display: flex; flex-wrap: wrap; gap: 10px;
  box-shadow: var(--sh-md);
  border: 1px solid rgba(0,0,0,0.04);
}
.sub-cat-tabs a {
  font-size: 13px; color: #666; padding: 5px 14px;
  border-radius: var(--r-full); background: var(--bg-soft);
  transition: all var(--tr-fast);
}
.sub-cat-tabs a:hover { color: var(--wine); background: var(--bg-hover); }
.sub-cat-tabs a.active { color: #fff; background: var(--wine); }

/* ========== 分页 ========== */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 24px 0; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px;
  border: 1px solid #ddd; border-radius: var(--r-sm);
  font-size: 13px; color: #666; padding: 0 10px;
  transition: all var(--tr-fast);
}
.pagination a:hover { border-color: var(--wine); color: var(--wine); }
.pagination .active { background: var(--wine); color: #fff; border-color: var(--wine); }
.pagination .disabled { color: #ccc; cursor: not-allowed; }

/* ========== 商品详情页 ========== */
.product-detail {
  background: var(--bg-card); border-radius: var(--r-lg);
  padding: 28px; display: flex; gap: 32px;
  margin-bottom: 18px; box-shadow: var(--sh-md);
  border: 1px solid rgba(0,0,0,0.04);
}
.product-detail .img-wrap {
  width: 400px; flex-shrink: 0;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid #eee;
  position: relative;
  align-self: flex-start;
  box-shadow: var(--sh-md);
}
.product-detail .img-wrap > #productImg {
  display: block; width: 100%; height: 400px; object-fit: cover;
  transition: transform var(--tr-slow);
}
.product-detail .img-wrap:hover > #productImg { transform: scale(1.08); }
/* 多图缩略图 */
.product-detail .thumb-list {
  display: flex; gap: 8px; padding: 10px;
  background: #fafafa; border-top: 1px solid #eee; overflow-x: auto;
}
.product-detail .thumb {
  width: 62px; height: 62px; flex-shrink: 0; object-fit: cover;
  border: 2px solid transparent; border-radius: 4px;
  cursor: pointer; transition: border-color var(--tr-fast), transform var(--tr-fast);
}
.product-detail .thumb:hover { transform: translateY(-2px); }
.product-detail .thumb.active { border-color: var(--wine); }
.product-detail .pd-video {
  display: block; width: 100%; max-height: 320px;
  background: #000; border-top: 1px solid #eee;
}
.product-detail .info-wrap { flex: 1; }
.product-detail h1 { font-size: 22px; margin-bottom: 12px; line-height: 1.5; color: var(--wine); }
.product-detail .price-box {
  background: var(--bg-soft); border-radius: var(--r-md);
  padding: 18px; margin-bottom: 18px;
  border: 1px solid #e8e8e8;
}
.product-detail .price-box .tier-table { width: 100%; border-collapse: collapse; }
.product-detail .price-box .tier-table th {
  text-align: left; font-size: 12px; color: var(--muted);
  font-weight: normal; padding: 6px 0;
  border-bottom: 1px solid #e0e0e0;
}
.product-detail .price-box .tier-table td { font-size: 14px; padding: 8px 0; }
.product-detail .price-box .tier-table tr:nth-child(even) td { background: #fff; }
.product-detail .price-box .tier-table .price { color: var(--wine); font-weight: 800; font-size: 22px; }
.product-detail .meta { font-size: 13px; color: #666; line-height: 2.2; }
.product-detail .meta strong { color: var(--ink); }
.product-detail .meta p { display: flex; align-items: center; gap: 6px; }
.product-detail .btn-buy {
  display: inline-block;
  background: linear-gradient(135deg, var(--wine) 0%, var(--wine-light) 100%);
  color: #fff; padding: 13px 46px;
  border-radius: var(--r-md); font-size: 16px;
  margin-right: 10px; margin-top: 18px; cursor: pointer; border: none;
  transition: all var(--tr-fast);
  position: relative; overflow: hidden;
  box-shadow: var(--sh-wine);
}
.product-detail .btn-buy:hover { opacity: .95; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(158,27,50,.28); }
.product-detail .btn-buy::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: translate(-50%,-50%);
  transition: width .5s, height .5s;
}
.product-detail .btn-buy:active::after { width: 300px; height: 300px; }
.product-detail .btn-cart { background: #fff; color: var(--wine); border: 2px solid var(--gold); }
.product-detail .btn-cart:hover { background: var(--gold-soft); }

/* 阶梯选择器 */
.qty-select { margin: 16px 0; }
.qty-select label { font-size: 14px; font-weight: 700; margin-right: 12px; color: var(--ink); }
.qty-select .tier-options { display: flex; gap: 10px; flex-wrap: wrap; }
.qty-select .tier-opt {
  border: 2px solid #e0e0e0; border-radius: var(--r-md);
  padding: 10px 18px; cursor: pointer; font-size: 13px;
  text-align: center; transition: all var(--tr-fast);
}
.qty-select .tier-opt:hover { border-color: var(--wine); transform: translateY(-2px); }
.qty-select .tier-opt.selected { border-color: var(--wine); background: var(--wine-soft); }
.qty-select .tier-opt .tier-qty { color: #666; }
.qty-select .tier-opt .tier-price { color: var(--wine); font-weight: 700; font-size: 16px; }
.qty-select input[type="number"] { border: 2px solid var(--wine); border-radius: var(--r-md); padding: 6px 12px; font-size: 14px; outline: none; }
.stock-info { font-size: 13px; margin: 8px 0; }
.qty-warning { color: var(--danger); font-size: 12px; margin-top: 4px; display: none; }

/* 商品详情 / 规格参数 面板 */
.product-detail-panel {
  background: var(--bg-card); border-radius: var(--r-lg);
  margin-bottom: 18px; box-shadow: var(--sh-md); overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
}
.product-detail-panel .pd-tabs {
  display: flex; border-bottom: 2px solid #f0f0f0; background: #fafafa;
}
.product-detail-panel .pd-tab {
  flex: 0 0 auto; padding: 14px 28px; border: none; background: transparent;
  font-size: 15px; font-weight: 600; color: #666; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color var(--tr-fast), border-color var(--tr-fast);
}
.product-detail-panel .pd-tab:hover { color: var(--wine); }
.product-detail-panel .pd-tab.active {
  color: var(--wine); border-bottom-color: var(--wine); background: #fff;
}
.product-detail-panel .pd-body { padding: 24px; }
.product-detail-panel .pd-desc-content p {
  font-size: 14px; line-height: 1.9; color: #444; margin-bottom: 10px;
}
.product-detail-panel .pd-desc-content p:last-child { margin-bottom: 0; }
.product-detail-panel .pd-spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.product-detail-panel .pd-spec-table th,
.product-detail-panel .pd-spec-table td {
  border: 1px solid #eee; padding: 10px 14px; text-align: left;
}
.product-detail-panel .pd-spec-table th {
  width: 160px; background: #fafafa; color: #666; font-weight: 600;
}
.product-detail-panel .pd-spec-table td { color: #333; }
.product-detail-panel .pd-empty { text-align: center; padding: 40px 0; color: #999; font-size: 14px; }
.product-detail-panel .pd-empty-icon { font-size: 36px; margin-bottom: 10px; opacity: .5; }

/* 商品评价区域 */
.product-reviews {
  background: var(--bg-card); border-radius: var(--r-md);
  padding: 24px; margin-bottom: 16px; box-shadow: var(--sh-md);
}
.product-reviews h3 { font-size: 18px; color: var(--wine); margin-bottom: 16px; }
.review-summary {
  display: flex; gap: 30px; padding: 16px 0;
  border-bottom: 1px solid #f0f0f0; margin-bottom: 16px;
}
.review-score { text-align: center; }
.review-score .score-num { font-size: 42px; font-weight: 800; color: var(--gold); }
.review-score .score-stars { color: var(--gold); font-size: 16px; }
.review-score .score-count { font-size: 12px; color: var(--muted); margin-top: 4px; }
.review-list .review-item { padding: 14px 0; border-bottom: 1px solid #f0f0f0; }
.review-list .review-item:last-child { border-bottom: none; }
.review-list .review-user { font-weight: 600; font-size: 14px; }
.review-list .review-stars { color: var(--gold); font-size: 13px; }
.review-list .review-text { font-size: 13px; color: #666; margin-top: 6px; line-height: 1.6; }
.review-list .review-date { font-size: 12px; color: #ccc; }

/* 相关推荐横向滚动 */
.related-scroll {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 16px; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.related-scroll::-webkit-scrollbar { height: 6px; }
.related-scroll::-webkit-scrollbar-thumb { background: var(--wine); border-radius: 3px; }
.related-scroll::-webkit-scrollbar-track { background: #f0f0f0; }
.related-scroll .product-card {
  min-width: 200px; max-width: 200px; flex-shrink: 0;
}

/* 悬浮购买栏 */
.sticky-buy-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  padding: 12px 20px; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  gap: 16px; transform: translateY(100%);
  transition: transform var(--tr-base);
}
.sticky-buy-bar.show { transform: translateY(0); }
.sticky-buy-bar .sticky-price { font-size: 22px; font-weight: 800; color: var(--wine); }
.sticky-buy-bar .sticky-label { font-size: 12px; color: var(--muted); }
.sticky-buy-bar .btn-buy { margin: 0; padding: 10px 32px; }

/* ========== 限时秒杀专区 ========== */
.flash-sale-section {
  background: linear-gradient(135deg, #fff5f5, #fff);
  border-radius: var(--r-md); padding: 20px 24px;
  margin-bottom: 16px; box-shadow: var(--sh-md);
  border: 1px solid #ffe0e0;
}
.flash-sale-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.flash-sale-title {
  font-size: 24px; font-weight: 800;
  background: linear-gradient(135deg, var(--wine), var(--danger));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex; align-items: center; gap: 8px;
}
.flash-sale-title .flash-icon {
  font-size: 28px;
  -webkit-text-fill-color: initial;
  animation: flash-pulse 1.5s ease infinite;
}
@keyframes flash-pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.countdown-timer { display: flex; align-items: center; gap: 8px; }
.countdown-timer .cd-label { font-size: 13px; color: #666; }
.countdown-timer .cd-box {
  background: var(--ink); color: #fff;
  padding: 6px 10px; border-radius: var(--r-sm);
  font-size: 18px; font-weight: 700;
  font-family: 'Poppins', monospace;
  min-width: 40px; text-align: center;
}
.countdown-timer .cd-sep { font-size: 18px; font-weight: 700; color: var(--ink); }

/* ========== 品牌故事/优势板块 ========== */
.brand-story {
  background: linear-gradient(135deg, var(--wine), var(--wine-dark));
  border-radius: var(--r-md); padding: 36px;
  margin-bottom: 16px; color: #fff;
  display: flex; align-items: center; gap: 40px;
  box-shadow: var(--sh-wine);
  position: relative; overflow: hidden;
}
.brand-story::before {
  content: ''; position: absolute; top: -50%; right: -10%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(212,160,23,.15), transparent 70%);
  border-radius: 50%;
}
.brand-story .story-text { flex: 1; z-index: 1; }
.brand-story .story-text h2 { font-size: 28px; margin-bottom: 12px; }
.brand-story .story-text p { font-size: 14px; opacity: .9; line-height: 1.8; margin-bottom: 16px; }
.brand-story .story-features { display: flex; gap: 24px; flex-wrap: wrap; }
.brand-story .story-feature { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.brand-story .story-feature .sf-icon {
  width: 36px; height: 36px;
  background: rgba(212,160,23,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.brand-story .story-visual { width: 200px; flex-shrink: 0; z-index: 1; }
.brand-story .story-stat { text-align: center; margin-bottom: 12px; }
.brand-story .story-stat .num { font-size: 32px; font-weight: 800; color: var(--gold); }
.brand-story .story-stat .label { font-size: 12px; opacity: .8; }

/* ========== 客户评价/信任徽章 ========== */
.trust-section {
  background: var(--bg-card); border-radius: var(--r-md);
  padding: 28px 24px; margin-bottom: 16px;
  box-shadow: var(--sh-md);
}
.trust-section h3 { font-size: 20px; color: var(--wine); text-align: center; margin-bottom: 24px; }
.trust-badges {
  display: flex; justify-content: space-around;
  flex-wrap: wrap; gap: 20px;
}
.trust-badge {
  text-align: center; padding: 16px;
  transition: transform var(--tr-base);
}
.trust-badge:hover { transform: translateY(-4px); }
.trust-badge .tb-icon {
  width: 56px; height: 56px;
  background: var(--wine-soft);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin: 0 auto 10px;
}
.trust-badge .tb-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.trust-badge .tb-desc { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* 客户评价卡片 */
.testimonials {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 20px;
}
.testimonial-card {
  background: var(--bg-soft); border-radius: var(--r-md);
  padding: 20px; transition: transform var(--tr-base);
}
.testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.testimonial-card .tc-stars { color: var(--gold); font-size: 14px; margin-bottom: 8px; }
.testimonial-card .tc-text { font-size: 13px; color: #666; line-height: 1.7; margin-bottom: 12px; }
.testimonial-card .tc-user { display: flex; align-items: center; gap: 8px; }
.testimonial-card .tc-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--wine), var(--wine-light));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.testimonial-card .tc-name { font-size: 13px; font-weight: 600; }
.testimonial-card .tc-meta { font-size: 11px; color: var(--muted); }

/* ========== Newsletter 订阅 ========== */
.newsletter-section {
  background: linear-gradient(135deg, var(--wine-dark), var(--wine));
  border-radius: var(--r-md); padding: 36px;
  margin-bottom: 16px; text-align: center;
  color: #fff; position: relative; overflow: hidden;
  box-shadow: var(--sh-wine);
}
.newsletter-section::before {
  content: ''; position: absolute; bottom: -30px; left: -30px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(212,160,23,.1), transparent 70%);
  border-radius: 50%;
}
.newsletter-section h3 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.newsletter-section p { font-size: 14px; opacity: .85; margin-bottom: 20px; }
.newsletter-form {
  display: flex; gap: 8px;
  max-width: 480px; margin: 0 auto;
  position: relative; z-index: 1;
}
.newsletter-form input {
  flex: 1; padding: 12px 20px;
  border: none; border-radius: var(--r-full);
  font-size: 14px; outline: none;
}
.newsletter-form button {
  padding: 12px 32px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #fff; border: none;
  border-radius: var(--r-full);
  font-size: 15px; font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--sh-gold);
  transition: transform var(--tr-fast);
}
.newsletter-form button:hover { transform: translateY(-2px); }

/* ========== 购物车页 ========== */
.cart-container {
  background: var(--bg-card); border-radius: var(--r-lg);
  padding: 28px; margin-bottom: 18px; box-shadow: var(--sh-md);
  border: 1px solid rgba(0,0,0,0.04);
}
.cart-container h2 {
  font-size: 22px; margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px solid #f0f0f0; color: var(--wine);
  font-weight: 700;
}
.cart-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cart-table th {
  background: var(--wine); color: #fff; text-align: left;
  padding: 12px 10px; font-size: 13px; font-weight: 600;
}
.cart-table th:first-child { border-radius: var(--r-md) 0 0 0; }
.cart-table th:last-child { border-radius: 0 var(--r-md) 0 0; }
.cart-table td { padding: 14px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.cart-table td.price { color: var(--wine); font-weight: 700; font-size: 14px; }
.cart-table td.subtotal { color: var(--wine); font-weight: 700; font-size: 15px; }
.cart-table .product-info { display: flex; gap: 12px; align-items: center; }
.cart-table .product-info img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-md); flex-shrink: 0; }
.cart-table .product-info .text { flex: 1; min-width: 0; }
.cart-table .product-info .title { font-size: 13px; line-height: 1.4; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-table .product-info .tier-label { font-size: 12px; color: var(--wine); background: var(--wine-soft); display: inline-block; padding: 2px 8px; border-radius: var(--r-sm); }

.qty-control { display: inline-flex; align-items: center; border: 1px solid #ddd; border-radius: var(--r-md); overflow: hidden; }
.qty-control button { width: 32px; height: 32px; border: none; background: var(--bg-soft); cursor: pointer; font-size: 16px; color: #666; display: flex; align-items: center; justify-content: center; transition: all var(--tr-fast); }
.qty-control button:hover { background: var(--wine); color: #fff; }
.qty-control input { width: 50px; height: 32px; text-align: center; border: none; border-left: 1px solid #ddd; border-right: 1px solid #ddd; font-size: 14px; outline: none; }

.btn-remove { background: none; border: 1px solid #ddd; color: var(--muted); padding: 5px 14px; border-radius: var(--r-sm); font-size: 12px; cursor: pointer; transition: all var(--tr-fast); }
.btn-remove:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }

.cart-empty { text-align: center; padding: 60px 20px; }
.cart-empty .icon { font-size: 64px; margin-bottom: 16px; }
.cart-empty p { font-size: 16px; color: var(--muted); margin-bottom: 20px; }
.cart-empty a { display: inline-block; background: linear-gradient(135deg, var(--wine), var(--wine-light)); color: #fff; padding: 10px 28px; border-radius: var(--r-md); font-size: 14px; }
.cart-empty a:hover { opacity: .9; }

.cart-footer { display: flex; justify-content: space-between; align-items: center; background: var(--bg-card); border-radius: var(--r-lg); padding: 18px 28px; position: sticky; bottom: 0; box-shadow: 0 -6px 24px rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,0.04); }
.cart-footer .left { display: flex; align-items: center; gap: 16px; }
.btn-clear { background: #fff; border: 1px solid #ddd; color: #666; padding: 8px 18px; border-radius: var(--r-sm); font-size: 13px; cursor: pointer; transition: all var(--tr-fast); }
.btn-clear:hover { border-color: var(--danger); color: var(--danger); }
.cart-footer .total-box { display: flex; align-items: center; gap: 20px; }
.cart-footer .total-label { font-size: 13px; color: var(--muted); }
.cart-footer .total-price { font-size: 28px; color: var(--gold-dark); font-weight: 800; }
.btn-checkout { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%); color: var(--wine-dark); border: none; padding: 13px 44px; border-radius: var(--r-md); font-size: 16px; cursor: pointer; font-weight: 800; transition: all var(--tr-fast); box-shadow: var(--sh-gold); }
.btn-checkout:hover { opacity: .95; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(212,175,55,.32); }

/* ========== 页脚 (升级4列+社交+支付) ========== */
.footer { background: linear-gradient(135deg, var(--wine-dark) 0%, var(--wine) 100%); color: #fff; margin-top: 36px; padding: 44px 0 0; }
.footer .wrap { width: var(--container-w); margin: 0 auto; }
.footer .services { display: flex; justify-content: space-around; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 24px; margin-bottom: 24px; }
.footer .services .svc { text-align: center; transition: transform var(--tr-base); }
.footer .services .svc:hover { transform: translateY(-3px); }
.footer .services .svc .icon { font-size: 32px; margin-bottom: 8px; }
.footer .services .svc .label { font-size: 14px; font-weight: 700; color: #fff; }
.footer .services .svc .desc { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 4px; }
.footer .links { display: flex; justify-content: space-between; padding: 0 40px; gap: 40px; }
.footer .links dl { flex: 1; }
.footer .links dt { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: #fff; }
.footer .links dd a { font-size: 12px; color: rgba(255,255,255,.6); line-height: 2.4; transition: color var(--tr-fast); }
.footer .links dd a:hover { color: var(--gold); }

/* 社交图标 */
.footer .social-row {
  display: flex; justify-content: center; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer .social-row a {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff;
  transition: all var(--tr-base);
}
.footer .social-row a:hover {
  background: var(--gold); transform: translateY(-3px);
  box-shadow: var(--sh-gold);
}

/* 支付图标 */
.footer .payment-row {
  display: flex; justify-content: center; align-items: center;
  gap: 12px; padding: 16px 0;
}
.footer .payment-row .pay-label { font-size: 12px; color: rgba(255,255,255,.5); margin-right: 8px; }
.footer .payment-row .pay-icon {
  background: rgba(255,255,255,.1);
  border-radius: var(--r-sm);
  padding: 6px 12px; font-size: 11px;
  color: rgba(255,255,255,.7); font-weight: 600;
}

.footer .copyright { text-align: center; font-size: 12px; color: rgba(255,255,255,.5); margin-top: 24px; background: var(--wine-dark); padding: 16px 0; }

/* ========== 回到顶部 ========== */
.back-top {
  position: fixed; right: 30px; bottom: 50px;
  width: 48px; height: 48px;
  background: var(--wine); border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 20px; color: #fff;
  box-shadow: var(--sh-wine);
  opacity: 0; transition: all var(--tr-base); z-index: 999;
}
.back-top.show { opacity: 1; }
.back-top:hover { background: var(--gold); transform: translateY(-2px); }

/* ========== Toast 通知 ========== */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--bg-card); border-radius: var(--r-md);
  padding: 14px 20px; box-shadow: var(--sh-xl);
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; min-width: 280px; max-width: 400px;
  animation: toastIn .3s ease;
  border-left: 4px solid var(--wine);
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.info { border-left-color: var(--wine); }
.toast .toast-icon { font-size: 20px; }
.toast .toast-msg { flex: 1; }
.toast .toast-close { cursor: pointer; color: var(--muted); font-size: 16px; }
.toast.fade-out { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } }

/* ========== 库存标签 ========== */
.stock-badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: var(--r-full); margin-left: 6px; font-weight: 600; }
.stock-badge.in-stock { background: var(--success-bg); color: #2e7d32; }
.stock-badge.low-stock { background: var(--warning-bg); color: #e65100; }
.stock-badge.out-stock { background: var(--danger-bg); color: #c62828; }
.product-card .stock-info { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ========== 状态标签 ========== */
.status-badge { display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: var(--r-full); font-weight: 700; }
.status-badge.pending { background: #fff3cd; color: #856404; }
.status-badge.confirmed { background: #d1ecf1; color: #0c5460; }
.status-badge.shipped { background: #d4edda; color: #155724; }
.status-badge.completed { background: #e8e8e8; color: #383d41; }
.status-badge.cancelled { background: #f8d7da; color: #721c24; }

/* ========== 订单页 ========== */
.order-card { background: var(--bg-card); border-radius: var(--r-lg); padding: 26px; margin-bottom: 18px; box-shadow: var(--sh-md); transition: box-shadow var(--tr-fast); border: 1px solid rgba(0,0,0,0.04); }
.order-card:hover { box-shadow: var(--sh-lg); }
.order-card .order-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0f0f0; padding-bottom: 14px; margin-bottom: 14px; }
.order-card .order-no { font-size: 16px; font-weight: 700; color: var(--wine); }
.order-card .order-date { font-size: 12px; color: var(--muted); margin-top: 4px; }
.order-card .order-items { font-size: 13px; }
.order-card .order-items img { width: 50px; height: 50px; object-fit: cover; border-radius: var(--r-md); }
.order-card .order-total { text-align: right; margin-top: 10px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.order-card .order-total .price { color: var(--wine); font-size: 18px; font-weight: 800; }

/* ========== 结算页 ========== */
.checkout-container { background: var(--bg-card); border-radius: var(--r-lg); padding: 32px; margin-bottom: 18px; box-shadow: var(--sh-md); border: 1px solid rgba(0,0,0,0.04); }
.checkout-container h2 { font-size: 22px; margin-bottom: 26px; color: var(--wine); font-weight: 700; }
.checkout-container .form-group { margin-bottom: 20px; }
.checkout-container .form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }
.checkout-container .form-group input, .checkout-container .form-group textarea { width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: var(--r-md); font-size: 15px; transition: border-color var(--tr-fast), box-shadow var(--tr-fast); outline: none; }
.checkout-container .form-group input:focus, .checkout-container .form-group textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-glow); }
.order-summary { background: var(--bg-soft); border-radius: var(--r-lg); padding: 22px; margin-top: 18px; border: 1px solid #e8e8e8; }
.order-summary h3 { margin-bottom: 12px; color: var(--wine); }
.order-summary table { width: 100%; border-collapse: collapse; }
.order-summary th { text-align: left; font-size: 12px; color: var(--muted); padding: 4px 0; }
.order-summary td { font-size: 13px; padding: 6px 0; border-bottom: 1px solid #eee; }
.order-summary .total-row { font-size: 20px; font-weight: 800; color: var(--gold-dark); }
.btn-submit { background: linear-gradient(135deg, var(--wine) 0%, var(--wine-light) 100%); color: #fff; border: none; padding: 13px 46px; border-radius: var(--r-md); font-size: 16px; cursor: pointer; margin-top: 18px; transition: all var(--tr-fast); font-weight: 700; box-shadow: var(--sh-wine); }
.btn-submit:hover { opacity: .95; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(158,27,50,.25); }

/* ========== 全部分类页 ========== */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cat-block { background: var(--bg-card); border-radius: var(--r-md); padding: 24px; box-shadow: var(--sh-md); transition: box-shadow var(--tr-fast); }
.cat-block:hover { box-shadow: var(--sh-lg); }
.cat-block h3 { font-size: 18px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--gold); }
.cat-block h3 a { color: var(--wine); }
.cat-block h3 a:hover { color: var(--gold); }
.cat-block .sub-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-block .sub-list a { font-size: 13px; color: #666; padding: 5px 14px; border-radius: var(--r-full); background: var(--bg-soft); transition: all var(--tr-fast); }
.cat-block .sub-list a:hover { color: #fff; background: var(--wine); }
@media (max-width: 600px) { .cat-grid { grid-template-columns: 1fr; } }

/* ========== 联系我们区域 ========== */
.contact-section { background: var(--bg-soft); padding: 40px 0; }
.contact-section .wrap { width: var(--container-w); margin: 0 auto; }
.contact-section h3 { text-align: center; font-size: 24px; margin-bottom: 28px; color: var(--wine); }
.contact-methods { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
.contact-method-card { width: 220px; text-align: center; padding: 28px 20px; background: var(--bg-card); border-radius: var(--r-md); box-shadow: var(--sh-md); transition: all var(--tr-base); }
.contact-method-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.contact-method-card .icon { font-size: 44px; margin-bottom: 12px; }
.contact-method-card .label { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--wine); }
.contact-method-card .desc { font-size: 12px; color: var(--muted); }
.contact-method-card a { display: inline-block; margin-top: 12px; padding: 7px 24px; background: linear-gradient(135deg, var(--wine), var(--wine-light)); color: #fff; border-radius: var(--r-full); font-size: 13px; transition: opacity var(--tr-fast); }
.contact-method-card a:hover { opacity: .9; }

/* ========== 邮件联系模态框 ========== */
.contact-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 10001; display: flex; align-items: flex-start; justify-content: center; padding-top: 80px; }
.contact-modal { background: var(--bg-card); width: 440px; border-radius: var(--r-xl); padding: 28px; box-shadow: var(--sh-xl); }
.contact-modal h3 { margin-bottom: 18px; color: var(--wine); font-size: 18px; }
.contact-modal form { display: flex; flex-direction: column; gap: 12px; }
.contact-modal input, .contact-modal textarea { padding: 10px 14px; border: 1px solid #ddd; border-radius: var(--r-sm); font-size: 14px; transition: border-color var(--tr-fast); }
.contact-modal input:focus, .contact-modal textarea:focus { outline: none; border-color: var(--wine); }
.contact-modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.contact-modal .btn-cancel { padding: 10px 18px; border: 1px solid #ddd; border-radius: var(--r-sm); cursor: pointer; background: var(--bg-card); color: #666; font-size: 14px; }
.contact-modal .btn-cancel:hover { background: var(--bg-soft); }
.contact-modal .btn-submit-modal { padding: 10px 22px; background: linear-gradient(135deg, var(--wine), var(--wine-light)); color: #fff; border: none; border-radius: var(--r-sm); cursor: pointer; font-size: 14px; }
.contact-modal .btn-submit-modal:hover { opacity: .9; }

/* ========== 登录/注册框 ========== */
.login-box { max-width: 440px; margin: 60px auto; background: rgba(255,255,255,.98); border-radius: var(--r-2xl); padding: 44px; box-shadow: 0 20px 60px rgba(158,27,50,.1), 0 8px 24px rgba(0,0,0,.06); border: 1px solid rgba(212,175,55,.12); }
.login-box h2 { text-align: center; margin-bottom: 28px; color: var(--wine); font-size: 28px; }
.login-box .error { color: var(--danger); font-size: 13px; margin-bottom: 14px; padding: 10px 14px; background: var(--danger-bg); border-radius: var(--r-sm); }
.login-box .form-group { margin-bottom: 20px; }
.login-box .form-group label { display: block; font-size: 14px; margin-bottom: 7px; font-weight: 600; color: var(--ink); }
.login-box .form-group input { width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: var(--r-md); font-size: 15px; transition: border-color var(--tr-fast), box-shadow var(--tr-fast); outline: none; }
.login-box .form-group input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-glow); }
.login-box .btn-submit { display: block; width: 100%; background: linear-gradient(135deg, var(--wine) 0%, var(--wine-light) 100%); color: #fff; border: none; padding: 14px; border-radius: var(--r-md); font-size: 16px; cursor: pointer; margin-top: 8px; font-weight: 700; transition: all var(--tr-fast); box-shadow: var(--sh-wine); }
.login-box .btn-submit:hover { opacity: .95; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(158,27,50,.25); }

/* ========== 语言切换器 ========== */
.lang-switcher { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; }
.lang-switcher .lang-btn { padding: 3px 10px; font-size: 12px; border: 1px solid rgba(255,255,255,.3); border-radius: var(--r-sm); background: transparent; color: rgba(255,255,255,.8); cursor: pointer; transition: all var(--tr-fast); }
.lang-switcher .lang-btn:hover { border-color: var(--gold); color: var(--gold); }
.lang-switcher .lang-btn.active { background: var(--gold); color: #fff; border-color: var(--gold); }
.light-lang .lang-switcher .lang-btn { border-color: #ddd; color: #666; background: var(--bg-card); }
.light-lang .lang-switcher .lang-btn:hover { border-color: var(--wine); color: var(--wine); }
.light-lang .lang-switcher .lang-btn.active { background: var(--wine); color: #fff; border-color: var(--wine); }

/* ========== 聊天浮窗 ========== */
.chat-widget-btn { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; background: linear-gradient(135deg, var(--wine), var(--wine-light)); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--sh-wine); z-index: 9999; transition: transform var(--tr-fast); }
.chat-widget-btn:hover { transform: scale(1.1); }
html[dir="rtl"] .chat-widget-btn { right: auto; left: 24px; }
.chat-widget-panel { position: fixed; bottom: 24px; right: 24px; width: 350px; height: 500px; background: var(--bg-card); border-radius: var(--r-md); box-shadow: var(--sh-xl); display: none; flex-direction: column; overflow: hidden; z-index: 10000; font-family: inherit; }
html[dir="rtl"] .chat-widget-panel { right: auto; left: 24px; }
.chat-widget-panel.chat-widget-open { display: flex; }
.chat-widget-header { background: linear-gradient(135deg, var(--wine), var(--wine-light)); color: #fff; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 700; }
.chat-widget-close { cursor: pointer; font-size: 22px; line-height: 1; }
.chat-widget-close:hover { opacity: .8; }
.chat-widget-body { flex: 1; overflow-y: auto; padding: 12px; background: var(--bg-soft); }
.chat-widget-welcome { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 12px; padding: 8px; }
.chat-widget-messages { display: flex; flex-direction: column; gap: 8px; }
.chat-widget-bubble { max-width: 75%; padding: 8px 12px; border-radius: var(--r-md); font-size: 13px; line-height: 1.5; word-wrap: break-word; }
.chat-widget-bubble-in { align-self: flex-start; background: var(--bg-card); color: #333; border: 1px solid #e0e0e0; }
.chat-widget-bubble-out { align-self: flex-end; background: var(--wine); color: #fff; }
html[dir="rtl"] .chat-widget-bubble-in { align-self: flex-end; }
html[dir="rtl"] .chat-widget-bubble-out { align-self: flex-start; }
.chat-widget-input-area { display: flex; padding: 8px; border-top: 1px solid #eee; background: var(--bg-card); }
.chat-widget-msg-input { flex: 1; border: 1px solid #ddd; border-radius: var(--r-full); padding: 8px 14px; font-size: 13px; outline: none; }
.chat-widget-msg-input:focus { border-color: var(--wine); }
.chat-widget-send-btn { background: var(--wine); color: #fff; border: none; border-radius: var(--r-full); padding: 8px 16px; margin-left: 8px; cursor: pointer; font-size: 13px; }
html[dir="rtl"] .chat-widget-send-btn { margin-left: 0; margin-right: 8px; }
.chat-widget-name-input { padding: 12px 8px; border-top: 1px solid #eee; background: var(--bg-card); display: flex; gap: 8px; }
.chat-widget-name-field { flex: 1; border: 1px solid #ddd; border-radius: var(--r-sm); padding: 8px 12px; font-size: 13px; }
.chat-widget-start-btn { background: var(--wine); color: #fff; border: none; border-radius: var(--r-sm); padding: 8px 16px; cursor: pointer; }
.chat-widget-human-btn { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.55); border-radius: var(--r-full); padding: 3px 10px; font-size: 12px; cursor: pointer; }
.chat-widget-human-btn:hover { background: rgba(255,255,255,.32); }
.chat-widget-human-btn:disabled { opacity: .5; cursor: default; }
.chat-widget-bubble-sender { display: block; font-size: 10px; line-height: 1.2; margin-bottom: 3px; opacity: .9; }
.chat-widget-sender-ai { color: #ffd9a8; }
.chat-widget-sender-human { color: #c8f0d8; }
.chat-widget-bubble-time { display: block; font-size: 10px; opacity: .7; margin-top: 3px; text-align: right; }
.chat-widget-typing { font-size: 12px; color: var(--muted); padding: 4px 12px 8px; font-style: italic; }

/* ========== 后台管理 ========== */
.admin-header { background: var(--wine); color: #fff; padding: 12px 0; }
.admin-header .wrap { width: var(--container-w); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.admin-header .logo { font-size: 20px; color: var(--gold); }
.admin-header .logo span { color: #fff; font-size: 12px; }
.admin-header a { color: rgba(255,255,255,.8); font-size: 13px; margin: 0 8px; }
.admin-header a:hover, .admin-header a.active { color: var(--gold); font-weight: 600; }
.admin-body { width: var(--container-w); margin: 16px auto; display: flex; gap: 16px; }
.admin-sidebar { width: 180px; background: var(--bg-card); border-radius: var(--r-md); padding: 12px 0; flex-shrink: 0; box-shadow: var(--sh-md); }
.admin-sidebar a { display: block; padding: 10px 20px; font-size: 14px; color: #666; transition: all var(--tr-fast); border-left: 3px solid transparent; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: var(--bg-soft); color: var(--wine); border-left-color: var(--gold); }
.admin-content { flex: 1; background: var(--bg-card); border-radius: var(--r-md); padding: 24px; min-width: 0; box-shadow: var(--sh-md); }
.admin-content h2 { font-size: 18px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #f0f0f0; color: var(--wine); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { background: var(--wine); color: #fff; text-align: left; padding: 10px 8px; }
.admin-table td { padding: 10px 8px; border-bottom: 1px solid #f0f0f0; }
.admin-table tr:hover { background: var(--bg-soft); }
.admin-table img { width: 50px; height: 50px; object-fit: cover; border-radius: var(--r-sm); }
.admin-btn { display: inline-block; padding: 4px 12px; border-radius: var(--r-sm); font-size: 12px; cursor: pointer; border: none; }
.admin-btn-primary { background: var(--wine); color: #fff; }
.admin-btn-edit { background: var(--wine-light); color: #fff; }
.admin-btn-del { background: var(--danger); color: #fff; }
.admin-form { max-width: 600px; }
.admin-form .form-group { margin-bottom: 16px; }
.admin-form label { display: block; font-size: 14px; margin-bottom: 6px; font-weight: 700; }
.admin-form input, .admin-form select, .admin-form textarea { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: var(--r-sm); font-size: 14px; }
.admin-form input:focus, .admin-form select:focus { outline: none; border-color: var(--wine); }
.admin-form .tier-row { display: flex; gap: 10px; margin-bottom: 8px; }
.admin-form .tier-row input { flex: 1; }
.admin-form .btn-submit { background: linear-gradient(135deg, var(--wine), var(--wine-light)); color: #fff; border: none; padding: 10px 30px; border-radius: var(--r-md); font-size: 15px; cursor: pointer; }
.admin-form .btn-submit:hover { opacity: .9; }

/* 后台消息中心 */
.msg-stats-bar { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.msg-stat-item {
  background: var(--bg-card);
  border: 1px solid var(--border, #e6e8ee);
  border-radius: var(--r-lg);
  padding: 12px 18px;
  cursor: pointer;
  transition: transform var(--tr-fast), box-shadow var(--tr-fast), border-color var(--tr-fast);
  min-width: 124px;
  position: relative;
  overflow: hidden;
}
.msg-stat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--wine);
  opacity: 0;
  transition: opacity var(--tr-fast);
}
.msg-stat-item:hover { border-color: var(--wine-light); box-shadow: 0 4px 14px rgba(158,27,50,.10); transform: translateY(-1px); }
.msg-stat-item:hover::before { opacity: 1; }
.msg-stat-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.msg-stat-count { display: inline-block; font-size: 22px; font-weight: 700; color: var(--wine); line-height: 1.2; }
.msg-stat-unread { display: inline-block; font-size: 11px; color: #fff; background: var(--gold); padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; font-weight: 600; }

/* 筛选栏（频道 / 状态）—胶囊式 chip */
.msg-filter-bar {
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.msg-filter-bar-label {
  font-size: 12px;
  color: var(--muted);
  margin-right: 4px;
  user-select: none;
  flex: 0 0 auto;
}
.msg-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border, #e6e8ee);
  border-radius: 999px;
  color: #555;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: transform var(--tr-fast), background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast), box-shadow var(--tr-fast);
  white-space: nowrap;
}
.msg-filter-btn:hover {
  border-color: var(--wine-light);
  color: var(--wine);
  background: var(--wine-soft);
  transform: translateY(-1px);
}
.msg-filter-btn:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }
.msg-filter-btn .chip-icon { font-size: 14px; line-height: 1; }
.msg-filter-btn.active {
  background: linear-gradient(135deg, var(--wine), var(--wine-light));
  color: #fff;
  border-color: var(--wine);
  box-shadow: 0 4px 12px rgba(158,27,50,.28), inset 0 1px 0 rgba(255,255,255,.18);
  font-weight: 600;
}
.msg-filter-btn.active:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(158,27,50,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.msg-filter-btn.active .chip-icon { filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.msg-search-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.msg-search-bar input { flex: 1; padding: 8px 12px; border: 1px solid #ddd; border-radius: var(--r-sm); font-size: 13px; }
.msg-search-bar .admin-btn { white-space: nowrap; }
.msg-bulk-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--bg-soft); border: 1px solid #e0e0e0; border-radius: var(--r-sm); margin-bottom: 8px; font-size: 13px; }
.msg-bulk-count { color: var(--wine); }
.msg-conv-top { display: flex; align-items: center; gap: 6px; }
.msg-conv-check { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.msg-detail-agent { font-size: 12px; color: var(--wine); margin-left: 6px; }
.msg-load-earlier { display: block; width: 100%; padding: 8px; margin: 8px 0; background: var(--bg-soft); border: 1px dashed #ccc; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; color: var(--wine); }
.msg-load-earlier:hover { background: var(--wine-soft); }
/* 顶栏 / 侧边栏全局未读徽标 */
.nav-unread-badge { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; margin-left: 4px; background: var(--wine); color: #fff; border-radius: 8px; font-size: 11px; text-align: center; vertical-align: middle; }
.nav-unread-badge-red { background: #dc2626; }
.header-msg-link { position: relative; }
.admin-sidebar a { position: relative; display: flex; align-items: center; }
.admin-sidebar a .nav-unread-badge { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
/* .msg-filter-btn.active rules 已合并到上方 .msg-filter-btn 系列 */
.msg-layout { display: flex; gap: 12px; height: 600px; }
.msg-conv-list { width: 300px; border: 1px solid #e0e0e0; border-radius: var(--r-md); overflow-y: auto; background: var(--bg-card); }
.msg-conv-item { padding: 12px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background var(--tr-fast); }
.msg-conv-item:hover { background: var(--bg-soft); }
.msg-conv-item.active { background: var(--wine-soft); border-left: 3px solid var(--wine); }
.msg-conv-item.unread { font-weight: 700; }
.msg-conv-header { display: flex; justify-content: space-between; align-items: center; }
.msg-conv-channel { font-size: 12px; color: var(--muted); }
.msg-conv-unread { background: var(--gold); color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 11px; min-width: 20px; text-align: center; }
.msg-conv-name { font-size: 14px; margin: 4px 0; }
.msg-conv-preview { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-conv-time { font-size: 11px; color: #ccc; }
.msg-status-closed { background: var(--muted); color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 10px; }
.msg-status-pending { background: var(--gold); color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 10px; }
.msg-status-botpaused { background: var(--wine); color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 10px; margin-left: 4px; }
.msg-empty { text-align: center; color: #ccc; padding: 40px; font-size: 14px; }
.msg-detail { flex: 1; border: 1px solid #e0e0e0; border-radius: var(--r-md); display: flex; flex-direction: column; background: var(--bg-card); }
.msg-detail-empty { text-align: center; color: #ccc; padding: 80px 20px; font-size: 14px; }
.msg-detail-header { padding: 12px 16px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.msg-detail-channel { font-size: 12px; color: var(--muted); background: #f0f0f0; padding: 2px 8px; border-radius: 3px; }
.msg-detail-body { flex: 1; overflow-y: auto; padding: 16px; background: var(--bg-soft); }
.msg-bubble { max-width: 70%; margin-bottom: 10px; }
.msg-bubble-out { margin-left: auto; }
.msg-bubble-in { margin-right: auto; }
.msg-bubble-text { padding: 10px 14px; border-radius: var(--r-md); font-size: 14px; line-height: 1.5; }
.msg-bubble-out .msg-bubble-text { background: var(--wine); color: #fff; }
.msg-bubble-in .msg-bubble-text { background: var(--bg-card); border: 1px solid #e0e0e0; }
.msg-bubble-time { font-size: 11px; color: #ccc; margin-top: 4px; }
.msg-bubble-out .msg-bubble-time { text-align: right; }
.msg-reply-area { padding: 12px; border-top: 1px solid #eee; display: flex; gap: 8px; }
.msg-reply-area textarea { flex: 1; border: 1px solid #ddd; border-radius: var(--r-sm); padding: 8px 12px; font-size: 13px; resize: none; outline: none; }
.msg-reply-area textarea:focus { border-color: var(--wine); }

/* ========== 通用确认弹窗（替换原生 confirm） ========== */
.confirm-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 16, .45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: confirm-fade .15s ease-out;
}
.confirm-modal.open { display: flex; }
.confirm-modal .confirm-box {
  background: #fff;
  border-radius: var(--r-lg, 12px);
  width: 420px;
  max-width: 92vw;
  padding: 26px 26px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25), 0 2px 6px rgba(0,0,0,.08);
  animation: confirm-pop .2s cubic-bezier(.2,.7,.3,1.2);
  border-top: 4px solid var(--wine);
}
.confirm-modal.danger .confirm-box { border-top-color: #dc2626; }
.confirm-modal .confirm-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
  background: var(--wine-soft, #fdf6f6);
  color: var(--wine);
}
.confirm-modal.danger .confirm-icon {
  background: #fef2f2;
  color: #dc2626;
}
.confirm-modal .confirm-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 8px;
}
.confirm-modal .confirm-msg {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0 0 22px;
  word-break: break-word;
}
.confirm-modal .confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.confirm-modal .confirm-btn {
  padding: 8px 18px;
  border-radius: var(--r-sm, 6px);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--tr-fast, .2s), background var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast);
  outline: none;
  font-family: inherit;
}
.confirm-modal .confirm-btn:focus-visible { box-shadow: 0 0 0 3px rgba(158,27,50,.25); }
.confirm-modal .confirm-btn-cancel {
  background: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}
.confirm-modal .confirm-btn-cancel:hover { background: #e5e7eb; transform: translateY(-1px); }
.confirm-modal .confirm-btn-ok {
  background: linear-gradient(135deg, var(--wine), var(--wine-light));
  color: #fff;
  box-shadow: 0 2px 6px rgba(158,27,50,.25);
}
.confirm-modal .confirm-btn-ok:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(158,27,50,.35); }
.confirm-modal.danger .confirm-btn-ok {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  box-shadow: 0 2px 6px rgba(220,38,38,.25);
}
.confirm-modal.danger .confirm-btn-ok:hover { box-shadow: 0 4px 12px rgba(220,38,38,.35); }
@keyframes confirm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirm-pop { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* 联系设置表单 */
.settings-form { max-width: 700px; }
.settings-section { background: var(--bg-card); border: 1px solid #e0e0e0; border-radius: var(--r-md); padding: 20px; margin-bottom: 16px; }
.settings-section h3 { margin-bottom: 16px; color: var(--wine); font-size: 16px; }
.settings-row { margin-bottom: 12px; }
.settings-row label { display: block; font-size: 13px; color: #666; margin-bottom: 4px; }
.settings-row input { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: var(--r-sm); font-size: 14px; }
.settings-row input:focus { border-color: var(--wine); outline: none; }
.settings-info { background: var(--bg-soft); padding: 12px; border-radius: var(--r-sm); font-size: 13px; color: #666; }
.settings-info code { background: #e8e8e8; padding: 2px 6px; border-radius: 3px; font-size: 12px; }
.settings-info p { margin-bottom: 6px; }
.settings-submit { margin-top: 16px; }
.settings-saved-msg { background: #d4edda; color: #155724; padding: 10px 16px; border-radius: var(--r-sm); margin-bottom: 16px; font-size: 14px; }

/* ========== 骨架屏加载动画 ========== */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card {
  background: var(--bg-card); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--sh-md);
}
.skeleton-card .sk-img { width: 100%; height: 220px; }
.skeleton-card .sk-line { height: 12px; margin: 10px 14px; border-radius: var(--r-sm); }
.skeleton-card .sk-line.short { width: 60%; }
.skeleton-card .sk-line.long { width: 90%; }

/* ========== 渐入动画 ========== */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== 优惠券/积分UI ========== */
.coupon-card {
  display: flex; align-items: center;
  background: linear-gradient(135deg, var(--wine), var(--wine-light));
  border-radius: var(--r-md); padding: 16px 20px;
  color: #fff; gap: 16px;
  box-shadow: var(--sh-wine);
  position: relative; overflow: hidden;
}
.coupon-card::before {
  content: ''; position: absolute;
  left: -8px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  background: var(--bg-body); border-radius: 50%;
}
.coupon-card::after {
  content: ''; position: absolute;
  right: -8px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  background: var(--bg-body); border-radius: 50%;
}
.coupon-card .cc-value { font-size: 28px; font-weight: 800; color: var(--gold); }
.coupon-card .cc-info { flex: 1; }
.coupon-card .cc-label { font-size: 14px; font-weight: 600; }
.coupon-card .cc-desc { font-size: 12px; opacity: .8; }
.coupon-card .cc-btn {
  background: var(--gold); color: #fff;
  border: none; padding: 8px 20px;
  border-radius: var(--r-full);
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: opacity var(--tr-fast);
}
.coupon-card .cc-btn:hover { opacity: .85; }

.points-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-tint));
  border: 1px solid var(--gold);
  border-radius: var(--r-full);
  padding: 4px 12px;
  font-size: 13px; font-weight: 600;
  color: var(--gold-dark);
}

/* ========== 响应式 ========== */

/* ===== 汉堡菜单 & 移动导航覆盖层 ===== */
.mobile-menu-btn {
  display: none;
  background: none; border: none; color: #fff;
  font-size: 24px; padding: 0 12px; cursor: pointer;
  height: var(--header-h); line-height: var(--header-h);
}
.mobile-nav-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 9998;
  opacity: 0; transition: opacity .3s ease;
}
.mobile-nav-overlay.open { display: block; opacity: 1; }
.mobile-nav-panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 280px; max-width: 85vw;
  background: #fff; overflow-y: auto;
  transform: translateX(-100%); transition: transform .3s ease;
  box-shadow: 4px 0 20px rgba(0,0,0,.15);
}
.mobile-nav-overlay.open .mobile-nav-panel { transform: translateX(0); }
html[dir=”rtl”] .mobile-nav-panel { left: auto; right: 0; transform: translateX(100%); }
html[dir=”rtl”] .mobile-nav-overlay.open .mobile-nav-panel { transform: translateX(0); }
.mobile-nav-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; background: var(--wine); color: #fff;
}
.mobile-nav-title { font-size: 18px; font-weight: 700; }
.mobile-nav-close { background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; padding: 0 4px; min-height: 44px; min-width: 44px; }
.mobile-nav-links { padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.mobile-nav-links a {
  display: block; padding: 14px 20px; font-size: 15px; color: var(--ink);
  border-left: 3px solid transparent; transition: all .2s;
}
html[dir=”rtl”] .mobile-nav-links a { border-left: none; border-right: 3px solid transparent; }
.mobile-nav-links a:hover, .mobile-nav-links a.active { background: var(--wine-soft); color: var(--wine); border-left-color: var(--gold); }
html[dir=”rtl”] .mobile-nav-links a:hover, html[dir=”rtl”] .mobile-nav-links a.active { border-left-color: transparent; border-right-color: var(--gold); }
.mobile-nav-cats { padding: 12px 0; }
.mobile-nav-cat-title { padding: 8px 20px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.mobile-nav-cats a {
  display: block; padding: 12px 20px 12px 32px; font-size: 14px; color: #555;
  transition: all .2s;
}
html[dir=”rtl”] .mobile-nav-cats a { padding: 12px 32px 12px 20px; }
.mobile-nav-cats a:hover { color: var(--wine); background: var(--bg-soft); }

/* ===== 移动端搜索按钮 & 覆盖层 ===== */
.mobile-search-btn {
  display: none; background: none; border: 2px solid var(--wine);
  border-radius: 50%; width: 40px; height: 40px;
  font-size: 18px; cursor: pointer; color: var(--wine);
  align-items: center; justify-content: center; flex-shrink: 0;
}
.mobile-search-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(255,255,255,.97); z-index: 9999;
  align-items: flex-start; justify-content: center; padding-top: 80px;
}
.mobile-search-overlay.open { display: flex; }
.mobile-search-inner {
  display: flex; gap: 8px; width: 90%; max-width: 500px;
}
.mobile-search-inner input {
  flex: 1; padding: 14px 18px; border: 2px solid var(--wine);
  border-radius: var(--r-md); font-size: 16px; outline: none;
}
.mobile-search-go {
  padding: 0 20px; background: var(--wine); color: #fff;
  border: none; border-radius: var(--r-md); font-size: 18px; cursor: pointer;
  min-width: 44px;
}
.mobile-search-close {
  position: absolute; top: 20px; right: 20px;
  background: none; border: none; font-size: 32px; color: var(--ink);
  cursor: pointer; min-width: 44px; min-height: 44px;
}
html[dir=”rtl”] .mobile-search-close { right: auto; left: 20px; }

@media (max-width: 1200px) {
  .top-bar .wrap, .header .wrap, .nav .wrap, .main, .footer .wrap, .admin-header .wrap, .admin-body { width: 100%; padding: 0 12px; }
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .testimonials { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .top-bar .wrap, .header .wrap, .nav .wrap, .main, .footer .wrap { width: 100%; }
  .main { flex-direction: column; }
  .sidebar { width: 100%; }
  .sidebar .cat-item .sub-cats { display: none !important; }
  .banner-area { flex-direction: column; }
  .promo-col { width: 100%; flex-direction: row; }
  .promo-card { flex: 1; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .footer .services { flex-wrap: wrap; gap: 16px; }
  .footer .links { flex-wrap: wrap; gap: 20px; padding: 0; }
  .product-detail { flex-direction: column; }
  .product-detail .img-wrap { width: 100%; }
  .product-detail .img-wrap > #productImg { height: 300px; }
  .product-detail .thumb { width: 52px; height: 52px; }
  .admin-body { flex-direction: column; }
  .admin-sidebar { width: 100%; display: flex; flex-wrap: wrap; }
  .admin-sidebar a { padding: 8px 16px; }
  .contact-methods { flex-direction: column; align-items: center; }
  .brand-story { flex-direction: column; gap: 20px; }
  .brand-story .story-visual { width: 100%; display: flex; justify-content: space-around; }
  .testimonials { grid-template-columns: 1fr; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form button { width: 100%; }

  /* Messages: two-pane → stacked at tablet */
  .msg-layout { flex-direction: column; height: auto; }
  .msg-conv-list { width: 100%; max-height: 400px; }
  .msg-detail { min-height: 400px; }
}

@media (max-width: 768px) {
  /* === 全局触控目标最小值 === */
  button, a, input, select, textarea, .btn, .qa-btn, .sort-item, .filter-bar .sort-item,
  .pagination a, .pagination span, .lang-switcher .lang-btn, .qty-control button,
  .admin-btn, .msg-filter-btn, .msg-canned-chip {
    min-height: 44px; min-width: 44px;
  }
  .qty-control button { min-width: 44px; }
  .pagination a, .pagination span { min-width: 44px; height: 44px; }

  /* === 汉堡菜单显示，桌面导航隐藏 === */
  .mobile-menu-btn { display: block; }
  .nav .menu-items { display: none; }
  .nav .cat-trigger { display: none; }
  .nav .nav-dropdown { display: none !important; }
  .nav .wrap { justify-content: flex-start; }
  .nav { top: 0; }

  /* === Header 紧凑化 === */
  .header .wrap { gap: 12px; padding: 10px 12px; }
  .logo .logo-icon { width: 36px; height: 36px; font-size: 18px; }
  .logo .logo-text .name { font-size: 20px; }
  .logo .logo-text .slogan { display: none; }
  .logo .divider, .logo .slogan-side { display: none; }
  .search-area { display: none; }
  .mobile-search-btn { display: inline-flex; }
  .hot-words { display: none; }

  /* === Top-bar 简化 === */
  .top-bar .contact-info { display: none; }
  .top-bar .wrap { justify-content: center; }

  /* === Banner 响应式高度 === */
  .banner { height: clamp(180px, 40vw, 300px); }
  .banner .slide-title { font-size: clamp(20px, 5vw, 32px); }
  .banner .slide-sub { font-size: clamp(14px, 3vw, 20px); }
  .banner .slide-tag { font-size: clamp(11px, 2.5vw, 15px); }
  .banner .slide-cta { padding: 8px 24px; font-size: 14px; }
  .banner-zone img { height: auto; min-height: 120px; max-height: 200px; width: 100%; }

  /* === Sidebar 水平滚动标签条 === */
  .sidebar {
    display: flex; overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch; padding: 8px;
    gap: 8px; border-radius: var(--r-lg);
  }
  .sidebar .cat-wrap { flex-shrink: 0; }
  .sidebar .cat-item {
    margin: 0; padding: 8px 16px; border-radius: var(--r-full);
    background: var(--bg-soft); border-left: none;
    white-space: nowrap; font-size: 13px;
  }
  .sidebar .cat-item:hover { border-left: none; background: var(--wine-soft); }
  .sidebar .cat-item .arrow { display: none; }

  /* === Product detail 优化 === */
  .product-detail { padding: 16px; gap: 16px; }
  .product-detail h1 { font-size: 18px; }
  .product-detail .btn-buy { padding: 12px 28px; font-size: 15px; width: 100%; text-align: center; margin-right: 0; margin-bottom: 8px; }
  .qty-select .tier-options { gap: 6px; }
  .qty-select .tier-opt { padding: 8px 12px; font-size: 12px; }

  /* === Chat widget 移动端 === */
  .chat-widget-panel { width: 100%; height: 60vh; bottom: 0; right: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  html[dir=”rtl”] .chat-widget-panel { left: 0; right: auto; }
  .chat-widget-btn { bottom: 16px; right: 16px; width: 50px; height: 50px; }
  html[dir=”rtl”] .chat-widget-btn { right: auto; left: 16px; }

  /* === Checkout 表单堆叠 === */
  .checkout-container { padding: 16px; }
  .checkout-container .form-group input,
  .checkout-container .form-group textarea { padding: 14px 16px; font-size: 16px; }

  /* === Footer 适配 === */
  .footer .links { flex-direction: column; gap: 24px; padding: 0 12px; }
  .footer .services { flex-direction: column; gap: 16px; }
  .footer .social-row { gap: 12px; }
  .footer .payment-row { flex-wrap: wrap; justify-content: center; }

  /* === Admin 管理后台 === */
  .admin-header .wrap { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .admin-header .logo { font-size: 18px; }
  .admin-header .wrap > div { display: flex; flex-wrap: wrap; gap: 4px; }
  .admin-header a { margin: 0; font-size: 12px; padding: 6px 10px; background: rgba(255,255,255,.12); border-radius: 4px; min-height: 36px; display: inline-flex; align-items: center; }
  .admin-content { padding: 14px; }
  .admin-content h2 { font-size: 16px; margin-bottom: 14px; }

  /* Admin sidebar → 水平滚动导航条 */
  .admin-sidebar {
    overflow-x: auto; flex-wrap: nowrap; white-space: nowrap;
    -webkit-overflow-scrolling: touch; padding: 8px 0;
    display: flex;
  }
  .admin-sidebar a {
    padding: 10px 16px; border-left: none; border-bottom: 3px solid transparent;
    flex-shrink: 0; display: inline-flex; align-items: center;
  }
  .admin-sidebar a.active { background: transparent; border-left: none; border-bottom-color: var(--gold); }
  .admin-sidebar a .nav-unread-badge { position: static; transform: none; margin-left: 6px; }

  /* Admin tables 横向滚动 */
  .admin-table, .user-table, .an-table, .fs-table, .faq-table, .pf-table,
  .tier-table, .pd-spec-table, .checkout-table, .cart-table {
    display: block; overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .admin-table th, .admin-table td,
  .user-table th, .user-table td,
  .an-table th, .an-table td,
  .fs-table th, .fs-table td,
  .faq-table th, .faq-table td,
  .pf-table th, .pf-table td,
  .tier-table th, .tier-table td,
  .pd-spec-table th, .pd-spec-table td,
  .checkout-table th, .checkout-table td,
  .cart-table th, .cart-table td { padding: 10px 8px; font-size: 12px; }

  /* Admin form tier-row 堆叠 */
  .admin-form .tier-row { flex-direction: column; gap: 6px; }
  .admin-form .tier-row input { width: 100%; }
  .admin-form { max-width: 100%; }

  /* Admin messages 单栏切换 */
  .msg-layout { flex-direction: column; height: auto; }
  .msg-conv-list { width: 100%; max-height: 50vh; }
  .msg-detail { min-height: 50vh; }
  .msg-reply-area { flex-direction: column; }
  .msg-reply-area textarea { min-height: 80px; }
  .msg-stats-bar { gap: 8px; }
  .msg-stat-item { min-width: 100px; padding: 10px 14px; }

  /* Bulk form 堆叠 */
  #bulkForm { flex-direction: column !important; align-items: stretch !important; }
  #bulkForm #bulkCount { align-self: flex-start; }
  #bulkForm select, #bulkForm input[type=”number”], #bulkForm input[type=”text”] { width: 100% !important; max-width: none !important; min-height: 44px; }
  #catFields, #priceFields { flex-wrap: wrap; gap: 8px; width: 100%; }
  #catFields select, #priceFields select, #priceFields input { flex: 1 1 140px; min-width: 0; min-height: 44px; }
  #bulkForm button { width: 100%; min-height: 44px; }

  /* Contact modal 全宽 */
  .contact-modal { width: 95vw; max-width: 440px; }
  .contact-modal-overlay { padding-top: 40px; }

  /* Login box 适配 */
  .login-box, .auth-card { padding: 24px; margin: 20px auto; }
  .login-box h2, .auth-header h2 { font-size: 22px; }

  /* User detail grid 单列 */
  .user-detail-card .user-info-grid { grid-template-columns: 1fr; }

  /* Confirm modal */
  .confirm-modal .confirm-box { width: 92vw; padding: 20px; }
  .confirm-modal .confirm-actions { flex-direction: column-reverse; }
  .confirm-modal .confirm-btn { width: 100%; padding: 12px; text-align: center; }

  /* Toast 全宽 */
  .toast-container { left: 12px; right: 12px; top: 12px; }
  .toast { min-width: auto; max-width: 100%; }

  /* Back to top 调整位置避免遮挡聊天按钮 */
  .back-top { right: 16px; bottom: 80px; width: 44px; height: 44px; }
  html[dir=”rtl”] .back-top { right: auto; left: 16px; }
}

@media (max-width: 600px) {
  .top-bar .wrap { flex-direction: column; height: auto; line-height: 1.6; padding: 4px 12px; }
  .header .wrap { flex-direction: row; gap: 8px; padding: 8px 12px; }
  .header { position: sticky; }
  .logo { font-size: 20px; }
  .logo .logo-icon { width: 32px; height: 32px; font-size: 16px; border-radius: 8px; }
  .logo .logo-text .name { font-size: 18px; }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .product-card .img-box { height: 150px; }
  .product-card .info { padding: 8px 10px 10px; }
  .product-card .title { font-size: 12px; height: 34px; }
  .product-card .quick-actions .qa-btn { font-size: 11px; padding: 6px 8px; }

  .banner { height: 180px; }
  .banner .slide-title { font-size: 22px; }
  .banner .slide-sub { font-size: 14px; }
  .promo-col { flex-direction: column; }
  .promo-card { height: 100px; }
  .promo-card.store-card { height: auto; }

  .filter-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; }
  .filter-bar .sort-item { text-align: center; padding: 8px 14px; }
  .filter-bar .price-range { flex-wrap: wrap; }
  .filter-bar .price-range input { flex: 1; min-width: 60px; }

  /* Cart 表格 → 卡片布局 */
  .cart-table { display: block; }
  .cart-table thead { display: none; }
  .cart-table tbody { display: flex; flex-direction: column; gap: 12px; }
  .cart-table tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    background: var(--bg-card); border: 1px solid #eee;
    border-radius: var(--r-md); padding: 12px;
  }
  .cart-table td { border-bottom: none; padding: 0; }
  .cart-table td:first-child { flex: 0 0 auto; }
  .cart-table td:nth-child(2) { display: block; flex: 1; }
  .cart-table td.price::before { content: attr(data-label) ': '; font-weight: normal; color: var(--muted); font-size: 12px; }
  .cart-table td.subtotal::before { content: attr(data-label) ': '; font-weight: normal; color: var(--muted); font-size: 12px; }
  .cart-footer { flex-direction: column; gap: 12px; padding: 14px 16px; }
  .cart-footer .left { width: 100%; justify-content: space-between; }
  .cart-footer .total-box { width: 100%; justify-content: space-between; }
  .btn-checkout { width: 100%; text-align: center; padding: 14px; }

  .contact-method-card { width: 100%; }
  .flash-sale-header { flex-direction: column; gap: 12px; }
  .trust-badges { flex-direction: column; }
  .sticky-buy-bar { flex-direction: column; gap: 8px; padding: 10px; }
  .sticky-buy-bar .btn-buy { width: 100%; text-align: center; }

  /* Section title 缩小 */
  .section-title { font-size: 18px; }
  .floor-header { padding: 14px 16px; }
  .floor-header h3 { font-size: 16px; }
  .floor .product-grid { padding: 12px; }

  /* Sub-cat tabs 水平滚动 */
  .sub-cat-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px; }
  .sub-cat-tabs a { flex-shrink: 0; white-space: nowrap; }

  /* Brand story 紧凑 */
  .brand-story { padding: 20px; }
  .brand-story .story-text h2 { font-size: 20px; }
  .brand-story .story-features { gap: 12px; }

  /* Newsletter 紧凑 */
  .newsletter-section { padding: 24px 16px; }
  .newsletter-section h3 { font-size: 20px; }

  /* Coupon card 垂直排列 */
  .coupon-card { flex-direction: column; text-align: center; gap: 10px; }
  .coupon-card .cc-btn { width: 100%; }

  /* Cat grid 单列 */
  .cat-grid { grid-template-columns: 1fr; }

  /* Related products scroll cards 更小 */
  .related-scroll .product-card { min-width: 160px; max-width: 160px; }
  .related-scroll .product-card .img-box { height: 120px; }

  /* Admin 超小屏进一步收紧 */
  .admin-content { padding: 10px; }
  .admin-products th:nth-child(7), .admin-products td:nth-child(7) { display: none; }
  .admin-header .logo { font-size: 16px; }

  /* Settings form */
  .settings-form { max-width: 100%; }
  .settings-section { padding: 14px; }

  /* Order card 紧凑 */
  .order-card { padding: 16px; }
  .order-card .order-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .order-card .order-total { flex-direction: column; align-items: flex-end; gap: 4px; }

  /* Review summary 垂直 */
  .review-summary { flex-direction: column; gap: 12px; align-items: center; text-align: center; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .product-card .img-box { height: 130px; }
  .product-card .title { font-size: 11px; height: 30px; }
  .price-tier .tier-row { font-size: 10px; }
  .admin-content { padding: 8px; }
  .admin-header .logo { font-size: 15px; }
  .mobile-nav-panel { width: 260px; }
}

/* ========== RTL 阿拉伯语布局适配 ========== */
html[dir=”rtl”] body { font-family: “Tahoma”, “Arial”, “Segoe UI”, sans-serif; }
html[dir=”rtl”] .top-bar .wrap { flex-direction: row-reverse; }
html[dir=”rtl”] .header .wrap { flex-direction: row-reverse; }
html[dir=”rtl”] .nav .wrap { flex-direction: row-reverse; }
html[dir=”rtl”] .nav .cat-trigger { border-left: none; border-right: 3px solid var(--gold); text-align: right; }
html[dir=”rtl”] .main { flex-direction: row-reverse; }
html[dir=”rtl”] .sidebar { border-left: 1px solid #e0e0e0; border-right: none; }
html[dir=”rtl”] .sidebar .cat-item { border-left: none; border-right: 3px solid transparent; }
html[dir=”rtl”] .sidebar .cat-item:hover { border-right-color: var(--gold); border-left-color: transparent; }
html[dir=”rtl”] .cat-item .arrow { float: left; }
html[dir=”rtl”] .sub-cats { left: auto; right: 100%; }
html[dir=”rtl”] .product-grid { direction: rtl; }
html[dir=”rtl”] .filter-bar { direction: rtl; }
html[dir=”rtl”] .cart-table { direction: rtl; }
html[dir=”rtl”] .cart-footer { flex-direction: row-reverse; }
html[dir=”rtl”] .footer .services { direction: rtl; }
html[dir=”rtl”] .footer .links { direction: rtl; }
html[dir=”rtl”] .breadcrumb { direction: rtl; }
html[dir=”rtl”] .nav .menu-items { direction: rtl; }
html[dir=”rtl”] .search-box button { border-radius: 24px 0 0 24px; }
html[dir=”rtl”] .search-box input { border-radius: 0 24px 24px 0; }
html[dir=”rtl”] .promo-col { direction: rtl; }
html[dir=”rtl”] .promo-card:nth-child(1) { background: linear-gradient(225deg, var(--wine), var(--wine-light)); }
html[dir=”rtl”] .promo-card:nth-child(2) { background: linear-gradient(225deg, var(--gold), var(--gold-light)); }
html[dir=”rtl”] .promo-card:nth-child(3) { background: linear-gradient(225deg, var(--teal), var(--teal-light)); }
html[dir=”rtl”] .product-detail { direction: rtl; }
html[dir=”rtl”] .product-detail .img-wrap { margin-left: 0; margin-right: 0; }
html[dir=”rtl”] .tier-table th:first-child, html[dir=”rtl”] .tier-table td:first-child { text-align: right; }
html[dir=”rtl”] .qty-control button:first-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
html[dir=”rtl”] .qty-control button:last-child { border-radius: var(--r-md) 0 0 var(--r-md); }
html[dir=”rtl”] .back-top { right: auto; left: 30px; }
html[dir=”rtl”] .lang-switcher { margin-right: 0; margin-left: 12px; }
html[dir=”rtl”] .contact-methods { direction: rtl; }
html[dir=”rtl”] .msg-conv-item.active { border-left: none; border-right: 3px solid var(--wine); }
html[dir=”rtl”] .msg-bubble-out { margin-left: 0; margin-right: auto; }
html[dir=”rtl”] .msg-bubble-in { margin-right: 0; margin-left: auto; }
html[dir=”rtl”] .msg-bubble-out .msg-bubble-time { text-align: left; }
html[dir=”rtl”] .section-title::before { float: right; }
html[dir=”rtl”] .nav .menu-items a::after { transform: translateX(50%); }
html[dir=”rtl”] .brand-story { direction: rtl; }
html[dir=”rtl”] .flash-sale-header { direction: rtl; }
html[dir=”rtl”] .newsletter-form { direction: rtl; }
html[dir=”rtl”] .trust-badges { direction: rtl; }
html[dir=”rtl”] .testimonials { direction: rtl; }
html[dir=”rtl”] .coupon-card { direction: rtl; }
html[dir=”rtl”] .countdown-timer { direction: ltr; }
/* RTL mobile-specific */
@media (max-width: 768px) {
  html[dir=”rtl”] .header .wrap { flex-direction: row-reverse; }
  html[dir=”rtl”] .sidebar { flex-direction: row-reverse; }
  html[dir=”rtl”] .admin-sidebar { flex-direction: row-reverse; }
  html[dir=”rtl”] .cart-footer { flex-direction: column; }
  html[dir=”rtl”] .cart-footer .left { flex-direction: row-reverse; }
  html[dir=”rtl”] .cart-footer .total-box { flex-direction: row-reverse; }
}

/* 购物车附件消息 */
.msg-cart-attach { margin: 8px 0 4px; background: #f8f5f0; border: 1px solid #e8e0d4; border-radius: var(--r-md); overflow: hidden; }
.msg-cart-attach-title { padding: 8px 12px; font-size: 12px; font-weight: bold; color: var(--wine); border-bottom: 1px solid #e8e0d4; background: var(--gold-tint); }
.msg-cart-attach-item { display: flex; align-items: center; padding: 8px 12px; border-bottom: 1px solid #f0ebe5; }
.msg-cart-attach-img { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; margin-right: 10px; }
.msg-cart-attach-noimg { width: 40px; height: 40px; border-radius: var(--r-sm); background: #f0f0f0; margin-right: 10px; display: flex; align-items: center; justify-content: center; }
.msg-cart-attach-info { flex: 1; }
.msg-cart-attach-name { font-size: 13px; color: #333; }
.msg-cart-attach-tier { font-size: 11px; color: var(--gold); margin-top: 2px; }
.msg-cart-attach-price { font-size: 12px; color: #666; margin-top: 2px; }
.msg-cart-attach-subtotal { font-size: 14px; font-weight: bold; color: var(--wine); margin-left: 10px; }
.msg-cart-attach-total { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--bg-card); border-top: 1px solid #e8e0d4; font-size: 13px; font-weight: bold; }
.msg-cart-attach-total span:last-child { color: var(--wine); font-size: 15px; }

/* ========== CSRF Meta ========== */
meta[name=”csrf-token”] { display: none; }

/* ========== 用户认证页面 ========== */
.auth-page { min-height: 75vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: linear-gradient(135deg, var(--bg-body) 0%, var(--wine-soft) 50%, var(--gold-soft) 100%); }
.auth-card { background: rgba(255,255,255,.98); border-radius: var(--r-2xl); box-shadow: 0 20px 60px rgba(158,27,50,.1), 0 8px 24px rgba(0,0,0,.06); padding: 44px; width: 100%; max-width: 440px; border: 1px solid rgba(212,175,55,.12); }
.auth-header { text-align: center; margin-bottom: 32px; }
.auth-header h2 { font-size: 28px; color: var(--wine); font-weight: 800; margin-bottom: 8px; }
.auth-header p { font-size: 14px; color: var(--muted); }
.auth-error { background: var(--danger-bg); border: 1px solid #fecaca; border-radius: var(--r-md); padding: 12px 16px; color: #b91c1c; font-size: 14px; margin-bottom: 20px; }
.auth-form .form-group { margin-bottom: 22px; }
.auth-form label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.auth-form input { width: 100%; padding: 13px 18px; border: 2px solid #e5e7eb; border-radius: var(--r-md); font-size: 15px; transition: border-color var(--tr-fast), box-shadow var(--tr-fast); outline: none; background: #fff; }
.auth-form input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-glow); }
.auth-submit-btn { width: 100%; padding: 15px; background: linear-gradient(135deg, var(--wine) 0%, var(--wine-light) 100%); color: #fff; border: none; border-radius: var(--r-md); font-size: 16px; font-weight: 700; cursor: pointer; transition: all var(--tr-fast); box-shadow: var(--sh-wine); }
.auth-submit-btn:hover { opacity: 0.95; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(158,27,50,.25); }
.auth-submit-btn:active { transform: scale(0.98); }
.auth-footer { text-align: center; margin-top: 26px; font-size: 14px; color: var(--muted); }
.auth-footer a { color: var(--wine); font-weight: 700; margin-left: 4px; }
.auth-footer a:hover { color: var(--gold); }

/* ========== 后台用户管理 ========== */
.user-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.user-table th { background: var(--wine); color: #fff; text-align: left; padding: 12px 10px; font-weight: 600; }
.user-table th:first-child { border-radius: var(--r-md) 0 0 0; }
.user-table th:last-child { border-radius: 0 var(--r-md) 0 0; }
.user-table td { padding: 12px 10px; border-bottom: 1px solid #f0f0f0; }
.user-table tr:hover { background: var(--wine-soft); }
.user-table .user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--wine), var(--wine-light)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.user-table .user-name { font-weight: 600; color: var(--ink); }
.user-table .user-phone { color: #666; }
.user-table .user-company { color: #666; }
.user-table .user-date { color: var(--muted); font-size: 12px; }
.user-table .user-orders { text-align: center; }
.user-table .user-orders .badge { background: var(--wine-soft); color: var(--wine); padding: 2px 10px; border-radius: var(--r-full); font-weight: 600; font-size: 12px; }
.user-detail-card { background: var(--bg-card); border-radius: var(--r-md); padding: 24px; margin-bottom: 16px; }
.user-detail-card .user-info-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #f0f0f0; }
.user-detail-card .user-info-header .user-avatar-lg { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--wine), var(--wine-light)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; }
.user-detail-card .user-info-header .user-meta h3 { font-size: 18px; color: var(--ink); }
.user-detail-card .user-info-header .user-meta p { font-size: 13px; color: var(--muted); }
.user-detail-card .user-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.user-detail-card .user-info-grid .info-item { display: flex; flex-direction: column; }
.user-detail-card .user-info-grid .info-item .label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.user-detail-card .user-info-grid .info-item .value { font-size: 14px; color: var(--ink); font-weight: 500; }
/* ========== AI 客服回复徽标 ========== */
.msg-ai-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6d28d9, #9333ea);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.msg-human-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.msg-conv-claimed { font-size: 11px; margin-left: 4px; }
.msg-canned-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px; border-top: 1px solid #eee; background: var(--bg-soft); }
.msg-canned-label { font-size: 12px; color: var(--muted); }
.msg-canned-chip { font-size: 12px; background: var(--bg-card); border: 1px solid #ddd; border-radius: 12px; padding: 2px 10px; cursor: pointer; }
.msg-canned-chip:hover { border-color: var(--wine); color: var(--wine); }
.msg-notes-area { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid #eee; align-items: stretch; }
.msg-notes-area textarea { flex: 1; border: 1px solid #ddd; border-radius: var(--r-sm); padding: 6px 10px; font-size: 12px; resize: vertical; }


/* ========== 隐私政策 / 账户中心 ========== */
.policy-page { max-width: 860px; margin: 24px auto 48px; background: var(--bg-card, #fff); border-radius: 14px; padding: 32px 36px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.policy-page h1 { font-size: 26px; margin-bottom: 6px; }
.policy-page .policy-updated { font-size: 13px; color: #999; margin-bottom: 18px; }
.policy-page h2 { font-size: 18px; margin: 22px 0 8px; }
.policy-page p { font-size: 14px; line-height: 1.9; color: #444; }

.auth-consent label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #555; line-height: 1.6; cursor: pointer; }
.auth-consent input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--wine); }
.auth-consent a { color: var(--wine); text-decoration: underline; }

.auth-privacy { margin-top: 10px; text-align: center; font-size: 12px; }
.auth-privacy a { color: #999; text-decoration: underline; }

.account-page { max-width: 860px; margin: 24px auto 48px; padding: 0 12px; }
.account-page h1 { font-size: 24px; margin-bottom: 16px; }
.account-card { background: var(--bg-card, #fff); border-radius: 14px; padding: 20px 24px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.account-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.account-row:last-child { border-bottom: none; }
.account-label { color: #888; flex: none; }
.account-value { color: #1f2329; font-weight: 500; word-break: break-all; text-align: end; }
.account-danger { background: var(--bg-card, #fff); border: 1px solid #f3d6da; border-radius: 14px; padding: 20px 24px; margin-top: 20px; box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.account-danger h3 { font-size: 16px; color: var(--wine); margin-bottom: 8px; }
.account-danger p { font-size: 13px; color: #666; line-height: 1.7; margin-bottom: 14px; }
.btn-danger { height: 40px; padding: 0 20px; border: 1px solid var(--wine); border-radius: 8px; background: transparent; color: var(--wine); font-size: 14px; cursor: pointer; }
.btn-danger:hover { background: var(--wine); color: #fff; }

@media (max-width: 600px) {
  .policy-page { margin: 16px 12px 32px; padding: 22px 18px; }
  .policy-page h1 { font-size: 22px; }
}