/* =============================================================================
   tz-ui.css — 桃子出海访客页 UI 规范层(2026-09-27 起,按批次追加)
   方案与样张在工作区 docs/方案/首页与UI/2026-09-27-移动端UI全面升级方案.md(不在本仓库)
   · Header.html 里紧跟 header-actions.css 阻塞加载(不进 critical 提取)。
     item.css / checkout.css / help.css / 模板内联 <style> / 插件 Chat.css 都在它之后加载,
     与它们冲突的规则一律加 :root 前缀提权,不靠加载顺序。
   · 手机端规则包在 @media (max-width:767.98px),与 Bootstrap d-md-none 同一个边界。
   · 只改显示层:不改 class 名、data-*、隐藏 input;购买主按钮 [data-type=main] 只许藏不许删。
   · 回滚:删掉 Header.html 里引用本文件的那一行即可。
   ============================================================================= */

/* ── 1. 设计变量 ─────────────────────────────────────────────────────────── */
:root {
    --tz-red: var(--th-accent);          /* 唯一品牌红:价格、选中、链接、红色主按钮 */
    --tz-red-press: var(--th-accent-text);    /* 红按钮按下;浅红底上的小字(对比度 5.7) */
    --tz-red-soft: var(--th-tint);
    --tz-red-line: var(--th-tint-line);
    --tz-ink: var(--th-ink);          /* 标题、正文 */
    --tz-buy: var(--th-cta);          /* 购买、复制发货内容 */
    --tz-buy-press: var(--th-cta-hover);
    --tz-text-2: #4b5058;       /* 正文次级 8.1:1 */
    --tz-text-3: #6b7280;       /* 辅助信息 4.8:1(替换 #999/#aaa) */
    --tz-text-4: #9ca3af;       /* 占位符、禁用 */
    --tz-line: #eceef2;
    --tz-line-2: #d9dce2;
    --tz-bg: var(--th-page-bg);
    --tz-surface-2: #f6f7f9;
    --tz-gold: var(--th-gold);         /* 只给「推广合作」 */
    --tz-ok: #16a34a;
    --tz-warn-bg: #fff7ed;
    --tz-warn-text: #9a3412;

    --tz-r-sm: 6px;             /* 标签 */
    --tz-r-md: 10px;            /* 按钮、输入框、规格 */
    --tz-r-lg: 14px;            /* 卡片、弹层 */
    --tz-r-pill: 999px;

    --tz-sh-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 1px rgba(16, 24, 40, .03);
    --tz-sh-2: 0 -4px 16px rgba(16, 24, 40, .08);
    --tz-sh-3: 0 16px 40px rgba(16, 24, 40, .18);

    --tz-dur-1: 120ms;          /* 按下 */
    --tz-dur-2: 200ms;          /* 状态切换 */
    --tz-dur-3: 280ms;          /* 弹层 */
    --tz-ease: cubic-bezier(.2, 0, 0, 1);

    --tz-safe-b: env(safe-area-inset-bottom, 0px);

    /* OneUI/Bootstrap 主色是蓝 #4c78dd:站内蓝色图标、勾选框、聚焦光晕都从这里漏出来,统一收回品牌红 */
    --bs-primary: var(--th-accent);
    --bs-primary-rgb: var(--th-accent-rgb);
    --bs-link-color: var(--th-accent);
    --bs-link-hover-color: var(--th-accent);
}

/* ── 2. 全局基础(桌面同样生效) ──────────────────────────────────────────── */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 表单控件原来走 Bootstrap 的 Inter 网络字体,只为一个数量框下载一个字体文件;统一跟随正文 */
.form-control,
.form-select {
    font-family: inherit;
}

/* 价格、数量用等宽数字,切规格时不跳宽 */
.sku-price-display,
.sku-price,
.item-price,
.featured-price,
.aggregate-card-price,
.quantity-input {
    font-variant-numeric: tabular-nums;
}

/* 去蓝 */
.text-primary {
    color: var(--th-accent-text) !important;
}

.form-check-input:checked {
    background-color: var(--th-accent);
    border-color: var(--th-accent);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--th-tint-line);
    box-shadow: 0 0 0 .2rem rgba(var(--th-accent-rgb), .12);
}

.btn-primary:active,
.btn-primary:focus:active,
.btn-check:active + .btn-primary {
    background-color: var(--th-btn-hover) !important;
    border-color: var(--th-btn-hover) !important;
}

:root .promo-card-action,
:root .product-card-price.is-link {
    color: var(--th-price);
}

/* 规格按钮的 .5s 淡入每次切类型都重放,看起来像闪了一下 */
.sku-item {
    animation: none !important;
}

/* 触屏设备没有 hover,但 :hover 会在点过的元素上「粘住」:
   规格 hover 与选中一个样、卡片点完停在上浮状态、新闻图放大 */
@media (hover: none) {
    .sku-item:not(.sku-current):hover {
        border-color: #d8d8d8 !important;
    }

    .aggregate-product-card:hover,
    .news-card:hover img {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* 横屏刘海:viewport-fit=cover 后内容会伸到刘海下,两侧补安全区(竖屏为 0,不影响) */
#page-container {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* ── 3. 提示与弹窗:三套各长各样 → 一个样子(不改任何调用代码) ─────────── */
/* layer.msg:深色胶囊 */
:root .layui-layer-msg {
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(17, 17, 17, .88) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2) !important;
}

:root .layui-layer-msg .layui-layer-content {
    padding: 10px 16px !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

/* toastr(message.success/error/warning):顶部彩色方块 → 同款深色胶囊,左侧小圆点区分结果 */
#toast-container > div {
    width: fit-content !important;
    max-width: 86vw;
    margin: 8px auto 0 !important;
    padding: 10px 16px 10px 34px !important;
    border-radius: 12px !important;
    background-image: none !important;
    background-color: rgba(17, 17, 17, .9) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2) !important;
    opacity: 1 !important;
    font-size: 14px;
    line-height: 20px;
}

#toast-container > div::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 14px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--tz-ok);
}

#toast-container > .toast-error::before {
    background: var(--th-accent);
}

#toast-container > .toast-warning::before {
    background: #f59e0b;
}

#toast-container > .toast-info::before {
    background: #9ca3af;
}

#toast-container .toast-progress {
    display: none !important;
}

/* SweetAlert(message.alert / message.ask):紫色 #7066e0 按钮 → 品牌色 */
.swal2-popup {
    border-radius: var(--tz-r-lg) !important;
}

.swal2-styled.swal2-confirm {
    border-radius: var(--tz-r-md) !important;
    background-color: var(--th-accent) !important;
    box-shadow: none !important;
}

.swal2-styled.swal2-cancel {
    border: 1px solid var(--tz-line-2) !important;
    border-radius: var(--tz-r-md) !important;
    background-color: #fff !important;
    color: var(--th-ink) !important;
}

.swal2-styled:focus {
    box-shadow: 0 0 0 3px rgba(var(--th-accent-rgb), .18) !important;
}

/* ── 4. 手机端全局 ──────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    /* iPhone 输入框字号小于 16px 聚焦时会整页放大且不缩回 */
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px !important;
    }

    /* 按下反馈:只动 transform,120ms */
    .btn,
    .buy-button,
    .mobile-top-button,
    .sku-item,
    .tab-item,
    .home-tutorial-button,
    .featured-card,
    .aggregate-product-card > a,
    .recommended-product-card,
    .promo-card,
    .df-copy,
    .df-copy-mini,
    .btn-delivery-copy {
        transition: transform var(--tz-dur-1) var(--tz-ease), background-color var(--tz-dur-2) var(--tz-ease), border-color var(--tz-dur-2) var(--tz-ease), color var(--tz-dur-2) var(--tz-ease) !important;
    }

    .btn:active,
    .buy-button:active,
    .mobile-top-button:active,
    .sku-item:active,
    .tab-item:active,
    .home-tutorial-button:active,
    .df-copy:active,
    .df-copy-mini:active,
    .btn-delivery-copy:active {
        transform: scale(.97);
    }

    .featured-card:active,
    .aggregate-product-card > a:active,
    .recommended-product-card:active,
    .promo-card:active {
        transform: scale(.985);
    }

    /* 头部:两行结构与下滑隐藏(09-23 定)不动,只收视觉 */
    .mobile-top-button {
        position: relative;
        min-height: 32px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    .mobile-top-button::after {             /* 视觉 32 高,点击区扩到 44 */
        content: "";
        position: absolute;
        inset: -6px -2px;
    }

    .mobile-top-button.is-promotion {
        border: 1px solid var(--th-gold-line) !important;
        background: var(--th-gold-bg) !important;
        box-shadow: none !important;
        color: var(--tz-gold) !important;
    }

    .mobile-top-button.is-promotion .mobile-top-icon {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
        color: var(--tz-gold) !important;
    }

    .mobile-top-button.is-order {
        min-width: 60px !important;
        background: var(--th-morder-bg) !important; color: var(--th-on-morder) !important;
    }

    .search-area.mobile-search-area {
        grid-template-columns: 32px auto minmax(0, 1fr) 36px !important;
        gap: 6px !important;
        padding: 4px 12px 10px !important;
    }

    .mobile-back-link {
        width: 32px !important;
        height: 44px !important;
    }

    .mobile-page-link {
        height: 44px !important;
        font-size: 15px !important;
    }

    /* 原来容器 36 高 overflow:hidden 裁掉 42 高的输入框,再用奇怪的内边距补;改成容器与输入框同高 */
    .search-area.mobile-search-area .search-bar {
        height: 38px;
        border-radius: var(--tz-r-pill);
    }

    :root #page-container .search-area.mobile-search-area .search-bar input {
        height: 38px;
        padding: 0 14px 0 36px;
        border: 1px solid transparent;
        border-radius: var(--tz-r-pill);
        background-color: var(--th-msearch-bg);
        color: var(--th-msearch-fg);
        line-height: 36px;
    }

    :root #page-container .search-area.mobile-search-area .search-bar input::placeholder {
        color: var(--th-msearch-ph);
    }

    .search-area.mobile-search-area .search-bar .search-icon {
        top: 50%;
        left: 13px;
        display: flex;
        width: 16px;
        height: 16px;
        color: var(--th-msearch-ph);
    }

    .search-area.mobile-search-area .search-bar .search-icon svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
    }

    .search-area.mobile-search-area .user-icon {
        position: relative;
        width: 36px !important;
        height: 36px !important;
        background: var(--th-mavatar-bg) !important;
    }

    .search-area.mobile-search-area .user-icon::after {
        content: "";
        position: absolute;
        inset: -4px;
    }

    .search-area.mobile-search-area .user-icon svg {
        width: 20px !important;
        height: 20px !important;
        fill: var(--th-mavatar-fg) !important; stroke: var(--th-mavatar-fg) !important;
    }

    /* 页脚:链接每行 40 高好点,底部让出 iPhone 小白条 */
    .app-footer {
        padding-bottom: calc(20px + var(--tz-safe-b)) !important;
    }

    .app-footer .footer-links {
        gap: 0 15px;
    }

    .app-footer .footer-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        color: var(--th-footer-fg);
        font-size: 13px;
    }

    .app-footer .copyright {
        color: var(--th-footer-fg-2);
        font-size: 12px;
    }
}

/* =============================================================================
   第 2 批(2026-09-27):聚合页 / 商品页、购买栏、在线客服窗
   ============================================================================= */

/* ── 5. 商品详情正文里的内联样式(库里 80 款共用 14 种写法),桌面同样生效的只改颜色 ── */
.introduce-content p[style*="color:#334155"] {
    color: var(--th-ink) !important;                    /* 灰蓝小标题 → 正文黑 */
}

.introduce-content p[style*="border-left:3px solid #4c78dd"] {
    border-left-color: var(--th-accent) !important;         /* 蓝色竖条 → 品牌红 */
}

.introduce-content span[style*="color:#94a3b8"] {
    color: var(--tz-text-3) !important;                  /* 免责小字对比度 2.6 → 4.8 */
}

/* ── 6. 购买流程:四色图标 → 单色(桌面保留一行四格,手机改竖排时间轴) ── */
:root .purchase-step i {
    color: var(--th-accent-text) !important;
}

/* ── 7. 在线客服:10-10 改版后配色已写进插件 Chat.css(var(--th-*)),这里不再覆盖 ── */

/* 触屏上主图点一下会停在 hover 的变暗放大状态(手机端没有看大图功能) */
@media (hover: none) {
    .img-link:hover {
        transform: none !important;
        opacity: 1 !important;
    }
}

.tz-bar-cs {
    display: none;
}

/* 选中规格右上角的红色对勾角标:09-27 先上手机端,09-28 起桌面同样显示(::after 被旧规则占着,用 ::before) */
:root .container-item-mobile-narrow .sku-item {
    position: relative;
    overflow: hidden;
}

:root .container-item-mobile-narrow .sku-item.sku-current::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 16px;
    border-bottom-left-radius: 8px;
    background: var(--th-accent) no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 5.2 4.5 8 10.5 2'/%3E%3C/svg%3E");
}

.container-item-mobile-narrow .sku-wrapper .sku-price {
    margin-right: 4px;                          /* 给角标让一点位置,窄桌面(768–991)价格贴近右上角 */
}

@media (max-width: 767.98px) {
    /* 区块:白底 14 圆角、轻阴影;标题 17/600 */
    :root .container-item-mobile-narrow .block.block-rounded {
        border: 0 !important;
        border-radius: var(--tz-r-lg) !important;
        box-shadow: var(--tz-sh-1) !important;
    }

    .container-item-mobile-narrow .block-header .block-title {
        color: var(--th-ink) !important;
        font-size: 17px !important;
        font-weight: 600 !important;
    }

    /* 页面 h1:文字与标签不变,视觉降一级 */
    :root .aggregate-item-page .aggregate-product-name {
        margin-bottom: 14px !important;
        color: var(--tz-text-2) !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
    }

    /* 商品头 */
    .item-header-mobile .item-image-main-mobile img {
        border-radius: 12px !important;
    }

    .item-header-mobile .real-item-name {
        color: var(--th-ink) !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        line-height: 1.45 !important;
    }

    .item-header-mobile .fs-sm.text-muted {
        color: var(--tz-text-3) !important;
        font-size: 12px !important;
    }

    .item-header-mobile .promise {
        gap: 10px !important;
    }

    .item-header-mobile .promise-item .promise-text {
        color: var(--tz-text-2) !important;
        font-size: 12px !important;
    }

    /* 规格 / 类型:平面、44 高、10 圆角;选中 = 红边 + 浅红底 + 右上角红色对勾角标(::after 被旧规则占着,用 ::before) */
    :root .container-item-mobile-narrow .sku-wrapper .sku-item,
    :root .container-item-mobile-narrow .category-wrapper .sku-item {
        overflow: hidden;
        border: 1px solid var(--tz-line-2) !important;
        border-radius: var(--tz-r-md) !important;
        background: #fff !important;
        box-shadow: none !important;
        color: var(--th-ink) !important;
    }

    :root .container-item-mobile-narrow .sku-wrapper .sku-item.sku-current,
    :root .container-item-mobile-narrow .category-wrapper .sku-item.sku-current {
        border-color: var(--th-accent) !important;
        background: var(--tz-red-soft) !important;
        box-shadow: inset 0 0 0 .5px var(--th-accent) !important;
        color: var(--th-accent-text) !important;
        font-weight: 600;
    }

    .container-item-mobile-narrow .sku-wrapper .sku-price {
        margin-right: 6px;
        font-size: 14px;
    }

    .container-item-mobile-narrow .sku-cate-td .cate-name {
        color: var(--th-ink) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    /* 详情正文:15/1.75 */
    .container-item-mobile-narrow .introduce-content {
        color: var(--tz-text-2);
        font-size: 15px;
        line-height: 1.75;
    }

    .container-item-mobile-narrow .introduce-content strong {
        color: var(--th-ink);
        font-weight: 600;
    }

    .container-item-mobile-narrow .introduce-content a:not([style]) {
        text-decoration-color: rgba(var(--th-accent-rgb), .35);
        text-underline-offset: 3px;
    }

    .introduce-content p[style*="border-left:3px solid #4c78dd"] {
        margin: 22px 0 8px !important;
        padding-left: 0 !important;
        border-left: 0 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    .introduce-content p[style*="border-left:3px solid #4c78dd"]::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 14px;
        margin-right: 8px;
        border-radius: 2px;
        background: var(--th-accent);
        vertical-align: -1px;
    }

    .introduce-content div[style*="background:#fff7ed"] {
        padding: 10px 12px !important;
        border: 0 !important;
        border-radius: var(--tz-r-md) !important;
        font-size: 14px;
    }

    .introduce-content div[style*="border-left:4px solid #e60027"] {
        border-radius: var(--tz-r-md) !important;
    }

    .introduce-content span[style*="font-family:monospace"] {
        padding: 8px 10px !important;
        border-radius: 8px !important;
        background: var(--tz-surface-2) !important;
        font-size: 13px !important;
        line-height: 1.6;
    }

    /* 教程按钮:实心红 → 次级(浅红底红字),不跟购买抢 */
    :root .introduce-content .detail-actions a[href]:not([style]) {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 14px;
        border: 1px solid var(--tz-red-line) !important;
        border-radius: var(--tz-r-md);
        background: var(--tz-red-soft) !important;
        color: var(--th-accent-text) !important;
        font-size: 14px;
        line-height: 1.3;
    }

    /* 购买流程:竖排时间轴 */
    :root .purchase-step {
        position: relative;
        display: grid !important;
        grid-template-columns: 36px 1fr;
        column-gap: 12px;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0 16px !important;
        text-align: left !important;
    }

    :root .purchase-step > .mb-3 {
        position: relative;
        z-index: 1;
        grid-row: 1 / span 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0 !important;
        border-radius: 50%;
        background: var(--tz-red-soft);
    }

    :root .purchase-step > .mb-3 i {
        font-size: 15px !important;
    }

    :root .purchase-step h4 {
        margin: 7px 0 2px !important;
        color: var(--th-ink) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    :root .purchase-step p {
        margin: 0 !important;
        color: var(--tz-text-3) !important;
        font-size: 13px !important;
        line-height: 1.5;
    }

    :root .purchase-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 38px;
        bottom: 0;
        left: 17.5px;
        width: 1px;
        background: var(--tz-red-line);
    }

    /* 相关推荐 / 最新促销 */
    :root .product-card-title,
    :root .promo-card-title {
        color: var(--th-ink) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    :root .product-card-price.is-link {
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    :root .product-card-desc,
    :root .promo-card-description {
        color: var(--tz-text-3) !important;
        font-size: 13px !important;
    }

    :root .product-card-img img,
    :root .promo-image img {
        border-radius: 12px !important;
    }

    :root .promo-card {
        border: 1px solid var(--tz-line) !important;
        border-radius: var(--tz-r-lg) !important;
        box-shadow: none !important;
    }

    /* 折叠块:摘要行 48 高 */
    .collection-items-details > summary,
    .category-guide-wrap > summary {
        min-height: 48px;
    }

    /* 购买栏:阴影代替边线、底部让出小白条、价格 22/700、按钮 44 高;左侧客服入口 */
    :root .mobile-purchase-footer {
        padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + var(--tz-safe-b)) max(12px, env(safe-area-inset-left, 0px)) !important;
        border-top: 0 !important;
        box-shadow: var(--tz-sh-2) !important;
    }

    :root .mobile-purchase-footer .purchase-buttons-container.mobile {
        gap: 10px !important;
        margin: 0 !important;
    }

    :root .mobile-purchase-footer .price-display-mobile {
        min-width: 64px !important;
        padding-left: 0 !important;
    }

    :root .mobile-purchase-footer .price-display-mobile .item-price {
        color: var(--th-price) !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.1;
    }

    :root .mobile-purchase-footer .quantity-selector-mobile {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    :root .mobile-purchase-footer .quantity-selector-mobile .input-group {
        flex-wrap: nowrap;
        width: auto !important;
        max-width: none !important;
        height: 36px;
        overflow: hidden;
        border: 1px solid var(--tz-line-2);
        border-radius: var(--tz-r-md);
    }

    :root .mobile-purchase-footer .quantity-selector-mobile .input-group .btn {
        width: 32px;
        height: 34px;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: var(--tz-surface-2) !important;
        color: var(--th-ink) !important;
        font-size: 18px !important;
        line-height: 34px;
    }

    :root .mobile-purchase-footer .quantity-selector-mobile .input-group input {
        width: 40px !important;
        height: 34px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        color: var(--th-ink);
        text-align: center;
    }

    :root .mobile-purchase-footer .btn-buy-now,
    :root .mobile-purchase-footer .btn-no-stock {
        height: 44px;
        min-width: 96px !important;
        padding: 0 14px !important;
        border-radius: var(--tz-r-md) !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 44px !important;
    }

    :root .mobile-purchase-footer .btn-buy-now {
        border-color: var(--th-cta) !important;
        background: var(--th-cta) !important;
    }

    :root .mobile-purchase-footer .btn-buy-now:active {
        background: var(--th-cta-hover) !important;
    }

    .tz-bar-cs {
        display: flex;
        flex: 0 0 40px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 40px;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--tz-text-2);
        font-size: 11px;
        line-height: 1;
    }

    .tz-bar-cs svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* 有购买栏的页面:客服入口在购买栏里,浮钮收起;页脚底部让出购买栏高度 */
    body.tz-has-bar #chatToggleButton {
        display: none !important;
    }

    body.tz-has-bar .app-footer {
        padding-bottom: calc(84px + var(--tz-safe-b)) !important;
    }

    /* 客服窗:320×500 悬浮卡(输入区被购买栏压住)→ 全宽贴底;层级高于购买栏(1000)与头部(1020) */
    #chatWidget.chat-widget {
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 1100 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: min(88vh, 720px) !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: var(--tz-sh-3) !important;
    }

    #chatWidget .chat-footer {
        padding-bottom: calc(8px + var(--tz-safe-b)) !important;
    }
}

@media (max-width: 359.98px) {
    :root .mobile-purchase-footer .btn-buy-now,
    :root .mobile-purchase-footer .btn-no-stock {
        min-width: 84px !important;
        padding: 0 10px !important;
    }
}

/* =============================================================================
   第 3 批(2026-09-27):首页(手机)
   ============================================================================= */
@media (max-width: 767.98px) {
    /* AI 入口卡:粉色渐变描边 → 白卡轻阴影 */
    .home-tutorial-button {
        border: 0 !important;
        border-radius: var(--tz-r-lg) !important;
        background: #fff !important;
        box-shadow: var(--tz-sh-1), 0 6px 20px rgba(var(--th-accent-rgb), .08) !important;
    }

    .home-tutorial-button strong {
        color: var(--th-ink) !important;
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    .home-tutorial-button small {              /* 原 11px 单行省略,窄屏被截成「客服在线人…」;12px 允许折行 */
        overflow: visible !important;
        color: var(--tz-text-3) !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    .hot-title {
        font-size: 24px !important;
        font-weight: 700 !important;
        letter-spacing: .02em;
    }

    /* 热门横滑卡:去掉 item_back.png 异形底 → 白卡;横滑吸附 */
    .featured-carousel .carousel-wrapper {
        gap: 10px !important;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 5px;
    }

    .featured-card {
        width: 30% !important;
        min-width: 112px !important;
        padding: 14px 10px 12px !important;
        border-radius: var(--tz-r-lg) !important;
        background: #fff !important;
        box-shadow: var(--tz-sh-1) !important;
        scroll-snap-align: start;
    }

    .featured-card .featured-logo-img,
    .featured-card .featured-logo {
        width: 52px !important;
        height: 52px !important;
        margin-bottom: 8px !important;
        border-radius: 12px !important;
    }

    .featured-card .featured-title {
        min-height: 0 !important;
        margin-bottom: 4px !important;
        color: var(--th-ink) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    .featured-card .featured-price {
        margin-bottom: 10px !important;
        color: var(--th-price) !important;
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    .featured-card .featured-price .price-unit {
        color: var(--tz-text-3) !important;
        font-size: 12px !important;
        font-weight: 400 !important;
    }

    .featured-card .buy-button {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-width: 76px;
        min-height: 34px;
        padding: 0 16px !important;
        border-radius: var(--tz-r-pill) !important;
        background: var(--th-cta) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    .featured-card .buy-button::after {           /* 视觉 34 高,点击区扩到 44 */
        content: "";
        position: absolute;
        inset: -5px -4px;
    }

    .carousel-dots .dot {
        width: 16px;
        height: 6px;
        border-radius: 3px;
    }

    .carousel-dots .dot.inactive {
        width: 6px;
        height: 6px;
    }

    /* 分类:文字 + 竖线 → 胶囊标签,当前页黑底白字,右侧渐隐提示可横滑 */
    .category-tabs {
        gap: 8px !important;
        margin: 4px 0 6px !important;
        padding: 2px 12px 10px !important;
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
        mask-image: linear-gradient(90deg, #000 88%, transparent);
    }

    .category-tabs .category-tab-separator {
        display: none !important;
    }

    .category-tabs .tab-item {
        display: inline-flex !important;
        align-items: center;
        height: 34px;
        padding: 0 14px !important;
        border: 1px solid var(--tz-line);
        border-radius: var(--tz-r-pill);
        background: #fff !important;
        color: var(--tz-text-2) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }

    .category-tabs .tab-item.active {
        border-color: var(--th-cta); background: var(--th-cta) !important;
        color: #fff !important;
    }

    .category-tabs .tab-item::after {
        display: none !important;
    }

    /* 品类卡:去彩色顶条、描边与月亮图标,字号分层 */
    .aggregate-product-card {
        border: 0 !important;
        border-radius: var(--tz-r-lg) !important;
        box-shadow: var(--tz-sh-1) !important;
    }

    .aggregate-product-card::before {
        display: none !important;
    }

    .aggregate-product-card > a {
        min-height: 0 !important;
        padding: 16px !important;
    }

    .aggregate-card-cover img {
        width: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;
    }

    .aggregate-card-heading strong {
        color: var(--th-ink) !important;
        font-size: 17px !important;
        font-weight: 600 !important;
    }

    .aggregate-card-heading small {
        color: var(--tz-text-3) !important;
        font-size: 12px !important;
    }

    .aggregate-card-summary {
        margin: 10px 0 12px !important;
        color: var(--tz-text-2) !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .aggregate-card-footer {
        padding-top: 12px !important;
        border-top: 1px solid var(--tz-line) !important;
    }

    .aggregate-card-sales {
        color: var(--tz-text-3) !important;
        font-size: 12px !important;
    }

    .aggregate-card-sales i {
        display: none !important;
    }

    .aggregate-card-price {
        font-size: 20px !important;
        font-weight: 700 !important;
    }

    .aggregate-card-price small {
        color: var(--th-price) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    .aggregate-card-price em {
        color: var(--tz-text-3) !important;
        font-size: 12px !important;
    }

    /* 新闻 & 促销:缩略图与封面同为 1.75:1,完整显示,不再裁掉封面上的字 */
    .news-section .section-header h2 i {
        color: var(--th-accent-text) !important;
    }

    .news-section .view-more-link {
        color: var(--tz-text-3) !important;
        font-size: 13px !important;
    }

    .news-card-title,
    .news-card-title a {
        color: var(--th-ink) !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
    }

    .news-card-image-link img {
        width: 112px !important;
        height: 64px !important;
        border-radius: 10px !important;
        background: var(--tz-surface-2) !important;
        object-fit: contain !important;
        aspect-ratio: auto !important;
    }
}

/* =============================================================================
   第 4 批(2026-09-27):订单查询与发货卡、收银台、登录 / 注册弹窗
   ============================================================================= */

/* ── 8. 订单查询结果与发货卡(桌面同样生效):蓝色 → 规范色,复制 = 近黑,复制成功 = 绿 ── */
.search-page .order-header {
    border-bottom: 1px solid var(--tz-line);
    background: #fff !important;
    color: var(--th-ink) !important;
}

.search-page .order-header h3 {
    color: var(--th-ink);
    font-size: 15px;
    font-weight: 600;
}

.item-info .item-content .item-name {
    color: var(--th-ink) !important;
}

.item-info .item-content .item-sku-name {
    color: var(--tz-text-2) !important;
}

.order-pay-type .pay-name,
.order-pay-type pay {
    color: var(--th-ink) !important;
}

.btn-delivery-copy,
.df-copy:not(.df-copy-others),
.delivery-custom-action .btn-treasure-show {
    background: var(--th-cta) !important;
    box-shadow: none !important;
    color: #fff !important;
}

.btn-delivery-copy:hover,
.df-copy:not(.df-copy-others):hover,
.delivery-custom-action .btn-treasure-show:hover {
    background: var(--th-cta-hover) !important;
}

.btn-delivery-copy:disabled {
    background: #c9ccd1 !important;
}

.btn-delivery-copy.is-copied,
.df-copy.is-copied,
.df-copy-mini.is-copied,
.df-copy-others.is-copied {
    border-color: var(--tz-ok) !important;
    background: var(--tz-ok) !important;
    color: #fff !important;
}

.df-row-primary .df-value {
    border-color: var(--tz-line) !important;
    background: var(--tz-surface-2) !important;
}

.df-toggle,
.delivery-manual-content a {
    color: var(--th-accent-text) !important;
}

.df-copy-mini:hover {
    border-color: var(--th-accent) !important;
    color: var(--th-accent-text) !important;
}

.delivery-text:focus {
    border-color: var(--th-tint-line) !important;
    box-shadow: 0 0 0 3px rgba(var(--th-accent-rgb), .12) !important;
}

/* ── 9. 收银台:红色与全站同一个;触屏上 hover 不再像选中;付款按钮去掉彩色对勾图标 ── */
:root .checkout-page {
    --checkout-red: var(--th-accent);
}

:root .checkout-page .btn-pay-now:hover:not(:disabled) {
    border-color: var(--th-btn-hover);
    background: var(--th-btn-hover);
}

:root .checkout-page .btn-pay-now .mcy-icon {
    display: none;
}

@media (hover: none) {
    :root .checkout-page .pay-container .pay-list .pay-item:not(.pay-current):hover {
        border-color: #d7d9de;
        background: #fff;
    }
}

/* ── 10. 登录 / 注册弹窗(桌面同样生效):大块红色标题条 → 白底黑字,保持居中弹窗 ── */
:root .auth-modal .auth-modal-header {
    border-bottom: 1px solid var(--tz-line);
    background: #fff;
    color: var(--th-ink);
}

:root .auth-modal .auth-modal-header .modal-title {
    color: var(--th-ink);
    font-size: 18px;
    font-weight: 600;
}

:root .auth-modal .auth-modal-header .btn-close {
    filter: none;
    opacity: .55;
}

:root .auth-modal .am-submit:hover:not(:disabled) {
    border-color: var(--th-btn-hover);
    background-color: var(--th-btn-hover);
}

@media (max-width: 767.98px) {
    :root .auth-modal .form-control {
        height: 48px;
        border-radius: var(--tz-r-md);
    }

    :root .auth-modal .am-submit {
        height: 48px;
        padding: 0 !important;
        border-radius: var(--tz-r-md);
        font-weight: 600;
    }

    /* 订单查询框:与按钮同高 48、整体 10 圆角 */
    .search-page > .input-group {
        overflow: hidden;
        border-radius: var(--tz-r-md);
        box-shadow: var(--tz-sh-1);
    }

    .search-page .search-order-keyword {
        height: 48px;
        padding: 0 14px !important;
        border: 0 !important;
    }

    .search-page .search-order-btn {
        justify-content: center;
        width: 56px;
        border: 0 !important;
    }
}

/* =============================================================================
   第 5 批(2026-09-28):资讯详情表格、帮助中心 X 标、政策页配色
   ============================================================================= */

/* 帮助中心推特分类:本地 FA 6.2.1 没有 fa-x-twitter,用 X 标 SVG 遮罩(跟随文字颜色),替换旧小鸟 */
.tz-ico-x {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 政策页(Policy.html 独立页头,单独引用本文件):jc.css 的珊瑚红 / 蓝色变量 → 品牌红 */
html:root {
    --jc-accent: var(--th-accent);
    --jc-accent-soft: var(--th-tint);
    --jc-blue: var(--th-accent);
}

/* 资讯详情:文章里的表格带内联 white-space:normal,窄屏把「设备层」「第一步」挤成逐字竖排;
   给单元格最小宽度,整表在自身范围内横滑(表格已是 display:block + overflow-x:auto,不会撑破页面) */
@media (max-width: 767.98px) {
    :root .news-detail-page .news-content th,
    :root .news-detail-page .news-content td {
        min-width: 7.5em;
    }

    :root .news-detail-page .news-content tr > :first-child {
        min-width: 4.5em;
    }
}

/* 首页品牌图标(轮播 / 手机品类卡 / 桌面品类卡)统一加 8% 黑色细描边:
   Google 是白底图标,在白卡片上靠它勾出方块轮廓;深色底图标上看不出来。
   用 outline 而不是画进图里,因为三处圆角不同;outline 跟随 border-radius */
:root .featured-card .featured-logo-img,
:root .aggregate-card-cover img,
:root .ab-card-ico img {
    outline: 1px solid rgba(0, 0, 0, .08);
    outline-offset: -1px;
}

/* 首页(手机)「热门」下的三条保障:原 index.css 给的是 #4b5563 灰字,压在红黑背景图上看不清;
   背景图随屏宽等比缩放,320 宽时这一行已落进渐白区,单改白字也不稳——所以自带深色半透明底条(同搜索框质感),不依赖背景。
   .feature-icon 被别处撑到 40px 高,钉回 16px;底条 34px + 下边距 10px = 原来的 44px,下方轮播卡位置不变。
   窄屏原先「支付安全快捷」「24小时在线服务」折成两行,改为按内容分宽、不折行 */
@media (max-width: 767.98px) {
    :root .features-row {
        gap: 6px !important;
        margin: 0 0 10px !important;
        padding: 5px 10px !important;
        border: 1px solid var(--th-hero-chip-line);
        border-radius: 999px;
        background: var(--th-hero-chip-bg);
        color: var(--th-hero-chip-fg) !important;
        white-space: nowrap;
    }

    :root .features-row .feature-item {
        flex: 1 1 auto !important;
        gap: 4px !important;
    }

    :root .features-row .feature-icon {
        height: 16px !important;
    }

    :root .features-row .feature-icon g > path:first-child {
        fill: var(--th-hero-chip-fg) !important;
    }
}

/* =============================================================================
   商品详情富文本的内联颜色(2026-10-04 换色)
   详情正文在库里,模板生成时把红/近黑写死在 style 属性里(红色提醒框、红色小标题竖条、红/黑两个按钮)。
   不改库:按原样式片段映射到主题变量(var(--th-*),定义在 Common/Theme.html)。以后新写详情别再内联红色。
   ============================================================================= */
:root .introduce-content [style*="border-left:4px solid #e60027" i] { border-left-color: var(--th-accent) !important; }
:root .introduce-content [style*="background:#fff1f0" i] {
    border-top-color: var(--th-warn-line) !important;
    border-right-color: var(--th-warn-line) !important;
    border-bottom-color: var(--th-warn-line) !important;
    border-left-color: var(--th-warn-edge) !important;
    background: var(--th-warn-bg) !important;
}
:root .introduce-content [style*="color:#a8071a" i] { color: var(--th-warn-text) !important; }
:root .introduce-content [style*="color:#e60027" i]:not([style*="background:#e60027" i]) { color: var(--th-accent-text) !important; }
:root .introduce-content [style*="color:#242424" i]:not([style*="background:#242424" i]) { color: var(--th-ink) !important; }
:root .introduce-content a[style*="background:#e60027" i] { background: var(--th-btn) !important; color: var(--th-on-btn) !important; }
:root .introduce-content a[style*="background:#242424" i] { background: var(--th-cta) !important; color: var(--th-on-cta) !important; }

/* =============================================================================
   批次 2026-10-04b 手机端打磨(换色上线后业主验收反馈)
   ① 首页首屏:深色导航 122px + #FFF2EE 暖色横幅渐白(--th-hero 在 Common/Theme.html),热门卡片不骑边线;② 商品卡加描边+两层阴影+右下小箭头,成组件;
   ③ 商品页「最新促销」「相关推荐」拆外层白框;促销缩略图 133×76(封面是 16:9,原来 80×80 cover 把字裁了),手机端不放描述;
   ④ 「相关推荐」卡与促销卡同一制式:图 72、标题→描述→查看商品。
   ============================================================================= */
@media (max-width: 767.98px) {
    /* ① 首页热门卡片落在暖色横幅上,加描边 */
    :root .featured-card { border: 1px solid var(--th-card-line) !important; }

    /* ② 首页商品卡;分类胶囊行左边与卡片对齐(原来多缩进 12px) */
    .aggregate-product-grid { gap: 12px !important; padding: 0 !important; }
    :root .category-tabs { padding-left: 0 !important; }
    :root .aggregate-product-card {
        border: 1px solid var(--th-card-line) !important;
        border-radius: 16px !important;
        box-shadow: 0 1px 2px rgba(16, 17, 20, .03), 0 6px 18px rgba(16, 17, 20, .05) !important;
    }
    :root .aggregate-product-card > a { padding: 16px 16px 14px !important; }
    :root .aggregate-card-footer { padding-top: 12px !important; border-top: 1px solid var(--th-card-divider) !important; }
    :root .aggregate-card-footer::after {
        content: ""; width: 8px; height: 8px; margin-right: 3px; align-self: center;
        border-right: 1.5px solid var(--tz-text-4); border-bottom: 1.5px solid var(--tz-text-4);
        transform: rotate(-45deg);
    }
    :root .aggregate-product-card.is-unavailable .aggregate-card-footer::after { display: none; }

    /* ③ 商品页「最新促销」与「相关推荐」:拆掉外层 .block 白框(框里套框),卡片直接落在页面上 */
    :root .container-item-mobile-narrow .block.promo-section-mobile,
    :root .container-item-mobile-narrow .block.product-recommendation-block {
        background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
    }
    :root .container-item-mobile-narrow .block.promo-section-mobile > .block-content,
    :root .container-item-mobile-narrow .block.product-recommendation-block > .block-content { padding: 0 !important; }
    :root .container-item-mobile-narrow .block.promo-section-mobile > .block-header,
    :root .container-item-mobile-narrow .block.product-recommendation-block > .block-header { padding: 8px 0 10px !important; }
    /* 促销卡:封面 133×76(16:9,整张显示)+ 两行标题 + 查看详情;手机端不放那段必被截断的描述 */
    :root .promo-section-mobile .promo-card-col { padding: 0 !important; margin: 0 0 10px !important; }
    :root .promo-section-mobile .promo-card {
        align-items: center !important; gap: 12px; padding: 12px !important;
        border: 1px solid var(--th-card-line) !important; border-radius: 16px !important;
    }
    :root .promo-section-mobile .promo-image {
        width: 133px !important; height: 76px !important; flex: 0 0 133px !important; margin: 0 !important;
        border-radius: 10px; overflow: hidden; background: var(--tz-surface-2) !important;
    }
    :root .promo-section-mobile .promo-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; }
    :root .promo-section-mobile .promo-card-body { min-width: 0; padding: 0 !important; }
    :root .promo-section-mobile .promo-card-title { margin: 0 0 6px !important; min-height: 0 !important; line-height: 1.4 !important; }
    :root .promo-section-mobile .promo-card-description { display: none !important; }
    :root .promo-section-mobile .promo-card-action { padding-top: 0 !important; font-size: 13px; }

    /* ④ 「相关推荐」卡 */
    :root .recommended-product-card { padding: 0 !important; margin: 0 0 10px !important; }
    :root .product-card-link {
        align-items: flex-start !important; gap: 12px; padding: 12px;
        border: 1px solid var(--th-card-line) !important; border-radius: 16px !important; box-shadow: none !important;
    }
    :root .product-card-img { width: 72px !important; height: 72px !important; flex: 0 0 72px; border-radius: 14px; overflow: hidden; background: var(--tz-surface-2) !important; }
    :root .product-card-img img { border-radius: 0 !important; }
    :root .product-card-info { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
    :root .product-card-title { order: 1; margin: 0 0 4px !important; min-height: 0 !important; line-height: 1.4 !important; }
    :root .product-card-desc { order: 2; margin: 0 0 6px !important; line-height: 1.5 !important; }
    :root .product-card-price { order: 3; margin: 0 !important; }
    :root .product-card-price.is-link::after { content: " \203A"; }
}

/* =============================================================================
   页脚改版(2026-10-10):常规电商页脚
   左栏品牌(logo + 站名 + 一句话 + TG 频道按钮)+ 右侧三组带小标题的链接列 + 底部分割线与版权行。
   桌面四列,手机品牌块在上、三组链接各自两列铺开。颜色全走 --th-footer-*。
   类名 tz-foot-*,与 index.css 旧的 .footer-links 网格互不影响;.app-footer 仍保留给购买栏/安全区的底边距规则。
   ============================================================================= */
.tz-foot {
    margin-top: 40px;
    padding: 48px 0 24px;
    background: var(--th-footer-bg, #101114);
    color: var(--th-footer-fg, #8e939b);
    font-size: 14px;
    line-height: 1.5;
}

.tz-foot-main {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) 1fr 1fr 1.6fr;
    gap: 32px 40px;
    align-items: start;
}

.tz-foot-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--th-footer-fg-hover, #f5f6f7);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

.tz-foot-logo img {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    object-fit: cover;
}

.tz-foot-logo:hover { color: var(--th-footer-fg-hover, #f5f6f7); }

.tz-foot-slogan {
    max-width: 300px;
    margin: 14px 0 18px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--th-footer-fg, #8e939b);
}

.tz-foot-tg {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--th-side-chip-line, rgba(255, 255, 255, .22));
    border-radius: 999px;
    color: var(--th-footer-fg-hover, #f5f6f7);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s, border-color .15s;
}

.tz-foot-tg i { font-size: 16px; color: #2aabee; }

.tz-foot-tg:hover {
    color: var(--th-footer-fg-hover, #f5f6f7);
    border-color: var(--th-footer-fg-hover, #f5f6f7);
    background: var(--th-side-hover, rgba(255, 255, 255, .05));
}

.tz-foot-col { min-width: 0; }

.tz-foot-title {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 36px;
    color: var(--th-footer-fg-hover, #f5f6f7);
}

.tz-foot-col > a,
.tz-foot-shop a {
    display: block;
    margin: 0 0 10px;
    color: var(--th-footer-fg, #8e939b);
    font-size: 14px;
    text-decoration: none;
    transition: color .15s;
}

.tz-foot-col > a:hover,
.tz-foot-shop a:hover { color: var(--th-footer-fg-hover, #f5f6f7); }

.tz-foot-shop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
}

.tz-foot-bottom {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid var(--th-side-line, rgba(255, 255, 255, .06));
}

.tz-foot-copy {
    margin: 0;
    font-size: 12px;
    color: var(--th-footer-fg-2, #6b7078);
}

.tz-foot-copy a {
    margin-left: 12px;
    color: var(--th-footer-fg-2, #6b7078);
    text-decoration: none;
}

.tz-foot-copy a:hover { color: var(--th-footer-fg-hover, #f5f6f7); }

@media (max-width: 991.98px) {
    .tz-foot-main { grid-template-columns: 1fr 1fr 1fr; }

    .tz-foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .tz-foot { margin-top: 24px; padding: 32px 0 20px; }

    .tz-foot-main { grid-template-columns: 1fr; gap: 26px; }

    .tz-foot-brand { padding-bottom: 26px; border-bottom: 1px solid var(--th-side-line, rgba(255, 255, 255, .06)); }

    .tz-foot-slogan { max-width: none; margin: 10px 0 16px; }

    .tz-foot-title { margin-bottom: 4px; line-height: 32px; }

    /* 手机上每组链接两列铺开,行高 36 好点 */
    .tz-foot-col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }

    .tz-foot-col .tz-foot-title { grid-column: 1 / -1; }

    .tz-foot-col > a,
    .tz-foot-shop a { margin: 0; line-height: 36px; }

    .tz-foot-col-shop .tz-foot-shop { grid-column: 1 / -1; column-gap: 16px; }

    .tz-foot-bottom { margin-top: 28px; padding-top: 16px; }

    .tz-foot-copy { line-height: 1.8; }

    .tz-foot-copy a { display: inline-block; margin-left: 0; }
}

/* 页脚版权行右侧的支付方式小图标(2026-10-10,从首页正文挪来):灰度、半透明,只做信任标识不抢眼 */
.tz-foot-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
}

.tz-foot-pay {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--th-footer-fg, #8e939b);
}

.tz-foot-pay-label { color: var(--th-footer-fg-2, #6b7078); }

.tz-foot-pay span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

.tz-foot-pay i { font-size: 16px; }

@media (max-width: 767.98px) {
    .tz-foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }

}