/* ==========================================================
   EyShop Mall Theme - Final Polished
   命名空间：.eyshop- / .eyp-
   ========================================================== */

/* ===== 设计变量 ===== */
:root{
  --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-24:24px; --space-28:28px; --space-32:32px;
  --ease:cubic-bezier(.22,.61,.36,1); --dur-1:120ms; --dur-2:200ms;
}

/* ===== 基础 ===== */
*{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);
}

.eyshop-pro .eyshop-gallery-main::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.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;
  }
}

/* =================================================================== */
/* 商品信息购买区 - 样式升级优化                                       */
/* 使用了之前定义的 :root 全局变量，确保风格统一                       */
/* =================================================================== */

/* ----- 1. 外部容器与标题 ----- */
.eyshop-info {
  /* 可根据需要设置与左侧图片区的间距 */
  /* padding-left: var(--ey-space-xxl); */
}

.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) ----- */
.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-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; /* Firefox */
}
.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布局，方便控制 */
  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(0.98);
}

/* =================================================================== */
/* 响应式适配 (Responsive)                                           */
/* =================================================================== */
@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); }
}

/* ===== 下方整行（评价 → 参数 → 详情） ===== */
/* =================================================================== */
/* 设计变量 (Design Tokens) - 用于统一全局风格                          */
/* =================================================================== */
: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 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* =================================================================== */
/* 整体布局与区块样式 (Section & Detail)                               */
/* =================================================================== */
.eyshop-below {
  /* [优化] 增加区块间的垂直间距 */
  display: flex;
  flex-direction: column;
  gap: var(--ey-space-xxl);
}

.eyshop-section {
  /* 为空时可以移除，因为已用 gap 代替 margin-top */
}

/* 区块标题 - 大气化设计 */
.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; /* 覆盖在 border-bottom 上方 */
  width: 80px;  /* 装饰线宽度 */
  height: 2px;
  background-color: var(--ey-color-title-border);
}

/* 卡片容器 - 应用于所有 .eyshop-detail */
.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 内部)                     */
/* =================================================================== */

/* 健壮的盒模型与文本换行 */
.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)富文本内容专属样式                        */
/* =================================================================== */
#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) - 已包含在通用样式中，微调即可     */
/* =================================================================== */
/* ===== 商品服务标签 (多彩图标背景风) ===== */
/* .eyp-services 和媒体查询部分与方案一相同 */
.eyp-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 12px 0 24px;
}

.eyp-service-item {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 14px;
  background: var(--ey-color-card-bg, #f9f9f9); /* 使用一个非常浅的灰色背景 */
  border: 1px solid transparent; /* 默认透明边框，避免hover时跳动 */
  padding: 16px;
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  overflow: hidden; /* 防止动效溢出 */
}

.eyp-service-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .07);
}

/* 图标容器 */
.eyp-service-icon-wrapper {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 示例背景色，实际应用中可以为每个item设置不同颜色 */
  background-color: #e6f7ff;
}

.eyp-service-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  /* 示例图标颜色 */
  filter: invert(39%) sepia(97%) saturate(1352%) hue-rotate(180deg) brightness(99%) contrast(92%); /* 这是一个CSS滤镜，可以给单色图标上色 */
}

.eyp-service-text strong {
  font-size: 15px;
  color: #333;
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

.eyp-service-text p {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  margin: 0;
}

/* 如果需要为每个item设置不同颜色，可以这样操作 */
.eyp-service-item.style-1 .eyp-service-icon-wrapper { background-color: #e6f7ff; } /* 蓝色 */
.eyp-service-item.style-2 .eyp-service-icon-wrapper { background-color: #fffbe6; } /* 黄色 */
.eyp-service-item.style-3 .eyp-service-icon-wrapper { background-color: #f6ffed; } /* 绿色 */

/* 手机端优化 */
@media (max-width: 640px) {
  .eyp-services {
    grid-template-columns: 1fr;
  }
}


.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;
}

/* =================================================================== */
/* 客户评价区域 (evaluate-con) - 继承通用样式，仅添加专属规则          */
/* =================================================================== */
/* 此处大部分样式已由通用规则覆盖，只需保留特殊规则 */
/* 例如，如果您评价区域有独特的布局，可在此添加 */


/* =================================================================== */
/* 响应式媒体查询 (Responsive Media Queries)                           */
/* =================================================================== */

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

/* 手机端 (max-width: 768px) */
@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);
  }
}
@media (max-width: 768px) {
  /*
   * 使用 :has() 选择器，精确选择内部包含 .evaluate-con 的那个 .eyshop-section 容器。
   * 这是最理想的做法，可以将整个“客户评价”区块（包括标题）一起隐藏。
   */
  .eyshop-section:has(.evaluate-con) {
    display: none;
  }
}
/* ===== 推荐列表 ===== */
.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}
}