@charset "UTF-8";
/* =============================================================================
   bd-components.css  ——  PC 端组件层（design-spec.md §9 UX 清单 + §4.1 四列栅格）
   -----------------------------------------------------------------------------
   加载位置：bd-tokens.css → bd-bridge.css → bd-components.css（head.php:294 之后）
   硬约束：不新增 / 不删除任何 DOM，不改现有 CSS 正文。
   防呆：交互场景只允许 --bd-action / --bd-action-hover / --bd-action-ink；
         --bd-decor(=500) 只允许装饰；金底文字必须是 --bd-on-gold。
   ============================================================================= */

/* =============================================================================
   §4.1 首页商品列表列数 —— 【用户最终决策：保留 5 列，不改列数】
   -----------------------------------------------------------------------------
   决策依据（team-lead 转达用户）：保留 5 列，只优化卡片内部。
   因此本文件【刻意不包含】任何改变列数 / 卡片宽度 / flex-basis / gap 的规则。

   现状实测（供后续维护者参考，勿据此改代码）：
     .tem_index_product ul.five-col-container 是 flex（d-flex + justify-content-between）
     li.col-5-item 为 width:20%（main.min.css:143）
     .gap-2 全站 CSS 零定义 → 实际 gap 为 0
     容器 .tem_inner 在 >=1200px 时为 width:1200px; padding:0（critical.css:205）
     → 每卡 1200 x 20% = 240px，5 列铺满，无间隙

   本文件允许做的只有「卡片内部」优化：hover 位移/阴影、标题两行截断、
   圆角、行高字号。见下方 §9-1。
   ============================================================================= */

/* =============================================================================
   §9-1 商品卡 hover 反馈
   ============================================================================= */
.tem_index_product ul li.col-5-item{
  transition:transform var(--bd-dur) var(--bd-ease),
             box-shadow var(--bd-dur) var(--bd-ease);
  border-radius:var(--bd-radius-lg);
}
.tem_index_product ul li.col-5-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--bd-shadow-md);
}
.tem_index_product ul li.col-5-item:hover a{ color:var(--bd-action); }
.tem_index_product ul li.col-5-item a img{
  transition:transform var(--bd-dur-slow) var(--bd-ease);
}
.tem_index_product ul li.col-5-item:hover a img{ transform:scale(1.06); }
/* 图片外框裁掉放大溢出的部分 */
.tem_index_product ul li.col-5-item > a:first-child{
  display:block;
  overflow:hidden;
  border-radius:var(--bd-radius-md);
}
.tem_index_product ul li.col-5-item > a + a{
  display:block;
  margin-top:var(--bd-space-3);
  color:var(--bd-text-strong);
  line-height:1.45;
  /* 两行截断，避免长商品名撑破卡片 */
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* =============================================================================
   §9-2 价格区层级（PC 首页商品卡无价格，此组作用于栏目页 / 商城页）
   ============================================================================= */
.product-price,
.price-current,
.g-price{
  font-family:var(--bd-font-num);
}
.price-current{
  font-size: 18px;
  font-weight:700;
  color:var(--bd-action);      /* #cf3a56 白底 4.78:1 */
  line-height:1.2;
}
.price-current .symbol,
.price-current .cur-symbol{ font-size: 14px; font-weight:600; }
.price-original,
.product-price del{
  font-size: 14px;
  color:var(--bd-ink-500);
  text-decoration:line-through;
}
.product-save{
  font-size: 14px;
  color:var(--bd-danger-text);
  background:var(--bd-primary-50);
  border-radius:var(--bd-radius-sm);
  padding:2px 6px;
}

/* =============================================================================
   §9-3 促销角标统一
   ============================================================================= */
.product-badge,
.product-image-wrapper .badge,
.hot-item .badge{
  position:absolute;
  left:0;
  top:0;
  height:24px;
  line-height:24px;
  padding:0 8px;
  border-radius:0 var(--bd-radius-md) 0 var(--bd-radius-md);
  background:var(--bd-action);   /* 白字 4.78:1 */
  color:#fff;
  font-size: 14px;
  font-weight:600;
  z-index:2;
}
.product-badge.badge-sub,
.product-badge ~ .product-badge{
  background:var(--bd-secondary-100);
  color:var(--bd-secondary-800);
}

/* =============================================================================
   §9-4 主导航当前态：文字 + 常驻下划线（不只靠颜色）
   ============================================================================= */
.head-nav ul li a.navdown,
.fix-header-nav .head-nav ul li a.navdown{
  /* 与 bd-bridge 保持一致：白底承载文字用 700(#ad2c45, 6.52:1)，
     不要用 500(#cf3a56)，否则相邻两层互相覆盖、最终色取决于加载顺序 */
  color:var(--bd-action-ink);
  font-weight:600;
}
.head-nav ul li a.navdown::after,
.fix-header-nav .head-nav ul li a.navdown::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:2px;
  background:var(--bd-action);
  border-radius:2px 2px 0 0;
}
.fix-header-nav .head-nav ul li a::after{
  transition:width var(--bd-dur) var(--bd-ease),
             left var(--bd-dur) var(--bd-ease);
}

/* =============================================================================
   §9-5 顶部条压缩
   -----------------------------------------------------------------------------
   已实现：高度 36px、字号 12px、背景 --bd-surface-2、文字 --bd-text-muted；
   语言入口本来就已是右侧下拉（.lang-selector / .lang-dropdown），无需改结构。
   【未实现部分见交付报告】「只留满199包邮 / 正品保障」属于文案内容变更，
   现有 DOM 里没有这两条文案，纯 CSS 无法凭空产出可翻译、可被读屏的文本，
   故本次未做。
   ============================================================================= */
.head_top_nav{
  background:var(--bd-surface-2);
  border-bottom:1px solid var(--bd-border-light);
}
.head_top_nav .tem_inner.tem_top{
  min-height:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--bd-space-4);
  font-size: 14px;
  color:var(--bd-text-muted);
}
.head_top_nav .tem_top_welcome,
.head_top_nav .tem_top_welcome p,
.head_top_nav .tem_top_welcome span{
  font-size: 14px!important;
  line-height:36px !important;
  color:var(--bd-text-muted);
  margin:0;
}
.head_top_nav .tem_top_nav{ display:flex; align-items:center; }
.head_top_nav .top-nav-links ul{ display:flex; align-items:center; gap:var(--bd-space-2); }
.head_top_nav .top-nav-links a,
.head_top_nav .lang-selector a{
  font-size: 14px;
  color:var(--bd-text-muted);
  text-decoration:none;
}
.head_top_nav .top-nav-links a:hover,
.head_top_nav .lang-selector a:hover{ color:var(--bd-action); }
.head_top_nav .lang-dropdown-menu a{ color:var(--bd-text); }

/* =============================================================================
   §9-6 搜索框：40 → 44px，圆角 pill，focus 用阴影环（不改边框宽度，避免抖动）
   ============================================================================= */
.head-search-box .search .input-text{
  height:44px;
  border-radius:var(--bd-radius-pill);
  border:1px solid var(--bd-border);
  background:var(--bd-surface-0);
}
.head-search-box .search .input-text:focus{
  border-color:var(--bd-action);
  box-shadow:var(--bd-shadow-focus);
  outline:none;
}
.head-search-box .search .searchgo{
  width:44px;
  height:44px;
  right:0;
  border-radius:var(--bd-radius-pill);
}
.head-search-box .search .searchgo i,
.head-search-box .search .searchgo .fa{ color:#fff; }

/* =============================================================================
   §9-7 Banner 遮罩：亮处白字糊 → 加左深右透的渐变遮罩 + 文字投影
   ============================================================================= */
.banner-overlay{
  background:linear-gradient(90deg,
              rgba(31,27,29,.55) 0%,
              rgba(31,27,29,.15) 60%,
              rgba(31,27,29,0) 100%);
}
.banner-title,
.banner-content .banner-title{
  color:#fff;
  text-shadow:0 1px 8px rgba(31,27,29,.45);
}
.banner-content{ color:#fff; }
/* 分页圆点改香槟金，当前点加宽 —— 不承载文字，不受对比度约束 */
.swiper-pagination-bullet{
  background:var(--bd-gold);
  opacity:.55;
}
.swiper-pagination-bullet-active{
  background:var(--bd-gold);
  opacity:1;
  width:24px;
  border-radius:var(--bd-radius-pill);
}

/* =============================================================================
   §9-8 首页楼层标题统一 + 竖条去彩虹
   -----------------------------------------------------------------------------
   竖条 <i class="fl sideIcon" style="background:#xxx"> 是内联 style，
   外部选择器压不过内联非 !important 声明，只有 !important 能覆盖。
   实测首页 8 处竖条取值互不相关：#ff3074 / #95CD75 / #fc00ff / #00fcff /
   #78c340 / #FFC97A / #FFC97A / #6786bb —— 像挂了一条彩虹，必须统一。
   ============================================================================= */
.met_index_title{
  display:flex;
  align-items:center;
  gap:var(--bd-space-2);
  text-align:left;
}
.met_index_title .sideIcon,
.fl.sideIcon,
.box_title .sideIcon{
  background:var(--bd-decor) !important;
  width:4px;
  height:24px;
  border-radius:2px;
  flex:0 0 auto;
}
.met_index_title .item-name{
  font-size: 28px;            /* 32px */
  font-weight:700;
  color:var(--bd-text-strong);
  line-height:1.25;
}
.met_index_title em{
  font-size: 14px;
  font-weight:400;
  color:var(--bd-text-muted);
  font-style:normal;
  display:inline-flex;
  align-items:center;
  gap:var(--bd-space-2);
  margin-left:var(--bd-space-2);
}
/* 主标与副标之间插一条 32×3px 香槟金短划线（纯装饰，不受对比度约束） */
.met_index_title em::before{
  content:"";
  display:inline-block;
  width:32px;
  height:3px;
  border-radius:2px;
  background:var(--bd-gold);
}
.met_index_title .moreBox,
.moreBox{
  margin-left:auto;
  font-size: 14px;
  color:var(--bd-action);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.met_index_title .moreBox:hover,
.moreBox:hover{ color:var(--bd-action-hover); }

/* =============================================================================
   §9-11 页脚：本次只做「配色 + 行高 + 层级」的轻量收敛
   （多列改 3 栏属结构性调整，超出「只加样式」范围，未做）
   ============================================================================= */
.tem_index_footer_link a{
  display:inline-block;
  margin:0 12px 6px 0;
  line-height:28px;
  font-size: 14px;
  color:var(--bd-text-muted);
  text-decoration:none;
}
.tem_index_footer_link a:hover{ color:var(--bd-action); }
.index_footer_contact i,
.index_footer_contact .fa{ color:var(--bd-action); font-size: 18px; }
.tem_txt,
.powered_by_metinfo{
  margin-top:var(--bd-space-4);
  padding-top:var(--bd-space-4);
  border-top:1px solid var(--bd-border-light);
  font-size: 14px;
  color:var(--bd-ink-500);
}

/* =============================================================================
   §9-12 表单错误态 / focus 环
   ============================================================================= */
.met-form input,
.met-form select,
.met-form textarea,
.form-control{
  border:1px solid var(--bd-border);
  border-radius:var(--bd-radius-md);
}
.met-form input:focus,
.met-form select:focus,
.met-form textarea:focus,
.form-control:focus{
  outline:none;
  border-color:var(--bd-action);
  box-shadow:var(--bd-shadow-focus);   /* 3px 环，不占布局，避免跳动 */
}
.has-error,
.met-form .has-error,
input.has-error,
textarea.has-error{
  border-color:var(--bd-danger-500) !important;
  background:var(--bd-danger-bg);
}
.error-tip,
.met-form .error,
.form-error{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:var(--bd-space-1);
  font-size: 14px;
  color:var(--bd-danger-text);
}
.error-tip:before,
.met-form .error:before,
.form-error:before{
  content:"!";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--bd-danger-500);
  color:#fff;
  font-size: 14px;
  font-weight:700;
}

/* =============================================================================
   §9-13 主 / 次按钮
   ============================================================================= */
.product-btn,
.cart-checkout-btn,
.met-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 var(--bd-space-5);
  border-radius:var(--bd-radius-md);
  font-size: 18px;
  font-weight:600;
  background:var(--bd-action);        /* 白字 4.78:1 */
  color:#fff;
  border:1px solid var(--bd-action);
  text-decoration:none;
  transition:background-color var(--bd-dur) var(--bd-ease);
}
.product-btn:hover,
.cart-checkout-btn:hover,
.met-btn-primary:hover{
  background:var(--bd-action-hover);
  color:#fff;
}
.product-btn:active,
.cart-checkout-btn:active{
  background:var(--bd-action-active);
  transform:translateY(1px);
}
/* 次按钮 */
.product-btn.btn-secondary,
.cart-continue-btn{
  background:transparent;
  color:var(--bd-action-ink);         /* #ad2c45 白底 6.52:1 */
  border-color:var(--bd-action);
}
.product-btn.btn-secondary:hover,
.cart-continue-btn:hover{
  background:var(--bd-primary-50);
  color:var(--bd-action-ink);
}
.product-btn:disabled,
.product-btn.disabled{
  background:var(--bd-ink-100);
  color:var(--bd-ink-500);
  border-color:var(--bd-ink-100);
  cursor:not-allowed;
}

/* =============================================================================
   §9-14 回到顶部：右下角 44×44
   （PC 模板当前未输出 .back-to-top，规则先就位，一旦有 DOM 即生效）

   【重要修正】这里曾把 .kefu-online / .server-icon 也写进本组，但这两个类
   在模板里都不是悬浮按钮：
     - .server-icon 是页脚「保密配送 / 7天退货…」5 张服务承诺图（ul > li）
     - .kefu-online 是页脚「24小时在线客服」文字链接（li > a）
   被 position:fixed + 44×44 后，页脚整排图标被压成一个固定小圆点并消失。
   现仅保留真正悬浮的 .back-to-top。
   ============================================================================= */
.back-to-top{
  position:fixed;
  right:24px;
  bottom:80px;
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:var(--bd-z-float);
  box-shadow:var(--bd-shadow-md);
}
.back-to-top{
  bottom:80px;
  background:var(--bd-surface-0);
  border:1px solid var(--bd-border-light);
  color:var(--bd-ink-700);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--bd-dur) var(--bd-ease),
             border-color var(--bd-dur) var(--bd-ease);
}
.back-to-top.is-visible{ opacity:1; pointer-events:auto; }
.back-to-top:hover{ border-color:var(--bd-action); color:var(--bd-action); }
/* 图标字体继承 currentColor，改父级 color 即可，不动字体文件 */
.back-to-top i,.back-to-top .fa{ color:currentColor; }

/* =============================================================================
   §9-15 页脚服务承诺：5 张承诺图（.server-icon）
   -----------------------------------------------------------------------------
   模板输出 5 个 <li>（li1/li2/li3 宽度分别是 17.49% / 20% / 25%，总和 97.47%，
   非 100%，最后一格会留下 2.5% 的空隙，视觉上不齐）。
   这里改为白卡 + flex 均分 + hover 微反馈，比裸图直接横排更整齐。
   图片原始高 64-79px、宽 149-236px，用 max-height 统一视觉高度并保持比例。
   ============================================================================= */
.tem_index_footer .server-icon{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 20px;
  padding:14px;
  background:var(--bd-surface-0);
  border:1px solid var(--bd-border-light);
  border-radius:var(--bd-radius-lg);
  box-shadow:var(--bd-shadow-xs);
  list-style:none;
}
.tem_index_footer .server-icon li{
  flex:1 1 0;
  min-width:0;
  width:auto;                /* 覆盖 li1/li2/li3 的 17.49% / 20% / 25% */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  border-radius:var(--bd-radius-md);
  transition:background var(--bd-dur) var(--bd-ease),
             transform var(--bd-dur) var(--bd-ease);
}
.tem_index_footer .server-icon li:hover{
  background:var(--bd-primary-50);
  transform:translateY(-2px);
}
.tem_index_footer .server-icon li img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:52px;
  object-fit:contain;
}

/* 右侧悬浮工具条：每格补到 44×44 最小可点击区 */
.quick-links li .quick-links-a,
.quick-toggle li .quick-links-a{
  min-width:var(--bd-tap-min);
  min-height:var(--bd-tap-min);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =============================================================================
   无障碍：全局 focus 可见性兜底（禁止只删 outline 不补偿）
   ============================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible{
  outline:none;
  box-shadow:var(--bd-shadow-focus);
  border-radius:var(--bd-radius-sm);
}

/* =============================================================================
   富文本正文统一字体
   商品/文章正文由外部富文本粘贴而来，内部常带 font-family:tahoma/宋体/arial
   等内联样式，与站点字体不一致（表现为同一页出现两种字形）。
   这里让正文文字统一继承站点字体；图标字体（.fa/.icon 等）保持原样。
   ============================================================================= */
.met_editor :where(p,span,div,h1,h2,h3,h4,h5,h6,li,ul,ol,dl,dt,dd,td,th,strong,b,em,a,font):not([class*="icon"]):not([class*="fa-"]):not(.fa),
.met-editor :where(p,span,div,h1,h2,h3,h4,h5,h6,li,ul,ol,dl,dt,dd,td,th,strong,b,em,a,font):not([class*="icon"]):not([class*="fa-"]):not(.fa){
  font-family:inherit !important;
}

/* =============================================================================
   右侧悬浮工具条：登录态面板 / 浏览记录面板（2026-11-03）
   -----------------------------------------------------------------------------
   原模板只有游客态样式，.logined-info / .logined-box 无任何规则；
   「浏览记录」按钮是空链接。此处补齐排版、浏览记录面板，色值统一走令牌。
   ============================================================================= */
.sidebar-user .logined-info{ margin-top:10px; text-align:center; }
.sidebar-user .logined-info .guest-text{ margin:0 0 8px; font-size:14px; line-height:20px; color:var(--bd-text); }
.sidebar-user .logined-info .guest-text b,
.sidebar-user .sidebar-user-info .guest-text b{ color:var(--bd-action); }
.sidebar-user .logined-info p a{ display:inline-block; margin:0 8px; font-size:14px; line-height:24px; color:var(--bd-action); }
.sidebar-user .logined-info p a:hover{ color:var(--bd-action-hover); text-decoration:underline; }

.sidebar-recent{
  display:none;
  width:240px;
  padding:14px;
  background:#fff;
  border-radius:var(--bd-radius-lg) 0 0 var(--bd-radius-lg);
  box-shadow:-4px 0 20px rgba(31,27,29,.15);
  position:absolute;
  top:0;
  left:-240px;
  z-index:999999;
  text-align:left;
  animation:slideInRight 0.3s ease;
}
.sidebar-recent .recent-title{ margin:0 0 10px; font-size:14px; font-weight:700; color:var(--bd-text-strong); }
.sidebar-recent .recent-list{ max-height:300px; overflow-y:auto; margin:0; padding:0; list-style:none; scrollbar-width:thin; }
.sidebar-recent .recent-list li{ border-bottom:1px dashed var(--bd-border-light); }
.sidebar-recent .recent-list li:last-child{ border-bottom:none; }
.sidebar-recent .recent-list a{ display:block; padding:8px 0; font-size:14px; line-height:20px; color:var(--bd-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-recent .recent-list a:hover{ color:var(--bd-action); }
.sidebar-recent .recent-empty{ padding:16px 0; text-align:center; list-style:none; color:var(--bd-text-muted); font-size:14px; }
.sidebar-recent .arrow-right{ position:absolute; right:0; top:15px; width:5px; height:9px; background-position:-294px -124px; overflow:hidden; }

.quick-links .cart-list{ border:0; padding:0; cursor:pointer; font-family:inherit; }
.quick-links .cart-list .span{ font-size:14px; }
.wx-copied{ font-style:normal; margin-left:6px; color:#fff; font-size:14px; }