/* =========================================================
       V19 手机端顶部表头原生滚动同步修复
       1) 手机端可直接在表头或内容区左右滑动
       2) 第一行除左上角外，严格跟随内容横向移动
       3) 桌面端第一列固定；手机端第一列取消固定
       4) 表格滚到底部后，鼠标滚轮与纵向触摸可继续滚动页面
       5) Specification、Packaging、Payment 三张表统一启用
       6) 横向溢出时，表格容器下方常驻显示自定义滚动条
       ========================================================= */

    .richtext .comiled-detail,
    .rich-text-description .comiled-detail,
    #J-rich-text-description .comiled-detail,
    .comiled-detail {
      width: 100% !important;
      max-width: none !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .comiled-sticky-shell,
    .comiled-sticky-stage {
      position: relative !important;
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    .comiled-sticky-stage {
      isolation: isolate !important;
    }

    /* 主参数表与其他信息表统一成为双向滚动容器。 */
    .richtext .comiled-spec-scroll,
    .rich-text-description .comiled-spec-scroll,
    #J-rich-text-description .comiled-spec-scroll,
    .comiled-detail .comiled-spec-scroll,
    .richtext .comiled-table-wrap,
    .rich-text-description .comiled-table-wrap,
    #J-rich-text-description .comiled-table-wrap,
    .comiled-detail .comiled-table-wrap {
      position: relative !important;
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      overflow: auto !important;
      overflow-x: auto !important;
      overflow-y: auto !important;
      overscroll-behavior: auto !important;
      overscroll-behavior-x: auto !important;
      overscroll-behavior-y: auto !important;
      scrollbar-gutter: auto !important;
      -webkit-overflow-scrolling: touch !important;
      touch-action: auto !important;
      scroll-behavior: auto !important;
      isolation: isolate !important;
    }

    .comiled-detail .comiled-spec-scroll {
      max-height: 620px !important;
    }

    .comiled-detail .comiled-table-wrap {
      max-height: 520px !important;
    }

    /* 主表格保持内容宽度；列增加后自动出现横向滚动。 */
    .richtext .comiled-spec-table,
    .rich-text-description .comiled-spec-table,
    #J-rich-text-description .comiled-spec-table,
    .comiled-detail .comiled-spec-table {
      width: max-content !important;
      min-width: 100% !important;
      max-width: none !important;
      inline-size: max-content !important;
      min-inline-size: 100% !important;
      max-inline-size: none !important;
      table-layout: auto !important;
    }

    /* 次级表格在电脑端铺满，手机端保持足够宽度产生横向滚动。 */
    .richtext .comiled-info-table,
    .rich-text-description .comiled-info-table,
    #J-rich-text-description .comiled-info-table,
    .comiled-detail .comiled-info-table {
      width: 100% !important;
      min-width: 640px !important;
      max-width: none !important;
      table-layout: fixed !important;
    }

    /* 关闭旧版原生 sticky，所有固定视觉仅由 V19 镜像层负责，避免重复和抖动。 */
    .comiled-detail .comiled-spec-table thead,
    .comiled-detail .comiled-spec-table tbody,
    .comiled-detail .comiled-spec-table tr,
    .comiled-detail .comiled-spec-table th,
    .comiled-detail .comiled-spec-table td,
    .comiled-detail .comiled-info-table thead,
    .comiled-detail .comiled-info-table tbody,
    .comiled-detail .comiled-info-table tr,
    .comiled-detail .comiled-info-table th,
    .comiled-detail .comiled-info-table td {
      position: static !important;
      top: auto !important;
      right: auto !important;
      bottom: auto !important;
      left: auto !important;
      transform: translate3d(0, 0, 0) !important;
      transform-origin: 0 0 !important;
      will-change: transform !important;
      backface-visibility: hidden !important;
      backface-visibility: visible !important;
    }

    /* 固定第一行：外层 viewport 保持不动，只横向移动内部 track。
       UEESHOP 手机端对隐藏容器的程序化 scrollLeft 支持不稳定，
       使用单轴 translateX 可确保后续型号标题与表格内容严格同步。 */
    .comiled-fixed-header-viewport {
      position: absolute !important;
      z-index: 90 !important;
      overflow: hidden !important;
      pointer-events: none !important;
      background: #f2f4f7 !important;
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
    }

    .comiled-fixed-header-viewport::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
    }

    .comiled-fixed-header-track {
      position: relative !important;
      display: block !important;
      min-height: 100% !important;
      transform: none !important;
      will-change: auto !important;
    }

    /* 固定第一列：仅纵向移动整条轨道，行高和源表逐行实测。 */
    .comiled-fixed-left-viewport {
      position: absolute !important;
      z-index: 80 !important;
      overflow: hidden !important;
      pointer-events: none !important;
      background: #ffffff !important;
    }

    .comiled-fixed-left-track {
      position: relative !important;
      display: block !important;
      width: 100% !important;
      min-width: 100% !important;
      transform: translate3d(0, 0, 0) !important;
      transform-origin: 0 0 !important;
      will-change: transform !important;
      backface-visibility: hidden !important;
    }

    /* 左上角交叉单元格始终固定。 */
    .comiled-fixed-corner {
      position: absolute !important;
      z-index: 110 !important;
      overflow: hidden !important;
      pointer-events: none !important;
      background: #edf0f3 !important;
    }

    .comiled-fixed-cell {
      box-sizing: border-box !important;
      display: flex !important;
      align-items: center !important;
      overflow: hidden !important;
      margin: 0 !important;
    }

    .comiled-fixed-header-cell,
    .comiled-fixed-left-cell {
      position: absolute !important;
    }

    .comiled-fixed-header-viewport,
    .comiled-fixed-corner {
      box-shadow: 0 2px 5px rgba(22, 28, 45, 0.08) !important;
    }

    .comiled-fixed-left-viewport,
    .comiled-fixed-corner {
      box-shadow: 1px 0 0 #d8dde3 !important;
    }

    /* 主滚动容器只保留纵向原生滚动条；横向由下方常驻控制条负责。 */
    .comiled-spec-scroll::-webkit-scrollbar:vertical,
    .comiled-table-wrap::-webkit-scrollbar:vertical {
      width: 12px !important;
    }

    .comiled-spec-scroll::-webkit-scrollbar:horizontal,
    .comiled-table-wrap::-webkit-scrollbar:horizontal {
      height: 0 !important;
    }

    .comiled-spec-scroll::-webkit-scrollbar-track:vertical,
    .comiled-table-wrap::-webkit-scrollbar-track:vertical {
      background: #f1f3f5 !important;
      border-radius: 999px !important;
    }

    .comiled-spec-scroll::-webkit-scrollbar-thumb:vertical,
    .comiled-table-wrap::-webkit-scrollbar-thumb:vertical {
      background: #aeb5bf !important;
      border: 2px solid #f1f3f5 !important;
      border-radius: 999px !important;
    }

    /* 只要表格横向溢出，就在表格容器下方常驻显示。 */
    .comiled-bottom-scrollbar {
      position: relative !important;
      display: none !important;
      width: 100% !important;
      height: 18px !important;
      margin: 7px 0 0 !important;
      padding: 3px !important;
      overflow: hidden !important;
      background: #f1f3f5 !important;
      border: 1px solid #dfe3e8 !important;
      border-radius: 999px !important;
      cursor: pointer !important;
      touch-action: none !important;
      user-select: none !important;
      -webkit-user-select: none !important;
    }

    .comiled-bottom-scrollbar.is-visible {
      display: block !important;
    }

    .comiled-bottom-scrollbar-thumb {
      position: absolute !important;
      top: 3px !important;
      left: 3px !important;
      height: 10px !important;
      min-width: 44px !important;
      margin: 0 !important;
      padding: 0 !important;
      background: #aeb5bf !important;
      border-radius: 999px !important;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45) !important;
      transform: translate3d(0,0,0) !important;
      will-change: transform !important;
      cursor: grab !important;
    }

    .comiled-bottom-scrollbar.is-dragging .comiled-bottom-scrollbar-thumb {
      cursor: grabbing !important;
      background: #8f98a5 !important;
    }

    @media screen and (max-width: 767px) {
      .comiled-detail .comiled-spec-scroll {
        max-height: 620px !important;
      }

      .comiled-detail .comiled-table-wrap {
        max-height: 460px !important;
      }

      .comiled-detail .comiled-info-table {
        min-width: 680px !important;
      }
    }

    /*
     * V19 移动端：
     * - 不固定第一列，也不固定左上角；
     * - 顶部表头本身改成真正可横向滚动的原生容器；
     * - 表头与正文双向同步 scrollLeft，不再依赖 touchmove + preventDefault；
     * - 上下滑动仍交给页面或表格原生滚动。
     */
    @media (hover: none), (pointer: coarse), screen and (max-width: 1024px) {
      .comiled-detail .comiled-sticky-stage,
      .comiled-detail .comiled-spec-scroll,
      .comiled-detail .comiled-table-wrap,
      .comiled-detail .comiled-spec-scroll *,
      .comiled-detail .comiled-table-wrap * {
        touch-action: auto !important;
      }
    }

    @media screen and (max-width: 767px) {
      .comiled-detail .comiled-fixed-left-viewport,
      .comiled-detail .comiled-fixed-corner {
        display: none !important;
      }

      /*
       * 关键修复：固定表头不再是 overflow:hidden 的“假表头”，
       * 而是浏览器可直接用手指横向拖动的原生滚动容器。
       */
      .comiled-detail .comiled-fixed-header-viewport {
        z-index: 90 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        pointer-events: auto !important;
        touch-action: pan-x pan-y pinch-zoom !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
        overscroll-behavior-y: auto !important;
        scroll-behavior: auto !important;
        cursor: grab !important;
      }

      .comiled-detail .comiled-fixed-header-viewport:active {
        cursor: grabbing !important;
      }

      /* 让触摸命中滚动 viewport，而不是被绝对定位的复制单元格截获。 */
      .comiled-detail .comiled-fixed-header-track,
      .comiled-detail .comiled-fixed-header-track * {
        pointer-events: none !important;
        touch-action: inherit !important;
      }

      .comiled-bottom-scrollbar {
        height: 20px !important;
        margin-top: 8px !important;
      }

      .comiled-bottom-scrollbar-thumb {
        top: 4px !important;
        height: 10px !important;
        min-width: 48px !important;
      }
    }