/* SafeCloud B2B Product Page — 1.0.0
   Brand: Ink Navy #0C2233 · Energy Green #0FB67A · Signal Amber #F2A93B
   Type:  Inter for everything — display, body and data.
          Weight and case carry the hierarchy that three families used to.
          Former monospace slots keep tabular figures so spec numbers align. */

.scb2b {
	--sc-ink: #0C2233;
	--sc-ink-70: #40566A;
	--sc-ink-45: #7B8B99;
	--sc-green: #0FB67A;
	--sc-green-dark: #0A8A5C;
	--sc-amber: #F2A93B;
	--sc-line: #DFE5EA;
	--sc-surface: #F5F7F9;
	--sc-white: #FFFFFF;
	--sc-radius: 0;
	--sc-max: 1180px;

	/* One family for everything. Swap these three lines to change the type. */
	--sc-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
	--sc-font-display: var(--sc-font);
	--sc-font-data: var(--sc-font);

	font-family: var(--sc-font);
	color: var(--sc-ink);
	line-height: 1.6;
	max-width: var(--sc-max);
	margin: 0 auto;
	padding: 0 20px 120px;
	-webkit-font-smoothing: antialiased;
}

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

.scb2b h1,
.scb2b h2,
.scb2b h3 {
	font-family: var(--sc-font-display);
	color: var(--sc-ink);
	letter-spacing: -0.01em;
	margin: 0 0 12px;
	line-height: 1.2;
}

.scb2b h2 { font-size: clamp(24px, 3vw, 34px); }
.scb2b h3 { font-size: 17px; }
.scb2b p  { margin: 0 0 14px; }

/* ---------- Breadcrumb ---------- */
.scb2b-breadcrumb {
	font-size: 13px;
	color: var(--sc-ink-45);
	padding: 22px 0 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.scb2b-breadcrumb a { color: var(--sc-ink-70); text-decoration: none; }
.scb2b-breadcrumb a:hover { color: var(--sc-green-dark); text-decoration: underline; }
.scb2b-breadcrumb strong { color: var(--sc-ink); font-weight: 600; }

/* ---------- Hero ---------- */
.scb2b-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 44px;
	padding-bottom: 56px;
	border-bottom: 1px solid var(--sc-line);
}

.scb2b-stage {
	margin: 0;
	background: var(--sc-surface);
	border: 1px solid var(--sc-line);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.scb2b-stage img { width: 100%; height: 100%; object-fit: contain; display: block; }

.scb2b-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.scb2b-thumb {
	width: 74px; height: 74px;
	padding: 0;
	border: 1px solid var(--sc-line);
	background: var(--sc-white);
	cursor: pointer;
	overflow: hidden;
	transition: border-color .15s ease;
}
.scb2b-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.scb2b-thumb:hover { border-color: var(--sc-ink-45); }
.scb2b-thumb.is-active { border-color: var(--sc-green); box-shadow: inset 0 0 0 1px var(--sc-green); }

.scb2b-eyebrow {
	font-family: var(--sc-font-data);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "cv05" 1;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sc-green-dark);
	margin-bottom: 10px;
}
.scb2b-title { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 6px; }
.scb2b-model {
	font-family: var(--sc-font-data);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "cv05" 1;
	font-size: 13px;
	color: var(--sc-ink-70);
	margin-bottom: 16px;
}
.scb2b-intro { color: var(--sc-ink-70); font-size: 15.5px; }

/* ---------- Certification badges ---------- */
.scb2b-badges {
	list-style: none;
	margin: 18px 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.scb2b-badge {
	font-family: var(--sc-font-data);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "cv05" 1;
	font-size: 11.5px;
	letter-spacing: .04em;
	padding: 6px 10px;
	border: 1px solid var(--sc-line);
	background: var(--sc-white);
	color: var(--sc-ink-70);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.scb2b-badge a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--sc-green); }
.scb2b-badge em { font-style: normal; color: var(--sc-ink-45); font-size: 10.5px; }
.scb2b-badge--ip { border-color: var(--sc-amber); color: #8a5f10; background: #FFF8EC; }
.scb2b-badges--large { margin-top: 26px; }

/* ---------- Key spec strip ---------- */
.scb2b-keyspecs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--sc-line);
	border: 1px solid var(--sc-line);
	margin: 20px 0;
}
.scb2b-keyspec { background: var(--sc-white); padding: 12px 12px 10px; }
.scb2b-keyspec dt {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--sc-ink-45);
	margin-bottom: 4px;
}
.scb2b-keyspec dd {
	margin: 0;
	font-family: var(--sc-font-data);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "cv05" 1;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--sc-ink);
}

.scb2b-pricenote {
	background: var(--sc-surface);
	border-left: 3px solid var(--sc-ink);
	padding: 12px 14px;
	font-size: 14px;
	color: var(--sc-ink-70);
	margin: 20px 0 18px;
}
.scb2b-quote-only { font-weight: 600; color: var(--sc-ink); }

/* ---------- Buttons ---------- */
.scb2b-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.scb2b-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: var(--sc-font-display);
	font-size: 15px;
	font-weight: 600;
	padding: 13px 22px;
	border: 1px solid var(--sc-ink);
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.scb2b-btn--primary { background: var(--sc-green); border-color: var(--sc-green); color: #04211A; }
.scb2b-btn--primary:hover { background: var(--sc-green-dark); border-color: var(--sc-green-dark); color: #fff; }
.scb2b-btn--ghost { background: transparent; color: var(--sc-ink); }
.scb2b-btn--ghost:hover { background: var(--sc-ink); color: #fff; }

.scb2b-response {
	font-size: 13px;
	color: var(--sc-ink-45);
	margin-top: 12px;
	display: flex;
	align-items: center;
	gap: 7px;
}
.scb2b-response::before {
	content: "";
	width: 7px; height: 7px;
	background: var(--sc-green);
	border-radius: 50%;
	flex: none;
}

/* Editor-only note: never rendered for visitors. */
.scb2b-editor-hint {
	display: block;
	background: #FFF8EC;
	border: 1px dashed var(--sc-amber);
	color: #8a5f10;
	font-size: 13px;
	padding: 10px 12px;
	margin: 10px 0;
}

/* ---------- Sections ---------- */
.scb2b-section { padding: 56px 0; border-bottom: 1px solid var(--sc-line); }
.scb2b-kicker {
	font-family: var(--sc-font-data);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "cv05" 1;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sc-green-dark);
	margin-bottom: 8px;
}
.scb2b-lead { color: var(--sc-ink-70); max-width: 72ch; font-size: 15.5px; margin-bottom: 26px; }

.scb2b-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--sc-line); border: 1px solid var(--sc-line); }
.scb2b-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scb2b-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scb2b-card { background: var(--sc-white); padding: 22px 20px 20px; }
.scb2b-num {
	font-family: var(--sc-font-data);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "cv05" 1;
	font-size: 12px;
	color: var(--sc-green-dark);
	display: block;
	margin-bottom: 8px;
}
.scb2b-card p { font-size: 14.5px; color: var(--sc-ink-70); margin-bottom: 0; }
.scb2b-inline-spec {
	margin-top: 10px !important;
	font-family: var(--sc-font-data);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "cv05" 1;
	font-size: 12.5px;
	color: var(--sc-ink) !important;
	background: var(--sc-surface);
	padding: 6px 8px;
}

/* ---------- Spec tables ---------- */
.scb2b-spec-group {
	font-family: var(--sc-font-data);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "cv05" 1;
	font-size: 12px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sc-ink-45);
	margin: 30px 0 10px;
}
.scb2b-table { width: 100%; border-collapse: collapse; border: 1px solid var(--sc-line); }
.scb2b-table th,
.scb2b-table td { padding: 11px 14px; text-align: left; font-size: 14.5px; border-bottom: 1px solid var(--sc-line); vertical-align: top; }
.scb2b-table th { width: 42%; font-weight: 500; color: var(--sc-ink-70); background: var(--sc-surface); }
.scb2b-table td { font-family: var(--sc-font-data);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "cv05" 1; color: var(--sc-ink); }
.scb2b-table tr:last-child th,
.scb2b-table tr:last-child td { border-bottom: 0; }

.scb2b-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 26px 0 0; }
.scb2b-figures--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 30px; }
.scb2b-figures figure { margin: 0; border: 1px solid var(--sc-line); background: var(--sc-surface); }
.scb2b-figures img { width: 100%; height: auto; display: block; }
.scb2b-figures figcaption { font-size: 12.5px; color: var(--sc-ink-45); padding: 8px 10px; background: var(--sc-white); border-top: 1px solid var(--sc-line); }
.scb2b-datasheet-cta { margin-top: 26px; }

/* ---------- OEM ---------- */
.scb2b-tags { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.scb2b-tags li { border: 1px solid var(--sc-line); padding: 7px 12px; font-size: 13.5px; color: var(--sc-ink-70); background: var(--sc-white); }
.scb2b-steps { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 12px; }
.scb2b-steps li { display: flex; gap: 14px; align-items: flex-start; border-left: 2px solid var(--sc-line); padding-left: 16px; }
.scb2b-step-index {
	font-family: var(--sc-font-data);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "cv05" 1;
	background: var(--sc-ink);
	color: #fff;
	width: 26px; height: 26px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 13px;
	flex: none;
}
.scb2b-steps p { font-size: 14.5px; color: var(--sc-ink-70); margin: 4px 0 0; }

/* ---------- FAQ ---------- */
.scb2b-accordion { border: 1px solid var(--sc-line); }
.scb2b-faq-item { border-bottom: 1px solid var(--sc-line); }
.scb2b-faq-item:last-child { border-bottom: 0; }
.scb2b-faq-item summary {
	cursor: pointer;
	padding: 16px 46px 16px 18px;
	font-family: var(--sc-font-display);
	font-weight: 600;
	font-size: 15.5px;
	list-style: none;
	position: relative;
	background: var(--sc-white);
}
.scb2b-faq-item summary::-webkit-details-marker { display: none; }
.scb2b-faq-item summary::after {
	content: "+";
	position: absolute;
	right: 0; top: 0; bottom: 0;
	width: 44px;
	background: var(--sc-ink);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
	font-weight: 400;
}
.scb2b-faq-item[open] summary::after { content: "\2212"; background: var(--sc-green); color: #04211A; }
.scb2b-faq-body { padding: 0 18px 18px; }
.scb2b-faq-body p { font-size: 14.5px; color: var(--sc-ink-70); margin: 0; }

/* ---------- Related (internal links) ---------- */
.scb2b-related-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.scb2b-related-list a {
	display: block;
	border: 1px solid var(--sc-line);
	padding: 14px 16px;
	text-decoration: none;
	color: var(--sc-ink);
	font-weight: 600;
	font-size: 14.5px;
	transition: border-color .15s ease, color .15s ease;
}
.scb2b-related-list a::after { content: " \2192"; color: var(--sc-green-dark); }
.scb2b-related-list a:hover { border-color: var(--sc-green); color: var(--sc-green-dark); }

/* ---------- RFQ ---------- */
.scb2b-rfq-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }
.scb2b-checklist { background: var(--sc-surface); border: 1px solid var(--sc-line); padding: 20px; }
.scb2b-checklist h3 { font-size: 15px; margin-bottom: 10px; }
.scb2b-checklist ul { margin: 0 0 14px; padding-left: 18px; }
.scb2b-checklist li { font-size: 14px; color: var(--sc-ink-70); margin-bottom: 6px; }

.scb2b-form { border: 1px solid var(--sc-line); padding: 24px; background: var(--sc-white); }
.scb2b-attached {
	font-family: var(--sc-font-data);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "cv05" 1;
	font-size: 12.5px;
	color: var(--sc-ink-70);
	background: var(--sc-surface);
	padding: 9px 12px;
	margin-bottom: 18px;
}
.scb2b-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.scb2b-form label,
.scb2b-block { display: block; }
.scb2b-form label > span {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--sc-ink-70);
	margin-bottom: 5px;
}
.scb2b-form input[type="text"],
.scb2b-form input[type="email"],

.scb2b-form select,
.scb2b-form textarea {
	width: 100%;
	border: 1px solid var(--sc-line);
	background: var(--sc-white);
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--sc-ink);
	border-radius: 0;
}
.scb2b-form input:focus,
.scb2b-form select:focus,
.scb2b-form textarea:focus { outline: 2px solid var(--sc-green); outline-offset: -2px; }
.scb2b-form .scb2b-block { margin-top: 14px; }
.scb2b-form small { display: block; font-size: 12px; color: var(--sc-ink-45); margin-top: 5px; }
.scb2b-fieldset { border: 1px solid var(--sc-line); padding: 12px 14px; margin: 16px 0 0; }
.scb2b-fieldset legend { font-size: 13px; font-weight: 600; color: var(--sc-ink-70); padding: 0 6px; }
.scb2b-check { display: inline-flex !important; align-items: center; gap: 6px; margin: 4px 14px 4px 0; font-size: 14px; }
.scb2b-consent { font-size: 12.5px; color: var(--sc-ink-45); margin: 16px 0 12px; }
.scb2b-submit { width: 100%; }
.scb2b-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.scb2b-alert { padding: 13px 16px; font-size: 14.5px; margin-bottom: 20px; border-left: 3px solid; }
.scb2b-alert--ok { background: #EAF9F3; border-color: var(--sc-green); color: #075B3D; }
.scb2b-alert--error { background: #FDECEC; border-color: #D33; color: #8A1F1F; }

.scb2b-longform { color: var(--sc-ink-70); }
.scb2b-longform a { color: var(--sc-green-dark); }

/* ---------- Sticky bar ---------- */
.scb2b-sticky {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 99;
	background: var(--sc-ink);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 20px;
	font-size: 14px;
	transform: translateY(110%);
	transition: transform .22s ease;
}
.scb2b-sticky.is-visible { transform: translateY(0); }
.scb2b-sticky-actions { display: flex; align-items: center; gap: 14px; }
.scb2b-sticky a { color: #fff; text-decoration: none; font-size: 14px; }
.scb2b-sticky .scb2b-btn { padding: 9px 18px; font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.scb2b-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.scb2b-keyspecs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.scb2b-related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.scb2b-rfq-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	.scb2b-hero { grid-template-columns: 1fr; gap: 28px; }
	.scb2b-grid--3 { grid-template-columns: 1fr; }
	.scb2b-figures,
	.scb2b-figures--3 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.scb2b { padding: 0 16px 110px; }
	.scb2b-section { padding: 40px 0; }
	.scb2b-grid--4 { grid-template-columns: 1fr; }
	.scb2b-form-grid { grid-template-columns: 1fr; }
	.scb2b-related-list { grid-template-columns: 1fr; }
	.scb2b-table th { width: 50%; }
	.scb2b-actions .scb2b-btn { width: 100%; }
	.scb2b-sticky { font-size: 13px; padding: 8px 14px; }
	.scb2b-sticky span:first-child { max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media print {
	.scb2b-sticky,
	.scb2b-rfq,
	.scb2b-thumbs { display: none !important; }
	.scb2b-section { break-inside: avoid; }
}

/* ==========================================================================
   1.0.3 — Floating inquiry button + quick inquiry dialog
   Scoped outside .scb2b so the CSS variables are redeclared here.
   ========================================================================== */

.scb2b-float,
.scb2b-modal {
	--sc-ink: #0C2233;
	--sc-ink-70: #40566A;
	--sc-ink-45: #7B8B99;
	--sc-green: #0FB67A;
	--sc-green-dark: #0A8A5C;
	--sc-line: #DFE5EA;
	--sc-surface: #F5F7F9;
	--sc-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
	--sc-font-display: var(--sc-font);
	--sc-font-data: var(--sc-font);
	font-family: var(--sc-font);
}

.scb2b-float {
	position: fixed;
	right: 20px;
	bottom: 76px;
	z-index: 998;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.scb2b-float__icon {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--sc-ink);
	border: 1px solid var(--sc-line);
	box-shadow: 0 4px 14px rgba(12, 34, 51, .12);
	text-decoration: none;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.scb2b-float__icon:hover { background: var(--sc-ink); color: #fff; transform: translateY(-1px); }
.scb2b-float__icon--wa:hover { background: #25D366; color: #fff; }

.scb2b-float__main {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--sc-green);
	color: #04211A;
	border: 1px solid var(--sc-green);
	font-family: var(--sc-font-display);
	font-size: 15px;
	font-weight: 700;
	padding: 13px 20px;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(15, 182, 122, .35);
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.scb2b-float__main:hover { background: var(--sc-green-dark); color: #fff; transform: translateY(-1px); }
.scb2b-float__main:focus-visible { outline: 3px solid var(--sc-ink); outline-offset: 2px; }

/* Fade the floater out while the full RFQ form is on screen. */
.scb2b-float.is-muted { opacity: 0; pointer-events: none; transform: translateY(8px); }
.scb2b-float { transition: opacity .2s ease, transform .2s ease; }

/* ---------- Dialog ---------- */
.scb2b-modal[hidden] { display: none; }
.scb2b-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.scb2b-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 34, 51, .62);
	backdrop-filter: blur(2px);
}
.scb2b-modal__panel {
	position: relative;
	background: #fff;
	border: 1px solid var(--sc-line);
	width: 100%;
	max-width: 560px;
	max-height: 88vh;
	overflow-y: auto;
	padding: 28px 28px 24px;
	box-shadow: 0 24px 60px rgba(12, 34, 51, .3);
}
.scb2b-modal__panel h2 {
	font-family: var(--sc-font-display);
	font-size: 22px;
	color: var(--sc-ink);
	margin: 0 0 8px;
	line-height: 1.25;
}
.scb2b-modal__intro { color: var(--sc-ink-70); font-size: 14.5px; margin: 0 0 14px; }
.scb2b-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: 0;
	font-size: 30px;
	line-height: 1;
	color: var(--sc-ink-45);
	cursor: pointer;
	padding: 4px 8px;
}
.scb2b-modal__close:hover { color: var(--sc-ink); }
.scb2b-modal .scb2b-form { border: 0; padding: 0; }
.scb2b-modal .scb2b-submit { width: 100%; margin-top: 16px; }
.scb2b-modal__full { margin: 12px 0 0; font-size: 13.5px; }
.scb2b-modal__full a { color: var(--sc-green-dark); }

body.scb2b-modal-open { overflow: hidden; }

@media (max-width: 640px) {
	.scb2b-float { right: 12px; bottom: 68px; gap: 8px; }
	.scb2b-float__main { padding: 12px 16px; font-size: 14px; }
	.scb2b-float__icon { width: 40px; height: 40px; }
	.scb2b-modal { padding: 0; align-items: flex-end; }
	.scb2b-modal__panel { max-width: none; max-height: 92vh; padding: 22px 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.scb2b-float,
	.scb2b-float__main,
	.scb2b-float__icon { transition: none; }
}

@media print {
	.scb2b-float,
	.scb2b-modal { display: none !important; }
}

/* ==========================================================================
   1.0.5 — Inter refinements
   With one family doing all the work, hierarchy has to come from weight,
   size, case and tracking instead of from contrasting typefaces.
   ========================================================================== */

/* Inter needs progressively tighter tracking as size increases. */
.scb2b-title { letter-spacing: -0.022em; font-weight: 700; }
.scb2b h2 { letter-spacing: -0.018em; font-weight: 700; }
.scb2b h3 { letter-spacing: -0.011em; font-weight: 600; }
.scb2b-modal__panel h2 { letter-spacing: -0.018em; font-weight: 700; }

/* Eyebrows and kickers carried a monospace look before. Uppercase plus open
   tracking plus a heavier weight reads as "label" without a second family. */
.scb2b-eyebrow,
.scb2b-kicker,
.scb2b-spec-group { font-weight: 600; letter-spacing: .1em; }

/* Data slots: numerals must stay column-aligned in the spec tables. */
.scb2b-keyspec dd { font-weight: 600; letter-spacing: -0.005em; }
.scb2b-table td { font-weight: 500; }
.scb2b-table th { font-weight: 500; letter-spacing: 0; }
.scb2b-model { font-weight: 500; letter-spacing: .01em; }
.scb2b-badge { font-weight: 600; letter-spacing: .045em; }
.scb2b-num { font-weight: 700; letter-spacing: .06em; }
.scb2b-step-index { font-weight: 700; }
.scb2b-inline-spec,
.scb2b-attached { font-weight: 500; letter-spacing: -0.002em; }

/* Buttons: Inter at 600 is the sweet spot; 700 looks shouty at this size. */
.scb2b-btn { font-weight: 600; letter-spacing: -0.006em; }
.scb2b-float__main { font-weight: 600; letter-spacing: -0.006em; }
.scb2b-faq-item summary { font-weight: 600; letter-spacing: -0.008em; }

/* Body copy reads better very slightly loosened at these sizes. */
.scb2b-intro,
.scb2b-lead,
.scb2b-card p,
.scb2b-faq-body p { letter-spacing: -0.003em; }

/* Form labels were competing with their inputs at the old weight. */
.scb2b-form label > span { font-weight: 600; letter-spacing: .002em; }

/* 1.0.6 — datasheet request fallback note */
.scb2b-datasheet-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.scb2b-datasheet-note { font-size: 13px; color: var(--sc-ink-45); max-width: 46ch; letter-spacing: -0.002em; }
.scb2b-datasheet-cta button { font: inherit; }

/* ==========================================================================
   1.0.7 — standalone layout reset
   The theme's shop wrapper opens a content/sidebar grid. In standalone mode we
   render the whole page ourselves, so that grid has to collapse to one column
   or the empty sidebar steals width and the hero overflows the viewport.
   Selectors are deliberately broad and scoped to body.scb2b-standalone, so
   they cannot affect any other page on the site.
   ========================================================================== */

body.scb2b-standalone .scb2b-standalone-wrap {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	grid-column: 1 / -1;
	float: none;
	clear: both;
}

/* Collapse whatever grid or flex row the theme opened around the content. */
body.scb2b-standalone .ct-container,
body.scb2b-standalone .ct-container-full,
body.scb2b-standalone .ct-content-blocks,
body.scb2b-standalone #main-container,
body.scb2b-standalone #primary,
body.scb2b-standalone .site-main,
body.scb2b-standalone main {
	display: block !important;
	grid-template-columns: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	float: none !important;
}

/* An empty sidebar column must not reserve space. */
body.scb2b-standalone .ct-sidebar,
body.scb2b-standalone #secondary,
body.scb2b-standalone .widget-area,
body.scb2b-standalone .woocommerce-sidebar {
	display: none !important;
}

/* Guard against any ancestor that would clip the hero horizontally. */
body.scb2b-standalone { overflow-x: hidden; }
body.scb2b-standalone .scb2b { overflow: visible; }

/* Keep the theme's own product notices readable inside our container. */
body.scb2b-standalone .woocommerce-notices-wrapper {
	max-width: var(--sc-max, 1180px);
	margin: 0 auto;
	padding: 0 20px;
}

/* ==========================================================================
   1.2.2 — galleries of any length, and a grid that survives a short row
   ========================================================================== */

/* The strip already wrapped; these keep it tidy once it runs to two rows. */
.scb2b-thumbs { row-gap: 8px; }
.scb2b-thumb { flex: 0 0 auto; }

/* A filler cell keeps the divider backdrop from showing through an
   incomplete final row. It carries no content and is hidden from
   assistive technology. */
.scb2b-keyspec--filler { background: var(--sc-white); }

@media (max-width: 640px) {
	.scb2b-thumb { width: 60px; height: 60px; }
	/* Two columns on mobile, so pad-to-four still lands on a full row. */
	.scb2b-keyspec--filler { display: block; }
}

/* ==========================================================================
   1.2.3 — one-row gallery, optional attachment, button colour defence
   ========================================================================== */

/* ---------- Gallery: a single row that scrolls ---------- */
.scb2b-thumbs-wrap {
	position: relative;
	margin-top: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.scb2b-thumbs {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: nowrap;          /* was wrap — a second row pushed the page down */
	gap: 10px;
	margin-top: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.scb2b-thumbs::-webkit-scrollbar { display: none; }
.scb2b-thumb { scroll-snap-align: start; }

.scb2b-thumbnav {
	flex: 0 0 auto;
	width: 30px;
	height: 74px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sc-white);
	border: 1px solid var(--sc-line);
	color: var(--sc-ink);
	cursor: pointer;
	padding: 0;
	transition: background .15s ease, color .15s ease;
}
.scb2b-thumbnav:hover { background: var(--sc-ink); color: #fff; }
.scb2b-thumbnav[hidden] { display: none; }
.scb2b-thumbnav:focus-visible { outline: 2px solid var(--sc-green); outline-offset: 1px; }

/* ---------- Button colour defence ----------
   Blocksy styles button[type="submit"] with the theme accent at a higher
   specificity than our single class, so "Submit RFQ" rendered yellow while
   "Request a project quote" stayed green. Same class, two colours. Raise our
   specificity rather than scatter !important through the stylesheet. */
.scb2b .scb2b-btn.scb2b-btn--primary,
.scb2b button.scb2b-btn--primary,
.scb2b input[type="submit"].scb2b-btn--primary,
.scb2b-modal .scb2b-btn.scb2b-btn--primary,
.scb2b-float .scb2b-float__main {
	background-color: var(--sc-green);
	border-color: var(--sc-green);
	color: #04211A;
}
.scb2b .scb2b-btn.scb2b-btn--primary:hover,
.scb2b button.scb2b-btn--primary:hover,
.scb2b-modal .scb2b-btn.scb2b-btn--primary:hover {
	background-color: var(--sc-green-dark);
	border-color: var(--sc-green-dark);
	color: #fff;
}
.scb2b .scb2b-btn.scb2b-btn--ghost,
.scb2b button.scb2b-btn--ghost {
	background-color: transparent;
	border-color: var(--sc-ink);
	color: var(--sc-ink);
}
.scb2b .scb2b-btn.scb2b-btn--ghost:hover,
.scb2b button.scb2b-btn--ghost:hover {
	background-color: var(--sc-ink);
	color: #fff;
}

@media (max-width: 640px) {
	.scb2b-thumbnav { height: 60px; width: 26px; }
}

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

/* ==========================================================================
   1.2.5 — thumbnails: fill the frame, and stop the theme painting them
   ========================================================================== */

/* ---------- The image fills its canvas ----------
   'thumbnail' is soft-cropped on this site, so a wide source arrived as
   150x100 and object-fit:contain letterboxed it inside the 74px square —
   a small picture floating in white. cover fills the frame and crops the
   long edge, which is what a contact strip should look like. The stage
   image stays on contain: there the whole product has to be visible. */
.scb2b .scb2b-thumb img,
.scb2b-thumbs-wrap .scb2b-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ---------- Theme colour defence ----------
   .scb2b-thumb is a <button>, and the plugin only ever styled it through a
   single class. Blocksy reaches the same element at a higher specificity and
   was painting the focused thumbnail in the theme accent — the pink frame.
   Every decorative property is restated here at a specificity that wins,
   rather than scattering !important. */
.scb2b .scb2b-thumbs button.scb2b-thumb,
.scb2b-thumbs-wrap button.scb2b-thumb {
	width: 74px;
	height: 74px;
	flex: 0 0 auto;
	padding: 0;
	margin: 0;
	background: var(--sc-white);
	background-image: none;
	border: 1px solid var(--sc-line);
	border-radius: 0;
	box-shadow: none;
	outline: none;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.scb2b .scb2b-thumbs button.scb2b-thumb:hover,
.scb2b-thumbs-wrap button.scb2b-thumb:hover {
	background: var(--sc-white);
	border-color: var(--sc-ink-45);
	box-shadow: none;
}

/* Clicking a thumbnail must not leave the theme's ring behind. Keyboard
   focus still gets a visible ring below — this only drops the mouse one. */
.scb2b .scb2b-thumbs button.scb2b-thumb:focus:not(:focus-visible),
.scb2b-thumbs-wrap button.scb2b-thumb:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.scb2b .scb2b-thumbs button.scb2b-thumb.is-active,
.scb2b-thumbs-wrap button.scb2b-thumb.is-active {
	border-color: var(--sc-green);
	box-shadow: inset 0 0 0 2px var(--sc-green);
}

/* Keyboard focus, in our own colour, drawn outside the frame so it never
   competes with the inset active marker. */
.scb2b .scb2b-thumbs button.scb2b-thumb:focus-visible,
.scb2b-thumbs-wrap button.scb2b-thumb:focus-visible {
	outline: 2px solid var(--sc-green);
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.scb2b .scb2b-thumbs button.scb2b-thumb,
	.scb2b-thumbs-wrap button.scb2b-thumb { width: 60px; height: 60px; }
}