/* ===================================================
   修复：首页产品标签模块 — 手机端图片居中 + 横向滑动
   添加方式：WordPress 后台 → 外观 → 自定义 → 额外CSS
   或直接粘贴到主题的 style.css 末尾
   =================================================== */

/* ---------------------------------------------------
   修复 1：手机端强制标签横向可滑动
   强制 .stk-block-tab-labels 在窄屏下可以内部滚动
   --------------------------------------------------- */
@media (max-width: 689px) {
  .stk-block-tab-labels {
    /* 约束宽度 = 父容器宽度，不扩展到 max-content */
    max-width: 100%;
    /* 强制横向滚动（!important 覆盖可能的冲突） */
    overflow-x: auto !important;
    /* iOS 平滑滚动 */
    -webkit-overflow-scrolling: touch;
  }

  /* 隐藏滚动条但保留滚动能力 */
  .stk-block-tab-labels::-webkit-scrollbar {
    height: 0 !important;
    display: none;
  }

  /* 确保内部 wrapper 不换行，始终超出容器宽度 */
  .stk-block-tab-labels .stk-block-tab-labels__wrapper {
    flex-wrap: nowrap !important;
    width: max-content;
  }
}


/* ---------------------------------------------------
   修复 2：手机端标签内容区图片居中
   适配 Stackable 的 Grid 布局
   --------------------------------------------------- */
@media (max-width: 689px) {
  /* 让 grid 子项（图片/内容列）水平居中 */
  .stk-block-tab-content > .stk-inner-blocks > .stk-block {
    justify-self: center;
    text-align: center;
  }

  /* 图片本身 */
  .stk-block-tab-content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ---------------------------------------------------
   修复 3：确保标签按钮可点击
   修复 all:unset 后可能的 pointer-events 或层叠问题
   --------------------------------------------------- */
.stk-block-tabs__tab {
  /* 确保按钮在最前面，不被隐藏的面板遮挡 */
  position: relative;
  z-index: 2;
  /* 确保接收点击事件 */
  pointer-events: auto;
  /* 确保是块级可交互元素 */
  display: flex !important;
}

/* 隐藏的 tab 面板不应拦截点击 */
.stk-block-tab-content > .stk-inner-blocks > .stk-block[hidden] {
  pointer-events: none;
}