/**
 * ANELVIE Reviews —— 前台样式（需求 §20 / §21 / §25 / §28）
 * ============================================================================
 * 品牌气质：美国女士珠宝。要求「轻奢、简洁、留白、高级、真实」。
 * 因此这里**刻意不用**：彩色星星、渐变、投影堆叠、圆角药丸、复杂描边、
 * 任何看起来像"AI 生成的电商模板"的视觉（需求 §21 明确禁止）。
 *
 * 全部颜色走 CSS 变量：日后统一调整只改 :root 一处，不必全文件搜十六进制。
 * 类名一律 `arv-` 前缀（本项目命名空间纪律），**不碰** CusRev 的 `cr-*`
 * 与 WooCommerce 的 `woocommerce-*` —— 唯一的例外见「CusRev 补充」段，
 * 且每一条都写了理由。
 *
 * 作用域：本文件只在 `is_product()` 时被入队（见 class-rv-frontend.php），
 * 所以不需要再加一层页面级包裹选择器。
 * ============================================================================
 */

/* ---------------------------------------------------------------------------
 * 设计令牌
 *
 * 放在 `:root`（而不是散落在各选择器上）是**有原因的**：同特异度的变量声明
 * 一旦散在 `.arv-top-rating`、`.arv-verified-badge` 等多处，后续想统一改色
 * 就必须同时改 N 个地方，且容易出现"某个组件还留着旧金色"的静默不一致。
 * 全部集中在 :root，一处改、全站生效。
 *
 * 变量都用 `--arv-` 前缀，不会被主题或其它插件覆盖。
 * ------------------------------------------------------------------------ */
:root {
	--arv-gold: #b08d57;        /* 香槟金：低调的暖金属色，不是鲜黄 */
	--arv-ink: #1c1c1c;         /* 正文墨色 */
	--arv-muted: #8a8580;       /* 次级信息（暖灰，不用冷灰） */
	--arv-line: #e6e2dc;        /* 极浅分隔线 */
	--arv-bg-soft: #fbfaf8;     /* 暖白，用于徽章底 */
	--arv-font: inherit;        /* 字体跟随主题，避免与 Kadence 的排版打架 */
	--arv-tracking: 0.12em;     /* 小字号大写字母的间距，轻奢感的关键 */
	--arv-star-size: 14px;      /* 星级尺寸的唯一真源，由下面的断点改写 */
}

/* ---------------------------------------------------------------------------
 * §20 商品页顶部评分条
 *
 * 视觉规格（与需求给出的 `★★★★★ 4.8 (126 Reviews)` 对齐）：
 *   星级（单色金）· 平均分（中黑、稍大）· 分隔点 · 「(126 Reviews)」（下划线提示可点）
 * 整条是一个 <a>，点击平滑滚动到 #reviews（JS 见 assets/js/frontend.js）。
 * ------------------------------------------------------------------------ */
.arv-top-rating {
	display: inline-flex;
	flex-wrap: wrap;              /* 窄屏宁可换行，也不横向溢出 */
	align-items: center;
	gap: 4px 8px;
	max-width: 100%;
	margin: 2px 0 14px;
	color: var(--arv-ink);
	font-family: var(--arv-font);
	font-size: 14px;
	line-height: 1.45;
	text-decoration: none;
	background: none;             /* 主题可能给 a 加背景，这里清掉 */
	border: 0;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}

.arv-top-rating:hover,
.arv-top-rating:focus {
	color: var(--arv-ink);
	text-decoration: none;
}

.arv-top-rating:focus-visible {
	outline: 2px solid var(--arv-gold);
	outline-offset: 3px;         /* 键盘可达性：不清除轮廓，只做得体面 */
}

/* 星级容器 */
.arv-top-rating__stars {
	display: inline-flex;
	align-items: center;
	color: var(--arv-gold);
}

.arv-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	line-height: 0;              /* 去掉 SVG 基线下方的空隙，避免评分条高度虚高 */
}

.arv-star {
	display: block;
	width: var(--arv-star-size);
	height: var(--arv-star-size);
	flex: 0 0 auto;              /* 永不被压缩变形 */
}

/* 未点亮的星：底色保留（0.22 由 PHP 内联给出），实心态设为透明 */
.arv-star__fg--off {
	fill: transparent;
}

/* 平均分数字：唯一"稍重"的元素，让它成为视觉落点 */
.arv-top-rating__score {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--arv-ink);
	font-variant-numeric: tabular-nums; /* 数字等宽，评分变化时不跳动 */
}

.arv-top-rating__sep {
	color: var(--arv-line);
}

/* 「(126 Reviews)」：下划线是唯一的可点击暗示，比换色更含蓄 */
.arv-top-rating__count {
	color: var(--arv-ink);
	text-decoration: underline;
	text-decoration-color: var(--arv-line);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.18s ease;
}

.arv-top-rating:hover .arv-top-rating__count,
.arv-top-rating:focus-visible .arv-top-rating__count {
	text-decoration-color: var(--arv-gold);
}

/* 0 条评价态：没有星级、没有数字，只有一句引导 */
.arv-top-rating--empty {
	color: var(--arv-muted);
	font-size: 13px;
	letter-spacing: 0.02em;
}

.arv-top-rating--empty .arv-top-rating__count {
	color: var(--arv-muted);
}

/* ---------------------------------------------------------------------------
 * §10 外部来源 Verified 徽章
 * 低调的**描边**小标签：极浅暖白底 + 1px 金线 + 金色对勾。
 * 不做彩色填充、不做圆角药丸、不加投影 —— 越安静越可信。
 * ------------------------------------------------------------------------ */
.arv-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	margin: 6px 0 0;
	padding: 3px 9px;
	border: 1px solid var(--arv-gold);
	border-radius: 2px;          /* 近乎直角，珠宝品牌的克制感 */
	background: var(--arv-bg-soft);
	color: var(--arv-gold);
	font-family: var(--arv-font);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: var(--arv-tracking);
	text-transform: uppercase;
	overflow-wrap: anywhere;     /* 长文案（Verified Purchase · TikTok Shop）在 375px 能断行 */
}

.arv-verified-badge__mark {
	flex: 0 0 auto;
	font-size: 11px;
	line-height: 1;
}

.arv-verified-badge__text {
	min-width: 0;                /* 允许在 flex 容器内收缩换行 */
}

/* ---------------------------------------------------------------------------
 * §25 Size / Color / Variant 小字
 * 一行暖灰小字，字距略松，和正文拉开层次但不抢注意力。
 * ------------------------------------------------------------------------ */
.arv-review-meta {
	display: block;
	margin: 6px 0 0;
	color: var(--arv-muted);
	font-family: var(--arv-font);
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: 0.02em;
}

.arv-review-meta__item {
	display: inline;
	overflow-wrap: anywhere;     /* 长变体名不撑破容器 */
}

/* 用中点做分隔：比 | 更轻，比逗号更清楚 */
.arv-review-meta__item + .arv-review-meta__item::before {
	content: "\00b7";
	margin: 0 6px;
	color: var(--arv-line);
}

.arv-review-meta__label {
	color: var(--arv-muted);
}

.arv-review-meta__value {
	color: var(--arv-ink);
}

/* ---------------------------------------------------------------------------
 * CusRev 补充（**只补充，不覆盖布局**）
 *
 * 为什么允许这几条：
 *   我们**没有**在这里改 CusRev 的任何尺寸、排列、断点。
 *   只统一"字"，不碰"形" —— 品牌观感必须一致（同一个页面里两种字体族一眼就露），
 *   而字体族是主题级的东西，CusRev 从未对其做硬性假设，改它不会破坏它的结构。
 *   一旦今后需要改它的间距/网格，必须回到"不改第三方"的纪律上重新评估。
 * ------------------------------------------------------------------------ */
.woocommerce-Reviews .cr-comment-head-text {
	font-family: var(--arv-font); /* 与 ANELVIE 正文同族 */
}

.woocommerce-Reviews .cr-review-title {
	letter-spacing: 0.01em;       /* 评价标题与商品标题的字距观感对齐 */
}

/* ---------------------------------------------------------------------------
 * 响应式（需求 §28：375 / 390 / 430 / 768 / 1024 / 1440 px 均不得出现
 * 横向滚动、文字溢出、按钮挤压）
 *
 * 策略：以 `inline-flex` + `flex-wrap` 与「尺寸走 CSS 变量」为基础，
 * 布局本身就是流式的；下面的断点只做**字号、星标尺寸与留白的收敛**，
 * 不做结构切换 —— 结构切换是窄屏出问题的最常见来源。
 *
 * ⚠ 为什么星标尺寸写成 `--arv-star-size` 而不是直接写 width：
 *   `@media (max-width:430px)` 与 `@media (min-width:768px)` 在 768–430px
 *   之间不重叠，但**在 430 与 768 之间的空档里谁都不生效**；
 *   一旦两条断点将来被改到有重叠区间，后写的那条会无条件覆盖前面那条
 *   （媒体查询之间没有优先级，只有源码顺序）。变量只有一个改写点，
 *   永远不会出现"移动端尺寸把桌面端盖掉"这种排序事故。
 *
 * 另外全程没有固定宽度、没有 `white-space: nowrap`、没有负 margin ——
 * 这三样是横向滚动条的三个主要来源，一个都不用。
 * ------------------------------------------------------------------------ */

/* ≤430px：主流手机（375 / 390 / 430 一并覆盖） */
@media (max-width: 430px) {
	:root {
		--arv-star-size: 13px;
	}

	.arv-top-rating {
		gap: 3px 6px;
		margin-bottom: 12px;
		font-size: 13px;
	}

	.arv-top-rating__score {
		font-size: 14px;
	}

	.arv-verified-badge {
		font-size: 10px;
		letter-spacing: 0.1em;
		padding: 3px 8px;
	}

	.arv-review-meta {
		font-size: 11.5px;
	}
}

/* ≤360px：老机型兜底 —— 宁可再小一档，也不允许溢出 */
@media (max-width: 360px) {
	:root {
		--arv-star-size: 12px;
	}

	.arv-top-rating {
		font-size: 12.5px;
	}

	.arv-top-rating__sep {
		display: none;               /* 空间实在不够时先扔掉最不重要的分隔点 */
	}
}

/* ≥768px：平板纵向。留白随视口放大，让"轻奢"的呼吸感出来 */
@media (min-width: 768px) {
	:root {
		--arv-star-size: 15px;
	}

	.arv-top-rating {
		gap: 5px 9px;
		margin-bottom: 16px;
		font-size: 14px;
	}

	.arv-top-rating__score {
		font-size: 16px;
	}

	.arv-verified-badge,
	.arv-review-meta {
		margin-top: 8px;
	}
}

/* ≥1024px：桌面 */
@media (min-width: 1024px) {
	.arv-top-rating {
		margin-bottom: 18px;
	}

	.arv-top-rating__stars {
		transform: translateY(-0.5px); /* 光学对齐：星形重心略低于数字，微调半像素 */
	}
}

/* ≥1440px：大屏 —— 字号不跟着无限放大，只加留白，避免"被拉伸"的廉价感 */
@media (min-width: 1440px) {
	.arv-top-rating {
		margin-bottom: 20px;
	}

	.arv-verified-badge,
	.arv-review-meta {
		margin-top: 9px;
	}
}

/* ---------------------------------------------------------------------------
 * 无障碍与偏好
 * ------------------------------------------------------------------------ */

/* 尊重 reduced-motion：把下划线过渡关掉，不做任何动画 */
@media (prefers-reduced-motion: reduce) {
	.arv-top-rating__count {
		transition: none;
	}
}

/* 高对比度/强制颜色模式（Windows 高对比主题）下保证边框能看见 */
@media (forced-colors: active) {
	.arv-verified-badge {
		border-color: currentColor;
		background: Canvas;
		color: CanvasText;
	}

	.arv-top-rating__stars {
		color: currentColor;      /* 金色在强制色下会被系统替换，交给 currentColor */
	}
}