@charset "UTF-8";
/* ==========================================================================
   GOG 工厂展示模块  v1.0
   参考 kpisolutions.com 的 .m-slider.l-slider-double-cards（大图 + 等宽卡片 tab）
   · 桌面(≥1113px)：整块大图打底，上面一排等宽卡片；鼠标悬停某张 → 切图 + 该卡展开描述/CTA
   · 移动(≤1112px)：大图层隐藏，卡片自带背景图，横向滑动 + 圆点分页
   · 渐进增强：无 JS 时显示第一张图 + 全部卡片文案（SEO 与可访问性友好）
   ▸ 改主色：短码里加 accent="#4cb3dd"（或改下方 --gogf-accent）
   ▸ 改宽度：短码里加 max_width="1600"（full_width="0" 时才生效）
   ▸ 改高度：下方 --gogf-h（默认 800px；≥1500px 屏 900px，≤1280px 640px）
   ▸ 改通栏左右留白：下方 --gogf-edge（默认 40px，随断点收窄到 28/20/14px）
   ▸ 改模块顶部间隙：下方 .gogf 的 padding-top（当前 10px）
   ========================================================================== */

.gogf {
  --gogf-accent: #4cb3dd;
  --gogf-navy: #02225b;
  --gogf-navy-2: #061a47;
  --gogf-h: 800px;
  --gogf-max: 1600px;
  --gogf-gap: 20px;
  --gogf-edge: 40px;   /* 通栏时左右保留的呼吸间隙（避免大分辨率下贴边太死） */

  padding: 10px 0 60px;
  color: #0d0f14;
  font-family: inherit;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.gogf *,
.gogf *::before,
.gogf *::after { box-sizing: border-box; }

.gogf__inner {
  width: 100%;
  max-width: var(--gogf-max);
  margin: 0 auto;
  padding: 0 var(--gogf-gap);
}

/* ---------- 通栏（突破主题 1440px 容器） ----------
   与站点 /supply-chains-service/ 用的同款做法：100vw + 左右 calc(50% - 50vw) 负边距；
   主题 body 已有 overflow-x:hidden，不会出横向滚动条。
   --gogf-edge 会在左右各留一点间隙：既比容器宽很多，又不会在大分辨率下完全贴死屏幕边。 */
.gogf--full {
  width: calc(100vw - 2 * var(--gogf-edge));
  max-width: calc(100vw - 2 * var(--gogf-edge));
  margin-left: calc(50% - 50vw + var(--gogf-edge));
  margin-right: calc(50% - 50vw + var(--gogf-edge));
  padding-inline: 0;
}

.gogf--full .gogf__inner {
  max-width: none;
  padding: 0;
}

/* 通栏时标题与大图块左右对齐，不再额外缩进 */
.gogf--full .gogf__head { padding-inline: 0; }

/* 通栏时大图块不留圆角（参考站也是切边） */
.gogf--full .gogf__stage { border-radius: 0; }

/* ---------- 标题区 ---------- */
.gogf__head {
  max-width: 780px;
  margin: 0 auto 40px;
  text-align: center;
}

.gogf__title {
  margin: 0 0 14px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.25;
  color: #0d0f14;
}

.gogf__intro {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #2a2f3a;
}

/* ---------- 舞台：大图 + 卡片层 ---------- */
.gogf__stage {
  position: relative;
  height: var(--gogf-h);
  border-radius: 16px;
  overflow: hidden;
  background: var(--gogf-navy);
}

/* 大图（桌面端的背景层，切换时淡入淡出） */
.gogf__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gogf__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .6s ease, transform .8s ease;
}

.gogf__image.is-active {
  opacity: 1;
  transform: none;
}

/* 卡片层 */
.gogf__nav {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: stretch;
}

.gogf__card {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  margin: 0;
  padding: 30px 24px;
  color: #fff;
  cursor: pointer;
  transition: background-color .3s ease;
}

.gogf__card:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, .3);
}

.gogf__card:hover { background-color: rgba(2, 34, 91, .4); }

.gogf__card.is-active { background-color: rgba(6, 26, 71, .8); }

/* 底部渐变（保证文字可读） */
.gogf__card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 64%;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgba(2, 34, 91, 0) 0%,
    rgba(2, 34, 91, .35) 45%,
    rgba(2, 34, 91, .92) 100%
  );
  transition: height .3s ease, background-image .3s ease;
}

.gogf__card.is-active::after {
  height: 100%;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 2px, rgba(255, 255, 255, 0) 2px 12px),
    linear-gradient(to bottom, rgba(2, 34, 91, .55) 0%, rgba(2, 34, 91, .96) 100%);
}

/* 左侧主色竖条（参考站的青色 bar） */
.gogf__card::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 4px;
  height: 72px;
  background: var(--gogf-accent);
  transform: translateY(-32px);
  transition: height .3s ease, transform .3s ease;
}

.gogf__card.is-active::before {
  height: 108px;
  transform: translateY(-40px);
}

.gogf__card-body {
  position: relative;
  z-index: 2;
}

.gogf__card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}

.gogf__card-title a {
  color: #fff;
  text-decoration: none;
}

.gogf__card-title a:hover,
.gogf__card-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gogf__card-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .92);
}

.gogf__card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.gogf__card-more svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* 卡片内小图：仅移动端用作背景 */
.gogf__card-bg {
  display: none;
}

/* 桌面端：描述与 CTA 默认收起，激活时展开（与参考站一致） */
.gogf--js .gogf__card-text {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease-out, margin-top .3s ease-out;
}

.gogf--js .gogf__card-more {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease-out, margin-top .3s ease-out;
}

.gogf--js .gogf__card.is-active .gogf__card-text {
  max-height: 14em;
  margin-top: .6em;
  transition: max-height .3s ease-in, margin-top .3s ease-in;
}

.gogf--js .gogf__card.is-active .gogf__card-more {
  max-height: 6em;
  margin-top: 1em;
  transition: max-height .3s ease-in, margin-top .3s ease-in;
}

/* ---------- 分页圆点 ----------
   与本站 Blog & News 模块（.gogbn__dot）保持完全一致的样式：
   未选中 10px 灰圆点；当前项拉长成 30px 主色胶囊；点击区扩到约 28px */
.gogf__pager { display: none; }

.gogf--js .gogf__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.gogf__dot {
  position: relative;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  padding: 0;
  margin: 0;
  background: #d5d8d9;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: width .4s ease, border-radius .4s ease, background-color .4s ease;
}

.gogf__dot::after {
  content: "";
  position: absolute;
  inset: -9px;
}

.gogf__dot:hover { background: #b9bec0; }

.gogf__dot.is-active,
.gogf__dot[aria-current="true"] {
  width: 30px;
  border-radius: 6px;
  background: var(--gogf-accent);
  cursor: default;
}

.gogf__dot:focus-visible {
  outline: 2px solid var(--gogf-accent);
  outline-offset: 4px;
}

/* 屏幕阅读器专用文字 */
.gogf .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 大屏微调 ---------- */
@media (min-width: 1500px) {
  .gogf { --gogf-h: 900px; }
  .gogf__card { padding: 34px 26px; }
  .gogf__card-title { font-size: 20px; }
}

@media (max-width: 1280px) {
  .gogf { --gogf-h: 640px; --gogf-edge: 28px; }
  .gogf__card { padding: 26px 18px; }
  .gogf__card-title { font-size: 17px; }
  .gogf__card-text { font-size: 13px; }
}

/* ---------- 移动/平板：大图层隐藏，卡片自带背景图，横向滑动 ---------- */
@media (max-width: 1112px) {
  .gogf { padding: 10px 0 44px; --gogf-edge: 20px; }
  .gogf__title { font-size: 26px; }
  .gogf__head { margin-bottom: 26px; }

  .gogf__stage {
    height: auto;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .gogf__media { display: none; }

  .gogf__nav {
    position: static;
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 14px;
  }

  .gogf__nav::-webkit-scrollbar { display: none; }

  .gogf__card {
    flex: 0 0 100%;
    min-height: 430px;
    justify-content: flex-end;
    padding: 28px 22px;
    scroll-snap-align: center;
    background-color: rgba(2, 34, 91, .5);
    border-right: 0;
  }

  .gogf__card:not(.is-active) { background-color: rgba(2, 34, 91, .5); }
  .gogf__card.is-active { background-color: rgba(2, 34, 91, .6); }

  /* 卡片自带背景图 */
  .gogf__card-bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    object-fit: cover;
    object-position: center;
  }

  .gogf__card::after { height: 75%; }
  .gogf__card.is-active::after { height: 75%; background-image: linear-gradient(to bottom, rgba(2, 34, 91, 0) 0%, rgba(2, 34, 91, .9) 100%); }
  .gogf__card::before { transform: translateY(-24px); height: 56px; }
  .gogf__card.is-active::before { height: 76px; transform: translateY(-24px); }

  .gogf__card-title { font-size: 22px; }
  .gogf__card-title a { pointer-events: auto; }

  /* 移动端：文案常显（参考站同样是移动端全部展开） */
  .gogf--js .gogf__card-text { max-height: none; margin-top: .6em; }
  .gogf--js .gogf__card-more { max-height: none; margin-top: 1em; }
}

@media (max-width: 766px) {
  .gogf { --gogf-edge: 14px; }
  .gogf__title { font-size: 23px; }
  .gogf__intro { font-size: 14px; }
  .gogf__card { min-height: 400px; padding: 24px 20px; }
  .gogf__card-title { font-size: 20px; }
  .gogf__card-text { font-size: 14px; }
  .gogf--js .gogf__pager { margin-top: 26px; gap: 10px; }
}

@media (max-width: 480px) {
  .gogf--js .gogf__pager { gap: 9px; }
  .gogf__dot.is-active,
  .gogf__dot[aria-current="true"] { width: 24px; }
}

/* ---------- 无障碍 / 打印 ---------- */
@media (prefers-reduced-motion: reduce) {
  .gogf__image,
  .gogf__card,
  .gogf__card::before,
  .gogf__card::after,
  .gogf--js .gogf__card-text,
  .gogf--js .gogf__card-more { transition: none !important; }
}

@media print {
  .gogf__stage { height: auto; }
  .gogf__media { display: none; }
  .gogf__nav { position: static; display: block; }
  .gogf__card { background: none; color: #000; }
  .gogf__card::after,
  .gogf__card::before { display: none; }
  .gogf__card-title,
  .gogf__card-title a,
  .gogf__card-text,
  .gogf__card-more { color: #000; }
  .gogf--js .gogf__card-text,
  .gogf--js .gogf__card-more { max-height: none; }
  .gogf__pager { display: none !important; }
}

/* ##########################################################################
   ↓↓↓ 以下为「关于我们（About US）」模块样式（v1.0，纯 HTML+CSS，无 PHP）
   与工厂模块共用本文件；只在含 [gog_factory] 的页面生效。
   若 About 模块要出现在没有工厂短码的页面上，请把下面这段单独放到
   站点自定义 CSS，或用 wp_enqueue 单独加载 gog-about.css。
   ########################################################################## */

/* ==========================================================================
   GOG 关于我们模块（About US）  v1.0
   参考 demo.artureanec.com「/ what we do /」：深色圆角卡 + 左图右文
   · 卡片整块通栏（突破主题 1440px 容器，左右留 --goga-edge 间隙，做法同工厂模块）
   · 左侧三张图拼贴：主图竖构图跨两行，右侧两张上下叠放，整体用 aspect-ratio 等比缩放
   · 右侧：带下划线的小标签 / 大标题 / 正文 / 描边胶囊按钮（悬停填充 + 箭头位移）
   · 字体全部 font-family:inherit（沿用站点 Rubik），只改字号与颜色

   ▸ 想改主色     → 下方 --goga-accent
   ▸ 想改左右留白 → 下方 --goga-edge（随断点自动收窄）
   ▸ 想改卡片圆角 → 下方 --goga-radius
   ▸ 想关掉通栏   → 给 .goga__card 规则加上 max-width:1440px; margin-left:auto; margin-right:auto;
   ========================================================================== */

.goga {
  --goga-accent: #4cb3dd;
  --goga-navy: #02225b;
  --goga-edge: 40px;          /* 通栏时左右保留的呼吸间隙 */
  --goga-radius: 28px;        /* 卡片圆角 */
  --goga-pad-y: 48px;         /* 卡片上下内边距 */
  --goga-pad-x: 56px;         /* 卡片左右内边距 */
  --goga-gap: 62px;           /* 图 / 文 两列间距 */

  margin: 90px 0 0;
  color: #fff;
  font-family: inherit;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.goga *,
.goga *::before,
.goga *::after { box-sizing: border-box; }

/* ---------- 卡片：通栏 + 深蓝底 ----------
   与工厂模块、以及你站 /supply-chains-service/ 同一套做法：
   100vw + calc(50% - 50vw) 负边距；主题 body 已有 overflow-x:hidden，不会出横向滚动条。 */
.goga__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: var(--goga-gap);

  width: calc(100vw - 2 * var(--goga-edge));
  max-width: calc(100vw - 2 * var(--goga-edge));
  margin-left:  calc(50% - 50vw + var(--goga-edge));
  margin-right: calc(50% - 50vw + var(--goga-edge));

  padding: var(--goga-pad-y) var(--goga-pad-x);
  border-radius: var(--goga-radius);
  overflow: hidden;
  background-color: var(--goga-navy);
  background-image:
    radial-gradient(120% 150% at 88% 6%, rgba(76, 179, 221, .18) 0%, rgba(76, 179, 221, 0) 58%),
    linear-gradient(135deg, #062a68 0%, #02225b 52%, #011b45 100%);
}

/* 右上角细点阵（纯 CSS 画的，不引外部图；参考站在这个位置放了一张底纹图） */
.goga__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(115% 100% at 92% 50%, #000 0%, rgba(0, 0, 0, 0) 62%);
  mask-image: radial-gradient(115% 100% at 92% 50%, #000 0%, rgba(0, 0, 0, 0) 62%);
}

.goga__media,
.goga__body {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* ---------- 左：三图拼贴 ----------
   aspect-ratio 让整块拼贴随宽度等比缩放 → 任何屏宽下三张图的裁切比例都一致。
   主图源图是 1:1，竖构图会裁掉左右（约 20%），object-position 稍微偏右保住主体建筑。 */
.goga__media {
  display: grid;
  grid-template-columns: minmax(0, 1.44fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  aspect-ratio: 1.33;
  width: 100%;
}

.goga__shot {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, .07);
}

.goga__shot img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  object-fit: cover;
  object-position: center;
}

.goga__shot--main { grid-row: 1 / -1; grid-column: 1; }
.goga__shot--main img { object-position: 58% center; }
.goga__shot--a { grid-column: 2; grid-row: 1; }
.goga__shot--b { grid-column: 2; grid-row: 2; }

/* ---------- 右：文案 ---------- */
.goga__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 小标签：下划线只跟文字一样宽（参考站就是这个做法） */
.goga__label {
  display: inline-block;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  font-size: 14px;
  font-weight: 500;
  line-height: 2.1429em;
  letter-spacing: .03em;
  color: #fff;
}

.goga__title {
  max-width: 20em;
  margin: 36px 0 0;
  font-family: inherit;
  font-size: clamp(26px, 2.05vw, 40px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
}

.goga__text {
  max-width: 700px;
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.76;
  color: rgba(255, 255, 255, .78);
}

.goga__text strong {
  font-weight: 600;
  color: #fff;
}

/* ---------- 按钮：描边胶囊 + 悬停自下而上填充 + 圆形箭头 ---------- */
.goga__btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  padding: 14px 16px 14px 26px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: color .45s cubic-bezier(.22, .61, .36, 1), border-color .45s cubic-bezier(.22, .61, .36, 1);
}

.goga__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--goga-accent);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.goga__btn-text,
.goga__btn-icon {
  position: relative;
  z-index: 1;
}

.goga__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--goga-navy);
  transition: background-color .45s ease, color .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

.goga__btn-icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

.goga__btn:hover,
.goga__btn:focus-visible {
  color: #fff;
  border-color: var(--goga-accent);
}

.goga__btn:hover::before,
.goga__btn:focus-visible::before { transform: scaleY(1); }

.goga__btn:hover .goga__btn-icon,
.goga__btn:focus-visible .goga__btn-icon {
  background: var(--goga-navy);
  color: #fff;
  transform: translateX(4px);
}

.goga__btn:focus-visible {
  outline: 2px solid var(--goga-accent);
  outline-offset: 4px;
}

/* ---------- 响应式 ---------- */

/* 收窄两侧留白与卡片内边距 */
@media (max-width: 1440px) {
  .goga {
    --goga-gap: 48px;
    --goga-pad-x: 44px;
    --goga-pad-y: 42px;
  }
}

@media (max-width: 1280px) {
  .goga {
    --goga-edge: 28px;
    --goga-gap: 40px;
    --goga-pad-x: 36px;
  }
}

/* 单列：图在上、文在下 */
@media (max-width: 1024px) {
  .goga__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }

  .goga__media { aspect-ratio: 1.7; }

  .goga__title { margin-top: 28px; font-size: clamp(24px, 4.2vw, 32px); }
  .goga__text { font-size: 16px; }
}

@media (max-width: 766px) {
  .goga {
    --goga-edge: 20px;
    --goga-pad-x: 22px;
    --goga-pad-y: 28px;
    --goga-radius: 22px;
    margin-top: 70px;
  }

  .goga__media { gap: 10px; }
  .goga__shot { border-radius: 14px; }

  .goga__body { text-align: left; }
  .goga__title { margin-top: 24px; font-size: 23px; }
  .goga__text { margin-top: 18px; font-size: 15px; line-height: 1.7; }
  .goga__btn { margin-top: 26px; padding: 12px 14px 12px 22px; font-size: 14px; }
  .goga__btn-icon { width: 30px; height: 30px; }
}

/* 小屏：拼贴改成「主图通栏 + 两张并排」，避免竖构图裁得太窄 */
@media (max-width: 620px) {
  .goga__media {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    aspect-ratio: auto;
    gap: 10px;
  }

  .goga__shot--main {
    grid-column: 1 / -1;
    grid-row: 1;
    aspect-ratio: 16 / 11;
  }

  .goga__shot--a { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; }
  .goga__shot--b { grid-column: 2; grid-row: 2; aspect-ratio: 4 / 3; }
}

@media (max-width: 480px) {
  .goga {
    --goga-edge: 14px;
    --goga-pad-x: 18px;
  }

  .goga__label { font-size: 13px; }
  .goga__title { font-size: 21px; }
}

/* ---------- 无障碍 / 打印 ---------- */
@media (prefers-reduced-motion: reduce) {
  .goga__btn,
  .goga__btn::before,
  .goga__btn-icon { transition: none !important; }
}

@media print {
  .goga__card {
    width: auto;
    margin: 0;
    background: none;
    color: #000;
    border: 1px solid #999;
  }

  .goga__card::after { display: none; }
  .goga__title,
  .goga__label,
  .goga__btn { color: #000; }
  .goga__text { color: #333; }
  .goga__text strong { color: #000; }
}

/* ##########################################################################
   ↓↓↓ 以下为「/ More Products / + 视频块」模块样式（v4.0，纯 HTML+CSS，无 JS）
   与工厂 / 关于我们模块共用本文件；只在含 [gog_factory] 的页面生效。
   若该模块要出现在没有工厂短码的页面上，请把下面这段单独放到站点自定义 CSS。
   ########################################################################## */

/* ==========================================================================
   GOG：/ More Products / + 视频块  —— v3.0  （纯 HTML + CSS，无 JS）
   结构参考 demo.artureanec.com/home-6 的 elementor-element-8afb5f5

   v3 相比 v2：
     · 深蓝带不再通栏：宽度收到 1440px 居中（与站点整体宽度一致），高分屏下不再显得空
     · 标题区（小标签 / H2 / 说明）居中，宽度收窄
     · 视频弹窗改成原生 <details>：无 JS、无遮罩、无阴影，居中显示；
       关闭状态下 iframe 不加载（实测 YouTube 零请求），点开才加载
     · 播放按钮放大，左下角跟卡片一起倒角，去掉阴影

   配色：logo 蓝 #0077ce 作主色；深底上用它的浅色调 #7cc6f2 保证可读

   ▸ 改主色 / 圆角             → 见下面变量
   ▸ 带子通栏的左右留白        → --mp-edge（40 / 28 / 20 / 14）
   ▸ 带子里面内容的限宽        → --mp-content-max
   ▸ 视频卡下方的留白          → --mp-gap-bottom
   ▸ 改视频封面图              → 搜 video-cover
   ▸ 标题 / 描述的对齐（左或中）→ 搜 [ALIGN]
   ========================================================================== */

.gogmp {
  --mp-blue: #0077ce;          /* logo 蓝 */
  --mp-blue-light: #7cc6f2;    /* logo 蓝的浅色调，用在深底上 */
  --mp-navy: #02225b;          /* 与工厂模块同一套深蓝 */
  --mp-content-max: 1440px;    /* 带子里「内容」的限宽（背景仍是通栏的） */
  --mp-edge: 40px;             /* 通栏时左右留的间隙，与工厂 / 关于我们模块同一套 */
  --mp-gap-bottom: 80px;       /* 视频卡下方留白 */
  --mp-radius: 32px;           /* 深蓝带圆角 */
  --mp-card-radius: 24px;      /* 视频卡 / 播放按钮圆角 */
  --mp-overlap: 70px;          /* 视频卡露出带子下沿的高度 */
  --mp-play-h: 104px;          /* 播放按钮高度 */

  margin: 80px 0 0;
  /* 底部留白：视频卡向下露出 --mp-overlap 之后，再留 --mp-gap-bottom 的空隙 */
  padding-bottom: calc(var(--mp-overlap) + var(--mp-gap-bottom));
  font-family: inherit;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.gogmp *,
.gogmp *::before,
.gogmp *::after { box-sizing: border-box; }

/* ---------- 深蓝带：背景通栏（左右留 --mp-edge 间隙）----------
   做法与工厂 / 关于我们模块完全一致（100vw + calc(50% - 50vw) 负边距）。
   带子里面的内容由下面 .gogmp__head / .gog-products-grid / .gogmp__video 限宽居中，
   所以「背景铺满整屏，内容不会散开」。
   注意：不能设 overflow:hidden，否则视频卡没法露到带子外面。
   [NOWIDTH] 想改回「带子本身也不通栏」，把下面 width / max-width / margin 四行换成：
     width: 100%; max-width: var(--mp-content-max); margin-left: auto; margin-right: auto; */
.gogmp__band {
  position: relative;
  display: flow-root;                 /* 关键：建立 BFC → 视频卡的负 margin 不会被外边距合并吃掉 */
  width: calc(100vw - 2 * var(--mp-edge));
  max-width: none;
  margin-left: calc(50% - 50vw + var(--mp-edge));
  margin-right: calc(50% - 50vw + var(--mp-edge));

  padding: 60px 56px 0;               /* 底部 0：视频卡要露出去 */
  border-radius: var(--mp-radius);
  background-color: var(--mp-navy);
  background-image:
    radial-gradient(115% 130% at 92% 0%, rgba(0, 119, 206, .30) 0%, rgba(0, 119, 206, 0) 62%),
    linear-gradient(135deg, #062a68 0%, #02225b 52%, #011b45 100%);
  color: #fff;
}

/* ---------- 标题区：居中、收窄 ---------- */
/* 带子通栏后：带子里面的内容限宽居中（背景铺满整屏，但内容不会散开） */
.gogmp__head,
.gogmp .gog-products-grid,
.gogmp__video {
  width: 100%;
  max-width: var(--mp-content-max);
  margin-left: auto;
  margin-right: auto;
}

.gogmp__head {
  text-align: left;                   /* [ALIGN] 想改回居中就把它和下面 h2 改成 center */
}

/* 小标签：沿用你原有的 .gog-section-subtitle，只换成浅色调 logo 蓝 */
.gogmp .gog-section-subtitle {
  color: var(--mp-blue-light);
  border-bottom-color: rgba(124, 198, 242, .45);
  margin-bottom: 0;
}

/* h2. 提高一级权重，避免被站点 .gog-section-title 的规则覆盖 */
h2.gogmp__title {
  max-width: 840px;                   /* 标题行宽，避免一行拉太长 */
  margin: 16px 0 0;
  text-align: left;                   /* [ALIGN] */
  color: #fff;
  letter-spacing: -.02em;
}

.gogmp__intro {
  max-width: 780px;
  margin: 18px 0 0;
  text-align: left;                   /* [ALIGN] */
  font-size: 17px;
  line-height: 1.78;
  color: rgba(255, 255, 255, .76);
}

/* ---------- 产品四列（深底配色，结构与你的完全一致） ---------- */
.gogmp .gog-products-grid { margin-top: 46px; }

.gogmp .gog-product-card { border-right-color: rgba(255, 255, 255, .14); }

.gogmp .gog-product-title { color: #fff; }

.gogmp .gog-product-title a {
  color: #fff;
  text-decoration: none;
  transition: color .25s;
}

.gogmp .gog-product-title a:hover { color: var(--mp-blue-light); }

.gogmp .gog-product-list li.active { color: rgba(255, 255, 255, .78); }

.gogmp .gog-product-list li.active svg { stroke: var(--mp-blue-light); }

.gogmp .gog-small-btn {
  color: var(--mp-blue-light);
  border-bottom-color: rgba(124, 198, 242, .45);
}

.gogmp .gog-small-btn:hover { color: #fff; }

/* ---------- 视频卡：无背景色，纯图片，骑在深蓝带下沿 ---------- */
.gogmp__video {
  position: relative;
  margin-top: 56px;
  margin-bottom: calc(-1 * var(--mp-overlap));
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 56px calc(var(--mp-play-h) + 48px);
}

/* 图片单独一层：只负责圆角和封面图（视频卡本身不带任何底色） */
.gogmp__video-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--mp-card-radius);
  overflow: hidden;
  /* video-cover ↓ 想换封面就改这一行（用的是你站上已有的图） */
  background-image: url("/wp-content/uploads/2026/04/American-Switches-and-Sockets-Manufacturer.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.gogmp__video-text {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.33;
  letter-spacing: -.01em;
  color: #fff;
}

/* ---------- 播放按钮（同时是 <details> 的 summary） ----------
   钉在视频卡左下角：左边和底边贴齐卡片 → 左下角跟着卡片一起倒角；
   右上角倒角是参考站的签名细节。无阴影。 */
.gogmp__play {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  gap: 18px;
  height: var(--mp-play-h);
  padding: 0 46px 0 34px;

  border: 0;
  border-radius: 0 var(--mp-card-radius) 0 var(--mp-card-radius);
  background: #fff;
  color: #0d1f2d;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;

  box-shadow: none;
  list-style: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .3s ease, color .3s ease;
}

.gogmp__play::-webkit-details-marker { display: none; }
.gogmp__play::marker { content: ""; }

.gogmp__play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--mp-blue);
  color: #fff;
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}

.gogmp__play-icon svg {
  width: 17px;
  height: 17px;
  margin-left: 2px;
  fill: currentColor;
}

.gogmp__play:hover,
.gogmp__play:focus-visible { background: var(--mp-blue); color: #fff; }

.gogmp__play:hover .gogmp__play-icon,
.gogmp__play:focus-visible .gogmp__play-icon {
  background: #fff;
  color: var(--mp-blue);
}

.gogmp__play:focus-visible { outline: 2px solid #fff; outline-offset: -8px; }

/* 展开后：三角变 × ，文字变 Close video（纯 CSS，无 JS） */
.gogmp-vm[open] .gogmp__play-tri { display: none; }

.gogmp-vm[open] .gogmp__play-icon::after {
  content: "\00d7";
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  margin-top: -2px;
}

.gogmp-vm[open] .gogmp__play-label { display: none; }

.gogmp-vm[open] .gogmp__play::after {
  content: "Close video";
  font: inherit;
}

/* ---------- 视频弹窗面板：居中、无遮罩、无阴影 ---------- */
.gogmp-vm__panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  width: min(1040px, calc(100vw - 48px));
  background: #000;
  border-radius: 16px;
  overflow: hidden;
}

.gogmp-vm__panel iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1440px) {
  .gogmp__band { padding: 56px 44px 0; }
  .gogmp__video { padding: 42px 44px calc(var(--mp-play-h) + 42px); }
  .gogmp__video-text { font-size: 27px; }
}

@media (max-width: 1280px) {
  .gogmp { --mp-overlap: 60px; --mp-edge: 28px; }
}

@media (max-width: 1020px) {
  .gogmp {
    margin-top: 64px;
    --mp-edge: 20px;
    --mp-radius: 26px;
    --mp-card-radius: 20px;
    --mp-play-h: 88px;
  }
  .gogmp__band { padding: 44px 28px 0; }
  h2.gogmp__title { font-size: 28px; }
  .gogmp__intro { font-size: 16px; }

  .gogmp .gog-product-card { border-right-color: transparent; }
  .gogmp .gog-product-card:not(:last-child) { border-bottom-color: rgba(255, 255, 255, .14); }

  .gogmp__video {
    min-height: 320px;
    margin-top: 40px;
    padding: 34px 30px calc(var(--mp-play-h) + 34px);
  }
  .gogmp__video-media { background-position: 30% center; }
  .gogmp__video-text { font-size: 23px; }
  .gogmp__play { padding: 0 38px 0 28px; gap: 15px; font-size: 15px; }
  .gogmp__play-icon { width: 36px; height: 36px; }
  .gogmp__play-icon svg { width: 15px; height: 15px; }
}

@media (max-width: 660px) {
  .gogmp {
    margin-top: 56px;
    --mp-overlap: 48px;
    --mp-edge: 14px;
    --mp-radius: 22px;
    --mp-card-radius: 18px;
    --mp-play-h: 76px;
  }
  .gogmp__band { padding: 34px 20px 0; }
  h2.gogmp__title { font-size: 24px; }
  .gogmp__intro { font-size: 15px; line-height: 1.72; }

  .gogmp__video {
    min-height: 260px;
    margin-top: 32px;
    padding: 26px 22px calc(var(--mp-play-h) + 26px);
  }
  .gogmp__video-text { font-size: 20px; }
  .gogmp__play { padding: 0 28px 0 20px; gap: 12px; font-size: 14px; }
  .gogmp__play-icon { width: 32px; height: 32px; }
  .gogmp__play-icon svg { width: 13px; height: 13px; }
  .gogmp-vm[open] .gogmp__play-icon::after { font-size: 20px; }

  .gogmp-vm__panel { width: calc(100vw - 24px); border-radius: 12px; }
}

/* ---------- 无障碍 / 打印 ---------- */
@media (prefers-reduced-motion: reduce) {
  .gogmp__play,
  .gogmp__play-icon,
  .gogmp .gog-product-title a { transition: none !important; }
}

@media print {
  .gogmp { padding-bottom: 0; }
  .gogmp__band { background: none; border: 1px solid #bbb; color: #000; padding-bottom: 0; }
  h2.gogmp__title { color: #000; }
  .gogmp__intro { color: #333; }
  .gogmp .gog-product-title,
  .gogmp .gog-product-title a,
  .gogmp .gog-product-list li.active { color: #000; }
  .gogmp__video { margin-bottom: 0; min-height: 0; padding: 0; }
  .gogmp__video-media { display: none; }
  .gogmp__video-text { color: #000; }
  .gogmp__play { display: none; }
  .gogmp-vm__panel { display: none !important; }
}

  [data-column]:has(.gogfs) { align-items: stretch; }
  .ct-header-text:has(.gogfs),
  .entry-content:has(> .gogfs) { width: 100%; }

  .gogfs {
    --gogfs-hl: #7cc6f2;        /* 文案里的高亮词（logo 蓝的浅色调，深底上够亮） */
    --gogfs-accent: #0077ce;    /* 按钮悬停时的填充色（logo 蓝） */
    --gogfs-navy: #02225b;

    display: flex;
    align-items: center;
    justify-content: space-between;   /* 大屏：文案靠左、按钮靠右 */
    gap: 32px;
    width: 100%;
    padding: 30px 0;
    color: #fff;
    font-family: inherit;
    line-height: 1.5;
    text-align: left;                 /* 覆盖主题页脚列继承下来的 text-align:center */
    -webkit-font-smoothing: antialiased;
  }

  .gogfs *,
  .gogfs *::before,
  .gogfs *::after { box-sizing: border-box; }

  /* 文案：两行，大写。桌面最大 30px —— 比参考站小一号，页脚里不抢戏 */
  .gogfs__text {
    margin: 0;
    font-size: clamp(21px, 2.05vw, 30px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: #fff;
  }

  .gogfs__hl { color: var(--gogfs-hl); }

  /* 按钮：描边胶囊 + 悬停自下而上填充 + 圆形箭头 */
  .gogfs__btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 12px 14px 12px 24px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 999px;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: color .45s cubic-bezier(.22, .61, .36, 1), border-color .45s cubic-bezier(.22, .61, .36, 1);
  }

  /* 这里唯一的伪元素：按钮悬停时的填色块（被 overflow:hidden 裁在胶囊里，不画线） */
  .gogfs__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--gogfs-accent);
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  }

  .gogfs__btn-text,
  .gogfs__btn-icon { position: relative; z-index: 1; }

  .gogfs__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: var(--gogfs-navy);
    transition: background-color .45s ease, color .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
  }

  .gogfs__btn-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
  }

  .gogfs__btn:hover,
  .gogfs__btn:focus-visible {
    color: #fff;
    border-color: var(--gogfs-accent);
  }

  .gogfs__btn:hover::before,
  .gogfs__btn:focus-visible::before { transform: scaleY(1); }

  .gogfs__btn:hover .gogfs__btn-icon,
  .gogfs__btn:focus-visible .gogfs__btn-icon {
    background: var(--gogfs-navy);
    color: #fff;
    transform: translateX(4px);
  }

  .gogfs__btn:focus-visible {
    outline: 2px solid var(--gogfs-hl);
    outline-offset: 4px;
  }

  /* ---------- 小屏：上下列 + 整体居中 ---------- */
  @media (max-width: 900px) {
    .gogfs {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 20px;
      padding: 26px 0;
    }
    .gogfs__text { text-align: center; }
  }

  @media (max-width: 560px) {
    /* 小屏不再强制两行，让文案自然折行 */
    .gogfs__break { display: none; }
    .gogfs__text { font-size: 18px; }
    .gogfs__btn { padding: 11px 12px 11px 20px; font-size: 14px; }
    .gogfs__btn-icon { width: 28px; height: 28px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .gogfs__btn,
    .gogfs__btn::before,
    .gogfs__btn-icon { transition: none !important; }
  }

  .gogab {
  --gogab-edge: 38px;
  --gogab-gap: 10px;
  --gogab-radius: 25px;
  --gogab-h: 560px;
  --gogab-h-wide: 500px;
  --gogab-pad: 52px 44px 44px;

  --gogab-navy: #02225b;
  --gogab-accent: #7cc6f2;
  --gogab-link: #4cb3dd;

  position: relative;
  z-index: 2;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -20px;
  padding: 0 0 80px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  line-height: 1.5;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.gogab *,
.gogab *::before,
.gogab *::after { box-sizing: border-box; }

.gogab__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gogab-gap);
  margin: 0;
  padding: 0 var(--gogab-edge);
}

.gogab__card {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  min-height: var(--gogab-h);
  padding: var(--gogab-pad);
  border-radius: var(--gogab-radius);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--gogab-navy);
  color: #fff;
  transition: box-shadow .35s ease;
}

.gogab__card--wide {
  grid-column: span 3;
  min-height: var(--gogab-h-wide);
}

/* 每张卡片同一个黑色遮罩 */
.gogab__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, .18);
  background-image: linear-gradient(168deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .26) 46%, rgba(0, 0, 0, .84) 100%);
  transition: background-color .4s ease;
  pointer-events: none;
}

/* 悬停：底部 1/4 出蓝色渐变 */
.gogab__card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25%;
  z-index: 1;
  background-image: linear-gradient(0deg, rgba(20, 80, 118, .92) 0%, rgba(64, 145, 188, .52) 52%, rgba(64, 145, 188, 0) 100%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.gogab__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gogab__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
}

.gogab__card:hover { box-shadow: 0 22px 48px rgba(2, 34, 91, .22); }
.gogab__card:hover::before { background-color: rgba(0, 0, 0, .42); }
.gogab__card:hover::after { opacity: 1; }

.gogab__card--light,
.gogab__card--pale { --gogab-dot: #ffffff; }

.gogab__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.gogab__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 3px 15px 3px 4px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .01em;
  color: #fff;
  white-space: nowrap;
}
.gogab__chip::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gogab-dot, #7cc6f2);
}

.gogab__title {
  margin: 0 0 14px;
  font-size: clamp(21px, 1.5vw, 26px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: #fff;
  text-transform: none;
}
.gogab__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .87);
}
.gogab__divider {
  height: 1px;
  margin: 22px 0;
  background: rgba(255, 255, 255, .28);
}

.gogab__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.gogab__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.6;
}
.gogab__list li:last-child { margin-bottom: 0; }
.gogab__list svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 5px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gogab__list a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 3px;
  transition: color .25s ease, text-decoration-color .25s ease;
}
.gogab__list a:hover {
  color: var(--gogab-link);
  text-decoration-color: currentColor;
}

.gogab__story {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.gogab__years {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
}
.gogab__years-num {
  font-family: inherit;
  font-size: clamp(64px, 6vw, 104px);
  font-weight: 700;
  line-height: .78;
  letter-spacing: -.03em;
  color: var(--gogab-accent);
}
@supports (-webkit-text-stroke: 1px #000) {
  .gogab__years-num {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--gogab-accent);
  }
}
.gogab__years-label {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gogab-accent);
}
.gogab__story-main { flex: 1 1 auto; min-width: 0; }

.gogab__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.gogab__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 20px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 100px;
  background: rgba(255, 255, 255, .08);
  white-space: nowrap;
}
.gogab__stat b {
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.gogab__stat span {
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
}

.gogab__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 13px 26px;
  border-radius: 100px;
  background: var(--gogab-accent);
  color: var(--gogab-navy);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.gogab__cta svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s ease;
}
.gogab__cta:hover {
  background: #fff;
  color: var(--gogab-navy);
  transform: translateY(-2px);
}
.gogab__cta:hover svg { transform: translateX(3px); }

.gogab__card--partners {
  background-color: #000;
  background-image: radial-gradient(125% 95% at 100% 0%, rgba(124, 198, 242, .14) 0%, rgba(0, 0, 0, 0) 62%);
}

.gogab__logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.gogab__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 18px;
}
.gogab__logo img {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
}

@media (min-width: 1560px) {
  .gogab { --gogab-h: 500px; --gogab-h-wide: 460px; }
}

@media (max-width: 1200px) {
  .gogab__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gogab__card--full-sm { grid-column: span 4; }
  .gogab__card--wide { grid-column: span 4; }
  .gogab { --gogab-h: 420px; --gogab-h-wide: 400px; --gogab-pad: 46px 38px 38px; }
}

@media (max-width: 1400px) {
  .gogab__story { flex-direction: column; gap: 20px; }
  .gogab__years { flex-direction: row; align-items: baseline; gap: 12px; }
  .gogab__years-label { margin-top: 0; }
}

@media (max-width: 900px) {
  .gogab { --gogab-edge: 20px; --gogab-h: 0; --gogab-h-wide: 0; --gogab-pad: 40px 26px 36px; }
  .gogab__grid { grid-template-columns: 1fr; }
  .gogab__card,
  .gogab__card--wide,
  .gogab__card--full-sm { grid-column: span 1; }
  .gogab__title { font-size: 21px; }
  .gogab__years-num { font-size: 70px; }
  .gogab__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .gogab { --gogab-edge: 14px; --gogab-pad: 34px 22px 30px; }
  .gogab__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gogab__list li { font-size: 15px; }
  .gogab__stat { padding: 8px 16px; }
  .gogab__stat b { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .gogab__card,
  .gogab__card::before,
  .gogab__card::after,
  .gogab__cta,
  .gogab__cta svg,
  .gogab__list a { transition: none; }
  .gogab__cta:hover { transform: none; }
  .gogab__cta:hover svg { transform: none; }
}


/* ==========================================================================
   gogab 5 卡片 v9.0 —— 封面流：通栏铺满 + 上下对称的 3D + 更大的卡片
   ========================================================================== */

.gogab__foot { display: none; }

.gogab {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---------- PC（>1200px）：封面流 ---------- */
@media (width > 1200px) {
	.gogab {
		--gogab-row: calc(100vw - 80px);
	}

	.gogab__grid {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		width: var(--gogab-row) !important;
		margin-left: calc(50% - 50vw + 40px) !important;
		margin-right: calc(50% - 50vw + 40px) !important;
		padding: 56px 14px 0;
		overflow: visible;
	}

	.gogab__card,
	.gogab__card--wide,
	.gogab__card--full-sm {
		grid-column: auto;
		flex: 0 0 auto;
		width: 30% !important;
		min-height: clamp(460px, 27vw, 600px) !important;
		margin-left: 0 !important;

		transform-origin: 50% 50% !important;
		filter: brightness(var(--dim, 1)) !important;
		transform: translateX(calc(var(--tx7, 0px) - 0.5 * (1 - var(--sc, 1)) * 100%))
		           perspective(900px) rotateY(var(--ry, 0deg)) scale(var(--sc, 1)) !important;
		box-shadow: 0 16px 40px #02225b3f;
		border-left: 1px solid #ffffff1f;
		transition: transform .5s cubic-bezier(.22, .61, .36, 1), filter .5s, box-shadow .5s;
	}

	.gogab__card:nth-child(1) { z-index: 1; }
	.gogab__card:nth-child(2) { z-index: 2; }
	.gogab__card:nth-child(3) { z-index: 3; }
	.gogab__card:nth-child(4) { z-index: 2; }
	.gogab__card:nth-child(5) { z-index: 1; }

	.gogab__card:nth-child(1) { margin-left: 1.2% !important;    --ry: 12deg;  --sc: .93;  --dim: .72; }
	.gogab__card:nth-child(2) { margin-left: -16.2% !important;  --ry: 6deg;   --sc: .965; --dim: .86; }
	.gogab__card:nth-child(3) { margin-left: -10% !important;    --ry: 0deg;   --sc: 1;    --dim: 1;   }
	.gogab__card:nth-child(4) { margin-left: -8.95% !important;  --ry: -6deg;  --sc: .965; --dim: .86; }
	.gogab__card:nth-child(5) { margin-left: -15.15% !important; --ry: -12deg; --sc: .93;  --dim: .72; }

	.gogab__card:hover,
	.gogab__card:focus-within {
		--ry: 0deg;
		--sc: 1.04;
		--dim: 1;
		z-index: 9;
		box-shadow: 0 26px 60px #02225b8c;
	}

	.gogab__card:nth-child(5):hover,
	.gogab__card:nth-child(5):focus-within { --tx7: calc(-0.03 * var(--gogab-row)); }

	.gogab__card { padding: clamp(26px, 1.75vw, 34px) clamp(24px, 1.6vw, 32px) clamp(22px, 1.45vw, 28px); will-change: auto; }
	.gogab__chips { gap: clamp(7px, .5vw, 10px); margin-bottom: clamp(13px, .9vw, 18px); }
	.gogab__chip { padding: 3px 12px 3px 4px; font-size: clamp(12px, .78vw, 15px); }        /* 12 → 15 */
	.gogab__chip:before { width: clamp(14px, .95vw, 18px); height: clamp(14px, .95vw, 18px); }
	.gogab__title { margin-bottom: clamp(10px, .7vw, 14px); font-size: clamp(20px, 1.35vw, 26px); line-height: 1.28; } /* 20 → 26 */
	.gogab__desc {
		display: block;
		overflow: visible;
		-webkit-line-clamp: none;
		font-size: clamp(14.5px, .95vw, 18px);                                               /* 14.5 → 18 */
		line-height: 1.6;
	}
	.gogab__divider { margin: clamp(14px, .95vw, 19px) 0; }
	.gogab__list li { gap: 10px; margin-bottom: clamp(9px, .6vw, 12px); font-size: clamp(14.5px, .95vw, 18px); line-height: 1.5; }
	.gogab__list svg { width: 14px; height: 14px; margin-top: 5px; }
	.gogab__cta { margin-top: clamp(14px, .95vw, 19px); padding: clamp(10px, .72vw, 14px) clamp(19px, 1.25vw, 25px); font-size: clamp(13.5px, .88vw, 17px); }

	.gogab__card--story .gogab__chips { margin-bottom: clamp(10px, .7vw, 14px); }
	.gogab__card--story .gogab__title { margin-bottom: 8px; }
	.gogab__card--story .gogab__desc { font-size: clamp(13.5px, .88vw, 16.5px); line-height: 1.5; }
	.gogab__card--story .gogab__stats { margin-top: clamp(11px, .75vw, 15px); }
	.gogab__card--story .gogab__stat { padding: 6px 12px; }
	.gogab__card--story .gogab__cta { margin-top: clamp(11px, .75vw, 15px); }
	.gogab__card--story .gogab__years-num { font-size: clamp(40px, 2.4vw, 48px); }
	.gogab__card--story .gogab__story { flex-direction: column; gap: 11px; align-items: stretch; }
	.gogab__card--story .gogab__years { flex-direction: row; align-items: baseline; gap: 11px; }
	.gogab__card--story .gogab__years-label { margin-top: 0; }
	.gogab__years-num { font-size: clamp(44px, 2.7vw, 54px); line-height: .85; }
	.gogab__years-label { font-size: clamp(11px, .68vw, 13px); letter-spacing: .14em; margin-top: 3px; }
	.gogab__story-main { min-width: 0; }
	.gogab__stats { gap: clamp(7px, .5vw, 10px); margin-top: clamp(14px, .95vw, 19px); }
	.gogab__stat { padding: clamp(6px, .45vw, 9px) clamp(13px, .85vw, 17px); gap: 8px; white-space: normal; }
	.gogab__stat b { font-size: clamp(17px, 1.15vw, 22px); }
	.gogab__stat span { font-size: clamp(11.5px, .75vw, 14.5px); }
	.gogab__logos { gap: clamp(8px, .55vw, 11px); margin-top: clamp(14px, .95vw, 19px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gogab__logo img { max-width: 190px; }
}

@media (width <=1200px) {
	.gogab__grid {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 10px;
		padding: 4px var(--gogab-edge) 6px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.gogab__grid::-webkit-scrollbar { display: none; }

	.gogab__card,
	.gogab__card--wide,
	.gogab__card--full-sm {
		grid-column: auto;
		flex: 0 0 86%;
		width: auto !important;
		min-height: 0 !important;
		margin-left: 0 !important;
		transform: none !important; 
		transform-origin: 50% 50%;
		filter: none !important;
		box-shadow: none;
		border-left: 0;
		scroll-snap-align: center;
	}

	.gogab__card { padding: 22px 17px 20px; }
	.gogab__chips { gap: 5px; margin-bottom: 9px; }
	.gogab__chip { padding: 2px 9px 2px 3px; font-size: 10.5px; }
	.gogab__chip:before { width: 12px; height: 12px; }
	.gogab__title { margin-bottom: 7px; font-size: 17px; line-height: 1.24; }
	.gogab__desc { font-size: 12px; line-height: 1.5; }
	.gogab__divider { margin: 10px 0; }
	.gogab__list li { gap: 9px; margin-bottom: 10px; font-size: 13.5px; line-height: 1.55; }
	.gogab__list svg { width: 13px; height: 13px; margin-top: 4px; }
	.gogab__list li:last-child { margin-bottom: 0; }
	.gogab__cta { margin-top: 12px; padding: 9px 16px; font-size: 12px; }
	.gogab__story { gap: 8px; }
	.gogab__years-num { font-size: 34px; line-height: .85; }
	.gogab__years-label { font-size: 9.5px; margin-top: 2px; }
	.gogab__stats { gap: 5px; margin-top: 10px; }
	.gogab__stat { padding: 4px 10px; gap: 5px; white-space: normal; }
	.gogab__stat b { font-size: 14px; }
	.gogab__stat span { font-size: 10px; }
	.gogab__logos { gap: 5px; margin-top: 10px; }
	.gogab__logo img { max-width: 150px; }

	@media (prefers-reduced-motion: reduce) {
		.gogab__grid { scroll-behavior: auto; }
	}
}


/* ==========================================================================
   gogab 5 卡片 v15 · 电光蓝对称阶梯 + 中间卡「天蓝」（用户指定配色）
   --------------------------------------------------------------------------
   两侧 #1318FF（最蓝）→ 中间一档 #2B54FF 过渡 → 正中间卡3 用用户指定的天蓝。
   卡3 渐变（★ 以用户给的这段为准，别自己改）：
       radial-gradient(115% 85% at 0% 0%, rgb(255 255 255 / .26) 0%, rgb(255 255 255 / 0) 58%),
       linear-gradient(158deg, #66C6FB 0%, #4DB7F6 52%, #5B9AF8 100%)
   （这几个是偏天蓝/青蓝的浅蓝，明度 50% 左右 —— 白字在上面只有 2.2:1，
     所以卡3 的文字仍然是整套墨色。）
   只改「颜色 / 背景」：布局、3D 层级、悬停与锚点全部沿用 v9，一行没动。
   文字颜色：卡1/2/4/5 用白字（这四张底子够深）；卡3 是淡蓝浅底，
   所以整套换墨色（标题 #0B1436、正文 #1C2E5C —— 比正文用的灰蓝也更贴这套蓝）。
   ========================================================================== */

/* ── 色板：想整体换色只改这里 ──────────────────────────────────────────── */
.gogab {
	--gogab-cyan: #6FF1FF;           /* 强调色（深底上的圆点 / 15 YEARS 描边） */
	--gogab-blue: #1318FF;           /* 两侧卡（最蓝） */
	--gogab-blue-mid: #2B54FF;       /* 中间一档过渡色（卡2 / 卡4） */
	--gogab-pale: #4DB7F6;           /* 中间卡主色（用户指定渐变的中段） */
	--gogab-ink: #0B1436;            /* 浅底上的墨色标题 */
	--gogab-ink-soft: #12224A;       /* 浅底上的墨色正文（深海军蓝，更贴这套蓝） */
	--gogab-accent: #6FF1FF;         /* 深底上的强调色（15 YEARS 描边 / CTA） */
	--gogab-link: #6FF1FF;           /* 深底上链接的悬停色 */
}

/* ── ① 去掉背景图，以及原来压图用的两层蒙版 ─────────────────────────────
   注：HTML 里那 4 个 <img class="gogab__bg"> 已经不用了；建议顺手删掉，
      不删也不影响显示，只是浏览器会白白下载那几张图。                        */
.gogab__bg { display: none !important; }

.gogab__card::before,
.gogab__card::after { display: none !important; }

/* ── ② 五张卡的底色：中间最亮 → 两侧最蓝（左右镜像） ─────────────────────
   文字都在卡片上半部，每张卡上半部都保证是够深的纯色，
   角落辉光只做氛围，不会跑到文字后面去。                                    */

/* 卡1 OEM/ODM：最蓝 #1318FF */
.gogab__card:nth-child(1) {
	background-color: var(--gogab-blue);
	background-image:
		radial-gradient(120% 85% at 100% 100%, rgb(111 241 255 / .26) 0%, rgb(111 241 255 / 0) 58%),
		linear-gradient(158deg, #2532FF 0%, #1318FF 55%, #0B0FCC 100%);
}

/* 卡2 代理商支持：过渡档 #2B54FF，左上角青色辉光 */
.gogab__card:nth-child(2) {
	background-color: var(--gogab-blue-mid);
	background-image:
		radial-gradient(115% 80% at 0% 0%, rgb(111 241 255 / .30) 0%, rgb(111 241 255 / 0) 55%),
		linear-gradient(158deg, #3A64FF 0%, #2B54FF 55%, #1F3DE0 100%);
}

/* 卡3（中间那张）：天蓝（用户指定配色）—— 最亮的一张，视觉重心，墨色文字
   ★ 这两条必须带 !important：站点开着 FlyingPress，它会把 CSS「内联 + 生成已用CSS」并整页缓存，
     页面缓存没清时，HTML 里会残留一份旧的内联规则（同特异性但排在后面，
     常常被压成 background 简写 = 顺带把 background-image 清成 none）。
     带 !important 后，无论旧内联规则在不在、排在前后，这条都以它为准。 */
.gogab__card:nth-child(3) {
	background-color: var(--gogab-pale) !important;
	background-image:
		radial-gradient(115% 85% at 0% 0%, rgb(255 255 255 / .26) 0%, rgb(255 255 255 / 0) 58%),
		linear-gradient(158deg, #66C6FB 0%, #4DB7F6 52%, #5B9AF8 100%) !important;
	color: var(--gogab-ink);
}

/* 卡4 15 周年：过渡档 #2B54FF（与卡2 镜像），左下角青色辉光 */
.gogab__card:nth-child(4) {
	background-color: var(--gogab-blue-mid);
	background-image:
		radial-gradient(115% 80% at 0% 100%, rgb(111 241 255 / .24) 0%, rgb(111 241 255 / 0) 55%),
		linear-gradient(158deg, #3560FF 0%, #2B54FF 48%, #1B36D6 100%);
}

/* 卡5 合作 logo：最蓝 #1318FF（与卡1 镜像） */
.gogab__card:nth-child(5) {
	background-color: var(--gogab-blue);
	background-image:
		radial-gradient(115% 85% at 0% 0%, rgb(111 241 255 / .22) 0%, rgb(111 241 255 / 0) 58%),
		linear-gradient(158deg, #2029FF 0%, #1318FF 52%, #0A0EC4 100%);
}

/* ── ③ 卡内小元素的配色：只有卡3 是浅底，其余四张沿用原本的白字 ────────── */

/* chip 前面的小圆点（跟着 --gogab-dot 走） */
.gogab__card:nth-child(1),
.gogab__card:nth-child(2),
.gogab__card:nth-child(4),
.gogab__card:nth-child(5) { --gogab-dot: var(--gogab-cyan); }

.gogab__card:nth-child(3) { --gogab-dot: var(--gogab-ink); }

/* 卡3（#6FF1FF 浅底）整套换墨色 */
.gogab__card:nth-child(3) .gogab__title { color: var(--gogab-ink); }
.gogab__card:nth-child(3) .gogab__desc { color: var(--gogab-ink-soft); }

.gogab__card:nth-child(3) .gogab__chip {
	color: var(--gogab-ink);
	border-color: rgb(11 20 54 / .30);
	background-color: rgb(255 255 255 / .42);
}

.gogab__card:nth-child(3) .gogab__divider { background: rgb(11 20 54 / .16); }

.gogab__card:nth-child(3) .gogab__list a {
	color: var(--gogab-ink-soft);
	text-decoration-color: rgb(11 20 54 / .40);
}

.gogab__card:nth-child(3) .gogab__list a:hover,
.gogab__card:nth-child(3) .gogab__list a:focus-visible {
	color: #000;
	text-decoration-color: currentColor;
}

/* 数据胶囊（卡4 才有，万一挪到卡3 上也不会串色） */
.gogab__card:nth-child(3) .gogab__stat {
	border-color: rgb(11 20 54 / .22);
	background: rgb(255 255 255 / .42);
}

.gogab__card:nth-child(3) .gogab__stat b { color: var(--gogab-ink); }
.gogab__card:nth-child(3) .gogab__stat span { color: var(--gogab-ink-soft); }

.gogab__card:nth-child(3) .gogab__years-num { -webkit-text-stroke-color: var(--gogab-ink); }
.gogab__card:nth-child(3) .gogab__years-label { color: var(--gogab-ink); }
.gogab__card:nth-child(3) .gogab__cta { background: var(--gogab-ink); color: #fff; }

/* ── ④ 卡5 的 logo：放到白色小块上 ────────────────────────────────────────
   卡5 现在是深蓝 #1318FF，而 Midea / CHNT 这些 logo 本身是蓝色的，
   直接压上去看不出轮廓 → 给它们白色小方块。                                   */
.gogab__card:nth-child(5) .gogab__logo {
	padding: 10px 8px;
	background: #fff;
	border: 1px solid rgb(255 255 255 / .18);
	box-shadow: 0 4px 14px rgb(4 8 90 / .28);
}

.gogab__card:nth-child(5) .gogab__logo img {
	width: auto;
	max-width: 100%;
	max-height: 34px;
	object-fit: contain;
}

/* ── ⑤ 悬停阴影：跟着换成电光蓝的深版 ──────────────────────────────────── */
@media (width > 1200px) {
	.gogab__card:hover,
	.gogab__card:focus-within { box-shadow: 0 26px 60px rgb(19 24 255 / .40); }
}


/* ==========================================================================
   GOG · 底部两个区块（复刻 sanity.io）—— 纯 CSS，零 JS
   --------------------------------------------------------------------------
   B  .gogsn-band   ← sanity「Enterprise-grade everything」→ 替换 gog-case-studies
   C  .gogsn-cta    ← sanity「Less talk, more code」      → 替换 gog-faq

   ★ 这份**只含底部两块**（B + C）：「关于我们」那套样式已经全部剔除。
   ★ 共用的基础部分（变量、.gogsn__in 容器、.gogsn-pill 胶囊）留在里面，B/C 都依赖。

   安装：追加到 wp-content/themes/GOG/gog-factory.css 末尾
        HTML 用 gog-module-BC-bottom.html（B 在前、C 在后，替换 case-studies + FAQ）

   宽度 = 定宽居中，桌面封顶 1500px（两侧自动留白）；视口再窄时按边缘值收边：
        width / max-width: min(1500px, calc(100% - 2*边缘))
        边缘：桌面 40px，≤900px → 24，≤640px → 18
        （视口 1920 → 内容 1500，两侧各 210；1440 → 1360；390 → 354）
   配色 = 站点自己的深蓝 #02225b / 主色 #4cb3dd；字体沿用主题（Rubik）
   ========================================================================== */

.gogsn {
	/* ── 可调变量 ─────────────────────────────────────────────── */
	--gogsn-bg: #fff;
	--gogsn-fg: #0d0f14;
	--gogsn-dim: #5b6472;
	--gogsn-line: #e4e9ef;
	--gogsn-navy: #02225b;
	--gogsn-brand: #4cb3dd;
	--gogsn-dot: #cdd9e5;
	--gogsn-max: none;          /* 通栏：不限宽 */
	--gogsn-edge: 40px;         /* 左右各 40px（窄屏在下面几档递减） */

	/* ★ 定宽居中：桌面封顶 1500px（两边自动留白），窄屏按 --gogsn-edge 收边
	   —— 全屏拉满太散，1500 是「宽但不空」的甜点值。 */
	width: min(1500px, calc(100% - 2 * var(--gogsn-edge)));
	max-width: min(1500px, calc(100% - 2 * var(--gogsn-edge)));
	margin-left: auto;
	margin-right: auto;
	padding-inline: 0;

	background: var(--gogsn-bg);
	color: var(--gogsn-fg);
	font-family: inherit;
	line-height: 1.5;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.gogsn *, .gogsn *::before, .gogsn *::after {
	box-sizing: border-box;
}

.gogsn__in {
	/* 通栏时边缘由外层 .gogsn 的 calc 负边距负责，内层不再加留白 */
	max-width: none;
	margin: 0;
	padding: 0;
}

.gogsn h2, .gogsn h3 {
	font-weight: 600; color: inherit;
}

.gogsn .gogsn-ico {
	width: 13px; height: 13px; flex: none;
	stroke: currentColor; stroke-width: 2; fill: none;
	transition: transform .2s ease;
}

/* 胶囊按钮（sanity 的 outline pill） */

.gogsn-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 15px;
	border: 1px solid currentColor; border-radius: 999px;
	font-size: 12.5px; font-weight: 500; letter-spacing: .06em; line-height: 1.4;
	text-transform: uppercase; text-decoration: none; color: inherit;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.gogsn-pill:hover, .gogsn-pill:focus-visible {
	background: var(--gogsn-navy); border-color: var(--gogsn-navy);
	color: #fff !important; text-decoration: none !important;
}

.gogsn-pill:hover .gogsn-ico, .gogsn-pill:focus-visible .gogsn-ico {
	transform: translateX(3px);
}

/* ==========================================================================
   B · 底部第一块（替换 gog-case-studies）
   ========================================================================== */

.gogsn-band {
	padding: clamp(44px, 4.4vw, 80px) 0;
	border-top: 1px solid var(--gogsn-line);
}

.gogsn-band__title {
	margin: 0 0 clamp(22px, 2.4vw, 38px);
	max-width: 24ch;
	font-size: clamp(25px, 2.9vw, 46px);
	line-height: 1.1;
	letter-spacing: -.024em;
}

.gogsn-band__row {
	display: grid;
	grid-template-columns: minmax(0, 400px) minmax(40px, 1fr) auto;
	align-items: center;
	gap: clamp(18px, 2.2vw, 38px);
}

.gogsn-band__desc {
	margin: 0 0 16px;
	max-width: 40ch;
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.58;
	color: var(--gogsn-dim);
}

.gogsn-band__meta {
	display: flex; flex-wrap: wrap; gap: 6px 20px;
	margin: 0 0 20px; padding: 0; list-style: none;
}

.gogsn-band__meta li {
	font-size: 12.5px; letter-spacing: .055em; text-transform: uppercase;
}

.gogsn-band__meta li::before {
	content: ">"; margin-right: 7px; opacity: .45;
}

.gogsn-band__meta a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--gogsn-line);
	transition: border-color .2s ease, color .2s ease;
}

.gogsn-band__meta a:hover,
.gogsn-band__meta a:focus-visible {
	color: var(--gogsn-brand); border-bottom-color: currentColor;
}

.gogsn-band__cta {
	margin: 0;
}

.gogsn-band__dots {
	align-self: stretch;
	min-height: 44px;
	background-image: radial-gradient(var(--gogsn-dot) 1px, transparent 1.3px);
	background-size: 8px 8px;
}

.gogsn-band__badges {
	display: flex; gap: clamp(14px, 2vw, 34px);
	margin: 0; padding: 0; list-style: none;
}

.gogsn-band__badges li {
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	width: clamp(72px, 6.6vw, 96px);
	text-align: center;
}

.gogsn-band__badges img {
	width: clamp(48px, 4vw, 62px);
	height: clamp(48px, 4vw, 62px);
	object-fit: contain;
	padding: 7px;
	border: 1px solid var(--gogsn-line);
	border-radius: 50%;
	background: #fff;
}

.gogsn-band__badges span {
	font-size: 11px; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase;
	color: var(--gogsn-dim);
}

/* ==========================================================================
   C · 底部第二块（替换 gog-faq）
   ========================================================================== */

.gogsn-cta {
	padding: clamp(50px, 5.4vw, 96px) 0 clamp(50px, 5vw, 88px);
	border-top: 1px solid var(--gogsn-line);
	text-align: center;
}

.gogsn-cta__title {
	margin: 0 auto clamp(30px, 3.6vw, 56px);
	max-width: 20ch;
	font-size: clamp(29px, 4.2vw, 60px);
	line-height: 1.04;
	letter-spacing: -.03em;
}

.gogsn-cta__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 2.6vw, 44px);
	margin: 0; padding: 0; list-style: none;
}

.gogsn-cta__grid > li {
	display: flex; flex-direction: column; align-items: center; gap: 10px;
}

.gogsn-cta__grid h3 {
	margin: 0;
	font-size: clamp(17px, 1.45vw, 22px);
	line-height: 1.3;
	letter-spacing: -.01em;
}

.gogsn-cta__grid p {
	margin: 0;
	max-width: 32ch;
	font-size: clamp(13.5px, .96vw, 15px);
	line-height: 1.55;
	color: var(--gogsn-dim);
}

.gogsn-cta__chips {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
	margin: 4px 0 0; padding: 0; list-style: none;
}

.gogsn-cta__chips a,
.gogsn-cta__chips span {
	display: inline-flex; align-items: center;
	padding: 5px 12px;
	border: 1px solid var(--gogsn-line); border-radius: 999px;
	font-size: 12px; letter-spacing: .04em;
	text-decoration: none; color: inherit;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.gogsn-cta__chips a:hover, .gogsn-cta__chips a:focus-visible {
	background: var(--gogsn-navy); border-color: var(--gogsn-navy); color: #fff !important;
}

/* 三个标准的产品示意图 */

.gogsn-cta__stds {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
	margin: 8px 0 0; padding: 0; list-style: none;
}

.gogsn-cta__stds a {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	text-decoration: none; color: inherit;
}

/* 纯简笔画：没有底框、没有底色，尺寸和右侧社媒图标（40px 圆）差不多 */

.gogsn-cta__fig {
	display: grid; place-items: center;
	width: clamp(28px, 2.2vw, 34px);
	height: clamp(28px, 2.2vw, 34px);
	color: var(--gogsn-navy);
	transition: color .2s ease, transform .2s ease;
}

.gogsn-cta__fig svg {
	width: 100%; height: 100%;
	stroke: currentColor; stroke-width: 2.6; fill: none;
	stroke-linecap: round; stroke-linejoin: round;
}

.gogsn-cta__fig .fig-plate {
	stroke-width: 1.5;
	opacity: .45;
}

.gogsn-cta__figlabel {
	font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
	color: var(--gogsn-dim);
}

.gogsn-cta__stds a:hover .gogsn-cta__fig,
.gogsn-cta__stds a:focus-visible .gogsn-cta__fig {
	color: var(--gogsn-brand);
	transform: translateY(-1px);
}

/* 社媒 */

.gogsn-cta__social {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
	margin: 6px 0 0; padding: 0; list-style: none;
}

.gogsn-cta__social a {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border: 1px solid var(--gogsn-line);
	border-radius: 50%;
	background: #fff;
	color: var(--gogsn-navy);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.gogsn-cta__social svg {
	width: 18px; height: 18px;
	fill: currentColor;
	transition: fill .2s ease;
}

.gogsn-cta__social a:hover,
.gogsn-cta__social a:focus-visible {
	background: var(--soc, var(--gogsn-navy));
	border-color: var(--soc, var(--gogsn-navy));
	color: #fff !important;
}

.gogsn-cta__actions {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: clamp(12px, 1.4vw, 20px);
	margin-top: clamp(34px, 4vw, 64px);
}

.gogsn-bigpill {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 1 1 0; max-width: none;
	height: clamp(64px, 6.6vw, 104px);
	padding: 0 clamp(18px, 2vw, 34px);
	border: 0; border-radius: 999px;
	font-size: clamp(15px, 1.95vw, 36px);
	font-weight: 600; line-height: 1.1; letter-spacing: -.015em;
	text-align: center; white-space: nowrap;
	text-decoration: none; color: #fff;
	transition: background-color .25s ease, transform .25s ease;
}

.gogsn-bigpill--brand {
	background: var(--gogsn-brand);
}

.gogsn-bigpill--dark {
	background: var(--gogsn-navy);
}

.gogsn-bigpill:hover, .gogsn-bigpill:focus-visible {
	transform: translateY(-2px);
}

/* ★★ 站点的全局 a:hover / a:visited（a:hover{color:var(--theme-link-hover-color)}、
      .gogab a:hover{color:var(--gogab-link)}）会在悬停时把大按钮的文字改色、还加下划线。
      这两颗按钮底子是深的，文字在【任何状态】下都必须是白色 —— 这里把 6 个状态用 :is()
      全列出来（比逐个写伪类特异性更高），再叠 !important 钉死；-webkit-text-fill-color
      再兜一层，避免主题用文字渐变/透明填充把字吃掉。 */

.gogsn .gogsn-bigpill:is(:link, :visited, :hover, :focus, :focus-visible, :active),
.gogsn .gogsn-cta__actions .gogsn-bigpill:is(:link, :visited, :hover, :focus, :focus-visible, :active) {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	text-decoration: none !important;
}

.gogsn-bigpill--brand:hover, .gogsn-bigpill--brand:focus-visible {
	background: var(--gogsn-navy);
}

.gogsn-bigpill--dark:hover, .gogsn-bigpill--dark:focus-visible {
	background: #04143a;
}

/* ==========================================================================
   响应式
   ========================================================================== */

@media (max-width: 1080px) {
	.gogsn-band__row {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "lead badges" "dots dots";
		row-gap: clamp(18px, 2.4vw, 28px);
	}

	.gogsn-band__lead {
		grid-area: lead;
	}

	.gogsn-band__badges {
		grid-area: badges;
	}

	.gogsn-band__dots {
		grid-area: dots; min-height: 24px;
	}
}

@media (max-width: 900px) {
	.gogsn {
		--gogsn-edge: 24px;
	}

	.gogsn-cta__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.gogsn {
		--gogsn-edge: 18px;
	}

	.gogsn-cta__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.gogsn-band__row {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "lead" "dots" "badges";
	}

	.gogsn-band__badges {
		justify-content: flex-start;
	}

	.gogsn-cta__actions {
		flex-direction: column;
	}

	/* ★ 手机上按钮会变一条线的原因：容器改成 column 后，主轴是纵向，
	   而 .gogsn-bigpill 带着 `flex: 1 1 0` —— flex-basis:0 在纵向里顶替了 height，
	   于是 height:62px 被忽略，按钮只剩一行文字高（约 22px）。
	   修法：flex 归零 + 用 min-height/padding 撑开，并允许文字换行（窄屏不溢出）。 */
	.gogsn-bigpill {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
		height: auto;
		min-height: 56px;
		padding: 14px 18px;
		font-size: 16px;
		line-height: 1.25;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gogsn *, .gogsn *::before, .gogsn *::after {
		transition-duration: .01ms !important;
	}
}


/* ==========================================================================
   GOG · 照片墙（collage）—— 纯 CSS，零 JS
   --------------------------------------------------------------------------
   结构：.gogcollage > .gogcollage__stage
                          ├ .gogcollage__t--hero   中间大图
                          └ .gogcollage__strip     四周 10 张小图（+10 个克隆）

   · 桌面：stage 固定 1920:736 比例（= 参考图画幅），10 张小图用百分比绝对定位散布四周，
           **大图 z-index 20 压在最上层，不会被任何小图遮挡**；
           悬停任意一张 → 转正 + 放大 7.5% + 提到 30（这时才会盖住大图）。
   · ≤860px：大图原地不动，下面那一行小图改成**自动循环播放**（无缝跑马灯，纯 CSS 动画）。
   · 想换图：改 HTML 里对应那张的 src；想微调位置：改它那条 left/top/width/height。
   ========================================================================== */

.gogcollage {
	--gogcol-edge: 40px;                     /* 左右留白，窄屏递减（24 / 18） */
	/* ★ 全宽度，和 goga（关于我们）/ gogmp 完全一致：
	     宽度 = 视口 - 左右各 40px（1920 屏 → 1840，1440 屏 → 1360）
	     左右都写负 margin，既撑出容器又自动居中（实测左 33 / 右 32，与 goga__card 一致） */
	width: calc(100vw - 2 * var(--gogcol-edge));
	max-width: none;
	margin-left: calc(50% - 50vw + var(--gogcol-edge));
	margin-right: calc(50% - 50vw + var(--gogcol-edge));
	padding: clamp(38px, 4.6vw, 76px) 0;      /* 模块上下留白，可调 */
}

.gogcollage *,
.gogcollage *::before,
.gogcollage *::after { box-sizing: border-box; }

/* 画幅：1920×736 = 参考图比例（2.61:1），子元素坐标全部按这个比例算 */
.gogcollage__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1920 / 736;
}

/* 桌面端：strip 不参与布局，里面的小图直接相对 stage 定位 */
.gogcollage__strip { display: contents; }

.gogcollage__t {
	position: absolute;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: clamp(3px, .34vw, 6px);
	background: #eef2f7;
	box-shadow:
		0 18px 40px -18px rgb(2 34 91 / .40),
		0 3px 10px rgb(2 34 91 / .10);
	transform: translateY(var(--y, 0px)) rotate(var(--r, 0deg));
	transform-origin: 50% 50%;
	transition:
		transform .38s cubic-bezier(.22, .68, .24, 1),
		box-shadow .38s ease;
}

.gogcollage__t img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* 克隆（移动端循环播放的第二段）在桌面端不显示 */
.gogcollage__t--clone { display: none; }

/* ── 桌面坐标（左/上/宽/高 全是相对 stage 的百分比）───────────────────── */

/* 中间大图：z-index 20 —— 压在所有小图之上，默认不会被遮挡 */
.gogcollage__t--hero {
	left: 9.2%;  top: 24%;   width: 76.4%; height: 66.5%;
	z-index: 20;
}
.gogcollage__t--hero img { object-position: 50% 42%; }

/* ★ 坐标原则：每张小图只把边缘「藏」进大图 1~6%，其余 85% 以上露在外面
   （大图 z-index 20 在上，藏太多就会像被切掉的细条）。 */

/* 顶部一排（6 张，高度各不相同 = 错落；下沿刚好探进大图顶边一点） */
.gogcollage__t--a { left: 15.0%; top: 1.6%;  width: 11.4%; height: 25.5%; z-index: 2;  --r: -2.2deg; }
.gogcollage__t--b { left: 26.6%; top: 1.0%;  width: 9.8%;  height: 29.0%; z-index: 3;  --r:  1.8deg; }
.gogcollage__t--c { left: 35.6%; top: 1.8%;  width: 11.8%; height: 25.0%; z-index: 4;  --r: -1.4deg; }
.gogcollage__t--d { left: 46.6%; top: 1.2%;  width: 16.0%; height: 27.5%; z-index: 5;  --r:  1.2deg; }
.gogcollage__t--e { left: 62.0%; top: 2.0%;  width: 16.8%; height: 26.0%; z-index: 6;  --r: -2.0deg; }
.gogcollage__t--f { left: 78.6%; top: 1.0%;  width: 13.4%; height: 24.5%; z-index: 7;  --r:  1.6deg; }

/* 左侧两张（右沿只探进大图左边缘 1~2%） */
.gogcollage__t--g { left: 0.6%;  top: 19.5%; width: 11.0%; height: 34.0%; z-index: 8;  --r: -1.8deg; }
.gogcollage__t--h { left: 0.4%;  top: 56.5%; width: 11.2%; height: 34.0%; z-index: 9;  --r:  2.2deg; }

/* 右侧两张（左沿只探进大图右边缘 1~2%） */
.gogcollage__t--j { left: 84.2%; top: 29.0%; width: 10.4%; height: 33.0%; z-index: 10; --r: -1.5deg; }
.gogcollage__t--k { left: 84.6%; top: 64.0%; width: 10.0%; height: 26.0%; z-index: 11; --r:  1.9deg; }

/* ── 悬停：转正 + 放大 + 提到最顶层（这一下才会盖住大图） ──────────────── */
@media (hover: hover) and (pointer: fine) {
	.gogcollage__t:hover {
		transform: translateY(0) rotate(0deg) scale(1.075);
		z-index: 30;
		box-shadow:
			0 34px 70px -22px rgb(2 34 91 / .52),
			0 6px 16px rgb(2 34 91 / .14);
	}
}

/* 触屏没有 hover：按下时也放大一下，给个反馈 */
@media (hover: none) {
	.gogcollage__t:active {
		transform: translateY(0) rotate(0deg) scale(1.05);
		z-index: 30;
	}
}

/* ── 移动端 / 平板（≤860px）：大图不动 + 下面一行自动循环播放 ───────────── */
@media (max-width: 860px) {
	.gogcollage {
		--gogcol-edge: 24px;
		padding: clamp(26px, 5vw, 44px) 0;
	}

	.gogcollage__stage {
		aspect-ratio: auto;
		overflow: hidden;                 /* 裁掉跑马灯溢出的部分 */
		padding: 6px 0 2px;               /* 给倾斜的角留一点空间 */
	}

	/* 第一行：大图（保持不动） */
	.gogcollage__t--hero {
		position: static;
		width: 100%;
		height: auto;
		margin: 0 0 12px;
		z-index: auto;
		transform: none;
	}
	.gogcollage__t--hero img { aspect-ratio: 16 / 10; height: auto; }

	/* 第二行：自动循环播放的一行小图 */
	.gogcollage__strip {
		display: flex;
		flex-wrap: nowrap;
		width: max-content;               /* 宽度=内容宽，translateX(-50%) 才能无缝 */
		animation: gogcol-marquee 30s linear infinite;
		will-change: transform;
	}

	.gogcollage__strip > .gogcollage__t {
		position: static;
		flex: 0 0 auto;
		width: calc((100vw - 2 * var(--gogcol-edge) - 16px) / 3);
		margin-right: 8px;
		border-radius: 5px;
		box-shadow: 0 8px 20px -10px rgb(2 34 91 / .38);
	}

	.gogcollage__strip > .gogcollage__t img {
		aspect-ratio: 1 / 1;
		height: auto;
	}

	.gogcollage__t--clone { display: block; }

	/* 移动端倾斜小一点，滚动时不至于太跳 */
	.gogcollage__t--a { --r: -2.0deg; --y: 0px; }
	.gogcollage__t--b { --r:  1.6deg; --y: 0px; }
	.gogcollage__t--c { --r: -1.6deg; --y: 0px; }
	.gogcollage__t--d { --r:  2.0deg; --y: 0px; }
	.gogcollage__t--e { --r: -1.8deg; --y: 0px; }
	.gogcollage__t--f { --r:  1.4deg; --y: 0px; }
	.gogcollage__t--g { --r: -2.2deg; --y: 0px; }
	.gogcollage__t--h { --r:  1.8deg; --y: 0px; }
	.gogcollage__t--j { --r: -1.5deg; --y: 0px; }
	.gogcollage__t--k { --r:  2.1deg; --y: 0px; }
}

/* 悬停时暂停滚动（只在有鼠标的设备） */
@media (max-width: 860px) and (hover: hover) and (pointer: fine) {
	.gogcollage__strip:hover { animation-play-state: paused; }
}

@keyframes gogcol-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* 系统开了「减少动态效果」：停掉滚动，改成可以手指拖 */
@media (prefers-reduced-motion: reduce) {
	.gogcollage__t { transition-duration: .01ms; }
	.gogcollage__strip { animation: none !important; }
	.gogcollage__stage { overflow-x: auto; }
}


/* ==========================================================================
   gog-stats-section · 移动端改成「两行两列」（原来 840px 以下两列、480px 以下一列）
   只影响 ≤840px；桌面仍是 4 列一行。
   ========================================================================== */
@media (max-width: 840px) {
	.gog-stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 36px 22px !important;
		contain-intrinsic-size: auto 240px !important;
	}
	.gog-stats-number { font-size: clamp(38px, 9vw, 64px) !important; }
}

@media (max-width: 480px) {
	.gog-stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 30px 14px !important;
	}
	.gog-stats-number { font-size: clamp(30px, 8.4vw, 42px) !important; }
	.gog-stats-label { font-size: 14px !important; line-height: 1.25 !important; }
	.gog-stat-item { min-height: 86px; }
}


/* ==========================================================================
   GOG · OEM 产品模块「五圈同心圆轨道背景」+ 搜索框
   --------------------------------------------------------------------------
   结构（块里就这一层包裹）：
     .gog-oem-scene
        ├ h2.gog-section-title        ← 标题也在场景里，背景会一起覆盖
        ├ section.oem-pf-module       ← 短码 [oem_product_tabs] 输出
        ├ .gog-search-block           ← 搜索框
        └ .gog-orbit (JS 生成)        ← 五圈图片，垫在最底层
   · 五圈正圆，圆心都在场景正中；**越外圈半径越大、图越多、转得越慢**
   · 最里圈很小，只会在标题/标签/卡片之间的缝里露出一点
   · 每张图的倾角跟着轨道连续变化（offset-rotate:auto）
   · 旋转由 JS 的 rAF 驱动（--spin），鼠标滚轮/页面滚动/触屏滑动会加速
   · 整块 100vw 全宽、左右零留白；卡片区仍 1380 居中
   ★ 该模块样式是短码内联、作用域 #oem-pf-module-随机数（1,1,0），覆盖处都加了 !important。
   ========================================================================== */

/* ── 1. 场景：把标题 + 产品模块 + 搜索框包成一块，作为背景的画布 ───────── */
.gog-oem-scene {
	position: relative !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding: clamp(26px, 3vw, 48px) 0 clamp(8px, 1vw, 18px) !important;
	background: #fff;
	overflow: hidden !important;
	isolation: isolate;
}

/* 内容层（标题 / 模块 / 搜索框）压在背景之上 */
.gog-oem-scene > .gog-section-title,
.gog-oem-scene > .oem-pf-module,
.gog-oem-scene > .gog-search-block {
	position: relative;
	z-index: 2;
}

/* 白色柔光 + 三边渐隐：文字区更干净，图片到边框自然消失 */
.gog-oem-scene::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to right,  #fff 0, rgb(255 255 255 / 0) 90px),
		linear-gradient(to left,   #fff 0, rgb(255 255 255 / 0) 90px),
		linear-gradient(to bottom, #fff 0, rgb(255 255 255 / 0) 100px),
		linear-gradient(to top,    #fff 0, rgb(255 255 255 / 0) 100px),
		linear-gradient(180deg, rgb(255 255 255 / .86) 0, rgb(255 255 255 / .40) 14%, rgb(255 255 255 / 0) 30%);
}

/* 产品模块自身不再需要全宽/裁剪（外层场景已经做了） */
.oem-pf-module {
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-top: clamp(20px, 2.6vw, 44px) !important;
	padding-bottom: clamp(20px, 2.6vw, 44px) !important;
	overflow: visible !important;
	background: transparent !important;
}

.oem-pf-module .oem-pf-wrap {
	position: relative;
	z-index: 2;
}

/* ── 2. 五圈轨道（同心正圆，半径由 JS 按场景宽度算成 px） ─────────────── */
.gog-orbit {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	--spin: 0%;
}

.gog-orbit__ring {
	position: absolute;
	inset: 0;
	will-change: transform;
}

.gog-orbit__i {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: var(--s, 84px);
	height: var(--s, 84px);
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 10px 24px -14px rgb(2 34 91 / .30);
	opacity: .92;

	/* 倾角跟着轨道走：绕一圈 45° → 90° → 135° → 180° … 循环 */
	offset-path: ellipse(300px 300px at 50% 50%);   /* JS 会按场景尺寸覆盖成真实半径 */
	offset-rotate: auto;
	offset-distance: calc(var(--d0, 0%) + var(--spin, 0%));
	animation: gog-orbit-fade var(--fd, 11s) ease-in-out infinite;
	animation-delay: var(--dl, 0s);
}

/* 淡入淡出：比上一版实很多（最低也有 0.45） */
@keyframes gog-orbit-fade {
	0%   { opacity: .45; }
	22%  { opacity: 1; }
	50%  { opacity: .78; }
	78%  { opacity: 1; }
	100% { opacity: .45; }
}

/* 老浏览器不支持 offset-path：整层不显示，别堆在中间 */
@supports not (offset-path: ellipse(10px 10px at 50% 50%)) {
	.gog-orbit { display: none; }
}

/* ── 3. 搜索框（WooCommerce 原生：?s=&post_type=product）+ 上方两行文本 ──── */
.gog-search-block {
	width: 100%;
	padding: clamp(26px, 3.2vw, 48px) 20px clamp(10px, 1.4vw, 20px);
	background: transparent;
}

.gog-search__lead {
	margin: 0 0 6px;
	text-align: center;
	font-size: clamp(12px, 1.02vw, 14px);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8b96a8;
}

.gog-search__type {
	margin: 0 0 clamp(14px, 1.6vw, 20px);
	min-height: 1.7em;
	text-align: center;
	font-size: clamp(15px, 1.5vw, 20px);
	font-weight: 700;
	letter-spacing: -.01em;
	color: #0d3f6b;
}

.gog-search__type-in {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: bottom;
	width: 0;
	border-right: 2px solid currentColor;
	animation:
		gog-type 5.2s steps(28, end) infinite,
		gog-caret .8s step-end infinite;
}

@keyframes gog-type {
	0%, 8%    { width: 0; }
	58%, 86%  { width: 30ch; }
	96%, 100% { width: 0; }
}

@keyframes gog-caret {
	0%, 100% { border-color: currentColor; }
	50%      { border-color: transparent; }
}

.gog-search {
	width: min(760px, 100%);
	margin: 0 auto;
	box-sizing: border-box;
}
.gog-search *,
.gog-search *::before,
.gog-search *::after { box-sizing: border-box; }

.gog-search__field {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid #e5e9ef;
	border-radius: 999px;
	padding: 7px 7px 7px 18px;
	box-shadow:
		0 14px 34px -20px rgb(2 34 91 / .40),
		0 2px 6px rgb(2 34 91 / .04);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.gog-search__field:hover { border-color: #cfd8e3; }
.gog-search__field:focus-within {
	border-color: #0d3f6b;
	box-shadow: 0 18px 40px -20px rgb(2 34 91 / .5), 0 0 0 3px rgb(76 179 221 / .18);
}

.gog-search__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	color: #97a1ae;
}
.gog-search__icon svg { display: block; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

.gog-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	padding: 11px 0;
	font: 500 15px/1.4 inherit;
	color: #111;
	appearance: none;
}
.gog-search__input::placeholder { color: #9aa3ae; }
.gog-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.gog-search__btn {
	flex: none;
	border: 0;
	border-radius: 999px;
	padding: 12px 22px;
	background: #111;
	color: #fff;
	font: 600 14px/1 inherit;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.gog-search__btn:hover { background: #0d3f6b; }
.gog-search__btn:active { transform: scale(.97); }

/* ── 4. 响应式 ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.gog-oem-scene { padding-top: 20px !important; }
	.oem-pf-module { padding-top: 14px !important; padding-bottom: 14px !important; }
}

@media (max-width: 640px) {
	.gog-search { width: 100%; }
	.gog-search__field { padding: 6px 6px 6px 15px; gap: 8px; }
	.gog-search__input { font-size: 14px; padding: 10px 0; }
	.gog-search__btn { padding: 11px 16px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.gog-orbit__i { animation: none; opacity: .85; }
	.gog-search__type-in { width: auto; border-right: 0; animation: none; }
}