/* ============================================================================
   GPI — Company profile UI (.gpi-cu)
   企业详情页按 2026-11 原型重排的页面作用域样式。

   依赖 gpi-core.css 提供 .gpi-co 的既有版式（卡片 / 表格 / 锁态），
   本文件只做三件事：
     1) 把企业页残留的 teal（--gpi-teal #0e7c86）换成这一页的原型蓝橙；
     2) 新增身份区组件（logo 白框 + 认证勾 / slogan 行 / 统计芯片行）；
     3) 新增 Tab 导航与六个区块。

   ⚠️ 作用域纪律：所有选择器必须落在 .gpi-co / .gpi-cu 内，
   不要改动全站 teal，也不要影响 gd_place 之外的页面。
   ========================================================================== */

/* ---------------------------------------------------------- TOKENS ----- */
.gpi-co{
	--cu-blue: #004eba;
	--cu-blue-mid: #1159c0;
	--cu-blue-deep: #0b3f96;
	--cu-blue-link: #0b5bd3;
	--cu-orange: #fc7e0c;
	--cu-orange-hover: #e87200;
	--cu-ink: #14294d;
	--cu-ink-2: #24405f;
	--cu-body: #55677f;
	--cu-muted: #8a97a8;
	--cu-line: #e4eaf3;
	--cu-line-2: #eef2f8;
	--cu-tint: #eaf1fd;
	--cu-tint-2: #f4f8ff;
	--cu-white: #fff;
	--cu-shadow: 0 1px 2px rgba(16,42,67,.04), 0 8px 24px rgba(16,42,67,.06);
	--cu-shadow-lg: 0 2px 6px rgba(16,42,67,.06), 0 16px 40px rgba(16,42,67,.10);
	--cu-radius: 12px;
	--cu-radius-sm: 8px;
}

/* ------------------------------------------- 1. TEAL → 原型蓝橙 ------- */
/* 线上企业页只有两处 teal：claim banner 渐变与无 logo 时的字母头像。 */
.gpi-co .gpi-co-claim-banner{
	background: linear-gradient(135deg, var(--cu-blue-deep) 0%, var(--cu-blue) 100%);
}
.gpi-co .gpi-co-avatar{
	background: linear-gradient(135deg, var(--cu-blue) 0%, var(--cu-blue-deep) 100%);
}
.gpi-co .gpi-co-h2{
	color: var(--cu-ink);
	border-bottom-color: var(--cu-line);
}
.gpi-co .gpi-co-lead{ color: var(--cu-body); }
.gpi-co .gpi-co-chip{
	color: var(--cu-blue-link);
	background: var(--cu-tint);
	border-color: #d5e3fb;
}
.gpi-co .gpi-co-name{ color: var(--cu-ink); }

/* 页面内残留的 teal 文字色（gpi-core.css 的按钮与内联链接）→ 换成这一页的蓝。
   实测 4 处：.gpi-btn.gpi-btn-primary ×1、.gpi-ilink ×2、一个无 class 的 button。 */
.gpi-co .gpi-btn-primary{
	color: #fff;
	background: var(--cu-blue);
	border-color: var(--cu-blue);
}
.gpi-co .gpi-btn-primary:hover{
	background: var(--cu-blue-deep);
	border-color: var(--cu-blue-deep);
}
.gpi-co .gpi-btn-outline{
	color: var(--cu-blue);
	border-color: #c3d7f4;
}
.gpi-co .gpi-btn-outline:hover{
	background: var(--cu-tint);
	border-color: var(--cu-blue);
}
.gpi-co .gpi-ilink{
	color: var(--cu-blue-link);
	border-bottom-color: rgba(11, 91, 211, .35);
}
.gpi-co .gpi-ilink:hover{
	color: var(--cu-blue-deep);
	border-bottom-color: var(--cu-blue-deep);
}
.gpi-co .gpi-co-main button:not([class]){ color: var(--cu-blue-link); }

/* ---- 4 处「同特异度被全局规则压掉」的 teal 残留 ----
   gpi-core.css 里这 4 条的特异度与本文件上一节相同（0,2,0），而全局表在后面，
   同特异度按源序决胜 → 全站规则赢。这里把选择器提到 (0,3,0) 才压得住。
   实测（champion-pet-shop 企业页 DOM 探针）：
     ① .gpi-co-claim-banner .gpi-btn-primary  → 白底 teal 字（Claim this business）
     ② .gpi-co-progress span                  → 渐变末端 teal
     ③ .gpi-newsletter                        → 区块背景 teal 渐变
     ④ .gpi-newsletter-form button            → 白底 teal 字（Subscribe）
   作用域全部锁在 .gpi-co 内，不影响其它页面的 newsletter。 */
.gpi-co .gpi-co-claim-banner .gpi-btn-primary{
	color: var(--cu-blue);
	background: #fff;
	border-color: #fff;
}
.gpi-co .gpi-co-claim-banner .gpi-btn-primary:hover{
	color: var(--cu-blue-deep);
	background: var(--cu-tint);
}
.gpi-co .gpi-co-progress span{
	background: linear-gradient(90deg, var(--cu-blue) 0%, var(--cu-blue-mid) 100%);
}
.gpi-co .gpi-newsletter{
	background: linear-gradient(135deg, var(--cu-blue-deep) 0%, var(--cu-blue) 100%);
}
.gpi-co .gpi-newsletter-form button{
	color: var(--cu-blue);
	background: #fff;
}
.gpi-co .gpi-newsletter-form button:hover{
	color: var(--cu-blue-deep);
	background: var(--cu-tint);
}

/* ---- 企业页 badge / 采购 CTA 的 teal 残留 ----
   gpi-core.css 里 `.gpi-co-header .gpi-co-badge` 有两条同名规则，
   后一条（source order 更后）把实心 badge 刷成 teal 渐变 #0e7c86→#0b5e66；
   软 badge（-soft）也被刷成 teal 文字 #0a646d + teal 底 #eef6f6。
   采购插件 gpi-195-procurement.php 用 wp_head 内联 <style> 注入
   .gpi-proc-ask-btn 的 teal→蓝渐变（内联样式在队尾，同特异度时它赢）。
   这里把选择器提到 (0,3,0)/(0,2,0)，稳压全局规则与内联样式。 */
.gpi-co .gpi-co-header .gpi-co-badge{
	background: linear-gradient(135deg, var(--cu-blue) 0%, var(--cu-blue-deep) 100%);
	box-shadow: 0 1px 3px rgba(0, 78, 186, .22);
}
.gpi-co .gpi-co-header .gpi-co-badge:hover{
	background: linear-gradient(135deg, var(--cu-blue) 0%, var(--cu-blue-deep) 100%);
	border-color: var(--cu-blue-deep);
	box-shadow: 0 4px 12px rgba(0, 78, 186, .30);
}
.gpi-co .gpi-co-header .gpi-co-badge-soft{
	background: var(--cu-tint);
	color: var(--cu-blue-link);
	border: 1px solid #d5e3fb;
}
.gpi-co .gpi-co-header .gpi-co-badge-soft:hover{
	background: var(--cu-tint-2);
	border-color: #c3d7f4;
}
.gpi-co .gpi-co-header .gpi-co-badge:focus-visible{
	outline: 2px solid var(--cu-blue);
	outline-offset: 2px;
}
.gpi-co .gpi-proc-ask-btn{
	background: linear-gradient(135deg, var(--cu-blue) 0%, var(--cu-blue-deep) 100%);
}

/* --------------------------------------------- 2. 身份区组件 ----------- */
/* logo 白框 + 右下角认证勾 */
.gpi-co .gpi-cu-logo-wrap{
	position: relative;
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid var(--cu-line);
	box-shadow: 0 8px 24px rgba(16,42,67,.12);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}
.gpi-co .gpi-cu-logo-wrap .gpi-co-logo{
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	border: 0 !important;
	border-radius: 18px;
	background: #fff;
	box-shadow: none;
	padding: 10px;
	object-fit: contain !important;
}
.gpi-co .gpi-cu-logo-wrap .gpi-co-avatar{
	width: 100%;
	height: 100%;
	border-radius: 18px;
	border: 0;
	font-size: 40px;
}
.gpi-co .gpi-cu-logo-check{
	position: absolute;
	right: -7px;
	bottom: -7px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--cu-blue);
	border: 3px solid #fff;
	box-shadow: 0 3px 10px rgba(16,42,67,.22);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.gpi-co .gpi-cu-logo-check svg{ width: 15px; height: 15px; display: block; }

/* slogan 行 */
.gpi-co .gpi-cu-slogan{
	margin: 8px 0 0;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--cu-body);
	max-width: 720px;
}

/* 统计芯片行 */
.gpi-co .gpi-cu-stats{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}
.gpi-co .gpi-cu-stat{
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid var(--cu-line);
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--cu-shadow);
}
.gpi-co .gpi-cu-stat-k{
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--cu-muted);
}
.gpi-co .gpi-cu-stat-v{
	font-size: 13.5px;
	font-weight: 650;
	color: var(--cu-ink);
}

/* ----------------------------------------------- 3. TAB 导航 ---------- */
/* ⚠️ sticky 必须挂在 .gpi-cu-tabs-wrap 上，不能挂在 .gpi-cu-tabs（nav）上。
   sticky 的粘滞行程 = 包含块（父元素）的高度范围；.gpi-cu-tabs-wrap 与 nav
   等高（58px），行程为 0 → 无论怎么滚 nav 都不会吸顶（实测滚动 5071px 后
   nav 的视口 top 仍是 -3859.7）。挪到 wrap（含整页内容）上才真正吸顶。
   top 用 --gpi-nav-height 贴住固定页头下沿；z-index 60 低于页头的 100000，
   不会被页头压住，但盖住正文。 */
.gpi-co .gpi-cu-tabs-wrap{
	position: sticky;
	top: var(--gpi-nav-height, 64px);
	z-index: 60;
	background: #fff;
	padding-bottom: 26px;   /* 吸收原 nav 的 margin-bottom，吸住时这 26px 是不透明的 */
}
.gpi-co .gpi-cu-tabs{
	margin-bottom: 0;
	background: #fff;
	border-bottom: 1px solid var(--cu-line);
	box-shadow: 0 1px 3px rgba(16,42,67,.04);
}

/* 🩸 企业页专属：把 body 的 overflow 恢复成 visible，否则上面的 sticky 永远不动。
   成因是两条全局规则叠加：
     ① Blocksy 主题  body{overflow-x:hidden;...}
     ② gpi-homepage.css  body,html{overflow-x:hidden}
   overflow-x 非 visible 会连带把 overflow-y 算成 auto；
   而只要 **html 的 overflow 不是 visible**，body 的 overflow 就不会传播到视口，
   body 于是变成一个「自身永远不滚动」的滚动容器 ——
   position:sticky 的滚动容器被判定成 body，粘滞范围恒为 0。
   实测（企业页 DOM 探针）：滚动到 scrollY=2500 后，nav 视口 top = -1205.7，
   连注入的最小 sticky 测试元素也一样不吸顶；
   本地最小页对照：html/body 都 overflow-x:hidden 时 sticky top=-1436，
   去掉后 sticky top=64 → 确认是 overflow 造成的，不是 CSS 写错。
   作用域限企业页（body.gpi-co-diffs 由 gpi-company-banner.php 打上），
   横向溢出仍由 html 的 overflow-x:hidden 裁掉，不会多出横向滚动条。 */
body.gpi-co-diffs{ overflow: visible; }
.gpi-co .gpi-cu-tabs ul{
	list-style: none;
	margin: 0 auto;
	padding: 0 20px;
	max-width: 1256px;
	display: flex;
	align-items: stretch;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
.gpi-co .gpi-cu-tabs ul::-webkit-scrollbar{ display: none; }
.gpi-co .gpi-cu-tabs li{ display: flex; }
.gpi-co .gpi-cu-tabs a,
.gpi-co .gpi-cu-tabs span{
	display: inline-flex;
	align-items: center;
	padding: 15px 18px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--cu-body);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.gpi-co .gpi-cu-tabs a:hover{ color: var(--cu-blue); }
.gpi-co .gpi-cu-tabs a.is-active{
	color: var(--cu-blue);
	border-bottom-color: var(--cu-orange);
}
.gpi-co .gpi-cu-tabs span.is-empty{
	color: #b8c1cc;
	cursor: not-allowed;
}

/* ------------------------------------------------ 4. 区块通用 ----------- */
.gpi-co .gpi-cu-block{
	background: #fff;
	border: 1px solid var(--cu-line);
	border-radius: 16px;
	padding: 24px 26px;
	margin-bottom: 24px;
	box-shadow: var(--cu-shadow);
	/* 锚点落点要让开「固定页头(64) + 吸顶 Tab 条(58)」，再留 12px 呼吸。
	   原 80px 只够避开页头，会正好顶到 Tab 条下面。 */
	scroll-margin-top: calc(var(--gpi-nav-height, 64px) + 70px);
}
/* 锚点目标不止 .gpi-cu-block：Overview 落在 .gpi-co-main、Related 落在
   .gpi-co-related、Contact 落在侧栏的 #gpi-contact-card —— 都要让开吸顶 Tab 条。 */
.gpi-co .gpi-co-main,
.gpi-co .gpi-co-related,
.gpi-co #gpi-contact-card{
	scroll-margin-top: calc(var(--gpi-nav-height, 64px) + 70px);
}

.gpi-co .gpi-cu-block-h{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--cu-line-2);
}
.gpi-co .gpi-cu-block-h h3{
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	color: var(--cu-ink);
}
.gpi-co .gpi-cu-block-h .gpi-cu-block-note{
	font-size: 13px;
	color: var(--cu-muted);
}
.gpi-co .gpi-cu-block-lead{
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--cu-body);
}

/* ------------------------------------------------ 5. 产品 ---------------- */
.gpi-co .gpi-cu-products-grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.gpi-co .gpi-cu-product{
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 12px 14px;
	border: 1px solid var(--cu-line);
	border-radius: var(--cu-radius-sm);
	background: #fff;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gpi-co .gpi-cu-product:hover{
	border-color: var(--cu-blue);
	box-shadow: var(--cu-shadow-lg);
	transform: translateY(-2px);
}
.gpi-co .gpi-cu-product-media{
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--cu-tint);
}
.gpi-co .gpi-cu-product-media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gpi-co .gpi-cu-product-body{
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.gpi-co .gpi-cu-product-title{
	font-size: 14px;
	font-weight: 650;
	color: var(--cu-ink);
	line-height: 1.35;
}
.gpi-co .gpi-cu-product-meta{
	font-size: 12.5px;
	color: var(--cu-orange);
	font-weight: 600;
}
.gpi-co .gpi-cu-product-chips{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.gpi-co .gpi-cu-pchip{
	display: inline-block;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--cu-tint);
	border: 1px solid #d5e3fb;
	color: var(--cu-blue-link);
	font-size: 13px;
	font-weight: 600;
}

/* ------------------------------------------------ 6. 相关文章 ------------ */
.gpi-co .gpi-cu-news-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.gpi-co .gpi-cu-news{
	display: flex;
	gap: 13px;
	padding: 13px;
	border: 1px solid var(--cu-line);
	border-radius: var(--cu-radius-sm);
	background: #fff;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gpi-co .gpi-cu-news:hover{
	border-color: var(--cu-blue);
	box-shadow: var(--cu-shadow-lg);
	transform: translateY(-2px);
}
.gpi-co .gpi-cu-news-media{
	flex: 0 0 auto;
	width: 92px;
	height: 68px;
	border-radius: 7px;
	overflow: hidden;
	background: var(--cu-tint);
}
.gpi-co .gpi-cu-news-media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gpi-co .gpi-cu-news-body{
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}
.gpi-co .gpi-cu-news-cat{
	align-self: flex-start;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--cu-tint);
	color: var(--cu-blue-link);
	font-size: 11px;
	font-weight: 700;
}
.gpi-co .gpi-cu-news-title{
	font-size: 14px;
	font-weight: 650;
	color: var(--cu-ink);
	line-height: 1.4;
}
.gpi-co .gpi-cu-news-date{
	font-size: 12px;
	color: var(--cu-muted);
}

/* ------------------------------------------------ 7. 相关企业 ------------ */
.gpi-co .gpi-cu-related-grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
.gpi-co .gpi-cu-related{
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 13px;
	border: 1px solid var(--cu-line);
	border-radius: var(--cu-radius-sm);
	background: #fff;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gpi-co .gpi-cu-related:hover{
	border-color: var(--cu-blue);
	box-shadow: var(--cu-shadow-lg);
	transform: translateY(-2px);
}
.gpi-co .gpi-cu-related-media{
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 9px;
	overflow: hidden;
	background: var(--cu-tint);
	display: flex;
	align-items: center;
	justify-content: center;
}
.gpi-co .gpi-cu-related-media img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
	display: block;
}
.gpi-co .gpi-cu-related-media.is-letter{
	color: #fff;
	font-weight: 800;
	font-size: 18px;
	background: linear-gradient(135deg, var(--cu-blue) 0%, var(--cu-blue-deep) 100%);
}
.gpi-co .gpi-cu-related-name{
	font-size: 13.5px;
	font-weight: 600;
	color: var(--cu-ink);
	line-height: 1.35;
}

/* ------------------------------------------------ 8. 展会 ---------------- */
.gpi-co .gpi-cu-shows-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.gpi-co .gpi-cu-show{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--cu-line);
	border-left: 4px solid var(--cu-orange);
	border-radius: var(--cu-radius-sm);
	background: #fff;
	text-decoration: none;
	transition: box-shadow .15s ease, transform .15s ease;
}
.gpi-co .gpi-cu-show:hover{
	box-shadow: var(--cu-shadow-lg);
	transform: translateY(-2px);
}
.gpi-co .gpi-cu-show-date{
	flex: 0 0 auto;
	min-width: 62px;
	padding: 7px 8px;
	border-radius: 7px;
	background: var(--cu-tint);
	color: var(--cu-blue-link);
	font-size: 12.5px;
	font-weight: 700;
	text-align: center;
}
.gpi-co .gpi-cu-show-body{
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.gpi-co .gpi-cu-show-title{
	font-size: 14.5px;
	font-weight: 650;
	color: var(--cu-ink);
	line-height: 1.35;
}
.gpi-co .gpi-cu-show-loc{
	font-size: 12.5px;
	color: var(--cu-muted);
}

/* ------------------------------------------------ 9. 地图 ----------------- */
.gpi-co .gpi-cu-presence{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}
.gpi-co .gpi-cu-map{
	position: relative;
	width: 768px;
	height: 512px;
	max-width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: #e8eef6;
	border: 1px solid var(--cu-line);
}
.gpi-co .gpi-cu-map-tile{
	position: absolute;
	display: block;
}
.gpi-co .gpi-cu-map-pin{
	position: absolute;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: var(--cu-orange);
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.gpi-co .gpi-cu-presence-info h3{
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 800;
	color: var(--cu-ink);
}
.gpi-co .gpi-cu-presence-loc{
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--cu-blue);
}
.gpi-co .gpi-cu-presence-addr{
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--cu-body);
}
.gpi-co .gpi-cu-presence-coord{
	margin: 0 0 12px;
	font-size: 12.5px;
	color: var(--cu-muted);
	font-variant-numeric: tabular-nums;
}
.gpi-co .gpi-cu-presence-credit{
	margin: 0;
	font-size: 11.5px;
	color: #a9b4c1;
}

/* ------------------------------------------------ 10. Sponsored ---------- */
.gpi-co .gpi-cu-sponsored{
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	padding: 30px 32px;
	margin-bottom: 24px;
	background: linear-gradient(135deg, var(--cu-blue-deep) 0%, var(--cu-blue) 62%, var(--cu-blue-mid) 100%);
	color: #fff;
	box-shadow: var(--cu-shadow);
}
.gpi-co .gpi-cu-sponsored-tag{
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba(255,255,255,.18);
	border: 1px solid rgba(255,255,255,.32);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
}
.gpi-co .gpi-cu-sponsored h3{
	margin: 14px 0 8px;
	font-size: 26px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -.3px;
	position: relative;
	z-index: 1;
}
.gpi-co .gpi-cu-sponsored p{
	margin: 0 0 18px;
	font-size: 15px;
	color: rgba(255,255,255,.86);
	position: relative;
	z-index: 1;
	max-width: 480px;
}
.gpi-co .gpi-cu-sponsored-btn{
	display: inline-block;
	padding: 11px 20px;
	border-radius: 8px;
	background: var(--cu-orange);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	position: relative;
	z-index: 1;
	transition: background .15s ease;
}
.gpi-co .gpi-cu-sponsored-btn:hover{ background: var(--cu-orange-hover); }
.gpi-co .gpi-cu-sponsored-photo{
	position: absolute;
	inset: 0 0 0 52%;
	z-index: 0;
	background-size: cover;
	background-position: center;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.45) 16%, #000 34%);
	mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.45) 16%, #000 34%);
}

/* ------------------------------------------------ 11. 响应式 ------------- */
@media (max-width: 1100px){
	.gpi-co .gpi-cu-products-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gpi-co .gpi-cu-related-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gpi-co .gpi-cu-news-grid{ grid-template-columns: minmax(0, 1fr); }
	.gpi-co .gpi-cu-presence{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px){
	.gpi-co .gpi-cu-products-grid,
	.gpi-co .gpi-cu-related-grid,
	.gpi-co .gpi-cu-shows-grid{ grid-template-columns: minmax(0, 1fr); }
	.gpi-co .gpi-cu-sponsored h3{ font-size: 21px; }
}