/* ============================================
   小头盔 xiaotoukui - 商品购买页 · 清爽海洋风
   ============================================ */

.hc-buy-page {
    padding:0 0 40px;
}

/* 面包屑（2026-10-12 修「顶部溢出一块」：原透明 nav 块裸透在星海上，
   导航与舞台卡之间读作一条多余的深色带——改胶囊玻璃片，与暗玻璃
   内容家族同语言，变成有意设计的第一行内容，顺带收紧纵向占位） */
.hc-buy-page .hc-breadcrumb {
    display:inline-flex;
    align-items:center;
    gap:8px;
    max-width:100%;
    margin:8px 0 2px;
    padding:7px 14px;
    border-radius:999px;
    background:rgba(255, 255, 255, 0.05);
    border:1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    font-size:12px;
    white-space:nowrap;
}
/* 商品名过长在胶囊内截断（首页/分类锚点保完整，末段省略号） */
.hc-buy-page .hc-breadcrumb .hc-breadcrumb-current {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ===== 左：商品图（舞台左列，2026-10-07 半屏舞台化；sticky 见 .hc-buy-stage-copy） ===== */
.hc-buy-img-wrap {
    width:100%;
    aspect-ratio:1;
    /* 2026-10-01 用户拍板大圆角 110px（原 var(--hc-radius-lg)）：容器 overflow:hidden，
       img 与潮汐 canvas 一并被裁切跟随 */
    border-radius:110px;
    overflow:hidden;
    background:var(--hc-bg);
    border:1px solid var(--hc-line-3);
    box-shadow:0 4px 16px rgba(30, 27, 46, 0.06);
}

.hc-buy-img-wrap img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.hc-buy-tags {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}

.hc-buy-tag {
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:12px;
    padding:4px 10px;
    border-radius:20px;
    font-weight:500;
}

/* hc-tag-auto/manual 已随类型角标下线删除；hc-tag-stock 仍被 buy 页使用 */

.hc-tag-stock {
    background:var(--hc-primary-50);
    color:var(--hc-primary);
}

/* 信任保障 */
.hc-buy-trust {
    display:flex;
    gap:16px;
    margin-top:16px;
    padding:14px 16px;
    background:var(--hc-primary-50);
    border-radius:var(--hc-radius);
    border:1px solid var(--hc-primary-100);
}

.hc-buy-trust-item {
    display:flex;
    align-items:center;
    gap:5px;
    font-size:12px;
    color:var(--hc-text-secondary);
}

.hc-buy-trust-item svg {
    color:var(--hc-primary);
    flex-shrink:0;
}

/* ===== 右：购买表单 ===== */
.hc-buy-form {
    background:var(--hc-surface);
    border-radius:var(--hc-radius-lg);
    padding:28px;
    border:1px solid var(--hc-line-3);
    box-shadow:0 4px 18px rgba(30, 27, 46, 0.05);
}

/* 商品标题区 */
.hc-buy-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    padding-bottom:20px;
    border-bottom:2px solid var(--hc-primary-50);
    margin-bottom:24px;
}

.hc-buy-header h1 {
    font-size:22px;
    font-weight:700;
    color:var(--hc-text);
    margin:0;
    line-height:1.4;
    flex:1;
}

.hc-buy-limit {
    display:inline-block;
    background:var(--hc-danger-50);
    color:var(--hc-price);
    font-size:12px;
    padding:3px 10px;
    border-radius:6px;
    margin-bottom:20px;
}

/* 区块 */
.hc-buy-section {
    padding:16px 0;
    border-bottom:1px solid var(--hc-line-13);
}

.hc-buy-section:last-of-type {
    border-bottom:none;
}

/* 字段 */
.hc-buy-field {
    margin-bottom:16px;
}

.hc-buy-field:last-child {
    margin-bottom:0;
}

/* 字段标签：小号大写字距的 kicker 风（原 178 行旧版定义已被本版完全覆盖，直接删除） */
.hc-buy-field-label {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:12px;
    font-weight:700;
    color:var(--hc-text-secondary);
    margin-bottom:9px;
    letter-spacing:0.6px;
}

/* 输入框 */
.hc-buy-input {
    border:1.5px solid var(--hc-border) !important;
    border-radius:8px !important;
    padding:9px 14px !important;
    font-size:14px !important;
    transition:border-color 0.2s, box-shadow 0.2s !important;
}

.hc-buy-input:focus {
    border-color:var(--hc-primary) !important;
    box-shadow:0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

/* 标签前的潮点 */
.hc-buy-field-label::before {
    content:"";
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--hc-pink);
    box-shadow:0 0 0 2px rgba(236, 72, 153, 0.18);
    flex-shrink:0;
}

/* 规格选择 */
.hc-spec-options {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.hc-face-options {
    gap:10px;
}

.hc-spec-chip {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 16px;
    border:1.5px solid var(--hc-border);
    border-radius:10px;
    cursor:pointer;
    transition:all 0.2s;
    font-size:13px;
    color:var(--hc-text-secondary);
    background:var(--hc-surface);
    user-select:none;
}

/* 单选圆点（规格 chip） */
.hc-spec-chip::before {
    content:"";
    width:14px;
    height:14px;
    border-radius:50%;
    border:1.5px solid var(--hc-line-14);
    background:var(--hc-surface);
    flex-shrink:0;
    transition:all 0.18s;
}

.hc-spec-chip:hover {
    border-color:var(--hc-primary-light);
    color:var(--hc-primary);
}

.hc-spec-chip:hover::before { border-color:var(--hc-primary-light); }

.hc-spec-chip.active {
    border-color:var(--hc-primary);
    background:var(--hc-primary-50);
    color:var(--hc-primary-dark);
    font-weight:600;
    box-shadow:0 2px 10px -2px rgba(124, 58, 237, 0.3);
}

.hc-spec-chip.active::before {
    border-color:var(--hc-primary);
    border-width:4.5px;
}

.hc-spec-chip input[type="radio"] {
    display:none;
}

/* 面值 chip：纵向排列名称和价格 */
.hc-face-chip {
    flex-direction:column;
    align-items:center;
    min-width:90px;
    padding:10px 14px;
    gap:2px;
}

.hc-face-name {
    font-size:13px;
    font-weight:600;
}

/* 面值营销角标：档配置 tag 字段（如"优惠""限时"）右上角小胶囊 */
.hc-face-chip { position:relative; }
.hc-face-tag {
    position:absolute;
    top:-7px;
    right:-6px;
    padding:2px 7px;
    border-radius:999px;
    background:linear-gradient(135deg, var(--hc-accent-400), var(--hc-pink));
    color:var(--hc-on-brand);
    font-size:10px;
    font-weight:700;
    line-height:1;
    box-shadow:0 2px 6px rgba(236, 72, 153, 0.4);
    pointer-events:none;
    white-space:nowrap;
}

.hc-face-price {
    font-size:12px;
    /* 定向提亮（不动全局 --hc-text-muted）：面值价格小字对比度 4.2→5.0，axe color-contrast 达标 */
    color:#928CB0;
}

/* 划线原价（KA 模式促销锚）：现价右侧小号删除线 */
.hc-face-retail {
    font-size:10.5px;
    color:var(--hc-text-faint);
    text-decoration:line-through;
}

.hc-face-chip.active .hc-face-price {
    color:var(--hc-price);
    font-weight:700;
}

/* 支付方式 */
/* ===== 支付方式：品牌磁贴网格（2026-09-07 改版）=====
   两列磁贴 + 品牌图标 + 右侧选中对勾；信用卡通道通栏（卡组织列表降为副标题）。
   JS 只认 label.hc-pay-chip、input[name=payway]、active 类——结构钩子勿动 */
.hc-pay-sprite {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}

.hc-pay-options {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
}

.hc-pay-chip {
    display:flex;
    align-items:center;
    gap:10px;
    min-height:54px;
    padding:8px 10px;
    border:1.5px solid var(--hc-border);
    border-radius:var(--hc-radius);
    cursor:pointer;
    background:var(--hc-surface);
    user-select:none;
    transition:border-color 0.18s, background 0.18s, box-shadow 0.18s;
    min-width:0;
}

/* 信用卡通道：通栏（副标题要放卡组织列表） */
.hc-pay-chip.hc-pay-wide {
    grid-column:1 / -1;
}

.hc-pay-mark {
    width:26px;
    height:26px;
    flex-shrink:0;
    border-radius:7px;
}

.hc-pay-text {
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    flex:1;
    line-height:1.25;
}

.hc-pay-name {
    font-size:13px;
    font-weight:600;
    color:var(--hc-text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:color 0.18s;
}

.hc-pay-sub {
    font-size:11px;
    color:var(--hc-text-muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-top:1px;
}

/* 选中对勾：占位常在（文字不跳动），未选中时隐没 */
.hc-pay-check {
    width:18px;
    height:18px;
    flex-shrink:0;
    opacity:0;
    transform:scale(0.55);
    transition:opacity 0.18s, transform 0.18s var(--hc-ease-out);
}

.hc-pay-chip:hover {
    border-color:var(--hc-primary-200);
}

.hc-pay-chip:hover .hc-pay-name {
    color:var(--hc-primary);
}

.hc-pay-chip.active {
    border-color:var(--hc-primary);
    background:var(--hc-primary-50);
    box-shadow:0 2px 10px -2px rgba(124, 58, 237, 0.3);
}

.hc-pay-chip.active .hc-pay-name {
    color:var(--hc-primary-dark);
}

.hc-pay-chip.active .hc-pay-check {
    opacity:1;
    transform:scale(1);
}

/* 键盘焦点环（radio 本体视觉隐藏，焦点转移到磁贴上） */
.hc-pay-chip:has(input:focus-visible) {
    outline:2px solid var(--hc-primary-light);
    outline-offset:2px;
}

.hc-pay-chip input[type="radio"] {
    position:absolute;
    opacity:0;
    pointer-events:none;
    width:0;
    height:0;
}

/* 窄屏单列（面板 < 400px 时两列磁贴放不下名称） */
@media (max-width:399px) {
    .hc-pay-options {
        grid-template-columns:1fr;
    }

    .hc-pay-chip.hc-pay-wide {
        grid-column:auto;
    }
}

/* 提交按钮：视觉动效由 .hc-btn-tide 统一供给（blade 已挂类），这里只管尺寸排版 */
.hc-buy-submit-wrap {
    margin-top:24px;
}

/* 会员等级折扣提示：合计行下方（等级服务端判定，立减额 JS 实时更新；品牌紫对金色文案） */
.hc-member-note {
    margin-top:6px;
    margin-bottom:6px;
    font-size:12px;
    color:var(--hc-primary-dark);
    background:var(--hc-primary-50);
    border:1px solid var(--hc-line-15);
    border-radius:8px;
    padding:5px 10px;
    display:flex;
    align-items:baseline;
    gap:6px;
}
.hc-member-badge { font-weight:700; }
.hc-member-badge em { font-style:normal; margin-left:4px; opacity:0.85; }
.hc-member-save { font-weight:800; margin-left:auto; }

/* 价格明细弹层（Ⓘ）2026-09-22 下线：弹层只剩与合计重复的数字（券/处理费
   均已迁结算页），hc-pd-* 样式段整删——历史见 git */

.hc-buy-submit {
    width:100%;
    padding:14px;
    font-size:16px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.hc-buy-submit .ali-icon {
    font-size:18px;
}

/* ===== 商品描述（星海玻璃岛，2026-10-07 融合四改：暗玻璃与星海同色调；
   2026-10-21 亮色主题批拆分：布局共享，玻璃底分主题——亮色白玻璃变体见文末） ===== */
.hc-buy-desc {
    margin-top:28px;
    border-radius:var(--hc-radius-lg);
    overflow:hidden;
}
html[data-theme="dark"] .hc-buy-desc {
    background:rgba(18, 13, 34, 0.5);
    -webkit-backdrop-filter:blur(16px) saturate(1.3);
    backdrop-filter:blur(16px) saturate(1.3);
    border:1px solid rgba(255, 255, 255, 0.12);
    box-shadow:0 24px 64px -32px rgba(0, 0, 0, 0.6);
}

.hc-buy-desc-header {
    display:flex;
    align-items:center;
    gap:6px;
    padding:16px 24px;
    font-size:15px;
    font-weight:700;
    color:var(--hc-text);
    border-bottom:1px solid var(--hc-line-3);
    background:linear-gradient(180deg, rgba(124, 58, 237, 0.07), transparent);
}

.hc-buy-desc-header .ali-icon {
    color:var(--hc-primary);
    font-size:18px;
}

.hc-buy-desc-body {
    padding:20px 24px;
    font-size:14px;
    line-height:1.8;
    color:var(--hc-text-secondary);
}

.hc-buy-desc-body p {
    margin-bottom:10px;
}

.hc-buy-desc-body ul, .hc-buy-desc-body ol {
    padding-left:20px;
    margin-bottom:10px;
}

/* 结构化商品介绍（2026-10-17 描述管线：标签列表逐行留白，b 标签口径统一） */
.hc-buy-desc-body li {
    margin:5px 0;
}

.hc-buy-desc-body li b {
    color:var(--hc-text);
    font-weight:600;
}

/* ===== 响应式 ===== */
@media (max-width:767.98px) {
    .hc-buy-form {
        padding:20px 16px;
    }

    .hc-buy-header {
        flex-direction:column;
        gap:8px;
    }

    .hc-buy-header h1 {
        font-size:18px;
    }

    .hc-buy-trust {
        flex-wrap:wrap;
        gap:10px;
    }

    .hc-spec-chip {
        padding:6px 12px;
        font-size:12px;
    }

    .hc-face-chip {
        min-width:72px;
        padding:8px 10px;
    }

    .hc-pay-chip {
        padding:8px 14px;
        font-size:13px;
    }
}

/* ===== 购买面板组件通用（buy 页 / 首页共用） ===== */
.hc-panel-goods-img { width:72px; height:72px; border-radius:14px; object-fit:cover; background:var(--hc-bg-alt); flex-shrink:0; }
.hc-panel-header-main { flex:1; min-width:0; }
.hc-panel-wholesale-tip { font-size:12px; color:var(--hc-success-700); background:var(--hc-success-bg-2); border-radius:8px; padding:2px 8px; margin-top:6px; display:inline-block; }

/* 数量步进器（2026-10-07 用户反馈「输入框样式问题」重构）：一体式胶囊。
   旧结构高度由 input 的 padding 撑、按钮靠 align-items:stretch 追平——两条
   渲染路径在不同浏览器/缩放/旧缓存组合下会高矮不一（用户实证）。新结构
   高度/边框/圆角全部由容器统一供给，三段一律 height:100%、自身无边框，
   与 App 端一体步进器同语言；聚焦态由容器 :focus-within 统一给 */
.hc-qty-stepper {
    display:inline-flex;
    align-items:stretch;
    height:46px;
    /* 2026-10-12 修「按钮边框与 input 不对齐」：外框原 1.5px、input 两侧分隔线
       1px——半像素外框在 1x 屏渲染成忽粗忽细的模糊线，且与分隔线粗细不一致
       读作错位。统一 1px，外框/分隔线像素级同粗，四角完全闭合 */
    border:1px solid var(--hc-border);
    border-radius:10px;
    background:var(--hc-surface);
    overflow:hidden;
    transition:border-color .2s, box-shadow .2s;
}
.hc-qty-stepper:focus-within {
    border-color:var(--hc-primary);
    box-shadow:0 0 0 3px rgba(124, 58, 237, .1);
}
.hc-qty-stepper .hc-qty-input {
    width:76px;
    height:100%;
    border:none !important;
    border-left:1px solid var(--hc-border) !important;
    border-right:1px solid var(--hc-border) !important;
    border-radius:0 !important;
    padding:0 4px !important;
    box-shadow:none !important;
    background:transparent;
    text-align:center;
    -moz-appearance:textfield;
}
.hc-qty-stepper .hc-qty-input::-webkit-outer-spin-button, .hc-qty-stepper .hc-qty-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.hc-qty-btn {
    width:44px;
    height:100%;
    border:none;
    background:transparent;
    color:var(--hc-text-secondary);
    font-size:17px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .15s, color .15s;
}
.hc-qty-btn:hover { background:var(--hc-primary-100); color:var(--hc-primary); }
.hc-qty-btn:active { background:var(--hc-primary-150); }

/* 2026-09-19 用户反馈：实付额与金额垂直居中（原 flex-start+line-height 凑对齐在大字号价格下偏移） */
.hc-buy-total-row { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; margin-top:4px; background:linear-gradient(135deg,var(--hc-totalrow-1) 0%,var(--hc-totalrow-2) 100%); border:1px solid var(--hc-line-16); border-radius:12px; }
.hc-buy-total-label { font-size:13px; color:var(--hc-primary-800); font-weight:600; line-height:1.5; }
.hc-buy-total-right { text-align:right; }
.hc-buy-total-price { font-size:26px; font-weight:700; color:var(--hc-price); line-height:1.1; }

/* ===== 合计金额数字滚动（2026-09-20，buy-panel.js recalc 文本变化时挂类重放） =====
   变大/等值（切币种）：新值自下上浮 + 轻微回弹，只做动势不加色；
   变小（选档变省/会员折/批发）：上浮同时闪一次成功绿再回落价格红——「省了」的奖励感。
   inline-block 是 transform 前提（原 strong 为 inline）；全局 prefers-reduced-motion
   基座（base.css 0.01ms 兜底）自动降级为瞬换。 */
.hc-buy-total-price.hc-tick-up, .hc-buy-total-price.hc-tick-down { display:inline-block; }
.hc-buy-total-price.hc-tick-up { animation:hcTickUp .3s var(--hc-ease-out) both; }
.hc-buy-total-price.hc-tick-down { animation:hcTickDown .45s var(--hc-ease-out) both; }
@keyframes hcTickUp {
    0% { opacity:0; transform:translateY(9px) scale(.95); }
    60% { opacity:1; transform:translateY(0) scale(1.04); }
    100% { transform:none; }
}
@keyframes hcTickDown {
    0% { opacity:0; transform:translateY(9px); color:var(--hc-success-700); }
    45% { opacity:1; color:var(--hc-success-700); }
    100% { transform:none; color:var(--hc-price); }
}

/* ===== 首页快速下单面板（窄列适配层） ===== */
/* 步进器旧中和规则已撤（2026-10-07 重构）：主区新结构容器定高、三段无边框，
   !important 中和不再需要（残留的 padding !important 会盖掉新结构的 0 padding） */

/* 支付方式长名（如 Stripe [Card/Apple Pay/Google Pay]）允许换行不溢出 */
.hc-pay-chip { max-width:100%; white-space:normal; word-break:break-word; line-height:1.3; }

/* 窄列面板整体收紧（初版值已被下方"紧凑模式"覆盖，仅保留仍生效的 flex-wrap 与 margin-top） */
.hc-home-panel-sticky .hc-buy-header { flex-wrap:wrap; }
.hc-home-panel-sticky .hc-buy-section { margin-top:14px; }

/* ===== 首页面板紧凑模式（目标：常规视口内完整展示、不出现内部滚动条） ===== */
.hc-home-panel-sticky .hc-buy-form { padding:14px; }
.hc-home-panel-sticky .hc-buy-header { padding-bottom:10px; gap:8px; }
.hc-home-panel-sticky .hc-buy-header h1 { font-size:15px; }
.hc-home-panel-sticky .hc-panel-goods-img { width:68px; height:68px; border-radius:14px; }
.hc-home-panel-sticky .hc-buy-limit { margin-bottom:8px; padding:2px 8px; font-size:11px; }
.hc-home-panel-sticky .hc-buy-section { padding:10px 0; }
.hc-home-panel-sticky .hc-buy-field { margin-bottom:10px; }
.hc-home-panel-sticky .hc-buy-field:last-child { margin-bottom:0; }
.hc-home-panel-sticky .hc-buy-field-label { font-size:12px; margin-bottom:6px; }
.hc-home-panel-sticky .hc-spec-options { gap:6px; }
.hc-home-panel-sticky .hc-spec-chip { padding:5px 12px; font-size:12.5px; }
.hc-home-panel-sticky .hc-face-chip { min-width:72px; padding:6px 10px; }
.hc-home-panel-sticky .hc-face-name { font-size:12px; }
.hc-home-panel-sticky .hc-face-price { font-size:11px; }
.hc-home-panel-sticky .hc-pay-chip { padding:6px 14px; font-size:12.5px; }
.hc-home-panel-sticky .hc-buy-input { padding:7px 12px !important; font-size:13px !important; }
.hc-home-panel-sticky .hc-qty-btn { width:34px; }
.hc-home-panel-sticky .hc-qty-stepper .hc-qty-input { width:60px; }
.hc-home-panel-sticky .hc-buy-total-row { padding:8px 12px; border-radius:10px; margin-top:0; }
.hc-home-panel-sticky .hc-buy-total-label { font-size:12px; line-height:1.5; }
.hc-home-panel-sticky .hc-buy-total-price { font-size:20px; }
.hc-home-panel-sticky .hc-panel-wholesale-tip { font-size:11px; padding:1px 7px; margin-top:3px; }
.hc-home-panel-sticky .hc-buy-submit { padding:10px; font-size:14.5px; border-radius:10px; }
/* 合计行与下单键之间留呼吸感（紧凑模式原清零导致贴死，2026-09-02 用户报不好看） */
.hc-home-panel-sticky .hc-buy-submit-wrap { margin-top:14px; }
/* 兜底仍保留滚动能力，但把可用高度撑满视口剩余空间，常规内容不再触发 */
.hc-home-panel-sticky { top:150px; max-height:calc(100vh - 166px); }
body.hc-scrolled .hc-home-panel-sticky { top:72px; max-height:calc(100vh - 88px); }

/* ===== 面板头部重排：图 + 标题行（行内价格框已随 2026-09-17 用户拍板下线） ===== */
.hc-panel-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hc-panel-title-row h1 { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hc-panel-header-main { flex:1 1 calc(100% - 80px); min-width:0; }

/* 号箱档案 chip（hc-profile-*）已随号箱功能下线删除（buy-panel.js 注释同证） */

/* 新人礼包券条（hc-newbie-*）已随优惠码入口一起迁至确认订单页删除（2026-09-18；
   bill 页的礼包券条是 bill 自有样式 hc-bill-newbie-*，见 bill.blade.php 内联样式） */

/* ===== 买家评价区（原在 index.css，归位：唯一消费者是 buy 页 _goods_reviews partial） ===== */
/* 2026-10-21 精修重做：头部聚合（大均分+星条）、头像圈评价卡、对话串气泡
   （对话串本体样式 hc-rv-* 在 common.css——订单详情页「我的评价」卡共用）。
   玻璃岛底分主题（2026-10-21 亮色主题批）：暗=深紫玻璃（原样），亮=白玻璃（文末） */
.hc-buy-reviews { margin-top:28px; border-radius:var(--hc-radius-lg, 16px); padding:24px 28px 26px; }
html[data-theme="dark"] .hc-buy-reviews { background:rgba(18, 13, 34, 0.5); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border:1px solid rgba(255, 255, 255, 0.12); box-shadow:0 24px 64px -32px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .hc-buy-reviews-head { border-bottom:1px solid rgba(255, 255, 255, 0.08); }
.hc-buy-reviews-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-bottom:14px; }
.hc-buy-reviews-title { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--hc-text); }
.hc-buy-reviews-title svg { color:var(--hc-warning-bright); flex-shrink:0; }
.hc-buy-reviews-agg { margin-left:auto; display:inline-flex; align-items:baseline; gap:10px; }
.hc-agg-avg { font-size:24px; font-weight:800; line-height:1; color:var(--hc-warning-bright); letter-spacing:-0.5px; font-variant-numeric:tabular-nums; }
.hc-agg-stars { display:inline-flex; gap:2px; font-size:13px; line-height:1; align-self:center; }
.hc-agg-stars i { font-style:normal; color:var(--hc-line-6); }
.hc-agg-stars i.on { color:var(--hc-warning-bright); }
.hc-agg-count { font-size:12.5px; color:var(--hc-text-muted); font-weight:500; }
.hc-buy-reviews-body { margin-top:4px; }
.hc-buy-reviews-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:34px 0 30px; color:var(--hc-text-muted); }
.hc-buy-reviews-empty svg { opacity:.55; }
.hc-buy-reviews-empty p { margin:0; font-size:13px; }
.hc-buy-reviews-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.hc-buy-review { padding:18px 0 16px; border-bottom:1px dashed var(--hc-line-2); }
.hc-buy-review:last-child { border-bottom:none; }
.hc-buy-review-main { display:flex; gap:14px; align-items:flex-start; }
.hc-buy-review-col { flex:1; min-width:0; }
.hc-buy-review-head { display:flex; align-items:center; gap:10px; margin-bottom:7px; flex-wrap:wrap; }
.hc-buy-review-mail { font-size:12.5px; color:var(--hc-text-secondary); font-family:ui-monospace, Menlo, Consolas, monospace; }
.hc-buy-review-stars { display:inline-flex; gap:1px; font-size:13px; line-height:1; }
.hc-buy-review-stars i { font-style:normal; color:var(--hc-line-6); }
.hc-buy-review-stars i.on { color:var(--hc-warning-bright); }
.hc-buy-review-time { margin-left:auto; font-size:12px; color:var(--hc-text-muted); }
.hc-buy-review-content { margin:0; font-size:13.5px; line-height:1.8; color:var(--hc-text); word-break:break-word; }
/* 头像圈：邮箱首字母+稳定 hue（--rv-hue 由模板内联注入） */
.hc-rv-avatar { flex-shrink:0; width:38px; height:38px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; color:#fff; background:linear-gradient(135deg, hsl(var(--rv-hue, 265) 70% 58%), hsl(calc(var(--rv-hue, 265) + 40) 72% 46%)); box-shadow:0 6px 16px -6px hsl(var(--rv-hue, 265) 60% 40% / .55), inset 0 1px 0 rgba(255,255,255,.25); user-select:none; }
.hc-buy-review-content { margin:0; font-size:13.5px; line-height:1.8; color:var(--hc-text, var(--hc-text)); word-break:break-word; }

/* ===== 限时促销（P2）：促销条（角标+倒计时）；面板划线原价随顶部价格框下线（2026-09-17） ===== */
.hc-panel-promo-bar {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px;
}
.hc-panel-promo-badge {
    display:inline-flex; align-items:center;
    background:linear-gradient(135deg, var(--hc-warning-bright), var(--hc-danger-400));
    color:var(--hc-on-brand); font-size:11px; font-weight:700; letter-spacing:.5px;
    padding:3px 10px; border-radius:999px;
}
.hc-panel-promo-count {
    font-size:11px; font-weight:600; color:var(--hc-danger-400);
    font-variant-numeric:tabular-nums;
    background:rgba(239, 68, 68, .08); border:1px dashed rgba(239, 68, 68, .4);
    padding:2px 9px; border-radius:999px;
}

/* 秒杀条（2026-09-11）：限量/已抢/限购与促销条同容器，badge 走品牌紫反向区分
   （2026-09-15 修：原引用未定义的 --hc-brand-400/800，令牌实名是 primary 阶） */
.hc-flash-badge {
    background:linear-gradient(135deg, var(--hc-primary-400), var(--hc-primary-dark));
}
.hc-flash-stock {
    font-size:11px; font-weight:600; color:var(--hc-text-secondary);
    font-variant-numeric:tabular-nums;
}
.hc-flash-limit {
    font-size:11px; color:var(--hc-text-muted-2);
}
.hc-flash-soldout {
    font-size:11px; font-weight:700; color:var(--hc-danger-400);
}
/* 首页面板紧凑模式同步收紧 */
/* 面板账号区紧凑样式已随账号区迁确认订单页删除（2026-09-19） */

/* ===== 星海背景层（2026-10-06 液态视频；2026-10-07 三改）=====
   fixed 视口背景层：小龟星海铺满整页，内容浮岛浮在其上（fixed 而非
   absolute：canvas/视频尺寸恒=视口，渲染成本固定，滚动时内容在星海上滑动）。
   触屏/减少动画时 videotide 不挂载，<video> 原样播放（CSS 层不依赖 JS） */
.hc-buy-hero {
    position: fixed;
    inset: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
}
/* 背景基底分主题（2026-10-21 亮色主题批）：暗色=深夜星海渐变（视频加载前的
   兜底底色），亮色=「晨光海岸」黎明渐变（视频在亮色晨雾化登场，见上方视频段） */
html[data-theme="dark"] .hc-buy-hero {
    background: linear-gradient(160deg, #0b0716 0%, #140f28 55%, #1b1038 100%);
}
.hc-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.14); /* 与 canvas 同口径：裁水印角标 */
    /* 背景虚化（2026-10-07 用户令「背景模糊一些」）：星点化开成柔光斑，
       星海彻底退成氛围层；1.14 外扩 ~100px 远大于 8px 边缘羽化，无露边风险 */
    filter: blur(8px) saturate(1.06) contrast(1.02);
}
/* 视频两主题都登场（2026-11-02 用户令恢复亮色动画）：暗色=深夜星海直出；
   亮色=晨雾化处理——降饱和+提亮+半透明，暗夜素材从黎明渐变与白纱下透出，
   成「晨雾星海」（原 10-21 亮色 display:none 静默方案废止） */
html:not([data-theme="dark"]) .hc-hero-video {
    filter: blur(8px) saturate(0.45) brightness(1.75) contrast(0.92);
    opacity: 0.5;
}
/* WebGL 接管帧同口径虚化（canvas 内联 transform 管缩放，filter 走样式表；
   scope 在 buy hero——首页 banner 同用 videotide 引擎但不虚化）。
   亮色 canvas 与视频同口径晨雾化 */
.hc-buy-hero .hc-videotide-canvas {
    filter: blur(8px);
}
html:not([data-theme="dark"]) .hc-buy-hero .hc-videotide-canvas {
    filter: blur(8px) saturate(0.45) brightness(1.75) contrast(0.92);
    opacity: 0.5;
}
.hc-hero-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* 压暗纱（暗色主题，2026-10-07 融合四改后用户令「星海放暗淡一些」）：内容已是暗玻璃，
   星海稍收一档抬对比、从主角退成氛围——中间带 0.06→0.14，上下缘承托
   masthead/页脚加深到 0.30/0.26；再深会退回「看不到背景」的初版问题 */
html[data-theme="dark"] .hc-hero-veil {
    background:
        linear-gradient(180deg, rgba(8, 6, 18, 0.30) 0%, rgba(8, 6, 18, 0.14) 30%, rgba(8, 6, 18, 0.14) 75%, rgba(8, 6, 18, 0.26) 100%),
        radial-gradient(120% 90% at 78% 18%, rgba(124, 58, 237, 0.12), transparent 55%);
}

/* ===== 内容层：半屏舞台 + 玻璃群岛（2026-10-07 三改）=====
   前两版「整幅玻璃大卡」把星海盖到可见面积 <10%（84% 白 + 22px 毛玻璃横跨
   全容器）。本版：容器收窄 1120px 两侧留星海带；首屏左右分场——左列无卡片=
   星海裸舞台（潮汐商品图+大字商品名+价格直接浮在星海上），右列下单卡；
   下方描述/评价拆独立玻璃岛留缝隙透星海。 */
.hc-buy-overlap {
    position: relative;
    z-index: 3;
    max-width: 1120px;
    padding-top: 4px;
}
/* 星海上的反白文字（暗色主题专属；亮色变体见文末「晨光海岸」段） */
html[data-theme="dark"] .hc-buy-overlap .hc-breadcrumb {
    color: rgba(214, 220, 246, 0.9);
    text-shadow: 0 1px 12px rgba(6, 4, 16, 0.8);
}
html[data-theme="dark"] .hc-buy-overlap .hc-breadcrumb a {
    color: rgba(214, 220, 246, 0.82);
    text-shadow: 0 1px 12px rgba(6, 4, 16, 0.8);
}
html[data-theme="dark"] .hc-buy-overlap .hc-breadcrumb a:hover { color: #fff; }

/* 首屏舞台：左=裸舞台 copy（5），右=下单卡（7） */
.hc-buy-stage {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 3.4vw, 48px);
    align-items: start;
    margin-top: 8px;
}

/* 左列裸舞台：sticky 让填单全程商品与文案驻留视口 */
.hc-buy-stage-copy {
    position: sticky;
    top: 88px;
}
/* 图框圆角共享；边框/投影分主题（暗=白光线+深空投影，亮=薰衣草发丝线+暖紫投影） */
.hc-buy-stage-copy .hc-buy-img-wrap {
    border-radius: clamp(28px, 4vw, 56px);
}
html[data-theme="dark"] .hc-buy-stage-copy .hc-buy-img-wrap {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 28px 72px -24px rgba(4, 2, 12, 0.7);
}
/* 星海舞台文字族（暗色主题专属，亮色变体见文末） */
html[data-theme="dark"] .hc-stage-kicker {
    color: #cbd3f5;
    text-shadow: 0 2px 18px rgba(6, 4, 16, 0.9);
}
.hc-stage-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 10px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
}
.hc-stage-title {
    margin: 0 0 16px;
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: 0.01em;
}
html[data-theme="dark"] .hc-stage-title {
    color: #f2f4ff;
    text-shadow: 0 6px 44px rgba(4, 2, 12, 0.9);
}
.hc-stage-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.hc-stage-price {
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: 800;
    letter-spacing: -0.4px;
}
html[data-theme="dark"] .hc-stage-price {
    color: var(--hc-gold, #ffc24b);
    text-shadow: 0 3px 26px rgba(4, 2, 12, 0.9);
}

/* 舞台上的销量条与信任条：星海上的玻璃 chip（覆盖浅色卡内默认样式，暗色专属；
   亮色变体见文末） */
html[data-theme="dark"] .hc-buy-stage-copy .hc-buy-tag {
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #e6ebff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
html[data-theme="dark"] .hc-buy-stage-copy .hc-buy-trust {
    background: rgba(10, 8, 22, 0.34);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
}
html[data-theme="dark"] .hc-buy-stage-copy .hc-buy-trust-item { color: #dfe6ff; }
html[data-theme="dark"] .hc-buy-stage-copy .hc-buy-trust-item svg { color: var(--hc-gold, #ffc24b); }

/* 右列下单卡（2026-10-07 融合四改）：暗玻璃与星海同色调——白卡在深色视频上
   永远是「补丁」，换半透明深紫玻璃 + blur，星海从表单底下透出流动，文字反白
   （暗色专属形态，亮色白玻璃变体见文末） */
html[data-theme="dark"] .hc-buy-stage-panel .hc-buy-form {
    background: rgba(18, 13, 34, 0.58);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    backdrop-filter: blur(18px) saturate(1.35);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 32px 88px -28px rgba(0, 0, 0, 0.65), 0 4px 16px -6px rgba(0, 0, 0, 0.35);
}

/* 中屏以下舞台纵向堆叠：copy 变星海顶部块，面板随后（sticky 退役） */
@media (max-width: 991.98px) {
    .hc-buy-stage {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .hc-buy-stage-copy {
        position: static;
        max-width: 560px;
    }
}
@media (max-width: 767.98px) {
    .hc-buy-stage-copy .hc-buy-img-wrap {
        max-width: 300px;
        border-radius: 36px;
    }
}

/* ===== 星海融合换肤（2026-10-07 四改；2026-10-21 亮色主题批改为暗色主题专属）=====
   思路：白卡压深色视频永远读作补丁——融合的正解是内容改用与星海同色调的暗玻璃
   语言。buy.css 面板内部样式几乎全走令牌（surface/border/text/primary 阶），在
   .hc-buy-page 上把令牌集整体重声明为暗色（实色表面改半透明玻璃），chip/输入框/
   合计行等几十条规则零改动自动换肤；仅 input 背景（Bootstrap form-control 白底）
   与倒计时红底两处硬编码需点修。值大部分取自站内暗色主题（html[data-theme=dark]），
   故用户切站内暗色主题时同族成立、无跳变。作用域限 .hc-buy-page，首页面板不受影响。
   2026-10-21：buy 页从「无条件暗色锁」改为跟随站内主题开关——本块只再暗色主题
   （html[data-theme=dark]）生效；亮色主题走 base :root 亮色令牌 + 文末「晨光海岸」段。 */
html[data-theme="dark"] .hc-buy-page {
    color-scheme: dark;
    /* 品牌紫暗底提亮一档（=站内暗色主题值） */
    --hc-primary: #8B5CF6;
    --hc-primary-dark: #A78BFA;
    --hc-primary-light: #C4B5FD;
    --hc-primary-400: #A78BFA;
    --hc-primary-800: #C4B5FD;
    /* 浅底阶：暗紫实色 → 紫玻璃（选中态在玻璃卡内不结块） */
    --hc-primary-50: rgba(139, 92, 246, 0.16);
    --hc-primary-100: rgba(139, 92, 246, 0.24);
    --hc-primary-150: rgba(139, 92, 246, 0.32);
    --hc-primary-200: rgba(167, 139, 250, 0.55);
    /* 状态色提亮（暗底可读） */
    --hc-price: #FB7185;
    --hc-danger-400: #F87171;
    --hc-danger-50: rgba(248, 113, 113, 0.14);
    --hc-warning: #FBBF24;
    --hc-warning-bright: #FBBF24;
    --hc-warning-700: #FDBA74;
    --hc-success-700: #5EEAD4;
    --hc-success-bg-2: rgba(45, 212, 191, 0.12);
    /* 表面族：白实色 → 白玻璃（chip 平铺在暗玻璃卡上只微微浮起） */
    --hc-bg: rgba(15, 11, 29, 0.45);
    --hc-bg-alt: rgba(20, 15, 36, 0.5);
    --hc-surface: rgba(255, 255, 255, 0.06);
    /* 线族：浅灰线 → 白光线（-14 是规格 chip 单选圆点环，要更实才可见） */
    --hc-border: rgba(255, 255, 255, 0.16);
    --hc-line-2: rgba(255, 255, 255, 0.07);
    --hc-line-3: rgba(255, 255, 255, 0.09);
    --hc-line-6: rgba(255, 255, 255, 0.12);
    --hc-line-13: rgba(255, 255, 255, 0.08);
    --hc-line-14: rgba(255, 255, 255, 0.38);
    --hc-line-15: rgba(167, 139, 250, 0.35);
    --hc-line-16: rgba(255, 255, 255, 0.12);
    /* 文字族翻白 */
    --hc-text: #F1EEFC;
    --hc-text-secondary: #CBC5E4;
    --hc-text-muted: #9E98BA;
    --hc-text-muted-2: #8D87AC;
    --hc-text-faint: #8B85A6;
    /* 合计行（2026-10-12 用户报「总价背景是绿的太难看」）：原半透明深蓝玻璃
       会透出整页星海背景的青绿星云、整行读作绿色玻璃——改实色品牌紫阶
       （比面板玻璃高半档），任何底色/星云色不再影响行底 */
    --hc-totalrow-1: #292053;
    --hc-totalrow-2: #201A48;
}

/* 合计行边框同步品牌化（暗色主题）：玻璃白线 → 品牌紫发丝线（与实色紫底配套） */
html[data-theme="dark"] .hc-buy-page .hc-buy-total-row { border-color: rgba(167, 139, 250, 0.25); }

/* 输入框：Bootstrap form-control 自带白底（不走令牌），显式翻成暗玻璃（暗色主题） */
html[data-theme="dark"] .hc-buy-page .hc-buy-input {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--hc-text) !important;
}
html[data-theme="dark"] .hc-buy-page .hc-buy-input::placeholder { color: var(--hc-text-muted); }
/* 浏览器自动填充的黄底强改回暗色（下单邮箱/账号高频 autofill；暗色主题） */
html[data-theme="dark"] .hc-buy-page .hc-buy-input:-webkit-autofill,
html[data-theme="dark"] .hc-buy-page .hc-buy-input:-webkit-autofill:hover,
html[data-theme="dark"] .hc-buy-page .hc-buy-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px #1E1930 inset;
    -webkit-text-fill-color: #F1EEFC;
    caret-color: #F1EEFC;
}

/* 倒计时胶囊：浅色红底在暗玻璃上发灰，点修提亮（暗色主题） */
html[data-theme="dark"] .hc-buy-page .hc-panel-promo-count {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.45);
    color: #FDA4AF;
}

/* ===== 亮色主题「晨光海岸」（2026-10-21）：星海的清晨姊妹篇 =====
   同一片海，天亮了——深夜星海视频与暗玻璃退场（上方 dark 作用域），黎明渐变
   天幕 + 白玻璃浮岛 + 墨色文字登场。全站亮色 = html 无 data-theme（base :root
   亮色令牌直出），面板内部 chip/输入框/合计行等几十条规则自动走亮色令牌，本段
   只补舞台层：背景天幕、左列大字、玻璃容器的底色与投影。配套：buy.blade 的 JS
   在亮色 pause 星海视频（display:none 仍解码，暂停省电），切回暗色恢复播放。
   --
   【主题规则导航（2026-10-21 整理批）】暗色规则在上方各组件区（html[data-theme=
   dark] 作用域），亮色补丁统一收在本段（html:not([data-theme=dark])，文件尾=
   层叠覆盖位，物理位置有意不就近合并——移动会改变层叠序）。改某组件的双主题
   样式：先改组件区的通用/dark 规则，再核对本段内同名选择器的亮色变体。
   本段组件清单：天幕/晨星、hero 大字、玻璃容器（面板/chip/输入/合计）、
   视频晨雾化、评价区衔接（common.css 尾部另有页脚与评价串亮色段）。 */

/* -- 天幕：晨雾白基底 + 紫/粉/青三团柔光 + 晨星点点（星海的白日残影） -- */
html:not([data-theme="dark"]) .hc-buy-hero {
    background:
        radial-gradient(1.6px 1.6px at 12% 16%, rgba(217, 119, 6, 0.32), transparent 100%),
        radial-gradient(1.2px 1.2px at 22% 64%, rgba(124, 58, 237, 0.22), transparent 100%),
        radial-gradient(2px 2px at 31% 34%, rgba(245, 158, 11, 0.26), transparent 100%),
        radial-gradient(1.3px 1.3px at 44% 12%, rgba(14, 165, 233, 0.20), transparent 100%),
        radial-gradient(1.7px 1.7px at 57% 52%, rgba(124, 58, 237, 0.18), transparent 100%),
        radial-gradient(1.2px 1.2px at 66% 22%, rgba(217, 119, 6, 0.26), transparent 100%),
        radial-gradient(2.2px 2.2px at 78% 44%, rgba(236, 72, 153, 0.16), transparent 100%),
        radial-gradient(1.4px 1.4px at 88% 70%, rgba(124, 58, 237, 0.20), transparent 100%),
        radial-gradient(1.2px 1.2px at 8% 82%, rgba(245, 158, 11, 0.22), transparent 100%),
        radial-gradient(1.8px 1.8px at 94% 14%, rgba(14, 165, 233, 0.18), transparent 100%),
        radial-gradient(120% 85% at 82% -12%, rgba(124, 58, 237, 0.10), transparent 55%),
        radial-gradient(95% 70% at -12% 24%, rgba(236, 72, 153, 0.06), transparent 52%),
        radial-gradient(75% 60% at 55% 115%, rgba(14, 165, 233, 0.07), transparent 58%),
        linear-gradient(168deg, #F7F5FE 0%, #FBFAFF 46%, #F3F6FD 100%);
}

/* 柔白纱：上下缘压白承托 masthead/页脚（暗色版是压黑），中间放行让柔光透出 */
html:not([data-theme="dark"]) .hc-hero-veil {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.16) 30%, rgba(255, 255, 255, 0.16) 75%, rgba(255, 255, 255, 0.48) 100%);
}

/* -- 面包屑：白玻璃胶囊（基座玻璃片是暗色口径的透明白，晨光下改为实白玻璃） -- */
html:not([data-theme="dark"]) .hc-buy-page .hc-breadcrumb {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(124, 58, 237, 0.14);
}
html:not([data-theme="dark"]) .hc-buy-overlap .hc-breadcrumb { color: var(--hc-text-secondary); }
html:not([data-theme="dark"]) .hc-buy-overlap .hc-breadcrumb a { color: var(--hc-primary-dark); }
html:not([data-theme="dark"]) .hc-buy-overlap .hc-breadcrumb a:hover { color: var(--hc-primary); }

/* -- 左列舞台：墨色大字 + 深金价格 + 白玻璃 chip -- */
html:not([data-theme="dark"]) .hc-buy-stage-copy .hc-buy-img-wrap {
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 28px 72px -28px rgba(76, 29, 149, 0.28), 0 4px 14px -6px rgba(76, 29, 149, 0.10);
}
html:not([data-theme="dark"]) .hc-stage-kicker { color: #6C6690; }
html:not([data-theme="dark"]) .hc-stage-title { color: #241F3D; }
/* 大字价格：白底上的金要加深一档才站得住——渐变金（D97706→F59E0B）裁字，
   color 兜底给不支持 background-clip:text 的老浏览器 */
html:not([data-theme="dark"]) .hc-stage-price {
    color: #B45309;
    background: linear-gradient(135deg, #D97706 20%, #F59E0B 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
html:not([data-theme="dark"]) .hc-buy-stage-copy .hc-buy-tag {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(124, 58, 237, 0.16);
    color: #4C4768;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
html:not([data-theme="dark"]) .hc-buy-stage-copy .hc-buy-trust {
    background: rgba(255, 255, 255, 0.68);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(124, 58, 237, 0.14);
    border-radius: 16px;
    box-shadow: 0 12px 36px -18px rgba(76, 29, 149, 0.18);
}
html:not([data-theme="dark"]) .hc-buy-stage-copy .hc-buy-trust-item { color: #57526F; }
html:not([data-theme="dark"]) .hc-buy-stage-copy .hc-buy-trust-item svg { color: #D97706; }

/* -- 右列下单卡：白玻璃浮岛（暗玻璃的镜像），内部走 base 亮色令牌 -- */
html:not([data-theme="dark"]) .hc-buy-stage-panel .hc-buy-form {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    backdrop-filter: blur(18px) saturate(1.25);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 32px 88px -30px rgba(76, 29, 149, 0.25), 0 4px 16px -8px rgba(76, 29, 149, 0.10);
}

/* -- 下方双岛（描述/评价）：同族白玻璃 -- */
html:not([data-theme="dark"]) .hc-buy-desc,
html:not([data-theme="dark"]) .hc-buy-reviews {
    background: rgba(255, 255, 255, 0.74);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 24px 64px -36px rgba(76, 29, 149, 0.28), 0 2px 8px -4px rgba(76, 29, 149, 0.08);
}
html:not([data-theme="dark"]) .hc-buy-reviews-head { border-bottom: 1px solid rgba(30, 27, 46, 0.08); }

/* ===== 发货方式徽章（2026-11-03 详情页补全批：自动/人工区分重新上墙） =====
   舞台区通用 .hc-buy-tag 玻璃 chip 规则之上叠加类型色（绿色=自动秒发 / 琥珀=客服处理），
   选择器特异性高于 html[theme] .hc-buy-stage-copy .hc-buy-tag，双主题各自出玻璃底 */
.hc-buy-stage-copy .hc-buy-tag.hc-tag-delivery { font-weight: 600; }
.hc-buy-stage-copy .hc-buy-tag.hc-tag-delivery svg { flex: none; }
.hc-buy-stage-copy .hc-buy-tag.hc-tag-delivery.is-auto {
    background: color-mix(in srgb, var(--hc-success-800, #15803d) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--hc-success-800, #15803d) 38%, transparent);
    color: var(--hc-success-800, #15803d);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.hc-buy-stage-copy .hc-buy-tag.hc-tag-delivery.is-manual {
    background: color-mix(in srgb, var(--hc-warning-900, #B45309) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--hc-warning-900, #B45309) 42%, transparent);
    color: var(--hc-warning-900, #B45309);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
/* 暗色主题下两态文字/描边提亮一档（玻璃上的深字在星海上对比不足） */
html[data-theme="dark"] .hc-buy-stage-copy .hc-buy-tag.hc-tag-delivery.is-auto {
    background: color-mix(in srgb, #34d399 16%, rgba(255, 255, 255, 0.06));
    border-color: color-mix(in srgb, #34d399 45%, transparent);
    color: #6ee7b7;
}
html[data-theme="dark"] .hc-buy-stage-copy .hc-buy-tag.hc-tag-delivery.is-manual {
    background: color-mix(in srgb, #fbbf24 16%, rgba(255, 255, 255, 0.06));
    border-color: color-mix(in srgb, #fbbf24 48%, transparent);
    color: #fcd34d;
}

/* ===== 购买流程步骤列表（通用信息区块 hc-gis） ===== */
.hc-gis-steps {
    list-style: none;
    counter-reset: hc-gis-step;
    padding-left: 0;
    margin-bottom: 0;
}
.hc-gis-steps li {
    counter-increment: hc-gis-step;
    position: relative;
    padding-left: 38px;
    min-height: 28px;
    display: flex;
    align-items: center;
}
.hc-gis-steps li + li { margin-top: 4px; }
.hc-gis-steps li::before {
    content: counter(hc-gis-step);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--hc-primary), var(--hc-pink, #EC4899));
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--hc-primary) 65%, transparent);
}
/* 最后一步（发货分流步）与类型同色：自动=绿 / 人工=琥珀——流程叙事里的类型区分 */
.hc-gis-steps li:last-child::before {
    background: linear-gradient(135deg, var(--hc-success-800, #15803d), var(--hc-success-bg-2, #0d9488));
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--hc-success-800, #15803d) 55%, transparent);
}
.hc-gis[data-manual] .hc-gis-steps li:last-child::before {
    background: linear-gradient(135deg, var(--hc-warning-900, #B45309), #d97706);
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--hc-warning-900, #B45309) 55%, transparent);
}

/* ===== 购买面板人工处理提示行（与自动单不退换提示同位，琥珀色区分） ===== */
.hc-buy-limit.hc-buy-limit-manual {
    background: var(--hc-warning-50);
    color: var(--hc-warning-900, #B45309);
    font-weight: 600;
}