/* ✅ 这页自己兜底 fm-desktop-only / fm-mobile-only，避免你全局不生效导致“重复组件露出来” */
.gm-page .fm-desktop-only{ display:block; }
.gm-page .fm-mobile-only{ display:none; }
@media (max-width: 980px){
    .gm-page .fm-desktop-only{ display:none !important; }
    .gm-page .fm-mobile-only{ display:block !important; }
}

.gm-page{
    background: var(--fm-bg, #f5f7fb);
    min-height: calc(100vh - 120px);
    padding: 14px 0 calc(24px + env(safe-area-inset-bottom));
}
.gm-shell{
    width: min(1240px, 100vw - 24px);
    margin: 0 auto;
}

/* ===== Desktop breadcrumb ===== */
.gm-bc{
    display:flex; align-items:center; gap:8px;
    color: var(--fm-muted, #64748b);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
    margin: 4px 0 12px;
}
.gm-bc a{ color: inherit; text-decoration:none; }
.gm-bc .sep{ opacity:.6; }

/* ===== Desktop layout ===== */
.gm-layout{
    display:grid;
    grid-template-columns: 240px 1fr;
    gap: 14px;
    align-items:start;
}
.gm-side{
    background:#fff;
    border: 1px solid var(--fm-line, rgba(15,23,42,.10));
    border-radius: 16px;
    padding: 12px;
    position: sticky;
    top: 14px;
}
.gm-side-title{
    color: var(--fm-text, #0f172a);
    font-size: 14px;
    font-weight: 500;
    margin: 2px 0 10px;
}
.gm-side a{
    display:flex;
    align-items:center;
    padding: 10px 10px;
    border-radius: 12px;
    text-decoration:none;
    color: var(--fm-text, #0f172a);
    font-size: 14px;
    font-weight: 400;
}
.gm-side a:hover{ background: rgba(15,23,42,.03); }
.gm-side a.is-active{
    background: rgba(37,99,235,.10);
    color: var(--fm-blue, #2563eb);
    font-weight: 500;
}

/* ===== Desktop header ===== */
.gm-dhead{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 12px;
    margin: 2px 0 12px;
}
.gm-title{
    margin:0;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--fm-text, #0f172a);
}
.gm-sub{
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    color: var(--fm-muted, #64748b);
}

/* ===== Sort segmented（统一一处） ===== */
.gm-sort{
    display:inline-flex;
    background:#fff;
    border: 1px solid var(--fm-line, rgba(15,23,42,.10));
    border-radius: 999px;
    padding: 3px;
    gap: 3px;
    flex: 0 0 auto;
}
.gm-sort a{
    height: 32px;
    padding: 0 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    color: var(--fm-muted, #64748b);
    text-decoration:none;
    white-space: nowrap;
}
.gm-sort a.is-active{
    background: rgba(37,99,235,.10);
    color: var(--fm-blue, #2563eb);
    font-weight: 500;
}

/* ===== Grid cards ===== */
.gm-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.gm-card{
    background:#fff;
    border-radius: 18px;
    overflow:hidden;
    text-decoration:none;
    color: inherit;
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
    border: 1px solid rgba(15,23,42,.06);
    transition: transform .12s ease;
}
.gm-card:hover{ transform: translateY(-1px); }
.gm-card:active{ transform: translateY(1px); }

.gm-media{
    width:100%;
    aspect-ratio: 1 / 1;
    background: rgba(15,23,42,.03);
    display:block;
    object-fit: cover;
}
.gm-body{
    padding: 10px 12px 12px;
}
.gm-name{
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--fm-text, #0f172a);
    display:-webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow:hidden;
}
.gm-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--fm-muted, #64748b);
}
.gm-rate{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    white-space: nowrap;
}
.gm-rate i{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(245,158,11,.75);
    display:inline-block;
}
.gm-sold{ white-space: nowrap; }

/* ===== load tip ===== */
.gm-tip{
    margin-top: 12px;
    text-align:center;
    color: var(--fm-muted, #64748b);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
    padding: 10px 0;
    user-select:none;
}
.gm-tip.is-error{
    color: var(--fm-blue, #2563eb);
    cursor: pointer;
}
.gm-sentinel{ height: 1px; }

/* =========================
   ✅ Mobile: App 风格吸顶区
   ========================= */
@media (max-width: 980px){
    .gm-shell{ width: min(1240px, 100vw - 18px); }

    .gm-layout{ grid-template-columns: 1fr; }
    .gm-side{ display:none; }
    .gm-bc{ display:none; }

    .gm-sticky{
        position: sticky;
        top: 0;
        z-index: 10;
        padding-top: 10px;
        background: var(--fm-bg, #f5f7fb);
    }
    .gm-sticky-inner{
        background: rgba(245,247,251,.92);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(15,23,42,.08);
        padding-bottom: 10px;
    }

    .gm-mrow{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 10px;
        padding: 4px 0 10px;
    }
    .gm-title{ font-size: 18px; }
    .gm-sub{ display:none; }

    .gm-sort a{
        height: 30px;
        padding: 0 10px;
        font-size: 13px;
    }

    .gm-search{
        display:flex;
        align-items:center;
        gap: 10px;
        background:#fff;
        border: 1px solid rgba(15,23,42,.08);
        border-radius: 14px;
        padding: 10px 12px;
    }
    .gm-search svg{
        width: 16px;
        height:16px;
        color: var(--fm-muted, #64748b);
        flex:0 0 auto;
    }
    .gm-search input{
        border:0;
        outline:none;
        width:100%;
        font-size: 14px;
        font-weight: 400;
        color: var(--fm-text, #0f172a);
        background: transparent;
    }

    .gm-cats{
        display:flex;
        gap: 8px;
        overflow:auto;
        padding: 10px 0 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .gm-cats::-webkit-scrollbar{ display:none; }

    .gm-cat{
        flex:0 0 auto;
        height: 32px;
        padding: 0 12px;
        border-radius: 999px;
        background:#fff;
        border: 1px solid rgba(15,23,42,.08);
        color: var(--fm-muted, #64748b);
        font-size: 13px;
        line-height: 32px;
        font-weight: 400;
        text-decoration:none;
        white-space: nowrap;
    }
    .gm-cat.is-active{
        background: rgba(37,99,235,.10);
        border-color: rgba(37,99,235,.18);
        color: var(--fm-blue, #2563eb);
        font-weight: 500;
    }

    .gm-dhead{ display:none; }

    .gm-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding-top: 12px;
    }
    .gm-card{
        border-radius: 16px;
        box-shadow: 0 10px 22px rgba(15,23,42,.06);
    }
    .gm-body{ padding: 10px 10px 12px; }
    .gm-name{ font-size: 13.5px; }
    .gm-meta{ font-size: 12.5px; }
}