/* ================================================================
   淘客界面专用样式（Vela / 子比主题）
   - 全部基于子比主题 CSS 变量，跟随日夜模式自动切换
   - 主色：var(--theme-color)   文字：var(--main-color)
   - 卡片背景：var(--main-bg-color)   阴影：var(--main-shadow)

   文件结构（v1.3.2 起）：
     [1] 基础样式（栅格 / 卡片 / 侧栏 / 导航 / 搜索页 / 响应式）
     [2] 文件末尾的「v1.3.x 增量优化」块 —— 追加段，同名选择器以 [2] 为准

   历史事故：v1.3.0 曾误把本文件整体覆盖成只有 [2]，导致前台 78 个
   taoke-* 类有 68 个没有样式、排版全乱。修改本文件时只能增量追加，
   禁止整篇重写或用新内容替换掉上面的基础样式。
   注意：CSS 注释内绝对不要出现星号紧邻斜杠的组合，会提前闭合注释。
   ================================================================ */

.taoke-home,
.taoke-hot,
.taoke-detail {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px;
}

.taoke-home__head {
    text-align: center;
    margin: 12px 0 20px;
}
.taoke-home__title {
    font-size: 26px;
    font-weight: 700;
    color: var(--main-color);
    margin: 0 0 6px;
}
.taoke-home__sub {
    font-size: 14px;
    color: var(--main-color);
    opacity: .65;
    margin: 0;
}

/* ---------- 推荐位 / 爆品轮播 ---------- */
.taoke-hero {
    margin-bottom: 20px;
    overflow: hidden;
}
.taoke-hero__track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
}
.taoke-hero__track .taoke-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
}

/* ---------- 筛选栏 ---------- */
.taoke-filter {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--main-bg-color);
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--main-shadow);
    margin-bottom: 18px;
}
.taoke-filter__search {
    margin-bottom: 10px;
}
.taoke-input {
    width: 100%;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--main-shadow);
    border-radius: 21px;
    background: var(--main-bg-color);
    color: var(--main-color);
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
}
.taoke-input:focus {
    border-color: var(--theme-color);
}
.taoke-filter__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.taoke-cat,
.taoke-sort {
    border: 1px solid var(--main-shadow);
    background: var(--main-bg-color);
    color: var(--main-color);
    border-radius: 18px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s;
}
.taoke-cat:hover,
.taoke-sort:hover {
    border-color: var(--theme-color);
    color: var(--theme-color);
}
.taoke-cat.is-active,
.taoke-sort.is-active {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff;
}
.taoke-filter__sort {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- 商品网格 ---------- */
.taoke-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 1199px) {
    .taoke-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
    .taoke-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .taoke-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ---------- 商品卡片 ---------- */
.taoke-card {
    background: var(--main-bg-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px var(--main-shadow);
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s;
}
.taoke-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px var(--main-shadow);
}
.taoke-card__img {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: #f3f4f6;
    overflow: hidden;
}
.taoke-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s;
}
.taoke-card:hover .taoke-card__img img {
    transform: scale(1.05);
}
.taoke-card__shop {
    position: absolute;
    left: 8px;
    top: 8px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}
.taoke-card__body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.taoke-card__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
}
.taoke-coupon {
    background: linear-gradient(135deg, #ff7a18, #ff4747);
    color: #fff;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}
.taoke-coupon--lg {
    font-size: 15px;
    padding: 4px 12px;
}
.taoke-sales {
    color: var(--main-color);
    opacity: .7;
}
.taoke-card__commission {
    color: #ff7a18;
    font-weight: 600;
}
.taoke-card__title {
    font-size: 14px;
    line-height: 1.4;
    color: var(--main-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    min-height: 39px;
}
.taoke-card__title:hover {
    color: var(--theme-color);
}
.taoke-card__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.taoke-price {
    color: var(--theme-color);
    font-weight: 700;
    font-size: 18px;
}
.taoke-price--lg {
    font-size: 26px;
}
.taoke-original {
    color: var(--main-color);
    opacity: .5;
    text-decoration: line-through;
    font-size: 13px;
}
.taoke-card__actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}
.taoke-btn {
    flex: 1;
    text-align: center;
    border-radius: 8px;
    padding: 8px 0;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
    border: 1px solid transparent;
}
.taoke-btn--buy {
    background: var(--theme-color);
    color: #fff;
}
.taoke-btn--buy:hover {
    filter: brightness(1.05);
    color: #fff;
}
.taoke-btn--tpwd {
    background: transparent;
    color: var(--theme-color);
    border: 1px solid var(--theme-color);
}
.taoke-btn--tpwd:hover {
    background: var(--theme-color);
    color: #fff;
}
.taoke-btn--lg {
    flex: 1;
    padding: 12px 0;
    font-size: 15px;
    border-radius: 10px;
}

/* ---------- 加载 / 空状态 ---------- */
.taoke-loading,
.taoke-nomore,
.taoke-empty {
    text-align: center;
    padding: 24px 0;
    color: var(--main-color);
    opacity: .7;
}
.taoke-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--main-shadow);
    border-top-color: var(--theme-color);
    border-radius: 50%;
    animation: taoke-spin .8s linear infinite;
    vertical-align: -3px;
    margin-right: 6px;
}
@keyframes taoke-spin {
    to { transform: rotate(360deg); }
}

/* ---------- 详情页 ---------- */
.taoke-detail__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    background: var(--main-bg-color);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px var(--main-shadow);
}
@media (max-width: 767px) {
    .taoke-detail__main { grid-template-columns: 1fr; }
}
.taoke-gallery__track {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    scroll-snap-type: x mandatory;
}
.taoke-gallery__item {
    flex: 0 0 100%;
    scroll-snap-align: start;
}
.taoke-gallery__item img {
    width: 100%;
    border-radius: 10px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.taoke-detail__title {
    font-size: 22px;
    color: var(--main-color);
    margin: 0 0 14px;
    line-height: 1.4;
}
.taoke-detail__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.taoke-detail__meta {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}
.taoke-detail__meta li {
    font-size: 14px;
    color: var(--main-color);
}
.taoke-detail__meta li span {
    opacity: .6;
    margin-right: 6px;
}
.taoke-detail__coupon {
    background: var(--main-shadow);
    border-radius: 8px;
    padding: 12px;
    font-size: 13px;
    color: var(--main-color);
    margin-bottom: 16px;
}
.taoke-detail__coupon-time {
    opacity: .65;
    margin-top: 4px;
}
.taoke-detail__coupon-stock {
    margin-top: 6px;
    font-size: 12px;
}
.taoke-detail__coupon-stock b {
    color: var(--theme-color);
    font-weight: 700;
}
/* 详情页两栏为 grid 子项，加 min-width:0 防止图片/文本把栅格撑破 */
.taoke-detail__gallery,
.taoke-detail__info { min-width: 0; }
.taoke-detail__actions {
    display: flex;
    gap: 12px;
}
.taoke-detail__desc,
.taoke-detail__related {
    margin-top: 24px;
    background: var(--main-bg-color);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px var(--main-shadow);
}
.taoke-detail__sub {
    font-size: 18px;
    color: var(--main-color);
    margin: 0 0 16px;
    padding-left: 10px;
    border-left: 3px solid var(--theme-color);
}
.taoke-detail__desc-body {
    color: var(--main-color);
    line-height: 1.8;
    font-size: 14px;
}
.taoke-detail__desc-body img {
    max-width: 100%;
    height: auto;
}
.taoke-detail-empty {
    padding: 60px 0;
    text-align: center;
    color: var(--main-color);
    opacity: .7;
}

/* ---------- Toast ---------- */
.taoke-toast {
    position: fixed;
    left: 50%;
    top: 80px;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(0, 0, 0, .82);
    color: #fff;
    padding: 12px 22px;
    border-radius: 24px;
    font-size: 14px;
    z-index: 99999;
    opacity: 0;
    transition: opacity .25s, transform .25s;
    pointer-events: none;
    max-width: 80%;
    text-align: center;
}
.taoke-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- 暗色模式微调（变量已自动适配，这里补充少量固定色） ---------- */
.dark .taoke-card__img { background: #2a2c2e; }
.dark .taoke-input { background: #2a2c2e; }
.dark .taoke-detail__coupon { background: rgba(255, 255, 255, .06); }

/* ================================================================
   v1.1.0 聚合页（淘客商城）
   布局：顶部频道导航 → 三栏（分类 | 推荐位+咚咚抢 | 今日必买）
        → 版块（好货精选/热销榜/包邮/折上折）→ 全部优惠
   所有颜色仍走子比主题变量，日夜模式自动适配
   ================================================================ */

.taoke-portal {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px 32px;
}

/* ---------- 顶部频道导航 ---------- */
.taoke-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 -16px 16px;
    background: var(--main-bg-color);
    box-shadow: 0 2px 10px var(--main-shadow);
    border-bottom: 2px solid var(--theme-color);
}
.taoke-topbar__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.taoke-topbar__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex: 0 0 auto;
}
.taoke-topbar__logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--theme-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}
.taoke-topbar__name {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-color);
    white-space: nowrap;
}
.taoke-topbar__slogan {
    font-size: 12px;
    color: var(--main-color);
    opacity: .55;
    white-space: nowrap;
}
.taoke-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
}
.taoke-nav::-webkit-scrollbar { display: none; }
.taoke-nav__item {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 14px;
    color: var(--main-color);
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s;
}
.taoke-nav__item:hover,
.taoke-nav__item.is-active {
    background: var(--theme-color);
    color: #fff;
}
.taoke-nav__item.is-hot { color: #ff4747; font-weight: 600; }
.taoke-nav__item.is-hot.is-active { color: #fff; }
.taoke-topbar__search {
    display: flex;
    flex: 0 0 260px;
}
.taoke-topbar__search .taoke-input {
    height: 38px;
    border-radius: 19px 0 0 19px;
    border-right: 0;
}
.taoke-search-btn {
    border: 0;
    background: var(--theme-color);
    color: #fff;
    padding: 0 16px;
    border-radius: 0 19px 19px 0;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
}
.taoke-search-btn:hover { filter: brightness(1.06); }

/* ---------- 提示条 ---------- */
.taoke-notice {
    background: rgba(255, 122, 24, .12);
    border: 1px solid rgba(255, 122, 24, .35);
    color: var(--main-color);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.7;
}
.taoke-notice__admin { display: block; opacity: .75; font-size: 12px; }

/* ---------- 三栏主体 ---------- */
.taoke-portal__body {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 260px;
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

/* 左侧分类栏 */
.taoke-side {
    background: var(--main-bg-color);
    border-radius: 12px;
    box-shadow: 0 2px 10px var(--main-shadow);
    overflow: hidden;
    position: sticky;
    top: 74px;
}
.taoke-side__head {
    padding: 12px 14px;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    background: var(--theme-color);
}
.taoke-side__list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    max-height: 520px;
    overflow-y: auto;
}
.taoke-side__item {
    display: block;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--main-color);
    text-decoration: none;
    transition: all .18s;
}
.taoke-side__item:hover,
.taoke-side__item.is-active {
    color: var(--theme-color);
    background: var(--main-shadow);
    padding-left: 18px;
}
.taoke-side__foot {
    border-top: 1px solid var(--main-shadow);
    padding: 10px 14px;
    font-size: 12px;
}
.taoke-side__foot a { color: var(--theme-color); text-decoration: none; }

/* 中间列 */
.taoke-center { min-width: 0; }
.taoke-center .taoke-hero { margin-bottom: 16px; }

/* 右侧今日必买 */
.taoke-today {
    background: var(--main-bg-color);
    border-radius: 12px;
    box-shadow: 0 2px 10px var(--main-shadow);
    padding: 14px;
    position: sticky;
    top: 74px;
}
.taoke-today__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.taoke-today__head h2 {
    font-size: 15px;
    margin: 0;
    color: var(--main-color);
    padding-left: 9px;
    border-left: 3px solid var(--theme-color);
}
.taoke-today__more {
    border: 0;
    background: transparent;
    color: var(--theme-color);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
}
.taoke-mini {
    display: flex;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--main-shadow);
    text-decoration: none;
}
.taoke-mini:last-child { border-bottom: 0; }
.taoke-mini:hover .taoke-mini__title { color: var(--theme-color); }
.taoke-mini__img {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--main-shadow);
}
.taoke-mini__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.taoke-mini__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    flex: 1 1 auto;
}
.taoke-mini__title {
    font-size: 12px;
    line-height: 1.4;
    color: var(--main-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.taoke-mini__price {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.taoke-mini__price em {
    font-style: normal;
    color: var(--theme-color);
    font-weight: 700;
    font-size: 14px;
}
.taoke-mini__price .taoke-coupon { font-size: 10px; padding: 1px 5px; }

/* ---------- 版块（咚咚抢 / 好货精选 / 热销榜 / 包邮 / 折上折） ---------- */
.taoke-rush,
.taoke-rail,
.taoke-all {
    background: var(--main-bg-color);
    border-radius: 12px;
    box-shadow: 0 2px 10px var(--main-shadow);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.taoke-rush__head,
.taoke-rail__head,
.taoke-all__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.taoke-rush__logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff7a18, #ff4747);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.taoke-rush__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--main-color);
}
.taoke-rush__sub,
.taoke-rail__desc {
    font-size: 12px;
    color: var(--main-color);
    opacity: .6;
}
.taoke-rush__clock {
    margin-left: auto;
    font-size: 12px;
    color: var(--main-color);
    display: flex;
    align-items: center;
    gap: 6px;
}
.taoke-rush__session {
    font-style: normal;
    color: #ff4747;
    font-weight: 700;
}
.taoke-rush__clock b {
    background: var(--main-color);
    color: var(--main-bg-color);
    padding: 2px 8px;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}
.taoke-rail__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--main-color);
    margin: 0;
    padding-left: 10px;
    border-left: 3px solid var(--theme-color);
    line-height: 1.2;
}
.taoke-rail__more {
    margin-left: auto;
    border: 1px solid var(--main-shadow);
    background: transparent;
    color: var(--main-color);
    border-radius: 14px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all .2s;
}
.taoke-rail__more:hover {
    color: var(--theme-color);
    border-color: var(--theme-color);
}
.taoke-rail__track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
}
.taoke-rail__track .taoke-card {
    flex: 0 0 176px;
    scroll-snap-align: start;
}
.taoke-rail__track .taoke-card__title { min-height: 36px; font-size: 13px; }
.taoke-rail__track .taoke-price { font-size: 16px; }

/* 版块骨架屏 */
.taoke-skeleton {
    display: block;
    flex: 0 0 176px;
    height: 250px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--main-shadow) 25%, rgba(128, 128, 128, .18) 37%, var(--main-shadow) 63%);
    background-size: 400% 100%;
    animation: taoke-skeleton 1.3s ease infinite;
}
.taoke-skeleton--square { height: 320px; flex: 0 0 100%; }
@keyframes taoke-skeleton {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---------- 全部优惠 ---------- */
.taoke-chips {
    display: none;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 8px;
}
.taoke-sortbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* ---------- 详情页补充 ---------- */
.taoke-crumb {
    font-size: 13px;
    color: var(--main-color);
    opacity: .75;
    margin: 4px 0 14px;
}
.taoke-crumb a { color: var(--theme-color); text-decoration: none; }
.taoke-crumb span { margin: 0 6px; }
.taoke-crumb__cur { opacity: .7; }

/* ---------- 响应式 ---------- */
@media (max-width: 1199px) {
    .taoke-portal__body { grid-template-columns: 170px minmax(0, 1fr); }
    .taoke-today {
        position: static;
        grid-column: 1 / -1;
        display: block;
    }
    .taoke-today__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 16px;
    }
}
@media (max-width: 991px) {
    .taoke-portal__body { grid-template-columns: minmax(0, 1fr); }
    .taoke-side { display: none; }
    .taoke-topbar__slogan { display: none; }
    .taoke-topbar__search { flex: 1 1 auto; }
    .taoke-nav { order: 3; width: 100%; }
    .taoke-topbar__inner { flex-wrap: wrap; }
    .taoke-chips { display: flex; }
    .taoke-today__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .taoke-portal { padding: 0 10px 24px; }
    .taoke-rush, .taoke-rail, .taoke-all, .taoke-today { padding: 12px; border-radius: 10px; }
    .taoke-rail__track .taoke-card { flex: 0 0 150px; }
    .taoke-skeleton { flex: 0 0 150px; height: 220px; }
    .taoke-topbar__name { font-size: 16px; }
    .taoke-rush__clock { width: 100%; margin-left: 0; }
    .taoke-today__list { grid-template-columns: 1fr; }
}

/* ---------- 暗色模式补充 ---------- */
.dark .taoke-topbar { background: var(--main-bg-color); }
.dark .taoke-skeleton {
    background: linear-gradient(90deg, #2a2c2e 25%, #3a3d41 37%, #2a2c2e 63%);
    background-size: 400% 100%;
}
.dark .taoke-rush__clock b { background: #3a3d41; color: #eaeaea; }
.dark .taoke-notice { background: rgba(255, 122, 24, .16); }

/* ================================================================
   v1.2.0 补齐样式
   补齐此前已渲染但未定义样式的类：
   - 卡片折扣标签 / 横向榜单卡片(rail-card) / 无图兜底 / 空状态
   - 搜索页(searchpage) / 分类导航条(subnav) / 加载更多 / 搜索空状态
   ================================================================ */

/* ---------- 卡片：折扣标签（与橙色券标区分，用主题蓝描边） ---------- */
.taoke-card__discount {
    background: rgba(26, 115, 232, .12);
    color: #1a73e8;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}
.dark .taoke-card__discount {
    background: rgba(138, 180, 248, .18);
    color: #8ab4f8;
}

/* ---------- 横向榜单卡片（咚咚抢 / 版块滚动条用，rail-card） ---------- */
.taoke-rail-card {
    flex: 0 0 176px;
    scroll-snap-align: start;
    background: var(--main-bg-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px var(--main-shadow);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform .25s, box-shadow .25s;
}
.taoke-rail-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px var(--main-shadow);
}
.taoke-rail-card__img {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: #f3f4f6;
    overflow: hidden;
}
.taoke-rail-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s;
}
.taoke-rail-card:hover .taoke-rail-card__img img { transform: scale(1.05); }
.taoke-rail-card__img .taoke-coupon {
    position: absolute;
    left: 6px;
    bottom: 6px;
    font-size: 11px;
    padding: 2px 7px;
}
/* 无图兜底 */
.taoke-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--main-color);
    opacity: .5;
    font-size: 12px;
    font-style: normal;
}
.dark .taoke-rail-card__img { background: #2a2c2e; }
.taoke-rail-card__title {
    font-size: 13px;
    line-height: 1.4;
    color: var(--main-color);
    padding: 8px 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}
.taoke-rail-card__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px 0;
}
.taoke-rail-card__price em {
    font-style: normal;
    color: var(--theme-color);
    font-weight: 700;
    font-size: 15px;
}
.taoke-rail-card__price s {
    color: var(--main-color);
    opacity: .5;
    font-size: 12px;
}
.taoke-rail-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px 10px;
    font-size: 11px;
    color: var(--main-color);
}
.taoke-rail-card__shop {
    background: rgba(0, 0, 0, .5);
    color: #fff;
    padding: 1px 7px;
    border-radius: 8px;
}
.taoke-rail-card__meta .taoke-card__commission { font-size: 11px; }

/* ---------- 版块 / 右栏：空状态 ---------- */
.taoke-rail__empty {
    display: block;
    grid-column: 1 / -1;
    padding: 22px 16px;
    text-align: center;
    color: var(--main-color);
    opacity: .6;
    font-size: 13px;
}

/* ---------- 分类导航条（搜索页用，对齐影子淘宝客系统 subnav） ---------- */
.taoke-subnav {
    background: var(--main-bg-color);
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--main-shadow);
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}
.taoke-subnav::-webkit-scrollbar { display: none; }
.taoke-subnav__list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 8px 10px;
}
.taoke-subnav__list li { white-space: nowrap; }
.taoke-subnav__list a {
    display: block;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    color: var(--main-color);
    text-decoration: none;
    transition: all .2s;
}
.taoke-subnav__list a:hover,
.taoke-subnav__list a.is-active {
    background: var(--theme-color);
    color: #fff;
}

/* ---------- 搜索结果页 ---------- */
.taoke-searchpage { padding-top: 4px; }
.taoke-searchpage__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 16px;
}
.taoke-searchpage__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--main-color);
    margin: 0;
}
.taoke-searchpage__kw { color: var(--theme-color); }
.taoke-searchpage__count {
    font-size: 13px;
    color: var(--main-color);
    opacity: .7;
}
.taoke-searchpage__count b { color: var(--theme-color); }
.taoke-searchpage__tip {
    color: #ff7a18;
    font-style: normal;
    font-size: 12px;
    margin-left: 4px;
}

/* 加载更多 */
.taoke-morewrap {
    text-align: center;
    margin: 18px 0 4px;
}
.taoke-btn--more {
    background: var(--main-bg-color);
    color: var(--theme-color) !important;
    -webkit-text-fill-color: var(--theme-color);
    border: 1px solid var(--theme-color);
    border-radius: 24px;
    padding: 10px 36px;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
}
.taoke-btn--more:hover {
    background: var(--theme-color);
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

/* 搜索空状态 */
.taoke-sresult-empty {
    text-align: center;
    padding: 48px 16px;
    background: var(--main-bg-color);
    border-radius: 12px;
    box-shadow: 0 2px 10px var(--main-shadow);
    margin-bottom: 20px;
}
.taoke-sresult-empty__icon { font-size: 44px; margin-bottom: 8px; }
.taoke-sresult-empty__text { font-size: 16px; color: var(--main-color); margin: 0 0 10px; }
.taoke-sresult-empty__text b { color: var(--theme-color); }
.taoke-sresult-empty__tips {
    font-size: 13px;
    color: var(--main-color);
    opacity: .65;
    line-height: 1.9;
    margin: 0 0 18px;
}
.taoke-sresult-empty__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.taoke-sresult-empty__actions .taoke-btn {
    flex: 0 0 auto;
    padding: 10px 22px;
    background: var(--theme-color);
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}
/* 猜你喜欢 / 随便逛逛（基于 .taoke-rail） */
.taoke-sresult-guess { margin-top: 16px; }

/* ---------- 骨架屏尺寸对齐 rail 卡片（176 宽，约 280 高） ---------- */
.taoke-skeleton { flex: 0 0 176px; height: 280px; }

/* ---------- 响应式：搜索页 / 榜单卡片 ---------- */
@media (max-width: 767px) {
    .taoke-rail-card { flex: 0 0 150px; }
    .taoke-skeleton { flex: 0 0 150px; height: 250px; }
    .taoke-searchpage__title { font-size: 18px; }
}


/* ================================================================
   v1.3.x 增量优化（追加在基础样式之后，同名选择器以此为准）
   ================================================================ */

/* ================================================================
   v1.3.0 视觉优化（对标主流导购站）
   目标：卡片信息层级更清晰、价格更抢眼、按钮更有指向性；
   详情页补齐「店铺信息卡」，与对标站的版式对齐。
   全部使用主题 CSS 变量，保持日夜模式一致。
   ================================================================ */

/* ---------- 卡片：整体质感与信息层级 ---------- */
.taoke-card {
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .04);
}
.dark .taoke-card { border-color: rgba(255, 255, 255, .06); }
.taoke-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}
.dark .taoke-card:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }

/* 店铺角标弱化：从纯黑块改为半透明胶囊，减少对图片的干扰 */
.taoke-card__shop {
    background: rgba(0, 0, 0, .45);
    backdrop-filter: saturate(1.2);
    font-size: 10px;
    padding: 2px 7px;
}
/* 券后价更抢眼：加大字号、收紧字距，价格是列表页第一视觉锚点 */
.taoke-price {
    font-size: 19px;
    letter-spacing: -.5px;
}
/* ⚠️ 禁止给 .taoke-price 用伪元素补货币符号：
   PHP 模板（taoke_render_card / detail.php）已在 HTML 中输出字面量「¥」，
   再用 ::before 插入同一个字符会导致价格显示成「¥¥19.90」。
   货币符号统一由 HTML 输出，此处只控制排版。 */
.taoke-card__price .taoke-price { color: #ff3b30; }
.taoke-original { font-size: 12px; }
/* 销量用红色数字，呼应「热卖」语义（引导性更强，对齐对标站做法） */
.taoke-sales { color: #ff6b35; opacity: 1; font-weight: 500; }
.dark .taoke-sales { color: #ff8a5c; }

/* ---------- 卡片按钮：主按钮实心、次按钮轻量描边 ---------- */
.taoke-card__actions { gap: 6px; }
.taoke-btn {
    border-radius: 6px;
    padding: 7px 0;
    font-size: 13px;
    font-weight: 600;
}
.taoke-btn--buy {
    background: linear-gradient(90deg, #ff5a3c, #ff2d55);
    /* ⚠️ 必须显式声明文字色：父主题 .btn 会给 color: var(--main-color)（深色），
       这里只设 background 会变成「红底黑字」，观感上就像主按钮没颜色。 */
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(255, 45, 85, .25);
}
.taoke-btn--buy:hover,
.taoke-btn--buy:focus,
.taoke-btn--buy:active {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}
.taoke-btn--buy i,
.taoke-btn--buy span,
.taoke-btn--buy em { color: inherit; }
.taoke-btn--buy:hover {
    filter: brightness(1.06);
    box-shadow: 0 4px 12px rgba(255, 45, 85, .32);
}
.taoke-btn--tpwd {
    background: transparent;
    /* 同样不能依赖 currentColor：父主题 .btn 的深色 color 会把它带偏 */
    color: var(--theme-color) !important;
    -webkit-text-fill-color: var(--theme-color);
    border: 1px solid var(--theme-color);
    font-weight: 500;
    flex: 0 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    opacity: .9;
}
.taoke-btn--tpwd:hover {
    background: var(--theme-color);
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    opacity: 1;
}

/* ---------- 详情页：店铺信息卡（新增，对齐对标站） ---------- */
.taoke-detail__shopcard {
    margin-top: 24px;
    background: var(--main-bg-color);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px var(--main-shadow);
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.taoke-detail__shopcard-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
}
.taoke-shoplogo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff5a3c, #ff2d55);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.taoke-detail__shopcard-name { display: flex; flex-direction: column; min-width: 0; }
.taoke-detail__shopcard-name b {
    font-size: 15px;
    color: var(--main-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.taoke-detail__shopcard-name span { font-size: 12px; opacity: .6; color: var(--main-color); }
.taoke-detail__shopcard-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    flex: 1;
}
.taoke-detail__shopcard-stats li { display: flex; flex-direction: column; gap: 2px; }
.taoke-detail__shopcard-stats li span { font-size: 12px; opacity: .6; color: var(--main-color); }
.taoke-detail__shopcard-stats li b { font-size: 15px; color: var(--main-color); }

/* ---------- 详情页：价格区层级（券后价最重，原价最轻） ---------- */
.taoke-detail__price { align-items: baseline; gap: 10px; }
.taoke-detail__price .taoke-price--lg { color: #ff3b30; font-size: 30px; }
.taoke-detail__price .taoke-original { font-size: 14px; }
/* 券块：左侧色条强调，减少灰底块的沉闷感 */
.taoke-detail__coupon {
    border-left: 3px solid #ff5a3c;
    background: rgba(255, 90, 60, .07);
}
.dark .taoke-detail__coupon { background: rgba(255, 90, 60, .12); }

/* ---------- 详情页：主 CTA 更大更明确 ---------- */
.taoke-detail__actions { gap: 12px; }
.taoke-detail__actions .taoke-btn--buy {
    flex: 2;
    font-size: 16px;
    font-weight: 700;
    padding: 13px 0;
    border-radius: 8px;
}
.taoke-detail__actions .taoke-btn--tpwd {
    flex: 1;
    font-size: 15px;
    padding: 13px 0;
    border-radius: 8px;
}

/* ---------- 搜索按钮（顶部搜索条）----------
   该按钮带父主题 .btn 类，父主题会给 color: var(--main-color)，
   若只给 background 就会变成「有底色、字没颜色」，必须显式声明文字色。 */
.taoke-search-btn {
    background: var(--theme-color);
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    border-color: transparent;
}
.taoke-search-btn:hover {
    filter: brightness(1.05);
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}
.taoke-search-btn i { color: inherit; }

/* ---------- 统一免疫父主题 Bootstrap .btn 的干扰 ----------
   淘客按钮在 HTML 里带父主题的 .btn 类（class="btn taoke-btn ..."），
   父主题 Bootstrap 里有这条规则：
       .btn { background-image: none }
       .btn.active, .btn:active { background-image: none }
   它会把按钮的渐变底色和实心底色清成透明，结果就是
   「白字 + 透明底」，按钮看起来整个隐形（这是线上"里面没有内容"的真正原因）。
   父主题的 a{color:...} 与 .btn:hover{color:#333} 还会抢走文字色。
   作者级 !important 优先于任何普通作者规则（与选择器特异性无关），
   所以这里统一用 !important 兜底，保证底色和文字色稳定。
   提醒：CSS 注释里不要出现星号紧挨斜杠的组合，会提前闭合注释导致整份样式失效。 */
.taoke-btn--buy,
.taoke-btn--buy:hover,
.taoke-btn--buy:focus,
.taoke-btn--buy:active,
.taoke-btn--buy:visited {
    background-image: linear-gradient(90deg, #ff5a3c, #ff2d55) !important;
    background-color: #ff2d55 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: transparent !important;
}
.taoke-btn--tpwd,
.taoke-btn--tpwd:visited {
    background-image: none !important;
    background-color: transparent !important;
    color: var(--theme-color) !important;
    -webkit-text-fill-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
}
.taoke-btn--tpwd:hover,
.taoke-btn--tpwd:focus,
.taoke-btn--tpwd:active {
    background-image: none !important;
    background-color: var(--theme-color) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.taoke-btn--more,
.taoke-btn--more:visited {
    background-image: none !important;
    background-color: var(--main-bg-color) !important;
    color: var(--theme-color) !important;
    -webkit-text-fill-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
}
.taoke-btn--more:hover,
.taoke-btn--more:focus,
.taoke-btn--more:active {
    background-image: none !important;
    background-color: var(--theme-color) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
.taoke-search-btn,
.taoke-search-btn:hover,
.taoke-search-btn:focus,
.taoke-search-btn:active,
.taoke-search-btn:visited {
    background-image: none !important;
    background-color: var(--theme-color) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: transparent !important;
}
.taoke-sresult-empty__actions .taoke-btn,
.taoke-sresult-empty__actions .taoke-btn:hover,
.taoke-sresult-empty__actions .taoke-btn:focus,
.taoke-sresult-empty__actions .taoke-btn:active,
.taoke-sresult-empty__actions .taoke-btn:visited {
    background-image: none !important;
    background-color: var(--theme-color) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ---------- 后台：点击记录筛选条与标签 ---------- */
.taoke-logfilter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}
.taoke-logfilter select,
.taoke-logfilter input[type=date],
.taoke-logfilter input[type=search] { height: 32px; }
.taoke-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.taoke-tag--g { background: rgba(255, 90, 60, .12); color: #d93025; }
.taoke-tag--r { background: rgba(26, 115, 232, .12); color: #1a73e8; }
.taoke-danger { color: #d63638 !important; border-color: #d63638 !important; }
.taoke-danger:hover { background: #d63638 !important; color: #fff !important; }

@media (max-width: 767px) {
    .taoke-detail__shopcard { gap: 16px; }
    .taoke-detail__shopcard-stats { gap: 20px; }
    .taoke-detail__actions .taoke-btn--buy,
    .taoke-detail__actions .taoke-btn--tpwd { flex: 1; }
}