/**
 * Astra Child Theme — Main Stylesheet
 *
 * Brand: Baoshuo Pipe Fittings (常州市宝硕管件有限公司)
 * Monochrome industrial palette — black #111 | gray #333/#666/#f0f0f0 | white
 * Font: Inter + JetBrains Mono (self-hosted — see @font-face below)
 */

/* ==========================================================================
   Self-hosted Fonts (Bug 35 — Google Fonts unreachable in mainland China)
   Subset Latin woff2 files in assets/fonts/web/. CJK falls back to system
   fonts via the --bs-font stack (PingFang SC / Microsoft YaHei / Noto Sans).
   ========================================================================== */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/web/Inter-Regular.woff2') format('woff2');
	/* Latin + common punctuation only — CJK glyphs fall back to the system
	   stack, so pure-Chinese pages download zero webfont bytes. */
	unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/web/Inter-Medium.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/web/Inter-SemiBold.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/web/Inter-Bold.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/web/JetBrainsMono-Regular.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
/* Roboto Condensed (self-hosted, v17 display face) — same Bug 35 rationale */
@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/web/RobotoCondensed-Medium.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/web/RobotoCondensed-SemiBold.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/web/RobotoCondensed-Bold.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */
:root {
	/* Monochrome industrial palette — black, white, gray */
	--bs-black:        #0b0b0b;   /* Almost-black — header/footer (v17) */
	--bs-black-surface:#131313;   /* Slightly lighter — dark cards (v17) */
	--bs-primary:      #333333;   /* Dark gray — buttons, links */
	--bs-primary-dark: #111111;   /* Nearly black — hover states */
	--bs-primary-light:#f0f0f0;   /* Light gray — link backgrounds */
	--bs-text:         #333333;   /* Near-black — body */
	--bs-text-muted:   #666666;   /* Medium gray — secondary */
	--bs-surface:      #f5f5f5;   /* Off-white — section bg */
	--bs-border:       #e0e0e0;
	--bs-white:        #FFFFFF;
	--bs-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Microsoft JhengHei', sans-serif;
	--bs-font-mono:    'JetBrains Mono', 'SFMono-Regular', 'Consolas', 'Courier New', monospace;
	--bs-font-display: 'Roboto Condensed', 'Arial Narrow', 'Inter', -apple-system, sans-serif;
	/* v17 homepage additions (定稿 2026-08-11) */
	--bs-steel:       #efefec;   /* light section bg (What We Make) */
	--bs-ink:         #111111;   /* text/border on light */
	--bs-gray:        #8a8a8a;   /* mono secondary */
	--bs-gray-2:      #b4b4b4;   /* muted on dark */
	/* v19 refinement: mono secondary text on LIGHT surfaces — #8a8a8a on white
	   is only 3.45:1, below WCAG AA. This ink-gray clears 4.7:1 on white and
	   4.6:1 on the steel surface (#efefec). */
	--bs-gray-ink:    #6b6b6b;   /* mono secondary on light */
	--bs-line-dark:   #262626;
	--bs-line-strong: #3a3a3a;
	--bs-line-light:  #d6d6d2;
	/* v21 About page: warm paper surface (shared by body + About scoping) */
	--bs-paper-warm:  #f5f1e8;
	--bs-shadow-sm:    0 1px 2px rgba(0,0,0,0.05);
	--bs-shadow-md:    0 4px 12px rgba(0,0,0,0.07);
	--bs-shadow-lg:    0 8px 24px rgba(0,0,0,0.10);
	--bs-radius:       4px;
	--bs-radius-sm:    2px;
	--bs-radius-lg:   8px;
	--bs-transition:   0.2s ease-in-out;
	--bs-ease-out:     cubic-bezier(0.23, 1, 0.32, 1); /* v18 motion: strengthened ease-out */
}

/* ==========================================================================
   Global Overrides
   ========================================================================== */

/* ─── LAYOUT: Ultimate centering — override EVERYTHING ─── */
/* Target all container variants */
.ast-container,
.site-content .ast-container,
.ast-plain-container .ast-container,
.ast-box-layout .ast-container,
div.ast-container,
.ast-builder-grid-row-container {
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}
/* Site content must span full width */
.site-content,
.ast-plain-container .site-content,
.ast-box-layout .site-content {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}
/* Override Astra's display:flex on content container — it breaks centering */
.site-content > .ast-container,
.site-content .ast-container {
	display: block !important;
	max-width: 1400px !important;
	padding-left: 32px !important;
	padding-right: 32px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Override Astra @media min-width:922px .ast-container{max-width:1240px} */
@media (min-width: 922px) {
	.ast-container { max-width: 1400px !important; }
}
/* Header containers too */
.site-header .ast-container,
.site-primary-header-wrap.ast-container {
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
#content { margin: 0 auto; }
#main.site-main { width: 100%; }
body {
	font-family: var(--bs-font);
	color: var(--bs-text);
	background-color: var(--bs-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: start;
}
html, body {
	margin: 0; padding: 0; width: 100%;
}

/* Astra's separate-container layout defaults to a blue-grey canvas on
   product/single pages; keep the site's monochrome white background. */
body.ast-separate-container,
body.ast-separate-container .ast-article-single:not(.ast-related-post),
body.ast-separate-container .ast-article-inner {
	background-color: var(--bs-white);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bs-font);
	color: var(--bs-black);
	letter-spacing: -0.02em;
}

a {
	color: var(--bs-primary);
	transition: var(--bs-transition);
}
a:hover {
	color: var(--bs-primary-dark);
}

/* ==========================================================================
   Header & Navigation Overrides
   ========================================================================== */

/* Make Astra header use our navy */
.site-header {
	background-color: var(--bs-black) !important;
	border-bottom: none !important;
}
.site-header .ast-main-header-wrap {
	background-color: var(--bs-black);
}

.main-navigation .menu-item > a {
	color: var(--bs-white) !important;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.01em;
}

.main-navigation .menu-item > a:hover,
.main-navigation .menu-item.current-menu-item > a {
	color: var(--bs-primary) !important;
}

/* Dropdown menus */
.main-navigation .sub-menu {
	background-color: var(--bs-white) !important;
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-shadow-lg);
	border: 1px solid var(--bs-border);
	padding: 8px 0;
}

.main-navigation .sub-menu .menu-item > a {
	color: var(--bs-text) !important;
	font-size: 14px;
	padding: 8px 20px;
}

.main-navigation .sub-menu .menu-item > a:hover {
	background-color: var(--bs-primary-light);
	color: var(--bs-primary) !important;
}

/* Mobile menu toggle + hamburger */
.menu-toggle,
.ast-mobile-menu-trigger-outline .ast-button-wrap .menu-toggle {
	color: var(--bs-white) !important;
	border-color: rgba(255,255,255,0.3) !important;
}

/* Astra content container compatibility */
.ast-container {
	max-width: 1400px;
	margin: 0 auto;
	padding-left: 32px;
	padding-right: 32px;
}
.site-main {
	padding: 0; /* Remove Astra default content padding — we handle it in sections */
}


/* ==========================================================================
   Hero Section (Home)
   ========================================================================== */
.bs-hero {
	background: linear-gradient(160deg, var(--bs-black) 0%, #1a1a1a 50%, var(--bs-black-surface) 100%);
	color: var(--bs-white);
	padding: 100px 0 80px;
	position: relative;
	overflow: hidden;
}

.bs-hero::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 60%;
	height: 200%;
	/* v2 single-color grid texture (see .bs-hero::before override below).
	   The v1 blue radial glow (rgba(10,131,217,...)) was removed — the
	   monochrome-only brand rule forbids any latent color accent. */
	background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.01) 2px, rgba(255,255,255,0.01) 4px);
	pointer-events: none;
}

.bs-hero__title {
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--bs-white);
	margin-bottom: 20px;
}

.bs-hero__title span {
	color: var(--bs-primary);
}

.bs-hero__subtitle {
	font-size: clamp(16px, 2vw, 20px);
	font-weight: 400;
	color: rgba(255, 255, 255, 0.75);
	max-width: 600px;
	margin-bottom: 32px;
	line-height: 1.6;
}

.bs-hero__image {
	border-radius: var(--bs-radius-lg);
	box-shadow: var(--bs-shadow-lg);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.bs-btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: var(--bs-radius);
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	transition: all var(--bs-transition);
	cursor: pointer;
	/* 统一边框模型（2026-09-04）：所有 .bs-btn 变体占位一致 — 透明边框让
	   无边框按钮（primary/accent）与描边按钮（outline-dark/solid）高度相等，
	   修复"下载手册/下载技术数据表"与相邻按钮不等高的问题。
	   font-family/line-height inherit：<button> 不继承 body 行高（UA
	   line-height:normal ≈ 16px），导致 .bs-btn <button> 比相邻 <a> 按钮矮
	   10px —— 下载类按钮全部是 <button>，必须随主题行高。 */
	border: 2px solid transparent;
	font-family: inherit;
	line-height: inherit;
	text-align: center;
}

.bs-btn--primary {
	background-color: var(--bs-primary);
	color: var(--bs-white);
}
.bs-btn--primary:hover {
	background-color: var(--bs-primary-dark);
	color: var(--bs-white);
	/* transform lift moved into @media (hover:hover) — v18 motion */
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.bs-btn--accent {
	background-color: var(--bs-primary);
	color: var(--bs-white);
}
.bs-btn--accent:hover {
	background-color: var(--bs-primary-dark);
	color: var(--bs-white);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.bs-btn--outline {
	background-color: transparent;
	color: var(--bs-white);
	border: 2px solid rgba(255, 255, 255, 0.3);
}
.bs-btn--outline:hover {
	border-color: var(--bs-white);
	color: var(--bs-white);
}

.bs-btn--outline-dark {
	background-color: transparent;
	color: var(--bs-primary);
	border: 2px solid var(--bs-primary);
}
.bs-btn--outline-dark:hover {
	background-color: var(--bs-primary);
	color: var(--bs-white);
}

.bs-btn--sm {
	padding: 8px 20px;
	font-size: 14px;
}

.bs-btn--lg {
	padding: 18px 40px;
	font-size: 18px;
}

/* ==========================================================================
   Section Common Styles
   ========================================================================== */
.bs-section {
	padding: 80px 0;
	width: 100%;
}

.bs-section--gray {
	background-color: var(--bs-surface);
}

.bs-section--light {
	background-color: var(--bs-surface);
}

.bs-section__title {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	color: var(--bs-black);
	margin-bottom: 16px;
	text-align: center;
}

.bs-section__subtitle {
	font-size: 18px;
	color: var(--bs-text-muted);
	text-align: center;
	max-width: 640px;
	margin: 0 auto 48px;
	line-height: 1.6;
}

/* ==========================================================================
   Product Cards
   ========================================================================== */
.bs-product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
@media (min-width: 1400px) {
	.bs-product-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
	.bs-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.bs-product-grid { grid-template-columns: 1fr; }
}

.bs-product-card {
	background: var(--bs-white);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius-lg);
	padding: 32px 24px;
	transition: all var(--bs-transition);
	text-align: center;
}

.bs-product-card:hover {
	box-shadow: var(--bs-shadow-lg);
	transform: translateY(-4px);
	border-color: var(--bs-primary);
}

.bs-product-card__image {
	width: 100%;
	/* height deliberately NOT set here — the v2 rule uses aspect-ratio: 4/3;
	   a fixed height would defeat aspect-ratio and misalign cards with/without
	   an image in the same grid. */
	object-fit: contain;
	margin-bottom: 20px;
}

.bs-product-card__title {
	font-size: 20px;
	font-weight: 600;
	color: var(--bs-black);
	margin-bottom: 8px;
}

.bs-product-card__desc {
	font-size: 14px;
	color: var(--bs-text-muted);
	line-height: 1.5;
	margin-bottom: 16px;
}

.bs-product-card__link {
	font-weight: 600;
	font-size: 14px;
	color: var(--bs-primary);
	text-decoration: none;
}
.bs-product-card__link::after {
	content: ' →';
}

/* ==========================================================================
   Product Category Page
   ========================================================================== */
.bs-category-hero {
	background-color: var(--bs-black);
	color: var(--bs-white);
	padding: 60px 0;
}

.bs-category-hero__title {
	font-size: clamp(28px, 4vw, 40px);
	color: var(--bs-white);
	margin-bottom: 8px;
}

/* Category introduction paragraph (2026-09-14, operator-approved option B).
   Renders the bs_term_desc_{lang} term meta above the product grid — the copy
   existed since 2026-09-09 but no template read it, leaving all 42 category
   archives as thin content. Kept out of the hero so its height is unchanged;
   15.5px/1.8 on --bs-text clears WCAG AA on white. */
.bs-category-intro {
	max-width: 900px;
	margin: 0 0 44px;
	color: var(--bs-text);
	font-size: 15.5px;
	line-height: 1.8;
}

@media (max-width: 768px) {
	.bs-category-intro {
		margin-bottom: 32px;
		font-size: 15px;
	}
}

/* ==========================================================================
   Product Detail Page
   ========================================================================== */
.bs-product-detail {
	padding: 60px 0;
}

.bs-product-detail__gallery {
	border-radius: var(--bs-radius-lg);
	overflow: hidden;
}

.bs-product-detail__specs {
	background: var(--bs-surface);
	border-radius: var(--bs-radius-lg);
	padding: 32px;
}

/* ==========================================================================
   Technical Spec Tables
   ========================================================================== */
.bs-spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.bs-spec-table th,
.bs-spec-table td {
	padding: 12px 16px;
	text-align: start;
	border-bottom: 1px solid var(--bs-border);
}

.bs-spec-table th {
	background-color: var(--bs-black);
	color: var(--bs-white);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.bs-spec-table td {
	color: var(--bs-text);
}

.bs-spec-table td:first-child {
	font-weight: 600;
	color: var(--bs-black);
	white-space: nowrap;
}

.bs-spec-table td.mono {
	font-family: var(--bs-font-mono);
	font-size: 13px;
}

.bs-spec-table tr:nth-child(even) td {
	background: rgba(0, 0, 0, 0.03);
}

.bs-spec-table tr:hover td {
	background: var(--bs-primary-light);
}

/* Scrollable table wrapper for mobile */
.bs-spec-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--bs-radius);
	border: 1px solid var(--bs-border);
}

/* ==========================================================================
   Trust Bar / Certification Strip
   ========================================================================== */
.bs-trust-bar {
	background-color: var(--bs-white);
	border-top: 1px solid var(--bs-border);
	border-bottom: 1px solid var(--bs-border);
	padding: 32px 0;
}

.bs-trust-bar__grid {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 48px;
	flex-wrap: wrap;
}

/* v1 .bs-trust-badge block removed — dead code (no template uses it; the
   live trust strip is .bs-trust-strip in template-home.php). */

/* ==========================================================================
   Solution Cards
   ========================================================================== */
.bs-solution-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.bs-solution-card {
	background: var(--bs-white);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius-lg);
	padding: 28px 24px;
	transition: all var(--bs-transition);
	border-left: 4px solid var(--bs-primary);
}

.bs-solution-card:hover {
	box-shadow: var(--bs-shadow-md);
}

.bs-solution-card__icon {
	font-size: 32px;
	margin-bottom: 12px;
}

.bs-solution-card__title {
	font-size: 18px;
	font-weight: 600;
	color: var(--bs-black);
	margin-bottom: 8px;
}

.bs-solution-card__desc {
	font-size: 14px;
	color: var(--bs-text-muted);
	line-height: 1.6;
}

/* ==========================================================================
   Case Study Cards
   ========================================================================== */
.bs-case-card {
	background: var(--bs-white);
	border-radius: var(--bs-radius-lg);
	overflow: hidden;
	box-shadow: var(--bs-shadow-sm);
	transition: all var(--bs-transition);
}

.bs-case-card:hover {
	box-shadow: var(--bs-shadow-lg);
	transform: translateY(-4px);
}

.bs-case-card__image {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.bs-case-card__body {
	padding: 24px;
}

.bs-case-card__title {
	font-size: 18px;
	font-weight: 600;
	color: var(--bs-black);
	margin-bottom: 8px;
}

.bs-case-card__meta {
	font-size: 13px;
	color: var(--bs-text-muted);
	margin-bottom: 12px;
}

.bs-case-card__excerpt {
	font-size: 14px;
	color: var(--bs-text);
	line-height: 1.6;
}

/* ==========================================================================
   RFQ / Contact Form
   ========================================================================== */
.bs-rfq-form {
	background: var(--bs-white);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius-lg);
	padding: 40px;
	box-shadow: var(--bs-shadow-md);
}

.bs-rfq-form label {
	font-weight: 600;
	font-size: 14px;
	color: var(--bs-black);
	margin-bottom: 6px;
	display: block;
}

.bs-rfq-form input[type="text"],
.bs-rfq-form input[type="email"],
.bs-rfq-form input[type="tel"],
.bs-rfq-form select,
.bs-rfq-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius-sm);
	font-family: var(--bs-font);
	font-size: 15px;
	color: var(--bs-text);
	transition: border-color var(--bs-transition);
	background: var(--bs-white);
}

.bs-rfq-form input:focus,
.bs-rfq-form select:focus,
.bs-rfq-form textarea:focus {
	outline: none;
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.bs-rfq-form textarea {
	min-height: 120px;
	resize: vertical;
}

.bs-rfq-form .wpforms-submit,
.bs-rfq-form button[type="submit"] {
	background-color: var(--bs-primary);
	color: var(--bs-white);
	border: none;
	padding: 14px 36px;
	border-radius: var(--bs-radius);
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: all var(--bs-transition);
	width: 100%;
}
.bs-rfq-form .wpforms-submit:hover {
	background-color: var(--bs-primary-dark);
}

/* Form feedback messages */
.bs-form-message {
	padding: 14px 20px;
	border-radius: var(--bs-radius);
	margin-bottom: 24px;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.5;
}
/* Form feedback messages — monochrome only (brand rule: no red/green accents).
   Success/error are distinguished by icon (✓/✕ in the template) + weight,
   not by color. */
.bs-form-message {
	padding: 14px 20px;
	border-radius: var(--bs-radius);
	margin-bottom: 24px;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.5;
}
.bs-form-message__icon {
	margin-inline-end: 8px;
	margin-right: 8px;
	font-weight: 700;
}
.bs-form-message--success {
	background: var(--bs-primary-light);
	color: var(--bs-text);
}
.bs-form-message--error {
	background: #f0f0f0;
	color: var(--bs-text);
	font-weight: 600;
}

/* Form field error states — dark gray border, monochrome */
.bs-form-error input,
.bs-form-error select,
.bs-form-error textarea {
	border-color: var(--bs-primary-dark);
}
.bs-form-error__text {
	display: block;
	color: var(--bs-primary-dark);
	font-size: 13px;
	margin-top: 4px;
}

.bs-rfq-form__specs-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 768px) {
	.bs-rfq-form__specs-row {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Contact Page
   ========================================================================== */
.bs-contact-info {
	background: var(--bs-black);
	color: var(--bs-white);
	border-radius: var(--bs-radius-lg);
	padding: 32px;
}

.bs-contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 20px;
}

.bs-contact-info__icon {
	flex-shrink: 0;
	width: 20px;
	margin-top: 2px;
	color: var(--bs-primary);
}

.bs-contact-info__label {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 4px;
}

.bs-contact-info__value {
	font-size: 15px;
	color: var(--bs-white);
}

/* ==========================================================================
   CTA Banner
   ========================================================================== */
.bs-cta-banner {
	background: linear-gradient(160deg, var(--bs-primary) 0%, var(--bs-primary-dark) 100%);
	color: var(--bs-white);
	padding: 64px 0;
	text-align: center;
}

.bs-cta-banner__title {
	font-size: clamp(24px, 3.5vw, 36px);
	font-weight: 700;
	color: var(--bs-white);
	margin-bottom: 12px;
}

.bs-cta-banner__text {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 28px;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background-color: var(--bs-black) !important;
	color: rgba(255, 255, 255, 0.7);
	padding: 60px 0 30px;
}

.site-footer a {
	color: rgba(255, 255, 255, 0.7);
}
.site-footer a:hover {
	color: var(--bs-primary);
}

.bs-footer__title {
	font-size: 16px;
	font-weight: 600;
	color: var(--bs-white);
	margin-bottom: 16px;
}

.bs-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.bs-footer__list li {
	margin-bottom: 8px;
	font-size: 14px;
}

.bs-footer__bottom {
	border-top: 1px solid var(--bs-line-strong);
	margin-top: 48px;
	padding-top: 24px;
	text-align: center;
	font-family: var(--bs-font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bs-gray-2);
}

/* ==========================================================================
   GDPR Cookie Banner
   ========================================================================== */
.bs-cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--bs-black);
	color: var(--bs-white);
	padding: 16px 24px;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 14px;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}

.bs-cookie-banner__text a {
	/* var(--bs-primary) #333 on the black banner is only 1.49:1 — use a light
	   color that clears WCAG AA (4.5:1) on #111111. */
	color: #d6d6d6;
	text-decoration: underline;
}
.bs-cookie-banner__text a:hover { color: var(--bs-white); }

.bs-cookie-banner__btn {
	padding: 8px 20px;
	border-radius: var(--bs-radius-sm);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	border: none;
}

.bs-cookie-banner__btn--accept {
	/* Astra's global button rule forces --ast-global-color-0 (blue) via
	   background-color, which wins over the plain `background` shorthand.
	   Keep the consent button monochrome (DESIGN.md: solid-white primary on
	   dark, no colour accents) with !important. */
	background: var(--bs-white);
	background-color: var(--bs-white) !important;
	color: var(--bs-black);
	border: 1px solid var(--bs-white);
}
.bs-cookie-banner__btn--accept:hover,
.bs-cookie-banner__btn--accept:focus,
.bs-cookie-banner__btn--accept:focus-visible {
	background-color: var(--bs-black) !important;
	color: var(--bs-white);
	/* Astra's button:focus paints a blue border/outline — force monochrome. */
	border-color: var(--bs-white) !important;
	outline: none;
}

.bs-cookie-banner__btn--reject {
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */
.bs-faq-item {
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	margin-bottom: 12px;
	overflow: hidden;
}

.bs-faq-item__question {
	padding: 20px 24px;
	font-weight: 600;
	font-size: 16px;
	color: var(--bs-black);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--bs-white);
	transition: background var(--bs-transition);
}
.bs-faq-item__question:hover {
	background: var(--bs-surface);
}
.bs-faq-item__question::after {
	content: '+';
	font-size: 20px;
	color: var(--bs-primary);
}

.bs-faq-item__answer {
	padding: 0 24px 20px;
	font-size: 15px;
	color: var(--bs-text);
	line-height: 1.7;
	display: none;
}

.bs-faq-item--open .bs-faq-item__question {
	background: var(--bs-primary-light);
}
.bs-faq-item--open .bs-faq-item__question::after {
	content: '−';
}
.bs-faq-item--open .bs-faq-item__answer {
	display: block;
}

/* ==========================================================================
   (Float-contact removed 2026-09-07 — operator decision: delete the three
   circular floating WhatsApp/Skype/Email buttons. See git history.)
   ========================================================================== */
/* Astra hardcodes a second skip link in header.php; the child theme's styled
   .bs-skip-link is the intended one. Hide Astra's to avoid duplicate tab stops. */
a.skip-link { display: none !important; }
.bs-skip-link { display: block !important; }

/* Astra's built-in scroll-to-top defaults to a blue (#046bd2) that breaks the
   monochrome design — restyle it black. Float-contact is gone, so it returns
   to the standard bottom offset. */
#ast-scroll-top {
	background-color: var(--bs-black) !important;
	color: var(--bs-white) !important;
	bottom: 30px !important;
	right: 30px !important;
	border-radius: 4px;
}
#ast-scroll-top .ast-icon.icon-arrow svg {
	fill: var(--bs-white);
}
@media (max-width: 921px) {
	#ast-scroll-top { bottom: 30px !important; }
}

/* ==========================================================================
   Resources / Blog
   ========================================================================== */
.bs-resource-card {
	background: var(--bs-white);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius-lg);
	padding: 24px;
	transition: all var(--bs-transition);
}

.bs-resource-card:hover {
	box-shadow: var(--bs-shadow-md);
}

.bs-resource-card__category {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bs-primary);
	margin-bottom: 8px;
}

.bs-resource-card__title {
	font-size: 18px;
	font-weight: 600;
	color: var(--bs-black);
	margin-bottom: 8px;
}

.bs-resource-card__date {
	font-size: 13px;
	color: var(--bs-text-muted);
}

.bs-resource-card__download {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: var(--bs-surface);
	border-radius: var(--bs-radius-sm);
	font-size: 13px;
	font-weight: 600;
	color: var(--bs-primary);
	text-decoration: none;
	transition: background var(--bs-transition);
}
.bs-resource-card__download:hover {
	background: var(--bs-primary-light);
}

/* ==========================================================================
   About Page
   ========================================================================== */
.bs-about-timeline {
	position: relative;
	padding-left: 32px;
	border-left: 3px solid var(--bs-primary);
}

.bs-about-timeline__item {
	margin-bottom: 28px;
	position: relative;
}

.bs-about-timeline__item::before {
	content: '';
	position: absolute;
	left: -41px;
	top: 4px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--bs-primary);
	border: 3px solid var(--bs-white);
	box-shadow: 0 0 0 3px var(--bs-primary);
}

.bs-about-timeline__year {
	font-size: 14px;
	font-weight: 700;
	color: var(--bs-primary);
	margin-bottom: 4px;
}

/* ==========================================================================
   404 Page
   ========================================================================== */
.bs-404 {
	text-align: center;
	padding: 120px 0;
}

.bs-404__code {
	font-size: clamp(80px, 15vw, 160px);
	font-weight: 800;
	color: var(--bs-primary);
	line-height: 1;
	margin-bottom: 16px;
}

.bs-404__message {
	font-size: 20px;
	color: var(--bs-text-muted);
	margin-bottom: 32px;
}

/* ==========================================================================
   Hero Layout
   ========================================================================== */
.bs-hero__inner {
	display: flex;
	align-items: center;
	gap: 48px;
}
.bs-hero__content {
	flex: 1;
	max-width: 640px;
}
/* When no image: center the content column */
.bs-hero__inner:has(.bs-hero__content:only-child) {
	justify-content: center;
	text-align: center;
}
.bs-hero__inner:has(.bs-hero__content:only-child) .bs-hero__actions {
	justify-content: center;
}
.bs-hero__inner:has(.bs-hero__content:only-child) .bs-hero__subtitle {
	margin-left: auto;
	margin-right: auto;
}
.bs-hero__media   { flex: 1; text-align: right; }
.bs-hero__media img { max-width: 100%; height: auto; }
.bs-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }

/* ==========================================================================
   Footer Widgets
   ========================================================================== */
.bs-footer-widgets {
	background: var(--bs-black);
	padding: 72px 0 44px;
	color: var(--bs-white);
}
/* v19 footer refinement: column headings become mono labels with a hairline
   (v17 industrial language); the brand column keeps the display face. */
.bs-footer-widgets a { color: rgba(255,255,255,0.85); text-decoration: none; transition: color .2s var(--bs-ease-out); }
.bs-footer-widgets a:hover { opacity: 1; color: var(--bs-white); }
.bs-footer-widgets .bs-footer__title {
	font-family: var(--bs-font-mono);
	font-size: 11px; font-weight: 500;
	letter-spacing: .28em; text-transform: uppercase;
	color: var(--bs-gray-2);
	margin-bottom: 18px; padding-bottom: 12px;
	border-bottom: 1px solid var(--bs-line-strong);
}
.bs-footer-widgets .bs-footer-col:first-child .bs-footer__title {
	font-family: var(--bs-font-display);
	font-size: 18px; font-weight: 700;
	letter-spacing: .01em; text-transform: uppercase;
	color: var(--bs-white);
	border-bottom: 0; padding-bottom: 0; margin-bottom: 12px;
}
.bs-footer-widgets .bs-footer__list li { color: rgba(255,255,255,0.85); font-size: 13.5px; }
.bs-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.2fr;
	gap: 48px;
}
.bs-footer-icon {
	display: inline-block;
	vertical-align: middle;
	margin-right: 8px;
	margin-inline-end: 8px;
	width: 16px;
	height: 16px;
}
.bs-footer-col .bs-footer__list li {
	display: flex;
	align-items: center;
	gap: 4px;
}
.bs-footer-tagline {
	font-size: 14px;
	color: rgba(255,255,255,0.75);
	line-height: 1.6;
	margin-top: 12px;
}
.bs-footer-logo img { max-height: 50px; }

/* ==========================================================================
   Language Switcher
   ========================================================================== */
/* ─── Language Switch Bar (outside nav menu, in header) ─── */
.bs-lang-switch-bar {
	position: fixed;
	top: 12px;
	right: 24px;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 0;
	padding: 0 10px;
	height: 38px;
	background: rgba(17,17,17,0.9); /* var(--bs-black) at 90% opacity */
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 5px;
	overflow: hidden;
}
.bs-lang-switch-bar:hover { border-color: rgba(255,255,255,0.3); }
/* On mobile the fixed bar overlaps the hamburger trigger — drop it below the header. */
@media (max-width: 921px) {
	.bs-lang-switch-bar { top: calc(72px + 8px); right: 16px; }
	/* The open mobile menu panel slides in under the header; push its items down
	   so the fixed bar never covers the first menu link. */
	#ast-hf-mobile-menu { padding-top: 36px; }
}
/* The bar occupies the top-right corner; on desktop the right-aligned menu would
   otherwise run underneath it and cover FAQ/Contact. Reserve the corner. */
@media (min-width: 922px) {
	#ast-hf-menu-1.main-header-menu { padding-inline-end: 140px; padding-right: 140px; }
}
/* v19: at 922–1150px the 8-item menu wrapped to two rows (nav grew to 160px
   tall). Compress link size/spacing through the mid breakpoints so the header
   stays a single row down to 922px. */
@media (max-width: 1150px) and (min-width: 922px) {
	.main-header-menu > .menu-item > .menu-link {
		font-size: 13px;
		padding-left: 8px;
		padding-right: 8px;
		padding-inline: 8px;
	}
	#ast-hf-menu-1.main-header-menu { padding-inline-end: 110px; padding-right: 110px; }
}
@media (max-width: 1250px) and (min-width: 1151px) {
	.main-header-menu > .menu-item > .menu-link { font-size: 14px; padding-left: 12px; padding-right: 12px; padding-inline: 12px; }
	#ast-hf-menu-1.main-header-menu { padding-inline-end: 130px; padding-right: 130px; }
}
.bs-lang-switcher__globe {
	display: inline-flex;
	align-items: center;
	color: rgba(255,255,255,0.7);
	margin-right: 2px;
	margin-inline-end: 2px;
}
.bs-lang-switcher__globe-icon { width: 15px; height: 15px; }
.bs-lang-switcher__select {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	background: transparent;
	color: rgba(255,255,255,0.9);
	font-family: var(--bs-font, -apple-system, sans-serif);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	height: 36px;
	padding: 0 26px 0 2px;
	padding-inline-end: 26px;
	padding-inline-start: 2px;
	cursor: pointer;
}
.bs-lang-switcher__select option {
	color: #111;
	background: #fff;
}
.bs-lang-switcher__select:focus-visible {
	outline: 1px solid rgba(255,255,255,0.6);
	outline-offset: 2px;
}
.bs-lang-switcher__chevron {
	position: absolute;
	right: 8px;
	inset-inline-end: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	color: rgba(255,255,255,0.6);
	pointer-events: none;
}
.bs-header-cta {
	margin-left: 8px;
	margin-inline-start: 8px;
	white-space: nowrap;
}

/* ==========================================================================
   Product Detail
   ========================================================================== */
.bs-product-header-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}
.bs-product-detail__gallery {
	border-radius: var(--bs-radius-lg);
	overflow: hidden;
}
.bs-product-detail__main-image {
	width: 100%;
	height: auto;
	display: block;
}
.bs-product-detail__meta {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.bs-product-detail__title {
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 700;
	color: var(--bs-black);
	margin-bottom: 16px;
}
.bs-product-detail__quick-specs {
	display: flex;
	gap: 20px;
	font-size: 15px;
	color: var(--bs-text-muted);
	margin-bottom: 20px;
}
.bs-product-detail__description {
	font-size: 16px;
	line-height: 1.7;
	color: var(--bs-text);
}

/* ==========================================================================
   Badges & Tags
   ========================================================================== */
.bs-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
}
.bs-badge--category {
	background: var(--bs-primary-light);
	color: var(--bs-primary);
}
.bs-badge--custom {
	background: #fef2f2;
	color: var(--bs-primary);
}
.bs-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bs-tag {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--bs-border);
	border-radius: 20px;
	font-size: 13px;
	color: var(--bs-text);
	text-decoration: none;
	transition: all var(--bs-transition);
}
.bs-tag:hover {
	border-color: var(--bs-primary);
	color: var(--bs-primary);
	background: var(--bs-primary-light);
}

/* ==========================================================================
   Product Card Extras
   ========================================================================== */
.bs-product-card__placeholder {
	width: 100%;
	height: 200px;
	background: var(--bs-surface);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--bs-text-muted);
	gap: 8px;
	font-size: 14px;
}
.bs-product-card__placeholder-icon {
	width: 32px;
	height: 32px;
	opacity: 0.3;
}
.bs-product-card__category {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bs-primary);
	margin-bottom: 4px;
}
.bs-product-card__specs-inline {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.bs-product-card__spec {
	font-size: 12px;
	color: var(--bs-text-muted);
	background: var(--bs-surface);
	padding: 2px 8px;
	border-radius: var(--bs-radius-sm);
	font-family: var(--bs-font-mono);
}
.bs-product-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 12px;
}

/* ==========================================================================
   Category Hero
   ========================================================================== */
.bs-category-hero {
	background: var(--bs-black);
	color: var(--bs-white);
	padding: 60px 0;
}
.bs-category-hero__title {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	color: var(--bs-white);
	margin-bottom: 8px;
}
.bs-category-hero__desc {
	font-size: 18px;
	color: rgba(255,255,255,0.7);
	max-width: 640px;
	line-height: 1.6;
}

/* ==========================================================================
   Solution Detail Cards
   ========================================================================== */
.bs-solution-detail {
	background: var(--bs-white);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius-lg);
	margin-bottom: 24px;
	overflow: hidden;
}
.bs-solution-detail__header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px 28px;
	background: var(--bs-surface);
	border-bottom: 1px solid var(--bs-border);
}
.bs-solution-detail__icon { font-size: 28px; }
.bs-solution-detail__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--bs-black);
	margin: 0;
}
.bs-solution-detail__body {
	padding: 24px 28px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--bs-text);
}

/* ==========================================================================
   About Page Extras
   ========================================================================== */
.bs-about-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
.bs-about-content h2 {
	font-size: clamp(24px,3vw,32px);
	color: var(--bs-black);
	margin-bottom: 20px;
}
.bs-about-content p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--bs-text);
	margin-bottom: 16px;
}

/* ==========================================================================
   Contact Grid
   ========================================================================== */
.bs-contact-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 40px;
	align-items: start;
}

/* ==========================================================================
   Case Study Detail
   ========================================================================== */
.bs-case-detail-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 40px;
}
.bs-case-detail__hero-image {
	margin-bottom: 24px;
	border-radius: var(--bs-radius-lg);
	overflow: hidden;
}
.bs-case-detail__body {
	font-size: 16px;
	line-height: 1.8;
	color: var(--bs-text);
}
.bs-case-summary-card {
	background: var(--bs-surface);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius-lg);
	padding: 24px;
	position: sticky;
	top: 80px;
}
.bs-case-summary__item {
	margin-bottom: 20px;
}
.bs-case-summary__item h4 {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bs-primary);
	margin-bottom: 4px;
}
.bs-case-summary__item p {
	font-size: 14px;
	color: var(--bs-text);
	margin: 0;
}

/* ==========================================================================
   Search Form
   ========================================================================== */
.bs-search-form {
	max-width: 560px;
}
.bs-search-form__inner {
	display: flex;
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	overflow: hidden;
	transition: border-color var(--bs-transition);
}
.bs-search-form__inner:focus-within {
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 3px rgba(17,17,17,0.08);
}
.bs-search-form__input {
	flex: 1;
	padding: 12px 16px;
	border: none;
	font-size: 15px;
	font-family: var(--bs-font);
	color: var(--bs-text);
	outline: none;
}
.bs-search-form__btn {
	padding: 12px 18px;
	background: var(--bs-primary);
	color: var(--bs-white);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
}
.bs-search-form__btn:hover { background: var(--bs-primary-dark); }

/* ==========================================================================
   Subcategory Nav & Filter
   ========================================================================== */
.bs-subcategory-nav {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.bs-product-results-count {
	font-size: 15px;
	color: var(--bs-text-muted);
}
.bs-empty-state {
	text-align: center;
	padding: 48px 0;
}
.bs-empty-state__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--bs-black);
	margin: 0 auto 12px;
	max-width: 560px;
}
.bs-empty-state p {
	margin-bottom: 16px;
	color: var(--bs-text-muted);
	font-size: 16px;
}
.bs-empty-state .bs-btn {
	margin-top: 8px;
}

/* ==========================================================================
   Product Filter Panel
   ========================================================================== */
.bs-product-filter {
	margin-bottom: 24px;
}
.bs-product-filter__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	background: var(--bs-white);
	font-size: 14px;
	font-weight: 500;
	color: var(--bs-text);
	cursor: pointer;
	font-family: var(--bs-font);
	transition: border-color var(--bs-transition);
}
.bs-product-filter__toggle:hover { border-color: var(--bs-primary); }
.bs-product-filter__active-count {
	color: var(--bs-primary);
	font-weight: 600;
}
.bs-product-filter__active-count:empty::before { content: ''; }
.bs-product-filter__panel {
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius-lg);
	background: var(--bs-white);
	padding: 20px;
	margin-top: 12px;
	box-shadow: var(--bs-shadow-md);
}
.bs-filter-dimension {
	border: none;
	padding: 0;
	margin: 0 0 12px;
}
.bs-filter-dimension__toggle {
	width: 100%;
	text-align: start;
	padding: 8px 0;
	border: none;
	background: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--bs-black);
	cursor: pointer;
	font-family: var(--bs-font);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.bs-filter-dimension__toggle::after {
	content: '▾';
	font-size: 12px;
	transition: transform var(--bs-transition);
}
.bs-filter-dimension.is-expanded .bs-filter-dimension__toggle::after {
	transform: rotate(180deg);
}
.bs-filter-dimension__options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bs-surface);
}
.bs-filter-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border: 1px solid var(--bs-border);
	border-radius: 20px;
	font-size: 12px;
	cursor: pointer;
	transition: all var(--bs-transition);
	user-select: none;
}
.bs-filter-tag:hover { border-color: var(--bs-primary); }
.bs-filter-tag input[type="checkbox"] {
	accent-color: var(--bs-primary);
}
.bs-filter-tag:has(input:checked) {
	background: var(--bs-primary-light);
	border-color: var(--bs-primary);
	color: var(--bs-primary);
	font-weight: 600;
}
.bs-product-filter__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	flex-wrap: wrap;
}
.bs-product-filter__results-count {
	font-size: 13px;
	color: var(--bs-text-muted);
	margin-left: auto;
	margin-inline-start: auto;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.bs-pagination {
	padding: 32px 0;
}
.bs-pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 6px;
}
.bs-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius-sm);
	font-size: 14px;
	color: var(--bs-text);
	text-decoration: none;
	transition: all var(--bs-transition);
}
.bs-pagination .page-numbers.current {
	background: var(--bs-primary);
	border-color: var(--bs-primary);
	color: var(--bs-white);
	font-weight: 600;
}
.bs-pagination .page-numbers:hover:not(.current) {
	border-color: var(--bs-primary);
	color: var(--bs-primary);
}

/* ==========================================================================
   Specs Block (Product Detail)
   ========================================================================== */
.bs-specs-block {
	background: var(--bs-white);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius-lg);
	padding: 32px;
	box-shadow: var(--bs-shadow-sm);
}
.bs-specs-block__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--bs-black);
	margin-bottom: 20px;
}
.bs-specs-custom-note {
	margin-top: 24px;
	padding: 20px;
	background: #f8f8f8;
	border: 1px solid #ccc;
	border-radius: var(--bs-radius);
}
/* h3 since 2026-09-26 (was h4 — this container sits under an h2, so h4 skipped a
   heading level). Keep h4 in the selector so legacy markup is still styled. */
.bs-specs-custom-note h3,
.bs-specs-custom-note h4 {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	margin-bottom: 8px;
}
.bs-specs-custom-note p {
	font-size: 14px;
	color: #666;
	margin-bottom: 12px;
	line-height: 1.5;
}

/* ==========================================================================
   Accessibility: Skip Link
   ========================================================================== */
.bs-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 99999;
	padding: 10px 20px;
	background: var(--bs-primary);
	color: var(--bs-white);
	font-weight: 600;
	font-size: 14px;
	border-radius: var(--bs-radius-sm);
	text-decoration: none;
	transition: top 0.1s;
}
.bs-skip-link:focus {
	top: 8px;
}

/* ==========================================================================
   Privacy Content
   ========================================================================== */
.bs-privacy-content {
	font-size: 16px;
	line-height: 1.7;
	color: var(--bs-text);
}
.bs-privacy-content h2 {
	font-size: 22px;
	color: var(--bs-black);
	margin: 32px 0 12px;
}
.bs-privacy-content h3 {
	font-size: 18px;
	color: var(--bs-black);
	margin: 24px 0 8px;
}
.bs-privacy-content p { margin-bottom: 12px; }

/* ==========================================================================
   Footer Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.bs-footer-grid { grid-template-columns: 1fr 1fr; }
	.bs-product-header-grid { grid-template-columns: 1fr; }
	.bs-contact-grid { grid-template-columns: 1fr; }
	.bs-case-detail-grid { grid-template-columns: 1fr; }
	.bs-case-summary-card { position: static; }
}
@media (max-width: 768px) {
	.bs-footer-grid { grid-template-columns: 1fr; }
	.bs-hero__inner { flex-direction: column; }
	.bs-hero__media { text-align: center; }
	.bs-about-grid { grid-template-columns: 1fr; }
	.bs-product-detail__quick-specs { flex-direction: column; gap: 4px; }
}
@media (max-width: 480px) {
	.bs-product-detail__meta { flex-direction: column; }
	.bs-hero__actions { flex-direction: column; }
	.bs-tag-cloud { gap: 4px; }
	.bs-tag { font-size: 12px; padding: 4px 10px; }
	.bs-specs-block { padding: 20px; }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.bs-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 32px;
}

.bs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.bs-text-center { text-align: center; }
.bs-mb-8  { margin-bottom: 8px; }
.bs-mb-16 { margin-bottom: 16px; }
.bs-mb-24 { margin-bottom: 24px; }
.bs-mb-32 { margin-bottom: 32px; }
.bs-mb-48 { margin-bottom: 48px; }

/* ==========================================================================
   Full-Width Breakout (override Astra container)
   ========================================================================== */

@media (max-width: 1024px) {
	.bs-section {
		padding: 60px 0;
	}

	.bs-hero {
		padding: 80px 0 60px;
	}

	.bs-product-grid {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	}
}

@media (max-width: 768px) {
	.bs-section {
		padding: 48px 0;
	}

	.bs-hero {
		padding: 60px 0 40px;
		text-align: center;
	}

	.bs-hero__subtitle {
		margin-left: auto;
		margin-right: auto;
	}

	.bs-hero__image {
		margin-top: 32px;
	}

	.bs-product-grid {
		grid-template-columns: 1fr;
	}

	.bs-solution-grid {
		grid-template-columns: 1fr;
	}

	.bs-cookie-banner {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}

	.bs-trust-bar__grid {
		gap: 24px;
	}

	.bs-rfq-form {
		padding: 24px;
	}
}

@media (max-width: 480px) {
	.bs-hero__title {
		font-size: 30px;
	}

	.bs-section__title {
		font-size: 24px;
	}

	.bs-btn--lg {
		padding: 14px 28px;
		font-size: 16px;
	}

	.bs-trust-strip__inner { flex-direction: column; gap: 4px; }
	.bs-trust-strip__dot { display: none; }
}

/* ==========================================================================
   MONOCHROME HOMEPAGE — Overrides + New Components (v2)
   ========================================================================== */

/* Hero — monochrome purity */
.bs-hero {
	background: var(--bs-black);
	padding: 120px 0 100px;
}
/* .bs-hero::before grid texture is defined once above (v1 section) —
   the redundant v2 background override was merged into it. */
.bs-hero__inner { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.bs-hero__content { max-width: none; }
.bs-hero__overline {
	font-size: 12px; font-weight: 500; text-transform: uppercase;
	letter-spacing: 0.15em; color: rgba(255,255,255,0.6); margin-bottom: 20px;
}
.bs-hero__title {
	font-size: clamp(40px, 6vw, 72px); font-weight: 700;
	line-height: 1.08; color: var(--bs-white); margin-bottom: 24px;
	letter-spacing: -0.03em;
}
.bs-hero__title span { font-weight: 300; color: var(--bs-white); } /* keep accent word readable on black hero */
.bs-hero__subtitle { font-size: 18px; color: rgba(255,255,255,0.55); max-width: 520px; margin-bottom: 36px; line-height: 1.7; }
@media (max-width: 768px) {
	.bs-hero { padding: 80px 0 64px; }
	.bs-hero__inner { padding: 0 20px; }
	.bs-hero__title { font-size: 36px; }
}

/* Button variants */
.bs-btn--outline-dark {
	background: transparent; color: rgba(255,255,255,0.7);
	border: 1px solid rgba(255,255,255,0.3);
}
.bs-btn--outline-dark:hover { border-color: var(--bs-white); color: var(--bs-white); }

/* Trust Strip */
.bs-trust-strip {
	border-bottom: 1px solid var(--bs-border);
	background: var(--bs-white);
}
.bs-trust-strip__inner {
	display: flex; justify-content: center; align-items: center; gap: 16px;
	padding: 18px 0; font-size: 13px; color: var(--bs-text-muted);
	font-weight: 500; letter-spacing: 0.04em; flex-wrap: wrap;
}
.bs-trust-strip__dot { color: #ccc; }

/* Section Header */
.bs-section-header { text-align: center; margin-bottom: 48px; }
.bs-section-header__label {
	font-size: 11px; font-weight: 600; text-transform: uppercase;
	letter-spacing: 0.12em; color: var(--bs-text-muted); margin-bottom: 12px;
}
/* Centered under .bs-section-header (templates that want a left title pass an
   inline text-align:start override, e.g. product-related / contact). */
.bs-section-header .bs-section__title { text-align: center; }

/* Section Footer */
.bs-section-footer { text-align: center; margin-top: 40px; }
.bs-link-arrow { font-size: 15px; font-weight: 600; color: var(--bs-black); text-decoration: none; }
.bs-link-arrow:hover { opacity: 0.6; }

/* Category Grid */
.bs-cat-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
	background: var(--bs-border); border: 1px solid var(--bs-border);
}
@media (max-width: 768px) { .bs-cat-grid { grid-template-columns: 1fr; } }
.bs-cat-card {
	display: flex; flex-direction: column; justify-content: flex-end;
	background: var(--bs-white); padding: 32px 28px; min-height: 180px;
	text-decoration: none; transition: background var(--bs-transition);
}
.bs-cat-card:hover { background: #fafafa; }
.bs-cat-card__arrow { font-size: 20px; color: var(--bs-black); margin-bottom: auto; }
.bs-cat-card__title { font-size: 20px; font-weight: 700; color: var(--bs-black); margin: 0 0 4px; }
.bs-cat-card__count { font-size: 13px; color: var(--bs-text-muted); }
@media (max-width: 768px) { .bs-cat-grid { grid-template-columns: 1fr; } }

/* Product Card — refreshed */
.bs-product-card {
	background: var(--bs-white);
	border: 1px solid var(--bs-border);
	border-radius: 0;
	padding: 0; text-align: start; overflow: hidden;
	transition: box-shadow var(--bs-transition);
}
.bs-product-card:hover { box-shadow: var(--bs-shadow-lg); border-color: var(--bs-black); }
.bs-product-card__image-link { display: block; }
.bs-product-card__image {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.bs-product-card__placeholder {
	width: 100%; aspect-ratio: 4 / 3; background: #eee;
}
.bs-product-card__body { padding: 24px; }
.bs-product-card__title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.bs-product-card__title a { color: var(--bs-black); text-decoration: none; }
.bs-product-card__title a:hover { opacity: 0.6; }
.bs-product-card__excerpt { font-size: 14px; color: var(--bs-text-muted); line-height: 1.5; margin-bottom: 12px; }
.bs-product-card__meta { font-size: 12px; color: var(--bs-text-muted); }
.bs-product-card__meta .bs-sep { margin: 0 8px; color: #ccc; }

/* ==========================================================================
   Product Category Section (grouped archive)
   ========================================================================== */
.bs-product-category-section {
	margin-bottom: 72px;
	margin-block-end: 72px;
}
.bs-product-category-section:last-child {
	margin-bottom: 0;
	margin-block-end: 0;
}

.bs-product-category-heading {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	color: var(--bs-black);
	margin: 0 0 12px;
	padding: 0;
	line-height: 1.2;
}

.bs-product-category-divider {
	border: none;
	border-top: 1px solid var(--bs-border);
	margin: 0 0 40px;
	margin-block-end: 40px;
}

/* Industry Grid */
.bs-industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bs-border); border: 1px solid var(--bs-border); }
.bs-industry-item {
	display: flex; align-items: center; justify-content: space-between;
	background: var(--bs-white); padding: 28px 32px; text-decoration: none;
	transition: background var(--bs-transition);
}
.bs-industry-item:hover { background: #fafafa; }
.bs-industry-item__text { font-size: 16px; font-weight: 500; color: var(--bs-black); }
.bs-industry-item__arrow { font-size: 18px; color: var(--bs-text-muted); }
@media (max-width: 768px) { .bs-industry-grid { grid-template-columns: 1fr; } }

/* CTA Strip */
.bs-cta-strip {
	background: var(--bs-black); color: var(--bs-white);
	padding: 72px 0;
}
.bs-cta-strip__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.bs-cta-strip__title { font-size: 28px; font-weight: 700; color: var(--bs-white); margin-bottom: 8px; }
.bs-cta-strip__text p { font-size: 16px; color: rgba(255,255,255,0.55); margin: 0; }
@media (max-width: 768px) {
	.bs-cta-strip__inner { flex-direction: column; text-align: center; }
}

/* Empty state */
.bs-empty { text-align: center; color: var(--bs-text-muted); padding: 40px 0; }
.bs-empty-link { color: var(--bs-black); font-weight: 600; }

/* Compact Hero (inner pages) */
.bs-hero--compact { padding: 72px 0 64px; }
/* Compact hero title size — was inline style=clamp(32px,5vw,56px) across ~9
   templates; centralized here (matches the home hero's clamp but with a
   smaller floor so inner-page heroes read as secondary). */
.bs-hero--compact .bs-hero__title { font-size: clamp(32px, 5vw, 56px); }
@media (max-width: 768px) { .bs-hero--compact { padding: 56px 0 48px; } }

/* Prose (About page content + technical articles) */
.bs-prose { font-size: 16px; line-height: 1.8; color: var(--bs-text); }
.bs-prose p { margin-bottom: 20px; }
.bs-prose h2 { font-size: 24px; font-weight: 700; color: var(--bs-black); margin: 40px 0 16px; }
.bs-prose h3 { font-size: 19px; font-weight: 700; color: var(--bs-black); margin: 28px 0 12px; }
.bs-prose ul, .bs-prose ol { margin: 0 0 20px; padding-left: 24px; padding-inline-start: 24px; }
.bs-prose li { margin-bottom: 8px; }
.bs-prose strong { color: var(--bs-black); font-weight: 700; }
.bs-prose a { color: var(--bs-primary-dark); text-decoration: underline; }
.bs-prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.bs-prose th, .bs-prose td { border: 1px solid var(--bs-border); padding: 10px 14px; text-align: start; vertical-align: top; }
.bs-prose th { background: var(--bs-surface); font-weight: 700; color: var(--bs-black); }
.bs-prose blockquote { margin: 0 0 20px; padding-left: 20px; padding-inline-start: 20px; border-left: 3px solid var(--bs-border); border-inline-start: 3px solid var(--bs-border); color: var(--bs-text-muted); }

/* Timeline */
.bs-timeline { position: relative; padding-left: 0; padding-inline-start: 0; }
.bs-timeline__item {
	display: grid; grid-template-columns: 100px 1fr; gap: 32px;
	padding-bottom: 32px; position: relative;
}
.bs-timeline__item::before {
	content: ''; position: absolute; left: 47px; top: 10px;
	bottom: 0; width: 1px; background: var(--bs-border);
}
.bs-timeline__item:last-child::before { display: none; }
.bs-timeline__year { font-size: 18px; font-weight: 700; color: var(--bs-black); text-align: right; }
.bs-timeline__content p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--bs-text); }
@media (max-width: 600px) {
	.bs-timeline__item { grid-template-columns: 70px 1fr; gap: 16px; }
}

/* Icon Cards Grid */
.bs-icon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--bs-border); border: 1px solid var(--bs-border); }
.bs-icon-card { background: var(--bs-white); padding: 32px; }
.bs-icon-card h3 { font-size: 18px; font-weight: 700; color: var(--bs-black); margin-bottom: 8px; }
.bs-icon-card p { font-size: 14px; line-height: 1.6; color: var(--bs-text-muted); margin: 0; }
@media (max-width: 768px) { .bs-icon-grid { grid-template-columns: 1fr; } }

/* Cert Grid */
.bs-cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.bs-cert-card { font-size: 20px; font-weight: 700; color: var(--bs-black); padding: 32px 16px; border: 1px solid var(--bs-border); }
.bs-cert-card small { display: block; font-size: 13px; font-weight: 400; color: var(--bs-text-muted); margin-top: 6px; }
.bs-cert-card__check { display: block; font-size: 28px; margin-bottom: 8px; color: var(--bs-text-muted); }
@media (max-width: 768px) { .bs-cert-grid { grid-template-columns: 1fr; } }

/* Form Row */
.bs-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .bs-form-row { grid-template-columns: 1fr; } }

/* Contact Info — monochrome */
.bs-contact-info {
	background: var(--bs-black); color: var(--bs-white);
	border-radius: 0; padding: 32px;
}
.bs-contact-info h3 { font-size: 16px; font-weight: 700; color: var(--bs-white); }
.bs-contact-info__item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.bs-contact-info__icon { flex-shrink: 0; width: 18px; margin-top: 2px; color: rgba(255,255,255,0.5); }
.bs-contact-info__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); margin-bottom: 3px; }
.bs-contact-info__value { font-size: 15px; color: var(--bs-white); }
.bs-contact-info p { font-size: 14px; color: rgba(255,255,255,0.6); margin: 4px 0; }
.bs-contact-info p strong { color: rgba(255,255,255,0.9); }

/* RFQ Form — monochrome */
.bs-rfq-form { background: var(--bs-white); border: 1px solid var(--bs-border); border-radius: 0; padding: 32px; }
.bs-rfq-form label { font-weight: 600; font-size: 13px; color: var(--bs-black); margin-bottom: 4px; display: block; }
.bs-rfq-form input, .bs-rfq-form select, .bs-rfq-form textarea {
	width: 100%; padding: 10px 12px; border: 1px solid var(--bs-border);
	border-radius: 0; font-family: var(--bs-font); font-size: 15px; color: var(--bs-text);
	background: var(--bs-white); transition: border-color var(--bs-transition);
}
.bs-rfq-form input:focus, .bs-rfq-form select:focus, .bs-rfq-form textarea:focus {
	outline: none; border-color: var(--bs-black);
}
.bs-rfq-form textarea { min-height: 120px; resize: vertical; }
/* File attachment (2026-09-04) — keep the native picker look, contained width */
.bs-rfq-form input[type="file"] { padding: 8px 10px; font-size: 14px; }
.bs-rfq-form input[type="file"]::file-selector-button {
	margin-inline-end: 10px; margin-right: 10px;
	padding: 7px 14px; border: 1px solid var(--bs-black);
	background: var(--bs-black); color: var(--bs-white);
	font-family: var(--bs-font); font-size: 13px; font-weight: 600; cursor: pointer;
}
.bs-rfq-form input[type="file"]:focus { outline: 2px solid var(--bs-black); outline-offset: 1px; }
.bs-form-hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--bs-text-muted); }

/* Solution Blocks */
.bs-solution-block { margin-bottom: 48px; padding-bottom: 40px; border-bottom: 1px solid var(--bs-border); }
.bs-solution-block:last-child { border-bottom: none; }
.bs-solution-block__title { font-size: 22px; font-weight: 700; color: var(--bs-black); margin-bottom: 12px; }
.bs-solution-block__desc { font-size: 15px; line-height: 1.7; color: var(--bs-text); margin-bottom: 12px; }
.bs-solution-block__pipes { font-size: 14px; color: var(--bs-text-muted); }

/* Article List */
.bs-article-list { border-top: 1px solid var(--bs-border); }
.bs-article-item { padding: 28px 0; border-bottom: 1px solid var(--bs-border); }
.bs-article-item__date { font-size: 12px; color: var(--bs-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.bs-article-item__title { font-size: 20px; font-weight: 600; margin: 6px 0 8px; }
.bs-article-item__title a { color: var(--bs-black); text-decoration: none; }
.bs-article-item__title a:hover { opacity: 0.6; }
.bs-article-item__excerpt { font-size: 14px; color: var(--bs-text-muted); line-height: 1.5; margin: 0; }

/* Download Grid */
.bs-download-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--bs-white); border: 1px solid var(--bs-border); }
.bs-download-card { background: var(--bs-white); padding: 32px; display: flex; flex-direction: column; border-right: 1px solid var(--bs-border); border-bottom: 1px solid var(--bs-border); }
.bs-download-card:nth-child(3n) { border-right: 0; }
.bs-download-card:last-child { border-bottom: 0; }
.bs-download-card__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bs-text-muted); }
.bs-download-card h3 { font-size: 18px; font-weight: 600; color: var(--bs-black); margin: 8px 0 12px; }
.bs-download-card h3 a { color: inherit; text-decoration: none; }
.bs-download-card h3 a:hover { opacity: 0.6; }
.bs-download-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; font-size: 12px; color: var(--bs-text-muted); }
.bs-download-card__type { font-weight: 600; color: var(--bs-text-muted); }
.bs-download-card__ver { font-variant-numeric: tabular-nums; }
.bs-download-card__link { font-size: 13px; font-weight: 600; color: var(--bs-black); cursor: pointer; margin-top: auto; text-decoration: none; }
.bs-download-card__link:hover { opacity: 0.6; }
.bs-download-card__link--pending { color: var(--bs-text-muted); font-weight: 500; font-style: italic; }
/* ===== Downloads: anchors + sections ===== */
.bs-download-anchors {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	padding: 14px 0;
	border-top: 1px solid var(--bs-border);
	border-bottom: 1px solid var(--bs-border);
	margin-bottom: 36px;
}
.bs-download-anchors a {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bs-black);
	text-decoration: none;
}
.bs-download-anchors a:hover { opacity: 0.6; }

.bs-download-section { margin-bottom: 48px; scroll-margin-top: 80px; }
.bs-download-section__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--bs-black);
	border-bottom: 2px solid var(--bs-black);
	padding-bottom: 8px;
	margin: 0 0 20px;
}
.bs-download-group__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--bs-black);
	border-bottom: 1px solid var(--bs-border);
	padding-bottom: 6px;
	margin: 28px 0 16px;
}
.bs-download-card__code {
	font-size: 12px;
	color: var(--bs-text-muted);
	margin-bottom: 10px;
	margin-block-end: 10px;
}
@media (max-width: 768px) { .bs-download-grid { grid-template-columns: 1fr; } }

/* FAQ — monochrome */
.bs-faq-item { border: 1px solid var(--bs-border); margin-bottom: -1px; }
.bs-faq-item__question {
	width: 100%; text-align: start; padding: 18px 24px; background: var(--bs-white);
	border: none; font-size: 16px; font-weight: 500; color: var(--bs-black);
	cursor: pointer; display: flex; justify-content: space-between; align-items: center;
	font-family: var(--bs-font);
}
.bs-faq-item__question:hover { background: #fafafa; }
.bs-faq-item__question::after { content: '+'; font-size: 18px; }
.bs-faq-item__question[aria-expanded="true"]::after { content: '−'; }
.bs-faq-item__answer { display: block; padding: 0 24px 20px; font-size: 15px; line-height: 1.7; color: var(--bs-text); }
.bs-faq-item__answer[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   PRODUCT DETAIL v22 (2026-08-27, operator approved) — multi-image gallery
   + info panel + structured content sections. Replaces the old single-image
   .bs-product-header layout (unused classes removed).
   ════════════════════════════════════════════════════════════════════════ */

/* Breadcrumb strip shares the same full-width steel band as the hero/info panel */
.bs-pd-crumbband {
	background: var(--bs-steel);
}
.bs-pd-crumbband .bs-container.bs-section--top-40 {
	background: transparent;
}
.bs-pd-crumbband .bs-breadcrumbs {
	margin-bottom: 0;
}

/* Hero — steel band: gallery (left) + info panel (right) */
.bs-pd-hero {
	background: var(--bs-steel);
	border-bottom: 1px solid var(--bs-line-light);
}
.bs-pd-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 56px;
	align-items: start;
	padding-top: 48px;
	padding-bottom: 52px;
}

/* Gallery — 1 image = static; 2+ = thumbs + arrows + counter + lightbox */
.bs-gal__stage {
	position: relative;
	background: var(--bs-white);
	border: 1px solid var(--bs-border);
}
.bs-gal__main {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	display: block;
}
.bs-gal--multi .bs-gal__main { cursor: zoom-in; }
.bs-gal__count {
	position: absolute; top: 12px; right: 12px;
	font-family: var(--bs-font-mono); font-size: 10px; letter-spacing: 0.14em;
	color: var(--bs-text-muted); background: rgba(255,255,255,0.92);
	border: 1px solid var(--bs-border); padding: 4px 9px;
}
.bs-gal__arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 38px; height: 38px;
	border: 1px solid var(--bs-border); background: rgba(255,255,255,0.94);
	color: var(--bs-black); font-size: 18px; line-height: 1;
	cursor: pointer; display: none; align-items: center; justify-content: center;
}
.bs-gal__stage:hover .bs-gal__arrow { display: inline-flex; }
.bs-gal__arrow:hover { background: var(--bs-black); color: var(--bs-white); }
.bs-gal__arrow--prev { left: 12px; }
.bs-gal__arrow--next { right: 12px; }
.bs-gal__caption {
	font-family: var(--bs-font-mono); font-size: 10px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--bs-gray-ink); margin-top: 10px;
}
.bs-gal__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 10px; margin-top: 14px;
}
.bs-gal__thumb {
	border: 2px solid transparent; background: var(--bs-white);
	padding: 0; cursor: pointer; transition: border-color var(--bs-transition);
}
.bs-gal__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; }
.bs-gal__thumb:hover { border-color: var(--bs-gray-2); }
.bs-gal__thumb.is-active { border-color: var(--bs-black); }
.bs-gal__placeholder {
	border: 1px dashed var(--bs-border); aspect-ratio: 4 / 3;
	display: flex; flex-direction: column; gap: 8px;
	align-items: center; justify-content: center;
	color: var(--bs-text-muted); font-size: 13px;
}
.bs-gal__placeholder-icon { width: 28px; height: 28px; }

/* Lightbox */
.bs-gal-lb {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(8, 8, 8, 0.88);
	display: flex; align-items: center; justify-content: center;
}
.bs-gal-lb[hidden] { display: none; }
.bs-gal-lb__img { max-width: 88vw; max-height: 82vh; object-fit: contain; }
.bs-gal-lb__close {
	position: absolute; top: 18px; right: 24px;
	background: none; border: 1px solid var(--bs-gray-2); color: var(--bs-white);
	width: 42px; height: 42px; font-size: 20px; cursor: pointer;
}
.bs-gal-lb__close:hover { border-color: var(--bs-white); }
.bs-gal-lb__prev,
.bs-gal-lb__next {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: none; border: 1px solid var(--bs-gray-2); color: var(--bs-white);
	width: 46px; height: 46px; font-size: 22px; cursor: pointer;
}
.bs-gal-lb__prev { left: 22px; }
.bs-gal-lb__next { right: 22px; }
.bs-gal-lb__prev:hover,
.bs-gal-lb__next:hover { border-color: var(--bs-white); }
.bs-gal-lb__count {
	position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
	font-family: var(--bs-font-mono); font-size: 11px; letter-spacing: 0.2em;
	color: var(--bs-gray-2);
}

/* Info panel */
.bs-pd-info__cat {
	font-size: 11px; font-weight: 600; text-transform: uppercase;
	letter-spacing: 0.08em; color: var(--bs-text-muted); text-decoration: none;
}
.bs-pd-info__cat:hover { color: var(--bs-black); }
.bs-pd-info__title {
	font-size: clamp(26px, 3.2vw, 40px); font-weight: 700;
	color: var(--bs-black); line-height: 1.12; margin: 8px 0 12px;
}
.bs-pd-info__pn {
	display: inline-block; font-family: var(--bs-font-mono);
	font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--bs-black); border: 1px solid var(--bs-black);
	background: var(--bs-white); padding: 5px 11px;
}
.bs-pd-facts {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 0 28px; margin-top: 24px;
	border-top: 1px solid var(--bs-line-light);
}
.bs-pd-fact {
	padding: 14px 0; border-bottom: 1px solid var(--bs-line-light);
}
.bs-pd-fact__k {
	display: block; font-family: var(--bs-font-mono); font-size: 9.5px;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--bs-gray-ink); margin-bottom: 5px;
}
.bs-pd-fact__v { font-size: 14px; font-weight: 500; color: var(--bs-black); line-height: 1.45; }
.bs-pd-actions {
	display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap;
	align-items: center;
}
.bs-pd-actions .bs-btn { padding: 12px 20px; font-size: 14.5px; }
/* The site-wide .bs-btn--outline-dark (v17+) is a white-on-dark variant for
   black sections; on the light hero we need a black-outline ghost button —
   higher specificity wins over the later re-definition. */
.bs-pd-actions .bs-btn--outline-dark {
	background: var(--bs-white); color: var(--bs-black);
	border: 2px solid var(--bs-black);
}
.bs-pd-actions .bs-btn--outline-dark:hover {
	background: var(--bs-black); color: var(--bs-white);
	border-color: var(--bs-black);
}
.bs-pd-actions .bs-ds-download { margin-top: 0; }
.bs-pd-meta {
	font-family: var(--bs-font-mono); font-size: 10px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--bs-gray-ink); margin-top: 18px;
}

/* ── Response promise + direct channel under the hero buttons ──────────────
   2026-09-17 (operator-approved proposal B, wording "usually within 24 hours",
   email only). Quiet mono line in the same register as the trust strip: it
   informs, it does not compete with the CTAs. */
.bs-pd-promise {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
	margin: 14px 0 0; padding-top: 12px;
	border-top: 1px solid var(--bs-border);
	font-family: var(--bs-font-mono); font-size: 11.5px; line-height: 1.5;
	letter-spacing: 0.04em; text-transform: uppercase; color: var(--bs-gray-ink);
}
.bs-pd-promise__lead { color: var(--bs-black); font-weight: 600; }
.bs-pd-promise__item {
	color: var(--bs-gray-ink); text-decoration: none;
	text-transform: none; letter-spacing: 0;
}
.bs-pd-promise a.bs-pd-promise__item:hover,
.bs-pd-promise a.bs-pd-promise__item:focus-visible {
	color: var(--bs-black); text-decoration: underline;
}

/* ── Fixed bottom action bar (mobile/tablet only) ──────────────────────────
   2026-09-17 (operator-approved proposal A). Revealed by main.js once the hero
   buttons leave the viewport; `hidden` keeps it inert without JS.

   NOTE: `position: sticky` on .bs-pd-actions does NOT work here — that element
   lives inside the short .bs-pd-info panel, so sticky cages it inside the hero
   and it scrolls away exactly like before (measured: top = −853px at
   scrollY 2000). Hence a real fixed bar.

   Physical properties first, then the logical equivalent (repo RTL rule). */
@media (max-width: 900px) {
	.bs-pd-stickybar {
		position: fixed;
		left: 0;
		right: 0;
		inset-inline: 0;
		bottom: 0;
		z-index: 40;
		display: flex;
		gap: 8px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--bs-white);
		border-top: 1px solid var(--bs-border);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
	}
	.bs-pd-stickybar[hidden] { display: none; }
	/* Compact CTA sizing: the global .bs-btn padding (14px 32px) plus the full
	   hero labels wrapped each button onto three lines inside a 179px column
	   (measured: a 142px-tall bar eating a sixth of the screen). Short labels +
	   tighter padding give a 65px bar; tap height stays above 44px. */
	.bs-pd-stickybar .bs-btn {
		flex: 1 1 0;
		justify-content: center;
		text-align: center;
		min-height: 44px;
		padding: 12px 10px;
		font-size: 13.5px;
		line-height: 1.2;
		letter-spacing: 0.04em;
		white-space: nowrap;
	}
	.bs-pd-stickybar .bs-btn--primary { order: 2; }
	body.bs-has-stickybar { padding-bottom: 72px; }
}
/* Never let the bar land inside a printed page. */
@media print {
	.bs-pd-stickybar { display: none !important; }
}

/* Section headings — title + hairline */
.bs-pd-sec-title {
	font-size: 22px; font-weight: 700; color: var(--bs-black);
	margin-bottom: 22px;
	display: flex; align-items: baseline; gap: 14px;
}
.bs-pd-sec-title::after { content: ''; flex: 1; height: 1px; background: var(--bs-border); }

/* Overview — prose (left) + At a Glance card (right) */
.bs-pd-overview { padding: 56px 0 8px; }
.bs-pd-overview__grid {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 48px; align-items: start;
}
.bs-pd-glance {
	background: var(--bs-surface); border: 1px solid var(--bs-border);
	padding: 24px 26px;
}
.bs-pd-glance__t {
	font-family: var(--bs-font-mono); font-size: 10px; letter-spacing: 0.2em;
	text-transform: uppercase; color: var(--bs-gray-ink); margin-bottom: 14px;
}
.bs-pd-glance ul { list-style: none; margin: 0; }
.bs-pd-glance li {
	display: flex; justify-content: space-between; gap: 20px;
	padding: 10px 0; border-bottom: 1px solid var(--bs-border);
	font-size: 13.5px;
}
.bs-pd-glance li:last-child { border-bottom: 0; }
.bs-pd-glance li span { color: var(--bs-text-muted); }
.bs-pd-glance li b { font-weight: 600; color: var(--bs-black); text-align: end; }

/* Specifications — full-width bordered table (decorative wrappers on) */
.bs-pd-specs { padding: 40px 0 8px; }
.bs-pd-specs .bs-specs-block { margin-top: 0; border: 0; padding: 0; }
.bs-pd-specs .bs-spec-table-wrap { border: 1px solid var(--bs-border); }
.bs-pd-specs .bs-specs-custom-note {
	margin-top: 24px; background: var(--bs-surface);
	border: 1px solid var(--bs-border); padding: 24px 26px;
}
.bs-pd-specs .bs-specs-custom-note h3,
.bs-pd-specs .bs-specs-custom-note h4 { font-size: 15px; font-weight: 700; color: var(--bs-black); margin-bottom: 8px; }
.bs-pd-specs .bs-specs-custom-note p { font-size: 14px; color: var(--bs-text-muted); margin-bottom: 14px; }

/* Tags strip */
.bs-pd-tags { padding: 26px 0 4px; }
.bs-pd-tags__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bs-pd-tags__label {
	font-family: var(--bs-font-mono); font-size: 10px; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--bs-gray-ink);
}

/* Topic entry strip (2026-09-04 operator: 不锈钢/特种产品显眼专题入口) */
.bs-pd-topic { padding: 8px 0 0; }
.bs-pd-topic__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap;
	background: var(--bs-steel); border: 1px solid var(--bs-line-light);
	border-inline-start: 4px solid var(--bs-black);
	padding: 22px 26px;
}
.bs-pd-topic__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bs-pd-topic__label {
	font-family: var(--bs-font-mono); font-size: 10px; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--bs-gray-ink);
}
.bs-pd-topic__title { font-size: 19px; font-weight: 700; color: var(--bs-black); line-height: 1.3; }
.bs-pd-topic__sub { font-size: 13px; color: var(--bs-text-muted); }
.bs-pd-topic__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 768px) {
	.bs-pd-topic__inner { padding: 18px 20px; }
	.bs-pd-topic__actions { width: 100%; }
	.bs-pd-topic__actions .bs-btn { flex: 1; justify-content: center; }
}

/* Full-bleed guard — Astra white-container issue (same fix as About/Products):
   the steel hero band must reach the viewport edges, no white gutters. */
#main.bs-product-single {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-inline: calc(50% - 50vw);
}

@media (max-width: 1024px) {
	.bs-pd-hero__grid { grid-template-columns: 1fr; gap: 36px; }
	.bs-pd-overview__grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 768px) {
	.bs-pd-hero__grid { padding-top: 32px; padding-bottom: 40px; }
	.bs-pd-facts { gap: 0 20px; }
}
@media (max-width: 480px) {
	.bs-pd-actions .bs-btn { width: 100%; justify-content: center; }
	.bs-pd-glance { padding: 20px; }
}
@media (hover: none) {
	.bs-gal__arrow { display: inline-flex; }
}

/* Product Datasheet dropdown download (under quick-spec line, left of image) */
.bs-ds-download {
	position: relative;
	margin-top: 28px;
	display: inline-block;
}
.bs-ds-download__btn {
	display: inline-flex; align-items: center; gap: 8px;
	/* 2026-09-04：与 .bs-pd-actions .bs-btn（12px 20px）对齐，下载按钮与
	   相邻"Request Custom Quote"按钮等高。 */
	padding: 12px 20px;
}
.bs-ds-download__label { font-weight: 600; }
.bs-ds-download__caret { transition: transform var(--bs-transition); }
.bs-ds-download__btn[aria-expanded="true"] .bs-ds-download__caret { transform: rotate(180deg); }
.bs-ds-download__menu {
	position: absolute; top: calc(100% + 6px); left: 0;
	min-width: 100%;
	margin: 0; padding: 4px;
	list-style: none;
	background: var(--bs-white);
	border: 1px solid var(--bs-border);
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-shadow-md);
	z-index: 20;
}
.bs-ds-download__menu[hidden] { display: none; }
.bs-ds-download__menu li { margin: 0; }
.bs-ds-download__menu a {
	display: block;
	padding: 9px 14px;
	font-size: 14px; font-weight: 500;
	color: var(--bs-text); text-decoration: none;
	border-radius: var(--bs-radius-sm);
	white-space: nowrap;
}
.bs-ds-download__menu a:hover,
.bs-ds-download__menu a:focus-visible {
	background: var(--bs-surface);
	color: var(--bs-primary-dark);
	outline: none;
}
/* "What is inside this PDF" — first row of the download menu (2026-09-17,
   proposal C). Non-interactive label, so it is deliberately NOT an <a> and
   must not inherit the link hover treatment above. */
.bs-ds-download__note {
	padding: 9px 14px;
	border-bottom: 1px solid var(--bs-border);
	font-family: var(--bs-font-mono);
	font-size: 10.5px;
	letter-spacing: 0.03em;
	line-height: 1.5;
	color: var(--bs-gray-ink);
	white-space: normal;
	max-width: 320px;
}
@media (max-width: 768px) {
	.bs-ds-download { margin-top: 20px; }
}

/* Tag Cloud — monochrome */
.bs-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-tag {
	display: inline-block; padding: 4px 12px; border: 1px solid var(--bs-border);
	font-size: 13px; color: var(--bs-text-muted); text-decoration: none;
	transition: all var(--bs-transition);
}
.bs-tag:hover { border-color: var(--bs-black); color: var(--bs-black); }

/* Breadcrumbs */
.bs-breadcrumbs { font-size: 13.5px; color: #555555; margin-bottom: 8px; }
.bs-breadcrumbs a { color: #555555; text-decoration: none; }
.bs-breadcrumbs a:hover { color: var(--bs-black); }
.bs-breadcrumbs__sep { margin: 0 6px; color: #ccc; }

/* Product filter — monochrome refresh */
.bs-product-filter__toggle {
	padding: 10px 16px; border: 1px solid var(--bs-border);
	background: var(--bs-white); font-family: var(--bs-font); font-size: 14px;
	cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.bs-product-filter__toggle:hover { border-color: var(--bs-black); }
.bs-product-filter__panel {
	border: 1px solid var(--bs-border); background: var(--bs-white);
	padding: 20px; margin-top: 12px;
}
.bs-filter-tag {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 10px; border: 1px solid var(--bs-border);
	font-size: 12px; cursor: pointer; user-select: none;
}
.bs-filter-tag:has(input:checked) { background: var(--bs-black); border-color: var(--bs-black); color: var(--bs-white); font-weight: 600; }
/* Match count, measured from the archive's own cards by main.js (2026-09-22).
   Muted tabular figures so the numbers line up and don't compete with the label. */
.bs-filter-tag__count {
	font-variant-numeric: tabular-nums;
	font-size: 10px;
	line-height: 1;
	padding: 2px 5px;
	margin-inline-start: 2px;
	color: var(--bs-text-muted);
	background: var(--bs-surface);
}
.bs-filter-tag__count:empty { display: none; }
.bs-filter-tag:has(input:checked) .bs-filter-tag__count { color: var(--bs-black); background: var(--bs-white); }
/* Same [hidden] trap as .bs-filter-dimension__options below: the inline-flex
   above beats the UA [hidden]{display:none}, so options with no matches and
   whole empty dimensions must be collapsed explicitly. */
.bs-filter-tag[hidden],
.bs-filter-dimension[hidden] { display: none; }
.bs-filter-dimension__toggle {
	width: 100%; text-align: start; padding: 8px 0; border: none; background: none;
	font-size: 14px; font-weight: 600; color: var(--bs-black); cursor: pointer;
	font-family: var(--bs-font); display: flex; justify-content: space-between;
}
.bs-filter-dimension__options { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--bs-surface); }
/* The author stylesheet's display:flex would otherwise defeat the [hidden]
   attribute (UA [hidden]{display:none} loses to it). Higher-specificity rule
   restores collapse for dimensions closed by JS. */
.bs-filter-dimension__options[hidden] { display: none; }

/* Pagination — monochrome */
.bs-pagination { padding: 32px 0; }
.bs-pagination .nav-links { display: flex; justify-content: center; gap: 6px; }
.bs-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px; padding: 0 10px;
	border: 1px solid var(--bs-border); font-size: 14px; color: var(--bs-text);
	text-decoration: none; transition: all var(--bs-transition);
}
.bs-pagination .page-numbers.current { background: var(--bs-black); border-color: var(--bs-black); color: var(--bs-white); font-weight: 600; }
.bs-pagination .page-numbers:hover:not(.current) { border-color: var(--bs-black); color: var(--bs-black); }

/* Specs block — monochrome */
.bs-specs-block { margin-top: 40px; border: 1px solid var(--bs-border); padding: 32px; }
.bs-specs-block__title { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.bs-spec-table { width: 100%; border-collapse: collapse; }
.bs-spec-table th, .bs-spec-table td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--bs-border); font-size: 14px; }
.bs-spec-table th { font-weight: 600; color: var(--bs-black); width: 200px; background: #fafafa; }
.bs-spec-table td { color: var(--bs-text); }
.bs-spec-table-wrap { overflow-x: auto; }
.bs-specs-custom-note { margin-top: 24px; padding: 20px; background: #fafafa; border: 1px solid var(--bs-border); }
.bs-specs-custom-note h3,
.bs-specs-custom-note h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.bs-specs-custom-note p { font-size: 14px; color: var(--bs-text-muted); margin-bottom: 12px; }

/* ==========================================================================
   Accessible focus indicator — consistent ring across all interactive controls
   ========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
.bs-btn:focus-visible, .bs-lang-switcher__select:focus-visible,
.bs-faq-item__question:focus-visible,
.bs-filter-dimension__toggle:focus-visible,
.bs-product-filter__toggle:focus-visible {
	outline: 3px solid var(--bs-primary-dark);
	outline-offset: 2px;
}


/* ==========================================================================
   Astra Overrides — Pure black/white
   ========================================================================== */

/* Pure black header bar */
.ast-primary-header-bar,
.ast-main-header-bar-wrap,
.site-header,
#masthead,
.ast-primary-header-bar.ast-primary-header.main-header-bar.site-header-focus-item {
	background-color: #000000 !important;
}

/* White menu links on black header */
.ast-primary-header-bar .main-header-menu .menu-link,
.ast-primary-header-bar .main-navigation .menu-link,
.main-header-bar .main-header-menu .menu-link,
.main-header-menu .menu-link,
#ast-hf-menu-1 .menu-link,
#primary-site-navigation .menu-link,
.ast-builder-menu .main-navigation .menu-item .menu-link {
	color: #ffffff !important;
}
.main-header-menu .menu-link:hover,
.main-header-menu .current-menu-item .menu-link {
	color: #cccccc !important;
}

/* White site title in black header */
.site-title a,
.site-branding .site-title a,
.ast-site-identity .site-title a {
	color: #ffffff !important;
}

/* Hide Astra default white footer */
.site-below-footer-wrap,
.ast-footer-copyright,
.site-footer-below-section-1,
footer.site-footer {
	display: none !important;
}

/* Keep our custom footer visible */
.bs-footer-widgets {
	display: block !important;
	background-color: #000000;
	color: #ffffff;
}

/* Constrain custom logo to header height — native WP custom-logo sizing */
.custom-logo {
	max-height: 48px;
	width: auto;
	height: auto;
}
.site-branding .custom-logo {
	max-height: 48px;
	width: auto;
}

/* Hide site title text — replaced by custom logo */
.site-title {
	display: none !important;
}

/* Remove white separator line below header bar */
.ast-primary-header-bar,
.main-header-bar {
	border-bottom: none !important;
}

/* Ensure custom footer spans full viewport width */
.bs-footer-widgets {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}
.bs-footer-grid {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 32px;
	padding-right: 32px;
}

/* ==========================================================================
   Utility classes (template inline-style cleanup — B5)
   Common one-off layout values that previously lived as inline style=
   attributes across ~20 templates. Centralized here so tweaks are single-point.
   ========================================================================== */
.bs-section--no-top { padding-top: 0; }
.bs-section--top-40 { padding-top: 40px; }
.bs-section--top-32 { padding-top: 32px; }
.bs-content-narrow { max-width: 860px; }
.bs-content-narrow--800 { max-width: 800px; }
.bs-content-narrow--760 { max-width: 760px; }
.bs-title-start { text-align: start; margin-bottom: 32px; }
.bs-title-start--lg { text-align: start; margin-bottom: 40px; }
.bs-float-none { margin: 0; }
.bs-mb-16 { margin-bottom: 16px; }
.bs-mb-24 { margin-bottom: 24px; }
.bs-mb-32 { margin-bottom: 32px; }
.bs-mb-40 { margin-bottom: 40px; }
.bs-mt-20 { margin-top: 20px; }
.bs-mt-40 { margin-top: 40px; }
.bs-text--inherit { text-decoration: none; color: inherit; }

/* ════════════════════════════════════════════════════════════════
   v17 HOMEPAGE DESIGN LAYER (定稿 2026-08-11 — see DESIGN.md)
   Monochrome industrial. Roboto Condensed display. Watermark + gear motifs.
   This block overrides the base homepage styles above. Homepage-only.
   ════════════════════════════════════════════════════════════════ */

/* ── watermark ghost numerals ── */
.bs-wm{
	position:absolute; z-index:0; pointer-events:none; user-select:none;
	font-family:var(--bs-font-display); font-weight:700; text-transform:uppercase;
	color:transparent; -webkit-text-stroke:1px currentColor; line-height:1;
}
.bs-wm--hero{ top:20px; inset-inline-end:24px; font-size:clamp(150px,18vw,280px); color:var(--bs-white); opacity:.05; }
.bs-wm--cats{ top:-16px; left:30px; inset-inline-start:30px; font-size:clamp(110px,15vw,220px); color:var(--bs-ink); opacity:.06; }
.bs-wm--feat{ top:14px; inset-inline-end:24px; font-size:clamp(110px,15vw,220px); color:var(--bs-white); opacity:.05; }
.bs-wm--cta{ top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(200px,30vw,440px); color:var(--bs-white); opacity:.035; }

/* ── gear motif ── */
.bs-gear{ position:absolute; border-radius:50%; border:20px dashed rgba(255,255,255,.10); pointer-events:none; z-index:0; }
.bs-gear::before{ content:''; position:absolute; inset:18px; border-radius:50%; border:2px solid rgba(255,255,255,.10); }
.bs-gear::after{ content:''; position:absolute; inset:72px; border-radius:50%; background:rgba(255,255,255,.08); }
.bs-gear--tl{ width:190px; height:190px; top:-40px; inset-inline-end:-60px; }
.bs-gear--br{ width:120px; height:120px; bottom:40px; left:-40px; inset-inline-start:-40px; }

/* ── HERO v17 ── */
.bs-hero{ background:var(--bs-black); padding:108px 0 92px; }
.bs-hero__inner{ gap:56px; position:relative; z-index:1; }
.bs-hero__tag{
	font-family:var(--bs-font-mono); font-size:11px; letter-spacing:.24em;
	color:var(--bs-gray-2); display:inline-flex; align-items:center; gap:12px;
	margin-bottom:26px; text-transform:uppercase;
}
.bs-hero__tag::after{ content:''; width:40px; height:1px; background:var(--bs-line-strong); }
.bs-hero__overline{
	font-family:var(--bs-font-mono); font-size:12px; letter-spacing:.3em;
	color:var(--bs-gray-2); text-transform:uppercase; margin-bottom:20px;
}
.bs-hero__overline b{ color:var(--bs-white); font-weight:500; }
.bs-hero__title{
	font-family:var(--bs-font-display); font-weight:700; text-transform:uppercase;
	font-size:clamp(44px,6vw,78px); line-height:.92; letter-spacing:.01em;
	color:var(--bs-white); text-wrap:balance; margin-bottom:0;
}
.bs-hero__title .bs-hero__title-dim{ color:var(--bs-gray-2); }
.bs-hero__spec{
	font-family:var(--bs-font-mono); font-size:12px; letter-spacing:.07em;
	color:var(--bs-gray); margin-top:32px; padding-top:16px; border-top:1px solid var(--bs-line-strong);
	text-transform:uppercase;
}

/* ZH homepage hero micro-text readability (2026-08-29) */
.bs-page--home-zh .bs-hero__tag{
	font-size:13px; letter-spacing:.12em;
}
.bs-page--home-zh .bs-hero__overline{
	font-size:14px; letter-spacing:.12em;
}
.bs-page--home-zh .bs-hero__spec{
	font-size:14px; letter-spacing:.04em;
}

.bs-hero__actions{ margin-top:38px; gap:14px; }
.bs-hero__actions .bs-btn{ padding:15px 32px; }

/* Company brochure — a compact SECONDARY BUTTON, deliberately not .bs-btn.
   Three iterations, each fixing a measured failure (2026-09-22):
     - full-size .bs-btn: 640px of buttons in a 608px hero row -> it wrapped;
     - 11px mono text link: fitted, but had no clickable form and disappeared
       next to the 60px cover title (its contrast was a fine 9.49:1 — weight,
       not colour, was the problem);
     - this: outline button reusing the border/radius language of the
       .bs-btn--outline-dark sitting beside it, one size down.
   Measured 208x42 at 1440px, inside the 216px the hero row leaves it, so it
   holds one line in en/zh/es. Opting out of `.bs-hero__actions .bs-btn` is the
   whole point of the separate class — that rule would inflate it back to 60px. */
.bs-brochure-btn{
	display:inline-flex; align-items:center; gap:9px; align-self:center;
	padding:11px 18px; border:2px solid var(--bs-line-strong); border-radius:var(--bs-radius);
	background:transparent; color:var(--bs-white); text-decoration:none; white-space:nowrap;
	font-family:var(--bs-font); font-size:13px; font-weight:600; line-height:1;
	transition:border-color var(--bs-transition), background-color var(--bs-transition), color var(--bs-transition);
}
.bs-brochure-btn__ico{ flex:0 0 auto; opacity:.85; }
/* The "PDF" tag is a quiet inline suffix, not a second button. */
.bs-brochure-btn__ext{
	font-family:var(--bs-font-mono); font-size:9px; font-weight:700; letter-spacing:.14em;
	padding:3px 5px; color:var(--bs-gray-2); background:var(--bs-line-dark);
}
.bs-brochure-btn:hover,
.bs-brochure-btn:focus-visible{ border-color:var(--bs-white); background:rgba(255,255,255,.06); }
.bs-brochure-btn:hover .bs-brochure-btn__ext{ color:var(--bs-white); }
.bs-brochure-btn:active{ transform:translateY(1px); }

.bs-hero__media{ flex:1; text-align:end; }

/* bezel product panel */
.bs-bezel{ background:var(--bs-black-surface); border:1px solid var(--bs-line-strong); padding:8px; position:relative; }
.bs-bezel-link{ display:block; color:inherit; text-decoration:none; }
.bs-bezel-link:hover .bs-bezel__img{ opacity:.85; }
.bs-bezel-link:focus-visible{ outline:2px solid var(--bs-white); outline-offset:4px; }
.bs-bezel__inner{ border:1px solid var(--bs-line-dark); overflow:hidden; position:relative; box-shadow:inset 0 -46px 56px -46px rgba(0,0,0,.55); }
.bs-bezel__cross{ position:absolute; top:-8px; left:-8px; z-index:3; font-family:var(--bs-font-mono); font-size:13px; color:var(--bs-white); background:var(--bs-black); line-height:1; padding:2px 4px; }
.bs-bezel__img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; filter:grayscale(100%) contrast(1.08) brightness(.9); }
.bs-bezel__placeholder{ width:100%; aspect-ratio:4/3; background:var(--bs-line-dark); }
.bs-bezel__tag{ display:flex; justify-content:space-between; align-items:center; font-family:var(--bs-font-mono); font-size:12px; letter-spacing:.14em; color:var(--bs-gray-2); padding:12px 14px; text-transform:uppercase; background:var(--bs-black-surface); }
.bs-bezel__num{ color:var(--bs-white); }

/* buttons v17 */
/* 2026-09-04：solid/outline-dark 统一 2px 边框（与 .bs-btn 透明边框模型一致），
   保证"下载手册(PDF)"等按钮与相邻按钮严格等高。 */
.bs-btn--solid{ background:var(--bs-white); color:var(--bs-black); border:2px solid var(--bs-white); }
.bs-btn--solid:hover{ background:var(--bs-black); color:var(--bs-white); }
/* `.bs-btn--outline-dark` reads as "dark SECTION" — after v17 it is white-on-dark.
   Every light-section ghost button that still wore it therefore rendered white
   text on a white card/panel (operator report 2026-09-23: the product filter's
   "Clear All" was an empty white box beside "Apply Filters"; same defect on the
   document archive's "View Details"). `.bs-btn--outline-ink` is the light-surface
   twin — ink text + ink border, inverting to an ink fill on hover. Rule of thumb:
   white/grey section → `--outline-ink`, black section → `--outline-dark`. */
.bs-btn--outline-ink{ background:transparent; color:var(--bs-ink); border:2px solid var(--bs-ink); }
.bs-btn--outline-ink:hover{ background:var(--bs-ink); color:var(--bs-white); border-color:var(--bs-ink); }
.bs-btn--outline-dark{ border:2px solid var(--bs-line-strong); color:var(--bs-white); }
.bs-btn--outline-dark:hover{ border-color:var(--bs-white); color:var(--bs-white); background:transparent; }

/* ── TRUST v17 ── */
.bs-trust-strip{ background:var(--bs-white); border-top:1px solid var(--bs-ink); border-bottom:1px solid var(--bs-ink); }
.bs-trust-strip__inner{ justify-content:space-between; gap:10px 14px; padding:22px 0; }
.bs-trust-strip__inner span{ font-family:var(--bs-font-mono); font-size:11px; letter-spacing:.22em; color:var(--bs-ink); text-transform:uppercase; }
.bs-trust-strip__dot{ color:var(--bs-gray-ink); font-weight:700; }

/* ── section header (left, v17) ── */
.bs-section-header--left{ text-align:start; margin-bottom:48px; position:relative; z-index:1; }
.bs-section-header--left .bs-section-header__label{ font-family:var(--bs-font-mono); font-size:11px; letter-spacing:.3em; color:var(--bs-gray-ink); text-transform:uppercase; margin-bottom:10px; }
.bs-section-header--left .bs-section-header__label::after{ content:''; display:inline-block; width:60px; height:1px; background:var(--bs-line-strong); margin-left:16px; margin-inline-start:16px; vertical-align:middle; }
.bs-section-header--left .bs-section__title{ font-family:var(--bs-font-display); font-weight:700; text-transform:uppercase; font-size:clamp(34px,4.6vw,56px); line-height:.98; letter-spacing:.01em; text-align:start; color:inherit; }

/* ── WHAT WE MAKE (light steel) ── */
.bs-section--what{ position:relative; background:var(--bs-steel); color:var(--bs-ink); padding:104px 0 132px; }
.bs-section--what .bs-section-header__label{ color:var(--bs-gray-ink); }
.bs-section--what .bs-section-header__label::after{ background:var(--bs-line-light); }
.bs-section--what .bs-section__title{ color:var(--bs-ink); }
.bs-cat-grid{
	display:grid; grid-template-columns:repeat(6,1fr); gap:18px;
	position:relative; z-index:1; background:transparent; border:0;
}
.bs-cat-card{
	position:relative; background:#fff var(--bs-sil, none) center / contain no-repeat; border:1px solid var(--bs-ink);
	padding:24px 20px 20px; min-height:178px;
	display:flex; flex-direction:column; justify-content:flex-end;
	box-shadow:6px 6px 0 0 var(--bs-ink);
	transition:transform .25s ease, box-shadow .25s ease;
	overflow:visible;
}
/* transform+shadow lift moved into @media (hover:hover) — v18 motion */
/* v8 (2026-08-25): in-card silhouette → real photo reveal, image URLs injected per-card via inline --bs-sil/--bs-real */
.bs-cat-card:hover{ background:#fff var(--bs-real, none) center / contain no-repeat; z-index:30; }
.bs-cat-card__num{ position:absolute; top:16px; left:20px; inset-inline-start:20px; font-family:var(--bs-font-mono); font-size:11px; letter-spacing:.12em; color:var(--bs-gray-ink); }
.bs-cat-card__title{ font-family:var(--bs-font-display); font-weight:700; text-transform:uppercase; font-size:19px; line-height:1.02; letter-spacing:.01em; color:var(--bs-ink); margin:0; }
.bs-cat-card__count{ font-family:var(--bs-font-mono); font-size:10px; letter-spacing:.16em; color:var(--bs-gray-ink); margin-top:11px; text-transform:uppercase; }
.bs-cat-card__arrow{ position:absolute; top:14px; inset-inline-end:16px; font-size:16px; color:var(--bs-ink); font-weight:700; margin:0; }
.bs-cat-grid .bs-cat-card:nth-child(2){ margin-top:26px; }
.bs-cat-grid .bs-cat-card:nth-child(5){ margin-top:-12px; }
@media (max-width:1024px){
	.bs-cat-grid{ grid-template-columns:repeat(3,1fr); }
	.bs-cat-grid .bs-cat-card:nth-child(2){ margin-top:0; }
	.bs-cat-grid .bs-cat-card:nth-child(5){ margin-top:0; }
}
@media (max-width:600px){ .bs-cat-grid{ grid-template-columns:1fr 1fr; } }

/* v8 name strip (2026-08-25): grid two-line — full name wraps, FIG stays right in bold ink.
   Replaces the old hover popup (__pop was removed from the template). */
.bs-cat-card__num,.bs-cat-card__arrow,.bs-cat-card__title,.bs-cat-card__count{ position:relative; z-index:2; transition:opacity .25s ease; }
.bs-cat-card:hover .bs-cat-card__num,
.bs-cat-card:hover .bs-cat-card__arrow,
.bs-cat-card:hover .bs-cat-card__title,
.bs-cat-card:hover .bs-cat-card__count{ opacity:0; }
.bs-cat-card__name{
	position:absolute; left:0; right:0; bottom:0; z-index:3;
	background:#fff; color:var(--bs-gray-ink); border-top:1px solid var(--bs-ink);
	padding:13px 16px 12px; font-family:var(--bs-font-mono); font-size:10px; letter-spacing:.1em;
	text-transform:uppercase; display:grid; grid-template-columns:minmax(0,1fr) auto;
	align-items:center; column-gap:10px;
	opacity:0; transform:translateY(10px); transition:opacity .28s ease, transform .28s ease;
}
.bs-cat-card__name span{ line-height:1.35; }
.bs-cat-card__name b{ font-weight:700; color:var(--bs-ink); letter-spacing:.12em; white-space:nowrap; }
.bs-cat-card:hover .bs-cat-card__name{ opacity:1; transform:translateY(0); }

/* ── SELECTED (black) ── */
.bs-section--selected{ position:relative; background:var(--bs-black); color:var(--bs-white); padding:104px 0 120px; }
.bs-section--selected .bs-section-header__label{ color:var(--bs-gray); }
.bs-section--selected .bs-section-header__label::after{ background:var(--bs-line-strong); }
.bs-section--selected .bs-section__title{ color:var(--bs-white); }
.bs-section--selected .bs-section-footer{ text-align:end; margin-top:52px; }
.bs-section--selected .bs-link-arrow{ color:var(--bs-white); }

/* ── WHY BAOSHUO / COMPANY v18 (white, between Selected black and CTA dark) ── */
.bs-section--company{ position:relative; background:var(--bs-white); color:var(--bs-ink); padding:104px 0 120px; }
.bs-section--company .bs-section-header__label{ color:var(--bs-gray-ink); }
.bs-section--company .bs-section-header__label::after{ background:var(--bs-line-light); }
.bs-section--company .bs-section__title{ color:var(--bs-ink); }
.bs-section--company .bs-section-footer{ text-align:end; margin-top:52px; }
.bs-wm--co{ top:-16px; inset-inline-end:34px; right:34px; font-size:clamp(140px,18vw,260px); color:var(--bs-ink); opacity:.05; }
.bs-company-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; margin-top:52px; align-items:start; }
.bs-company-col-label{ font-family:var(--bs-font-mono); font-size:11px; letter-spacing:.3em; color:var(--bs-gray-ink); text-transform:uppercase; display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.bs-company-col-label::after{ content:''; flex:1; height:1px; background:var(--bs-line-light); }
.bs-adv-grid{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--bs-ink); border-left:1px solid var(--bs-ink); }
.bs-adv-item{ padding:22px 20px; border-right:1px solid var(--bs-ink); border-bottom:1px solid var(--bs-ink); }
.bs-adv-num{ font-family:var(--bs-font-mono); font-size:10px; letter-spacing:.16em; color:var(--bs-gray-ink); }
.bs-adv-title{ font-family:var(--bs-font-display); font-weight:700; font-size:17px; text-transform:uppercase; letter-spacing:.01em; color:var(--bs-ink); margin-top:10px; line-height:1.05; }
.bs-adv-desc{ font-size:13px; color:#444; line-height:1.55; margin-top:8px; }
.bs-adv-data{ font-family:var(--bs-font-mono); font-size:11px; letter-spacing:.1em; color:var(--bs-gray-ink); margin-top:14px; padding-top:12px; border-top:1px solid var(--bs-line-light); text-transform:uppercase; display:flex; gap:6px; flex-wrap:wrap; }
.bs-adv-data b{ color:var(--bs-ink); font-weight:500; }
.bs-certs-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.bs-certs-label{ font-family:var(--bs-font-mono); font-size:11px; letter-spacing:.3em; color:var(--bs-gray-ink); text-transform:uppercase; }
.bs-certs-count{ font-family:var(--bs-font-mono); font-size:11px; letter-spacing:.16em; color:var(--bs-gray-ink); }
.bs-certs-list{ border-top:1px solid var(--bs-ink); }
.bs-cert{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid var(--bs-line-light); }
.bs-cert__name{ font-family:var(--bs-font-display); font-weight:600; font-size:15px; text-transform:uppercase; letter-spacing:.01em; color:var(--bs-ink); }
.bs-cert__sub{ font-family:var(--bs-font-mono); font-size:10px; letter-spacing:.14em; color:var(--bs-gray-ink); margin-top:3px; text-transform:uppercase; }
.bs-cert__meta{ text-align:end; font-family:var(--bs-font-mono); font-size:10px; letter-spacing:.12em; color:var(--bs-gray-ink); text-transform:uppercase; white-space:nowrap; }
.bs-cert__meta b{ color:var(--bs-ink); font-weight:500; }
@media (max-width:1024px){ .bs-company-grid{ grid-template-columns:1fr; gap:48px; } }
@media (max-width:600px){ .bs-adv-grid{ grid-template-columns:1fr; } }

/* ── v18 motion polish (克制动效, MOTION 4/10) ── */
/* Scroll reveal: standalone blocks fade+up; grid wrappers stagger children via --d.
   Hidden state is scoped under body.bs-js — no-JS visitors see everything. */
.bs-js .bs-reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--bs-ease-out), transform .6s var(--bs-ease-out); }
.bs-reveal.is-visible{ opacity:1; transform:none; }
.bs-js .bs-reveal-grid > *{ opacity:0; transform:translateY(16px); transition:opacity .5s var(--bs-ease-out) var(--d,0ms), transform .5s var(--bs-ease-out) var(--d,0ms); }
.bs-reveal-grid.is-visible > *{ opacity:1; transform:none; }

/* Button press feedback + explicit transitions (no transition:all). */
.bs-btn{ transition:background-color .2s var(--bs-ease-out), color .2s var(--bs-ease-out), border-color .2s var(--bs-ease-out), transform .15s var(--bs-ease-out); }
.bs-btn:active{ transform:scale(0.97); }

/* Card press feedback (constrained). */
.bs-product-card:active{ transform:scale(0.98); }

/* Pointer-device-only hover lifts (touch shouldn't flash a transform). */
@media (hover:hover) and (pointer:fine){
  .bs-cat-card:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 0 var(--bs-ink); z-index:30; }
  .bs-btn--primary:hover{ transform:translateY(-2px); }
  .bs-btn--solid:hover{ transform:translateY(-2px); }
}

/* v19 hero entrance — one-shot fade-up with staggered media (MOTION 5/10).
   Scoped under body.bs-js like .bs-reveal (progressive enhancement). */
.bs-js .bs-hero__content{ animation:bs-hero-in .55s var(--bs-ease-out) both; }
.bs-js .bs-hero__media{ animation:bs-hero-in .55s var(--bs-ease-out) 110ms both; }
@keyframes bs-hero-in{
	from{ opacity:0; transform:translateY(14px); }
	to{ opacity:1; transform:none; }
}

/* Accessibility: keep the opacity fade, drop movement (reduced-motion = gentler, not zero). */
@media (prefers-reduced-motion:reduce){
  .bs-js .bs-reveal, .bs-js .bs-reveal-grid > *{ transform:none !important; transition:opacity .45s ease !important; }
  .bs-js .bs-hero__content, .bs-js .bs-hero__media{ animation:none; }
  /* v4 About motion */
  .bs-js .bs-about-head__title h1,
  .bs-js .bs-about-head__lede, .bs-js .bs-about-facts{ animation:none; }
  .bs-btn:active, .bs-product-card:active{ transform:none; }
  .bs-cat-card:hover, .bs-btn--primary:hover, .bs-btn--solid:hover{ transform:none; }
}

/* ── CTA v17 ── */
.bs-cta-strip{ position:relative; background:var(--bs-black-surface); border-top:1px solid var(--bs-line-strong); border-bottom:1px solid var(--bs-line-strong); overflow:hidden; padding:104px 0 92px; }
.bs-cta-strip__inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:32px; position:relative; z-index:1; }
.bs-cta-strip__title{ font-family:var(--bs-font-display); font-weight:700; text-transform:uppercase; font-size:clamp(38px,5.4vw,68px); line-height:.94; letter-spacing:.01em; }
.bs-cta-strip__text p{ font-family:var(--bs-font-mono); font-size:11px; letter-spacing:.24em; color:var(--bs-gray-2); text-transform:uppercase; }
.bs-cta-strip__contact{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px 32px; margin-top:16px; padding-top:26px; border-top:1px solid var(--bs-line-dark); width:100%; }
.bs-cta-strip__contact span{ font-family:var(--bs-font-mono); font-size:10px; letter-spacing:.14em; color:var(--bs-gray-2); text-transform:uppercase; }

/* ── responsive overrides for v17 sections ── */
@media (max-width:1024px){
	.bs-hero{ padding:88px 0 72px; }
	.bs-hero__inner{ gap:36px; }
	.bs-hero__media{ text-align:center; }
	.bs-bezel{ max-width:520px; margin:0 auto; }
}
@media (max-width:768px){
	/* v19: tablet hero was 969px tall under the 88/72 padding — one more notch
	   for the 601–768px band (≤600px gets the tighter mobile hero below). */
	.bs-hero{ padding:72px 0 56px; }
}
@media (max-width:600px){
	/* DESIGN.md: Hero floor is 44px — keep the responsive cap but raise the floor. */
	.bs-hero__title{ font-size:clamp(44px,11vw,50px); }
	/* v19 refinement: tighten the mobile hero (was ~975px tall — nearly 2.5
	   viewports). Compress padding, cap the bezel panel, bring the spec row and
	   CTAs up so the first viewport carries the conversion elements. */
	.bs-hero{ padding:60px 0 44px; }
	.bs-bezel{ max-width:320px; }
	.bs-hero__spec{ margin-top:24px; }
	.bs-hero__actions{ margin-top:28px; flex-direction:row; flex-wrap:nowrap; justify-content:center; gap:10px; }
	.bs-hero__actions .bs-btn{ flex:1 1 auto; padding:13px 12px; font-size:14px; text-align:center; }
	.bs-hero__tag{ margin-bottom:14px; letter-spacing:.16em; }
	.bs-hero__overline{ margin-bottom:16px; letter-spacing:.18em; }
	/* v19: keep the watermark ghosts as a brand memory, but shrink them on
	   small screens so they stay background and never fight the headings. */
	.bs-wm--hero{ font-size:clamp(84px,26vw,150px); opacity:.045; }
	.bs-wm--cats{ font-size:clamp(64px,22vw,120px); opacity:.05; }
	.bs-wm--feat{ font-size:clamp(64px,22vw,120px); opacity:.045; }
	.bs-wm--co{ font-size:clamp(80px,24vw,140px); opacity:.045; }
	.bs-wm--cta{ font-size:clamp(110px,34vw,200px); }
}

/* ── v17 full-bleed (break out of Astra .ast-container) ── */
body.home{ overflow-x:hidden; }
/* Prevent any horizontal scroll from full-bleed / decorative overflow (gears,
   hidden hover popups) site-wide. clip (not hidden) doesn't create a scroll
   container, so position:fixed / sticky keep working. */
html{ overflow-x:clip; }
.bs-hero,
.bs-trust-strip,
.bs-section--what,
.bs-section--selected,
.bs-cta-strip{
	width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	margin-inline:calc(50% - 50vw);
}

/* ════════════════════════════════════════════════════════════════════════
   ABOUT PAGE v21 — natural industrial palette (operator approved 2026-08-14)
   Archival document language: warm paper, steel blue-grey, copper, stamp red.
   Distinct macrostructure from the homepage (no big black hero, no hard-shadow
   cards) — the ink certificate band is the page's single heavy block.
   ════════════════════════════════════════════════════════════════════════ */
.bs-about{
	/* natural industrial palette (About-scoped) */
	--ab-paper:    var(--bs-paper-warm);
	--ab-paper-2:  #eee8d8;
	--ab-cream:    #fbf8f1;
	--ab-ink:      #211d16;
	--ab-ink-2:    #3c362c;
	--ab-steel:    #57636a;
	--ab-line:     #c8c0ad;
	--ab-copper:   #b06032;
	--ab-copper-d: #8f4b26;
	--ab-stamp:    #9a3524;
	background:var(--ab-paper);
	color:var(--ab-ink-2);
}
.bs-about-wrap{ max-width:1160px; margin:0 auto; padding:0 32px; }

/* v4 — black header → paper transition: ink spine band + copper swatch strip */
.bs-about-band{ position:relative; z-index:1; }
.bs-about-band__name{
	background:var(--bs-black); color:var(--bs-gray-2);
	font-family:var(--bs-font-mono); font-size:10px; letter-spacing:.26em;
	text-transform:uppercase; padding:9px 24px; margin:0;
}
.bs-about-band__name{ display:flex; align-items:baseline; gap:12px; }
.bs-about-band__name::before{ content:'BAOSHUO'; color:var(--bs-white); font-weight:500; }
.bs-about-band__sw{ display:flex; height:28px; }
.bs-about-band__sw i{ flex:1; }
.bs-about-band__sw i:nth-child(1){ background:#0b0b0b; }
.bs-about-band__sw i:nth-child(2){ background:#1d1812; }
.bs-about-band__sw i:nth-child(3){ background:#8f4b26; }
.bs-about-band__sw i:nth-child(4){ background:#b06032; }
.bs-about-band__sw i:nth-child(5){ background:#c98a5e; }
.bs-about-band__sw i:nth-child(6){ background:#e8dcc4; }
.bs-about-band__sw i:nth-child(7){ background:#f5f1e8; }

/* v4 — archival motion: headline rises in steps, sections reveal */
.bs-js .bs-about-head__title h1{ animation:bs-about-rise .55s var(--bs-ease-out) .1s both; }
.bs-js .bs-about-head__lede{ animation:bs-about-rise .55s var(--bs-ease-out) .3s both; }
.bs-js .bs-about-facts{ animation:bs-about-rise .55s var(--bs-ease-out) .45s both; }
@keyframes bs-about-rise{
	from{ opacity:0; transform:translateY(14px); }
	to{ opacity:1; transform:none; }
}
.bs-about-cond{
	font-family:var(--bs-font-display); font-weight:700; text-transform:uppercase;
	letter-spacing:.01em; color:var(--ab-ink);
}
.bs-about-sechead{ display:flex; align-items:baseline; gap:20px; margin-bottom:34px; flex-wrap:wrap; }
.bs-about-sechead h2{ font-size:clamp(30px,3.6vw,42px); line-height:1; margin:0; }
.bs-about-sechead__cn{ font-family:var(--bs-font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ab-steel); }

/* S1 file head */
.bs-about-head{ padding:56px 0 40px; border-bottom:1px solid var(--ab-line); }
.bs-about-head__row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.bs-about-head__file{ font-family:var(--bs-font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ab-steel); margin:0; }
.bs-about-head__file b{ color:var(--ab-copper); font-weight:500; }
.bs-about-head__meta{ font-family:var(--bs-font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ab-steel); margin:0; }
.bs-about-head__title{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; margin-top:34px; }
.bs-about-head__title h1{ font-size:clamp(40px,5vw,62px); line-height:.98; margin:0; }
.bs-about-head__lede{ font-size:15.5px; line-height:1.75; color:var(--ab-ink-2); max-width:560px; margin:20px 0 0; }
.bs-about-facts{ display:flex; flex-wrap:wrap; gap:10px 34px; margin-top:30px; padding-top:22px; border-top:1px solid var(--ab-line); }
.bs-about-fact{ display:flex; align-items:baseline; gap:8px; }
.bs-about-fact b{ font-family:var(--bs-font-display); font-weight:700; font-size:24px; color:var(--ab-ink); }
.bs-about-fact i{ font-style:normal; font-family:var(--bs-font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ab-steel); }

/* S2 who */
.bs-about-who{ padding:76px 0; }
.bs-about-who__grid{ display:grid; grid-template-columns:220px 1fr; gap:56px; }
.bs-about-who__side{ font-family:var(--bs-font-mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ab-steel); margin:0; position:sticky; top:120px; }
.bs-about-who__side::before{ content:''; display:block; width:26px; height:2px; background:var(--ab-copper); margin-bottom:12px; }
.bs-about-who__body p{ font-size:16px; line-height:1.85; color:var(--ab-ink-2); margin:0 0 20px; max-width:640px; }
.bs-about-who__body p:first-child{ font-size:19px; color:var(--ab-ink); }
.bs-about-who__addr{ font-family:var(--bs-font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ab-steel); margin-top:30px !important; padding-top:18px; border-top:1px solid var(--ab-line); display:flex; gap:10px; align-items:center; }
.bs-about-who__addr::before{ content:''; width:8px; height:8px; background:var(--ab-copper); border-radius:50%; flex:none; }

/* S3 journey */
.bs-about-journey{ background:var(--ab-paper-2); padding:76px 0; }
.bs-about-journey__row{ display:grid; grid-template-columns:96px 1fr; gap:30px; align-items:baseline; padding:20px 0; border-top:1px solid var(--ab-line); }
.bs-about-journey__row:last-child{ border-bottom:1px solid var(--ab-line); }
.bs-about-journey__yr{ font-family:var(--bs-font-mono); font-size:15px; letter-spacing:.1em; color:var(--ab-copper); }
.bs-about-journey__tx{ display:flex; gap:16px; align-items:baseline; }
.bs-about-journey__tag{ font-family:var(--bs-font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--ab-steel); background:var(--ab-cream); border:1px solid var(--ab-line); padding:3px 8px; white-space:nowrap; flex:none; }
.bs-about-journey__tx p{ margin:0; font-size:15px; line-height:1.65; color:var(--ab-ink-2); }

/* S4 qc */
.bs-about-qc{ padding:76px 0; }
.bs-about-qc__cols{ display:grid; grid-template-columns:repeat(4,1fr); }
.bs-about-qc__col{ padding:0 26px; border-left:1px solid var(--ab-line); }
.bs-about-qc__col:first-child{ border-left:0; padding-left:0; }
.bs-about-qc__col::before{ content:''; display:block; width:14px; height:2px; background:var(--ab-copper); margin-bottom:16px; }
.bs-about-qc__col h3{ font-family:var(--bs-font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; font-size:17px; color:var(--ab-ink); margin:0 0 8px; }
.bs-about-qc__col p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ab-steel); }

/* S5 workshop */
.bs-about-shop{ padding:76px 0; }
.bs-about-shop__gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.bs-about-shop__shot{ border:1px solid var(--ab-line); background:var(--ab-cream); padding:8px 8px 0; margin:0; }
.bs-about-shop__shot:nth-child(2){ margin-top:26px; }
.bs-about-shop__shot img{ width:100%; display:block; aspect-ratio:4/3; object-fit:cover; filter:saturate(.92); }
.bs-about-shop__cap{ display:flex; justify-content:space-between; font-family:var(--bs-font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ab-steel); padding:10px 4px; }
.bs-about-shop__cap b{ color:var(--ab-copper); font-weight:500; }
.bs-about-shop__hint{ margin-top:26px; font-family:var(--bs-font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ab-steel); border:1px dashed var(--ab-line); padding:12px 16px; }

/* S6 certificates — the page's single heavy block */
.bs-about-certs{ background:var(--ab-ink); color:var(--ab-cream); padding:84px 0 96px; }
.bs-about-certs .bs-about-sechead h2{ color:var(--ab-cream); }
.bs-about-certs .bs-about-sechead__cn{ color:#9a948a; }
.bs-about-certs__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px 26px; }
.bs-about-certs__cert{ display:flex; flex-direction:column; }
.bs-about-certs__frame{ background:#f4efe4; padding:10px; border:1px solid #4a4438; }
.bs-about-certs__img{ width:100%; height:auto; display:block; background:#fff; }
.bs-about-certs__cap{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:13px; }
.bs-about-certs__cap h3{ font-size:17px; color:var(--ab-cream); margin:0; }
.bs-about-certs__no{ font-family:var(--bs-font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#9a948a; white-space:nowrap; }
.bs-about-certs__dl{ display:flex; justify-content:space-between; align-items:center; margin-top:11px; padding-top:12px; border-top:1px solid #3a352b; font-family:var(--bs-font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; }
.bs-about-certs__dl span{ color:#9a948a; }
.bs-about-certs__dl a{ color:var(--ab-copper); text-decoration:none; }
.bs-about-certs__dl a:hover{ color:#d07a48; }

/* S7 closing line removed (2026-08-14) — duplicated the footer; the page now
   ends on the certificate band. */

/* About responsive */
@media (max-width:1200px){
	.bs-about-certs__grid{ grid-template-columns:repeat(2,1fr); gap:34px 30px; }
}
@media (max-width:1024px){
	.bs-about-head__title{ grid-template-columns:1fr; }
	.bs-about-who__grid{ grid-template-columns:1fr; gap:28px; }
	.bs-about-who__side{ position:static; }
	.bs-about-qc__cols{ grid-template-columns:1fr 1fr; row-gap:36px; }
	.bs-about-qc__col:nth-child(3){ border-left:0; padding-left:0; }
	.bs-about-journey__row{ grid-template-columns:72px 1fr; gap:20px; }
	.bs-about-shop__gallery{ grid-template-columns:1fr 1fr; }
	.bs-about-shop__shot:nth-child(2){ margin-top:0; }
}
@media (max-width:768px){
	.bs-about-wrap{ padding:0 20px; }
	.bs-about-certs__grid{ grid-template-columns:1fr; gap:34px; }
	.bs-about-qc__cols{ grid-template-columns:1fr; }
	.bs-about-qc__col{ border-left:0; padding-left:0; }
	.bs-about-journey__row{ grid-template-columns:1fr; gap:8px; }
	.bs-about-journey__tx{ flex-direction:column; gap:8px; align-items:flex-start; }
	.bs-about-shop__gallery{ grid-template-columns:1fr; }
}

/* v21.1 — full-bleed fix: the About page lives inside Astra's white container
   (max 1400px + 32px padding), which left white gutters on both sides of the
   paper background and cropped the colour bands. Break out to the viewport
   and paint the body paper-warm so no white shows anywhere.
   Note: .bs-about IS #main, and Astra's `#main.site-main{width:100%}` wins
   over a bare class — the ID-level selector below is required, otherwise the
   negative margins fire but the width doesn't, pushing the page left. */
#main.bs-about{
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	margin-inline:calc(50% - 50vw);
}
body.page-template-template-about{ background:var(--bs-paper-warm); }
.bs-about-journey,
.bs-about-certs{
	width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	margin-inline:calc(50% - 50vw);
}

/* ════════════════════════════════════════════════════════════════════════
   PRODUCTS CATALOG v21 — heavy monochrome industrial catalog (approved 2026-08-14)
   Black cover (brushed steel + corner brackets + rivets) → all-white inner
   pages (die-stamped chapter numbers, double rules) → black back cover.
   Product cards keep their original clean structure.
   ════════════════════════════════════════════════════════════════════════ */
.bs-products-page .bs-pcat-cover{
	position:relative; background:var(--bs-black); color:var(--bs-white);
	padding:72px 0 62px; overflow:hidden;
}
.bs-products-page .bs-pcat-cover::before{
	content:''; position:absolute; inset:0;
	background:
		repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px),
		repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px);
	-webkit-mask-image:linear-gradient(105deg, transparent 12%, #000 60%);
	mask-image:linear-gradient(105deg, transparent 12%, #000 60%);
}
/* brushed-steel grain over the grid */
.bs-products-page .bs-pcat-cover::after{
	content:''; position:absolute; inset:0; pointer-events:none;
	background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.022) 2px 3px);
}
.bs-pcat-wrap{ max-width:1240px; margin:0 auto; padding:0 32px; position:relative; }
.bs-pcat-top{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
/* Right-hand cluster of the cover header: edition meta + the brochure link. */
.bs-pcat-top__right{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.bs-pcat-file{ font-family:var(--bs-font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--bs-gray); margin:0; }
.bs-pcat-file b{ color:var(--bs-white); font-weight:500; }
.bs-pcat-meta{ font-family:var(--bs-font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--bs-gray); margin:0; }
.bs-pcat-title{
	font-family:var(--bs-font-display); font-weight:700; text-transform:uppercase;
	font-size:clamp(44px,6vw,80px); line-height:.92; letter-spacing:.01em;
	color:var(--bs-white); margin:28px 0 0;
}
.bs-pcat-data{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 36px; margin-top:30px; padding-top:20px; border-top:1px solid var(--bs-line-strong); }
.bs-pcat-fact{ display:flex; align-items:baseline; gap:8px; }
.bs-pcat-fact b{ font-family:var(--bs-font-display); font-weight:700; font-size:30px; color:var(--bs-white); }
.bs-pcat-fact i{ font-style:normal; font-family:var(--bs-font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bs-gray); }
.bs-pcat-bar{ height:4px; background:var(--bs-white); width:100%; margin-top:30px; }

/* corner brackets — machined panel frame */
.bs-corner{ position:absolute; width:22px; height:22px; border:0 solid #4a4a4a; pointer-events:none; }
.bs-corner--tl{ top:18px; left:18px; border-top-width:2px; border-left-width:2px; }
.bs-corner--tr{ top:18px; right:18px; border-top-width:2px; border-right-width:2px; }
.bs-corner--bl{ bottom:18px; left:18px; border-bottom-width:2px; border-left-width:2px; }
.bs-corner--br{ bottom:18px; right:18px; border-bottom-width:2px; border-right-width:2px; }

/* rivets */
.bs-rivet{
	display:inline-block; width:7px; height:7px; border-radius:50%;
	background:#3a3a3a; border:1px solid #555;
	box-shadow:inset 0 -1px 1px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08);
	flex:none;
}
.bs-rivet--end{ background:var(--bs-black); border:0; box-shadow:inset 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.6); }

/* chapters — white inner pages, heavy black typography */
.bs-products-main .bs-product-category-section{ margin-bottom:84px; margin-block-end:84px; }
.bs-pcat-chhead{ display:flex; align-items:baseline; gap:28px; }
.bs-pcat-chno{
	font-family:var(--bs-font-display); font-weight:700; font-size:60px; line-height:.8; color:var(--bs-black);
	/* die-stamped impression */
	text-shadow:0 1px 0 rgba(255,255,255,.9), 0 2px 1px rgba(0,0,0,.18);
}
.bs-pcat-cht{ flex:1; }
.bs-products-main .bs-product-category-heading{
	font-size:clamp(30px,3.6vw,44px); line-height:1; color:var(--bs-black); margin:0;
}
.bs-pcat-sub{ font-family:var(--bs-font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bs-text-muted); margin:9px 0 0; }
.bs-pcat-cnt{ font-family:var(--bs-font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--bs-text-muted); white-space:nowrap; }
.bs-pcat-rule{ margin:24px 0 36px; border-top:2px solid var(--bs-black); position:relative; }
.bs-pcat-rule::after{ content:''; position:absolute; top:5px; left:0; right:0; border-top:1px solid #d0d0d0; }
.bs-pcat-rule::before{ content:''; position:absolute; top:-4px; left:0; width:7px; height:7px; border-radius:50%; background:var(--bs-black); box-shadow:inset 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.6); }
.bs-pcat-rule .bs-rivet{ position:absolute; top:-4px; right:0; }

/* product cards — original structure kept; only the hover hardens */
.bs-products-main .bs-product-card{ border-radius:0; }
.bs-products-main .bs-product-card:hover{ border-color:var(--bs-black); box-shadow:0 8px 20px rgba(0,0,0,.12); }

/* filter strip keeps its monochrome look (no changes needed) */
.bs-products-main .bs-product-filter{ margin-bottom:8px; }

/* back cover CTA echoes the cover */
.bs-products-page .bs-pcat-cta{ position:relative; overflow:hidden; }
.bs-products-page .bs-pcat-cta .bs-corner{ border-color:#3a3a3a; }

/* responsive */
@media (max-width:768px){
	.bs-pcat-wrap{ padding:0 20px; }
	.bs-pcat-chno{ font-size:44px; }
	.bs-pcat-chhead{ gap:18px; }
	.bs-products-main .bs-product-category-section{ margin-bottom:64px; margin-block-end:64px; }
}

/* v21.1 — full-bleed: same Astra white-container issue as the About page.
   Without this the black cover stops at the 1400px container and white
   gutters show on both sides. */
#main.bs-products-page{
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	margin-inline:calc(50% - 50vw);
	/* v23 (2026-08-27, operator approved 方案 B): cool steel-gray #EBEEED
	   inner pages with an 80px precision grid pattern — pure CSS gradients,
	   no image assets. White cards / black chapters / black CTA unchanged. */
	background-color:#ebeeed;
	background-image:
		linear-gradient(rgba(10,10,10,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(10,10,10,.045) 1px, transparent 1px);
	background-size:80px 80px;
}

/* ════════════════════════════════════════════════════════════════════
   TOPIC PAGES + ENTRY BANNERS (2026-08-17, operator approved)
   Stainless Steel Series & Specialty Clamps — standalone topic pages
   independent of the product_category taxonomy. Design approved via
   design-previews/2026-08-17-topic-pages.
   ════════════════════════════════════════════════════════════════════ */

/* ——— topic hero (black banner, SS/SP watermark) ——— */
/* 2026-09-04：overflow:hidden 会把"下载手册(PDF)"下拉菜单在 hero 底边处裁剪
   （.bs-dl-menu 绝对定位于按钮下方，超出 hero 盒的部分被切掉，中文(ZH)项被
   下一板块盖住）。hero 内无越界装饰元素，改为 visible 让菜单完整浮出。 */
.bs-topic-hero{
	background:#0b0b0b; color:#fff; position:relative; overflow:visible;
	padding:88px 0 76px;
}
.bs-topic-hero__overline{
	font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.25em;
	color:#999; text-transform:uppercase; margin-bottom:18px;
}
.bs-topic-hero__overline b{ color:#fff; }
.bs-topic-hero__title{ font-family:'Roboto Condensed',sans-serif; font-size:56px; line-height:1.05; font-weight:700; text-transform:uppercase; letter-spacing:.01em; color:#fff; margin:0; }
.bs-topic-hero__spec{
	margin-top:20px; font-family:'JetBrains Mono',monospace; font-size:12px;
	letter-spacing:.08em; color:#999;
}
.bs-topic-hero__actions{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }

/* ——— topic sections ——— */
.bs-topic-sec .bs-wm{ font-size:200px; top:30px; left:10px; }
.bs-topic-sec .bs-wm--dark{ color:rgba(255,255,255,.04); }

/* ——— grade compare cards ——— */
.bs-topic-compare{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; }
.bs-topic-compare__card{ border:1px solid #d0d4d8; padding:26px 22px; background:#fff; }
.bs-topic-compare__card--dark{ background:#131313; border-color:#131313; color:#fff; }
.bs-topic-compare__grade{
	font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em;
	color:#c0392b; text-transform:uppercase; margin-bottom:6px;
}
.bs-topic-compare__name{
	font-family:'Roboto Condensed',sans-serif; font-size:22px; font-weight:700;
	text-transform:uppercase; margin-bottom:14px;
}
.bs-topic-compare__list{ list-style:none; font-size:12.5px; line-height:1.9; color:#555; }
.bs-topic-compare__card--dark .bs-topic-compare__list{ color:#bbb; }
.bs-topic-compare__list b{ color:#0b0b0b; font-weight:600; }
.bs-topic-compare__card--dark .bs-topic-compare__list b{ color:#fff; }
.bs-topic-compare__bar{ height:6px; background:#e0e0e0; margin:8px 0 4px; }
.bs-topic-compare__bar i{ display:block; height:100%; background:#0b0b0b; }
.bs-topic-compare__card--dark .bs-topic-compare__bar i{ background:#fff; }
.bs-topic-compare__bar--hi i{ width:96%; }
.bs-topic-compare__bar--mid i{ width:82%; }
.bs-topic-compare__bar--lo i{ width:60%; }

/* ——— topic product grid & cards ——— */
.bs-topic-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:34px; }
.bs-topic-card{
	background:#fff; border:1px solid #d0d4d8; display:block; text-decoration:none;
	transition:box-shadow .2s ease;
}
.bs-topic-card:hover{ box-shadow:0 6px 20px rgba(0,0,0,.14); }
.bs-topic-card__img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.bs-topic-card__img--pending{
	display:flex; align-items:center; justify-content:center;
	background:#e9e7e2; border:1px dashed #c9c5bc;
	font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.18em;
	text-transform:uppercase; color:#a29b8e;
}
.bs-topic-card__body{ display:block; padding:14px 14px 16px; }
.bs-topic-card__code{
	font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em;
	color:#c0392b; display:block;
}
.bs-topic-card__name{
	font-family:'Roboto Condensed',sans-serif; font-size:15px; font-weight:700;
	text-transform:uppercase; margin:5px 0 4px; line-height:1.25; color:#0b0b0b; display:block;
}
.bs-topic-card__spec{ font-size:11px; color:#666; line-height:1.6; display:block; }
.bs-topic-card__link{
	display:inline-block; margin-top:8px; font-size:11px; font-weight:600;
	letter-spacing:.08em; text-transform:uppercase; color:#0b0b0b;
	border-bottom:1px solid #0b0b0b;
}

/* ——— pressure ladder ——— */
.bs-topic-ladder{ margin-top:32px; display:flex; flex-direction:column; gap:10px; }
.bs-topic-ladder__row{
	display:grid; grid-template-columns:110px 1fr 220px; align-items:center; gap:16px; font-size:12.5px;
}
.bs-topic-ladder__mpa{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; }
.bs-topic-ladder__track{ height:26px; background:#222; position:relative; display:block; }
.bs-topic-ladder__track i{ position:absolute; left:0; top:0; bottom:0; background:#fff; }
.bs-topic-ladder__use{ color:#999; font-size:11.5px; line-height:1.5; }

/* ——— seal table ——— */
.bs-topic-table{ width:100%; border-collapse:collapse; margin-top:30px; font-size:12.5px; }
.bs-topic-table th{
	background:#0b0b0b; color:#fff; text-align:left; padding:11px 14px; font-weight:600;
	letter-spacing:.06em; text-transform:uppercase; font-size:11px;
}
.bs-topic-table td{ padding:11px 14px; border-bottom:1px solid #e5e5e5; color:#444; }
.bs-topic-table tr:nth-child(even) td{ background:#fafafa; }
.bs-topic-table td:first-child{ font-weight:600; color:#0b0b0b; }

/* ——— custom steps ——— */
.bs-topic-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px; }
.bs-topic-step{ border-top:2px solid #fff; padding-top:16px; display:block; }
.bs-topic-step__num{
	font-family:'JetBrains Mono',monospace; font-size:11px; color:#777; letter-spacing:.2em; display:block;
}
.bs-topic-step__title{
	font-family:'Roboto Condensed',sans-serif; font-size:21px; font-weight:700;
	text-transform:uppercase; margin:6px 0 8px; display:block; color:#fff;
}
.bs-topic-step__desc{ font-size:12.5px; color:#aaa; line-height:1.7; display:block; }

/* ——— CTA band ——— */
.bs-topic-cta{
	display:flex; align-items:center; justify-content:space-between; gap:20px;
	background:#0b0b0b; color:#fff; padding:44px 40px; margin-top:56px;
}
.bs-topic-cta__title{
	font-family:'Roboto Condensed',sans-serif; font-size:26px; font-weight:700; text-transform:uppercase;
}
.bs-topic-cta__sub{ font-size:12.5px; color:#aaa; margin-top:6px; }
.bs-topic-cta .bs-btn--solid{ white-space:nowrap; }
.bs-topic-cta__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.bs-topic-cta__actions .bs-btn{ white-space:nowrap; }

/* Handbook 语言下载下拉（2026-09-03 operator：专题页本页弹出中/英选择，
   不再跳转文档单页二次点击） */
.bs-dl{ position:relative; display:inline-block; }
.bs-dl-btn{ cursor:pointer; }
.bs-dl-menu{
	display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:60;
	min-width:230px; background:#fff; border:1px solid #e3e6e9; border-radius:8px;
	box-shadow:0 10px 28px rgba(20,30,40,.14); padding:6px; text-align:left;
}
.bs-dl.open .bs-dl-menu{ display:block; }
.bs-dl-menu a{
	display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:6px;
	color:#1c2128; font-size:14px; font-weight:600; text-decoration:none;
}
.bs-dl-menu a:hover{ background:#f0f3f5; }
.bs-dl-menu a + a{ border-top:1px solid #f0f2f4; }
.bs-dl-menu a + a:hover{ border-radius:6px; }

/* ——— entry banners (homepage + products archive) ——— */
/* 2026-08-24 方案甲 (operator approved): full-bleed image banners with
   left-to-right dark scrim; operator-picked no-logo product shots. */
.bs-topic-entries{ padding:56px 0 8px; }
.bs-topic-entries__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.bs-topic-entry{
	position:relative; display:flex; align-items:flex-end; color:#fff;
	text-decoration:none; overflow:hidden; min-height:260px;
	transition:box-shadow .2s ease;
}
/* 2026-08-24 v5 (operator feedback): SS banner image swapped again and
   anchored right (text sits on the left, product on the right). */
.bs-topic-entry__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bs-topic-entry--ss .bs-topic-entry__bg{ object-position:right center; }
.bs-topic-entry__grad{
	position:absolute; inset:0; pointer-events:none;
	background:linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.66) 42%, rgba(0,0,0,.16) 100%);
}
.bs-topic-entry:hover{ box-shadow:0 8px 24px rgba(0,0,0,.28); }
/* 2026-08-25 (operator): global a:hover{color:#111} overrode the white text on
   the black banner, making it invisible. Keep the banner text white on hover. */
.bs-topic-entry:hover,
.bs-topic-entry:hover .bs-topic-entry__tag,
.bs-topic-entry:hover .bs-topic-entry__title,
.bs-topic-entry:hover .bs-topic-entry__desc{ color:#fff; }
.bs-topic-entry:hover .bs-topic-entry__go{ color:#fff; }
.bs-topic-entry--ss{ background:#131313; }
.bs-topic-entry--sp{ background:#1a1a1a; }
/* Embedded mode (homepage, inside What We Make): tight 18px gap below cards,
   no extra outer padding (2026-08-25 operator). */
.bs-topic-entries--embedded{ padding:0; margin-top:18px; }
.bs-topic-entry__inner{
	position:relative; width:100%; padding:28px 30px 30px;
	display:flex; flex-direction:column; align-items:flex-start;
}
.bs-topic-entry__tag{
	font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em;
	color:#b9b9b9; text-transform:uppercase;
}
.bs-topic-entry__title{
	font-family:'Roboto Condensed',sans-serif; font-size:26px; font-weight:700;
	text-transform:uppercase; margin:8px 0 6px; line-height:1.15; white-space:nowrap;
}
.bs-topic-entry__desc{ font-size:12px; color:#cfcfcf; line-height:1.6; min-height:38px; max-width:78%; }
.bs-topic-entry__go{ position:absolute; top:20px; right:22px; font-family:'JetBrains Mono',monospace; font-size:16px; color:#fff; opacity:.85; }

/* responsive */
@media (max-width:1024px){
	.bs-topic-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px){
	.bs-topic-compare, .bs-topic-entries__grid{ grid-template-columns:1fr 1fr; }
	.bs-topic-grid{ grid-template-columns:repeat(2,1fr); }
	.bs-topic-ladder__row{ grid-template-columns:90px 1fr; }
	.bs-topic-ladder__use{ grid-column:1 / -1; }
	.bs-topic-hero__title{ font-size:40px; }
}
@media (max-width:480px){
	.bs-topic-compare, .bs-topic-entries__grid, .bs-topic-grid, .bs-topic-steps{ grid-template-columns:1fr; }
	.bs-topic-entry{ min-height:210px; }
	.bs-topic-entry__desc{ max-width:100%; }
	.bs-topic-cta{ flex-direction:column; align-items:flex-start; }
	.bs-topic-hero__title{ font-size:32px; }
}

/* ── Topic pages v2 fixes (2026-08-17 operator feedback) ──
   1) Full-bleed: break out of Astra's .ast-container (same pattern as
      .bs-products-page v21.1) so hero/dark sections and the entry banners
      span the full viewport width — no white gutters left/right.
   2) Scope overrides: the topic templates reuse .bs-section__* classes whose
      base styles (centered clamp() titles, default h2 font) differ from the
      approved preview; scope them back to the preview spec. */

#main.bs-topic-page,
.bs-topic-hero,
.bs-topic-entries:not(.bs-topic-entries--embedded){
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	margin-inline:calc(50% - 50vw);
}

/* entry banners sit on the light surface, full width (topic pages only) */
.bs-topic-entries:not(.bs-topic-entries--embedded){
	background:var(--bs-surface);
	padding:56px 0;
}

/* scope section typography back to the approved preview */
.bs-topic-page .bs-section{ padding:72px 0; }
.bs-topic-page .bs-section__label{
	font-family:'JetBrains Mono',monospace;
	font-size:11px; letter-spacing:.22em; color:var(--bs-accent, #c0392b);
	text-transform:uppercase; margin-bottom:8px; text-align:start;
}
.bs-topic-page .bs-section__title{
	font-family:'Roboto Condensed',sans-serif;
	font-size:34px; line-height:1.1; font-weight:700;
	text-transform:uppercase; letter-spacing:.02em;
	color:var(--bs-black); text-align:start; margin-bottom:0;
}
.bs-topic-page .bs-section--dark .bs-section__title{ color:var(--bs-white); }
.bs-topic-page .bs-section__sub{
	color:var(--bs-muted, #666); font-size:14px; max-width:640px;
	line-height:1.7; margin-top:10px; text-align:start;
}
.bs-topic-page .bs-section--dark .bs-section__sub{ color:#aaa; }
.bs-topic-page .bs-section--dark{ background:var(--bs-black); }







/* ── FIELD APPLICATIONS modal (XHS-style, 2026-08-25 operator) ──
   2026-09-04 (operator-approved preview): full-height XHS mode —
   the box now fills the viewport vertically (height:calc(100dvh - 28px)),
   so the right record pane gets the whole screen to scroll and long case
   stories are readable in full without "View full record". */
.bs-fa-card{ cursor:pointer; }
.bs-fa-modal{
	position:fixed; inset:0; background:rgba(8,8,8,.82);
	display:none; align-items:center; justify-content:center;
	z-index:99999; padding:14px;
}
.bs-fa-modal.show{ display:flex; }
.bs-fa-modal__box{
	background:var(--bs-white); width:min(1400px,calc(100vw - 28px));
	height:calc(100vh - 28px); height:calc(100dvh - 28px);
	max-height:calc(100vh - 28px); max-height:calc(100dvh - 28px);
	display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
	overflow:hidden; position:relative;
	box-shadow:0 0 0 1px var(--bs-ink), 18px 18px 0 0 rgba(0,0,0,.5);
}
.bs-fa-modal__media{
	position:relative; background:var(--bs-black); display:flex;
	align-items:center; justify-content:center; overflow:hidden; cursor:grab;
}
.bs-fa-modal__media.grabbing{ cursor:grabbing; }
.bs-fa-modal__media img{
	width:100%; height:100%; object-fit:contain; display:block;
	transform-origin:center center; will-change:transform;
}
.bs-fa-modal__hint{
	position:absolute; top:12px; left:14px; background:rgba(0,0,0,.55); color:var(--bs-white);
	font-family:var(--bs-font-mono); font-size:9px; letter-spacing:.14em;
	padding:5px 10px; text-transform:uppercase; pointer-events:none;
}
/* Carousel caption — the photo role (问题 / 安装 / 效果) of the current frame.
   2026-09-26: the archive modal carries the same 问题 → 安装 → 效果 order as the
   single page, so a visitor always knows which stage they are looking at. */
.bs-fa-modal__caption{
	position:absolute; bottom:12px; left:14px; right:64px;
	background:rgba(0,0,0,.6); color:var(--bs-white);
	font-size:11px; letter-spacing:.04em; padding:4px 10px;
	pointer-events:none; text-align:start;
}
.bs-fa-modal__caption:empty{ display:none; }
.bs-fa-modal__nav{
	position:absolute; top:50%; transform:translateY(-50%);
	width:42px; height:62px; background:rgba(0,0,0,.55); color:var(--bs-white);
	border:0; font-size:26px; line-height:1; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	opacity:.4; transition:opacity .2s ease, background .2s ease;
}
.bs-fa-modal:hover .bs-fa-modal__nav{ opacity:1; }
.bs-fa-modal__nav:hover{ background:var(--bs-black); }
.bs-fa-modal__nav--l{ left:8px; }
.bs-fa-modal__nav--r{ right:8px; }
.bs-fa-modal__nav.off{ opacity:0 !important; pointer-events:none; }
.bs-fa-modal__count{
	position:absolute; bottom:12px; right:12px; background:rgba(0,0,0,.6);
	color:var(--bs-white); font-family:var(--bs-font-mono); font-size:10px;
	letter-spacing:.12em; padding:3px 9px;
}
.bs-fa-modal__side{
	display:flex; flex-direction:column; min-height:0; padding:26px 28px 20px;
}
.bs-fa-modal__tag{
	font-family:var(--bs-font-mono); font-size:10px; letter-spacing:.18em;
	color:#888; text-transform:uppercase; display:flex;
	justify-content:space-between; align-items:center; margin-bottom:12px;
	padding-bottom:12px; border-bottom:1px solid #eee;
}
.bs-fa-modal__side h3{
	font-size:26px; font-weight:700; color:var(--bs-ink); line-height:1.25;
	margin:0 0 8px; text-transform:none;
}
.bs-fa-modal__meta{ font-size:12px; color:#999; margin-bottom:14px; }
.bs-fa-modal__scroll{ overflow:auto; flex:1; min-height:0; padding-right:6px; }
.bs-fa-modal__body{
	font-size:14px; line-height:1.7; color:#222; margin:0 0 12px;
	padding-bottom:12px; border-bottom:1px solid #eee;
}
.bs-fa-modal__field{ border-top:1px solid #eee; padding:11px 0; }
.bs-fa-modal__field h4{
	font-family:var(--bs-font-mono); font-size:9px; letter-spacing:.2em;
	color:#999; text-transform:uppercase; margin:0 0 4px;
}
.bs-fa-modal__field p{ margin:0; font-size:14px; line-height:1.6; color:#222; }
.bs-fa-modal__foot{
	margin-top:12px; padding-top:12px; border-top:1px solid #eee;
	font-family:var(--bs-font-mono); font-size:10px; letter-spacing:.16em;
	color:#999; text-transform:uppercase; display:flex;
	justify-content:space-between; align-items:center;
}
.bs-fa-modal__foot a{ color:var(--bs-ink); font-weight:700; text-decoration:none; border-bottom:1px solid var(--bs-ink); }
.bs-fa-modal__foot a:hover{ opacity:.55; }

/* Back button — outside the modal, fixed bottom-right */
.bs-fa-back{
	position:fixed; right:26px; bottom:26px; z-index:100001;
	background:var(--bs-white); color:var(--bs-ink);
	border:1px solid var(--bs-ink); box-shadow:6px 6px 0 0 var(--bs-ink);
	font-family:var(--bs-font-mono); font-size:12px; letter-spacing:.2em;
	text-transform:uppercase; padding:13px 26px; cursor:pointer;
	display:none; align-items:center; gap:10px;
}
.bs-fa-back.show{ display:flex; }
.bs-fa-back:hover{ background:var(--bs-black); color:var(--bs-white); }

@media (max-width:768px){
	.bs-fa-modal{ padding:10px; }
	.bs-fa-modal__box{
		grid-template-columns:1fr;
		height:calc(100vh - 20px); height:calc(100dvh - 20px);
		max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px);
		overflow:auto;
	}
	.bs-fa-modal__media{ min-height:300px; }
}

/* ── Single Field Record photo set (2026-09-26 operator) ──
   Fixed order 问题 → 安装 → 效果, driven by bs_case_images().
   One column, natural aspect ratio — the site photos are phone-format
   (portrait and landscape mixed), so cropping them to a grid would cut
   off exactly the part that carries the evidence. */
.bs-case-photos{
	display:flex; flex-direction:column; gap:28px; margin:8px 0 0;
}
.bs-case-photos__item{
	margin:0; border:1px solid var(--bs-border); background:var(--bs-white);
}
.bs-case-photos__img{
	display:block; width:100%; height:auto;
}
.bs-case-photos__cap{
	font-family:var(--bs-font-mono); font-size:10px; letter-spacing:.18em;
	text-transform:uppercase; color:var(--bs-text-muted);
	padding:10px 14px; border-top:1px solid var(--bs-border); text-align:start;
}
@media (max-width:768px){
	.bs-case-photos{ gap:20px; }
}