/*
------------------------------------------------------
二手奢侈品分类页 - 增强优化 CSS
------------------------------------------------------
*/

/* 1. CSS 变量和基础设置 */
:root {
    /* 保持主色调 */
    --color-primary: #7F87AB;
    /* 强调色 */
    --color-accent: #C0996D;
    /* 核心白色 */
    --color-white: #ffffff;
    /* 核心深色 */
    --color-dark: #333333;
    /* 筛选背景色 (Row 1, 2, 3 的背景) */
    --color-filter-bg: #F8F8FB; 
    /* 浮框背景色 */
    --color-popover-bg: #FAFAFD; 
    --padding-main: 20px;
}

/* 确保所有容器内元素计算正确 */
.sticky-wrapper * {
    box-sizing: border-box;
    /* 确保筛选触发器和选项的字体平滑 */
    font-family: Arial, sans-serif;
}

/* 2. 粘性筛选栏 (Sticky Wrapper) */
.sticky-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--color-filter-bg);
    border-bottom: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	margin-bottom: 20px;
}

/* 容器和行间距 */
.container2 {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--padding-main);
}

.sticky-row {
    padding: 10px 0;
    border-bottom: 1px solid #EAEAF0;
}

/* 3. Row 1: H1 标题 (主色调，优雅居中) */
.sticky-row-1 {
    text-align: center;
}

.category-main-title {
    color: var(--color-primary);
    font-size: 1.8em;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0;
    padding: 5px 0;
}

/* 4. Row 2: Selected Filters & Clear All */
.sticky-row-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.selected-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.selected-filter-tag {
    /* 选中标签设计成优雅的药丸状 */
    background-color: var(--color-white); 
    color: var(--color-dark);
    padding: 4px 12px;
    border: 1px solid #ddd;
    border-radius: 20px; 
    font-size: 0.85em;
    font-weight: 500;
    transition: all 0.2s;
    position: relative;
    padding-left: 18px; 
}

/* 选中标签左侧小圆点装饰 */
.selected-filter-tag::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background-color: var(--color-accent);
    border-radius: 50%;
}

.clear-all-btn {
    color: var(--color-primary);
    text-decoration: underline;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.clear-all-btn:hover {
    color: var(--color-accent);
}

/* -------------------------------------------------------------------
   5. Row 3: Filter Triggers & Sort By (按钮化筛选器)
   ------------------------------------------------------------------- */
.sticky-row-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
    padding: 15px 0;
}
.sticky-row-3 h3 {
	font-size: 18px;
	float: left;
}

/* 包含标签和筛选按钮的左侧容器 */
.left-filter-triggers {
    display: flex;
    align-items: center; /* 确保所有子元素（包括 span 和按钮）垂直居中 */
    gap: 15px;
}
/* FILTERS 标签样式优化 (核心修正) */
.filter-label {
    /* 视觉优化 */
    font-size: 0.85em; /* 略微减小，更精致 */
    color: var(--color-dark);
    font-weight: 700;
    letter-spacing: 1.5px; 
    text-transform: uppercase;
    
    /* 布局修正 */
    margin-right: 5px; /* 增加与第一个筛选按钮的间距 */
    padding: 0;
    
    /* 垂直居中对齐微调技巧：利用 Flexbox 的对齐 */
    /* 确保标签本身也是一个 Flex Item，帮助精确对齐 */
    display: flex; 
    align-items: center; 
    height: 34px; /* 尝试匹配按钮的实际高度 (8px padding + 1px border * 2 + 字体高度) */
}
/* 按钮化筛选触发器 */
.filter-trigger {
    font-size: 1em;
    color: var(--color-dark);
    cursor: pointer;
    
    /* 保持按钮样式 */
    padding: 8px 15px; 
    background-color: var(--color-white);
    border: 1px solid #ddd;
    border-radius: 4px;
    
    transition: all 0.2s;
    font-weight: 500;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd; 
}
/* 筛选器悬停/激活样式 */
.filter-trigger:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.filter-trigger.active {
    background-color: var(--color-primary); /* 激活时使用主色调背景 */
    color: var(--color-white); /* 激活时使用白色文字 */
    border-color: var(--color-primary); 
    font-weight: 600;
}

/* 下拉图标样式 (图标放大) */
.filter-trigger-icon {
    margin-left: 8px;
    font-size: 1.5em; /* 增大图标尺寸 */
    line-height: 1;
    
    /* 确保图标颜色随状态变化 */
    color: var(--color-primary); 
    transition: transform 0.2s, color 0.2s;
}

/* 激活状态下图标颜色和旋转 */
.filter-trigger.active .filter-trigger-icon {
    color: var(--color-white); /* 激活时图标变白色 */
    transform: rotate(180deg); 
}

/* Sort By 下拉框 */
.right-sort-group select {
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.95em;
    cursor: pointer;
    color: var(--color-dark);
    background-color: var(--color-white);
    outline: none;
    transition: border-color 0.2s;
}

.right-sort-group select:hover {
    border-color: var(--color-primary);
}


/* -------------------------------------------------------------------
   6. Filter Popover (筛选浮框)
   ------------------------------------------------------------------- */
.filter-popover {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 999;
    display: none;
    
    /* 浮框样式 */
    background-color: var(--color-popover-bg); 
    box-shadow: 0 6px 15px rgba(0,0,0,0.1); 
    border-top: 1px solid var(--color-primary);
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding-top: 20px;
    padding-bottom: 20px;
}

.filter-popover.active {
    display: block;
}

/* 浮框内容：横排选项 */
.filter-options-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 var(--padding-main); /* 确保选项有左右内边距 */
}

.filter-option {
    /* 筛选选项设计：微圆角按钮 */
    background: var(--color-white);
    color: var(--color-dark);
    border: 1px solid #ddd;
    padding: 8px 18px;
    
    /* 核心修改：减小圆角弧度，使其为微圆角矩形 */
    border-radius: 4px; 
    
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    
    /* 优化：将过渡时间调短，0.9s 太慢，通常 0.2s 或 0.3s 更自然 */
    transition: all 0.3s;
}

/* 悬停和选中样式 */
.filter-option:hover {
    border-color: #7F87AB;
    color: #7F87AB;
}

.filter-option.selected {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    font-weight: 600;
}
/* 确保链接和文字在选中状态下是白色 (针对内部链接) */
.filter-options-grid .filter-option.selected a {
    color: #fff !important; /* 确保链接颜色也被覆盖为白色 */
}
.filter-options-grid .filter-option.selected:hover {
    /* 目的：显示悬停效果，但不破坏字体颜色 */
    
    /* 方案 A: 略微加深背景色，同时保持白色字体 */
    background-color: #5D6385; /* 比 #7F87AB 略深的颜色 */
    
    /* 确保字体颜色和链接颜色不被 hover 状态下的其他规则覆盖 */
    color: #fff; 
    border-color: #5D6385;
    
    /* 确保内部链接颜色保持白色 */
    /* 如果您的通用 .filter-option:hover a 有设置颜色，这里需要覆盖它 */
    /* .filter-options-grid .filter-option.selected:hover a {
        color: #fff; 
    } */ 
}





/* -------------------------------------------------------------------
   7. 响应式优化 (Mobile) - 针对小屏幕彻底优化
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* 通用行内边距调整 */
    .sticky-row {
        padding: 8px 0;
    }
    
    /* H1 标题调整 */
    .category-main-title { 
        font-size: 14px; 
    }
    

	.filter-label {
        display: none !important; /* 强制不显示 */
    }	
	
    /* Row 2: 已选筛选条件和清除按钮 */
    .sticky-row-2 { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 8px; /* 减小间距 */
        padding: 8px 0;
    }
    .selected-filter-tag, .clear-all-btn {
        font-size: 0.8em;
    }
    
    /* Row 3: 筛选触发器和排序 */
    .sticky-row-3 { 
        display: flex; /* 确保 Flexbox 布局 */
        flex-direction: column; /* 关键：让 Row 3 的主轴变为垂直，从而实现堆叠 */
        gap: 10px; /* 每行之间的垂直间距 */
        padding: 10px 0;
    }

    /* 1. 优先级调整：排序放在最上面 (Order 1) */
    .right-sort-group { 
        width: 100%;
        order: 1; /* 确保排序框位于第一行 */
    }
    .right-sort-group select { 
        width: 100%; 
        font-size: 1em;
        padding: 5px 8px; /* 增加高度，更易点击 */
    }

    /* 2. FILTERS 标签和筛选按钮组 (Order 2) */
    .left-filter-triggers { 
        width: 100%;
        display: flex;
        flex-wrap: wrap; /* 允许换行 */
        align-items: center;
        gap: 10px; 
        order: 2; /* 确保筛选器位于第二组 */
    }
    
    /* 3. 筛选按钮布局优化 */
    .filter-trigger { 
        /* 关键：让按钮平均分布在屏幕上，每行显示 2 或 3 个 */
        /*flex-basis: calc(50% - 7px);*/
        
        padding: 5px 8px; /* 增加按钮的上下内边距，更易于触摸 */
        font-size: 0.9em;
        justify-content: center; /* 文本居中 */
        
        /* 确保选中按钮的颜色在手机端清晰可见 */
        color: var(--color-dark); 
        background-color: var(--color-white);
    }
    
    .filter-trigger.active {
        background-color: var(--color-primary); 
        color: var(--color-white); 
    }
    .filter-trigger.active .filter-trigger-icon {
        color: var(--color-white);
    }


    /* 4. 筛选浮框选项优化 (如果内容过多，也需要换行) */
    .filter-popover {
        /* 在手机端，浮框应该占据整个宽度 */
        left: 0;
        right: 0;
    }
    .filter-options-grid { 
        gap: 8px; 
        padding: 0 var(--padding-main); 
    }
    .filter-option {
        /* 确保选项也能在手机端自动换行 */
        flex-grow: 1;
        flex-basis: auto; 
        padding: 5px 8px;
        font-size: 0.75em;
        text-align: center;
    }
	
	
}

/*产品列表  强制改*/
.product-item .product-name {
	font-size:15px;
	font-weight:normal;
	padding: 0 5px;
	
}

/* --- 整体容器样式 --- */
.showcatmain {
    width: 100%;
    /* 根据你的实际需求设置最大宽度，例如： */
    /* max-width: 1200px; */
    /* margin: 0 auto; /* 如果需要整个容器居中 */
    padding: 20px 0;
	margin: 0 0 0 40px;
}

/* --- 内部品牌列表容器样式 --- */
.showcat {
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: wrap; /* 允许项目换行 */
    justify-content: flex-start; /* 项目从头开始排列 */
    align-items: center;
    gap: 20px; /* 项目之间的间隔 */
    padding: 10px;
	
    /* 清除浮动，尽管使用 Flexbox 已经不需要 'cle' 类来做传统浮动清除 */
    /* .cle:after { content: ""; display: block; clear: both; } */
}

/* --- 品牌链接 (a) 样式 --- */
.showcat a {
    display: flex;
    flex-direction: column; /* 内容（图和文字）垂直排列 */
    align-items: center; /* 居中对齐 */
    text-decoration: none; /* 移除下划线 */
    color: #333; /* 默认文字颜色 */
    padding: 10px;
    border: 1px solid #eee; /* 浅灰色边框 */
    border-radius: 5px; /* 轻微圆角 */
    width: 120px; /* 设置每个项目固定的宽度，根据实际图片和文字长度调整 */
    text-align: center;
    /* 添加平滑过渡，让 hover 效果更自然 */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	background: #FFFFFF;
}

/* --- 品牌图片 (img) 样式 --- */
.showcat a img {
    max-width: 100%; /* 图片不超过 a 标签的宽度 */
    height: auto; /* 保持图片比例 */
    max-height: 80px; /* 控制图片最大高度，保持统一 */
    margin-bottom: 5px;
}

/* --- 品牌名称 (p) 样式 --- */
.showcat a p {
    margin: 0;
    font-size: 14px;
    white-space: nowrap; /* 防止品牌名在 p 标签内换行 */
    overflow: hidden;
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    max-width: 100%; /* 确保在 a 标签宽度内 */
}

/* --- 鼠标悬停 (Hover) 效果 --- */
.showcat a:hover {
    /* 1. 稍微放大 */
    transform: translateY(-5px) scale(1.05);
    /* 2. 添加阴影 */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    /* 3. 强调边框颜色 */
    border-color: #7F87AB; /* 例如，蓝色 */
    color: #7F87AB; /* 悬停时文字也变色 */
}


/* ======================================================================
   0. 全局容器布局修正（修复拉宽问题）
   ---------------------------------------------------------------------- */

/* 核心修正：确保 H1/H2 区域和品牌网格区域宽度一致且居中，防止溢出 */
.sticky-wrapper, 
.container2, 
.brands-grid {
    max-width: 1400px; /* 限制最大宽度 */
    width: 100%;       /* 确保占满可用宽度 */
    margin: 0 auto;    /* 核心：居中显示 */
    box-sizing: border-box; /* 确保 padding 不会导致总宽度增加 */
}

/* 1. 品牌网格布局 (brands-grid) */
.brands-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* PC 端 5 列 */
    gap: 20px; /* 卡片之间的间距 */
    padding: 20px; /* 容器内边距 */
}

/* 2. H1/H2 标题容器的内边距与网格保持一致，确保对齐 */
.sticky-wrapper, 
.container2 {
    padding-left: 20px;
    padding-right: 20px;
}

/* 3. H2 描述样式 */
.category-sub-title {
    font-size: 1.2em;
    font-weight: normal;
    color: #666; 
    margin: 5px 0 20px 0;
    text-align: center;
    line-height: 1.5;
    padding: 0;
}


/* ======================================================================
   4. 品牌卡片样式 (brand-card)
   ---------------------------------------------------------------------- */

.brand-card {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fff;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    min-width: 0; /* 确保在 Grid 布局中能正确压缩 */
}

/* 4.1 鼠标悬停 (Hover) 效果 */
.brand-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-color: #7F87AB; /* 客户要求的边框颜色 */
}

.brand-card:hover .brand-name a {
    color: #7F87AB; /* 悬停时名称颜色变化 */
}

/* 5. 品牌 Logo 和名称/链接的样式 */
.brand-logo { height: 80px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-name { font-size: 16px; font-weight: bold; margin: 5px 0 0 0; }
.brand-name a { color: #333; text-decoration: none; display: block; max-width: 100%; }


/* 6. 品牌描述（DESC）- 允许自由换行和字体调整 */
.brand-desc {
    /* 允许自由换行 (解决拉宽问题) */
    white-space: normal;       
    overflow: hidden;          /* 隐藏超出 max-height 的部分 */
    text-overflow: clip;       /* 重置省略号 */
    
    /* 调整字体和行高（按要求略微增大） */
    font-size: 13px;           /* 字体略微增大 */
    line-height: 1.4;          /* 适合多行文本的行高 */
    max-height: 4.2em;         /* 限制最大显示 3 行，确保卡片视觉上整齐 */
    
    /* 保持外观一致性 */
    margin: 5px 0 0 0;
    color: #777; 
    max-width: 100%;
    text-align: center;
}


/* ======================================================================
   7. 响应式布局 (RWD)
   ---------------------------------------------------------------------- */

/* 中等屏幕 (平板设备，宽度小于 1200px) */
@media (max-width: 1200px) {
    .brands-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 列 */
        gap: 15px;
    }
}

/* 小屏幕 (横向手机/小平板，宽度小于 768px) */
@media (max-width: 768px) {
    .brands-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 列 */
        gap: 10px;
        padding: 15px; /* 缩小内边距 */
    }
    .sticky-wrapper, 
    .container2 {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .brand-logo {
        height: 60px; /* 缩小 Logo 容器高度 */
    }
    .brand-desc {
        max-height: 3em; /* 手机端只显示约 2 行描述 */
    }
	/* 目标选择器：搜索页筛选区域的一级分类 H3 标题 */
    .filter-options-grid .parent-cat-header,.filter-options-grid .parent-cat-header a {
        
        /* 1. 缩小字体大小 */
        font-size: 14px; /* 从 1.3em 缩小到 1.1em，效果明显且不会太小 */
        
        /* 2. 可选：略微缩小上下间距，为内容腾出更多空间 */
        margin: 5px 0 8px 0; 
        float:left;
    }	
	
	
}

/* 超小屏幕 (竖向手机，宽度小于 480px) */
@media (max-width: 480px) {
    .brands-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 列 */
        gap: 10px;
    }
    .brand-card {
        padding: 10px;
    }
    .brand-name {
        font-size: 14px;
    }
}

.filter-options-grid {
    display: flex; 
    flex-wrap: wrap;        /* 允许筛选选项换行 */
    justify-content: flex-start; /* 核心修正：设置为左对齐 */
    align-items: center; 
    
    gap: 5px 8px; /* 上下间距 10px，左右间距 15px */
    paddi/ng: 10px 0; 
    
    max-width: 100%;
    margin: 0 auto; 
}

/* 2. 一级分类 H3 标题样式 (.parent-cat-header) */
.filter-options-grid .parent-cat-header {
    /* 核心：强制占据整行宽度 (实现“换行”) */
    width: 100%;
    
    /* 外观：靠左对齐 */
    text-align: left;
    
    font-size: 1em; 
    font-weight: bold;
    color: #333;
    
    /* 留出充分的上下间距，视觉上分隔组 */
    margin: 10px 0 10px 0; 
    padding-left: 5px; /* 略微内缩，与下方选项保持视觉统一 */
    
    flex-shrink: 0;
}


.item.mobile-search-box .block-sub {
    /* 关键：确保它建立了堆叠上下文（position 属性是必须的） */
    /* 您的 block-sub 应该已经设置了 position: fixed; 或 position: absolute; */
    /* 如果没有，请添加 position: fixed; */
    position: fixed; 
    
    /* 核心修正：设置一个极高的 z-index，高于 sticky-wrapper (1000 + 1) */
    z-index: 1001; 
    
    /* 确保它覆盖整个屏幕，从顶部开始 */
    top: 0; 
    left: 0;
    width: 100%;

    /* 如果它默认是隐藏的，则需要确保 display 属性在激活时能正确显示，例如：*/
    /* display: none; */ 
    /* 或 */
    /* visibility: hidden; opacity: 0; */
    /* 然后在 JS 激活时，通过 class 切换为 display: block/fixed 或 opacity: 1; */
}

/* 3. 额外检查：确保搜索按钮本身不会被覆盖 (不太常见，但以防万一) */
.header-device-mobile .item.mobile-search-box {
    /* 略微提升 mobile-search-box 容器的层级，以防万一 */
    z-index: 1005;
    position: relative; /* 建立层级上下文 */
}



/* 确保分页容器内容居中 */
.pagination.clearfix.style3 {
    /* 核心修正：让内部的行内元素（分页链接）居中 */
    text-align: center; 
    
    /* 确保分页栏在任何布局中都有适当的外边距 */
    margin-top: 20px;
    margin-bottom: 20px; 
    
    /* 清除浮动，确保布局稳定（虽然您已经有 clearfix，但习惯上再加一遍） */
    clear: both;
}

/* 确保 nav-link 容器也遵循居中规则 */
.pagination.clearfix.style3 .nav-link {
    /* 继承父容器的居中设置，确保万无一失 */
    display: inline-block; 
    text-align: center;
    padding: 0;
    margin: 0;
}

/*详情页样式*/
/* 容器样式：限制宽度，居中，设置字体 */


    /* 定义主配色变量 */
    :root {
        --main-color: #7F87AB; /* 主配色：优雅的灰蓝色 */
        --light-main-color: #A8B2D0; /* 主配色的浅色调，用于高亮背景 */
        --dark-main-color: #5D668F; /* 主配色的深色调，用于强调文本 */
        --success-bg: #e0e6f2; /* 成功结果的柔和背景 */
        --success-text: #414a6e; /* 成功结果的深色文本 */
        --refund-bg: #f2e0e0; /* 退款结果的柔和背景 (略带暖意) */
        --refund-text: #6e4141; /* 退款结果的深色文本 */
        --text-color: #333;
        --secondary-text-color: #555;
    }
    
    .process-container {
        max-width: 100%;
        margin: 40px auto;
        padding: 20px;
        background-color: #ffffff;
        color: var(--text-color);
    }

    /* 标题样式 */
    .process-title {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 40px;
        color: var(--dark-main-color); /* 标题使用深色主配色 */
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* 每一个步骤的卡片 */
    .step-card {
        display: flex;
        flex-direction: row;
        background: #f9f9f9;
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        transition: transform 0.2s;
        border-left: 5px solid var(--main-color); /* 主配色左边框装饰 */
    }

    .step-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 12px rgba(0,0,0,0.1);
    }

    /* 步骤图标/数字区域 (保持不变，因为图标是 Unicode) */
    .step-icon {
        flex: 0 0 60px;
        font-size: 40px;
        text-align: center;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 文字内容区域 */
    .step-content {
        flex: 1;
    }

    .step-title {
        font-size: 20px;
        font-weight: 700;
        color: var(--main-color); /* 步骤标题使用主配色 */
        margin-bottom: 10px;
    }

    .step-desc {
        font-size: 15px;
        line-height: 1.6;
        color: var(--secondary-text-color);
    }

    /* 高亮文字 */
    .highlight {
        color: var(--dark-main-color); /* 使用主配色的深色调作为高亮文字 */
        font-weight: bold;
        background-color: var(--light-main-color); /* 使用主配色的浅色调作为高亮背景 */
        padding: 2px 5px;
        border-radius: 4px;
    }

    /* 第三步的分支逻辑样式 */
    .outcome-box {
        display: flex;
        gap: 15px;
        margin-top: 15px;
        flex-wrap: wrap;
    }

    .outcome {
        flex: 1;
        padding: 10px 15px;
        border-radius: 8px;
        font-size: 14px;
        min-width: 200px;
    }

    .outcome.success {
        background-color: var(--success-bg);
        border: 1px solid var(--success-bg);
        color: var(--success-text);
    }

    .outcome.refund {
        background-color: var(--refund-bg);
        border: 1px solid var(--refund-bg);
        color: var(--refund-text);
    }

    /* 手机端适配：变为垂直排列 */
    @media (max-width: 600px) {
        .step-card {
            flex-direction: column;
            text-align: center;
        }
        .step-icon {
            margin-right: 0;
            margin-bottom: 15px;
        }
        .outcome-box {
            flex-direction: column;
        }
    }


/*footer edit*/

    /* ------------------------------------- */
    /* 页脚样式 (Footer Style 7) */
    /* ------------------------------------- */

    :root {
        --main-color: #7F87AB; /* 主配色：优雅的灰蓝色 */
        --dark-color: #333;
        --light-text: #666;
        --bg-color: #f7f7f7; /* 页脚背景 */
        --border-color: #eee;
    }

    /* 容器基础样式 */
    .footer.style7 {
        padding: 50px 0 20px;
        background-color: var(--bg-color);
        color: var(--light-text);
        font-family: Arial, sans-serif;
    }

    .footer-main-content {
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 30px;
        margin-bottom: 20px;
    }

    /* 标题样式 */
    .widgettitle, .cleric-newsletter .title {
        color: var(--dark-color);
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px;
        position: relative;
    }

    /* 菜单列表样式 */
    .cleric-custommenu .menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .cleric-custommenu .menu li {
        margin-bottom: 8px;
    }

    .cleric-custommenu .menu a {
        color: var(--light-text);
        text-decoration: none;
        transition: color 0.3s;
        font-size: 15px;
    }

    .cleric-custommenu .menu a:hover {
        color: var(--main-color); /* 悬停使用主配色 */
    }
    
    /* Newsletter 订阅框样式 */
    .newsletter-form-wrap .list {
        margin-bottom: 15px;
        line-height: 1.5;
    }

    .newsletter-form-wrap input[type="email"] {
        width: 100%;
        padding: 10px 15px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .newsletter-form-wrap .btn-submit {
        background-color: var(--main-color);
        color: white;
        border: none;
        padding: 10px 20px;
        width: 100%;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s;
        border-radius: 4px;
    }

    .newsletter-form-wrap .btn-submit:hover {
        background-color: var(--dark-color); /* 悬停使用深色 */
    }

    /* 底部社交媒体和版权 */
    .cleric-socials {
        text-align: center;
        margin-bottom: 10px;
    }
    .cleric-socials .socials {
        list-style: none;
        padding: 0;
        margin: 0 0 10px 0;
        display: inline-block;
    }
    .cleric-socials .socials li {
        display: inline-block;
        margin: 0 8px;
    }
    .cleric-socials .socials a {
        color: var(--light-text);
        font-size: 18px;
    }
    .coppyright {
        text-align: center;
        font-size: 14px;
    }
    .coppyright a {
        color: var(--main-color);
        text-decoration: none;
    }


    /* ------------------------------------- */
    /* 手机端折叠样式 (Accordion for Mobile) */
    /* ------------------------------------- */

    @media (max-width: 768px) {
        .footer.style7 {
            padding-top: 30px;
        }

        /* 隐藏菜单内容，准备折叠 */
        .footer-col-menu .accordion-content {
            display: none; /* 手机端默认隐藏 */
            padding-top: 10px;
        }

        /* 标题增加可点击的指示图标 */
        .footer-toggle-title {
            cursor: pointer;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 0;
        }
        
        .footer-toggle-title:after {
            content: '>'; /* 默认向右的箭头或加号 */
            font-family: Arial, sans-serif;
            float: right;
            transition: transform 0.3s;
            font-size: 14px;
            color: var(--main-color);
        }

        /* 菜单展开时的标题样式 */
        .footer-accordion.open .footer-toggle-title:after {
            content: 'V'; /* 展开时向下箭头 */
            transform: rotate(0deg);
        }

        /* 确保菜单折叠后的列表是可见的 */
        .footer-accordion.open .accordion-content {
            display: block;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 15px;
            margin-bottom: 15px;
        }
		

    }


/* ======================================================= */
/* 🛒 全局基础样式 */
/* ======================================================= */

.shoppingcart-content * {
    box-sizing: border-box;
}

.cart-items-list {
    border-top: 1px solid #ddd;
}

/* 购物车卡片基础样式 */
.cart-item-card {
    display: flex; /* 默认使用 Flex 布局 */
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    position: relative;
}

/* 单元格通用样式 */
.item-cell {
    padding: 0 5px;
    text-align: center;
}

/* 数量控制器基础样式 */
.quantity .control {
    display: flex;
    align-items: center;
    justify-content: center; 
}

.quantity .btn-number {
    width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    border: 1px solid #ccc;
    background: #f9f9f9;
    color: #333;
    border-radius: 4px;
    font-size: 18px;
    flex-shrink: 0;
    padding: 0;
}

.quantity .input-qty {
    width: 40px; 
    height: 28px;
    line-height: 28px;
    text-align: center;
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    flex-grow: 1;
}

/* 底部总计 */
.order-summary-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-top: 2px solid #333;
    margin-top: 10px;
}
.order-total {
    margin-left: auto; /* 推到右边 */
    padding-right: 20px;
}
.total-price {
    font-size: 1.3em;
    font-weight: bold;
    color: #e94e4e;
}

/* ======================================================= */
/* 💻 PC 端布局 (Flex 模拟表格) */
/* ======================================================= */

@media (min-width: 769px) {
    
    /* 1. PC 端列标题 */
    .cart-header {
        display: flex;
        align-items: center;
        padding: 10px 0;
        font-weight: bold;
        border-bottom: 2px solid #333;
        text-align: center;
    }
    
    /* 2. PC 端列宽分配 */
    .cart-header .col-remove, .cart-item-card .item-remove { width: 5%; }
    .cart-header .col-product, .cart-item-card .item-thumbnail { width: 15%; }
    .cart-header .col-name, .cart-item-card .item-name { width: 40%; text-align: left; }
    .cart-header .col-price, .cart-item-card .item-price { width: 10%; }
    .cart-header .col-quantity, .cart-item-card .item-quantity { width: 15%; }
    .cart-header .col-subtotal, .cart-item-card .item-subtotal { width: 15%; }

    /* 4. 隐藏移动端标签 */
    .item-cell::before {
        content: none !important;
    }

    /* PC 端删除按钮图标尺寸调整 */
    .item-remove i {
        font-size: 20px !important;
        color: #999;
    }
}

/* ======================================================= */
/* 📱 手机端布局 (紧凑卡片式) */
/* ======================================================= */

@media (max-width: 768px) {
    
    .pc-only { 
        display: none !important; /* 隐藏PC端标题 */
    }
    
    .cart-item-card {
        flex-wrap: wrap; /* 允许项目换行 */
        padding: 5px;
        border: 1px solid #f0f0f0;
        border-radius: 8px;
        margin-bottom: 10px;
    }
    
    
    /* 2. 右侧容器：占据图片右边的空间，并允许换行 */
    .item-name {
        width: calc(100% - 90px); /* 减去图片宽度和间距 */
        text-align: left;
        order: 1; /* 确保名称在顶部 */
        padding: 0 30px 5px 0; /* 为右上角删除按钮留出空间 */
        font-size: 14px;
    }
    
    .item-name a.title {
        display: block;
        line-height: 1.4;
        max-height: 40px; 
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical;
    }
    
    /* 3. 将价格、数量和小计推到卡片底部，并占据整行 */
    .item-price, .item-quantity, .item-subtotal {
        width: 100%; 
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        order: 2; /* 确保它们在名称下方 */
        border-top: 1px dashed #eee;
        margin-top: 5px;
    }
    
    .item-price, .item-quantity {
        border-top: none; /* 只需要小计上方的线 */
    }
    
    /* 4. 删除按钮定位 */
    .item-remove {
        position: absolute;
        top: 10px;
        right: 10px;
        order: 0; /* 保持在顶部 */
    }
    .item-remove i {
        font-size: 24px !important;
        color: #e94e4e;
    }
    
    /* 5. 移动端标签 (通过 data-label 显示) */
    .item-cell::before {
        content: attr(data-label);
        font-weight: bold;
        color: #888;
        font-size: 13px;
        flex-shrink: 0;
        margin-right: 10px;
    }

    /* 突出小计价格 */
    .item-subtotal {
        font-size: 1.1em;
        color: #e94e4e;
        font-weight: bold;
        border-top: 1px dashed #eee; 
    }
    
    /* 6. 底部总计调整 */
    .order-summary-footer {
        flex-direction: column;
        align-items: flex-end;
        padding-right: 10px;
    }
}
/* 1. PC 端和手机端删除按钮默认颜色 */
.item-remove i {
    transition: color 0.2s ease; /* 添加过渡效果，让颜色变化更柔和 */
}

/* 2. PC 端：鼠标悬停时变色 */
@media (min-width: 769px) {
    .item-remove:hover i {
        color: #ff0000 !important; /* 悬停时变为红色 (可自行更换颜色) */
    }
}

/* 3. 手机端：默认颜色和激活颜色（点击或触摸时） */
@media (max-width: 768px) {
    .item-remove i {
        color: #999; /* 手机端默认颜色（比PC端柔和） */
    }
    .item-remove:active i {
        color: #ff0000 !important; /* 点击或触摸时变为红色 */
    }
}
/* 📱 手机端样式调整 */
@media (max-width: 768px) {
    
    /* 1. 图片容器美化：添加边框和圆角 */
    .item-thumbnail {
        border: 1px solid #ddd; /* 图片边框 */
        border-radius: 6px; /* 圆角 */
        padding: 4px; /* 增加内边距，使图片不紧贴边框 */
        background-color: #fff; /* 背景色，如果图片不是满幅透明的话 */
    }
    
    .item-name {
        /* 原 CSS 中已设置 width: calc(100% - 90px)，这里只调整 padding */
        padding-left: 10px; /* 增加左侧内边距，使其与图片拉开距离 */
        padding-right: 30px; 
    }
    
    /* 调整整个卡片的图片和名称区域的外侧间距 */
    .item-main-content {
        margin-left: 10px;
    }
}

/* ======================================================= */
/* 📱 手机端优化修正 (max-width: 768px) */
/* ======================================================= */
@media (max-width: 768px) {
    
    /* 1. 删除按钮点击反馈修正 (确保点击时变色) */
    .item-remove {
        /* 在手机端，删除按钮使用 cursor: pointer 确保可点击性，颜色由 :active 控制 */
        cursor: pointer;
    }

    /* 确保点击或触摸时，图标颜色变红 */
    .item-remove:active i {
        color: #ff0000 !important;
    }
}
/* 📱 手机端图片居中修正 */


/* 📱 手机端图片居中修正 */
@media (max-width: 768px) {
    /* 核心修正：让 item-thumbnail 成为一个 Flex 容器，用于居中整个图片-边框组 */
    .item-thumbnail {
        
        /* 【关键修改 1】：移除 width: 220px; aspect-ratio: 1 / 1; 
           让容器宽度由内部图片决定，避免多余空间 */
        width: auto; /* 移除固定的 220px */
        aspect-ratio: unset;
        
        flex-shrink: 0;
        margin-right: 10px;
        
        /* 启用 Flexbox 用于对齐内部元素 (图片) */
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 (如果图片有 max-height 限制，此居中有效) */
        
        /* 移除 padding, border, background-color，将其转移到 img 上 */
        padding: 0; 
        border: none;
        background-color: transparent; 
    }
    
    /* 保持 img 样式不变 */
    .item-thumbnail img {
        /* ... 保持您的 max-width: 220px; 边框和 padding 不变 ... */
        max-width: 320px; 
        max-height: auto; 
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 4px;
        background-color: #F1F1F1;
        object-fit: contain;
        display: block;
        width: auto;
        height: auto;
    }
}




/* 📱 手机端产品分隔美化 */
@media (max-width: 768px) {
    
    /* 移除列表容器的顶部边框，因为卡片本身会提供分隔 */
    .cart-items-list {
        border-top: none;
        padding-top: 10px; /* 顶部留空 */
    }

    /* 卡片美化：添加间距和底色 */
    .cart-item-card {
        /* 移除卡片之间的分割线（原有的 border-bottom）*/
        border-bottom: none; 
        
        /* 添加一个清晰的背景色 */
        background-color: #fcfcfc; /* 浅灰色背景，用于区分 */
        
        /* 增加卡片间的外边距 */
        margin-bottom: 15px; 
        
        /* 重新设置圆角和边框 */
        border: 1px solid #D6D6D6;
        border-radius: 8px;
        
        /* 调整内边距，使其更美观 */
        padding: 25px 15px 0px 15px; 
    }
    
    /* 确保底部总计的边框不受影响 */
    .order-summary-footer {
        border-top: 2px solid #333;
        padding-top: 20px;
    }
}






/*局部修改*/
.image-gallery img { margin-bottom: 10px;}

.product-info .product-name {
    margin:10px 0px ;
}
.group-info .stars-rating { margin-bottom:10px;}

.product-item .price ins { font-size: 1.5em; color: #5D668F;}

.thumb-inner img { pad/ding: 10px;}

.site-main h1.post-title-about { font-size:36px;text-align: center; color: #7F87AB; font-weight: 700; margin-bottom:20px;}

    @media (max-width: 768px) {
		
		.site-main h1.post-title-about { font-size:26px;}
		
		
		
}

.details-infor .price del { font-size: 20px; color:#827D7D; padding-left: 20px;}

/*修复手机端的产品详情页的选项卡*/

/* ---------------------------------------------------- */
/* 手机端样式优化 (Max-width 767px) */
/* ---------------------------------------------------- */
@media (max-width: 767px) {

    /* 1. 设置 UL 为 Flex 容器 */
    .tab-details-product .tab-link {
        display: flex; /* 启用 Flexbox */
        flex-wrap: nowrap; /* 关键：强制 li 元素不换行 */
        overflow-x: auto;  /* 关键：如果内容超宽，允许横向滚动 */
        justify-content: center; /* 居中排列 Flex 元素 */
        /* 如果您希望左对齐，请使用：justify-content: flex-start; */
        
        /* 移除一些 PC 端的边距，避免溢出 */
        margin-bottom: 20px;
        padding-bottom: 0;
    }

    /* 2. 移除 PC 端为 li 设置的左右间距（通常手机端需要紧凑一些） */
    .tab-details-product .tab-link li {
        /* 移除 PC 端的 padding: 0 30px; 增加手机端空间 */
        padding: 0 15px !important; 
        
        /* 确保 display: inline-block 被 Flexbox 覆盖 */
        display: block; 
        flex-shrink: 0; /* 强制 li 不缩小 */
    }
    
    /* 3. 清理 PC 端设置的 li 边距，确保左右间距一致 */
    .tab-details-product .tab-link li:first-child {
        padding-left: 15px !important; 
    }
    .tab-details-product .tab-link li:last-child {
        padding-right: 15px !important;
    }

    /* 4. 如果选项卡宽度太窄，可以调整字体大小 */
    .tab-details-product .tab-link li a {
        font-size: 13px; /* 稍微缩小字体 */
    }
}


.active h2 {
    font-size: 16px !important;            /* 控制字体大小 */
    color: #333 !important;                 /* 深灰色文字，显高端 */
    border-left: 4px solid #7F87AB !important; /* 左侧加入你的主色调边框线 */
    padding-left: 12px !important;          /* 留出内边距 */
    margin: 30px 0 15px 0 !important;       /* 控制上下间距 */
    text-transform: capitalize !important;  /* 自动首字母大写 */
    font-weight: 600 !important;            /* 中等粗体 */
    letter-spacing: 0.5px !important;       /* 增加字间距，更有呼吸感 */
    display: block !important;
    clear: both !important;
}

/* 1. 提示语容器 */
.product-notice {
    background-color: #f4f5f9 !important; /* 极淡的灰蓝色背景 */
    border-left: 4px solid #7F87AB !important; /* 使用你的主色调 */
    padding: 15px 20px !important;
    margin: 20px 0 30px 0 !important;
    border-radius: 0 4px 4px 0 !important;
}

.product-notice p {
    color: #555 !important; /* 深灰色文字，易读 */
    font-size: 14px !important;
    margin: 0 !important;
    font-st/yle: italic; /* 斜体增加提示感 */
}

.product-notice p span {
    color: #7F87AB !important; /* 重点词使用主色调 */
    font-weight: bold;
}

@media (max-width: 767px) {
	.active h2 
	{
		font-size: 14px !important;
	}
}
/* 顶部的标题和描述 - 沿用之前的 "画廊" 风格 */
.grade-description-section .grade-title {
    font-family: "Garamond", "Playfair Display", serif; /* 奢侈品常用字体 */
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #111 !important;
    letter-spacing: 4px !important;
    margin: 80px 0 15px 0 !important; /* 增加顶部留白 */
    text-align: center;
    text-transform: uppercase;
}

.grade-description-section .grade-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 60px; /* 增加和卡片之间的间距 */
}

.grade-description-section .grade-meta .dot {
    width: 6px;
    height: 6px;
    background-color: #7F87AB; /* 你的主色调 */
    border-radius: 50%;
    flex-shrink: 0;
}

.grade-description-section .grade-meta p {
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}


/* 等级卡片网格布局 */
.grade-meta {
    display: flex;            /* 启用弹性布局 */
    justify-content: center;   /* 水平居中 */
    align-items: center;       /* 垂直居中（确保圆点和文字对齐） */
    gap: 10px;                 /* 圆点和文字之间的间距 */
    margin: 0 auto 40px auto;  /* 整体容器居中，并留出底部间距 */
    text-align: center;        /* 确保多行文本时也能居中 */
}

.grade-meta p {
    margin: 0 !important;      /* 清除 p 标签默认的上下边距 */
    line-height: 1.6;
}

.grades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 响应式布局 */
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto 80px auto; /* 居中并留出底部空间 */
}

.grade-card {
    background-color: #fff;
    border: 1px solid #eee; /* 极细边框 */
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03); /* 轻微阴影 */
}

/* 鼠标悬停效果 */
.grade-card:hover {
    box-shadow: 0 8px 25px rgba(127, 135, 171, 0.2); /* 悬停时，阴影变为主色调系 */
    border-color: #7F87AB; /* 边框变为主色调 */
    transform: translateY(-5px);
}

.grade-card.top-grade {
    border-color: #7F87AB; /* 最高等级卡片边框直接就是主色调 */
    box-shadow: 0 8px 25px rgba(127, 135, 171, 0.2);
}


.grade-icon {
    margin-bottom: 20px;
}

.grade-icon img {
    width: 50px; /* 图标大小 */
    height: 50px;
    object-fit: contain;
}

.grade-card h3 {
    font-size: 18px;
    color: #333;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.grade-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    text-align: left;
}

.grade-card ul li {
    font-size: 13px;
    color: #777;
    margin-bottom: 8px;
    line-height: 1.5;
}

.grade-card ul li span {
    font-weight: 600;
    color: #555;
}

/* 手机端适配 */
@media (max-width: 768px) {
    .grades-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
}

.showge,.showge a,.showge a:hover {
	padding-left: 20px;
	color: #7F87AB;
	text-decoration: underline;
	text-decoration-thickness: 1px;
}


.az-wrapper {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 5px 12px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #eee;
    color: #999;
    text-decoration: none;
    transition: all 0.3s;
}

/* 激活状态：使用你的主色调 */
.filter-btn.active, .filter-btn:hover {
    background-color: #7F87AB;
    color: #fff;
    border-color: #7F87AB;
}

.brand-footer-seo {
    background-color: #fafafa; /* 极浅的灰色背景，与白色主体区分 */
    padding: 30px 10px;
    margin-top: 30px;
    border-top: 1px solid #eee;
}

.seo-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.brand-footer-seo h2 {
    font-family: "Garamond", "Playfair Display", serif;
    font-size: 24px !important;
    color: #333 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
    margin-bottom: 20px !important;
}

.seo-divider {
    width: 50px;
    height: 2px;
    background-color: #7F87AB; /* 你的主色调 */
    margin: 0 auto 30px auto;
}

.seo-content p {
    font-size: 15px !important;
    color: #666 !important;
    line-height: 1.8 !important;
    margin-bottom: 20px !important;
    text-align: justify; /* 两端对齐，显整齐 */
}

/* 强调关键词 */
.seo-content strong {
    color: #333;
    font-weight: 600;
}

/* 手机端适配 */
@media (max-width: 768px) {
    .brand-footer-seo {
        padding: 30px 5px;
    }
    .brand-footer-seo h2 {
        font-size: 20px !important;
    }
}


.blog-intro {
    max-width: 800px;
    margin: 0 auto 50px auto; /* 居中并留白 */
    text-align: center;
}

.blog-intro p {
    font-size: 14px;
    line-height: 1.8;
    color: #999; /* 使用浅灰色，降低视觉重量 */
    letter-spacing: 0.5px;
    font-style: italic; /* 斜体增加文学感 */
    border-top: 1px solid #eee;
    padding-top: 20px;
}



/* 容器样式 */
.related-posts-section {
    margin: 60px 0;
    padding-top: 40px;
    border-top: 1px solid #f0f0f0;
}

/* 标题区域 */
.related-header {
    text-align: center;
    margin-bottom: 40px;
}

.related-subtitle {
    color: #7F87AB;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 10px;
}

.related-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: #333;
    margin: 0;
}

.related-line {
    width: 40px;
    height: 2px;
    background-color: #7F87AB;
    margin: 15px auto 0;
}

/* 网格布局 */
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* 卡片样式 */
.related-card {
    transition: transform 0.3s ease;
}

.related-link {
    text-decoration: none;
    display: block;
}

.related-thumb {
    width: 100%;
    aspect-ratio: 16 / 10; /* 统一图片比例 */
    overflow: hidden;
    background-color: #f9f9f9;
    margin-bottom: 15px;
}

.related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* 悬停图片放大效果 */
.related-card:hover img {
    transform: scale(1.08);
}

.related-info time {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.related-info h4 {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    font-weight: 500;
    /* 标题最多显示两行，超出省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-card:hover h4 {
    color: #7F87AB; /* 悬停标题变色 */
}

/* 手机端适配：改为单栏 */
@media (max-width: 768px) {
    .related-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}


/* 容器边距与顶部线条 */
.related-insights-area {
    margin-top: 80px;
    padding-top: 50px;
    border-top: 1px solid #f2f2f2;
    font-family: 'Playfair Display', serif; /* 奢侈品风格字体建议 */
}

/* 标题区域样式 */
.related-heading {
    text-align: center;
    margin-bottom: 50px;
}

.related-label {
    color: #7F87AB;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.related-heading h3 {
    font-size: 26px;
    font-weight: 400;
    color: #222;
    margin: 0;
}

.heading-line {
    width: 35px;
    height: 1px;
    background: #7F87AB;
    margin: 20px auto 0;
}

/* 网格布局 */
.related-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

/* 卡片细节 */
.related-item-card a {
    text-decoration: none;
    display: block;
}

.thumb-box {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f9f9f9;
    margin-bottom: 20px;
}

.thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.related-item-card:hover img {
    transform: scale(1.06);
}

.info-box time {
    font-size: 10px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 8px;
}

.info-box h4 {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    font-weight: 500;
    margin: 0;
    /* 标题超长处理 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-item-card:hover h4 {
    color: #7F87AB;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .related-grid-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }
}

.cleric-blog-item .post-thumb img { max-width: 230px;}




/* 品牌区域外层容器 */
.brand-section-container {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* 网格布局调整：PC端改为 5 列 */
.brand-grid-standard {
    display: grid !important;
    /* 核心修改：repeat(5, 1fr) 确保一行平分5个 */
    grid-template-columns: repeat(5, 1fr) !important; 
    gap: 20px !important; 
}

.brand-item-card {
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-radius: 12px !important;
    padding: 22px 15px !important; 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 230px !important; /* 统一卡片高度 */
}

.brand-item-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(127, 135, 171, 0.18) !important;
    border-color: #7F87AB !important;
}

/* 品牌标题：处理长名称 */
.brand-title {
    font-size: 15px !important; 
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 0 6px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.3 !important;
    width: 100% !important;
}

/* 商品数量：居中显示 */
.product-qty {
    display: block !important;
    width: 100% !important;
    font-size: 12px !important;
    color: #999 !important;
    text-align: center !important;
    margin: 0 0 15px 0 !important;
}

/* 按钮：保留主色调与动效 */
.brand-action-btn {
    margin-top: auto !important; 
    width: 100% !important;
    max-width: 110px !important;
    height: 36px !important;
    background-color: #7F87AB !important; /* 你的主色调 */
    color: #ffffff !important;           
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; 
    border: none !important;
    position: relative !important;
    top: 0 !important;
}

.brand-item-card:hover .brand-action-btn {
    background-color: #666e94 !important;
    top: -3px !important;
    box-shadow: 0 5px 10px rgba(127, 135, 171, 0.3) !important;
}

/* --- 响应式适配 --- */

/* 平板端：一行 3 个 */
@media (max-width: 1100px) {
    .brand-grid-standard { grid-template-columns: repeat(3, 1fr) !important; }
}

/* 手机端：一行 2 个 */
@media (max-width: 600px) {
    .brand-grid-standard { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .brand-item-card { padding: 15px 10px !important; min-height: 200px !important; }
    .brand-title { font-size: 13px !important; }
}


@media screen and (max-width: 768px) {
	.slider-infor {
		background: rgba(0, 0, 0, 0.2);
		padding: 15px !important;
		width: 100% !important;
		height: 100% !important;
		left: 5% !important;
		bottom: 20px !important;
	}
	.slider-infor h1.title-small {
		font-size: 16px !important;
		text-shad/ow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	}
	.slider-infor h2.title-big {
		font-size: 16px !important;
		color: #ffffff !important;
		text-sha/dow: 2px 2px 4px rgba(0, 0, 0, 1);
	}
	.slider-infor h3.title-big2,.slider-infor h3.title-big,.slider-infor .price {
		font-size: 16px !important;
		color:#FFFCFC;
		text-s/hadow: 2px 2px 4px rgba(0, 0, 0, 1);
	}
	.slider-infor a.button
	{
		font-size: 16px !important;
		color:#FFFCFC !important;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
	}
}



.whatsapp-btn {
    background-color:#57A462;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s;
}
.whatsapp-btn:hover {
    background-color: #128C7E;
}


/* ======================================================
   2025 新版：CSS Grid 微网格瀑布流 (覆盖 style.css)
   ====================================================== */

/* 1. 容器设置：开启网格模式 */
.list-products {
    display: grid !important;
    /* PC端：强制 4 列 */
    grid-template-columns: repeat(4, 1fr) !important; 
    /* 核心：将行高设为非常细小的 10px，这是实现瀑布流的关键 */
    grid-auto-rows: 10px !important; 
    /* 开启密集填充模式，自动填补空隙 */
    grid-auto-flow: row dense !important; 
    gap: 0 20px !important; /* 只有左右有 20px 间距，上下由格子数控制 */
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
}

/* 2. 产品项目：禁止浮动，高度自适应 */
.product-item {
    float: none !important;
    width: 100% !important;
    margin: 0 0 20px 0 !important; /* 每个产品底部留 20px 间距 */
    padding: 0 !important;
    background: #fff;
    border: 1px solid #f0f0f0;
    display: flex !important;
    flex-direction: column;
    /* 这一行不要动，PHP 会在 HTML 里通过 style 动态改变它的 span 值 */
}

/* 3. 图片容器：保持比例 */
.img-wrapper {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #f7f7f7;
}

.img-wrapper img {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 4. 信息区：确保文字不撑开额外空间 */
.product-info {
    padding: 10px !important;
    flex: 1;
}

.product-name {
    font-size: 14px !important;
    line-height: 1.3 !important;
    height: 36px !important; /* 统一两行标题高度 */
    overflow: hidden !important;
    margin-bottom: 5px !important;
}

/* 5. 手机端适配 (Max 768px) */
@media (max-width: 768px) {
    .list-products {
        grid-template-columns: repeat(2, 1fr) !important; /* 手机 2 列 */
        grid-auto-rows: 8px !important; /* 手机格子更细一些 */
        gap: 0 10px !important;
    }
}


/* ======================================================
   完美瀑布流样式表 - 2025 NEW VERSION
   ====================================================== */

/* 1. 容器：彻底放弃 float，启用微网格 */
.list-products_new {
    display: grid !important;
    /* PC端默认 4 列 */
    grid-template-columns: repeat(4, 1fr) !important;
    /* 关键：行高设为 1px，实现像素级瀑布流 */
    grid-auto-rows: 1px !important;
    grid-auto-flow: row dense !important;
    gap: 0 20px !important; /* 只有左右间距 20px */
    padding: 0 !important;
    margin: 30px 0 !important;
    list-style: none !important;
}

/* 2. 单个产品块 */
.product-item_new {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block !important;
    height: fit-content !important; /* 必须让高度由内容决定 */
}

.product-item_new:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* 3. 图片展示区 */
.img-wrapper_new {
    position: relative;
    width: 100%;
    background-color: #f7f7f7;
    overflow: hidden;
}

.img-wrapper_new img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 4. 信息排版区 */
.product-info_new {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.product-name_new {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    height: 40px; /* 固定两行高度，保持整齐 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-name_new a {
    color: #333;
    text-decoration: none;
}

/* 5. 星级和价格 */
.stars-rating_new {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #999;
}

.star-rating_new {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 12px;
    background: url('/images/stars-gray.png') repeat-x; /* 请确保路径正确或使用字体图标 */
    background-size: contain;
}

.price_new ins {
    font-size: 18px;
    color: #7F87AB;
    font-weight: bold;
    text-decoration: none;
    margin-right: 8px;
}

.price_new del {
    font-size: 13px;
    color: #bbb;
}


/* ======================================================
   完美瀑布流：CSS Columns 方案 (无错位、无大空白)
   ====================================================== */

/* 1. 容器：设置分列 */
.waterfall-container_new {
    width: 100%;
    margin: 20px auto;
    /* PC端：4列 */
    column-count: 4; 
    /* 列间距 */
    column-gap: 20px; 
}

/* 2. 单个项目卡片 */
.waterfall-item_new {
    /* 关键：防止卡片被从中间切断分到两列 */
    break-inside: avoid; 
    margin-bottom: 20px;
    width: 100%;
}

.product-card_new {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-card_new:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* 3. 图片区域 */
.card-thumb_new {
    width: 100%;
    background-color: #f8f8f8; /* 基础底色 */
    position: relative;
    overflow: hidden;
	display: block; /* 确保是块级元素 */
}

/* --- 2. 呼吸占位层：使用 ::before 独立出来 --- */
/* 这样动画只在背景层运行，不会影响上面的图片 */
.card-thumb_new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
	
    width: 100%;
    height: 100%;
    background-image: url('/images/logo_f.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
	background-size: 48px 47px !important;
    z-index: 1;
    /* 动画只绑定在这里 */
    animation: logoBreath 2s infinite ease-in-out;
	display: block !important;
}

/* 呼吸动画：只改变这个占位层的透明度 */
@keyframes logoBreath {
    0% { opacity: 0.2; }
    50% { opacity: 0.8; }
    100% { opacity: 0.2; }
}
.card-thumb_new img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    
    /* 彻底禁止滤镜和人为锐化 */
    filter: none !important;
    -webkit-filter: none !important;
    
    /* 强制浏览器使用高质量平滑插值算法 */
    image-rendering: auto !important;
    
    /* 只有平滑的缩放过渡，不涉及像素计算 */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    
    background-color: transparent !important;
}

/* 图片聚焦缩放效果 */
.product-card_new:hover .card-thumb_new img {
    transform: scale(1.08);
}

.product-card_new:hover .card-thumb_new img {
    transform: scale(1.08); /* 轻微放大 */
}
/* 4. 文字信息区域 */
.card-info_new {
    padding: 12px;
}

.card-title_new {
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 10px 0;
    height: 40px; /* 固定两行高度，保持美观 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-title_new a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.card-title_new a:hover {
    color: #7F87AB !important; /* 悬停变为网站主色调 */
}

.card-meta_new {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-price_new {
    color: #7F87AB;
    font-weight: bold;
    font-size: 16px;
}

.card-tag_new {
    font-size: 11px;
    background: rgba(127, 135, 171, 0.1); /* 主色调的极浅背景 */
    padding: 3px 8px;
    border-radius: 10px;
    color: #7F87AB; /* 主色调文字 */
    display: flex;
    align-items: center;
    gap: 4px;
}

.stars_icon {
    color: #FFB800; /* 星星使用标准的金色/黄色，更醒目 */
    letter-spacing: -1px;
    font-size: 12px;
}
/* ======================================================
   手机端自适应 (Max 768px)
   ====================================================== */
@media (max-width: 768px) {
    .waterfall-container_new {
        column-count: 2; /* 手机端强制2列 */
        column-gap: 10px;
        padding: 10px;
    }
    
    .waterfall-item_new {
        margin-bottom: 10px;
    }

    .card-title_new {
        font-size: 13px;
        height: 36px;
    }
	
	.stars_icon {
    display: none;
}}

@media (max-width: 768px) {
    .content-blog { padding:10px;}
}

/* 1. 总容器 */
.filter-options-grid.custom-layout {
    display: block !important; /* 改回 block，让子盒子能垂直堆叠 */
    padding: 10px !important;
    text-align: left !important;
}

/* 2. 小组容器：核心改动点 */
.filter-group {
    width: 100% !important;     /* 强制占满整行，下一个组自动换行 */
    display: flex !important;
    flex-wrap: wrap !important;  /* 组内成员多时允许自动换行 */
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px;                    /* 按钮之间的间距 */
    margin-bottom: 15px !important; /* 每组分类之间的行间距 */
    padding-bottom: 5px;
}

/* 3. 一级分类按钮 (组长) */
.filter-parent-tag {
    display: inline-block !important;
    padding: 5px 10px !important;
    background-color: #f0f2f7 !important;
    border: 1px solid #7F87AB !important;
    border-left: 4px solid #7F87AB !important; /* 加粗左边框，视觉更清晰 */
    border-radius: 4px !important;
    color: #333 !important;
    font-weight: bold !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

/* 4. 二级分类链接容器 */
.filter-link {
    text-decoration: none !important;
}

/* 5. 二级分类按钮 (组员) */
.filter-option {
    display: inline-block !important;
    padding: 5px 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #666 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

/* 选中状态 */
.filter-option.selected {
    background-color: #7F87AB !important;
    color: #fff !important;
    border-color: #7F87AB !important;
}

/* 专门针对手机端 (屏幕宽度小于 768px) 的优化 */
@media (max-width: 768px) {
    /* 1. 减小每组分类之间的上下间距 */
    .filter-group {
        margin-bottom: 5px !important;
        gap: 6px !important; /* 标签之间的左右间距缩小 */
    }

    /* 2. 缩小“一级分类”标签的大小 */
    .filter-parent-tag {
        padding: 4px 8px !important; /* 减小内边距 */
        font-size: 12px !important;   /* 缩小字体 */
        border-left-width: 3px !important; /* 稍微减薄左边框 */
    }

    /* 3. 缩小“二级分类”标签的大小 */
    .filter-option {
        padding: 4px 8px !important; /* 减小内边距 */
        font-size: 12px !important;   /* 缩小字体 */
    }

    /* 4. 调整弹出框 (Popover) 的内边距，让内容更靠边，利用更多宽度 */
    .filter-content {
        padding: 10px 5px !important;
    }

    /* 5. 确保链接容器没有多余的边距 */
    .filter-link {
        margin: 0 !important;
    }
}



/* ======================================================
   移动端 Header 像素级协调版 (线框统一风格)
   ====================================================== */

/* 1. 基础容器重置 */
.header-device-mobile {
    display: block !important;
    background: #fff !important;
    height: 64px !important; /* 整体略微加高 */
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #eee !important;
    position: relative !important;
    z-index: 99999 !important;
}

.m-header-main {
    display: flex !important;
    align-items: center !important;
    height: 64px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
}

/* 2. Logo 垂直对齐 */
.m-header-col-left {
    flex: 0 0 45px !important;
}
.m-header-logo {
    width: 38px !important;
    height: auto !important;
    display: block !important;
}

/* 3. 搜索框：加高并精修 */
.m-header-col-center {
    flex: 1 !important;
    margin: 0 8px !important;
}
.m-search-pill {
    display: flex !important;
    align-items: center !important;
    background: #f8f8f8 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important; /* 改为微圆角，与三条杠框对齐 */
    height: 40px !important; /* 搜索框加高 */
    padding: 0 10px !important;
    box-sizing: border-box !important;
}
.m-search-pill input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    height: 100% !important;
    font-size: 16px !important; /* 关键：防缩放 */
    color: #333 !important;
    outline: none !important;
    padding: 0 !important;
    line-height: normal !important;
}

/* 4. 放大镜：强制取消旧样式背景 */
.m-search-icon-btn {
    background: none !important; /* 彻底杀掉那个蓝背景 */
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 0 5px !important;
    margin: 0 !important;
    color: #666 !important;
    font-size: 18px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

/* 5. 三条杠：带框设计，与搜索框高度一致 */
.m-header-col-right {
    flex: 0 0 40px !important;
}
.m-header-trigger-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important; /* 与搜索框同高 */
    border: 1px solid #ddd !important; /* 添加边框 */
    border-radius: 4px !important;
    text-decoration: none !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

.m-nav-icon {
    width: 22px !important;
    height: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}
.m-nav-icon span {
    display: block !important;
    width: 100% !important;
    height: 2.5px !important; /* 线条微调，更精致 */
    background-color: #444 !important;
    border-radius: 1px !important;
}

/* 彻底清理旧的 table/padding 干扰 */
.header-device-mobile .wapper, 
.header-device-mobile .item,
.mobile-search-box, 
.menu-bar {
    display: none !important;
}

/* --- 底部 SEO 区块样式 --- */
.m-footer-seo {
    background-color: #fcfcfc !important; /* 浅灰色背景，显得干净专业 */
    padding: 50px 20px !important;
    border-top: 1px solid #eee !important;
    text-align: center !important;
    margin-top: 40px !important;
}

.m-seo-inner {
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* H1 样式：保留 SEO 权重，视觉上保持优雅 */
.m-seo-title {
    font-size: 18px !important; /* 不宜过大，18px 刚好 */
    color: #333 !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    letter-spacing: 1px !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
}

/* 段落排版 */
.m-seo-text p {
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: #666 !important;
    margin-bottom: 15px !important;
    text-align: center !important; /* 底部居中对齐更有仪式感 */
}

/* 重点词汇美化 */
.m-seo-text strong {
    color: #222 !important;
    font-weight: 600 !important;
}

.m-seo-text span {
    color: #444 !important;
    background: #f0f0f0 !important;
    padding: 1px 4px !important;
    border-radius: 2px !important;
}

/* 装饰性底线 */
.m-seo-tagline {
    font-size: 12px !important;
    color: #bbb !important;
    margin-top: 30px !important;
    padding-top: 20px !important;
    border-top: 1px dashed #ddd !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

/* --- 通用卡片容器 --- */
.blog-item-new {
    background: #fff;
    margin-bottom: 25px;
    transition: transform 0.3s ease;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
}

.blog-item-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.blog-card-flex {
    display: flex;
    flex-direction: column; /* 默认（PC）上下排列 */
    text-decoration: none !important;
}

/* --- PC端样式 (大屏幕) --- */
@media (min-width: 992px) {
    .post-format-new {
        width: 100%;
        height: 240px;
        overflow: hidden;
    }
    .post-format-new img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .post-info-new {
        padding: 20px;
    }
    .post-title-new {
        font-size: 18px;
        font-weight: 700;
        color: #222;
        margin-bottom: 12px;
        height: 50px; /* 保持标题高度一致，对齐整齐 */
        overflow: hidden;
    }
}

/* --- 手机端样式 (核心优化) --- */
@media (max-width: 767px) {
    .blog-item-new {
        margin-bottom: 15px;
        border: none;
        border-bottom: 1px solid #eee;
        border-radius: 0;
    }
    
    .blog-card-flex {
        flex-direction: row !important; /* 强制手机端左右排列 */
        padding: 10px 0;
        align-items: center;
    }

    .post-format-new {
        flex: 0 0 110px !important; /* 图片固定宽度 */
        height: 110px !important;
        border-radius: 6px;
        margin-right: 12px;
    }
    
    .post-info-new {
        flex: 1;
        padding: 0 !important;
    }

    .post-title-new {
        font-size: 15px !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
        color: #333;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .des-new {
        font-size: 12px !important;
        color: #888;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* 手机端只显示一行描述 */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .author-view-new {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        color: #bbb;
    }
}

/* 统一图标颜色 */
.meta-right i {
    margin-right: 3px;
    color: #ccc;
}


/* --- 极简翻页样式 --- */
.m-article-pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    border-top: 1px solid #eee !important;
    margin-top: 40px !important;
    background: #fff !important;
}

.m-pag-item {
    flex: 1 !important;
    min-width: 50% !important; /* PC端并排 */
    padding: 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* 手机端自动切换为上下排列 */
@media (max-width: 767px) {
    .m-pag-item {
        min-width: 100% !important;
        padding: 15px !important;
    }
    .m-pag-prev {
        border-bottom: 1px solid #eee !important;
    }
    .m-pag-next {
        text-align: right !important; /* 手机端下一篇居右 */
    }
}

/* PC端中间的分隔线 */
@media (min-width: 768px) {
    .m-pag-prev {
        border-right: 1px solid #eee !important;
    }
}

/* 小标题：PREVIOUS / NEXT */
.m-pag-label {
    display: block !important;
    font-size: 11px !important;
    color: #999 !important;
    letter-spacing: 1px !important;
    margin-bottom: 5px !important;
    font-weight: bold !important;
}

/* 链接文字美化 */
.m-pag-link a {
    font-size: 14px !important;
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    transition: color 0.2s !important;
}

.m-pag-link a:hover {
    color: #7F87AB !important; /* 悬停颜色改为你的主色调 */
}

/* 如果没有链接时的提示 */
.m-pag-link {
    color: #ccc !important;
    font-size: 14px !important;
}

/* 当屏幕宽度大于 992px (即 PC 端) 时，隐藏移动端专用的 Header */
@media (min-width: 992px) {
    .header-device-mobile {
        display: none !important;
    }
}


/* --- 基础容器 --- */
.shoppingcart-content { background: #fff; border-radius: 8px; margin: 20px 0; font-family: sans-serif; }
.pc-only { display: flex; }

/* --- PC端表头 --- */
.cart-header-row { padding: 15px 20px; background: #f8f8f8; border-bottom: 1px solid #eee; font-weight: bold; color: #666; font-size: 13px; }
.cart-header-row div { flex: 1; text-align: center; }
.cart-header-row .ch-name { flex: 2; text-align: left; }
.cart-header-row .ch-product { flex: 0 0 100px; }
.cart-header-row .ch-remove { flex: 0 0 50px; }

/* --- 列表行 --- */
.cart-item-card { display: flex; padding: 25px 20px; border-bottom: 1px solid #f2f2f2; position: relative; align-items: center; }

/* 图片: 解决手机端过大 */
.item-thumb { flex: 0 0 100px; height: 100px; border: 1px solid #eee; border-radius: 4px; overflow: hidden; margin-right: 20px; }
.item-thumb img { width: 100%; height: 100%; object-fit: cover; }

.item-info-wrap { flex: 1; display: flex; align-items: center; width: 100%; }
.item-name { flex: 2; padding-right: 15px; }
.item-name a { color: #333; font-weight: 500; text-decoration: none; font-size: 15px; transition: 0.2s; }
.item-name a:hover { color: #7F87AB; }

.item-details-row { flex: 3; display: flex; align-items: center; width: 100%; }
.item-price, .item-qty, .item-subtotal { flex: 1; text-align: center; }
.item-subtotal { font-weight: bold; color: #000; font-size: 16px; }

/* --- 核心：纯 CSS 数量控制器 --- */
.qty-control { 
    display: inline-flex; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    height: 34px; 
    background: #fff;
    overflow: hidden;
    margin: 0 auto; /* 居中关键 */
}
.q-btn { 
    width: 34px; 
    height: 100%; 
    background: #fdfdfd; 
    border: none; 
    cursor: pointer; 
    position: relative; 
    padding: 0;
}
.q-btn:hover { background: #f0f0f0; }

/* 绘制减号 */
.btn-minus::after {
    content: ""; position: absolute; width: 12px; height: 2px; background: #555; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
/* 绘制加号 */
.btn-plus::after, .btn-plus::before {
    content: ""; position: absolute; background: #555; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.btn-plus::after { width: 12px; height: 2px; }
.btn-plus::before { width: 2px; height: 12px; }

.qty-control input { 
    width: 45px; border: none; border-left: 1px solid #ccc; border-right: 1px solid #ccc; 
    text-align: center; font-size: 14px; font-weight: bold; background: #fff;
    -moz-appearance: textfield;
}
.qty-control input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* --- 纯 CSS 删除图标 --- */
.item-remove { position: absolute; right: 20px; cursor: pointer; padding: 10px; opacity: 0.3; transition: 0.3s; }
.item-remove:hover { opacity: 1; color: #ff0000; }
.css-close-icon { position: relative; display: inline-block; width: 16px; height: 16px; }
.css-close-icon::before, .css-close-icon::after {
    content: ''; position: absolute; height: 2px; width: 100%; top: 50%; left: 0; background: currentColor; transform: rotate(45deg);
}
.css-close-icon::after { transform: rotate(-45deg); }

/* --- 底部结算 --- */
.cart-footer-bar { padding: 30px 20px; display: flex; justify-content: flex-end; align-items: center; border-top: 2px solid #f5f5f5; }
.total-section { margin-right: 30px; }
.total-section .lbl { color: #888; font-size: 14px; margin-right: 10px; }
.total-section .val { font-size: 26px; font-weight: 800; color: #d0021b; }
/* 修改 WhatsApp 按钮为深沉墨绿色 */
.btn-whatsapp {
    background: #075E54 !important; /* WhatsApp 的官方深色调 */
    color: #ffffff !important;
    border-radius: 4px !important; /* 也可以改成 4px 的微圆角，比之前的胶囊形更显专业 */
    border: none !important;
    padding: 12px 25px !important;
    font-weight: 600 !important;
    transition: 0.3s !important;
}

/* 悬停时稍微亮一点点，增加点击感 */
.btn-whatsapp:hover {
    background: #128C7E !important; 
    box-shadow: 0 4px 12px rgba(7, 94, 84, 0.3) !important;
}
/* --- 手机端适配 --- */
@media (max-width: 767px) {
    .pc-only { display: none !important; }
    .cart-item-card { padding: 15px; align-items: flex-start; }
    .item-thumb { flex: 0 0 85px; height: 85px; margin-right: 15px; }
    .item-info-wrap { flex-direction: column; align-items: flex-start; }
    .item-name { margin-bottom: 10px; width: 100%; padding-right: 30px; }
    .item-details-row { flex-direction: row; justify-content: space-between; align-items: center; }
    .item-price { text-align: left; font-weight: bold; color: #333; flex: 0 0 auto; }
    .item-qty { flex: 0 0 auto; text-align: right; }
    .item-remove { top: 10px; right: 5px; }
    .item-details-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        /* 添加下面这一行，给价格和加号之间拉开距离 */
        gap: 15px !important; 
    }
}

@media (max-width: 767px) {
    /* 1. 更加精确的选择器，强制覆盖内层容器的背景图 */
    .slider-item.style1, 
    .slider-item.style1 .slider-inner,
    .slider-item.style1 .equal-element { 
        background-image: url('/images/slider-thumb-m1.jpg') !important; 
    }

    .slider-item.style2, 
    .slider-item.style2 .slider-inner,
    .slider-item.style2 .equal-element { 
        background-image: url('/images/slider-thumb-m2.jpg') !important; 
    }

    .slider-item.style3, 
    .slider-item.style3 .slider-inner,
    .slider-item.style3 .equal-element { 
        background-image: url('/images/slider-thumb-m3.jpg') !important; 
    }

    /* 2. 同时缩小手机端字体 (解决你之前说的字体不生效问题) */
    .slider-item .slider-infor .title-small {
        font-size: 16px !important;
        color:#7f87ab !important;
        margin-bottom: 5px !important;
    }
    
    .slider-item .slider-infor .title-big {
        font-size: 14px !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }

    /* 缩小按钮 */
    .slider-item .slider-infor .button {
        font-size: 12px !important;
        padding: 8px 15px !important;
        height: auto !important;
    }
}