/* 麦尚食品 · 手机端公共样式（原 mob-cn/css/common.css，头尾类名加 m- 前缀） */
/* 手机布局：<1200px */
@media (max-width: 1199.98px) {
  /* ============================================================
     麦尚食品 · 移动端中文版 公共样式
     设计稿 750px，1rem = 100 设计像素（html font-size = min(13.3333vw, 100px)）
     页头 / 页尾 / 菜单 / 通用区块 全站共用
     ============================================================ */

  /* ---------- 基础 ----------
     两套稿子一致的重置（* / body / img / a / ul,ol,li）都在 base.css，
     这里只留手机独有的：rem 基准字号、居中限宽、正文字色、图片不超框。 */
  html {
    font-size: min(13.3333vw, 100px);
  }
  body {
    max-width: 7.5rem;
    margin: 0 auto;
    color: #333;
  }
  img {
    max-width: 100%;
  }
  button {
    font-family: inherit;
    border: 0;
    background: none;
    cursor: pointer;
  }
  h1,
  h2,
  h3,
  h4 {
    font-weight: 600;
  }

  .container {
    width: 100%;
    padding: 0 0.315rem;
  }

  /* 跳转到主内容（无障碍） */
  .skip-link {
    position: absolute;
    left: 0.2rem;
    top: -1rem;
    z-index: 200;
    padding: 0.12rem 0.3rem;
    background: #e60012;
    color: #fff;
    font-size: 0.26rem;
    border-radius: 0.06rem;
    transition: top 0.2s;
  }
  .skip-link:focus {
    top: 0.2rem;
  }

  /* ---------- 页头 ---------- */
  .m-header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 7.5rem;
    z-index: 100;
    height: 1.2rem;
    background: #fff;
    box-shadow: 0 0.02rem 0 #e6e6e6;
    transition: box-shadow 0.3s;
  }
  .m-header.is-scrolled {
    box-shadow: 0 0.04rem 0.24rem rgba(0, 0, 0, 0.1);
  }
  .m-header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.32rem;
  }
  .m-header-logo img {
    width: 3rem;
    height: 0.7rem;
  }
  .header-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  .m-lang-btn {
    width: 0.56rem;
    height: 0.56rem;
    border-radius: 50%;
    background: #e60012;
    color: #fff;
    font-size: 0.24rem;
    font-weight: 600;
    line-height: 0.56rem;
    text-align: center;
    font-family: PingFangSC-Regular, Roboto, 'Helvetica Neue', Helvetica, Tahoma, Arial,
    'PingFang SC-Light', 'Microsoft YaHei', sans-serif;
    transition: transform 0.3s;
  }
  .m-lang-btn:active {
    transform: scale(0.92);
  }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.12rem;
    width: 0.48rem;
    height: 0.48rem;
  }
  .menu-toggle span {
    display: block;
    width: 0.48rem;
    height: 0.04rem;
    background: #999;
    border-radius: 0.02rem;
    transition:
      transform 0.3s,
      opacity 0.3s;
  }
  .menu-toggle[aria-expanded='true'] span:nth-child(1) {
    transform: translateY(0.16rem) rotate(45deg);
    background: #333;
  }
  .menu-toggle[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle[aria-expanded='true'] span:nth-child(3) {
    transform: translateY(-0.16rem) rotate(-45deg);
    background: #333;
  }

  /* ---------- 全屏菜单 ---------- */
  .menu-overlay {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 7.5rem;
    height: 100%;
    height: 100dvh;
    background: #fff;
    z-index: 150;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition:
      opacity 0.35s,
      visibility 0.35s;
  }
  .menu-overlay.is-open {
    visibility: visible;
    opacity: 1;
  }
  .menu-overlay-top {
    height: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.32rem;
    box-shadow: 0 0.02rem 0 #e6e6e6;
  }
  .menu-overlay-top .m-header-logo img {
    width: 3rem;
    height: 0.7rem;
  }
  .menu-close {
    width: 0.48rem;
    height: 0.48rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .menu-close img {
    width: 0.44rem;
    height: 0.44rem;
  }
  .menu-list {
    /* padding: 0.4rem 0.32rem 0.6rem; */
  }
  .menu-list li + li {
    border-top: 0.01rem solid #e6e6e6;
  }
  .menu-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.36rem;
    font-size: 0.4rem;
    color: #333;
    padding: 0 0.6rem;
  }
  .menu-list a img {
    height: 0.32rem;
    transition: transform 0.3s;
  }
  .menu-list a:active img,
  .menu-list a:hover img {
    transform: translateX(0.1rem);
  }
  .menu-list a.is-active {
    color: #e60012;
  }
  body.menu-open {
    overflow: hidden;
  }

  /* ---------- 内页横幅 ---------- */
  .page-hero {
    position: relative;
    margin-top: 1.2rem;
    height: 2.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url(../img/party-banner.webp) center / cover no-repeat;
  }
  .page-hero h1 {
    position: relative;
    font-size: 0.6rem;
    line-height: 0.6rem;
    color: #fff;
    letter-spacing: 0.04em;
  }

  /* ---------- 通用标题 ---------- */
  .section {
    padding: 0.8rem 0 0.9rem;
  }
  /*
   * 这几个区块的底图是装饰性波浪纹，要按容器等比缩放。
   *
   * 原来写成 .section { background-size: contain !important }，但 .section
   * 覆盖面太广，会把所有区块自己写的 background-size 一并压掉；这里点名。
   * 写成 .section.xxx（而不是 .xxx）是为了压过页面 CSS 里
   * .xxx-section { background: … } 简写重置出的 background-size: auto ——
   * mob.css 排在页面 CSS 前面，同特异性会被后者盖掉。
   */
  .section.about-section,
  .section.brand-section,
  .section.history-section,
  .section.culture-section,
  .section.ip-section,
  .section.charity-section,
  .section.party-section {
    background-size: contain;
  }
  .section-head {
    position: relative;
    text-align: center;
    margin-bottom: 0.56rem;
  }
  .section-head h2 {
    position: relative;
    margin-top: -0.22rem;
    font-size: 0.46rem;
    line-height: 0.88rem;
    color: #333;
    letter-spacing: 0.02em;
  }
  .section-head .section-bar {
    display: block;
    width: 0.8rem;
    height: 0.04rem;
    margin: 0.2rem auto 0;
    background: #e60012;
    border-radius: 0.02rem;
  }
  .section-head.on-dark h2 {
    color: #fff;
  }

  /* ---------- 了解更多按钮 ---------- */
  .btn-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.16rem;
    width: 2rem;
    height: 0.64rem;
    border-radius: 0.08rem;
    background: #fdf2f3;
    border: 0.02rem solid #e60012;
    color: #e60012;
    font-size: 0.28rem;
    letter-spacing: 0.02em;
    overflow: hidden;
    position: relative;
    transition: color 0.3s;
    margin: 0 auto;
  }
  .btn-more img {
    width: 0.27rem;
    height: 0.08rem;
    transition: transform 0.3s;
  }
  .btn-more::before {
    content: '';
    position: absolute;
    /* 展开写四条而不是 inset:0 —— inset 要 Safari 14.5+ */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #e60012;
    transform: translateX(-101%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
  }
  .btn-more span,
  .btn-more img {
    position: relative;
    z-index: 1;
  }
  .btn-more:active {
    color: #fff;
  }
  .btn-more:active::before {
    transform: translateX(0);
  }
  .btn-more:active img {
    transform: translateX(0.06rem);
  }

  /* ---------- 标签栏（产品分类） ---------- */
  .tabs-bar {
    display: flex;
    align-items: center;
    height: 0.8rem;
    background: #fff;
    box-shadow: 0 0.02rem 0 #e6e6e6;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs-bar::-webkit-scrollbar {
    display: none;
  }
  .tab {
    flex: 1 0 auto;
    min-width: 1.4rem;
    height: 100%;
    font-size: 0.32rem;
    color: #333;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: color 0.3s;
  }
  .tab.is-active {
    color: #e60012;
    font-weight: 600;
    font-family: PingFangSC-Regular, Roboto, 'Helvetica Neue', Helvetica, Tahoma, Arial,
    'PingFang SC-Light', 'Microsoft YaHei', sans-serif;
  }
  .tab.is-active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 1.6rem;
    height: 0.04rem;
    background: #e60012;
    border-radius: 0.02rem;
  }

  /* ---------- 轮播箭头 + 计数器 ---------- */
  .carousel-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.4rem;
  }
  .carousel-arrow {
    width: 0.72rem;
    height: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s;
  }
  .carousel-arrow img {
    width: 100%;
    height: 100%;
  }
  .carousel-arrow:active {
    background: #f5f5f5;
  }
  .carousel-counter {
    /*
     * 自己撑满中间的余量并居中，不靠两侧箭头「夹」出居中。
     *
     * 原来只有 justify-content: space-between，居中是因为两个箭头等宽 ——
     * 可当前分类只有一个产品时没得翻页，Swiper 会给两个箭头都加上
     * .swiper-button-lock，而它自带的样式表里那条就是 display:none。
     * 箭头一走，这一行只剩计数器一个子元素，space-between 就把它甩到最左边了
     * （首页「我们的产品」切到礼盒类就是这个现象）。
     * flex:1 之后无论箭头在不在，计数器都占满中间那段、文字居中。
     */
    flex: 1;
    text-align: center;
    font-family: PingFangSC-Regular, Roboto, 'Helvetica Neue', Helvetica, Tahoma, Arial,
    'PingFang SC-Light', 'Microsoft YaHei', sans-serif;
    line-height: 0;
  }
  .carousel-counter .cur {
    font-size: 0.36rem;
    color: #e60012;
    font-weight: 700;
  }
  .carousel-counter .total {
    font-size: 0.24rem;
    color: #999;
  }

  /* ---------- 产品卡片 ---------- */
  .prod-card {
    width: 5.4rem;
    margin: 0 auto;
    background: #fff;
    border-radius: 0.08rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .prod-card .prod-img {
    height: auto;
    width: 100%;
    max-width: 100%;
    object-fit: contain;
  }
  .prod-card h3 {
    margin-top: 0.36rem;
    font-size: 0.32rem;
    line-height: 0.48rem;
    color: #333;
  }
  .prod-card .prod-spec {
    margin-top: 0.12rem;
    font-size: 0.26rem;
    color: #999;
  }

  /* ---------- 新闻卡片 ---------- */
  #news-title {
    background: url(../img/news-title-bg.webp) 50% 50% / contain no-repeat;
  }
  .news-card {
    display: flex;
    gap: 0.24rem;
    align-items: center;
    width: 6.87rem;
    margin: 0 auto 0.4rem;
    padding: 0.24rem;
    background: #fff;
    border: 0.01rem solid #e6e6e6;
    border-radius: 0.16rem;
    box-shadow: 0 0 0.24rem rgba(0, 0, 0, 0.08);
    transition:
      transform 0.3s,
      box-shadow 0.3s;
  }
  .news-card:active {
    transform: translateY(-0.04rem);
    box-shadow: 0 0.06rem 0.3rem rgba(0, 0, 0, 0.12);
  }
  .news-card > a {
    display: flex;
    align-items: center;
    gap: 0.24rem;
    flex: 1;
    min-width: 0;
  }
  .news-card .news-thumb {
    width: 2.55rem;
    height: 1.82rem;
    object-fit: cover;
    border-radius: 0.08rem;
    flex-shrink: 0;
  }
  .news-card .news-body {
    flex: 1;
    min-width: 0;
  }
  .news-meta {
    display: flex;
    align-items: center;
    gap: 0.16rem;
  }
  .news-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.26rem;
    height: 0.46rem;
    border: 0.02rem solid #e60012;
    border-radius: 0.04rem;
    color: #e60012;
    font-size: 0.24rem;
    white-space: nowrap;
  }
  .news-date {
    font-size: 0.24rem;
    color: #999;
    white-space: nowrap;
  }
  .news-card h3 {
    margin-top: 0.14rem;
    font-size: 0.28rem;
    line-height: 0.42rem;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .news-card .news-excerpt {
    margin-top: 0.1rem;
    font-size: 0.24rem;
    line-height: 0.38rem;
    color: #999;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .news-card .news-more {
    margin-top: 0.12rem;
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    color: #e60012;
    font-size: 0.24rem;
  }
  .news-card .news-more img {
    width: 0.27rem;
    height: 0.08rem;
    transition: transform 0.3s;
  }
  .news-card:active .news-more img {
    transform: translateX(0.06rem);
  }

  /* 大图头条卡片 */
  .news-feature {
    width: 6.87rem;
    margin: 0 auto 0.4rem;
    border-radius: 0.16rem;
    overflow: hidden;
    background: #fff;
  }
  .news-feature .news-cover {
    width: 100%;
    height: 3.86rem;
    object-fit: cover;
  }
  .news-feature > a {
    display: block;
  }
  .news-feature .news-body {
    padding: 0.28rem 0.3rem 0.12rem;
  }
  .news-feature .news-body h2,
  .news-feature .news-body h3 {
    font-size: 0.34rem;
    line-height: 0.52rem;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .news-feature:active .news-body h2 {
    color: #e60012;
  }
  .news-excerpt {
    color: #666;
    font-size: 0.28rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin-top: 0.1rem;
  }
  .news-more {
    margin: 0.15rem 0 0;
  }

  /* ---------- 关于麦尚（首页/关于我们共用） ---------- */
  .about-intro {
    font-size: 0.28rem;
    line-height: 0.5rem;
    color: #333;
    word-break: break-all;
  }
  .about-honors {
    margin: 0.4rem 0;
  }
  .about-honors li {
    display: flex;
    align-items: center;
    gap: 0.18rem;
    margin: 0.18rem 0;
  }
  .about-honors li span {
    flex: 1;
    color: #333;
    font-weight: 600;
    font-size: 0.32rem;
    line-height: 1.5;
  }
  .about-honors li::before {
    content: '';
    width: 0.12rem;
    height: 0.12rem;
    border-radius: 50%;
    background: #e60012;
  }
  .about-photo {
    margin: 0.44rem auto 0.4rem;
    width: 6.87rem;
  }
  .about-photo img {
    width: 6.87rem;
    height: 3.98rem;
    object-fit: cover;
    border-radius: 0.08rem;
  }

  /* ---------- 食品安全保障（首页/关于我们共用） ---------- */
  .safety-section {
    padding: 0.8rem 0 0;
    background: url(../img/safety-bg.webp) 100% no-repeat;
  }
  .safety-section .container {
    padding: 0;
  }
  .safety-section .section-head .section-bar {
    background: #fff;
  }
  .safety-content {
    padding: 0 0.315rem;
  }
  .safety-content .safety-tit {
    font-size: 0.36rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
  }
  .safety-tabs {
    display: flex;
    justify-content: space-around;
    margin: 0.5rem 0 0;
    background: #fff;
    overflow-x: auto; /* 标签宽度自适应，超出可横向滚动 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* 不显示滚动条 */
  }
  .safety-tabs::-webkit-scrollbar {
    display: none;
  }
  .safety-tabs .tab {
    min-width: 0;
    flex: 0 0 auto; /* 宽度随内容自适应 */
    height: 0.72rem;
    padding: 0 0.32rem;
    font-size: 0.28rem;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
  }
  .safety-tabs .tab.is-active {
    color: #e60012;
  }
  .safety-tabs .tab.is-active::after {
    display: none;
  }
  .safety-panel {
    display: none;
  }
  .safety-panel.is-active {
    display: block;
    animation: panel-in 0.5s ease;
  }
  @keyframes panel-in {
    from {
      opacity: 0;
      transform: translateY(0.16rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .safety-panel p {
    font-size: 0.28rem;
    line-height: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
    word-break: break-all;
  }
  .safety-certs {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
  }
  .safety-certs img {
    height: 1.7rem;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
  .safety-certs img.cert-big {
    height: auto;
    width: 60%;
  }
  .safety-certs img.cert-small {
    height: 0.95rem;
    margin-left: 0.5rem;
  }

  /* ---------- 表单（期待与您的合作） ---------- */
  .form-section {
    background: #e9d2a6;
    padding: 0 0 0.9rem;
  }
  /* ---------- 合作表单顶部图 ---------- */
  .form-section .form-hero {
    width: 100%;
    margin-bottom: 0.56rem;
  }
  .form-section .form-hero img {
    width: 100%;
  }
  .form-section .section-head {
    text-align: left;
    margin-bottom: 0.2rem;
  }
  .form-section .section-head h2 {
    margin-top: 0;
  }
  #coop-title {
  }
  .form-section .form-intro {
    font-size: 0.28rem;
    line-height: 0.46rem;
    color: #333;
    margin: -0.2rem 0 0.5rem;
  }
  .form-section form {
    width: 6.87rem;
    margin: 0 auto;
  }
  .form-field {
    margin-bottom: 0.32rem;
    line-height: 0;
  }
  .form-field label {
    display: block;
    margin-bottom: 0.14rem;
    font-size: 0.28rem;
    line-height: 1.3;
    color: #e60012;
    font-weight: 600;
    font-family: PingFangSC-Regular, Roboto, 'Helvetica Neue', Helvetica, Tahoma, Arial,
    'PingFang SC-Light', 'Microsoft YaHei', sans-serif;
  }
  .form-field input,
  .form-field textarea {
    width: 100%;
    height: 0.64rem;
    padding: 0 0.24rem;
    background: #fff;
    border-radius: 0.08rem;
    border: 0.01rem solid transparent;
    font-size: 0.28rem;
    color: #333;
    outline: none;
    transition: border-color 0.3s;
  }
  .form-field textarea {
    height: 1.6rem;
    padding: 0.16rem 0.24rem;
    resize: none;
  }
  .form-field input:focus,
  .form-field textarea:focus {
    border-color: #e60012;
  }
  .form-field .captcha-row {
    display: flex;
    gap: 0.2rem;
    align-items: stretch;
  }
  .form-field .captcha-row input {
    flex: 1;
  }
  .form-field .captcha-row img {
    width: 1.44rem;
    height: 0.62rem;
    border-radius: 0.06rem;
    align-self: center;
    cursor: pointer;
  }
  .form-submit {
    width: 6.87rem;
    height: 0.64rem;
    margin-top: 0.1rem;
    background: #e60012;
    border-radius: 0.32rem;
    color: #fff;
    font-size: 0.32rem;
    letter-spacing: 0.1em;
    transition:
      opacity 0.3s,
      transform 0.3s;
  }
  .form-submit:active {
    opacity: 0.85;
    transform: scale(0.98);
  }
  .form-note {
    text-align: center;
    margin-top: 0.24rem;
    font-size: 0.24rem;
    color: rgba(51, 51, 51, 0.55);
  }
  /* ---------- 页脚 ---------- */
  .m-footer {
    background: #fff;
    padding: 0.7rem 0 0.6rem;
  }
  .m-footer-logo {
    width: 4.36rem;
    margin: 0 auto;
  }
  .m-footer-logo img {
    width: 4.36rem;
    height: 1.35rem;
  }
  .footer-tit {
    font-weight: 600;
    font-size: 0.36rem;
    font-style: normal;
    line-height: 0.56rem;
    color: #333;
    text-align: center;
    margin: 0.54rem auto 0;
  }
  .footer-address {
    width: 6.87rem;
    margin: 0.14rem auto 0;
    font-size: 0.28rem;
    font-style: normal;
    line-height: 0.56rem;
    color: #666;
    text-align: center;
  }
  .footer-qrs {
    display: flex;
    justify-content: space-between;
    width: 6.87rem;
    margin: 0.5rem auto 0;
  }
  .qr-item {
    text-align: center;
    /*
     * 宽度锁死跟二维码方块一样（2.11rem），别让标题把格子撑宽。
     * 设计稿第一格标题是「微信小程序 / 官方商城」两行（静态稿靠硬编码 <br>）；
     * 我们不给文案塞标签，靠这个宽度让 9 个字自然折成两行 ——
     * 三格宽度也因此齐平（144.03px），flex 行高仍由两行那格决定。
     */
    width: 2.11rem;
  }
  .m-qr-box {
    width: 2.11rem;
    height: 2.12rem;
    background: #fff;
    box-shadow: 0 0 0.24rem rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.04rem;
  }
  .m-qr-box img {
    width: 1.8rem;
    height: 1.8rem;
    object-fit: contain;
  }
  .qr-item figcaption {
    margin-top: 0.14rem;
    font-size: 0.24rem;
    line-height: 0.36rem;
    color: #333;
  }
  .footer-badge {
    width: 6.87rem;
    margin: 0.5rem auto 0;
  }
  .footer-badge img {
    width: 6.87rem;
    height: 0.5rem;
  }
  .m-copyright {
    background: #fff;
    box-shadow: 0 0.02rem 0 #e6e6e6;
    padding: 0.32rem 0;
    text-align: center;
  }
  .m-copyright p {
    font-size: 0.24rem;
    line-height: 0.4rem;
    color: #666;
  }

  /* ---------- Swiper 覆写 ---------- */
  .swiper {
    overflow: hidden;
  }
  .swiper-slide {
    height: auto;
  }

  /* ---------- 降噪 ---------- */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
    }
  }

  /*
   * 手机英文稿的 body 字体是一套更短的栈（落到 Microsoft YaHei），
   * 主题继承的是 PC 那套长栈（Windows 上先落到 Tahoma）—— 两者字宽不同，
   * 标签等文字宽度会差几 px。这里只按手机稿、且只在英文站生效。
   */
  html[lang^="en"] body {
    font-family: 'PingFangSC-Regular', 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
  }

  /*
   * 「了解更多 / Learn More」按钮：中文稿是 2rem（四个中文字刚好放得下），
   * 英文文案更长，塞不下会折行。英文手机稿这里是 2.4rem。
   */
  html[lang^="en"] .btn-more {
    width: 2.4rem;
  }

  /* 英文手机稿：关于版块的按钮区居中（主题缺这条） */
  html[lang^="en"] .about-actions {
    text-align: center;
  }

  /*
   * 关于页首屏标题：中文稿是 0.6rem，英文文案更长，第一行会被挤成两行（整块 3 行）。
   * 英文手机稿这里是 0.5rem，正好两行。
   */
  html[lang^="en"] .page-hero h1 {
    font-size: 0.5rem;
  }

  /*
   * 党建页首屏标题的垂直居中。
   *
   * 英文手机稿是用 flex 居中：display:flex + align-items:center。
   * 主题走的是另一条路 —— 没有 flex，靠 padding-top: 0.87rem 把标题「顶」到那个位置；
   * 英文稿的覆盖把内边距改回 0 0.31rem 之后，假居中没了、真居中也没有，标题就贴顶了。
   * 这里把设计稿的 flex 居中补上（内边距已由上面那条覆盖成 0 0.31rem）。
   */
  html[lang^="en"] .party-hero {
    display: flex;
    align-items: center;
  }
}