/* =================================================================
   1. 核心布局：瀑布流 (Masonry Layout) - 修正版
   ================================================================= */

/* 默认基础设置 */
.st_masonry_list {
    column-gap: 5px;
    padding: 10px 0;
    
    /* 关键属性：防止卡片在列之间被切断 */
    orphans: 1;
    widows: 1;
}

/* --- 响应式断点控制 (精确控制列数) --- */

/* 1. 超大屏幕 (> 1440px)：强制 4 列 */
@media (min-width: 1440px) {
    .st_masonry_list {
        column-count: 4;
    }
}

/* 2. 桌面/笔记本 (1200px - 1440px)：保持 3 列 */
@media (min-width: 992px) and (max-width: 1439.98px) {
    .st_masonry_list {
        column-count: 3;
    }
}

/* 3. 平板 (768px - 992px)：保持 2 列 */
@media (min-width: 576px) and (max-width: 991.98px) {
    .st_masonry_list {
        column-count: 2;
    }
}

/* 4. 手机 (< 576px)：强制 1 列 */
@media (max-width: 575.98px) {
    .st_masonry_list {
        column-count: 1;
    }
}

/* =================================================================
   2. 卡片样式 (Card Style - 调整为贴边布局)
   ================================================================= */
.st_masonry_item {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    
    /* [核心修改] 去掉卡片整体内边距，让图片能贴边 */
    padding: 0 !important; 
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    box-sizing: border-box;
    vertical-align: top;
    overflow: hidden; /* 确保图片圆角跟随卡片 */
}

/* =================================================================
   3. 图片样式 (Single Image - Full Width)
   ================================================================= */

/* 图片容器：去掉下边距，紧贴头部信息 */
.st_masonry_item .pcomment_image_container {
    width: 100%;
    margin-bottom: 0 !important; /* 图片和下方文字不需要额外间距，由下方文字的padding控制 */
}

/* 链接设置 */
.st_masonry_item .pcomment_image_container a.st_popup_image {
    position: relative; 
    display: block; 
}

/* 主图设置：满宽显示，只有顶部有圆角 */
.st_masonry_item .pcomment_main_img {
    display: block;
    width: 100%;
    height: auto !important; 
    object-fit: contain !important; 
    
    /* [修改] 只有左上和右上圆角，底部直角 */
    border-radius: 8px 8px 0 0 !important; 
    
    cursor: zoom-in;
    margin: 0; /* 去掉任何默认边距 */
}

/* 右上角计数角标 */
.st_masonry_item .pcomment_more_badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
    display: flex;
    align-items: center;
    line-height: 1;
    pointer-events: none;
}
.st_masonry_item .pcomment_more_badge i {
    margin-right: 4px;
    font-size: 13px;
}

.st_masonry_item .display_none {
    display: none !important;
}

/* =================================================================
   4. 头部信息：作者/Verified/日期/星星 (需要加 padding)
   ================================================================= */
.st_masonry_item .pcomment_header {
    display: flex;
    flex-direction: column;
    
    /* [新增] 因为卡片没了内边距，这里需要补上 */
    padding: 15px 15px 5px 15px; 
}

.st_masonry_item .pcomment_author_row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.st_masonry_item .author_name {
    font-weight: bold;
    font-size: 1.1em;
    color: #000;
    margin-right: 8px;
}
.st_masonry_item .verified_badge {
    font-size: 0.85em;
    color: #333;
    display: flex;
    align-items: center;
}
.st_masonry_item .verified_badge i {
    color: #000;
    font-size: 1em;
    margin-right: 4px;
}
.st_masonry_item .date-add {
    font-size: 0.85em;
    color: #888;
    margin-bottom: 6px;
}
.st_masonry_item .star_row .rating_box {
    margin: 0;
    font-size: 14px;
}
.st_masonry_item .star_row .rating_box .icon_rating {
    color: #ffb300;
}

/* =================================================================
   5. 评论内容 (需要加 padding)
   ================================================================= */
.st_masonry_item .pcomment_body {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 15px;
    
    /* [新增] 文字左右内边距 */
    padding: 0 15px; 
}

/* 标签区 (如果有) */
.st_masonry_item .tags_block {
    padding: 0 15px 15px 15px;
}

/* =================================================================
   6. 底部产品链接 (Product Footer - 样式优化)
   ================================================================= */
.st_masonry_item .pcomment_product_name {
    display: flex;
    align-items: center;
    margin-top: 10px;
    border-top: 1px solid #f5f5f5;
    font-size: 0.85rem;
    color: #777;
    text-decoration: none;
    
    /* [修改] 内边距调整，让分割线满宽，内容内缩 */
    padding: 12px 15px; 
}

.st_masonry_item .pcomment_product_name span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.st_masonry_item .pcomment_product_name img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
    vertical-align: middle;
    border: 1px solid #eee;
    flex-shrink: 0;
}

/* =================================================================
   7. 弹窗大图修复
   ================================================================= */
img.mfp-img {
    max-height: 90vh !important;
    max-width: 90vw !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto;
}
@media (max-width: 768px) {
    img.mfp-img {
        max-height: 85vh !important;
        max-width: 95vw !important;
        padding: 0 !important;
    }
    .mfp-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* =================================================================
   8. [新增] 头部 (Header) 样式 - Flexbox & 圆角卡片设计
   ================================================================= */
.pc_flex_wrapper {
    display: flex;
    flex-wrap: wrap;        /* 空间不足时自动换行 */
    align-items: center;    /* 垂直居中 */
    justify-content: space-between; /* 两端对齐 */
    
    background-color: #eeeeee;
    border: 1px solid #dbdbdb;
    
    /* 仅左上和右上设置圆角 (配合下方的 Filter 形成完整卡片) */
    border-radius: 5px 5px 0 0;
    
    padding: 15px 20px;
    gap: 20px; /* 容器之间的间距 */
}

/* 左侧区块 (评分/按钮) */
.pc_header_left_col {
    display: flex;
    align-items: center;
    
    /* 宽度限制在 300-400px 之间 */
    flex: 1 1 300px;
    min-width: 300px;
    max-width: 400px;
    
    justify-content: flex-start; 
    box-sizing: border-box;
}

/* 右侧区块 (进度条容器) */
.pcomments_score {
    /* 宽度限制在 300-400px 之间 */
    flex: 1 1 300px;
    min-width: 300px;
    max-width: 400px;
    
    /* 内部布局：垂直两行，靠右 */
    display: flex;
    flex-direction: column; 
    align-items: flex-end;  
    justify-content: center;
    gap: 8px; 
}

/* 强制内部 averages 模块占满父容器宽度 */
.pcomments_score > div, 
.pcomments_score .st_product_comment_averages {
    width: 100%;       
}

/* =================================================================
   9. [新增] 过滤栏 (Filter) 样式 - 底部圆角
   ================================================================= */
.pc_filter_wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
    border: 1px solid #dbdbdb;
    background-color: #eeeeee;
    
    /* 仅左下和右下设置圆角 (与 Header 互补) */
    border-radius: 0 0 5px 5px;
}

/* =================================================================
   10. 响应式适配 (Header & Filter)
   ================================================================= */
@media (max-width: 768px) {
    .pc_flex_wrapper {
        justify-content: center; 
        gap: 15px;
    }
    
    .pc_header_left_col {
        justify-content: center; 
    }
    
    .pcomments_score {
        align-items: center;      
    }
    
    /* 极小屏幕适配 */
    @media (max-width: 350px) {
        .pc_header_left_col, .pcomments_score {
            min-width: 100%;
        }
    }
}