/* Shared header section styles for all product/detail pages.

   These were previously inlined independently into each page and duplicated in
   each product-detail page's own home-header.css.  They now live in one place and
   are consumed alongside css/base.css. */

header-drawer {
  justify-self: start;
  margin-left: -1.2rem;
}

@media screen and (min-width: 990px) {
  header-drawer {
    display: none;
  }
}

.menu-drawer-container {
  display: flex;
}

/* 弹层打开时锁定背景滚动：
   抽屉菜单（global.js）会给 body 加 overflow-hidden-tablet，
   搜索弹窗（details-modal.js）会给 body 加 overflow-hidden，
   这里补上对应的样式，避免弹层展开时背景页面还能滑动。 */
.overflow-hidden,
.overflow-hidden-tablet {
  overflow: hidden;
}

.list-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-menu--inline {
  display: inline-flex;
  flex-wrap: wrap;
}

summary.list-menu__item {
  padding-right: 2.7rem;
}

.list-menu__item {
  display: flex;
  align-items: center;
  line-height: calc(1 + 0.3 / var(--font-body-scale));
}

/* 列表里的链接型菜单项（页脚菜单、抽屉菜单复用），原先各自内联在页面里 */
.list-menu__item--link {
  text-decoration: none;
  padding-bottom: 1rem;
  padding-top: 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .list-menu__item--link {
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
  }
}

/* Keep the brand name on one line in the mobile header grid.  Without this,
   the narrow center column plus base.css word-break can split "HoYLluDLL". */
@media screen and (max-width: 989px) {
  .header__heading-link .h2 {
    white-space: nowrap;
  }
}

/* Mobile safeguard for the product detail pages:
   - prevent horizontal scroll on the document body,
   - clamp the main product layout to the viewport,
   - allow long product titles/score rows to wrap if needed. */
@media screen and (max-width: 989px) {
  /* 只给 body 隐藏横向溢出：如果把 overflow-x: hidden 同时加在 html 上，
     html 会变成一个滚动容器（overflow-y 被计算为 auto），而 normalize.css
     又把 html/body 的高度固定为 100%，滚动就会被“关”在 body 内部，
     移动端会出现整页滑不动的问题。写在 body 上会按规范传播给视口，
     既隐藏横向溢出，又保留正常的整页滚动。 */
  body {
    overflow-x: hidden;
  }

  /* 头部尺寸之前用 px 兜底，是因为商品详情页的 media.css 把 html 的
     font-size 改成了 20px，使 rem 基准翻倍，头部比主页大一圈。
     该问题已从源头修复（assets/product-detail/css/media.css 不再修改
     html 字号），因此这里不再覆写尺寸，统一交给主站共用组件样式
     （base.css / component-*.css）决定，保证与主页完全一致。 */

  .main .m-box,
  .main .m-box .product-m,
  .main .m-box .product-m .product-img-box,
  .main .m-box .product-m .product-info-box {
    max-width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  .main .m-box .product-m .product-info-box .score-box {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.5rem;
  }

  .main .m-box .product-m .product-info-box .score-box .layui-inline {
    margin-left: 0 !important;
  }

  .main .m-box .product-m .product-info-box h1,
  .main .m-box .product-m .product-info-box p {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* Tightest phone screens: the logo no longer needs a px override here.
   Its size now follows the shared component styles (same rem value as the
   home page), so the header grid keeps the same proportions as the home page. */

/* ---- 详情页头部排版收敛：修掉旧站 reset 对头部组件的污染 ----
   商品详情页沿用了旧站的 assets/product-detail/css/normalize.css，它会：
     1) 用元素选择器（html / body / div / ul / li / p / h1~h6 …）把这些元素
        强制成“Microsoft YaHei + 13px”。头部里的每个 div / ul / li 都被单独
        命中，继承链因此拿到微软雅黑，导航文字看起来比主页的 Amiri 更粗更大
        （实测两页字号其实都是 14px，观感差异来自字体）；
     2) 用 a:link / a:visited { color: #fff } 覆盖链接色，a:link 的特异性
        （0-1-1）高于主站 .header__menu-item（0-1-0），使详情页的导航项、
        品牌名、抽屉菜单项变成纯白。
   还原方式：被命中的元素遍布整棵子树，只修最外层容器无效，所以用
   #shopify-section-* 把头部容器内的 div / ul / li 一并还原为“继承主站字体”。
   这里刻意不含 h1~h6 与 p：它们在主站里有显式字体/字号（base.css 的
   .h1 / .h2 / .h5），被 id 选择器覆盖反而会与主页不一致。
   这些取值对主页而言与原来完全相同，等于无操作。 */
#shopify-section-announcement-bar,
#shopify-section-header,
#shopify-section-announcement-bar div,
#shopify-section-header div,
#shopify-section-header ul,
#shopify-section-header li {
  font-family: inherit;
}

/* 旧站 reset 还把导航的 ul / li 压成了 13px，这里还原为继承字号 */
#shopify-section-header,
#shopify-section-header ul,
#shopify-section-header li {
  font-size: inherit;
}

/* 还原链接颜色：导航项默认 75% 前景色、悬停为不透明前景色 */
a.header__menu-item:link,
a.header__menu-item:visited {
  color: rgba(var(--color-foreground), 0.75);
}

a.header__menu-item:hover {
  color: rgb(var(--color-foreground));
}

/* 品牌名与抽屉菜单项在主站默认是不透明前景色 */
a.header__heading-link:link,
a.header__heading-link:visited,
a.menu-drawer__menu-item:link,
a.menu-drawer__menu-item:visited {
  color: rgb(var(--color-foreground));
}

/* 搜索弹窗的容器同样被旧站 reset 压成了 13px，还原成继承字号（主页为 16px）。
   这几个类在 base.css 里都没有 font-size，改的只是继承默认值；
   .header__icons 是弹窗的外层容器，不还原它整条继承链仍是 13px。 */
#shopify-section-header .header__icons,
#shopify-section-header .search-modal,
#shopify-section-header .search-modal__content,
#shopify-section-header .predictive-search,
#shopify-section-header .field {
  font-size: inherit;
}

/* 输入框：主页没有任何规则设置 input 的字体（走浏览器默认），详情页被旧站
   layui 的 input { font-family: inherit } 改成了继承。
   用 revert 回退到浏览器默认值：对主页而言与“原本就没有这条规则”结果相同，
   对详情页则恢复与主页一致。 */
#shopify-section-header input {
  font-family: revert;
}

/* form 也在旧站 reset 的强制列表里，补上它，弹窗内的 label 等文字才能像主页
   一样继承主站字体 */
#shopify-section-header form {
  font-family: inherit;
}