* {
				box-sizing: border-box;
			}

			html {
				font-size: 16px;
				-webkit-text-size-adjust: 100%;
				-ms-text-size-adjust: 100%;
				overflow-x: hidden;
			}

			:root {
				--bg: #0a0b0d;
				--panel: rgba(248, 249, 250, 0.08);
				--card: rgba(248, 249, 250, 0.15);
				--card-border: rgba(248, 249, 250, 0.25);
				--text: #e9edf1;
				--muted: #a7b0bb;
				--accent: #00d1ff;
				--cta: #0052a3;
				--cta-text: #ffffff;
				--ring: rgba(0, 209, 255, 0.45);
				
				/* Font Option 1: Plus Jakarta Sans (Current) - Modern & Clean */
				--main-font: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
				
				/* Font Option 2: Space Grotesk - Modern Geometric */
				/* --main-font: 'Space Grotesk', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; */
				
				/* Font Option 3: DM Sans - Clean & Professional */
				/* --main-font: 'DM Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; */
				
				/* Font Option 4: Manrope - Rounded & Friendly */
				/* --main-font: 'Manrope', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; */
				
				/* Font Option 5: Poppins - Bold & Modern */
				/* --main-font: 'Poppins', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; */
			}

			body {
				overflow-y: auto;
				overflow-x: hidden;
				margin: 0;
				padding: 0;
				width: 100%;
				max-width: 100vw;
				font-family: var(--main-font);
				background: linear-gradient(135deg, #0a1628 0%, #1a1a2e 50%, #000000 100%);
				background-attachment: fixed;
				color: var(--text);
			}

			* {
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
			}

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

			/* Discount Banner */
			.discount-banner {
				background: var(--card);
				color: var(--text);
				padding: 16px 24px;
				text-align: center;
				font-size: 18px;
				font-weight: 700;
				letter-spacing: 0.5px;
				position: relative;
				overflow: hidden;
				z-index: 1;
				min-height: 56px;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				max-width: 100%;
				border-bottom: none;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
				margin: 0;
			}

			body.light-mode .discount-banner {
				background: #ffffff;
				color: #000000;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
			}

			.design-banner-2 {
				margin-top: 0;
				margin-bottom: 0;
				padding: 28px 24px;
				min-height: 96px;
				background: #000000 !important;
				color: #ffffff !important;
			}

			body.light-mode .design-banner-2 {
				background: #000000 !important;
				color: #ffffff !important;
			}

			.design-banner-2 .discount-banner-message {
				font-size: 28px;
				font-weight: 900;
				color: #ffffff !important;
			}

			.design-banner {
				padding: 16px 24px;
				min-height: 56px;
			}

			.design-banner-link {
				text-decoration: none;
				color: var(--text);
				font-size: 18px;
				font-weight: 900;
				letter-spacing: 0.5px;
				text-transform: none;
				transition: all 0.2s ease;
				display: block;
				width: 100%;
				text-align: center;
			}

			body.light-mode .design-banner-link {
				color: #000000;
			}

			.design-banner-link:hover {
				color: var(--accent);
				-webkit-transform: none;
				-ms-transform: none;
				transform: none;
			}

			body.light-mode .design-banner-link:hover {
				color: #000000;
			}

			.discount-banner-message {
				opacity: 0;
				-webkit-transform: translateY(-10px);
				-ms-transform: translateY(-10px);
				transform: translateY(-10px);
				-webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
				transition: opacity 0.5s ease, transform 0.5s ease;
				position: absolute;
				width: 100%;
				left: 0;
				text-align: center;
			}

			.discount-banner-message.active {
				opacity: 1;
				-webkit-transform: translateY(0);
				-ms-transform: translateY(0);
				transform: translateY(0);
				position: relative;
			}

			.discount-banner-message.fade-out {
				opacity: 0;
				-webkit-transform: translateY(10px);
				-ms-transform: translateY(10px);
				transform: translateY(10px);
			}

			.site-header {
				position: -webkit-sticky;
				position: sticky;
				top: 0;
				z-index: 1000;
				background: rgba(10, 11, 13, 0.8);
				-webkit-backdrop-filter: blur(10px);
				backdrop-filter: blur(10px);
				border-bottom: none;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
				width: 100%;
				max-width: 100%;
				margin: 0;
				padding: 8px 24px;
				display: grid;
				grid-template-columns: 1fr auto 1fr;
				align-items: center;
			}

			body.light-mode .site-header {
				background: rgba(255, 255, 255, 0.95);
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
			}


			.site-logo {
				font-family: var(--main-font);
				font-weight: 700;
				font-size: 18px;
				letter-spacing: 0.5px;
				color: var(--text);
				text-decoration: none;
				display: flex;
				align-items: center;
				padding: 9px;
				grid-column: 2;
				justify-content: center;
			}

			/* Reset absolute positioning */
			.site-logo {
				position: static;
				transform: none;
				left: auto;
			}

			.site-nav {
				grid-column: 3;
				justify-self: end;
			}
			
			/* Ensure mobile toggle stays left or hidden as needed */
			.mobile-menu-toggle {
				grid-column: 1;
				justify-self: start;
			}

			.site-logo img {
				height: 69px;
				width: auto;
				max-width: 100%;
			}

			.site-nav {
				display: flex;
				gap: 20px;
				align-items: center;
				flex-wrap: nowrap;
				margin-left: auto;
			}

			.nav-link {
				color: var(--text);
				text-decoration: none;
				font-size: 14px;
				font-weight: 500;
				padding: 6px 12px;
				border-radius: 6px;
				-webkit-transition: all 0.2s ease;
				transition: all 0.2s ease;
				position: relative;
			}

			.nav-link:hover {
				color: var(--accent);
				background: rgba(0, 82, 163, 0.1);
			}

			body.light-mode .nav-link:hover {
				background: rgba(0, 82, 163, 0.08);
			}

			.nav-link:focus {
				outline: 2px solid var(--accent);
				outline-offset: 2px;
			}

			.nav-link.active {
				color: var(--accent);
				background: rgba(0, 82, 163, 0.15);
			}

			/* Dropdown Menu */
			.nav-dropdown {
				position: relative;
			}

			.nav-dropdown-toggle {
				cursor: pointer;
				display: flex;
				align-items: center;
				gap: 4px;
			}

			.nav-dropdown-toggle::after {
				content: '';
				width: 0;
				height: 0;
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-top: 5px solid currentColor;
				-webkit-transition: transform 0.2s ease;
				transition: transform 0.2s ease;
			}

			.nav-dropdown:hover .nav-dropdown-toggle::after {
				-webkit-transform: rotate(180deg);
				transform: rotate(180deg);
			}

			.nav-dropdown-menu {
				position: absolute;
				top: 100%;
				left: 0;
				margin-top: 8px;
				background: var(--card);
				border: 1px solid var(--card-border);
				border-radius: 8px;
				padding: 8px 0;
				min-width: 200px;
				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
				opacity: 0;
				visibility: hidden;
				-webkit-transform: translateY(-10px);
				transform: translateY(-10px);
				-webkit-transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
				transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
				z-index: 1000;
			}

			.nav-dropdown:hover .nav-dropdown-menu {
				opacity: 1;
				visibility: visible;
				-webkit-transform: translateY(0);
				transform: translateY(0);
			}

			.nav-dropdown-item {
				display: block;
				padding: 10px 20px;
				color: var(--text);
				text-decoration: none;
				font-size: 14px;
				font-weight: 500;
				-webkit-transition: background 0.2s ease, color 0.2s ease;
				transition: background 0.2s ease, color 0.2s ease;
			}

			.nav-dropdown-item:hover {
				background: rgba(0, 82, 163, 0.1);
				color: var(--accent);
			}

			body.light-mode .nav-dropdown-item:hover {
				background: rgba(0, 82, 163, 0.08);
			}

			body.light-mode .nav-link.active {
				background: rgba(0, 82, 163, 0.1);
			}

			.cart-link {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.cart-link svg {
				width: 20px;
				height: 20px;
			}

			.theme-toggle {
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(255, 255, 255, 0.1);
				border: 1px solid rgba(255, 255, 255, 0.2);
				color: var(--text);
				width: 40px;
				height: 40px;
				border-radius: 50%;
				cursor: pointer;
				transition: all 0.3s ease;
				padding: 0;
			}

			.theme-toggle:hover {
				background: rgba(255, 255, 255, 0.12);
				border-color: var(--accent);
			}

			.theme-toggle:focus {
				outline: 2px solid var(--accent);
				outline-offset: 2px;
			}

			.theme-toggle svg {
				width: 18px;
				height: 18px;
			}

			body.light-mode {
				--bg: #ffffff;
				--panel: rgba(248, 249, 250, 0.04);
				--card: #F8F9FA;
				--card-border: rgba(248, 249, 250, 0.25);
				--text: #1a1a2e;
				--muted: #4A5568;
				--accent: #5B7A9A;
				--cta: #00399E;
				--cta-text: #ffffff;
				--ring: rgba(91, 122, 154, 0.3);
				background: #ffffff;
			}

			body.light-mode .theme-toggle {
				background: rgba(0, 0, 0, 0.06);
				border-color: rgba(0, 0, 0, 0.12);
			}

			body.light-mode .theme-toggle:hover {
				background: rgba(0, 0, 0, 0.1);
				border-color: var(--accent);
			}

			/* Hero Section */
			.hero-section {
				position: relative;
				min-height: 85vh;
				max-height: 900px;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 80px 24px 60px;
				overflow: hidden;
				width: 100%;
				max-width: 100%;
			}

			.hero-background {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: 
					repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 82, 163, 0.15) 2px, rgba(0, 82, 163, 0.15) 4px),
					repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 82, 163, 0.12) 2px, rgba(0, 82, 163, 0.12) 4px),
					radial-gradient(circle at 1px 1px, rgba(0, 82, 163, 0.2) 1px, transparent 0);
				background-size: 40px 40px, 40px 40px, 20px 20px;
				z-index: 1;
			}

			.hero-video-background {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 0;
				opacity: 1;
				overflow: hidden;
			}

			.hero-video-background video {
				width: 100%;
				height: 100%;
				object-fit: cover;
				-o-object-fit: cover;
				object-position: center;
			}

			.hero-content {
				position: relative;
				z-index: 2;
				text-align: center;
				max-width: 900px;
				margin: 0 auto;
			}

			.hero-two-column {
				position: relative;
				z-index: 2;
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 40px;
				max-width: 1400px;
				width: 100%;
				margin: 0 auto;
				align-items: center;
				padding: 0;
			}

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

			.hero-card {
				background: var(--card);
				border: none;
				border-radius: 16px;
				padding: 32px;
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1);
				width: 100%;
				max-width: 100%;
			}

			.hero-card-title {
				margin: 0 0 8px 0;
				font-family: var(--main-font);
				font-weight: 700;
				font-size: 24px;
				color: var(--text);
				text-transform: lowercase;
			}

			.hero-card-subtitle {
				margin: 0 0 16px 0;
				font-size: 18px;
				font-weight: 600;
				color: var(--text);
				text-transform: lowercase;
			}

			.hero-card-info {
				margin: 0 0 24px 0;
				font-size: 14px;
				color: var(--muted);
				font-weight: 500;
			}

			.hero-card-description {
				margin: 0 0 24px 0;
				font-size: 15px;
				line-height: 1.7;
				color: var(--text);
			}

			.hero-card-cta-group {
				display: flex;
				flex-direction: column;
				gap: 12px;
				margin-bottom: 20px;
			}

			.hero-card-footer-note {
				margin: 0;
				font-size: 12px;
				color: var(--muted);
				font-weight: 500;
			}

			@media (max-width: 968px) {
				.hero-two-column {
					grid-template-columns: 1fr;
					gap: 30px;
				}

				.hero-2-layout {
					gap: 30px;
				}

				.hero-2-video-card,
				.hero-2-product-card {
					-webkit-transform: none;
					transform: none;
				}

				.hero-2-product-card {
					min-height: 400px;
				}

				.hero-2-product-slider {
					min-height: 400px;
				}

				.hero-2-product-title {
					font-size: 22px;
				}

				.hero-2-product-description {
					font-size: 14px;
				}

				.hero-card {
					padding: 24px;
				}
			}

			@media (max-width: 1024px) and (min-width: 769px) {
				.hero-two-column {
					gap: 30px;
				}

				.hero-card {
					padding: 28px;
				}
			}

			.hero-title {
				margin: 0 0 24px 0;
				font-family: var(--main-font);
				font-weight: 700;
				font-size: 36px;
				font-size: max(36px, min(6vw, 72px)); /* Fallback for clamp */
				font-size: clamp(36px, 6vw, 72px);
				letter-spacing: 1px;
				color: #ffffff;
				line-height: 1.1;
				text-shadow: 0 4px 12px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 100, 255, 0.4), 0 0 60px rgba(0, 150, 255, 0.2);
			}

			body.light-mode .hero-title {
				color: #ffffff;
				text-shadow: 0 4px 12px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 100, 255, 0.4), 0 0 60px rgba(0, 150, 255, 0.2);
			}

			.hero-subtitle {
				margin: 0 0 40px 0;
				color: #ffffff;
				font-size: 18px;
				font-size: max(18px, min(2.5vw, 24px)); /* Fallback for clamp */
				font-size: clamp(18px, 2.5vw, 24px);
				line-height: 1.6;
				max-width: 700px;
				margin-left: auto;
				margin-right: auto;
				font-weight: 500;
				text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 100, 255, 0.3);
			}

			body.light-mode .hero-subtitle {
				color: #ffffff;
				text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 100, 255, 0.3);
			}

			.hero-cta {
				display: flex;
				gap: 16px;
				justify-content: center;
				flex-wrap: wrap;
				width: 100%;
			}

			.hero-cta .cta-button {
				flex: 1 1 auto;
				min-width: 140px;
			}


			/* Hero Section 2 Styles - Three Panel Layout */
			.hero-section-2 {
				position: relative;
				padding: 20px 0 0;
				background: var(--bg);
				min-height: auto;
				width: 100%;
				max-width: 100%;
			}

			/* First Hero Section - Wider and Shorter */
			.hero-section.hero-section-2:first-of-type {
				padding: 10px 0 0;
			}

			@media (max-width: 1900px) {
				.hero-section.hero-section-2:first-of-type {
					padding-top: 80px;
				}
			}

			.hero-section.hero-section-2:first-of-type .hero-2-three-panel {
				max-width: 1600px;
				margin: 0 auto;
				gap: 15px;
				padding: 0 24px;
			}

			.hero-section.hero-section-2:first-of-type .hero-2-panel-middle {
				display: flex;
				flex-direction: column;
			}

			.hero-section.hero-section-2:first-of-type .hero-2-middle-top {
				flex: 1;
				display: flex;
				flex-direction: column;
			}

			.hero-section.hero-section-2:first-of-type .hero-2-middle-bottom {
				flex: 1;
				display: flex;
				flex-direction: column;
			}

			.hero-section.hero-section-2:first-of-type .hero-2-panel {
				border-radius: 12px;
			}

			.hero-section.hero-section-2:first-of-type .hero-2-middle-top,
			.hero-section.hero-section-2:first-of-type .hero-2-middle-bottom {
				padding: 16px 18px;
			}

			.hero-section.hero-section-2:first-of-type .hero-2-middle-title {
				font-size: 18px;
				margin-bottom: 8px;
			}

			.hero-section.hero-section-2:first-of-type .hero-2-middle-subtitle {
				font-size: 13px;
				margin-bottom: 6px;
			}

			.hero-section.hero-section-2:first-of-type .hero-2-middle-info {
				font-size: 12px;
				margin-bottom: 10px;
			}

			.hero-section.hero-section-2:first-of-type .hero-2-middle-description {
				font-size: 14px;
				margin-bottom: 12px;
				line-height: 1.5;
			}

			.hero-section.hero-section-2:first-of-type .hero-2-middle-cta-group {
				margin-bottom: 10px;
			}

			.hero-section.hero-section-2:first-of-type .hero-2-middle-footer {
				font-size: 12px;
			}

			.hero-section.hero-section-2:first-of-type .hero-2-media-placeholder {
				min-height: 200px;
			}

			.hero-section.hero-section-2:first-of-type .hero-2-middle-bottom {
				padding: 0;
				height: 100%;
				display: flex;
				flex-direction: column;
			}

			.hero-section.hero-section-2:first-of-type .hero-2-middle-bottom .hero-2-media-placeholder {
				flex: 1;
				min-height: 0;
				height: 100%;
			}

			.hero-section.hero-section-2:first-of-type .hero-2-middle-bottom .hero-2-image-slider {
				height: 100%;
				min-height: 100%;
			}

			body.light-mode .hero-section-2 {
				background: #f5f5f5;
			}

			.hero-2-three-panel {
				display: -ms-grid;
				display: grid;
				-ms-grid-columns: 1fr 0.5fr 0.6fr;
				grid-template-columns: 1fr 0.5fr 0.6fr;
				-ms-grid-rows: auto auto;
				grid-template-rows: auto auto;
				gap: 20px;
				max-width: 100%;
				margin: 0;
				padding: 0 24px;
				position: relative;
				z-index: 2;
			}

			@media (max-width: 968px) {
				.hero-2-three-panel {
					-ms-grid-columns: 1fr;
					grid-template-columns: 1fr;
					gap: 20px;
					padding: 0 16px;
				}

				.hero-2-panel-middle {
					-ms-grid-column: 1;
					grid-column: 1;
				}

				.hero-2-panel {
					border-radius: 16px;
				}

				.hero-2-middle-top,
				.hero-2-middle-bottom {
					padding: 24px 20px;
				}
			}

			@media (max-width: 768px) {
				.hero-section-2 {
					padding: 16px 0 0;
				}

				.hero-2-three-panel {
					padding: 0 12px;
					gap: 16px;
				}

				.hero-2-panel-title {
					font-size: 24px;
				}

				.hero-2-middle-title {
					font-size: 24px;
				}
			}

			.hero-2-panel {
				background: var(--card);
				border: none;
				border-radius: 20px;
				overflow: hidden;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				-ms-flex-direction: column;
				flex-direction: column;
				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
			}

			body.light-mode .hero-2-panel {
				background: #F8F9FA;
				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
			}

			.hero-2-panel-middle {
				background: transparent !important;
				border: none !important;
				box-shadow: none !important;
				border-radius: 0 !important;
				overflow: visible !important;
			}

			.hero-2-panel-header {
				padding: 16px 20px;
				font-size: 13px;
				font-weight: 600;
				color: var(--text);
				text-transform: lowercase;
				letter-spacing: 0.5px;
				border-bottom: none;
				background: rgba(255, 255, 255, 0.05);
			}

			body.light-mode .hero-2-panel-header {
				background: rgba(0, 0, 0, 0.02);
			}

			.hero-2-panel-title {
				padding: 0 0 12px 0;
				margin-bottom: 12px;
				font-family: var(--main-font);
				font-size: 16px;
				font-weight: 700;
				color: var(--text);
				text-transform: lowercase;
				letter-spacing: 0.3px;
				border-bottom: none;
				background: transparent;
			}

			.hero-2-panel-left .hero-2-panel-title {
				font-size: 28px;
				font-weight: 700;
				color: #000000;
				text-shadow: none;
				margin-bottom: 0;
			}

			.hero-2-panel-content {
				flex: 1;
				position: relative;
				min-height: 300px;
				display: flex;
				flex-direction: column;
			}

			.hero-2-panel-right .hero-2-panel-content,
			.hero-2-panel-left .hero-2-panel-content {
				padding: 0;
			}

			.hero-2-media-placeholder {
				width: 100%;
				flex: 1;
				background: rgba(0, 0, 0, 0.05);
				position: relative;
				min-height: 300px;
			}

			.hero-2-panel-right .hero-2-media-placeholder,
			.hero-2-panel-left .hero-2-media-placeholder {
				flex: none;
				height: 100%;
				min-height: 100%;
			}

			/* Hero 3 - make overlay fill available space */
			.hero-section-3 .hero-2-panel-right {
				display: flex;
				flex-direction: column;
			}

			.hero-section-3 .hero-2-middle-top {
				flex: 0 0 auto;
			}

			.hero-section-3 .hero-3-design-overlay {
				flex: 1;
				min-height: 0;
			}

			.hero-2-panel-right .hero-2-panel-title {
				position: absolute;
				bottom: 20px;
				left: 20px;
				right: 20px;
				z-index: 3;
				background: rgba(255, 255, 255, 0.9);
				padding: 12px 16px;
				border-radius: 8px;
				color: #000000;
				margin: 0;
			}

			@supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
				.hero-2-panel-right .hero-2-panel-title {
					background: rgba(255, 255, 255, 0.85);
					-webkit-backdrop-filter: blur(10px);
					backdrop-filter: blur(10px);
				}
			}

			.hero-2-panel-left .hero-2-panel-title {
				position: absolute;
				bottom: 20px;
				left: 20px;
				right: 20px;
				z-index: 3;
				background: rgba(255, 255, 255, 0.9);
				padding: 12px 16px;
				border-radius: 8px;
				margin: 0;
			}

			@supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
				.hero-2-panel-left .hero-2-panel-title {
					background: rgba(255, 255, 255, 0.85);
					-webkit-backdrop-filter: blur(10px);
					backdrop-filter: blur(10px);
				}
			}

			.hero-2-image-slider {
				position: relative;
				width: 100%;
				height: 100%;
			}

			.hero-2-image-slider::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.6) 100%);
				z-index: 3;
				pointer-events: none;
			}

			.hero-2-slide-item {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				visibility: hidden;
				-webkit-transition: opacity 0.8s ease, visibility 0s 0.8s;
				transition: opacity 0.8s ease, visibility 0s 0.8s;
				z-index: 1;
			}

			.hero-2-slide-item.active {
				opacity: 1;
				visibility: visible;
				z-index: 2;
				-webkit-transition: opacity 0.8s ease, visibility 0s;
				transition: opacity 0.8s ease, visibility 0s;
			}

			.hero-2-slide-item img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				-o-object-fit: cover;
				display: block;
			}

			.hero-2-media-video,
			.hero-2-media-image {
				width: 100%;
				height: 100%;
				object-fit: cover;
				-o-object-fit: cover;
				display: block;
			}

			.hero-2-panel-footer {
				padding: 16px 20px;
				font-size: 12px;
				font-weight: 500;
				color: var(--muted);
				text-transform: lowercase;
				border-top: 1px solid var(--card-border);
				background: rgba(0, 0, 0, 0.02);
			}

			/* Middle Panel Styles */
			.hero-2-panel-middle {
				background: transparent !important;
				border: none !important;
				box-shadow: none !important;
				border-radius: 0 !important;
				overflow: visible !important;
				grid-column: 2;
			}

			/* Hero Section 3 - Swapped layout: middle has slider, right has cards */
			.hero-section-3 .hero-2-panel-middle {
				background: var(--card) !important;
				border: none !important;
				border-radius: 20px !important;
				overflow: hidden !important;
				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1) !important;
			}

			body.light-mode .hero-section-3 .hero-2-panel-middle {
				background: #F8F9FA !important;
				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
			}

			.hero-section-3 .hero-2-panel-right {
				background: transparent !important;
				border: none !important;
				box-shadow: none !important;
				border-radius: 0 !important;
				overflow: visible !important;
			}

			/* Hero 3 Design Overlay Style */
			.hero-3-design-overlay {
				position: relative;
				overflow: hidden;
				border-radius: 20px;
				border: none;
				padding: 0;
				margin: 0;
				width: 100%;
				height: 100%;
				min-height: 400px;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				background: var(--card);
				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
			}

			body.light-mode .hero-3-design-overlay {
				background: #F8F9FA;
				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
			}

			.hero-3-overlay-image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
			}

			.hero-3-overlay-image img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				-o-object-fit: cover;
				border-radius: 20px;
			}

			.hero-3-overlay-content {
				position: relative;
				z-index: 4;
				padding: 20px 24px;
				color: #ffffff;
			}

			.hero-3-design-overlay::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.6) 100%);
				z-index: 3;
				pointer-events: none;
				border-radius: 20px;
			}

			.hero-3-overlay-title {
				margin: 0 0 8px 0;
				font-family: var(--main-font);
				font-weight: 700;
				font-size: 28px;
				color: #ffffff;
				text-transform: capitalize;
				letter-spacing: 0.5px;
			}

			.hero-3-overlay-link {
				display: inline-block;
				font-family: var(--main-font);
				font-size: 14px;
				font-weight: 500;
				color: #ffffff;
				text-decoration: underline;
				text-underline-offset: 4px;
				-webkit-transition: opacity 0.2s ease;
				transition: opacity 0.2s ease;
			}

			.hero-3-overlay-link:hover {
				opacity: 0.8;
			}

			.hero-2-middle-top {
				padding: 32px 28px;
				border-bottom: none;
				margin-bottom: 24px;
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1);
				background: rgba(20, 22, 26, 0.95);
				border-radius: 12px;
				border: none;
			}

			body.light-mode .hero-2-middle-top {
				background: #F8F9FA;
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1);
			}

			.hero-2-middle-subtitle {
				margin: 0 0 8px 0;
				font-size: 13px;
				font-weight: 600;
				color: var(--text);
				text-transform: lowercase;
				letter-spacing: 0.5px;
				opacity: 0.8;
			}

			.hero-2-middle-title {
				margin: 0 0 16px 0;
				font-family: var(--main-font);
				font-weight: 700;
				font-size: 28px;
				color: var(--text);
				text-transform: lowercase;
				line-height: 1.2;
			}

			.hero-2-middle-info {
				margin: 0 0 20px 0;
				font-size: 12px;
				color: var(--muted);
				line-height: 1.5;
			}

			.hero-2-middle-description {
				margin: 0 0 24px 0;
				font-size: 14px;
				color: var(--text);
				line-height: 1.7;
			}

			.hero-2-middle-cta-group {
				display: flex;
				flex-direction: column;
				gap: 12px;
				margin-bottom: 20px;
			}

			.hero-2-cta-primary {
				display: block;
				padding: 14px 24px;
				background: var(--accent);
				color: #ffffff;
				text-decoration: none;
				border-radius: 10px;
				font-weight: 600;
				font-size: 14px;
				text-align: center;
				-webkit-transition: all 0.3s ease;
				transition: all 0.3s ease;
				text-transform: lowercase;
			}

			.hero-2-cta-primary:hover {
				background: #004a94;
				-webkit-transform: translateY(-2px);
				transform: translateY(-2px);
			}

			.hero-2-cta-primary:focus,
			.hero-2-cta-secondary:focus {
				outline: 3px solid var(--accent-secondary);
				outline-offset: 3px;
			}

			.hero-2-cta-secondary {
				display: block;
				padding: 14px 24px;
				background: transparent;
				color: var(--text);
				text-decoration: none;
				border: 2px solid var(--accent);
				border-radius: 10px;
				font-weight: 600;
				font-size: 14px;
				text-align: center;
				-webkit-transition: all 0.3s ease;
				transition: all 0.3s ease;
				text-transform: lowercase;
			}

			.hero-2-cta-secondary:hover {
				background: rgba(0, 82, 163, 0.1);
				border-color: #004a94;
			}

			.hero-2-middle-footer {
				margin: 0;
				font-size: 11px;
				color: var(--muted);
				line-height: 1.5;
			}

			.hero-2-middle-bottom {
				padding: 0;
				margin-top: 0;
				background: transparent;
				border-radius: 20px;
				border: none;
				box-shadow: none;
				overflow: hidden;
			}

			.hero-2-middle-bottom .hero-2-media-placeholder {
				width: 100%;
				height: 100%;
				min-height: 300px;
			}

			.hero-2-middle-bottom .hero-2-image-slider {
				width: 100%;
				height: 100%;
				border-radius: 20px;
				overflow: hidden;
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1);
			}

			body.light-mode .hero-2-middle-bottom .hero-2-image-slider {
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1);
			}

			/* Hero 3 overlay - remove borders and match slider style */
			.hero-section-3 .hero-3-design-overlay {
				border: none;
				border-radius: 0;
				box-shadow: none;
				background: transparent;
			}

			body.light-mode .hero-section-3 .hero-3-design-overlay {
				border: none;
				border-radius: 0;
				box-shadow: none;
				background: transparent;
			}

			.hero-2-design-title {
				margin: 0 0 12px 0;
				font-family: var(--main-font);
				font-weight: 700;
				font-size: 20px;
				color: var(--text);
				text-transform: lowercase;
			}

			.hero-2-design-description {
				margin: 0 0 20px 0;
				font-size: 13px;
				color: var(--muted);
				line-height: 1.6;
			}

			.hero-2-color-swatches {
				display: flex;
				gap: 10px;
				margin-bottom: 20px;
			}

			.hero-2-swatch {
				width: 40px;
				height: 40px;
				border-radius: 8px;
				border: none;
				cursor: pointer;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
				-webkit-transition: all 0.2s ease;
				transition: all 0.2s ease;
			}

			.hero-2-swatch:hover {
				-webkit-transform: scale(1.1);
				transform: scale(1.1);
				box-shadow: 0 4px 12px rgba(0, 82, 163, 0.3);
			}

			/* Bottom Badges */
			.hero-2-badges {
				display: flex;
				flex-direction: row;
				gap: 12px;
				justify-content: flex-start;
				align-items: center;
				max-width: 1400px;
				margin: 40px auto 0;
				padding: 0 24px;
				flex-wrap: wrap;
			}

			.hero-2-badge {
				padding: 12px 20px;
				background: rgba(0, 82, 163, 0.08);
				border: none;
				box-shadow: 0 2px 8px rgba(0, 82, 163, 0.15);
				border-radius: 12px;
				font-size: 13px;
				font-weight: 600;
				color: var(--text);
				text-transform: lowercase;
				text-align: left;
				white-space: nowrap;
				-webkit-transition: all 0.2s ease;
				transition: all 0.2s ease;
			}

			.hero-2-badge:hover {
				background: rgba(0, 82, 163, 0.12);
				border-color: rgba(0, 82, 163, 0.25);
			}

			/* Hero Scroll Indicator */
			.hero-scroll-indicator {
				position: absolute;
				bottom: 40px;
				left: 50%;
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 8px;
				z-index: 3;
				cursor: pointer;
				-webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
				transition: opacity 0.3s ease, transform 0.3s ease;
			}

			.hero-scroll-indicator:hover {
				opacity: 0.7;
				-webkit-transform: translateX(-50%) translateY(5px);
				transform: translateX(-50%) translateY(5px);
			}

			.scroll-text {
				font-size: 12px;
				font-weight: 600;
				letter-spacing: 2px;
				text-transform: uppercase;
				color: rgba(255, 255, 255, 0.9);
				text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
			}

			.scroll-arrow {
				color: rgba(255, 255, 255, 0.9);
				-webkit-animation: scrollBounce 2s ease-in-out infinite;
				animation: scrollBounce 2s ease-in-out infinite;
				filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
			}

			@-webkit-keyframes scrollBounce {
				0%, 100% {
					-webkit-transform: translateY(0);
					transform: translateY(0);
				}
				50% {
					-webkit-transform: translateY(8px);
					transform: translateY(8px);
				}
			}

			@keyframes scrollBounce {
				0%, 100% {
					-webkit-transform: translateY(0);
					transform: translateY(0);
				}
				50% {
					-webkit-transform: translateY(8px);
					transform: translateY(8px);
				}
			}

			.cta-button {
				padding: 18px 40px;
				border-radius: 12px;
				font-weight: 700;
				font-size: 16px;
				letter-spacing: 0.5px;
				cursor: pointer;
				transition: all 0.2s ease;
				border: none;
				text-decoration: none;
				display: inline-block;
			}

			.cta-button:focus {
				outline: 3px solid var(--accent);
				outline-offset: 3px;
			}

			.cta-primary {
				background: var(--cta);
				color: var(--cta-text);
				box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
			}

			.cta-primary:hover {
				transform: translateY(-2px);
				box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
			}

			.cta-primary:focus {
				outline: 3px solid var(--accent-secondary);
				outline-offset: 3px;
			}

			.cta-secondary {
				background: var(--card);
				border: 1px solid var(--card-border);
				color: var(--text);
			}

			.cta-secondary:hover {
				border-color: var(--accent);
				background: rgba(248, 249, 250, 0.2);
			}

			/* Content Sections */
			.content-section {
				padding: 20px 24px !important;
				max-width: 1400px;
				width: 100%;
				margin: 0 auto;
				box-sizing: border-box;
				overflow-x: hidden;
			}

			/* Reduce padding for Get Notified section */
			.content-section:has(.coming-soon-form-section) {
				padding-top: 60px;
				padding-bottom: 60px;
			}


			.content-section-no-bottom {
				padding-top: 40px !important;
				padding-bottom: 100px !important;
			}

			.content-section-no-bottom .two-column {
				margin-bottom: 0;
				margin-top: 0;
			}

			.content-section:has(+ .design-banner-2) {
				padding-bottom: 0;
			}

			.section-title {
				margin: 0 0 24px 0;
				font-family: var(--main-font);
				font-weight: 700;
				font-size: 32px;
				font-size: max(32px, min(4vw, 48px)); /* Fallback for clamp */
				font-size: clamp(32px, 4vw, 48px);
				letter-spacing: 0.5px;
				color: var(--text);
				text-align: center;
			}

			.section-description {
				margin: 0 auto 60px;
				color: var(--muted);
				font-size: 18px;
				line-height: 1.8;
				max-width: 800px;
				text-align: center;
			}

			/* Two Column Layout */
			.two-column {
				display: -ms-grid;
				display: grid;
				-ms-grid-columns: 1fr 1fr;
				grid-template-columns: 1fr 1fr;
				gap: 60px;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				margin-top: 60px;
				width: 100%;
				max-width: 100%;
				box-sizing: border-box;
			}

			.two-column:has(.design-cards-container) {
				grid-template-columns: 0.8fr 1.2fr;
			}

			.image-placeholder {
				position: relative;
				width: 100%;
				padding-bottom: 75%; /* 4/3 aspect ratio fallback */
				background: var(--card);
				border: none;
				border-radius: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
			}
			
			@supports (aspect-ratio: 4/3) {
				.image-placeholder {
					padding-bottom: 0;
					aspect-ratio: 4/3;
				}
			}

			.image-placeholder::before {
				content: '[IMAGE PLACEHOLDER]';
				color: var(--muted);
				font-size: 14px;
				opacity: 0.6;
				text-align: center;
				position: absolute;
			}

			.image-placeholder.large::before {
				content: '[LARGE IMAGE - Product showcase or lifestyle image]';
			}

			.image-placeholder.hero::before {
				content: '[HERO IMAGE - Lifestyle/product hero image]';
			}

			.text-content {
				width: 100%;
				max-width: 100%;
				box-sizing: border-box;
			}

			.text-content h3 {
				margin: 0 0 16px 0;
				font-family: var(--main-font);
				font-weight: 700;
				font-size: 28px;
				color: var(--text);
			}

			.text-content p {
				margin: 0 0 20px 0;
				color: var(--muted);
				line-height: 1.8;
				font-size: 16px;
			}

			.text-content ul {
				margin: 20px 0;
				padding-left: 24px;
				color: var(--muted);
				line-height: 2;
			}

			.text-content li {
				margin-bottom: 8px;
			}

			/* Feature Grid */
			.feature-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 32px;
				margin-top: 60px;
			}

			@media (max-width: 968px) {
				.feature-grid {
					grid-template-columns: repeat(2, 1fr);
					gap: 24px;
				}
			}

			.feature-card {
				background: var(--card);
				border: none;
				border-radius: 16px;
				padding: 40px;
				text-align: center;
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
				transition: transform 0.2s ease, box-shadow 0.2s ease;
			}

			.feature-card:hover {
				transform: translateY(-4px);
				box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
			}

			.feature-card h3 {
				margin: 0 0 16px 0;
				font-family: var(--main-font);
				font-weight: 700;
				font-size: 22px;
				color: var(--accent);
			}

			.feature-card p {
				margin: 0;
				color: var(--muted);
				line-height: 1.7;
			}

			/* Product Grid */
			.product-grid {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				gap: 24px;
				margin-top: 60px;
			}

			/* Product Slider Wrapper */
			.product-slider-wrapper {
				position: relative;
				width: 100%;
				margin-top: 60px;
			}

			.product-slider-nav {
				display: none;
			}

			/* On desktop, product-slider should still be a grid */
			.product-slider {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				gap: 24px;
			}

			@media (max-width: 1200px) {
				.product-slider {
					grid-template-columns: repeat(4, 1fr);
				}
			}

			@media (max-width: 968px) {
				.product-slider {
					grid-template-columns: repeat(3, 1fr);
					gap: 20px;
				}
			}

			.product-slider-btn {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				z-index: 10;
				width: 48px;
				height: 48px;
				border-radius: 50%;
				background: var(--card);
				border: 2px solid var(--card-border);
				color: var(--text);
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			}

			.product-slider-btn:hover:not(.disabled) {
				background: var(--accent);
				border-color: var(--accent);
				color: #ffffff;
				transform: translateY(-50%) scale(1.1);
				box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
			}

			.product-slider-btn:active:not(.disabled) {
				transform: translateY(-50%) scale(0.95);
			}

			.product-slider-btn.disabled {
				opacity: 0.4;
				cursor: not-allowed;
				pointer-events: none;
			}

			.product-slider-prev {
				left: -24px;
			}

			.product-slider-next {
				right: -24px;
			}

			.product-slider-btn svg {
				width: 20px;
				height: 20px;
			}

			.product-card {
				background: var(--card);
				border: none;
				border-radius: 16px;
				overflow: hidden;
				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
				transition: transform 0.2s ease, box-shadow 0.2s ease;
				cursor: pointer;
				position: relative;
				display: flex;
				flex-direction: column;
			}

			.product-card:hover {
				transform: translateY(-4px);
				box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
			}

			/* Floating Detail Card - Overlay on Entire Card */
			.product-detail-card {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: rgba(10, 11, 13, 0.95);
				-webkit-backdrop-filter: blur(10px);
				backdrop-filter: blur(10px);
				border-radius: 16px;
				padding: 24px;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				opacity: 0;
				pointer-events: none;
				-webkit-transition: opacity 0.3s ease;
				transition: opacity 0.3s ease;
				z-index: 10;
				overflow-y: auto;
			}

			body.light-mode .product-detail-card {
				background: rgba(245, 247, 250, 0.95);
			}

			.product-card:hover .product-detail-card {
				opacity: 0;
				pointer-events: none;
			}

			.product-card-btn {
				position: relative;
				z-index: 20;
			}

			.product-detail-title {
				margin: 0 0 12px 0;
				font-family: var(--main-font);
				font-weight: 700;
				font-size: 20px;
				color: var(--text);
				text-align: center;
			}

			.product-detail-description {
				margin: 0 0 16px 0;
				color: var(--muted);
				line-height: 1.6;
				font-size: 14px;
				text-align: center;
			}

			.product-detail-features {
				list-style: none;
				padding: 0;
				margin: 0;
			}

			.product-detail-features li {
				padding: 6px 0;
				color: var(--muted);
				font-size: 13px;
				border-bottom: 1px solid rgba(255, 255, 255, 0.1);
				text-align: center;
			}

			.product-detail-features li:last-child {
				border-bottom: none;
			}

			.product-detail-features li strong {
				color: var(--text);
				font-weight: 600;
			}

			.product-image {
				width: 100%;
				position: relative;
				padding-bottom: 133.333%; /* 3/4 aspect ratio fallback */
				background: var(--panel);
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				border-radius: 16px 16px 0 0;
			}
			
			@supports (aspect-ratio: 3/4) {
				.product-image {
					padding-bottom: 0;
					aspect-ratio: 3/4;
				}
			}

			.product-image img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 16px 16px 0 0;
				object-fit: cover;
				-o-object-fit: cover;
				max-width: 100%;
			}

			.product-info {
				padding: 24px;
				display: flex;
				flex-direction: column;
				gap: 12px;
				flex: 1;
			}

			.product-name {
				margin: 0;
				font-family: var(--main-font);
				font-weight: 600;
				font-size: 18px;
				color: var(--text);
			}

			.product-description {
				margin: 0;
				color: var(--text);
				font-size: 15px;
				line-height: 1.7;
			}

			.product-card-btn {
				margin-top: auto;
				padding: 12px 20px;
				border-radius: 10px;
				background: var(--accent);
				color: var(--cta-text);
				border: none;
				font-weight: 700;
				font-size: 14px;
				letter-spacing: 0.5px;
				cursor: pointer;
				transition: all 0.2s ease;
				text-decoration: none;
				text-align: center;
				display: block;
			}

			.product-card-btn:hover {
				background: var(--cta);
				transform: translateY(-2px);
				box-shadow: 0 8px 16px rgba(0, 209, 255, 0.3);
			}

			.product-card-btn:focus {
				outline: 3px solid var(--accent-secondary);
				outline-offset: 3px;
			}

			.product-card-btn:active {
				transform: translateY(0);
			}

			/* Designer Showcase */
			/* Design Cards Container */
			.design-cards-container {
				position: relative;
				margin: 60px 0;
				overflow: hidden;
			}

			.two-column .design-cards-container {
				margin: 0;
				width: 100%;
			}

			/* Side-by-side Design Cards Layout */
			.design-cards-side-by-side {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 32px;
				margin: 60px 0;
			}

			.design-cards-side-by-side .design-card {
				min-width: auto;
				width: 100%;
			}

			@media (max-width: 968px) {
				.design-cards-side-by-side {
					grid-template-columns: 1fr;
					gap: 24px;
				}
			}

			.design-cards-track {
				display: flex;
				transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
				will-change: transform;
			}

			.design-card {
				min-width: 100%;
				flex-shrink: 0;
				background: var(--card);
				border: none;
				border-radius: 16px;
				padding: 30px;
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
			}

			.two-column .design-card {
				width: 100%;
				max-width: 100%;
				padding: 0;
				overflow: hidden;
			}

			.two-column .design-card-content {
				padding: 0;
				margin: 0;
			}

			.two-column .design-card:has(video) {
				padding: 0;
			}

			.two-column .design-card:has(.color-grid) {
				padding: 20px;
			}

			.design-cards-nav-buttons {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 16px;
				margin-bottom: 30px;
				flex-wrap: wrap;
				z-index: 10;
			}

			.design-card-nav-btn {
				padding: 10px 20px;
				border-radius: 8px;
				background: transparent;
				color: var(--muted);
				border: 2px solid var(--muted);
				cursor: pointer;
				transition: all 0.3s ease;
				font-size: 14px;
				font-weight: 600;
				font-family: Inter, system-ui, sans-serif;
				text-align: center;
				white-space: nowrap;
			}

			.design-card-nav-btn:hover {
				color: var(--accent);
				border-color: var(--accent);
				background: rgba(0, 82, 163, 0.1);
			}

			.design-card-nav-btn.active {
				background: var(--accent);
				color: var(--cta-text);
				border-color: var(--accent);
			}
			
			@media (max-width: 768px) {
				.design-cards-nav-buttons {
					gap: 8px;
				}
				
				.design-card-nav-btn {
					padding: 8px 12px;
					font-size: 12px;
					white-space: normal;
				}
			}

			.design-card-content {
				max-width: 1200px;
				margin: 0 auto;
			}

			.design-card .designer-showcase {
				margin-bottom: 0;
			}

			.designer-showcase {
				margin: 0 0 40px 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.designer-media {
				width: 100%;
				max-width: 1200px;
				border-radius: 12px;
				overflow: hidden;
				background: var(--panel);
			}

			.two-column .designer-media {
				max-width: 100%;
			}

			.designer-video {
				width: 100%;
				height: auto;
				display: block;
				object-fit: contain;
			}

			.two-column .designer-video {
				width: 100%;
				height: auto;
				max-height: 900px;
				min-height: 600px;
				object-fit: cover;
				-o-object-fit: cover;
				display: block;
				margin: 0;
				padding: 0;
				vertical-align: top;
			}

			.two-column .designer-showcase {
				margin: 0;
				padding: 0;
			}

			.two-column .designer-media {
				margin: 0;
				padding: 0;
				border-radius: 0;
				width: 100%;
				background: transparent;
			}

			.two-column .design-card:has(video) .designer-media {
				border-radius: 16px;
				overflow: hidden;
				background: transparent;
				display: block;
				height: auto;
				min-height: 0;
			}

			.two-column .design-card:has(video) {
				background: transparent;
			}

			/* Color Grid */
			.color-grid {
				display: grid;
				grid-template-columns: repeat(12, 1fr);
				grid-template-rows: repeat(5, 1fr);
				gap: 12px;
				max-width: 1200px;
				margin: 0 auto;
				padding: 8px;
			}

			.two-column .color-grid {
				grid-template-columns: repeat(10, 1fr);
				grid-template-rows: repeat(5, 1fr);
				padding: 8px;
				min-height: 500px;
			}

			.color-swatch {
				position: relative;
				width: 100%;
				padding-bottom: 100%; /* 1:1 aspect ratio fallback */
				border-radius: 8px;
				cursor: pointer;
				-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, z-index 0.3s ease;
				transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, z-index 0.3s ease;
				border: 2px solid transparent;
				will-change: transform;
				min-height: 60px;
				overflow: hidden;
			}

			.color-swatch::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-image: 
					repeating-linear-gradient(
						45deg,
						rgba(255, 255, 255, 0.1) 0px,
						rgba(255, 255, 255, 0.1) 1px,
						transparent 1px,
						transparent 2px
					),
					repeating-linear-gradient(
						-45deg,
						rgba(0, 0, 0, 0.05) 0px,
						rgba(0, 0, 0, 0.05) 1px,
						transparent 1px,
						transparent 2px
					),
					radial-gradient(
						circle at 2px 2px,
						rgba(0, 0, 0, 0.1) 0.5px,
						transparent 0.5px
					);
				background-size: 4px 4px, 4px 4px, 6px 6px;
				background-position: 0 0, 0 0, 0 0;
				pointer-events: none;
				z-index: 1;
				mix-blend-mode: overlay;
			}
			
			@supports (aspect-ratio: 1) {
				.color-swatch {
					padding-bottom: 0;
					aspect-ratio: 1;
				}
			}

			.color-swatch:hover {
				-webkit-transform: scale(1.25);
				transform: scale(1.25);
				box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
				z-index: 100;
				border-color: var(--text);
			}

			body.color-hover-active {
				transition: background-color 0.3s ease;
			}

			#color-hover-overlay {
				background-image: 
					repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.05) 2px, rgba(0, 0, 0, 0.05) 4px),
					repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.05) 2px, rgba(0, 0, 0, 0.05) 4px),
					radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.08) 1px, transparent 0);
				background-size: 4px 4px, 4px 4px, 8px 8px;
				background-position: 0 0, 0 0, 0 0;
			}


			.color-swatch::after {
				content: attr(data-name);
				position: absolute;
				bottom: -35px;
				left: 50%;
				transform: translateX(-50%);
				background: var(--card);
				color: var(--text);
				padding: 6px 12px;
				border-radius: 6px;
				font-size: 12px;
				font-weight: 600;
				white-space: nowrap;
				opacity: 0;
				pointer-events: none;
				transition: opacity 0.2s ease;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
				border: none;
				z-index: 20;
			}

			.color-swatch:hover::after {
				opacity: 1;
			}


			/* Steps Grid */
			.steps-grid {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
				gap: 40px;
				margin-top: 60px;
			}

			.step-item {
				text-align: center;
			}

			.step-number {
				width: 80px;
				height: 80px;
				border-radius: 50%;
				background: var(--accent);
				color: var(--cta-text);
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Orbitron, sans-serif;
				font-weight: 700;
				font-size: 32px;
				margin: 0 auto 24px;
				box-shadow: 0 8px 24px rgba(0, 209, 255, 0.3);
			}

			.step-title {
				margin: 0 0 12px 0;
				font-family: var(--main-font);
				font-weight: 600;
				font-size: 20px;
				color: var(--text);
			}

			.step-description {
				margin: 0;
				color: var(--muted);
				font-size: 15px;
				line-height: 1.7;
			}

			/* Mosaic Wall - Horizontal Scrolling */
			.mosaic-wall {
				display: flex;
				gap: 16px;
				margin-top: 60px;
				overflow: hidden;
				position: relative;
				width: 100%;
			}

			.mosaic-wall-track {
				display: flex;
				gap: 16px;
				-webkit-animation: scroll-horizontal 300s linear infinite;
				animation: scroll-horizontal 300s linear infinite;
				will-change: transform;
			}

			.mosaic-wall:hover .mosaic-wall-track {
				-webkit-animation-play-state: paused;
				animation-play-state: paused;
			}

			@-webkit-keyframes scroll-horizontal {
				0% {
					-webkit-transform: translateX(0);
					transform: translateX(0);
				}
				100% {
					-webkit-transform: translateX(-50%);
					transform: translateX(-50%);
				}
			}

			@keyframes scroll-horizontal {
				0% {
					-webkit-transform: translateX(0);
					transform: translateX(0);
				}
				100% {
					-webkit-transform: translateX(-50%);
					transform: translateX(-50%);
				}
			}

			.mosaic-item {
				position: relative;
				overflow: hidden;
				border-radius: 12px;
				background: var(--panel);
				cursor: pointer;
				flex-shrink: 0;
				width: 300px;
				height: 300px;
				-webkit-transition: -webkit-transform 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
				transition: transform 0.3s ease, box-shadow 0.3s ease;
			}

			.mosaic-item:hover {
				-webkit-transform: scale(1.05);
				transform: scale(1.05);
				box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
				z-index: 10;
			}

			.mosaic-item img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				-o-object-fit: cover;
				-webkit-transition: opacity 0.5s ease;
				transition: opacity 0.5s ease;
			}

			/* Audience Grid */
			.audience-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 24px;
				margin-top: 60px;
			}

			@media (max-width: 968px) {
				.audience-grid {
					grid-template-columns: repeat(2, 1fr);
					gap: 20px;
				}
			}

			.audience-card {
				background: var(--card);
				border: 1px solid var(--card-border);
				border-radius: 16px;
				padding: 32px;
				text-align: center;
				transition: transform 0.2s ease, border-color 0.2s ease;
			}

			.audience-card:hover {
				transform: translateY(-4px);
				border-color: var(--accent);
			}

			.audience-card h3 {
				margin: 0 0 12px 0;
				font-family: var(--main-font);
				font-weight: 600;
				font-size: 20px;
				color: var(--text);
			}

			.audience-card p {
				margin: 0;
				color: var(--muted);
				line-height: 1.7;
				font-size: 14px;
			}

			/* Product Specs */
			.product-specs {
				background: var(--card);
				border: 1px solid var(--card-border);
				border-radius: 16px;
				padding: 60px;
				max-width: 900px;
				margin: 60px auto 0;
			}

			.product-specs h3 {
				margin: 0 0 40px 0;
				font-family: var(--main-font);
				font-weight: 700;
				font-size: 32px;
				color: var(--text);
				text-align: center;
			}

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

			.spec-list li {
				padding: 20px 0;
				border-bottom: 1px solid rgba(255, 255, 255, 0.1);
				color: var(--muted);
				line-height: 1.8;
				font-size: 16px;
			}

			.spec-list li:last-child {
				border-bottom: none;
			}

			.spec-list strong {
				color: var(--text);
				font-weight: 600;
				display: block;
				margin-bottom: 8px;
			}

			/* FAQ Section */
			.faq-grid {
				max-width: 900px;
				margin: 60px auto 0;
			}

			.faq-item {
				background: var(--card);
				border: none;
				border-radius: 12px;
				padding: 0;
				margin-bottom: 16px;
				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
				overflow: hidden;
			}

			.faq-question {
				margin: 0;
				padding: 24px;
				font-family: var(--main-font);
				font-weight: 600;
				font-size: 18px;
				color: var(--text);
				cursor: pointer;
				display: flex;
				justify-content: space-between;
				align-items: center;
				transition: color 0.2s ease;
				user-select: none;
			}

			.faq-question:hover {
				color: var(--accent);
			}

			.faq-question::after {
				content: '+';
				font-size: 24px;
				font-weight: 300;
				color: var(--accent);
				transition: transform 0.3s ease;
				flex-shrink: 0;
				margin-left: 16px;
			}

			.faq-item.active .faq-question::after {
				transform: rotate(45deg);
			}

			.faq-answer {
				margin: 0;
				padding: 0 24px;
				color: var(--muted);
				line-height: 1.7;
				max-height: 0;
				overflow: hidden;
				transition: max-height 0.3s ease, padding 0.3s ease;
			}

			.faq-item.active .faq-answer {
				max-height: 1000px;
				padding: 0 24px 24px 24px;
			}

			.faq-answer ul {
				margin: 12px 0;
				padding-left: 24px;
			}

			.faq-answer li {
				margin-bottom: 8px;
			}

			/* Full-Width Video Hero Section */
			.video-hero-section {
				width: 100%;
				margin: 100px 0;
				padding: 0;
			}

			.design-banner-2 + .video-hero-section {
				margin-top: 0;
			}

			.video-hero-container {
				position: relative;
				width: 100%;
				min-height: 85vh;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.video-hero-bg {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 120%;
				object-fit: cover;
				-o-object-fit: cover;
				z-index: 0;
				-webkit-transform: translateY(0);
				transform: translateY(0);
				-webkit-transition: -webkit-transform 0.1s ease-out, transform 0.1s ease-out;
				transition: transform 0.1s ease-out;
			}

			.video-hero-overlay {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: 
					repeating-linear-gradient(
						0deg,
						rgba(0, 0, 0, 0.3) 0px,
						transparent 1px,
						transparent 2px,
						rgba(0, 0, 0, 0.3) 3px
					),
					repeating-linear-gradient(
						90deg,
						rgba(0, 0, 0, 0.3) 0px,
						transparent 1px,
						transparent 2px,
						rgba(0, 0, 0, 0.3) 3px
					),
					linear-gradient(
						to bottom,
						rgba(0, 0, 0, 0.4) 0%,
						rgba(0, 0, 0, 0.3) 50%,
						rgba(0, 0, 0, 0.5) 100%
					);
				background-size: 4px 4px, 4px 4px, 100% 100%;
				z-index: 1;
			}

			.video-hero-content {
				position: relative;
				z-index: 2;
				max-width: 900px;
				padding: 120px 24px;
				text-align: center;
			}

			.video-hero-title {
				margin: 0 0 24px 0;
				font-family: var(--main-font);
				font-weight: 700;
				font-size: 36px;
				font-size: max(36px, min(5vw, 56px)); /* Fallback for clamp */
				font-size: clamp(36px, 5vw, 56px);
				letter-spacing: 1px;
				color: #ffffff;
				line-height: 1.2;
				text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 4px 16px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 100, 255, 0.4), 0 0 60px rgba(0, 150, 255, 0.2);
			}

			.video-hero-text {
				margin: 0 0 32px 0;
				color: #ffffff;
				font-size: 16px;
				font-size: max(16px, min(2vw, 20px)); /* Fallback for clamp */
				font-size: clamp(16px, 2vw, 20px);
				line-height: 1.7;
				text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 100, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.8);
				max-width: 800px;
				margin-left: auto;
				margin-right: auto;
			}

			/* Footer */
			.footer {
				margin-top: 0;
				padding: 80px 24px 40px;
				border-top: 1px solid var(--card-border);
				background: #1a1a1a;
			}

			body.light-mode .footer {
				background: #f5f5f5;
			}

			.footer-content {
				max-width: 1400px;
				margin: 0 auto;
			}

			.footer-grid {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
				gap: 40px;
				margin-bottom: 40px;
			}

			@media (max-width: 968px) {
				.footer-grid {
					grid-template-columns: repeat(2, 1fr);
					gap: 30px;
				}
			}

			.footer-section h3 {
				margin: 0 0 16px 0;
				font-size: 16px;
				font-weight: 700;
				color: var(--text);
			}

			.footer-section p,
			.footer-section a {
				margin: 8px 0;
				color: var(--muted);
				font-size: 14px;
				text-decoration: none;
				display: block;
				line-height: 1.6;
			}

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

			.footer-nav {
				display: flex;
				gap: 32px;
				justify-content: center;
				margin-bottom: 40px;
				flex-wrap: wrap;
			}

			.footer-link {
				color: var(--muted);
				text-decoration: none;
				font-size: 14px;
				font-weight: 600;
				transition: color 0.2s ease;
			}

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

			.footer-text {
				color: var(--muted);
				font-size: 14px;
				margin: 0;
				text-align: center;
				padding-top: 20px;
				border-top: 1px solid var(--card-border);
			}

			.trust-badges {
				display: flex;
				gap: 20px;
				align-items: center;
				justify-content: flex-end;
				flex-wrap: wrap;
				margin-top: 20px;
			}

			.trust-badge {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 8px 16px;
				background: var(--card);
				border: 1px solid var(--card-border);
				border-radius: 8px;
				text-decoration: none;
				transition: all 0.2s ease;
			}

			.trust-badge:hover {
				background: rgba(248, 249, 250, 0.2);
				border-color: var(--accent);
			}

			.trust-badge img {
				height: 32px;
				width: auto;
				max-width: 120px;
				display: block;
			}

			@media (max-width: 768px) {
				.footer-grid {
					grid-template-columns: 1fr;
					gap: 30px;
				}

				.trust-badges {
					justify-content: center;
				}
			}

			/* Testimonials Section */
			.testimonials-section {
				padding: 100px 24px;
				max-width: 1400px;
				margin: 0 auto;
				background: var(--card);
				border-top: 1px solid var(--card-border);
				border-bottom: 1px solid var(--card-border);
			}

			.testimonials-title {
				margin: 0 0 8px 0;
				font-family: var(--main-font);
				font-weight: 700;
				font-size: clamp(32px, 4vw, 48px);
				letter-spacing: 0.5px;
				color: var(--text);
				text-align: center;
				text-transform: lowercase;
			}

			.testimonials-subtitle {
				margin: 0 0 60px 0;
				font-size: 18px;
				color: var(--muted);
				text-align: center;
				text-transform: lowercase;
			}

			.testimonials-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 32px;
				margin-bottom: 40px;
			}

			@media (max-width: 968px) {
				.testimonials-grid {
					grid-template-columns: repeat(2, 1fr);
					gap: 24px;
				}
			}

			.testimonial-card {
				background: var(--card);
				border: 1px solid var(--card-border);
				border-radius: 16px;
				padding: 32px;
				display: flex;
				flex-direction: column;
				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
			}

			.testimonial-stars {
				margin: 0 0 20px 0;
				font-size: 20px;
				color: #FFD700;
				letter-spacing: 2px;
			}

			.testimonial-quote {
				margin: 0 0 24px 0;
				color: var(--text);
				font-size: 16px;
				line-height: 1.7;
				flex: 1;
			}

			.testimonial-author {
				margin: 0;
				color: var(--muted);
				font-size: 14px;
				font-weight: 600;
				text-transform: lowercase;
			}

			.testimonials-footer {
				margin: 40px 0 0 0;
				text-align: center;
				color: var(--muted);
				font-size: 14px;
				font-style: italic;
			}

			@media (max-width: 768px) {
				.testimonials-section {
					padding: 60px 20px;
				}

				.testimonials-grid {
					grid-template-columns: 1fr;
					gap: 24px;
				}
			}

			/* Bulk Order Section */
			.bulk-section {
				padding: 60px 24px;
				width: 100%;
				text-align: center;
				background: var(--card);
				border-top: 1px solid var(--card-border);
				border-bottom: 1px solid var(--card-border);
			}

			.bulk-section .bulk-description {
				max-width: 800px;
				margin-left: auto;
				margin-right: auto;
			}

			.bulk-title {
				margin: 0 0 8px 0;
				font-family: var(--main-font);
				font-weight: 700;
				font-size: 32px;
				color: var(--text);
				text-transform: lowercase;
			}

			.bulk-subtitle {
				margin: 0 0 16px 0;
				font-size: 20px;
				font-weight: 600;
				color: var(--muted);
				text-transform: lowercase;
			}

			.bulk-info {
				margin: 0 0 24px 0;
				font-size: 14px;
				color: var(--muted);
				font-weight: 500;
			}

			.bulk-description {
				margin: 0 auto 32px;
				max-width: 700px;
				font-size: 16px;
				line-height: 1.7;
				color: var(--text);
			}

			.bulk-cta-group {
				display: flex;
				gap: 16px;
				justify-content: center;
				flex-wrap: wrap;
				margin-bottom: 20px;
			}

			.bulk-footer-note {
				margin: 20px 0 0 0;
				font-size: 12px;
				color: var(--muted);
				font-weight: 500;
			}

			/* Trust Strip Section */
			.trust-strip {
				width: 100%;
				padding: 24px;
				background: var(--card);
				border-top: 1px solid var(--card-border);
				border-bottom: 1px solid var(--card-border);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 24px;
			}

			.trust-row {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 48px;
				flex-wrap: wrap;
				width: 100%;
			}

			.trust-item {
				display: flex;
				align-items: center;
				gap: 8px;
				color: var(--text);
				font-size: 14px;
				font-weight: 600;
				white-space: nowrap;
			}

			.trust-item::before {
				content: '\2713';
				color: var(--accent);
				font-weight: 700;
				font-size: 16px;
				margin-right: 8px;
				display: inline-block;
				line-height: 1;
			}

			@media (max-width: 768px) {
				.bulk-section {
					padding: 40px 20px;
				}

				.bulk-title {
					font-size: 24px;
				}

				.bulk-subtitle {
					font-size: 18px;
				}

				.bulk-cta-group {
					flex-direction: column;
					align-items: stretch;
				}

				.bulk-cta-group .cta-button {
					width: 100%;
				}

				.trust-strip {
					padding: 20px 16px;
					gap: 20px;
				}

				.trust-row {
					gap: 24px;
				}

				.trust-item {
					font-size: 13px;
				}
			}

			/* Hero 2 Mobile Styles */
			@media (max-width: 968px) {
				.hero-2-three-panel {
					-ms-grid-columns: 1fr;
					grid-template-columns: 1fr;
					gap: 20px;
					padding: 0 16px;
				}

				.hero-2-panel-middle {
					-ms-grid-column: 1;
					grid-column: 1;
				}

				.hero-2-panel-content {
					min-height: 300px;
				}

				.hero-2-middle-title {
					font-size: 24px;
				}

				.hero-2-badges {
					padding: 0 20px;
				}

				.hero-2-badge {
					max-width: 100%;
				}

				.hero-2-panel {
					border-radius: 16px;
				}

				.hero-2-middle-top,
				.hero-2-middle-bottom {
					padding: 24px 20px;
				}
			}

			@media (max-width: 768px) {
				.hero-section-2 {
					padding: 16px 0 0;
				}

				.hero-2-three-panel {
					padding: 0 12px;
					gap: 16px;
				}

				.hero-2-panel-title {
					font-size: 24px;
				}

				.hero-2-panel-left .hero-2-panel-title,
				.hero-2-panel-right .hero-2-panel-title {
					bottom: 12px;
					left: 12px;
					right: 12px;
					padding: 10px 14px;
					font-size: 20px;
				}

				.hero-2-middle-title {
					font-size: 22px;
				}

				.design-banner-2 {
					padding: 20px 16px;
					min-height: 80px;
					font-size: 20px;
				}

				.design-banner-2 .discount-banner-message {
					font-size: 20px;
				}
			}

			/* Responsive */
			@media (max-width: 968px) {
				.two-column {
					grid-template-columns: 1fr;
					gap: 40px;
				}

				.content-section {
					padding: 20px 24px;
				}

				.hero-section {
					min-height: 50vh;
					max-height: 500px;
					padding: 40px 20px 30px;
				}
			}

			@media (max-width: 1200px) {
				.product-grid:not(.product-slider),
				.product-slider {
					grid-template-columns: repeat(4, 1fr);
				}
			}

			@media (max-width: 968px) {
				.product-grid:not(.product-slider),
				.product-slider {
					grid-template-columns: repeat(3, 1fr);
					gap: 20px;
				}
			}

			@media (max-width: 768px) {
				.product-slider-wrapper {
					overflow: hidden;
				}

				.product-slider {
					display: flex;
					overflow-x: auto;
					scroll-snap-type: x mandatory;
					-webkit-overflow-scrolling: touch;
					scrollbar-width: none;
					grid-template-columns: none;
					gap: 16px;
				}

				.product-slider::-webkit-scrollbar {
					display: none;
				}

				.product-card {
					flex: 0 0 calc(50% - 8px);
					scroll-snap-align: start;
				}

				.product-slider-nav {
					display: flex;
				}
			}

			@media (max-width: 640px) {
				.product-grid:not(.product-slider) {
					grid-template-columns: repeat(2, 1fr);
					gap: 16px;
				}

				.product-card {
					flex: 0 0 calc(50% - 8px);
				}
			}

			/* Mobile Menu */
			.mobile-menu-toggle {
				display: none;
				flex-direction: column;
				gap: 4px;
				background: transparent;
				border: none;
				cursor: pointer;
				padding: 8px;
				z-index: 1001;
			}

			.mobile-menu-toggle span {
				width: 24px;
				height: 2px;
				background: var(--text);
				transition: all 0.3s ease;
				border-radius: 2px;
			}

			.mobile-menu-toggle.active span:nth-child(1) {
				transform: rotate(45deg) translate(6px, 6px);
			}

			.mobile-menu-toggle.active span:nth-child(2) {
				opacity: 0;
			}

			.mobile-menu-toggle.active span:nth-child(3) {
				transform: rotate(-45deg) translate(6px, -6px);
			}

			.mobile-menu {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: var(--bg);
				z-index: 1000;
				padding: 70px 20px 24px;
				transform: translateX(-100%);
				-webkit-transition: transform 0.3s ease;
				transition: transform 0.3s ease;
				overflow-y: auto;
				width: 100%;
				max-width: 100vw;
			}

			.mobile-menu.active {
				transform: translateX(0);
			}

			.mobile-menu .nav-link {
				display: block;
				padding: 16px 0;
				font-size: 18px;
				border-bottom: 1px solid var(--card-border);
				width: 100%;
			}

			.mobile-menu .theme-toggle {
				margin-top: 24px;
				width: 100%;
				justify-content: center;
			}

			.mobile-menu .cart-link {
				display: flex;
				justify-content: flex-start;
				padding: 16px 0;
			}

			@media (max-width: 768px) {
				/* Product Slider Mobile */
				.product-slider-wrapper {
					position: relative;
					padding: 0 60px;
					margin-top: 40px;
				}

				.product-slider-nav {
					display: block;
				}

				.product-slider {
					display: flex;
					overflow-x: auto;
					overflow-y: hidden;
					scroll-snap-type: x mandatory;
					-webkit-overflow-scrolling: touch;
					scrollbar-width: none;
					-ms-overflow-style: none;
					gap: 16px;
					padding: 0;
					margin: 0;
				}

				.product-slider::-webkit-scrollbar {
					display: none;
				}

				.product-slider .product-card {
					flex: 0 0 calc(100% - 32px);
					min-width: calc(100% - 32px);
					scroll-snap-align: start;
					margin: 0;
				}

				.product-slider-prev {
					left: 8px;
				}

				.product-slider-next {
					right: 8px;
				}

				.product-slider-btn {
					width: 40px;
					height: 40px;
					background: rgba(255, 255, 255, 0.9);
					border: 2px solid var(--card-border);
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
				}

				body.light-mode .product-slider-btn {
					background: rgba(255, 255, 255, 0.95);
				}

				body:not(.light-mode) .product-slider-btn {
					background: rgba(10, 11, 13, 0.9);
					border-color: rgba(255, 255, 255, 0.2);
				}

				.product-slider-btn svg {
					width: 18px;
					height: 18px;
				}

				.site-header {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 12px 16px;
					width: 100%;
					max-width: 100%;
					box-sizing: border-box;
				}

				.site-logo {
					flex: 0 0 auto;
					margin: 0 auto;
					width: auto;
					max-width: 100%;
				}

				.site-logo img {
					height: 48px;
					width: auto;
					max-width: 100%;
				}

				.site-nav {
					position: absolute;
					right: 16px;
					top: 50%;
					transform: translateY(-50%);
				}

				.nav-link:not(.cart-link) {
					display: none;
				}

				.mobile-menu-toggle {
					display: flex;
					order: 3;
					margin-left: auto;
					flex-shrink: 0;
				}

				.cart-link {
					display: flex;
					order: 2;
					flex-shrink: 0;
				}

				.theme-toggle {
					order: 1;
					padding: 6px 10px;
					flex-shrink: 0;
				}

				.theme-toggle svg {
					width: 16px;
					height: 16px;
				}

				.hero-section {
					min-height: auto;
					max-height: none;
					padding: 40px 16px 30px;
				}

				.hero-two-column {
					grid-template-columns: 1fr;
					gap: 24px;
					padding: 0;
					width: 100%;
					max-width: 100%;
				}


				.two-column {
					grid-template-columns: 1fr;
					gap: 30px;
					width: 100%;
					max-width: 100%;
				}

				.text-content {
					width: 100%;
					max-width: 100%;
				}

				.hero-content {
					padding: 0;
					width: 100%;
				}

				.hero-title {
					font-size: 28px;
					line-height: 1.2;
					margin-bottom: 16px;
				}

				.hero-subtitle {
					font-size: 16px;
					line-height: 1.5;
					margin-bottom: 24px;
				}

				.hero-cta {
					flex-direction: column;
					gap: 12px;
					width: 100%;
				}

				.hero-cta .cta-button {
					width: 100%;
					padding: 16px 24px;
					font-size: 15px;
				}

				.hero-card {
					padding: 24px 20px;
					margin: 0;
				}

				.hero-card-title {
					font-size: 20px;
				}

				.hero-card-subtitle {
					font-size: 16px;
				}

				.hero-card-info {
					font-size: 13px;
					margin-bottom: 16px;
				}

				.hero-card-description {
					font-size: 15px;
					margin-bottom: 20px;
				}

				.hero-card-cta-group {
					margin-bottom: 16px;
				}

				.hero-card-footer-note {
					font-size: 11px;
				}

				.section-title {
					font-size: 32px;
				}

				.feature-grid {
					grid-template-columns: 1fr;
					gap: 20px;
				}

				.audience-grid {
					grid-template-columns: 1fr;
					gap: 20px;
				}

				.testimonials-grid {
					grid-template-columns: 1fr;
					gap: 20px;
				}

				/* Product grid is now a slider on mobile, handled above */

				.mosaic-item {
					width: 250px;
					height: 250px;
				}

				/* FAQ Mobile */
				.faq-grid {
					grid-template-columns: 1fr;
				}

				/* Video Hero Mobile */
				.video-hero-section {
					min-height: 400px;
				}

				/* Discount Banner Mobile */
				.discount-banner {
					font-size: 11px;
					padding: 10px 12px;
					min-height: 40px;
					line-height: 1.4;
				}

				.discount-banner-message {
					font-size: 11px;
					padding: 0 8px;
				}

				.mobile-menu {
					padding: 60px 16px 20px;
				}

				.mobile-menu .nav-link {
					font-size: 16px;
					padding: 14px 0;
				}

				.mobile-menu .theme-toggle {
					margin-top: 20px;
					padding: 12px;
				}

				/* Site Logo Mobile */
				.site-logo img {
					height: 53px;
				}

				/* Content Section Mobile */
				.content-section {
					padding: 20px 24px;
				}

				/* Section Description Mobile */
				.section-description {
					font-size: 15px;
				}
			}

			@media (max-width: 480px) {
				.site-header {
					padding: 10px 12px;
				}

				.site-logo img {
					height: 53px;
				}

				.theme-toggle {
					padding: 5px 8px;
				}

				.theme-toggle svg {
					width: 14px;
					height: 14px;
				}

				.hero-section {
					padding: 30px 12px 20px;
					min-height: auto;
				}

				.hero-title {
					font-size: 24px;
					line-height: 1.2;
					margin-bottom: 12px;
				}

				.hero-subtitle {
					font-size: 14px;
					line-height: 1.5;
					margin-bottom: 20px;
				}

				.hero-cta .cta-button {
					padding: 14px 20px;
					font-size: 14px;
				}

				.hero-card {
					padding: 20px 16px;
				}

				.hero-card-title {
					font-size: 18px;
				}

				.hero-card-subtitle {
					font-size: 14px;
				}

				.hero-card-info {
					font-size: 11px;
				}

				.hero-card-description {
					font-size: 14px;
				}

				.section-title {
					font-size: 24px;
				}

				.color-grid {
					grid-template-columns: repeat(3, 1fr);
					grid-template-rows: repeat(3, 1fr);
					gap: 6px;
					padding: 12px;
				}

				.two-column .color-grid {
					grid-template-columns: repeat(3, 1fr);
					grid-template-rows: repeat(3, 1fr);
					gap: 6px;
					padding: 12px;
				}

				.color-swatch {
					min-height: 30px;
					border-radius: 5px;
				}

				.color-swatch:hover {
					-webkit-transform: scale(1.1);
					transform: scale(1.1);
				}

				.bulk-title {
					font-size: 20px;
				}

				.trust-strip {
					gap: 12px;
					padding: 16px 12px;
				}

				.trust-row {
					flex-direction: column;
					gap: 12px;
					text-align: center;
				}

				.trust-item {
					font-size: 12px;
					width: 100%;
				}

				.mosaic-item {
					width: 180px;
					height: 180px;
				}

				/* Coming Soon Mobile - Extra Small */
				.coming-soon-banner {
					padding: 16px 12px;
					gap: 20px;
				}

				.coming-soon-content h2 {
					font-size: 24px;
					margin-bottom: 12px;
				}

				.coming-soon-badge {
					font-size: 11px;
					margin-bottom: 10px;
				}

				.coming-soon-content p {
					font-size: 15px;
					margin-bottom: 14px;
				}

				.coming-soon-features {
					gap: 6px;
					margin: 12px 0;
				}

				.coming-soon-feature-tag {
					padding: 8px 12px;
					font-size: 12px;
				}

				.coming-soon-order-details-title {
					font-size: 15px;
				}

				.coming-soon-order-tag {
					padding: 8px 12px;
					font-size: 12px;
				}

				.coming-soon-hero-image {
					min-height: 200px;
				}

				.coming-soon-form-section {
					padding: 24px 16px;
				}

				.coming-soon-form-section h3 {
					font-size: 20px;
				}

				.coming-soon-form-section p {
					font-size: 15px;
				}

				.contact-form {
					padding: 24px 16px;
				}

				.contact-form-title {
					font-size: 24px;
				}

				/* Product Grid Mobile - Extra Small */
				.product-slider-wrapper {
					padding: 0 50px;
				}

				.product-slider-btn {
					width: 36px;
					height: 36px;
				}

				.product-slider-prev {
					left: 4px;
				}

				.product-slider-next {
					right: 4px;
				}

				.product-slider-btn svg {
					width: 16px;
					height: 16px;
				}

				.product-slider .product-card {
					flex: 0 0 calc(100% - 24px);
					min-width: calc(100% - 24px);
				}

				.product-card {
					width: 100%;
					max-width: 100%;
				}

				.product-info {
					padding: 20px;
				}

				.product-name {
					font-size: 16px;
				}

				.product-description {
					font-size: 14px;
				}

				/* Content Section Mobile - Extra Small */
				.content-section {
					padding: 20px 24px;
				}

				.section-description {
					font-size: 14px;
					margin-bottom: 40px;
				}
			}

			.coming-soon-banner {
				background: transparent;
				border: none;
				border-radius: 0;
				padding: 0;
				max-width: 1400px;
				margin: 0 auto;
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 50px;
				align-items: center;
				box-shadow: none;
				width: 100%;
				box-sizing: border-box;
			}

			.coming-soon-content {
				display: flex;
				flex-direction: column;
			}

			.coming-soon-content h2 {
				font-size: clamp(36px, 4vw, 48px);
				font-weight: 700;
				color: var(--text);
				margin: 0 0 20px 0;
				line-height: 1.2;
			}

			.coming-soon-badge {
				font-size: 14px;
				font-weight: 700;
				color: var(--accent);
				text-transform: uppercase;
				letter-spacing: 2px;
				margin: 0 0 16px 0;
			}

			.coming-soon-content p {
				font-size: 18px;
				line-height: 1.7;
				color: var(--muted);
				margin: 0 0 20px 0;
			}

			.hero-email-contact {
				margin-top: 24px;
			}

			.hero-email-contact p {
				font-size: 18px;
				line-height: 1.7;
				color: var(--text);
				margin: 0;
			}

			.hero-email-contact a {
				color: var(--accent);
				text-decoration: none;
				font-weight: 600;
				transition: color 0.2s ease;
			}

			.hero-email-contact a:hover {
				color: var(--cta);
				text-decoration: underline;
			}

			.hero-contact-link {
				color: var(--cta) !important;
				font-weight: 700 !important;
				text-decoration: underline !important;
				display: inline-block;
			}

			.hero-contact-link:hover {
				color: var(--accent) !important;
			}

			.coming-soon-hero-image {
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 12px;
				overflow: hidden;
				min-height: 400px;
				position: relative;
			}

			.coming-soon-hero-image::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
				pointer-events: none;
			}

			.coming-soon-hero-image img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 12px;
				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
				max-width: 100%;
			}

			.coming-soon-form-section {
				display: flex;
				flex-direction: column;
				gap: 16px;
				max-width: 1400px;
				margin: 0 auto;
				padding: 40px;
				background: var(--card);
				border: 1px solid var(--card-border);
				border-radius: 16px;
				text-align: center;
				align-items: center;
			}

			.coming-soon-form-section h3,
			.coming-soon-form-section p {
				text-align: center;
			}

			.coming-soon-form-section .wpcf7-form {
				width: 100%;
				max-width: 600px;
				margin: 0 auto;
			}

			.coming-soon-form-section h3 {
				font-size: 32px;
				font-weight: 700;
				color: var(--text);
				margin: 0 0 12px 0;
			}

			body.light-mode .coming-soon-form-section {
				background: var(--card);
				border-color: var(--card-border);
			}

			body.light-mode .coming-soon-banner {
				background: transparent;
				border: none;
				box-shadow: none;
			}

			.coming-soon-title {
				margin: 0 0 16px 0;
				font-family: var(--main-font);
				font-weight: 700;
				font-size: 48px;
				font-size: clamp(36px, 5vw, 56px);
				letter-spacing: 1px;
				color: var(--accent);
			}

			.coming-soon-text {
				margin: 0 0 32px 0;
				color: var(--muted);
				font-size: 20px;
				font-size: clamp(16px, 2.5vw, 24px);
				line-height: 1.7;
			}

			.coming-soon-contact {
				margin-top: 32px;
				padding-top: 32px;
				border-top: 1px solid var(--card-border);
			}

			.coming-soon-contact-text {
				margin: 0 0 16px 0;
				color: var(--text);
				font-size: 18px;
				font-weight: 600;
			}

			.coming-soon-contact-info {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 12px;
				flex-wrap: wrap;
			}

			.coming-soon-contact-link {
				color: var(--cta);
				text-decoration: none;
				font-size: 16px;
				font-weight: 600;
				transition: color 0.2s ease;
			}

			.coming-soon-contact-link:hover {
				color: var(--accent);
				text-decoration: underline;
			}

			.coming-soon-contact-separator {
				color: var(--muted);
				font-size: 16px;
			}

			/* Coming Soon Section - Two Column Layout */
			.coming-soon-section {
				padding: 80px 24px;
				max-width: 1400px;
				margin: 0 auto;
			}

			.coming-soon-container {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 60px;
				align-items: start;
			}

			.coming-soon-left {
				display: flex;
				flex-direction: column;
				gap: 24px;
			}

			.coming-soon-main-title {
				font-size: 48px;
				font-size: clamp(32px, 5vw, 56px);
				font-weight: 700;
				line-height: 1.2;
				color: var(--text);
				margin: 0;
			}

			.coming-soon-subtitle {
				font-size: 20px;
				font-size: clamp(18px, 2.5vw, 24px);
				color: var(--muted);
				margin: 0;
			}

			.coming-soon-description {
				font-size: 18px;
				line-height: 1.7;
				color: var(--text);
				margin: 0;
			}

			.coming-soon-features {
				display: flex;
				flex-wrap: wrap;
				gap: 12px;
				margin: 20px 0;
			}

			.coming-soon-feature-tag {
				display: inline-block;
				padding: 12px 24px;
				background: #f5f5f5;
				border: none;
				border-radius: 8px;
				font-size: 14px;
				font-weight: 500;
				color: #1a1a1a;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			.coming-soon-cta-group {
				display: flex;
				gap: 16px;
				flex-wrap: wrap;
				margin: 16px 0;
			}

			.coming-soon-cta-primary {
				padding: 14px 32px;
				background: linear-gradient(135deg, var(--cta) 0%, var(--accent) 100%);
				color: var(--cta-text);
				text-decoration: none;
				border-radius: 8px;
				font-weight: 600;
				font-size: 16px;
				transition: transform 0.2s ease, box-shadow 0.2s ease;
				display: inline-block;
			}

			.coming-soon-cta-primary:hover {
				transform: translateY(-2px);
				box-shadow: 0 4px 12px rgba(0, 57, 158, 0.3);
			}

			.coming-soon-cta-secondary {
				padding: 14px 32px;
				background: transparent;
				color: var(--text);
				text-decoration: none;
				border: 1px solid var(--card-border);
				border-radius: 8px;
				font-weight: 600;
				font-size: 16px;
				transition: all 0.2s ease;
				display: inline-block;
			}

			.coming-soon-cta-secondary:hover {
				background: var(--card);
				border-color: var(--accent);
			}

			.coming-soon-instruction {
				font-size: 16px;
				color: var(--text);
				margin: 8px 0;
			}

			.coming-soon-footer-note {
				font-size: 14px;
				color: var(--muted);
				margin: 8px 0 0 0;
			}

			.coming-soon-right {
				background: var(--card);
				border: 1px solid var(--card-border);
				border-radius: 16px;
				padding: 40px;
				display: flex;
				flex-direction: column;
				gap: 32px;
			}

			.coming-soon-sidebar-title {
				font-size: 28px;
				font-weight: 700;
				color: var(--text);
				margin: 0;
			}

			.coming-soon-sidebar-text {
				font-size: 16px;
				line-height: 1.7;
				color: var(--text);
				margin: 0;
			}

			.coming-soon-sidebar-section {
				display: flex;
				flex-direction: column;
				gap: 16px;
			}

			.coming-soon-sidebar-section .coming-soon-tags {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				gap: 12px;
			}

			.coming-soon-sidebar-heading {
				font-size: 18px;
				font-weight: 600;
				color: var(--text);
				margin: 0;
			}

			.coming-soon-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 12px;
			}

			.coming-soon-tag {
				display: inline-block;
				padding: 12px 20px;
				background: #f5f5f5;
				border: none;
				border-radius: 8px;
				font-size: 14px;
				font-weight: 500;
				color: #1a1a1a;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			.coming-soon-email-form {
				display: flex;
				gap: 16px;
				flex-wrap: wrap;
			}

			.coming-soon-email-input {
				flex: 1;
				min-width: 250px;
				padding: 16px 20px;
				background: var(--bg);
				border: 1px solid var(--card-border);
				border-radius: 10px;
				color: var(--text);
				font-size: 18px;
				font-family: var(--main-font);
			}

			.coming-soon-email-input::placeholder {
				color: var(--muted);
			}

			.coming-soon-email-input:focus {
				outline: none;
				border-color: var(--accent);
				box-shadow: 0 0 0 3px var(--ring);
			}

			.coming-soon-notify-btn {
				padding: 18px 40px;
				background: var(--cta);
				border: none;
				border-radius: 10px;
				color: var(--cta-text);
				font-size: 18px;
				font-weight: 700;
				letter-spacing: 0.5px;
				font-family: var(--main-font);
				cursor: pointer;
				transition: all 0.2s ease;
				box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
			}

			.coming-soon-notify-btn:hover {
				transform: translateY(-2px);
				box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
			}

			.coming-soon-order-details {
				margin: 20px 0;
			}

			.coming-soon-order-details-title {
				font-size: 18px;
				font-weight: 600;
				color: var(--text);
				margin: 0 0 12px 0;
			}

			.coming-soon-order-tags {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				gap: 12px;
			}

			.coming-soon-order-tag {
				display: inline-block;
				padding: 12px 20px;
				background: #f5f5f5;
				border: none;
				border-radius: 8px;
				font-size: 14px;
				font-weight: 500;
				color: #1a1a1a;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			body.light-mode .coming-soon-order-tag {
				background: #f5f5f5;
				color: #1a1a1a;
			}

			body:not(.light-mode) .coming-soon-order-tag {
				background: rgba(248, 249, 250, 0.15);
				color: var(--text);
			}

			.coming-soon-contact {
				font-size: 16px;
				color: var(--text);
				margin: 16px 0 0 0;
			}

			.contact-cta-section {
				max-width: 1400px;
				margin: 0 auto 40px;
				text-align: center;
			}

			.contact-cta-content {
				padding: 50px 40px;
				background: var(--card);
				border: 1px solid var(--card-border);
				border-radius: 16px;
			}

			body.light-mode .contact-cta-content {
				background: var(--card);
				border-color: var(--card-border);
			}

			.contact-cta-content h3 {
				font-size: 32px;
				font-weight: 700;
				color: var(--text);
				margin: 0 0 16px 0;
			}

			.contact-cta-content p {
				font-size: 18px;
				color: var(--muted);
				margin: 0 0 32px 0;
				max-width: 600px;
				margin-left: auto;
				margin-right: auto;
			}

			.contact-form-container {
				max-width: 1200px;
				margin: 0 auto;
			}

			.contact-form {
				display: flex;
				flex-direction: column;
				gap: 32px;
				padding: 40px;
				background: var(--card);
				border: 1px solid var(--card-border);
				border-radius: 16px;
			}

			body.light-mode .contact-form {
				background: var(--card);
				border-color: var(--card-border);
			}

			.contact-form-title {
				font-family: var(--main-font);
				font-size: 32px;
				font-weight: 700;
				color: var(--text);
				margin: 0 0 8px 0;
				text-align: center;
			}

			.form-row {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 24px;
			}

			.form-group {
				display: flex;
				flex-direction: column;
				gap: 8px;
			}

			.form-group label {
				font-size: 14px;
				font-weight: 600;
				color: var(--text);
			}

			.form-group input,
			.form-group select,
			.form-group textarea {
				padding: 16px 20px;
				background: rgba(248, 249, 250, 0.08);
				border: 1px solid var(--card-border);
				border-radius: 8px;
				font-size: 16px;
				color: var(--text);
				font-family: inherit;
				transition: all 0.3s ease;
				-webkit-appearance: none;
				appearance: none;
			}

			body.light-mode .form-group input,
			body.light-mode .form-group select,
			body.light-mode .form-group textarea {
				background: #ffffff;
				border-color: rgba(0, 0, 0, 0.15);
				color: #1a1a2e;
			}

			.form-group input:focus,
			.form-group select:focus,
			.form-group textarea:focus {
				outline: none;
				border-color: var(--accent);
				background: rgba(248, 249, 250, 0.12);
			}

			body.light-mode .form-group input:focus,
			body.light-mode .form-group select:focus,
			body.light-mode .form-group textarea:focus {
				background: #ffffff;
				border-color: var(--accent);
				color: #1a1a2e;
			}

			.form-group textarea {
				resize: vertical;
				min-height: 160px;
			}

			.contact-submit-btn {
				padding: 20px 48px;
				background: var(--cta);
				color: var(--cta-text);
				border: none;
				border-radius: 12px;
				font-size: 18px;
				font-weight: 700;
				letter-spacing: 0.5px;
				cursor: pointer;
				transition: all 0.2s ease;
				align-self: flex-start;
				box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
			}

			.contact-submit-btn:hover {
				transform: translateY(-2px);
				box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
			}

			.contact-submit-btn:focus {
				outline: 3px solid var(--accent-secondary);
				outline-offset: 3px;
			}

			.contact-submit-btn:active {
				transform: translateY(0);
			}

			@media (max-width: 768px) {
				.form-row {
					grid-template-columns: 1fr;
				}

				.contact-form {
					padding: 24px 20px;
				}

				.contact-form-title {
					font-size: 24px;
					margin-bottom: 16px;
				}

				.contact-form-container {
					padding: 0 16px;
				}

				.contact-form .wpcf7-form {
					gap: 24px;
				}
			}

			.coming-soon-contact a {
				color: var(--accent);
				text-decoration: none;
				font-weight: 600;
			}

			.coming-soon-contact a:hover {
				text-decoration: underline;
			}

			.coming-soon-privacy-note {
				font-size: 16px;
				color: var(--muted);
				margin: 12px 0 0 0;
			}

			/* Contact Form 7 Styling for Notify Me Section */
			.coming-soon-form-section .wpcf7 {
				width: 100%;
			}

			.coming-soon-form-section .wpcf7-form {
				display: flex !important;
				flex-direction: column !important;
				width: 100%;
				align-items: center;
				justify-content: center;
				gap: 16px;
			}

			.coming-soon-form-section .wpcf7-form > p {
				margin: 0 !important;
				display: flex !important;
				gap: 12px;
				align-items: stretch;
				width: 100% !important;
				max-width: 1000px !important;
				justify-content: center;
			}

			.coming-soon-form-section .wpcf7-form > p .wpcf7-form-control-wrap {
				width: 100% !important;
				display: block !important;
			}

			.coming-soon-form-section .wpcf7-form > p:has(input[type="email"]) {
				justify-content: center;
			}

			.coming-soon-form-section .wpcf7-form > p:has(input[type="email"]) .wpcf7-form-control-wrap {
				display: flex;
				width: 100%;
			}

			.coming-soon-form-section .wpcf7-form > p:has(input[type="submit"]),
			.coming-soon-form-section .wpcf7-form > p:has(button[type="submit"]) {
				justify-content: center;
				align-items: stretch;
			}

			/* Email input */
			.coming-soon-form-section .wpcf7-form input[type="email"] {
				width: 100% !important;
				padding: 16px 20px;
				background: var(--bg);
				border: 1px solid var(--card-border);
				border-radius: 10px;
				color: var(--text);
				font-size: 18px;
				font-family: var(--main-font);
				transition: all 0.3s ease;
				max-width: 100% !important;
				box-sizing: border-box !important;
				text-align: left;
			}

			body.light-mode .coming-soon-form-section .wpcf7-form input[type="email"] {
				background: #ffffff;
				border-color: rgba(0, 0, 0, 0.15);
				color: #1a1a2e;
			}

			.coming-soon-form-section .wpcf7-form input[type="email"]::placeholder {
				color: var(--muted);
			}

			.coming-soon-form-section .wpcf7-form input[type="email"]:focus {
				outline: none;
				border-color: var(--accent);
				box-shadow: 0 0 0 3px var(--ring);
			}

			/* Submit button */
			.coming-soon-form-section .wpcf7-form input[type="submit"],
			.coming-soon-form-section .wpcf7-form button[type="submit"],
			.coming-soon-form-section .wpcf7-submit,
			.coming-soon-form-section input[type="submit"],
			.coming-soon-form-section button[type="submit"],
			.coming-soon-form-section .wpcf7 input[type="submit"],
			.coming-soon-form-section .wpcf7 button[type="submit"],
			.coming-soon-form-section input[type="submit"].wpcf7-submit,
			.coming-soon-form-section button[type="submit"].wpcf7-submit,
			.coming-soon-form-section [type="submit"] {
				padding: 18px 40px;
				background: var(--cta);
				border: none;
				border-radius: 10px;
				color: var(--cta-text);
				font-size: 18px;
				font-weight: 700;
				letter-spacing: 0.5px;
				font-family: var(--main-font);
				cursor: pointer;
				transition: all 0.2s ease;
				box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
				white-space: nowrap;
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}

			.coming-soon-form-section .wpcf7-form input[type="submit"]:hover,
			.coming-soon-form-section .wpcf7-form button[type="submit"]:hover,
			.coming-soon-form-section .wpcf7-submit:hover,
			.coming-soon-form-section input[type="submit"]:hover,
			.coming-soon-form-section button[type="submit"]:hover {
				transform: translateY(-2px);
				box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
			}

			/* Privacy note / response output */
			.coming-soon-form-section .wpcf7-mail-sent-ok,
			.coming-soon-form-section .wpcf7-response-output,
			.coming-soon-form-section .wpcf7-form > p:last-child {
				font-size: 16px;
				color: var(--muted);
				margin: 16px 0 0 0;
				padding: 0;
				border: none;
				background: transparent;
				width: 100%;
			}

			.coming-soon-form-section .wpcf7-mail-sent-ok {
				color: #51cf66;
			}

			.coming-soon-form-section .wpcf7-validation-errors,
			.coming-soon-form-section .wpcf7-mail-sent-ng {
				color: #ff6b6b;
				font-size: 16px;
				margin: 16px 0 0 0;
			}

			.coming-soon-form-section .wpcf7-not-valid-tip {
				color: #ff6b6b;
				font-size: 14px;
				margin-top: 8px;
			}

			/* Keep labels hidden */
			.coming-soon-form-section .wpcf7-form-control-wrap {
				display: flex;
				flex-direction: column;
				gap: 8px;
			}

			/* Hide spinner when not active */
			.coming-soon-form-section .wpcf7-spinner {
				display: none !important;
			}

			.coming-soon-form-section .wpcf7-form label {
				font-size: 14px;
				font-weight: 600;
				color: var(--text);
				margin-bottom: 8px;
				text-align: left;
				display: block;
				width: 100%;
			}

			/* Responsive */
			@media (max-width: 768px) {
				.coming-soon-form-section .wpcf7-form {
					flex-direction: column !important;
					gap: 12px;
				}

				.coming-soon-form-section .wpcf7-form > p {
					width: 100% !important;
				}

				.coming-soon-form-section .wpcf7-form input[type="email"],
				.coming-soon-form-section .wpcf7-form input[type="submit"],
				.coming-soon-form-section .wpcf7-form button[type="submit"] {
					width: 100%;
					box-sizing: border-box;
				}
			}

			.coming-soon-contact-email {
				font-size: 14px;
				color: var(--text);
				margin: 16px 0 0 0;
			}

			.coming-soon-contact-email a {
				color: var(--accent);
				text-decoration: none;
			}

			.coming-soon-contact-email a:hover {
				text-decoration: underline;
			}

			/* Contact Form 7 Styling */
			.contact-form .wpcf7 {
				width: 100%;
			}

			.wpcf7-form {
				display: flex;
				flex-direction: column;
				gap: 32px;
			}

			.wpcf7-form-control-wrap {
				display: flex;
				flex-direction: column;
				gap: 8px;
			}

			/* Reset default p margins */
			.wpcf7-form > p {
				margin: 0;
			}

			/* First two fields side by side using flexbox */
			.wpcf7-form > p:nth-of-type(1) {
				display: inline-block;
				width: calc(50% - 12px);
				vertical-align: top;
				margin-right: 24px;
				margin-bottom: 0;
			}

			.wpcf7-form > p:nth-of-type(2) {
				display: inline-block;
				width: calc(50% - 12px);
				vertical-align: top;
				margin-bottom: 0;
			}

			/* Full width for all other fields */
			.wpcf7-form > p:nth-of-type(n+3) {
				width: 100%;
				display: block;
			}

			/* Force full width for specific field types */
			.wpcf7-form > p:has(select),
			.wpcf7-form > p:has(textarea),
			.wpcf7-form > p:has(input[type="submit"]),
			.wpcf7-form > p:has(button[type="submit"]),
			.wpcf7-form > p:has(.wpcf7-submit) {
				width: 100% !important;
				display: block !important;
				margin-right: 0 !important;
			}

			@media (max-width: 768px) {
				.wpcf7-form {
					gap: 16px !important;
				}

				.wpcf7-form > p:nth-of-type(1),
				.wpcf7-form > p:nth-of-type(2) {
					width: 100% !important;
					display: block !important;
					margin-right: 0 !important;
					margin-bottom: 0 !important;
				}

				.wpcf7-form input[type="text"],
				.wpcf7-form input[type="email"],
				.wpcf7-form input[type="tel"],
				.wpcf7-form select,
				.wpcf7-form textarea {
					width: 100% !important;
					box-sizing: border-box;
				}

				.wpcf7-form input[type="submit"],
				.wpcf7-form button[type="submit"],
				.wpcf7-submit {
					width: 100% !important;
					box-sizing: border-box;
				}
			}

			.wpcf7-form label {
				font-size: 14px;
				font-weight: 600;
				color: var(--text);
				margin-bottom: 8px;
			}

			.wpcf7-form input[type="text"],
			.wpcf7-form input[type="email"],
			.wpcf7-form input[type="tel"],
			.wpcf7-form input[type="url"],
			.wpcf7-form input[type="number"],
			.wpcf7-form select,
			.wpcf7-form textarea {
				padding: 16px 20px;
				background: rgba(248, 249, 250, 0.08);
				border: 1px solid var(--card-border);
				border-radius: 8px;
				font-size: 16px;
				color: var(--text);
				font-family: inherit;
				transition: all 0.3s ease;
				width: 100%;
				box-sizing: border-box;
				-webkit-appearance: none;
				appearance: none;
			}

			body.light-mode .wpcf7-form input[type="text"],
			body.light-mode .wpcf7-form input[type="email"],
			body.light-mode .wpcf7-form input[type="tel"],
			body.light-mode .wpcf7-form input[type="url"],
			body.light-mode .wpcf7-form input[type="number"],
			body.light-mode .wpcf7-form select,
			body.light-mode .wpcf7-form textarea {
				background: #ffffff;
				border-color: rgba(0, 0, 0, 0.15);
				color: #1a1a2e;
			}

			.wpcf7-form input:focus,
			.wpcf7-form select:focus,
			.wpcf7-form textarea:focus {
				outline: none;
				border-color: var(--accent);
				background: rgba(248, 249, 250, 0.12);
			}

			body.light-mode .wpcf7-form input:focus,
			body.light-mode .wpcf7-form select:focus,
			body.light-mode .wpcf7-form textarea:focus {
				background: #ffffff;
				border-color: var(--accent);
				color: #1a1a2e;
			}

			.wpcf7-form textarea {
				resize: vertical;
				min-height: 160px;
			}

			.wpcf7-form input[type="submit"],
			.wpcf7-form button[type="submit"],
			.wpcf7-submit {
				padding: 20px 48px !important;
				background: var(--cta) !important;
				color: var(--cta-text) !important;
				border: none !important;
				border-radius: 12px !important;
				font-size: 18px !important;
				font-weight: 700 !important;
				letter-spacing: 0.5px !important;
				cursor: pointer !important;
				transition: all 0.2s ease !important;
				align-self: flex-start !important;
				box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
				font-family: inherit !important;
			}

			.wpcf7-form input[type="submit"]:hover,
			.wpcf7-form button[type="submit"]:hover,
			.wpcf7-submit:hover {
				transform: translateY(-2px) !important;
				box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
			}

			.wpcf7-form input[type="submit"]:focus,
			.wpcf7-form button[type="submit"]:focus,
			.wpcf7-submit:focus {
				outline: 3px solid var(--accent-secondary) !important;
				outline-offset: 3px !important;
			}

			.wpcf7-form input[type="submit"]:active,
			.wpcf7-form button[type="submit"]:active,
			.wpcf7-submit:active {
				transform: translateY(0) !important;
			}

			.wpcf7-validation-errors,
			.wpcf7-mail-sent-ok,
			.wpcf7-mail-sent-ng,
			.wpcf7-spam,
			.wpcf7-not-valid-tip {
				color: var(--text);
				font-size: 14px;
				margin-top: 8px;
			}

			.wpcf7-not-valid-tip {
				color: #ff6b6b;
			}

			.wpcf7-mail-sent-ok {
				color: #51cf66;
				background: rgba(81, 207, 102, 0.1);
				padding: 12px 16px;
				border-radius: 8px;
				border: 1px solid rgba(81, 207, 102, 0.3);
			}

			.wpcf7-validation-errors,
			.wpcf7-mail-sent-ng,
			.wpcf7-spam {
				color: #ff6b6b;
				background: rgba(255, 107, 107, 0.1);
				padding: 12px 16px;
				border-radius: 8px;
				border: 1px solid rgba(255, 107, 107, 0.3);
			}

			.wpcf7-form .wpcf7-checkbox,
			.wpcf7-form .wpcf7-radio {
				display: flex;
				flex-direction: column;
				gap: 8px;
			}

			.wpcf7-form .wpcf7-list-item {
				display: flex;
				align-items: center;
				gap: 8px;
			}

			.wpcf7-form .wpcf7-list-item input[type="checkbox"],
			.wpcf7-form .wpcf7-list-item input[type="radio"] {
				width: auto;
				margin: 0;
			}

			body.light-mode .coming-soon-right {
				background: #ffffff;
				border-color: rgba(0, 0, 0, 0.1);
			}

			body.light-mode .coming-soon-feature-tag,
			body.light-mode .coming-soon-tag {
				background: #f5f5f5;
				color: #1a1a1a;
			}

			body:not(.light-mode) .coming-soon-feature-tag,
			body:not(.light-mode) .coming-soon-tag {
				background: rgba(255, 255, 255, 0.1);
				color: var(--text);
			}

			body.light-mode .coming-soon-email-input {
				background: #f5f5f5;
				border-color: rgba(0, 0, 0, 0.1);
				color: #000000;
			}

			@media (max-width: 768px) {
				.coming-soon-banner {
					grid-template-columns: 1fr;
					padding: 20px 16px;
					gap: 24px;
				}

				.coming-soon-content {
					width: 100%;
					max-width: 100%;
				}

				.coming-soon-content h2 {
					font-size: 28px;
					line-height: 1.3;
					margin-bottom: 16px;
				}

				.coming-soon-badge {
					font-size: 12px;
					margin-bottom: 12px;
				}

				.coming-soon-content p {
					font-size: 16px;
					line-height: 1.6;
					margin-bottom: 16px;
				}

				.coming-soon-features {
					gap: 8px;
					margin: 16px 0;
				}

				.coming-soon-feature-tag {
					padding: 10px 16px;
					font-size: 13px;
				}

				.coming-soon-order-details {
					margin: 16px 0;
				}

				.coming-soon-order-details-title {
					font-size: 16px;
					margin-bottom: 10px;
				}

				.coming-soon-order-tags {
					gap: 8px;
				}

				.coming-soon-order-tag {
					padding: 10px 16px;
					font-size: 13px;
				}

				.coming-soon-hero-image {
					min-height: 250px;
					order: -1;
					width: 100%;
					max-width: 100%;
				}

				.coming-soon-hero-image img {
					width: 100%;
					height: auto;
					max-height: 400px;
					object-fit: cover;
				}

				.coming-soon-email-form {
					flex-direction: column;
				}

				.coming-soon-email-input,
				.coming-soon-notify-btn {
					width: 100%;
				}

				.coming-soon-form-section {
					padding: 28px 20px;
				}

				/* Reduce padding for Get Notified section on mobile */
				.content-section:has(.coming-soon-form-section) {
					padding-top: 40px;
					padding-bottom: 40px;
				}

				.coming-soon-form-section h3 {
					font-size: 24px;
					margin-bottom: 12px;
				}

				.coming-soon-form-section p {
					font-size: 16px;
					margin-bottom: 20px;
				}

				.coming-soon-privacy-note {
					font-size: 14px;
				}

				.hero-email-contact {
					margin-top: 20px;
				}

				.hero-email-contact p {
					font-size: 16px;
				}
			}

			@media (max-width: 1024px) {
				.coming-soon-container {
					grid-template-columns: 1fr;
					gap: 40px;
				}

				.coming-soon-right {
					padding: 32px 24px;
				}
			}

			@media (max-width: 768px) {
				.coming-soon-section {
					padding: 60px 20px;
				}

				.coming-soon-cta-group {
					flex-direction: column;
				}

				.coming-soon-cta-primary,
				.coming-soon-cta-secondary {
					width: 100%;
					text-align: center;
				}

				.coming-soon-email-form {
					flex-direction: column;
				}

				.coming-soon-email-input,
				.coming-soon-notify-btn {
					width: 100%;
				}

				/* CTA Button Mobile */
				.cta-button {
					padding: 16px 24px;
					font-size: 15px;
					width: 100%;
					text-align: center;
					display: block;
				}
			}

			/* Page Template Styles */
			.page-content {
				width: 100%;
			}

			.page-content .content-section {
				padding: 80px 24px;
			}

			.page-featured-image {
				margin-bottom: 40px;
				border-radius: 16px;
				overflow: hidden;
			}

			.page-featured-image img {
				width: 100%;
				height: auto;
				display: block;
			}

			.page-header {
				margin-bottom: 32px;
			}

			.page-title {
				font-family: var(--main-font);
				font-size: clamp(32px, 4vw, 48px);
				font-weight: 700;
				color: var(--text);
				margin: 0 0 24px 0;
				line-height: 1.2;
			}

			.page-content-wrapper {
				max-width: 900px;
				margin: 0 auto;
			}

			.page-content-text {
				font-size: 18px;
				line-height: 1.8;
				color: var(--text);
			}

			.page-content-text p {
				margin: 0 0 24px 0;
			}

			.page-content-text h2 {
				font-family: var(--main-font);
				font-size: 32px;
				font-weight: 700;
				color: var(--text);
				margin: 40px 0 20px 0;
				line-height: 1.3;
			}

			.page-content-text h3 {
				font-family: var(--main-font);
				font-size: 24px;
				font-weight: 600;
				color: var(--text);
				margin: 32px 0 16px 0;
				line-height: 1.4;
			}

			.page-content-text h4 {
				font-family: var(--main-font);
				font-size: 20px;
				font-weight: 600;
				color: var(--text);
				margin: 24px 0 12px 0;
				line-height: 1.4;
			}

			.page-content-text ul,
			.page-content-text ol {
				margin: 24px 0;
				padding-left: 32px;
			}

			.page-content-text li {
				margin-bottom: 12px;
				line-height: 1.7;
			}

			.page-content-text a {
				color: var(--accent);
				text-decoration: none;
				transition: color 0.2s ease;
			}

			.page-content-text a:hover {
				color: var(--cta);
				text-decoration: underline;
			}

			.page-content-text blockquote {
				margin: 32px 0;
				padding: 24px 32px;
				border-left: 4px solid var(--accent);
				background: var(--card);
				border-radius: 8px;
				font-style: italic;
				color: var(--muted);
			}

			.page-content-text img {
				max-width: 100%;
				height: auto;
				border-radius: 12px;
				margin: 32px 0;
			}

			.page-content-text table {
				width: 100%;
				margin: 32px 0;
				border-collapse: collapse;
			}

			.page-content-text table th,
			.page-content-text table td {
				padding: 12px 16px;
				border: 1px solid var(--card-border);
				text-align: left;
			}

			.page-content-text table th {
				background: var(--card);
				font-weight: 600;
				color: var(--text);
			}

			.page-links {
				margin-top: 40px;
				padding-top: 24px;
				border-top: 1px solid var(--card-border);
				font-size: 16px;
			}

			.page-links a {
				color: var(--accent);
				text-decoration: none;
				margin: 0 8px;
			}

			.page-links a:hover {
				text-decoration: underline;
			}

			.page-comments {
				margin-top: 60px;
				padding-top: 40px;
				border-top: 1px solid var(--card-border);
			}

			@media (max-width: 768px) {
				.page-content .content-section {
					padding: 40px 20px;
				}

				.page-featured-image {
					margin-bottom: 24px;
				}

				.page-title {
					font-size: 28px;
					margin-bottom: 20px;
				}

				.page-content-text {
					font-size: 16px;
				}

				.page-content-text h2 {
					font-size: 24px;
					margin: 32px 0 16px 0;
				}

				.page-content-text h3 {
					font-size: 20px;
					margin: 24px 0 12px 0;
				}

				.page-content-text h4 {
					font-size: 18px;
					margin: 20px 0 10px 0;
				}

				.page-content-text ul,
				.page-content-text ol {
					padding-left: 24px;
				}

				.page-content-text blockquote {
					padding: 20px 24px;
					margin: 24px 0;
				}
			}