/* 麦尚食品 · products 页面样式（PC 段 + 手机段，各自媒体查询包裹） */

/* PC 布局：≥1200px */
@media (min-width: 1200px) {
  button {
          margin: 0;
          padding: 0;
          border: 0.0694vw solid transparent;
          outline: none;
          background-color: transparent;
        }
        input {
          background-color: transparent;
          border: 0;
          outline: none;
        }

        /* ============ 页面骨架 ============ */
        .page {
          position: relative;
          width: 100vw;
          margin: 0 auto;
          background-color: rgba(255, 255, 255, 1);
        }

        /* ============ 头部导航（与首页一致） ============ */
        .header-zone {
          width: 100vw;
          height: 8.3333vw;
        }

        /* ============ 产品中心（交互稿：焦点产品 + 缩略图行 + 分类条） ============ */
        .sec-products {
          background-color: rgba(255, 255, 255, 1);
          width: 100vw;
          padding-bottom: 2.0833vw;
          display: flex;
          flex-direction: column;
        }
        /* 焦点产品区：左 340x340 产品图，右侧名称/红条/描述 */
        .pd-stage {
          position: relative;
          width: 100vw;
          height: 33.3333vw;
          background: linear-gradient(20deg, #fff, #d2d9e1);
        }
        .pd-figure {
          position: absolute;
          left: 16.875vw;
          top: 5vw;
          width: 23.6111vw;
          height: 23.6111vw;
          /*
           * 悬停时图片放大到 1.2 倍（见下面的 .pd-figure:hover img），
           * 不裁的话放大的图会溢出这个方框，盖住正下方的规格标签。
           * 裁掉超出部分，放大效果仍然在框内可见。
           *
           * 注意这层只挡得住「方框之外」的溢出，挡不住相邻 slide —— 那种由
           * .pd-figure-slide 各自裁，见下面那条。
           */
          overflow: hidden;
        }
        .pd-figure-track {
          width: 100%;
          height: 100%;
        }
        .pd-figure-slide {
          width: 100%;
          height: 100%;
          /*
           * 放大必须在这一层也裁住。
           *
           * .pd-figure:hover img 命中的是方框里**所有** slide 的图，不只当前那张。
           * 而相邻 slide 紧贴着方框边界（一张卡正好 23.6111vw 宽），它自己的图
           * 放大 1.2 倍后会朝内长出 (23.6111*1.2-23.6111)/2 ≈ 2.36vw 探进可视区 ——
           * 看到的就是「当前图放大了，旁边产品的图也冒出来一截」。
           * 每条 slide 各自裁掉，邻居就伸不过来。
           *
           * 只有一张图时（没传相册、不初始化 Swiper）这层与 .pd-figure 同宽同高，
           * 裁剪范围一样，放大效果与从前没有区别。
           */
          overflow: hidden;
        }
        .pd-figure-slide img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
        .pd-figure img {
          transition: transform 0.6s ease;
        }
        .pd-figure:hover img {
          transform: scale(1.2);
        }
        /*
         * 自动轮播圆点（交互稿：自动轮播 或者 点击圆圈翻页）。
         *
         * top 29.1667vw 是交互稿给圆点的原位，就在大图正下方居中。
         * 这格原本被「规格标签」占着（那时产品都是单图、圆点恒空），
         * 现在产品传了多张轮播图（产品字段组的「产品轮播图」相册）圆点就会
         * 真的出现 —— 此时 .pd-stage 带上 has-dots，规格标签顺延一行让位，
         * 见下面的 .pd-stage.has-dots .pd-spec。
         *
         * 只有一张图时这里没有子元素，零高度的空 flex，不占地方也不显示。
         */
        .pd-dots {
          position: absolute;
          left: 16.875vw;
          top: 29.1667vw;
          width: 23.6111vw;
          display: flex;
          flex-direction: row;
          justify-content: center;
          gap: 0.5556vw;
        }
        .pd-dot {
          border-radius: 50%;
          width: 0.8333vw;
          height: 0.8333vw;
          border: 0.0694vw solid rgba(230, 0, 18, 1);
          background-color: rgba(255, 255, 255, 1);
          cursor: pointer;
          transition:
            background-color 0.3s ease,
            transform 0.3s ease;
        }
        .pd-dot:hover {
          transform: scale(1.2);
        }
        .pd-dot.is-active {
          background-color: rgba(230, 0, 18, 1);
        }
        .pd-info {
          position: absolute;
          left: 51.1111vw;
          top: 6.9444vw;
          width: 36.875vw;
        }
        .pd-info h2 {          width: 36.875vw;
          color: rgba(51, 51, 51, 1);
          font-size: 2.5vw;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          line-height: 2.7778vw;
        }
        .pd-bar {
          background-color: rgba(230, 0, 18, 1);
          width: 5.5556vw;
          height: 0.2778vw;
          margin-top: 2.7778vw;
        }
        .pd-desc {
          width: 36.875vw;
          color: rgba(102, 102, 102, 1);
          font-size: 1.1111vw;
          word-break: break-all;
          line-height: 2.2222vw;
          margin-top: 2.6389vw;
        }
        /*
         * 规格标签：贴在大图正下方居中的一行纯文本。
         *
         * 设计稿原本是右侧文字里的一个红框胶囊，但那个位置现在永远是空的
         * （规格说明字段已删），挪到图下面才看得见；颜色跟描述一档的灰，
         * 不要边框和红色。
         *
         * 大图是 left 16.875vw、宽 23.6111vw，水平中心在 28.6806vw，
         * 用 translateX(-50%) 让它贴着图居中（宽度随文字走）。
         *
         * top 29.1667vw 与 .pd-dots 同格。产品只有一张图时圆点恒空，
         * 这格就归规格标签；产品传了「产品轮播图」相册（多图）时圆点回来占
         * 原位，规格标签靠下面的 .pd-stage.has-dots 规则顺延一行。
         */
        .pd-spec {
          position: absolute;
          left: 28.6806vw;
          top: 29.1667vw;
          transform: translateX(-50%);
          white-space: nowrap;
          color: rgba(102, 102, 102, 1);
          font-size: 1.25vw;
          line-height: 2.2222vw;
          text-align: center;
        }
        /*
         * 多图：圆点占大图正下方（29.1667vw，高度 0.8333vw），
         * 规格标签顺延到它下面一行让位。
         *
         * 竖排预算：30 + 行高 2.2222 = 32.2222vw < .pd-stage 的 33.3333vw，放得下。
         * has-dots 由 PHP 首屏渲染（taxonomy-product_cat.php）与
         * product.js 的 focus() 两边一起维护。
         */
        .pd-stage.has-dots .pd-spec {
          top: 30vw;
        }
        /* 没填规格标签时整行不显示，别在图下留一段空白 */
        .pd-spec:empty {
          display: none;
        }
        /* 缩略图行（交互稿：悬浮切换焦点产品，产品图放大 1.2 倍）：
           一行展示当前系列全部产品，默认水平居中，超出一行时显示滚动条横向滚动 */
        .pd-thumbs {
          width: 100vw;
          overflow-x: auto;
          overflow-y: hidden;
        }
        .pd-thumbs-track {
          /* 宽度取内容实际宽度：未超出一行时 margin auto 居中，超出时贴左可滚动 */
          width: max-content;
          height: 10.9722vw;
          margin: 0 auto;
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 3.6111vw;
        }
        /* 横向滚动条（超出一行时出现） */
        .pd-thumbs::-webkit-scrollbar {
          height: 0.4167vw;
        }
        .pd-thumbs::-webkit-scrollbar-track {
          background: rgba(230, 230, 230, 1);
          border-radius: 0.2083vw;
        }
        .pd-thumbs::-webkit-scrollbar-thumb {
          background: #ccc;
          border-radius: 0.2083vw;
        }
        .pd-thumb {
          position: relative;
          width: 10.9722vw;
          height: 10.9722vw;
          background-color: rgba(255, 255, 255, 1);
          border-radius: 0.2778vw;
          padding: 1.1111vw;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
        .pd-thumb img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          transition: transform 0.45s ease;
        }
        /* 当前选中缩略图：上方 CSS 三角箭头，朝下指向缩略图 */
        .pd-thumb.is-active::after {
          content: '';
          position: absolute;
          left: 50%;
          top: 0;
          margin-left: -0.625vw;
          width: 0;
          height: 0;
          border-left: 0.625vw solid transparent;
          border-right: 0.625vw solid transparent;
          border-top: 0.9028vw solid rgba(230, 0, 18, 1);
        }
        /* 分类条（交互稿：条高约4.17vw、底部细线、红色标记条在当前项上方） */
        .pd-cats {
          border-top: 1px solid #e6e6e6;
          background-color: rgba(255, 255, 255, 1);
          width: 100vw;
          height: 4.1667vw;
          display: flex;
          flex-direction: row;
          align-items: stretch;
          justify-content: center;
        }
        .pd-cat {
          position: relative;
          color: rgba(51, 51, 51, 1);
          font-size: 1.25vw;
          text-align: center;
          white-space: nowrap;
          line-height: 4.1667vw;
          margin: 0 2.0833vw;
          cursor: pointer;
          transition: color 0.3s ease;
        }
        .pd-cat .num {
          margin-right: 0.6944vw;
          font-style: normal;
          display: none;
        }
        .pd-cat:hover {
          color: rgba(230, 0, 18, 1);
        }
        .pd-cat.is-active {          color: rgba(230, 0, 18, 1);
          font-family: PingFangSC-Semibold;
          font-weight: 600;
        }
        .pd-cat.is-active .num {
          display: inline;
        }
        .pd-cat.is-active::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 0.2778vw;
          background: rgba(230, 0, 18, 1);
        }

        /* ============ 合作表单 / 页脚（与首页一致） ============ */
        /* 高度交给内容撑开：原稿的 86.1806vw 是「表单 + 页脚」的高度，
           而页脚已由 footer.php 挪到所有区块之外，写死会在页面底部
           空出一整个页脚。 */
        .sec-contact {
          width: 100vw;
          display: flex;
          flex-direction: column;
        }
        .contact-panel {
          width: 100vw;
          height: 41.6667vw;
          background: url(../../img/hero-cooperation-pc.webp) 100% no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          padding-left: 51.0417vw;
        }
        .contact-heading {
          width: 29.5833vw;
          margin: 5.4861vw 0 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        .contact-heading h2 {          width: 19.3056vw;
          color: rgba(51, 51, 51, 1);
          font-size: 2.7778vw;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 2.7778vw;
          margin-left: 0.1389vw;
        }
        .contact-heading p {
          width: 29.5833vw;
          color: rgba(102, 102, 102, 1);
          font-size: 1.1111vw;
          text-align: left;
          white-space: nowrap;
          line-height: 2.2222vw;
          margin-top: 1.0417vw;
        }
        .contact-form {
          width: 40.5556vw;
          display: block;
        }
        /* 报错状态的 .form-input.has-error 规则统一放在 base.css（两套稿共用） */
        .form-row {
          display: flex;
          gap: 2.7778vw;
        }
        .form-row .form-row-item {
          flex: 1;
        }
        .form-row-item {
          display: flex;
          flex-direction: column;
          margin-bottom: 0.6944vw;
        }
        .form-label {
          color: rgba(51, 51, 51, 1);
          font-size: 1.25vw;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 1.6667vw;
          margin-bottom: 0.3472vw;
        }
        .form-label .req {
          color: rgba(230, 0, 18, 1);
        }
        .form-input {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 0.5556vw;
          border: 0.0694vw solid transparent;
          height: 3.3333vw;
          padding: 0 1.1111vw;
          font-size: 1.1111vw;
          color: rgba(51, 51, 51, 1);
          font-family: inherit;
          transition:
            border-color 0.3s ease,
            box-shadow 0.3s ease;
        }
        .form-input::placeholder {
          color: rgba(153, 153, 153, 1);
        }
        .form-input:focus {
          border-color: rgba(230, 0, 18, 1);
          box-shadow: 0 0 0.5556vw 0 rgba(230, 0, 18, 0.25);
        }
        .captcha-row {
          height: 3.3333vw;
          display: flex;
          flex-direction: row;
          gap: 2.7778vw;
        }
        .captcha-box {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 0.5556vw;
          height: 3.3333vw;
          width: 18.8889vw;
          display: flex;
          flex-direction: row;
          overflow: hidden;
        }
        .captcha-box .form-input {
          width: 10.4167vw;
        }
        .captcha-box img {
          width: 8.3333vw;
          height: 3.1944vw;
          cursor: pointer;
        }
        .btn-submit {
          position: relative;
          overflow: hidden;
          background-color: rgba(255, 255, 255, 1);
          border-radius: 0.5556vw;
          height: 3.3333vw;
          width: 8.3333vw;
          cursor: pointer;
          display: flex;
          flex-direction: column;
        }
        .btn-submit::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: rgba(230, 0, 18, 1);
          transform: scaleX(0);
          transform-origin: left center;
          transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .btn-submit:hover::before {
          transform: scaleX(1);
        }
        .btn-submit span {
          color: rgba(51, 51, 51, 1);
          font-size: 1.1111vw;
          text-align: left;
          white-space: nowrap;
          line-height: 3.3333vw;
          text-align: center;
          position: relative;
          z-index: 1;
          transition: color 0.35s ease;
        }
        .btn-submit:hover span {
          color: #fff;
        }

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


    /* ===== 英文稿与中文稿的差异（自动生成，来源：线上 PC 稿）===== */
    html[lang^="en"] .contact-heading h2 {
      width: auto;
    }
    html[lang^="en"] .pd-bar {
      margin-top: 1.6667vw;
    }
    html[lang^="en"] .pd-desc {
      line-height: 2.0833vw;
    }
    html[lang^="en"] .pd-desc {
      margin-top: 1.3889vw;
    }
    html[lang^="en"] .pd-info {
      top: 5.5556vw;
    }
    html[lang^="en"] .pd-spec {
      color: rgba(230, 0, 18, 1);
    }
  }

/* 手机布局：<1200px */
@media (max-width: 1199.98px) {
  /* ---------- 语义化标题（页面无横幅，标题供屏幕阅读器/SEO） ---------- */
        .sr-only {
          position: absolute;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0 0 0 0);
          white-space: nowrap;
          border: 0;
        }

        /* ---------- 产品展示台（自上而下：产品大图 / 产品信息 / 系列产品缩略图） ---------- */
        /* 无页脚：整屏高度布局，产品列表与系列分类固定在页面底部 */
        .product-stage {
          margin-top: 1.2rem;
          box-sizing: border-box;
          min-height: calc(100vh - 1.2rem);
          min-height: calc(100dvh - 1.2rem);
          display: flex;
          flex-direction: column;
        }

        .stage-card {
          flex: 1;
          width: 7.5rem;
          background: linear-gradient(20deg, #fff, #d2d9e1);
          display: flex;
          flex-direction: column;
        }

        /* 顶部：当前产品大图（可切换） */
        .stage-media {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 0.72rem;
        }
        .stage-swiper {
          width: 3.4rem;
          height: 3.4rem;
          overflow: hidden;
        }
        .stage-swiper .swiper-slide {
          height: 3.4rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .stage-swiper img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .stage-dots {
          display: none;
          margin-top: 0.24rem;
          gap: 0.08rem;
        }
        .stage-card.has-dots .stage-dots {
          display: flex;
        }
        .stage-dots button {
          width: 0.16rem;
          height: 0.16rem;
          padding: 0;
          border: 0.02rem solid #e60012;
          border-radius: 50%;
          background: #fff;
          box-sizing: border-box;
        }
        .stage-dots button.is-active {
          background: #e60012;
        }

        /* 其上：当前所选产品信息 */
        .stage-name {
          margin: 0.8rem 0 0 0.32rem;
          font-size: 0.4rem;
          font-weight: 400;
          line-height: 0.4rem;
          color: #333;
        }
        .stage-card.has-dots .stage-name {
          margin-top: 0.4rem;
        }
        .stage-bar {
          width: 0.8rem;
          height: 0.04rem;
          margin: 0.39rem 0 0 0.32rem;
          background: #e60012;
        }
        .stage-desc {
          margin: 0.37rem 0 0.57rem 0.33rem;
          width: 6.7rem;
          font-size: 0.28rem;
          line-height: 0.42rem;
          color: #666;
          word-break: break-all;
        }

        /* 底部之上：当前系列产品缩略图 */
        .stage-strip {
          margin-top: auto;
          background: #fff;
          box-shadow: 0 0 0.24rem rgba(0, 0, 0, 0.16);
          padding: 0.16rem 0 0.08rem;
        }
        .strip-swiper {
          overflow: hidden;
          padding-left: 0.32rem;
        }
        .strip-swiper .swiper-slide {
          width: 1.6rem;
        }
        .strip-swiper .swiper-slide:not(:last-child) {
          margin-right: 0.5rem;
        }
        .strip-item {
          position: relative;
          width: 1.6rem;
          height: 1.6rem;
          padding: 0;
          border: none;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .strip-item img.thumb {
          display: block;
          /* width: 100%; */
          height: 75%;
          object-fit: cover;
        }
        /* 当前所选产品的三角形标记（纯 CSS 三角，位于缩略图顶部居中） */
        .strip-item.is-active::after {
          content: '';
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 0.09rem solid transparent;
          border-right: 0.09rem solid transparent;
          border-top: 0.15rem solid #e60012;
          pointer-events: none;
        }

        /* 底部：产品系列分类（固定在屏幕底部） */
        .series-bar {
          display: flex;
          justify-content: space-between;
          gap: 0.24rem; /* 超出可滚动时标签间的最小间距 */
          box-sizing: content-box;
          height: 1rem;
          padding: 0 0.32rem env(safe-area-inset-bottom);
          background: #fff;
          box-shadow: 0 -0.02rem 0 0 rgba(230, 230, 230, 1);
          overflow-x: auto; /* 系列超出宽度时可横向滚动 */
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none; /* 不显示滚动条 */
        }
        .series-bar::-webkit-scrollbar {
          display: none;
        }
        .series-tab {
          position: relative;
          flex-shrink: 0; /* 不被压缩，文字保持单行 */
          padding: 0.29rem 0;
          border: none;
          background: none;
          font-family: PingFangSC-Semibold;
          font-size: 0.28rem;
          line-height: 0.4rem;
          color: #666;
          white-space: nowrap;
          font-weight: 600;}
        .series-tab.is-active {
          color: #e60012;
          font-weight: 600;
        }
        .series-tab.is-active::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 0.04rem;
          background: #e60012;
        }
}