/* Mobile 暑假旅游专题 - 海洋蓝 + 阳光橙 + 清凉绿 暑假配色 */
.m-shujia-page{background:#f0f7ff;min-height:100vh;overflow:hidden}

/* ========== Hero ========== */
.m-sj-hero{position:relative;height:280px;overflow:hidden;background:#0a4c8c}
.m-sj-hero-bg{position:absolute;inset:0;background-image:url('https://image.guojixing.com/banner/shujia_banner/shujia_m.png');background-position:center center;background-size:cover;background-repeat:no-repeat}
/* 浮动返回按钮 - 叠在 hero 左上角，不占整条导航 */
.m-sj-back{position:absolute;top:12px;left:12px;z-index:10;display:inline-flex;align-items:center;padding:6px 14px 6px 10px;border-radius:20px;background:rgba(255,255,255,0.82);backdrop-filter:blur(6px);color:#0a4c8c;font-size:13px;font-weight:600;text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,0.18);line-height:1}
.m-sj-back:active{background:rgba(255,255,255,1)}
/* 底部波浪装饰 */
.m-sj-hero-wave{position:absolute;left:0;right:0;bottom:-1px;height:24px;background:#f0f7ff;z-index:3}
.m-sj-hero-wave::before{content:"";position:absolute;left:-5%;right:-5%;bottom:0;width:110%;height:24px;background:#f0f7ff;border-radius:50% 50% 0 0 / 100% 100% 0 0}

/* ========== 锚点导航 ========== */
.m-sj-nav{display:flex;background:rgba(255,255,255,0.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(14,124,201,0.1);position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(10,76,140,0.06);overflow-x:auto;-webkit-overflow-scrolling:touch;padding:8px 6px}
.m-sj-nav::-webkit-scrollbar{display:none}
.m-sj-nav-item{flex:0 0 auto;padding:7px 14px;margin-right:6px;border-radius:20px;font-size:13px;font-weight:500;color:#555;text-decoration:none;white-space:nowrap;background:#f5f9ff;border:1px solid transparent;transition:all .25s}
.m-sj-nav-item:active{color:#0e7cc9;background:#e8f4ff}
.m-sj-nav-item.active{color:#fff;background:linear-gradient(135deg,#0e7cc9,#18a4e8);border-color:transparent;box-shadow:0 2px 8px rgba(14,124,201,0.3)}

/* ========== 分区 ========== */
.m-sj-section{padding:14px 0 18px;max-width:768px;margin:0 auto}
.m-sj-section .m-section-hd{padding:14px 16px 10px}
.m-sj-section .m-section-title{font-size:18px;font-weight:700;color:#1a3a5c;letter-spacing:1px;padding-left:0}
.m-sj-section .m-section-title:before{display:none}
.m-sj-section-sub{font-size:11px;color:#7a9ab5}

/* 热门 - 纯白底 */
.m-sj-section-hot{background:#fff}
/* 海岛 - 浅蓝渐变 */
.m-sj-section-island{background:linear-gradient(180deg,#e3f2fd 0%,#f0f7ff 100%)}
/* 亲子 - 浅蓝白 */
.m-sj-section-family{background:#fff}
/* 毕业 - 浅橙渐变 */
.m-sj-section-grad{background:linear-gradient(180deg,#fff5ed 0%,#fffaf5 100%)}
.m-sj-section-grad .m-section-title{color:#8a3a1a}
.m-sj-section-grad .m-sj-section-sub{color:#b57a5a}
/* 避暑 - 浅绿渐变 */
.m-sj-section-cool{background:linear-gradient(180deg,#e6f9f0 0%,#f0fff8 100%)}
.m-sj-section-cool .m-section-title{color:#0a5a3a}
.m-sj-section-cool .m-sj-section-sub{color:#5a8a7a}

/* 产品卡片在暑假专题下的微调（继承 home.css 的 m-product-card） */
.m-sj-section .m-product-list{padding:0 12px 8px}
.m-sj-section .m-product-card{background:#fff}
.m-sj-section-island .m-product-card,
.m-sj-section-grad .m-product-card,
.m-sj-section-cool .m-product-card{box-shadow:0 2px 10px rgba(10,76,140,0.06)}
/* 避暑区价格用清凉绿点缀 */
.m-sj-section-cool .m-product-price em,
.m-sj-section-cool .m-product-price strong{color:#ff5a00}

/* ========== 空状态 ========== */
.m-sj-empty{text-align:center;padding:80px 20px}
.m-sj-empty-icon{font-size:56px;margin-bottom:16px}
.m-sj-empty h3{font-size:18px;color:#1a3a5c;margin:0 0 8px;font-weight:700}
.m-sj-empty p{font-size:13px;color:#7a9ab5;margin:0}

/* ========== CTA ========== */
.m-sj-cta{position:relative;padding:44px 20px 56px;text-align:center;color:#fff;overflow:hidden;background:linear-gradient(135deg,#0a4c8c 0%,#0e7cc9 40%,#18a4e8 70%,#42c6f5 100%)}
.m-sj-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(255,140,66,0.18) 0%,transparent 60%),radial-gradient(ellipse at 80% 50%,rgba(255,255,255,0.08) 0%,transparent 50%)}
.m-sj-cta h2{position:relative;z-index:2;font-size:22px;font-weight:800;margin:0 0 10px;letter-spacing:2px;text-shadow:0 2px 10px rgba(0,0,0,0.2)}
.m-sj-cta p{position:relative;z-index:2;font-size:13px;opacity:0.92;margin:0 0 24px;letter-spacing:1px}
.m-sj-cta-btn{position:relative;z-index:2;display:inline-block;background:linear-gradient(135deg,#ff8c42,#ff6b35);color:#fff;padding:13px 44px;border-radius:30px;font-size:16px;font-weight:700;text-decoration:none;letter-spacing:2px;box-shadow:0 4px 20px rgba(255,107,53,0.45)}
.m-sj-cta-btn:active{transform:translateY(1px);box-shadow:0 2px 12px rgba(255,107,53,0.4)}

/* 超小屏适配 */
@media(max-width:360px){
    .m-sj-hero{height:240px}
    .m-sj-nav-item{padding:6px 11px;font-size:12px;margin-right:5px}
    .m-sj-section .m-section-title{font-size:17px}
    .m-sj-cta h2{font-size:20px}
}