/* =============================================================================
 * 修复：产品页吸顶导航遮挡下方内容
 * =============================================================================
 * 现象：
 *   滚动产品页时，顶部那排一级分类按钮会 fixed 吸顶（position:fixed; top:124px），
 *   但因为它脱离了文档流，原位置留下空白，下方内容上跳被它盖住。
 *
 * 原因：
 *   老站的 .tax_nav.active 用 position:fixed + padding-top:35px，
 *   padding 只是给 fixed 元素自己加内边距，并不会在文档流里让出位置。
 *   老站同样如此，只是它每个分类下面有图文介绍（.list 区块很高），
 *   不太容易察觉。
 *
 * 方案：
 *   给 .tax_nav 前面加一个高度占位元素（.tax_nav_placeholder），
 *   吸顶时把占位元素撑开，原位置就不会留空。
 *
 *   用 JS 控制更简单可靠 —— 见 single_product.slots.json 里的脚本。
 *   本文件只负责样式：占位元素默认隐藏，吸顶时显示。
 * ============================================================================= */

/* 占位元素：默认不占空间 */
.tax_nav_placeholder {
  display: none;
}

/* 吸顶状态下：占位元素撑开原位置的高度 */
.tax_nav.sticky-active + .tax_nav_placeholder,
.tax_nav_placeholder.active {
  display: block;
  height: 75px;   /* 与 .tax_nav .item 的高度一致 */
  margin-bottom: 35px;
}

/*
 * 如果不想用 JS 占位，也可用 sticky 替代 fixed：
 *   .tax_nav.active {
 *     position: sticky;
 *     top: 124px;
 *   }
 * 但 sticky 要求父容器不能有 overflow:hidden，且不会脱离文档流（更好）。
 * 想启用请把下面这段的注释去掉，并删掉 JS 的占位逻辑。
 */
.tax_nav.active {
  position: sticky;
  top: 124px;
  width: 100%;
  padding-top: 35px;
  background: #fff;
  z-index: 111;
  /* sticky 不脱离文档流 → 不用占位元素 */
}

/* sticky 生效时不需要占位元素了 */
.tax_nav_placeholder {
  display: none !important;
}