/* MOGAIWUYOU mobile storefront refresh
 * This file is deliberately isolated from style.css: desktop and checkout layouts
 * continue to use the original theme rules.
 */
.mobile-home-categories { display: none; }
.detail-mobile-services { display: none; }
.mobile-category-toolbar { display: none; }
.mobile-pull-refresh { display: none; }

@media (max-width: 768px) {
    :root {
        /* 主题色由 header.php 读后台「基础配置 → 主题色」注入，缺省回退默认色 #ff5a1f */
        --mogaiwuyou-mobile-accent: var(--mogaiwuyou-theme-accent, #ff5a1f);
        --mogaiwuyou-mobile-accent-soft: var(--mogaiwuyou-theme-accent-soft, rgba(255, 90, 31, .1));
        --mogaiwuyou-mobile-accent-shadow: var(--mogaiwuyou-theme-accent-shadow, rgba(255, 90, 31, .25));
        --mogaiwuyou-mobile-text: #172033;
        --mogaiwuyou-mobile-muted: #8a94a6;
        --mogaiwuyou-mobile-line: #edf0f4;
        --mogaiwuyou-mobile-bg: #f4f6f9;
        --mogaiwuyou-mobile-top-bg: linear-gradient(180deg, rgba(237, 247, 255, .82) 0, rgba(249, 252, 255, .88) 96px, #fff 230px, #fff 100%);
        --mobile-app-nav-h: calc(58px + env(safe-area-inset-bottom, 0px));
    }

    html,
    body {
        background: var(--mogaiwuyou-mobile-bg);
        color: var(--mogaiwuyou-mobile-text);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        -webkit-font-smoothing: antialiased;
        overscroll-behavior-y: contain;
    }

    /* body 是三行 Grid；将唯一列的最小宽度设为 0，避免桌面片段或横滑内容把整页撑出移动端视口。 */
    body { grid-template-columns: minmax(0, 1fr); }
    .site-header,
    #main { min-width: 0; }

    .mobile-pull-refresh {
        position: fixed;
        z-index: 10010;
        top: var(--mogaiwuyou-pull-header-offset, 0px);
        right: 0;
        left: 0;
        display: flex;
        height: var(--mogaiwuyou-pull-content-offset, 0px);
        align-items: flex-start;
        justify-content: center;
        gap: 7px;
        padding: 14px 14px 0;
        overflow: hidden;
        border: 0;
        background: linear-gradient(180deg, #eaf5ff 0, #f4f6f9 100%);
        box-shadow: none;
        color: #667085;
        opacity: 0;
        pointer-events: none;
        transition: opacity .16s ease;
        white-space: nowrap;
        box-sizing: border-box;
    }
    .mobile-pull-refresh.is-visible { opacity: 1; }
    .mobile-pull-refresh__icon {
        position: relative;
        display: grid;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        place-items: center;
        background: transparent;
        color: #758195;
    }
    .mobile-pull-refresh__icon svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .18s ease;
    }
    .mobile-pull-refresh.is-ready .mobile-pull-refresh__icon svg { transform: rotate(180deg); }
    .mobile-pull-refresh.is-refreshing .mobile-pull-refresh__icon svg { visibility: hidden; }
    .mobile-pull-refresh.is-refreshing .mobile-pull-refresh__icon::after {
        content: '';
        position: absolute;
        width: 13px;
        height: 13px;
        border: 2px solid #d6dce5;
        border-top-color: var(--mogaiwuyou-mobile-accent);
        border-radius: 50%;
        animation: mogaiwuyou-mobile-refresh-spin .7s linear infinite;
    }
    .mobile-pull-refresh__text {
        font-size: 12px;
        font-weight: 600;
        line-height: 20px;
    }
    @keyframes mogaiwuyou-mobile-refresh-spin { to { transform: rotate(360deg); } }

    .mobile-pull-refresh-spacer {
        width: 100%;
        height: var(--mogaiwuyou-pull-content-offset, 0px);
        flex: 0 0 auto;
        transition: height .24s cubic-bezier(.22, .72, .3, 1);
    }
    body.mogaiwuyou-pull-dragging .mobile-pull-refresh-spacer { transition: none; }
    body.mogaiwuyou-pull-refreshing .mobile-pull-refresh-spacer { transition-duration: .18s; }

    #main {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: none;
        padding-right: 0;
        padding-left: 0;
        overflow-x: clip;
        box-sizing: border-box;
    }
    #main[data-nav-id="home"] {
        background: var(--mogaiwuyou-mobile-top-bg);
    }
    #main[data-nav-id="goods"] {
        background: linear-gradient(180deg, #eef7ff 0, #fff 130px, #fff 100%);
    }

    /* Top search entry shared by home and catalog. */
    .mobile-store-search {
        position: sticky;
        z-index: 70;
        top: 0;
        display: flex;
        width: auto;
        height: 48px;
        align-items: center;
        gap: 9px;
        margin: 0;
        padding: 6px 14px 4px;
        background: linear-gradient(180deg, rgba(237, 247, 255, .98), rgba(249, 252, 255, .98));
        box-sizing: border-box;
    }
    .mobile-store-search__form {
        height: 36px;
        min-width: 0;
        flex: 1 1 auto;
        padding: 0 13px;
        border: 0;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(41, 68, 102, .05);
        color: #9aa3b2;
    }
    .mobile-store-search__form:active { background: #fff; }
    .mobile-store-search__icon { color: #9aa3b2; font-size: 13px; }
    .mobile-store-search__placeholder { color: #9aa3b2; font-size: 12px; }
    .mobile-store-service {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        box-shadow: none;
        color: #263043;
    }
    .mobile-store-service__icon {
        width: 20px;
        height: 20px;
        overflow: visible;
        color: #667085;
        fill: currentColor;
    }
    .mobile-store-service span { display: none; }

    /* 页头铃铛：主题设置「前台入口 = 页头铃铛」时，**替换**掉上面那个客服按钮
       （两者互斥、出现在同一位置，所以尺寸 / 外边距刻意与 .mobile-store-service 完全一致，
        换来换去不会有位移）。红点是右上角的迷你数字气泡，未读为 0 时不渲染这个 span。 */
    .mobile-store-bell {
        position: relative;
        display: inline-flex;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
        color: #667085;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-store-bell:active { background: rgba(38, 48, 67, .06); }
    .mobile-store-bell__icon {
        width: 20px;
        height: 20px;
        overflow: visible;
        fill: currentColor;
    }
    .mobile-store-bell__badge {
        position: absolute;
        top: 1px;
        right: 0;
        min-width: 15px;
        height: 15px;
        padding: 0 4px;
        box-sizing: border-box;
        border-radius: 8px;
        background: var(--mogaiwuyou-theme-accent, #ff3b30);
        color: #fff;
        font-size: 10px;
        font-weight: 600;
        line-height: 15px;
        text-align: center;
        white-space: nowrap;
        box-shadow: 0 0 0 1.5px #fff;   /* 白描边：压在这个浅色页头上也分得清 */
    }

    /* Category root header follows the reference app: centered title and search action. */
    .mobile-category-toolbar {
        position: sticky;
        z-index: 70;
        top: 0;
        display: grid;
        width: 100%;
        height: 52px;
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        align-items: center;
        padding: 0 12px;
        border-bottom: 0;
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-sizing: border-box;
    }
    .mobile-category-toolbar__title {
        overflow: hidden;
        color: #172033;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-category-toolbar__home,
    .mobile-category-toolbar__search {
        display: flex;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #172033;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-category-toolbar__home {
        justify-self: start;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
    }
    .mobile-category-toolbar__search { justify-self: end; }
    .mobile-category-toolbar__home:active,
    .mobile-category-toolbar__search:active { background: #f3f5f7; }
    .mobile-category-toolbar__search svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

    /* Home hero and notice.
       注意这里必须是**后代选择器**，不能写回 `#main > .hero-carousel`：首页轮播图被
       home_hero_row.php 的 <section class="home-hero-row"> 包了一层，不再直属 #main；
       写成子选择器会让下面这一整套手机端规则（比例 / 内边距 / 遮罩 / 标题 / 按钮 / 圆点）
       全部失效。特异性不变（都是 1-1-0），所以没有副作用。 */
    #main .hero-carousel {
        width: auto;
        /* min-height 归零，完全交给下面的比例决定（style.css 里的 300px 下限是给窄屏
           桌面窗口兜底用的，手机端不需要） */
        min-height: 0;
        /* 16:8，与电脑端一致：375 屏宽下约 347 × 174（16:6 时是 130） */
        aspect-ratio: 16 / 8;
        margin: 8px 14px 13px;
        border: 0;
        border-radius: 12px;
        box-shadow: 0 7px 20px rgba(31, 108, 226, .14);
    }
    #main .hero-carousel .hero-track {
        height: 100%;
        min-height: 100%;
    }
    #main .hero-carousel .hero-slide {
        height: 100%;
        min-height: 100%;
        /* 上下内边距 18px 沿用：16:6（174 → 130 高）时它是为了让描述不贴住按钮，
           现在高度回到 174，余量重新变宽 —— 标题(23×1.25)+下边距(8)+描述(12×1.5)
           约 55px（标题折两行约 84px），按钮 32px 钉在底部，剩余 51px / 折行时 22px，
           不会再贴死。想恢复原来的 22px 也只是视觉偏好，不是必需。 */
        padding: 18px 18px;
        border-radius: inherit;
        box-sizing: border-box;
    }
    /* 原先这里要关掉 style.css 给的 heroFadeIn 淡入动画（手机上淡入会和粘性搜索条打架）。
       现在切换改成了「轨道平移 + 卡片缩放」，已经没有任何 keyframes 动画，
       所以这条删除即可 —— 手机端沿用 style.css 的卡片规则，两端观感一致。 */
    #main .hero-carousel .hero-slide__overlay {
        background: linear-gradient(90deg, rgba(12, 49, 129, .52), rgba(12, 49, 129, .04) 78%);
    }
    #main .hero-carousel .hero-slide__content {
        width: 75%;
        height: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        color: #fff;
        opacity: 1;
        box-sizing: border-box;
    }
    #main .hero-carousel .hero-title {
        margin-bottom: 8px;
        color: #fff;
        font-size: 23px;
        line-height: 1.25;
        text-shadow: 0 2px 8px rgba(4, 28, 79, .24);
    }
    #main .hero-carousel .hero-desc {
        margin: 0 0 22px;
        color: #fff;
        font-size: 12px;
        line-height: 1.5;
        opacity: .96;
    }
    #main .hero-carousel .hero-btns {
        position: absolute;
        bottom: 0;
        left: 0;
    }
    #main .hero-carousel .hero-btns .btn {
        min-height: 32px;
        padding: 6px 15px;
        border-color: rgba(255, 255, 255, .45);
        border-radius: 5px;
        background: rgba(255, 255, 255, .13);
        color: #fff;
        font-size: 11px;
        box-shadow: none;
    }
    #main .hero-carousel .hero-arrow { display: none; }
    #main .hero-carousel .hero-dots { bottom: 9px; }
    #main .hero-carousel .hero-dot { width: 5px; height: 5px; }

    /* 首页公告被 .home-hero-region 包了一层（宽屏下靠它把公告重排到轮播图上方），
       不再是 #main 的直接子元素，所以下面每条公告相关规则都追加一个并列选择器。
       ⚠️ 原选择器一律保留：商品列表页的公告仍是 #main > .wrapper，行为不能变。
       也**不能**图省事把 #main > .wrapper 改成后代选择器 —— hero.php 里的
       .hero-slide__content 同样带 .wrapper 类，会被误命中（白底 + 14px 内边距）。
       新增的选择器只命中包裹层内那一个元素，且相对顺序未变，无副作用。 */
    #main > .wrapper,
    #main > .home-hero-region > .home-announcement-wrapper {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 14px;
        background: #fff;
        box-sizing: border-box;
    }
    #main > .wrapper .site-announcement,
    #main > .home-hero-region > .home-announcement-wrapper .site-announcement {
        height: 34px;
        margin: 0;
        border: 0;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(28, 39, 60, .04);
    }
    #main > .wrapper .site-announcement__head,
    #main > .home-hero-region > .home-announcement-wrapper .site-announcement__head {
        height: 34px;
        padding: 0 9px;
        background: var(--mogaiwuyou-mobile-accent-soft);
        color: var(--mogaiwuyou-mobile-accent);
    }
    #main > .wrapper .site-announcement__head .site-announcement__icon,
    #main > .home-hero-region > .home-announcement-wrapper .site-announcement__head .site-announcement__icon {
        width: 16px;
        height: 16px;
        background: var(--mogaiwuyou-mobile-accent);
        color: #fff;
    }
    #main > .wrapper .site-announcement__title,
    #main > .home-hero-region > .home-announcement-wrapper .site-announcement__title { color: #3d4657; font-size: 11px; }
    #main > .wrapper .site-announcement__body,
    #main > .home-hero-region > .home-announcement-wrapper .site-announcement__body { height: 34px; padding: 0 10px; }
    #main > .home-announcement-wrapper,
    #main > .home-hero-region > .home-announcement-wrapper {
        padding: 8px 14px 4px;
        background: var(--mogaiwuyou-mobile-bg);
    }
    #main > .home-announcement-wrapper .site-announcement,
    #main > .home-hero-region > .home-announcement-wrapper .site-announcement {
        margin: 0;
    }
    .site-announcement--scrolling .site-announcement__body {
        display: flex;
        align-items: center;
    }
    .site-announcement--scrolling .site-announcement__track {
        width: 100%;
        height: 34px;
        min-height: 34px;
        overflow: visible;
    }
    .site-announcement--scrolling .site-announcement__track:not(.is-ready) > *,
    .site-announcement--scrolling .site-announcement__item,
    .site-announcement--scrolling .site-announcement__item > * {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        width: 100%;
        height: 34px;
        min-height: 34px;
        max-height: 34px;
        line-height: normal !important;
    }
    .site-announcement--scrolling .site-announcement__track a {
        color: var(--mogaiwuyou-mobile-accent);
        text-decoration: none;
    }
    /* Home category shortcuts. */
    .mobile-home-categories {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 15px 7px;
        margin: 0;
        padding: 18px 16px 18px;
        background: transparent;
    }
    .mobile-home-category.is-carousel-hidden { display: none; }
    .mobile-home-category {
        display: flex;
        min-width: 0;
        align-items: center;
        flex-direction: column;
        gap: 7px;
        color: #303848;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-home-category__icon {
        display: flex;
        width: 46px;
        height: 46px;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 50%;
        background: transparent;
        box-shadow: none;
        color: #fff;
        font-size: 19px;
    }
    .mobile-home-category--more .mobile-home-category__icon {
        background: linear-gradient(145deg, #aeb8c8, #7f8c9f);
        box-shadow: 0 5px 12px rgba(74, 85, 104, .14);
    }
    .mobile-home-category--custom-icon .mobile-home-category__icon {
        background: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .12)), var(--mogaiwuyou-theme-accent);
        box-shadow: 0 5px 12px rgba(74, 85, 104, .14);
    }
    .mobile-home-category__icon img { width: 100%; height: 100%; object-fit: cover; }
    .mobile-home-category__name {
        display: block;
        max-width: 100%;
        overflow: hidden;
        font-size: 11px;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Mobile home content. */
    .goods-home-page {
        width: 100%;
        margin: 0;
        padding: 2px 14px 18px;
        background: var(--mogaiwuyou-mobile-bg);
        box-sizing: border-box;
    }
    .goods-home-page .blog-layout { display: block; }
    .goods-home-page .blog-sidebar { display: none; }
    .goods-home-page .section {
        margin: 0;
        padding: 0 0 17px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .goods-home-page .section-header { min-height: 38px; margin: 0; }
    .goods-home-page .section-title { color: #202838; font-size: 16px; font-weight: 700; }
    .goods-home-page .section-more { color: #939cab; font-size: 11px; }
    .goods-home-page .goods-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .goods-home-page .goods-card {
        display: flex;
        min-width: 0;
        overflow: hidden;
        flex-direction: column;
        border: 1px solid var(--mogaiwuyou-mobile-line);
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(28, 39, 60, .04);
    }
    .goods-home-page .goods-card .card-img {
        width: 100%;
        height: auto;
        aspect-ratio: 1.72 / 1;
        border-radius: 0;
        background: #f2f4f7;
    }
    .goods-card .goods-badge--auto,
    .goods-card .goods-badge--manual {
        display: none !important;
    }
    .goods-home-page .goods-card .card-body { padding: 8px 8px 9px; }
    /* 标题两行截断（clamp 与 -webkit-box-orient 继承 style.css 的 .goods-card .card-title），
       这里只调手机端的字号行高，并压掉 37px 那档兜底高度（手机端卡片矮一档） */
    .goods-home-page .goods-card .card-title {
        min-height: 34px;
        color: #202838;
        font-size: 12px;
        font-weight: 600;
        line-height: 17px;
        -webkit-line-clamp: 2;
    }
    .goods-home-page .goods-card .card-stats { display: none; }
    .goods-home-page .goods-card .card-bottom { margin-top: 5px; }
    .goods-home-page .goods-card .price { color: var(--mogaiwuyou-mobile-accent); font-size: 15px; }
    .goods-home-page .goods-card .price-original { font-size: 10px; }
    .goods-home-page .goods-card .card-bottom::after {
        content: '\f07a';
        display: inline-flex;
        width: 19px;
        height: 19px;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        border: 1px solid #ffd2c0;
        border-radius: 50%;
        color: var(--mogaiwuyou-mobile-accent);
        font: normal normal normal 10px/1 FontAwesome;
    }

    /* Catalog: narrow top-level category rail + vertical product rows. */
    .goods-list-page {
        width: 100%;
        margin: 0;
        padding: 0 0 18px;
        /* 与右侧商品列表面板同底色，避免底部内边距 / 面板未铺满处露出白边 */
        background: #f8f9fb;
    }
    .goods-list-page .goods-list-breadcrumb { display: none; }
    .goods-list-page .goods-catalog-layout {
        /* 左侧分类栏由 92px 增至 110px（约 +20%）；右侧商品区自动使用剩余宽度。 */
        --mogaiwuyou-category-rail-width: 110px;
        display: grid;
        grid-template-columns: var(--mogaiwuyou-category-rail-width) minmax(0, 1fr);
        gap: 0;
        /* 页面是唯一纵向滚动容器，避免移动端粘性栏叠加内部滚动时发生抖动。 */
        align-items: stretch;
        min-height: calc(100vh - 52px);
        min-height: calc(100dvh - 52px);
        /* 分类栏与商品列表面板同底色，整块铺平（原先在栏宽处分界，白色一侧已改为 #f8f9fb） */
        background: #f8f9fb;
    }
    .goods-list-page .goods-category-panel {
        /* 分类栏随商品列表由页面统一滚动，避免 sticky 与 overflow-y 形成嵌套滚动。 */
        position: static;
        top: auto;
        align-self: stretch;
        width: var(--mogaiwuyou-category-rail-width);
        max-height: none;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: #f8f9fb;
        box-shadow: none;
    }
    .goods-list-page .category-tabs {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 0;
        padding: 0;
    }
    .goods-list-page .category-tabs--sub { display: none; }
    .goods-list-page .category-tab {
        position: relative;
        display: flex;
        width: 100%;
        min-width: 0;
        height: 52px;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        padding: 0 7px 0 10px;
        border: 0;
        border-bottom: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: #525d6e;
        box-sizing: border-box;
    }
    .goods-list-page .category-tab::before {
        content: '';
        position: absolute;
        top: 14px;
        bottom: 14px;
        left: 0;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: transparent;
    }
    .goods-list-page .category-tab.active {
        background: #fff;
        color: var(--mogaiwuyou-mobile-accent);
        font-weight: 600;
    }
    .goods-list-page .category-tab.active::before { background: var(--mogaiwuyou-mobile-accent); }
    .goods-list-page .category-tab-icon {
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px;
        border-radius: 5px !important;
        object-fit: cover;
    }
    .goods-list-page .category-tab-name {
        min-width: 0;
        overflow: hidden;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .goods-list-page .category-tab-count { display: none; }
    .goods-list-page .goods-results-panel {
        min-width: 0;
        /* 商品卡片左右占满：面板不留横向内边距，卡片直接顶到分类栏与屏幕右缘 */
        padding: 0;
        overflow: visible;
        background: #f8f9fb;
    }
    .goods-list-page .goods-sort-bar {
        position: sticky;
        z-index: 30;
        top: 52px;
        display: flex;
        height: 36px;
        align-items: center;
        gap: 18px;
        /* 面板已无横向内边距，排序条本身即通栏；此处 padding 只是排序文字自身的内缩，
           左侧与卡片缩略图（10px）对齐；底色跟随面板，避免粘顶时露出白色条带 */
        width: 100%;
        margin: 0;
        padding: 0 12px 0 10px;
        overflow-x: auto;
        border: 0;
        background: #f8f9fb;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-sizing: border-box;
        scrollbar-width: none;
    }
    .goods-list-page .goods-sort-bar::-webkit-scrollbar { display: none; }
    .goods-list-page .goods-sort-link {
        flex: 0 0 auto;
        padding: 0;
        border: 0;
        border-bottom: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: #687386;
        font-size: 11px;
        line-height: 20px;
    }
    .goods-list-page .goods-sort-link.active {
        background: transparent;
        color: var(--mogaiwuyou-mobile-accent);
    }
    .goods-list-page .goods-sort-link.active::after { display: none; }
    .goods-list-page .goods-results-panel > .empty-state {
        width: 100%;
        margin: 0;
        padding: 62px 8px 30px;
        border: 0 !important;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
        box-sizing: border-box;
    }
    .goods-list-page .goods-results-panel > .empty-state .empty-icon {
        width: auto;
        height: auto;
        margin: 0 auto 13px;
        border-radius: 0;
        background: transparent;
        color: #a1aaba;
        font-size: 27px;
    }
    .goods-list-page .goods-results-panel > .empty-state h3 {
        margin: 0 0 7px;
        color: #4f5b6c;
        font-size: 14px;
        font-weight: 600;
    }
    .goods-list-page .goods-results-panel > .empty-state p {
        margin: 0 auto;
        color: #a1aaba;
        font-size: 11px;
        line-height: 1.6;
    }
    .goods-list-page .goods-grid,
    .search-page .goods-grid {
        display: flex;
        margin: 0 !important;
        flex-direction: column;
        gap: 0;
    }
    .goods-list-page .goods-grid { gap: 2px; }
    .goods-list-page .goods-subcategory-heading {
        position: relative;
        min-height: 34px;
        padding: 8px 12px 5px 34px;
        background: transparent;
        color: #303a4b;
        font-size: 13px;
        font-weight: 700;
        box-sizing: border-box;
    }
    .goods-list-page .goods-subcategory-heading::before {
        position: absolute;
        top: 10px;
        bottom: 7px;
        left: 9px;
        width: 3px;
        border-radius: 2px;
        background: var(--mogaiwuyou-mobile-accent);
        content: '';
    }
    .goods-list-page .goods-grid--grouped .goods-subcategory-heading:not(:first-child) { margin-top: 6px; }
    /* 二级分类标题左侧图形：该分类配了图标就展示图标，没配则沿用左侧色条（::before）。
       两者共用同一个左侧槽位，保证所有分组标题的文字左边界对齐。 */
    .goods-list-page .goods-subcategory-heading--icon::before { display: none; }
    .goods-list-page .goods-subcategory-heading .goods-subcategory-icon {
        position: absolute;
        top: 50%;
        left: 9px;
        width: 16px;
        height: 16px;
        border-radius: 4px;
        object-fit: cover;
        transform: translateY(-50%);
    }
    .goods-list-page .goods-subcategory-heading .goods-subcategory-toggle { width: 30px; height: 30px; }
    /* 滚动加载哨兵：手机端留出底栏高度，避免被 App 式底部导航遮挡 */
    .goods-list-page .goods-infinite {
        min-height: 46px;
        margin-top: 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        color: #a1aaba;
        font-size: 12px;
    }
    .goods-list-page .goods-infinite.is-finished { min-height: 34px; margin-top: 6px; }
    .goods-list-page .goods-card,
    .search-page .goods-card {
        display: grid;
        grid-template-columns: 66px minmax(0, 1fr);
        min-height: 82px;
        padding: 8px 0;
        overflow: visible;
        border: 0;
        /* 行卡片不加圆角（直角通栏行） */
        border-radius: 0;
        background: #fff;
        box-shadow: none;
    }
    .goods-list-page .goods-card {
        position: relative;
        z-index: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        /* 左侧内缩：面板横向内边距已为 0，缩略图不能贴着分类栏，
           让出与分组标题图标（left: 9px）同一条视觉基线 */
        padding-left: 10px;
    }
    .goods-list-page .goods-card .card-img,
    .search-page .goods-card .card-img {
        width: 66px;
        height: 66px;
        align-self: center;
        overflow: hidden;
        border-radius: 12px;
        background: #f3f5f7;
    }
    .goods-list-page .goods-card .card-img img,
    .search-page .goods-card .card-img img {
        color: transparent;
        font-size: 0;
    }
    .goods-list-page .goods-card .card-body,
    .search-page .goods-card .card-body {
        display: flex;
        min-width: 0;
        min-height: 66px;
        flex-direction: column;
        /* 面板横向内边距已为 0（卡片左右占满），文字需自带右侧内缩，
           避免「库存 / 销量」与价格贴到屏幕边缘；缩略图在左不受影响。 */
        padding: 0 12px 0 10px;
    }
    /* 标题两行截断（横排卡片：缩略图在左、文字在右） */
    .goods-list-page .goods-card .card-title,
    .search-page .goods-card .card-title {
        display: -webkit-box;
        min-width: 0;
        min-height: 32px;
        margin: 0;
        overflow: hidden;
        color: #202838;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 16px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .goods-list-page .goods-card .card-stats,
    .search-page .goods-card .card-stats {
        display: flex;
        margin-top: 3px;
        color: #9aa3b2;
        font-size: 9px;
    }
    .goods-list-page .goods-card .card-bottom,
    .search-page .goods-card .card-bottom {
        margin-top: auto;
        padding-top: 0;
        border-top: 0;
    }
    .goods-list-page .goods-card .price,
    .search-page .goods-card .price {
        color: var(--mogaiwuyou-mobile-accent);
        font-size: 14px;
        font-weight: 700;
    }
    .goods-list-page .goods-card .price-original { font-size: 9px; }
    .goods-list-page .goods-badge,
    .search-page .goods-badge {
        top: 4px;
        right: 4px;
        padding: 2px 5px;
        border-radius: 4px;
        font-size: 8px;
    }

    /* Search becomes a clean app page and uses the same product rows. */
    .search-mobile-toolbar,
    .detail-mobile-toolbar {
        height: calc(50px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) 14px 0;
        border-bottom: 1px solid var(--mogaiwuyou-mobile-line);
        background: #fff;
        box-shadow: 0 2px 8px rgba(28, 39, 60, .04);
        box-sizing: border-box;
    }
    .detail-mobile-toolbar::before,
    .search-mobile-toolbar::before { display: none; }
    .detail-mobile-toolbar .detail-mobile-back,
    .search-mobile-toolbar .detail-mobile-back {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        color: #182235;
        mix-blend-mode: normal;
    }
    .detail-mobile-toolbar__title {
        position: absolute !important;
        z-index: 0 !important;
        top: env(safe-area-inset-top, 0px);
        right: 56px;
        left: 56px;
        display: flex;
        height: 49px;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        color: #182235;
        font-size: 15px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
        pointer-events: none;
    }
    .detail-mobile-toolbar__actions { gap: 2px; }
    .detail-toolbar-action {
        display: inline-flex;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        box-shadow: none;
        color: #667085;
        -webkit-tap-highlight-color: transparent;
    }
    .detail-toolbar-action:active { background: #f3f5f7; }
    .detail-toolbar-action--service.mobile-store-service {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
    .detail-toolbar-action--share { cursor: pointer; }
    .detail-toolbar-action--share svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .detail-share-toast {
        position: fixed;
        z-index: 10060;
        bottom: calc(82px + env(safe-area-inset-bottom, 0px));
        left: 50%;
        padding: 8px 14px;
        border-radius: 16px;
        background: rgba(23, 32, 51, .9);
        color: #fff;
        font-size: 12px;
        line-height: 1.4;
        transform: translateX(-50%);
        pointer-events: none;
    }
    body.goods-poster-open { overflow: hidden; }
    .goods-poster-modal[hidden] { display: none !important; }
    .goods-poster-modal {
        position: fixed;
        z-index: 10070;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px;
        box-sizing: border-box;
    }
    .goods-poster-modal__backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(15, 23, 42, .48);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
    .goods-poster-sheet {
        position: relative;
        z-index: 1;
        display: flex;
        width: min(310px, 100%);
        max-height: calc(100dvh - 28px);
        flex-direction: column;
        padding: 0;
        overflow: visible;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        box-sizing: border-box;
    }
    .goods-poster-preview {
        position: relative;
        width: min(284px, 100%);
        aspect-ratio: 750 / 1100;
        min-height: 0;
        margin: 0 auto 15px;
        overflow: visible;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .goods-poster-preview > img[hidden],
    .goods-poster-loading[hidden] { display: none !important; }
    .goods-poster-preview > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .goods-poster-loading {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 9px;
        color: #8a94a6;
        font-size: 12px;
    }
    .goods-poster-loading .fa { color: var(--mogaiwuyou-mobile-accent); font-size: 22px; }
    .goods-poster-actions {
        display: flex;
        flex: 0 0 auto;
        align-items: flex-start;
        justify-content: center;
        gap: 27px;
    }
    .goods-poster-action {
        display: flex;
        width: 54px;
        min-width: 54px;
        height: auto;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 6px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #fff;
        font-size: 11px;
        white-space: nowrap;
    }
    .goods-poster-action__icon {
        display: flex;
        width: 46px;
        height: 46px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #fff;
        color: #667085;
        box-shadow: 0 6px 18px rgba(15, 23, 42, .16);
    }
    .goods-poster-action__icon .fa { font-size: 16px; }
    .goods-poster-action--primary .goods-poster-action__icon {
        background: var(--mogaiwuyou-mobile-accent);
        color: #fff;
    }
    .goods-poster-action__label { color: #fff; text-shadow: 0 1px 4px rgba(15, 23, 42, .4); }
    .goods-poster-action:disabled { cursor: wait; opacity: .5; }
    .search-mobile-toolbar { gap: 9px; }
    .search-mobile-toolbar__form {
        height: 36px;
        border: 0;
        border-radius: 18px;
        background: #f3f5f7;
        box-shadow: none;
    }
    .search-mobile-toolbar__input { padding-left: 13px; font-size: 12px; }
    .search-mobile-toolbar__submit {
        width: 40px;
        flex-basis: 40px;
        border-radius: 0 18px 18px 0;
        background: var(--mogaiwuyou-mobile-accent);
    }
    .search-page {
        width: 100%;
        margin: 0;
        /* 商品行与分类页同一版式：页面横向内边距归零让卡片直角通栏，
           Tab / 搜索提示 / 分组标题等「非行式」元素各自补回 14px 内缩，
           商品行与文章行的左右缩进则由行自身的 padding 承担 */
        padding: calc(62px + env(safe-area-inset-top, 0px)) 0 22px;
        background: #f8f9fb;
        box-sizing: border-box;
    }
    /* 页面横向内边距归零后，下面这些「非行式」元素各自补回 14px 内缩 */
    .search-page .search-type-tabs {
        margin-bottom: 8px;
        /* border-bottom 保持通栏，只把 Tab 本身右移 */
        padding: 0 14px;
        border-bottom: 1px solid var(--mogaiwuyou-mobile-line);
    }
    .search-page .section-header { padding: 0 14px; }
    /* 文章卡片与商品行同一版式：直角通栏白底行 + 2px 缝隙，
       左右内缩也沿用商品行的 10px（缩略图左边界） / 12px（文字右边界） */
    .search-page .article-list { gap: 2px; padding: 0; }
    .search-page .article-card {
        display: block;
        padding: 12px 12px 12px 10px;
        border: 0;
        border-radius: 0;
        background: #fff;
        box-shadow: none;
    }
    .search-page .article-card .card-title {
        display: -webkit-box;
        margin-bottom: 5px;
        overflow: hidden;
        color: #202838;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.45;
        /* 桌面端是 nowrap 单行省略；行式卡片改成最多两行 */
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .search-page .article-card .card-excerpt {
        margin-bottom: 6px;
        color: #9aa3b2;
        font-size: 11.5px;
        line-height: 1.55;
    }
    .search-page .article-card .card-meta {
        gap: 12px;
        color: #a1aaba;
        font-size: 10px;
    }
    /* 行卡片之间的 2px 缝隙 —— 与分类页 `.goods-list-page .goods-grid { gap: 2px }` 一致，
       否则相邻白底直角行会连成一整块，看不出行与行的分界 */
    .search-page .goods-grid { gap: 2px; }
    /* 左侧内缩：页面横向内边距已为 0，缩略图不能贴着屏幕边缘 */
    .search-page .goods-card { padding-left: 10px; }
    .search-page .search-type-tab { color: #778194; font-size: 13px; }
    .search-page .search-type-tab.active {
        border-bottom-color: var(--mogaiwuyou-mobile-accent);
        color: var(--mogaiwuyou-mobile-accent);
    }
    .search-page .search-hint { margin: 8px 0 5px !important; padding: 0 14px; color: #9aa3b2; font-size: 11px; }
    .search-page .empty-state {
        width: 100%;
        margin: 0;
        padding: 62px 8px 30px;
        border: 0 !important;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
        box-sizing: border-box;
    }
    .search-page .empty-state .empty-icon {
        width: auto;
        height: auto;
        margin: 0 auto 13px;
        border-radius: 0;
        background: transparent;
        color: #a1aaba;
        font-size: 27px;
    }
    .search-page .empty-state h3 {
        margin: 0 0 7px;
        color: #4f5b6c;
        font-size: 14px;
        font-weight: 600;
    }
    .search-page .empty-state p {
        margin: 0 auto;
        color: #a1aaba;
        font-size: 11px;
        line-height: 1.6;
    }

    /* Product detail: solid app header, clean content, orange primary action. */
    .goods-detail-page {
        width: 100%;
        margin: 0;
        padding: calc(50px + env(safe-area-inset-top, 0px)) 0 calc(72px + env(safe-area-inset-bottom, 0px));
        background: var(--mogaiwuyou-mobile-bg);
    }
    .goods-detail-page .detail-breadcrumb { display: none; }
    .goods-detail-page .detail-card { margin: 0; background: #fff; }
    .goods-detail-page .detail-layout { gap: 0; }
    .goods-detail-page .detail-gallery {
        gap: 8px;
        padding: 10px 24px 12px;
        border-radius: 0;
        background: #fff;
        box-shadow: none;
        box-sizing: border-box;
    }
    .goods-detail-page .detail-img {
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border: 0;
        border-radius: 10px;
        background: #f2f4f7;
        box-shadow: 0 5px 16px rgba(28, 39, 60, .08);
    }
    .goods-detail-page .detail-thumbs { padding: 1px 0 0; }
    .goods-detail-page .detail-thumb {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 6px;
    }
    .goods-detail-page .detail-thumb.active { border-color: var(--mogaiwuyou-mobile-accent); }
    .goods-detail-page .detail-info {
        padding: 4px 24px 24px;
        border-radius: 0;
        background: #fff;
        box-shadow: none;
    }
    .goods-detail-page .detail-price-box {
        margin-bottom: 0;
        /* ⚠️ 这里**不要**再写 border-radius: 0 —— 会把价格卡片压成一条直角通栏，
           跟电脑端的圆角卡片对不上（用户明确要求「圆角在所有端都生效」）。
           圆角统一由 style.css 给：桌面 8px / ≤768px 5px，D 的通栏顶部圆角与
           内容区底部圆角都是 border-radius: inherit，会跟着父级自动变。 */
        background: #fff;
    }
    .goods-detail-page .detail-price-box__content {
        min-height: 46px;
        /* 左右 12px：原来是 0，价格/划线价贴着卡片边线（用户反馈「文字太靠边」）。
           纵向仍是移动端收紧后的 8 / 5px，不动高度节奏。 */
        padding: 8px 12px 5px;
    }
    .goods-detail-page .detail-price { color: var(--mogaiwuyou-mobile-accent); font-size: 25px; }
    .goods-detail-page .detail-price-original { font-size: 11px; }
    /* 会员身份行（价格上方那一行）/ 价格标签（折前价、市场价）：手机端再收一档字号。
       身份行本身独占一行，跟价格行之间只留盒模型的上间距，不再和价格抢横向空间 */
    .goods-detail-page .detail-price-membership { gap: 6px; }
    .goods-detail-page .detail-price-member { gap: 2px; padding: 2px 6px; font-size: 10px; }
    .goods-detail-page .detail-price-member-save { font-size: 10px; }
    /* 会员等级皮肤（A / C / D）：这里只补「会被手机端规则盖掉」的几处 ——
       渐变 / 光晕都画在 __background 子层，天然不受上面 background:#fff 影响；
       D 的通栏上下圆角用的 inherit，跟着父级圆角走（父级 = style.css 的 5px） */
    .goods-detail-page .detail-price-box--a .detail-price { color: #fff; }
    .goods-detail-page .detail-price-box--d { border: 0; }
    /* 左右 12px 与内容区对齐，否则「黄金会员」标签和「已省 ¥1.40」也贴着卡片边线 */
    .goods-detail-page .detail-price-box__ribbon { padding: 7px 12px; font-size: 11.5px; }
    .goods-detail-page .detail-price-member__dot { width: 5px; height: 5px; }
    .goods-detail-page .detail-price-compare { gap: 2px; }
    .goods-detail-page .detail-price-compare__label { font-size: 10px; }
    .goods-detail-page .detail-price-stats { font-size: 10px; }
    .goods-detail-page .detail-summary {
        margin: 0;
        padding: 2px 0 13px;
        /* border-bottom: 1px solid var(--mogaiwuyou-mobile-line); */
        border-radius: 0;
        background: #fff;
    }
    .goods-detail-page .detail-name {
        margin-bottom: 7px;
        color: #172033;
        font-size: 16px;
        line-height: 1.4;
    }
    .goods-detail-page .detail-intro { color: #7b8596; font-size: 12px; line-height: 1.7; }
    .goods-detail-page .detail-mobile-services {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin: 20px 16px 8px;
        padding: 18px 0 22px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .goods-detail-page .detail-mobile-service {
        display: flex;
        min-width: 0;
        align-items: center;
        flex-direction: column;
        gap: 6px;
        overflow: hidden;
        color: #9aa3b2;
        font-size: 9px;
        text-align: center;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
        white-space: nowrap;
    }
    .goods-detail-page .detail-mobile-service__icon {
        display: flex;
        width: 22px;
        height: 22px;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        background: transparent;
        color: #9aa3b2;
        font-size: 13px;
    }
    /* .goods-detail-page .detail-qty-row { border-top-color: var(--mogaiwuyou-mobile-line); } */
    .goods-detail-page .detail-qty-label,
    .goods-detail-page .detail-payment-title { color: #596476; }
    .goods-detail-page .detail-form-field-input,
    .goods-detail-page .spec-btn { border-color: #e5e8ed; border-radius: 8px; }
    .goods-detail-page .spec-btn.active {
        border-color: var(--mogaiwuyou-mobile-accent);
        background: var(--mogaiwuyou-mobile-accent-soft);
        color: var(--mogaiwuyou-mobile-accent);
    }
    .goods-detail-page .article-detail,
    .goods-detail-page > .goods-detail-tags {
        margin: 0 !important;
        padding: 18px 16px 22px !important;
        border-top: 0 !important;
        border-radius: 0 !important;
        background: #fff;
        box-shadow: none !important;
    }
    .goods-detail-page > .goods-detail-tags { display: none !important; }
    .goods-detail-page .article-detail::before {
        content: '商品说明';
        display: block;
        margin-bottom: 12px;
        color: #172033;
        font-size: 15px;
        font-weight: 700;
    }
    .goods-detail-page .article-detail .detail-body { color: #606b7c; font-size: 13px; line-height: 1.85; }
    .goods-detail-page .detail-actions {
        gap: 10px;
        padding: 7px 14px calc(7px + env(safe-area-inset-bottom, 0px));
        /* border-top-color: var(--mogaiwuyou-mobile-line); */
        background: #fff;
        box-shadow: 0 -4px 14px rgba(28, 39, 60, .08);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .goods-detail-page .detail-actions .btn,
    .goods-detail-page .detail-payment-confirm {
        min-height: 44px;
        border: 0;
        border-radius: 8px;
        /* 底色跟随后台主题色；叠一层「透明 → 微黑」的渐变保留原来的左右明暗层次，
           这样换任何主题色都不需要再写死一组渐变色。 */
        background-color: var(--mogaiwuyou-mobile-accent);
        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .08) 100%);
        box-shadow: 0 5px 13px var(--mogaiwuyou-mobile-accent-shadow);
        color: #fff;
    }
    .goods-detail-page .detail-order-total__price,
    .goods-detail-page .detail-order-breakdown__payable strong { color: var(--mogaiwuyou-mobile-accent); }
    .goods-detail-page .detail-payment-item.active {
        border-color: var(--mogaiwuyou-mobile-accent);
        background: var(--mogaiwuyou-mobile-accent-soft);
        color: var(--mogaiwuyou-mobile-accent);
    }

    /* Payment/order result only. The checkout form intentionally has no matching scope. */
    .order-result-page {
        width: 100%;
        margin: 0;
        padding: calc(64px + env(safe-area-inset-top, 0px)) 14px 30px;
        background: #fff;
        box-sizing: border-box;
    }
    .order-result-page .order-result {
        width: 100%;
        max-width: none;
        margin: 0;
    }
    .order-result-page .order-result-card {
        margin: 0 0 16px;
        padding: 22px 15px;
        border: 0;
        border-radius: 12px;
        background: #fff;
        box-shadow: none;
    }
    .order-result-page .order-result-icon { color: #f5a623; font-size: 60px; }
    .order-result-page .order-result-card--success .order-result-icon { color: #2fc26e; }
    .order-result-page .order-result-title { color: #172033; font-size: 20px; }
    .order-result-page .order-result-desc { color: #7f8998; font-size: 12px; }
    .order-result-page .order-info-card {
        margin-bottom: 10px;
        padding: 15px 14px;
        border: 1px solid var(--mogaiwuyou-mobile-line);
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(28, 39, 60, .04);
    }
    .order-result-page .order-info-title { color: #202838; font-size: 14px; }
    .order-result-page .order-info-item { border-bottom-color: var(--mogaiwuyou-mobile-line); font-size: 12px; }
    .order-result-page .order-goods-img { border-radius: 7px; }
    .order-result-page .order-goods-name { font-size: 12px; }
    .order-result-page .btn-primary {
        width: 100%;
        min-height: 44px;
        border: 0;
        border-radius: 8px;
        background-color: var(--mogaiwuyou-mobile-accent);
        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .08) 100%);
        box-shadow: 0 5px 13px var(--mogaiwuyou-mobile-accent-shadow);
        color: #fff;
        font-weight: 600;
    }

    /* Flat four-item app tab bar, matching the reference visual hierarchy. */
    .mobile-app-nav {
        right: 0;
        bottom: 0;
        left: 0;
        height: var(--mobile-app-nav-h);
        padding: 4px 12px env(safe-area-inset-bottom, 0px);
        border: 0;
        border-top: 1px solid var(--mogaiwuyou-mobile-line);
        border-radius: 0;
        background: #fff;
        box-shadow: 0 -5px 18px rgba(28, 39, 60, .07);
        box-sizing: border-box;
    }
    .mobile-app-nav__item {
        height: 53px;
        gap: 3px;
        flex-direction: column;
        border-radius: 0;
        color: #8d97a7;
        font-size: 10px;
        line-height: 1;
    }
    .mobile-app-nav__icon {
        display: flex;
        width: 21px;
        height: 21px;
        align-items: center;
        justify-content: center;
        transition: transform .18s ease;
    }
    .mobile-app-nav__icon svg {
        display: block;
        width: 21px;
        height: 21px;
        overflow: visible;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .mobile-app-nav__icon .mobile-app-nav__category-svg {
        fill: currentColor;
        stroke: none;
    }
    .mobile-app-nav__item.active {
        background: transparent;
        color: var(--mogaiwuyou-mobile-accent);
        font-weight: 600;
    }
    .mobile-app-nav__item.active .mobile-app-nav__icon { transform: translateY(-1px); }
    .mobile-app-nav__item.active .mobile-app-nav__icon svg { stroke-width: 2.15; }

    body.mobile-app-nav-visible { padding-bottom: var(--mobile-app-nav-h); }

    /* ============================================================
       首页新增板块（限时抢购 / 优惠券 / 活动广告位 / 猜你喜欢）
       秒杀与券在手机端各有处理：秒杀是自动循环滚动（跑马灯）、券 ≥3 张时横滑，
       广告位与猜你喜欢走网格。
       ============================================================ */
    /* 限时抢购已改成一行的自动循环滚动（无滚动条、不需要横滑），
       手机端只调卡片宽度与间距；横滑手势那段留给优惠券。
       结构/动画原理见 style.css「一行从右向左的无限循环」注释。 */
    .home-flash__track > * { flex-basis: 124px; margin-right: 10px; }
    /* 卡片本体已是推荐商品卡样式，手机端的字号/间距由 .goods-home-page .goods-card 那套接管；
       这里只补秒杀专属的两条：卡片更窄，价格行末尾的购物车图标去掉免得挤到换行。 */
    .goods-home-page .home-flash__item .card-bottom::after { display: none; }
    /* 卡片窄（124px）：「折扣价」小标与商品名的间距收紧一档 */
    .goods-home-page .home-flash__item .card-title { margin-bottom: 3px; }
    .home-flash__item .home-flash__pricelabel { margin-top: 4px; padding-top: 5px; font-size: 10.5px; }
    .home-flash__meta { gap: 6px; margin-left: 10px; margin-right: auto; }
    .home-flash--with-announcement .home-flash__meta { margin-left: 8px; margin-right: 0; }
    .home-flash__meta-label { display: none; }      /* 手机端标题行窄，只留数字倒计时 */
    .home-flash__clock em { min-width: 21px; height: 21px; font-size: 12px; }
    .home-flash__clock i { font-size: 12px; }
    .home-flash__announcement {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        height: 21px;
        margin-left: 6px;
    }
    .home-flash__announcement .site-announcement__body,
    .home-flash__announcement .site-announcement__track,
    .home-flash__announcement .site-announcement__track:not(.is-ready) > *,
    .home-flash__announcement .site-announcement__item,
    .home-flash__announcement .site-announcement__item > * {
        min-height: 21px;
        height: 21px;
        font-size: 11px;
        line-height: 21px !important;
    }

    /* 首页优惠券：移动端固定一列一张，由 JS 每 3.5 秒向上翻页；PC 保持后台列数设置。 */
    .home-coupons__viewport {
        --mogaiwuyou-home-coupon-rotator-height: 74px;
        width: 100%;
        min-width: 0;
        height: var(--mogaiwuyou-home-coupon-rotator-height);
        overflow: hidden;
    }
    .home-coupons__viewport .home-coupons__list {
        display: block;
        min-width: 0;
        overflow: visible;
        padding: 0;
        scroll-snap-type: none;
        transform: translate3d(0, 0, 0);
        transition: transform .45s cubic-bezier(.22, 1, .36, 1);
        will-change: transform;
    }
    .home-coupons__viewport .home-coupons__list.is-jumping { transition: none; }
    .home-coupons__viewport .home-coupons__list > .home-coupon {
        width: 100%;
        height: auto;
        margin: 0;
    }
    .home-coupons__viewport.is-ready .home-coupons__list > .home-coupon {
        box-sizing: border-box;
        height: var(--mogaiwuyou-home-coupon-rotator-height);
        min-height: var(--mogaiwuyou-home-coupon-rotator-height);
        max-height: var(--mogaiwuyou-home-coupon-rotator-height);
    }

    .home-coupon { gap: 9px; padding: 11px 12px; }
    .home-coupon__amount strong { font-size: 24px; }
    .home-coupon__title { font-size: 13px; }
    .home-coupon__btn { height: 27px; padding: 0 11px; font-size: 12px; min-width: 62px; }

    .home-promos__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .home-promos__list > :nth-child(n+3) { display: none; }   /* 手机端一排两张够用 */
    .home-promo { padding: 13px 14px; min-height: 94px; }
    .home-promo__title { margin-top: 8px; font-size: 15px; }
    .home-promo__desc { margin-top: 4px; font-size: 11.5px; }
    .home-promo__go { display: none; }
}

@media (max-width: 360px) {
    .goods-list-page .goods-catalog-layout { --mogaiwuyou-category-rail-width: 103px; }
    .goods-list-page .category-tab { padding-left: 7px; }
    .goods-list-page .goods-card,
    .search-page .goods-card { grid-template-columns: 62px minmax(0, 1fr); }
    .goods-list-page .goods-card .card-img,
    .search-page .goods-card .card-img { width: 62px; height: 62px; }
}

/* 软键盘打开时使用可视视口，避免固定搜索层被键盘压缩后错位；16px 输入字号可防止 iOS 自动缩放页面。 */
@media (max-width: 768px) {
    /* iOS 会放大字号低于 16px 的输入控件；详情页与地址弹层统一使用 16px，
       并限制控件宽度和焦点滚动边距，键盘弹出时不再触发布局缩放或横向撑开。 */
    .goods-detail-page .detail-qty-input,
    .goods-detail-page .detail-form-field-input,
    .goods-detail-page .detail-coupon-input,
    .layui-layer .detail-addr-input,
    .layui-layer .detail-addr-select,
    .layui-layer .detail-addr-textarea {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px !important;
        scroll-margin-block: max(16px, env(safe-area-inset-top, 0px));
        touch-action: manipulation;
    }
    .layui-layer .detail-addr-row,
    .layui-layer .detail-addr-cascade { min-width: 0; }
    .layui-layer .detail-addr-textarea { min-height: 72px; }
}

/* 手机与平板的软键盘、缩放和安全区域使用同一套视口规则；布局断点仍分别处理。 */
@media (max-width: 1023px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-padding-top: calc(var(--header-bar-h, 60px) + 12px);
        scroll-padding-bottom: calc(var(--mobile-app-nav-h, 0px) + 12px);
    }
    #searchModal.active {
        top: var(--mogaiwuyou-visual-viewport-top, 0px);
        bottom: auto;
        height: 100vh;
        height: 100dvh;
        height: var(--mogaiwuyou-visual-viewport-height, 100dvh);
    }
    #searchModal .search-modal-stage { min-height: 0; }
    #searchModal .search-modal-body {
        margin-top: var(--mogaiwuyou-search-modal-offset, max(12px, 8vh));
    }
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
        touch-action: manipulation;
    }
    .auth-input-wrap input { scroll-margin-block: 20px; }
    .auth-page {
        min-height: calc(100vh - var(--header-bar-h, 60px) - env(safe-area-inset-bottom, 0px));
        min-height: calc(100dvh - var(--header-bar-h, 60px) - env(safe-area-inset-bottom, 0px));
        min-height: calc(var(--mogaiwuyou-visual-viewport-height, 100dvh) - var(--header-bar-h, 60px) - env(safe-area-inset-bottom, 0px));
        padding: 24px max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    }
    @supports (height: 100svh) {
        .auth-page {
            min-height: calc(var(--mogaiwuyou-visual-viewport-height, 100svh) - var(--header-bar-h, 60px) - env(safe-area-inset-bottom, 0px));
        }
    }
}

@media (max-width: 768px) {
    .goods-detail-page .detail-price-primary { align-self: center; }
    .goods-detail-page .detail-price-reference { white-space: normal; }
}