/* ==========================================================================
   STRUGGLE ROACH · 移动端专属样式（2026-10-13）
   ⚠ 全部包在 @media (max-width:899px) 内，PC 端完全不受影响
   ========================================================================== */

@media (max-width: 899px) {

  /* ===== ① 首屏改「图上 · 文下 · 黑底」，去掉棕色色卡分割 ===== */
  /* 首页 .sr2-hero */
  .sr2-hero {
    background: #0B0705 !important;
    overflow: hidden;
  }
  .sr2-hero-grid { display: flex !important; flex-direction: column !important; }
  .sr2-hero-media {
    order: 1 !important;
    aspect-ratio: auto !important;
    background: #0B0705 !important;
  }
  .sr2-hero-media img {
    width: 100% !important; height: auto !important;
    -o-object-fit: contain !important;
       object-fit: contain !important; -o-object-position: center !important; object-position: center !important;
    display: block;
  }
  .sr2-hero-text {
    order: 2 !important;
    background: #0B0705 !important;          /* 原为米色渐变 → 改黑 */
    background-image: none !important;
    text-align: center !important;
    padding: 30px 22px 38px !important;
    max-width: none !important;
  }
  .sr2-hero-h1,
  .sr2-hero-text .sr2-h1 {
    color: #fff !important;
    text-align: center !important;
    max-width: none !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  .sr2-hero-text .sr2-lead {
    color: rgba(255,255,255,.82) !important;
    text-align: center !important;
    max-width: 34ch !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  .sr2-hero-text .sr2-btn { width: 100%; max-width: 420px; margin: 6px auto 0; }

  /* 子页 .sr2b-hero（原为文字叠在图上） */
  .sr2b-hero {
    background: #0B0705 !important;
    position: static !important;
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    overflow: hidden;
  }
  .sr2b-hero__grid { display: flex !important; flex-direction: column !important; height: auto !important; }
  .sr2b-hero__media {
    position: static !important;
    inset: auto !important;
    order: 1 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    background: #0B0705 !important;
    overflow: hidden !important;
  }
  .sr2b-hero__media img {
    width: 100% !important; height: auto !important;
    -o-object-fit: contain !important;
       object-fit: contain !important; -o-object-position: center !important; object-position: center !important;
    display: block;
  }
  .sr2b-hero__text {
    position: static !important;
    inset: auto !important;
    order: 2 !important;
    width: auto !important;
    max-width: none !important;
    background: #0B0705 !important;           /* 去掉米色/棕色分割 */
    background-image: none !important;
    text-align: center !important;
    padding: 30px 22px 38px !important;
  }
  .sr2b-hero .sr2b-h1, .sr2b-hero h1 {
    color: #fff !important;
    text-align: center !important;
  }
  .sr2b-hero .sr2b-lead, .sr2b-hero p {
    color: rgba(255,255,255,.82) !important;
    text-align: center !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  .sr2b-hero__credit { right: 14px !important; bottom: 14px !important; }

  /* ===== ② 2 卡区：移动端去掉描述 + 卖点清单 ===== */
  .sr2-cards--2 .sr2-card-desc,
  .sr2-cards--2 .sr2-card-feats { display: none !important; }
  .sr2-cards--2 .sr2-card-body { padding-bottom: 22px !important; }
  .sr2-cards--2 .sr2-card-title { margin-bottom: 10px !important; }

  /* ===== ③ Why 区 3 卡：移动端改左右循环轮播 ===== */
  .sr2-why-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 18px !important;
  }
  .sr2-why-grid::-webkit-scrollbar { display: none; }
  .sr2-why-card {
    flex: 0 0 84% !important;
    scroll-snap-align: center;
    max-width: 84% !important;
  }
  /* 轮播下方的切换按钮（由 JS 注入） */
  .sr2-why-nav {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 4px;
  }
  .sr2-why-nav button {
    -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid rgba(85,45,10,.22);
    background: rgba(255,255,255,.9);
    color: #552D0A;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease;
    padding: 0;
  }
  .sr2-why-nav button svg { width: 18px; height: 18px; }
  .sr2-why-dots { display: flex; gap: 7px; }
  .sr2-why-dots i {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(85,45,10,.25); display: block; transition: background .2s ease, width .2s ease;
  }
  .sr2-why-dots i.on { background: #8C3A2B; width: 20px; border-radius: 4px; }
}

/* 轮播按钮仅移动端显示（PC 隐藏） */
.sr2-why-nav { display: none; }
@media (max-width: 899px) { .sr2-why-nav { display: flex; } }

/* ==========================================================================
   How It Works 专属覆盖修正
   sr-pagebody-dc9e2270f1.css L407-419 有 .sr2b-page-hiw 的桌面布局（display:contents +
   米色文字面板），其移动端媒体查询未重置这两条 → 移动端仍是"内容消失+米色"。
   这里用「3 个类」提高优先级压过去。
   ========================================================================== */
@media (max-width: 899px) {
  .sr2b-page-hiw .sr2b-hero .sr2b-hero__grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }
  .sr2b-page-hiw .sr2b-hero .sr2b-hero__media { order: 1 !important; height: auto !important; }
  .sr2b-page-hiw .sr2b-hero .sr2b-hero__text {
    order: 2 !important;
    background: #0B0705 !important;
    background-image: none !important;
    padding: 30px 22px 38px !important;
    text-align: center !important;
    height: auto !important;
    display: block !important;
  }
  .sr2b-page-hiw .sr2b-hero .sr2b-hero__text .sr2b-h1 { color: #fff !important; text-align: center !important; }
  .sr2b-page-hiw .sr2b-hero .sr2b-hero__text .sr2b-lead { color: rgba(255,255,255,.82) !important; text-align: center !important; }
  .sr2b-page-hiw .sr2b-hero .sr2b-hero__media img {
    width: 100% !important; height: auto !important;
    -o-object-fit: contain !important;
       object-fit: contain !important; -o-object-position: center !important; object-position: center !important;
  }
}

/* ==========================================================================
   Our Story 首屏：整张海报图（无独立文字块），只需去掉米色/棕色分割
   ========================================================================== */
@media (max-width: 899px) {
  .sr2b-page-story .sr2b-poster,
  .sr2b-page-story .sr2b-poster--full { background: #0B0705 !important; }
  .sr2b-page-story > .sr2b-poster:first-child { padding-top: 0 !important; }
}

/* ==========================================================================
   2026-10-13 客户：2 卡区「描述 + 卖点清单」双端删除
   （标题 / 价格 / 按钮 保留）
   注意：本段在 media query 之外 → PC + 移动端都生效
   ========================================================================== */
.sr2-cards--2 .sr2-card-desc,
.sr2-cards--2 .sr2-card-feats { display: none !important; }
.sr2-cards--2 .sr2-card-body { padding-bottom: 26px !important; }
.sr2-cards--2 .sr2-card-title { margin-bottom: 12px !important; }

/* ==========================================================================
   2026-10-13 客户（第二轮）：底部促销卡
   ① 删除框选内的文字块（标题 + 价格 + SHOP NOW）
      —— 图片本身已印有这些信息；整张图仍有 <a> 包裹，点击可跳转
   ② 缩短卡片，去掉为文字预留的大片空白
   ========================================================================== */
.sr2-bottom-txt { display: none !important; }

/* 卡片只留图片：去掉上下为文字预留的内边距 */
.sr2-bottom-item {
  padding: 0 !important;
  min-height: 0 !important;
  display: block !important;
  line-height: 0;
}
.sr2-bottom-item > img { display: block; width: 100% !important; height: auto !important; }

/* 区块上下留白收紧（原 60px → 34/30） */
.sr2-bottom-grid {
  padding: 34px 18px 30px !important;
  gap: 24px !important;
  align-items: start !important;
}
@media (max-width: 899px) {
  .sr2-bottom-grid { padding: 24px 14px 22px !important; gap: 18px !important; }
}

/* ==========================================================================
   2026-10-13 客户（第三轮）：2 卡区
   「标题 + 价格」也删除，只保留 ADD TO CART 按钮
   （图片上已印 DAILY CARE / TATTOO HEALING BALM 等信息）
   ========================================================================== */
.sr2-cards--2 .sr2-card-title,
.sr2-cards--2 .sr2-card-price,
.sr2-cards--2 .sr2-card-tag { display: none !important; }
.sr2-cards--2 .sr2-card-body {
  padding: 18px 24px 26px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.sr2-cards--2 .sr2-card-body .sr-btn { width: 100%; max-width: 420px; margin: 0 auto; }

/* ==========================================================================
   2026-10-14 移动端第二轮改造（客户 5 项，全部仅移动端）
   ========================================================================== */
@media (max-width: 899px) {

  /* ===== ② 黄色卖点卡：去掉小文字，缩减空白，保留图标 + 标题 ===== */
  .sr2-feature p { display: none !important; }
  .sr2-features-grid { padding: 0 12px !important; }
  .sr2-feature {
    padding: 18px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    min-height: 0 !important;
  }
  .sr2-feature-icon { width: 26px !important; height: 30px !important; margin: 0 !important; }
  .sr2-feature h3 { margin: 0 !important; font-size: 11.5px !important; line-height: 1.3 !important; }

  /* ===== ③ 3 卡区：改左右轮播（文案随卡片一起轮播） ===== */
  .sr2-cards:not(.sr2-cards--2) {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 16px !important;
  }
  .sr2-cards:not(.sr2-cards--2)::-webkit-scrollbar { display: none; }
  .sr2-cards:not(.sr2-cards--2) > .sr2-card {
    flex: 0 0 84% !important;
    max-width: 84% !important;
    scroll-snap-align: center;
  }

  /* ===== ④ 2 卡区：改左右并排（两张主图同屏可见） ===== */
  .sr2-cards--2 {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .sr2-cards--2 > .sr2-card {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: calc(50% - 6px) !important;
  }
  .sr2-cards--2 .sr2-card-media img { width: 100% !important; height: auto !important; }
  .sr2-cards--2 .sr2-card-body { padding: 12px 10px 16px !important; }
  .sr2-cards--2 .sr2-card-body .sr-btn {
    width: 100% !important; max-width: none !important;
    font-size: 11px !important; padding: 0 8px !important;
    min-height: 40px !important; white-space: nowrap;
  }
}

/* 轮播切换按钮（3 卡区，仅移动端注入） */
.sr3-nav { display: none; }
@media (max-width: 899px) {
  .sr3-nav {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 2px;
  }
  .sr3-nav button {
    -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid rgba(85,45,10,.22);
    background: rgba(255,255,255,.9);
    color: #552D0A;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
  }
  .sr3-nav button svg { width: 18px; height: 18px; }
  .sr3-dots { display: flex; gap: 7px; }
  .sr3-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(85,45,10,.25); display: block; }
  .sr3-dots i.on { background: #8C3A2B; width: 20px; border-radius: 4px; }
}

/* ==========================================================================
   2026-10-14 移动端首屏：压缩间距与字号，让 SHOP NOW 进首屏（不动图片）
   计算：可用 257px（844 视口 − 116 页头 − 471 图片）→ 文字块需 ≤250px
   ========================================================================== */
@media (max-width: 899px) {
  .sr2-hero-text { padding: 12px 18px 16px !important; }

  .sr2-hero-text .sr2-eyebrow {
    font-size: 10.5px !important;
    letter-spacing: .18em !important;
    margin: 0 0 6px !important;
    line-height: 1.2 !important;
  }
  .sr2-hero-h1,
  .sr2-hero-text .sr2-h1 {
    font-size: 26px !important;
    line-height: 1.1 !important;
    margin: 0 0 10px !important;
  }
  .sr2-hero-text .sr2-lead {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin: 0 0 14px !important;
    max-width: none !important;
  }
  .sr2-hero-text > div { margin: 0 !important; }
  .sr2-hero-text .sr2-btn {
    min-height: 44px !important;
    font-size: 13px !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   2026-10-14 移动端首屏 v2：文案+按钮【叠在图片上】
   解决：①首页图片与文字间的大片黑 ②How It Works 下方形似黑色的文字块
   做法：文字块绝对定位到图片底部，加自下而上的压暗渐变保证可读性
   ========================================================================== */
@media (max-width: 899px) {

  /* ---------- 首页 .sr2-hero ---------- */
  .sr2-hero { position: relative !important; overflow: hidden !important; }
  .sr2-hero-grid { display: block !important; position: relative !important; height: auto !important; }
  .sr2-hero-media {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    order: 1 !important;
  }
  .sr2-hero-media img {
    width: 100% !important;
    height: auto !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
    display: block;
  }
  .sr2-hero-text {
    position: absolute !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: auto !important;
    width: auto !important; max-width: none !important;
    z-index: 3 !important;
    margin: 0 !important;
    padding: 40px 20px 20px !important;
    text-align: center !important;
    background-image: linear-gradient(180deg, rgba(11,7,5,0) 0%, rgba(11,7,5,.62) 42%, rgba(11,7,5,.92) 100%) !important;
    background-color: transparent !important;
  }
  .sr2-hero-text .sr2-eyebrow { margin: 0 0 4px !important; }
  .sr2-hero-h1, .sr2-hero-text .sr2-h1 { margin: 0 0 8px !important; }
  .sr2-hero-text .sr2-lead { margin: 0 0 12px !important; }

  /* ---------- 子页 .sr2b-hero ---------- */
  .sr2b-hero { position: relative !important; overflow: hidden !important; }
  .sr2b-hero__grid { display: block !important; position: relative !important; height: auto !important; }
  .sr2b-hero__media {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    order: 1 !important;
  }
  .sr2b-hero__media img {
    width: 100% !important;
    height: auto !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
    display: block;
  }
  .sr2b-hero__text {
    position: absolute !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: auto !important;
    width: auto !important; max-width: none !important;
    z-index: 3 !important;
    margin: 0 !important;
    padding: 40px 20px 20px !important;
    text-align: center !important;
    background-image: linear-gradient(180deg, rgba(11,7,5,0) 0%, rgba(11,7,5,.62) 42%, rgba(11,7,5,.92) 100%) !important;
    background-color: transparent !important;
    display: block !important;
  }
  /* How It Works 的 3 类选择器同样覆盖 */
  .sr2b-page-hiw .sr2b-hero .sr2b-hero__text {
    position: absolute !important;
    background-image: linear-gradient(180deg, rgba(11,7,5,0) 0%, rgba(11,7,5,.62) 42%, rgba(11,7,5,.92) 100%) !important;
    background-color: transparent !important;
    padding: 40px 20px 20px !important;
  }
  .sr2b-hero .sr2b-h1, .sr2b-hero h1 { margin: 0 0 8px !important; }
  .sr2b-hero .sr2b-lead { margin: 0 0 12px !important; }
  .sr2b-hero__credit { bottom: auto !important; top: 12px !important; right: 12px !important; }
}

/* ==========================================================================
   2026-10-14 🔴 修复：抽屉菜单点击无反应（一直存在的根因）
   根因：平台组件 spz-nested-menu（.header_drawer_menu / .header_drawer_menu_first）
        盖在自定义 .sr-nav-wrap 菜单之上，把点击全部吃掉；
        而平台菜单的后台配置为空 → 点了毫无反应。
   修法：① 平台空菜单容器 pointer-events:none（不接收点击）
        ② 自定义菜单提升 z-index + 显式恢复 pointer-events
   ========================================================================== */
.header_drawer_menu_first,
.header_drawer_menu,
spz-nested-menu.header_drawer_menu {
  pointer-events: none !important;
}

.sr-nav-wrap {
  position: relative !important;
  z-index: 30 !important;
  pointer-events: auto !important;
}
.sr-nav-drawer,
.sr-nav-drawer li,
.sr-nav-drawer a,
.sr-nav-drawer a span {
  pointer-events: auto !important;
}
/* 菜单项加最小可点高度，确保手指点得到 */
.sr-nav-drawer a {
  display: flex !important;
  align-items: center !important;
  min-height: 54px !important;
}

/* ==========================================================================
   2026-10-14 Our Story 页：消除卡片之间的黑色间隙，改为自然过渡
   原因：早期给 .sr2b-poster 设了 #0B0705 黑底 + 自身 padding 24px 0，
        两张 poster 相邻时叠加成明显黑带。
   修法：移动端 poster 背景透明 + 去内边距，卡片直接相接。
   ========================================================================== */
@media (max-width: 899px) {
  .sr2b-page-story,
  .sr2b-page-story .sr2b-poster,
  .sr2b-page-story .sr2b-poster--full {
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .sr2b-page-story .sr2b-poster img { display: block; }

  /* 兜底：整页所有 poster / 全宽图 在移动端都不要上下留黑 */
  .sr2b-page-story .sr2b-poster { margin: 0 !important; }
}