/* ============================================
   小头盔 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);
    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;
    color:var(--hc-text-muted);
}

/* 划线原价（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 融合四改：暗玻璃与星海同色调） ===== */
.hc-buy-desc {
    margin-top:28px;
    background:rgba(18, 13, 34, 0.5);
    -webkit-backdrop-filter:blur(16px) saturate(1.3);
    backdrop-filter:blur(16px) saturate(1.3);
    border-radius:var(--hc-radius-lg);
    border:1px solid rgba(255, 255, 255, 0.12);
    overflow:hidden;
    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-07 融合四改） */
.hc-buy-reviews { margin-top:28px; 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); border-radius:var(--hc-radius-lg, 16px); padding:22px 26px 24px; box-shadow:0 24px 64px -32px rgba(0, 0, 0, 0.6); }
.hc-buy-reviews-stats { margin-left:auto; font-size:13px; font-weight:600; color:var(--hc-warning); }
.hc-buy-reviews-body { margin-top:14px; }
.hc-buy-reviews-empty { font-size:13px; color:var(--hc-text-muted, var(--hc-text-muted)); margin:0; }
.hc-buy-reviews-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.hc-buy-review { padding:14px 0; border-bottom:1px dashed var(--hc-line-2); }
.hc-buy-review:last-child { border-bottom:none; }
.hc-buy-review-head { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.hc-buy-review-mail { font-size:12.5px; color:var(--hc-text-secondary, 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, var(--hc-text-muted)); }
.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;
    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);
}
/* WebGL 接管帧同口径虚化（canvas 内联 transform 管缩放，filter 走样式表；
   scope 在 buy hero——首页 banner 同用 videotide 引擎但不虚化） */
.hc-buy-hero .hc-videotide-canvas {
    filter: blur(8px);
}
.hc-hero-veil {
    position: absolute;
    inset: 0;
    /* 压暗微调（2026-10-07 融合四改后用户令「星海放暗淡一些」）：内容已是暗玻璃，
       星海稍收一档抬对比、从主角退成氛围——中间带 0.06→0.14，上下缘承托
       masthead/页脚加深到 0.30/0.26；再深会退回「看不到背景」的初版问题 */
    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%);
    pointer-events: none;
}

/* ===== 内容层：半屏舞台 + 玻璃群岛（2026-10-07 三改）=====
   前两版「整幅玻璃大卡」把星海盖到可见面积 <10%（84% 白 + 22px 毛玻璃横跨
   全容器）。本版：容器收窄 1120px 两侧留星海带；首屏左右分场——左列无卡片=
   星海裸舞台（潮汐商品图+大字商品名+价格直接浮在星海上），右列下单卡；
   下方描述/评价拆独立玻璃岛留缝隙透星海。 */
.hc-buy-overlap {
    position: relative;
    z-index: 3;
    max-width: 1120px;
    padding-top: 4px;
}
.hc-buy-overlap .hc-breadcrumb {
    color: rgba(214, 220, 246, 0.9);
    text-shadow: 0 1px 12px rgba(6, 4, 16, 0.8);
}
.hc-buy-overlap .hc-breadcrumb a {
    color: rgba(214, 220, 246, 0.82);
    text-shadow: 0 1px 12px rgba(6, 4, 16, 0.8);
}
.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);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 28px 72px -24px rgba(4, 2, 12, 0.7);
}
.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;
    color: #cbd3f5;
    text-shadow: 0 2px 18px rgba(6, 4, 16, 0.9);
}
.hc-stage-title {
    margin: 0 0 16px;
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: 0.01em;
    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;
    color: var(--hc-gold, #ffc24b);
    text-shadow: 0 3px 26px rgba(4, 2, 12, 0.9);
    letter-spacing: -0.4px;
}

/* 舞台上的销量条与信任条：星海上的玻璃 chip（覆盖浅色卡内默认样式） */
.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);
}
.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;
}
.hc-buy-stage-copy .hc-buy-trust-item { color: #dfe6ff; }
.hc-buy-stage-copy .hc-buy-trust-item svg { color: var(--hc-gold, #ffc24b); }

/* 右列下单卡（2026-10-07 融合四改）：暗玻璃与星海同色调——白卡在深色视频上
   永远是「补丁」，换半透明深紫玻璃 + blur，星海从表单底下透出流动，文字反白 */
.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 四改，用户令「内容和背景融合，白色不能像补丁」）=====
   思路：白卡压深色视频永远读作补丁——融合的正解是内容改用与星海同色调的暗玻璃
   语言。buy.css 面板内部样式几乎全走令牌（surface/border/text/primary 阶），在
   .hc-buy-page 上把令牌集整体重声明为暗色（实色表面改半透明玻璃），chip/输入框/
   合计行等几十条规则零改动自动换肤；仅 input 背景（Bootstrap form-control 白底）
   与倒计时红底两处硬编码需点修。值大部分取自站内暗色主题（html[data-theme=dark]），
   故用户切站内暗色主题时同族成立、无跳变。作用域限 .hc-buy-page，首页面板不受影响。 */
.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;
}

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

/* 输入框：Bootstrap form-control 自带白底（不走令牌），显式翻成暗玻璃 */
.hc-buy-page .hc-buy-input {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--hc-text) !important;
}
.hc-buy-page .hc-buy-input::placeholder { color: var(--hc-text-muted); }
/* 浏览器自动填充的黄底强改回暗色（下单邮箱/账号高频 autofill） */
.hc-buy-page .hc-buy-input:-webkit-autofill,
.hc-buy-page .hc-buy-input:-webkit-autofill:hover,
.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;
}

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