@font-face {
    font-family: 'LogoFont';
    src: url('../fonts/logo-font.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    background: #f4f6f9;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
}
html { scroll-behavior: smooth; overflow-x: hidden; }
@supports (overflow: clip) {
    html { overflow-x: clip; }
}
a { color: inherit; text-decoration: none; transition: color 0.2s; }
ul, ol { list-style: none; }
img, video { max-width: 100%; height: auto; }
button, input, textarea, select {
    min-width: 0;
    max-width: 100%;
    font-family: inherit;
    font-size: inherit;
    -webkit-tap-highlight-color: transparent;
}
textarea { resize: vertical; }

/* --- Layout --- */
.wrapper { max-width: 1320px; margin: 0 auto; padding: 0 12px; }
#main { max-width: 1320px; width: 100%; margin: 0 auto; padding: 0 12px; }
.page-body { padding-top: 24px; }

.stock-empty-box{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}
.stock-empty-box:hover {
    box-shadow: none;
    transform: none;
}
/* 开启「售罄禁止访问」时禁用点击 */
.stock-empty-box.is-blocked,
.goods-card[aria-disabled="true"],
.sidebar-goods-item[aria-disabled="true"] {
    cursor: not-allowed;
    pointer-events: none;
}

/* 商品列表 · 已售罄水印 */
.goods-soldout-stamp {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.28);
    pointer-events: none;
}
.goods-soldout-stamp__text {
    display: inline-block;
    padding: 7px 16px;
    border: 2px solid rgba(148, 163, 184, 0.9);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.78);
    color: rgba(100, 116, 139, 0.96);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.18em;
    transform: rotate(-18deg);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

/* --- 店铺公告（首页 / 商品列表页通用）· 桌面端完整卡片 --- */
.site-announcement {
    margin: 18px -12px;
    background: #fff;
    border: 1px solid #e8ecf7;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.site-announcement__head {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px;
    background: #f0f3ff;
    border-bottom: 1px solid #e8ecf7;
}
.site-announcement__head .site-announcement__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 6px;
    background: linear-gradient(135deg, #4e6ef2 0%, #7c93f8 100%);
    color: #fff; font-size: 12px;
    box-shadow: 0 2px 6px rgba(78, 110, 242, 0.25);
    flex-shrink: 0;
}
.site-announcement__title {
    font-size: 14px; font-weight: 600; color: #1f2937;
    letter-spacing: 0.3px;
}
.site-announcement__body {
    padding: 14px 18px;
    background: #fff;
    word-break: break-word;
    line-height: 200%;
}
.site-announcement__track > *:first-child { margin-top: 0; }
.site-announcement__track > *:last-child { margin-bottom: 0; }
.site-announcement__body img { max-width: 100%; height: auto; }

/* 窄屏改为单行横幅：每行一个条目，向上轮播。 */
@media (max-width: 768px) {
    .site-announcement { margin: 10px -12px 14px; border-radius: 0; border-right: 0; border-left: 0; }
    .site-announcement {
        display: flex;
        align-items: stretch;
        width: auto;
        min-width: 0;
        max-width: calc(100% + 24px);
        height: 34px;
    }
    .site-announcement__head {
        flex: 0 0 auto;
        gap: 5px;
        padding: 0 8px;
        border-right: 1px solid #e4e9f5;
        border-bottom: 0;
    }
    .site-announcement__head .site-announcement__icon { width: 18px; height: 18px; font-size: 9px; }
    .site-announcement__title { font-size: 12px; white-space: nowrap; }
    .site-announcement__body {
        position: relative;
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        max-width: 100%;
        height: 32px;
        padding: 0 10px;
        overflow: hidden;
        line-height: normal;
    }
    .site-announcement__track {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        color: #5f6878;
        font-size: 13px;
        line-height: 32px;
        transform: translate3d(0, 0, 0);
        transition: transform .45s cubic-bezier(.22, 1, .36, 1);
        will-change: transform;
    }
    /* JS 初始化前就呈现最终轮播的第一行尺寸，避免刷新时原始富文本先闪现。 */
    .site-announcement__track:not(.is-ready) > * {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: 32px;
        margin: 0 !important;
        overflow: hidden;
        line-height: 32px !important;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .site-announcement__track:not(.is-ready) > *:not(:first-child) { display: none; }
    .site-announcement__track.is-jumping { transition: none; }
    .site-announcement__item {
        display: flex;
        align-items: center;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: 32px;
        overflow: hidden;
        color: #5f6878;
        font-size: 13px;
        line-height: 32px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .site-announcement__item > * {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0 !important;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .site-announcement__item a { color: #4e6ef2; }
    .site-announcement__item img { width: auto; max-width: 22px; height: 22px; object-fit: cover; }
}

/* --- Header --- */
.site-header {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky; top: 0; z-index: 100;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.site-header.scrolled {
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    border-bottom-color: transparent;
}
/* 手机与平板在 body 锁滚动时会让 sticky 页头离开可视区；抽屉打开期间固定显示不透明页头。 */
@media (max-width: 1199px) {
    body.mobile-nav-drawer-open .site-header {
        position: fixed;
        z-index: 10060;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.site-header .wrapper { display: flex; align-items: center; height: 64px; }

/* Logo */
.site-logo {
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0; text-decoration: none;
}
.site-logo-text {
    font-family: 'LogoFont', 'Orbitron', sans-serif;
    font-size: 21px; font-weight: 500; text-transform: uppercase;
    background: linear-gradient(135deg, #4e6ef2 0%, #2b7de9 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px; transition: opacity 0.25s;
}
.site-logo:hover .site-logo-text { opacity: 0.75; }

/* Logo 图片模式 */
.site-logo-img {
    height: 36px; width: auto; max-width: 160px;
    object-fit: contain; display: block;
    transition: opacity 0.25s;
}
.site-logo:hover .site-logo-img { opacity: 0.8; }

/* 左上 Logo 斜向扫光：文字与图片 Logo 共用，不影响链接点击。 */
.site-logo { position: relative; overflow: hidden; isolation: isolate; border-radius: 5px; }
.site-logo::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: -40%;
    left: -55%;
    width: 28%;
    height: 180%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, .08) 38%, rgba(255, 255, 255, .88) 50%, rgba(255, 255, 255, .08) 62%, transparent 85%);
    transform: translate3d(-180%, 0, 0) skewX(-20deg);
    animation: mogaiwuyou-logo-shine 3.8s ease-in-out infinite;
}
@keyframes mogaiwuyou-logo-shine {
    0%, 57% { transform: translate3d(-180%, 0, 0) skewX(-20deg); }
    78%, 100% { transform: translate3d(680%, 0, 0) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
    .site-logo::after { animation: none; opacity: 0; }
}

/* Navigation */
.main-nav { display: flex; gap: 4px; margin-left: 22px; flex: 1; height: 100%; }
.main-nav a {
    font-size: 15px; color: #5a5a6e; padding: 0 18px;
    display: flex; align-items: center; height: 100%;
    position: relative; transition: color 0.25s; font-weight: 500;
}
.main-nav a::after {
    content: ''; position: absolute; bottom: 0; left: 50%; width: 0;
    height: 2.5px; background: linear-gradient(90deg, #4e6ef2, #7c93f8);
    border-radius: 2px; transition: width 0.3s ease, left 0.3s ease;
}
.main-nav a:hover { color: #4e6ef2; }
.main-nav a:hover::after { width: 20px; left: calc(50% - 10px); }
.main-nav a.active { color: #4e6ef2; font-weight: 600; }
.main-nav a.active::after { width: calc(100% - 36px); left: 18px; }

/* Desktop dropdown */
.nav-dropdown {
    position: relative; height: 100%;
}
.nav-dropdown > a {
    gap: 4px;
}
.nav-arrow {
    flex-shrink: 0; opacity: 0.5;
    transition: transform 0.25s, opacity 0.25s;
}
.nav-dropdown:hover .nav-arrow { transform: rotate(180deg); opacity: 1; }
.nav-dropdown-menu {
    position: absolute; top: calc(100% - 10px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 150px; padding: 8px 0;
    background: #fff; border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.05);
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu::before {
    content: ''; position: absolute; top: -6px; left: 50%;
    width: 12px; height: 12px;
    background: #fff; border-radius: 2px;
    border-top: 1px solid rgba(0,0,0,0.05);
    border-left: 1px solid rgba(0,0,0,0.05);
    transform: translateX(-50%) rotate(45deg);
}
.nav-dropdown-menu a {
    display: block; padding: 9px 20px;
    font-size: 14px; color: #555; white-space: nowrap;
    position: relative;
    transition: background 0.2s, color 0.2s, padding-left 0.2s;
}
.nav-dropdown-menu a::before {
    content: ''; position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px; height: 16px; border-radius: 2px;
    background: #4e6ef2;
    transition: transform 0.2s ease;
}
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a:hover {
    background: #f0f4ff; color: #4e6ef2;
    padding-left: 26px;
}
.nav-dropdown-menu a:hover::before {
    transform: translateY(-50%) scaleY(1);
}

/* Header Actions */
.header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.header-actions > .header-action-btn,
.header-actions > .header-service-dropdown,
.site-header .wrapper > .header-menu-btn { align-self: center; }
.header-action-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; border: none; background: transparent;
    color: #6b7280; cursor: pointer; transition: all 0.25s;
    text-decoration: none;
}
.header-action-btn:hover { background: #f0f3ff; color: #4e6ef2; }
.header-action-btn svg { width: 20px; height: 20px; }
.header-action-btn--text {
    width: auto; padding: 0 12px; gap: 5px; font-size: 13px; font-weight: 500;
    background: #f0f3ff; color: #4e6ef2;
}

/* User avatar & dropdown */
.header-user-dropdown { position: relative; margin-left: 4px; }
.header-user {
    display: flex; align-items: center;
    text-decoration: none; border: none; background: transparent; cursor: pointer;
    padding: 4px 8px; border-radius: 10px;
    transition: background 0.2s;
}
.header-user:hover,
.header-user-dropdown:hover .header-user { background: #f0f3ff; }
.header-user-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; border: 2px solid #ebeef5;
    flex-shrink: 0;
}
.header-user-avatar--default {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #e8ecf4, #d5dbe8);
    color: #a0aec0; font-size: 15px;
}
.header-user-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: #fff; border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    min-width: 160px; padding: 6px 0;
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 200;
}
.header-user-dropdown:hover .header-user-menu,
.header-user-dropdown.open .header-user-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.header-user-menu-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 18px; font-size: 13px; color: #555;
    text-decoration: none; transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.header-user-menu-item:hover { background: #f5f7fb; color: #333; }
.header-user-menu-item i.fa { width: 16px; text-align: center; color: #999; font-size: 14px; }
.header-user-menu-item:hover i.fa { color: #4e6ef2; }
.header-user-menu-divider { height: 1px; background: #f0f0f0; margin: 4px 0; }
.header-user-menu-item--danger { color: #cf1322; }
.header-user-menu-item--danger:hover { background: #fff2f0; color: #cf1322; }
.header-user-menu-item--danger i.fa { color: #cf1322; }
.header-user-menu-item--danger:hover i.fa { color: #cf1322; }

/* 已登录：账号 + 余额 */
.header-user-info {
    display: flex; flex-direction: column; align-items: flex-start;
    margin-left: 8px; line-height: 1.3;
}
.header-user-name {
    font-size: 13px; font-weight: 600; color: #333;
    max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.header-user-money { font-size: 13px; color: #f5222d; font-weight: 500; }

/* Hamburger menu button (mobile) */
.header-menu-btn {
    display: none; width: 40px; height: 40px;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; border: none; background: transparent;
    cursor: pointer; border-radius: 10px; padding: 10px;
    transition: background 0.25s;
}
.header-menu-btn:hover { background: #f0f3ff; }
.hamburger-line {
    display: block; width: 18px; height: 2px;
    background: #6b7280; border-radius: 1px;
    transition: all 0.3s ease;
}
.header-menu-btn.active .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header-menu-btn.active .hamburger-line:nth-child(2) { opacity: 0; }
.header-menu-btn.active .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 顶部客服入口：只有已配置联系方式时 header.php 才输出此组件。 */
.header-service-dropdown { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; }
.header-service-toggle {
    display: inline-flex;
    width: auto;
    min-width: 40px;
    height: 40px;
    align-self: center;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background .25s, color .25s;
    -webkit-tap-highlight-color: transparent;
}
.header-service-toggle__icon {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: 40px;
    vertical-align: middle;
}
.header-service-toggle:hover,
.header-service-dropdown.is-open .header-service-toggle { background: #f0f3ff; color: #4e6ef2; }
.header-service-toggle:focus-visible { outline: 2px solid var(--mogaiwuyou-theme-accent, #ff5a1f); outline-offset: 2px; }
.header-service-menu {
    position: absolute;
    z-index: 10080;
    line-height: 1.4;
    top: calc(100% + 8px);
    right: -2px;
    display: grid;
    width: 184px;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 7px;
    border: 1px solid #e4eaf2;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
}
.header-service-menu[hidden] { display: none; }
.header-service-menu a {
    display: flex;
    min-width: 0;
    min-height: 38px;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border-radius: 8px;
    color: #46566f;
    font-size: 12px;
    text-decoration: none;
}
.header-service-menu a:hover,
.header-service-menu a:focus-visible { background: var(--mogaiwuyou-theme-accent-soft, rgba(255, 90, 31, .1)); color: var(--mogaiwuyou-theme-accent, #ff5a1f); outline: none; }
.header-service-menu a .fa { width: 15px; flex: 0 0 15px; color: var(--mogaiwuyou-theme-accent, #ff5a1f); font-size: 15px; text-align: center; }
.header-service-menu a span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-service-menu__text {
    display: flex;
    min-width: 0;
    min-height: 38px;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border-radius: 8px;
    background: #f8fafc;
    color: #46566f;
    font-size: 12px;
}
.header-service-menu__text .fa { width: 15px; flex: 0 0 15px; color: var(--mogaiwuyou-theme-accent, #ff5a1f); font-size: 15px; text-align: center; }
.header-service-menu__text span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 移动端侧滑菜单遮罩（桌面不展示） */
.mobile-nav-backdrop { display: none; }

/* 移动端导航：桌面隐藏；≤768px 由下方媒体查询改为右侧抽屉 */
.mobile-nav { display: none; }
.mobile-nav-inner { padding: 8px 20px 16px; }
.mobile-nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; font-size: 15px; color: #5a5a6e;
    border-radius: 10px; transition: all 0.2s; text-decoration: none;
}
.mobile-nav-item:hover,
.mobile-nav-item.active { background: #f0f3ff; color: #4e6ef2; }
.mobile-nav-item .fa { width: 20px; text-align: center; font-size: 16px; }
.mobile-nav-logout { color: #cf1322; }
.mobile-nav-logout:hover { background: #fff2f0; color: #cf1322; }
.mobile-nav-toggle { cursor: pointer; }
.mobile-nav-toggle .mobile-nav-arrow {
    margin-left: auto; font-size: 12px; width: auto;
    transition: transform 0.25s; color: #adb5bd;
}
.mobile-nav-toggle.open .mobile-nav-arrow { transform: rotate(180deg); }
.mobile-nav-sub {
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease;
}
.mobile-nav-sub.open { max-height: 300px; }
.mobile-nav-sub-item {
    display: block; padding: 10px 16px 10px 52px;
    font-size: 14px; color: #666; text-decoration: none;
    border-radius: 8px; transition: background 0.15s, color 0.15s;
}
.mobile-nav-sub-item:hover { background: #f0f4ff; color: #4e6ef2; }
.mobile-nav-divider { height: 1px; background: #f0f0f0; margin: 8px 16px; }

/* --- Footer：服务保障 + 链接分组 + 备案信息（PC 端；手机端整块隐藏） --- */
.site-footer {
    background: #1e2a3a;
    color: rgba(255,255,255,0.55);
    margin-top: 48px;
    font-size: 13px;
}
.site-footer a { text-decoration: none; }

/* 顶部服务保障：4 等分，图标方框 + 右侧标题/说明 */
.site-footer__services {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 26px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-footer__service { display: flex; align-items: center; gap: 12px; min-width: 0; }
.site-footer__service-icon {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 42px; width: 42px; height: 42px;
    border: 1px solid rgba(255,255,255,0.22); border-radius: 10px;
    color: rgba(255,255,255,0.85);
}
.site-footer__service-icon svg { display: block; width: 22px; height: 22px; }
/* 图标也允许填 fa 类名（<i class="fa fa-xxx">），尺寸与 SVG 图标对齐 */
.site-footer__service-icon i { font-size: 20px; line-height: 1; }
.site-footer__service-text { min-width: 0; }
.site-footer__service-title { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.site-footer__service-desc { display: block; margin-top: 3px; font-size: 12px; color: rgba(255,255,255,0.5); }

/* 中部：3 组文字链接 + 1 组二维码 */
.site-footer__main {
    display: grid;
    /* 第 1、2 列等宽，第 3 列（新手帮助那种长句）给多一点，末列固定放二维码 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) 250px;
    gap: 24px;
    padding: 30px 0 34px;
}
.site-footer__col { min-width: 0; }
.site-footer__main.site-footer__main--without-qr {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.site-footer__col-title { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: #fff; }
.site-footer__links { margin: 0; padding: 0; list-style: none; }
.site-footer__links li { margin-bottom: 10px; }
.site-footer__links a {
    display: block; font-size: 12.5px; line-height: 1.6;
    color: rgba(255,255,255,0.55);
    transition: color 0.2s;
}
.site-footer__links a:hover { color: #fff; }
/* 后台没填地址的条目：展示但不可点 */
.site-footer__links a.is-plain { cursor: default; }
.site-footer__links a.is-plain:hover { color: rgba(255,255,255,0.55); }

/* 关注我们：二维码方块 + 下方说明 */
.site-footer__qrs { display: flex; flex-wrap: wrap; gap: 16px; }
.site-footer__qr { text-align: center; }
.site-footer__qr-img {
    width: 84px; height: 84px; box-sizing: border-box;
    padding: 4px; border-radius: 8px; background: #fff;
    object-fit: contain;
}
.site-footer__qr-img--empty {
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.32); font-size: 26px;
}
.site-footer__qr-label { display: block; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,0.5); }

/* 底部文字链接一行（相邻之间画一条竖线） */
.site-footer__bar { border-top: 1px solid rgba(255,255,255,0.08); }
.site-footer__bar-inner {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0 14px; padding: 14px 12px;
}
.site-footer__bar-inner a {
    position: relative; font-size: 12.5px;
    color: rgba(255,255,255,0.5);
    transition: color 0.2s;
}
.site-footer__bar-inner a:hover { color: #fff; }
.site-footer__bar-inner a + a::before {
    content: ''; position: absolute; left: -8px; top: 50%;
    width: 1px; height: 11px; margin-top: -5.5px;
    background: rgba(255,255,255,0.18);
}

/* 版权 / 备案 / 运营者：备案行在上，版权行在下，版权下方留白避免贴边 */
.site-footer__bottom {
    padding: 16px 12px 22px;
    border-top: 1px solid rgba(255,255,255,0.08);
    text-align: center;
}
.site-footer__legal {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 4px 16px; margin: 0 0 10px;
    font-size: 12.5px; color: rgba(255,255,255,0.42);
}
.site-footer__copy {
    display: inline-flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,0.7);
    flex-wrap: wrap; justify-content: center;
}
.site-footer__legal a { color: rgba(255,255,255,0.45); letter-spacing: 0.3px; transition: color 0.2s; }
.site-footer__legal a:hover { color: rgba(255,255,255,0.85); }
.site-footer__police i { margin-right: 3px; }

/* 平板 / 小笔记本（769–1199px）：页脚两组都保持「一行」布局，不折成两列；
   空间靠收紧间距 + 字号随视口微缩（clamp）腾出来，只有文字真的挤不下时才在各自格子内折行。 */
@media (min-width: 769px) and (max-width: 1199px) {
    /* 顶部服务保障：仍是一行 4 格 */
    .site-footer__services { gap: 12px; padding: 20px 0; }
    .site-footer__service { gap: 9px; }
    .site-footer__service-icon {
        flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px;
    }
    .site-footer__service-icon svg { width: 18px; height: 18px; }
    .site-footer__service-icon i { font-size: 17px; }
    .site-footer__service-title { font-size: clamp(12px, 1.25vw, 15px); }
    .site-footer__service-desc { font-size: clamp(10.5px, 1vw, 12px); margin-top: 2px; }

    /* 中部：4 列一行，二维码列不再吃固定 250px，长句栏仍拿更大份额 */
    .site-footer__main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(180px, 0.9fr);
        gap: 16px;
        padding: 26px 0 30px;
    }
    .site-footer__col-title { font-size: clamp(12px, 1.15vw, 14px); margin-bottom: 12px; }
    .site-footer__links li { margin-bottom: 8px; }
    .site-footer__links a { font-size: clamp(11px, 1.05vw, 12.5px); }
    .site-footer__qrs { gap: 14px; justify-content: center; }
    .site-footer__qr-img { width: 76px; height: 76px; }
    .site-footer__qr-label { font-size: clamp(11px, 1vw, 12px); margin-top: 6px; }
}

/* --- 移动端商城 App 底部导航（桌面端不显示） --- */
.mobile-app-nav,
.mobile-store-search { display: none; }

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 20px; border-radius: 6px; font-size: 14px;
    cursor: pointer; transition: all 0.2s; border: none;
    line-height: 1.5; gap: 6px;
}
.btn-primary { background-color: var(--mogaiwuyou-theme-accent, #ff5a1f); color: #fff; box-shadow: 0 2px 8px var(--mogaiwuyou-theme-accent-shadow, rgba(255, 90, 31, 0.25)); }
.btn-primary:hover { background-color: var(--mogaiwuyou-theme-accent, #ff5a1f); background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)); color: #fff; box-shadow: 0 4px 12px var(--mogaiwuyou-theme-accent-shadow, rgba(255, 90, 31, 0.35)); transform: translateY(-1px); }
.btn-outline { background: #fff; border: 1px solid #dcdfe6; color: #606266; }
.btn-outline:hover { border-color: #4e6ef2; color: #4e6ef2; background: #f0f3ff; }
.btn-lg { padding: 12px 32px; font-size: 15px; border-radius: 8px; }
.btn-sm { padding: 5px 14px; font-size: 12px; }
.btn-block { display: flex; width: 100%; }

/* --- Card Base --- */
.card {
    background: #fff; border-radius: 10px; border: 1px solid #ebeef5;
    transition: box-shadow 0.3s, transform 0.3s;
}
.card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }

/* --- Goods Card --- */
.goods-card {
    display: block; width: 100%;
    overflow: hidden; border-radius: 10px;
}
.goods-card .card-img {
    aspect-ratio: 8 / 5; background: #f8f9fa;
    border-bottom: 1px solid #ebeef5;
    overflow: hidden;
    position: relative;
}
.goods-card .card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}
.goods-card:hover .card-img img { transform: scale(1.06); }
img.is-image-fallback {
    object-fit: contain !important;
    padding: 14% !important;
    box-sizing: border-box;
    background: #f8f9fa;
}
.goods-card:hover .card-img img.is-image-fallback { transform: none; }
.goods-no-image {
    display: block;
    width: 100%;
    height: 100%;
    background: #F8F9FA;
    box-sizing: border-box;
}
.goods-card .card-img .goods-no-image {
    position: absolute;
    left: 0;
    top: 0;
}
.goods-card .card-body {
    display: flex; flex-direction: column;
    padding: 10px 11px 12px;
}
/* 商品标题两行截断：超出两行打省略号（完整名称走卡片的 title 属性悬停查看）。
   两行 + min-height 保证名字长短不一时卡片仍然等高。
   ⚠️ 曾短暂改成全站单行（nowrap + ellipsis），用户明确要求回退，别再改回单行。 */
.goods-card .card-title {
    font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px;
    min-height: 37px; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; line-height: 1.42;
    overflow-wrap: anywhere;
    word-break: break-all;
}
.goods-card:hover .card-title { color: #4e6ef2; }
.goods-card .card-bottom {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 5px;
    margin-top: 9px; padding-top: 8px; border-top: 1px solid #f1f3f7;
}
.goods-card .price { font-size: 17px; font-weight: 700; color: #f05252; letter-spacing: -0.4px; line-height: 1.1; }
.goods-card .price-original { font-size: 11px; color: #aab3c2; text-decoration: line-through; margin-left: 0; font-weight: normal; }

.goods-badge {
    position: absolute; top: 8px; right: 8px;
    color: #fff; font-size: 11px; line-height: 1;
    padding: 5px 10px; border-radius: 4px; white-space: nowrap;
}
.goods-badge--auto {
    background: linear-gradient(135deg, #34c759, #2aa845);
    box-shadow: 0 2px 6px rgba(52, 199, 89, 0.3);
}
.goods-badge--manual {
    background: linear-gradient(135deg, #f5222d, #cf1322);
    box-shadow: 0 2px 6px rgba(245, 34, 45, 0.3);
}
.card-stats {
    display: flex; justify-content: space-between; gap: 6px;
    font-size: 11px; color: #94a3b8; line-height: 1.35;
}

/* --- Goods Grid --- */
.goods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.goods-subcategory-heading {
    display: flex;
    min-width: 0;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 2px 4px;
    background: transparent;
    color: #2c3e50;
    font-size: 15px;
    font-weight: 600;
}
.goods-subcategory-heading a,
.goods-subcategory-heading > span { min-width: 0; color: inherit; }
.goods-subcategory-toggle {
    display: inline-flex; flex: 0 0 auto;
    align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    margin-left: auto;
    border: 0; background: transparent;
    color: #9aa3b2;
    cursor: pointer; -webkit-appearance: none; appearance: none;
    transition: color 0.2s;
}
.goods-subcategory-toggle:hover { color: #64748b; }
.goods-subcategory-toggle:focus { outline: none; }
.goods-subcategory-toggle:focus-visible {
    outline: 2px solid #64748b;
    outline-offset: 1px;
    border-radius: 4px;
}
.goods-subcategory-caret { width: 14px; height: 14px; display: block; transition: transform 0.2s; }
.goods-subcategory-heading.is-collapsed .goods-subcategory-caret { transform: rotate(-90deg); }
.goods-grid .goods-card.goods-card--group-collapsed { display: none; }
.goods-infinite {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; margin-top: 20px; padding: 8px 0;
    color: #999; font-size: 13px;
}
.goods-infinite__spinner {
    display: none; flex: 0 0 auto;
    width: 16px; height: 16px;
    border: 2px solid #e5e7eb; border-top-color: #4e6ef2; border-radius: 50%;
    animation: goods-infinite-spin .7s linear infinite;
}
@keyframes goods-infinite-spin { to { transform: rotate(360deg); } }
.goods-infinite__end { display: none; letter-spacing: 1px; }
.goods-infinite.is-loading .goods-infinite__spinner { display: block; }
.goods-infinite.is-finished .goods-infinite__text { display: none; }
.goods-infinite.is-finished .goods-infinite__end { display: inline; }
.goods-infinite.is-finished { min-height: 40px; margin-top: 8px; }
.goods-infinite.is-error { color: #d9534f; cursor: pointer; }
/* PC 端：底部「加载更多」按钮（手机端无 .goods-infinite--button，仍是滚动到底自动加载）
   字号 / 颜色 / 行高与滚动加载那版文字保持完全一致（13px / #999），只把可见文字包进胶囊里做点击区 */
.goods-infinite.goods-infinite--button {
    width: max-content; min-height: 0; margin: 20px auto 0; padding: 0;
    border: 0; background: none; color: #999;
    font-family: inherit; font-size: 13px; font-weight: normal; line-height: 1;
    -webkit-appearance: none; appearance: none;
}
.goods-infinite.goods-infinite--button .goods-infinite__text {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 148px; height: 34px; padding: 0 22px; box-sizing: border-box;
    border: 1px solid #e3e6eb; border-radius: 999px; background: #fff;
    color: #999; font-size: 13px; font-weight: normal; line-height: 1; letter-spacing: normal;
    cursor: pointer; transition: border-color .2s, color .2s, box-shadow .2s;
}
/* 到底文案：还原成与滚动加载版一致的 13px / #999 / 字间距 1px */
.goods-infinite.goods-infinite--button .goods-infinite__end {
    font-size: 13px; color: #999; letter-spacing: 1px;
}
.goods-infinite.goods-infinite--button:hover .goods-infinite__text {
    border-color: var(--mogaiwuyou-theme-accent, #ff5a1f);
    color: var(--mogaiwuyou-theme-accent, #ff5a1f);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}
.goods-infinite.goods-infinite--button:focus-visible .goods-infinite__text {
    border-color: var(--mogaiwuyou-theme-accent, #ff5a1f);
    box-shadow: 0 0 0 3px rgba(255, 90, 31, .16);
}
.goods-infinite.goods-infinite--button.is-loading .goods-infinite__text {
    border-color: #eceff3; color: #999; cursor: default; box-shadow: none;
}
/* 按钮模式不用转圈图标，靠文案变化表达进度 */
.goods-infinite.goods-infinite--button.is-loading .goods-infinite__spinner { display: none; }
.goods-infinite.goods-infinite--button.is-error .goods-infinite__text {
    border-color: #f2c9c7; color: #d9534f;
}
/* 到底后收起按钮本体，只留「— 已经到底了 —」，留白与滚动加载版一致 */
.goods-infinite.goods-infinite--button.is-finished {
    margin-top: 8px; min-height: 40px;
}
.goods-infinite.goods-infinite--button.is-finished .goods-infinite__text { display: none; }
@media (min-width: 769px) {
    .goods-subcategory-heading { display: none; }
}

/* --- Article Card (horizontal list style) --- */
.article-card { display: flex; gap: 20px; padding: 20px; align-items: flex-start; }
.article-card .card-content { flex: 1; min-width: 0; }
.article-card .card-title {
    font-size: 16px; font-weight: 600; color: #333;
    margin-bottom: 8px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.article-card:hover .card-title { color: #4e6ef2; }
.article-card .card-excerpt {
    font-size: 13px; color: #888; line-height: 1.7; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.article-card .card-meta { font-size: 12px; color: #adb5bd; display: flex; gap: 16px; flex-wrap: wrap; }

/* --- Article Grid (for index pages, card style) --- */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.article-grid .card { display: block; padding: 20px; border-radius: 10px; }
.article-grid-card { display: flex !important; gap: 14px; align-items: stretch; overflow: hidden; }
.article-grid-img {
    width: 90px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: #f8f9fa;
}
.article-grid-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.article-grid-card:hover .article-grid-img img { transform: scale(1.06); }
.article-grid-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.article-grid .card-title {
    font-size: 15px; font-weight: 600; color: #333;
    margin-bottom: 8px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.article-grid .card:hover .card-title { color: #4e6ef2; }
.article-grid .card-excerpt {
    font-size: 13px; color: #888; line-height: 1.7; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.article-grid .card-meta { font-size: 12px; color: #adb5bd; }

/* --- Breadcrumb --- */
.breadcrumb { padding: 16px 0 12px; font-size: 13px; color: #c0c4cc; }
.breadcrumb a { color: #909399; transition: color .2s; }
.breadcrumb a:hover { color: #4e6ef2; }
.breadcrumb .sep { margin: 0 6px; color: #dcdfe6; font-size: 11px; }

/* 商品详情路径：所有文字保持黑色，分类项沿用商品列表的分类 URL。 */
.goods-detail-page .detail-breadcrumb,
.goods-detail-page .detail-breadcrumb a,
.goods-detail-page .detail-breadcrumb [aria-current="page"] {
    color: #111827;
}
.goods-detail-page .detail-breadcrumb a:hover,
.goods-detail-page .detail-breadcrumb a:focus-visible {
    color: #111827;
    text-decoration: underline;
}
.goods-detail-page .detail-breadcrumb .sep {
    color: #98a2b3;
}

.detail-mobile-toolbar,
.detail-mobile-back { display: none; }

/* --- Section --- */
.section { margin-bottom: 36px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.section-title {
    font-size: 18px; font-weight: 600; color: #2c3e50;
    position: relative; padding-left: 14px;
}
.section-title::before {
    content: ''; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 16px; border-radius: 2px;
    background: #4e6ef2;
}
.section-more { font-size: 13px; color: #888; transition: color .2s; }
.section-more:hover { color: #4e6ef2; }

/* --- Hero Carousel --- */
.hero-carousel {
    max-width: 1320px; margin: 20px auto 0;
    position: relative; overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 16 / 8;
    min-height: 300px;
    touch-action: pan-y;
}
.hero-track {
    position: relative;
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-track.is-no-transition { transition: none; }
.hero-track.is-no-transition .hero-slide { transition: none; }

.hero-track.is-jumping { animation: heroTrackJump 0.34s ease; }
@keyframes heroTrackJump { from { opacity: 0; } to { opacity: 1; } }

.hero-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    padding: 60px 20px;
    color: #fff; position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    --hero-card-scale: 0.94;
    transform: scale(var(--hero-card-scale));
    transform-origin: center center;
    border-radius: inherit;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.hero-slide.active { --hero-card-scale: 1; }
.hero-slide.active,
.hero-track.is-no-transition .hero-slide { box-shadow: 0 10px 30px rgba(15, 30, 60, 0.18); }
.hero-slide__overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.15);
    pointer-events: none;
}
.hero-slide:not([style*="background-image"]) .hero-slide__overlay { background: none; }
.hero-slide:not([style*="background-image"]) {
    background: linear-gradient(135deg, #4e6ef2 0%, #1a6dd6 100%);
}
.hero-slide__link {
    position: absolute; inset: 0;
    display: block; cursor: pointer;
}
.hero-slide__content { position: relative; z-index: 1; }
.hero-title { font-size: 32px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.5px; text-shadow: 0 2px 12px rgba(0,0,0,0.15); }
.hero-desc { font-size: 15px; opacity: 0.9; margin-bottom: 50px; text-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.hero-slide .btn, .hero .btn {
    background: rgba(255,255,255,0.18); color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    backdrop-filter: blur(4px); transition: all 0.3s;
}
.hero-slide .btn:hover, .hero .btn:hover {
    background: #fff; color: #4e6ef2; border-color: #fff;
    transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.hero-dots {
    position: absolute; bottom: 16px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 8px; z-index: 2;
}
.hero-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.4); cursor: pointer;
    transition: all 0.3s;
}
.hero-dot:hover { background: rgba(255,255,255,0.7); }
.hero-dot.active { background: #fff; width: 24px; border-radius: 4px; }

/* 轮播箭头 */
.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.15); color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 20px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s; z-index: 2; opacity: 0;
    backdrop-filter: blur(4px);
}
.hero-carousel:hover .hero-arrow { opacity: 1; }
.hero-arrow:hover { background: rgba(255,255,255,0.3); }
.hero-arrow--prev { left: 16px; }
.hero-arrow--next { right: 16px; }

/* --- 首屏三栏：商品分类 | 轮播图 | 个人信息 ---
   两翼只在 **≥1024px** 显示（1024–1199 为收窄档），**<1024px 一律隐藏**，
   整块退化为只剩轮播图（占满整行）。
   ------------------------------------------------------------
   为什么门槛是 1024 而不是 769：
   轮播图是 16:8 的整张设计稿（图片本身就是 2:1），两翼占掉固定宽度后
   1024px 时中间列约 567px，16:8 算出的高度已低于原有 300px 底线；
   一旦用 min-height 把高度兜住，盒子就不再是 2:1 —— cover 会横向裁掉设计稿两侧，
   稿子里靠边排版的文字被切掉，看起来就像和左右两栏「叠」在一起。
   与其把稿子裁掉，不如在宽度不够时直接隐藏两翼，把整宽让给轮播图。
   实现方式是「默认隐藏 + 媒体查询打开」，所以 <1024px 一行都不用写。 */
.home-hero-cats,
.home-hero-user { display: none; }

/* 首屏区域的「公告提到轮播上方」只在 ≥1200px 生效：中等屏幕保持 DOM 原序
   （轮播 → 公告），避免把这次「两翼显示」的改动扩散成布局重排。 */
@media (min-width: 1200px) {
    .home-hero-region { display: flex; flex-direction: column; }
    .home-hero-region > .home-hero-row,
    .home-hero-region > .home-announcement-wrapper {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .home-hero-region > .home-announcement-wrapper { order: -1; }
    .home-hero-region > .home-announcement-wrapper .site-announcement { margin-bottom: 0; }
}

@media (min-width: 1024px) {
    .home-hero-row {
        display: grid;
        grid-template-columns: 210px minmax(0, 1fr) 220px;
        gap: 14px;
        margin: 20px auto 0;
        align-items: stretch;
    }
    .home-hero-row--no-cats { grid-template-columns: minmax(0, 1fr) 220px; }
    .home-hero-row--no-user { grid-template-columns: 210px minmax(0, 1fr); }

    /* min-height:0 覆盖掉外层 .hero-carousel 的 300px 底线：这一档保证盒子严格 16:8，
       宽度再小也只是等比缩小，绝不会因为高度兜底而横裁设计稿（见上方注释）。 */
    .home-hero-row .hero-carousel { max-width: none; margin: 0; min-height: 0; }
    .home-hero-main { min-width: 0; }

    .home-hero-row .home-hero-cats,
    .home-hero-row .home-hero-user { display: flex; min-width: 0; position: relative; }

    .home-hero-cats__inner,
    .home-hero-user__inner {
        position: absolute; inset: 0;
        display: flex; flex-direction: column;
        min-height: 0; box-sizing: border-box;
        overflow: hidden;
        padding: 14px;
        background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
        border: 1px solid #e4eaf4;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(30, 60, 110, .06);
    }
    .home-hero-panel-title {
        position: relative;
        padding: 0 0 10px 10px;
        margin-bottom: 8px;
        font-size: 14px; font-weight: 600; color: #2c3e50;
        border-bottom: 1px solid #f0f0f0;
    }
    .home-hero-panel-title::before {
        content: ''; position: absolute; left: 0; top: 3px;
        width: 3px; height: 14px; border-radius: 2px;
        background: var(--mogaiwuyou-theme-accent, #ff5a1f);
    }
    .home-hero-user__favorite-site {
        margin-left: auto;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font-size: calc(1em - 2px);
        font-weight: 400;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
    }
    .home-hero-user__favorite-site:hover,
    .home-hero-user__favorite-site:focus-visible {
        color: #4e6ef2;
        outline: 0;
    }

    /* --- 左栏：商品分类 --- */
    .home-hero-cats:hover,
    .home-hero-cats:focus-within { z-index: 20; }
    .home-hero-cats__inner.is-flyout-open {
        border-right-color: transparent;
        border-radius: 12px 0 0 12px;
        background: #fff;
        box-shadow: -6px 5px 18px -7px rgba(30, 60, 110, .08);
    }
    .home-hero-cats .home-hero-panel-title,
    .home-hero-user .home-hero-panel-title {
        display: flex; align-items: center;
        flex: 0 0 auto; margin-bottom: 12px;
    }
    .home-hero-cats__inner::after {
        content: ''; position: absolute; right: 0;
        top: var(--hero-flyout-bridge-top, 0px);
        width: 18px; height: var(--hero-flyout-bridge-height, 0px);
        background: #fff;
        box-shadow: inset 0 1px 0 #e8eef6, inset 0 -1px 0 #e8eef6;
        opacity: 0; pointer-events: none; transition: opacity .15s;
    }
    .home-hero-cats__inner.is-flyout-open::after { opacity: 1; }

    .home-hero-cats__list {
        display: flex; flex-direction: column; gap: 5px;
        flex: 1 1 auto; min-height: 0; overflow: hidden;
        --hero-cat-base-pad: 5px;
    }
    .home-hero-cat.is-overflow,
    .home-hero-cat.is-carousel-hidden { display: none; }
    .home-hero-cat {
        display: block; flex: 0 0 auto; box-sizing: border-box;
        padding: calc(var(--hero-cat-base-pad) + var(--hero-cat-space, 0px)) 8px;
        border-radius: 10px;
        background: transparent;
        font-size: 14px; font-weight: 400; color: #34435a;
        overflow: hidden;
        transition: background .18s, color .18s, transform .18s;
    }
    .home-hero-cat:hover {
        background: linear-gradient(90deg, #f3f6fb, #fff);
        transform: translateX(2px);
    }
    .home-hero-cat.is-active {
        background: linear-gradient(90deg, #f1f5fa, #fff 90%);
        border-radius: 9px 0 0 9px;
        box-shadow: inset 0 1px 0 #e8eef6, inset 0 -1px 0 #e8eef6;
        transform: translateX(2px);
    }
    .home-hero-cat__link {
        display: flex; align-items: center; gap: 10px;
        color: inherit; text-decoration: none;
    }
    .home-hero-cat.is-active .home-hero-cat__link { color: #26384f; font-weight: 500; }
    .home-hero-cat__icon {
        display: flex; align-items: center; justify-content: center;
        width: 28px; height: 28px; flex-shrink: 0;
        border-radius: 8px; overflow: hidden;
        background: #edf4ff; color: #6692e2; font-size: 13px;
    }
    .home-hero-cat__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .home-hero-cat__name {
        flex: 1 1 auto; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .home-hero-cat__arrow { flex-shrink: 0; color: #a5b2c5; font-size: 15px; transition: color .18s, transform .18s; }
    .home-hero-cat:hover .home-hero-cat__arrow { color: #71839c; }
    .home-hero-cat.is-active .home-hero-cat__arrow { color: #71839c; transform: translateX(2px); }
    .home-hero-cats__flyout {
        display: none; position: absolute; left: calc(100% - 12px); z-index: 30;
        width: 320px; max-height: 100%; box-sizing: border-box;
        overflow: hidden; padding: 17px 18px 17px 28px;
        border: 1px solid rgba(255, 255, 255, .8); border-left: 0; border-radius: 0 14px 14px 0;
        background: linear-gradient(90deg, #fff 0, rgba(255, 255, 255, .98) 44px, rgba(255, 255, 255, .56) 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
    }
    .home-hero-cats__flyout::before {
        content: ''; position: absolute; inset: 0; pointer-events: none;
        -webkit-backdrop-filter: blur(22px) saturate(1.55);
        backdrop-filter: blur(22px) saturate(1.55);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px);
        mask-image: linear-gradient(90deg, transparent, #000 44px);
    }
    .home-hero-cats__flyout::after {
        content: ''; position: absolute; left: 0; z-index: 0;
        top: var(--hero-flyout-bridge-top, 0px);
        width: 28px; height: var(--hero-flyout-bridge-height, 0px);
        background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
        pointer-events: none;
    }
    .home-hero-cats__flyout.is-active { display: block; }
    .home-hero-cats__flyout-list {
        position: relative; z-index: 1;
        max-height: var(--hero-flyout-list-max-height, none); overflow-y: auto;
        scrollbar-width: thin; scrollbar-color: rgba(108, 130, 160, .35) transparent;
        display: grid; grid-template-columns: repeat(var(--hero-flyout-cols, 2), minmax(0, 1fr));
        gap: 4px 10px;
    }
    .home-hero-cats__flyout-link {
        display: flex; box-sizing: border-box; width: 100%; min-width: 0;
        align-items: flex-start; gap: 7px;
        padding: 7px 8px; border-radius: 7px;
        color: #35465e; font-size: 12px; font-weight: 500; line-height: 1.4;
        text-decoration: none;
        transition: background .18s, color .18s;
    }
    .home-hero-cats__flyout-icon {
        display: inline-flex; width: 19px; height: 19px; flex: 0 0 19px;
        align-items: center; justify-content: center;
        margin-top: 1px; overflow: hidden; border-radius: 5px;
        background: #edf4ff; color: #6692e2; font-size: 10px;
    }
    .home-hero-cats__flyout-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .home-hero-cats__flyout-name {
        min-width: 0; overflow-wrap: anywhere; word-break: break-word;
    }
    .home-hero-cats__flyout-link:hover,
    .home-hero-cats__flyout-link:focus-visible {
        background: rgba(255, 255, 255, .62);
        color: var(--mogaiwuyou-theme-accent, #ff5a1f);
    }
    .home-hero-user__more {
        display: flex; align-items: center; justify-content: center; gap: 4px;
        margin-top: 8px; padding: 7px 0;
        border-radius: 8px; background: #f5f7fa;
        font-size: 12px; color: #6b7688; text-decoration: none;
        transition: background .18s, color .18s;
    }
    .home-hero-user__more:hover { background: #eef1f6; color: var(--mogaiwuyou-theme-accent, #ff5a1f); }
    .home-hero-cats__more {
        display: flex; align-items: center; justify-content: center; gap: 5px;
        flex: 0 0 auto; box-sizing: border-box; min-height: 34px;
        margin-top: 8px; padding: 6px 9px;
        border: 1px solid #e5eaf3; border-radius: 8px; background: #f7f9fc;
        color: #64748b; font-size: 12px; text-decoration: none;
        transition: background .18s, border-color .18s, color .18s;
    }
    .home-hero-cats__more:hover,
    .home-hero-cats__more:focus-visible {
        border-color: var(--mogaiwuyou-theme-accent-soft, #f4c4b4);
        background: var(--mogaiwuyou-theme-accent-wash, #fff7f3);
        color: var(--mogaiwuyou-theme-accent, #ff5a1f);
    }
    .home-hero-cats__more .fa { font-size: 12px; }

    /* --- 右栏：个人信息 --- */
    .home-hero-user__head {
        display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
        padding: 11px 10px; border: 1px solid var(--mogaiwuyou-theme-accent-soft, rgba(255, 90, 31, .1)); border-radius: 11px;
        background: linear-gradient(120deg, var(--mogaiwuyou-theme-accent-surface, rgba(255, 90, 31, .17)), var(--mogaiwuyou-theme-accent-wash, rgba(255, 90, 31, .035)));
        box-shadow: 0 4px 12px rgba(45, 91, 170, .07);
    }
    .home-hero-user__avatar {
        display: flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; flex-shrink: 0;
        border-radius: 11px; overflow: hidden;
        background: rgba(255, 255, 255, .9); color: var(--mogaiwuyou-theme-accent, #ff5a1f); font-size: 19px;
        box-shadow: 0 2px 7px rgba(45, 91, 170, .09);
    }
    .home-hero-user__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .home-hero-user__meta { min-width: 0; }
    .home-hero-user__name {
        display: block; font-size: 13px; font-weight: 700;
        color: #263751;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .home-hero-user__sub {
        display: block; margin-top: 3px; font-size: 10.5px;
        color: #8294ae;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .home-hero-user__grid {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: 7px; flex: 1 1 auto; min-height: 0;
        padding: 10px 0;
    }
    .home-hero-user__grid a {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
        min-width: 0; padding: 5px 3px; border: 1px solid var(--mogaiwuyou-theme-accent-soft, rgba(255, 90, 31, .1));
        border-radius: 10px; background: linear-gradient(135deg, var(--mogaiwuyou-theme-accent-soft, rgba(255, 90, 31, .1)), var(--mogaiwuyou-theme-accent-wash, rgba(255, 90, 31, .035)));
        font-size: 11px; color: #46566c; text-decoration: none;
        transition: filter .18s, transform .18s;
    }
    .home-hero-user__grid a:hover { color: var(--mogaiwuyou-theme-accent, #ff5a1f); filter: brightness(.97); transform: translateY(-1px); }
    .home-hero-user__grid i { font-size: 16px; color: var(--mogaiwuyou-theme-accent, #ff5a1f); }
    .home-hero-user__more {
        flex: 0 0 auto; margin-top: 0;
        border: 1px solid #e8edf5; background: #fff;
    }

    /* 未登录：账户摘要 + 四个服务入口 + 底部操作。 */
    .home-hero-user__tips {
        display: flex; flex-direction: column;
        flex: 1 1 auto; min-height: 0;
        gap: 10px; padding: 13px 0 10px;
        color: #263344;
    }
    .home-hero-user__tips-title {
        display: flex; align-items: center; gap: 8px;
        color: #8997aa; font-size: 10.5px; font-weight: 600;
        white-space: nowrap;
    }
    .home-hero-user__tips-title::after { content: ''; flex: 1; height: 1px; background: #e9eef6; }
    .home-hero-user__tips-grid {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        flex: 1 1 auto; min-height: 0; gap: 7px;
    }
    .home-hero-user__tip {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
        min-width: 0; padding: 7px 2px; text-align: center; white-space: nowrap;
        border: 1px solid var(--mogaiwuyou-theme-accent-soft, rgba(255, 90, 31, .1)); border-radius: 10px;
        background: linear-gradient(135deg, var(--mogaiwuyou-theme-accent-soft, rgba(255, 90, 31, .1)), var(--mogaiwuyou-theme-accent-wash, rgba(255, 90, 31, .035)));
        color: #42546b; font-size: 11px; line-height: 1.25;
    }
    .home-hero-user__tip i {
        display: inline-flex; align-items: center; justify-content: center;
        width: 37px; height: 37px; border-radius: 11px;
        background: var(--mogaiwuyou-theme-accent-soft, rgba(255, 90, 31, .1)); color: var(--mogaiwuyou-theme-accent, #ff5a1f); font-size: 19px;
    }
    .home-hero-user__btns {
        display: flex; gap: 8px; flex: 0 0 auto;
        padding-top: 11px; border-top: 1px solid #e9eef6;
    }
    .home-hero-user__btn {
        flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
        min-width: 0; padding: 9px 0; border: 1px solid #e5ebf4; border-radius: 9px;
        background: #fff; color: #586980;
        font-size: 12px; font-weight: 600; text-decoration: none;
        transition: background .18s, color .18s, border-color .18s, filter .18s;
    }
    .home-hero-user__btn:hover { border-color: #d4e0f5; background: #f5f8ff; color: #376ed5; }
    .home-hero-user__btn--primary {
        border-color: transparent; background: var(--mogaiwuyou-theme-accent, #4e6ef2);
        color: #fff; box-shadow: 0 3px 9px rgba(41, 78, 145, .12);
    }
    .home-hero-user__btn--primary:hover {
        border-color: transparent; background: var(--mogaiwuyou-theme-accent, #4e6ef2);
        color: #fff; filter: brightness(.95);
    }
}

/* ============================================================
   首屏三栏 · 中等屏幕（1024–1199px）
   ------------------------------------------------------------
   三栏照常显示，但整行只有 ~1000–1175px 可用（桌面端是 ~1296px），
   所以两翼收窄一档、内边距与字号各收一档（列宽 190 | 1fr | 200，
   中间列随容器自适应，两翼够用）。
   ⚠️ 这里**不再**用 min-height 兜轮播图高度：那会让盒子偏离 16:8，
      cover 就会横裁设计稿（详见 .home-hero-cats 上方注释）。
   ⚠️ 本块必须放在上面的 @media (min-width: 1024px) 之后：两者特异性相同，
      靠源码顺序取胜（媒体查询本身不参与优先级）。
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1199px) {
    .home-hero-row {
        grid-template-columns: 190px minmax(0, 1fr) 200px;
        gap: 14px;
        margin-top: 16px;
    }
    .home-hero-row--no-cats { grid-template-columns: minmax(0, 1fr) 200px; }
    .home-hero-row--no-user { grid-template-columns: 190px minmax(0, 1fr); }

    /* 幻灯片文案按可用宽度缩放：固定的 32px 标题在 ~600px 宽的轮播里会挤成三行 */
    .home-hero-row .hero-slide { padding: 40px 22px; }
    .home-hero-row .hero-title { font-size: clamp(20px, 2.2vw, 30px); margin-bottom: 12px; }
    .home-hero-row .hero-desc { font-size: clamp(12px, 1.15vw, 14px); margin-bottom: clamp(20px, 3.2vw, 44px); }

    /* 两翼：内边距 / 标题 / 分类行 / 宫格一起收一档 */
    .home-hero-cats__inner,
    .home-hero-user__inner { padding: 11px; border-radius: 10px; }
    .home-hero-panel-title { padding: 0 0 8px 9px; margin-bottom: 6px; font-size: 13px; }
    .home-hero-panel-title::before { top: 2px; height: 13px; }

    .home-hero-cats .home-hero-panel-title { margin-bottom: 7px; }
    .home-hero-cats__list { gap: 3px; --hero-cat-base-pad: 4px; }
    .home-hero-cat { padding: calc(var(--hero-cat-base-pad) + var(--hero-cat-space, 0px)) 7px; font-size: 13px; }
    .home-hero-cat__link { gap: 8px; }
    .home-hero-cat__icon { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }
    .home-hero-cat__arrow { font-size: 13px; }
    .home-hero-cats__more { min-height: 30px; margin-top: 6px; padding: 5px 7px; font-size: 11.5px; }
    .home-hero-user__more { margin-top: 6px; padding: 6px 0; font-size: 11.5px; }

    .home-hero-user .home-hero-panel-title { margin-bottom: 7px; }
    .home-hero-user__head { gap: 7px; padding: 8px; }
    .home-hero-user__avatar { width: 34px; height: 34px; font-size: 15px; }
    .home-hero-user__name { font-size: 12px; }
    .home-hero-user__sub { margin-top: 2px; font-size: 9px; }
    .home-hero-user__grid { gap: 5px; padding: 7px 0; }
    .home-hero-user__grid a { gap: 3px; padding: 3px; font-size: 10px; }
    .home-hero-user__grid i { font-size: 14px; }
    .home-hero-user__more { margin-top: 0; padding: 6px 0; }
    .home-hero-user__tips { gap: 7px; padding: 8px 0 7px; }
    .home-hero-user__tips-title { font-size: 10px; }
    .home-hero-user__tips-grid { gap: 5px; }
    .home-hero-user__tip { gap: 3px; padding: 4px 2px; font-size: 9.5px; }
    .home-hero-user__tip i { width: 28px; height: 28px; font-size: 15px; }
    .home-hero-user__btns { padding-top: 7px; }
    .home-hero-user__btn { padding: 7px 0; font-size: 11px; }

    /* 这一档宽度本就接近桌面端，两翼尺寸放回接近桌面端的值（只收字号） */
    .home-hero-cats__inner,
    .home-hero-user__inner { padding: 13px; }
    .home-hero-user__inner { padding: 11px; }
    .home-hero-cat { font-size: 13px; }
}

.hero-blog {
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
}

/* --- Product Detail --- */
.detail-card { background: #fff; border-radius: 10px; border: 1px solid #ebeef5; padding: 32px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.03); }
.detail-layout { display: grid; grid-template-columns: 420px 1fr; gap: 40px; }
.detail-gallery { display: flex; flex-direction: column; gap: 10px; }
.detail-img {
    width: 100%; aspect-ratio: 16 / 9; background: #f8f9fa;
    border-radius: 8px; overflow: hidden;
    border: 1px solid #ebeef5;
    position: relative; isolation: isolate;
    touch-action: pan-y pinch-zoom;
}
.detail-img .goods-no-image {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: inherit;
}
.detail-img-backdrop {
    position: absolute; z-index: 0; inset: -10%;
    width: 120%; height: 120%; max-width: none;
    object-fit: cover; filter: blur(20px) saturate(1.08); opacity: .8;
    transform: scale(1.04);
}
.detail-img > #mainImage {
    position: relative; z-index: 1;
    width: 100%; height: 100%; object-fit: contain;
    user-select: none; -webkit-user-drag: none;
}
.detail-img > #mainImage.is-switching {
    animation: detail-gallery-main-fade .32s ease both;
}
@keyframes detail-gallery-main-fade {
    from { opacity: .28; transform: scale(1.012); }
    to { opacity: 1; transform: scale(1); }
}
.detail-gallery-nav {
    position: absolute; top: 50%; z-index: 2;
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    color: #fff; background: rgba(15, 23, 42, .48); cursor: pointer;
    opacity: 0; transform: translateY(-50%); transition: opacity .2s, background .2s;
}
.detail-img:hover .detail-gallery-nav,
.detail-gallery-nav:focus-visible { opacity: 1; }
.detail-gallery-nav:hover { background: rgba(15, 23, 42, .72); }
.detail-gallery-nav--prev { left: 12px; }
.detail-gallery-nav--next { right: 12px; }
/* 缩略图列表 */
.detail-thumbs {
    position: relative;
}
.detail-thumbs-viewport {
    min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;
    scrollbar-width: none; -ms-overflow-style: none;
}
.detail-thumbs-viewport::-webkit-scrollbar { display: none; }
.detail-thumbs-track {
    display: flex; flex-wrap: nowrap; gap: 8px; width: max-content;
}
.detail-thumbs-nav {
    position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
    width: 22px; height: 28px; padding: 0; border: 0; border-radius: 5px;
    color: #fff; background: rgba(15, 23, 42, .5); cursor: pointer;
    opacity: .78; transition: color .2s, background .2s, opacity .2s;
}
.detail-thumbs-nav:hover,
.detail-thumbs-nav:focus-visible { color: #fff; background: rgba(15, 23, 42, .78); opacity: 1; }
.detail-thumbs-nav:disabled { cursor: default; opacity: .38; }
.detail-thumbs-nav[data-thumbs-action="prev"] { left: 4px; }
.detail-thumbs-nav[data-thumbs-action="next"] { right: 4px; }
.detail-thumb {
    display: block; flex: 0 0 64px; padding: 0;
    width: 64px; height: 64px; border-radius: 6px; overflow: hidden;
    border: 2px solid transparent; cursor: pointer; background: transparent;
    scroll-snap-align: start;
    transition: border-color .2s;
}
.detail-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.detail-thumb:hover { border-color: #ccc; }
.detail-thumb.active { border-color: #4e6ef2; }
/* 宽屏时由 goods.js 将商品数据块移到画廊内，紧接缩略图显示。 */
.detail-gallery > .detail-meta-tabs {
    position: relative;
    width: 100%; margin-top: 18px; padding-top: 18px;
}
.detail-gallery > .detail-meta-tabs::before {
    content: '';
    position: absolute; top: 0; left: 4%; right: 4%; height: .5px;
    background: #ebeef5;
}
.detail-gallery > .goods-detail-tags {
    width: 100%; margin-top: 12px !important;
    padding: 14px 18px !important; box-sizing: border-box;
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
}
.detail-info { display: flex; flex-direction: column; }
.detail-name {
    font-size: 22px; font-weight: 700; color: #2c3e50; margin-bottom: 16px; line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-all;
}
.detail-price-box {
    position: relative; isolation: isolate; overflow: hidden;
    background: #fef5f5; border-radius: 8px; margin-bottom: 24px;
}
/* 可由活动配置设置：--price-box-bg-image / --price-box-bg-color / --price-box-bg-position。 */
.detail-price-box__background {
    position: absolute; z-index: 0; inset: 0; pointer-events: none;
    background-color: var(--price-box-bg-color, transparent);
    background-image: var(--price-box-bg-image, none);
    background-position: var(--price-box-bg-position, center);
    background-size: var(--price-box-bg-size, cover);
    background-repeat: no-repeat;
}
.detail-price-box__campaign:empty { display: none; }
.detail-price-box__campaign {
    position: absolute; z-index: 2; inset: 0; pointer-events: none;
}
.detail-price-box__content {
    position: relative; z-index: 1;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding: 16px 20px;
}
.detail-price { font-size: 28px; font-weight: 700; color: #fa5252; letter-spacing: -0.5px; }
.detail-price-original { font-size: 15px; color: #adb5bd; text-decoration: line-through; }
/* 会员价展示（只对登录会员渲染，见 goods.php 顶部说明）
   - .detail-price-membership：会员身份行。flex-basis:100% ⇒ 在 .detail-price-box__content
     这个 flex-wrap 容器里独占一整行，排在价格行上方；价格行因此恢复原构图
     「价格 → 原价 → 市场价 ……（margin-left:auto）已售/仅剩」，价格仍贴左、字号最大。
     非会员时整行不渲染，价格行与改动前完全一致。
   - .detail-price-member：徽章，文案「会员价 9.6 折」
   - .detail-price-member-save：「已省 ¥x」，弱化显示，随规格/数量由 JS 重算
   - .detail-price-compare：标签 + 划线价成对；非会员时隐藏标签，保持原来「只有一个划线价」的观感 */
.detail-price-membership {
    flex: 0 0 100%;
    min-width: 0;
    display: flex; align-items: center; gap: 8px;
}
.detail-price-member {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 8px; border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 1.15; white-space: nowrap;
    color: #fff; background: linear-gradient(135deg, #ff8a3d, var(--mogaiwuyou-theme-accent, #ff5a1f));
}
.detail-price-member__rate { font-weight: 700; letter-spacing: .2px; }
.detail-price-member-save { font-size: 12px; color: #8b95a7; white-space: nowrap; }
.detail-price-member-save b { color: var(--mogaiwuyou-theme-accent, #ff5a1f); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 游客 / 无等级账户的会员引导：只改变展示，不参与价格计算。 */
.detail-price-guide {
    flex: 0 0 100%; min-width: 0;
    display: flex; align-items: center; gap: 9px;
}
.detail-price-guide__icon {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: linear-gradient(135deg, var(--lv-main, #ff5a1f), var(--lv-deep, #c24418));
    font-size: 12px;
}
.detail-price-guide__copy { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.detail-price-guide__copy b { display: block; color: var(--lv-ink, #8a3111); font-size: 13px; }
.detail-price-guide__copy small { display: block; margin-top: 2px; color: #8b95a7; font-size: 11px; }
.detail-price-guide__action {
    flex: 0 0 auto; padding: 5px 11px; border-radius: 999px;
    color: #fff; background: linear-gradient(135deg, var(--lv-main, #ff5a1f), var(--lv-deep, #c24418));
    font-size: 12px; font-weight: 600; line-height: 1.2; text-decoration: none;
}
.detail-price-guide__action:hover { color: #fff; opacity: .9; }
.detail-price-guide__ribbon-copy { display: inline-flex; align-items: baseline; gap: 8px; }
.detail-price-guide__ribbon-copy small { color: rgba(255, 255, 255, .78); font-size: 11px; font-weight: 400; }
.detail-price-guide__action--ribbon {
    margin-left: auto; color: var(--lv-ink, #8a3111); background: rgba(255, 255, 255, .92);
}
.detail-price-guide__action--ribbon:hover { color: var(--lv-ink, #8a3111); }

/* ============================================================
   详情页价格区 · 会员等级皮肤（A / C / D）
   ------------------------------------------------------------
   由后台「模板设置 → 价格区皮肤」控制：管理员选一套版式，并给各用户等级配主题色。
   每个等级可配 **一个色（纯色）或两个色（左上→右下渐变，135deg）**：
   管理员配了两个色时，goods.php 把第二色直接当作 --lv-deep 输出，
   于是下面所有 `linear-gradient(135deg, var(--lv-main), var(--lv-deep))` 自动变成双色渐变，
   本文件不需要任何 if 分支；只配一个色时仍是原来的「主色 → 派生深色」。
   goods.php 只在「登录会员 + 管理员启用了皮肤」时输出 detail-price-box--x 类与
   --lv-main / --lv-deep / --lv-soft / --lv-soft2 / --lv-ink / --lv-glow 六个变量
   （色阶规则见 price_box_skin.php 的 price_box_skin_tones()）。
   未登录 / 无等级 / 未启用 ⇒ 这些类与变量都不存在，本块所有规则自然不生效。
   优先级：活动皮肤（--price-box-bg-image） > 会员等级皮肤 > 默认样式。
   ⚠️ 渐变与光晕一律画在 __background 子层，不画在 .detail-price-box 上：
      手机端 mobile.css 会把 .detail-price-box 的 background 改成 #fff，
      画在父级会被覆盖，画在子层则天然免疫，也和「活动底图」共用同一条管道。
   ============================================================ */

/* --- A · 整块等级渐变底 + 文字反白 --- */
.detail-price-box--a .detail-price-box__background {
    background-image: var(--price-box-bg-image, linear-gradient(135deg, var(--lv-main, #ff5a1f), var(--lv-deep, #c24418)));
}
.detail-price-box--a .detail-price-box__content { padding: 18px 20px; }
.detail-price-box--a .detail-price-member {
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .55);
}
.detail-price-box--a .detail-price-member-save { color: rgba(255, 255, 255, .82); }
.detail-price-box--a .detail-price-member-save b { color: #fff; }
.detail-price-box--a .detail-price { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .10); }
.detail-price-box--a .detail-price-compare__label { color: rgba(255, 255, 255, .72); }
.detail-price-box--a .detail-price-original { color: rgba(255, 255, 255, .78); }
.detail-price-box--a .detail-price-stats { color: rgba(255, 255, 255, .80); }
.detail-price-box--a .detail-price-stats strong { color: #fff; }
.detail-price-box--a .detail-price-stats i { color: rgba(255, 255, 255, .45); }
.detail-price-box--a .detail-price-guide__icon { color: var(--lv-main, #ff5a1f); background: rgba(255, 255, 255, .92); }
.detail-price-box--a .detail-price-guide__copy b { color: #fff; }
.detail-price-box--a .detail-price-guide__copy small { color: rgba(255, 255, 255, .78); }
.detail-price-box--a .detail-price-guide__action {
    color: var(--lv-ink, #8a3111); background: rgba(255, 255, 255, .92);
}
.detail-price-box--a .detail-price-guide__action:hover { color: var(--lv-ink, #8a3111); }

/* --- C · 徽章进阶（染等级色 + 带等级名）+「已省」浅色胶囊 + 极淡等级光晕 --- */
/* 底光由 PHP 算好整串交给 --lv-glow：单色 = 现在的左上角径向光晕；
   双色 = 135deg（左上→右下）的双色浅渐变。这里给不出条件判断，所以让 PHP 决定形状。 */
.detail-price-box--c .detail-price-box__background {
    background-image: var(--price-box-bg-image, var(--lv-glow, radial-gradient(120% 150% at 0% 0%, var(--lv-soft, #ffefe9) 0%, transparent 62%)));
}
.detail-price-box--c .detail-price-member {
    background: linear-gradient(135deg, var(--lv-main, #ff5a1f), var(--lv-deep, #c24418));
}
.detail-price-member__dot {
    flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
    background: #fff; opacity: .9;
}
.detail-price-member__name { font-weight: 600; }
.detail-price-box--c .detail-price-member-save {
    padding: 2px 9px; border-radius: 999px;
    background: var(--lv-soft, #ffefe9);
    color: var(--lv-ink, #8a3111);
    border: 1px solid var(--lv-soft2, #ffdbce);
}
.detail-price-box--c .detail-price-member-save b { color: var(--lv-ink, #8a3111); }

/* --- D · 顶部等级色通栏（身份独立成条），价格行完全不变 --- */
.detail-price-box--d { background: #fff; border: 1px solid #f0f2f6; }
.detail-price-box__ribbon {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    /* 圆角跟随父级：桌面 8px，手机端 style.css 的 ≤768px 块给 5px */
    border-top-left-radius: inherit; border-top-right-radius: inherit;
    /* 渐变方向统一 135deg = 左上 → 右下（与「颜色展示区」的要求一致）；
       通栏很扁，135deg 的竖直分量只占很小一段，观感仍接近横向渐变 */
    background: linear-gradient(135deg, var(--lv-main, #ff5a1f), var(--lv-deep, #c24418));
    color: #fff; font-size: 12px; font-weight: 600;
}
.detail-price-box__ribbon-tag {
    padding: 1px 6px; border-radius: 4px;
    background: rgba(255, 255, 255, .22);
    font-size: 11px; font-weight: 600; letter-spacing: .3px; white-space: nowrap;
}
.detail-price-box__ribbon-rate { font-weight: 700; margin-left: 2px; }
.detail-price-box__ribbon-save { margin-left: auto; font-weight: 400; color: rgba(255, 255, 255, .9); white-space: nowrap; }
.detail-price-box__ribbon-save b { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.detail-price-box--d .detail-price-box__content {
    border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;
    background: #fef5f5;
}
@media (max-width: 768px) {
    .detail-price-guide { gap: 7px; }
    .detail-price-guide__icon { width: 23px; height: 23px; font-size: 10px; }
    .detail-price-guide__copy b { font-size: 11px; }
    .detail-price-guide__copy small { font-size: 9px; }
    .detail-price-guide__action { padding: 4px 8px; font-size: 10px; }
    .detail-price-guide__ribbon-copy small { display: none; }
}
.detail-price-compare { display: inline-flex; align-items: baseline; gap: 3px; }
.detail-price-compare__label { font-style: normal; font-size: 12px; color: #b6bec9; }
.detail-price-box:not(.is-member) .detail-price-compare__label { display: none; }
/* 命中商品满减时：原小计删除线 + "满 X 减 Y" 标签（仅当 JS pickDiscountAmount 返回 > 0 时显示） */
.detail-price-discount-hint { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; }
.detail-price-strike { font-size: 14px; color: #adb5bd; text-decoration: line-through; }
.detail-price-discount-label {
    font-size: 12px; color: #fa5252;
    background: #ffe5e5; border-radius: 4px;
    padding: 2px 8px;
}
.detail-meta { margin-bottom: 24px; }
.detail-meta-row { display: flex; padding: 10px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
.detail-meta-label { color: #999; width: 80px; flex-shrink: 0; }
.detail-meta-value { color: #333; }
.detail-related-goods:not(.detail-related-goods--mobile) { display: none; }
@media (min-width: 769px) {
    .detail-related-goods:not(.detail-related-goods--mobile) {
        display: block;
        margin-top: 16px;
        padding-top: 16px;
    }
    .detail-related-goods__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        color: #34435a;
        font-size: 14px;
        font-weight: 600;
    }
    .detail-related-goods__head small {
        color: #9aa6b7;
        font-size: 11px;
        font-weight: 400;
    }
    .detail-related-goods__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .detail-related-goods__card {
        display: flex;
        min-width: 0;
        gap: 8px;
        padding: 7px;
        border: 1px solid #edf0f5;
        border-radius: 8px;
        background: #fff;
        color: inherit;
        text-decoration: none;
        transition: border-color .18s, box-shadow .18s, transform .18s;
    }
    .detail-related-goods__card:hover,
    .detail-related-goods__card:focus-visible {
        border-color: #bed0f6;
        box-shadow: 0 5px 14px rgba(54, 86, 140, .08);
        transform: translateY(-1px);
        outline: 0;
    }
    .detail-related-goods__cover {
        position: relative;
        display: block;
        width: 52px;
        height: 52px;
        flex: 0 0 52px;
        overflow: hidden;
        border-radius: 6px;
        background: #f3f6fa;
    }
    .detail-related-goods__cover img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .detail-related-goods__cover .goods-no-image {
        position: absolute;
        inset: 0;
    }
    .detail-related-goods__content {
        display: flex;
        min-width: 0;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: space-between;
        gap: 5px;
    }
    .detail-related-goods__name {
        display: -webkit-box;
        overflow: hidden;
        color: #46566c;
        font-size: 12px;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .detail-related-goods__price {
        color: #fa5252;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
    }
}
.detail-intro {
    font-size: 14px; color: #888; line-height: 1.7; margin-bottom: 16px;
}
.detail-desc {
    background: #f8f9fa; border-radius: 8px; padding: 16px 20px;
    margin-bottom: 24px; font-size: 14px; color: #666; line-height: 1.8;
}
/* --- Spec Selector --- */
.spec-section { margin-bottom: 24px; }
.spec-group { margin-bottom: 16px; }
.spec-group-label { font-size: 13px; color: #999; margin-bottom: 8px; }
.spec-group-options { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
/* 每个规格按钮的容器：tags 在上、按钮在下；多维度时 tags 由 JS 动态填充 */
.spec-item { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.spec-item-tags {
    display: flex; flex-wrap: wrap; gap: 3px;
    padding: 0 2px;
}
.spec-tag {
    display: inline-flex; align-items: center;
    padding: 0 6px; font-size: 11px; line-height: 16px;
    color: #c2410c; background: #fff7ed;
    border: 1px solid #fed7aa; border-radius: 8px;
    letter-spacing: 0.2px; white-space: nowrap;
}
.spec-btn {
    padding: 8px 20px; border: 1px solid #dcdfe6; border-radius: 6px;
    background: #fff; cursor: pointer; font-size: 14px; color: #333;
    transition: all 0.2s; line-height: 1.4;
}
.spec-btn:hover { border-color: #4e6ef2; color: #4e6ef2; }
.spec-btn.active { border-color: #4e6ef2; background: #eef1fe; color: #4e6ef2; font-weight: 600; }
.spec-btn.disabled { color: #ccc; border-color: #eee; background: #fafafa; cursor: not-allowed; }
.spec-stock-hint { font-size: 12px; color: #adb5bd; margin-top: 8px; }

/* 购买数量选择器 */
.detail-qty-row { margin-bottom: 24px; }
.detail-qty-label { font-size: 13px; color: #999; display: block; margin-bottom: 8px; }
.detail-qty-wrap { display: flex; align-items: center; gap: 12px; }
.detail-qty-selector {
    display: inline-flex; align-items: center;
    border: 1px solid #dcdfe6; border-radius: 6px; overflow: hidden;
}
.detail-qty-btn {
    width: 36px; height: 36px; border: none; background: #f5f7fa;
    font-size: 18px; color: #606266; cursor: pointer; transition: background 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.detail-qty-btn:hover { background: #e8eaed; }
.detail-qty-input {
    width: 52px; height: 36px; border: none; border-left: 1px solid #dcdfe6; border-right: 1px solid #dcdfe6;
    text-align: center; font-size: 14px; color: #333; outline: none;
    -moz-appearance: textfield;
}
.detail-qty-input::-webkit-inner-spin-button,
.detail-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.detail-stock-info { font-size: 13px; color: #67c23a; }
.detail-min-buy { font-size: 12px; color: #e6a23c; margin-top: 6px; }

/* 详情页通用表单字段（附加选项 + 查单模式共用同一套样式） */
.detail-form-field { margin-bottom: 14px; }
.detail-form-field-label {
    display: block; font-size: 13px; color: #666;
    margin-bottom: 5px; font-weight: 500;
}
.detail-form-field-input {
    width: 100%; height: 38px;
    padding: 0 12px; border: 1.5px solid #e0e0e0;
    border-radius: 6px; font-size: 14px; color: #333;
    background: #fff; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.detail-form-field-input:focus {
    border-color: #4e6ef2;
    box-shadow: 0 0 0 3px rgba(78,110,242,0.1);
}
/* 查单模式 section 容器（仅作 DOM 锚点，供 guest_find.js 判断；不加额外样式） */
.detail-guest-find-section { /* no-op */ }

/* 商品数据/优惠信息 选项卡 */
.detail-meta-tabs { margin-bottom: 24px; }
.detail-meta-tab-nav {
    display: flex; gap: 0; border-bottom: 1px solid #f0f0f0; margin-bottom: 16px;
}
.detail-meta-tab-btn {
    padding: 8px 20px; border: none; background: none;
    font-size: 14px; color: #999; cursor: pointer;
    border-bottom: 2px solid transparent; transition: all 0.2s;
}
.detail-meta-tab-btn:hover { color: #333; }
.detail-meta-tab-btn.active { color: #4e6ef2; border-bottom-color: #4e6ef2; font-weight: 500; }
.detail-meta-tab-pane { display: none; }
.detail-meta-tab-pane.active { display: block; }
.detail-discount-list { display: flex; flex-direction: column; gap: 8px; }
.detail-discount-item {
    font-size: 14px; color: #333; padding: 8px 12px;
    background: #fff7ed; border-radius: 6px; display: flex; align-items: center; gap: 8px;
}
.detail-discount-tag {
    display: inline-block; padding: 1px 8px; font-size: 12px;
    color: #fff; background: #f59e0b; border-radius: 4px; flex-shrink: 0;
}

/* 价格区右侧的销量 / 库存 */
.detail-price-stats {
    display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
    font-size: 13px; color: #8b95a7; white-space: nowrap;
}
.detail-price-stats strong { color: #5f6b7d; font-weight: 600; }
.detail-price-stats i { color: #cbd2dc; font-style: normal; }

/* 支付方式 */
.detail-payment-section { margin-bottom: 24px; }
.detail-payment-title { font-size: 13px; color: #999; margin-bottom: 10px; }
.detail-payment-list { display: flex; flex-wrap: wrap; gap: 10px; }
.detail-payment-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 18px; border: 1.5px solid #e0e0e0; border-radius: 8px;
    background: #fff; cursor: pointer; transition: all 0.2s;
    font-size: 14px; color: #333;
}
.detail-payment-item img { width: 24px; height: 24px; object-fit: contain; }
.detail-payment-item:hover { border-color: #4e6ef2; }
.detail-payment-item.active {
    border-color: #4e6ef2; background: #eef1fe; color: #4e6ef2; font-weight: 500;
}
/* 禁用态（如未登录时的余额支付） */
.detail-payment-item.is-disabled {
    opacity: 0.45; cursor: not-allowed; background: #f5f5f5; color: #999;
}
.detail-payment-item.is-disabled:hover { border-color: #e0e0e0; }
.detail-payment-backdrop,
.detail-payment-sheet-close,
.detail-payment-toggle,
.detail-payment-sheet-actions { display: none; }
.detail-payment-sheet-head { display: block; }

.detail-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.detail-order-total {
    display: none;
    min-width: 92px;
    align-items: flex-end;
    gap: 4px;
    justify-content: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    line-height: 1.2;
}
.detail-order-total__label { margin-bottom: 2px; color: #8b95a7; font-size: 12px; white-space: nowrap; }
.detail-order-total__price { color: #fa5252; font-size: 20px; font-weight: 700; white-space: nowrap; }
.detail-order-total__arrow {
    width: 0;
    height: 0;
    margin-bottom: 6px;
    border-right: 4px solid transparent;
    border-bottom: 6px solid #8b95a7;
    border-left: 4px solid transparent;
    transition: transform .2s ease;
}
.detail-order-total.is-open .detail-order-total__arrow { transform: rotate(180deg); }
.detail-order-breakdown { display: none; }

/* --- Article Detail --- */
.article-detail {
    background: #fff; border-radius: 8px; border: 1px solid #ebeef5;
    padding: 40px; margin-bottom: 16px;
}
.article-detail .detail-title { font-size: 24px; font-weight: 700; color: #2c3e50; margin-bottom: 16px; line-height: 1.5; }
.article-detail .detail-meta {
    font-size: 13px; color: #adb5bd; padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0; margin-bottom: 24px;
    display: flex; gap: 16px; flex-wrap: wrap;
}
.article-detail .detail-body img { max-width: 100%; height: auto; }
.article-detail .detail-body a { color: #4e6ef2; text-decoration: none; }
.article-detail .detail-body a:hover { color: #3658d6; text-decoration: none; }
.article-nav {
    display: flex; justify-content: space-between;
    background: #fff; border-radius: 8px; border: 1px solid #ebeef5; padding: 16px 20px;
}
.article-nav a { font-size: 13px; color: #888; }
.article-nav a:hover { color: #4e6ef2; }

/* --- Search --- */
.search-box { display: flex; gap: 12px; margin-bottom: 20px; }
.search-input {
    flex: 1; padding: 10px 16px; border: 1px solid #dcdfe6;
    border-radius: 6px; font-size: 14px; outline: none;
    transition: border-color 0.2s; background: #fff;
}
.search-input:focus { border-color: #4e6ef2; box-shadow: 0 0 0 3px rgba(78,110,242,0.08); }
.search-hint { font-size: 13px; color: #adb5bd; margin-bottom: 16px; }

/* --- Order Result --- */
.order-result { max-width: 680px; margin: 0 auto; }
.order-result-card {
    text-align: center; padding: 40px 20px;
    background: #fff; border-radius: 12px; border: 1px solid #ebeef5;
    margin-bottom: 20px;
}
.order-result-card--success .order-result-icon { color: #52c41a; }
.order-result-icon { font-size: 48px; color: #f59e0b; margin-bottom: 12px; }
.order-result-title { font-size: 20px; font-weight: 600; color: #333; margin-bottom: 8px; }
.order-result-desc { font-size: 14px; color: #999; }
.order-info-card {
    background: #fff; border-radius: 12px; border: 1px solid #ebeef5;
    padding: 24px; margin-bottom: 20px;
}
.order-info-title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }
.order-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 50px; }
.order-info-item { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; }
.order-info-label { color: #999; }
.order-info-value { color: #333; }
.order-goods-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid #f8f8f8;
}
.order-goods-item:last-child { border-bottom: none; }
.order-goods-img { width: 56px; height: 56px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #f5f7fa; }
.order-goods-img img { width: 100%; height: 100%; object-fit: cover; }
.order-goods-img-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #ddd; font-size: 20px; }
.order-goods-info { flex: 1; min-width: 0; }
.order-goods-name {
    font-size: 14px; color: #333; font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    word-break: break-all;
}
.order-goods-spec {
    font-size: 12px; color: #999; margin-top: 2px;
    overflow-wrap: anywhere;
    word-break: break-all;
}
.order-goods-qty { font-size: 14px; color: #999; min-width: 40px; text-align: center; }
.order-goods-price { font-size: 15px; font-weight: 600; color: #fa5252; min-width: 80px; text-align: right; }
.order-delivery-content {
    background: #f8faf5; border-radius: 8px; padding: 12px 16px; margin: 8px 0 12px;
    border-left: 3px solid #52c41a;
}
.order-delivery-label { font-size: 13px; color: #52c41a; font-weight: 500; margin-bottom: 6px; }
.order-delivery-text { font-size: 14px; color: #333; line-height: 1.8; word-break: break-all; }

/* --- Empty State（白底扁平 · 双按钮 · 小贴士三连）--- */
.empty-state {
    text-align: center;
    padding: 56px 24px 44px;
    background: #fff;
    border-radius: 14px;
}
.empty-state .empty-icon {
    width: 72px; height: 72px;
    margin: 0 auto 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eef2ff;
    border-radius: 20px;
    font-size: 30px;
    color: #6366f1;
    opacity: 1;
}
.empty-state h3 {
    font-size: 17px; color: #1f2937;
    margin-bottom: 8px; font-weight: 600;
    letter-spacing: 0.3px;
}
.empty-state p {
    font-size: 13px; color: #94a3b8;
    line-height: 1.75;
    max-width: 480px;
    margin: 0 auto 22px;
}

/* 按钮组（主 CTA + 次按钮并列） */
.empty-actions {
    display: inline-flex; gap: 10px; flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 24px;
}
.empty-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 22px;
    font-size: 13px; font-weight: 500;
    color: #fff;
    background: #6366f1;
    border: 1px solid #6366f1;
    border-radius: 999px;
    transition: background 0.18s ease, transform 0.18s ease;
    text-decoration: none;
}
.empty-btn:hover {
    background: #4f46e5;
    border-color: #4f46e5;
    transform: translateY(-1px);
    color: #fff;
}
.empty-btn i { font-size: 12px; }
.empty-btn--ghost {
    background: #fff;
    color: #6366f1;
    border-color: #c7d2fe;
}
.empty-btn--ghost:hover {
    background: #eef2ff;
    color: #6366f1;
    border-color: #a5b4fc;
}

/* 贴士三连：icon + 短句，分隔在一行或换行 */
.empty-tips {
    display: flex; flex-wrap: wrap; gap: 14px 22px;
    justify-content: center;
    padding-top: 18px;
    border-top: 1px dashed #f3f4f6;
    max-width: 640px;
    margin: 0 auto;
}
.empty-tips span {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: #9ca3af;
    line-height: 1.6;
}
.empty-tips i { color: #c7d2fe; font-size: 13px; }
@media (max-width: 640px) {
    .empty-state { padding: 40px 18px 32px; }
    .empty-state .empty-icon { width: 60px; height: 60px; font-size: 24px; }
    .empty-state h3 { font-size: 15px; }
    .empty-tips { gap: 10px 18px; }
}

/* ============================================================
   空态 · 丰富版（.empty-state--rich）
   装饰圆点 + 光晕 icon + 4 宫格特色 + 双 CTA
   ============================================================ */
.empty-state--rich {
    position: relative;
    overflow: hidden;
    padding: 56px 32px 15px;
}

/* 装饰层：角落小圆点 + 光环 */
.empty-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.empty-decor__dot {
    position: absolute;
    border-radius: 50%;
    opacity: 0.65;
}
.empty-decor__dot--1 { width: 10px; height: 10px; background: #c7d2fe; top: 30px;  left: 10%; }
.empty-decor__dot--2 { width: 14px; height: 14px; background: #fbcfe8; top: 60px;  right: 14%; }
.empty-decor__dot--3 { width: 8px;  height: 8px;  background: #fde68a; bottom: 46px; left: 18%; }
.empty-decor__ring {
    position: absolute;
    width: 160px; height: 160px;
    top: 20px; right: -40px;
    border: 2px dashed #e0e7ff;
    border-radius: 50%;
    opacity: 0.6;
}

/* 相对定位让内容在装饰层之上 */
.empty-state--rich > *:not(.empty-decor) { position: relative; z-index: 1; }

/* Icon 升级：外圈脉冲光晕 */
.empty-icon--glow {
    width: 88px; height: 88px;
    font-size: 38px;
    position: relative;
    margin-bottom: 18px;
}
.empty-icon--glow::before,
.empty-icon--glow::after {
    content: ''; position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid #c7d2fe;
    opacity: 0;
    animation: empty-pulse 2.4s ease-out infinite;
}
.empty-icon--glow::after { animation-delay: 1.2s; }
@keyframes empty-pulse {
    0%   { opacity: 0; transform: scale(0.9); }
    40%  { opacity: 0.5; }
    100% { opacity: 0; transform: scale(1.35); }
}

/* 特色 4 宫格 */
.empty-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 4px auto 28px;
    max-width: 780px;
}
.empty-feature {
    text-align: center;
    padding: 16px 12px;
    background: #fafbfc;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.empty-feature:hover {
    transform: translateY(-2px);
    border-color: #e0e7ff;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.08);
}
.empty-feature__icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    font-size: 17px;
    margin-bottom: 8px;
}
.empty-feature__title {
    font-size: 13px; font-weight: 600; color: #1f2937;
    margin-bottom: 3px;
}
.empty-feature__desc { font-size: 11px; color: #94a3b8; line-height: 1.5; }

@media (max-width: 768px) {
    .empty-features { grid-template-columns: repeat(2, 1fr); }
    .empty-decor__ring { display: none; }
}
@media (max-width: 480px) {
    .empty-state--rich { padding: 40px 20px 32px; }
    .empty-features { gap: 10px; }
    .empty-feature { padding: 12px 8px; }
    .empty-feature__icon { width: 34px; height: 34px; font-size: 14px; }
}

/* --- Page Title --- */
.page-title { font-size: 20px; font-weight: 600; color: #2c3e50; margin-bottom: 20px; }

/* --- 404 --- */
.not-found { text-align: center; padding: 80px 20px; }
.not-found-code { font-size: 100px; font-weight: 800; color: #4e6ef2; line-height: 1; margin-bottom: 12px; opacity: 0.3; }
.not-found-title { font-size: 20px; font-weight: 600; color: #333; margin-bottom: 8px; }
.not-found-desc { font-size: 14px; color: #adb5bd; margin-bottom: 32px; line-height: 1.8; }
.not-found-desc code { background: #f4f6f9; padding: 2px 8px; border-radius: 4px; font-size: 12px; color: #888; }

/* --- Article List (stacked) --- */
.article-list { display: flex; flex-direction: column; gap: 12px; }

/* --- Blog Layout (content + sidebar) --- */
.blog-layout { display: grid; grid-template-columns: 1fr 320px; gap: 15px; align-items: start; }
/* 单列变体：首页（goods_index.php）不用右侧栏，主栏占满整行。
   双类选择器（0,2,0）是为了压过后面的响应式覆盖（如 1024px 的 1fr 240px） */
.blog-layout.blog-layout--full { grid-template-columns: 1fr; }
.blog-main { min-width: 0; }
.blog-sidebar { position: sticky; top: 72px; }
.sidebar-widget {
    background: #fff; border-radius: 10px; border: 1px solid #ebeef5;
    padding: 20px; margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.sidebar-title {
    font-size: 15px; font-weight: 600; color: #2c3e50;
    margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0;
    position: relative; padding-left: 14px;
}
.sidebar-title::before {
    content: ''; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%); margin-top: -5px;
    width: 4px; height: 14px; border-radius: 2px;
    background: #4e6ef2;
}
.sidebar-list a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; font-size: 14px; color: #666; border-bottom: 1px dashed #f5f5f5;
}
.sidebar-list a:last-child { border-bottom: none; }
.sidebar-list a:hover { color: #4e6ef2; }
.sidebar-list .count { font-size: 12px; color: #adb5bd; background: #f4f6f9; padding: 1px 8px; border-radius: 10px; }
.sidebar-posts { display: flex; flex-direction: column; gap: 10px; }
.sidebar-post {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13px; color: #666; line-height: 1.5;
}
.sidebar-post:hover { color: #4e6ef2; }
.sidebar-rank {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 4px;
    background: #ebeef5; color: #999; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.sidebar-rank.top { background: #4e6ef2; color: #fff; }
.sidebar-post-title {
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sidebar-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sidebar-tag {
    padding: 4px 12px; border-radius: 14px; font-size: 12px;
    background: #f4f6f9; color: #888; border: 1px solid #ebeef5;
    transition: all 0.2s;
}
.sidebar-tag:hover { border-color: #4e6ef2; color: #4e6ef2; background: #f0f3ff; }
.sidebar-list .price-tag { font-size: 13px; color: #fa5252; font-weight: 600; flex-shrink: 0; }

/* 侧边栏最新商品（左图右文） */
.sidebar-goods-list { display: flex; flex-direction: column; gap: 12px; }
.sidebar-goods-item {
    display: flex; gap: 10px; align-items: center;
    text-decoration: none; color: #333;
    padding: 8px; margin: -8px; border-radius: 8px;
    transition: background .2s;
}
.sidebar-goods-item:hover { background: #f8f9fa; }
.sidebar-goods-item:hover .sidebar-goods-name { color: #4e6ef2; }
.sidebar-goods-img {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: 6px; overflow: hidden; background: #f8f9fa;
    border: 1px solid #ebeef5;
    position: relative;
}
.sidebar-goods-img img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-goods-img .goods-no-image {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: inherit;
}
.sidebar-goods-info { flex: 1; min-width: 0; }
.sidebar-goods-name {
    font-size: 13px; line-height: 1.4; color: #333;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-all;
    transition: color .2s;
}
.sidebar-goods-price { margin-top: 4px; }
.sidebar-goods-price .price { font-size: 14px; font-weight: 600; color: #fa5252; }
.sidebar-goods-price .price-original { font-size: 11px; color: #adb5bd; text-decoration: line-through; margin-left: 4px; }

/* 侧边栏二级分类 */
.sidebar-cat-list { display: flex; flex-direction: column; }
.sidebar-cat-group { border-bottom: 1px solid #f0f0f0; }
.sidebar-cat-group:last-child { border-bottom: none; }
/* 父分类行：链接 + 箭头 */
.sidebar-cat-parent-row {
    display: flex; align-items: center;
}
.sidebar-cat-parent {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 0; font-size: 14px; color: #333; font-weight: 500;
    text-decoration: none; transition: color .2s;
}
.sidebar-cat-parent:hover { color: #4e6ef2; }
/* 折叠箭头 */
.sidebar-cat-arrow {
    flex-shrink: 0; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #adb5bd; font-size: 12px;
    border-radius: 4px; transition: color .2s, background .2s;
}
.sidebar-cat-arrow:hover { color: #666; background: #f4f6f9; }
.sidebar-cat-arrow .fa { transition: transform .25s ease; }
.sidebar-cat-arrow.is-open .fa { transform: rotate(180deg); }
.sidebar-cat-children { padding: 0 0 8px 30px; }
.sidebar-cat-child {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0; font-size: 13px; color: #666;
    text-decoration: none; transition: color .2s;
}
.sidebar-cat-child:hover { color: #4e6ef2; }

/* 分类图标 */
.sidebar-cat-icon {
    width: 22px; height: 22px; border-radius: 4px;
    object-fit: cover; flex-shrink: 0;
}
.sidebar-cat-icon--sm { width: 18px; height: 18px; border-radius: 3px; }

/* 分类名称撑满剩余空间，数字右对齐统一大小 */
.sidebar-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-cat-count {
    flex-shrink: 0; min-width: 28px; height: 28px; line-height: 28px;
    text-align: center; font-size: 12px; color: #adb5bd;
    background: #f4f6f9; padding: 0 6px; border-radius: 4px;
    box-sizing: border-box;
}

/* --- Sidebar User Info --- */
.sidebar-user {
    display: flex; align-items: center; gap: 12px; padding: 4px 0 12px;
}
.sidebar-user-avatar {
    width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: #f0f2f5;
}
.sidebar-user-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.sidebar-user-avatar--guest {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #e8ecf4, #d5dbe8);
    color: #a0aec0; font-size: 22px;
}
.sidebar-user-avatar--default {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; border-radius: 50%;
    background: linear-gradient(135deg, #e8ecf4, #d5dbe8);
    color: #a0aec0; font-size: 22px;
}
.sidebar-user-name {
    font-size: 15px; font-weight: 600; color: #333; line-height: 1.3;
}
.sidebar-user-meta {
    font-size: 12px; color: #999; margin-top: 2px;
}
.sidebar-user-links {
    display: flex; gap: 8px;
}
.sidebar-user-links > a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 7px 0; font-size: 13px; color: #666; text-decoration: none;
    background: #f5f7fa; border-radius: 6px; transition: background .2s, color .2s;
}
.sidebar-user-links > a:hover { background: #ebeef5; color: #333; }
.sidebar-user-btn--primary {
    background: #4e6ef2 !important; color: #fff !important;
}
.sidebar-user-btn--primary:hover {
    background: #3d5bd9 !important;
}

/* --- Category Tabs (goods list filter) --- */
.goods-catalog-layout { min-width: 0; }
.goods-category-panel,
.goods-results-panel { min-width: 0; }
.goods-list-page { padding-top: 8px; }
.category-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.category-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; font-size: 13px;
    border: 1px solid #e5e7eb; color: #666; background: #fff;
    text-decoration: none; cursor: pointer; transition: all 0.2s;
}
.category-tab:hover { border-color: #4e6ef2; color: #4e6ef2; }
.category-tab.active { background: #4e6ef2; color: #fff; border-color: #4e6ef2; box-shadow: 0 2px 6px rgba(78, 110, 242, 0.25); }
.category-tab-icon {
    width: 20px; height: 20px; border-radius: 4px;
    object-fit: cover; flex-shrink: 0;
}
.category-tab-name { white-space: nowrap; }
.category-tab-count {
    font-size: 11px; background: rgba(0,0,0,0.06); padding: 1px 6px;
    border-radius: 8px; line-height: 16px; flex-shrink: 0;
}
.category-tab.active .category-tab-count { background: rgba(255,255,255,0.25); color: #fff; }
.category-tabs--sub { margin-top: -12px; }
.category-tabs--sub .category-tab { font-size: 12px; padding: 5px 12px; background: #f8f9fa; border-color: #ebeef5; border-radius: 6px; }
.category-tabs--sub .category-tab.active { background: #4e6ef2; color: #fff; border-color: #4e6ef2; }

.goods-sort-bar {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin: 0 0 18px;
}
.goods-sort-link {
    display: inline-block; padding: 6px 12px; border-radius: 6px; font-size: 13px;
    border: 1px solid #e5e7eb; color: #666; background: #fff; text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.goods-sort-link:hover { border-color: #4e6ef2; color: #4e6ef2; }
.goods-sort-link.active { background: #4e6ef2; color: #fff; border-color: #4e6ef2; }
.goods-sort-link--price { display: inline-flex; align-items: center; gap: 5px; }
.goods-sort-direction {
    display: inline-block;
    width: 0;
    height: 0;
    border-right: 3.5px solid transparent;
    border-left: 3.5px solid transparent;
    opacity: .45;
}
.goods-sort-direction--none,
.goods-sort-direction--asc { border-bottom: 5px solid currentColor; }
.goods-sort-direction--desc { border-top: 5px solid currentColor; }
.goods-sort-link.active .goods-sort-direction { opacity: 1; }

/* 手机商城分类页：左侧纵向分类，右侧排序与两列商品。 */
@media (max-width: 768px) {
    .goods-list-breadcrumb { display: none; }
    .goods-catalog-layout {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
    }
    .goods-category-panel {
        position: sticky;
        top: 8px;
        max-height: calc(100vh - var(--mobile-app-nav-h) - 16px);
        max-height: calc(100dvh - var(--mobile-app-nav-h) - 16px);
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid #e8ebf2;
        border-radius: 9px;
        background: #f0f2f6;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .goods-category-panel::-webkit-scrollbar { display: none; }
    .goods-category-panel .category-tabs {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        margin: 0;
    }
    .goods-category-panel .category-tab {
        position: relative;
        display: flex;
        width: 100%;
        min-width: 0;
        min-height: 47px;
        justify-content: flex-start;
        gap: 5px;
        padding: 8px 6px;
        border: 0;
        border-bottom: 1px solid #e7eaf0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: #626b7a;
        font-size: 12px;
    }
    .goods-category-panel .category-tabs .category-tab:last-child { border-bottom: 0; }
    .goods-category-panel .category-tab::before {
        position: absolute;
        top: 12px;
        bottom: 12px;
        left: 0;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: #4e6ef2;
        content: '';
        opacity: 0;
    }
    .goods-category-panel .category-tab.active {
        background: #fff;
        color: #4e6ef2;
        font-weight: 600;
    }
    .goods-category-panel .category-tab.active::before { opacity: 1; }
    .goods-category-panel .category-tab-icon {
        display: inline-flex !important;
        flex: 0 0 17px;
        width: 17px;
        height: 17px;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        object-fit: cover;
        font-size: 10px !important;
    }
    .goods-category-panel .category-tab-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .goods-category-panel .category-tab-count {
        display: none;
    }
    .goods-category-panel .category-tab.active .category-tab-count {
        display: none;
    }
    .goods-category-panel .category-tabs--sub {
        display: none;
    }
    .goods-results-panel { width: 100%; overflow: hidden; }
    .goods-catalog-layout > .goods-results-panel:first-child { grid-column: 1 / -1; }
    .goods-results-panel .goods-sort-bar {
        position: sticky;
        top: 0;
        z-index: 3;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        gap: 2px;
        margin: 0 0 10px;
        padding: 0 0 7px;
        overflow-x: hidden;
        background: #f4f6f9;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .goods-results-panel .goods-sort-bar::-webkit-scrollbar { display: none; }
    .goods-results-panel .goods-sort-link {
        position: relative;
        flex: 0 0 auto;
        padding: 5px 2px 7px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: #687181;
        font-size: 11px;
        white-space: nowrap;
    }
    .goods-results-panel .goods-sort-link:hover,
    .goods-results-panel .goods-sort-link.active {
        border: 0;
        background: transparent;
        box-shadow: none;
        color: #4e6ef2;
    }
    .goods-results-panel .goods-sort-link.active::after {
        position: absolute;
        right: 2px;
        bottom: 1px;
        left: 2px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        content: '';
    }
    .goods-results-panel .goods-sort-link--price { gap: 4px; }
    .goods-catalog-layout .goods-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .goods-catalog-layout .goods-card { min-width: 0; }
    .goods-catalog-layout .goods-card .card-body { padding: 8px; }
    .goods-catalog-layout .goods-card .card-title { font-size: 12px; line-height: 1.45; }
    .goods-catalog-layout .goods-card .card-stats { gap: 3px; font-size: 9px; }
    .goods-catalog-layout .goods-card .price { font-size: 14px; }
    .goods-catalog-layout .goods-card .price-original { font-size: 9px; }
}

/* --- Blog Article Grid (blog_index 2-column layout) --- */
.blog-article-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.blog-article-card {
    display: flex; flex-direction: row; overflow: hidden;
    border-radius: 10px; text-decoration: none; color: #333;
    transition: box-shadow 0.3s, transform 0.2s;
}
.blog-article-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.blog-article-img {
    width: 108px; min-height: 84px; flex-shrink: 0; overflow: hidden; background: #f8f9fa;
    margin: 12px; border-radius: 8px;
}
.blog-article-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
}
.blog-article-card:hover .blog-article-img img { transform: scale(1.05); }
.blog-article-body { padding: 12px 16px 12px 0; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.blog-article-title {
    font-size: 16px; font-weight: 600; color: #2c3e50; line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.blog-article-card:hover .blog-article-title { color: #4e6ef2; }
.blog-article-excerpt {
    font-size: 13px; color: #888; line-height: 1.7; margin-bottom: 12px; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.blog-article-meta {
    font-size: 12px; color: #adb5bd; display: flex; gap: 14px; flex-wrap: wrap;
}
.blog-article-meta .fa { margin-right: 3px; }
/* 3列变体（blog_list 页面，纵向卡片） */
.blog-article-grid--3col { grid-template-columns: repeat(5, 1fr); }
.blog-article-grid--3col .blog-article-card { flex-direction: column; }
.blog-article-grid--3col .blog-article-img {
    width: auto; min-height: 0; aspect-ratio: 1 / 1;
    margin: 0; border-radius: 10px 10px 0 0;
}
.blog-article-grid--3col .blog-article-body { padding: 14px 16px; }

/* --- 卡片列表两栏布局（文章列表） --- */
.blog-card-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.blog-card-item {
    display: flex;
    gap: 12px;
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 12px;
    padding: 8px 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s;
    overflow: hidden;
}
.blog-card-item:hover {
    border-color: #bfcfff;
    box-shadow: 0 6px 20px rgba(78, 110, 242, 0.1);
    transform: translateY(-2px);
}
.blog-card-thumb {
    width: 99px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f3ff;
    align-self: stretch;
}
/* 无图时隐藏缩略图区域，保持统一布局 */
.blog-card-thumb--empty {
    display: none;
}
.blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.blog-card-item:hover .blog-card-thumb img {
    transform: scale(1.08);
}
.blog-card-body {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.blog-card-item--noimg .blog-card-body {
    justify-content: flex-start;
}
.blog-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card-item:hover .blog-card-title {
    color: #4e6ef2;
}
.blog-card-excerpt {
    font-size: 12px;
    color: #999;
    line-height: 1.6;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.blog-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
    flex: 1;
}
.blog-card-tag {
    font-size: 11px;
    padding: 0px 7px;
    border-radius: 10px;
    background: #f5f7fa;
    color: #888;
    white-space: nowrap;
}
.blog-card-tags .blog-card-tag:first-child {
    background: #eef1ff;
    color: #4e6ef2;
}
.blog-card-meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #c0c7d6;
    flex-shrink: 0;
    white-space: nowrap;
}
.blog-card-meta .fa {
    margin-right: 2px;
}
@media (max-width: 768px) {
    .blog-card-list { grid-template-columns: 1fr; }
    .blog-card-item { padding: 10px; }
    .blog-card-thumb { width: 100px; }
    .blog-card-title { font-size: 14px; }
}

/* 侧边栏最新文章（左图右文） */
.sidebar-article-list { display: flex; flex-direction: column; gap: 12px; }
.sidebar-article-item {
    display: flex; gap: 10px; align-items: center;
    text-decoration: none; color: #333;
    padding: 8px; margin: -8px; border-radius: 8px;
    transition: background .2s;
}
.sidebar-article-item:hover { background: #f8f9fa; }
.sidebar-article-item:hover .sidebar-article-title { color: #4e6ef2; }
.sidebar-article-img {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: 6px; overflow: hidden; background: #f8f9fa;
    border: 1px solid #ebeef5;
}
.sidebar-article-img img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-article-img--empty {
    display: flex; align-items: center; justify-content: center;
    color: #ccc; font-size: 20px;
}
.sidebar-article-info { flex: 1; min-width: 0; }
.sidebar-article-title {
    font-size: 13px; line-height: 1.4; color: #333;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    transition: color .2s;
}
.sidebar-article-date { margin-top: 4px; font-size: 12px; color: #adb5bd; }

/* Sidebar layout 内的网格列数调整 */
.blog-layout .goods-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.blog-layout .article-grid { grid-template-columns: repeat(2, 1fr); }

/* 首页「推荐商品 / 热门商品 / 最新商品 / 猜你喜欢」：每个板块统一显示 16 件。
   列数在各断点按可用宽度调整；第 17 件及以后不在当前屏显示。
   ⚠️ 列数规则必须带 .goods-home-page 前缀（0,3,0）：否则会被后面的
      @media(max-width:1024px) 里的 `.blog-layout .goods-grid`（0,2,0，auto-fill）
      以及 mobile.css 的 `.goods-home-page .goods-grid` 覆盖。 */
.goods-home-page .home-goods-block .goods-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.home-goods-block .goods-grid > :nth-child(n+17) { display: none; }
@media (max-width: 1199px) and (min-width: 1024px) {
    .goods-home-page .home-goods-block .goods-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1023px) and (min-width: 769px) {
    .goods-home-page .home-goods-block .goods-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    /* 手机端其余商品位是 2 列，这里保持一致 */
    .goods-home-page .home-goods-block .goods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   首页新增板块：限时抢购 / 优惠券 / 活动广告位 / 猜你喜欢
   —— 仍是占位内容的只剩「限时抢购」与「活动广告位」（模板里带 data-placeholder="1"）；
      优惠券与猜你喜欢已接真实数据。换成真数据后不需要再改这里。
   ⚠️ 这些板块都在 .goods-home-page 内，手机端另有 mobile.css 的规则接力。
   ============================================================ */

/* ⚠️ 断掉「横向溢出内容 → 祖先 min-content」的传播链（2026-09-17 手机端整页被撑宽事故）
   背景：秒杀跑马灯轨道用固定像素宽度（flex: 0 0 124px），横滑券列表同理（flex: 0 0 236px），
   这类元素的 min-content = 「所有卡片宽度之和」。块级祖辈只会把这个值原样上报，
   而本主题的 body 是 display:grid，auto 尺寸的轨道以 min-content 为【下限】
   ⇒ 整页被顶到 1608px（视口才 496），手机端出现横向滚动、所有卡片看上去「没适配屏幕」。
   PC 端之所以没事：.blog-main{min-width:0} 恰好把链子截断了；
   手机端 .blog-layout 被改成 display:block，那条 min-width:0 随之失效，链子就接上了。
   修法：把板块自身变成「单列 grid、轨道 min 为 0」——grid 轨道的 min-content 参与方式
   由 minmax(0,1fr) 决定，于是板块的 min-content 归零，往上传播自然也是 0。
   （比给后代加 min-width:0 有效：块级元素的 min-width 本来就不影响 min-content 上报。） */
.goods-home-page .section.home-flash,
.goods-home-page .section.home-coupons {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}


/* --- 博客首页与列表页：帮助中心 --- */
.blog-help-page {
    padding-top: 24px;
    padding-bottom: 44px;
}
.blog-list-help-hero {
    margin-bottom: 24px;
}
.blog-help-hero {
    position: relative;
    display: grid;
    min-height: 297px;
    place-items: center;
    isolation: isolate;
    padding: 48px 30px;
    overflow: hidden;
    border: 1px solid rgba(224, 242, 254, .62);
    border-radius: 18px;
    background:
        radial-gradient(circle at 14% 12%, rgba(125, 211, 252, .5), transparent 30%),
        radial-gradient(circle at 88% 82%, rgba(59, 130, 246, .38), transparent 38%),
        linear-gradient(135deg, #073a85 0%, #1461b2 52%, #082f70 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .24),
        inset 0 -1px 0 rgba(5, 32, 78, .34),
        0 18px 42px rgba(17, 74, 150, .24);
}

.blog-help-hero::before,
.blog-help-hero::after {
    position: absolute;
    z-index: 0;
    content: '';
    pointer-events: none;
}

.blog-help-hero::before {
    inset: 0;
    background:
        linear-gradient(112deg, transparent 24%, rgba(255, 255, 255, .13) 38%, transparent 52%),
        repeating-linear-gradient(135deg, rgba(219, 234, 254, .11) 0 1px, transparent 1px 22px);
    opacity: .72;
}

.blog-help-hero::after {
    top: -72px;
    right: 8%;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(224, 242, 254, .28);
    border-radius: 50%;
    background: rgba(191, 219, 254, .13);
    box-shadow: 0 0 54px rgba(186, 230, 253, .22);
    filter: blur(1px);
}
.blog-help-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
}
.blog-help-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid rgba(224, 242, 254, .38);
    border-radius: 999px;
    background: rgba(255, 255, 255, .11);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
    color: #eaf5ff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;
}
.blog-help-hero h1 {
    margin: 10px 0;
    color: #fff;
    font-size: 38px;
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: .02em;
    text-shadow: 0 2px 14px rgba(3, 24, 62, .3);
}
.blog-help-hero__description {
    margin: 0 0 24px;
    color: rgba(239, 248, 255, .94);
    font-size: 15px;
    line-height: 1.6;
}
.blog-help-search {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: min(100%, 650px);
    height: 48px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .54);
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .72),
        0 12px 28px rgba(3, 37, 91, .25);
    -webkit-backdrop-filter: blur(15px) saturate(135%);
    backdrop-filter: blur(15px) saturate(135%);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.blog-help-search:focus-within {
    border-color: rgba(255, 255, 255, .92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .82),
        0 0 0 3px rgba(186, 230, 253, .2),
        0 14px 30px rgba(3, 37, 91, .3);
}
.blog-help-search .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.blog-help-search > .fa {
    flex: 0 0 auto;
    margin: 0 8px 0 16px;
    color: #3d72b9;
    font-size: 16px;
}
.blog-help-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #20242c;
    font-size: 14px;
}
.blog-help-search input::placeholder { color: #94a3b8; }
.blog-help-search button {
    flex: 0 0 auto;
    min-width: 76px;
    height: 40px;
    margin-right: 4px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--mogaiwuyou-theme-accent, #ff5a1f);
    box-shadow: none;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.blog-help-search button:hover,
.blog-help-search button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .14);
}
.blog-help-categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 900px;
    margin-top: 24px;
}
.blog-help-category-card {
    display: flex;
    flex-direction: column;
    min-height: 128px;
    padding: 20px;
    border: 1px solid #fff;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .03);
    color: #20242c;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.blog-help-category-card:hover,
.blog-help-category-card:focus-visible {
    transform: translateY(-2px);
    border-color: #dbeafe;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
}
.blog-help-category-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #1677ff;
    font-size: 25px;
}
.blog-help-category-card__name {
    margin-top: 16px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}
.blog-help-category-card__count {
    margin-top: 8px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.5;
}
.blog-help-recommendations { margin-top: 34px; }
.blog-help-section-heading {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 18px;
}
.blog-help-section-heading h2 {
    margin: 0;
    color: #20242c;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.4;
}
.blog-help-section-heading p {
    margin: 0;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.5;
}
.blog-help-article-list .blog-card-excerpt--empty { color: #c0c7d6; }
.blog-help-empty {
    display: grid;
    min-height: 370px;
    place-content: center;
    justify-items: center;
    padding: 30px;
    border: 1px solid #e2e9f5;
    border-radius: 18px;
    background: #fff;
    text-align: center;
}
.blog-help-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
    border-radius: 28px;
    background: #eef2ff;
    color: #5b73f3;
    font-size: 48px;
}
.blog-help-empty h3 {
    margin: 24px 0 8px;
    color: #172742;
    font-size: 26px;
}
.blog-help-empty p {
    margin: 0;
    color: #8ca0bb;
    font-size: 16px;
}
.blog-help-recommendations .pagination { margin-top: 28px; }

@media (max-width: 1024px) {
    .blog-help-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
    .blog-help-category-card { min-height: 176px; }
}

@media (max-width: 768px) {
    .blog-help-page {
        padding-top: 14px;
        padding-bottom: 24px;
    }
    .blog-help-hero {
        min-height: 0;
        padding: 32px 16px;
        border-radius: 16px;
    }
    .blog-help-hero__eyebrow {
        font-size: 13px;
    }
    .blog-help-hero h1 {
        margin: 8px 0;
        font-size: 32px;
        line-height: 1.4;
    }
    .blog-help-hero__description {
        margin-bottom: 22px;
        font-size: 14px;
    }
    .blog-help-search {
        width: 100%;
        height: 48px;
    }
    .blog-help-search > .fa {
        margin-left: 14px;
        font-size: 15px;
    }
    .blog-help-search input {
        height: 46px;
        padding: 0 8px;
        font-size: 14px;
    }
    .blog-help-search button {
        min-width: 68px;
        height: 40px;
        padding: 0 17px;
        font-size: 14px;
    }
    .blog-help-categories {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 18px;
    }
    .blog-help-category-card {
        min-height: 0;
        padding: 20px;
    }
    .blog-help-category-card__icon {
        width: 28px;
        height: 28px;
        font-size: 23px;
    }
    .blog-help-category-card__name {
        margin-top: 14px;
        font-size: 17px;
    }
    .blog-help-category-card__count {
        margin-top: 6px;
        font-size: 13px;
    }
    .blog-help-recommendations { margin-top: 28px; }
    .blog-help-section-heading {
        gap: 10px;
        margin-bottom: 16px;
    }
    .blog-help-section-heading h2 { font-size: 22px; }
    .blog-help-section-heading p { font-size: 13px; }
    .blog-help-empty { min-height: 250px; }
    .blog-help-empty__icon {
        width: 78px;
        height: 78px;
        border-radius: 22px;
        font-size: 36px;
    }
    .blog-help-empty h3 {
        margin-top: 18px;
        font-size: 22px;
    }
}
/* --- 全站数据（仅电脑端首页内容板块） --- */
.home-site-stats {
    display: none;
}

@media (min-width: 769px) {
    .home-site-stats {
        display: grid;
        grid-template-columns: auto auto auto minmax(0, 1fr);
        align-items: center;
        height: 74px;
        margin: 0 0 24px;
        padding: 8px 20px;
        overflow: hidden;
        border: 1px solid rgba(126, 164, 221, .18);
        border-radius: 12px;
        background:
            radial-gradient(circle at 76% -60%, rgba(255, 192, 157, .32), transparent 46%),
            linear-gradient(105deg, rgba(255, 255, 255, .98), rgba(247, 251, 255, .96));
        box-shadow: 0 12px 28px rgba(77, 120, 183, .08);
        color: #152642;
    }

    .home-site-stats__main {
        display: flex;
        align-items: center;
        min-width: 0;
        padding-right: 18px;
    }

    .home-site-stats__chart {
        display: inline-flex;
        flex: 0 0 auto;
        width: 34px;
        height: 32px;
        margin-right: 12px;
        color: var(--mogaiwuyou-theme-accent, #ff5a1f);
    }

    .home-site-stats__chart svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    .home-site-stats__label,
    .home-site-stats__unit,
    .home-site-stats__metric > span,
    .home-site-stats__latest-amount {
        color: #43536c;
        font-size: 14px;
        line-height: 1.35;
        white-space: nowrap;
    }

    .home-site-stats__label { margin-right: 8px; }

    .home-site-stats__value {
        margin-right: 8px;
        color: #f52a48;
        font-size: clamp(22px, 1.75vw, 32px);
        line-height: 1;
        letter-spacing: .025em;
        font-variant-numeric: tabular-nums;
    }

    .home-site-stats__metric {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 36px;
        padding: 0 18px;
        border-left: 1px solid rgba(115, 145, 188, .22);
    }

    .home-site-stats__metric > strong {
        color: #152642;
        font-size: 24px;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    .home-site-stats__latest {
        display: flex;
        align-items: center;
        min-width: 0;
        height: 36px;
        padding-left: 18px;
        gap: 8px;
        border-left: 1px solid rgba(115, 145, 188, .22);
    }

    .home-site-stats__latest-icon {
        flex: 0 0 auto;
        color: #f4ae33;
        font-size: 20px;
        line-height: 1;
    }

    .home-site-stats__latest-viewport {
        flex: 1 1 auto;
        min-width: 0;
        height: 36px;
        overflow: hidden;
    }

    .home-site-stats__latest-track {
        transition: transform .35s ease;
        will-change: transform;
    }

    .home-site-stats__latest-item {
        display: flex;
        align-items: center;
        min-width: 0;
        height: 36px;
    }

    .home-site-stats__latest-title {
        min-width: 0;
        overflow: hidden;
        color: #172742;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    a.home-site-stats__latest-title:hover,
    a.home-site-stats__latest-title:focus-visible {
        color: var(--mogaiwuyou-theme-accent, #ff5a1f);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .home-site-stats__latest-amount {
        flex: 0 0 auto;
        margin-left: auto;
        padding-left: 8px;
    }

    .home-site-stats__latest-amount strong {
        color: #f52a48;
        font-size: 15px;
        font-variant-numeric: tabular-nums;
    }
}

@media (max-width: 1199px) and (min-width: 769px) {
    .home-site-stats__metric { padding: 0 12px; }
    .home-site-stats__latest { padding-left: 12px; }
}

/* --- 限时抢购 --- */
/* 卡片本体直接用 .card.goods-card（见「Goods Card」段），这里只管秒杀专有的东西：
   轨道/跑马灯、折扣角标、剩余进度条。 */
.home-flash__meta { display: flex; align-items: center; gap: 8px; margin-left: 16px; margin-right: auto; }
.home-flash__meta-label { font-size: 12px; color: #94a3b8; }
.home-flash__clock { display: inline-flex; align-items: center; gap: 3px; }
.home-flash__clock em {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 4px; box-sizing: border-box;
    background: #2c3e50; color: #fff; border-radius: 4px;
    font-style: normal; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.home-flash__clock i { color: #94a3b8; font-style: normal; font-size: 13px; }
.home-flash--with-announcement .section-header { justify-content: flex-start; }
.home-flash--with-announcement .home-flash__meta { margin-left: 12px; margin-right: 0; }
.home-flash--with-announcement .section-more { margin-left: auto; }
.home-flash__announcement-icon {
    display: inline-flex;
    width: 14px;
    height: 24px;
    flex: 0 0 14px;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    color: var(--mogaiwuyou-theme-accent, #ff5a1f);
    font-size: 13px;
}
.home-flash__announcement {
    display: block;
    flex: 1 1 30em;
    min-width: 0;
    max-width: none;
    height: 24px;
    margin-left: 6px;
    overflow: hidden;
}
.home-flash__announcement .site-announcement__body {
    display: block;
    width: 100%;
    height: 24px;
    padding: 0;
    overflow: hidden;
    background: transparent;
    color: #65748a;
    font-size: 12px;
    line-height: 24px;
}
.home-flash__announcement .site-announcement__track {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 24px;
    overflow: hidden;
    line-height: 24px;
    transform: translate3d(0, 0, 0);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}
.home-flash__announcement .site-announcement__track:not(.is-ready) > *,
.home-flash__announcement .site-announcement__item,
.home-flash__announcement .site-announcement__item > * {
    display: block;
    width: 100%;
    min-width: 0;
    height: 24px;
    min-height: 24px;
    margin: 0 !important;
    overflow: visible;
    color: inherit;
    line-height: 24px !important;
    white-space: nowrap;
}
.home-flash__announcement .site-announcement__track:not(.is-ready) > *:not(:first-child) { display: none; }
.home-flash__announcement .site-announcement__track.is-jumping { transition: none; }
.home-flash__announcement .site-announcement__track a { color: var(--mogaiwuyou-theme-accent, #ff5a1f); text-decoration: none; }
.home-flash__announcement .site-announcement__track a:hover { text-decoration: underline; }

/* 一行从右向左的无限循环（跑马灯）
   结构：.home-flash__list（视口）> .home-flash__track（轨道，宽 max-content）
   JS 按屏幕宽度把卡片复制若干份把轨道铺到至少两屏，CSS 再把轨道匀速左移自身 50%；
   因为两份内容完全一致，位移收尾的瞬间与起点画面重合，衔接处看不出接缝。
   ⚠️ 卡片间距用 margin-right 而不是 gap：gap 只作用在相邻元素之间，轨道末尾会少一个
      间隙，轨道总宽就不再是「两份」的整数倍，-50% 会差半个 gap，循环时会看到轻微跳变。
   ⚠️ 动画只碰 transform，走 GPU 合成层，滚动时不触发重排/重绘，所以不卡顿。 */
.home-flash__list {
    position: relative; overflow: hidden;
    min-width: 0;
    /* contain:inline-size = 自身的行内尺寸不受内容影响（min/max-content 视为 0）。
       跑马灯轨道宽出屏幕几十倍，靠这条彻底禁止它参与祖先的宽度计算；
       不支持该属性的浏览器由上面 .section 的单列 grid 兜底。 */
    contain: inline-size;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
}
.home-flash__track {
    display: flex; align-items: stretch;
    width: max-content;
    backface-visibility: hidden;
    will-change: transform;
    animation: mogaiwuyou-flash-marquee var(--flash-duration, 40s) linear infinite;
}
/* 鼠标悬停 / 键盘聚焦时暂停，方便点进商品；手离开继续（触屏的暂停由页面脚本加 .is-paused） */
.home-flash__list:hover .home-flash__track,
.home-flash__list:focus-within .home-flash__track,
.home-flash__list.is-paused .home-flash__track { animation-play-state: paused; }
.home-flash__track > * { flex: 0 0 180px; margin-right: 14px; }
/* 卡片在移动中不做位移/阴影变化（会触发重绘且顶部会被裁掉 2px），悬停时只留文字反馈
   （.card:hover 的位移与阴影要一起压掉，商品名的变色反馈保留） */
.home-flash__track > .home-flash__item:hover { transform: none; box-shadow: none; }
@keyframes mogaiwuyou-flash-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .home-flash__track { animation: none; }
}
.home-flash__discount {
    position: absolute; top: 8px; left: 8px;
    padding: 4px 9px; border-radius: 4px; font-size: 11px; line-height: 1;
    color: #fff; background: linear-gradient(135deg, #ff7a45, #f5222d);
}
/* 秒杀卡片专属：把商品名与下方「折扣价」小标之间的间距收窄（只影响本板块，
   其它商品卡仍是 .goods-card .card-title 的 margin-bottom:6px） */
.home-flash__item .card-title { margin-bottom: 3px; }
/* 「折扣价」小标：占掉原价格行的分隔线（.card-bottom 的 border-top 挪到这一行上），
   于是视觉仍然是「标题 ─分隔线─ 价格区」，价格区内部多了一行说明文字 */
.home-flash__item .home-flash__pricelabel {
    margin-top: 5px; padding-top: 6px; border-top: 1px solid #f1f3f7;
    font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: .5px;
    color: var(--mogaiwuyou-theme-accent, #ff5a1f);
}
/* 价格行自己不再画分隔线（线已经由上面的小标画了），只留一点上间距 */
.home-flash__item .card-bottom { margin-top: 5px; padding-top: 0; border-top: 0; }

/* --- 优惠券领取 --- */
.home-desktop-search {
    display: none;
}

@media (min-width: 769px) {
    .home-desktop-search {
        display: flex;
        align-items: center;
        min-height: 74px;
        gap: 16px;
        margin-bottom: 24px;
        padding: 16px 20px;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #fff;
    }

    .home-desktop-search__icon-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 34px;
        width: 34px;
        height: 32px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--mogaiwuyou-theme-accent, #ff5a1f);
        cursor: pointer;
    }

    .home-desktop-search__icon-button .fa {
        font-size: 28px;
        line-height: 1;
    }

    .home-desktop-search__icon-button:hover {
        background: rgba(255, 90, 31, .08);
    }

    .home-desktop-search__icon-button:focus-visible {
        outline: 2px solid var(--mogaiwuyou-theme-accent, #ff5a1f);
        outline-offset: 2px;
    }

    .home-desktop-search__label {
        flex-shrink: 0;
        font-weight: 600;
        color: #374151;
    }
    .home-desktop-search__input {
        flex: 1;
        min-width: 0;
        height: 42px;
        padding: 0 14px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font: inherit;
    }

    .home-desktop-search__input:focus-visible {
        outline: 2px solid var(--mogaiwuyou-theme-accent, #ff5a1f);
        outline-offset: 2px;
    }
}

.home-coupons__list {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
    min-width: 0;
    /* 手机端这里会变成「flex 横滑」（卡片固定 236px），min-content 随卡片数增长，
       同秒杀一样会通过 min-content 把页面顶宽，故一并禁止自身参与祖先的宽度计算。 */
    contain: inline-size;
}
/* PC 列数由主题设置控制（仅 2 或 3 列）。 */
.home-coupons__list.home-coupons__list--cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-coupons__list.home-coupons__list--cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-coupon {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; box-sizing: border-box;
    background: #fff; border: 1px solid #ebeef5; border-radius: 10px;
}
.home-coupon::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--mogaiwuyou-theme-accent, #ff5a1f);
}
.home-coupon__amount { flex: 0 0 auto; text-align: center; color: var(--mogaiwuyou-theme-accent, #ff5a1f); white-space: nowrap; }
.home-coupon__amount em { font-style: normal; font-size: 13px; font-weight: 600; margin: 0 2px; }   /* ¥ 前缀 / 折 后缀 */
.home-coupon__amount strong { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.home-coupon__amount span { display: block; margin-top: 3px; font-size: 11px; color: #94a3b8; }
.home-coupon__info { flex: 1 1 auto; min-width: 0; }
.home-coupon__title {
    font-size: 14px; font-weight: 600; color: #2c3e50;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;   /* 券名一行，超长省略 */
}
.home-coupon__valid {
    margin-top: 4px; font-size: 11px; color: #94a3b8;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-coupon__btn {
    flex: 0 0 auto; height: 30px; padding: 0 14px;
    min-width: 78px;                 /* 锁宽：按钮在「立即领取 / 领取中… / 已领取」之间切换时不跳 */
    white-space: nowrap;
    border: 0; border-radius: 999px; cursor: pointer;
    background: var(--mogaiwuyou-theme-accent, #ff5a1f); color: #fff;
    font-family: inherit; font-size: 12.5px; line-height: 1;
    transition: opacity .2s, transform .2s;
}
.home-coupon__btn:hover { opacity: .88; transform: translateY(-1px); }
.home-coupon__btn.is-disabled,
.home-coupon__btn:disabled {
    background: #eef1f6; color: #9aa4b2; cursor: not-allowed;
    opacity: 1; transform: none; box-shadow: none;
}

/* --- 活动广告位 --- */
.home-promos__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-promo {
    display: block; position: relative; overflow: hidden;
    padding: 18px 20px; box-sizing: border-box;
    min-height: 108px; border-radius: 12px; color: #fff;
}
.home-promo--orange { background: linear-gradient(135deg, #ff8f4d, #ff5a1f); }
.home-promo--blue { background: linear-gradient(135deg, #6d8bfd, #4e6ef2); }
.home-promo--green { background: linear-gradient(135deg, #4fd18b, #22a06b); }
.home-promo__tag {
    display: inline-block; padding: 3px 8px; border-radius: 4px;
    background: rgba(255,255,255,.22); font-size: 11px; line-height: 1.2;
}
.home-promo__title { margin-top: 10px; font-size: 18px; font-weight: 700; letter-spacing: -.2px; }
.home-promo__desc { margin-top: 5px; font-size: 12.5px; opacity: .88; }
.home-promo__go {
    position: absolute; right: 18px; bottom: 16px;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; opacity: .9;
}
.home-promo:hover .home-promo__go { opacity: 1; }

/* --- 猜你喜欢 --- */
.home-guess__head { justify-content: center; }
.home-guess__head .section-title { padding-left: 0; }
.home-guess__head .section-title::before { display: none; }   /* 居中标题去掉左侧色条 */
.home-guess__footer { display: flex; justify-content: center; margin-top: 20px; }
.home-guess__btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 22px;
    border: 1px solid #e3e6eb; border-radius: 999px; background: #fff;
    color: #374151; font-family: inherit; font-size: 13px; cursor: pointer;
    transition: border-color .2s, color .2s;
}
.home-guess__btn:hover { border-color: var(--mogaiwuyou-theme-accent, #ff5a1f); color: var(--mogaiwuyou-theme-accent, #ff5a1f); }
.home-guess__btn i { font-size: 12px; }

/* 中等屏幕：收敛列数，别让卡片挤太窄 */
@media (max-width: 1199px) and (min-width: 1024px) {
    .home-flash__track > * { flex-basis: 168px; }
}
@media (max-width: 1023px) and (min-width: 769px) {
    .home-flash__track > * { flex-basis: 156px; }
    /* 中等桌面屏幕统一显示两列。 */
    .home-coupons__list,
    .home-coupons__list.home-coupons__list--cols2,
    .home-coupons__list.home-coupons__list--cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-coupon { padding: 12px 14px; }
    .home-coupon__amount strong { font-size: 26px; }
}

/* --- 商品列表页：仅 PC 使用的卡片布局 --- */
@media (min-width: 769px) {
    .mogaiwuyou-goods-list-body {
        --mogaiwuyou-catalog-blue: #5b94ef;
        --mogaiwuyou-catalog-blue-deep: #376fc9;
        max-width: min(1264px, 100vw);
        min-height: calc(100vh - 64px);
        padding: 30px 18px 64px;
        overflow-x: hidden;
        background: transparent;
    }
    .mogaiwuyou-goods-list-body .site-announcement {
        margin: 0 0 24px;
        border: 1px solid rgba(115, 169, 255, .32);
        border-radius: 18px;
        background: rgba(255, 255, 255, .72);
        box-shadow: 0 18px 42px rgba(74, 130, 214, .12), inset 0 1px rgba(255, 255, 255, .65);
        backdrop-filter: blur(10px);
    }
    .mogaiwuyou-goods-list-layout {
        display: grid;
        grid-template-columns: 340px minmax(0, 1fr);
        align-items: start;
        gap: 20px;
        min-width: 0;
    }
    .mogaiwuyou-goods-list-aside,
    .mogaiwuyou-goods-list-main { min-width: 0; }
    /* 商品列表 PC 左侧分类与参考商城首页统一：一级卡片、二级按钮、图标和计数层级一致。 */
    .mogaiwuyou-goods-list-categories {
        padding: 16px;
        border: 1px solid #e7efea;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 16px 30px rgba(31, 45, 42, .06);
    }
    .mogaiwuyou-goods-list-category-list {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .mogaiwuyou-goods-list-category-group {
        min-width: 0;
    }
    .mogaiwuyou-goods-list-category-parent-row { position: relative; }
    .mogaiwuyou-goods-list-category-link,
    .mogaiwuyou-goods-list-category-child {
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 52px;
        text-decoration: none;
        transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
    }
    /* 一级分类是独立按钮条；二级分类在一级按钮下方单独排列。 */
    .mogaiwuyou-goods-list-category-link {
        gap: 12px;
        padding: 6px 14px;
        border: 1px solid #cbdfff;
        border-radius: 10px;
        background: linear-gradient(135deg, #fff 0%, #f6faff 100%);
        color: #16233b;
        box-shadow: 0 6px 16px rgba(79, 143, 243, .07);
    }
    .mogaiwuyou-goods-list-category-group.has-children .mogaiwuyou-goods-list-category-link {
        padding-right: 55px;
    }
    .mogaiwuyou-goods-list-category-link:hover,
    .mogaiwuyou-goods-list-category-child:hover {
        border-color: #77a9f7;
        background: #edf5ff;
        color: #246dcc;
        box-shadow: 0 10px 22px rgba(79, 143, 243, .14);
    }
    .mogaiwuyou-goods-list-category-link.is-active,
    .mogaiwuyou-goods-list-category-child.is-active {
        border-color: #4f8ff3;
        background: linear-gradient(135deg, #4f8ff3 0%, #76aeff 100%);
        box-shadow: 0 10px 22px rgba(79, 143, 243, .22);
        color: #fff;
    }
    .mogaiwuyou-goods-list-category-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        overflow: hidden;
        border: 1px solid #b8d9ff;
        border-radius: 10px;
        background: #f4f9ff;
        color: #4f8ff3;
        font-size: 16px;
    }
    .mogaiwuyou-goods-list-category-icon img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .mogaiwuyou-goods-list-category-icon img:not(.is-unavailable) + i { opacity: 0; }
    .mogaiwuyou-goods-list-category-text {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
        gap: 2px;
    }
    .mogaiwuyou-goods-list-category-label {
        overflow: hidden;
        color: inherit;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mogaiwuyou-goods-list-category-text small {
        color: #65738b;
        font-size: 12px;
        line-height: 16px;
    }
    .mogaiwuyou-goods-list-category-text small strong { color: #4f8ff3; }
    .mogaiwuyou-goods-list-category-link.is-active .mogaiwuyou-goods-list-category-text small { color: rgba(255, 255, 255, .9); }
    .mogaiwuyou-goods-list-category-link.is-active .mogaiwuyou-goods-list-category-text small strong { color: #fff; }
    .mogaiwuyou-goods-list-category-link.is-active .mogaiwuyou-goods-list-category-icon,
    .mogaiwuyou-goods-list-category-child.is-active .mogaiwuyou-goods-list-category-icon {
        border-color: rgba(255, 255, 255, .7);
        background: rgba(255, 255, 255, .9);
        color: #4f8ff3;
    }
    .mogaiwuyou-goods-list-category-toggle {
        display: inline-flex;
        width: 27px;
        height: 27px;
        flex: 0 0 27px;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #4f8ff3;
        color: #fff;
        cursor: pointer;
        font-size: 12px;
        line-height: 1;
        transition: background .2s ease, transform .2s ease;
    }
    .mogaiwuyou-goods-list-category-toggle:hover { background: #377bdc; }
    .mogaiwuyou-goods-list-category-toggle .fa { transition: transform .2s ease; }
    .mogaiwuyou-goods-list-category-group.is-expanded .mogaiwuyou-goods-list-category-toggle .fa { transform: rotate(180deg); }
    .mogaiwuyou-goods-list-category-children {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 16px 0 4px 14px;
    }
    .mogaiwuyou-goods-list-category-children[hidden] { display: none; }
    .mogaiwuyou-goods-list-category-child {
        gap: 12px;
        padding: 6px 14px;
        border: 1px solid #cbdfff;
        border-radius: 10px;
        background: linear-gradient(135deg, #fff 0%, #f6faff 100%);
        color: #16233b;
        box-shadow: 0 5px 14px rgba(79, 143, 243, .06);
    }
    .mogaiwuyou-goods-list-category-child .mogaiwuyou-goods-list-category-label {
        font-size: 15px;
        font-weight: 500;
    }
    .mogaiwuyou-goods-list-main-head {
        margin-bottom: 16px;
    }
    .mogaiwuyou-goods-list-toolbar,
    .mogaiwuyou-goods-list-products,
    .mogaiwuyou-goods-list-main .empty-state {
        border: 1px solid rgba(115, 169, 255, .32);
        border-radius: 18px;
        background: rgba(255, 255, 255, .70);
        box-shadow: 0 18px 42px rgba(74, 130, 214, .16), inset 0 1px rgba(255, 255, 255, .66);
        backdrop-filter: blur(12px);
    }
    .mogaiwuyou-goods-list-toolbar {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        padding: 12px;
    }
    .mogaiwuyou-goods-list-search {
        position: relative;
        display: flex;
        align-items: center;
        flex: 1 1 270px;
        min-width: 190px;
        gap: 8px;
        min-height: 42px;
        margin: 0;
        padding: 4px 5px 4px 12px;
        border: 1px solid rgba(111, 164, 247, .28);
        border-radius: 12px;
        background: rgba(255, 255, 255, .78);
    }
    .mogaiwuyou-goods-list-search .screen-reader-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .mogaiwuyou-goods-list-search__icon { color: var(--mogaiwuyou-catalog-blue); }
    .mogaiwuyou-goods-list-search input[type="search"] {
        flex: 1 1 auto;
        min-width: 0;
        height: 32px;
        border: 0;
        background: transparent;
        color: #283e5d;
        font: inherit;
        font-size: 13px;
        outline: 0;
    }
    .mogaiwuyou-goods-list-search input[type="search"]::placeholder { color: #98adca; }
    .mogaiwuyou-goods-list-search__submit {
        min-height: 32px;
        padding: 0 12px;
        border: 0;
        border-radius: 9px;
        background: linear-gradient(135deg, #76adff, #548ce8);
        box-shadow: 0 6px 12px rgba(75, 134, 225, .22);
        color: #fff;
        font-size: 12px;
        white-space: nowrap;
    }
    .mogaiwuyou-goods-list-search__submit:hover { background: linear-gradient(135deg, #639df7, #417bd9); }
    .mogaiwuyou-goods-list-sort {
        display: flex;
        flex: 0 1 auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 4px;
        margin: 0;
        white-space: nowrap;
    }
    .mogaiwuyou-goods-list-sort .goods-sort-link {
        min-height: 32px;
        padding: 0 8px;
        border: 1px solid transparent;
        border-radius: 8px;
        background: transparent;
        color: #617b9f;
        font-size: 12px;
        line-height: 32px;
        text-decoration: none;
    }
    .mogaiwuyou-goods-list-sort .goods-sort-link:hover { background: rgba(91, 148, 239, .12); color: var(--mogaiwuyou-catalog-blue-deep); }
    .mogaiwuyou-goods-list-sort .goods-sort-link.active {
        border-color: rgba(91, 148, 239, .18);
        background: linear-gradient(135deg, #6ba5ff, #5088e5);
        box-shadow: 0 5px 12px rgba(75, 134, 225, .18);
        color: #fff;
    }
    .mogaiwuyou-goods-list-products {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 18px;
    }
    .mogaiwuyou-goods-list-product {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr) 144px;
        align-items: center;
        gap: 16px;
        min-height: 112px;
        padding: 12px 16px 12px 12px;
        overflow: hidden;
        border: 1px solid rgba(114, 168, 244, .26);
        border-radius: 17px;
        background: rgba(255, 255, 255, .78);
        box-shadow: 0 8px 20px rgba(71, 126, 210, .08), inset 0 1px rgba(255, 255, 255, .68);
        transition: transform .2s, border-color .2s, box-shadow .2s;
    }
    .mogaiwuyou-goods-list-product:hover {
        transform: translateY(-2px);
        border-color: rgba(91, 148, 239, .60);
        box-shadow: 0 16px 30px rgba(71, 126, 210, .18), inset 0 1px rgba(255, 255, 255, .72);
    }
    .mogaiwuyou-goods-list-product__cover {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 88px;
        height: 88px;
        overflow: hidden;
        border: 1px solid rgba(108, 157, 230, .18);
        border-radius: 14px;
        background: #edf4ff;
    }
    .mogaiwuyou-goods-list-product__cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
    .mogaiwuyou-goods-list-product:hover .mogaiwuyou-goods-list-product__cover img { transform: scale(1.06); }
    .mogaiwuyou-goods-list-product__body { min-width: 0; }
    .mogaiwuyou-goods-list-product__name {
        display: block;
        min-height: 2.9em;
        color: #233954;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.45;
        overflow-wrap: anywhere;
        word-break: break-word;
        text-decoration: none;
        white-space: normal;
        transition: color .16s;
    }
    .mogaiwuyou-goods-list-product__name:hover { color: var(--mogaiwuyou-catalog-blue-deep); }
    .mogaiwuyou-goods-list-product__meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
    .mogaiwuyou-goods-list-product__meta span {
        display: inline-flex;
        align-items: center;
        min-height: 25px;
        padding: 0 9px;
        border: 1px solid rgba(119, 164, 230, .16);
        border-radius: 999px;
        background: rgba(238, 246, 255, .84);
        color: #7591b6;
        font-size: 11px;
        line-height: 1;
    }
    .mogaiwuyou-goods-list-product__meta span:first-child { color: #4d85d8; background: rgba(226, 239, 255, .92); }
    .mogaiwuyou-goods-list-product__foot {
        display: flex;
        align-self: stretch;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        min-width: 0;
    }
    .mogaiwuyou-goods-list-product__price { min-width: 76px; text-align: right; }
    .mogaiwuyou-goods-list-product__price strong { display: block; color: #264770; font-size: 17px; font-weight: 800; white-space: nowrap; }
    .mogaiwuyou-goods-list-product__price del { display: block; margin-top: 3px; color: #9aafc9; font-size: 11px; white-space: nowrap; }
    .mogaiwuyou-goods-list-product__action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        border: 0;
        border-radius: 12px;
        background: linear-gradient(135deg, #75adff, #5087e4);
        box-shadow: 0 8px 16px rgba(70, 130, 224, .24);
        color: #fff;
        text-decoration: none;
        transition: transform .16s, box-shadow .16s, background-color .16s;
    }
    .mogaiwuyou-goods-list-product__action .fa {
        font-size: 28px;
        line-height: 1;
    }
    .mogaiwuyou-goods-list-product__action:hover { transform: translateY(-2px); background: linear-gradient(135deg, #649ffb, #3f78d6); box-shadow: 0 12px 20px rgba(70, 130, 224, .30); color: #fff; }
    .mogaiwuyou-goods-list-main .pagination { margin-top: 22px; }
    .mogaiwuyou-goods-list-main .empty-state { margin: 0; }
    .mogaiwuyou-goods-list-product.is-blocked { opacity: .60; }
    .mogaiwuyou-goods-list-product.is-blocked a { pointer-events: none; }
}

@media (min-width: 769px) and (max-width: 1080px) {
    .mogaiwuyou-goods-list-layout { grid-template-columns: 286px minmax(0, 1fr); gap: 16px; }
    .mogaiwuyou-goods-list-toolbar { flex-wrap: wrap; }
    .mogaiwuyou-goods-list-search { flex-basis: 100%; }
    .mogaiwuyou-goods-list-sort { justify-content: flex-start; }
    .mogaiwuyou-goods-list-products { padding: 14px; }
    .mogaiwuyou-goods-list-product { grid-template-columns: 72px minmax(0, 1fr) 120px; gap: 12px; min-height: 96px; }
    .mogaiwuyou-goods-list-product__cover { width: 72px; height: 72px; }
}

/* --- Search Modal Overlay ---*/
.search-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    z-index: 50000;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}
.search-modal.active {
    display: flex;
    flex-direction: column;
}
.search-modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
}
.search-modal-stage {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px 20px;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.search-modal-body {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    margin: min(16vh, 120px) 0 0;
    padding: 0;
    animation: searchSlideIn 0.2s ease-out;
}
@keyframes searchSlideIn {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}
.search-modal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    justify-content: center;
}
.search-modal-tab {
    padding: 5px 18px; border: none;
    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.6);
    border-radius: 16px; cursor: pointer; font-size: 13px; transition: all 0.2s;
}
.search-modal-tab:hover { background: rgba(255,255,255,0.22); color: #fff; }
.search-modal-tab.active { background: #fff; color: #4e6ef2; }
.search-modal-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.search-modal-bar input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 16px 14px;
    border: none;
    outline: none;
    font-size: 16px;
    background: transparent;
}
.search-modal-bar button {
    padding: 14px 16px;
    border: none;
    background: none;
    color: #4e6ef2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s;
}
.search-modal-bar button:hover { color: #3d5bd9; }
.search-modal-hint {
    text-align: center; margin-top: 14px;
    font-size: 12px; color: rgba(255,255,255,0.35);
}

/* 弹层内表单：抵消 UA / 其它样式对 form 的 min-width:auto */
#searchModal .search-modal-bar {
    min-width: 0;
}
#searchModal .search-modal-bar input {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* --- Search Result Page Tabs --- */
.search-type-tabs {
    display: flex; gap: 0; margin-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
}
.search-type-tab {
    padding: 10px 20px; font-size: 14px; color: #888;
    border-bottom: 2px solid transparent; transition: all 0.2s; margin-bottom: -1px;
}
.search-type-tab:hover { color: #4e6ef2; }
.search-type-tab.active { color: #4e6ef2; border-bottom-color: #4e6ef2; font-weight: 500; }

/* --- Pagination --- */
.pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; margin-top: 32px; padding: 8px 0;
}
.pagination-btn, .pagination-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 8px;
    border: 1px solid #e5e7eb; border-radius: 6px;
    font-size: 14px; color: #333; background: #fff;
    text-decoration: none; transition: all .2s; cursor: pointer;
}
.pagination-btn:hover, .pagination-num:hover { border-color: #4e6ef2; color: #4e6ef2; }
.pagination-num.active {
    background: #4e6ef2; color: #fff; border-color: #4e6ef2;
    font-weight: 600; pointer-events: none;
}
.pagination-btn.disabled {
    color: #ccc; border-color: #eee; cursor: not-allowed; pointer-events: none;
}
.pagination-dots {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; font-size: 14px; color: #999;
    letter-spacing: 1px;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .goods-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); }
    .article-grid { grid-template-columns: repeat(2, 1fr); }
    .detail-layout { grid-template-columns: 340px 1fr; gap: 24px; }
    .blog-layout { grid-template-columns: 1fr 240px; gap: 16px; }
    .blog-layout .goods-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .blog-layout .article-grid { grid-template-columns: 1fr; }
    .blog-article-grid { grid-template-columns: 1fr; }
    .blog-article-grid--3col { grid-template-columns: repeat(3, 1fr); }
    .blog-article-img { width: 92px; min-height: 72px; }
}
/* 平板（769–1199px）：正文保留桌面信息密度，页头切换为抽屉导航，
   防止完整桌面导航与用户区在常见平板宽度互相挤压。 */
@media (min-width: 769px) and (max-width: 1199px) {
    :root {
        --mogaiwuyou-tablet-header-content-h: 60px;
        --header-bar-h: calc(var(--mogaiwuyou-tablet-header-content-h) + env(safe-area-inset-top, 0px));
    }
    .site-header {
        height: var(--header-bar-h);
        padding-top: env(safe-area-inset-top, 0px);
        box-sizing: border-box;
    }
    .site-header .wrapper {
        width: 100%;
        height: var(--mogaiwuyou-tablet-header-content-h);
        max-width: none;
        padding: 0 20px;
        gap: 12px;
        box-sizing: border-box;
    }
    .site-logo { min-width: 0; }
    .site-logo-img { max-width: 180px; }
    .main-nav,
    .header-user-dropdown,
    .header-actions > .header-action-btn { display: none; }
    .header-actions { margin-left: auto; }
    .header-menu-btn {
        display: flex;
        width: 42px;
        height: 42px;
        border: 1px solid #e1e6ef;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
    }
    .header-menu-btn:focus-visible {
        outline: 2px solid var(--mogaiwuyou-theme-accent, #ff5a1f);
        outline-offset: 2px;
    }
    .header-menu-btn.active {
        border-color: var(--mogaiwuyou-theme-accent, #ff5a1f);
        background: var(--mogaiwuyou-theme-accent-soft, rgba(255, 90, 31, .1));
    }
    .header-menu-btn.active .hamburger-line { background: var(--mogaiwuyou-theme-accent, #ff5a1f); }
    .mobile-nav-backdrop {
        display: none;
        position: fixed;
        z-index: 10040;
        top: var(--header-bar-h);
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(15, 23, 42, .45);
    }
    .mobile-nav-backdrop.mobile-nav--shown { display: block; opacity: 0; transition: opacity .28s ease; }
    .mobile-nav-backdrop.mobile-nav--shown.is-open { opacity: 1; }
    .mobile-nav {
        display: none;
        position: fixed;
        z-index: 10050;
        top: var(--header-bar-h);
        right: 0;
        bottom: 0;
        width: min(52vw, 380px);
        max-width: calc(100vw - 48px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overflow-x: hidden;
        overflow-y: auto;
        border: 0;
        border-left: 1px solid #e8ecf7;
        border-radius: 0;
        background: #fff;
        box-shadow: -12px 0 36px rgba(15, 23, 42, .14);
        transform: translateX(105%);
        transition: transform .32s cubic-bezier(.22, 1, .36, 1);
        -webkit-overflow-scrolling: touch;
    }
    .mobile-nav.mobile-nav--shown { display: block; }
    .mobile-nav.mobile-nav--shown.open { transform: translateX(0); }
    .mobile-nav-inner { padding: 16px 18px 30px; }
    .mobile-nav-item { min-height: 50px; }
    .mobile-nav-sub-item { min-height: 44px; }
    .home-desktop-search { gap: 10px; padding: 13px 16px; }
    .detail-layout { grid-template-columns: minmax(280px, 40%) minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 768px) {
    /* 移动端保留独立页头：左侧站点标识，右侧菜单按钮。 */
    :root {
        --mogaiwuyou-mobile-header-content-h: 52px;
        --header-bar-h: calc(var(--mogaiwuyou-mobile-header-content-h) + env(safe-area-inset-top, 0px));
        --mobile-app-nav-h: calc(70px + env(safe-area-inset-bottom, 0px));
    }
    html,
    body {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
    body.mobile-app-nav-visible { padding-bottom: var(--mobile-app-nav-h); }
    .mobile-store-search {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 2px 0;
    }
    .mobile-store-search__form {
        display: flex;
        width: 0;
        height: 40px;
        min-width: 0;
        flex: 1 1 0;
        align-items: center;
        overflow: hidden;
        border: 1px solid #e5e9f2;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .045);
    }
    .mobile-store-search__link { cursor: pointer; }
    .mobile-store-search__icon {
        flex: 0 0 auto;
        margin-left: 13px;
        color: #97a1b1;
        font-size: 14px;
    }
    .mobile-store-search__placeholder {
        min-width: 0;
        flex: 1 1 0;
        padding: 0 10px;
        overflow: hidden;
        color: #a3acba;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-store-service {
        display: inline-flex;
        width: 52px;
        height: 40px;
        flex: 0 0 52px;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0;
        border: 1px solid #e1e6ef;
        border-radius: 12px;
        background: #fff;
        color: #536174;
        font-size: 12px;
        cursor: default;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .045);
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-store-service .fa { color: #4e6ef2; font-size: 13px; }
    .site-footer { display: none; }
    body.auth-theme-page .site-footer {
        display: block;
        margin-top: 24px;
    }
    body.auth-theme-page .mobile-app-nav { display: none !important; }
    body.auth-theme-page .site-footer__services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 20px 0;
    }
    body.auth-theme-page .site-footer__service { gap: 8px; }
    body.auth-theme-page .site-footer__service-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }
    body.auth-theme-page .site-footer__service-title { font-size: 12px; }
    body.auth-theme-page .site-footer__service-desc { font-size: 10px; }
    body.auth-theme-page .site-footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 14px;
        padding: 24px 0;
    }
    body.auth-theme-page .site-footer__col--qr { grid-column: 1 / -1; }
    .site-header {
        display: block;
        position: sticky;
        z-index: 10060;
        top: 0;
        height: var(--header-bar-h);
        padding-top: env(safe-area-inset-top, 0px);
        border-bottom-color: rgba(229, 233, 240, .92);
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 2px 12px rgba(15, 23, 42, .045);
        box-sizing: border-box;
    }
    .site-header.scrolled { box-shadow: 0 4px 18px rgba(15, 23, 42, .09); }

    .mobile-nav,
    .mobile-nav-backdrop { display: none; }
    .detail-breadcrumb,
    .detail-delivery-badge { display: none !important; }
    .detail-mobile-toolbar {
        --detail-toolbar-progress: 0;
        position: fixed;
        z-index: 10020;
        top: var(--header-bar-h);
        right: 0;
        left: 0;
        display: flex;
        height: 44px;
        align-items: center;
        justify-content: space-between;
        padding: 6px 10px;
        background: transparent;
        pointer-events: none;
    }
    .detail-mobile-toolbar::before {
        position: absolute;
        z-index: 0;
        inset: 0;
        border-bottom: 1px solid rgba(229, 233, 240, .9);
        background: #fff;
        box-shadow: 0 3px 14px rgba(15, 23, 42, .08);
        content: '';
        opacity: var(--detail-toolbar-progress);
        pointer-events: none;
        transition: opacity .06s linear;
    }
    .search-mobile-toolbar::before { opacity: 1; }
    .search-mobile-toolbar .detail-mobile-back {
        color: #263244;
        mix-blend-mode: normal;
    }
    .search-mobile-toolbar {
        gap: 8px;
        height: 52px;
        padding: 7px 10px;
    }
    .search-mobile-toolbar__form {
        display: flex;
        min-width: 0;
        height: 36px;
        flex: 1 1 auto;
        align-items: center;
        overflow: hidden;
        border: 1px solid #e1e6ef;
        border-radius: 10px;
        background: #f5f7fa;
        pointer-events: auto;
    }
    .search-mobile-toolbar__input {
        width: 0;
        min-width: 0;
        height: 100%;
        flex: 1 1 0;
        padding: 0 11px;
        border: 0;
        outline: 0;
        background: transparent;
        color: #303b4d;
        font-size: 13px;
        -webkit-appearance: none;
        appearance: none;
    }
    .search-mobile-toolbar__input::-webkit-search-cancel-button { display: none; }
    .search-mobile-toolbar__input::placeholder { color: #9da7b6; }
    .search-mobile-toolbar__submit {
        width: 42px;
        height: 100%;
        flex: 0 0 42px;
        border: 0;
        background: #4e6ef2;
        color: #fff;
        cursor: pointer;
    }
    .search-page {
        padding-top: calc(64px + env(safe-area-inset-top, 0px));
    }
    .search-page > .page-title { display: none; }
    .search-page > .search-box--desktop { display: none; }
    .detail-mobile-back {
        position: static;
        display: flex;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: #fff;
        cursor: pointer;
        mix-blend-mode: difference;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
    }
    .detail-mobile-toolbar > * { position: relative; z-index: 1; }
    .detail-mobile-back svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .detail-mobile-back:active { transform: scale(.92); }
    .detail-mobile-back:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
    .detail-mobile-toolbar__actions {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        pointer-events: auto;
    }
    .mobile-app-nav {
        position: fixed;
        z-index: 10030;
        right: 10px;
        bottom: max(8px, env(safe-area-inset-bottom, 0px));
        left: 10px;
        display: none;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        height: 52px;
        padding: 3px 6px;
        border: 1px solid rgba(226, 230, 238, .88);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 7px 24px rgba(29, 41, 65, .13), 0 2px 6px rgba(29, 41, 65, .05);
    }
    body.mobile-app-nav-visible .mobile-app-nav { display: grid; }
    .mobile-app-nav__item {
        position: relative;
        display: flex;
        min-width: 0;
        height: 44px;
        align-items: center;
        justify-content: center;
        gap: 1px;
        padding: 2px;
        border: 0;
        border-radius: 11px;
        background: transparent;
        color: #8a93a2;
        font-size: 10px;
        line-height: 1.2;
        cursor: pointer;
        transition: color .18s ease, background .18s ease, transform .18s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-app-nav__item .fa {
        display: inline-flex;
        width: 22px;
        height: 22px;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        line-height: 1;
        transition: transform .18s ease;
    }
    .mobile-app-nav__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-app-nav__item.active {
        background: linear-gradient(145deg, #f1f4ff, #e9efff);
        color: #4e6ef2;
        font-weight: 600;
    }
    .mobile-app-nav__item.active .fa { transform: translateY(-1px); }
    .mobile-app-nav__item:active { transform: scale(.95); }
    .goods-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .article-grid { grid-template-columns: 1fr; }
    .detail-layout { grid-template-columns: 1fr; }
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; }
    .blog-article-grid { grid-template-columns: 1fr; }
    .blog-article-grid.blog-article-grid--3col { grid-template-columns: repeat(2, 1fr); }
    /* 以下规则保留桌面结构的响应式尺寸，顶部栏重新启用时仍可直接复用。 */
    .site-header .wrapper {
        height: var(--mogaiwuyou-mobile-header-content-h);
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        max-width: none;
        width: 100%;
        padding-left: 14px;
        padding-right: 14px;
        box-sizing: border-box;
    }
    .site-logo { min-width: 0; flex-shrink: 1; }
    .site-logo-text { font-size: 17px; letter-spacing: 1px; }
    .site-logo-img { max-width: 132px; height: 32px; }
    .header-actions { flex-shrink: 0; margin-left: auto; }
    .header-actions > .header-action-btn { display: none; }
    .main-nav { display: none; }
    .header-menu-btn {
        display: flex;
        width: 40px;
        height: 40px;
        border: 1px solid #e6ebf2;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
    }
    .header-menu-btn:active { transform: scale(.94); }
    .header-menu-btn:focus-visible { outline: 2px solid var(--mogaiwuyou-theme-accent, #ff5a1f); outline-offset: 2px; }
    .header-menu-btn.active { border-color: var(--mogaiwuyou-theme-accent, #ff5a1f); background: var(--mogaiwuyou-theme-accent-soft, rgba(255, 90, 31, .1)); }
    .header-menu-btn.active .hamburger-line { background: var(--mogaiwuyou-theme-accent, #ff5a1f); }
    .header-user-dropdown { display: none; }

    .mobile-nav-backdrop {
        display: none;
        position: fixed;
        top: var(--header-bar-h);
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        z-index: 10040;
        background: rgba(15, 23, 42, 0.45);
    }
    .mobile-nav-backdrop.mobile-nav--shown {
        display: block;
        opacity: 0;
        transition: opacity 0.28s ease;
    }
    .mobile-nav-backdrop.mobile-nav--shown.is-open {
        opacity: 1;
    }

    .mobile-nav {
        display: none;
        position: fixed;
        top: var(--header-bar-h);
        right: 0;
        bottom: 0;
        width: min(86vw, 320px);
        height: auto;
        max-height: none;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border: none;
        border-left: 1px solid #e8ecf7;
        border-radius: 0;
        background: #fff;
        box-shadow: -12px 0 36px rgba(15, 23, 42, 0.14);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 10050;
        transform: translateX(105%);
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .mobile-nav.mobile-nav--shown {
        display: block;
    }
    .mobile-nav.mobile-nav--shown.open {
        transform: translateX(0);
    }
    .mobile-nav-inner { padding: 14px 16px 28px; }
    .mobile-nav-item { min-height: 48px; padding: 12px 14px; }
    .mobile-nav-sub-item { min-height: 42px; padding: 10px 14px 10px 50px; }

    .hero-slide { padding: 40px 16px; }
    .hero-title { font-size: 24px; }
    .hero-carousel { margin-top: 12px; border-radius: 8px; min-height: 200px; }
    .detail-card { padding: 20px; }
    .article-detail { padding: 24px; }

    #searchModal .search-modal-stage {
        padding-left: 12px;
        padding-right: 12px;
    }
    #searchModal .search-modal-body {
        margin-top: max(12px, 8vh);
    }
    #searchModal .search-modal-tab {
        padding: 8px 14px;
        font-size: 13px;
    }
    #searchModal .search-modal-bar input {
        padding: 14px 12px;
    }
    #searchModal .search-modal-bar button {
        padding: 12px 14px;
    }
    #searchModal .search-modal-hint { margin-top: 10px; }

    .detail-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        min-width: 0;
    }
    .detail-gallery {
        align-items: stretch;
        width: 100%;
        min-width: 0;
    }
    .detail-img {
        width: 100%;
        max-width: none;
        margin: 0;
        box-sizing: border-box;
    }
    .detail-info { min-width: 0; }
    .detail-thumbs { width: 100%; min-width: 0; }
    .detail-thumb {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
    }
    .goods-detail-page .detail-gallery-nav { display: none; }

    .goods-detail-page {
        width: calc(100% + 24px);
        margin: 0 -12px;
        padding-top: 50px;
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    }
    .goods-detail-page .detail-card {
        margin: 0 0 10px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .goods-detail-page .detail-layout { gap: 10px; }
    .goods-detail-page .detail-gallery {
        position: relative;
        gap: 8px;
        padding: 0 0 10px;
        overflow: hidden;
        border-radius: 0 0 14px 14px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
    }
    .goods-detail-page .detail-img {
        border: 0;
        border-radius: 0;
        background: #eef1f5;
    }
    .goods-detail-page .detail-thumbs { padding: 0 12px; }
    .goods-detail-page .detail-thumbs-nav[data-thumbs-action="prev"] { left: 16px; }
    .goods-detail-page .detail-thumbs-nav[data-thumbs-action="next"] { right: 16px; }
    .goods-detail-page .detail-info {
        padding: 16px 14px 22px;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
    }
    .goods-detail-page .detail-info > * { order: 10; }
    .goods-detail-page .detail-summary {
        order: 2;
        margin: 0 0 17px;
        padding: 12px 13px;
        border-radius: 9px;
        background: #f7f8fb;
    }
    .goods-detail-page .detail-name {
        margin-bottom: 7px;
        color: #1f2937;
        font-size: 20px;
        line-height: 1.38;
        letter-spacing: -.2px;
    }
    .goods-detail-page .detail-price-box {
        order: 1;
        margin: 0 0 13px;
        /* 手机端圆角 = 桌面 8px 的一半再收一点（5px）。卡片很扁，10px 会显得圆过头 */
        border-radius: 5px;
    }
    .goods-detail-page .detail-price-box__content {
        min-height: 64px;
        flex-wrap: wrap;
        gap: 5px 9px;
        padding: 12px 14px;
    }
    .goods-detail-page .detail-price { font-size: 26px; }
    .goods-detail-page .detail-price-original { font-size: 12px; }
    .goods-detail-page .detail-price-stats { gap: 6px; font-size: 11px; }
    .goods-detail-page .detail-intro {
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: #6f7888;
        font-size: 13px;
        line-height: 1.75;
        overflow-wrap: anywhere;
    }
    .goods-detail-page .spec-section,
    .goods-detail-page .detail-qty-row,
    .goods-detail-page .detail-payment-section,
    .goods-detail-page .detail-actions,
    .goods-detail-page .detail-meta-tabs { margin-bottom: 17px; }
    .goods-detail-page .spec-group { margin-bottom: 13px; }
    .goods-detail-page .spec-btn { padding: 8px 14px; font-size: 13px; }
    .goods-detail-page .detail-qty-row {
        padding-top: 14px;
        /* border-top: 1px solid #f0f2f5; */
    }
    .goods-detail-page .detail-qty-btn,
    .goods-detail-page .detail-qty-input { height: 40px; }
    .goods-detail-page .detail-qty-btn { width: 40px; }
    .goods-detail-page .detail-form-field { margin-bottom: 13px; }
    .goods-detail-page .detail-form-field-input {
        max-width: none !important;
        height: 44px;
        border-width: 1px;
        border-radius: 9px;
        font-size: 14px;
    }
    .goods-detail-page .detail-payment-list { gap: 8px; }
    .goods-detail-page .detail-payment-backdrop {
        position: fixed;
        z-index: 10040;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(15, 23, 42, .42);
        opacity: 0;
        visibility: hidden;
        transition: opacity .22s ease, visibility .22s ease;
    }
    .goods-detail-page .detail-payment-backdrop.is-open { opacity: 1; visibility: visible; }
    .goods-detail-page .detail-payment-section {
        position: fixed;
        z-index: 10050;
        right: 0;
        bottom: 0;
        left: 0;
        max-height: min(70vh, 520px);
        margin: 0;
        padding: 18px 14px calc(18px + env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 18px 18px 0 0;
        background: #fff;
        box-shadow: 0 -12px 36px rgba(15, 23, 42, .16);
        opacity: 0;
        visibility: hidden;
        transform: translateY(105%);
        transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, visibility .28s ease;
        -webkit-overflow-scrolling: touch;
    }
    .goods-detail-page .detail-payment-section.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .goods-detail-page .detail-payment-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
    }
    .goods-detail-page .detail-payment-title {
        margin: 0;
        color: #263244;
        font-size: 16px;
        font-weight: 600;
    }
    .goods-detail-page .detail-payment-sheet-close {
        display: inline-flex;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #f2f4f7;
        color: #77808f;
        cursor: pointer;
    }
    .goods-detail-page .detail-payment-item {
        width: 100%;
        justify-content: flex-start;
        padding: 11px 13px;
        font-size: 14px;
    }
    .goods-detail-page .detail-payment-item img { width: 21px; height: 21px; }
    .goods-detail-page .detail-payment-sheet-actions {
        position: sticky;
        bottom: calc(-18px - env(safe-area-inset-bottom, 0px));
        display: block;
        margin: 16px -14px calc(-18px - env(safe-area-inset-bottom, 0px));
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #edf0f5;
        background: rgba(255, 255, 255, .98);
    }
    .goods-detail-page .detail-payment-confirm {
        width: 100%;
        min-height: 44px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
    }
    .goods-detail-page .detail-actions {
        position: fixed;
        z-index: 10030;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(226, 230, 238, .92);
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 -6px 20px rgba(15, 23, 42, .09);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        text-align: left;
    }
    .goods-detail-page .detail-order-breakdown {
        position: absolute;
        z-index: 4;
        right: 12px;
        bottom: calc(100% + 8px);
        left: 12px;
        display: block;
        padding: 15px 16px 13px;
        border: 1px solid #e8ebf2;
        border-radius: 14px;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 12px 38px rgba(15, 23, 42, .16);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px) scale(.985);
        transform-origin: left bottom;
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
        pointer-events: none;
    }
    .goods-detail-page .detail-order-breakdown::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 62px;
        width: 10px;
        height: 10px;
        border-right: 1px solid #e8ebf2;
        border-bottom: 1px solid #e8ebf2;
        background: #fff;
        transform: rotate(45deg);
    }
    .goods-detail-page .detail-order-breakdown.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
    .goods-detail-page .detail-order-breakdown__title {
        margin-bottom: 9px;
        color: #263244;
        font-size: 14px;
        font-weight: 700;
    }
    .goods-detail-page .detail-order-breakdown__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 29px;
        color: #7b8595;
        font-size: 12px;
    }
    .goods-detail-page .detail-order-breakdown__row strong { color: #3f4a5a; font-weight: 500; }
    .goods-detail-page .detail-order-breakdown__discount strong { color: #22a559; }
    .goods-detail-page .detail-order-breakdown__payable {
        margin-top: 7px;
        padding-top: 10px;
        border-top: 1px solid #edf0f5;
    }
    .goods-detail-page .detail-order-breakdown__payable strong { color: #fa5252; font-size: 17px; font-weight: 700; }
    .goods-detail-page .detail-actions .btn {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
        min-height: 46px;
        margin: 0;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 600;
        box-shadow: 0 5px 14px var(--mogaiwuyou-theme-accent-shadow, rgba(255, 90, 31, .24));
    }
    .goods-detail-page .detail-order-total { display: flex; min-width: 0; flex: 0 1 auto; padding-left: 3px; }
    .goods-detail-page .detail-order-total__label { font-size: 10px; }
    .goods-detail-page .detail-order-total__price {
        overflow: hidden;
        font-size: 18px;
        text-overflow: ellipsis;
    }
    .goods-detail-page .detail-order-total,
    .goods-detail-page .detail-actions .btn { position: relative; z-index: 3; }
    .goods-detail-page .detail-meta-tabs {
        padding-top: 2px;
        border-top: 1px solid #f0f2f5;
    }
    .goods-detail-page .detail-meta { margin-bottom: 0; }
    .goods-detail-page > .detail-related-goods--mobile {
        display: block;
        margin: 10px 0 0;
        padding: 17px 14px 18px;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
    }
    .goods-detail-page .detail-related-goods--mobile .detail-related-goods__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        color: #34435a;
        font-size: 14px;
        font-weight: 600;
    }
    .goods-detail-page .detail-related-goods--mobile .detail-related-goods__head small {
        color: #9aa6b7;
        font-size: 11px;
        font-weight: 400;
    }
    .goods-detail-page .detail-related-goods--mobile .detail-related-goods__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .goods-detail-page .detail-related-goods--mobile .detail-related-goods__card {
        display: block;
        min-width: 0;
        padding: 6px;
        overflow: hidden;
        border: 1px solid #edf0f5;
        border-radius: 9px;
        background: #fff;
        color: inherit;
        text-decoration: none;
    }
    .goods-detail-page .detail-related-goods--mobile .detail-related-goods__cover {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 6px;
        background: #f3f6fa;
    }
    .goods-detail-page .detail-related-goods--mobile .detail-related-goods__cover img,
    .goods-detail-page .detail-related-goods--mobile .detail-related-goods__cover .goods-no-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .goods-detail-page .detail-related-goods--mobile .detail-related-goods__content {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 5px;
        padding: 7px 2px 1px;
    }
    .goods-detail-page .detail-related-goods--mobile .detail-related-goods__name {
        display: -webkit-box;
        overflow: hidden;
        color: #46566c;
        font-size: 12px;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .goods-detail-page .detail-related-goods--mobile .detail-related-goods__price {
        color: #fa5252;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
    }
    .goods-detail-page .detail-meta-row { padding: 9px 0; font-size: 12px; }
    .goods-detail-page .article-detail {
        margin: 10px 0 0 !important;
        padding: 17px 14px 22px;
        border: 0;
        border-radius: 14px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
    }
    .goods-detail-page > .goods-detail-tags {
        margin: 10px 0 0 !important;
        padding: 15px 14px !important;
        border: 0 !important;
        border-radius: 14px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
    }

    body.detail-payment-sheet-open { overflow: hidden; touch-action: none; }

    /* 富文本中的长 URL 没有自然空格；允许链接在任意字符处断行，避免撑出手机屏幕。 */
    .article-detail .detail-body,
    .article-detail .detail-body a {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .article-detail .detail-body a { display: inline; }
}
body.mobile-nav-drawer-open {
    overflow: hidden;
    touch-action: none;
}
/* 搜索打开时锁滚动（与侧滑菜单一致；弹层在 footer 后，避免被顶栏子树层叠盖住） */
body.search-modal-open {
    overflow: hidden;
    touch-action: none;
}
@media (max-width: 480px) {
    .goods-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
    .goods-card .card-body { padding: 10px; }
    .goods-card .price { font-size: 16px; }
    .hero-carousel { margin-left: 12px; margin-right: 12px; }
}

/* 极窄屏：搜索栏两行 grid（与桌面同一套 grid，只改列定义） */
@media (max-width: 400px) {
    #searchModal .search-modal-bar {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    #searchModal .search-modal-bar input {
        border-bottom: 1px solid #eef0f4;
    }
    #searchModal .search-modal-bar button {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
    }
}

/* ============================================================
   评论区
   ============================================================ */
.comment-section {
    margin-top: 16px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #ebeef5;
    padding: 32px 40px;
}
.comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}
.comment-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.comment-title {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
}
.comment-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    font-size: 12px;
    font-weight: 600;
    color: #4e6ef2;
    background: #eef1fd;
    border-radius: 11px;
}
.comment-sort {
    display: flex;
    gap: 2px;
    background: #f5f7fa;
    border-radius: 6px;
    padding: 3px;
}
.comment-sort-btn {
    padding: 5px 14px;
    font-size: 13px;
    color: #999;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s;
    user-select: none;
}
.comment-sort-btn:hover { color: #666; }
.comment-sort-btn.active {
    color: #333;
    background: #fff;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* 评论表单 */
.comment-form-box {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
}
.comment-form-wrapper {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.comment-form-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #e8ecf4, #d6dce8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.comment-form-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.comment-form-avatar i {
    font-size: 18px;
    color: #a0aec0;
}
.comment-form-body { flex: 1; }
.comment-textarea {
    width: 100%;
    min-height: 88px;
    padding: 12px 14px;
    border: 1.5px solid #e4e7ed;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    outline: none;
    transition: border-color .25s, box-shadow .25s;
    font-family: inherit;
    box-sizing: border-box;
    background: #fafbfc;
}
.comment-textarea:focus {
    border-color: #4e6ef2;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(78,110,242,.1);
}
.comment-form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
}
.comment-char-count {
    font-size: 12px;
    color: #c0c4cc;
}
.comment-submit-btn {
    padding: 8px 24px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #4e6ef2;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all .25s;
}
.comment-submit-btn:hover { background: #3d5bd9; box-shadow: 0 4px 12px rgba(78,110,242,.3); }
.comment-submit-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}
.comment-cancel-btn {
    padding: 8px 18px;
    font-size: 13px;
    color: #909399;
    background: #f5f7fa;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
}
.comment-cancel-btn:hover { background: #ebeef5; color: #606266; border-color: #dcdfe6; }

/* 未登录提示 */
.comment-login-tip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    background: #f8f9fc;
    border-radius: 10px;
    border: 1px dashed #dcdfe6;
    font-size: 14px;
    color: #909399;
}
.comment-login-tip i { font-size: 22px; color: #c0c4cc; }
.comment-login-btn {
    margin-left: auto;
    padding: 7px 22px;
    font-size: 13px;
    font-weight: 500;
    color: #4e6ef2;
    border: 1px solid #4e6ef2;
    border-radius: 8px;
    text-decoration: none;
    transition: all .25s;
}
.comment-login-btn:hover {
    background: #4e6ef2;
    color: #fff;
}

/* 评论列表 */
.comment-list { min-height: 60px; }
.comment-loading {
    text-align: center;
    padding: 32px;
    color: #c0c4cc;
    font-size: 14px;
}
.comment-empty {
    text-align: center;
    padding: 48px 20px;
    color: #c0c4cc;
    font-size: 14px;
}

/* 单条评论 */
.comment-item {
    display: flex;
    gap: 14px;
    padding: 20px 0;
    border-bottom: 1px solid #f2f3f5;
}
.comment-item:first-child { padding-top: 0; }
.comment-item:last-child { border-bottom: none; padding-bottom: 0; }
.comment-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #e8ecf4, #d6dce8);
    display: flex;
    align-items: center;
    justify-content: center;
}
.comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.comment-avatar i {
    font-size: 17px;
    color: #a0aec0;
}
.comment-body { flex: 1; min-width: 0; }
.comment-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.comment-author {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}
.comment-reply-to {
    font-size: 13px;
    color: #909399;
}
.comment-reply-to b {
    color: #4e6ef2;
    font-weight: 500;
}
.comment-time {
    font-size: 12px;
    color: #c0c4cc;
}
.comment-content {
    font-size: 14px;
    line-height: 1.75;
    color: #4a4a4a;
    word-break: break-word;
}
.comment-actions {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}
.comment-action-btn {
    font-size: 12px;
    color: #c0c4cc;
    text-decoration: none;
    transition: color .2s;
}
.comment-action-btn:hover { color: #4e6ef2; }
.comment-action-btn i { margin-right: 3px; }

/* 回复评论 */
.comment-replies {
    margin-top: 14px;
    padding: 12px 16px;
    background: #f8f9fc;
    border-radius: 10px;
}
.comment-item--reply {
    padding: 12px 0;
    border-bottom: 1px solid #eef0f4;
}
.comment-item--reply:first-child { padding-top: 0; }
.comment-item--reply:last-child { border-bottom: none; padding-bottom: 0; }
.comment-item--reply .comment-avatar {
    width: 30px;
    height: 30px;
}
.comment-item--reply .comment-avatar i { font-size: 13px; }
.comment-item--reply .comment-content { font-size: 13px; }
.comment-item--reply .comment-author { font-size: 13px; }
.comment-item--reply .comment-meta { margin-bottom: 5px; }

/* 加载更多回复 */
.comment-load-more-replies {
    padding: 10px 0 2px;
}
.comment-load-replies-btn {
    font-size: 13px;
    color: #4e6ef2;
    text-decoration: none;
    font-weight: 500;
    transition: color .2s;
}
.comment-load-replies-btn:hover { color: #3d5bd9; }
.comment-load-replies-btn i { margin-left: 4px; font-size: 11px; }

/* 回复表单 */
.comment-reply-form {
    margin-top: 12px;
    padding: 14px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e4e7ed;
}
.comment-reply-textarea {
    min-height: 64px;
    font-size: 13px;
    background: #fff;
}

/* 评论分页 */
.comment-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f2f3f5;
}
.comment-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
    color: #606266;
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    text-decoration: none;
    transition: all .2s;
}
.comment-page-btn:hover {
    border-color: #4e6ef2;
    color: #4e6ef2;
}
.comment-page-btn.active {
    background: #4e6ef2;
    color: #fff;
    border-color: #4e6ef2;
}
.comment-page-dots {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    color: #c0c4cc;
    font-size: 13px;
}

/* 评论区响应式 */
@media (max-width: 768px) {
    .comment-section { padding: 20px 16px; }
    .comment-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .comment-form-avatar { width: 34px; height: 34px; }
    .comment-form-wrapper { gap: 10px; }
    .comment-avatar { width: 34px; height: 34px; }
    .comment-item--reply .comment-avatar { width: 26px; height: 26px; }
    .comment-replies { padding: 10px 12px; }
    .comment-reply-form { padding: 10px; }
}

/* ============ 标签样式 ============ */

/* 文章详情页标签 */
.detail-tags {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}
.article-tag {
    display: inline-block; padding: 3px 12px;
    font-size: 12px; line-height: 20px;
    color: #5b8ff9; background: #eef3ff;
    border-radius: 12px; text-decoration: none;
    transition: background .2s, color .2s;
}
.article-tag:hover {
    background: #5b8ff9; color: #fff;
}

/* 商品详情页标签（间距调整） */
.goods-detail-tags {
    margin-top: 16px; padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

/* 文章卡片中的标签 */
.blog-article-tags {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-top: 8px;
}
.article-tag-label {
    display: inline-block; padding: 1px 8px;
    font-size: 11px; line-height: 18px;
    color: #5b8ff9; background: #eef3ff;
    border-radius: 9px; white-space: nowrap;
}

/* 侧边栏标签云 */
.sidebar-tag-cloud {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.sidebar-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; font-size: 13px;
    color: #555; background: #f5f7fa;
    border-radius: 14px; text-decoration: none;
    transition: background .2s, color .2s;
}
.sidebar-tag:hover {
    background: #5b8ff9; color: #fff;
}
.sidebar-tag .tag-count {
    font-size: 11px; color: #adb5bd;
    transition: color .2s;
}
.sidebar-tag:hover .tag-count {
    color: rgba(255,255,255,.8);
}

/* ============ 标签详情页 ============ */

/* 标签头部 */
.tag-page-header {
    display: flex; align-items: center; gap: 16px;
    background: #fff; border-radius: 8px; border: 1px solid #ebeef5;
    padding: 24px 28px; margin-bottom: 16px;
}
.tag-page-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, #5b8ff9, #3d6fe0);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tag-page-icon .fa {
    font-size: 22px; color: #fff;
}
.tag-page-name {
    font-size: 22px; font-weight: 700; color: #2c3e50;
    margin: 0 0 4px;
}
.tag-page-count {
    font-size: 13px; color: #adb5bd;
}

/* 标签切换列表 */
.tag-page-related {
    display: flex; flex-wrap: wrap; gap: 8px;
    background: #fff; border-radius: 8px; border: 1px solid #ebeef5;
    padding: 16px 20px; margin-bottom: 16px;
}
.tag-page-item {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 14px; font-size: 13px;
    color: #555; background: #f5f7fa;
    border-radius: 16px; text-decoration: none;
    transition: background .2s, color .2s;
}
.tag-page-item:hover {
    background: #e8edf5; color: #333;
}
.tag-page-item.active {
    background: #5b8ff9; color: #fff;
}
.tag-page-item-count {
    font-size: 11px; color: #adb5bd;
    transition: color .2s;
}
.tag-page-item:hover .tag-page-item-count { color: #888; }
.tag-page-item.active .tag-page-item-count { color: rgba(255,255,255,.8); }

/* 标签页响应式 */
@media (max-width: 768px) {
    .tag-page-header { padding: 16px 18px; gap: 12px; }
    .tag-page-icon { width: 42px; height: 42px; }
    .tag-page-icon .fa { font-size: 18px; }
    .tag-page-name { font-size: 18px; }
    .tag-page-related { padding: 12px 14px; gap: 6px; }
    .tag-page-item { padding: 4px 10px; font-size: 12px; }
}

/* ======== 领券中心 ======== */
.coupon-intro {
    font-size: 13px; color: #999; margin-bottom: 20px;
    display: flex; align-items: center; gap: 6px;
}
.coupon-intro i { color: #4e6ef2; }

.coupon-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 14px;
}
.coupon-card {
    display: flex; background: #fff; border-radius: 10px; overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s, transform 0.2s;
}
.coupon-card:hover { box-shadow: 0 6px 20px rgba(78,110,242,0.12); transform: translateY(-1px); }

/* 左侧大数字块：渐变主色 */
.coupon-card__left {
    width: 130px; flex-shrink: 0;
    background: linear-gradient(135deg, #4e6ef2, #2b7de9);
    color: #fff; padding: 18px 10px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    position: relative;
}
.coupon-card__left::before,
.coupon-card__left::after {
    content: ''; position: absolute; right: -8px; width: 16px; height: 16px;
    background: #f5f6fa; border-radius: 50%;
}
.coupon-card__left::before { top: -8px; }
.coupon-card__left::after { bottom: -8px; }
.coupon-card__value { font-size: 28px; font-weight: 700; letter-spacing: 0.5px; }
.coupon-card__caption { font-size: 12px; opacity: 0.9; margin-top: 4px; }

/* 右侧信息块 */
.coupon-card__right {
    flex: 1; padding: 14px 16px;
    display: flex; flex-direction: column;
    border-left: 2px dashed #e8ecf4;
}
.coupon-card__title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 4px; }
.coupon-card__desc { font-size: 12px; color: #999; line-height: 1.5; margin-bottom: 8px; }
.coupon-card__meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: #999; margin-bottom: 6px; flex-wrap: wrap; }
.coupon-card__tag {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    background: #eef2ff; color: #4e6ef2; font-size: 11px; font-weight: 500;
}
.coupon-card__valid { color: #999; }
.coupon-card__code { font-size: 12px; color: #666; margin-bottom: 10px; }
.coupon-card__code-val { font-family: monospace; color: #4e6ef2; font-weight: 600; }

.coupon-card__actions { display: flex; gap: 8px; margin-top: auto; }
.coupon-btn {
    flex: 1; height: 32px; border: 1px solid transparent; border-radius: 6px;
    font-size: 13px; cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; justify-content: center;
}
.coupon-btn-ghost {
    background: #fff; color: #4e6ef2; border-color: #4e6ef2;
}
.coupon-btn-ghost:hover { background: #eef2ff; }
.coupon-btn-primary {
    background: #4e6ef2; color: #fff;
}
.coupon-btn-primary:hover { background: #3d5ce0; box-shadow: 0 2px 8px rgba(78,110,242,0.3); }
.coupon-btn.is-disabled {
    background: #f0f0f0; color: #999; border-color: #f0f0f0; cursor: not-allowed;
}
.coupon-btn.is-disabled:hover { background: #f0f0f0; box-shadow: none; }

/* 平板页头：客服入口与三横杠菜单保持同一按钮样式；手机端沿用无边框图标。 */
@media (min-width: 769px) and (max-width: 1023px) {
    .header-service-toggle {
        min-height: 42px;
        height: 42px;
        border: 1px solid #e6ebf2;
        border-radius: 12px;
        background: #fff;
        color: #526179;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
        -webkit-tap-highlight-color: transparent;
    }
    .header-service-toggle:active { transform: scale(.94); }
    .header-service-toggle:focus-visible { outline: 2px solid var(--mogaiwuyou-theme-accent, #ff5a1f); outline-offset: 2px; }
    .header-service-dropdown.is-open .header-service-toggle {
        border-color: var(--mogaiwuyou-theme-accent, #ff5a1f);
        background: var(--mogaiwuyou-theme-accent-soft, rgba(255, 90, 31, .1));
    }
    .header-service-toggle__icon { height: 42px; }
}

@media (max-width: 600px) {
    .coupon-grid { grid-template-columns: 1fr; }
    .coupon-card__left { width: 100px; padding: 14px 6px; }
    .coupon-card__value { font-size: 22px; }
}

/* 商品详情页 · 立即购买地址弹层 */
.detail-addr-layer { padding: 16px 20px; }
.detail-addr-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.detail-addr-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px; background: #fff;
    border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer;
    transition: all 0.15s;
}
.detail-addr-item:hover { border-color: #a5b4fc; background: #fafaff; }
.detail-addr-item.is-active { border-color: #7c3aed; background: #faf5ff; box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1); }
.detail-addr-item input[type="radio"] { margin-top: 3px; flex: 0 0 auto; accent-color: #7c3aed; }
.detail-addr-item-body { flex: 1; min-width: 0; font-size: 12.5px; }
.detail-addr-item-head { margin-bottom: 4px; }
.detail-addr-item-head strong { color: #111; font-size: 13px; }
.detail-addr-item-mobile { color: #6b7280; margin-left: 8px; }
.detail-addr-item-default {
    display: inline-block; padding: 1px 6px; margin-left: 6px;
    background: #7c3aed; color: #fff; border-radius: 3px;
    font-size: 10.5px;
}
.detail-addr-item-text { color: #4b5563; line-height: 1.5; word-break: break-all; }
.detail-addr-manage { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 12.5px; color: #7c3aed; }
.detail-addr-manage:hover { text-decoration: underline; }

.detail-addr-form { }
.detail-addr-row { display: flex; gap: 12px; margin-bottom: 12px; }
.detail-addr-row > .detail-addr-field { flex: 1; min-width: 0; margin-bottom: 0; }
.detail-addr-field { margin-bottom: 12px; }
.detail-addr-field > label { display: block; font-size: 12.5px; color: #555; margin-bottom: 5px; }
.detail-addr-input, .detail-addr-textarea, .detail-addr-select {
    width: 100%; box-sizing: border-box;
    padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 5px;
    font-size: 13px; color: #111; background: #fff;
    outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.detail-addr-input:focus, .detail-addr-textarea:focus, .detail-addr-select:focus {
    border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
.detail-addr-textarea { resize: vertical; min-height: 60px; line-height: 1.6; }
.detail-addr-cascade { display: flex; gap: 8px; }
.detail-addr-cascade .detail-addr-select { flex: 1; }
.detail-addr-tip { font-size: 12px; color: #6b7280; }
.detail-addr-tip .fa { color: #f59e0b; margin-right: 3px; }
.detail-addr-tip a { color: #7c3aed; text-decoration: underline; }

/* 详情页选券弹窗 */
.detail-coupon-picker {
    padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.detail-coupon-pick-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border: 1px solid #ebeef5; border-radius: 8px;
    transition: all 0.2s;
}
.detail-coupon-pick-item:hover { border-color: #fa8c16; background: #fff7e6; }
.detail-coupon-pick-value {
    width: 80px; flex-shrink: 0; text-align: center;
    color: #d46b08; font-size: 18px; font-weight: 700;
}
.detail-coupon-pick-main { flex: 1; min-width: 0; }
.detail-coupon-pick-title {
    font-size: 14px; color: #333; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.detail-coupon-pick-meta { font-size: 12px; color: #999; margin-top: 2px; }
.detail-coupon-pick-btn {
    height: 30px; padding: 0 14px; border: none; border-radius: 6px;
    background: #fa8c16; color: #fff; cursor: pointer; font-size: 13px;
    transition: background 0.2s;
}
.detail-coupon-pick-btn:hover { background: #d46b08; }

/* ======== 商品详情页 - 优惠券 ======== */
.detail-coupon {
    margin: 14px 0;
    padding: 12px 14px;
    background: #fff7e6;
    border: 1px solid #ffe7ba;
    border-radius: 8px;
    max-width: 560px;
}
.detail-coupon-title {
    font-size: 13px; color: #d46b08; font-weight: 500;
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.detail-coupon-input-row { display: flex; gap: 8px; margin-bottom: 8px; }
.detail-coupon-input {
    flex: 1; height: 36px; padding: 0 12px; max-width: 330px;
    border: 1.5px solid #e0e0e0; border-radius: 6px;
    font-size: 13px; color: #333; background: #fff; outline: none;
}
.detail-coupon-input:focus {
    border-color: #d46b08; box-shadow: 0 0 0 3px rgba(212,107,8,0.12);
}
.detail-coupon-input[readonly] { background: #fafafa; color: #999; }
.detail-coupon-btn {
    height: 36px; padding: 0 16px; border: none; border-radius: 6px;
    font-size: 13px; cursor: pointer; white-space: nowrap; transition: all 0.2s;
}
.detail-coupon-btn--primary { background: #fa8c16; color: #fff; }
.detail-coupon-btn--primary:hover { background: #d46b08; }
.detail-coupon-btn--ghost { background: #fff; color: #fa8c16; border: 1px solid #fa8c16; }
.detail-coupon-btn--ghost:hover { background: #fff7e6; }
.detail-coupon-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.detail-coupon-choose {
    height: 30px; padding: 0 12px; border: 1px dashed #d46b08; border-radius: 6px;
    background: transparent; color: #d46b08; cursor: pointer;
    font-size: 12px; display: inline-flex; align-items: center; gap: 4px;
    transition: all 0.2s; text-decoration: none;
}
.detail-coupon-choose:hover { background: rgba(212,107,8,0.05); }
/* "去领优惠券"入口：换一种颜色区分于"已领中选择"，视觉上告诉用户这是跳转到另一个页面 */
.detail-coupon-goget { border-color: #1890ff; color: #1890ff; }
.detail-coupon-goget:hover { background: rgba(24,144,255,0.05); color: #1890ff; }
.detail-coupon-guest-tip { font-size: 12px; color: #999; }
.detail-coupon-guest-tip a { color: #fa8c16; }
.detail-coupon-guest-tip a:hover { text-decoration: underline; }
.detail-coupon-applied {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 10px; margin-top: 8px;
    background: #fff; border-radius: 6px; font-size: 12px;
}
.detail-coupon-applied-name { color: #333; font-weight: 500; }
.detail-coupon-applied-saved { color: #fa5252; font-weight: 600; }

/* ======== Hero 按钮组 ======== */
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.hero-btns .btn { display: inline-flex; align-items: center; gap: 6px; }
.btn--outline {
    background: rgba(255,255,255,0.12); color: #fff; border: 1.5px solid rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
}
.btn--outline:hover { background: #fff; color: #4e6ef2; border-color: #fff; }

/* 商品详情页手动优惠券：展示与默认主题一致，券后结算由订单接口完成。 */
.detail-price-primary {
    display: inline-flex;
    align-items: baseline;
    align-self: flex-end;
    gap: 6px;
    min-width: 0;
}
.detail-price-reference {
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
    line-height: 1;
    white-space: nowrap;
}
.detail-price-reference__compares {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.detail-coupon-section {
    margin: 0 0 24px;
}
.detail-coupon-section .detail-coupon {
    margin: 0;
}
@media (max-width: 768px) {
    .goods-detail-page .detail-coupon-section { margin-bottom: 18px; }
    .goods-detail-page .detail-coupon-input { min-width: 0; }
}
/* 桌面端统一页面主体背景：科技感淡蓝色层次。 */
@media (min-width: 769px) {
    html { background: #f4f8ff; }
    body {
        background:
            radial-gradient(circle at 15% 10%, rgba(91, 148, 239, .18), transparent 45%),
            radial-gradient(circle at 85% 0%, rgba(98, 196, 255, .10), transparent 40%),
            linear-gradient(180deg, #f4f8ff 0%, #fff 60%);
    }
    #main,
    .page-body,
    .mogaiwuyou-goods-list-body { background-color: transparent; }
}
/* 分类折叠按钮固定在一级分类框内右侧，避免参与文档流后换行。 */
@media (min-width: 769px) {
    .mogaiwuyou-goods-list-category-parent-row {
        position: relative;
        min-width: 0;
    }
    .mogaiwuyou-goods-list-category-group.has-children .mogaiwuyou-goods-list-category-link {
        padding-right: 55px;
    }
    .mogaiwuyou-goods-list-category-parent-row > .mogaiwuyou-goods-list-category-toggle {
        position: absolute;
        top: 50%;
        right: 14px;
        z-index: 1;
        display: inline-flex;
        width: 27px;
        max-width: none;
        height: 27px;
        margin: 0;
        transform: translateY(-50%);
    }
}

/* --- 博客列表：左侧分类树 --- */
.blog-list-layout {
    display: grid;
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

.blog-list-layout--without-categories {
    grid-template-columns: minmax(0, 1fr);
}

.blog-list-results {
    min-width: 0;
}

.blog-list-category-rail {
    position: sticky;
    top: 88px;
    padding: 16px;
    border: 1px solid #dbe7fb;
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 12px 28px rgba(53, 94, 154, .08);
}

.blog-list-category-rail__title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 12px;
    border-bottom: 1px solid #edf2fb;
    color: #1d3557;
    font-size: 16px;
    font-weight: 700;
}

.blog-list-category-rail__title .fa {
    color: #4e6ef2;
}

.blog-list-category-tree,
.blog-list-category-group,
.blog-list-category-children {
    display: flex;
    flex-direction: column;
}

.blog-list-category-tree {
    gap: 5px;
    padding-top: 10px;
}

.blog-list-category-group,
.blog-list-category-children {
    gap: 4px;
}

.blog-list-category-children {
    padding-left: 16px;
}

.blog-list-category-item {
    display: flex;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 10px;
    color: #4a5a72;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.blog-list-category-item:hover {
    background: #f1f6ff;
    color: #4262cb;
}

.blog-list-category-item--parent {
    min-height: 44px;
    color: #233957;
    font-weight: 600;
}

.blog-list-category-item--child {
    min-height: 37px;
    font-size: 13px;
}

.blog-list-category-item.is-ancestor {
    background: #f7faff;
    color: #4262cb;
}

.blog-list-category-item.is-active {
    background: #5b78ea;
    box-shadow: 0 6px 14px rgba(81, 110, 218, .22);
    color: #fff;
}

.blog-list-category-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    object-fit: cover;
}

.blog-list-category-icon--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef3ff;
    color: #5875dc;
    font-size: 13px;
}

.blog-list-category-item.is-active .blog-list-category-icon--fallback {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.blog-list-category-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-list-category-count {
    flex: 0 0 auto;
    color: #8ca0bf;
    font-size: 12px;
}

.blog-list-category-item.is-active .blog-list-category-count {
    color: rgba(255, 255, 255, .78);
}

@media (max-width: 768px) {
    .blog-list-layout,
    .blog-list-layout--without-categories {
        display: block;
    }

    .blog-list-category-rail {
        position: static;
        margin-bottom: 16px;
        padding: 12px;
        border-radius: 13px;
    }

    .blog-list-category-rail__title {
        padding-bottom: 9px;
        font-size: 15px;
    }

    .blog-list-category-tree {
        flex-direction: row;
        gap: 7px;
        overflow-x: auto;
        padding-top: 9px;
        scrollbar-width: none;
    }

    .blog-list-category-tree::-webkit-scrollbar {
        display: none;
    }

    .blog-list-category-group,
    .blog-list-category-children {
        display: contents;
    }

    .blog-list-category-item,
    .blog-list-category-item--parent,
    .blog-list-category-item--child {
        flex: 0 0 auto;
        min-height: 36px;
        gap: 6px;
        padding: 6px 9px;
        background: #f6f8fc;
        font-size: 13px;
        font-weight: 500;
    }

    .blog-list-category-icon {
        flex-basis: 19px;
        width: 19px;
        height: 19px;
        border-radius: 5px;
    }

    .blog-list-category-icon--fallback {
        font-size: 11px;
    }

    .blog-list-category-count {
        display: none;
    }
}