/* ==========================================================================
   移动端适配（<=768px）
   桌面版商店是「固定高度白窗 + 窗口内部滚动」；手机上这会导致只看到侧栏和
   一小截内容、其余被困在内部滚动里（微信/手机浏览器里像空窗）。
   这里把窄屏下的白窗改为随「整页」自然滚动，内容全部平铺可见。
   只在 <=768px 生效，桌面布局与视觉零改动。
   ========================================================================== */
@media (max-width: 768px) {
    /* 1) 白窗外壳：取消固定高度 / 宽高比，随内容增高。
          用 !important 同时压过基础样式与 JS 打开详情时注入的内联尺寸。 */
    .app-store-window-shell,
    .app-store-window-shell--elevated {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }

    /* 2) 各层取消内部裁剪 / 内部滚动，交给整页滚动 */
    .app-store-window {
        overflow: visible;
    }

    .app-store-content {
        flex-direction: column;
        overflow: visible;
    }

    .store-main {
        overflow: visible;
        min-height: 0;
        padding: 16px;
    }

    .store-main > .store-main-stack:not([hidden]) {
        min-height: 0;
    }

    /* 3) 侧栏：作为顶部紧凑区，不再是 42vh 的独立滚动块 */
    .sidebar {
        width: 100%;
        max-width: none;
        max-height: none;
        min-height: 0;
        border-right: none;
        border-bottom: 1px solid var(--mm-store-border-soft, rgba(0, 0, 0, 0.08));
    }

    /* 4) 详情栈：同样随整页滚动，取消内部滚动容器 */
    .store-main > #storeDetailStack.store-detail-embed:not([hidden]) {
        overflow: visible;
    }

    #storeDetailStack.store-detail-embed .store-detail-scroll,
    #storeDetailStack .store-detail-scroll.detail-content,
    #storeDetailStack .store-detail-inner.detail-content {
        overflow: visible !important;
        min-height: 0 !important;
    }

    /* 5) 详情打开时解除整页滚动锁：桌面靠窗口内部滚动，手机必须能整页滚动 */
    html.store-detail-open,
    html.store-detail-open body {
        overflow: auto !important;
        overscroll-behavior: auto;
    }

    html.store-detail-open .home-linear-stage,
    .home-linear-stage.home-linear-stage--detail-open {
        overflow: visible !important;
    }

    html.store-detail-open #store-main {
        overflow: visible !important;
    }

    /* 返回工具条：整页滚动下不再吸顶（避免与站点固定顶栏叠置），随内容排布 */
    #storeDetailStack .store-detail-toolbar {
        position: static;
    }
}

/* ==========================================================================
   手机端「专属设计」重绘（<=768px）—— 对标 iOS App Store 的原生观感
   - 去掉 macOS 白窗外壳 / 交通灯，改为整页式布局
   - 顶部大标题 + iOS 圆角搜索；分类做成横向 chips
   - 应用列表 → iOS 竖向分组列表行
   - 深浅色跟随系统（由 store-window.js 在 ≤768px 设置 data-store-theme）
   桌面端（>768px）完全不受影响。
   ========================================================================== */
@media (max-width: 768px) {
    /* —— 外壳整体扁平化：不再像「悬浮的 Mac 窗口」，而是贴边整页 —— */
    .mm-store-shell-wrap {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .mm-store-shell-note {
        display: none !important; /* 顶部内测/微信小条：手机端隐藏，减少干扰 */
    }
    .app-store-window-shell,
    .app-store-window-shell--elevated {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
    }
    .app-store-window {
        border-radius: 0 !important;
        border: none !important;
    }

    /* —— 顶部大标题（沿用 hero，作为「发现」大标题）—— */
    .hero {
        padding: 14px 0 4px !important;
        margin-bottom: 0 !important;
    }
    .hero-title {
        font-size: var(--t-24, 24px) !important;
        margin-bottom: 4px !important;
        letter-spacing: -0.03em;
        text-shadow: none !important;
    }
    .hero-subtitle {
        font-size: var(--t-14, 14px) !important;
        color: #ffffff !important;
    }
    .mm-store-shell-window-slot {
        margin-top: 12px !important;
    }

    /* —— 侧栏 → 顶部 App Bar：隐藏交通灯，搜索/分类置顶 —— */
    .sidebar {
        padding: 12px 18px 8px !important;
        border-bottom: none !important;
        gap: 0 !important;
    }
    .sidebar-window-head {
        display: none !important; /* macOS 交通灯，手机端无意义 */
    }

    /* iOS 圆角搜索框 */
    .sidebar-search {
        margin: 2px 0 12px !important;
        border-radius: 11px !important;
        padding: 10px 12px !important;
        background: var(--mm-store-bg-secondary) !important;
        border: none !important;
    }
    .sidebar-search input {
        font-size: 16px !important; /* ≥16px 防止 iOS Safari 聚焦自动放大 */
    }

    /* 分类：竖排 nav → 横向可滑 chips */
    .sidebar-nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 8px !important;
        padding: 0 0 4px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .sidebar-nav::-webkit-scrollbar { display: none; }
    .sidebar-nav .nav-item {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 8px 15px !important;
        border-radius: 999px !important;
        background: var(--mm-store-bg-secondary) !important;
        border: 1px solid var(--mm-store-border-soft) !important;
        font-size: var(--t-14, 14px) !important;
        font-weight: 500;
        white-space: nowrap;
    }
    .sidebar-nav .nav-item.active {
        background: var(--mm-store-accent, #007aff) !important;
        border-color: var(--mm-store-accent, #007aff) !important;
        color: #fff !important;
    }
    .sidebar-nav .nav-item.active .nav-item__glyph,
    .sidebar-nav .nav-item.active svg { color: #fff !important; stroke: #fff !important; }
    /* chips 里图标略缩，避免过高 */
    .sidebar-nav .nav-item .nav-item__glyph,
    .sidebar-nav .nav-item .nav-item__glyph-img { width: 16px !important; height: 16px !important; }

    /* —— 侧栏底部：隐藏桌面工具条（主题/刷新/账户图标），保留下载 & 账户卡片 —— */
    .sidebar-footer {
        margin-top: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    .sidebar-toolbar { display: none !important; }

    /* 下载 Mac 客户端：做成醒目横条 banner */
    .sidebar-store-client-dl {
        margin: 0 !important;
        border-radius: 14px !important;
        padding: 14px 16px !important;
    }
    .sidebar-account-card {
        margin: 0 !important;
        border-radius: 14px !important;
        padding: 14px 16px !important;
    }

    /* —— 主内容间距 & 区块标题（iOS 大标题）—— */
    .store-main { padding: 4px 0 32px !important; }
    .store-main-stack > section { margin: 0 0 24px !important; padding: 0 18px !important; }
    .store-main-stack > section > h2 {
        font-size: var(--t-20, 20px) !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
        margin: 0 0 12px !important;
    }

    /* 精品：会员大卡占满整宽，隐藏左右箭头 */
    .premium-nav { display: none !important; }
    .premium-carousel-viewport { overflow: visible !important; }
    .premium-carousel-track { gap: 12px !important; }
    .mm-member-ad { width: 100% !important; }

    /* 推荐横滑：留出右侧「露出下一张」的呼吸感 */
    .recommend-shelf { padding-bottom: 6px !important; }

    /* 推荐「故事卡」：桌面是每屏 2 张并排；手机太窄会挤，改为整宽单列 */
    .mm-stories-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .mm-story-card { min-height: 138px !important; }
    .mm-story-inner { padding: 16px 18px !important; gap: 6px !important; }
    .mm-story-title { font-size: var(--t-20, 20px) !important; }
    .mm-story-appicon { width: 46px !important; height: 46px !important; }

    /* —— 应用：网格 → iOS 竖向分组列表行 —— */
    .apps-grid--paged {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        background: var(--mm-store-bg-secondary) !important;
        border: 1px solid var(--mm-store-border-soft) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }
    .app-card-wrap {
        height: auto !important;
        min-height: 0 !important;
    }
    .app-card--compact {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 12px 14px !important;
        min-height: 0 !important;
    }
    .app-card-wrap + .app-card-wrap .app-card--compact {
        border-top: 1px solid var(--mm-store-border-soft) !important;
    }
    .app-card-wrap:hover .app-card--compact,
    #store-window[data-store-theme="dark"] .app-card-wrap:hover .app-card--compact {
        transform: none !important;
        background: transparent !important;
    }
    .app-card--compact:active { background: var(--mm-store-bg-tertiary) !important; }
    .app-card--compact .app-icon {
        width: 56px !important;
        height: 56px !important;
        border-radius: 13px !important;
    }
    .app-info h4 { font-size: var(--t-15, 15px) !important; }
    .app-info p {
        min-height: 0 !important;
        -webkit-line-clamp: 2 !important;
    }
    .app-list-get-btn { padding: 6px 18px !important; }

    /* 分页器居中留白 */
    .apps-pager { justify-content: center !important; padding: 16px 0 0 !important; }

    /* —— 详情视图：手机端只呈现详情本体（隐藏首页侧栏 + 大标题），像独立页面 —— */
    html.store-detail-open .sidebar { display: none !important; }
    html.store-detail-open .hero { display: none !important; }
    #storeDetailStack .store-detail-toolbar {
        padding: 10px 14px !important;
        margin: 0 0 4px !important;
    }
    #storeDetailStack .store-detail-back-btn {
        display: inline-flex !important;
    }
}