/**
 * Mobile Layer（移动端优化层）—— R8
 * 只在小屏（max-width: 959px）生效；全部追加式覆盖，可整体删除回退。
 * 触控目标标准：可点元素触控区 ≥ 40px（WCAG 44px 的克制版）。
 */

@media (max-width: 959px) {
  /* ==========================================================================
     1. 底部固定导航栏（app embed .advc-footer-tab, 55px）遮挡补偿
     给 body 加底 padding，内容（如 Sold Out 按钮、PDP 描述）不再被裁切。
     ========================================================================== */
  body:has(.advc-footer-tab) {
    padding-bottom: calc(55px + env(safe-area-inset-bottom, 0px));
  }

  /* ==========================================================================
     2. 触控目标：汉堡菜单/图标按钮 28px → 44px 触控区
     用 ::before 扩大隐形热区，视觉尺寸不变、Header 高度不变。
     ========================================================================== */
  .header-action-bar .button--icon {
    position: relative;
  }
  .header-action-bar .button--icon::before {
    position: absolute;
    inset: -8px;
    content: "";
  }

  /* ==========================================================================
     3. 集合页 quick-add 按钮：32px → 40px 触控区
     _quick-add.css 晚加载，双类选择器提权。
     ========================================================================== */
  .block-product-card__quick-add.block-product-card__quick-add {
    width: 40px;
    height: 40px;
  }

  /* ==========================================================================
     4. SOLD OUT 徽章：窄屏卡片上被右缘裁切 → 缩小 + 内收
     ========================================================================== */
  .block-product-card__sold-out.block-product-card__sold-out {
    margin-inline-end: 6px;
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  /* ==========================================================================
     5. Hero 文字可读性：移动端标题/副标题直接压在繁复产品图上
     加柔和文字阴影，不压暗图片本体（保持图片通透）。
     ========================================================================== */
  .slideshow h1,
  .slideshow h2,
  .slideshow [class*="title"] {
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
  }
  .slideshow [class*="body"] {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  }

  /* ==========================================================================
     6. 吸顶 Header 锚点补偿：跳转/滚动定位时不遮住区块标题
     ========================================================================== */
  [id^="shopline-section-"] {
    scroll-margin-top: 76px;
  }
}