/**
 * Vector Spawn AM — Industrial manufacturing platform theme
 */

:root {
	--color-bg: #050b18;
	--color-bg-elevated: #0a1224;
	--color-bg-card: #ffffff;
	--color-bg-light: #f5f8fc;
	--color-bg-light-blue: #e6f0ff;
	--color-surface: #1a2235;
	--color-border: rgba(255, 255, 255, 0.1);
	--color-border-light: #e2e8f0;
	--color-text: #0f172a;
	--color-text-on-dark: #ffffff;
	--color-text-muted: #64748b;
	--color-text-muted-on-dark: rgba(255, 255, 255, 0.72);
	--color-accent: #0d6efd;
	--color-accent-hover: #0b5ed7;
	--color-blue: #0d6efd;
	--color-navy: #050b18;
	--color-success: #10b981;
	--color-yellow: #fbbf24;
	--color-white: #ffffff;
	--color-dark-btn: #0f172a;

	--font-sans: "Montserrat", system-ui, -apple-system, sans-serif;

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-pill: 999px;

	--shadow-card: 0 4px 24px rgba(15, 23, 42, 0.08);
	--shadow-card-hover: 0 12px 40px rgba(0, 102, 255, 0.15);
	--shadow-btn: 0 8px 24px rgba(13, 110, 253, 0.35);
	--glass-bg: rgba(5, 11, 24, 0.75);
	--glass-border: rgba(255, 255, 255, 0.12);
	--glass-blur: blur(16px);

	--header-h: 104px;
	--header-logo-h: 88px;
	--footer-logo-h: 120px;
	--container: min(1200px, 92vw);
	--section-pad: clamp(3.5rem, 7vw, 6rem);
	--transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-lift: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-text);
	background: var(--color-bg-light);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-blue);
	text-decoration: none;
	transition: color var(--transition);
}

a:hover {
	color: var(--color-accent-hover);
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.2;
	font-weight: 700;
	margin: 0 0 0.5em;
}

p {
	margin: 0 0 1rem;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Utilities */
.container {
	width: var(--container);
	margin-inline: auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.glass-panel {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-lg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
}

.section {
	padding-block: var(--section-pad);
}

.section--dark {
	background: linear-gradient(180deg, var(--color-bg) 0%, #0d0f13 100%);
}

.section--accent {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(231, 44, 35, 0.04) 100%);
}

.section-header {
	max-width: 720px;
	margin-bottom: 3rem;
}

.section-header--center {
	margin-inline: auto;
	text-align: center;
}

.section-label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-accent);
	margin-bottom: 0.75rem;
}

.section-title {
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--color-text);
}

.section-title--upper {
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.section-title--light {
	color: var(--color-text-on-dark);
}

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

.section--light .card {
	background: #ffffff;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.section--light .card__title {
	color: var(--color-text);
}

.section--light-blue {
	background: var(--color-bg-light-blue);
}

.section--navy {
	background: linear-gradient(135deg, #050b18 0%, #0d1b3d 100%);
	color: var(--color-text-on-dark);
}

.section-desc {
	color: var(--color-text-muted);
	font-size: 1.0625rem;
	margin-bottom: 0;
}

.section-subtitle {
	margin: 0.875rem auto 0;
	max-width: 640px;
	font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
	font-weight: 400;
	line-height: 1.65;
	color: var(--color-text-muted);
}

.section-footnote {
	text-align: center;
	margin-top: 2.5rem;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--radius-md);
	border: 2px solid transparent;
	cursor: pointer;
	transition:
		background var(--transition),
		border-color var(--transition),
		transform var(--transition-lift),
		box-shadow var(--transition),
		color var(--transition);
	text-decoration: none;
}

.btn svg {
	width: 1.125rem;
	height: 1.125rem;
}

.btn--pill {
	border-radius: var(--radius-pill);
}

.btn--hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-btn);
}

.btn--primary {
	background: var(--color-accent);
	color: #fff;
	border-color: var(--color-accent);
}

.btn--primary:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	color: #fff;
}

.btn--dark {
	background: var(--color-dark-btn);
	color: #fff;
	border-color: var(--color-dark-btn);
}

.btn--dark:hover {
	background: #1e293b;
	border-color: #1e293b;
	color: #fff;
}

.btn--outline {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-border-light);
}

.btn--outline:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.btn--outline-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.65);
}

.btn--outline-light:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #fff;
	color: #fff;
}

.btn--sm {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

.btn--lg {
	padding: 1rem 1.75rem;
	font-size: 1rem;
}

.btn--block {
	width: 100%;
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	height: var(--header-h);
	background: #000000;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.site-header--over-hero {
	position: absolute;
	left: 0;
	right: 0;
	background: #000000;
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.site-header--over-hero.is-scrolled {
	position: sticky;
	background: #000000;
	border-bottom-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.site-header.is-scrolled {
	background: #000000;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	gap: 1.5rem;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--color-text-on-dark);
	text-decoration: none;
	font-weight: 700;
}

.site-logo:hover {
	color: var(--color-text-on-dark);
}

.site-logo__mark {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, var(--color-accent), #ff6b4a);
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	font-family: var(--font-mono);
}

.site-logo__text {
	font-size: 1.125rem;
	letter-spacing: -0.02em;
}

/* Vector Spawn logo */
.vs-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--color-text-on-dark);
	min-width: 0;
	line-height: 0;
}

.vs-logo:hover {
	color: var(--color-text-on-dark);
}

.vs-logo__img {
	display: block;
	height: var(--header-logo-h);
	width: auto;
	max-width: min(300px, 44vw);
	object-fit: contain;
	object-position: left center;
}

.vs-logo--footer .vs-logo__img {
	height: var(--footer-logo-h);
	width: auto;
	max-width: min(320px, 85vw);
	object-fit: contain;
	object-position: left top;
}

.site-branding {
	flex-shrink: 0;
	max-width: min(320px, 46vw);
}

.custom-logo-link {
	display: flex;
	align-items: center;
	line-height: 0;
}

.custom-logo-link .custom-logo {
	max-height: 52px;
	width: auto;
	max-width: min(220px, 36vw);
}

.custom-logo-link img {
	max-height: 52px;
	width: auto;
}

.site-nav .nav-menu {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.site-nav .nav-menu a {
	display: block;
	padding: 0.5rem 0.875rem;
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.875rem;
	font-weight: 500;
	border-radius: var(--radius-sm);
	transition: color var(--transition), background var(--transition);
}

.site-nav .nav-menu a:hover,
.site-nav .current-menu-item > a {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.08);
}

.header-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: #ffffff;
	border: none;
	background: transparent;
	transition: transform var(--transition-lift), opacity var(--transition), background var(--transition);
}

.header-icon-btn:hover {
	color: #ffffff;
	opacity: 0.85;
	transform: translateY(-2px);
}

.header-icon-btn--user {
	width: 40px;
	height: 40px;
	background: var(--color-accent);
	border: none;
}

.header-icon-btn--user:hover {
	background: var(--color-accent-hover);
	opacity: 1;
}

.header-icon-btn svg {
	width: 18px;
	height: 18px;
}

/* Cart count badge */
.header-cart-btn {
	position: relative;
	overflow: visible;
}

.cart-count {
	position: absolute;
	top: -2px;
	right: -4px;
	display: none;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--color-accent);
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px #000000;
}

.cart-count.is-visible {
	display: inline-block;
}

.cart-count.is-bump {
	animation: cart-bump 0.45s ease;
}

@keyframes cart-bump {
	0% { transform: scale(1); }
	35% { transform: scale(1.35); }
	70% { transform: scale(0.92); }
	100% { transform: scale(1); }
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.site-header__actions .btn--primary {
	background: var(--color-accent);
	border-color: var(--color-accent);
	font-size: 0.75rem;
	padding: 0.5625rem 1.25rem;
	letter-spacing: 0.05em;
	text-transform: none;
	font-weight: 600;
}

.site-header__actions .btn--primary:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
}

.nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	padding: 0.5rem;
	cursor: pointer;
}

.nav-toggle__icon--close {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
	display: block;
}

/* Hero — full-width background, contained content */
.site-main--front {
	overflow-x: clip;
}

.hero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4rem));
	padding-bottom: 0;
	overflow: hidden;
	min-height: min(92vh, 900px);
	display: flex;
	flex-direction: column;
}

.hero--figma {
	min-height: min(94vh, 920px);
}

.hero__bg {
	position: absolute;
	inset: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

.hero__container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: min(1200px, 92vw);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: calc(min(94vh, 920px) - var(--header-h) - clamp(2.5rem, 6vw, 4rem));
}

.hero__bg-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 40%;
	background-repeat: no-repeat;
	transform: scale(1.03);
	animation: hero-ken-burns 24s ease-in-out infinite alternate;
}

@keyframes hero-ken-burns {
	from { transform: scale(1.03); }
	to { transform: scale(1.08); }
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(5, 11, 24, 0.88) 0%, rgba(5, 11, 24, 0.65) 40%, rgba(13, 110, 253, 0.12) 100%),
		linear-gradient(180deg, rgba(13, 110, 253, 0.08) 0%, rgba(5, 11, 24, 0.5) 50%, rgba(5, 11, 24, 0.92) 100%);
}

.hero__grid-lines {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(59, 130, 246, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(59, 130, 246, 0.04) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent);
}

.hero__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
}

.hero__glow--red {
	width: 400px;
	height: 400px;
	top: -100px;
	right: 10%;
	background: var(--shadow-glow-red);
}

.hero__glow--blue {
	width: 500px;
	height: 500px;
	bottom: -200px;
	left: -100px;
	background: var(--shadow-glow-blue);
}

.hero__inner {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	margin-bottom: 1.25rem;
	padding: 0.375rem 0.875rem;
	background: rgba(17, 19, 24, 0.55);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	backdrop-filter: blur(8px);
}

.hero__badge-dot {
	width: 8px;
	height: 8px;
	background: var(--color-success);
	border-radius: 50%;
	box-shadow: 0 0 8px var(--color-success);
	animation: pulse 2s ease infinite;
}

@keyframes pulse {
	50% { opacity: 0.5; }
}

.hero__main {
	flex: 1;
	display: flex;
	align-items: center;
	padding-bottom: 2rem;
}

.hero__content {
	max-width: 640px;
	text-align: left;
}

.hero__title {
	font-size: clamp(2.25rem, 4.8vw, 3.75rem);
	font-weight: 800;
	letter-spacing: 0.01em;
	margin-bottom: 1.25rem;
	text-shadow: 0 2px 32px rgba(0, 0, 0, 0.45);
	color: var(--color-text-on-dark);
}

.hero__title--upper {
	text-transform: uppercase;
	line-height: 1.12;
}

.hero__title-line {
	display: block;
	color: #ffffff;
	font-size: clamp(1.5rem, 3.2vw, 2.25rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-bottom: 0.35rem;
}

.hero__title-accent {
	color: var(--color-accent);
	display: block;
	font-size: clamp(2.75rem, 6.5vw, 4.5rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.01em;
}

.hero__subtitle {
	font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
	font-weight: 500;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.82);
	max-width: 520px;
	margin-bottom: 2rem;
}

.hero__visual {
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.btn--hero {
	padding: 0.9375rem 1.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	min-height: 48px;
}

.btn--hero.btn--primary {
	background: var(--color-accent);
	border-color: var(--color-accent);
	box-shadow: 0 4px 20px rgba(13, 110, 253, 0.4);
	text-transform: none;
	font-weight: 600;
}

.btn--hero.btn--primary:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
}

.btn--hero.btn--outline-light {
	border-width: 1.5px;
	border-color: rgba(255, 255, 255, 0.85);
	color: #ffffff;
	font-weight: 600;
	text-transform: none;
	background: rgba(5, 11, 24, 0.35);
}

.btn--hero.btn--outline-light:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #ffffff;
	color: #ffffff;
}

/* Hero bottom — trusted industries (Figma) */
.hero__trusted {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.125rem;
	width: 100%;
	padding-block: 1.75rem 2.25rem;
}

.hero__trusted-label {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.4;
}

.hero__trusted-meta {
	display: flex;
	align-items: center;
	gap: 2rem;
	width: 100%;
}

.hero__industries {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	column-gap: clamp(1.5rem, 4vw, 3.5rem);
	row-gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.hero__scroll-down {
	flex-shrink: 0;
	margin-left: auto;
	display: block;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	background: transparent;
	text-decoration: none;
	transition: transform 0.3s ease, filter 0.3s ease;
}

.hero__scroll-down-icon {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.3s ease, filter 0.3s ease;
}

.hero__scroll-down:hover {
	transform: translateY(4px);
	filter: drop-shadow(0 6px 18px rgba(13, 110, 253, 0.45));
}

.hero__scroll-down:hover .hero__scroll-down-icon {
	transform: scale(1.06);
}

.hero__scroll-down:active {
	transform: translateY(6px) scale(0.98);
}

.hero__industry {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
	text-align: left;
}

.hero__industry-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	background: var(--color-accent);
	border-radius: 10px;
	transition: transform var(--transition-lift), box-shadow var(--transition), background var(--transition);
}

.hero__industry-icon-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 22px;
	max-height: 22px;
	object-fit: contain;
}

.hero__industry:hover .hero__industry-icon {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(13, 110, 253, 0.45);
	background: var(--color-accent-hover);
}

.hero__industry-label {
	font-size: 0.875rem;
	font-weight: 400;
	color: #ffffff;
	line-height: 1.3;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.hero__trusted {
		gap: 1.25rem;
	}

	.hero__trusted-meta {
		flex-wrap: nowrap;
	}

	.hero__industries {
		flex-wrap: nowrap;
		/* justify-content: space-between; */
		column-gap: 2rem;
	}
}

.hero__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-border);
}

.hero__stats li {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.hero__stats strong {
	font-size: 1rem;
	color: var(--color-text);
}

.hero__stats span {
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}

.hero__visual {
	padding: 1.5rem;
	min-height: 320px;
}

.hero__printer-scene {
	margin-bottom: 1rem;
}

.printer-rack {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
}

.printer-unit {
	height: 64px;
	background: var(--color-surface);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	position: relative;
	overflow: hidden;
}

.printer-unit.is-active .printer-unit__gantry {
	animation: gantry 3s ease-in-out infinite;
}

.printer-unit__bed {
	position: absolute;
	bottom: 8px;
	left: 12%;
	right: 12%;
	height: 4px;
	background: var(--color-blue);
	opacity: 0.5;
	border-radius: 2px;
}

.printer-unit__gantry {
	position: absolute;
	top: 12px;
	left: 20%;
	width: 60%;
	height: 3px;
	background: var(--color-accent);
	border-radius: 2px;
}

@keyframes gantry {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(30%); }
}

.hero__telemetry {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.telemetry-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.8125rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--color-border);
}

.telemetry-label {
	color: var(--color-text-muted);
	font-family: var(--font-mono);
}

.telemetry-value--success {
	color: var(--color-success);
}

/* Trust bar */
.trust-bar {
	padding-block: 1.5rem;
	border-block: 1px solid var(--color-border);
	background: var(--color-bg-elevated);
}

.trust-bar__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem 3rem;
}

.trust-bar__item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-muted);
}

.trust-bar__item svg {
	color: var(--color-blue);
	width: 1.25rem;
	height: 1.25rem;
}

/* Cards */
.card-grid {
	display: grid;
	gap: 1.5rem;
}

.card-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.card-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.card {
	padding: 1.75rem;
}

.card__icon {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	background: rgba(59, 130, 246, 0.12);
	border-radius: var(--radius-md);
	color: var(--color-blue);
	margin-bottom: 1.25rem;
}

.card__icon svg {
	width: 24px;
	height: 24px;
}

.card__title {
	font-size: 1.125rem;
	margin-bottom: 0.5rem;
}

.card__text {
	color: var(--color-text-muted);
	font-size: 0.9375rem;
	margin-bottom: 1rem;
}

.card__tag {
	display: inline-block;
	font-size: 0.75rem;
	font-family: var(--font-mono);
	color: var(--color-accent);
	margin-bottom: 0.5rem;
}

.card__meta {
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	margin-bottom: 0.75rem;
}

.card__meta span {
	color: var(--color-text-muted);
	opacity: 0.7;
}

.card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-blue);
}

.card__swatch {
	height: 4px;
	border-radius: 2px;
	background: var(--swatch-color, var(--color-accent));
	margin-bottom: 1rem;
}

.card--service:hover,
.card--material:hover {
	border-color: rgba(59, 130, 246, 0.3);
	transform: translateY(-2px);
	transition: transform var(--transition), border-color var(--transition);
}

.card--testimonial .card__quote {
	font-size: 1rem;
	font-style: italic;
	color: var(--color-text);
	margin-bottom: 1.25rem;
}

.card__author {
	font-style: normal;
	font-weight: 600;
	display: block;
}

.card__role {
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}

.stars {
	color: var(--color-yellow);
	margin-bottom: 0.75rem;
	letter-spacing: 2px;
}

/* Steps */
.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	counter-reset: step;
}

.steps__item {
	padding: 1.75rem;
	position: relative;
}

.steps__num {
	font-family: var(--font-mono);
	font-size: 2rem;
	font-weight: 700;
	color: rgba(231, 44, 35, 0.35);
	display: block;
	margin-bottom: 0.75rem;
}

.steps__title {
	font-size: 1.0625rem;
}

.steps__desc {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	margin: 0;
}

.steps__cta {
	text-align: center;
	margin-top: 2.5rem;
}

/* Upload preview */
.upload-preview {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

.quote-widget--compact .upload-preview__ui {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
}

.quote-widget--compact .form-row--inline {
	display: grid;
	grid-template-columns: 100px 1fr;
	align-items: center;
	gap: 0.5rem;
}

.quote-widget--compact .form-actions {
	margin-top: 0.25rem;
}

.model-viewer-placeholder.has-file .model-viewer-placeholder__mesh {
	border-color: var(--color-success);
	animation: mesh-spin 8s linear infinite;
}

.model-viewer-placeholder__label {
	font-size: 0.75rem;
	color: var(--color-text-muted);
	margin-top: 0.5rem;
	text-align: center;
}

.upload-preview__ui {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.upload-zone {
	border: 2px dashed rgba(59, 130, 246, 0.4);
	border-radius: var(--radius-md);
	padding: 2rem;
	text-align: center;
	background: rgba(59, 130, 246, 0.04);
}

.upload-zone--large {
	padding: 3rem 2rem;
}

.upload-zone__icon {
	color: var(--color-blue);
	margin-bottom: 0.75rem;
}

.upload-zone__icon svg {
	width: 40px;
	height: 40px;
	margin-inline: auto;
}

.upload-zone__text {
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.upload-zone__hint {
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}

.quote-panel__row {
	display: flex;
	justify-content: space-between;
	padding: 0.5rem 0;
	font-size: 0.875rem;
	border-bottom: 1px solid var(--color-border);
}

.quote-panel__row--total {
	border-bottom: none;
	padding-top: 0.75rem;
	margin-top: 0.25rem;
}

.quote-total {
	color: var(--color-success);
	font-size: 1.25rem;
}

.model-viewer-placeholder {
	height: 120px;
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(231, 44, 35, 0.08));
	border-radius: var(--radius-md);
	display: grid;
	place-items: center;
}

.model-viewer-placeholder__mesh {
	width: 80px;
	height: 80px;
	border: 2px solid rgba(59, 130, 246, 0.5);
	transform: rotateX(55deg) rotateZ(45deg);
	animation: mesh-spin 8s linear infinite;
}

@keyframes mesh-spin {
	to { transform: rotateX(55deg) rotateZ(405deg); }
}

.feature-list {
	margin: 1.5rem 0 2rem;
}

.feature-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin-bottom: 0.75rem;
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}

.feature-list svg {
	flex-shrink: 0;
	color: var(--color-success);
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 2px;
}

/* Operations */
.ops-preview {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.ops-preview__dashboard {
	padding: 1.5rem;
}

.ops-dashboard__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
}

.ops-dashboard__header h3 {
	font-size: 1rem;
	margin: 0;
}

.status-pill {
	font-size: 0.75rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-family: var(--font-mono);
}

.status-pill--success {
	background: rgba(16, 185, 129, 0.15);
	color: var(--color-success);
}

.ops-dashboard__metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.metric-card {
	padding: 1rem;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	text-align: center;
}

.metric-card__value {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	font-family: var(--font-mono);
	color: var(--color-blue);
}

.metric-card__label {
	font-size: 0.6875rem;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ops-dashboard__bars {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	height: 80px;
}

.bar {
	flex: 1;
	height: var(--h, 50%);
	background: linear-gradient(180deg, var(--color-blue), rgba(59, 130, 246, 0.2));
	border-radius: 4px 4px 0 0;
	animation: bar-grow 1s ease backwards;
}

@keyframes bar-grow {
	from { height: 0; }
}

/* Timeline */
.timeline {
	display: flex;
	justify-content: space-between;
	padding: 2rem;
	gap: 0.5rem;
	overflow-x: auto;
}

.timeline__step {
	flex: 1;
	text-align: center;
	position: relative;
	min-width: 90px;
}

.timeline__dot {
	display: block;
	width: 14px;
	height: 14px;
	margin: 0 auto 0.75rem;
	border-radius: 50%;
	background: var(--color-surface);
	border: 2px solid var(--color-border);
	position: relative;
	z-index: 1;
}

.timeline__step.is-complete .timeline__dot {
	background: var(--color-success);
	border-color: var(--color-success);
}

.timeline__step.is-active .timeline__dot {
	background: var(--color-accent);
	border-color: var(--color-accent);
	box-shadow: 0 0 12px rgba(231, 44, 35, 0.5);
}

.timeline__label {
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.timeline__step.is-complete .timeline__label,
.timeline__step.is-active .timeline__label {
	color: var(--color-text);
}

/* Quality split */
.quality-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.qc-display {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	padding: 2rem;
}

.qc-display__item {
	text-align: center;
	padding: 1.5rem 1rem;
	background: var(--color-surface);
	border-radius: var(--radius-md);
}

.qc-display__item span {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	font-family: var(--font-mono);
	color: var(--color-blue);
}

.qc-display__item small {
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

/* CTA final (legacy page styles — homepage uses .cta-final-wrap) */
.cta-final-page {
	position: relative;
	padding-block: 5rem;
}

/* Page templates */
.page-hero {
	padding-block: 4rem 2rem;
	background: linear-gradient(180deg, var(--color-bg-elevated), var(--color-bg));
}

.page-hero--compact {
	padding-block: 3rem 1.5rem;
}

.page-hero__title {
	font-size: clamp(2rem, 4vw, 2.75rem);
}

.page-hero__desc {
	color: var(--color-text-muted);
	max-width: 640px;
}

/* App pages — upload, dashboard, checkout */
.site-main--app {
	background: var(--color-bg-light);
	color: var(--color-text);
}

.site-main--app .page-hero {
	background: linear-gradient(180deg, #ffffff 0%, var(--color-bg-light) 100%);
	border-bottom: 1px solid var(--color-border-light);
}

.site-main--app .page-hero__title {
	color: var(--color-text);
}

.site-main--app .page-hero__desc {
	color: var(--color-text-muted);
}

.site-main--app .section {
	background: var(--color-bg-light);
}

.site-main--app .glass-panel {
	background: #ffffff;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	color: var(--color-text);
}

.site-main--app .order-form legend {
	color: var(--color-text);
	font-weight: 700;
}

.site-main--app .form-row label {
	color: var(--color-text);
	font-weight: 600;
}

.site-main--app .form-row input,
.site-main--app .form-row select,
.site-main--app .form-row textarea {
	background: #ffffff;
	border: 1px solid #cbd5e1;
	color: var(--color-text);
}

.site-main--app .form-row input:focus,
.site-main--app .form-row select:focus,
.site-main--app .form-row textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.site-main--app .form-notice {
	color: #854d0e;
	background: rgba(251, 191, 36, 0.14);
	border: 1px solid rgba(251, 191, 36, 0.35);
	padding: 0.75rem 1rem;
	border-radius: var(--radius-sm);
}

.site-main--app .form-notice--info {
	color: #1e40af;
	background: rgba(13, 110, 253, 0.08);
	border-color: rgba(13, 110, 253, 0.25);
}

.site-main--app .upload-zone {
	background: var(--color-bg-light-blue);
	border: 2px dashed rgba(13, 110, 253, 0.4);
}

.site-main--app .upload-zone.is-dragover,
.site-main--app .upload-zone.has-file {
	background: rgba(13, 110, 253, 0.1);
	border-color: var(--color-accent);
}

.site-main--app .upload-zone__text {
	color: var(--color-text);
}

.site-main--app .upload-zone__hint {
	color: var(--color-text-muted);
}

.site-main--app .quote-sidebar h3,
.site-main--app .quote-panel__row {
	color: var(--color-text);
}

.site-main--app .quote-panel__row {
	border-bottom-color: var(--color-border-light);
}

.site-main--app .quote-source {
	color: var(--color-success);
}

.site-main--app .quote-total {
	color: var(--color-success);
}

.site-main--app .checkout-empty {
	color: var(--color-text-muted);
}

.site-main--app .dashboard-tabs__item {
	background: #ffffff;
	border: 1px solid var(--color-border-light);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.site-main--app .dashboard-tabs__item:hover {
	color: var(--color-accent);
	border-color: rgba(13, 110, 253, 0.35);
}

.site-main--app .dashboard-tabs__item.is-active {
	color: var(--color-accent);
	border-color: var(--color-accent);
	background: rgba(13, 110, 253, 0.08);
}

.site-main--app .dashboard-panel {
	padding: 2rem;
}

.site-main--app .dashboard-tracking__title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	color: var(--color-text);
}

.site-main--app .dashboard-tracking__desc {
	margin: 0 0 1.5rem;
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}

.site-main--app .timeline--embedded {
	padding: 1.5rem 1rem;
	background: var(--color-bg-light);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
}

.site-main--app .timeline__dot {
	background: #ffffff;
	border-color: #cbd5e1;
}

.site-main--app .timeline__label {
	color: var(--color-text-muted);
}

.site-main--app .timeline__step.is-complete .timeline__label,
.site-main--app .timeline__step.is-active .timeline__label {
	color: var(--color-text);
}

/* Inner page layouts */
.inner-section {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.inner-section--muted {
	background: #eef2f7;
}

.inner-section__header {
	max-width: 760px;
	margin-bottom: 2rem;
}

.inner-section__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--color-text);
	margin-bottom: 0.75rem;
}

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

.inner-prose {
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.inner-prose h2 {
	margin-top: 0;
	color: var(--color-text);
}

.inner-prose p,
.inner-prose li {
	color: var(--color-text-muted);
}

.inner-list {
	margin: 0;
	padding-left: 1.25rem;
	list-style: disc;
}

.inner-list li + li {
	margin-top: 0.5rem;
}

.inner-grid {
	display: grid;
	gap: 1.25rem;
}

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

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

.inner-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inner-card {
	background: #ffffff;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	box-shadow: var(--shadow-card);
}

.inner-card__label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-accent);
	margin: 0 0 0.5rem;
}

.inner-card__title {
	font-size: 1.0625rem;
	margin: 0 0 0.625rem;
	color: var(--color-text);
}

.inner-card__text {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.inner-card__link {
	display: inline-block;
	margin-top: 1rem;
	font-weight: 600;
	color: var(--color-accent);
}

.inner-featured-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.inner-featured-card {
	background: #ffffff;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.inner-featured-card__image {
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.inner-featured-card h3,
.inner-featured-card p {
	padding-inline: 1.25rem;
}

.inner-featured-card h3 {
	margin: 1rem 0 0.5rem;
	font-size: 1.0625rem;
}

.inner-featured-card p {
	margin: 0 0 1.25rem;
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}

.inner-steps {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.inner-steps__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: start;
	background: #ffffff;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
	padding: 1.25rem 1.5rem;
}

.inner-steps__num {
	font-size: 0.875rem;
	font-weight: 800;
	color: var(--color-accent);
	background: rgba(13, 110, 253, 0.08);
	border-radius: var(--radius-pill);
	padding: 0.35rem 0.75rem;
	line-height: 1;
}

.inner-steps__title {
	margin: 0 0 0.375rem;
	font-size: 1rem;
	color: var(--color-text);
}

.inner-steps__text {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-bottom: 2rem;
}

.pricing-card {
	background: #ffffff;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	box-shadow: var(--shadow-card);
}

.pricing-card__title {
	margin: 0 0 0.5rem;
	color: var(--color-text);
}

.pricing-card__format {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.pricing-card__rate {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-accent);
}

.pricing-card__note {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.pricing-addons {
	padding: 1.5rem;
}

.pricing-addons__title {
	margin: 0 0 1rem;
	font-size: 1.125rem;
}

.pricing-addons__table {
	width: 100%;
	border-collapse: collapse;
}

.pricing-addons__table th,
.pricing-addons__table td {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--color-border-light);
	text-align: left;
	font-size: 0.9375rem;
}

.pricing-addons__table th {
	font-weight: 600;
	color: var(--color-text);
	width: 65%;
}

.pricing-addons__table td {
	color: var(--color-accent);
	font-weight: 600;
}

.pricing-addons__footnote {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}

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

.contact-card {
	padding: 1.5rem;
}

.contact-card h2 {
	margin-top: 0;
	font-size: 1.125rem;
}

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

.contact-list li + li {
	margin-top: 0.75rem;
}

.inner-cta {
	padding-block: 0 clamp(2.5rem, 5vw, 4rem);
}

.inner-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: clamp(1.5rem, 3vw, 2rem);
}

.inner-cta__title {
	margin: 0 0 0.375rem;
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

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

.inner-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.upload-page-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 2rem;
	align-items: start;
}

.order-form fieldset {
	border: none;
	padding: 0;
	margin: 1.5rem 0 0;
}

.order-form legend {
	font-weight: 600;
	margin-bottom: 1rem;
}

.form-row {
	margin-bottom: 1rem;
}

.form-row label {
	display: block;
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	margin-bottom: 0.375rem;
}

.form-row input,
.form-row select {
	width: 100%;
	padding: 0.625rem 0.875rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-family: inherit;
}

.form-notice {
	font-size: 0.8125rem;
	color: var(--color-yellow);
	margin: 1rem 0;
}

.form-notice--info {
	color: var(--color-blue);
}

.form-row--half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.form-row textarea {
	width: 100%;
	padding: 0.625rem 0.875rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-family: inherit;
	resize: vertical;
}

.upload-zone {
	position: relative;
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition);
}

.upload-zone.is-dragover,
.upload-zone.has-file {
	border-color: var(--color-blue);
	background: rgba(59, 130, 246, 0.08);
}

.upload-zone.is-invalid {
	border-color: var(--color-accent);
	background: rgba(231, 44, 35, 0.08);
	animation: shake 0.4s ease;
}

.form-row.is-invalid label {
	color: var(--color-accent);
}

.form-row.is-invalid input,
.form-row.is-invalid select,
.form-row.is-invalid textarea {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 2px rgba(231, 44, 35, 0.2);
}

.field-error {
	display: block;
	font-size: 0.75rem;
	color: var(--color-accent);
	margin-top: 0.35rem;
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

.upload-zone__input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	width: 100%;
	height: 100%;
}

.quote-source {
	font-size: 0.75rem;
	font-family: var(--font-mono);
	color: var(--color-success);
	margin: 0 0 1rem;
}

.quote-alert {
	padding: 0.75rem 1rem;
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	margin-bottom: 1rem;
}

.quote-alert--success {
	background: rgba(16, 185, 129, 0.12);
	color: var(--color-success);
	border: 1px solid rgba(16, 185, 129, 0.3);
}

.quote-alert--error {
	background: rgba(231, 44, 35, 0.12);
	color: var(--color-accent);
	border: 1px solid rgba(231, 44, 35, 0.3);
}

.quote-alert--info {
	background: rgba(59, 130, 246, 0.12);
	color: var(--color-blue);
	border: 1px solid rgba(59, 130, 246, 0.3);
}

.checkout-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 2rem;
	align-items: start;
}

.checkout-form-wrap {
	padding: 2rem;
}

.checkout-empty {
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}

.order-complete__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 1.5rem;
	display: grid;
	place-items: center;
	background: rgba(16, 185, 129, 0.15);
	border-radius: 50%;
	color: var(--color-success);
}

.order-complete__icon svg {
	width: 32px;
	height: 32px;
}

.order-complete__details {
	padding: 1.5rem;
}

.quote-sidebar {
	padding: 1.5rem;
	position: sticky;
	top: calc(var(--header-h) + 1rem);
}

.quote-sidebar h3 {
	margin-bottom: 1rem;
	font-size: 1.125rem;
}

.dashboard-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.dashboard-tabs__item {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-muted);
	background: var(--color-surface);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
}

.dashboard-tabs__item.is-active {
	color: var(--color-text);
	border-color: var(--color-blue);
	background: rgba(59, 130, 246, 0.1);
}

.dashboard-panel {
	padding: 2rem;
}

/* Footer — matches logo2.png black background */
.site-footer {
	position: relative;
	padding: 0;
	color: #ffffff;
	background: #000000;
	border: none;
}

.site-footer__banner {
	position: relative;
	overflow: hidden;
	padding: clamp(3.75rem, 7vw, 5.5rem) 0 clamp(3.25rem, 6vw, 4.75rem);
	background-color: #000000;
}

.site-footer__overlay {
	position: absolute;
	inset: 0;
	background: #000000;
	pointer-events: none;
}

.site-footer__arc {
	position: absolute;
	right: -8%;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(280px, 34vw, 420px);
	height: clamp(280px, 34vw, 420px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0.55;
}

.site-footer__inner {
	position: relative;
	z-index: 1;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(240px, 1.35fr) repeat(3, minmax(140px, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.site-footer__brand {
	max-width: 380px;
}

.site-footer__brand .vs-logo--footer {
	display: inline-block;
	line-height: 0;
	margin-bottom: 0.25rem;
}

.site-footer__tagline {
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.65;
	margin: 1.25rem 0 0;
	max-width: 300px;
}

.site-footer .footer-widget__title {
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 1.125rem;
}

.site-footer .footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer .footer-links li + li {
	margin-top: 0.625rem;
}

.site-footer .footer-links a {
	display: inline-block;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	transition: color var(--transition);
}

.site-footer .footer-links a:hover {
	color: #ffffff;
}

.site-footer__social {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.site-footer .social-link {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-accent);
	color: #ffffff;
	border: none;
	text-decoration: none;
	transition: transform var(--transition-lift), background var(--transition), box-shadow var(--transition);
	box-shadow: 0 4px 14px rgba(13, 110, 253, 0.28);
}

.site-footer .social-link svg {
	width: 18px;
	height: 18px;
}

.site-footer .social-link:hover {
	transform: translateY(-2px);
	background: var(--color-accent-hover);
	color: #ffffff;
	box-shadow: 0 6px 18px rgba(13, 110, 253, 0.38);
}

.site-footer__bottom {
	position: relative;
	z-index: 1;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	background: #000000;
	padding: 1.25rem 0 1.5rem;
}

.site-footer__copyright {
	margin: 0;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.72);
}

/* Blog */
.post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.card--post .card__media img {
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	width: 100%;
	aspect-ratio: 16/10;
	object-fit: cover;
}

/* Responsive */
@media (max-width: 1024px) {
	.hero__inner,
	.upload-preview,
	.ops-preview,
	.quality-split,
	.upload-page-grid,
	.checkout-grid {
		grid-template-columns: 1fr;
	}

	.form-row--half {
		grid-template-columns: 1fr;
	}

	.hero__visual {
		order: -1;
		min-height: 240px;
	}

	.card-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.ops-dashboard__metrics {
		grid-template-columns: repeat(2, 1fr);
	}

	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	:root {
		--header-h: 88px;
		--header-logo-h: 64px;
		--footer-logo-h: 100px;
	}

	.nav-toggle {
		display: flex;
	}

	.site-nav {
		position: fixed;
		top: var(--header-h);
		left: 0;
		right: 0;
		background: #000000;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		padding: 1rem;
		transform: translateY(-120%);
		opacity: 0;
		visibility: hidden;
		transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
	}

	.site-nav.is-open {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}

	.site-nav .nav-menu {
		flex-direction: column;
		align-items: stretch;
	}

	.site-header__actions .btn--sm {
		display: none;
	}

	.vs-logo__img {
		height: var(--header-logo-h);
		max-width: min(220px, 58vw);
	}

	.vs-logo--footer .vs-logo__img {
		height: var(--footer-logo-h);
		max-width: min(280px, 90vw);
	}

	.site-branding {
		max-width: min(240px, 58vw);
	}

	.hero__stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.card-grid--3,
	.card-grid--4,
	.post-grid {
		grid-template-columns: 1fr;
	}

	.steps {
		grid-template-columns: 1fr;
	}

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

	.timeline__step {
		display: flex;
		align-items: center;
		gap: 1rem;
		text-align: left;
	}

	.timeline__dot {
		margin: 0;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
	}

	.inner-grid--2,
	.inner-grid--3,
	.inner-grid--4,
	.inner-featured-grid,
	.pricing-grid,
	.contact-grid {
		grid-template-columns: 1fr;
	}

	.inner-cta__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Figma design — Popular Prints, sections, CTA
   ========================================================================== */

.trust-bar--partners {
	display: none;
}

.trust-bar--partners .trust-bar__inner {
	justify-content: space-between;
	gap: 1.5rem 2rem;
}

.trust-bar__partner {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.45);
	white-space: nowrap;
}

.popular-prints .section-header {
	margin-bottom: 2rem;
}

.popular-prints .section-title {
	margin-bottom: 0;
}

.popular-prints__filters-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 2.5rem;
}

.popular-prints__filters {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.375rem;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	background: #ffffff;
}

.filter-pill {
	padding: 0.5625rem 1.125rem;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: 999px;
	border: none;
	background: transparent;
	color: #64748b;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), transform var(--transition-lift);
}

.filter-pill:hover {
	color: #0a0b10;
}

.filter-pill.is-active {
	background: var(--color-accent);
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(13, 110, 253, 0.28);
}

.popular-prints__carousel-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.5rem);
}

.popular-prints__track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-block: 0.5rem 1rem;
	scrollbar-width: none;
	flex: 1;
	min-width: 0;
}

.popular-prints__track::-webkit-scrollbar {
	display: none;
}

.carousel-nav {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	padding: 0;
	cursor: pointer;
	transition: transform var(--transition-lift), background var(--transition), box-shadow var(--transition);
}

.carousel-nav svg {
	width: 18px;
	height: 18px;
}

.carousel-nav--prev {
	background: #ffffff;
	border: 1.5px solid #0a0b10;
	color: #0a0b10;
	box-shadow: 0 2px 12px rgba(10, 11, 16, 0.06);
}

.carousel-nav--prev:hover {
	transform: translateY(-2px);
	background: #ffffff;
	box-shadow: 0 4px 16px rgba(10, 11, 16, 0.1);
}

.carousel-nav--next {
	background: var(--color-accent);
	border: 1.5px solid var(--color-accent);
	color: #ffffff;
	box-shadow: 0 4px 16px rgba(13, 110, 253, 0.35);
}

.carousel-nav--next:hover {
	transform: translateY(-2px);
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	box-shadow: 0 6px 20px rgba(13, 110, 253, 0.45);
}

.product-card {
	flex: 0 0 min(260px, 78vw);
	scroll-snap-align: start;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(10, 11, 16, 0.04);
	transition: transform var(--transition-lift), box-shadow var(--transition);
}

.product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 28px rgba(10, 11, 16, 0.1);
}

.product-card__media {
	position: relative;
	padding: 0.875rem 0.875rem 0;
}

.product-card__media-link {
	display: block;
	text-decoration: none;
}

.product-card__media-frame {
	aspect-ratio: 4 / 3;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #f8fafc;
	overflow: hidden;
}

.product-card__media-frame img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0.75rem;
	transition: transform 0.35s ease;
}

.product-card:hover .product-card__media-frame img {
	transform: scale(1.04);
}

.product-card__wishlist {
	position: absolute;
	top: 1.375rem;
	right: 1.375rem;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: var(--color-accent);
	color: #ffffff;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(13, 110, 253, 0.35);
	transition: transform var(--transition-lift), background var(--transition);
}

.product-card__wishlist svg {
	width: 14px;
	height: 14px;
}

.product-card__wishlist:hover {
	transform: scale(1.08);
	background: var(--color-accent-hover);
}

.product-card__body {
	padding: 0.875rem 1.125rem 1.25rem;
}

.product-card__title {
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
	line-height: 1.35;
}

.product-card__title a {
	color: #0a0b10;
	text-decoration: none;
}

.product-card__title a:hover {
	color: var(--color-accent);
}

.product-card__vendor {
	font-size: 0.8125rem;
	font-weight: 500;
	color: #94a3b8;
	margin: 0 0 0.875rem;
	line-height: 1.4;
}

.product-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.product-card__price {
	font-size: 0.9375rem;
	font-weight: 800;
	color: #0a0b10;
}

.product-card__price .woocommerce-Price-amount {
	color: inherit;
}

.product-card__rating {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: #94a3b8;
	white-space: nowrap;
}

.product-card__rating-star {
	color: #fbbf24;
	font-size: 0.875rem;
	line-height: 1;
}

.product-card__rating-text {
	line-height: 1;
}

.popular-prints__footnote {
	margin-top: 2rem;
}

.popular-prints__view-all {
	min-width: 160px;
	padding: 0.875rem 2rem;
	font-size: 0.875rem;
	font-weight: 600;
}

.product-card__stars {
	display: flex;
	gap: 2px;
}

.product-card__star {
	color: #e2e8f0;
	font-size: 0.875rem;
}

.product-card__star.is-filled {
	color: var(--color-yellow);
}

/* How it works — Figma panel with white side margins */
.how-it-works {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	background: #ffffff;
	padding-bottom: 0px;
}

.how-it-works__wrap {
	width: min(1200px, 92vw);
	margin-inline: auto;
}

.how-it-works__panel {
	background: #d6e8ff;
	border-radius: 36px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	padding: clamp(3rem, 5vw, 4.25rem) clamp(1.5rem, 3vw, 2.5rem);
}

.how-it-works__header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 2.75rem;
}

.how-it-works__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #0a0b10;
	margin: 0 0 0.75rem;
}

.how-it-works__subtitle {
	font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
	font-weight: 400;
	color: #6b7280;
	margin: 0;
	line-height: 1.55;
}

.how-it-works__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.how-it-works__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #ffffff;
	border-radius: 16px;
	padding: 2rem 1.25rem 1.75rem;
	box-shadow: 0 2px 12px rgba(10, 11, 16, 0.06);
	transition: transform var(--transition-lift), box-shadow var(--transition);
}

.how-it-works__step:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(13, 110, 253, 0.12);
}

.how-it-works__num {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--color-accent);
	color: #ffffff;
	font-size: 1rem;
	font-weight: 800;
	margin-bottom: 1.25rem;
	flex-shrink: 0;
}

.how-it-works__step-title {
	font-size: 1rem;
	font-weight: 700;
	color: #0a0b10;
	margin: 0 0 0.625rem;
	line-height: 1.3;
}

.how-it-works__step-desc {
	font-size: 0.875rem;
	font-weight: 400;
	color: #6b7280;
	margin: 0;
	line-height: 1.55;
	max-width: 220px;
}

/* Legacy steps (kept for other pages) */
.steps--figma {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.steps--figma .steps__item {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: 2rem 1.5rem;
	box-shadow: var(--shadow-card);
	transition: transform var(--transition-lift), box-shadow var(--transition);
}

.steps--figma .steps__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
}

.steps--figma .steps__num {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-accent);
	color: #fff;
	font-size: 1.125rem;
	font-weight: 800;
	margin-bottom: 1.25rem;
}

.steps--figma .steps__title {
	font-size: 1rem;
	font-weight: 700;
	text-transform: capitalize;
	margin-bottom: 0.5rem;
}

.steps--figma .steps__desc {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.55;
}

/* Services split — Figma horizontal row */
.services-split {
	position: relative;
	overflow: hidden;
	padding: clamp(3.5rem, 7vw, 5.5rem) 0;
	background: #050a12;
	color: var(--color-text-on-dark);
}

.services-split__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(ellipse 55% 85% at -5% 50%, rgba(13, 110, 253, 0.55) 0%, rgba(13, 110, 253, 0.2) 35%, transparent 65%),
		linear-gradient(90deg, rgba(13, 110, 253, 0.35) 0%, rgba(13, 110, 253, 0.08) 18%, transparent 42%);
}

.services-split__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(240px, 30%) 1fr;
	gap: 2rem 2.5rem;
	align-items: center;
}

.services-split__intro {
	max-width: 340px;
}

.services-split__title {
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.2;
	color: #ffffff;
	margin: 0 0 1.25rem;
}

.services-split__desc {
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
	margin: 0 0 1.75rem;
}

.services-split__cta {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0.02em;
	padding: 0.75rem 1.375rem;
}

.services-split__cta svg {
	width: 1rem;
	height: 1rem;
}

.services-split .container {
	max-width: min(1280px, 94vw);
}

.services-split__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	align-items: stretch;
}

.service-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: none;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 0;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
	transition: transform var(--transition-lift), box-shadow var(--transition);
}

.service-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(13, 110, 253, 0.2);
}

.service-card__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	flex-shrink: 0;
}

.service-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.service-card:hover .service-card__image img {
	transform: scale(1.04);
}

.service-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.125rem 1.25rem 1.375rem;
	background: #ffffff;
}

.service-card__title {
	font-size: 0.9375rem;
	font-weight: 700;
	color: #0a0b10;
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

.service-card__text {
	font-size: 0.8125rem;
	font-weight: 400;
	color: #6b7280;
	margin-bottom: 0.875rem;
	line-height: 1.55;
	flex: 1;
}

.service-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-accent);
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	margin-top: auto;
}

.service-card__link svg {
	width: 0.875rem;
	height: 0.875rem;
}

.service-card__link:hover {
	color: var(--color-accent-hover);
}

/* Instant quote split — Figma */
.instant-quote {
	padding: 0;
	background: #ffffff;
}

.instant-quote__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: min(945px, 92vh);
}

.instant-quote__visual {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	min-height: 100%;
}

.instant-quote__visual-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: clamp(2.5rem, 5vw, 4.5rem);
	background:
		linear-gradient(180deg, rgba(13, 110, 253, 0.25) 0%, rgba(13, 110, 253, 0.57) 45%, rgba(0, 0, 0, 0.54) 100%),
		rgba(0, 0, 0, 0.35);
}

.instant-quote__visual-content {
	max-width: 520px;
}

.instant-quote__visual-title {
	font-size: clamp(1.375rem, 2.6vw, 2rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #ffffff;
	margin: 0 0 1rem;
	line-height: 1.25;
}

.instant-quote__visual-desc {
	font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 1.75rem;
}

.instant-quote__features {
	list-style: none;
	padding: 0;
	margin: 0;
}

.instant-quote__features li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.9375rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.95);
	margin-bottom: 0.75rem;
	line-height: 1.5;
}

.instant-quote__check {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #ffffff;
	margin-top: 1px;
}

.instant-quote__check svg {
	width: 12px;
	height: 12px;
	stroke-width: 3;
}

.instant-quote__widget-wrap {
	background: #d6e8ff;
	padding: clamp(2rem, 5vw, 3.5rem);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Quote card — Figma */
.quote-card {
	width: 100%;
	max-width: 460px;
}

.quote-card__inner {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(10, 11, 16, 0.1);
	padding: 0 0 1.75rem;
	overflow: hidden;
}

.quote-card__tabs {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid #e5e7eb;
	padding: 0 1.25rem;
	gap: 0.25rem;
}

.quote-card__tab {
	flex: 1;
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	padding: 1rem 0.5rem 0.875rem;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #9ca3af;
	cursor: pointer;
	transition: color var(--transition), border-color var(--transition);
	margin-bottom: -1px;
	white-space: nowrap;
}

.quote-card__tab:hover {
	color: #374151;
}

.quote-card__tab.is-active {
	color: #0a0b10;
	border-bottom-color: #0a0b10;
}

.quote-card__panel {
	padding: 1.5rem 1.5rem 0;
}

.quote-card__panel--placeholder {
	font-size: 0.875rem;
	color: #6b7280;
	line-height: 1.6;
	min-height: 280px;
}

.quote-card__upload-zone {
	position: relative;
	border: 1.5px dashed #d1d5db;
	border-radius: 12px;
	padding: 2rem 1.25rem 1.5rem;
	text-align: center;
	background: #fafbfc;
	margin-bottom: 1.25rem;
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition);
}

.quote-card__upload-zone.is-dragover,
.quote-card__upload-zone.has-file {
	border-color: var(--color-accent);
	background: rgba(13, 110, 253, 0.04);
}

.quote-card__upload-zone .upload-zone__icon {
	color: #9ca3af;
	margin-bottom: 0.875rem;
}

.quote-card__upload-zone .upload-zone__icon svg {
	width: 36px;
	height: 36px;
	margin-inline: auto;
}

.quote-card__drop-title {
	font-size: 0.9375rem;
	font-weight: 700;
	color: #0a0b10;
	margin: 0 0 0.35rem;
}

.quote-card__drop-hint {
	font-size: 0.75rem;
	color: #9ca3af;
	margin: 0 0 1.125rem;
}

.quote-card__choose {
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.625rem 1.25rem;
	text-transform: none;
}

.btn--outline-dark {
	background: #ffffff;
	color: #0a0b10;
	border: 1.5px solid #0a0b10;
}

.btn--outline-dark:hover {
	background: #f3f4f6;
	color: #0a0b10;
	border-color: #0a0b10;
}

.quote-card__meshy {
	text-align: center;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #e5e7eb;
}

.quote-card__meshy-label {
	font-size: 0.8125rem;
	color: #6b7280;
	margin: 0 0 0.75rem;
}

.quote-card__meshy-link {
	color: var(--color-accent);
	font-weight: 600;
	text-decoration: none;
}

.quote-card__meshy-link:hover {
	color: var(--color-accent-hover);
}

.quote-card__generate {
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.625rem 1.25rem;
	text-transform: none;
}

.quote-card__form {
	margin: 0;
	padding: 0 0.25rem;
}

.quote-card__footer-label {
	font-size: 0.8125rem;
	color: #6b7280;
	text-align: center;
	margin: 0 0 0.75rem;
}

.quote-card__quote-btn {
	font-size: 0.875rem;
	font-weight: 700;
	padding: 0.9375rem 1.5rem;
	text-transform: none;
	width: 100%;
}

.quote-card .quote-alert {
	margin: 1rem 1.5rem 0;
	font-size: 0.8125rem;
}

.quote-card .upload-zone__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* Materials section — Figma */
.materials-section {
	padding: clamp(3.5rem, 7vw, 5.5rem) 0;
	background: #ffffff;
}

.materials-section__header {
	max-width: 720px;
	margin-bottom: 2.5rem;
	text-align: left;
}

.materials-section__title {
	font-size: clamp(1.375rem, 2.8vw, 2rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.2;
	color: #0a0b10;
	margin: 0 0 0.875rem;
}

.materials-section__subtitle {
	font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
	font-weight: 400;
	line-height: 1.65;
	color: #6b7280;
	margin: 0;
	max-width: 640px;
}

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

.material-card {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	min-height: 430px;
	transition: transform var(--transition-lift), box-shadow var(--transition);
}

.material-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
}

.material-card__bg {
	position: absolute;
	inset: 0;
	background-image: var(--material-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.material-card__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 430px;
	padding: 1.75rem 1.5rem 1.625rem;
}

.material-card__head {
	position: relative;
	z-index: 2;
}

.material-card__tag {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-accent);
	margin-bottom: 0.5rem;
}

.material-card__name {
	font-size: clamp(1.5rem, 2.2vw, 1.875rem);
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 0.35rem;
	line-height: 1.1;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.material-card--cfn .material-card__name {
	font-size: clamp(1.125rem, 1.8vw, 1.375rem);
	line-height: 1.15;
}

.material-card__spec {
	font-size: 0.8125rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
	line-height: 1.4;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.material-card__badge {
	position: absolute;
	top: 27%;
	right: 1.25rem;
	z-index: 2;
	padding: 0.35rem 0.55rem;
	font-size: 0.5625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #ffffff;
	border-radius: 4px;
	border: 1px solid currentColor;
	white-space: nowrap;
}

.material-card--pla .material-card__badge {
	color: #60a5fa;
	border-color: #60a5fa;
	background: rgba(59, 130, 246, 0.22);
}

.material-card--petg .material-card__badge {
	color: #4ade80;
	border-color: #4ade80;
	background: rgba(34, 197, 94, 0.22);
}

.material-card--asa .material-card__badge {
	color: #facc15;
	border-color: #facc15;
	background: rgba(234, 179, 8, 0.28);
}

.material-card--cfn .material-card__badge {
	color: #c084fc;
	border-color: #c084fc;
	background: rgba(168, 85, 247, 0.22);
}

.material-card__foot {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding-top: 1rem;
}

.material-card__desc {
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.95);
	margin: 0 0 0.875rem;
	max-width: 92%;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.material-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-accent);
	text-decoration: none;
}

.material-card__link svg {
	width: 0.875rem;
	height: 0.875rem;
}

.material-card__link:hover {
	color: #4d9fff;
}

/* CTA + Testimonials stack — Figma overlap */
.home-cta-testimonials {
	position: relative;
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

.cta-final-wrap {
	position: relative;
	z-index: 2;
	padding-bottom: 0;
}

.cta-final {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	background: var(--color-accent);
	padding: clamp(2rem, 3vw, 2rem) clamp(2rem, 4vw, 4rem);
	box-shadow: 0 16px 48px rgba(13, 110, 253, 0.25);
}

.cta-final__vector {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.cta-final__vector img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cta-final__vector--left img {
	object-position: left top;
}

.cta-final__vector--right img {
	object-position: right top;
}

.cta-final__vector::after {
	/* content: '';
	position: absolute;
	inset: 0;
	background: rgba(52, 77, 114, 0.28); */
}

.cta-final__vector--left {
	left: 0;
	top: 0;
	width: clamp(180px, 22vw, 286px);
	height: clamp(114px, 14vw, 181px);
}

.cta-final__vector--right {
	right: 0;
	top: 0;
	width: clamp(180px, 22vw, 286px);
	height: clamp(114px, 14vw, 181px);
}

.cta-final__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 2rem 3rem;
	align-items: center;
}

.cta-final__title {
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #ffffff;
	margin: 0 0 0.875rem;
	line-height: 1;
}

.cta-final__desc {
	font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
	max-width: 520px;
}

.cta-final__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.875rem;
}

.cta-final__btn {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: none;
	padding: 0.8125rem 1.375rem;
	white-space: nowrap;
}

.cta-final__btn.btn--dark {
	background: #0a0b10;
	border-color: #0a0b10;
}

.cta-final__btn.btn--outline-light {
	border-width: 1.5px;
}

.cta-final__btn svg {
	width: 1rem;
	height: 1rem;
}

/* Testimonials — overlaps CTA */
.testimonials-section {
	position: relative;
	z-index: 1;
	margin-top: clamp(-5rem, -10vw, -5.5rem);
	padding: clamp(7.5rem, 12vw, 9rem) 0 clamp(3.5rem, 7vw, 5rem);
	background: rgba(52, 77, 114, 0.12);
}

.testimonials-section__inner {
	text-align: center;
}

.testimonials-section__title {
	font-size: clamp(1.25rem, 2.8vw, 1.875rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #0a0b10;
	margin: 0 0 2.5rem;
	line-height: 1.25;
	max-width: 720px;
	margin-inline: auto;
	margin-bottom: 2.5rem;
}

.testimonials-carousel {
	--testimonials-gap: clamp(1.5rem, 2.8vw, 2.25rem);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--testimonials-gap);
	max-width: 1120px;
	margin-inline: auto;
}

.testimonials-carousel__viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.testimonials-carousel__track {
	display: flex;
	gap: var(--testimonials-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-block: 0.25rem;
}

.testimonials-carousel__track::-webkit-scrollbar {
	display: none;
}

.testimonials-carousel__nav {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	padding: 0;
	cursor: pointer;
	transition: transform var(--transition-lift), background var(--transition), box-shadow var(--transition);
}

.testimonials-carousel__nav svg {
	width: 18px;
	height: 18px;
}

.testimonials-carousel__nav--prev {
	background: #ffffff;
	border: 1.5px solid #050b18;
	color: #050b18;
	box-shadow: 0 2px 12px rgba(10, 11, 16, 0.06);
}

.testimonials-carousel__nav--prev:hover {
	transform: translateY(-2px);
	background: #ffffff;
	box-shadow: 0 4px 16px rgba(10, 11, 16, 0.1);
}

.testimonials-carousel__nav--next {
	background: var(--color-accent);
	border: 1.5px solid var(--color-accent);
	color: #ffffff;
	box-shadow: 0 4px 16px rgba(13, 110, 253, 0.35);
}

.testimonials-carousel__nav--next:hover {
	transform: translateY(-2px);
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	box-shadow: 0 6px 20px rgba(13, 110, 253, 0.45);
}

.testimonial-card {
	flex: 0 0 calc((100% - var(--testimonials-gap)) / 2);
	scroll-snap-align: start;
	background: #ffffff;
	border-radius: 16px;
	padding: 1.75rem 1.625rem;
	box-shadow: 0 4px 24px rgba(10, 11, 16, 0.08);
	margin: 0;
	text-align: left;
	min-height: 220px;
	display: flex;
	flex-direction: column;
}

.testimonial-card__stars {
	color: #fbbf24;
	font-size: 0.875rem;
	letter-spacing: 3px;
	margin-bottom: 1rem;
}

.testimonial-card__quote {
	font-size: 0.875rem;
	font-weight: 400;
	color: #6b7280;
	line-height: 1.65;
	margin: 0 0 1.25rem;
	flex: 1;
}

.testimonial-card__footer {
	margin-top: auto;
}

.testimonial-card__name {
	font-style: normal;
	font-weight: 700;
	font-size: 0.9375rem;
	color: #0a0b10;
	display: block;
	margin-bottom: 0.15rem;
}

.testimonial-card__role {
	font-size: 0.8125rem;
	color: #9ca3af;
}

.section-desc--light {
	color: var(--color-text-muted-on-dark);
}

@media (max-width: 1024px) {
	.how-it-works__steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.steps--figma {
		grid-template-columns: repeat(2, 1fr);
	}

	.services-split__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.services-split__intro {
		max-width: 520px;
	}

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

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

	.instant-quote__split {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.instant-quote__visual {
		min-height: 420px;
	}

	.instant-quote__visual-overlay {
		align-items: center;
	}

	.testimonials-carousel__track .testimonial-card {
		flex: 0 0 100%;
	}

	.cta-final__grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.cta-final__actions {
		justify-content: flex-start;
	}
}

@media (max-width: 768px) {
	.services-split__cards {
		grid-template-columns: 1fr;
		max-width: 380px;
	}

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

	.quote-card__tab {
		font-size: 0.6875rem;
		padding-inline: 0.2rem;
	}
}

@media (max-width: 640px) {
	.how-it-works__panel {
		border-radius: 24px;
		padding: 2.5rem 1.25rem;
	}

	.how-it-works__steps {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.how-it-works__step {
		padding: 1.75rem 1.25rem 1.5rem;
	}

	.steps--figma {
		grid-template-columns: 1fr;
	}

	.materials-section__grid {
		grid-template-columns: 1fr;
		max-width: 380px;
	}

	.carousel-nav {
		display: none;
	}

	.hero__trusted {
		padding-block: 1.25rem 1.75rem;
		gap: 0.875rem;
	}

	.hero__trusted-meta {
		flex-wrap: nowrap;
		align-items: center;
		gap: 1rem;
	}

	.hero__industries {
		flex: 1;
		justify-content: flex-start;
		flex-wrap: wrap;
		column-gap: 1rem;
		row-gap: 0.75rem;
		max-width: none;
	}

	.hero__scroll-down {
		margin-left: auto;
		width: 40px;
		height: 40px;
	}

	.hero__industry-icon {
		width: 38px;
		height: 38px;
		border-radius: 9px;
	}

	.hero__industry-icon-img {
		max-width: 20px;
		max-height: 20px;
	}

	.hero__industry-label {
		font-size: 0.75rem;
	}

	.hero__title-accent {
		font-size: clamp(2rem, 10vw, 3rem);
	}

	.hero__title {
		font-size: clamp(1.75rem, 8vw, 2.5rem);
	}

	.btn--hero {
		width: 100%;
		justify-content: center;
	}
}

/* =========================================================================
   WooCommerce — themed shop / product archive / single product
   ====================================================================== */

.shop-main {
	background: var(--color-bg-light);
}

/* Keep header solid black on WooCommerce pages so the logo blends cleanly */
body.woocommerce .site-header,
body.woocommerce-page .site-header,
body.woocommerce .site-nav,
body.woocommerce-page .site-nav {
	background: #000000;
}

body.woocommerce .vs-logo__img,
body.woocommerce-page .vs-logo__img {
	height: var(--header-logo-h);
	width: auto;
}

.shop-hero {
	text-align: center;
}

.shop-hero .page-hero__title {
	text-transform: none;
}

.shop-hero .page-hero__desc {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

/* Category filter pills */
.shop-filters {
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

.shop-filters__pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.625rem;
}

.shop-filters .filter-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.125rem;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--color-border-light);
	background: #ffffff;
	color: var(--color-text);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: all var(--transition);
}

.shop-filters .filter-pill:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.shop-filters .filter-pill.is-active {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #ffffff;
}

.shop-section {
	padding-top: 1.5rem;
}

/* Toolbar: result count + ordering */
.shop-layout {
	display: flow-root;
}

.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.woocommerce .shop-toolbar .woocommerce-result-count,
.woocommerce-page .shop-toolbar .woocommerce-result-count {
	float: none;
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.875rem;
	font-weight: 500;
}

.woocommerce .shop-toolbar .woocommerce-ordering,
.woocommerce-page .shop-toolbar .woocommerce-ordering {
	float: none;
	margin: 0 0 0 auto;
}

.shop-toolbar .woocommerce-ordering select,
.shop-layout .woocommerce-ordering select,
.woocommerce .shop-layout select.orderby {
	appearance: none;
	-webkit-appearance: none;
	padding: 0.625rem 2.25rem 0.625rem 1rem;
	border: 1.5px solid var(--color-border-light);
	border-radius: var(--radius-pill);
	background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.9rem center;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-text);
	cursor: pointer;
}

/* Product grid */
.woocommerce .shop-layout ul.products,
.woocommerce-page .shop-layout ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	clear: both;
}

.woocommerce .shop-layout ul.products::before,
.woocommerce .shop-layout ul.products::after {
	display: none;
}

.woocommerce .shop-layout ul.products li.product,
.woocommerce-page .shop-layout ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(10, 11, 16, 0.04);
	transition: transform var(--transition-lift), box-shadow var(--transition);
}

.woocommerce .shop-layout ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(10, 11, 16, 0.1);
}

.shop-card__frame {
	position: relative;
	padding: 0.875rem 0.875rem 0;
}

.woocommerce .shop-layout li.product .shop-card__frame > a,
.woocommerce .shop-layout li.product .shop-card__frame img {
	display: block;
}

.woocommerce .shop-layout li.product .shop-card__frame img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--color-border-light);
	border-radius: 12px;
	margin: 0;
	background: #f8fafc;
	transition: transform 0.35s ease;
}

.woocommerce .shop-layout li.product:hover .shop-card__frame img {
	transform: scale(1.04);
}

.woocommerce .shop-layout li.product .onsale {
	position: absolute;
	top: 1.375rem;
	left: 1.375rem;
	min-width: auto;
	min-height: auto;
	margin: 0;
	padding: 0.25rem 0.625rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.4;
}

/* Card body */
.woocommerce .shop-layout li.product .woocommerce-loop-product__link,
.woocommerce .shop-layout li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0;
	text-decoration: none;
}

.woocommerce .shop-layout li.product .woocommerce-loop-product__title,
.woocommerce .shop-layout li.product h2.woocommerce-loop-product__title {
	padding: 0.875rem 1.125rem 0.25rem;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-text);
}

.woocommerce .shop-layout li.product .star-rating {
	margin: 0 1.125rem 0.5rem;
	font-size: 0.85rem;
	color: #fbbf24;
}

.woocommerce .shop-layout li.product .price {
	padding: 0 1.125rem;
	margin-top: auto;
	color: var(--color-text);
	font-weight: 800;
	font-size: 1rem;
}

.woocommerce .shop-layout li.product .price del {
	color: var(--color-text-muted);
	font-weight: 500;
	opacity: 0.7;
}

.woocommerce .shop-layout li.product .price ins {
	text-decoration: none;
	color: var(--color-accent);
}

/* Add to cart button — full width pill (block = reliable full width minus margins) */
.woocommerce .shop-layout li.product .button,
.woocommerce .shop-layout li.product a.button,
.woocommerce .shop-layout li.product a.add_to_cart_button,
.woocommerce .shop-layout li.product .added_to_cart {
	display: block;
	width: auto;
	box-sizing: border-box;
	margin: 1rem 1.125rem 1.25rem;
	padding: 0.75rem 1.25rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: #ffffff;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	border: none;
	cursor: pointer;
	transition: background var(--transition), transform var(--transition-lift), box-shadow var(--transition);
}

.woocommerce .shop-layout li.product .button:hover,
.woocommerce .shop-layout li.product a.add_to_cart_button:hover {
	background: var(--color-accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(13, 110, 253, 0.35);
}

.woocommerce .shop-layout li.product .added_to_cart {
	margin-top: 0;
	background: #0a0b10;
}

.woocommerce .shop-layout li.product a.added_to_cart:hover {
	background: #0a0b10;
}

/* Pagination */
.woocommerce .shop-layout .woocommerce-pagination {
	margin-top: 2.5rem;
	text-align: center;
}

.woocommerce .shop-layout .woocommerce-pagination ul {
	display: inline-flex;
	gap: 0.375rem;
	border: none;
}

.woocommerce .shop-layout .woocommerce-pagination ul li {
	border: none;
	margin: 0;
}

.woocommerce .shop-layout .woocommerce-pagination ul li a,
.woocommerce .shop-layout .woocommerce-pagination ul li span {
	min-width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 10px;
	border: 1.5px solid var(--color-border-light);
	background: #ffffff;
	color: var(--color-text);
	font-weight: 600;
}

.woocommerce .shop-layout .woocommerce-pagination ul li span.current {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #ffffff;
}

.woocommerce .shop-layout .woocommerce-pagination ul li a:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* Single product page */
.shop-main .product .woocommerce-product-gallery {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.shop-main .product .woocommerce-product-gallery img {
	border-radius: var(--radius-lg);
}

.shop-main .product .product_title {
	color: var(--color-text);
	font-weight: 800;
}

.shop-main .product p.price,
.shop-main .product span.price {
	color: var(--color-text);
	font-weight: 800;
}

.shop-main .product p.price ins {
	color: var(--color-accent);
	text-decoration: none;
}

.shop-main .product .woocommerce-product-rating .star-rating {
	color: #fbbf24;
}

.shop-main .single_add_to_cart_button,
.shop-main .product form.cart .button {
	border-radius: var(--radius-pill) !important;
	background: var(--color-accent) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	padding: 0.875rem 1.75rem !important;
	border: none !important;
	transition: background var(--transition), transform var(--transition-lift) !important;
}

.shop-main .single_add_to_cart_button:hover {
	background: var(--color-accent-hover) !important;
	transform: translateY(-2px);
}

.shop-main .product .quantity input.qty {
	border: 1.5px solid var(--color-border-light);
	border-radius: var(--radius-md);
	padding: 0.75rem 0.5rem;
}

.shop-main .woocommerce-tabs ul.tabs {
	padding: 0;
}

.shop-main .woocommerce-tabs ul.tabs li {
	border-radius: var(--radius-pill) var(--radius-pill) 0 0;
	background: #eef2f7;
	border-color: var(--color-border-light);
}

.shop-main .woocommerce-tabs ul.tabs li.active {
	background: #ffffff;
}

.shop-main .woocommerce-tabs ul.tabs li a {
	color: var(--color-text);
	font-weight: 600;
}

.shop-main .related.products > h2,
.shop-main .upsells.products > h2 {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 800;
	color: var(--color-text);
	margin-bottom: 1.5rem;
}

/* Cart / checkout buttons inherit accent */
.shop-main .woocommerce-message,
.shop-main .woocommerce-info,
.shop-main .woocommerce-error {
	border-top-color: var(--color-accent);
	border-radius: var(--radius-md);
	background: #ffffff;
}

@media (max-width: 1024px) {
	.woocommerce .shop-layout ul.products,
	.woocommerce-page .shop-layout ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.woocommerce .shop-layout ul.products,
	.woocommerce-page .shop-layout ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
}

@media (max-width: 420px) {
	.woocommerce .shop-layout ul.products,
	.woocommerce-page .shop-layout ul.products {
		grid-template-columns: 1fr;
	}
}