/* =========================================
 * 01) Design Tokens 令牌（全局变量）
 * =======================================*/
:root {
  /* 色板 */
  --ey-brand: #000000;
  --ey-brand-2: #b96551;
  --ey-ink: #101113;
  --ey-ink-2: #333333;
  --ey-muted: #666666;
  --ey-subtle: #999999;
  --ey-border: #e6e8eb;
  --ey-bg: #ffffff;
  --ey-surface: #ffffff;
  --ey-card: #ffffff;
  --ey-bg-alt: #f6f7f9;

  /* 语义色 */
  --ey-success: #11b396;
  --ey-danger: #ff5b5b;
  --ey-warning: #ffb020;
  --ey-info: #388bfd;

  /* 圆角 & 阴影 */
  --ey-radius-sm: 8px;
  --ey-radius-md: 12px;
  --ey-radius-lg: 16px;
  --ey-shadow-color: rgba(0, 0, 0, 0.1);
  --ey-shadow-sm: 0 1px 3px var(--ey-shadow-color);
  --ey-shadow-md: 0 6px 20px var(--ey-shadow-color);
  --ey-shadow-lg: 0 12px 30px var(--ey-shadow-color);

  /* 间距 */
  --ey-s-1: 4px;
  --ey-s-2: 8px;
  --ey-s-3: 12px;
  --ey-s-4: 16px;
  --ey-s-5: 20px;
  --ey-s-6: 24px;
  --ey-s-8: 32px;
  --ey-s-10: 40px;
  --ey-s-12: 48px;

  /* 字体系统 */
  --ey-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --ey-line-height-base: 1.7;
  --ey-line-height-tight: 1.4;
  --ey-font-weight-normal: 400;
  --ey-font-weight-bold: 700;
  --ey-fs-xs: 12px;
  --ey-fs-sm: 14px;
  --ey-fs-md: 16px;
  --ey-fs-lg: 18px;
  --ey-fs-xl: 20px;
  --ey-fs-2xl: 26px;

  /* 容器 & 断点 */
  --ey-container: 1200px;
  --ey-safe-x: 12px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* 动效 & 布局 */
  --ey-transition-base: .2s ease;
  --ey-header-height-mobile: 64px;
}

/* =========================================
 * 02) Base & Reset
 * =======================================*/
html {
  height: 100%;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 为锚点跳转预留顶部安全区（配合固定头部） */
  scroll-padding-top: var(--ey-header-height-mobile);
}
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  min-height: 100%;
  color: var(--ey-ink-2);
  background: var(--ey-bg);

  font-family: var(--ey-font);
  font-size: var(--ey-fs-md);
  font-weight: var(--ey-font-weight-normal);
  line-height: var(--ey-line-height-base);

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ey-transition-base), opacity var(--ey-transition-base);
}
a:hover { color: var(--ey-brand); opacity: .9; }

/* 可访问性：仅键盘聚焦时出现 */
:focus-visible {
  outline: 2px solid var(--ey-brand);
  outline-offset: 2px;
}

/* 文本选中颜色 */
::selection {
  background: color-mix(in oklab, var(--ey-brand) 18%, #fff);
  color: var(--ey-ink);
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* ===== 3) 容器与工具类 ===== */
.w-container { width: min(var(--ey-container), 92%); margin-inline: auto; }

.pt10 { padding-top: var(--ey-s-3); }
.pb10 { padding-bottom: var(--ey-s-3); }
.mt20 { margin-top: var(--ey-s-6); }
.mt30 { margin-top: var(--ey-s-8); }
.text-center { text-align: center; }

/* 兼容旧项目的工具类（可逐步淘汰） */
.margin {margin:10px!important;clear:both}
.margin-top {margin-top:10px}
.margin-right {margin-right:10px}
.margin-bottom {margin-bottom:10px}
.margin-left {margin-left:10px}
.blank-small{height:20px;line-height:20px;clear:both;font-size:0}
.blank-middle{height:30px;line-height:30px;clear:both;font-size:0}
.blank-big{height:50px;line-height:50px;clear:both;font-size:0}
.blank-large{height:80px;line-height:80px;clear:both;font-size:0}

/* ===== 4) 顶部区域 ===== */

.navbar-addon a { margin-left: var(--ey-s-3); }
.navbar-addon img { width: 20px; margin-bottom: 5px; }
.navbar-addon i { font-size: var(--ey-fs-md); }

.navbar-logo img {
  height: 50px;
  width: auto;
  display: block;
  object-fit: contain;
}
/* 导航栏右侧功能区：头像 + 登录 + 购物车 */
.navbar-addon {
  display: flex;
  align-items: center;   /* 垂直居中对齐 */
  gap: 12px;             /* 元素之间的间距 */
}

/* 头像容器（由 eyou:user type='userinfo' 输出） */
.navbar-addon img,
.navbar-addon .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;    /* 圆形头像 */
  object-fit: cover;
  display: block;
}

/* 登录/购物车按钮 */
.navbar-addon a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;             /* 白底 */
  border: 1px solid #e0e6ec;    /* 边框 */
  color: #333;
  font-size: 18px;
  line-height: 1;
  transition: all 0.2s ease;
  text-decoration: none;
}

.navbar-addon a:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

/* 图标字体缩放 */
.navbar-addon i {
  font-size: 18px;
  line-height: 1;
}

/* 移动端吸顶 */
@media (max-width: 992px){
  .w-container.fixed{
    position: fixed; top: 0; left: 0; right: 0;
    width: 100%; z-index: 9999; background: var(--ey-bg);
    box-shadow: var(--ey-shadow-sm);
  }
  body{ padding-top: var(--ey-header-height-mobile); }
}

/* ==========================================================================
   Hero Banner - 升级优化版（含移动端修复）
   ========================================================================== */

/* -------------------- 主题变量 -------------------- */
.hero-banner {
  --hb-line-color: rgba(0, 0, 0, .08);
  --hb-fade-height: 14px;
  --hb-arrow-size: 44px;
  --hb-arrow-bg: rgba(255, 255, 255, .72);
  --hb-arrow-bg-m: rgba(255, 255, 255, .60);
  --hb-shadow: 0 10px 30px rgba(0, 0, 0, .10);
  --hb-shadow-hover: 0 14px 38px rgba(0, 0, 0, .16);

  position: relative;
  overflow: hidden;
}

/* -------------------- 布局与基础样式 -------------------- */

/* 上下隔离条 (细线 + 渐隐带) */
.hero-banner::before,
.hero-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  pointer-events: none;
  height: var(--hb-fade-height);
}
.hero-banner::before {
  top: 0;
  border-top: 1px solid var(--hb-line-color);
  background: linear-gradient(to bottom, var(--hb-line-color), transparent);
}
.hero-banner::after {
  bottom: 0;
  border-bottom: 1px solid var(--hb-line-color);
  background: linear-gradient(to top, var(--hb-line-color), transparent);
}

/* 滑动轨道 */
.hero-banner .hero-body {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.hero-banner .hero-body::-webkit-scrollbar { display: none; }

/* Banner 项（桌面默认比例） */
.hero-banner .hero-item {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 1920 / 650; /* 桌面基线 */
  position: relative;
  overflow: hidden;
  background: var(--ey-bg-alt, #f0f2f5);
  border: none;
  box-shadow: var(--hb-shadow);
}

/* 媒体容器 */
.hero-banner .hero-item .hero-media {
  width: 100%;
  height: 100%;
  background: var(--ey-bg-alt, #0b1021);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* 将 <a> 与媒体元素分离，避免给 <a> 误设 object-fit */
.hero-banner .hero-item .hero-media > a {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-banner .hero-item .hero-media img,
.hero-banner .hero-item .hero-media picture,
.hero-banner .hero-item .hero-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 桌面默认：铺满裁剪 */
  object-position: center;
  -webkit-user-drag: none;
  user-select: none;
}

/* 桌面端悬浮动效 */
@media (hover: hover) {
  .hero-banner .hero-item {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .hero-banner .hero-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--hb-shadow-hover);
  }
}

/* -------------------- 箭头与圆点 -------------------- */
.hero-banner .hero-prev,
.hero-banner .hero-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--hb-arrow-size);
  height: var(--hb-arrow-size);
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .1);
  background: var(--hb-arrow-bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
  backdrop-filter: blur(6px);
  cursor: pointer;
  z-index: 6;
  transition: transform 0.15s ease;
}
.hero-banner .hero-prev { left: 10px; }
.hero-banner .hero-next { right: 10px; }

.hero-banner .hero-prev::before,
.hero-banner .hero-next::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  border: 2px solid #222;
  border-width: 0 0 2px 2px;
  transform: rotate(45deg);
}
.hero-banner .hero-next::before { transform: rotate(-135deg); }
.hero-banner .hero-prev:active,
.hero-banner .hero-next:active { transform: translateY(-50%) scale(.96); }

/* 圆点分页 */
.hero-banner .hero-dots {
  position: absolute;
  left: 0; right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 6;
}
.hero-banner .hero-dots button {
  width: 8px; height: 8px;
  padding: 0; border: 0; cursor: pointer;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  transition: all .25s ease;
}
.hero-banner .hero-dots button.is-active {
  width: 22px;
  border-radius: 6px;
  background: #fff;
}

/* -------------------- 平板（≤992px） -------------------- */
@media (max-width: 992px) {
  .hero-banner .hero-item { aspect-ratio: 16 / 9; }
}

/* -------------------- 手机（≤768px） 关键覆盖 -------------------- */
@media (max-width: 768px) {
  .hero-banner {
    --hb-arrow-size: 52px;
    --hb-fade-height: 18px;
  }

  /* 轨道：缩小间距与左右内边距 */
  .hero-banner .hero-body {
    gap: 10px;
    padding-inline: 10px;
    padding-bottom: 8px;
  }

  /* 让卡片高度跟随图片真实比例变化 */
  .hero-banner .hero-body .hero-item {
    aspect-ratio: auto !important;  /* 覆盖 1920/650 */
  }

  /* 容器不再强制 100% 高度，交由内容撑开 */
  .hero-banner .hero-item .hero-media {
    height: auto !important;
  }

  /* 媒体：完整显示、不裁切 */
  .hero-banner .hero-item .hero-media img,
  .hero-banner .hero-item .hero-media video,
  .hero-banner .hero-item .hero-media picture > img {
    width: 100% !important;
    height: auto !important;          /* 关键：高度自适应 */
    object-fit: contain !important;   /* 关键：不裁切 */
    object-position: center !important;
  }

  /* 如果图片外包了 <a>，也保持自适应高度 */
  .hero-banner .hero-item .hero-media a > img,
  .hero-banner .hero-item .hero-media a > picture > img,
  .hero-banner .hero-item .hero-media a > video {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* 隐藏左右箭头，鼓励手势滑动 */
  .hero-banner .hero-prev,
  .hero-banner .hero-next {
    display: none !important;
  }
}

/* -------------------- 极小屏（≤420px） -------------------- */
@media (max-width: 420px) {
  .hero-banner .hero-body { padding-inline: 6px; gap: 8px; }
}


/* ===== 5) 首页区块标题 ===== */
.index-title { margin: var(--ey-s-12) auto; text-align: center; }
.index-title .index-title-t{
  position: relative; display: inline-block;
  padding: 0 var(--ey-s-5); font-size: var(--ey-fs-lg);
  color: var(--ey-bg); background: var(--ey-ink);
  border-radius: var(--ey-radius-sm);
}
.index-title .index-title-t.m-line::before,
.index-title .index-title-t.m-line::after{
  content:""; position:absolute; top:50%;
  height:1px; background: var(--ey-ink); width:100%; z-index:-1;
}
.index-title .index-title-t.m-line::before{ left:50%; }
.index-title .index-title-t.m-line::after{ right:50%; }
.index-title .index-title-b{ margin-top: var(--ey-s-2); color: var(--ey-muted); font-size: var(--ey-fs-sm); }
.index-title .index-title-b span{ margin:0 var(--ey-s-3); }

/* ===== 6) 产品列表（卡片） ===== */
.products-list { 
  margin-top: var(--ey-s-8); 
}

.products-list .item{
  position: relative; 
  padding: var(--ey-s-3); 
  font-size:0; 
  box-sizing:border-box;
}

.products-list .item .img{
  position: relative; 
  border-radius: var(--ey-radius-md); 
  overflow: hidden;
  background: var(--ey-bg-alt); 
  border:1px solid var(--ey-border);
  box-shadow: var(--ey-shadow-sm);
  transition: transform var(--ey-transition-base), box-shadow var(--ey-transition-base);
}

.products-list .item img{
  width:100%;
  aspect-ratio: 1 / 1;         /* 固定容器为正方形 */
  object-fit: contain;         /* 图片完整显示（不裁切） */
  background:#fff;             /* 多余区域填充白底 */
  padding:4px;                 /* 图片与边框留出间距 */
  box-sizing:border-box;
  /* 去掉与容器重复的圆角/边框，避免双边框与叠圆角 */
}

.products-list .item .img .fadein{ 
  position:absolute; 
  inset:0; 
  z-index:2; 
  display:none; 
}

.products-list .item .title{ 
  margin-top: var(--ey-s-3); 
  text-align:center; 
}

.products-list .item .title a{
  line-height: 1.6;
  font-size: var(--ey-fs-sm);
  display: block;                 /* 改为块级元素，避免 -webkit-box 约束 */
  white-space: normal !important; /* 自动换行 */
  overflow: visible;              /* 不裁切 */
  text-overflow: clip;            /* 不显示省略号 */

  /* 超长英文/长串自动断行 */
  overflow-wrap: anywhere;        
  word-break: break-word;         
  word-wrap: break-word;          

  /* 覆盖掉旧的 line-clamp */
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

.products-list .item .price{
  margin-top: var(--ey-s-1);
  font: var(--ey-font-weight-bold) var(--ey-fs-md)/1.5 var(--ey-font);
  display:inline-block; 
  text-align:center; 
  color: var(--ey-ink); 
  width:100%;
}

.products-list .item:hover .img{ 
  box-shadow: var(--ey-shadow-md); 
  transform: translateY(-4px); 
}


/* ===== 7) 热门产品区 ===== */
/* ================== Hot Product（升级版 | 独立作用域） ================== */
.hot-product{
  /* 安全边距：常规 + 刘海屏 */
  --hp-safe: clamp(16px, 3.5vw, 40px);
  --hp-card-w: min(360px, 80vw);        /* 卡片宽度（缩小） */
  --hp-gap: clamp(12px, 2.5vw, 24px);   /* 轨道间距 */
  --hp-radius: 12px;
  --hp-ink: #f0f0f0;
  --hp-ink-sub: #cfd6e6;
  --hp-accent: #40c9ff;
  --hp-bg: #0f192d;
  --hp-bg-deep: #020818;

  height: 747px;
  margin-top: 50px;
  background-color: var(--hp-bg-deep);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* 顶/底都考虑 safe-area，底部额外 +24px 缓冲 */
  padding: calc(var(--hp-safe) + env(safe-area-inset-top)) 0 calc(var(--hp-safe) + env(safe-area-inset-bottom) + 24px);

  color-scheme: dark; /* 让控件跟随深色 */
  container-type: inline-size; /* 开启容器查询：更聪明地调卡片宽度 */
}

/* 径向渐变罩层：位于 Canvas 之上、内容之下；不拦截点击 */
.hot-product::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center,
              rgba(10,23,56,.12) 0%,
              rgba(2,8,24,.82) 68%,
              var(--hp-bg-deep) 100%);
  z-index:2;
  pointer-events:none;
}

/* Canvas 置底，且不拦截点击（兼容 .blockchain-bg 与 #blockchain-bg） */
.blockchain-bg,
#blockchain-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1;
  pointer-events:none;
}

/* 容器：限制宽度并置顶层 */
.hot-product .index-title,
.hot-product .w-container{ position:relative; z-index:3; }
.hot-product .w-container{ width:min(1400px,96%); margin:0 auto; }

/* 标题配色（深色背景下的覆盖） */
.hot-product .index-title{ margin: calc(var(--hp-gap) + 6px) 0 var(--hp-gap); }
.hot-product .index-title .index-title-t{ color:#fff; }
.hot-product .index-title .index-title-b{ color:#cfd6e6; }

/* ============ 滑动容器基础 ============ */
.hot-product .flip{ position:relative; width:100%; }

/* 左右渐隐提示（无须额外DOM） */
.hot-product .flip::before,
.hot-product .flip::after{
  content:""; position:absolute; top:0; bottom:0; width:54px; z-index:3; pointer-events:none;
  transition: opacity .25s ease;
}
.hot-product .flip::before{
  left:0;
  background: linear-gradient(90deg, rgba(2,8,24,1) 0%, rgba(2,8,24,0) 100%);
}
.hot-product .flip::after{
  right:0;
  background: linear-gradient(270deg, rgba(2,8,24,1) 0%, rgba(2,8,24,0) 100%);
}

.hot-product .flip > .flip-body{
  display:flex; align-items:stretch;
  gap: var(--hp-gap);
  width:100%;
  overflow-x:auto; overflow-y:visible;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px calc(var(--hp-safe) + 6px) 2px; /* 留左右安全区 */
  box-sizing:border-box;
  scroll-padding: 0 calc(var(--hp-safe) + 6px); /* snap 更准 */
  cursor: grab;
}
.hot-product .flip > .flip-body:active{ cursor: grabbing; }

/* 滚动条（保留可访问性状态，同时尽量轻） */
.hot-product .flip > .flip-body::-webkit-scrollbar{ height:8px; }
.hot-product .flip > .flip-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14); border-radius: 8px;
}
@supports (scrollbar-color: auto){
  .hot-product .flip > .flip-body{
    scrollbar-color: rgba(255,255,255,.18) transparent;
    scrollbar-width: thin;
  }
}

/* ================== 卡片（玻璃拟态 + 固定位规范） ================== */
.hot-product .flip > .flip-body > .flip-item{
  scroll-snap-align:center;
  flex: 0 0 var(--hp-card-w);
  max-width: var(--hp-card-w);
  display: grid;                 /* 网格控位：媒体区 + 文本区 */
  grid-template-rows: auto auto; /* 第1行=媒体， 第2行=文本 */
  align-content: stretch;
  border-radius: var(--hp-radius);
  overflow:hidden;
  transition: transform .45s cubic-bezier(.25,.8,.25,1), box-shadow .45s, border-color .45s, background .45s;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(15,25,45,.52);          /* 默认半透明 */
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  box-shadow: 0 8px 24px -14px rgba(0,0,0,.55); /* 更轻的默认阴影 */
  outline: none; /* 交给 :focus-visible */
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  .hot-product .flip > .flip-body > .flip-item{
    background: linear-gradient(180deg, rgba(22,34,58,.78), rgba(10,16,28,.90));
  }
}

/* 键盘可达性 */
.hot-product .flip > .flip-body > .flip-item:focus-visible{
  box-shadow: 0 0 0 3px rgba(64,201,255,.55), 0 16px 40px -18px rgba(0,0,0,.78);
  border-color: rgba(64,201,255,.85);
}

/* 媒体区：统一比例、完整展示、不裁切；按需改变量控制内边距/比例 */
.hot-product .flip > .flip-body > .flip-item img.scale{
  width:100%;
  aspect-ratio: var(--hp-media-ratio, 1 / 1); /* 默认 1:1，可在父层改 4/3 等 */
  object-fit: contain;
  background: radial-gradient(ellipse at center, rgba(64,201,255,.10), rgba(64,201,255,0) 60%);
  padding: var(--hp-media-pad, 18px); /* 略减内边距 */
  box-sizing:border-box;
  filter: drop-shadow(0 0 10px rgba(64,201,255,.45));
  transition: filter .45s ease, transform .45s ease;
  will-change: transform, filter;
}

/* 文本区：三行网格（标题 / 弹性留白 / 价格），价格贴底 */
.hot-product .flip > .flip-body > .flip-item .txt{
  display: grid;
  grid-template-rows: auto 1fr auto; /* 1=标题 2=留白 3=价格 */
  row-gap: 6px;
  padding: 12px 14px 14px; /* 更紧凑 */
  min-height: var(--hp-text-minh, 72px); /* 更紧凑 */
  text-align:center;
}

/* 标题：最多 N 行（默认 2），多余省略，不挤压价格 */
.hot-product .flip > .flip-body > .flip-item .txt .title{
  grid-row: 1;
  color: var(--hp-ink);
  font-size: 1rem; /* 略小 */
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: var(--hp-title-lines, 2);
  -webkit-box-orient: vertical;
  max-height: calc(1.45em * var(--hp-title-lines, 2));
  letter-spacing: .2px;
}

/* 次文案（如需要，可在模板里补充 .sub） */
.hot-product .flip > .flip-body > .flip-item .txt .sub{
  margin-top: 2px;
  color: var(--hp-ink-sub);
  font-size:.93rem;
}

/* 价格：永远贴底；为空则隐藏避免占位 */
.hot-product .flip > .flip-body > .flip-item .txt .price{
  grid-row: 3;
  align-self: end;
  justify-self: center;
  display: inline-block;
  margin-top: 2px;
  font-weight: 600;            /* 略降粗细 */
  font-size: 1.05rem;          /* 略小 */
  color: var(--hp-accent);
  white-space: nowrap;
}
.hot-product .flip > .flip-body > .flip-item .txt .price:empty{ display:none; }

/* 悬停交互（移动端无效） */
.hot-product .flip > .flip-body > .flip-item:hover{
  transform: translateY(-8px); /* 略小的悬停位移 */
  border-color: rgba(64,201,255,.85);
  background: rgba(17,27,48,.62);
  box-shadow: 0 18px 32px -16px rgba(0,0,0,.65);
}
.hot-product .flip > .flip-body > .flip-item:hover img.scale{
  filter: drop-shadow(0 0 12px rgba(138,43,226,.75));
  transform: translateY(-1px) scale(1.01);
}

/* 可选角标（如有）：.tag */
.hot-product .flip > .flip-body > .flip-item .tag{
  position:absolute; left:10px; top:10px; z-index:2;
  background: rgba(64,201,255,.18);
  color:#bfeaff; border:1px solid rgba(64,201,255,.35);
  padding:4px 8px; border-radius:999px; font-size:.78rem; backdrop-filter: blur(6px);
}

/* 箭头按钮（不依赖图片） */
./* 箭头按钮（不依赖图片） */
.hot-product .flip-prev,
.hot-product .flip-next{
  position:absolute; 
  top:50%; 
  transform: translateY(-50%);
  z-index:4; 
  width:48px; 
  height:48px; 
  border-radius:999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.hot-product .flip-prev{ left: max(var(--hp-safe), 14px); }
.hot-product .flip-next{ right: max(var(--hp-safe), 14px); }

/* 箭头符号 */
.hot-product .flip-prev::before,
.hot-product .flip-next::before{
  content:""; 
  position:absolute; 
  inset:0; 
  margin:auto; 
  width:14px; 
  height:14px;
  border: 2px solid #e6f7ff;
  border-top: 0; 
  border-right: 0;
}

/* 左箭头 */
.hot-product .flip-prev::before{ 
  transform: rotate(45deg);   /* ← 左 */
}

/* 右箭头 */
.hot-product .flip-next::before{ 
  transform: rotate(225deg);  /* → 右 */
}

/* hover/active 状态 */
.hot-product .flip-prev:hover,
.hot-product .flip-next:hover{
  background: rgba(255,255,255,.16);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.hot-product .flip-prev:active,
.hot-product .flip-next:active{ 
  transform: translateY(-50%) scale(.98); 
}

/* JS 会加的状态类（禁用/隐藏） */
.hot-product .flip-prev.is-disabled,
.hot-product .flip-next.is-disabled{ 
  opacity:.35; 
  pointer-events:none; 
}
.hot-product .flip-prev.is-hidden,
.hot-product .flip-next.is-hidden{ 
  display:none; 
}

/* 触控尺寸优化 */
@media (pointer: coarse){
  .hot-product .flip-prev,
  .hot-product .flip-next{ 
    width:54px; 
    height:54px; 
  }
}
/* ============ 响应式 / 容器查询 ============ */
/* 容器较宽时，卡片更宽；较窄时更紧凑，提升可见项数 */
@container (min-width: 1200px){
  .hot-product{ height:auto; padding: 36px 0 44px; }
  .hot-product{ --hp-card-w: 380px; }
}
@container (max-width: 1199px){
  .hot-product{ height:auto; padding: 32px 0 40px; }
  .hot-product{ --hp-card-w: min(360px, 82vw); }
}
@container (max-width: 880px){
  .hot-product{ --hp-card-w: min(320px, 82vw); }
}
@container (max-width: 520px){
  .hot-product{ --hp-gap: 14px; }
  .hot-product{ --hp-card-w: min(280px, 88vw); }
  .hot-product .flip > .flip-body{
    padding-left: calc(var(--hp-safe) + 6px);
    padding-right: calc(var(--hp-safe) + 6px);
  }
  .hot-product .flip > .flip-body > .flip-item .txt{
    min-height: 70px;
    padding: 10px 12px 12px;
  }
  .hot-product .flip-prev, .hot-product .flip-next{
    top: auto; bottom: 48%; transform: translateY(0);
  }
}

/* 如果你的站点不支持 container queries，仍可回退到传统断点 */
@media (max-width: 1200px){
  .hot-product{ height:auto; padding: 32px 0 40px; }
}
@media (max-width: 992px){
  .hot-product .flip-prev, .hot-product .flip-next{
    inset:auto var(--hp-safe) 48% auto;
  }
}

/* ============ 降低动画（系统偏好） ============ */
@media (prefers-reduced-motion: reduce){
  .hot-product .flip > .flip-body > .flip-item,
  .hot-product .flip > .flip-body > .flip-item img.scale,
  .hot-product .flip-prev, .hot-product .flip-next{ transition: none; }
}

/* ============ 高对比度模式（Win/Edge 可读性） ============ */
@media (forced-colors: active){
  .hot-product .flip-prev, .hot-product .flip-next{
    border: 1px solid CanvasText;
    background: Canvas;
  }
  .hot-product .flip-prev::before, .hot-product .flip-next::before{
    border-color: CanvasText;
  }
}
@media (max-width: 768px), (pointer: coarse) {
  .hot-product .flip-prev,
  .hot-product .flip-next {
    display: none !important;
  }
}
/* —— 桌面端：给卡片上移留出更足的缓冲 —— */
@media (pointer: fine) and (min-width: 992px){
  /* 上移量用变量统一管理；桌面端稍大一些 */
  .hot-product { --hp-hover-lift: 12px; }

  /* 1) 标题与滑轨之间再留出一段安全间距，避免卡片顶边贴标题被裁 */
  .hot-product .index-title{
    margin-bottom: calc(var(--hp-gap) + var(--hp-hover-lift) + 10px);
  }

  /* 2) 滑动容器自身上下各加一圈“可上移空间” */
  .hot-product .flip{
    padding-top:  calc(var(--hp-hover-lift) + 12px);
    padding-bottom: calc(var(--hp-hover-lift) + 12px);
    /* 确保不是容器自己在裁切 */
    overflow: visible;
  }

  /* 3) 轨道也保证不裁切，并把原本的上下 padding 合并上移缓冲 */
  .hot-product .flip > .flip-body{
    overflow-y: visible;
    padding-top:  calc(6px + var(--hp-hover-lift));
    padding-bottom: calc(2px + var(--hp-hover-lift));
  }

  /* 4) 万一上层容器有裁切（某些主题会给 .w-container 设置 overflow:hidden） */
  .hot-product .w-container{ overflow: visible; }

  /* 5) 左右渐隐遮罩避免“吃到”卡片圆角：向下收一点高度 */
  .hot-product .flip::before,
  .hot-product .flip::after{
    top: calc(0px + var(--hp-hover-lift) * 0.4);   /* 收掉上边一丢丢 */
    bottom: calc(0px + var(--hp-hover-lift) * 0.2); /* 下边也对齐一点 */
  }
}

/* 悬停/聚焦位移依然由变量控制（保持一致） */
.hot-product .flip > .flip-body > .flip-item:hover{
  transform: translateY(calc(-1 * var(--hp-hover-lift)));
}
.hot-product .flip > .flip-body > .flip-item:focus-visible{
  transform: translateY(calc(-1 * var(--hp-hover-lift)));
  outline-offset: 2px;
}
/* === 升级后的样式代码 结束 === */
.flip-item {
  /* ...保留您原有的样式... */
  opacity: 0.5;
  transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 当卡片进入可视区域时，变得完全不透明、恢复原大小，并增加辉光 */
.flip-item.is-visible {
  opacity: 1;
  transform: scale(1);
  /* 可以和 :hover 效果结合或独立设置 */
  box-shadow:
    0 0 20px var(--shadow-color),
    0 0 40px var(--shadow-color);
}

/* 当用户正在拖拽时，给滚动区域一个不同的光标 */
.flip-body.is-dragging {
  cursor: grabbing;
  user-select: none; /* 防止拖拽时选中文字 */
}

/* 默认可拖拽光标 */
.flip-body {
  cursor: grab;
}

/* ===== 8) 资讯卡片（new-list & news-list） ===== */
.mini-w90{ max-width:90%; margin:0 auto; }

.new-list{ margin-top: -40px !important; } /* 兼容旧版布局 */
.new-list .item img{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius: var(--ey-radius-md); border:1px solid var(--ey-border);
}
.new-list .item .title{
  width:100%; padding: var(--ey-s-5) 0; display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-weight:600; color:var(--ey-ink);
}
.new-list .item .info{
  font-size: var(--ey-fs-xs); color: var(--ey-subtle);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.new-list .item .more{
  display:inline-block; margin-top: var(--ey-s-5);
  font-size: var(--ey-fs-xs); cursor:pointer; color: var(--ey-brand);
}

.news-list .item{ margin-bottom: var(--ey-s-10); display:flex; gap: var(--ey-s-4); }
.news-list .item:last-child{ margin-bottom:0; }
.news-list .item .img{ flex:0 0 42%; }
.news-list .item .img img{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius: var(--ey-radius-md);
}
.news-list .item .txt{ flex:1; min-width:0; }
.news-list .item .txt .title{ font-size: var(--ey-fs-xl); font-weight: var(--ey-font-weight-bold); line-height: var(--ey-line-height-tight); }
.news-list .item .txt .desc{
  margin-top: var(--ey-s-3); font-size: var(--ey-fs-sm); color: var(--ey-subtle); line-height:1.8;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.news-list .item .txt .time{ margin-top: var(--ey-s-3); font-size: var(--ey-fs-sm); color: var(--ey-subtle); }

@media (max-width: 992px){
  .new-list .item img, .news-list .item .img img{ aspect-ratio:auto; }
  .news-list .item{ display:block; }
  .news-list .item .img{ margin-bottom: var(--ey-s-3); }
}
/* ===== 9) 分页 ===== */
.page{ width:100%; text-align:center; padding-top: var(--ey-s-8); }
.pageList{ overflow:hidden; }
.pageList ul{ padding:0; margin:0; list-style:none; }
.pageList ul li{ line-height:30px; display:inline-block; margin:0 2px; font-size:0; }
.pageList ul li a{
  background: var(--ey-bg-alt); color: var(--ey-muted);
  padding: var(--ey-s-1) var(--ey-s-3); border:1px solid var(--ey-border);
  font-size: var(--ey-fs-md); border-radius: var(--ey-radius-sm);
  transition: background var(--ey-transition-base), color var(--ey-transition-base), border-color var(--ey-transition-base);
}
.pageList ul li a.selected,
.pageList ul li a:hover{
  background: var(--ey-ink); border-color: var(--ey-ink); color: var(--ey-bg);
}
.pageList ul li a.disable{
  color: var(--ey-subtle); pointer-events:none; background:#fdfdfd;
}

/* ===== 10) 面包屑/横幅 ===== */
.site-nav{ font-size: var(--ey-fs-sm); padding: var(--ey-s-4) var(--ey-s-3); color: var(--ey-subtle); }
.site-nav a{ color: var(--ey-subtle); }

.header-banner{
  text-align:center; width:100%; height:250px;
  background:#555 center/cover no-repeat;
}
.header-banner .banner-txt{
  display:inline-block; padding: var(--ey-s-3) 0; color:#fff; font-size: var(--ey-fs-2xl);
  border-bottom:2px solid #fff; margin-top:80px;
}
@media (max-width: 992px){ .header-banner{ display:none; } }

/* ===== 11) 文章详情 ===== */
.detail-main{
  padding: var(--ey-s-8); background: var(--ey-surface);
  border:1px solid var(--ey-border); border-radius: var(--ey-radius-md);
}
.detail-main .title{
  font-size: var(--ey-fs-2xl); font-weight:800; margin-bottom: var(--ey-s-4); line-height:1.25;
}
.detail-main .article-info{ font-size: var(--ey-fs-sm); color: var(--ey-subtle); }
.detail-main .article-info span{ margin-right: var(--ey-s-3); }
.detail-main .article-con{ margin-top: var(--ey-s-5); }
.detail-main .article-con img{ max-width:100%; border-radius: var(--ey-radius-sm); }
.detail-main .article-paeg{
  margin-top: var(--ey-s-8); display:flex; justify-content:space-between; gap: var(--ey-s-4);
}
.detail-main .article-paeg a{ color: var(--ey-muted); }

.detail-right{ padding: var(--ey-s-4); }
.detail-right .title{ width:100%; border-bottom:1px solid var(--ey-border); }
.detail-right .title span{
  display:inline-block; font-size: var(--ey-fs-lg); font-weight: var(--ey-font-weight-bold);
  padding:0 var(--ey-s-3) var(--ey-s-3);
}
.detail-right .hot-list .item{ display:flex; margin-top: var(--ey-s-5); gap: var(--ey-s-3); }
.detail-right .hot-list .item .item-l{ width:100px; height:60px; flex-shrink:0; }
.detail-right .hot-list .item .item-l img{ width:100%; height:100%; object-fit:cover; border-radius: var(--ey-radius-sm); }
.detail-right .hot-list .item .item-r{ flex:1; min-width:0; }
.detail-right .hot-list .item .item-r .tit{
  font-size: var(--ey-fs-sm); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.detail-right .hot-list .item .item-r .tit a{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.detail-right .hot-list .item .item-r .num{ font-size: var(--ey-fs-xs); color: var(--ey-subtle); }

/* 右侧热门产品 */
.detail-right .prohot-list{ margin-top: var(--ey-s-5); }
.detail-right .prohot-list .item{ margin-bottom: var(--ey-s-3); }
.detail-right .prohot-list .item .img{
  width:100%; height:auto; overflow:hidden; border-radius: var(--ey-radius-sm);
  border:1px solid var(--ey-border);
}
.detail-right .prohot-list .item .img img{ width:100%; height:100%; object-fit:cover; }
.detail-right .prohot-list .item .txt{ margin-top: var(--ey-s-2); }
.detail-right .prohot-list .item .txt .tit a{
  width:100%; text-align:center; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-size: var(--ey-fs-sm); color: var(--ey-muted);
}
.detail-right .prohot-list .item .txt .price{
  width:100%; display:block; font-size: var(--ey-fs-md); text-align:center; line-height:1; color: var(--ey-subtle);
}

/* PC 细节 */
@media (min-width: 1024px){
  .pc-bor{ border:1px solid var(--ey-border); border-radius: var(--ey-radius-md); }
  .news-detail .news-detail-l{ padding-left:0 !important; padding-right:0 !important; }
  .news-detail .news-detail-r{ padding-right:0 !important; }
  .detail-main .article-paeg div:nth-child(2){ text-align:right; }
}
/* ===== 13) 页脚 ===== */
.footer{ margin-top: var(--ey-s-8); }
.footer .footer-t{
  background: var(--ey-ink-2); color:#8b8b8b; padding: var(--ey-s-10) var(--ey-s-3);
}
.footer .footer-t .footer-t-l span{ display:block; font-size: var(--ey-fs-sm); }
.footer .footer-t .footer-t-l .title{
  margin-bottom: var(--ey-s-3); font-size: var(--ey-fs-md);
  display:flex; align-items:center; gap: var(--ey-s-3);
}
.footer .footer-t .title img{ margin-right:0; }
.footer-t-l .title img{
  height:35px; width:auto; display:inline-block; filter:brightness(0) invert(1);
}
.footer .footer-t .footer-t-r{ margin-top: var(--ey-s-3); text-align:right; }
.footer .footer-t .footer-t-r div{
  display:inline-block; width:85px; font-size: var(--ey-fs-sm); color:#8b8b8b; text-align:center; margin-left: var(--ey-s-5);
}
.footer .footer-t .footer-t-r div img{ width:85px; height:85px; }
.footer .footer-t .footer-t-r div span{ width:100%; display:block; margin-top: var(--ey-s-2); }
.footer .footer-b{
  background:#252525; padding: var(--ey-s-4) 0; text-align:center; font-size: var(--ey-fs-sm); color:#777;
}
.footer .footer-b p a{ color:#777; }
@layer fadock {
  :root{
    /* 单色主题（黑字+白底） */
    --fd-bg:#ffffff;
    --fd-ink:#0b0d0f;
    --fd-muted:#646a73;
    --fd-border:#e5e7eb;
    --fd-shadow:0 8px 24px rgba(0,0,0,.10);
    --fd-shadow-hover:0 12px 32px rgba(0,0,0,.14);

    /* 尺寸 */
    --fd-radius:16px;
    --fd-gap:12px;
    --fd-size:64px;
    --fd-icon:28px;
    --fd-z:2147483600;
  }

  /* 根：最大隔离，防串改；根不拦截点击，内部再开启 */
  [data-fadock]{
    all: initial;
    position: fixed !important;
    top: 50% !important; right: 20px !important;
    transform: translateY(-50%) !important;
    z-index: var(--fd-z) !important;
    pointer-events: none !important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",Arial,sans-serif;
    color:var(--fd-ink);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }
  [data-fadock], [data-fadock] *{ box-sizing:border-box; }

  /* 左侧停靠可选：给根加 data-side="left" 即可 */
  [data-fadock][data-side="left"]{ left:20px !important; right:auto !important; }

  /* 内层容器可交互 */
  [data-fadock] .fdock{ pointer-events:auto; display:flex; flex-direction:column; align-items:center; gap:8px; }

  /* 列表：白色卡片容器（桌面竖排） */
  [data-fadock] .fdock-list{
    display:flex; flex-direction:column;
    background:var(--fd-bg);
    border:1px solid var(--fd-border);
    border-radius:var(--fd-radius);
    box-shadow:var(--fd-shadow);
    overflow:hidden;
    transition: box-shadow .2s ease;
  }
  [data-fadock] .fdock-list:hover{ box-shadow:var(--fd-shadow-hover); }

  /* 通用按钮（卡片子项） */
  [data-fadock] .fdock-btn,
  [data-fadock] .fdock-toggle{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:var(--fd-size); min-height:var(--fd-size);
    padding:10px 8px; gap:6px; cursor:pointer; user-select:none;
    text-decoration:none; outline:0; -webkit-tap-highlight-color:transparent;
    color:var(--fd-ink); background:transparent; border:none;
    transition: background-color .2s ease, opacity .25s ease;
    position:relative;
  }
  [data-fadock] .fdock-btn:hover,
  [data-fadock] .fdock-toggle:hover{ background-color:rgba(0,0,0,.045); }

  /* 列表项分隔线（第一项不画） */
  [data-fadock] .fdock-btn:not(:first-child){ border-top:1px solid var(--fd-border); }

  /* 主按钮也保持白底（与普通一致，仅微调边框更实一些） */
  [data-fadock] .fdock-btn.is-primary{ border-top:1px solid #d7dbe1; }

  /* 图标统一限制与居中 */
  [data-fadock] .fdock-ico{ width:var(--fd-icon); height:var(--fd-icon); display:flex; align-items:center; justify-content:center; }
  [data-fadock] .fdock-ico img, [data-fadock] .fdock-ico svg{ width:100%; height:100%; object-fit:contain; display:block; filter:none; }
  [data-fadock] .fdock-lab{ font-size:12px; line-height:1.1; white-space:nowrap; color:currentColor; font-weight:500; }

  /* 开关（放在列表外，圆形） */
  [data-fadock] .fdock-toggle{
    width:48px; height:48px; border-radius:50%;
    border:1px solid var(--fd-border); background:var(--fd-bg);
    box-shadow:var(--fd-shadow);
  }
  [data-fadock] .fdock-toggle svg{ width:22px; height:22px; display:block; }
  [data-fadock] .fdock-toggle .icon-open{ display:block; }
  [data-fadock] .fdock-toggle .icon-close{ display:none; }
  [data-fadock] .fdock-toggle[aria-expanded="true"] .icon-open{ display:none; }
  [data-fadock] .fdock-toggle[aria-expanded="true"] .icon-close{ display:block; }
  [data-fadock] .fdock-toggle {
  background-color: #ffffff !important; /* 固定白底 */
  border: 1px solid var(--fd-border);   /* 边框颜色 */
  box-shadow: var(--fd-shadow);         /* 阴影保持 */
  border-radius: 50%;                   /* 保证正圆 */
}
  /* 折叠：仅隐藏列表，保留开关；并强制关闭任何弹层 */
  [data-fadock].is-collapsed .fdock-list{ display:none !important; }
  [data-fadock].is-collapsed .fdock-pop{ display:none !important; }

  /* 微信弹层（白卡片 + 箭头） */
  [data-fadock] .fdock-pop{
    position:absolute; right: calc(100% + var(--fd-gap)); top:50%; transform:translateY(-50%);
    background:var(--fd-bg); color:var(--fd-ink);
    border:1px solid var(--fd-border); border-radius:var(--fd-radius); box-shadow:var(--fd-shadow);
    padding:16px; width:230px; text-align:center; display:none;
  }
  [data-fadock] .fdock-pop.is-open{ display:block; }
  [data-fadock] .fdock-pop::after{
    content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%);
    border-left:8px solid var(--fd-bg); border-top:8px solid transparent; border-bottom:8px solid transparent;
    filter: drop-shadow(1px 0 0 var(--fd-border));
  }
  [data-fadock] .fdock-pop .title{ font-weight:700; margin-bottom:10px; font-size:15px; }
  [data-fadock] .fdock-pop img{ width:100%; aspect-ratio:1/1; object-fit:contain; display:block; margin:0 auto 10px; image-rendering:pixelated; border-radius:8px; }
  [data-fadock] .fdock-pop small{ color:var(--fd-muted); font-size:12px; }

  /* 返回顶部显隐 */
  [data-fadock] #fadockTop{ opacity:0; pointer-events:none; transition:opacity .2s ease; }
  [data-fadock] #fadockTop.is-visible{ opacity:1; pointer-events:auto; }

  /* 移动端底栏 */
  @media (max-width: 992px){
    [data-fadock]{
      left:12px !important; right:12px !important;
      bottom:max(12px, env(safe-area-inset-bottom)) !important;
      top:auto !important; transform:none !important;
    }
    [data-fadock] .fdock{ align-items:stretch; gap:8px; }
    /* 列数可配置：data-grid="3|4"，默认4 */
    [data-fadock] .fdock-list{
      display:grid; grid-template-columns:repeat(var(--fd-grid,4), 1fr);
      gap:10px; padding:8px; width:100%; border-radius:18px;
    }
    [data-fadock][data-grid="3"] .fdock-list{ --fd-grid:3; }
    [data-fadock][data-grid="4"] .fdock-list{ --fd-grid:4; }

    [data-fadock] .fdock-btn,
    [data-fadock] .fdock-toggle{ width:auto; }
    [data-fadock] .fdock-btn{
      min-height:58px; padding:8px 6px; gap:6px; border-radius:14px; background:var(--fd-bg);
      border:1px solid var(--fd-border);
    }
    [data-fadock] .fdock-btn:not(:first-child){ border-top:none; } /* 网格不需要分隔线 */

    [data-fadock] .fdock-ico{ width:22px; height:22px; }

    /* 弹层顶置居中 */
    [data-fadock] .fdock-pop{
      right:auto; left:50%; transform:translate(-50%, 0);
      top:auto; bottom: calc(100% + var(--fd-gap));
      margin:0; width:min(70vw, 320px);
    }
    [data-fadock] .fdock-pop::after{
      left:50%; top:100%; transform:translateX(-50%);
      border:none; border-top:8px solid var(--fd-bg);
      border-left:8px solid transparent; border-right:8px solid transparent;
      filter: drop-shadow(0 1px 0 var(--fd-border));
    }
  }

  @media (prefers-reduced-motion: reduce){
    [data-fadock] *{ transition:none !important; }
  }
}
/* === Fix: Toggle 尺寸锁定 + 容器限制（防扭曲） === */
@layer fadock {
  :root{ --fd-toggle: 48px; } /* 开关统一尺寸，可按需改 */

  /* 桌面/通用：强制正圆 & 不可被 flex 拉伸 */
  [data-fadock] .fdock-toggle{
    width:var(--fd-toggle); height:var(--fd-toggle);
    min-width:var(--fd-toggle); min-height:var(--fd-toggle);
    max-width:var(--fd-toggle); max-height:var(--fd-toggle);
    flex:0 0 var(--fd-toggle);
    aspect-ratio:1 / 1;           /* 保证正圆 */
    border-radius:999px;
    overflow:hidden;               /* 容器裁切，限制内部范围 */
    line-height:normal !important; /* 防全站 button 行高影响 */
    font-size:0 !important;        /* 防字号撑开 */
  }

  /* 移动端：只让功能按钮自适应宽度，开关保持定宽定高 */
  @media (max-width: 992px){
    /* 请注意：有旧规则 ".fdock-btn, .fdock-toggle { width:auto; }"
       这会让开关拉伸，这里覆盖掉 */
    [data-fadock] .fdock-btn{ width:auto; }
    [data-fadock] .fdock-toggle{
      width:var(--fd-toggle) !important;
      height:var(--fd-toggle) !important;
      min-width:var(--fd-toggle) !important;
      min-height:var(--fd-toggle) !important;
      max-width:var(--fd-toggle) !important;
      max-height:var(--fd-toggle) !important;
      flex:0 0 var(--fd-toggle) !important;
      align-self:center;           /* 居中，不随容器拉伸 */
    }
  }
}
/* 移动端页脚 */
@media (max-width: 992px){
  .footer .footer-t{ padding: var(--ey-s-5) var(--ey-s-3) var(--ey-s-3); }
  .footer .footer-t .footer-t-r{ text-align:center; }
}
/* 遮罩（点击可关闭） */
.wxpop-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.25);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
  z-index: 9998;
}
.wxpop-overlay.is-open{ opacity: 1; visibility: visible; }

/* 弹层卡片（固定定位，按按钮位置放置） */
.wxpop{
  position: fixed; z-index: 9999;
  width: 240px; max-width: 92vw;
  background: #fff; border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18);
  padding: 14px;
  opacity: 0; transform: translateY(6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
.wxpop.is-open{ opacity: 1; transform: none; }

/* 内容样式 */
.wxpop .title{ font-size:14px; font-weight:600; margin-bottom:10px; color:#111; }
.wxpop .qr{ display:block; width:100%; height:auto; border-radius:8px; border:1px solid rgba(0,0,0,.06); }
.wxrow{ display:flex; align-items:center; gap:6px; margin-top:10px; font-size:12px; color:#444; }
.wxrow .label{ color:#666; }
.wxrow .id{ font-weight:700; color:#111; }
.wxcopy{
  margin-left:auto; font-size:12px; line-height:1; padding:6px 8px;
  border-radius:6px; border:1px solid rgba(0,0,0,.12); background:#f8f8f8; cursor:pointer;
}
.wxcopy:hover{ background:#f1f1f1; }
.wxcopy:active{ transform: translateY(1px); }

/* —— 手机端：做成底部抽屉，更不易被挡 —— */
@media (max-width: 768px){
  .wxpop{
    left: 50% !important; right: auto !important;
    bottom: max(16px, env(safe-area-inset-bottom)); top: auto !important;
    transform: translateX(-50%);
    width: min(360px, 92vw);
  }
  .wxpop::after{ display:none; }
}
/* 覆盖层与卡片的层级更高一点，避免被右侧浮标盖住 */
.wxpop-overlay{ z-index: 99998; }
.wxpop{ z-index: 99999; }

/* —— 移动端：做成底部抽屉（sheet） —— */
@media (max-width: 768px){
  /* 用自定义变量组合安全区与按钮到屏幕底部的间距 */
  .wxpop{
    /* 由 JS 动态设置 --wx-gap；默认为 16px */
    --wx-safe: env(safe-area-inset-bottom, 0px);
    --wx-gap: 16px;

    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(100%); /* 初始在视口下方 */
    bottom: calc(var(--wx-safe) + var(--wx-gap));
    top: auto !important;

    width: min(420px, 96vw);
    max-height: min(78vh, 560px);   /* 内容多时可滚动 */
    overflow: hidden;                /* 包住圆角 */
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0,0,0,.24);
    padding: 14px 14px 12px;
  }
  .wxpop.is-open{
    transform: translateX(-50%) translateY(0);   /* 上滑进入 */
    transition: transform .22s cubic-bezier(.22,.75,.18,1),
                opacity .18s ease;
  }
  .wxpop::after{ display:none; }  /* 抽屉样式不需要箭头 */

  /* 抽屉内部允许滚动（二维码很大时） */
  .wxpop .scroll-area{
    max-height: calc(78vh - 60px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* 层级拉高，且桌面端遮罩不拦截点击；移动端仍可点遮罩关闭 */
.wxpop-overlay{ z-index: 99998; pointer-events: none; }
@media (max-width: 768px){
  .wxpop-overlay{ pointer-events: auto; } /* 手机端允许点击遮罩 */
}
.wxpop{ z-index: 99999; }

/* —— 移动端：底部抽屉 —— */
@media (max-width: 768px){
  .wxpop{
    --wx-safe: env(safe-area-inset-bottom, 0px);
    --wx-gap: 16px; /* 将由 JS 动态改写，= fadock-root 高度 + 12 */
    left: 50% !important; right: auto !important; top: auto !important;
    bottom: calc(var(--wx-safe) + var(--wx-gap));
    transform: translateX(-50%) translateY(100%);
    width: min(420px, 96vw); max-height: min(78vh, 560px);
    overflow: hidden; border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0,0,0,.24);
  }
  .wxpop.is-open{
    transform: translateX(-50%) translateY(0);
    transition: transform .22s cubic-bezier(.22,.75,.18,1), opacity .18s ease;
  }
  .wxpop::after{ display:none; }
  .wxpop .scroll-area{ max-height: calc(78vh - 60px); overflow:auto; -webkit-overflow-scrolling:touch; }
}

/* ===== 14) 弹窗（登录/注册） ===== */
.dialog{
  border-radius: var(--ey-radius-lg); border:0; margin:0 auto; box-shadow: var(--ey-shadow-lg); background: var(--ey-surface);
}
.dialog .dialog-head{
  font-size: var(--ey-fs-lg); border-bottom:0; background: var(--ey-surface); color: var(--ey-ink-2);
}
.dialog .dialog-head .close{ float:right; line-height:24px; }
.dialog .dialog-body{
  padding: var(--ey-s-3) var(--ey-s-10) var(--ey-s-10); position:relative;
}
.dialog .dialog-body .icon-close{
  position:absolute; right:1rem; top:1rem; color: var(--ey-ink); font-size:2rem; cursor:pointer;
}
.dialog-body h3{
  font-size: var(--ey-fs-2xl); font-weight: var(--ey-font-weight-bold); color: var(--ey-ink-2); margin-bottom: var(--ey-s-3);
}
.dialog-body .form-group{ padding-bottom: var(--ey-s-5); }
.dialog-body .input,
.dialog-body .textarea,
.dialog-body select{
  height:48px; line-height:24px; padding:0 var(--ey-s-3);
  border:1px solid var(--ey-border); width:100%; display:block; border-radius: var(--ey-radius-sm); background:#fff;
  transition: border-color var(--ey-transition-base), box-shadow var(--ey-transition-base);
}
.dialog-body .input:focus,
.dialog-body .textarea:focus,
.dialog-body select:focus{
  outline:none; border-color: var(--ey-brand); box-shadow:0 0 0 2px rgba(230,31,77,.2);
}
.dialog-body .textarea{ padding: var(--ey-s-3); height:auto; }
.dialog-body .label{ padding-bottom: var(--ey-s-3); display:block; line-height:24px; }
.dialog-body select{
  padding-right:30px; color: var(--ey-ink-2); appearance:none; -moz-appearance:none; -webkit-appearance:none;
  background:url(../images/select-down.png) no-repeat right 50%;
}

/* 注册登录切换/第三方按钮 */
.register .tab{ font-size:0; }
.register .tab li{
  cursor:pointer; display:inline-block; position:relative; font-size:20px; width:60px;
  color: var(--ey-muted); margin:0 0 var(--ey-s-10) 0;
}
.register .tab li::before{
  background: var(--ey-border); content:''; position:absolute; bottom:-10px; left:0; width:100%; height:3px; border-radius:3px; transition:transform .3s;
}
.register .tab li.cur{ color: var(--ey-brand); }
.register .tab li.cur::before{ background: var(--ey-brand); }

.register .line{ margin:0; padding:0; position:relative; text-align:center; }
.register .line span{
  display:inline-block; font-size: var(--ey-fs-sm); padding:0 var(--ey-s-5); position:relative; z-index:1; background: var(--ey-bg-alt) !important;
}
.register .line hr{
  background: var(--ey-border); height:1px; border:0; margin: var(--ey-s-3) 0; position:absolute; top:0; left:0; width:100%;
}

.register .bnt-login{ margin:0 auto; text-align:center; }
.register .bnt-login span{
  display:inline-block; color:#fff; font-size:22px; width:48px; height:48px; line-height:48px;
  margin-right: var(--ey-s-3); border-radius:50%; transition:opacity var(--ey-transition-base);
}
.register .bnt-login span:hover{ opacity:.9; cursor:pointer; }
.register .bnt-login span.weixin{ background:#38B624; }
.register .bnt-login span.qq{ background:#1F92DF; }
.register .bnt-login span.weibo{ background:#FF6000; }

.button.bg-yellow{ color:#fff !important; background: var(--ey-success); }
.button.bg-yellow:hover{ color:#fff !important; border-color: var(--ey-success) !important; background: var(--ey-success) !important; }

/* 登录状态下用户菜单 */
.log-in{ position:absolute; top:29px; right:5px; }
.log-in .button-group .button{ padding:0; line-height:18px; font-size:20px; }
.log-in a.user-ico{ width:32px; height:32px; line-height:32px; background:#ECEFF5; display:block; border-radius:50%; }
.log-in a.user-head{ width:32px; height:32px; overflow:hidden; display:block; border-radius:50%; }
.log-in a.user-head img{ width:32px; height:32px; object-fit:cover; }
.log-in .drop-menu{
  margin:12px 0 0; min-width:140px; border-radius: var(--ey-radius-md); box-shadow: var(--ey-shadow-md);
  padding: var(--ey-s-3) 0; left:-40px; border:1px solid var(--ey-border); background: var(--ey-surface);
}
.log-in .drop-menu li{ padding:0 var(--ey-s-3); height:38px; text-align:left; display:flex; align-items:center; }
.log-in .drop-menu li a{
  height:38px; line-height:38px; display:block; width:100%; border-radius: var(--ey-radius-sm); padding:0 var(--ey-s-2);
  transition: background-color var(--ey-transition-base);
}
.log-in .drop-menu li a:hover{ background: var(--ey-bg-alt); }
/* 顶尖角 */
.log-in .button-group ul::before,
.log-in .button-group ul::after{
  content:''; position:absolute; top:-8px; left:50px; display:inline-block; border-left:8px solid transparent; border-right:8px solid transparent;
}
.log-in .button-group ul::before{ border-bottom:8px solid #fff; filter: drop-shadow(0 -1px 0 var(--ey-border)); }
.log-in .button-group ul::after{ border-bottom:8px solid transparent; }

/* ===== 15) PC & 宽屏优化 ===== */
@media (min-width: 1280px){
  .w-container{ max-width: var(--ey-container); }
  .index-title{ margin:70px auto; }
  .products-list .item .title a{
    display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .pro-imgbox .tb-s310,
  .pro-imgbox .tb-s310 a,
  .pro-imgbox .tb-s310 img{ height:400px; width:400px; }
  .detail-right .prohot-list .item .img{ height:152px; }
  .product-content{ padding: var(--ey-s-5); }
  .list-title{ display:none; }
}

/* ===== 16) 降低动效（无障碍） ===== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation:none !important; transition:none !important; scroll-behavior:auto !important;
  }
}
/* ===== 设计变量（合并并补齐缺失项）===== */
:root{
  /* c- 系列 */
  --c-brand:#e61f4d;
  --c-brand-600:#c9153b;
  --c-text:#1a1a1a; --c-sub:#666; --c-muted:#8a8a8a;
  --c-border:#ececec; --c-bg:#fafafa; --c-white:#fff;

  --radius-xs:8px; --radius:14px; --radius-lg:18px;
  --shadow-sm:0 2px 10px rgba(0,0,0,.05);
  --shadow:0 6px 18px rgba(0,0,0,.06);
  --ring:0 0 0 3px color-mix(in srgb, var(--c-brand) 20%, transparent);

  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-22:22px;

  --space-4:4px; --space-6:6px; --space-8:8px; --space-10:10px;
  --space-12:12px; --space-14:14px; --space-16:16px;
  --space-20:20px; --space-22:22px; --space-24:24px;
  --space-28:28px; --space-32:32px;

  --ease:cubic-bezier(.22,.61,.36,1); --dur-1:120ms; --dur-2:200ms;

  /* ey- 系列（原分散的 :root 合并进来，未改名） */
  --ey-color-primary-text:#333;
  --ey-color-secondary-text:#666;
  --ey-color-light-text:#888;
  --ey-color-link:#007bff;
  --ey-color-link-hover:#0056b3;
  --ey-color-card-bg:#ffffff;
  --ey-color-page-bg:#f7f8fa;
  --ey-color-border:#eeeeee;
  --ey-color-title-border:#de2d4e;

  --ey-space-sm:8px;
  --ey-space-md:12px;
  --ey-space-lg:16px;
  --ey-space-xl:20px;
  --ey-space-xxl:30px;

  --ey-border-radius-sm:6px;
  --ey-border-radius-md:10px;

  --ey-shadow-card:0 4px 16px rgba(0,0,0,0.07);
  --ey-transition-base:all .3s cubic-bezier(.25,.8,.25,1);
}

/* ===== 基础 ===== */
*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent}
body{
  margin:0;color:var(--c-text);background:var(--c-white);
  font:var(--fs-14)/1.6,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,.eyshop-actions a:focus-visible{
  outline:0;box-shadow:var(--ring);border-radius:999px
}
img{max-width:100%;display:block;image-rendering:-webkit-optimize-contrast}
.w{width:min(1200px,94%);margin:0 auto}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition:none!important;scroll-behavior:auto!important}
}

/* ===== 顶部容器：相册 + 信息同卡片 ===== */
.eyshop-pro{padding:var(--space-22) 0 var(--space-32)}
.eyshop-pro .grid{
  display:grid;grid-template-columns:520px 1fr;gap:24px;align-items:start;
  background:var(--c-white);border:1px solid var(--c-border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-14);
}
@media (max-width:1024px){
  .eyshop-pro .grid{grid-template-columns:1fr;gap:16px;padding:var(--space-12)}
}

/* ===== 相册区域 ===== */
.eyshop-pro .eyshop-gallery{position:relative}
.eyshop-pro .eyshop-gallery-main{
  position:relative;border:1px solid var(--c-border);border-radius:var(--radius);
  overflow:hidden;aspect-ratio:1/1;background:var(--c-white);
}
/* 移除 ::before 占位，已用 aspect-ratio 保证比例 */

.eyshop-pro .eyshop-gallery-main > a,
.eyshop-pro .eyshop-gallery-main > img{position:absolute;inset:0}
.eyshop-pro .eyshop-gallery-main img{width:100%;height:100%;object-fit:contain}

/* 收藏按钮左上 */
.eyshop-pro .ey-favshare{position:absolute;left:12px;top:12px;z-index:5}
.eyshop-pro .ey-fav{
  display:inline-flex;align-items:center;gap:6px;padding:8px 12px;
  background:#fff;border:1px solid var(--c-border);border-radius:999px;
  box-shadow:var(--shadow-sm);color:#333;font-size:14px;
}
.eyshop-pro .ey-fav:hover{border-color:var(--c-brand);box-shadow:var(--ring)}

.eyshop-pro .zoomPup,
.eyshop-pro .zoomWindow,
.eyshop-pro .zoomWrapper{z-index:4!important}

/* 缩略图：PC 横排 / M 横滑 */
.eyshop-pro .eyshop-thumbs{margin-top:var(--space-12);overflow-x:auto;-webkit-overflow-scrolling:touch}
.eyshop-pro .thumbnail-swiper{width:100%}
.eyshop-pro .thumbnail-swiper .swiper-wrapper{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:8px}
.eyshop-pro .thumbnail-swiper .swiper-slide{flex:0 0 auto}
.eyshop-pro .thumbnail-swiper .swiper-slide a{
  display:block;width:78px;height:78px;border:1px solid var(--c-border);border-radius:10px;
  padding:6px;background:#fff;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease);
}
.eyshop-pro .thumbnail-swiper .swiper-slide img{width:100%;height:100%;object-fit:contain}
.eyshop-pro .thumbnail-swiper .swiper-slide a:hover{border-color:var(--c-brand);box-shadow:var(--ring);transform:translateY(-1px)}
.eyshop-pro .thumbnail-swiper .zoomThumbActive{border-color:var(--c-brand)!important;box-shadow:var(--ring)!important}
.eyshop-pro .swiper-button-prev,
.eyshop-pro .swiper-button-next{color:var(--c-brand);--swiper-navigation-size:22px}
@media (max-width:640px){
  .eyshop-pro .thumbnail-swiper .swiper-slide a{width:64px;height:64px}
}

/* =================================================================== */
/* 商品信息购买区 - 样式升级优化                                       */
/* =================================================================== */

/* 1) 外部容器与标题 */
.eyshop-info{}
.eyshop-title{
  font-size:24px;font-weight:700;margin:0 0 var(--ey-space-sm);
  display:flex;align-items:center;gap:var(--ey-space-md);color:var(--ey-color-primary-text);
}
.eyshop-title i{width:6px;height:24px;background:var(--ey-color-title-border);border-radius:4px;flex-shrink:0}
.eyshop-brief{
  color:var(--ey-color-secondary-text);
  background:color-mix(in srgb,var(--ey-color-title-border) 8%,transparent);
  border-radius:var(--ey-border-radius-md);
  padding:var(--ey-space-md) var(--ey-space-lg);
  margin:var(--ey-space-lg) 0;line-height:1.6;
}

/* 2) 核心购买卡片 */
.eyshop-card{
  background:var(--ey-color-page-bg);border-radius:var(--ey-border-radius-md);
  padding:var(--ey-space-lg);margin-top:var(--ey-space-xl);border:1px solid var(--ey-color-border);
}
.eyshop-meta{
  display:flex;flex-wrap:wrap;gap:var(--ey-space-sm) var(--ey-space-md);
  color:var(--ey-color-secondary-text);margin-bottom:var(--ey-space-lg);
  padding-bottom:var(--ey-space-lg);border-bottom:1px solid var(--ey-color-border);
}
.eyshop-meta span{font-size:12px}

/* 3) 价格区 */
.eyp-price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--ey-space-sm) var(--ey-space-md);
  margin:0;padding:var(--ey-space-lg);
  background:color-mix(in srgb,var(--ey-color-title-border) 10%,transparent);
  border-radius:var(--ey-border-radius-sm);
}
.eyp-label{font-size:14px;color:var(--ey-color-secondary-text)}
.eyp-currency{font-size:20px;color:var(--ey-color-title-border);font-weight:700}
.eyp-amount{font-size:32px;color:var(--ey-color-title-border);font-weight:800;line-height:1;margin-right:var(--ey-space-sm)}
.eyp-oldprice{font-size:14px;color:var(--ey-color-light-text);text-decoration:line-through}
.eyp-specprice{font-size:13px;color:var(--ey-color-secondary-text)}

/* 4) 服务标签 */
.eyp-services{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--ey-space-md);margin:var(--ey-space-lg) 0 0 0;
}
.eyp-service-item{
  display:flex;align-items:center;gap:var(--ey-space-md);
  background:var(--ey-color-card-bg);border:1px solid var(--ey-color-border);
  padding:var(--ey-space-sm) var(--ey-space-md);border-radius:var(--ey-border-radius-sm);
  transition:var(--ey-transition-base);
}
.eyp-service-item:hover{transform:translateY(-2px);box-shadow:var(--ey-shadow-card)}
.eyp-service-icon{width:20px;height:20px;flex-shrink:0}
.eyp-service-text strong{display:block;color:var(--ey-color-primary-text);font-size:13px;font-weight:500}
.eyp-service-text p{margin:2px 0 0;font-size:12px;color:var(--ey-color-secondary-text)}

/* 5) 规格选择 */
.eyp-spec{margin:var(--ey-space-xl) 0 0 0;padding-top:var(--ey-space-lg);border-top:1px solid var(--ey-color-border)}
.eyp-spec-group{margin-bottom:var(--ey-space-lg)}
.eyp-spec-group:last-child{margin-bottom:0}
.eyp-spec-name{font-weight:500;margin-bottom:var(--ey-space-md);color:var(--ey-color-primary-text)}
.eyp-spec-opts{display:flex;flex-wrap:wrap;gap:var(--ey-space-md)}
.eyp-opt{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--ey-space-sm);
  min-height:40px;padding:var(--ey-space-sm) var(--ey-space-lg);
  border:1px solid var(--ey-color-border);border-radius:var(--ey-border-radius-sm);
  background:var(--ey-color-card-bg);cursor:pointer;transition:var(--ey-transition-base);font-size:14px;
}
.eyp-opt:hover{border-color:var(--ey-color-title-border);color:var(--ey-color-title-border);transform:translateY(-2px)}
.eyp-opt.selected,.eyp-opt.active,.eyp-opt.on{
  border-color:var(--ey-color-title-border);background:var(--ey-color-title-border);color:#fff;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ey-color-title-border) 20%,transparent);
}
.eyp-opt.selected img,.eyp-opt.active img,.eyp-opt.on img{border-color:#fff}
.eyp-opt.disabled{opacity:.5;background:#fafafa;pointer-events:none}
.eyp-spec-img{
  width:28px;height:28px;object-fit:cover;border:1px solid var(--ey-color-border);
  border-radius:var(--ey-border-radius-sm);margin-right:var(--ey-space-sm);
}
.eyp-spec-tips{margin-top:var(--ey-space-md);font-size:12px;color:var(--ey-color-light-text);min-height:1em}

/* 6) 数量与汇总 */
.eyp-qty{display:flex;align-items:center;gap:var(--ey-space-md);margin:var(--ey-space-lg) 0}
.eyp-qty-label{color:var(--ey-color-primary-text);font-weight:500}
.eyp-qty-ctrl{display:inline-flex;align-items:center;overflow:hidden}
.eyp-qty-btn{
  width:38px;height:38px;border:1px solid var(--ey-color-border);
  background:var(--ey-color-card-bg);cursor:pointer;font-size:18px;transition:var(--ey-transition-base);
}
.eyp-qty-btn:first-child{border-radius:var(--ey-border-radius-sm) 0 0 var(--ey-border-radius-sm)}
.eyp-qty-btn:last-child{border-radius:0 var(--ey-border-radius-sm) var(--ey-border-radius-sm) 0}
.eyp-qty-btn:hover{background:#f1f1f1}
.eyp-qty-btn:active{background:#e5e5e5}
.eyp-qty-input{
  width:60px;height:38px;border:0;border-top:1px solid var(--ey-color-border);border-bottom:1px solid var(--ey-color-border);
  text-align:center;font-weight:600;font-size:16px;background:var(--ey-color-card-bg);
  -moz-appearance:textfield;
}
.eyp-qty-input::-webkit-outer-spin-button,.eyp-qty-input::-webkit-inner-spin-button{-webkit-appearance:none}
.eyp-summary{
  display:grid;grid-template-columns:1fr auto auto;gap:var(--ey-space-lg);align-items:center;
  padding:var(--ey-space-md);border-radius:var(--ey-border-radius-sm);background:var(--ey-color-card-bg);
  margin:var(--ey-space-lg) 0;
}
.eyp-total span{color:var(--ey-color-primary-text)}
.eyp-total .eyp-total-num{color:var(--ey-color-title-border);font-weight:700}
.eyp-stock span,.eyp-sales span{color:var(--ey-color-secondary-text)}
.eyp-stock b,.eyp-sales b{font-weight:600;color:var(--ey-color-primary-text)}
.eyp-stock em,.eyp-sales em{color:var(--ey-color-secondary-text);margin-left:2px}

/* 7) 行为按钮 */
.eyp-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--ey-space-md);margin-top:var(--ey-space-xl)}
.eyp-btn{
  display:inline-flex;align-items:center;justify-content:center;height:50px;border-radius:var(--ey-border-radius-sm);
  font-weight:500;font-size:16px;border:1px solid;text-decoration:none;transition:var(--ey-transition-base);
}
.eyp-btn.add{background:color-mix(in srgb,var(--ey-color-title-border) 15%,#fff);border-color:var(--ey-color-title-border);color:var(--ey-color-title-border)}
.eyp-btn.add:hover{background:color-mix(in srgb,var(--ey-color-title-border) 25%,#fff)}
.eyp-btn.buy{background:var(--ey-color-title-border);color:#fff;border-color:var(--ey-color-title-border)}
.eyp-btn.buy:hover{background:color-mix(in srgb,var(--ey-color-title-border) 90%,#000)}
.eyp-btn:active{transform:scale(.98)}

/* 响应式（购买区） */
@media (max-width:768px){
  .eyshop-title{font-size:20px}
  .eyp-amount{font-size:26px}
  .eyp-actions{grid-template-columns:1fr}
}
@media (max-width:640px){
  .eyshop-card{padding:var(--ey-space-md)}
  .eyp-summary{grid-template-columns:1fr 1fr;gap:var(--ey-space-md)}
}

/* ===== 商品页主栅格（仅 .eyshop-pro 内的 .w.grid）===== */
.eyshop-pro .w.grid{
  display:grid;
  grid-template-columns:1.05fr .95fr; /* 桌面相册略宽 */
  gap:var(--ey-s-6,24px);
  align-items:start;width:100%;max-width:100%;min-width:0;
}
.eyshop-pro .w.grid > *{min-width:0}
@media (min-width:1600px){ .eyshop-pro .w.grid{grid-template-columns:1.2fr .8fr;gap:28px} }
@media (min-width:1200px) and (max-width:1599.98px){ .eyshop-pro .w.grid{grid-template-columns:1.1fr .9fr;gap:24px} }
@media (min-width:992px) and (max-width:1199.98px){ .eyshop-pro .w.grid{grid-template-columns:1fr 1fr;gap:20px} }
@media (min-width:768px) and (max-width:991.98px){ .eyshop-pro .w.grid{grid-template-columns:1fr 1fr;gap:16px} }
@media (max-width:767.98px){ .eyshop-pro .w.grid{grid-template-columns:1fr;gap:12px} }

/* ===== 下方整行（评价 → 参数 → 详情）===== */
.eyshop-below{display:flex;flex-direction:column;gap:var(--ey-space-xxl)}
.eyshop-section .title{
  font-size:20px;font-weight:500;color:var(--ey-color-primary-text);
  margin-bottom:var(--ey-space-lg);padding-bottom:var(--ey-space-md);
  border-bottom:1px solid var(--ey-color-border);position:relative;
}
.eyshop-section .title::after{
  content:'';position:absolute;left:0;bottom:-1px;width:80px;height:2px;background-color:var(--ey-color-title-border);
}
.eyshop-detail{
  background:var(--ey-color-card-bg);border-radius:var(--ey-border-radius-md);
  padding:var(--ey-space-xl);box-shadow:var(--ey-shadow-card);overflow:hidden;
}

/* 富文本内容 */
.eyshop-detail *{box-sizing:border-box;word-break:break-word;overflow-wrap:anywhere}
.eyshop-detail img,.eyshop-detail video,.eyshop-detail iframe{
  max-width:100%;height:auto;display:block;border-radius:var(--ey-border-radius-sm);margin:var(--ey-space-lg) auto;
}
.eyshop-detail table{
  width:100%;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-collapse:collapse;border-spacing:0;margin-bottom:var(--ey-space-lg);
}
.eyshop-detail table th,.eyshop-detail table td{
  padding:var(--ey-space-md);border:1px solid var(--ey-color-border);text-align:left;white-space:nowrap;
}
#c_detail_wrap p{line-height:1.8;color:var(--ey-color-primary-text);margin-bottom:var(--ey-space-lg)}
#c_detail_wrap p:last-child{margin-bottom:0}
#c_detail_wrap h1,#c_detail_wrap h2,#c_detail_wrap h3,#c_detail_wrap h4{
  color:var(--ey-color-primary-text);margin:var(--ey-space-xxl) 0 var(--ey-space-lg) 0;
}
#c_detail_wrap h2{font-size:1.5em}
#c_detail_wrap h3{font-size:1.25em}
#c_detail_wrap ul,#c_detail_wrap ol{padding-left:var(--ey-space-xl);margin-bottom:var(--ey-space-lg)}
#c_detail_wrap li{margin-bottom:var(--ey-space-sm);line-height:1.7}
#c_detail_wrap a{color:var(--ey-color-link);text-decoration:none;transition:var(--ey-transition-base)}
#c_detail_wrap a:hover{color:var(--ey-color-link-hover);text-decoration:underline}
#c_detail_wrap blockquote{
  margin:var(--ey-space-lg) 0;padding:var(--ey-space-md) var(--ey-space-lg);
  border-left:4px solid var(--ey-color-border);background:var(--ey-color-page-bg);
  color:var(--ey-color-secondary-text);
}

/* 商品参数列表 */
.eyparam-list{
  margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--ey-space-lg);
}
.eyparam-list li{
  display:grid;grid-template-columns:minmax(90px,max-content) 1fr;gap:var(--ey-space-md);align-items:center;
  background:var(--ey-color-page-bg);border-radius:var(--ey-border-radius-sm);
  padding:var(--ey-space-md);border:1px solid var(--ey-color-border);transition:var(--ey-transition-base);
}
.eyparam-list li:hover{transform:translateY(-2px);border-color:var(--ey-color-title-border)}
.eyparam-list .k{color:var(--ey-color-secondary-text);font-size:14px}
.eyparam-list .v{color:var(--ey-color-primary-text);font-size:14px;font-weight:500}
.eyparam-empty{
  text-align:center;color:var(--ey-color-light-text);padding:var(--ey-space-xl) 0;width:100%;grid-column:1 / -1;
}

/* 客户评价整块（移动端可整体隐藏） */
@media (max-width:768px){
  .eyshop-section:has(.evaluate-con){display:none}
}

/* 平板优化 */
@media (max-width:1024px){
  .eyshop-below{gap:var(--ey-space-xl)}
  .eyshop-section .title{font-size:18px}
}

/* 手机端富文本/表单等细节 */
@media (max-width:768px){
  .eyshop-detail{padding:var(--ey-space-lg)}
  .eyparam-list{grid-template-columns:1fr;gap:var(--ey-space-md)}
  .eyparam-list li{grid-template-columns:100px 1fr;padding:var(--ey-space-md)}
  .eyshop-detail.evaluate-con [class*="avatar"]{width:40px;height:40px;flex:0 0 40px}
  .eyshop-detail.evaluate-con [class*="actions"]{display:flex;flex-wrap:wrap;gap:var(--ey-space-sm);margin-top:var(--ey-space-md)}
  .eyshop-detail.evaluate-con input,
  .eyshop-detail.evaluate-con textarea,
  .eyshop-detail.evaluate-con select{
    width:100%;font-size:16px;padding:var(--ey-space-md);border-radius:var(--ey-border-radius-sm);border:1px solid var(--ey-color-border);
  }
  .eyshop-detail.evaluate-con button,
  .eyshop-detail.evaluate-con .btn,
  .eyshop-detail.evaluate-con input[type="submit"]{
    min-height:44px;padding:0 var(--ey-space-lg);font-size:15px;border-radius:var(--ey-border-radius-sm);cursor:pointer;
  }
  .eyshop-detail.evaluate-con .pagination,
  .eyshop-detail.evaluate-con [class*="pager"]{
    display:flex;flex-wrap:wrap;gap:var(--ey-space-sm);justify-content:center;margin-top:var(--ey-space-xl);
  }
}

/* ===== 推荐列表 ===== */
.eyshop-reco{margin-top:var(--space-20)}
.eyshop-reco .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-16)}
.eyshop-card-pro{
  border:1px solid var(--c-border);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);will-change:transform;
}
.eyshop-card-pro:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.08)}
.eyshop-card-pro .cover{
  aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.eyshop-card-pro .cover img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.eyshop-card-pro .bd{padding:var(--space-10)}
.eyshop-card-pro .name{font-size:var(--fs-14);height:40px;overflow:hidden}
.eyshop-card-pro .price{color:var(--c-brand-600);font-weight:800;margin-top:var(--space-6)}
@media (max-width:640px){ .eyshop-reco .grid{grid-template-columns:repeat(2,1fr)} }

/* ===== 移动端吸底购买栏 ===== */
@media (max-width:640px){
  body{padding-bottom:64px}
  .eyshop-stickybar{
    position:fixed;left:0;right:0;bottom:0;z-index:99;display:flex;align-items:center;gap:var(--space-10);
    background:#fff;border-top:1px solid var(--c-border);padding:var(--space-10) var(--space-12);
    box-shadow:0 -6px 18px rgba(0,0,0,.06);
  }
  .eyshop-stickybar .s-price{flex:1;font-weight:800}
  .eyshop-stickybar .s-price .yen{color:var(--c-brand-600)}
  .eyshop-stickybar a{
    height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
    padding:0 var(--space-14);font-weight:700;border:1px solid transparent;
  }
  .eyshop-stickybar .add{background:#fff;border-color:var(--c-brand);color:var(--c-brand)}
  .eyshop-stickybar .buy{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
  .eyshop-actions{flex-direction:column}
}
/* ===== Business Green 主题覆写：保留价格/购买按钮红色，其余用商务绿 ===== */

/* 1) 主题主色（不刺眼的深绿系） */
:root{
  --ey-color-accent:      #2f6f4f;  /* 主绿（稳重） */
  --ey-color-accent-600:  #285d42;  /* 悬停/深一阶 */
  --ey-color-accent-700:  #1f4b35;  /* 更深，用于对比更强场景 */

  /* 将装饰线/链接等通用强调切到绿色 */
  --ey-color-title-border: var(--ey-color-accent);
  --ey-color-link:         var(--ey-color-accent);
  --ey-color-link-hover:   var(--ey-color-accent-600);

  /* 焦点可视环改为绿（更统一；若想保持红，可删掉这一行） */
  --ring: 0 0 0 3px color-mix(in srgb, var(--ey-color-accent) 22%, transparent);
}

/* 2) 通用 UI：把原来的蓝色强调替换为商务绿（不影响价格/购买按钮红色） */
.eyshop-pro .swiper-button-prev,
.eyshop-pro .swiper-button-next{
  color: var(--ey-color-accent);
}

.eyshop-pro .thumbnail-swiper .swiper-slide a:hover{
  border-color: var(--ey-color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ey-color-accent) 20%, transparent);
}
.eyshop-pro .thumbnail-swiper .zoomThumbActive{
  border-color: var(--ey-color-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ey-color-accent) 20%, transparent) !important;
}

.eyshop-pro .ey-fav:hover{
  border-color: var(--ey-color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ey-color-accent) 20%, transparent);
}

/* 次要动作按钮（加入购物车等）改为商务绿 */
.eyp-btn.add{
  background:  color-mix(in srgb, var(--ey-color-accent) 15%, #fff);
  border-color: var(--ey-color-accent);
  color:       var(--ey-color-accent);
}
.eyp-btn.add:hover{
  background: color-mix(in srgb, var(--ey-color-accent) 25%, #fff);
}

/* 规格选项的 hover/选中态用绿，降低视觉“跳闸感” */
.eyp-opt:hover{
  border-color: var(--ey-color-accent);
  color:        var(--ey-color-accent);
}
.eyp-opt.selected,
.eyp-opt.active,
.eyp-opt.on{
  border-color: var(--ey-color-accent);
  background:   var(--ey-color-accent);
  color:#fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ey-color-accent) 20%, transparent);
}

/* 3) 价格/购买按钮仍维持红色，强聚焦转化点 */
.eyp-currency,
.eyp-amount,
.eyp-total .eyp-total-num{
  color: var(--c-brand-600); /* 红色系文本强调 */
}

.eyp-btn.buy{
  background:  var(--c-brand);
  border-color:var(--c-brand);
  color:#fff;
}
.eyp-btn.buy:hover{
  background: color-mix(in srgb, var(--c-brand) 85%, #000);
}

/* 4) 细节：价格区域/区块装饰等浅色底改为“浅绿”渲染（不刺眼） */
/* 这些用的是变量 --ey-color-title-border，因此会自然变为绿调 */
.eyp-price{
  /* 原样式中已用 color-mix(..., var(--ey-color-title-border), transparent) 作为浅底
     这里不需额外改动；如想更浅一些，可降低比例至 8%~10%。*/
}