/** Shopify CDN: Minification failed

Line 1143:0 Unexpected "<"
Line 1204:0 Unexpected "<"

**/
.clipboard--bubble {
  transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1); }


.blog-post-detail .article-tags .tag-link {
  display: inline-flex;
  white-space: nowrap;
  font-size: 0.6875rem;
  text-transform: uppercase;
  height: 31px;
  border-radius: 62px;
  padding: 0 14px;
  align-items: center;
  font-weight: var(--font-body-bold-weight, 600);
  margin: 0 5px;
  border: 1px solid var(--color-border); }
  .blog-post-detail .article-tags .tag-link:hover, .blog-post-detail .article-tags .active.tag-link {
    color: #fff;
    background: var(--color-accent);
    border-color: var(--color-accent); }

.blog-post-detail .post-meta-wrapper {
  font-size: 0.875rem;
  opacity: 0.6;
  letter-spacing: 0.1em;
  /* text-transform: uppercase; */
  margin-bottom: 15px; }
  .blog-post-detail .post-meta-wrapper aside {
    display: inline-flex;
    margin: 0 15px 10px 0;
    position: relative; }
    .blog-post-detail .post-meta-wrapper aside:after {
      content: "";
      display: inline-block;
      width: 2px;
      height: 2px;
      border-radius: 1px;
      background: var(--color-body);
      opacity: 0.6;
      position: absolute;
      top: 50%;
      margin-top: -1px;
      right: -7px; }
    .blog-post-detail .post-meta-wrapper aside:last-child:after {
      content: none; }

.blog-post-detail .post-title {
  margin: 0 auto 40px;
  margin-bottom: 15px; }
  @media only screen and (min-width: 768px) {
    .blog-post-detail .post-title {
      margin-bottom: 15px; } }
  .blog-post-detail .post-title .entry-title {
    margin-bottom: 15px; }

.blog-post-detail .featured-image {
  margin-left: -15px;
  margin-right: -15px;
  width: calc(100% + 30px);
  margin-bottom: 15px;
  text-align: center; }
  @media only screen and (min-width: 768px) {
    .blog-post-detail .featured-image {
      margin-bottom: 15px;
      margin-left: 0;
      margin-right: 0;
      width: 100%; } }

.blog-post-detail .post-excerpt-container {
  display: flex;
  flex-direction: column; }
  @media only screen and (min-width: 1068px) {
    .blog-post-detail .post-excerpt-container {
      flex-direction: row; } }
  .blog-post-detail .post-excerpt-container .post-excerpt {
    max-width: 570px;
    padding-right: 30px; }
    [dir="rtl"] .blog-post-detail .post-excerpt-container .post-excerpt {
      padding-right: 0;
      padding-left: 30px; }
    .blog-post-detail .post-excerpt-container .post-excerpt p {
      margin-bottom: 0; }
      @media only screen and (min-width: 1068px) {
        .blog-post-detail .post-excerpt-container .post-excerpt p {
          font-size: 1.25rem;
          line-height: 1.875rem; } }
  .blog-post-detail .post-excerpt-container .share-article {
    margin-top: 15px;
    margin-bottom: 15px; }
    @media only screen and (min-width: 1068px) {
      .blog-post-detail .post-excerpt-container .share-article {
        margin-top: 0;
        margin-left: auto; }
        [dir="rtl"] .blog-post-detail .post-excerpt-container .share-article {
          margin-left: 0;
          margin-right: auto; } }

.blog-post-detail .post-content {
  margin-bottom: 30px; }
  .blog-post-detail .post-content p + h1,
  .blog-post-detail .post-content p + h2,
  .blog-post-detail .post-content p + h3,
  .blog-post-detail .post-content p + h4,
  .blog-post-detail .post-content p + h5,
  .blog-post-detail .post-content p + h6 {
    margin-top: 40px; }

.blog-post-detail .article-tags {
  margin-top: 30px; }
  .blog-post-detail .article-tags .tag-link {
    margin-left: 0; }

.blog-post-detail .share-article {
  text-align: left; }

.share-article {
  display: block;
  font-size: 0.8125rem;
  line-height: 1;
  margin-bottom: 15px; }
  .share-article svg {
    height: 16px;
    width: auto; }
    .share-article svg path {
      fill: var(--color-body); }
  .share-article label {
    display: block;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    font-weight: var(--font-body-bold-weight, 600);
    text-transform: uppercase;
    margin-bottom: 14px; }
  .share-article .social {
    display: inline-flex;
    align-items: center;
    margin-right: 14px;
    width: 24px;
    height: 24px;
    white-space: nowrap;
    color: var(--color-body); }

.clipboard {
  position: relative; }
  .clipboard--bubble {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    background-color: var(--color-body);
    color: var(--bg-body, #fff);
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 3px 6px;
    border-radius: 1px;
    opacity: 0;
    pointer-events: none;
    line-height: 1.25; }
    .clipboard--bubble:after {
      content: '';
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 3px 2.5px 0 2.5px;
      border-color: var(--color-body) transparent transparent transparent;
      transform: translateX(-2.5px);
      position: absolute;
      bottom: -3px;
      left: 50%; }
  .clipboard-success .clipboard--bubble {
    opacity: 1; }

  .post-content-main img {
    /* 确保图片以块级元素显示，且有边框半径 */
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* 轻微圆角，使卡片效果更自然 */
    margin: 15px auto; /* 居中并添加垂直间距 */

    /* 添加卡片阴影效果 */
    box-shadow: 6px 7px 14px -5px #000000b0;
    
    /* 优化过渡效果（可选） */
    transition: box-shadow 0.3s ease-in-out;
}

  /* 仅在桌面端 (宽度大于 990px) 生效 */
  @media only screen and (min-width: 990px) {
    
    /* 1. 将内容容器改为 Flex 弹性布局，实现左右分栏 */
    .post-content-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: flex-start; /* 关键：让子元素顶部对齐，否则 sticky 不生效 */
      gap: 40px; /* 左侧文章和右侧侧边栏的间距 */
      position: relative;
    }

    /* 2. 左侧：文章主体内容 */
    .post-content-main {
      flex: 1; /* 自动占据剩余空间 */
      max-width: calc(100% - 320px); /* 预留出侧边栏宽度 + 间距 */
      min-width: 0; /* 防止文章内的大图撑破布局 */
    }

    /* 3. 右侧：相关产品侧边栏 */
    .post-related-products {
      width: 280px; /* 设定侧边栏固定宽度，根据需要调整 */
      flex-shrink: 0; /* 禁止侧边栏被压缩 */
      
      /* --- 核心代码：实现悬浮固定效果 --- */
      position: -webkit-sticky; /* Safari 兼容 */
      position: sticky; 
      top: 170px; /* 距离浏览器顶部的距离 (如果有固定导航栏，请加大这个数值，例如 120px) */
      
      /* --- 核心代码：实现内部独立滚动 --- */
      /* 如果产品列表很长，超过了屏幕高度，允许侧边栏内部滚动 */
      max-height: calc(100vh - 120px); /* 限制最大高度为视口高度减去顶部间距 */
      overflow-y: auto; /* 超出高度显示滚动条 */
      
      /* 美化：给侧边栏加一点内边距或背景（可选） */
      padding: 10px;
      padding-bottom: 60px;
      /* background: #f9f9f9; */ /* 如果需要背景色可取消注释 */
      /* border-radius: 8px; */
    }

    /* 4. 美化侧边栏的滚动条 (Chrome/Safari) */
    .post-related-products::-webkit-scrollbar {
      width: 4px;
    }
    .post-related-products::-webkit-scrollbar-track {
      background: transparent;
    }
    .post-related-products::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 4px;
    }
  }

  /* 1. 进度条容器 - 轨道 */
  #reading-progress-container {
    position: fixed;
    top: var(--header-height); /* 如果有导航栏遮挡，请改为 top: 60px; (根据导航栏高度调整) */
    left: 0;
    width: 100%;
    height: 7px; /* 稍微加粗一点，更有质感 */
    background: transparent;
    z-index: 40;
    pointer-events: none;
  }

  @media only screen and (max-width: 768px) {
    #reading-progress-container {
      height: 6px;
    }
  }

  /* 2. 进度条本体 - 颜料 */
  #reading-progress-bar {
    width: 0%;
    height: 100%;
    /* 使用渐变色模拟颜料质感 (左浅右深) */
    background: linear-gradient(90deg, #D8cbbd 0%,rgb(177, 135, 92) 100%); 
    border-radius: 0 4px 4px 0; /* 右侧圆角 */
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* 颜料的厚度投影 */
    transition: width 0.1s ease-out;
  }

    /* ====================================================== */
/* ===         相关产品侧边栏 CSS (Article Page)         === */
/* ====================================================== */

/* 1. 桌面端布局 (并排显示) */
/* 我们使用 990px 作为断点，您可以根据主题的设置调整 */
.related-product-card .related-product-image {
    /* 保持图片的宽高比，以适应卡片宽度 */
    max-height: 240px; /* 限制图片最大高度 */
    justify-content: center;
    align-items: center;
    margin: auto;
}
.related-product-info .shop-now-btn {
    /* 基础链接样式重置 */
    display: block;
    width: 100%;
    margin-top: 12px;
    text-align: center;
    box-sizing: border-box;
    text-decoration: none; /* 移除链接下划线 */
    cursor: pointer;

    /* 匹配图片中的白色背景和黑色边框 */
    background-color: #fff; /* 白色背景 */
    color: #000; /* 黑色字体 */
    border: 1px solid #000; /* 黑色边框 */
    /* border-radius: 16px; 极大的圆角，实现药丸形状 */

    /* 字体和内边距 */
    font-size: 14px;
    font-weight: 500; /* 中等粗细 */
    padding: 12px 20px; /* 确保高度合适 */
    
    /* 添加平滑过渡效果 */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; 
}

/* --- 3. Hover 效果 --- */
.related-product-info .shop-now-btn:hover,
.related-product-info .shop-now-btn:focus {
    /* Hover 时背景变为黑色 */
    background-color: #000;
    /* Hover 时字体变为白色 */
    color: #fff;
    /* Hover 时边框保持黑色（或与背景色一致，避免闪烁） */
    border-color: #000;
}

@media (min-width: 991px) {
  .post-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* 顶部对齐 */
    gap: 100px; /* 内容和侧边栏的间距 */
  }

  .post-content-main {
    flex: 1; /* 主要内容占据剩余空间 */
    min-width: 0; /* 防止 flex 溢出 */
  }

  .post-related-products {
    flex-basis: 240px; /* 侧边栏固定宽度 */
        flex-shrink: 0;
        max-width: 33.3%;
    }

  /* 桌面端：垂直排列产品 */
  .related-products-slider {
    display: flex;
    flex-direction: column;
    gap: 20px; /* 垂直间距 */
  }
  
  .related-product-slide {
    width: 100%;
  }

  /* 桌面端：隐藏移动端导航按钮 (冗余，但保留以防万一) */
  .related-products-nav {
    display: none;
  }
  .post-content-main .wp-caption-text {
    font-size: 15px; /* 小一号的字体 */
  }
}

/* 2. 移动端/平板布局 (隐藏相关产品) */
@media (max-width: 990px) {
  /* (保留) 保持内容堆叠 */
  .post-content-wrapper {
    display: flex;
    flex-direction: column; /* 垂直堆叠 */
    gap: 40px; /* 内容和产品模块的间距 */
  }

  /* * [修改] 
   * 隐藏相关产品侧边栏
  */
  .post-related-products {
    display: none;
  }

  /* (保留) 其他移动端样式 */
  .post-related-articles.hide-on-mobile {
      display: none;
  }
  
  .post-content-main .wp-caption-text {
      font-size: 13px; /* 小一号的字体 */
      color: #666; /* 灰色字体 */
      padding: 5px 0;
  }
}

/* 3. 通用产品卡片样式 (桌面和移动) */
.related-products-title {
  font-size: 1.3em;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 20px;
  /* 确保标题样式和您的主题匹配 */
}

.related-product-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent; /* 确保背景透明 */
    /* 保持产品信息的文本对齐方式 */
    text-align: center;
}

.related-product-image {
    display: flex; /* 使用 flex 容器来居中内部的图片 */
    justify-content: center;
    align-items: center;
    
    aspect-ratio: 1 / 1; /* 保持图片1:1比例 */
    width: 100%;
    
    /* 核心修改：添加边框 */
    border: 1px solid rgb(0, 0, 0); /* 轻微的灰色边框，模拟图片展示框 */
    overflow: hidden;
    background-color: #fff; /* 确保背景是白色 */
    
    /* 图片下方的间距 */
    margin-bottom: 15px; 
    text-decoration: none; /* 移除链接下划线 */
    padding: 0;
}

.related-product-image img,
.related-product-image .placeholder-svg {
    object-fit: contain; 
    /* 缩小图片在正方形容器内的显示，创建留白 */
    max-width: 90%; 
    max-height: 90%; 
    width: auto; /* 允许根据比例自适应 */
    height: auto;
}

.related-product-info {
    padding: 0; /* 移除内边距，让内容更靠近卡片边界 */
    text-align: center; /* 标题和价格居中 */
}

.related-product-title {
/* 调整样式使其更符合参考图，并确保居中 */
    display: -webkit-box; /* 确保标题是块级元素 */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; /* 垂直排列子元素 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis;
    margin-top: 8px; 
    margin-bottom: 8px;
    font-size: 1em; /* 略微放大标题 */
    font-weight: 600;
    color: #000;
    min-height: auto; /* 移除固定高度，允许标题根据内容自适应 */
    text-align: center; /* 确保文本居中 */
}
.related-product-title:hover {
  text-decoration: none;
}

.related-product-price {
  display: block;
  font-size: 0.9em;
  color: #555;
  font-weight: 600;
  margin-bottom: 15px; /* 价格和按钮之间的间距 */
}

/* --- (保留) “You May Also Like”样式 --- */
  .post-related-articles {
    margin-top: 40px; /* 距离上方相关产品的间距 */
    border-top: 1px solid rgba(0, 0, 0, 0.1); /* 顶部加一个分隔线 */
    padding-top: 30px;
  }

  .related-articles-title {
    font-size: 22px; /* 标题大小 (您可以根据主题调整) */
    margin-bottom: 25px;
    font-weight: 600;
  }

  .related-articles-list {
    display: grid;
    gap: 25px; /* 每篇文章之间的间距 */
  }

  .related-article-card {
    display: flex;
    flex-direction: column;
    gap: 12px; /* 图片和标题之间的间距 */
  }

  .related-article-image {
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.08); /* 图片边框 */
    line-height: 0; /* 修复图片下的额外空隙 */
    overflow: hidden; /* 确保图片圆角生效 */
    border-radius: 4px; /* 轻微圆角 */
  }

  .related-article-image img {
    width: 100%;
    height: auto;
    /* 您可以设置一个固定的宽高比，使列表更整齐 */
    aspect-ratio: 16 / 9; 
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .related-article-card a:hover .related-article-image img {
    transform: scale(1.05); /* 悬停时图片放大效果 */
  }

  .related-article-title {
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.4;
    color: inherit; /* 继承主题的文字颜色 */
  }
  
  .related-article-title:hover {
    text-decoration: underline;
  }

  /* (保留) 用于将图片和标题作为一个整体居中 */
.post-content-main .image-with-caption {
  margin: 1em auto;
  max-width: 100%;
  display: block;
  text-align: center; 
}

/* (保留) 图示文字样式 */
.post-content-main .wp-caption-text {
  display: block; 
  font-style: italic;
  color: #666; /* 灰色字体 */
  padding: 5px 0;
}

/* ====================================================== */
/* ===         浮动文章目录 (TOC) 样式         === */
/* ====================================================== */

/* --- 移动端样式 (<= 990px) --- */
@media (max-width: 990px) {
  /* 移动端：防止背景在菜单打开时滚动 */
  body.toc-is-active {
    overflow: hidden;
  }
  
  /* 1. 按钮 (Header) - 固定在右下角 */
  .article-toc-header {
    position: fixed;
    top: 450px;
    left: 15px;
    z-index: 1001; /* 必须在遮罩层和内容之上 */
    
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #000; /* 黑色背景 */
    color: #fff; /* 白色图标 */
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
  }
  
  /* 2. 菜单 (Content) - 从底部滑出 */
  .article-toc-content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    
    background: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    
    padding: 20px 20px 40px 20px; /* 底部留出安全区 */
    max-height: 50vh; /* 最多占屏幕一半 */
    overflow-y: auto;
    
    /* 默认隐藏 */
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }
  
  /* 3. 遮罩层 (Overlay) */
  .article-toc-overlay {
    position: fixed;
    inset: 0; /* 铺满屏幕 */
    background: rgba(0, 0, 0, 0.4);
    z-index: 999; /* 在菜单之下，内容之上 */
    
    /* 默认隐藏 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  /* 4. 展开状态 (is-open) */
  .article-toc-wrapper.is-open .article-toc-content {
    transform: translateY(0); /* 滑出菜单 */
  }
  
  .article-toc-wrapper.is-open .article-toc-overlay {
    opacity: 1;
    visibility: visible; /* 显示遮罩层 */
  }
}

/* --- 桌面端样式 (>= 991px) --- */
@media (min-width: 991px) {
  
  /* 1. 容器 (Wrapper) */
  .article-toc-wrapper {
    position: sticky;
    top: 180px; /* 距离顶部高度 */
    left: -10px;
    width: 45px;
    float: left;
    
    /* transform: translateX(calc(-100% - 20px));  <-- 删除这行 */
    margin-left: -65px; /* <-- 新增这行，向左拉动，效果等同于上面的 transform */
    
    margin-bottom: -9999px;
    
    /* [修改点 2]：提高层级，确保整个组件在页面内容之上 */
    z-index: 30; 
    align-self: flex-start;
  }

  /* 2. 按钮 (Header) */
  .article-toc-header {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    
    /* 确保按钮在遮罩层之上 */
    position: relative; 
    z-index: 32; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
  }

  /* 3. 菜单 (Content) */
  .article-toc-content {
    position: absolute;
    top: 0;
    left: calc(100% + 15px); /* 按钮右侧 15px */
    
    width: 300px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    
    /* 确保菜单在遮罩层之上 */
    z-index: 32;
    
    /* 默认隐藏 */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                visibility 0.3s;
  }
  
  /* 4. [核心修改] 遮罩层 (Overlay) - 桌面端启用 */
  .article-toc-overlay {
    /* display: none; <-- 删除这行，不再隐藏 */
    display: block; /* 启用它 */
    
    position: fixed; /* 全屏固定定位 */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    
    /* 背景色：可以使用 transparent (完全透明) 或 rgba(0,0,0,0.05) (极淡的阴影) */
    background-color: rgba(0, 0, 0, 0); 
    
    /* 层级逻辑：比页面内容高(>1)，但必须比按钮和菜单低(<992) */
    z-index: 31; 
    
    /* 默认状态：不可见、不可点 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 关键：隐藏时不阻挡页面操作 */
    
    transition: opacity 0.3s ease;
  }
  
  /* 5. 展开状态 (is-open) */
  .article-toc-wrapper.is-open .article-toc-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  
  /* 当菜单打开时，激活遮罩层 */
  .article-toc-wrapper.is-open .article-toc-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* 激活后可以点击 */
    cursor: default; /* 或者 pointer */
  }
}

/* --- 通用样式 (按钮图标和列表) --- */

/* 切换图标 */
.article-toc-header .toc-icon-close {
  display: none;
}
.article-toc-wrapper.is-open .article-toc-header .toc-icon-open {
  display: none;
}
.article-toc-wrapper.is-open .article-toc-header .toc-icon-close {
  display: block;
}

/* 列表标题 */
.article-toc-title {
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* 列表 (ol) */
.article-toc-list {
  list-style: decimal;
  list-style-position: inside;
  padding: 0;
  margin: 0;
  margin-left: 5px;
  font-size: 15px;
}

.article-toc-list li {
  margin-bottom: 12px;
}
.article-toc-list li:last-child {
  margin-bottom: 0;
}

/* 列表中的链接 */
.article-toc-list a {
  text-decoration: none;
  color: var(--color-body);
  opacity: 0.8;
  font-weight: 500;
  transition: opacity 0.2s ease;
  line-height: 1.2;
}

.article-toc-list a:hover {
  text-decoration: underline;
  opacity: 1;
}

/* Add to Cart & Variant Selector Styles */
.related-product-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.related-variant-select {
  width: 100%;
  padding: 8px;
  border: 1px solid #e1e1e1;
  font-size: 14px;
  background-color: #fff;
  margin-bottom: 5px;
}

.add-to-cart-btn {
  display: block;
  font-weight: 700;
  width: 100%;
  height: 48px;
  padding: 10px;
  background-color: #000; /* 根据你的主题颜色修改 */
  color: #fff;
  text-align: center;
  border: none;
  cursor: pointer;
  font-size: 14px;
  text-transform: uppercase;
  transition: background-color 0.3s;
  text-decoration: none;
}

.add-to-cart-btn:hover {
  background-color: #333;
}

.add-to-cart-btn.loading {
  opacity: 0.7;
  cursor: wait;
}

.add-to-cart-btn.success {
  background-color: #28a745;
}

/* 博客内嵌产品卡片 - 升级版样式 */
.blog-embedded-product {
  display: flex;
  align-items: stretch; /* 关键：让子元素高度拉伸对齐 */
  border: 1px solid #e5e5e5;
  border-radius: 8px; /* 微圆角 */
  background-color: #fff;
  margin: 25px 0;
  box-shadow:   4px 5px 8px -5px #000000b0;
  overflow: hidden; /* 防止图片圆角溢出 */
  max-width: 100%;
}

/* 左侧图片区域 */
.bep-image-wrapper {
  flex: 0 0 160px; /* 固定宽度 */
  width: 160px;
  position: relative;
}

.bep-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 关键：裁剪图片以适应容器，保持高度一致 */
  display: block;
  margin-left: 5px !important;
  box-shadow: none !important;
}


/* 右侧信息区域 */
.bep-info {
  flex: 1;
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 让标题在顶，按钮在底 */
}

/* 标题样式 - 限制2行 */
.bep-title {
  margin: 0 0 8px 0 !important;
  font-family: inherit; /* 继承网站字体 */
  font-size: 1.1rem; /* 桌面端字号 */
  font-weight: 600;
  line-height: 1.4;
  color: #333;
  
  /* 多行省略核心代码 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bep-title a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}
.bep-title a:hover {
  color: #df2020;
}

/* 价格样式 */
.bep-price {
  font-size: 1rem;
  margin-bottom: 10px;
  color: #444;
}
.bep-compare-price {
  text-decoration: line-through;
  color: #999;
  font-size: 0.9em;
  margin-right: 8px;
}

/* 按钮区域 */
.bep-atc-form {
  margin: 0;
}

/* 自定义按钮样式 */
.bep-atc-btn {
  display: block;
  width: 100%;
  max-width: 200px; /* 限制按钮最大宽度 */
  padding: 10px 15px;
  background-color: #000; /* 纯黑背景 */
  color: #fff;
  border: 1px solid #000;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px; /* 只有一点点圆角 */
  text-align: center;
  line-height: 1;
}

.bep-atc-btn:hover {
  background-color: #fff;
  color: #000;
}

.bep-sold-out {
  background-color: #ccc;
  border-color: #ccc;
  cursor: not-allowed;
}
.bep-sold-out:hover {
  background-color: #ccc;
  color: #fff;
}

/* 移动端适配 */
@media screen and (max-width: 600px) {
  .blog-embedded-product {
    height: auto; /* 移动端高度自适应 */
    min-height: 120px;
    margin: 15px 0;
  }

  .bep-image-wrapper {
    flex: 0 0 110px; /* 图片变窄 */
    width: 110px;
  }

  .bep-info {
    padding: 12px;
  }

  .bep-title {
    font-size: 0.95rem; /* 移动端字体调小 */
    line-height: 1.3;
    -webkit-line-clamp: 2; /* 依然限制2行 */
  }

  .bep-price {
    font-size: 0.9rem;
    margin-bottom: 8px;
  }

  .bep-atc-btn {
    width: 100%; /* 移动端按钮全宽 */
    max-width: none;
    padding: 8px 10px;
    font-size: 0.8rem;
  }
}

/* --- 博客评测摘要框样式 --- */
.review-snapshot-box {
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 30px;
  margin: 30px 0;
  box-shadow: 0 5px 15px rgba(0,0,0,0.03); /* 极淡的高级阴影 */
  max-width: 800px; /* 防止在超大屏幕上太宽 */
}

/* 主标题 */
.snapshot-main-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 32px;
  font-weight: 700;
  color: #333;
  text-align: center; /* 标题居中更像一个总结 */
  letter-spacing: -0.5px;
}

/* 优缺点板块通用样式 */
.snapshot-section {
  padding: 5px 10px;
}

/* 标题行 (Pros / Cons) */
.snapshot-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-family: inherit;
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.color-green { color: #2e7d32; } /* 专业深绿 */
.color-red { color: #c62828; }   /* 警示深红 */

.snapshot-icon {
  margin-right: 10px;
  font-size: 17px;
}

/* 列表样式 */
.snapshot-list {
  list-style: none; /* 去掉默认圆点 */
  padding: 0;
  margin: 0;
}

.snapshot-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  line-height: 1.6;
  color: #4a4a4a;
  font-size: 15.4px;
}

/* 给列表项添加自定义的小点装饰 */
.snapshot-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #ccc;
  font-weight: bold;
}

/* 优点列表特别装饰 (可选) */
.section-pros .snapshot-list li::before {
  color: #2e7d32; /* 绿色点 */
}

/* 分割线 */
.snapshot-divider {
  height: 1px;
  background-color: #f0f0f0;
  margin: 20px 0;
  width: 100%;
}

/* 移动端微调 */
@media screen and (max-width: 768px) {
  .review-snapshot-box {
    padding: 10px;
  }
  .snapshot-main-title {
    font-size: 28px;
  }
}

/* --- Artist Interview Blockquote Style --- */
blockquote {
  position: relative;
  margin: 30px 0;
  padding: 20px 30px 20px 50px; /* Left padding ensures space for the icon */
  background: #fcfcfc; /* Very subtle off-white background */
  border-left: 4px solid #C7A17A; /* Your brand accent color (Gold/Khaki) */
  font-family: "Garamond", "Baskerville", "Times New Roman", serif; /* Serif font for artistic feel */
  font-size: 1.2rem;
  line-height: 1.6;
  color: #333;
  font-style: italic;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* Soft, high-end shadow */
}

/* Decorative Quotation Mark */
blockquote::before {
  content: "“";
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 60px;
  line-height: 1;
  color: #C7A17A; /* Matches border color */
  opacity: 0.3;
  font-family: sans-serif; /* Sans-serif quote mark looks more modern */
}

/* --- 艺术家引用署名样式 (右对齐) --- */
blockquote footer {
  display: block;             /* 确保占满整行 */
  text-align: right;          /* 核心：将文字推向最右侧 */
  margin-top: 15px;           /* 与上方引语的间距 */
  
  font-family: var(--font-body-family); /* 改回无衬线字体，与正文引用区分开，显得更现代 */
  font-size: 0.95rem;         /* 稍微小一点 */
  font-weight: 600;           /* 加粗 */
  font-style: normal;         /* 取消斜体 */
  color: #666;                /* 颜色稍浅，突出层次 */
  letter-spacing: 0.5px;
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
  blockquote {
    padding: 15px 20px 15px 40px;
    font-size: 1.1rem;
  }
  blockquote::before {
    top: 5px;
    left: 5px;
    font-size: 50px;
  }
    blockquote footer {
    font-size: 0.9rem;
  }
}


<style>
/* Fuumuui FAQ 品牌化样式 */
.fuumuui-faq-section {
  margin: 30px 0 20px;
  border-top: 2px solid #000;
  background: #fff;
}
.faq-main-title {
  font-size: 30px;
  letter-spacing: 1px;
  padding: 0;
  margin: 15px 0 0 0;
  border-bottom: 1px solid #eee;
}
.faq-item {
  border-bottom: 1px solid #eee;
}
.h3 {
  font-size: 20px;
  margin: 0;
  padding: 0;
}
.faq-question {
  padding: 10px 0 10px 0;
  margin: 0;
  cursor: pointer;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  transition: color 0.3s;
  font-size: 20px;
}
.faq-question::after {
  content: '+';
  font-size: 24px;
  font-weight: 300;
  transition: transform 0.3s;
}
.faq-item.active .faq-question::after {
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease-out;
  color: black;
  line-height: 1.6;
  font-size: 17px;
}
.faq-item.active .faq-answer {
  max-height: 500px;
  padding-bottom: 5px;
}
/* 移动端优化 */
@media (max-width: 767px) {
  .faq-main-title { font-size: 24px; }
  .faq-question { font-size: 20px; }
  .faq-answer { font-size: 15.4px; }
}
</style>