/* ============================================================
   云舟卡网 · 手机端原生适配（只在 ≤768px 生效，电脑版一个字都不动）
   原则：不缩放电脑版，手机上用小屏原生布局 ——
        顶部固定条只留「logo + 店名 + 图标」，搜索与导航另起一行跟着页面滚
   ============================================================ */

/* 大屏：手机专用的那一行永远不出现 */
@media (min-width: 769px) {
    .shop-mobile { display: none !important; }
}

@media (max-width: 768px) {

    /* ---------- 1. 顶部固定条：避开刘海/状态栏 + 单行 ---------- */
    .uc-topbar {
        /* 顶部安全区（iPhone 刘海 / 安卓状态栏），没有则退化为 8px */
        padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 6px;
    }
    .uc-topbar__inner { max-width: none; }

    .shop-nav {
        height: 50px;
        padding: 0 6px 0 12px;
        gap: 6px;
        border-radius: 16px;
    }
    .shop-brand { gap: 8px; font-size: 15px; padding-right: 0; }
    .shop-brand img { width: 28px; height: 28px; border-radius: 8px; }
    .shop-brand__name { max-width: 42vw; font-size: 15px; }

    .shop-icon-btn { width: 38px; height: 38px; }
    .shop-icon-btn .material-icons-outlined { font-size: 20px; }
    .shop-burger {
        display: inline-flex !important;
        width: 38px; height: 38px; border-radius: 12px;
    }

    /* 电脑版那一套（横向导航 / 内联搜索 / 登录按钮）在手机上全部收起 */
    .shop-nav .shop-nav__list,
    .shop-nav .shop-search,
    .shop-auth { display: none !important; }
    .shop-nav__right { margin-left: auto; gap: 4px; }

    /* 抽屉在手机上始终可用（原本要靠 shop-compact 类，这里不依赖 JS） */
    .shop-drawer, .shop-drawer__shade { display: block; }

    /* ---------- 2. 手机专用行：整行搜索 + 横向导航胶囊 ---------- */
    .shop-mobile { display: block; }
    .shop-mobile__inner {
        max-width: 1180px;
        margin: 0 auto;
        padding: 8px 10px 0;
    }
    .shop-mobile__search {
        display: flex;
        align-items: center;
        gap: 9px;
        height: 42px;
        margin: 0;
        padding: 0 14px;
        border-radius: 14px;
        background: var(--uc-field-bg);
        border: 1px solid var(--glass-border-soft);
        color: var(--uc-ink-med);
    }
    .shop-mobile__search:focus-within { border-color: var(--uc-focus); }
    .shop-mobile__search i { font-size: 16px; flex: 0 0 auto; }
    .shop-mobile__search input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0; outline: 0; background: 0 0;
        color: var(--uc-ink);
        font-size: 16px;          /* 16px 起，iOS 聚焦时不会自动放大页面 */
    }
    .shop-mobile__search input::placeholder { color: var(--uc-ink-dis); }

    .shop-mobile__nav {
        display: flex;
        gap: 8px;
        margin-top: 8px;
        padding-bottom: 2px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .shop-mobile__nav::-webkit-scrollbar { display: none; }
    .shop-mobile__nav a {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 38px;
        padding: 0 16px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 500;
        color: var(--uc-ink-med);
        background: var(--uc-field-bg);
        border: 1px solid var(--glass-border-soft);
    }
    .shop-mobile__nav a .nav-icon,
    .shop-mobile__nav a i { font-size: 15px; }
    .shop-mobile__nav a.active {
        color: var(--md-on-primary);
        background: var(--md-primary);
        border-color: transparent;
        box-shadow: 0 4px 14px rgba(var(--md-primary-rgb), .26);
    }

    /* ---------- 3. 内容区：手机留白收紧、不横向溢出 ---------- */
    body.uc-body { overflow-x: hidden; }
    main.container { padding-top: 14px; padding-bottom: 32px; }
    .panel { border-radius: 16px; }
    .panel-header { padding: 14px 15px 0; }
    .panel-body { padding: 14px 15px 16px; font-size: 13.5px; }

    /* 商品卡：仍是 2 列（手机原生那种），封面 4:3 少裁切、看得清 */
    .item-list { gap: 10px; }
    .acg-thumb { aspect-ratio: 4 / 3; }
    .acg-card { border-radius: 14px; }
    .acg-card > .acg-body { padding: 7px 10px 9px; gap: 5px; }
    .goods-title { font-size: 13px; }
    .price { font-size: 16px; }
    .price .unit { font-size: 11px; }
    .stat-bottom, .meta { font-size: 10.5px; }
    .acg-tag, .badge-soft { font-size: 10px; }

    /* 商品详情 / 下单 */
    .item-cover { max-height: 260px; }
    .item-buy > h4 { font-size: 17px; }
    .item-buy .abacus .price { font-size: 20px; }
    .qty-group .form-control { width: 58px; }
    .pay-list { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
    .form-control { height: 42px; font-size: 16px; }

    /* 订单 / 卡密展示 */
    .order-item { padding: 14px 15px; }
    .card-display { font-size: 12.5px; padding: 11px 12px; }
    .order-right { text-align: left; }
    .order-amount { align-items: flex-start; }

    /* 底部安全区（全面屏手势条） */
    footer { padding: 20px 14px calc(26px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 超窄屏（≤360px，小屏安卓）再收一点 ---------- */
@media (max-width: 380px) {
    .shop-brand__name { max-width: 34vw; font-size: 14px; }
    .shop-icon-btn { width: 36px; height: 36px; }
    .item-list { gap: 8px; }
    .goods-title { font-size: 12.5px; }
    .price { font-size: 15px; }
}

/* ===== 云舟 2026-10-13：背景图电脑/手机分别适配 ===== */
/* 电脑端：横版构图，居中偏左（人物在左），避免右侧留白 */
@media (min-width: 993px){
  body.uc-body{
    background-image: url('/assets/ylsz/bg.jpg') !important;
    background-size: cover !important;
    background-position: 28% center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
  }
}
/* 手机端：竖版专用图，原生裁切构图（不是把电脑版缩小） */
@media (max-width: 992px){
  body.uc-body{
    background-image: url('/assets/ylsz/bg-mobile.jpg') !important;
    background-size: cover !important;
    background-position: center 18% !important;
    background-attachment: scroll !important;   /* 手机 fixed 会有性能/滚动问题 */
    background-repeat: no-repeat !important;
    min-height: 100vh !important;
  }
  /* 手机上导航栏是横条，背景顶部要留出人物脸 */
  .uc-nav-wrap{backdrop-filter: blur(6px)}
}
/* 小屏横屏（手机横过来）避免裁到头 */
@media (max-width: 992px) and (orientation: landscape){
  body.uc-body{background-position: center 35% !important;background-size: auto 130% !important}
}

/* ===== 云舟 2026-10-13：让背景图透出来（原 .panel 是 .68 白色，把背景全盖死）===== */
body.uc-body{background-color:transparent !important}

/* 电脑端：主面板降到 .46，保留玻璃质感与可读性 */
@media (min-width: 993px){
  .panel{background:rgba(255,255,255,.46) !important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
}

/* 手机端：面板更透一点，让竖版背景有机会露脸 */
@media (max-width: 992px){
  .panel{background:rgba(255,255,255,.40) !important;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
         box-shadow:0 8px 30px -18px rgba(18,58,124,.30) !important}
  /* 商品卡片保持较高不透明，保证价格/名称清晰 */
  .goods-item,.item,.card,.goods{background:rgba(255,255,255,.90) !important}
}