.woocommerce-product-rating{
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ========================================================
   2. 评价表单可点击星星（解决只有一颗亮的问题）
   ======================================================== */
/* 隐藏原本的文字，并设置星星基础大小 */
.woocommerce p.stars a {
    position: relative;
    height: 1em;
    width: 1em;
    text-indent: -999em; /* 隐藏文字 */
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
    border-right: 0 !important; /* 去除默认可能出现的边框 */
}

/* 默认状态：空心灰星 */
.woocommerce p.stars a::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    line-height: 1;
    font-family: 'star';
    content: "\73"; /* 空心星代码 */
    color: #d3ced2;
    text-indent: 0;
}

/* --- 鼠标悬停逻辑 --- */
/* 1. 鼠标悬停在星星区域时，所有星星先变成实心黄星 */
.woocommerce p.stars:hover a::before {
    content: "\53";
    color: #ffb900;
}
/* 2. 鼠标悬停的那颗星**后面**的星，恢复为空心灰星 */
.woocommerce p.stars:hover a:hover ~ a::before {
    content: "\73";
    color: #d3ced2;
}

/* --- 点击选中逻辑 --- */
/* 1. 只要用户点击过（父元素有 .selected 类），所有星星先变成实心黄星 */
.woocommerce p.stars.selected a::before {
    content: "\53";
    color: #ffb900;
}
/* 2. 被选中的那颗星（.active）**后面**的星，恢复为空心灰星 */
.woocommerce p.stars.selected a.active ~ a::before {
    content: "\73";
    color: #d3ced2;
}
/* 3. 被选中的那颗星**前面**的星（排除掉 active 的那颗），强制保持实心黄星 */
.woocommerce p.stars.selected a:not(.active)::before {
    content: "\53";
    color: #ffb900;
}

/* ========================================================
   3. 商品页只读展示星级（解决商品详情页星星显示问题）
   ======================================================== */
.woocommerce .star-rating {
    font-family: 'star' !important;
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: 1em;
    width: 5.4em;
}
.woocommerce .star-rating::before {
    content: "\73\73\73\73\73"; /* 五个空心星 */
    color: #d3ced2;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
}
.woocommerce .star-rating span {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;
}
.woocommerce .star-rating span::before {
    content: "\53\53\53\53\53"; /* 五个实心星 */
    color: #ffb900;
    top: 0;
    position: absolute;
    left: 0;
}

/* ========================================================
   1. 评论列表整体布局
   ======================================================== */
.woocommerce-Reviews {
    margin-bottom: 40px;
}

/* 评论总数标题 */
.woocommerce-Reviews-title {
    font-size: 1.25em;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--xe-border-color, #f0f0f0);
    color: var(--xe-fg-color, #333);
}

/* 清除列表默认样式 */
.commentlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 单条评论外间距 */
.commentlist .review {
    margin-bottom: 20px;
}
.commentlist .review:last-child {
    margin-bottom: 0;
}

/* ========================================================
   2. 评论卡片内部 (头像 + 内容)
   ======================================================== */
.comment_container {
    display: flex;
    align-items: flex-start;
    background: #fafafa; /* 极其淡的灰色，让卡片浮起来 */
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--xe-border-color, #f0f0f0);
    transition: box-shadow 0.3s ease;
}
.comment_container:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

/* 头像 */
.comment_container .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 18px;
    flex-shrink: 0;
    border: 1px solid #eee;
    object-fit: cover;
}

/* 右侧文字容器 */
.comment-text {
    flex: 1;
    min-width: 0;
}

/* ========================================================
   3. 元数据 (评分、作者、时间)
   ======================================================== */
/* 星级评分与下方名字保持距离 */
.comment-text .star-rating {
    margin-bottom: 10px;
    float: none; /* 清除可能的浮动 */
}

/* 作者和时间 */
.comment-text .meta {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--xe-muted, #999);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.comment-text .meta .woocommerce-review__author {
    color: var(--xe-fg-color, #333);
    font-weight: 600;
    margin-right: 4px;
    font-size: 15px;
}

.comment-text .meta .woocommerce-review__dash {
    margin: 0 8px;
    color: #ccc;
}

.comment-text .meta .woocommerce-review__published-date {
    color: var(--xe-muted, #999);
    font-size: 13px;
}

/* ========================================================
   4. 评论正文内容
   ======================================================== */
.comment-text .description {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
}

.comment-text .description p {
    margin: 0 0 10px 0;
}
.comment-text .description p:last-child {
    margin-bottom: 0;
}

/* ========================================================
   5. 评论表单区域 (添加评价)
   ======================================================== */
#review_form_wrapper {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px dashed var(--xe-border-color, #ddd);
}

#respond .comment-reply-title {
    font-size: 1.25em;
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
    color: var(--xe-fg-color, #333);
}

/* 文本域美化 */
#review_form_wrapper textarea#comment {
    width: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
    font-size: 15px;
    resize: vertical;
    box-sizing: border-box;
    background: #fff;
    transition: border-color 0.3s;
}
#review_form_wrapper textarea#comment:focus {
    outline: none;
    border-color: var(--xe-main-color, #0EA5E9); /* 主题色 */
    box-shadow: 0 0 0 3px rgba(var(--xe-main-rgb), 0.1);
}

/* 提交按钮美化 */
#review_form_wrapper .form-submit input.submit {
    display: inline-block;
    background-color: var(--xe-main-color, #0EA5E9); /* 直接引用主题色 */
    color: #fff;
    padding: 10px 28px;
    border-radius: 6px;
    border: none;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1.5;
}
#review_form_wrapper .form-submit input.submit:hover {
    background-color: var(--xe-dark-color, #0284c7); /* 主题深色 */
    transform: translateY(-1px);
}

/* ========================================================
   6. 移动端响应式适配
   ======================================================== */
@media (max-width: 600px) {
    .comment_container {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
    }
    .comment_container .avatar {
        margin-right: 0;
        margin-bottom: 12px;
    }
}