/* ============================================================
   产品详情页（标准版式 / 甲方原型）
   —— 由 inc/product-page.php 渲染,默认所有商品页加载（_cb_pp_disable=yes 的商品除外）。

   版式来源：甲方原型源码 `ONYEABLUZ_Developer_Source/app/globals.css`
   —— 借用它的**结构、字号层级、行高、字距、留白节奏**（区块 100px 内边距、
   卡片 min-height、价格上下细线、两栏 modelChoice、trustStrip 三列…）。

   ⚠️ **字体不照搬原型**：原型里的 Georgia / Arial 只是占位字体。
   本站统一用首页的品牌字体 —— 标题 Merriweather（首页区块标题为 700）、
   正文 Roboto、小标签 Roboto + 大字距。Merriweather 比 Georgia 更宽更重,
   所以标题字号取原型的 ~0.88 倍、行高放宽到 1.05–1.15,视觉重量才相当。

   其它约定：
   · 移动优先。默认 = 手机单栏；≥761px 起平板、≥1051px 起桌面（与原型断点一致）。
   · 只消费 style.css 的 token,不新造品牌色。原型的 --line #d9d6ce 作为本页描边色。
   · 通栏配色带用 box-shadow + clip-path 撑满视口,**不用 100vw**（含滚动条会横向溢出）。
   ============================================================ */

/* 本页专用的描边/次要文字色（取自原型 --line / --muted / --cream / --paper）。
   ⚠️ 必须定义在 .single-product 这一层：购买区(.summary)不在 .cb-pp-sections 里面,
   之前把变量定义在 .cb-pp-sections 上,导致价格行/信任行的
   `border-top: 1px solid var(--cb-line)` 因变量未定义而**整条声明被丢弃**（细线不见了,
   且不报错）。本文件只在启用了详情页版式的商品页加载,所以这个作用域不会外溢。 */
.single-product {
    --cb-line: #d9d6ce;
    --cb-muted: #667180;
    --cb-cream: #f4f0e7;
    --cb-paper: #fbfaf7;
    /* 全站唯一内容基准线。对齐甲方原型的**宽版式**：原型 hero max-width 1500 /
       区块 inner 1400，左右用 4–5vw 视口边距（而非固定窄边距）——所以观感是「铺开」的。
       本站取 1400 基准 + vw 边距，比旧的 1280/20 更开阔，且**同一套 token** 供
       hero 容器与所有通栏区块共用，左右缘落在同一条竖线上（消除楼梯错位）。
       product-page.css 只在启用详情页版式的商品页加载，故放宽不波及购物车/结算/shop。 */
    --cb-maxw: 1400px;
    --cb-gutter: clamp(20px, 4vw, 64px);
}
@media (max-width: 760px) {
    .single-product {
        --cb-gutter: 18px;
    }
}

/* 把 hero 容器(.site-content：面包屑 + 图库 + 购买区)也放宽到同一基准线并采用 vw 边距，
   让 hero 与下方通栏区块左右对齐、整体更铺开。wc-skin.css 里它被固定为 1280/20，
   这里同选择器覆盖（本文件在 wc-skin 之后加载，且仅增强页加载 → 不影响其它 WooCommerce 页面）。
   只改左右，保留 wc-skin 的 padding-top(!important)。 */
.single-product .site-content {
    max-width: var(--cb-maxw);
    padding-left: var(--cb-gutter);
    padding-right: var(--cb-gutter);
}

.cb-pp-sections {
    /* `.single-product div.product` 是 wc-skin.css 的两栏 Grid,这些区块是它的一个网格项：
       · grid-column: 1/-1 —— 否则被塞进左/右半栏交替排列
       · min-width: 0 —— 移动端 `grid-template-columns: 1fr`（= minmax(auto,1fr)）
         会被对比表的 min-width 撑爆轨道 → 横向溢出
       · 包一层还消掉「带与带之间露出页面底色」的行间距条纹 */
    grid-column: 1 / -1;
    min-width: 0;
}

/* ---------- 区块外壳 ---------- */
.cb-pp {
    min-width: 0;
    --cb-pp-bg: var(--color-white);
    --cb-pp-fg: var(--color-text);
    background: var(--cb-pp-bg);
    color: var(--cb-pp-fg);
    box-shadow: 0 0 0 100vmax var(--cb-pp-bg);
    clip-path: inset(0 -100vmax);
    margin: 0;
    /* 原型 .section { padding: 100px 5vw }，手机 70px 18px */
    padding: 70px 0;
}

.cb-pp__inner {
    max-width: var(--cb-maxw);
    min-width: 0;
    margin: 0 auto;
    /* 左右留白由外层 .site-content 的 20px padding 统一提供（全站共用基准线）；
       这里再加 gutter 会双重缩进，导致区块内容比 hero/面包屑多缩进 20px。 */
    padding: 0;
}

/* 配色变体（沿用品牌 token,不用原型的近似色值） */
.cb-pp--benefits,
.cb-pp--specs,
.cb-pp--reviews {
    --cb-pp-bg: var(--cb-cream);
}

.cb-pp--accessories,
.cb-pp--overview {
    --cb-pp-bg: var(--cb-paper);
}

.cb-pp--steps,
.cb-pp--brand {
    --cb-pp-bg: var(--color-secondary);
    --cb-pp-fg: var(--color-text-white);
}

.cb-pp--resources {
    --cb-pp-bg: var(--color-primary);
    --cb-pp-fg: var(--color-secondary);
    padding: 30px 0;
}

.cb-pp--compat {
    padding: 0;
    --cb-pp-bg: var(--cb-paper);
}

/* ---------- 区块标题 ---------- */
.cb-pp__head {
    margin: 0 auto 40px;
}

/* 三个标题变体统一撑满 inner(1280 基准)，仅用 text-align/布局区分，
   使标题左缘 = 区块内容左缘 = hero 左缘。居中变体保留一个较窄的可读行宽，
   但用 margin:auto 居中，左右缘仍相对基准线对称。 */
.cb-pp__head--center {
    text-align: center;
    max-width: 820px;
}

.cb-pp__head--left {
    max-width: 100%;
}

/* 原型 .sectionIntro：标题左、导语右下对齐 */
.cb-pp__head--split {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 80px;
    margin-bottom: 45px;
}

.cb-pp__eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--font-bold);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 12px;
}

.cb-pp--steps .cb-pp__eyebrow,
.cb-pp--brand .cb-pp__eyebrow {
    color: var(--color-primary);
}

/* 原型：500 clamp(38px,4.2vw,64px)/1.03 Georgia,ls -.035em
   → 品牌字体 Merriweather 700，字号 ×0.88、行高放宽 */
.cb-pp__title {
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1.14;
    letter-spacing: -0.015em;
    margin: 0;
    color: inherit;
}

.cb-pp__intro {
    color: var(--cb-muted);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    margin-top: 16px;
}

.cb-pp__intro p { margin: 0 0 12px; }
.cb-pp__intro p:last-child { margin-bottom: 0; }

.cb-pp--steps .cb-pp__intro,
.cb-pp--brand .cb-pp__intro { color: rgba(255, 255, 255, 0.72); }

/* 序号（卡片角标 / 清单 / FAQ 共用） */
.cb-pp-num {
    font-family: var(--font-heading);
    font-weight: var(--font-normal);
    color: var(--color-primary);
}

/* ---------- 按钮 ---------- */
.cb-pp-btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 16px 24px;
    transition: var(--transition-base);
    border: 1px solid transparent;
    border-radius: 2px;
}

.cb-pp-btn--gold { background: var(--color-primary); color: var(--color-secondary); }
.cb-pp-btn--gold:hover { background: var(--color-secondary); color: #fff; }

.cb-pp-btn--navy { background: var(--color-secondary); color: #fff; }
.cb-pp-btn--navy:hover { background: var(--color-primary); color: var(--color-secondary); }

/* 深底上的描边按钮（原型 .outlineButton） */
.cb-pp-btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}
.cb-pp-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* 下划线文字按钮（原型 .textButton） */
.cb-pp-btn--text {
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    letter-spacing: 0.1em;
    border-radius: 0;
}
.cb-pp-btn--text:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ============================================================
   购买区（summary 内注入）—— 紧凑度对齐原型 .purchasePanel
   ============================================================ */
.single-product div.product .summary.entry-summary { padding-top: 16px; }

.cb-pp-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #a27f2b;
    margin: 0;
}

/* 商品标题：原型 500 clamp(43px,4vw,68px)/.98 ls -.035em；
   换成 Merriweather 700 后取 ×0.88、行高 1.06 */
.single-product .summary .product_title,
.single-product h1.product_title {
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: clamp(32px, 3.4vw, 54px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--color-secondary);
    margin: 14px 0 16px;
}

.cb-pp-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.7;
    color: #556273;
    max-width: 620px;
    margin: 0;
}

/* 星级 */
.cb-pp-stars { display: inline-flex; gap: 2px; line-height: 1; }
.cb-pp-stars__s { color: #d8d3c8; font-size: 17px; letter-spacing: 0.06em; }
.cb-pp-stars__s.is-on { color: var(--color-primary); }
.cb-pp-stars__s.is-half {
    background: linear-gradient(90deg, var(--color-primary) 50%, #d8d3c8 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cb-pp-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    margin: 18px 0;
}

.cb-pp-rating__num {
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: 16px;
    color: var(--color-secondary);
}
.cb-pp-rating__count { color: #5b6675; text-decoration: underline; text-underline-offset: 2px; }
.cb-pp-rating__count::before { content: "·"; margin-right: 10px; color: #c3cad3; text-decoration: none; }
.cb-pp-rating__count:hover { color: var(--color-primary); }

/* 价格行：上下各一条细线,税注同行（原型 .price / .price small） */
.single-product div.product .summary p.price {
    font-family: var(--font-heading);
    font-weight: var(--font-normal);
    font-size: 32px;
    line-height: 1.2;
    color: var(--color-secondary);
    margin: 0;
    padding: 18px 0;
    border-top: 1px solid var(--cb-line);
    border-bottom: 1px solid var(--cb-line);
}

.single-product div.product .summary p.price ins {
    text-decoration: none;
    color: inherit;
}

.single-product div.product .summary p.price del {
    font-size: 0.6em;
    color: var(--color-text-lighter);
    margin-right: 8px;
}

.cb-pp-price__note {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--font-normal);
    letter-spacing: 0.02em;
    color: #687481;
    margin-left: 8px;
    white-space: nowrap;
}

/* 型号选择器（原型 .modelChoice：两列,选中 2px 藏青边 + 打勾） */
.cb-pp-family { padding: 24px 0 14px; }

.cb-pp-family__title {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--font-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin: 0 0 10px;
}

.cb-pp-family__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.cb-pp-family__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 100px;
    padding: 15px;
    border: 1px solid #d8d4ca;
    background: var(--color-white);
    text-decoration: none;
    color: var(--color-text);
    transition: var(--transition-base);
}

.cb-pp-family__card:hover { border-color: var(--color-primary); }

.cb-pp-family__card.is-active {
    border: 2px solid var(--color-secondary);
    background: #f5f2e8;
}

/* 选中态的打勾（原型 .modelChoice button.selected::after） */
.cb-pp-family__card.is-active::after {
    content: "✓";
    position: absolute;
    right: 12px;
    top: 12px;
    width: 20px;
    height: 20px;
    background: var(--color-secondary);
    color: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 10px;
}

.cb-pp-family__label {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    color: var(--color-secondary);
    padding-right: 28px;
}

.cb-pp-family__sub { font-size: 11px; color: var(--color-text); }

.cb-pp-family__hint {
    font-size: 9px;
    color: #79828c;
    font-style: normal;
    margin-top: auto;
}

/* 库存行 */
.cb-pp-stock {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text);
    margin: 0;
    padding: 10px 0 15px;
}

.cb-pp-stock b { color: #aaa; font-weight: var(--font-normal); margin: 0 2px; }

.cb-pp-stock__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #459568;
    flex: 0 0 auto;
    margin-right: 4px;
}

.cb-pp-stock.is-out .cb-pp-stock__dot { background: #a33; }

/* 预估配送（原型 .deliveryCheck：CHECK 是米色按钮,不是藏青） */
.cb-pp-delivery { margin: 0 0 4px; }

.cb-pp-delivery__label {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.cb-pp-delivery__row { display: flex; margin-top: 8px; }

.cb-pp-delivery__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 43px;
    border: 1px solid #d6d2c8;
    background: var(--color-white);
    padding: 0 13px;
    font-size: 12px;
    border-radius: 0;
}

.cb-pp-delivery__btn {
    flex: 0 0 90px;
    width: 90px;
    border: 0;
    background: #e9e4d9;
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    cursor: pointer;
}

.cb-pp-delivery__btn:hover { background: var(--color-primary); color: #fff; }

.cb-pp-delivery__out {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--color-secondary);
    min-height: 1em;
}

.cb-pp-delivery__out.is-error { color: #a33; }

/* 数量 + ADD TO BAG 同一行（原型 .buyRow / .quantity / .addButton）
   ⚠️ wc-skin.css 在 ≤768px 把 form.cart 设成 `flex-direction: column`,
   列方向下 flex-basis 作用在**高度**上 —— 曾让 `flex:1 1 200px` 的加购按钮变成 200px 高的大色块。
   所以这里必须显式写 `flex-direction: row`,并把 wc-skin 的 `width:100%` 覆盖回 auto。 */
.single-product div.product form.cart {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 18px;
}

/* WooCommerce/主题的 clearfix ::before/::after 在 flex 容器里会变成
   零宽 flex item,分别落在第一行首尾,各吃掉一个 gap(10px)——
   于是数量框左缩 10px、加购按钮右缩 10px,与 BUY NOW 通栏对不齐。
   显式移除这两个伪元素,行内只剩 数量 + 加购,才能撑满基准线。 */
.single-product div.product form.cart::before,
.single-product div.product form.cart::after {
    content: none;
    display: none;
}

.single-product div.product form.cart .quantity {
    flex: 0 0 auto;
    width: auto;
    height: 54px;
    /* WooCommerce 核心的 .quantity{margin-right:4px} 同特异性会漏进来,
       破坏行内间距(改由 flex gap 统一控制)—— 用 !important 归零 */
    margin: 0 !important;
}

.single-product div.product form.cart .button.single_add_to_cart_button {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 54px;
    min-height: 54px;
    margin: 0;
    background: var(--color-primary);
    color: var(--color-secondary);
    border: 0;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.single-product div.product form.cart .button.single_add_to_cart_button:hover {
    background: var(--color-secondary);
    color: #fff;
}

/* BUY NOW：整行,藏青（原型 .buyNow） */
.woocommerce div.product form.cart .button.cb-pp-buynow {
    flex: 1 1 100%;
    order: 5;
    width: 100%;
    height: 54px;
    margin: -1px 0 0;
    background: var(--color-secondary);
    color: #fff;
    border: 0;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.woocommerce div.product form.cart .button.cb-pp-buynow:hover { background: #0f1c30; }

/* 支付方式：居中纯文字,无边框（原型 .paymentMarks） */
.cb-pp-pay {
    order: 6;
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 13px 0;
    margin: 0;
    color: #777f89;
    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cb-pp-pay__item { border: 0; padding: 0; background: none; }
.cb-pp-pay__item.has-img img { display: block; height: 16px; width: auto; }

/* 心愿单按钮（原型没有,压低视觉权重） */
.single-product div.product form.cart .cb-wishlist-btn {
    order: 7;
    flex: 1 1 100%;
    background: none;
    border: 0;
    padding: 0 0 4px;
    color: var(--cb-muted);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-align: left;
    cursor: pointer;
}

.single-product div.product form.cart .cb-wishlist-btn:hover { color: var(--color-primary); }

/* 信任行：三列 图标 + 标题 + 副标题（原型 .trustStrip） */
.cb-pp-trust {
    order: 8;
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    border-top: 1px solid var(--cb-line);
    margin: 6px 0 0;
    padding-top: 18px;
}

.cb-pp-trust__item { display: flex; align-items: flex-start; gap: 8px; }

.cb-pp-trust__icon {
    color: var(--color-primary);
    font-size: 13px;
    line-height: 1.3;
    flex: 0 0 auto;
}

.cb-pp-trust__title {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 0.03em;
    color: var(--color-secondary);
    text-transform: none;
}

.cb-pp-trust__sub {
    display: block;
    font-size: 10px;
    color: #7b8590;
    font-weight: var(--font-normal);
    margin-top: 3px;
}

/* ============================================================
   区块 1：核心卖点（原型 .benefitCards）
   ============================================================ */
.cb-pp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.cb-pp-bcard {
    position: relative;
    background: var(--color-white);
    border: 1px solid #e4dfd4;
    padding: 28px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
}

.cb-pp-bcard .cb-pp-num {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #c6bfae;
    font-size: 26px;
}

.cb-pp-bcard__icon {
    font-size: 34px;
    line-height: 1;
    color: var(--color-primary);
    margin: 28px 0 44px;
}

.cb-pp-bcard__title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: var(--font-bold);
    line-height: 1.3;
    color: var(--color-secondary);
    margin: 0 0 10px;
}

.cb-pp-bcard__body {
    font-size: 13px;
    line-height: 1.6;
    color: #687482;
    margin: 0;
}

/* ---------- 长描述 ---------- */
.cb-pp-prose {
    max-width: 820px;
    font-size: var(--text-md);
    line-height: 1.8;
    color: var(--cb-muted);
}

.cb-pp-prose h2,
.cb-pp-prose h3 { font-family: var(--font-heading); color: var(--color-secondary); }

/* ============================================================
   区块 2：使用步骤（原型 .steps + .stepVisual）
   ============================================================ */
.cb-pp-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.cb-pp-step {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    padding-top: 15px;
}

.cb-pp-step__num {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--font-bold);
    letter-spacing: 0.1em;
    color: var(--color-primary);
}

.cb-pp-step__visual {
    height: 180px;
    margin: 18px 0;
    background: linear-gradient(135deg, #23486e, #10243c);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: grid;
    place-items: center;
}

.cb-pp-step__visual span {
    width: 60px;
    height: 60px;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 20px;
}

.cb-pp-step__title {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: var(--font-bold);
    line-height: 1.3;
    color: #fff;
    margin: 0 0 8px;
}

.cb-pp-step__desc {
    font-size: 12px;
    line-height: 1.6;
    color: #b9c4cf;
    margin: 0;
}

.cb-pp-steps__cta { text-align: center; margin: 40px 0 0; }

/* ============================================================
   区块 3：适用性（原型 .suitability —— 通栏两半,左视觉右文案）
   ============================================================ */
.cb-pp--compat {
    display: grid;
    grid-template-columns: 1fr;
}

.cb-pp-suit__visual {
    position: relative;
    min-height: 380px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle, #f7f2e8 0, #dfd4c2 70%);
}

.cb-pp-suit__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cb-pp-suit__ph {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: #8d8574;
}

/* 浮在配图上的参数卡（原型 .measure） */
.cb-pp-measure {
    position: absolute;
    background: var(--color-white);
    border-left: 3px solid var(--color-primary);
    padding: 10px 14px;
    font-size: 11px;
    color: var(--color-secondary);
    box-shadow: 0 8px 25px rgba(24, 48, 77, 0.12);
}

.cb-pp-measure--1 { top: 14%; left: 10%; }
.cb-pp-measure--2 { top: 45%; right: 8%; }
.cb-pp-measure--3 { bottom: 14%; left: 16%; }

.cb-pp-suit__copy { padding: 60px 22px; background: var(--cb-paper); }

.cb-pp-suit__copy .cb-pp__head { margin-bottom: 24px; }

.cb-pp-suit__list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.cb-pp-suit__list li {
    padding: 14px 0;
    border-bottom: 1px solid var(--cb-line);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text);
}

.cb-pp-suit__list b { color: var(--color-secondary); }

/* ============================================================
   区块 4：规格 + 包装清单（原型 .detailGrid / .specTable / .boxContents）
   ============================================================ */
.cb-pp-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: stretch; /* 左右两卡等高：右卡随左卡（参数多）拉伸，底边对齐 */
}

.cb-pp-spectable,
.cb-pp-box {
    background: var(--color-white);
    border: 1px solid #e0dbd0;
    padding: 28px;
}

.cb-pp-card__kicker {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 16px;
}

.cb-pp-spectable__row {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid #ebe7df;
    font-size: 12px;
}

.cb-pp-spectable__row span { color: #6c7782; }
.cb-pp-spectable__row b { font-weight: var(--font-medium); color: var(--color-text); }

.cb-pp-spectable__note {
    font-size: 11px;
    color: var(--color-text-lighter);
    margin: 16px 0 0;
}

.cb-pp-box {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto; /* 等高后：mock 吸收多余高度，list 保持自然高度 */
    gap: 25px;
}

.cb-pp-box__mock {
    min-height: 200px;
    height: 100%; /* 撑满被拉伸的行，navy 块随左卡长高填满，底边对齐 */
    background: var(--color-secondary);
    color: var(--color-primary);
    display: grid;
    place-items: center;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: 0.04em;
    padding: 20px;
}

.cb-pp-box__list { list-style: none; margin: 0; padding: 0; }

.cb-pp-box__list li {
    padding: 14px 0;
    border-bottom: 1px solid #ebe7df;
    font-size: 12px;
    color: var(--color-text);
}

.cb-pp-box__list .cb-pp-num {
    margin-right: 12px;
    font-family: var(--font-body);
    font-weight: var(--font-bold);
    font-size: 11px;
}

/* ============================================================
   区块 5：型号对比（原型 .comparisonTable —— 藏青表头 + 斑马行）
   ============================================================ */
.cb-pp-compare {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--cb-line);
}

.cb-pp-compare__scroll { min-width: 100%; }

.cb-pp-compare__head,
.cb-pp-compare__row,
.cb-pp-compare__cta {
    display: grid;
    grid-template-columns: 1fr repeat(var(--cb-cols, 2), 1.3fr);
}

.cb-pp-compare__head > *,
.cb-pp-compare__row > *,
.cb-pp-compare__cta > * {
    padding: 19px 22px;
    border-right: 1px solid var(--cb-line);
}

.cb-pp-compare__head > *:last-child,
.cb-pp-compare__row > *:last-child,
.cb-pp-compare__cta > *:last-child { border-right: 0; }

.cb-pp-compare__head {
    background: var(--color-secondary);
    color: #fff;
    font-size: 13px;
}

.cb-pp-compare__head > * { border-right-color: rgba(255, 255, 255, 0.13); }
.cb-pp-compare__head span { color: #bdc8d4; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

.cb-pp-compare__head b {
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: 15px;
}

.cb-pp-compare__head b.is-current { color: var(--color-primary); }
.cb-pp-compare__head b a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }

.cb-pp-compare__head em {
    display: block;
    font-style: normal;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-top: 5px;
}

.cb-pp-compare__row { font-size: 12px; }
.cb-pp-compare__row:nth-of-type(odd) { background: #f5f2ec; }
.cb-pp-compare__row span { color: #697481; }
.cb-pp-compare__row b { font-weight: var(--font-medium); color: var(--color-text); }

.cb-pp-compare__cta > * { padding: 12px; }

.cb-pp-compare__btn {
    display: block;
    text-align: center;
    background: var(--color-primary);
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 10px;
}

a.cb-pp-compare__btn:hover { background: var(--color-secondary); color: #fff; }

.cb-pp-compare__btn.is-current {
    background: transparent;
    color: var(--cb-muted);
    border: 1px dashed var(--cb-line);
}

.cb-pp-scrollhint {
    font-size: 11px;
    color: var(--color-text-lighter);
    text-align: right;
    margin: 0 0 8px;
}

/* ============================================================
   区块 6：资源条（原型 .supportBand）
   ============================================================ */
.cb-pp-support {
    max-width: var(--cb-maxw);
    margin: 0 auto;
    /* 与 .cb-pp__inner 一致：左右 20px 由外层 .site-content 统一提供，
       此处不再自带 gutter，否则 4 列内容会比其它区块多缩进 20px。 */
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.cb-pp-support__item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    text-decoration: none;
    color: var(--color-secondary);
    padding: 10px 0;
}

.cb-pp-support__num {
    grid-row: 1 / 3;
    font-family: var(--font-heading);
    font-size: 24px;
    opacity: 0.5;
    line-height: 1;
}

.cb-pp-support__label {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: var(--font-bold);
}

.cb-pp-support__sub { font-size: 10px; margin-top: 4px; color: rgba(25, 42, 68, 0.75); }

a.cb-pp-support__item:hover .cb-pp-support__label { text-decoration: underline; }

/* ============================================================
   区块 7：评价（原型 .reviews / .bigRating / .reviewCards）
   ============================================================ */
.cb-pp-anchor {
    display: block;
    position: relative;
    top: calc(var(--header-height) * -1);
    visibility: hidden;
}

.cb-pp-reviews {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.cb-pp-reviews__summary .cb-pp__head { margin-bottom: 20px; }

.cb-pp-bigrating {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 28px 0;
}

.cb-pp-bigrating > b {
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: 54px;
    line-height: 1;
    color: var(--color-secondary);
}

.cb-pp-bigrating small { display: block; color: #6c7783; font-size: 10px; margin-top: 6px; }

.cb-pp-reviews__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.cb-pp-rcard {
    background: var(--color-white);
    padding: 18px;
    margin: 0;
}

.cb-pp-rcard__media {
    display: block;
    position: relative;
    height: 270px;
    overflow: hidden;
}

.cb-pp-rcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cb-pp-rcard__media.is-placeholder {
    background: linear-gradient(145deg, #1e466f, #b99a55);
    color: #fff;
    display: flex;
    align-items: flex-end;
    padding: 18px;
    font-size: 10px;
    letter-spacing: 0.12em;
}

.cb-pp-rcard__media.is-video::after {
    content: "▶";
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-secondary);
    display: grid;
    place-items: center;
    font-size: 14px;
}

.cb-pp-rcard .cb-pp-stars { margin-top: 17px; }

.cb-pp-rcard__quote {
    font-family: var(--font-heading);
    font-weight: var(--font-normal);
    font-size: 19px;
    line-height: 1.4;
    color: var(--color-secondary);
    margin: 8px 0;
}

.cb-pp-rcard__who { color: #7a8490; font-size: 10px; margin: 0; }

/* WooCommerce 原生评价块：以前藏在默认 tabs 里、全站没写过样式,
   现在它是本区块的主体,补一层与品牌一致的最小化换肤。 */
.cb-pp-reviews__native {
    margin-top: 45px;
    background: var(--color-white);
    border: 1px solid var(--cb-line);
    padding: 28px;
}

.cb-pp-reviews__native #reviews > h2,
.cb-pp-reviews__native .woocommerce-Reviews-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.cb-pp-reviews__native .woocommerce-noreviews,
.cb-pp-reviews__native .comment-notes {
    font-size: 13px;
    color: var(--cb-muted);
    margin: 0 0 20px;
}

.cb-pp-reviews__native #reply-title {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 16px;
}

.cb-pp-reviews__native .commentlist { list-style: none; margin: 0 0 32px; padding: 0; }
.cb-pp-reviews__native .commentlist li { border-bottom: 1px solid var(--cb-line); padding: 20px 0; }

.cb-pp-reviews__native .comment-form label {
    display: block;
    font-size: 12px;
    color: var(--cb-muted);
    margin-bottom: 4px;
}

.cb-pp-reviews__native .comment-form input[type="text"],
.cb-pp-reviews__native .comment-form input[type="email"],
.cb-pp-reviews__native .comment-form textarea {
    width: 100%;
    max-width: 520px;
    padding: 11px 13px;
    border: 1px solid var(--cb-line);
    font-family: var(--font-body);
    font-size: 13px;
    background: var(--color-white);
}

.cb-pp-reviews__native .comment-form textarea { max-width: 100%; min-height: 120px; }
.cb-pp-reviews__native .comment-form-cookies-consent label { display: inline; font-size: 12px; }
.cb-pp-reviews__native .comment-form-rating .stars a { color: var(--color-primary); }

/* WooCommerce 用 `#respond input#submit`（两个 ID）上了浅灰底,权重高,
   必须用同权重 + 一个类才盖得住（wc-skin 里同样的套路）。 */
.cb-pp-reviews__native #respond input#submit,
.cb-pp-reviews__native .form-submit input[type="submit"] {
    background: var(--color-secondary);
    color: #fff;
    border: 0;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 15px 22px;
    cursor: pointer;
    transition: var(--transition-base);
}

.cb-pp-reviews__native #respond input#submit:hover {
    background: var(--color-primary);
    color: var(--color-secondary);
}

/* ============================================================
   区块 8：FAQ（原型 .faqList —— 序号 + 大字问句 + ± 号）
   ============================================================ */
.cb-pp-faq {
    max-width: 100%;
    border-top: 1px solid var(--cb-line);
}

.cb-pp-faq__item { border-bottom: 1px solid var(--cb-line); }

.cb-pp-faq__q {
    display: grid;
    grid-template-columns: 38px 1fr 26px;
    align-items: center;
    gap: 0;
    cursor: pointer;
    list-style: none;
    padding: 22px 0;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: var(--font-normal);
    line-height: 1.35;
    color: var(--color-secondary);
}

.cb-pp-faq__q::-webkit-details-marker { display: none; }

.cb-pp-faq__q .cb-pp-num {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: var(--font-bold);
}

.cb-pp-faq__sign {
    text-align: right;
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: var(--font-light);
    color: var(--color-secondary);
    line-height: 1;
}

.cb-pp-faq__sign::before { content: "+"; }
.cb-pp-faq__item[open] .cb-pp-faq__sign::before { content: "−"; }

.cb-pp-faq__a {
    color: #627080;
    line-height: 1.7;
    font-size: 13px;
    max-width: 850px;
    margin: 0 0 24px 38px;
}

/* ============================================================
   区块 9：配件（原型 .accessoryGrid —— 圆形 + 按钮）
   ============================================================ */
.cb-pp-acc {
    background: var(--color-white);
    border: 1px solid var(--cb-line);
    padding: 15px;
    display: flex;
    flex-direction: column;
}

.cb-pp-acc__media { display: block; height: 240px; overflow: hidden; }
.cb-pp-acc__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cb-pp-acc__title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: var(--font-bold);
    line-height: 1.3;
    margin: 16px 0 6px;
}

.cb-pp-acc__title a { color: var(--color-secondary); text-decoration: none; }
.cb-pp-acc__title a:hover { color: var(--color-primary); }

.cb-pp-acc__desc { color: #6b7683; font-size: 12px; line-height: 1.6; margin: 0 0 14px; }

.cb-pp-acc__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cb-pp-acc__price {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    color: var(--color-secondary);
}

.cb-pp-acc__price del { display: none; }
.cb-pp-acc__price ins { text-decoration: none; }

.woocommerce .cb-pp-acc .cb-pp-acc__add,
.cb-pp-acc__add {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--color-secondary);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-secondary);
    font-size: 18px;
    line-height: 34px;
    text-align: center;
    text-decoration: none;
    transition: var(--transition-base);
}

.woocommerce .cb-pp-acc .cb-pp-acc__add:hover,
.cb-pp-acc__add:hover { background: var(--color-secondary); color: #fff; }

/* ============================================================
   区块 10：品牌故事（原型 .story —— 左标题 / 右正文,底对齐）
   ============================================================ */
.cb-pp-story {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: end;
}

.cb-pp-story__body {
    color: #bcc6d0;
    line-height: 1.8;
    font-size: var(--text-base);
}

.cb-pp-story__body p { margin: 0 0 14px; }

/* ============================================================
   移动端吸底购买条（原型 .mobileBuyBar）
   ============================================================ */
.cb-pp-stickybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px;
    background: var(--color-white);
    border-top: 1px solid #ddd8ce;
    box-shadow: 0 -8px 25px rgba(20, 40, 65, 0.12);
    transform: translateY(110%);
    transition: transform var(--transition-base);
    pointer-events: none;
}

.cb-pp-stickybar.is-visible { transform: translateY(0); pointer-events: auto; }

.cb-pp-stickybar__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cb-pp-stickybar__text small {
    font-size: 9px;
    color: #737e89;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cb-pp-stickybar__price {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: var(--font-bold);
    color: var(--color-secondary);
}

.cb-pp-stickybar__price del { display: none; }
.cb-pp-stickybar__price ins { text-decoration: none; }

.cb-pp-stickybar__btn {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: 2px;
    background: var(--color-primary);
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.cb-pp-stickybar__oos { font-size: 12px; color: #a33; }

body.cb-pp-has-stickybar { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

/* ============================================================
   ≥761px：平板（原型断点 760）
   ============================================================ */
@media (min-width: 761px) {
    .cb-pp { padding: 100px 0; }
    .cb-pp--resources { padding: 35px 0; }
    .cb-pp--compat { padding: 0; }

    /* 桌面横向留白由 --cb-gutter(20px) + max-width:1280 统一控制，
       删除原先的 0 5vw（1440 屏≈72px，与 hero 的 20px 不一致，是桌面错位主因）。 */

    .cb-pp__head--split {
        grid-template-columns: 1fr 1fr;
    }

    .cb-pp__head--split .cb-pp__eyebrow { grid-column: 1 / -1; }
    .cb-pp__head--split .cb-pp__intro { align-self: end; margin-top: 0; }

    .cb-pp-grid { grid-template-columns: repeat(2, 1fr); }
    .cb-pp-family__grid { grid-template-columns: repeat(2, 1fr); }
    .cb-pp-steps { grid-template-columns: repeat(2, 1fr); }
    .cb-pp-detail { grid-template-columns: 1fr 1fr; }
    .cb-pp-box { grid-template-columns: 0.9fr 1.1fr; }
    .cb-pp-box__mock { min-height: 340px; font-size: 26px; }
    .cb-pp-support { grid-template-columns: repeat(2, 1fr); }
    .cb-pp-reviews__cards { grid-template-columns: repeat(2, 1fr); }
    .cb-pp-bcard { min-height: 280px; }

    .cb-pp--compat { grid-template-columns: 1fr 1fr; min-height: 680px; }
    .cb-pp-suit__visual { min-height: 100%; }
    .cb-pp-suit__copy { padding: 9vw 6vw; }

    .cb-pp-faq__q { grid-template-columns: 60px 1fr 40px; font-size: 20px; }
    .cb-pp-faq__a { margin-left: 60px; }

    /* 信任行三列（原型 .trustStrip） */
    .cb-pp-trust { grid-template-columns: repeat(3, 1fr); gap: 8px; }

    .cb-pp-compare__row,
    .cb-pp-compare__head,
    .cb-pp-compare__cta { min-width: 700px; }

    .cb-pp-scrollhint { display: none; }
}

/* ============================================================
   ≥1051px：桌面（原型断点 1050）—— 4 列
   ============================================================ */
@media (min-width: 1051px) {
    .cb-pp-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .cb-pp-grid--4 { grid-template-columns: repeat(4, 1fr); }
    .cb-pp-steps { grid-template-columns: repeat(4, 1fr); }
    .cb-pp-support { grid-template-columns: repeat(4, 1fr); }
    .cb-pp-support__item { border-right: 1px solid rgba(19, 43, 73, 0.25); }
    .cb-pp-support__item:last-child { border-right: 0; }

    .cb-pp-reviews { grid-template-columns: 1fr 1.7fr; gap: 55px; }
    .cb-pp-story { grid-template-columns: 1.3fr 0.7fr; gap: 100px; }

    .cb-pp-compare__row,
    .cb-pp-compare__head,
    .cb-pp-compare__cta { min-width: 0; }

    .cb-pp-compare { overflow: visible; }

    /* 吸底条只服务移动/平板 */
    .cb-pp-stickybar { display: none !important; }
    body.cb-pp-has-stickybar { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cb-pp-stickybar { transition: none; }
}