/* ==========================================================================
   BBN Fabric Finder —— 手机端（<=767px）适配补丁
   范围：/fabrics-bbn/ 下所有出现 Fabric Finder 的页面（分类页/产品页/Shop）
   原则：
     - 仅 @media (max-width:767px) 生效，桌面端（>767px）一行都不改
     - 选择器全部落在 .bbn-finder-* 命名空间，主站不存在这些类，天然隔离
     - 加载门槛在 snippet 316 里再按 /fabrics-bbn 路径拦一道（双保险）
   背景：bbn-finder-facade 内联脚本会把 label 里第一个 <span>（原为筛选标签文案）
         改写成当前值（如 ALL），所以手机端标签文字改由 ::before 恢复，
         选择器恢复原生下拉外观（自动显示当前值），不再依赖 facade span。
   ========================================================================== */

@media (max-width: 767px) {

  /* --- 外层：留出左右安全边距 --- */
  .bbn-fabric-finder {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  .bbn-finder-title {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin: 0 0 14px !important;
  }

  /* --- 搜索框 --- */
  .bbn-finder-search-label {
    display: block !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
  }
  .bbn-finder-search {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    margin: 8px 0 0 !important;
    padding: 0 14px !important;
    background: #fff !important;
    border: 1px solid #dfe6ec !important;
    border-radius: 10px !important;
    font-size: 16px !important;          /* >=16px 避免 iOS 聚焦自动放大 */
    color: #263445 !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  /* --- 三组筛选：全部改单列 --- */
  .bbn-finder-directory,
  .bbn-finder-top,
  .bbn-finder-advanced-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- 单个筛选器：标签在上（::before），原生下拉在下 --- */
  .bbn-finder-directory-select,
  .bbn-finder-top-select,
  .bbn-finder-advanced-select {
    display: block !important;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .bbn-finder-directory-select > span,
  .bbn-finder-top-select > span,
  .bbn-finder-advanced-select > span {
    display: none !important;            /* facade 值条不用了，原生 select 自带当前值 */
  }
  .bbn-finder-directory-select select,
  .bbn-finder-top-select select,
  .bbn-finder-advanced-select select {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 34px 0 12px !important;
    opacity: 1 !important;
    color: #263445 !important;
    background: #fff !important;
    border: 1px solid #dfe6ec !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    line-height: 44px !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    box-sizing: border-box !important;
  }

  /* --- 恢复每个筛选器的标签文字 --- */
  .bbn-finder-directory-select::before,
  .bbn-finder-top-select::before,
  .bbn-finder-advanced-select::before {
    display: block !important;
    margin: 0 0 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #5a6b7d !important;
    letter-spacing: .01em !important;
    content: attr(data-bbn-label);        /* 兜底：无 data 属性时不显示 */
  }
  .bbn-filter-range::before       { content: "Fabric range" !important; }
  .bbn-filter-directory::before   { content: "Directory category" !important; }
  .bbn-filter-type::before        { content: "Fabric type" !important; }
  .bbn-filter-weave::before       { content: "Weave / construction" !important; }
  .bbn-filter-weight::before      { content: "Fabric weight" !important; }
  .bbn-filter-finish::before      { content: "Finish" !important; }
  .bbn-filter-composition::before { content: "Composition" !important; }
  .bbn-filter-risk::before        { content: "Performance / risk" !important; }
  .bbn-filter-industry::before    { content: "Application / industry" !important; }

  /* --- 高级筛选开关条 / 清除按钮 --- */
  .bbn-finder-advanced-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    background: transparent !important;
  }
  .bbn-finder-advanced-toggle,
  .bbn-finder-reset {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
  }
  .bbn-finder-advanced-toggle { background: #e2571e !important; color: #fff !important; border: 0 !important; }
  .bbn-finder-reset           { background: #fff !important; color: #263445 !important; border: 1px solid #dfe6ec !important; }

  /* --- 结果表 --- */
  .bbn-finder-table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .bbn-finder-count,
  .bbn-finder-meta {
    font-size: 13px !important;
  }

  /* --- 对比条 --- */
  .bbn-finder-compare-box {
    left: 12px !important; right: 12px !important;
    padding: 10px 12px !important;
  }
}