@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root {
	--bg: #f9faff;
	--surface: #ffffff;
	--surface-alt: #f5f5f5;
	--text: #111111;
	--muted: #666666;
	--border: #e2e2e2;
	--primary: #9a1e26;
	--primary-dark: #6e161f;
	--accent: #f49f0b;
	--accent-soft: #eae6fa;
	--success: #059669;
	--shadow: 0 14px 40px rgba(17, 17, 17, 0.08);
	--radius-xl: 28px;
	--radius-lg: 20px;
	--radius-md: 16px;
	--radius-sm: 12px;
	--container: 1240px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	background:
		radial-gradient(circle at top right, rgba(154, 30, 38, 0.07), transparent 34%),
		radial-gradient(circle at 15% 18%, rgba(244, 159, 11, 0.07), transparent 28%),
		var(--bg);
	color: var(--text);
	line-height: 1.6;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input {
	font: inherit;
}

.container {
	width: min(calc(100% - 2rem), var(--container));
	margin: 0 auto;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: 1rem;
	padding: 0.75rem 1rem;
	background: var(--primary);
	color: #fff;
	border-radius: 999px;
	transform: translateY(-200%);
	z-index: 1000;
}

.skip-link:focus {
	transform: translateY(0);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(12px);
	background: rgba(249, 250, 255, 0.88);
	border-bottom: 1px solid rgba(226, 226, 226, 0.9);
}

.header-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	min-width: 0;
}

.brand-mark {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 1rem;
	background: var(--primary);
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.brand-copy {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.brand-copy strong {
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
}

.brand-copy small,
.eyebrow,
.panel-label,
.detail-kicker,
.product-card-family,
.application-card span,
.resource-card span {
	color: var(--muted);
	font-size: 0.82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 1.3rem;
	font-weight: 600;
}

.site-nav a {
	color: var(--muted);
	transition: color 180ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	color: var(--text);
}

.menu-toggle {
	display: none;
	min-height: 44px;
	padding: 0.7rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
}

.hero {
	padding: 4.5rem 0 2rem;
}

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr);
	gap: 2rem;
	align-items: start;
}

.hero-copy h1,
.section-heading h2,
.about h2,
.site-footer h2,
.detail-card h3,
.product-card h3 {
	font-family: 'Poppins', sans-serif;
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin: 0;
}

.hero-copy h1 {
	font-size: clamp(2.6rem, 5vw, 4.9rem);
	max-width: 11ch;
}

.lede {
	max-width: 60ch;
	font-size: 1.1rem;
	color: var(--muted);
	margin: 1.25rem 0 0;
}

.search-shell {
	display: flex;
	gap: 0.75rem;
	margin-top: 2rem;
	padding: 0.7rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: var(--shadow);
}

.search-shell input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	border: 0;
	background: transparent;
	padding: 0 0.5rem;
	color: var(--text);
}

.search-shell input:focus {
	outline: none;
}

.hero-actions,
.detail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.4rem;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.8rem 1.15rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-weight: 700;
	transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
	cursor: pointer;
}

.button:hover,
.button:focus-visible,
.filter-chip:hover,
.filter-chip:focus-visible,
.application-card:hover,
.application-card:focus-visible,
.resource-card:hover,
.resource-card:focus-visible,
.product-card:hover,
.product-card:focus-visible {
	transform: translateY(-1px);
}

.button-primary {
	background: var(--primary);
	color: #fff;
}

.button-primary:hover,
.button-primary:focus-visible {
	background: var(--primary-dark);
}

.button-secondary {
	background: #fff;
	color: var(--text);
	border-color: var(--border);
}

.hero-panel {
	display: grid;
	gap: 1rem;
}

.panel-card {
	padding: 1.25rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--shadow);
}

.panel-card-dark {
	background: linear-gradient(180deg, var(--primary-dark), #511018);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.08);
}

.panel-card-dark .panel-label {
	color: rgba(255, 255, 255, 0.68);
}

.metric-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9rem;
	margin-top: 1rem;
}

.metric-grid strong {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 1.8rem;
}

.metric-grid span {
	display: block;
	font-size: 0.92rem;
	color: inherit;
	opacity: 0.78;
}

.quick-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: 1rem;
}

.quick-links a {
	padding: 0.65rem 0.9rem;
	border-radius: 999px;
	background: var(--surface-alt);
	border: 1px solid var(--border);
	color: var(--text);
	font-weight: 600;
}

.trust-band {
	padding: 0.75rem 0 1.75rem;
}

.trust-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	padding: 1rem 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.trust-grid span {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 1.1rem;
	margin-bottom: 0.15rem;
}

.trust-grid p {
	margin: 0;
	color: var(--muted);
	font-size: 0.95rem;
}

.catalog,
.applications,
.resources,
.about {
	padding: 3.75rem 0;
}

.section-heading {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
	gap: 2rem;
	align-items: end;
	margin-bottom: 1.5rem;
}

.section-heading h2 {
	font-size: clamp(1.8rem, 3vw, 2.8rem);
	max-width: 18ch;
}

.section-copy {
	margin: 0;
	color: var(--muted);
	max-width: 42ch;
	justify-self: end;
}

.filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 1.25rem;
}

.filter-chip {
	min-height: 44px;
	padding: 0.65rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
	font-weight: 700;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.filter-chip.is-active {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}

.catalog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
	gap: 1.5rem;
	align-items: start;
}

.results-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.85rem;
	color: var(--muted);
	font-size: 0.95rem;
}

.results-meta p {
	margin: 0;
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.product-card,
.detail-card {
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.product-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0;
	text-align: left;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	overflow: hidden;
	min-height: 100%;
	transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.product-card.is-active {
	border-color: var(--accent);
	box-shadow: 0 18px 40px rgba(154, 30, 38, 0.14);
}

.product-card-visual {
	min-height: 130px;
	display: grid;
	place-items: center;
	background:
		linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(15, 23, 42, 0.02)),
		var(--surface-alt);
	border-bottom: 1px solid var(--border);
}

.card-mark {
	width: min(180px, 68%);
	height: 76px;
	border-radius: 999px;
	border: 1.5px solid rgba(15, 23, 42, 0.28);
	position: relative;
}

.card-mark::before,
.card-mark::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.18);
}

.card-mark::before {
	top: -18px;
	width: 26px;
	height: 16px;
}

.card-mark::after {
	top: 16px;
	width: 56%;
	height: 4px;
}

.product-card-body {
	display: grid;
	gap: 0.5rem;
	padding: 1.05rem 1.05rem 1.15rem;
}

.product-card h3 {
	font-size: 1.15rem;
	line-height: 1.2;
}

.product-card-copy {
	margin: 0;
	color: var(--muted);
}

.product-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: 0.25rem;
}

.product-pill {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0.35rem 0.65rem;
	border-radius: 999px;
	background: #f7efe8;
	color: var(--primary-dark);
	font-size: 0.8rem;
	font-weight: 700;
}

.detail-column {
	position: sticky;
	top: 6rem;
}

.detail-card {
	padding: 1.2rem;
}

.detail-hero {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border);
}

.detail-figure {
	display: grid;
	place-items: center;
	min-height: 130px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: linear-gradient(180deg, #f8fbff, #edf6fb);
}

.wireframe-object {
	width: 70px;
	height: 96px;
	position: relative;
}

.wireframe-bar {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 22px;
	width: 50px;
	height: 56px;
	border-radius: 999px;
	border: 2px solid rgba(15, 23, 42, 0.24);
}

.wireframe-bar.short {
	top: 16px;
	width: 30px;
	height: 40px;
	border-color: rgba(14, 165, 233, 0.32);
}

.wireframe-cap {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 18px;
	height: 20px;
	border-radius: 999px 999px 4px 4px;
	background: rgba(15, 23, 42, 0.9);
}

.detail-card h3 {
	font-size: 1.7rem;
	margin: 0.1rem 0 0.4rem;
}

.detail-card p {
	margin: 0;
	color: var(--muted);
}

.detail-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	padding: 1rem 0;
}

.detail-specs div {
	padding: 0.8rem;
	border-radius: var(--radius-md);
	background: var(--surface-alt);
	border: 1px solid var(--border);
}

.detail-specs span {
	display: block;
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.4rem;
}

.detail-specs strong {
	display: block;
	font-size: 0.98rem;
	font-weight: 700;
}

.detail-block {
	padding-top: 0.25rem;
}

.detail-block h4 {
	margin: 0 0 0.75rem;
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
}

.detail-block ul {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--text);
}

.detail-block li + li {
	margin-top: 0.55rem;
}

.application-grid,
.resource-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.application-card,
.resource-card {
	display: grid;
	gap: 0.65rem;
	padding: 1.15rem;
	border-radius: var(--radius-xl);
	border: 1px solid var(--border);
	background: var(--surface);
	box-shadow: var(--shadow);
	text-align: left;
	cursor: pointer;
	transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.application-card strong,
.resource-card strong {
	font-family: 'Poppins', sans-serif;
	font-size: 1.05rem;
	line-height: 1.2;
}

.application-card p,
.resource-card p {
	margin: 0;
	color: var(--muted);
}

.about-grid,
.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
	gap: 1.5rem;
	align-items: start;
}

.about-grid p {
	margin: 0;
	color: var(--muted);
	font-size: 1.03rem;
	max-width: 54ch;
}

.site-footer {
	padding: 3rem 0 4rem;
	background: #f0f0fa;
	border-top: 1px solid var(--border);
}

.footer-panel {
	padding: 1.2rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: var(--shadow);
}

.footer-panel p {
	margin: 0;
}

.footer-panel p + p {
	margin-top: 0.45rem;
}

.category-page {
	padding-bottom: 3rem;
}

.category-hero {
	padding: 2.5rem 0 1.25rem;
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0 0 0.85rem;
	color: var(--muted);
	font-size: 0.92rem;
}

.breadcrumb a {
	font-weight: 700;
}

.breadcrumb span {
	opacity: 0.6;
}

.category-head {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
	gap: 1.5rem;
	align-items: end;
}

.category-head h1 {
	font-family: 'Poppins', sans-serif;
	font-size: clamp(2rem, 3.8vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0;
	max-width: 14ch;
}

.category-meta {
	margin: 0.75rem 0 0;
	color: var(--muted);
	max-width: 56ch;
}

.category-summary {
	padding: 1rem 1.1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.84);
	box-shadow: var(--shadow);
}

.category-summary strong {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 1.05rem;
	margin-bottom: 0.35rem;
}

.category-summary p {
	margin: 0;
	color: var(--muted);
}

.category-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	margin: 1rem 0 1.25rem;
}

.category-search {
	display: flex;
	gap: 0.65rem;
	align-items: center;
	flex: 1;
	min-width: 0;
	padding: 0.65rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.category-search input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	border: 0;
	background: transparent;
	padding: 0 0.5rem;
}

.category-search input:focus {
	outline: none;
}

.sort-select {
	min-height: 44px;
	padding: 0.7rem 0.9rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.category-layout {
	display: grid;
	grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}

.sidebar-panel,
.results-panel {
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--shadow);
}

.sidebar-panel {
	padding: 1rem;
	position: sticky;
	top: 6rem;
}

.results-panel {
	padding: 1rem;
}

.sidebar-group + .sidebar-group {
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--border);
}

.sidebar-group h3,
.results-panel h3,
.quickview-panel h3 {
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	margin: 0 0 0.75rem;
}

.subcategory-list {
	display: grid;
	gap: 0.5rem;
}

.subcategory-list a,
.filter-list button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 0.85rem;
	border-radius: 14px;
	border: 1px solid var(--border);
	background: var(--surface-alt);
	cursor: pointer;
	font-weight: 700;
}

.subcategory-list a.is-active,
.filter-list button.is-active {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}

.filter-list {
	display: grid;
	gap: 0.5rem;
}

.filter-list button span:last-child,
.subcategory-list a span:last-child {
	color: var(--muted);
	font-size: 0.85rem;
	font-weight: 600;
}

.filter-list button.is-active span:last-child,
.subcategory-list a.is-active span:last-child {
	color: rgba(255, 255, 255, 0.8);
}

.category-grid-wrap {
	display: grid;
	gap: 0.75rem;
}

.results-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
	color: var(--muted);
}

.results-head p {
	margin: 0;
}

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

.category-card .product-card-visual {
	min-height: 112px;
}

.category-card .product-card-body {
	padding: 0.95rem;
}

.category-card h3 {
	font-size: 1rem;
}

.product-card-sku {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--text);
}

.product-card-subcopy {
	margin: 0;
	color: var(--muted);
	font-size: 0.95rem;
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.pagination button {
	min-width: 44px;
	min-height: 44px;
	padding: 0.6rem 0.8rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface);
	font-weight: 700;
	cursor: pointer;
}

.pagination button.is-active {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}

.quickview-card {
	display: grid;
	gap: 0.9rem;
}

.quickview-image {
	min-height: 170px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
		background:
		linear-gradient(135deg, rgba(154, 30, 38, 0.08), rgba(17, 17, 17, 0.02)),
		var(--surface-alt);
	display: grid;
	place-items: center;
}

.quickview-image .wireframe-object {
	transform: scale(1.1);
}

.quickview-title {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 1.4rem;
	line-height: 1.1;
}

.quickview-text {
	margin: 0;
	color: var(--muted);
}

.quickview-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem;
}

.quickview-meta div {
	padding: 0.75rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--surface-alt);
}

.quickview-meta span {
	display: block;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.25rem;
}

.quickview-meta strong {
	display: block;
	font-size: 0.95rem;
}

.quickview-list {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--text);
}

.quickview-list li + li {
	margin-top: 0.45rem;
}

.quickview-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.product-page .product-hero {
	padding: 2.5rem 0 1rem;
}

.product-banner {
	padding: 1.3rem 1.35rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: linear-gradient(180deg, rgba(154, 30, 38, 0.08), rgba(255, 255, 255, 0.94));
	box-shadow: var(--shadow);
}

.product-banner h1 {
	font-family: 'Poppins', sans-serif;
	font-size: clamp(2.2rem, 4vw, 4rem);
	line-height: 1;
	letter-spacing: -0.04em;
	margin: 0;
}

.product-banner p {
	margin: 0.75rem 0 0;
	max-width: 64ch;
	color: var(--muted);
	font-size: 1.02rem;
}

.product-layout {
	display: grid;
	grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
	gap: 1rem;
	align-items: start;
}

.product-gallery {
	display: grid;
	gap: 0.9rem;
	position: sticky;
	top: 6rem;
}

.gallery-main {
	min-height: 420px;
	display: grid;
	place-items: center;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: linear-gradient(180deg, #fdf8f5, #f4f0ea);
	box-shadow: var(--shadow);
}

.gallery-main img {
	width: min(90%, 440px);
	height: auto;
	object-fit: contain;
	display: block;
}

.thumb-stack {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.thumb {
	min-height: 44px;
	padding: 0.65rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--surface);
	cursor: pointer;
	font-weight: 700;
}

.thumb.is-active {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}

.product-details {
	display: grid;
	gap: 1rem;
}

.product-detail-card {
	padding: 1.25rem;
}

.product-meta-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.product-meta-row div {
	padding: 0.85rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--surface-alt);
}

.product-meta-row span {
	display: block;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.25rem;
}

.product-meta-row strong {
	display: block;
	font-size: 0.98rem;
}

.product-copy-block {
	padding-top: 1rem;
}

.product-copy-block h2 {
	font-family: 'Poppins', sans-serif;
	font-size: 1.05rem;
	margin: 0 0 0.6rem;
}

.product-copy-block p {
	margin: 0;
	color: var(--muted);
}

.product-copy-block ul {
	margin: 0;
	padding-left: 1.1rem;
}

.product-copy-block li + li {
	margin-top: 0.5rem;
}

.product-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.related-section {
	padding: 0 0 4rem;
}

.related-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.related-card {
	display: grid;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--surface);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.related-image {
	min-height: 130px;
	background: linear-gradient(135deg, rgba(154, 30, 38, 0.08), rgba(244, 159, 11, 0.08)), var(--surface-alt);
	border-bottom: 1px solid var(--border);
}

.related-body {
	padding: 1rem;
	display: grid;
	gap: 0.5rem;
}

.related-body strong {
	font-family: 'Poppins', sans-serif;
	line-height: 1.2;
}

.related-body p {
	margin: 0;
	color: var(--muted);
}

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

@media (max-width: 1100px) {
	.hero-grid,
	.catalog-layout,
	.section-heading,
	.about-grid,
	.footer-grid {
		grid-template-columns: 1fr;
	}

	.category-head,
	.category-layout,
	.product-layout,
	.related-grid {
		grid-template-columns: 1fr;
	}

	.category-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.category-layout {
		gap: 1rem;
	}

	.section-copy {
		justify-self: start;
	}

	.detail-column {
		position: static;
	}

	.sidebar-panel,
	.product-gallery {
		position: static;
	}

	.application-grid,
	.resource-grid,
	.trust-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

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

@media (max-width: 760px) {
	.container {
		width: min(calc(100% - 1.1rem), var(--container));
	}

	.header-shell {
		flex-wrap: wrap;
	}

	.menu-toggle {
		display: inline-flex;
		margin-left: auto;
	}

	.site-nav {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		padding: 0.8rem 0 0.25rem;
		border-top: 1px solid var(--border);
	}

	.site-nav.is-open {
		display: flex;
	}

	.hero {
		padding-top: 2.5rem;
	}

	.hero-copy h1 {
		max-width: none;
	}

	.search-shell {
		border-radius: var(--radius-lg);
		flex-direction: column;
	}

	.search-shell input {
		width: 100%;
	}

	.product-grid,
	.product-grid.category-grid,
	.related-grid,
	.detail-specs,
	.application-grid,
	.resource-grid,
	.trust-grid {
		grid-template-columns: 1fr;
	}

	.detail-hero {
		grid-template-columns: 1fr;
	}

	.results-meta {
		flex-direction: column;
		align-items: flex-start;
	}
}

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

	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}