/* ============================================
   小头盔 xiaotoukui - 首页样式 · 清爽海洋风 v2
   沉浸主视觉 / 信息带 / 编辑感区块 / 商品卡
   ============================================ */

/* ===== A. 沉浸式主视觉 ===== */
.hc-hero {
    padding:20px 0 0;
}

.hc-hero-stage {
    position:relative;
    border-radius:var(--hc-radius-xl);
    overflow:hidden;
    min-height:340px;
    background:var(--hc-deep); /* 兜底深紫底色（轮播切换瞬间不露白；也是流体不挂载时的完整形态） */
    box-shadow:0 24px 48px -20px rgba(45, 27, 78, 0.45), 0 4px 12px -4px rgba(30, 27, 46, 0.12);
    isolation:isolate;
}
/* 流体环境层（HCFluidBg，2026-09-22）：z0 垫底，未挂载时 display:none */
.hc-hero-stage .hc-hero-fluid {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
    display:none;
}
.hc-hero-stage.hc-fluid-on .hc-hero-fluid { display:block; }
/* 扫描擦除画布（hcWipe，2026-09-22）：z1，在流体上、轮播 slide 下；交接后才显示 */
.hc-hero-stage .hc-banner-wipe {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    pointer-events:none;
    display:none;
}
.hc-banner-slider.hc-banner--gl .hc-banner-wipe { display:block; }
/* 交接态：slide 背景所有权移交 canvas——剥离 CSS 渐变底与（引擎已删的）inline 背景，
   轮播抬到 z2；overlay/文案本就在 slide 内随之在上。hc-bs-img 恢复有图 slide 的
   文字遮罩（原 :not([style*=background-image]) 规则在 inline 背景被剥离后失配） */
.hc-banner-slider.hc-banner--gl .hc-banner-slide { background-image:none !important; }
.hc-banner-slider.hc-banner--gl .hc-bs-img .hc-banner-slide-overlay { display:block; }
.hc-banner-slider { z-index:2; }

/* 轮播容器 */
.hc-banner-slider {
    position:relative;
    height:100%;
    min-height:340px;
    overflow:hidden;
}

/* 单张幻灯片：深海网状光晕 */
.hc-banner-slide {
    position:absolute;
    inset:0;
    display:flex;
    /* 2026-09-17 用户定稿：文案组贴顶（离 banner 顶部 20px，见 padding-top），
       不再垂直居中——信任卡同层 flex 跟随顶对齐保持两列齐头 */
    align-items:flex-start;
    justify-content:space-between;
    gap:28px;
    padding:20px 52px 48px;
    background-size:cover;
    background-position:center;
    /* 深海 → 潮面 的多层光：潮面青光、底部涌浪、右侧月引光 */
    background-image:radial-gradient(900px 380px at 8% -12%, rgba(167, 139, 250, 0.30), transparent 60%),
        radial-gradient(760px 340px at 102% 112%, rgba(236, 72, 153, 0.26), transparent 58%),
        radial-gradient(380px 220px at 82% 24%, rgba(196, 181, 253, 0.13), transparent 70%),
        conic-gradient(from 200deg at 90% 10%, rgba(233, 213, 255, 0.06), transparent 30%),
        linear-gradient(132deg, var(--hc-deep) 0%, #4C1D95 52%, #831843 100%);
    opacity:0;
    transition:opacity 0.7s ease;
    pointer-events:none;
    text-decoration:none;
    color:inherit;
}

.hc-banner-slide.active {
    opacity:1;
    pointer-events:auto;
    /* 2026-09-17 闪烁二段修复：不再用 relative 撑容器——active(relative=内容高)
       ↔ 隐藏(absolute=inset:0 拉伸容器高) 两种几何在淡入淡出期间互相跳变，
       背景图被瞬间拉高再弹回=残余闪烁。全部 slide 恒为 absolute（几何永远
       等于容器），容器高度完全交给 lockStage() 锁定的 min-height，切换只剩
       纯 opacity 交叉溶解 */
}

/* 有自定义图时覆盖渐变背景 */
.hc-banner-slide[style*="background-image"] {
    background-image:none;
}

/* 图片上的遮罩，保证文字可读 */
.hc-banner-slide-overlay {
    position:absolute;
    inset:0;
    background:radial-gradient(800px 320px at 10% -10%, rgba(167, 139, 250, 0.20), transparent 62%),
        linear-gradient(132deg, rgba(45, 27, 78, 0.78) 0%, rgba(76, 29, 149, 0.58) 50%, rgba(131, 24, 67, 0.64) 100%);
    pointer-events:none;
}

.hc-banner-slide:not([style*="background-image"]) .hc-banner-slide-overlay {
    display:none;
}

/* 纯图模式（2026-09-22）：文字已做进 banner 图（后台 title/subtitle 留空）——
   深色遮罩退场，别压暗图内文字；文字由扫描擦除直接处理。
   第二行同特异性压过 GL 态的 .hc-bs-img display:block 规则 */
.hc-banner-slide.hc-bs-bare .hc-banner-slide-overlay,
.hc-banner-slider.hc-banner--gl .hc-bs-img.hc-bs-bare .hc-banner-slide-overlay {
    display:none;
}

/* 文案区 */
.hc-banner-copy {
    position:relative;
    z-index:1;
    color:var(--hc-on-brand);
    max-width:560px;
    /* 换场文字虚影（2026-09-22，用户点名 study 效果）：blur 过渡与扫描擦除
       同一时间轴——旧张文字由实到虚随层淡出、新张由虚到实从雾中凝实 */
    filter:blur(12px);
    transition:filter 0.9s var(--hc-ease-out);
}
.hc-banner-slide.active .hc-banner-copy {
    filter:blur(0);
}
/* 信任卡同款虚影（仅第一张有，换场一并虚化/凝实） */
.hc-banner-trust {
    filter:blur(12px);
    transition:filter 0.9s var(--hc-ease-out);
}
.hc-banner-slide.active .hc-banner-trust {
    filter:blur(0);
}
@media (prefers-reduced-motion: reduce) {
    .hc-banner-copy, .hc-banner-trust { filter:none; transition:none; }
}

.hc-banner-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:600;
    letter-spacing:2px;
    color:rgba(233, 213, 255, 0.92);
    padding:6px 14px;
    border-radius:999px;
    border:1px solid rgba(233, 213, 255, 0.28);
    background:rgba(233, 213, 255, 0.08);
    backdrop-filter:blur(6px);
    margin-bottom:16px;
}

/* 潮点：eyebrow 前的一颗呼吸青点 */
.hc-wave-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--hc-pink);
    box-shadow:0 0 0 0 rgba(236, 72, 153, 0.5);
    animation:hc-tide 2.4s ease-out infinite;
}

/* @keyframes hc-tide 与 common.css 重复，已删（common 先加载即生效） */

.hc-banner-copy h2 {
    font-size:clamp(28px, 3.1vw, 42px);
    font-weight:800;
    line-height:1.22;
    margin:0 0 12px;
    letter-spacing:0.5px;
    /* 渐变停靠点用字面亮色而非令牌（2026-10-07 暗色翻车修复）：banner 背后恒为深色
       遮罩/深图，--hc-surface/-150/-200 在暗色主题会翻成深紫 → 标题变黑；
       字面值=浅色主题原渲染值，两主题同亮 */
    background:linear-gradient(96deg, #FFFFFF 30%, #E9D5FF 72%, #C4B5FD 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    text-wrap:balance;
}

.hc-banner-copy p {
    font-size:14.5px;
    margin:0;
    color:rgba(255, 255, 255, 0.82);
    letter-spacing:0.4px;
    line-height:1.7;
}

/* 轮播指示器 */
.hc-banner-dots {
    position:absolute;
    bottom:18px;
    left:52px;
    display:flex;
    gap:8px;
    z-index:10;
}

/* 2026-09-17 审计修复 S11：指示器由 span 改 button（可聚焦/可键盘操作），
   补按钮外观重置（bs reboot 已处理 -moz-focus-inner，这里清原生 appearance），视觉不变 */
.hc-banner-dot {
    display:block;
    appearance:none;
    -webkit-appearance:none;
    width:26px;
    height:5px;
    border-radius:3px;
    background:rgba(255, 255, 255, 0.28);
    cursor:pointer;
    transition:all 0.3s ease;
    border:none;
    padding:0;
}

.hc-banner-dot:hover {
    background:rgba(255, 255, 255, 0.55);
}

.hc-banner-dot.active {
    background:linear-gradient(90deg, var(--hc-primary-light), var(--hc-pink));
    width:40px;
}

/* 左右切换按钮（2026-09-16）：玻璃圆钮与指示器同语言，竖直居中悬浮 */
.hc-banner-arrow {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255, 255, 255, 0.12);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255, 255, 255, 0.18);
    color:rgba(255, 255, 255, 0.85);
    cursor:pointer;
    transition:all 0.25s ease;
    padding:0;
}

.hc-banner-arrow:hover {
    background:rgba(255, 255, 255, 0.24);
    color:#fff;
    transform:translateY(-50%) scale(1.08);
}

.hc-banner-arrow:focus-visible {
    outline:2px solid rgba(255, 255, 255, 0.7);
    outline-offset:2px;
}

.hc-banner-arrow--prev { left:14px; }
.hc-banner-arrow--next { right:14px; }

/* 信任徽章 2x2 */
.hc-banner-trust {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(2, minmax(178px, 1fr));
    gap:14px 16px;
    flex-shrink:0;
}

.hc-trust-item {
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px 15px;
    border-radius:14px;
    background:rgba(255, 255, 255, 0.055);
    border:1px solid rgba(233, 213, 255, 0.16);
    backdrop-filter:blur(8px);
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition:background 0.25s, border-color 0.25s, transform 0.25s;
}

.hc-trust-item:hover {
    background:rgba(255, 255, 255, 0.09);
    border-color:rgba(233, 213, 255, 0.30);
    transform:translateY(-2px);
}

.hc-trust-icon {
    width:40px;
    height:40px;
    border-radius:12px;
    background:linear-gradient(135deg, rgba(167, 139, 250, 0.22), rgba(236, 72, 153, 0.16));
    border:1px solid rgba(233, 213, 255, 0.25);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--hc-primary-light);
    flex-shrink:0;
}

.hc-trust-info {
    display:flex;
    flex-direction:column;
    line-height:1.35;
    min-width:0;
}

.hc-trust-info strong {
    color:var(--hc-on-brand);
    font-size:13.5px;
    font-weight:600;
}

.hc-trust-info small {
    color:rgba(255, 255, 255, 0.62);
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* 波浪下缘：两层从左向右流动（2026-09-17 用户要求动起来）。
   外层容器承载鼠标视差 transform（JS），内层 svg 各自跑流动动画——互不覆盖。
   svg 宽 200%（两周期无缝 path），translateX -50%→0 循环=图案向右匀速流动 */
.hc-hero-wave {
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:64px;
    z-index:5;
    pointer-events:none;
    overflow:hidden; /* 裁掉 200% 宽度的溢出半边 */
}

.hc-hero-wave-svg {
    position:absolute;
    left:0;
    bottom:0;
    width:200%;
    height:100%;
    display:block;
}

.hc-hero-wave-back { animation:hc-wave-flow 18s linear infinite; }
.hc-hero-wave-front { animation:hc-wave-flow 12s linear infinite; }

@keyframes hc-wave-flow {
    from { transform:translateX(-50%); }
    to   { transform:translateX(0); }
}

/* 无障碍：系统开启减少动态时停止流动（保留静态波浪） */
@media (prefers-reduced-motion: reduce) {
    .hc-hero-wave-back,
    .hc-hero-wave-front { animation:none; }
}

/* ===== B. 信息带 ===== */
.hc-rails {
    padding:20px 0 4px;
}

.hc-rail-card {
    position:relative;
    background:var(--hc-surface);
    border:1px solid var(--hc-border);
    border-radius:var(--hc-radius-lg);
    box-shadow:var(--hc-shadow-sm);
    overflow:hidden;
    height:100%;
}

/* 卡片顶部海洋发丝线（质感层） */
.hc-rail-card::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg, transparent 0%, rgba(167, 139, 250, 0.55) 30%, rgba(236, 72, 153, 0.45) 55%, transparent 100%);
    z-index:1;
}

.hc-rail-head {
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 18px 0;
}

.hc-rail-badge {
    width:30px;
    height:30px;
    border-radius:9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--hc-on-brand);
    flex-shrink:0;
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 8px -2px rgba(30, 27, 46, 0.25);
}

.hc-rail-badge .ali-icon { font-size:15px; }

.hc-rail-badge-hot { background:linear-gradient(135deg, var(--hc-pink), var(--hc-pink-400)); }
.hc-rail-badge-new { background:var(--hc-grad); }
.hc-rail-badge-cat { background:linear-gradient(135deg, var(--hc-primary-dark), var(--hc-primary-light)); }

.hc-rail-title {
    font-size:15px;
    font-weight:700;
    color:var(--hc-text);
    letter-spacing:0.3px;
    flex-shrink:0;
}

.hc-rail-rule {
    flex:1;
    height:1px;
    background:repeating-linear-gradient(90deg, var(--hc-border) 0 6px, transparent 6px 12px);
}

.hc-rail-more {
    font-size:12px;
    font-weight:500;
    color:var(--hc-text-muted);
    text-decoration:none;
    flex-shrink:0;
    transition:color 0.2s;
}

.hc-rail-more:hover { color:var(--hc-primary); }

.hc-rail-body {
    padding:14px 18px 16px;
}

.hc-rail-body-scroll {
    overflow-x:auto;
    scrollbar-width:none;
}

.hc-rail-body-scroll::-webkit-scrollbar { display:none; }

/* 热销 chips */
.hc-hot-list {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.hc-hot-chip {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--hc-surface);
    border:1px solid var(--hc-border);
    border-radius:var(--hc-radius-full);
    padding:7px 14px;
    text-decoration:none;
    transition:var(--hc-transition);
}

.hc-hot-chip:hover {
    border-color:var(--hc-primary-light);
    background:var(--hc-primary-50);
    transform:translateY(-2px);
    box-shadow:0 6px 14px -4px rgba(124, 58, 237, 0.25);
    text-decoration:none;
}

.hc-hot-chip-name {
    font-size:13px;
    font-weight:600;
    color:var(--hc-text);
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.hc-hot-chip-price {
    font-size:12.5px;
    font-weight:700;
    color:var(--hc-price);
}

/* 新上商品（rail 内纵列） */
.hc-news-list {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:2px;
    max-height:224px;
    overflow-y:auto;
    scrollbar-width:thin;
}

.hc-rail-body-scroll .hc-news-list {
    flex-direction:row;
    gap:10px;
    max-height:none;
    overflow:visible;
}

.hc-news-list li a {
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 10px;
    border-radius:10px;
    text-decoration:none;
    transition:background 0.18s;
}

.hc-rail-body-scroll .hc-news-list li { flex-shrink:0; }
.hc-rail-body-scroll .hc-news-list li a {
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    padding:12px;
    border:1px solid var(--hc-border);
    background:var(--hc-bg);
    width:168px;
    transition:var(--hc-transition);
}

.hc-rail-body-scroll .hc-news-list li a:hover {
    border-color:var(--hc-primary-light);
    background:var(--hc-surface);
    transform:translateY(-2px);
    box-shadow:0 8px 16px -6px rgba(124, 58, 237, 0.22);
}

.hc-news-list li a:hover { background:var(--hc-primary-50); }
.hc-rail-body-scroll .hc-news-list li a:hover { background:var(--hc-surface); }

.hc-news-list li a img {
    width:42px;
    height:42px;
    border-radius:10px;
    object-fit:cover;
    background:var(--hc-bg-alt);
    flex-shrink:0;
}

.hc-rail-body-scroll .hc-news-list li a img {
    /* 正方形封面（2026-09-02 全站商品图统一方形；原 84px 定高裁切） */
    width:100%;
    aspect-ratio:1 / 1;
    height:auto;
    border-radius:10px;
}

.hc-news-info {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.hc-rail-body-scroll .hc-news-info { width:100%; }

.hc-news-name {
    font-size:13px;
    color:var(--hc-text);
    font-weight:500;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.hc-rail-body-scroll .hc-news-name {
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    line-height:1.35;
    min-height:35px;
}

.hc-news-price {
    font-size:13px;
    color:var(--hc-price);
    font-weight:700;
}

.hc-news-empty {
    padding:24px;
    text-align:center;
    color:var(--hc-text-muted);
    font-size:13px;
}

/* 桌面（≥lg）：新上 rail 住 col-lg-5 窄栏（可视 ~419px），原 168px 定宽横滚只装得下 2.4 张——
   第 3 张永久半露裁切且滚动条隐藏，观感=内容溢出。改 3 列均分单行、只展示前 3 张完整卡。
   <lg 保留横滚：触屏滑动自然，半露下一张是标准滑动提示。 */
@media (min-width:992px) {
    .hc-rail-body-scroll .hc-news-list {
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        gap:10px;
    }
    .hc-rail-body-scroll .hc-news-list li:nth-child(n+4) { display:none; }
    .hc-rail-body-scroll .hc-news-list li a { width:100%; height:100%; }
}

/* 分类 chips（横带） */
.hc-rail-cats { margin-top:12px; }

.hc-cat-chips {
    display:flex;
    gap:10px;
}

.hc-cat-chip {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 16px;
    border-radius:var(--hc-radius-full);
    background:var(--hc-bg);
    border:1px solid var(--hc-border);
    text-decoration:none;
    font-size:13.5px;
    font-weight:600;
    color:var(--hc-text);
    flex-shrink:0;
    transition:var(--hc-transition);
}

.hc-cat-chip .ali-icon {
    color:var(--hc-primary);
    font-size:15px;
}

.hc-cat-chip em {
    font-style:normal;
    font-size:11px;
    font-weight:700;
    color:var(--hc-primary);
    background:var(--hc-primary-50);
    border:1px solid var(--hc-line-10);
    padding:1px 7px;
    border-radius:999px;
}

.hc-cat-chip:hover {
    background:var(--hc-primary-50);
    border-color:var(--hc-primary-light);
    color:var(--hc-primary-dark);
    transform:translateY(-2px);
    box-shadow:0 6px 14px -4px rgba(124, 58, 237, 0.22);
    text-decoration:none;
}

/* ===== C. 商品区 ===== */
.hc-goods-section { padding-top:28px; }

.hc-sec-head {
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:20px;
}

.hc-sec-titles {
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

/* 区块 kicker：渐变竖条 */
.hc-sec-kicker {
    width:5px;
    height:26px;
    border-radius:3px;
    background:var(--hc-grad);
    box-shadow:0 2px 6px rgba(124, 58, 237, 0.3);
}

/* 2026-09-17 审计修复 S9：商品区标题由 h2 升级 h1（首页唯一 h1），选择器随迁，字号不变 */
.hc-sec-head h1 {
    font-size:23px;
    font-weight:800;
    color:var(--hc-text);
    letter-spacing:0.2px;
    margin:0;
}

.hc-sec-rule {
    flex:1;
    height:1px;
    background:linear-gradient(90deg, var(--hc-border), transparent);
}

/* ===== 商品列表 ===== */
.goods { padding:8px 0 40px; }

/* ===== 响应式 ===== */
@media (max-width:768px) {
    .hc-search-btn span { display:none; }
    .hc-search-btn { padding:8px 12px !important; }
    .hc-hot-chip { padding:5px 10px; }
    /* 主视觉移动端瘦身（2026-09-17 用户拍板「banner 占篇幅太大」）：
       ① 「全球可用」eyebrow 胶囊标隐藏（桌面保留）② 信任卡紧凑化 ③ 边距/字号/
       min-height 全面收紧——lockStage 依内容测高，内容压矮后锁定高度随之矮 */
    .hc-hero { padding:12px 0 0; }
    .hc-hero-stage, .hc-banner-slider { min-height:230px; }
    .hc-banner-slide { flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:18px 20px 50px; gap:12px; }
    /* 图内文字 banner（2026-10-07 即梦图上墙）：21:9 图在手机端 cover 裁切后
       只显示中央 ~64%，居中定位会啃掉最左的大字（图内文字都在 8%-11% 起）。
       取景窗左移到 20%（可见带 ≈7%-71%），文字完整、小龟半身保留 */
    .hc-banner-slide { background-position:20% center; }
    .hc-banner-eyebrow { display:none; }
    .hc-banner-copy h2 { font-size:22px; margin-bottom:8px; }
    .hc-banner-copy p { font-size:13px; line-height:1.55; }
    .hc-banner-trust { grid-template-columns:repeat(2, 1fr); width:100%; gap:6px; }
    .hc-trust-item { padding:6px 9px; gap:7px; border-radius:10px; }
    .hc-trust-icon { width:24px; height:24px; border-radius:8px; }
    .hc-trust-icon svg { width:13px; height:13px; }
    .hc-trust-info strong { font-size:11px; }
    .hc-trust-info small { font-size:9px; }
    .hc-banner-dots { left:20px; bottom:16px; }
    /* 移动端箭头隐藏（2026-09-17 用户拍板）：触屏横滑 + 底部指示器已够用，
       箭头贴边遮挡正文；键盘用户仍可聚焦指示器后用 ←→ 切换 */
    .hc-banner-arrow { display:none; }
    .hc-sec-head h1 { font-size:19px; }
    .hc-sec-kicker { height:20px; }
    .hc-rail-head { padding:12px 14px 0; }
    .hc-rail-body { padding:12px 14px 14px; }
}

/* ============================================
   分类页样式
   ============================================ */

/* 面包屑导航 */
.hc-breadcrumb {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--hc-text-secondary, var(--hc-text-secondary));
    padding:16px 0 8px;
}

/* 移动端藏面包屑（2026-09-25 用户拍板）：触屏无 hover 回溯习惯，白占首屏一行
   —— buy 页 / subhero（分类、法务等）/ 错误页三消费方一刀全免 */
@media (max-width:767.98px) {
    .hc-breadcrumb { display:none; }
}

.hc-breadcrumb a {
    color:var(--hc-text-secondary, var(--hc-text-secondary));
    text-decoration:none;
    transition:color 0.2s;
}

.hc-breadcrumb a:hover {
    color:var(--hc-primary, var(--hc-primary));
}

.hc-breadcrumb-sep {
    color:var(--hc-text-muted, var(--hc-text-muted));
}

.hc-breadcrumb-current {
    color:var(--hc-text, var(--hc-text));
    font-weight:500;
}

/* ============================================
   内页 Hero（分类页族）：与首页 v2 同语言
   紫雾舞台 + 渐变 kicker 胶囊 + 大标题 + 计数徽章
   ============================================ */

.hc-subhero {
    position:relative;
    padding:34px 0 26px;
    overflow:hidden;
    background:radial-gradient(640px 240px at 12% 0%, rgba(124, 58, 237, 0.10), transparent 64%),
        radial-gradient(520px 210px at 92% 6%, rgba(236, 72, 153, 0.07), transparent 60%);
}

/* 底部渐隐发丝线（首页区块头同款收口） */
.hc-subhero::after {
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--hc-primary-100, var(--hc-primary-150)) 30%, var(--hc-primary-100, var(--hc-primary-150)) 70%, transparent);
}

.hc-subhero .hc-breadcrumb {
    margin-bottom:16px;
    font-size:13px;
}

.hc-subhero-title-row {
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.hc-subhero-kicker {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:600;
    letter-spacing:2px;
    color:var(--hc-primary-dark);
    padding:6px 14px;
    border-radius:999px;
    border:1px solid var(--hc-primary-100, var(--hc-primary-150));
    background:linear-gradient(135deg, rgba(233, 213, 255, 0.38), rgba(196, 181, 253, 0.16));
}

/* kicker 潮点：与首页 hc-wave-dot 同款呼吸 */
.hc-tide-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--hc-primary);
    box-shadow:0 0 0 0 rgba(124, 58, 237, 0.5);
    animation:hc-tide 2.4s ease-out infinite;
}

.hc-subhero-title-row h1 {
    font-size:clamp(24px, 3vw, 34px);
    font-weight:800;
    margin:0;
    letter-spacing:0.5px;
    background:linear-gradient(92deg, var(--hc-primary-dark), var(--hc-primary) 55%, var(--hc-pink));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.hc-subhero-meta {
    font-size:12.5px;
    font-weight:600;
    color:var(--hc-primary-dark);
    padding:5px 12px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(233, 213, 255, 0.5), rgba(196, 181, 253, 0.22));
    border:1px solid var(--hc-primary-100, var(--hc-primary-150));
}

/* 分类页主体 */
.hc-cat-body {
    padding-bottom:40px;
}

/* 分类页商品卡已统一为 _goods_mini_card 组件（hc-goods-mini 系），旧 hc-goods-card 家族删除 */

/* 空状态 */
.hc-cat-empty {
    text-align:center;
    padding:60px 20px;
    color:var(--hc-text-secondary, var(--hc-text-secondary));
}

.hc-cat-empty-icon {
    font-size:64px;
    margin-bottom:16px;
}

.hc-cat-empty p {
    font-size:15px;
    margin-bottom:20px;
}

/* ============================================
   总分类页「橱窗」(/category) · 2026-09-22 v4：
   v3 潮汐索引（索引行+光标浮卡）观感被否——目录感过强、商品图存在感太低。
   v4 回归图片主导：3 列大封面橱窗卡（代表商品图为封面，右下角错层小图组
   预告分类内容），无图分类落主题渐变+emoji；hover 主题色发丝线+封面微放+
   箭头钮点亮。页头极简：小面包屑+一行计数（H1 大标题视觉退场，
   语义留 visually-hidden；「全部分类」可见文案只在面包屑出现一次）。
   页面零脚本（hc-cidx.js 浮卡随索引版退役删除）
   ============================================ */

.hc-catl {
    padding:0 0 72px;
}

/* 进场错峰（--reveal-i 由 blade 挂 col；reveal 本体在 base.css） */
html.hc-motion .hc-catl [data-reveal] {
    transition-delay:calc(var(--reveal-i, 0) * 50ms);
}

.hc-catl-crumb {
    padding:16px 0 0;
}

/* 页头：面包屑后唯一一行文字（tide-dot + 分类/商品双口径计数） */
.hc-catl-meta {
    display:flex;
    align-items:center;
    gap:8px;
    margin:14px 0 0;
    font-size:14px;
    color:var(--hc-text-secondary);
}

/* ---------- 橱窗卡网格 ---------- */

.hc-catl-grid {
    margin-top:30px;
}

/* col 等高：卡撑满列高（Bootstrap col 默认 block） */
.hc-catl-grid .col {
    display:flex;
}

.hc-catl-card {
    flex:1;
    display:flex;
    flex-direction:column;
    text-decoration:none;
    border-radius:16px;
    background:var(--hc-surface);
    border:1px solid var(--hc-border);
    overflow:hidden;
    position:relative;
    transition:transform 0.22s var(--hc-ease-out), box-shadow 0.22s, border-color 0.22s;
}

/* 顶部主题色发丝线（与商品卡同语言，色跟分类走） */
.hc-catl-card::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    z-index:2;
    background:linear-gradient(90deg, var(--cat-a, var(--hc-primary)), var(--cat-b, var(--hc-pink)));
    opacity:0;
    transition:opacity 0.25s;
}

.hc-catl-card:hover,
.hc-catl-card:focus-visible {
    transform:translateY(-3px);
    border-color:rgba(var(--cat-argb, 124, 58, 237), 0.38);
    box-shadow:0 14px 34px -14px rgba(var(--cat-argb, 124, 58, 237), 0.45);
}

.hc-catl-card:hover::before,
.hc-catl-card:focus-visible::before { opacity:1; }

/* 封面：代表商品图为事实源；无图落分类主题渐变 */
.hc-catl-cover {
    position:relative;
    aspect-ratio:5 / 3;
    overflow:hidden;
    background:linear-gradient(135deg, var(--cat-a, #4C1D95), var(--cat-b, #8B5CF6));
}

.hc-catl-cover img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform:scale(1.01); /* 预缩放对齐 hover 终值，避免载入瞬间跳 */
    transition:transform 0.45s var(--hc-ease-out);
}

.hc-catl-card:hover .hc-catl-cover img,
.hc-catl-card:focus-visible .hc-catl-cover img { transform:scale(1.06); }

/* 封面统一光斑（有图/无图都吃，统一质感） */
.hc-catl-cover::after {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(120% 90% at 85% -10%, rgba(255, 255, 255, 0.20), transparent 55%);
    pointer-events:none;
}

/* 无图兜底：渐变底 + 大 emoji */
.hc-catl-cover-emoji {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:54px;
    filter:drop-shadow(0 6px 16px rgba(15, 10, 40, 0.35));
}

/* 小图组：封面右下角错层（「这个分类里有什么」的直接信号） */
.hc-catl-peeks {
    position:absolute;
    right:10px;
    bottom:10px;
    display:flex;
    z-index:3;
}

.hc-catl-peek {
    width:44px;
    height:44px;
    border-radius:10px;
    background-size:cover;
    background-position:center;
    border:2px solid rgba(255, 255, 255, 0.92);
    box-shadow:0 4px 12px rgba(15, 10, 40, 0.35);
    margin-left:-10px;
    transition:transform 0.25s var(--hc-ease-out);
}

.hc-catl-peek:first-child { margin-left:0; }

.hc-catl-card:hover .hc-catl-peek,
.hc-catl-card:focus-visible .hc-catl-peek { transform:translateY(-3px); }

/* 信息条 */
.hc-catl-body {
    flex:1;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px 15px;
}

.hc-catl-info {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.hc-catl-name {
    font-size:17px;
    font-weight:700;
    color:var(--hc-text-primary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.hc-catl-count {
    display:flex;
    align-items:center;
    gap:5px;
    font-size:12.5px;
    color:var(--hc-text-secondary);
}

/* 计数前主题色发光点（v3 行式的信号语言缩微保留） */
.hc-catl-count::before {
    content:"";
    flex:none;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--cat-b, var(--hc-primary));
    box-shadow:0 0 8px rgba(var(--cat-brgb, 139, 92, 246), 0.8);
}

/* 箭头钮：常显（可进入信号不靠悬停），hover 主题渐变点亮 */
.hc-catl-go {
    flex:none;
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--hc-text-secondary);
    border:1px solid var(--hc-line-3, var(--hc-border));
    transition:background 0.25s var(--hc-ease-out), border-color 0.25s, color 0.25s, transform 0.25s var(--hc-ease-out);
}

.hc-catl-card:hover .hc-catl-go,
.hc-catl-card:focus-visible .hc-catl-go {
    background:linear-gradient(135deg, var(--cat-a, var(--hc-primary)), var(--cat-b, var(--hc-pink)));
    border-color:transparent;
    color:#fff;
    transform:translateX(2px);
}

/* ---------- 定制服务窄条（橱窗收尾） ---------- */

.hc-catl-ghost {
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:22px;
    padding:15px 18px;
    border-radius:14px;
    text-decoration:none;
    background:var(--hc-surface);
    border:1px dashed var(--hc-border);
    transition:border-color 0.22s, transform 0.22s var(--hc-ease-out), box-shadow 0.22s;
}

.hc-catl-ghost:hover,
.hc-catl-ghost:focus-visible {
    border-color:var(--hc-primary);
    border-style:solid;
    transform:translateY(-2px);
    box-shadow:0 10px 26px -14px rgba(124, 58, 237, 0.4); /* =#7C3AED 主色（无 rgb 令牌，按值入册） */
}

.hc-catl-ghost-icon {
    flex:none;
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:linear-gradient(135deg, var(--hc-primary), var(--hc-pink));
}

.hc-catl-ghost-text {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.hc-catl-ghost-text strong {
    font-size:15px;
    color:var(--hc-text-primary);
}

.hc-catl-ghost-text small {
    font-size:12.5px;
    color:var(--hc-text-secondary);
}

.hc-catl-ghost:hover .hc-catl-go,
.hc-catl-ghost:focus-visible .hc-catl-go {
    background:linear-gradient(135deg, var(--hc-primary), var(--hc-pink));
    border-color:transparent;
    color:#fff;
    transform:translateX(2px);
}

/* ---------- 减动效：静态帧（保留颜色态，去掉位移/缩放） ---------- */
@media (prefers-reduced-motion: reduce) {
    .hc-catl-card,
    .hc-catl-cover img,
    .hc-catl-peek,
    .hc-catl-go,
    .hc-catl-ghost { transition:none; }

    .hc-catl-card:hover { transform:none; }
    .hc-catl-card:hover .hc-catl-cover img { transform:scale(1.01); }
    .hc-catl-card:hover .hc-catl-peek { transform:none; }
    .hc-catl-ghost:hover { transform:none; }
}

/* ---------- 响应式 ---------- */
@media (max-width:767.98px) {
    .hc-catl { padding-bottom:52px; }
    .hc-catl-meta { font-size:13px; }
    .hc-catl-grid { margin-top:20px; }

    /* 单列下封面稍高（16:10），滑起来更从容 */
    .hc-catl-cover { aspect-ratio:16 / 10; }
    .hc-catl-peek { width:36px; height:36px; border-radius:8px; }
    .hc-catl-cover-emoji { font-size:44px; }

    .hc-catl-body { padding:12px 13px 13px; gap:10px; }
    .hc-catl-name { font-size:15.5px; }
    .hc-catl-count { font-size:11.5px; }
    .hc-catl-go { width:32px; height:32px; }
    .hc-catl-go svg { width:15px; height:15px; }

    .hc-catl-ghost { margin-top:16px; padding:13px 14px; gap:11px; }
    .hc-catl-ghost-icon { width:38px; height:38px; }
    .hc-catl-ghost-icon svg { width:18px; height:18px; }
    .hc-catl-ghost-text strong { font-size:14px; }
    .hc-catl-ghost-text small { font-size:11.5px; }
}

/* ============================================
   移动端分类 chips（桌面侧栏的横向滚动替代）
   ============================================ */

.hc-cat-chips {
    padding:10px 0 4px;
}

.hc-cat-chips-track {
    display:flex;
    gap:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px 0 6px;
}

.hc-cat-chips-track::-webkit-scrollbar { display:none; }

.hc-cat-chip {
    flex:0 0 auto;
    font-size:13px;
    font-weight:500;
    color:var(--hc-text-secondary);
    padding:7px 14px;
    border-radius:999px;
    background:var(--hc-surface);
    border:1px solid var(--hc-border);
    text-decoration:none;
    transition:color 0.18s, background 0.18s, box-shadow 0.18s;
}

.hc-cat-chip.active {
    color:var(--hc-on-brand);
    background:var(--hc-grad);
    border-color:transparent;
    box-shadow:0 4px 12px -4px rgba(124, 58, 237, 0.5);
}

/* ============================================
   分类侧栏导航（桌面 sticky）
   ============================================ */

.hc-cat-aside {
    position:sticky;
    top:96px;
}

.hc-hero-cats {
    background:var(--hc-surface);
    border:1px solid var(--hc-border);
    border-radius:var(--hc-radius-lg);
    padding:16px 12px;
    box-shadow:var(--hc-shadow-sm);
}

.hc-hero-card-head {
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    font-size:14px;
    color:var(--hc-text);
    padding:0 6px 12px;
    border-bottom:1px solid var(--hc-border);
    margin-bottom:8px;
}

.hc-hero-card-head .ali-icon {
    color:var(--hc-primary);
    font-size:16px;
}

.hc-cat-list {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.hc-cat-list a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:9px 12px;
    border-radius:10px;
    font-size:13.5px;
    color:var(--hc-text-secondary);
    text-decoration:none;
    transition:background 0.18s, color 0.18s, box-shadow 0.18s;
}

.hc-cat-list a:hover {
    background:var(--hc-primary-50, var(--hc-primary-50));
    color:var(--hc-primary-dark);
}

/* active：渐变胶囊 + 内高光（导航下划线动画的同族语言） */
.hc-cat-list a.active {
    color:var(--hc-on-brand);
    background:var(--hc-grad);
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 14px -6px rgba(124, 58, 237, 0.55);
}

.hc-cat-list a.active .hc-cat-arrow { color:rgba(255, 255, 255, 0.85); }

.hc-cat-arrow {
    color:var(--hc-text-muted);
    transition:transform 0.18s, color 0.18s;
}

.hc-cat-list a:hover .hc-cat-arrow {
    transform:translateX(2px);
    color:var(--hc-primary);
}

/* ============================================
   首页商品精简卡片（编辑感版式 v2）
   ============================================ */

.hc-goods-mini {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    text-decoration:none;
    padding:10px;
    border-radius:14px;
    background:var(--hc-surface);
    border:1px solid var(--hc-border);
    transition:transform 0.22s var(--hc-ease-out), box-shadow 0.22s, border-color 0.22s;
    height:100%;
    position:relative;
    overflow:hidden;
}

/* 顶部海洋发丝线：hover 时浮现 */
.hc-goods-mini:hover {
    border-color:var(--hc-line-11);
    box-shadow:0 10px 24px -8px rgba(124, 58, 237, 0.24), 0 2px 6px -2px rgba(30, 27, 46, 0.06);
    transform:translateY(-3px);
    text-decoration:none;
}
/* v3 描边环整体退役（2026-10-12 四修）：mask 版左缘缺失 → 双层背景版被用户
   两轮判「背景效果不是边框效果」（伪元素画环无论贴内侧还是 border 位，观感
   都是贴层）；终版回归 border 属性本身——hover=边框色紫粉呼吸（见下方
   零反馈段后的 hover 规则），selected=常亮细紫边+✓。::before 归零闲置 */

.hc-goods-mini-img {
    position:relative;
    width:100%;
    /* 正方形封面（2026-09-02 用户拍板）：站内商品原图多为方图，4:3+cover 会裁上下边缘；
       1:1 也是电商卡主流（淘宝/亚马逊系）。首页与 /category 分类页共用此卡。 */
    aspect-ratio:1 / 1;
    margin-bottom:10px;
    border-radius:10px;
    overflow:hidden;
    background:var(--hc-bg-alt);
}

.hc-goods-mini-img img {
    width:100%;
    height:100%;
    object-fit:cover;
    background:var(--hc-bg);
    transition:transform 0.35s var(--hc-ease-out);
}

/* NEW 角标：30 天内上架的商品卡（「新上」横带撤除后的新上信号承载）。
   2026-09-17 审计修复 S6：原与 .hc-goods-mini-promo 同位 top:8px;left:8px 叠印，
   NEW 移到右上角（促销/秒杀角标保留左上） */
.hc-goods-mini-new {
    position:absolute;
    top:8px;
    right:8px;
    z-index:1;
    font-size:10px;
    font-weight:800;
    letter-spacing:0.5px;
    color:var(--hc-on-brand);
    background:linear-gradient(135deg, var(--hc-pink), var(--hc-primary));
    padding:2px 7px;
    border-radius:999px;
    box-shadow:0 2px 8px -2px rgba(124, 58, 237, 0.5);
}

/* 类型角标（hc-goods-mini-tag/hc-tag-auto/hc-tag-manual）已随 _goods_type_tag 死 partial 一并删除（2026-09-02 撤角标） */
/* 封面缩放已撤（2026-10-05 用户拍板：放大没用）——悬停反馈=扫光+提亮 */

.hc-goods-mini-body {
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
    padding:0 2px 2px;
}

.hc-goods-mini-name {
    font-size:13px;
    color:var(--hc-text);
    font-weight:600;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:36px;
    text-align:left;
}

.hc-goods-mini-foot {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:auto;
}

.hc-goods-mini-price {
    font-size:17px;
    color:var(--hc-price);
    font-weight:800;
    letter-spacing:-0.3px;
}

/* 右下角箭头圆钮：hover 才点亮 */
.hc-goods-mini-go {
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--hc-bg-alt);
    color:var(--hc-text-muted);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:var(--hc-transition);
    flex-shrink:0;
}

.hc-goods-mini:hover .hc-goods-mini-go {
    background:var(--hc-grad);
    color:var(--hc-on-brand);
    transform:translateX(2px);
    box-shadow:0 3px 8px -1px rgba(124, 58, 237, 0.4);
}

/* ===== 悬停微动效（2026-10-05）：品名点染（纯 CSS 零 JS；缩放/扫光/提亮均已按用户要求撤除；
   卡片升起不做——被 base.css 的 [data-reveal].revealed transform:none 钉死，历史上从未生效） ===== */
@media (prefers-reduced-motion: no-preference) {
    .hc-goods-mini:hover .hc-goods-mini-name { color: var(--hc-primary); }
}

/* ===== 商品卡悬停零反馈（2026-10-05 用户拍板）：悬停时卡片完全不动、不变色、无任何高亮 =====
   覆盖上方的 :hover 系规则（同特异性、文件更靠后者胜）。选中态（.selected）不受影响。
   2026-10-12 修订：边框维度开放——用户拍板加流光描边动画（见下 v3 段），
   其余零反馈语义保持（卡片不位移/不变色/图片不动） */
.hc-goods-mini:hover {
    border-color: var(--hc-border);
    box-shadow: none;
    transform: none;
    text-decoration: none;
}
.hc-goods-mini:hover .hc-goods-mini-img img { transform: none; filter: none; }
.hc-goods-mini:hover .hc-goods-mini-go {
    background: var(--hc-bg-alt);
    color: var(--hc-text-muted);
    transform: none;
    box-shadow: none;
}
@media (prefers-reduced-motion: no-preference) {
    .hc-goods-mini:hover .hc-goods-mini-name { color: var(--hc-text); }
}

/* ===== hover 描边动画（2026-10-12 七修：对角双线同时出发）——用户拍板
   「不要一个点绕一圈，从对角同时开始」。两个相同 rect：A 从路径起点（左上
   角）生长前半圈（顶+右边，dasharray 0→50），B 的 dashoffset=50 把生长锚
   在路径中点（右下角，走 w+h 恰好对角）描后半圈（底+左边）——两头同时
   出发同时到达，在对角汇合闭圈；移出双向收回。dasharray 列表插值=
   线头固定端点生长（dashoffset 滑入式已弃）；初始 0.5 防 round 线帽画点 */
.hc-goods-draw {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}
.hc-goods-draw rect {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    rx: 13px;
    fill: none;
    stroke: url(#hcBorderGrad);
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-dasharray: 0 100;
    opacity: 0;
    /* 九修（用户拍板「移出不要瞬间消失，过渡回去再消失」）：本规则=移出的
       目标态——dasharray 先收回 0.65s，opacity 延迟 0.65s（等收回完成）再
       0.25s 淡出；transition 看目标态，进入侧的快亮由 hover 规则自带 */
    transition:
        stroke-dasharray 0.65s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease 0.65s;
}
.hc-goods-draw .hc-draw-b {
    stroke-dashoffset: 50;
}
.hc-goods-mini:not(.selected):hover .hc-goods-draw rect {
    stroke-dasharray: 50 50;
    opacity: 1;
    /* 进入侧：opacity 秒亮（线从零生长无感）+ dasharray 生长 */
    transition:
        stroke-dasharray 0.65s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.05s ease 0s;
}
/* 选中态（八修用户拍板「边框要保留住」）：对角双线描边常驻（不播动画，
   静态满圈）+ 箭头钮品牌高亮 + ✓ 角标；原 1px 紫边退役（描边接管强调） */
.hc-goods-mini.selected .hc-goods-draw rect {
    stroke-dasharray: 50 50;
    opacity: 1;
}
.hc-goods-mini.selected .hc-goods-mini-go {
    background: var(--hc-grad);
    color: var(--hc-on-brand);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
}
@media (prefers-reduced-motion: reduce) {
    .hc-goods-draw rect { transition: none; }
}

/* ===== 首页快速下单两栏（左商品网格 + 右购买面板） ===== */
.hc-goods-tabs { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 16px; padding:0; }
.hc-goods-tabs li { padding:8px 18px; border-radius:999px; font-size:13.5px; font-weight:500; color:var(--hc-text-secondary); background:var(--hc-surface); border:1px solid var(--hc-border); cursor:pointer; transition:all .18s; user-select:none; }
.hc-goods-tabs li:hover { border-color:var(--hc-primary-light); color:var(--hc-primary); }
.hc-goods-tabs li.active { background:var(--hc-grad); color:var(--hc-on-brand); border-color:transparent; box-shadow:0 4px 14px rgba(124,58,237,.30); font-weight:600; }

/* 2026-10-12 八修：选中态由 SVG 对角描边常驻+箭头高亮接管（见上方
   .hc-goods-draw 段），此处的紫边框退役回普通灰边；✓ 角标保留 */
.hc-goods-mini.selected { border:1px solid var(--hc-border); }
.hc-goods-mini.selected::after { content:"✓"; position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:50%; background:var(--hc-grad); color:var(--hc-on-brand); font-size:12px; line-height:22px; text-align:center; z-index:3; box-shadow:0 2px 6px rgba(124,58,237,.35); }

.hc-home-panel-sticky { position:sticky; overflow-y:auto; transition:top 0.3s; }
/* 吸附几何（top/max-height 常态与 scrolled 态）在 buy.css 紧凑模式段统一定义（原此处数值与 buy.css 逐字重复且被其覆盖） */
.hc-home-panel-placeholder { background:var(--hc-surface); border:1px dashed var(--hc-line-12); border-radius:var(--hc-radius-lg); text-align:center; padding:60px 20px; color:var(--hc-text-muted); }
.hc-home-panel-placeholder .hc-emoji { font-size:42px; display:block; margin-bottom:10px; }
.hc-home-panel-placeholder p { margin:0; font-size:13.5px; }

/* ============================================
   动效编排 · 首页
   ============================================ */

/* Hero 进场：眉标 → 大标题 → 副题 → 信任卡 依次浮现 */
.hc-banner-eyebrow { animation:hc-rise 0.7s var(--hc-ease-out) 0.05s both; }
.hc-banner-copy h2 { animation:hc-rise 0.7s var(--hc-ease-out) 0.16s both; }
.hc-banner-copy p { animation:hc-rise 0.7s var(--hc-ease-out) 0.27s both; }
.hc-trust-item { animation:hc-rise 0.7s var(--hc-ease-out) both; }
.hc-trust-item:nth-child(1) { animation-delay:0.42s; }
.hc-trust-item:nth-child(2) { animation-delay:0.52s; }
.hc-trust-item:nth-child(3) { animation-delay:0.62s; }
.hc-trust-item:nth-child(4) { animation-delay:0.72s; }

/* 潮光漂浮：hero 里两团缓慢游移的光（海洋氛围，极缓极淡） */
.hc-hero-stage::after {
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(196, 181, 253, 0.16), transparent 68%);
    filter:blur(6px);
    top:-120px;
    right:6%;
    z-index:1;
    pointer-events:none;
    animation:hc-drift-a 18s ease-in-out infinite alternate;
}

.hc-hero-stage .hc-banner-slider::after {
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(236, 72, 153, 0.13), transparent 68%);
    filter:blur(8px);
    bottom:-90px;
    left:34%;
    z-index:1;
    pointer-events:none;
    animation:hc-drift-b 22s ease-in-out infinite alternate;
}

@keyframes hc-drift-a {
    from { transform:translate(-40px, 10px) scale(1); }
    to   { transform:translate(60px, 50px) scale(1.15); }
}

@keyframes hc-drift-b {
    from { transform:translate(30px, -10px) scale(1.1); }
    to   { transform:translate(-50px, -40px) scale(0.95); }
}

/* 搜索框聚焦展宽（微交互） */
.hc-search-form { transition:var(--hc-transition), max-width 0.35s var(--hc-ease-out); }
.hc-search-form:focus-within { max-width:600px; }

/* 商品卡进场 v2（2026-10-11 用户拍板 A+B：左右交替侧滑+对焦渐清，替代原全场
   单一上浮）——首场：奇偶列各从左右侧滑入（-/+24px，与 2/3/4 列网格的相邻
   错落呼应）+ 轻竖降 10px + scale(.96) + blur(5px) 渐清；同排 40ms 阶梯保留
   （每属性显式带 delay：transition 简写会重置 delay，不再依赖独立 delay 规则）。
   blur 性能：一屏同时过渡卡有限（≤12 张）×0.5s 短窗，合成层开销可接受；
   低端机若报掉帧，优先砍 blur 行（transform/opacity 独立保留） */
html.hc-motion #goodsTabContent .hc-goods-mini[data-reveal] {
    filter: blur(5px);
    transition:
        opacity 0.6s var(--hc-ease-out) calc(var(--reveal-i, 0) * 40ms),
        transform 0.6s var(--hc-ease-out) calc(var(--reveal-i, 0) * 40ms),
        filter 0.5s var(--hc-ease-out) calc(var(--reveal-i, 0) * 40ms);
}
html.hc-motion #goodsTabContent .col:nth-child(odd) .hc-goods-mini[data-reveal] {
    transform: translate(-24px, 10px) scale(0.96);
}
html.hc-motion #goodsTabContent .col:nth-child(even) .hc-goods-mini[data-reveal] {
    transform: translate(24px, 10px) scale(0.96);
}
html.hc-motion #goodsTabContent .col .hc-goods-mini[data-reveal].revealed {
    filter: blur(0);
    /* 终态 transform 必须显式归零：奇偶初始态规则多一级 .col:nth-child
       （特异性 1,5,1 > 本规则不带 .col 的写法），套 .col 拉平后靠源顺序
       在后取胜——漏写会停在 ±24px 偏移态 */
    transform: none;
}
/* 回场轻量版（hc-seen 体系见 base.css）：左右轻滑 ±12px（跟列向）+ 淡入；
   不带 blur（0.32s 快节奏里渐清会脏）且阶梯清零（回看不等待）。特异性
   (1,3,2) 压过上方首场简写，duration/delay 全属性覆盖 */
html.hc-motion #goodsTabContent .col:nth-child(odd) .hc-goods-mini[data-reveal].hc-seen:not(.revealed) {
    transform: translate(-12px, 0);
    filter: none;
}
html.hc-motion #goodsTabContent .col:nth-child(even) .hc-goods-mini[data-reveal].hc-seen:not(.revealed) {
    transform: translate(12px, 0);
    filter: none;
}
html.hc-motion #goodsTabContent .col .hc-goods-mini[data-reveal].hc-seen.revealed {
    transition-duration: 0.32s;
    transition-delay: 0ms;
}
/* 切分类重播桥（2026-10-12）：home.blade.php 切 tab 时先挂本类再摘 revealed，
   强制回流后摘除——共显卡片（无 display 变化）得以瞬间定格隐藏态而非走回落
   过渡，随后 IO 重报的进场才有完整起幅。只在这几毫秒内存在，常驻态不受影响 */
.hc-reveal-instant { transition: none !important; }

/* 快速下单面板换装进场（2026-09-20）：AJAX 载入后 home.blade.php 给面板挂
   hc-panel-enter——骨架屏让位实体时上浮淡入一次（hc-rise 同语言）。
   动画挂在面板本体，吸附/抽屉定位在祖先容器（hc-home-panel-sticky / offcanvas），
   transform 不与 sticky 冲突；卡片 hover 抬升在内层 chip 上，亦无让位问题 */
html.hc-motion .hc-buy-panel.hc-panel-enter { animation:hc-rise 0.35s var(--hc-ease-out) both; }

/* 进场裁剪宿主（home.blade.php 进场时挂 / animationend 拆）：hc-rise 起步
   translateY(16px) 会让面板底缘瞬时探出 overflow-y:auto 的滚动宿主
   （.hc-home-panel-sticky / offcanvas-body），内容逼近 max-height 时滚动条
   闪现 350ms 又消失（2026-09-22 用户报「总价框加载时滚动条闪一下」）——
   进场期间临时裁掉溢出，动画结束还原；真超高内容在动画结束后才出滚动条
   （出现即常驻，不再是闪一下）。!important 压过 Bootstrap offcanvas-body
   与本文件 1462 行的 overflow-y:auto（瞬时态，350ms 级） */
.hc-panel-host-clip { overflow:hidden !important; }

/* 视差目标：提升为合成层，transform 由 JS 驱动（鼠标跟随分层） */
.hc-banner-copy, .hc-banner-trust, .hc-hero-wave { will-change:transform, filter; }

/* ===== 移动端下单抽屉（offcanvas-bottom）· 精修版 ===== */
@media (max-width:991.98px) {
    /* 移动端不再渲染页面底部的吸附栏（由抽屉承载下单，砍掉长滚动） */
    .hc-home-panel-sticky { display:none; }
}

.hc-panel-sheet {
    height:min(86vh, 760px);
    border:0;
    border-radius:24px 24px 0 0;
    box-shadow:0 -18px 52px rgba(30, 27, 46, 0.22);
    background:var(--hc-bg);
}

/* 把手区：更大呼吸 + 更醒目的把手 */
.hc-panel-sheet-head {
    position:relative;
    justify-content:center;
    padding:12px 16px 6px;
    border-bottom:0;
    background:var(--hc-surface);
    border-radius:24px 24px 0 0;
}

.hc-panel-sheet-head::before {
    content:"";
    width:48px;
    height:5px;
    border-radius:3px;
    background:var(--hc-line-18);
}

/* 内容区：表单放进一张圆角白卡（与整站卡片语言一致） */
.hc-panel-sheet-body {
    padding:12px 14px calc(16px + env(safe-area-inset-bottom));
}

.hc-panel-sheet .hc-buy-form {
    /* 底 14：给吸底条卡留呼吸（2026-09-25 重设计；旧 0 是贴底假象配套） */
    padding:16px 14px 14px;
    border:1px solid var(--hc-border);
    border-radius:var(--hc-radius-lg);
    box-shadow:var(--hc-shadow-sm);
    background:var(--hc-surface);
}

.hc-panel-sheet .hc-buy-header { padding-bottom:12px; margin-bottom:12px; }
.hc-panel-sheet .hc-buy-section { padding:12px 0; }

/* 下单键吸底条（2026-09-25 重设计，用户反馈旧版「下边框缺失+与卡边框重叠」）：
   旧版做「贴底假象」（下边框 0 + 方下角假装与抽屉底缝合一），但表单卡自身
   带完整描边圆角，两层边界叠出脏线。新版改为独立圆角小卡四面完整描边，
   吸底位置照旧——长表单滚动提交入口不丢 */
.hc-panel-sheet .hc-buy-submit-wrap {
    position:sticky;
    bottom:calc(4px + env(safe-area-inset-bottom));
    z-index:5;
    margin-top:16px;
    padding:10px;
    background:var(--hc-surface);
    border:1px solid var(--hc-border);
    border-radius:14px;
    box-shadow:0 -6px 18px -12px rgba(30, 27, 46, 0.18);
}

.hc-panel-sheet .hc-buy-submit { margin:0; }

/* ===== 商品卡星级徽标（有评价才渲染） ===== */
.hc-goods-mini-star { display:inline-flex; align-items:center; gap:2px; margin-top:4px; font-size:12px; font-weight:600; color:var(--hc-warning); }
.hc-goods-mini-name { display:block; }

/* buy 页买家评价区样式已归位至 buy.css（唯一消费者是 buy 页的 _goods_reviews partial） */

/* ===== 限时促销（P2）：商品卡促销价 + 划线 + 角标 ===== */
.hc-goods-mini .hc-goods-mini-promo-orig {
    color:var(--hc-text-muted-2); font-size:11px; text-decoration:line-through; margin-right:4px;
}
.hc-goods-mini .hc-goods-mini-promo {
    position:absolute; top:8px; left:8px; z-index:2;
    background:linear-gradient(135deg, var(--hc-warning-bright), var(--hc-danger-400));
    color:var(--hc-on-brand); font-size:10px; font-weight:700; letter-spacing:.5px;
    padding:2px 8px; border-radius:999px; box-shadow:0 2px 8px -2px rgba(239,68,68,.55);
}
.hc-goods-mini .hc-goods-mini-flash {
    /* 2026-09-15 修：原引用未定义的 --hc-brand-400/800（令牌实名是 primary 阶），
       渐变 invalid-at-computed-value 静默失效成透明底白字 */
    background:linear-gradient(135deg, var(--hc-primary-400), var(--hc-primary-dark));
    box-shadow:0 2px 8px -2px rgba(124, 58, 237, .55);
}
[data-theme="dark"] .hc-goods-mini .hc-goods-mini-promo-orig { color:var(--hc-text-secondary-2); }


/* ===== 支付方式徽章（2026-09-16 置 banner 舞台右下角，与左下指示器对称）===== */
.hc-pay-strip {
    position: absolute;
    right: 52px;
    bottom: 18px;
    z-index: 10;
    /* 46% 时 7 个带名徽章（~606px）差 10px 被挤成两行、第二行孤零一个
       （2026-10-08 用户报障）；放宽到 70%（≈900px）单行稳放下，且右锚
       向左生长不碰左下圆点（dots 右缘 ~330px）。未来徽章多到超上限才回
       退两行——右对齐 flex 下是优雅降级而非破版 */
    max-width: 70%;
}
.hc-pay-strip .hc-pay-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hc-pay-strip-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}
.hc-pay-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 4px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(233, 213, 255, 0.18);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
}
.hc-pay-badge svg {
    width: 16px;
    height: 16px;
    border-radius: 4.5px;
    flex: none;
}

@media (max-width: 991.98px) {
    /* 移动端：只留图标行（右下角与 dots 同层，slide 底部 56px 预留区容纳） */
    .hc-pay-strip { right: 24px; bottom: 20px; max-width: 52%; }
    .hc-pay-badge { padding: 2px; border-radius: 8px; }
    .hc-pay-badge svg { width: 18px; height: 18px; border-radius: 5px; }
    .hc-pay-badge-name { display: none; }
}

/* ===== 商品卡悬停特效家族（2026-10-07 拍板多版共存可切换）：tide / ripple / wake / gooey
   共用同一套画布规则——WebGL 画布盖在封面上，角标（z1/z2）仍在最上；
   切换入口：_script.blade.php 的 $goodsHoverFx ===== */
.hc-tide-canvas,
.hc-ripple-canvas,
.hc-wake-canvas,
.hc-gooey {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    z-index: 0;
    pointer-events: none;
}


/* ===== 品牌视频 banner slide（2026-10-06 即梦生成小龟星海）：
   视频铺满 slide；scale 1.14 外扩裁边（连免费版角标水印一起裁出画面）；
   reduced-motion 直接隐藏（slide 回落深色渐变底+文案仍可读） ===== */
.hc-banner-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.14);
    filter: saturate(1.06) contrast(1.02);
}
@media (prefers-reduced-motion: reduce) {
    .hc-banner-video { display: none; }
}