/*
 * Brahmin 主题移动端（H5）适配样式
 * ---------------------------------------------------------------
 * 说明：
 * 1. 本文件必须在主样式（captured-* / style.css）之后加载，才能覆盖桌面端样式；
 *    入队位置见 functions.php 中的 brahmin_theme_assets()。
 * 2. 全部使用 max-width 媒体查询（1024px / 768px / 480px），
 *    只在小屏生效，不影响桌面端显示。
 * 3. 分区：通用 → 页头导航 → 首页 → 商品列表页 → 商品详情页。
 */

/* ============================================================
 * 一、通用（所有页面）
 * ============================================================ */

/* 1.1 消除横向溢出：媒体元素永不超出父容器 */
@media (max-width: 1024px) {
  img,
  video,
  iframe,
  svg {
    max-width: 100% !important;
    height: auto;
  }

  /* 防止固定 px 宽度的容器把页面撑破（保留内联宽度的元素用 max-width 兜底） */
  html,
  body {
    overflow-x: hidden;
  }

  /* 点击目标统一放大到 ≥44px（按钮类高度原为 42px） */
  .button,
  button,
  [role="button"],
  a.button {
    min-height: 44px;
  }

  /* 输入框 / 下拉在小屏改为全宽流式 */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    max-width: 100%;
  }
}

/* 1.2 移动端字号：大标题按比例缩小，正文保持 ≥14px */
@media (max-width: 768px) {
  /* h1 桌面端为 3.5rem(56px)，移动端降到 2rem(32px) */
  h1,
  .h1 {
    font-size: 2rem !important;
    line-height: 1.15;
  }

  h2,
  .h2 {
    font-size: 1.625rem !important;
    line-height: 1.2;
  }

  h3,
  .h3 {
    font-size: 1.25rem !important;
  }

  /* 正文段落不小于 14px（桌面端 paragraph 类多为 1rem+，此处仅兜底） */
  p,
  .paragraph-2,
  .paragraph-3,
  .paragraph-4,
  .paragraph-5 {
    font-size: max(0.875rem, 14px);
  }

  /* 桌面按钮 min-width 220px，小屏改为流式全宽候选 */
  .button {
    min-width: 0;
    max-width: 100%;
    width: auto;
    height: 44px;
  }
}

@media (max-width: 480px) {
  /* 小屏手机再收一档：h1 降到 28px */
  h1,
  .h1 {
    font-size: 1.75rem !important;
  }

  /* 480px 以下间距统一收窄 */
  .shopify-section section,
  section[data-section] {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 1.3 表格（如规格表）在小屏允许横向滚动 */
@media (max-width: 768px) {
  .siteforge-entry table,
  .siteforge-captured table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* WooCommerce 表格也做同样兜底 */
  .woocommerce table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* 1.4 分页：加大触控区 */
@media (max-width: 768px) {
  .siteforge-pagination {
    width: calc(100% - 32px);
    flex-wrap: wrap;
  }

  .siteforge-pagination .page-numbers {
    min-width: 44px;
    min-height: 44px;
    font-size: 15px;
  }
}

/* ============================================================
 * 二、页头导航（header.php）
 * 说明：模板自带汉堡按钮（data-hamburger-menu，lg:hidden）
 * 与侧滑面板，JS 由捕获的 storefront 脚本驱动；
 * 这里只补齐小屏下的显示细节，不改结构。
 * ============================================================ */

@media (max-width: 1023px) {
  /* 桌面主导航在小屏确保隐藏，避免溢出 */
  header[role="banner"] nav.hidden,
  header[role="banner"] nav.hidden.lg\:flex {
    display: none;
  }

  /* 汉堡按钮触控区 ≥44px */
  header[role="banner"] button[data-hamburger-menu] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 促销横幅文字允许换行，不撑破容器 */
  #shopify-section-promotional-banner .utility-4 a {
    white-space: normal;
    word-break: break-word;
  }

  /* 页头在小屏改为单行紧凑布局：logo + 汉堡，隐藏次要元素 */
  header[role="banner"] [data-header-wrapper] {
    min-height: 56px;
  }

  header[role="banner"] [data-header-links-container] {
    overflow: hidden; /* 关闭桌面端遗留的 overflow-y-scroll */
  }
}

@media (max-width: 480px) {
  /* 超小屏 logo 略微缩小 */
  header[role="banner"] [data-header-logo] img {
    width: 100px !important;
  }
}

/* ============================================================
 * 三、首页（front-page.php → templates/template-home.php）
 * ============================================================ */

/* 3.1 ≤1024px：大区块 padding 收窄 */
@media (max-width: 1024px) {
  /* hero 之外的图文区块 */
  section[id*="image_text"] .scroll-fade-in {
    gap: 20px;
  }
}

/* 3.2 ≤768px：hero 区高度与字号缩减、栅格折列 */
@media (max-width: 768px) {
  /* hero：模板已有 max-h-[511px]，此处再收紧并保证图片裁切正常 */
  section[data-section="hero"] img {
    max-height: 420px;
    object-fit: cover;
  }

  /* hero 文案容器改为全宽流式（模板在 md 以下本来就是 static 布局，兜底） */
  section[data-section="hero"] .md\:absolute {
    position: static;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 首页顶部移动端横向滚动导航：隐藏滚动条但保持可滑动 */
  #shopify-section-mobile-scrolling-nav ul {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  /* 图文双栏区块（Exclusively Ours / Animal Instincts）：
     模板 md 以下为纵向堆叠，这里收窄上下间距 */
  section[id*="image_text"] {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  section[id*="image_text"] .scroll-fade-in > div {
    margin-bottom: 0;
  }

  /* Inset 横幅：白色文案盒在小屏改为全宽并收窄内边距 */
  section[id*="inset_banner"] .bg-blue {
    padding: 20px 18px;
  }

  section[id*="inset_banner"] .mt-\[-40px\] {
    margin-top: -20px;
  }

  /* 首页底部最新文章栅格（siteforge-grid）：
     桌面 3 列 → 平板 2 列（间距收窄） */
  .siteforge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* 3.3 ≤480px：保持 2 列但进一步缩小间距 */
@media (max-width: 480px) {
  .siteforge-grid {
    gap: 12px;
  }

  .siteforge-card__title {
    font-size: 1.05rem;
  }

  /* hero 文案按钮全宽更易点 */
  section[data-section="hero"] .button {
    width: 100%;
  }
}

/* ============================================================
 * 四、商品列表页
 *   （archive-product.php / page-product-list.php）
 * ============================================================ */

/* 4.1 ≤768px：集合横幅、筛选栏、产品栅格 */
@media (max-width: 768px) {
  /* 集合横幅文字区：内边距收窄 */
  section[data-section="collection-banner"] .max-w-\[100\%\] {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 分类子分类标签（crossbody bags 等）：保持横向滑动 */
  section[data-section="collection-banner"] ul[role="list"] {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  section[data-section="collection-banner"] ul[role="list"] a {
    min-height: 36px; /* 标签高度从 24px 提升到 36px，更易点 */
  }

  /* Nosto SERP 容器：小屏纵向堆叠（筛选/侧栏在上，结果在下） */
  .ns-serp {
    flex-direction: column !important;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* 筛选按钮（COLOR / STYLE / TEXTURE…）：触控区 ≥44px */
  .ns-act-btn,
  .ns-facet-tab-btn {
    min-height: 44px;
    min-width: 44px;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 筛选栏允许横向滚动，避免挤爆容器 */
  .ns-header-controls,
  .ns-sidebar-sort-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  /* Nosto 注入的产品栅格：桌面 4 列 → 移动端 2 列。
     产品卡片由 Nosto JS 动态注入，这里对结果容器内的网格做通用兜底 */
  .nosto-serp-content [class*="ns-col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* SEO 文案区（SATCHEL BAGS : …）内边距收窄 */
  section[id$="__seo_cdWK94"] > div {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 4.2 ≤480px：2 列但缩小间距，分页按钮加大 */
@media (max-width: 480px) {
  .nosto-serp-content [class*="ns-col-"] {
    padding-left: 6px;
    padding-right: 6px;
  }

  .siteforge-pagination .page-numbers {
    min-width: 48px;
    min-height: 48px;
  }
}

/* ============================================================
 * 五、商品详情页
 *   （single-product.php）
 * ============================================================ */

/* 5.1 ≤768px：主图全宽、双栏折单栏（图上信息下）、加购全宽 */
@media (max-width: 768px) {
  /* 双栏布局：模板为 flex-col md:flex-row，md 以下自动单栏；
     这里确保两栏子元素不残留桌面宽度 */
  [data-target="product-container"] > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 图集列：全宽 */
  [data-target="pdp-gallery-column"] {
    width: 100% !important;
  }

  [data-target="gallery-container"] {
    min-height: 0;
    max-height: none;
    overflow: visible; /* 移动端用自带的轮播查看，桌面端滚动列表不再占位 */
  }

  /* 主图列表：宽度铺满 */
  [data-target="gallery-container"] ul img {
    width: 100%;
    height: auto;
  }

  /* 表单列（价格/描述/加购）：全宽，内边距收窄 */
  [data-target="pdp-form-column"] {
    width: 100% !important;
  }

  [data-target="form-column-container"] {
    min-height: 0 !important;
    padding-bottom: 24px !important;
  }

  /* 表单内固定 27.375rem 宽的内层容器改为流式 */
  [data-target="form-column-container"] .w-\[27\.375rem\] {
    width: 100% !important;
    padding-left: 4px;
    padding-right: 4px;
  }

  /* 加购 / Add Engraving 按钮全宽 */
  [data-product-form] button[type="submit"],
  [data-engraving-button] {
    width: 100% !important;
    min-height: 48px; /* 主 CTA 触控区加大 */
  }

  /* 颜色/尺码 swatch（变体选择器）触控友好 */
  [data-swatch] {
    min-width: 44px;
    min-height: 32px;
  }

  fieldset.flex {
    row-gap: 10px;
  }

  /* 数量选择器（若由插件/JS 注入）触控友好兜底 */
  .quantity input,
  input.qty {
    min-height: 44px;
    min-width: 56px;
    font-size: 16px; /* ≥16px 避免 iOS 聚焦自动放大 */
  }

  /* 手风琴（Details / Dimensions…）行高加大 */
  button[data-tray] {
    min-height: 52px;
  }

  /* 相关产品/探索系列 Swiper：
     JS 注入了固定像素 slide 宽度（约 463px），小屏强制改为
     每屏 2 张并可横向滑动 */
  [data-slider] .swiper,
  .swiper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  [data-slider] .swiper-wrapper,
  .swiper-wrapper {
    transform: none !important; /* 取消 JS 计算的位移 */
  }

  [data-slider] .swiper-slide,
  .swiper-slide {
    width: calc(50% - 5px) !important; /* 原内联约 463px，强制 2 列 */
    flex-shrink: 0;
    margin-right: 10px !important;
  }

  /* 详情/刻字侧滑面板：小屏占满全宽 */
  [data-target="details-panel"],
  [data-panel-detail],
  [data-target="product-engraving-root"] > div[role="dialog"] {
    max-width: 100vw !important;
  }
}

/* 5.2 ≤1024px：sticky ATC 条（lg 才显示，此处仅微调，防溢出） */
@media (max-width: 1023px) {
  /* 模板中 sticky ATC 为 hidden lg:block，桌面专属；
     这里兜底确保它不会在小屏意外占位 */
  [data-sticky-add-to-cart] {
    display: none;
  }
}

@media (min-width: 1024px) {
  /* 桌面端恢复 sticky ATC 默认行为（防止上面的兜底误伤大屏） */
  [data-sticky-add-to-cart].lg\:block {
    display: block;
  }
}

/* 5.3 ≤480px：相关产品保持 2 列但缩小间距 */
@media (max-width: 480px) {
  [data-slider] .swiper-slide,
  .swiper-slide {
    width: calc(50% - 4px) !important;
    margin-right: 8px !important;
  }

  /* 面包屑允许换行 */
  [data-target="form-column-container"] nav[aria-label="Breadcrumbs"] a,
  [data-target="form-column-container"] nav[aria-label="Breadcrumbs"] span {
    white-space: normal;
    word-break: break-word;
  }
}