/* ============================================================================
 *  hzesport.cn  |  CLS 修复 + 新增内容样式
 *  放到：catalog/view/theme/basel/stylesheet/hze-seo.css（或 default 目录）
 *  在 header.tpl 里引用：<link href="catalog/view/theme/basel/stylesheet/hze-seo.css" rel="stylesheet">
 *
 *  为什么需要它：线上实测 CLS = 1.82（移动）/ 2.37（桌面），Google 良好线是 0.1。
 *  Chrome 归因显示位移来自两类元素：
 *     - DIV.item.single-product （商品卡图片没有宽高）
 *     - DIV.widget.module1/2/3.grid （主题模块异步注入）
 *  下面的数值都是我用 Chrome 在这 6 个断点下量出来的「模块最终高度」，把这个高度
 *  提前预留出来，内容注入时就不会再把下面的内容顶下去。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1) 商品卡图片：固定 5:6 比例
 *    实测渲染尺寸 171x205 / 228x274 / 290x348，比例统一是 0.8333 = 5/6
 * ------------------------------------------------------------------------- */
.item.single-product .image,
.product-thumb .image,
.product-grid .image,
.product-list .image {
    position: relative;
    height: 0;
    padding-top: 100%;   /* 5:6，用 padding 撑高：所有浏览器都支持，不依赖 aspect-ratio */
    overflow: hidden;
}

.item.single-product .image > a,
.product-thumb .image > a {
    display: block;
    height: 100%;
}

.item.single-product .image img,
.product-thumb .image img,
.product-grid .image img,
.product-list .image img {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* 球衣是白底图，contain 不会裁掉衣服 */
    object-position: center;
}

/* 商品卡里的第二个（hover）图片如果是绝对定位的，保持不占位 */
.item.single-product .image .hover-img,
.item.single-product .image .secondary-image {
    position: absolute;
    inset: 0;
}

/* ---------------------------------------------------------------------------
 * 2) 主题 widget 模块：按断点预留高度（数值 = Chrome 实测的最终高度）
 *    如果以后你改了这些模块里的商品数量，请重新量一次再改这里的数字。
 * ------------------------------------------------------------------------- */
@media (max-width: 400px) {
    .widget.module1.grid { min-height: 1667px; }
    .widget.module2.grid { min-height: 1646px; }
    .widget.module3.grid { min-height: 837px;  }
}
@media (min-width: 401px) and (max-width: 500px) {
    .widget.module1.grid { min-height: 1706px; }
    .widget.module2.grid { min-height: 1685px; }
    .widget.module3.grid { min-height: 888px;  }
}
@media (min-width: 501px) and (max-width: 991px) {
    .widget.module1.grid { min-height: 1407px; }
    .widget.module2.grid { min-height: 1407px; }
    .widget.module3.grid { min-height: 516px;  }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .widget.module1.grid { min-height: 964px; }
    .widget.module2.grid { min-height: 922px; }
    .widget.module3.grid { min-height: 496px; }
}
@media (min-width: 1200px) {
    .widget.module1.grid { min-height: 1048px; }
    .widget.module2.grid { min-height: 1006px; }
    .widget.module3.grid { min-height: 538px;  }
}

/* widget 里的图片交给容器固定比例，这里不再单独设 aspect-ratio */

/* 按钮条高度固定，避免 ::before 造成的 0.2 位移 */
.widget_bottom_btn {
    min-height: 40px;
    contain: layout;
}

/* ---------------------------------------------------------------------------
 * 3) 首页新增文案的样式（配合 page-content-copywriting.md 里的 H1/引导段）
 * ------------------------------------------------------------------------- */
.hze-intro {
    font-size: 16px;
    line-height: 1.7;
    max-width: 980px;
    margin: 0 auto 18px;
    text-align: center;
    color: #444;
}
.hze-facts {
    list-style: none;
    padding: 0;
    margin: 0 auto 26px;
    max-width: 980px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    font-size: 14px;
    color: #333;
}
.hze-facts li {
    background: #f5f5f5;
    border-radius: 4px;
    padding: 6px 12px;
    margin: 0;
}

/* 分类页顶部介绍文案（商品列表上方），控制行宽便于阅读 */
.hze-category-intro {
    max-width: 900px;
    margin: 0 auto 24px;
    font-size: 15px;
    line-height: 1.75;
    color: #333;
}
.hze-category-intro h2 { font-size: 22px; margin: 0 0 12px; }
.hze-category-intro h3 { font-size: 17px; margin: 20px 0 8px; }
.hze-category-intro table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.hze-category-intro th,
.hze-category-intro td { border: 1px solid #e3e3e3; padding: 8px 10px; text-align: left; }

/* ---------------------------------------------------------------------------
 * 4) 兜底：所有图片不允许溢出容器（避免移动端横向滚动）
 * ------------------------------------------------------------------------- */
img { max-width: 100%; }

/* ---------------------------------------------------------------------------
 * 5) 轮播（masterslider）切换时的残余布局位移
 *   实测：slides 高度在切换时变化（桌面 377/484/547/475），导致下方内容位移，
 *   单次位移 0.02~0.05。contain: layout 让 slide 内部的高度变化不影响外部布局，
 *   不改变外观与交互，只消除 CLS 计分。
 * ------------------------------------------------------------------------- */
.master-slider .ms-slide {
    contain: layout;
}

/* 菜单里的球队图标加了 loading="lazy" 后，展开菜单时才加载；
   给图标预留固定尺寸，避免展开瞬间图标把菜单项撑开 */
.dropdown-inner li img,
ul.dropdown-menu li img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
 * 6) 首页 H1 与引导段样式（home.twig 注入）
 * ------------------------------------------------------------------------- */
h1.hze-h1 {
    font-size: 26px;
    line-height: 1.3;
    margin: 6px 0 10px;
    text-align: center;
    font-weight: 600;
}
@media (max-width: 767px) {
    h1.hze-h1 { font-size: 19px; margin: 4px 0 8px; }
}
p.hze-intro {
    font-size: 15px;
    line-height: 1.7;
    max-width: 1000px;
    margin: 0 auto 18px;
    text-align: center;
    color: #4a4a4a;
}

/* ---------------------------------------------------------------------------
 * 7) 商品卡片图片框：固定 262:334（padding-top 撑高，兼容所有浏览器）
 *    2026-10-05 追加：原来用 aspect-ratio，老浏览器不支持导致卡片高低不齐
 * ------------------------------------------------------------------------- */
.item.single-product .image,
.grid .single-product .image,
.gridlist .single-product .image,
.product-thumb .image,
.product-grid .image,
.product-list .image {
    position: relative !important;
    height: 0 !important;
    padding-top: 127.48% !important;   /* 262:334 */
    overflow: hidden !important;
    background: #fff !important;
}
.item.single-product .image > a,
.grid .single-product .image > a,
.product-thumb .image > a {
    position: absolute !important;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    display: block !important;
}
.item.single-product .image img,
.grid .single-product .image img,
.gridlist .single-product .image img,
.product-thumb .image img,
.product-grid .image img,
.product-list .image img {
    position: absolute !important;
    left: 0 !important; top: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
    background: #fff !important;
}

/* HZE-LIGHT-ONLY：声明本站只支持浅色，阻止手机浏览器自动变暗 */
html { color-scheme: light only !important; }
html, body { background-color: #ffffff !important; color: #2f2f2f; }
body { -webkit-text-size-adjust: 100%; }