@charset "UTF-8";
/* =============================================================================
   bd-components.css  ——  移动端：存量配色债覆盖 + UX 组件层
   -----------------------------------------------------------------------------
   加载位置：bd-tokens.css 之后（head.php:215 / index_head.php:84 之后），
            因此所有规则都靠「后置加载 + 同级特异性」取胜，无需大面积 !important。
   硬约束：不新增 / 不删除任何 DOM，不改现有 CSS 正文，只做样式叠加。
   防呆：交互场景只允许 --bd-action / --bd-action-hover / --bd-action-ink；
         --bd-decor(--bd-primary-500) 只允许用于 Logo / 纯装饰 / ≥24px 大字；
         金底(--bd-gold) 上的文字必须是 --bd-on-gold(#1f1b1d)，禁止白字。
   ============================================================================= */

/* =============================================================================
   A. 存量配色债覆盖（对应 design-spec.md §8.4，移动端共 6 处）
   -----------------------------------------------------------------------------
   这些位置在 metinfo.css（308KB AmazeUI，核心强制加载，禁止改正文）里写死了
   #E85D75。白底 #E85D75 实测 3.36:1，不满足 AA 4.5:1 → 一律升到 600 #cf3a56。
   ============================================================================= */

/* A-1  首页三个快捷入口：白底 #E85D75 字（14px）→ 600 */
.min-guide a{
  border-color:var(--bd-action);
  color:var(--bd-action);
}
/* A-2  :active 时 #E85D75 底 + 白字 → 底改 600（白字 4.78:1） */
.min-guide a:active{
  background:var(--bd-action);
  color:#fff;
}

/* A-3  AmazeUI 标签页选中态是 Amaze 蓝 #0e90d2 → 改品牌主色 */
.am-tabs-d2 .am-tabs-nav>.am-active{
  border-bottom-color:var(--bd-action);
}
.am-tabs-d2 .am-tabs-nav>.am-active a{
  color:var(--bd-action-ink);
}
.am-tabs-d2 .am-tabs-nav>.am-active:after{
  border-bottom-color:var(--bd-action);
}

/* A-4  顶部汉堡图标 / 当前位置标签（图形元素，3:1 即可，统一到 600 收口） */
.tem_top i.fa-bars{ color:var(--bd-action); }
.tem_top i.met_now{ background:var(--bd-primary-50); color:var(--bd-action); }

/* A-5  侧栏菜单展开条：#E85D75 → 600 */
.sub-am-menu .sub-menu-toggle span{ color:var(--bd-action); }
.sub-am-menu .sub-menu-toggle i{ color:var(--bd-action); }

/* A-6  【本次新增发现】商品/资讯 tab 选中态是玫红 #ff38a2，对白字仅约 3.5:1，
        且是 AmazeUI 之外的独立色 → 统一到品牌主色，并兼容模板实际输出的
        .flex-active（index/product.php 里首个 tab 写的是 flex-active） */
.tem_index_product_tab li.am-active span,
.tem_index_news_tab li.am-active span,
.tem_index_comment_tab li.am-active span,
.tem_index_product_tab li.flex-active span,
.tem_index_news_tab li.flex-active span,
.tem_index_comment_tab li.flex-active span{
  background:var(--bd-action);
  color:#fff;
}

/* =============================================================================
   B. UX 清单（design-spec.md §9）—— 移动端子集
   ============================================================================= */

/* ---------- B1 商品卡触屏反馈（触屏无 hover，用 :active；§9-1） ---------- */
.index-product-list a,
.product-card a,
.product-card-inner{
  -webkit-tap-highlight-color:transparent;
}
.index-product-list:active,
.product-card:active{
  transform:scale(.98);
  background:var(--bd-surface-2);
}
.index-product-list,
.product-card{
  transition:transform var(--bd-dur) var(--bd-ease),
             background-color var(--bd-dur) var(--bd-ease);
}

/* ---------- B2 价格区层级（§9-2） ---------- */
.product-price,
.price-current,
.cart-preview-item-price,
.cart-item-price,
.cart-total-price{
  font-family:var(--bd-font-num);
}
.price-current,
.product-price .price-current{
  font-size: 18px;
  font-weight:700;
  color:var(--bd-action);      /* #cf3a56 白底 4.78:1 */
  line-height:1.2;
}
.price-current .cur-symbol,
.product-price .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,
.price-save{
  font-size: 14px;
  color:var(--bd-danger-text);
  background:var(--bd-primary-50);
  border-radius:var(--bd-radius-sm);
  padding:2px 6px;
}

/* ---------- B3 促销角标统一（§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;
}
/* 一卡只允许一个玫红角标，其余降级为金底 + 深棕字（#6b541c 对 #faf0d0 ≈ 8.2:1） */
.product-badge.badge-sub,
.product-badge ~ .product-badge{
  background:var(--bd-secondary-100);
  color:var(--bd-secondary-800);
}

/* ---------- B9 分类/筛选 chip 横向可滑（§9-9） ---------- */
.tem_index_product_tab,
.tem_index_news_tab,
.tem_index_comment_tab{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  gap:var(--bd-space-2);
  padding:var(--bd-space-1) var(--bd-gutter-mobile);
  margin:var(--bd-space-3) 0;
}
.tem_index_product_tab::-webkit-scrollbar,
.tem_index_news_tab::-webkit-scrollbar,
.tem_index_comment_tab::-webkit-scrollbar{ display:none; }
.tem_index_product_tab li,
.tem_index_news_tab li,
.tem_index_comment_tab li{
  flex:0 0 auto;
  scroll-snap-align:start;
  margin:0;
}
.tem_index_product_tab li span,
.tem_index_news_tab li span,
.tem_index_comment_tab li span{
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 16px;
  border-radius:var(--bd-radius-pill);
  background:var(--bd-surface-2);
  color:var(--bd-ink-700);
  font-size: 14px;
  white-space:nowrap;
  transition:background-color var(--bd-dur) var(--bd-ease),
             color var(--bd-dur) var(--bd-ease);
}
.tem_index_product_tab li.am-active span,
.tem_index_news_tab li.am-active span,
.tem_index_comment_tab li.am-active span,
.tem_index_product_tab li.flex-active span,
.tem_index_news_tab li.flex-active span,
.tem_index_comment_tab li.flex-active span{
  background:var(--bd-action);
  color:#fff;
}

/* ---------- B10 底部导航：44×44 可点击 + 非颜色依赖的选中态（§9-10） ---------- */
.tem_footer_nav{
  min-height:56px;
  padding-bottom:env(safe-area-inset-bottom);
}
.tem_footer_nav a{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:var(--bd-tap-min);   /* 44px */
  min-height:var(--bd-tap-min);
  padding:var(--bd-space-1) var(--bd-space-2);
  color:var(--bd-ink-700);
  text-decoration:none;
}
.tem_footer_nav a i,
.tem_footer_nav a .fa{ font-size: 18px; line-height:1; }
.tem_footer_nav a span{ font-size: 14px; margin-top:2px; }
/* 选中态不只靠颜色：图标上方补一个 2px 香槟金圆点 */
.tem_footer_nav a.active,
.tem_footer_nav a.am-active,
.tem_footer_nav .active a{ color:var(--bd-action); }
.tem_footer_nav a.active:before,
.tem_footer_nav a.am-active:before{
  content:"";
  position:absolute;
  top:2px;
  left:50%;
  transform:translateX(-50%);
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--bd-gold);
}
/* 给 body 补底距，避免 fixed 底栏遮住内容（仅当底栏是 fixed 时生效） */
body.has-footer-nav{ padding-bottom:56px; }

/* ---------- B12 表单错误态：不只靠红框（§9-12） ---------- */
.met-form input.has-error,
.met-form select.has-error,
.met-form textarea.has-error,
.form-control.has-error,
input.has-error,
textarea.has-error{
  border:1px solid var(--bd-danger-500);
  background:var(--bd-danger-bg);
}
.met-form input:focus,
.met-form select:focus,
.met-form textarea:focus,
.form-control:focus{
  outline:none;
  box-shadow:var(--bd-shadow-focus);   /* 3px 主色环，不占布局，避免跳动 */
  border-color:var(--bd-action);
}
.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;
  line-height:1;
}

/* ---------- B13 加购 / 立即购买 主次分明（§9-13） ---------- */
.product-btn,
.cart-checkout-btn,
.cart-preview-btn,
.mobile-cart-link{
  display:block;
  width:100%;
  min-height:var(--bd-tap-min);
  line-height:var(--bd-tap-min);
  padding:0 var(--bd-space-5);
  border-radius:var(--bd-radius-md);
  font-size: 18px;
  font-weight:600;
  text-align:center;
  text-decoration:none;
  background:var(--bd-action);        /* #cf3a56 白字 4.78:1 */
  color:#fff;
  border:1px solid var(--bd-action);
  transition:background-color var(--bd-dur) var(--bd-ease);
}
.product-btn:hover,
.cart-checkout-btn:hover,
.cart-preview-btn:hover{ background:var(--bd-action-hover); color:#fff; }
.product-btn:active{ background:var(--bd-action-active); transform:translateY(1px); }
/* 次按钮：透明底 + 主色描边 + 700 文字（白底 #ad2c45 ≈ 6.52:1） */
.product-btn.btn-secondary,
.cart-continue-btn,
.product-actions .btn-ghost{
  background:transparent;
  color:var(--bd-action-ink);
  border-color:var(--bd-action);
}
.product-btn.btn-secondary:hover,
.cart-continue-btn:hover{
  background:var(--bd-primary-50);
  color:var(--bd-action-ink);
}
/* 禁用态（WCAG 对禁用控件豁免，但统一观感） */
.product-btn:disabled,
.product-btn.disabled,
.cart-checkout-btn:disabled{
  background:var(--bd-ink-100);
  color:var(--bd-ink-500);
  border-color:var(--bd-ink-100);
  cursor:not-allowed;
}
/* 移动端两按钮上下堆叠 */
.product-actions{ display:flex; flex-direction:column; gap:var(--bd-space-3); }

/* ---------- B14 回到顶部 / 客服（§9-14） ---------- */
.back-to-top,
.kefu-online,
.server-icon{
  position:fixed;
  right:16px;
  width:var(--bd-tap-min);
  height:var(--bd-tap-min);
  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:84px;                 /* 避开 56px 底部导航 */
  background:#fff;
  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); }
.kefu-online,
.server-icon{
  bottom:24px;
  background:var(--bd-action);
  color:#fff;
}
/* 图标字体走 currentColor，改父级 color 即可，不需要改字体文件 */
.back-to-top i,
.back-to-top .fa,
.kefu-online i,
.kefu-online .fa,
.server-icon i,
.server-icon .fa{ color:currentColor; }

/* ---------- 楼层标题统一（§9-8 移动端子集） ---------- */
.box_title{
  text-align:left;
  margin:var(--bd-space-5) 0 var(--bd-space-4);
}
.box_title span{
  border-bottom:none;
  padding-bottom:0;
  font-size: 14px;
  font-weight:700;
  color:var(--bd-text-strong);
}
/* 标题左侧小竖条（模板里是内联 style="background:#xxx"，只有 !important 能压过） */
.box_title .sideIcon,
.tem_index_title .sideIcon,
.fl.sideIcon{
  background:var(--bd-decor) !important;
}

/* ---------- 「更多」文字链（§9-8） ---------- */
.tem_index_more a,
.moreBox a{
  font-size: 14px;
  color:var(--bd-action);
  text-decoration:none;
}

/* ---------- 首页轮播图（mobile_get_flash 输出，此前缺样式） ---------- */
.mobile-flash-slider{
  width:100%;
  overflow:hidden;
  background:var(--bd-surface-2);
}
.mobile-flash-container{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.mobile-flash-container::-webkit-scrollbar{ display:none; }
.mobile-flash-list{
  display:flex;
  margin:0;
  padding:0;
  list-style:none;
}
.mobile-flash-list li{
  flex:0 0 100%;
  scroll-snap-align:start;
}
.mobile-flash-list li a{ display:block; }
.mobile-flash-list li img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:640/400;
  object-fit:cover;
}

/* ---------- 首页 AmazeUI 轮播（.am-slider）静态化 ----------
   AmazeUI 的 slider 组件依赖 JS 初始化，本模板未加载该 JS，
   导致 .am-slides > li 仍是 position:absolute、容器高度 0，整块 banner 不可见。
   这里改为纯 CSS 横向滑动：无需 JS，也不改变 DOM。 */
.tem_banner.am-slider{
  position:relative;
  width:100%;
  overflow:hidden;
  height:auto;
  min-height:0;
}
.tem_banner .am-slides{
  display:flex;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  list-style:none;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.tem_banner .am-slides::-webkit-scrollbar{ display:none; }
.tem_banner .am-slides > li{
  display:block;
  float:none;
  position:static;
  opacity:1;
  visibility:visible;
  flex:0 0 100%;
  width:100%;
  height:auto;
  scroll-snap-align:start;
}
.tem_banner .am-slides > li > a{ display:block; }
.tem_banner .am-slides > li img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:640/400;
  object-fit:cover;
}

/* ---------- 顶部栏：内容高于 48px 时不再被裁切 ---------- */
header .tem_top{
  height:auto;
  min-height:48px;
}

/* ---------- 页脚友情链接（.tem_txt 也是 AmazeUI slider，未加载 JS 时高度为 0） ---------- */
.tem_index_txt_slides.am-slider{
  position:relative;
  width:100%;
  overflow:visible;
  height:auto;
  min-height:0;
}
.tem_index_txt_slides .am-slides{
  display:flex;
  flex-wrap:wrap;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  list-style:none;
  overflow:visible;
}
.tem_index_txt_slides .am-slides > li{
  display:block;
  float:none;
  position:static;
  opacity:1;
  visibility:visible;
  flex:0 0 auto;
  width:auto;
  height:auto;
  margin:0 12px 6px 0;
}
.tem_index_txt_slides .am-slides > li > a{
  display:inline-block;
  white-space:nowrap;
  color:var(--bd-text-muted);
  font-size: 14px;
  line-height:28px;
  text-decoration:none;
}

/* =============================================================================
   富文本正文统一字体
   商品/文章正文由外部富文本粘贴而来，内部常带 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;
}