/*
 * Machine Detail Page Styles
 * Transcribed 100% verbatim from Codex static styles.css
 * Covering: .product-hero, .benefit-strip, .dense-section, .number-title,
 * .fit-grid, .two-col, .process.six, .spec-layout, .official-spec, .module-card,
 * .line-flow, .card, .project-form
 */

/* =========================================================
   1. DENSE SECTIONS & NUMBER TITLE
   ========================================================= */
.dense-section {
	padding-top: 64px;
	padding-bottom: 64px;
	width: 100%;
}

.dense-section > * {
	max-width: 1256px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(20px, 4vw, 40px);
	padding-right: clamp(20px, 4vw, 40px);
}

.dense-section.alt {
	max-width: none;
	background: #f5f8f4;
}

.dense-section.alt > * {
	max-width: 1256px;
	margin-left: auto;
	margin-right: auto;
}

.number-title {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	margin-bottom: 28px;
}

.number-title > b {
	display: grid;
	place-items: center;
	min-width: 52px;
	height: 48px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--forest), #287250);
	color: var(--lime2);
	font-size: 18px;
}

.number-title .eyebrow {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	font-weight: 900;
	color: #52780c;
	display: block;
	margin-bottom: 4px;
}

.number-title h2 {
	font-size: clamp(28px, 3vw, 42px);
	margin: 3px 0 4px;
	line-height: 1.15;
	letter-spacing: -0.04em;
	color: var(--ink);
}

.number-title p {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
}

/* =========================================================
   2. PRODUCT HERO (Triple Column Layout)
   ========================================================= */
.product-hero {
	max-width: none;
	padding: 42px clamp(20px, 4vw, 64px);
	display: grid;
	grid-template-columns: 1.02fr 0.95fr 0.58fr;
	gap: 24px;
	align-items: stretch;
	background: linear-gradient(135deg, #0a2a20, #174d36);
	color: #fff;
	width: 100%;
}

.product-hero-copy {
	padding: 28px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.product-hero .eyebrow {
	display: inline-block;
	color: var(--lime2);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 900;
	margin-bottom: 12px;
}

.product-hero .badge {
	display: inline-block;
	border: 1px solid #98bd9d;
	background: #edf7ed;
	color: #21562e;
	border-radius: 999px;
	padding: 5px 10px;
	font-size: 11px;
	font-weight: 800;
	margin-bottom: 14px;
	align-self: flex-start;
}

.product-hero h1 {
	font-size: clamp(40px, 5vw, 68px);
	line-height: 1.06;
	letter-spacing: -0.05em;
	margin: 0 0 16px;
	color: #fff;
}

.product-hero .lead {
	color: #d7e3dc;
	font-size: 18px;
	line-height: 1.6;
	margin: 0 0 24px;
}

.product-hero .hero-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.product-hero .btn.ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}

.hero-metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 28px;
}

.hero-metrics span {
	border: 1px solid rgba(255, 255, 255, 0.18);
	padding: 11px;
	border-radius: 8px;
	font-size: 12px;
	color: #d6e3dc;
}

.hero-metrics b {
	display: block;
	color: var(--lime2);
	margin-bottom: 3px;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Product Hero Visual */
.product-visual {
	position: relative;
	background: linear-gradient(145deg, #f7faf5, #dfe9df);
	border-radius: 16px;
	display: grid;
	place-items: center;
	overflow: hidden;
	min-height: 410px;
	padding: 20px;
}

.product-visual img {
	max-height: 380px;
	width: 100%;
	object-fit: contain;
	filter: drop-shadow(0 24px 24px rgba(0, 0, 0, 0.22));
}

.visual-label {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 12px;
	background: rgba(7, 29, 22, 0.82);
	padding: 8px 12px;
	border-radius: 6px;
	text-align: center;
	font-size: 11px;
	color: #fff;
}

/* Quick Selection Panel */
.quick-panel {
	background: #fff;
	color: var(--ink);
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.quick-panel .eyebrow {
	color: #52780c;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.quick-panel h3 {
	font-size: 18px;
	margin: 0 0 16px;
}

.quick-panel .data-table > div {
	grid-template-columns: 0.75fr 1.25fr;
	padding: 9px 0;
}

.quick-panel .btn {
	width: 100%;
	margin-top: 18px;
}

/* =========================================================
   3. BENEFIT STRIP
   ========================================================= */
.benefit-strip {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px clamp(20px, 5vw, 72px);
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	border-bottom: 1px solid var(--line);
	background: #fff;
	width: 100%;
}

.feature-tile {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	border: 1px solid var(--line);
	background: #fff;
	padding: 17px;
	border-radius: 10px;
}

.feature-tile > span {
	display: grid;
	place-items: center;
	min-width: 27px;
	height: 27px;
	border-radius: 50%;
	background: #e7f5d2;
	color: #4c7800;
	font-weight: 900;
	font-size: 13px;
	flex-shrink: 0;
}

.feature-tile strong {
	display: block;
	font-size: 14px;
	color: var(--ink);
}

.feature-tile p {
	margin: 4px 0 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.4;
}

/* =========================================================
   4. APPLICATION BOUNDARY (Fit Grid)
   ========================================================= */
.fit-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.fit {
	padding: 26px;
	border-radius: 13px;
}

.fit h3 {
	margin: 0 0 16px;
	font-size: 19px;
}

.fit.yes {
	background: #edf8e9;
	border: 1px solid #cde5c7;
}

.fit.yes h3 {
	color: #276116;
}

.fit.no {
	background: #fff2f0;
	border: 1px solid #f0d3ce;
}

.fit.no h3 {
	color: #9c271d;
}

.fit ul {
	margin: 0;
	padding-left: 20px;
}

.fit ul.ticks {
	list-style: none;
	padding-left: 0;
}

.fit ul.ticks li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 10px;
	line-height: 1.5;
	font-size: 14px;
}

.fit ul.ticks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #4c7800;
	font-weight: 900;
}

.fit.no li {
	margin: 8px 0;
	line-height: 1.5;
	font-size: 14px;
}

/* =========================================================
   5. WORKING PRINCIPLE (Two Col)
   ========================================================= */
.two-col {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 40px;
	align-items: center;
}

.two-col h3 {
	font-size: 24px;
	margin: 0 0 16px;
	line-height: 1.3;
}

.two-col p {
	color: var(--muted);
	line-height: 1.65;
	margin-bottom: 18px;
}

.callout {
	background: #eaf3ff;
	border-left: 4px solid #2b6dae;
	padding: 17px 20px;
	margin-top: 22px;
	border-radius: 7px;
}

.callout strong {
	display: block;
	color: #1a4f82;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 4px;
}

.callout p {
	margin: 4px 0 0;
	font-size: 13px;
	color: #2b547e;
}

.photo-panel {
	border-radius: 15px;
	background: linear-gradient(145deg, #f8faf6, #e1eae1);
	display: grid;
	place-items: center;
	min-height: 320px;
	overflow: hidden;
	padding: 20px;
	border: 1px solid var(--line);
}

.photo-panel img {
	max-height: 320px;
	object-fit: contain;
	width: 100%;
}

/* =========================================================
   6. PROCESS FLOW (6 Columns Grid)
   ========================================================= */
.process.six {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
}

.process.six > div {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 20px;
	display: flex;
	flex-direction: column;
}

.process.six b {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #edf5e5;
	color: #4b780a;
	font-size: 13px;
	margin-bottom: 12px;
}

.process.six h3 {
	font-size: 14px;
	margin: 0 0 8px;
	line-height: 1.3;
}

.process.six p {
	font-size: 12px;
	color: var(--muted);
	margin: 0;
	line-height: 1.45;
}

/* =========================================================
   7. SELECTION FRAMEWORK & SPECS
   ========================================================= */
.spec-layout {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 24px;
	align-items: start;
}

.data-table {
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.data-table > div {
	display: grid;
	grid-template-columns: 0.65fr 1.35fr;
	border-bottom: 1px solid var(--line);
}

.data-table > div:last-child {
	border-bottom: 0;
}

.data-table strong,
.data-table span {
	padding: 12px 15px;
	font-size: 13px;
}

.data-table strong {
	background: #eef5ef;
	color: var(--ink);
	font-weight: 700;
}

.data-table span {
	color: #3b5245;
}

.panel {
	border: 1px solid var(--line);
	background: #fff;
	border-radius: 12px;
	padding: 26px;
}

.panel h3 {
	font-size: 18px;
	margin: 0 0 16px;
}

.panel p {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 16px;
}

.panel ul.ticks {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.panel ul.ticks li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 10px;
	font-size: 13px;
	color: #475e51;
	line-height: 1.5;
}

.panel ul.ticks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #4c7800;
	font-weight: 900;
}

/* Official Specs */
.official-spec {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
}

.official-spec-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 20px 24px;
	border-bottom: 1px solid var(--line);
	background: #fbfdfa;
}

.official-spec-head .eyebrow {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #557d22;
	font-weight: 800;
	margin-bottom: 4px;
}

.official-spec-head h3 {
	margin: 0;
	font-size: 20px;
}

.official-summary {
	padding: 20px 24px;
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.official-summary .data-table > div {
	grid-template-columns: 0.85fr 1.15fr;
}

.official-table-wrap {
	overflow-x: auto;
}

.official-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	text-align: left;
}

.official-table th,
.official-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
}

.official-table thead th {
	background: var(--forest);
	color: #fff;
	font-weight: 750;
	white-space: nowrap;
}

.official-table tbody tr:hover {
	background: #f7faf5;
}

/* =========================================================
   8. KEY ASSEMBLIES & LINE INTEGRATION
   ========================================================= */
.grid.four {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.grid.three {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.module-card {
	border: 1px solid var(--line);
	background: #fff;
	border-radius: 12px;
	padding: 22px;
	display: flex;
	flex-direction: column;
}

.module-card > span {
	color: #549000;
	font-weight: 900;
	font-size: 16px;
	margin-bottom: 8px;
}

.module-card h3 {
	font-size: 16px;
	margin: 0 0 8px;
}

.module-card p {
	color: var(--muted);
	font-size: 13px;
	margin: 0;
	line-height: 1.5;
}

/* Plant Line Flow */
.line-flow {
	display: flex;
	align-items: stretch;
	gap: 22px;
	overflow-x: auto;
	padding: 8px 3px 22px;
}

.line-flow a {
	min-width: 180px;
	flex: 1;
	border: 1px solid var(--line);
	background: #fff;
	border-radius: 11px;
	padding: 20px;
	position: relative;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.line-flow a:not(:last-child):after {
	content: '→';
	position: absolute;
	right: -18px;
	top: 43%;
	color: #6aa713;
	font-size: 23px;
	font-weight: 800;
}

.line-flow a.active {
	background: var(--forest);
	color: #fff;
	border-color: var(--forest);
}

.line-flow a.active strong {
	color: #fff;
}

.line-flow a span {
	font-size: 12px;
	font-weight: 800;
	color: #517b18;
}

.line-flow a.active span {
	color: var(--lime);
}

.line-flow a strong {
	font-size: 14px;
	color: var(--ink);
}

.center-note {
	text-align: center;
	color: var(--muted);
	font-size: 13px;
	margin-top: 10px;
}

/* =========================================================
   9. SECTION 08 CARD (Codex .card Standard)
   ========================================================= */
.card {
	border: 1px solid var(--line);
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.card:hover {
	border-color: #99b888;
	box-shadow: 0 10px 25px rgba(25, 61, 41, 0.08);
}

.card-img {
	height: 210px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: #f7f9f5;
	overflow: hidden;
}

.card-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.card-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.card-body .eyebrow {
	font-size: 11px;
	color: #557d22;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
}

.card-body h3 {
	margin: 0 0 10px;
	font-size: 17px;
	line-height: 1.3;
}

.card-body h3 a {
	color: var(--ink);
}

.card-body h3 a:hover {
	color: #4b710c;
}

.card-body p {
	font-size: 13px;
	color: var(--muted);
	margin: 0 0 16px;
	line-height: 1.5;
}

.card-body .text-link {
	margin-top: auto;
}

/* Machine FAQ */
.dense-section.faq details {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 9px;
	margin-bottom: 12px;
	padding: 16px 20px;
}

.dense-section.faq summary {
	font-weight: 750;
	cursor: pointer;
	color: var(--ink);
	font-size: 15px;
}

.dense-section.faq p {
	margin: 12px 0 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.6;
}

/* =========================================================
   10. SECTION 11 INQUIRY FORM (.project-form Standard)
   ========================================================= */
.project-form {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 34px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 15px;
}

.project-form label {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	font-weight: 750;
	gap: 8px;
	color: var(--ink);
}

.project-form input,
.project-form select,
.project-form textarea {
	font: inherit;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 12px 14px;
	background: #fbfdfa;
	color: var(--ink);
	font-size: 14px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.project-form input:focus,
.project-form select:focus,
.project-form textarea:focus {
	border-color: #62951b;
	background: #fff;
	outline: none;
	box-shadow: 0 0 0 3px rgba(103, 150, 38, 0.15);
}

.project-form textarea {
	min-height: 110px;
	resize: vertical;
}

.project-form label:has(textarea),
.project-form .consent,
.project-form .form-note,
.project-form .btn {
	grid-column: 1 / -1;
}

.project-form .consent {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	font-weight: 500;
	font-size: 13px;
	color: #556c5e;
	margin-top: 5px;
}

.project-form .consent input {
	margin-top: 3px;
}

.project-form .btn.lime {
	min-width: 260px;
	justify-self: start;
	margin-top: 10px;
}

.project-form .form-note {
	font-size: 12px;
	color: var(--muted);
	margin: 5px 0 0;
	line-height: 1.5;
}

/* =========================================================
   11. RESPONSIVE (MACHINE PAGE)
   ========================================================= */
@media (max-width: 1180px) {
	.product-hero {
		grid-template-columns: 1fr 1fr;
	}
	.quick-panel {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 20px;
	}
	.quick-panel .btn {
		grid-column: 1 / -1;
	}
	.benefit-strip {
		grid-template-columns: repeat(3, 1fr);
	}
	.process.six {
		grid-template-columns: repeat(3, 1fr);
	}
	.grid.four {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 820px) {
	.product-hero {
		grid-template-columns: 1fr;
		padding: 30px 20px;
	}
	.quick-panel {
		grid-column: auto;
		display: block;
	}
	.benefit-strip,
	.fit-grid,
	.spec-layout,
	.two-col,
	.grid.four,
	.grid.three,
	.project-form {
		grid-template-columns: 1fr;
	}
	.process.six {
		grid-template-columns: 1fr 1fr;
	}
	.product-visual {
		min-height: 300px;
	}
	.hero-metrics {
		grid-template-columns: 1fr;
	}
}


/* Product Hero Visual Card */
.product-hero .product-visual {
	position: relative;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.15);
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	min-height: 440px;
	padding: 24px 20px 60px;
	box-sizing: border-box;
}

.product-hero .product-visual .main-visual-wrapper {
	width: 100%;
	flex: 1;
	min-height: 330px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.product-hero .product-visual .main-visual-wrapper img {
	max-height: 330px;
	width: 100%;
	object-fit: contain;
	filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.12));
	transition: opacity 0.2s ease;
}

.product-hero .product-visual .main-video-iframe-wrap {
	width: 100% !important;
	aspect-ratio: 16 / 9 !important;
	height: auto !important;
	max-height: none !important;
	position: static !important;
	margin: auto 0;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.product-hero .product-visual .main-video-iframe-wrap iframe {
	width: 100% !important;
	height: 100% !important;
	border: none;
	display: block;
}

/* Gallery Thumbnails Floating Bar */
.product-visual-gallery {
	display: flex;
	gap: 12px;
	margin-top: 18px;
	margin-bottom: 6px;
	flex-wrap: wrap;
	justify-content: center;
	z-index: 3;
	position: relative;
}

.product-thumb-item {
	width: 58px;
	height: 58px;
	border-radius: 10px;
	border: 2px solid #e1e9e2;
	overflow: hidden;
	cursor: pointer;
	background: #f7faf7;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3px;
	box-sizing: border-box;
	position: relative;
}

.product-thumb-item:hover {
	transform: translateY(-2px);
	border-color: #679626;
	box-shadow: 0 5px 14px rgba(103, 150, 38, 0.25);
}

.product-thumb-item.active {
	border-color: #679626;
	box-shadow: 0 0 0 3px rgba(103, 150, 38, 0.3);
	background: #fff;
}

.product-thumb-item img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	position: static !important;
	display: block !important;
	filter: none !important;
}

/* Video Thumb Special Badge */
.product-thumb-item.video-thumb {
	background: #113626;
	border-color: #e1e9e2;
}

.product-thumb-item.video-thumb:hover {
	border-color: #cc181e;
	box-shadow: 0 5px 14px rgba(204, 24, 30, 0.35);
}

.product-thumb-item.video-thumb.active {
	border-color: #cc181e;
	box-shadow: 0 0 0 3px rgba(204, 24, 30, 0.35);
}

.product-thumb-item.video-thumb .play-icon {
	width: 26px;
	height: 26px;
	position: absolute;
	z-index: 3;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
	transition: transform 0.2s ease;
}

.product-thumb-item.video-thumb:hover .play-icon {
	transform: scale(1.15);
}

.product-thumb-item.video-thumb img {
	opacity: 0.35;
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.visual-label {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 12px;
	background: #edf5ee;
	border: 1px solid #d5e5d7;
	padding: 7px 12px;
	border-radius: 6px;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: #40604c;
}

/* Phase 4 data-driven sections */
.sx-entry-content {
	color: #31483b;
	font-size: 16px;
	line-height: 1.75;
}
.sx-entry-content > :first-child { margin-top: 0; }
.sx-entry-content > :last-child { margin-bottom: 0; }
.sx-content-panel {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 13px;
	padding: clamp(22px, 3vw, 32px);
}
.sx-process-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
}
.sx-process-grid article {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 22px;
}
.sx-process-grid article > span {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #e7f5d2;
	color: #4c7800;
	font-size: 12px;
	font-weight: 900;
}
.sx-process-grid h3 { margin: 14px 0 7px; font-size: 18px; }
.sx-process-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.sx-review-notice {
	max-width: 1256px;
	margin: 0 auto;
	padding: 26px 30px !important;
	border: 1px solid #e7c98e;
	border-radius: 12px;
	background: #fff9e9;
}
.sx-review-notice strong { color: #795312; }
.sx-review-notice p { margin: 6px 0 0; color: #6a5b3d; }
.official-spec table { width: 100%; border-collapse: collapse; }
.official-spec th, .official-spec td { padding: 13px 15px; border: 1px solid var(--line); text-align: left; }
.sx-source-note { margin-top: 18px !important; }

@media (max-width: 1050px) {
	.product-hero { grid-template-columns: 1fr 1fr; }
	.product-hero .quick-panel { grid-column: 1 / -1; }
	.benefit-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.product-hero { grid-template-columns: 1fr; padding: 28px 18px; }
	.product-hero .quick-panel { grid-column: auto; }
	.product-visual { min-height: 300px; }
	.benefit-strip { grid-template-columns: 1fr; }
	.two-col { grid-template-columns: 1fr; }
}