/**
 * CardPouchy 各板块组件样式。
 *
 * 设计变量在 style.css 的 :root，这里不写死颜色。
 * 板块顺序与设计稿一致：页头 / Hero / 服务 / 客服咨询 / 交易流程 / FAQ / 页脚。
 */

/* =========================================================
   页头
   ========================================================= */
.cp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--cp-bg);
	border-bottom: 1px solid transparent;
}

.cp-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 140px;
}

.cp-brand { flex: 0 0 auto; }
.cp-brand img { width: auto; max-height: 64px; }

.cp-brand__name {
	color: var(--cp-ink);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.cp-nav { margin-left: auto; }

.cp-menu {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-menu a {
	position: relative;
	display: block;
	padding: 12px 18px;
	color: var(--cp-ink);
	font-size: 17px;
	font-weight: 600;
}

.cp-menu a:hover { color: var(--cp-brand-red-strong); }

/* 设计稿里当前项下面有一条红色短横线 */
.cp-menu .current-menu-item > a::after,
.cp-menu .current_page_item > a::after,
.cp-menu a:hover::after {
	position: absolute;
	left: 50%;
	bottom: 2px;
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background: var(--cp-brand-red-strong);
	transform: translateX(-50%);
	content: "";
}

.cp-menu .sub-menu {
	position: absolute;
	min-width: 200px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius);
	box-shadow: var(--cp-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.cp-menu li { position: relative; }
.cp-menu li:hover > .sub-menu,
.cp-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cp-menu .sub-menu a::after { display: none; }

/* 语言切换 */
.cp-lang {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: 8px;
	font-size: 14px;
	white-space: nowrap;
}

.cp-lang__item { color: var(--cp-muted); }
.cp-lang__item.is-active { color: var(--cp-brand-red-strong); font-weight: 700; }
.cp-lang__item.is-disabled { cursor: not-allowed; }
.cp-lang ul { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }

/* 汉堡按钮（移动端） */
.cp-nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--cp-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
}

.cp-nav-toggle:hover { background: #fff; transform: none; box-shadow: none; }

.cp-nav-toggle__bar {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	margin: 0 auto;
	background: var(--cp-ink);
}

.cp-nav-toggle__bar::before,
.cp-nav-toggle__bar::after {
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: var(--cp-ink);
	content: "";
}

.cp-nav-toggle__bar::before { top: -6px; }
.cp-nav-toggle__bar::after { top: 6px; }

/* 页头购物车（设计稿没有，默认不输出） */
.cp-cart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--cp-border);
	border-radius: 999px;
	color: var(--cp-ink);
	font-size: 14px;
	font-weight: 600;
}

.cp-cart__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--cp-brand-red);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

/* =========================================================
   首屏 Hero
   ========================================================= */
.cp-hero {
	position: relative;
	background-color: #cdedf7;
	background-image: var(--cp-hero-gradient);
	background-size: cover;
	background-position: center;
}

.cp-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(24px, 4vw, 64px);
	padding-block: clamp(64px, 9vw, 170px);
}

.cp-hero__brand {
	margin: 0 0 10px;
	color: var(--cp-ink);
	font-size: clamp(20px, 1.9vw, 30px);
	font-weight: 600;
}

.cp-hero__title {
	margin: 0 0 22px;
	color: var(--cp-ink);
	font-size: clamp(32px, 4vw, 58px);
	font-weight: 800;
	line-height: 1.28;
}

.cp-hero__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	color: var(--cp-ink);
	font-size: clamp(16px, 1.5vw, 19px);
	font-weight: 500;
}

.cp-hero__tags li:not(:last-child)::after {
	margin: 0 14px;
	color: rgba(19, 19, 19, .35);
	content: "|";
}

.cp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.cp-hero__media img {
	width: 100%;
	max-width: 620px;
	margin-left: auto;
	filter: drop-shadow(0 24px 48px rgba(19, 19, 19, .22));
}

/* =========================================================
   我们提供的服务：5 张彩色卡片扇形展开
   ========================================================= */
.cp-services { background: var(--cp-bg); }

.cp-services__fan {
	display: flex;
	justify-content: center;
	/* stretch 而不是 flex-start：扇形卡片必须**等高**，底部才整齐。
	   用 flex-start 时高度由文字撑开 —— 中文 5 张都是 379px 看不出问题，
	   但英文标题折行后变成 379/404/429 参差不齐。 */
	align-items: stretch;
	padding-block: 10px 40px;
}

.cp-service {
	position: relative;
	z-index: var(--cp-z, 1);
	flex: 0 0 auto;
	width: 268px;
	margin-inline: -16px;
	overflow: hidden;
	border-radius: var(--cp-radius-lg);
	background: var(--cp-surface);
	box-shadow: var(--cp-shadow);
	transform: rotate(var(--cp-rot, 0deg)) translateY(var(--cp-dy, 0px));
	transform-origin: 50% 140%;
	transition: transform .3s ease, box-shadow .3s ease;
}

.cp-service:nth-child(1) { --cp-rot: -9deg;  --cp-dy: 30px; --cp-z: 1; }
.cp-service:nth-child(2) { --cp-rot: -4.5deg; --cp-dy: 10px; --cp-z: 2; }
.cp-service:nth-child(3) { --cp-rot: 0deg;   --cp-dy: 0px;  --cp-z: 3; }
.cp-service:nth-child(4) { --cp-rot: 4.5deg; --cp-dy: 10px; --cp-z: 2; }
.cp-service:nth-child(5) { --cp-rot: 9deg;   --cp-dy: 30px; --cp-z: 1; }

.cp-service:hover {
	z-index: 9;
	transform: rotate(0deg) translateY(-12px);
	box-shadow: var(--cp-shadow-lg);
}

.cp-service__top {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 236px;
}

.cp-service__icon { width: 96px; height: 96px; object-fit: contain; }

.cp-service__body { padding: 26px 26px 32px; }

/*
 * 英文版：标题留出两行的高度。
 * 英文标题比中文长（Valuation & Bidding Strategy / Grading & Authentication 都会折成两行），
 * 不留固定高度的话，正文在各张卡片上的起始位置参差不齐。
 * 只作用于 .lang-en，中文版布局保持原样。
 */
.lang-en .cp-service__title { min-height: 2.4em; }

.cp-service__title {
	margin: 0 0 10px;
	font-size: 20px;
	font-weight: 800;
	color: var(--cp-ink);
}

.cp-service__text {
	margin: 0;
	color: var(--cp-muted);
	font-size: 14.5px;
	line-height: 1.72;
}

.cp-service--green  .cp-service__top { background: var(--cp-brand-green); }
.cp-service--yellow .cp-service__top { background: var(--cp-brand-yellow); }
.cp-service--red    .cp-service__top { background: var(--cp-brand-red); }
.cp-service--blue   .cp-service__top { background: var(--cp-brand-blue); }
.cp-service--brown  .cp-service__top { background: var(--cp-brand-brown); }

/* =========================================================
   1对1专属客服咨询（绿色纹理板块）
   ========================================================= */
.cp-consult {
	padding-block: clamp(88px, 10vw, 190px);
	background-color: var(--cp-green-deep);
	background-image: url(../images/bg-green.jpg);
	background-size: cover;
	background-position: center;
	color: #fff;
}

.cp-consult__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 540px);
	justify-content: center;
	align-items: start;
	gap: clamp(32px, 6vw, 96px);
}

.cp-consult__qr { text-align: center; }

.cp-consult__qr-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 240px;
	height: 240px;
	padding: 10px;
	margin: 0 auto 16px;
	border-radius: var(--cp-radius);
	background: #fff;
}

.cp-consult__qr-box img { width: 100%; height: auto; }

.cp-consult__qr-empty { color: var(--cp-muted); font-size: 14px; }

.cp-consult__qr-caption { margin: 0; color: #fff; font-size: 14px; }

.cp-consult__form input[type="text"],
.cp-consult__form input[type="url"],
.cp-consult__form textarea {
	border: 0;
	border-radius: var(--cp-radius-sm);
}

.cp-consult__form textarea { resize: vertical; min-height: 120px; }

.cp-consult__form button[type="submit"] {
	display: block;
	width: 220px;
	margin: 26px auto 0;
}

/* =========================================================
   完整交易流程（浅灰板块）
   ========================================================= */
.cp-process { background: var(--cp-bg); }

.cp-process__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--cp-gap);
}

.cp-step {
	position: relative;
	overflow: hidden;
	padding: 34px 30px 40px;
	border-radius: var(--cp-radius-lg);
	background: var(--cp-surface);
	box-shadow: var(--cp-shadow-sm);
}

/*
 * 流程卡片右上角的水印图标。
 *
 * 几何由「三参数搜索」从设计稿反解（尺寸 S + 左位置 L + 上位置 T，最大化形状 IoU），
 * 结果是 IoU 0.734。**注意：不要用更早的 41%/61%/3.3% 那组值，那是错的。**
 *
 *   设计稿流程卡片实际是 300 × 295 CSS px
 *   图标尺寸 S = 160 CSS  = 卡片宽的 53.3%
 *   图标上边缘 T = -48 CSS（超出卡片顶，被 overflow:hidden 裁掉）
 *   => 顶部上移 48/160 = 30% => transform: translateY(-30%)
 *   => 右侧超出 33 CSS => right: -11%（53.3% + 11% - 100% = 35.7% 露在卡外）
 *   设计稿水印是均匀 #f1f1f1，反推 opacity = (255-241)/(255-196) ≈ 0.24
 *
 * 位置是**在线上截图里经验对齐**出来的（搜最优位移让掩膜 IoU 最大），
 * 因为纯几何推导与浏览器实际渲染之间有约 7 CSS px 的偏差：
 *   修正前 IoU 0.354 → 修正后 IoU 0.707
 *
 * ⚠️ 踩过的两个坑（都让我得出了错误结论）：
 *   1. **量基准的列/行不能穿过要测的元素。** 我最初用 x=1150 找卡片上边缘，
 *      那一列正好穿过水印，检测逻辑跳过了水印行 → 上边缘记成水印下方 97 源px 处，
 *      于是把"顶部裁掉 29%"算成了"裁掉 61%"，图标被裁掉一大半。
 *      **改基准后 IoU 从 0.24 升到 0.73。**
 *   2. **不要假设图标的边缘与可见区边缘对齐。** 我一开始钉死"左边缘=可见左边缘、
 *      下边缘=可见下边缘"，这个约束把解空间砍错了，怎么搜都是错的。
 *      老老实实搜三个参数。
 *
 * 用「width 百分比 + aspect-ratio + translateY 百分比」而不是写死 px：
 *   - width 的 % 按卡片宽算，卡片变窄图标等比缩
 *   - translateY 的 % 按元素自身高度算，上移量也跟着图标走
 *   （不能用 top: % 或 height: %，那两个是相对容器**高度**解析的，会算错）
 */
.cp-step__watermark {
	position: absolute;
	top: 0;
	right: -9.7%;
	width: 53.3%;
	height: auto;
	aspect-ratio: 1 / 1;
	opacity: .24;
	pointer-events: none;
	transform: translateY(-30%);
}

.cp-step__head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
}

.cp-step__no {
	color: var(--cp-brand-red);
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
}

/* 编号下面的红色短横线 */
.cp-step__no::after {
	display: block;
	width: 26px;
	height: 3px;
	margin-top: 10px;
	border-radius: 2px;
	background: var(--cp-brand-red);
	content: "";
}

.cp-step__badge {
	margin-top: 4px;
	padding: 2px 10px;
	border-radius: 999px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.7;
}

.cp-step__badge--gray  { background: #b9bcc4; }
.cp-step__badge--green { background: var(--cp-brand-green); }
.cp-step__badge--blue  { background: var(--cp-brand-blue); }

.cp-step__title {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 800;
	color: var(--cp-ink);
}

.cp-step__text {
	margin: 0;
	color: var(--cp-muted);
	font-size: 14.5px;
	line-height: 1.78;
}

/* =========================================================
   常见问题（红色纹理板块）
   ========================================================= */
.cp-faq {
	background-color: var(--cp-red-deep);
	background-image: url(../images/bg-red.jpg);
	background-size: cover;
	background-position: center;
}

.cp-faq__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 56px 96px;
}

.cp-faq-item {
	position: relative;
	overflow: hidden;
	padding: 34px 34px 42px;
	border-radius: var(--cp-radius-lg);
	background: var(--cp-surface);
}

/* 设计稿右上角有个浅金色的大写 Q 水印 */
.cp-faq-item::after {
	position: absolute;
	top: -14px;
	right: 10px;
	color: rgba(238, 194, 25, .32);
	font-size: 104px;
	font-weight: 800;
	line-height: 1;
	pointer-events: none;
	content: "Q";
}

.cp-faq-item__q {
	position: relative;
	margin: 0 0 16px;
	padding-bottom: 14px;
	font-size: 21px;
	font-weight: 800;
	color: var(--cp-ink);
}

.cp-faq-item__q::after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: var(--cp-brand-red);
	content: "";
}

.cp-faq-item__a {
	position: relative;
	margin: 0;
	color: var(--cp-muted);
	font-size: 14.5px;
	line-height: 1.82;
}

/* =========================================================
   页脚（设计稿里是浅灰底，不是深色）
   ========================================================= */
.cp-footer {
	padding-block: 64px 56px;
	background: var(--cp-bg);
	font-size: 14px;
}

.cp-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 60px;
}

.cp-footer__brand { flex: 0 0 auto; }
.cp-footer__brand img { width: auto; max-height: 44px; }

.cp-footer__meta { flex: 1 1 320px; }

.cp-footer__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	color: var(--cp-muted);
}

.cp-footer__links li:not(:last-child)::after {
	margin: 0 16px;
	color: #c9cbd3;
	content: "|";
}

.cp-footer__links a { color: var(--cp-muted); }
.cp-footer__links a:hover { color: var(--cp-ink); }

/* 还没建对应页面时，显示为不可点的灰字，避免死链 */
.cp-footer__link-pending {
	color: #a9abb3;
	border-bottom: 1px dashed #c9cbd3;
}

.cp-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 32px;
	color: var(--cp-muted);
}

/* 商标声明：参考稿里在页脚最下方，小字通栏。
   不设 max-width —— 设了会把中英文都挤成两行（用户 2026-10-09 明确要求一行放完）；
   窄屏放不下时浏览器自然会折行。 */
.cp-footer__note {
	margin: 22px 0 0;
	color: var(--cp-muted);
	font-size: 12.5px;
	line-height: 1.7;
}

/* =========================================================
   列表 / 单页 / 侧边栏（博客与内页复用）
   ========================================================= */
.cp-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(24px, 3vw, 48px);
	padding-block: clamp(40px, 5vw, 72px);
}

.cp-layout--single { grid-template-columns: minmax(0, 1fr); }
.cp-no-sidebar .cp-layout { grid-template-columns: minmax(0, 1fr); }

.cp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 32px;
}

.cp-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--cp-radius-lg);
	background: var(--cp-surface);
	box-shadow: var(--cp-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease;
}

.cp-card:hover { transform: translateY(-4px); box-shadow: var(--cp-shadow); }

.cp-card__thumb { display: block; overflow: hidden; background: #e8e9f0; }
.cp-card__thumb img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; }

.cp-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px; }

.cp-card__title { margin-bottom: 8px; font-size: 18px; }
.cp-card__title a { color: var(--cp-ink); }
.cp-card__title a:hover { color: var(--cp-brand-red-strong); }

.cp-card__meta { margin-bottom: 10px; color: var(--cp-muted); font-size: 13px; }

.cp-card__excerpt { flex: 1; color: var(--cp-body); font-size: 14px; }
.cp-card__excerpt p:last-child { margin-bottom: 0; }

.cp-card__more { margin-top: 14px; font-size: 14px; font-weight: 700; }

.cp-archive__head { margin-bottom: clamp(24px, 3vw, 40px); }
.cp-archive__title { margin-bottom: 6px; }
.cp-archive__desc { color: var(--cp-muted); }

.cp-sidebar .cp-widget {
	padding: 22px;
	margin-bottom: 24px;
	border-radius: var(--cp-radius);
	background: var(--cp-surface);
}

.cp-sidebar .cp-widget__title { margin-bottom: 12px; font-size: 16px; }

.cp-none { padding: 40px 0; text-align: center; }

.cp-entry__title { margin-bottom: 10px; }

.cp-page-links { margin: 24px 0; font-weight: 700; }
.cp-page-links a { margin-right: 10px; }

.cp-nav-post {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--cp-border);
}

.cp-nav-post__label { display: block; color: var(--cp-muted); font-size: 12px; }

/* =========================================================
   404
   ========================================================= */
.cp-404 { padding-block: clamp(64px, 10vw, 140px); text-align: center; }

.cp-404__code {
	margin: 0;
	color: #b9d9ea;
	font-size: clamp(72px, 14vw, 140px);
	font-weight: 800;
	line-height: 1;
}

.cp-404__search { max-width: 460px; margin: 28px auto; }

.cp-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

/* =========================================================
   WooCommerce 外观对齐
   ---------------------------------------------------------
   主题保留 Woo 自带 CSS（见 inc/woocommerce.php 可关掉），
   这里只做布局对齐：把 Woo 的浮动商品列表改成网格。
   ========================================================= */
.cp-shop { padding-block: clamp(32px, 4vw, 56px); }

body .woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin: 0;
}

/* Woo 的 clearfix 伪元素在 grid 容器里会变成格子，必须去掉 */
body .woocommerce ul.products::before,
body .woocommerce ul.products::after {
	display: none;
	content: none;
}

body .woocommerce ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
}

body .woocommerce ul.products li.product img { border-radius: var(--cp-radius); }

body .woocommerce .woocommerce-result-count,
body .woocommerce .woocommerce-ordering { margin-bottom: 20px; }

body .woocommerce span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	min-height: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--cp-brand-red);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
}

body .woocommerce ul.products li.product .button,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit {
	padding: 11px 24px;
	border-radius: 999px;
	background: var(--cp-ink);
	color: #fff;
	font-weight: 700;
}

body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .woocommerce #respond input#submit:hover {
	background: #000;
	color: #fff;
}

/* =========================================================
   响应式
   ========================================================= */
/* =========================================================
   服务卡片的响应式：扇形只在够宽时用
   ---------------------------------------------------------
   扇形是设计稿的招牌样式，但它按「5 张固定 268px 卡片 + 旋转」排版，
   实测要约 1360px 视口才放得下，再窄就横向溢出
   （901px 实测溢出 225px、1024px 溢出 163px、1280px 还溢出 35px）。
   所以 ≥1360px 保留扇形，其余宽度退化为固定宽度换行；
   手机上再强制每行 2 个（1 个太浪费纵向空间）。
   ========================================================= */
@media (max-width: 1359px) {
	.cp-services__fan {
		display: grid;
		/* 固定 3 列 + 卡片上限 300px：5 张卡排成漂亮的 3+2，
		   不会出现 4+1 那种孤一张的排法 */
		grid-template-columns: repeat(3, minmax(0, 300px));
		justify-content: center;
		gap: 18px;
	}

	.cp-service {
		width: auto;
		margin-inline: 0;
		transform: none;
	}

	.cp-service:hover { transform: translateY(-6px); }

	/* 卡片变窄后按比例压低彩色区，避免出现"高过宽"的方块 */
	.cp-service__top { height: clamp(150px, 20vw, 236px); }
}

@media (max-width: 1100px) {
	.cp-process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cp-faq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
	body .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	.cp-layout { grid-template-columns: minmax(0, 1fr); }
	.cp-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.cp-hero__media img { margin-inline: auto; }
	.cp-consult__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; }
	.cp-consult__form { width: min(540px, 100%); }
}

/*
 * 移动端 / 平板：导航收成汉堡菜单。
 *
 * ⚠️ 断点 2026-10-09 从 900 提到 1199：顶栏按参考稿加了「关于我们 / About Us」
 *    （第 6 项），而英文项比中文长得多（How It Works / My Orders / About Us），
 *    实测 901~1199px 会挤成 2~3 行、901px 还横向溢出 119px。
 *    改完 901~1199 一律用汉堡菜单，两种语言都不会再挤。
 *    **去掉「关于我们」那一项之前，别把这个断点调回去。**
 */
@media (max-width: 1199px) {
	.cp-brand img { max-height: 46px; }

	.cp-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		margin: 0;
		padding: 12px 24px 20px;
		background: var(--cp-bg);
		box-shadow: var(--cp-shadow);
	}

	.cp-nav-open .cp-nav { display: block; }
	.cp-menu { flex-direction: column; align-items: stretch; gap: 2px; }
	.cp-menu a::after { display: none; }
	.cp-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding-left: 12px;
	}

	.cp-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.cp-lang { margin-left: auto; }
	.cp-header__inner { min-height: 68px; }
}

/* 手机：服务卡片强制每行 2 个；流程卡片缩紧但保持 2 列
   （用户明确要求：1 个太浪费纵向空间） */
@media (max-width: 767px) {
	.cp-services__fan {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		padding-block: 0 20px;
	}
	.cp-service { width: auto; }
	.cp-service__top { height: 132px; }
	.cp-service__icon { width: 52px; height: 52px; }
	.cp-service__body { padding: 14px 14px 18px; }
	.cp-service__title { margin-bottom: 6px; font-size: 16px; }
	.cp-service__text { font-size: 12.5px; line-height: 1.62; }

	.cp-process__grid { gap: 12px; }
	.cp-step { padding: 18px 14px 20px; }
	.cp-step__head { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
	.cp-step__no { font-size: 26px; }
	.cp-step__no::after { width: 18px; height: 2px; margin-top: 6px; }
	.cp-step__badge { margin-top: 2px; padding: 1px 7px; font-size: 10.5px; }
	.cp-step__title { margin-bottom: 6px; font-size: 15.5px; }
	.cp-step__text { font-size: 12.5px; line-height: 1.65; }

	/* 常见问题也改 2 列（用户要求看效果）。
	   FAQ 正文比流程长，所以字号和内边距压得更多一点，避免变成细长条 */
	.cp-faq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
	.cp-faq-item { padding: 18px 16px 22px; }
	.cp-faq-item__q { margin-bottom: 12px; padding-bottom: 11px; font-size: 15.5px; }
	.cp-faq-item__q::after { width: 22px; height: 2px; }
	.cp-faq-item__a { font-size: 12.5px; line-height: 1.68; }
	.cp-faq-item::after { top: -10px; right: 6px; font-size: 62px; }
}

@media (max-width: 640px) {
	body .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cp-hero__actions .cp-btn { flex: 1 1 100%; }
	.cp-footer__inner { gap: 20px; }
}

/* 小屏页头：不缩会把整页撑出横向滚动条
   （实测 360px 溢出 102px、414px 溢出 48px） */
@media (max-width: 480px) {
	.cp-container { padding-inline: 16px; }
	.cp-header__inner { gap: 10px; min-height: 60px; }
	.cp-brand img { max-height: 36px; }
	.cp-lang { gap: 8px; font-size: 13px; }
	.cp-lang__item.is-disabled { display: none; }
	.cp-nav-toggle { width: 38px; height: 38px; }
}

/* =========================================================
   登录页 / 注册页（共用的 .cp-auth-* 样式）
   ---------------------------------------------------------
   设计稿里**没有**这两页，这里沿用站点既有设计语言拼的：
   首屏同款蓝色渐变做标题带 + 白色圆角卡片 + 品牌红主按钮。
   ========================================================= */
.cp-auth-hero {
	padding-block: clamp(40px, 5vw, 72px);
	background-color: #cdedf7;
	background-image: var(--cp-hero-gradient);
	background-size: cover;
	background-position: center;
	text-align: center;
}

.cp-auth-hero .cp-section__title { margin-bottom: 4px; }
.cp-auth-hero .cp-section__sub { color: var(--cp-ink); }

.cp-auth { padding-block: clamp(40px, 6vw, 88px); }

.cp-auth__card {
	max-width: 560px;
	margin-inline: auto;
	padding: clamp(24px, 4vw, 44px);
	border-radius: var(--cp-radius-lg);
	background: var(--cp-surface);
	box-shadow: var(--cp-shadow);
}

.cp-auth__heading {
	margin: 0 0 8px;
	font-size: clamp(20px, 2.2vw, 26px);
}

.cp-auth__lead {
	margin: 0 0 24px;
	color: var(--cp-muted);
	font-size: 14.5px;
}

.cp-auth__label {
	display: block;
	margin-bottom: 6px;
	color: var(--cp-ink);
	font-size: 14px;
	font-weight: 600;
}

.cp-auth__agree {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 22px;
	color: var(--cp-body);
	font-size: 13.5px;
	line-height: 1.6;
	cursor: pointer;
}

.cp-auth__agree input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 4px 0 0;
	accent-color: var(--cp-brand-red-strong);
}

/* 登录页多出来的两个小件：记住我 + 忘记密码 */
.cp-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: -6px 0 22px;
	font-size: 13.5px;
}

.cp-auth__remember {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--cp-body);
	cursor: pointer;
}

.cp-auth__remember input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--cp-brand-red-strong);
}

.cp-auth__forgot { color: var(--cp-muted); }
.cp-auth__forgot:hover { color: var(--cp-brand-red-strong); }

/* 条款页还没建时显示成灰字，避免死链（与页脚同款处理） */
.cp-auth__link-pending {
	color: #a9abb3;
	border-bottom: 1px dashed #c9cbd3;
}

.cp-auth__foot {
	margin: 18px 0 0;
	color: var(--cp-muted);
	font-size: 14px;
	text-align: center;
}

.cp-auth__foot a { font-weight: 700; }

.cp-auth .cp-alert {
	max-width: 560px;
	margin-inline: auto;
	margin-bottom: 20px;
}

/* 注册页是浅底，通用 .cp-alert--ok 是白字半透明（给深绿板块用的），这里要覆盖 */
.cp-auth .cp-alert--ok { background: #e8f6ef; color: #1e6b47; }
.cp-auth .cp-alert--error { background: #fdecea; color: #a11402; }

/* =========================================================
   法务页面（用户协议 / 隐私政策 / 业务说明）
   ---------------------------------------------------------
   设计稿：`设计稿/隐私政策.png`（3840×8000 = 1920 CSS px @2x，以下数值都是量出来的）。
   结构：居中大标题（品牌 + 页面标题）→ 左栏三篇文档导航 → 右侧正文栏，
        正文栏第一段是右对齐的「最后更新日期」。

   几点与站点其它页面不同的地方：
   - **正文区是白底**（设计稿实测 #ffffff），页头/页脚仍是浅灰 --cp-bg
   - 标题/日期/左栏用纯黑 #000，正文与 h3 用 --cp-ink (#131313) —— 设计稿取样值
   - 字号比正文大得多：标题 48 / 日期 20 / 左栏 24 / 正文 16（行高 24）
   - 列表的项目符号是**紧贴文字**的「•」，不是系统圆点（设计稿实测
     圆点墨迹 584.5→589.5、文字从 591.5 开始，中间没有额外间隙）

   宽度：内容块 1210px 居中（设计稿 372→1581.5）；
        左栏 = 文字 96 + 间距 116 = 212px，正文栏 998px。
   ========================================================= */
.cp-legal-page .cp-main { background: var(--cp-surface); }

.cp-legal { padding-block: 150px 395px; }

.cp-legal__doc {
	max-width: 1210px;
	margin-inline: auto;
}

/*
 * 标题字重：设计稿用的是苹方 Semibold，**介于微软雅黑的 Regular 与 Bold 之间**
 * （实测量得「墨迹像素 / 文字宽」：设计稿 64.8、雅黑 Regular 54.8、雅黑 Bold 79.1）。
 * Windows 只有 Regular/Bold 两档，直接写 700/800 会明显比设计稿粗，
 * 所以用 500 + 0.5px 描边补到中间值（实测 ≈63）：
 * 苹果设备上 500 = 苹方 Medium，加描边后也接近设计稿的 Semibold。
 */
.cp-legal__title {
	margin: 0;
	color: #000;
	font-size: 48px;
	font-weight: 500;
	-webkit-text-stroke: 0.5px currentColor;
	line-height: 1.2;
	text-align: center;
}

.cp-legal__grid {
	display: grid;
	grid-template-columns: 212px minmax(0, 1fr);
	margin-top: 54px;
}

/* ---- 左栏：三篇文档 ---- */
.cp-legal__nav { padding-top: 210px; }

.cp-legal__nav-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 三行的行距：设计稿 item 墨迹顶 607 / 697 / 787，正好 90px 一格 */
.cp-legal__nav-item + .cp-legal__nav-item { margin-top: 52px; }

.cp-legal__nav a {
	position: relative;
	display: inline-block;
	padding-bottom: 9px;
	color: #000;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
}

.cp-legal__nav a:hover { color: var(--cp-brand-red-strong); }

/* 当前这篇：加粗 + 4px 黑色下划线（设计稿实测下划线厚 4px） */
.cp-legal__nav-item.is-active a { font-weight: 700; }

.cp-legal__nav-item.is-active a::after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: #000;
	content: "";
}

/* ---- 右栏：正文 ---- */
.cp-legal__content {
	color: var(--cp-ink);
	font-size: 16px;
	line-height: 1.5;
}

.cp-legal__content > *:first-child { margin-top: 0; }

.cp-legal__content p { margin: 0 0 10px; }

.cp-legal__content h2,
.cp-legal__content h3,
.cp-legal__content h4 {
	margin: 44px 0 10px;
	color: var(--cp-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.cp-legal__content ul,
.cp-legal__content ol {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

/*
 * 设计稿里「加粗小标题 + 紧跟其后的项目列表」之间**没有**空行
 * （实测 835.5 → 859.5 正好一个行高 24），所以这类段落不要下边距。
 * 用 :has() 精确命中，避免把其它段落的 10px 段落间距一起吃掉。
 */
.cp-legal__content p:has(+ ul),
.cp-legal__content p:has(+ ol) { margin-bottom: 0; }

/* 项目符号：紧贴文字，且换行后回到左边缘（设计稿所有行左缘都是 583.5）。
   只作用于无序列表；有序列表单独留数字，避免以后加 ol 时数字被吃掉。 */
.cp-legal__content ul li::before { content: "•"; }

/*
 * 列表项的行间距 = 10px，和本站的**段落间距**一致（正文行高 24，行距就是 34）。
 * 2026-10-09 用户反馈「ul 间距太小」时实测：原来 li 的上下边距都是 0，
 * 相邻两项**紧贴**（多行项更是挤成一整块），所以在这里补上。
 * 只作用于空元素列表项：嵌套列表的 li 内部还有子列表时要贴紧，
 * 不然每一项后面都会多出一段空隙。
 * 注：`设计稿/隐私政策.png` 的列表项多为单行、且设计稿自身没留项间距，
 *     这条是用户要求的可读性调整，**不是**按设计稿量出来的值。
 */
.cp-legal__content li:not(:last-child):not(:has(ul, ol)) { margin-bottom: 10px; }

.cp-legal__content ol {
	padding-left: 1.6em;
	list-style: decimal;
}

.cp-legal__content li > ul,
.cp-legal__content li > ol { margin-bottom: 0; }

/* 更新日期：顶格右对齐、字号比正文大一号 */
.cp-legal__content .cp-legal__updated {
	margin: 0 0 68px;
	color: #000;
	font-size: 20px;
	line-height: 1.5;
	text-align: right;
}

/* 窄屏：左栏改成正文上方的横向文档列表（设计稿没有窄屏稿，这里按站点既有断点收） */
@media (max-width: 900px) {
	.cp-legal { padding-block: 56px 96px; }
	.cp-legal__title { font-size: 32px; }
	.cp-legal__grid { grid-template-columns: minmax(0, 1fr); margin-top: 26px; }

	.cp-legal__nav {
		padding-top: 0;
		margin-bottom: 26px;
	}

	.cp-legal__nav-list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 28px;
	}

	.cp-legal__nav-item + .cp-legal__nav-item { margin-top: 0; }

	.cp-legal__nav a {
		padding-bottom: 6px;
		font-size: 18px;
	}

	.cp-legal__nav-item.is-active a::after { height: 3px; }

	.cp-legal__content .cp-legal__updated {
		margin-bottom: 32px;
		font-size: 16px;
	}

	.cp-legal__content h2,
	.cp-legal__content h3,
	.cp-legal__content h4 { margin-top: 26px; }
}

@media (max-width: 480px) {
	.cp-legal { padding-block: 40px 72px; }
	.cp-legal__title { font-size: 26px; }
}

@media print {
	.cp-header, .cp-footer { display: none; }
}