/* ==========================================================================
   Pulses Football — 首页复刻样式（精简版）
   原站为 Shopify 主题：theme.css(250KB) + 4 个内联提取 CSS + 470KB JS
   本文件仅保留本页实际生效的规则，去除 RTL/打印/其它页面/未用组件样式
   设计令牌与断点（741 / 1000 / 1200）均沿用原站，确保视觉一致
   ========================================================================== */

/* ---------- 1. 字体：Poppins(标题) / Epilogue(小标题) ---------- */
@font-face {
  font-family: Poppins; font-weight: 700; font-style: normal; font-display: swap;
  src: url("font/poppins_n7.woff2") format("woff2"), url("font/poppins_n7.woff") format("woff");
}
@font-face {
  font-family: Poppins; font-weight: 700; font-style: italic; font-display: swap;
  src: url("font/poppins_i7.woff2") format("woff2"), url("font/poppins_i7.woff") format("woff");
}
@font-face {
  font-family: Epilogue; font-weight: 700; font-style: normal; font-display: swap;
  src: url("font/epilogue_n7.woff2") format("woff2"), url("font/epilogue_n7.woff") format("woff");
}
@font-face {
  font-family: Epilogue; font-weight: 700; font-style: italic; font-display: swap;
  src: url("font/epilogue_i7.woff2") format("woff2"), url("font/epilogue_i7.woff") format("woff");
}
@font-face {
  font-family: Epilogue; font-weight: 600; font-style: normal; font-display: swap;
  src: url("font/epilogue_n6.woff2") format("woff2"), url("font/epilogue_n6.woff") format("woff");
}
@font-face {
  font-family: Epilogue; font-weight: 600; font-style: italic; font-display: swap;
  src: url("font/epilogue_i6.woff2") format("woff2"), url("font/epilogue_i6.woff") format("woff");
}

/* ---------- 2. 设计令牌 ---------- */
:root {
  /* 颜色 */
  --heading-color: 0, 0, 0;
  --text-color: 0, 0, 0;
  --background: 255, 255, 255;
  --border-color: 217, 217, 217;
  --progress-bar-color: 255, 255, 255;
  --prev-next-button-background: 255, 255, 255;
  --prev-next-button-color: 0, 0, 0;

  /* 字体 */
  --base-font-size: 15px;            /* <741px 时原站计算值为 15px */
  --heading-font-family: Poppins, sans-serif;
  --heading-font-weight: 700;
  --heading-text-transform: uppercase;
  --text-font-family: Epilogue, sans-serif;
  --text-font-bold-weight: 600;

  /* 字号（<741px 基准） */
  --heading-small-font-size: 12px;
  --heading-h2-font-size: 30px;
  --heading-h6-font-size: 16px;

  /* 圆角 / 表单 */
  --button-border-radius: 0px;
  --block-border-radius-reduced: 0px;
  --form-input-field-height: 48px;

  /* 栅格与间距 */
  --container-max-width: 1600px;
  --container-gutter: 24px;
  --container-max-width-minus-gutters: calc(var(--container-max-width) - var(--container-gutter) * 2);
  --container-outer-width: max(calc((100vw - var(--container-max-width-minus-gutters)) / 2), var(--container-gutter));
  --grid-column-count: 10;
  --grid-gap: 24px;
  --grid-column-width: calc((100vw - var(--container-outer-width) * 2 - var(--grid-gap) * (var(--grid-column-count) - 1)) / var(--grid-column-count));
  --vertical-breather: 48px;
  --product-list-block-spacing: 32px;

  /* 区块级变量（原由 section-settings.css 按 section id 注入，此处改为类名作用域） */
  --section-background: 255, 255, 255;
  --section-logo-background: 0 0 0 / 0.0;
  --section-products-per-row: 2;
  --section-logo-count: 6;
  --header-background: 255, 255, 255;
  --header-text-color: 0, 0, 0;
  --reduce-header-padding: 0;
}

/* ≥741px */
@media screen and (min-width: 741px) {
  :root {
    --base-font-size: 16px;
    --container-gutter: 40px;
    --grid-column-count: 20;
    --vertical-breather: 64px;
    --heading-small-font-size: 13px;   /* 原站 ≥741px 即为 13px */
    --heading-h2-font-size: 38px;
    --heading-h6-font-size: 18px;
    --form-input-field-height: 52px;
  }
}
/* ≥1200px */
@media screen and (min-width: 1200px) {
  :root {
    --vertical-breather: 80px;
    --product-list-block-spacing: 48px;
    --heading-small-font-size: 13px;
    --heading-h2-font-size: 48px;
  }
}
/* ≥1600px */
@media screen and (min-width: 1600px) {
  :root { --vertical-breather: 90px; }
}

/* ---------- 3. 基础重置 ---------- */
*, ::before, ::after { box-sizing: border-box; }
/* 原站 html 字号：<741px 为 15px，≥741px 为 16px（来自 section-settings.css） */
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  font-size: 15px;
}
@media screen and (min-width: 741px) { html { font-size: 16px; } }
body {
  margin: 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: var(--base-font-size);
  font-weight: 700;
  line-height: 1.7143;              /* 原站：15px 基准 → 25.7143px */
  color: rgb(var(--text-color));
  background: rgb(var(--background));
}
@media screen and (min-width: 741px) { body { line-height: 1.7333; } }  /* 16px 基准 → 27.7333px */
a { color: inherit; text-decoration: none; }
img { vertical-align: top; border-style: none; max-width: 100%; height: auto; }
p:first-child, h1:first-child, h2:first-child, h3:first-child { margin-block-start: 0; }
p:last-child, h1:last-child, h2:last-child, h3:last-child { margin-block-end: 0; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.visually-hidden {
  clip: rect(0 0 0 0); border: 0; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; position: absolute;
}

/* ---------- 4. 布局容器 ---------- */
.container {
  max-width: var(--container-max-width);
  padding-inline: var(--container-gutter);
  width: 100%;
  margin-inline: auto;
}
.section { margin: var(--vertical-breather) 0; display: block; }
.section--flush { margin-block: 0; }
.section__color-wrapper { background: rgb(var(--section-background)); display: flow-root; }

/* 区块标题 */
.section__header {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto min(32px, var(--vertical-breather));
}
@media screen and (min-width: 741px)  { .section__header { margin-block-end: min(40px, var(--vertical-breather)); } }
@media screen and (min-width: 1200px) { .section__header { margin-block-end: min(48px, var(--vertical-breather)); } }

/* ---------- 5. 排版 ---------- */
.heading {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  color: rgb(var(--heading-color));
  text-transform: var(--heading-text-transform);
  display: block;
  margin-block: 0 8px;
}
.h2 { font-size: var(--heading-h2-font-size); letter-spacing: -.6px; line-height: 1.13333; }
@media screen and (min-width: 741px)  { .h2 { letter-spacing: -1px; line-height: 1.10526; } }
@media screen and (min-width: 1200px) { .h2 { letter-spacing: -1px; line-height: 1.08333; } }

.heading--small {
  font-family: var(--text-font-family);
  font-weight: var(--text-font-bold-weight);
  font-size: var(--heading-small-font-size);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.5;               /* <741px：12px × 1.5 = 18px，与原站实测一致 */
  margin: 16px 0;
}
@media screen and (min-width: 741px) { .heading--small { line-height: 1.23077; } }
.heading--small + .h2 { margin-block-start: 16px; }
@media screen and (min-width: 741px) { .heading--small + .h2 { margin-block-start: 24px; } }

.h6 { font-size: var(--heading-h6-font-size); line-height: 1.25; }
/* 原站实测：<741px = 13px / 19.5px；≥741px = 14px / 21.5384px */
.text--xsmall { font-size: calc(var(--base-font-size) - 2px); line-height: 1.5; }
@media screen and (min-width: 741px) { .text--xsmall { font-size: calc(var(--base-font-size) - 2px); line-height: 1.53846; } }
.text--subdued { color: rgba(var(--text-color), .7); }

/* ---------- 6. 公告栏 ---------- */
.announcement-bar {
  background: rgb(0, 0, 0);
  color: #fff;
  display: flex;
  align-items: center;
  /* 原站 announcement-bar 是自定义元素：移动端 position:static，≥741px 为 relative */
  /* 原站 justify-content：移动端 space-between，≥741px 为 center */
  justify-content: space-between;
  padding-inline: 20px;
}
@media screen and (min-width: 741px) {
  .announcement-bar { position: relative; justify-content: center; }
}
/* 原站移动端公告栏实测 49.5px：文案 13px/1.5（19.5）+ 上下 padding 15px×2 */
@media screen and (max-width: 740px) {
  .announcement-bar__message { padding-block: 15px; }
  .announcement-bar__message p { font-size: 13px; line-height: 1.5; }
}
/* 原站箭头为 button.tap-area（display:block，宽 12px），此处保持同尺寸 */
.announcement-bar__arrow { display: block; padding-inline: 0; color: #fff; }
.announcement-bar__arrow svg { display: block; width: 12px; height: 10px; }
/* 原站 .announcement-bar__list 为 flex:0 1 auto（按内容收缩，不撑满），
   实测桌面宽 575px、移动 317.6px；若用 flex:1 会撑满整行导致文案左移。 */
.announcement-bar__list { padding-inline: 10px; flex: 0 1 auto; }
.announcement-bar__message { text-align: center; padding-block: 15px; }
/* 公告文案可配置链接：继承公告条白字，无下划线，hover 加下划线 */
.announcement-bar__message a { color: inherit; text-decoration: none; }
.announcement-bar__message a:hover { text-decoration: underline; }
@media screen and (min-width: 741px) {
  .announcement-bar { padding-inline: var(--container-gutter); }
  .announcement-bar__list { padding-inline: 40px; }
  /* 原站该容器为 flex item，宽度按内容收缩并受 min/max 约束：
     实测桌面文案宽 495px（min-width 生效后即为 495），而非撑满 1000px。 */
  .announcement-bar__message {
    flex: 0 1 auto;
    width: max-content;
    min-width: 495px;
    max-width: 1000px;
  }
}

/* ---------- 7. 页头 ---------- */
.header {
  background: rgb(var(--header-background));
  color: rgb(var(--header-text-color));
  display: block;
  position: sticky;
  top: 0;
  z-index: 4;
}
.header__wrapper {
  display: flex;
  align-items: center;
  padding-block: calc(27px - var(--reduce-header-padding) * 6px);
}
@media screen and (max-width: 740px) { .header__wrapper { padding-block: 20px; } }

.header__inline-navigation { flex: 1 1 0; display: flex; align-items: center; }
.header__linklist { display: flex; flex-wrap: wrap; row-gap: 12px; }
.header__linklist-item:not(:last-child) { margin-inline-end: 32px; }
.header__linklist-link { display: block; }
.header__logo { flex: 1 1 0; margin: 0; display: block; position: relative; }
.header__logo-image { width: max-content; display: block; max-width: 100px; }
.header__secondary-links { flex: 1 1 0; }
.header__icon-list { display: flex; align-items: center; gap: 16px; }
.header__icon-wrapper { display: flex; align-items: center; }

/* 移动端与平板：隐藏桌面导航；Logo 不拉伸（原站 flex-grow:0，宽度由图片自身决定） */
@media screen and (max-width: 999px) {
  .header__linklist { display: none; }
  .header__logo { flex: 0 0 auto; }
}
@media screen and (min-width: 741px) { .header__logo-image { max-width: 120px; } }
/* 桌面：Logo 置前、导航居中、隐藏移动图标 */
@media screen and (min-width: 1200px) {
  .header__logo { order: -1; }
  .header__inline-navigation { flex: 1 1 auto; justify-content: center; max-width: max-content; margin-inline: 48px; }
  .header__icon-list { display: none; }
}

/* ---------- 8. 轮播 ---------- */
.slideshow { display: block; position: relative; }
.slideshow__slide-list { position: relative; }
.slideshow__slide { display: block; position: relative; z-index: 1; }
.slideshow__slide[hidden] { visibility: hidden; z-index: 0; position: absolute; inset: 0; }
.slideshow__slide-inner { display: flex; align-items: center; width: 100%; height: 100%; position: relative; }
/* 用 padding 撑高宽比（兼容不支持 aspect-ratio 的旧浏览器） */
.slideshow__slide-inner::before {
  content: "";
  width: 0;
  display: block;
  padding-block-end: calc(100 / var(--mobile-image-aspect-ratio) * 1%);
}
.slideshow__image-wrapper { overflow: hidden; position: absolute; inset: 0; }
.slideshow__image { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.slideshow__nav {
  z-index: 1;
  pointer-events: none;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
}
.slideshow__progress-bar { pointer-events: auto; flex-basis: 48px; margin: 0 8px; padding: 18px 0; position: relative; }
.slideshow__progress-bar::before,
.slideshow__progress-bar::after {
  content: "";
  background: rgba(var(--progress-bar-color), .5);
  width: 100%;
  height: 2px;
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
}
.slideshow__progress-bar::after { background: rgb(var(--progress-bar-color)); transform-origin: left; transform: scaleX(0); }
.slideshow__progress-bar[aria-current="true"]::after { transform: scaleX(1); }
.slideshow--single .slideshow__nav { display: none; }

/* 桌面图/移动图的切换断点是 1000px（hidden-pocket = <1000px 显示移动图），
   因此宽高比也必须同步在 1000px 切换，否则平板会用桌面比例配移动图 */
@media screen and (min-width: 1000px) {
  .slideshow__slide-inner::before { padding-block-end: calc(100 / var(--image-aspect-ratio) * 1%); }
  .slideshow__nav { bottom: 23px; }
  .slideshow__progress-bar { flex-basis: 64px; }
}

/* ---------- 9. 商品列表 ---------- */
/* 原站：默认 24px(--grid-gap)，仅 ≤740px 降为 12px */
.product-list { --product-list-column-gap: var(--grid-gap); position: relative; }
.product-list__inner {
  display: grid;
  overflow: hidden;                 /* 原站 product-list__inner 带 overflow:hidden */
  grid-template-columns: repeat(auto-fit,
    calc(100% / var(--section-products-per-row) - var(--product-list-column-gap) * (var(--section-products-per-row) - 1) / var(--section-products-per-row)));
  gap: var(--product-list-block-spacing) var(--product-list-column-gap);
  justify-content: safe center;
}
@media screen and (max-width: 740px) {
  .product-list { --product-list-column-gap: 12px; }
  .product-list__inner:not(.product-list__inner--scroller) { margin-inline: calc(-1 * var(--container-gutter) / 2); }
}
.product-list__inner--scroller { overflow-x: auto; }
/* <1000px：外层 .scroller 已负边距出血满宽，inner 只需 auto-flow:column + 内边距 */
@media screen and (max-width: 999px) {
  .product-list__inner--scroller {
    padding-inline: var(--container-gutter);
    grid-template-columns: none;
    grid-auto-columns: 52vw;
    grid-auto-flow: column;
    min-width: min-content;
  }
}
@media screen and (min-width: 741px) and (max-width: 999px) {
  .product-list__inner--scroller { grid-auto-columns: 35vw; }
}
@media screen and (min-width: 1000px) {
  .product-list__inner--scroller {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% / var(--section-products-per-row) - (var(--grid-gap) / var(--section-products-per-row) * (var(--section-products-per-row) - 1)));
    margin-inline: 28px;
    scroll-snap-type: x mandatory;
    overflow: auto hidden;
  }
  .product-list__inner--scroller .product-item { scroll-snap-align: end; }
}

/* ---------- 9b. 按钮与区块页脚 ---------- */
/* 原站 .button：line-height 撑高（--button-height: 48/<741px, 52/≥741px） */
:root { --button-height: 48px; }
@media screen and (min-width: 741px) { :root { --button-height: 52px; } }
.button {
  -webkit-appearance: none; appearance: none;
  line-height: var(--button-height);
  height: var(--button-height);
  text-align: center;
  border-radius: var(--button-border-radius);
  background: rgb(var(--button-background, 14, 185, 24));
  color: rgb(var(--button-text-color, 255, 255, 255));
  padding: 0 30px;
  text-decoration: none;
  display: inline-block;
  position: relative;
  font-family: var(--text-font-family);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
@media screen and (min-width: 741px) {
  .button { padding: 0 35px; font-size: 14px; letter-spacing: 2px; }
}
.button--primary {
  --button-background: 14, 185, 24;
  --button-text-color: 255, 255, 255;
}
/* 原站 .section__footer：margin-block-start: min(Npx, --vertical-breather)
   → <741px 32px / 741-1199px 40px / ≥1200px 48px（--vertical-breather 分别为 48/64/80） */
.section__footer { text-align: center; margin-block-start: 32px; }
@media screen and (min-width: 741px)  { .section__footer { margin-block-start: 40px; } }
@media screen and (min-width: 1200px) { .section__footer { margin-block-start: 48px; } }

/* 滚动型翻页按钮：absolute，不占高度；<1000px 隐藏 */
.product-list__prev-next { display: none; }
@media screen and (min-width: 1000px) {
  .product-list__prev-next {
    pointer-events: none;
    display: flex; justify-content: space-between;
    width: 100%;
    position: absolute;
    top: calc(var(--item-width, 0px) / var(--smallest-image-aspect-ratio, 1) / 2 - 28px);
  }
  .product-list__arrow {
    opacity: 0; visibility: hidden; transform: scale(.5);
    transition: opacity .15s ease-in-out, visibility .15s ease-in-out, transform .15s ease-in-out;
  }
  .product-list__arrow:not([disabled]) { opacity: 1; visibility: visible; transform: scale(1); }
}
.u-smallest-image-aspect-ratio-1000 { --smallest-image-aspect-ratio: 1; }
.u-smallest-image-aspect-ratio-1021 { --smallest-image-aspect-ratio: 1.02125; }
/* 原站 item-width 由 section 设置注入：容器宽减去两侧 28px 后按列数均分 */
@media screen and (min-width: 1000px) {
  .section--products {
    --item-width: calc((min(100vw - var(--container-gutter) * 2, var(--container-max-width-minus-gutters)) - 56px) / var(--section-products-per-row) - (var(--grid-gap) / var(--section-products-per-row) * (var(--section-products-per-row) - 1)));
  }
}

/* 精选商品区块：列数随断点递进（原站 --section-products-per-row） */
@media screen and (min-width: 741px)  { .section--products { --section-products-per-row: 3; } }
@media screen and (min-width: 1000px) { .section--products { --section-products-per-row: 4; } }
@media screen and (min-width: 1200px) { .section--products { --section-products-per-row: 6; } }

/* 商品卡 */
.product-item { display: flex; flex-direction: column; position: relative; }
.product-item__image-wrapper { display: block; position: relative; overflow: hidden; margin-block-end: 16px; width: 100%; }
.product-item__aspect-ratio {
  aspect-ratio: var(--aspect-ratio);
  display: block;
  position: relative;
  margin-inline: auto;
  isolation: isolate;
}
.product-item__aspect-ratio img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: var(--block-border-radius-reduced);
}
/* 副图始终参与布局（原站实测：移动端同样占据 primary 的完整尺寸，仅靠
   visibility/opacity 隐藏），不能用 display:none，否则会塌成 0x0。
   可见性由 hover 态切换（见下方 @media(hover:hover) 规则）。 */
.product-item__secondary-image {
  visibility: hidden; opacity: 0;
  object-fit: contain;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
}
.product-item__image-wrapper--multiple .product-item__primary-image { transition: opacity .3s ease-in-out, visibility .3s ease-in-out; }
/* 原站：info 为 flex 列容器并 flex-grow:1，滚动型列表中会被最高的商品卡拉伸对齐 */
.product-item__info { text-align: center; display: flex; flex-direction: column; flex-grow: 1; justify-content: flex-start; }
.product-item-meta__title { display: block; line-height: 1.6; margin-block-end: 4px; }

/* 原站 .product-item__image-wrapper { margin-block-end: 24px } 在 @media(min-width:1000px) 内 */
@media screen and (min-width: 1000px) {
  .product-item__image-wrapper { margin-block-end: 24px; }
}
@media screen and (min-width: 741px) {
  .product-item-meta__title { line-height: 1.5; }
}
@media (hover: hover) and (min-width: 741px) {
  .product-item__image-wrapper--multiple:hover .product-item__primary-image { visibility: hidden; opacity: 0; }
  .product-item__image-wrapper--multiple:hover .product-item__secondary-image { visibility: visible; opacity: 1; }
}

/* 商品图比例工具类 */
.u-aspect-ratio-1000 { --aspect-ratio: 1; }
.u-aspect-ratio-1021 { --aspect-ratio: 1.02125; }
.u-aspect-ratio-648  { --aspect-ratio: .6475; }
.u-aspect-ratio-749  { --aspect-ratio: .74875; }
.u-aspect-ratio-750  { --aspect-ratio: .75; }
.u-aspect-ratio-774  { --aspect-ratio: .77375; }
.u-aspect-ratio-805  { --aspect-ratio: .805; }
.u-aspect-ratio-814  { --aspect-ratio: .81375; }
.u-aspect-ratio-832  { --aspect-ratio: .8325; }

/* ---------- 10. Logo 列表 ---------- */
.logo-list { display: block; position: relative; }
.logo-list__list {
  --logos-per-row: 2;
  --logos-gap: 8px;
  display: grid;
  grid-template-columns: repeat(min(var(--logos-per-row), var(--section-logo-count)), minmax(140px, 200px));
  gap: var(--logos-gap);
  justify-content: center;
}
.logo-list__item {
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgb(var(--section-logo-background));
  border-radius: var(--block-border-radius-reduced);
}
/* 原站 logo 图：width 由 u-width-* 定，height 由 width/height 属性推导的 aspect-ratio 等比得出
   （img { max-width:100% } 已限制不溢出） */
.logo-list__image { display: block; height: auto; }
.u-width-100 { width: 100px; }
.u-width-200 { width: 200px; }

/* 轮播型：<1000px 横向滚动 */
@media screen and (max-width: 999px) {
  .logo-list--carousel .logo-list__list { grid-template-columns: none; grid-auto-columns: 140px; grid-auto-flow: column; }
  .logo-list--grid { padding-inline: var(--container-gutter); }
}
@media screen and (min-width: 741px) {
  .logo-list__list { --logos-per-row: 3; --logos-gap: 16px; }
  .logo-list--carousel .logo-list__list { grid-auto-columns: 185px; }
}
@media screen and (min-width: 1000px) {
  .logo-list__list { --logos-per-row: 6; --logos-gap: 24px; }
  .logo-list--carousel .logo-list__prev-next + .logo-list__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% / var(--logos-per-row) - (var(--logos-gap) / var(--logos-per-row) * (var(--logos-per-row) - 1)));
    justify-content: flex-start;
    margin-inline: 88px;
    overflow: hidden;
  }
  .logo-list__prev-next {
    pointer-events: none;
    display: flex; justify-content: space-between;
    width: 100%;
    position: absolute;
    top: calc(50% - 28px);
  }
  .logo-list__arrow {
    opacity: 0; visibility: hidden; transform: scale(.5);
    transition: opacity .15s ease-in-out, visibility .15s ease-in-out, transform .15s ease-in-out;
  }
  .logo-list__arrow:not([disabled]) { opacity: 1; visibility: visible; transform: scale(1); }
}
@media screen and (min-width: 1200px) {
  .logo-list--grid { margin-inline: calc(var(--grid-column-width) + var(--grid-gap)); }
}

/* 原站尾部有一个空的 custom-liquid 区块（div.shopify-section > section.section，无内容）。
   实测：其 .section 的 margin-block 为 --vertical-breather —— top margin 计入 body 高度，
   bottom margin 穿透 body 计入 html（故 html 比 body 高一个 breather）。
   结论：整页贡献 = 2 × --vertical-breather（桌面 160 / 平板 128 / 移动 96）。
   高度 0 的空块会发生 margin collapse-through：其 mt 与 mb 折叠并整体穿透 body，
   最终只在 html 上留下 1 个 breather（复刻实测：body 7529.3 / html 7609.3）。
   原站实测则是 body 7609.3 / html 7689.3，即 footer 下方共 2 个 breather 的空白，
   且 top 那一份被 body 计入。用 body 的 padding-block-end 补回这 1 份，
   使 body 与 html 高度与原站逐一对齐（视觉同为 footer 下方的白色留白）。 */
.section--empty { height: 0; }
body { padding-block-end: var(--vertical-breather); }

/* 横向滚动容器：<1000px 负边距出血 */
.scroller { position: relative; }
@media screen and (max-width: 999px) {
  .scroller {
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--container-gutter));
    scrollbar-width: none;
    overflow: auto hidden;
  }
  .scroller::-webkit-scrollbar { display: none; }
  .scroller__inner {
    padding-inline: var(--container-gutter);
    min-width: min-content;
    margin-inline: auto;
  }
}
.hide-scrollbar { scrollbar-width: none; overflow: auto hidden; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* 前后翻页按钮 */
.prev-next-buttons { pointer-events: none; display: inline-grid; }
.prev-next-button {
  background: rgb(var(--prev-next-button-background));
  color: rgb(var(--prev-next-button-color));
  border: 1px solid rgba(var(--prev-next-button-color), .15);
  border-radius: var(--button-border-radius);
  pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  overflow: hidden;
}
.prev-next-button[disabled] { color: rgba(var(--prev-next-button-color), .3); }
.prev-next-button svg { width: 100%; }
.prev-next-buttons:not(.prev-next-buttons--row) .prev-next-button:last-child { border-top: none; }
@media screen and (min-width: 741px) { .prev-next-button:not(.prev-next-button--small) { width: 56px; height: 56px; } }

/* ---------- 11. 图标文字区 ---------- */
/* 原站该区块的 margin 由 section settings 单独注入固定 40px（非 --vertical-breather），
   且在所有断点恒定。实测：移动端/桌面 twi .section 均为 mt=40 mb=40 */
.section--twi { margin-block: 40px; }
.text-with-icons { display: block; }
.text-with-icons__list {
  scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--container-gutter));
  display: flex;
}
.text-with-icons__item {
  text-align: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  flex: none;
  width: 100%;
  padding: 0 48px;
  display: block;
}
/* 原站移动端（<1000px）text-with-icons 是横向滚动轮播：
   4 个 item 依次排列在 x = 0 / 390 / 780 / 1170，全部可见（由容器 overflow 裁切），
   通过 scroll-snap 切换。这里的 hidden 属性被 native-carousel-item 忽略。
   复刻页同样让所有 item 留在 flex 流中横向排布，不加任何隐藏样式。 */
.text-with-icons__icon-wrapper { margin-block-end: 16px; }
.text-with-icons__icon-wrapper > svg { display: block; }   /* 原站 svg 为 block，高度 24px */
.text-with-icons__icon-wrapper > * { margin: 0 auto; }
/* 原站该间距为 section 级变量，实测：<741px = 16px、741~999px = 24px、≥1000px = 16px */
.text-with-icons__content-wrapper .heading + p { margin-block-start: 16px; }
@media screen and (min-width: 741px) {
  .text-with-icons__content-wrapper .heading + p { margin-block-start: 24px; }
}
@media screen and (min-width: 1000px) {
  .text-with-icons__content-wrapper .heading + p { margin-block-start: 16px; }
}
/* 原站 twi 标题 margin-block-end 由 section 变量注入，实测所有断点恒为 13px */
.text-with-icons__content-wrapper .heading { margin-block-end: 13px; }
/* 原站正文末尾带两个 <br>，会多出 2 行行高。复刻页在构建时保留等价的空行，
   这里仅保证空行参与布局计算（<br> 本身即可，无需额外样式）。 */
/* 原站 page-dots 元素带 margin-block-end: -6px（抵消按钮的 6px 下 margin），
   仅在移动端可见（≥1000px 时 dots 整体 display:none） */
.text-with-icons__dots {
  display: flex; justify-content: center;
  margin-block-start: 26px;
  margin-block-end: -6px;
}
.dots-nav__item {
  background: rgb(var(--text-color));
  border-radius: 6px;
  opacity: .3;
  width: 6px; height: 6px;
  margin: 6px;
  transition: opacity .2s ease-in-out;
}
.dots-nav__item[aria-current="true"] { opacity: 1; }

@media screen and (min-width: 1000px) {
  .text-with-icons__list {
    display: grid;
    grid-auto-columns: minmax(200px, 400px);
    grid-auto-flow: column;
    justify-content: center;
    gap: 48px;
    margin-inline: 0;
  }
  .text-with-icons__item { padding: 0; }
  .text-with-icons__dots { display: none; }
}

/* ---------- 12. 页脚 ---------- */
.footer {
  background: rgb(0, 0, 0);
  --heading-color: 255, 255, 255;
  --text-color: 255, 255, 255;
  --border-color: 38, 38, 38;
  color: rgb(255, 255, 255);
  padding-block: 48px;
}
.footer__item-list { display: grid; grid-template-columns: 1fr 1fr; justify-content: space-between; gap: 40px; }
.footer__item { word-break: break-word; max-width: 325px; }
/* 原站默认 12px，≥1000px 才升到 20px */
.footer__item-title { margin-block-end: 12px; }
/* 原站 newsletter 段落末尾带两个 <br>（多 2 行行高）；复刻页构建时保留等价空行。 */
.footer__item--newsletter .footer__item-content > p:first-child { margin-block-end: 15px; }
@media screen and (min-width: 741px) {
  .footer__item--newsletter .footer__item-content > p:first-child { margin-block-end: 16px; }
}
.footer__aside { margin-block-start: 42px; }
.footer__copyright,
.footer__payment-methods { color: rgba(255, 255, 255, .7); margin-block-start: 32px; display: block; }
.footer__copyright { display: flex; align-items: center; }
.footer__follow-and-payment { gap: 16px; margin-inline-start: auto; display: grid; }
/* 原站：默认（<741px）标签独占一行并带 8px 下间距；≥741px 转为 flex 同行且下间距归零。
   注意声明顺序——这条必须写在 ≥741px 媒体查询“之前”，否则同特异性会反过来覆盖掉 0。 */
.footer__payment-methods-label { margin-block-end: 8px; display: inline-block; }
@media screen and (min-width: 741px) {
  .footer__payment-methods { display: flex; align-items: center; }
  .payment-methods-list--auto { grid-auto-flow: column; }
  .footer__payment-methods-label { margin-block-end: 0; margin-inline-end: 14px; }
}
/* 原站该容器是 grid（gap:16px），内含两个子项：.footer__payment-methods 与一个
   高度 0 的 .footer__follow-on-shop。第二行虽为 0 高，但仍占一个 grid row，
   因此容器总高 = 第一行高度 + 16px(gap) + 0。
   复刻页去掉了空节点，这里用 16px 的 padding-block-end 补回那一行 + gap 的高度贡献。 */
.footer__follow-and-payment { padding-block-end: 16px; }
/* 原站为全局规则（非媒体查询内），桌面同样跨 2 列 */
.footer__item--newsletter { grid-column: span 2; }
.linklist__item a { display: inline-block; word-break: break-word; }
.linklist__item:not(:first-child) { padding-block-start: 12px; }
.link--faded { transition: opacity .25s ease-in-out; }
.link--faded:hover { opacity: .7; }
.square-separator {
  vertical-align: middle; background: currentColor;
  flex-shrink: 0; width: 4px; height: 4px; margin: 0 8px;
  display: inline-block; position: relative;
}
.square-separator--block { margin-inline-start: 12px; margin-inline-end: 12px; top: 1px; }
.square-separator--subdued { opacity: .5; }
/* 支付方式：原站内联 SVG 徽章（38x24） */
.payment-methods-list { grid-template-columns: repeat(auto-fit, 38px); gap: 8px; display: grid; }
.payment-methods-list svg { width: 38px; height: 24px; display: block; }

@media screen and (min-width: 741px) {
  .footer__item-list { grid-template-columns: 1fr 1fr 1fr; }
  .footer__item--newsletter { grid-column: span 2; }
}

/* ---------- 页脚 Get A Quote 转化区块（替代原邮箱订阅） ----------
   深色页脚内做高亮卡：品牌绿渐变底 + 描边，吸引点击去 /get-a-quote/ 留言 */
.footer__item--quote {
  max-width: 420px;      /* 覆盖 .footer__item 的 325px，给转化内容更多宽度 */
  padding: 24px;
  background: linear-gradient(135deg, rgba(14, 185, 24, 0.14), rgba(14, 185, 24, 0.03));
  border: 1px solid rgba(14, 185, 24, 0.35);
}
.footer__item--quote .footer__item-title { margin-block-end: 14px; }
.sj-fq-lead { margin: 0 0 16px; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, 0.78); }
.sj-fq-points {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.sj-fq-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
}
.sj-fq-points svg { flex: 0 0 auto; color: rgb(14, 185, 24); }
.sj-fq-cta {
  padding: 14px 28px;
  font-size: 14px;
  letter-spacing: 0.08em;
}
/* 移动端卡片呼吸感稍收 */
@media screen and (max-width: 740px) {
  .footer__item--quote { padding: 20px; }
  .sj-fq-cta { width: 100%; }
}
@media screen and (min-width: 1000px) {
  .footer { padding-block-start: 72px; padding-block-end: 50px; }
  /* 桌面：转为按列自动排布（列宽由内容 max-content 决定）。
     注意必须同时把 newsletter 的 span 2 复位为 1，否则会多算出一个空列，
     导致各列整体左移（实测 Business Policies Δx=92、Get Exclusive Offers Δx=184）。 */
  .footer__item-list { grid-template-columns: none; grid-auto-flow: column; }
  .footer__item--newsletter { grid-column: span 1; }
  .footer__item-title { margin-block-end: 20px; }
  .footer__aside {
    display: flex; flex-wrap: nowrap;
    justify-content: flex-start; align-items: center;
    row-gap: 24px;
    margin-block-start: 50px;
  }
  .footer__copyright,
  .footer__payment-methods { margin-block-start: 0; }
  .footer__payment-methods { margin-inline-start: auto; }
  .linklist__item:not(:first-child) { padding-block-start: 6px; }
}

/* ---------- 13. 表单 ---------- */
.input { position: relative; }
/* 原站浏览器默认 input 字号为 13.3333px（Chrome UA 样式），但此处实测原站为 16px/15px，
   即表单元素继承了页面字号。显式声明以保证与原站一致。 */
.input__field {
  -webkit-appearance: none; appearance: none;
  font-family: inherit;
  font-size: var(--base-font-size);
  font-weight: inherit;
  height: var(--form-input-field-height);
  line-height: var(--form-input-field-height);
  border-radius: var(--button-border-radius);
  border: 1px solid rgba(var(--text-color), .15);
  color: inherit; text-align: start;
  background: none; width: 100%; padding: 0 18px;
  transition: border .2s ease-in-out;
}
.input__field:focus { border-color: rgb(var(--text-color)); outline: none; }
/* 原站规则：默认态 transform: translateY(0)（不做缩放）；
   仅当输入框聚焦或已填值（:focus-within ~ / .is-filled ~）时才上移缩放。
   默认就写缩放会让占位文字位置偏上（实测 Δy≈22px）。 */
.input__label {
  pointer-events: none;
  color: rgba(var(--text-color), .7);
  white-space: nowrap; padding: 0 5px; line-height: 1;
  position: absolute; top: calc((var(--form-input-field-height) / 2) - .5em); left: 12px;
  transform: translateY(0);
  transform-origin: left top;
  transition: transform .2s ease-in-out;
}
:focus-within ~ .input__label,
.is-filled ~ .input__label {
  transform: scale(.733) translateY(calc(-24px - .5em)) translate(3.665px);
}
.input__submit-icon { position: absolute; top: 50%; transform: translateY(-50%); right: 20px; }

/* ---------- 14. 响应式显隐工具类 ---------- */
@media screen and (max-width: 999px) { .hidden-pocket { display: none !important; } }
@media screen and (min-width: 1000px) { .hidden-lap-and-up { display: none !important; } }

/* ---------- 15. 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}