/*
Theme Name: Gisentan
Description: 杰思坦（深圳）技术有限公司 子主题（基于 Blocksy）
Author: Gisentan
Template: blocksy
Version: 1.0.0
Requires PHP: 7.4
Text Domain: gisentan
*/

:root {
	--gst-gold: #c39b5c;
	--gst-gold-dark: #a47e40;
	--gst-gold-soft: #f4ecdf;
	--gst-ink: #1b2129;
	--gst-navy: #18202b;
	--gst-text: #4a4a4a;
	--gst-muted: #8c8c8c;
	--gst-line: #e8e6e1;
	--gst-soft: #f7f6f3;
	/* Content width = Customizer → General → Layout → Maximum Site Width (Blocksy). */
	--gst-wrap: var(--theme-normal-container-max-width, 1200px);
	--gst-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--gst-placeholder:
		radial-gradient(circle at 18% 28%, rgba(195, 155, 92, .22), transparent 42%),
		radial-gradient(circle at 82% 72%, rgba(195, 155, 92, .14), transparent 38%),
		linear-gradient(135deg, #131922 0%, #232e3d 55%, #18202b 100%);
}

body {
	font-family: var(--gst-font);
	color: var(--gst-text);
	--theme-font-family: var(--gst-font);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gst-font);
}

a {
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.gst-ico {
	flex: none;
	vertical-align: middle;
}

/* Elements that only make sense in one language (TranslatePress sets <html lang>). */
html[lang^="en"] .gst-cn-only,
html[lang^="zh"] .gst-en-only,
html[lang^="en"] .gst-banner__en,
html[lang^="en"] .gst-app__en,
html[lang^="en"] .gst-counter i,
html[lang^="en"] .gst-brand span,
html[lang^="en"] .gst-side__list small,
html[lang^="en"] .gst-listhead h1 small {
	display: none !important;
}

/* ---------- Buttons ---------- */

.gst-btn,
.gst-sec .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 30px;
	border: 1px solid var(--gst-gold);
	border-radius: 30px;
	background: var(--gst-gold);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
}

.gst-btn:hover,
.gst-sec .wp-block-button__link:hover {
	background: var(--gst-gold-dark);
	border-color: var(--gst-gold-dark);
	color: #fff;
}

.gst-btn--ghost,
.gst-sec .wp-block-button__link {
	background: transparent;
	border-color: #c9c5bd;
	color: #555;
}

.gst-btn--ghost:hover {
	background: var(--gst-gold);
	border-color: var(--gst-gold);
	color: #fff;
}

/* ---------- Header ---------- */

/*
 * inline-flex so the logo + tagline follow the element's Content Alignment
 * (Customizer → Header → HTML element → General; Blocksy sets text-align from it).
 * Visible when the element has room, e.g. with "Stretch Container" switched on.
 */
.gst-brandmark {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	vertical-align: middle;
}

.gst-logo {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	color: var(--gst-gold);
	text-decoration: none;
	white-space: nowrap;
}

.gst-logo__en {
	font-size: 30px;
	font-weight: 600;
	letter-spacing: .06em;
	background: linear-gradient(180deg, #d9b878, #a87f3c);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.gst-logo__cn {
	font-size: 26px;
	font-weight: 700;
	color: var(--gst-gold);
}

.gst-logo:hover {
	color: var(--gst-gold-dark);
}

.gst-logo--img {
	display: block;
	line-height: 0;
}

/*
 * Tablet = under 1200px. Blocksy switches its header at 1000px, so between 1000 and 1199px show the
 * tablet header and menu panel here; inc/breakpoints.php moves Blocksy's own tablet CSS and script.
 */
@media (min-width: 1000px) and (max-width: 1199.98px) {
	/* Same selectors as Blocksy's own rules (#header / #offcanvas), so these win by coming later. */
	#header [data-device="desktop"],
	#offcanvas .ct-panel-content[data-device="desktop"] {
		display: none;
	}

	#header [data-device="mobile"] {
		display: block;
	}

	#offcanvas .ct-panel-content[data-device="mobile"] {
		display: flex;
	}

	/* Transparent header overlays the banner (Blocksy only does this for its tablet header below 1000px). */
	#header [data-device="mobile"][data-transparent] {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
}

/* Logo heights: Customizer → 杰思坦 · 站点信息 (printed as --gst-logo-h* by inc/settings.php). */
.gst-logo__img {
	display: block;
	width: auto;
	height: var(--gst-logo-h, 66px);
	max-width: none;
}

[data-sticky*="yes"] .gst-logo__img {
	height: var(--gst-logo-h-sticky, 54px);
}

/* Phone / tablet header (below 1200px, see the tablet block below), sticky or not. */
@media (max-width: 1199.98px) {
	.gst-logo__img,
	[data-sticky*="yes"] .gst-logo__img {
		height: var(--gst-logo-h-mobile, 46px);
	}
}

/*
 * Light logo (Customizer → 杰思坦 · 站点信息 → 透明页头 Logo) while the header is transparent
 * over a dark banner; the normal logo again once the header turns sticky (white).
 */
.gst-logo__img--light {
	display: none;
}

.ct-header [data-transparent-row="yes"] .gst-logo--has-light .gst-logo__img--default {
	display: none;
}

.ct-header [data-transparent-row="yes"] .gst-logo--has-light .gst-logo__img--light {
	display: block;
}

.ct-header [data-sticky*="yes"] .gst-logo--has-light .gst-logo__img--default {
	display: block;
}

.ct-header [data-sticky*="yes"] .gst-logo--has-light .gst-logo__img--light {
	display: none;
}

/*
 * Tagline = the logo HTML element in the Customizer (Header → that element → Design):
 *   Font → size / weight / line height (inherited), Font Color → Text Initial → colour
 *   (Default / Transparent / Sticky). The divider uses the same colour, lighter.
 * Always exactly two lines (split at "|" in the Customizer text, otherwise in the middle).
 */
.gst-logo__tag {
	flex: none;
	padding-left: 18px;
	border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	color: var(--theme-text-color);
}

.gst-logo__tag > span {
	display: block;
	white-space: nowrap;
}

/* Hidden by assets/site.js when the header has no room for it. */
.gst-logo__tag[hidden] {
	display: none;
}

/*
 * Header row background. Blocksy writes no row colour for this header, so content
 * scrolled under the sticky header showed through. Fallback only: Blocksy's own rules
 * ([data-header] .ct-header …) are more specific and win if the Customizer outputs one.
 */
.ct-header [data-row*="middle"] {
	background-color: var(--theme-palette-color-8, #fff);
}

.ct-header [data-sticky*="yes"] [data-row*="middle"] {
	background-color: var(--theme-palette-color-8, #fff);
	box-shadow: 0 6px 20px rgba(27, 33, 41, .08);
}

.gst-headtools {
	display: flex;
	align-items: center;
	white-space: nowrap;
}

/* Blocksy turns on smooth scrolling for the whole page; respect the visitor's reduced-motion setting. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* English labels are longer than the Chinese ones. */
html[lang^="en"] .gst-logo__tag {
	display: none;
}

html[lang^="en"] .ct-header [data-id="menu"] {
	--menu-items-spacing: 15px;
}

/*
 * Desktop header that would overlap (long English menu, narrow window): assets/site.js → fitHeader() adds these
 * classes one at a time until the menu clears the logo and the right-hand group — edge margins off, half the menu
 * spacing, 85% menu font, and only then the phone number text is hidden. Wide screens keep the Customizer values.
 */
#header.gst-hd-edge [data-id="gstlog"],
#header.gst-hd-edge [data-id="gsttoo"] {
	--margin: 0px !important;
}

#header.gst-hd-tight [data-id="menu"] {
	--menu-items-spacing: var(--gst-menu-sp, 12px);
}

#header.gst-hd-tighter [data-id="menu"] > ul > li > a {
	--theme-font-size: var(--gst-menu-fs, 15px);
}

#header.gst-hd-nonum .gst-headphone span {
	display: none;
}

/*
 * Phone / language colours come from the header HTML element in the Customizer
 * (Header → HTML element → Design → Font Color, per Default / Transparent / Sticky state):
 *   Text Initial → icons and divider, Link Initial → number and "EN", Link Hover → hover.
 * Font size / weight come from the same element's Design → Font (inherited; icons scale in em).
 * Zero-specificity fallbacks, used only while a picker is left on its default.
 */
:where(.ct-header-text:has(.gst-headtools)) {
	--theme-link-initial-color: var(--theme-text-color);
	--theme-link-hover-color: var(--gst-gold);
}

.gst-headphone,
.gst-lang {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	color: var(--theme-link-initial-color);
	text-decoration: none;
	white-space: nowrap;
}

.gst-headphone {
	margin-right: 1.1em;
}

.gst-headphone .gst-ico,
.gst-lang .gst-ico {
	width: 1.25em;
	height: 1.25em;
	color: var(--theme-text-color);
}

.gst-headphone:hover,
.gst-lang:hover,
.gst-headphone:hover .gst-ico,
.gst-lang:hover .gst-ico {
	color: var(--theme-link-hover-color);
}

.gst-lang {
	padding-left: 16px;
	border-left: 1px solid color-mix(in srgb, var(--theme-text-color) 45%, transparent);
}

/* Menu font, size and case come from Customizer → Header → Menu → Design. */
.ct-header [data-id="menu"] > ul > li > a {
	--menu-indicator-hover-color: var(--gst-gold) !important;
	--menu-indicator-active-color: var(--gst-gold) !important;
}

.ct-header [data-id="menu"] > ul > li.current-menu-item > a,
.ct-header [data-id="menu"] > ul > li.current-menu-ancestor > a,
.ct-header [data-id="menu"] > ul > li.current-menu-parent > a {
	color: var(--gst-gold);
}

/* 产品中心 dropdown: Blocksy Mega Menu — 外观 → 菜单 → 产品中心 → Mega Menu (columns, width, spacing). */
/* Brand cards inside that mega menu (same look as the 产品中心 brand grid); columns / width stay Blocksy's. */
.ct-header nav > ul > .gst-mega-brands[class*="ct-mega-menu"] > .sub-menu {
	gap: 12px;
	padding: 20px;
}

.ct-header nav > ul > .gst-mega-brands[class*="ct-mega-menu"] > .sub-menu > li {
	--columns-padding: 0;
	padding: 0;
	border: 0;
}

.ct-header nav > ul > .gst-mega-brands[class*="ct-mega-menu"] > .sub-menu > li > .ct-menu-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 76px;
	padding: 12px 10px;
	border: 1px solid var(--gst-line);
	background: #fff;
	text-align: center;
	text-transform: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.ct-header nav > ul > .gst-mega-brands[class*="ct-mega-menu"] > .sub-menu > li > .ct-menu-link:hover,
.ct-header nav > ul > .gst-mega-brands[class*="ct-mega-menu"] > .sub-menu > li.current-menu-item > .ct-menu-link {
	border-color: var(--gst-gold);
	box-shadow: 0 6px 18px rgba(195, 155, 92, .15);
}

.ct-header [data-id="menu"] .gst-mega-brands .gst-menu-en {
	font-size: 15px;
	font-weight: 700;
	color: var(--gst-ink);
}

.ct-header [data-id="menu"] .gst-mega-brands .gst-menu-cn {
	font-size: 13px;
	font-weight: 400;
	color: var(--gst-muted);
}

/*
 * Mobile menu (#offcanvas): brands two per row while 产品中心 is open.
 * Text colour follows Customizer → Header → Mobile Menu (light on the dark panel).
 */
#offcanvas .gst-mega-brands.dropdown-active > .sub-menu {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	padding: 6px 0 14px;
}

#offcanvas .gst-mega-brands > .sub-menu > li {
	margin: 0;
	padding: 0;
	border: 0;
}

#offcanvas .gst-mega-brands > .sub-menu > li::before,
#offcanvas .gst-mega-brands > .sub-menu > li > .ct-menu-link::before {
	display: none;
}

#offcanvas .gst-mega-brands > .sub-menu > li > .ct-menu-link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	min-height: 52px;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 4px;
	text-transform: none;
	transition: border-color .2s ease;
}

#offcanvas .gst-mega-brands > .sub-menu > li > .ct-menu-link:hover,
#offcanvas .gst-mega-brands > .sub-menu > li.current-menu-item > .ct-menu-link {
	border-color: var(--gst-gold);
}

#offcanvas .gst-menu-en {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

#offcanvas .gst-menu-cn {
	font-size: 12px;
	line-height: 1.3;
	opacity: .75;
}

html[lang^="en"] .gst-menu-cn {
	display: none;
}


/* ---------- Inner page banner + breadcrumb bar ---------- */

.gst-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 60px 20px;
	text-align: center;
	background: var(--gst-navy) center / cover no-repeat;
}

.gst-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 15, 20, .55), rgba(12, 15, 20, .35));
}

.gst-banner.is-placeholder {
	background-image: var(--gst-placeholder);
}

.gst-banner.is-placeholder::before {
	background:
		linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 40px 40px;
}

.gst-banner__inner {
	position: relative;
}

.gst-banner__title {
	font-size: 42px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .12em;
	color: var(--gst-gold);
}

.gst-banner__en {
	margin-top: 10px;
	font-size: 14px;
	letter-spacing: .35em;
	color: rgba(255, 255, 255, .75);
}

.gst-banner__line {
	display: block;
	width: 50px;
	height: 3px;
	margin: 18px auto 0;
	background: var(--gst-gold);
}

.gst-crumbbar {
	background: #fff;
	border-bottom: 1px solid var(--gst-line);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .03);
}

.gst-crumbbar__in {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	gap: 0 24px;
	max-width: var(--gst-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

.gst-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 16px 0;
	font-size: 14px;
	color: var(--gst-muted);
}

.gst-crumbs .gst-ico {
	width: 16px;
	height: 16px;
	color: var(--gst-gold);
}

.gst-crumbs a {
	color: var(--gst-muted);
	text-decoration: none;
}

.gst-crumbs a:hover {
	color: var(--gst-gold);
}

.gst-crumbs i {
	font-style: normal;
	color: #c7c2b8;
}

.gst-subnav {
	display: flex;
	flex-wrap: wrap;
}

.gst-subnav a {
	display: flex;
	align-items: center;
	padding: 0 26px;
	min-height: 54px;
	font-size: 15px;
	color: #555;
	text-decoration: none;
}

.gst-subnav a:hover,
.gst-subnav a.is-active {
	background: var(--gst-gold);
	color: #fff;
}

/* ---------- Page heading inside content ---------- */

.gst-page-head {
	position: relative;
	padding: 20px 0 36px;
	text-align: center;
}

.gst-page-head__mark {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	overflow: hidden;
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .04em;
	color: rgba(27, 33, 41, .045);
	white-space: nowrap;
	pointer-events: none;
}

.gst-page-head h1 {
	position: relative;
	margin: 0;
	padding-top: 14px;
	font-size: 30px;
	color: var(--gst-ink);
}

.gst-page-head h1::after,
.gst-sec > .wp-block-heading:first-child::after,
.gst-listhead--center h1::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin: 14px auto 0;
	background: var(--gst-gold);
}

.entry-content > p {
	line-height: 2;
}

/* ---------- Placeholders ---------- */

.gst-noimg,
.gst-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 120px;
	background: repeating-linear-gradient(45deg, #efede8 0 12px, #f6f5f1 12px 24px);
	color: #c4beb2;
}

.gst-noimg .gst-ico {
	width: 42px;
	height: 42px;
}

.gst-ph {
	aspect-ratio: 4 / 3;
	margin: 0;
}

.gst-ph p {
	margin: 0;
	font-size: 14px;
	color: #b3ad9f;
}

.gst-empty {
	padding: 50px 0;
	text-align: center;
	color: var(--gst-muted);
}

.gst-empty p {
	margin: 0 0 20px;
}

/* ---------- Homepage ---------- */

.gst-home > .wp-block-group {
	margin: 0;
}

.gst-sec {
	padding: 80px 20px;
}

.gst-sec > * {
	max-width: var(--gst-wrap);
	margin-left: auto !important;
	margin-right: auto !important;
}

.gst-sec > .wp-block-heading:first-child {
	margin-bottom: 40px;
	text-align: center;
	font-size: 32px;
	color: var(--gst-ink);
}

.gst-sec .wp-block-buttons {
	justify-content: center;
	margin-top: 36px;
}

/* Hero slider: a group of .gst-slide groups (background image set per slide). */
.gst-slider {
	position: relative;
	overflow: hidden;
	height: min(80vh, 720px);
	min-height: 440px;
	padding: 0 !important;
	background: var(--gst-navy);
}

.gst-slider > .gst-slide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: none;
	margin: 0 !important;
	padding: 0 24px;
	text-align: center;
	background-color: var(--gst-navy);
	background-position: center;
	background-size: cover;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease;
}

.gst-slider > .gst-slide:not([style*="background-image"]) {
	background-image: var(--gst-placeholder);
}

.gst-slider > .gst-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10, 13, 18, .35);
}

.gst-slider > .gst-slide > * {
	position: relative;
	max-width: 960px;
}

.gst-slider:not(.is-ready) > .gst-slide:first-child,
.gst-slider > .gst-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.gst-slide h2 {
	margin: 0 0 22px;
	font-size: clamp(30px, 4.6vw, 58px);
	font-weight: 800;
	letter-spacing: .16em;
	color: var(--gst-gold);
	text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.gst-slide p {
	margin: 0;
	font-size: clamp(16px, 1.7vw, 22px);
	line-height: 1.8;
	letter-spacing: .05em;
	color: #fff;
}

/* Banner controls (built by assets/site.js): dots on the left, scroll hint in the middle, arrows on the right. */
.gst-slider__controls {
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: 26px;
	z-index: 3;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	pointer-events: none;
}

.gst-slider__controls > * {
	pointer-events: auto;
}

/* Fixed columns, so the arrows stay right even when the scroll hint is hidden (phones). */
.gst-slider__dots {
	grid-column: 1;
}

.gst-slider__scroll {
	grid-column: 2;
}

.gst-slider__arrows {
	grid-column: 3;
}

.gst-slider__controls button {
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	cursor: pointer;
}

.gst-slider__controls button:focus-visible,
.gst-slide--banner a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Dots: outlined circles; the active one draws a ring over the slide's display time. */
.gst-slider__dots {
	justify-self: start;
	display: flex;
	align-items: center;
	gap: 6px;
}

.gst-slider__dot {
	position: relative;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

.gst-slider__dot::before {
	content: "";
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border: 1.5px solid rgba(255, 255, 255, .7);
	border-radius: 50%;
	transition: border-color .2s ease;
}

.gst-slider__dot:hover::before {
	border-color: #fff;
}

.gst-slider__dot.is-active::before {
	border-color: rgba(255, 255, 255, .35);
}

.gst-slider__ring {
	position: absolute;
	width: 22px;
	height: 22px;
	opacity: 0;
	transform: rotate(-90deg);
}

.gst-slider__ring circle {
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 59.7;
	stroke-dashoffset: 59.7;
}

.gst-slider__dot.is-active .gst-slider__ring {
	opacity: 1;
}

.gst-slider__dot.is-active .gst-slider__ring circle {
	animation: gst-slider-ring var(--gst-slide-time, 5.5s) linear forwards;
}

.gst-slider.is-paused .gst-slider__dot.is-active .gst-slider__ring circle {
	animation-play-state: paused;
}

@keyframes gst-slider-ring {
	to {
		stroke-dashoffset: 0;
	}
}

/* Scroll hint: mouse icon + label, jumps to the next section. */
.gst-slider__scroll {
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	letter-spacing: .12em;
}

.gst-slider__controls .gst-slider__scroll {
	color: rgba(255, 255, 255, .92);
}

.gst-slider__controls .gst-slider__scroll:hover {
	color: var(--gst-gold);
}

.gst-slider__scroll svg {
	width: 22px;
	height: 32px;
}

.gst-slider__wheel {
	animation: gst-slider-wheel 1.6s ease-in-out infinite;
}

@keyframes gst-slider-wheel {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	70% {
		opacity: 0;
		transform: translateY(6px);
	}
	100% {
		opacity: 0;
	}
}

/* Arrows: round translucent buttons. */
.gst-slider__arrows {
	justify-self: end;
	display: flex;
	gap: 16px;
}

.gst-slider__controls .gst-slider__arrows button {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background-color .2s ease;
}

.gst-slider__controls .gst-slider__arrows button:hover {
	background: var(--gst-gold);
}

.gst-slider__arrows svg {
	width: 20px;
	height: 20px;
}

@media (max-width: 689px) {
	.gst-slider__controls {
		left: 12px;
		right: 12px;
		bottom: 8px;
	}

	.gst-slider__scroll {
		display: none;
	}

	.gst-slider__controls .gst-slider__arrows button {
		width: 36px;
		height: 36px;
	}

	.gst-slider__arrows svg {
		width: 18px;
		height: 18px;
	}

	.gst-slider__arrows {
		gap: 10px;
	}
}

/* Preserve the complete 1920 × 960 artwork, including its embedded headlines. */
.gst-slider--banners {
	height: auto;
	min-height: 0;
	aspect-ratio: 2 / 1;
}

.gst-slider > .gst-slide--banner {
	padding: 0;
	background-image: none !important;
}

.gst-slider > .gst-slide--banner::before {
	display: none;
}

.gst-slider > .gst-slide--banner > .wp-block-image {
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
}

.gst-slide--banner a,
.gst-slide--banner img {
	display: block;
	width: 100%;
	height: 100%;
}

.gst-slide--banner img {
	object-fit: contain;
}

@media (max-width: 689px) {
	/* Phones: banner keeps its 2:1 shape and the controls sit transparently on the image. */
	.gst-slider--banners .gst-slider__controls {
		bottom: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gst-slider > .gst-slide {
		transition: none;
	}

	.gst-slider__dot.is-active .gst-slider__ring circle {
		animation: none;
		stroke-dashoffset: 0;
	}

	.gst-slider__wheel {
		animation: none;
	}
}

/* About + counters */
/*
 * 关于我们: mild high-tech background, pure CSS — soft gradient with corner glows, a fine grid with gold
 * nodes and circuit traces (faded out behind the text). No animation.
 */
.gst-about {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	text-align: center;
	background:
		radial-gradient(ellipse 45% 55% at 8% 15%, rgba(195, 155, 92, .12), transparent 70%),
		radial-gradient(ellipse 40% 50% at 92% 85%, rgba(40, 110, 180, .08), transparent 70%),
		linear-gradient(180deg, #fdfcfa 0%, #f5f3ee 100%);
}

.gst-about::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='rgba(195,155,92,.42)' stroke-width='1'><path d='M0 60h70l20 20h60'/><circle cx='153' cy='80' r='3'/><path d='M240 160h-60l-20-20h-50v57'/><circle cx='110' cy='200' r='3'/><path d='M40 240v-40l20-20h27'/><circle cx='90' cy='180' r='2.5'/><path d='M200 0v37'/><circle cx='200' cy='40' r='2.5'/><path d='M203 40l17 20h20'/><rect x='168' y='93' width='22' height='15' rx='2'/><path d='M173 93v-5M179 93v-5M185 93v-5M173 108v5M179 108v5M185 108v5'/></svg>"),
		radial-gradient(circle, rgba(195, 155, 92, .45) 1.2px, transparent 1.8px),
		linear-gradient(rgba(27, 33, 41, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(27, 33, 41, .05) 1px, transparent 1px);
	background-size: 240px 240px, 48px 48px, 48px 48px, 48px 48px;
	background-position: 0 0, -24px -24px, 0 0, 0 0;
	-webkit-mask-image: radial-gradient(ellipse 55% 65% at 50% 50%, transparent 35%, #000 85%);
	mask-image: radial-gradient(ellipse 55% 65% at 50% 50%, transparent 35%, #000 85%);
}

/* Phones: text fills the section, so keep the pattern to the edges and a little softer. */
@media (max-width: 689.98px) {
	.gst-about::before {
		opacity: .7;
		-webkit-mask-image: linear-gradient(90deg, #000 0, transparent 22%, transparent 78%, #000 100%);
		mask-image: linear-gradient(90deg, #000 0, transparent 22%, transparent 78%, #000 100%);
	}
}

.gst-about > p {
	max-width: 1060px;
	font-size: 18px;
	line-height: 2.1;
	color: #555;
}

.gst-counters {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 960px;
	margin: 46px auto 0;
}

.gst-counter {
	padding: 6px 10px;
	border-right: 1px solid var(--gst-line);
}

.gst-counter:last-child {
	border-right: 0;
}

.gst-counter b {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 46px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--gst-ink);
}

.gst-counter i {
	margin-left: 4px;
	font-style: normal;
	font-size: 16px;
	color: var(--gst-muted);
}

.gst-counter span {
	display: block;
	margin-top: 6px;
	font-size: 17px;
	color: #666;
}

/* Phones: About text a step smaller so the lines don't get too short. */
@media (max-width: 689.98px) {
	.gst-about > p {
		font-size: 17px;
	}
}

/* Section entry cards */
.gst-entries-sec {
	background-color: var(--gst-navy);
	background-image: var(--gst-placeholder);
	background-size: cover;
	background-position: center;
}

/* Full-width 2 × 2 grid (one column on phones, see the 768px block). */
.gst-entries-sec {
	padding-left: 24px;
	padding-right: 24px;
}

.gst-entries-sec > .gst-entries {
	max-width: none;
}

.gst-entries {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.gst-entry {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 360px;
	margin: 0 !important;
	padding: 40px 30px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 10px;
	text-align: center;
	background: rgba(255, 255, 255, .04) center / cover no-repeat;
	transition: transform .3s ease, border-color .3s ease;
}

.gst-entry[style*="background-image"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10, 13, 18, .5);
}

.gst-entry > * {
	position: relative;
}

.gst-entry > .gst-entry__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: .85;
	pointer-events: none;
}

.gst-entry__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gst-entry:hover {
	transform: translateY(-4px);
	border-color: rgba(195, 155, 92, .6);
}

.gst-entry h3 {
	margin: 0 0 12px;
	font-size: 26px;
	color: #fff;
}

.gst-entry h3::after {
	content: "";
	display: block;
	width: 30px;
	height: 2px;
	margin: 12px auto 0;
	background: var(--gst-gold);
}

.gst-entry p {
	margin: 0;
	color: rgba(255, 255, 255, .8);
}

.gst-entry .wp-block-buttons {
	margin-top: 24px;
}

.gst-entry .wp-block-button__link {
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
}

/* Application areas */
.gst-apps-sec {
	padding-left: 24px;
	padding-right: 24px;
	background: var(--gst-soft);
}

/* Full width; columns stay as set below (4, then 2 under 1000px). */
.gst-apps-sec > .gst-apps {
	max-width: none;
}

.gst-apps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.gst-app {
	margin: 0 !important;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .05);
	transition: transform .3s ease, box-shadow .3s ease;
}

.gst-app:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .1);
}

.gst-app .wp-block-image,
.gst-app .gst-ph {
	aspect-ratio: 4 / 3;
	margin: 0;
	overflow: hidden;
}

.gst-app .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.gst-app:hover .wp-block-image img {
	transform: scale(1.05);
}

.gst-app h3 {
	margin: 18px 22px 0;
	font-size: 18px;
	color: var(--gst-ink);
}

.gst-app h3::after {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	margin-top: 10px;
	background: var(--gst-gold);
}

.gst-app p {
	margin: 10px 22px 20px;
	font-size: 14px;
	color: var(--gst-muted);
}

/* Homepage brand section ([gst_brand_grid], same cards as the product centre): about 7 per row, 2 on phones. */
.gst-brands-sec .gst-brandgrid {
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.gst-brands-sec .gst-brandgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * 产品中心 (brands): mild PCB-board background, pure CSS, no animation — copper-coloured trace bundles with
 * 45° bends, vias, an IC footprint and SMD pads on a fine design-grid of dots, strongest at the top and bottom.
 */
.gst-brands-sec {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(ellipse 50% 40% at 50% 0%, rgba(195, 155, 92, .10), transparent 70%),
		linear-gradient(180deg, #f7f5f1 0%, #fbfaf8 55%, #f4f2ed 100%);
}

.gst-brands-sec::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M0 40H126.6L182.6 96H236L292 40H320M0 48H123.3L179.3 104H239.3L295.3 48H320M0 56H120L176 112H242.6L298.6 56H320M20 0V18M20 78V190M20 210V320M34 0V26M34 86V320M202 180H228L248 160H268M202 200H260L280 220V320M280 0V26M160 158V132M180 158V142L192 130H216M118 200H88L70 218V296M160 242V262L178 280H214' stroke='rgba(195,155,92,.42)' stroke-width='2'/><g fill='rgba(195,155,92,.4)'><rect x='138' y='158' width='4' height='10'/><rect x='148' y='158' width='4' height='10'/><rect x='158' y='158' width='4' height='10'/><rect x='168' y='158' width='4' height='10'/><rect x='178' y='158' width='4' height='10'/><rect x='138' y='232' width='4' height='10'/><rect x='148' y='232' width='4' height='10'/><rect x='158' y='232' width='4' height='10'/><rect x='168' y='232' width='4' height='10'/><rect x='178' y='232' width='4' height='10'/><rect x='118' y='178' width='10' height='4'/><rect x='118' y='188' width='10' height='4'/><rect x='118' y='198' width='10' height='4'/><rect x='118' y='208' width='10' height='4'/><rect x='118' y='218' width='10' height='4'/><rect x='192' y='178' width='10' height='4'/><rect x='192' y='188' width='10' height='4'/><rect x='192' y='198' width='10' height='4'/><rect x='192' y='208' width='10' height='4'/><rect x='192' y='218' width='10' height='4'/><rect x='16' y='190' width='8' height='7'/><rect x='16' y='203' width='8' height='7'/><rect x='236' y='236' width='7' height='8'/><rect x='249' y='236' width='7' height='8'/></g><g stroke='rgba(195,155,92,.55)' stroke-width='2'><circle cx='20' cy='22' r='3.5'/><circle cx='34' cy='30' r='3.5'/><circle cx='20' cy='74' r='3.5'/><circle cx='34' cy='82' r='3.5'/><circle cx='272' cy='160' r='3.5'/><circle cx='280' cy='30' r='3.5'/><circle cx='160' cy='128' r='3.5'/><circle cx='220' cy='130' r='3.5'/><circle cx='70' cy='300' r='3.5'/><circle cx='218' cy='280' r='3.5'/><circle cx='300' cy='250' r='3.5'/><circle cx='250' cy='300' r='3.5'/></g><g stroke='rgba(27,33,41,.16)'><rect x='130' y='170' width='60' height='60' rx='2'/><rect x='12' y='186' width='16' height='28' rx='2'/><rect x='232' y='232' width='28' height='16' rx='2'/></g><circle cx='138' cy='178' r='2' fill='rgba(27,33,41,.2)'/></svg>"),
		radial-gradient(circle, rgba(27, 33, 41, .10) 1px, transparent 1.5px);
	background-size: 320px 320px, 16px 16px;
	background-position: center top, center top;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 35%, rgba(0, 0, 0, .35) 65%, #000 100%);
	mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 35%, rgba(0, 0, 0, .35) 65%, #000 100%);
}

/* Slightly see-through cards so the board shows faintly behind them; solid white on hover. */
.gst-brands-sec .gst-brand {
	background: rgba(255, 255, 255, .8);
	transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.gst-brands-sec .gst-brand:hover {
	background: #fff;
}

@media (max-width: 689.98px) {
	.gst-brands-sec::before {
		opacity: .75;
	}
}

/* News: title + tabs, featured post with a dated list beside it, compact list below. Full width. */
.gst-news-sec {
	padding-left: 24px;
	padding-right: 24px;
}

.gst-news-sec > .gst-news {
	max-width: none;
}

.gst-news__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 44px;
}

.gst-news__title {
	margin: 0;
	font-size: 36px;
	line-height: 1.2;
	color: var(--gst-ink);
}

.gst-news__title::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin-top: 18px;
	background: var(--gst-gold);
}

.gst-news__tabs {
	display: flex;
	gap: 28px;
	margin-left: auto;
}

.gst-news__tabs button {
	min-width: 176px;
	min-height: 58px;
	padding: 0 30px;
	border: 0;
	border-radius: 0;
	background: #f2f2f2;
	font-size: 17px;
	color: #333;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.gst-news__tabs button:hover,
.gst-news__tabs button.is-active {
	background: var(--gst-gold);
	color: #fff;
}

.gst-news__panel {
	display: none;
}

.gst-news__panel.is-active {
	display: block;
}

.gst-news__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 76px;
	align-items: start;
}

.gst-news__img {
	display: block;
	aspect-ratio: 19 / 10;
	overflow: hidden;
	background: var(--gst-soft);
}

.gst-news__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.gst-news__feature:hover .gst-news__img img {
	transform: scale(1.04);
}

.gst-news__ftitle {
	margin: 22px 0 12px;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.5;
}

.gst-news__ftitle a,
.gst-news__ltitle,
.gst-news__compact a {
	color: var(--gst-ink);
	text-decoration: none;
}

.gst-news__ftitle a:hover,
.gst-news__ltitle:hover,
.gst-news__compact a:hover {
	color: var(--gst-gold);
}

.gst-news__fexcerpt {
	margin: 0;
	font-size: 15px;
	line-height: 1.8;
	color: #777;
}

.gst-news__readmore {
	margin-left: 4px;
	color: var(--gst-gold);
	text-decoration: none;
	white-space: nowrap;
}

.gst-news__readmore:hover {
	color: var(--gst-gold-dark);
}

.gst-news__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gst-news__list li {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	align-items: center;
	padding: 26px 0;
	border-bottom: 1px solid var(--gst-line);
}

.gst-news__list li:first-child {
	padding-top: 0;
}

.gst-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	margin-right: 46px;
	border-right: 1px solid var(--gst-line);
}

.gst-date b {
	font-family: Arial, "Helvetica Neue", sans-serif;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--gst-gold);
}

.gst-date span {
	margin-top: 10px;
	font-size: 15px;
	color: var(--gst-gold);
}

.gst-news__lbody {
	min-width: 0;
}

.gst-news__ltitle {
	display: block;
	overflow: hidden;
	font-size: 18px;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gst-news__lexcerpt {
	margin: 12px 0 0;
	overflow: hidden;
	font-size: 15px;
	color: #888;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gst-news__compact {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 64px;
	margin: 46px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--gst-line);
	list-style: none;
}

.gst-news__compact::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: calc(50% - 38px);
	height: 2px;
	background: var(--gst-gold);
}

.gst-news__compact li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
}

.gst-news__compact a {
	min-width: 0;
	overflow: hidden;
	font-size: 16px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gst-news__compact time {
	flex: none;
	font-size: 14px;
	color: #999;
}

@media (max-width: 1199.98px) {
	.gst-news__top {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.gst-news__compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 40px;
	}

	.gst-news__compact::before {
		width: 40%;
	}
}

@media (max-width: 768px) {
	.gst-news__head {
		margin-bottom: 30px;
	}

	.gst-news__title {
		font-size: 28px;
	}

	.gst-news__tabs {
		width: 100%;
		gap: 12px;
	}

	.gst-news__tabs button {
		flex: 1;
		min-width: 0;
		min-height: 46px;
		padding: 0 12px;
		font-size: 15px;
	}

	.gst-news__list li {
		grid-template-columns: 92px minmax(0, 1fr);
		padding: 20px 0;
	}

	.gst-date {
		margin-right: 18px;
	}

	.gst-date b {
		font-size: 34px;
	}

	.gst-date span {
		margin-top: 6px;
		font-size: 13px;
	}

	.gst-news__compact {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 30px;
	}
}

/* ---------- Inquiry form ---------- */

.gst-inquiry-sec {
	background: var(--gst-soft);
}

.gst-inquiry {
	max-width: 860px;
	margin: 0 auto;
	scroll-margin-top: 120px;
}

.gst-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 18px;
}

.gst-field.is-full,
.gst-form__submit {
	grid-column: 1 / -1;
}

.gst-form input,
.gst-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--gst-line);
	border-radius: 4px;
	background: #fff;
	font-size: 15px;
	color: var(--gst-ink);
}

.gst-form input:focus,
.gst-form textarea:focus {
	outline: none;
	border-color: var(--gst-gold);
	box-shadow: 0 0 0 3px rgba(195, 155, 92, .15);
}

.gst-captcha {
	display: flex;
	align-items: center;
	gap: 14px;
}

.gst-captcha input {
	max-width: 300px;
}

.gst-captcha__q {
	padding: 10px 18px;
	border-radius: 4px;
	background: var(--gst-gold-soft);
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--gst-gold-dark);
	white-space: nowrap;
}

.gst-form__submit {
	min-height: 50px;
	border: 0;
	border-radius: 4px;
	background: var(--gst-gold);
	font-size: 16px;
	letter-spacing: .2em;
	color: #fff;
	cursor: pointer;
}

.gst-form__submit:hover {
	background: var(--gst-gold-dark);
}

.gst-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gst-notice {
	margin-bottom: 18px;
	padding: 12px 16px;
	border-radius: 4px;
}

.gst-notice.is-ok {
	background: #edf6ec;
	color: #2f6b2c;
}

.gst-notice.is-err {
	background: #fbeeee;
	color: #a33a3a;
}

/* ---------- Product centre ---------- */

.gst-products {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 40px;
	max-width: var(--gst-wrap);
	margin: 0 auto;
	padding: 50px 20px 80px;
}

.gst-side__box {
	margin-bottom: 24px;
	border: 1px solid var(--gst-line);
	background: #fff;
}

.gst-side__title {
	margin: 0;
	padding: 14px 20px;
	background: var(--gst-gold);
	font-size: 18px;
	color: #fff;
}

.gst-side__list {
	max-height: 600px;
	margin: 0;
	padding: 8px 0;
	overflow: auto;
	list-style: none;
}

.gst-side__list a {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 20px;
	font-size: 14px;
	color: #555;
	text-decoration: none;
}

.gst-side__list small {
	color: var(--gst-muted);
}

.gst-side__list a:hover,
.gst-side__list .is-active a {
	background: var(--gst-soft);
	color: var(--gst-gold);
}

.gst-side__contact {
	padding-bottom: 20px;
}

.gst-side__contact p {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 20px 0;
	font-size: 14px;
}

.gst-side__contact .gst-ico {
	color: var(--gst-gold);
}

.gst-side__contact a {
	color: var(--gst-ink);
	text-decoration: none;
	word-break: break-all;
}

.gst-side__contact .gst-btn {
	margin: 18px 20px 0;
	color: #fff;
}

.gst-listhead {
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--gst-line);
}

.gst-listhead h1 {
	margin: 0;
	font-size: 26px;
	color: var(--gst-ink);
}

.gst-listhead small {
	font-size: 16px;
	font-weight: 400;
	color: var(--gst-muted);
}

.gst-listhead--center {
	border: 0;
	text-align: center;
}

.gst-subhead {
	margin: 0 0 18px;
	padding-left: 12px;
	border-left: 3px solid var(--gst-gold);
	font-size: 18px;
	color: var(--gst-ink);
}

.gst-brandgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 44px;
}

.gst-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 84px;
	padding: 12px;
	border: 1px solid var(--gst-line);
	background: #fff;
	text-align: center;
	text-decoration: none;
}

.gst-brand strong {
	font-size: 16px;
	color: var(--gst-ink);
}

.gst-brand span {
	font-size: 13px;
	color: var(--gst-muted);
}

.gst-brand img {
	max-height: 40px;
	width: auto;
}

.gst-brand:hover {
	border-color: var(--gst-gold);
	box-shadow: 0 6px 18px rgba(195, 155, 92, .15);
}

/* Product grid columns / gaps: Customizer → WooCommerce → Product Archives → Columns & Rows.
   Blocksy writes --shop-columns for tablet / phone only; the desktop count comes from the template
   (--gst-shop-cols). */
.gst-pgrid {
	display: grid;
	grid-template-columns: var(--shop-columns, repeat(var(--gst-shop-cols, 4), minmax(0, 1fr)));
	column-gap: var(--grid-columns-gap, 22px);
	row-gap: var(--grid-rows-gap, 22px);
}

.gst-pcard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--gst-line);
	background: #fff;
	text-decoration: none;
	transition: border-color .25s ease, box-shadow .25s ease;
}

.gst-pcard:hover {
	border-color: var(--gst-gold);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .07);
}

.gst-pcard__img {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--gst-soft);
}

.gst-pcard__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.gst-pcard__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 18px;
}

.gst-pcard__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--gst-ink);
}

.gst-pcard:hover .gst-pcard__title {
	color: var(--gst-gold);
}

.gst-pcard__brand {
	font-size: 13px;
	color: var(--gst-muted);
}

.gst-pager {
	margin-top: 40px;
	text-align: center;
}

.gst-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	margin: 0 3px;
	padding: 0 8px;
	border: 1px solid var(--gst-line);
	color: #555;
	text-decoration: none;
}

.gst-pager .page-numbers.current,
.gst-pager a.page-numbers:hover {
	border-color: var(--gst-gold);
	background: var(--gst-gold);
	color: #fff;
}

.gst-pdetail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 40px;
}

.gst-pdetail__img {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--gst-line);
	background: var(--gst-soft);
}

.gst-pdetail__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.gst-pdetail__info h1 {
	margin: 0 0 12px;
	font-size: 28px;
	color: var(--gst-ink);
}

.gst-pdetail__sub {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.8;
	color: #666;
}

.gst-pdetail__meta {
	margin: 0 0 28px;
	padding: 16px 0;
	border-top: 1px dashed var(--gst-line);
	border-bottom: 1px dashed var(--gst-line);
	list-style: none;
}

.gst-pdetail__meta li {
	display: flex;
	gap: 16px;
	padding: 5px 0;
	font-size: 15px;
}

.gst-pdetail__meta b {
	flex: 0 0 48px;
	font-weight: 500;
	color: var(--gst-muted);
}

.gst-pdetail__meta a {
	color: var(--gst-gold);
}

.gst-pdetail__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.gst-tabs-head {
	margin: 44px 0 22px;
	border-bottom: 2px solid var(--gst-line);
}

.gst-tabs-head span {
	display: inline-block;
	margin-bottom: -2px;
	padding: 12px 28px;
	background: var(--gst-gold);
	font-size: 16px;
	color: #fff;
}

.gst-spec table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.gst-spec th,
.gst-spec td {
	padding: 11px 16px;
	border: 1px solid var(--gst-line);
	text-align: left;
	vertical-align: top;
}

.gst-spec tr > :first-child {
	width: 32%;
	background: var(--gst-soft);
	font-weight: 500;
	color: #555;
}

.gst-spec .wp-block-table {
	margin: 0;
}

/* ---------- News list ---------- */

.gst-newslist {
	max-width: var(--gst-wrap);
	margin: 0 auto;
	padding: 50px 20px 80px;
}

.gst-newsitem {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 32px;
	padding: 28px 0;
	border-bottom: 1px solid var(--gst-line);
}

.gst-newsitem__img {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.gst-newsitem__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.gst-newsitem:hover .gst-newsitem__img img {
	transform: scale(1.05);
}

.gst-newsitem time {
	font-size: 13px;
	color: var(--gst-gold);
}

.gst-newsitem h2 {
	margin: 8px 0 10px;
	font-size: 20px;
}

.gst-newsitem h2 a {
	color: var(--gst-ink);
	text-decoration: none;
}

.gst-newsitem h2 a:hover,
.gst-more:hover {
	color: var(--gst-gold);
}

.gst-newsitem p {
	margin: 0 0 12px;
	line-height: 1.8;
	color: var(--gst-muted);
}

.gst-more {
	font-size: 14px;
	color: #555;
	text-decoration: none;
}

/* ---------- Content pages ---------- */

.gst-values {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: 10px 0 40px;
}

.gst-value {
	margin: 0 !important;
	padding: 34px 26px;
	border-top: 3px solid var(--gst-gold);
	border-radius: 0 0 8px 8px;
	background: var(--gst-soft);
	text-align: center;
}

.gst-value h3 {
	margin: 0 0 14px;
	font-size: 28px;
	letter-spacing: .2em;
	color: var(--gst-gold);
}

.gst-value p {
	margin: 0;
	font-size: 15px;
	line-height: 1.9;
	color: #555;
}

.gst-offices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	margin-bottom: 50px;
}

.gst-office {
	padding: 30px 32px;
	border: 1px solid var(--gst-line);
	border-top: 3px solid var(--gst-gold);
	background: #fff;
}

.gst-office h3 {
	margin: 0 0 18px;
	font-size: 20px;
	color: var(--gst-ink);
}

.gst-office p {
	display: flex;
	gap: 14px;
	margin: 0 0 10px;
	line-height: 1.7;
}

.gst-office b {
	flex: 0 0 64px;
	font-weight: 600;
	color: var(--gst-gold-dark);
}

.gst-office a {
	color: var(--gst-ink);
}

.gst-contact-form-title {
	text-align: center;
}

/* ---------- Footer ---------- */

.gst-footer {
	background: #14181e;
	font-size: 14px;
	color: rgba(255, 255, 255, .62);
}

.gst-footer__main {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.7fr);
	gap: 30px;
	max-width: var(--gst-wrap);
	margin: 0 auto;
	padding: 60px 20px 44px;
}

.gst-footer h4 {
	margin: 0 0 20px;
	font-size: 16px;
	color: #fff;
}

.gst-footer h4::after {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	margin-top: 10px;
	background: var(--gst-gold);
}

.gst-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gst-footer li {
	margin: 0 0 10px;
}

.gst-footer a {
	color: rgba(255, 255, 255, .62);
	text-decoration: none;
}

.gst-footer a:hover {
	color: var(--gst-gold);
}

.gst-footer__brands ul {
	columns: 2;
	column-gap: 16px;
}

.gst-footer__contact p {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0 0 10px;
	line-height: 1.7;
}

.gst-footer__contact b {
	flex: none;
	font-weight: 500;
	color: rgba(255, 255, 255, .85);
}

.gst-footer__contact .gst-ico {
	margin-top: 2px;
	color: var(--gst-gold);
}

.gst-footer__qr {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}

.gst-footer__qr img {
	width: 100px;
	height: 100px;
	background: #fff;
}

.gst-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 22px;
	padding: 18px 20px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: 13px;
	color: rgba(255, 255, 255, .42);
}

.gst-footer__bottom a {
	color: rgba(255, 255, 255, .42);
}

/* ---------- Floating contact bar ---------- */
/* Colours: Customizer → 杰思坦 · 侧边悬浮栏 (printed as --gst-float-* by inc/settings.php). */

.gst-float {
	position: fixed;
	right: 0;
	top: 50%;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 1px;
	transform: translateY(-50%);
}

.gst-float__item {
	position: relative;
}

.gst-float__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 70px;
	height: 70px;
	padding: 0;
	border: 0;
	background: var(--gst-float-bg, var(--gst-gold));
	font: inherit;
	font-size: 12px;
	line-height: 1.3;
	color: var(--gst-float-color, #fff);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease;
}

.gst-float__btn:hover,
.gst-float__btn:focus-visible,
.gst-float__item.is-open .gst-float__btn {
	background: var(--gst-float-bg-hover, var(--gst-gold-dark));
	color: var(--gst-float-color, #fff);
}

.gst-float__btn:focus-visible {
	outline: 2px solid var(--gst-float-color, #fff);
	outline-offset: -4px;
}

.gst-float__btn .gst-ico {
	width: 24px;
	height: 24px;
}

.gst-float__pop {
	position: absolute;
	top: 0;
	right: calc(100% + 8px);
	display: none;
	padding: 14px 18px;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .15);
	font-size: 15px;
	line-height: 1.7;
	font-weight: 600;
	color: var(--gst-ink);
	white-space: nowrap;
}

.gst-float__item:hover .gst-float__pop,
.gst-float__item:focus-within .gst-float__pop,
.gst-float__item.is-open .gst-float__pop {
	display: block;
}

.gst-float__pop--qq {
	text-align: center;
}

.gst-float__pop-title {
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	color: var(--gst-muted);
}

.gst-float__pop-number {
	display: block;
	font-size: 18px;
	letter-spacing: .04em;
	user-select: all;
}

.gst-float__pop--tel a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 3px 0;
	color: var(--gst-ink);
	text-decoration: none;
}

.gst-float__pop--tel a:hover {
	color: var(--gst-gold);
}

.gst-float__pop--tel .gst-float__pop-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--gst-muted);
}

.gst-float__pop--tel .gst-float__pop-number {
	font-size: 16px;
	user-select: auto;
}

/* Fixed width: with a content-sized box, Blocksy's img { max-width: 100% } collapses the QR image to 0px. */
.gst-float__pop--qr {
	box-sizing: content-box;
	width: 150px;
	padding: 10px;
	text-align: center;
	white-space: normal;
}

.gst-float__pop--qr img {
	display: block;
	width: 150px;
	max-width: none;
	height: 150px;
	object-fit: contain;
}

.gst-float__pop-id {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--gst-text);
}

.gst-float__top {
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

.gst-float__top.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199.98px) {
	.gst-logo__tag {
		display: none;
	}

	.gst-footer__main {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gst-footer__contact {
		grid-column: span 2;
	}
}

@media (max-width: 1199.98px) {
	.gst-apps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.gst-side {
		order: 2;
	}

	.gst-side__list {
		display: flex;
		flex-wrap: wrap;
		max-height: none;
		padding: 10px;
		gap: 6px;
	}

	.gst-side__list a {
		padding: 6px 12px;
		border: 1px solid var(--gst-line);
	}

	.gst-side__list small {
		display: none;
	}

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

@media (max-width: 768px) {
	body {
		padding-bottom: 56px;
	}

	.gst-logo__en {
		font-size: 22px;
	}

	.gst-logo__cn {
		font-size: 19px;
	}

	.gst-sec {
		padding: 56px 16px;
	}

	.gst-sec > .wp-block-heading:first-child {
		font-size: 26px;
		margin-bottom: 28px;
	}

	.gst-banner {
		min-height: 200px;
	}

	.gst-banner__title {
		font-size: 30px;
	}

	.gst-crumbbar__in {
		padding: 0 16px;
	}

	.gst-subnav {
		width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.gst-subnav a {
		flex: 1 0 auto;
		justify-content: center;
		min-height: 46px;
		padding: 0 16px;
	}

	.gst-page-head__mark {
		font-size: 40px;
	}

	.gst-counters {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 26px;
	}

	.gst-counter:nth-child(2) {
		border-right: 0;
	}

	.gst-entries,
	.gst-news__panel.is-active,
	.gst-pdetail,
	.gst-offices,
	.gst-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.gst-apps {
		gap: 14px;
	}

	.gst-app h3 {
		margin: 14px 14px 0;
		font-size: 16px;
	}

	.gst-app p {
		margin: 8px 14px 16px;
	}


	.gst-products,
	.gst-newslist {
		padding: 32px 16px 56px;
	}

	.gst-newsitem {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.gst-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 44px 16px 30px;
	}

	.gst-footer__contact {
		grid-column: 1 / -1;
	}

	.gst-float {
		top: auto;
		bottom: 0;
		left: 0;
		flex-direction: row;
		transform: none;
	}

	.gst-float__item {
		flex: 1;
	}

	.gst-float__btn {
		width: 100%;
		height: 56px;
		font-size: 11px;
	}

	.gst-float__btn .gst-ico {
		width: 20px;
		height: 20px;
	}

	/* Phones: pop-ups open above the bar on tap only (no hover). */
	.gst-float__pop,
	.gst-float__item:hover .gst-float__pop,
	.gst-float__item:focus-within .gst-float__pop {
		display: none;
	}

	.gst-float__item.is-open .gst-float__pop {
		display: block;
		top: auto;
		right: 50%;
		bottom: calc(100% + 8px);
		transform: translateX(50%);
	}

	.gst-float__item:last-child.is-open .gst-float__pop,
	.gst-float__item:nth-last-child(2).is-open .gst-float__pop {
		right: 8px;
		transform: none;
	}

	/* First button (phone): keep its pop-up inside the left edge. */
	.gst-float__item:first-child.is-open .gst-float__pop {
		right: auto;
		left: 8px;
		transform: none;
	}

	.gst-float__top {
		opacity: 1;
		pointer-events: auto;
	}
}

@media (max-width: 480px) {
	.gst-values {
		grid-template-columns: minmax(0, 1fr);
	}

	.gst-office {
		padding: 24px 20px;
	}
}